:root{
  --canvas: #080C14;
  --card: #121824;
  --shadow-out: 10px 10px 20px #05080e, -10px -10px 20px #1f283a;
  --shadow-in: inset 6px 6px 12px #05080e, inset -6px -6px 12px #1f283a;
  --green: #00FF87;
  --cyan: #00F0FF;
  --violet: #7928CA;
  --text-primary: #EDEFF4;
  --text-muted: #8A93A6;
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --transition-fast: .25s ease;
  --transition-mid: .35s cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--canvas);
  color:var(--text-primary);
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height:1.5;
  overflow-x:hidden;
}
h1,h2,h3,p,ul{ margin:0 0 .75em; }
ul{ padding-left:1.1em; }
a{ color:inherit; }
button{ font-family:inherit; }
img{ max-width:100%; display:block; }
:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; }
.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.section-inner{ max-width:1200px; margin:0 auto; padding:0 1.25rem; }

.brand{
  display:flex;
  align-items:center;
  gap:.6rem;
  justify-content:center;
  flex-wrap:wrap;
  text-align:center;
}
.brand-wordmark{
  display:inline-flex;
  align-items:baseline;
  gap:.55rem;
  font-size:1.5rem;
  letter-spacing:.04em;
}
.brand-wordmark .amanii{ font-weight:300; color:var(--text-primary); }
.brand-wordmark .sep{
  width:1px; height:1.1em; background:var(--text-muted); display:inline-block;
}
.brand-wordmark .corp{ font-weight:700; color:var(--text-primary); }
.brand-wordmark .orate{ font-weight:300; color:var(--text-primary); }
.brand-diamond{ color:var(--cyan); font-size:1rem; }
.brand-baseline{
  display:block;
  font-size:.6rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-top:.25rem;
}
.brand-baseline b{ color:var(--text-primary); font-weight:600; }
.site-footer .brand-wordmark{ font-size:1.05rem; }

.hero{ padding:2.5rem 0 1.5rem; text-align:center; }
.hero h1{
  font-size:1.6rem;
  font-weight:700;
  margin-top:1.5rem;
  color:var(--text-primary);
}
.hero p{
  color:var(--text-muted);
  font-size:.95rem;
  max-width:38ch;
  margin-left:auto;
  margin-right:auto;
}

.switcher-wrap{
  position:sticky;
  top:0;
  z-index:40;
  background:var(--canvas);
  padding:.75rem 1.25rem .5rem;
}
.switcher-track{
  position:relative;
  display:flex;
  max-width:640px;
  margin:0 auto;
  background:var(--card);
  border-radius:999px;
  box-shadow:var(--shadow-out);
  padding:5px;
}
.switcher-indicator{
  position:absolute;
  top:5px; left:5px;
  width:calc(50% - 5px);
  height:calc(100% - 10px);
  border-radius:999px;
  background:var(--card);
  box-shadow:var(--shadow-in);
  transition:transform var(--transition-mid);
  z-index:0;
}
.switcher-track.is-vue2 .switcher-indicator{
  transform:translateX(100%);
}
.switcher-btn{
  position:relative;
  z-index:1;
  flex:1 1 50%;
  border:0;
  background:transparent;
  color:var(--text-muted);
  font-size:.8rem;
  font-weight:600;
  padding:.75rem .5rem;
  border-radius:999px;
  cursor:pointer;
  transition:color var(--transition-fast);
  white-space:normal;
}
.switcher-btn[aria-selected="true"]{ color:var(--text-primary); }
.switcher-btn:nth-child(2)[aria-selected="true"]{ text-shadow:0 0 12px rgba(0,240,255,.5); }
.switcher-btn:nth-child(1)[aria-selected="true"]{ text-shadow:0 0 12px rgba(0,255,135,.4); }

.switcher-microcopy{
  text-align:center;
  color:var(--text-muted);
  font-size:.72rem;
  margin:.6rem 0 0;
}

.offers-view{
  display:none;
  opacity:1;
  transition:opacity var(--transition-mid);
  padding:1.5rem 0 2.5rem;
}
.offers-view.is-active{ display:block; }
.offers-view.fade-out,
.offers-view.fade-in{ opacity:0; }

.view-heading{ text-align:center; padding:0 1.25rem; }
.view-heading p{ color:var(--text-muted); font-size:.9rem; max-width:42ch; margin:0 auto; }

.carousel{ position:relative; margin-top:1.25rem; }
.carousel-track{
  display:flex;
  gap:1rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  padding:.5rem 10% 1rem;
  scrollbar-width:none;
}
.carousel-track::-webkit-scrollbar{ display:none; }

.dots{
  display:flex;
  justify-content:center;
  gap:.5rem;
  padding-top:.25rem;
}
.dot{
  width:8px; height:8px;
  border-radius:50%;
  border:0;
  padding:0;
  background:var(--card);
  box-shadow:var(--shadow-out);
  cursor:pointer;
}
.dot.active{ background:var(--cyan); box-shadow:0 0 8px var(--cyan); }

.card{
  flex:0 0 82%;
  scroll-snap-align:center;
  background:var(--card);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-out);
  padding:1.5rem 1.25rem;
  display:flex;
  flex-direction:column;
  gap:.6rem;
}
.card-icon{ font-size:1.8rem; }
.card h3{ font-size:1.15rem; margin:0; letter-spacing:.02em; }
.card .tagline{ color:var(--cyan); font-size:.85rem; font-weight:600; margin:0; }
.card .audience{ color:var(--text-muted); font-size:.82rem; margin:0; }
.card .audience strong{ color:var(--text-primary); }
.card .features{ font-size:.85rem; color:var(--text-primary); margin:0; }
.card .features li{ margin-bottom:.4rem; }

.pricing{ margin-top:.25rem; display:flex; flex-direction:column; gap:.5rem; }
.price-option{
  background:var(--canvas);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-in);
  padding:.6rem .75rem;
}
.price-name{ display:block; font-size:.72rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; }
.price-value{ display:block; font-size:1.3rem; font-weight:700; color:var(--green); }
.price-note{ display:block; font-size:.7rem; color:var(--text-muted); }

.price-single{ font-size:1.6rem; font-weight:700; color:var(--green); margin:.25rem 0 0; }
.price-format{ font-size:.75rem; color:var(--text-muted); margin:0; }

.payment-reassurance{
  font-size:.72rem;
  color:var(--text-muted);
  background:var(--canvas);
  box-shadow:var(--shadow-in);
  border-radius:var(--radius-sm);
  padding:.5rem .7rem;
  margin:0;
}

.badge{
  display:inline-block;
  align-self:flex-start;
  font-size:.72rem;
  font-weight:600;
  padding:.35rem .7rem;
  border-radius:999px;
  background:var(--canvas);
  box-shadow:var(--shadow-in);
}
.badge-fire{ color:var(--green); text-shadow:0 0 8px rgba(0,255,135,.5); }
.badge-star{ color:var(--green); text-shadow:0 0 8px rgba(0,255,135,.5); }
.badge-sparkle{ color:#c9a3ff; text-shadow:0 0 8px rgba(121,40,202,.7); }

.card-oracle{
  box-shadow:var(--shadow-out), 0 0 32px rgba(121,40,202,.45);
  border:1px solid rgba(121,40,202,.4);
}

.cta-btn{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  text-align:center;
  text-decoration:none;
  background:var(--card);
  color:var(--green);
  font-weight:700;
  font-size:.85rem;
  padding:.85rem 1rem;
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-out);
  transition:box-shadow var(--transition-fast), transform var(--transition-fast);
}
.cta-btn:hover, .cta-btn:focus-visible{ box-shadow:var(--shadow-in); transform:translateY(1px); }
.card-oracle .cta-btn{ color:#c9a3ff; }

.contact{ padding:2.5rem 1.25rem; max-width:520px; margin:0 auto; }
.contact h2{ font-size:1.25rem; text-align:center; }
.contact > p{ color:var(--text-muted); font-size:.85rem; text-align:center; margin-bottom:1.5rem; }
.field{ margin-bottom:1.1rem; }
.field label{ display:block; font-size:.78rem; color:var(--text-muted); margin-bottom:.4rem; }
.field input{
  width:100%;
  background:var(--canvas);
  box-shadow:var(--shadow-in);
  border:1px solid transparent;
  border-radius:var(--radius-sm);
  padding:.8rem .9rem;
  color:var(--text-primary);
  font-size:.9rem;
}
.field input::placeholder{ color:#4b5468; }
.field input:invalid[aria-invalid="true"]{ border-color:#ff5c5c; }
.field-error{
  display:block;
  min-height:1.1em;
  color:#ff8080;
  font-size:.72rem;
  margin-top:.35rem;
}
.btn-primary{
  width:100%;
  border:0;
  cursor:pointer;
  background:var(--card);
  color:var(--green);
  font-weight:700;
  font-size:.95rem;
  padding:.95rem 1rem;
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-out);
}
.btn-primary:hover, .btn-primary:focus-visible{ box-shadow:var(--shadow-in); }
.form-feedback{
  text-align:center;
  font-size:.82rem;
  margin-top:.9rem;
  min-height:1.2em;
}
.form-feedback.success{ color:var(--green); }
.form-feedback.error{ color:#ff8080; }

.site-footer{
  text-align:center;
  padding:2rem 1.25rem 6.5rem;
  color:var(--text-muted);
  font-size:.82rem;
}
.site-footer address{ font-style:normal; margin-top:.75rem; display:flex; flex-direction:column; gap:.25rem; }
.site-footer a{ color:var(--cyan); text-decoration:none; }
.site-footer a:hover, .site-footer a:focus-visible{ text-decoration:underline; }

.sticky-cta{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:50;
  padding:.75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
  background:linear-gradient(to top, var(--canvas) 60%, transparent);
}
.sticky-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  text-decoration:none;
  background:var(--card);
  color:var(--green);
  font-weight:700;
  font-size:.9rem;
  padding:.95rem 1rem;
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-out);
}
.sticky-btn:active{ box-shadow:var(--shadow-in); }

@media (min-width:700px){
  .hero h1{ font-size:2.1rem; }
  .hero p{ max-width:50ch; }

  .carousel{ max-width:1200px; margin-left:auto; margin-right:auto; padding:0 1.25rem; }
  .carousel-track{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    overflow:visible;
    scroll-snap-type:none;
    padding:0;
  }
  .card{ flex:initial; }
  .dots{ display:none; }
  .sticky-cta{ display:none; }
  .site-footer{ padding-bottom:2rem; }
}

@media (min-width:1100px){
  #vue1 .carousel-track{ grid-template-columns:repeat(4, 1fr); }
  #vue2 .carousel-track{ grid-template-columns:repeat(3, 1fr); max-width:900px; margin:0 auto; }
  .hero h1{ font-size:2.5rem; }
}