/* ===== tokens ===== */
:root{
  --bg:#eef1f7;
  --bg-2:#e7ebf4;
  --ink:#0b0e17;
  --ink-2:#5b6472;
  --muted:#8a93a3;
  --card:#ffffff;
  --line:rgba(16,24,48,.08);
  --violet:#5b4bff;
  --violet-2:#7b3fe4;
  --blue:#2d4bff;
  --grad:linear-gradient(100deg,#2d44ff 0%,#5b3bff 45%,#8a3df0 100%);
  --grad-btn:linear-gradient(100deg,#3a3af5 0%,#6a3ff0 100%);
  --pill-bg:#e9eafc;
  --radius:18px;
  --shadow:0 18px 50px -24px rgba(26,34,82,.28);
  --shadow-sm:0 8px 24px -14px rgba(26,34,82,.25);
  --maxw:1200px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font);color:var(--ink);
  background:
    radial-gradient(1200px 500px at 80% -5%, #f4f1ff 0%, transparent 60%),
    radial-gradient(900px 500px at 0% 10%, #eaf0ff 0%, transparent 55%),
    linear-gradient(180deg,var(--bg) 0%, var(--bg-2) 100%);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}

/* ===== nav ===== */
.nav{position:sticky;top:0;z-index:50;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:rgba(238,241,247,.72);border-bottom:1px solid var(--line);}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:16px 24px;
  display:flex;align-items:center;gap:32px;}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;}
.brand-mark{width:30px;height:30px}
.brand-name{font-size:23px;letter-spacing:-.02em}
.nav-links{display:flex;gap:30px;margin-left:12px;flex:1}
.nav-item{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:500;
  color:#2b3340;cursor:pointer;transition:color .15s}
.nav-item:hover{color:var(--violet)}
.caret{width:10px;height:6px;opacity:.55}
/* ===== buttons (единый класс .connectButton) ===== */
.connectButton{display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  background:var(--grad-btn);color:#fff;font-weight:600;font-size:16px;
  padding:14px 28px;border-radius:999px;border:none;line-height:1;text-align:center;
  box-shadow:0 14px 32px -14px rgba(74,58,240,.75);
  transition:transform .15s,box-shadow .15s}
.connectButton svg{width:19px;height:19px}
.connectButton:hover{transform:translateY(-2px);box-shadow:0 20px 40px -14px rgba(74,58,240,.85)}
.connectButton,.connectButton:visited{color:#fff;text-decoration:none;white-space:nowrap}

/* хедер — компактная */
.nav .connectButton{font-size:15px;padding:11px 22px;flex:none;
  box-shadow:0 10px 24px -10px rgba(74,58,240,.7)}
.nav .connectButton:hover{transform:translateY(-1px)}

/* hero — крупная CTA */
.hero-copy .connectButton{font-size:17px;padding:16px 30px;
  box-shadow:0 16px 34px -14px rgba(74,58,240,.75)}
.hero-copy .connectButton svg{width:20px;height:20px}

/* ignition — на тёмной карточке */
.ignition .connectButton{font-size:17px;padding:16px 30px;
  box-shadow:0 16px 34px -10px rgba(120,90,255,.6)}

/* horizon — белая на видео */
.horizon .connectButton{background:#fff;color:var(--violet);font-size:17px;padding:16px 30px;
  box-shadow:0 16px 40px -12px rgba(10,16,40,.5)}
.horizon .connectButton:visited{color:var(--violet)}
.horizon .connectButton:hover{box-shadow:0 20px 44px -12px rgba(10,16,40,.6)}

/* ===== hero ===== */
.hero{position:relative;max-width:var(--maxw);margin:0 auto;padding:60px 24px 40px;overflow:visible}
.hero-bg{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.hero-glow{position:absolute;right:6%;top:34%;width:560px;height:440px;
  background:
    radial-gradient(circle at 60% 55%, rgba(92,74,255,.42) 0%, transparent 55%),
    radial-gradient(circle at 42% 70%, rgba(45,92,255,.38) 0%, transparent 55%),
    radial-gradient(circle at 60% 82%, rgba(224,90,120,.25) 0%, transparent 50%);
  filter:blur(44px);opacity:.9}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;
  gap:40px;align-items:center;min-height:480px}

.pill{display:inline-flex;align-items:center;gap:8px;background:var(--pill-bg);
  color:var(--violet);font-weight:700;font-size:12.5px;letter-spacing:.08em;
  padding:8px 15px;border-radius:999px}
.pill .bolt{width:14px;height:14px}
.hero-title{font-size:82px;line-height:.98;font-weight:800;letter-spacing:-.035em;
  margin:22px 0 0}
.hero-title .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;
  color:transparent}
.hero-sub{max-width:460px;color:var(--ink-2);font-size:18px;margin:22px 0 32px}
.hero-sub strong{color:var(--ink);font-weight:700}

/* ===== hero visual ===== */
.hero-visual{position:relative;height:520px}
.glass{background:linear-gradient(135deg,rgba(255,255,255,.75),rgba(255,255,255,.4));
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.7);box-shadow:var(--shadow)}
.vote-card{position:absolute;top:10px;right:38px;width:330px;border-radius:20px;
  padding:18px;z-index:4}
.vote-head{display:flex;gap:11px;margin-bottom:16px}
.vote-ico{flex:none;width:34px;height:34px;border-radius:9px;background:#edeafe;
  display:grid;place-items:center;color:var(--violet)}
.vote-ico svg{width:19px;height:19px}
.vote-title{font-weight:700;font-size:15.5px}
.vote-desc{font-size:12.5px;color:var(--ink-2);margin-top:2px;line-height:1.4}
.vote-opt{display:flex;align-items:center;gap:11px;padding:13px 15px;border-radius:12px;
  margin-top:9px;cursor:pointer;font-size:14px;transition:background .15s}
.vote-opt.active{background:linear-gradient(100deg,rgba(91,75,255,.16),rgba(138,61,240,.12));
  border:1px solid rgba(91,75,255,.3)}
.vote-opt:not(.active){background:rgba(255,255,255,.55);border:1px solid var(--line)}
.radio{flex:none;width:18px;height:18px;border-radius:50%;border:2px solid #b9bed0;
  display:grid;place-items:center}
.vote-opt.active .radio{border-color:var(--violet)}
.vote-opt.active .radio span{width:9px;height:9px;border-radius:50%;background:var(--violet)}
.opt-name{font-weight:600}
.opt-date{margin-left:auto;color:var(--ink-2);font-weight:500}

.boost-badge{position:absolute;top:150px;right:-6px;z-index:5;border-radius:20px;
  padding:16px 22px;display:flex;align-items:center;gap:8px;
  font-size:46px;font-weight:800;letter-spacing:-.03em;color:#6a3ff0;
  background:linear-gradient(135deg,rgba(150,130,255,.5),rgba(190,170,255,.28));}
.boost-badge svg{width:26px;height:26px;color:#4a7bff}

/* ===== glass scene ===== */
.stage{position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:420px;height:350px}

/* big transparent glass tray */
.glass-tray{position:absolute;left:50%;bottom:48px;transform:translateX(-50%);
  width:340px;height:98px;border-radius:50%;z-index:1;
  background:
    radial-gradient(ellipse at 50% 32%, rgba(255,255,255,.4) 0%, rgba(210,222,248,.14) 55%, rgba(170,188,232,.08) 100%);
  border:1.5px solid rgba(255,255,255,.8);
  box-shadow:
    0 34px 54px -26px rgba(48,66,138,.5),
    inset 0 3px 10px rgba(255,255,255,.95),
    inset 0 -14px 26px rgba(120,142,205,.28);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.glass-tray::after{content:"";position:absolute;left:50%;bottom:-11px;transform:translateX(-50%);
  width:312px;height:86px;border-radius:50%;z-index:-1;
  border:1.5px solid rgba(255,255,255,.45);
  background:linear-gradient(180deg,transparent 40%,rgba(165,186,232,.2))}

/* metal pedestal */
.metal-base{position:absolute;left:50%;bottom:72px;transform:translateX(-50%);
  width:196px;height:62px;z-index:2}
.metal-side{position:absolute;left:0;top:22px;width:196px;height:34px;
  border-radius:0 0 50% 50%/0 0 100% 100%;
  background:linear-gradient(90deg,#8e9cbe 0%,#eef2fb 20%,#c4cfe6 44%,#aab6d6 60%,#e2e8f5 84%,#889ab8 100%);
  box-shadow:inset 0 -6px 12px rgba(90,105,160,.45)}
.metal-top{position:absolute;left:0;top:0;width:196px;height:46px;border-radius:50%;
  background:radial-gradient(ellipse at 50% 36%,#f6f9fe 0%,#d2dbee 52%,#a8b5d6 100%);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:inset 0 3px 9px rgba(255,255,255,.95),inset 0 -8px 16px rgba(118,134,190,.5)}

/* glass ball with logo inside */
.glass-ball{position:absolute;left:50%;bottom:104px;transform:translateX(-50%);
  width:152px;height:152px;border-radius:50%;z-index:3;overflow:hidden;
  display:grid;place-items:center;
  background:
    radial-gradient(circle at 34% 26%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.3) 16%, transparent 42%),
    radial-gradient(circle at 72% 78%, rgba(176,198,246,.55) 0%, transparent 56%),
    linear-gradient(158deg, rgba(236,241,253,.6), rgba(203,215,246,.42));
  border:1px solid rgba(255,255,255,.7);
  box-shadow:
    0 26px 42px -16px rgba(48,60,130,.5),
    inset 0 -16px 32px rgba(128,150,212,.45),
    inset 7px 9px 22px rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  animation:float 6s ease-in-out infinite}
.ball-logo{width:84px;transform:rotate(-6deg);
  filter:saturate(1.2) drop-shadow(0 3px 7px rgba(60,80,170,.35))}
.ball-hi{position:absolute;top:16px;left:28px;width:48px;height:30px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,255,255,.95),transparent 70%);
  transform:rotate(-22deg);pointer-events:none}
@keyframes float{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-11px)}}

/* glass ice cubes */
.cube{position:absolute;border-radius:8px;z-index:4;
  background:linear-gradient(135deg,rgba(255,255,255,.62),rgba(188,204,246,.32));
  border:1px solid rgba(255,255,255,.82);
  box-shadow:
    inset 0 2px 6px rgba(255,255,255,.92),
    inset 0 -7px 13px rgba(128,150,210,.4),
    0 12px 22px -12px rgba(48,60,130,.5);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  animation:bob 7s ease-in-out infinite}
.cube::before{content:"";position:absolute;inset:0;border-radius:7px;
  background:linear-gradient(135deg,transparent 48%,rgba(255,255,255,.55) 50%,transparent 54%)}
.c1{width:32px;height:32px;left:14px;top:150px;transform:rotate(16deg)}
.c2{width:22px;height:22px;left:74px;top:258px;transform:rotate(-14deg);animation-delay:.6s}
.c3{width:36px;height:36px;right:30px;top:108px;transform:rotate(22deg);animation-delay:1s}
.c4{width:24px;height:24px;right:6px;top:224px;transform:rotate(-18deg);animation-delay:1.5s}
.c5{width:18px;height:18px;left:158px;top:40px;transform:rotate(12deg);animation-delay:.3s}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -13px}}

/* ===== feature cards ===== */
.features{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);
  gap:18px;margin-top:30px}
.feat-card{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.72);
  border:1px solid var(--line);border-radius:16px;padding:20px;
  box-shadow:var(--shadow-sm);backdrop-filter:blur(8px)}
.feat-ico{flex:none;width:44px;height:44px;border-radius:50%;background:#edeafe;
  display:grid;place-items:center;color:var(--violet)}
.feat-ico svg{width:22px;height:22px}
.feat-label{display:block;font-size:13px;color:var(--ink-2);font-weight:500}
.feat-value{display:block;font-size:17px;font-weight:700;margin-top:2px}
.feat-value.accent{color:var(--violet)}

/* ===== tge strip ===== */
.tge-strip{display:flex;align-items:center;gap:20px;margin-top:30px;padding-top:22px;
  border-top:1px solid var(--line)}
.tge-left{display:flex;align-items:center;gap:12px}
.tge-cal{width:18px;height:18px;color:var(--muted)}
.tge-label{font-size:12.5px;font-weight:700;letter-spacing:.08em;color:#4a5566}
.tge-tag{font-size:11px;font-weight:700;letter-spacing:.07em;color:var(--violet);
  background:var(--pill-bg);padding:5px 11px;border-radius:999px}
.tge-line{flex:1;height:1px;background:linear-gradient(90deg,rgba(91,75,255,.3),transparent)}
.tge-right{font-size:12px;font-weight:700;letter-spacing:.09em;color:var(--muted)}

/* ===== generic section ===== */
.section{max-width:var(--maxw);margin:0 auto;padding:90px 24px}
.sec-head{max-width:720px}
.sec-head.center{margin:0 auto;text-align:center}
.eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--violet);margin-bottom:14px}
.eyebrow.light{color:rgba(255,255,255,.85)}
.section h2{font-size:42px;line-height:1.08;font-weight:800;letter-spacing:-.03em;margin:0}
.sec-head p{color:var(--ink-2);font-size:18px;margin-top:16px}

/* dynamics */
.banner-frame{margin-top:40px;border-radius:24px;overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow)}
.banner-frame img{width:100%;height:420px;object-fit:cover}

/* product */
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:48px}
.prod-card{background:var(--card);border:1px solid var(--line);border-radius:20px;
  padding:16px;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s}
.prod-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.prod-shot{background:linear-gradient(160deg,#0e1222,#1a1f36);border-radius:14px;
  padding:22px;display:grid;place-items:center;min-height:150px;margin-bottom:18px}
.prod-shot img{max-height:120px;width:auto}
.prod-card h3{font-size:19px;font-weight:700;margin:0 0 6px;padding:0 6px}
.prod-card p{font-size:14.5px;color:var(--ink-2);margin:0 0 10px;padding:0 6px}

/* ignition */
.ignition-card{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;
  background:linear-gradient(135deg,#10142a 0%,#1c1540 60%,#2a1a55 100%);
  border-radius:28px;padding:56px;color:#fff;overflow:hidden;position:relative;
  box-shadow:0 40px 80px -40px rgba(30,20,80,.7)}
.ignition-copy .eyebrow{color:#a99bff}
.ignition-card h2{color:#fff;font-size:38px}
.ignition-copy p{color:rgba(255,255,255,.72);font-size:18px;margin:16px 0 28px;max-width:440px}
.ignition-shot img{width:100%;border-radius:16px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}

/* faq */
.faq-banner{position:relative;border-radius:24px;overflow:hidden;margin-bottom:44px}
.faq-banner img{width:100%;height:200px;object-fit:cover}
.faq{padding-top:70px}
.faq-banner-text{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center}
.faq-banner-text h2{color:#0b0e17;font-size:58px}
.faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.faq-list details{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:4px 24px;box-shadow:var(--shadow-sm)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;padding:20px 0;font-size:18px;font-weight:600}
.faq-list summary::-webkit-details-marker{display:none}
.plus{position:relative;width:18px;height:18px;flex:none}
.plus::before,.plus::after{content:"";position:absolute;background:var(--violet);border-radius:2px;
  transition:transform .2s}
.plus::before{left:0;top:8px;width:18px;height:2px}
.plus::after{left:8px;top:0;width:2px;height:18px}
.faq-list details[open] .plus::after{transform:rotate(90deg);opacity:0}
.faq-list details p{margin:0 0 22px;color:var(--ink-2);font-size:16px;max-width:680px}

/* horizon */
.horizon{position:relative;overflow:hidden;min-height:560px;display:grid;place-items:center;
  text-align:center;color:#fff}
.horizon-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.horizon::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(10,20,45,.25),rgba(10,20,45,.55))}
.horizon-inner{position:relative;z-index:2;padding:80px 24px;max-width:680px}
.horizon-lite{width:300px;margin:0 auto 28px;border-radius:14px;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.6)}
.horizon h2{color:#fff;font-size:54px;letter-spacing:-.03em;margin:0}
.horizon p{color:rgba(255,255,255,.88);font-size:19px;margin:18px auto 30px;max-width:460px}

/* footer */
.footer{background:#0b0e1a;color:#c3c9d6;padding:70px 24px 30px}
.footer-inner{max-width:var(--maxw);margin:0 auto;display:grid;
  grid-template-columns:1.3fr 2fr;gap:50px}
.footer-brand .brand{color:#fff}
.footer-brand .brand-name{color:#fff}
.footer-brand>p{margin:18px 0;color:#8a93a6;max-width:300px;font-size:15px}
.chain-chip{display:inline-flex;align-items:center;gap:8px;font-size:13px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  padding:8px 14px;border-radius:999px}
.chain-chip img{width:16px;height:16px}
.footer-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.footer-cols h4{color:#fff;font-size:15px;margin:0 0 16px}
.footer-cols a{display:block;color:#8a93a6;font-size:14.5px;margin-bottom:11px;transition:color .15s}
.footer-cols a:hover{color:#fff}
.footer-bottom{max-width:var(--maxw);margin:50px auto 0;padding-top:24px;
  border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;
  font-size:12.5px;color:#6b7488;letter-spacing:.04em}

/* ===== responsive ===== */
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:10px}
  .hero-title{font-size:64px}
  .hero-visual{height:460px;margin-top:10px}
  .features{grid-template-columns:repeat(2,1fr)}
  .product-grid{grid-template-columns:repeat(2,1fr)}
  .footer-inner{grid-template-columns:1fr}
  .ignition-card{grid-template-columns:1fr;padding:40px}
  .section h2{font-size:34px}
}
@media(max-width:620px){
  .nav-links{display:none}
  .hero{padding-top:36px}
  .hero-title{font-size:50px}
  .hero-sub{font-size:16px}
  .hero-visual{height:420px}
  .vote-card{right:50%;transform:translateX(50%);width:300px}
  .boost-badge{right:4px;top:200px;font-size:34px;padding:12px 16px}
  .features{grid-template-columns:1fr}
  .product-grid{grid-template-columns:1fr}
  .tge-strip{flex-wrap:wrap;gap:12px}
  .tge-line,.tge-right{display:none}
  .footer-cols{grid-template-columns:repeat(2,1fr)}
  .footer-bottom{flex-direction:column;gap:8px}
  .faq-banner-text h2{font-size:42px}
  .horizon h2{font-size:38px}
  .section{padding:60px 20px}
}