/* ═══════════════════════════════════════════════
   KAMU KADRO — Premium Landing Page
   Modern UI with glassmorphism, bento grid,
   gradient mesh & micro-interactions
   ═══════════════════════════════════════════════ */

/* ── Reset & Design Tokens ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
    /* Brand */
    --red:      #DC2626;
    --red-d:    #B91C1C;
    --red-l:    #EF4444;
    --red-xl:   #FCA5A5;
    --red-bg:   #FEF2F2;

    /* Neutrals */
    --white:    #FFFFFF;
    --gray-50:  #FAFAFA;
    --gray-100: #F4F4F5;
    --gray-200: #E4E4E7;
    --gray-300: #D4D4D8;
    --gray-400: #A1A1AA;
    --gray-500: #71717A;
    --gray-600: #52525B;
    --gray-700: #3F3F46;
    --gray-800: #27272A;
    --gray-900: #18181B;
    --gray-950: #09090B;

    /* Typography */
    --font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

    /* Spacing & Radius */
    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius:    16px;
    --radius-lg: 24px;
    --radius-xl: 32px;

    /* Motion */
    --ease:     cubic-bezier(.22,1,.36,1);
    --ease-out: cubic-bezier(0,.55,.45,1);
    --ease-spring: cubic-bezier(.34,1.56,.64,1);

    /* Shadows */
    --shadow-xs:  0 1px 2px rgba(0,0,0,.05);
    --shadow-sm:  0 2px 8px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.06);
    --shadow:     0 4px 16px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
    --shadow-md:  0 8px 32px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
    --shadow-lg:  0 16px 48px rgba(0,0,0,.10), 0 4px 12px rgba(0,0,0,.05);
    --shadow-xl:  0 24px 64px rgba(0,0,0,.14);
}

html{
    scroll-behavior:smooth;
    scroll-padding-top:90px;
    font-size:16px;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

body{
    font-family:var(--font);
    color:var(--gray-900);
    background:var(--white);
    overflow-x:hidden;
    line-height:1.6;
}

a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
ul{list-style:none}
button{font-family:var(--font);cursor:pointer}

.container{
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding:0 24px;
}

/* Gradient text utility */
.gradient-text{
    background:linear-gradient(135deg,var(--red) 0%,#F97316 50%,var(--red-l) 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

/* ══════════════════════════
   NAV — Glassmorphism
   ══════════════════════════ */
.nav{
    position:fixed;
    top:0;left:0;right:0;
    z-index:100;
    padding:16px 0;
    transition:all .4s var(--ease);
}

.nav.scrolled{
    padding:10px 0;
    background:rgba(255,255,255,.8);
    backdrop-filter:blur(20px) saturate(180%);
    -webkit-backdrop-filter:blur(20px) saturate(180%);
    border-bottom:1px solid rgba(0,0,0,.04);
    box-shadow:var(--shadow-xs);
}

.nav__inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    max-width:1200px;
    margin:0 auto;
    padding:0 24px;
}

.nav__logo{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:800;
    font-size:1.2rem;
    color:var(--gray-900);
    letter-spacing:-.02em;
}

.nav__logo-img{
    width:36px;
    height:36px;
    border-radius:var(--radius-xs);
}

.nav__links{display:flex;gap:36px}

.nav__links a{
    font-size:.875rem;
    font-weight:500;
    color:var(--gray-500);
    position:relative;
    transition:color .3s var(--ease);
    padding:4px 0;
}

.nav__links a::after{
    content:'';
    position:absolute;
    bottom:0;left:0;
    width:0;height:2px;
    background:var(--red);
    border-radius:2px;
    transition:width .3s var(--ease);
}

.nav__links a:hover{color:var(--gray-900)}
.nav__links a:hover::after{width:100%}

/* Buttons */
.btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:var(--font);
    font-weight:600;
    font-size:.875rem;
    padding:10px 22px;
    border-radius:50px;
    border:none;
    transition:all .3s var(--ease);
    white-space:nowrap;
    position:relative;
    overflow:hidden;
}

.btn--primary{
    background:var(--red);
    color:#fff;
}
.btn--primary:hover{
    background:var(--red-d);
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(220,38,38,.25);
}

.btn--ghost{
    background:transparent;
    color:var(--gray-700);
    border:1.5px solid var(--gray-200);
    padding:10px 24px;
}
.btn--ghost:hover{
    border-color:var(--gray-300);
    background:var(--gray-50);
    transform:translateY(-1px);
}

.btn--nav{padding:8px 20px;font-size:.8rem}
.btn--full{width:100%;justify-content:center;padding:14px 0}

/* Store button */
.btn--store{
    background:var(--gray-950);
    color:#fff;
    padding:12px 28px 12px 18px;
    border-radius:var(--radius-sm);
    gap:12px;
}
.btn--store:hover{
    background:#000;
    transform:translateY(-3px);
    box-shadow:0 12px 32px rgba(0,0,0,.2);
}
.btn--store div{
    display:flex;
    flex-direction:column;
    text-align:left;
    line-height:1.3;
}
.btn--store small{font-size:.65rem;font-weight:400;opacity:.7;letter-spacing:.04em}
.btn--store strong{font-size:.95rem}

.btn--store-light{
    background:var(--white);
    color:var(--gray-900);
    border:1.5px solid var(--gray-200);
}
.btn--store-light:hover{
    background:var(--gray-50);
    box-shadow:0 12px 32px rgba(0,0,0,.08);
    border-color:var(--gray-300);
}
.btn--store-light small{color:var(--gray-500)}


@media(max-width:768px){
    .nav__links{display:none}
}

/* ══════════════════════════
   HERO
   ══════════════════════════ */
.hero{
    position:relative;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:120px 0 0;
    overflow:hidden;
}

/* Gradient mesh background */
.hero__mesh{
    position:absolute;
    inset:0;
    background:
        radial-gradient(ellipse 80% 60% at 10% 20%, rgba(220,38,38,.06) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 80% 10%, rgba(249,115,22,.05) 0%, transparent 50%),
        radial-gradient(ellipse 50% 40% at 60% 80%, rgba(252,165,165,.04) 0%, transparent 50%),
        linear-gradient(180deg, var(--white) 0%, var(--gray-50) 100%);
    z-index:0;
    pointer-events:none;
}

/* Subtle dot grid */
.hero__grid-pattern{
    position:absolute;
    inset:0;
    background-image:radial-gradient(circle, var(--gray-200) .75px, transparent .75px);
    background-size:32px 32px;
    opacity:.4;
    z-index:0;
    pointer-events:none;
    mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent 100%);
    -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent 100%);
}

.hero__container{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
    max-width:1200px;
    margin:0 auto;
    padding:0 24px;
    position:relative;
    z-index:1;
}

.hero__content{
    display:flex;
    flex-direction:column;
    gap:24px;
}

/* Badge */
.hero__badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:var(--white);
    border:1px solid var(--gray-200);
    color:var(--gray-600);
    font-size:.8rem;
    font-weight:600;
    padding:8px 18px 8px 14px;
    border-radius:50px;
    width:fit-content;
    box-shadow:var(--shadow-xs);
}

.hero__badge-dot{
    width:8px;
    height:8px;
    background:#22C55E;
    border-radius:50%;
    position:relative;
    flex-shrink:0;
}
.hero__badge-dot::after{
    content:'';
    position:absolute;
    inset:-3px;
    border-radius:50%;
    background:#22C55E;
    animation:pulse-ring 2s infinite;
    opacity:.4;
}
@keyframes pulse-ring{
    0%{transform:scale(1);opacity:.4}
    100%{transform:scale(2.5);opacity:0}
}

/* Title */
.hero__title{
    font-size:clamp(2.5rem,5.2vw,4rem);
    font-weight:800;
    line-height:1.08;
    letter-spacing:-.04em;
    color:var(--gray-950);
}

.hero__desc{
    font-size:1.05rem;
    line-height:1.75;
    color:var(--gray-500);
    max-width:480px;
}

/* Hero Actions */
.hero__actions{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    align-items:center;
}

/* Stats */
.hero__stats{
    display:flex;
    align-items:center;
    gap:28px;
    margin-top:12px;
    padding-top:24px;
    border-top:1px solid var(--gray-200);
}

.hero__stat{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.hero__stat-num{
    font-size:1.4rem;
    font-weight:800;
    color:var(--gray-900);
    font-variant-numeric:tabular-nums;
}

.hero__stat-plus{
    font-size:1.4rem;
    font-weight:800;
    color:var(--red);
}

.hero__stat-label{
    font-size:.75rem;
    color:var(--gray-400);
    font-weight:500;
}

.hero__stat-divider{
    width:1px;
    height:32px;
    background:var(--gray-200);
}

/* Phone Frame (Hero) */
.hero__visual{
    display:flex;
    justify-content:center;
    align-items:flex-end;
    position:relative;
    height:540px;
}

/* 3-phone staggered layout */
.hero__phones{
    display:flex;
    align-items:flex-end;
    justify-content:center;
    gap:0;
    position:relative;
    width:100%;
    height:100%;
}

.hero__phone-wrap{
    position:absolute;
    bottom:0;
    transition:all .6s var(--ease);
}

/* Center phone — biggest and straight */
.hero__phone-wrap--center{
    z-index:3;
    left:50%;
    transform:translateX(-50%);
    bottom:0;
}

.hero__phone-frame{
    width:240px;
    background:var(--gray-950);
    border-radius:36px;
    padding:10px;
    position:relative;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.1) inset,
        0 40px 80px -20px rgba(0,0,0,.3),
        0 20px 40px -10px rgba(0,0,0,.15);
    animation:phone-float 8s ease-in-out infinite;
}

@keyframes phone-float{
    0%,100%{transform:translateY(0)}
    25%{transform:translateY(-10px)}
    75%{transform:translateY(5px)}
}

.hero__phone-screen{
    width:100%;
    border-radius:26px;
    display:block;
    position:relative;
    z-index:1;
    aspect-ratio:9/19.5;
    object-fit:cover;
    object-position:top;
    background:var(--gray-100);
}

/* Side phones — smaller, tilted */
.hero__phone-wrap--left{
    z-index:2;
    left:50%;
    margin-left:-200px;
    bottom:-20px;
    transform:rotate(-10deg);
    opacity:.85;
}

.hero__phone-wrap--right{
    z-index:2;
    left:50%;
    margin-left:40px;
    bottom:-20px;
    transform:rotate(10deg);
    opacity:.85;
}

.hero__phone-mini{
    width:160px;
    background:var(--gray-950);
    border-radius:28px;
    padding:8px;
    position:relative;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.08) inset,
        0 24px 48px -12px rgba(0,0,0,.2);
}

.hero__phone-mini-screen{
    width:100%;
    border-radius:20px;
    display:block;
    aspect-ratio:9/19.5;
    object-fit:cover;
    object-position:top;
    background:var(--gray-100);
}

/* Marquee */
.marquee{
    margin-top:80px;
    padding:20px 0;
    border-top:1px solid var(--gray-100);
    overflow:hidden;
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    gap:24px;
}

.marquee__label{
    flex-shrink:0;
    font-size:.7rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.1em;
    color:var(--gray-400);
    padding-left:24px;
}

.marquee__track{
    display:flex;
    gap:20px;
    animation:scroll-marquee 45s linear infinite;
    width:max-content;
}

.marquee__track span{
    font-size:.82rem;
    font-weight:500;
    color:var(--gray-400);
    white-space:nowrap;
}

.marquee__dot{
    width:4px;
    height:4px;
    background:var(--gray-300);
    border-radius:50%;
    display:inline-flex;
    align-self:center;
    flex-shrink:0;
}

@keyframes scroll-marquee{
    0%{transform:translateX(0)}
    100%{transform:translateX(-50%)}
}

/* Animations */
.anim-up{
    opacity:0;
    transform:translateY(28px);
    animation:anim-up .9s var(--ease) forwards;
}

.anim-d1{animation-delay:.1s}
.anim-d2{animation-delay:.2s}
.anim-d3{animation-delay:.3s}
.anim-d4{animation-delay:.4s}

@keyframes anim-up{to{opacity:1;transform:translateY(0)}}

/* Reveal on scroll */
.reveal{
    opacity:0;
    transform:translateY(32px);
    transition:opacity .8s var(--ease), transform .8s var(--ease);
}

.reveal.visible{opacity:1;transform:translateY(0)}
.reveal--d1{transition-delay:.1s}
.reveal--d2{transition-delay:.2s}

/* Hero responsive */
@media(max-width:968px){
    .hero__container{grid-template-columns:1fr;text-align:center;gap:48px}
    .hero__content{align-items:center}
    .hero__desc{max-width:100%}
    .hero__actions{justify-content:center}
    .hero__stats{justify-content:center}
    .hero__visual{height:420px}
    .hero__phone-frame{width:200px}
    .hero__phone-wrap--left{margin-left:-168px}
    .hero__phone-wrap--right{margin-left:28px}
    .hero__phone-mini{width:136px}
}

@media(max-width:560px){
    .hero{padding:100px 0 0}
    .hero__stats{flex-wrap:wrap;gap:20px}
    .hero__stat-divider{display:none}
    .hero__visual{height:340px}
    .hero__phone-frame{width:176px}
    .hero__phone-wrap--left,.hero__phone-wrap--right{display:none}
    .hero__phone-wrap--center{position:relative;left:auto;transform:none}
    .hero__phones{justify-content:center}
}

/* ══════════════════════════
   SECTION COMMON
   ══════════════════════════ */
.section-head{
    text-align:center;
    margin-bottom:64px;
}

.section-tag{
    display:inline-block;
    font-size:.72rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.14em;
    color:var(--red);
    background:var(--red-bg);
    padding:6px 16px;
    border-radius:50px;
    margin-bottom:16px;
    border:1px solid rgba(220,38,38,.08);
}

.section-title{
    font-size:clamp(1.85rem,4vw,2.8rem);
    font-weight:800;
    line-height:1.12;
    letter-spacing:-.03em;
    color:var(--gray-950);
}

.section-desc{
    font-size:1rem;
    color:var(--gray-500);
    margin-top:16px;
    max-width:520px;
    margin-left:auto;
    margin-right:auto;
    line-height:1.7;
}

/* ══════════════════════════
   FEATURES — Bento Grid
   ══════════════════════════ */
.features{
    padding:120px 0;
    position:relative;
    z-index:1;
    background:var(--white);
}

.bento{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
}

.bento__card{
    background:var(--white);
    border:1px solid var(--gray-200);
    border-radius:var(--radius-lg);
    padding:32px 28px;
    transition:all .45s var(--ease);
    position:relative;
    overflow:hidden;
}

.bento__card::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(135deg, rgba(220,38,38,.02), rgba(249,115,22,.02));
    opacity:0;
    transition:opacity .4s var(--ease);
}

.bento__card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-lg);
    border-color:var(--gray-100);
}

.bento__card:hover::before{opacity:1}

.bento__card--lg{
    grid-column:span 2;
    grid-row:span 2;
    padding:40px 36px;
}

.bento__card-icon{
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--red-bg);
    border-radius:var(--radius-sm);
    margin-bottom:20px;
    color:var(--red);
    transition:all .35s var(--ease);
    position:relative;
    z-index:1;
}

.bento__card:hover .bento__card-icon{
    background:var(--red);
    color:#fff;
    transform:scale(1.06);
    box-shadow:0 6px 20px rgba(220,38,38,.2);
}

.bento__card h3{
    font-size:1.1rem;
    font-weight:700;
    margin-bottom:8px;
    color:var(--gray-900);
    position:relative;
    z-index:1;
}

.bento__card p{
    font-size:.88rem;
    line-height:1.7;
    color:var(--gray-500);
    position:relative;
    z-index:1;
}

/* Notification demo inside bento large card */
.bento__card-visual{
    margin-top:24px;
    position:relative;
    z-index:1;
}

.notif-demo{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.notif-demo__item{
    display:flex;
    align-items:center;
    gap:12px;
    background:var(--gray-50);
    border:1px solid var(--gray-100);
    border-radius:var(--radius-sm);
    padding:14px 16px;
    opacity:0;
    transform:translateX(-20px);
    transition:all .5s var(--ease);
}

.notif-demo.animated .notif-demo__item{
    opacity:1;
    transform:translateX(0);
}

.notif-demo__item--2{transition-delay:.15s}
.notif-demo__item--3{transition-delay:.3s}

.notif-demo__dot{
    width:10px;
    height:10px;
    border-radius:50%;
    flex-shrink:0;
}

.notif-demo__dot--green{background:#22C55E}
.notif-demo__dot--blue{background:#3B82F6}
.notif-demo__dot--red{background:var(--red)}

.notif-demo__item strong{
    font-size:.78rem;
    font-weight:600;
    color:var(--gray-800);
    display:block;
}

.notif-demo__item span{
    font-size:.7rem;
    color:var(--gray-400);
}

@media(max-width:968px){
    .bento{grid-template-columns:repeat(2,1fr)}
    .bento__card--lg{grid-column:span 2;grid-row:span 1}
}

@media(max-width:600px){
    .bento{grid-template-columns:1fr}
    .bento__card--lg{grid-column:span 1}
}

/* ══════════════════════════
   PRODUCT SCREENS
   ══════════════════════════ */
.screens{
    padding:120px 0;
    background:var(--gray-50);
    position:relative;
    z-index:1;
    overflow:hidden;
}

.screens__showcase{
    position:relative;
    overflow:hidden;
}

.screens__track{
    display:flex;
    gap:32px;
    transition:transform .6s var(--ease);
    padding:20px 0 40px;
    justify-content:center;
}

.screens__slide{
    flex-shrink:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
    transition:all .5s var(--ease);
    opacity:.45;
    transform:scale(.88);
    filter:blur(1px);
}

.screens__slide.active{
    opacity:1;
    transform:scale(1);
    filter:blur(0);
}

.screens__label{
    font-size:.82rem;
    font-weight:600;
    color:var(--gray-400);
    transition:color .4s var(--ease);
}

.screens__slide.active .screens__label{
    color:var(--gray-700);
}

/* Phone Mockup (Screens Section) */
.phone-mockup__frame{
    width:240px;
    background:var(--gray-950);
    border-radius:36px;
    padding:10px;
    position:relative;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.08) inset,
        var(--shadow-xl);
    transition:all .5s var(--ease);
}

.screens__slide.active .phone-mockup__frame{
    box-shadow:
        0 0 0 1px rgba(255,255,255,.08) inset,
        0 32px 80px -16px rgba(0,0,0,.3),
        0 16px 40px -8px rgba(220,38,38,.1);
}

.phone-mockup__screen{
    width:100%;
    border-radius:26px;
    display:block;
    aspect-ratio:9/19.5;
    object-fit:cover;
    object-position:top;
    background:var(--gray-100);
}

/* Screens Navigation */
.screens__nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    margin-top:8px;
}

.screens__arrow{
    width:44px;
    height:44px;
    border-radius:50%;
    border:1.5px solid var(--gray-200);
    background:var(--white);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--gray-500);
    transition:all .3s var(--ease);
}

.screens__arrow:hover{
    border-color:var(--red);
    color:var(--red);
    background:var(--red-bg);
    transform:scale(1.06);
}

.screens__dots{
    display:flex;
    gap:8px;
}

.screens__dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--gray-300);
    transition:all .35s var(--ease);
    cursor:pointer;
}

.screens__dot.active{
    background:var(--red);
    width:28px;
    border-radius:4px;
}

@media(max-width:768px){
    .phone-mockup__frame{width:200px}
    .screens__track{gap:20px}
}

@media(max-width:480px){
    .phone-mockup__frame{width:180px}
}

/* ══════════════════════════
   STEPS — Timeline
   ══════════════════════════ */
.steps{
    padding:120px 0;
    background:var(--white);
    position:relative;
    z-index:1;
}

.steps__timeline{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:0;
    max-width:640px;
    margin:0 auto;
}

.steps__line{
    position:absolute;
    left:28px;
    top:0;
    bottom:0;
    width:2px;
    background:var(--gray-200);
}

.step{
    display:flex;
    gap:28px;
    padding:32px 0;
    position:relative;
}

.step__number{
    width:56px;
    height:56px;
    border-radius:50%;
    background:var(--white);
    border:2px solid var(--gray-200);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    position:relative;
    z-index:2;
    transition:all .4s var(--ease);
}

.step__number span{
    font-size:1.1rem;
    font-weight:800;
    color:var(--gray-400);
    transition:color .4s var(--ease);
}

.step:hover .step__number{
    border-color:var(--red);
    background:var(--red-bg);
    transform:scale(1.08);
    box-shadow:0 4px 16px rgba(220,38,38,.12);
}

.step:hover .step__number span{
    color:var(--red);
}

.step__content{
    padding-top:8px;
}

.step__icon-wrap{
    width:44px;
    height:44px;
    border-radius:var(--radius-sm);
    background:var(--gray-50);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:14px;
    color:var(--gray-500);
    transition:all .3s var(--ease);
}

.step:hover .step__icon-wrap{
    background:var(--red-bg);
    color:var(--red);
}

.step h3{
    font-size:1.15rem;
    font-weight:700;
    margin-bottom:8px;
    color:var(--gray-900);
}

.step p{
    font-size:.9rem;
    line-height:1.7;
    color:var(--gray-500);
    max-width:400px;
}

@media(max-width:600px){
    .steps__timeline{padding-left:0}
    .steps__line{left:27px}
    .step{gap:20px}
}

/* ══════════════════════════
   SOCIAL PROOF
   ══════════════════════════ */
.proof{
    padding:80px 0;
    background:var(--gray-50);
    position:relative;
    z-index:1;
}

.proof__grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
}

.proof__card{
    text-align:center;
    padding:40px 20px;
    background:var(--white);
    border:1px solid var(--gray-100);
    border-radius:var(--radius-lg);
    transition:all .4s var(--ease);
}

.proof__card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow);
}

.proof__number{
    font-size:2.2rem;
    font-weight:800;
    color:var(--gray-950);
    font-variant-numeric:tabular-nums;
    letter-spacing:-.02em;
}

.proof__label{
    font-size:.82rem;
    font-weight:500;
    color:var(--gray-400);
    margin-top:4px;
}

@media(max-width:768px){
    .proof__grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:480px){
    .proof__grid{grid-template-columns:1fr 1fr;gap:12px}
    .proof__card{padding:28px 16px}
    .proof__number{font-size:1.6rem}
}

/* ══════════════════════════
   FAQ — Accordion
   ══════════════════════════ */
.faq{
    padding:120px 0;
    background:var(--white);
    position:relative;
    z-index:1;
}

.faq__list{
    max-width:700px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.faq__item{
    border:1px solid var(--gray-200);
    border-radius:var(--radius);
    overflow:hidden;
    transition:all .3s var(--ease);
}

.faq__item.open{
    border-color:var(--gray-300);
    box-shadow:var(--shadow-sm);
}

.faq__question{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:none;
    border:none;
    padding:20px 24px;
    font-size:.95rem;
    font-weight:600;
    color:var(--gray-800);
    text-align:left;
    transition:color .3s;
}

.faq__item.open .faq__question{color:var(--gray-950)}

.faq__chevron{
    flex-shrink:0;
    color:var(--gray-400);
    transition:transform .35s var(--ease), color .3s;
}

.faq__item.open .faq__chevron{
    transform:rotate(180deg);
    color:var(--red);
}

.faq__answer{
    max-height:0;
    overflow:hidden;
    transition:max-height .4s var(--ease), padding .4s var(--ease);
}

.faq__item.open .faq__answer{
    max-height:200px;
}

.faq__answer p{
    padding:0 24px 20px;
    font-size:.9rem;
    line-height:1.75;
    color:var(--gray-500);
}

/* ══════════════════════════
   CTA
   ══════════════════════════ */
.cta{
    padding:80px 0 120px;
    position:relative;
    z-index:1;
    background:var(--white);
}

.cta__box{
    position:relative;
    background:var(--gray-950);
    border-radius:var(--radius-xl);
    padding:80px 40px;
    text-align:center;
    overflow:hidden;
}

.cta__glow{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
    filter:blur(80px);
}

.cta__glow--1{
    width:400px;
    height:400px;
    background:rgba(220,38,38,.15);
    top:-150px;
    right:-100px;
}

.cta__glow--2{
    width:300px;
    height:300px;
    background:rgba(249,115,22,.1);
    bottom:-100px;
    left:-80px;
}

.cta__content{
    position:relative;
    z-index:1;
}

.cta__logo{
    width:64px;
    height:64px;
    border-radius:var(--radius);
    margin:0 auto 24px;
    box-shadow:0 8px 32px rgba(0,0,0,.3);
}

.cta__title{
    font-size:clamp(1.6rem,3.5vw,2.4rem);
    font-weight:800;
    color:#fff;
    line-height:1.2;
    margin-bottom:16px;
    letter-spacing:-.02em;
}

.cta__desc{
    font-size:1rem;
    color:rgba(255,255,255,.6);
    margin-bottom:36px;
    max-width:420px;
    margin-left:auto;
    margin-right:auto;
    line-height:1.7;
}

/* ══════════════════════════
   FOOTER
   ══════════════════════════ */
.footer{
    background:var(--gray-950);
    color:rgba(255,255,255,.5);
    padding:64px 0 0;
    position:relative;
    z-index:1;
}

.footer__top{
    display:grid;
    grid-template-columns:2fr 1.2fr 1fr;
    gap:48px;
    padding-bottom:40px;
    border-bottom:1px solid rgba(255,255,255,.06);
    align-items:start;
}

.footer__brand .nav__logo{margin-bottom:14px}
.footer__brand .nav__logo span{color:#fff}

.footer__brand p{
    font-size:.85rem;
    line-height:1.7;
    max-width:260px;
    color:rgba(255,255,255,.4);
}

/* Footer nav links */
.footer__nav{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.footer__nav a{
    font-size:.85rem;
    color:rgba(255,255,255,.4);
    transition:color .25s;
}

.footer__nav a:hover{color:#fff}

/* Footer right: email + socials */
.footer__right{
    display:flex;
    flex-direction:column;
    gap:16px;
    align-items:flex-end;
}

.footer__email{
    font-size:.85rem;
    color:rgba(255,255,255,.4);
    transition:color .25s;
}

.footer__email:hover{color:#fff}

.footer__socials{
    display:flex;
    gap:10px;
}

.footer__socials a{
    width:34px;
    height:34px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.1);
    display:flex;
    align-items:center;
    justify-content:center;
    color:rgba(255,255,255,.4);
    transition:all .3s var(--ease);
}

.footer__socials a:hover{
    background:var(--red);
    border-color:var(--red);
    color:#fff;
    transform:translateY(-2px);
}

.footer__bottom{
    padding:20px 0;
    font-size:.8rem;
    text-align:center;
    color:rgba(255,255,255,.25);
}

@media(max-width:768px){
    .footer__top{grid-template-columns:1fr 1fr;gap:32px}
    .footer__brand{grid-column:1/-1}
    .footer__right{align-items:flex-start}
}

@media(max-width:480px){
    .footer__top{grid-template-columns:1fr}
}

/* ══════════════════════════
   SCROLLBAR
   ══════════════════════════ */
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--gray-100)}
::-webkit-scrollbar-thumb{background:var(--gray-300);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--red)}

/* ══════════════════════════
   MICRO SELECTIONS
   ══════════════════════════ */
::selection{
    background:rgba(220,38,38,.12);
    color:var(--gray-950);
}