:root{
  --ink:#f5f0e8;
  --paper:#f1eadf;
  --paper-ink:#171719;
  --black:#09090c;
  --black2:#111118;
  --red:#f12b37;
  --blue:#2c6fff;
  --violet:#7557ff;
  --muted:#aaa6a4;
  --line:rgba(255,255,255,.13);
  --shadow-red:10px 10px 0 rgba(241,43,55,.82);
  --shadow-blue:-8px -8px 0 rgba(44,111,255,.72);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  overflow-x:hidden;
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
  line-height:1.68;
  background:
    radial-gradient(circle at 12% 4%,rgba(241,43,55,.18),transparent 24%),
    radial-gradient(circle at 88% 8%,rgba(44,111,255,.20),transparent 27%),
    radial-gradient(circle at 50% 52%,rgba(117,87,255,.10),transparent 28%),
    linear-gradient(180deg,#08080b 0%,#101017 48%,#07070a 100%);
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-3;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.20) 1px,transparent 1.4px);
  background-size:12px 12px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.55),transparent 40%,rgba(0,0,0,.35));
  opacity:.20;
}
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:20;opacity:.11;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");
}
.web-bg{
  position:absolute;
  right:-160px;
  top:-110px;
  width:700px;
  height:700px;
  pointer-events:none;
  opacity:.15;
  background:
    repeating-radial-gradient(circle at 50% 50%, transparent 0 56px, rgba(255,255,255,.55) 58px 60px, transparent 62px 112px),
    conic-gradient(from 0deg at 50% 50%, transparent 0 7deg,rgba(255,255,255,.38) 7deg 8deg,transparent 8deg 37deg,rgba(255,255,255,.38) 37deg 38deg,transparent 38deg 67deg,rgba(255,255,255,.38) 67deg 68deg,transparent 68deg 97deg,rgba(255,255,255,.38) 97deg 98deg,transparent 98deg 127deg,rgba(255,255,255,.38) 127deg 128deg,transparent 128deg 157deg,rgba(255,255,255,.38) 157deg 158deg,transparent 158deg 187deg,rgba(255,255,255,.38) 187deg 188deg,transparent 188deg 217deg,rgba(255,255,255,.38) 217deg 218deg,transparent 218deg 247deg,rgba(255,255,255,.38) 247deg 248deg,transparent 248deg 277deg,rgba(255,255,255,.38) 277deg 278deg,transparent 278deg 307deg,rgba(255,255,255,.38) 307deg 308deg,transparent 308deg 337deg,rgba(255,255,255,.38) 337deg 338deg,transparent 338deg 360deg);
  transform:rotate(-12deg);
}
.hero{
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:56px 22px;
  text-align:center;
  position:relative;
  isolation:isolate;
}
.hero::before{
  content:"";
  position:absolute;
  width:420px;height:110px;
  background:var(--red);
  left:-155px;top:19%;
  transform:rotate(-17deg) skewX(-10deg);
  opacity:.88;
  z-index:-1;
  box-shadow:510px 390px 0 rgba(44,111,255,.78);
}
.hero::after{
  content:"";
  position:absolute;
  width:180px;height:180px;
  border:3px solid rgba(255,255,255,.15);
  transform:rotate(18deg);
  left:9%;bottom:12%;
  z-index:-1;
}
.hero-inner{max-width:930px;position:relative}
.eyebrow,.section-label{
  font-family:Arial,Helvetica,sans-serif;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.72rem;
  font-weight:900;
}
.eyebrow{
  color:#fff;
  display:inline-block;
  background:var(--red);
  padding:7px 13px 6px;
  transform:rotate(-2deg);
  box-shadow:5px 5px 0 var(--blue);
  margin-bottom:20px;
}
h1{
  font-family:Arial Black,Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
  font-size:clamp(3rem,8vw,7rem);
  line-height:.91;
  letter-spacing:-.06em;
  font-weight:900;
  margin:.12em auto .28em;
  max-width:960px;
  color:#fff;
  text-shadow:4px 3px 0 rgba(241,43,55,.82),-4px -3px 0 rgba(44,111,255,.78);
}
.hero-copy{
  max-width:650px;
  margin:0 auto 30px;
  color:#d9d6d2;
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(1.02rem,2vw,1.25rem);
}
.primary{
  border:0;
  background:var(--paper);
  color:#111;
  font-weight:900;
  padding:15px 22px;
  cursor:pointer;
  transform:rotate(-1deg);
  box-shadow:6px 6px 0 var(--red),-5px -5px 0 var(--blue);
  transition:.18s ease;
  font-size:.98rem;
}
.primary:hover{transform:rotate(-1deg) translateY(-3px)}
.section{width:min(1080px,calc(100% - 34px));margin:0 auto;padding:98px 0;position:relative}
.section-label{
  color:#fff;
  margin-bottom:26px;
  display:inline-block;
  position:relative;
  z-index:1;
}
.section-label::after{
  content:"";
  position:absolute;
  left:-8px;right:-8px;bottom:-4px;height:7px;
  background:linear-gradient(90deg,var(--red) 0 48%,var(--blue) 52% 100%);
  z-index:-1;
  transform:skewX(-18deg);
  opacity:.8;
}
.letter-card,.final-card{
  background:var(--paper);
  color:var(--paper-ink);
  border:2px solid #151519;
  padding:clamp(28px,5vw,68px);
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(1.08rem,1.65vw,1.34rem);
  position:relative;
  box-shadow:var(--shadow-red),var(--shadow-blue);
  transform:rotate(-.25deg);
}
.letter-card::before,.final-card::before{
  content:"";
  position:absolute;
  inset:14px;
  border:1px solid rgba(23,23,25,.14);
  pointer-events:none;
}
.letter-card p:first-child{font-size:1.2em;margin-top:0}
.letter-card p:last-child{margin-bottom:0}
.memories-section{padding-top:120px}
.memory-copy{max-width:820px;margin-bottom:54px}
h2{
  font-family:Arial Black,Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
  font-size:clamp(2.5rem,5.4vw,5.2rem);
  line-height:.92;
  letter-spacing:-.05em;
  margin:0 0 26px;
  color:#fff;
  text-shadow:3px 2px 0 rgba(241,43,55,.55),-3px -2px 0 rgba(44,111,255,.55);
}
.memory-copy p,.plan-intro p{
  font-family:Georgia,'Times New Roman',serif;
  font-size:1.15rem;
  color:#d2cfca;
}
.collage-stack{display:grid;gap:42px}
.collage{
  margin:0;
  padding:8px;
  background:#f5efe7;
  border:2px solid #0a0a0c;
  position:relative;
  box-shadow:9px 9px 0 var(--red),-7px -7px 0 var(--blue),0 24px 70px rgba(0,0,0,.36);
}
.collage:nth-child(2){transform:rotate(.55deg);box-shadow:9px 9px 0 var(--blue),-7px -7px 0 var(--red),0 24px 70px rgba(0,0,0,.36)}
.collage:nth-child(3){transform:rotate(-.4deg)}
.collage::after{
  content:"";
  position:absolute;
  width:92px;height:24px;
  left:50%;top:-13px;
  transform:translateX(-50%) rotate(-2deg);
  background:rgba(245,240,232,.72);
  border:1px solid rgba(0,0,0,.08);
  backdrop-filter:blur(2px);
}
.collage img{display:block;width:100%;height:auto}
.plan-section{padding-top:126px}
.plan-intro{max-width:900px;margin-bottom:46px}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.card{
  background:#121219;
  border:1px solid rgba(255,255,255,.16);
  padding:30px;
  min-height:250px;
  position:relative;
  overflow:hidden;
  box-shadow:0 18px 45px rgba(0,0,0,.28);
}
.card:nth-child(1),.card:nth-child(4){transform:rotate(-.5deg)}
.card:nth-child(2),.card:nth-child(3){transform:rotate(.45deg)}
.card::before{
  content:"";
  position:absolute;
  width:150px;height:150px;
  border-radius:50%;
  right:-70px;top:-70px;
  background:radial-gradient(circle,var(--red) 0 2px,transparent 2.4px);
  background-size:9px 9px;
  opacity:.33;
}
.card:nth-child(even)::before{background:radial-gradient(circle,var(--blue) 0 2px,transparent 2.4px);background-size:9px 9px}
.card span{
  display:inline-block;
  font-family:Arial Black,Impact,sans-serif;
  font-size:2.7rem;
  line-height:1;
  color:var(--red);
  text-shadow:2px 2px 0 var(--blue);
}
.card:nth-child(even) span{color:var(--blue);text-shadow:2px 2px 0 var(--red)}
.card h3{
  color:#fff;
  font-family:Arial Black,Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
  font-size:1.55rem;
  line-height:1.04;
  margin:18px 0 12px;
  letter-spacing:-.025em;
}
.card p{margin:0;color:#c2bec0;font-family:Georgia,'Times New Roman',serif}
.final-section{padding-top:110px;padding-bottom:130px}
.final-card{max-width:900px;margin:0 auto;transform:rotate(.18deg)}
.final-emphasis{
  font-family:Arial Black,Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
  font-size:clamp(2rem,4.5vw,4rem);
  line-height:.98;
  color:#171719;
  margin:52px 0 34px;
  letter-spacing:-.04em;
  position:relative;
}
.final-emphasis::after{
  content:"";
  display:block;
  width:190px;height:9px;
  margin-top:20px;
  background:linear-gradient(90deg,var(--red) 0 48%,var(--blue) 52% 100%);
  transform:skewX(-18deg);
}
.signoff{font-size:1.35rem;margin-bottom:0}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .72s ease,transform .72s ease}
.reveal.visible{opacity:1;transform:none}
@media(max-width:760px){
  .web-bg{width:450px;height:450px;right:-220px;top:-40px}
  .hero::before{width:260px;height:78px;left:-120px;top:17%;box-shadow:330px 420px 0 rgba(44,111,255,.72)}
  .section{width:min(100% - 22px,1080px);padding:72px 0}
  .hero{padding:38px 16px}
  h1{font-size:clamp(2.7rem,14vw,4.6rem)}
  .letter-card,.final-card{padding:27px 20px;box-shadow:6px 6px 0 rgba(241,43,55,.82),-5px -5px 0 rgba(44,111,255,.72)}
  .cards{grid-template-columns:1fr}
  .card{min-height:0;transform:none!important}
  .collage{box-shadow:6px 6px 0 var(--red),-5px -5px 0 var(--blue),0 18px 45px rgba(0,0,0,.32)}
  .collage:nth-child(2){box-shadow:6px 6px 0 var(--blue),-5px -5px 0 var(--red),0 18px 45px rgba(0,0,0,.32)}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.primary{transition:none}}

/* date callback */
.date-section{padding-top:40px;padding-bottom:150px}
.date-card{
  max-width:920px;
  margin:0 auto;
  padding:clamp(34px,6vw,76px);
  position:relative;
  overflow:hidden;
  background:#0d0d13;
  border:2px solid rgba(255,255,255,.16);
  box-shadow:12px 12px 0 rgba(241,43,55,.9),-10px -10px 0 rgba(44,111,255,.78),0 28px 70px rgba(0,0,0,.4);
  text-align:center;
  isolation:isolate;
}
.date-card::before{
  content:"";
  position:absolute;
  inset:-60px -100px auto auto;
  width:360px;height:360px;
  z-index:-1;
  opacity:.20;
  background:
    repeating-radial-gradient(circle at 50% 50%,transparent 0 38px,rgba(255,255,255,.6) 40px 42px,transparent 44px 78px),
    conic-gradient(from 0deg at 50% 50%,transparent 0 10deg,rgba(255,255,255,.4) 10deg 11deg,transparent 11deg 40deg,rgba(255,255,255,.4) 40deg 41deg,transparent 41deg 70deg,rgba(255,255,255,.4) 70deg 71deg,transparent 71deg 100deg,rgba(255,255,255,.4) 100deg 101deg,transparent 101deg 130deg,rgba(255,255,255,.4) 130deg 131deg,transparent 131deg 160deg,rgba(255,255,255,.4) 160deg 161deg,transparent 161deg 190deg,rgba(255,255,255,.4) 190deg 191deg,transparent 191deg 220deg,rgba(255,255,255,.4) 220deg 221deg,transparent 221deg 250deg,rgba(255,255,255,.4) 250deg 251deg,transparent 251deg 280deg,rgba(255,255,255,.4) 280deg 281deg,transparent 281deg 310deg,rgba(255,255,255,.4) 310deg 311deg,transparent 311deg 340deg,rgba(255,255,255,.4) 340deg 341deg,transparent 341deg 360deg);
}
.date-card::after{
  content:"";
  position:absolute;
  width:240px;height:70px;
  left:-70px;bottom:35px;
  background:var(--red);
  transform:rotate(-9deg) skewX(-18deg);
  opacity:.75;
  z-index:-1;
  box-shadow:270px -220px 0 rgba(44,111,255,.68);
}
.date-callback,.date-turn{
  margin:0 auto 10px;
  max-width:700px;
  color:#d2cfca;
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(1.05rem,2vw,1.25rem);
}
.date-turn{color:#fff;margin-bottom:26px}
.date-card h2{
  max-width:820px;
  margin:0 auto 34px;
  font-size:clamp(2.8rem,6vw,5.7rem);
  line-height:.92;
}
.date-actions{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.date-button{
  border:2px solid #fff;
  padding:15px 24px;
  min-width:160px;
  font-family:Arial Black,Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
  font-size:1rem;
  letter-spacing:.01em;
  cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}
.yes-button{
  background:var(--red);color:#fff;
  box-shadow:5px 5px 0 var(--blue);
  transform:rotate(-1deg);
}
.talk-button{
  background:#f5efe7;color:#111;
  box-shadow:5px 5px 0 var(--red);
  transform:rotate(1deg);
}
.date-button:hover{transform:translateY(-3px) rotate(0)}
.date-response{
  min-height:0;
  margin-top:0;
  font-family:Georgia,'Times New Roman',serif;
  color:#fff;
  font-size:clamp(1.1rem,2vw,1.35rem);
  transition:.25s ease;
}
.date-response.show{margin-top:28px;min-height:2em}
.date-response strong{
  display:block;
  margin-top:7px;
  font-family:Arial Black,Impact,sans-serif;
  font-size:clamp(1.6rem,3.5vw,3rem);
  line-height:1;
  color:#fff;
  text-shadow:2px 2px 0 var(--red),-2px -2px 0 var(--blue);
}
@media(max-width:760px){
  .date-section{padding-top:25px;padding-bottom:100px}
  .date-card{padding:38px 20px;box-shadow:7px 7px 0 rgba(241,43,55,.9),-6px -6px 0 rgba(44,111,255,.78)}
  .date-actions{gap:12px}
  .date-button{width:100%;min-width:0}
}

.date-send-note{
  margin:14px 0 0;
  font-size:.82rem;
  opacity:.72;
  text-align:center;
}
.date-button:disabled{
  cursor:default;
  opacity:.72;
}