:root{
  --brand:#0d7c71; --brand-2:#13a191; --brand-ink:#08544c; --brand-soft:#e4f5f1; --brand-line:#c9ebe4;
  --ink:#10201f; --text:#2a3837; --muted:#617170; --dim:#93a09f; --line:#e6ecea; --bg:#ffffff; --bg-2:#f5f9f8;
  --gold:#c08a2e; --red:#e5484d;
  --side:#0d1a1b;
  --sans:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  --w:1200px; --gutter:max(20px,calc((100vw - var(--w))/2));
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:#f6f7f7;color:var(--text);font:400 16px/1.7 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{padding:0 var(--gutter)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 24px;border-radius:10px;font-weight:600;font-size:15px;transition:transform .2s var(--ease),box-shadow .2s,background .2s;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 8px 22px rgba(13,124,113,.25)}
.btn-primary:hover{background:var(--brand-2)}
.btn-line{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn-line:hover{border-color:var(--brand-line)}
.btn-sm{height:36px;padding:0 16px;font-size:14px;border-radius:8px}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .2s}
.site-header.scrolled{border-color:var(--line)}
.nav{height:64px;display:flex;align-items:center;gap:40px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;color:var(--ink)}
.logo img{width:30px;height:30px;border-radius:8px}
.nav-links{display:flex;gap:30px;font-size:15px;color:var(--muted)}
.nav-links a{position:relative;padding:20px 0}
.nav-links a:hover{color:var(--ink)}
.nav-links a.on{color:var(--brand)}
.nav-links a.on::after{content:"";position:absolute;left:0;right:0;bottom:12px;height:2px;border-radius:2px;background:var(--brand)}
.nav-cta{margin-left:auto;display:flex;gap:10px}

/* hero */
.home-hero{position:relative;overflow:hidden;text-align:center;padding-top:76px;padding-bottom:80px}
.home-hero h1{position:relative;padding:0 16px;font-size:clamp(32px,5vw,56px);line-height:1.2;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.home-hero h1 b{color:var(--brand)}
.home-hero .sub{position:relative;margin:18px auto 0;max-width:46em;padding:0 20px;font-size:18px;color:var(--muted)}
.home-hero .cta{position:relative;display:flex;justify-content:center;gap:12px;margin-top:30px}
.home-hero .meta{position:relative;margin-top:14px;font-size:13px;color:var(--dim)}
.chip{position:absolute;display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:12px;background:#fff;box-shadow:0 10px 30px rgba(16,32,31,.10);font-size:14px;font-weight:600;color:var(--ink);animation:float 6s ease-in-out infinite}
.chip i{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;color:#fff;font-style:normal;font-size:12px;font-weight:800}
.chip.c1{left:7%;top:120px}.chip.c1 i{background:#ff6a00}
.chip.c2{left:12%;top:300px;animation-delay:-2s}.chip.c2 i{background:#e1251b}
.chip.c3{right:8%;top:110px;animation-delay:-1s}.chip.c3 i{background:#ff4400}
.chip.c4{right:12%;top:290px;animation-delay:-3s}.chip.c4 i{background:#e02e24}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* app mock */
.stage{position:relative;max-width:1080px;margin:52px auto 0;padding:0 20px}
.app{position:relative;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 40px 90px rgba(16,32,31,.18),0 0 0 1px rgba(16,32,31,.06);text-align:left;transform-origin:50% 100%;transition:transform .1s linear}
.app-top{height:44px;background:var(--side);display:flex;align-items:center;gap:14px;padding:0 14px;color:#cfdedc;font-size:12px}
.app-top img{width:22px;height:22px;border-radius:5px}
.app-top b{color:#fff;font-size:13px}
.app-top .pill{margin-left:auto;border:1px solid rgba(255,255,255,.14);border-radius:6px;padding:3px 10px}
.app-body{display:grid;grid-template-columns:64px 190px 1fr 230px;height:430px}
.app-side{background:var(--side);display:grid;align-content:start;gap:6px;padding:10px 8px;color:#8fa3a1;font-size:11px;text-align:center}
.app-side div{padding:8px 0;border-radius:8px}
.app-side .on{background:rgba(88,213,203,.12);color:#7fe0d6}
.app-list{border-right:1px solid var(--line);padding:12px;display:grid;align-content:start;gap:8px;background:#fbfcfc}
.app-list h5{font-size:12px;color:var(--dim);font-weight:500}
.conv{display:flex;gap:10px;align-items:center;padding:9px;border-radius:10px;font-size:12.5px}
.conv.on{background:var(--brand-soft)}
.conv .av{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;font-weight:700;font-size:12px}
.conv b{display:block;color:var(--ink);font-weight:600}
.conv span{color:var(--muted);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px}
.conv em{margin-left:auto;font-style:normal;font-size:10.5px;color:var(--brand);background:var(--brand-soft);border-radius:4px;padding:1px 5px;white-space:nowrap}
.conv.on em{background:#fff}
.app-chat{display:flex;flex-direction:column;padding:14px 18px;gap:10px;background:#fff;overflow:hidden}
.chat-title{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink);font-weight:600;padding-bottom:10px;border-bottom:1px solid var(--line)}
.chat-title small{font-weight:400;color:var(--dim)}
.chat-title .ai{margin-left:auto;font-size:11px;color:var(--brand);font-weight:600;display:flex;align-items:center;gap:6px}
.chat-title .ai::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand-2);box-shadow:0 0 0 4px rgba(19,161,145,.15);animation:pulse 1.6s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 7px rgba(19,161,145,0)}}
.msgs{display:flex;flex-direction:column;gap:10px;flex:1;justify-content:flex-end}
.msg{max-width:78%;padding:9px 13px;border-radius:12px;font-size:13.5px;line-height:1.6;opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.msg.show{opacity:1;transform:none}
.msg.buyer{background:#f1f4f3;border-top-left-radius:4px}
.msg.ai{align-self:flex-end;background:var(--brand);color:#fff;border-top-right-radius:4px}
.msg.ai small{display:block;opacity:.75;font-size:11px;margin-top:3px}
.typing{align-self:flex-end;display:none;gap:4px;padding:10px 14px;border-radius:12px;background:var(--brand-soft)}
.typing.show{display:flex}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--brand);animation:dot 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{50%{opacity:.25;transform:translateY(-2px)}}
.app-info{border-left:1px solid var(--line);padding:14px;font-size:12px;background:#fbfcfc;display:grid;align-content:start;gap:10px}
.app-info h5{font-size:12px;color:var(--ink)}
.kv{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px;color:var(--muted);line-height:1.6;transition:border-color .3s,box-shadow .3s}
.kv b{display:block;color:var(--ink);font-weight:600;margin-bottom:2px}
.kv.hit{border-color:var(--brand-line);box-shadow:0 0 0 3px var(--brand-soft)}
.floatcard{position:absolute;background:#fff;border-radius:12px;box-shadow:0 18px 40px rgba(16,32,31,.16);padding:12px 14px;font-size:13px;text-align:left;animation:float 7s ease-in-out infinite}
.floatcard.f1{left:-56px;bottom:28px;width:210px}
.floatcard.f2{right:-56px;top:-26px;width:210px;animation-delay:-3s}
.floatcard small{color:var(--dim);font-size:11.5px;display:block}
.floatcard b{color:var(--ink);font-size:14px}
.floatcard .bar{height:6px;border-radius:6px;background:var(--brand-soft);margin-top:8px;overflow:hidden}
.floatcard .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brand),var(--brand-2));border-radius:6px;animation:fill 4s var(--ease) infinite}
@keyframes fill{0%{width:8%}70%,100%{width:100%}}

/* bottom selling-point bar (cta-bar.js) */
.cta-bar{position:fixed;left:50%;bottom:18px;z-index:60;width:min(920px,calc(100% - 24px));transform:translate(-50%,150%);opacity:0;pointer-events:none;transition:transform .45s var(--ease),opacity .3s}
.cta-bar.show{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.cta-inner{display:flex;align-items:center;gap:14px;padding:9px 10px 9px 14px;border-radius:14px;background:rgba(13,26,27,.92);backdrop-filter:blur(12px);color:#eafff9;box-shadow:0 18px 44px rgba(16,32,31,.28)}
.cta-inner img{flex:none;width:26px;height:26px;border-radius:7px}
.cta-points{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:14.5px}
.cta-points b{display:inline-block;font-weight:600;transition:opacity .35s,transform .35s}
.cta-points b.out{opacity:0;transform:translateY(6px)}
.cta-contact{flex:none;color:#bfe8e1;font-size:14px;white-space:nowrap}
.cta-contact:hover{color:#fff}
.cta-close{flex:none;border:0;background:none;color:#8fb3ad;font-size:20px;line-height:1;padding:4px 6px;cursor:pointer}
.cta-close:hover{color:#fff}

/* sections */
.site-main>section{padding:96px 0}
.sec-head{text-align:center;margin-bottom:46px}
.sec-head h2{font-size:clamp(28px,3.4vw,40px);font-weight:800;color:var(--ink);line-height:1.3}
.sec-head p{margin-top:12px;color:var(--muted);font-size:16px}
.bg-soft{background:rgba(255,255,255,.55)}
.fine{margin-top:16px;text-align:center;font-size:13px;color:var(--dim)}

/* pains */
.pains{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.pain{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 22px;transition:transform .25s var(--ease),box-shadow .25s}
.pain:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(16,32,31,.08)}
.pain .ic{width:44px;height:44px;border-radius:12px;background:#fdf1e3;color:var(--gold);display:grid;place-items:center;margin-bottom:16px}
.pain h3{font-size:18px;color:var(--ink);margin-bottom:8px}
.pain p{font-size:14.5px;color:var(--muted)}

/* features tabs */
.tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-bottom:34px}
.tab{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);color:var(--muted);font:600 15px/1 var(--sans);padding:12px 22px;border-radius:999px;cursor:pointer;transition:color .2s,background .2s,border-color .2s}
.tab:hover{color:var(--ink)}
.tab.on{background:var(--brand);border-color:var(--brand);color:#fff}
.tab .prog{position:absolute;left:0;bottom:0;height:3px;width:0;background:rgba(255,255,255,.55)}
.tab.on .prog{animation:prog var(--dur,7s) linear forwards}
@keyframes prog{to{width:100%}}
.panel{display:none;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:56px;align-items:center}
.panel>*,.row .v{min-width:0}
.panel.on{display:grid;animation:panelIn .5s var(--ease)}
@keyframes panelIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.shot{border-radius:18px;background:linear-gradient(160deg,#eef8f5,#f7faf9);padding:26px;border:1px solid var(--line)}
.win{background:#fff;border-radius:12px;box-shadow:0 20px 50px rgba(16,32,31,.10);overflow:hidden}
.win-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)}
.win-bar i{width:9px;height:9px;border-radius:50%;background:#e6ecea}
.win-bar b{margin-left:8px;color:var(--ink);font-weight:600}
.win-body{padding:16px;min-height:300px;font-size:13px}
.copy .kicker{font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--brand)}
.copy h3{margin-top:6px;font-size:30px;color:var(--ink);font-weight:800;line-height:1.3}
.copy .lead{margin-top:10px;color:var(--muted);font-size:16px}
.points{margin-top:24px;display:grid;gap:16px}
.points li{list-style:none;display:grid;grid-template-columns:22px 1fr;gap:12px}
.points li::before{content:"";width:22px;height:22px;margin-top:2px;border-radius:50%;background:var(--brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%230d7c71' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.points b{display:block;color:var(--ink);font-size:16px}
.points span{display:block;color:var(--muted);font-size:14.5px;margin-top:1px}
.copy .note{margin-top:18px;font-size:13px;color:var(--dim)}
/* panel mocks */
.row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px dashed var(--line)}
.row:last-child{border-bottom:0}
.row .k{width:92px;color:var(--muted);flex:none}
.row .v{flex:1;color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .st{font-size:11.5px;color:var(--dim);flex:none}
.row.done .st{color:var(--brand)}
.row .v .ph{display:inline-block;height:10px;width:60%;border-radius:6px;background:#eef2f1}
.fill .row .v span{display:none}
.fill .row.done .v span{display:inline}
.fill .row.done .v .ph{display:none}
.submitbar{margin-top:14px;display:flex;justify-content:space-between;align-items:center;padding:12px;border-radius:10px;background:#fbf4e7;color:#7a5413;font-weight:600;opacity:.35;transition:opacity .4s}
.submitbar.ready{opacity:1}
.submitbar em{font-style:normal;background:var(--brand);color:#fff;border-radius:8px;padding:6px 14px;font-size:12.5px}
.stores{display:grid;gap:10px}
.store{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.store .lg{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:13px;flex:none}
.store b{display:block;color:var(--ink)}
.store small{color:var(--muted)}
.store .badge{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--brand);background:var(--brand-soft);border-radius:999px;padding:3px 10px;white-space:nowrap}
.store .badge.wait{color:#9a5b0b;background:#fbefdc}
.store .num{min-width:22px;height:22px;border-radius:11px;background:var(--red);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;padding:0 6px}
.kb{display:grid;gap:10px}
.doc{display:flex;align-items:center;gap:10px;border:1px dashed var(--brand-line);background:#f7fcfb;border-radius:10px;padding:10px 12px;color:var(--brand-ink);font-weight:600}
.qa{border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.qa b{display:block;color:var(--ink)}
.qa span{color:var(--muted)}
.qa.tip{background:#fbf4e7;border-color:#f1dfbf}
.qa.tip b{color:#7a5413}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.gallery img{border-radius:10px;aspect-ratio:1/1;object-fit:cover;background:#f1f4f3}
.gallery .big{grid-column:span 2;grid-row:span 2}
.video{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:16/10;background:#000}
.video img{width:100%;height:100%;object-fit:cover;opacity:.85;animation:kenburns 9s ease-in-out infinite alternate}
@keyframes kenburns{to{transform:scale(1.12) translate(-3%,2%)}}
.video .play{position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;color:var(--brand);font-size:22px}
.video .cap{position:absolute;left:14px;bottom:12px;color:#fff;font-weight:700;text-shadow:0 2px 8px rgba(0,0,0,.4)}
.video .tl{position:absolute;left:14px;right:14px;bottom:42px;height:4px;border-radius:4px;background:rgba(255,255,255,.3)}
.video .tl i{display:block;height:100%;width:0;background:#fff;border-radius:4px;animation:fill 6s linear infinite}

/* platforms */
.plats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:1080px;margin:0 auto}
.plat{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;transition:transform .25s var(--ease),box-shadow .25s}
.plat:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(16,32,31,.07)}
.plat .lg{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:16px;flex:none}
.plat b{display:block;color:var(--ink);font-size:16px;line-height:1.4}
.plat .caps{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.cap{font-size:12px;line-height:1;padding:5px 8px;border-radius:6px;background:var(--brand-soft);color:var(--brand-ink);font-weight:600}
.cap.soon{background:#f1f4f3;color:var(--dim);font-weight:500}
.plat.soon .lg{filter:saturate(.35);opacity:.75}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:s}
.step{position:relative;border-radius:18px;padding:28px 26px;background:#fff;border:1px solid var(--line)}
.step::before{counter-increment:s;content:"0" counter(s);font:800 40px/1 var(--sans);color:var(--brand-soft);-webkit-text-stroke:1px var(--brand-line)}
.step h3{margin-top:14px;font-size:19px;color:var(--ink)}
.step p{margin-top:6px;color:var(--muted);font-size:14.5px}
.steps-more{text-align:center;margin-top:28px}

/* compare */
.compare{max-width:960px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cmp{border-radius:18px;padding:28px;border:1px solid var(--line);background:#fff}
.cmp h3{font-size:20px;color:var(--ink);margin-bottom:16px;display:flex;align-items:center;gap:10px}
.cmp.us{border-color:var(--brand-line);background:linear-gradient(180deg,#f2fbf8,#fff);box-shadow:0 20px 50px rgba(13,124,113,.10)}
.cmp li{list-style:none;padding:12px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:96px 1fr;gap:12px;font-size:15px}
.cmp li span{color:var(--muted)}
.cmp.us li b{color:var(--brand-ink)}
.tag{font-size:12px;font-weight:700;color:#fff;background:var(--brand);border-radius:999px;padding:3px 10px}

/* start */
.start{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);border-radius:20px;overflow:hidden;border:1px solid var(--line);box-shadow:0 24px 60px rgba(16,32,31,.08)}
.start-main{padding:36px;background:#fff}
.start-main h3{font-size:24px;color:var(--ink)}
.start-main ul{display:grid;gap:10px;margin:18px 0 26px}
.start-main li{list-style:none;font-size:15.5px}
.start-main li::before{content:"✓";color:var(--brand);font-weight:800;margin-right:10px}
.start-side{background:var(--side);color:#cfdedc;padding:36px;display:flex;align-items:center;gap:20px}
.start-side b{display:block;color:#fff;font-size:19px;margin-bottom:6px}
.start-side span{color:#9fb3b1}
.qr{width:104px;height:104px;border-radius:10px;background:#fff;padding:6px;flex:none}
.qr img{width:100%;height:100%;object-fit:contain}

/* guides */
.guides{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.guide{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;transition:transform .25s var(--ease),box-shadow .25s}
.guide:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(16,32,31,.08)}
.guide img{aspect-ratio:16/9;object-fit:cover;width:100%}
.guide div{padding:16px 18px}
.guide b{color:var(--ink);font-size:16px;line-height:1.5;display:block}
.guide span{color:var(--dim);font-size:13px}

/* final cta */
.final{margin:0 var(--gutter) 90px;border-radius:24px;padding:56px 40px;text-align:center;background:radial-gradient(600px 240px at 50% 0,rgba(127,224,214,.25),transparent),var(--side);color:#fff}
.final h2{font-size:clamp(26px,3vw,36px);font-weight:800}
.final p{color:#a7bbb9;margin:10px 0 26px}

.site-footer{background:rgba(255,255,255,.72);backdrop-filter:blur(6px);border-top:1px solid var(--line);padding:44px 0 30px;font-size:14px;color:var(--muted)}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr auto;gap:30px}
.foot h4{color:var(--ink);font-size:15px;margin-bottom:12px}
.foot a{display:block;margin:6px 0}
.foot a:hover{color:var(--brand)}
.legal{margin-top:30px;padding-top:20px;border-top:1px solid var(--line);font-size:12.5px;color:var(--dim);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* tutorials page */
.page-hero{position:relative;overflow:hidden;padding:64px 0 40px}
.page-hero>.wrap{position:relative;z-index:1}
/* point-field wave fixed behind every page (dots.js), matching the client login */
.site-dots{position:fixed;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:-1}
.home-hero .chip,.home-hero>h1,.home-hero>.sub,.home-hero>.cta,.home-hero>.meta,.home-hero>.stage{z-index:1}
.page-hero h1{font-size:clamp(30px,4vw,44px);font-weight:800;color:var(--ink)}
.page-hero p{margin-top:10px;color:var(--muted);font-size:17px;max-width:40em}
.crumbs{font-size:13px;color:var(--dim);margin-bottom:14px}
.crumbs a:hover{color:var(--brand)}
.tut{display:grid;grid-template-columns:220px minmax(0,1fr);gap:48px;padding-top:24px;padding-bottom:96px}
.toc{position:sticky;top:88px;align-self:start;display:grid;gap:2px;font-size:14.5px}
.toc a{padding:9px 14px;border-radius:9px;color:var(--muted);border-left:2px solid transparent}
.toc a:hover{color:var(--ink);background:var(--bg-2)}
.toc a.on{color:var(--brand);background:var(--brand-soft);font-weight:600}
.chapter{scroll-margin-top:90px;margin-bottom:56px}
.chapter-head{display:flex;align-items:baseline;gap:12px;margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.chapter-head h2{font-size:24px;color:var(--ink)}
.chapter-head span{font-size:14px;color:var(--dim)}
.lessons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.lesson{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;transition:box-shadow .25s,transform .25s var(--ease)}
.lesson:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(16,32,31,.08)}
.player{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,#0f2524,#173c39);display:grid;place-items:center;color:#cfe9e5}
.player::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:28px 28px}
.player .pl{position:relative;z-index:1;width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);display:grid;place-items:center;font-size:20px}
.player .soon{position:absolute;z-index:1;left:12px;top:12px;font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.14);color:#e7f6f3}
.player .no{position:absolute;z-index:1;right:14px;bottom:10px;font:800 28px/1 var(--sans);color:rgba(255,255,255,.18)}
.player video,.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:2;background:#000}
.lesson .meta{padding:16px 18px 18px}
.lesson h3{font-size:17px;color:var(--ink)}
.lesson p{margin-top:6px;font-size:14px;color:var(--muted)}
.lesson ol{margin:10px 0 0 18px;font-size:13.5px;color:var(--text);display:grid;gap:3px}
.help-box{display:flex;gap:22px;align-items:center;border-radius:18px;padding:24px;background:var(--bg-2);border:1px solid var(--line)}
.help-box h3{color:var(--ink);font-size:18px}
.help-box p{color:var(--muted);font-size:14.5px;margin-top:4px}

/* cases page */
.case-reading{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px;color:var(--dim)}
.case-reading a{color:var(--brand);font-weight:600}
.case-reading a:hover{color:var(--brand-2)}
.case-list{display:grid;gap:30px;padding-top:28px;padding-bottom:72px}
.case-block{background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px}
.case-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:20px}
.case-cat{display:inline-block;font-size:12.5px;font-weight:700;color:var(--brand-ink);background:var(--brand-soft);border-radius:999px;padding:3px 10px}
.case-head h2{margin-top:10px;font-size:24px;color:var(--ink)}
.case-head p{margin-top:4px;color:var(--muted);font-size:15px}
.case-count{flex:none;font-size:13px;color:var(--dim)}
.cases-grid{display:grid;gap:10px}
.cases-grid.main{grid-template-columns:repeat(5,minmax(0,1fr))}
.cases-grid.detail{grid-template-columns:repeat(6,minmax(0,1fr));margin-top:10px}
.case-tile{position:relative;padding:0;border:0;border-radius:12px;overflow:hidden;background:var(--bg-2);cursor:zoom-in}
.case-tile img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .5s var(--ease)}
.cases-grid.detail .case-tile img{aspect-ratio:3/4}
.case-tile span{position:absolute;left:8px;bottom:8px;font-size:11.5px;font-weight:600;color:#fff;background:rgba(16,32,31,.55);border-radius:6px;padding:2px 7px;opacity:0;transform:translateY(4px);transition:opacity .25s,transform .25s}
.case-tile:hover img{transform:scale(1.05)}
.case-tile:hover span,.case-tile:focus-visible span{opacity:1;transform:none}
.viewer{position:fixed;inset:0;z-index:200;background:rgba(10,20,20,.72);backdrop-filter:blur(6px);display:grid;place-items:center;padding:24px}
.viewer[hidden]{display:none}
.viewer-panel{width:min(1100px,100%);max-height:calc(100vh - 48px);display:grid;grid-template-columns:minmax(0,1fr) 300px;background:#fff;border-radius:18px;overflow:hidden}
.viewer-stage{position:relative;background:var(--bg-2);display:grid;place-items:center;min-height:0}
.viewer-stage img{max-width:100%;max-height:calc(100vh - 48px);object-fit:contain}
.viewer-nav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:var(--ink);font-size:26px;line-height:1;cursor:pointer;box-shadow:0 6px 18px rgba(16,32,31,.15)}
.viewer-nav.prev{left:14px}.viewer-nav.next{right:14px}
.viewer-side{position:relative;padding:24px;display:flex;flex-direction:column;gap:10px;overflow:auto}
.viewer-side small{color:var(--dim);font-size:12px}
.viewer-side h3{font-size:19px;color:var(--ink);padding-right:30px}
.viewer-caption{display:flex;justify-content:space-between;color:var(--muted);font-size:14px}
.viewer-caption b{color:var(--ink)}
.viewer-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:6px 0 12px}
.viewer-thumbs button{padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;cursor:pointer;background:none}
.viewer-thumbs button.on{border-color:var(--brand)}
.viewer-thumbs img{width:100%;aspect-ratio:1/1;object-fit:cover}
.viewer-close{position:absolute;right:14px;top:14px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:20px;line-height:1;cursor:pointer;color:var(--muted)}
.viewer-side .btn{margin-top:auto}

/* reveal */
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}


@media (max-width:960px){
  .nav-links{display:none}
  .chip,.floatcard{display:none}
  .app-body{grid-template-columns:1fr;height:auto}
  .app-side,.app-list,.app-info{display:none}
  .app-chat{min-height:330px}
  .pains,.guides,.plats{grid-template-columns:1fr 1fr}
  .panel.on{grid-template-columns:minmax(0,1fr);gap:28px}
  .compare,.steps,.start{grid-template-columns:minmax(0,1fr)}
  .foot{grid-template-columns:1fr 1fr}
  .tut{grid-template-columns:minmax(0,1fr);gap:20px}
  .cases-grid.main{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cases-grid.detail{grid-template-columns:repeat(3,minmax(0,1fr))}
  .case-head{flex-direction:column;gap:6px}
  .viewer-panel{grid-template-columns:minmax(0,1fr);overflow:auto}
  .viewer-stage img{max-height:60vh}
  .toc{position:static;display:flex;overflow-x:auto;gap:6px;padding-bottom:6px}
  .toc a{white-space:nowrap;flex:none}
}
@media (max-width:600px){
  .site-main>section{padding:68px 0}
  .home-hero{padding-top:48px}
  .home-hero .sub{font-size:16px}
  .home-hero .cta{flex-direction:column;align-items:stretch;padding:0 20px}
  .nav-cta .btn-line{display:none}
  .pains,.guides,.plats,.lessons{grid-template-columns:minmax(0,1fr)}
  .tabs{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;margin:0 -20px 26px;padding-left:20px}
  .tab{flex:none}
  .copy h3{font-size:25px}
  .cmp li{grid-template-columns:76px 1fr}
  .final{padding:40px 22px}
  .help-box{flex-direction:column;align-items:flex-start}
  .cta-contact{display:none}
  .cta-points{font-size:13px}
  .home-hero{padding-bottom:56px}
  .case-block{padding:18px}
  .cases-grid.main,.cases-grid.detail{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cases-grid.main .case-tile:first-child{grid-column:span 2}
  .viewer{padding:10px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  .msg{opacity:1;transform:none}
}

/* faq */
.faq-list{max-width:880px;margin:0 auto;display:grid;gap:12px}
.faq-list details{background:#fff;border:1px solid var(--line);border-radius:14px;transition:border-color .2s,box-shadow .2s}
.faq-list details[open]{border-color:var(--brand-line);box-shadow:0 12px 30px rgba(13,124,113,.07)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:18px 22px;font-size:16.5px;font-weight:700;color:var(--ink)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"";margin-left:auto;flex:none;width:10px;height:10px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translateY(-3px);transition:transform .25s var(--ease)}
.faq-list details[open] summary::after{transform:rotate(225deg) translateY(-2px)}
.faq-list .a{padding:0 22px 20px;color:var(--muted);font-size:15px;line-height:1.8}
.faq-list .a b{color:var(--text)}
.more-link{display:inline-block;margin-top:18px;font-weight:600;color:var(--brand)}
.more-link:hover{color:var(--brand-2)}