/* ================================================================
   AlgoEdge Pro — Design System v3
   Aesthetic: Professional fintech. Compact. Dense. Crisp.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --bg:      #08090c;
  --s0:      #0c0d11;
  --s1:      #10111a;
  --s2:      #14151f;
  --s3:      #1a1c28;
  --s4:      #202230;
  --s5:      #282b3a;

  --b0: rgba(255,255,255,0.03);
  --b1: rgba(255,255,255,0.06);
  --b2: rgba(255,255,255,0.10);
  --b3: rgba(255,255,255,0.16);
  --b4: rgba(255,255,255,0.22);

  --gold:    #f0a500;
  --gold2:   #fbbf24;
  --gold-bg: rgba(240,165,0,0.07);
  --gold-b:  rgba(240,165,0,0.18);

  --teal:    #0fb8a0;
  --teal-bg: rgba(15,184,160,0.07);
  --teal-b:  rgba(15,184,160,0.18);

  --rose:    #f43f5e;
  --rose-bg: rgba(244,63,94,0.07);
  --rose-b:  rgba(244,63,94,0.18);

  --sky:     #38bdf8;
  --sky-bg:  rgba(56,189,248,0.07);
  --sky-b:   rgba(56,189,248,0.18);

  --t1: #f0f2f8;
  --t2: #8892a8;
  --t3: #4a5060;

  --r:    7px;
  --r-sm: 5px;
  --r-lg: 11px;
  --r-xl: 16px;

  --nav-h: 56px;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg);color:var(--t1);
  font-size:13px;line-height:1.55;
  overflow-x:hidden;-webkit-font-smoothing:antialiased
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit}
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:var(--s0)}
::-webkit-scrollbar-thumb{background:var(--s4);border-radius:3px}

/* ── LAYOUT ── */
.container{max-width:1140px;margin:0 auto;padding:0 20px}
.page-wrap{min-height:100vh;padding-top:var(--nav-h)}

/* ── TYPE ── */
h1,h2,h3,h4{line-height:1.2;letter-spacing:-0.025em;font-weight:700}
.mono{font-family:'JetBrains Mono',monospace}
.grad{
  background:linear-gradient(120deg,#f0a500 0%,#fbbf24 45%,#0fb8a0 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text
}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'JetBrains Mono',monospace;font-size:10px;
  font-weight:500;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--t3);margin-bottom:10px
}
.eyebrow::before{content:'';width:20px;height:1px;background:currentColor;opacity:0.6}

/* ── BUTTONS ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:34px;padding:0 15px;border-radius:var(--r);border:none;
  font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:all 0.16s cubic-bezier(0.4,0,0.2,1);
  text-decoration:none;letter-spacing:0.01em
}
.btn-primary{
  background:var(--gold);color:#000;
  box-shadow:0 0 0 0 rgba(240,165,0,0);
}
.btn-primary:hover{background:var(--gold2);box-shadow:0 4px 16px rgba(240,165,0,0.28);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0);box-shadow:none}

.btn-outline{background:transparent;border:1px solid var(--b2);color:var(--t2)}
.btn-outline:hover{border-color:var(--b3);color:var(--t1);background:var(--s2)}
.btn-ghost{background:var(--s2);border:1px solid var(--b1);color:var(--t2)}
.btn-ghost:hover{background:var(--s3);color:var(--t1)}
.btn-danger{background:var(--rose);color:#fff;box-shadow:0 4px 12px rgba(244,63,94,0.18)}
.btn-danger:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(244,63,94,0.3)}
.btn-teal{background:var(--teal);color:#000;box-shadow:0 4px 12px rgba(15,184,160,0.18)}
.btn-teal:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(15,184,160,0.3)}

.btn-sm{height:28px;padding:0 11px;font-size:11px}
.btn-lg{height:40px;padding:0 20px;font-size:13px}
.btn-xl{height:46px;padding:0 28px;font-size:14px}
.btn-block{width:100%}
.btn:disabled{opacity:0.4;cursor:not-allowed;transform:none!important}

/* ── INPUTS ── */
.form-group{margin-bottom:14px}
.form-label{
  display:block;margin-bottom:5px;
  font-size:10px;font-weight:600;letter-spacing:0.09em;
  text-transform:uppercase;color:var(--t3)
}
.form-control{
  width:100%;height:36px;padding:0 12px;
  background:var(--s2);border:1px solid var(--b1);
  border-radius:var(--r);color:var(--t1);font-size:12px;
  outline:none;transition:border 0.14s,box-shadow 0.14s
}
.form-control:focus{border-color:rgba(240,165,0,0.4);box-shadow:0 0 0 3px rgba(240,165,0,0.07)}
.form-control::placeholder{color:var(--t3)}
textarea.form-control{height:auto;padding:10px 12px;resize:vertical;min-height:90px}
select.form-control{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%234a5060' d='M5 6L0 0h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;padding-right:28px}

/* ── CARDS ── */
.card{background:var(--s1);border:1px solid var(--b1);border-radius:var(--r-lg);padding:18px}
.card-hover{transition:border-color 0.2s,transform 0.22s,box-shadow 0.22s}
.card-hover:hover{border-color:var(--b2);transform:translateY(-2px);box-shadow:0 12px 40px rgba(0,0,0,0.5)}

/* ── BADGES ── */
.badge{
  display:inline-flex;align-items:center;gap:4px;
  height:18px;padding:0 7px;border-radius:4px;
  font-family:'JetBrains Mono',monospace;font-size:10px;
  font-weight:500;letter-spacing:0.04em;white-space:nowrap
}
.badge-gold{background:var(--gold-bg);color:var(--gold2);border:1px solid var(--gold-b)}
.badge-teal{background:var(--teal-bg);color:var(--teal);border:1px solid var(--teal-b)}
.badge-rose{background:var(--rose-bg);color:var(--rose);border:1px solid var(--rose-b)}
.badge-sky{background:var(--sky-bg);color:var(--sky);border:1px solid var(--sky-b)}
.badge-neutral{background:var(--s3);color:var(--t2);border:1px solid var(--b1)}

/* ── ALERTS ── */
.alert{
  display:flex;align-items:flex-start;gap:9px;
  padding:10px 13px;border-radius:var(--r);
  font-size:12px;margin-bottom:14px;line-height:1.5
}
.alert-success{background:rgba(15,184,160,0.07);border:1px solid rgba(15,184,160,0.2);color:#2dd4bf}
.alert-error{background:var(--rose-bg);border:1px solid var(--rose-b);color:#fb7185}
.alert-warning{background:var(--gold-bg);border:1px solid var(--gold-b);color:var(--gold2)}
.alert-info{background:var(--sky-bg);border:1px solid var(--sky-b);color:var(--sky)}

/* ── TABLE ── */
.tbl-wrap{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--b1)}
table.tbl{width:100%;border-collapse:collapse;font-size:12px}
.tbl th{background:var(--s2);padding:9px 13px;text-align:left;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.09em;color:var(--t3);border-bottom:1px solid var(--b1)}
.tbl td{padding:10px 13px;border-bottom:1px solid var(--b0);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr{transition:background 0.1s}
.tbl tbody tr:hover td{background:rgba(255,255,255,0.012)}

/* ── DIVIDER ── */
.divider{display:flex;align-items:center;gap:10px;color:var(--t3);font-size:10px}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--b1)}

/* ── SPINNER ── */
.spinner{width:12px;height:12px;border:1.5px solid rgba(255,255,255,0.15);border-top-color:currentColor;border-radius:50%;animation:spin 0.6s linear infinite;display:inline-block;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── TOAST ── */
#toast-wrap{position:fixed;top:64px;right:14px;z-index:9999;display:flex;flex-direction:column;gap:6px;pointer-events:none}
.toast{
  display:flex;align-items:center;gap:8px;
  padding:9px 13px;border-radius:var(--r);font-size:12px;font-weight:500;
  max-width:280px;pointer-events:all;
  backdrop-filter:blur(14px);
  animation:tIn 0.22s cubic-bezier(0.34,1.56,0.64,1) both
}
@keyframes tIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:translateX(0)}}

/* ================================================================
   NAVBAR
   ================================================================ */
#navbar{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  height:var(--nav-h);
  border-bottom:1px solid transparent;
  transition:background 0.25s,border-color 0.25s,backdrop-filter 0.25s
}
#navbar.stuck{background:rgba(8,9,12,0.92);backdrop-filter:blur(18px);border-color:var(--b1)}
.nav-inner{
  max-width:1140px;margin:0 auto;padding:0 20px;
  height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px
}
.logo{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;letter-spacing:-0.02em}
.logo-mark{
  width:28px;height:28px;border-radius:7px;
  background:var(--gold);display:flex;align-items:center;justify-content:center;
  font-size:13px;color:#000;font-weight:900;flex-shrink:0;
  transition:box-shadow 0.2s
}
.logo:hover .logo-mark{box-shadow:0 0 16px rgba(240,165,0,0.4)}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-lnk{
  padding:5px 10px;border-radius:var(--r);
  font-size:12px;font-weight:500;color:var(--t2);
  transition:all 0.15s
}
.nav-lnk:hover{color:var(--t1);background:var(--s2)}
.nav-actions{display:flex;align-items:center;gap:8px}
.cart-pill{
  position:relative;display:inline-flex;align-items:center;gap:5px;
  height:28px;padding:0 11px;border-radius:var(--r);
  background:var(--s2);border:1px solid var(--b1);
  font-size:11px;font-weight:500;color:var(--t2);
  transition:all 0.15s
}
.cart-pill:hover{background:var(--s3);color:var(--t1)}
.cart-dot{
  position:absolute;top:-4px;right:-4px;
  min-width:15px;height:15px;border-radius:8px;
  background:var(--rose);color:#fff;
  font-size:9px;font-weight:700;padding:0 3px;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--bg)
}

/* ================================================================
   HERO
   ================================================================ */
.hero{
  min-height:100vh;display:flex;flex-direction:column;
  justify-content:center;padding-top:var(--nav-h);
  position:relative;overflow:hidden
}
.hero-canvas{
  position:absolute;inset:0;pointer-events:none;overflow:hidden
}
/* Subtle grid */
.hero-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.022) 1px,transparent 1px);
  background-size:52px 52px;
  animation:gridFade 3s ease both
}
@keyframes gridFade{from{opacity:0}to{opacity:1}}

/* Ambient glow orbs */
.orb{position:absolute;border-radius:50%;pointer-events:none}
.orb-1{
  width:560px;height:560px;right:-100px;top:-80px;
  background:radial-gradient(circle,rgba(240,165,0,0.07) 0%,transparent 68%);
  animation:orbDrift1 12s ease-in-out infinite
}
.orb-2{
  width:400px;height:400px;left:-80px;bottom:80px;
  background:radial-gradient(circle,rgba(15,184,160,0.06) 0%,transparent 68%);
  animation:orbDrift2 15s ease-in-out infinite
}
@keyframes orbDrift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-30px,30px) scale(1.05)}}
@keyframes orbDrift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(20px,-20px) scale(1.03)}}

.hero-inner{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr 380px;gap:60px;
  align-items:center;padding:60px 0 80px
}
.hero-tag{
  display:inline-flex;align-items:center;gap:7px;
  height:24px;padding:0 10px;border-radius:100px;
  background:var(--gold-bg);border:1px solid var(--gold-b);
  font-family:'JetBrains Mono',monospace;font-size:10px;
  font-weight:500;color:var(--gold2);letter-spacing:0.08em;
  margin-bottom:20px;
  animation:fadeUp 0.6s ease both
}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--teal);animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.4;transform:scale(0.8)}}

.hero-h1{
  font-size:clamp(22px,3.8vw,42px);font-weight:700;line-height:1.1;
  letter-spacing:-0.03em;margin-bottom:16px;
  animation:fadeUp 0.6s 0.08s ease both;
  word-break:break-word
}
.hero-p{
  font-size:14px;color:var(--t2);line-height:1.75;
  max-width:480px;margin-bottom:28px;
  animation:fadeUp 0.6s 0.16s ease both
}
.hero-btns{
  display:flex;gap:10px;flex-wrap:wrap;margin-bottom:40px;
  animation:fadeUp 0.6s 0.22s ease both
}
.hero-stats{
  display:flex;gap:0;
  border-top:1px solid var(--b1);padding-top:32px;
  animation:fadeUp 0.6s 0.3s ease both
}
.hero-stat{
  flex:1;padding:0 24px 0 0;
  border-right:1px solid var(--b1);margin-right:24px
}
.hero-stat:last-child{border-right:none;margin-right:0}
.stat-n{
  font-family:'JetBrains Mono',monospace;
  font-size:24px;font-weight:500;letter-spacing:-0.03em;
  line-height:1;margin-bottom:4px
}
.stat-l{font-size:11px;color:var(--t3);letter-spacing:0.02em}

/* Live terminal on the right */
.hero-terminal{
  background:var(--s1);border:1px solid var(--b1);
  border-radius:var(--r-xl);overflow:hidden;
  animation:fadeUp 0.6s 0.15s ease both;
  box-shadow:0 24px 60px rgba(0,0,0,0.5)
}
.term-bar{
  display:flex;align-items:center;gap:6px;
  padding:11px 14px;border-bottom:1px solid var(--b1);
  background:var(--s2)
}
.term-dot{width:9px;height:9px;border-radius:50%}
.term-title{margin-left:auto;margin-right:auto;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--t3)}
.term-body{padding:14px;font-family:'JetBrains Mono',monospace;font-size:11px;line-height:1.9}
.t-row{display:flex;justify-content:space-between;align-items:center;padding:3px 0;border-bottom:1px solid var(--b0)}
.t-row:last-child{border-bottom:none}
.t-sym{color:var(--t2);font-size:10px}
.t-val{font-weight:500}
.t-up{color:var(--teal)}
.t-dn{color:var(--rose)}
.t-chg{font-size:10px;min-width:56px;text-align:right}

/* ── TICKER ── */
.ticker{
  background:var(--s1);border-top:1px solid var(--b1);
  border-bottom:1px solid var(--b1);
  overflow:hidden;height:34px;display:flex;align-items:center
}
.ticker-track{
  display:flex;gap:0;white-space:nowrap;
  animation:tickScroll 40s linear infinite
}
.ticker-item{
  display:inline-flex;align-items:center;gap:8px;
  padding:0 24px;font-family:'JetBrains Mono',monospace;font-size:10px;
  border-right:1px solid var(--b0)
}
.t-name{color:var(--t3)}
.t-price{font-weight:500}
@keyframes tickScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ================================================================
   PRODUCT CARDS
   ================================================================ */
.products-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:16px;margin-top:32px
}
.pcard{
  background:var(--s1);border:1px solid var(--b1);
  border-radius:var(--r-xl);overflow:hidden;
  transition:border-color 0.2s,transform 0.22s,box-shadow 0.22s;
  cursor:pointer;display:flex;flex-direction:column
}
.pcard:hover{
  border-color:rgba(240,165,0,0.22);
  transform:translateY(-3px);
  box-shadow:0 20px 50px rgba(0,0,0,0.55),0 0 0 1px rgba(240,165,0,0.08) inset
}
.pcard-media{
  height:160px;background:var(--s2);
  position:relative;overflow:hidden;flex-shrink:0;
  display:flex;align-items:center;justify-content:center
}
.pcard-media img{width:100%;height:100%;object-fit:cover;transition:transform 0.4s}
.pcard:hover .pcard-media img{transform:scale(1.04)}
.pcard-abbr{
  font-family:'JetBrains Mono',monospace;font-size:42px;
  font-weight:700;color:rgba(255,255,255,0.05);letter-spacing:-2px;
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center
}
.pcard-play{
  position:absolute;width:42px;height:42px;border-radius:50%;
  background:rgba(240,165,0,0.92);border:none;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;color:#000;cursor:pointer;
  transition:transform 0.2s,box-shadow 0.2s;z-index:2
}
.pcard-play:hover{transform:scale(1.1);box-shadow:0 0 24px rgba(240,165,0,0.5)}
.disc-pill{
  position:absolute;top:10px;left:10px;
  height:18px;padding:0 7px;border-radius:4px;
  background:var(--rose);color:#fff;
  font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:600;
  display:flex;align-items:center
}
.pcard-body{padding:16px;display:flex;flex-direction:column;flex:1}
.pcard-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.pcard-name{font-size:14px;font-weight:700;letter-spacing:-0.02em;margin-bottom:5px;line-height:1.25}
.pcard-desc{font-size:11px;color:var(--t2);line-height:1.6;margin-bottom:12px;flex:1}
.pcard-feats{
  display:grid;grid-template-columns:1fr 1fr;
  gap:4px;margin-bottom:14px
}
.feat-item{
  display:flex;align-items:center;gap:5px;
  font-size:11px;color:var(--t2)
}
.feat-item::before{content:'✓';color:var(--teal);font-size:10px;font-weight:700;flex-shrink:0}
.pcard-foot{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:12px;border-top:1px solid var(--b0)
}
.price-old{font-size:10px;color:var(--t3);text-decoration:line-through;margin-bottom:1px}
.price-new{
  font-family:'JetBrains Mono',monospace;
  font-size:20px;font-weight:500;color:var(--gold2);letter-spacing:-0.02em
}
.price-usd{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--t3);margin-top:1px}

/* ================================================================
   STEPS
   ================================================================ */
.steps-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:0;margin-top:32px;
  border:1px solid var(--b1);border-radius:var(--r-xl);overflow:hidden
}
.step{
  padding:24px 20px;background:var(--s1);
  border-right:1px solid var(--b1);
  transition:background 0.2s
}
.step:last-child{border-right:none}
.step:hover{background:var(--s2)}
.step-n{
  font-family:'JetBrains Mono',monospace;font-size:10px;
  color:var(--t3);letter-spacing:0.1em;margin-bottom:14px
}
.step-ico{font-size:18px;margin-bottom:10px}
.step-t{font-size:13px;font-weight:700;margin-bottom:5px;letter-spacing:-0.01em}
.step-d{font-size:11px;color:var(--t2);line-height:1.6}

/* ================================================================
   AUTH PAGES
   ================================================================ */
.auth-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:80px 20px 40px;background:var(--bg);position:relative
}
.auth-bg-grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,0.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.018) 1px,transparent 1px);
  background-size:44px 44px
}
.auth-panel{
  width:100%;max-width:420px;
  background:var(--s1);border:1px solid var(--b1);
  border-radius:var(--r-xl);padding:28px 26px;
  position:relative;z-index:2;
  animation:fadeUp 0.4s ease both
}
.auth-logo{display:flex;justify-content:center;margin-bottom:22px}
.auth-h{font-size:20px;font-weight:700;letter-spacing:-0.025em;text-align:center;margin-bottom:4px}
.auth-sub{font-size:12px;color:var(--t2);text-align:center;margin-bottom:22px}
.auth-footer{text-align:center;margin-top:16px;font-size:11px;color:var(--t3)}
.auth-footer a{color:var(--t2);font-weight:500}
.auth-footer a:hover{color:var(--t1)}

/* ================================================================
   CHECKOUT
   ================================================================ */
.co-wrap{padding:80px 0 60px;background:var(--bg);min-height:100vh}
.co-grid{display:grid;grid-template-columns:1fr 360px;gap:20px;align-items:start}
.section-h{font-size:14px;font-weight:700;letter-spacing:-0.015em;margin-bottom:14px}
.co-item{
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 12px;background:var(--s2);border:1px solid var(--b0);
  border-radius:var(--r);margin-bottom:6px
}
.co-item-name{font-size:12px;font-weight:600;margin-bottom:2px}
.co-item-cat{font-size:10px;color:var(--t3)}
.co-item-price{font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:500;color:var(--gold2)}
.utr-warn{
  background:rgba(244,63,94,0.07);border:1px solid rgba(244,63,94,0.2);
  border-radius:var(--r-lg);padding:14px 16px;margin-bottom:16px
}
.utr-warn-h{
  font-size:12px;font-weight:700;color:var(--rose);
  text-transform:uppercase;letter-spacing:0.06em;margin-bottom:6px;
  display:flex;align-items:center;gap:6px
}
.utr-warn-p{font-size:11px;color:rgba(244,63,94,0.75);line-height:1.65}
.utr-input{
  font-family:'JetBrains Mono',monospace;font-size:14px;
  letter-spacing:0.06em;border-color:rgba(240,165,0,0.25)!important;
  height:42px!important
}
.qr-panel{
  background:var(--s1);border:1px solid var(--b1);
  border-radius:var(--r-xl);padding:20px;text-align:center;
  position:sticky;top:70px
}
.qr-img{
  width:180px;height:180px;object-fit:contain;
  background:#fff;border-radius:var(--r-lg);padding:8px;
  margin:12px auto;display:block
}
.qr-upi{
  font-family:'JetBrains Mono',monospace;font-size:11px;
  color:var(--sky);margin-top:6px;word-break:break-all
}
.amount-chip{
  margin-top:14px;padding:12px;
  background:var(--s2);border:1px solid var(--b1);border-radius:var(--r);
  text-align:center
}
.amount-lbl{font-size:10px;color:var(--t3);text-transform:uppercase;letter-spacing:0.09em;margin-bottom:4px;font-family:'JetBrains Mono',monospace}
.amount-val{font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:500;color:var(--gold2);letter-spacing:-0.02em}

/* ================================================================
   DASHBOARD
   ================================================================ */
.dash-wrap{padding:80px 0 60px;min-height:100vh}
.dash-grid{display:grid;grid-template-columns:200px 1fr;gap:16px;align-items:start}
.sidebar{
  background:var(--s1);border:1px solid var(--b1);
  border-radius:var(--r-xl);overflow:hidden;position:sticky;top:68px
}
.sb-profile{
  padding:16px;border-bottom:1px solid var(--b0);
  background:var(--s2)
}
.sb-avatar{
  width:38px;height:38px;border-radius:9px;
  background:var(--gold);display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:500;
  color:#000;margin-bottom:9px
}
.sb-name{font-size:13px;font-weight:600;letter-spacing:-0.01em;margin-bottom:2px}
.sb-email{font-size:10px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-nav{padding:6px}
.sb-lnk{
  display:flex;align-items:center;gap:8px;padding:7px 9px;
  border-radius:var(--r);font-size:12px;color:var(--t2);
  font-weight:500;transition:all 0.13s;text-decoration:none;margin-bottom:1px
}
.sb-lnk:hover{background:var(--s2);color:var(--t1)}
.sb-lnk.active{background:var(--gold-bg);color:var(--gold2);border-left:2px solid var(--gold)}
.sb-ico{font-size:12px;width:14px;text-align:center;flex-shrink:0}
.dash-metrics{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:10px;margin-bottom:20px
}
.metric{
  background:var(--s1);border:1px solid var(--b1);
  border-radius:var(--r-lg);padding:14px
}
.metric-lbl{
  font-size:10px;color:var(--t3);text-transform:uppercase;
  letter-spacing:0.09em;margin-bottom:7px;font-family:'JetBrains Mono',monospace
}
.metric-val{
  font-family:'JetBrains Mono',monospace;
  font-size:20px;font-weight:500;letter-spacing:-0.02em;line-height:1
}
.metric-sub{font-size:10px;color:var(--t3);margin-top:4px}

/* ================================================================
   FOOTER
   ================================================================ */
footer{background:var(--s1);border-top:1px solid var(--b1);padding:40px 0 22px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px;margin-bottom:32px}
.foot-brand p{font-size:11px;color:var(--t3);line-height:1.75;margin-top:10px;max-width:220px}
.foot-col-h{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;color:var(--t3);margin-bottom:12px;font-family:'JetBrains Mono',monospace}
.foot-lnk{display:block;font-size:11px;color:var(--t3);margin-bottom:7px;transition:color 0.13s}
.foot-lnk:hover{color:var(--t2)}
.foot-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:18px;border-top:1px solid var(--b0);font-size:10px;color:var(--t3)}

/* ================================================================
   MODALS
   ================================================================ */
.modal-mask{
  position:fixed;inset:0;background:rgba(0,0,0,0.8);backdrop-filter:blur(6px);
  z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;visibility:hidden;transition:opacity 0.2s,visibility 0.2s
}
.modal-mask.open{opacity:1;visibility:visible}
.modal-box{
  background:var(--s1);border:1px solid var(--b2);
  border-radius:var(--r-xl);overflow:hidden;width:100%;max-width:720px;
  transform:translateY(12px) scale(0.97);
  transition:transform 0.25s cubic-bezier(0.34,1.4,0.64,1)
}
.modal-mask.open .modal-box{transform:translateY(0) scale(1)}
.modal-x{
  position:absolute;top:10px;right:10px;
  width:26px;height:26px;border-radius:6px;
  background:rgba(255,255,255,0.06);border:none;
  color:var(--t2);font-size:13px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background 0.15s
}
.modal-x:hover{background:rgba(255,255,255,0.1)}
.vid-ratio{position:relative;padding-top:56.25%;background:#000}
.vid-ratio video{position:absolute;inset:0;width:100%;height:100%}
.modal-bd{padding:16px 18px}

/* ================================================================
   ORDER CONFIRMATION
   ================================================================ */
.conf-wrap{padding:80px 0 60px;min-height:100vh}
.conf-hero{
  text-align:center;padding:32px 24px;
  background:var(--s1);border:1px solid rgba(15,184,160,0.2);
  border-radius:var(--r-xl);margin-bottom:20px;position:relative;overflow:hidden
}
.conf-hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 50% 50%,rgba(15,184,160,0.05),transparent 70%);
  pointer-events:none
}
.conf-check{
  width:52px;height:52px;border-radius:50%;
  background:rgba(15,184,160,0.12);border:1px solid rgba(15,184,160,0.3);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;margin:0 auto 14px;position:relative;z-index:1
}
.conf-tag{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'JetBrains Mono',monospace;font-size:11px;
  padding:5px 12px;border-radius:100px;
  background:var(--gold-bg);border:1px solid var(--gold-b);
  color:var(--gold2);margin-top:10px
}

/* ================================================================
   ADMIN — override base for admin context
   ================================================================ */
.adm-body{display:flex;min-height:100vh;background:var(--bg)}
.adm-side{
  width:220px;background:var(--s0);border-right:1px solid var(--b1);
  display:flex;flex-direction:column;position:fixed;inset-y:0;left:0;z-index:100;overflow-y:auto
}
.adm-logo{
  display:flex;align-items:center;gap:8px;padding:16px 14px;
  border-bottom:1px solid var(--b1);font-size:13px;font-weight:700
}
.adm-logo-mark{
  width:26px;height:26px;border-radius:6px;
  background:var(--rose);display:flex;align-items:center;justify-content:center;
  font-size:12px;color:#fff;font-weight:900;flex-shrink:0
}
.adm-section{
  font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:0.12em;
  color:var(--t3);padding:14px 12px 4px;font-family:'JetBrains Mono',monospace
}
.adm-lnk{
  display:flex;align-items:center;gap:8px;
  padding:7px 10px;margin:0 6px 1px;border-radius:var(--r);
  font-size:11px;font-weight:500;color:var(--t2);
  transition:all 0.13s;text-decoration:none
}
.adm-lnk:hover{background:var(--s2);color:var(--t1)}
.adm-lnk.on{background:rgba(244,63,94,0.08);color:var(--rose);border-left:2px solid var(--rose)}
.adm-ico{font-size:11px;width:13px;text-align:center;flex-shrink:0}
.adm-badge{
  margin-left:auto;height:16px;min-width:16px;padding:0 4px;
  border-radius:4px;background:var(--rose);color:#fff;
  font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center
}
.adm-main{margin-left:220px;flex:1;display:flex;flex-direction:column;min-width:0}
.adm-top{
  height:52px;background:var(--s0);border-bottom:1px solid var(--b1);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;position:sticky;top:0;z-index:90
}
.adm-top-title{font-size:13px;font-weight:600;letter-spacing:-0.015em}
.adm-content{padding:22px 24px}

.adm-metrics{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:12px;margin-bottom:22px
}
.adm-metric{
  background:var(--s1);border:1px solid var(--b1);
  border-radius:var(--r-lg);padding:16px;
  transition:border-color 0.15s
}
.adm-metric:hover{border-color:var(--b2)}
.adm-metric-ico{font-size:18px;margin-bottom:10px}
.adm-metric-val{
  font-family:'JetBrains Mono',monospace;
  font-size:24px;font-weight:500;line-height:1;
  letter-spacing:-0.02em;margin-bottom:5px
}
.adm-metric-lbl{font-size:10px;color:var(--t3);text-transform:uppercase;letter-spacing:0.08em;font-family:'JetBrains Mono',monospace}

.adm-section-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px
}
.adm-section-title{font-size:13px;font-weight:700;letter-spacing:-0.015em}

.adm-form-card{
  background:var(--s1);border:1px solid var(--b1);
  border-radius:var(--r-xl);padding:20px;margin-bottom:16px
}
.adm-form-title{
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;
  color:var(--t2);margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--b1)
}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}

.act-btn{
  display:inline-flex;align-items:center;gap:5px;
  height:24px;padding:0 9px;border-radius:var(--r-sm);
  font-size:10px;font-weight:600;cursor:pointer;
  background:var(--s3);border:1px solid var(--b1);
  color:var(--t2);transition:all 0.13s;text-decoration:none
}
.act-btn:hover{background:var(--s4);color:var(--t1)}
.act-green{border-color:rgba(15,184,160,0.25);color:var(--teal)}
.act-green:hover{background:rgba(15,184,160,0.08)}
.act-red{border-color:rgba(244,63,94,0.25);color:var(--rose)}
.act-red:hover{background:rgba(244,63,94,0.08)}
.act-sky{border-color:rgba(56,189,248,0.25);color:var(--sky)}
.act-sky:hover{background:rgba(56,189,248,0.08)}

.upload-zone{
  border:1px dashed var(--b2);border-radius:var(--r-lg);
  padding:20px;text-align:center;cursor:pointer;
  transition:border-color 0.15s,background 0.15s;position:relative
}
.upload-zone:hover{border-color:rgba(240,165,0,0.3);background:var(--gold-bg)}
.upload-zone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}

/* ================================================================
   ANIMATIONS (shared)
   ================================================================ */
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* staggered section entries */
[data-aos]{opacity:0;transform:translateY(16px);transition:opacity 0.5s ease,transform 0.5s ease}
[data-aos].visible{opacity:1;transform:translateY(0)}

/* ================================================================
   UTILS
   ================================================================ */
.c-gold{color:var(--gold2)}.c-teal{color:var(--teal)}.c-rose{color:var(--rose)}.c-sky{color:var(--sky)}
.c-t1{color:var(--t1)}.c-t2{color:var(--t2)}.c-t3{color:var(--t3)}
.fw-5{font-weight:500}.fw-6{font-weight:600}.fw-7{font-weight:700}
.font-mono{font-family:'JetBrains Mono',monospace}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media(max-width:960px){
  .nav-links{display:none}
  .hero-inner{grid-template-columns:1fr;gap:32px}
  .hero-terminal{display:none}
  .steps-grid{grid-template-columns:1fr 1fr}
  .co-grid{grid-template-columns:1fr}
  .dash-grid{grid-template-columns:1fr}
  .dash-metrics{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .adm-side{display:none}
  .adm-main{margin-left:0}
}
@media(max-width:600px){
  .hero-h1{font-size:30px}
  .hero-btns{flex-direction:column}
  .steps-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .products-grid{grid-template-columns:1fr}
  .dash-metrics{grid-template-columns:1fr 1fr}
}