
:root{
  --bg:#070710;
  --card:#101024;
  --text:#f3f4f6;
  --muted:rgba(243,244,246,.72);
  --p:#6b2dff;
  --p2:#a855f7;
  --b:rgba(255,255,255,.10);
  --ok:#22c55e;
  --warn:#f59e0b;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial}
a{color:inherit;text-decoration:none}
.wrap{max-width:1160px;margin:0 auto;padding:0 16px}
.bg{position:fixed;inset:0;z-index:-3}
.bg__glow{position:absolute;width:900px;height:900px;filter:blur(120px);opacity:.65}
.bg__glow--a{left:-260px;top:-280px;background:radial-gradient(circle,rgba(107,45,255,.55),transparent 60%);animation:floatA 10s ease-in-out infinite alternate}
.bg__glow--b{right:-260px;bottom:-280px;background:radial-gradient(circle,rgba(168,85,247,.38),transparent 62%);animation:floatB 12s ease-in-out infinite alternate}
@keyframes floatA{from{transform:translate(0,0)}to{transform:translate(90px,60px)}}
@keyframes floatB{from{transform:translate(0,0)}to{transform:translate(-90px,-60px)}}
.bg__noise{position:absolute;inset:0;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E")}
.nav{position:sticky;top:0;z-index:20;background:rgba(7,7,16,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--b)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:.4px}
.brand__mark{width:34px;height:34px;border-radius:12px;background:linear-gradient(180deg,var(--p),#2b0a64);box-shadow:0 18px 60px rgba(107,45,255,.22)}
.brand__text em{font-style:normal;color:var(--p2)}
.nav__links{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.nav__cta{padding:10px 12px;border-radius:12px;border:1px solid var(--b);background:linear-gradient(180deg,var(--p),#4c1d95);font-weight:800}
.flash{margin:14px 0;border:1px solid var(--b);border-radius:14px;padding:12px 14px;background:rgba(255,255,255,.02)}
.flash--ok{border-color:rgba(34,197,94,.45)}
.flash--err{border-color:rgba(239,68,68,.45)}
.hero{padding:44px 0}
.hero__grid{display:grid;gap:18px;align-items:center}
@media(min-width:980px){.hero__grid{grid-template-columns:1.1fr .9fr}}
.pill{display:inline-flex;gap:8px;align-items:center;padding:8px 10px;border-radius:999px;border:1px solid var(--b);color:var(--muted);font-size:12px;background:rgba(255,255,255,.02)}
.hero__title{margin:12px 0 0;font-size:42px;line-height:1.05;letter-spacing:1.2px}
@media(min-width:980px){.hero__title{font-size:56px}}
.hero__desc{margin:14px 0 0;color:var(--muted);line-height:1.7;max-width:70ch}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 16px;border-radius:14px;border:1px solid var(--b);background:linear-gradient(180deg,var(--p),#4c1d95);color:white;font-weight:900}
.btn--ghost{background:transparent}
.section{padding:26px 0}
.section__head h2{margin:0 0 6px}
.section__head p{margin:0;color:var(--muted)}
.grid3{display:grid;gap:14px;margin-top:14px}
@media(min-width:980px){.grid3{grid-template-columns:repeat(3,1fr)}}
.grid2{display:grid;gap:14px}
@media(min-width:980px){.grid2{grid-template-columns:repeat(2,1fr)}}
.card{background:linear-gradient(180deg,var(--card),#0c0c16);border:1px solid var(--b);border-radius:18px;padding:18px;box-shadow:0 18px 70px rgba(0,0,0,.35)}
.card__tag{display:inline-block;padding:6px 10px;border-radius:999px;border:1px solid var(--b);color:var(--muted);font-size:12px;background:rgba(255,255,255,.02);margin-bottom:10px}
.muted{color:var(--muted);line-height:1.6}
.price{font-size:22px;font-weight:1000;margin:10px 0 0}
.notice{margin:12px 0;border:1px solid var(--b);border-radius:14px;padding:12px 14px;background:rgba(255,255,255,.02);color:var(--muted)}
.stats{display:grid;gap:10px;margin-top:16px}
@media(min-width:680px){.stats{grid-template-columns:repeat(3,1fr)}}
.stat{border:1px solid var(--b);border-radius:16px;padding:12px 14px;background:rgba(255,255,255,.02)}
.stat b{display:block}
.stat span{display:block;color:var(--muted);margin-top:4px;font-size:13px}
.hero__frame{position:relative}
.frame{border-radius:18px;border:1px solid rgba(107,45,255,.35);background:linear-gradient(180deg,rgba(107,45,255,.16),rgba(255,255,255,.02));overflow:hidden;box-shadow:0 30px 120px rgba(107,45,255,.20)}
.frame__top{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.08)}
.dot{width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.18)}
.frame__tag{margin-left:auto;color:var(--muted);font-size:12px}
.frame__body{padding:14px}
.kpi{display:grid;gap:10px}
.kpi__item{border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:12px;background:rgba(0,0,0,.18)}
.kpi__label{color:var(--muted);font-size:12px}
.kpi__val{font-weight:900;margin-top:4px}
.timeline{margin-top:12px;display:grid;gap:8px}
.tline{display:flex;align-items:center;gap:10px;color:var(--muted)}
.tline__bar{width:18px;height:18px;border-radius:6px;border:1px solid rgba(255,255,255,.12);background:rgba(107,45,255,.20)}
.section--split{margin-top:18px}
.split{display:grid;gap:14px}
@media(min-width:980px){.split{grid-template-columns:1.1fr .9fr}}
.badge-list{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:flex-start}
.badge{padding:10px 12px;border-radius:14px;border:1px solid var(--b);background:rgba(255,255,255,.02);color:var(--muted)}
label{display:block;color:var(--muted);font-size:12px;margin-top:6px}
input,textarea,select{width:100%;padding:12px 12px;border-radius:14px;border:1px solid var(--b);background:rgba(255,255,255,.02);color:var(--text);outline:none;margin:8px 0 12px}
.link{color:var(--p2);font-weight:800}
.page-title{margin:18px 0 10px;font-size:28px;letter-spacing:1px;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;font-weight:900}
.topline{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:12px 0}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row input{flex:1 1 220px;margin:0}
.row .btn{margin:0}
.rowitem{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid rgba(255,255,255,.08);padding-top:12px;margin-top:12px}
.chip{padding:6px 10px;border-radius:999px;border:1px solid var(--b);font-size:12px}
.chip--ok{border-color:rgba(34,197,94,.45);color:var(--ok)}
.chip--warn{border-color:rgba(245,158,11,.45);color:var(--warn)}
.table{display:grid;gap:8px}
.tr{display:grid;grid-template-columns:70px 110px 1fr 120px 90px;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06);color:var(--muted)}
.th{color:var(--text);font-weight:900}
.footer{border-top:1px solid var(--b);margin-top:34px}
.footer__inner{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:16px 0;color:var(--muted)}
/* Glitch (subtle) */
.glitch{position:relative;display:inline-block;color:var(--text)}
.glitch::before,.glitch::after{
  content:attr(data-text);
  position:absolute;left:0;top:0;width:100%;overflow:hidden;opacity:.5
}
.glitch::before{transform:translate(1px,0);color:#ff00ff;clip-path:inset(0 0 55% 0);animation:g1 2.6s infinite}
.glitch::after{transform:translate(-1px,0);color:#00ffff;clip-path:inset(45% 0 0 0);animation:g2 2.3s infinite}
@keyframes g1{0%{clip-path:inset(0 0 58% 0)}50%{clip-path:inset(0 0 42% 0)}100%{clip-path:inset(0 0 62% 0)}}
@keyframes g2{0%{clip-path:inset(52% 0 0 0)}50%{clip-path:inset(38% 0 0 0)}100%{clip-path:inset(56% 0 0 0)}}

.card__bullets{margin-top:12px;color:var(--muted);line-height:1.8}
.reveal{opacity:1}
