/* ==========================================================================
   QA Arena — shared site stylesheet
   --------------------------------------------------------------------------
   Extracted from the design language already in app/public/index.html so the
   newer pages (Resources, product pages, Career Services, the Free QA Roadmap
   funnel) don't each carry their own copy of the same 500 lines.
   index.html keeps its own inline <style> block — this file deliberately does
   not try to restyle it, it only has to MATCH it.

   Tokens, type scale, buttons, cards and breakpoints are all lifted verbatim
   from index.html. Breakpoints: 1024px (tablet), 768px (mobile), 480px.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --brand: #8822dd;
  --brand-light: #aa44ff;
  --pink: #dd22aa;
  --hero-bg: #080e1f;
  --hero-mid: #0d1630;
  --off-white: #f4f1fa;
  --light-bg: #faf9fc;
  --border: #e2d5f5;
  --dark: #1a0d2e;
  --muted: #6b5a85;
  --text-dim: rgba(255, 255, 255, 0.45);
  --green: #16a34a;
  --amber: #d97706;
  --red: #dc2626;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--light-bg);
  color: var(--dark);
  line-height: 1.6;
  overflow-x: hidden;
}

a { color: inherit; }
img { max-width: 100%; }

/* Visible focus ring for keyboard users. The site had none; without it the
   new dropdown/drawer navigation is unusable without a mouse. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--brand-light);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  background: var(--brand);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 8px 0;
  font-size: 14px;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ==========================================================================
   NAV — matches index.html, plus dropdown + mobile drawer
   ========================================================================== */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 56px;
  height: 68px;
  background: rgba(8, 14, 31, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.3s;
}
.nav.is-scrolled {
  background: rgba(8, 14, 31, 0.98);
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.4);
}

.nav-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.nav-brand img { width: 32px; height: 32px; object-fit: contain; }
.nav-name { font-family: 'DM Serif Display', serif; font-size: 22px; color: #fff; letter-spacing: -0.3px; }
.nav-name span { color: var(--brand-light); }

.nav-links { display: flex; gap: 36px; list-style: none; align-items: center; margin: 0; }
.nav-links > li { position: relative; }
.nav-links a {
  font-size: 14px;
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.2s;
}
.nav-links a:hover,
.nav-links li.active > a { color: #fff; }

/* --- Dropdown ------------------------------------------------------------ */
.nav-dd-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: inherit;
  font-size: 14px;
  color: var(--text-dim);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s;
}
.nav-dd-toggle:hover,
.nav-dd-toggle[aria-expanded="true"] { color: #fff; }
.nav-dd-toggle .nav-dd-caret {
  width: 10px; height: 10px;
  transition: transform 0.2s;
  flex-shrink: 0;
}
.nav-dd-toggle[aria-expanded="true"] .nav-dd-caret { transform: rotate(180deg); }

.nav-dd-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 230px;
  background: #0d1630;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 8px;
  list-style: none;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
}
/* A small invisible bridge so the pointer can travel from the toggle to the
   menu across the 14px gap without the menu closing. */
.nav-dd-menu::before {
  content: '';
  position: absolute;
  top: -14px; left: 0; right: 0;
  height: 14px;
}
.nav-dd.is-open .nav-dd-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav-dd-menu li { display: block; }
.nav-dd-menu a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  transition: background 0.15s, color 0.15s;
}
.nav-dd-menu a:hover { background: rgba(136, 34, 221, 0.22); color: #fff; }
.nav-dd-menu .nav-dd-desc {
  display: block;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.38);
  margin-top: 2px;
  line-height: 1.45;
}

.nav-right { display: flex; gap: 12px; align-items: center; }
.nav-login { font-size: 14px; color: var(--text-dim); text-decoration: none; transition: color 0.2s; }
.nav-login:hover { color: #fff; }
.nav-cta {
  font-size: 14px; font-weight: 500;
  padding: 8px 22px;
  background: linear-gradient(135deg, var(--brand), var(--pink));
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(136, 34, 221, 0.35);
  transition: opacity 0.2s, transform 0.2s;
  white-space: nowrap;
}
.nav-cta:hover { opacity: 0.88; transform: translateY(-1px); }

/* --- Mobile drawer ------------------------------------------------------- */
/* index.html previously just hid the nav links below 768px, which left phone
   visitors with no way to reach anything. Same drawer mechanics as the admin
   and portal sidebars so the behaviour is consistent across the app. */
.nav-burger {
  display: none;
  width: 38px; height: 38px;
  align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9px;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-burger span {
  display: block;
  position: relative;
  width: 16px; height: 1.5px;
  background: #fff;
  transition: background 0.2s;
}
.nav-burger span::before,
.nav-burger span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 16px; height: 1.5px;
  background: #fff;
  transition: transform 0.24s;
}
.nav-burger span::before { top: -5px; }
.nav-burger span::after { top: 5px; }
.nav-burger[aria-expanded="true"] span { background: transparent; }
.nav-burger[aria-expanded="true"] span::before { transform: translateY(5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span::after { transform: translateY(-5px) rotate(-45deg); }

.nav-drawer {
  position: fixed;
  top: 0; right: 0;
  width: 320px; max-width: 86vw;
  height: 100vh;
  z-index: 201;
  background: #0b1224;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 84px 22px 32px;
  display: none;
}
.nav-drawer.is-open { transform: translateX(0); }
.nav-drawer-group { margin-bottom: 22px; }
.nav-drawer-label {
  font-size: 11px; font-weight: 600;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.34);
  margin-bottom: 10px;
}
.nav-drawer a {
  display: block;
  padding: 12px 12px;
  border-radius: 9px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
}
.nav-drawer a:hover, .nav-drawer a:active { background: rgba(136, 34, 221, 0.2); color: #fff; }
.nav-drawer .nav-drawer-sub {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.36);
  display: block;
  margin-top: 2px;
}
.nav-drawer-cta {
  display: block;
  text-align: center;
  margin-top: 8px;
  padding: 13px;
  background: linear-gradient(135deg, var(--brand), var(--pink));
  color: #fff !important;
  border-radius: 10px;
  font-weight: 500;
  text-decoration: none;
}
.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s;
  display: none;
}
.nav-backdrop.is-open { opacity: 1; visibility: visible; }
body.nav-locked { overflow: hidden; }

/* ==========================================================================
   PAGE SHELL
   ========================================================================== */

.page-main { padding-top: 68px; }

.page-hero {
  background: linear-gradient(160deg, var(--hero-bg), var(--hero-mid));
  padding: 72px 56px 64px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(136, 34, 221, 0.22), transparent 62%);
  pointer-events: none;
}
.page-hero > * { position: relative; z-index: 1; }
.page-hero h1 {
  font-family: 'DM Serif Display', serif;
  font-size: 46px;
  color: #fff;
  letter-spacing: -1px;
  line-height: 1.15;
  margin-bottom: 14px;
}
.page-hero h1 em { font-style: italic; color: var(--brand-light); }
.page-hero-sub {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.55);
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.7;
}

.section { padding: 72px 56px; }
.section-alt { background: var(--off-white); }
.section-inner { max-width: 1100px; margin: 0 auto; }

.section-header { text-align: center; margin-bottom: 48px; }
.section-label {
  font-size: 11px; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 12px;
}
.section-title {
  font-family: 'DM Serif Display', serif;
  font-size: 38px;
  color: var(--dark);
  letter-spacing: -1px;
  line-height: 1.2;
}
.section-title em { font-style: italic; color: var(--brand); }
.section-sub {
  font-size: 15px;
  color: var(--muted);
  max-width: 600px;
  margin: 12px auto 0;
  line-height: 1.7;
}

/* Left-aligned section header variant used where a grid follows directly. */
.section-header-left { text-align: left; }
.section-header-left .section-sub { margin-left: 0; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  padding: 12px 26px;
  border-radius: 9px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s, background 0.2s;
  line-height: 1.2;
}
.btn-primary {
  background: linear-gradient(135deg, var(--brand), var(--pink));
  color: #fff;
  box-shadow: 0 6px 24px rgba(136, 34, 221, 0.3);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(136, 34, 221, 0.4); }
.btn-primary:disabled { opacity: 0.55; cursor: default; transform: none; box-shadow: none; }
.btn-secondary {
  background: #fff;
  color: var(--dark);
  border: 1px solid var(--border);
}
.btn-secondary:hover { border-color: rgba(136, 34, 221, 0.4); }
.btn-ghost-dark {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.btn-ghost-dark:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.3); }
.btn-block { display: flex; width: 100%; }
.btn-sm { font-size: 13px; padding: 9px 18px; }

/* ==========================================================================
   PRODUCT / RESOURCE CARDS
   ========================================================================== */

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.card-grid-2 { grid-template-columns: repeat(2, 1fr); }

.pcard {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
  position: relative;
}
.pcard:hover {
  transform: translateY(-4px);
  border-color: rgba(136, 34, 221, 0.3);
  box-shadow: 0 16px 44px rgba(136, 34, 221, 0.13);
}
.pcard-cover {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--off-white);
  border-bottom: 1px solid var(--border);
}
/* No cover image configured → a branded gradient panel with the product's
   initial, never an empty broken <img>. */
.pcard-cover-fallback {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--brand), var(--pink));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Serif Display', serif;
  font-size: 40px;
  color: rgba(255, 255, 255, 0.92);
}
.pcard-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.pcard-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; flex-wrap: wrap; }
.pcard h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 8px;
  line-height: 1.35;
}
.pcard p {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: 18px;
  flex: 1;
}
.pcard-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.pill {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
}
.pill-free { background: #f0fdf4; color: var(--green); border: 1px solid #bbf7d0; }
.pill-paid { background: rgba(136, 34, 221, 0.08); color: var(--brand); border: 1px solid rgba(136, 34, 221, 0.22); }
.pill-service { background: #fffbeb; color: var(--amber); border: 1px solid #fde68a; }
.pill-soon { background: var(--off-white); color: var(--muted); border: 1px solid var(--border); }
.pill-featured { background: linear-gradient(135deg, var(--brand), var(--pink)); color: #fff; }

.price {
  font-family: 'DM Serif Display', serif;
  font-size: 22px;
  color: var(--dark);
  line-height: 1;
}
.price-was {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: var(--muted);
  text-decoration: line-through;
  margin-left: 7px;
}
.price-free { color: var(--green); }

/* Empty state — shown when a Resources category has no live products yet, so
   the grid never collapses into a blank hole. */
.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 44px 24px;
  background: #fff;
  border: 1px dashed var(--border);
  border-radius: 16px;
}
.empty-state-title { font-size: 15px; font-weight: 600; color: var(--dark); margin-bottom: 6px; }
.empty-state-sub { font-size: 13.5px; color: var(--muted); line-height: 1.6; max-width: 420px; margin: 0 auto; }

/* ==========================================================================
   FORMS
   ========================================================================== */

.form-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 32px;
  box-shadow: 0 4px 40px rgba(136, 34, 221, 0.07);
}
.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 7px;
}
.field label .req { color: var(--pink); margin-left: 3px; }
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
  width: 100%;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--dark);
  font-family: inherit;
  /* 16px keeps iOS Safari from zooming the viewport when a field is focused. */
  font-size: 16px;
  padding: 12px 14px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(136, 34, 221, 0.1);
}
.field input.is-invalid, .field select.is-invalid, .field textarea.is-invalid {
  border-color: var(--red);
  background: rgba(220, 38, 38, 0.03);
}
.field textarea { resize: vertical; min-height: 96px; }
.field-hint { font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.5; }
.field-error { font-size: 12.5px; color: var(--red); margin-top: 6px; display: none; }
.field-error.show { display: block; }

.field-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  font-weight: 400;
}
.field-consent input[type="checkbox"] {
  width: 17px; height: 17px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--brand);
  cursor: pointer;
}

/* Honeypot: off-screen rather than display:none, because some bots skip
   hidden inputs but fill positioned ones. Never focusable by a real user. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-alert {
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13.5px;
  margin-bottom: 18px;
  display: none;
  line-height: 1.55;
}
.form-alert.show { display: block; }
.form-alert-error { background: #fef2f2; color: var(--red); border: 1px solid #fecaca; }
.form-alert-success { background: #f0fdf4; color: var(--green); border: 1px solid #bbf7d0; }

/* Post-submit success panel */
.success-panel { display: none; text-align: center; padding: 16px 0; }
.success-panel.is-active { display: block; }
.success-check {
  width: 62px; height: 62px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--pink));
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  color: #fff; font-size: 28px;
}
.success-title {
  font-family: 'DM Serif Display', serif;
  font-size: 28px;
  color: var(--dark);
  margin-bottom: 10px;
}
.success-body { font-size: 15px; color: var(--muted); line-height: 1.7; max-width: 440px; margin: 0 auto; }

/* ==========================================================================
   CROSS-SELL STRIP (routes visitors toward Career Launch)
   ========================================================================== */

.crosssell {
  background: linear-gradient(135deg, var(--hero-bg), var(--hero-mid));
  border-radius: 20px;
  padding: 40px 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  position: relative;
  overflow: hidden;
}
.crosssell::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 85% 50%, rgba(136, 34, 221, 0.3), transparent 60%);
  pointer-events: none;
}
.crosssell > * { position: relative; z-index: 1; }
.crosssell-label {
  font-size: 11px; font-weight: 600;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--brand-light);
  margin-bottom: 10px;
}
.crosssell h3 {
  font-family: 'DM Serif Display', serif;
  font-size: 27px;
  color: #fff;
  margin-bottom: 10px;
  line-height: 1.25;
}
.crosssell p {
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.7;
  max-width: 520px;
}

/* ==========================================================================
   FOOTER — matches index.html
   ========================================================================== */

.footer { background: #05030d; border-top: 1px solid rgba(255, 255, 255, 0.05); padding: 48px 56px 32px; }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; }
.footer-brand-name { font-family: 'DM Serif Display', serif; font-size: 22px; color: #fff; margin-bottom: 12px; }
.footer-brand-name span { color: #aa66ff; }
.footer-brand-desc { font-size: 13px; color: rgba(255, 255, 255, 0.35); line-height: 1.7; max-width: 240px; }
.footer-col-title {
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.8px; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 16px;
}
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-links a { font-size: 13px; color: rgba(255, 255, 255, 0.35); text-decoration: none; transition: color 0.2s; }
.footer-links a:hover { color: rgba(255, 255, 255, 0.75); }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  gap: 12px;
  flex-wrap: wrap;
}
.footer-copy { font-size: 12px; color: rgba(255, 255, 255, 0.2); }
.footer-brand-link {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  border-bottom: 1px solid rgba(170, 102, 255, 0.4);
  transition: color 0.2s, border-color 0.2s;
}
.footer-brand-link:hover { color: #cc88ff; border-color: #cc88ff; }

/* ==========================================================================
   REVEAL ANIMATION (same primitive index.html uses)
   ========================================================================== */

.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

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

/* ==========================================================================
   RESPONSIVE — 1024 (tablet) / 768 (mobile) / 480, matching index.html
   ========================================================================== */

@media (max-width: 1024px) {
  .nav { padding: 0 32px; }
  .nav-links { gap: 24px; }
  .page-hero { padding: 60px 32px 54px; }
  .page-hero h1 { font-size: 39px; }
  .section { padding: 60px 32px; }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .footer { padding: 48px 32px 28px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 36px; }
  .crosssell { padding: 34px 30px; }
}

@media (max-width: 768px) {
  .nav { padding: 0 20px; height: 62px; }
  /* Desktop links and the login link move into the drawer. */
  .nav-links, .nav-login { display: none; }
  .nav-burger { display: flex; }
  .nav-drawer, .nav-backdrop { display: block; }
  .nav-cta { padding: 8px 16px; font-size: 13px; }

  .page-main { padding-top: 62px; }
  .page-hero { padding: 48px 20px 44px; }
  .page-hero h1 { font-size: 32px; letter-spacing: -0.6px; }
  .page-hero-sub { font-size: 15px; }

  .section { padding: 48px 20px; }
  .section-header { margin-bottom: 34px; }
  .section-title { font-size: 29px; }

  .card-grid, .card-grid-2 { grid-template-columns: 1fr; gap: 16px; }

  .form-card { padding: 24px 20px; }

  .crosssell { flex-direction: column; align-items: flex-start; padding: 30px 24px; text-align: left; }
  .crosssell h3 { font-size: 23px; }
  .crosssell .btn { width: 100%; }

  .footer { padding: 40px 20px 24px; }
  .footer-top { grid-template-columns: 1fr; gap: 30px; margin-bottom: 34px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}

@media (max-width: 480px) {
  .page-hero h1 { font-size: 28px; }
  .section { padding: 40px 16px; }
  .page-hero { padding: 40px 16px 38px; }
  .form-card { padding: 20px 16px; }
  .nav { padding: 0 16px; }
}