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

/* Ribbon */
.xh-ribbon{
  background: linear-gradient(90deg, rgba(255,255,255,.65), rgba(255,255,255,.45));
  border-bottom: 1px solid var(--xh-border);
  backdrop-filter: blur(10px);
}
@media (prefers-color-scheme: dark){
  .xh-ribbon{ background: rgba(14,22,40,.75); }
}
.xh-ribbon-link{ color: var(--xh-muted); }
.xh-ribbon-link:hover{ color: var(--xh-text); }
.xh-spark{
  width:10px;height:10px;border-radius:99px;
  background: radial-gradient(circle at 30% 30%, var(--xh-gold), var(--xh-coral));
  box-shadow: 0 0 0 5px rgba(242,201,76,.15);
}

/* Nav */
.xh-nav{
  background: rgba(255,255,255,.72);
  border-bottom: 1px solid var(--xh-border);
  backdrop-filter: blur(12px);
}
.xh-nav .navbar-brand{
  font-weight: 700;
  background: var(--xh-grad-1);
  border: 1px solid var(--xh-border);
  color: var(--xh-ink);
  padding:4px 12px;
  border-radius: 14px;
}
@media (prefers-color-scheme: dark){
  .xh-nav{ background: rgba(14,22,40,.80); }
}
.xh-mark{
  width:34px;height:34px;border-radius:14px;
  display:grid;place-items:center;
  background: var(--xh-grad-1);
  border: 1px solid var(--xh-border);
  box-shadow: var(--xh-shadow-soft);
  color: var(--xh-ink);
}
@media (prefers-color-scheme: dark){
  .xh-mark{ color: #EAF0FF; }
}
.navbar .nav-link{ color: var(--xh-muted); }
.navbar .nav-link:hover{ color: var(--xh-text); }
.navbar .nav-link.active{ color: var(--xh-text); font-weight:600; }

.xh-btn-pill{
  border-radius: 999px !important;
}
.btn-primary{
  background: linear-gradient(135deg, var(--xh-lilac), #4A3DF1);
  border: 0;
  box-shadow: 0 12px 26px rgba(109,94,247,.20);
}
.btn-primary:hover{
  background: linear-gradient(135deg, #5C4EF5, #3D31EA);
}
.btn-outline-primary{
  border-color: rgba(109,94,247,.45);
  color: var(--xh-link);
}
.btn-outline-primary:hover{
  background: rgba(109,94,247,.10);
  border-color: rgba(109,94,247,.55);
  color: var(--xh-link-hover);
}

/* Hero */
.xh-hero{
  position: relative;
  overflow: hidden;
  background: var(--xh-grad-hero);
}
.xh-kicker{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
}
.xh-hero .badge{ border-color: var(--xh-border) !important; }
.xh-orb{
  position:absolute; border-radius:999px; filter: blur(18px);
  opacity:.95; pointer-events:none;
}
.xh-orb-a{ width:240px; height:240px; left:-70px; top:40px; background: rgba(109,94,247,.25); }
.xh-orb-b{ width:280px; height:280px; right:-90px; top:80px; background: rgba(46,196,182,.20); }
.xh-orb-c{ width:220px; height:220px; right:10%; bottom:-90px; background: rgba(242,201,76,.18); }

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

.xh-trust{
  display:flex; flex-wrap:wrap; gap:10px;
}
.xh-chip{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.65);
  border: 1px solid var(--xh-border);
  color: var(--xh-muted);
}
@media (prefers-color-scheme: dark){
  .xh-chip{ background: rgba(14,22,40,.70); }
}
.xh-chip-dot{
  width:10px;height:10px;border-radius:99px;
  background: radial-gradient(circle at 35% 35%, var(--xh-mint), var(--xh-lilac));
  box-shadow: 0 0 0 5px rgba(46,196,182,.14);
}

/* Hero card */
.xh-hero-card{
  background: rgba(255,255,255,.75);
  border: 1px solid var(--xh-border);
  border-radius: var(--xh-radius-lg);
  box-shadow: var(--xh-shadow);
  overflow:hidden;
}
@media (prefers-color-scheme: dark){
  .xh-hero-card{ background: rgba(14,22,40,.78); }
}
.xh-hero-card-top{
  padding:18px 18px 0;
}
.xh-hero-card-bottom{
  padding:0 18px 18px;
}
.xh-steps{ padding: 0 18px; }
.xh-step{
  display:flex; gap:12px; align-items:flex-start;
  padding:12px;
  border-radius: 16px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(11,18,32,.08);
  margin-bottom:10px;
}
@media (prefers-color-scheme: dark){
  .xh-step{ background: rgba(255,255,255,.03); border-color: rgba(234,240,255,.10); }
}
.xh-step-idx{
  font-weight:700;
  background: var(--xh-grad-2);
  border: 1px solid var(--xh-border);
  color: var(--xh-text);
  padding:4px 10px;
  border-radius: 999px;
  min-width: 52px;
  text-align:center;
}

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

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

/* Cards */
.xh-post-card{
  padding:18px;
  border-radius: var(--xh-radius-lg);
  background: rgba(255,255,255,.72);
  border: 1px solid var(--xh-border);
  box-shadow: var(--xh-shadow-soft);
  position:relative;
  overflow:hidden;
}
@media (prefers-color-scheme: dark){
  .xh-post-card{ background: rgba(14,22,40,.78); }
}
.xh-post-card::before{
  content:"";
  position:absolute; inset:-80px -80px auto auto;
  width:180px; height:180px;
  background: radial-gradient(circle at 30% 30%, rgba(109,94,247,.22), transparent 60%);
  transform: rotate(12deg);
  pointer-events:none;
}
.xh-post-top{
  display:flex; align-items:center; justify-content:space-between;
}
.xh-tag{
  display:inline-flex; align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(46,196,182,.10);
  border: 1px solid rgba(46,196,182,.22);
  color: rgba(11,18,32,.78);
  font-size: .78rem;
  font-weight: 600;
}
@media (prefers-color-scheme: dark){
  .xh-tag{ color: rgba(234,240,255,.82); }
}
.xh-date{ font-size:.8rem; color: var(--xh-muted); }
.xh-post-footer{
  display:flex; align-items:center; justify-content:space-between;
}
.xh-link{ color: var(--xh-link); text-decoration:none; font-weight:600; }
.xh-link:hover{ color: var(--xh-link-hover); text-decoration:underline; }

/* Callouts */
.xh-callout{
  display:flex; gap:14px; align-items:flex-start;
  padding:16px;
  border-radius: var(--xh-radius-lg);
  background: rgba(255,255,255,.75);
  border: 1px solid var(--xh-border);
}
.xh-callout-soft{
  background: rgba(255,255,255,.55);
}
@media (prefers-color-scheme: dark){
  .xh-callout, .xh-callout-soft{ background: rgba(14,22,40,.80); }
}
.xh-callout-icon{
  width:40px;height:40px;border-radius:14px;
  display:grid;place-items:center;
  background: var(--xh-grad-1);
  border: 1px solid var(--xh-border);
  font-weight:800;
}

/* Grid 2 */
.xh-grid-2{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
}
@media (max-width: 575.98px){
  .xh-grid-2{ grid-template-columns: 1fr; }
}
.xh-mini-card{
  padding:14px;
  border-radius: 18px;
  background: rgba(255,255,255,.60);
  border: 1px solid var(--xh-border);
}
@media (prefers-color-scheme: dark){
  .xh-mini-card{ background: rgba(255,255,255,.03); }
}

/* Pricing */
.xh-pricing-shell{
  padding:18px;
  border-radius: var(--xh-radius-lg);
  background: rgba(255,255,255,.75);
  border: 1px solid var(--xh-border);
  box-shadow: var(--xh-shadow);
}
@media (prefers-color-scheme: dark){
  .xh-pricing-shell{ background: rgba(14,22,40,.80); }
}
.xh-pricing-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.xh-price-card{
  height:100%;
  border-radius: 20px;
  background: rgba(255,255,255,.60);
  border: 1px solid var(--xh-border);
  overflow:hidden;
}
@media (prefers-color-scheme: dark){
  .xh-price-card{ background: rgba(255,255,255,.03); }
}
.xh-price-card-featured{
  border-color: rgba(109,94,247,.30);
  box-shadow: 0 18px 35px rgba(109,94,247,.12);
}
.xh-price-top{ padding:14px 14px 0; }
.xh-price-body{ padding: 12px 14px; }
.xh-price-foot{ padding: 0 14px 14px; }
.xh-price{
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 10px 0 10px;
}
.xh-list{
  margin:0; padding-left: 18px;
  color: var(--xh-muted);
}
.xh-list li{ margin-bottom:6px; }

/* Support */
.xh-support-card{
  padding:18px;
  border-radius: var(--xh-radius-lg);
  background: rgba(255,255,255,.72);
  border: 1px solid var(--xh-border);
  box-shadow: var(--xh-shadow-soft);
}
@media (prefers-color-scheme: dark){
  .xh-support-card{ background: rgba(14,22,40,.78); }
}
.xh-support-icon{
  width:44px;height:44px;border-radius:16px;
  display:grid;place-items:center;
  background: var(--xh-grad-2);
  border: 1px solid var(--xh-border);
  font-size: 18px;
  font-weight: 800;
}
.xh-pill{
  padding:12px;
  border-radius: 18px;
  background: rgba(255,255,255,.58);
  border: 1px solid var(--xh-border);
}
@media (prefers-color-scheme: dark){
  .xh-pill{ background: rgba(255,255,255,.03); }
}

.xh-testimonials{
  padding:18px;
  border-radius: var(--xh-radius-lg);
  background: rgba(255,255,255,.72);
  border: 1px solid var(--xh-border);
  box-shadow: var(--xh-shadow-soft);
}
@media (prefers-color-scheme: dark){
  .xh-testimonials{ background: rgba(14,22,40,.78); }
}
.xh-quote{
  padding:14px;
  border-radius: 18px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(11,18,32,.08);
  margin-top: 10px;
}
@media (prefers-color-scheme: dark){
  .xh-quote{ background: rgba(255,255,255,.03); border-color: rgba(234,240,255,.10); }
}

/* Accordion */
.xh-accordion .accordion-item{
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid var(--xh-border);
  background: rgba(255,255,255,.72);
  box-shadow: var(--xh-shadow-soft);
  margin-bottom: 10px;
}
@media (prefers-color-scheme: dark){
  .xh-accordion .accordion-item{ background: rgba(14,22,40,.78); }
}
.xh-accordion .accordion-button{
  background: transparent;
  color: var(--xh-text);
}
.xh-accordion .accordion-button:not(.collapsed){
  background: rgba(109,94,247,.08);
  box-shadow: none;
}
.xh-accordion .accordion-body a{ color: var(--xh-link); }

/* CTA */
.xh-cta{
  padding:22px;
  border-radius: calc(var(--xh-radius-lg) + 6px);
  background: linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,255,255,.62));
  border: 1px solid var(--xh-border);
  box-shadow: var(--xh-shadow);
  position:relative;
  overflow:hidden;
}
@media (prefers-color-scheme: dark){
  .xh-cta{ background: rgba(14,22,40,.82); }
}
.xh-cta::after{
  content:"";
  position:absolute;
  inset:-40px -60px auto auto;
  width:220px;height:220px;
  background: radial-gradient(circle at 30% 30%, rgba(46,196,182,.18), transparent 60%);
  transform: rotate(-10deg);
  pointer-events:none;
}
.xh-inline-ok{
  padding:10px 12px;
  border-radius: 14px;
  background: rgba(46,196,182,.10);
  border: 1px solid rgba(46,196,182,.25);
  color: var(--xh-muted);
}

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

/* About page */
.xh-paper{
  padding:18px;
  border-radius: var(--xh-radius-lg);
  background: rgba(255,255,255,.75);
  border: 1px solid var(--xh-border);
  box-shadow: var(--xh-shadow-soft);
}
@media (prefers-color-scheme: dark){
  .xh-paper{ background: rgba(14,22,40,.80); }
}
.xh-panel{
  padding:18px;
  border-radius: var(--xh-radius-lg);
  background: rgba(255,255,255,.72);
  border: 1px solid var(--xh-border);
  box-shadow: var(--xh-shadow-soft);
}
@media (prefers-color-scheme: dark){
  .xh-panel{ background: rgba(14,22,40,.78); }
}
.xh-stats{ display:grid; gap:10px; }
.xh-stat{
  padding:12px;
  border-radius: 18px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(11,18,32,.08);
}
@media (prefers-color-scheme: dark){
  .xh-stat{ background: rgba(255,255,255,.03); border-color: rgba(234,240,255,.10); }
}
.xh-stat-k{ font-size:.8rem; color: var(--xh-muted); }
.xh-stat-v{ font-weight: 700; }
.xh-process{
  padding:16px;
  border-radius: var(--xh-radius-lg);
  background: rgba(255,255,255,.72);
  border: 1px solid var(--xh-border);
  box-shadow: var(--xh-shadow-soft);
}
@media (prefers-color-scheme: dark){
  .xh-process{ background: rgba(14,22,40,.78); }
}
.xh-badge{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(242,201,76,.12);
  border: 1px solid rgba(242,201,76,.26);
  color: var(--xh-muted);
  font-weight:700;
  font-size:.78rem;
}
.xh-process-top{ display:flex; justify-content:flex-start; }

/* Contact page extras */
.xh-contact-list{ display:grid; gap:10px; }
.xh-contact-item{
  padding:12px;
  border-radius: 18px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(11,18,32,.08);
}
@media (prefers-color-scheme: dark){
  .xh-contact-item{ background: rgba(255,255,255,.03); border-color: rgba(234,240,255,.10); }
}
.xh-contact-k{ font-size:.8rem; color: var(--xh-muted); }
.xh-contact-v{ font-weight:700; }
.xh-map-box{
  padding:16px;
  border-radius: 18px;
  background: rgba(255,255,255,.55);
  border: 1px dashed rgba(11,18,32,.18);
}
@media (prefers-color-scheme: dark){
  .xh-map-box{ background: rgba(255,255,255,.03); border-color: rgba(234,240,255,.18); }
}

.xh-note{
  padding:12px 14px;
  border-radius: 18px;
  background: rgba(109,94,247,.08);
  border: 1px solid rgba(109,94,247,.18);
}

/* Footer */
.xh-footer{
  padding: 52px 0;
  background: rgba(255,255,255,.60);
  border-top: 1px solid var(--xh-border);
}
@media (prefers-color-scheme: dark){
  .xh-footer{ background: rgba(14,22,40,.80); }
}

/* Slightly increase vertical spacing for section blocks site-wide */
[class*="-section"] {
  margin-top: 3.5rem;
}
.xh-footer-title{
  font-weight: 700;
  margin-bottom: 10px;
}
.xh-footer-links li{ margin-bottom: 8px; }
.xh-footer-links a{
  color: var(--xh-muted);
  text-decoration:none;
}
.xh-footer-links a:hover{
  color: var(--xh-text);
  text-decoration:underline;
}
.xh-footline{ opacity: .85; }

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