/* Baysil brand */
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/InterVariable.woff2') format('woff2-variations'),
       url('/assets/fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --brand: #205eac;
  --brand-dark: #17457e;
  --brand-light: #eaf1fb;
  --brand-tint: #f4f8fd;
  --ink: #0f1a2a;
  --ink-soft: #3a4658;
  --muted: #6b7684;
  --line: #e5e8ee;
  --bg: #ffffff;
  --bg-soft: #f7f9fc;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(15,26,42,.06);
  --shadow-md: 0 6px 24px -8px rgba(15,26,42,.16);
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --container: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-dark); }
h1, h2, h3, h4 { color: var(--ink); font-weight: 700; letter-spacing: -0.01em; margin: 0 0 .5em; line-height: 1.2; }
h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); letter-spacing: -0.025em; line-height: 1.1; }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.6rem); letter-spacing: -0.02em; }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 600; }
h4 { font-size: 1.05rem; }
p { margin: 0 0 1em; color: var(--ink-soft); }
.eyebrow { color: var(--brand); font-weight: 600; text-transform: uppercase; font-size: .78rem; letter-spacing: .08em; margin: 0 0 .8rem; }

/* Layout */
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 780px; margin: 0 auto; padding: 0 24px; }
section { padding: 104px 0; }
.section-tight { padding: 56px 0; }
.text-center { text-align: center; }
@media (max-width: 900px) {
  section { padding: 72px 0; }
}
@media (max-width: 600px) {
  section { padding: 56px 0; }
}
.section-heading { max-width: 780px; margin: 0 auto 40px; text-align: center; }
.section-heading h2 { color: var(--brand-dark); }
.section-heading p { font-size: 1.08rem; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px;
}
.nav-brand { display: flex; align-items: center; gap: 10px; }
.nav-brand img { height: 32px; width: auto; }
.nav-links {
  display: flex; gap: 6px; align-items: center; list-style: none; margin: 0; padding: 0;
}
.nav-links a:not(.btn) {
  color: var(--ink); font-weight: 500; padding: 8px 14px; border-radius: 8px; font-size: .95rem;
}
.nav-links a:not(.btn):hover { background: var(--brand-light); color: var(--brand-dark); }
.nav-links a.is-active:not(.btn) { color: var(--brand); }
.nav-cta { margin-left: 8px; }

/* Mobile nav */
.nav-toggle {
  display: none;
  background: none; border: 0; width: 40px; height: 40px;
  cursor: pointer; color: var(--ink);
  align-items: center; justify-content: center;
}
.nav-toggle svg { width: 22px; height: 22px; }

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    display: none;
    position: absolute; left: 0; right: 0; top: 68px;
    background: #fff;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px 16px 20px;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
  }
  .nav.is-open .nav-links { display: flex; }
  .nav-links a:not(.btn) { padding: 12px 12px; border-radius: 8px; }
  .nav-cta { margin: 8px 0 0; }
  .nav-cta .btn { width: 100%; text-align: center; }
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px;
  font-weight: 600; font-size: .98rem;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .1s ease, background .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); color: #fff; box-shadow: 0 6px 18px -8px rgba(32,94,172,.5); }
.btn-secondary { background: #fff; color: var(--brand); border-color: var(--brand); }
.btn-secondary:hover { background: var(--brand-light); color: var(--brand-dark); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--bg-soft); color: var(--ink); }
.btn-sm { padding: 8px 16px; font-size: .9rem; }
.btn-lg { padding: 14px 28px; font-size: 1.02rem; }

/* Hero */
.hero {
  padding: 84px 0 64px;
  background:
    radial-gradient(1000px 500px at 15% -10%, rgba(32,94,172,.12), transparent 60%),
    radial-gradient(800px 400px at 100% 10%, rgba(32,94,172,.08), transparent 60%),
    var(--bg);
}
.hero-grid {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center;
}
.hero h1 { margin-bottom: .5em; }
.hero-lead { font-size: 1.18rem; color: var(--ink-soft); max-width: 560px; margin-bottom: 1.75rem; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-visual { position: relative; }
.hero-visual img {
  border-radius: 0;
  box-shadow: none;
  /* Feather all four edges into the hero background. Left fade is deepest
     (blends into the text column), the other three are just soft feathering.
     The left fade stops before the UI popups in the image (~10% in). */
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0, #000 10%),
    linear-gradient(to left,   transparent 0, #000 6%),
    linear-gradient(to bottom, transparent 0, #000 5%),
    linear-gradient(to top,    transparent 0, #000 5%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right,  transparent 0, #000 10%),
    linear-gradient(to left,   transparent 0, #000 6%),
    linear-gradient(to bottom, transparent 0, #000 5%),
    linear-gradient(to top,    transparent 0, #000 5%);
          mask-composite: intersect;
  /* Nudge the image a touch to the right so the left fade sits fully in the gap */
  transform: translateX(24px);
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero { padding: 56px 0 40px; }
  /* When stacked, fade top into copy above; keep gentle feathering on the sides */
  .hero-visual img {
    transform: none;
    -webkit-mask-image:
      linear-gradient(to bottom, transparent 0, #000 12%),
      linear-gradient(to top,    transparent 0, #000 5%),
      linear-gradient(to right,  transparent 0, #000 5%),
      linear-gradient(to left,   transparent 0, #000 5%);
            mask-image:
      linear-gradient(to bottom, transparent 0, #000 12%),
      linear-gradient(to top,    transparent 0, #000 5%),
      linear-gradient(to right,  transparent 0, #000 5%),
      linear-gradient(to left,   transparent 0, #000 5%);
  }
}

/* Simple page banner */
.page-hero {
  padding: 72px 0 32px;
  background: var(--brand-tint);
  border-bottom: 1px solid var(--line);
}
.page-hero .eyebrow { color: var(--brand); }
.page-hero h1 { margin-bottom: .3em; }
.page-hero p { max-width: 720px; font-size: 1.1rem; }

/* Feature grid */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: #d5dbe6; }
.card .card-icon {
  width: 44px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-light); color: var(--brand);
  margin-bottom: 16px;
}
.card h3 { font-size: 1.15rem; margin-bottom: .35em; }
.card p { margin: 0; font-size: .97rem; }

/* Feature row (alternating text+image) */
.feature-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
  margin: 80px 0;
}
/* Reverse: put image column first, text second (desktop) */
.feature-row.reverse .feature-media { order: -1; }
.feature-media img { border-radius: 14px; box-shadow: var(--shadow-md); width: 100%; }
.feature-text .eyebrow { color: var(--brand); }
.feature-text h2 { margin-bottom: .5em; }
@media (max-width: 900px) {
  .feature-row { grid-template-columns: 1fr; gap: 28px; margin: 56px 0; }
  /* On mobile, keep DOM order (text first, image second) regardless of .reverse */
  .feature-row.reverse .feature-media { order: 0; }
}

/* Persona (home) */
.persona {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
  margin: 72px 0;
}
/* Reverse: put the image column first, text column second */
.persona.reverse .persona-media { order: -1; }
.persona-media img { border-radius: 14px; }
.persona .eyebrow { color: var(--brand); font-weight: 500; }
.persona h3 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); font-weight: 700; color: var(--ink); margin-bottom: .5em; letter-spacing: -0.015em; }
@media (max-width: 900px) {
  .persona { grid-template-columns: 1fr; gap: 24px; margin: 48px 0; }
  /* On mobile, always show image after text regardless of .reverse */
  .persona.reverse .persona-media { order: 0; }
}

/* Highlight band — deep-blue full-bleed statement between hero and personas */
.highlight-band {
  padding: 140px 24px;
  background:
    radial-gradient(1200px 500px at 20% 30%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(900px 400px at 85% 75%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(135deg, #0a2650 0%, #113974 45%, var(--brand) 100%);
  color: #fff;
  border: none;
  position: relative;
  overflow: hidden;
}
.highlight-band .container { padding: 0; }
.highlight-text {
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-weight: 600;
  font-size: clamp(1.75rem, 3.6vw, 2.6rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  max-width: 920px;
}
@media (max-width: 900px) {
  .highlight-band { padding: 96px 20px; }
}
@media (max-width: 600px) {
  .highlight-band { padding: 80px 20px; }
}

/* Pricing */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; }
@media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; } }
.plan {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 32px; position: relative;
  display: flex; flex-direction: column;
}
.plan.popular { border-color: var(--brand); box-shadow: 0 12px 32px -12px rgba(32,94,172,.28); }
.plan .plan-badge {
  position: absolute; top: -12px; right: 24px;
  background: var(--brand); color: #fff;
  padding: 4px 12px; border-radius: 999px; font-size: .78rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
}
.plan h3 { font-size: 1.4rem; margin-bottom: .1em; }
.plan .plan-tag { color: var(--muted); font-size: .95rem; margin-bottom: 20px; }
.plan .plan-price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.plan .plan-price .amt { font-size: 2.4rem; font-weight: 700; color: var(--ink); }
.plan .plan-price .cur { font-size: 1.1rem; color: var(--muted); }
.plan .plan-per { color: var(--muted); font-size: .95rem; margin-bottom: 20px; }
.plan ul { list-style: none; margin: 0 0 24px; padding: 0; }
.plan li { padding: 8px 0 8px 26px; color: var(--ink-soft); position: relative; font-size: .96rem; }
.plan li::before {
  content: ""; position: absolute; left: 0; top: 14px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--brand-light);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23205eac' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='4 8.5 7 11.5 12 5.5'/></svg>");
  background-size: 12px 12px; background-repeat: no-repeat; background-position: center;
}
.plan .btn { margin-top: auto; width: 100%; }

/* FAQ / feature list */
.feature-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 40px; margin: 32px 0; }
@media (max-width: 700px) { .feature-list { grid-template-columns: 1fr; } }
.feature-list h4 { margin-bottom: .3em; }
.feature-list p { font-size: .95rem; margin: 0; }

.faq details {
  border-top: 1px solid var(--line);
  padding: 18px 0;
}
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; font-weight: 600; color: var(--ink);
  list-style: none; display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-weight: 400; font-size: 1.5rem; color: var(--brand); line-height: 1;
}
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 12px 0 0; }

/* CTA band — full-bleed stripe sitting flush against the footer */
.cta-band {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: #fff; text-align: center;
  padding: 96px 24px;
  margin: 0;
  border-radius: 0;
  max-width: none;
}
@media (max-width: 900px) {
  .cta-band { padding: 72px 20px; }
}
.cta-band h2 { color: #fff; margin-bottom: .3em; max-width: 780px; margin-left: auto; margin-right: auto; }
.cta-band p { color: rgba(255,255,255,.9); font-size: 1.1rem; max-width: 640px; margin: 0 auto 28px; }
.cta-band .btn-primary { background: #fff; color: var(--brand); border-color: #fff; }
.cta-band .btn-primary:hover { background: var(--brand-light); color: var(--brand-dark); }
.cta-band .btn-secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.cta-band .btn-secondary:hover { background: rgba(255,255,255,.14); color: #fff; }

/* Footer */
.site-footer {
  background: var(--ink); color: #d0d6de;
  padding: 56px 0 24px;
}
.site-footer a { color: #d0d6de; }
.site-footer a:hover { color: #fff; }
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px;
  margin-bottom: 40px;
}
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 500px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand img { height: 40px; margin-bottom: 12px; filter: brightness(0) invert(1); opacity: .95; }
.footer-brand p { color: #8f97a3; font-size: .95rem; max-width: 320px; }
.footer-col h4 { color: #fff; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { padding: 4px 0; font-size: .95rem; }
.footer-bottom {
  border-top: 1px solid #26313f;
  padding-top: 20px;
  text-align: center;
  color: #8f97a3; font-size: .88rem;
}

/* Forms */
.form-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 32px; box-shadow: var(--shadow-sm);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.field { margin-bottom: 16px; }
.field label { display: block; margin-bottom: 6px; font-weight: 500; color: var(--ink); font-size: .95rem; }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 10px;
  font: inherit; color: var(--ink); background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(32,94,172,.14);
}
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] {
  border-color: #b93e3e;
  box-shadow: 0 0 0 3px rgba(185,62,62,.12);
}
.field-error {
  margin: 6px 0 0;
  color: #9a2626;
  font-size: .85rem;
}
.field textarea { min-height: 120px; resize: vertical; }
.form-help { color: var(--muted); font-size: .88rem; margin-top: 4px; }
.form-note { color: var(--muted); font-size: .9rem; text-align: center; margin-top: 16px; }
.alert {
  padding: 14px 16px; border-radius: 10px;
  background: var(--brand-light); color: var(--brand-dark);
  border: 1px solid rgba(32,94,172,.2);
  margin-bottom: 16px; font-size: .95rem;
}
.alert.ok { background: #eafaf1; color: #135f37; border-color: #b8ebd0; }
.alert.err { background: #fff0f0; color: #9a2626; border-color: #ffcccc; }
.alert[hidden] { display: none; }

/* Long-form (legal, about) */
.longform { max-width: 780px; margin: 0 auto; }
.longform h2 { margin-top: 2em; }
.longform h3 { margin-top: 1.5em; font-size: 1.15rem; }
.longform h4 { margin-top: 1.2em; font-size: 1rem; color: var(--ink); }
.longform p, .longform li { color: var(--ink-soft); }
.longform ul { padding-left: 22px; margin-bottom: 1em; }
.longform li { margin-bottom: .4em; }
.legal-meta { color: var(--muted); font-size: .95rem; margin-bottom: 24px; }

/* Utility */
.hidden { display: none !important; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0s !important; transition-duration: 0s !important; }
}