/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body.page{
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

/* Links */
a{color: var(--text); text-decoration-color: rgba(255,255,255,.28)}
a:hover{color: var(--text); text-decoration-color: rgba(255,255,255,.58)}

/* Helpers */
.muted{color: var(--muted)}
.kicker{
  display:inline-flex;
  gap:.5rem;
  align-items:center;
  padding:.35rem .7rem;
  border:1px solid var(--stroke);
  border-radius:999px;
  color: var(--muted);
  background: rgba(255,255,255,.04);
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.78rem;
}
.divider-soft{height:1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent); margin: 14px 0;}
.badge-soft{
  background: rgba(255,110,168,.14);
  border: 1px solid rgba(255,110,168,.25);
  color: var(--text);
  border-radius: 999px;
  padding: .28rem .6rem;
  font-weight: 600;
}
.pill, .pill-sm{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  border-radius:999px;
}
.pill{padding:.35rem .7rem; font-size:.82rem}
.pill-sm{padding:.25rem .55rem; font-size:.75rem}

/* Skip link */
.skip-link{
  position:absolute; left:-999px; top:10px;
  padding:.6rem .9rem;
  background: var(--card);
  border:1px solid var(--stroke);
  border-radius: 12px;
  z-index: 9999;
}
.skip-link:focus{left:10px}

/* Nav */
.nav-glass{
  background: rgba(15,26,46,.68);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.brand{
  display:flex; align-items:center; gap:.6rem;
  text-decoration:none;
}
.brand-badge{
  width: 14px; height: 14px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow: 0 0 0 5px rgba(255,255,255,.06);
}
.brand-name{font-weight:800; letter-spacing:.02em; color: var(--text);}
.brand-tag{font-size:.85rem; margin-left:.2rem}
.navbar .nav-link{color: rgba(238,242,255,.82)}
.navbar .nav-link:hover{color: rgba(238,242,255,.98)}
.navbar .nav-link.active{color: var(--text)}
.navbar .btn-primary{
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  border: none;
  box-shadow: 0 10px 28px rgba(255,110,168,.22);
}
.navbar-toggler{
  background-color: #fff;
}
.btn-outline-light{
  border-color: rgba(255,255,255,.22);
  color: rgba(238,242,255,.92);
}
.btn-outline-light:hover{border-color: rgba(255,255,255,.45)}

/* Sections */
.section{padding: 64px 0}
.surface{background: var(--surface); position:relative}
.surface-2{background: var(--surface-2); position:relative}

/* Hero */
.hero{
  position:relative;
  padding: 80px 0 30px;
  background: var(--surface);
  overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0;
  background: var(--grad-hero);
  pointer-events:none;
}
.gridlines{
  position:absolute; inset:0;
  opacity:.22;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(560px 260px at 20% 20%, black, transparent 70%);
}
.blob{
  position:absolute; border-radius: 999px;
  filter: blur(34px);
  opacity:.9;
}
.blob.b1{
  width: 340px; height: 340px;
  left: -80px; top: 60px;
  background: rgba(255,110,168,.18);
}
.blob.b2{
  width: 420px; height: 420px;
  right: -130px; top: 10px;
  background: rgba(95,225,181,.14);
}
.hero-card{
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
  padding: 18px;
}
.hero-card-top{display:flex; justify-content:space-between; align-items:center}
.prompt{
  margin-top: 14px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
}
.prompt-title{font-weight: 750; margin-bottom: .4rem}
.hero-card-foot{opacity:.82}

/* Page hero */
.page-hero{
  position:relative;
  padding: 72px 0 24px;
  background: var(--surface);
  overflow:hidden;
}
.page-hero::before{
  content:"";
  position:absolute; inset:0;
  background: var(--grad-hero);
  opacity:.75;
  pointer-events:none;
}
.page-hero .container{position:relative}

/* Shape divider */
.shape-divider{
  margin-top: 36px;
}
.shape-divider svg{width:100%; height: 90px}
.shape-divider path{fill: var(--surface-2); opacity: .95}
.shape-divider.alt path{fill: var(--surface); opacity: .95}

/* Panels and cards */
.panel{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-soft);
}
.cards-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}
@media (max-width: 991px){
  .cards-grid{grid-template-columns: 1fr; }
}
.card-neo{
  padding: 16px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.10));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow-soft);
  position:relative;
  overflow:hidden;
}
.card-neo::after{
  content:"";
  position:absolute; right:-60px; bottom:-60px;
  width: 160px; height: 160px;
  background: radial-gradient(circle at 30% 30%, rgba(95,184,255,.18), transparent 60%);
  border-radius: 999px;
  filter: blur(0px);
}
.card-neo-top{display:flex; justify-content:space-between; align-items:center}

/* Featured posts */
.post-card{
  padding: 16px;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow-soft);
}
.post-card-head{display:flex; justify-content:space-between; align-items:center}
.tag{
  padding:.28rem .6rem;
  border-radius: 999px;
  background: rgba(95,225,181,.12);
  border: 1px solid rgba(95,225,181,.22);
  color: var(--text);
  font-weight: 650;
  font-size: .78rem;
}
.post-card-foot{display:flex; gap:.5rem; align-items:center; flex-wrap:wrap}

/* Tiers */
.tier-card{
  border-radius: var(--radius-xl);
  padding: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.14));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow-soft);
  position:relative;
  overflow:hidden;
}
.tier-card .tier-head{display:flex; justify-content:space-between; align-items:baseline}
.tier-name{font-weight: 850; letter-spacing:.01em}
.tier-list{margin: 12px 0 16px; padding-left: 18px; color: var(--muted)}
.tier-card.featured{
  border-color: rgba(255,110,168,.28);
}
.tier-card.featured::before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(420px 220px at 20% 10%, rgba(255,110,168,.24), transparent 55%),
              radial-gradient(380px 220px at 80% 90%, rgba(95,225,181,.18), transparent 58%);
  pointer-events:none;
  opacity:.95;
}
.tier-card.featured > *{position:relative}

/* Quotes */
.quote-card{
  padding: 18px;
  border-radius: var(--radius-xl);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow-soft);
  position:relative;
}
.quote-mark{
  position:absolute;
  top: 10px; left: 14px;
  font-size: 2.2rem;
  opacity:.25;
}
.quote-foot{opacity:.82}

/* Accordion */
.accordion-neo .accordion-item{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-lg);
  overflow:hidden;
  margin-bottom: 10px;
}
.accordion-neo .accordion-button{
  background: transparent;
  color: var(--text);
  font-weight: 650;
}
.accordion-neo .accordion-button:focus{box-shadow:none}
.accordion-neo .accordion-button::after{filter: invert(1) opacity(.8)}
.accordion-neo .accordion-body{background: rgba(0,0,0,.10)}

/* CTA */
.cta{
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(135deg, rgba(255,110,168,.14), rgba(95,184,255,.10), rgba(95,225,181,.10));
  box-shadow: var(--shadow);
  padding: 22px;
  position:relative;
  overflow:hidden;
}
.cta-bg{
  position:absolute; inset:-2px;
  background: radial-gradient(520px 240px at 15% 10%, rgba(246,211,101,.14), transparent 60%),
              radial-gradient(560px 280px at 85% 90%, rgba(255,110,168,.16), transparent 62%);
  opacity:.9;
  pointer-events:none;
}
.cta > *{position:relative}

/* Contact strip */
.contact-strip{
  border-radius: var(--radius-xl);
  padding: 18px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow-soft);
}

/* Icons */
.icon-chip{
  width: 40px; height: 40px;
  border-radius: 16px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,110,168,.14);
  border: 1px solid rgba(255,110,168,.22);
  font-weight: 850;
}

/* Mini stats */
.mini-stats{
  display:flex; flex-wrap:wrap; gap:10px;
}
.mini-stat{
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
}
.mini-stat-title{font-size:.78rem; color: var(--muted-2)}
.mini-stat-value{font-weight: 700}

/* Timeline */
.timeline{display:flex; flex-direction:column; gap:12px}
.timeline-item{
  display:flex; gap:12px; align-items:flex-start;
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
}
.timeline .dot{
  margin-top: 6px;
  width: 10px; height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow: 0 0 0 6px rgba(255,255,255,.06);
}

/* Forms */
.form-control, .form-select{
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--text);
}
.form-control:focus{
  background: rgba(0,0,0,.18);
  color: var(--text);
  border-color: rgba(255,110,168,.45);
  box-shadow: 0 0 0 .2rem rgba(255,110,168,.10);
}
.form-label{color: var(--muted)}
.form-check-input{
  background-color: rgba(0,0,0,.18);
  border-color: rgba(255,255,255,.22);
}
.form-check-input:checked{
  background-color: var(--primary);
  border-color: var(--primary);
}
.form-feedback{color: rgba(95,225,181,.95)}
.was-validated .form-control:invalid{border-color: rgba(255,110,168,.55)}

/* Footer */
.footer{
  padding: 46px 0 22px;
  background: rgba(10,16,28,.95);
  border-top: 1px solid rgba(255,255,255,.10);
}
.brand-footer{opacity:.98}
.footer-title{font-weight: 750; margin-bottom: 10px}
.footer-links{list-style:none; padding-left:0; margin:0}
.footer-links li{margin-bottom: 8px}
.footer-links a{color: rgba(238,242,255,.82); text-decoration:none}
.footer-links a:hover{color: rgba(238,242,255,.98); text-decoration:underline}
.social-row{display:flex; flex-wrap:wrap; gap:10px}
.social-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: .5rem .75rem;
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  text-decoration:none;
  color: rgba(238,242,255,.9);
}
.social-btn:hover{border-color: rgba(255,255,255,.26)}
.footer-note{opacity:.86}
.footer-bottom{
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* Reveal */
.reveal{opacity:0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease}
.reveal.is-in{opacity:1; transform: translateY(0)}

/* Thank you */
.thanks-card{
  max-width: 820px;
  margin: 0 auto;
  padding: 26px;
  border-radius: var(--radius-xl);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
}
.thanks-badge{
  width: 54px; height: 54px;
  border-radius: 20px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(95,225,181,.14);
  border: 1px solid rgba(95,225,181,.26);
  font-weight: 900;
}
