html, body { height: 100%; }
body{
  background:
    radial-gradient(900px 520px at 18% 10%, rgba(63,124,255,.18), transparent 60%),
    radial-gradient(900px 520px at 82% 20%, rgba(0,184,148,.14), transparent 62%),
    radial-gradient(900px 520px at 50% 92%, rgba(255,107,53,.10), transparent 65%),
    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; }
.text-muted{ color: var(--text-2) !important; }

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

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

.link-soft{
  text-decoration:none;
  border-bottom: 1px dashed rgba(255,255,255,.28);
}
.link-soft:hover{ border-bottom-color: rgba(255,255,255,.52); }

/* NAV */
.nav-glass{
  background: rgba(10,14,22,.58);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
}
.brand-seal{
  width: 34px; height: 34px;
  border-radius: 14px;
  background:
    radial-gradient(18px 18px at 35% 30%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(135deg, rgba(255,107,53,.92), rgba(63,124,255,.92));
  box-shadow: 0 14px 34px rgba(0,0,0,.38);
  position: relative;
}
.brand-seal::after{
  content:"";
  position:absolute; inset: 7px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.20);
  transform: rotate(8deg);
}
.brand-kicker{
  margin-left: 10px;
  font-size: .9rem;
  color: var(--text-2);
}

/* Buttons */
.btn-accent{
  --bs-btn-color: #0b101a;
  --bs-btn-bg: var(--accent-4);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-bg: #ffd25f;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-focus-shadow-rgb: 247,201,72;
  border-radius: 14px;
  font-weight: 700;
}
.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{
  position: relative;
  padding-top: 12px;
}
.hero-inklines{
  position:absolute; inset:0;
  opacity:.65;
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.10) 1px, transparent 0);
  background-size: 18px 18px;
  mask-image: radial-gradient(circle at 45% 20%, #000 0 42%, transparent 70%);
}
.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-dot{
  width: 10px; height: 10px; border-radius: 999px;
  background: var(--accent-2);
  box-shadow: 0 0 0 6px rgba(0,184,148,.14);
}
.text-soft{ color: var(--text-1); }

.hero-card{
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(15,24,38,.55);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.hero-card::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(560px 260px at 18% 10%, rgba(63,124,255,.16), transparent 60%),
    radial-gradient(560px 260px at 86% 14%, rgba(255,107,53,.12), transparent 60%);
  pointer-events:none;
}
.hero-card > *{ position: relative; }

.stamp-chip{
  font-size: .78rem;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
}

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

.pill{
  display:inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  color: var(--text-1);
  font-size: .9rem;
}

.hero-metrics{
  display:grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 576px){
  .hero-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: 700; }
.metric-v{ font-size: .92rem; }

.section-wave{
  position:absolute; left:0; right:0; bottom:-1px;
  height: 120px;
}
.section-wave path{ fill: rgba(255,255,255,.04); }

/* Lists */
.list-steps{
  list-style:none;
  padding-left:0;
  margin:0;
  display:grid;
  gap: 12px;
}
.list-steps li{
  display:flex;
  gap: 12px;
  align-items:flex-start;
}
.step-bullet{
  width: 12px; height: 12px;
  margin-top: 6px;
  border-radius: 5px;
  background: linear-gradient(135deg, var(--accent-3), var(--accent));
  box-shadow: 0 0 0 7px rgba(255,107,53,.10);
}

/* Feature cards */
.feature-card{
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(15,24,38,.42);
  padding: 18px;
  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;
}

/* Callouts / panels */
.callout-card, .hint-card, .mini-panel, .note-card, .footer-card, .side-card, .contact-card, .form-shell, .info-panel, .pattern-card, .bm-card, .mini-contact, .cta-panel{
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(15,24,38,.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-2), var(--accent));
}

/* Formats section */
.formats-surface{
  background:
    radial-gradient(900px 520px at 80% 0%, rgba(63,124,255,.14), transparent 60%),
    radial-gradient(900px 520px at 10% 90%, rgba(0,184,148,.10), transparent 65%),
    rgba(255,255,255,.02);
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.formats-grid{
  position:absolute; inset:0;
  opacity: .55;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at 50% 40%, #000 0 45%, transparent 72%);
}

.plan-card{
  border-radius: calc(var(--radius-lg) + 4px);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(15,24,38,.52);
  padding: 22px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.plan-card::after{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(600px 220px at 20% 0%, rgba(255,107,53,.10), transparent 60%),
    radial-gradient(600px 220px at 90% 20%, rgba(247,201,72,.10), transparent 60%);
  pointer-events:none;
}
.plan-card > *{ position: relative; }
.plan-card.featured{
  border-color: rgba(247,201,72,.36);
  box-shadow: 0 24px 70px rgba(0,0,0,.56);
}
.plan-tag{
  display:inline-flex;
  font-size: .78rem;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(63,124,255,.12);
  border: 1px solid rgba(63,124,255,.26);
}
.plan-tag.hot{
  background: rgba(247,201,72,.12);
  border-color: rgba(247,201,72,.30);
}
.plan-ic{
  width: 44px; height: 44px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(14px 14px at 35% 30%, rgba(255,255,255,.16), transparent 60%),
    linear-gradient(135deg, rgba(0,184,148,.45), rgba(63,124,255,.45));
}
.plan-ic.is-featured{
  background:
    radial-gradient(14px 14px at 35% 30%, rgba(255,255,255,.16), transparent 60%),
    linear-gradient(135deg, rgba(247,201,72,.55), rgba(255,107,53,.45));
}
.plan-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap: 10px;
}
.plan-list li{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  color: var(--text-1);
}
.plan-list li::before{
  content:"";
  width: 10px; height: 10px;
  margin-top: 6px;
  border-radius: 3px;
  background: linear-gradient(135deg, var(--accent-4), var(--accent-3));
}

/* Accordion */
.accordion-neo .accordion-item{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(15,24,38,.35);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 12px;
}
.accordion-neo .accordion-button{
  background: rgba(15,24,38,.38);
  color: var(--text-0);
  font-weight: 700;
}
.accordion-neo .accordion-button:focus{ box-shadow: none; }
.accordion-neo .accordion-button:not(.collapsed){
  background: rgba(247,201,72,.10);
  color: var(--text-0);
}
.accordion-neo .accordion-body{
  background: rgba(10,14,22,.25);
}

/* Cases */
.cases-surface{
  background: rgba(255,255,255,.02);
  border-top: 1px solid rgba(255,255,255,.08);
}
.case-card{
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(15,24,38,.44);
  padding: 22px;
  box-shadow: var(--shadow-soft);
}
.case-tag{
  display:inline-flex;
  font-size: .78rem;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,184,148,.12);
  border: 1px solid rgba(0,184,148,.26);
}

/* Forms */
.form-control, .form-select{
  border-radius: 14px;
  border-color: rgba(255,255,255,.16);
  background: rgba(10,14,22,.32);
  color: var(--text-0);
}
.form-control:focus{
  border-color: rgba(63,124,255,.46);
  box-shadow: 0 0 0 .2rem rgba(63,124,255,.12);
  background: rgba(10,14,22,.32);
  color: var(--text-0);
}
.form-label{ color: var(--text-1); font-weight: 650; }
.form-check-input{
  border-color: rgba(255,255,255,.22);
  background-color: rgba(10,14,22,.32);
}
.form-check-input:checked{
  background-color: var(--accent-2);
  border-color: var(--accent-2);
}

.form-badge{
  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,.16), transparent 60%),
    linear-gradient(135deg, rgba(255,107,53,.40), rgba(63,124,255,.45));
  box-shadow: 0 18px 44px rgba(0,0,0,.32);
}

.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-4);
  box-shadow: 0 0 0 6px rgba(247,201,72,.12);
}

/* Footer */
.site-footer{
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(10,14,22,.45);
}
.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);
}

/* Small wave variant */
.small-wave{ height: 90px; }
.small-wave path{ fill: rgba(255,255,255,.03); }