/* ============================================================
   LAYOUT
   ------------------------------------------------------------
   Site chrome shared by every page: campaign bar, sticky
   header + navigation, page hero (subpages), breadcrumb,
   CTA band, footer, floating CTA.
   Depends on: tokens.css, base.css
   ============================================================ */

/* ---------- Campaign bar (one line: text + button) ---------- */
.campaign-bar {
  background: var(--wb-cyan-800); color: #fff;
  padding: 10px 16px; font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: nowrap;
}
.campaign-bar span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.campaign-bar span svg { vertical-align: -0.18em; }
.campaign-bar a {
  flex: none; white-space: nowrap; text-decoration: none;
  background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.35); color: #fff;
  font-family: inherit; font-weight: 700; font-size: 13px; padding: 5px 14px;
  border-radius: var(--wb-radius-pill); cursor: pointer;
  transition: background var(--wb-dur-fast) var(--wb-ease-standard);
}
.campaign-bar a:hover { background: rgba(255,255,255,0.28); color: #fff; }

/* ---------- Header (hamburger below 960px) ---------- */
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255,255,255,0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--wb-ink-100);
  transition: box-shadow var(--wb-dur-base) var(--wb-ease-soft),
              background var(--wb-dur-base) var(--wb-ease-soft);
}
.site-header.is-scrolled {
  background: rgba(255,255,255,0.94);
  box-shadow: var(--wb-shadow-sm);
}
.site-header .bar {
  max-width: 1160px; margin: 0 auto; padding: 13px 20px; display: flex; align-items: center; gap: 16px;
  transition: padding var(--wb-dur-base) var(--wb-ease-soft);
}
.site-header.is-scrolled .bar { padding-top: 9px; padding-bottom: 9px; }
/* Official logo lockup (PNG) */
.wordmark {
  display: inline-flex; align-items: center; text-decoration: none; line-height: 0;
}
.wordmark .logo {
  height: 40px; width: auto; display: block; flex: none;
}
.wordmark-light {
  background: #fff;
  border-radius: var(--wb-radius-pill);
  padding: 9px 22px;
  min-width: 190px;
  justify-content: center;
  box-shadow: var(--wb-shadow-sm);
}
.site-footer .wordmark .logo { height: 52px; }

.nav-desktop { display: flex; gap: 22px; margin-left: 12px; flex: 1; flex-wrap: wrap; align-items: center; }
.nav-desktop a { font-weight: 700; font-size: 14.5px; color: var(--wb-ink-600); text-decoration: none; position: relative; }
.nav-desktop a:hover { color: var(--wb-cyan-700); }
.nav-desktop a[aria-current="page"] { color: var(--wb-cyan-700); }
.nav-desktop a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -8px;
  height: 3px; border-radius: var(--wb-radius-pill);
  background: var(--wb-sun-400);
}
.nav-contact-link { font-weight: 700; font-size: 14.5px; text-decoration: none; }

.nav-toggle {
  display: none; background: transparent; border: none; cursor: pointer;
  padding: 8px; border-radius: var(--wb-radius-md); flex: none; line-height: 0;
}
.nav-toggle:hover { background: var(--wb-surface-muted); }
.nav-toggle .icon-close { display: none; }
.nav-mobile {
  display: none; flex-direction: column; padding: 6px 12px 14px;
  border-top: 1px solid var(--wb-ink-100); background: rgba(255,255,255,0.97);
}
.nav-mobile a {
  font-weight: 700; font-size: 15.5px; color: var(--wb-ink-700); text-decoration: none;
  padding: 12px 10px; border-radius: var(--wb-radius-md);
  transition: background var(--wb-dur-fast) var(--wb-ease-standard);
}
.nav-mobile a:hover { background: var(--wb-surface-muted); }
.nav-mobile a:active { background: var(--wb-cyan-50); }
.nav-mobile a.contact { color: var(--wb-link); }
@media (max-width: 959.98px) {
  .nav-desktop, .nav-contact-link { display: none; }
  .nav-toggle { display: inline-flex; }
  .site-header .bar { justify-content: space-between; }

  /* Menu stays in the DOM and collapses to height 0 so it can animate
     open AND closed (a plain display toggle can't exit). Slides down
     from under the header with a fade. */
  .nav-mobile {
    display: flex;
    max-height: 0; overflow: hidden;
    opacity: 0; transform: translateY(-8px);
    transition: max-height var(--wb-dur-base) var(--wb-ease-soft),
                opacity var(--wb-dur-fast) var(--wb-ease-standard),
                transform var(--wb-dur-base) var(--wb-ease-soft);
  }
  body.menu-open .nav-mobile {
    max-height: calc(100vh - 70px); overflow-y: auto;
    opacity: 1; transform: translateY(0);
  }
  /* Links cascade in; --i is set per link in main.js. Delay only on the
     way in, so closing collapses cleanly without a reverse stagger. */
  .nav-mobile a {
    opacity: 0; transform: translateY(-6px);
    transition: opacity var(--wb-dur-fast) var(--wb-ease-standard),
                transform var(--wb-dur-base) var(--wb-ease-soft),
                background var(--wb-dur-fast) var(--wb-ease-standard);
  }
  body.menu-open .nav-mobile a {
    opacity: 1; transform: none;
    transition-delay: calc(var(--i, 0) * 35ms);
  }
  body.menu-open .nav-toggle .icon-burger { display: none; }
  body.menu-open .nav-toggle .icon-close { display: block; }
}

/* ---------- Page hero + breadcrumb (subpages) ---------- */
.page-hero {
  background:
    radial-gradient(circle at 82% 16%, rgba(245,201,59,0.18), transparent 26vw),
    var(--wb-surface-tint);
  border-bottom: 1px solid var(--wb-ink-100);
}
.page-hero .inner { max-width: 1160px; margin: 0 auto; padding: 40px 32px 52px; }
.page-hero h1 { font-weight: 800; font-size: clamp(28px, 4vw, 40px); line-height: 1.3; margin: 14px 0 0; letter-spacing: -0.01em; }
.page-hero .lead { font-size: 16px; line-height: 1.9; color: var(--wb-ink-600); margin: 16px 0 0; max-width: 720px; text-wrap: pretty; }
.page-hero .lead strong { color: var(--wb-ink-800); }
@media (max-width: 719.98px) { .page-hero .inner { padding: 28px 20px 40px; } }

.breadcrumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; padding: 0; list-style: none; font-size: 13px; }
.breadcrumb li { display: inline-flex; align-items: center; gap: 8px; }
.breadcrumb a { color: var(--wb-ink-500); text-decoration: none; font-weight: 700; }
.breadcrumb a:hover { color: var(--wb-cyan-700); }
.breadcrumb li + li::before { content: "›"; color: var(--wb-ink-300); }
.breadcrumb .current { color: var(--wb-cyan-700); font-weight: 700; }

/* ---------- CTA band ---------- */
.cta-band-wrap { max-width: 1160px; margin: 0 auto; padding: 0 32px 92px; }
.cta-band {
  background:
    radial-gradient(circle at 15% 18%, rgba(245,201,59,0.16), transparent 30%),
    radial-gradient(circle at 88% 70%, rgba(95,200,224,0.18), transparent 34%),
    var(--wb-surface-deep);
  border-radius: var(--wb-radius-2xl);
  padding: 64px 40px; text-align: center; position: relative; overflow: hidden;
  box-shadow: var(--wb-shadow-md);
}
.cta-band .deco { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.08); pointer-events: none; }
.cta-band .deco-1 { top: -70px; left: -50px; width: 240px; height: 240px; }
.cta-band .deco-2 { bottom: -90px; right: -40px; width: 280px; height: 280px; }
.cta-band .spark {
  position: absolute;
  width: 12px; height: 12px;
  border-radius: 50%;
  pointer-events: none;
  animation: wbFloat 8s ease-in-out infinite;
}
.cta-band .spark-1 { left: 14%; top: 28%; background: var(--wb-level-3-leaf); opacity: 0.5; }
.cta-band .spark-2 { right: 18%; top: 22%; background: var(--wb-level-7-master); opacity: 0.45; animation-delay: 1.2s; }
.cta-band .spark-3 { right: 12%; bottom: 22%; background: var(--wb-sun-400); opacity: 0.5; animation-delay: 0.6s; }
.cta-band h2 { font-weight: 800; font-size: clamp(28px, 4vw, 36px); color: #fff; margin: 0; position: relative; }
.cta-band p { font-size: 16.5px; line-height: 1.8; color: rgba(255,255,255,0.92); margin: 14px auto 0; max-width: 560px; position: relative; }
.cta-band .btn-row { position: relative; margin-top: 28px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta-band .btn-white {
  background: #fff; color: var(--wb-cyan-700); border: none;
  font-family: var(--wb-font-display); font-weight: 800; font-size: 17px; padding: 16px 36px;
  border-radius: var(--wb-radius-pill); cursor: pointer; box-shadow: var(--wb-shadow-md);
  text-decoration: none; display: inline-flex; align-items: center; gap: 10px;
  transition: transform var(--wb-dur-fast) var(--wb-ease-spring), box-shadow var(--wb-dur-fast) var(--wb-ease-standard);
}
.cta-band .btn-white:hover { transform: translateY(-2px); box-shadow: var(--wb-shadow-lg); color: var(--wb-cyan-700); }
.cta-band .btn-white[href*="trial.html"] { background: var(--wb-sun-400); color: var(--wb-ink-900); }
.cta-band .btn-white[href*="trial.html"]:hover { background: var(--wb-sun-500); color: var(--wb-ink-900); }
.cta-band .btn-white:active { transform: scale(0.97); }
.cta-band .btn-outline {
  background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.65);
  font-family: var(--wb-font-display); font-weight: 800; font-size: 17px; padding: 14px 32px;
  border-radius: var(--wb-radius-pill); cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 10px;
  transition: background var(--wb-dur-fast) var(--wb-ease-standard);
}
.cta-band .btn-outline:hover { background: rgba(255,255,255,0.14); color: #fff; }

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  overflow: clip;
  background:
    linear-gradient(rgba(11,71,89,0.96), rgba(11,71,89,0.96)),
    var(--wb-texture-dots);
  background-size: auto, var(--wb-texture-size);
  color: rgba(255,255,255,0.78);
  padding: 60px 32px 36px;
}
.site-footer::before {
  content: "";
  position: absolute;
  left: -1px; right: -1px; top: -55px;
  height: 56px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 56' preserveAspectRatio='none'%3E%3Cpath fill='%230B4759' d='M0,36 C240,66 420,6 720,24 C1020,42 1200,12 1440,32 L1440,56 L0,56 Z'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
}
.site-footer > * { position: relative; z-index: 1; }
.footer-grid { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 40px; }
.site-footer p { font-size: 14px; line-height: 1.75; margin: 16px 0 0; max-width: 320px; }
.site-footer .tagline { font-family: var(--wb-font-display); font-weight: 700; font-size: 16px; color: #fff; margin: 18px 0 0; }
.footer-heading { font-weight: 800; font-size: 13px; color: #fff; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 14px; }
.footer-item { font-size: 14px; margin-bottom: 10px; line-height: 1.6; }
.footer-item strong { color: #fff; }
.footer-links { display: flex; flex-direction: column; gap: 8px; }
.footer-links a { font-size: 14px; color: rgba(255,255,255,0.78); text-decoration: none; }
.footer-links a:hover { color: #fff; }
.footer-bottom {
  max-width: 1160px; margin: 32px auto 0; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.12); font-size: 12px; color: rgba(255,255,255,0.5);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.footer-bottom a { color: rgba(255,255,255,0.65); text-decoration: none; }
.footer-bottom a:hover { color: #fff; }

/* ---------- Floating CTA ---------- */
.floating-cta {
  position: fixed; bottom: 24px; right: 24px; z-index: 40;
  background: var(--wb-sun-400); color: var(--wb-ink-900); border: none;
  font-family: var(--wb-font-display); font-weight: 800; font-size: 15px;
  padding: 14px 24px; border-radius: var(--wb-radius-pill); cursor: pointer;
  box-shadow: var(--wb-shadow-lg); display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
  /* Hidden state — kept in the layout so it can animate both ways.
     Pops in on .visible, fades + drops back out on scroll-up. */
  opacity: 0; visibility: hidden;
  transform: scale(0.85) translateY(12px);
  transition: opacity var(--wb-dur-base) var(--wb-ease-soft),
              transform var(--wb-dur-base) var(--wb-ease-spring),
              visibility 0s linear var(--wb-dur-base),
              background var(--wb-dur-fast) var(--wb-ease-standard);
}
.floating-cta.visible {
  opacity: 1; visibility: visible;
  transform: scale(1) translateY(0);
  transition: opacity var(--wb-dur-base) var(--wb-ease-soft),
              transform var(--wb-dur-base) var(--wb-ease-spring),
              background var(--wb-dur-fast) var(--wb-ease-standard);
}
.floating-cta:hover { background: var(--wb-sun-500); color: var(--wb-ink-900); }
.floating-cta.visible:active { transform: scale(0.97); }

.wave-divider {
  display: block;
  width: 100%;
  height: 56px;
  margin-bottom: -1px;
  pointer-events: none;
}
.wave-divider svg { display: block; width: 100%; height: 100%; }
.wave-divider path { fill: var(--wave-fill, var(--wb-surface-tint)); }
.wave-divider.flip svg { transform: scaleX(-1); }