/* ==========================================================================
   Aquaycon landing page — 2026 refresh
   Design tokens → light+dark theme → modern components over Bootstrap 3 base.
   This file is appended AFTER bootstrap.min.css so the cascade favours it.
   ========================================================================== */

/* -------- 1. Design tokens (light only — dark mode removed per owner) -------- */
:root {
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-glass: rgba(255, 255, 255, 0.82);
  --color-text: #0f1824;
  --color-text-muted: #5a6a82;
  --color-text-inverse: #ffffff;
  --color-accent: #ff8c00;
  --color-accent-hover: #ff7a00;
  --color-accent-soft: rgba(255, 140, 0, 0.12);
  --color-secondary: #3fa7a8;
  --color-secondary-soft: rgba(63, 167, 168, 0.14);
  --color-border: rgba(15, 24, 36, 0.08);
  --color-shadow-sm: 0 2px 8px rgba(15, 24, 36, 0.04);
  --color-shadow: 0 10px 30px rgba(15, 24, 36, 0.06);
  --color-shadow-lg: 0 24px 48px rgba(15, 24, 36, 0.10);
  --color-shadow-accent: 0 8px 24px rgba(255, 140, 0, 0.28);
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  --tt-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --tt-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* -------- 2. Base -------- */
html { scroll-behavior: smooth; }

body.wrapper,
body {
  font-family: var(--font-sans);
  font-variant-ligatures: common-ligatures;
  font-feature-settings: "cv11";
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body h1, body h2, body h3, body h4, body h5 {
  font-family: var(--font-sans);
  color: var(--color-text);
  letter-spacing: -0.022em;
  font-weight: 700;
}
body p { color: var(--color-text); }
body a { color: var(--color-accent); transition: color var(--tt-base); }
body a:hover, body a:focus { color: var(--color-accent-hover); text-decoration: none; }

body img { max-width: 100%; height: auto; }

*:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* -------- 3. Buttons -------- */
.btn.btn-primary,
.btn-primary.btn-action,
.subscribe-form .submit-button {
  background: var(--color-accent) !important;
  border: none !important;
  color: #fff !important;
  padding: 13px 32px !important;
  border-radius: var(--radius-pill) !important;
  font-weight: 600 !important;
  letter-spacing: 0.005em;
  text-transform: none !important;
  transition: transform var(--tt-base), box-shadow var(--tt-base), background var(--tt-base);
  box-shadow: var(--color-shadow-accent);
  display: inline-block;
  text-shadow: none;
}
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn-primary.btn-action:hover,
.subscribe-form .submit-button:hover,
.subscribe-form .submit-button:focus {
  background: var(--color-accent-hover) !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(255, 140, 0, 0.38);
}
.btn.btn-primary:active,
.btn-primary.btn-action:active,
.subscribe-form .submit-button:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 4px 12px rgba(255, 140, 0, 0.28);
  transition-duration: 90ms;
}
.subscribe-form .submit-button {
  cursor: pointer;
  position: relative;
}
.subscribe-form .submit-button.is-loading {
  pointer-events: none;
  opacity: 0.85;
  color: transparent !important;
}
.subscribe-form .submit-button.is-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: aq-btn-spin 720ms linear infinite;
}
.subscribe-form .submit-button.is-success {
  background: #2ea05c !important;
  box-shadow: 0 12px 28px rgba(46, 160, 92, 0.32);
}
.subscribe-form .submit-button.is-error {
  background: #d23f3f !important;
  box-shadow: 0 12px 28px rgba(210, 63, 63, 0.32);
}
@keyframes aq-btn-spin {
  to { transform: rotate(360deg); }
}

/* -------- 4. Modern navbar --------
   Neutralise the legacy "effect-main" lift-on-scroll JS: pin it fixed,
   remove transforms. Solid translucent background (no backdrop-filter —
   that's the biggest scroll-jank source on fixed elements). */
.navbar.navbar-default.navbar-fixed-top,
.navbar.effect-main {
  background: rgba(255, 255, 255, 0) !important;
  border: none !important;
  border-bottom: 1px solid transparent !important;
  box-shadow: none;
  padding: 4px 0;
  z-index: 1000;
  top: 0 !important;
  transform: none !important;
  transition: background-color 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
  will-change: auto;
}
.navbar.navbar-default.is-scrolled {
  background: rgba(255, 255, 255, 0.96) !important;
  border-bottom-color: var(--color-border) !important;
  box-shadow: var(--color-shadow-sm);
}
.navbar.navbar-default { min-height: 72px !important; }
.navbar.navbar-default > .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
}
.navbar.navbar-default .navbar-header {
  float: none;
  display: flex;
  align-items: center;
  min-height: 72px;
}
.navbar.navbar-default .navbar-brand {
  height: auto;
  padding: 0 !important;
  display: flex;
  align-items: center;
}
.navbar.navbar-default .navbar-collapse.navbar-right {
  float: none !important;
  margin-left: auto !important;
  padding: 0;
  border-top: 0 !important;
  box-shadow: none;
}
.navbar.navbar-default .navbar-nav {
  float: none !important;
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 !important;
}
.navbar.navbar-default .navbar-nav > li {
  float: none !important;
  line-height: 1 !important;
}
.navbar.navbar-default .navbar-nav > li > a {
  color: rgba(255, 255, 255, 0.96) !important;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  border-radius: var(--radius-pill);
  padding: 10px 14px !important;
  margin: 0 !important;
  transition: background var(--tt-base), color var(--tt-base);
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.24);
}
.navbar.navbar-default .navbar-nav > li > a:hover,
.navbar.navbar-default .navbar-nav > li > a:focus {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.12);
}
.navbar.navbar-default.is-scrolled .navbar-nav > li > a {
  color: var(--color-text) !important;
  text-shadow: none;
}
.navbar.navbar-default.is-scrolled .navbar-nav > li > a:hover,
.navbar.navbar-default.is-scrolled .navbar-nav > li > a:focus {
  color: var(--color-accent) !important;
  background: var(--color-accent-soft);
}
.navbar.navbar-default .navbar-nav > li > a:focus,
.navbar.navbar-default .navbar-nav > li > a:active,
.navbar.navbar-default .navbar-nav > li > a:focus-visible,
.navbar.navbar-default .navbar-brand:focus,
.navbar.navbar-default .navbar-brand:active,
.navbar.navbar-default .navbar-brand:focus-visible,
.navbar-toggle:focus,
.navbar-toggle:active,
.navbar-toggle:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
}
.navbar-brand img.logo-img { display: block; max-height: 46px; margin: 0 !important; }
.navbar-toggle {
  border-color: rgba(255, 255, 255, 0.38) !important;
  margin-top: 0;
  margin-bottom: 0;
  background: rgba(255, 255, 255, 0.08) !important;
}
.navbar-toggle .icon-bar { background: #fff !important; }
.navbar.navbar-default.is-scrolled .navbar-toggle {
  border-color: var(--color-border) !important;
  background: transparent !important;
}
.navbar.navbar-default.is-scrolled .navbar-toggle .icon-bar {
  background: var(--color-text) !important;
}
@media (max-width: 767px) {
  .navbar.navbar-default { min-height: 64px !important; }
  .navbar.navbar-default > .container { display: block; min-height: 0; }
  .navbar.navbar-default .navbar-header {
    display: block;
    float: none;
    min-height: 64px;
  }
  .navbar.navbar-default .navbar-brand {
    height: 64px;
    padding: 10px 15px !important;
  }
  .navbar-brand img.logo-img { max-height: 42px; }
  .navbar-toggle { margin-top: 15px; }
  .navbar.navbar-default .navbar-collapse.navbar-right {
    margin-left: 0 !important;
    padding: 12px 0 16px;
    border-top: 1px solid var(--color-border) !important;
    background: rgba(255, 255, 255, 0.96);
    border-radius: 0 0 20px 20px;
  }
  .navbar.navbar-default .navbar-nav {
    display: block;
    padding: 0 8px;
  }
  .navbar.navbar-default .navbar-nav > li > a {
    color: var(--color-text) !important;
    text-shadow: none;
    margin: 4px 0 !important;
    padding: 12px 16px !important;
  }
}

/* Language pills */
.aq-lang-pill {
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em;
}
.aq-lang-pill.is-active {
  background: var(--color-accent) !important;
  color: #fff !important;
}

/* -------- 5. Hero — full-bleed image background, glass-card content inside.
   Layout strategy: the card lives inside a centered .container (Bootstrap's
   default centering) and uses normal flow positioning — no -110px shift,
   no 100vw-based margin calc. Padding-top + clamp() drive the visual
   spacing so the card stays inside the viewport on every breakpoint
   from ~320px up to ultra-wide 1920px+. */

.main.image-bg {
  position: relative;
  min-height: clamp(420px, 60vh, 640px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: var(--color-text-inverse);
  overflow: hidden;
  padding: clamp(70px, 9vw, 110px) 0 clamp(20px, 4vw, 48px);
  margin: 0;
  border-radius: 0;
  background-image: url('1.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  box-shadow: inset 0 -56px 64px -52px rgba(0, 0, 0, 0.42);
}
.main.image-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0.5) 100%);
  pointer-events: none;
  z-index: 1;
}
.main.image-bg .hero-section {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 !important;
  background: none !important;
  background-image: none !important;
}
/* Center via the Bootstrap container default (max-width: 1170px;
   margin: 0 auto) instead of a fragile 100vw-based offset. */
.main.image-bg .container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  left: auto;
}

/* Glass card — normal flow, no negative-left, width clamped so it
   never exceeds the container on any width. */
.main.image-bg .hero-content {
  text-align: left;
  width: 100%;
  max-width: 720px;
  margin: clamp(72px, 12vh, 150px) 0 0;
  position: relative;
  left: 0;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.main.image-bg .hero-content h1 {
  /* Scales smoothly from 26px (≈320px viewport) up to 42px (≥1200px). */
  font-size: clamp(1.625rem, 1.1rem + 1.6vw, 2.625rem) !important;
  font-weight: 800;
  line-height: 1.18;
  margin: 0 0 clamp(0.9rem, 1.4vw, 1.5rem) 0;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.3);
  max-width: 100%;
  word-break: break-word;
  hyphens: auto;
}
.hero-content .aq-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 16px;
}
.main.image-bg .hero-content .aq-lead {
  font-size: clamp(0.92rem, 0.84rem + 0.3vw, 1.04rem);
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
  max-width: 100%;
  margin: 0 0 clamp(18px, 2.5vw, 28px);
  word-break: break-word;
}
.main.image-bg .hero-content .btn.btn-primary {
  margin-top: 4px;
  white-space: normal;
  word-break: break-word;
}

/* Mid breakpoint (tablets / smaller laptops) — slightly smaller card
   max-width so the right side of the hero shows more of the image. */
@media (max-width: 1199.98px) {
  .main.image-bg .hero-content { max-width: 640px; }
}

/* Tablet portrait — center the card horizontally and slightly tighten
   the section min-height so we don't trap the user in a tall hero. */
@media (max-width: 991.98px) {
  .main.image-bg { min-height: clamp(380px, 56vh, 560px); }
  .main.image-bg .hero-content { max-width: 100%; }
}

/* Phone — full-width card, smaller padding, tighter min-height. */
@media (max-width: 575.98px) {
  .main.image-bg {
    min-height: clamp(360px, 64vh, 520px);
    padding: clamp(76px, 18vw, 96px) 0 24px;
    background-position: center center;
  }
  .main.image-bg .hero-content {
    margin-top: 56px;
    padding: 0 4px;
    border-radius: 0;
  }
  .main.image-bg .hero-content .btn.btn-primary {
    width: 100%;
    text-align: center;
  }
  .hero-content .aq-eyebrow {
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    padding: 5px 11px;
  }
}

/* -------- 6. Section base -------- */
.pitch,
section.pitch,
.app-features,
.cta-sub {
  padding: clamp(48px, 8vw, 96px) 0;
  background: var(--color-bg);
}
.pitch-intro {
  max-width: 780px;
  margin: 0 auto 40px !important;
  padding: 0 16px !important;
  text-align: center;
}
.pitch-intro h1 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  margin: 0 0 16px;
}

/* -------- 7. Slider — crossfade only, no continuous zoom/pan
   (Ken Burns on images contributed to scroll-time repaints; removed.) */
.carousel { margin: clamp(16px, 3vw, 32px) auto; box-shadow: var(--color-shadow-lg); }

/* -------- 8. Why Aqua Ycon — glass cards -------- */
.pitch .row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin: 0;
}
.pitch .row > [class*="col-"] {
  flex: 1 1 340px;
  max-width: 520px;
  padding: 0;
  opacity: 1 !important; /* override inline opacity-0 leftover from wow */
  visibility: visible !important;
}
.pitch .pitch-content {
  background: linear-gradient(180deg, rgba(255, 248, 240, 0.96), rgba(255, 242, 227, 0.94)) !important;
  backdrop-filter: saturate(140%) blur(18px);
  -webkit-backdrop-filter: saturate(140%) blur(18px);
  border: 1px solid rgba(255, 140, 0, 0.18);
  border-radius: var(--radius-lg);
  padding: 28px !important;
  text-align: left;
  box-shadow: 0 16px 34px rgba(180, 103, 16, 0.10);
  height: 100%;
  transition: transform var(--tt-slow), box-shadow var(--tt-slow), border-color var(--tt-base);
  position: relative;
  overflow: hidden;
}
.pitch .pitch-content::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 140, 0, 0.14), rgba(255, 193, 122, 0.05) 52%, transparent 100%);
  opacity: 1;
  transition: opacity var(--tt-slow);
  pointer-events: none;
}
.pitch .pitch-content:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px rgba(180, 103, 16, 0.16);
  border-color: rgba(255, 140, 0, 0.28);
}
.pitch .pitch-content:hover::before { opacity: 1; }
.pitch .pitch-content h1 {
  font-size: 1.4rem;
  margin: 0 0 10px;
  position: relative;
}
.pitch .pitch-content p {
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1.65;
  margin: 0;
  position: relative;
}
.pitch .pitch-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #ff8c00 0%, #f6b14a 100%);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  box-shadow: 0 10px 22px rgba(255, 140, 0, 0.28);
  overflow: hidden;                 /* belt-and-braces: nothing leaks out of the box */
  vertical-align: middle;
  line-height: 1;
  padding: 0;
  text-align: center;
  position: relative;
  z-index: 2;
}
.pitch .pitch-icon i,
.pitch .pitch-icon .fa {
  font-size: 20px !important;
  line-height: 1 !important;
  width: auto !important;
  height: auto !important;
  display: block;
  text-align: center;
  color: #fff;
}

/* Long-form "About us" content card */
.pitch .pitch-content.aq-prose {
  max-width: 820px;
  margin: 0 auto;
  text-align: left;
  padding: clamp(24px, 4vw, 40px) !important;
  background: #fff !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: var(--color-shadow) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.pitch .pitch-content.aq-prose::before {
  display: none;
}
.pitch .pitch-content.aq-prose p {
  font-size: 1.02rem;
  line-height: 1.7;
  margin-bottom: 16px;
}
.pitch .pitch-content.aq-prose hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: 20px 0;
}

/* -------- 9. Products bento grid -------- */
.app-features {
  background: linear-gradient(180deg, var(--color-bg) 0%, rgba(63, 167, 168, 0.06) 100%);
}
.aq-bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 160px;
  gap: 16px;
  max-width: 1100px;
  margin: 40px auto 0;
  padding: 0 16px;
}
.aq-bento-item {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--color-shadow);
  background: var(--color-surface);
  transition: transform var(--tt-slow), box-shadow var(--tt-slow);
}
.aq-bento-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--color-shadow-lg);
}
.aq-bento-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms ease;
}
.aq-bento-item:hover img { transform: scale(1.06); }
.aq-bento-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(5, 10, 20, 0.7) 100%);
  pointer-events: none;
}
.aq-bento-label {
  position: absolute;
  left: 18px;
  bottom: 14px;
  z-index: 2;
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  letter-spacing: -0.01em;
}
.aq-bento-item.is-wide { grid-column: span 4; grid-row: span 2; }
.aq-bento-item.is-tall { grid-column: span 2; grid-row: span 2; }
.aq-bento-item.is-sq   { grid-column: span 2; grid-row: span 1; }
@media (max-width: 768px) {
  .aq-bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; gap: 12px; }
  .aq-bento-item.is-wide, .aq-bento-item.is-tall, .aq-bento-item.is-sq {
    grid-column: span 2; grid-row: span 1;
  }
}

/* -------- 10. Registration section — legacy template set text to white;
               force theme-correct colours so copy is readable. -------- */
.cta-sub {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.26) 100%),
    url('1.jpg') center center / cover no-repeat !important;
  color: var(--color-text) !important;
}
.cta-sub .embed-responsive {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--color-shadow);
}
.cta-sub .cta-inner,
.cta-sub .cta-inner * { color: inherit; }
.cta-inner {
  padding: 28px;
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-lg);
  box-shadow: var(--color-shadow-lg);
}
.cta-inner h1 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin: 0 0 14px;
  max-width: none;
  word-break: normal;
  overflow-wrap: normal;
  color: var(--color-text) !important;
}
.cta-inner p,
.cta-inner #regid {
  color: var(--color-text-muted) !important;
}
.cta-inner #regid,
.aq-registration-copy {
  max-width: 38rem;
  margin: 0 0 24px;
  font-size: 1.02rem;
  line-height: 1.72;
  min-height: 9.5em;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  transition: color 240ms ease;
}
.cta-inner #regid.is-success { color: #2ea05c !important; font-weight: 600; }
.cta-inner #regid.is-error { color: #d23f3f !important; font-weight: 600; }
.aq-registration-copy-main { display: block; }
.aq-registration-note {
  display: inline-flex;
  align-items: center;
  margin-top: 16px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255, 140, 0, 0.12);
  color: var(--color-accent) !important;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.cta-inner form.subscribe-form {
  max-width: 480px;
  margin: 24px 0 0;
  gap: 10px;
}
.subscribe-form input.mail {
  border: 1px solid var(--color-border) !important;
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  border-radius: var(--radius-pill) !important;
  padding: 13px 22px !important;
  font-size: 0.96rem;
  transition: border-color var(--tt-base), box-shadow var(--tt-base);
  margin-right: 10px !important;
}
.subscribe-form input.mail:focus {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 4px var(--color-accent-soft);
  outline: none;
}
.subscribe-form .submit-button { padding: 13px 28px !important; font-size: 0.95rem; }
.aq-form-style-button {
  padding: 13px 28px !important;
  font-size: 0.95rem !important;
}
@media (max-width: 767px) {
  .cta-inner h1 { max-width: none; }
  .cta-inner form.subscribe-form { max-width: none; }
  .subscribe-form input.mail { margin-right: 0 !important; margin-bottom: 10px !important; }
  .cta-sub .row > .col-md-6.aq-reveal:first-child { margin-bottom: 20px; }
}

/* -------- 11. Footer -------- */
.footer {
  padding: clamp(32px, 5vw, 56px) 0 24px !important;
  background: var(--color-surface) !important;
  border-top: 1px solid var(--color-border);
}
.footer .contact h1 {
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  margin-bottom: 12px;
}
.footer .contact p { color: var(--color-text-muted); line-height: 1.6; }
.footer .contact a { font-weight: 600; }

/* -------- 12. Import section (when shown) -------- */
#imports .pitch-content { max-width: 860px; margin: 0 auto; }
#imports .custom-link {
  display: inline-block;
  padding: 10px 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-accent) !important;
  font-weight: 600;
  transition: all var(--tt-base);
  margin: 4px;
}
#imports .custom-link:hover {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

/* -------- 13. Wow-class cleanup (no wow.js is loaded) -------- */
.wow { opacity: 1 !important; visibility: visible !important; }

/* -------- 14. Scroll-driven reveal (modern browsers) -------- */
.aq-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms cubic-bezier(0.4, 0, 0.2, 1), transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.aq-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@supports (animation-timeline: view()) {
  .aq-reveal:not(.is-visible) {
    animation: aq-reveal-kf both linear;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }
  @keyframes aq-reveal-kf {
    to { opacity: 1; transform: translateY(0); }
  }
}

/* -------- 14b. Scroll perf — skip rendering off-screen sections -------- */
.pitch,
.app-features,
.cta-sub,
.footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 800px;
}

/* -------- 15. Misc leftovers cleanup -------- */
.cta-sub.no-color { background: var(--color-bg); }
.pitch-content[style*="background-color: #f8f9fa"],
.pitch-content[style*="background-color: #fff"] {
  background: var(--color-surface-glass) !important;
}
/* Kill inline opacity:0 !important left over from wow.js */
h1[style*="opacity: 0"],
p[style*="opacity: 0"] { opacity: 1 !important; }