/* ==========================================================================
   Frank's Mobile Auto — Demo site stylesheet (Draft 1)
   --------------------------------------------------------------------------
   Structure:
     1.  Design tokens (CSS custom properties)
     2.  Base / reset
     3.  Reusable utilities (container, section, buttons, neon helpers)
     4.  Header / nav
     5.  Footer
     6.  Hero (home)
     7.  Home sections (intro, services, highlights)
     8.  About page
     9.  Contact page (info grid, form, image)
     10. Promo popup (modal)
     11. Bottom deal banner
     12. Responsive tweaks
   Accent system: a blue "neon LED" gradient sampled from the business card:
     #5B8FA5 (deep) -> #81A9BA (mid) -> #D6FBFF (bright cyan glow highlight).
   Glow is applied via box-shadow / text-shadow / drop-shadow, kept subtle so
   it reads as a soft neon on white rather than a flat fill.
   ========================================================================== */

/* 1. ---------------------------------------------------------------- TOKENS */
:root {
  /* Brand blues */
  --blue-deep: #5B8FA5;
  --blue-mid:  #81A9BA;
  --cyan-glow: #D6FBFF;

  /* The signature neon gradient (deep -> mid -> bright highlight) */
  --neon-gradient: linear-gradient(135deg, #5B8FA5 0%, #81A9BA 55%, #D6FBFF 100%);
  --neon-gradient-soft: linear-gradient(135deg, #5B8FA5 0%, #81A9BA 100%);

  /* Glow shadows */
  --glow-sm: 0 0 8px rgba(129, 169, 186, 0.45);
  --glow-md: 0 0 18px rgba(129, 169, 186, 0.55), 0 0 4px rgba(214, 251, 255, 0.65);
  --glow-lg: 0 0 32px rgba(129, 169, 186, 0.55), 0 0 10px rgba(214, 251, 255, 0.55);

  /* Neutrals */
  --white: #ffffff;
  --ink: #1a2127;          /* primary text */
  --ink-soft: #4a5560;     /* secondary text */
  --line: #e6ebee;         /* hairline borders */
  --surface: #f6f9fb;      /* very light blue-grey panels */
  --dark: #11171c;         /* dark chips (logo backdrop / footer) */

  /* Type */
  --font-sans: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;

  /* Layout */
  --maxw: 1140px;
  --radius: 14px;
  --radius-lg: 22px;

  /* Spacing for fixed bottom banner so content never hides behind it */
  --banner-h: 92px;
}

/* 2. ------------------------------------------------------------------ BASE */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* leave room for the persistent bottom banner */
  padding-bottom: var(--banner-h);
}

img { max-width: 100%; display: block; }

h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; font-weight: 800; letter-spacing: -0.02em; }
h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
h3 { font-size: 1.2rem; }
p  { margin: 0 0 1rem; color: var(--ink-soft); }

a { color: var(--blue-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

/* 3. ------------------------------------------------------------- UTILITIES */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 22px; }

.section { padding: clamp(48px, 7vw, 88px) 0; }
.section--tint { background: var(--surface); }

.eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue-deep);
  margin-bottom: .6rem;
}

.lead { font-size: 1.15rem; color: var(--ink-soft); max-width: 60ch; }

.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }

/* Gradient text used for key headings/words */
.neon-text {
  background: var(--neon-gradient-soft);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* faint glow behind the gradient text */
  filter: drop-shadow(0 0 10px rgba(129, 169, 186, 0.35));
}

/* Buttons ------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 26px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }

/* Primary: the glowing neon button */
.btn--primary {
  background: var(--neon-gradient);
  color: #0f2027;
  box-shadow: var(--glow-md);
}
.btn--primary:hover { box-shadow: var(--glow-lg); filter: saturate(1.08); }

/* Secondary: outlined, glows on hover */
.btn--ghost {
  background: rgba(255, 255, 255, 0.06);
  color: var(--white);
  border: 1.5px solid rgba(214, 251, 255, 0.6);
  box-shadow: var(--glow-sm);
}
.btn--ghost:hover { box-shadow: var(--glow-md); background: rgba(214, 251, 255, 0.12); }

/* Outline button for use on white backgrounds */
.btn--outline {
  background: var(--white);
  color: var(--blue-deep);
  border: 1.5px solid var(--blue-mid);
}
.btn--outline:hover { box-shadow: var(--glow-sm); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* A thin neon divider bar */
.neon-bar {
  height: 4px;
  width: 72px;
  border-radius: 999px;
  background: var(--neon-gradient);
  box-shadow: var(--glow-md);
  margin: 0 0 1.4rem;
}
.neon-bar--center { margin-inline: auto; }

/* 4. -------------------------------------------------------------- HEADER */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 70px;
}

/* Logo chip: dark rounded backdrop so the dark-bg logo art sits cleanly on white */
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand:hover { text-decoration: none; }
.brand__logo {
  height: 50px;
  width: 50px;
  object-fit: cover;
  border-radius: 12px;
  background: var(--dark);
  box-shadow: var(--glow-sm);
}
.brand__name {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.brand__name span { display: block; font-size: .72rem; font-weight: 600; color: var(--blue-deep); letter-spacing: .06em; }

/* Nav */
.nav { display: flex; align-items: center; gap: 26px; }
.nav a {
  color: var(--ink);
  font-weight: 600;
  font-size: .98rem;
  position: relative;
}
.nav a:hover { color: var(--blue-deep); text-decoration: none; }
.nav a.is-active { color: var(--blue-deep); }
.nav a.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -22px;
  height: 3px;
  background: var(--neon-gradient);
  box-shadow: var(--glow-sm);
  border-radius: 3px;
}
.nav__cta { margin-left: 4px; }

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  background: none;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  width: 44px; height: 44px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  display: block;
  width: 20px; height: 2px;
  background: var(--ink);
  position: relative;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after  { position: absolute; top: 6px; }

/* 5. -------------------------------------------------------------- FOOTER */
.site-footer {
  background: var(--dark);
  color: #cdd6db;
  padding: 48px 0 40px;
}
.site-footer a { color: var(--cyan-glow); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 32px;
}
.site-footer h4 { color: var(--white); font-size: 1rem; margin: 0 0 .8rem; }
.site-footer p, .site-footer li { color: #aab6bd; font-size: .95rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .4rem; }
.footer-brand__logo {
  height: 56px; width: 56px; border-radius: 12px; object-fit: cover;
  box-shadow: var(--glow-sm); margin-bottom: 12px;
}
.footer-bottom {
  margin-top: 34px; padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: .82rem; color: #87949c;
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between;
}
.footer-disclaimer { color: var(--cyan-glow); font-weight: 600; }

/* 6. ----------------------------------------------------------------- HERO */
.hero {
  position: relative;
  min-height: clamp(400px, 58vh, 540px);
  display: flex;
  align-items: center;
  color: var(--white);
  overflow: hidden;
}
.hero__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* dark + blue gradient wash for legibility and brand feel */
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 14, 18, 0.55) 0%, rgba(8, 14, 18, 0.35) 40%, rgba(8, 14, 18, 0.72) 100%),
    radial-gradient(120% 80% at 15% 30%, rgba(91, 143, 165, 0.55) 0%, rgba(17, 23, 28, 0) 60%);
  z-index: 1;
}
.hero__inner { position: relative; z-index: 2; padding: 72px 0; max-width: 760px; }
.hero h1 { color: var(--white); text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5); }
.hero h1 .neon-text { filter: drop-shadow(0 0 16px rgba(214, 251, 255, 0.55)); }
.hero__tagline {
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  color: #eaf6fa;
  margin-bottom: 1.8rem;
  max-width: 56ch;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}
.hero__badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.hero__badge {
  font-size: .82rem; font-weight: 600;
  padding: 7px 14px; border-radius: 999px;
  background: rgba(17, 23, 28, 0.45);
  border: 1px solid rgba(214, 251, 255, 0.4);
  color: #eaf6fa;
  backdrop-filter: blur(4px);
}

/* 7. ------------------------------------------------------- HOME SECTIONS */
/* Intro split with logo */
.intro-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.9fr;
  gap: clamp(28px, 5vw, 60px);
  align-items: center;
}
.intro-logo {
  background: var(--dark);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--glow-md);
  display: grid;
  place-items: center;
}
.intro-logo img { border-radius: 14px; }

/* Services */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin-top: 8px;
}
.service-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 22px;
  transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--glow-md);
  border-color: var(--blue-mid);
}
/* Neon top-bar accent on each card (replaced the former emoji icon) */
.service-card::before {
  content: "";
  display: block;
  width: 38px; height: 4px;
  border-radius: 999px;
  background: var(--neon-gradient);
  box-shadow: var(--glow-sm);
  margin-bottom: 16px;
}
.service-card h3 { margin-bottom: .25rem; }
.service-card p { margin: 0; font-size: .95rem; }

/* Highlights row */
.highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}
.highlight {
  text-align: center;
  padding: 28px 18px;
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--line);
}
.highlight__num {
  font-size: 2rem; font-weight: 800;
  background: var(--neon-gradient-soft);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 8px rgba(129, 169, 186, 0.3));
}
.highlight p { margin: .3rem 0 0; font-weight: 600; color: var(--ink); }
.highlight small { color: var(--ink-soft); font-weight: 500; }

/* CTA strip */
.cta-strip {
  background: var(--dark);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: clamp(32px, 5vw, 56px);
  text-align: center;
  box-shadow: var(--glow-md);
  position: relative;
  overflow: hidden;
}
.cta-strip::before {
  content: "";
  position: absolute; inset: -2px;
  background: radial-gradient(60% 120% at 50% 0%, rgba(129, 169, 186, 0.35), transparent 60%);
  pointer-events: none;
}
.cta-strip h2 { color: var(--white); position: relative; }
.cta-strip p { color: #c8d3d9; position: relative; }
.cta-strip .btn-row { position: relative; justify-content: center; }

/* 8. ------------------------------------------------------------- ABOUT */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
}
.spec-list { list-style: none; margin: 0; padding: 0; }
.spec-list li {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  display: flex; gap: 12px; align-items: flex-start;
  color: var(--ink);
}
/* Neon dot marker (replaced the former ✓ glyph) */
.spec-list li::before {
  content: "";
  flex: 0 0 auto;
  width: 8px; height: 8px;
  margin-top: 9px;
  border-radius: 50%;
  background: var(--neon-gradient);
  box-shadow: var(--glow-sm);
}

/* Hours table */
.hours-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
}
.hours-list { list-style: none; margin: 0; padding: 0; }
.hours-list li {
  display: flex; justify-content: space-between;
  padding: 9px 0; border-bottom: 1px dashed var(--line);
  font-size: .98rem;
}
.hours-list li:last-child { border-bottom: 0; }
.hours-list .day { font-weight: 600; color: var(--ink); }
.hours-list .closed { color: #b04545; font-weight: 600; }

/* tag chips for service list on about */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.chip {
  font-size: .9rem; font-weight: 600; color: var(--ink);
  padding: 8px 16px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
}
.chip:hover { border-color: var(--blue-mid); box-shadow: var(--glow-sm); }

/* 9. ----------------------------------------------------------- CONTACT */
/* Title band: contact photo sits behind the heading only, with a dark overlay
   so the title stays legible. The rest of the page is normal white background. */
.contact-hero {
  position: relative;
  overflow: hidden;
  color: var(--white);
  display: flex;
  align-items: center;
  min-height: clamp(220px, 34vh, 320px);
}
.contact-hero__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.contact-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8, 12, 15, 0.66) 0%, rgba(8, 12, 15, 0.80) 100%);
  z-index: 1;
}
.contact-hero__inner { position: relative; z-index: 2; padding: 40px 0; }
.contact-hero .eyebrow { color: var(--cyan-glow); }
.contact-hero h2 { color: var(--white); text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5); }

/* Single-column stack so the form is reached quickly: paragraph -> form -> details */
.contact-stack { max-width: 720px; }
.contact-stack .lead { max-width: none; margin-bottom: 1.6rem; }
.contact-stack .info-list { margin: 28px 0 0; }

.info-list { list-style: none; margin: 0 0 24px; padding: 0; }
.info-list li { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line); }
/* Small neon dot marker (replaced the former emoji icon box) */
.info-ico {
  flex: 0 0 auto;
  width: 10px; height: 10px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--neon-gradient); box-shadow: var(--glow-sm);
}
.info-list .label { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); margin: 0; }
.info-list .value { font-weight: 700; color: var(--ink); margin: 0; }
.info-list .value a { color: var(--ink); }
.info-list .value a:hover { color: var(--blue-deep); }

/* Form */
.contact-form {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 4vw, 34px);
  box-shadow: 0 8px 30px rgba(17, 23, 28, 0.06);
}
.form-row { margin-bottom: 16px; }
.form-row label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 6px; color: var(--ink); }
.form-row input,
.form-row textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-row input:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--blue-mid);
  box-shadow: var(--glow-sm);
}
.form-row textarea { resize: vertical; min-height: 130px; }
.form-note { font-size: .82rem; color: var(--ink-soft); margin-top: 10px; }

/* Confirmation message shown after demo "submit" */
.form-confirm {
  display: none;
  margin-top: 18px;
  padding: 18px 20px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1.5px solid var(--blue-mid);
  box-shadow: var(--glow-sm);
  color: var(--ink);
}
.form-confirm.is-visible { display: block; animation: fadeUp .3s ease; }
.form-confirm strong { color: var(--blue-deep); }

/* 10. ------------------------------------------------------- PROMO POPUP */
/* Draft 2: neutral styling only (black / white / grey) — no brand blue here. */
.modal-overlay {
  position: fixed; inset: 0;
  z-index: 100;
  background: rgba(8, 10, 12, 0.72);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay.is-open { display: flex; animation: fadeIn .25s ease; }

.modal {
  position: relative;
  width: 100%;
  max-width: 400px;            /* smaller than Draft 1 (was 480) */
  background: #1a1d21;
  color: var(--white);
  border-radius: var(--radius);
  padding: 26px 24px 22px;     /* tighter padding */
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55);
  animation: fadeUp .3s ease;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
.modal__close {
  position: absolute; top: 10px; right: 10px;
  width: 34px; height: 34px; border-radius: 9px;
  background: rgba(255, 255, 255, 0.08);
  border: 0; color: var(--white); font-size: 1.25rem; cursor: pointer; line-height: 1;
}
.modal__close:hover { background: rgba(255, 255, 255, 0.18); }
.modal__tag {
  display: inline-block; font-size: .7rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: #d6d9dc; padding: 4px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.1); margin-bottom: 12px;
}
.modal h2 { color: var(--white); font-size: 1.4rem; margin-bottom: .3rem; }
.modal__price { margin: 8px 0 4px; }
.modal__price .old { color: #8c9298; text-decoration: line-through; font-size: 1.15rem; font-weight: 600; margin-right: 9px; }
.modal__price .new { font-size: 2.1rem; font-weight: 800; color: var(--white); }
.modal__care { color: #c4c9cd; margin: 2px 0 14px; font-size: .95rem; }
.modal__care b { color: var(--white); }

/* Countdown (neutral) */
.countdown { display: flex; justify-content: center; gap: 8px; margin: 6px 0 14px; }
.countdown__unit {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  padding: 9px 5px;
  min-width: 54px;
}
.countdown__num {
  font-size: 1.5rem; font-weight: 800; line-height: 1;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.countdown__label { font-size: .64rem; text-transform: uppercase; letter-spacing: .08em; color: #9aa0a6; margin-top: 5px; }
.modal__deadline { font-size: .82rem; color: #9aa0a6; margin: 4px 0 16px; }
.modal__deadline b { color: #d6d9dc; }

/* Neutral CTA button inside the popup (overrides the brand neon button) */
.modal__call {
  display: block; width: 100%; justify-content: center;
  background: var(--white); color: #15181b;
  box-shadow: none; border: 0;
}
.modal__call:hover { background: #e9ebed; box-shadow: none; filter: none; }
.modal__dismiss {
  display: block; width: 100%; margin-top: 10px;
  background: none; border: 0; color: #9aa0a6; cursor: pointer;
  font: inherit; font-size: .88rem; text-decoration: underline;
}
.modal__dismiss:hover { color: var(--white); }

/* 11. -------------------------------------------------------- BOTTOM BANNER */
/* Draft 2: neutral styling only (black / white / grey) — no brand blue here. */
.deal-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  background: rgba(20, 23, 26, 0.98);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.35);
  color: var(--white);
}
.deal-banner__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 22px;
  max-width: var(--maxw);
  margin-inline: auto;
}
.deal-banner__deal { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.deal-banner__line1 { font-weight: 700; font-size: .98rem; }
.deal-banner__line1 .old { text-decoration: line-through; color: #8c9298; font-weight: 600; margin-right: 6px; }
.deal-banner__line1 .new { color: var(--white); }
.deal-banner__line2 { font-size: .8rem; color: #aab0b5; }
.deal-banner__line2 .demo-note { color: #d6d9dc; font-weight: 600; }
.deal-banner__contact {
  flex: 0 0 auto;
  text-align: right;
  white-space: nowrap;
}
.deal-banner__contact a {
  font-weight: 800; font-size: 1.1rem; color: var(--white);
  font-variant-numeric: tabular-nums;
}
.deal-banner__contact a:hover { text-decoration: underline; }
.deal-banner__contact small { display: block; font-size: .62rem; font-weight: 600; color: #9aa0a6; letter-spacing: .06em; text-transform: uppercase; }
/* Minimize/expand toggle — desktop hides it; only shown on mobile (see 620px query) */
.deal-banner__toggle { display: none; }

/* 12. ------------------------------------------------------------ ANIMATIONS */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* 13. ------------------------------------------------------------ RESPONSIVE */
@media (max-width: 860px) {
  /* show hamburger, hide inline nav until toggled */
  .nav-toggle { display: inline-flex; }
  .nav {
    position: absolute;
    top: 70px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    padding: 8px 22px 18px;
    box-shadow: 0 12px 24px rgba(17, 23, 28, 0.08);
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .nav a.is-active::after { display: none; }
  .nav__cta { margin: 12px 0 0; }
  .nav__cta .btn { width: 100%; justify-content: center; }

  .intro-grid,
  .about-grid,
  .contact-grid { grid-template-columns: 1fr; }
  .intro-logo { order: -1; }

  .footer-grid { grid-template-columns: 1fr; gap: 26px; }
}

@media (max-width: 640px) {
  /* Services: smaller squares, 2 columns x 4 rows (same rounded corners) */
  .services-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .service-card { padding: 16px 14px; }
  .service-card::before { width: 28px; margin-bottom: 12px; }
  .service-card h3 { font-size: 1.02rem; }
  .service-card p { font-size: .85rem; }

  /* Logo: small, tucked into the top-left corner just under the hero image */
  .intro-logo {
    order: -1;
    justify-self: start;
    width: auto;
    max-width: 120px;
    padding: 12px;
    margin: 0 0 4px;
    place-items: start;
    box-shadow: var(--glow-sm);
  }
  .intro-logo img { max-width: 90px; }
}

@media (max-width: 620px) {
  :root { --banner-h: 150px; }   /* banner stacks taller on small screens */
  .deal-banner__inner { flex-wrap: wrap; gap: 8px; padding: 10px 44px 10px 16px; } /* right pad clears the toggle */
  .deal-banner__deal { flex: 1 1 100%; }
  .deal-banner__contact { flex: 1 1 100%; text-align: left; }

  /* --- Minimize/expand toggle (mobile only) --- */
  .deal-banner__toggle {
    display: inline-flex;
    align-items: center; justify-content: center;
    position: absolute;
    top: 8px; right: 10px;
    width: 30px; height: 30px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--white);
    font-size: 1.4rem; line-height: 1;
    cursor: pointer;
    z-index: 1;
  }
  .deal-banner__toggle:hover { background: rgba(255, 255, 255, 0.12); }

  /* Collapsible pieces: the demo note and the contact block slide closed.
     The launch-offer line + "valid only…" text stay visible when minimized. */
  .deal-banner__line2 .demo-note { display: block; margin-top: 2px; }
  .deal-banner__contact,
  .deal-banner__line2 .demo-note {
    overflow: hidden;
    max-height: 60px; opacity: 1;
    transition: max-height .35s ease, opacity .3s ease, margin .35s ease;
  }
  .deal-banner.is-minimized .deal-banner__inner { gap: 0; }
  .deal-banner.is-minimized .deal-banner__contact,
  .deal-banner.is-minimized .deal-banner__line2 .demo-note {
    max-height: 0; opacity: 0; margin: 0; pointer-events: none;
  }

  /* Reclaim the reserved bottom space as the banner shrinks (smooth page slide) */
  body { transition: padding-bottom .35s ease; }
  body:has(.deal-banner.is-minimized) { padding-bottom: 88px; }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}