:root{
  --bg:#9fa3ad;
  --paper:#f7f5f4;
  --ink:#3f4350;
  --deep:#333743;
  --muted:#737886;
  --line:rgba(255,255,255,.66);
  --pink:#f4dfe7;
  --lav:#dfe0f0;
  --glass:rgba(248,247,248,.78);
  --shadow:0 28px 80px rgba(32,35,44,.24);
  --chrome:linear-gradient(135deg,#4f535e 0%,#dbdde2 16%,#8e939f 34%,#f7f7f8 52%,#8d929e 70%,#dfe1e4 84%,#525762 100%);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--ink);font-family:Manrope,Arial,sans-serif;background:
  radial-gradient(circle at 14% 6%,rgba(255,255,255,.98),transparent 23%),
  radial-gradient(circle at 86% 12%,rgba(230,227,235,.9),transparent 22%),
  radial-gradient(circle at 50% 45%,rgba(255,255,255,.23),transparent 30%),
  linear-gradient(135deg,#848894 0%,#c6c8ce 24%,#8c909b 46%,#e0e1e6 71%,#7e828f 100%);
  overflow-x:hidden;min-height:100vh;
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-2;
  background:
    linear-gradient(120deg,transparent 17%,rgba(255,255,255,.42) 31%,transparent 46%),
    linear-gradient(62deg,transparent 45%,rgba(255,255,255,.18) 57%,transparent 69%);
  mix-blend-mode:screen;opacity:.9;
}
body:after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-3;
  background:
    radial-gradient(circle at 7% 18%,rgba(255,255,255,.55) 0 3px,transparent 4px),
    radial-gradient(circle at 91% 29%,rgba(255,255,255,.45) 0 2px,transparent 3px),
    radial-gradient(circle at 42% 86%,rgba(255,255,255,.35) 0 2px,transparent 3px);
}
a{color:inherit;text-decoration:none}
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:20;height:92px;padding:18px 4.4vw;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  background:linear-gradient(180deg,rgba(40,42,50,.45),rgba(40,42,50,.08));
  backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.16);
}
.brand{display:flex;flex-direction:column;line-height:.74;width:max-content;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.23)}
.brand span{font:42px/1 'Marck Script',cursive}
.brand small{font:16px 'Cormorant Garamond',serif;text-align:right;padding-right:3px}
.topbar nav{display:flex;gap:38px;font:15px 'Cormorant Garamond',serif;color:rgba(255,255,255,.9)}
.topbar nav a{transition:.25s}.topbar nav a:hover{color:#fff;text-shadow:0 0 12px rgba(255,255,255,.65)}
.ghost-btn{
  justify-self:end;border:1px solid rgba(255,255,255,.78);background:rgba(255,255,255,.12);color:#fff;
  border-radius:999px;padding:12px 22px;font:16px 'Cormorant Garamond',serif;
  box-shadow:inset 0 1px 12px rgba(255,255,255,.2),0 8px 22px rgba(20,22,29,.16);cursor:pointer;transition:.25s
}
.ghost-btn:hover{transform:translateY(-2px);background:rgba(255,255,255,.2)}.ghost-btn span{font-size:12px}
.section-pad{width:min(1180px,90vw);margin:auto;padding:110px 0}
.hero{
  width:min(1180px,90vw);margin:auto;min-height:880px;padding-top:130px;padding-bottom:150px;
  display:grid;grid-template-columns:1.03fr .97fr;align-items:center;gap:10px;position:relative;
}
.hero:before{
  content:"";position:absolute;inset:10% -4% 7%;border-radius:42px;
  background:
    radial-gradient(circle at 72% 30%,rgba(255,255,255,.42),transparent 18%),
    radial-gradient(circle at 35% 55%,rgba(255,238,244,.35),transparent 26%),
    linear-gradient(120deg,rgba(32,35,42,.12),rgba(255,255,255,.1) 31%,rgba(255,255,255,.28) 52%,rgba(42,45,53,.09));
  filter:blur(.1px);box-shadow:inset 0 0 100px rgba(255,255,255,.14),0 40px 90px rgba(32,34,43,.18);pointer-events:none;
}
.hero-copy{position:relative;z-index:2;padding-left:6vw}
.eyebrow{font-size:11px;letter-spacing:.19em;text-transform:uppercase;color:rgba(255,255,255,.76);margin-bottom:18px}
.hero h1{font:500 clamp(70px,8vw,118px)/.78 'Cormorant Garamond',serif;color:#fff;margin:0 0 28px;text-shadow:0 3px 20px rgba(44,47,56,.35)}
.hero h1 .script{font:400 1.08em/1 'Marck Script',cursive;color:#ffe9f0;text-shadow:0 0 20px rgba(255,226,237,.95),0 4px 22px rgba(43,45,53,.28)}
.hero h1 em{font-style:normal;font-size:.58em;letter-spacing:.06em;text-transform:uppercase}
.hero-copy>p{max-width:430px;font:23px/1.35 'Cormorant Garamond',serif;color:#fff;margin:0 0 33px;text-shadow:0 2px 12px rgba(40,42,50,.35)}
.primary-btn{
  border:1px solid rgba(255,255,255,.88);background:linear-gradient(100deg,rgba(249,224,234,.96),rgba(221,226,245,.96));
  color:#4c5262;padding:16px 28px;border-radius:999px;font:16px 'Cormorant Garamond',serif;letter-spacing:.05em;
  box-shadow:0 18px 38px rgba(30,34,43,.18),inset 0 0 18px rgba(255,255,255,.84);cursor:pointer;transition:.3s;position:relative;overflow:hidden
}
.primary-btn:before{content:"";position:absolute;top:-60%;left:-25%;width:24%;height:220%;background:rgba(255,255,255,.56);transform:rotate(18deg);transition:.55s}
.primary-btn:hover{transform:translateY(-3px);box-shadow:0 22px 42px rgba(30,34,43,.24),inset 0 0 24px rgba(255,255,255,.95)}
.primary-btn:hover:before{left:110%}.primary-btn span{margin-left:9px}.wide{width:100%}
.hero-visual{height:650px;position:relative;display:flex;align-items:center;justify-content:center;z-index:2}
.hero-visual:before{content:"";position:absolute;width:480px;height:470px;border-radius:47% 53% 49% 51%;background:radial-gradient(circle at 48% 34%,rgba(255,255,255,.52),rgba(213,213,220,.18) 54%,rgba(255,255,255,0) 70%);filter:blur(8px)}
.girl-photo-wrap{width:min(460px,74vw);position:relative;animation:float 6s ease-in-out infinite;filter:drop-shadow(0 38px 32px rgba(25,28,35,.28));z-index:3;isolation:isolate}
.girl-photo-wrap:before{content:"";position:absolute;left:13%;right:13%;bottom:5%;height:12%;border-radius:50%;background:radial-gradient(ellipse,rgba(54,57,70,.38),rgba(225,218,233,.18) 48%,transparent 73%);filter:blur(9px);z-index:0}
.girl-photo-wrap:after{content:"";position:absolute;inset:7% -3% 5%;border:1px solid rgba(255,255,255,.58);border-radius:48% 52% 46% 54%;background:radial-gradient(circle at 50% 28%,rgba(255,255,255,.34),rgba(235,225,238,.08) 48%,transparent 72%);box-shadow:0 0 0 10px rgba(255,255,255,.055),inset 0 0 45px rgba(255,255,255,.18);pointer-events:none;z-index:1}
.girl-model-stage{--rx:0deg;--ry:0deg;position:relative;z-index:2;transform-style:preserve-3d;transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(14px);transition:transform .18s ease-out;will-change:transform}
.girl-model{display:block;width:100%;height:auto;filter:drop-shadow(0 24px 24px rgba(29,31,39,.3)) drop-shadow(0 0 18px rgba(255,237,246,.38));transform:translateZ(24px);user-select:none;-webkit-user-drag:none}
.photo-glow{position:absolute;inset:9% -14% 3%;background:radial-gradient(circle,rgba(255,255,255,.76),rgba(242,224,235,.28) 43%,transparent 72%);filter:blur(27px);z-index:0}
.photo-caption{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:4;white-space:nowrap;padding:9px 16px;border:1px solid rgba(255,255,255,.75);border-radius:999px;background:rgba(255,255,255,.55);backdrop-filter:blur(10px);color:#555b69;font:13px Manrope,sans-serif;box-shadow:0 8px 24px rgba(40,43,52,.12)}
.orbit{position:absolute;border:1px dashed rgba(255,255,255,.42);border-radius:50%;animation:spin 18s linear infinite}.orbit-one{width:520px;height:520px}.orbit-two{width:600px;height:320px;transform:rotate(32deg);animation-direction:reverse}
.chrome-field{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}.chrome-star{position:absolute;color:#fff;text-shadow:0 2px 10px rgba(28,30,38,.38),0 0 10px rgba(255,255,255,.95),0 0 28px rgba(255,225,241,.95);font-size:50px;opacity:.86;animation:drift 12s ease-in-out infinite, sparkle 2.6s ease-in-out infinite}.s1{left:7%;top:24%;animation-delay:-2s,-.4s}.s2{right:4%;top:13%;font-size:70px;animation-delay:-1s,-1.3s}.s3{right:14%;bottom:18%;font-size:44px;animation-delay:-5s,-.8s}.s4{left:15%;bottom:8%;font-size:76px;animation-delay:-7s,-1.8s}.s5{left:40%;top:8%;font-size:35px;animation-delay:-4s,-.2s}.s6{right:40%;bottom:11%;font-size:30px;animation-delay:-2s,-1.1s}
.glass-panel{background:linear-gradient(135deg,rgba(250,249,249,.92),rgba(238,237,241,.76));border:1px solid rgba(255,255,255,.95);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.95);backdrop-filter:blur(24px);border-radius:34px}
.write-section{margin-top:-98px;position:relative;z-index:5;margin-bottom:70px;padding-top:78px}
.section-heading{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:45px}.section-heading h2,.emotional h2,.modal-card h2{font:500 clamp(42px,5vw,68px)/.9 'Cormorant Garamond',serif;color:var(--deep);margin:0}.script{font-family:'Marck Script',cursive;font-weight:400}.tiny-note{text-align:right;font:22px/1.05 'Cormorant Garamond',serif;color:#6e7381}
.letter-form{display:grid;grid-template-columns:1.2fr .8fr;gap:45px}.form-main label{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:20px;color:#6e7380}.form-main input,.form-main textarea,.modal-card input{display:block;width:100%;margin-top:9px;border:1px solid rgba(133,138,152,.32);background:rgba(255,255,255,.82);border-radius:15px;padding:15px 18px;outline:none;color:#444a59;font:15px Manrope,sans-serif;box-shadow:inset 0 1px 8px rgba(85,91,111,.04);transition:.2s}.form-main input:focus,.form-main textarea:focus,.modal-card input:focus{border-color:rgba(102,107,121,.6);background:#fff;box-shadow:0 0 0 4px rgba(215,217,224,.8)}textarea{min-height:170px;resize:vertical}.quick-dates{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}.quick-dates button{border:1px solid rgba(117,122,138,.3);background:rgba(255,255,255,.62);color:#6f7481;border-radius:999px;padding:8px 12px;font-size:11px;cursor:pointer}
.prompt-card{border:1px dashed rgba(110,116,130,.34);border-radius:50% 44% 48% 52%;padding:70px 60px;align-self:center;min-height:370px;display:flex;flex-direction:column;justify-content:center;position:relative;background:radial-gradient(circle at 55% 40%,rgba(255,255,255,.92),rgba(255,255,255,.18))}.prompt-card .script{font-size:44px;color:#5e6472;margin-bottom:15px}.prompt-card p{font:22px/1.35 'Cormorant Garamond',serif;color:#5e6470}.prompt-card strong{font:600 17px/1.5 Manrope;color:#4b505d}.prompt-star{position:absolute;right:45px;top:28px;color:#7f8593;font-size:27px}.form-error{min-height:20px;color:#a15d70;font-size:13px;margin:8px 0}
.steps{margin-bottom:100px}.center-title{text-align:center;font:500 28px 'Cormorant Garamond',serif;color:#575d69;letter-spacing:.08em;margin-bottom:45px}.center-title span{font-size:17px}.steps-grid{display:grid;grid-template-columns:1fr 45px 1fr 45px 1fr 45px 1fr;align-items:center;gap:10px}.steps-grid article{text-align:center}.step-icon{margin:auto auto 14px;width:68px;height:68px;border-radius:50%;display:grid;place-items:center;border:1px dashed rgba(116,121,133,.4);font-size:27px;color:#646b79;background:rgba(255,255,255,.68)}.steps-grid b{font:12px Manrope;color:#858b98;letter-spacing:.1em}.steps-grid h3{font:28px 'Cormorant Garamond',serif;margin:6px 0;color:#535965}.steps-grid p{font-size:13px;line-height:1.5;color:#6f7581}.arrow{font-size:24px;color:#747a88;text-align:center}
.emotional{width:min(1080px,88vw);margin:0 auto 100px;padding:65px 70px;border-radius:38px;background:linear-gradient(125deg,rgba(250,248,249,.94),rgba(230,229,237,.8));border:1px solid rgba(255,255,255,.95);box-shadow:var(--shadow);display:grid;grid-template-columns:1fr auto;gap:35px;align-items:center;position:relative}.emotional:after{content:"";position:absolute;width:260px;height:260px;right:80px;top:-120px;border-radius:50%;background:rgba(255,255,255,.42);filter:blur(35px);pointer-events:none}.emotional p{max-width:700px;font:21px/1.45 'Cormorant Garamond',serif;color:#686e7a}.emotional-star{position:absolute;right:30px;top:30px;color:#868c98;font-size:26px}
.faq{padding-top:30px;padding-bottom:130px}.faq-list{max-width:900px;margin:auto;border-top:1px solid rgba(94,100,113,.22)}details{border-bottom:1px solid rgba(94,100,113,.22);padding:0 8px}summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:24px 4px;font:24px 'Cormorant Garamond',serif;color:#555b68}summary::-webkit-details-marker{display:none}summary span{font:20px Manrope;color:#7f8592}details p{margin:0 30px 25px;font-size:14px;line-height:1.65;color:#6e7480}
footer{padding:55px 5vw 35px;background:rgba(55,58,67,.34);border-top:1px solid rgba(255,255,255,.35);display:grid;grid-template-columns:1fr 1.5fr 1fr;align-items:end;gap:30px;color:#fff}footer .brand{color:#fff}footer p{font:18px 'Cormorant Garamond',serif;color:rgba(255,255,255,.72);max-width:420px}.footer-links{display:flex;flex-wrap:wrap;gap:16px;justify-content:flex-end;font-size:12px;color:rgba(255,255,255,.7)}
.modal{position:fixed;inset:0;background:rgba(25,28,35,.52);backdrop-filter:blur(14px);display:grid;place-items:center;z-index:50;padding:20px}.modal.hidden,.success-screen.hidden{display:none}.modal-card{position:relative;width:min(560px,94vw);max-height:90vh;overflow:auto;border-radius:30px;padding:42px;background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(233,232,238,.94));border:1px solid #fff;box-shadow:0 30px 100px rgba(22,24,30,.34)}.modal-card h2{margin-bottom:24px}.modal-close{position:absolute;right:20px;top:18px;border:0;background:transparent;font-size:27px;color:#6f7480;cursor:pointer}.auth-tabs{display:flex;gap:8px;margin-bottom:24px}.auth-tabs button{flex:1;border:1px solid #d3d5dc;background:rgba(255,255,255,.65);border-radius:12px;padding:11px;cursor:pointer;color:#6f7480}.auth-tabs button.active{background:#fff;color:#4d525e;box-shadow:0 6px 18px rgba(80,85,105,.08)}.modal-card label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.07em;margin:15px 0}.hidden-field{display:none!important}.dashboard-card{width:min(900px,94vw)}.letters-list{display:grid;gap:12px;margin:25px 0}.letter-item{display:grid;grid-template-columns:1fr auto;gap:15px;padding:18px;border-radius:18px;background:rgba(255,255,255,.68);border:1px solid rgba(255,255,255,.9)}.letter-item h3{margin:0 0 5px;font:24px 'Cormorant Garamond',serif;color:#515762}.letter-meta{font-size:12px;color:#7d838f}.status{font-size:11px;padding:6px 9px;border-radius:999px;background:#ececf1}.item-actions{display:flex;gap:7px;align-items:center;justify-content:flex-end;flex-wrap:wrap}.item-actions button{border:1px solid #d0d3db;background:#fff9;color:#666c79;border-radius:10px;padding:7px 10px;cursor:pointer;font-size:11px}
.success-screen{position:fixed;inset:0;z-index:100;background:radial-gradient(circle at 50% 35%,#fff,rgba(213,215,222,.98) 50%,#7f838e);display:grid;place-items:center;text-align:center;padding:30px}.success-envelope{width:240px;height:160px;background:linear-gradient(145deg,#fff,#dcdde3);border-radius:10px;box-shadow:0 35px 80px rgba(24,27,35,.28);position:absolute;animation:sealDrop 1.2s cubic-bezier(.2,.8,.2,1) forwards}.success-flap{position:absolute;inset:0 auto auto 0;width:0;height:0;border-left:120px solid transparent;border-right:120px solid transparent;border-top:82px solid #f5f5f7}.success-seal{position:absolute;left:103px;top:61px;width:35px;height:35px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#fff,#8b92a4);color:#fff}.success-copy{position:relative;margin-top:320px;animation:rise .9s .35s both}.success-copy h2{font:56px 'Cormorant Garamond',serif;color:#4e5360;margin:10px 0}.success-copy h2 span{font-size:30px}.success-copy p{font:20px/1.45 'Cormorant Garamond',serif;color:#626875}.success-copy strong{font-size:24px;color:#4e5360}.success-copy .primary-btn{margin-top:10px}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s,transform .8s}.reveal.visible{opacity:1;transform:none}
@keyframes float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-15px) rotate(1deg)}}
@keyframes drift{0%,100%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(20px,-18px,0) rotate(12deg)}}
@keyframes sparkle{0%,100%{opacity:.45;filter:brightness(.95) drop-shadow(0 0 3px rgba(255,255,255,.45))}45%{opacity:1;filter:brightness(1.5) drop-shadow(0 0 14px rgba(255,255,255,1))}60%{opacity:.72;filter:brightness(1.1) drop-shadow(0 0 7px rgba(255,226,242,.8))}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes sealDrop{0%{transform:translateY(-300px) rotate(-8deg);opacity:0}70%{transform:translateY(20px) rotate(3deg)}100%{transform:translateY(0) rotate(0);opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.girl-photo-wrap{animation:none}.girl-model-stage{transition:none}}
@media(max-width:900px){.topbar{grid-template-columns:1fr auto;height:80px}.topbar nav{display:none}.brand span{font-size:34px}.hero{grid-template-columns:1fr;padding-top:120px;text-align:center;min-height:850px}.hero-copy{padding-left:0}.hero-copy>p{margin-left:auto;margin-right:auto}.hero-visual{height:530px;order:-1}.girl-photo-wrap{width:min(430px,82vw)}.section-pad{padding:75px 0}.write-section{margin-top:-70px}.letter-form{grid-template-columns:1fr}.prompt-card{min-height:300px;border-radius:38px;padding:45px}.steps-grid{grid-template-columns:1fr 1fr;gap:28px}.arrow{display:none}.emotional{grid-template-columns:1fr;padding:45px 35px}.emotional .primary-btn{width:100%}footer{grid-template-columns:1fr}.footer-links{justify-content:flex-start}}
@media(max-width:560px){.topbar{padding:16px 20px}.hero{min-height:770px}.hero h1{font-size:66px}.hero-copy>p{font-size:19px}.hero-visual{height:430px}.girl-photo-wrap{width:82vw;max-width:360px}.chrome-star{font-size:35px}.write-section{border-radius:25px;padding-left:22px;padding-right:22px}.section-heading{display:block}.tiny-note{text-align:left;margin-top:18px}.steps-grid{grid-template-columns:1fr}.emotional{width:92vw;padding:38px 25px}.emotional h2{font-size:42px}.faq summary{font-size:21px}.success-copy h2{font-size:43px}.success-copy{margin-top:260px}.success-envelope{transform:scale(.8)}}
