/* ========================================
   Midnight Flare — Hairline Grid + Glass
   ======================================== */

:root {
  --bg:    #09090b;
  --line:  #27272a;
  --glass: rgba(255,255,255,.045);
  --glass2:rgba(255,255,255,.028);
  --text:  #f4f4f5;
  --muted: #a1a1aa;
  --o1:    #f97316;
  --o2:    #fbbf24;
  --pad:   clamp(18px, 2.6vw, 36px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); overflow-x: hidden; }

.bg-stack{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .72;
}

.bg-stack .stack{
  position: absolute;
  left: 50%;
  top: 18vh;
  translate: -50% 0;
  margin-top: 0;
  width: min(860px, 86vw);
  height: min(380px, 42vh);
  filter: saturate(.95);
}

@media (max-width: 880px){
  .bg-stack .stack{ top: 14vh; width: min(760px, 92vw); height: 280px; opacity: .62; }
}

/* ---------- noise overlay ---------- */
.noise {
  position: fixed; inset: 0; z-index: 100; pointer-events: none;
  opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ---------- page shell ---------- */
.page {
  width: min(1220px, calc(100% - 1.5rem));
  margin-inline: auto;
  padding: 20px 0 60px;
  position: relative;
  z-index: 1;
}

/* ======== GRID SYSTEM (Hairlines) ======== */
.g {
  display: grid;
  border: 1px solid var(--line);
  border-top: none;
}
.g:first-child { border-top: 1px solid var(--line); }

.g-cell {
  padding: var(--pad);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.g-cell:last-child { border-right: 0; }

/* ── Header ── */
.g-header {
  grid-template-columns: 1.4fr 1fr;
}
.g-header__l { display: flex; align-items: center; }
.g-header__r { border-right: 0; }

/* ── Hero ── */
.g-hero {
  grid-template-columns: 1.25fr .75fr;
}
.g-hero__main { display: flex; flex-direction: column; justify-content: center; }
.g-hero__side {
  border-right: 0;
  display: flex; flex-direction: column; gap: 1px;
  padding: 0;
}
.g-hero__side > .glass-card {
  padding: var(--pad);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  flex: 1;
}
.g-hero__side > .glass-card:last-child { border-bottom: none; }

/* ── Pills ── */
.g-pills {
  grid-template-columns: repeat(3, 1fr);
}
.g-pills .g-cell:last-child { border-right: 0; }

/* ── Problems ── */
.g-problems {
  grid-template-columns: .9fr 1fr 1fr 1fr;
  grid-template-areas: "head a b c";
}
.g-problems__head { grid-area: head; display: flex; flex-direction: column; justify-content: center; }
.g-problems__a    { grid-area: a; border-radius: 0; }
.g-problems__b    { grid-area: b; border-radius: 0; }
.g-problems__c    { grid-area: c; border-right: 0; border-radius: 0; }

/* ── Bento ── */
.g-bento {
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "head head head head head head head head head head head head"
    "ba   ba   ba   ba   ba   ba   ba   ba   bb   bb   bb   bb"
    "bc   bc   bc   bc   bd   bd   bd   bd   bd   bd   bd   bd";
}
.g-bento__head { grid-area: head; }
.g-bento__a    { grid-area: ba; border-radius: 0; }
.g-bento__b    { grid-area: bb; border-right: 0; border-radius: 0; }
.g-bento__c    { grid-area: bc; border-radius: 0; }
.g-bento__d    { grid-area: bd; border-right: 0; border-radius: 0; }

/* ── Footer ── */
.g-footer {
  grid-template-columns: 1.5fr 1fr;
}
.g-footer__big  { }
.g-footer__meta { border-right: 0; display: flex; flex-direction: column; justify-content: flex-end; }

/* ── Responsive stack ── */
@media (max-width: 880px) {
  .g-header,
  .g-hero,
  .g-footer { grid-template-columns: 1fr; }

  .g-pills { grid-template-columns: 1fr; }

  .g-problems {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "a" "b" "c";
  }
  .g-problems__c { border-right: 0; }

  .g-bento {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "ba" "bb" "bc" "bd";
  }
  .g-bento__b,
  .g-bento__d { border-right: 0; }

  .g-cell { border-right: 0; }
  .g-hero__side { padding: 0; }
}

/* ======== COMPONENTS ======== */

/* Labels */
.label {
  font-weight: 900;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(251,191,36,.88);
}

.num {
  font-weight: 900;
  font-size: .72rem;
  letter-spacing: .18em;
  color: var(--muted);
}

/* Hero title */
.hero-title {
  font-weight: 950;
  letter-spacing: -.04em;
  line-height: .94;
  font-size: clamp(2.6rem, 5.8vw, 5rem);
}

.accent {
  background: linear-gradient(135deg, var(--o1), var(--o2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.accent--block{
  display: inline-block;
  margin-top: .14em;
  letter-spacing: -.02em;
}

/* Footer big text */
.footer-hero {
  font-weight: 950;
  letter-spacing: -.04em;
  line-height: .96;
  font-size: clamp(1.8rem, 4.4vw, 3.4rem);
}

/* Glass card */
.glass-card {
  border-radius: 0;
  background: var(--glass);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transform-style: preserve-3d;
}

.stack{
  margin-top: 18px;
  position: relative;
  height: 140px;
  width: min(420px, 92%);
  transform: translateZ(0);
  visibility: hidden;
}

.stack.is-ready{ visibility: visible; }

.stack__card{
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 24px 70px rgba(0,0,0,.35);
  transform-origin: 50% 60%;
  will-change: transform;
  border-radius: 22px;
}

.stack__card--1{ transform: translate3d(0,0,0) rotate(-1.2deg); }
.stack__card--2{ transform: translate3d(10px,10px,0) rotate(1.6deg); opacity: .95; }
.stack__card--3{ transform: translate3d(20px,20px,0) rotate(-.6deg); opacity: .88; }

/* Chips */
.chip {
  display: inline-flex; align-items: center;
  padding: .4rem .65rem;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  font-weight: 800;
  font-size: .82rem;
  color: rgba(244,244,245,.86);
}

/* Sub cards (inside bento A) */
.sub-card {
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.22);
  border-radius: 14px;
  padding: 12px;
}
.sub-card b { display: block; font-weight: 950; color: rgba(244,244,245,.92); }
.sub-card span { display: block; margin-top: 4px; font-size: .84rem; color: var(--muted); line-height: 1.5; }

/* Pills row */
.pill {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800;
  color: rgba(244,244,245,.82);
}
.pill__dot {
  width: 8px; height: 8px; border-radius: 9999px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--o1), var(--o2));
}

/* ── Process ── */
.g-process {
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas:
    "head head head head"
    "s1 s2 s3 s4";
}
.g-process__head {
  grid-area: head;
  background: var(--glass2);
  border-right: 0;
}
.g-process__step { position: relative; overflow: hidden; background: transparent; transition: background .25s ease; }
.step-1 { grid-area: s1; border-bottom: 0; }
.step-2 { grid-area: s2; border-bottom: 0; }
.step-3 { grid-area: s3; border-bottom: 0; }
.step-4 { grid-area: s4; border-bottom: 0; border-right: 0; }

@media (max-width: 1024px) {
  .g-process {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "head head"
      "s1 s2"
      "s3 s4";
  }
  .step-1, .step-2 { border-bottom: 1px solid var(--line); }
  .step-2, .step-4 { border-right: 0; }
  .step-3 { border-bottom: 0; }
}

@media (max-width: 640px) {
  .g-process {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "s1" "s2" "s3" "s4";
  }
  .g-process__step { border-right: 0; border-bottom: 1px solid var(--line); }
  .step-4 { border-bottom: 0; }
}

.bg-number {
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: 8rem;
  font-weight: 950;
  line-height: 1;
  color: rgba(255,255,255,0.02);
  pointer-events: none;
  transition: color .35s ease, transform .35s ease;
}
.step-icon {
  color: var(--muted);
  transition: transform .25s ease, color .25s ease;
}
.g-process__step:hover { background: rgba(255,255,255,.04); }
.g-process__step:hover .bg-number { color: rgba(255,255,255,0.045); transform: scale(1.05) translate(-10px, 10px); }
.g-process__step:hover .step-icon { transform: translateY(-3px); color: rgba(251,191,36,.9); }


/* ── Magnetic button ── */
.mag-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 20px 30px;
  border: 2px solid var(--line);
  background: transparent;
  color: var(--text);
  text-decoration: none;
  font-weight: 950;
  letter-spacing: -.01em;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  position: relative;
  overflow: hidden;
  border-radius: 0;
}
.mag-btn--sm { padding: 14px 20px; font-size: .95rem; }

.mag-btn::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(249,115,22,0) 0%, rgba(249,115,22,.14) 40%, rgba(251,191,36,.14) 60%, rgba(249,115,22,0) 100%);
  transform: translateX(-110%);
  transition: transform .45s cubic-bezier(.4,0,.2,1);
}
.mag-btn:hover::before { transform: translateX(110%); }

.mag-btn__inner {
  position: relative;
  display: inline-block;
  transform: translate3d(0,0,0);
  transition: transform .12s ease-out;
}

/* ── Marquee ── */
.marquee {
  border: 1px solid var(--line);
  border-top: none;
  overflow: hidden;
}
.marquee__track {
  display: flex; width: max-content;
}
.marquee__row {
  display: flex; align-items: center;
  white-space: nowrap;
  padding: 10px 0;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .82rem;
  color: rgba(244,244,245,.55);
  animation: marq 22s linear infinite;
}

@keyframes marq {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* ── GSAP entrance hook (hidden by default) ── */
.anim-up {
  opacity: 0;
  transform: translateY(28px);
}

/* ── reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee__row { animation: none; }
  .anim-up { opacity: 1; transform: none; }
}