/* ---------- Base ---------- */
:root{
  --bg: #0a0f14;
  --bg-2:#0d1218;
  --card:#0f1720;
  --glass: rgba(255,255,255,.06);
  --text:#e6f6f2;
  --muted:#a6c6bf;
  --brand-1:#00f5d4;
  --brand-2:#00d0ff;
  --brand-3:#6dffcb;
  --accent:#8d93ff;
  --warning:#ffc857;
  --success:#31e981;
  --shadow: 0 10px 30px rgba(0,0,0,.4);
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  background: radial-gradient(1200px 800px at 10% -10%, rgba(0, 213, 255, .15), transparent 60%),
              radial-gradient(1200px 800px at 90% 10%, rgba(0, 255, 214, .1), transparent 60%),
              var(--bg);
  color:var(--text);
  overflow-x:hidden;
}

/* animated background canvas (behind all) */
#bg{
  position:fixed; inset:0; z-index:-2;
}

.gradient{
  background: linear-gradient(90deg, var(--brand-1), var(--brand-2), var(--brand-3));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
}
.glow{ text-shadow: 0 0 18px rgba(0,245,212,.25) }

a{ color:var(--text); text-decoration:none; opacity:.96 }
a:hover{ opacity:1 }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px clamp(16px, 3vw, 28px);
  background: linear-gradient(to bottom, rgba(10,15,20,.75), rgba(10,15,20,.35) 50%, transparent);
  backdrop-filter: blur(8px);
}
.brand{ display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px }
.brand span{ font-size:1.05rem }
.site-header nav{ display:flex; align-items:center; gap:20px }
.site-header .btn{ margin-left:8px }
.menu{ display:none; background:none; border:0; padding:6px; cursor:pointer }
.menu span{ display:block; width:22px; height:2px; background:var(--text); margin:5px 0; border-radius:2px }

/* ---------- Buttons ---------- */
.btn{
  --b: var(--brand-2);
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding:12px 18px; border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
  color:var(--text); font-weight:700; letter-spacing:.2px;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0, 245, 212, .08) }
.btn.primary{
  background: radial-gradient(120% 120% at 50% 0%, rgba(0,245,212,.15), rgba(0,208,255,.1) 60%, rgba(255,255,255,.06));
  border-color: rgba(0,245,212,.3);
}
.btn.ghost{ background: transparent; border-color: rgba(255,255,255,.14) }
.btn.small{ padding:8px 12px; font-weight:600; border-radius:10px }

/* ---------- Hero ---------- */
.hero{
  display:grid; grid-template-columns: 1.4fr 1fr;
  gap: clamp(24px, 3vw, 48px);
  align-items:center;
  padding: clamp(40px, 8vw, 120px) clamp(16px, 5vw, 72px);
  min-height: 78vh;
}
.hero__content h1{ font-size: clamp(38px, 7.2vw, 86px); line-height: .98; margin: 4px 0 14px }
.lead{ color:var(--muted); max-width: 720px; font-size: clamp(16px, 2.1vw, 18px) }
.cta{ margin-top:18px; display:flex; gap:12px; flex-wrap:wrap }
.stats{ margin-top:22px; display:flex; gap:26px; flex-wrap:wrap }
.stats .stat{ font-size: clamp(20px, 4vw, 32px); font-weight:800 }
.stats small{ display:block; color:var(--muted) }

.hero__visual{ position:relative; height: 420px; }
.orb{ position:absolute; border-radius:50%; filter: blur(18px); opacity:.6; mix-blend-mode: screen }
.orb--1{ width:220px; height:220px; right:10%; top:10%; background: radial-gradient(circle at 30% 30%, var(--brand-2), transparent 60%) }
.orb--2{ width:260px; height:260px; left:5%; bottom:10%; background: radial-gradient(circle at 60% 60%, var(--brand-1), transparent 60%) }

.chip{ position:absolute; inset:0; margin:auto; width:280px; height:280px; border-radius:50%;
  display:grid; place-items:center;
  background: radial-gradient(120px 120px at 50% 50%, rgba(0,208,255,.18), rgba(0,0,0,0) 60%);
  animation: float 6s ease-in-out infinite;
}
.chip__core{
  width:120px; height:120px; border-radius:20px; display:grid; place-items:center;
  background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(255,255,255,.06);
  font-weight:800; letter-spacing:1px;
}
.chip__ring{ position:absolute; border: 2px dashed rgba(0,245,212,.4); border-radius:50%; animation: spin 30s linear infinite }
.chip__ring--1{ width:200px; height:200px }
.chip__ring--2{ width:260px; height:260px; animation-direction: reverse }
@keyframes spin{ to{ transform: rotate(360deg) } }
@keyframes float{ 0%,100%{ transform: translateY(-8px) } 50%{ transform: translateY(8px) } }

/* ---------- Sections ---------- */
.section{ padding: clamp(56px, 8vw, 100px) clamp(16px, 5vw, 72px) }
.section.alt{ background: linear-gradient(to bottom, rgba(255,255,255,.02), rgba(255,255,255,.0)) }
.section__head{ margin-bottom: 26px }
.section__title{ font-size: clamp(26px, 4.2vw, 42px); margin:0 0 8px }
.section__sub{ color:var(--muted) }

.grid{ display:grid; gap: 18px }
.features{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) }
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
}
.card::after{
  content:""; position:absolute; inset:auto -20% 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  transform: translateY(-4px);
}
.feature .icon{ width:44px; height:44px; border-radius:12px; margin-bottom:10px;
  background: radial-gradient(80% 80% at 30% 20%, rgba(255,255,255,.2), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.14);
}
.i-ai { mask: url(#) }
.feature h3{ margin:6px 0 6px }
.feature p{ color:var(--muted) }

/* POS demo */
.pos-demo{
  display:grid; grid-template-columns: 320px 1fr; gap: 18px; align-items:center;
}
.phone{
  width: 320px; height: 620px; border-radius: 32px; padding: 18px;
  background: linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.16);
  position:relative; box-shadow: var(--shadow);
}
.notch{ position:absolute; top:10px; left:50%; transform: translateX(-50%); width:140px; height:24px; border-radius:0 0 14px 14px; background: rgba(0,0,0,.5) }
.screen{
  position:absolute; inset: 56px 12px 12px; border-radius: 24px; padding: 16px;
  background: radial-gradient(200px 260px at 100% 0%, rgba(141,147,255,.18), rgba(0,0,0,0) 60%), rgba(12,17,24,.9);
  display:grid; grid-template-rows: auto 1fr auto; gap: 14px;
}
.receipt{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:14px }
.receipt .row{ display:flex; justify-content:space-between; padding:6px 0; border-bottom: 1px dashed rgba(255,255,255,.12) }
.receipt .row.total{ font-weight:800 }
.qr{ height: 180px; border-radius: 12px; background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.02)); border: 1px dashed rgba(255,255,255,.16) }
.shimmer{
  position:relative; overflow:hidden;
}
.shimmer::before{
  content:""; position:absolute; inset:0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
  animation: shimmer 2.2s infinite;
}
@keyframes shimmer { 100%{ transform: translateX(100%) } }
.pay{ width:100% }
.pulse{ animation: pulse 2s infinite }
@keyframes pulse{
  0%,100%{ box-shadow: 0 0 0 0 rgba(0,245,212,.3) }
  50%{ box-shadow: 0 0 0 12px rgba(0,245,212,0) }
}

.ghost-card{ opacity:.9 }
.tokenomics{ grid-template-columns: 1.1fr .9fr }

/* Donut chart */
.donut{ display:grid; grid-template-columns: 160px 1fr; gap: 18px; align-items:center }
.donut__svg{ width:160px; height:160px; transform: rotate(-90deg) }
.donut .bg{ fill:none; stroke: rgba(255,255,255,.08); stroke-width: 12 }
.donut .slice{ fill:none; stroke-width:12; stroke-linecap:round; transition: stroke-dashoffset .8s ease }
.donut .presale{ stroke: var(--brand-2) }
.donut .team{ stroke: var(--accent) }
.donut .eco{ stroke: var(--brand-1) }
.donut .mkt{ stroke: #ffa8a8 }
.donut .liq{ stroke: #7be495 }
.donut__center{ font-weight:800; fill: var(--text); transform: rotate(90deg) }
.legend{ list-style:none; padding:0; margin:0 }
.legend li{ display:flex; align-items:center; gap:10px; margin:6px 0; color:var(--muted) }
.dot{ width:10px; height:10px; border-radius:50% }
.dot.presale{ background: var(--brand-2) }
.dot.team{ background: var(--accent) }
.dot.eco{ background: var(--brand-1) }
.dot.mkt{ background: #ffa8a8 }
.dot.liq{ background: #7be495 }

/* Contract */
.contract{ grid-template-columns: 1.2fr .8fr }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace }
.pill{
  padding: 10px 12px; border-radius: 10px; background: rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.14);
  overflow-wrap:anywhere;
}
.actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px }
.qr-card{ display:grid; place-items:center }

/* Timeline */
.timeline{ list-style:none; padding:0; margin:0; border-left: 2px solid rgba(255,255,255,.1); padding-left: 16px }
.milestone{ position:relative; margin: 14px 0 18px }
.milestone .dot{ position:absolute; left:-22px; top:4px; width:10px; height:10px; border-radius:50%;
  background: var(--brand-2); box-shadow: 0 0 12px rgba(0,208,255,.45);
}

/* CTA section */
.cta-section .cta-box{ text-align:center }
.cta-section .cta{ justify-content:center }

/* ---------- Footer ---------- */
.site-footer{ padding: 26px clamp(16px, 5vw, 72px); border-top: 1px solid rgba(255,255,255,.1) }
.site-footer .grid{ grid-template-columns: 1fr auto auto; align-items:center }
.foot-brand{ display:flex; align-items:center; gap:10px }
.foot-links{ display:flex; gap:14px; flex-wrap:wrap }
.foot-copy{ color:var(--muted) }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .hero{ grid-template-columns: 1fr; }
  .hero__visual{ order: -1; height: 360px }
  .tokenomics{ grid-template-columns: 1fr }
  .contract{ grid-template-columns: 1fr }
  .pos-demo{ grid-template-columns: 1fr }
  .site-footer .grid{ grid-template-columns: 1fr; gap: 12px }
  .site-header nav{ display:none }
  .menu{ display:block }
  .site-header.open nav{
    display:flex; position:absolute; top:64px; right:16px;
    flex-direction:column; align-items:stretch; gap:10px;
    padding:12px; background: rgba(12,17,24,.95); border:1px solid rgba(255,255,255,.12); border-radius:12px;
  }
}

/* small polish */
.card:hover{ transform: translateY(-2px); transition: transform .18s ease }
.foot-copy{ grid-column: 1 / -1; text-align:center; margin-top:8px }
/* ---------- Footer ---------- */
.site-footer{ padding: 26px clamp(16px, 5vw, 72px); border-top: 1px solid rgba(255,255,255,.1) }
.site-footer .grid{ 
  grid-template-columns: 1fr 2fr; 
  align-items:start; 
  gap:28px; 
}
.foot-brand{ display:flex; align-items:center; gap:10px; }
.foot-links{ 
  display:grid; 
  grid-template-columns: repeat(3, minmax(160px, 1fr)); 
  gap:20px;
  grid-column: 2 / -1;
  justify-self: stretch;
}
.foot-links h4{
  margin:0 0 8px;
  font-size:0.95rem;
  font-weight:700;
  color:var(--brand-2);
}
.foot-links a{
  display:block;
  margin:4px 0;
}
.foot-copy{ 
  grid-column: 1 / -1; 
  text-align:center; 
  margin-top:16px; 
  color:var(--muted);
}

/* ---------- Cookie Banner ---------- */
.cookie-banner {
  position: fixed;
  bottom: -100px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(12,17,24,.95);
  color: var(--text);
  padding: 14px 20px;
  border-radius: 12px;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 12px;
  transition: bottom 0.6s ease;
  z-index: 50;
}
.cookie-banner a { color: var(--brand-2); text-decoration: underline; }
.cookie-banner.show { bottom: 20px; }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .foot-links{ grid-template-columns: 1fr; }
}