
:root{
  --bg:#0b0f14; --bg2:#0f141b; --text:#e6edf3; --muted:#9aa7b4; --muted2:#c1ccd6;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.12); --primary:#2d6bff; --primary2:#76a0ff;
  --secondary:#7a5cff; --teal:#00d1b2; --wa:#25d366; --danger:#ff7d7d; --warning:#ffb648;
  --shadow:0 24px 70px rgba(0,0,0,.34); --card:0 12px 30px rgba(0,0,0,.22); --container:1220px;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{
  margin:0; color:var(--text); font-family:"Inter",system-ui,sans-serif; min-width:320px; overflow-x:hidden;
  background:
    radial-gradient(circle at 10% 10%, rgba(45,107,255,.13), transparent 0 28%),
    radial-gradient(circle at 88% 8%, rgba(122,92,255,.10), transparent 0 22%),
    radial-gradient(circle at 90% 82%, rgba(0,209,178,.06), transparent 0 18%),
    linear-gradient(180deg, #0b0f14 0%, #0d1218 42%, #0a1016 100%);
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.32;
  background-image:linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size:52px 52px; mask-image:radial-gradient(circle at center, rgba(0,0,0,.6), transparent 88%);
}

:root{
  --aurora-1: rgba(45,107,255,.20);
  --aurora-2: rgba(122,92,255,.16);
  --aurora-3: rgba(0,209,178,.12);
  --glass-1: rgba(255,255,255,.06);
  --glass-2: rgba(255,255,255,.03);
}
body::after{
  content:""; position:fixed; inset:-15% -10%; pointer-events:none; z-index:-1;
  background:
    radial-gradient(circle at 20% 20%, var(--aurora-1), transparent 28%),
    radial-gradient(circle at 80% 20%, var(--aurora-2), transparent 26%),
    radial-gradient(circle at 50% 80%, var(--aurora-3), transparent 24%);
  filter: blur(50px);
  opacity:.65;
  animation: auroraShift 24s ease-in-out infinite alternate;
}
.hero{position:relative; overflow:clip;}
.hero::before,
.hero::after{
  content:""; position:absolute; inset:auto; pointer-events:none; z-index:0; border-radius:999px; filter:blur(18px);
}
.hero::before{
  width:360px; height:360px; left:-120px; top:-80px;
  background:radial-gradient(circle, rgba(45,107,255,.22), transparent 68%);
  animation: driftOne 18s ease-in-out infinite;
}
.hero::after{
  width:420px; height:420px; right:-140px; bottom:-120px;
  background:radial-gradient(circle, rgba(122,92,255,.18), transparent 72%);
  animation: driftTwo 22s ease-in-out infinite;
}
.hero > .container{position:relative; z-index:1;}
.hero-ambient{
  position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;
}
.hero-ambient .orb{
  position:absolute; border-radius:999px; border:1px solid rgba(255,255,255,.06);
  box-shadow: inset 0 0 40px rgba(255,255,255,.015);
}
.hero-ambient .orb.orb-a{ width:540px; height:540px; top:-180px; right:-120px; animation: spinSlow 34s linear infinite; }
.hero-ambient .orb.orb-b{ width:320px; height:320px; bottom:-120px; left:-90px; animation: spinReverseSlow 28s linear infinite; }
.hero-ambient .orb.orb-c{ width:180px; height:180px; top:18%; left:54%; animation: pulseRing 8s ease-in-out infinite; }
.hero-ambient .beam{
  position:absolute; inset:auto; width:40vw; max-width:520px; height:1px; opacity:.5;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
}
.hero-ambient .beam.beam-a{ top:22%; left:-4%; transform:rotate(-8deg); animation: beamShift 10s ease-in-out infinite; }
.hero-ambient .beam.beam-b{ bottom:20%; right:-4%; transform:rotate(6deg); animation: beamShift 12s ease-in-out infinite reverse; }
.cursor-glow{
  position:fixed; left:0; top:0; width:260px; height:260px; pointer-events:none; z-index:1;
  background:radial-gradient(circle, rgba(45,107,255,.14), rgba(122,92,255,.08), transparent 70%);
  border-radius:50%; filter: blur(22px); opacity:0; transform:translate(-50%,-50%);
  transition: opacity .25s ease;
}
.cursor-glow.is-visible{opacity:.9;}
.panel,.card,.metric,.cta-card,.faq-item{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg, var(--glass-1), var(--glass-2));
  backdrop-filter: blur(14px);
}
.panel::before,.card::before,.metric::before,.cta-card::before,.faq-item::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(135deg, rgba(255,255,255,.08), transparent 26%, transparent 74%, rgba(255,255,255,.05));
  opacity:.35;
}
.panel::after,.card::after,.metric::after,.cta-card::after{
  content:""; position:absolute; top:0; left:-140%; width:60%; height:100%; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  transform:skewX(-18deg);
  opacity:0;
}
.panel:hover::after,.card:hover::after,.metric:hover::after,.cta-card:hover::after{ animation: shineSweep 1.1s ease; opacity:1; }
.simple-ui{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 18px 40px rgba(0,0,0,.22);
}
.simple-ui-head{position:relative;}
.simple-ui-head::after{
  content:""; position:absolute; inset:auto 0 0 0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
}
.simple-ui-body{
  position:relative;
}
.simple-ui-body::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size:100% 28px, 28px 100%; opacity:.18; mask-image: linear-gradient(180deg, rgba(0,0,0,.8), transparent 95%);
}
.simple-ui-kpi strong,
.metric-value,
.panel-title,
.card h3,
.step-number,
.step-card h3,
.universe-center-card strong{
  text-wrap: balance;
}
.button{
  position:relative; overflow:hidden;
}
.button::after{
  content:""; position:absolute; top:0; left:-150%; width:55%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transform:skewX(-18deg); opacity:0;
}
.button:hover::after{ animation: shineSweep .9s ease; opacity:1; }
.site-header{box-shadow: 0 0 0 rgba(0,0,0,0);}
.site-header.is-scrolled{box-shadow: 0 18px 40px rgba(0,0,0,.18);}
.section-head h2{
  max-width: 14ch;
}
.floating-cta{
  background:rgba(8,12,18,.82);
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 16px 40px rgba(0,0,0,.28);
}
.floating-cta:hover{ transform: translateY(-2px); }
.mobile-sheet-panel::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 82% 12%, rgba(45,107,255,.18), transparent 0 22%),
    radial-gradient(circle at 18% 84%, rgba(122,92,255,.14), transparent 0 26%);
}
.mobile-sheet-panel > *{ position:relative; z-index:1; }
body.mobile-ready{ padding-bottom: 88px; }
@keyframes auroraShift{
  0%{ transform: translate3d(-1%,0,0) scale(1); }
  50%{ transform: translate3d(2%,-2%,0) scale(1.06); }
  100%{ transform: translate3d(-2%,2%,0) scale(1.02); }
}
@keyframes driftOne{
  0%,100%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(40px,30px,0) scale(1.08); }
}
@keyframes driftTwo{
  0%,100%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(-30px,-20px,0) scale(1.04); }
}
@keyframes spinSlow{ from{ transform: rotate(0deg);} to{ transform: rotate(360deg);} }
@keyframes spinReverseSlow{ from{ transform: rotate(360deg);} to{ transform: rotate(0deg);} }
@keyframes pulseRing{ 0%,100%{ opacity:.28; transform: scale(1);} 50%{ opacity:.52; transform: scale(1.08);} }
@keyframes beamShift{ 0%,100%{ opacity:.22; transform: translateX(0) rotate(-8deg);} 50%{ opacity:.55; transform: translateX(18px) rotate(-6deg);} }
@keyframes shineSweep{ from{ left:-140%; } to{ left:160%; } }
@media (prefers-reduced-motion: reduce){
  body::after,.hero::before,.hero::after,.hero-ambient .orb,.hero-ambient .beam,.panel::after,.card::after,.metric::after,.cta-card::after,.button::after{ animation:none !important; }
  .cursor-glow{ display:none !important; }
}

a{color:inherit;text-decoration:none} button{font:inherit} svg{display:block;max-width:100%} img{max-width:100%;display:block}
.container{width:min(calc(100% - 40px), var(--container)); margin-inline:auto}
.container-narrow{width:min(calc(100% - 40px), 920px); margin-inline:auto}
.scroll-progress{position:fixed; top:0; left:0; z-index:100; width:100%; height:3px; transform-origin:left center; transform:scaleX(0); background:linear-gradient(90deg,var(--primary),var(--secondary),var(--teal))}
.site-header{position:sticky; top:0; z-index:70; background:rgba(6,9,14,.58); backdrop-filter:blur(20px); border-bottom:1px solid rgba(255,255,255,.05); transition:.25s ease}
.site-header.is-scrolled{background:rgba(6,9,14,.88); border-bottom-color:rgba(255,255,255,.08)}
.header-inner{min-height:72px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:24px}
.brand{display:inline-flex; align-items:center; gap:10px; font-family:"Sora",system-ui,sans-serif; font-weight:700; letter-spacing:-.03em}
.brand-mark{
  width:28px; height:28px; border-radius:8px; display:grid; place-items:center; color:#fff; font-size:11px;
  background:linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.06)); border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)
}
.brand-meta{display:flex; flex-direction:column; gap:1px}
.brand-title{font-size:13px; color:#eef4fb}
.brand-subtitle{font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.nav{display:flex; align-items:center; justify-content:center; gap:2px}
.nav a{padding:10px 12px; border-radius:999px; color:#a9b5c2; font-size:11px; line-height:1; text-transform:uppercase; letter-spacing:.12em; transition:.22s ease}
.nav a:hover,.nav a.is-active{color:#eef4fb; background:rgba(255,255,255,.04)}
.header-actions{display:flex; align-items:center; gap:10px}
.button{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:42px; padding:0 16px; border-radius:999px; border:1px solid transparent; font-weight:600; font-size:12px; letter-spacing:.10em; text-transform:uppercase; cursor:pointer; transition:.22s ease}
.button:hover{transform:translateY(-1px)}
.button-primary{color:#081018; background:linear-gradient(135deg,#f5f8fb,#cfd9e4); box-shadow:0 10px 24px rgba(255,255,255,.10)}
.button-secondary,.button-wa{color:#edf3fa; background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.10)}
.button-wa{box-shadow:0 12px 30px rgba(37,211,102,.12)}
.menu-button,.mobile-sheet{display:none}
.eyebrow{display:inline-flex; align-items:center; gap:10px; margin-bottom:18px; color:#bfd0ff; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.18em}
.eyebrow::before{content:""; width:28px; height:1px; background:linear-gradient(90deg,var(--primary),transparent)}
h1,h2,h3,h4{margin:0; font-family:"Sora",system-ui,sans-serif; letter-spacing:-.04em} p{margin:0}
h1{font-size:clamp(46px,6vw,82px); line-height:.94; max-width:780px}
h2{font-size:clamp(34px,4vw,54px); line-height:1.02}
p.lead{font-size:clamp(18px,2vw,21px); line-height:1.62; color:#bfccd8}
.hero{padding:92px 0 78px}
.hero-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(500px,.95fr); gap:54px; align-items:center}
.hero-chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
.chip{display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius:999px; font-size:13px; color:#d2dce5; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08)}
.chip-dot{width:8px; height:8px; border-radius:999px; background:var(--teal)}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:30px}
.grid-3,.grid-4,.grid-2,.cards-grid,.benefits-grid,.hero-proof,.footer-grid,.closing-strip,.steps-grid,.faq-grid,.case-grid{display:grid; gap:16px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.hero-proof{grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:38px}
.metric,.panel,.card,.faq-item,.cta-card{
  border:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03)); box-shadow:var(--card); transition:transform .25s ease,border-color .25s ease;
}
.metric:hover,.panel:hover,.card:hover,.cta-card:hover{transform:translateY(-2px); border-color:rgba(255,255,255,.14)}
.metric,.card{padding:22px; border-radius:22px}
.metric-value{display:block; font-size:clamp(22px,4vw,34px); font-weight:800; letter-spacing:-.04em; color:#fff}
.metric-label,.card p,.small-text,.footer-block{color:var(--muted); line-height:1.7; font-size:15px}
.panel{padding:22px; border-radius:30px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)), linear-gradient(135deg, rgba(45,107,255,.10), rgba(122,92,255,.08)); box-shadow:var(--shadow)}
.panel-top{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:14px}
.panel-title{font-size:18px}
.panel-sub{margin-top:4px; color:var(--muted); font-size:13px}
.status{padding:8px 10px; border-radius:999px; font-size:12px; font-weight:700; letter-spacing:.04em; white-space:nowrap}
.status-success{color:#c9fff5; background:rgba(0,209,178,.12)}
.status-primary{color:#d9e5ff; background:rgba(45,107,255,.16)}
.status-warning{color:#fff0d7; background:rgba(255,182,72,.14)}
.simple-ui{border-radius:24px; border:1px solid rgba(255,255,255,.08); background:rgba(7,10,15,.82); overflow:hidden}
.simple-ui-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.06); background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02))}
.simple-ui-dots{display:inline-flex; gap:8px}.simple-ui-dots span{width:8px; height:8px; border-radius:999px; background:rgba(255,255,255,.22)}
.simple-ui-body{padding:16px; display:grid; gap:12px}
.simple-ui-kpis{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
.simple-ui-kpi{padding:14px; border-radius:16px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03)}
.simple-ui-kpi small{display:block; color:var(--muted); font-size:11px; margin-bottom:8px; text-transform:uppercase; letter-spacing:.08em}
.simple-ui-kpi strong{display:block; font-size:21px; letter-spacing:-.03em}
.simple-ui-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:12px}
.ui-box{border-radius:18px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03)}
.ui-box.pad{padding:14px}
.ui-box-title{display:block; margin-bottom:10px; font-size:14px; font-weight:700; color:#dde7f0}
.ui-list{display:grid; gap:10px}
.ui-line{display:grid; grid-template-columns:1.2fr .7fr .7fr .7fr; gap:10px; align-items:center; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.05); font-size:13px}
.ui-line:last-child{border-bottom:0}
.pill{display:inline-flex; padding:6px 8px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.04em}
.pill.ok{color:#dfffee; background:rgba(37,211,102,.12)}
.pill.warn{color:#fff0d7; background:rgba(255,182,72,.14)}
.pill.alert{color:#ffd9d9; background:rgba(255,125,125,.12)}
.mini-alert{padding:12px; border-radius:14px; border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.025)}
.mini-alert + .mini-alert{margin-top:10px}
.mini-alert strong{display:block; margin-bottom:4px; font-size:13px}
.mini-alert span{display:block; color:var(--muted); font-size:12px; line-height:1.4}
.ui-tabs{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px}
.ui-tab{display:inline-flex; align-items:center; padding:8px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04); color:#dce5ee; font-size:11px; text-transform:uppercase; letter-spacing:.08em; font-weight:700}
.ui-tab.active{background:rgba(45,107,255,.14); border-color:rgba(45,107,255,.24)}
.ui-section-note{margin-top:12px; color:var(--muted2); font-size:14px; line-height:1.65}
.section{padding:104px 0; border-top:1px solid rgba(230,237,243,.06)}
.section-head{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,.95fr); gap:42px; align-items:start; margin-bottom:42px}
.section-head p{color:var(--muted2); font-size:18px; line-height:1.7}
.card h3{font-size:20px; margin-bottom:10px}
.card-tag{display:inline-flex; margin-bottom:12px; padding:8px 10px; border-radius:999px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); font-size:11px; text-transform:uppercase; letter-spacing:.12em; font-weight:700; color:#c8d4e6}
.steps-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.step-card{padding:22px; border-radius:22px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.035); box-shadow:var(--card)}
.step-num{width:42px; height:42px; border-radius:14px; display:grid; place-items:center; margin-bottom:14px; background:rgba(45,107,255,.14); border:1px solid rgba(45,107,255,.18); color:#d9e5ff; font-weight:800}
.compare{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.compare-col{padding:20px; border-radius:22px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.035); box-shadow:var(--card)}
.compare-top{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px}
.compare-list{display:grid; gap:10px}
.compare-row{padding:12px; border-radius:14px; border:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.03); font-size:13px; color:#d7e1ea}
.bullets{display:grid; gap:10px; margin-top:18px}
.bullets .bullet{padding:12px 14px; border-radius:16px; border:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.03); color:#d5dfe8; font-size:14px}
.universe-wrap{
  position:relative; min-height:680px; border-radius:34px; overflow:hidden; border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.06), transparent 0 12%),
    radial-gradient(circle at 50% 50%, rgba(45,107,255,.10), transparent 0 30%),
    radial-gradient(circle at 20% 20%, rgba(122,92,255,.12), transparent 0 24%),
    radial-gradient(circle at 80% 30%, rgba(0,209,178,.08), transparent 0 20%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  box-shadow:var(--shadow)
}
.orbit-scene{position:absolute; inset:0}
.core-star{position:absolute; left:50%; top:50%; width:10px; height:10px; border-radius:999px; background:#fff; transform:translate(-50%,-50%); box-shadow:0 0 0 14px rgba(255,255,255,.03),0 0 60px rgba(255,255,255,.30),0 0 120px rgba(45,107,255,.18)}
.orbit{position:absolute; left:50%; top:50%; border:1px solid rgba(255,255,255,.06); border-radius:999px; transform:translate(-50%,-50%)}
.orbit-1{width:180px;height:180px; animation:spin 18s linear infinite}
.orbit-2{width:300px;height:300px; animation:spinReverse 24s linear infinite}
.orbit-3{width:430px;height:430px; animation:spin 32s linear infinite}
.orbit-4{width:580px;height:580px; animation:spinReverse 46s linear infinite}
.planet{position:absolute; left:50%; top:0; width:10px; height:10px; border-radius:999px; transform:translate(-50%,-50%); background:#dfe8f5; box-shadow:0 0 18px rgba(255,255,255,.32)}
.planet.sm{width:6px;height:6px}.planet.lg{width:13px;height:13px;background:#f6fbff}
.universe-copy{position:absolute; inset:0; z-index:2; pointer-events:none}
.universe-copy h2{position:absolute; font-size:clamp(38px,6vw,78px); line-height:.98; max-width:420px; text-shadow:0 0 24px rgba(255,255,255,.08)}
.universe-copy .left{left:6%; top:18%}
.universe-copy .right{right:6%; bottom:18%; text-align:right}
.universe-center-card{position:absolute; left:50%; top:50%; z-index:3; transform:translate(-50%,-50%); width:min(420px, calc(100% - 40px)); padding:28px 26px; border-radius:26px; border:1px solid rgba(255,255,255,.10); background:rgba(8,12,18,.68); backdrop-filter:blur(18px); box-shadow:0 20px 70px rgba(0,0,0,.34); text-align:center}
.universe-center-card strong{display:block; margin-bottom:12px; font-family:"Sora",system-ui,sans-serif; font-size:24px; letter-spacing:-.04em}
.universe-center-card p{color:var(--muted2); font-size:15px; line-height:1.7}
.universe-bottom-glow{position:absolute; left:50%; bottom:-120px; width:1100px; height:260px; transform:translateX(-50%); background:radial-gradient(ellipse at center, rgba(255,153,80,.34), rgba(80,140,255,.12), transparent 68%); filter:blur(30px); opacity:.7}
.faq-item{border-radius:22px; overflow:hidden}
.faq-trigger{width:100%; padding:20px 22px; background:transparent; border:0; color:var(--text); display:flex; align-items:center; justify-content:space-between; gap:18px; text-align:left; cursor:pointer}
.faq-trigger strong{font-size:17px; font-family:"Sora",system-ui,sans-serif}
.faq-icon{flex-shrink:0; width:28px; height:28px; border-radius:999px; background:rgba(255,255,255,.06); display:grid; place-items:center; transition:transform .25s ease}
.faq-item.is-open .faq-icon{transform:rotate(45deg)}
.faq-content-wrap{display:grid; grid-template-rows:0fr; transition:grid-template-rows .28s ease}
.faq-item.is-open .faq-content-wrap{grid-template-rows:1fr}
.faq-content-inner{overflow:hidden}
.faq-content{padding:0 22px 22px; color:var(--muted); line-height:1.7}
.cta-card{padding:42px; border-radius:34px; box-shadow:var(--shadow); position:relative; overflow:hidden; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)), linear-gradient(135deg, rgba(45,107,255,.14), rgba(122,92,255,.10))}
.cta-card::after{content:""; position:absolute; right:-120px; top:50%; width:320px; height:320px; border-radius:50%; transform:translateY(-50%); background:radial-gradient(circle, rgba(45,107,255,.18), transparent 68%)}
.cta-grid{position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:center}
.cta-grid p{margin-top:16px; font-size:18px; color:#c7d1da; line-height:1.7; max-width:760px}
.closing-strip{grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:20px}
.closing-card{padding:18px; border-radius:20px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04)}
.closing-card strong{display:block; margin-bottom:6px; font-size:15px}
.closing-card span{display:block; color:var(--muted); font-size:13px; line-height:1.5}
.floating-cta{position:fixed; right:18px; bottom:18px; z-index:60; display:inline-flex; align-items:center; gap:10px; padding:14px 16px; border-radius:999px; background:rgba(11,15,20,.88); border:1px solid rgba(255,255,255,.12); box-shadow:0 12px 34px rgba(0,0,0,.26); color:var(--text); backdrop-filter:blur(12px)}
.floating-cta-dot{width:10px; height:10px; border-radius:50%; background:var(--wa); box-shadow:0 0 0 6px rgba(37,211,102,.10)}
.scroll-top{position:fixed; right:18px; bottom:86px; z-index:60; width:46px; height:46px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.12); border-radius:14px; background:rgba(11,15,20,.86); color:var(--text); backdrop-filter:blur(12px); opacity:0; pointer-events:none; transform:translateY(8px); transition:.25s ease}
.scroll-top.is-visible{opacity:1; pointer-events:auto; transform:translateY(0)}
.footer{padding:34px 0 92px}
.footer-grid{grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start}
.footer-block strong,.footer-block h4{display:block; margin-bottom:10px; color:var(--text); font-size:15px; font-family:"Sora",system-ui,sans-serif; letter-spacing:-.02em}
.footer-links{display:grid; gap:8px}.footer-note{margin-top:12px; font-size:13px; color:var(--muted)}
.breadcrumbs{display:flex; gap:8px; flex-wrap:wrap; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:20px}
.breadcrumbs a:hover{color:var(--text)}
[data-reveal]{opacity:0; transform:translateY(18px); transition:opacity .8s ease, transform .8s ease}
[data-reveal].is-visible{opacity:1; transform:translateY(0)}
@keyframes spin{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes spinReverse{from{transform:translate(-50%,-50%) rotate(360deg)}to{transform:translate(-50%,-50%) rotate(0deg)}}
@media (max-width:1220px){
  .hero-grid,.section-head,.cta-grid{grid-template-columns:1fr}
  .grid-3,.hero-proof,.closing-strip,.steps-grid,.simple-ui-kpis,.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .simple-ui-grid,.compare{grid-template-columns:1fr}
}
@media (max-width:900px){
  .site-header{position:static}
  .header-inner{min-height:auto; padding:16px 0; flex-wrap:wrap}
  .nav,.header-actions{display:none}
  .menu-button{display:inline-flex; margin-left:auto; width:42px; height:42px; border-radius:14px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04); color:var(--text); cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:4px; z-index:82}
  .menu-button span,.menu-button::before,.menu-button::after{content:""; width:18px; height:2px; border-radius:999px; background:currentColor; transition:.25s ease}
  .menu-button[aria-expanded="true"]::before{transform:translateY(6px) rotate(45deg)}
  .menu-button[aria-expanded="true"] span{opacity:0}
  .menu-button[aria-expanded="true"]::after{transform:translateY(-6px) rotate(-45deg)}
  .mobile-sheet{display:block; position:fixed; inset:0; z-index:80; opacity:0; pointer-events:none; transition:opacity .25s ease}
  .mobile-sheet.is-open{opacity:1; pointer-events:auto}
  .mobile-sheet-backdrop{position:absolute; inset:0; background:rgba(4,7,11,.72); backdrop-filter:blur(10px)}
  .mobile-sheet-panel{position:absolute; inset:0 0 0 auto; width:min(100%, 440px); padding:22px; display:flex; flex-direction:column; gap:18px; background:radial-gradient(circle at 90% 10%, rgba(122,92,255,.18), transparent 0 28%), radial-gradient(circle at 0% 100%, rgba(45,107,255,.16), transparent 0 32%), linear-gradient(180deg, #0b0f14 0%, #0f141b 100%); border-left:1px solid rgba(255,255,255,.08); transform:translateX(100%); transition:transform .28s ease}
  .mobile-sheet.is-open .mobile-sheet-panel{transform:translateX(0)}
  .mobile-sheet-top{display:flex; align-items:center; justify-content:space-between; gap:16px}
  .mobile-sheet-title{font-family:"Sora",system-ui,sans-serif; font-size:18px; letter-spacing:-.03em}
  .mobile-close{width:42px; height:42px; border-radius:14px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04); color:var(--text); cursor:pointer}
  .mobile-nav{display:grid; gap:10px}
  .mobile-nav a{padding:16px 16px; border-radius:18px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); font-size:16px; font-weight:600; color:#dfe6ec}
  .mobile-whatsapp{margin-top:auto; padding:18px; border-radius:24px; border:1px solid rgba(37,211,102,.22); background:linear-gradient(180deg, rgba(37,211,102,.10), rgba(37,211,102,.05)); box-shadow:0 12px 30px rgba(37,211,102,.12)}
  .mobile-whatsapp strong{display:block; margin-bottom:8px; font-family:"Sora",system-ui,sans-serif; font-size:18px}
  .mobile-whatsapp p{margin:0 0 14px; color:#d1efe0; line-height:1.65; font-size:14px}
  .hero{padding:36px 0 24px}
  .grid-3,.grid-4,.hero-proof,.closing-strip,.steps-grid,.simple-ui-kpis,.simple-ui-grid,.footer-grid,.compare{grid-template-columns:1fr}
  .ui-line{grid-template-columns:1fr; gap:6px}
  .section{padding:82px 0}
  .cta-card{padding:28px}
  .floating-cta{left:14px; right:14px; justify-content:center; bottom:14px}
  .scroll-top{right:14px; bottom:74px}
  .universe-wrap{min-height:760px}
  .universe-copy .left,.universe-copy .right{left:50%; right:auto; transform:translateX(-50%); width:min(90%,360px); text-align:center}
  .universe-copy .left{top:10%} .universe-copy .right{bottom:10%}
}
@media (max-width:560px){
  .container,.container-narrow{width:min(calc(100% - 28px), var(--container))}
  .button{width:100%}
  .hero-actions{width:100%}
}

@media (max-width:900px){
  .container{width:min(calc(100% - 24px), var(--container));}
  .hero-grid{gap:28px;}
  .panel{padding:16px; border-radius:24px;}
  .simple-ui{border-radius:20px;}
  .simple-ui-head{padding:12px 14px;}
  .simple-ui-body{padding:12px;}
  .ui-box.pad{padding:12px;}
  .ui-tabs{overflow:auto; flex-wrap:nowrap; padding-bottom:2px;}
  .ui-tab{white-space:nowrap;}
  .floating-cta{min-height:54px; font-size:13px; letter-spacing:.06em;}
  .site-header{border-bottom-color: rgba(255,255,255,.08);}
}

@media (max-width:560px){
  body::before{background-size:34px 34px;}
  .hero-proof,.grid-3,.grid-4,.grid-2,.cards-grid,.benefits-grid,.footer-grid,.closing-strip,.steps-grid,.faq-grid,.case-grid{gap:12px;}
  .hero-chips{gap:8px;}
  .chip{font-size:12px; padding:9px 10px;}
  .panel-title{font-size:16px;}
  .card h3{font-size:18px;}
  .eyebrow{font-size:11px; letter-spacing:.14em;}
}
