@font-face{font-family:"Geist";src:url("assets/geist-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("assets/inter-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("assets/geist-mono-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Sans Arabic";src:url("assets/noto-sans-arabic.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --bg:#07090d;
  --bg-2:#0b0f16;
  --text:#f4f7fa;
  --muted:#b4bec9;
  --faint:#8b95a3;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);
  --glass:rgba(255,255,255,.035);
  --glass-2:rgba(255,255,255,.055);
  --teal:#2ee6c6;
  --teal-2:#1ab89c;
  --blue:#4ea0ff;
  --violet:#7a6bff;
  --good:#3ddc97;
  --bad:#ff5c7a;
  --ink:#06231d;
  --radius:18px;
  --radius-sm:12px;
  --max:1120px;
  --font:"Inter","Geist",ui-sans-serif,system-ui,sans-serif;
  --display:"Geist","Inter",ui-sans-serif,system-ui,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --arabic:"Noto Sans Arabic","Inter",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{background:var(--bg);color:var(--text)}
body{
  font-family:var(--font);
  font-size:16px;
  line-height:1.55;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  min-height:100vh;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:var(--teal);text-decoration:none}
a:hover{color:#7ff5e0}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,.display{
  font-family:var(--display);
  font-weight:600;
  letter-spacing:-.045em;
  line-height:1.08;
  color:var(--text);
}
h1{font-size:clamp(2.4rem,5.6vw,4.35rem)}
h2{font-size:clamp(1.8rem,3.2vw,2.5rem)}
h3{font-size:1.15rem;letter-spacing:-.03em}
.urdu{font-family:var(--arabic);direction:rtl;line-height:1.8}

/* background */
.bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(900px 500px at 15% -10%, rgba(46,230,198,.12), transparent 55%),
    radial-gradient(800px 520px at 90% 0%, rgba(78,160,255,.10), transparent 58%),
    radial-gradient(900px 620px at 50% 40%, rgba(255,45,85,.08), transparent 60%),
    transparent;
}
.bg::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%);
}
.bg::after{
  content:"";position:absolute;inset:0;
  background:url("assets/noise.png") repeat;
  opacity:.035;mix-blend-mode:overlay;
}

/* nav */
.nav{
  position:sticky;top:30px;z-index:40;
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  background:rgba(7,9,13,.94);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:calc(var(--max) + 32px);
  margin:0 auto;padding:14px 20px;
  display:flex;align-items:center;gap:22px;
}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);flex:0 0 auto}
.brand:hover{color:var(--text)}
.brand img{width:32px;height:32px;border-radius:9px}
.brand .wordmark{font-family:var(--display);font-weight:600;font-size:1.05rem;letter-spacing:-.04em}
.brand .wordmark span{color:var(--teal)}
.nav-links{display:flex;align-items:center;gap:4px;margin-left:8px}
.nav-links a{
  color:var(--muted);font-size:.9rem;font-weight:500;
  padding:7px 10px;border-radius:8px;letter-spacing:-.01em;
}
.nav-links a:hover{color:var(--text);background:var(--glass-2)}
.nav-links a.active{color:var(--text);background:var(--glass-2)}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:10px}
.nav-toggle{
  display:none;width:40px;height:40px;border:1px solid var(--line-2);
  background:var(--glass);border-radius:10px;cursor:pointer;position:relative;
}
.nav-toggle span{
  position:absolute;left:11px;right:11px;height:1.5px;background:var(--text);
  border-radius:2px;transition:.2s ease;
}
.nav-toggle span:nth-child(1){top:14px}
.nav-toggle span:nth-child(2){top:19px}
.nav-toggle span:nth-child(3){top:24px}
.nav-toggle.open span:nth-child(1){top:19px;transform:rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){top:19px;transform:rotate(-45deg)}
.nav-mobile{display:none}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 18px;border-radius:999px;
  font-family:var(--display);font-weight:600;font-size:.92rem;letter-spacing:-.02em;
  border:1px solid transparent;cursor:pointer;transition:transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{
  background:linear-gradient(180deg,#5ff0d6,#2ee6c6 45%,#1ec4a8);
  color:var(--ink);
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 8px 24px rgba(46,230,198,.2);
}
.btn-primary:hover{color:var(--ink);box-shadow:0 1px 0 rgba(255,255,255,.45) inset, 0 10px 28px rgba(46,230,198,.28)}
.btn-ghost{
  background:var(--glass);
  border-color:var(--line-2);
  color:var(--text);
}
.btn-ghost:hover{background:var(--glass-2);color:var(--text);border-color:rgba(255,255,255,.22)}
.btn-sm{height:36px;padding:0 14px;font-size:.82rem}
.btn-block{width:100%}

/* layout */
.wrap{position:relative;z-index:2}
.section{padding:88px 20px}
.section-inner{max-width:var(--max);margin:0 auto}
.section-head{text-align:center;max-width:640px;margin:0 auto 48px}
.section-head p,.lead,.muted{color:var(--muted)}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  height:30px;padding:0 12px;border-radius:999px;
  border:1px solid var(--line-2);background:var(--glass);
  color:var(--muted);font-size:.75rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;
  margin-bottom:18px;
}
.eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--teal)}

/* hero */
.hero{padding:72px 20px 40px;max-width:calc(var(--max) + 32px);margin:0 auto}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero h1{margin:0 0 18px}
.hero .lead{font-size:1.12rem;max-width:36rem;margin-bottom:12px}
.hero .urdu{color:var(--muted);margin-bottom:26px;font-size:1rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:28px}
.hero-meta{display:flex;flex-wrap:wrap;gap:18px 28px;padding-top:8px}
.hero-meta div{min-width:7rem}
.hero-meta b{display:block;font-family:var(--display);font-size:1.35rem;letter-spacing:-.04em;font-weight:600}
.hero-meta span{color:var(--faint);font-size:.8rem}

/* dashboard mock */
.mock{
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  border:1px solid var(--line-2);
  border-radius:20px;
  box-shadow:0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04) inset;
  overflow:hidden;
}
.mock::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;z-index:2;
  background:linear-gradient(135deg, rgba(255,255,255,.18), transparent 28%, transparent 72%, rgba(46,230,198,.12));
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;-webkit-mask-composite:xor;padding:1px;
}
.mock-chrome{
  display:flex;align-items:center;gap:8px;
  padding:12px 14px;border-bottom:1px solid var(--line);
  background:rgba(0,0,0,.25);
}
.mock-dots{display:flex;gap:6px}
.mock-dots i{width:9px;height:9px;border-radius:50%;background:#2a313a}
.mock-dots i:nth-child(1){background:#ff6b6b}
.mock-dots i:nth-child(2){background:#f5c15c}
.mock-dots i:nth-child(3){background:#3ddc97}
.mock-chrome .ttl{margin-left:8px;font-size:.78rem;font-weight:500;color:var(--muted)}
.mock-live{
  margin-left:auto;display:flex;align-items:center;gap:6px;
  font-size:.72rem;color:var(--good);font-weight:500;
}
.mock-live i{width:6px;height:6px;border-radius:50%;background:var(--good)}
.mock-body{display:grid;grid-template-columns:132px 1fr;min-height:360px}
.mock-side{border-right:1px solid var(--line);padding:12px 8px;background:rgba(0,0,0,.18);display:flex;flex-direction:column;gap:4px}
.mock-side span{
  display:block;padding:8px 10px;border-radius:8px;font-size:.78rem;color:var(--faint);font-weight:500;
}
.mock-side span.on{background:var(--glass-2);color:var(--text)}
.mock-main{padding:14px 14px 10px;display:flex;flex-direction:column;gap:12px}
.mock-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mock-kpis div{
  background:var(--glass);border:1px solid var(--line);border-radius:12px;padding:10px 12px;
}
.mock-kpis span{display:block;font-size:.7rem;color:var(--faint);margin-bottom:2px}
.mock-kpis b{font-family:var(--display);font-size:1.02rem;letter-spacing:-.03em;font-weight:600}
.mock-chart{height:168px;border:1px solid var(--line);border-radius:12px;background:#080b10;overflow:hidden}
.mock-chart canvas{width:100%;height:100%;display:block}
.mock-table{width:100%;border-collapse:collapse;font-size:.75rem}
.mock-table th{text-align:left;color:var(--faint);font-weight:500;padding:0 6px 6px;font-size:.68rem}
.mock-table td{padding:6px;color:var(--muted);border-top:1px solid var(--line)}
.mock-table td:first-child{color:var(--text);font-weight:500}
.mock-table .up{color:var(--good)} .mock-table .dn{color:var(--bad)}
.mock-note{font-size:.68rem;color:var(--faint);text-align:right}

/* ticker */
.ticker-wrap{position:relative;z-index:2;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.02);overflow:hidden}
.ticker-label{
  position:absolute;left:0;top:0;bottom:0;z-index:2;display:flex;align-items:center;
  padding:0 16px 0 20px;
  background:linear-gradient(90deg, var(--bg) 70%, transparent);
  font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:500;
}
.ticker{display:flex;gap:28px;padding:12px 0 12px 180px;width:max-content;animation:ticker 36s linear infinite}
.ticker span{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--muted);font-size:.85rem;font-weight:500;white-space:nowrap;
}
.ticker b{width:7px;height:7px;border-radius:50%;background:var(--teal);opacity:.7}
@keyframes ticker{to{transform:translateX(-50%)}}

/* cards / grids */
.grid{display:grid;gap:16px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.card{
  background:var(--glass);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px 22px 20px;
  transition:transform .25s ease, border-color .25s ease, background .25s ease;
}
.card:hover{transform:translateY(-3px);border-color:var(--line-2);background:var(--glass-2)}
.card .ico{
  width:40px;height:40px;border-radius:11px;margin-bottom:16px;
  display:grid;place-items:center;
  background:linear-gradient(135deg, rgba(46,230,198,.16), rgba(78,160,255,.12));
  border:1px solid var(--line-2);
  color:var(--teal);
}
.card h3{margin-bottom:8px}
.card p{color:var(--muted);font-size:.95rem}

/* steps */
.steps{display:grid;gap:14px;max-width:760px;margin:0 auto}
.step{
  display:grid;grid-template-columns:48px 1fr;gap:16px;align-items:start;
  background:var(--glass);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;
  transition:transform .25s ease, border-color .25s ease;
}
.step:hover{transform:translateY(-2px);border-color:var(--line-2)}
.step .n{
  width:40px;height:40px;border-radius:12px;
  display:grid;place-items:center;
  background:linear-gradient(180deg,#5ff0d6,#1ec4a8);
  color:var(--ink);font-family:var(--display);font-weight:650;letter-spacing:-.04em;
}
.step p{color:var(--muted);margin-top:4px}

/* pricing card */
.pricing-wrap{display:flex;justify-content:center}
.price-card{
  position:relative;width:100%;max-width:400px;
  background:rgba(12,16,23,.92);
  border-radius:22px;padding:32px 28px 26px;
  isolation:isolate;
}
@property --angle{syntax:"<angle>";inherits:false;initial-value:0deg}
.price-card::before{
  content:"";position:absolute;inset:-1px;border-radius:23px;z-index:-1;padding:1px;
  background:conic-gradient(from var(--angle), #2ee6c6, #4ea0ff, #7a6bff, #2ee6c6);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:spinBorder 8s linear infinite;
}
@keyframes spinBorder{to{--angle:360deg}}
.price-card h3{color:var(--muted);font-size:.9rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px}
.price-card .amt{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.price-card .amt strong{font-family:var(--display);font-size:3.4rem;letter-spacing:-.06em;font-weight:600}
.price-card .amt span{color:var(--teal);font-weight:600}
.price-card .amt small{color:var(--muted);font-size:1rem}
.price-card ul{list-style:none;margin:22px 0 24px}
.price-card li{
  position:relative;padding:8px 0 8px 22px;color:var(--muted);
  border-bottom:1px solid var(--line);font-size:.95rem;
}
.price-card li:last-child{border-bottom:0}
.price-card li::before{content:"";position:absolute;left:0;top:16px;width:8px;height:8px;border-radius:50%;background:var(--teal)}

/* pay */
#pay{margin-top:64px}
.pay-card{
  max-width:520px;margin:0 auto 20px;
  background:var(--glass);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 22px 22px;text-align:center;
}
.pay-card .pay-amt{color:var(--text);margin-bottom:16px;font-weight:500}
.pay-card .pay-amt b{color:var(--teal)}
.pay-qr{width:200px;height:200px;margin:0 auto 16px;background:#fff;padding:10px;border-radius:16px}
.pay-address{
  display:flex;align-items:center;gap:8px;
  width:100%;background:#000;border:1px solid var(--line-2);
  border-radius:12px;padding:8px 8px 8px 12px;margin-bottom:14px;
}
.pay-address code{
  flex:1;font-family:var(--mono);color:var(--teal);font-size:.78rem;
  word-break:break-all;text-align:left;line-height:1.4;
}
.pay-address .btn{flex:0 0 auto}
.pay-warn{
  text-align:left;padding:12px 14px;border-radius:12px;
  border:1px solid rgba(255,92,122,.35);background:rgba(255,92,122,.08);
}
.pay-warn strong{display:block;color:#ff8a9c;margin-bottom:4px;font-weight:600;font-size:.85rem}
.pay-warn p{color:var(--muted);margin:0;font-size:.9rem}

/* forms */
.form{
  max-width:460px;margin:0 auto;
  display:grid;gap:12px;
  background:var(--glass);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px;
}
.form label{display:grid;gap:6px;font-size:.82rem;color:var(--muted);font-weight:500}
.form input,.form select,.form textarea{
  background:#080b10;border:1px solid var(--line-2);color:var(--text);
  padding:11px 12px;border-radius:10px;font-size:.95rem;
}
.form input:focus,.form select:focus,.form textarea:focus{
  outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(46,230,198,.15);
}
.form-note{font-size:.8rem;color:var(--faint);text-align:center}
.hidden{display:none!important}

/* faq */
.faq{max-width:740px;margin:0 auto;display:grid;gap:10px}
.faq-item{background:var(--glass);border:1px solid var(--line);border-radius:14px;padding:4px 4px}
.faq-item summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:14px 16px;font-weight:550;letter-spacing:-.02em;font-family:var(--display);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"";width:8px;height:8px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg);transition:transform .2s}
.faq-item[open] summary::after{transform:rotate(225deg)}
.faq-item p{color:var(--muted);padding:0 16px 16px;font-size:.95rem}

/* page hero / prose */
.page-hero{max-width:var(--max);margin:0 auto;padding:72px 20px 12px;text-align:center;position:relative;z-index:2}
.page-hero p{color:var(--muted);max-width:36rem;margin:12px auto 0}
.prose{max-width:720px;margin:0 auto;padding:12px 20px 80px;position:relative;z-index:2}
.prose h2{font-size:1.25rem;margin:28px 0 8px}
.prose p,.prose li{color:var(--muted);margin-bottom:10px}
.prose ul{padding-left:18px}
.disclaimer{
  max-width:800px;margin:0 auto;text-align:center;
  padding:28px 24px;border-radius:var(--radius);
  border:1px solid rgba(255,92,122,.28);background:rgba(255,92,122,.06);
}
.disclaimer h3{color:#ff8a9c;margin-bottom:8px;letter-spacing:-.03em}
.disclaimer p{color:var(--muted)}
.center{text-align:center}

/* contact cards */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:760px;margin:0 auto 36px}
.values{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* footer */
.footer{position:relative;z-index:2;border-top:1px solid var(--line);margin-top:24px;background:rgba(0,0,0,.25)}
.footer-inner{
  max-width:var(--max);margin:0 auto;padding:48px 20px 20px;
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:28px;
}
.footer h4{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:12px;font-weight:600}
.footer a{display:block;color:var(--muted);margin:6px 0;font-size:.92rem}
.footer a:hover{color:var(--text)}
.footer p{color:var(--muted);font-size:.92rem}
.footer .copy{grid-column:1/-1;border-top:1px solid var(--line);margin-top:18px;padding-top:16px;text-align:center;font-size:.78rem;color:var(--faint)}

/* reveal */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease, transform .7s ease}
.reveal.visible{opacity:1;transform:none}

@media (max-width:1100px){
  .nav-links,.nav-cta .btn{display:none}
  .nav-toggle{display:block;margin-left:auto}
  .nav-mobile.open{
    display:flex;flex-direction:column;gap:4px;padding:8px 20px 18px;
    border-top:1px solid var(--line);
  }
  .nav-mobile a{color:var(--muted);padding:10px 8px;border-radius:8px;font-weight:500}
  .nav-mobile a.active,.nav-mobile a:hover{color:var(--text);background:var(--glass-2)}
  .nav-mobile .btn{margin-top:8px;width:100%}
}
@media (max-width:900px){
  .hero{padding-top:40px}
  .hero-grid,.grid-3,.grid-2,.contact-grid,.values,.footer-inner,.mock-body{grid-template-columns:1fr}
  .mock-side{display:none}
  .section{padding:64px 20px}
  .ticker{padding-left:160px}
}
@media (max-width:520px){
  .hero-cta .btn{width:100%}
  .mock-kpis{grid-template-columns:1fr 1fr}
  .price-card .amt strong{font-size:2.7rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .ticker,.price-card::before,.btn,.card,.step{animation:none!important;transition:none!important}
}

/* ----- neon accents & flashes ----- */
:root{
  --crimson:#ff3b5c;
  --neon:#3dff8a;
  --cyan:#2ee6c6;
}
.tag{
  display:inline-flex;align-items:center;gap:6px;
  height:22px;padding:0 9px;border-radius:999px;
  font-family:var(--display);font-size:.65rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  border:1px solid rgba(46,230,198,.55);color:var(--cyan);
  background:rgba(46,230,198,.06);
  box-shadow:0 0 12px rgba(46,230,198,.28);
}
.tag-green{border-color:rgba(61,255,138,.55);color:var(--neon);background:rgba(61,255,138,.06);box-shadow:0 0 12px rgba(61,255,138,.28)}
.tag-red{border-color:rgba(255,59,92,.55);color:#ff6b84;background:rgba(255,59,92,.07);box-shadow:0 0 12px rgba(255,59,92,.28)}
.tag-violet{border-color:rgba(122,107,255,.55);color:#b7b0ff;background:rgba(122,107,255,.08);box-shadow:0 0 12px rgba(122,107,255,.25)}
.hero-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}

/* shine sweep */
.shine{position:relative}
.btn-primary{position:relative;overflow:hidden}
.shine::after, .btn-primary::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.18) 48%, rgba(255,255,255,.5) 50%, rgba(255,255,255,.18) 52%, transparent 70%);
  transform:translateX(-150%);
  animation:shineSweep 5.5s ease-in-out infinite;
}
.btn-primary::after{background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.0) 42%, rgba(255,255,255,.45) 50%, rgba(255,255,255,.0) 58%, transparent 70%)}
@keyframes shineSweep{
  0%, 62%{transform:translateX(-150%)}
  78%{transform:translateX(150%)}
  100%{transform:translateX(150%)}
}

/* compact hero so the dashboard is in the first view */
.hero{padding:28px 20px 12px}
.hero-grid{grid-template-columns:1fr;gap:22px;max-width:var(--max);margin:0 auto;align-items:center}
.hero-viz{display:flex;align-items:center;justify-content:center;gap:24px;min-height:220px}
.hero-viz .radar{width:168px;height:168px}
.hero-viz .helix{width:44px;height:168px}
.hero-viz-cap{text-align:center;margin-top:8px;font-size:.72rem;color:var(--faint);letter-spacing:.06em;text-transform:uppercase}
.hero-copy{max-width:44rem}
.hero h1{margin:0 0 14px}

/* ----- dashboard mock ----- */
.db-wrap{position:relative;z-index:2;padding:8px 20px 8px;max-width:calc(var(--max) + 32px);margin:0 auto 8px}
.db{
  display:grid;grid-template-columns:156px 1fr;gap:0;
  background:#070d16;
  border:1px solid rgba(46,230,198,.28);
  border-radius:20px;
  box-shadow:0 0 0 1px rgba(46,230,198,.08), 0 0 48px rgba(46,230,198,.08), 0 28px 80px rgba(0,0,0,.55);
  overflow:hidden;
}
.db-side{
  background:#061018;
  border-right:1px solid rgba(46,230,198,.16);
  padding:16px 12px 14px;
  display:flex;flex-direction:column;gap:4px;
}
.db-brand{display:flex;align-items:center;gap:8px;margin:0 4px 14px;color:var(--text);font-family:var(--display);font-weight:600;font-size:.85rem;letter-spacing:-.03em}
.db-brand img{width:22px;height:22px;border-radius:6px}
.db-brand span span{color:var(--cyan)}
.db-side button{
  display:flex;align-items:center;gap:8px;width:100%;
  background:transparent;border:0;color:var(--faint);
  padding:8px 8px;border-radius:8px;font-size:.75rem;font-weight:500;text-align:left;cursor:default;
}
.db-side button svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6;flex:0 0 auto}
.db-side button.on{background:rgba(46,230,198,.1);color:var(--cyan);box-shadow:0 0 12px rgba(46,230,198,.12)}
.db-side-viz{margin-top:14px;display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:8px}
.radar{width:120px;height:120px;display:block}
.radar-ring{fill:none;stroke:rgba(46,230,198,.45);stroke-width:1;transform-origin:80px 80px;animation:radarSpin 10s linear infinite}
.radar-ring.r2{stroke:rgba(61,255,138,.4);stroke-dasharray:3 6;animation-duration:16s;animation-direction:reverse}
.radar-ring.r3{stroke:rgba(255,59,92,.35);stroke-dasharray:2 5;animation-duration:22s}
.radar-core{
  fill:#07140f;stroke:var(--cyan);stroke-width:1.4;
  filter:drop-shadow(0 0 8px rgba(46,230,198,.8));
  animation:radarBreath 2.2s ease-in-out infinite;
  transform-origin:80px 80px;
}
.radar text{font-family:var(--display);font-size:16px;font-weight:600;fill:var(--text);text-anchor:middle}
.radar .radar-sub{font-size:6px;fill:var(--faint);letter-spacing:.4px}
@keyframes radarSpin{to{transform:rotate(360deg)}}
@keyframes radarBreath{50%{transform:scale(1.06)}}
.helix{width:36px;height:110px;display:block}
.helix-scan{animation:helixScan 2.8s ease-in-out infinite alternate}
@keyframes helixScan{from{transform:translateY(0)}to{transform:translateY(78px)}}

.db-main{padding:12px 12px 12px;min-width:0}
.db-top{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.db-top h3{font-size:1rem;margin:0}
.db-top .live-dot{width:7px;height:7px;border-radius:50%;background:var(--neon);box-shadow:0 0 8px var(--neon);animation:livePulse 1.6s ease-in-out infinite}
@keyframes livePulse{50%{opacity:.45}}

.db-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:8px}
.kpi{
  background:rgba(8,18,30,.92);
  border:1px solid rgba(46,230,198,.18);
  box-shadow:0 0 16px rgba(46,230,198,.06);
  border-radius:12px;padding:10px 10px 8px;
  min-width:0;
}
.kpi .row{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px}
.kpi .lbl{font-size:.65rem;color:var(--faint);letter-spacing:.04em;text-transform:uppercase;font-weight:600}
.kpi .val{font-family:var(--mono);font-size:1.05rem;font-weight:500;letter-spacing:-.02em;color:var(--text);line-height:1.2}
.kpi .val.up{color:var(--neon)}
.kpi .val.dn{color:#ff6b84}
.kpi .delta{font-family:var(--mono);font-size:.68rem;margin-top:1px}
.kpi .delta.up{color:var(--neon)} .kpi .delta.dn{color:#ff6b84}
.kpi canvas{width:100%;height:28px;display:block;margin-top:4px}

.db-row{display:grid;gap:8px;margin-bottom:8px}
.db-row-2{grid-template-columns:1.4fr .7fr .7fr}
.db-row-2b{grid-template-columns:1fr 1.35fr}
.db-row-3{grid-template-columns:1fr 1fr 1fr;margin-bottom:0}
.db-panel{
  background:rgba(8,16,28,.92);
  border:1px solid rgba(46,230,198,.16);
  box-shadow:0 0 14px rgba(46,230,198,.05);
  border-radius:12px;padding:10px 10px 8px;min-width:0;
}
.db-panel h4{
  font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);font-weight:600;margin:0 0 6px;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.chart-lg{height:168px}
.chart-md{height:150px}
.chart-sm{height:110px}
.db-panel canvas{width:100%;height:100%;display:block}
.chart-box{position:relative}
.chart-box canvas{width:100%;height:100%}

.alloc{display:grid;grid-template-columns:1fr 1fr;gap:6px;align-items:center}
.alloc canvas{width:100%;height:110px}
.alloc ul{list-style:none;font-size:.68rem;color:var(--muted)}
.alloc li{display:flex;align-items:center;gap:6px;padding:2px 0}
.alloc i{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.alloc b{margin-left:auto;font-family:var(--mono);font-weight:500;color:var(--text)}

.gauge-wrap{display:flex;flex-direction:column;align-items:center}
.gauge-wrap canvas{width:100%;height:96px}
.gauge-wrap .gval{font-family:var(--mono);font-size:1.1rem;margin-top:-6px}
.gauge-wrap .gsub{font-size:.62rem;color:var(--faint);letter-spacing:.06em;text-transform:uppercase}

.markets{display:grid;gap:4px}
.m-row{display:grid;grid-template-columns:20px 1fr auto auto 64px;gap:8px;align-items:center;padding:3px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.m-row:last-child{border-bottom:0}
.m-ico{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:.5rem;font-weight:700;color:#061018}
.m-name{font-size:.72rem;color:var(--text);font-weight:500;line-height:1.15}
.m-name small{display:block;color:var(--faint);font-weight:400;font-size:.6rem}
.m-px{font-family:var(--mono);font-size:.7rem;color:var(--muted)}
.m-chg{font-family:var(--mono);font-size:.68rem;text-align:right}
.m-chg.up{color:var(--neon)} .m-chg.dn{color:#ff6b84}
.m-row canvas{width:64px;height:22px}

.bars-legend{display:flex;gap:10px;font-size:.6rem;color:var(--faint)}
.bars-legend i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:4px;vertical-align:middle}
.activity{list-style:none}
.activity li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:.72rem;color:var(--muted)}
.activity li:last-child{border-bottom:0}
.activity .sym{color:var(--text);font-weight:500}

/* live tape */
.tape{
  height:148px;overflow:hidden;position:relative;
  mask-image:linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}
.tape-track{display:grid}
.t-row{
  display:grid;grid-template-columns:52px 1fr auto;gap:8px;align-items:center;
  padding:6px 4px;font-size:.72rem;border-bottom:1px solid rgba(255,255,255,.05);
}
.t-row .sym{font-weight:600;color:var(--text);font-family:var(--display);letter-spacing:-.02em}
.t-row .px{font-family:var(--mono);color:var(--muted);border-radius:4px;padding:1px 5px;transition:background .4s ease;justify-self:start}
.t-row .chg{font-family:var(--mono)}
.t-row .chg.up,.t-row .px.up{color:var(--neon)}
.t-row .chg.dn,.t-row .px.dn{color:#ff6b84}
.t-row .px.flash-up{background:rgba(61,255,138,.35);transition:background 0s}
.t-row .px.flash-dn{background:rgba(255,59,92,.35);transition:background 0s}

.db-caption{text-align:center;color:var(--faint);font-size:.75rem;margin:10px 0 0}

/* section tape */
.tape-strip{
  position:relative;z-index:2;
  max-width:calc(var(--max) + 32px);margin:12px auto 0;padding:0 20px;
}
.tape-strip .db-panel{padding:8px 12px 4px}

@media (max-width:900px){
  .db{grid-template-columns:1fr}
  .hero-viz{display:none}
  .db-side{display:flex;flex-direction:row;align-items:center;justify-content:center;border-right:0;border-bottom:1px solid rgba(46,230,198,.16);padding:8px 12px;background:#061018}
  .db-side .db-brand,.db-side button{display:none}
  .db-side-viz{flex-direction:row;margin:0;padding:0;gap:20px}
  .db-side-viz .radar{width:88px;height:88px}
  .db-side-viz .helix{width:28px;height:88px}
  .db-kpis,.db-row-2,.db-row-2b,.db-row-3{grid-template-columns:1fr 1fr}
  .chart-lg{height:140px}
}
@media (max-width:520px){
  .db-kpis{grid-template-columns:1fr 1fr}
  .db-row-2,.db-row-2b,.db-row-3{grid-template-columns:1fr}
  .hero-copy{max-width:100%}
}
@media (prefers-reduced-motion:reduce){
  .shine::after, .btn-primary::after, .radar-ring, .radar-core, .helix-scan, .db-top .live-dot{animation:none!important}
}

.price-shell{position:relative;width:100%;max-width:400px;isolation:isolate}
.price-shell::before{
  content:"";position:absolute;inset:-1px;border-radius:23px;z-index:0;padding:1px;
  background:conic-gradient(from var(--angle), #2ee6c6, #4ea0ff, #7a6bff, #2ee6c6);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:spinBorder 8s linear infinite;
}
.price-shell .price-card{position:relative;z-index:1;overflow:hidden}
.price-card::before{display:none}
#pay,#waitlist{scroll-margin-top:96px}

@media (max-width:900px){
  .hero-viz{min-height:0;margin:4px auto 8px}
  .hero-viz .radar{width:112px;height:112px}
  .hero-viz .helix{width:32px;height:112px}
  .hero{padding:24px 20px 10px}
  .hero .lead{font-size:1rem;margin-bottom:8px}
  .hero .urdu{margin-bottom:16px;font-size:.95rem}
  .hero-cta{margin-bottom:16px}
  .hero-tags{margin-bottom:12px}
}
@media (max-width:520px){
  .hero h1{font-size:1.72rem;margin-bottom:8px}
  .hero .lead{font-size:.92rem;line-height:1.45}
  .hero .urdu{font-size:.82rem;line-height:1.5;margin-bottom:10px}
  .hero-tags{margin-bottom:8px;gap:6px}
  .hero-tags .tag{height:20px;padding:0 7px;font-size:.58rem}
  .hero-cta{flex-direction:row;flex-wrap:nowrap;margin-bottom:12px;gap:8px}
  .hero-cta .btn{width:auto;flex:1;height:40px;font-size:.82rem}
  .hero-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding-top:0}
  .hero-meta div{min-width:0}
  .hero-meta b{font-size:1.05rem}
  .hero-meta span{font-size:.68rem}
}
@media (prefers-reduced-motion:reduce){
  .price-shell::before{animation:none!important}
}

/* ===== Original top ticker + background chart (exact motion) ===== */
body{padding-top:30px}
#bg-chart{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.55}
.ticker{
  position:fixed;top:0;left:0;right:0;z-index:50;
  height:30px;background:#04191d;border-bottom:2px solid #1fd0ee;
  overflow:hidden;display:flex;align-items:center;
  font-family:var(--mono);font-size:16px;color:#1fd0ee;
  padding:0;width:auto;animation:none;gap:0;
}
.ticker-track{display:flex;gap:1.6rem;white-space:nowrap;animation:ticker 55s linear infinite;will-change:transform;padding-left:100%;width:max-content}
@keyframes ticker{to{transform:translateX(-50%)}}
.ticker .coin{display:inline-flex;align-items:center;gap:.35rem}
.ticker .dot{width:8px;height:8px;border-radius:50%;box-shadow:0 0 6px currentColor;flex:0 0 auto}
.ticker b,.ticker .px{color:#e4edf2;font-weight:500}
.ticker .up{color:#4dff3a} .ticker .dn{color:#ff3d5e}

/* ===== Command center (fb1/fb2/fb3 motion styles) ===== */
.cc-wrap{position:relative;z-index:2;padding:8px 16px 16px;max-width:1280px;margin:0 auto}
.cc{
  background:#08060b;
  border:1px solid rgba(255,45,85,.42);
  border-radius:18px;
  box-shadow:0 0 80px rgba(255,45,85,.16), 0 0 0 1px rgba(255,45,85,.12), 0 28px 80px rgba(0,0,0,.55);
  overflow:hidden;
}
.cc-top{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 12px;border-bottom:1px solid rgba(255,45,85,.28);
  background:rgba(20,4,10,.55);
}
.cc-brand{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:600;font-size:.9rem;letter-spacing:-.03em;color:var(--text)}
.cc-brand img{width:22px;height:22px;border-radius:6px}
.cc-pills{display:flex;gap:4px;margin-left:8px}
.cc-pills button{
  height:22px;padding:0 9px;border-radius:999px;border:1px solid rgba(255,255,255,.12);
  background:transparent;color:var(--muted);font-size:.68rem;font-weight:600;letter-spacing:.04em;cursor:default;
}
.cc-pills button.on{border-color:rgba(46,230,198,.5);color:var(--cyan);background:rgba(46,230,198,.08);box-shadow:0 0 10px rgba(46,230,198,.25)}
.cc-top .tag{margin-left:2px}
.cc-clock{margin-left:auto;font-family:var(--mono);font-size:.78rem;color:var(--cyan)}
.cc-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px;padding:8px}
.cc-panel{
  background:rgba(10,6,12,.92);
  border:1px solid rgba(255,45,85,.3);
  box-shadow:0 0 16px rgba(255,45,85,.08);
  border-radius:12px;padding:8px 8px 6px;min-width:0;
  transition:border-color .35s ease, box-shadow .35s ease;
}
.cc-panel.flash{border-color:rgba(255,90,130,.95);box-shadow:0 0 22px rgba(255,45,85,.4)}
.cc-panel h4{
  font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);font-weight:600;margin:0 0 6px;
  display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:6px;
}
.cc-panel canvas{width:100%;display:block}
.cc-core{grid-column:span 3;grid-row:span 2;display:flex;flex-direction:column;align-items:center;justify-content:center}
.cc-core .radar{width:min(100%,200px);height:auto}
.cc-core .radar-core{stroke:#ff4d6d;filter:drop-shadow(0 0 10px rgba(255,45,85,.9))}
.cc-core .radar-ring{stroke:rgba(255,70,110,.55)}
.cc-core .radar-ring.r2{stroke:rgba(61,255,138,.45)}
.cc-core .radar text{fill:#f4f7fa;filter:drop-shadow(0 0 6px rgba(255,80,120,.6))}
.cc-lines{grid-column:span 6;grid-row:span 2;position:relative}
.cc-lines canvas{height:210px}
.cc-tip{
  position:absolute;pointer-events:none;display:none;
  background:#0c0a10;border:1px solid rgba(255,45,85,.45);color:var(--text);
  font-family:var(--mono);font-size:.68rem;padding:6px 8px;border-radius:8px;white-space:nowrap;
  box-shadow:0 0 16px rgba(255,45,85,.25);
}
.cc-tape{grid-column:span 3;grid-row:span 2}
.cc-tape .tape{height:210px}
.cc-surface{grid-column:span 4}
.cc-surface canvas{height:140px}
.cc-splitbars{grid-column:span 3}
.cc-splitbars canvas{height:140px}
.cc-donut{grid-column:span 2}
.cc-gauge{grid-column:span 3}
.cc-candles{grid-column:span 5}
.cc-candles canvas{height:160px}
.cc-footprint{grid-column:span 3}
.cc-footprint canvas{height:160px}
.cc-helix-p{grid-column:span 2;display:flex;flex-direction:column;align-items:center}
.cc-helix-p .helix{width:48px;height:150px}
.cc-dots{grid-column:span 3}
.cc-dots canvas{height:120px}
.cc-scatter{grid-column:span 3}
.cc-scatter canvas{height:120px}
.cc-area{grid-column:span 4}
.cc-area canvas{height:120px}
.cc-log{grid-column:span 4}
.cc-log-body{height:128px;overflow:hidden;font-family:var(--mono);font-size:.68rem;line-height:1.45;color:var(--muted)}
.cc-log-body div{padding:1px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.cc-log-body .ok{color:var(--neon)} .cc-log-body .bad{color:#ff6b84}
.cc-term{grid-column:span 4}
.cc-term-split{display:grid;grid-template-columns:1fr 1fr;gap:6px;height:128px}
.cc-term-pane{overflow:hidden;border:1px solid rgba(255,45,85,.2);border-radius:8px;padding:4px 6px;font-family:var(--mono);font-size:.62rem;color:var(--muted);line-height:1.4}
.cc-kpis{grid-column:span 4;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.cc-kpis .kpi{margin:0}
.cc-strip{
  display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;
  padding:8px 12px;border-top:1px solid rgba(255,45,85,.28);
  font-family:var(--mono);font-size:.72rem;color:var(--muted);
}
.cc-strip b{color:var(--text);font-weight:500}
.cc-caption{text-align:center;color:var(--faint);font-size:.75rem;margin:10px 0 0}

@media (max-width:900px){
  .cc-hide-sm{display:none}
  .cc-grid{grid-template-columns:1fr 1fr}
  .cc-core,.cc-lines,.cc-tape,.cc-candles,.cc-area,.cc-log,.cc-kpis,.cc-gauge,.cc-donut,.cc-helix-p{grid-column:span 1;grid-row:auto}
  .cc-lines{grid-column:span 2}
  .cc-lines canvas,.cc-tape .tape{height:160px}
  .ticker{font-size:14px}
}
@media (max-width:520px){
  .cc-grid{grid-template-columns:1fr}
  .cc-lines{grid-column:span 1}
  .cc-core .radar{width:140px}
}
@media (prefers-reduced-motion:reduce){
  .ticker-track{animation:none!important}
}

/* ===== Stronger neon flashes (fb2 / fb3) + live-data chrome ===== */
h1,h2,h3,h4,p,.lead,.cc-caption,.cc-panel h4,.hero-meta span{text-shadow:none;filter:none}
.px-live{
  font-family:var(--mono);font-size:.72rem;letter-spacing:0;text-transform:none;font-weight:500;
  color:var(--cyan);text-shadow:0 0 10px rgba(46,230,198,.7);
  margin-left:auto;
}
.cc-wrap{position:relative;overflow:hidden;padding:12px 16px 16px}
.cc-wrap::before{
  content:"";position:absolute;inset:-48px -24px -28px;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 55% at 50% 38%, rgba(255,25,70,.42), rgba(255,20,60,.14) 46%, transparent 72%);
  animation:ccAmbient 3.4s ease-in-out infinite;
}
@keyframes ccAmbient{0%,100%{opacity:.5}50%{opacity:1}}
.cc{
  position:relative;z-index:1;overflow:visible;
  box-shadow:0 0 80px rgba(255,45,85,.4), 0 0 160px rgba(255,45,85,.22), 0 0 0 1px rgba(255,45,85,.28), 0 28px 80px rgba(0,0,0,.55);
}
.cc-top{border-radius:18px 18px 0 0}
.cc-pills button{cursor:pointer}
.cc-pills button.on{box-shadow:0 0 16px rgba(46,230,198,.45)}
.cc-clock{text-shadow:0 0 12px rgba(46,230,198,.7)}
.cc-top .tag-green{animation:tagPulse 1.8s ease-in-out infinite}
@keyframes tagPulse{
  0%,100%{box-shadow:0 0 14px rgba(61,255,138,.55),0 0 28px rgba(61,255,138,.25)}
  50%{box-shadow:0 0 22px rgba(61,255,138,1),0 0 44px rgba(61,255,138,.55)}
}
.tag{box-shadow:0 0 16px rgba(46,230,198,.55),0 0 28px rgba(46,230,198,.25)}
.tag-green{box-shadow:0 0 16px rgba(61,255,138,.65),0 0 32px rgba(61,255,138,.3)}
.tag-red{box-shadow:0 0 16px rgba(255,59,92,.7),0 0 32px rgba(255,59,92,.35)}
.tag-violet{box-shadow:0 0 16px rgba(122,107,255,.6),0 0 28px rgba(122,107,255,.3)}

.cc-panel{
  position:relative;overflow:hidden;
  transition:border-color .6s ease, box-shadow .6s ease;
  box-shadow:0 0 18px rgba(255,45,85,.16);
}
.cc-panel::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:linear-gradient(105deg, transparent 28%, rgba(255,255,255,0) 42%, rgba(255,255,255,.2) 50%, rgba(255,255,255,0) 58%, transparent 72%);
  transform:translateX(-150%);
  animation:panelSweep 8s ease-in-out infinite;
}
.cc-panel:nth-child(2)::after{animation-delay:1.1s}
.cc-panel:nth-child(3)::after{animation-delay:2.2s}
.cc-panel:nth-child(4)::after{animation-delay:3.1s}
.cc-panel:nth-child(7)::after{animation-delay:1.7s}
.cc-panel:nth-child(8)::after{animation-delay:4s}
.cc-panel:nth-child(13)::after{animation-delay:2.8s}
@keyframes panelSweep{
  0%,68%{transform:translateX(-150%)}
  86%{transform:translateX(150%)}
  100%{transform:translateX(150%)}
}
.cc-panel.flash-up{
  border-color:#3dff8a !important;
  box-shadow:0 0 28px rgba(61,255,138,.95), 0 0 64px rgba(61,255,138,.5), inset 0 0 22px rgba(61,255,138,.14);
}
.cc-panel.flash-dn{
  border-color:#ff3b5c !important;
  box-shadow:0 0 28px rgba(255,45,85,1), 0 0 64px rgba(255,45,85,.55), inset 0 0 22px rgba(255,45,85,.16);
}

.cc-core .radar-core{
  fill:#1a0510;stroke:#ff4d6d;stroke-width:2.2;
  filter:drop-shadow(0 0 12px rgba(255,45,85,1)) drop-shadow(0 0 28px rgba(255,45,85,.9)) drop-shadow(0 0 48px rgba(255,45,85,.55));
  animation:radarBreath 1.8s ease-in-out infinite;
  transform-origin:80px 80px;
}
@keyframes radarBreath{
  0%,100%{transform:scale(1);filter:drop-shadow(0 0 10px rgba(255,45,85,.95)) drop-shadow(0 0 24px rgba(255,45,85,.65))}
  50%{transform:scale(1.14);filter:drop-shadow(0 0 22px rgba(255,45,85,1)) drop-shadow(0 0 52px rgba(255,45,85,.9))}
}
.cc-core .radar-ring{stroke-width:1.6;filter:drop-shadow(0 0 6px rgba(255,70,110,.85))}
.cc-core .radar text{fill:#f4f7fa;filter:drop-shadow(0 0 8px rgba(255,80,120,1)) drop-shadow(0 0 18px rgba(255,45,85,.75))}
.cc-core .radar .radar-sub{filter:none;fill:var(--faint)}

.helix-scan{
  filter:drop-shadow(0 0 8px rgba(61,255,138,1)) drop-shadow(0 0 18px rgba(61,255,138,.85)) drop-shadow(0 0 28px rgba(255,77,141,.5));
}
.helix path{filter:drop-shadow(0 0 5px rgba(255,77,141,.85))}

.t-row .px{
  padding:2px 7px;border-radius:4px;
  transition:background .55s ease, box-shadow .55s ease, color .55s ease;
}
.t-row .px.flash-up{
  background:#3dff8a !important;color:#04150c !important;
  box-shadow:0 0 16px rgba(61,255,138,1),0 0 32px rgba(61,255,138,.75);
  transition:background 0s, box-shadow 0s, color 0s;
}
.t-row .px.flash-dn{
  background:#ff3b5c !important;color:#fff !important;
  box-shadow:0 0 16px rgba(255,59,92,1),0 0 32px rgba(255,59,92,.75);
  transition:background 0s, box-shadow 0s, color 0s;
}
.t-row .chg.up,.kpi .val.up,.kpi .delta.up{text-shadow:0 0 12px rgba(61,255,138,.75)}
.t-row .chg.dn,.kpi .val.dn,.kpi .delta.dn{text-shadow:0 0 12px rgba(255,59,92,.75)}
.gval{text-shadow:0 0 14px rgba(46,230,198,.75);color:var(--cyan)}
.ticker .coin{padding:1px 4px;border-radius:4px;transition:background .5s ease, box-shadow .5s ease}
.ticker .coin.flash-up{
  background:rgba(61,255,138,.28);
  box-shadow:0 0 14px rgba(61,255,138,.85);
  transition:background 0s, box-shadow 0s;
}
.ticker .coin.flash-dn{
  background:rgba(255,59,92,.32);
  box-shadow:0 0 14px rgba(255,59,92,.9);
  transition:background 0s, box-shadow 0s;
}
.ticker .up{text-shadow:0 0 8px rgba(77,255,58,.55)}
.ticker .dn{text-shadow:0 0 8px rgba(255,61,94,.55)}

.cc-tape .tape-track{animation:tapeScroll 22s linear infinite}
@keyframes tapeScroll{to{transform:translateY(-50%)}}

.cc-donut canvas{height:120px}

@media (max-width:900px){
  .cc-wrap::before{inset:-24px -8px -12px;opacity:.7}
  .cc-panel::after{opacity:.55}
}
@media (prefers-reduced-motion:reduce){
  .cc-wrap::before,.cc-panel::after,.cc-top .tag-green,.radar-core,.helix-scan,.cc-tape .tape-track{animation:none!important}
  .cc-panel.flash-up,.cc-panel.flash-dn{box-shadow:none;border-color:inherit}
}

/* ===== Order-flow terminal ===== */
.oft-wrap{position:relative;z-index:2;max-width:1280px;margin:4px auto 28px;padding:8px 16px 8px;overflow:hidden;scroll-margin-top:88px}
.oft-wrap::before{
  content:"";position:absolute;inset:-36px -16px -16px;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 55% at 50% 40%, rgba(255,25,70,.36), rgba(31,208,238,.08) 50%, transparent 72%);
  animation:ccAmbient 3.4s ease-in-out infinite;
}
.oft{position:relative;z-index:1;background:#08060b;border:1px solid rgba(255,45,85,.42);border-radius:18px;
  box-shadow:0 0 80px rgba(255,45,85,.32),0 0 140px rgba(255,45,85,.16),0 0 0 1px rgba(255,45,85,.22),0 28px 80px rgba(0,0,0,.55);overflow:hidden}
.oft-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border-bottom:1px solid rgba(255,45,85,.28);background:rgba(20,4,10,.55)}
.oft-last{font-family:var(--mono);font-size:1.15rem;font-weight:500;margin-left:6px;text-shadow:0 0 14px rgba(46,230,198,.7);transition:color 0s,background .5s,box-shadow .5s;padding:1px 8px;border-radius:6px}
.oft-last.up{color:var(--neon);text-shadow:0 0 14px rgba(61,255,138,.85)}
.oft-last.dn{color:#ff6b84;text-shadow:0 0 14px rgba(255,59,92,.85)}
.oft-last.flash-up{background:#3dff8a;color:#04150c !important;box-shadow:0 0 18px rgba(61,255,138,1);transition:background 0s,box-shadow 0s,color 0s}
.oft-last.flash-dn{background:#ff3b5c;color:#fff !important;box-shadow:0 0 18px rgba(255,59,92,1);transition:background 0s,box-shadow 0s,color 0s}
.oft-chg{font-family:var(--mono);font-size:.85rem}
.oft-chg.up{color:var(--neon);text-shadow:0 0 10px rgba(61,255,138,.7)}
.oft-chg.dn{color:#ff6b84;text-shadow:0 0 10px rgba(255,59,92,.7)}
.oft-spr{font-family:var(--mono);font-size:.75rem;color:var(--muted)}
.oft-spr b{color:var(--text);font-weight:500}
.oft-grid{display:grid;grid-template-columns:240px minmax(0,1fr) 340px;gap:8px;padding:8px;min-height:540px}
.oft-panel{background:rgba(10,6,12,.92);border:1px solid rgba(255,45,85,.3);box-shadow:0 0 16px rgba(255,45,85,.1);border-radius:12px;padding:8px;min-width:0;display:flex;flex-direction:column;position:relative;overflow:hidden;transition:border-color .6s ease,box-shadow .6s ease}
.oft-panel.flash-up{border-color:#3dff8a !important;box-shadow:0 0 28px rgba(61,255,138,.9),0 0 56px rgba(61,255,138,.4)}
.oft-panel.flash-dn{border-color:#ff3b5c !important;box-shadow:0 0 28px rgba(255,45,85,1),0 0 56px rgba(255,45,85,.45)}
.oft-panel h4{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:600;margin:0 0 6px;display:flex;align-items:center;gap:8px}
.oft-book{min-height:0}
.oft-obhead,.oft-lrow{display:grid;grid-template-columns:1fr 1.15fr 1fr;text-align:right;font-family:var(--mono);font-size:.7rem}
.oft-obhead{color:var(--faint);padding:0 6px 4px;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:2px}
.oft-ladder{flex:1;overflow:hidden;position:relative;min-height:360px}
.oft-sync{padding:12px;color:var(--faint);font-size:.8rem}
.oft-lrow{position:relative;height:16px;line-height:16px;padding:0 6px}
.oft-lrow span{position:relative;z-index:1}
.oft-lrow .bb,.oft-lrow .ab{position:absolute;top:1px;bottom:1px;z-index:0;pointer-events:none}
.oft-lrow .bb{left:0;background:rgba(61,255,138,.28);box-shadow:0 0 10px rgba(61,255,138,.35)}
.oft-lrow .ab{right:0;background:rgba(255,59,92,.28);box-shadow:0 0 10px rgba(255,59,92,.35)}
.oft-lrow.ask .px{color:#ff8b9b} .oft-lrow.bid .px{color:#86ffa0}
.oft-lrow .as{color:#ff3b5c} .oft-lrow .bs{color:#3dff8a}
.oft-lrow.best-ask{background:rgba(255,45,85,.16)}
.oft-lrow.best-bid{background:rgba(61,255,138,.12)}
.oft-lrow.wall .as,.oft-lrow.wall .bs{color:#fff;text-shadow:0 0 8px currentColor}
.oft-lrow.wall .bb{background:rgba(61,255,138,.5)} .oft-lrow.wall .ab{background:rgba(255,59,92,.5)}
.oft-mid{
  display:flex;align-items:center;justify-content:center;gap:8px;
  height:28px;margin:3px 0;border-radius:6px;
  font-family:var(--mono);font-size:.92rem;font-weight:500;
  background:rgba(46,230,198,.08);border:1px solid rgba(46,230,198,.35);
  color:var(--cyan);text-shadow:0 0 12px rgba(46,230,198,.8);
  transition:background .5s,border-color .5s,box-shadow .5s,color .5s;
}
.oft-mid.flash-up{background:#3dff8a;color:#04150c;border-color:#3dff8a;box-shadow:0 0 22px rgba(61,255,138,1);text-shadow:none;transition:none}
.oft-mid.flash-dn{background:#ff3b5c;color:#fff;border-color:#ff3b5c;box-shadow:0 0 22px rgba(255,59,92,1);text-shadow:none;transition:none}
.oft-stage{display:flex;flex-direction:column;gap:8px;min-width:0;min-height:0}
.oft-hist{flex:1;min-height:240px}
.oft-hist canvas{width:100%;height:100%;flex:1;display:block;min-height:220px}
.oft-vd{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.oft-meter{background:rgba(10,6,12,.92);border:1px solid rgba(255,45,85,.3);border-radius:12px;padding:8px 8px 6px;min-width:0;transition:border-color .55s,box-shadow .55s,background .55s}
.oft-meter .lbl{display:block;font-size:.58rem;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);font-weight:600;margin-bottom:2px}
.oft-meter .val{display:block;font-family:var(--mono);font-size:1.05rem;font-weight:500;letter-spacing:-.02em;line-height:1.2}
.oft-meter .val.up{color:var(--neon);text-shadow:0 0 12px rgba(61,255,138,.75)}
.oft-meter .val.dn{color:#ff6b84;text-shadow:0 0 12px rgba(255,59,92,.75)}
.oft-meter canvas{width:100%;height:28px;display:block;margin-top:4px}
.oft-meter.flash-up{border-color:#3dff8a;box-shadow:0 0 18px rgba(61,255,138,.8);background:rgba(61,255,138,.08)}
.oft-meter.flash-dn{border-color:#ff3b5c;box-shadow:0 0 18px rgba(255,45,85,.85);background:rgba(255,45,85,.08)}
.oft-radar{min-height:0}
.oft-radar{padding-bottom:14px}
.oft-radar canvas{width:100%;flex:1;display:block;min-height:460px}
.oft-caption{text-align:center;color:var(--faint);font-size:.75rem;margin:10px 0 0;text-shadow:none}

@media (max-width:900px){
  .oft-grid{grid-template-columns:1fr;min-height:0}
  .oft-ladder{min-height:280px}
  .oft-hist{min-height:180px}
  .oft-hist canvas{min-height:160px}
  .oft-vd{grid-template-columns:1fr 1fr}
  .oft-radar canvas{min-height:320px}
}
@media (max-width:520px){
  .oft-last{font-size:1rem}
  .oft-meter .val{font-size:.92rem}
}
@media (prefers-reduced-motion:reduce){
  .oft-wrap::before{animation:none!important}
  .oft-last.flash-up,.oft-last.flash-dn,.oft-mid.flash-up,.oft-mid.flash-dn,.oft-meter.flash-up,.oft-meter.flash-dn,.oft-panel.flash-up,.oft-panel.flash-dn{transition:none;box-shadow:none}
}


/* setup guide */
.step ul{margin:10px 0 0 1.15rem;color:var(--muted)}
.step li{margin:6px 0}
.step li strong{color:var(--text);font-weight:600}