/* ============================================================
   THE CLOUD — SEED ROOM
   teka light: warm cream, ink, nano-glass edges. subtle-classy.
   ============================================================ */

:root{
  --cream:#F6F3EC;
  --cream-2:#EFEBE0;
  --ink:#16150F;
  --ink-soft:#57544A;
  --ink-faint:#989486;
  --line:rgba(22,21,15,.14);
  --glass:rgba(255,255,255,.55);
  --glass-edge:rgba(255,255,255,.85);
  --accent:#FC6E48;      /* fear&love ember */
  --gold:#FFB500;
  --blue:#4E76D0;
  --serif:"Fraunces",serif;
  --grot:"Archivo",sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(900px 500px at 85% -5%, rgba(255,181,0,.10), transparent 60%),
    radial-gradient(800px 500px at -5% 30%, rgba(78,118,208,.08), transparent 60%),
    var(--cream);
  color:var(--ink);
  font-family:var(--grot);
  overflow-x:hidden;
}
::selection{background:var(--gold);color:var(--ink)}
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.5;
  background-image:radial-gradient(rgba(22,21,15,.05) 1px,transparent 1px);
  background-size:4px 4px;mix-blend-mode:multiply;
}
.cap{font:700 10.5px var(--grot);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.linklike{background:none;border:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* ---------- glass ---------- */
.glass{
  background:linear-gradient(160deg,var(--glass-edge),var(--glass));
  border:1px solid rgba(255,255,255,.9);
  outline:1px solid var(--line);
  border-radius:20px;
  box-shadow:0 18px 40px -22px rgba(22,21,15,.25), inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter:blur(10px);
}

/* ---------- ticker ---------- */
.ticker{
  position:relative;z-index:3;overflow:hidden;
  border-bottom:1px solid var(--line);
  background:var(--ink);color:var(--cream);
}
.ticker-track{
  display:inline-flex;gap:44px;white-space:nowrap;
  padding:8px 0;font:700 11px var(--grot);letter-spacing:.12em;text-transform:uppercase;
  animation:tick 36s linear infinite;
}
.ticker-track b{color:var(--gold)}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- topbar ---------- */
.topbar{
  position:sticky;top:10px;z-index:20;
  width:min(1160px,calc(100% - 32px));
  margin:12px auto 0;
  display:flex;align-items:center;gap:18px;
  padding:12px 20px;border-radius:999px;
}
.wordmark{
  display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);
  font:800 15px var(--grot);letter-spacing:.14em;
}
.mark-dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px rgba(252,110,72,.7)}
.topbar-mid{font:700 10px var(--grot);letter-spacing:.16em;color:var(--ink-faint)}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.round-chip{
  font:700 10.5px var(--grot);letter-spacing:.1em;color:var(--ink);
  border:1px solid var(--ink);border-radius:999px;padding:7px 14px;background:var(--gold);
}
.btn{
  font:700 12.5px var(--grot);letter-spacing:.04em;text-decoration:none;cursor:pointer;
  border-radius:999px;padding:10px 20px;transition:all .16s ease;display:inline-block;
}
.btn.solid{background:var(--ink);color:var(--cream);border:1.4px solid var(--ink)}
.btn.solid:hover{background:var(--accent);border-color:var(--accent)}
.btn.ghost{background:transparent;color:var(--ink);border:1.4px solid var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--cream)}

/* ---------- sections ---------- */
main{position:relative;z-index:2;width:min(1160px,calc(100% - 32px));margin:0 auto}
section{margin-top:64px}
.sec-head{display:flex;align-items:baseline;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.sec-head .cap{font-size:11.5px}
.deck-keys{font:600 12.5px var(--grot);color:var(--ink-faint);margin-left:auto}

/* ---------- deck ---------- */
.deck-sec{margin-top:34px}
.deck{
  position:relative;width:100%;aspect-ratio:16/9;
  border-radius:24px;overflow:hidden;outline-offset:-1px;
  user-select:none;
}
.deck:focus{outline:2px solid var(--ink)}
.deck-stage{position:absolute;inset:0}
.slide{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(24px,6vw,84px);
  opacity:0;transform:translateX(24px);transition:opacity .35s ease,transform .35s ease;
  pointer-events:none;
}
.slide.on{opacity:1;transform:none;pointer-events:auto}
.slide .s-cap{font:700 11px var(--grot);letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
.slide h2{
  font:600 clamp(26px,4.6vw,58px)/1.04 var(--serif);letter-spacing:-.02em;color:var(--ink);
  max-width:20ch;
}
.slide h2 em{font-style:italic;color:var(--accent)}
.slide p.lead{
  font:500 clamp(14px,1.6vw,19px)/1.55 var(--grot);color:var(--ink-soft);
  max-width:58ch;margin-top:18px;
}
.slide p.lead b{color:var(--ink)}
.s-rows{display:flex;flex-direction:column;gap:10px;margin-top:22px;max-width:640px}
.s-row{
  display:flex;gap:14px;align-items:baseline;
  border-bottom:1px solid var(--line);padding-bottom:9px;
  font:600 clamp(13px,1.5vw,16.5px) var(--grot);color:var(--ink);
}
.s-row .cap{min-width:86px}
.s-stats{display:flex;gap:34px;margin-top:26px;flex-wrap:wrap}
.s-stat b{display:block;font:600 clamp(26px,3.4vw,44px) var(--serif);color:var(--ink)}
.s-stat span{font:700 10px var(--grot);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.s-quote{font:500 italic clamp(20px,3vw,34px)/1.3 var(--serif);color:var(--ink);max-width:26ch;margin-top:8px}
.s-foot{position:absolute;left:clamp(24px,6vw,84px);bottom:26px;font:700 10px var(--grot);letter-spacing:.14em;color:var(--ink-faint);text-transform:uppercase}

/* slide accent variants */
.slide.tint-ink{background:var(--ink)}
.slide.tint-ink h2,.slide.tint-ink .s-row{color:var(--cream);border-color:rgba(246,243,236,.2)}
.slide.tint-ink p.lead{color:rgba(246,243,236,.75)}
.slide.tint-ink p.lead b{color:var(--cream)}
.slide.tint-ink .s-stat b{color:var(--cream)}
.slide.tint-ink .s-stat span{color:rgba(246,243,236,.6)}
.slide.tint-ink .s-foot{color:rgba(246,243,236,.5)}
.slide.tint-gold{background:linear-gradient(150deg,#FFB500,#f0a400)}
.slide.tint-ember{background:linear-gradient(150deg,#FC6E48,#e85f3b)}
.slide.tint-gold .s-cap,.slide.tint-ember .s-cap{color:var(--ink)}
.slide.tint-ember h2,.slide.tint-ember p.lead,.slide.tint-ember p.lead b{color:#fff}
.slide.tint-ember .s-cap{color:rgba(255,255,255,.85)}

.deck-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:6;
  width:42px;height:42px;border-radius:50%;
  border:1.4px solid var(--ink);background:var(--cream);color:var(--ink);
  font:700 15px var(--grot);cursor:pointer;transition:all .15s ease;
}
.deck-arrow:hover{background:var(--ink);color:var(--cream)}
.deck-arrow.prev{left:14px}
.deck-arrow.next{right:14px}
.deck-dots{
  position:absolute;bottom:16px;left:50%;transform:translateX(-50%);z-index:6;
  display:flex;gap:7px;
}
.deck-dots i{
  width:7px;height:7px;border-radius:50%;background:transparent;
  border:1.2px solid var(--ink-faint);cursor:pointer;transition:all .15s ease;
}
.deck-dots i.on{background:var(--accent);border-color:var(--accent)}
.deck-count{
  position:absolute;top:14px;right:18px;z-index:6;
  font:700 11px var(--grot);letter-spacing:.1em;color:var(--ink-faint);
}
.deck.fullscreen{position:fixed;inset:0;z-index:80;aspect-ratio:auto;border-radius:0}

/* ---------- memo ---------- */
.memo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.memo{
  padding:20px 22px;border-radius:18px;position:relative;
  background:var(--glass-edge);outline:1px solid var(--line);
  border:1px solid rgba(255,255,255,.9);
  cursor:pointer;transition:transform .15s ease;
}
.memo:hover{transform:translateY(-2px)}
.memo p{font:500 16.5px/1.5 var(--serif);color:var(--ink)}
.memo p b{color:var(--accent)}
.memo .m-tag{font:700 9.5px var(--grot);letter-spacing:.14em;color:var(--ink-faint);text-transform:uppercase;display:block;margin-bottom:8px}
.memo .m-copy{position:absolute;top:14px;right:16px;font:700 10px var(--grot);letter-spacing:.08em;color:var(--ink-faint)}
.memo-note{margin-top:12px;font:500 italic 14.5px var(--serif);color:var(--ink-soft)}

/* ---------- big three ---------- */
.big-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.big{padding:26px 24px}
.big-no{font:600 15px var(--serif);color:var(--accent)}
.big h3{font:600 24px/1.1 var(--serif);margin:10px 0 10px;letter-spacing:-.01em}
.big p{font:500 14px/1.6 var(--grot);color:var(--ink-soft)}
.big p b{color:var(--ink)}

/* ---------- proof ---------- */
.proof-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.proof{padding:24px 22px}
.proof h3{font:600 21px var(--serif);margin-bottom:9px}
.proof p{font:500 13.5px/1.6 var(--grot);color:var(--ink-soft)}
.proof p b{color:var(--ink)}
.proof p i{font-style:italic}
.ship{list-style:none;display:flex;flex-direction:column;gap:8px}
.ship li{
  font:500 13.5px/1.45 var(--grot);color:var(--ink-soft);
  padding-left:16px;position:relative;
}
.ship li::before{content:"↳";position:absolute;left:0;color:var(--accent)}
.ship li b{color:var(--ink)}

/* ---------- shelves ---------- */
.shelf-note{font:600 12.5px var(--grot);color:var(--ink-faint);margin-left:auto}
.shelf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.shelf{
  padding:20px 22px;border-radius:18px;text-decoration:none;color:var(--ink);
  background:var(--glass-edge);outline:1px solid var(--line);border:1px solid rgba(255,255,255,.9);
  transition:transform .15s ease, box-shadow .15s ease;display:block;
}
.shelf:hover{transform:translateY(-3px);box-shadow:0 18px 34px -20px rgba(22,21,15,.3)}
.shelf .cap{color:var(--accent)}
.shelf h3{font:600 19px var(--serif);margin:7px 0 6px}
.shelf p{font:500 13px/1.5 var(--grot);color:var(--ink-soft)}
.shelf .s-open{font:700 11px var(--grot);letter-spacing:.08em;color:var(--ink);display:inline-block;margin-top:10px}

/* ---------- terms ---------- */
.terms{display:flex;gap:36px;align-items:center;padding:38px 40px;justify-content:space-between;flex-wrap:wrap}
.terms h2{font:600 clamp(24px,3.4vw,38px)/1.1 var(--serif);letter-spacing:-.015em;margin:12px 0 12px;max-width:22ch}
.terms p{font:500 14.5px/1.6 var(--grot);color:var(--ink-soft);max-width:60ch}
.terms-cta{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.terms-sub{font:600 12px var(--grot);color:var(--ink-faint)}

/* ---------- foot / toast ---------- */
.foot{
  position:relative;z-index:2;
  width:min(1160px,calc(100% - 32px));
  margin:64px auto 0;padding:18px 4px 44px;
  border-top:1px solid var(--line);
  display:flex;gap:18px;align-items:baseline;
}
.foot-mid{font:500 italic 16px var(--serif);color:var(--ink-soft);margin:0 auto}
.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:99;
  padding:11px 22px;font:600 14px var(--grot);border-radius:999px;
}

@media (max-width:980px){
  .memo-grid,.big-grid,.proof-cols,.shelf-grid{grid-template-columns:1fr}
  .topbar-mid{display:none}
  .round-chip{display:none}
  .deck-keys{display:none}
}