*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:            #F2EFE6;
  --paper:         #FCFBF7;
  --line:          #E3DED2;
  --ink:           #221E16;
  --ink-2:         #4A443A;
  --muted:         #7C766B;
  --blue:          #2A47D5;
  --blue-dark:     #1F36A8;
  --vermillion:    #EB4A23;
  --yellow:        #F4A912;
  --green:         #58B080;
  color-scheme: light;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Bricolage Grotesque', sans-serif;
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
  display: block;
  position: relative;
  overflow-x: hidden;
}

/* ============================================================
   BOLD BAUHAUS FIELD — big saturated forms, drift + parallax
   ============================================================ */
.field { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

.shape {
  position: absolute;
  will-change: transform;
  transform:
    translate3d(var(--px,0px), var(--py,0px), 0)
    translate3d(var(--dx,0px), var(--dy,0px), 0)
    rotate(var(--rot,0deg));
  transition: transform .12s cubic-bezier(.2,.7,.3,1);
}

/* Huge blue disc bleeding off the left */
.s-disc {
  top: -160px; left: -180px;
  width: 620px; height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #5570f0 0%, var(--blue) 52%, var(--blue-dark) 100%);
  animation: drift-a 17s ease-in-out infinite;
}
/* Massive yellow quarter-circle, bottom-right */
.s-quarter-y {
  bottom: -200px; right: -120px;
  width: 560px; height: 560px;
  background: radial-gradient(circle at 30% 30%, #ffc94f 0%, var(--yellow) 75%);
  border-radius: 100% 0 0 0;
  animation: drift-d 22s ease-in-out infinite;
}
/* Bold vermillion bar, full-height diagonal */
.s-bar {
  top: -60px; right: 24%;
  width: 120px; height: 720px;
  border-radius: 60px;
  background: linear-gradient(160deg, #f4663f 0%, var(--vermillion) 75%);
  --rot: 24deg;
  animation: drift-c 20s ease-in-out infinite;
}
/* Bullseye target (logo echo), upper-right */
.s-target {
  top: 8%; right: 8%;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: var(--blue);
  display: grid; place-items: center;
  animation: drift-b 19s ease-in-out infinite;
}
.s-target::before { content:''; width: 58%; height: 58%; border-radius: 50%; background: var(--bg); }
.s-target::after  { content:''; position:absolute; width: 30%; height: 30%; border-radius: 50%; background: var(--vermillion); }

/* Solid ink triangle */
.s-tri {
  bottom: 14%; left: 12%;
  width: 0; height: 0;
  border-left: 110px solid transparent;
  border-right: 110px solid transparent;
  border-bottom: 190px solid var(--ink);
  --rot: -12deg;
  opacity: .92;
  animation: drift-a 24s ease-in-out infinite;
}
/* Green half-circle */
.s-half {
  top: 16%; left: 30%;
  width: 200px; height: 100px;
  background: var(--green);
  border-radius: 200px 200px 0 0;
  --rot: 18deg;
  animation: drift-d 18s ease-in-out infinite;
}
/* Liquid morphing yellow blob (small, foreground accent) */
.s-blob {
  top: 58%; right: 16%;
  width: 150px; height: 150px;
  background: radial-gradient(circle at 35% 30%, #ffd066 0%, var(--yellow) 70%);
  border-radius: 47% 53% 44% 56% / 55% 48% 52% 45%;
  animation: drift-b 16s ease-in-out infinite, morph 12s ease-in-out infinite;
}
/* Dot grid (Bauhaus rhythm) */
.s-grid {
  bottom: 6%; left: 40%;
  width: 180px; height: 120px;
  background-image: radial-gradient(var(--ink) 2.4px, transparent 2.6px);
  background-size: 22px 22px;
  opacity: .5;
  animation: drift-c 26s ease-in-out infinite;
}
.s-dot-v { top: 12%; left: 8%;  width: 46px; height: 46px; border-radius:50%; background: var(--vermillion); animation: drift-b 14s ease-in-out infinite; }

@keyframes drift-a { 0%,100%{--dx:0;--dy:0} 50%{--dx:30px;--dy:38px} }
@keyframes drift-b { 0%,100%{--dx:0;--dy:0} 50%{--dx:-34px;--dy:26px} }
@keyframes drift-c { 0%,100%{--dx:0;--dy:0} 50%{--dx:22px;--dy:-30px} }
@keyframes drift-d { 0%,100%{--dx:0;--dy:0} 50%{--dx:-26px;--dy:-34px} }
@keyframes morph {
  0%,100%{border-radius:47% 53% 44% 56% / 55% 48% 52% 45%}
  33%{border-radius:60% 40% 55% 45% / 42% 58% 42% 58%}
  66%{border-radius:40% 60% 48% 52% / 60% 40% 58% 42%}
}

/* Cursor-following colour bloom that refracts through the glass */
.glow {
  position: fixed; width: 560px; height: 560px; left:0; top:0;
  border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(42,71,213,.22) 0%, rgba(235,74,35,.14) 40%, rgba(244,169,18,.12) 60%, transparent 72%);
  transform: translate3d(var(--gx,50vw), var(--gy,50vh), 0) translate(-50%, -50%);
  transition: transform .25s cubic-bezier(.2,.7,.3,1);
  mix-blend-mode: multiply;
}

/* ============================================================
   LIQUID-GLASS CARD — left-aligned, nested panels
   ============================================================ */
.stage { position: relative; z-index: 2; width: 100%; max-width: 720px; perspective: 1600px; }

.card {
  position: relative;
  width: 100%;
  padding: 52px 52px 44px;
  border-radius: 34px;
  text-align: left;
  /* glassy fill: very translucent, lets the colour field through */
  background:
    linear-gradient(155deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.10) 48%, rgba(255,255,255,.20) 100%);
  backdrop-filter: blur(36px) saturate(185%) brightness(1.06);
  -webkit-backdrop-filter: blur(36px) saturate(185%) brightness(1.06);
  border: 1.5px solid rgba(255,255,255,.55);
  box-shadow:
    0 1px 0 0 rgba(255,255,255,.85) inset,        /* top edge light */
    0 -1px 0 0 rgba(255,255,255,.22) inset,       /* bottom edge light */
    0 30px 80px -24px rgba(34,30,22,.42),         /* drop */
    0 2px 10px -2px rgba(34,30,22,.16);
  overflow: hidden;
  transform: rotateX(var(--tiltX,0deg)) rotateY(var(--tiltY,0deg));
  transition: transform .2s ease-out;
  transform-style: preserve-3d;
  isolation: isolate;
}

/* iridescent rainbow sheen (the holographic refraction) */
.card .sheen {
  position: absolute; inset: -2px; z-index: 0; pointer-events: none; border-radius: inherit;
  background: conic-gradient(from var(--ir,0deg) at var(--sx,50%) var(--sy,40%),
    rgba(255,0,128,.0), rgba(120,0,255,.22), rgba(0,180,255,.22),
    rgba(0,255,170,.18), rgba(255,220,0,.20), rgba(255,80,0,.18), rgba(255,0,128,.0));
  mix-blend-mode: screen;
  opacity: .55;
  filter: blur(6px);
}
/* specular diagonal streak */
.card .streak {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(118deg, transparent 0%, rgba(255,255,255,.0) 38%,
    rgba(255,255,255,.55) 50%, rgba(255,255,255,.0) 62%, transparent 100%);
  transform: translateX(var(--streakX,0px));
  transition: transform .2s ease-out;
  opacity: .7;
}
/* pointer-tracked bright spot */
.card::after {
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius: inherit;
  background: radial-gradient(320px circle at var(--mx,50%) var(--my,0%), rgba(255,255,255,.4) 0%, transparent 60%);
  opacity:.85;
}
/* fine grain for realism */
.card .grain {
  position:absolute; inset:0; z-index:0; pointer-events:none; border-radius: inherit;
  opacity:.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.card > .content { position: relative; z-index: 1; }

/* header row: logo + glass status chip */
.head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 36px;
}
.logo { display: block; height: 34px; width: auto; }

.status-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase;
  color: var(--blue);
  background: linear-gradient(150deg, rgba(255,255,255,.5), rgba(255,255,255,.18));
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 6px 16px -8px rgba(34,30,22,.3);
  border-radius: 100px; padding: 7px 15px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.status-badge::before {
  content:''; width:7px; height:7px; border-radius:50%; background: var(--blue);
  box-shadow: 0 0 8px rgba(42,71,213,.8);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.4; transform:scale(.8)} }

h1 {
  font-family: 'Syne', sans-serif; font-weight: 800;
  font-size: clamp(44px, 8vw, 76px); line-height: .98; letter-spacing: -.025em;
  color: var(--ink); margin-bottom: 22px;
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
h1 span { color: var(--vermillion); }

.lead {
  font-size: 17.5px; font-weight: 400; line-height: 1.6; color: var(--ink-2);
  max-width: 560px; margin: 0 0 36px;
}

/* nested glass panel that holds the form */
.panel {
  position: relative;
  border-radius: 22px;
  padding: 26px 26px 22px;
  background: linear-gradient(155deg, rgba(255,255,255,.30), rgba(255,255,255,.08));
  border: 1px solid rgba(255,255,255,.5);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 14px 36px -20px rgba(34,30,22,.4);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  overflow: hidden;
}

.form-title {
  font-family: 'Syne', sans-serif; font-weight: 700; font-size: 16px;
  color: var(--ink); margin-bottom: 16px;
}

.notify-form { display: flex; gap: 10px; max-width: 480px; }
.notify-form input {
  flex: 1;
  background: rgba(255,255,255,.4);
  border: 1.5px solid rgba(255,255,255,.6);
  box-shadow: 0 1px 6px -2px rgba(34,30,22,.14) inset;
  border-radius: 12px; padding: 13px 16px;
  font-family: 'Bricolage Grotesque', sans-serif; font-size: 15px; color: var(--ink);
  outline: none; backdrop-filter: blur(8px);
  transition: border-color .2s, box-shadow .2s;
}
.notify-form input::placeholder { color: var(--muted); }
.notify-form input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(42,71,213,.16); }

.notify-form button {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, #3a57e6 0%, var(--blue) 60%, var(--blue-dark) 100%);
  color: #fff; border: 1px solid rgba(255,255,255,.3);
  border-radius: 12px; padding: 13px 26px;
  font-family: 'Bricolage Grotesque', sans-serif; font-size: 15px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 10px 22px -8px rgba(42,71,213,.65);
  transition: transform .1s, filter .2s, box-shadow .2s;
}
.notify-form button:hover  { filter: brightness(1.07); }
.notify-form button:active { transform: scale(.97); }

.footnote {
  margin-top: 14px;
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}

.footer {
  position: relative; z-index: 2; margin-top: 34px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}

/* ============================================================
   PAGE FLOW — hero + scrolling sections over the fixed field
   ============================================================ */
.page { position: relative; z-index: 2; width: 100%; }

.hero {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 48px 24px;
}

/* Frosted 1120px sheet that carries Use cases + Pricing.
   Narrower than the viewport so the page's parallax field shows down both
   sides, and frosted so text stays readable while the field blooms softly through. */
.surface {
  position: relative; z-index: 2; overflow: hidden;
  width: min(1120px, calc(100% - 48px)); margin: 56px auto;
  border-radius: 30px;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(42,71,213,.05) 0%, transparent 44%),
    radial-gradient(120% 80% at 0% 100%, rgba(244,169,18,.06) 0%, transparent 48%),
    linear-gradient(180deg, rgba(252,251,247,.80) 0%, rgba(250,248,242,.74) 100%);
  border: 1.5px solid rgba(255,255,255,.6);
  box-shadow: 0 1px 0 rgba(255,255,255,.85) inset, 0 36px 80px -34px rgba(34,30,22,.42);
  backdrop-filter: blur(22px) saturate(165%);
  -webkit-backdrop-filter: blur(22px) saturate(165%);
  padding: 60px 30px 46px;
}
/* faint Bauhaus texture — kept away from the left-aligned text column */
.surface::before {
  content: ''; position: absolute; top: 0; right: -60px; width: 360px; height: 360px;
  background-image: radial-gradient(var(--ink) 2px, transparent 2.4px);
  background-size: 24px 24px; opacity: .07; pointer-events: none;
}
.surface::after {
  content: ''; position: absolute; bottom: -120px; right: 8%;
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(88,176,128,.18), rgba(88,176,128,.05) 70%);
  filter: blur(8px); pointer-events: none;
}

.section {
  width: 100%; max-width: 1120px; margin: 0 auto;
  padding: 24px 24px 96px; scroll-margin-top: 24px;
}

.section-tag {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--blue);
  margin-bottom: 18px;
}
.section-tag::before { content:''; width: 24px; height: 2px; background: var(--vermillion); border-radius: 2px; }

.section-title {
  font-family: 'Syne', sans-serif; font-weight: 800;
  font-size: clamp(30px, 5vw, 46px); line-height: 1.02; letter-spacing: -.022em;
  color: var(--ink); margin-bottom: 14px;
}
.section-sub { font-size: 15px; line-height: 1.6; color: var(--ink-2); max-width: 640px; margin-bottom: 46px; }

/* shared glass surface for the lighter cards */
.glass {
  position: relative; border-radius: 24px; overflow: hidden;
  background: linear-gradient(155deg, rgba(255,255,255,.44) 0%, rgba(255,255,255,.14) 55%, rgba(255,255,255,.26) 100%);
  border: 1.5px solid rgba(255,255,255,.55);
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 22px 54px -28px rgba(34,30,22,.4);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
}

/* ---- USE CASES (tabbed) ---- */
.uc-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.uc-tab {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  font-family: 'Bricolage Grotesque', sans-serif; font-size: 14.5px; font-weight: 600;
  color: var(--ink-2); padding: 11px 18px 11px 12px; border-radius: 100px;
  border: 1.5px solid rgba(255,255,255,.55); background: rgba(255,255,255,.35);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: color .2s, background .2s, border-color .2s, box-shadow .2s;
}
.uc-tab:hover { color: var(--ink); }
.uc-tab .n {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: 'Syne', sans-serif; font-weight: 800; font-size: 12px; color: #fff;
  transition: background .2s, color .2s;
}
.uc-tab[data-i="1"] .n { background: var(--blue); }
.uc-tab[data-i="2"] .n { background: var(--vermillion); }
.uc-tab[data-i="3"] .n { background: var(--green); }
.uc-tab[data-i="4"] .n { background: var(--yellow); color: var(--ink); }
.uc-tab[aria-selected="true"] { color: #fff; border-color: transparent; box-shadow: 0 12px 26px -12px rgba(34,30,22,.55); }
.uc-tab[data-i="1"][aria-selected="true"] { background: var(--blue); }
.uc-tab[data-i="2"][aria-selected="true"] { background: var(--vermillion); }
.uc-tab[data-i="3"][aria-selected="true"] { background: var(--green); }
.uc-tab[data-i="4"][aria-selected="true"] { background: var(--yellow); color: var(--ink); }
.uc-tab[aria-selected="true"] .n { background: rgba(255,255,255,.32); color: #fff; }
.uc-tab[data-i="4"][aria-selected="true"] .n { background: rgba(34,30,22,.18); color: var(--ink); }

.uc-panel { padding: 34px 0 0 0; }
.uc-panel[hidden] { display: none; }
.uc-panel-anim { animation: ucFade .35s ease; }
@keyframes ucFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.uc-top { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.uc-num {
  flex: none; width: 50px; height: 50px; border-radius: 15px;
  display: grid; place-items: center;
  font-family: 'Syne', sans-serif; font-weight: 800; font-size: 21px; color: #fff;
  box-shadow: 0 8px 18px -8px rgba(34,30,22,.5);
}
.uc-panel[data-i="1"] .uc-num { background: var(--blue); }
.uc-panel[data-i="2"] .uc-num { background: var(--vermillion); }
.uc-panel[data-i="3"] .uc-num { background: var(--green); }
.uc-panel[data-i="4"] .uc-num { background: var(--yellow); color: var(--ink); }
.uc-who { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.uc-name { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 20px; line-height: 1.12; color: var(--ink); }
.uc-body { font-size: 15px; line-height: 1.62; color: var(--ink-2); }
.uc-body strong { color: var(--ink); font-weight: 600; }
.uc-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.uc-chip {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-2); background: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.65);
  border-radius: 100px; padding: 5px 11px;
}

/* ---- PRICING ---- */
.price-note {
  display: block; max-width: 640px; margin-bottom: 26px;
  font-size: 14.5px; line-height: 1.6; color: var(--ink-2);
}
.price-note mark {
  background: linear-gradient(transparent 55%, rgba(244,169,18,.45) 55%);
  color: var(--ink); font-weight: 600; padding: 0 1px;
}
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.plan { padding: 32px 28px 30px; display: flex; flex-direction: column; }
.plan.featured {
  border-color: rgba(42,71,213,.5);
  box-shadow: 0 1px 0 rgba(255,255,255,.85) inset, 0 34px 70px -26px rgba(42,71,213,.5);
}
.plan-badge {
  align-self: flex-start; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: #fff; background: var(--blue); border-radius: 100px; padding: 5px 12px; margin-bottom: 16px;
}
.plan-name { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 24px; color: var(--ink); margin-bottom: 6px; }
.plan-for { font-size: 13.5px; line-height: 1.45; color: var(--muted); margin-bottom: 22px; min-height: 40px; }
.plan-tokens { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.plan-tokens b { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 26px; line-height: 1.08; color: var(--blue); }
.plan-tokens span { font-size: 13.5px; color: var(--ink-2); }
.plan-price { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 24px; }
.plan-feats { list-style: none; display: flex; flex-direction: column; gap: 11px; margin-bottom: 28px; }
.plan-feats li { position: relative; padding-left: 28px; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.plan-feats li::before {
  content: ''; position: absolute; left: 0; top: 2px; width: 17px; height: 17px; border-radius: 50%;
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 10px no-repeat;
}
.plan-cta {
  margin-top: auto; text-align: center; cursor: pointer;
  font-family: 'Bricolage Grotesque', sans-serif; font-size: 15px; font-weight: 600;
  border-radius: 12px; padding: 13px 22px; transition: transform .1s, filter .2s, box-shadow .2s;
}
.plan-cta.solid {
  color: #fff; border: 1px solid rgba(255,255,255,.3);
  background: linear-gradient(160deg, #3a57e6 0%, var(--blue) 60%, var(--blue-dark) 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 10px 22px -8px rgba(42,71,213,.65);
}
.plan-cta.ghost { color: var(--blue); border: 1.5px solid rgba(42,71,213,.4); background: rgba(255,255,255,.4); }
.plan-cta:hover { filter: brightness(1.05); }
.plan-cta:active { transform: scale(.97); }

.tokens-note {
  margin-top: 26px; padding: 20px 24px; border-radius: 18px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  font-size: 14.5px; line-height: 1.55; color: var(--ink-2);
}
.tokens-note strong { color: var(--ink); font-weight: 600; }
.tokens-note .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); }

/* ---- HOW IT WORKS (bento mosaic) ---- */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.bento-card {
  position: relative; overflow: hidden;
  grid-column: span 6; min-height: 320px;
  border-radius: 26px; padding: 30px 30px 0;
  display: flex; flex-direction: column; color: #fff;
  box-shadow: 0 24px 56px -30px rgba(34,30,22,.5);
}
.b-1 { grid-column: span 7; background: linear-gradient(155deg, #3a57e6 0%, var(--blue) 60%, var(--blue-dark) 100%); }
.b-2 { grid-column: span 5; background: linear-gradient(155deg, #f4663f 0%, var(--vermillion) 70%, #c93a18 100%); }
.b-3 { grid-column: span 5; background: linear-gradient(155deg, #7cc79b 0%, var(--green) 78%); }
.b-4 { grid-column: span 7; background: linear-gradient(155deg, #2c2820 0%, var(--ink) 100%); padding-bottom: 32px; }

.bento-card.on-light { color: var(--ink); }

.bento-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.bento-kicker { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.72); margin-bottom: 10px; }
.on-light .bento-kicker { color: rgba(34,30,22,.55); }
.bento-card h3 { font-family: 'Syne', sans-serif; font-weight: 800; font-size: clamp(22px, 2.5vw, 29px); line-height: 1.04; letter-spacing: -.02em; color: inherit; }
.bento-arrow {
  flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.32); color: #fff;
}
.on-light .bento-arrow { background: rgba(34,30,22,.10); border-color: rgba(34,30,22,.16); color: var(--ink); }
.b-bolt { background: var(--yellow); border-color: transparent; color: var(--ink); }

.bento-card p { margin: 14px 0 14px; font-size: 14.5px; line-height: 1.56; color: rgba(255,255,255,.86); max-width: 44ch; }
.on-light p { color: var(--ink-2); }
.bento-card p strong { color: #fff; font-weight: 600; }
.on-light p strong { color: var(--ink); }

/* product-mockup that bleeds off the bottom edge of the tile */
.bento-figure {
  margin-top: auto; align-self: stretch;
  background: rgba(255,255,255,.94);
  border-radius: 16px 16px 0 0; padding: 18px 18px 0;
  box-shadow: 0 -2px 24px -10px rgba(34,30,22,.35);
}
.bento-figure svg { display: block; width: 100%; height: auto; }

/* payoff tile (dark) */
.b-4 .bento-payoff-text {
  margin-top: 16px; max-width: none;
  font-family: 'Syne', sans-serif; font-weight: 700;
  font-size: clamp(17px, 2vw, 21px); line-height: 1.4; color: #fff;
}
.b-4 .bento-payoff-text .hl { color: var(--yellow); }

/* ============================================================
   FOOTER — big Bauhaus background scene, content laid over it
   ============================================================ */
/* Transparent footer — the page's fixed parallax field shows straight through,
   so the footer background is a seamless continuation of the page. */
.site-footer {
  position: relative; z-index: 2; width: 100%; overflow: hidden;
  margin-top: 224px;
  min-height: 720px;
  /* opaque --bg: ends the page's fixed parallax field here, while the matching
     base colour makes this separate background read as a seamless continuation */
  background: var(--bg);
  padding: 64px 24px 48px;
}
/* the footer's OWN decorative background — separate from the page field, static */
.footer-art { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
/* Concentric quarter-circle "rainbow" nested into the top-right corner */
.f-q1, .f-q2, .f-q3, .f-q4 { top: -130px; right: -130px; border-radius: 0 0 0 100%; }
.f-q1 { width: 470px; height: 470px; background: var(--blue);       opacity: .9; }
.f-q2 { width: 364px; height: 364px; background: var(--yellow); }
.f-q3 { width: 258px; height: 258px; background: var(--vermillion); }
.f-q4 { width: 152px; height: 152px; background: var(--bg); }
/* Big blue half-disc bleeding off the LEFT edge — anchors the left side */
.f-halfL {
  left: -74px; top: 23%; width: 200px; height: 400px; border-radius: 0 200px 200px 0;
  background: radial-gradient(circle at 72% 42%, #5570f0 0%, var(--blue) 60%, var(--blue-dark) 100%); opacity: .9;
}
/* Ink triangle (lower-left) */
.f-tri {
  left: 24%; bottom: 24%; width: 0; height: 0;
  border-left: 62px solid transparent; border-right: 62px solid transparent;
  border-bottom: 108px solid var(--ink); --rot: -10deg; opacity: .9;
}
/* Yellow disc (lower-left, above the copyright) */
.f-disc {
  left: 15%; bottom: 17%; width: 104px; height: 104px; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #ffd066 0%, var(--yellow) 72%); opacity: .92;
}
/* Vermillion dot (far-left mid) */
.f-dot { left: 7%; top: 56%; width: 42px; height: 42px; border-radius: 50%; background: var(--vermillion); opacity: .9; }
/* Thin vertical stripe set (centre-left) */
.f-bars {
  left: 34%; top: 45%; width: 70px; height: 132px;
  background: repeating-linear-gradient(90deg, var(--ink) 0 8px, transparent 8px 24px); opacity: .42;
}
/* Two-tone split disc (centre) */
.f-split {
  left: 45%; top: 25%; width: 122px; height: 122px; border-radius: 50%;
  background: linear-gradient(90deg, var(--ink) 0 50%, var(--yellow) 50% 100%); --rot: -18deg; opacity: .92;
}
/* Vermillion plus / cross (centre-lower) */
.f-cross {
  left: 53%; bottom: 22%; width: 84px; height: 84px; background: var(--vermillion);
  clip-path: polygon(38% 0,62% 0,62% 38%,100% 38%,100% 62%,62% 62%,62% 100%,38% 100%,38% 62%,0 62%,0 38%,38% 38%);
  opacity: .92;
}
/* Light green quarter (centre-bottom) */
.f-quarter {
  right: 33%; bottom: 54px; width: 158px; height: 158px; border-radius: 0 100% 0 0;
  background: radial-gradient(circle at 30% 70%, #7cc79b 0%, var(--green) 82%); opacity: .5;
}
/* Outlined ring (right-lower) */
.f-ring {
  right: 10%; bottom: 92px; width: 108px; height: 108px; border-radius: 50%;
  border: 13px solid var(--green); opacity: .85;
}

.footer-inner {
  position: relative; z-index: 1;
  max-width: 1120px; margin: 0 auto; min-height: 600px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 48px;
}
.footer-top { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; max-width: 460px; }
.footer-logo { display: block; height: 34px; width: auto; }
.footer-tagline { font-size: 16px; line-height: 1.6; color: var(--ink-2); text-shadow: 0 1px 10px rgba(246,244,238,.7); }
.cta-btn {
  cursor: pointer; white-space: nowrap; margin-top: 4px;
  font-family: 'Bricolage Grotesque', sans-serif; font-size: 15px; font-weight: 600;
  color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: 12px; padding: 13px 24px;
  background: linear-gradient(160deg, #f4663f 0%, var(--vermillion) 70%, #c93a18 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 12px 26px -8px rgba(235,74,35,.6);
  transition: transform .1s, filter .2s;
}
.cta-btn:hover { filter: brightness(1.06); }
.cta-btn:active { transform: scale(.97); }

.footer-bottom {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px;
}
.footer-copy { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .08em; color: var(--ink-2); text-shadow: 0 1px 10px rgba(246,244,238,.7); }
.footer-links { display: flex; flex-wrap: wrap; gap: 22px; }
.footer-links a {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; transition: color .2s; text-shadow: 0 1px 10px rgba(246,244,238,.7);
}
.footer-links a:hover { color: var(--blue); }
/* Pages nav — its own sitemap column on the footer's empty right side */
.footer-nav {
  position: absolute; top: 0; right: 0; z-index: 2;
  display: flex; flex-direction: column; gap: 14px; align-items: flex-end;
}
/* X link lives at the end of the nav list */
.footer-nav .footer-social { position: static; margin-top: 8px; }
.footer-nav-label {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 4px;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
.footer-nav-label::after { content: ''; width: 24px; height: 2px; background: var(--vermillion); border-radius: 2px; }
.footer-nav a {
  font-family: 'Syne', sans-serif; font-weight: 700; font-size: 19px; letter-spacing: -.01em;
  color: var(--ink); text-decoration: none; transition: color .2s;
  text-shadow: 0 1px 10px rgba(246,244,238,.7);
}
.footer-nav a:hover { color: var(--blue); }
@media (max-width: 880px) {
  .footer-nav { position: static; align-items: flex-start; margin-top: 8px; }
}
.footer-social {
  position: absolute; top: 0; right: 0; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink); transition: color .2s, transform .2s;
}
.footer-social svg { display: block; }
.footer-social:hover { color: var(--blue); transform: scale(1.12); }

/* scroll-reveal */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
[data-reveal].in { opacity: 1; transform: none; }

@media (max-width: 880px) {
  .pricing-grid { grid-template-columns: 1fr; }
  .bento-card, .b-1, .b-2, .b-3, .b-4 { grid-column: span 12; min-height: 0; }
  /* Full-bleed blocks (.bento, .pricing-grid, .tokens-note) sit 18px from the surface edges:
     zero the section's side padding, then re-add the inset to text/header elements only.
     No negative margins. */
  .section { padding-left: 0; padding-right: 0; }
  .section-tag, .section-title, .section-sub, .uc-tabs, .price-note { padding-left: 24px; padding-right: 24px; }
  .uc-panel { padding: 28px 24px 26px; }
  .surface { margin: 36px auto; padding: 44px 18px 36px; }
  .site-footer { min-height: 560px; padding: 48px 22px 40px; }
  .footer-inner { min-height: 440px; gap: 36px; }
  .f-q1, .f-q2, .f-q3, .f-q4 { top: -100px; right: -100px; }
  .f-q1 { width: 300px; height: 300px; }
  .f-q2 { width: 232px; height: 232px; }
  .f-q3 { width: 164px; height: 164px; }
  .f-q4 { width: 96px;  height: 96px; }
  .f-halfL { top: 20%; width: 130px; height: 260px; }
  .f-tri { left: 12%; bottom: 30%; }
  .f-disc { left: 16%; bottom: 24%; }
  .f-dot { display: none; }
  .f-bars { display: none; }
  .f-split { left: 40%; top: 26%; }
  .f-cross { left: 52%; bottom: 34%; }
  .f-quarter { right: 24%; bottom: 92px; }
  .f-ring { right: 8%; bottom: 130px; }
}

@media (max-width: 640px) {
  .hero { padding: 40px 18px; }
  .section { padding: 16px 0 72px; }
  /* inset drops to 18px at this breakpoint */
  .section-tag, .section-title, .section-sub, .uc-tabs, .price-note { padding-left: 18px; padding-right: 18px; }
  .uc-panel { padding: 28px 18px 26px; }
  .card { padding: 38px 26px 32px; border-radius: 26px; }
  .head { margin-bottom: 26px; }
  h1 { font-size: clamp(40px, 12vw, 56px); }
  .lead { font-size: 14px; }
  .notify-form { flex-direction: column; }
  .notify-form button { width: 100%; }
  .s-disc { width: 420px; height: 420px; }
  .s-quarter-y { width: 360px; height: 360px; }
  .s-target { width: 180px; height: 180px; }
  .s-bar { width: 80px; height: 480px; }
}

@media (prefers-reduced-motion: reduce) {
  .shape, .s-blob { animation: none !important; }
  .glow, .card, .shape, .streak { transition: none !important; }
  .status-badge::before { animation: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}