/* ============================================================================
   REFETCHER · Landing design system (v2)
   White canvas · single blue accent · Outfit + JetBrains Mono · airy + premium
   Feel modelled on scrapecreators.com (bento, mono labels, staggered reveals),
   rebuilt original in a light, high-trust skin.
   Refetcher brand tokens.
   ========================================================================== */

:root {
  --brand-name: "Refetcher";

  /* Blue accent (used sparingly, like SC uses purple) */
  --blue:    #2452FF;
  --blue-600:#1736D6;
  --blue-50: #EEF2FF;
  --azure:   #168AE8;
  --grad: linear-gradient(108deg, #2452FF 0%, #1D68F6 48%, #168AE8 100%);

  --emerald: #10B981;
  --amber:   #C2820A;

  /* Ink / text */
  --ink:    #0B1020;        /* near-black */
  --muted:  #59647A;        /* secondary */
  --faint:  #97A0B2;        /* tertiary / muted heading line */

  /* Surfaces & hairlines (SC-style subtlety) */
  --white:  #FFFFFF;
  --paper:  #F7F9FC;
  --line:   rgba(11,16,32,.085);
  --line-2: rgba(11,16,32,.14);
  --card:   rgba(11,16,32,.018);
  --card-2: rgba(11,16,32,.035);

  --shadow-card: 0 24px 60px -32px rgba(15,28,90,.28), 0 2px 8px rgba(11,16,32,.04);
  --shadow-glow: 0 24px 58px -30px rgba(36,82,255,.44), 0 10px 24px -18px rgba(22,138,232,.28);
  --shadow-pop:  0 50px 110px -40px rgba(11,16,32,.5);

  --font: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --container: 1200px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 30px;
  --pill: 999px;

  --ease: cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.22,.61,.36,1);
}

@supports (background: linear-gradient(90deg in oklab, #000, #fff)) {
  :root {
    --grad: linear-gradient(108deg in oklab, #2452FF 0%, #1D68F6 48%, #168AE8 100%);
  }
}

*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html { scroll-behavior:auto; } }

body {
  font-family: var(--font);
  font-size: 17px; line-height: 1.6; font-weight: 400;
  color: var(--muted); background: var(--white);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img,svg,video { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; color:inherit; }
::selection { background: var(--blue); color:#fff; }

/* ---- Typography ----------------------------------------------------------- */
h1,h2,h3,h4 { font-family: var(--font); color: var(--ink); font-weight: 600; letter-spacing:-.02em; line-height:1.05; }
.display { font-size: clamp(2.6rem, 5.6vw, 4.6rem); line-height:.96; letter-spacing:-.035em; font-weight:600; }
.h2 { font-size: clamp(2.1rem, 4vw, 3.4rem); letter-spacing:-.03em; line-height:1; font-weight:600; }
.h2 .muted2 { color: var(--faint); }      /* SC's muted 2nd line */
.h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing:-.025em; }
.lead { font-size: clamp(1.08rem, 1.45vw, 1.3rem); line-height:1.55; color: var(--muted); }
.grad-text { background: var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }

.eyebrow {
  font-family: var(--mono); font-size:.72rem; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase; color: var(--blue);
  display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow::before { content:""; width:24px; height:1px; background: currentColor; opacity:.55; }
.eyebrow.center { justify-content:center; }
.eyebrow.center::after { content:""; width:24px; height:1px; background: currentColor; opacity:.55; }

/* ---- Layout --------------------------------------------------------------- */
.container { width:100%; max-width: var(--container); margin-inline:auto; padding-inline:24px; }
section { position: relative; }
.section { padding-block: clamp(80px, 11vh, 130px); }
.section-head { max-width: 720px; }
.section-head.center { margin-inline:auto; text-align:center; }
.section-head .h2 { margin-top:20px; }
.section-head p { margin-top:20px; }

/* ---- Buttons -------------------------------------------------------------- */
.btn {
  display:inline-flex; align-items:center; gap:.5em; justify-content:center;
  padding: 13px 22px; border-radius: var(--pill); border:1px solid transparent;
  font-weight:600; font-size:.97rem; letter-spacing:-.01em; color:#fff; background: var(--ink);
  white-space:nowrap;
  position:relative; isolation:isolate; overflow:hidden;
  transform: translateZ(0);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .2s, border-color .2s;
}
.btn .arrow { transition: transform .35s var(--ease); }
.btn:hover { transform: translateY(-2px) translateZ(0); }
.btn:hover .arrow { transform: translateX(4px); }
.btn:active { transform: translateY(0) translateZ(0); }
.btn--primary {
  background-color: var(--blue);
  background-image: var(--grad);
  background-size: 118% 118%;
  background-position: 50% 50%;
  box-shadow: var(--shadow-glow);
}
.btn--dark { background: var(--ink); }
.btn--ghost { background: var(--white); color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--blue); color: var(--blue); }
.btn--lg { padding: 16px 28px; font-size:1.04rem; }
.btn--sm { padding: 9px 16px; font-size:.9rem; }

/* ---- Pills / badges ------------------------------------------------------- */
.pill { display:inline-flex; align-items:center; gap:.55em; padding:6px 13px; border-radius:var(--pill);
  background: var(--white); border:1px solid var(--line); font-size:.82rem; font-weight:500; color: var(--ink); }
.dot { width:7px; height:7px; border-radius:50%; background: var(--emerald); }
.dot.live { animation: pulse 2.2s var(--ease-soft) infinite; }
.badge { font-family:var(--mono); font-size:.64rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; padding:4px 9px; border-radius:6px; display:inline-flex; align-items:center; gap:6px; }
.badge--live { color: var(--emerald); background: rgba(16,185,129,.1); }
.badge--soon { color: var(--amber); background: rgba(194,130,10,.12); }

/* ---- Nav ------------------------------------------------------------------ */
.nav { position: fixed; inset:0 0 auto 0; z-index:100; height:74px; display:flex; align-items:center;
  transition: background .3s var(--ease), box-shadow .3s var(--ease), border-color .3s, height .3s; border-bottom:1px solid transparent; }
.nav.scrolled { height:64px; background: rgba(255,255,255,.72); backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%); border-bottom-color: var(--line); box-shadow: 0 10px 30px -24px rgba(11,16,32,.3); }
.nav__row { display:flex; align-items:center; gap:28px; width:100%; }
.nav__links { display:flex; align-items:center; gap:30px; margin-left:18px; }
.nav__links a { font-size:.95rem; font-weight:500; color: var(--muted); position:relative; padding:4px 0; transition:color .2s; }
.nav__links a::after { content:""; position:absolute; left:0; right:100%; bottom:-1px; height:1.5px; background: var(--blue); transition:right .3s var(--ease); }
.nav__links a:hover { color: var(--ink); } .nav__links a:hover::after { right:0; }
.nav__spacer { flex:1; }
.nav__cta { display:flex; align-items:center; gap:16px; }
.nav__cta .signin { font-size:.95rem; font-weight:500; color: var(--ink); }
.nav__cta .signin:hover { color: var(--blue); }
.nav__burger { display:none; width:42px;height:42px;border-radius:11px;border:1px solid var(--line-2); background:#fff; place-items:center; }
.nav-spacer { height:74px; }
.nav__menu { display:none; }

.wordmark { display:flex; align-items:center; gap:10px; font-weight:600; font-size:1.2rem; letter-spacing:-.03em; color: var(--ink); }
.wordmark .mark { width:28px;height:28px;flex:none; }
.wordmark .mark { transition: transform .45s var(--ease); transform-origin:center; }
.wordmark:hover .mark { transform: rotate(12deg); }
.wordmark .fn { color: var(--faint); font-weight:500; letter-spacing:0; }

/* ---- Glow blobs ----------------------------------------------------------- */
.glow { position:absolute; border-radius:50%; filter: blur(150px); pointer-events:none; z-index:-1; }
.glow.b1 { width:620px;height:620px; background: radial-gradient(circle, rgba(31,69,255,.30), transparent 66%); animation: drift1 20s var(--ease-soft) infinite alternate; }
.glow.b2 { width:560px;height:560px; background: radial-gradient(circle, rgba(0,179,255,.26), transparent 66%); animation: drift2 24s var(--ease-soft) infinite alternate; }

/* ---- Hero ----------------------------------------------------------------- */
.hero { padding-top: clamp(120px, 18vh, 190px); padding-bottom: clamp(60px,8vh,110px); overflow:hidden; }
.hero__grid { position:absolute; inset:0; z-index:-2;
  background-image: linear-gradient(var(--line) 1px,transparent 1px), linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:60px 60px; opacity:.6;
  -webkit-mask-image: radial-gradient(115% 75% at 50% 0,#000 28%,transparent 72%);
  mask-image: radial-gradient(115% 75% at 50% 0,#000 28%,transparent 72%); }
.hero .glow.b1 { top:-200px; left:-100px; } .hero .glow.b2 { top:-220px; right:-120px; }
.hero__inner { max-width: 880px; }
.hero .lead { margin-top:26px; max-width:600px; }
.hero__cta { margin-top:38px; display:flex; gap:14px; flex-wrap:wrap; }
.hero__trust { margin-top:24px; display:flex; gap:22px; flex-wrap:wrap; font-size:.85rem; color: var(--faint); }
.hero__trust span { display:inline-flex; gap:8px; align-items:center; }
.hero__trust svg { width:16px;height:16px; color: var(--emerald); }

/* ---- Terminal / code card ------------------------------------------------- */
.terminal { background:#0B1020; border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); border:1px solid rgba(255,255,255,.08); overflow:hidden; }
.terminal__bar { display:flex; align-items:center; gap:7px; padding:13px 16px; border-bottom:1px solid rgba(255,255,255,.07); }
.terminal__bar .tl { width:10px;height:10px;border-radius:50%; background:rgba(255,255,255,.12); }
.terminal__bar .tag { margin-left:auto; font-family:var(--mono); font-size:.7rem; color:#69769b; letter-spacing:.04em; }
.terminal pre { margin:0; padding:22px 24px; overflow:auto; }
.terminal code { font-family:var(--mono); font-size:.84rem; line-height:1.75; color:#C7D2EE; }
.tk { color:#7FA6FF; } .ts { color:#6FE3C0; } .tc { color:#5a6789; } .tn { color:#FFB877; }
.copybtn { border:0; background:none; color:#69769b; font-family:var(--mono); font-size:.7rem; cursor:pointer; }
.copybtn:hover { color:#9fb0d6; }

/* ---- Marquee + proof line ------------------------------------------------- */
.marquee { overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); }
.marquee__track { display:flex; gap:58px; width:max-content; animation: scrollx 34s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span { font-weight:600; font-size:1.25rem; color: var(--faint); white-space:nowrap; letter-spacing:-.02em; opacity:.8; }
.proofline { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; font-family:var(--mono); font-size:.82rem; color: var(--muted); }
.proofline b { color: var(--ink); font-weight:600; }
.proofline .sep { color: var(--line-2); }

/* ---- Platform cards ------------------------------------------------------- */
.grid { display:grid; gap:18px; }
.grid-3 { grid-template-columns: repeat(3,1fr); }
.platform { background: var(--card); border:1px solid var(--line); border-radius: var(--radius-lg); padding:30px;
  transition: transform .4s var(--ease), border-color .3s, box-shadow .4s; }
.platform:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: var(--shadow-card); background:#fff; }
.platform__top { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.plogo { width:52px;height:52px;border-radius:15px; display:grid;place-items:center; color:#fff; }
.plogo svg { width:27px;height:27px; }
.logo-ig { background: radial-gradient(120% 120% at 30% 110%, #F9CE34, #EE2A7B 46%, #6228D7); }
.logo-tt { background:#000; } .logo-yt { background:#FF0033; }
.platform h3 { font-size:1.4rem; margin-bottom:8px; }
.platform p { font-size:.96rem; }
.platform__meta { margin-top:16px; display:flex; gap:8px; flex-wrap:wrap; }
.chip { font-family:var(--mono); font-size:.68rem; color: var(--muted); border:1px solid var(--line); border-radius:6px; padding:3px 8px; }
.platform.soon { opacity:.92; }

/* ---- BENTO ("priced for builders") --------------------------------------- */
.bento { display:grid; grid-template-columns: repeat(6,1fr); gap:18px; }
.bento-card { position:relative; grid-column: span 3; min-height:320px; display:flex; flex-direction:column;
  background: var(--card); border:1px solid var(--line); border-radius: var(--radius-lg); padding:32px; overflow:hidden;
  transition: transform .4s var(--ease), border-color .3s, box-shadow .4s, background .3s; }
.bento-card:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: var(--shadow-card); background:#fff; }
.bento-card.span-4 { grid-column: span 4; } .bento-card.span-2 { grid-column: span 2; }
.bento-card__lbl { display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:.7rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color: var(--blue); margin-bottom:18px; }
.bento-card__lbl::before { content:""; width:22px; height:1px; background: currentColor; opacity:.55; }
.bento-card h3 { font-size: clamp(1.5rem,2.2vw,2rem); letter-spacing:-.025em; margin-bottom:12px; }
.bento-card p { font-size:1rem; color: var(--muted); max-width:42ch; }
.bento-card .grow { margin-top:auto; padding-top:26px; }
.bento-card .codechip { font-family:var(--mono); color: var(--blue); background: var(--blue-50); padding:2px 7px; border-radius:6px; font-size:.85em; }

/* big number (success rate) */
.bignum { font-family:var(--font); font-size: clamp(3rem,6vw,4.6rem); font-weight:700; letter-spacing:-.04em; line-height:1; color: var(--ink); }
.bignum .pct { background: var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* credits-never-expire grid (cool animated heatmap, reveals once) */
.credgrid { display:grid; grid-template-columns: repeat(14, 1fr); gap:6px; margin-top:auto; padding-top:14px; }
.credgrid i { aspect-ratio:1; border-radius:4px; background: rgba(11,16,32,.05); }
.credgrid i.on { background: var(--grad); opacity:0; transform: scale(.4); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.credgrid.lit i.on { opacity:1; transform:none; }
.credgrid-legend { margin-top:16px; display:flex; align-items:center; justify-content:space-between; font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; color: var(--muted); }
.credgrid-legend .accent { color: var(--blue); }

/* comparison rows (Other APIs vs Refetcher) */
.vs { display:flex; flex-direction:column; gap:10px; }
.vs__row { display:flex; align-items:center; justify-content:space-between; padding:13px 15px; border-radius:12px; border:1px solid var(--line); font-size:.92rem; }
.vs__row .who { font-weight:600; color: var(--ink); }
.vs__row.them { background: rgba(225,29,72,.05); border-color: rgba(225,29,72,.18); }
.vs__row.them .price { color:#E11D48; font-family:var(--mono); font-size:.8rem; }
.vs__row.us { background: rgba(16,185,129,.07); border-color: rgba(16,185,129,.28); }
.vs__row.us .price { color: var(--emerald); font-weight:600; font-family:var(--mono); font-size:.8rem; }

/* uptime bars */
.bars { display:flex; gap:5px; align-items:flex-end; height:60px; }
.bars i { flex:1; background: var(--grad); border-radius:3px; opacity:.92; transform: scaleY(0); transform-origin:bottom; transition: transform .75s var(--ease); }
.bars.grown i { transform: scaleY(1); }
.bars i.dim { background: var(--line-2); opacity:.7; }
.uptime-row { display:flex; align-items:baseline; justify-content:space-between; margin-top:14px; }
.uptime-row b { font-family:var(--mono); color: var(--ink); font-size:1.3rem; font-weight:600; }

/* ---- Playground (dark focal card) ----------------------------------------- */
.pg { background:#0B1020; border-radius: var(--radius-xl); padding: clamp(24px,3vw,44px); box-shadow: var(--shadow-pop); color:#C7D2EE; position:relative; overflow:hidden; }
.pg .glow.b1 { top:-160px; left:-80px; opacity:.5; } .pg .glow.b2 { bottom:-200px; right:-100px; opacity:.4; }
.pg__tabs { display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; position:relative; }
.pg__tab { padding:8px 16px; border-radius:var(--pill); font-size:.85rem; font-weight:500; color:#9fb0d6; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.09); }
.pg__tab.active {
  color:#fff;
  background-color: var(--blue);
  background-image: linear-gradient(180deg, #2F65FF 0%, #1D6EF0 100%);
  border-color:transparent;
  box-shadow: 0 14px 28px -18px rgba(36,82,255,.7);
}
.pg__tab[disabled]{ opacity:.5; cursor:not-allowed; }
.pg__form { display:flex; gap:12px; flex-wrap:wrap; position:relative; }
.pg__input { flex:1; min-width:240px; display:flex; align-items:center; gap:12px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.13); border-radius:14px; padding:0 16px; transition:border-color .2s; }
.pg__input:focus-within { border-color: var(--azure); }
.pg__input input { flex:1; background:transparent; border:0; outline:0; color:#fff; font-family:var(--mono); font-size:.9rem; padding:15px 0; }
.pg__input input::placeholder { color:#67749a; }
.pg__hint { margin-top:14px; font-family:var(--mono); font-size:.76rem; color:#67749a; position:relative; }
.pg__hint a { color:#7FA6FF; }
.pg__result { display:grid; grid-template-rows:0fr; opacity:0; position:relative; transition: grid-template-rows .55s var(--ease), opacity .4s var(--ease); }
.pg__result.show { grid-template-rows:1fr; opacity:1; }
.pg__result-inner { overflow:hidden; min-height:0; }
.pg__result.show .pg__result-inner { margin-top:24px; padding-top:24px; border-top:1px solid rgba(255,255,255,.08); }
.skelbar { height:30px; border-radius:7px; background:rgba(255,255,255,.07); }
.pg__loading { display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:.85rem; color:#9fb0d6; }
.pg__metrics { display:grid; grid-template-columns: repeat(5,1fr); gap:12px; }
.metric { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:13px; padding:16px; }
.metric__v { font-family:var(--mono); font-size:1.5rem; font-weight:600; color:#fff; letter-spacing:-.03em; }
.metric__l { font-size:.68rem; color:#8b99bd; text-transform:uppercase; letter-spacing:.08em; margin-top:4px; }
.pg__json { margin-top:18px; } .pg__json summary { font-family:var(--mono); font-size:.76rem; color:#7FA6FF; cursor:pointer; }
.pg__json pre { margin-top:12px; background:#070b16; border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:16px; overflow:auto; font-family:var(--mono); font-size:.76rem; color:#9fb0d6; max-height:280px; }
.spinner { width:18px;height:18px;border:2px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; }

/* Separate result card (animates in below the input card) */
.pg-wrap { display:flex; flex-direction:column; }
.pg-out { display:none; margin-top:16px; background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow:hidden;
  opacity:0; transform: translateY(16px) scale(.985); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.pg-out.in { opacity:1; transform:none; }
.pg-out__bar { display:flex; gap:16px; align-items:center; flex-wrap:wrap; padding:14px 22px; border-bottom:1px solid var(--line); font-family:var(--mono); font-size:.76rem; color:var(--muted); }
.pg-out__bar .ok,.pg-out__bar .bad,.pg-out__bar .warn { display:flex; align-items:center; gap:7px; font-weight:600; }
.pg-out__bar .ok { color: var(--emerald); } .pg-out__bar .ok .dot { background: var(--emerald); }
.pg-out__bar .bad { color:#E11D48; } .pg-out__bar .bad .dot { background:#E11D48; }
.pg-out__bar .warn { color: var(--amber); } .pg-out__bar .warn .dot { background: var(--amber); }
.pg-out__bar .credit { margin-left:auto; color: var(--ink); }
.pg-out__body { padding:22px; }
.pg-out .author { font-family:var(--mono); font-size:.82rem; color:var(--muted); margin-bottom:16px; }
.pg-out .pg__metrics { display:grid; grid-template-columns: repeat(5,1fr); gap:12px; }
.pg-out .metric { background: var(--paper); border:1px solid var(--line); }
.pg-out .metric__v { color: var(--ink); }
.pg-out .metric__l { color: var(--muted); }
.pg-out .pg__json summary { color: var(--blue); }
.pg-out .pg__json pre { background:#0B1020; color:#9fb0d6; border-color:transparent; }
.pg-out .errmsg { font-family:var(--mono); font-size:.92rem; color:#E11D48; }
.pg-out .errmsg.soon { color: var(--amber); }

/* ---- Testimonials --------------------------------------------------------- */
.t-feature { border:1px solid var(--line); background: var(--card); border-radius: var(--radius-xl); padding: clamp(34px,5vw,60px); position:relative; }
.t-feature .quote-mark { color: var(--blue); opacity:.25; width:46px;height:46px; margin-bottom:18px; }
.t-feature blockquote { font-size: clamp(1.5rem,2.6vw,2.4rem); line-height:1.25; letter-spacing:-.02em; color: var(--ink); font-weight:500; max-width:24ch; }
.t-author { margin-top:28px; display:flex; align-items:center; gap:13px; }
.t-author .avatar { width:46px;height:46px;border-radius:50%; background: var(--grad); border:1px solid var(--line); }
.t-author .name { font-weight:600; color: var(--ink); font-size:.95rem; }
.t-author .handle { font-size:.85rem; color: var(--muted); }
.t-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:18px; margin-top:18px; }
.t-card { border:1px solid var(--line); background:#fff; border-radius: var(--radius-lg); padding:28px; transition: transform .4s var(--ease), box-shadow .4s, border-color .3s; }
.t-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: var(--line-2); }
.t-card p { color: var(--ink); font-size:1.02rem; line-height:1.5; }
.t-card .t-author { margin-top:22px; }
.t-card .avatar { width:40px;height:40px; }
.stars { display:flex; gap:3px; margin-bottom:14px; color: var(--blue); }
.stars svg { width:15px;height:15px; }

/* ---- CTA band ------------------------------------------------------------- */
.cta-band { position:relative; overflow:hidden; border-radius:32px; background:#0B1020; padding: clamp(48px,7vw,96px); text-align:center; color:#fff; }
.cta-band::before { content:""; position:absolute; inset:0; background: radial-gradient(75% 130% at 50% 0,rgba(31,69,255,.5),transparent 60%); }
.cta-band::after { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:46px 46px; -webkit-mask-image:radial-gradient(70% 100% at 50% 0,#000,transparent 72%); mask-image:radial-gradient(70% 100% at 50% 0,#000,transparent 72%); }
.cta-band > * { position:relative; }
.cta-band h2 { color:#fff; } .cta-band p { color:#A6B2D6; margin:18px auto 0; max-width:500px; }
.cta-band .btn { margin-top:34px; }

/* ---- Footer --------------------------------------------------------------- */
.footer { border-top:1px solid var(--line); padding-block:64px 40px; background: var(--paper); }
.footer__top { display:grid; grid-template-columns:1.7fr repeat(3,1fr); gap:40px; }
.footer__brand p { margin-top:16px; font-size:.92rem; color: var(--faint); max-width:280px; }
.footer h4 { font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color: var(--faint); margin-bottom:16px; font-weight:500; }
.footer__col a { display:block; padding:6px 0; font-size:.93rem; color: var(--muted); }
.footer__col a:hover { color: var(--blue); }
.footer__bottom { margin-top:48px; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.84rem; color: var(--faint); }
.footer__bottom .mono { font-family:var(--mono); }

/* ---- Pricing packs -------------------------------------------------------- */
.trustrow { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:26px; }
.packs { display:grid; grid-template-columns: repeat(4,1fr); gap:18px; align-items:stretch; }
.pack { display:flex; flex-direction:column; background: var(--card); border:1px solid var(--line); border-radius: var(--radius-lg); padding:30px; position:relative;
  transition: transform .4s var(--ease), box-shadow .4s, border-color .3s, background .3s; }
.pack:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); border-color: var(--line-2); background:#fff; }
.pack.pop { border:1.5px solid var(--blue); box-shadow: var(--shadow-glow); background:#fff; }
.pack__tag { font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.pack.pop .pack__tag { color: var(--blue); }
.pack__price { font-family:var(--font); font-weight:700; font-size:2.7rem; letter-spacing:-.04em; line-height:1; color:var(--ink); margin-top:16px; }
.pack__price small { font-size:1rem; font-weight:500; color:var(--muted); letter-spacing:0; }
.pack__credits { margin-top:10px; font-size:1.02rem; color:var(--ink); font-weight:600; }
.pack__rate { font-family:var(--mono); font-size:.76rem; color:var(--muted); margin-top:3px; }
.pack ul { list-style:none; padding:0; margin:22px 0 0; display:flex; flex-direction:column; gap:11px; font-size:.92rem; color:var(--ink); }
.pack li { display:flex; gap:9px; align-items:flex-start; }
.pack li svg { width:17px;height:17px;color:var(--blue); flex:none; margin-top:2px; }
.pack .btn { margin-top:auto; width:100%; }
.pack ul + .btn { margin-top:24px; }
.pack__pop { position:absolute; top:-11px; left:50%; transform:translateX(-50%); background: var(--grad); color:#fff; padding:5px 14px; border-radius:var(--pill); font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; }
.pack .save { align-self:flex-start; font-family:var(--mono); font-size:.7rem; font-weight:600; padding:4px 10px; border-radius:7px; margin-top:14px; color:var(--emerald); background:rgba(16,185,129,.1); letter-spacing:.02em; }
.pack .save.base { color:var(--muted); background: rgba(11,16,32,.05); }
.pack .save.ent { color:var(--blue); background: var(--blue-50); }
.pack__vol { margin-top:14px; font-size:1rem; color:var(--ink); font-weight:600; }
.pack__note { font-family:var(--mono); font-size:.75rem; color:var(--muted); margin-top:4px; }

.ent { margin-top:18px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; background:#0B1020; color:#fff; border-radius: var(--radius-lg); padding:32px 38px; position:relative; overflow:hidden; }
.ent::before { content:""; position:absolute; inset:0; background: radial-gradient(70% 140% at 100% 0, rgba(31,69,255,.42), transparent 60%); }
.ent > * { position:relative; }
.ent h3 { color:#fff; font-size:1.5rem; }
.ent p { color:#A6B2D6; margin-top:6px; max-width:48ch; }

/* two-option layout + volume discount tiers */
.packs--two { grid-template-columns: 1.1fr 1fr; max-width: 860px; margin-inline:auto; }
.tiers { border:1px solid var(--line); border-radius: var(--radius-lg); overflow:hidden; max-width:620px; margin:40px auto 0; background:#fff; box-shadow: var(--shadow-sm,0 2px 8px rgba(10,17,36,.05)); }
.tier { display:flex; justify-content:space-between; align-items:center; padding:18px 26px; border-bottom:1px solid var(--line); }
.tier:last-child { border-bottom:0; }
.tier .vol { color: var(--ink); font-weight:600; font-size:.98rem; }
.tier .rate { font-family:var(--mono); color: var(--blue); font-weight:600; font-size:.92rem; }
.tier.custom { background: var(--paper); }
.tier.custom .rate { color: var(--muted); }

/* estimator */
.estimator { background: var(--card); border:1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(28px,4vw,44px); }
.estimator__top { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:16px; }
.estimator__val { font-family:var(--font); font-weight:700; font-size:2.1rem; letter-spacing:-.03em; color:var(--ink); }
.estimator__cost { text-align:right; }
.estimator__cost b { font-family:var(--font); font-weight:700; font-size:2.1rem; letter-spacing:-.03em; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; display:block; }
.estimator__cost span { font-family:var(--mono); font-size:.76rem; color:var(--muted); }
.estimator input[type=range] { -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:999px; margin-top:28px; background:#E2E8F0; background-image: linear-gradient(90deg, var(--blue), var(--azure)); background-repeat:no-repeat; background-size:50% 100%; outline:none; cursor:pointer; }
.estimator input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:22px;height:22px;border-radius:50%; background:#fff; border:2px solid var(--blue); box-shadow: var(--sh-sm,0 2px 8px rgba(10,17,36,.18)); cursor:pointer; }
.estimator input[type=range]::-moz-range-thumb { width:22px;height:22px;border-radius:50%; background:#fff; border:2px solid var(--blue); cursor:pointer; }
.estimator__foot { margin-top:18px; font-family:var(--mono); font-size:.82rem; color:var(--muted); }
.estimator__foot b { color: var(--ink); }

/* ---- FAQ ------------------------------------------------------------------ */
.faq { max-width:820px; margin-inline:auto; border-top:1px solid var(--line); }
.faq details { border-bottom:1px solid var(--line); }
.faq summary { list-style:none; cursor:pointer; padding:24px 4px; display:flex; align-items:center; justify-content:space-between; gap:20px; font-weight:600; font-size:1.1rem; color:var(--ink); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary .plus { width:26px;height:26px;border-radius:50%; border:1px solid var(--line-2); display:grid;place-items:center; flex:none; transition:.3s var(--ease); }
.faq details[open] summary .plus { background:var(--blue); color:#fff; border-color:var(--blue); transform:rotate(135deg); }
.faq p { padding:0 4px 26px; max-width:720px; }

/* ---- Reveal / motion ------------------------------------------------------ */
[data-reveal]{ opacity:0; transform: translateY(22px); filter: blur(6px); transition: opacity .85s var(--ease), transform .85s var(--ease), filter .85s var(--ease); }
[data-reveal].in { opacity:1; transform:none; filter:none; }
[data-stagger] > * { opacity:0; transform: translateY(22px); filter: blur(6px); transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease); }
[data-stagger].in > * { opacity:1; transform:none; filter:none; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%,100%{ box-shadow:0 0 0 3px rgba(16,185,129,.18);} 50%{ box-shadow:0 0 0 6px rgba(16,185,129,.04);} }
@keyframes scrollx { to { transform: translateX(-50%); } }
@keyframes drift1 { to { transform: translate(50px,40px) scale(1.12);} }
@keyframes drift2 { to { transform: translate(-46px,28px) scale(1.08);} }

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width: 980px){
  .grid-3 { grid-template-columns:1fr; }
  .bento-card, .bento-card.span-4, .bento-card.span-2 { grid-column: span 6; }
  .t-grid { grid-template-columns:1fr; }
  .pg__metrics { grid-template-columns: repeat(3,1fr); }
  .packs { grid-template-columns: 1fr 1fr; }
  .footer__top { grid-template-columns:1fr 1fr; }
  .nav__links { display:none; }
  .nav__cta { display:none; }
  .nav__burger { display:grid; }
  .nav__menu { position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:2px;
    background: rgba(255,255,255,.97); backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%);
    border-bottom:1px solid var(--line); box-shadow: var(--shadow-card); padding:12px 24px 24px; }
  .nav__menu.open { display:flex; }
  .nav__menu .mlink { padding:14px 2px; font-size:1.06rem; font-weight:500; color:var(--ink); border-bottom:1px solid var(--line); }
  .nav__menu .mcta { margin-top:18px; display:flex; flex-direction:column; gap:10px; }
  .nav__menu .mcta .btn { width:100%; }
}
@media (max-width: 560px){
  body { font-size:16px; }
  .pg__metrics { grid-template-columns: repeat(2,1fr); }
  .packs { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns:1fr; }
  .hero__cta { flex-direction:column; align-items:stretch; } .hero__cta .btn { width:100%; }
}

/* ---- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after { animation:none !important; transition:none !important; }
  [data-reveal],[data-stagger] > * { opacity:1 !important; transform:none !important; filter:none !important; }
  .credgrid i.on { opacity:1 !important; transform:none !important; }
  .bars i { transform: scaleY(1) !important; }
}