/* ==========================================================================
   VPNDN — components.css
   1. hero core (status bar / copy / cube stage / text wall)
   2. float CTA        3. tabs           4. toc-tabs
   5. FAQ              6. plan cards     7. line table
   8. platform cards   9. post cards     10. callout / badges
   11. promo block     12. prose         13. misc blocks
   14. design-preview demo classes
   ========================================================================== */

/* ---------------------------------------------------------- 1. hero core */
.screen{
  position:relative;min-height:100svh;max-width:100%;overflow:clip;
  display:grid;grid-template-rows:auto auto auto minmax(300px,1fr) auto;
  background:linear-gradient(180deg,var(--bg-top) 0%,var(--bg-bottom) 100%);
}
.screen::before{
  content:"";position:absolute;left:50%;top:44%;
  width:min(1100px,92vw);height:600px;transform:translateX(-50%);
  border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--accent) 6%,transparent) 0%,transparent 72%);
}
.notice,.copy,.stage,.wall{position:relative;z-index:1}

/* signature 1: full-width status bar */
.notice{
  min-height:34px;height:34px;display:flex;align-items:center;justify-content:center;
  gap:12px;padding:0 16px;
  background:var(--accent);color:var(--ink);
  font-size:13.5px;font-weight:500;letter-spacing:.01em;
}
.notice a{
  font-weight:600;text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;display:inline-flex;align-items:center;gap:5px;
}
.notice a svg{width:14px;height:14px;flex:none}

/* copy column */
.copy{display:flex;flex-direction:column;align-items:center;text-align:center;padding:20px 24px 6px}
.kicker{
  display:inline-flex;align-items:center;gap:8px;height:26px;padding:0 12px 0 10px;
  border-radius:var(--r-pill);background:var(--panel);
  box-shadow:inset 0 0 0 1px var(--border),var(--shadow-lift);
  font-size:12.5px;font-weight:600;color:var(--muted);letter-spacing:.02em;
}
.kdot{
  width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);
}
/* signature 3: two-tone H1 */
.h1{
  margin:14px 0 0;max-width:960px;
  font:800 64px/1 var(--font-display);letter-spacing:-.03em;color:var(--ink);
}
.h1-hi{color:var(--accent-dark)}
.sub{margin:14px 0 0;max-width:640px;font-size:17px;line-height:1.5;color:var(--muted)}
.sub strong{color:var(--ink)}
/* signature 4: primary pill + outlined secondary */
.ctas{display:flex;align-items:center;gap:12px;margin-top:20px}
.trust{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;
  margin-top:16px;font-size:13.5px;color:var(--muted);
}
.trust span{display:inline-flex;align-items:center;gap:6px}
.trust svg{width:14px;height:14px;color:var(--accent-dark);flex:none}

/* furniture rows: platforms + flags */
.furn{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:8px 24px;font-size:13px;font-weight:500;color:var(--muted);
}
.furn-platforms{margin-top:18px}
.furn-flags{margin-top:8px}
.furn-label{
  font:500 11px/1 var(--font-mono);letter-spacing:.08em;color:var(--muted-2);
  padding-right:12px;border-right:1px solid var(--border);
}
.chip{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.chip svg{flex:none;display:block}
.pi{color:var(--muted)}
.flag{display:block;flex:none;border-radius:3px;box-shadow:var(--shadow-lift)}
.fw{fill:var(--flag-white)}
.fr{fill:var(--flag-red)}
.fb{fill:var(--flag-blue)}
.fg{fill:var(--flag-green)}
.fo{fill:none;stroke:var(--ink-veil);stroke-width:1}

/* cube stage */
.stage{
  position:relative;overflow:hidden;min-height:300px;
  -webkit-mask-image:linear-gradient(to bottom,var(--ink) 0%,var(--ink) 80%,transparent 100%);
  mask-image:linear-gradient(to bottom,var(--ink) 0%,var(--ink) 80%,transparent 100%);
}
.cube-halo{
  position:absolute;left:50%;top:40px;width:760px;height:460px;margin-left:-380px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 58%,color-mix(in srgb,var(--accent) 12%,transparent) 0%,transparent 66%);
}
.cube-shadow{
  position:absolute;left:50%;top:330px;width:600px;height:130px;margin-left:-300px;
  border-radius:50%;pointer-events:none;filter:blur(28px);
  background:color-mix(in srgb,var(--accent) 12%,transparent);
}
.scene{
  position:absolute;left:50%;top:76px;width:440px;height:200px;margin-left:-220px;
  perspective:1800px;perspective-origin:50% 20%;
}
.cube{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(-22deg) rotateY(-24deg)}
.face{position:absolute;top:0;left:0;overflow:hidden}
.face-front{
  width:440px;height:200px;transform:translateZ(150px);
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 86%,var(--white)) 0%,color-mix(in srgb,var(--accent) 92%,transparent) 28%,color-mix(in srgb,var(--accent-deep) 94%,transparent) 100%);
  box-shadow:inset 0 0 0 1px var(--hl-soft),inset 0 1px 0 var(--hl);
}
.face-top{
  width:440px;height:300px;transform-origin:50% 0;transform:translateZ(-150px) rotateX(90deg);
  background:linear-gradient(160deg,var(--white) 0%,var(--white) 38%,var(--mint) 100%);
  box-shadow:inset 0 0 0 1px var(--hl),0 0 60px color-mix(in srgb,var(--accent) 30%,transparent);
}
.face-top::after{
  content:"";position:absolute;inset:-30% -20%;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at 42% 52%,var(--white) 0%,transparent 58%);
}
.face-right{
  left:440px;width:300px;height:200px;transform-origin:0 50%;
  transform:translateZ(150px) rotateY(90deg);
  background:linear-gradient(90deg,var(--accent-deep) 0%,var(--accent-deep) 62%,color-mix(in srgb,var(--accent-deep) 55%,var(--lime)) 90%,var(--lime) 100%);
  box-shadow:inset 0 0 0 1px var(--hl-soft),inset -2px 0 0 var(--lime);
}
/* top face: 2x3 exit grid */
.exits{
  position:relative;z-index:1;height:100%;
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  align-content:end;padding:0 20px 44px;
}
.exit{
  display:flex;align-items:center;gap:10px;height:44px;padding:0 16px;
  border-radius:var(--r-pill);white-space:nowrap;
  background:color-mix(in srgb,var(--accent) 10%,var(--white));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 22%,transparent);
  font:600 22px/1 var(--font-mono);color:var(--accent-dark);letter-spacing:-.01em;
}
.exit i{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
/* front face: three line types */
.lines{
  position:relative;z-index:1;width:324px;
  display:flex;flex-direction:column;gap:6px;padding:22px 0 0 24px;
}
.line{
  display:flex;align-items:center;gap:12px;height:30px;padding:0 14px 0 12px;
  border-radius:var(--r-pill);white-space:nowrap;
  background:color-mix(in srgb,var(--white) 64%,transparent);
  box-shadow:inset 0 0 0 1px var(--hl-soft);
  font-size:14px;font-weight:600;color:var(--ink);
}
.line i{
  width:8px;height:8px;border-radius:50%;background:var(--accent-dark);flex:none;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--lime) 70%,transparent);
}
.line .tag{margin-left:auto;font:500 11.5px/1 var(--font-mono);color:var(--accent-dark);letter-spacing:.02em}
/* right face: four fact pills */
.facts{position:relative;z-index:1;display:flex;flex-direction:column;gap:5px;padding:10px 14px 0 90px}
.fact{
  display:flex;align-items:center;gap:8px;height:28px;padding:0 12px;
  border-radius:var(--r-pill);white-space:nowrap;letter-spacing:-.01em;
  background:color-mix(in srgb,var(--accent-dark) 72%,transparent);
  box-shadow:inset 0 0 0 1px var(--hl-soft);
  font:600 15px/1 var(--font-mono);color:var(--white);
}
.fact i{width:6px;height:6px;border-radius:50%;background:var(--lime);flex:none}
/* signature 5: blurred light spots */
.blob{
  position:absolute;border-radius:50%;pointer-events:none;opacity:.7;
  background:radial-gradient(circle,var(--lime) 0%,var(--accent) 52%,transparent 74%);
  filter:blur(14px);animation:breathe 7s ease-in-out infinite;
}
.b1{width:54px;height:54px;left:330px;top:26px;animation-delay:-1s}
.b2{width:38px;height:38px;left:250px;top:148px;animation-delay:-3s;animation-duration:8.5s}
.b3{width:62px;height:62px;left:378px;top:116px;animation-delay:-5s;animation-duration:9.5s}
.b4{width:46px;height:46px;left:84px;top:92px;animation-delay:-2s;filter:blur(12px)}
.b5{width:40px;height:40px;left:96px;top:118px;animation-delay:-4s;animation-duration:8s}
/* floating status pills */
.float-pill{
  position:absolute;display:inline-flex;align-items:center;gap:9px;
  height:40px;padding:0 16px 0 14px;border-radius:var(--r-pill);white-space:nowrap;
  background:var(--panel);
  box-shadow:inset 0 0 0 1px var(--hl),0 0 0 1px color-mix(in srgb,var(--border) 70%,transparent),0 18px 40px -16px color-mix(in srgb,var(--accent) 34%,transparent),var(--shadow-lift);
  font-size:13px;font-weight:600;color:var(--ink);
  animation:hover-y 7s ease-in-out infinite;
}
.float-pill svg{width:14px;height:14px;color:var(--accent-dark);flex:none}
.pill-left{left:calc(50% - 460px);top:52px}
.pill-right{right:calc(50% - 470px);top:24px;animation-delay:-3.5s}
.sdot{
  width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);
}
.toggle{
  position:relative;width:30px;height:18px;border-radius:var(--r-pill);
  background:var(--accent);flex:none;box-shadow:inset 0 1px 2px rgba(18,23,20,.12);
}
.toggle i{position:absolute;top:2px;right:2px;width:14px;height:14px;border-radius:50%;background:var(--white);box-shadow:var(--shadow-lift)}
/* drifting green dust */
.dust{
  position:absolute;width:3px;height:3px;border-radius:50%;background:var(--accent);
  opacity:.5;z-index:1;pointer-events:none;animation:drift 16s ease-in-out infinite alternate;
}
.d1{left:7%;top:36%;animation-delay:-2s}
.d2{left:13%;top:58%;width:2px;height:2px;animation-delay:-7s;animation-duration:19s}
.d3{left:22%;top:80%;animation-delay:-4s}
.d4{left:79%;top:42%;width:2px;height:2px;animation-delay:-9s;animation-duration:21s}
.d5{left:88%;top:62%;animation-delay:-1s}
.d6{left:93%;top:30%;width:2px;height:2px;animation-delay:-12s;animation-duration:18s}
.d7{left:70%;top:86%;animation-delay:-6s}
/* signature 6: two-row monochrome icon/text wall */
.wall{padding:10px 24px 12px;display:flex;flex-direction:column;align-items:center;gap:8px}
.wall-row{
  display:flex;align-items:center;flex-wrap:wrap;justify-content:center;
  gap:6px 42px;color:var(--muted-2);font-size:13px;font-weight:600;
  letter-spacing:.01em;line-height:16px;
}
.wall-row span{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.wall-row svg{display:block;flex:none;width:15px;height:15px}

@keyframes breathe{0%,100%{opacity:.45}50%{opacity:.95}}
@keyframes hover-y{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes drift{0%{transform:translate(0,0)}100%{transform:translate(16px,-20px)}}

/* ---------------------------------------------------------- 2. float CTA */
.float-cta{
  position:fixed;right:28px;bottom:28px;z-index:40;
  display:inline-flex;align-items:center;gap:8px;
  height:44px;padding:0 18px;border-radius:var(--r-pill);
  background:var(--accent);color:var(--ink);text-decoration:none;
  font-size:14px;font-weight:700;
  box-shadow:inset 0 1px 0 var(--hl-soft),0 16px 34px -14px color-mix(in srgb,var(--accent) 70%,transparent);
}
.float-cta svg{width:16px;height:16px;flex:none}
.float-cta:hover{background:var(--accent-deep);color:var(--white)}
body:has(.float-cta)::after{
  content:"";display:block;
  height:calc(88px + env(safe-area-inset-bottom,0px));
}

/* ---------------------------------------------------------- 3. tabs */
.tabs{display:flex;flex-direction:column;gap:20px;min-width:0}
.tabs-bar{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.tabs-bar--scroll{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
.tab{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:40px;padding:0 18px;border-radius:var(--r-pill);white-space:nowrap;
  background:var(--panel);color:var(--muted);cursor:pointer;
  font:600 13.5px/1 var(--font-body);
  box-shadow:inset 0 0 0 1px var(--border),var(--shadow-lift);
  transition:background .2s,color .2s,box-shadow .2s;
}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{
  background:var(--accent);color:var(--ink);
  box-shadow:inset 0 1px 0 var(--hl-soft),0 12px 26px -14px color-mix(in srgb,var(--accent) 70%,transparent);
}
.tabs-panels{min-width:0}
.tabs-panel[hidden]{display:none}
.tabs-panel:focus{outline:none}

/* ---------------------------------------------------------- 4. toc-tabs */
.toc-tabs{
  position:sticky;top:0;z-index:20;
  display:flex;gap:8px;align-items:center;
  max-width:var(--wrap);margin:0 auto 22px;
  padding:10px var(--gutter);
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(8px);
  box-shadow:0 1px 0 var(--border);
}
.toc-tabs::-webkit-scrollbar{display:none}
.toc-tabs a{
  flex:none;display:inline-flex;align-items:center;min-height:36px;padding:0 15px;
  border-radius:var(--r-pill);text-decoration:none;
  background:var(--panel);color:var(--muted);
  font-size:13px;font-weight:600;
  box-shadow:inset 0 0 0 1px var(--border);
  transition:background .2s,color .2s;
}
.toc-tabs a:hover{color:var(--ink)}
.toc-tabs a.is-active{
  background:var(--accent);color:var(--ink);
  box-shadow:inset 0 1px 0 var(--hl-soft);
}

/* ---------------------------------------------------------- 5. FAQ */
.faq{display:flex;flex-direction:column;gap:10px;min-width:0}
.faq-item{
  background:var(--panel);border-radius:var(--r-md);overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--border),var(--shadow-lift);
}
.faq-item summary{
  display:flex;align-items:center;gap:12px;min-height:52px;padding:14px 18px;
  cursor:pointer;list-style:none;
  font:600 14.5px/1.45 var(--font-display);color:var(--ink);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"";width:9px;height:9px;margin-left:auto;flex:none;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg);transition:transform .25s;
}
.faq-item[open] summary{color:var(--accent-dark)}
.faq-item[open] summary::after{transform:rotate(-135deg)}
.faq-body{padding:0 18px 18px;font-size:14px;line-height:1.75;color:var(--muted)}

/* ---------------------------------------------------------- 6. plan cards */
.plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.plan-card{
  position:relative;display:flex;flex-direction:column;gap:14px;min-width:0;
  padding:30px 24px 24px;background:var(--panel);border-radius:var(--r-lg);
  box-shadow:inset 0 0 0 1px var(--border),var(--shadow-tint);
}
.plan-card.is-current{box-shadow:inset 0 0 0 2px var(--accent),var(--shadow-panel)}
.plan-badge{
  position:absolute;top:-11px;left:24px;
  display:inline-flex;align-items:center;height:24px;padding:0 12px;
  border-radius:var(--r-pill);background:var(--accent);color:var(--ink);
  font:700 11.5px/1 var(--font-mono);letter-spacing:.04em;
}
.plan-name{font:700 16px/1.2 var(--font-display);letter-spacing:-.01em}
.plan-price{display:flex;align-items:baseline;gap:6px;font-family:var(--font-mono)}
.plan-price b{font-size:38px;font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.plan-price span{font-size:12.5px;color:var(--muted)}
.plan-quota{font:500 12.5px/1.5 var(--font-mono);color:var(--accent-dark)}
.plan-list{display:flex;flex-direction:column;gap:8px;font-size:13.5px;color:var(--muted)}
.plan-list li{display:flex;gap:9px;align-items:flex-start}
.plan-list svg{width:15px;height:15px;flex:none;color:var(--accent-dark);margin-top:2px}
.plan-card .btn{width:100%;flex-shrink:0;white-space:nowrap}
.plan-note{
  margin-top:16px;padding:16px 18px;border-radius:var(--r-md);
  background:color-mix(in srgb,var(--accent) 7%,var(--white));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 20%,transparent);
  font-size:13.5px;line-height:1.7;color:var(--muted);
}
.plan-note strong{color:var(--ink)}

/* ---------------------------------------------------------- 7. line table */
.table-scroll{
  max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border-radius:var(--r-lg);background:var(--panel);
  box-shadow:inset 0 0 0 1px var(--border),var(--shadow-tint);
}
.line-table,.data-table{width:100%;border-collapse:collapse;font-size:13.5px}
.line-table{min-width:640px}
.data-table{min-width:520px}
.line-table th,.line-table td,
.data-table th,.data-table td{
  padding:12px 16px;text-align:left;border-bottom:1px solid var(--border);
  word-break:keep-all;
}
.line-table thead th,.data-table thead th{
  white-space:nowrap;background:var(--panel-2);color:var(--muted);
  font:600 11.5px/1.4 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;
}
.line-table tbody tr:last-child td,
.data-table tbody tr:last-child td{border-bottom:0}
.region-row td,.region-row th{
  background:color-mix(in srgb,var(--accent) 6%,var(--white));
  color:var(--accent-dark);
  font:600 12px/1.4 var(--font-mono);letter-spacing:.06em;
}
.cell-ok{color:var(--success);font-weight:600}
.cell-mid{color:var(--muted)}

/* ---------------------------------------------------------- 8. platform cards */
.plat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:14px}
.plat-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0;
  padding:20px 18px;background:var(--panel);border-radius:var(--r-lg);
  box-shadow:inset 0 0 0 1px var(--border),var(--shadow-lift);
  transition:box-shadow .25s,transform .25s;
}
.plat-card:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 36%,transparent),var(--shadow-tint)}
.plat-ico{
  width:34px;height:34px;display:grid;place-items:center;flex:none;
  border-radius:var(--r-md);color:var(--accent-dark);
  background:color-mix(in srgb,var(--accent) 10%,var(--white));
}
.plat-ico svg{width:19px;height:19px;display:block}
.plat-name{font:700 14.5px/1.2 var(--font-display)}
.plat-note{font-size:12px;line-height:1.6;color:var(--muted)}
.plat-card .btn{margin-top:2px}

/* ---------------------------------------------------------- 9. post cards */
.post-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:16px}
.post-card{
  display:flex;flex-direction:column;gap:10px;min-width:0;
  padding:22px;background:var(--panel);border-radius:var(--r-lg);
  box-shadow:inset 0 0 0 1px var(--border),var(--shadow-lift);
  text-decoration:none;transition:transform .25s,box-shadow .25s;
}
.post-card:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 32%,transparent),var(--shadow-tint)}
.post-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font:500 11.5px/1 var(--font-mono);color:var(--muted-2);letter-spacing:.04em;
}
.post-title{font:700 17px/1.4 var(--font-display);letter-spacing:-.01em;color:var(--ink)}
.post-sum{font-size:13.5px;line-height:1.65;color:var(--muted)}
.post-more{margin-top:auto;display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--accent-dark)}
.post-more svg{width:14px;height:14px}
.tag-chip{
  display:inline-flex;align-items:center;max-width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;
  height:22px;padding:0 10px;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--accent) 12%,var(--white));
  color:var(--accent-dark);font-size:11.5px;font-weight:600;
}

/* ---------------------------------------------------------- 10. callout / badges */
.callout{
  position:relative;margin:20px 0;padding:16px 18px 16px 22px;
  border-radius:var(--r-md);
  background:color-mix(in srgb,var(--accent) 7%,var(--white));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 20%,transparent);
  font-size:14px;line-height:1.75;color:var(--ink);
}
.callout::before{
  content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;
  border-radius:var(--r-pill);background:var(--accent);
}
.callout-title{
  display:block;margin-bottom:8px;
  font:700 11.5px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-dark);
}
.badge{
  display:inline-flex;align-items:center;gap:6px;max-width:100%;overflow:hidden;
  white-space:nowrap;height:24px;padding:0 11px;border-radius:var(--r-pill);
  background:var(--panel-2);color:var(--muted);
  font:600 11.5px/1 var(--font-mono);letter-spacing:.03em;
}
.badge-accent{background:color-mix(in srgb,var(--accent) 14%,var(--white));color:var(--accent-dark)}
.badge-ink{background:var(--ink);color:var(--panel)}
.fact-pill{
  display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;
  border-radius:var(--r-pill);background:var(--panel);
  box-shadow:inset 0 0 0 1px var(--border),var(--shadow-lift);
  font:600 12.5px/1 var(--font-mono);color:var(--ink);white-space:nowrap;
}
.fact-pill i{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
.stat-band{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;background:var(--border);border-radius:var(--r-lg);overflow:hidden;
}
.stat-band > div{background:var(--panel);padding:18px 20px;min-width:0}
.stat-k{font:500 11px/1.3 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.stat-v{margin-top:8px;font:700 20px/1.15 var(--font-mono);letter-spacing:-.02em;color:var(--ink)}

/* ---------------------------------------------------------- 11. promo block */
.promo-block{
  position:relative;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:18px;margin:32px 0;
  padding:24px 26px;border-radius:var(--r-lg);overflow-x:clip;
  background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 12%,var(--white)) 0%,var(--panel) 62%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 24%,transparent),var(--shadow-tint);
}
.promo-brand{display:block;font:700 11.5px/1 var(--font-mono);letter-spacing:.1em;color:var(--accent-dark);margin-bottom:8px}
.promo-title{font:800 18px/1.35 var(--font-display);letter-spacing:-.02em}
.promo-sub{margin-top:6px;font-size:13.5px;line-height:1.65;color:var(--muted)}
.promo-block .btn{flex-shrink:0;white-space:nowrap}

/* ---------------------------------------------------------- 12. prose */
.prose{font-size:15.5px;line-height:1.85;color:var(--ink);min-width:0}
.prose h2{font-size:clamp(23px,3vw,30px);margin:44px 0 14px;letter-spacing:-.025em}
.prose h3{font-size:19px;margin:28px 0 10px}
.prose p{margin:0 0 16px}
.prose ul,.prose ol{margin:0 0 18px;padding-left:1.35em}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin-bottom:8px}
.prose a{color:var(--accent-dark);text-decoration:underline;text-underline-offset:3px}
.prose code{font-size:.92em;background:var(--panel-2);padding:2px 6px;border-radius:6px}
.prose pre{
  margin:0 0 20px;padding:16px 18px;border-radius:var(--r-md);
  background:var(--panel-2);overflow-x:auto;max-width:100%;
  font-size:13px;line-height:1.7;
}
.prose pre code{background:none;padding:0;overflow-wrap:normal;word-break:normal}
.prose blockquote{margin:20px 0;padding:6px 0 6px 18px;border-left:3px solid var(--accent);color:var(--muted)}
.prose img{max-width:100%;height:auto;border-radius:var(--r-md)}
.prose > .data-table{
  display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;
  max-width:100%;min-width:0;
}

/* ---------------------------------------------------------- 13. misc blocks */
.card{
  min-width:0;padding:24px;border-radius:var(--r-lg);background:var(--panel);
  box-shadow:inset 0 0 0 1px var(--border),var(--shadow-tint);
}
.card-sm{padding:18px;border-radius:var(--r-md)}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;min-width:0}
.split > *{min-width:0}
.steps{display:flex;flex-direction:column;gap:18px;counter-reset:step}
.steps > li{position:relative;counter-increment:step;padding-left:46px;min-width:0}
.steps > li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;left:0;top:0;width:30px;height:30px;
  display:grid;place-items:center;border-radius:50%;
  background:color-mix(in srgb,var(--accent) 12%,var(--white));
  color:var(--accent-dark);font:600 11px/1 var(--font-mono);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 26%,transparent);
}
.page-head{position:relative;padding-block:56px 28px;overflow-x:clip}
.page-head::before{
  content:"";position:absolute;left:50%;top:-40px;width:min(880px,90vw);height:340px;
  transform:translateX(-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--accent) 8%,transparent) 0%,transparent 70%);
}
.page-head > *{position:relative}
.page-head h1{font-size:clamp(32px,4.8vw,52px);letter-spacing:-.03em;line-height:1.1}
.page-head .lede{margin-top:16px;max-width:64ch}
.head-facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}

/* features: index + detail panel (site signature layout) */
.feat{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:22px;align-items:start}
.feat-index{display:flex;flex-direction:column;gap:8px;min-width:0}
.feat-tab{
  display:flex;align-items:center;gap:12px;min-height:48px;padding:0 16px;
  border-radius:var(--r-pill);cursor:pointer;text-align:left;
  background:var(--panel);color:var(--ink);
  font:600 14px/1.3 var(--font-body);
  box-shadow:inset 0 0 0 1px var(--border),var(--shadow-lift);
  transition:background .2s,box-shadow .2s;
}
.feat-tab .n{font:600 12px/1 var(--font-mono);color:var(--muted-2);letter-spacing:.06em;flex:none}
.feat-tab[aria-selected="true"]{
  background:var(--accent);color:var(--ink);
  box-shadow:inset 0 1px 0 var(--hl-soft),0 14px 30px -16px color-mix(in srgb,var(--accent) 70%,transparent);
}
.feat-tab[aria-selected="true"] .n{color:var(--ink)}
.feat-panel{
  min-width:0;padding:26px 28px;border-radius:var(--r-lg);background:var(--panel);
  box-shadow:inset 0 0 0 1px var(--border),var(--shadow-panel);
}
.feat-facts{
  display:flex;flex-wrap:wrap;gap:6px 14px;
  padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--border);
  font:500 12px/1.5 var(--font-mono);letter-spacing:.02em;color:var(--accent-dark);
}
.feat-title{font:800 22px/1.25 var(--font-display);letter-spacing:-.02em;margin-bottom:10px}
.feat-body{font-size:14.5px;line-height:1.8;color:var(--muted)}
.feat-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}

/* ---------------------------------------------------------- 14. preview demo */
.pv-sec{padding-block:52px}
.pv-sec + .pv-sec{border-top:1px solid var(--border)}
.pv-k{display:block;margin-bottom:10px;font:500 11px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-dark)}
.pv-h{font:800 22px/1.25 var(--font-display);letter-spacing:-.02em;margin-bottom:8px}
.pv-lede{max-width:72ch;margin-bottom:22px;font-size:14px;line-height:1.7;color:var(--muted)}
.demo-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.demo-stack{display:flex;flex-direction:column;gap:16px}
.demo-note{font-size:12.5px;line-height:1.6;color:var(--muted-2)}
.swatch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:12px}
.swatch{min-width:0;padding:12px;border-radius:var(--r-md);background:var(--panel);box-shadow:inset 0 0 0 1px var(--border),var(--shadow-lift)}
.swatch-chip{height:52px;border-radius:var(--r-sm);box-shadow:inset 0 0 0 1px var(--ink-veil)}
.swatch-name{margin-top:10px;font:600 12px/1.35 var(--font-mono);color:var(--ink);overflow-wrap:anywhere}
.swatch-val{margin-top:4px;font:500 11px/1.35 var(--font-mono);color:var(--muted-2);overflow-wrap:anywhere}
.sw-bg{background:var(--bg)}
.sw-bg-top{background:var(--bg-top)}
.sw-bg-bottom{background:var(--bg-bottom)}
.sw-panel{background:var(--panel)}
.sw-panel-2{background:var(--panel-2)}
.sw-border{background:var(--border)}
.sw-accent{background:var(--accent)}
.sw-accent-deep{background:var(--accent-deep)}
.sw-accent-dark{background:var(--accent-dark)}
.sw-lime{background:var(--lime)}
.sw-mint{background:var(--mint)}
.sw-ink{background:var(--ink)}
.sw-muted{background:var(--muted)}
.sw-muted-2{background:var(--muted-2)}
.sw-success{background:var(--success)}
.sw-warn{background:var(--warn)}
.sw-error{background:var(--error)}
.type-row{
  display:grid;grid-template-columns:minmax(0,140px) minmax(0,1fr);
  gap:16px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--border);
}
.type-label{font:500 11px/1.5 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)}
.spec-h1{font:800 clamp(30px,4.4vw,48px)/1.08 var(--font-display);letter-spacing:-.03em}
.spec-h2{font:800 30px/1.2 var(--font-display);letter-spacing:-.025em}
.spec-h3{font:700 19px/1.35 var(--font-display)}
.spec-body{font-size:15.5px;line-height:1.7;color:var(--ink)}
.spec-mono{font:500 14px/1.6 var(--font-mono);color:var(--accent-dark)}

/* ---------------------------------------------------------- responsive */
@media (max-width:1100px){
  .pill-left{left:16px}
  .pill-right{right:16px}
}
@media (max-width:900px){
  .h1{font-size:44px}
  .scene{transform:scale(.72);transform-origin:50% 0}
  .plan-grid{grid-template-columns:minmax(0,1fr)}
  .feat{grid-template-columns:minmax(0,1fr)}
  .feat-index{flex-direction:row;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
  .feat-tab{flex:none}
}
@media (max-width:768px){
  .h1{font-size:38px}
  .type-row{grid-template-columns:minmax(0,1fr);gap:8px}
}
@media (max-width:640px){
  .h1{font-size:36px;letter-spacing:-.02em}
  .sub{font-size:15px}
  .ctas{flex-direction:column;width:100%}
  .btn{width:100%;justify-content:center}
  .btn-primary{padding:0 22px}
  .btn-badge{display:none}
  .furn-label{display:none}
  .notice{height:auto;min-height:34px;padding:6px 12px;font-size:12px;text-align:center;flex-wrap:wrap;gap:4px 10px}
  .scene{transform:scale(.6);transform-origin:50% 0}
  .float-pill{display:none}
  .float-cta{right:16px;bottom:16px;height:42px;padding:0 14px;font-size:13px}
  .wall-row{gap:6px 20px;font-size:12px}
  .post-grid,.plat-grid{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .blob,.float-pill,.dust{animation:none}
}