/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: var(--bg-0);
  color: var(--text);
}

a{color:inherit}
img{max-width:100%; height:auto}
::selection{background: rgba(255,77,141,.28)}

/* Helpers */
.text-muted{color: var(--muted) !important}
.text-soft{color: var(--soft) !important}
.link-soft{color: var(--text); text-decoration: none; border-bottom: 1px dashed rgba(255,255,255,.25)}
.link-soft:hover{opacity:.92}
.divider-soft{height:1px; background: var(--line)}
.skip-link{
  position:absolute; left:-9999px; top: 12px;
  background: var(--surface); color: var(--text);
  padding: .6rem .9rem; border-radius: 999px; z-index: 9999;
  box-shadow: var(--shadow-soft);
}
.skip-link:focus{left: 12px; outline: none; box-shadow: var(--focus)}

/* Header / Nav */
.site-header{backdrop-filter: blur(10px)}
.nav-glass{
  background: rgba(10,14,28,.62);
  border-bottom: 1px solid var(--line);
}
@media (prefers-color-scheme: light){
  .nav-glass{background: rgba(255,255,255,.72)}
}
.navbar-brand{
  color: var(--text) !important;
}
.navbar-brand .brand-sub{
  font-size:.78rem;
  color: var(--muted);
  margin-left:.35rem;
}
.brand-mark{
  width: 22px; height: 22px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), transparent 40%),
    conic-gradient(from 210deg, var(--accent), var(--accent-3), var(--accent-2), var(--accent));
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
}
.nav-link{
  color: var(--text) !important;
  opacity:.86;
  border-radius: 999px;
  padding: .55rem .85rem !important;
}
.nav-link:hover{opacity:1; background: rgba(255,255,255,.06)}
.nav-link.active{opacity:1; background: rgba(255,255,255,.09)}

@media (prefers-color-scheme: light){
  .navbar-dark .navbar-brand,
  .navbar-dark .navbar-brand:hover,
  .navbar-dark .navbar-brand:focus,
  .navbar-dark .navbar-nav .nav-link,
  .navbar-dark .navbar-nav .nav-link:hover,
  .navbar-dark .navbar-nav .nav-link:focus{
    color: var(--text);
  }
  .navbar-dark .navbar-toggler{
    color: var(--text);
    border-color: rgba(10,15,31,.2);
  }
  .navbar-dark .navbar-toggler-icon{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(10,15,31,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }
}

/* Buttons */
.btn-accent{
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-bg: #ff2f7e;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-color: #0B1020;
  --bs-btn-hover-color: #0B1020;
  box-shadow: 0 14px 32px rgba(255,77,141,.18);
  border-radius: 999px;
}
.btn-outline-soft{
  --bs-btn-color: var(--text);
  --bs-btn-border-color: rgba(255,255,255,.22);
  --bs-btn-hover-bg: rgba(255,255,255,.08);
  --bs-btn-hover-border-color: rgba(255,255,255,.26);
  --bs-btn-hover-color: var(--text);
  border-radius: 999px;
}

/* Hero */
.hero{
  background: var(--grad-hero);
  position: relative;
  overflow: hidden;
}
.hero .hero-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity:.35;
  mask-image: radial-gradient(circle at 30% 25%, black 35%, transparent 70%);
}
.hero .hero-noise{
  position:absolute; inset:-2px;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,77,141,.10), transparent 40%),
    radial-gradient(circle at 82% 28%, rgba(42,232,201,.09), transparent 42%),
    radial-gradient(circle at 75% 88%, rgba(246,183,107,.08), transparent 44%);
  filter: blur(14px);
  opacity:.9;
}

.tagline-pill{
  display:inline-flex; align-items:center; gap:.55rem;
  padding: .35rem .75rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.05);
}
.tagline-pill .dot{
  width: 9px; height: 9px; border-radius: 99px;
  background: linear-gradient(180deg, var(--accent), var(--accent-3));
  box-shadow: 0 0 0 3px rgba(255,77,141,.12);
}

.hero .hero-card{
  border-radius: var(--radius-lg);
  background: var(--grad-card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  overflow:hidden;
  position: relative;
}
.hero .hero-card:before{
  content:"";
  position:absolute; inset: -1px;
  background:
    radial-gradient(420px 220px at 22% 18%, rgba(255,77,141,.22), transparent 60%),
    radial-gradient(420px 220px at 86% 28%, rgba(42,232,201,.14), transparent 62%),
    radial-gradient(420px 220px at 70% 88%, rgba(246,183,107,.12), transparent 62%);
  pointer-events:none;
}
.hero .hero-card > *{position:relative}

/* Section wave */
.section-wave{
  position:absolute; left:0; right:0; bottom:-1px;
  height: 120px;
  pointer-events:none;
}
.section-wave svg{width:100%; height:100%}
.section-wave path{fill: var(--bg-0)}
.small-wave{height: 90px}

/* Cards */
.kite-card{
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow:hidden;
}
.kite-card:after{
  content:"";
  position:absolute; right:-60px; top:-60px;
  width: 160px; height:160px;
  background: radial-gradient(circle at 30% 30%, rgba(255,77,141,.30), transparent 60%);
  filter: blur(12px);
  opacity:.9;
}
.kite-card .kite-edge{
  position:absolute; left: 16px; top: 16px;
  width: 52px; height: 4px; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--accent-3));
  opacity:.9;
}

.pattern-card{
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow:hidden;
}
.pattern-card:before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(600px 280px at 18% 10%, rgba(255,77,141,.10), transparent 62%),
    radial-gradient(520px 260px at 86% 25%, rgba(42,232,201,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), transparent);
  pointer-events:none;
}
.pattern-card > *{position:relative}

/* Feature list */
.feature-row{
  display:flex; gap: .9rem;
  padding: .95rem 1rem;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
}
.feature-ico{
  width: 40px; height: 40px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), transparent 55%),
    linear-gradient(180deg, rgba(255,77,141,.22), rgba(42,232,201,.12));
  border: 1px solid rgba(255,255,255,.14);
  flex: 0 0 auto;
}
.feature-ico svg{width: 18px; height: 18px; opacity:.95}

/* Pricing */
.price-chip{
  display:inline-flex; align-items:center; gap:.5rem;
  padding: .35rem .7rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
}
.price-chip .spark{
  width: 10px; height: 10px; border-radius: 99px;
  background: var(--accent-2);
  box-shadow: 0 0 0 3px rgba(246,183,107,.12);
}
.plan{
  height:100%;
}
.plan .badge-top{
  display:inline-flex; align-items:center;
  border-radius: 999px;
  padding: .32rem .65rem;
  font-size:.78rem;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: var(--muted);
}
.plan .plan-title{letter-spacing:.2px}
.plan ul{margin:0; padding-left: 1.1rem}
.plan ul li{margin: .4rem 0; color: var(--muted)}
.plan .plan-cta{margin-top: 1.1rem}

/* FAQ */
.accordion-item{
  background: rgba(255,255,255,.02);
  border: 1px solid var(--line);
  border-radius: 16px !important;
  overflow:hidden;
}
.accordion-button{
  background: transparent !important;
  color: var(--text) !important;
  box-shadow:none !important;
}
.accordion-button:focus{box-shadow: var(--focus) !important}
.accordion-body{color: var(--muted)}

/* Forms */
.form-control, .form-select{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.16);
  color: var(--text);
  border-radius: 14px;
}
.form-control::placeholder{color: rgba(174,187,222,.75)}
.form-control:focus, .form-select:focus{
  border-color: rgba(255,77,141,.35);
  box-shadow: var(--focus);
  background: rgba(255,255,255,.04);
  color: var(--text);
}
.form-check-input{
  background-color: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.20);
}
.form-check-input:focus{box-shadow: var(--focus)}
.form-check-input:checked{
  background-color: var(--accent);
  border-color: var(--accent);
}

.inline-alert{
  border-radius: 16px;
  border: 1px solid var(--line);
  padding: .9rem 1rem;
  background: rgba(42,232,201,.08);
  color: var(--text);
}

/* Inner hero */
.inner-hero{
  background: var(--grad-hero);
  position:relative;
}
.inner-blobs .blob{
  position:absolute; border-radius: 999px;
  filter: blur(18px);
  opacity:.9;
}
.inner-blobs .b1{width: 260px; height:260px; left:-70px; top:-70px; background: rgba(255,77,141,.22)}
.inner-blobs .b2{width: 240px; height:240px; right:-70px; top:40px; background: rgba(42,232,201,.16)}
.inner-blobs .b3{width: 280px; height:280px; right:8%; bottom:-120px; background: rgba(246,183,107,.14)}

.side-card{
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}

.mini-card{
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
}

/* Footer */
.site-footer{
  border-top: 1px solid var(--line);
  background:
    radial-gradient(900px 420px at 22% 10%, rgba(255,77,141,.08), transparent 60%),
    radial-gradient(900px 420px at 85% 10%, rgba(42,232,201,.06), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.02), transparent);
}
.footer-card{
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
}
.footer-links a{
  display:inline-block;
  padding:.3rem 0;
  color: var(--muted);
  text-decoration: none;
}
.footer-links a:hover{color: var(--text)}
.social-pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.42rem .72rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--text);
  text-decoration:none;
  font-size: .92rem;
}
.social-pill:hover{background: rgba(255,255,255,.06)}

/* Reveal on scroll */
[data-reveal]{opacity:0; transform: translateY(10px); transition: opacity .7s ease, transform .7s ease}
[data-reveal].is-visible{opacity:1; transform: translateY(0)}