/* assets/css/styles.css */
html, body{ height:100%; }
body{
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
}
a{ color: var(--primary); text-decoration:none; }
a:hover{ text-decoration:underline; }

.xl-microbar{ background: var(--grad-micro); border-bottom: 1px solid rgba(11,18,32,.08); }
.xl-dot{
  display:inline-block; width:10px; height:10px; border-radius:999px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow: 0 0 0 4px rgba(109,40,217,.12);
  margin-right: 8px; transform: translateY(1px);
}

.xl-nav{
  background: rgba(255,255,255,.74);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(11,18,32,.10);
  box-shadow: 0 10px 30px rgba(7,10,18,.06);
}
.xl-nav .nav-link{ color: rgba(11,18,32,.82); }
.xl-nav .nav-link:hover{ color: rgba(11,18,32,1); text-decoration:none; }
.xl-nav .nav-link.active{ color: rgba(11,18,32,1); font-weight: 600; }

.xl-logo{
  display:inline-flex; align-items:center; justify-content:center;
  width: 38px; height: 38px;
  border-radius: 14px;
  background: var(--grad-chip);
  border: 1px solid rgba(11,18,32,.10);
  box-shadow: var(--shadow-soft);
  color: var(--xl-graphite);
}

.xl-hero{
  position: relative;
  overflow: hidden;
  background: var(--grad-hero);
  border-bottom: 1px solid rgba(11,18,32,.08);
}
.xl-orb{
  position:absolute; width: 420px; height: 420px; border-radius: 999px;
  filter: blur(44px); opacity: .65; transform: translateZ(0);
}
.xl-orb-a{ left:-160px; top:-180px; background: rgba(109,40,217,.55); }
.xl-orb-b{ right:-170px; top:-150px; background: rgba(34,211,238,.55); }
.xl-orb-c{ left:-150px; bottom:-240px; background: rgba(163,230,53,.45); }
.xl-orb-d{ right:-220px; bottom:-260px; background: rgba(251,191,36,.45); }

.xl-kicker{
  display:inline-flex; align-items:center; gap:8px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: .85rem;
  color: rgba(11,18,32,.88);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(11,18,32,.10);
  box-shadow: 0 10px 22px rgba(7,10,18,.06);
}

.xl-section{ padding: 70px 0; }
.xl-section-alt{ padding: 70px 0; background: rgba(255,255,255,.62); border-top: 1px solid rgba(11,18,32,.06); border-bottom: 1px solid rgba(11,18,32,.06); }
@media (max-width: 991.98px){
  .xl-section, .xl-section-alt{ padding: 50px 0; }
}

.xl-card{
  border-radius: var(--radius-lg);
  background: var(--grad-card);
  border: 1px solid rgba(11,18,32,.10);
  box-shadow: var(--shadow-soft);
  padding: 18px 18px;
  position: relative;
  overflow:hidden;
}
.xl-card::after{
  content:"";
  position:absolute;
  right:-38px; top:-38px;
  width: 150px; height: 150px;
  border-radius: 40px;
  transform: rotate(16deg);
  background: linear-gradient(135deg, rgba(34,211,238,.16), rgba(109,40,217,.14));
  border: 1px solid rgba(11,18,32,.08);
}

.xl-icon{
  width: 46px; height: 46px;
  border-radius: 16px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(163,230,53,.16);
  border: 1px solid rgba(163,230,53,.28);
  font-weight: 900;
  color: rgba(11,18,32,.82);
  margin-bottom: 10px;
}

.xl-panel{
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(11,18,32,.10);
  box-shadow: var(--shadow-soft);
  padding: 18px 18px;
}

.xl-price{
  border-radius: calc(var(--radius-lg) + 4px);
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(11,18,32,.10);
  box-shadow: var(--shadow-soft);
  overflow:hidden;
}
.xl-price-head{
  padding: 18px 18px;
  background: linear-gradient(135deg, rgba(109,40,217,.12), rgba(34,211,238,.10));
  border-bottom: 1px solid rgba(11,18,32,.08);
}
.xl-price-body{ padding: 18px 18px; }
.xl-price-amount{ font-size: 1.35rem; font-weight: 800; margin-bottom: 12px; }

.xl-list{ list-style:none; padding-left:0; margin: 0 0 16px; }
.xl-list li{ position:relative; padding-left: 26px; margin-bottom: 8px; color: rgba(11,18,32,.78); }
.xl-list li::before{
  content:"";
  position:absolute; left:0; top:.55em;
  width: 14px; height: 14px; border-radius: 6px;
  background: rgba(34,211,238,.18);
  border: 1px solid rgba(34,211,238,.30);
  transform: translateY(-50%);
}

.xl-quote{
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(11,18,32,.10);
  box-shadow: var(--shadow-soft);
  padding: 18px 18px;
  position: relative;
}
.xl-quote-mark{
  position:absolute; top:-18px; left: 18px;
  font-size: 64px; line-height: 1;
  color: rgba(109,40,217,.28);
  font-weight: 900;
}

.xl-accordion .accordion-item{
  border-radius: var(--radius-lg);
  overflow:hidden;
  border: 1px solid rgba(11,18,32,.10);
  box-shadow: var(--shadow-soft);
  margin-bottom: 10px;
}
.xl-accordion .accordion-button{
  background: rgba(255,255,255,.92);
  color: rgba(11,18,32,.88);
}
.xl-accordion .accordion-button:focus{ box-shadow: 0 0 0 .25rem rgba(34,211,238,.18); }
.xl-accordion .accordion-body{ background: rgba(255,255,255,.92); }

.xl-cta{
  border-radius: calc(var(--radius-lg) + 6px);
  background: var(--grad-cta);
  border: 1px solid rgba(11,18,32,.10);
  box-shadow: var(--shadow);
  padding: 22px 22px;
}

.xl-form-status{ min-height: 1.2rem; color: rgba(11,18,32,.80); }
.xl-note{
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.90);
  border: 1px dashed rgba(11,18,32,.18);
  padding: 14px 14px;
}

.xl-footer{
  padding: 48px 0;
  background: rgba(255,255,255,.82);
  border-top: 1px solid rgba(11,18,32,.10);
}
.xl-footer-title{
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(11,18,32,.66);
  margin-bottom: 10px;
}
.xl-footer-links a{
  display:inline-block;
  padding: 4px 0;
  color: rgba(11,18,32,.78);
}
.xl-footer-links a:hover{ color: rgba(11,18,32,1); text-decoration:none; }

.btn-primary{
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 12px 26px rgba(109,40,217,.18);
}
.btn-primary:hover{ background: var(--primary-2); border-color: var(--primary-2); }
.btn-outline-secondary{
  border-color: rgba(11,18,32,.22);
  color: rgba(11,18,32,.80);
}
.btn-outline-secondary:hover{
  background: rgba(11,18,32,.06);
  border-color: rgba(11,18,32,.22);
  color: rgba(11,18,32,1);
}