/* ───────────── DeedStash · sectional scroll-story ─────────────
   Cash App storytelling principle, dark-luxury. Warm near-black,
   cream, brass, oxblood. Space Grotesk only.
   NO gradients, glows, emojis, purple, or AI slop.              */

:root{
  --bg:        #050406;
  --card:      #0a0608;
  --line:      #1a1518;
  --hair:      rgba(255,255,255,.08);
  --white:     #ffffff;
  --cream:     #F2E7CC;
  --muted:     #9a948c;
  --accent:    #E60105;
  --brass:     #FBB901;
  --brass-deep:#C9A24B;
  --ink:       #0a0608;
  --radius:    14px;
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  font-family:'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background:var(--bg);
  color:var(--white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }

/* faint film grain — depth without a gradient */
.bg-grain{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ───────────── shared rhythm ───────────── */
section{ position:relative; z-index:1; }

.wordmark{
  position:relative; z-index:3;
  padding:28px clamp(20px,5vw,56px);
}
.wordmark-text{
  font-weight:700;
  font-size:18px;
  letter-spacing:.14em;
  color:var(--cream);
}
.wordmark-accent{ color:var(--accent); }

/* ───────────── 1 · HERO ───────────── */
.hero{
  position:relative;
  overflow:hidden;
  min-height:clamp(560px,86vh,860px);
  display:flex;
  align-items:center;
  padding:clamp(40px,8vh,96px) clamp(20px,5vw,56px) clamp(56px,10vh,120px);
}
/* full-bleed background image — luxury objects sit right, darker side left */
.hero-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center right;
  z-index:0;
  pointer-events:none;
}
/* functional left→transparent scrim for headline legibility (allowed) */
.hero-scrim{
  position:absolute; inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(
    90deg,
    rgba(5,4,6,.92) 0%,
    rgba(5,4,6,.78) 28%,
    rgba(5,4,6,.34) 50%,
    rgba(5,4,6,0) 62%
  );
}
.hero-grid{
  position:relative;
  z-index:2;
  width:100%;
  max-width:1240px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr);
}
.hero-copy{ max-width:560px; }

.eyebrow{
  font-size:12px;
  font-weight:600;
  letter-spacing:.22em;
  color:var(--muted);
  margin-bottom:26px;
}

.headline{
  font-weight:700;
  font-size:clamp(40px,6.2vw,76px);
  line-height:1.0;
  letter-spacing:-0.028em;
  color:var(--white);
  margin-bottom:24px;
}

.subcopy{
  font-size:clamp(16px,2.1vw,20px);
  line-height:1.55;
  font-weight:400;
  color:var(--cream);
  max-width:480px;
  margin-bottom:40px;
}

/* ───────────── 1.5 · DEED CARDS (featured coverflow) ───────────── */
.deeds{
  padding:clamp(56px,10vh,128px) clamp(20px,5vw,56px) clamp(48px,9vh,104px);
  max-width:1320px;
  margin:0 auto;
  overflow:hidden;            /* let the glow bleed but clip horizontal spill */
}
.deeds-kicker{
  text-align:center;
  font-size:12px;
  font-weight:600;
  letter-spacing:.26em;
  color:var(--brass-deep);
  margin-bottom:clamp(28px,5vh,52px);
}

/* stage: 3D space + the section-bleeding glow + cursor tilt */
.deeds-stage{
  position:relative;
  height:clamp(220px,32vw,360px);
  perspective:1400px;
  outline:none;
  touch-action:pan-y;
  cursor:grab;
  --tiltX:0deg;
  --tiltY:0deg;
}
.deeds-stage.is-grabbing{ cursor:grabbing; }

/* the glow IS the page — large soft radial behind the active card,
   colored per-category by JS, transitions smoothly between hues */
.deeds-glow{
  position:absolute;
  left:50%; top:50%;
  width:min(120vw,1100px);
  height:min(90vh,640px);
  transform:translate(-50%,-50%);
  z-index:0;
  pointer-events:none;
  filter:blur(14px);
  transition:background 1.1s cubic-bezier(.4,0,.2,1);
  /* default; replaced by JS */
  background:radial-gradient(closest-side, rgba(251,185,1,.4) 0%, rgba(5,4,6,0) 76%);
}

.deeds-track{
  position:absolute;
  inset:0;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  transform-style:preserve-3d;
  transform:rotateX(var(--tiltX)) rotateY(var(--tiltY));
  transition:transform .35s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}

.deed-card{
  position:absolute;
  width:clamp(220px,26vw,330px);
  margin:0;
  transform-style:preserve-3d;
  will-change:transform,opacity;
  transition:transform .6s cubic-bezier(.22,1,.36,1),
             opacity .5s ease;
}
.deed-card:not(.is-active){ cursor:pointer; }

/* float only the active card, subtly, once in view */
.deeds-stage.is-floating .deed-card.is-active .deed-card-inner{
  animation:deed-float 6s ease-in-out infinite;
}

.deed-card-inner{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  transform:translateZ(0);
  transition:box-shadow .35s ease, filter .35s ease;
  /* contact shadow only — no border, no tile seam */
  box-shadow:0 26px 60px -30px rgba(0,0,0,.95);
  /* feather the image edge so the baked-in rectangle melts into the page */
  -webkit-mask-image:radial-gradient(118% 118% at 50% 46%, #000 60%, transparent 99%);
          mask-image:radial-gradient(118% 118% at 50% 46%, #000 60%, transparent 99%);
}
.deed-card:not(.is-active) .deed-card-inner{
  filter:saturate(.7) brightness(.74);
}
.deed-card.is-active .deed-card-inner{
  box-shadow:0 40px 90px -34px rgba(0,0,0,.95);
}
.deed-card-inner img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:3/2;
  object-fit:cover;
  -webkit-user-drag:none;
  user-select:none;
  backface-visibility:hidden;
}

/* arrow + active-category label row */
.deeds-ui{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(16px,3vw,30px);
  margin-top:clamp(28px,5vh,48px);
}
.deeds-arrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px; height:44px;
  border-radius:50%;
  border:1px solid var(--hair);
  background:rgba(255,255,255,.03);
  color:var(--cream);
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease, transform .2s ease, color .2s ease;
}
.deeds-arrow:hover{
  border-color:var(--brass-deep);
  color:var(--brass);
  background:rgba(251,185,1,.06);
}
.deeds-arrow:active{ transform:scale(.92); }
.deeds-arrow svg{ width:20px; height:20px; }
.deeds-label{
  min-width:clamp(150px,24vw,260px);
  text-align:center;
  font-size:clamp(20px,3.4vw,34px);
  font-weight:700;
  letter-spacing:.14em;
  color:var(--white);
}

/* dots */
.deeds-dots{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:clamp(18px,3vh,28px);
}
.deeds-dot{
  width:7px; height:7px;
  padding:0;
  border:none;
  border-radius:50%;
  background:rgba(242,231,204,.22);
  cursor:pointer;
  transition:background .25s ease, transform .25s ease, width .25s ease;
}
.deeds-dot:hover{ background:rgba(242,231,204,.45); }
.deeds-dot.is-on{
  width:22px;
  border-radius:4px;
  background:var(--brass);
}

@keyframes deed-float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-10px); }
}

/* ───────────── waitlist form ───────────── */
.field-row{
  display:flex;
  gap:10px;
  max-width:520px;
}
.waitlist-final .field-row{ margin:0 auto; }

#email,#email-2{
  flex:1;
  min-width:0;
  height:56px;
  padding:0 20px;
  font-family:inherit;
  font-size:16px;
  font-weight:500;
  color:var(--white);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  outline:none;
  transition:border-color .18s ease, box-shadow .18s ease;
}
#email::placeholder,#email-2::placeholder{ color:#5a5258; }
#email:focus,#email-2:focus{
  border-color:var(--brass);
  box-shadow:0 0 0 3px rgba(251,185,1,.18);
}
#email:disabled,#email-2:disabled{ opacity:.55; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:56px;
  padding:0 28px;
  font-family:inherit;
  font-size:16px;
  font-weight:600;
  letter-spacing:.005em;
  border:1px solid transparent;
  border-radius:var(--radius);
  cursor:pointer;
  white-space:nowrap;
  transition:transform .12s ease, background-color .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease;
}
.btn:active{ transform:translateY(1px) scale(.99); }

.btn-primary{
  background:var(--brass);
  color:var(--ink);
}
.btn-primary:hover{ background:#ffc81f; }
.btn-primary:disabled{ opacity:.6; cursor:default; }

.btn-ghost{
  background:transparent;
  color:var(--white);
  border-color:var(--hair);
  padding:0 24px;
}
.btn-ghost:hover{ border-color:var(--cream); }
.btn-ghost .arrow{ display:inline-block; transition:transform .18s ease; }
.btn-ghost:hover .arrow{ transform:translateX(3px); }

.secondary{ margin-top:18px; }

.form-msg{
  min-height:20px;
  margin-top:14px;
  font-size:14px;
  font-weight:500;
  letter-spacing:.01em;
}
.form-msg.is-error{ color:var(--accent); }
.form-msg.is-success{ color:var(--brass); }
.waitlist.is-done .field-row{ display:none; }

/* ───────────── 2 · STATEMENT ───────────── */
.statement{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(72px,12vh,150px) clamp(20px,5vw,56px);
  max-width:1240px;
  margin:0 auto;
}
.statement-line{
  font-weight:700;
  font-size:clamp(40px,8.5vw,108px);
  line-height:.98;
  letter-spacing:-0.03em;
  color:var(--white);
}
.statement-turn{
  color:var(--muted);
}
.statement-turn::after{
  content:"";
  display:inline-block;
  width:.5em;
  height:.5em;
  margin-left:.18em;
  border-radius:50%;
  background:var(--accent);
  vertical-align:baseline;
}

/* ───────────── 3 · THE SHIFT ───────────── */
.shift{
  padding:clamp(64px,11vh,140px) clamp(20px,5vw,56px);
  max-width:1000px;
  margin:0 auto;
}
.shift-lead{
  font-weight:500;
  font-size:clamp(26px,4.4vw,52px);
  line-height:1.12;
  letter-spacing:-0.02em;
  color:var(--cream);
  max-width:18ch;
  margin-bottom:.5em;
}
.shift-turn{
  font-weight:700;
  font-size:clamp(34px,6vw,72px);
  line-height:1.0;
  letter-spacing:-0.028em;
  color:var(--white);
}

/* ───────────── 4 · THREE PILLARS ───────────── */
.pillars{
  padding:clamp(64px,12vh,140px) clamp(20px,5vw,56px);
  max-width:1240px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(28px,4vw,56px);
}
.pillar{ padding-top:22px; }
.pillar-rule{
  display:block;
  width:44px;
  height:2px;
  background:var(--brass-deep);
  margin-bottom:22px;
}
.pillar-word{
  font-weight:700;
  font-size:clamp(24px,3vw,34px);
  letter-spacing:-0.02em;
  color:var(--white);
  margin-bottom:12px;
}
.pillar-line{
  font-size:16px;
  line-height:1.5;
  font-weight:400;
  color:var(--muted);
  max-width:26ch;
}

/* ───────────── 5 · FINAL CTA ───────────── */
.final{
  padding:clamp(64px,11vh,140px) clamp(20px,5vw,56px) clamp(48px,8vh,80px);
  max-width:760px;
  margin:0 auto;
  text-align:center;
  border-top:1px solid var(--line);
}
.final-mark{
  font-weight:700;
  font-size:18px;
  letter-spacing:.14em;
  color:var(--cream);
}
.final-head{
  font-weight:700;
  font-size:clamp(34px,5.5vw,60px);
  line-height:1.02;
  letter-spacing:-0.028em;
  color:var(--white);
  margin:18px auto 40px;
  max-width:14ch;
}
.waitlist-final{ margin-bottom:48px; }

.foot{
  font-size:13px;
  font-weight:400;
  letter-spacing:.02em;
  color:var(--muted);
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}
.foot-dot{ color:#3a343a; }
.foot-link{ color:var(--muted); border-bottom:1px solid transparent; transition:color .18s ease, border-color .18s ease; }
.foot-link:hover{ color:var(--cream); border-color:var(--brass-deep); }

/* ───────────── scroll-reveal ───────────── */
.reveal{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .4s ease-out, transform .4s ease-out;
  will-change:opacity, transform;
}
.reveal.is-in{
  opacity:1;
  transform:none;
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .btn:active{ transform:none; }
  .deed-card,
  .deeds-stage.is-floating .deed-card.is-active .deed-card-inner{ animation:none; }
  .deeds-glow{ transition:none; }
  .deed-card{ transition:opacity .2s ease; }
}

/* ───────────── responsive ───────────── */
@media (max-width:880px){
  .hero{
    min-height:auto;
    padding:clamp(48px,10vh,96px) clamp(20px,5vw,56px) clamp(64px,12vh,120px);
  }
  /* stronger overall scrim so stacked copy stays legible on mobile */
  .hero-scrim{
    background:linear-gradient(
      180deg,
      rgba(5,4,6,.86) 0%,
      rgba(5,4,6,.66) 45%,
      rgba(5,4,6,.82) 100%
    );
  }
  .hero-copy{ max-width:none; }
  .pillars{ grid-template-columns:1fr; gap:0; }
  .pillar{
    padding:28px 0;
    border-top:1px solid var(--line);
  }
  .pillar:first-child{ border-top:none; }
}

@media (max-width:680px){
  /* coverflow tightens up; active card stays the hero */
  .deeds-stage{ height:clamp(200px,56vw,280px); }
  .deed-card{ width:clamp(190px,62vw,250px); }
  .deeds-label{ min-width:auto; }
}

@media (max-width:560px){
  .field-row{ flex-direction:column; gap:10px; }
  .btn-primary{ width:100%; }
  .wordmark{ padding:22px 20px; }
  .statement{ min-height:64vh; }
}