:root {
  --bg: #07111f;
  --bg-soft: #0c1728;
  --panel: rgba(255,255,255,.07);
  --panel-solid: #101c2e;
  --line: rgba(255,255,255,.12);
  --text: #f6f8fb;
  --muted: #a9b5c6;
  --primary: #7c5cff;
  --primary-2: #26d0ce;
  --success: #7df0b3;
  --dark-text: #09111e;
  --shadow: 0 30px 80px rgba(0,0,0,.34);
  --radius: 24px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.section-pad { padding: 110px 0; position: relative; }

.page-glow { position: fixed; width: 500px; height: 500px; filter: blur(120px); border-radius: 50%; opacity: .15; pointer-events: none; z-index: -1; }
.glow-one { background: var(--primary); top: -150px; right: -100px; }
.glow-two { background: var(--primary-2); bottom: -180px; left: -180px; }

.topbar { position: sticky; top: 0; z-index: 50; background: rgba(7,17,31,.78); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(255,255,255,.08); }
.nav-wrap { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 26px; }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(135deg,var(--primary),var(--primary-2)); font-weight: 900; box-shadow: 0 10px 30px rgba(124,92,255,.35); }
.brand-copy { display: flex; flex-direction: column; line-height: 1.05; }
.brand-copy strong { letter-spacing: .15em; font-size: .95rem; }
.brand-copy small { color: var(--muted); margin-top: 5px; }
.desktop-nav { display: flex; gap: 28px; color: #ccd6e3; font-size: .95rem; }
.desktop-nav a:hover { color: white; }
.menu-toggle { display: none; border: 0; background: transparent; color: white; font-size: 1.7rem; }
.mobile-menu { display: none; padding: 0 20px 20px; gap: 14px; flex-direction: column; }
.mobile-menu.open { display: flex; }

.btn { display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 14px; padding: 14px 20px; font-weight: 800; transition: .25s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-small { padding: 11px 16px; font-size: .9rem; }
.btn-large { padding: 17px 24px; }
.btn-primary { background: linear-gradient(135deg,var(--primary),#9e68ff 55%,var(--primary-2)); color: white; box-shadow: 0 15px 40px rgba(124,92,255,.32); }
.btn-ghost { border-color: var(--line); background: rgba(255,255,255,.04); }
.btn-card { width: 100%; background: rgba(255,255,255,.08); color: white; border-color: var(--line); }
.full-width { width: 100%; }
.text-link { color: var(--success); font-weight: 800; }

.hero { padding-top: 95px; }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 72px; }
.eyebrow { display: inline-block; color: var(--success); font-weight: 800; letter-spacing: .16em; font-size: .77rem; margin-bottom: 20px; }
.hero h1 { font-size: clamp(3.1rem, 7vw, 6.4rem); line-height: .95; letter-spacing: -.065em; margin: 0; max-width: 800px; }
.hero h1 span { background: linear-gradient(90deg,#b693ff,#77e8e0); -webkit-background-clip: text; color: transparent; }
.hero-lead { max-width: 700px; color: var(--muted); font-size: 1.16rem; line-height: 1.8; margin: 28px 0 30px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.trust-row { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 18px; color: #c5cfdb; font-size: .9rem; }
.trust-row span { color: var(--success); }

.hero-card { background: linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.055)); border: 1px solid rgba(255,255,255,.15); border-radius: 30px; padding: 30px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.hero-card:after { content:""; position:absolute; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle,var(--primary-2),transparent 70%); right:-90px; top:-90px; opacity:.18; }
.hero-card-top { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.mini-label { color: var(--muted); font-size: .72rem; letter-spacing: .14em; font-weight: 800; }
.hero-card h2 { margin: 8px 0 0; }
.status-pill,.chart-badge { border:1px solid rgba(125,240,179,.35); background:rgba(125,240,179,.1); color:var(--success); border-radius:999px; padding:7px 11px; font-size:.78rem; font-weight:800; }
.big-metric { padding: 34px 0 24px; }
.big-metric span { display:block; color:var(--muted); }
.big-metric strong { display:block; font-size:5.6rem; line-height:1; letter-spacing:-.08em; margin-top:8px; }
.metric-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.metric-box { padding:18px; border:1px solid var(--line); background:rgba(255,255,255,.045); border-radius:18px; }
.metric-box span,.metric-box small { display:block; color:var(--muted); font-size:.8rem; }
.metric-box strong { display:block; font-size:1.8rem; margin:8px 0 4px; }
.progress-area { margin-top:28px; padding-top:24px; border-top:1px solid var(--line); }
.progress-head { display:flex; justify-content:space-between; gap:20px; font-size:.9rem; }
.progress-track { height:10px; background:rgba(255,255,255,.08); border-radius:999px; margin:14px 0 10px; overflow:hidden; }
.progress-track span { display:block; width:76%; height:100%; background:linear-gradient(90deg,var(--primary),var(--primary-2)); border-radius:inherit; }
.progress-area small { color:var(--muted); }

.logos-strip { border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(255,255,255,.025); }
.logos-inner { min-height:92px; display:flex; align-items:center; justify-content:space-between; gap:25px; flex-wrap:wrap; color:#d7dfeb; }
.logos-inner span { color:var(--muted); }
.logos-inner strong { font-size:.95rem; }

.section-heading { max-width:760px; margin-bottom:54px; }
.section-heading.centered { margin-left:auto; margin-right:auto; text-align:center; }
.section-heading h2,.feature-copy h2,.rules-sidebar h2,.final-cta h2,.calculator-copy h2 { font-size:clamp(2.35rem,5vw,4.5rem); letter-spacing:-.055em; line-height:1.02; margin:0 0 20px; }
.section-heading p,.feature-copy p,.rules-sidebar p,.final-cta p,.calculator-copy>p { color:var(--muted); line-height:1.8; font-size:1.05rem; }

.steps-grid,.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.step-card,.pricing-card { border:1px solid var(--line); border-radius:var(--radius); background:rgba(255,255,255,.045); padding:30px; position:relative; }
.step-card:hover,.pricing-card:hover { transform:translateY(-6px); border-color:rgba(124,92,255,.5); }
.step-card,.pricing-card { transition:.25s ease; }
.step-number { position:absolute; right:24px; top:24px; color:#708096; font-weight:900; }
.step-icon { width:56px; height:56px; display:grid; place-items:center; border-radius:18px; background:linear-gradient(135deg,var(--primary),var(--primary-2)); font-size:1.4rem; font-weight:900; margin-bottom:26px; }
.step-card h3 { font-size:1.35rem; margin-bottom:14px; }
.step-card p { color:var(--muted); line-height:1.75; }
.dark-section { background:#050c16; border-top:1px solid rgba(255,255,255,.07); border-bottom:1px solid rgba(255,255,255,.07); }
.pricing-card.selected { outline:2px solid var(--primary); box-shadow:0 20px 60px rgba(124,92,255,.18); }
.pricing-card.featured { background:linear-gradient(180deg,rgba(124,92,255,.18),rgba(255,255,255,.05)); }
.popular-badge { position:absolute; right:20px; top:20px; background:var(--success); color:var(--dark-text); border-radius:999px; padding:7px 10px; font-size:.72rem; font-weight:900; }
.plan-chip { color:var(--success); font-size:.75rem; font-weight:800; }
.pricing-card h3 { font-size:2rem; margin:12px 0 18px; }
.price strong { display:block; font-size:3.3rem; letter-spacing:-.06em; }
.price span { color:var(--muted); }
.pricing-card ul { list-style:none; padding:0; margin:28px 0; display:grid; gap:14px; color:#d3dbe7; }
.pricing-card li span { color:var(--success); margin-right:8px; }

.calculator-section { background:linear-gradient(180deg,#091525,#07111f); }
.calculator-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:58px; align-items:center; }
.input-group label,.range-head label { display:block; color:#d7dfeb; font-weight:700; }
.input-group select { width:100%; margin-top:10px; background:#101d30; color:white; border:1px solid var(--line); border-radius:14px; padding:16px; }
.range-block { margin-top:26px; }
.range-head { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:12px; }
.range-head strong { color:var(--success); }
input[type="range"] { width:100%; accent-color:var(--primary); }
.calculator-results { display:grid; gap:12px; margin:28px 0; }
.calculator-results>div { display:flex; justify-content:space-between; gap:20px; padding:16px 18px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.045); }
.calculator-results span { color:var(--muted); }
.total-result { background:linear-gradient(135deg,rgba(124,92,255,.18),rgba(38,208,206,.12))!important; }
.total-result strong { color:var(--success); font-size:1.25rem; }
.chart-card { border:1px solid var(--line); background:rgba(255,255,255,.045); border-radius:28px; padding:26px; box-shadow:var(--shadow); }
.chart-card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:20px; }
.chart-card h3 { margin:8px 0 0; font-size:1.45rem; }
#commissionChart { width:100%; height:auto; display:block; }
.chart-legend { display:flex; gap:20px; color:var(--muted); font-size:.85rem; flex-wrap:wrap; }
.dot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:8px; }
.dot-one { background:var(--primary); }.dot-two { background:var(--primary-2); }

.feature-band { background:linear-gradient(135deg,rgba(124,92,255,.11),rgba(38,208,206,.07)); }
.feature-band-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.demo-window { border:1px solid var(--line); background:#0e1a2c; border-radius:26px; overflow:hidden; box-shadow:var(--shadow); }
.window-bar { height:52px; display:flex; align-items:center; gap:8px; padding:0 18px; border-bottom:1px solid var(--line); }
.window-bar span { width:10px; height:10px; border-radius:50%; background:#41506a; }
.window-body { padding:42px; }
.demo-label { color:var(--success); font-size:.75rem; letter-spacing:.12em; font-weight:800; }
.window-body h3 { font-size:2rem; margin:16px 0 12px; }
.window-body p { color:var(--muted); line-height:1.7; }

.rules-layout { display:grid; grid-template-columns:340px 1fr; gap:50px; align-items:start; }
.rules-sidebar { position:sticky; top:110px; }
.accordion { display:grid; gap:12px; }
.accordion-item { border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.035); overflow:hidden; }
.accordion-trigger { width:100%; border:0; background:transparent; color:white; padding:20px 22px; display:flex; justify-content:space-between; gap:20px; font-weight:800; text-align:left; }
.accordion-trigger b { font-size:1.2rem; color:var(--success); transition:.2s; }
.accordion-content { max-height:0; overflow:hidden; transition:max-height .35s ease; }
.accordion-content p { color:var(--muted); line-height:1.75; padding:0 22px 22px; margin:0; }
.accordion-item.active .accordion-content { max-height:260px; }
.accordion-item.active .accordion-trigger b { transform:rotate(45deg); }

.final-cta-box { border:1px solid rgba(255,255,255,.15); background:radial-gradient(circle at top right,rgba(38,208,206,.18),transparent 35%),linear-gradient(135deg,rgba(124,92,255,.22),rgba(255,255,255,.04)); border-radius:34px; padding:70px 40px; text-align:center; }
.final-cta-box p { max-width:720px; margin:0 auto 30px; }
.centered-actions { justify-content:center; }
footer { border-top:1px solid var(--line); background:#050c16; padding:70px 0 26px; }
.footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; }
.footer-grid h4 { margin-top:0; }
.footer-grid a,.footer-grid p { display:block; color:var(--muted); margin:10px 0; line-height:1.6; }
.footer-bottom { border-top:1px solid var(--line); margin-top:48px; padding-top:24px; display:flex; justify-content:space-between; color:#718097; font-size:.86rem; }
.floating-cta { position:fixed; right:22px; bottom:22px; z-index:45; background:var(--success); color:var(--dark-text); padding:14px 18px; border-radius:999px; font-weight:900; box-shadow:0 18px 40px rgba(0,0,0,.3); }

.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s ease,transform .7s ease; }
.reveal.visible { opacity:1; transform:none; }
.delay-1 { transition-delay:.12s; }.delay-2 { transition-delay:.24s; }

@media (max-width: 980px) {
  .desktop-nav,.nav-wrap>.btn { display:none; }
  .menu-toggle { display:block; }
  .hero-grid,.calculator-grid,.feature-band-grid,.rules-layout { grid-template-columns:1fr; }
  .hero { padding-top:70px; }
  .rules-sidebar { position:static; }
  .steps-grid,.pricing-grid { grid-template-columns:1fr; }
  .pricing-card.featured { order:-1; }
  .footer-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width: 640px) {
  .container { width:min(100% - 26px,1180px); }
  .section-pad { padding:78px 0; }
  .hero h1 { font-size:3.5rem; }
  .hero-actions,.trust-row { flex-direction:column; align-items:stretch; }
  .metric-grid { grid-template-columns:1fr; }
  .logos-inner { justify-content:center; text-align:center; padding:22px 0; }
  .section-heading h2,.feature-copy h2,.rules-sidebar h2,.final-cta h2,.calculator-copy h2 { font-size:2.55rem; }
  .range-head,.calculator-results>div,.chart-card-head,.footer-bottom { align-items:flex-start; flex-direction:column; }
  .footer-grid { grid-template-columns:1fr; }
  .floating-cta { left:13px; right:13px; text-align:center; }
  .final-cta-box { padding:48px 22px; }
}


/* =========================================================
   LANDING AFILIADOS — NIVEL BOREAL / PRODUCT-LED
   ========================================================= */
:root{
  --bg:#020817;
  --bg-soft:#07142f;
  --panel:rgba(7,19,50,.64);
  --panel-solid:#071632;
  --line:rgba(111,151,255,.23);
  --text:#f8fbff;
  --muted:#aab8d3;
  --primary:#5f6fff;
  --primary-2:#28d7f2;
  --success:#40edb1;
  --pink:#fa55bd;
  --violet:#8c45ff;
  --shadow:0 38px 110px rgba(0,0,0,.55);
}

body{
  background:
    radial-gradient(circle at 50% -15%,rgba(64,107,255,.20),transparent 36%),
    linear-gradient(180deg,#020817 0%,#04102a 40%,#020817 100%);
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-5;
  pointer-events:none;
  background:
    linear-gradient(rgba(83,127,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(83,127,255,.035) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to bottom,black,transparent 76%);
}

.topbar{
  background:rgba(2,8,23,.68);
  border-bottom:1px solid rgba(105,146,255,.14);
  box-shadow:0 12px 44px rgba(0,0,0,.22);
}

.hero{
  min-height:calc(100svh - 78px);
  padding:94px 0 84px;
  display:flex;
  align-items:center;
  isolation:isolate;
  overflow:hidden;
  position:relative;
}

.hero-dashboard-bg{
  position:absolute;
  inset:-4%;
  z-index:-6;
  background:
    linear-gradient(90deg,rgba(2,8,23,.98) 0%,rgba(2,8,23,.91) 34%,rgba(2,8,23,.48) 70%,rgba(2,8,23,.92) 100%),
    linear-gradient(180deg,rgba(2,8,23,.38),rgba(2,8,23,.96)),
    url("dashboard-neuro.png") center 36% / cover no-repeat;
  opacity:.42;
  filter:saturate(1.25) contrast(1.06);
  transform:scale(1.035);
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(ellipse at 62% 47%,transparent 0 20%,rgba(2,8,23,.34) 53%,rgba(2,8,23,.88) 100%),
    linear-gradient(180deg,rgba(2,8,23,.10),#020817 96%);
  pointer-events:none;
}

.aurora-layer{
  position:absolute;
  width:72vw;
  height:52vw;
  max-width:1100px;
  max-height:760px;
  border-radius:50%;
  filter:blur(74px);
  opacity:.30;
  mix-blend-mode:screen;
  z-index:-4;
  animation:affiliateAurora 15s ease-in-out infinite alternate;
}

.aurora-layer-one{
  right:-12%;
  top:-26%;
  background:conic-gradient(from 90deg,#23d5ff,#7145ff,#ff49ba,#23d5ff);
}

.aurora-layer-two{
  left:-25%;
  bottom:-35%;
  background:conic-gradient(from 180deg,#1df2af,#1b6cff,#7443ff,#1df2af);
  animation-duration:19s;
  animation-direction:alternate-reverse;
}

.hero-grid-lines{
  position:absolute;
  inset:0;
  z-index:-3;
  opacity:.22;
  background:
    linear-gradient(rgba(77,128,255,.16) 1px,transparent 1px),
    linear-gradient(90deg,rgba(77,128,255,.16) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at 68% 45%,black,transparent 64%);
}

@keyframes affiliateAurora{
  from{transform:translate3d(-3%,0,0) rotate(-8deg) scale(.94)}
  to{transform:translate3d(4%,6%,0) rotate(8deg) scale(1.08)}
}

.hero-grid-modern{
  grid-template-columns:minmax(0,.92fr) minmax(580px,1.25fr);
  gap:54px;
  position:relative;
  z-index:3;
}

.hero-copy{
  padding:26px 0;
}

.eyebrow-glass{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:9px 13px;
  margin-bottom:24px;
  color:#cde7ff;
  background:rgba(8,26,67,.58);
  border:1px solid rgba(112,163,255,.30);
  border-radius:999px;
  backdrop-filter:blur(15px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

.eyebrow-glass i{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--success);
  box-shadow:0 0 0 5px rgba(64,237,177,.11),0 0 18px var(--success);
}

.hero h1{
  max-width:740px;
  font-size:clamp(3.45rem,5.7vw,6.35rem);
  line-height:.92;
  letter-spacing:-.075em;
  text-wrap:balance;
  text-shadow:0 20px 70px rgba(0,0,0,.48);
}

.hero h1 span{
  display:block;
  padding-bottom:.08em;
  background:linear-gradient(90deg,#7aeaff 0%,#7885ff 42%,#df62ff 75%,#ff77bd 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 0 28px rgba(97,119,255,.25));
}

.hero-lead{
  max-width:650px;
  margin:30px 0 32px;
  color:#bac8df;
  font-size:1.13rem;
}

.hero-lead strong{color:#fff}

.btn-primary{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(179,202,255,.24);
  background:linear-gradient(120deg,#4169ff 0%,#7c49ff 54%,#e84fc0 100%);
  box-shadow:0 18px 50px rgba(86,74,255,.38),inset 0 1px 0 rgba(255,255,255,.28);
}

.btn-primary::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(105deg,transparent 25%,rgba(255,255,255,.28) 46%,transparent 66%);
  transform:translateX(-120%);
  transition:transform .75s ease;
}

.btn-primary:hover::before{transform:translateX(120%)}
.btn-primary span,.btn-primary b{position:relative;z-index:1}
.btn-primary b{margin-left:12px;font-size:1.1em}

.btn-ghost{
  background:rgba(7,24,61,.58);
  border-color:rgba(126,165,255,.28);
  backdrop-filter:blur(16px);
}

.hero-proof{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  max-width:680px;
  margin-top:36px;
  padding:18px 0;
  border-top:1px solid rgba(134,164,231,.19);
  border-bottom:1px solid rgba(134,164,231,.19);
}

.hero-proof>div{
  padding:0 18px;
  border-right:1px solid rgba(134,164,231,.19);
}

.hero-proof>div:first-child{padding-left:0}
.hero-proof>div:last-child{border-right:0}

.hero-proof strong{
  display:block;
  font-size:1.65rem;
  color:#fff;
  letter-spacing:-.05em;
}

.hero-proof span{
  display:block;
  margin-top:4px;
  color:#9dafca;
  font-size:.78rem;
}

.product-stage{
  position:relative;
  min-width:0;
  perspective:1600px;
  padding:52px 0;
}

.browser-shell{
  position:relative;
  border:1px solid rgba(107,151,255,.34);
  border-radius:23px;
  overflow:hidden;
  background:#020a1c;
  box-shadow:
    0 50px 130px rgba(0,0,0,.72),
    0 0 0 1px rgba(255,255,255,.035) inset,
    0 0 90px rgba(62,91,255,.20);
  transform:rotateY(-5deg) rotateX(2deg);
  transform-origin:center;
  transition:transform .45s ease,box-shadow .45s ease;
}

.product-stage:hover .browser-shell{
  transform:rotateY(-1deg) rotateX(0deg) translateY(-5px);
  box-shadow:0 60px 150px rgba(0,0,0,.75),0 0 110px rgba(57,112,255,.28);
}

.browser-bar{
  height:48px;
  display:grid;
  grid-template-columns:90px 1fr 90px;
  align-items:center;
  gap:12px;
  padding:0 16px;
  background:linear-gradient(180deg,#0b1d48,#061432);
  border-bottom:1px solid rgba(106,149,255,.22);
}

.browser-dots{display:flex;gap:7px}
.browser-dots i{
  width:8px;height:8px;border-radius:50%;
  background:#58709f;
}
.browser-dots i:nth-child(1){background:#ff6480}
.browser-dots i:nth-child(2){background:#ffc85e}
.browser-dots i:nth-child(3){background:#42dda1}

.browser-address{
  justify-self:center;
  width:min(430px,100%);
  padding:7px 14px;
  border:1px solid rgba(111,151,255,.18);
  border-radius:9px;
  color:#aab9d5;
  background:rgba(0,7,25,.42);
  font-size:.72rem;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.browser-address span{color:#40edb1}
.browser-live{
  justify-self:end;
  color:#b9c9e3;
  font-size:.64rem;
  font-weight:800;
  letter-spacing:.08em;
}
.browser-live i{
  display:inline-block;
  width:6px;height:6px;border-radius:50%;
  margin-right:5px;
  background:#40edb1;
  box-shadow:0 0 12px #40edb1;
}

.dashboard-screen{
  position:relative;
  overflow:hidden;
  aspect-ratio:1715/864;
}
.dashboard-screen img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center top;
}
.screen-reflection{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.08),transparent 22% 68%,rgba(69,127,255,.08));
}

.stage-orbit{
  position:absolute;
  border:1px solid rgba(105,150,255,.18);
  border-radius:50%;
  pointer-events:none;
}
.orbit-one{inset:3% -5%;transform:rotate(-8deg)}
.orbit-two{inset:-8% 9%;transform:rotate(18deg);border-color:rgba(238,80,193,.16)}

.floating-kpi{
  position:absolute;
  z-index:4;
  display:flex;
  align-items:center;
  gap:11px;
  min-width:168px;
  padding:12px 14px;
  border:1px solid rgba(129,170,255,.28);
  border-radius:15px;
  background:rgba(4,17,48,.78);
  backdrop-filter:blur(20px);
  box-shadow:0 18px 50px rgba(0,0,0,.45);
}
.floating-kpi-top{top:14px;right:-12px}
.floating-kpi-bottom{bottom:15px;left:-28px}
.floating-kpi small,.floating-kpi strong{display:block}
.floating-kpi small{color:#93a7c9;font-size:.68rem}
.floating-kpi strong{margin-top:2px;color:#fff;font-size:.95rem}
.kpi-icon{
  width:35px;height:35px;display:grid;place-items:center;
  border-radius:11px;
  color:#fff;
  background:linear-gradient(135deg,#427bff,#a847ff);
  box-shadow:0 0 24px rgba(86,94,255,.35);
}
.kpi-green{background:linear-gradient(135deg,#21c893,#21d7d1)}

.hero-scroll-note{
  position:absolute;
  left:50%;
  bottom:24px;
  transform:translateX(-50%);
  z-index:5;
  color:#7588aa;
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.hero-scroll-note span{
  display:inline-block;
  width:34px;
  height:1px;
  margin-right:9px;
  vertical-align:middle;
  background:linear-gradient(90deg,transparent,#7193dc);
}

.logos-strip{
  position:relative;
  z-index:4;
  background:rgba(3,12,32,.78);
  backdrop-filter:blur(18px);
  border-color:rgba(107,147,230,.16);
}

.step-card,.pricing-card,.chart-card,.accordion-item{
  background:linear-gradient(180deg,rgba(11,30,73,.62),rgba(4,15,39,.68));
  border-color:rgba(103,145,235,.20);
  backdrop-filter:blur(18px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}

.dark-section{
  background:
    radial-gradient(circle at 50% 0,rgba(92,70,255,.11),transparent 36%),
    #020916;
}

.platform-showcase{
  position:relative;
  border:1px solid rgba(104,151,255,.28);
  border-radius:27px;
  background:#04102b;
  box-shadow:var(--shadow),0 0 80px rgba(69,91,255,.17);
  overflow:hidden;
  transform:perspective(1200px) rotateY(5deg);
}
.platform-showcase img{
  width:100%;
  display:block;
  aspect-ratio:1715/864;
  object-fit:cover;
}
.platform-showcase::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(2,8,23,.94));
  pointer-events:none;
}
.platform-showcase-caption{
  position:absolute;
  left:25px;
  right:25px;
  bottom:22px;
  z-index:2;
}
.platform-showcase-caption span{
  display:block;
  color:#72e9dd;
  font-size:.7rem;
  font-weight:900;
  letter-spacing:.16em;
}
.platform-showcase-caption strong{
  display:block;
  margin-top:7px;
  font-size:clamp(1.2rem,2vw,2rem);
}
.platform-showcase-glow{
  position:absolute;
  width:50%;
  aspect-ratio:1;
  right:-10%;
  top:-30%;
  background:#724dff;
  filter:blur(80px);
  opacity:.26;
}

@media (max-width:1120px){
  .hero-grid-modern{grid-template-columns:1fr}
  .hero-copy{max-width:850px}
  .product-stage{width:min(980px,100%);margin:0 auto}
  .hero-dashboard-bg{opacity:.29}
}

@media (max-width:700px){
  .hero{padding-top:64px}
  .hero h1{font-size:clamp(3rem,15vw,4.5rem)}
  .hero-grid-modern{gap:12px}
  .hero-proof{grid-template-columns:1fr}
  .hero-proof>div{
    padding:11px 0;
    border-right:0;
    border-bottom:1px solid rgba(134,164,231,.15);
  }
  .hero-proof>div:last-child{border-bottom:0}
  .browser-bar{grid-template-columns:55px 1fr}
  .browser-live{display:none}
  .floating-kpi{display:none}
  .product-stage{padding:34px 0 8px}
  .browser-shell{border-radius:15px;transform:none}
  .hero-scroll-note{display:none}
}

@media (prefers-reduced-motion:reduce){
  .aurora-layer{animation:none}
  .product-stage:hover .browser-shell,.browser-shell{transform:none}
}