/* ============================================================
   MMai 心域智能 — Design System v1
   Palette: 夜空深藍底 × 光帶漸變(藍→紫→洋紅→橙)
   Type: Noto Serif TC (display) + Noto Sans TC (body)
   Signature: MMai 光珠 (living light orb = hero + chat launcher)
   ============================================================ */

:root{
  --bg:#0B0D18;
  --bg-2:#0F1226;
  --panel:#141833;
  --panel-2:#1A1F42;
  --line:rgba(255,255,255,.09);
  --ink:#F2F1F7;
  --mut:#AFB5D0;
  --dim:#7A80A0;
  --indigo:#3D4FD8;
  --violet:#8A3FE0;
  --magenta:#D63FA8;
  --orange:#FF7A3D;
  --amber:#FFB35C;
  --aurora:linear-gradient(115deg,#2E3FC0 0%,#8A3FE0 34%,#D63FA8 62%,#FF7A3D 88%);
  --aurora-soft:linear-gradient(115deg,rgba(46,63,192,.35),rgba(138,63,224,.35) 34%,rgba(214,63,168,.35) 62%,rgba(255,122,61,.35) 88%);
  --serif:'Noto Serif TC',serif;
  --sans:'Noto Sans TC',-apple-system,sans-serif;
  --max:1120px;
  --r:20px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.9;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
::selection{background:rgba(214,63,168,.4)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ---------- typography ---------- */
h1,h2,h3,.serif{font-family:var(--serif);font-weight:600;letter-spacing:.02em}
h1{font-size:clamp(2.15rem,5.8vw,3.7rem);line-height:1.32}
h2{font-size:clamp(1.6rem,3.6vw,2.35rem);line-height:1.42}
h3{font-size:1.16rem;line-height:1.6}
.grad-text{
  background:var(--aurora);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.eyebrow{
  font-family:var(--sans);font-size:.8rem;letter-spacing:.32em;
  color:var(--amber);text-transform:uppercase;font-weight:500;
  display:block;margin-bottom:1.1rem;
}
.lead{color:var(--mut);font-size:1.1rem;max-width:38em}

/* ---------- layout ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(20px,4vw,44px)}
section{padding:clamp(64px,9vw,120px) 0;position:relative}
.center{text-align:center}
.center .lead{margin-inline:auto}

/* ---------- nav ---------- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:90;
  background:rgba(11,13,24,.72);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-in{max-width:var(--max);margin:0 auto;padding:0 clamp(20px,4vw,44px);
  display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-family:var(--sans);font-weight:800;font-size:1.35rem;letter-spacing:-.02em;
  background:var(--aurora);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo small{font-family:var(--serif);font-weight:600;font-size:.78rem;letter-spacing:.18em;
  color:var(--mut);-webkit-text-fill-color:var(--mut);margin-left:.55em}
.nav-links{display:flex;gap:1.7rem;align-items:center;font-size:.92rem}
.nav-links a{color:var(--mut);transition:color .25s}
.nav-links a:hover,.nav-links a.on{color:var(--ink)}
.nav-cta{
  padding:.5rem 1.15rem;border-radius:99px;color:var(--ink)!important;
  border:1px solid transparent;
  background:linear-gradient(var(--bg),var(--bg)) padding-box,var(--aurora) border-box;
}
.nav-cta:hover{background:var(--aurora);border-color:transparent}
.burger{display:none;background:none;border:0;color:var(--ink);font-size:1.5rem;cursor:pointer}
@media(max-width:840px){
  .nav-links{position:fixed;inset:64px 0 auto 0;background:rgba(11,13,24,.97);
    flex-direction:column;padding:1.6rem;gap:1.2rem;border-bottom:1px solid var(--line);
    transform:translateY(-130%);transition:transform .35s}
  .nav-links.open{transform:none}
  .burger{display:block}
}

/* ---------- MMai orb (signature) ---------- */
.orb{
  position:relative;border-radius:50%;
  background:
    radial-gradient(circle at 32% 30%,rgba(255,179,92,.95),transparent 42%),
    radial-gradient(circle at 70% 28%,rgba(214,63,168,.9),transparent 46%),
    radial-gradient(circle at 62% 74%,rgba(138,63,224,.9),transparent 52%),
    radial-gradient(circle at 30% 70%,rgba(46,63,192,.95),transparent 50%),
    #191d3d;
  box-shadow:0 0 60px rgba(214,63,168,.35),0 0 130px rgba(255,122,61,.18),inset 0 0 46px rgba(255,255,255,.14);
  animation:breathe 6s ease-in-out infinite;
}
.orb::after{content:"";position:absolute;inset:-26%;border-radius:50%;
  background:radial-gradient(circle,rgba(214,63,168,.16),transparent 62%);
  animation:halo 6s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1);filter:hue-rotate(0deg)}50%{transform:scale(1.05);filter:hue-rotate(-14deg)}}
@keyframes halo{0%,100%{opacity:.6}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .orb,.orb::after,.reveal{animation:none!important;transition:none!important}
}

/* ---------- hero ---------- */
.hero{min-height:92vh;display:flex;align-items:center;padding-top:110px;overflow:hidden}
.hero-bg{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(58% 46% at 78% 18%,rgba(138,63,224,.16),transparent 70%),
    radial-gradient(46% 40% at 16% 78%,rgba(46,63,192,.2),transparent 70%),
    radial-gradient(30% 26% at 62% 70%,rgba(255,122,61,.08),transparent 70%)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:3.5rem;align-items:center}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}.hero-orb-col{order:-1}}
.hero-orb-col{display:flex;justify-content:center}
.hero .orb{width:min(300px,54vw);aspect-ratio:1}
.hero h1 em{font-style:normal;background:var(--aurora);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{margin:1.6rem 0 2.4rem}
.slogan{font-family:var(--serif);letter-spacing:.5em;color:var(--amber);font-size:clamp(1rem,2.2vw,1.2rem);margin-bottom:1.5rem}

/* ---------- buttons ---------- */
.btn{display:inline-block;padding:.85rem 2.1rem;border-radius:99px;font-size:.98rem;
  font-weight:500;letter-spacing:.06em;transition:transform .25s,box-shadow .25s;cursor:pointer;border:0}
.btn-primary{background:var(--aurora);color:#fff;box-shadow:0 8px 30px rgba(214,63,168,.35)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(214,63,168,.45)}
.btn-ghost{border:1px solid var(--line);color:var(--mut);background:transparent;margin-left:.9rem}
.btn-ghost:hover{color:var(--ink);border-color:var(--dim)}
.btn-row{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}

/* ---------- cards / panels ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:2rem;transition:transform .3s,border-color .3s}
.card:hover{transform:translateY(-4px);border-color:rgba(214,63,168,.35)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
@media(max-width:900px){.grid-3{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr}}

/* ---------- pillar map (hub) ---------- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;counter-reset:p}
@media(max-width:900px){.pillars{grid-template-columns:1fr}}
.pillar{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:2.1rem;position:relative;overflow:hidden}
.pillar::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--aurora)}
.pillar h3{margin-bottom:.4rem}
.pillar .stage{font-size:.78rem;letter-spacing:.25em;color:var(--dim);display:block;margin-bottom:1rem}
.pillar ul{list-style:none;margin-top:1.1rem}
.pillar li{padding:.5rem 0;border-top:1px dashed var(--line);color:var(--mut);font-size:.94rem}
.pillar li a{display:flex;justify-content:space-between;transition:color .2s}
.pillar li a:hover{color:var(--amber)}
.pillar li span.tag{font-size:.75rem;color:var(--dim)}
.arrow-flow{display:flex;justify-content:center;gap:.6rem;color:var(--dim);
  font-size:.85rem;letter-spacing:.2em;margin-top:1.6rem;flex-wrap:wrap}

/* ---------- stats strip ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;text-align:center}
@media(max-width:720px){.stats{grid-template-columns:1fr}}
.stat b{font-family:var(--serif);font-size:2.6rem;display:block;
  background:var(--aurora);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{color:var(--mut);font-size:.92rem}
.stat cite{display:block;font-style:normal;color:var(--dim);font-size:.78rem;margin-top:.4rem}

/* ---------- calculator ---------- */
.calc{background:var(--panel);border:1px solid var(--line);border-radius:calc(var(--r) + 6px);
  padding:clamp(1.6rem,4vw,2.8rem);position:relative;overflow:hidden}
.calc::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--aurora)}
.calc label{display:flex;justify-content:space-between;font-size:.95rem;color:var(--mut);margin:1.4rem 0 .5rem}
.calc label output{color:var(--amber);font-weight:600}
input[type=range]{width:100%;accent-color:#D63FA8;height:6px;cursor:pointer}
.calc-out{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem;text-align:center}
@media(max-width:720px){.calc-out{grid-template-columns:1fr}}
.calc-out div{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:1.2rem .8rem}
.calc-out b{font-family:var(--serif);font-size:1.9rem;display:block;color:var(--amber)}
.calc-out span{font-size:.84rem;color:var(--mut)}
.calc-note{font-size:.8rem;color:var(--dim);margin-top:1.4rem;line-height:1.7}

/* ---------- citations wall ---------- */
.cite-wall{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
@media(max-width:760px){.cite-wall{grid-template-columns:1fr}}
.cite-card{background:var(--bg-2);border:1px solid var(--line);border-left:3px solid;
  border-image:var(--aurora) 1;border-radius:0 12px 12px 0;padding:1.15rem 1.3rem;font-size:.92rem}
.cite-card b{display:block;color:var(--ink);font-weight:600}
.cite-card span{color:var(--dim);font-size:.82rem}
.cite-card p{color:var(--mut);margin-top:.35rem}

/* ---------- testimonials ---------- */
.testi{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:1.9rem;position:relative}
.testi::before{content:"「";font-family:var(--serif);font-size:2.6rem;line-height:1;
  background:var(--aurora);-webkit-background-clip:text;background-clip:text;color:transparent;display:block;margin-bottom:.4rem}
.testi p{color:var(--mut);font-size:.97rem}
.testi footer{margin-top:1.2rem;display:flex;align-items:center;gap:.9rem}
.testi .avatar{width:44px;height:44px;border-radius:50%;background:var(--aurora-soft);
  border:1px solid var(--line);display:grid;place-items:center;font-weight:600;font-size:.95rem}
.testi b{display:block;font-size:.93rem}
.testi small{color:var(--dim);font-size:.8rem}
.demo-tag{position:absolute;top:1rem;right:1.2rem;font-size:.68rem;letter-spacing:.14em;
  color:var(--dim);border:1px dashed var(--line);border-radius:99px;padding:.15rem .6rem}
.celebrity-slot{border:1px dashed rgba(255,179,92,.4);background:rgba(255,179,92,.04);
  display:grid;place-items:center;text-align:center;min-height:210px;border-radius:var(--r);padding:1.6rem}
.celebrity-slot span{color:var(--amber);font-size:.85rem;letter-spacing:.1em}

/* ---------- video slots ---------- */
.video-slot{aspect-ratio:16/9;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);
  display:grid;place-items:center;position:relative;overflow:hidden;cursor:pointer;transition:border-color .3s}
.video-slot:hover{border-color:rgba(255,122,61,.5)}
.video-slot .play{width:60px;height:60px;border-radius:50%;background:var(--aurora);
  display:grid;place-items:center;color:#fff;font-size:1.2rem;box-shadow:0 8px 26px rgba(214,63,168,.4)}
.video-slot figcaption{position:absolute;bottom:0;left:0;right:0;padding:.8rem 1.1rem;
  background:linear-gradient(transparent,rgba(11,13,24,.9));font-size:.87rem;color:var(--mut)}

/* ---------- curriculum ---------- */
.layers{display:grid;gap:1rem}
.layer{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:1.5rem 1.7rem;display:grid;grid-template-columns:auto 1fr;gap:1.3rem;align-items:start}
.layer .no{font-family:var(--serif);font-size:1.5rem;
  background:var(--aurora);-webkit-background-clip:text;background-clip:text;color:transparent;min-width:2.2rem}
.layer h3{font-size:1.05rem}
.layer p{color:var(--mut);font-size:.93rem;margin-top:.3rem}

/* ---------- pricing ---------- */
.price-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;max-width:860px;margin:0 auto}
@media(max-width:760px){.price-grid{grid-template-columns:1fr}}
.price{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:2.2rem;text-align:center}
.price.featured{border-color:transparent;
  background:linear-gradient(var(--panel),var(--panel)) padding-box,var(--aurora) border-box;border:1px solid transparent}
.price .tier{font-size:.85rem;letter-spacing:.2em;color:var(--dim)}
.price .amount{font-family:var(--serif);font-size:2.4rem;margin:.8rem 0 .1rem}
.price .amount small{font-size:1rem;color:var(--mut)}
.price .tw{color:var(--dim);font-size:.85rem}
.price ul{list-style:none;text-align:left;margin:1.6rem 0;font-size:.92rem;color:var(--mut)}
.price li{padding:.45rem 0;border-top:1px dashed var(--line)}
.price li::before{content:"✦ ";color:var(--amber)}

/* ---------- faq ---------- */
details{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:1.2rem 1.5rem;margin-bottom:.9rem}
summary{cursor:pointer;font-weight:500;list-style:none;display:flex;justify-content:space-between;gap:1rem}
summary::after{content:"+";color:var(--amber);font-size:1.2rem;transition:transform .3s}
details[open] summary::after{transform:rotate(45deg)}
details p{color:var(--mut);margin-top:.9rem;font-size:.95rem}

/* ---------- next-step flywheel ---------- */
.next{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.next-card{display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:1.8rem;transition:transform .3s,border-color .3s}
.next-card:hover{transform:translateY(-4px);border-color:rgba(255,122,61,.45)}
.next-card .eyebrow{margin-bottom:.5rem;font-size:.72rem}
.next-card p{color:var(--mut);font-size:.92rem;margin-top:.4rem}

/* ---------- risk note ---------- */
.risk{border:1px solid rgba(255,179,92,.35);background:rgba(255,179,92,.05);
  border-radius:14px;padding:1.3rem 1.6rem;font-size:.88rem;color:var(--mut)}
.risk b{color:var(--amber)}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--line);padding:3.4rem 0 6.5rem;color:var(--dim);font-size:.88rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr}}
footer.site h4{color:var(--mut);font-size:.85rem;letter-spacing:.18em;margin-bottom:.9rem}
footer.site a{display:block;padding:.24rem 0;color:var(--dim)}
footer.site a:hover{color:var(--ink)}
.foot-slogan{font-family:var(--serif);color:var(--mut);margin:.8rem 0 0;letter-spacing:.28em;font-size:.92rem}

/* ---------- chat widget ---------- */
#mmai-launch{position:fixed;right:22px;bottom:22px;z-index:99;width:64px;height:64px;
  border:0;cursor:pointer;padding:0;background:none}
#mmai-launch .orb{width:64px;height:64px}
#mmai-launch em{position:absolute;right:74px;top:50%;transform:translateY(-50%);
  white-space:nowrap;font-style:normal;font-size:.8rem;color:var(--mut);
  background:var(--panel);border:1px solid var(--line);border-radius:99px;padding:.35rem .9rem}
#mmai-panel{position:fixed;right:22px;bottom:98px;z-index:99;width:min(392px,calc(100vw - 32px));
  height:min(560px,calc(100vh - 130px));background:var(--bg-2);border:1px solid var(--line);
  border-radius:20px;display:none;flex-direction:column;overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.55)}
#mmai-panel.open{display:flex}
.mm-head{display:flex;align-items:center;gap:.8rem;padding:1rem 1.2rem;border-bottom:1px solid var(--line);
  background:rgba(20,24,51,.7)}
.mm-head .orb{width:36px;height:36px}
.mm-head b{font-size:.98rem}
.mm-head small{display:block;color:var(--dim);font-size:.74rem}
.mm-head button{margin-left:auto;background:none;border:0;color:var(--dim);font-size:1.25rem;cursor:pointer}
.mm-body{flex:1;overflow-y:auto;padding:1.1rem;display:flex;flex-direction:column;gap:.75rem}
.msg{max-width:86%;padding:.7rem 1rem;border-radius:16px;font-size:.92rem;line-height:1.7}
.msg.ai{background:var(--panel);border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:4px}
.msg.me{background:linear-gradient(115deg,#3D4FD8,#8A3FE0);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.msg.typing span{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--mut);
  margin-right:4px;animation:blink 1.2s infinite}
.msg.typing span:nth-child(2){animation-delay:.2s}.msg.typing span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
.mm-chips{display:flex;gap:.5rem;flex-wrap:wrap;padding:0 1.1rem .6rem}
.mm-chips button{background:var(--panel);border:1px solid var(--line);color:var(--mut);
  border-radius:99px;padding:.32rem .8rem;font-size:.78rem;cursor:pointer}
.mm-chips button:hover{color:var(--amber);border-color:rgba(255,179,92,.4)}
.mm-input{display:flex;gap:.6rem;padding:.9rem 1.1rem;border-top:1px solid var(--line)}
.mm-input input{flex:1;background:var(--panel);border:1px solid var(--line);border-radius:99px;
  color:var(--ink);padding:.65rem 1.1rem;font-size:.92rem;outline:none;font-family:var(--sans)}
.mm-input input:focus{border-color:rgba(214,63,168,.5)}
.mm-input button{width:44px;height:44px;border-radius:50%;border:0;background:var(--aurora);
  color:#fff;font-size:1.05rem;cursor:pointer}

@media(max-width:560px){
  #mmai-launch em{display:none}
  .btn-ghost{margin-left:0}
}

/* ---------- logo image / celeb testi / spec strip / video modal / toast ---------- */
.logo-a{display:flex;align-items:center;gap:.7rem}
.logo-a img{height:46px;width:auto;mix-blend-mode:screen}
.logo-a span{font-family:var(--serif);font-size:.8rem;letter-spacing:.22em;color:var(--mut)}
.testi.celeb{border-color:rgba(255,179,92,.45);background:linear-gradient(160deg,rgba(255,179,92,.08),var(--panel))}
.testi .badge{position:absolute;top:1rem;right:1.2rem;font-size:.68rem;letter-spacing:.16em;
  color:var(--amber);border:1px solid rgba(255,179,92,.4);border-radius:99px;padding:.15rem .6rem}
.spec-strip{display:flex;flex-wrap:wrap;gap:.5rem 1.8rem;justify-content:center;
  color:var(--mut);font-size:.88rem;margin:0 0 2.8rem}
.spec-strip span::before{content:"✦ ";color:var(--amber)}
.vmodal{position:fixed;inset:0;z-index:120;background:rgba(6,7,14,.92);display:grid;place-items:center;padding:20px}
.vmodal .box{width:min(920px,100%);aspect-ratio:16/9;background:#000;border-radius:14px;
  overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 90px rgba(0,0,0,.6)}
.vmodal iframe{width:100%;height:100%;border:0}
.vmodal .x{position:absolute;top:16px;right:22px;background:none;border:0;color:#fff;font-size:2.1rem;cursor:pointer}
.toast{position:fixed;left:50%;bottom:110px;transform:translateX(-50%);background:var(--panel);
  border:1px solid var(--line);border-radius:99px;padding:.65rem 1.5rem;font-size:.9rem;
  color:var(--ink);z-index:130;opacity:0;pointer-events:none;transition:opacity .35s}
.toast.show{opacity:1}

/* ---------- story / method / transform / deliverables / forwho / timeline / promise ---------- */
.story{max-width:660px;margin:0 auto}
.story p{color:var(--mut);font-size:1.08rem;margin-bottom:1.5rem}
.story p strong{color:var(--ink);font-weight:600}
.story .turn{font-family:var(--serif);color:var(--ink);font-size:1.28rem;line-height:1.8;
  border-left:3px solid;border-image:var(--aurora) 1;padding-left:1.4rem;margin-top:2.4rem}
.method-name{font-family:var(--serif);font-size:clamp(1.35rem,3vw,1.8rem);text-align:center;margin:.6rem 0 2.4rem;
  background:var(--aurora);-webkit-background-clip:text;background-clip:text;color:transparent}
.transform{width:100%;border-collapse:collapse;font-size:.96rem}
.transform th{font-family:var(--serif);font-size:1.02rem;text-align:left;padding:.9rem 1.1rem;color:var(--ink);
  border-bottom:2px solid;border-image:var(--aurora) 1}
.transform td{padding:.95rem 1.1rem;border-bottom:1px solid var(--line);vertical-align:top}
.transform td:first-child{color:var(--dim)}
.transform td:last-child{color:var(--mut)}
.transform td:last-child::before{content:"→ ";color:var(--amber)}
.deliv{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
@media(max-width:860px){.deliv{grid-template-columns:1fr}}
.deliv div{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:1.4rem 1.5rem}
.deliv b{display:block;font-size:.98rem;margin-bottom:.35rem}
.deliv b::before{content:"✦ ";color:var(--amber)}
.deliv span{color:var(--mut);font-size:.88rem}
.forwho{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
@media(max-width:760px){.forwho{grid-template-columns:1fr}}
.forwho .col{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:1.9rem}
.forwho h3{margin-bottom:1rem}
.forwho ul{list-style:none}
.forwho li{padding:.55rem 0;border-top:1px dashed var(--line);color:var(--mut);font-size:.95rem}
.forwho .yes li::before{content:"✓  ";color:var(--amber)}
.forwho .no li::before{content:"✕  ";color:var(--dim)}
.forwho .no{opacity:.85}
.timeline{max-width:720px;margin:0 auto;position:relative;padding-left:1.9rem}
.timeline::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:2px;background:var(--aurora);opacity:.5}
.timeline .tl{position:relative;padding:0 0 1.9rem}
.timeline .tl::before{content:"";position:absolute;left:-1.9rem;top:.45rem;width:14px;height:14px;border-radius:50%;
  background:var(--aurora);box-shadow:0 0 12px rgba(214,63,168,.6)}
.timeline .tl b{font-family:var(--serif);display:block;font-size:1.02rem}
.timeline .tl small{color:var(--amber);font-size:.78rem;letter-spacing:.14em}
.timeline .tl p{color:var(--mut);font-size:.92rem;margin-top:.3rem}
.promise{max-width:760px;margin:0 auto;text-align:center;background:var(--panel);
  border:1px solid transparent;border-radius:calc(var(--r) + 4px);padding:2.6rem 2.2rem;
  background:linear-gradient(var(--panel),var(--panel)) padding-box,var(--aurora) border-box}
.promise h3{font-family:var(--serif);font-size:1.3rem;margin-bottom:1rem}
.promise p{color:var(--mut);font-size:.98rem}

/* ---------- creed ---------- */
.creed{max-width:680px;margin:0 auto;list-style:none;counter-reset:cr}
.creed li{font-family:var(--serif);font-size:clamp(1.05rem,2.4vw,1.3rem);line-height:1.75;
  padding:1.5rem 0 1.5rem 3.2rem;border-bottom:1px solid var(--line);position:relative}
.creed li::before{counter-increment:cr;content:counter(cr,cjk-ideographic);position:absolute;left:0;top:1.5rem;
  font-size:1.1rem;background:var(--aurora);-webkit-background-clip:text;background-clip:text;color:transparent}
.creed li em{font-style:normal;color:var(--mut);font-family:var(--sans);font-size:.92rem;display:block;margin-top:.4rem}

/* ---------- success page ---------- */
.order-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:2rem;max-width:560px;margin:0 auto}
.order-card .row{display:flex;justify-content:space-between;padding:.7rem 0;border-bottom:1px dashed var(--line);font-size:.96rem}
.order-card .row span{color:var(--dim)}
.order-card .row b{font-weight:600}
.refcode{font-family:var(--serif);font-size:1.7rem;letter-spacing:.18em;text-align:center;
  background:var(--bg-2);border:1px dashed rgba(255,179,92,.5);border-radius:14px;padding:1.1rem;margin:1.2rem 0;
  color:var(--amber);cursor:pointer;user-select:all}
.steps{counter-reset:s;max-width:560px;margin:0 auto;display:grid;gap:1rem}
.steps div{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:1.3rem 1.5rem;
  display:flex;gap:1.1rem;align-items:start}
.steps div::before{counter-increment:s;content:counter(s);font-family:var(--serif);font-size:1.3rem;
  background:var(--aurora);-webkit-background-clip:text;background-clip:text;color:transparent;min-width:1.4rem}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- focus visibility ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:2px solid var(--amber);outline-offset:3px;border-radius:4px}