/* ==========================================================================
   NIKONYX HOME — premium fashion-tech redesign
   Tokens + homepage sections. Complements nikonyx.css without replacing it.
   ========================================================================== */

:root{
  /* Brand */
  --nx-navy:#001138;
  --nx-navy-deep:#000a22;
  --nx-navy-mid:#001646;
  --nx-olive:#002467;
  --nx-blue:#0C5BE4;
  --nx-blue-soft:#B3C8E2;
  --nx-mist:#E1ECF7;
  --nx-ivory:#F7F5F1;
  --nx-paper:#FFFEFB;
  --nx-white:#FFFFFF;
  --nx-ink:#001138;
  --nx-body:#2A3348;
  --nx-muted:#5A6578;
  --nx-line:rgba(0,17,56,.10);
  --nx-line-strong:rgba(0,17,56,.16);

  /* Type */
  --nx-serif:"Cormorant Garamond","Playfair Display",Georgia,serif;
  --nx-sans:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* Layout */
  --nx-shell:min(1180px,calc(100% - 48px));
  --nx-shell-wide:min(1280px,calc(100% - 40px));
  --nx-section-y:clamp(64px,8vw,112px);
  --nx-gap:clamp(20px,3vw,36px);
  --nx-radius-sm:6px;
  --nx-radius:12px;
  --nx-radius-lg:18px;
  --nx-shadow:0 18px 48px rgba(0,17,56,.10);
  --nx-shadow-sm:0 8px 24px rgba(0,17,56,.08);
  --nx-focus:0 0 0 3px rgba(12,91,228,.35);
  --nx-ease:cubic-bezier(.22,1,.36,1);
  --nx-dur:.55s;
  --nx-nav-h:72px;
}

html:has(body[data-page="home"]){
  scroll-behavior:auto; /* avoid double-smoothing with any remaining effects */
}
body[data-page="home"]{
  font-family:var(--nx-sans);
  color:var(--nx-ink);
  background:var(--nx-ivory);
  -webkit-font-smoothing:antialiased;
}
body[data-page="home"] .serif{font-family:var(--nx-serif)}
body[data-page="home"] .page{
  overflow:visible;
  background:transparent;
  position:relative;
  isolation:isolate;
}
body[data-page="home"] .nx-page-bg{display:none !important}

/* ---------- Focus & reduced motion ---------- */
body[data-page="home"] a:focus-visible,
body[data-page="home"] button:focus-visible{
  outline:none;
  box-shadow:var(--nx-focus);
}
@media (prefers-reduced-motion:reduce){
  body[data-page="home"] *,
  body[data-page="home"] *::before,
  body[data-page="home"] *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ---------- Buttons ---------- */
.nx-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:14px 26px;
  border-radius:999px;border:1px solid transparent;
  font-family:var(--nx-sans);font-size:14px;font-weight:600;
  letter-spacing:.01em;text-decoration:none;cursor:pointer;
  transition:transform .2s var(--nx-ease),background .2s ease,border-color .2s ease,box-shadow .2s ease,color .2s ease;
}
.nx-btn:active{transform:translateY(1px)}
.nx-btn--primary{
  background:var(--nx-navy);color:#fff;
  box-shadow:0 12px 28px rgba(0,17,56,.28);
}
.nx-btn--primary:hover{background:var(--nx-navy-mid);transform:translateY(-1px)}
.nx-btn--secondary{
  background:rgba(255,255,255,.92);color:var(--nx-navy);
  border-color:rgba(255,255,255,.55);
  backdrop-filter:blur(8px);
}
.nx-btn--secondary:hover{background:#fff;border-color:#fff}
.nx-btn--ghost{
  background:transparent;color:var(--nx-navy);
  border-color:var(--nx-line-strong);
}
.nx-btn--ghost:hover{border-color:var(--nx-navy);background:rgba(0,17,56,.03)}
.nx-btn--on-dark{
  background:var(--nx-blue-soft);color:var(--nx-navy);
  box-shadow:0 12px 28px rgba(0,17,56,.22);
}
.nx-btn--on-dark:hover{background:#fff;transform:translateY(-1px)}
.nx-btn--outline-light{
  background:transparent;color:#fff;
  border-color:rgba(255,255,255,.45);
}
.nx-btn--outline-light:hover{background:rgba(255,255,255,.08);border-color:#fff}

/* ---------- Section primitives ---------- */
.nx-shell{width:var(--nx-shell);margin-inline:auto}
.nx-shell--wide{width:var(--nx-shell-wide)}
.nx-section{padding:var(--nx-section-y) 0;position:relative}
.nx-section--ivory{background:var(--nx-ivory)}
.nx-section--paper{background:var(--nx-paper)}
.nx-section--mist{background:linear-gradient(180deg,#F4F7FB 0%,var(--nx-mist) 100%)}
.nx-section--navy{
  background:linear-gradient(165deg,var(--nx-navy-mid) 0%,var(--nx-navy) 55%,var(--nx-navy-deep) 100%);
  color:#fff;
}
.nx-eyebrow{
  display:inline-block;margin:0 0 14px;
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--nx-blue);
}
.nx-section--navy .nx-eyebrow{color:var(--nx-blue-soft)}
.nx-h2{
  margin:0 0 16px;
  font-family:var(--nx-serif);font-weight:600;
  font-size:clamp(32px,4.2vw,48px);line-height:1.08;
  letter-spacing:-.01em;color:var(--nx-ink);
}
.nx-section--navy .nx-h2{color:#fff}
.nx-lede{
  margin:0;max-width:38rem;
  font-size:clamp(15px,1.35vw,17px);line-height:1.65;color:var(--nx-body);
}
.nx-section--navy .nx-lede{color:rgba(255,255,255,.82)}
.nx-section-head{max-width:640px;margin-bottom:clamp(32px,4vw,48px)}
.nx-section-head--center{margin-inline:auto;text-align:center}
.nx-section-head--center .nx-lede{margin-inline:auto}

/* Reveal — progressive: only hide when html.nx-motion is armed (see nikonyx-motion.css) */
.nx-reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .nx-reveal{opacity:1;transform:none;transition:none}
}

/* ==========================================================================
   A · NAV (home overlay)
   ========================================================================== */
body[data-page="home"] .hdr.hdr--home{
  height:auto;min-height:0;padding-top:0;overflow:visible;
  background:transparent !important;
  isolation:auto;
}
body[data-page="home"] .hdr.hdr--home .stars,
body[data-page="home"] .hdr.hdr--home .stars2,
body[data-page="home"] .hdr.hdr--home .arc,
body[data-page="home"] .hdr.hdr--home .horizon,
body[data-page="home"] .hdr.hdr--home .emblem,
body[data-page="home"] .hdr.hdr--home > .badge{
  display:none !important;
}
body[data-page="home"] .hdr.hdr--home .navbar{
  height:72px;
  padding:0 max(24px,calc((100% - 1280px) / 2));
  gap:28px;
  background:linear-gradient(180deg,rgba(0,8,28,.42) 0%,rgba(0,8,28,.12) 65%,transparent 100%) !important;
  border-bottom:1px solid transparent !important;
  box-shadow:none !important;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  transition:background .28s ease,box-shadow .28s ease,border-color .28s ease,backdrop-filter .28s ease;
}
body[data-page="home"] .hdr.hdr--home .navbar::before{
  opacity:.35;height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(179,200,226,.5) 22%,rgba(255,255,255,.65) 50%,rgba(179,200,226,.5) 78%,transparent 100%);
}
body[data-page="home"] .hdr.hdr--home .navbar::after{opacity:0 !important;pointer-events:none}
body[data-page="home"] .hdr.hdr--home .navbar.is-scrolled,
body[data-page="home"] .hdr.hdr--home .navbar.is-solid{
  background:rgba(0,8,28,.92) !important;
  border-bottom-color:rgba(179,200,226,.18) !important;
  box-shadow:0 12px 36px rgba(0,8,24,.38) !important;
  backdrop-filter:blur(16px) saturate(1.15);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
}
body[data-page="home"] .hdr.hdr--home .logo{
  gap:12px;letter-spacing:.28em;font-size:15px;font-weight:600;
}
body[data-page="home"] .hdr.hdr--home .nx-brand-wordmark{
  letter-spacing:.28em;font-size:15px;
}
body[data-page="home"] .hdr.hdr--home .nav-links{
  gap:36px;
}
body[data-page="home"] .hdr.hdr--home .nav-links a{
  font-size:13px;font-weight:500;letter-spacing:.06em;opacity:.82;
  padding:8px 0;border-bottom:1.5px solid transparent;
}
body[data-page="home"] .hdr.hdr--home .nav-links a:hover{opacity:1;color:#fff}
body[data-page="home"] .hdr.hdr--home .nav-links .active{
  color:#fff;border-bottom-color:#B3C8E2;opacity:1;
}
body[data-page="home"] .hdr.hdr--home .nav-actions{gap:16px}
body[data-page="home"] .hdr.hdr--home .app-btn{
  background:#fff;color:var(--nx-navy);
  box-shadow:none;padding:10px 18px;font-size:12px;font-weight:700;
  letter-spacing:.04em;border-radius:2px;
}
body[data-page="home"] .hdr.hdr--home .app-btn:hover{
  background:#B3C8E2;transform:translateY(-1px);
}
body[data-page="home"] .hdr.hdr--home .lang-trigger{
  background:rgba(255,255,255,.94);min-width:0;padding:9px 12px;
  border-radius:2px;box-shadow:none;
}
body[data-page="home"] .hdr.hdr--home .lang-picker{min-width:0}
@media (max-width:900px){
  body[data-page="home"] .hdr.hdr--home .nav-links{display:none}
  body[data-page="home"] .hdr.hdr--home .app-btn{display:none}
  body[data-page="home"] .hdr.hdr--home .logo{
    display:inline-flex !important;
    align-items:center;
    gap:8px;
    min-width:auto;
    flex:0 0 auto;
    visibility:visible;
    opacity:1;
  }
  body[data-page="home"] .hdr.hdr--home .nx-brand-logo--nav,
  body[data-page="home"] .hdr.hdr--home .nx-brand-logo--disc{
    width:28px !important;height:28px !important;min-width:28px;flex:0 0 28px;
    display:inline-flex !important;
  }
  body[data-page="home"] .hdr.hdr--home .nx-brand-wordmark{
    display:inline-block !important;font-size:14px;letter-spacing:.16em;
  }
  body[data-page="home"] .hdr.hdr--home .lang-picker{min-width:0;margin-left:auto}
  body[data-page="home"] .hdr.hdr--home .lang-trigger{min-width:0;padding:9px 12px}
}
@media (max-width:480px){
  /* Override legacy rule that hid all .hdr .logo span (including the mark) */
  body[data-page="home"] .hdr.hdr--home .logo span,
  body[data-page="home"] .hdr.hdr--home .logo .nx-brand-logo,
  body[data-page="home"] .hdr.hdr--home .logo .nx-brand-wordmark{
    display:inline-flex !important;
  }
  body[data-page="home"] .hdr.hdr--home .logo .nx-brand-wordmark{display:inline-block !important}
  body[data-page="home"] .hdr.hdr--home .logo .nx-brand-logo__img{
    display:block !important;width:28px !important;height:28px !important;
  }
}

/* ==========================================================================
   B · HERO
   ========================================================================== */
.nx-hero{
  position:relative;
  min-height:min(92vh,920px);
  display:flex;align-items:flex-end;
  padding:calc(var(--nx-nav-h) + 48px) 0 clamp(56px,8vw,96px);
  color:#fff;overflow:hidden;
  isolation:isolate;
}
.nx-hero__media{
  position:absolute;inset:0;z-index:0;
}
.nx-hero__media img,
.nx-hero__media video{
  width:100%;height:100%;object-fit:cover;object-position:center 28%;
  display:block;
}
.nx-hero__media video{position:absolute;inset:0}
.nx-hero__veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(0,10,34,.78) 0%,rgba(0,17,56,.42) 42%,rgba(0,17,56,.18) 68%,rgba(0,17,56,.28) 100%),
    linear-gradient(180deg,rgba(0,17,56,.45) 0%,transparent 28%,rgba(0,10,34,.55) 100%);
}
.nx-hero__content{
  position:relative;z-index:2;
  width:var(--nx-shell);margin-inline:auto;
  max-width:560px;
  margin-right:auto;margin-left:max(24px,calc((100% - 1180px) / 2));
}
.nx-hero__badge{
  display:inline-block;margin:0 0 18px;
  padding:7px 12px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:999px;
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.92);background:rgba(255,255,255,.08);
}
.nx-hero h1{
  margin:0 0 18px;
  font-family:var(--nx-serif);font-weight:600;
  font-size:clamp(42px,6.2vw,72px);line-height:1.02;
  letter-spacing:-.02em;
}
.nx-hero h1 .nx-accent{color:var(--nx-blue-soft);font-style:italic;font-weight:500}
.nx-hero__lead{
  margin:0 0 28px;max-width:34rem;
  font-size:clamp(15px,1.5vw,18px);line-height:1.6;
  color:rgba(255,255,255,.88);
}
.nx-hero__actions{display:flex;flex-wrap:wrap;gap:12px}
.nx-hero__scroll{
  position:absolute;left:50%;bottom:22px;z-index:2;
  transform:translateX(-50%);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.7);pointer-events:none;
}
@media (max-width:720px){
  .nx-hero{
    min-height:78vh;align-items:flex-end;
    padding:calc(var(--nx-nav-h) + 36px) 0 64px;
  }
  .nx-hero__media img,
  .nx-hero__media video{object-position:68% 20%}
  .nx-hero__veil{
    background:
      linear-gradient(180deg,rgba(0,17,56,.5) 0%,rgba(0,10,34,.35) 35%,rgba(0,10,34,.82) 100%);
  }
  .nx-hero h1{font-size:clamp(36px,10vw,48px);white-space:normal}
}

/* ==========================================================================
   C · TRY-ON
   ========================================================================== */
.nx-tryon{
  background:var(--nx-paper);
  padding:var(--nx-section-y) 0;
  border-top:1px solid var(--nx-line);
}
.nx-tryon__grid{
  width:var(--nx-shell-wide);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(20px,3vw,40px);align-items:center;
}
.nx-tryon__copy .nx-h2{margin-bottom:12px}
.nx-tryon__copy .nx-lede{margin-bottom:22px}
.nx-tryon__points{
  list-style:none;margin:0 0 28px;padding:0;
  display:grid;gap:12px;
}
.nx-tryon__points li{
  display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;
  font-size:14px;line-height:1.5;color:var(--nx-body);
}
.nx-tryon__points strong{display:block;color:var(--nx-ink);font-size:14px;margin-bottom:2px}
.nx-tryon__num{
  width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;
  font-size:12px;font-weight:700;color:var(--nx-navy);
  background:var(--nx-mist);border:1px solid var(--nx-line);
}
.nx-tryon__stage{
  display:flex;flex-direction:column;align-items:center;gap:28px;
}
body[data-page="home"] .nx-tryon .tryon-card{
  background:transparent;border:0;box-shadow:none;padding:0;margin:0;
}
body[data-page="home"] .nx-tryon .ar-fit-phone,
body[data-page="home"] .nx-tryon .tryon-demo .ar-fit-phone{
  --nx-home-fit-h:calc(100dvh - var(--nx-nav-h,74px) - 72px);
  --nx-phone-w:min(356px, 78vw, calc(var(--nx-home-fit-h) * 9 / 19.5)) !important;
  max-width:var(--nx-phone-w) !important;width:var(--nx-phone-w) !important;margin:0;
}
body[data-page="home"] .nx-tryon .qr-panel.download-card{
  width:100%;max-width:360px;margin:0;
  background:var(--nx-white) !important;
  border:1px solid var(--nx-line);
  border-radius:var(--nx-radius-lg);
  box-shadow:var(--nx-shadow-sm);
}
@media (max-width:980px){
  .nx-tryon__grid{grid-template-columns:1fr;text-align:left}
  body[data-page="home"] .nx-tryon .ar-fit-phone,
  body[data-page="home"] .nx-tryon .tryon-demo .ar-fit-phone{
    --nx-phone-w:min(300px,78vw) !important;
    max-width:min(300px,78vw) !important;width:min(300px,78vw) !important;
  }
}

/* ==========================================================================
   Live app-faithful try-on chrome (interactive, site assets)
   Matches Flutter: curved header · left rail · Preview · Outfit · Try On/Wardrobe · yacht nav
   ========================================================================== */
.nx-live-screen{
  background:
    radial-gradient(120% 70% at 50% 0%,#001a4a 0%,#001138 45%,#f4f6fb 45.2%);
}
.nx-live-topbar{
  position:absolute;top:0;left:0;right:0;z-index:8;height:42px;
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 10px 0;
  background:linear-gradient(180deg,#001646 0%,#001138 78%,transparent);
  border-radius:0 0 40% 40% / 0 0 18px 18px;
}
.nx-live-topbar::after{
  content:"";position:absolute;left:8%;right:8%;bottom:-1px;height:2px;
  background:linear-gradient(90deg,transparent,rgba(200,220,255,.55),transparent);
  border-radius:2px;
}
.nx-live-ico{
  width:24px;height:24px;border:1px solid rgba(255,255,255,.35);
  border-radius:50%;background:rgba(255,255,255,.08);
  display:grid;place-items:center;gap:2px;padding:0;cursor:default;
}
.nx-live-ico span{display:block;width:10px;height:1.5px;background:#fff;border-radius:2px}
.nx-live-logo{width:24px;height:24px}
.nx-live-top-right{display:flex;gap:6px}
.nx-live-ico--bell::before{content:"";width:9px;height:9px;border:1.5px solid #fff;border-radius:50% 50% 40% 40%}
.nx-live-ico--bell span,.nx-live-ico--user span{display:none}
.nx-live-ico--user::before{content:"";width:9px;height:9px;border:1.5px solid #fff;border-radius:50%}

.nx-live-body.try-layout{
  position:absolute;inset:44px 0 54px;display:grid !important;
  grid-template-columns:42px minmax(0,1fr) !important;
  gap:6px;padding:4px 8px 0;min-height:0;
}
.nx-live-rail{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:8px 3px;border-radius:22px;align-self:start;
  background:linear-gradient(180deg,rgba(11,34,101,.96),rgba(6,16,56,.96));
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 10px 22px rgba(11,34,101,.28);
}
.nx-live-rail-item{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  color:rgba(255,255,255,.72);font-size:5px;font-weight:700;line-height:1.05;text-align:center;
}
.nx-live-rail-item.is-active{color:#fff}
.nx-live-rail-item .ar-fit-rail-ico{
  width:22px;height:22px;border-radius:50%;
  border:1px solid rgba(255,255,255,.35);
  display:grid;place-items:center;background:rgba(255,255,255,.06);
}
.nx-live-rail-item.is-active .ar-fit-rail-ico{
  box-shadow:0 0 0 1px rgba(179,200,226,.85);background:rgba(12,91,228,.25);
}
.nx-live-rail-item span:last-child{max-width:36px}

.nx-live-main{
  min-width:0;min-height:0;display:flex;flex-direction:column;gap:6px;
}
.nx-live-preview{
  position:relative;flex:1;min-height:0;border-radius:14px;overflow:hidden;
  background:#e8eef8;border:1px solid rgba(0,17,56,.08);
}
.nx-live-preview .try-model-float,
.nx-live-preview .try-photo-single{
  width:100%;height:100%;object-fit:cover;object-position:center 18%;
}
.nx-live-preview-badge{
  position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:3;
  font-size:6px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:#fff;background:rgba(1,9,32,.82);padding:3px 8px;border-radius:999px;
}
.nx-live-outfit-bar{
  background:#fff;border-radius:14px;padding:7px 8px 8px;
  border:1px solid rgba(0,17,56,.08);
  box-shadow:0 8px 18px rgba(0,17,56,.08);
}
.nx-live-outfit-head{
  display:flex;align-items:center;gap:6px;margin-bottom:6px;flex-wrap:wrap;
}
.nx-live-outfit-head strong{font-size:8px;color:#001138}
.nx-live-outfit-count{
  font-size:6px;font-weight:700;color:#0C5BE4;
  background:#E1ECF7;padding:2px 6px;border-radius:999px;
}
.nx-live-outfit-label{margin-left:auto;font-size:6.5px;font-weight:600;color:#5a6578}
.nx-live-thumbs{display:flex;gap:5px;overflow:auto;padding-bottom:2px;margin-bottom:7px}
.nx-live-thumb{
  flex:0 0 34px;width:34px;height:40px;padding:0;border-radius:8px;
  border:1.5px solid #d7deea;background:#f4f7fb;overflow:hidden;cursor:pointer;
}
.nx-live-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.nx-live-thumb.active{border-color:#c9a227;box-shadow:0 0 0 1px rgba(201,162,39,.35)}
.nx-live-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.nx-live-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:4px;
  min-height:28px;border-radius:999px;font-size:8px;font-weight:800;cursor:pointer;
  border:1px solid transparent;
}
.nx-live-btn--primary,
.nx-live-tryon .ar-fit-tryon-btn,
.nx-live-screen .ar-fit-tryon-btn{
  background:#001138 !important;color:#fff !important;border:0 !important;
  position:static !important;transform:none !important;left:auto !important;bottom:auto !important;
  padding:6px 8px !important;font-size:8px !important;width:auto !important;
}
.nx-live-btn--ghost{
  background:#fff;color:#001138;border-color:#c5d0e2;
}
.nx-live-btn .ar-fit-rail-ico{
  width:14px;height:14px;border:0;background:transparent;box-shadow:none;
}
.nx-live-btn .ar-fit-rail-ico .nx-icon-ring{width:12px;height:12px}
body[data-page="home"] .nx-live-tryon .ar-fit-rail-item span:last-child,
body[data-page="home"] .nx-live-body .nx-live-rail-item span:last-child{display:block}

/* Hide legacy ask pill / room label when using live chrome */
.nx-live-tryon .ar-fit-ask-pill,
.nx-live-tryon .ar-fit-room-label{display:none !important}

/* ==========================================================================
   D · AI STYLIST STEPS
   ========================================================================== */
.nx-stylist{background:var(--nx-ivory)}
.nx-stylist__grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--nx-gap);
}
.nx-stylist-card{
  position:relative;overflow:hidden;
  background:var(--nx-white);
  border:1px solid var(--nx-line);
  border-radius:var(--nx-radius-lg);
  box-shadow:var(--nx-shadow-sm);
  transition:transform .25s var(--nx-ease),box-shadow .25s ease;
}
.nx-stylist-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--nx-shadow);
}
.nx-stylist-card__media{
  aspect-ratio:4/5;overflow:hidden;background:var(--nx-mist);
}
.nx-stylist-card__media img{
  width:100%;height:100%;object-fit:cover;object-position:center 15%;
  transition:transform .7s var(--nx-ease);
}
.nx-stylist-card:hover .nx-stylist-card__media img{transform:scale(1.04)}
.nx-stylist-card__body{padding:22px 22px 26px}
.nx-stylist-card__step{
  display:inline-block;margin-bottom:10px;
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--nx-blue);
}
.nx-stylist-card h3{
  margin:0 0 8px;font-family:var(--nx-serif);font-size:26px;font-weight:600;line-height:1.15;
}
.nx-stylist-card p{margin:0;font-size:14px;line-height:1.55;color:var(--nx-muted)}
@media (max-width:900px){
  .nx-stylist__grid{grid-template-columns:1fr}
  .nx-stylist-card{display:grid;grid-template-columns:140px 1fr;align-items:stretch}
  .nx-stylist-card__media{aspect-ratio:auto;min-height:160px}
}
@media (max-width:560px){
  .nx-stylist-card{grid-template-columns:1fr}
  .nx-stylist-card__media{aspect-ratio:16/11}
}

body[data-page="home"] .nx-hero__badge{white-space:nowrap}
body[data-page="home"] .nx-inspire .nx-contact-carousel__eyebrow,
body[data-page="home"] .nx-inspire .nx-contact-carousel__title,
body[data-page="home"] .nx-inspire .nx-contact-carousel__sub{
  /* Keep carousel motion; section head carries the editorial framing */
  display:none !important;
}

/* ==========================================================================
   F · HOW IT WORKS
   ========================================================================== */
.nx-how{background:var(--nx-mist)}
.nx-how__layout{
  width:var(--nx-shell-wide);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,340px);
  gap:clamp(28px,4vw,56px);align-items:start;
}
.nx-how__steps{
  list-style:none;margin:0;padding:0;
  display:grid;gap:0;
  border-top:1px solid var(--nx-line-strong);
}
.nx-how__step{
  display:grid;grid-template-columns:64px 1fr;gap:18px;
  padding:22px 0;border-bottom:1px solid var(--nx-line-strong);
}
.nx-how__step-num{
  font-family:var(--nx-serif);font-size:34px;font-weight:600;
  color:var(--nx-blue);line-height:1;
}
.nx-how__step h3{
  margin:0 0 6px;font-size:18px;font-weight:600;color:var(--nx-ink);
}
.nx-how__step p{margin:0;font-size:14px;line-height:1.55;color:var(--nx-muted)}
.nx-how__demo{display:flex;justify-content:center;position:sticky;top:calc(var(--nx-nav-h) + 24px)}
body[data-page="home"] .nx-how .nx-ai-video{
  background:transparent !important;padding:0 !important;text-align:center;
}
body[data-page="home"] .nx-how .nx-ai-video > h2,
body[data-page="home"] .nx-how .nx-ai-video > .nx-ai-lede,
body[data-page="home"] .nx-how .nx-ai-video > .nx-ai-note{display:none}
@media (max-width:960px){
  .nx-how__layout{grid-template-columns:1fr}
  .nx-how__demo{position:static;order:-1;margin-bottom:12px}
}

/* ==========================================================================
   G · INSPIRATION — base; editorial polish lives in nikonyx-experience.css
   ========================================================================== */
.nx-inspire{background:var(--nx-ivory);overflow:visible}
.nx-inspire__grid{
  width:var(--nx-shell);margin-inline:auto;
  display:grid;gap:12px;align-items:start;
}
.nx-inspire__masonry{
  columns:3;column-gap:12px;min-width:0;
}
.nx-inspire__cell{
  position:relative;overflow:hidden;border-radius:0;
  background:var(--nx-mist);margin:0 0 12px;box-shadow:none;
  break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  width:100%;display:block;
}
.nx-inspire__cell--hero{margin:0}
.nx-inspire__cell img{
  width:100%;height:auto;object-fit:contain;display:block;
}
body[data-page="home"] .nx-inspire .nx-contact-carousel{
  margin-top:clamp(28px,4vw,48px);
  background:transparent !important;
}

/* ==========================================================================
   H · TRUST (truthful — no fake press)
   ========================================================================== */
.nx-trust{
  background:var(--nx-paper);
  border-top:1px solid var(--nx-line);
  padding:clamp(48px,6vw,72px) 0;
}
.nx-trust__grid{
  width:var(--nx-shell);margin-inline:auto;
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
}
.nx-trust-item{
  padding:22px 20px;
  border:1px solid var(--nx-line);
  border-radius:var(--nx-radius);
  background:var(--nx-white);
}
.nx-trust-item h3{
  margin:0 0 8px;font-size:15px;font-weight:650;color:var(--nx-ink);
}
.nx-trust-item p{margin:0;font-size:13px;line-height:1.5;color:var(--nx-muted)}
@media (max-width:900px){
  .nx-trust__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .nx-trust__grid{grid-template-columns:1fr}
}

/* ==========================================================================
   I · FINAL CTA
   ========================================================================== */
/* Final CTA layout owned by nikonyx-experience.css on home */
body[data-page="home"] .cta.site-bottom-cta:not(.nx-final-cta){
  position:relative;overflow:hidden;
  margin:0;padding:clamp(72px,10vw,120px) 24px;
  text-align:center;
  background:
    radial-gradient(ellipse 70% 80% at 50% 0%,rgba(12,91,228,.22),transparent 55%),
    linear-gradient(180deg,var(--nx-navy-mid),var(--nx-navy-deep));
  color:#fff;
}

/* ==========================================================================
   J · FOOTER refinements (home)
   ========================================================================== */
body[data-page="home"] .site-footer{
  background:var(--nx-ivory);
  border-top:1px solid var(--nx-line);
  padding:64px 0 0;
}
body[data-page="home"] .footer-grid{
  grid-template-columns:minmax(200px,280px) repeat(3,1fr);
  gap:36px;
}
body[data-page="home"] .footer-tagline{color:var(--nx-muted)}
body[data-page="home"] .copyright{color:var(--nx-muted)}
@media (max-width:800px){
  body[data-page="home"] .footer-grid{
    grid-template-columns:1fr 1fr;
  }
  body[data-page="home"] .footer-brand{grid-column:1 / -1}
}
@media (max-width:520px){
  body[data-page="home"] .footer-grid{grid-template-columns:1fr}
  body[data-page="home"] .footer-bottom{
    flex-direction:column;align-items:flex-start;gap:16px;
  }
}

/* Hide legacy empty / duplicate home chrome */
body[data-page="home"] .content-area,
body[data-page="home"] .featured,
body[data-page="home"] .trusted,
body[data-page="home"] .features-strip{display:none !important}

/* Overflow guard */
body[data-page="home"]{overflow-x:hidden}
body[data-page="home"] img{max-width:100%}

/* ==========================================================================
   Yacht footer (matches Flutter CosmicFooter)
   ========================================================================== */
.nx-yacht-nav{
  position:absolute;left:6px;right:6px;bottom:6px;height:52px;
  background:transparent;border:0;box-shadow:none;z-index:6;
  pointer-events:none;
}
.nx-yacht-nav__bar{
  position:absolute;left:0;right:0;bottom:0;height:40px;
  display:flex;align-items:stretch;
  background:#fff;border-radius:34px;
  border:1.5px solid rgba(16,35,90,.70);
  box-shadow:0 8px 18px rgba(11,34,101,.16);
}
.nx-yacht-nav .cn-item{
  flex:1;gap:0;padding:0;opacity:.72;
}
.nx-yacht-nav .cn-item.is-active{opacity:0}
.nx-yacht-nav .cn-lbl{font-size:5px;color:#001138}
.nx-yacht-nav .cn-sep{display:none}
.nx-yacht-nav__medallion{
  position:absolute;bottom:12px;width:42px;height:42px;
  left:calc((100% / 5) * var(--nx-tab, 2) + (100% / 5 - 42px) / 2);
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#1a3a7a,#08122e 70%);
  border:2px solid rgba(180,220,255,.45);
  box-shadow:0 0 0 2px rgba(80,160,255,.35),0 8px 18px rgba(11,34,101,.35);
  display:grid;place-items:center;
  transition:left .38s cubic-bezier(.22,1,.36,1);
}
.nx-yacht-nav__medallion .nx-icon-ring,
.nx-yacht-nav__medallion .nx-brand-logo{width:22px;height:22px}
.ar-fit-screen .nx-yacht-nav,
.nx-app-phone__screen .nx-yacht-nav{left:8px;right:8px;bottom:8px}

/* Active rail item in try-on mock — show Flutter labels on home */
body[data-page="home"] .tryon-demo .ar-fit-rail-item span:last-child{
  display:block;font-size:5.5px;line-height:1.1;font-weight:700;
  color:rgba(255,255,255,.72);text-align:center;max-width:100%;
}
body[data-page="home"] .tryon-demo .ar-fit-rail-item.is-active span:last-child{color:#fff}
body[data-page="home"] .tryon-demo .ar-fit-body.try-layout{
  grid-template-columns:36px minmax(0,1fr) 64px;
}
body[data-page="home"] .tryon-demo .ar-fit-rail{padding:6px 2px;gap:5px}
.ar-fit-rail-item.is-active{color:#fff}
.ar-fit-rail-item.is-active .ar-fit-rail-ico{
  box-shadow:0 0 0 1px rgba(179,200,226,.8);
}
.nx-yacht-nav .cn-item{pointer-events:auto;cursor:pointer}

/* ==========================================================================
   How-it-works interactive phone (app-faithful tabs + site assets)
   ========================================================================== */
.nx-app-phone{width:min(100%,300px);margin:0 auto}
.nx-app-phone__bezel{
  position:relative;aspect-ratio:188/392;padding:9px;border-radius:34px;
  background:linear-gradient(160deg,#1a2238,#05070c 55%,#121826);
  box-shadow:0 30px 64px rgba(1,9,32,.38),inset 0 1px 0 rgba(255,255,255,.1);
}
.nx-app-phone__bezel::before{
  content:"";position:absolute;top:12px;left:50%;transform:translateX(-50%);
  width:76px;height:18px;border-radius:11px;background:#05070c;z-index:20;
}
.nx-app-phone__screen{
  position:relative;height:100%;border-radius:25px;overflow:hidden;
}
/* Legacy how-phone tabs — only apply when NOT using the nxp shell */
.nx-app-phone .nx-app-tab{
  position:absolute;inset:44px 0 52px;opacity:0;visibility:hidden;
  pointer-events:none;padding:6px 8px 0;display:flex;flex-direction:column;gap:6px;
  transition:opacity .35s ease;
}
.nx-app-phone .nx-app-tab.is-active{opacity:1;visibility:visible;pointer-events:auto}
.nx-app-ask{
  display:flex;flex-direction:column;gap:1px;
  padding:7px 10px;border-radius:999px;
  background:rgba(255,255,255,.96);color:#001138;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
}
.nx-app-ask strong{font-size:8px;font-weight:800}
.nx-app-ask span{font-size:6.5px;color:#5a6578}
.nx-app-ask--home{border-radius:14px}
.nx-app-av{width:16px;height:16px;border-radius:50%;background:#0C5BE4}

.nx-how-tryon{flex:1;min-height:0;display:grid;grid-template-columns:34px 1fr;gap:5px}
.nx-live-rail--mini{
  gap:3px;padding:6px 2px;
}
.nx-live-rail--mini span{
  width:100%;text-align:center;font-size:4.2px;font-weight:700;
  color:rgba(255,255,255,.68);line-height:1.05;
}
.nx-live-rail--mini span.is-on{color:#fff}
.nx-how-stage{
  position:relative;border-radius:12px;overflow:hidden;background:#e8eef8;min-height:0;
}
.nx-how-stage > img{width:100%;height:100%;object-fit:cover;object-position:center 18%;display:block}
.nx-how-cta-row{
  position:absolute;left:6px;right:6px;bottom:8px;display:grid;grid-template-columns:1fr 1fr;gap:5px;
}
.nx-how-pill{
  text-align:center;font-size:6.5px;font-weight:800;padding:5px 4px;border-radius:999px;
  background:#fff;color:#001138;border:1px solid #c5d0e2;
}
.nx-how-pill--dark{background:#001138;color:#fff;border-color:#001138}

.nx-how-wardrobe{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:5px}
.nx-how-wd-head{
  font-size:7px;font-weight:800;color:#fff;background:#001646;
  border-radius:8px;padding:4px 8px;
}
.nx-how-wd-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.nx-how-wd-grid img{
  height:58px;object-fit:contain;background:#fff;padding:3px;
  border-radius:8px;border:1px solid #dfe5f0;box-sizing:border-box;
}

.nx-how-home{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px}
.nx-how-home-lbl{margin:0;font-size:8px;font-weight:800;color:#001138}
.nx-how-home-hero{
  position:relative;flex:1;min-height:0;border-radius:14px;overflow:hidden;background:#fff;
  box-shadow:0 8px 18px rgba(0,17,56,.12);
}
.nx-how-home-hero img{width:100%;height:100%;object-fit:cover;object-position:center 15%}
.nx-how-home-hero span{
  position:absolute;left:8px;bottom:8px;font-size:7px;font-weight:800;
  background:#001138;color:#fff;padding:5px 10px;border-radius:999px;
}

.nx-how-feed{flex:1;min-height:0;overflow:hidden}
.nx-how-feed article{
  height:100%;display:flex;flex-direction:column;background:#fff;border-radius:12px;overflow:hidden;
}
.nx-how-feed header{display:flex;align-items:center;gap:6px;padding:7px 8px}
.nx-how-feed header strong{font-size:7px;color:#001138}
.nx-how-feed > article > img{flex:1;min-height:0;width:100%;object-fit:cover;object-position:center 20%}
.nx-how-feed-acts{
  display:flex;justify-content:space-between;padding:6px 8px;
  font-size:6px;font-weight:700;color:#002467;
}

.nx-how-outfits{flex:1;min-height:0;display:flex;flex-direction:column;gap:6px}
.nx-how-seg{display:flex;gap:6px;justify-content:center}
.nx-how-seg span{
  font-size:7px;font-weight:700;padding:4px 10px;border-radius:999px;
  background:#fff;border:1px solid #dfe5f0;color:#5a6a84;
}
.nx-how-seg span.is-on{background:#001138;border-color:#001138;color:#fff}
.nx-how-look{
  display:flex;gap:6px;align-items:center;padding:6px;border-radius:10px;
  background:#fff;border:1px solid #dfe5f0;
}
.nx-how-look img{width:36px;height:44px;object-fit:cover;border-radius:6px}
.nx-how-look strong{display:block;font-size:7px;color:#001138}
.nx-how-look span{font-size:6px;color:#5a6a84}

.nx-app-phone__caption{
  margin:12px 0 0;text-align:center;font-size:12px;font-weight:600;color:var(--nx-muted);
}
.nx-how__step{
  cursor:pointer;transition:background .2s ease,border-color .2s ease;
  border-radius:10px;padding:18px 10px;
}
.nx-how__step.is-active{
  background:rgba(255,255,255,.7);
  box-shadow:inset 3px 0 0 var(--nx-blue);
}
.nx-app-phone__screen .screen-nav,
.nx-live-screen .screen-nav{height:52px}
.nx-live-preview .ar-fit-arrow{z-index:4}

/* Skip link + coming-soon store badges */
.nx-skip-link{
  position:absolute;left:12px;top:-48px;z-index:10000;
  padding:10px 14px;border-radius:999px;
  background:#001138;color:#fff;font:600 13px/1 Poppins,system-ui,sans-serif;
  text-decoration:none;transition:top .15s ease;
}
.nx-skip-link:focus,.nx-skip-link:focus-visible{top:12px;outline:2px solid #E2B57C;outline-offset:2px}
.store.store--soon{
  cursor:default;opacity:.72;pointer-events:none;
  text-decoration:none;user-select:none;
}