:root{
  --ink:#1c1a17;
  --paper:#f6f1e7;
  --green:#5c7a00;
  --lime:#A8E10C;
  --dark:#0B0D0A;
  --card:rgba(246,241,231,.95);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--ink);
  background:var(--dark);
  overflow-x:hidden;
}
/* ---------- background video ---------- */
.bg{position:fixed;inset:0;z-index:0}
.bg video{width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(1.02)}
.scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,8,5,.62) 0%,rgba(6,8,5,.55) 40%,rgba(6,8,5,.78) 100%);
}
main{position:relative;z-index:1}
/* ---------- chapters ---------- */
.chapter{
  min-height:100vh;display:flex;align-items:center;gap:3rem;
  padding:8vh 6vw;
}
.chapter.hero{justify-content:space-between}
.chapter.right{justify-content:center}
.chapter.left{justify-content:center}
.chapter.cta{justify-content:center;position:relative;overflow:hidden}
.card{
  background:var(--card);
  border:2px solid var(--ink);border-radius:22px;
  box-shadow:0 10px 0 rgba(12,12,10,.55);
  padding:2.6rem 2.8rem;max-width:34rem;
  opacity:0;transform:translateY(34px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1);
}
.chapter.on .card{opacity:1;transform:none}
.eyebrow{
  font-size:.78rem;letter-spacing:.34em;font-weight:700;
  padding:.5em 1.2em;border:1.5px solid var(--ink);border-radius:999px;
  display:inline-block;margin-bottom:1.4rem;background:var(--paper);
}
.step{
  font-size:.8rem;letter-spacing:.22em;font-weight:700;
  color:var(--green);margin-bottom:.9rem;
}
h1{
  font-family:Georgia,'Times New Roman',serif;font-weight:700;
  font-size:clamp(2.5rem,5.4vw,4.3rem);line-height:1.04;letter-spacing:-.01em;
  margin-bottom:1.2rem;
}
h2{
  font-family:Georgia,'Times New Roman',serif;font-weight:700;
  font-size:clamp(1.9rem,3.4vw,2.8rem);line-height:1.08;margin-bottom:1rem;
}
h1 em,h2 em{font-style:italic;color:var(--green)}
.sub,.card p:not(.eyebrow):not(.step):not(.scroll-hint):not(.fine){
  font-size:1.05rem;line-height:1.55;color:#3d3a33;
}
.scroll-hint{
  margin-top:2rem;font-size:.72rem;letter-spacing:.3em;font-weight:700;color:#6b665c;
  animation:bob 2.2s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
/* ---------- CSS phone mockup ---------- */
.phone{
  flex:0 0 auto;width:290px;border-radius:44px;
  background:linear-gradient(145deg,#2a2d33,#14161a);
  padding:12px;
  box-shadow:0 40px 80px rgba(0,0,0,.6),0 8px 24px rgba(0,0,0,.5),inset 0 1px 1px rgba(255,255,255,.15);
  transform:rotate(-4deg);
  opacity:0;transition:opacity .8s ease .15s,transform .8s cubic-bezier(.2,.7,.3,1) .15s;
}
.chapter.on .phone{opacity:1}
.p-screen{
  background:var(--dark);border-radius:34px;padding:1.5rem 1.1rem 1rem;
  min-height:560px;display:flex;flex-direction:column;gap:.7rem;
}
.p-title{font-family:Georgia,serif;font-weight:700;font-size:1.7rem;color:#EDF2E0}
.p-sub{font-size:.68rem;color:#8A9180;margin-top:-.5rem}
.p-stat{
  background:#14170F;border:1.5px solid #2A2F1F;border-radius:16px;
  padding:.9rem 1rem;display:flex;flex-direction:column;gap:.15rem;
}
.p-num{font-size:1.9rem;font-weight:800;color:var(--lime);line-height:1}
.p-lbl{font-size:.66rem;color:#8A9180}
.p-btn{
  background:var(--lime);color:var(--dark);font-weight:800;font-size:.82rem;
  text-align:center;padding:.75rem;border-radius:999px;
}
.p-row{
  background:#14170F;border:1.5px solid #262B1C;border-radius:14px;
  padding:.65rem .8rem;display:flex;align-items:center;gap:.6rem;
}
.p-row b{display:block;font-size:.74rem;color:#EDF2E0}
.p-row span{font-size:.62rem;color:#8A9180}
.dot{width:12px;height:12px;border-radius:50%;flex:0 0 auto}
.dot.lime{background:var(--lime)}
.dot.amber{background:#E8B93C}
.dot.blue{background:#6FA8DC}
.p-tabs{
  margin-top:auto;background:var(--lime);border-radius:999px;
  display:flex;justify-content:space-around;padding:.55rem .4rem;
  font-size:.6rem;font-weight:800;color:var(--dark);
}
/* ---------- app screenshots ---------- */
.shot{
  flex:0 0 auto;width:min(250px,32vw);
  border-radius:26px;overflow:hidden;border:2px solid rgba(246,241,231,.9);
  box-shadow:0 30px 60px rgba(0,0,0,.6);
  opacity:0;transform:translateY(34px) rotate(0deg);
  transition:opacity .7s ease .1s,transform .7s cubic-bezier(.2,.7,.3,1) .1s;
}
.shot img{display:block;width:100%;height:auto}
.chapter.on .shot.tilt-r{opacity:1;transform:none;rotate:3deg}
.chapter.on .shot.tilt-l{opacity:1;transform:none;rotate:-3deg}
/* ---------- CTA band ---------- */
.cta-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.cta-scrim{position:absolute;inset:0;background:rgba(6,8,5,.68);z-index:1}
.chapter.cta .card{position:relative;z-index:2;text-align:center}
.actions{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:1.8rem}
.btn{
  font-weight:700;font-size:1rem;text-decoration:none;color:var(--ink);
  padding:.95em 1.7em;border-radius:999px;border:2px solid var(--ink);
  transition:transform .15s ease,box-shadow .15s ease;
  box-shadow:0 4px 0 var(--ink);
}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.btn.primary{background:var(--lime);color:#0B0D0A;border-color:var(--ink)}
.btn.ghost{background:var(--paper)}
.fine{margin-top:1.4rem;font-size:.82rem;opacity:.62}
footer{
  position:relative;z-index:1;text-align:center;
  padding:2rem 1rem 2.4rem;color:#cfd4c4;font-size:.85rem;
  background:linear-gradient(180deg,transparent,rgba(6,8,5,.85));
}
/* ---------- mobile ---------- */
@media (max-width:900px){
  .chapter{flex-direction:column;justify-content:center;gap:2rem;padding:10vh 6vw}
  .chapter.hero{padding-top:12vh}
  .card{padding:2rem 1.6rem;max-width:100%}
  .phone{width:240px;transform:rotate(-2deg)}
  .p-screen{min-height:470px}
  .shot{width:min(210px,60vw)}
}
@media (prefers-reduced-motion:reduce){
  .scroll-hint{animation:none}
  .card,.phone,.shot{transition:none;opacity:1;transform:none}
}