/* === 沙淘金 v3.0 — Amber Tech 设计系统 === */
:root{
  --ink:#0F172A;--ink-2:#1E293B;--ink-3:#334155;
  --gold:#F59E0B;--gold-lt:#FBBF24;--gold-dk:#D97706;
  --teal:#06B6D4;--teal-lt:#22D3EE;
  --violet:#8B5CF6;--emerald:#10B981;--rose:#F43F5E;
  --paper:#FAFAF9;--paper-2:#F5F5F4;--paper-3:#E7E5E4;
  --line:#E7E5E4;--line-2:#D6D3D1;
  --body:#292524;--muted:#78716C;--faint:#A8A29E;
  --r:14px;--r-sm:10px;--r-lg:22px;--r-xl:32px;
  --sh:0 1px 3px rgba(15,23,42,.06),0 1px 2px rgba(15,23,42,.04);
  --sh-lg:0 20px 40px -8px rgba(15,23,42,.10),0 8px 16px -4px rgba(15,23,42,.06);
  --sh-glow:0 0 50px rgba(245,158,11,.12);
  --grad-dark:linear-gradient(135deg,#0F172A 0%,#1C1917 50%,#1E1B17 100%);
  --grad-gold:linear-gradient(135deg,#F59E0B 0%,#D97706 100%);
  --grad-teal:linear-gradient(135deg,#06B6D4 0%,#0891B2 100%);
  --grad-violet:linear-gradient(135deg,#8B5CF6 0%,#6366F1 100%);
  --grad-emerald:linear-gradient(135deg,#10B981 0%,#059669 100%);
  --grad-warm:linear-gradient(135deg,#F59E0B 0%,#F43F5E 100%);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:"PingFang SC","Microsoft YaHei",sans-serif;color:var(--body);line-height:1.7;background:var(--paper);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.inner{max-width:1200px;margin:0 auto;padding:0 24px}

/* === Site Head === */
.site-head{position:sticky;top:0;z-index:100;background:rgba(250,250,249,.9);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.site-head .inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand-logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;color:var(--ink)}
.brand-logo img{height:40px;border-radius:8px;flex-shrink:0}
.head-tel{display:flex;align-items:center;gap:8px;font-weight:700;font-size:17px;color:var(--ink)}
.head-tel svg{width:18px;height:18px;fill:var(--gold-dk)}
@media(max-width:768px){.head-tel span{display:none}}

/* === Banner (no image, no contact) === */
.banner{position:relative;background:var(--grad-dark);color:#fff;padding:80px 0 90px;overflow:hidden;text-align:center}
.banner::before{content:"";position:absolute;width:500px;height:500px;top:-150px;left:-100px;background:radial-gradient(circle,rgba(245,158,11,.15) 0%,transparent 65%);border-radius:50%;filter:blur(30px)}
.banner::after{content:"";position:absolute;width:400px;height:400px;bottom:-100px;right:-50px;background:radial-gradient(circle,rgba(6,182,212,.12) 0%,transparent 65%);border-radius:50%;filter:blur(30px)}
.banner-inner{position:relative;z-index:2;max-width:760px;margin:0 auto}
.banner-tag{display:inline-flex;align-items:center;gap:8px;background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.25);padding:7px 18px;border-radius:30px;font-size:13px;margin-bottom:22px;color:var(--gold-lt)}
.banner-tag .dot{width:7px;height:7px;background:var(--gold);border-radius:50%;animation:dotPulse 2s infinite;box-shadow:0 0 8px var(--gold)}
@keyframes dotPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.4)}}
.banner h1{font-size:clamp(30px,5.5vw,46px);line-height:1.22;margin-bottom:18px;font-weight:800;letter-spacing:-.02em}
.banner h1 em{font-style:normal;background:linear-gradient(135deg,var(--gold),var(--gold-lt));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.banner .lead{font-size:17px;color:rgba(255,255,255,.65);margin-bottom:28px;line-height:1.8;max-width:600px;margin-left:auto;margin-right:auto}
.banner-tags{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:30px}
.banner-tags span{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);padding:6px 14px;border-radius:8px;font-size:13px;color:rgba(255,255,255,.75)}
.banner-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn-gold{display:inline-flex;align-items:center;gap:8px;background:var(--grad-gold);color:#fff;padding:14px 34px;border-radius:30px;font-size:16px;font-weight:700;transition:.25s;box-shadow:0 8px 24px rgba(245,158,11,.3);cursor:pointer;border:none}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(245,158,11,.4)}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.15);color:#fff;padding:12px 30px;border-radius:30px;font-size:15px;font-weight:600;transition:.25s}
.btn-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3)}

/* === Content Blocks === */
.block{padding:84px 0}
.block-paper{background:var(--paper)}
.block-tinted{background:var(--paper-2)}
.block-dark{background:var(--ink);color:#fff}
.block-grad{background:var(--grad-dark);color:#fff}
.block-head{text-align:center;margin-bottom:14px}
.block-head h2{font-size:clamp(26px,4vw,34px);font-weight:800;color:var(--ink);letter-spacing:-.01em}
.block-head h2 em{font-style:normal;background:linear-gradient(135deg,var(--gold),var(--gold-dk));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.block-dark .block-head h2,.block-grad .block-head h2{color:#fff}
.block-dark .block-head h2 em,.block-grad .block-head h2 em{background:linear-gradient(135deg,var(--gold-lt),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.block-sub{text-align:center;color:var(--muted);font-size:16px;margin-bottom:44px;max-width:640px;margin-left:auto;margin-right:auto}
.block-dark .block-sub,.block-grad .block-sub{color:rgba(255,255,255,.5)}

/* === Mosaic Grid (index) === */
.mosaic{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:16px}
.mos-tile{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;transition:.3s;position:relative;overflow:hidden;display:flex;flex-direction:column}
.mos-tile:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);border-color:transparent}
.mos-tile::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-gold);opacity:0;transition:.3s}
.mos-tile:hover::before{opacity:1}
.mos-tile.wide,.mos-tile.big,.mos-tile.tall{grid-column:span 1;grid-row:span 1}
.mos-ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;font-size:20px;color:#fff;flex-shrink:0}
.mos-tile h3{font-size:17px;font-weight:700;margin-bottom:6px;color:var(--ink)}
.mos-tile p{font-size:13px;color:var(--muted);line-height:1.7}
.mos-chip{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;margin-bottom:10px}
@media(max-width:768px){.mosaic{grid-template-columns:1fr 1fr}.mos-tile.wide,.mos-tile.big,.mos-tile.tall{grid-column:span 1;grid-row:span 1}}
@media(max-width:480px){.mosaic{grid-template-columns:1fr}.mos-tile.wide,.mos-tile.big,.mos-tile.tall{grid-column:span 1;grid-row:span 1}}

/* === Showcase Grid === */
.showcase{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.case-tile{background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);transition:.3s;border:1px solid var(--line)}
.case-tile:hover{transform:translateY(-5px);box-shadow:var(--sh-lg)}
.case-thumb{height:180px;overflow:hidden;position:relative}
.case-thumb img{width:100%;height:100%;object-fit:cover;transition:.5s}
.case-tile:hover .case-thumb img{transform:scale(1.08)}
.case-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(15,23,42,.25) 100%)}
.case-label{position:absolute;top:10px;left:10px;background:rgba(255,255,255,.92);color:var(--gold-dk);padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600;z-index:2}
.case-info{padding:22px}
.case-info h3{font-size:16px;font-weight:700;margin-bottom:10px;color:var(--ink)}
.case-meta{display:flex;gap:18px;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--paper-3)}
.case-meta .num{font-size:20px;font-weight:800;background:linear-gradient(135deg,var(--gold),var(--gold-dk));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.case-meta .tag{font-size:11px;color:var(--muted)}
.case-info p{font-size:13px;color:var(--muted);line-height:1.6}
@media(max-width:768px){.showcase{grid-template-columns:1fr}}

/* === Pricing Tiers === */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:940px;margin:0 auto}
.tier{background:#fff;border-radius:var(--r);padding:34px 26px;text-align:center;border:2px solid var(--line);transition:.3s;position:relative;display:flex;flex-direction:column}
.tier.featured{border-color:transparent;background:linear-gradient(135deg,#FFFBEB,#FEF3C7)}
.tier.featured::before{content:"";position:absolute;inset:0;padding:2px;border-radius:var(--r);background:var(--grad-gold);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.tier.featured::after{content:"热门";position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--grad-gold);color:#fff;padding:4px 16px;border-radius:20px;font-size:12px;font-weight:600;z-index:1}
.tier:hover{transform:translateY(-3px)}
.tier h3{font-size:19px;font-weight:700;margin-bottom:6px;color:var(--ink)}
.tier .desc{font-size:13px;color:var(--muted);margin-bottom:18px}
.tier-price{font-size:34px;font-weight:800;color:var(--gold-dk);margin-bottom:4px}
.tier-price .unit{font-size:15px;font-weight:600}
.tier-note{font-size:12px;color:var(--muted);margin-bottom:22px}
.tier-list{list-style:none;text-align:left;margin-bottom:24px}
.tier-list li{padding:7px 0;font-size:13px;color:var(--body);display:flex;align-items:center;gap:8px}
.tier-list li::before{content:"✓";width:18px;height:18px;border-radius:50%;background:var(--grad-emerald);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tier .btn-gold{width:100%;justify-content:center;padding:12px;margin-top:auto}
.free-cta{max-width:640px;margin:36px auto 0;background:linear-gradient(135deg,#FFFBEB,#F0FDF4);border:1px solid var(--line);border-radius:var(--r);padding:28px;text-align:center;position:relative;overflow:hidden}
.free-cta::before{content:"";position:absolute;top:-50%;right:-20%;width:280px;height:280px;background:radial-gradient(circle,rgba(245,158,11,.08),transparent 70%);border-radius:50%}
.free-cta h3{font-size:20px;font-weight:800;color:var(--ink);margin-bottom:6px;position:relative}
.free-cta p{font-size:14px;color:var(--muted);margin-bottom:14px;position:relative}
@media(max-width:768px){.tiers{grid-template-columns:1fr}}

/* === Metrics Row === */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.metric{text-align:center;padding:32px 18px;background:#fff;border-radius:var(--r);border:1px solid var(--line);transition:.3s;position:relative;overflow:hidden;color:var(--ink);box-shadow:var(--sh);display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:170px}
.metric:hover{transform:translateY(-3px);box-shadow:var(--sh-lg)}
.metric::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-gold)}
.metric .num{font-size:42px;font-weight:800;color:var(--gold-dk);margin-bottom:6px;letter-spacing:-.02em}
.metric .label{font-size:14px;color:var(--muted);font-weight:500}
.metric .ic{width:48px;height:48px;margin:0 auto 14px;border-radius:12px;background:linear-gradient(135deg,var(--gold),var(--gold-dk));display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff}
@media(max-width:768px){.metrics{grid-template-columns:1fr 1fr}}

/* === Reach Us === */
.reachus{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.reachus-info h3{font-size:22px;font-weight:800;margin-bottom:18px;color:var(--ink)}
.reachus-channels{display:flex;flex-direction:column;gap:14px;margin-bottom:28px}
.reachus-channel{display:flex;align-items:center;gap:14px;padding:14px 18px;background:#fff;border:1px solid var(--line);border-radius:var(--r);transition:.2s}
.reachus-channel:hover{border-color:var(--gold);box-shadow:var(--sh)}
.ch-ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ch-ic.tel{background:#FFFBEB}
.ch-ic.tel svg{fill:var(--gold-dk)}
.ch-ic.wx{background:#ECFDF5}
.ch-ic.wx svg{fill:var(--emerald)}
.ch-txt .tag{font-size:12px;color:var(--muted)}
.ch-txt .val{font-size:17px;font-weight:700;color:var(--ink)}
.ch-txt .val a{color:var(--gold-dk)}
@media(max-width:768px){.reachus{grid-template-columns:1fr}}

/* === Q&A === */
.qa-list{max-width:780px;margin:0 auto}
.qa-item{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:8px;overflow:hidden;transition:.2s}
.qa-item:hover{border-color:var(--gold);box-shadow:var(--sh)}
.qa-q{padding:16px 20px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:15px;color:var(--ink);user-select:none}
.qa-q .arr{width:16px;height:16px;transition:.3s;flex-shrink:0;fill:var(--gold-dk)}
.qa-item.open .arr{transform:rotate(180deg)}
.qa-a{max-height:0;overflow:hidden;transition:max-height .3s ease;padding:0 20px}
.qa-item.open .qa-a{max-height:400px;padding:0 20px 16px}
.qa-a p{font-size:14px;color:var(--muted);line-height:1.8}

/* === Site Foot === */
.site-foot{background:var(--ink);color:rgba(255,255,255,.55);padding:44px 0 20px}
.foot-top{display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:24px;align-items:start;margin-bottom:28px}
.foot-brand .brand-logo{color:#fff;margin-bottom:10px}
.foot-brand p{font-size:12px;line-height:1.8;margin-bottom:14px;color:rgba(255,255,255,.5)}
.foot-col h4{color:#fff;font-size:14px;font-weight:700;margin-bottom:10px}
.foot-col a{display:block;font-size:13px;padding:3px 0;transition:.2s;color:rgba(255,255,255,.55)}
.foot-col a:hover{color:var(--gold-lt)}
.foot-contact{font-size:13px;line-height:1.9}
.foot-contact .tel{color:var(--gold-lt);font-size:19px;font-weight:700}
.foot-bottom{border-top:1px solid rgba(255,255,255,.06);padding-top:18px;text-align:center;font-size:12px;color:rgba(255,255,255,.35)}
@media(max-width:768px){.foot-top{grid-template-columns:1fr;gap:20px}}

/* === Dock (floating) === */
.dock{position:fixed;bottom:130px;right:20px;z-index:99;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.dock-btn{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,.12);transition:.2s;position:relative;cursor:pointer;border:none}
.dock-btn:hover{transform:scale(1.08)}
.dock-btn svg{width:22px;height:22px;fill:#fff}
.dock-phone{background:var(--grad-gold)}
.dock-wechat{background:var(--grad-emerald)}
.dock-top{background:#fff;border:1px solid var(--line)}
.dock-top svg{fill:var(--body)}
.dock-tip{position:absolute;right:58px;top:50%;transform:translateY(-50%) translateX(8px);opacity:0;visibility:hidden;transition:.2s;white-space:nowrap;background:#fff;padding:14px;border-radius:var(--r-sm);box-shadow:var(--sh-lg);text-align:center;min-width:130px}
.dock-btn:hover .dock-tip{opacity:1;visibility:visible;transform:translateY(-50%) translateX(0)}
.dock-tip .tip-ttl{font-size:12px;color:var(--muted);margin-bottom:6px}
.dock-tip .tip-num{font-size:17px;font-weight:800;color:var(--ink);display:block}
.dock-tip .tip-qr{width:110px;height:auto;border-radius:6px}
.dock-tip .tip-act{font-size:11px;color:var(--muted);margin-top:4px}
@media(max-width:480px){.dock{bottom:110px;right:14px}.dock-btn{width:46px;height:46px}.dock-tip{padding:10px;right:52px}.dock-tip .tip-qr{width:90px}}

/* === Reveal Animation === */
.reveal{opacity:0;transform:translateY(28px);transition:.6s}
.reveal.in{opacity:1;transform:translateY(0)}
.metric.reveal,.num.reveal{opacity:1;transform:none}

/* === Feature Strip (plsjlrgjdzkf) === */
.strip{display:flex;gap:16px;overflow-x:auto;padding-bottom:14px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.strip::-webkit-scrollbar{height:5px}
.strip::-webkit-scrollbar-track{background:var(--paper-2);border-radius:3px}
.strip::-webkit-scrollbar-thumb{background:var(--gold);border-radius:3px}
.strip-card{flex:0 0 300px;scroll-snap-align:start;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;transition:.3s}
.strip-card:hover{transform:translateY(-3px);box-shadow:var(--sh-lg)}
.strip-card .ic{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;margin-bottom:14px;flex-shrink:0}
.strip-card h3{font-size:16px;font-weight:700;margin-bottom:6px;color:var(--ink)}
.strip-card p{font-size:13px;color:var(--muted);line-height:1.6}

/* === Accordion (qynbglxtdzkf) === */
.accordion{max-width:860px;margin:0 auto}
.acc-item{background:#fff;border:1px solid var(--line);border-radius:var(--r);margin-bottom:12px;overflow:hidden;transition:.2s}
.acc-item:hover{box-shadow:var(--sh)}
.acc-head{padding:20px 24px;cursor:pointer;display:flex;align-items:center;gap:16px;font-weight:700;font-size:17px;color:var(--ink);user-select:none}
.acc-head .acc-ic{width:44px;height:44px;border-radius:12px;background:var(--grad-gold);display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;flex-shrink:0}
.acc-head .acc-arr{margin-left:auto;width:20px;height:20px;transition:.3s;flex-shrink:0;fill:var(--muted)}
.acc-item.open .acc-arr{transform:rotate(180deg)}
.acc-body{max-height:0;overflow:hidden;transition:max-height .35s ease}
.acc-item.open .acc-body{max-height:600px}
.acc-body-inner{padding:0 24px 20px 84px}
.acc-body-inner .check-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.check-list li{list-style:none;display:flex;align-items:center;gap:8px;font-size:14px;color:var(--body)}
.check-list li::before{content:"✓";width:20px;height:20px;border-radius:50%;background:var(--grad-emerald);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
@media(max-width:480px){.check-list{grid-template-columns:1fr!important}.acc-body-inner{padding-left:24px}}

/* === V-Timeline (sbxjxcxkf) === */
.vtl{position:relative;max-width:780px;margin:0 auto;padding-left:36px}
.vtl::before{content:"";position:absolute;left:13px;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--grad-gold),var(--grad-teal))}
.vtl-node{position:relative;margin-bottom:36px}
.vtl-node::before{content:"";position:absolute;left:-30px;top:4px;width:14px;height:14px;border-radius:50%;background:var(--grad-gold);border:3px solid var(--paper);box-shadow:0 0 0 2px var(--gold)}
.vtl-node .vtl-time{font-size:12px;color:var(--faint);margin-bottom:3px}
.vtl-node h4{font-size:16px;font-weight:700;margin-bottom:6px;color:var(--ink)}
.vtl-node p{font-size:14px;color:var(--muted);line-height:1.7}

/* === Versus (syrjkfgsnjh) === */
.versus{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:stretch;max-width:860px;margin:0 auto}
.vs-card{border-radius:var(--r);padding:28px;position:relative}
.vs-card.us{background:linear-gradient(135deg,#FFFBEB,#FEF3C7);border:2px solid var(--gold)}
.vs-card.them{background:var(--paper-2);border:2px solid var(--line)}
.vs-card h3{font-size:18px;font-weight:800;margin-bottom:18px;text-align:center}
.vs-card.us h3{color:var(--gold-dk)}
.vs-card.them h3{color:var(--muted)}
.vs-card ul{list-style:none}
.vs-card li{padding:9px 0;font-size:13px;border-bottom:1px solid rgba(0,0,0,.04);display:flex;align-items:center;gap:8px}
.vs-card.us li{color:var(--body)}
.vs-card.them li{color:var(--muted)}
.vs-card li .yes{color:var(--emerald);font-weight:700}
.vs-card li .no{color:var(--rose);font-weight:700}
.vs-mid{display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;color:var(--muted);background:#fff;border:2px solid var(--line);border-radius:50%;width:52px;height:52px;align-self:center}
@media(max-width:768px){.versus{grid-template-columns:1fr}.vs-mid{margin:0 auto;transform:rotate(90deg)}}

/* === Diagonal Section (whxcxkfgs) === */
.diag{position:relative;overflow:hidden}
.diag-item{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin-bottom:50px}
.diag-item:nth-child(even) .diag-text{order:2}
.diag-text h3{font-size:21px;font-weight:800;margin-bottom:10px;color:var(--ink)}
.diag-text p{font-size:14px;color:var(--muted);line-height:1.8;margin-bottom:14px}
.diag-visual{border-radius:var(--r-lg);overflow:hidden;min-height:260px;display:flex;align-items:center;justify-content:center;font-size:56px;color:#fff}
.diag-visual.gold{background:var(--grad-gold)}
.diag-visual.teal{background:var(--grad-teal)}
.diag-visual.violet{background:var(--grad-violet)}
.diag-visual.warm{background:var(--grad-warm)}
.diag-visual.emerald{background:var(--grad-emerald)}
@media(max-width:768px){.diag-item{grid-template-columns:1fr;gap:20px}.diag-item:nth-child(even) .diag-text{order:0}}

/* === Stack Tiers (xcxkfdsq) === */
.stack-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:940px;margin:0 auto}
.stack-tier{background:#fff;border-radius:var(--r);padding:30px 22px;border:1px solid var(--line);transition:.3s;position:relative;overflow:hidden}
.stack-tier:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.stack-tier .stack-badge{display:inline-block;padding:3px 12px;border-radius:20px;font-size:12px;font-weight:600;margin-bottom:12px;color:#fff}
.stack-tier h3{font-size:18px;font-weight:700;margin-bottom:6px;color:var(--ink)}
.stack-tier .stack-price{font-size:28px;font-weight:800;color:var(--gold-dk);margin-bottom:4px}
.stack-tier .stack-desc{font-size:13px;color:var(--muted);margin-bottom:16px}
.stack-tier ul{list-style:none;margin-bottom:20px}
.stack-tier li{padding:6px 0;font-size:13px;color:var(--body);display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--paper-3)}
.stack-tier li:last-child{border:none}
.stack-tier li .yes{color:var(--emerald);font-weight:700}
.stack-tier li .no{color:var(--rose);font-weight:700}
@media(max-width:768px){.stack-tiers{grid-template-columns:1fr}}

/* === Step Flow === */
.step-flow{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;position:relative}
.step-flow::before{content:"";position:absolute;top:22px;left:8%;right:8%;height:2px;background:linear-gradient(90deg,var(--grad-gold),var(--grad-teal));opacity:.15}
.step-node{flex:1;min-width:180px;text-align:center;position:relative;z-index:1}
.step-node .step-circle{width:44px;height:44px;background:var(--grad-gold);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;margin:0 auto 12px;box-shadow:0 6px 16px rgba(245,158,11,.2);position:relative}
.step-node .step-circle::after{content:"";position:absolute;inset:-3px;border:2px solid rgba(245,158,11,.12);border-radius:50%}
.step-node h4{font-size:14px;font-weight:700;margin-bottom:4px;color:var(--ink)}
.step-node p{font-size:12px;color:var(--muted)}
@media(max-width:768px){.step-flow{flex-direction:column}.step-flow::before{display:none}}

/* === Icon Check List === */
.check-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.check-grid li{list-style:none;display:flex;align-items:flex-start;gap:10px;padding:10px 0}
.check-grid li .chk{width:20px;height:20px;border-radius:50%;background:var(--grad-emerald);display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700;flex-shrink:0;margin-top:2px}
.check-grid li .txt{font-size:14px;color:var(--body);line-height:1.6}
@media(max-width:480px){.check-grid{grid-template-columns:1fr}}

/* === Tag Cloud === */
.tag-cloud{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.tag-item,.tag-chip{padding:8px 16px;border-radius:30px;font-size:13px;font-weight:600;background:#fff;border:1px solid var(--line);color:var(--body);transition:.2s;cursor:pointer}
.tag-item:hover,.tag-chip:hover{background:var(--grad-gold);color:#fff;border-color:transparent;box-shadow:0 4px 12px rgba(245,158,11,.2)}
.tag-item.on,.tag-chip.on{background:var(--grad-gold);color:#fff;border-color:transparent}

/* === Glass Cards (dark sections) === */
.glass{background:rgba(255,255,255,.05);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.08);border-radius:var(--r);padding:26px;transition:.3s}
.glass:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.15)}
.glass h3{font-size:16px;font-weight:700;color:#fff;margin-bottom:6px}
.glass p{font-size:13px;color:rgba(255,255,255,.5);line-height:1.7}
.glass .ic{width:40px;height:40px;border-radius:10px;background:rgba(245,158,11,.15);display:flex;align-items:center;justify-content:center;margin-bottom:12px;font-size:18px}

/* === CTA Strip === */
.cta-strip{background:var(--grad-dark);border-radius:var(--r-lg);padding:42px 36px;text-align:center;color:#fff;position:relative;overflow:hidden}
.cta-strip::before{content:"";position:absolute;top:-50%;right:-10%;width:360px;height:360px;background:radial-gradient(circle,rgba(245,158,11,.12),transparent 70%);border-radius:50%}
.cta-strip h2{font-size:26px;font-weight:800;margin-bottom:10px;position:relative}
.cta-strip p{font-size:15px;color:rgba(255,255,255,.6);margin-bottom:22px;position:relative}

/* === Divider === */
.divider{height:3px;background:linear-gradient(90deg,transparent,var(--gold),var(--teal),transparent);margin:0}