/* ═══════════════════════════════════════════════════════════
   AstroDate — single design system for marketing + app.
   Warm parchment · Instrument Serif · Hanken Grotesk
   ═══════════════════════════════════════════════════════════ */
:root{
  --paper:#FAF4E8; --paper-2:#F2E7D2; --ink:#221A2A; --body:#574F5E; --muted:#8B8390;
  --rose:#D6485F; --rose-press:#BB3550; --rose-soft:#FDF1F0; --gold:#C99A3E;
  --line:#E6D8C0; --line-soft:#EFE6D5; --line-strong:#D9CBB2;
  --ok:#2E7D5B; --bad:#b3261e; --maxw:1120px;
  --shadow-card:0 20px 50px -22px rgba(34,26,42,.16);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}}
body{font-family:'Hanken Grotesk',system-ui,sans-serif;background:var(--paper);color:var(--ink);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh}
::selection{background:#F3D3D8}
:focus-visible{outline:2px solid var(--rose);outline-offset:3px;border-radius:4px}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
section{padding:92px 0;scroll-margin-top:80px}
.card section,.auth section{padding:0}
@media(max-width:680px){section{padding:60px 0}.card section,.auth section{padding:0}}

.serif,h1,h2,h3.disp,.num,.big{font-family:'Instrument Serif',Georgia,serif;font-weight:400;letter-spacing:0}
h1{font-size:clamp(2.6rem,6vw,4.4rem);line-height:1.03;letter-spacing:-.015em}
h2{font-size:clamp(2.1rem,4.4vw,3.2rem);line-height:1.05;margin-bottom:18px;letter-spacing:-.012em}
h3{font-family:'Hanken Grotesk';font-weight:600;font-size:1.08rem;letter-spacing:-.01em}
i,em{font-style:italic}
p{color:var(--body)}
.lead{font-size:1.2rem;line-height:1.55;color:var(--body)}
.label{display:inline-flex;font-family:'Hanken Grotesk';font-size:.76rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--rose);margin-bottom:16px}
.accent{color:var(--rose)}
.muted{color:var(--muted)}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:'Hanken Grotesk';
  font-weight:600;font-size:1rem;height:50px;padding:0 26px;border-radius:999px;border:1.5px solid transparent;
  cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s,color .15s,transform .12s,opacity .15s,box-shadow .15s}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn-primary{background:var(--rose);color:#fff;box-shadow:0 10px 26px -14px rgba(214,72,95,.55)}
.btn-primary:hover:not([disabled]){background:var(--rose-press);box-shadow:0 12px 30px -14px rgba(187,53,80,.6)}
.btn-ghost{background:var(--rose-soft);border-color:transparent;color:var(--rose)}
.btn-ghost:hover{background:#FAE3E1;color:var(--rose-press)}
.btn-sm{height:42px;padding:0 18px;font-size:.94rem}
.btn-block{width:100%}
.arrow{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:none;color:var(--ink)}
.arrow svg{transition:transform .15s}
.arrow:hover{color:var(--rose)}.arrow:hover svg{transform:translateX(4px)}
.linklike{background:none;border:0;color:var(--body);font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.linklike:hover{color:var(--rose)}

/* ── header / nav ── */
header{position:sticky;top:0;z-index:40;background:rgba(250,244,232,.9);backdrop-filter:blur(8px);border-bottom:1px solid transparent;transition:border-color .25s}
header.scrolled,header.app,header.open{border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px}
.nav .btn{white-space:nowrap}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:'Instrument Serif',serif;font-size:1.65rem;line-height:1}
.logo svg{flex:none}
.nav-mid{display:flex;gap:22px}
.nav-mid a{color:var(--body);text-decoration:none;font-size:.95rem;font-weight:500;white-space:nowrap}
.nav-mid a:hover{color:var(--ink)}
.nav-cta{display:flex;gap:10px;align-items:center}
.nav-right{display:flex;align-items:center;gap:14px}
.menu-btn{display:none;background:none;border:0;cursor:pointer;padding:8px;margin-right:-8px;color:var(--ink)}
@media(max-width:1120px){
  .nav-mid{display:none}
  .menu-btn{display:inline-flex}
  header.open .nav-mid{display:flex;position:absolute;top:72px;left:0;right:0;flex-direction:column;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line);padding:8px 28px 16px}
  header.open .nav-mid a{padding:12px 0;border-top:1px solid var(--line-soft);font-size:1.05rem}
}
@media(max-width:520px){.nav-cta .btn-ghost{display:none}}

/* ── hero (marketing) ── */
.hero{position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.65;
  background-image:
    radial-gradient(circle 1.6px at 8% 22%, var(--gold) 50%, transparent 51%),
    radial-gradient(circle 1.1px at 16% 68%, var(--line-strong) 50%, transparent 51%),
    radial-gradient(circle 1.4px at 27% 34%, var(--gold) 50%, transparent 51%),
    radial-gradient(circle 1px at 41% 14%, var(--line-strong) 50%, transparent 51%),
    radial-gradient(circle 1.5px at 63% 21%, var(--gold) 50%, transparent 51%),
    radial-gradient(circle 1px at 74% 60%, var(--line-strong) 50%, transparent 51%),
    radial-gradient(circle 1.7px at 86% 30%, var(--gold) 50%, transparent 51%),
    radial-gradient(circle 1.1px at 93% 74%, var(--line-strong) 50%, transparent 51%)}
.hero-inner{position:relative;max-width:780px;margin:0 auto;text-align:center;padding:36px 0 60px}
.hero h1{margin-bottom:22px}
.hero h1 .it{color:var(--rose)}
.hero .lead{max-width:56ch;margin:0 auto 30px}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.hero .forwho{margin:28px auto 0;color:var(--muted);font-size:.95rem;max-width:54ch}
@media(max-width:680px){.hero-inner{padding:20px 0 44px}}

/* ── audiences ── */
.paths{margin-top:40px;border-top:1px solid var(--line)}
.path{display:grid;grid-template-columns:80px 1fr auto;gap:32px;align-items:center;padding:34px 4px;border-bottom:1px solid var(--line)}
.path .num{font-size:2.3rem;color:var(--rose);line-height:1}
.path .pt h3{font-size:1.45rem;font-family:'Instrument Serif';font-weight:400;letter-spacing:0;margin-bottom:5px}
.path .pt p{font-size:1rem;max-width:54ch}
.path .go{white-space:nowrap}
@media(max-width:760px){.path{grid-template-columns:46px 1fr;gap:14px 18px;padding:28px 2px;align-items:start}.path .go{grid-column:1/-1;justify-self:start;margin-top:12px}}

/* ── constellation trail ── */
.trail{position:relative;max-width:900px;margin:56px auto 0}
.trail::before{content:"";position:absolute;left:50%;transform:translateX(-50%);top:6px;bottom:6px;width:2px;
  background:linear-gradient(180deg,transparent,var(--gold) 7%,var(--gold) 93%,transparent);opacity:.5}
.tnode{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:56px;padding:26px 0}
.tnode .star{position:absolute;left:50%;top:42px;transform:translate(-50%,-50%);z-index:2}
.tnode .c .num{font-size:2rem;color:var(--rose);line-height:1;display:block;margin-bottom:4px}
.tnode .c h3{font-size:1.2rem;margin-bottom:6px;font-family:'Instrument Serif';font-weight:400;letter-spacing:0}
.tnode .c p{font-size:.96rem}
.tnode:nth-child(odd) .c{grid-column:1;text-align:right;padding-right:42px}
.tnode:nth-child(even) .c{grid-column:2;padding-left:42px}
@media(max-width:700px){.trail::before{left:13px}.tnode{grid-template-columns:1fr;gap:0}.tnode .star{left:13px;top:32px}.tnode .c{grid-column:1 !important;text-align:left !important;padding:0 0 0 44px !important}}

/* ── editorial split / bands ── */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.band{background:var(--paper-2)}
.split ul{list-style:none;margin:22px 0 28px}
.split li{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--line);font-size:1rem;color:var(--body)}
.split li:first-child{border-top:0}
.split li svg{flex:none;margin-top:3px}
.figure{text-align:center}
.big{font-size:clamp(4.5rem,12vw,8rem);line-height:.9;color:var(--rose)}
.big-sub{font-size:1.1rem;color:var(--body);margin-top:8px}
.figure .stars-row{margin-top:18px;color:var(--gold)}
@media(max-width:820px){.split{grid-template-columns:1fr;gap:30px}.figure{order:2}}

/* ── membership ── */
.member{background:var(--paper-2)}
.price-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:54px;align-items:center}
.price{font-size:clamp(4rem,11vw,7rem);line-height:.85;color:var(--ink);font-family:'Instrument Serif',serif}
.price .cur{color:var(--rose)}
.price small{display:block;font-family:'Hanken Grotesk';font-size:.98rem;color:var(--muted);margin-top:14px;line-height:1.5}
.incl{list-style:none;margin:6px 0 0}
.incl li{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-top:1px solid var(--line);font-size:1rem;color:var(--body)}
.incl li:first-child{border-top:0}
.incl svg{flex:none;margin-top:3px}
@media(max-width:820px){.price-wrap{grid-template-columns:1fr;gap:30px}}

/* ── marketing forms ── */
.reg{max-width:600px;margin:0 auto}
.reg .head{margin-bottom:34px}
.get-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:30px}
form .grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 24px}
.f{display:flex;flex-direction:column;gap:6px}
.f.full{grid-column:1/-1}
.card .f,.panel .f,.modal .f{margin-bottom:18px}
.f.row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:480px){.f.row{grid-template-columns:1fr}}
label{font-size:.82rem;font-weight:600;color:var(--muted);letter-spacing:.02em}
input,select,textarea{width:100%;background:transparent;border:0;border-bottom:1.5px solid var(--line-strong);
  border-radius:0;padding:.55em 0;color:var(--ink);font:inherit;font-size:1.05rem;transition:border-color .15s}
textarea{border:1.5px solid var(--line-strong);border-radius:12px;padding:12px 14px;min-height:84px;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--muted)}
input:focus,select:focus,textarea:focus{outline:none;border-bottom-color:var(--rose)}
textarea:focus{border-color:var(--rose)}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%23D6485F' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 2px center}
form .btn-primary{grid-column:1/-1;justify-self:start;margin-top:8px}
.hint{font-size:.85rem;color:var(--muted)}
.err{display:none;grid-column:1/-1;color:var(--bad);font-size:.92rem}
.done{display:none;text-align:center;max-width:42ch;margin:0 auto}
.done h2{margin-bottom:10px}
.msg{display:none;font-size:.92rem;padding:11px 14px;border-radius:12px;margin-bottom:16px}
.msg.show{display:block}
.msg.err{background:#faecea;color:var(--bad);border:1px solid #eccfcc}
.msg.ok{background:#eef7f1;color:var(--ok);border:1px solid #bfe0cf}
.msg.info{background:#faf2dd;color:#7a5b18;border:1px solid #ecdcb4}
.devcode{font-family:ui-monospace,Menlo,monospace;font-weight:700;letter-spacing:.18em;font-size:1.15rem}

/* ── faq ── */
.faq{max-width:780px;margin:34px auto 0;border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;padding:22px 2px;font-weight:600;font-size:1.06rem;display:flex;justify-content:space-between;gap:18px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--rose);font-family:'Instrument Serif';font-size:1.6rem;transition:transform .2s}
details[open] summary::after{content:"+";transform:rotate(45deg)}
details p{padding:0 2px 24px;font-size:.99rem;max-width:66ch}

/* ── footer ── */
footer{border-top:1px solid var(--line);padding:56px 0 36px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px}
.foot-brand .logo{margin-bottom:10px}
.foot-brand p{font-size:.94rem;color:var(--muted);max-width:30ch}
.foot-col h4{font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-bottom:14px}
.foot-col a{display:block;color:var(--body);text-decoration:none;font-size:.94rem;margin-bottom:10px}
.foot-col a:hover{color:var(--rose)}
.legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;border-top:1px solid var(--line);margin-top:42px;padding-top:24px;font-size:.88rem;color:var(--muted)}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.foot-grid{grid-template-columns:1fr}}

/* ═══ app components ═══ */
.pill{font-size:.78rem;font-weight:600;letter-spacing:.04em;padding:5px 12px;border-radius:999px;border:1px solid var(--line-strong);color:var(--body);white-space:nowrap}
.pill.ok{color:var(--ok);border-color:#bfe0cf;background:#eef7f1}
.pill.warn{color:var(--gold);border-color:#ecdcb4;background:#faf2dd}
.pill.bad{color:var(--bad);border-color:#eccfcc;background:#faecea}

.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:48px 20px}
.card{width:100%;max-width:440px;background:#fff;border:0;border-radius:24px;
  padding:40px 36px;box-shadow:var(--shadow-card)}
.card .brand{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:22px;
  font-family:'Instrument Serif',serif;font-size:1.6rem}
.card h1{font-size:2rem;text-align:center;margin-bottom:6px}
.card .sub{text-align:center;color:var(--body);margin-bottom:26px}
.center{text-align:center}

.roles{display:grid;gap:12px;margin-bottom:8px}
.role-opt{display:flex;gap:14px;align-items:flex-start;border:1.5px solid var(--line);border-radius:16px;
  padding:16px 18px;cursor:pointer;transition:border-color .15s,background .15s}
.role-opt:hover{border-color:var(--line-strong)}
.role-opt.sel{border-color:var(--rose);background:var(--rose-soft)}
.role-opt input{display:none}
.role-opt .rt{font-weight:600;color:var(--ink)}
.role-opt .rd{font-size:.92rem;color:var(--body)}
.role-opt .dot{flex:none;width:18px;height:18px;border-radius:50%;border:2px solid var(--line-strong);margin-top:3px}
.role-opt.sel .dot{border-color:var(--rose);background:var(--rose);box-shadow:inset 0 0 0 3px #fff}

.page{padding:34px 0 80px}
.dash-head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-bottom:26px}
.dash-head h1{font-size:clamp(2rem,4vw,2.8rem)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:820px){.grid2,.grid3{grid-template-columns:1fr}}
.panel{background:#fff;border:0;border-radius:24px;box-shadow:var(--shadow-card);padding:26px 26px}
.panel h2{font-size:1.5rem;margin-bottom:4px}
.panel .ph{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.stat{display:flex;flex-direction:column;gap:2px}
.stat .big{font-size:clamp(2.4rem,6vw,3.4rem);color:var(--rose);line-height:1}
.stat .cap{font-size:.9rem;color:var(--muted)}
.kv{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid var(--line-soft);font-size:.98rem}
.kv:first-of-type{border-top:0}
.kv .k{color:var(--muted)}
.list{list-style:none;display:flex;flex-direction:column}
.item{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:15px 0;border-top:1px solid var(--line-soft)}
.item:first-child{border-top:0}
.item .t{font-weight:600}
.item .s{font-size:.9rem;color:var(--muted)}
.tag{font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:999px}
.tag.up{color:var(--ok);background:#eef7f1}
.tag.pend{color:var(--gold);background:#faf2dd}
.tag.score{color:var(--rose);background:var(--rose-soft)}
.vote{display:flex;gap:8px;align-items:center}
.vbtn{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--line-strong);background:#fff;cursor:pointer;
  font-size:1rem;display:flex;align-items:center;justify-content:center;transition:all .12s}
.vbtn:hover{border-color:var(--ink)}
.vbtn.on-up{border-color:var(--ok);background:#eef7f1;color:var(--ok)}
.vbtn.on-down{border-color:var(--bad);background:#faecea;color:var(--bad)}
.empty{color:var(--muted);font-size:.96rem;padding:18px 0;text-align:center}
.full{grid-column:1/-1}
.spinner{display:inline-block;width:18px;height:18px;border:2px solid var(--line-strong);border-top-color:var(--rose);
  border-radius:50%;animation:spin .7s linear infinite;vertical-align:-3px}
@keyframes spin{to{transform:rotate(360deg)}}
.loading{padding:60px 0;text-align:center;color:var(--muted)}
.step-dots{display:flex;gap:8px;justify-content:center;margin-bottom:22px}
.step-dots span{width:8px;height:8px;border-radius:50%;background:var(--line-strong)}
.step-dots span.on{background:var(--rose)}
.back{margin-top:18px;text-align:center}
.price-line{font-size:1rem;color:var(--body);margin:6px 0 20px}
.price-line b{font-family:'Instrument Serif',serif;font-size:1.6rem;color:var(--ink);font-weight:400}

/* ── dating ── */
.avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;background:var(--paper-2);flex:none}
.avatar.lg{width:96px;height:96px}
.photo-ph{display:flex;align-items:center;justify-content:center;color:var(--gold);border:1.5px dashed var(--line-strong)}
.photo-row{display:flex;align-items:center;gap:18px;margin-bottom:18px}
.deck{max-width:420px;margin:0 auto}
.deck-card{background:#fff;border:0;border-radius:24px;overflow:hidden;box-shadow:0 18px 50px -34px rgba(34,26,42,.5)}
.deck-photo{width:100%;height:380px;object-fit:cover;background:var(--paper-2);display:block}
.deck-photo.ph{display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:4rem}
.deck-body{padding:18px 22px}
.deck-body h3{font-family:'Instrument Serif';font-weight:400;font-size:1.7rem;margin-bottom:2px}
.deck-meta{color:var(--muted);font-size:.95rem;margin-bottom:10px}
.deck-actions{display:flex;gap:20px;justify-content:center;padding:6px 0 22px}
.big-btn{width:64px;height:64px;border-radius:50%;border:2px solid var(--line-strong);background:#fff;cursor:pointer;font-size:1.5rem;display:flex;align-items:center;justify-content:center;transition:transform .12s,border-color .12s,color .12s}
.big-btn:hover{transform:translateY(-2px)}
.big-btn.like{border-color:var(--ok);color:var(--ok)}
.big-btn.pass{border-color:var(--bad);color:var(--bad)}
.big-btn[disabled]{opacity:.5}
.match-row{display:flex;align-items:center;gap:14px;padding:12px 2px;border-top:1px solid var(--line-soft);cursor:pointer;border-radius:10px}
.match-row:first-child{border-top:0}
.match-row:hover{background:var(--paper-2)}
.chat-box{margin-top:18px;border:1px solid var(--line);border-radius:16px;overflow:hidden;display:none}
.chat-box.open{display:block}
.chat-head{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line-soft);background:var(--paper-2)}
.chat-msgs{height:300px;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px;background:var(--paper)}
.bubble{max-width:78%;padding:9px 13px;border-radius:14px;font-size:.96rem;line-height:1.4}
.bubble.them{align-self:flex-start;background:#fff;border:1px solid var(--line)}
.bubble.mine{align-self:flex-end;background:var(--rose);color:#fff}
.chat-form{display:flex;gap:10px;padding:12px;border-top:1px solid var(--line-soft)}
.chat-form input{border:1.5px solid var(--line-strong);border-radius:999px;padding:10px 16px}
.toast{position:fixed;left:50%;top:24px;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:12px 22px;border-radius:999px;z-index:100;font-weight:600;box-shadow:0 12px 34px -12px rgba(0,0,0,.45)}
.modal-ov{position:fixed;inset:0;background:rgba(34,26,42,.45);display:flex;align-items:center;justify-content:center;z-index:200;padding:20px}
.modal{background:#fff;border-radius:18px;padding:26px 28px;max-width:440px;width:100%;max-height:86vh;overflow:auto;box-shadow:0 30px 70px -30px rgba(0,0,0,.5)}
.modal h2{font-size:1.5rem;margin-bottom:10px}
.vform{background:var(--paper-2);border-radius:14px;padding:16px 18px}
.bell{position:relative;background:none;border:0;font-size:1.2rem;cursor:pointer;line-height:1;padding:4px}
.bell-badge{position:absolute;top:-2px;right:-4px;background:var(--rose);color:#fff;font-size:.6rem;font-weight:700;min-width:16px;height:16px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;padding:0 4px}

/* ── split hero with phone ── */
.hero-split{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;max-width:var(--maxw);margin:0 auto;padding:30px 28px 66px}
.hero-split .hero-copy h1{margin-bottom:20px}
.hero-split .lead{margin:0 0 28px;max-width:52ch}
.hero-split .cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-split .forwho{margin:24px 0 0;color:var(--muted);font-size:.95rem;max-width:50ch}
@media(max-width:1150px){.hero-split{grid-template-columns:1fr;gap:44px;text-align:center;padding-bottom:52px}
  .hero-split .lead{margin:0 auto 28px}.hero-split .cta{justify-content:center}.hero-split .forwho{margin:24px auto 0}}

/* phone scene: one true-ratio iPhone + frameless app shots */
.scene{position:relative;width:100%;max-width:780px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:26px;padding-top:26px}
.scene::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:640px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(214,72,95,.13) 0%,rgba(201,154,62,.09) 45%,transparent 70%);pointer-events:none}

.phone{position:relative;width:262px;z-index:3;flex:none;
  background:linear-gradient(150deg,#3B3344,#1B1524 55%,#241D30);border-radius:46px;padding:7px;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.09),0 60px 110px -50px rgba(25,19,35,.6),0 18px 40px -22px rgba(25,19,35,.35)}
.phone::before{content:"";position:absolute;right:-2.5px;top:132px;width:3px;height:52px;border-radius:2px;background:#2A2334}
.phone::after{content:"";position:absolute;left:-2.5px;top:110px;width:3px;height:74px;border-radius:2px;background:#2A2334}
.phone-screen{position:relative;background:var(--paper);border-radius:39px;overflow:hidden;
  aspect-ratio:393/852;display:flex;flex-direction:column}
.island{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:76px;height:20px;border-radius:999px;background:#0B0812;z-index:9;display:flex;align-items:center;justify-content:flex-end;padding-right:6px}
.island::after{content:"";width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#2E3A52,#0B0812 70%)}

.p-status{display:flex;justify-content:space-between;align-items:center;padding:12px 20px 0;font-size:.66rem;font-weight:600;color:var(--ink)}
.p-status .dots{letter-spacing:.12em}
.p-top{display:flex;justify-content:space-between;align-items:baseline;padding:40px 15px 8px;font-family:'Instrument Serif',serif;font-size:1.08rem}
.p-top .p-city{font-family:'Hanken Grotesk';font-size:.64rem;font-weight:700;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}

.p-feedcard{position:relative;margin:0 10px;border-radius:20px;overflow:hidden;flex:1;min-height:0;background:#E9C9BA}
.p-art{position:absolute;inset:0;
  background:radial-gradient(90px 110px at 68% 30%,rgba(214,72,95,.5),transparent 70%),
    radial-gradient(130px 150px at 20% 15%,rgba(201,154,62,.55),transparent 70%),
    radial-gradient(160px 180px at 45% 85%,rgba(120,82,130,.45),transparent 72%),
    linear-gradient(160deg,#F4E3CE,#EFC9B4 55%,#E3AFA8)}
.p-person{position:absolute;left:50%;bottom:-6%;width:112%;transform:translateX(-50%);filter:blur(13px) saturate(1.05);opacity:.85}
.p-scrim{position:absolute;inset:auto 0 0 0;height:55%;background:linear-gradient(180deg,transparent,rgba(30,18,28,.6));z-index:1}
.p-name{position:absolute;left:15px;bottom:34px;font-family:'Instrument Serif',serif;font-size:1.5rem;color:#FDF8EE;z-index:2;text-shadow:0 2px 14px rgba(0,0,0,.35)}
.p-meta{position:absolute;left:15px;bottom:14px;font-size:.7rem;color:rgba(253,248,238,.85);z-index:2}
.p-guna{position:absolute;right:12px;bottom:14px;z-index:2;display:flex;align-items:center;gap:6px;
  background:rgba(250,244,232,.92);border-radius:999px;padding:5px 11px;font-size:.68rem;font-weight:700;color:var(--ink)}
.p-guna b{color:var(--rose)}
.p-badge{position:absolute;top:10px;left:10px;z-index:2;display:flex;align-items:center;gap:5px;background:rgba(250,244,232,.88);
  border-radius:999px;padding:4px 10px;font-size:.62rem;font-weight:700;letter-spacing:.06em;color:var(--ink)}
.p-peek{margin:8px 10px 0;border-radius:14px 14px 0 0;background:#fff;border:1px solid var(--line);border-bottom:0;
  padding:9px 13px;display:flex;justify-content:space-between;align-items:center;font-size:.74rem}
.p-peek b{font-family:'Instrument Serif',serif;font-weight:400;font-size:.95rem}
.p-peek span{color:var(--muted)}
.p-tabs{display:flex;justify-content:space-around;border-top:1px solid var(--line-soft);background:var(--paper);padding:9px 6px 14px}
.p-tabs span{font-size:.58rem;font-weight:600;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:3px}
.p-tabs span.on{color:var(--rose)}

/* frameless app-screen shots beside the phone */
.shot{position:relative;flex:none;width:206px;background:#fff;border:0;border-radius:16px;overflow:hidden;
  box-shadow:0 30px 60px -30px rgba(34,26,42,.35);z-index:2}
.shot-head{padding:12px 14px 4px;font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.shot.left{transform:rotate(-3deg) translateY(30px)}
.shot.right{transform:rotate(3deg) translateY(-30px)}
.shot .p-cer{padding:6px 14px 16px;text-align:center}
.shot .p-cer h4{font-family:'Instrument Serif',serif;font-weight:400;font-size:1.05rem;color:var(--ink);line-height:1.2;margin:6px 0 2px}
.shot .p-cer p{font-size:.7rem;color:var(--body)}
.shot .p-cer .p-kv{display:flex;justify-content:space-between;font-size:.68rem;padding:6px 2px;border-top:1px solid var(--line-soft);margin-top:2px}
.shot .p-cer .p-kv:first-of-type{margin-top:10px}
.shot .p-cer .p-kv .k{color:var(--muted)}
.shot .p-cer .sig{margin-top:8px;font-family:'Instrument Serif',serif;font-style:italic;font-size:.8rem;color:var(--rose)}
.shot .chat{padding:8px 12px 14px;display:flex;flex-direction:column;gap:6px}
.shot .chat .bub{max-width:88%;padding:7px 10px;border-radius:12px;font-size:.72rem;line-height:1.35}
.shot .chat .bub.them{align-self:flex-start;background:var(--paper);border:1px solid var(--line)}
.shot .chat .bub.mine{align-self:flex-end;background:var(--rose);color:#fff}
.shot .chat .when{font-size:.6rem;color:var(--muted);text-align:center;margin-top:2px}

@media(max-width:820px){
  /* one cluster: cards ride the phone, but only over the blurred photo band —
     below the SIMHA badge, above the name row. Nothing readable is ever covered. */
  .scene{display:block;position:relative;height:620px;max-width:340px;padding:0;margin:0 auto}
  .step-pill{position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:6}
  .phone{position:absolute;left:50%;top:38px;transform:translateX(-50%);width:248px;z-index:3}
  .shot{position:absolute;width:172px;z-index:5}
  .shot.left{left:max(calc(50% - 254px),-10px);top:150px;transform:rotate(-2deg) scale(.86)}
  .shot .p-cer .sig{display:none}
  .shot.right{right:max(calc(50% - 254px),-10px);top:172px;transform:rotate(2deg) scale(.86)}
  .step-n{display:none}
}
@media(max-width:600px){.pc-full{display:none}.pc-short{display:inline}.proof-chip{font-size:.72rem}}


/* real iPhone frame slot: drop public/iphone-frame.png (transparent) and add
   class "real" + <img class="frame" src="/iphone-frame.png" alt=""> inside .phone */
.phone.real{background:none;border-radius:0;padding:0;box-shadow:0 60px 110px -50px rgba(25,19,35,.55)}
.phone.real::before,.phone.real::after{display:none}
.phone.real img.frame{display:block;width:100%;position:relative;z-index:3;pointer-events:none}
.phone.real .phone-screen{position:absolute;inset:1.6% 4.2%;border-radius:11%;z-index:1}
.phone.real .island{display:none}

/* positioning strip */
.posit{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper)}
.posit-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0}
.posit-col{padding:34px 30px;border-left:1px solid var(--line)}
.posit-col:first-child{border-left:0}
.posit-col h3{font-family:'Instrument Serif';font-weight:400;font-size:1.25rem;margin-bottom:8px;color:var(--muted)}
.posit-col p{font-size:.95rem;color:var(--muted)}
.posit-col.us h3{color:var(--rose)}
.posit-col.us p{color:var(--body)}
@media(max-width:760px){.posit-grid{grid-template-columns:1fr}.posit-col{border-left:0;border-top:1px solid var(--line);padding:24px 4px}.posit-col:first-child{border-top:0}}

/* the reading band (light) */
.midnight{position:relative;background:var(--paper-2);overflow:hidden}
.midnight::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(circle 1.5px at 8% 30%, var(--gold) 50%, transparent 51%),
    radial-gradient(circle 1px at 22% 75%, var(--line-strong) 50%, transparent 51%),
    radial-gradient(circle 1.8px at 34% 18%, var(--gold) 50%, transparent 51%),
    radial-gradient(circle 1px at 55% 60%, var(--line-strong) 50%, transparent 51%),
    radial-gradient(circle 1.6px at 68% 26%, var(--gold) 50%, transparent 51%),
    radial-gradient(circle 1px at 82% 70%, var(--line-strong) 50%, transparent 51%),
    radial-gradient(circle 2px at 92% 22%, var(--gold) 50%, transparent 51%)}
.midnight .label{color:var(--rose)}
.midnight h2{color:var(--ink)}
.midnight p{color:var(--body)}
.midnight .wrap{position:relative}
.mid-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
@media(max-width:860px){.mid-grid{grid-template-columns:1fr;gap:36px}}

/* astrologer record card (light) */
.record-card{background:#fff;border:0;border-radius:24px;padding:24px;box-shadow:var(--shadow-card)}
.rc-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.rc-avatar{width:52px;height:52px;border-radius:50%;background:var(--rose);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Instrument Serif',serif;font-size:1.3rem;flex:none}
.rc-head b{display:block;color:var(--ink);font-size:1.06rem;font-weight:600}
.rc-id{font-size:.74rem;letter-spacing:.1em;color:var(--gold);font-weight:700}
.rc-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line-soft);font-size:.92rem}
.rc-row .k{color:var(--muted)}
.rc-row .v{color:var(--ink)}
.rc-note{display:block;margin-top:14px;font-size:.8rem;color:var(--muted)}

/* ceremony (dashboard) */
.ceremony{text-align:center;padding:8px 0 4px}
.ceremony .c-seal{margin-bottom:8px}
.ceremony .c-title{font-family:'Instrument Serif',serif;font-size:1.55rem;color:var(--ink);margin-bottom:2px}
.ceremony .c-by{font-size:.95rem;color:var(--body);margin-bottom:14px}
.ceremony .c-by b{color:var(--ink)}

/* share buttons (free check) */
.share-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.btn-wa{background:#25D366;color:#fff;border-color:transparent}
.btn-wa:hover{background:#1EBE5A;color:#fff}
.share-card-preview{width:100%;max-width:420px;border:1px solid var(--line);border-radius:18px;margin-top:20px;box-shadow:var(--shadow-card)}

/* film grain */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:2147483000;opacity:.05;mix-blend-mode:multiply;
  background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="180" height="180"%3E%3Cfilter id="n"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="180" height="180" filter="url(%23n)"/%3E%3C/svg%3E')}

/* scroll reveal */
.rev{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.rev.in{opacity:1;transform:none}

/* trust strip */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper-2)}
.trust .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;padding-top:54px;padding-bottom:54px}
.trust h2{font-size:clamp(1.7rem,3.4vw,2.5rem);margin-bottom:0}
.trust p{font-size:.98rem;max-width:44ch}
@media(max-width:760px){.trust .wrap{grid-template-columns:1fr;gap:16px}}

/* marquee */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;background:var(--paper)}
.marquee-track{display:flex;width:max-content;animation:marq 46s linear infinite}
.marquee span{font-family:'Instrument Serif',serif;font-size:1.3rem;color:var(--gold);white-space:nowrap;padding-right:14px}
.marquee span i{font-style:normal;color:var(--line-strong);padding:0 14px}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}}
@keyframes marq{to{transform:translateX(-50%)}}

/* hero entrance choreography */
@keyframes rise{to{opacity:1;transform:none}}
.hero-copy>*{opacity:0;transform:translateY(22px);animation:rise .85s cubic-bezier(.2,.7,.2,1) forwards}
.hero-copy>*:nth-child(1){animation-delay:.05s}
.hero-copy>*:nth-child(2){animation-delay:.14s}
.hero-copy>*:nth-child(3){animation-delay:.24s}
.hero-copy>*:nth-child(4){animation-delay:.34s}
.hero-copy>*:nth-child(5){animation-delay:.44s}
.scene{opacity:0;transform:translateY(30px);animation:rise 1s .3s cubic-bezier(.2,.7,.2,1) forwards}
.scene .phone,.scene .chip{will-change:translate}
.scene-tilt{transition:transform .25s ease-out}

/* scroll parallax + stagger handled in site.js */
.rev{opacity:0;transform:translateY(18px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1)}
.rev.in{opacity:1;transform:none}

/* real iPhone frame slot: add public/iphone-frame.png (transparent) and
   switch markup to <div class="phone front real"><img class="frame" src="/iphone-frame.png" alt="">…
   The screen content then sits underneath the transparent screen cutout. */
.phone.real{background:none;border-radius:0;padding:0;box-shadow:0 60px 110px -50px rgba(25,19,35,.55)}
.phone.real::before,.phone.real::after{display:none}
.phone.real img.frame{display:block;width:100%;position:relative;z-index:3;pointer-events:none}
.phone.real .phone-screen{position:absolute;inset:1.6% 4.2%;border-radius:11%;z-index:1}
.phone.real .island{display:none}

/* step pill over the phone */
.step-pill{position:absolute;top:-12px;left:50%;transform:translateX(-50%);z-index:5;white-space:nowrap;
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 14px;
  font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  box-shadow:0 10px 26px -14px rgba(34,26,42,.3)}

/* centered one-CTA hero */
.hero-center{position:relative;max-width:880px;margin:0 auto;text-align:center;padding:44px 28px 0}
.proof-chip{display:inline-flex;align-items:center;gap:8px;background:#fff;border-radius:999px;padding:8px 16px;
  font-size:.78rem;font-weight:600;color:var(--body);box-shadow:var(--shadow-card);margin-bottom:24px;max-width:92%}
.proof-chip svg{flex:none}
.proof-chip>span{text-align:center;line-height:1.45;white-space:nowrap}
.pc-short{display:none}
.proof-chip b{color:var(--rose)}
.hero-center h1{margin-bottom:18px}
.hero-center .lead{max-width:44ch;margin:0 auto 26px}
.hero-center .cta{display:flex;justify-content:center;margin-bottom:14px}
.ghost-link{display:inline-block;color:var(--body);text-decoration:none;font-size:.95rem;border-bottom:1px solid var(--line-strong);padding-bottom:1px}
.ghost-link:hover{color:var(--rose);border-color:var(--rose)}
.hero-center .scene{margin-top:38px}