/* Base */
html, body { height: 100%; }
body{
  background:
    radial-gradient(1200px 600px at 12% 10%, rgba(124,92,255,.20), transparent 60%),
    radial-gradient(1000px 540px at 88% 18%, rgba(0,214,198,.16), transparent 58%),
    radial-gradient(900px 520px at 50% 92%, rgba(255,77,166,.12), transparent 62%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1));
  color: var(--text-0);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

a { color: inherit; }
.link-soft{
  color: var(--text-0);
  text-decoration: none;
  border-bottom: 1px dashed rgba(255,255,255,.25);
}
.link-soft:hover{ border-bottom-color: rgba(255,255,255,.55); }

.text-muted{ color: var(--text-2) !important; }

.skip-link{
  position: absolute; left: -9999px; top: 10px;
  background: var(--surface-0); color: var(--text-0);
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--line); z-index: 9999;
}
.skip-link:focus{ left: 10px; }

.divider-soft{
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
}

/* Navbar */
.glass-nav{
  background: rgba(10,14,28,.55);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
}

.brand-mark{
  width: 34px; height: 34px;
  border-radius: 12px;
  background:
    radial-gradient(18px 18px at 30% 30%, rgba(255,255,255,.26), transparent 60%),
    linear-gradient(135deg, rgba(124,92,255,.95), rgba(0,214,198,.95));
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
  position: relative;
}
.brand-mark::after{
  content:"";
  position:absolute; inset: 7px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.22);
  transform: rotate(9deg);
}

.brand-dot{
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--accent-3);
  box-shadow: 0 0 0 4px rgba(255,77,166,.16);
}

.brand-sub{ color: var(--text-2); font-size: .9rem; }

/* Buttons */
.btn-accent{
  --bs-btn-color: #0b1020;
  --bs-btn-bg: var(--accent-2);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-bg: #0fe9d7;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-focus-shadow-rgb: 0, 214, 198;
  border-radius: 14px;
  font-weight: 650;
}
.btn-outline-soft{
  --bs-btn-color: var(--text-0);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: rgba(255,255,255,.18);
  --bs-btn-hover-bg: rgba(255,255,255,.06);
  --bs-btn-hover-border-color: rgba(255,255,255,.26);
  border-radius: 14px;
}

/* Hero */
.hero-surface{
  padding-top: 18px;
}
.hero-blobs .blob{
  position:absolute;
  filter: blur(40px);
  opacity: .9;
  border-radius: 40%;
  transform: rotate(12deg);
}
.hero-blobs .b1{
  width: 360px; height: 360px;
  left: -120px; top: -90px;
  background: radial-gradient(circle at 30% 30%, rgba(124,92,255,.75), rgba(124,92,255,0));
}
.hero-blobs .b2{
  width: 420px; height: 420px;
  right: -150px; top: 20px;
  background: radial-gradient(circle at 40% 40%, rgba(0,214,198,.65), rgba(0,214,198,0));
}
.hero-blobs .b3{
  width: 520px; height: 520px;
  left: 25%; bottom: -260px;
  background: radial-gradient(circle at 40% 40%, rgba(255,77,166,.45), rgba(255,77,166,0));
}

.badge-soft{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
.badge-soft .dot{
  width: 10px; height: 10px; border-radius: 999px;
  background: var(--accent-2);
  box-shadow: 0 0 0 6px rgba(0,214,198,.16);
}

.hero-card{
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.hero-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(500px 260px at 20% 10%, rgba(124,92,255,.22), transparent 60%),
              radial-gradient(420px 240px at 80% 20%, rgba(0,214,198,.18), transparent 60%);
  pointer-events:none;
}
.hero-card > *{ position: relative; }

.icon-origami{
  width: 46px; height: 46px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  position: relative;
}
.icon-origami::before{
  content:"";
  position:absolute; inset: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  clip-path: polygon(50% 0%, 100% 38%, 78% 100%, 22% 100%, 0% 38%);
  border-radius: 10px;
  opacity: .95;
}

.pill-item{
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10,14,28,.45);
  display:flex; align-items:center; gap:10px;
}
.pill-ic{
  width: 12px; height: 12px; border-radius: 6px;
  background: var(--accent-3);
  box-shadow: 0 0 0 6px rgba(255,77,166,.12);
}

.hero-art{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 14px;
}

/* Metrics */
.mini-metrics{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 576px){
  .mini-metrics{ grid-template-columns: repeat(3, 1fr); }
}
.metric{
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.metric-k{ font-weight: 650; }
.metric-v{ font-size: .92rem; }

/* Wave */
.section-wave{
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 120px;
}
.section-wave svg{ width: 100%; height: 100%; }
.section-wave path{ fill: rgba(255,255,255,.04); }

/* Feature cards */
.feature-card{
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  padding: 18px;
  height: 100%;
  box-shadow: var(--shadow-soft);
}
.feature-ic{
  width: 46px; height: 46px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  display:grid; place-items:center;
}
.feature-ic svg{
  width: 22px; height: 22px;
  fill: none;
  stroke: rgba(255,255,255,.78);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Pricing surface */
.pricing-surface{
  background:
    radial-gradient(1000px 520px at 80% 0%, rgba(124,92,255,.18), transparent 60%),
    radial-gradient(900px 520px at 20% 100%, rgba(0,214,198,.14), transparent 60%),
    rgba(255,255,255,.02);
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.pricing-pattern{
  position:absolute; inset:0;
  opacity: .55;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.12) 1px, transparent 0);
  background-size: 18px 18px;
  mask-image: radial-gradient(circle at 50% 20%, #000 0 42%, transparent 70%);
}

.price-card{
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10,14,28,.52);
  padding: 22px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.price-card::after{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(600px 220px at 20% 0%, rgba(255,77,166,.10), transparent 60%),
              radial-gradient(600px 220px at 90% 20%, rgba(0,214,198,.10), transparent 60%);
  pointer-events:none;
}
.price-card > *{ position: relative; }
.price-card.featured{
  border-color: rgba(0,214,198,.35);
  box-shadow: 0 22px 70px rgba(0,0,0,.55);
}
.price-top{ padding-bottom: 10px; }
.price{
  font-size: 2rem;
  font-weight: 750;
  letter-spacing: -0.02em;
}
.chip{
  font-size: .78rem;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
}
.chip-hot{
  border-color: rgba(255,77,166,.35);
  background: rgba(255,77,166,.10);
}
.price-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.price-list li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  color: var(--text-1);
}
.price-list li::before{
  content:"";
  width: 10px; height: 10px;
  margin-top: 6px;
  border-radius: 3px;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
}

/* Accordion */
.accordion-neo .accordion-item{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 12px;
}
.accordion-neo .accordion-button{
  background: rgba(10,14,28,.35);
  color: var(--text-0);
  font-weight: 650;
}
.accordion-neo .accordion-button:focus{
  box-shadow: none;
}
.accordion-neo .accordion-button:not(.collapsed){
  background: rgba(0,214,198,.10);
  color: var(--text-0);
}
.accordion-neo .accordion-body{
  background: rgba(10,14,28,.25);
}

/* Stories */
.stories-surface{
  background: rgba(255,255,255,.02);
  border-top: 1px solid rgba(255,255,255,.08);
}
.story-card{
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10,14,28,.45);
  padding: 22px;
  box-shadow: var(--shadow-soft);
}
.story-tag{
  display:inline-flex;
  font-size: .78rem;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(124,92,255,.14);
  border: 1px solid rgba(124,92,255,.26);
}

/* CTA panel & forms */
.cta-panel{
  border-radius: calc(var(--radius-lg) + 6px);
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(800px 380px at 15% 10%, rgba(124,92,255,.14), transparent 60%),
    radial-gradient(700px 320px at 85% 0%, rgba(0,214,198,.12), transparent 60%),
    rgba(10,14,28,.55);
  box-shadow: var(--shadow);
}

.cta-bullets{ display:grid; gap: 10px; }
.bullet{
  display:flex; align-items:center; gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.b-ic{
  width: 12px; height: 12px;
  border-radius: 6px;
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(124,92,255,.14);
}

.form-control, .form-select{
  border-radius: 14px;
  border-color: rgba(255,255,255,.16);
  background: rgba(10,14,28,.35);
  color: var(--text-0);
}
.form-control:focus{
  border-color: rgba(0,214,198,.45);
  box-shadow: 0 0 0 .2rem rgba(0,214,198,.12);
  background: rgba(10,14,28,.35);
  color: var(--text-0);
}
.form-label{ color: var(--text-1); font-weight: 600; }
.form-check-input{
  border-color: rgba(255,255,255,.22);
  background-color: rgba(10,14,28,.35);
}
.form-check-input:checked{
  background-color: var(--accent-2);
  border-color: var(--accent-2);
}

/* Inner pages */
.inner-hero{
  background:
    radial-gradient(900px 420px at 70% 0%, rgba(124,92,255,.14), transparent 60%),
    rgba(255,255,255,.01);
}
.side-card, .contact-card, .form-shell, .pattern-card, .info-panel, .bm-card, .note-card, .mini-contact, .thank-card{
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10,14,28,.45);
  box-shadow: var(--shadow-soft);
}

.kv{
  display:flex; justify-content: space-between; gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(255,255,255,.12);
}
.kv:last-child{ border-bottom: none; }
.kv span{ color: var(--text-2); }

.list-check{
  list-style: none;
  padding-left: 0;
  display:grid;
  gap: 10px;
}
.list-check li{
  display:flex;
  gap: 10px;
  color: var(--text-1);
}
.list-check li::before{
  content:"";
  width: 12px; height: 12px;
  margin-top: 6px;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--accent-3), var(--accent));
}

.form-icon{
  width: 54px; height: 54px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(16px 16px at 35% 30%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(135deg, rgba(0,214,198,.55), rgba(124,92,255,.55));
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}

/* Legal pages */
.page-legal .legal-card{
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10,14,28,.45);
  box-shadow: var(--shadow);
}
.page-legal h2, .page-legal h3 { scroll-margin-top: 100px; }

/* Footer */
.site-footer{
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(10,14,28,.45);
}
.footer-card{
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.footer-links a{
  display:inline-block;
  padding: 6px 0;
  text-decoration:none;
  color: var(--text-1);
}
.footer-links a:hover{ color: var(--text-0); }

.social-pill{
  display:inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  text-decoration:none;
  color: var(--text-0);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
}
.social-pill:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.22);
}

/* Thank you badge */
.checkmark-badge{
  width: 56px; height: 56px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,214,198,.10);
  position: relative;
}
.checkmark-badge::before{
  content:"";
  position:absolute;
  left: 17px; top: 26px;
  width: 10px; height: 18px;
  border-right: 3px solid rgba(0,214,198,.95);
  border-bottom: 3px solid rgba(0,214,198,.95);
  transform: rotate(45deg);
}