/* assets/css/styles.css */
html,body{height:100%;}
body{
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background: var(--xo-bg);
  color: var(--xo-text);
}

/* Ribbon */
.xo-ribbon{
  background: linear-gradient(90deg, rgba(255,255,255,.70), rgba(255,255,255,.46));
  border-bottom: 1px solid var(--xo-border);
  backdrop-filter: blur(10px);
}
@media (prefers-color-scheme: dark){
  .xo-ribbon{ background: rgba(14,22,40,.78); }
}
.xo-ribbon-link{ color: var(--xo-muted); }
.xo-ribbon-link:hover{ color: var(--xo-text); }
.xo-dot{
  width:10px;height:10px;border-radius:999px;
  background: radial-gradient(circle at 30% 30%, var(--xo-lime), var(--xo-indigo));
  box-shadow: 0 0 0 5px rgba(34,193,220,.12);
}

/* Nav */
.xo-nav{
  background: rgba(255,255,255,.74);
  border-bottom: 1px solid var(--xo-border);
  backdrop-filter: blur(12px);
}
@media (prefers-color-scheme: dark){
  .xo-nav{ background: rgba(14,22,40,.82); }
}
.xo-mark{
  width:34px;height:34px;border-radius:14px;
  display:grid;place-items:center;
  background: var(--xo-grad-mark);
  border: 1px solid var(--xo-border);
  box-shadow: var(--xo-shadow-soft);
  color: var(--xo-ink);
}
@media (prefers-color-scheme: dark){ .xo-mark{ color:#EAF0FF; } }

.navbar .nav-link{ color: var(--xo-muted); }
.navbar .nav-link:hover{ color: var(--xo-text); }
.navbar .nav-link.active{ color: var(--xo-text); font-weight:600; }

.xo-pill{ border-radius: 999px !important; }
.btn-primary{
  background: linear-gradient(135deg, var(--xo-indigo), #1B34FF);
  border:0;
  box-shadow: 0 12px 26px rgba(45,70,255,.20);
}
.btn-primary:hover{ background: linear-gradient(135deg, #2640FF, #1028EA); }
.btn-outline-primary{
  border-color: rgba(45,70,255,.45);
  color: var(--xo-link);
}
.btn-outline-primary:hover{
  background: rgba(45,70,255,.10);
  border-color: rgba(45,70,255,.55);
  color: var(--xo-link-hover);
}

/* Hero */
.xo-hero{
  position:relative;
  overflow:hidden;
  background: var(--xo-grad-hero);
}
.xo-kicker{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.xo-blob{
  position:absolute; border-radius:999px; filter: blur(18px);
  opacity:.95; pointer-events:none;
}
.xo-blob-a{ width:260px; height:260px; left:-90px; top:40px; background: rgba(45,70,255,.20); }
.xo-blob-b{ width:300px; height:300px; right:-110px; top:80px; background: rgba(34,193,220,.18); }
.xo-blob-c{ width:230px; height:230px; right:10%; bottom:-100px; background: rgba(255,209,102,.16); }

.xo-wave{
  position:absolute; left:0; right:0; bottom:-1px;
  height:70px; width:100%;
  fill: var(--xo-bg);
  opacity:.95;
}

.xo-proof{ display:flex; flex-wrap:wrap; gap:10px; }
.xo-chip{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:999px;
  background: rgba(255,255,255,.68);
  border: 1px solid var(--xo-border);
  color: var(--xo-muted);
}
@media (prefers-color-scheme: dark){ .xo-chip{ background: rgba(14,22,40,.72); } }
.xo-chip-dot{
  width:10px;height:10px;border-radius:999px;
  background: radial-gradient(circle at 35% 35%, var(--xo-cyan), var(--xo-indigo));
  box-shadow: 0 0 0 5px rgba(183,243,90,.10);
}

/* Hero card */
.xo-hero-card{
  background: rgba(255,255,255,.78);
  border: 1px solid var(--xo-border);
  border-radius: var(--xo-radius-lg);
  box-shadow: var(--xo-shadow);
  overflow:hidden;
}
@media (prefers-color-scheme: dark){ .xo-hero-card{ background: rgba(14,22,40,.82); } }
.xo-hero-top{ padding:18px 18px 0; }
.xo-hero-body{ padding: 12px 18px 0; }
.xo-hero-foot{ padding: 0 18px 18px; }

.xo-tag{
  display:inline-flex; align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(34,193,220,.10);
  border: 1px solid rgba(34,193,220,.24);
  color: rgba(11,18,32,.78);
  font-size: .78rem;
  font-weight: 600;
}
@media (prefers-color-scheme: dark){ .xo-tag{ color: rgba(234,240,255,.82); } }

.xo-divider{
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(11,18,32,.18), transparent);
}
@media (prefers-color-scheme: dark){ .xo-divider{ background: linear-gradient(90deg, transparent, rgba(234,240,255,.18), transparent); } }

.xo-inline-ok{
  padding:10px 12px;
  border-radius: 14px;
  background: rgba(34,193,220,.10);
  border: 1px solid rgba(34,193,220,.26);
  color: var(--xo-muted);
}

/* Sections */
.xo-section{ padding: 70px 0; }
.xo-section-alt{
  background: linear-gradient(180deg, rgba(255,255,255,.0), rgba(255,255,255,.58));
  border-top: 1px solid var(--xo-border);
  border-bottom: 1px solid var(--xo-border);
}
@media (prefers-color-scheme: dark){ .xo-section-alt{ background: rgba(255,255,255,.03); } }

/* Cards */
.xo-card{
  padding:18px;
  border-radius: var(--xo-radius-lg);
  background: rgba(255,255,255,.74);
  border: 1px solid var(--xo-border);
  box-shadow: var(--xo-shadow-soft);
  position:relative;
  overflow:hidden;
}
@media (prefers-color-scheme: dark){ .xo-card{ background: rgba(14,22,40,.80); } }
.xo-card::before{
  content:"";
  position:absolute; inset:-90px -90px auto auto;
  width:200px;height:200px;
  background: radial-gradient(circle at 30% 30%, rgba(45,70,255,.18), transparent 60%);
  transform: rotate(12deg);
  pointer-events:none;
}
.xo-card-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.xo-ico{
  font-weight:800;
  padding:6px 10px;
  border-radius: 999px;
  background: var(--xo-grad-chip);
  border: 1px solid var(--xo-border);
}
.xo-badge{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,209,102,.14);
  border: 1px solid rgba(255,209,102,.28);
  color: var(--xo-muted);
  font-weight:700;
  font-size:.78rem;
}

/* Pricing */
.xo-price-card{
  height:100%;
  border-radius: 20px;
  background: rgba(255,255,255,.66);
  border: 1px solid var(--xo-border);
  overflow:hidden;
  box-shadow: var(--xo-shadow-soft);
}
@media (prefers-color-scheme: dark){ .xo-price-card{ background: rgba(255,255,255,.03); } }
.xo-featured{
  border-color: rgba(45,70,255,.30);
  box-shadow: 0 18px 35px rgba(45,70,255,.12);
}
.xo-price-top{ padding:14px 14px 0; }
.xo-price-body{ padding: 12px 14px; }
.xo-price-foot{ padding: 0 14px 14px; }
.xo-price{
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 8px 0 10px;
}
.xo-list{ margin:0; padding-left: 18px; color: var(--xo-muted); }
.xo-list li{ margin-bottom:6px; }

.xo-note{
  padding:12px 14px;
  border-radius: 18px;
  background: rgba(45,70,255,.08);
  border: 1px solid rgba(45,70,255,.18);

/* Slightly increase vertical spacing for section blocks site-wide */
[class*="-section"] {
  margin-top: 3.5rem;
}
}

/* Quote */
.xo-quote{
  padding:18px;
  border-radius: var(--xo-radius-lg);
  background: rgba(255,255,255,.74);
  border: 1px solid var(--xo-border);
  box-shadow: var(--xo-shadow-soft);
}
@media (prefers-color-scheme: dark){ .xo-quote{ background: rgba(14,22,40,.80); } }

/* Accordion */
.xo-accordion .accordion-item{
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid var(--xo-border);
  background: rgba(255,255,255,.74);
  box-shadow: var(--xo-shadow-soft);
  margin-bottom: 10px;
}
@media (prefers-color-scheme: dark){ .xo-accordion .accordion-item{ background: rgba(14,22,40,.80); } }
.xo-accordion .accordion-button{ background: transparent; color: var(--xo-text); }
.xo-accordion .accordion-button:not(.collapsed){ background: rgba(45,70,255,.08); box-shadow:none; }
.xo-link{ color: var(--xo-link); text-decoration:none; font-weight:600; }
.xo-link:hover{ color: var(--xo-link-hover); text-decoration:underline; }

/* CTA */
.xo-cta{
  padding:22px;
  border-radius: calc(var(--xo-radius-lg) + 6px);
  background: linear-gradient(135deg, rgba(255,255,255,.86), rgba(255,255,255,.62));
  border: 1px solid var(--xo-border);
  box-shadow: var(--xo-shadow);
  position:relative;
  overflow:hidden;
}
@media (prefers-color-scheme: dark){ .xo-cta{ background: rgba(14,22,40,.84); } }
.xo-cta::after{
  content:"";
  position:absolute;
  inset:-40px -60px auto auto;
  width:240px;height:240px;
  background: radial-gradient(circle at 30% 30%, rgba(183,243,90,.16), transparent 60%);
  transform: rotate(-10deg);
  pointer-events:none;
}

.xo-mini-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
}
@media (max-width: 575.98px){ .xo-mini-grid{ grid-template-columns:1fr; } }
.xo-mini-tile{
  padding:16px;
  border-radius: var(--xo-radius-lg);
  background: rgba(255,255,255,.74);
  border: 1px solid var(--xo-border);
  box-shadow: var(--xo-shadow-soft);
}
@media (prefers-color-scheme: dark){ .xo-mini-tile{ background: rgba(14,22,40,.80); } }

/* Footer */
.xo-footer{
  padding: 52px 0;
  background: rgba(255,255,255,.62);
  border-top: 1px solid var(--xo-border);
}
@media (prefers-color-scheme: dark){ .xo-footer{ background: rgba(14,22,40,.84); } }
.xo-footer-title{ font-weight:700; margin-bottom:10px; }
.xo-footer-links li{ margin-bottom:8px; }
.xo-footer-links a{ color: var(--xo-muted); text-decoration:none; }
.xo-footer-links a:hover{ color: var(--xo-text); text-decoration:underline; }
.xo-footline{ opacity:.85; }

/* Dark helper */
@media (prefers-color-scheme: dark){
  .text-muted{ color: var(--xo-muted) !important; }
  .navbar-toggler{ border-color: var(--xo-border); }
  .navbar-toggler-icon{ filter: invert(1) grayscale(1); opacity: .85; }
}