:root{
  --bg:#06050a;
  --panel:#0e0a13;
  --text:#f6f1f8;
  --muted:#a39aa8;
  --line:rgba(255,255,255,.075);
  --pink:#e43abd;
  --purple:#9b55ff;
  --blue:#617fff;
  --green:#6ee7b7;
  --mx:50%;
  --my:50%;
}

*{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  background:var(--bg);
}

body{
  margin:0;
  overflow-x:hidden;
  color:var(--text);
  background:
    radial-gradient(circle at 18% -5%,rgba(224,50,182,.14),transparent 28%),
    radial-gradient(circle at 82% 14%,rgba(95,92,255,.12),transparent 32%),
    var(--bg);
  font-family:Manrope,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

a{color:inherit;text-decoration:none}
button{font:inherit}

::selection{
  color:#fff;
  background:rgba(215,64,189,.45);
}

.bg-canvas{
  position:fixed;
  z-index:0;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  opacity:.72;
}

.noise{
  position:fixed;
  z-index:1;
  inset:0;
  pointer-events:none;
  opacity:.15;
  background-image:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 4px,
      rgba(255,255,255,.012) 5px
    );
  mask-image:linear-gradient(#000,rgba(0,0,0,.45));
}

.page{
  position:relative;
  z-index:2;
}

.wrap{
  width:min(1240px,calc(100% - 40px));
  margin-inline:auto;
}

.header{
  position:relative;
  z-index:20;
  padding:23px 0;
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.brand{
  display:flex;
  align-items:center;
  gap:11px;
  font-size:15px;
  font-weight:800;
  letter-spacing:-.02em;
}

.brand img{
  width:27px;
  height:27px;
  object-fit:contain;
  filter:drop-shadow(0 0 17px rgba(218,54,190,.38));
}

.nav-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.nav-home{
  color:#a69dab;
  font-size:11px;
  font-weight:700;
  transition:.2s ease;
}

.nav-home:hover{color:#fff}

.btn{
  position:relative;
  display:inline-flex;
  min-height:46px;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:0 18px;
  border:1px solid var(--line);
  border-radius:14px;
  color:#fff;
  background:rgba(255,255,255,.035);
  font-size:11px;
  font-weight:800;
  cursor:pointer;
  overflow:hidden;
  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

.btn:before{
  content:"";
  position:absolute;
  inset:0;
  opacity:0;
  background:
    radial-gradient(
      180px circle at var(--mx) var(--my),
      rgba(255,255,255,.15),
      transparent 65%
    );
  transition:.25s ease;
}

.btn:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.16);
}

.btn:hover:before{opacity:1}

.btn-primary{
  border-color:rgba(232,70,197,.24);
  background:
    linear-gradient(115deg,#d92daf,#9b4ff0 52%,#6477f5);
  box-shadow:
    0 18px 55px rgba(153,69,229,.24),
    inset 0 1px 0 rgba(255,255,255,.18);
}

.hero{
  min-height:78vh;
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr);
  align-items:center;
  gap:40px;
  padding:65px 0 90px;
}

.hero-copy{
  position:relative;
  z-index:3;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
  color:#c79dff;
  font-size:9px;
  font-weight:800;
  letter-spacing:.15em;
  text-transform:uppercase;
}

.eyebrow:before{
  content:"";
  width:29px;
  height:1px;
  background:linear-gradient(90deg,#e348bc,#7f68ff);
  box-shadow:0 0 12px rgba(219,72,202,.45);
}

.hero h1{
  max-width:680px;
  margin:0;
  font-size:clamp(56px,6.8vw,102px);
  line-height:.88;
  letter-spacing:-.075em;
  font-weight:600;
}

.gradient{
  color:transparent;
  background:
    linear-gradient(108deg,#fff 0%,#ead6ff 26%,#ed72ce 55%,#817dff 100%);
  background-size:170% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  animation:gradientShift 6s ease-in-out infinite alternate;
}

@keyframes gradientShift{
  to{background-position:100% 50%}
}

.hero-lead{
  max-width:590px;
  margin:26px 0 0;
  color:#aaa0ae;
  font-size:15px;
  line-height:1.75;
}

.hero-actions{
  display:flex;
  gap:11px;
  margin-top:30px;
}

.proofs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:31px;
}

.proof{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:34px;
  padding:0 11px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:999px;
  color:#938b99;
  background:rgba(255,255,255,.022);
  font-size:9px;
  font-weight:700;
}

.proof i{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#78e7bc;
  box-shadow:0 0 10px rgba(120,231,188,.7);
}

.hero-art{
  position:relative;
  min-height:530px;
  display:grid;
  place-items:center;
}

.hero-orbit{
  position:absolute;
  width:min(42vw,560px);
  aspect-ratio:1;
  border:1px solid rgba(202,103,255,.11);
  border-radius:50%;
  transform:rotate(-16deg);
  box-shadow:
    inset 0 0 80px rgba(141,57,218,.025),
    0 0 80px rgba(119,57,219,.035);
}

.hero-orbit:before,
.hero-orbit:after{
  content:"";
  position:absolute;
  border:1px solid rgba(108,145,255,.08);
  border-radius:50%;
}

.hero-orbit:before{inset:13%}
.hero-orbit:after{inset:29%}

.hero-price{
  position:relative;
  z-index:2;
  text-align:center;
}

.hero-price .from{
  color:#9e95a5;
  font-size:10px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.hero-price strong{
  display:block;
  margin-top:5px;
  font-size:clamp(115px,13vw,190px);
  line-height:.8;
  letter-spacing:-.09em;
  font-weight:650;
  color:transparent;
  background:linear-gradient(125deg,#fff,#e4beef 37%,#d45ac2 68%,#8870ff);
  -webkit-background-clip:text;
  background-clip:text;
  filter:drop-shadow(0 20px 60px rgba(177,73,224,.10));
}

.hero-price small{
  display:block;
  margin-top:22px;
  color:#aaa0ae;
  font-size:12px;
}

.float-chip{
  position:absolute;
  z-index:3;
  min-width:115px;
  padding:13px 15px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  color:#c8becd;
  background:rgba(14,9,21,.60);
  backdrop-filter:blur(15px);
  box-shadow:0 18px 60px rgba(0,0,0,.22);
  font-size:8px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  animation:float 5s ease-in-out infinite alternate;
}

.float-chip b{
  display:block;
  margin-top:4px;
  color:#fff;
  font-size:12px;
  letter-spacing:0;
  text-transform:none;
}

.fc1{left:4%;top:22%}
.fc2{right:2%;top:36%;animation-delay:-2s}
.fc3{left:16%;bottom:15%;animation-delay:-1s}

@keyframes float{
  to{transform:translateY(-11px) rotate(.5deg)}
}


/* ==========================================================
   CONFIGURATION ROOM
   ========================================================== */

.configure{
  padding:60px 0 130px;
}

.section-head{
  max-width:810px;
  margin-bottom:42px;
}

.section-kicker{
  color:#b995ee;
  font-size:9px;
  font-weight:800;
  letter-spacing:.15em;
  text-transform:uppercase;
}

.section-title{
  margin:13px 0 0;
  font-size:clamp(42px,5vw,72px);
  line-height:.95;
  letter-spacing:-.06em;
  font-weight:600;
}

.section-lead{
  max-width:630px;
  margin:18px 0 0;
  color:#99909f;
  font-size:14px;
  line-height:1.72;
}

.config-shell{
  position:relative;
  display:grid;
  grid-template-columns:minmax(360px,.78fr) minmax(500px,1.22fr);
  min-height:720px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.075);
  border-radius:35px;
  background:
    radial-gradient(circle at 77% 38%,rgba(142,64,227,.13),transparent 33%),
    radial-gradient(circle at 95% 87%,rgba(72,112,255,.075),transparent 31%),
    linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,.008)),
    rgba(8,6,13,.87);
  box-shadow:
    0 45px 130px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.055);
}

.config-shell:before{
  content:"";
  position:absolute;
  z-index:5;
  inset:0;
  pointer-events:none;
  opacity:.21;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 5px,
      rgba(255,255,255,.012) 6px
    );
}

.controls{
  position:relative;
  z-index:10;
  padding:48px 42px;
  border-right:1px solid rgba(255,255,255,.055);
  background:linear-gradient(90deg,rgba(7,5,10,.65),rgba(7,5,10,.30));
}

.control-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin-bottom:35px;
}

.control-header strong{
  font-size:11px;
  letter-spacing:.07em;
}

.live{
  display:flex;
  align-items:center;
  gap:6px;
  color:#7eddb9;
  font-size:7px;
  font-weight:800;
  letter-spacing:.13em;
}

.live i{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#72edba;
  box-shadow:0 0 11px rgba(114,237,186,.8);
  animation:pulse 1.5s ease-in-out infinite;
}

@keyframes pulse{50%{opacity:.35;transform:scale(.75)}}

.control-group{
  margin-top:27px;
}

.control-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:11px;
  color:#8e8595;
  font-size:8px;
  font-weight:800;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.control-label b{
  color:#cbbfd0;
  font-size:9px;
}

.segment{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:7px;
}

.choice{
  position:relative;
  min-height:46px;
  padding:0 6px;
  border:1px solid rgba(255,255,255,.065);
  border-radius:13px;
  color:#8f8696;
  background:rgba(255,255,255,.025);
  cursor:pointer;
  font-size:10px;
  font-weight:800;
  transition:.25s ease;
}

.choice:hover{
  color:#fff;
  border-color:rgba(206,120,255,.18);
  transform:translateY(-2px);
}

.choice.active{
  color:#fff;
  border-color:rgba(232,80,202,.28);
  background:
    linear-gradient(135deg,rgba(218,52,179,.22),rgba(105,84,240,.18));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 12px 32px rgba(150,65,219,.10);
}

.price-board{
  position:relative;
  margin-top:35px;
  padding:27px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.075);
  border-radius:23px;
  background:
    radial-gradient(circle at 85% 15%,rgba(223,65,184,.10),transparent 36%),
    rgba(255,255,255,.025);
}

.price-board:after{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  right:-80px;
  bottom:-100px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(109,89,255,.18),transparent 68%);
  filter:blur(5px);
}

.price-main{
  position:relative;
  z-index:2;
}

.price-caption{
  color:#8f8695;
  font-size:8px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.live-price{
  display:flex;
  align-items:flex-start;
  gap:7px;
  margin-top:10px;
  line-height:.8;
}

.live-price strong{
  font-size:clamp(58px,5vw,82px);
  letter-spacing:-.075em;
  font-weight:650;
}

.live-price span{
  margin-top:8px;
  color:#c5b9ca;
  font-size:20px;
  font-weight:700;
}

.price-metrics{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
  margin-top:23px;
}

.metric{
  min-height:67px;
  padding:12px 13px;
  border:1px solid rgba(255,255,255,.055);
  border-radius:14px;
  background:rgba(255,255,255,.02);
}

.metric span{
  display:block;
  color:#817986;
  font-size:7px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.metric b{
  display:block;
  margin-top:6px;
  color:#e5dce8;
  font-size:12px;
}

.metric.saving b{color:#78e3b8}

.config-cta{
  width:100%;
  margin-top:12px;
}


/* ==========================================================
   3D STAGE
   ========================================================== */

.stage{
  position:relative;
  min-width:0;
  overflow:hidden;
  isolation:isolate;
}

.stage canvas{
  position:absolute;
  z-index:2;
  inset:0;
  width:100%;
  height:100%;
}

.stage:before{
  content:"";
  position:absolute;
  z-index:1;
  width:520px;
  height:520px;
  left:50%;
  top:49%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:
    radial-gradient(circle,rgba(187,59,220,.17),rgba(105,63,230,.06) 34%,transparent 67%);
  filter:blur(10px);
}

.stage-hud{
  position:absolute;
  z-index:8;
  inset:25px;
  pointer-events:none;
}

.hud-top{
  display:flex;
  justify-content:space-between;
  color:rgba(188,178,198,.35);
  font-size:6px;
  font-weight:800;
  letter-spacing:.15em;
  text-transform:uppercase;
}

.hud-top b{color:#c59aff}

.stage-counter{
  position:absolute;
  right:2px;
  bottom:0;
  text-align:right;
}

.stage-counter span{
  display:block;
  color:#786f81;
  font-size:7px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.stage-counter strong{
  display:block;
  margin-top:5px;
  font-size:38px;
  line-height:1;
  letter-spacing:-.07em;
  font-weight:600;
}

.stage-counter small{
  color:#9b91a1;
  font-size:8px;
  font-weight:700;
}

.stage-grid{
  position:absolute;
  z-index:0;
  inset:0;
  opacity:.32;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:39px 39px;
  mask-image:radial-gradient(circle at center,#000 20%,transparent 72%);
}


/* ==========================================================
   CONTENT
   ========================================================== */

.content-section{
  padding:115px 0;
}

.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:42px;
}

.card{
  position:relative;
  min-height:310px;
  overflow:hidden;
  padding:31px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:26px;
  background:
    radial-gradient(circle at 88% 18%,var(--glow),transparent 35%),
    linear-gradient(145deg,rgba(255,255,255,.038),rgba(255,255,255,.01)),
    rgba(10,7,15,.76);
  transform-style:preserve-3d;
  transition:
    transform .35s cubic-bezier(.16,1,.3,1),
    border-color .25s ease,
    box-shadow .25s ease;
}

.card:hover{
  border-color:rgba(205,132,255,.18);
  box-shadow:0 30px 85px rgba(0,0,0,.20);
}

.card-index{
  color:#796e80;
  font-size:8px;
  font-weight:800;
  letter-spacing:.14em;
}

.card-icon{
  display:grid;
  width:56px;
  height:56px;
  margin-top:64px;
  place-items:center;
  border:1px solid rgba(255,255,255,.075);
  border-radius:18px;
  color:#dba4ff;
  background:rgba(255,255,255,.025);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  font-size:20px;
}

.card h3{
  margin:20px 0 0;
  font-size:23px;
  letter-spacing:-.04em;
}

.card p{
  margin:10px 0 0;
  color:#978e9c;
  font-size:12px;
  line-height:1.7;
}

.faq-layout{
  display:grid;
  grid-template-columns:.7fr 1.3fr;
  gap:60px;
  margin-top:46px;
}

.faq-number{
  position:sticky;
  top:70px;
  align-self:start;
}

.faq-number span{
  color:#817587;
  font-size:8px;
  font-weight:800;
  letter-spacing:.15em;
}

.faq-number strong{
  display:block;
  margin-top:13px;
  color:transparent;
  background:linear-gradient(125deg,#fff,#d79ee9,#8c70ff);
  -webkit-background-clip:text;
  background-clip:text;
  font-size:clamp(85px,11vw,160px);
  line-height:.8;
  letter-spacing:-.09em;
  font-weight:600;
}

.faq{
  display:grid;
  gap:10px;
}

.faq details{
  overflow:hidden;
  border:1px solid rgba(255,255,255,.07);
  border-radius:19px;
  background:
    radial-gradient(circle at 92% 10%,rgba(151,70,230,.06),transparent 34%),
    rgba(255,255,255,.018);
  transition:.25s ease;
}

.faq details[open]{
  border-color:rgba(192,114,255,.16);
  background:
    radial-gradient(circle at 90% 5%,rgba(173,76,241,.09),transparent 38%),
    rgba(255,255,255,.025);
}

.faq summary{
  position:relative;
  min-height:74px;
  display:flex;
  align-items:center;
  padding:18px 63px 18px 22px;
  cursor:pointer;
  list-style:none;
  font-size:13px;
  font-weight:700;
}

.faq summary::-webkit-details-marker{display:none}

.faq summary:after{
  content:"+";
  position:absolute;
  right:19px;
  top:50%;
  display:grid;
  width:32px;
  height:32px;
  place-items:center;
  transform:translateY(-50%);
  border:1px solid rgba(255,255,255,.075);
  border-radius:50%;
  color:#c996ff;
  font-size:18px;
  transition:.3s ease;
}

.faq details[open] summary:after{
  transform:translateY(-50%) rotate(45deg);
}

.faq p{
  max-width:720px;
  margin:0;
  padding:0 62px 25px 22px;
  color:#9c929f;
  font-size:12px;
  line-height:1.75;
}

.final{
  padding:70px 0 95px;
}

.final-card{
  position:relative;
  min-height:510px;
  display:grid;
  place-items:center;
  overflow:hidden;
  padding:50px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:35px;
  text-align:center;
  background:
    radial-gradient(circle at 50% 115%,rgba(107,73,255,.32),transparent 45%),
    radial-gradient(circle at 12% 0%,rgba(228,49,179,.16),transparent 32%),
    radial-gradient(circle at 90% 5%,rgba(63,115,255,.12),transparent 32%),
    #0a0710;
}

.final-card:before{
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  border:1px solid rgba(212,106,255,.08);
  border-radius:50%;
  box-shadow:
    0 0 0 55px rgba(166,86,255,.018),
    0 0 0 110px rgba(96,103,255,.012);
}

.final-content{
  position:relative;
  z-index:2;
  max-width:760px;
}

.final h2{
  margin:0;
  font-size:clamp(46px,6vw,82px);
  line-height:.94;
  letter-spacing:-.065em;
  font-weight:600;
}

.final p{
  max-width:600px;
  margin:20px auto 0;
  color:#9e95a3;
  font-size:13px;
  line-height:1.7;
}

.final .btn{
  margin-top:28px;
  min-height:54px;
  padding-inline:24px;
}

.footer{
  padding:22px 0 34px;
  color:#716977;
  font-size:8px;
}

.footer-row{
  display:flex;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid rgba(255,255,255,.05);
  padding-top:20px;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media(max-width:1000px){
  .hero{
    grid-template-columns:1fr;
    padding-top:70px;
  }

  .hero-copy{
    max-width:760px;
  }

  .hero-art{
    min-height:440px;
  }

  .hero-orbit{
    width:min(76vw,540px);
  }

  .config-shell{
    grid-template-columns:1fr;
  }

  .controls{
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.055);
  }

  .stage{
    min-height:600px;
  }

  .cards{
    grid-template-columns:1fr;
  }

  .card{
    min-height:260px;
  }
}

@media(max-width:650px){
  .wrap{
    width:min(100% - 26px,1240px);
  }

  .header{padding:15px 0}

  .nav-home{display:none}

  .hero{
    min-height:auto;
    padding:70px 0 50px;
    gap:20px;
  }

  .hero h1{
    font-size:clamp(50px,15vw,74px);
  }

  .hero-lead{
    font-size:13px;
  }

  .hero-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .hero-art{
    min-height:390px;
  }

  .float-chip{
    min-width:95px;
    padding:10px 11px;
    font-size:6px;
  }

  .fc1{left:0}
  .fc2{right:0}
  .fc3{left:7%}

  .configure{
    padding-top:40px;
  }

  .config-shell{
    border-radius:25px;
  }

  .controls{
    padding:28px 20px;
  }

  .segment{
    gap:5px;
  }

  .choice{
    min-height:43px;
    border-radius:11px;
    font-size:9px;
  }

  .price-board{
    padding:22px 18px;
  }

  .live-price strong{
    font-size:60px;
  }

  .stage{
    min-height:480px;
  }

  .stage-hud{
    inset:15px;
  }

  .content-section{
    padding:80px 0;
  }

  .section-title{
    font-size:42px;
  }

  .faq-layout{
    grid-template-columns:1fr;
    gap:24px;
  }

  .faq-number{
    position:static;
  }

  .faq-number strong{
    font-size:88px;
  }

  .faq summary{
    min-height:68px;
    padding-left:17px;
    font-size:12px;
  }

  .faq p{
    padding-left:17px;
    font-size:11px;
  }

  .final-card{
    min-height:430px;
    padding:35px 20px;
    border-radius:26px;
  }

  .footer-row{
    flex-direction:column;
  }
}

@media(prefers-reduced-motion:reduce){
  *,
  *:before,
  *:after{
    scroll-behavior:auto!important;
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
  }
}