
:root{
  --bg:#FAF8F2;
  --surface:#FFFDF9;
  --surface-2:#F3EFE5;
  --text:#171714;
  --muted:#706D65;
  --border:#E8E2D6;
  --gold:#C99736;
  --gold-2:#E8D3A3;
  --gold-dark:#9B7024;
  --dark:#121210;
  --dark-2:#1A1916;
  --shadow:0 22px 60px rgba(23,23,20,.08);
  --radius:22px;
  --container:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(circle at 18% 6%, rgba(201,151,54,.09), transparent 26rem),
    var(--bg);
  font-family:Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
img{max-width:100%;display:block}
.container{width:min(calc(100% - 36px),var(--container));margin:auto}
.nav{
  min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:18px
}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.08em;font-size:.86rem}
.brand img{width:34px;height:34px;object-fit:contain}
.navlinks{display:flex;align-items:center;gap:24px;color:var(--muted);font-size:.92rem}
.nav-actions{display:flex;align-items:center;gap:10px}
.icon-btn,.lang{
  border:1px solid var(--border);background:rgba(255,253,249,.72);height:40px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;color:var(--text);cursor:pointer
}
.icon-btn{width:40px}
.lang{padding:0 13px;font-size:.82rem;font-weight:800;letter-spacing:.04em}
.btn{
  border:0;border-radius:999px;min-height:48px;padding:0 22px;font-weight:800;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;transition:.2s ease
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--text);color:white;box-shadow:0 10px 30px rgba(23,23,20,.12)}
.btn-gold{background:var(--gold);color:#171714}
.btn-soft{background:var(--surface);border:1px solid var(--border);color:var(--text)}
.hero{padding:72px 0 90px;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;align-items:center;gap:70px}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;font-size:.77rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:900;color:var(--gold-dark);margin-bottom:18px
}
.eyebrow:before{content:"";width:24px;height:1px;background:var(--gold)}
h1{
  font-family:Manrope,Inter,sans-serif;font-size:clamp(3.2rem,6.6vw,6.4rem);line-height:.91;
  letter-spacing:-.06em;margin:0 0 27px;max-width:820px
}
.hero p{font-size:1.12rem;line-height:1.65;color:var(--muted);max-width:640px;margin:0 0 28px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.micro{font-size:.82rem;color:var(--muted);margin-top:15px}
.phone-wrap{position:relative;min-height:610px;display:grid;place-items:center}
.orbit{
  position:absolute;width:560px;height:560px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,151,54,.16),rgba(201,151,54,.03) 55%,transparent 66%)
}
.phone{
  width:min(350px,88vw);border-radius:44px;background:#0e0e0d;padding:11px;box-shadow:0 38px 90px rgba(23,23,20,.22);
  position:relative;z-index:2;transform:rotate(2deg)
}
.screen{background:var(--surface);border-radius:35px;min-height:600px;padding:30px 24px;color:var(--text);overflow:hidden}
.notch{width:92px;height:23px;border-radius:0 0 17px 17px;background:#0e0e0d;margin:-30px auto 24px}
.appbar{display:flex;align-items:center;justify-content:space-between;font-size:.78rem;font-weight:800;color:var(--muted)}
.appbar img{width:29px}
.screen h3{font-family:Manrope,sans-serif;font-size:1.7rem;letter-spacing:-.04em;margin:36px 0 8px}
.screen p{font-size:.88rem;margin:0;color:var(--muted)}
.winbox{background:white;border:1px solid var(--border);border-radius:18px;margin-top:24px;padding:18px}
.winbox textarea{width:100%;border:0;resize:none;outline:none;background:transparent;min-height:70px;color:var(--text)}
.lion-action{
  margin-top:18px;background:var(--dark);border-radius:18px;padding:17px;color:white;display:flex;align-items:center;gap:12px;
  box-shadow:0 14px 28px rgba(23,23,20,.12)
}
.lion-action img{width:37px;height:37px}
.lion-action span{font-weight:850}
.lion-action small{display:block;color:#bdb9ae;margin-top:3px}
.section{padding:105px 0}
.section-head{max-width:760px;margin-bottom:48px}
.kicker{font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;font-weight:900;color:var(--gold-dark);margin-bottom:14px}
h2{font-family:Manrope,sans-serif;font-size:clamp(2.25rem,4.4vw,4.4rem);letter-spacing:-.055em;line-height:1.02;margin:0 0 18px}
.section-head p{color:var(--muted);font-size:1.06rem;line-height:1.7;margin:0}
.dark{
  background:var(--dark);color:#F8F5ED;position:relative;overflow:hidden
}
.dark:before{
  content:"";position:absolute;inset:auto -160px -250px auto;width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,151,54,.2),transparent 63%)
}
.dark .kicker{color:var(--gold-2)}
.dark .section-head p{color:#BEBAB0}
.lion-demo{display:grid;grid-template-columns:.8fr 1.2fr;gap:44px;align-items:center}
.lion-core{display:grid;place-items:center;min-height:420px}
.lion-core img{width:230px;filter:drop-shadow(0 18px 45px rgba(201,151,54,.18));animation:pulseLion 3.6s ease-in-out infinite}
@keyframes pulseLion{0%,100%{transform:scale(1);opacity:.92}50%{transform:scale(1.035);opacity:1}}
.message-card{
  background:linear-gradient(180deg,#1E1D19,#171612);border:1px solid #2b2923;border-radius:28px;padding:32px;
  box-shadow:0 25px 70px rgba(0,0,0,.2)
}
.message-card .label{font-size:.78rem;color:#A9A59B;text-transform:uppercase;letter-spacing:.1em}
.message-card blockquote{font-family:Manrope,sans-serif;font-size:clamp(1.25rem,2.7vw,2rem);line-height:1.45;margin:18px 0;color:#F8F5ED}
.message-card footer{color:#A9A59B;line-height:1.6;font-size:.9rem}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:28px;min-height:260px
}
.card .num{font-size:.75rem;letter-spacing:.1em;color:var(--gold-dark);font-weight:900}
.card h3{font-family:Manrope,sans-serif;font-size:1.55rem;letter-spacing:-.04em;margin:50px 0 10px}
.card p{margin:0;color:var(--muted);line-height:1.6}
.timeline-shell{
  background:var(--surface);border:1px solid var(--border);border-radius:30px;padding:22px;box-shadow:var(--shadow)
}
.timeline-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}
.segment{display:flex;padding:4px;background:var(--surface-2);border-radius:999px}
.segment button{border:0;background:transparent;border-radius:999px;padding:8px 14px;color:var(--muted);font-weight:800;cursor:pointer}
.segment button.active{background:var(--surface);color:var(--text);box-shadow:0 3px 10px rgba(23,23,20,.06)}
.timeline{display:grid;grid-template-columns:120px 1fr;gap:22px}
.date-col{color:var(--muted);font-size:.82rem;font-weight:800}
.events{border-left:1px solid var(--border);padding-left:26px}
.event{position:relative;padding:0 0 28px}
.event:before{content:"";position:absolute;left:-32px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 5px var(--surface)}
.event strong{display:block;margin-bottom:5px}
.event span{color:var(--muted);font-size:.9rem}
.quote-band{
  margin-top:42px;background:linear-gradient(120deg,rgba(201,151,54,.16),rgba(232,211,163,.22));border:1px solid rgba(201,151,54,.28);
  border-radius:28px;padding:34px
}
.quote-band strong{font-family:Manrope,sans-serif;font-size:1.65rem;letter-spacing:-.035em;display:block;margin-bottom:8px}
.quote-band span{color:var(--muted)}
.pricing{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:880px}
.price-card{background:var(--surface);border:1px solid var(--border);border-radius:28px;padding:30px;position:relative}
.price-card.featured{border-color:rgba(201,151,54,.55);box-shadow:0 20px 50px rgba(201,151,54,.11)}
.badge{display:inline-block;background:var(--gold-2);color:#5f4315;font-size:.72rem;font-weight:900;padding:7px 10px;border-radius:999px;text-transform:uppercase;letter-spacing:.08em}
.price{font-family:Manrope,sans-serif;font-size:3.2rem;letter-spacing:-.05em;margin:20px 0 2px}
.price small{font-family:Inter,sans-serif;font-size:.9rem;color:var(--muted);letter-spacing:0}
.price-card ul{list-style:none;padding:0;margin:24px 0}
.price-card li{padding:8px 0;color:var(--muted)}
.price-card li:before{content:"✓";color:var(--gold-dark);font-weight:900;margin-right:9px}
.faq{max-width:840px}
details{border-bottom:1px solid var(--border);padding:19px 0}
summary{cursor:pointer;font-weight:850;list-style:none}
summary::-webkit-details-marker{display:none}
details p{color:var(--muted);line-height:1.65}
.cta{
  background:var(--dark);color:white;border-radius:36px;padding:56px;display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center
}
.cta h2{font-size:clamp(2.2rem,4vw,4rem);margin-bottom:12px}
.cta p{color:#BDB9AF;margin:0;max-width:650px;line-height:1.6}
footer.site-footer{padding:42px 0;color:var(--muted);font-size:.85rem}
.foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot-links{display:flex;gap:18px;flex-wrap:wrap}
.intro{
  position:fixed;inset:0;background:rgba(250,248,242,.97);z-index:999;display:grid;place-items:center;pointer-events:none;
  animation:introOut .82s .45s cubic-bezier(.2,.8,.2,1) forwards
}
.intro img{width:126px;animation:introLion .65s cubic-bezier(.2,.8,.2,1)}
@keyframes introLion{from{opacity:0;transform:scale(.78)}to{opacity:1;transform:scale(1)}}
@keyframes introOut{to{opacity:0;visibility:hidden}}
.dark-mode{
  --bg:#121210;--surface:#1A1916;--surface-2:#24221D;--text:#F7F4EC;--muted:#B4B0A6;--border:#302E28;--dark:#0A0A09;--dark-2:#11110F
}
.dark-mode body{background:var(--bg)}
.dark-mode .btn-primary{background:#F7F4EC;color:#171714}
.dark-mode .screen{background:#F7F4EC;color:#171714}
.dark-mode .screen p,.dark-mode .appbar{color:#706D65}
.dark-mode .winbox{background:#FFFDF9}
.dark-mode .intro{background:rgba(18,18,16,.98)}
@media(max-width:900px){
  .navlinks{display:none}
  .hero{padding-top:40px}
  .hero-grid,.lion-demo{grid-template-columns:1fr}
  .hero-grid{gap:25px}
  .phone-wrap{min-height:570px}
  .cards{grid-template-columns:1fr}
  .pricing{grid-template-columns:1fr}
  .cta{grid-template-columns:1fr;padding:34px}
}
@media(max-width:620px){
  .container{width:min(calc(100% - 24px),var(--container))}
  .brand{font-size:.74rem}
  .brand img{width:30px;height:30px}
  .desktop-only{display:none}
  h1{font-size:clamp(3rem,15vw,5rem)}
  .hero p{font-size:1rem}
  .phone-wrap{min-height:530px}
  .phone{width:310px}
  .screen{min-height:550px}
  .section{padding:78px 0}
  .timeline{grid-template-columns:74px 1fr;gap:12px}
  .events{padding-left:22px}
  .event:before{left:-28px}
  .lion-core{min-height:260px}
  .lion-core img{width:170px}
  .cta{border-radius:26px}
}


/* --- v0.2 onboarding + expanded product --- */
.start-link{cursor:pointer}
.onboarding{
  position:fixed;inset:0;z-index:1100;background:rgba(18,18,16,.64);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  display:none;align-items:center;justify-content:center;padding:18px
}
.onboarding.open{display:flex}
.onboard-shell{
  width:min(720px,100%);max-height:min(850px,94vh);overflow:auto;
  background:var(--surface);border:1px solid var(--border);border-radius:32px;
  box-shadow:0 40px 100px rgba(0,0,0,.28);position:relative
}
.onboard-top{
  position:sticky;top:0;z-index:3;background:color-mix(in srgb,var(--surface) 92%,transparent);
  backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:space-between;
  padding:19px 22px;border-bottom:1px solid var(--border)
}
.onboard-brand{display:flex;align-items:center;gap:10px;font-size:.77rem;font-weight:900;letter-spacing:.08em}
.onboard-brand img{width:30px;height:30px;object-fit:contain}
.close-onboarding{width:38px;height:38px;border:1px solid var(--border);background:transparent;border-radius:50%;cursor:pointer;color:var(--text)}
.progressbar{height:3px;background:var(--surface-2)}
.progressbar span{display:block;height:100%;width:14.2%;background:var(--gold);transition:.3s ease}
.onboard-body{padding:38px 38px 32px}
.step{display:none;animation:stepIn .28s ease}
.step.active{display:block}
@keyframes stepIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.step .mini{font-size:.72rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-dark);margin-bottom:12px}
.step h2{font-size:clamp(2rem,6vw,3.3rem);margin-bottom:12px}
.step>p{color:var(--muted);line-height:1.65;margin:0 0 25px}
.choice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.choice{
  border:1px solid var(--border);background:var(--surface);border-radius:18px;padding:18px;cursor:pointer;
  text-align:left;color:var(--text);transition:.18s ease;min-height:92px
}
.choice:hover,.choice.selected{border-color:rgba(201,151,54,.7);background:rgba(201,151,54,.08);transform:translateY(-1px)}
.choice strong{display:block;margin-bottom:5px}
.choice small{color:var(--muted);line-height:1.45}
.mood-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.mood{
  border:1px solid var(--border);background:var(--surface);border-radius:17px;min-height:92px;cursor:pointer;
  font-size:1.8rem;color:var(--text)
}
.mood span{display:block;font-size:.68rem;margin-top:7px;color:var(--muted);font-weight:800}
.mood.selected{border-color:var(--gold);background:rgba(201,151,54,.09)}
.check-list{display:grid;gap:10px}
.check-row{
  display:flex;align-items:flex-start;gap:14px;border:1px solid var(--border);border-radius:17px;padding:16px;cursor:pointer
}
.check-row input{accent-color:var(--gold);width:19px;height:19px;margin-top:2px}
.check-row strong{display:block}
.check-row small{display:block;color:var(--muted);line-height:1.45;margin-top:4px}
.onboard-actions{display:flex;justify-content:space-between;gap:12px;margin-top:30px}
.onboard-note{font-size:.78rem;color:var(--muted);margin-top:18px;text-align:center}
.plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.plan-mini{
  border:1px solid var(--border);border-radius:21px;padding:22px;background:var(--surface);cursor:pointer
}
.plan-mini.selected,.plan-mini.featured{border-color:rgba(201,151,54,.72);box-shadow:0 12px 35px rgba(201,151,54,.1)}
.plan-mini ul{list-style:none;padding:0;margin:18px 0;color:var(--muted);font-size:.9rem}
.plan-mini li{padding:5px 0}
.plan-mini li:before{content:"✓";margin-right:8px;color:var(--gold-dark);font-weight:900}
.founder-tag{font-size:.68rem;font-weight:900;letter-spacing:.07em;text-transform:uppercase;background:var(--gold-2);color:#5f4315;border-radius:999px;padding:6px 9px;display:inline-block}
.product-depth{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.depth-card{
  background:var(--surface);border:1px solid var(--border);border-radius:22px;padding:24px
}
.depth-card .glyph{font-size:1.6rem;margin-bottom:24px}
.depth-card h3{font-family:Manrope,sans-serif;font-size:1.35rem;letter-spacing:-.03em;margin:0 0 8px}
.depth-card p{color:var(--muted);line-height:1.55;margin:0}
.today-strip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:34px
}
.today-pill{border:1px solid var(--border);border-radius:18px;padding:16px;background:var(--surface)}
.today-pill strong{font-size:.78rem;display:block;margin-bottom:7px}
.today-pill span{font-size:.82rem;color:var(--muted)}
@media(max-width:620px){
  .onboard-body{padding:28px 18px 24px}
  .choice-grid,.plan-grid,.product-depth{grid-template-columns:1fr}
  .mood-grid{gap:6px}
  .mood{min-height:76px;font-size:1.55rem}
  .today-strip{grid-template-columns:1fr 1fr}
}

/* beta additions */
.beta-chip{display:inline-flex;align-items:center;gap:.45rem;border:1px solid var(--border);border-radius:999px;padding:.45rem .72rem;font-size:.72rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;background:var(--surface)}
.nav .brand img{filter:none}
