*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 640px at 18% -10%, rgba(124,231,209,.16), transparent 60%),
    radial-gradient(820px 540px at 92% 0%, rgba(158,166,255,.14), transparent 58%),
    radial-gradient(980px 720px at 55% 115%, rgba(255,106,61,.14), transparent 62%),
    var(--bg);
}

/* Accessibility */
.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{
  left:12px;top:12px;width:auto;height:auto;padding:.6rem .8rem;
  background: rgba(16,26,52,.92); border:1px solid var(--line); border-radius:12px;
  z-index:9999;
}

.muted{color:var(--muted)}
.section{padding:86px 0}
.surface{
  position:relative;
  background: linear-gradient(180deg, rgba(12,16,34,.92), rgba(7,10,18,.92));
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.surface::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(520px 320px at 10% 20%, rgba(124,231,209,.10), transparent 60%),
    radial-gradient(620px 360px at 90% 40%, rgba(158,166,255,.10), transparent 62%);
  pointer-events:none;
}

.kicker{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.86rem; letter-spacing:.12em; text-transform:uppercase;
  color: rgba(255,178,143,.88);
}
.kicker::before{
  content:""; width:28px; height:2px;
  background: linear-gradient(90deg, rgba(255,106,61,.95), rgba(255,106,61,0));
  border-radius:999px;
}
.section-title{font-weight:700; letter-spacing:-.02em}

/* Navbar */
.nav-glass{
  background: rgba(7,10,18,.72);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(242,244,255,.10);
}
.navbar-toggler{border:1px solid rgba(242,244,255,.18)}
.navbar-toggler-icon{filter: invert(1); opacity:.85}
.nav-link{
  color: rgba(242,244,255,.78);
  border-radius: 999px;
  padding: .55rem .85rem;
}
.nav-link:hover{color:var(--text); background: rgba(242,244,255,.06)}
.nav-link.active{color:var(--text); background: rgba(255,106,61,.12); border:1px solid rgba(255,106,61,.22)}

.brand{display:inline-flex; align-items:center; gap:.55rem; text-decoration:none}
.brand-name{font-weight:780; letter-spacing:.02em; color:var(--text)}
.brand-badge{
  width:28px; height:28px; border-radius:10px;
  background:
    linear-gradient(135deg, rgba(255,106,61,.95), rgba(158,166,255,.45)),
    radial-gradient(12px 12px at 30% 30%, rgba(124,231,209,.85), transparent 55%);
  border: 1px solid rgba(242,244,255,.12);
  box-shadow: 0 14px 28px rgba(0,0,0,.35);
}

/* Buttons */
.btn-primary{
  border:0;
  color:#1b0b07;
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  box-shadow: 0 16px 34px rgba(255,106,61,.16);
}
.btn-primary:hover{filter: brightness(1.02)}
.btn-outline-light{
  border-color: rgba(242,244,255,.28);
  color: rgba(242,244,255,.92);
}
.btn-outline-light:hover{
  background: rgba(242,244,255,.08);
  border-color: rgba(242,244,255,.35);
  color: var(--text);
}

/* Hero */
.hero{position:relative; padding:92px 0 0; overflow:hidden}
.hero-bg{
  position:absolute; inset:-2px;
  background:
    radial-gradient(980px 560px at 22% 8%, rgba(124,231,209,.16), transparent 60%),
    radial-gradient(980px 620px at 84% 18%, rgba(158,166,255,.14), transparent 60%),
    radial-gradient(980px 760px at 52% 105%, rgba(255,106,61,.14), transparent 62%);
  pointer-events:none;
}
.hero-chips{display:flex; flex-wrap:wrap; gap:.55rem}
.chip{
  padding:.5rem .75rem;
  border-radius:999px;
  border:1px solid rgba(242,244,255,.12);
  background: rgba(16,26,52,.55);
  color: rgba(242,244,255,.86);
  font-size:.92rem;
}
.hero-micro{display:grid; gap:.5rem}
.micro-item{display:flex; align-items:center; gap:.6rem; color: rgba(242,244,255,.78); font-size:.95rem}
.micro-dot{
  width:10px; height:10px; border-radius:999px;
  background: linear-gradient(135deg, rgba(124,231,209,.95), rgba(255,106,61,.75));
  box-shadow: 0 10px 18px rgba(0,0,0,.25);
}

.hero-panel{
  position:relative;
  border-radius: var(--radius2);
  background: linear-gradient(180deg, rgba(16,26,52,.86), rgba(12,16,34,.86));
  border:1px solid rgba(242,244,255,.12);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.hero-panel::before{
  content:"";
  position:absolute; inset:-1px;
  background:
    radial-gradient(520px 260px at 18% 0%, rgba(255,106,61,.18), transparent 58%),
    radial-gradient(520px 300px at 96% 70%, rgba(124,231,209,.14), transparent 60%);
  pointer-events:none;
}
.hero-panel-top{
  position:relative;
  display:flex; justify-content:space-between; align-items:center;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(242,244,255,.10);
}
.hero-label{
  display:inline-flex;
  padding:.35rem .65rem;
  border-radius:999px;
  border:1px solid rgba(255,106,61,.22);
  background: rgba(255,106,61,.10);
  color: rgba(255,178,143,.92);
  font-size:.85rem;
}
.hero-steps{display:flex; gap:6px}
.hero-steps span{
  width:10px; height:10px; border-radius:4px;
  background: rgba(242,244,255,.14);
}
.hero-steps span:nth-child(2){background: rgba(124,231,209,.30)}
.hero-steps span:nth-child(3){background: rgba(158,166,255,.26)}
.hero-steps span:nth-child(4){background: rgba(255,106,61,.32)}
.hero-steps span:nth-child(5){background: rgba(242,244,255,.18)}
.hero-panel-body{position:relative; padding: 18px}

.ticklist{list-style:none; padding:0; margin:0; display:grid; gap:.65rem}
.ticklist li{position:relative; padding-left:28px; color: rgba(242,244,255,.84)}
.ticklist li::before{
  content:"";
  position:absolute; left:0; top:.18rem;
  width:18px; height:18px; border-radius:7px;
  background: linear-gradient(135deg, rgba(255,106,61,.90), rgba(124,231,209,.55));
  box-shadow: 0 10px 18px rgba(0,0,0,.25);
}
.divider-line{height:1px; background: rgba(242,244,255,.10); margin: 14px 0}

/* Decorative tiles */
.stack-tiles{display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; margin-top:12px; opacity:.92}
.tile{
  height: 54px;
  border-radius: 18px;
  border:1px solid rgba(242,244,255,.10);
  background: rgba(16,26,52,.55);
  box-shadow: var(--shadow2);
}
.tile.a{transform: rotate(-1.3deg)}
.tile.b{transform: rotate(1.1deg)}
.tile.c{transform: rotate(-.5deg)}

/* Dividers */
.shape-divider{position:relative; margin-top:56px; opacity:.96}
.shape-divider svg{width:100%; height:150px; display:block}
.shape-divider path{
  fill: rgba(12,16,34,.92);
  filter: drop-shadow(0 -8px 18px rgba(0,0,0,.20));
}
.shape-divider.alt path{fill: rgba(7,10,18,.92)}

/* Cards */
.feature-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}
@media (max-width: 992px){
  .feature-grid{grid-template-columns: 1fr}
}
.feature-card{
  position:relative;
  padding: 18px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(16,26,52,.70), rgba(12,16,34,.70));
  border: 1px solid rgba(242,244,255,.12);
  box-shadow: var(--shadow2);
  overflow:hidden;
}
.feature-card::after{
  content:"";
  position:absolute;
  right:-48px; top:-52px;
  width:160px; height:160px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,106,61,.18), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(158,166,255,.14), transparent 62%);
  filter: blur(2px);
}
.icon-slab{
  width:42px; height:42px; display:grid; place-items:center;
  border-radius: 16px;
  border: 1px solid rgba(242,244,255,.12);
  background: rgba(242,244,255,.06);
  color: rgba(255,178,143,.95);
  margin-bottom: 10px;
  position:relative;
}

/* Callout */
.callout{
  border-radius: 26px;
  border: 1px solid rgba(255,106,61,.18);
  background: linear-gradient(135deg, rgba(255,106,61,.10), rgba(124,231,209,.08));
  box-shadow: var(--shadow2);
}
.callout-inner{
  padding: 16px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}
.callout-title{font-weight:700}
.callout-text{font-size:.96rem}

/* Panels */
.panel, .form-card, .metric-card, .mini-panel{
  background: linear-gradient(180deg, rgba(16,26,52,.70), rgba(12,16,34,.70));
  border: 1px solid rgba(242,244,255,.12);
  border-radius: var(--radius2);
  box-shadow: var(--shadow2);
}
.panel{padding: 16px 18px}
.metric-card{padding: 16px 18px}
.metric-k{color: rgba(255,178,143,.88); font-size:.9rem; letter-spacing:.08em; text-transform:uppercase}
.metric-v{font-weight:700; margin-top:6px}
.metric-s{color:var(--muted); margin-top:6px}

.mini-panel{padding: 14px 16px}
.mini-k{color: rgba(255,178,143,.88); font-size:.86rem; letter-spacing:.08em; text-transform:uppercase}
.mini-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.mini-pill{
  padding:.35rem .6rem;
  border-radius: 999px;
  border:1px solid rgba(242,244,255,.12);
  background: rgba(242,244,255,.06);
  color: rgba(242,244,255,.86);
  font-size:.86rem;
}

/* Plans */
.plan-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}
@media (max-width: 992px){
  .plan-grid{grid-template-columns: 1fr}
}
.plan-card{
  position:relative;
  padding: 18px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(16,26,52,.70), rgba(12,16,34,.70));
  border: 1px solid rgba(242,244,255,.12);
  box-shadow: var(--shadow2);
  overflow:hidden;
}
.plan-card.featured{
  border-color: rgba(255,106,61,.26);
  box-shadow: 0 22px 64px rgba(0,0,0,.42);
}
.plan-card.featured::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(520px 260px at 34% 0%, rgba(255,106,61,.22), transparent 58%),
    radial-gradient(520px 320px at 96% 75%, rgba(124,231,209,.14), transparent 62%);
  pointer-events:none;
}
.plan-top{display:flex; justify-content:space-between; align-items:center; gap:12px}
.plan-name{font-weight:750}
.plan-tag{
  padding:.35rem .6rem;
  border-radius:999px;
  border:1px solid rgba(242,244,255,.12);
  background: rgba(242,244,255,.06);
  color: rgba(242,244,255,.82);
  font-size:.86rem;
}
.plan-price{font-size:2rem; font-weight:800; letter-spacing:-.02em; margin-top:12px}
.plan-list{padding-left: 1rem; margin:0; color: rgba(242,244,255,.84)}
.plan-list li{margin:.35rem 0}

/* Accordion */
.accordion-item{background: rgba(16,26,52,.55); border: 1px solid rgba(242,244,255,.10)}
.accordion-button{background: rgba(16,26,52,.55); color: rgba(242,244,255,.92)}
.accordion-button:focus{box-shadow:none}
.accordion-button:not(.collapsed){color: rgba(255,178,143,.95); background: rgba(255,106,61,.10)}
.accordion-body{background: rgba(12,16,34,.55)}

/* Quotes */
.quote-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}
@media (max-width: 992px){
  .quote-grid{grid-template-columns: 1fr}
}
.quote-card{
  padding: 18px;
  border-radius: 28px;
  border: 1px solid rgba(242,244,255,.12);
  background: linear-gradient(180deg, rgba(16,26,52,.60), rgba(12,16,34,.60));
  box-shadow: var(--shadow2);
}
.quote-card blockquote{font-size: 1.05rem; color: rgba(242,244,255,.92)}

/* Forms */
.form-card{padding: 18px}
.form-label{color: rgba(242,244,255,.86)}
.form-control, textarea{
  background: rgba(7,10,18,.55);
  border: 1px solid rgba(242,244,255,.14);
  color: rgba(242,244,255,.92);
  border-radius: 14px;
}
.form-control::placeholder{
  color: #fff;
}
.form-control:focus, textarea:focus{
  background: rgba(7,10,18,.65);
  border-color: rgba(255,106,61,.34);
  box-shadow: 0 0 0 .2rem rgba(255,106,61,.12);
  color: rgba(242,244,255,.94);
}
.form-check-input{
  background-color: rgba(7,10,18,.55);
  border: 1px solid rgba(242,244,255,.18);
}
.form-check-input:checked{
  background-color: rgba(255,106,61,.95);
  border-color: rgba(255,106,61,.95);
}
.form-status{min-height: 1.2em; color: rgba(255,178,143,.92)}

/* Page hero */
.page-hero{
  position:relative;
  padding: 70px 0 0;
  overflow:hidden;
}
.page-hero::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(820px 520px at 15% 0%, rgba(124,231,209,.12), transparent 60%),
    radial-gradient(760px 520px at 92% 12%, rgba(158,166,255,.10), transparent 60%);
  pointer-events:none;
}

/* Footer */
.footer{
  padding: 56px 0 26px;
  border-top: 1px solid rgba(242,244,255,.10);
  background: rgba(7,10,18,.72);
}
.footer-title{
  color: rgba(255,178,143,.88);
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.86rem;
  margin-bottom: 10px;
}
.footer-links{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.footer-links a{color: rgba(242,244,255,.80); text-decoration:none}
.footer-links a:hover{color: var(--text); text-decoration: underline}
.footer-contact a{color: rgba(242,244,255,.88)}
.social-row{display:flex; flex-wrap:wrap; gap:10px}
.social-btn{
  padding:.45rem .7rem;
  border-radius: 999px;
  border: 1px solid rgba(242,244,255,.14);
  background: rgba(242,244,255,.05);
  color: rgba(242,244,255,.86);
  text-decoration:none;
  font-size:.9rem;
}
.social-btn:hover{background: rgba(242,244,255,.08); color: var(--text)}
.footer-note{opacity:.85}
.footer-bottom{
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(242,244,255,.08);
}

/* Reveal */
.reveal{opacity:0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease}
.reveal.is-visible{opacity:1; transform: translateY(0)}
