/* Base */
html,body{height:100%}
body{
  background: radial-gradient(1200px 900px at 15% 10%, rgba(215,181,109,.12), transparent 55%),
              radial-gradient(1000px 800px at 85% 30%, rgba(60,199,179,.10), transparent 55%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

a{color:inherit}
.text-muted{color:var(--muted)!important}
.link-soft{color:rgba(243,240,234,.82); text-decoration:none; border-bottom:1px dashed rgba(243,240,234,.22)}
.link-soft:hover{color:var(--text); border-bottom-color:rgba(243,240,234,.45)}

.skip-link{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:1rem; top:1rem; width:auto; height:auto; padding:.6rem .8rem;
  background:var(--panel2); border:1px solid var(--line); border-radius:12px; z-index:9999;
}

/* Navbar */
.nav-glass{
  background: linear-gradient(180deg, rgba(10,18,34,.72), rgba(10,18,34,.42));
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.navbar-brand .brand-sub{color:rgba(243,240,234,.62); font-size:.86rem}
.brand-mark{
  width:26px; height:26px; border-radius:11px;
  background: radial-gradient(12px 12px at 30% 30%, rgba(255,255,255,.35), transparent 60%),
              linear-gradient(135deg, rgba(215,181,109,.95), rgba(60,199,179,.72));
  box-shadow: 0 10px 20px rgba(0,0,0,.25);
  position:relative;
  overflow:hidden;
}
.brand-mark::after{
  content:"";
  position:absolute; inset:-2px;
  background: conic-gradient(from 180deg, rgba(255,255,255,.18), transparent 40%, rgba(255,255,255,.12));
  mix-blend-mode: overlay;
  opacity:.7;
}

.btn-accent{
  background: linear-gradient(135deg, rgba(215,181,109,.96), rgba(231,166,176,.86));
  border: 1px solid rgba(255,255,255,.08);
  color:#141219;
  box-shadow: 0 12px 26px rgba(215,181,109,.18);
}
.btn-accent:hover{filter: brightness(1.02)}
.btn-outline-soft{
  border:1px solid rgba(243,240,234,.22);
  color:rgba(243,240,234,.9);
  background: rgba(255,255,255,.02);
}
.btn-outline-soft:hover{
  background: rgba(255,255,255,.05);
  border-color: rgba(243,240,234,.34);
}
.btn:focus{box-shadow: var(--ring)}

/* Sections */
.hero{position:relative}
.py-lg-6{padding-top:5.2rem!important; padding-bottom:5.2rem!important}

.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.35rem .65rem; border:1px solid rgba(255,255,255,.12);
  border-radius:999px; background: rgba(255,255,255,.03);
  color: rgba(243,240,234,.78); font-size:.9rem;
}
.eyebrow .dot{
  width:8px; height:8px; border-radius:99px;
  background: linear-gradient(135deg, var(--gold), var(--jade));
  box-shadow: 0 0 0 .2rem rgba(60,199,179,.12);
}

.section-wave{
  position:absolute; left:0; right:0; bottom:-1px; height:140px; pointer-events:none;
  opacity:.9;
}
.section-wave svg{width:100%; height:100%}
.section-wave path{fill: rgba(255,255,255,.03)}
.small-wave{height:110px; opacity:.85}

.section-blur{
  position:absolute; inset:-120px -60px auto -60px; height:320px;
  background: radial-gradient(500px 280px at 25% 45%, rgba(215,181,109,.18), transparent 60%),
              radial-gradient(520px 300px at 70% 50%, rgba(60,199,179,.14), transparent 62%);
  filter: blur(6px);
  pointer-events:none;
}

/* Decorative blobs */
.hero-blobs, .inner-blobs{
  position:absolute; inset:0; pointer-events:none;
}
.blob{
  position:absolute; width:520px; height:520px; border-radius: 48% 52% 56% 44% / 52% 48% 54% 46%;
  filter: blur(26px);
  opacity:.65;
}
.b1{left:-210px; top:-140px; background: radial-gradient(circle at 30% 30%, rgba(215,181,109,.35), transparent 60%)}
.b2{right:-220px; top:-120px; background: radial-gradient(circle at 40% 40%, rgba(60,199,179,.28), transparent 62%)}
.b3{right:18%; bottom:-260px; width:560px; height:560px; background: radial-gradient(circle at 35% 35%, rgba(231,166,176,.22), transparent 62%)}
.b4{left:-230px; top:-180px; background: radial-gradient(circle at 35% 35%, rgba(231,166,176,.22), transparent 62%)}
.b5{right:-240px; bottom:-280px; width:620px; height:620px; background: radial-gradient(circle at 40% 40%, rgba(215,181,109,.22), transparent 64%)}

.grid-dust{
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity:.35;
  mask-image: radial-gradient(600px 420px at 35% 30%, #000 35%, transparent 70%);
}

/* Cards */
.hero-card, .side-card, .panel-card, .pattern-card, .footer-card, .cta-banner{
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.035));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.side-card{border-radius: var(--radius-md); box-shadow: var(--shadow2)}
.panel-card{border-radius: var(--radius-lg)}
.pattern-card{border-radius: var(--radius-md)}
.footer-card{border-radius: var(--radius-md); box-shadow: none}
.cta-banner{
  border-radius: calc(var(--radius-lg) + 6px);
  background: linear-gradient(135deg, rgba(215,181,109,.10), rgba(60,199,179,.06));
}

.cut-card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.10);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow2);
  position:relative;
  overflow:hidden;
}
.cut-card::after{
  content:"";
  position:absolute; right:-42px; top:-42px;
  width:120px; height:120px; border-radius: 38px;
  background: radial-gradient(circle at 30% 30%, rgba(60,199,179,.22), transparent 60%);
  transform: rotate(16deg);
  opacity:.85;
  pointer-events:none;
}

.quote-card{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.10);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow2);
}

.divider-soft{height:1px; background: rgba(255,255,255,.10)}

/* Hero bits */
.img-surface{
  height:210px;
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(240px 200px at 25% 35%, rgba(215,181,109,.28), transparent 62%),
    radial-gradient(260px 210px at 75% 55%, rgba(60,199,179,.18), transparent 64%),
    linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}

.frame-top .badge-soft, .badge-soft{
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  color: rgba(243,240,234,.78);
}
.badge-accent{
  background: rgba(215,181,109,.16);
  border:1px solid rgba(215,181,109,.34);
  color: rgba(243,240,234,.92);
}

.hero-meta{display:flex; flex-wrap:wrap; gap:.6rem}
.meta-chip{
  padding:.65rem .8rem;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  min-width: 180px;
}
.text-soft{color: rgba(243,240,234,.68)}

.icon-badge{
  width:42px; height:42px;
  display:grid; place-items:center;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  color: rgba(243,240,234,.92);
}

/* stats */
.stat{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: 18px;
  padding:.9rem .9rem;
}
.stat-kicker{font-size:.78rem; color: rgba(243,240,234,.68)}
.stat-value{font-weight:700; margin-top:.15rem}
.stat-note{font-size:.78rem; color: rgba(243,240,234,.62); margin-top:.15rem}

.card-icon{
  width:44px; height:44px; border-radius: 18px;
  display:grid; place-items:center;
  background: radial-gradient(18px 18px at 30% 30%, rgba(215,181,109,.25), transparent 60%),
              linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);
  color: rgba(243,240,234,.92);
}

/* tiers */
.tier-card{
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow2);
  position:relative;
  overflow:hidden;
}
.tier-card::before{
  content:"";
  position:absolute; inset:-2px -2px auto -2px; height:92px;
  background: radial-gradient(220px 120px at 18% 40%, rgba(215,181,109,.22), transparent 60%),
              radial-gradient(240px 140px at 78% 60%, rgba(60,199,179,.18), transparent 62%);
  opacity:.9;
}
.tier-card > *{position:relative}
.tier-feature{
  border-color: rgba(215,181,109,.28);
  box-shadow: 0 22px 70px rgba(215,181,109,.12), var(--shadow2);
}
.tier-list{padding-left:1.1rem; margin-top:1rem}
.tier-list li{margin:.4rem 0}
.tier-top{margin-top:.2rem}

/* mini */
.mini{
  padding:.8rem .9rem;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: 16px;
}
.mini-title{font-weight:700}
.mini-text{font-size:.85rem; color: rgba(243,240,234,.66); margin-top:.1rem}

/* Accordion */
.accordion-soft .accordion-item{
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  overflow:hidden;
  margin-bottom:.8rem;
}
.accordion-soft .accordion-button{
  background: transparent;
  color: var(--text);
  box-shadow:none;
}
.accordion-soft .accordion-button:not(.collapsed){
  background: rgba(255,255,255,.03);
}
.accordion-soft .accordion-button:focus{box-shadow: var(--ring)}
.accordion-soft .accordion-body{background: rgba(255,255,255,.02)}

/* Forms */
.form-control-soft{
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.12);
  color: var(--text);
  border-radius: 14px;
}
.form-control-soft:focus{
  background: rgba(255,255,255,.04);
  border-color: rgba(215,181,109,.35);
  box-shadow: var(--ring);
  color: var(--text);
}
.form-label{color: rgba(243,240,234,.78)}
.form-check-soft .form-check-input{
  background-color: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.16);
}
.form-check-soft .form-check-input:focus{box-shadow: var(--ring)}
.form-check-soft .form-check-input:checked{
  background-color: rgba(60,199,179,.55);
  border-color: rgba(60,199,179,.65);
}
.invalid-feedback{color: rgba(255,130,130,.92)}
.alert-soft{
  background: rgba(60,199,179,.12);
  border:1px solid rgba(60,199,179,.25);
  color: rgba(243,240,234,.92);
  border-radius: 16px;
}

/* Footer */
.site-footer{
  border-top:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(10,18,34,.18), rgba(10,18,34,.40));
}
.footer-links li{margin:.35rem 0}
.footer-links a{color: rgba(243,240,234,.76); text-decoration:none}
.footer-links a:hover{color: var(--text)}
.social-pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.4rem .65rem;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  color: rgba(243,240,234,.78);
  text-decoration:none;
}
.social-pill:hover{background: rgba(255,255,255,.05); color: var(--text)}

/* Reveal */
[data-reveal]{opacity:0; transform: translateY(10px); transition: opacity .55s ease, transform .55s ease}
.revealed{opacity:1!important; transform:none!important}
