/* 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; }

/* sections */
.xn-section{ padding: 68px 0; }
.xn-section-alt{ padding: 68px 0; background: rgba(255,255,255,.62); border-top: 1px solid rgba(14,23,38,.06); border-bottom: 1px solid rgba(14,23,38,.06); }
@media (max-width: 991.98px){
  .xn-section, .xn-section-alt{ padding: 48px 0; }
}

/* microbar */
.xn-microbar{ background: var(--grad-micro); border-bottom: 1px solid rgba(14,23,38,.08); }
.xn-pulse{
  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(26,166,166,.14);
  margin-right: 8px; transform: translateY(1px);
}
.xn-micro-link{ color: rgba(14,23,38,.82); }
.xn-micro-link:hover{ color: rgba(14,23,38,1); text-decoration:none; }

/* nav */
.xn-nav{
  background: rgba(255,255,255,.74);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(14,23,38,.10);
  box-shadow: 0 10px 30px rgba(7,21,31,.06);
}
.xn-nav .nav-link{ color: rgba(14,23,38,.82); }
.xn-nav .nav-link:hover{ color: rgba(14,23,38,1); }
.xn-nav .nav-link.active{ color: rgba(14,23,38,1); font-weight: 600; }
.xn-logo{
  display:inline-flex; align-items:center; justify-content:center;
  width: 36px; height: 36px;
  border-radius: 14px;
  background: var(--grad-chip);
  border: 1px solid rgba(14,23,38,.10);
  box-shadow: var(--shadow-soft);
  color: var(--ink);
}

/* hero */
.xn-hero{
  position: relative;
  overflow: hidden;
  background: var(--grad-hero);
  border-bottom: 1px solid rgba(14,23,38,.08);
}
.py-lg-6{ padding-top: 5rem; padding-bottom: 5rem; }
.xn-hero-decor{ position:absolute; inset:0; pointer-events:none; }
.xn-orb{
  position:absolute; width: 420px; height: 420px; border-radius: 999px;
  filter: blur(42px); opacity: .65; transform: translateZ(0);
}
.xn-orb-a{ left:-150px; top:-170px; background: rgba(255,122,162,.55); }
.xn-orb-b{ right:-170px; top:-130px; background: rgba(123,231,215,.55); }
.xn-orb-c{ left:-160px; bottom:-220px; background: rgba(26,166,166,.45); }
.xn-orb-d{ right:-200px; bottom:-260px; background: rgba(255,209,102,.55); }
.xn-orb-e{ left: 40%; top:-240px; background: rgba(26,166,166,.35); }

.xn-grid{
  position:absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: .30;
  mix-blend-mode: overlay;
}

.xn-kicker{
  display:inline-flex; align-items:center;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: .85rem;
  color: rgba(14,23,38,.88);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(14,23,38,.10);
  box-shadow: 0 10px 22px rgba(7,21,31,.06);
}

/* hero card */
.xn-hero-card{
  border-radius: calc(var(--radius-lg) + 4px);
  background: rgba(255,255,255,.90);
  border: 1px solid rgba(14,23,38,.10);
  box-shadow: var(--shadow);
  padding: 18px 18px;
}
.xn-hero-card-top{
  display:flex; align-items:flex-start; justify-content:space-between; gap: 10px;
}
.xn-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(26,166,166,.10);
  border: 1px solid rgba(26,166,166,.18);
  color: rgba(14,23,38,.90);
  font-size: .85rem;
}
.xn-hero-card-note{ border-top: 1px dashed rgba(14,23,38,.18); padding-top: 10px; }

.xn-mini-form .form-control{
  border-radius: 14px;
  border-color: rgba(14,23,38,.14);
}
.xn-form-status{ min-height: 1.2rem; color: rgba(14,23,38,.80); }

/* metrics */
.xn-metrics{
  display:grid; gap: 10px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 575.98px){
  .xn-metrics{ grid-template-columns: 1fr; }
}
.xn-metric{
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(14,23,38,.10);
  box-shadow: 0 10px 22px rgba(7,21,31,.06);
  padding: 12px 12px;
}
.xn-metric-title{ font-size: .78rem; letter-spacing: .10em; text-transform: uppercase; color: rgba(14,23,38,.62); }
.xn-metric-val{ font-weight: 600; color: rgba(14,23,38,.88); font-size: .95rem; }

/* divider */
.xn-divider{
  position:absolute; left:0; right:0; bottom:-1px;
  height: 86px; pointer-events:none;
}
.xn-divider svg{ width:100%; height:100%; display:block; }
.xn-divider path{
  fill: rgba(255,255,255,.92);
  filter: drop-shadow(0 -10px 18px rgba(7,21,31,.06));
}

/* cards */
.xn-card{
  border-radius: var(--radius-lg);
  background: var(--grad-card);
  border: 1px solid rgba(14,23,38,.10);
  box-shadow: var(--shadow-soft);
  padding: 18px 18px;
}
.xn-card-cut{
  position: relative;
  overflow: hidden;
}
.xn-card-cut::after{
  content:"";
  position:absolute;
  right:-40px; top:-40px;
  width: 150px; height: 150px;
  border-radius: 38px;
  transform: rotate(18deg);
  background: linear-gradient(135deg, rgba(255,122,162,.18), rgba(123,231,215,.12));
  border: 1px solid rgba(14,23,38,.08);
}
.xn-card-icon{
  width: 46px; height: 46px;
  border-radius: 16px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,209,102,.18);
  border: 1px solid rgba(255,209,102,.30);
  font-weight: 800;
  color: rgba(14,23,38,.80);
  margin-bottom: 10px;
}

/* pricing */
.xn-price{
  border-radius: calc(var(--radius-lg) + 4px);
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(14,23,38,.10);
  box-shadow: var(--shadow-soft);
  overflow:hidden;
}
.xn-price-head{
  padding: 18px 18px;
  background: linear-gradient(135deg, rgba(26,166,166,.12), rgba(255,122,162,.10));
  border-bottom: 1px solid rgba(14,23,38,.08);
}
.xn-price-body{ padding: 18px 18px; }
.xn-price-amount{
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: .01em;
  margin-bottom: 12px;
}
.xn-list{
  list-style:none; padding-left:0; margin: 0 0 16px;
}
.xn-list li{
  position:relative;
  padding-left: 26px;
  margin-bottom: 8px;
  color: rgba(14,23,38,.78);
}
.xn-list li::before{
  content:"";
  position:absolute; left:0; top:.55em;
  width: 14px; height: 14px; border-radius: 6px;
  background: rgba(26,166,166,.20);
  border: 1px solid rgba(26,166,166,.30);
  transform: translateY(-50%);
}
.xn-price-featured{
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: rgba(26,166,166,.24);
}
@media (max-width: 991.98px){
  .xn-price-featured{ transform:none; }
}

/* quotes */
.xn-quote{
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(14,23,38,.10);
  box-shadow: var(--shadow-soft);
  padding: 18px 18px;
  position: relative;
}
.xn-quote-mark{
  position:absolute;
  top:-18px; left: 18px;
  font-size: 64px;
  line-height: 1;
  color: rgba(255,122,162,.35);
  font-weight: 900;
}

/* accordion */
.xn-accordion .accordion-item{
  border-radius: var(--radius-lg);
  overflow:hidden;
  border: 1px solid rgba(14,23,38,.10);
  box-shadow: var(--shadow-soft);
  margin-bottom: 10px;
}
.xn-accordion .accordion-button{
  background: rgba(255,255,255,.92);
  color: rgba(14,23,38,.88);
}
.xn-accordion .accordion-button:focus{ box-shadow: 0 0 0 .25rem rgba(26,166,166,.18); }
.xn-accordion .accordion-body{ background: rgba(255,255,255,.92); }

/* CTA */
.xn-cta{
  border-radius: calc(var(--radius-lg) + 6px);
  background: var(--grad-cta);
  border: 1px solid rgba(14,23,38,.10);
  box-shadow: var(--shadow);
  padding: 22px 22px;
}
.xn-cta-form .form-control{
  border-radius: 14px;
  border-color: rgba(14,23,38,.14);
}
.xn-cta-bottom{
  border-top: 1px dashed rgba(14,23,38,.18);
  padding-top: 14px;
}

/* page hero */
.xn-page-hero{
  position: relative;
  overflow:hidden;
  background: var(--grad-hero);
  border-bottom: 1px solid rgba(14,23,38,.08);
}
.xn-page-decor{ position:absolute; inset:0; pointer-events:none; }
.xn-sash{ position:absolute; left:0; right:0; top: 18%; width: 100%; opacity: .6; }

.xn-panel{
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(14,23,38,.10);
  box-shadow: var(--shadow-soft);
  padding: 18px 18px;
}
.xn-panel-contrast{
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(239,243,251,.92));
}
.xn-steps{ display:grid; gap: 12px; }
.xn-step{
  display:flex; gap: 12px;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(14,23,38,.10);
  box-shadow: 0 10px 24px rgba(7,21,31,.06);
  padding: 14px 14px;
}
.xn-step-num{
  width: 38px; height: 38px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(26,166,166,.14);
  border: 1px solid rgba(26,166,166,.22);
  font-weight: 900;
  color: rgba(14,23,38,.84);
}

/* map placeholder */
.xn-map{
  border-radius: var(--radius-lg);
  border: 1px solid rgba(14,23,38,.10);
  overflow:hidden;
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 24px rgba(7,21,31,.06);
}
.xn-map-inner{
  min-height: 170px;
  display:flex; align-items:center; justify-content:center;
  padding: 14px 14px;
  background:
    radial-gradient(120px 120px at 20% 30%, rgba(255,122,162,.18), transparent 70%),
    radial-gradient(140px 140px at 80% 60%, rgba(123,231,215,.20), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(239,243,251,.94));
}

/* notes/disclaimers */
.xn-note{
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.90);
  border: 1px dashed rgba(14,23,38,.18);
  padding: 14px 14px;
}
.xn-disclaimer{
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(14,23,38,.10);
  padding: 14px 14px;
}

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

/* buttons */
.btn-primary{
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 12px 26px rgba(26,166,166,.20);
}
.btn-primary:hover{
  background: var(--primary-2);
  border-color: var(--primary-2);
}
.btn-outline-secondary{
  border-color: rgba(14,23,38,.22);
  color: rgba(14,23,38,.80);
}
.btn-outline-secondary:hover{
  background: rgba(14,23,38,.06);
  border-color: rgba(14,23,38,.22);
  color: rgba(14,23,38,1);
}