/* ============================================================
   NxtAtlas — home page
   Loads after tokens.css. Calm layout, the logo carries the brand.
   ============================================================ */

/* ============================ HEADER ============================ */
.site-head{
  position:fixed; top:0; left:0; right:0; z-index:20; padding-block:18px;
  transition:background var(--fast) ease, border-color var(--fast) ease;
  border-bottom:1px solid transparent;
}
.site-head.is-stuck{
  background:rgba(10,11,13,.82);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom-color:var(--line);
}
/* the header is full-bleed: the lockup sits at the left edge and the nav at
   the right, instead of both being pulled inward by the 1200px content column */
.site-head .head-in{
  max-width:none;
  padding-inline:clamp(20px, 3.2vw, 60px);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.head-mark{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; }
.head-logo{ border-radius:8px; display:block; }
.head-mark .wm{ font-size:13px; }
.head-nav{ display:flex; align-items:center; gap:clamp(14px,2.4vw,28px); }
.head-nav > a:not(.btn){ font-size:14px; }
.head-cta{ padding:10px 20px; font-size:14px; }
@media (max-width:700px){ .head-nav > a:not(.btn):not(.head-cta){ display:none; } }

/* ============================ HERO ============================ */
/* The avatar is the hero. Everything else defers to it. */
.hero{ min-height:100svh; display:flex; align-items:center; position:relative;
       padding-block:104px 72px; text-align:center; }
.hero-in{ display:flex; flex-direction:column; align-items:center; position:relative; z-index:1; }

/* a warm bloom that swells behind the avatar as it arrives */
.hero-bloom{
  position:absolute; left:50%; top:40%; translate:-50% -50%; z-index:0;
  width:min(1150px, 96vw); aspect-ratio:1; pointer-events:none;
  /* softness lives in the gradient stops, not in a filter — an animated
     blur of this size re-rasterises every frame and is what made the page
     stutter around the hero */
  background:radial-gradient(circle,
    rgba(209,160,90,.20) 0%, rgba(209,160,90,.13) 22%,
    rgba(209,160,90,.05) 45%, transparent 68%);
  will-change:opacity;
}

.hero-logo{
  width:clamp(280px, 37vw, 440px); height:auto; display:block;
  /* the asset carries real alpha now — no blend hacks needed */
}

.hero-tagline{ margin-top:clamp(6px,1.6vw,16px); text-align:center; max-width:44ch; }
.hero-cta{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:30px; }

/* ---- the numbers, sitting under the call to action ---- */
.hero-stats{
  margin-top:clamp(30px,4.6vh,46px);
  display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(28px,6vw,66px);
}
.hstat{ display:flex; flex-direction:column; align-items:center; gap:5px; }
.hstat-n{
  font-family:var(--display); font-weight:300;
  font-size:clamp(1.85rem,3.4vw,2.5rem); line-height:1; letter-spacing:-.03em;
  color:var(--brass);
}

/* ---- pills for the surfaces it runs on ---- */
.hero-chips{
  list-style:none; margin:clamp(26px,3.8vh,40px) 0 0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
}
.hero-chips li{
  font-size:12.5px; letter-spacing:.02em; color:var(--paper-dim);
  border:1px solid var(--line); border-radius:999px; padding:7px 16px;
  background:rgba(236,232,225,.022);
  transition:color var(--fast) ease, border-color var(--fast) ease,
             background var(--fast) ease, transform var(--fast) var(--ease);
}
.hero-chips li:hover{
  color:var(--brass); border-color:var(--brass-soft);
  background:var(--brass-faint); transform:translateY(-2px);
}

@media (max-width:640px){
  .hero{ min-height:auto; padding-block:104px 56px; }
  .hero-logo{ width:min(72vw, 310px); }
  .hero-stats{ gap:26px 34px; }
}

/* ============================ PRODUCTS ============================ */
.prod-grid{
  margin-top:28px; display:grid; gap:16px;
  grid-template-columns:repeat(auto-fit, minmax(270px, 1fr));
}
.card{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:12px; text-decoration:none;
  padding:26px 24px 24px; border:1px solid var(--line); border-radius:16px;
  background:linear-gradient(180deg, rgba(236,232,225,.028), transparent 70%);
  /* transform is left to GSAP (3D tilt); CSS only handles colour */
  transition:border-color var(--fast) ease, background var(--fast) ease;
}
.card:not(.is-soon):hover{
  border-color:var(--brass-soft);
  background:linear-gradient(180deg, rgba(209,160,90,.06), transparent 72%);
}
/* the spotlight itself — motion.js feeds it --mx / --my */
.card::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),
                             rgba(209,160,90,.14), transparent 70%);
  transition:opacity .32s ease;
}
.card:hover::after{ opacity:1; }
.card > *{ position:relative; z-index:1; }

.card-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.card-n{ font-family:var(--display); font-size:12px; font-weight:500;
         letter-spacing:.14em; color:var(--brass); }
.card h3{ margin:0; }
.card p{ color:var(--paper-dim); font-size:14.5px; line-height:1.62; }
.card-go{ margin-top:auto; padding-top:8px; font-size:14px; color:var(--brass); }
.is-soon h3{ color:var(--paper-soft); }

/* ============================ APPROACH ============================ */
.approach h2{ margin:18px 0 0; }
.approach .lede{ margin-top:18px; }
.tenets{ margin-top:clamp(38px,5vw,58px); display:grid; gap:clamp(24px,3vw,40px);
         grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); }
/* the hairline is a pseudo element so it can be drawn in from the left */
.tenet{ padding-top:20px; position:relative; }
.tenet::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:var(--line); transform:scaleX(var(--draw, 1)); transform-origin:0 50%;
}
.tenet h3{ margin:0 0 10px; }
.tenet p{ color:var(--paper-dim); font-size:14.5px; line-height:1.62; }

/* ============================ CLOSING ============================ */
.closing-in{ max-width:640px; }
.closing .lede{ margin-top:18px; }
.closing-cta{ margin-top:30px; }

/* ============================ FOOTER ============================ */
.site-foot{ padding-block:30px 44px; }
.foot-in{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
          gap:14px 28px; padding-top:24px; border-top:1px solid var(--line); }
.foot-brand{ display:inline-flex; align-items:center; gap:9px; }
.foot-logo{ border-radius:6px; display:block; }
.site-foot .wm{ font-size:11.5px; color:var(--paper-soft); }
.site-foot .wm .brass{ color:var(--brass); }
.foot-nav{ display:flex; gap:20px; }

/* ============================ MARQUEE ============================ */
.marquee{
  overflow:hidden; padding-block:22px;
  contain:paint;
  border-block:1px solid var(--line);
  mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track{
  display:flex; align-items:center; gap:26px; width:max-content;
  will-change:transform; backface-visibility:hidden;
  font-family:var(--display); font-size:clamp(15px,1.7vw,20px); font-weight:400;
  letter-spacing:.02em; color:var(--paper-soft); white-space:nowrap;
}
.marquee-track span:nth-child(even){ color:var(--brass); }

/* ============================ FIGURES ============================ */
.figures{ padding-block:clamp(50px,7vh,84px); }
.fig-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:clamp(22px,4vw,40px);
  position:relative; padding-block:clamp(28px,5vh,46px);
}
.fig-grid::before,.fig-grid::after{
  content:""; position:absolute; left:0; right:0; height:1px; background:var(--line);
  transform:scaleX(var(--draw, 1)); transform-origin:0 50%;
}
.fig-grid::before{ top:0; }
.fig-grid::after{ bottom:0; }
.fig{ display:flex; flex-direction:column; gap:8px; }
.fig-n{
  font-family:var(--display); font-weight:300;
  font-size:clamp(2.4rem,5.4vw,3.8rem); line-height:1; letter-spacing:-.04em;
  color:var(--brass);
}

/* cards get depth so the tilt reads as 3D */
.prod-grid{ perspective:1000px; }
.card{ transform-style:preserve-3d; will-change:transform; }

/* card face lifts on hover; the arrow slides with it */
.card-go{ transition:transform var(--fast) ease; }
.card:not(.is-soon):hover .card-go{ transform:translateX(4px); }

/* the header lockup turns a few degrees when you point at it */
.head-logo{ transition:transform .5s var(--ease); }
.head-mark:hover .head-logo{ transform:rotate(-8deg) scale(1.06); }