/* ==========================================================================
   NIKONYX — shared design system
   Dark-luxury aesthetic · navy + gold · curved sections · glassmorphism
   ========================================================================== */

:root{
  /* ── Locked NIKONYX app 8-colour UI set ── */
  --digital-midnight:#001138;
  --digital-teal:#001646;
  --digital-black:#001138;
  --digital-cyan:#E1ECF7;
  --digital-blue:#0C5BE4;
  --digital-yellow:#0C5BE4;
  --digital-white:#FFFFFF;
  --digital-beige:#B3C8E2;
  --digital-olive:#002467;

  /* ── Project semantic aliases ── */
  --navy:var(--digital-midnight);
  --navy-2:var(--digital-teal);
  --navy-3:var(--digital-black);
  --ink:#001646;
  --muted:#B3C8E2;
  --slate:#002467;
  --gold:#B3C8E2;
  --gold-2:#0C5BE4;
  --gold-soft:#E1ECF7;
  --blue:var(--digital-blue);
  --line:#E1ECF7;
  --ivory:#F7F5F1;
  --paper:#FFFEFB;
  --glass:rgba(255,255,255,.82);
  --radius:26px;
  --shadow:0 24px 80px rgba(0,17,56,.18);
  --shadow-sm:0 15px 45px rgba(0,17,56,.09);
  --hero-curve-h:176px;
  --hdr-nav-h:74px;
  --focus-ring:0 0 0 3px rgba(12,91,228,.35);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --dur:.55s;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--hdr-nav-h)}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink);
  background:#FFFFFF;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.serif{font-family:"Playfair Display",Georgia,serif}
.shell{width:min(1360px,calc(100% - 40px));margin-inline:auto}
.gold-text{color:var(--gold-2)}

/* ---------- Buttons ---------- */
.primary,.secondary,.gold-cta,.app-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border-radius:999px;font-weight:800;border:0;cursor:pointer;font-family:inherit;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.primary{background:#001138;color:#fff;padding:16px 28px;box-shadow:0 12px 28px rgba(1,9,32,.28)}
.primary:hover{transform:translateY(-2px);box-shadow:0 18px 36px rgba(1,9,32,.38)}
.secondary{background:#fff;color:#001138;border:1px solid #b9c5d7;padding:14px 24px}
.secondary:hover{transform:translateY(-2px);border-color:#8ea1bd}
.secondary .play{width:28px;height:28px;border-radius:50%;background:#e9eff8;display:grid;place-items:center;font-size:12px}
.gold-cta{padding:16px 34px;background:linear-gradient(180deg,var(--gold-soft),#B3C8E2);color:#001138;box-shadow:0 14px 30px rgba(226,181,124,.30)}
.gold-cta:hover{transform:translateY(-2px);box-shadow:0 20px 40px rgba(226,181,124,.42)}
.ghost-gold{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:999px;border:1px solid rgba(226,181,124,.55);color:var(--gold);font-weight:800;transition:background .18s}
.ghost-gold:hover{background:rgba(226,181,124,.12)}

/* ==========================================================================
   NAVIGATION (injected by nikonyx.js)
   ========================================================================== */
#nav-root{height:76px}
.top-nav{
  position:fixed;top:0;left:0;right:0;z-index:50;height:76px;
  background:
    radial-gradient(circle at 50% 0%, rgba(10,100,227,.28), transparent 35%),
    linear-gradient(180deg,#001646,#001138);
  color:#fff;border-bottom:1px solid rgba(255,255,255,.09);
}
.nav-inner{
  height:100%;width:min(1410px,calc(100% - 52px));margin:auto;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.42em;font-size:16px;text-transform:uppercase;color:#fff}
.brand-mark{
  width:40px;height:40px;border:1.8px solid rgba(255,255,255,.75);border-radius:7px;
  display:grid;place-items:center;font-family:"Playfair Display",serif;font-size:30px;font-weight:800;line-height:1;
  box-shadow:inset 0 0 18px rgba(255,255,255,.12);
}
.hdr .emblem .nx-brand-logo{display:flex;width:100%;height:100%;align-items:center;justify-content:center}
.hdr .logo .nx-brand-logo--nav{align-self:center;flex-shrink:0}
.nav-links{display:flex;align-items:center;gap:42px;font-size:15px;font-weight:500;letter-spacing:.01em}
.nav-links a{opacity:.95;position:relative;padding:28px 0;transition:opacity .15s,color .15s}
.nav-links a:hover{opacity:1}
.nav-links a.active{opacity:1;font-weight:600}
.nav-links a.active::after{
  content:"";position:absolute;left:50%;bottom:20px;width:34px;height:2px;transform:translateX(-50%);
  border-radius:99px;background:var(--gold);
}
.app-btn{
  background:linear-gradient(180deg,var(--gold-soft),#B3C8E2);color:#001138;
  padding:14px 22px;font-size:14px;box-shadow:0 8px 28px rgba(226,181,124,.28);white-space:nowrap;
}
.app-btn:hover{transform:translateY(-1px)}
.menu-btn{display:none;color:#fff;background:none;border:0;font-size:28px;cursor:pointer;line-height:1}

/* home: nav floats over full-bleed hero */
body[data-page="home"] #nav-root{height:0}
body[data-page="home"] .top-nav{
  background:transparent;border-bottom:0;
}
body[data-page="home"] .nav-inner{position:relative}
body[data-page="home"] .top-nav .nav-links{
  position:absolute;left:50%;transform:translateX(-50%);
}

/* mobile drawer */
.nav-scrim{position:fixed;inset:0;background:rgba(3,9,20,.55);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:opacity .25s;z-index:60}
body.nav-open .nav-scrim{opacity:1;visibility:visible}
.mobile-drawer{
  position:fixed;top:0;right:0;height:100%;width:min(320px,82vw);z-index:70;
  background:linear-gradient(180deg,#001646,#001138);
  box-shadow:-20px 0 60px rgba(0,0,0,.4);transform:translateX(100%);transition:transform .3s ease;
  padding:26px 24px;display:flex;flex-direction:column;gap:4px;
}
body.nav-open .mobile-drawer{transform:translateX(0)}
body.nav-open{overflow:hidden}
.mobile-drawer .close{align-self:flex-end;background:none;border:0;color:#fff;font-size:26px;cursor:pointer;margin-bottom:10px}
.mobile-drawer a{color:#fff;font-size:16px;font-weight:600;padding:15px 4px;border-bottom:1px solid rgba(255,255,255,.08);opacity:.92}
.mobile-drawer a.active{color:var(--gold)}
.mobile-drawer .app-btn{margin-top:18px;align-self:flex-start}

/* ==========================================================================
   HERO (home)
   ========================================================================== */
.hero-wrap{
  position:relative;overflow:hidden;min-height:640px;padding:var(--hero-curve-h) 0 34px;
  background:#FFFFFF;
}
.hero-header{
  position:absolute;left:50%;transform:translateX(-50%);width:100vw;top:0;height:var(--hero-curve-h);z-index:0;pointer-events:none;
}
.hero-header::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 55% 80% at 50% 0%, rgba(10,100,227,.5), transparent 55%),
    radial-gradient(circle at 50% 35%, rgba(1,255,255,.10), transparent 42%),
    linear-gradient(180deg,#001138 0%,#001646 45%,#001138 78%,#001646 100%);
  border-bottom-left-radius:50% 52%;border-bottom-right-radius:50% 52%;
  box-shadow:0 16px 40px rgba(1,9,32,.28), inset 0 -12px 18px rgba(255,255,255,.1);
}
.stars{
  position:absolute;inset:0;z-index:1;opacity:.9;
  background-image:
    radial-gradient(circle at 8% 18%, rgba(255,255,255,.95) 0 1px, transparent 2px),
    radial-gradient(circle at 18% 8%, rgba(255,255,255,.75) 0 1px, transparent 2px),
    radial-gradient(circle at 32% 14%, rgba(255,255,255,.9) 0 1px, transparent 2px),
    radial-gradient(circle at 48% 6%, rgba(255,255,255,.85) 0 1px, transparent 2px),
    radial-gradient(circle at 62% 12%, rgba(255,255,255,.95) 0 1px, transparent 2px),
    radial-gradient(circle at 76% 8%, rgba(255,255,255,.7) 0 1px, transparent 2px),
    radial-gradient(circle at 92% 16%, rgba(255,255,255,.85) 0 1px, transparent 2px),
    radial-gradient(circle at 25% 22%, rgba(255,255,255,.55) 0 1px, transparent 2px),
    radial-gradient(circle at 84% 20%, rgba(255,255,255,.6) 0 1px, transparent 2px),
    radial-gradient(circle at 50% 18%, rgba(50,153,255,.45), transparent 90px);
}
.gold-arc{
  position:absolute;left:0;right:0;bottom:-1px;height:72px;z-index:3;overflow:visible;
}
.gold-arc svg{width:100%;height:100%;display:block;overflow:visible}

/* ornate medallion (gold ring + glowing navy core) */
.medallion{
  position:relative;display:grid;place-items:center;color:#fff;border-radius:50%;
  width:128px;height:128px;padding:6px;
  background:conic-gradient(from 215deg,#E1ECF7,#B3C8E2,#002467,#B3C8E2,#fff2d6,#B3C8E2,#002467,#E1ECF7);
  box-shadow:0 0 0 8px rgba(10,100,227,.22),0 0 56px rgba(10,100,227,.80),0 0 100px rgba(1,255,255,.22);
}
.medallion::before{
  content:"";position:absolute;inset:6px;border-radius:50%;
  background:radial-gradient(circle at 50% 30%,#001646 0 14%,#001138 50%,#001138 100%);
  box-shadow:inset 0 0 26px rgba(255,255,255,.2),inset 0 0 6px rgba(226,181,124,.6);
}
.medallion span{position:relative;z-index:2;font-family:"Playfair Display",serif;font-size:62px;font-weight:800;letter-spacing:-.12em;margin-right:6px;text-shadow:0 3px 20px #000}
.hero-medal{
  position:absolute;z-index:4;left:50%;top:50px;transform:translateX(-50%);
}
.hero-medal::before{
  content:"";position:absolute;top:50%;left:50%;width:min(520px,90vw);height:4px;
  transform:translate(-50%,-50%);
  background:linear-gradient(90deg,transparent 0%,rgba(10,100,227,.15) 18%,rgba(1,255,255,.85) 50%,rgba(10,100,227,.15) 82%,transparent 100%);
  filter:blur(.5px);z-index:-1;
}

.hero-grid{
  position:relative;z-index:3;display:grid;
  grid-template-columns:.95fr 1.38fr .82fr;gap:34px;align-items:start;
  margin-top:-8px;padding-top:0;
}
.tag{
  display:inline-flex;align-items:center;gap:8px;
  background:#eef5ff;color:#0C5BE4;border:1px solid #dbe9ff;
  padding:5px 11px;border-radius:999px;font-size:10px;text-transform:uppercase;font-weight:800;letter-spacing:.07em;
}
.hero-copy-column{text-align:left}
.hero-copy-column h1{
  margin:12px 0 0;display:flex;flex-direction:column;gap:0;
  font-size:clamp(38px,3.8vw,56px);line-height:1;letter-spacing:-.025em;color:#001138;
  font-family:"Playfair Display",Georgia,serif;font-weight:700;
}
.hero-copy-column h1 .line-dark,
.hero-copy-column h1 .gold{
  display:block;font-size:1em;font-weight:inherit;line-height:1.04;letter-spacing:inherit;
}
.hero-copy-column h1 .line-dark{white-space:nowrap;color:#001138}
.hero-copy-column h1 .gold{color:var(--gold-2);margin:0}
.sub-title{
  font-family:"Playfair Display",serif;font-size:clamp(22px,2vw,28px);font-weight:700;
  margin:14px 0 6px;color:#001138;line-height:1.3;
}
.sub-title .spark{color:var(--gold-2);font-size:.9em}
.hero-copy{font-size:15px;color:#002467;margin:0 0 20px;line-height:1.5;font-weight:400}
.benefits{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:470px;
  padding:13px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.85);box-shadow:var(--shadow-sm);
}
.benefit{display:flex;gap:10px;align-items:center;border-right:1px solid #e6ebf2;padding-right:7px}
.benefit:last-child{border-right:0}
.benefit i{width:34px;height:34px;flex:0 0 34px;border:1px solid #c8d4e6;border-radius:50%;display:grid;place-items:center;font-style:normal;color:#001138;font-weight:800}
.benefit b{display:block;font-size:12px;margin-bottom:2px}
.benefit span{font-size:10px;line-height:1.35;color:#002467}
.hero-actions{display:flex;gap:18px;margin-top:28px;flex-wrap:wrap;align-items:center}

/* ==========================================================================
   PHONE CLUSTER (home)
   ========================================================================== */
.phone-stage{position:relative;height:450px;margin-top:-28px;display:flex;align-items:flex-end;justify-content:center;filter:drop-shadow(0 28px 25px rgba(4,22,49,.28))}
.phone-stage::after{content:"";position:absolute;left:6%;right:5%;bottom:-13px;height:20px;background:radial-gradient(ellipse,rgba(2,14,35,.2),transparent 70%);border-radius:50%}
.phone{
  position:absolute;bottom:0;width:142px;height:330px;border-radius:27px;padding:9px;
  background:linear-gradient(120deg,#001138,#001646 48%,#001138);
  border:2px solid #151b27;box-shadow:inset 0 0 0 2px #30394a,0 18px 40px rgba(1,9,32,.32);overflow:hidden;
}
.phone.large{width:174px;height:390px;border-radius:34px;z-index:8;left:50%;transform:translateX(-50%)}
.phone.left{left:13px;height:360px;width:155px;z-index:4;transform:rotate(-2deg)}
.phone.midright{right:128px;width:153px;height:355px;z-index:6;transform:rotate(4deg)}
.phone.right{right:8px;width:139px;height:330px;z-index:5;transform:rotate(6deg)}
.notch{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:50px;height:14px;background:#05070c;border-radius:0 0 11px 11px;z-index:3}
.screen{
  width:100%;height:100%;border-radius:22px;overflow:hidden;padding:24px 10px 48px;color:#fff;font-size:8px;
  background:linear-gradient(180deg,#001138,#001646 58%,#f8fbff 58% 100%);position:relative;
}
.screen.light{background:#f9fbff;color:#001138}
.screen.screen--profile{background:#eef1f6;color:#001138}
.screen.red{background:linear-gradient(180deg,#5c160d,#14223e 43%,#f9fbff 43%)}
.phone.large .screen{border-radius:27px;padding:28px 13px 12px;background:linear-gradient(180deg,#001138,#001646 55%,#f8fbff 55%)}
.status{display:flex;justify-content:space-between;font-size:6px;opacity:.85;margin-bottom:7px}
.screen-title{font-weight:800;font-size:10px;line-height:1.1}
.app-logo-small{width:22px;height:22px;margin:0 auto 6px;border:none;border-radius:0;display:flex;align-items:center;justify-content:center;font-size:0;background:transparent;box-shadow:none}
.avatar{width:58px;height:74px;border-radius:28px 28px 16px 16px;background:linear-gradient(#cfaa85 0 24%,#001138 24% 100%);margin:7px auto 8px;position:relative;overflow:hidden}
.avatar::after{content:"";position:absolute;left:17px;right:17px;top:15px;height:8px;background:#1d1d1d;border-radius:50%}
.search-box{border-radius:999px;padding:10px;background:#001138;border:1px solid rgba(226,181,124,.28);color:var(--gold);font-size:8px;font-weight:700;text-align:center;margin:8px 0;box-shadow:inset 0 0 15px rgba(10,100,227,.18)}
.chips{display:flex;gap:4px;flex-wrap:wrap;justify-content:center;margin:6px 0}
.chip{background:#eef3fb;border:1px solid #d9e2f2;color:#001138;border-radius:999px;padding:4px 7px;font-size:6px;font-weight:700}
.dark-card-row{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:7px}
.dark-card{
  position:relative;height:52px;border-radius:8px;background:#001138;border:1px solid #001646;
  color:#fff;display:grid;place-items:center;text-align:center;font-size:6px;line-height:1.15;overflow:hidden;
}
.dark-card img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.88;
}
.dark-card span{
  position:relative;z-index:1;padding:2px 4px;border-radius:4px;
  background:linear-gradient(180deg,rgba(1,9,32,.15),rgba(1,9,32,.72));
  text-shadow:0 1px 3px rgba(0,0,0,.55);
}
.mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:7px}
.mini-outfit{height:42px;border-radius:7px;background:linear-gradient(180deg,#f6f7fb,#d9dfe9);border:1px solid #d9e1ef;position:relative;overflow:hidden}
.mini-outfit::after{content:"";position:absolute;left:33%;right:33%;top:7px;bottom:4px;border-radius:10px 10px 4px 4px;background:#001138}
.wd-catalog .mini-outfit::after,
.wd-cat-row .mini-outfit::after,
.wardrobe-grid .mini-outfit::after{display:none}
.wardrobe-grid .mini-outfit{height:54px;border-radius:8px;background:#fff}
.wardrobe-grid .mini-outfit img{width:100%;height:100%;object-fit:contain;object-position:center;display:block;background:#f4f7fb;padding:2px}
.phone-screen-wardrobe .wardrobe-grid{margin-top:10px;padding:0 2px}

/* Digital Wardrobe — enlarged phone + richer catalogue (legacy) */
.media-panel--wardrobe{min-height:640px;padding:24px 20px}
.phone--wardrobe-xl{
  position:relative;width:228px;height:490px;border-radius:36px;padding:11px;
  background:linear-gradient(120deg,#001138,#001646 48%,#001138);
  border:2px solid #151b27;box-shadow:inset 0 0 0 2px #30394a,0 22px 48px rgba(1,9,32,.36);
}
.phone--wardrobe-xl .notch{width:64px;height:16px;top:11px}
.phone--wardrobe-xl .screen{
  border-radius:26px;padding:30px 12px 52px;font-size:9px;
}
.phone--wardrobe-xl .screen-title{font-size:12px}
.phone--wardrobe-xl .status{font-size:7px;margin-bottom:9px}
.phone--wardrobe-xl .wd-scene{left:10px;right:10px;top:40px;bottom:48px}
.phone--wardrobe-xl .wd-gallery{grid-template-columns:repeat(4,1fr);gap:5px}
.phone--wardrobe-xl .wd-pick{border-radius:7px}
.phone--wardrobe-xl .wd-catalog{
  gap:6px;max-height:100%;overflow-y:auto;overflow-x:hidden;
  scrollbar-width:none;-ms-overflow-style:none;
}
.phone--wardrobe-xl .wd-catalog::-webkit-scrollbar{display:none}
.phone--wardrobe-xl .wd-cat-head{font-size:7px}
.phone--wardrobe-xl .wd-tagline{font-size:7px;margin-bottom:8px}
.phone--wardrobe-xl .wd-import-bar{font-size:7px;margin-top:10px;padding:7px 9px}
.phone--wardrobe-xl .cosmic-nav{height:46px}
.phone--wardrobe-xl .cn-lbl{font-size:6px}

/* Digital Wardrobe mini-demo (gallery → wardrobe → outfits) */
.wardrobe-demo{--wd-dur:22s;position:relative}
.wardrobe-demo .wd-scene{
  position:absolute;left:8px;right:8px;top:36px;bottom:44px;
  opacity:0;pointer-events:none;
}
.wardrobe-demo.is-static .wd-scene{display:none}
.wardrobe-demo.is-static .wd-scene--closet{
  display:block;position:relative;left:0;right:0;top:0;bottom:0;opacity:1;
}
.wardrobe-demo.is-static .wd-item{opacity:1;transform:none}
.wardrobe-demo.is-static .wd-label{opacity:1}
.wardrobe-demo.is-static .wd-cat-head{opacity:1}
.wardrobe-demo.is-static .wd-outfit-look{opacity:1;transform:none}
.phone--wardrobe-xl .wd-look-frame{height:148px}
.phone--wardrobe-xl .wd-outfit-list--full{min-height:198px}
.wd-topbar{display:flex;align-items:center;gap:6px;font-size:9px;font-weight:800;color:#001138;margin-bottom:8px}
.wd-back{font-size:14px;line-height:1;color:#5a6a84}
.wd-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.wd-pick{position:relative;aspect-ratio:1;border-radius:6px;overflow:hidden;background:#eef2f8;border:1px solid #d9e1ef}
.wd-pick img{width:100%;height:100%;object-fit:contain;object-position:center;display:block;background:#f4f7fb;padding:2px}
.wd-check{
  position:absolute;top:3px;right:3px;width:12px;height:12px;border-radius:50%;
  background:#0C5BE4;border:1.5px solid #fff;transform:scale(0);opacity:0;
  box-shadow:0 2px 6px rgba(10,100,227,.45);
}
.wd-check::after{
  content:"";position:absolute;left:3px;top:1.5px;width:4px;height:6px;
  border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);
}
.wd-import-bar{
  margin-top:8px;display:flex;align-items:center;justify-content:space-between;gap:6px;
  padding:6px 8px;border-radius:8px;background:#eef4ff;border:1px solid #c8daf8;
  font-size:6.5px;font-weight:700;color:#001138;
}
.wd-import-btn{padding:4px 7px;border-radius:999px;background:linear-gradient(180deg,var(--gold-soft),#B3C8E2);color:#001138;font-size:6px;font-weight:800}
.wd-tagline{font-size:6px;color:#5a6a84;margin-top:3px;margin-bottom:6px}
.wd-catalog{display:flex;flex-direction:column;gap:5px;margin-top:4px;overflow:hidden}
.wd-category{display:flex;flex-direction:column;gap:3px}
.wd-cat-head{
  display:flex;align-items:center;justify-content:space-between;gap:6px;
  font-size:6px;font-weight:800;color:#001138;text-transform:uppercase;letter-spacing:.05em;
  opacity:0;padding:0 1px;
}
.wd-cat-count{
  font-size:5px;font-weight:700;color:#5a6a84;background:#eef2f8;border-radius:999px;
  padding:1px 5px;text-transform:none;letter-spacing:0;
}
.wd-cat-row{display:flex;gap:4px;flex-wrap:nowrap}
.wd-cat-row .mini-outfit{
  flex:1 1 0;min-width:0;height:40px;border-radius:6px;background:#f4f7fb;
  border:1px solid #e2e8f2;position:relative;overflow:hidden;
}
.wd-cat-row .mini-outfit img{
  width:100%;height:100%;object-fit:contain;object-position:center;display:block;
  background:#f4f7fb;padding:3px 2px;
}
.wd-category--tops .wd-cat-row .mini-outfit{height:44px}
.wd-category--bottoms .wd-cat-row .mini-outfit{height:58px}
.wd-category--dresses .wd-cat-row .mini-outfit{height:62px}
.wd-category--shoes .wd-cat-row .mini-outfit{height:50px}
.wd-category--accessories .wd-cat-row .mini-outfit{height:42px}
.phone--wardrobe-xl .wd-category--bottoms .wd-cat-row .mini-outfit{height:64px}
.phone--wardrobe-xl .wd-category--dresses .wd-cat-row .mini-outfit{height:68px}
.phone--wardrobe-xl .wd-category--shoes .wd-cat-row .mini-outfit{height:54px}
.phone--wardrobe-xl .wd-category--tops .wd-cat-row .mini-outfit{height:48px}
.phone--wardrobe-xl .wd-category--accessories .wd-cat-row .mini-outfit{height:44px}
.wd-catalog .wd-item{position:relative;opacity:0;transform:scale(.72)}
.wd-catalog .wd-label{
  position:absolute;left:0;right:0;bottom:0;padding:2px 3px;font-size:5px;font-weight:700;
  text-align:center;color:#fff;background:linear-gradient(transparent,rgba(1,9,32,.72));opacity:0;
}
.wd-grid .wd-item{position:relative;opacity:0;transform:scale(.72)}
.wd-grid .wd-label{
  position:absolute;left:0;right:0;bottom:0;padding:2px 3px;font-size:5px;font-weight:700;
  text-align:center;color:#fff;background:linear-gradient(transparent,rgba(1,9,32,.72));opacity:0;
}
.wd-outfit-list{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.wd-outfit-card{
  display:flex;align-items:center;gap:8px;padding:6px;background:#fff;border:1px solid #dfe5f0;
  border-radius:9px;box-shadow:0 4px 12px rgba(1,9,32,.06);opacity:0;transform:translateY(8px);
}
.wd-outfit-stack{position:relative;width:52px;height:38px;flex-shrink:0}
.wd-outfit-stack img{
  position:absolute;width:22px;height:28px;object-fit:cover;border-radius:4px;
  border:1.5px solid #fff;box-shadow:0 2px 6px rgba(1,9,32,.12);background:#f4f6fa;
}
.wd-outfit-stack img:nth-child(1){left:0;top:6px;z-index:1}
.wd-outfit-stack img:nth-child(2){left:14px;top:2px;z-index:2}
.wd-outfit-stack img:nth-child(3){left:28px;top:8px;z-index:3}
.wd-outfit-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.wd-outfit-meta strong{font-size:7px;color:#001138;line-height:1.2}
.wd-outfit-meta span{font-size:5.5px;color:#5a6a84;line-height:1.3}
.wd-outfit-list--full{display:block;position:relative;min-height:168px;margin-top:6px}
.wd-outfit-look{
  position:absolute;left:0;right:0;top:0;
  display:flex;flex-direction:column;gap:6px;padding:7px;background:#fff;border:1px solid #dfe5f0;
  border-radius:10px;box-shadow:0 4px 14px rgba(1,9,32,.07);opacity:0;transform:translateY(10px);
}
.wd-look-frame{
  width:100%;height:118px;border-radius:8px;overflow:hidden;background:linear-gradient(180deg,#eef2f8,#e4eaf3);
}
.wd-look-frame img{width:100%;height:100%;object-fit:cover;object-position:center 12%;display:block}
.wd-look-meta{display:flex;flex-direction:column;gap:4px}
.wd-look-meta strong{font-size:8px;color:#001138;line-height:1.2}
.wd-look-tags{display:flex;flex-wrap:wrap;gap:3px}
.wd-look-tags span{
  font-size:5px;font-weight:700;color:#0C5BE4;background:#eef4ff;border:1px solid #c8daf8;
  border-radius:999px;padding:2px 5px;line-height:1.2;
}
.wd-progress{position:absolute;left:50%;bottom:44px;transform:translateX(-50%);display:flex;gap:4px;z-index:6}
.wd-progress span{width:12px;height:2px;border-radius:99px;background:#c8d4e8}

.wardrobe-demo.is-playing .wd-scene--gallery{animation:wd-show-gallery var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-scene--closet{animation:wd-show-closet var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-scene--outfits{animation:wd-show-outfits var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-pick:nth-child(1) .wd-check{animation:wd-check-1 var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-pick:nth-child(2) .wd-check{animation:wd-check-2 var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-pick:nth-child(3) .wd-check{animation:wd-check-3 var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-pick:nth-child(4) .wd-check{animation:wd-check-4 var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-pick:nth-child(5) .wd-check{animation:wd-check-5 var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-pick:nth-child(6) .wd-check{animation:wd-check-6 var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-pick:nth-child(7) .wd-check{animation:wd-check-7 var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-pick:nth-child(8) .wd-check{animation:wd-check-8 var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-pick:nth-child(9) .wd-check{animation:wd-check-9 var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-pick:nth-child(10) .wd-check{animation:wd-check-10 var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-pick:nth-child(11) .wd-check{animation:wd-check-11 var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-pick:nth-child(12) .wd-check{animation:wd-check-12 var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-import-bar{animation:wd-import-pulse var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-cat-head--tops{animation:wd-cat-tops var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-cat-head--bottoms{animation:wd-cat-bottoms var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-cat-head--shoes{animation:wd-cat-shoes var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-cat-head--dresses{animation:wd-cat-dresses var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-cat-head--accessories{animation:wd-cat-accessories var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-category--tops .wd-item{animation:wd-row-tops var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-category--tops .wd-label{animation:wd-row-tops-label var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-category--bottoms .wd-item{animation:wd-row-bottoms var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-category--bottoms .wd-label{animation:wd-row-bottoms-label var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-category--shoes .wd-item{animation:wd-row-shoes var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-category--shoes .wd-label{animation:wd-row-shoes-label var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-category--dresses .wd-item{animation:wd-row-dresses var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-category--dresses .wd-label{animation:wd-row-dresses-label var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-category--accessories .wd-item{animation:wd-row-accessories var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-category--accessories .wd-label{animation:wd-row-accessories-label var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-outfit-look:nth-child(1){animation:wd-outfit-1 var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-outfit-look:nth-child(2){animation:wd-outfit-2 var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-progress span:nth-child(1){animation:wd-dot-1 var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-progress span:nth-child(2){animation:wd-dot-2 var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-progress span:nth-child(3){animation:wd-dot-3 var(--wd-dur) infinite}

@keyframes wd-show-gallery{0%,32%{opacity:1}36%,100%{opacity:0}}
@keyframes wd-show-closet{0%,34%{opacity:0}38%,66%{opacity:1}70%,100%{opacity:0}}
@keyframes wd-show-outfits{0%,68%{opacity:0}72%,94%{opacity:1}98%,100%{opacity:0}}
@keyframes wd-check-1{0%,2%{transform:scale(0);opacity:0}4%,30%{transform:scale(1);opacity:1}34%,100%{opacity:0}}
@keyframes wd-check-2{0%,4%{transform:scale(0);opacity:0}6%,30%{transform:scale(1);opacity:1}34%,100%{opacity:0}}
@keyframes wd-check-3{0%,6%{transform:scale(0);opacity:0}8%,30%{transform:scale(1);opacity:1}34%,100%{opacity:0}}
@keyframes wd-check-4{0%,8%{transform:scale(0);opacity:0}10%,30%{transform:scale(1);opacity:1}34%,100%{opacity:0}}
@keyframes wd-check-5{0%,10%{transform:scale(0);opacity:0}12%,30%{transform:scale(1);opacity:1}34%,100%{opacity:0}}
@keyframes wd-check-6{0%,12%{transform:scale(0);opacity:0}14%,30%{transform:scale(1);opacity:1}34%,100%{opacity:0}}
@keyframes wd-check-7{0%,14%{transform:scale(0);opacity:0}16%,30%{transform:scale(1);opacity:1}34%,100%{opacity:0}}
@keyframes wd-check-8{0%,16%{transform:scale(0);opacity:0}18%,30%{transform:scale(1);opacity:1}34%,100%{opacity:0}}
@keyframes wd-check-9{0%,18%{transform:scale(0);opacity:0}20%,30%{transform:scale(1);opacity:1}34%,100%{opacity:0}}
@keyframes wd-check-10{0%,20%{transform:scale(0);opacity:0}22%,30%{transform:scale(1);opacity:1}34%,100%{opacity:0}}
@keyframes wd-check-11{0%,22%{transform:scale(0);opacity:0}24%,30%{transform:scale(1);opacity:1}34%,100%{opacity:0}}
@keyframes wd-check-12{0%,24%{transform:scale(0);opacity:0}26%,30%{transform:scale(1);opacity:1}34%,100%{opacity:0}}
@keyframes wd-import-pulse{0%,24%{transform:scale(1)}28%,32%{transform:scale(1.04)}36%,100%{transform:scale(1)}}
@keyframes wd-cat-tops{0%,37%{opacity:0;transform:translateY(4px)}39%,66%{opacity:1;transform:none}70%,100%{opacity:0}}
@keyframes wd-cat-bottoms{0%,43%{opacity:0;transform:translateY(4px)}45%,66%{opacity:1;transform:none}70%,100%{opacity:0}}
@keyframes wd-cat-shoes{0%,47%{opacity:0;transform:translateY(4px)}49%,66%{opacity:1;transform:none}70%,100%{opacity:0}}
@keyframes wd-cat-dresses{0%,51%{opacity:0;transform:translateY(4px)}53%,66%{opacity:1;transform:none}70%,100%{opacity:0}}
@keyframes wd-cat-accessories{0%,55%{opacity:0;transform:translateY(4px)}57%,66%{opacity:1;transform:none}70%,100%{opacity:0}}
@keyframes wd-row-tops{0%,39%{opacity:0;transform:scale(.85)}43%,66%{opacity:1;transform:scale(1)}70%,100%{opacity:0}}
@keyframes wd-row-tops-label{0%,41%{opacity:0}45%,66%{opacity:1}70%,100%{opacity:0}}
@keyframes wd-row-bottoms{0%,45%{opacity:0;transform:scale(.85)}49%,66%{opacity:1;transform:scale(1)}70%,100%{opacity:0}}
@keyframes wd-row-bottoms-label{0%,47%{opacity:0}51%,66%{opacity:1}70%,100%{opacity:0}}
@keyframes wd-row-shoes{0%,49%{opacity:0;transform:scale(.85)}53%,66%{opacity:1;transform:scale(1)}70%,100%{opacity:0}}
@keyframes wd-row-shoes-label{0%,51%{opacity:0}55%,66%{opacity:1}70%,100%{opacity:0}}
@keyframes wd-row-dresses{0%,53%{opacity:0;transform:scale(.85)}57%,66%{opacity:1;transform:scale(1)}70%,100%{opacity:0}}
@keyframes wd-row-dresses-label{0%,55%{opacity:0}59%,66%{opacity:1}70%,100%{opacity:0}}
@keyframes wd-row-accessories{0%,57%{opacity:0;transform:scale(.85)}61%,66%{opacity:1;transform:scale(1)}70%,100%{opacity:0}}
@keyframes wd-row-accessories-label{0%,59%{opacity:0}63%,66%{opacity:1}70%,100%{opacity:0}}
@keyframes wd-outfit-1{0%,72%{opacity:0;transform:translateY(10px)}74%,84%{opacity:1;transform:none}86%,100%{opacity:0}}
@keyframes wd-outfit-2{0%,84%{opacity:0;transform:translateY(10px)}86%,94%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes wd-dot-1{0%,32%{background:#0C5BE4}36%,100%{background:#c8d4e8}}
@keyframes wd-dot-2{0%,38%{background:#c8d4e8}38%,66%{background:#0C5BE4}70%,100%{background:#c8d4e8}}
@keyframes wd-dot-3{0%,72%{background:#c8d4e8}72%,94%{background:#0C5BE4}98%,100%{background:#c8d4e8}}

.calendar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.cal-item{height:43px;border-radius:8px;background:#edf1f8;position:relative}
.cal-item::after{content:"";position:absolute;left:40%;right:40%;top:7px;bottom:6px;border-radius:8px;background:#001138}
.screen-nav{position:absolute;bottom:7px;left:9px;right:9px;display:flex;justify-content:space-around;font-size:7px;color:#002467}

/* Phone mockup — autoplay feature demo video */
.phone .screen.phone-screen-video{
  padding:24px 0 44px;overflow:hidden;background:#f9fbff;
}
.phone-screen-video .phone-demo-video{
  display:block;width:100%;height:100%;object-fit:cover;object-position:center top;
  border:0;background:#f9fbff;
}

/* ── Nikonyx app icons (line art in circular rings — match bottom nav) ── */
.nx-icon{display:grid;place-items:center;padding:0;font-size:0;line-height:0}
.nx-icon-ring{
  width:100%;height:100%;border-radius:50%;display:grid;place-items:center;
  border:1.5px solid #B3C8E2;
  background:linear-gradient(180deg,#f7fbff 0%,#e8f0fa 100%);
  box-shadow:none;
}
.nx-icon-ring svg{width:52%;height:52%;display:block;color:#001138}
.nx-icon-ring--nav{
  width:22px;height:22px;border:1.4px solid #B3C8E2;
  background:linear-gradient(180deg,#f7fbff 0%,#eaf2fb 100%);box-shadow:none;
}
.nx-icon-ring--nav svg{width:13px;height:13px;color:#001138}
.lux-icon,.feature-icon,.benefit-icon,.benefit i{
  width:50px;height:50px;flex:0 0 50px;border-radius:50%;padding:0;
  font-size:0;color:transparent;background:transparent;border:none;box-shadow:none;
}
.feature-icon{width:52px;height:52px;flex:0 0 52px}
.benefit-icon,.benefit i{width:34px;height:34px;flex:0 0 34px}
.nx-icon--home,.app-logo-small.nx-icon-ready{
  width:22px;height:22px;border:none;background:transparent;box-shadow:none;filter:none;
}
.nx-home-ring{display:block}
.cosmic-nav .cn-home .nx-brand-logo--disc{width:26px;height:26px}
.ar-fit-rail-ico .nx-icon-ring,
.wd-pill-ico .nx-icon-ring,
.wd-chip-ico .nx-icon-ring{
  border-color:rgba(177,200,226,.75);
  background:rgba(255,255,255,.08);
}
.ar-fit-rail-ico .nx-icon-ring svg{color:rgba(225,236,247,.9)}
.app-feat-card .nx-icon-ring{
  border-color:#B3C8E2;
  background:linear-gradient(180deg,#f7fbff,#eaf2fb);
}
.app-feat-card .nx-icon-ring svg{color:#001138}

/* Nikonyx brand logo — full lockup + circular mark */
.nx-brand-logo{display:inline-flex;align-items:center;line-height:0;vertical-align:middle}
.nx-brand-logo__img{display:block;width:auto;height:100%;max-width:100%;object-fit:contain;object-position:center}
.nx-brand-logo__img--mark{aspect-ratio:1/1;object-fit:contain}
/* Brand mark — no white outer disc (logo already includes its own ring) */
.nx-brand-logo--disc{
  border-radius:50%;background:transparent;display:grid;place-items:center;overflow:visible;
  flex-shrink:0;box-sizing:border-box;line-height:0;
}
.nx-brand-logo--nav.nx-brand-logo--disc{width:36px;height:36px;box-shadow:none}
.nx-brand-logo--nav.nx-brand-logo--disc .nx-brand-logo__img{width:100%;height:100%;max-width:100%;max-height:100%}
.nx-brand-logo--hero.nx-brand-logo--disc{width:100%;height:100%;box-shadow:none}
.nx-brand-logo--hero.nx-brand-logo--disc .nx-brand-logo__img{width:100%;height:100%;max-width:100%;max-height:100%;filter:none}
.nx-brand-logo--footer.nx-brand-logo--disc{width:42px;height:42px;box-shadow:none}
.nx-brand-logo--footer.nx-brand-logo--disc .nx-brand-logo__img{width:100%;height:100%;max-width:100%;max-height:100%}
.nx-brand-wordmark{
  font-family:'Cormorant Garamond','Playfair Display',Georgia,serif;
  font-size:18px;font-weight:600;letter-spacing:7px;color:#fff;line-height:1;white-space:nowrap;
}
.nx-brand-wordmark--footer{font-size:17px;letter-spacing:.22em;color:#001138;text-transform:uppercase}
.nx-brand-logo--nav .nx-brand-logo__img{height:34px;max-width:min(168px,42vw)}
.nx-brand-logo--hero .nx-brand-logo__img{
  width:100%;height:100%;max-width:100%;max-height:100%;
}
.nx-brand-logo--hero:not(.nx-brand-logo--disc) .nx-brand-logo__img{
  filter:drop-shadow(0 0 14px rgba(10,100,227,.45)) drop-shadow(0 0 24px rgba(215,155,69,.18));
}
.hdr .emblem .nx-brand-logo--hero{width:100%;height:100%}
.nx-brand-logo--footer .nx-brand-logo__img{height:42px;max-width:200px}
.nx-brand-logo--phone .nx-brand-logo__img{height:22px;width:22px}
.nx-brand-logo--qr{width:100%;height:100%;display:grid;place-items:center}
.nx-brand-logo--qr .nx-brand-logo__img{width:88%;height:88%;object-fit:contain}
.cosmic-nav .cn-home .nx-brand-logo--phone{width:22px;height:22px}
.app-logo-small .nx-brand-logo--phone,
.app-logo-small .nx-orb-logo--phone{width:22px;height:22px}
.ar-fit-top-logo .nx-brand-logo--phone,
.ar-fit-top-logo .nx-orb-logo--phone{width:22px;height:22px}

/* Lite in-app header — small NX mark, no dark cosmic band (matches Home nav orb) */
.phone-app-header{
  position:relative;padding:6px 0 2px;background:transparent;text-align:center;
  display:flex;align-items:center;justify-content:center;
}
.phone-app-header .phone-emblem{
  position:relative;width:22px;height:22px;flex-shrink:0;
}
.phone-app-header .phone-emblem svg,
.phone-app-header .phone-emblem .nx-brand-logo,
.phone-app-header .phone-emblem .nx-orb-logo{display:block;width:22px;height:22px}
.phone-app-header .phone-emblem .nx-brand-logo__img,
.phone-app-header .phone-emblem .nx-orb-logo__img{object-fit:contain;object-position:center center;border-radius:0}
.screen .phone-app-header{margin:-24px -10px 6px}
.center .screen .phone-app-header{margin:-22px -9px 6px}

.phone-app-header .phone-emblem .nx-brand-logo--phone{width:22px;height:22px}
.phone-app-header .phone-emblem .nx-brand-logo--phone,
.phone-app-header .phone-emblem .nx-orb-logo--phone{width:22px;height:22px}
.phone-app-header .phone-emblem .nx-brand-logo__img,
.phone-app-header .phone-emblem .nx-orb-logo__img{mix-blend-mode:normal}

/* Legacy orb aliases (still referenced in a few styles) */
.nx-orb-logo{display:inline-flex;align-items:center;line-height:0}
.nx-orb-logo__img{display:block;width:auto;height:100%;object-fit:contain}

/* Phone mockups, app screens, QR — small golden NX orb */
.app-logo-small.nx-brand-ready,
.app-logo-small.nx-orb-ready{
  border:none;background:transparent;box-shadow:none;padding:0;
  width:22px;height:22px;margin:0 auto 6px;
}
.app-logo-small .nx-brand-logo--phone,
.app-logo-small .nx-orb-logo--phone{
  width:22px;height:22px;filter:none;
}
.cosmic-nav .cn-home .nx-brand-logo--phone,
.cosmic-nav .cn-home .nx-orb-logo--phone{width:22px;height:22px}
.cosmic-nav .cn-home .nx-brand-logo__img,
.cosmic-nav .cn-home .nx-orb-logo__img{mix-blend-mode:normal}
.qr .mark.nx-brand-ready,
.qr .mark.nx-orb-ready{
  padding:0;background:transparent;color:transparent;
  display:grid;place-items:center;overflow:hidden;
}
.qr .mark .nx-brand-logo--qr,
.qr .mark .nx-orb-logo--qr{width:22px;height:22px}
.qr .mark .nx-brand-logo--qr .nx-brand-logo__img,
.qr .mark .nx-orb-logo--qr .nx-orb-logo__img{
  width:22px;height:22px;mix-blend-mode:normal;border-radius:0;object-fit:contain;object-position:center center;
}

/* Cosmic bottom nav (app footer bar) */
.cosmic-nav{
  position:absolute;left:0;right:0;bottom:0;height:42px;display:flex;align-items:stretch;
  background:linear-gradient(180deg,#b8c8e0 0%,#d4e0f0 8%,#e8f0f8 25%,#f2f6fc 40%,#e0eaf6 60%,#c8d8ec 80%,#b0c4dc 100%);
  border-top:1px solid rgba(255,255,255,.95);
  box-shadow:0 -2px 8px rgba(20,50,120,.12);
  z-index:4;
}
.cn-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:0;padding:2px 0}
.cn-lbl{font-size:5.5px;font-weight:700;color:rgba(26,48,96,.72);letter-spacing:.02em;text-align:center;line-height:1.1;
  text-shadow:0 1px 0 rgba(255,255,255,.9)}
.cn-item.is-active .cn-lbl{color:#001138;font-weight:800}
.cn-home .nx-home-ring{width:22px;height:22px}
.cn-sep{
  width:1px;align-self:center;height:26px;flex-shrink:0;
  background:linear-gradient(180deg,transparent,#0C5BE4 30%,#E1ECF7 50%,#0C5BE4 70%,transparent);
}
.travel-row{display:flex;gap:7px;background:#fff;border-radius:12px;padding:7px;box-shadow:0 6px 18px rgba(1,9,32,.12);margin:8px 0;color:#001138}
.fit-card{flex:1;height:63px;border-radius:10px;background:linear-gradient(180deg,#f7f8fb,#dce3ef);position:relative}
.fit-card::after{content:"";position:absolute;left:35%;right:35%;top:10px;bottom:7px;border-radius:9px;background:#001138}
.shop-header{height:62px;border-radius:14px;background:linear-gradient(120deg,#001646,#0C5BE4);padding:10px;color:#fff;margin-bottom:8px}
.product-card{height:50px;background:#fff;border:1px solid #e0e6f2;border-radius:10px;margin-top:6px;color:#001138;display:flex;align-items:center;gap:6px;padding:5px}
.product-img{width:34px;height:38px;border-radius:7px;background:#eef2f8;position:relative}
.product-img::after{content:"";position:absolute;left:36%;right:36%;top:8px;bottom:5px;background:#001138;border-radius:7px}
.blue-float{position:absolute;right:9px;bottom:52px;width:26px;height:26px;border-radius:50%;background:#0C5BE4;color:#fff;display:grid;place-items:center;font-weight:800}

/* ==========================================================================
   VIRTUAL TRY-ON CARD
   ========================================================================== */
.try-card,.qr-panel,.feature-strip,.media-section,.glass{
  background:var(--glass);backdrop-filter:blur(18px);border:1px solid rgba(218,226,240,.9);box-shadow:var(--shadow);
}
.try-card{border-radius:22px;padding:24px 22px}
.card-tag{font-size:9px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;color:#0C5BE4;background:#eff6ff;border-radius:999px;padding:5px 8px;display:inline-flex}
.try-card h2{font-size:34px;line-height:1.02;margin:11px 0 9px;color:#001138}
.try-card p{font-size:12px;color:#40516d;line-height:1.6;margin:0 0 18px}
.try-layout{display:grid;grid-template-columns:1fr 54px;gap:12px}
.try-frame{height:244px;border-radius:13px;background:linear-gradient(180deg,#f1f4f9,#e3e8f1);position:relative;overflow:hidden;user-select:none;touch-action:none}
.dots{position:absolute;top:9px;left:9px;display:flex;gap:5px;z-index:4}
.dots span{width:7px;height:7px;border-radius:50%;background:#001138}
.half{position:absolute;top:0;bottom:0;width:50%;overflow:hidden;display:flex;align-items:flex-end;justify-content:center}
.half.left{left:0}
.half.right{right:0;left:auto}
.tryon-after{position:absolute;top:0;right:0;bottom:0;left:50%;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;width:auto}
.person{width:126px;height:202px;position:relative;margin-bottom:3px}
.head{position:absolute;top:0;left:44px;width:38px;height:44px;border-radius:50%;background:#c89f7d}
.hair{position:absolute;top:0;left:41px;width:44px;height:24px;border-radius:50% 50% 30% 30%;background:#1b1b1e}
.neck{position:absolute;top:38px;left:55px;width:17px;height:18px;background:#c89f7d}
.shirt{position:absolute;top:52px;left:24px;width:78px;height:78px;border-radius:18px 18px 9px 9px;clip-path:polygon(10% 0,90% 0,100% 100%,0 100%)}
.shirt.light{background:#f8f4ee}
.shirt.dark{background:#001138}
.face-line{position:absolute;left:50%;top:0;bottom:0;width:2px;background:rgba(255,255,255,.85);box-shadow:0 0 14px rgba(255,255,255,.7);z-index:3}
.slide-handle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:32px;height:32px;border-radius:50%;background:#fff;color:#001138;display:grid;place-items:center;font-weight:800;box-shadow:0 8px 18px rgba(0,0,0,.18);cursor:ew-resize;z-index:4}
.thumb-list{display:grid;gap:8px}
.thumb{border-radius:10px;border:2px solid transparent;background:#f0f4fb;height:54px;position:relative;overflow:hidden;cursor:pointer}
.thumb.active{border-color:#B3C8E2}
.thumb::after{content:"";position:absolute;left:34%;right:34%;top:11px;bottom:5px;border-radius:12px 12px 4px 4px;background:#001138}
.thumb.alt::after{background:#6f4a2c}
.thumb.alt2::after{background:#26426e}
.thumb.alt3::after{background:#3c3f49}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb:has(img)::after{display:none}
.labels{display:flex;justify-content:space-between;font-size:10px;font-weight:800;color:#41516a;margin-top:8px}

/* Photo-based try-on compare */
.try-frame--photos{background:#e8edf4}
.try-frame--photos .try-photo-base{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%;z-index:1;
}
.try-frame--photos .tryon-after{
  position:absolute;top:0;left:0;height:100%;overflow:hidden;z-index:2;width:50%;
}
.try-frame--photos .tryon-after-inner{height:100%}
.try-frame--photos .try-photo-after{
  display:block;height:100%;width:100%;max-width:none;object-fit:cover;object-position:center 22%;
  transition:opacity .35s ease;
}
.try-frame--photos .try-photo-after.is-swapping{opacity:.35}

/* Single floating model — same person, outfit swap */
.try-frame--swap,
.tryon-preview--swap{
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#eef2f8 0%,#e2e8f2 100%);
  overflow:visible;
}
.try-model-float{
  position:relative;width:min(72%,220px);height:88%;border-radius:16px;overflow:hidden;z-index:2;
  box-shadow:0 22px 48px rgba(17,33,62,.2),0 10px 24px rgba(17,33,62,.1);
  animation:try-model-float 4.2s ease-in-out infinite;
}
.try-frame--swap .try-photo-single,
.tryon-preview--swap .try-photo-single{
  display:block;width:100%;height:100%;object-fit:cover;object-position:center center;
  transition:opacity .45s ease,transform .45s ease;
}
.try-frame--swap .try-photo-single.is-swapping,
.tryon-preview--swap .try-photo-single.is-swapping{opacity:.55;transform:scale(1.02)}
.try-frame--swap .face-line,
.try-frame--swap .slide-handle,
.try-frame--swap .tryon-after,
.tryon-preview--swap .face-line,
.tryon-preview--swap .slide-handle,
.tryon-preview--swap .tryon-after{display:none!important}
.labels--single,.tryon-labels--single{justify-content:center;text-align:center}
@keyframes try-model-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media(prefers-reduced-motion:reduce){.try-model-float{animation:none}}

/* AR Fitting Room — in-app phone mockup (same proportion as home hero phone 188×392) */
.ar-fit-demo .try-layout{display:block}
.ar-fit-phone{
  --nx-phone-w:420px;
  max-width:var(--nx-phone-w);width:min(100%,var(--nx-phone-w));margin:0 auto;
}
.ar-fit-phone--wide{max-width:100%}
.ar-fit-bezel{
  border-radius:28px;padding:10px;box-sizing:border-box;
  aspect-ratio:188/392;height:auto;
  display:flex;flex-direction:column;
  background:linear-gradient(145deg,#001646 0%,#001138 55%,#001138 100%);
  box-shadow:0 26px 64px rgba(1,9,32,.38),inset 0 1px 0 rgba(255,255,255,.08);
}
.ar-fit-screen{
  position:relative;border-radius:20px;overflow:hidden;
  background:radial-gradient(120% 80% at 50% 0%,#001646 0%,#001138 45%,#001138 100%);
  display:flex;flex-direction:column;flex:1;min-height:0;width:100%;height:100%;
}
.ar-fit-topbar{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:6px 12px 2px;position:relative;z-index:6;
  background:#eef1f6;
}
.ar-fit-topbar .ar-fit-icon,
.ar-fit-topbar .ar-fit-top-right{display:none}
.ar-fit-top-logo{display:flex;align-items:center;justify-content:center;width:22px;height:22px;flex-shrink:0}
.ar-fit-top-logo .nx-brand-logo--phone{width:22px;height:22px}
.ar-fit-top-right{display:flex;align-items:center;gap:8px}
.ar-fit-icon{
  width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);color:#fff;cursor:default;padding:0;
  display:grid;place-items:center;flex-shrink:0;
}
.ar-fit-icon span{display:block;width:12px;height:1.5px;background:#fff;border-radius:1px}
.ar-fit-icon span+span{margin-top:3px}
.ar-fit-icon--bell::before{content:"🔔";font-size:12px;line-height:1}
.ar-fit-icon--bell span{display:none}
.ar-fit-icon--user::before{content:"";width:10px;height:10px;border:1.5px solid #fff;border-radius:50%;display:block;box-shadow:0 8px 0 -5px #fff}
.ar-fit-icon--user span{display:none}
.ar-fit-ask-pill{
  position:absolute;top:34px;right:10px;z-index:7;
  display:flex;align-items:center;gap:8px;max-width:148px;
  padding:8px 12px;border-radius:999px;
  background:linear-gradient(135deg,#0C5BE4,#001646);
  box-shadow:0 10px 28px rgba(10,100,227,.38);
  color:#fff;font-size:8px;line-height:1.25;
}
.ar-fit-ask-pill strong{display:block;font-size:10px;font-weight:800;margin-bottom:1px}
.ar-fit-ask-pill span{opacity:.88}
.ar-fit-ask-icon{
  width:24px;height:24px;border-radius:50%;flex-shrink:0;
  background:rgba(255,255,255,.16);display:grid;place-items:center;font-size:11px;
}
.ar-fit-body.try-layout{
  display:grid;grid-template-columns:22px minmax(0,1fr) 68px;gap:0;
  flex:1;min-height:0;padding:4px 0 46px;position:relative;align-items:stretch;
}
.tryon-demo .ar-fit-body.try-layout{grid-template-columns:20px minmax(0,1fr) 64px}
.tryon-demo .ar-fit-rail-item span:last-child{display:none}
.tryon-demo .ar-fit-rail{padding:4px 1px;gap:4px}
.tryon-demo .ar-fit-rail-ico{width:18px;height:18px}
.tryon-demo .ar-fit-outfit{padding:2px 3px}
.tryon-demo .ar-fit-outfit-head{font-size:7px;margin-bottom:4px}
.tryon-demo .ar-fit-outfit-row{grid-template-columns:18px 1fr 9px;gap:3px;padding:3px}
.tryon-demo .ar-fit-outfit-row img{width:18px;height:18px;border-radius:4px}
.tryon-demo .ar-fit-outfit-meta span{display:none}
.tryon-demo .ar-fit-outfit-meta strong{font-size:5.5px}
.tryon-demo .ar-fit-wardrobe-btn{font-size:5.5px;padding:5px 4px;margin-top:4px}
.ar-fit-rail{
  display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 2px;
  background:linear-gradient(180deg,rgba(4,14,32,.55),rgba(4,14,32,.25));
}
.ar-fit-rail-item{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;color:rgba(255,255,255,.82)}
.ar-fit-rail-ico{
  width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#cfe3ff;
}
.ar-fit-rail-ico .nx-icon-ring{width:14px;height:14px;color:rgba(1,255,255,.65)}
.ar-fit-rail-ico .nx-icon-ring svg{width:14px;height:14px}
.ar-fit-rail-item span:last-child{font-size:5px;font-weight:700;line-height:1.15;max-width:42px}
.ar-fit-center{display:flex;flex-direction:column;min-width:0;min-height:0;height:100%;width:100%;padding:0 2px}
.tryon-demo .ar-fit-room-label{display:none}
.tryon-demo .ar-fit-center{padding-top:4px}
.ar-fit-room-label{
  text-align:center;font-size:7px;font-weight:800;letter-spacing:.14em;color:rgba(255,255,255,.72);
  padding:2px 0 6px;flex-shrink:0;
}
.ar-fit-viewport.try-frame--swap,
.ar-fit-viewport.tryon-preview--swap{
  position:relative;flex:1;width:100%;min-height:280px;height:auto;border-radius:12px;overflow:hidden;
  background:#001138;display:block;
}
.ar-fit-viewport.try-frame--swap .try-model-float,
.ar-fit-viewport.tryon-preview--swap .try-model-float{
  width:100%;height:100%;max-width:none;border-radius:0;box-shadow:none;animation:none;
}
.ar-fit-viewport.try-frame--swap .try-photo-single,
.ar-fit-viewport.tryon-preview--swap .try-photo-single{
  width:100%;height:100%;object-fit:cover;object-position:center center;
  transition:opacity .45s ease,transform .45s ease;
}
.ar-fit-viewport.try-frame--swap .try-photo-single.is-swapping,
.ar-fit-viewport.tryon-preview--swap .try-photo-single.is-swapping{opacity:.55;transform:scale(1.02)}
.ar-fit-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:22px;height:34px;border:none;border-radius:8px;cursor:pointer;
  background:linear-gradient(180deg,#0C5BE4,#0C5BE4);color:#fff;font-size:18px;line-height:1;
  box-shadow:0 4px 14px rgba(10,100,227,.40);padding:0;
}
.ar-fit-arrow--prev{left:4px}
.ar-fit-arrow--next{right:4px}
.ar-fit-tryon-btn{
  position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:5;
  display:flex;align-items:center;gap:6px;min-width:118px;justify-content:center;
  padding:9px 16px;border:none;border-radius:999px;cursor:pointer;
  background:linear-gradient(180deg,#0C5BE4,#0C5BE4);color:#fff;
  font-size:11px;font-weight:800;box-shadow:0 8px 22px rgba(10,100,227,.45);
}
.ar-fit-tryon-btn span{font-size:12px}
.ar-fit-caption{margin-top:6px;font-size:9px;font-weight:800;color:rgba(255,255,255,.72);text-align:center}
.ar-fit-outfit{
  display:flex;flex-direction:column;min-height:0;padding:4px 6px 4px 4px;
  background:linear-gradient(180deg,rgba(4,14,32,.45),rgba(4,14,32,.2));
}
.ar-fit-outfit-head{
  font-size:8px;font-weight:800;color:#fff;margin-bottom:6px;letter-spacing:.04em;
  display:flex;align-items:center;justify-content:space-between;
}
.ar-fit-outfit-list{display:flex;flex-direction:column;gap:5px;flex:1;min-height:0;overflow:auto}
.ar-fit-outfit-row{
  display:grid;grid-template-columns:28px 1fr 14px;gap:5px;align-items:center;
  padding:4px;border-radius:8px;background:rgba(255,255,255,.06);border:1px solid transparent;
  text-align:left;color:#fff;width:100%;
}
button.ar-fit-outfit-row{cursor:pointer;font:inherit}
.ar-fit-outfit-row.thumb.active{border-color:rgba(233,190,115,.65);background:rgba(233,190,115,.12)}
.ar-fit-outfit-row img{width:28px;height:28px;border-radius:6px;object-fit:cover;display:block}
.ar-fit-outfit-meta{display:flex;flex-direction:column;gap:1px;min-width:0}
.ar-fit-outfit-meta strong{font-size:6.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ar-fit-outfit-meta span{font-size:5.5px;opacity:.72;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ar-fit-outfit-x{font-size:10px;opacity:.55;line-height:1;text-align:center}
.ar-fit-outfit-row--static{cursor:default}
.ar-fit-wardrobe-btn{
  margin-top:6px;padding:7px 8px;border-radius:8px;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);color:#fff;font-size:6.5px;font-weight:800;cursor:default;
}
.ar-fit-screen .screen-nav{position:absolute;left:0;right:0;bottom:0;height:44px}
.ar-fit-screen .cosmic-nav{height:44px}
.ar-fit-screen .cn-lbl{font-size:6px}
@media(max-width:520px){
  .ar-fit-body.try-layout{grid-template-columns:20px minmax(0,1fr) 62px}
  .tryon-demo .ar-fit-body.try-layout{grid-template-columns:18px minmax(0,1fr) 58px}
  .ar-fit-ask-pill{max-width:128px;padding:7px 10px}
  .ar-fit-viewport.try-frame--swap,.ar-fit-viewport.tryon-preview--swap{min-height:240px}
}

/* Digital Wardrobe — same phone size & ratio as home / try-on demos */
.wardrobe-app-demo.ar-fit-phone{
  --nx-phone-w:420px;
  max-width:420px;width:min(100%,420px);margin:0 auto;position:relative;z-index:2;
}
.wardrobe-app-demo .ar-fit-bezel{
  aspect-ratio:188/392;display:flex;flex-direction:column;height:auto;
}
.wardrobe-app-screen{
  flex:1;min-height:0;height:100%;max-height:none;
  background:radial-gradient(120% 80% at 50% 0%,#001646 0%,#001138 38%,#001138 100%);
}
.wardrobe-app-topbar{padding:6px 12px 2px;background:#f6f8fc}
.wardrobe-app-arc{display:none}
.wardrobe-app-scroll{
  flex:1;min-height:0;padding:6px 0 48px;
  background:linear-gradient(180deg,#f6f8fc 0%,#eef2f8 100%);
  border-radius:14px 14px 0 0;overflow-y:auto;overflow-x:hidden;
  scrollbar-width:none;-ms-overflow-style:none;
}
.wardrobe-app-stage .wardrobe-app-scroll{margin:0}
.wardrobe-app-scroll::-webkit-scrollbar{display:none}
.wd-toolbar{padding:0 8px 4px}
.wd-action-row,.wd-cat-row-scroll{
  display:flex;gap:5px;overflow-x:auto;padding-bottom:2px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.wd-action-row::-webkit-scrollbar,.wd-cat-row-scroll::-webkit-scrollbar{display:none}
.wd-cat-row-scroll{margin-top:5px}
.wd-pill,.wd-chip{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:3px;
  border:1px solid #d4deec;background:#fff;color:#334155;
  border-radius:999px;padding:4px 9px;font-size:6.5px;font-weight:700;cursor:default;white-space:nowrap;
}
.wd-pill--active,.wd-chip--active{
  background:linear-gradient(180deg,#0C5BE4,#001646);border-color:#001646;color:#fff;
  box-shadow:0 4px 12px rgba(10,100,227,.32);
}
.wd-pill--sort{padding-right:8px}
.wd-pill-ico,.wd-chip-ico{
  width:12px;height:12px;display:grid;place-items:center;font-size:8px;line-height:1;color:inherit;
}
.wd-pill-ico .nx-icon-ring,.wd-chip-ico .nx-icon-ring{width:11px;height:11px;color:currentColor}
.wd-pill-ico .nx-icon-ring svg,.wd-chip-ico .nx-icon-ring svg{width:11px;height:11px}
.wd-block{padding:0 8px 5px}
.wd-block--cat{padding-bottom:4px}
.wd-block-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:5px 9px;margin-bottom:5px;border-radius:10px;
  background:linear-gradient(180deg,#0C5BE4,#001646);color:#fff;
  font-size:7.5px;font-weight:800;letter-spacing:.02em;
  box-shadow:0 4px 12px rgba(10,100,227,.20);
}
.wd-block-go{
  width:20px;height:20px;border-radius:50%;border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.1);color:#fff;font-size:13px;line-height:1;padding:0;cursor:default;
}
.wd-card-track::-webkit-scrollbar{display:none}
.wd-card{
  flex:0 0 168px;border-radius:12px;overflow:hidden;background:#fff;
  border:1px solid #dfe6f2;box-shadow:0 6px 16px rgba(1,9,32,.08);
}
.wd-card--peek{flex-basis:40px;opacity:.7}
.wd-card-media{
  position:relative;height:132px;background:linear-gradient(180deg,#dce8f8 0%,#c8d8ec 55%,#b8cce4 100%);
  display:grid;place-items:center;padding:8px 6px 6px;
}
.wd-card-media img{
  max-width:96%;max-height:118px;width:auto;height:auto;object-fit:contain;display:block;
  filter:drop-shadow(0 6px 12px rgba(1,9,32,.14));
}
.wd-card--bottom .wd-card-media img{max-height:122px}
.wd-card--shoes .wd-card-media img{max-height:88px;max-width:88%}
.wd-card--acc .wd-card-media img{max-height:96px}
.wd-card-foot{
  display:flex;align-items:center;gap:5px;padding:6px 7px 7px;background:#fff;
}
.wd-card-copy strong{font-size:6.5px}
.wd-card-copy p{font-size:5.5px;margin-top:1px}
.wd-card-arrow{width:20px;height:20px;font-size:12px}
.wd-card-track{display:flex;gap:7px;overflow-x:auto;padding-bottom:1px;scrollbar-width:none}
.wd-card-x{
  position:absolute;top:6px;width:14px;height:14px;border-radius:50%;
  background:rgba(255,255,255,.92);color:#64748b;font-size:9px;line-height:14px;text-align:center;
  box-shadow:0 2px 6px rgba(1,9,32,.12);
}
.wd-card-x--tl{left:6px}
.wd-card-x--tr{right:6px}
.wd-card-handle{
  position:absolute;top:5px;left:50%;transform:translateX(-50%);
  width:34px;height:8px;border-radius:999px;background:rgba(255,255,255,.55);
  display:grid;place-items:center;
}
.wd-card-handle i{
  width:16px;height:2px;border-radius:99px;background:#94a3b8;display:block;position:relative;
}
.wd-card-handle i::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:5px;height:5px;border-radius:50%;background:#64748b;
}
.wd-card-copy{min-width:0;flex:1}
.wd-carousel-dots{display:flex;justify-content:center;gap:5px;margin-top:8px}
.wd-carousel-dots span{width:5px;height:5px;border-radius:50%;background:#c8d4e8}
.wd-carousel-dots span.is-on{background:#0C5BE4}
.wardrobe-ask-pill{
  top:auto;bottom:52px;right:10px;max-width:140px;z-index:8;padding:6px 10px;
}
.wardrobe-fab{
  position:absolute;right:12px;bottom:96px;z-index:8;
  width:30px;height:30px;border-radius:50%;border:2px solid rgba(255,255,255,.25);
  background:linear-gradient(180deg,#0C5BE4,#001646);color:#fff;
  font-size:18px;line-height:1;padding:0;cursor:default;
  box-shadow:0 6px 18px rgba(10,100,227,.32);
}
.wardrobe-app-screen .screen-nav{height:40px}
.wardrobe-app-screen .cosmic-nav{height:40px}
.wardrobe-app-screen .cn-lbl{font-size:5.5px}

/* Wardrobe app — 4-step demo (gallery → wardrobe → try-on → outfits) */
.wardrobe-app-demo.wardrobe-demo{--wd-dur:28s}
.wardrobe-app-stage{flex:1;min-height:0;position:relative;margin:0 6px 40px}
.wd-app-scene{
  position:absolute;inset:0;opacity:0;pointer-events:none;
  display:flex;flex-direction:column;
}
.wd-app-scene .wardrobe-app-scroll,
.wd-app-scene .wd-scene-scroll{flex:1;min-height:0;margin:0;padding-bottom:40px}
.wd-scene-head{
  display:flex;align-items:center;gap:6px;padding:0 8px 2px;
  font-size:8px;font-weight:800;color:#0f172a;
}
.wd-scene-back{font-size:13px;color:#64748b;line-height:1}
.wd-scene-lede{margin:0 0 6px;padding:0 8px;font-size:6.5px}
.wd-gallery--app{grid-template-columns:repeat(4,1fr);gap:4px;padding:0 8px}
.wd-gallery--app .wd-pick{border-radius:7px}
.wd-import-bar{margin:8px 8px 0;font-size:6px;padding:5px 7px}
.wd-import-btn{font-size:5.5px;padding:3px 6px}
/* Try-on scene — AR Fitting Room layout */
.wd-tryon-scene{
  flex:1;min-height:0;display:flex;flex-direction:column;
  margin:0;border-radius:14px 14px 0 0;overflow:hidden;
  background:radial-gradient(120% 80% at 50% 0%,#001646 0%,#001138 45%,#001138 100%);
}
.wardrobe-app-screen .wd-tryon-fit.ar-fit-body{
  display:grid;grid-template-columns:30px minmax(0,1fr) 68px;gap:0;
  flex:1;min-height:0;padding:2px 0 40px;position:relative;
}
.wardrobe-app-screen .wd-tryon-fit .ar-fit-outfit-list.wd-tryon-picks{
  max-height:118px;overflow-y:auto;scrollbar-width:none;
}
.wardrobe-app-screen .wd-tryon-fit .ar-fit-outfit-list.wd-tryon-picks::-webkit-scrollbar{display:none}
.wardrobe-app-screen .wd-tryon-fit .wd-tryon-picks .ar-fit-outfit-row{
  padding:2px 3px;grid-template-columns:22px 1fr 10px;margin-bottom:2px;
}
.wardrobe-app-screen .wd-tryon-fit .wd-tryon-picks .ar-fit-outfit-row img{width:22px;height:22px;border-radius:4px}
.wardrobe-app-screen .wd-tryon-fit .wd-tryon-picks .ar-fit-outfit-meta strong{font-size:5px}
.wardrobe-app-screen .wd-tryon-fit .wd-tryon-picks .ar-fit-outfit-meta span{font-size:4px}
.wardrobe-app-screen .wd-tryon-fit .ar-fit-rail{padding:4px 1px;gap:4px}
.wardrobe-app-screen .wd-tryon-fit .ar-fit-rail-item span:last-child{font-size:4.5px;max-width:36px}
.wardrobe-app-screen .wd-tryon-fit .ar-fit-rail-ico{width:20px;height:20px}
.wardrobe-app-screen .wd-tryon-fit .ar-fit-room-label{font-size:6px;padding:0 0 4px}
.wardrobe-app-screen .wd-tryon-viewport.ar-fit-viewport{
  min-height:168px;height:168px;width:100%;border-radius:10px;
}
.wardrobe-app-screen .wd-tryon-viewport.ar-fit-viewport .try-photo-single{
  object-fit:cover;object-position:center 16%;
}
.wardrobe-app-screen .wd-tryon-viewport.ar-fit-viewport .try-model-float{width:100%;height:100%;max-width:none}
.wardrobe-app-screen .wd-tryon-fit .ar-fit-caption{margin-top:4px;font-size:7px}
.wardrobe-app-screen .wd-tryon-fit .ar-fit-outfit{padding:2px 4px 2px 2px}
.wardrobe-app-screen .wd-tryon-fit .ar-fit-outfit-head{font-size:7px;margin-bottom:4px}
.wardrobe-app-screen .wd-tryon-fit .ar-fit-outfit-row{padding:3px;grid-template-columns:24px 1fr 12px}
.wardrobe-app-screen .wd-tryon-fit .ar-fit-outfit-row img{width:24px;height:24px;border-radius:5px}
.wardrobe-app-screen .wd-tryon-fit .ar-fit-outfit-meta strong{font-size:5.5px}
.wardrobe-app-screen .wd-tryon-fit .ar-fit-outfit-meta span{font-size:4.5px}
.wardrobe-app-screen .wd-tryon-fit .ar-fit-tryon-btn{
  min-width:96px;padding:7px 12px;font-size:8px;bottom:8px;
}
.wardrobe-app-screen .wd-tryon-fit .ar-fit-arrow{width:18px;height:28px;font-size:15px}
.wardrobe-app-screen .wd-tryon-fit .to-demo-chip{font-size:6px;left:6px;bottom:6px;padding:3px 6px}
.wardrobe-demo.is-playing .wardrobe-ask-pill,
.wardrobe-demo.is-playing .wardrobe-fab{animation:wd-hide-on-tryon var(--wd-dur) infinite}
@keyframes wd-hide-on-tryon{0%,50%{opacity:1}54%,76%{opacity:0}80%,100%{opacity:1}}
/* Step 4 · complete outfits */
.wd-outfits-scroll{padding:0 8px 44px}
.wd-app-outfit-list{display:flex;flex-direction:column;gap:6px}
.wd-app-outfit{
  display:flex;gap:6px;padding:5px;background:#fff;border:1px solid #dfe5f0;
  border-radius:9px;box-shadow:0 3px 10px rgba(1,9,32,.06);opacity:0;transform:translateY(8px);
}
.wd-app-outfit-preview{
  width:52px;height:64px;flex-shrink:0;border-radius:7px;overflow:hidden;
  background:linear-gradient(180deg,#eef2f8,#e4eaf3);
}
.wd-app-outfit-preview img{width:100%;height:100%;object-fit:cover;object-position:center 14%;display:block}
.wd-app-outfit-body{display:flex;align-items:center;gap:6px;min-width:0;flex:1}
.wd-outfit-stack--app{width:44px;height:34px}
.wd-outfit-stack--app img{width:18px;height:22px;border-radius:3px;border-width:1px}
.wd-outfit-stack--app img:nth-child(2){left:12px;top:1px}
.wd-outfit-stack--app img:nth-child(3){left:24px;top:6px}
.wd-app-outfit .wd-outfit-meta strong{font-size:6.5px}
.wd-app-outfit .wd-outfit-meta span{font-size:5px}
.wd-step-banner{
  position:absolute;left:10px;right:10px;bottom:56px;z-index:9;height:18px;text-align:center;pointer-events:none;
}
.wd-step-chip{
  position:absolute;left:50%;top:0;transform:translateX(-50%);
  padding:4px 10px;border-radius:999px;white-space:nowrap;
  background:rgba(1,9,32,.78);color:#fff;font-size:7px;font-weight:800;letter-spacing:.02em;
  box-shadow:0 4px 14px rgba(1,9,32,.22);opacity:0;
}
.wd-progress--app{bottom:48px;z-index:9}
.wd-progress--app span{width:11px;height:3px;border-radius:99px}
.wardrobe-demo.is-static .wd-app-scene{display:none}
.wardrobe-demo.is-static .wd-app-scene--wardrobe{display:flex;opacity:1;pointer-events:auto}
.wardrobe-demo.is-static .wd-step-chip--wardrobe{opacity:1}
.wardrobe-demo.is-static .wd-card--pop{opacity:1;transform:none}
.wardrobe-demo.is-playing .wd-app-scene--gallery{animation:wd-app-show-gallery var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-app-scene--wardrobe{animation:wd-app-show-wardrobe var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-app-scene--tryon{animation:wd-app-show-tryon var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-app-scene--outfits{animation:wd-app-show-outfits var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-gallery--app .wd-pick:nth-child(1) .wd-check{animation:wd-app-check-1 var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-gallery--app .wd-pick:nth-child(2) .wd-check{animation:wd-app-check-2 var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-gallery--app .wd-pick:nth-child(3) .wd-check{animation:wd-app-check-3 var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-gallery--app .wd-pick:nth-child(4) .wd-check{animation:wd-app-check-4 var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-gallery--app .wd-pick:nth-child(5) .wd-check{animation:wd-app-check-5 var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-gallery--app .wd-pick:nth-child(6) .wd-check{animation:wd-app-check-6 var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-import-bar{animation:wd-import-pulse var(--wd-dur) infinite}
.wd-step-banner{bottom:50px}
.wd-progress--app{bottom:42px;z-index:9}
.wardrobe-demo.is-playing .wd-app-scene--wardrobe .wd-card--pop:nth-of-type(1){animation:wd-app-card-1 var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-app-scene--wardrobe .wd-card--pop:nth-of-type(2){animation:wd-app-card-2 var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-app-scene--wardrobe .wd-card--pop:nth-of-type(3){animation:wd-app-card-3 var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-app-scene--wardrobe .wd-card--pop:nth-of-type(4){animation:wd-app-card-4 var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-app-scene--wardrobe .wd-card--pop:nth-of-type(5){animation:wd-app-card-5 var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-app-scene--wardrobe .wd-card--pop:nth-of-type(6){animation:wd-app-card-6 var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-app-outfit--pop:nth-child(1){animation:wd-app-outfit-1 var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-app-outfit--pop:nth-child(2){animation:wd-app-outfit-2 var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-app-outfit--pop:nth-child(3){animation:wd-app-outfit-3 var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-tryon-viewport .try-photo-single{animation:wd-tryon-float 3.2s ease-in-out infinite}
@keyframes wd-app-show-gallery{0%,22%{opacity:1}26%,100%{opacity:0}}
@keyframes wd-app-show-wardrobe{0%,24%{opacity:0}28%,48%{opacity:1}52%,100%{opacity:0}}
@keyframes wd-app-show-tryon{0%,50%{opacity:0}54%,72%{opacity:1}76%,100%{opacity:0}}
@keyframes wd-app-show-outfits{0%,74%{opacity:0}78%,94%{opacity:1}98%,100%{opacity:0}}
@keyframes wd-app-check-1{0%,2%{transform:scale(0);opacity:0}4%,20%{transform:scale(1);opacity:1}24%,100%{opacity:0}}
@keyframes wd-app-check-2{0%,4%{transform:scale(0);opacity:0}6%,20%{transform:scale(1);opacity:1}24%,100%{opacity:0}}
@keyframes wd-app-check-3{0%,6%{transform:scale(0);opacity:0}8%,20%{transform:scale(1);opacity:1}24%,100%{opacity:0}}
@keyframes wd-app-check-4{0%,8%{transform:scale(0);opacity:0}10%,20%{transform:scale(1);opacity:1}24%,100%{opacity:0}}
@keyframes wd-app-check-5{0%,10%{transform:scale(0);opacity:0}12%,20%{transform:scale(1);opacity:1}24%,100%{opacity:0}}
@keyframes wd-app-check-6{0%,12%{transform:scale(0);opacity:0}14%,20%{transform:scale(1);opacity:1}24%,100%{opacity:0}}
@keyframes wd-app-card-1{0%,28%{opacity:0;transform:scale(.88)}31%,46%{opacity:1;transform:none}50%,100%{opacity:0;transform:scale(.88)}}
@keyframes wd-app-card-2{0%,30%{opacity:0;transform:scale(.88)}33%,46%{opacity:1;transform:none}50%,100%{opacity:0;transform:scale(.88)}}
@keyframes wd-app-card-3{0%,32%{opacity:0;transform:scale(.88)}35%,46%{opacity:1;transform:none}50%,100%{opacity:0;transform:scale(.88)}}
@keyframes wd-app-card-4{0%,34%{opacity:0;transform:scale(.88)}37%,46%{opacity:1;transform:none}50%,100%{opacity:0;transform:scale(.88)}}
@keyframes wd-app-card-5{0%,36%{opacity:0;transform:scale(.88)}39%,46%{opacity:1;transform:none}50%,100%{opacity:0;transform:scale(.88)}}
@keyframes wd-app-card-6{0%,38%{opacity:0;transform:scale(.88)}41%,46%{opacity:1;transform:none}50%,100%{opacity:0;transform:scale(.88)}}
@keyframes wd-app-outfit-1{0%,78%{opacity:0;transform:translateY(8px)}80%,92%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(8px)}}
@keyframes wd-app-outfit-2{0%,80%{opacity:0;transform:translateY(8px)}81%,92%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(8px)}}
@keyframes wd-app-outfit-3{0%,82%{opacity:0;transform:translateY(8px)}83%,92%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(8px)}}
@keyframes wd-step-gallery{0%,22%{opacity:1}26%,100%{opacity:0}}
@keyframes wd-step-wardrobe{0%,28%{opacity:0}30%,48%{opacity:1}52%,100%{opacity:0}}
@keyframes wd-step-tryon{0%,54%{opacity:0}56%,72%{opacity:1}76%,100%{opacity:0}}
@keyframes wd-step-outfits{0%,78%{opacity:0}80%,94%{opacity:1}98%,100%{opacity:0}}
@keyframes wd-tryon-float{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}
.wardrobe-demo.is-playing .wd-step-chip--gallery{animation:wd-step-gallery var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-step-chip--wardrobe{animation:wd-step-wardrobe var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-step-chip--tryon{animation:wd-step-tryon var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-step-chip--outfits{animation:wd-step-outfits var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-progress--app span:nth-child(1){animation:wd-app-dot-1 var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-progress--app span:nth-child(2){animation:wd-app-dot-2 var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-progress--app span:nth-child(3){animation:wd-app-dot-3 var(--wd-dur) infinite}
.wardrobe-demo.is-playing .wd-progress--app span:nth-child(4){animation:wd-app-dot-4 var(--wd-dur) infinite}
@keyframes wd-app-dot-1{0%,24%{background:#0C5BE4}28%,100%{background:#c8d4e8}}
@keyframes wd-app-dot-2{0%,28%{background:#c8d4e8}30%,48%{background:#0C5BE4}52%,100%{background:#c8d4e8}}
@keyframes wd-app-dot-3{0%,54%{background:#c8d4e8}56%,72%{background:#0C5BE4}76%,100%{background:#c8d4e8}}
@keyframes wd-app-dot-4{0%,78%{background:#c8d4e8}80%,94%{background:#0C5BE4}98%,100%{background:#c8d4e8}}

/* Virtual Try-On auto-demo (same model · outfit swap) */
.tryon-demo .try-layout,
.tryon-demo .tryon-stage{position:relative}
.tryon-demo .to-demo-chip{
  position:absolute;left:10px;bottom:10px;z-index:5;
  padding:4px 8px;border-radius:999px;font-size:8px;font-weight:800;letter-spacing:.04em;
  color:#fff;background:rgba(1,9,32,.62);backdrop-filter:blur(6px);
  opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s;
}
.tryon-demo.is-playing .to-demo-chip{opacity:1;transform:none}
.tryon-demo .to-demo-cursor{
  position:absolute;width:16px;height:16px;border-radius:50%;pointer-events:none;z-index:25;
  background:rgba(255,255,255,.96);border:2px solid #0C5BE4;
  box-shadow:0 3px 10px rgba(10,100,227,.40);opacity:0;
  transform:translate(-50%,-50%) scale(0);transition:opacity .2s,transform .15s;
}
.tryon-demo.is-playing .to-demo-cursor{opacity:1;transform:translate(-50%,-50%) scale(1)}
.tryon-demo.is-playing .to-demo-cursor.is-tap{transform:translate(-50%,-50%) scale(.82)}
.tryon-demo.is-playing .slide-handle{animation:to-handle-pulse 2.4s ease-in-out infinite}
.tryon-demo.is-playing .try-frame::after,
.tryon-demo.is-playing .try-frame--swap::after,
.tryon-demo.is-playing .tryon-preview--swap::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:linear-gradient(105deg,transparent 44%,rgba(255,255,255,.16) 50%,transparent 56%);
  animation:to-scan-sweep 5s ease-in-out infinite;
}
@keyframes to-handle-pulse{0%,100%{box-shadow:0 8px 18px rgba(0,0,0,.18)}50%{box-shadow:0 8px 22px rgba(10,100,227,.45),0 0 0 4px rgba(10,100,227,.12)}}
@keyframes to-scan-sweep{0%,18%{opacity:0;transform:translateX(-120%)}28%,42%{opacity:1}52%,100%{opacity:0;transform:translateX(120%)}}

/* ==========================================================================
   PARTNER BAR + popup
   ========================================================================== */
.partner-wrap{position:relative;z-index:20;margin-top:-22px}
.partner-bar{
  width:min(1180px,calc(100% - 48px));margin:auto;border-radius:15px;
  background:linear-gradient(180deg,#001646,#001138);box-shadow:0 20px 45px rgba(1,9,32,.32);color:#fff;
  padding:14px 44px 24px;position:relative;text-align:center;
}
.trusted{
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;opacity:.82;margin-bottom:18px;
}
.logos{display:flex;align-items:center;gap:0}
.logos span{flex:1 1 0;min-width:0;text-align:center;font-size:clamp(13px,1.4vw,20px);letter-spacing:.05em;opacity:.92;white-space:nowrap}
.logos .small{font-size:clamp(11px,1vw,13px);letter-spacing:.16em;line-height:1.2}
.logos .small em{display:block;font-size:7px;letter-spacing:.16em;font-style:normal;opacity:.72;margin-top:3px}
.logo-sep{flex:0 0 1px;width:1px;height:32px;background:rgba(255,255,255,.22)}
.partner-logo{position:relative;cursor:default;transition:background .2s, box-shadow .2s, padding .2s;border-radius:6px;padding:4px 0}
.partner-logo:hover{background:rgba(42,98,180,.28);padding:4px 12px;box-shadow:0 0 22px rgba(60,130,220,.22)}
.logos .partner-pop,.logos .partner-pop *{white-space:normal}
.partner-pop{
  position:absolute;left:50%;top:calc(100% + 10px);width:min(300px,72vw);text-align:left;
  transform:translateX(-18%) translateY(8px);
  background:linear-gradient(160deg,#001646,#001138);border:1px solid rgba(226,181,124,.35);border-radius:16px;
  padding:14px;display:flex;gap:14px;align-items:flex-start;
  box-shadow:0 24px 50px rgba(1,9,32,.55);
  opacity:0;visibility:hidden;transition:.25s;z-index:30;
}
.partner-logo:hover .partner-pop{opacity:1;visibility:visible;transform:translateX(-18%) translateY(0)}
.partner-pop .pic{
  flex:0 0 88px;width:88px;height:88px;border-radius:10px;
  background:linear-gradient(160deg,#001646,#001138);position:relative;overflow:hidden;
}
.partner-pop .pic::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 40%);
}
.partner-pop .pic::after{
  content:"";position:absolute;left:28%;right:28%;top:12px;bottom:0;
  background:linear-gradient(180deg,#c89f7d 0 22%,#001138 22% 100%);border-radius:14px 14px 0 0;
}
.partner-pop .pop-body{flex:1;min-width:0}
.partner-pop h5{margin:0 0 5px;font-size:11px;letter-spacing:.1em;color:#fff}
.partner-pop p{margin:0 0 9px;font-size:9.5px;line-height:1.5;color:rgba(255,255,255,.72)}
.partner-pop a{font-size:10px;font-weight:800;color:var(--gold)}

/* ==========================================================================
   FEATURE STRIP + QR PANEL (home)
   ========================================================================== */
.middle{position:relative;z-index:12;margin-top:14px}
.middle-grid{display:grid;grid-template-columns:1fr 280px;gap:30px;align-items:start}
.feature-strip{border-radius:18px;padding:26px 30px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;min-height:104px}
.feature-item{display:flex;gap:15px;align-items:flex-start}
.feature-icon{width:52px;height:52px;flex:0 0 52px;border-radius:50%;display:grid;place-items:center;padding:0;font-size:0;color:transparent;border:none;box-shadow:none;background:transparent}
.feature-item h3{font-size:13px;margin:3px 0 7px}
.feature-item p{margin:0;color:var(--slate);font-size:11px;line-height:1.5}
.qr-panel{border-radius:17px;padding:18px 20px;display:grid;grid-template-columns:130px 1fr;grid-template-rows:auto auto;gap:14px 16px;align-items:center}
.qr{width:130px;height:130px;border-radius:13px;background:#fff;border:8px solid #fff;box-shadow:inset 0 0 0 1px #d9e1ef;display:grid;grid-template-columns:repeat(9,1fr);gap:3px;padding:7px;grid-row:1/3}
.qr span{background:#001138;border-radius:2px}
.qr span:nth-child(2n){background:#001646}
.qr span:nth-child(7n){background:transparent}
.qr .mark{grid-column:4/7;grid-row:4/7;border-radius:7px;background:#fff;color:transparent;display:grid;place-items:center;font-size:0;overflow:hidden}
.qr-copy{align-self:center}
.qr-head{font-size:13px;font-weight:600;color:#001138;line-height:1.3}
.qr-panel b{display:block;font-size:15px;line-height:1.3;margin-top:2px;color:#001138;font-weight:700}
.qr-panel p{font-size:11px;color:#002467;line-height:1.5;margin:6px 0 0}
.store-row{display:flex;gap:8px;grid-column:1/-1}
.store{background:#000;color:#fff;border-radius:8px;padding:7px 12px 7px 10px;font-size:11px;font-weight:800;display:flex;align-items:center;gap:8px;min-width:132px;line-height:1.2;transition:background .18s;text-decoration:none}
.store .store-icon{flex:0 0 22px;width:22px;height:22px;display:flex;align-items:center;justify-content:center}
.store .store-icon svg{width:100%;height:100%;display:block}
.store-apple .store-icon{color:#fff}
.store-google .store-icon{width:20px;flex-basis:20px}
.store small{display:block;font-size:7.5px;font-weight:500;opacity:.9;letter-spacing:.01em;line-height:1.25}
.store strong{display:block;font-size:11.5px;font-weight:700;letter-spacing:.01em;line-height:1.15}
.store:hover{background:#1a1a1a}

/* ==========================================================================
   MEDIA / SUSTAINABILITY ROW
   ========================================================================== */
.media-section{margin-top:30px;border-radius:15px;padding:18px 34px;display:grid;grid-template-columns:1.7fr 1fr;gap:40px;align-items:center}
.eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:.15em;color:#002467;font-weight:800;margin:0 0 12px}
.media-logos,.sustain{display:flex;flex-wrap:wrap;align-items:center;gap:28px}
.media-logos span{font-size:23px;color:#001138;font-weight:900}
.media-logos .wide{font-size:14px;letter-spacing:.18em}
.sustain{gap:16px}
.sustain span{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;color:#002467}
.sustain i{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(10,100,227,.1);color:#0C5BE4;font-style:normal;font-weight:900}

/* ==========================================================================
   CTA band (curved gold edge) — ONE shared end-of-page size for all pages
   ========================================================================== */
.cta,
.cta.site-bottom-cta{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg,#001646,#001138);
  color:#fff;
  text-align:center;
  /* Compact standard size (About-page reference) — do not enlarge */
  padding:72px 20px 56px;
  margin-top:48px;
  min-height:0;
  height:auto;
  max-height:none;
}
.cta-curve{
  position:absolute;left:50%;transform:translateX(-50%);width:100vw;top:0;height:76px;pointer-events:none;z-index:1;
}
.cta-curve svg{width:100%;height:100%;display:block;overflow:visible}
.cta h2{position:relative;z-index:2;font-size:clamp(28px,3.6vw,40px);margin:0 0 10px;font-weight:600}
.cta p{position:relative;z-index:2;margin:0 auto 22px;max-width:720px;opacity:.86;font-size:15px}
.site-bottom-media{margin-top:0}
.site-bottom-media .media-section{margin-top:0}
.site-bottom-cta{margin-top:0}
.cta .gold-cta{position:relative;z-index:2}

/* Homepage must not use the old oversized .cta-band wrapper */
.cta-band{
  position:relative;
  margin-top:0;
  overflow:visible;
  background:none;
  padding:0;
  min-height:0;
}
.cta-band > .stars,
.cta-band > .cta-arc{display:none!important;}
.cta-band > .cta{
  margin-top:48px;
}

/* ==========================================================================
   INTERIOR PAGE HERO  — matches new home-page header style
   ========================================================================== */
.page-hero{
  position:relative;overflow:hidden;color:#fff;text-align:center;
  padding:130px 0 110px;
  background:
    radial-gradient(ellipse 70% 55% at 50% -5%, rgba(10,100,227,.55), transparent 55%),
    radial-gradient(circle at 50% 30%, rgba(1,255,255,.10), transparent 40%),
    linear-gradient(180deg,#001138 0%,#001646 38%,#001138 65%,#001646 100%);
}

/* smooth white transition at the bottom */
.page-hero::after{
  content:"";position:absolute;left:-8%;right:-8%;bottom:-1px;height:110px;
  background:#FFFFFF;
  border-top-left-radius:55% 100%;border-top-right-radius:55% 100%;
  z-index:2;
}

/* star field */
.page-hero .stars{
  opacity:1;
  background-image:
    radial-gradient(circle at  8% 18%, rgba(255,255,255,.95) 0 1px, transparent 2px),
    radial-gradient(circle at 18%  8%, rgba(255,255,255,.75) 0 1px, transparent 2px),
    radial-gradient(circle at 32% 14%, rgba(255,255,255,.9)  0 1px, transparent 2px),
    radial-gradient(circle at 48%  6%, rgba(255,255,255,.85) 0 1px, transparent 2px),
    radial-gradient(circle at 62% 12%, rgba(255,255,255,.95) 0 1px, transparent 2px),
    radial-gradient(circle at 76%  8%, rgba(255,255,255,.70) 0 1px, transparent 2px),
    radial-gradient(circle at 92% 16%, rgba(255,255,255,.85) 0 1px, transparent 2px),
    radial-gradient(circle at 22% 24%, rgba(255,255,255,.55) 0 1px, transparent 2px),
    radial-gradient(circle at 85% 22%, rgba(255,255,255,.60) 0 1px, transparent 2px),
    radial-gradient(circle at 55% 30%, rgba(255,255,255,.50) 0 1px, transparent 2px),
    radial-gradient(circle at  5% 40%, rgba(255,255,255,.45) 0 1px, transparent 2px),
    radial-gradient(circle at 90% 44%, rgba(255,255,255,.55) 0 1px, transparent 2px),
    radial-gradient(circle at 38% 52%, rgba(255,255,255,.35) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 48%, rgba(255,255,255,.45) 0 1px, transparent 2px),
    radial-gradient(circle at 14% 62%, rgba(255,255,255,.40) 0 1px, transparent 2px),
    radial-gradient(circle at 50% 18%, rgba(50,153,255,.45), transparent 90px);
}

/* gold arc swoosh — prominent curved line matching home page */
.page-hero .gold-line{
  position:absolute;left:-5%;top:18px;
  width:110%;height:230px;
  border-radius:50%;
  border-top:2.5px solid var(--gold);
  border-left:none;border-right:none;border-bottom:none;
  mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  z-index:1;
  background:none;
  filter:drop-shadow(0 0 6px rgba(232,197,142,.8));
}

/* center content */
.page-hero .inner{position:relative;z-index:3;max-width:760px;margin:auto;padding-inline:20px}

/* SVG orb drop-shadow (used when .page-orb replaces .medallion) */
.page-hero .page-orb{
  margin:0 auto 26px;
  display:block;width:120px;height:120px;
  filter:
    drop-shadow(0 0 22px rgba(10,100,227,.80))
    drop-shadow(0 0 55px rgba(10,100,227,.45))
    drop-shadow(0 0 100px rgba(10,100,227,.28));
}

/* keep old CSS medallion for backward compat but hide it when page-orb present */
.page-hero .medallion{
  width:114px;height:114px;margin:0 auto 26px;
  box-shadow:
    0 0 0 4px rgba(10,100,227,.22),
    0 0 40px rgba(10,100,227,.80),
    0 0 90px rgba(1,255,255,.30),
    0 0 160px rgba(10,100,227,.22);
}
.page-hero .medallion span{font-size:50px}

.page-hero .eyebrow{color:var(--gold);opacity:.95;margin-bottom:14px}
.page-hero h1{
  font-family:"Playfair Display",serif;
  font-size:clamp(40px,5vw,64px);line-height:1.04;letter-spacing:-.02em;
  margin:0 0 18px;color:#fff;
}
.page-hero h1 .gold{color:var(--gold);font-style:italic;font-weight:600}
.page-hero .lede{font-size:17px;line-height:1.7;color:rgba(255,255,255,.82);max-width:620px;margin:0 auto}
.page-hero .hero-actions{justify-content:center;margin-top:30px}

/* ==========================================================================
   SECTIONS & SHARED CONTENT COMPONENTS
   ========================================================================== */
.section{padding:84px 0}
.section-sm{padding:52px 0}
.section.tint{background:linear-gradient(180deg,#f9f9f9,#f3f5fa)}
.section-head{text-align:center;max-width:680px;margin:0 auto 52px}
.eyebrow-dark{display:inline-block;font-size:11px;text-transform:uppercase;letter-spacing:.18em;font-weight:800;color:var(--gold-2)}
.section-head h2{font-family:"Playfair Display",serif;font-size:clamp(28px,3.4vw,42px);font-weight:700;margin:12px 0 0;color:#001138;line-height:1.12}
.section-head p{margin:16px 0 0;color:var(--slate);font-size:16px;line-height:1.65}
.lead-muted{color:var(--slate);line-height:1.65}

/* alternating feature rows */
.feature-row{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center;margin-bottom:72px}
.feature-row:last-child{margin-bottom:0}
.feature-row.flip .media{order:2}

/* "02 · AI Style Consultant" — phone mockup removed on this page only, so
   this single row (and no other .feature-row) collapses to one centred
   text column instead of leaving an empty half-width gap. */
.feature-row.feature-row--solo{grid-template-columns:1fr;text-align:center}
.feature-row.feature-row--solo .copy{max-width:640px;margin:0 auto}
.feature-row.feature-row--solo .check-list{text-align:left}
.feature-row .num{font-family:"Playfair Display",serif;font-size:15px;font-weight:700;color:var(--gold-2);letter-spacing:.1em}
.feature-row h3{font-family:"Playfair Display",serif;font-size:30px;font-weight:700;margin:8px 0 14px;color:#001138;line-height:1.15}
.feature-row p{color:var(--slate);font-size:15.5px;line-height:1.7;margin:0 0 18px}
.check-list{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.check-list li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:#001138}
.check-list li::before{content:"✓";flex:0 0 22px;width:22px;height:22px;border-radius:50%;background:linear-gradient(160deg,#001646,#001138);color:var(--gold);display:grid;place-items:center;font-size:11px;font-weight:800;margin-top:1px}
.media-panel{border-radius:20px;background:linear-gradient(160deg,#001138,#001646);min-height:300px;position:relative;overflow:hidden;box-shadow:var(--shadow);display:grid;place-items:center;padding:30px}
.media-panel.lighty{background:linear-gradient(160deg,#eef3fb,#dfe7f3)}

/* Feature panels — digital-neon tech backdrop (Wardrobe, AI Consultant, …) */
.media-panel.media-panel-tech{
  background:
    radial-gradient(ellipse 105% 90% at 50% -14%, rgba(1,255,255,.42) 0%, rgba(10,100,227,.32) 22%, rgba(1,9,32,.18) 42%, transparent 72%),
    radial-gradient(ellipse 75% 55% at 50% 8%, rgba(255,255,255,.12) 0%, transparent 58%),
    radial-gradient(ellipse 58% 48% at 92% 90%, rgba(10,100,227,.35) 0%, transparent 62%),
    radial-gradient(ellipse 48% 40% at 6% 80%, rgba(1,255,255,.22) 0%, transparent 58%),
    linear-gradient(168deg,#0C5BE4 0%,#0848b8 22%,#003a7a 42%,#001646 68%,#001138 100%);
  border:1px solid rgba(1,255,255,.25);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 140px rgba(10,100,227,.22);
}
.media-panel.media-panel-tech .tech-bg-fx{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;
}
.media-panel.media-panel-tech .tech-bg-fx::before{
  content:"";position:absolute;left:50%;top:-22%;width:130%;height:72%;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(255,255,255,.32) 0%,rgba(1,255,255,.18) 32%,transparent 68%);
  filter:blur(22px);opacity:1;
}
.media-panel.media-panel-tech .tech-arc{
  position:absolute;left:-22%;right:-22%;border-radius:50%;pointer-events:none;
}
.media-panel.media-panel-tech .tech-arc-main{
  top:14%;height:52%;
  border:2px solid rgba(1,255,255,.85);
  box-shadow:0 0 36px rgba(1,255,255,.75),0 0 72px rgba(10,100,227,.45), inset 0 0 40px rgba(255,255,255,.12);
  background:linear-gradient(180deg,rgba(1,255,255,.12),transparent 58%);
  transform:rotate(-5deg);
}
.media-panel.media-panel-tech .tech-arc-2{
  top:26%;height:44%;
  border:1px solid rgba(1,255,255,.45);
  box-shadow:0 0 24px rgba(10,100,227,.35);
  transform:rotate(-5deg);
  opacity:.9;
}
.media-panel.media-panel-tech .tech-arc-3{
  top:32%;height:38%;
  border:1px solid rgba(1,255,255,.28);
  transform:rotate(-5deg);
  opacity:.75;
}
.media-panel.media-panel-tech .tech-arc-4{
  top:38%;height:32%;
  border:1px solid rgba(1,255,255,.15);
  transform:rotate(-5deg);
  opacity:.6;
}
.media-panel.media-panel-tech .tech-floor{
  position:absolute;left:0;right:0;bottom:0;height:18%;
  background:linear-gradient(180deg,transparent,rgba(1,255,255,.12) 40%,rgba(10,100,227,.22) 100%);
  border-top:1px solid rgba(1,255,255,.38);
  box-shadow:0 -8px 32px rgba(1,255,255,.22);
}
.media-panel.media-panel-tech::before{
  content:"";position:absolute;left:-14%;right:-14%;bottom:10%;height:42%;
  border-radius:50%;pointer-events:none;z-index:0;
  border:1px solid rgba(10,100,227,.35);
  box-shadow:0 0 48px rgba(10,100,227,.35);
  background:linear-gradient(0deg,rgba(10,100,227,.12),transparent 62%);
  transform:rotate(4deg);
}
.media-panel.media-panel-tech::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    linear-gradient(105deg,transparent 42%,rgba(255,255,255,.12) 49.5%,rgba(1,255,255,.18) 50%,transparent 57%),
    linear-gradient(168deg,rgba(255,255,255,.08),transparent 20%,transparent 72%,rgba(10,100,227,.08));
  mix-blend-mode:screen;opacity:1;
}

/* lux cards */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px}
.lux-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;box-shadow:var(--shadow-sm);transition:transform .2s, box-shadow .2s}
.lux-card:hover{transform:translateY(-4px);box-shadow:0 26px 60px rgba(1,9,32,.14)}
.lux-card h4{margin:0 0 8px;font-size:16px;color:#001138}
.lux-card p{margin:0;color:var(--slate);font-size:13.5px;line-height:1.6}
.lux-icon{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;padding:0;font-size:0;color:transparent;margin-bottom:16px;border:none;background:transparent;box-shadow:none}
.lux-card.dark{background:linear-gradient(160deg,#001138,#001646);border-color:rgba(226,181,124,.18);color:#fff}
.lux-card.dark h4{color:#fff}
.lux-card.dark p{color:rgba(255,255,255,.72)}
.lux-card.dark .lux-icon{background:transparent}

/* App capabilities grid (Features page) — light ice/silver-blue cards (not dark) */
.app-capabilities{
  position:relative;padding:64px 0 72px;background:transparent;
}
.app-capabilities .section-head-light{text-align:center;margin-bottom:44px}
.app-capabilities .section-head-light .eyebrow{
  display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:800;color:#0C5BE4;margin-bottom:8px;
}
.app-capabilities .section-head-light h2{
  font-family:"Playfair Display",serif;font-size:clamp(28px,3.5vw,38px);
  font-weight:700;color:#001138;margin:0 0 12px;line-height:1.12;
}
.app-capabilities .section-head-light .section-lede{
  max-width:640px;margin:0 auto;color:#002467;font-size:15px;line-height:1.65;
}
.app-feat-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;
}
.app-feat-card{
  position:relative;overflow:hidden;isolation:isolate;color:#001646;
  background:linear-gradient(165deg,#FFFFFF 0%,#F8FAFD 28%,#E1ECF7 72%,#B3C8E2 100%);
  border:1px solid #B3C8E2;border-radius:16px;padding:28px 28px 26px;
  box-shadow:0 14px 36px rgba(0,17,56,.10);
  transition:transform .2s,border-color .2s,box-shadow .2s;
}
.app-feat-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.45;z-index:0;
  background-image:
    radial-gradient(circle at 8% 14%, rgba(12,91,228,.35) 0, rgba(12,91,228,.35) 1px, transparent 1.2px),
    radial-gradient(circle at 22% 68%, rgba(179,200,226,.9) 0, rgba(179,200,226,.9) 1px, transparent 1.2px),
    radial-gradient(circle at 38% 28%, rgba(255,255,255,.95) 0, rgba(255,255,255,.95) 1px, transparent 1.2px),
    radial-gradient(circle at 55% 82%, rgba(12,91,228,.28) 0, rgba(12,91,228,.28) 1px, transparent 1.2px),
    radial-gradient(circle at 71% 18%, rgba(255,255,255,.9) 0, rgba(255,255,255,.9) 1px, transparent 1.2px),
    radial-gradient(circle at 84% 52%, rgba(179,200,226,.85) 0, rgba(179,200,226,.85) 1px, transparent 1.2px),
    radial-gradient(circle at 92% 78%, rgba(255,255,255,.85) 0, rgba(255,255,255,.85) 1px, transparent 1.2px),
    radial-gradient(circle at 48% 44%, rgba(225,236,247,.9) 0, rgba(225,236,247,.9) 1px, transparent 1.2px),
    radial-gradient(circle at 15% 42%, rgba(12,91,228,.22) 0, rgba(12,91,228,.22) 1px, transparent 1.2px),
    radial-gradient(circle at 63% 58%, rgba(255,255,255,.85) 0, rgba(255,255,255,.85) 1px, transparent 1.2px);
}
.app-feat-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 85% 65% at 50% 0%,rgba(12,91,228,.08),transparent 68%);
}
.app-feat-card > *:not(.nx-starfield){position:relative;z-index:1}
.app-feat-card:hover{
  transform:translateY(-3px);
  border-color:#0C5BE4;
  box-shadow:0 18px 42px rgba(0,17,56,.14);
}
.app-feat-card--wide{grid-column:1/-1}
.app-feat-card .lux-icon{
  width:54px;height:54px;flex:0 0 54px;margin-bottom:16px;
  background:transparent;box-shadow:none;
}
.app-feat-card .nx-icon-ring{
  border-color:#B3C8E2;
  background:linear-gradient(180deg,#f7fbff 0%,#eaf2fb 100%);
  box-shadow:none;
}
.app-feat-card .nx-icon-ring svg{color:#001138;width:54%;height:54%}
.app-feat-card h3{
  font-family:"Playfair Display",serif;font-size:22px;font-weight:700;
  color:#001138;margin:0 0 10px;line-height:1.2;
}
.app-feat-lead{
  margin:0 0 16px;font-size:14px;line-height:1.65;color:#002467;
}
.feat-checklist{list-style:none;margin:0;padding:0}
.feat-checklist li{
  position:relative;padding-left:22px;margin-bottom:8px;
  font-size:13px;line-height:1.55;color:#001646;
}
.feat-checklist li:last-child{margin-bottom:0}
.feat-checklist li::before{
  content:"";position:absolute;left:0;top:.45em;width:10px;height:6px;
  border-left:2px solid #0C5BE4;border-bottom:2px solid #0C5BE4;
  transform:rotate(-45deg);opacity:.95;
}
.feat-checklist--cols{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px;
}
@media(max-width:900px){
  .app-feat-grid{grid-template-columns:1fr}
  .app-feat-card--wide{grid-column:auto}
  .feat-checklist--cols{grid-template-columns:1fr}
}

/* numbered step timeline */
.steps{max-width:760px;margin:0 auto;display:grid;gap:30px}
.step-row{display:grid;grid-template-columns:64px 1fr;gap:22px;align-items:start;position:relative}
.step-row:not(:last-child)::after{content:"";position:absolute;left:31px;top:64px;bottom:-30px;width:2px;background:linear-gradient(180deg,rgba(232,197,142,.5),rgba(232,197,142,0))}
.step-num{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-family:"Playfair Display",serif;font-size:24px;font-weight:700;color:var(--gold);background:linear-gradient(160deg,#001646,#001138);border:1px solid rgba(226,181,124,.3);box-shadow:0 10px 24px rgba(1,9,32,.28);position:relative;z-index:2}
.step-row h3{font-family:"Playfair Display",serif;font-size:22px;margin:8px 0 8px;color:#001138}
.step-row p{margin:0;color:var(--slate);font-size:14.5px;line-height:1.7}

/* stat band */
.stat-band{background:linear-gradient(180deg,#001646,#001138);color:#fff}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;text-align:center}
.stat-num{font-family:"Playfair Display",serif;font-size:clamp(34px,4vw,50px);font-weight:700;color:var(--gold);line-height:1}
.stat-label{font-size:13px;color:rgba(255,255,255,.72);margin-top:8px}

/* FAQ */
.faq{max-width:780px;margin:0 auto;display:grid;gap:14px}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm)}
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px;cursor:pointer;font-weight:700;font-size:15px;color:#001138}
.faq-q .chev{transition:transform .25s;color:var(--gold-2);font-size:18px}
.faq-item.open .chev{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-a > div{padding:0 22px 20px;color:var(--slate);font-size:14px;line-height:1.7}

/* forms */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field-row{margin-bottom:16px}
.field-label{display:block;font-size:12.5px;font-weight:700;color:#001138;margin-bottom:7px}
.field{width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:12px;font:inherit;font-size:14.5px;color:var(--ink);background:#fff;transition:border-color .2s, box-shadow .2s}
.field:focus{outline:none;border-color:var(--gold-2);box-shadow:0 0 0 3px rgba(232,197,142,.2)}
textarea.field{resize:vertical;min-height:140px}
.form-note{font-size:12.5px;color:var(--muted);margin-top:12px}
.form-success{display:none;margin-top:18px;padding:14px 18px;border-radius:12px;background:#eafaef;border:1px solid #b8e6c6;color:#1c7a3f;font-size:14px;font-weight:600}

/* info cards (contact) */
.info-card{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:var(--shadow-sm)}
.info-card .lux-icon{margin-bottom:0;flex:0 0 50px}
.info-card h4{margin:0 0 5px;font-size:15px;color:#001138}
.info-card p{margin:0 0 7px;font-size:13px;color:var(--slate);line-height:1.55}
.info-card a{font-size:13px;font-weight:700;color:var(--gold-2)}

/* ==========================================================================
   FOOTER (injected)
   ========================================================================== */
.site-footer{background:#FFFFFF;padding:48px 0 0;border-top:1px solid var(--line);position:relative;z-index:5}
/* Four columns: brand + product + company + support (was 3-col → support wrapped with a huge empty band) */
.footer-grid{display:grid;grid-template-columns:minmax(180px,260px) repeat(3,minmax(0,1fr));gap:28px 36px;align-items:start}
.footer-brand{min-width:0}
.footer-logo{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.footer-wordmark{font-family:'Cormorant Garamond',Georgia,serif;font-size:20px;font-weight:700;letter-spacing:.22em;color:#001138;text-transform:uppercase}
.footer-logo .nx-brand-logo--footer,
.footer-logo .nx-orb-logo--footer{filter:none}
.footer-logo .nx-brand-logo--disc{filter:none}
.footer-logo .nx-brand-logo__img,
.footer-logo .nx-orb-logo--footer .nx-orb-logo__img{mix-blend-mode:normal;filter:none}
.footer-wordmark{display:none}
.footer-mark{
  width:42px;height:42px;flex:0 0 42px;border-radius:50%;background:#001138;color:#fff;
  border:1.5px solid rgba(1,9,32,.08);display:grid;place-items:center;
  font-family:"Playfair Display",Georgia,serif;font-size:22px;font-weight:800;line-height:1;
  box-shadow:0 4px 16px rgba(1,9,32,.18);letter-spacing:0;
}
.footer-tagline{font-size:13px;color:#002467;line-height:1.7;margin:0}
.site-footer .fcol a{font-size:13px;color:#002467;line-height:1.9}
.site-footer h4{font-size:11px;margin:0 0 14px;color:#001138;text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.fcol a{display:block;transition:color .15s;white-space:nowrap}
.fcol a:hover{color:var(--gold-2)}
.social{display:flex;gap:8px;align-items:center;flex-wrap:nowrap;margin-top:4px}
.social a{color:#fff;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#111;transition:transform .18s,filter .18s;flex-shrink:0}
.social a:hover{transform:translateY(-3px);filter:brightness(1.18)}
.social svg{width:20px;height:20px;fill:currentColor;display:block}
.social a.sc-tiktok{background:#010101}
.social a.sc-instagram{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%)}
.social a.sc-x{background:#000}
.social a.sc-pinterest{background:#e60023}
.social a.sc-facebook{background:#1877f2}
.social a.sc-whatsapp{background:#25d366}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:36px;padding:18px 0 28px;border-top:1px solid var(--line)}
.copyright{font-size:12px;color:rgba(0,17,56,.42);white-space:nowrap}
.footer-social{display:flex;align-items:center;gap:14px;flex-shrink:0}
.follow-label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#001138;white-space:nowrap}

/* ==========================================================================
   PHOTO & MOTION EFFECTS (performance-friendly)
   ========================================================================== */
.nx-photo{
  position:relative;overflow:hidden;border-radius:inherit;
}
.nx-photo img{
  display:block;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.04);
  transition:opacity .55s ease, transform .55s cubic-bezier(.22,1,.36,1), filter .45s ease;
}
.nx-photo img.is-loaded,.nx-photo img[complete]{
  opacity:1;transform:scale(1);
}
.nx-photo::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.42) 50%,transparent 65%);
  transform:translateX(-120%);transition:opacity .2s;
}
.nx-photo:hover::after{opacity:1;animation:nx-shine .85s ease}
.nx-photo:hover img{transform:scale(1.06);filter:saturate(1.06) contrast(1.02)}
.tile img,.model-box img,.profile-hero img,.tryon-preview img{
  transition:transform .5s cubic-bezier(.22,1,.36,1), filter .45s ease;
}
.tile:hover img,.model-box:hover img,.profile-hero:hover img,.tryon-preview:hover img{
  transform:scale(1.05);filter:saturate(1.05);
}
.nx-ken-burns img,.nx-ken-burns.try-photo-base{
  animation:nx-ken-burns 18s ease-in-out infinite alternate;
}
@keyframes nx-shine{
  from{transform:translateX(-120%)}
  to{transform:translateX(120%)}
}
@keyframes nx-ken-burns{
  from{transform:scale(1)}
  to{transform:scale(1.05)}
}
@keyframes nx-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}
@keyframes nx-tech-pulse{
  0%,100%{opacity:.85;filter:brightness(1)}
  50%{opacity:1;filter:brightness(1.08)}
}
.nx-float{animation:nx-float 5.5s ease-in-out infinite}
.media-panel-tech .tech-arc-main{animation:nx-tech-pulse 4s ease-in-out infinite}
.media-panel-tech .tech-floor{
  animation:nx-tech-pulse 5s ease-in-out infinite reverse;
}
.media-panel-tech{
  transition:transform .15s linear;
  will-change:transform;
}

/* Visual Style Search — social screenshot / photo scan demo */
.visual-scan-section{background:#FFFFFF}
.visual-scan-section.tint{background:var(--tint,#f4f7fb)}
.visual-scan-section .section-lede{
  max-width:680px;margin:14px auto 0;color:var(--slate);font-size:15px;line-height:1.65;
}
.scan-platforms{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:36px;
}
.scan-platform{
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:7px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);
  color:#001138;box-shadow:0 4px 14px rgba(1,9,32,.06);
}
.visual-scan-demo{
  display:grid;gap:40px;max-width:920px;margin:0 auto 32px;padding:28px 20px;
  background:#fff;border:1px solid var(--line);border-radius:22px;
  box-shadow:0 16px 40px rgba(1,9,32,.06);
}
.scan-demo-row{
  display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;
}
.scan-demo-row--model .scan-source{
  width:min(180px,38vw);aspect-ratio:3/4;
}
.scan-demo-row--model .scan-source img{object-position:center top}
.scan-source{
  position:relative;width:min(200px,42vw);aspect-ratio:1;border-radius:18px;overflow:hidden;
  flex-shrink:0;border:1px solid rgba(225,229,238,.95);
  box-shadow:0 10px 28px rgba(1,9,32,.1);
}
.scan-source img{width:100%;height:100%;object-fit:cover;display:block}
.scan-source-badge{
  position:absolute;top:10px;left:10px;z-index:3;
  font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 9px;border-radius:999px;color:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.2);
}
.scan-source-badge--instagram{
  background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
}
.scan-source-badge--facebook{
  background:linear-gradient(135deg,#1877f2,#0d5dbf);
}
.scan-source-badge--tiktok{
  background:linear-gradient(135deg,#25f4ee,#fe2c55);
  color:#001138;
}
.scan-source-badge--pinterest{
  background:linear-gradient(135deg,#e60023,#bd081c);
}
.scan-box{
  position:absolute;z-index:2;border:2px solid #E1ECF7;border-radius:5px;
  box-shadow:0 0 0 1px rgba(0,0,0,.12), inset 0 0 12px rgba(1,255,255,.15);
  opacity:0;transform:scale(.96);
}
.scan-box::after{
  content:attr(data-label);position:absolute;left:0;top:-20px;
  font-size:9px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:#b8860b;background:rgba(255,255,255,.92);padding:2px 6px;border-radius:4px;
  white-space:nowrap;
}
.scan-beam{
  position:relative;width:72px;height:110px;flex-shrink:0;
  opacity:0;transform:scaleX(.4);transform-origin:left center;
}
.scan-beam__cone{
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:100%;height:62%;
  background:linear-gradient(90deg,rgba(1,255,255,.55) 0%,rgba(1,255,255,.12) 72%,transparent 100%);
  clip-path:polygon(0 28%,100% 0,100% 100%,0 72%);
  filter:blur(.5px);
}
.scan-beam__line{
  position:absolute;left:0;top:50%;width:18px;height:2px;margin-top:-1px;
  background:linear-gradient(90deg,#E1ECF7,transparent);border-radius:2px;
}
.scan-results{display:flex;gap:14px;align-items:center;flex-wrap:wrap;justify-content:center}
.scan-product{
  width:132px;margin:0;background:#fff;border-radius:14px;padding:8px 8px 10px;
  border:1px solid var(--line);box-shadow:0 10px 26px rgba(1,9,32,.08);
  opacity:0;transform:translateX(16px);
}
.scan-product-crop{
  position:relative;aspect-ratio:1;overflow:hidden;border-radius:10px;background:#fff;
}
.scan-product-crop img{
  position:absolute;object-fit:cover;max-width:none;display:block;
}
.scan-product-crop--isolated{
  background:#fff;border:1px solid rgba(225,229,238,.9);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.85);
}
.scan-product-crop--isolated:not(:has(img[style])) img{
  position:static;width:100%;height:100%;object-fit:contain;padding:6px;box-sizing:border-box;
}
.scan-product-crop--isolated::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 72% 72% at 50% 46%,transparent 38%,rgba(255,255,255,.55) 72%,#fff 92%);
}
.scan-product-crop--isolated:not(:has(img[style]))::after{
  background:radial-gradient(ellipse 92% 92% at 50% 50%,transparent 72%,rgba(255,255,255,.18) 90%,rgba(255,255,255,.45) 98%);
}
.scan-product--garment-only .scan-product-crop img[style]{
  filter:brightness(1.06) contrast(1.04) saturate(1.05);
}
.scan-product.nx-photo img{opacity:1;transform:none}
.scan-product figcaption,
.scan-product-meta{
  margin-top:8px;text-align:left;font-size:10px;line-height:1.35;color:#5a6a84;
}
.scan-meta-name{display:block;font-size:11px;font-weight:700;color:#001138;margin-bottom:5px;line-height:1.25}
.scan-meta-details{display:flex;flex-direction:column;gap:3px}
.scan-meta-row{display:block;font-size:9px;line-height:1.4;color:#5a6a84}
.scan-meta-row em{font-style:normal;font-weight:600;color:#B3C8E2;margin-right:2px}
.scan-product figcaption strong{display:block;font-size:11px;color:#001138;margin-bottom:2px}
.scan-results--single .scan-product{width:min(152px,38vw)}
.scan-demo-row:nth-child(4) .scan-product{width:min(162px,36vw)}
.scan-demo-row:nth-child(4) .scan-product-crop{aspect-ratio:3/4}
.scan-benefits{max-width:640px;margin:0 auto}
.visual-scan-demo.is-active .scan-box{
  animation:scan-box-in .7s cubic-bezier(.22,1,.36,1) forwards;
}
.visual-scan-demo.is-active .scan-demo-row:nth-child(1) .scan-box:nth-of-type(1){animation-delay:.15s}
.visual-scan-demo.is-active .scan-demo-row:nth-child(1) .scan-box:nth-of-type(2){animation-delay:.35s}
.visual-scan-demo.is-active .scan-demo-row:nth-child(2) .scan-box{animation-delay:.15s}
.visual-scan-demo.is-active .scan-beam{
  animation:scan-beam-in .9s cubic-bezier(.22,1,.36,1) .45s forwards;
}
.visual-scan-demo.is-active .scan-demo-row:nth-child(2) .scan-beam{animation-delay:.35s}
.visual-scan-demo.is-active .scan-product{
  animation:scan-product-in .65s cubic-bezier(.22,1,.36,1) forwards;
}
.visual-scan-demo.is-active .scan-demo-row:nth-child(1) .scan-results .scan-product:nth-child(1){animation-delay:.75s}
.visual-scan-demo.is-active .scan-demo-row:nth-child(1) .scan-results .scan-product:nth-child(2){animation-delay:.95s}
.visual-scan-demo.is-active .scan-demo-row:nth-child(2) .scan-results .scan-product{animation-delay:.65s}
.visual-scan-demo.is-active .scan-demo-row:nth-child(3) .scan-box:nth-of-type(1){animation-delay:.15s}
.visual-scan-demo.is-active .scan-demo-row:nth-child(3) .scan-box:nth-of-type(2){animation-delay:.35s}
.visual-scan-demo.is-active .scan-demo-row:nth-child(3) .scan-beam{animation-delay:.55s}
.visual-scan-demo.is-active .scan-demo-row:nth-child(3) .scan-results .scan-product:nth-child(1){animation-delay:.85s}
.visual-scan-demo.is-active .scan-demo-row:nth-child(3) .scan-results .scan-product:nth-child(2){animation-delay:1.05s}
.visual-scan-demo.is-active .scan-demo-row:nth-child(4) .scan-box{animation-delay:.15s}
.visual-scan-demo.is-active .scan-demo-row:nth-child(4) .scan-beam{animation-delay:.35s}
.visual-scan-demo.is-active .scan-demo-row:nth-child(4) .scan-results .scan-product{animation-delay:.65s}
@keyframes scan-box-in{
  to{opacity:1;transform:scale(1)}
}
@keyframes scan-beam-in{
  to{opacity:1;transform:scaleX(1)}
}
@keyframes scan-product-in{
  to{opacity:1;transform:translateX(0)}
}

/* Compact scan block — home page: copy above, larger demo below */
.visual-scan-section--compact{padding:36px 0 16px;background:transparent}
.visual-scan-compact-wrap{width:94%;max-width:1280px;margin:0 auto}
.visual-scan-compact{
  display:grid;grid-template-columns:1fr;gap:22px;align-items:stretch;
  padding:28px 28px 32px;background:linear-gradient(165deg,#FFFFFF 0%,#F8FAFD 40%,#E1ECF7 100%);
  border:1px solid #B3C8E2;border-radius:22px;
  box-shadow:0 16px 40px rgba(0,17,56,.08);
}
.visual-scan-compact-copy{
  text-align:center;max-width:720px;margin:0 auto;
}
.visual-scan-compact-copy .scan-kicker{
  display:block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#0C5BE4;margin-bottom:10px;
}
.visual-scan-compact-copy h3{
  font-family:"Playfair Display",serif;font-size:clamp(26px,3.2vw,36px);
  color:#001138;margin:0 0 12px;line-height:1.15;
}
.visual-scan-compact-copy p{
  margin:0 auto;font-size:15px;line-height:1.65;color:#002467;max-width:560px;
}
.visual-scan-compact .visual-scan-demo{
  margin:0;width:100%;max-width:none;padding:28px 20px 24px;
  border:1px solid #B3C8E2;border-radius:18px;
  box-shadow:0 12px 32px rgba(0,17,56,.08);
  background:#F8FAFD;
}
.visual-scan-compact .scan-demo-row{gap:14px}
.visual-scan-compact .scan-demo-row--model .scan-source,
.visual-scan-compact .scan-source{
  width:min(280px,42vw);aspect-ratio:3/4;
}
.visual-scan-compact .scan-beam{width:96px;height:140px}
.visual-scan-compact .scan-product{width:168px}
.visual-scan-compact .scan-results--single .scan-product{width:min(190px,40vw)}
@media(max-width:860px){
  .visual-scan-compact{text-align:center;padding:22px 16px 24px}
  .visual-scan-compact .scan-beam{width:56px;height:96px}
  .visual-scan-compact .scan-demo-row--model .scan-source,
  .visual-scan-compact .scan-source{width:min(220px,48vw)}
  .visual-scan-compact .scan-product{width:140px}
  .scan-beam{width:48px;height:80px}
  .scan-demo-row{gap:10px}
}
@media(max-width:520px){
  .scan-beam{display:none}
  .scan-demo-row{justify-content:center}
}

/* Staggered reveal for grids */
.reveal-stagger > *{
  opacity:0;transform:translateY(18px);
  transition:opacity .55s ease, transform .55s ease;
}
.reveal-stagger.in > *{
  opacity:1;transform:none;
}
.reveal-stagger.in > *:nth-child(1){transition-delay:.04s}
.reveal-stagger.in > *:nth-child(2){transition-delay:.1s}
.reveal-stagger.in > *:nth-child(3){transition-delay:.16s}
.reveal-stagger.in > *:nth-child(4){transition-delay:.22s}
.reveal-stagger.in > *:nth-child(5){transition-delay:.28s}
.reveal-stagger.in > *:nth-child(6){transition-delay:.34s}
.reveal-stagger.in > *:nth-child(7){transition-delay:.4s}

/* ==========================================================================
   VIDEO / CINEMATIC EFFECTS (lightweight, GPU-friendly)
   ========================================================================== */
.nx-fx-on .hdr{
  position:relative;
}
.nx-fx-on .hdr::after{
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.55'/%3E%3C/svg%3E");
  animation:nx-vfx-grain 1.1s steps(5) infinite;
  mix-blend-mode:soft-light;
}

.nx-vfx-panel{position:relative;isolation:isolate}
.nx-vfx-panel::before,
.nx-vfx-panel::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:8;
  opacity:0;transition:opacity .5s ease;
}
.nx-vfx-panel.nx-vfx-live::before{
  opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.5'/%3E%3C/svg%3E");
  animation:nx-vfx-grain 0.9s steps(4) infinite;
  mix-blend-mode:overlay;
}
.nx-vfx-panel.nx-vfx-live::after{
  opacity:.07;
  background:repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(255,255,255,.04) 2px,
    rgba(255,255,255,.04) 3px
  );
  animation:nx-vfx-scan 6s linear infinite;
}
.nx-vfx-panel.nx-vfx-live{
  box-shadow:inset 0 0 80px rgba(1,9,32,.06);
}

@keyframes nx-vfx-grain{
  0%{transform:translate(0,0)}
  25%{transform:translate(-1.5%,1%)}
  50%{transform:translate(1%,-1.5%)}
  75%{transform:translate(-1%,-0.5%)}
  100%{transform:translate(0,0)}
}
@keyframes nx-vfx-scan{
  from{background-position:0 0}
  to{background-position:0 120px}
}
@keyframes nx-vfx-drift{
  from{transform:scale(1) translate3d(0,0,0)}
  to{transform:scale(1.04) translate3d(0,-1%,0)}
}
@keyframes nx-vfx-beam-pulse{
  0%,100%{opacity:.85;filter:brightness(1) saturate(1)}
  50%{opacity:1;filter:brightness(1.15) saturate(1.12)}
}
@keyframes nx-vfx-play-ring{
  0%{transform:scale(1);opacity:.55}
  70%{transform:scale(1.45);opacity:0}
  100%{transform:scale(1.45);opacity:0}
}

.nx-fx-on .visual-scan-demo.is-active .scan-source img{
  animation:nx-vfx-drift 14s ease-in-out infinite alternate;
  transform-origin:center center;
}
.nx-fx-on .visual-scan-demo.is-active .scan-beam__cone{
  animation:nx-vfx-beam-pulse 2.4s ease-in-out infinite;
}
.nx-fx-on .visual-scan-demo.is-active .scan-product{
  animation:scan-product-in .65s cubic-bezier(.22,1,.36,1) forwards, nx-vfx-product-glow 3s ease-in-out 1s infinite;
}
@keyframes nx-vfx-product-glow{
  0%,100%{box-shadow:0 10px 26px rgba(1,9,32,.08)}
  50%{box-shadow:0 14px 32px rgba(10,100,227,.14), 0 10px 26px rgba(1,9,32,.08)}
}

.nx-vfx-play-btn{position:relative;overflow:visible}
.nx-vfx-play-btn::after{
  content:"";position:absolute;inset:-4px;border-radius:999px;pointer-events:none;
  border:2px solid rgba(10,100,227,.35);
  opacity:0;
}
.nx-fx-on .nx-vfx-play-btn::after{
  animation:nx-vfx-play-ring 2.8s ease-out infinite;
}

.nx-fx-flash::before{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  background:radial-gradient(circle at 50% 40%, rgba(255,255,255,.35), transparent 62%);
  animation:nx-vfx-flash .45s ease-out forwards;
}
@keyframes nx-vfx-flash{
  from{opacity:.75}
  to{opacity:0}
}

.nx-fx-on .try-frame.nx-vfx-live .tryon-preview{position:relative}
.nx-fx-on .try-frame.nx-vfx-live .tryon-preview::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:5;
  background:linear-gradient(180deg, rgba(1,9,32,.08) 0%, transparent 18%, transparent 82%, rgba(1,9,32,.08) 100%);
  border-radius:inherit;
}
.nx-fx-on .hero .phones.nx-vfx-live .phone.center{
  animation:none;
}
.nx-fx-on .phones.nx-vfx-live .phone.center{
  animation:nx-float 5.5s ease-in-out infinite;
  transform-origin:center bottom;
}

/* Subtle parallax target */
.nx-parallax{will-change:transform;transition:transform .12s linear}

@media (prefers-reduced-motion:reduce){
  .nx-float,.nx-ken-burns img,.nx-ken-burns.try-photo-base,
  .media-panel-tech .tech-arc-main,.media-panel-tech .tech-floor{animation:none}
  .nx-photo img{opacity:1;transform:none;transition:none}
  .reveal-stagger > *{opacity:1;transform:none;transition:none}
  .visual-scan-demo.is-active .scan-box,
  .visual-scan-demo.is-active .scan-beam,
  .visual-scan-demo.is-active .scan-product{opacity:1;transform:none;animation:none}
  .nx-fx-on .hdr::after,
  .nx-vfx-panel::before,
  .nx-vfx-panel::after{display:none}
  .nx-fx-on .visual-scan-demo.is-active .scan-source img,
  .nx-fx-on .visual-scan-demo.is-active .scan-beam__cone,
  .nx-fx-on .visual-scan-demo.is-active .scan-product{animation:none}
  .nx-vfx-play-btn::after{display:none}
  .wardrobe-demo.is-playing .wd-scene,
  .wardrobe-demo.is-playing .wd-check,
  .wardrobe-demo.is-playing .wd-import-bar,
  .wardrobe-demo.is-playing .wd-item,
  .wardrobe-demo.is-playing .wd-label,
  .wardrobe-demo.is-playing .wd-outfit-card,
  .wardrobe-demo.is-playing .wd-outfit-look,
  .wardrobe-demo.is-playing .wd-progress span{animation:none}
  .wardrobe-demo.is-static .wd-scene--gallery{display:none}
  .wardrobe-demo.is-static .wd-scene--closet{display:flex}
  .wardrobe-demo.is-static .wd-scene--outfits{display:none}
  .wardrobe-demo.is-static .wd-app-scene{display:none}
  .wardrobe-demo.is-static .wd-app-scene--wardrobe{display:flex;opacity:1}
  .wardrobe-demo.is-playing .wd-app-scene,
  .wardrobe-demo.is-playing .wd-step-chip,
  .wardrobe-demo.is-playing .wd-card--pop,
  .wardrobe-demo.is-playing .wd-app-outfit--pop,
  .wardrobe-demo.is-playing .wd-tryon-viewport .try-photo-single{animation:none}
.tryon-demo.is-playing .slide-handle,
.tryon-demo.is-playing .try-frame::after,
.tryon-demo.is-playing .try-frame--swap::after,
.tryon-demo.is-playing .tryon-preview::after,
.tryon-demo.is-playing .tryon-preview--swap::after{animation:none}
  .tryon-demo .to-demo-cursor,
  .tryon-demo .to-demo-chip{display:none}
}

/* ==========================================================================
   REVEAL ANIMATION
   ========================================================================== */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media(max-width:1180px){
  .nav-links{gap:26px}
  .hero-grid{grid-template-columns:1fr;gap:28px;margin-top:0;padding-top:12px}
  .phone-stage{height:430px;max-width:700px;margin-inline:auto}
  .try-card{max-width:640px;margin:auto}
  .middle-grid,.media-section{grid-template-columns:1fr}
  .feature-strip{grid-template-columns:repeat(2,1fr)}
  .partner-bar{width:min(1000px,calc(100% - 48px))}
  .hero-copy-column{text-align:center}
  .benefits{margin-inline:auto}
  .hero-actions{justify-content:center}
  .stat-grid{grid-template-columns:repeat(2,1fr);gap:36px}
}
@media(max-width:920px){
  .nav-links,.top-nav .app-btn{display:none}
  body[data-page="home"] .nav-links{position:static;transform:none}
  .menu-btn{display:block}
  .feature-row{grid-template-columns:1fr;gap:26px;margin-bottom:54px}
  .feature-row.flip .media{order:0}
  .form-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .shell{width:min(100% - 30px,1320px)}
  .nav-inner{width:calc(100% - 30px)}
  .brand{font-size:13px;letter-spacing:.25em}
  :root{--hero-curve-h:152px}
  .hero-wrap{padding-top:var(--hero-curve-h);min-height:auto}
  .hero-grid{margin-top:0;padding-top:8px}
  .hero-medal{top:42px}
  .hero-medal .medallion{width:88px;height:88px}
  .hero-medal .medallion span{font-size:44px}
  .benefits{grid-template-columns:1fr}
  .benefit{border-right:0;border-bottom:1px solid #e6ebf2;padding-bottom:10px;padding-right:0}
  .benefit:last-child{border-bottom:0}
  .phone-stage{height:380px;transform:scale(.82);transform-origin:top center;margin-bottom:-55px}
  .try-layout{grid-template-columns:1fr}
  .thumb-list{grid-template-columns:repeat(4,1fr)}
  .middle-grid{gap:18px}
  .feature-strip{grid-template-columns:1fr;padding:22px}
  .qr-panel{grid-template-columns:1fr;grid-template-rows:auto;text-align:center}
  .qr{margin:auto;grid-row:auto}
  .store-row{justify-content:center;flex-wrap:wrap}
  .media-logos,.sustain,.logos{justify-content:center}
  .media-section{text-align:center;padding:22px}
  .footer-grid{grid-template-columns:1fr 1fr;text-align:left;gap:24px 28px}
  .footer-grid .footer-brand{grid-column:1 / -1}
  .footer-logo{justify-content:flex-start}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:14px}
  .social{flex-wrap:wrap}
  .fcol a{white-space:normal}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .page-hero{padding:96px 0 76px}
  .sub-title{font-size:22px}
  .hero-copy-column h1 .line-dark{white-space:normal}
  .partner-bar{padding:14px 18px 22px}
  .logos{justify-content:center;flex-wrap:wrap;gap:18px}
  .logos span{flex:0 1 auto}
  .logo-sep{display:none}
  .section{padding:60px 0}
}
@media(max-width:460px){
  .stat-grid{grid-template-columns:1fr}
}

/* ==========================================================================
   UNIFIED PAGE HEADER  (.hdr) — new design applied to every page
   Suppresses the old JS-injected fixed nav when .hdr is present
   ========================================================================== */
body:has(.hdr) #nav-root { height:0 !important; overflow:hidden !important; }
body:has(.hdr) .top-nav  { display:none !important; }
/* Keep mobile drawer + scrim available for .hdr pages (phone navigation) */

/* Shared cosmic surface — page header + features grid */
.cosmic-bg,
.hdr{
  background:radial-gradient(120% 90% at 50% 0%,#001646 0%,#001138 45%,#001138 100%);
}
.cosmic-bg .stars,.cosmic-bg .stars2,
.hdr .stars,.hdr .stars2{position:absolute;inset:0;pointer-events:none;z-index:0}
.cosmic-bg .stars::before,.hdr .stars::before{
  content:"";position:absolute;width:1px;height:1px;border-radius:50%;
  box-shadow:663px 154px #cfe3ff,1333px 49px #ffffff,1097px 96px #cfe3ff,1193px 59px #bcd4ff,439px 38px #ffffff,888px 428px #ffffff,492px 92px #bcd4ff,869px 60px #bcd4ff,253px 228px #bcd4ff,1284px 596px #ffffff,1181px 599px #cfe3ff,101px 226px #ffffff,1140px 879px #ffffff,593px 429px #ffffff,1107px 120px #bcd4ff,631px 573px #bcd4ff,370px 105px #bcd4ff,1169px 654px #ffffff,762px 99px #bcd4ff,1458px 64px #bcd4ff,122px 633px #ffffff,1016px 696px #bcd4ff,875px 795px #cfe3ff,953px 599px #cfe3ff,740px 306px #ffffff,368px 715px #ffffff,167px 588px #cfe3ff,1075px 506px #cfe3ff,1493px 459px #cfe3ff,1247px 74px #ffffff,1048px 428px #ffffff,1550px 350px #ffffff,1001px 431px #ffffff,1368px 79px #bcd4ff,1173px 808px #cfe3ff,696px 711px #cfe3ff,1217px 508px #bcd4ff,934px 70px #ffffff,552px 485px #bcd4ff,1360px 66px #ffffff,1497px 718px #cfe3ff,1325px 591px #bcd4ff,912px 291px #bcd4ff,790px 684px #cfe3ff,46px 472px #cfe3ff,344px 625px #ffffff,1011px 60px #ffffff,1573px 294px #ffffff,1512px 253px #cfe3ff,800px 892px #cfe3ff,165px 170px #cfe3ff,822px 562px #cfe3ff,280px 838px #cfe3ff,1126px 285px #bcd4ff,850px 367px #bcd4ff,779px 236px #ffffff,169px 180px #ffffff,475px 674px #ffffff,24px 496px #bcd4ff,373px 269px #cfe3ff,8px 149px #cfe3ff,1094px 378px #bcd4ff,1159px 326px #ffffff,1414px 879px #bcd4ff,1264px 670px #bcd4ff,1515px 55px #cfe3ff,1597px 895px #bcd4ff,1145px 401px #cfe3ff,817px 403px #ffffff,986px 649px #cfe3ff,127px 195px #ffffff,427px 451px #ffffff,225px 348px #bcd4ff,107px 104px #ffffff,1160px 154px #bcd4ff,207px 372px #bcd4ff,52px 72px #ffffff,1257px 385px #ffffff,1299px 258px #cfe3ff,1233px 372px #cfe3ff,251px 118px #cfe3ff,954px 491px #cfe3ff,638px 87px #ffffff,209px 767px #cfe3ff,1516px 271px #cfe3ff,1417px 165px #bcd4ff,47px 210px #bcd4ff,740px 150px #bcd4ff,1112px 27px #bcd4ff,610px 658px #ffffff,1425px 865px #cfe3ff,1061px 375px #ffffff,728px 790px #ffffff,1090px 554px #bcd4ff,675px 651px #ffffff,1255px 830px #ffffff,490px 837px #cfe3ff,1515px 822px #ffffff,409px 530px #cfe3ff,728px 748px #ffffff,57px 809px #cfe3ff,967px 265px #ffffff,1418px 619px #cfe3ff,915px 827px #bcd4ff,715px 373px #ffffff,451px 104px #ffffff,962px 201px #cfe3ff,418px 494px #bcd4ff,1249px 860px #ffffff,981px 668px #cfe3ff,1317px 86px #bcd4ff,245px 397px #bcd4ff,1536px 204px #cfe3ff,365px 444px #bcd4ff,680px 88px #bcd4ff,810px 474px #cfe3ff,1522px 86px #bcd4ff,325px 174px #ffffff,56px 154px #bcd4ff,953px 825px #bcd4ff,299px 626px #bcd4ff,971px 673px #cfe3ff,319px 561px #bcd4ff,268px 21px #ffffff,1487px 665px #ffffff,1078px 767px #ffffff,888px 892px #ffffff,432px 28px #cfe3ff,435px 299px #bcd4ff,492px 782px #bcd4ff,667px 265px #bcd4ff,858px 854px #ffffff,124px 757px #cfe3ff,938px 678px #bcd4ff,1058px 430px #bcd4ff,267px 544px #ffffff,1072px 522px #ffffff,901px 795px #ffffff,1246px 4px #ffffff,352px 144px #cfe3ff,1267px 742px #ffffff,1139px 63px #cfe3ff,1397px 530px #bcd4ff,1137px 494px #ffffff,1147px 58px #ffffff,391px 283px #ffffff,1581px 100px #bcd4ff,926px 575px #ffffff,1556px 64px #cfe3ff,666px 627px #bcd4ff,1241px 524px #ffffff,1418px 283px #cfe3ff,1040px 546px #cfe3ff,1039px 253px #bcd4ff,1071px 897px #cfe3ff,1145px 207px #cfe3ff,280px 426px #ffffff,803px 452px #cfe3ff,148px 687px #ffffff,877px 74px #ffffff
}
.cosmic-bg .stars2::before,.hdr .stars2::before{
  content:"";position:absolute;width:1px;height:1px;border-radius:50%;opacity:.7;
  box-shadow:1371px 310px rgba(1,255,255,.45),1591px 158px rgba(10,100,227,.48),292px 259px rgba(1,255,255,.45),957px 224px rgba(1,255,255,.45),815px 498px rgba(1,255,255,.45),1367px 852px rgba(1,255,255,.45),330px 723px rgba(10,100,227,.48),1055px 413px rgba(10,100,227,.48),862px 200px rgba(10,100,227,.48),652px 94px rgba(10,100,227,.48),39px 346px rgba(10,100,227,.48),902px 720px rgba(1,255,255,.45),787px 339px rgba(10,100,227,.48),1049px 65px rgba(1,255,255,.45),468px 897px rgba(1,255,255,.45),172px 271px rgba(10,100,227,.48),81px 797px rgba(1,255,255,.45),553px 773px rgba(1,255,255,.45),864px 869px rgba(10,100,227,.48),831px 152px rgba(10,100,227,.48),1434px 334px rgba(1,255,255,.45),571px 58px rgba(1,255,255,.45),871px 74px rgba(10,100,227,.48),34px 649px rgba(1,255,255,.45),533px 85px rgba(1,255,255,.45),136px 270px rgba(1,255,255,.45),929px 11px rgba(10,100,227,.48),1132px 427px rgba(10,100,227,.48),1273px 132px rgba(1,255,255,.45),1079px 726px rgba(1,255,255,.45),224px 165px rgba(10,100,227,.48),103px 185px rgba(1,255,255,.45),638px 643px rgba(10,100,227,.48),1087px 777px rgba(1,255,255,.45),593px 456px rgba(1,255,255,.45),554px 355px rgba(1,255,255,.45),512px 37px rgba(1,255,255,.45),37px 750px rgba(1,255,255,.45),1053px 486px rgba(1,255,255,.45),915px 108px rgba(10,100,227,.48),1344px 506px rgba(10,100,227,.48),1037px 315px rgba(1,255,255,.45),470px 350px rgba(1,255,255,.45),1447px 746px rgba(1,255,255,.45),828px 355px rgba(1,255,255,.45),265px 14px rgba(1,255,255,.45),1280px 758px rgba(10,100,227,.48),882px 167px rgba(1,255,255,.45),173px 681px rgba(10,100,227,.48),1036px 686px rgba(10,100,227,.48),1226px 248px rgba(10,100,227,.48),92px 470px rgba(1,255,255,.45),322px 275px rgba(10,100,227,.48),7px 269px rgba(10,100,227,.48),673px 560px rgba(10,100,227,.48),500px 35px rgba(10,100,227,.48),446px 365px rgba(1,255,255,.45),2px 343px rgba(10,100,227,.48),171px 486px rgba(10,100,227,.48),1029px 671px rgba(1,255,255,.45),508px 516px rgba(1,255,255,.45),186px 270px rgba(1,255,255,.45),294px 409px rgba(1,255,255,.45),806px 23px rgba(10,100,227,.48),623px 644px rgba(1,255,255,.45),173px 599px rgba(1,255,255,.45),1346px 733px rgba(10,100,227,.48),1565px 333px rgba(10,100,227,.48),306px 290px rgba(1,255,255,.45),89px 844px rgba(10,100,227,.48),1502px 717px rgba(1,255,255,.45),1072px 770px rgba(1,255,255,.45),1405px 598px rgba(1,255,255,.45),174px 31px rgba(1,255,255,.45),272px 652px rgba(10,100,227,.48),214px 385px rgba(10,100,227,.48),1143px 51px rgba(1,255,255,.45),1282px 544px rgba(1,255,255,.45),1002px 270px rgba(1,255,255,.45),935px 816px rgba(1,255,255,.45),1532px 515px rgba(1,255,255,.45),1350px 538px rgba(1,255,255,.45),1527px 754px rgba(10,100,227,.48),516px 828px rgba(1,255,255,.45),543px 240px rgba(1,255,255,.45),472px 757px rgba(10,100,227,.48),1011px 865px rgba(10,100,227,.48),157px 490px rgba(10,100,227,.48),1570px 47px rgba(1,255,255,.45),158px 614px rgba(1,255,255,.45)
}

.hdr {
  position:relative; overflow:hidden; height:350px;
  padding-top:var(--hdr-nav-h);
}
.hdr.inner { height:auto; min-height:350px; padding-bottom:8px; }

/* ── SVG layers ── */
.hdr .arc    { position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:1 }
.hdr .horizon{ position:absolute;left:0;bottom:0;width:100%;height:200px;z-index:2 }

/* ── Navbar — fixed at top while scrolling ── */
.hdr .navbar{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  max-width:none;width:100%;margin:0;
  height:var(--hdr-nav-h);padding:0 max(28px,calc((100% - 1180px) / 2));
  display:flex;align-items:center;gap:20px;color:#fff;
  background:radial-gradient(120% 90% at 50% 0%,#001646 0%,#001138 52%,#001138 100%);
  border-bottom:1px solid rgba(226,181,124,.18);
  box-shadow:0 6px 24px rgba(1,9,32,.35);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:box-shadow .22s ease,border-color .22s ease;
}
.hdr .navbar::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,#B3C8E2 18%,var(--gold-soft) 50%,#B3C8E2 82%,transparent 100%);
  opacity:.9;
}
.hdr .navbar::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.4;
  background-image:
    radial-gradient(circle at 8% 42%, rgba(255,255,255,.95) 0, rgba(255,255,255,.95) 1px, transparent 1.2px),
    radial-gradient(circle at 22% 68%, rgba(207,227,255,.85) 0, rgba(207,227,255,.85) 1px, transparent 1.2px),
    radial-gradient(circle at 41% 35%, rgba(255,255,255,.75) 0, rgba(255,255,255,.75) 1px, transparent 1.2px),
    radial-gradient(circle at 63% 58%, rgba(188,212,255,.8) 0, rgba(188,212,255,.8) 1px, transparent 1.2px),
    radial-gradient(circle at 79% 40%, rgba(255,255,255,.85) 0, rgba(255,255,255,.85) 1px, transparent 1.2px),
    radial-gradient(circle at 91% 72%, rgba(207,227,255,.7) 0, rgba(207,227,255,.7) 1px, transparent 1.2px);
}
.hdr .navbar.is-scrolled{
  box-shadow:0 12px 36px rgba(1,9,32,.48);
  border-bottom-color:rgba(226,181,124,.32);
}
.hdr .navbar > *{position:relative;z-index:1}
.hdr .logo{
  display:flex;align-items:center;gap:10px;flex:0 0 auto;
  font-size:21px;font-weight:600;letter-spacing:7px;
  font-family:'Cormorant Garamond','Playfair Display',Georgia,serif;
  text-decoration:none;color:#fff;
}
.hdr .nav-links{
  display:flex;gap:34px;list-style:none;font-size:14px;font-weight:500;
  flex:1 1 auto;justify-content:center;min-width:0;margin:0;padding:0;
  position:static;left:auto;transform:none;
}
.hdr .nav-links a{color:#fff;text-decoration:none;opacity:.92;padding:0 0 4px;transition:color .15s;position:static}
.hdr .nav-links a.active::after{display:none}
.hdr .nav-links a:hover{color:#B3C8E2;opacity:1}
.hdr .nav-links .active{color:#B3C8E2;border-bottom:2px solid #B3C8E2;opacity:1}
.hdr .nav-actions{
  display:flex;align-items:center;gap:24px;flex:0 0 auto;flex-shrink:0;
  margin-left:auto;
}

/* Hamburger — phone / tablet only */
.hdr-menu-btn{
  display:none;
  align-items:center;justify-content:center;
  width:42px;height:42px;padding:0;margin:0;
  border:1px solid rgba(255,255,255,.22);
  border-radius:12px;
  background:rgba(255,255,255,.06);
  color:#fff;cursor:pointer;
  flex:0 0 auto;
}
.hdr-menu-btn span{
  display:block;width:18px;height:2px;border-radius:2px;
  background:#fff;position:relative;
  box-shadow:0 -6px 0 #fff, 0 6px 0 #fff;
}
.hdr-menu-btn:hover{border-color:rgba(226,181,124,.55);background:rgba(226,181,124,.12)}
.hdr-menu-btn:focus-visible{outline:2px solid #B3C8E2;outline-offset:2px}

/* Drawer above fixed navbar when .hdr is used */
.nav-scrim{z-index:1100}
.mobile-drawer{z-index:1110}

/* Language picker — navbar */
.lang-picker{position:relative;flex:0 0 auto;flex-shrink:0;min-width:148px}
.lang-trigger,.lang-panel{
  background:#fff;border:none;
  box-shadow:0 6px 18px rgba(1,9,32,.14);
  color:#001138;font-family:'Poppins',Arial,sans-serif;
}
.lang-trigger{
  display:flex;align-items:center;gap:9px;
  padding:11px 16px;min-width:148px;cursor:pointer;
  font-size:13px;font-weight:500;line-height:1;
  border-radius:999px;
}
.lang-panel{border-radius:14px}
.lang-flag{flex:0 0 20px;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.lang-chev{
  margin-left:auto;width:7px;height:7px;
  border-right:2px solid #B3C8E2;border-bottom:2px solid #B3C8E2;
  transform:rotate(45deg);transition:transform .18s ease;
}
.lang-chev.is-up{transform:rotate(-135deg)}
.lang-panel{
  position:absolute;top:0;right:0;min-width:168px;z-index:40;
  padding:0;overflow:hidden;text-align:left;
}
.lang-panel[hidden]{display:none}
.lang-picker.is-open .lang-trigger{visibility:hidden;pointer-events:none;position:absolute}
.lang-panel-head{
  display:flex;align-items:center;gap:9px;padding:11px 14px;cursor:pointer;
  font-size:13px;font-weight:500;color:#001138;
}
.lang-panel-divider{height:1px;background:#e8edf4;margin:0}
.lang-panel-list{padding:4px 0 6px}
.lang-option{
  display:flex;align-items:center;gap:9px;width:100%;
  padding:9px 14px;border:none;background:transparent;
  font-size:13px;color:#001138;cursor:pointer;text-align:left;
  font-family:'Poppins',Arial,sans-serif;
}
.lang-option:hover{background:#f4f7fb}
.lang-option.is-active{font-weight:700;color:#001138}

.hdr .app-btn{
  background:linear-gradient(135deg,var(--gold-soft),#B3C8E2);border:none;
  padding:12px 24px;border-radius:30px;font-weight:700;cursor:pointer;
  color:#001138;font-size:14px;white-space:nowrap;flex:0 0 auto;
  box-shadow:0 8px 20px rgba(226,181,124,.38);
  font-family:'Poppins',Arial,sans-serif;transition:transform .15s;
  text-decoration:none;display:inline-flex;align-items:center;
}
.hdr .app-btn:hover{transform:translateY(-1px)}

/* ── Emblem (centred NX orb) — fills the arc gap ── */
.hdr .emblem{
  position:absolute;top:calc(var(--hdr-nav-h) + 4px);left:50%;transform:translateX(-50%);
  width:132px;height:132px;z-index:5;background:transparent;
}
.hdr.inner .emblem{width:128px;height:128px;top:calc(var(--hdr-nav-h) + 2px);}

/* ── Trionn-style mouse-reactive starfield ──
   Overlay only — never changes host size, format, or colours. */
.nx-starfield-host{position:relative;}
.nx-starfield{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  pointer-events:none!important;
  z-index:2!important;
  display:block!important;
  box-sizing:border-box!important;
}
/* Content stays above the canvas; canvas itself excluded from these rules */
.cta-band > .cta,
.cta-band > .cta-arc,
.cta > h2,
.cta > p,
.cta > .gold-cta,
.cta > button,
.cta > .cta-curve,
.section-problem > .problem-inner,
.nx-biz-showcase > .shell,
.app-feat-card > *:not(.nx-starfield),
.partner-bar > *:not(.nx-starfield),
.media-panel > *:not(.nx-starfield),
.trusted > *:not(.nx-starfield),
.collection-card > *:not(.nx-starfield){position:relative;z-index:4;}
.hdr > .navbar{z-index:1000;}
.hdr > .emblem,
.hdr > .badge,
.hdr > .hdr-content{z-index:5;}

@media(prefers-reduced-motion:reduce){
  .nx-starfield{display:none!important;}
}
@media(max-width:680px){
  .nx-starfield{opacity:.55;}
}

/* ── Page title block (inner pages) ── */
.hdr .hdr-content{
  position:relative;z-index:5;text-align:center;color:#fff;
  margin-top:178px;padding:0 24px;
}
.hdr .hdr-content .eyebrow{
  display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:#B3C8E2;font-weight:700;margin-bottom:6px;
}
.hdr .hdr-content h1{
  font-family:'Cormorant Garamond','Playfair Display',Georgia,serif;
  font-size:clamp(24px,3vw,40px);line-height:1.05;
  font-weight:700;letter-spacing:-.02em;margin:0 0 8px;color:#fff;
}
.hdr .hdr-content h1 .gold{color:#B3C8E2;font-style:italic}
.hdr .hdr-content .lede{
  font-size:13px;line-height:1.55;color:rgba(255,255,255,.82);
  max-width:600px;margin:0 auto 12px;
}
.hdr .hdr-content .hdr-actions{
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
}
.hdr .hdr-content .gold-cta{
  padding:10px 22px;background:linear-gradient(180deg,var(--gold-soft),#B3C8E2);
  color:#001138;border-radius:999px;font-weight:800;font-size:13px;
  box-shadow:0 8px 18px rgba(226,181,124,.34);text-decoration:none;display:inline-flex;
}
.hdr .hdr-content .ghost-gold{
  padding:10px 20px;border:1.5px solid rgba(226,181,124,.55);
  color:#B3C8E2;border-radius:999px;font-weight:700;font-size:13px;
  text-decoration:none;display:inline-flex;
}

/* ── Home-only elements ── */
body[data-page="home"] .hdr{
  height:210px;
}
body[data-page="home"] .hdr .horizon{
  height:72px;
}

/* About: remove white gap between header curve and photo */
body[data-page="about"] .hdr.inner{
  padding-bottom:0;
}
body[data-page="about"] .hdr .horizon{
  height:56px;
}
/* Construction-style full-bleed fashion photo behind home header */
body[data-page="home"] .hdr.hdr--fashion-bg{
  height:auto;
  min-height:min(78vh, 740px);
  background:#001138;
}
body[data-page="home"] .hdr-media{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
body[data-page="home"] .hdr-bg{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 30%;
  display:block;
}
body[data-page="home"] .hdr-photo-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(1,9,32,.52) 0%, rgba(1,9,32,.38) 42%, rgba(1,9,32,.90) 100%),
    radial-gradient(85% 55% at 50% 0%, rgba(0,42,52,.42), transparent 70%);
}
body[data-page="home"] .hdr.hdr--fashion-bg .stars,
body[data-page="home"] .hdr.hdr--fashion-bg .stars2{z-index:2}
body[data-page="home"] .hdr.hdr--fashion-bg .arc{z-index:3}
body[data-page="home"] .hdr.hdr--fashion-bg .horizon{z-index:4; height:140px}
body[data-page="home"] .hdr.hdr--fashion-bg .emblem{
  top:calc(var(--hdr-nav-h) + clamp(28px, 6vh, 72px));
  width:clamp(96px, 12vw, 128px);
  height:clamp(96px, 12vw, 128px);
}
body[data-page="home"] .hdr .badge{
  display:none;
}
@media (prefers-reduced-motion: reduce){
  body[data-page="home"] .hdr-bg.nx-ken-burns{animation:none}
}
@media (max-width:720px){
  body[data-page="home"] .hdr.hdr--fashion-bg{
    min-height:min(62vh, 520px);
  }
}
.hdr .badge{
  position:absolute;left:13%;top:210px;z-index:5;
  background:#eaf1ff;color:#0C5BE4;
  padding:6px 12px;border-radius:20px;
  font-size:11px;font-weight:700;letter-spacing:.5px;
}
.hdr .phones-peek{
  position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);
  display:flex;gap:14px;align-items:flex-end;z-index:4;
}
.hdr .pp{
  width:120px;height:70px;background:#001138;
  border:6px solid #001138;border-bottom:none;
  border-radius:26px 26px 0 0;
  box-shadow:0 -6px 20px rgba(1,9,32,.45);
}
.hdr .pp.mid{width:150px;height:96px}
.hdr .pp::before{
  content:"";display:block;width:40px;height:6px;
  background:#001138;border-radius:5px;margin:9px auto;
}

/* ── Responsive ── */
@media(max-width:980px){
  .footer-grid{grid-template-columns:minmax(160px,200px) repeat(3,minmax(0,1fr));gap:24px 20px}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:16px}
}
@media(max-width:900px){
  .hdr .nav-links{display:none}
  .hdr .navbar{padding:0 16px;gap:10px}
  .hdr .nav-actions{gap:10px;margin-left:auto}
  .hdr-menu-btn{display:inline-flex}
  .lang-trigger{min-width:auto;padding:8px 10px;font-size:12px}
  .lang-trigger-label{display:none}
  .hdr .emblem{width:110px;height:110px;top:calc(var(--hdr-nav-h) + 4px)}
  .hdr.inner .emblem{width:110px;height:110px}
  .hdr .hdr-content{margin-top:158px}
  .nx-brand-wordmark{font-size:15px;letter-spacing:5px}
}
@media(max-width:480px){
  .hdr .logo span,
  .hdr .logo .nx-brand-wordmark{display:none}
  .hdr .app-btn{padding:10px 12px;font-size:12px}
  .lang-panel{right:-8px}
  .hdr.inner{padding-bottom:50px}
}

/* ==========================================================================
   PHASE 2B — Technology Flow / Mirror / Screen Energy (features.html)
               Cinematic Business Showcase (for-business.html)
   All animations use opacity + transform only (GPU composited, no layout).
   Reduced-motion: every animation disabled; static gradients retained.
   Mobile <768 px: heavy elements hidden; static atmosphere retained.
   ========================================================================== */

/* ── Shared Phase 2B keyframes ── */

/* Diagonal light sweep — flows across dark panels like a technology mirror */
@keyframes nx-fx-sweep{
  0%  {transform:translateX(-140%) skewX(-14deg);opacity:0}
  6%  {opacity:1}
  94% {opacity:.88}
  100%{transform:translateX(260%) skewX(-14deg);opacity:0}
}

/* Rising data dot — small particle drifting upward and fading */
@keyframes nx-fx-data-rise{
  0%  {transform:translateY(0);opacity:0}
  10% {opacity:.72}
  88% {opacity:.45}
  100%{transform:translateY(-180px);opacity:0}
}

/* Edge glow breathing — media-panel cyan/blue halo pulse */
@keyframes nx-fx-edge-glow{
  0%,100%{
    box-shadow:
      0 0 28px rgba(1,255,255,.18),0 0 70px rgba(10,100,227,.12),
      var(--shadow),
      inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 140px rgba(10,100,227,.22);
  }
  50%{
    box-shadow:
      0 0 50px rgba(1,255,255,.32),0 0 100px rgba(10,100,227,.22),
      var(--shadow),
      inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 160px rgba(10,100,227,.30);
  }
}

/* Mirror horizon line breath — bilateral glow at panel midline */
@keyframes nx-fx-horizon-breath{
  0%,100%{opacity:.26;box-shadow:0 0 12px rgba(1,255,255,.18),0 0 28px rgba(10,100,227,.12)}
  50%    {opacity:.52;box-shadow:0 0 28px rgba(1,255,255,.38),0 0 50px rgba(10,100,227,.2)}
}

/* Golden horizon line breath — For Business panel base */
@keyframes nx-fx-gold-breath{
  0%,100%{opacity:.28;box-shadow:0 0 12px rgba(226,181,124,.2)}
  50%    {opacity:.60;box-shadow:0 0 26px rgba(226,181,124,.44)}
}

/* Spotlight pulse — cinematic top-glow on business panel */
@keyframes nx-fx-spotlight-pulse{
  0%,100%{opacity:.50;transform:translateX(-50%) scale(1)}
  50%    {opacity:.72;transform:translateX(-50%) scale(1.06)}
}

/* ── A · FEATURES PAGE — Light Sweep ── */

/* Add to .media-panel-tech to animate a diagonal light sweep */
.nx-light-sweep{overflow:hidden}
.nx-light-sweep::after{
  content:"";
  position:absolute;
  top:-25%;left:-72%;
  width:42%;height:150%;
  pointer-events:none;z-index:10;
  background:linear-gradient(
    108deg,
    transparent 0%,
    rgba(1,255,255,.025) 28%,
    rgba(255,255,255,.09)  50%,
    rgba(1,255,255,.025) 72%,
    transparent 100%
  );
  animation:nx-fx-sweep 10s cubic-bezier(.38,0,.62,1) infinite;
  animation-delay:2.8s;
}

/* ── A · FEATURES PAGE — Mirror Horizon Line ── */

/* Add to .media-panel-tech for bilateral glow at panel midpoint */
.nx-mirror-glow{position:relative}
.nx-mirror-glow::before{
  content:"";
  position:absolute;
  left:10%;right:10%;top:47%;height:1px;
  pointer-events:none;z-index:9;
  background:linear-gradient(90deg,
    transparent,
    rgba(1,255,255,.38) 25%,
    rgba(1,255,255,.58) 50%,
    rgba(1,255,255,.38) 75%,
    transparent
  );
  box-shadow:0 0 14px rgba(1,255,255,.26),0 0 32px rgba(10,100,227,.16);
  animation:nx-fx-horizon-breath 5.8s ease-in-out infinite;
}

/* ── A · FEATURES PAGE — Edge Glow Breathing ── */

/* Add to .media-panel-tech to breathe the outer glow */
.nx-panel-glow{
  animation:nx-fx-edge-glow 6.8s ease-in-out infinite;
}

/* ── A · FEATURES PAGE — Rising Data Dots ── */

.nx-data-trail{
  position:absolute;inset:0;
  pointer-events:none;z-index:8;overflow:hidden;
}
.nx-data-dot{
  position:absolute;
  width:2px;height:2px;border-radius:50%;
  background:var(--digital-cyan);
  box-shadow:0 0 5px rgba(1,255,255,.75);
  animation:nx-fx-data-rise 5.6s ease-in-out infinite;
}
.nx-data-dot:nth-child(1){left:12%;bottom:6%;animation-delay:0s;   animation-duration:5.2s}
.nx-data-dot:nth-child(2){
  left:28%;bottom:10%;animation-delay:1.7s;animation-duration:6.9s;
  background:var(--digital-blue);box-shadow:0 0 5px rgba(10,100,227,.75);
}
.nx-data-dot:nth-child(3){
  left:55%;bottom:5%;animation-delay:3.2s;animation-duration:7.4s;
  background:var(--digital-beige);box-shadow:0 0 7px rgba(226,181,124,.7);
  width:3px;height:3px;
}
.nx-data-dot:nth-child(4){left:74%;bottom:14%;animation-delay:.85s;animation-duration:5.9s}
.nx-data-dot:nth-child(5){
  left:88%;bottom:7%; animation-delay:2.5s; animation-duration:8.1s;
  background:var(--digital-white);box-shadow:0 0 4px rgba(255,255,255,.6);
  width:1.5px;height:1.5px;
}

/* ═══════════════════════════════════════════════════════════════════
   B · FOR BUSINESS PAGE — Cinematic Showcase Section
   ═══════════════════════════════════════════════════════════════════ */

.nx-biz-showcase{
  padding:84px 0;
  background:#001138;
  position:relative;overflow:hidden;
}
/* Cinematic top spotlight */
.nx-biz-showcase::before{
  content:"";
  position:absolute;left:50%;top:-60px;
  width:min(940px,92vw);height:520px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 0%,rgba(10,100,227,.44) 0%,rgba(1,9,32,0) 68%);
  pointer-events:none;z-index:0;
  animation:nx-fx-spotlight-pulse 8.5s ease-in-out infinite;
}
/* Corner accent glows */
.nx-biz-showcase::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 55% 38% at  8% 88%,rgba(1,255,255,.06) 0%,transparent 62%),
    radial-gradient(ellipse 45% 32% at 92% 80%,rgba(226,181,124,.055) 0%,transparent 56%);
}
.nx-biz-showcase > .shell{position:relative;z-index:1}

/* ── For-Business page ONLY: strip the blue / dark-blue background tint ──
   (About Us + Contact keep the original cinematic blue panel untouched;
   every other item — copy, stats, phone, product cards, glows — stays put).
   The dark card itself (.nx-biz-panel) is kept as-is; only the page
   background surrounding it switches to the site's usual white. */
.nx-biz-showcase.nx-biz-showcase--neutral{
  background:#FFFFFF;
}
.nx-biz-showcase.nx-biz-showcase--neutral::before,
.nx-biz-showcase.nx-biz-showcase--neutral::after{
  display:none;
}
.nx-biz-showcase.nx-biz-showcase--neutral .nx-biz-head .eyebrow{
  color:var(--gold);
}
.nx-biz-showcase.nx-biz-showcase--neutral .nx-biz-head h2{
  color:var(--ink);
}
.nx-biz-showcase.nx-biz-showcase--neutral .nx-biz-head p{
  color:var(--slate);
}
.nx-biz-panel.nx-biz-panel--neutral{
  background:linear-gradient(162deg,#242429 0%,#1b1b20 26%,#131316 56%,#0d0d10 100%);
  border-color:rgba(255,255,255,.14);
  box-shadow:
    0 40px 100px rgba(1,9,32,.22),
    0 0 50px rgba(1,9,32,.10),
    inset 0 1px 0 rgba(255,255,255,.10);
}

/* ── Contact page ONLY: go one step further — the card itself turns white
   too (not just the page around it). The phone mockup, its notch, logo
   header and screen scenes are left completely untouched. ── */
body[data-page="contact"] .nx-biz-panel.nx-biz-panel--neutral{
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(226,181,124,.10) 0%, transparent 62%),
    linear-gradient(165deg,#f8f9fb 0%,#eef1f6 100%);
  border-color:rgba(1,9,32,.07);
  box-shadow:0 24px 80px rgba(1,9,32,.14);
}
body[data-page="contact"] .nx-biz-copy h3{color:var(--ink)}
body[data-page="contact"] .nx-biz-copy p{color:var(--slate)}
body[data-page="contact"] .nx-biz-stat{
  background:rgba(1,9,32,.035);
  border-color:rgba(1,9,32,.09);
  backdrop-filter:none;
}
body[data-page="contact"] .nx-biz-stat-val{color:#002467}
body[data-page="contact"] .nx-biz-stat-label{color:var(--slate)}
body[data-page="contact"] .nx-biz-chip{
  background:#fff;
  border-color:rgba(1,9,32,.1);
  box-shadow:0 8px 24px rgba(1,9,32,.12);
}
body[data-page="contact"] .nx-biz-chip-val{color:#002467}
body[data-page="contact"] .nx-biz-chip-label{color:var(--slate)}
body[data-page="contact"] .nx-biz-prod-card{
  background:#fff;
  border-color:rgba(1,9,32,.09);
  box-shadow:0 8px 22px rgba(1,9,32,.12);
}
body[data-page="contact"] .nx-biz-prod-card-label{
  color:#002467;
  border-top-color:rgba(1,9,32,.08);
}

/* ── About page: blue-cloud panel + larger phone screen ── */
body[data-page="about"] .nx-biz-panel.nx-biz-panel--neutral{
  background:
    linear-gradient(165deg,
      rgba(248,250,253,.72) 0%,
      rgba(225,236,247,.55) 42%,
      rgba(179,200,226,.42) 100%),
    url("site/bg_home_clouds.jpg") center top / cover no-repeat;
  border-color:#B3C8E2;
  box-shadow:
    0 32px 80px rgba(0,17,56,.14),
    inset 0 1px 0 rgba(255,255,255,.65);
}
body[data-page="about"] .nx-biz-panel.nx-biz-panel--neutral::before,
body[data-page="about"] .nx-biz-panel.nx-biz-panel--neutral::after{
  opacity:.35;
}
body[data-page="about"] .nx-biz-copy h3{color:#001138}
body[data-page="about"] .nx-biz-copy p{color:#002467}
body[data-page="about"] .nx-biz-stat{
  background:rgba(248,250,253,.82);
  border-color:#B3C8E2;
  backdrop-filter:blur(10px);
  box-shadow:0 8px 22px rgba(0,17,56,.08);
}
body[data-page="about"] .nx-biz-stat-ico{
  background:linear-gradient(135deg,#FFFFFF,#E1ECF7);
  border-color:rgba(12,91,228,.28);
  color:#0C5BE4;
}
body[data-page="about"] .nx-biz-stat-val{color:#0C5BE4}
body[data-page="about"] .nx-biz-stat-label{color:#001646}
body[data-page="about"] .nx-biz-devices{
  min-height:520px;
}
body[data-page="about"] .nx-biz-phone-xl{
  width:300px;
  border-radius:48px;
  padding:16px;
}
body[data-page="about"] .nx-biz-phone-xl-notch{
  width:68px;height:14px;top:16px;
}
body[data-page="about"] .nx-biz-phone-xl-screen{
  border-radius:34px;
}
/* Crop out baked-in Hailuo / description watermark at bottom of video */
body[data-page="about"] .nx-biz-phone-xl-video{
  inset:auto;
  top:-6%;
  left:0;
  width:100%;
  height:118%;
  object-fit:cover;
  object-position:center 22%;
}
body[data-page="about"] .nx-biz-phone-xl-screen::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:20%;
  z-index:3;
  pointer-events:none;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(0,17,56,.65) 48%,
    rgba(0,17,56,.96) 100%);
}
body[data-page="about"] .nx-page-phone-body--overlay{
  z-index:6;
}
body[data-page="about"] .nx-biz-chip,
body[data-page="about"] .nx-biz-prod-card{
  background:rgba(248,250,253,.92);
  border-color:#B3C8E2;
  box-shadow:0 8px 22px rgba(0,17,56,.10);
}
body[data-page="about"] .nx-biz-chip-val,
body[data-page="about"] .nx-biz-prod-card-label{
  color:#001646;
}
body[data-page="about"] .nx-biz-chip-label{color:#002467}

@media(max-width:980px){
  body[data-page="about"] .nx-biz-phone-xl{width:260px}
  body[data-page="about"] .nx-biz-devices{min-height:440px}
}
@media(max-width:720px){
  body[data-page="about"] .nx-biz-phone-xl{width:220px;border-radius:40px;padding:13px}
  body[data-page="about"] .nx-biz-devices{min-height:360px}
}

/* Section heading */
.nx-biz-head{text-align:center;margin-bottom:56px}
.nx-biz-head .eyebrow{
  display:block;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;font-weight:800;
  color:var(--gold);margin-bottom:10px;
}
.nx-biz-head h2{
  font-family:"Playfair Display",serif;
  font-size:clamp(26px,3.2vw,40px);
  font-weight:700;color:#fff;
  margin:0 0 14px;line-height:1.12;
}
.nx-biz-head p{
  color:rgba(255,255,255,.65);font-size:15.5px;
  line-height:1.65;max-width:580px;margin:0 auto;
}

/* Main cinematic panel */
.nx-biz-panel{
  position:relative;border-radius:24px;
  background:linear-gradient(
    162deg,
    #0C5BE4 0%,#0848b8 16%,
    #003a7a 36%,#001646 64%,
    #001138 100%
  );
  border:1px solid rgba(1,255,255,.22);
  box-shadow:
    0 40px 100px rgba(1,9,32,.65),
    0 0 60px rgba(10,100,227,.28),
    inset 0 1px 0 rgba(255,255,255,.12);
  padding:48px 52px 52px;
  overflow:hidden;
  display:flex;align-items:center;gap:52px;
}
/* Diagonal sweep on panel */
.nx-biz-panel::before{
  content:"";
  position:absolute;top:-30%;left:-68%;
  width:46%;height:160%;
  pointer-events:none;z-index:1;
  background:linear-gradient(
    108deg,
    transparent 0%,
    rgba(255,255,255,.01)  28%,
    rgba(1,255,255,.065)   50%,
    rgba(255,255,255,.01)  72%,
    transparent 100%
  );
  animation:nx-fx-sweep 13s cubic-bezier(.38,0,.62,1) infinite;
  animation-delay:2s;
}
/* Golden horizon line at panel base */
.nx-biz-panel::after{
  content:"";
  position:absolute;bottom:0;left:0;right:0;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,#B3C8E2 24%,rgba(255,246,218,.9) 50%,#B3C8E2 76%,transparent);
  box-shadow:0 0 20px rgba(226,181,124,.38);
  animation:nx-fx-gold-breath 6.2s ease-in-out infinite;
}

/* Left: copy + animated stat cards */
.nx-biz-copy{flex:0 0 300px;position:relative;z-index:3}
.nx-biz-copy h3{
  font-family:"Playfair Display",serif;
  font-size:clamp(18px,2vw,26px);font-weight:700;
  color:#fff;margin:0 0 12px;line-height:1.15;
}
.nx-biz-copy p{
  color:rgba(255,255,255,.65);font-size:14px;
  line-height:1.72;margin:0 0 28px;
}

/* Floating stat cards */
.nx-biz-stats{display:flex;flex-direction:column;gap:11px}
.nx-biz-stat{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(1,255,255,.18);
  border-radius:12px;padding:12px 16px;
  display:flex;align-items:center;gap:13px;
  backdrop-filter:blur(8px);
  animation:nx-float 6.2s ease-in-out infinite;
  position:relative;z-index:1;
}
.nx-biz-stat:nth-child(2){animation-delay:1.5s;animation-duration:7.5s}
.nx-biz-stat:nth-child(3){animation-delay:3.1s;animation-duration:5.9s}
.nx-biz-stat-ico{
  width:30px;height:30px;flex-shrink:0;
  border-radius:50%;
  background:linear-gradient(135deg,rgba(1,255,255,.2),rgba(10,100,227,.2));
  border:1px solid rgba(1,255,255,.28);
  display:grid;place-items:center;font-size:14px;color:#E1ECF7;
}
.nx-biz-stat-val{
  font-family:"Playfair Display",serif;
  font-size:20px;font-weight:700;
  color:var(--gold);white-space:nowrap;line-height:1;
}
.nx-biz-stat-label{
  font-size:10px;font-weight:600;
  color:rgba(255,255,255,.72);line-height:1.4;
}

/* Right: device composition */
.nx-biz-devices{
  flex:1;position:relative;
  min-height:360px;z-index:3;
}

/* Background arc rings */
.nx-biz-arc-wrap{position:absolute;inset:-8%;pointer-events:none;z-index:0}
.nx-biz-arc{
  position:absolute;
  left:-22%;right:-22%;border-radius:50%;
}
.nx-biz-arc--1{
  top:13%;height:62%;
  border:1.5px solid rgba(1,255,255,.68);
  box-shadow:0 0 26px rgba(1,255,255,.5),0 0 55px rgba(10,100,227,.28);
  background:linear-gradient(180deg,rgba(1,255,255,.06),transparent 52%);
  transform:rotate(-3deg);
  animation:nx-tech-pulse 4.8s ease-in-out infinite;
}
.nx-biz-arc--2{
  top:24%;height:48%;
  border:1px solid rgba(1,255,255,.3);
  transform:rotate(-3deg);
  animation:nx-tech-pulse 6.1s ease-in-out infinite reverse;
}
.nx-biz-arc--3{
  top:32%;height:36%;
  border:1px solid rgba(10,100,227,.2);
  transform:rotate(-3deg);
}

/* Laptop CSS mockup */
.nx-biz-laptop{position:relative;z-index:2;width:min(400px,85%);margin:0 auto}
.nx-biz-laptop-lid{
  background:linear-gradient(180deg,#0c1930,#060e20);
  border:2px solid rgba(1,255,255,.28);
  border-bottom:1px solid rgba(1,255,255,.12);
  border-radius:10px 10px 0 0;
  padding:10px 10px 8px;
  box-shadow:0 0 36px rgba(10,100,227,.22);
}
.nx-biz-screen-inner{
  border-radius:5px;overflow:hidden;
  background:#001138;
  aspect-ratio:16/10;position:relative;
}
.nx-biz-screen-img{
  width:100%;height:100%;
  object-fit:cover;object-position:center 15%;
  opacity:.85;display:block;
}
.nx-biz-screen-ui{
  position:absolute;inset:0;pointer-events:none;z-index:3;
  background:linear-gradient(180deg,rgba(1,9,32,.18) 0%,transparent 36%,transparent 66%,rgba(1,9,32,.55) 100%);
}
.nx-biz-screen-ui::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:24px;
  background:rgba(1,9,32,.52);
  border-bottom:1px solid rgba(1,255,255,.14);
}
.nx-biz-screen-ui::after{
  content:"";
  position:absolute;top:0;left:-82%;width:55%;height:100%;
  pointer-events:none;
  background:linear-gradient(108deg,transparent,rgba(1,255,255,.05) 50%,transparent);
  animation:nx-fx-sweep 12.5s cubic-bezier(.38,0,.62,1) infinite;
  animation-delay:5.5s;
}
.nx-biz-laptop-base{
  height:10px;
  background:linear-gradient(180deg,#0c1930,#07101f);
  border:2px solid rgba(1,255,255,.2);
  border-top:1px solid rgba(1,255,255,.1);
  border-radius:0 0 4px 4px;
}
.nx-biz-laptop-stand{
  width:90px;height:5px;
  background:#060e1e;
  border:1px solid rgba(1,255,255,.12);border-top:0;
  border-radius:0 0 6px 6px;
  margin:0 auto;
  box-shadow:0 6px 20px rgba(1,9,32,.6);
}

/* Floating phone beside laptop */
.nx-biz-phone{
  position:absolute;right:-20px;top:50%;
  transform:translateY(-48%);
  width:82px;z-index:5;
  animation:nx-float 7.1s ease-in-out infinite;
  animation-delay:.9s;
}
.nx-biz-phone-body{
  background:linear-gradient(180deg,#0c1930,#060e20);
  border:2px solid rgba(1,255,255,.3);
  border-radius:12px;overflow:hidden;
  box-shadow:0 0 22px rgba(10,100,227,.3),0 14px 36px rgba(1,9,32,.5);
  aspect-ratio:9/19.5;position:relative;
}
.nx-biz-phone-img{
  width:100%;height:100%;
  object-fit:cover;object-position:top;display:block;
}
.nx-biz-phone-notch{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:22px;height:5px;
  background:#001138;border-radius:0 0 4px 4px;z-index:2;
}

/* Golden stat chip floating near phone */
.nx-biz-chip{
  position:absolute;right:65px;top:16%;
  background:rgba(1,9,32,.88);
  border:1px solid rgba(226,181,124,.38);
  border-radius:10px;padding:8px 12px;
  z-index:6;min-width:108px;
  backdrop-filter:blur(10px);
  box-shadow:0 8px 24px rgba(1,9,32,.45);
  animation:nx-float 5.9s ease-in-out infinite;
  animation-delay:2.5s;
}
.nx-biz-chip::before{
  content:"✦";display:block;
  font-size:8px;color:#E1ECF7;margin-bottom:3px;
}
.nx-biz-chip-val{
  font-family:"Playfair Display",serif;
  font-size:17px;font-weight:700;
  color:#B3C8E2;line-height:1;
}
.nx-biz-chip-label{
  font-size:9px;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;
  color:rgba(255,255,255,.6);margin-top:2px;
}

/* Connector line: laptop → phone */
.nx-biz-connect{
  position:absolute;top:50%;right:64px;
  width:44px;height:1px;z-index:4;
  background:linear-gradient(90deg,rgba(1,255,255,.22),rgba(1,255,255,.56));
  transform:translateY(-50%);
}
.nx-biz-connect::after{
  content:"";position:absolute;
  right:-3px;top:-3px;
  width:6px;height:6px;border-radius:50%;
  background:#E1ECF7;
  box-shadow:0 0 8px rgba(1,255,255,.85);
  animation:nx-tech-pulse 2.2s ease-in-out infinite;
}

/* Rising data dots inside panel */
.nx-biz-trail{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.nx-biz-trail-dot{
  position:absolute;
  width:2px;height:2px;border-radius:50%;
  background:#E1ECF7;box-shadow:0 0 5px rgba(1,255,255,.8);
  animation:nx-fx-data-rise 6.6s ease-in-out infinite;
}
.nx-biz-trail-dot:nth-child(1){left:15%;bottom:5%; animation-delay:0s}
.nx-biz-trail-dot:nth-child(2){
  left:38%;bottom:9%; animation-delay:1.9s;
  background:#0C5BE4;box-shadow:0 0 5px rgba(10,100,227,.8);
}
.nx-biz-trail-dot:nth-child(3){
  left:62%;bottom:4%; animation-delay:3.5s;
  background:#B3C8E2;box-shadow:0 0 6px rgba(226,181,124,.7);
  width:3px;height:3px;
}
.nx-biz-trail-dot:nth-child(4){left:82%;bottom:13%;animation-delay:5.1s}
.nx-biz-trail-dot:nth-child(5){
  left:26%;bottom:20%;animation-delay:.9s;
  background:#fff;box-shadow:0 0 4px rgba(255,255,255,.6);
  width:1.5px;height:1.5px;
}

/* Video variant of screen image (for-business laptop mockup) */
.nx-biz-screen-video{
  width:100%;height:100%;
  object-fit:cover;object-position:center top;
  opacity:.9;display:block;
}
@media(prefers-reduced-motion:reduce){
  .nx-biz-screen-video{opacity:.85}
}
  .nx-light-sweep::after,
  .nx-biz-panel::before,
  .nx-biz-screen-ui::after,
  .nx-biz-showcase::before{animation:none;opacity:0}

  .nx-mirror-glow::before{animation:none;opacity:.22}
  .nx-biz-panel::after{animation:none;opacity:.38}
  .nx-panel-glow,.nx-biz-arc--1,.nx-biz-arc--2,
  .nx-biz-connect::after{animation:none}

  .nx-biz-stat,.nx-biz-phone,.nx-biz-chip,
  .nx-data-dot,.nx-biz-trail-dot{animation:none}
}

/* ── Phase 2B: responsive ── */
@media(max-width:1199px){
  .nx-biz-panel{gap:36px;padding:40px 36px 44px}
  .nx-biz-copy{flex:0 0 272px}
  .nx-biz-phone{right:-14px;width:70px}
  .nx-biz-chip{right:58px;min-width:94px}
  .nx-biz-connect{right:52px;width:36px}
}
@media(max-width:1023px){
  .nx-biz-panel{flex-direction:column;gap:32px;padding:36px 28px 40px}
  .nx-biz-copy{flex:0 0 auto;width:100%;max-width:520px;margin:0 auto}
  .nx-biz-devices{width:100%;max-width:460px;margin:0 auto;min-height:300px}
  .nx-biz-phone{right:-14px;width:72px}
}
@media(max-width:767px){
  .nx-biz-showcase{padding:56px 0}
  .nx-biz-panel{padding:28px 20px 32px;gap:24px}
  .nx-biz-head{margin-bottom:36px}
  .nx-biz-laptop{width:100%}
  .nx-biz-phone{right:-6px;width:56px}
  .nx-biz-chip{display:none}
  .nx-biz-connect{display:none}
  .nx-biz-trail{display:none}
  .nx-data-trail{display:none}
  .nx-mirror-glow::before{display:none}
  .nx-biz-arc-wrap{display:none}
}

/* ==========================================================================
   NIKONYX VIDEO SHOWCASE — For Business page
   Portrait NIKONYX.mp4 in landscape 16:10 laptop screen
   Brand overlay (replaces "FITS" text in video)
   Product cards column (replaces floating phone card)
   All CSS only — no new keyframes needed (reuses nx-float, nx-tech-pulse)
   ========================================================================== */

/* ── Screen: digital letterbox background for portrait video ── */
/* Overrides the plain #001138 fill — shows a rich side atmosphere */
.nx-biz-screen-inner{
  background:
    /* Left and right blue column glows (letterbox areas beside portrait video) */
    linear-gradient(90deg,
      rgba(10,100,227,.32) 0%,rgba(1,255,255,.08) 8%,
      transparent 22%,transparent 78%,
      rgba(1,255,255,.08) 92%,rgba(10,100,227,.32) 100%
    ),
    /* Subtle circuit radials on each side */
    radial-gradient(ellipse 38% 85% at 10% 50%,rgba(1,255,255,.07) 0%,transparent 65%),
    radial-gradient(ellipse 38% 85% at 90% 50%,rgba(1,255,255,.07) 0%,transparent 65%),
    /* Deep teal base gradient — premium digital space */
    linear-gradient(175deg,#001646 0%,#001138 52%,#001a24 100%);
}

/* ── Screen video: contain so portrait video never crops ── */
.nx-biz-screen-video{
  object-fit:contain;
  object-position:center center;
  opacity:.97;
}

/* ── NIKONYX brand overlay — covers "FITS" brand name in video ── */
.nx-biz-brand-ov{
  position:absolute;
  top:30px;left:50%;
  transform:translateX(-50%);
  z-index:6;pointer-events:none;
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(1,9,32,.82);
  border:1px solid rgba(226,181,124,.36);
  border-radius:999px;
  padding:4px 13px 4px 9px;
  backdrop-filter:blur(6px);
  box-shadow:0 4px 18px rgba(1,9,32,.55),0 0 12px rgba(10,100,227,.28);
  white-space:nowrap;
}
/* Small Nikonyx logo mark inside the pill */
.nx-biz-brand-ov-logo{
  width:16px;height:16px;flex-shrink:0;
  border-radius:3px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  opacity:.92;
}
.nx-biz-brand-ov-logo img{
  width:100%;height:100%;
  object-fit:contain;display:block;
}
/* Brand wordmark text */
.nx-biz-brand-ov-name{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:700;font-size:10.5px;
  letter-spacing:.24em;text-transform:uppercase;
  color:#B3C8E2;line-height:1;
}
/* Pulsing cyan live-dot beside name */
.nx-biz-brand-ov-dot{
  width:4px;height:4px;border-radius:50%;flex-shrink:0;
  background:#E1ECF7;
  box-shadow:0 0 6px rgba(1,255,255,.85);
  animation:nx-tech-pulse 2.2s ease-in-out infinite;
}

/* ── Product cards column (replaces phone card) ── */
.nx-biz-products{
  position:absolute;
  right:-20px;top:50%;
  transform:translateY(-50%);
  z-index:5;
  display:flex;flex-direction:column;
  align-items:flex-end;
  gap:8px;
}
/* Chip inline at top of products column (overrides absolute positioning) */
.nx-biz-products .nx-biz-chip{
  position:static;right:auto;top:auto;
  transform:none;
  margin-bottom:2px;
  align-self:flex-end;
}
/* Individual product card */
.nx-biz-prod-card{
  width:80px;
  background:rgba(1,9,32,.9);
  border:1px solid rgba(1,255,255,.2);
  border-radius:10px;overflow:hidden;
  box-shadow:0 8px 22px rgba(1,9,32,.52),0 0 14px rgba(10,100,227,.18);
  animation:nx-float 6.5s ease-in-out infinite;
  transition:border-color .25s;
}
.nx-biz-prod-card:nth-child(2){animation-delay:1.8s;animation-duration:7.9s}
.nx-biz-prod-card:nth-child(3){animation-delay:3.6s;animation-duration:6.2s}
.nx-biz-prod-card:hover{border-color:rgba(226,181,124,.38)}
/* Card image area */
.nx-biz-prod-card-img{
  width:100%;height:80px;
  display:block;
  object-position:center;
  /* transparent/isolated garments: contain so whole item shows */
  object-fit:contain;
  padding:5px;
  background:rgba(1,9,32,.45);
}
.nx-biz-prod-card-img--cover{
  object-fit:cover;padding:0;
}
/* Card label strip */
.nx-biz-prod-card-label{
  padding:4px 7px;
  font-size:7px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  color:#B3C8E2;line-height:1;
  border-top:1px solid rgba(1,255,255,.1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:rgba(1,9,32,.3);
}

/* ── Connector: adjusted for wider product cards ── */
.nx-biz-connect{
  right:100px;
  width:52px;
}

/* ── Reduced motion: stop card float + brand dot pulse ── */
@media(prefers-reduced-motion:reduce){
  .nx-biz-prod-card,
  .nx-biz-brand-ov-dot{animation:none}
  .nx-biz-products .nx-biz-chip{animation:none}
}

/* ── Responsive: tablet ── */
@media(max-width:1199px){
  .nx-biz-products{right:-14px}
  .nx-biz-connect{right:86px;width:42px}
  .nx-biz-prod-card{width:70px}
  .nx-biz-prod-card-img{height:70px}
}
@media(max-width:1023px){
  /* Stack layout: products move below devices row */
  .nx-biz-products{
    position:static;transform:none;
    flex-direction:row;flex-wrap:wrap;
    justify-content:center;
    width:100%;margin-top:16px;
    padding:0 8px;
  }
  .nx-biz-products .nx-biz-chip{
    width:100%;text-align:center;
    justify-content:center;margin-bottom:8px;
  }
  .nx-biz-connect{display:none}
  .nx-biz-prod-card{width:72px}
  .nx-biz-prod-card-img{height:72px}
  /* Wider devices to fit product row below */
  .nx-biz-devices{min-height:auto}
}
/* ── Responsive: mobile ── */
@media(max-width:767px){
  .nx-biz-products{gap:6px}
  .nx-biz-prod-card{width:64px}
  .nx-biz-prod-card-img{height:64px;padding:3px}
  .nx-biz-brand-ov{padding:3px 9px 3px 7px}
  .nx-biz-brand-ov-name{font-size:9px}
}

/* ==========================================================================
   NX-BIZ-PHONE-XL  —  Large phone replaces laptop in business showcase
   Visual language matches .phone / .phone--wardrobe-xl from the homepage.
   NIKONYX.mp4 plays natively inside the portrait phone screen.
   ========================================================================== */

/* Hide old laptop frame (replaced by phone-xl) */
.nx-biz-laptop{display:none !important}

/* Devices area: side-by-side flex row — phone | product cards */
.nx-biz-devices{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:28px;
  min-height:500px;
}

/* Products column: override absolute → normal flow as flex sibling */
.nx-biz-products{
  position:static;
  right:auto;top:auto;
  transform:none;
  align-items:flex-start;
  z-index:4;
}

/* Connect line: hide — not needed in side-by-side flex layout */
.nx-biz-connect{display:none !important}

/* ── Phone body ── */
.nx-biz-phone-xl{
  flex-shrink:0;
  position:relative;z-index:4;
  width:230px;
  border-radius:42px;
  padding:14px;
  /* Matches homepage phone gradient: #001138 → #001646 → #001138 */
  background:linear-gradient(140deg,#001138 0%,#001646 50%,#001138 100%);
  /* Inner ring shadow + outer cyan glow — same as .phone */
  border:2px solid rgba(1,255,255,.28);
  box-shadow:
    inset 0 0 0 2.5px rgba(10,100,227,.32),
    inset 0 0 0 4px #151b27,
    0 0 55px rgba(1,255,255,.09),
    0 28px 72px rgba(1,9,32,.62),
    0 0 110px rgba(10,100,227,.15);
  animation:nx-float 6.8s ease-in-out infinite;
}
/* Power button — right side (decorative, like homepage phones) */
.nx-biz-phone-xl::before{
  content:"";position:absolute;
  right:-3px;top:27%;
  width:2.5px;height:58px;
  border-radius:0 2.5px 2.5px 0;
  background:rgba(1,255,255,.2);
}
/* Volume buttons — left side */
.nx-biz-phone-xl::after{
  content:"";position:absolute;
  left:-3px;top:20%;
  width:2.5px;height:40px;
  border-radius:2.5px 0 0 2.5px;
  background:rgba(1,255,255,.16);
}

/* ── Notch / Dynamic Island ── */
.nx-biz-phone-xl-notch{
  position:absolute;top:14px;left:50%;
  transform:translateX(-50%);
  width:58px;height:13px;
  background:#001138;
  border-radius:0 0 9px 9px;
  z-index:6;
}

/* ── Phone screen bezel ── */
.nx-biz-phone-xl-screen{
  width:100%;
  /* 9:19.5 phone aspect ratio */
  aspect-ratio:9/19.5;
  border-radius:28px;
  overflow:hidden;
  background:#001138;
  position:relative;
}

/* ── NIKONYX.mp4 — fills the portrait screen natively, no letterbox needed ── */
.nx-biz-phone-xl-video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center top;
  display:block;
}

/* ── NIKONYX brand header — covers "FITS" at the top of the app video ── */
.nx-biz-phone-xl-header{
  position:absolute;
  top:0;left:0;right:0;
  z-index:7;pointer-events:none;
  /* gradient fade so bottom of overlay blends into video */
  background:linear-gradient(180deg,
    rgba(1,9,32,.93) 0%,
    rgba(1,9,32,.70) 52%,
    transparent 100%
  );
  padding:20px 14px 24px;
  display:flex;align-items:center;
  justify-content:center;gap:8px;
}
/* "NIKONYX" wordmark in Golden Beige — same as other phone app headers */
.nx-biz-phone-xl-brand{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:700;font-size:12px;
  letter-spacing:.28em;text-transform:uppercase;
  color:#B3C8E2;line-height:1;
}
/* Pulsing cyan dot flanking the name */
.nx-biz-phone-xl-dot{
  width:5px;height:5px;border-radius:50%;flex-shrink:0;
  background:#E1ECF7;
  box-shadow:0 0 7px rgba(1,255,255,.9);
  animation:nx-tech-pulse 2.2s ease-in-out infinite;
}

/* ── Responsive: 1200px ── */
@media(max-width:1199px){
  .nx-biz-phone-xl{width:206px;border-radius:38px}
  .nx-biz-devices{gap:20px}
}

/* ── Responsive: tablet ── */
@media(max-width:1023px){
  .nx-biz-devices{
    flex-direction:column;
    gap:16px;min-height:auto;
  }
  .nx-biz-products{
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    align-items:flex-start;
    width:100%;
    margin-top:0;padding:0 8px;
    gap:8px;
  }
  .nx-biz-products .nx-biz-chip{
    width:100%;justify-content:center;
    text-align:center;margin-bottom:4px;
  }
}

/* ── Responsive: mobile ── */
@media(max-width:767px){
  .nx-biz-phone-xl{width:186px;border-radius:34px;padding:12px}
  .nx-biz-phone-xl-notch{width:50px;height:11px;top:12px}
  .nx-biz-phone-xl-screen{border-radius:24px}
  .nx-biz-phone-xl-header{padding:16px 12px 20px}
  .nx-biz-phone-xl-brand{font-size:10.5px}
}

/* ── Reduced motion ── */
@media(prefers-reduced-motion:reduce){
  .nx-biz-phone-xl{animation:none}
  .nx-biz-phone-xl-dot{animation:none}
}

/* ==========================================================================
   PAGE PHONE SHOWCASE — About / Contact (exact .nx-biz-phone-xl format)
   Same smartphone frame as For Business; screen UI matches page purpose.
   ========================================================================== */
.nx-page-phone-section{
  padding:56px 0 40px;
  background:#fff;
}
.nx-page-phone-panel{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(28px,5vw,64px);
  flex-wrap:wrap;
  padding:36px 28px 40px;
  border-radius:24px;
  background:radial-gradient(120% 90% at 50% 0%,#001646 0%,#001138 48%,#001138 100%);
  border:1px solid rgba(1,255,255,.12);
  box-shadow:0 24px 60px rgba(1,9,32,.28);
  position:relative;
  overflow:hidden;
}
.nx-page-phone-panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 50% at 50% -10%,rgba(10,100,227,.35),transparent 60%);
}
.nx-page-phone-copy{
  flex:1 1 260px;max-width:360px;position:relative;z-index:2;color:#fff;
}
.nx-page-phone-copy .eyebrow{
  display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:800;color:#B3C8E2;margin-bottom:10px;
}
.nx-page-phone-copy h3{
  font-family:"Playfair Display",Cormorant Garamond,Georgia,serif;
  font-size:clamp(22px,2.8vw,32px);font-weight:700;
  margin:0 0 12px;line-height:1.15;color:#fff;
}
.nx-page-phone-copy p{
  margin:0;font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.68);
}
.nx-page-phone-panel .nx-biz-devices{
  flex:0 1 auto;min-height:0;position:relative;z-index:2;
}

/* In-phone UI layers (About / Contact) */
.nx-page-phone-body{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  padding:48px 10px 12px;
  z-index:4;
  background:
    linear-gradient(180deg,rgba(1,9,32,.35) 0%,transparent 18%),
    #001138;
}
.nx-page-phone-body--overlay{
  background:linear-gradient(180deg,rgba(1,9,32,.2) 0%,transparent 22%,transparent 58%,rgba(1,9,32,.75) 100%);
  pointer-events:none;
}
.nx-page-phone-body--chat{
  background:
    linear-gradient(180deg,rgba(1,9,32,.55) 0%,transparent 14%),
    linear-gradient(175deg,#001646 0%,#001138 55%,#001018 100%);
}
.nx-page-phone-hero{
  flex:1;min-height:0;border-radius:14px;overflow:hidden;
  position:relative;background:#0a1428;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.nx-page-phone-hero img,
.nx-page-phone-hero video{
  width:100%;height:100%;object-fit:cover;object-position:center 18%;display:block;
}
.nx-page-phone-badge{
  position:absolute;left:8px;top:42px;z-index:2;
  background:rgba(255,255,255,.94);color:#001138;
  font-size:8px;font-weight:700;letter-spacing:.04em;
  padding:3px 7px;border-radius:6px;
  font-family:Cormorant Garamond,Georgia,serif;
}
.nx-page-phone-body--chat .nx-page-phone-badge{
  position:relative;left:auto;top:auto;align-self:flex-start;margin-bottom:4px;
}
.nx-page-phone-caption{
  margin-top:8px;text-align:center;
  font-size:9px;font-weight:600;color:rgba(255,255,255,.78);
  letter-spacing:.02em;
}
.nx-page-phone-actions{
  display:grid;grid-template-columns:repeat(3,1fr) 1.15fr;
  gap:4px;margin-top:10px;
}
.nx-page-phone-act{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;padding:6px 2px 5px;
  text-align:center;color:rgba(255,255,255,.82);
  font-size:6.5px;font-weight:600;line-height:1.2;
}
.nx-page-phone-act strong{display:block;font-size:11px;margin-bottom:2px;color:#E1ECF7}
.nx-page-phone-act--next{
  background:linear-gradient(160deg,#0C5BE4,#001646);
  border-color:rgba(1,255,255,.25);
  color:#fff;font-size:8px;font-weight:800;
  display:grid;place-items:center;
}

/* Contact chat UI inside phone */
.nx-page-chat{
  flex:1;min-height:0;display:flex;flex-direction:column;gap:8px;
  padding:4px 2px 0;
}
.nx-page-chat-bubble{
  max-width:92%;padding:8px 10px;border-radius:12px;
  font-size:8.5px;line-height:1.4;color:#fff;
}
.nx-page-chat-bubble--bot{
  align-self:flex-start;
  background:rgba(10,100,227,.35);
  border:1px solid rgba(1,255,255,.2);
}
.nx-page-chat-bubble--user{
  align-self:flex-end;
  background:rgba(226,181,124,.22);
  border:1px solid rgba(226,181,124,.35);
  color:#fff;
}
.nx-page-chat-input{
  margin-top:auto;
  display:flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;padding:7px 10px;
  font-size:8px;color:rgba(255,255,255,.55);
}
.nx-page-chat-send{
  margin-left:auto;width:18px;height:18px;border-radius:50%;
  background:#B3C8E2;color:#001138;
  display:grid;place-items:center;font-size:9px;font-weight:800;
}

@media(max-width:780px){
  .nx-page-phone-panel{padding:28px 18px 32px;gap:24px}
  .nx-page-phone-copy{text-align:center;max-width:100%}
}
@media(prefers-reduced-motion:reduce){
  .nx-page-phone-panel .nx-biz-phone-xl{animation:none}
}

/* ══════════════════════════════════════════════════════════════════
   Contact page phone — onboarding demo loop
   Download the app → Sign up → Log in → Ask Nikonyx (support chat).
   4 crossfading scenes, pure CSS/HTML (no external video asset).
   ══════════════════════════════════════════════════════════════════ */
.nx-onb-scene{
  position:absolute;inset:0;
  padding:46px 14px 14px;
  display:flex;flex-direction:column;
  opacity:0;pointer-events:none;
  background:linear-gradient(175deg,#001646 0%,#001138 55%,#001018 100%);
  animation-duration:12s;
  animation-iteration-count:infinite;
  animation-timing-function:ease-in-out;
}
.nx-onb-scene--download{
  align-items:center;justify-content:center;text-align:center;gap:12px;
  animation-name:nx-onb-download;
}
.nx-onb-scene--signup{animation-name:nx-onb-signup}
.nx-onb-scene--login{animation-name:nx-onb-login}
.nx-onb-scene--chat{animation-name:nx-onb-chat}

.nx-onb-app-icon{
  width:56px;height:56px;border-radius:16px;
  background:linear-gradient(150deg,#0C5BE4,#001138);
  border:1px solid rgba(1,255,255,.35);
  display:grid;place-items:center;
  font-family:"Playfair Display",Georgia,serif;font-weight:800;font-size:23px;color:#B3C8E2;
  box-shadow:0 10px 26px rgba(1,9,32,.5),0 0 24px rgba(1,255,255,.18);
}
.nx-onb-title{font-size:12.5px;font-weight:700;color:#fff;font-family:"Playfair Display",Georgia,serif}
.nx-onb-sub{font-size:8.5px;color:rgba(255,255,255,.6)}
.nx-onb-progress{
  width:78%;height:6px;border-radius:6px;
  background:rgba(255,255,255,.12);overflow:hidden;
}
.nx-onb-progress span{
  display:block;height:100%;width:6%;
  background:linear-gradient(90deg,#E1ECF7,#B3C8E2);
  border-radius:6px;
  animation:nx-onb-progress-fill 12s ease-in-out infinite;
}
.nx-onb-btn{
  padding:7px 16px;border-radius:999px;
  font-size:8.5px;font-weight:700;letter-spacing:.02em;
}
.nx-onb-btn--store{
  background:rgba(255,255,255,.08);border:1px solid rgba(1,255,255,.28);color:#E1ECF7;
}
.nx-onb-btn--gold{
  background:linear-gradient(160deg,#B3C8E2,#002467);
  color:#001138;text-align:center;
}
.nx-onb-badge{
  align-self:flex-start;
  background:rgba(255,255,255,.94);color:#001138;
  font-size:8px;font-weight:700;letter-spacing:.04em;
  padding:3px 7px;border-radius:6px;
  font-family:"Cormorant Garamond",Georgia,serif;
  margin-bottom:10px;
}
.nx-onb-field{
  display:flex;flex-direction:column;gap:2px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:9px;padding:6px 10px;margin-bottom:7px;
}
.nx-onb-field span{font-size:6.5px;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.5)}
.nx-onb-field strong{font-size:9.5px;font-weight:600;color:#fff}
.nx-onb-alt{margin-top:8px;text-align:center;font-size:7.5px;color:rgba(255,255,255,.55)}
.nx-onb-alt b{color:#E1ECF7;font-weight:700}
.nx-onb-check{margin-top:auto;text-align:center;font-size:8.5px;font-weight:700;color:#E1ECF7}

@keyframes nx-onb-download{
  0%{opacity:1}
  21%{opacity:1}
  25%{opacity:0}
  100%{opacity:0}
}
@keyframes nx-onb-signup{
  0%{opacity:0}
  25%{opacity:0}
  29%{opacity:1}
  46%{opacity:1}
  50%{opacity:0}
  100%{opacity:0}
}
@keyframes nx-onb-login{
  0%{opacity:0}
  50%{opacity:0}
  54%{opacity:1}
  71%{opacity:1}
  75%{opacity:0}
  100%{opacity:0}
}
@keyframes nx-onb-chat{
  0%{opacity:0}
  75%{opacity:0}
  79%{opacity:1}
  96%{opacity:1}
  100%{opacity:0}
}
@keyframes nx-onb-progress-fill{
  0%{width:6%}
  18%{width:96%}
  25%{width:96%}
  26%,100%{width:6%}
}
@media(prefers-reduced-motion:reduce){
  .nx-onb-scene{animation:none;opacity:0}
  .nx-onb-scene--download{opacity:1}
  .nx-onb-progress span{animation:none;width:55%}
}

/* ── Targeted "Fits" → "Nikonyx" cover overlay ──
   Positioned at top-left of the app content area (below the header gradient).
   White background matches the app's own UI background — erases "Fits".
   "Nikonyx" text matches the app's page-title weight / dark colour.         */
.nx-biz-phone-xl-title-ov{
  position:absolute;
  /* moved up to sit ON TOP of the "Fits" title row */
  top:9.5%;
  left:5px;
  z-index:8;
  pointer-events:none;
  /* off-white matching the app's white UI panel */
  background:#f6f8fb;
  border-radius:2px;
  /* wide enough to cover "Fits" in full at any phone size */
  padding:3px 10px 3px 5px;
  /* don't bleed into the right-side menu icon area */
  max-width:52%;
}
.nx-biz-phone-xl-title-text{
  display:block;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:700;
  /* matches the app page-title rendered at phone scale */
  font-size:10.5px;
  letter-spacing:.03em;
  color:#0d1420;
  line-height:1.2;
  white-space:nowrap;
}
@media(max-width:767px){
  .nx-biz-phone-xl-title-ov{top:9.5%;left:4px}
  .nx-biz-phone-xl-title-text{font-size:9px}
}

/* ==========================================================================
   HOMEPAGE LEFT WARDROBE PHONE  —  nx-wardrobe-phone
   Videos/Nikonyx-Wardrobe.mp4  (800×800 square) in portrait frame.
   Phone enlarged ~19 % from base .phone.small (128×286 → 152×340).
   Nikonyx logo header matches other app phone screens.
   Square video is object-fit:contain — no stretch, no crop.
   Unused portrait space filled with dark digital background.
   ========================================================================== */

/* ── Larger phone shell ── */
.nx-wardrobe-phone{
  /* ~19 % larger than .phone.small (128 × 286) */
  width:152px;
  height:340px;
  /* premium digital aura — cyan edge glow + deep shadow */
  box-shadow:
    0 0 30px rgba(1,255,255,.08),
    0 26px 48px rgba(3,10,28,.48),
    0 0 65px rgba(10,100,227,.11);
}

/* ── Screen: dark digital bg, flex column layout ── */
.nx-wardrobe-phone .screen{
  background:#001138;
  padding:0;
  display:flex;
  flex-direction:column;
  height:100%;
}

/* ── Logo header — matches .phone-app-header pattern used on other phones ── */
.nx-wardrobe-phone .phone-app-header{
  flex-shrink:0;
  /* 22px top = clears the ::before notch pill at 8px + space */
  padding:22px 0 4px;
  background:transparent;
  position:relative;z-index:4;
}

/* ── Video wrapper: occupies all remaining height, centres square video ── */
.nx-wardrobe-vid-wrap{
  flex:1;
  min-height:0;           /* allow flex child to shrink below content size */
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  position:relative;
  /* Digital background fills letterbox areas beside square video */
  background:
    radial-gradient(ellipse 90% 65% at 50% 42%,rgba(10,100,227,.16) 0%,transparent 68%),
    radial-gradient(ellipse 60% 40% at 50% 80%,rgba(1,255,255,.06) 0%,transparent 55%),
    linear-gradient(175deg,#001646 0%,#001138 55%,#001824 100%);
}
/* Subtle animated horizontal data pulse line */
.nx-wardrobe-vid-wrap::after{
  content:"";
  position:absolute;
  left:-100%;width:50%;height:1px;
  top:52%;
  background:linear-gradient(90deg,transparent,rgba(1,255,255,.28),transparent);
  animation:nx-fx-sweep 4.5s ease-in-out infinite;
  pointer-events:none;
  z-index:2;
}

/* ── Square video: contained, no distortion ── */
.nx-wardrobe-vid{
  display:block;
  /* match source 1:1 ratio so object-fit:contain keeps it square */
  width:100%;
  aspect-ratio:1 / 1;
  object-fit:contain;
  object-position:center;
  max-height:100%;
  position:relative;z-index:1;
}

/* ── iOS home-indicator at bottom ── */
.nx-wardrobe-home-bar{
  flex-shrink:0;
  height:26px;
  background:rgba(1,9,32,.75);
  display:flex;
  align-items:center;
  justify-content:center;
}
.nx-wardrobe-home-bar::after{
  content:"";
  display:block;
  width:38px;height:3px;
  border-radius:2px;
  background:rgba(255,255,255,.25);
}

/* ── Tablet (1180px) ── */
@media(max-width:1180px){
  .nx-wardrobe-phone{width:138px;height:309px}
}
/* ── Mobile ── */
@media(max-width:767px){
  .nx-wardrobe-phone{width:120px;height:269px}
  .nx-wardrobe-vid-wrap::after{display:none}
}
/* ── Reduced motion: stop data-pulse line ── */
@media(prefers-reduced-motion:reduce){
  .nx-wardrobe-vid-wrap::after{animation:none;display:none}
}

/* ══════════════════════════════════════════════════════════════════
   FEATURES PAGE — Try-On Guided Stage  (nx-tg-*)
   ══════════════════════════════════════════════════════════════════ */

/* Stage container: fills ar-fit-screen fully (no topbar above it) */
.nx-tg-stage{
  position:relative;
  flex:1;min-height:0;
  overflow:hidden;
  background:#001138;
  display:flex;flex-direction:column;
}
/* Try-On guide: strip glass card — show clean dark phone only */
.tryon-demo.ar-fit-demo{
  background:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
}
.tryon-demo .card-tag,
.tryon-demo h2.serif,
.tryon-demo>p{
  display:none !important;
}
/* Try-On guide phone — narrower than wardrobe demo phone */
.tryon-demo .ar-fit-phone{
  --nx-phone-w:320px;
}
.nx-tg-layer{
  position:absolute;inset:0;
  opacity:0;
  pointer-events:none;
  transition:opacity .45s ease;
}
.nx-tg-layer.nx-tg-on{
  opacity:1;
  pointer-events:auto;
}

/* ── Title card ──────────────────────────────────────────────────── */
.nx-tg-title{
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(175deg,#001138 0%,#001646 55%,#001138 100%);
  text-align:center;padding:16px 12px;
}
.nx-tg-title-inner{position:relative;z-index:1;}
.nx-tg-title-heading{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:700;font-size:14.5px;
  color:#B3C8E2;letter-spacing:.06em;line-height:1.3;
  margin-bottom:8px;
}
.nx-tg-title-sub{
  font-size:8.5px;color:rgba(255,255,255,.72);
  letter-spacing:.14em;text-transform:uppercase;line-height:1.4;
}
/* Sweep on title card (reuses existing keyframe nx-fx-sweep) */
.nx-tg-sweep{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.nx-tg-sweep::after{
  content:"";
  position:absolute;top:0;left:-120%;
  width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(10,100,227,.07),rgba(1,255,255,.05),transparent);
  animation:nx-fx-sweep 2.8s ease-in-out infinite;
}

/* ── Screenshot layer ────────────────────────────────────────────── */
.nx-tg-screenshot{background:#001138;}
/* Background-image fill: always shows 100% of the screenshot, no cropping */
.nx-tg-img-bg{
  position:absolute;inset:0;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center top;
  background-color:#001138;
}

/* Attractive per-step try-on mockups */
.nx-tg-panels{position:absolute;inset:0;}
.nx-tg-panel{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  opacity:0;pointer-events:none;
  transition:opacity .4s ease;
  background:#001138;color:#fff;
  overflow:hidden;
}
.nx-tg-panel--on{opacity:1;pointer-events:auto;z-index:1;}
.nx-tg-topbar{
  flex:0 0 28px;display:flex;align-items:center;justify-content:space-between;
  padding:0 10px;background:#001138;border-bottom:1px solid rgba(177,200,226,.12);
}
.nx-tg-logo{
  width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#E1ECF7,#0C5BE4 55%,#001138);
  box-shadow:0 0 0 1px rgba(177,200,226,.35);
}
.nx-tg-top-icos{
  width:42px;height:10px;border-radius:6px;
  background:linear-gradient(90deg,rgba(255,255,255,.2),rgba(255,255,255,.08));
}
.nx-tg-room{
  flex:1;min-height:0;position:relative;
  display:flex;flex-direction:column;align-items:center;
  padding:8px 10px 10px;gap:6px;
}
.nx-tg-room--dim .nx-tg-person{opacity:.55;filter:saturate(.85);}
.nx-tg-room-label{
  font-size:7px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(177,200,226,.85);font-weight:700;
}
.nx-tg-person-wrap{
  position:relative;flex:1;min-height:0;width:100%;
  border-radius:12px;overflow:hidden;
  background:linear-gradient(180deg,#eef2f8,#e2e8f2);
  box-shadow:0 8px 20px rgba(0,0,0,.28);
}
.nx-tg-person-wrap--zoom .nx-tg-person{transform:scale(1.12);transform-origin:center 28%;}
.nx-tg-person{
  width:100%;height:100%;object-fit:cover;object-position:center 18%;
  display:block;
}
.nx-tg-person--sm{
  width:72%;height:38%;margin:4px auto 0;border-radius:10px;
  object-fit:cover;object-position:center 20%;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
}
.nx-tg-bg-chip,.nx-tg-look-badge{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:8px;z-index:2;
  padding:4px 9px;border-radius:999px;
  font-size:7.5px;font-weight:700;letter-spacing:.04em;white-space:nowrap;
  background:rgba(0,17,56,.82);color:#E1ECF7;
  border:1px solid rgba(177,200,226,.35);
}
.nx-tg-look-badge{
  background:linear-gradient(180deg,#0C5BE4,#0a4fc7);
  border-color:rgba(225,236,247,.35);color:#fff;
}
.nx-tg-cta{
  border:none;border-radius:999px;cursor:default;
  padding:7px 14px;min-width:68%;
  background:linear-gradient(180deg,#0C5BE4,#0a4fc7);
  color:#fff;font-size:8.5px;font-weight:700;letter-spacing:.03em;
  box-shadow:0 4px 12px rgba(12,91,228,.4);
}
.nx-tg-cta--accent{background:linear-gradient(180deg,#1a6ef0,#0C5BE4);}
.nx-tg-sheet{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  background:#001646;border-radius:14px 14px 0 0;
  padding:10px 10px 12px;
  box-shadow:0 -8px 24px rgba(0,0,0,.35);
}
.nx-tg-sheet-title{
  font-size:10px;font-weight:700;color:#E1ECF7;margin-bottom:8px;text-align:center;
}
.nx-tg-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:8px;
}
.nx-tg-item{
  position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;
  background:#0a1f4a;border:1.5px solid transparent;
}
.nx-tg-item img{width:100%;height:100%;object-fit:cover;display:block;}
.nx-tg-item--on{border-color:#0C5BE4;box-shadow:0 0 0 1px rgba(12,91,228,.45);}
.nx-tg-item--on i{
  position:absolute;top:3px;right:3px;width:12px;height:12px;border-radius:50%;
  background:#0C5BE4;color:#fff;font-size:8px;font-style:normal;
  display:grid;place-items:center;line-height:1;
}
.nx-tg-process{
  position:absolute;inset:auto 10% 18%;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:10px 12px;border-radius:12px;
  background:rgba(0,17,56,.88);border:1px solid rgba(177,200,226,.28);
  text-align:center;
}
.nx-tg-process strong{font-size:9px;color:#fff;}
.nx-tg-process small{font-size:7px;color:rgba(225,236,247,.75);}
.nx-tg-spin{
  width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(225,236,247,.25);border-top-color:#0C5BE4;
  animation:nx-tg-spin 0.8s linear infinite;margin-bottom:2px;
}
@keyframes nx-tg-spin{to{transform:rotate(360deg)}}
.nx-tg-side-picks{
  position:absolute;right:8px;top:36px;z-index:2;
  display:flex;flex-direction:column;gap:5px;
}
.nx-tg-side-picks img{
  width:34px;height:34px;border-radius:8px;object-fit:cover;
  border:1px solid rgba(225,236,247,.35);
  box-shadow:0 3px 10px rgba(0,0,0,.3);
}
.nx-tg-rail{
  position:absolute;left:6px;top:30px;z-index:2;
  display:flex;flex-direction:column;gap:4px;
}
.nx-tg-rail-btn{
  font-size:6.5px;font-weight:700;letter-spacing:.04em;
  padding:4px 6px;border-radius:6px;
  background:rgba(0,17,56,.7);color:rgba(255,255,255,.75);
  border:1px solid rgba(177,200,226,.2);
}
.nx-tg-rail-btn--on{background:#0C5BE4;color:#fff;border-color:transparent;}
.nx-tg-zoom-bar{
  display:flex;align-items:center;gap:6px;width:78%;
  padding:5px 8px;border-radius:999px;
  background:rgba(0,17,56,.88);border:1px solid rgba(177,200,226,.25);
}
.nx-tg-zoom-btn{
  width:18px;height:18px;border:none;border-radius:50%;cursor:default;
  background:#0C5BE4;color:#fff;font-size:12px;line-height:1;font-weight:700;
}
.nx-tg-zoom-track{
  flex:1;height:4px;border-radius:999px;background:rgba(255,255,255,.18);overflow:hidden;
}
.nx-tg-zoom-track i{
  display:block;height:100%;border-radius:inherit;
  background:linear-gradient(90deg,#E1ECF7,#0C5BE4);
}
@media(prefers-reduced-motion:reduce){
  .nx-tg-spin{animation:none;}
  .nx-tg-panel{transition:none;}
}

/* Pulsing highlight box (reuses existing keyframe nx-tech-pulse) */
.nx-tg-highlight{
  position:absolute;
  border:2px solid rgba(1,255,255,.85);
  border-radius:8px;
  box-shadow:0 0 0 3px rgba(1,255,255,.15),0 0 14px rgba(1,255,255,.4);
  animation:nx-tech-pulse 1.4s ease-in-out infinite;
  pointer-events:none;
}

/* ── Video layer ─────────────────────────────────────────────────── */
.nx-tg-video{background:#001138;}
#nxTryonVid{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center top;
  display:block;
}

/* ── Caption bar ─────────────────────────────────────────────────── */
.nx-tg-caption{
  position:absolute;
  bottom:0;left:0;right:0;z-index:4;
  background:linear-gradient(0deg,rgba(1,9,32,.92) 0%,rgba(1,9,32,.72) 65%,transparent 100%);
  padding:22px 10px 8px;
  pointer-events:none;
  display:flex;flex-direction:column;gap:2px;
  transition:opacity .3s ease;
}
.nx-tg-cap-num{
  font-size:7px;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;
  color:#B3C8E2;margin-bottom:1px;
}
.nx-tg-cap-title{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:700;font-size:12.5px;
  color:#fff;letter-spacing:.04em;line-height:1.2;
}
.nx-tg-cap-sub{
  font-size:7.5px;color:rgba(255,255,255,.7);line-height:1.3;
}

/* ── Progress dots ───────────────────────────────────────────────── */
.nx-tg-dots{
  position:absolute;top:6px;right:8px;z-index:5;
  display:flex;gap:3px;align-items:center;
  pointer-events:none;
}
.nx-tg-dot{
  width:5px;height:5px;border-radius:50%;
  background:rgba(255,255,255,.28);
  transition:background .35s,width .35s;
}
.nx-tg-dot.nx-tg-dot--on{background:#E1ECF7;}
.nx-tg-dot-vid{border-radius:3px;width:10px;}
.nx-tg-dot-vid.nx-tg-dot--on{background:#0C5BE4;width:16px;}

/* ── Reduced-motion play button ──────────────────────────────────── */
.nx-tg-play-btn{
  position:absolute;bottom:14px;left:50%;
  transform:translateX(-50%);z-index:6;
  background:rgba(10,100,227,.85);color:#fff;
  border:none;border-radius:20px;
  padding:7px 16px;font-size:9px;font-weight:700;
  letter-spacing:.1em;cursor:pointer;white-space:nowrap;
}
.nx-tg-play-btn:hover{background:#0C5BE4;}

/* ── Reduced motion overrides ────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .nx-tg-sweep::after{animation:none;}
  .nx-tg-highlight{animation:none;}
  .nx-tg-layer{transition:none;}
  .nx-tg-caption{transition:none;}
}

/* ════════════════════════════════════════════════════════════════════
   HERO ENTRANCE ANIMATIONS — CSS-only, zero CDN dependency
   Works on every browser, every load, with or without JavaScript.
   ════════════════════════════════════════════════════════════════════ */

/* ── Keyframes ── */
@keyframes nx-drop-bounce{
  0%   {opacity:0;transform:translateY(-28px) scale(.93);}
  65%  {opacity:1;transform:translateY(6px) scale(1.05);}
  82%  {transform:translateY(-3px) scale(.985);}
  100% {opacity:1;transform:translateY(0) scale(1);}
}
@keyframes nx-slide-up{
  from{opacity:0;transform:translateY(22px);}
  to  {opacity:1;transform:translateY(0);}
}
@keyframes nx-gold-sweep{
  0%,100%{background-position:0% center;}
  50%    {background-position:300% center;}
}
@keyframes nx-orb-glow{
  0%,100%{filter:drop-shadow(0 0 22px rgba(47,139,255,.65));}
  50%    {filter:drop-shadow(0 0 55px rgba(47,139,255,.95))
                 drop-shadow(0 0 90px rgba(226,181,124,.38));}
}
@keyframes nx-emblem-float{
  0%,100%{transform:translateX(-50%) translateY(0);}
  50%    {transform:translateX(-50%) translateY(-9px);}
}
@keyframes nx-phone-float{
  0%,100%{transform:translateY(0);}
  50%    {transform:translateY(-7px);}
}

/* ── Per-word bounce wrapper ── */
.nx-w{
  display:inline-block;
  opacity:0;
  animation:nx-drop-bounce .72s cubic-bezier(.34,1.56,.64,1) forwards var(--nx-d, 0s);
}

/* ── Hero element entrances ── */
.hero-text .badge{
  opacity:0;
  animation:nx-slide-up .5s ease-out forwards .05s;
}
.hero-text .sub{
  opacity:0;
  animation:nx-drop-bounce .72s cubic-bezier(.34,1.56,.64,1) forwards .58s;
}
.hero-text .lead{
  opacity:0;
  animation:nx-slide-up .55s ease-out forwards .76s;
}
.hero-text .benefits{
  opacity:0;
  animation:nx-slide-up .55s ease-out forwards .92s;
}
.hero-text .hero-actions{
  opacity:0;
  animation:nx-slide-up .55s ease-out forwards 1.08s;
}

/* ── Gold word shimmer (animates after bounce-in completes) ── */
.nx-w.gold{
  background:linear-gradient(120deg,
    var(--gold2) 0%, #E1ECF7 38%, var(--gold2) 56%, #e8c055 78%, var(--gold2) 100%);
  background-size:300% auto;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:
    nx-drop-bounce .72s cubic-bezier(.34,1.56,.64,1) forwards var(--nx-d, 0s),
    nx-gold-sweep 5s linear infinite 1.8s;
}

/* ── Logo emblem: gentle float ── */
.emblem{
  animation:nx-emblem-float 4.2s ease-in-out infinite;
}

/* ── Logo orb in hero: blue + gold glow pulse ── */
.orb{
  animation:nx-orb-glow 3.6s ease-in-out infinite;
}

/* ── Center phone: subtle float (depth effect) ── */
.phones .phone.center{
  animation:nx-phone-float 4.8s ease-in-out infinite .6s;
}

/* ── Problem stat number: pop-in on counter completion ── */
@keyframes nx-stat-pop{
  0%  {transform:scale(1);}
  50% {transform:scale(1.08);}
  100%{transform:scale(1);}
}
.problem-stat-number.nx-pop{
  animation:nx-stat-pop .35s cubic-bezier(.34,1.56,.64,1);
}

/* ── CTA button: gentle pulse ── */
@keyframes nx-cta-pulse{
  0%,100%{box-shadow:0 12px 28px rgba(215,155,69,.4);}
  50%    {box-shadow:0 16px 40px rgba(215,155,69,.7),0 0 60px rgba(226,181,124,.3);}
}
.cta button,
.cta .gold-cta{
  animation:nx-cta-pulse 2.8s ease-in-out infinite;
}

/* ── Reduced motion: disable everything ── */
@media(prefers-reduced-motion:reduce){
  .nx-tg-sweep::after{animation:none;}
  .nx-tg-highlight{animation:none;}
  .nx-tg-layer{transition:none;}
  .nx-tg-caption{transition:none;}
  .nx-w,
  .hero-text .badge,.hero-text .sub,.hero-text .lead,
  .hero-text .benefits,.hero-text .hero-actions{
    opacity:1!important;animation:none!important;transform:none!important;
  }
  .nx-w.gold{
    background:none!important;
    -webkit-text-fill-color:var(--gold2)!important;
    color:var(--gold2)!important;
    animation:none!important;
  }
  .emblem,.orb,.phones .phone.center,.cta button,.cta .gold-cta{
    animation:none!important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   TASK B — GSAP SCROLL SYSTEM  ·  Problem section + motion helpers
   ════════════════════════════════════════════════════════════════════ */

/* ── "The Problem" section — compact ── */
.section-problem{
  background:var(--navy);
  position:relative;
  overflow:hidden;
  padding:clamp(40px,6vw,64px) 24px;
  text-align:center;
}
.section-problem::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 0%,
    rgba(10,100,227,.18) 0%,transparent 70%);
  pointer-events:none;
}
.section-problem::after{
  content:'';
  position:absolute;
  left:-5%;width:110%;height:2px;
  top:0;
  background:linear-gradient(90deg,
    transparent 0%,rgba(226,181,124,.4) 20%,
    rgba(226,181,124,.9) 50%,rgba(226,181,124,.4) 80%,transparent 100%);
  pointer-events:none;
}
.problem-inner{
  position:relative;z-index:1;
  max-width:560px;margin:0 auto;
}
.problem-heading{
  font-size:clamp(10px,.95vw,12px);
  color:var(--gold);
  letter-spacing:2.5px;
  text-transform:uppercase;
  font-weight:600;
  margin-bottom:clamp(10px,1.5vw,16px);
  opacity:.9;
}
.problem-stat{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:clamp(6px,1vw,12px);
  margin-bottom:clamp(8px,1.2vw,12px);
  line-height:1;
}
.problem-stat-number{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(56px,8vw,88px);
  font-weight:700;
  color:#ffffff;
  display:block;
  line-height:.92;
  text-shadow:0 0 40px rgba(226,181,124,.22),
              0 4px 28px rgba(10,100,227,.25);
}
.problem-stat-unit{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(18px,2.8vw,28px);
  color:rgba(255,255,255,.45);
  font-weight:500;
  align-self:flex-end;
  padding-bottom:.15em;
}
.problem-sub{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(18px,2.6vw,28px);
  font-weight:600;
  color:var(--gold);
  margin-bottom:clamp(8px,1.4vw,14px);
}
.problem-detail{
  font-size:clamp(13px,1.3vw,15px);
  color:rgba(255,255,255,.6);
  line-height:1.55;
  margin-bottom:clamp(14px,2vw,22px);
}
.problem-cta{
  display:inline-block;
  color:var(--gold);
  font-size:clamp(12px,1.2vw,14px);
  font-weight:600;
  letter-spacing:1px;
  cursor:pointer;
  border-bottom:1px solid rgba(226,181,124,.45);
  padding-bottom:3px;
  transition:border-color .2s,color .2s;
  text-decoration:none;
}
.problem-cta:hover{
  color:#fff;
  border-bottom-color:rgba(255,255,255,.6);
}

/* ── GSAP init helpers: elements that entrance-animate start invisible
      so they don't flash before GSAP sets the from-state.
      (JS sets opacity/transform via GSAP; this is only a soft fallback
      for no-JS environments — keep display intact) ── */
.nx-gsap-hero-item{will-change:opacity,transform;}

/* ── Responsive ── */
@media(max-width:680px){
  .section-problem{padding:36px 20px;}
  .problem-stat-number{font-size:56px;}
  .problem-stat-unit{font-size:18px;}
  .problem-sub{font-size:20px;}
}

/* ── Reduced motion: skip all GSAP entrance animations ── */
@media(prefers-reduced-motion:reduce){
  .section-problem *{animation:none!important;transition:none!important;}
}

/* ══════════════════════════════════════════════════════════════════
   Digital Wardrobe phone (Features page, "01 · Digital Wardrobe")
   — clean neutral panel, realistic phone form, bigger legible items.
   Every rule below is scoped to .media-panel--wardrobe / .wardrobe-app-*
   which exist ONLY on this one instance, so no other page or section
   is affected.
   ══════════════════════════════════════════════════════════════════ */

/* Panel — soft neutral backdrop (no blue/cyan tech glow), sized to
   fully fit the phone without cropping it */
.media-panel.media-panel--wardrobe{
  min-height:960px;
  padding:36px 20px;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(226,181,124,.10) 0%, transparent 62%),
    linear-gradient(165deg,#f8f9fb 0%,#eef1f6 100%);
  border:1px solid rgba(1,9,32,.07);
  box-shadow:0 26px 60px rgba(1,9,32,.12), inset 0 1px 0 rgba(255,255,255,.7);
}

/* Phone — realistic frame: dynamic-island notch, softer bezel radius,
   premium rim light instead of a flat rounded box */
.wardrobe-app-demo.ar-fit-phone{position:relative}
.wardrobe-app-demo .ar-fit-bezel{
  position:relative;
  border-radius:40px;
  padding:12px;
  box-shadow:
    0 32px 70px rgba(1,9,32,.40),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 0 0 2px rgba(255,255,255,.05);
}
.wardrobe-app-demo .ar-fit-bezel::before{
  content:"";
  position:absolute;
  top:14px;left:50%;transform:translateX(-50%);
  width:86px;height:22px;border-radius:14px;
  background:#05070c;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  z-index:20;pointer-events:none;
}
.wardrobe-app-demo .ar-fit-screen{border-radius:29px}
.wardrobe-app-demo .wardrobe-app-topbar{padding-top:32px}

/* The stage reserves a margin around its edges (for the floating nav/ask
   pill) which let the screen's own dark navy background peek through as a
   strip beneath the light scroll content — reading as "two screens
   stacked". Give the screen itself the same light tone so everything
   reads as one continuous surface (the Try-On scene still layers its own
   full-bleed dark background on top, unaffected). */
.wardrobe-app-demo .wardrobe-app-screen{
  background:linear-gradient(180deg,#f6f8fc 0%,#eef2f8 100%);
}

/* Bigger, easier-to-read items in every step of the demo */

/* Step 1 · Photo gallery — 3 columns instead of 4 so every tile is bigger */
.wardrobe-app-demo .wd-scene-scroll .wd-gallery--app{grid-template-columns:repeat(3,1fr);gap:10px;padding:0 16px}
.wardrobe-app-demo .wd-scene-head{font-size:13px;padding:0 14px 4px;gap:9px}
.wardrobe-app-demo .wd-scene-back{font-size:20px}
.wardrobe-app-demo .wd-scene-lede{font-size:11px;padding:0 14px;margin:0 0 8px}
.wardrobe-app-demo .wd-import-bar{margin:14px 16px 0;font-size:12px;padding:10px 13px}
.wardrobe-app-demo .wd-import-btn{font-size:11px;padding:6px 12px}
.wardrobe-app-demo .wd-check{width:22px;height:22px;top:5px;right:5px}
.wardrobe-app-demo .wd-check::after{left:6px;top:3px;width:7px;height:11px;border-width:0 2.5px 2.5px 0}

/* Step 2 · Wardrobe catalogue cards */
.wardrobe-app-demo .wd-toolbar{padding:0 16px 8px}
.wardrobe-app-demo .wd-pill,
.wardrobe-app-demo .wd-chip{font-size:12.5px;padding:9px 16px}
.wardrobe-app-demo .wd-pill-ico,
.wardrobe-app-demo .wd-chip-ico{width:19px;height:19px;font-size:13px}
.wardrobe-app-demo .wd-block{padding:0 16px 10px}
.wardrobe-app-demo .wd-block-head{font-size:14px;padding:10px 15px;margin-bottom:10px}
.wardrobe-app-demo .wd-block-go{width:32px;height:32px;font-size:19px}
.wardrobe-app-demo .wd-card{flex-basis:270px}
.wardrobe-app-demo .wd-card--peek{flex-basis:64px}
.wardrobe-app-demo .wd-card-media{height:220px;padding:16px 14px 12px}
.wardrobe-app-demo .wd-card-media img{max-height:200px}
.wardrobe-app-demo .wd-card--bottom .wd-card-media img{max-height:206px}
.wardrobe-app-demo .wd-card--shoes .wd-card-media img{max-height:148px;max-width:88%}
.wardrobe-app-demo .wd-card--acc .wd-card-media img{max-height:160px}
.wardrobe-app-demo .wd-card-foot{padding:11px 12px 12px;gap:10px}
.wardrobe-app-demo .wd-card-copy strong{font-size:13px}
.wardrobe-app-demo .wd-card-copy p{font-size:11px}
.wardrobe-app-demo .wd-card-arrow{width:32px;height:32px;font-size:18px}
.wardrobe-app-demo .wd-card-track{gap:12px}
.wardrobe-app-demo .wd-card-handle{width:46px;height:10px}
.wardrobe-app-demo .wd-card-x{width:22px;height:22px;font-size:13px;line-height:22px}

/* Step 3 · Virtual try-on — the side columns were widened too far last
   pass and squeezed the centre model photo down. Keep the side rail /
   outfit list only modestly bigger than stock so the photo gets its
   space back and reads at (at least) its original size, and let the
   prev/next buttons grow taller instead of wider. */
.wardrobe-app-screen .wd-tryon-fit.ar-fit-body{grid-template-columns:44px minmax(0,1fr) 100px;gap:6px}
.wardrobe-app-screen .wd-tryon-viewport.ar-fit-viewport{flex:1;min-height:280px;height:auto}
.wardrobe-app-screen .wd-tryon-fit .ar-fit-room-label{font-size:13px}
.wardrobe-app-screen .wd-tryon-fit .ar-fit-caption{font-size:14px;margin-top:6px}

/* Left rail — icons stay compact so the photo isn't squeezed, but sit
   comfortably centred over the full rail height */
.wardrobe-app-screen .wd-tryon-fit .ar-fit-rail{gap:12px;padding:10px 2px;justify-content:center}
.wardrobe-app-screen .wd-tryon-fit .ar-fit-rail-ico{width:34px;height:34px}
.wardrobe-app-screen .wd-tryon-fit .ar-fit-rail-ico .nx-icon-ring{width:20px;height:20px}
.wardrobe-app-screen .wd-tryon-fit .ar-fit-rail-ico .nx-icon-ring svg{width:20px;height:20px}
.wardrobe-app-screen .wd-tryon-fit .ar-fit-rail-item span:last-child{font-size:8.5px;max-width:40px}

/* Prev / next buttons on the photo — grow taller (top-to-bottom), not
   wider, so they read as a vertical control, not a wide slab */
.wardrobe-app-screen .wd-tryon-fit .ar-fit-arrow{width:26px;height:70px;font-size:20px;border-radius:8px}
.wardrobe-app-screen .wd-tryon-fit .ar-fit-arrow--prev{left:8px}
.wardrobe-app-screen .wd-tryon-fit .ar-fit-arrow--next{right:8px}

.wardrobe-app-screen .wd-tryon-fit .ar-fit-tryon-btn{min-width:160px;padding:14px 24px;font-size:14px}
.wardrobe-app-screen .wd-tryon-fit .ar-fit-tryon-btn span{font-size:16px}
.wardrobe-app-screen .wd-tryon-fit .to-demo-chip{font-size:11px;padding:6px 11px}

/* Right rail — "Your Outfit" list stays compact width-wise (so the
   photo keeps its room) but centred vertically over the full column */
.wardrobe-app-screen .wd-tryon-fit .ar-fit-outfit{padding:6px 8px 6px 6px;justify-content:center}
.wardrobe-app-screen .wd-tryon-fit .ar-fit-outfit-head{font-size:10px;margin-bottom:8px}
.wardrobe-app-screen .wd-tryon-fit .wd-tryon-picks.ar-fit-outfit-list{gap:8px;max-height:none;flex:none}
.wardrobe-app-screen .wd-tryon-fit .ar-fit-outfit-row{padding:6px;gap:6px;grid-template-columns:42px 1fr 16px;border-radius:8px}
.wardrobe-app-screen .wd-tryon-fit .ar-fit-outfit-row img{width:42px;height:42px;border-radius:7px}
.wardrobe-app-screen .wd-tryon-fit .ar-fit-outfit-meta strong{font-size:9.5px}
.wardrobe-app-screen .wd-tryon-fit .ar-fit-outfit-meta span{font-size:8px}
.wardrobe-app-screen .wd-tryon-fit .ar-fit-outfit-x{font-size:12px}

/* Step 4 · Complete outfits */
.wardrobe-app-demo .wd-outfits-scroll{padding:0 16px 64px}
.wardrobe-app-demo .wd-app-outfit-list{gap:12px}
.wardrobe-app-demo .wd-app-outfit{padding:11px;gap:12px;border-radius:16px}
.wardrobe-app-demo .wd-app-outfit-preview{width:92px;height:112px;border-radius:13px}
.wardrobe-app-demo .wd-outfit-stack--app{width:78px;height:58px}
.wardrobe-app-demo .wd-outfit-stack--app img{width:32px;height:39px;border-radius:6px}
.wardrobe-app-demo .wd-outfit-stack--app img:nth-child(2){left:21px;top:2px}
.wardrobe-app-demo .wd-outfit-stack--app img:nth-child(3){left:42px;top:10px}
.wardrobe-app-demo .wd-app-outfit .wd-outfit-meta strong{font-size:13px}
.wardrobe-app-demo .wd-app-outfit .wd-outfit-meta span{font-size:11px}

@media(max-width:640px){
  .media-panel.media-panel--wardrobe{min-height:auto;padding:24px 14px}
  .wardrobe-app-demo.ar-fit-phone{--nx-phone-w:300px;max-width:300px}
}

/* ══════════════════════════════════════════════════════════════════
   AI Style Consultant phone (Features page, "02 · AI Style Consultant")
   — same beautiful-form + bigger-items treatment as the Digital
   Wardrobe phone above. Everything is scoped to .phone--ai-consultant /
   .media-panel--ai, which exist ONLY on this one instance — the same
   .phone/.notch/.chip/.dark-card classes used by the Home page and the
   How-It-Works four-phone fan are completely untouched.
   ══════════════════════════════════════════════════════════════════ */

.media-panel.media-panel--ai{
  min-height:880px;
  padding:44px 24px;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(226,181,124,.10) 0%, transparent 62%),
    linear-gradient(165deg,#f8f9fb 0%,#eef1f6 100%);
  border:1px solid rgba(1,9,32,.07);
  box-shadow:0 26px 60px rgba(1,9,32,.12), inset 0 1px 0 rgba(255,255,255,.7);
}

.phone.phone--ai-consultant{
  width:320px;height:744px;border-radius:46px;padding:20px;
  box-shadow:
    inset 0 0 0 2px #30394a,
    0 32px 70px rgba(1,9,32,.40),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.phone--ai-consultant .notch{
  width:114px;height:30px;top:22px;border-radius:0 0 18px 18px;
}
.phone--ai-consultant .screen{
  border-radius:30px;padding:56px 24px 108px;
}
.phone--ai-consultant .phone-app-header{padding:14px 0 6px}
.phone--ai-consultant .screen .phone-app-header{margin:-54px -22px 14px}
.phone--ai-consultant .phone-app-header .phone-emblem{width:46px;height:46px}
.phone--ai-consultant .phone-app-header .phone-emblem svg,
.phone--ai-consultant .phone-app-header .phone-emblem .nx-brand-logo,
.phone--ai-consultant .phone-app-header .phone-emblem .nx-orb-logo,
.phone--ai-consultant .phone-app-header .phone-emblem .nx-brand-logo--phone,
.phone--ai-consultant .phone-app-header .phone-emblem .nx-orb-logo--phone,
.phone--ai-consultant .nx-brand-logo--phone .nx-brand-logo__img{width:46px;height:46px}

.phone--ai-consultant .status{font-size:14px;margin-bottom:16px}
.phone--ai-consultant .screen-title{font-size:22px}
.phone--ai-consultant .search-box{padding:20px;font-size:18px;margin:18px 0}
.phone--ai-consultant .chips{gap:9px;margin:14px 0}
.phone--ai-consultant .chip{padding:9px 16px;font-size:14px}
.phone--ai-consultant .dark-card-row{gap:11px;margin-top:16px}
.phone--ai-consultant .dark-card{height:117px;border-radius:18px;font-size:14px}

.phone--ai-consultant .cosmic-nav{height:90px}
.phone--ai-consultant .cn-lbl{font-size:12px}
.phone--ai-consultant .nx-icon-ring--nav{width:45px;height:45px}
.phone--ai-consultant .nx-icon-ring--nav svg{width:32px;height:32px}
.phone--ai-consultant .cn-home .nx-home-ring{width:48px;height:48px}
.phone--ai-consultant .cosmic-nav .cn-home .nx-brand-logo--phone,
.phone--ai-consultant .cosmic-nav .cn-home .nx-orb-logo--phone{width:48px;height:48px}

@media(max-width:640px){
  .media-panel.media-panel--ai{min-height:auto;padding:28px 16px}
  .phone.phone--ai-consultant{width:240px;height:558px;border-radius:36px;padding:15px}
  .phone--ai-consultant .screen{padding:42px 18px 82px}
}


/* ==== inlined from assets/css (cPanel zip AV workaround) ==== */

/* --- assets\css\nikonyx-app-colors.css --- */
/* ───────────────────────────────────────────────────────────────
   SITE-WIDE locked 8-colour UI set
   #001138 #001646 #002467 #0C5BE4 #FFFFFF #E1ECF7 #B3C8E2 #F8FAFD
   Colour properties only. Content/layout untouched.
   ─────────────────────────────────────────────────────────────── */

body {
  --nx-midnight: #001138;
  --nx-deep: #001646;
  --nx-ocean: #002467;
  --nx-electric: #0C5BE4;
  --nx-white: #FFFFFF;
  --nx-ice: #E1ECF7;
  --nx-silver: #B3C8E2;
  --nx-surface: #F8FAFD;

  /* neutralize shared gold tokens on this page only */
  --gold: #B3C8E2;
  --gold-2: #0C5BE4;
  --gold-soft: #E1ECF7;
  --digital-beige: #B3C8E2;
  --digital-blue: #0C5BE4;
  --digital-cyan: #E1ECF7;
  --digital-midnight: #001138;
  --digital-teal: #001646;
  --digital-black: #001138;
  --navy: #001646;
  --navy-2: #001646;
  --navy-3: #001138;
  --ink: #001646;
  --muted: #B3C8E2;
  --slate: #002467;
  --line: #E1ECF7;
  --paper: #F8FAFD;

  background: #F8FAFD;
  color: #001646;
}

/* Header */
body .hdr,
body .hdr .navbar {
  background: radial-gradient(120% 90% at 50% 0%, #002467 0%, #001646 45%, #001138 100%) !important;
  border-bottom-color: rgba(225, 236, 247, 0.2);
  box-shadow: 0 6px 24px rgba(0, 17, 56, 0.35);
}

body .hdr .navbar::before {
  background: linear-gradient(90deg, transparent 0%, #B3C8E2 18%, #E1ECF7 50%, #B3C8E2 82%, transparent 100%);
}

body .hdr .nav-links a {
  color: #FFFFFF;
}

body .hdr .nav-links a:hover,
body .hdr .nav-links .active {
  color: #E1ECF7;
  border-bottom-color: #0C5BE4;
}

body .hdr .logo {
  color: #FFFFFF;
}

body .hdr .app-btn {
  background: #FFFFFF !important;
  color: #001646 !important;
  border: 1px solid #E1ECF7 !important;
  box-shadow: 0 8px 28px rgba(0, 17, 56, 0.18);
}

body .hdr .app-btn:hover {
  background: #F8FAFD !important;
  color: #001646 !important;
}

body .hdr .hdr-content h1 {
  color: #FFFFFF;
}

body .hdr .hdr-content .lede {
  color: #E1ECF7;
}

body .hdr .hdr-content .eyebrow,
body .hdr .hdr-content h1 .gold {
  color: #B3C8E2;
}

body .hdr-menu-btn {
  border-color: rgba(225, 236, 247, 0.35);
  background: rgba(225, 236, 247, 0.08);
  color: #FFFFFF;
}

body .hdr-menu-btn:focus-visible {
  outline-color: #0C5BE4;
}

body .mobile-drawer {
  background: linear-gradient(180deg, #001646, #001138);
}

body .mobile-drawer a {
  color: #FFFFFF;
  border-bottom-color: rgba(225, 236, 247, 0.12);
}

body .mobile-drawer a.active {
  color: #E1ECF7;
}

/* Main / sections */
body main {
  background: #F8FAFD !important;
}

body .section,
body .section.tint {
  background: transparent !important;
}

body .section .copy h3,
body .section .copy h4,
body h3,
body h4 {
  color: #001646 !important;
  text-shadow: none;
}

body .section .copy p,
body .section p,
body .lede {
  color: #002467 !important;
  text-shadow: none;
}

body .eyebrow,
body .eyebrow-dark {
  color: #0C5BE4 !important;
}

/* Form */
body .field-label {
  color: #001646;
}

body .field {
  color: #001646;
  background: #FFFFFF;
  border-color: #E1ECF7;
}

body .field:focus {
  border-color: #0C5BE4;
  box-shadow: 0 0 0 3px rgba(12, 91, 228, 0.18);
}

body .field::placeholder {
  color: #B3C8E2;
}

body .primary,
body button.primary {
  background: #001646 !important;
  color: #FFFFFF !important;
  box-shadow: 0 12px 28px rgba(0, 17, 56, 0.22);
}

body .primary:hover,
body button.primary:hover {
  background: #002467 !important;
  box-shadow: 0 18px 36px rgba(0, 36, 103, 0.28);
}

body .secondary {
  background: #FFFFFF;
  color: #001646;
  border-color: #B3C8E2;
}

/* Cards / glass / QR */
body .lux-card,
body .info-card,
body .qr-panel,
body .glass,
body .try-card,
body .feature-strip,
body .media-section {
  background: #FFFFFF !important;
  border-color: #E1ECF7 !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 10px 30px rgba(0, 17, 56, 0.08);
}

body .lux-card h4,
body .info-card h4,
body .qr-panel b,
body .qr-head {
  color: #001646 !important;
}

body .lux-card p,
body .info-card p,
body .qr-panel p {
  color: #002467 !important;
}

body .info-card a,
body .copy a,
body a[href^="mailto:"] {
  color: #0C5BE4 !important;
}

body .lux-icon {
  background: #E1ECF7;
  color: #002467;
}

/* Features page cards — light ice/silver blue (not dark navy) */
body .app-feat-card {
  background: linear-gradient(165deg, #FFFFFF 0%, #F8FAFD 28%, #E1ECF7 72%, #B3C8E2 100%) !important;
  border-color: #B3C8E2 !important;
  color: #001646 !important;
  box-shadow: 0 14px 36px rgba(0, 17, 56, 0.10);
}

body .app-feat-card h3 {
  color: #001138 !important;
}

body .app-feat-card .app-feat-lead,
body .app-feat-card .feat-checklist li {
  color: #001646 !important;
}

body .app-feat-card .nx-icon-ring {
  border-color: #B3C8E2;
  background: linear-gradient(180deg, #f7fbff 0%, #eaf2fb 100%);
}

body .app-feat-card .nx-icon-ring svg {
  color: #001138;
}

/* 3D logo band */
body .nikonyx-about-logo-effect {
  --nx-ale-navy: #001138;
  --nx-ale-cyan: #E1ECF7;
  --nx-ale-blue: #0C5BE4;
  --nx-ale-white: #FFFFFF;
  --nx-ale-gold: #B3C8E2;
  background:
    radial-gradient(ellipse 80% 60% at 50% 38%, rgba(12, 91, 228, 0.12) 0%, transparent 55%),
    linear-gradient(180deg, #F8FAFD 0%, #E1ECF7 48%, #F8FAFD 100%);
}

body .nikonyx-about-logo-effect__eyebrow {
  color: #0C5BE4;
}

body .nikonyx-about-logo-effect__title {
  color: #001646;
}

body .nikonyx-about-logo-effect__lede,
body .nikonyx-about-logo-effect__hint {
  color: #002467;
}

body .nikonyx-about-logo-effect__gold-streak {
  background: linear-gradient(90deg, transparent, #B3C8E2 24%, #E1ECF7 50%, #B3C8E2 76%, transparent);
}

/* Biz / phone showcase on Contact */
body .nx-biz-showcase,
body .nx-biz-showcase.nx-biz-showcase--neutral {
  background: #F8FAFD;
}

body .nx-biz-head .eyebrow,
body .nx-biz-showcase.nx-biz-showcase--neutral .nx-biz-head .eyebrow {
  color: #0C5BE4 !important;
}

body .nx-biz-head h2,
body .nx-biz-chip-val,
body .nx-biz-prod-card-label {
  color: #001646 !important;
}

body .nx-biz-head p,
body .nx-biz-chip-label {
  color: #002467 !important;
}

body .nx-biz-chip,
body .nx-biz-prod-card {
  background: #FFFFFF;
  border-color: #E1ECF7;
  box-shadow: 0 10px 28px rgba(0, 17, 56, 0.08);
}

body .nx-page-chat-bubble--bot {
  background: #E1ECF7;
  color: #001646;
}

body .nx-page-chat-bubble--user {
  background: #002467;
  color: #FFFFFF;
}

/* Soft fade only — keep clouds/water readable behind content */
body .nx-page-bg__veil {
  background:
    linear-gradient(180deg,
      rgba(248, 250, 253, 0.06) 0%,
      rgba(225, 236, 247, 0.1) 50%,
      rgba(248, 250, 253, 0.5) 88%,
      #F8FAFD 100%);
}

body .nx-contact-carousel {
  background: transparent;
}

/* Footer (injected) */
body .site-footer,
body #footer-root,
body #site-bottom-root {
  background: #FFFFFF !important;
  border-top-color: #E1ECF7 !important;
}

body .site-footer h4,
body .nx-brand-wordmark--footer {
  color: #001646 !important;
}

body .site-footer .fcol a,
body .site-footer p,
body .site-footer .copy {
  color: #002467 !important;
}

body .site-footer .fcol a:hover {
  color: #0C5BE4 !important;
}

body .site-footer .divider,
body .site-footer hr {
  border-color: #E1ECF7 !important;
  background: #E1ECF7 !important;
}


/* Home: keep page surface transparent so photo band shows */
body[data-page="home"] {
  background: #FFFFFF;
}
body[data-page="home"] .page,
body[data-page="home"] main {
  background: transparent !important;
}

/* Carousel / light fashion bands */
body .nx-contact-carousel {
  background: transparent !important;
  --nxcc-accent: #0C5BE4;
  --nxcc-ink: #001646;
  --nxcc-muted: #002467;
  --nxcc-paper: transparent;
  --nxcc-line: rgba(0, 22, 70, 0.12);
}

body .nx-contact-carousel__eyebrow {
  color: #0C5BE4;
}
body .nx-contact-carousel__title {
  color: #001646;
}
body .nx-contact-carousel__sub,
body .nx-contact-carousel__hint {
  color: #002467;
}

/* CTA bands already dark — keep navy family */
body .cta,
body .cta-band .cta {
  background: radial-gradient(120% 90% at 50% 0%, #002467 0%, #001646 45%, #001138 100%) !important;
}
body .cta h2,
body .cta .gold-cta,
body .gold-cta {
  color: #001646;
}
body .cta .gold-cta,
body .gold-cta {
  background: #FFFFFF !important;
  border: 1px solid #E1ECF7 !important;
  box-shadow: 0 14px 30px rgba(0, 17, 56, 0.18) !important;
}
body .ghost-gold {
  color: #E1ECF7 !important;
  border-color: #B3C8E2 !important;
}
body .ghost-gold:hover {
  background: rgba(225, 236, 247, 0.12) !important;
}

/* Home inline theme aliases */
body[data-page="home"] {
  --navy: #001646;
  --navy2: #001646;
  --ink: #001646;
  --gold: #B3C8E2;
  --gold2: #0C5BE4;
  --gold-soft: #E1ECF7;
  --blue-glow: #0C5BE4;
  --paper: #FFFFFF;
  --line: #E1ECF7;
}
body[data-page="home"] .hero-text h1 .gold,
body[data-page="home"] .gold {
  color: #0C5BE4 !important;
}
body[data-page="home"] .primary-btn {
  background: #001646 !important;
  color: #FFFFFF !important;
}
body[data-page="home"] .secondary-btn {
  background: #FFFFFF !important;
  color: #001646 !important;
  border-color: #B3C8E2 !important;
}
body[data-page="home"] .badge {
  background: #E1ECF7 !important;
  color: #002467 !important;
}

/* --- assets\css\nikonyx-about-logo-effect.css --- */
/* ==========================================================================
   Nikonyx About Us — 3D extruded mark (Trionn-style)
   Scope: .nikonyx-about-logo-effect only. Header untouched.
   ========================================================================== */

.nikonyx-about-logo-effect {
  --nx-ale-navy: #001138;
  --nx-ale-cyan: #E1ECF7;
  --nx-ale-blue: #0C5BE4;
  --nx-ale-white: #ffffff;
  --nx-ale-gold: #B3C8E2;

  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
  padding: 56px 20px 64px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 38%, rgba(10, 100, 227, 0.12) 0%, transparent 55%),
    linear-gradient(180deg, #e8eaee 0%, #d5d8de 48%, #e8eaee 100%);
}

.nikonyx-about-logo-effect__shell {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}

.nikonyx-about-logo-effect__eyebrow {
  display: block;
  font-family: Poppins, Inter, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #0C5BE4;
  margin: 0 0 10px;
}

.nikonyx-about-logo-effect__title {
  font-family: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  font-size: clamp(22px, 2.8vw, 34px);
  font-weight: 700;
  line-height: 1.2;
  color: #001138;
  margin: 0 0 10px;
}

.nikonyx-about-logo-effect__lede {
  font-family: Inter, Poppins, system-ui, sans-serif;
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(1, 9, 32, 0.62);
  max-width: 460px;
  margin: 0 auto 8px;
}

.nikonyx-about-logo-effect__stage {
  position: relative;
  width: min(100%, 720px);
  height: clamp(400px, 54vw, 660px);
  margin: 18px auto 0;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(180deg, #002a36 0%, #001528 42%, #000b1a 100%);
  border: 1px solid rgba(1, 255, 255, 0.14);
  box-shadow:
    0 30px 70px rgba(1, 9, 32, 0.35),
    inset 0 0 80px rgba(0, 42, 54, 0.45);
  touch-action: pan-y;
}

.nikonyx-about-logo-effect__stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  display: block;
  mix-blend-mode: screen;
}

.nikonyx-about-logo-effect__gold-streak {
  position: absolute;
  left: -8%;
  top: 28%;
  width: 118%;
  height: 2px;
  z-index: 1;
  pointer-events: none;
  transform: rotate(-6deg);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(226, 181, 124, 0.15) 18%,
    rgba(255, 220, 160, 0.95) 48%,
    rgba(226, 181, 124, 0.35) 72%,
    transparent 100%
  );
  box-shadow:
    0 0 10px rgba(226, 181, 124, 0.75),
    0 0 28px rgba(226, 181, 124, 0.35);
  opacity: 0.85;
}

.nikonyx-about-logo-effect__canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
  background: transparent;
  cursor: grab;
  touch-action: none;
}

.nikonyx-about-logo-effect__canvas:active {
  cursor: grabbing;
}

.nikonyx-about-logo-effect__fallback {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  padding: 24px;
  z-index: 2;
}

.nikonyx-about-logo-effect.is-fallback .nikonyx-about-logo-effect__fallback {
  display: grid;
}

.nikonyx-about-logo-effect.is-fallback .nikonyx-about-logo-effect__canvas {
  display: none;
}

.nikonyx-about-logo-effect__fallback-logo {
  width: min(280px, 70%);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 16px 36px rgba(1, 255, 255, 0.18));
}

/* Static logo image (no rotation / no Three.js) */
.nikonyx-about-logo-effect.is-static .nikonyx-about-logo-effect__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 900px;
  perspective-origin: 50% 45%;
  /* Space-depth card — matches former 3D stage (not white) */
  background:
    radial-gradient(ellipse 70% 28% at 50% 92%, rgba(0, 0, 0, 0.75) 0%, transparent 70%),
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.55) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 18%, rgba(180, 220, 255, 0.45) 0 1px, transparent 2px),
    radial-gradient(circle at 40% 48%, rgba(255, 255, 255, 0.35) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 42%, rgba(255, 255, 255, 0.4) 0 1px, transparent 2px),
    radial-gradient(circle at 28% 70%, rgba(160, 210, 255, 0.35) 0 1px, transparent 2px),
    radial-gradient(circle at 62% 78%, rgba(255, 255, 255, 0.3) 0 1px, transparent 2px),
    radial-gradient(circle at 12% 55%, rgba(255, 255, 255, 0.25) 0 1px, transparent 2px),
    linear-gradient(
      115deg,
      transparent 0%,
      transparent 42%,
      rgba(255, 255, 255, 0.04) 48%,
      transparent 54%,
      transparent 100%
    ),
    linear-gradient(
      180deg,
      #0a2335 0%,
      #061820 38%,
      #04101a 72%,
      #02080f 100%
    );
  border: 1px solid rgba(1, 255, 255, 0.14);
  box-shadow:
    0 30px 70px rgba(1, 9, 32, 0.35),
    inset 0 0 80px rgba(0, 20, 40, 0.45);
  overflow: hidden;
}

.nikonyx-about-logo-effect.is-static .nikonyx-about-logo-effect__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(100deg, transparent 20%, rgba(200, 230, 255, 0.06) 48%, transparent 62%),
    linear-gradient(-25deg, transparent 55%, rgba(255, 255, 255, 0.035) 70%, transparent 78%);
  opacity: 0.9;
}

.nikonyx-about-logo-effect.is-static .nikonyx-about-logo-effect__stage::after {
  /* Floor / platform under the logo */
  content: "";
  position: absolute;
  left: 50%;
  bottom: 10%;
  width: 58%;
  height: 14%;
  transform: translateX(-50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 8, 18, 0.35) 45%,
    transparent 72%
  );
}

.nikonyx-about-logo-effect__static {
  position: relative;
  z-index: 2;
  display: block;
  width: min(100%, 400px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.35));
  transform-origin: center center;
  transform-style: preserve-3d;
  animation: nx-logo-yaw 10s linear infinite;
  will-change: transform;
}

.nikonyx-page-logo-3d.is-static .nikonyx-about-logo-effect__static {
  width: min(100%, 318px);
}

.nikonyx-about-logo-effect.is-static .nikonyx-about-logo-effect__hint {
  display: block;
  color: rgba(120, 160, 200, 0.55);
}

/* Full 360° 3D rotate (side / Y axis) */
@keyframes nx-logo-yaw {
  from {
    transform: rotateY(0deg) rotateX(6deg);
  }
  to {
    transform: rotateY(360deg) rotateX(6deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nikonyx-about-logo-effect__static {
    animation: none;
  }
}

.nikonyx-about-logo-effect__hint {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 3;
  font-family: Inter, Poppins, system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.48);
  pointer-events: none;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .nikonyx-about-logo-effect {
    padding: 44px 16px 52px;
  }

  .nikonyx-about-logo-effect__stage {
    height: clamp(420px, 62vw, 560px);
  }
}

@media (max-width: 600px) {
  .nikonyx-about-logo-effect {
    padding: 36px 12px 44px;
  }

  .nikonyx-about-logo-effect__stage {
    height: clamp(360px, 92vw, 460px);
    border-radius: 16px;
  }

  .nikonyx-about-logo-effect__hint {
    font-size: 9px;
    letter-spacing: 0.1em;
  }

  .nikonyx-about-logo-effect__gold-streak {
    opacity: 0.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nikonyx-about-logo-effect__gold-streak {
    box-shadow: none;
  }
}

/* ==========================================================================
   Compact rail — TOP-LEFT of page background photo (not bottom)
   ========================================================================== */
.nikonyx-about-logo-effect.nikonyx-page-logo-3d {
  position: absolute !important;
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  margin: 0 !important;
  padding: 0;
  background: transparent !important;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  width: auto;
  max-width: calc(100% - 0px);
  z-index: 5;
}

@media (max-width: 720px) {
  .nikonyx-about-logo-effect.nikonyx-page-logo-3d {
    top: 0;
    left: 0;
    margin-top: 0 !important;
  }
}

.nikonyx-page-logo-3d .nikonyx-about-logo-effect__shell {
  margin: 0;
  max-width: none;
  text-align: left;
}

.nikonyx-page-logo-3d .nikonyx-about-logo-effect__eyebrow,
.nikonyx-page-logo-3d .nikonyx-about-logo-effect__title,
.nikonyx-page-logo-3d .nikonyx-about-logo-effect__lede {
  display: none;
}

.nikonyx-page-logo-3d .nikonyx-about-logo-effect__stage {
  width: 420px;
  height: 420px;
  max-width: min(100%, 420px);
  margin: 0;
  border-radius: 0;
  border: none;
  box-shadow: none;
  /* Transparent — logo rotates on the page photo */
  background: transparent;
  overflow: visible;
}

.nikonyx-page-logo-3d .nikonyx-about-logo-effect__hint {
  font-size: 8px;
  bottom: 6px;
  color: rgba(255, 255, 255, 0.55);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.nikonyx-page-logo-3d .nikonyx-about-logo-effect__fallback-logo {
  width: min(170px, 55%);
}

@media (max-width: 600px) {
  .nikonyx-about-logo-effect.nikonyx-page-logo-3d {
    padding: 0;
  }

  .nikonyx-page-logo-3d .nikonyx-about-logo-effect__stage {
    width: min(100vw, 300px);
    height: min(100vw, 300px);
    aspect-ratio: 1 / 1;
    min-height: 0;
  }
}

/* --- assets\css\nikonyx-page-bg.css --- */
/* ───────────────────────────────────────────────────────────────
   Under-header page backgrounds — ALL pages
   Full uncropped photo in document flow (1536×1024 site/*.jpg)
   Header stays cosmic navy; photo sits under header in main/.page
   ─────────────────────────────────────────────────────────────── */

/* Lock original header — never let page photo invade it */
.hdr {
  position: relative;
  z-index: 30;
  background: radial-gradient(120% 90% at 50% 0%, #001646 0%, #001138 45%, #001138 100%) !important;
  isolation: isolate;
}

.hdr .navbar {
  z-index: 1000;
}

body {
  background: #F8FAFD;
}

main,
body[data-page="home"] .page {
  position: relative;
  z-index: 1;
  isolation: isolate;
  background: transparent !important;
  /* visible so sticky carousel can pin (overflow:hidden breaks sticky) */
  overflow: visible;
}

/* Carousel: transparent so page / cloud atmosphere shows through */
body[data-page="contact"] .nx-contact-carousel,
body[data-page="home"] .nx-contact-carousel {
  background: transparent;
}

/*
  Full uncropped photo for inner pages (features, how, business, about, contact).
  position:relative so the image takes space and is not hidden under opaque panels.
  Home keeps the previous absolute under-header band (see overrides below).
*/
.nx-page-bg {
  position: relative;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 1536 / 1024;
  max-height: none;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #F8FAFD;
  display: block;
}

/* Home: previous layout — absolute photo tucked under header curve */
body[data-page="home"] .nx-page-bg {
  position: absolute;
  top: -72px;
  left: 0;
  right: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 1536 / 1024;
  display: block;
}

body[data-page="home"] .nx-page-bg__img {
  object-fit: contain;
  object-position: center top;
}

body[data-page="home"] .nx-page-bg__veil {
  background:
    linear-gradient(180deg,
      rgba(248, 250, 253, 0.06) 0%,
      rgba(225, 236, 247, 0.10) 55%,
      rgba(248, 250, 253, 0.50) 88%,
      #F8FAFD 100%);
}

body[data-page="home"] .home-tryon-below {
  background: #F8FAFD !important;
  z-index: 2;
}

.nx-page-bg__img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
  animation: none;
  transform: none;
  will-change: auto;
  opacity: 1;
  filter: none;
}

/* Soft bottom fade into ice surface — keep subject fully readable */
.nx-page-bg__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(248, 250, 253, 0) 0%,
      rgba(248, 250, 253, 0) 72%,
      rgba(248, 250, 253, 0.35) 90%,
      #F8FAFD 100%);
}

@media (prefers-reduced-motion: reduce) {
  .nx-page-bg__img {
    animation: none;
    transform: none;
  }
}

main > *:not(.nx-page-bg),
body[data-page="home"] .page > *:not(.nx-page-bg) {
  position: relative;
  z-index: 1;
}

/* Logo is absolute over the photo — do not force relative (would break top-left) */
main > .nikonyx-about-logo-effect.nikonyx-page-logo-3d {
  position: absolute !important;
  z-index: 5;
}

/* Compact 3D logo — exact TOP-LEFT corner of background photo */
.nikonyx-about-logo-effect.nikonyx-page-logo-3d {
  background: transparent !important;
  margin: 0 !important;
  padding: 0;
  top: 0;
  left: 0;
  justify-content: flex-start;
  align-items: flex-start;
  z-index: 5;
}

@media (max-width: 720px) {
  .nikonyx-about-logo-effect.nikonyx-page-logo-3d {
    top: 0;
    left: 0;
    margin-top: 0 !important;
  }
}

/* Transparent section fills so atmosphere can show where needed */
.section,
.section-sm,
.section.tint,
.app-capabilities,
.visual-scan-section,
.visual-scan-section--compact,
.visual-scan-section.tint,
.hero-wrap,
body[data-page="home"] .page,
body[data-page="home"] .hero,
body[data-page="home"] .section-problem,
body[data-page="home"] .content-area,
body[data-page="home"] .featured {
  background: transparent !important;
}

.lux-card,
.info-card,
.faq-item,
.try-card,
.qr-panel,
.feature-strip,
.media-section,
.glass {
  background: rgba(255, 255, 255, 0.78) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.field,
.phone .screen,
.ar-fit-bezel,
.ar-fit-screen {
  background-color: #fff;
}

.section .copy h3,
.section .copy p,
.section-head h2,
.section-head p,
.feature-row .copy {
  text-shadow: 0 1px 10px rgba(255, 255, 255, 0.8);
}

.site-footer,
.nx-fashion-marquee,
#footer-root,
#site-bottom-root {
  position: relative;
  z-index: 2;
  background-color: #F8FAFD;
}

/* --- assets\css\nikonyx-fashion-marquee.css --- */
/* ───────────────────────────────────────────────────────────────
   Additive digital-fashion / wardrobe scrolling filmstrip
   Light paper band above footer — never removes existing UI.
   ─────────────────────────────────────────────────────────────── */

.nx-fashion-marquee {
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #f7f5f2 45%, #ffffff 100%);
  border-top: 1px solid #e8edf5;
  border-bottom: 1px solid #e8edf5;
  overflow: hidden;
  padding: 28px 0 32px;
  isolation: isolate;
}

.nx-fashion-marquee__label {
  position: relative;
  z-index: 2;
  text-align: center;
  margin: 0 0 14px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #0C5BE4;
}

.nx-fashion-marquee__viewport {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.nx-fashion-marquee__track {
  display: flex;
  gap: 14px;
  width: max-content;
  will-change: transform;
  animation: nx-fashion-marquee-scroll 110s linear infinite;
}

.nx-fashion-marquee__track:hover {
  animation-play-state: paused;
}

.nx-fashion-marquee__item {
  flex: 0 0 auto;
  width: clamp(112px, 14vw, 168px);
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 28px rgba(1, 9, 32, 0.1);
  border: 1px solid rgba(232, 237, 245, 0.95);
}

.nx-fashion-marquee__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease, filter 0.45s ease;
}

.nx-fashion-marquee__item:hover img {
  transform: scale(1.05);
  filter: brightness(1.05) saturate(1.04);
}

.nx-fashion-marquee__glow {
  position: absolute;
  inset: auto 10% -40px;
  height: 80px;
  background: radial-gradient(ellipse at center, rgba(226, 181, 124, 0.18), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

@keyframes nx-fashion-marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .nx-fashion-marquee__track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px;
  }

  .nx-fashion-marquee__viewport {
    mask-image: none;
    -webkit-mask-image: none;
  }

  .nx-fashion-marquee__item:nth-child(n + 13) {
    display: none;
  }
}

/* --- assets\css\nikonyx-phone-fan.css --- */
/* Top strip under header — 3D logo mark (left) + phone-fan showcase (right) */
.hiw-top-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 24px;
  width: min(1360px, calc(100% - 40px));
  margin-inline: auto;
}

/* 4-phone fan mockups — How It Works. Compact decorative badge,
   pinned top-right under the header, next to the 3D logo mark. */
.nx-phone-fan {
  position: relative;
  z-index: 2;
  padding: 20px 20px 14px;
  background: transparent;
  text-align: left;
  flex-shrink: 0;
  max-width: 300px;
}

.nx-phone-fan__head {
  max-width: none;
  margin: 0 0 8px;
}

.nx-phone-fan__eyebrow {
  display: inline-block;
  font-family: Inter, Poppins, system-ui, sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #0C5BE4;
  margin-bottom: 0.3rem;
}

.nx-phone-fan__title {
  margin: 0;
  font-family: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: clamp(0.98rem, 1.6vw, 1.2rem);
  line-height: 1.25;
  color: #010920;
}

.nx-phone-fan__sub {
  display: none;
}

.nx-phone-fan__scale {
  width: 260px;
  height: 178px;
  overflow: hidden;
  position: relative;
}

.nx-phone-fan .phones {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  margin: 0;
  max-width: none;
  transform: scale(0.46);
  transform-origin: top left;
}

.nx-phone-fan .phone {
  flex-shrink: 0;
  background: #0b1020;
  border: 7px solid #0a0d16;
  border-radius: 34px;
  box-shadow: 0 26px 45px rgba(3, 10, 28, 0.45);
  overflow: hidden;
  position: relative;
  width: 150px;
  height: 328px;
  margin-left: -18px;
}

.nx-phone-fan .phone:first-child {
  margin-left: 0;
}

.nx-phone-fan .phone::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 46px;
  height: 7px;
  background: #05080f;
  border-radius: 6px;
  z-index: 3;
}

.nx-phone-fan .phone.small {
  width: 128px;
  height: 286px;
}

.nx-phone-fan .phone.center {
  width: 188px;
  height: 392px;
  z-index: 2;
  border-color: #0a0d16;
  box-shadow: 0 32px 60px rgba(3, 10, 28, 0.55);
  margin-top: 0;
}

.nx-phone-fan .screen {
  height: 100%;
  background: #f5f7fb;
  padding: 22px 9px 10px;
  font-size: 10px;
  overflow: hidden;
  text-align: left;
}

.nx-phone-fan .screen .bar {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  color: #7c879b;
  margin-bottom: 8px;
}

.nx-phone-fan .center .screen {
  background: #eef1f6;
  color: #010920;
  padding: 22px 9px 46px;
  position: relative;
}

.nx-phone-fan .center .profile-body .profile-name {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  color: #010920;
}

.nx-phone-fan .center .profile-body {
  padding: 0;
}

.nx-phone-fan .center .profile-body .role {
  text-align: center;
  color: #6b7280;
  font-size: 7px;
  margin-bottom: 6px;
  opacity: 1;
}

.nx-phone-fan .center .profile-hero {
  height: 118px;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 8px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(6, 23, 53, 0.08);
}

.nx-phone-fan .center .profile-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}

.nx-phone-fan .chat-btn {
  background: #010920;
  color: #fff;
  padding: 9px;
  border-radius: 22px;
  text-align: center;
  margin-bottom: 10px;
  font-weight: 600;
  font-size: 9px;
}

.nx-phone-fan .center .profile-body .chip {
  background: #fff;
  color: #010920;
  border: 1px solid #e6ebf3;
}

.nx-phone-fan .chips {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.nx-phone-fan .chip {
  background: #fff;
  color: #010920;
  border: 1px solid #e6ebf3;
  border-radius: 18px;
  padding: 5px 8px;
  font-size: 8px;
}

.nx-phone-fan .tile-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}

.nx-phone-fan .tile {
  height: 48px;
  border-radius: 7px;
  overflow: hidden;
  background: #eef2f8;
}

.nx-phone-fan .tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nx-phone-fan .tile.tall {
  height: 64px;
}

.nx-phone-fan .section-lbl {
  font-size: 8px;
  font-weight: 600;
  margin: 8px 0 6px;
  opacity: 0.85;
}

.nx-phone-fan .travel {
  background: linear-gradient(150deg, #3a1410, #010920 60%);
  color: #fff;
  height: 100%;
}

.nx-phone-fan .travel h4 {
  font-size: 12px;
  margin: 6px 0 4px;
}

.nx-phone-fan .travel .meta {
  font-size: 8px;
  opacity: 0.85;
  margin-bottom: 8px;
}

@media (max-width: 900px) {
  .hiw-top-strip {
    justify-content: flex-start;
  }

  .nx-phone-fan {
    max-width: none;
  }
}

@media (max-width: 480px) {
  .nx-phone-fan__scale {
    width: 210px;
    height: 144px;
  }

  .nx-phone-fan .phones {
    transform: scale(0.37);
  }
}

/* --- assets\css\nikonyx-contact-carousel.css --- */
/* ───────────────────────────────────────────────────────────────
   Contact page — large circular photo orbit
   Scoped to .nx-contact-carousel only.
   ─────────────────────────────────────────────────────────────── */

.nx-contact-carousel {
  --nxcc-paper: transparent;
  --nxcc-ink: #12141a;
  --nxcc-muted: #6b6f7a;
  --nxcc-line: rgba(18, 20, 26, 0.12);
  --nxcc-accent: #0C5BE4;
  position: relative;
  z-index: 2;
  background: transparent;
  color: var(--nxcc-ink);
  overflow: visible;
  isolation: isolate;
}

/* Sticky needs a non-clipping ancestor — contact main is overflow:visible */
.nx-contact-carousel__pin {
  position: relative;
  height: 220vh;
  min-height: 100vh;
}

.nx-contact-carousel__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 720px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  perspective: 2000px;
  background: transparent;
  /* Extra top room so full-body cards are not clipped */
  padding-top: 1.5rem;
  box-sizing: border-box;
}

.nx-contact-carousel__bg-type {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 0;
  user-select: none;
}

.nx-contact-carousel__bg-type span {
  font-family: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: clamp(4.5rem, 14vw, 11rem);
  line-height: 0.88;
  letter-spacing: -0.03em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(18, 20, 26, 0.08);
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(28px);
  will-change: opacity, transform;
}

.nx-contact-carousel__bg-type span.is-on {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.nx-contact-carousel__orbits {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.nx-contact-carousel__orbit {
  position: absolute;
  left: 50%;
  top: 54%;
  width: min(86vmin, 820px);
  height: min(52vmin, 480px);
  border: 1px solid var(--nxcc-line);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotateX(58deg);
  opacity: 0.55;
}

.nx-contact-carousel__orbit--2 {
  width: min(68vmin, 640px);
  height: min(40vmin, 360px);
  opacity: 0.35;
}

.nx-contact-carousel__orbit--3 {
  width: min(102vmin, 980px);
  height: min(62vmin, 580px);
  opacity: 0.22;
}

.nx-contact-carousel__stage {
  position: relative;
  z-index: 2;
  width: 100%;
  height: min(92vh, 960px);
  margin-top: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

.nx-contact-carousel__track {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Allow pointer drag across the whole orbit */
  pointer-events: auto;
}

.nx-contact-carousel__card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(22vw, 228px);
  height: auto;
  margin: 0;
  border: 0;
  padding: 0;
  background: transparent;
  border-radius: 16px;
  /* Allow full photo height — do not clip heads */
  overflow: visible;
  box-shadow: none;
  transform-style: preserve-3d;
  transform-origin: center center;
  cursor: grab;
  will-change: transform, filter;
  transition: filter 0.35s ease;
  backface-visibility: hidden;
}

.nx-contact-carousel__card:active {
  cursor: grabbing;
}

.nx-contact-carousel__card.is-center {
  box-shadow: none;
}

.nx-contact-carousel__card img {
  width: 100%;
  height: auto;
  max-height: none;
  /* Natural photo proportions — never crop */
  object-fit: contain !important;
  object-position: center top !important;
  background: #fff;
  display: block;
  border-radius: 16px;
  box-shadow:
    0 18px 40px rgba(18, 20, 26, 0.16),
    0 2px 6px rgba(18, 20, 26, 0.06);
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  transition: filter 0.45s ease, box-shadow 0.35s ease;
}

.nx-contact-carousel__card.is-center img {
  box-shadow:
    0 28px 64px rgba(18, 20, 26, 0.24),
    0 0 0 1px rgba(12, 91, 228, 0.28);
}

.nx-contact-carousel__card:hover img {
  transform: none;
  filter: brightness(1.03);
}

.nx-contact-carousel__card-label {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  padding: 7px 9px;
  border-radius: 10px;
  background: rgba(18, 20, 26, 0.55);
  color: #fff;
  font-family: Inter, system-ui, sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  backdrop-filter: blur(6px);
}

.nx-contact-carousel__card:hover .nx-contact-carousel__card-label,
.nx-contact-carousel__card.is-center .nx-contact-carousel__card-label {
  opacity: 1;
  transform: translateY(0);
}

.nx-contact-carousel__intro {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 42rem;
  margin: 0 auto;
  text-align: center;
  /* Title above orbit + small space before photos */
  padding: clamp(1.25rem, 2.8vh, 2rem) 1.25rem 0.75rem;
  background: transparent;
  pointer-events: none;
}

.nx-contact-carousel__eyebrow {
  display: inline-block;
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nxcc-accent);
  margin-bottom: 0.4rem;
}

.nx-contact-carousel__title {
  margin: 0;
  font-family: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.45rem, 3vw, 2.3rem);
  letter-spacing: -0.02em;
  color: var(--nxcc-ink);
}

.nx-contact-carousel__sub {
  margin: 0.4rem auto 0;
  max-width: 32rem;
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--nxcc-muted);
}

/* Hint already covered by intro sub — keep orbit clean like the reference */
.nx-contact-carousel__hint {
  display: none;
}

@media (max-width: 720px) {
  .nx-contact-carousel__card {
    width: min(32vw, 150px);
    border-radius: 12px;
  }

  .nx-contact-carousel__sticky {
    min-height: 560px;
  }

  .nx-contact-carousel__pin {
    height: 200vh;
  }

  .nx-contact-carousel__stage {
    height: min(84vh, 720px);
    margin-top: 0;
  }

  .nx-contact-carousel__bg-type span {
    font-size: clamp(3.2rem, 18vw, 5.5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nx-contact-carousel__pin {
    height: auto;
    min-height: 0;
  }

  .nx-contact-carousel__sticky {
    position: relative;
    height: auto;
    min-height: 0;
    padding: 4rem 0 3rem;
  }

  .nx-contact-carousel__stage {
    height: auto;
    margin-top: 0;
  }

  .nx-contact-carousel__track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 1.5rem 1rem 0;
    max-width: 520px;
    margin: 0 auto;
  }

  .nx-contact-carousel__card {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    transform: none !important;
  }

  .nx-contact-carousel__orbits,
  .nx-contact-carousel__hint,
  .nx-contact-carousel__bg-type {
    display: none;
  }
}

/* --- assets\css\nikonyx-contact-app-colors.css --- */
/* ───────────────────────────────────────────────────────────────
   Contact page ONLY — locked 8-colour UI set
   #001138 #001646 #002467 #0C5BE4 #FFFFFF #E1ECF7 #B3C8E2 #F8FAFD
   Colour properties only. Other pages untouched.
   ─────────────────────────────────────────────────────────────── */

body[data-page="contact"] {
  --nx-midnight: #001138;
  --nx-deep: #001646;
  --nx-ocean: #002467;
  --nx-electric: #0C5BE4;
  --nx-white: #FFFFFF;
  --nx-ice: #E1ECF7;
  --nx-silver: #B3C8E2;
  --nx-surface: #F8FAFD;

  /* neutralize shared gold tokens on this page only */
  --gold: #B3C8E2;
  --gold-2: #0C5BE4;
  --gold-soft: #E1ECF7;
  --digital-beige: #B3C8E2;
  --digital-blue: #0C5BE4;
  --digital-cyan: #E1ECF7;
  --digital-midnight: #001138;
  --digital-teal: #001646;
  --digital-black: #001138;
  --navy: #001646;
  --navy-2: #001646;
  --navy-3: #001138;
  --ink: #001646;
  --muted: #B3C8E2;
  --slate: #002467;
  --line: #E1ECF7;
  --paper: #F8FAFD;

  background: #F8FAFD;
  color: #001646;
}

/* Header */
body[data-page="contact"] .hdr,
body[data-page="contact"] .hdr .navbar {
  background: radial-gradient(120% 90% at 50% 0%, #002467 0%, #001646 45%, #001138 100%) !important;
  border-bottom-color: rgba(225, 236, 247, 0.2);
  box-shadow: 0 6px 24px rgba(0, 17, 56, 0.35);
}

body[data-page="contact"] .hdr .navbar::before {
  background: linear-gradient(90deg, transparent 0%, #B3C8E2 18%, #E1ECF7 50%, #B3C8E2 82%, transparent 100%);
}

body[data-page="contact"] .hdr .nav-links a {
  color: #FFFFFF;
}

body[data-page="contact"] .hdr .nav-links a:hover,
body[data-page="contact"] .hdr .nav-links .active {
  color: #E1ECF7;
  border-bottom-color: #0C5BE4;
}

body[data-page="contact"] .hdr .logo {
  color: #FFFFFF;
}

body[data-page="contact"] .hdr .app-btn {
  background: #FFFFFF !important;
  color: #001646 !important;
  border: 1px solid #E1ECF7 !important;
  box-shadow: 0 8px 28px rgba(0, 17, 56, 0.18);
}

body[data-page="contact"] .hdr .app-btn:hover {
  background: #F8FAFD !important;
  color: #001646 !important;
}

body[data-page="contact"] .hdr .hdr-content h1 {
  color: #FFFFFF;
}

body[data-page="contact"] .hdr .hdr-content .lede {
  color: #E1ECF7;
}

body[data-page="contact"] .hdr .hdr-content .eyebrow,
body[data-page="contact"] .hdr .hdr-content h1 .gold {
  color: #B3C8E2;
}

body[data-page="contact"] .hdr-menu-btn {
  border-color: rgba(225, 236, 247, 0.35);
  background: rgba(225, 236, 247, 0.08);
  color: #FFFFFF;
}

body[data-page="contact"] .hdr-menu-btn:focus-visible {
  outline-color: #0C5BE4;
}

body[data-page="contact"] .mobile-drawer {
  background: linear-gradient(180deg, #001646, #001138);
}

body[data-page="contact"] .mobile-drawer a {
  color: #FFFFFF;
  border-bottom-color: rgba(225, 236, 247, 0.12);
}

body[data-page="contact"] .mobile-drawer a.active {
  color: #E1ECF7;
}

body[data-page="contact"] main {
  background: transparent !important;
}

body[data-page="contact"] .section,
body[data-page="contact"] .section.tint {
  background: transparent !important;
}

body[data-page="contact"] .section .copy h3,
body[data-page="contact"] .section .copy h4,
body[data-page="contact"] h3,
body[data-page="contact"] h4 {
  color: #001646 !important;
  text-shadow: none;
}

body[data-page="contact"] .section .copy p,
body[data-page="contact"] .section p,
body[data-page="contact"] .lede {
  color: #002467 !important;
  text-shadow: none;
}

body[data-page="contact"] .eyebrow,
body[data-page="contact"] .eyebrow-dark {
  color: #0C5BE4 !important;
}

/* Form */
body[data-page="contact"] .field-label {
  color: #001646;
}

body[data-page="contact"] .field {
  color: #001646;
  background: #FFFFFF;
  border-color: #E1ECF7;
}

body[data-page="contact"] .field:focus {
  border-color: #0C5BE4;
  box-shadow: 0 0 0 3px rgba(12, 91, 228, 0.18);
}

body[data-page="contact"] .field::placeholder {
  color: #B3C8E2;
}

body[data-page="contact"] .primary,
body[data-page="contact"] button.primary {
  background: #001646 !important;
  color: #FFFFFF !important;
  box-shadow: 0 12px 28px rgba(0, 17, 56, 0.22);
}

body[data-page="contact"] .primary:hover,
body[data-page="contact"] button.primary:hover {
  background: #002467 !important;
  box-shadow: 0 18px 36px rgba(0, 36, 103, 0.28);
}

body[data-page="contact"] .secondary {
  background: #FFFFFF;
  color: #001646;
  border-color: #B3C8E2;
}

/* Cards / glass / QR */
body[data-page="contact"] .lux-card,
body[data-page="contact"] .info-card,
body[data-page="contact"] .qr-panel,
body[data-page="contact"] .glass,
body[data-page="contact"] .try-card,
body[data-page="contact"] .feature-strip,
body[data-page="contact"] .media-section {
  background: #FFFFFF !important;
  border-color: #E1ECF7 !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 10px 30px rgba(0, 17, 56, 0.08);
}

body[data-page="contact"] .lux-card h4,
body[data-page="contact"] .info-card h4,
body[data-page="contact"] .qr-panel b,
body[data-page="contact"] .qr-head {
  color: #001646 !important;
}

body[data-page="contact"] .lux-card p,
body[data-page="contact"] .info-card p,
body[data-page="contact"] .qr-panel p {
  color: #002467 !important;
}

body[data-page="contact"] .info-card a,
body[data-page="contact"] .copy a,
body[data-page="contact"] a[href^="mailto:"] {
  color: #0C5BE4 !important;
}

body[data-page="contact"] .lux-icon {
  background: #E1ECF7;
  color: #002467;
}

/* Contact 3D logo palette */
body[data-page="contact"] .nikonyx-about-logo-effect {
  --nx-ale-navy: #001138;
  --nx-ale-cyan: #E1ECF7;
  --nx-ale-blue: #0C5BE4;
  --nx-ale-white: #FFFFFF;
  --nx-ale-gold: #B3C8E2;
  background: transparent !important;
}

body[data-page="contact"] .nikonyx-about-logo-effect__eyebrow {
  color: #0C5BE4;
}

body[data-page="contact"] .nikonyx-about-logo-effect__title {
  color: #001646;
}

body[data-page="contact"] .nikonyx-about-logo-effect__lede,
body[data-page="contact"] .nikonyx-about-logo-effect__hint {
  color: #002467;
}

body[data-page="contact"] .nikonyx-about-logo-effect__gold-streak {
  background: linear-gradient(90deg, transparent, #B3C8E2 24%, #E1ECF7 50%, #B3C8E2 76%, transparent);
}

/* Biz / phone showcase on Contact */
body[data-page="contact"] .nx-biz-showcase,
body[data-page="contact"] .nx-biz-showcase.nx-biz-showcase--neutral {
  background: #F8FAFD;
}

body[data-page="contact"] .nx-biz-head .eyebrow,
body[data-page="contact"] .nx-biz-showcase.nx-biz-showcase--neutral .nx-biz-head .eyebrow {
  color: #0C5BE4 !important;
}

body[data-page="contact"] .nx-biz-head h2,
body[data-page="contact"] .nx-biz-chip-val,
body[data-page="contact"] .nx-biz-prod-card-label {
  color: #001646 !important;
}

body[data-page="contact"] .nx-biz-head p,
body[data-page="contact"] .nx-biz-chip-label {
  color: #002467 !important;
}

body[data-page="contact"] .nx-biz-chip,
body[data-page="contact"] .nx-biz-prod-card {
  background: #FFFFFF;
  border-color: #E1ECF7;
  box-shadow: 0 10px 28px rgba(0, 17, 56, 0.08);
}

body[data-page="contact"] .nx-page-chat-bubble--bot {
  background: #E1ECF7;
  color: #001646;
}

body[data-page="contact"] .nx-page-chat-bubble--user {
  background: #002467;
  color: #FFFFFF;
}

body[data-page="contact"] .nx-contact-carousel {
  background: #F8FAFD;
}

/* Footer (injected) */
body[data-page="contact"] .site-footer,
body[data-page="contact"] #footer-root,
body[data-page="contact"] #site-bottom-root {
  background: #FFFFFF !important;
  border-top-color: #E1ECF7 !important;
}

body[data-page="contact"] .site-footer h4,
body[data-page="contact"] .nx-brand-wordmark--footer {
  color: #001646 !important;
}

body[data-page="contact"] .site-footer .fcol a,
body[data-page="contact"] .site-footer p,
body[data-page="contact"] .site-footer .copy {
  color: #002467 !important;
}

body[data-page="contact"] .site-footer .fcol a:hover {
  color: #0C5BE4 !important;
}

body[data-page="contact"] .site-footer .divider,
body[data-page="contact"] .site-footer hr {
  border-color: #E1ECF7 !important;
  background: #E1ECF7 !important;
}