/* ════════════════════════════════════════════════════════════════════
   rv-3d-premium.css
   Ultra premium cinematic 3D layer — purely additive on top of the
   existing pink (#f43b8a) + dark (#060508) palette.
   Targets: hero, section reveals, glass cards, magnetic CTAs, custom
   cursor. All effects are gated behind prefers-reduced-motion / no-tilt
   classes added by rv-3d-premium.js.
   ════════════════════════════════════════════════════════════════════ */

/* ─── 1. Global scene container (Three.js canvas host) ──────────────── */
.rv-webgl-stage{
    position:fixed;
    inset:0;
    z-index:-2;            /* behind .rv-page-ambient (which is -1) */
    pointer-events:none;
    overflow:hidden;
    contain:strict;
    will-change:transform,opacity;
    opacity:0;             /* fade in once Three.js confirms render */
    transition:opacity 1.2s ease-out;
}
.rv-webgl-stage.is-ready{ opacity:.85; }

.rv-webgl-stage canvas{
    display:block;
    width:100% !important;
    height:100% !important;
    position:absolute;
    inset:0;
}

/* Subtle vignette so the WebGL particle field melts into the page edges */
.rv-webgl-stage::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(ellipse at 50% 40%,transparent 35%,rgba(6,5,8,.55) 78%,rgba(6,5,8,.92) 100%),
        linear-gradient(180deg,rgba(6,5,8,.1) 0%,transparent 25%,transparent 75%,rgba(6,5,8,.4) 100%);
}

/* If WebGL fails / not supported, hide and fall back to existing aurora */
.rv-webgl-stage.is-failed{ display:none !important; }

/* ─── 2. Custom cursor — devre dışı (fareyi takip eden parlaklık kaldırıldı) */
.rv-cursor,
.rv-cursor-dot{
    display: none !important;
}
.rv-cursor{
    width:46px;
    height:46px;
    margin-left:-23px;
    margin-top:-23px;
    border-radius:50%;
    background:radial-gradient(circle,
        rgba(244,59,138,.35) 0%,
        rgba(244,59,138,.18) 35%,
        rgba(124,58,237,.10) 60%,
        transparent 78%);
    filter:blur(2px) saturate(1.2);
    /* transform burada JS ile sürülür; transition gecikme yaratır */
    transition:width .22s ease,height .22s ease,opacity .25s ease;
}
.rv-cursor-dot{
    width:6px;
    height:6px;
    margin-left:-3px;
    margin-top:-3px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 0 12px rgba(244,59,138,.85),0 0 28px rgba(244,59,138,.45);
}
body.rv-cursor-on .rv-cursor,
body.rv-cursor-on .rv-cursor-dot{ opacity:1; }
body.rv-cursor-hovering .rv-cursor{
    width:74px;
    height:74px;
    margin-left:-37px;
    margin-top:-37px;
}

/* Hide cursor on touch devices */
@media (hover:none),(pointer:coarse){
    .rv-cursor,.rv-cursor-dot{ display:none !important; }
}

/* ─── 3. Hero cinematic upgrade ─────────────────────────────────────── */
.hero-section.rv-hero-2025{
    perspective:1800px;
    perspective-origin:50% 30%;
}

/* Mouse-driven parallax tilt on hero text + visual */
.rv-hero-2025 .hero-title,
.rv-hero-2025 .hero-lead,
.rv-hero-2025 .rv-hero-metrics,
.rv-hero-2025 .hero-app-col,
.rv-hero-2025 .trust-strip{
    transform-style:preserve-3d;
    transition:transform .55s cubic-bezier(.2,.7,.2,1);
    will-change:transform;
}

/* Headline — sinematic 3D extrude shadow (multi-layer text-shadow) */
.rv-hero-2025 .hero-title{
    text-shadow:
        0 1px 0 rgba(255,255,255,.04),
        0 2px 0 rgba(244,59,138,.05),
        0 6px 22px rgba(0,0,0,.55),
        0 18px 60px rgba(244,59,138,.18);
    letter-spacing:-.012em;
}

.rv-hero-2025 .hero-title .rv-grad-text{
    position:relative;
    background:linear-gradient(135deg,#ffd1e6 0%,#f43b8a 35%,#7c3aed 70%,#ff7ab8 100%);
    background-size:220% 220%;
    -webkit-background-clip:text;
            background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;
    animation:rv3d-gradient-flow 9s ease-in-out infinite;
    filter:drop-shadow(0 6px 24px rgba(244,59,138,.45));
}

@keyframes rv3d-gradient-flow{
    0%,100%{ background-position:0% 50%; }
    50%    { background-position:100% 50%; }
}

/* Hero phone — adds depth + interactive tilt */
.rv-hero-2025 .rv-hero-immersive{
    transform-style:preserve-3d;
    transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.rv-hero-2025 .rv-3d-cluster{
    transform-style:preserve-3d;
}
.rv-hero-2025 .phone-frame{
    transform-style:preserve-3d;
    transition:transform .6s cubic-bezier(.2,.7,.2,1),box-shadow .6s ease;
    will-change:transform;
}
.rv-hero-2025 .phone-frame::after{
    content:"";
    position:absolute;
    inset:-2px;
    border-radius:inherit;
    background:linear-gradient(135deg,
        rgba(244,59,138,.55) 0%,
        rgba(124,58,237,.35) 35%,
        rgba(244,59,138,.25) 65%,
        rgba(255,255,255,.15) 100%);
    z-index:-1;
    filter:blur(28px) saturate(1.4);
    opacity:.6;
    pointer-events:none;
    transition:opacity .5s ease;
}
.rv-hero-2025 .phone-frame:hover::after{ opacity:.9; }

/* Hero floats lift higher in 3D */
.rv-hero-2025 .rv-3d-floats__bob{
    transform-style:preserve-3d;
}

/* ─── 4. Section reveal — Sahakolik tarzı düz fade-up (scroll) ───────── */
.rv-3d-reveal{
    opacity:0;
    transform:translate3d(0,40px,0);
    transition:opacity .7s ease,transform .7s ease;
}
.rv-3d-reveal.is-visible{
    opacity:1;
    transform:translate3d(0,0,0);
}

.rv-3d-reveal--left{
    transform:translate3d(-24px,40px,0);
}
.rv-3d-reveal--right{
    transform:translate3d(24px,40px,0);
}
.rv-3d-reveal--left.is-visible,
.rv-3d-reveal--right.is-visible{
    transform:translate3d(0,0,0);
}

/* Stagger — JS sets --rv-stagger (≈80ms adım, Sahakolik 0.08s) */
.rv-3d-reveal{ transition-delay:calc(var(--rv-stagger,0) * 80ms); }

/* ─── 5. Premium card tilt (interactive) ────────────────────────────── */
.rv-card-tilt{
    transform-style:preserve-3d;
    transform:perspective(1200px) rotateX(0) rotateY(0) translateZ(0);
    transition:transform .6s cubic-bezier(.2,.7,.2,1),box-shadow .6s ease;
    will-change:transform;
    position:relative;
    isolation:isolate;
}
.rv-card-tilt::before{
    /* dynamic spotlight that follows the cursor (set via --mx/--my) */
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:radial-gradient(
        420px circle at calc(var(--mx,50%) ) calc(var(--my,50%) ),
        rgba(244,59,138,.18),
        rgba(124,58,237,.08) 40%,
        transparent 65%);
    opacity:0;
    transition:opacity .35s ease;
    pointer-events:none;
    z-index:1;
    mix-blend-mode:screen;
}
.rv-card-tilt::after{
    /* animated gradient border on hover */
    content:"";
    position:absolute;
    inset:-1px;
    border-radius:inherit;
    padding:1px;
    background:conic-gradient(from var(--rv-angle,0deg),
        rgba(244,59,138,.0) 0deg,
        rgba(244,59,138,.65) 90deg,
        rgba(124,58,237,.65) 180deg,
        rgba(244,59,138,.65) 270deg,
        rgba(244,59,138,.0) 360deg);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
            mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
            mask-composite:exclude;
    opacity:0;
    transition:opacity .5s ease;
    pointer-events:none;
    z-index:2;
}
.rv-card-tilt.is-hover::before,
.rv-card-tilt:hover::before{ opacity:1; }
.rv-card-tilt.is-hover::after,
.rv-card-tilt:hover::after{ opacity:1; animation:rv3d-border-spin 6s linear infinite; }

@property --rv-angle{
    syntax:"<angle>";
    inherits:false;
    initial-value:0deg;
}
@keyframes rv3d-border-spin{
    to{ --rv-angle:360deg; }
}

/* When tilt is active, give a deeper shadow */
.rv-card-tilt.is-hover{
    box-shadow:
        0 30px 70px -20px rgba(0,0,0,.65),
        0 18px 40px -10px rgba(244,59,138,.30),
        0 0 0 1px rgba(255,255,255,.08) inset;
}

/* Inner content lifts above the spotlight overlay */
.rv-card-tilt > *{ position:relative; z-index:3; transform:translateZ(0); }

/* ─── 6. Magnetic CTA buttons ───────────────────────────────────────── */
.rv-magnetic{
    position:relative;
    transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,filter .35s ease;
    will-change:transform;
    transform-style:preserve-3d;
}
.rv-magnetic::before{
    content:"";
    position:absolute;
    inset:-2px;
    border-radius:inherit;
    background:radial-gradient(circle at 30% 20%,
        rgba(244,59,138,.55),
        rgba(124,58,237,.35) 40%,
        transparent 70%);
    filter:blur(18px);
    opacity:0;
    transition:opacity .4s ease;
    z-index:-1;
}
.rv-magnetic:hover::before{ opacity:1; }
.rv-magnetic:hover{
    filter:brightness(1.08);
    box-shadow:0 18px 40px -12px rgba(244,59,138,.55);
}
.rv-magnetic > *{ pointer-events:none; }

/* ─── 7. Glass premium upgrade ──────────────────────────────────────── */
.rv-glass-premium{
    background:linear-gradient(135deg,
        rgba(255,255,255,.05) 0%,
        rgba(244,59,138,.04) 40%,
        rgba(124,58,237,.04) 70%,
        rgba(255,255,255,.02) 100%);
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    box-shadow:
        0 30px 70px -30px rgba(0,0,0,.55),
        inset 0 1px 0 rgba(255,255,255,.08);
}

/* ─── 8. Section heading layered 3D look ────────────────────────────── */
.rv-3d-heading{
    position:relative;
    display:inline-block;
    transform-style:preserve-3d;
}
.rv-3d-heading::before{
    content:attr(data-shadow);
    position:absolute;
    inset:0;
    z-index:-1;
    color:transparent;
    -webkit-text-stroke:1px rgba(244,59,138,.25);
    transform:translate3d(6px,8px,-30px);
    filter:blur(.5px);
    pointer-events:none;
    user-select:none;
}

/* ─── 9. Floating depth utilities ───────────────────────────────────── */
.rv-depth-float{
    animation:rv3d-depth-float 8s ease-in-out infinite;
    transform-style:preserve-3d;
    will-change:transform;
}
.rv-depth-float--slow{ animation-duration:14s; }
.rv-depth-float--alt  { animation-direction:alternate-reverse; }

@keyframes rv3d-depth-float{
    0%,100%{ transform:translate3d(0,0,0) rotateX(0) rotateY(0); }
    50%    { transform:translate3d(0,-14px,30px) rotateX(2deg) rotateY(-1.4deg); }
}

/* ─── 10. Scroll-progress ambient bar (top of viewport) ─────────────── */
.rv-scroll-progress{
    position:fixed;
    top:0;
    left:0;
    height:2px;
    width:100%;
    background:transparent;
    z-index:9998;
    pointer-events:none;
}
.rv-scroll-progress__bar{
    height:100%;
    width:0;
    background:linear-gradient(90deg,#f43b8a 0%,#7c3aed 50%,#ff7ab8 100%);
    box-shadow:0 0 18px rgba(244,59,138,.65),0 0 32px rgba(124,58,237,.35);
    transition:width .12s linear;
}

/* ─── 11. Navbar premium 3D depth on scroll ─────────────────────────── */
body.rv-scrolled .navbar-rv-cinematic{
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    box-shadow:
        0 16px 40px -10px rgba(0,0,0,.65),
        inset 0 -1px 0 rgba(244,59,138,.18);
}

@media (max-width:1199.98px),(pointer:coarse){
    body.rv-scrolled .navbar-rv-cinematic{
        backdrop-filter:none;
        -webkit-backdrop-filter:none;
        box-shadow:0 8px 24px -8px rgba(0,0,0,.5);
    }
    .rv-scroll-progress{ display:none !important; }
}

/* ─── 12. Hero metrics — 3D stack reveal ────────────────────────────── */
.rv-hero-2025 .rv-hero-metrics__item{
    transform-style:preserve-3d;
    transition:transform .5s cubic-bezier(.2,.7,.2,1),text-shadow .4s ease;
}
.rv-hero-2025 .rv-hero-metrics__item:hover{
    transform:translateZ(20px) rotateY(-4deg);
}
.rv-hero-2025 .rv-hero-metrics__v{
    text-shadow:0 4px 14px rgba(244,59,138,.40),0 1px 0 rgba(255,255,255,.05);
}

/* ─── 13. Floating cards extra depth + holographic shimmer ──────────── */
.rv-hero-2025 .floating-card{
    box-shadow:
        0 22px 60px -18px rgba(0,0,0,.7),
        0 8px 22px -6px rgba(244,59,138,.35),
        inset 0 1px 0 rgba(255,255,255,.12);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    position:relative;
    overflow:hidden;
}
.rv-hero-2025 .floating-card::after{
    content:"";
    position:absolute;
    inset:-50%;
    background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.18) 50%,transparent 60%);
    transform:translateX(-100%);
    animation:rv3d-shimmer 5.5s ease-in-out infinite;
    pointer-events:none;
}
@keyframes rv3d-shimmer{
    0%,55%,100% { transform:translateX(-120%); }
    65%,90%     { transform:translateX(120%); }
}

/* ─── 14. Section glow rim ──────────────────────────────────────────── */
.rv-3d-rim{
    position:relative;
}
.rv-3d-rim::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(60% 50% at 10% 0%,rgba(244,59,138,.10),transparent 60%),
        radial-gradient(60% 50% at 90% 100%,rgba(124,58,237,.10),transparent 60%);
    opacity:.7;
    z-index:0;
}
.rv-3d-rim > *{ position:relative; z-index:1; }

/* ─── 15. Cinematic noise overlay (very faint) ──────────────────────── */
.rv-3d-noise{
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    opacity:.05;
    mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ─── 16. Reduced motion / no-3d fallback ───────────────────────────── */
@media (prefers-reduced-motion:reduce){
    .rv-webgl-stage{ display:none !important; }
    .rv-cursor,.rv-cursor-dot{ display:none !important; }
    .rv-3d-reveal{
        opacity:1 !important;
        transform:none !important;
        transition:none !important;
    }
    .rv-card-tilt,
    .rv-magnetic,
    .rv-depth-float,
    .rv-hero-2025 .hero-title .rv-grad-text,
    .rv-hero-2025 .floating-card::after{
        animation:none !important;
        transform:none !important;
    }
}

body.rv-no-3d .rv-webgl-stage,
body.rv-no-3d .rv-cursor,
body.rv-no-3d .rv-cursor-dot{ display:none !important; }

/* ─── 17. Mobile tuning — disable expensive layers below 720px ──────── */
@media (max-width:720px){
    .rv-webgl-stage{ opacity:.55; }
    .rv-3d-noise{ display:none; }
    .rv-3d-reveal{
        transform:translate3d(0,36px,0);
    }
    .rv-card-tilt::after{ display:none; }
}

/* ─── 17b. Tablet / dokunmatik — WebGL + ağır katmanlar (JS WebGL de kapalı) ─ */
@media (max-width:1199.98px),(pointer:coarse){
    .rv-webgl-stage{ display:none !important; }
    .rv-3d-noise{ display:none !important; }

    .hero-section.rv-hero-2025{
        perspective:none;
    }
    .rv-hero-2025 .hero-title,
    .rv-hero-2025 .hero-lead,
    .rv-hero-2025 .rv-hero-metrics,
    .rv-hero-2025 .hero-app-col,
    .rv-hero-2025 .trust-strip{
        transform-style:flat;
        will-change:auto;
    }
    .rv-hero-2025 .hero-title .rv-grad-text{
        animation:none;
        background-size:100% 100%;
        background-position:50% 50%;
    }
    .rv-hero-2025 .phone-frame{
        will-change:auto;
    }
    .rv-hero-2025 .phone-frame::after{
        filter:blur(14px) saturate(1.15);
        opacity:.45;
    }

    .rv-3d-reveal,
    .rv-3d-reveal--left,
    .rv-3d-reveal--right{
        transform:translate3d(0,36px,0) !important;
        transition:opacity .55s ease,transform .55s ease !important;
        will-change:auto !important;
    }
    .rv-3d-reveal--left:not(.is-visible){
        transform:translate3d(-14px,32px,0) !important;
    }
    .rv-3d-reveal--right:not(.is-visible){
        transform:translate3d(14px,32px,0) !important;
    }
    .rv-3d-reveal.is-visible,
    .rv-3d-reveal--left.is-visible,
    .rv-3d-reveal--right.is-visible{
        opacity:1 !important;
        transform:translate3d(0,0,0) !important;
    }

    .rv-card-tilt{
        will-change:auto;
        transform-style:flat;
    }
    .rv-card-tilt::before,
    .rv-card-tilt::after{ display:none !important; }

    .rv-magnetic{ will-change:auto; }

    .rv-depth-float{
        animation:none !important;
    }
    .rv-hero-2025 .floating-card::after{
        animation:none !important;
    }
}

/* ════════════════════════════════════════════════════════════════════
   18. TESTIMONIALS — premium 3D wall (10 cards)
   ════════════════════════════════════════════════════════════════════ */
.rv-testimonials{
    position:relative;
    padding-top:clamp(64px,8vw,120px);
    padding-bottom:clamp(64px,8vw,120px);
}

/* Average-rating block under the heading */
.rv-testimonials__rating{
    display:inline-flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
    margin-top:18px;
    padding:14px 22px;
    border-radius:999px;
    background:linear-gradient(135deg,
        rgba(244,59,138,.10) 0%,
        rgba(124,58,237,.08) 60%,
        rgba(255,255,255,.04) 100%);
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    box-shadow:0 14px 40px -16px rgba(244,59,138,.35),inset 0 1px 0 rgba(255,255,255,.08);
}
.rv-testimonials__rating-stars{
    display:inline-flex;
    gap:3px;
    color:#ffc857;
    font-size:1rem;
    text-shadow:0 0 12px rgba(255,200,87,.6);
}
.rv-testimonials__rating-num{
    font-family:'Outfit',system-ui,sans-serif;
    font-weight:700;
    font-size:1.25rem;
    color:#fff;
    letter-spacing:-.01em;
}
.rv-testimonials__rating-of{
    color:rgba(255,255,255,.55);
    font-weight:500;
    font-size:.95em;
}
.rv-testimonials__rating-meta{
    color:#9a92a8;
    font-size:.875rem;
    border-left:1px solid rgba(255,255,255,.12);
    padding-left:14px;
}

/* ─── Marquee viewport — full-bleed kayan şerit ─────────────────────── */
.rv-testimonials__marquee{
    position:relative;
    margin-top:48px;
    /* Container'dan taşıp ekran kenarına kadar uzansın */
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    width:100vw;
    overflow:hidden;
    /* Kenarlarda yumuşak fade — kartlar sahneye girip çıkıyormuş hissi */
    -webkit-mask-image:linear-gradient(90deg,
        transparent 0,
        #000 8%,
        #000 92%,
        transparent 100%);
            mask-image:linear-gradient(90deg,
        transparent 0,
        #000 8%,
        #000 92%,
        transparent 100%);
    padding:14px 0 18px;
    perspective:2000px;
}

/* Track — animasyonlu flex bantı, kartlar yan yana */
.rv-testimonials__track{
    display:flex;
    align-items:stretch;
    gap:22px;
    width:max-content;            /* içeriğine göre genişlik */
    will-change:transform;
    animation:rv-testimonials-scroll 75s linear infinite;
}

/* Right-to-left: 0% → -50%  (kartlar 2x render edildiği için yarıda kusursuz başa döner) */
@keyframes rv-testimonials-scroll{
    from{ transform:translate3d(0,0,0); }
    to  { transform:translate3d(-50%,0,0); }
}

/* Hover'da duraklat ki insanlar okuyabilsin */
.rv-testimonials__marquee:hover .rv-testimonials__track,
.rv-testimonials__marquee:focus-within .rv-testimonials__track{
    animation-play-state:paused;
}

/* prefers-reduced-motion / no-3d → animasyon yok, kullanıcı yatay scroll'lasın */
@media (prefers-reduced-motion:reduce){
    .rv-testimonials__marquee{
        overflow-x:auto;
        scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;
    }
    .rv-testimonials__track{ animation:none !important; transform:none !important; }
    .rv-testimonial-card{ scroll-snap-align:start; }
}

/* Individual card — sabit genişlik, marquee için optimize */
.rv-testimonial-card{
    position:relative;
    flex:0 0 auto;
    width:clamp(300px,28vw,380px);
    padding:26px 26px 22px;
    border-radius:22px;
    overflow:hidden;
    isolation:isolate;
    color:#f4f2f8;
    min-height:260px;
    display:flex;
    flex-direction:column;
    gap:16px;
    /* Kayma esnasında küçük bir 3D yüzme — kartlar tek düzlem değil */
    transform:translateZ(0);
    transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease;
}

/* Hover kart üstüne gelince hafif öne çıksın (track zaten duruyor) */
.rv-testimonial-card:hover{
    transform:translate3d(0,-4px,0) scale(1.02);
    box-shadow:
        0 30px 70px -20px rgba(0,0,0,.65),
        0 18px 40px -10px rgba(244,59,138,.30),
        0 0 0 1px rgba(255,255,255,.10) inset;
}

@media (max-width:680px){
    .rv-testimonials__track{
        gap:14px;
        animation-duration:55s;   /* mobilde biraz daha hızlı */
    }
    .rv-testimonial-card{
        width:clamp(260px,82vw,320px);
        min-height:240px;
    }
}

/* Decorative quotation mark watermark */
.rv-testimonial-card__mark{
    position:absolute;
    top:-26px;
    right:8px;
    font-family:'Outfit',serif;
    font-size:170px;
    font-weight:700;
    line-height:1;
    color:transparent;
    background:linear-gradient(135deg,rgba(244,59,138,.30),rgba(124,58,237,.15));
    -webkit-background-clip:text;
            background-clip:text;
    pointer-events:none;
    user-select:none;
    z-index:0;
}

.rv-testimonial-card__head,
.rv-testimonial-card__quote,
.rv-testimonial-card__foot{
    position:relative;
    z-index:2;
}

/* Header row: avatar + name + stars */
.rv-testimonial-card__head{
    display:flex;
    align-items:center;
    gap:14px;
}
.rv-testimonial-card__avatar{
    width:48px;
    height:48px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-family:'Outfit',sans-serif;
    font-weight:600;
    font-size:1rem;
    letter-spacing:.02em;
    flex-shrink:0;
    box-shadow:0 8px 22px -6px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.18);
    position:relative;
}
.rv-testimonial-card__avatar::after{
    content:"";
    position:absolute;
    inset:-2px;
    border-radius:inherit;
    background:inherit;
    filter:blur(10px);
    opacity:.55;
    z-index:-1;
}
/* Avatar gradient variants — cycled by data-grad */
.rv-testimonial-card__avatar[data-grad="1"]{ background:linear-gradient(135deg,#f43b8a 0%,#7c3aed 100%); }
.rv-testimonial-card__avatar[data-grad="2"]{ background:linear-gradient(135deg,#7c3aed 0%,#3b82f6 100%); }
.rv-testimonial-card__avatar[data-grad="3"]{ background:linear-gradient(135deg,#ff7ab8 0%,#f43b8a 100%); }
.rv-testimonial-card__avatar[data-grad="4"]{ background:linear-gradient(135deg,#c11b51 0%,#7c3aed 100%); }
.rv-testimonial-card__avatar[data-grad="5"]{ background:linear-gradient(135deg,#7c3aed 0%,#f43b8a 60%,#ff7ab8 100%); }

.rv-testimonial-card__meta{
    flex:1;
    min-width:0;
}
.rv-testimonial-card__name{
    font-family:'Outfit',sans-serif;
    font-weight:600;
    font-size:1rem;
    color:#fff;
    margin:0 0 2px;
    line-height:1.2;
    letter-spacing:-.005em;
    text-shadow:0 1px 0 rgba(0,0,0,.35);
}
.rv-testimonial-card__role{
    font-size:.8125rem;
    color:#9a92a8;
    margin:0;
    line-height:1.3;
}
.rv-testimonial-card__sep{
    margin:0 6px;
    opacity:.6;
}

.rv-testimonial-card__stars{
    display:inline-flex;
    gap:2px;
    color:#ffc857;
    font-size:.8125rem;
    text-shadow:0 0 10px rgba(255,200,87,.5);
    flex-shrink:0;
}

/* Quote body */
.rv-testimonial-card__quote{
    margin:0;
    font-size:.9375rem;
    line-height:1.6;
    color:rgba(244,242,248,.92);
    flex:1;
    quotes:"“" "”" "‘" "’";
    font-weight:400;
}
.rv-testimonial-card__quote::before{ content:open-quote; margin-right:2px; opacity:.7; }
.rv-testimonial-card__quote::after { content:close-quote; margin-left:2px; opacity:.7; }

/* Footer row */
.rv-testimonial-card__foot{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding-top:14px;
    border-top:1px solid rgba(255,255,255,.06);
    font-size:.75rem;
    color:#9a92a8;
}
.rv-testimonial-card__time i,
.rv-testimonial-card__verified i{
    margin-right:5px;
}
.rv-testimonial-card__verified{
    color:#9be8c4;
    font-weight:500;
}
.rv-testimonial-card__verified i{
    color:#56d99e;
    text-shadow:0 0 10px rgba(86,217,158,.5);
}

/* Hover/focus glow accent — extra premium polish */
.rv-testimonial-card{
    transition:transform .6s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease,border-color .4s ease;
}
.rv-testimonial-card:hover .rv-testimonial-card__mark{
    background:linear-gradient(135deg,rgba(244,59,138,.55),rgba(124,58,237,.30));
    -webkit-background-clip:text;
            background-clip:text;
    transition:background .5s ease;
}
.rv-testimonial-card:hover .rv-testimonial-card__name{
    color:#fff;
}

/* Mobile padding tweak */
@media (max-width:680px){
    .rv-testimonial-card{ padding:20px 20px 18px; min-height:0; }
    .rv-testimonial-card__mark{ font-size:120px; top:-18px; right:6px; }
    .rv-testimonial-card__quote{ font-size:.9rem; }
}