@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap');

/* ============================================================
   StoryFrame World — 1:1 build from Figma
   Design canvas: 1920 × 1080 per section, scaled to viewport width.
   ============================================================ */

:root{
  --white:#ffffff;
  --p1:rgb(42,22,97);      /* deep purple */
  --p2:rgb(13,0,47);       /* near-black purple */
  --p0:rgb(51,29,114);     /* lighter purple (gradient top) */
  --yellow:rgb(255,188,0);
  --input:rgb(10,2,30);
  --gray:rgb(129,129,129);
  --accent:rgb(88,63,164);
  --read:rgb(75,47,100);
  --col-grad:linear-gradient(180deg, rgba(51,29,114,0) 0%, var(--p1) 74.88%, var(--p2) 100%);
  /* services horizontal accordion: same purple scrim, rotated so left-anchored copy stays legible */
  --svc-grad:linear-gradient(90deg, rgba(13,0,47,.95) 0%, rgba(29,12,74,.86) 26%, rgba(42,22,97,.5) 52%, rgba(51,29,114,0) 82%);
  --font:"Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--font);
  background:var(--p2);
  color:var(--white);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; }
button{ font-family:inherit; cursor:pointer; }

/* ---- Scaled stage framework ---- */
.frame{
  position:relative;
  width:100%;
  overflow:hidden;
  background:var(--p2);
}
.stage{
  position:absolute;
  top:0; left:0;
  width:1920px;
  height:1080px;
  transform-origin:top left;
}
.abs{ position:absolute; }

/* full-bleed background helper */
.bg-cover{ position:absolute; left:0; top:0; width:1920px; height:1080px; object-fit:cover; }

/* ---- Typography presets matching the file ---- */
/* margin:0 is critical — these classes are used on <h1>/<h2>/<p> elements that are
   absolutely positioned at exact Figma coords. Default UA margins would push each
   block below its `top` coordinate (headings ~54-60px, paragraphs ~24px), throwing
   off spacing and causing overlaps. */
.t-h1{ margin:0; font-weight:700; font-size:80px; line-height:88px; color:var(--white); white-space:pre-line; }
.t-h2{ margin:0; font-weight:700; font-size:72px; line-height:100%; color:var(--white); }
.t-step{ margin:0; font-weight:700; font-size:36px; line-height:88px; color:var(--white); }
.t-body{ margin:0; font-weight:400; font-size:24px; line-height:24px; color:var(--white); }
.t-list{ margin:0; font-weight:400; font-size:24px; line-height:30px; color:var(--white); white-space:pre-line; }
.hi{ color:var(--yellow); }

/* ---- Yellow pill button ---- */
.btn-yellow{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--yellow); color:var(--p2);
  border:none; border-radius:12px;
  font-weight:700; font-size:24px; line-height:24px;
  height:64px; padding:0 28px;
  transition:transform .18s ease, filter .18s ease;
  white-space:nowrap;
}
.btn-yellow:hover{ filter:brightness(1.06); transform:translateY(-2px); }
.btn-yellow:active{ transform:translateY(0); }

/* market-sample tag */
.tag{
  display:inline-flex; align-items:center;
  background:var(--yellow); color:var(--white);
  border-radius:15px; height:30px; padding:0 16px;
  font-weight:700; font-size:16px; line-height:1; letter-spacing:.04em;
}

/* ---- logo mark ---- */
.logo-lockup{ display:flex; align-items:center; gap:14px; }
.logo-mark{ width:30px; height:30px; }
.logo-word{ font-weight:700; font-size:26px; line-height:1; color:var(--white); letter-spacing:-.01em; }

/* ---- hamburger (short top line + two full lines, per Figma) ---- */
.hamburger{
  position:relative; width:33px; height:31px; background:none; border:none; padding:0;
}
.hamburger span{ position:absolute; left:0; height:5px; background:var(--white); }
.hamburger span:nth-child(1){ top:0; width:17px; }
.hamburger span:nth-child(2){ top:13px; width:33px; }
.hamburger span:nth-child(3){ top:26px; width:33px; }

/* ---- scroll arrow ---- */
.scroll-arrow{
  position:absolute; left:1854px; top:1015px;
  width:11px; height:32px; color:var(--white);
  display:flex; flex-direction:column; align-items:center; gap:0;
  opacity:.9;
}
.scroll-arrow .stem{ width:3px; height:23px; background:currentColor; }
.scroll-arrow .head{ width:11px; height:10px; margin-top:-1px; }

/* fixed top bar (logo + hamburger) overlaying the page */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:34px 40px;
  pointer-events:none;
  transition:opacity .3s ease;
}
.topbar > *{ pointer-events:auto; }
.topbar.hide{ opacity:0; pointer-events:none; }