/* ===== BASORA · One-Page (HTML+CSS only) ================================== */
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=Merriweather:wght@700;900&display=swap');

:root{
  /* Palette (adjust to brand) */
  --navy-900:#0b2e4a;     /* main background */
  --navy-800:#113a5e;     /* dark bands */
  --ink-900:#0d1b2a;      /* text dark */
  --ink-700:#1e293b;
  --cream:#f5f7fb;        /* light bands */
  --white:#ffffff;
  --gold-500:#d7a44a;     /* accent */
  --gold-600:#c38c25;

  /* UI tokens */
  --radius-xl:18px;
  --radius-lg:14px;
  --radius-md:12px;
  --shadow-lg:0 18px 40px rgba(5,19,35,.18);
  --shadow-md:0 10px 24px rgba(5,19,35,.14);
  --maxw:1160px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink-900); background:var(--navy-900);
  font:400 16px/1.6 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

/* Let Elementor containers be full-bleed when needed */
.elementor-section.elementor-section-boxed>.elementor-container{ max-width: var(--maxw); }

/* Helpers */
.container{ width:min(var(--maxw), 100% - 32px); margin-inline:auto }
.section{ padding: clamp(48px, 7vw, 96px) 0 }
.h1, .h2, .h3{ font-family:Merriweather, Georgia, serif; letter-spacing:.2px }
.h1{ font-weight:900; font-size:clamp(36px, 5vw, 56px); line-height:1.05; }
.h2{ font-weight:900; font-size:clamp(28px, 3.2vw, 38px); line-height:1.15; margin:0 0 22px }
.h3{ font-weight:700; font-size:clamp(20px, 2.3vw, 24px); margin:0 0 12px }

.lead{ font-size:clamp(18px, 2.2vw, 20px); color:#e8eef7 }
.muted{ color:#5f7996 }
.kicker{ font:600 13px/1 Inter; letter-spacing:.18em; text-transform:uppercase; color:#cfe0ff }

/* Buttons */
.btn{
  --bg:var(--gold-500); --fg:#0c1a2a;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 20px; border-radius:999px; border:0; cursor:pointer;
  font:700 15px/1 Inter; text-decoration:none; color:var(--fg); background:var(--bg);
  box-shadow:0 6px 16px rgba(215,164,74,.32);
}
.btn:hover{ background:var(--gold-600) }
.btn:focus-visible{ outline:3px solid #fff2; outline-offset:2px }
.btn--ghost{ --bg:#0000; --fg:#fff; border:2px solid #ffffff44; box-shadow:none }

/* Hero */
.bso-hero{
  position:relative; color:#fff; background:var(--navy-900);
  background-image: var(--hero, none); background-size:cover; background-position:center;
}
.bso-hero::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,20,36,.75), rgba(6,20,36,.75));
}
.bso-hero__wrap{ position:relative; z-index:1; display:grid; align-items:end; min-height:68vh }
.bso-hero__copy{ max-width:720px; padding: clamp(28px, 4vw, 44px) 0 }
.bso-hero .trust{ margin-top:18px; font:600 14px/1.4 Inter; color:#d3e3ff }

/* Light/Dark bands */
.section--light{ background:var(--cream); color:var(--ink-900) }
.section--dark{ background:var(--navy-900); color:#cfe0ff }

/* Cards grid */
.grid{ display:grid; gap:22px }
.grid--3{ grid-template-columns:1fr; }
@media (min-width:900px){ .grid--3{ grid-template-columns:repeat(3,1fr) } }

.card{
  background:var(--white); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md); padding:22px;
}
.card p{ margin:6px 0 0; color:var(--ink-700) }
.icon{ width:32px; height:32px; color:var(--gold-500); flex:0 0 auto }

/* Two columns (why + pricing) */
.cols{ display:grid; gap:32px }
@media (min-width:980px){ .cols{ grid-template-columns:1.1fr .9fr } }

.bso-bullets{ list-style:none; padding:0; margin:0; display:grid; gap:12px }
.bso-bullets li{ display:flex; gap:10px; align-items:flex-start }
.badge-stars{ color:#ffd66b; font-size:18px }

/* Pricing */
.pricing{ display:grid; gap:18px; grid-template-columns:1fr; }
@media (min-width:900px){ .pricing{ grid-template-columns:repeat(3,1fr) } }
.plan{
  background:#0f3554; color:#e8f0ff; padding:22px; border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md); border:1px solid #1b4870;
}
.plan h3{ margin:0 0 6px }
.plan .pill{ display:inline-block; font:700 12px/1 Inter; letter-spacing:.12em; text-transform:uppercase;
  background:#143f69; color:#cfe0ff; padding:8px 10px; border-radius:999px; margin-bottom:12px }
.price{ font:900 34px/1 Merriweather; margin:10px 0 }
.small{ font-size:13px; opacity:.85 }

/* Metrics */
.metrics{ display:grid; gap:18px; grid-template-columns:1fr; text-align:center }
.metric{ background:#0f3554; color:#fff; padding:22px; border-radius:var(--radius-md) }
.metric b{ display:block; font:900 clamp(26px,4.2vw,36px)/1 Merriweather }
@media (min-width:840px){ .metrics{ grid-template-columns:repeat(3,1fr) } }

/* CTA band */
.cta{
  background:#0f3554; color:#fff; border-radius:var(--radius-xl);
  padding: clamp(24px, 4vw, 34px); display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:space-between;
}

/* Footer */
.footer{ color:#c7d6ea; padding:28px 0; font-size:14px }
.footer a{ color:#fff; text-decoration:none }
.footer a:hover{ text-decoration:underline }