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

:root {
  --bg:       #F4F6FF;
  --bg-alt:   #ECEFFE;
  --card:     #FFFFFF;
  --border:   rgba(0,0,0,0.07);
  --border-md:rgba(0,0,0,0.13);

  --dk:       #05020F;
  --dk-1:     #0A061E;
  --dk-card:  rgba(255,255,255,0.055);
  --dk-border:rgba(255,255,255,0.1);

  --t1:   #0B0E2D;
  --t2:   #4A5280;
  --t3:   #8E96B8;

  --dt1:  #EEF2FF;
  --dt2:  #7880A8;
  --dt3:  #353860;

  --violet:  #7C5CF0;
  --blue:    #3B82F6;
  --cyan:    #06B6D4;
  --rose:    #F43F5E;
  --amber:   #F59E0B;
  --emerald: #10B981;

  --grad:       linear-gradient(135deg, #7C5CF0 0%, #3B82F6 100%);
  --grad-warm:  linear-gradient(135deg, #F43F5E 0%, #F59E0B 100%);
  --grad-cool:  linear-gradient(135deg, #06B6D4 0%, #3B82F6 100%);
  --grad-text:  linear-gradient(135deg, #9B7CF4 0%, #5BA4F8 100%);

  --glow:       rgba(123,92,240,0.35);
  --glow-soft:  rgba(123,92,240,0.15);
  --glow-blue:  rgba(59,130,246,0.22);

  --font: 'Plus Jakarta Sans', system-ui, sans-serif;
  --mono: 'Space Mono', monospace;

  /* Legacy aliases */
  --glass:      rgba(255,255,255,.07);
  --a2:         #7C5CF0;
  --a3:         #C4B5FD;
  --text:       #EEF2FF;
  --text-muted: #7880A8;
  --text-dim:   #353860;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--t1);
  font-family: var(--font);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

main { position: relative; z-index: 1; }
.page-wrapper { padding-top: 68px; }

/* ─── GRADIENT TEXT ─── */
.gt, .gt-a {
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gt-warm {
  background: var(--grad-warm);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gt-cool {
  background: var(--grad-cool);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── NAV ─── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 52px;
  background: rgba(244,246,255,0.85);
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  border-bottom: 1px solid rgba(124,92,240,.1);
  transition: all .35s;
}

.nav.on-dark {
  background: rgba(5,2,15,0.78);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.nav-logo {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .5px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nav.on-dark .nav-logo {
  background: linear-gradient(135deg,#fff 0%,#C4B5FD 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.nav-logo-icon {
  width: 32px; height: 32px;
  background: var(--grad);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px var(--glow-soft);
  flex-shrink: 0;
}

.nav-links { display: flex; gap: 32px; list-style: none; }

.nav-links a {
  color: var(--t2);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color .2s;
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0; right: 0;
  height: 2px;
  background: var(--grad);
  border-radius: 2px;
  transform: scaleX(0);
  transition: transform .25s;
}
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.nav-links a:hover { color: var(--t1); }
.nav-links a.active { color: var(--violet); }

.nav.on-dark .nav-links a { color: var(--dt2); }
.nav.on-dark .nav-links a:hover { color: var(--dt1); }
.nav.on-dark .nav-links a.active { color: #C4B5FD; }

.nav-cta {
  background: var(--grad);
  color: #fff;
  padding: 10px 22px;
  border-radius: 10px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: all .25s;
  box-shadow: 0 4px 18px var(--glow-soft);
}

.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 32px var(--glow); }

/* ─── HERO ─── */
.hero {
  background: #05020F;
  color: var(--dt1);
  min-height: calc(100vh - 68px);
  padding: 100px 52px 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Aurora blobs */
.hero-aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.ha-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  animation: ha-float 14s ease-in-out infinite;
}

.ha-1 {
  width: 520px; height: 520px;
  background: rgba(124,92,240,.45);
  top: -180px; left: -140px;
  animation-delay: 0s;
}
.ha-2 {
  width: 420px; height: 420px;
  background: rgba(6,182,212,.35);
  top: 60px; right: -160px;
  animation-delay: -4s;
}
.ha-3 {
  width: 380px; height: 380px;
  background: rgba(244,63,94,.28);
  bottom: -80px; left: 18%;
  animation-delay: -8s;
}
.ha-4 {
  width: 300px; height: 300px;
  background: rgba(59,130,246,.3);
  bottom: 40px; right: 14%;
  animation-delay: -11s;
}

@keyframes ha-float {
  0%,100% { transform: translate(0,0) scale(1); }
  33%  { transform: translate(28px,-24px) scale(1.06); }
  66%  { transform: translate(-18px,18px) scale(.94); }
}

.hero-dot-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 1;
}

/* wave bottom edge */
.hero::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 80px;
  background: var(--bg);
  clip-path: ellipse(55% 100% at 50% 100%);
  pointer-events: none;
  z-index: 2;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(124,92,240,.15);
  border: 1px solid rgba(124,92,240,.38);
  color: #C4B5FD;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .6px;
  padding: 6px 16px;
  border-radius: 100px;
  margin-bottom: 40px;
  position: relative;
  z-index: 3;
}

.hero-badge-dot {
  width: 6px; height: 6px;
  background: #28C840;
  border-radius: 50%;
  box-shadow: 0 0 8px #28C840;
  animation: hdot 2.2s ease-in-out infinite;
}

@keyframes hdot { 0%,100%{opacity:1} 50%{opacity:.3} }

.hero-title {
  font-size: clamp(52px, 7.5vw, 104px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -3px;
  max-width: 880px;
  margin: 0 auto 28px;
  color: #fff;
  position: relative;
  z-index: 3;
}

.hero-desc {
  font-size: 18px;
  color: var(--dt2);
  line-height: 1.85;
  max-width: 500px;
  margin: 0 auto 48px;
  font-weight: 400;
  position: relative;
  z-index: 3;
}

.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  position: relative;
  z-index: 3;
}

.btn-grad {
  background: var(--grad);
  color: #fff;
  padding: 15px 34px;
  border-radius: 12px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  transition: all .25s;
  box-shadow: 0 6px 28px var(--glow-soft);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  position: relative;
  overflow: hidden;
}
.btn-grad::before {
  content:'';
  position:absolute;
  inset:0;
  background: linear-gradient(135deg,rgba(255,255,255,.18),transparent);
  opacity:0;
  transition:opacity .2s;
}
.btn-grad:hover::before { opacity:1; }
.btn-grad:hover { transform: translateY(-3px); box-shadow: 0 18px 48px var(--glow); }

.btn-outline-light {
  background: rgba(255,255,255,.07);
  color: #C4B5FD;
  padding: 15px 28px;
  border-radius: 12px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  border: 1px solid rgba(255,255,255,.15);
  transition: all .2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  backdrop-filter: blur(8px);
}
.btn-outline-light:hover { background: rgba(255,255,255,.13); border-color: rgba(196,181,253,.4); color: #fff; }

.btn-outline {
  background: transparent;
  color: var(--t2);
  padding: 15px 28px;
  border-radius: 12px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  border: 1.5px solid var(--border-md);
  transition: all .2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-outline:hover { border-color: var(--violet); color: var(--violet); background: rgba(124,92,240,.05); }

.hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 52px;
  margin-top: 60px;
  padding-top: 36px;
  border-top: 1px solid rgba(255,255,255,.08);
  width: 100%;
  max-width: 500px;
  position: relative;
  z-index: 3;
}

.stat-num {
  display: block;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -1px;
  background: linear-gradient(135deg,#fff 0%,#C4B5FD 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.stat-label { display:block; font-size:12px; color:var(--dt2); margin-top:3px; letter-spacing:.3px; }

.hero-visual {
  width: 100%;
  max-width: 820px;
  margin: 64px auto 0;
  position: relative;
  z-index: 3;
}

.hero-visual::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 80%; height: 60%;
  background: radial-gradient(ellipse, rgba(124,92,240,.22) 0%, transparent 70%);
  pointer-events: none;
}

/* ─── MOCKUP ─── */
.mockup-wrap {
  background: rgba(8,5,28,0.82);
  backdrop-filter: blur(28px);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 70px 130px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.04),
    inset 0 1px 0 rgba(255,255,255,.1);
}

.mockup-bar {
  background: rgba(255,255,255,.04);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.mdc { width:10px; height:10px; border-radius:50%; }
.mdc.r{background:#FF5F57} .mdc.y{background:#FEBC2E} .mdc.g{background:#28C840}

.mockup-bar-title { margin-left:10px; font-size:12px; color:var(--dt2); font-family:var(--mono); }
.mockup-body { padding: 20px; background: rgba(0,0,0,.28); }

.fake-ss {
  width: 100%;
  background: #07041A;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.05);
}

.fake-browser-bar {
  background: #0C092A;
  height: 36px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}

.fbdot { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.1); }
.fb-url { flex:1; height:18px; background:rgba(255,255,255,.06); border-radius:4px; max-width:240px; margin-left:8px; }

.fake-content-area { padding:18px 16px; display:flex; flex-direction:column; gap:8px; }
.fl { height:10px; background:rgba(255,255,255,.06); border-radius:3px; }
.fl.s{width:52%} .fl.m{width:76%} .fl.l{width:96%}
.fl.h{height:48px; background:rgba(255,255,255,.03); border-radius:6px;}
.fl.b{height:16px; width:96px; background:rgba(124,92,240,.2); border-radius:3px;}

.ann-box { position:absolute; border:1.5px solid #7C5CF0; background:rgba(124,92,240,.08); border-radius:4px; pointer-events:none; }

.ann-label {
  position:absolute;
  background: var(--grad);
  color:#fff;
  font-size:10px;
  font-family:var(--mono);
  padding:4px 10px;
  border-radius:5px;
  white-space:nowrap;
  pointer-events:none;
  font-weight:700;
  box-shadow:0 4px 14px var(--glow-soft);
}

.tool-row { display:flex; gap:6px; margin-top:14px; flex-wrap:wrap; }

.tool-btn {
  width:40px; height:40px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09);
  border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:rgba(255,255,255,.4);
  transition:all .2s;
}
.tool-btn:hover, .tool-btn.active {
  background:rgba(124,92,240,.2);
  border-color:rgba(124,92,240,.5);
  color:#C4B5FD;
  box-shadow:0 0 0 3px rgba(124,92,240,.12);
}

/* ─── LIGHT SECTIONS ─── */
.section { padding: 96px 52px; position: relative; z-index: 1; background: var(--card); }
.section.alt { background: var(--bg-alt); }
.section.bg-white { background: #fff; }

.slabel {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--violet);
  letter-spacing: 1.8px;
  text-transform: uppercase;
  margin-bottom: 16px;
  background: rgba(124,92,240,.07);
  border: 1px solid rgba(124,92,240,.18);
  padding: 5px 14px 5px 10px;
  border-radius: 100px;
}

.slabel::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--grad);
  border-radius: 50%;
  flex-shrink: 0;
}

.stitle {
  font-size: clamp(36px, 5.5vw, 68px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -1.5px;
  color: var(--t1);
  margin-bottom: 20px;
}

.sdesc { font-size:16px; color:var(--t2); line-height:1.9; max-width:520px; }

.dark-sect .slabel { color:#C4B5FD; background:rgba(124,92,240,.15); border-color:rgba(124,92,240,.3); }
.dark-sect .stitle { color:#fff; }
.dark-sect .sdesc { color:var(--dt2); }

/* ─── FEATURE CARDS ─── */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 52px;
}

.feat-card {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 18px;
  padding: 32px 28px 28px;
  transition: all .35s cubic-bezier(.22,.61,.36,1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 14px rgba(0,0,0,.04);
}

/* subtle inner glow on hover */
.feat-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
  opacity: 0;
  transition: opacity .35s;
  pointer-events: none;
}

.feat-card:nth-child(1)::after { box-shadow: inset 0 0 60px rgba(124,92,240,.06); }
.feat-card:nth-child(2)::after { box-shadow: inset 0 0 60px rgba(59,130,246,.06); }
.feat-card:nth-child(3)::after { box-shadow: inset 0 0 60px rgba(6,182,212,.06); }
.feat-card:nth-child(4)::after { box-shadow: inset 0 0 60px rgba(244,63,94,.06); }
.feat-card:nth-child(5)::after { box-shadow: inset 0 0 60px rgba(245,158,11,.06); }
.feat-card:nth-child(6)::after { box-shadow: inset 0 0 60px rgba(16,185,129,.06); }
.feat-card:hover::after { opacity:1; }

.feat-card:nth-child(1) { border-top: 3px solid var(--violet); }
.feat-card:nth-child(2) { border-top: 3px solid var(--blue); }
.feat-card:nth-child(3) { border-top: 3px solid var(--cyan); }
.feat-card:nth-child(4) { border-top: 3px solid var(--rose); }
.feat-card:nth-child(5) { border-top: 3px solid var(--amber); }
.feat-card:nth-child(6) { border-top: 3px solid var(--emerald); }

.feat-card:hover {
  transform: translateY(-8px);
  border-color: rgba(124,92,240,.15);
}

.feat-card:nth-child(1):hover { box-shadow: 0 24px 52px rgba(124,92,240,.12); }
.feat-card:nth-child(2):hover { box-shadow: 0 24px 52px rgba(59,130,246,.12); }
.feat-card:nth-child(3):hover { box-shadow: 0 24px 52px rgba(6,182,212,.12); }
.feat-card:nth-child(4):hover { box-shadow: 0 24px 52px rgba(244,63,94,.12); }
.feat-card:nth-child(5):hover { box-shadow: 0 24px 52px rgba(245,158,11,.12); }
.feat-card:nth-child(6):hover { box-shadow: 0 24px 52px rgba(16,185,129,.12); }

.feat-num { font-family:var(--mono); font-size:10px; color:var(--t3); letter-spacing:1.5px; margin-bottom:18px; }

.feat-icon-wrap {
  width: 48px; height: 48px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  transition: transform .3s;
}

.feat-card:nth-child(1) .feat-icon-wrap { background: rgba(124,92,240,.1); }
.feat-card:nth-child(2) .feat-icon-wrap { background: rgba(59,130,246,.1); }
.feat-card:nth-child(3) .feat-icon-wrap { background: rgba(6,182,212,.1); }
.feat-card:nth-child(4) .feat-icon-wrap { background: rgba(244,63,94,.1); }
.feat-card:nth-child(5) .feat-icon-wrap { background: rgba(245,158,11,.1); }
.feat-card:nth-child(6) .feat-icon-wrap { background: rgba(16,185,129,.1); }

.feat-card:hover .feat-icon-wrap { transform: scale(1.08) rotate(-4deg); }

.feat-icon { width:24px; height:24px; }

.feat-card:nth-child(1) .feat-icon { color:var(--violet); }
.feat-card:nth-child(2) .feat-icon { color:var(--blue); }
.feat-card:nth-child(3) .feat-icon { color:var(--cyan); }
.feat-card:nth-child(4) .feat-icon { color:var(--rose); }
.feat-card:nth-child(5) .feat-icon { color:var(--amber); }
.feat-card:nth-child(6) .feat-icon { color:var(--emerald); }

.feat-title { font-size:17px; font-weight:700; letter-spacing:-.3px; margin-bottom:8px; color:var(--t1); }
.feat-text { font-size:14px; color:var(--t2); line-height:1.75; }

/* ─── STEPS ─── */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 52px;
}

.step-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 18px;
  padding: 36px 28px;
  transition: all .3s;
  box-shadow: 0 2px 14px rgba(0,0,0,.04);
  position: relative;
  overflow: hidden;
}

.step-card::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s;
}
.step-card:hover::before { transform: scaleX(1); }
.step-card:hover { transform: translateY(-5px); box-shadow: 0 24px 48px rgba(124,92,240,.1); }

.step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 13px;
  background: var(--grad);
  color: #fff;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 22px;
  box-shadow: 0 8px 22px var(--glow-soft);
}

.step-title { font-size:19px; font-weight:700; letter-spacing:-.3px; margin-bottom:12px; color:var(--t1); }
.step-text { font-size:14px; color:var(--t2); line-height:1.75; }

/* ─── DARK CTA ─── */
.cta-band {
  background: #05020F;
  color: #fff;
  padding: 130px 52px;
  text-align: center;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.cta-band::before {
  content:'';
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:800px; height:600px;
  background:radial-gradient(ellipse, rgba(124,92,240,.2) 0%, transparent 70%);
  pointer-events:none;
}

/* aurora in cta-band */
.cta-band::after {
  content:'';
  position:absolute;
  width:500px; height:500px;
  border-radius:50%;
  background:rgba(6,182,212,.15);
  filter:blur(80px);
  bottom:-150px; right:-100px;
  pointer-events:none;
}

.cta-band .stitle { color:#fff; text-align:center; }
.cta-band .sdesc { color:var(--dt2); text-align:center; margin:0 auto 44px; }

/* ─── PAGE HERO ─── */
.page-hero {
  background: #05020F;
  color: var(--dt1);
  padding: 120px 52px 100px;
  position: relative;
  overflow: hidden;
}

/* page hero aurora */
.page-hero::before {
  content:'';
  position:absolute;
  right:-200px; top:-200px;
  width:600px; height:600px;
  border-radius:50%;
  background:rgba(124,92,240,.35);
  filter:blur(100px);
  pointer-events:none;
}

.page-hero::after {
  content:'';
  position:absolute;
  left:-100px; bottom:-100px;
  width:400px; height:400px;
  border-radius:50%;
  background:rgba(6,182,212,.22);
  filter:blur(80px);
  pointer-events:none;
  /* wave */
}

/* wave bottom */
.page-hero-wave {
  position:absolute;
  bottom:-2px; left:0; right:0;
  height:70px;
  background: var(--bg);
  clip-path: ellipse(52% 100% at 50% 100%);
  pointer-events:none;
  z-index:2;
}

.hero-dot-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 1;
}

.page-hero .slabel { color:#C4B5FD; background:rgba(124,92,240,.14); border-color:rgba(124,92,240,.28); position:relative; z-index:2; }
.page-hero .stitle { color:#fff; position:relative; z-index:2; }
.page-hero .sdesc { color:var(--dt2); position:relative; z-index:2; }

/* ─── FEAT DETAIL ─── */
.feat-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  padding: 80px 52px;
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 1;
  background: #fff;
}

.feat-detail.alt-bg { background: var(--bg-alt); }
.feat-detail.flip .feat-detail-vis { order: -1; }

.feat-detail-title { font-size:clamp(28px,4vw,48px); font-weight:800; letter-spacing:-1px; margin:14px 0 18px; line-height:1.1; color:var(--t1); }
.feat-detail-text { font-size:15px; color:var(--t2); line-height:1.9; margin-bottom:28px; }

.tag-row { display:flex; flex-wrap:wrap; gap:8px; }

.tag {
  background: rgba(124,92,240,.06);
  border: 1px solid rgba(124,92,240,.15);
  color: var(--violet);
  font-size:12px; font-weight:600;
  padding:5px 14px;
  border-radius:100px;
  transition:all .2s;
  cursor:default;
}
.tag:hover { background:rgba(124,92,240,.13); border-color:rgba(124,92,240,.32); }

/* ─── CASES ─── */
.cases-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:52px; }

.case-card {
  background:#fff;
  border:1.5px solid var(--border);
  border-radius:18px;
  overflow:hidden;
  transition:all .35s cubic-bezier(.22,.61,.36,1);
  box-shadow:0 2px 14px rgba(0,0,0,.04);
}
.case-card:hover { transform:translateY(-6px); box-shadow:0 28px 60px rgba(124,92,240,.13); border-color:rgba(124,92,240,.22); }

.case-visual { height:200px; background:#07041A; position:relative; overflow:hidden; border-bottom:1px solid var(--border); }
.case-info { padding:22px 24px; }
.case-tag { font-family:var(--mono); font-size:10px; color:var(--violet); letter-spacing:1.5px; text-transform:uppercase; margin-bottom:6px; }
.case-title { font-size:17px; font-weight:700; letter-spacing:-.3px; margin-bottom:8px; color:var(--t1); }
.case-text { font-size:13px; color:var(--t2); line-height:1.7; }

/* ─── DOWNLOAD ─── */
.dl-hero {
  background: #05020F;
  color:#fff;
  padding:130px 52px 100px;
  text-align:center;
  position:relative;
  overflow:hidden;
}

.dl-hero::before {
  content:'';
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:700px; height:700px;
  background:radial-gradient(circle, rgba(124,92,240,.2) 0%, transparent 65%);
  pointer-events:none;
}

/* aurora blobs in dl-hero */
.dl-hero-aurora-l {
  position:absolute;
  width:480px; height:480px; border-radius:50%;
  background:rgba(124,92,240,.35);
  filter:blur(90px);
  top:-160px; left:-160px;
  pointer-events:none;
  animation:ha-float 14s ease-in-out infinite;
}
.dl-hero-aurora-r {
  position:absolute;
  width:380px; height:380px; border-radius:50%;
  background:rgba(6,182,212,.28);
  filter:blur(80px);
  bottom:-80px; right:-80px;
  pointer-events:none;
  animation:ha-float 14s ease-in-out infinite;
  animation-delay:-7s;
}

.dl-hero-dot-grid {
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:28px 28px;
  pointer-events:none;
  z-index:1;
}

/* wave */
.dl-hero-wave {
  position:absolute;
  bottom:-2px; left:0; right:0;
  height:70px;
  background: var(--bg);
  clip-path: ellipse(52% 100% at 50% 100%);
  pointer-events:none;
  z-index:3;
}

.ver-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  color:#C4B5FD;
  font-family:var(--mono); font-size:11px;
  padding:7px 18px; border-radius:100px; margin-bottom:40px;
  position:relative; z-index:2;
}
.ver-dot { width:6px; height:6px; background:#28C840; border-radius:50%; box-shadow:0 0 8px #28C840; }

.dl-title {
  font-size:clamp(64px,10vw,130px);
  font-weight:800; line-height:.93;
  letter-spacing:-3.5px; margin-bottom:26px;
  color:#fff; position:relative; z-index:2;
}

.dl-desc { font-size:17px; color:var(--dt2); max-width:480px; margin:0 auto 48px; line-height:1.85; position:relative; z-index:2; }

.btn-dl {
  display:inline-flex; align-items:center; gap:12px;
  background:var(--grad); color:#fff;
  padding:18px 48px; border-radius:14px;
  text-decoration:none; font-size:16px; font-weight:700;
  transition:all .3s;
  box-shadow:0 8px 36px var(--glow-soft);
  position:relative; z-index:2;
  overflow:hidden;
}
.btn-dl::before {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.18),transparent);
  opacity:0; transition:opacity .2s;
}
.btn-dl:hover::before { opacity:1; }
.btn-dl:hover { transform:translateY(-4px); box-shadow:0 26px 60px var(--glow); }

.dl-note { display:block; font-size:12px; color:var(--dt2); font-family:var(--mono); margin-top:16px; position:relative; z-index:2; letter-spacing:.5px; }

/* sysreq */
.sysreq { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:64px; text-align:left; position:relative; z-index:2; }

.req {
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px; padding:28px;
  backdrop-filter:blur(12px);
  transition:all .25s;
}
.req:hover { background:rgba(255,255,255,.1); border-color:rgba(196,181,253,.25); }
.req-key { font-family:var(--mono); font-size:10px; color:#C4B5FD; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:10px; }
.req-val { font-size:17px; font-weight:700; color:#fff; }
.req-note { font-size:12px; color:var(--dt2); margin-top:5px; }

/* plans */
.plan-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:52px; }

.plan-card {
  background:#fff;
  border:1.5px solid var(--border);
  border-radius:20px; padding:40px 36px;
  position:relative; transition:all .35s;
  box-shadow:0 2px 14px rgba(0,0,0,.04);
}
.plan-card:hover { transform:translateY(-4px); box-shadow:0 28px 56px rgba(0,0,0,.09); }

.plan-card.featured {
  border-color: var(--violet);
  background: linear-gradient(180deg, rgba(124,92,240,.05) 0%, #fff 55%);
  box-shadow:0 8px 48px rgba(124,92,240,.18);
}
.plan-card.featured:hover { box-shadow:0 28px 64px rgba(124,92,240,.28); }

.plan-badge {
  position:absolute; top:-1px; right:28px;
  background:var(--grad); color:#fff;
  font-family:var(--mono); font-size:10px;
  letter-spacing:1.5px; padding:6px 16px;
  border-radius:0 0 10px 10px; text-transform:uppercase;
  box-shadow:0 4px 18px var(--glow-soft);
}

.plan-name { font-size:26px; font-weight:800; letter-spacing:-.5px; margin-bottom:8px; color:var(--t1); }

.plan-price {
  font-size:60px; font-weight:800;
  letter-spacing:-2px; line-height:1;
  margin:18px 0 8px;
  background:var(--grad-text);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  display:inline-block;
}
.plan-price .currency { font-size:26px; vertical-align:top; margin-top:10px; display:inline-block; }

.plan-period { font-size:13px; color:var(--t2); margin-bottom:28px; }
.plan-features { list-style:none; display:flex; flex-direction:column; gap:11px; margin-bottom:32px; }
.plan-features li { font-size:14px; color:var(--t2); display:flex; gap:10px; align-items:flex-start; }
.plan-features li::before { content:'✓'; color:var(--violet); font-family:var(--mono); font-size:12px; flex-shrink:0; margin-top:2px; font-weight:700; }
.plan-features li.dim { color:var(--t3); }
.plan-features li.dim::before { color:var(--t3); content:'–'; }

.plan-btn { display:block; text-align:center; padding:14px; border-radius:12px; font-size:14px; font-weight:600; text-decoration:none; transition:all .25s; }
.plan-btn.primary { background:var(--grad); color:#fff; box-shadow:0 4px 20px var(--glow-soft); }
.plan-btn.primary:hover { transform:translateY(-1px); box-shadow:0 12px 34px var(--glow); }
.plan-btn.secondary { background:transparent; color:var(--t2); border:1.5px solid var(--border-md); }
.plan-btn.secondary:hover { border-color:var(--violet); color:var(--violet); background:rgba(124,92,240,.05); }

.price-note { text-align:center; font-size:12px; color:var(--t3); margin-top:20px; font-family:var(--mono); }

/* changelog */
.changelog { margin-top:56px; }
.cl-version { display:flex; align-items:flex-start; gap:24px; padding:32px 0; border-bottom:1px solid var(--border); }
.cl-ver-num { font-weight:800; font-size:20px; letter-spacing:-.5px; min-width:80px; background:var(--grad-text); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.cl-ver-date { font-family:var(--mono); font-size:11px; color:var(--t3); min-width:80px; padding-top:3px; }
.cl-items { list-style:none; display:flex; flex-direction:column; gap:9px; flex:1; }
.cl-items li { font-size:14px; color:var(--t2); display:flex; gap:10px; align-items:flex-start; }
.cl-items li::before { content:'↳'; color:var(--violet); font-family:var(--mono); font-size:12px; flex-shrink:0; margin-top:1px; }

/* ─── HOWTO ─── */
.howto-step {
  display:grid; grid-template-columns:80px 1fr 1fr;
  gap:60px; align-items:start;
  padding:88px 52px;
  border-bottom:1px solid var(--border);
  background:#fff;
  position:relative; z-index:1;
}
.howto-step.alt-bg { background:var(--bg-alt); }

.howto-step-num {
  font-size:88px; font-weight:800;
  letter-spacing:-3px; line-height:1;
  background:var(--grad);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  padding-top:4px;
}

.howto-step-title { font-size:clamp(28px,4vw,44px); font-weight:800; letter-spacing:-1px; line-height:1.1; margin-bottom:18px; color:var(--t1); }
.howto-step-text { font-size:15px; color:var(--t2); line-height:1.9; }
.howto-step-tips { margin-top:24px; display:flex; flex-direction:column; gap:12px; }

.tip { display:flex; align-items:flex-start; gap:12px; font-size:14px; color:var(--t2); }
.tip-icon {
  width:22px; height:22px;
  background:rgba(124,92,240,.09);
  border:1px solid rgba(124,92,240,.2);
  border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; margin-top:1px;
}

kbd {
  background:#fff;
  border:1.5px solid var(--border-md);
  color:var(--t2);
  font-family:var(--mono);
  font-size:11px;
  padding:3px 8px; border-radius:5px;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}

/* ─── FAQ ─── */
.faq { padding:88px 52px; background:#fff; position:relative; z-index:1; }
.faq-item { border-bottom:1px solid var(--border); }
.faq-q { display:flex; align-items:center; justify-content:space-between; padding:26px 0; cursor:pointer; user-select:none; transition:color .2s; }
.faq-q:hover { color:var(--violet); }
.faq-q-text { font-size:17px; font-weight:600; color:var(--t1); transition:color .2s; }
.faq-q:hover .faq-q-text { color:var(--violet); }
.faq-arrow { width:24px; height:24px; color:var(--t3); transition:transform .3s, color .2s; flex-shrink:0; }
.faq-item.open .faq-arrow { transform:rotate(45deg); color:var(--violet); }
.faq-a { font-size:14px; color:var(--t2); line-height:1.85; padding-bottom:24px; max-height:0; overflow:hidden; transition:max-height .35s ease; }
.faq-item.open .faq-a { max-height:220px; }

/* ─── FOOTER ─── */
.footer {
  background: #07041A;
  border-top: 1px solid rgba(255,255,255,.07);
  padding: 64px 52px 36px;
  position: relative;
  z-index: 1;
  color: var(--dt2);
}

.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 52px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.footer-brand {}

.footer-logo {
  font-size: 20px; font-weight: 800; letter-spacing: .5px;
  text-decoration: none;
  background: linear-gradient(135deg,#fff 0%,#C4B5FD 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
  margin-bottom: 12px;
}

.footer-tagline {
  font-size: 13px;
  color: var(--dt2);
  line-height: 1.7;
  max-width: 240px;
  margin-bottom: 20px;
}

.footer-contact a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--dt2);
  text-decoration: none;
  margin-bottom: 8px;
  transition: color .2s;
}
.footer-contact a:hover { color: #C4B5FD; }
.footer-contact svg { flex-shrink: 0; opacity: .6; }

.footer-col-title {
  font-size: 11px;
  font-family: var(--mono);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  margin-bottom: 18px;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-links a {
  color: var(--dt2);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color .2s;
}
.footer-links a:hover { color: #C4B5FD; }

.footer-requisites { display: flex; flex-direction: column; gap: 7px; }
.footer-req-row {
  display: flex;
  gap: 10px;
  font-size: 12px;
}
.footer-req-key {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .5px;
  color: rgba(255,255,255,.28);
  min-width: 44px;
  flex-shrink: 0;
  padding-top: 1px;
}
.footer-req-val { color: var(--dt2); line-height: 1.5; }

.footer-bottom {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-top: 28px;
  flex-wrap: wrap;
}

.footer-copy {
  font-size: 12px;
  color: rgba(255,255,255,.25);
  font-family: var(--mono);
  line-height: 1.6;
}

.footer-address {
  font-size: 12px;
  color: rgba(255,255,255,.22);
  max-width: 380px;
  line-height: 1.7;
  text-align: right;
}

@media (max-width:1100px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-address { text-align: left; }
}
@media (max-width:768px) {
  .footer { padding: 48px 20px 28px; }
  .footer-top { grid-template-columns: 1fr; gap: 36px; }
  .footer-bottom { flex-direction: column; }
  .footer-address { text-align: left; }
}

/* ─── LEGAL PAGES ─── */
.legal-body { max-width: 720px; }
.legal-body h2 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.3px;
  color: var(--t1);
  margin: 40px 0 12px;
  padding-top: 40px;
  border-top: 1px solid var(--border);
}
.legal-body h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.legal-body p { font-size: 15px; color: var(--t2); line-height: 1.9; margin-bottom: 14px; }
.legal-body ul { padding-left: 20px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 8px; }
.legal-body ul li { font-size: 15px; color: var(--t2); line-height: 1.8; }
.legal-body a { color: var(--violet); text-decoration: none; }
.legal-body a:hover { text-decoration: underline; }
.legal-body strong { color: var(--t1); font-weight: 600; }

/* ─── COOKIE BANNER ─── */
.cookie-banner {
  position: fixed;
  bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 200;
  background: #0A061E;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 680px;
  width: calc(100% - 40px);
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
  backdrop-filter: blur(20px);
  transition: opacity .4s, transform .4s;
}
.cookie-banner.hidden { opacity: 0; transform: translateX(-50%) translateY(20px); pointer-events: none; }
.cookie-text { font-size: 13px; color: var(--dt2); line-height: 1.65; flex: 1; }
.cookie-text a { color: #C4B5FD; text-decoration: none; }
.cookie-text a:hover { text-decoration: underline; }
.cookie-btn {
  background: var(--grad);
  color: #fff;
  border: none;
  padding: 10px 22px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s;
  font-family: var(--font);
}
.cookie-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px var(--glow-soft); }

/* ─── REVEAL ─── */
.reveal { opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity:1; transform:none; }

/* ─── SCROLLBAR ─── */
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:rgba(124,92,240,.25); border-radius:2px; }
::-webkit-scrollbar-thumb:hover { background:rgba(124,92,240,.45); }

/* ─── RESPONSIVE ─── */
@media (max-width:1100px) {
  .feat-grid { grid-template-columns:repeat(2,1fr); }
  .feat-detail { grid-template-columns:1fr; gap:40px; }
  .feat-detail.flip .feat-detail-vis { order:0; }
  .cases-grid { grid-template-columns:1fr; }
  .sysreq { grid-template-columns:1fr; }
  .howto-step { grid-template-columns:1fr; gap:24px; }
  .steps-grid { grid-template-columns:1fr; gap:14px; }
  .plan-grid { grid-template-columns:1fr; }
}

@media (max-width:768px) {
  .nav { padding:0 20px; }
  .nav-links { display:none; }
  .section { padding:64px 20px; }
  .hero { padding:80px 20px 80px; }
  .page-hero { padding:96px 20px 72px; }
  .feat-grid { grid-template-columns:1fr; }
  .feat-detail { padding:56px 20px; }
  .howto-step { padding:56px 20px; }
  .faq { padding:64px 20px; }
  .dl-hero { padding:80px 20px 80px; }
  .footer { flex-direction:column; gap:16px; text-align:center; }
  .cta-band { padding:80px 20px; }
}