/* =============================================================
   SCROLL SOLUTION — Luxury Dubai Tech Agency
   Theme: White & Gold · Dark accents
   ============================================================= */

/* ---------- Tokens ---------- */
:root{
    --bg:           #ffffff;
    --bg-soft:      #fafaf7;
    --bg-cream:     #f6f3ec;
    --ink:          #0a0a0a;
    --ink-soft:     #1a1a1a;
    --muted:        #5a5a5a;
    --muted-soft:   #8a8a8a;
    --line:         rgba(10,10,10,.08);
    --line-strong:  rgba(10,10,10,.18);

    /* Gold palette */
    --gold:         #c9a35b;
    --gold-bright:  #e0b964;
    --gold-deep:    #a07e3a;
    --gold-soft:    #efddb5;
    --gold-gradient: linear-gradient(135deg, #f3d98a 0%, #c9a35b 45%, #a07e3a 100%);
    --gold-shine:   linear-gradient(120deg, #c9a35b 0%, #f3d98a 35%, #fff5d4 50%, #f3d98a 65%, #a07e3a 100%);

    --radius:       18px;
    --radius-sm:    10px;

    --shadow-sm:    0 6px 18px rgba(10,10,10,.05);
    --shadow-md:    0 18px 50px rgba(10,10,10,.08);
    --shadow-gold:  0 14px 40px rgba(201,163,91,.28);

    --ease:         cubic-bezier(.22,1,.36,1);
    --ease-out:     cubic-bezier(.16,1,.3,1);

    --container:    1280px;

    --font-display: 'Playfair Display', 'Times New Roman', Georgia, serif;
    --font-serif-alt:'Playfair Display', serif;
    --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing:border-box; }
html{
    scroll-behavior:smooth;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
}
body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:var(--font-sans);
    font-weight:400;
    font-size:16px;
    line-height:1.6;
    overflow-x:hidden;
    font-feature-settings:"ss01","ss02","cv11";
}
.h2, .hero__title, .brand-card__name, .marquee__track, .pill-num, .hero__meta-num, .stat__num, .stat__plus, .service__num{
    font-optical-sizing:auto;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:0; background:none; color:inherit; }
ul{ list-style:none; padding:0; margin:0; }
input,select,textarea,button{ font-family:inherit; font-size:inherit; color:inherit; }

/* ---------- Utilities ---------- */
.container{
    width:100%;
    max-width:var(--container);
    margin:0 auto;
    padding:0 32px;
}
.section{ padding:140px 0; position:relative; }
.h2{
    font-family:var(--font-display);
    font-weight:500;
    font-size:clamp(34px, 5vw, 66px);
    line-height:1.06;
    letter-spacing:-.02em;
    margin:.4em 0 0;
    color:var(--ink);
}
/* SOLID GOLD — guaranteed visible on every browser including iOS Safari */
.gold{
    color:var(--gold-deep);
    -webkit-text-fill-color:var(--gold-deep);
    font-style:italic;
    background:none;
    overflow-wrap:break-word;
    word-wrap:break-word;
}
.kicker{
    display:inline-flex;
    align-items:center;
    gap:14px;
    font-size:11px;
    font-weight:500;
    letter-spacing:.32em;
    text-transform:uppercase;
    color:var(--gold-deep);
}
.kicker__line{
    display:inline-block;
    width:38px; height:1px;
    background:var(--gold);
}
.lede{
    font-size:clamp(17px, 1.5vw, 20px);
    color:var(--muted);
    line-height:1.65;
    max-width:54ch;
}
.section__head{
    max-width:880px;
    margin:0 auto 80px;
    text-align:center;
}
.section__head--left{ margin-left:0; margin-right:auto; text-align:left; }
.section__sub{
    margin-top:18px;
    color:var(--muted);
    font-size:17px;
    line-height:1.6;
}

/* =============================================================
   PRELOADER
============================================================= */
.preloader{
    position:fixed; inset:0;
    background:#fffdf6;
    z-index:9999;
    display:flex; align-items:center; justify-content:center;
    transition:opacity .5s var(--ease), visibility .5s var(--ease);
}
.preloader.is-hidden{ opacity:0; visibility:hidden; }
.preloader__logo{
    width:clamp(220px, 36vw, 360px);
    height:auto;
}

/* =============================================================
   CURSOR (desktop)
============================================================= */
.cursor{
    position:fixed; top:0; left:0;
    pointer-events:none; z-index:9000;
    mix-blend-mode:multiply;
    display:none;
}
.cursor__dot{
    position:absolute; left:-3px; top:-3px;
    width:6px; height:6px;
    background:var(--gold-deep);
    border-radius:50%;
}
.cursor__ring{
    position:absolute; left:-18px; top:-18px;
    width:36px; height:36px;
    border:1px solid var(--gold);
    border-radius:50%;
    transition:transform .25s var(--ease), opacity .25s var(--ease), border-color .25s;
}
.cursor.is-hover .cursor__ring{
    transform:scale(1.6);
    border-color:var(--gold-deep);
}
/* Custom cursor disabled — native pointer is shown */

/* =============================================================
   HEADER / NAV
============================================================= */
.header{
    position:fixed; top:0; left:0; right:0;
    z-index:500;
    padding:14px 0;
    background:rgba(255,255,255,.86);
    backdrop-filter:saturate(180%) blur(18px);
    -webkit-backdrop-filter:saturate(180%) blur(18px);
    border-bottom:1px solid var(--line);
    box-shadow:0 6px 30px rgba(10,10,10,.04);
}
.header__inner{
    display:flex; align-items:center; justify-content:space-between;
    gap:20px;
}

/* Brand */
.brand{
    display:flex; align-items:center; gap:14px;
    color:var(--ink);
}
.brand__logo{
    width:48px; height:auto;
    flex-shrink:0;
    transition:transform .4s var(--ease);
}
.brand:hover .brand__logo{ transform:rotate(-3deg) scale(1.04); }
.brand__name{ display:flex; flex-direction:column; line-height:1.1; }
.brand__title{
    font-weight:600; font-size:16px; letter-spacing:.02em;
}
.brand__sub{
    font-size:10px; letter-spacing:.3em; text-transform:uppercase;
    color:var(--muted-soft);
    margin-top:2px;
}

/* Nav — premium pill-style */
.nav{
    flex:1;
    display:flex; justify-content:center;
}
.nav__list{
    display:flex; align-items:center; gap:2px;
    padding:6px;
    background:rgba(10,10,10,.03);
    border-radius:999px;
    border:1px solid var(--line);
}
.nav__link{
    position:relative;
    display:inline-flex; align-items:center; gap:6px;
    padding:9px 16px;
    font-size:13px;
    font-weight:500;
    letter-spacing:.01em;
    color:var(--ink-soft);
    border-radius:999px;
    transition:color .3s var(--ease), background .3s var(--ease);
    white-space:nowrap;
}
.nav__link::before{
    content:"";
    width:4px; height:4px;
    border-radius:50%;
    background:var(--gold);
    opacity:0;
    transform:scale(0);
    transition:opacity .3s var(--ease), transform .35s var(--ease);
}
.nav__link:hover{
    color:var(--ink);
    background:rgba(255,255,255,.7);
}
.nav__link.is-active{
    color:var(--gold-deep);
    background:#fff;
    box-shadow:0 4px 14px rgba(10,10,10,.06), inset 0 0 0 1px rgba(201,163,91,.18);
}
.nav__link.is-active::before{
    opacity:1;
    transform:scale(1);
    box-shadow:0 0 0 3px rgba(201,163,91,.18);
}

/* Burger — premium pill with "Menu" label */
.burger{
    display:none;
    align-items:center; gap:10px;
    padding:8px 12px 8px 16px;
    height:42px;
    border-radius:999px;
    background:#fff;
    border:1px solid var(--line-strong);
    box-shadow:0 4px 14px rgba(10,10,10,.06);
    transition:background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
    cursor:pointer;
}
.burger:hover{
    background:var(--ink);
    border-color:var(--ink);
    box-shadow:0 8px 22px rgba(10,10,10,.18);
}
.burger:hover .burger__label{ color:#fff; }
.burger:hover .burger__icon span{ background:var(--gold-bright); }
.burger:active{ transform:scale(.96); }

.burger__label{
    font-family:var(--font-sans);
    font-size:11px;
    font-weight:600;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--ink);
    transition:color .25s var(--ease);
}
.burger__icon{
    position:relative;
    width:22px; height:14px;
    flex-shrink:0;
}
.burger__icon span{
    position:absolute; left:0; right:0; height:1.5px;
    background:var(--ink);
    transition:transform .35s var(--ease), opacity .25s, top .35s var(--ease), background .25s var(--ease);
}
.burger__icon span:nth-child(1){ top:2px; }
.burger__icon span:nth-child(2){ top:7px; width:70%; right:0; left:auto; }
.burger__icon span:nth-child(3){ top:12px; }

.burger.is-open .burger__icon span:nth-child(1){ top:7px; transform:rotate(45deg); }
.burger.is-open .burger__icon span:nth-child(2){ opacity:0; }
.burger.is-open .burger__icon span:nth-child(3){ top:7px; transform:rotate(-45deg); }
.burger.is-open{
    background:var(--ink);
    border-color:var(--ink);
}
.burger.is-open .burger__label{ color:#fff; }
.burger.is-open .burger__icon span{ background:var(--gold-bright); }

/* =============================================================
   MOBILE MENU  (premium full-screen sheet)
============================================================= */
.mobile-menu{
    position:fixed;
    top:0; left:0; right:0; bottom:0;
    width:100%;
    height:100vh;
    height:100dvh;
    background-color:#fffdf6;
    background-image:
        radial-gradient(70% 80% at 100% 0%, rgba(201,163,91,.10), transparent 60%),
        linear-gradient(180deg, #fffdf6 0%, #f6f0dd 100%);
    z-index:600;
    opacity:0;
    visibility:hidden;
    transition:opacity .35s var(--ease), visibility .35s var(--ease);
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
}
.mobile-menu.is-open{ opacity:1; visibility:visible; }

.mobile-menu__inner{
    min-height:100%;
    display:flex; flex-direction:column;
    padding:24px 28px 36px;
    max-width:560px;
    margin:0 auto;
}

.mobile-menu__head{
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:36px;
    padding-top:6px;
}
.mobile-menu__kicker{
    display:inline-flex; align-items:center; gap:14px;
    font-family:var(--font-sans);
    font-size:11px;
    font-weight:500;
    letter-spacing:.36em;
    text-transform:uppercase;
    color:var(--gold-deep);
}
.mobile-menu__kicker-line{
    display:inline-block;
    width:36px; height:1px;
    background:var(--gold);
}
.mobile-menu__close{
    width:44px; height:44px;
    border-radius:50%;
    background:rgba(10,10,10,.04);
    color:var(--ink);
    display:grid; place-items:center;
    transition:background .25s, transform .25s, color .25s;
    border:1px solid var(--line);
}
.mobile-menu__close:hover,
.mobile-menu__close:active{
    background:var(--ink);
    color:#fff;
    transform:rotate(90deg);
}

.mobile-menu__nav{ flex:1; }
.mobile-menu__nav ul{
    display:flex; flex-direction:column; gap:0;
    border-top:1px solid var(--line);
}
.mobile-menu__nav li{
    border-bottom:1px solid var(--line);
}

.mobile-menu__nav a{
    display:grid;
    grid-template-columns: 38px 1fr auto;
    align-items:center;
    gap:18px;
    padding:18px 4px;
    color:var(--ink);
    transition:padding-left .3s var(--ease), color .3s var(--ease);
}
.mobile-menu__nav a:hover,
.mobile-menu__nav a:active{
    padding-left:8px;
    color:var(--gold-deep);
}
.mobile-menu__num{
    font-family:var(--font-display);
    font-style:italic;
    font-weight:400;
    font-size:15px;
    color:var(--gold);
    line-height:1;
}
.mobile-menu__label{
    font-family:var(--font-display);
    font-weight:380;
    font-size:clamp(26px, 7vw, 34px);
    letter-spacing:-.02em;
    line-height:1.1;
}
.mobile-menu__arrow{
    color:var(--gold-deep);
    font-size:18px;
    opacity:0;
    transform:translateX(-6px);
    transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.mobile-menu__nav a:hover .mobile-menu__arrow,
.mobile-menu__nav a:active .mobile-menu__arrow{
    opacity:1;
    transform:translateX(0);
}

.mobile-menu__contact{
    margin-top:32px;
    padding-top:24px;
    border-top:1px solid var(--line);
    display:flex; flex-direction:column; gap:8px;
}
.mobile-menu__email,
.mobile-menu__phone{
    font-size:15px;
    font-weight:500;
    color:var(--ink);
    padding:2px 0;
    transition:color .25s;
}
.mobile-menu__email:hover,
.mobile-menu__phone:hover{ color:var(--gold-deep); }
.mobile-menu__address{
    font-size:12px;
    color:var(--muted);
    margin-top:4px;
    letter-spacing:.04em;
}

.mobile-menu__cta{
    margin-top:24px;
    width:100%;
    justify-content:center;
    padding:18px 26px !important;
    font-size:13px;
}

/* =============================================================
   BUTTONS
============================================================= */
.btn{
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    padding:14px 26px;
    font-size:13px;
    font-weight:500;
    letter-spacing:.16em;
    text-transform:uppercase;
    border-radius:999px;
    position:relative;
    overflow:hidden;
    transition:transform .35s var(--ease), box-shadow .35s var(--ease), color .25s var(--ease);
    isolation:isolate;
}
.btn--gold{
    background:var(--gold-gradient);
    color:#1a1305;
    box-shadow:var(--shadow-gold);
}
.btn--gold::before{
    content:"";
    position:absolute; inset:0;
    background:var(--gold-shine);
    background-size:200% 100%;
    background-position:100% 0;
    opacity:0;
    transition:opacity .4s var(--ease), background-position 1s var(--ease);
    z-index:-1;
}
.btn--gold:hover{
    transform:translateY(-2px);
    box-shadow:0 22px 50px rgba(201,163,91,.4);
}
.btn--gold:hover::before{
    opacity:1; background-position:0 0;
}
.btn--ghost{
    background:transparent;
    color:var(--ink);
    border:1px solid var(--line-strong);
}
.btn--ghost::before{
    content:""; position:absolute; inset:0;
    background:var(--ink);
    transform:translateY(100%);
    transition:transform .45s var(--ease);
    z-index:-1;
}
.btn--ghost:hover{
    color:#fff;
    border-color:var(--ink);
}
.btn--ghost:hover::before{ transform:translateY(0); }
.btn--full{ width:100%; padding:18px 30px; font-size:13px; }
.btn--small{ padding:10px 20px; font-size:11px; }
.header__cta{ padding:12px 22px; font-size:12px; }

/* =============================================================
   HERO
============================================================= */
.hero{
    position:relative;
    min-height:100vh;
    padding:160px 0 120px;
    display:flex; align-items:center;
    overflow:hidden;
    background:
        radial-gradient(60% 80% at 50% 0%, rgba(201,163,91,.10), transparent 70%),
        linear-gradient(180deg, #ffffff 0%, #fbf8f0 100%);
}
.hero__bg{ position:absolute; inset:0; pointer-events:none; }
.hero__grid{
    position:absolute; inset:-1px;
    background-image:
        linear-gradient(rgba(10,10,10,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(10,10,10,.04) 1px, transparent 1px);
    background-size:80px 80px;
    mask-image: radial-gradient(60% 60% at 50% 40%, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(60% 60% at 50% 40%, #000 30%, transparent 75%);
    opacity:.55;
}
.hero__glow{
    position:absolute;
    width:620px; height:620px;
    border-radius:50%;
    filter:blur(80px);
    opacity:.5;
}
.hero__glow--1{
    top:-120px; left:-120px;
    background:radial-gradient(circle, rgba(243,217,138,.55), transparent 60%);
    animation:floatA 16s var(--ease) infinite alternate;
}
.hero__glow--2{
    bottom:-160px; right:-100px;
    background:radial-gradient(circle, rgba(201,163,91,.35), transparent 60%);
    animation:floatB 18s var(--ease) infinite alternate;
}
.hero__rings{
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:1px; height:1px;
}
.hero__rings span{
    position:absolute; top:50%; left:50%;
    border:1px solid rgba(201,163,91,.18);
    border-radius:50%;
    transform:translate(-50%,-50%);
}
.hero__rings span:nth-child(1){ width:520px; height:520px; animation:spin 60s linear infinite; }
.hero__rings span:nth-child(2){ width:780px; height:780px; animation:spin 90s linear infinite reverse; opacity:.7; }
.hero__rings span:nth-child(3){ width:1080px; height:1080px; animation:spin 120s linear infinite; opacity:.5; }
.hero__rings span:nth-child(4){ width:1400px; height:1400px; animation:spin 160s linear infinite reverse; opacity:.3; }
.hero__particles{
    position:absolute; inset:0;
    width:100%; height:100%;
}

@keyframes floatA{
    0%{ transform:translate(0,0); }
    100%{ transform:translate(80px, 60px); }
}
@keyframes floatB{
    0%{ transform:translate(0,0); }
    100%{ transform:translate(-60px, -40px); }
}
@keyframes spin{
    to{ transform:translate(-50%,-50%) rotate(360deg); }
}

.hero__inner{
    position:relative; z-index:2;
    text-align:center;
    max-width:1020px;
}
.hero__eyebrow{
    display:inline-flex; align-items:center; gap:12px;
    padding:8px 18px;
    border:1px solid var(--line-strong);
    border-radius:999px;
    font-size:11px;
    letter-spacing:.32em;
    text-transform:uppercase;
    color:var(--ink-soft);
    background:rgba(255,255,255,.6);
    backdrop-filter:blur(8px);
    margin-bottom:36px;
    animation:fadeUp .9s var(--ease) .2s both;
}
.hero__eyebrow .dot{
    width:5px; height:5px; border-radius:50%;
    background:var(--gold);
    box-shadow:0 0 0 4px rgba(201,163,91,.18);
}

.hero__title{
    font-family:var(--font-display);
    font-weight:500;
    font-size:clamp(48px, 9vw, 132px);
    line-height:1;
    letter-spacing:-.025em;
    margin:0 0 28px;
}
.hero__title .line{
    display:block;
    overflow:hidden;
    padding-bottom:.08em;
}
.hero__title .word{
    display:inline-block;
    transform:translateY(110%);
    animation:wordUp 1.1s var(--ease) forwards;
}
.hero__title .line:nth-child(1) .word{ animation-delay:.35s; }
.hero__title .line:nth-child(2) .word:nth-child(1){ animation-delay:.5s; }
.hero__title .line:nth-child(2) .word:nth-child(2){ animation-delay:.6s; }
.hero__title .line:nth-child(3) .word{ animation-delay:.75s; }
.word--gold{
    color:var(--gold-deep);
    -webkit-text-fill-color:var(--gold-deep);
    font-style:italic;
    background:none;
    animation:wordUp 1.1s var(--ease) forwards;
}
@keyframes wordUp{
    to{ transform:translateY(0); }
}
@keyframes shimmer{
    0%{ background-position:0% center; }
    100%{ background-position:200% center; }
}

.hero__lede{
    max-width:640px;
    margin:0 auto 44px;
    color:var(--muted);
    font-size:clamp(16px, 1.4vw, 19px);
    line-height:1.65;
    animation:fadeUp 1s var(--ease) 1s both;
}

.hero__cta{
    display:flex; flex-wrap:wrap; gap:14px;
    justify-content:center;
    animation:fadeUp 1s var(--ease) 1.15s both;
}

.hero__meta{
    display:flex; flex-wrap:wrap; justify-content:center;
    gap:48px;
    margin-top:80px;
    padding-top:48px;
    border-top:1px solid var(--line);
    animation:fadeUp 1.1s var(--ease) 1.3s both;
}
.hero__meta-item{
    display:flex; align-items:baseline; gap:6px;
    flex-wrap:wrap;
    justify-content:center;
}
.hero__meta-num{
    font-family:var(--font-display);
    font-size:46px;
    font-weight:500;
    line-height:1;
    color:var(--gold-deep);
    -webkit-text-fill-color:var(--gold-deep);
    background:none;
}
.hero__meta-item .plus{
    font-family:var(--font-display);
    font-size:30px;
    color:var(--gold);
}
.hero__meta-label{
    width:100%;
    font-size:11px;
    letter-spacing:.28em;
    text-transform:uppercase;
    color:var(--muted);
    margin-top:6px;
}

.hero__scroll{
    position:absolute;
    bottom:36px; left:50%;
    transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:12px;
    font-size:10px;
    letter-spacing:.36em;
    text-transform:uppercase;
    color:var(--muted);
    z-index:3;
    animation:fadeUp 1s var(--ease) 1.6s both;
}
.hero__scroll-line{
    width:1px; height:60px;
    background:linear-gradient(to bottom, var(--gold), transparent);
    position:relative;
    overflow:hidden;
}
.hero__scroll-line::after{
    content:"";
    position:absolute; top:0; left:0; right:0;
    height:30%;
    background:linear-gradient(to bottom, transparent, var(--gold-bright));
    animation:scrollIndicator 2s var(--ease) infinite;
}
@keyframes scrollIndicator{
    0%{ transform:translateY(-100%); }
    100%{ transform:translateY(300%); }
}

/* =============================================================
   MARQUEE
============================================================= */
.marquee{
    border-block:1px solid var(--line);
    background:var(--bg-soft);
    padding:22px 0;
    overflow:hidden;
    position:relative;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track{
    display:inline-flex; align-items:center; gap:46px;
    white-space:nowrap;
    font-family:var(--font-display);
    font-size:28px;
    font-style:italic;
    color:var(--ink-soft);
    will-change:transform;
}
.marquee__track span{ display:inline-block; }
.marquee__track .diamond{
    color:var(--gold);
    font-size:14px;
    font-style:normal;
}
.marquee:hover .marquee__track{ /* pause-on-hover via JS flag */ }

/* =============================================================
   ABOUT
============================================================= */
.about{
    background:
        radial-gradient(50% 60% at 100% 0%, rgba(201,163,91,.07), transparent 60%),
        #fff;
}
.about__inner{
    display:grid;
    grid-template-columns: 1fr 1.2fr;
    gap:80px;
    align-items:start;
}
.about__left{ position:sticky; top:120px; }
.about__right p{
    color:var(--muted);
    font-size:17px;
    line-height:1.75;
    margin:18px 0 0;
}
.about__right p strong{ color:var(--ink); font-weight:600; }

.about__pillars{
    margin-top:48px;
    display:grid;
    gap:8px;
    border-top:1px solid var(--line);
}
.about__pillars li{
    display:grid;
    grid-template-columns: 80px 1fr;
    grid-template-rows: auto auto;
    column-gap:24px;
    row-gap:8px;
    padding:28px 0;
    border-bottom:1px solid var(--line);
    align-items:start;
    transition:background .3s var(--ease);
}
.about__pillars li:hover{
    background:linear-gradient(90deg, transparent, rgba(201,163,91,.04), transparent);
}
.pill-num{
    grid-column:1;
    grid-row:1 / span 2;
    font-family:var(--font-display);
    font-style:italic;
    font-size:30px;
    color:var(--gold);
    line-height:1;
}
.about__pillars h4{
    grid-column:2; grid-row:1;
    margin:0;
    font-size:18px;
    font-weight:600;
    letter-spacing:-.01em;
}
.about__pillars p{
    grid-column:2; grid-row:2;
    margin:0;
    color:var(--muted);
    font-size:15px;
}

/* =============================================================
   SERVICES
============================================================= */
.services{ background:var(--bg-cream); }
.services__grid{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap:0;
    border-top:1px solid var(--line);
    border-left:1px solid var(--line);
    background:rgba(255,255,255,.5);
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:var(--shadow-sm);
}
.service{
    position:relative;
    padding:48px 32px 40px;
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
    background:#fff;
    transition:background .4s var(--ease), transform .4s var(--ease);
    overflow:hidden;
    isolation:isolate;
    min-height:280px;
    display:flex; flex-direction:column;
    color:inherit;
    text-decoration:none;
    cursor:pointer;
}
.service:focus-visible{
    outline:none;
    box-shadow:inset 0 0 0 2px var(--gold);
}
.service::before{
    content:"";
    position:absolute; inset:0;
    background:
        radial-gradient(80% 50% at 50% 100%, rgba(201,163,91,.18), transparent 70%),
        linear-gradient(180deg, #fff, #fdf8ec);
    opacity:0;
    transition:opacity .5s var(--ease);
    z-index:-1;
}
.service:hover::before{ opacity:1; }
.service__num{
    font-family:var(--font-display);
    font-style:italic;
    font-size:14px;
    color:var(--gold-deep);
    letter-spacing:.05em;
    margin-bottom:24px;
}
.service__icon{
    width:48px; height:48px;
    border-radius:12px;
    background:linear-gradient(135deg, #fff, #f6efe0);
    border:1px solid var(--line);
    display:grid; place-items:center;
    margin-bottom:22px;
    transition:transform .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
}
.service__icon svg{ width:22px; height:22px; color:var(--gold-deep); }
.service:hover .service__icon{
    transform:rotate(-6deg) scale(1.05);
    background:var(--gold-gradient);
    border-color:transparent;
}
.service:hover .service__icon svg{ color:#1a1305; }
.service__title{
    margin:0 0 12px;
    font-size:19px;
    font-weight:600;
    letter-spacing:-.01em;
    line-height:1.3;
}
.service__desc{
    color:var(--muted);
    font-size:14px;
    line-height:1.6;
    margin:0;
    flex:1;
}
.service__arrow{
    position:absolute;
    right:24px; bottom:24px;
    width:36px; height:36px;
    border-radius:50%;
    border:1px solid var(--line-strong);
    display:grid; place-items:center;
    font-size:14px;
    color:var(--ink);
    transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.service:hover .service__arrow{
    background:var(--ink);
    color:#fff;
    border-color:var(--ink);
    transform:rotate(-45deg);
}

/* =============================================================
   PARTNERS  (now a luxury marquee strip)
============================================================= */
.partners{
    background:
        radial-gradient(60% 50% at 50% 0%, rgba(201,163,91,.05), transparent 60%),
        #fff;
    padding-bottom:80px;
}
.partners .section__head{ margin-bottom:60px; }

.marquee--partners{
    padding:42px 0;
    border-block:1px solid var(--line);
    background:
        linear-gradient(180deg, #fff 0%, #fbf7ec 50%, #fff 100%);
}
.marquee--partners .marquee__track{
    gap:72px;
    font-family:var(--font-display);
    font-size:clamp(40px, 6vw, 78px);
    font-style:normal;
    font-weight:340;
    letter-spacing:-.025em;
    color:var(--ink);
    line-height:1;
}
.partner-mark{
    display:inline-block;
    color:var(--ink);
    transition:color .35s var(--ease), transform .35s var(--ease), opacity .35s var(--ease);
    cursor:default;
}
.partner-mark:hover{
    color:var(--gold-deep);
    transform:translateY(-3px);
}

/* Image-based partner logos */
img.partner-mark{
    height:clamp(34px, 4vw, 56px);
    width:auto;
    max-width:240px;
    object-fit:contain;
    vertical-align:middle;
    opacity:.9;
    pointer-events:none;
}
.partner-link{
    display:inline-flex;
    align-items:center;
    line-height:0;
    cursor:pointer;
    transition:opacity .35s var(--ease), transform .35s var(--ease);
    opacity:.9;
}
.partner-link:hover{
    opacity:1;
    transform:translateY(-3px);
}
.partner-link:hover img.partner-mark{ opacity:1; }
.partner-link:focus-visible{
    outline:none;
    box-shadow:0 0 0 3px rgba(201,163,91,.4);
    border-radius:8px;
}
/* X is a square JPEG with white background — give it a rounded mask + crop */
img.partner-mark--square{
    height:clamp(46px, 5vw, 64px);
    width:clamp(46px, 5vw, 64px);
    border-radius:14px;
    object-fit:cover;
}

.partner-mark--netflix{
    font-family:var(--font-sans);
    font-weight:800;
    letter-spacing:.04em;
    font-size:.55em;
    color:#b8121a;
}
.partner-mark--x{
    font-family:var(--font-sans);
    font-weight:800;
}
.partner-sep{
    color:var(--gold);
    font-size:.32em;
    opacity:.7;
    align-self:center;
}

/* =============================================================
   ECOSYSTEM
============================================================= */
.ecosystem{ background:var(--bg-soft); }
.ecosystem__grid{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap:24px;
}
.brand-card{
    position:relative;
    padding:38px 30px 34px;
    border-radius:var(--radius);
    background:#fff;
    border:1px solid var(--line);
    overflow:hidden;
    isolation:isolate;
    transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
    min-height:280px;
    display:flex; flex-direction:column;
    color:inherit;
    text-decoration:none;
    cursor:pointer;
}
.brand-card__visit{
    display:inline-flex; align-items:center; gap:8px;
    align-self:flex-start;
    margin-top:22px;
    padding:9px 16px;
    border-radius:999px;
    background:transparent;
    color:var(--ink);
    font-family:var(--font-sans);
    font-size:10px;
    font-weight:500;
    letter-spacing:.24em;
    text-transform:uppercase;
    border:1px solid var(--line-strong);
    transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.brand-card__visit svg{ transition:transform .35s var(--ease); }
.brand-card:hover .brand-card__visit{
    background:var(--ink);
    color:#fff;
    border-color:var(--ink);
}
.brand-card:hover .brand-card__visit svg{ transform:translate(2px,-2px); }
.brand-card:focus-visible{
    outline:none;
    border-color:var(--gold);
    box-shadow:0 0 0 3px rgba(201,163,91,.25);
}
.brand-card::before{
    content:"";
    position:absolute; inset:0;
    background:
        radial-gradient(120% 60% at 50% 100%, rgba(201,163,91,.14), transparent 60%);
    opacity:0;
    transition:opacity .5s var(--ease);
    z-index:-1;
}
.brand-card:hover{
    transform:translateY(-6px);
    border-color:rgba(201,163,91,.4);
    box-shadow:var(--shadow-md);
}
.brand-card:hover::before{ opacity:1; }
.brand-card__corner{
    position:absolute; top:0; right:0;
    width:60px; height:60px;
    background:
        linear-gradient(135deg, transparent 50%, var(--gold-soft) 50%);
    opacity:.6;
    transition:opacity .4s var(--ease);
}
.brand-card:hover .brand-card__corner{ opacity:1; }
.brand-card__mark{
    width:56px; height:56px;
    border-radius:14px;
    background:var(--ink);
    color:var(--gold-bright);
    font-family:var(--font-display);
    font-style:italic;
    font-weight:600;
    font-size:24px;
    display:grid; place-items:center;
    margin-bottom:22px;
    box-shadow:inset 0 0 0 1px rgba(201,163,91,.35), 0 8px 20px rgba(10,10,10,.15);
}
.brand-card__logo-wrap{
    width:72px; height:72px;
    border-radius:16px;
    background:linear-gradient(155deg, #1a1a1a 0%, #050505 100%);
    padding:10px;
    margin-bottom:22px;
    border:1px solid rgba(201,163,91,.28);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.04),
        inset 0 0 24px rgba(201,163,91,.08),
        0 10px 22px rgba(10,10,10,.22);
    display:grid; place-items:center;
    overflow:hidden;
    position:relative;
    transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.brand-card__logo-wrap::before{
    content:"";
    position:absolute; inset:0;
    background:radial-gradient(120% 80% at 0% 0%, rgba(201,163,91,.18), transparent 60%);
    pointer-events:none;
}
.brand-card__logo{
    max-width:100%; max-height:100%;
    width:auto; height:auto;
    object-fit:contain;
    position:relative;
    z-index:1;
    transition:transform .4s var(--ease);
}
.brand-card:hover .brand-card__logo-wrap{
    transform:translateY(-2px) rotate(-3deg);
    border-color:rgba(201,163,91,.55);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.06),
        inset 0 0 30px rgba(201,163,91,.16),
        0 18px 38px rgba(10,10,10,.30),
        0 0 0 1px rgba(201,163,91,.25);
}
.brand-card:hover .brand-card__logo{ transform:scale(1.06); }
.brand-card--wide{
    grid-column:1 / -1;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    min-height:auto;
    padding:32px 40px;
    gap:32px;
}
.brand-card--wide .brand-card__name{ margin:0; }
.brand-card--wide .brand-card__desc{ margin:6px 0 0; max-width:50ch; }
.brand-card--wide .btn{ flex-shrink:0; }
.brand-card__name{
    margin:0;
    font-family:var(--font-display);
    font-weight:500;
    font-size:28px;
    line-height:1.1;
    letter-spacing:-.01em;
}
.brand-card__tag{
    margin:6px 0 0;
    font-size:11px;
    letter-spacing:.28em;
    text-transform:uppercase;
    color:var(--gold-deep);
}
.brand-card__line{
    display:block;
    width:32px; height:1px;
    background:var(--gold);
    margin:18px 0;
    transition:width .4s var(--ease);
}
.brand-card:hover .brand-card__line{ width:60px; }
.brand-card__desc{
    margin:0;
    color:var(--muted);
    font-size:14px;
    line-height:1.6;
}
.brand-card--cta{
    background:var(--ink);
    color:#fff;
    border-color:var(--ink);
    justify-content:center;
    align-items:flex-start;
}
.brand-card--cta::before{
    background:radial-gradient(120% 80% at 0% 0%, rgba(201,163,91,.18), transparent 60%);
    opacity:1;
}
.brand-card--cta .brand-card__name{ color:#fff; }
.brand-card--cta .brand-card__desc{ color:rgba(255,255,255,.6); margin-bottom:24px; }
.brand-card--cta .btn--ghost{
    color:#fff;
    border-color:rgba(255,255,255,.25);
    padding:10px 18px;
    font-size:11px;
}
.brand-card--cta .btn--ghost::before{ background:var(--gold-gradient); }
.brand-card--cta .btn--ghost:hover{ color:#1a1305; border-color:transparent; }

/* =============================================================
   SPOTLIGHT · Viral Drama flagship app
============================================================= */
.spotlight{
    background:
        radial-gradient(80% 60% at 0% 0%, rgba(201,163,91,.06), transparent 60%),
        linear-gradient(180deg, #fff 0%, #fbf7ec 55%, #fff 100%);
    position:relative;
    overflow:hidden;
}
.spotlight__glow{
    position:absolute;
    top:50%; right:-200px;
    width:800px; height:800px;
    background:radial-gradient(circle, rgba(201,163,91,.14), transparent 60%);
    filter:blur(60px);
    transform:translateY(-50%);
    pointer-events:none;
    z-index:0;
}
.spotlight__inner{
    display:grid;
    grid-template-columns: 1.05fr 1fr;
    gap:80px;
    align-items:center;
    position:relative;
    z-index:1;
}
.spotlight__copy .h2{
    margin-top:18px;
    font-size:clamp(48px, 7.2vw, 104px);
    line-height:.98;
}

/* "Currently in development" status pill */
.spotlight__status{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-top:18px;
    padding:8px 16px 8px 14px;
    border-radius:999px;
    background:rgba(255,255,255,.7);
    border:1px solid rgba(201,163,91,.35);
    backdrop-filter:blur(8px);
    font-size:11px;
    font-weight:500;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--ink);
    box-shadow:0 6px 18px rgba(10,10,10,.04);
}
.spotlight__status-dot{
    width:8px; height:8px;
    border-radius:50%;
    background:#e0b964;
    box-shadow:0 0 0 4px rgba(224,185,100,.25);
    animation:livePulse 1.6s var(--ease) infinite;
}

/* "In progress" pills next to feature titles */
.spotlight__pill{
    display:inline-block;
    margin-left:8px;
    padding:2px 8px;
    border-radius:999px;
    background:rgba(201,163,91,.14);
    color:var(--gold-deep);
    font-family:var(--font-sans);
    font-style:normal;
    font-size:9.5px;
    font-weight:600;
    letter-spacing:.18em;
    text-transform:uppercase;
    vertical-align:middle;
    transform:translateY(-1px);
}
.spotlight__features h4{
    display:flex; align-items:center; flex-wrap:wrap; gap:4px;
}
.spotlight__tag{
    margin:24px 0 10px;
    font-family:var(--font-display);
    font-style:italic;
    font-size:clamp(18px, 1.8vw, 24px);
    color:var(--gold-deep);
    font-weight:380;
}
.spotlight__copy .lede{ margin:0; }

.spotlight__features{
    margin-top:42px;
    border-top:1px solid var(--line);
}
.spotlight__features li{
    display:grid;
    grid-template-columns:36px 1fr;
    gap:18px;
    padding:22px 0;
    border-bottom:1px solid var(--line);
    align-items:start;
    transition:background .35s var(--ease);
}
.spotlight__features li:hover{
    background:linear-gradient(90deg, transparent, rgba(201,163,91,.05), transparent);
}
.spotlight__bullet{
    width:18px; height:18px;
    border-radius:50%;
    background:var(--gold-gradient);
    margin-top:4px;
    position:relative;
    box-shadow:0 4px 12px rgba(201,163,91,.35);
}
.spotlight__bullet::after{
    content:"";
    position:absolute;
    inset:5px;
    border-radius:50%;
    background:#fff;
}
.spotlight__features h4{
    margin:0 0 4px;
    font-size:16px;
    font-weight:600;
    letter-spacing:-.01em;
}
.spotlight__features p{
    margin:0;
    font-size:14px;
    color:var(--muted);
    line-height:1.55;
}

.spotlight__cta{
    margin-top:42px;
    display:flex; align-items:center; gap:24px; flex-wrap:wrap;
}
.spotlight__store{
    display:inline-flex; align-items:center; gap:8px;
    font-family:var(--font-sans);
    font-size:11px;
    font-weight:500;
    letter-spacing:.24em;
    text-transform:uppercase;
    color:var(--ink);
    padding:6px 0;
    border-bottom:1px solid var(--gold);
    transition:color .25s, gap .25s;
}
.spotlight__store:hover{ color:var(--gold-deep); gap:12px; }

/* Visual side */
.spotlight__visual{
    position:relative;
    display:flex; flex-direction:column; align-items:center;
    padding:20px 0;
}

/* Floating badges */
.spotlight__badge{
    position:absolute;
    z-index:5;
    display:flex; align-items:center; gap:12px;
    padding:12px 18px;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(12px);
    border:1px solid rgba(201,163,91,.25);
    border-radius:16px;
    box-shadow:0 12px 32px rgba(10,10,10,.10);
    animation:badgeFloat 4s var(--ease) infinite alternate;
}
.spotlight__badge--top{
    top:6%; left:-10px;
    animation-delay:.3s;
}
.spotlight__badge--bottom{
    bottom:18%; right:-20px;
    animation-delay:1.4s;
}
.spotlight__badge .dot{
    width:8px; height:8px; border-radius:50%;
    background:#1cb472;
    box-shadow:0 0 0 4px rgba(28,180,114,.18);
    animation:livePulse 1.6s var(--ease) infinite;
}
.spotlight__badge .bolt{
    width:32px; height:32px;
    background:var(--gold-gradient);
    border-radius:50%;
    color:#1a1305;
    display:grid; place-items:center;
    font-size:14px;
}
.spotlight__badge strong{
    display:block;
    font-size:13px;
    font-weight:600;
    letter-spacing:-.01em;
    color:var(--ink);
}
.spotlight__badge span:not(.dot):not(.bolt){
    display:block;
    font-size:10px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--muted);
    margin-top:2px;
}
@keyframes badgeFloat{
    from{ transform:translateY(0); }
    to{ transform:translateY(-10px); }
}
@keyframes livePulse{
    0%,100%{ box-shadow:0 0 0 4px rgba(28,180,114,.18); }
    50%{ box-shadow:0 0 0 8px rgba(28,180,114,0); }
}

/* Phone mockup */
.phone{
    position:relative;
    width:300px; height:610px;
    background:linear-gradient(155deg, #2c2c2c 0%, #060606 100%);
    border-radius:46px;
    padding:11px;
    box-shadow:
        0 40px 90px rgba(10,10,10,.32),
        0 0 0 1px rgba(201,163,91,.28),
        inset 0 0 0 1px rgba(255,255,255,.06);
    animation:phoneFloat 6s var(--ease) infinite alternate;
}
@keyframes phoneFloat{
    from{ transform:translateY(0) rotate(-1.5deg); }
    to{ transform:translateY(-14px) rotate(1.5deg); }
}
.phone__notch{
    position:absolute;
    top:18px; left:50%;
    transform:translateX(-50%);
    width:96px; height:26px;
    background:#000;
    border-radius:14px;
    z-index:10;
}
.phone__shine{
    position:absolute;
    top:0; left:0; right:0; bottom:0;
    border-radius:46px;
    background:linear-gradient(155deg, rgba(255,255,255,.18) 0%, transparent 30%, transparent 70%, rgba(255,255,255,.06) 100%);
    pointer-events:none;
    mix-blend-mode:overlay;
}
.phone__wip{
    position:absolute;
    top:-22px; left:50%;
    transform:translateX(-50%);
    padding:5px 14px;
    border-radius:999px;
    background:#1a1a1a;
    color:var(--gold-bright);
    font-family:var(--font-sans);
    font-size:9px;
    font-weight:600;
    letter-spacing:.28em;
    text-transform:uppercase;
    white-space:nowrap;
    border:1px solid rgba(201,163,91,.4);
    box-shadow:0 8px 24px rgba(10,10,10,.18);
    z-index:6;
}
.phone__screen{
    position:relative;
    width:100%; height:100%;
    background:#000;
    border-radius:36px;
    overflow:hidden;
}

/* Reel cards (stacked) */
.reel{
    position:absolute;
    inset:0;
    border-radius:36px;
    overflow:hidden;
    transform:
        translate(calc(var(--i, 0) * 14px), calc(var(--i, 0) * 10px))
        scale(calc(1 - var(--i, 0) * .055));
    opacity:calc(1 - var(--i, 0) * .35);
    transform-origin:top right;
    transition:transform .6s var(--ease), opacity .6s var(--ease);
}
.reel--front{ z-index:3; background:#1a0a26; }
.reel--mid{
    z-index:2;
    background:linear-gradient(160deg, #3a1648 0%, #6f1f50 60%, #b8324f 100%);
}
.reel--back{
    z-index:1;
    background:linear-gradient(160deg, #1f1632 0%, #4a1644 60%, #882a4e 100%);
}

.reel__bg{
    position:absolute; inset:0;
    background:
        radial-gradient(50% 30% at 30% 30%, rgba(201,163,91,.35), transparent 60%),
        linear-gradient(165deg, #1c0a2a 0%, #4e0f3d 45%, #b32a48 100%);
}
.reel__photo{
    position:absolute;
    inset:0;
    width:100%; height:100%;
    object-fit:cover;
    object-position:center;
    z-index:1;
    transition:transform 8s linear;
}
.reel--front:hover .reel__photo{ transform:scale(1.06); }
.reel__overlay{
    position:absolute; inset:0;
    background:
        radial-gradient(80% 60% at 50% 30%, rgba(255,255,255,.12), transparent 60%),
        linear-gradient(180deg, rgba(0,0,0,.55) 0%, transparent 18%, transparent 60%, rgba(0,0,0,.7) 100%);
    pointer-events:none;
}
.reel__statusbar{
    position:absolute; top:18px; left:24px; right:24px;
    display:flex; justify-content:space-between;
    font-family:var(--font-sans);
    font-size:11px;
    font-weight:600;
    color:#fff;
    z-index:4;
    letter-spacing:.02em;
}
.reel__topbar{
    position:absolute; top:54px; left:14px; right:14px;
    display:flex; justify-content:space-between; align-items:center;
    z-index:3;
}
.reel__brand{
    display:flex; align-items:center; gap:10px;
}
.reel__logo{
    width:34px; height:34px;
    border-radius:11px;
    background:var(--gold-gradient);
    color:#1a1305;
    font-family:var(--font-display);
    font-style:italic;
    font-weight:600;
    font-size:14px;
    display:grid; place-items:center;
    box-shadow:0 6px 14px rgba(0,0,0,.3);
}
.reel__brand strong{
    display:block;
    color:#fff;
    font-size:13px;
    font-weight:600;
    letter-spacing:-.01em;
    line-height:1.1;
}
.reel__brand span{
    display:block;
    color:rgba(255,255,255,.6);
    font-size:10px;
    letter-spacing:.18em;
    text-transform:uppercase;
    margin-top:2px;
}
.reel__live{
    padding:4px 10px;
    border-radius:999px;
    background:rgba(255,80,80,.85);
    color:#fff;
    font-size:9px;
    font-weight:700;
    letter-spacing:.18em;
}
.reel__live--wip{
    background:rgba(255,255,255,.18);
    backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,.28);
    color:#f3d98a;
    box-shadow:inset 0 0 0 1px rgba(201,163,91,.3);
}
.reel__play{
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:68px; height:68px;
    border-radius:50%;
    background:rgba(255,255,255,.18);
    backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.32);
    display:grid; place-items:center;
    z-index:3;
    cursor:pointer;
    animation:playPulse 2.6s var(--ease) infinite;
}
.reel__play svg{
    width:24px; height:24px;
    color:#fff;
    margin-left:3px;
}
@keyframes playPulse{
    0%,100%{ box-shadow:0 0 0 0 rgba(255,255,255,.25); }
    60%{ box-shadow:0 0 0 18px rgba(255,255,255,0); }
}
.reel__sidebar{
    position:absolute; right:14px; bottom:120px;
    display:flex; flex-direction:column; gap:18px;
    z-index:3;
}
.reel__action{
    display:flex; flex-direction:column; align-items:center; gap:4px;
    color:#fff;
}
.reel__icon{
    width:38px; height:38px;
    border-radius:50%;
    background:rgba(255,255,255,.16);
    backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,.18);
    display:grid; place-items:center;
    font-size:16px;
    color:#fff;
}
.reel__action span:last-child{
    font-size:10px;
    font-weight:600;
    letter-spacing:.04em;
    text-shadow:0 1px 4px rgba(0,0,0,.4);
}
.reel__bottom{
    position:absolute; left:14px; right:80px; bottom:32px;
    z-index:3;
    color:#fff;
}
.reel__bottom strong{
    display:block;
    font-size:13px;
    font-weight:700;
    letter-spacing:-.01em;
    margin-bottom:4px;
}
.reel__bottom p{
    margin:0;
    font-size:11px;
    color:rgba(255,255,255,.85);
    line-height:1.45;
}
.reel__progress{
    position:absolute; left:14px; right:14px; bottom:14px;
    height:3px;
    background:rgba(255,255,255,.18);
    border-radius:3px;
    overflow:hidden;
    z-index:3;
}
.reel__progress span{
    display:block; height:100%;
    width:0%;
    background:linear-gradient(90deg, #fff, var(--gold-bright));
    animation:reelProgress 6s linear infinite;
    border-radius:3px;
}
@keyframes reelProgress{
    from{ width:0%; }
    to{ width:100%; }
}

/* Stats below phone */
.spotlight__stats{
    display:flex; gap:42px;
    margin-top:54px;
    padding-top:32px;
    border-top:1px solid var(--line);
    width:100%;
    max-width:380px;
    justify-content:space-between;
}
.spotlight__stats > div{
    text-align:center;
    display:flex; flex-direction:column; align-items:center;
    flex:1;
}
.spotlight__stat-num{
    font-family:var(--font-display);
    font-size:34px;
    font-weight:400;
    color:var(--gold-deep);
    -webkit-text-fill-color:var(--gold-deep);
    background:none;
    line-height:1;
    display:inline;
}
.spotlight__stat-yr{
    font-family:var(--font-display);
    font-size:22px;
    color:var(--gold-deep);
    line-height:1;
    display:inline;
    margin-left:2px;
    font-style:italic;
}
.spotlight__stats .plus{
    font-family:var(--font-display);
    font-size:22px;
    color:var(--gold);
    line-height:1;
    display:inline;
}
.spotlight__stats--build .spotlight__stat-num{
    font-style:italic;
}
.spotlight__stat-lbl{
    width:100%;
    font-size:9.5px;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--muted);
    margin-top:10px;
}

@media (max-width:1080px){
    .spotlight__inner{
        grid-template-columns:1fr;
        gap:80px;
    }
    .spotlight__copy{ text-align:center; }
    .spotlight__copy .kicker{ display:inline-flex; }
    .spotlight__features{ text-align:left; }
    .spotlight__cta{ justify-content:center; }
    .spotlight__visual{ padding:60px 0 20px; }
}
@media (max-width:720px){
    .phone{ width:260px; height:540px; }
    .spotlight__badge--top{ top:0; left:-20px; }
    .spotlight__badge--bottom{ bottom:30%; right:-20px; }
    .spotlight__stats{ gap:20px; max-width:320px; }
    .spotlight__stat-num{ font-size:28px; }
}

/* =============================================================
   WHY US
============================================================= */
.why{
    background:
        radial-gradient(80% 60% at 100% 0%, rgba(201,163,91,.08), transparent 60%),
        #fff;
}
.why__inner > .section__head{ max-width:760px; }
.why__stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:32px;
    margin:60px 0 100px;
    padding:48px 0;
    border-block:1px solid var(--line);
    position:relative;
}
.why__stats::before,
.why__stats::after{
    content:""; position:absolute;
    width:80px; height:1px;
    background:var(--gold);
}
.why__stats::before{ top:-1px; left:0; }
.why__stats::after{ bottom:-1px; right:0; }
.stat{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.stat__num{
    font-family:var(--font-display);
    font-size:clamp(48px, 6vw, 84px);
    font-weight:500;
    line-height:1;
    color:var(--gold-deep);
    -webkit-text-fill-color:var(--gold-deep);
    background:none;
}
.stat__plus{
    font-family:var(--font-display);
    font-size:48px;
    color:var(--gold);
    line-height:1;
}
.stat__label{
    width:100%;
    font-size:11px;
    letter-spacing:.28em;
    text-transform:uppercase;
    color:var(--muted);
    margin-top:14px;
}

.why__features{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}
.feature{
    padding:28px 26px 30px;
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:#fff;
    transition:transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.feature:hover{
    transform:translateY(-4px);
    border-color:var(--gold);
    box-shadow:var(--shadow-sm);
}
.feature__icon{
    display:inline-block;
    color:var(--gold);
    font-size:22px;
    margin-bottom:14px;
}
.feature h4{
    margin:0 0 10px;
    font-size:17px;
    font-weight:600;
    letter-spacing:-.01em;
}
.feature p{
    margin:0;
    color:var(--muted);
    font-size:14px;
    line-height:1.6;
}

/* =============================================================
   CONTACT
============================================================= */
.contact{
    background:linear-gradient(180deg, var(--bg-cream) 0%, #fff 100%);
    position:relative;
    overflow:hidden;
}
.contact::before{
    content:""; position:absolute;
    top:-200px; right:-200px;
    width:600px; height:600px;
    background:radial-gradient(circle, rgba(201,163,91,.12), transparent 60%);
    filter:blur(40px);
    pointer-events:none;
}
.contact__inner{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:80px;
    align-items:start;
    position:relative;
}
.contact__left .lede{ margin-top:24px; }
.contact__info{
    margin-top:48px;
    border-top:1px solid var(--line);
}
.contact__info li{
    display:grid;
    grid-template-columns: 90px 1fr;
    gap:24px;
    padding:20px 0;
    border-bottom:1px solid var(--line);
    align-items:baseline;
}
.contact__label{
    font-size:11px;
    letter-spacing:.28em;
    text-transform:uppercase;
    color:var(--gold-deep);
}
.contact__val{
    font-size:16px;
    color:var(--ink);
    font-weight:500;
}
a.contact__val{ transition:color .25s; }
a.contact__val:hover{ color:var(--gold-deep); }

/* Form */
.contact__form{
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:42px 40px;
    box-shadow:var(--shadow-md);
    position:relative;
}
.contact__form::before{
    content:"";
    position:absolute; top:0; left:30px; right:30px; height:1px;
    background:var(--gold-gradient);
}
.field{
    position:relative;
    margin-bottom:24px;
}
.field-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}
.field input,
.field select,
.field textarea{
    width:100%;
    padding:22px 0 10px;
    background:transparent;
    border:0;
    border-bottom:1px solid var(--line-strong);
    border-radius:0;
    font-size:15px;
    outline:none;
    transition:border-color .3s var(--ease);
    color:var(--ink);
}
.field textarea{ resize:vertical; min-height:90px; }
.field select{
    padding-top:30px;
    appearance:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='%23a07e3a' d='M0 0h12L6 8z'/></svg>");
    background-repeat:no-repeat;
    background-position:right 4px center;
    background-size:10px;
    cursor:pointer;
}

/* Hide the native select that backs the custom dropdown for form submission */
.sr-select{
    position:absolute !important;
    width:1px; height:1px;
    padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0);
    border:0;
    opacity:0;
    pointer-events:none;
}

/* Custom dropdown trigger + panel */
.field--select{ position:relative; }
.field--select .label--static{
    position:absolute;
    left:0;
    top:0;
    transform:translateY(-2px) scale(.78);
    transform-origin:left top;
    color:var(--gold-deep);
    font-size:15px;
    letter-spacing:.12em;
    text-transform:uppercase;
    pointer-events:none;
}

.select{
    position:relative;
    padding:22px 30px 10px 0;
    border-bottom:1px solid var(--line-strong);
    color:var(--ink);
    font-size:15px;
    cursor:pointer;
    user-select:none;
    outline:none;
    transition:border-color .3s var(--ease);
}
.select:focus-visible,
.select.is-open{
    border-bottom-color:var(--gold);
}
.field.has-error .select{
    border-bottom-color:#c1322a;
}
.select__value{
    display:block;
    line-height:1.2;
}
.select__value.is-placeholder{
    color:var(--muted);
}
.select__chevron{
    position:absolute;
    right:4px;
    top:50%;
    transform:translateY(-25%);
    width:10px; height:auto;
    color:var(--gold-deep);
    transition:transform .35s var(--ease);
    pointer-events:none;
}
.select.is-open .select__chevron{
    transform:translateY(-75%) rotate(180deg);
}

.select__panel{
    position:absolute;
    top:calc(100% + 10px);
    left:0; right:0;
    z-index:200;
    margin:0;
    padding:8px;
    list-style:none;
    background:#fff;
    border-radius:16px;
    border:1px solid var(--line);
    box-shadow:
        0 22px 60px rgba(10,10,10,.14),
        0 0 0 1px rgba(201,163,91,.12);
    max-height:340px;
    overflow-y:auto;
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px) scale(.97);
    transform-origin:top center;
    transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
    scrollbar-width:thin;
    scrollbar-color:var(--gold) transparent;
}
.select__panel::before{
    content:"";
    position:absolute;
    top:0; left:18px; right:18px;
    height:1px;
    background:var(--gold-gradient);
    opacity:.5;
}
.select__panel::-webkit-scrollbar{ width:6px; }
.select__panel::-webkit-scrollbar-thumb{ background:var(--gold); border-radius:3px; }

.select.is-open .select__panel{
    opacity:1;
    visibility:visible;
    transform:translateY(0) scale(1);
}

.select__panel li{
    display:flex;
    align-items:center;
    gap:14px;
    padding:12px 14px;
    border-radius:10px;
    font-size:14.5px;
    color:var(--ink-soft);
    cursor:pointer;
    line-height:1.3;
    transition:background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.select__num{
    flex-shrink:0;
    width:24px;
    text-align:left;
    font-family:var(--font-display);
    font-style:italic;
    font-weight:380;
    font-size:14px;
    color:var(--gold);
    transition:color .2s var(--ease);
}
.select__panel li:hover,
.select__panel li.is-focused{
    background:linear-gradient(90deg, rgba(201,163,91,.12) 0%, rgba(201,163,91,.03) 100%);
    color:var(--ink);
}
.select__panel li:hover .select__num,
.select__panel li.is-focused .select__num{
    color:var(--gold-deep);
}
.select__panel li.is-selected{
    background:linear-gradient(90deg, rgba(201,163,91,.18) 0%, rgba(201,163,91,.05) 100%);
    color:var(--ink);
    font-weight:500;
}
.select__panel li.is-selected::after{
    content:"";
    margin-left:auto;
    width:6px; height:6px;
    border-radius:50%;
    background:var(--gold-gradient);
    box-shadow:0 0 0 3px rgba(201,163,91,.18);
    flex-shrink:0;
}
.field label{
    position:absolute;
    left:0;
    top:22px;
    color:var(--muted);
    font-size:15px;
    pointer-events:none;
    transition:transform .3s var(--ease), color .3s var(--ease), font-size .3s var(--ease);
    transform-origin:left top;
}
.label--static,
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field input:valid + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label,
.field select:focus + label,
.field select:valid + label{
    transform:translateY(-18px) scale(.78);
    color:var(--gold-deep);
    letter-spacing:.12em;
    text-transform:uppercase;
}
.field input::placeholder,
.field textarea::placeholder{ color:transparent; }
.field input,
.field textarea{ placeholder-shown: ''; }
.field input:focus,
.field select:focus,
.field textarea:focus{
    border-bottom-color:var(--gold);
}
.field__error{
    display:block;
    margin-top:6px;
    font-size:12px;
    color:#c1322a;
    min-height:14px;
    letter-spacing:.02em;
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea{
    border-bottom-color:#c1322a;
}
.field.is-prefilled select{
    border-bottom-color:var(--gold);
    animation:prefillGlow 1.6s var(--ease);
}
@keyframes prefillGlow{
    0%{ background:rgba(201,163,91,.15); }
    100%{ background:transparent; }
}
.contact__success{
    margin:18px 0 0;
    font-size:14px;
    color:var(--gold-deep);
    min-height:18px;
    text-align:center;
}

/* =============================================================
   FOOTER
============================================================= */
.footer{
    background:var(--ink);
    color:rgba(255,255,255,.7);
    padding:80px 0 0;
    position:relative;
    overflow:hidden;
}
.footer::before{
    content:"";
    position:absolute; top:0; left:0; right:0; height:1px;
    background:var(--gold-gradient);
}
.footer__inner{
    display:grid;
    grid-template-columns: 1.2fr 2fr;
    gap:80px;
}
.brand--footer .brand__title{ color:#fff; }
.brand--footer .brand__sub{ color:rgba(255,255,255,.45); }
.brand--footer .brand__logo{
    width:56px;
    filter:drop-shadow(0 0 18px rgba(201,163,91,.18));
}
.footer__brand p{
    margin-top:22px;
    color:rgba(255,255,255,.55);
    font-size:14px;
    line-height:1.7;
    max-width:38ch;
}
.footer__cols{
    display:grid;
    grid-template-columns: repeat(3,1fr);
    gap:30px;
}
.footer__cols h5{
    color:#fff;
    font-size:11px;
    letter-spacing:.32em;
    text-transform:uppercase;
    margin:0 0 18px;
    font-weight:500;
}
.footer__cols ul{ display:flex; flex-direction:column; gap:10px; }
.footer__cols a{
    color:rgba(255,255,255,.6);
    font-size:14px;
    transition:color .25s;
}
.footer__cols a:hover{ color:var(--gold-bright); }
.footer__cols li{ font-size:14px; color:rgba(255,255,255,.6); }

.footer__bottom{
    margin-top:60px;
    border-top:1px solid rgba(255,255,255,.08);
    padding:24px 0;
}
.footer__bottom-inner{
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
    font-size:12px;
    letter-spacing:.04em;
    color:rgba(255,255,255,.45);
}
.footer__legal{ color:var(--gold-bright); }

/* =============================================================
   MODAL · Service detail
============================================================= */
.modal{
    position:fixed; inset:0;
    z-index:8000;
    display:flex; align-items:center; justify-content:center;
    padding:32px 24px;
    visibility:hidden;
    opacity:0;
    transition:opacity .4s var(--ease), visibility .4s var(--ease);
}
.modal.is-open{
    visibility:visible;
    opacity:1;
}
.modal__backdrop{
    position:absolute; inset:0;
    background:rgba(15,12,8,.55);
    backdrop-filter:blur(14px) saturate(150%);
    -webkit-backdrop-filter:blur(14px) saturate(150%);
}
.modal__panel{
    position:relative;
    width:100%;
    max-width:760px;
    max-height:90vh;
    background:#fff;
    border-radius:28px;
    box-shadow:
        0 50px 120px rgba(10,10,10,.35),
        0 0 0 1px rgba(201,163,91,.25),
        inset 0 0 0 1px rgba(255,255,255,.5);
    overflow:hidden;
    display:flex; flex-direction:column;
    transform:translateY(40px) scale(.96);
    opacity:0;
    transition:transform .55s var(--ease), opacity .4s var(--ease);
}
.modal.is-open .modal__panel{
    transform:translateY(0) scale(1);
    opacity:1;
}
.modal__panel::before{
    content:"";
    position:absolute; top:0; left:30px; right:30px;
    height:2px;
    background:var(--gold-gradient);
    border-radius:0 0 4px 4px;
    z-index:1;
}
.modal__close{
    position:absolute;
    top:18px; right:18px;
    width:42px; height:42px;
    border-radius:50%;
    background:rgba(10,10,10,.04);
    color:var(--ink);
    display:grid; place-items:center;
    transition:background .25s, transform .25s, color .25s;
    z-index:5;
}
.modal__close:hover{
    background:var(--ink);
    color:#fff;
    transform:rotate(90deg);
}

.modal__head{
    padding:44px 48px 24px;
    border-bottom:1px solid var(--line);
    background:linear-gradient(180deg, #fffdf6 0%, #fff 100%);
}
.modal__kicker{
    display:inline-flex; align-items:center; gap:14px;
    font-size:11px;
    font-weight:500;
    letter-spacing:.32em;
    text-transform:uppercase;
    color:var(--gold-deep);
}
.modal__kicker .kicker__line{ display:inline-block; width:30px; height:1px; background:var(--gold); }
.modal__num{
    font-family:var(--font-display);
    font-style:italic;
    font-size:14px;
    color:var(--gold-deep);
    letter-spacing:.05em;
}
.modal__cat{ color:var(--gold-deep); }

.modal__title{
    margin:14px 0 8px;
    font-family:var(--font-display);
    font-weight:340;
    font-size:clamp(34px, 4.4vw, 54px);
    line-height:1.02;
    letter-spacing:-.025em;
    color:var(--ink);
}
.modal__tag{
    margin:0;
    font-family:var(--font-display);
    font-style:italic;
    font-weight:380;
    font-size:18px;
    color:var(--gold-deep);
}

.modal__body{
    flex:1;
    overflow-y:auto;
    padding:8px 48px 24px;
    scroll-behavior:smooth;
    /* Custom scrollbar */
    scrollbar-width:thin;
    scrollbar-color:var(--gold) transparent;
}
.modal__body::-webkit-scrollbar{ width:6px; }
.modal__body::-webkit-scrollbar-track{ background:transparent; }
.modal__body::-webkit-scrollbar-thumb{ background:var(--gold); border-radius:3px; }

.modal__section{
    padding:24px 0;
    border-bottom:1px solid var(--line);
}
.modal__section:last-child{ border-bottom:0; }
.modal__section h4{
    margin:0 0 12px;
    font-family:var(--font-sans);
    font-size:11px;
    font-weight:600;
    letter-spacing:.28em;
    text-transform:uppercase;
    color:var(--gold-deep);
}
.modal__section p{
    margin:0;
    font-size:16px;
    line-height:1.65;
    color:var(--ink-soft);
}

.modal__list{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap:10px 24px;
    margin:0;
}
.modal__list li{
    display:flex; gap:12px; align-items:flex-start;
    padding:8px 0;
    color:var(--ink-soft);
    font-size:14.5px;
    line-height:1.5;
}
.modal__list li::before{
    content:"";
    flex-shrink:0;
    width:7px; height:7px;
    border-radius:50%;
    background:var(--gold-gradient);
    margin-top:9px;
    box-shadow:0 0 0 3px rgba(201,163,91,.12);
}

.modal__process{
    counter-reset:step;
    margin:0;
    padding:0;
    display:grid; gap:14px;
    list-style:none;
}
.modal__process li{
    counter-increment:step;
    display:grid;
    grid-template-columns:46px 1fr;
    gap:18px;
    align-items:start;
    padding:14px 0;
    border-bottom:1px solid var(--line);
}
.modal__process li:last-child{ border-bottom:0; }
.modal__process li::before{
    content:counter(step, decimal-leading-zero);
    font-family:var(--font-display);
    font-style:italic;
    font-weight:380;
    font-size:22px;
    color:var(--gold);
    line-height:1.1;
}
.modal__process strong{
    display:block;
    margin-bottom:4px;
    font-size:15px;
    font-weight:600;
    color:var(--ink);
    letter-spacing:-.01em;
}
.modal__process span{
    color:var(--muted);
    font-size:14px;
    line-height:1.55;
}

.modal__foot{
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
    gap:18px;
    padding:24px 48px 32px;
    border-top:1px solid var(--line);
    background:linear-gradient(180deg, #fff 0%, #fbf7ec 100%);
}
.modal__back{
    font-family:var(--font-sans);
    font-size:11px;
    font-weight:500;
    letter-spacing:.24em;
    text-transform:uppercase;
    color:var(--muted);
    background:none;
    border:0;
    padding:6px 4px;
    transition:color .25s;
}
.modal__back:hover{ color:var(--ink); }
.modal__cta{ padding:14px 26px; }

/* Body lock when modal open */
body.modal-open{ overflow:hidden; }

/* Responsive modal */
@media (max-width:720px){
    .modal{ padding:0; align-items:flex-end; }
    .modal__panel{
        max-height:94vh;
        border-radius:24px 24px 0 0;
        transform:translateY(100%);
    }
    .modal.is-open .modal__panel{ transform:translateY(0); }
    .modal__head{ padding:38px 28px 22px; }
    .modal__body{ padding:8px 28px 16px; }
    .modal__foot{ padding:20px 28px 28px; }
    .modal__list{ grid-template-columns:1fr; }
    .modal__title{ font-size:34px; }
    .modal__close{ top:14px; right:14px; }
}

/* Back to top */
.to-top{
    position:fixed;
    right:28px; bottom:28px;
    width:46px; height:46px;
    border-radius:50%;
    background:var(--ink);
    color:#fff;
    display:grid; place-items:center;
    box-shadow:var(--shadow-md);
    transform:translateY(20px) scale(.9);
    opacity:0;
    visibility:hidden;
    transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s, background .35s;
    z-index:300;
    border:1px solid rgba(201,163,91,.3);
}
.to-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }
.to-top:hover{ background:var(--gold-deep); }

/* =============================================================
   REVEAL ANIMATIONS
============================================================= */
.reveal{
    opacity:0;
    transform:translateY(36px);
    transition:opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.reveal.is-visible{
    opacity:1;
    transform:translateY(0);
}

@media (prefers-reduced-motion: reduce){
    *,*::before,*::after{
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.001ms !important;
        scroll-behavior:auto !important;
    }
    .reveal{ opacity:1; transform:none; }
}

/* =============================================================
   RESPONSIVE
============================================================= */
@media (max-width: 1080px){
    .section{ padding:110px 0; }
    .services__grid{ grid-template-columns:repeat(2,1fr); }
    .partners__grid{ grid-template-columns:repeat(2,1fr); }
    .ecosystem__grid{ grid-template-columns:repeat(2,1fr); }
    .brand-card--wide{ flex-direction:column; align-items:flex-start; padding:38px 30px 34px; gap:20px; }
    .why__stats{ grid-template-columns:repeat(2,1fr); gap:40px 24px; }
    .why__features{ grid-template-columns:repeat(2,1fr); }
    .about__inner{ grid-template-columns:1fr; gap:48px; }
    .about__left{ position:static; }
    .contact__inner{ grid-template-columns:1fr; gap:48px; }
    .footer__inner{ grid-template-columns:1fr; gap:48px; }
    .nav{ display:none; }
    .burger{ display:inline-flex; }
    .header__cta{ display:none; }
}

@media (max-width: 720px){
    .container{ padding:0 22px; }
    .section{ padding:90px 0; }
    .h2{ font-size:clamp(28px, 8vw, 44px); }
    .section__head{ margin-bottom:54px; }
    .hero{ padding:140px 0 100px; min-height:auto; }
    .hero__title{ font-size:clamp(44px, 12vw, 76px); }
    .hero__meta{ gap:30px; margin-top:54px; padding-top:34px; }
    .hero__meta-num{ font-size:36px; }
    .marquee__track{ font-size:22px; gap:30px; }
    .services__grid{ grid-template-columns:1fr; }
    .service{ min-height:auto; }
    .partners__grid{ grid-template-columns:repeat(2,1fr); }
    .ecosystem__grid{ grid-template-columns:1fr; }
    .why__stats{ grid-template-columns:1fr 1fr; }
    .why__features{ grid-template-columns:1fr; }
    .footer__cols{ grid-template-columns:1fr 1fr; gap:32px; }
    .contact__form{ padding:32px 24px; }
    .field-row{ grid-template-columns:1fr; gap:0; }
    .contact__info li{ grid-template-columns:1fr; gap:4px; }
    .about__pillars li{ grid-template-columns:60px 1fr; gap:16px; }
    .mobile-menu__label{ font-size:26px; }
    .hero__scroll{ display:none; }
    .to-top{ right:18px; bottom:18px; }
}

@media (max-width: 420px){
    .partners__grid{ grid-template-columns:1fr; }
    .why__stats{ grid-template-columns:1fr; gap:30px; }
    .footer__cols{ grid-template-columns:1fr; }
    .brand__sub{ display:none; }
}

/* =============================================================
   ADD-ONS · Scroll progress, spotlights, char reveal, magnetic
============================================================= */

/* Scroll progress bar */
.scroll-progress{
    position:fixed; top:0; left:0;
    width:0%; height:2px;
    background:var(--gold-gradient);
    z-index:9100;
    transition:width .12s linear;
    box-shadow:0 0 14px rgba(201,163,91,.5);
}

/* Service card spotlight (cursor-following radial highlight) */
.service{
    --mx:50%;
    --my:50%;
}
.service::after{
    content:"";
    position:absolute; inset:-1px;
    background:radial-gradient(180px circle at var(--mx) var(--my), rgba(201,163,91,.20), transparent 60%);
    opacity:0;
    transition:opacity .35s var(--ease);
    pointer-events:none;
    border-radius:inherit;
    z-index:-1;
}
.service:hover::after{ opacity:1; }

/* Brand card spotlight */
.brand-card{
    --mx:50%; --my:50%;
}
.brand-card::after{
    content:"";
    position:absolute; inset:0;
    background:radial-gradient(220px circle at var(--mx) var(--my), rgba(201,163,91,.18), transparent 60%);
    opacity:0;
    transition:opacity .35s var(--ease);
    pointer-events:none;
    border-radius:inherit;
    z-index:-1;
}
.brand-card:hover::after{ opacity:1; }

/* Character reveal — used by JS to split h2 headings */
.char{
    display:inline-block;
    transform:translateY(.9em) rotate(4deg);
    opacity:0;
    transition:transform .9s var(--ease-out), opacity .9s var(--ease-out);
}
.char-space{ display:inline-block; width:.28em; }
.h2.is-split.is-visible .char,
.reveal.is-visible .h2.is-split .char{
    transform:translateY(0) rotate(0);
    opacity:1;
}

/* Magnetic button container */
.btn[data-magnetic]{ will-change:transform; }

/* Gold "Future" word — slightly larger weight in Fraunces */
.word--gold{
    font-weight:380;
}

/* Brand card link improvements (Fraunces tightening) */
.brand-card__name{ font-weight:380; }
.brand-card__desc{ max-width:34ch; }

/* Partner logos refinement for Space Grotesk */
.partner__logo svg text{ font-family:'Space Grotesk', sans-serif !important; }

/* Smoother mobile menu typography */
.mobile-menu__label{ font-weight:380; }

/* Header brand tweaks for Fraunces */
.brand__title{ font-weight:600; letter-spacing:-.01em; }
.brand__s{ font-weight:400; }

/* Pillar number more elegant */
.pill-num{ font-weight:380; }

/* Marquee italics */
.marquee__track{ font-weight:340; }

/* =============================================================
   FULL RESPONSIVE REFINEMENTS  (laptops · tablets · phones · landscape)
============================================================= */

/* Global overflow + media safety */
html, body{ overflow-x:hidden; max-width:100vw; }
img, svg, video, canvas{ max-width:100%; height:auto; }

/* Laptops / small desktops */
@media (max-width: 1280px){
    :root{ --container: 1140px; }
    .container{ padding:0 28px; }
    .section{ padding:120px 0; }
    .hero__title{ font-size:clamp(46px, 8.2vw, 116px); }
    .why__features{ gap:24px; }
}

/* Tablet landscape and below */
@media (max-width: 1080px){
    .hero__meta{ gap:32px; padding-top:38px; margin-top:62px; }
    .hero__meta-num{ font-size:38px; }
    .modal__panel{ max-height:88vh; }
    .modal__head{ padding:40px 36px 22px; }
    .modal__body{ padding:8px 36px 18px; }
    .modal__foot{ padding:22px 36px 28px; }
    .footer__cols{ grid-template-columns:repeat(3,1fr); gap:24px; }
    .partners .section__head{ padding:0 22px; }
    .marquee--partners .marquee__track{ gap:52px; }
    .spotlight__copy .h2{ font-size:clamp(40px, 8vw, 80px); }
}

/* Tablet portrait — hide desktop nav slightly earlier */
@media (max-width: 880px){
    .nav{ display:none; }
    .burger{ display:inline-flex; }
    .header__cta{ display:none; }
    .spotlight__inner{ gap:60px; }
}

/* Mobile (extends existing 720px rules) */
@media (max-width: 720px){
    .container{ padding:0 20px; }

    .hero{ padding:130px 0 80px; min-height:auto; }
    .hero__inner{ max-width:100%; }
    .hero__eyebrow{ padding:6px 14px; gap:8px; font-size:10px; letter-spacing:.26em; }
    .hero__lede{ font-size:15px; line-height:1.6; margin-bottom:34px; }
    .hero__cta{ flex-direction:column; gap:10px; width:100%; }
    .hero__cta .btn{ width:100%; max-width:340px; }
    .hero__meta{ gap:24px; margin-top:46px; padding-top:30px; }
    .hero__meta-num{ font-size:32px; }
    .hero__meta-item .plus{ font-size:24px; }

    .h2{ font-size:clamp(28px, 8.2vw, 42px); line-height:1.06; }
    .lede{ font-size:16px; }
    .section__sub{ font-size:15px; }
    .kicker{ font-size:10px; letter-spacing:.28em; }

    .header{ padding:10px 0; }
    .header__inner{ gap:12px; }
    .brand__logo{ width:42px; }
    .burger{ height:40px; padding:6px 12px 6px 14px; }

    .marquee{ padding:18px 0; }
    .marquee__track{ font-size:22px; gap:28px; }
    .marquee--partners{ padding:28px 0; }
    .marquee--partners .marquee__track{ gap:36px; }
    img.partner-mark{ height:28px; max-width:160px; }

    .about__pillars li{ padding:22px 0; row-gap:6px; }
    .about__pillars h4{ font-size:17px; }
    .pill-num{ font-size:26px; }

    .service{ padding:36px 24px 32px; }
    .service__title{ font-size:18px; }
    .service__arrow{ width:32px; height:32px; right:20px; bottom:20px; }

    .brand-card{ padding:28px 22px 26px; min-height:auto; }
    .brand-card__logo-wrap{ width:64px; height:64px; padding:8px; margin-bottom:18px; }
    .brand-card__name{ font-size:24px; }
    .brand-card__tag{ font-size:10px; letter-spacing:.22em; }
    .brand-card--wide{ padding:30px 24px 28px; }

    /* Spotlight (Viral Drama) */
    .spotlight__copy .h2{ font-size:clamp(36px, 11vw, 56px); }
    .spotlight__tag{ font-size:16px; margin:18px 0 8px; }
    .spotlight__status{ font-size:10px; letter-spacing:.12em; padding:7px 14px; }
    .spotlight__features li{ grid-template-columns:30px 1fr; gap:14px; padding:18px 0; }
    .spotlight__bullet{ width:16px; height:16px; }
    .spotlight__features h4{ font-size:15px; }
    .spotlight__features p{ font-size:13.5px; }
    .spotlight__pill{ font-size:9px; letter-spacing:.16em; padding:2px 7px; }
    .spotlight__cta{ flex-direction:column; align-items:stretch; gap:14px; }
    .spotlight__cta .btn{ width:100%; justify-content:center; }
    .spotlight__store{ justify-content:center; }
    .phone{ width:240px; height:500px; }
    .spotlight__badge{ padding:9px 13px; }
    .spotlight__badge strong{ font-size:12px; }
    .spotlight__badge span:not(.dot):not(.bolt){ font-size:9px; letter-spacing:.16em; }
    .spotlight__badge--top{ top:-10px; left:-10px; }
    .spotlight__badge--bottom{ bottom:18%; right:-10px; }
    .spotlight__stats{ gap:14px; max-width:100%; padding-top:24px; margin-top:36px; }
    .spotlight__stat-num{ font-size:26px; }
    .spotlight__stat-lbl{ font-size:9px; letter-spacing:.18em; margin-top:8px; }

    .why__stats{ padding:36px 0; gap:34px 22px; margin:42px 0 60px; }
    .stat{ justify-content:center; }
    .stat__num{ font-size:clamp(42px, 11vw, 64px); }
    .stat__plus{ font-size:34px; }
    .stat__label{ font-size:10px; letter-spacing:.22em; margin-top:10px; }

    .feature{ padding:24px 22px 26px; }
    .feature h4{ font-size:16px; }

    .contact__form{ padding:28px 22px; border-radius:14px; }
    .field input, .field textarea{ font-size:16px; /* prevents iOS zoom on focus */ }
    .field select{ font-size:16px; }
    .field label{ font-size:16px; }
    .select{ font-size:16px; }
    .contact__info{ margin-top:36px; }

    .footer{ padding-top:54px; }
    .footer__cols{ grid-template-columns:1fr 1fr; gap:28px 18px; }
    .footer__bottom-inner{ flex-direction:column; align-items:flex-start; gap:6px; }

    .modal{ padding:0; align-items:flex-end; }
    .modal__panel{ max-height:94vh; border-radius:22px 22px 0 0; }
    .modal__head{ padding:34px 22px 18px; }
    .modal__body{ padding:8px 22px 14px; }
    .modal__foot{ padding:18px 22px 22px; flex-direction:column; align-items:stretch; gap:12px; }
    .modal__foot .btn{ width:100%; justify-content:center; order:2; }
    .modal__back{ text-align:center; order:1; padding:10px 4px; }
    .modal__title{ font-size:28px; }
    .modal__tag{ font-size:15px; }
    .modal__section{ padding:18px 0; }
    .modal__section p{ font-size:14.5px; }
    .modal__list{ grid-template-columns:1fr; gap:0; }
    .modal__process li{ grid-template-columns:34px 1fr; gap:14px; padding:12px 0; }
    .modal__close{ top:12px; right:12px; width:38px; height:38px; }

    .preloader__logo{ width:clamp(180px, 56vw, 280px); }

    .to-top{ width:42px; height:42px; right:14px; bottom:14px; }
}

/* Small phones */
@media (max-width: 480px){
    .container{ padding:0 16px; }
    .section{ padding:74px 0; }

    .header{ padding:8px 0; }
    .header__inner{ gap:10px; }
    .brand__logo{ width:38px; }

    .hero{ padding:115px 0 70px; }
    .hero__title{ font-size:clamp(38px, 11.5vw, 60px); letter-spacing:-.025em; }
    .hero__eyebrow{ padding:5px 12px; }
    .hero__meta{ flex-direction:column; gap:18px; }
    .hero__meta-item{ width:100%; }
    .hero__meta-label{ margin-top:4px; }

    .h2{ font-size:clamp(26px, 9vw, 36px); }
    .section__head{ margin-bottom:42px; }
    .section__sub{ font-size:14px; margin-top:14px; }

    .marquee__track{ font-size:19px; gap:22px; }
    .marquee--partners .marquee__track{ gap:30px; }
    img.partner-mark{ height:24px; max-width:140px; }
    .partner-sep{ font-size:.28em; }

    .about__inner{ gap:40px; }
    .about__pillars li{ grid-template-columns:52px 1fr; gap:14px; }

    .services__grid{ border-radius:14px; }
    .service{ padding:32px 22px 30px; min-height:auto; }
    .service__num{ margin-bottom:18px; }
    .service__icon{ margin-bottom:18px; }

    .ecosystem__grid{ gap:16px; }
    .brand-card{ padding:24px 20px 24px; }
    .brand-card__logo-wrap{ width:58px; height:58px; padding:7px; margin-bottom:16px; }
    .brand-card__name{ font-size:22px; }
    .brand-card__desc{ font-size:13.5px; line-height:1.55; }
    .brand-card__line{ margin:14px 0; }
    .brand-card__visit{ font-size:9.5px; padding:8px 14px; margin-top:18px; }

    .spotlight__inner{ gap:50px; }
    .spotlight__copy .h2{ font-size:clamp(32px, 12vw, 48px); }
    .spotlight__tag{ font-size:15px; }
    .phone{ width:220px; height:460px; padding:9px; border-radius:38px; }
    .phone__screen{ border-radius:30px; }
    .phone__notch{ width:80px; height:22px; top:14px; }
    .phone__wip{ font-size:8px; padding:4px 12px; letter-spacing:.24em; top:-18px; }
    .spotlight__badge{ padding:8px 12px; }
    .spotlight__badge .bolt{ width:28px; height:28px; font-size:12px; }
    .spotlight__badge strong{ font-size:11px; }
    .spotlight__badge span:not(.dot):not(.bolt){ font-size:8.5px; }
    .spotlight__badge--top{ left:0; }
    .spotlight__badge--bottom{ right:0; bottom:22%; }
    .spotlight__stats{ gap:10px; }
    .spotlight__stat-num{ font-size:22px; }
    .spotlight__stat-yr{ font-size:14px; }
    .spotlight__stat-lbl{ font-size:8px; letter-spacing:.16em; margin-top:6px; }

    .why__stats{ grid-template-columns:1fr 1fr; gap:26px 16px; padding:30px 0; }
    .stat{ flex-direction:column; align-items:center; text-align:center; }
    .stat__num{ font-size:clamp(38px, 11vw, 52px); }
    .stat__plus{ font-size:28px; }
    .why__features{ grid-template-columns:1fr; gap:14px; }

    .contact__form{ padding:24px 18px; }
    .contact__info li{ grid-template-columns:1fr; gap:4px; padding:16px 0; }
    .contact__label{ font-size:10px; }
    .contact__val{ font-size:15px; }

    .footer{ padding-top:48px; }
    .footer__inner{ gap:36px; }
    .footer__cols{ grid-template-columns:1fr 1fr; gap:22px 14px; }
    .footer__cols h5{ font-size:10px; letter-spacing:.26em; }
    .footer__cols a, .footer__cols li{ font-size:13px; }

    .modal__title{ font-size:24px; }
    .modal__tag{ font-size:14px; }
    .modal__kicker{ font-size:10px; gap:10px; }
    .modal__section h4{ font-size:10px; letter-spacing:.22em; }

    .preloader__logo{ width:clamp(170px, 62vw, 240px); }

    .scroll-progress{ height:1.5px; }
}

/* Very small phones (Galaxy Fold-class) */
@media (max-width: 360px){
    .container{ padding:0 14px; }
    .hero__title{ font-size:38px; }
    .h2{ font-size:24px; }
    .spotlight__copy .h2{ font-size:32px; }
    .footer__cols{ grid-template-columns:1fr; }
    .why__stats{ grid-template-columns:1fr; }
    .phone{ width:200px; height:420px; }
    .marquee--partners .marquee__track{ gap:24px; }
    img.partner-mark{ height:22px; max-width:120px; }
    .modal__title{ font-size:22px; }
    .brand-card{ padding:22px 18px; }
    .brand-card__name{ font-size:20px; }
}

/* Landscape mobile (short height phones rotated sideways) */
@media (max-height: 500px) and (orientation: landscape){
    .hero{ padding:90px 0 50px; min-height:auto; }
    .hero__title{ font-size:clamp(32px, 6vw, 52px); }
    .hero__lede{ margin-bottom:22px; }
    .hero__meta{ margin-top:24px; padding-top:18px; gap:20px; flex-direction:row; }
    .hero__meta-item{ width:auto; }
    .hero__scroll{ display:none; }
    .preloader__logo{ width:clamp(140px, 30vw, 220px); }
}

/* Touch-friendly enhancements — bigger tap targets */
@media (hover: none) and (pointer: coarse){
    .nav__link, .footer__cols a{ padding:10px 16px; }
    .btn{ min-height:44px; }
    .modal__close, .to-top{ min-width:44px; min-height:44px; }
    /* Show visit pill always on touch (since hover doesn't exist) */
    .brand-card__visit{ background:var(--ink); color:#fff; border-color:var(--ink); }
}

/* =============================================================
   CANONICAL BREAKPOINTS  (320 · 425 · 768 · 1024 · 1440+)
   Each breakpoint enforces: no overflow · fluid images · scaled text
============================================================= */

/* ---------- 1440px and up — Large desktop / 4K ---------- */
@media (min-width: 1440px){
    :root{ --container: 1320px; }
    .container{ padding:0 40px; }
    .section{ padding:140px 0; }
    .hero__title{ font-size:clamp(86px, 9vw, 132px); }
    .h2{ font-size:clamp(54px, 5vw, 72px); }
    .nav__list{ gap:8px; }
}
@media (min-width: 1920px){
    :root{ --container: 1440px; }
    .hero__title{ font-size:140px; }
}

/* ---------- 1024px and below — Laptop / tablet landscape ---------- */
@media (max-width: 1024px){
    :root{ --container: 980px; }
    .container{ padding:0 26px; }
    .section{ padding:110px 0; }
    .nav{ display:none; }
    .burger{ display:inline-flex; }
    .header__cta{ display:none; }
    .hero__title{ font-size:clamp(46px, 8vw, 92px); }
    .h2{ font-size:clamp(34px, 5.2vw, 56px); }
    .services__grid{ grid-template-columns:repeat(2, 1fr); }
    .partners__grid{ grid-template-columns:repeat(2, 1fr); }
    .ecosystem__grid{ grid-template-columns:repeat(2, 1fr); }
    .why__stats{ grid-template-columns:repeat(2, 1fr); gap:40px 24px; }
    .why__features{ grid-template-columns:repeat(2, 1fr); }
    .about__inner{ grid-template-columns:1fr; gap:48px; }
    .about__left{ position:static; }
    .contact__inner{ grid-template-columns:1fr; gap:48px; }
    .footer__inner{ grid-template-columns:1fr; gap:48px; }
    .footer__cols{ grid-template-columns:repeat(3,1fr); gap:24px; }
    .spotlight__inner{ grid-template-columns:1fr; gap:60px; text-align:center; }
    .spotlight__copy{ text-align:center; }
    .spotlight__copy .kicker, .spotlight__copy .spotlight__status{ display:inline-flex; }
    .spotlight__features{ text-align:left; }
    .spotlight__cta{ justify-content:center; }
    .brand-card--wide{ flex-direction:column; align-items:flex-start; padding:38px 30px 34px; gap:20px; }
    .modal__head{ padding:40px 36px 22px; }
    .modal__body{ padding:8px 36px 18px; }
    .modal__foot{ padding:22px 36px 28px; }
}

/* ---------- 768px and below — Tablet portrait / large mobile ---------- */
@media (max-width: 768px){
    .container{ padding:0 22px; }
    .section{ padding:90px 0; }

    .hero{ padding:130px 0 80px; min-height:auto; }
    .hero__inner{ max-width:100%; }
    .hero__title{ font-size:clamp(40px, 9.5vw, 64px); letter-spacing:-.025em; line-height:1; }
    .hero__eyebrow{ padding:6px 14px; font-size:10px; letter-spacing:.26em; }
    .hero__lede{ font-size:15.5px; line-height:1.6; margin-bottom:32px; }
    .hero__cta{ flex-direction:column; gap:10px; width:100%; align-items:center; }
    .hero__cta .btn{ width:100%; max-width:340px; justify-content:center; }
    .hero__meta{ gap:26px; margin-top:46px; padding-top:30px; flex-wrap:wrap; }
    .hero__meta-num{ font-size:32px; }
    .hero__meta-item .plus{ font-size:24px; }
    .hero__meta-label{ font-size:10px; letter-spacing:.22em; }
    .hero__scroll{ display:none; }

    .h2{ font-size:clamp(28px, 8.5vw, 44px); line-height:1.04; }
    .lede{ font-size:16px; }
    .section__head{ margin-bottom:54px; }
    .section__sub{ font-size:15px; }
    .kicker{ font-size:10px; letter-spacing:.28em; }

    .header{ padding:10px 0; }
    .header__inner{ gap:12px; }
    .brand__logo{ width:44px; height:auto; }
    .burger{ height:42px; padding:8px 12px 8px 16px; }

    .marquee{ padding:18px 0; }
    .marquee__track{ font-size:22px; gap:28px; }
    .marquee--partners{ padding:30px 0; }
    .marquee--partners .marquee__track{ gap:36px; font-size:clamp(32px, 8vw, 48px); }
    img.partner-mark{ height:28px; max-width:160px; }

    .about__pillars li{ grid-template-columns:60px 1fr; gap:16px; padding:22px 0; }
    .about__pillars h4{ font-size:17px; }
    .pill-num{ font-size:26px; }

    .services__grid{ grid-template-columns:1fr; border-radius:14px; }
    .service{ padding:38px 26px 34px; min-height:auto; }
    .service__title{ font-size:18px; }
    .service__arrow{ width:32px; height:32px; right:22px; bottom:22px; }

    .ecosystem__grid{ grid-template-columns:1fr; gap:18px; }
    .brand-card{ padding:30px 24px 28px; min-height:auto; }
    .brand-card__logo-wrap{ width:64px; height:64px; padding:8px; margin-bottom:18px; }
    .brand-card__name{ font-size:24px; }
    .brand-card__tag{ font-size:10px; letter-spacing:.22em; }
    .brand-card--wide{ padding:30px 24px 28px; }

    /* Spotlight / Viral Drama */
    .spotlight__copy .h2{ font-size:clamp(36px, 11vw, 60px); }
    .spotlight__tag{ font-size:16px; }
    .spotlight__status{ font-size:10px; padding:7px 14px; }
    .spotlight__features li{ grid-template-columns:30px 1fr; gap:14px; padding:18px 0; }
    .spotlight__bullet{ width:16px; height:16px; }
    .spotlight__features h4{ font-size:15px; }
    .spotlight__features p{ font-size:13.5px; }
    .spotlight__pill{ font-size:9px; letter-spacing:.16em; padding:2px 7px; }
    .spotlight__cta{ flex-direction:column; align-items:stretch; gap:14px; }
    .spotlight__cta .btn{ width:100%; justify-content:center; }
    .spotlight__store{ justify-content:center; }
    .phone{ width:250px; height:520px; }
    .spotlight__badge{ padding:9px 13px; }
    .spotlight__badge strong{ font-size:12px; }
    .spotlight__badge span:not(.dot):not(.bolt){ font-size:9px; letter-spacing:.16em; }
    .spotlight__badge--top{ top:-10px; left:-10px; }
    .spotlight__badge--bottom{ bottom:18%; right:-10px; }
    .spotlight__stats{ gap:14px; max-width:100%; padding-top:24px; margin-top:36px; }
    .spotlight__stat-num{ font-size:26px; }
    .spotlight__stat-lbl{ font-size:9px; letter-spacing:.18em; }

    .why__stats{ padding:36px 0; gap:34px 22px; grid-template-columns:repeat(2,1fr); }
    .stat{ justify-content:center; }
    .stat__num{ font-size:clamp(42px, 10vw, 64px); }
    .stat__plus{ font-size:34px; }
    .stat__label{ font-size:10px; letter-spacing:.22em; }
    .why__features{ grid-template-columns:1fr; }
    .feature{ padding:24px 22px 26px; }

    .contact__form{ padding:28px 22px; border-radius:14px; }
    .field input, .field textarea, .field select, .field label, .select{ font-size:16px; }
    .field-row{ grid-template-columns:1fr; gap:0; }
    .contact__info li{ grid-template-columns:1fr; gap:4px; padding:16px 0; }

    .footer{ padding-top:54px; }
    .footer__cols{ grid-template-columns:1fr 1fr; gap:28px 18px; }
    .footer__bottom-inner{ flex-direction:column; align-items:flex-start; gap:6px; }

    .modal{ padding:0; align-items:flex-end; }
    .modal__panel{ max-height:94vh; border-radius:22px 22px 0 0; }
    .modal__head{ padding:34px 22px 18px; }
    .modal__body{ padding:8px 22px 14px; }
    .modal__foot{ flex-direction:column; align-items:stretch; gap:12px; padding:18px 22px 22px; }
    .modal__foot .btn{ width:100%; justify-content:center; order:2; }
    .modal__back{ text-align:center; order:1; padding:10px 4px; }
    .modal__title{ font-size:28px; }
    .modal__tag{ font-size:15px; }
    .modal__section{ padding:18px 0; }
    .modal__section p{ font-size:14.5px; }
    .modal__list{ grid-template-columns:1fr; gap:0; }
    .modal__process li{ grid-template-columns:34px 1fr; gap:14px; padding:12px 0; }
    .modal__close{ top:12px; right:12px; width:38px; height:38px; }

    .preloader__logo{ width:clamp(180px, 56vw, 280px); }

    .to-top{ width:42px; height:42px; right:14px; bottom:14px; }
}

/* ---------- 425px and below — Standard mobile ---------- */
@media (max-width: 425px){
    .container{ padding:0 18px; }
    .section{ padding:74px 0; }

    .header{ padding:8px 0; }
    .header__inner{ gap:10px; }
    .brand__logo{ width:40px; }
    .burger{ height:40px; padding:6px 12px 6px 14px; }

    .hero{ padding:118px 0 70px; }
    .hero__title{ font-size:clamp(38px, 11vw, 56px); }
    .hero__eyebrow{ padding:5px 12px; gap:8px; }
    .hero__lede{ font-size:15px; margin-bottom:28px; }
    .hero__meta{ flex-direction:column; gap:20px; padding-top:24px; }
    .hero__meta-item{ width:100%; }
    .hero__meta-num{ font-size:30px; }

    .h2{ font-size:clamp(26px, 9vw, 38px); }
    .section__head{ margin-bottom:42px; }
    .section__sub{ font-size:14px; }

    .marquee__track{ font-size:20px; gap:22px; }
    .marquee--partners .marquee__track{ gap:30px; font-size:clamp(26px, 7vw, 38px); }
    img.partner-mark{ height:24px; max-width:140px; }

    .about__pillars li{ grid-template-columns:50px 1fr; gap:14px; }
    .pill-num{ font-size:22px; }

    .service{ padding:34px 22px 32px; }
    .service__title{ font-size:17px; }

    .ecosystem__grid{ gap:16px; }
    .brand-card{ padding:26px 20px 24px; }
    .brand-card__logo-wrap{ width:58px; height:58px; padding:7px; margin-bottom:16px; }
    .brand-card__name{ font-size:22px; }
    .brand-card__desc{ font-size:13.5px; line-height:1.55; }
    .brand-card__line{ margin:14px 0; }
    .brand-card__visit{ font-size:9.5px; padding:8px 14px; margin-top:16px; }

    .spotlight__inner{ gap:50px; }
    .spotlight__copy .h2{ font-size:clamp(32px, 12vw, 50px); }
    .spotlight__tag{ font-size:15px; }
    .spotlight__lede{ font-size:14.5px; }
    .phone{ width:220px; height:460px; padding:9px; border-radius:38px; }
    .phone__screen{ border-radius:30px; }
    .phone__notch{ width:80px; height:22px; top:14px; }
    .phone__wip{ font-size:8px; padding:4px 12px; letter-spacing:.24em; top:-18px; }
    .spotlight__badge{ padding:8px 12px; }
    .spotlight__badge .bolt{ width:28px; height:28px; font-size:12px; }
    .spotlight__badge strong{ font-size:11px; }
    .spotlight__badge span:not(.dot):not(.bolt){ font-size:8.5px; }
    .spotlight__badge--top{ left:0; }
    .spotlight__badge--bottom{ right:0; bottom:22%; }
    .spotlight__stats{ gap:10px; padding-top:20px; }
    .spotlight__stat-num{ font-size:22px; }
    .spotlight__stat-yr{ font-size:14px; }
    .spotlight__stat-lbl{ font-size:8px; letter-spacing:.16em; }

    .why__stats{ grid-template-columns:1fr 1fr; gap:26px 16px; padding:30px 0; }
    .stat{ flex-direction:column; align-items:center; text-align:center; }
    .stat__num{ font-size:clamp(36px, 11vw, 50px); }
    .stat__plus{ font-size:26px; }
    .why__features{ grid-template-columns:1fr; gap:14px; }

    .contact__form{ padding:24px 18px; }
    .contact__info li{ grid-template-columns:1fr; gap:4px; padding:16px 0; }
    .contact__label{ font-size:10px; }
    .contact__val{ font-size:14.5px; }

    .footer{ padding-top:48px; }
    .footer__inner{ gap:36px; }
    .footer__cols{ grid-template-columns:1fr 1fr; gap:22px 14px; }
    .footer__cols h5{ font-size:10px; letter-spacing:.26em; }
    .footer__cols a, .footer__cols li{ font-size:13px; }

    .modal__title{ font-size:24px; }
    .modal__tag{ font-size:14px; }
    .modal__kicker{ font-size:10px; gap:10px; }
    .modal__section h4{ font-size:10px; letter-spacing:.22em; }

    .preloader__logo{ width:clamp(170px, 62vw, 240px); }

    .mobile-menu__inner{ padding:20px 22px 30px; }
    .mobile-menu__label{ font-size:24px; }
    .mobile-menu__nav a{ padding:16px 4px; grid-template-columns:32px 1fr auto; gap:14px; }
    .mobile-menu__num{ font-size:14px; }

    .to-top{ width:40px; height:40px; right:12px; bottom:12px; }
    .scroll-progress{ height:1.5px; }
}

/* ---------- 320px and below — Smallest mobile (Galaxy Fold etc.) ---------- */
@media (max-width: 320px){
    .container{ padding:0 14px; }
    .section{ padding:64px 0; }

    .hero{ padding:108px 0 60px; }
    .hero__title{ font-size:32px; letter-spacing:-.02em; }
    .hero__lede{ font-size:14px; }
    .hero__eyebrow{ font-size:9px; padding:5px 10px; letter-spacing:.22em; }
    .hero__meta-num{ font-size:26px; }
    .hero__meta-item .plus{ font-size:20px; }

    .h2{ font-size:22px; }
    .section__head{ margin-bottom:34px; }

    .header__inner{ gap:8px; }
    .brand__logo{ width:36px; }
    .burger{ height:36px; padding:5px 10px 5px 12px; gap:8px; }
    .burger__label{ font-size:10px; letter-spacing:.18em; }
    .burger__icon{ width:18px; height:12px; }
    .burger__icon span:nth-child(1){ top:1px; }
    .burger__icon span:nth-child(2){ top:5.5px; }
    .burger__icon span:nth-child(3){ top:10px; }

    .marquee__track{ font-size:17px; gap:18px; }
    .marquee--partners .marquee__track{ gap:24px; font-size:24px; }
    img.partner-mark{ height:20px; max-width:110px; }

    .about__pillars li{ grid-template-columns:42px 1fr; gap:12px; padding:18px 0; }
    .pill-num{ font-size:20px; }
    .about__pillars h4{ font-size:16px; }
    .about__pillars p{ font-size:14px; }

    .service{ padding:30px 18px 28px; }
    .service__title{ font-size:16px; }
    .service__desc{ font-size:13px; }

    .brand-card{ padding:22px 16px 22px; }
    .brand-card__logo-wrap{ width:52px; height:52px; padding:6px; margin-bottom:14px; }
    .brand-card__name{ font-size:20px; }
    .brand-card__tag{ font-size:9px; letter-spacing:.2em; }
    .brand-card__desc{ font-size:13px; }

    .spotlight__copy .h2{ font-size:28px; }
    .spotlight__tag{ font-size:14px; }
    .spotlight__features h4{ font-size:14px; }
    .spotlight__features p{ font-size:12.5px; }
    .phone{ width:190px; height:400px; padding:7px; border-radius:32px; }
    .phone__screen{ border-radius:26px; }
    .phone__notch{ width:70px; height:18px; top:12px; }
    .phone__wip{ font-size:7px; padding:3px 10px; }
    .spotlight__badge{ padding:6px 10px; gap:8px; }
    .spotlight__badge .dot{ width:6px; height:6px; }
    .spotlight__badge .bolt{ width:24px; height:24px; font-size:10px; }
    .spotlight__badge strong{ font-size:10px; }
    .spotlight__badge span:not(.dot):not(.bolt){ font-size:7.5px; }
    .spotlight__stats{ gap:8px; max-width:280px; }
    .spotlight__stat-num{ font-size:18px; }
    .spotlight__stat-yr{ font-size:12px; }
    .spotlight__stat-lbl{ font-size:7px; letter-spacing:.14em; margin-top:5px; }

    .why__stats{ grid-template-columns:1fr; gap:22px; }
    .stat__num{ font-size:38px; }
    .stat__plus{ font-size:24px; }

    .contact__form{ padding:20px 14px; }

    .footer__cols{ grid-template-columns:1fr; gap:24px; }

    .modal__head{ padding:28px 18px 16px; }
    .modal__body{ padding:6px 18px 12px; }
    .modal__foot{ padding:14px 18px 18px; }
    .modal__title{ font-size:20px; }
    .modal__tag{ font-size:13px; }

    .mobile-menu__inner{ padding:18px 18px 24px; }
    .mobile-menu__label{ font-size:22px; }
    .mobile-menu__nav a{ padding:14px 0; grid-template-columns:28px 1fr 14px; gap:12px; }
    .mobile-menu__num{ font-size:13px; }
    .mobile-menu__email, .mobile-menu__phone{ font-size:14px; }

    .preloader__logo{ width:170px; }
}

/* =============================================================
   GOLD-TEXT FALLBACK (always visible) + HEADING WRAP SAFETY
============================================================= */

/* Universal fallback for browsers without background-clip:text */
@supports not ((background-clip: text) or (-webkit-background-clip: text)){
    .gold,
    .word--gold,
    .hero__meta-num,
    .stat__num,
    .spotlight__stat-num{
        color:var(--gold-deep) !important;
        -webkit-text-fill-color:var(--gold-deep) !important;
        background:none !important;
        background-image:none !important;
    }
}

/* Ensure headings wrap on whitespace, NEVER mid-word */
.h2, .hero__title, .modal__title, .brand-card__name, .spotlight__copy .h2{
    overflow-wrap:normal;
    word-wrap:normal;
    word-break:keep-all;
    hyphens:none;
    -webkit-hyphens:none;
    max-width:100%;
}
/* Allow break only as a last resort (e.g., extremely long URLs/handles) */
.h2, .hero__title, .modal__title, .brand-card__name, .spotlight__copy .h2,
.gold, .word--gold{
    overflow-wrap:break-word;
}

/* Force gold spans to break properly inside headings */
.gold, .word--gold{
    display:inline;
    overflow-wrap:break-word;
    word-wrap:break-word;
}

/* Disable shimmer on small/low-power devices — performance + reliability */
@media (max-width: 720px){
    .word--gold{
        animation:wordUp 1.1s var(--ease) forwards !important;
        background-size:100% auto;
    }
}

/* =============================================================
   ULTRA-WIDE SAFETY + TINY-DEVICE SAFETY
============================================================= */

/* Very large screens (1920+) — clamp container so design doesn't stretch */
@media (min-width: 1600px){
    :root{ --container: 1400px; }
}
@media (min-width: 2000px){
    :root{ --container: 1500px; }
    .hero__title{ font-size:140px; }
}

/* Tiny devices (<340px) — ensure usable */
@media (max-width: 340px){
    .container{ padding:0 12px; }
    .hero__title{ font-size:34px; }
    .h2{ font-size:22px; }
    .spotlight__copy .h2{ font-size:28px; }
    .brand-card__name{ font-size:18px; }
    .marquee--partners .marquee__track{ gap:20px; }
    img.partner-mark{ height:20px; max-width:100px; }
    .phone{ width:180px; height:380px; padding:8px; border-radius:34px; }
    .phone__screen{ border-radius:26px; }
    .modal__title{ font-size:20px; }
    .brand__logo{ width:34px; }
}

/* Print friendly — bonus */
@media print{
    .preloader, .header, .footer, .to-top, .scroll-progress, .cursor, .marquee, .hero__particles, .modal, .mobile-menu{
        display:none !important;
    }
    body{ background:#fff; color:#000; }
    .gold, .word--gold{ color:#a07e3a !important; -webkit-text-fill-color:#a07e3a !important; }
}