/* theme: dark candy · cyan + magenta */
:root{
  --bg:#07060a; --text:#f4f0f5; --muted:#a39aa8; --dim:#6e6674;
  --line:rgba(255,255,255,.08); --pink:#ff3d8f; --magenta:#e11d8a;
  --cyan:#3dd5ed; --cyan2:#7ef0ff; --violet:#8b5cf6;
  --card:rgba(255,255,255,.035);
}
body{background:radial-gradient(60% 45% at 78% -10%,rgba(61,213,237,.08),transparent 55%),radial-gradient(50% 40% at 10% 0,rgba(255,61,143,.07),transparent 50%),#07060a;color:var(--text);font-family:"PingFang SC","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei",system-ui,sans-serif}
body::before{opacity:.045}
.side{background:rgba(12,10,16,.92);border-color:var(--line)}
.side-top,.side-bottom{border-color:var(--line)}
.side-link{color:#c9c2ce;border-color:rgba(255,255,255,.06)}
.side-link:hover{color:#fff;background:rgba(61,213,237,.06)}
.side-link.active{color:#fff;background:rgba(255,61,143,.1);border-color:rgba(255,61,143,.28)}
.side-link.promo{color:#ffc2da;border-color:rgba(255,61,143,.28);background:rgba(255,61,143,.07)}
.side-link .tag,.ccard .badge{background:linear-gradient(135deg,var(--pink),var(--magenta));color:#fff}
.logo{color:#fff}
.logo-mark{background:transparent!important;box-shadow:0 0 22px rgba(61,213,237,.35)!important;border-radius:9px;overflow:visible}
.logo small{color:var(--dim);border-color:rgba(61,213,237,.25)}
.topbar{background:rgba(7,6,10,.78);border-color:var(--line)}
.menu-btn{color:#fff}
.tab{color:var(--muted)}.tab:hover{color:#fff}
.tab.active{color:#fff;border-bottom-color:var(--pink);background:linear-gradient(0deg,rgba(255,61,143,.12),transparent 70%)}
.btn-primary{background:linear-gradient(135deg,var(--pink),var(--magenta));color:#fff;box-shadow:0 10px 36px -12px rgba(255,61,143,.7)}
.btn-primary:hover{box-shadow:0 14px 44px -10px rgba(255,61,143,.9)}
.btn-ghost{background:rgba(255,255,255,.04);border-color:var(--line);color:#fff}
.banner-c{border-color:rgba(61,213,237,.18);box-shadow:0 40px 120px -48px rgba(255,61,143,.45),0 0 0 1px rgba(61,213,237,.08) inset}
.slide::after{background:linear-gradient(90deg,rgba(7,6,10,.94) 0,rgba(7,6,10,.62) 42%,rgba(7,6,10,.08) 78%),linear-gradient(0deg,rgba(7,6,10,.7),transparent 45%)}
.slide h2{background:linear-gradient(180deg,#fff 18%,#ffc6dd 55%,var(--cyan2));-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 4px 30px rgba(255,61,143,.35))}
.slide p{color:#cfc8d2}
.slide .tagline{color:var(--cyan)}
.slide .corner{color:rgba(255,255,255,.75);border-color:rgba(61,213,237,.35)}
.slide .big{color:rgba(255,244,250,.92);text-shadow:0 0 60px rgba(255,61,143,.7),0 0 120px rgba(61,213,237,.35)}
.slide .rings{border-color:rgba(61,213,237,.28);box-shadow:0 0 0 40px rgba(255,61,143,.03),0 0 0 90px rgba(61,213,237,.025),0 0 140px 30px rgba(255,61,143,.28) inset}
.c-arrow{background:rgba(7,6,10,.45);color:#fff;border-color:rgba(255,255,255,.14)}
.dots button{background:rgba(255,255,255,.25)}.dots button.on{background:linear-gradient(90deg,var(--cyan),var(--pink))}
.explore-h em,.kicker,h2 em,.mini-head h2 em,h1 em{color:var(--pink)!important;background:linear-gradient(120deg,#ffd1e4,var(--pink) 45%,var(--cyan2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.explore-h .count{color:var(--dim)}
.search{background:rgba(255,255,255,.05);border-color:var(--line)}
.search input{color:#fff}
.filter,.chips-row .filter{background:rgba(255,255,255,.05);border-color:var(--line);color:var(--muted)}
.chips-row .filter.on{color:#fff;border-color:var(--pink);background:rgba(255,61,143,.1);box-shadow:0 0 0 1px rgba(255,61,143,.3)}
.ccard{border-color:var(--line);background:#0d0b12}
.ccard:hover{border-color:rgba(61,213,237,.55);box-shadow:0 28px 56px -24px rgba(255,61,143,.5)}
.ccard::after{background:linear-gradient(180deg,rgba(7,6,10,.02) 52%,rgba(7,6,10,.72) 82%,rgba(7,6,10,.96) 100%)}
.ccard .mark{color:rgba(255,255,255,.92);text-shadow:0 0 34px rgba(61,213,237,.55)}
.ccard .ctag{background:rgba(7,6,10,.55);color:#ddd;border-color:rgba(255,255,255,.14)}
.ccard h3{color:#f7f2f6;text-shadow:0 2px 12px rgba(0,0,0,.7)}
.ccard .hook{color:#fff}
.ccard p{color:#bdb6c2}
.ccard .st{color:#ffc2da}.ccard .st.ok{color:var(--cyan)}
.ccard.cta-card{border-color:rgba(255,61,143,.5);box-shadow:0 0 0 1px rgba(255,61,143,.22) inset}
.ccard.cta-card::before{background:radial-gradient(70% 60% at 50% 30%,rgba(255,61,143,.5),transparent 70%),radial-gradient(50% 40% at 80% 80%,rgba(61,213,237,.25),transparent 70%),linear-gradient(180deg,#2a0d22,#0d0a10)}
.ccard.cta-card b{color:#fff}
.ccard.cta-card span.s{color:#e6c9d6}
.glass{background:rgba(255,255,255,.035);border-color:var(--line)}
.vstrip p,.sec-head p,.plan .note,.setup-row .d{color:var(--muted)}
.plan.feature{border-color:rgba(255,61,143,.4);background:linear-gradient(160deg,rgba(255,61,143,.12),rgba(61,213,237,.05) 55%,rgba(255,255,255,.02))}
.plan.feature::before{background:radial-gradient(circle,rgba(255,61,143,.25),transparent 65%)}
.plan li{color:var(--text)}
.plan li::before{background:radial-gradient(circle,var(--cyan) 30%,rgba(61,213,237,.15) 32%)}
.chip{background:rgba(255,255,255,.04);border-color:var(--line);color:var(--muted)}.chip b{color:#fff}
.setup-row{border-color:var(--line);background:rgba(255,255,255,.04)}
.setup-row .p small{color:var(--cyan)}
.banner::before{background:radial-gradient(50% 120% at 100% 50%,rgba(255,61,143,.22),transparent 70%),radial-gradient(40% 80% at 0 100%,rgba(61,213,237,.15),transparent 70%)}
.banner p{color:var(--muted)!important}
.bar.a{background:linear-gradient(180deg,rgba(255,61,143,.55),rgba(255,61,143,.05));border-color:rgba(255,61,143,.45);box-shadow:0 0 60px -10px rgba(255,61,143,.45)}
.bar{color:var(--muted);border-color:var(--line)}.bar b{color:#fff}
footer{border-color:var(--line);color:var(--dim)}.foot h4{color:#fff}.foot-bottom{border-color:var(--line)}
.toast{background:#16121c;color:#f1e8ec;border-color:rgba(61,213,237,.4)}

/* card art gradients keep pink/cyan candy feel */
.g1{--g:radial-gradient(60% 80% at 20% 30%,#ff3d8f 0,transparent 60%),radial-gradient(50% 60% at 85% 80%,#3dd5ed 0,transparent 70%),#140a12}
.g2{--g:conic-gradient(from 200deg at 60% 55%,#1a0b1f,#e11d8a,#123842,#3dd5ed,#1a0b1f)}
.g3{--g:linear-gradient(115deg,#0d0a10 30%,rgba(255,61,143,.75) 48%,#0d0a10 52%,rgba(61,213,237,.55) 70%,#0d0a10 85%)}
.g4{--g:radial-gradient(circle at 30% 50%,transparent 18%,rgba(255,61,143,.5) 19%,transparent 21%),radial-gradient(circle at 70% 50%,transparent 18%,rgba(61,213,237,.5) 19%,transparent 21%),radial-gradient(70% 70% at 50% 50%,#2a0d22,#0c090e)}
.g5{--g:repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 1px,transparent 1px 14px),radial-gradient(50% 70% at 70% 40%,#7ef0ff,#7a1048 50%,#0d0a10 80%)}
.g6{--g:repeating-radial-gradient(circle at 50% 120%,rgba(61,213,237,.35) 0 1px,transparent 1px 26px),radial-gradient(60% 60% at 50% 100%,#3b0a2a,#0b090d)}
.g7{--g:radial-gradient(40% 50% at 25% 40%,#c084fc,transparent 70%),radial-gradient(40% 50% at 75% 60%,#3dd5ed,transparent 70%),#120c16}
.g8{--g:radial-gradient(25% 35% at 50% 38%,rgba(255,179,209,.85),transparent 70%),linear-gradient(180deg,#0e0a11,#3a1131)}
.g9{--g:linear-gradient(90deg,transparent 0 46%,rgba(255,61,143,.9) 48%,transparent 50%),linear-gradient(0deg,#0d0a10,#25102a)}
.g10{--g:radial-gradient(80% 40% at 50% 0,#3dd5ed,transparent 70%),radial-gradient(60% 50% at 50% 100%,#e11d8a,transparent 70%),#0e0a12}
.g11{--g:radial-gradient(circle at 50% 50%,#0d0a10 34%,transparent 35%),conic-gradient(from 210deg,#ff3d8f,#3dd5ed,#1a0d18 60%,#ff3d8f)}
.g12{--g:linear-gradient(0deg,rgba(61,213,237,.7) 0 2px,transparent 2px),repeating-linear-gradient(90deg,transparent 0 18px,rgba(255,61,143,.18) 18px 30px),linear-gradient(180deg,#0d0a10,#2a0d24)}

/* conversion / airy layout on dark candy */
.home-hero{padding:clamp(36px,5vw,72px) 0 clamp(28px,4vw,56px)}
.home-hero h1{font-size:clamp(34px,4.6vw,64px);line-height:1.12;font-weight:600;margin:18px 0 0;letter-spacing:-.01em}
.home-hero .sub{max-width:560px;margin:22px 0 30px;font-size:clamp(15px,1.4vw,17px);line-height:1.7}
.home-hero .cta-row{gap:14px}
.hero-facts{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:30px;color:var(--muted);font-size:14px}
.hero-facts b{color:var(--cyan);font-size:20px;margin:0 3px;font-weight:600}
.vchips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;align-items:center}
.vlabel{font-size:13px;color:var(--dim);margin-right:6px;width:100%;margin-bottom:2px}
.vchip{display:inline-flex;gap:8px;align-items:baseline;font-size:13px;color:var(--muted);padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.03);transition:border-color .25s,transform .25s,box-shadow .25s}
.vchip b{color:#fff;font-weight:600}
.vchip:hover{border-color:rgba(61,213,237,.5);transform:translateY(-2px);box-shadow:0 10px 24px -18px rgba(61,213,237,.45)}
.slide .slide-name{font-size:15px;font-weight:600;color:#fff;margin-top:14px;letter-spacing:.04em}
.slide .slide-name::before{content:"";display:inline-block;width:18px;height:2px;background:linear-gradient(90deg,var(--cyan),var(--pink));vertical-align:middle;margin-right:10px}
.slide h2{font-size:clamp(32px,3.8vw,54px);margin:10px 0 14px;text-wrap:balance;max-width:560px}
.banner-c{margin-top:18px}
.ccard .cbody{padding:18px 20px 16px;background:linear-gradient(180deg,transparent,rgba(7,6,10,.35) 28%,rgba(7,6,10,.78))}
.ccard h3{font-size:13px;font-weight:500;color:var(--muted);letter-spacing:.02em}
.ccard .hook{font-size:clamp(15px,1.25vw,18px);line-height:1.3;font-weight:700;margin-top:3px;text-wrap:balance;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ccard p{font-size:12px;margin-top:6px;line-height:1.45;-webkit-line-clamp:2}
.ccard .st{margin-top:8px}
.ccard.cta-card .cta-k{font-size:11px;letter-spacing:.24em;color:var(--cyan);margin-bottom:12px}
.ccard.cta-card{padding:28px 24px}
.hero-hook{font-size:clamp(22px,2.4vw,32px);font-weight:700;color:var(--pink);margin-top:12px;line-height:1.3}
.detail-hero{gap:64px;align-items:stretch}
.detail-hero .sub{margin:18px 0 34px}
.detail-art{border-radius:16px;min-height:460px}
.detail-art .glyph{color:rgba(255,255,255,.92);text-shadow:0 0 40px rgba(61,213,237,.45);font-weight:700;font-size:clamp(140px,16vw,220px)}
.hero-cap{font-size:13px;color:var(--dim);margin-top:16px}
.plan .eb{font-size:14px;color:var(--muted);margin:4px 0 6px}.plan .eb b{color:var(--cyan)}
.five{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.five .f{padding:22px}
.five .n{font-size:13px;color:var(--cyan);letter-spacing:.1em}
.five h3{font-size:16px;margin:10px 0 8px}
.five p{font-size:13px;color:var(--muted);line-height:1.6}
.tcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.tcard{display:flex;flex-direction:column;gap:8px;padding:22px 24px;transition:border-color .3s,transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.tcard:hover{border-color:rgba(61,213,237,.45);transform:translateY(-4px);box-shadow:0 18px 36px -24px rgba(255,61,143,.35)}
.tcard .ok{font-size:12px;color:var(--cyan)}
.tcard b{font-size:18px;font-weight:600;color:#fff}
.tcard .h{font-size:14px;color:var(--muted)}
.later-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:20px}
.later{font-size:13px;color:var(--muted);padding:7px 12px;border:1px dashed rgba(255,255,255,.16);border-radius:10px}
.page-head{padding:44px 0 20px}
.page-head .cta-row{margin-top:26px!important;gap:14px}
.content{padding-left:40px;padding-right:40px}
.pill{color:#b8f4ff;background:rgba(61,213,237,.08);border-color:rgba(61,213,237,.28)}
.pill::before{background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
.tutorial-banner{color:var(--cyan);background:rgba(61,213,237,.06);border-color:rgba(61,213,237,.35)}
.tutorial-body blockquote{border-left-color:var(--pink);background:rgba(255,61,143,.04)}
.tutorial-index-list a{border-bottom-color:rgba(61,213,237,.4)}
.tutorial-index-list a:hover{color:var(--cyan)}
@media (max-width:1100px){.five{grid-template-columns:repeat(2,1fr)}.content{padding-left:24px;padding-right:24px}}
@media (max-width:860px){
  .five{grid-template-columns:1fr}
  .ccard .hook{font-size:18px}
  .home-hero h1 br{display:none}
  .home-hero{padding:24px 0 32px}
  .vchips{flex-wrap:wrap;overflow:visible;gap:10px}
  .vchip,.vlabel{flex:0 1 auto}
  .vlabel{width:100%}
  .hero-facts{gap:10px 20px}
  .content{padding-left:16px;padding-right:16px}
  .detail-art{min-height:340px}
}
.home-hero h1,.page-head h1,.hero-hook{text-wrap:balance}