/* ============================================================
   DigiSignWall — Marketing site
   Light theme: white surfaces, Blue primary, Slate ink
   Mobile-first, responsive, accessible (WCAG AA contrast)
   ============================================================ */

:root {
  /* Brand */
  --primary: #1D4ED8;        /* Blue 700 — AA on white */
  --primary-dark: #1E3A8A;   /* Blue 900 */
  --primary-light: #EFF6FF;  /* Blue 50 */
  --accent: #0E7490;         /* Cyan 700 — AA on white */
  --success: #047857;        /* Emerald 700 */

  /* Slate scale */
  --slate-900: #0F172A;
  --slate-800: #1E293B;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748B;
  --slate-300: #CBD5E1;
  --slate-200: #E2E8F0;
  --slate-100: #F1F5F9;
  --slate-50:  #F8FAFC;
  --white: #FFFFFF;

  /* Semantic */
  --bg: var(--white);
  --bg-alt: var(--slate-50);
  --surface: var(--white);
  --text: var(--slate-900);
  --text-body: var(--slate-700);
  --text-muted: var(--slate-600);
  --border: var(--slate-200);

  --radius: 14px;
  --radius-sm: 10px;
  --maxw: 1160px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08);
  --shadow: 0 4px 6px -2px rgba(15, 23, 42, .05), 0 12px 24px -8px rgba(15, 23, 42, .12);
  --shadow-lg: 0 12px 20px -8px rgba(15, 23, 42, .10), 0 28px 48px -16px rgba(15, 23, 42, .18);
  --grad: linear-gradient(135deg, var(--primary) 0%, #0891B2 100%);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg);
  color: var(--text-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
h1, h2, h3, h4 { color: var(--text); line-height: 1.25; }

/* Visible focus for keyboard users */
:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.container.narrow { max-width: 780px; }
.section { padding: 72px 0; }
.section-alt { background: var(--bg-alt); border-block: 1px solid var(--border); }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--primary); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; font-weight: 600; font-size: .95rem;
  padding: 11px 20px; border-radius: var(--radius-sm);
  border: 1px solid transparent; cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
  white-space: nowrap;
}
.btn-lg { padding: 14px 26px; font-size: 1rem; }
.btn-block { width: 100%; }
.btn-primary { background: var(--primary); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--primary-dark); box-shadow: var(--shadow); transform: translateY(-1px); }
.btn-outline { border-color: var(--slate-300); color: var(--text); background: var(--white); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.btn-ghost { color: var(--text-muted); }
.btn-ghost:hover { color: var(--primary); background: var(--primary-light); }

/* On the dark CTA banner, invert the outline button so it stays legible */
.cta-banner .btn-outline {
  background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55);
}
.cta-banner .btn-outline:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }
.cta-banner .btn-primary { background: #fff; color: var(--primary-dark); }
.cta-banner .btn-primary:hover { background: var(--slate-100); color: var(--primary-dark); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.2rem; color: var(--text); }
.brand-mark {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--grad); position: relative; flex-shrink: 0;
}
.brand-mark::after {
  content: ""; position: absolute; inset: 7px 7px auto auto;
  width: 8px; height: 8px; border-radius: 2px; background: #fff; opacity: .95;
}
.brand-accent { color: var(--accent); }
.nav-links { display: none; gap: 28px; }
.nav-links a { color: var(--text-muted); font-weight: 500; font-size: .94rem; transition: color .15s; }
.nav-links a:hover { color: var(--primary); }
.nav-links a[aria-current="true"] { color: var(--primary); font-weight: 600; }
.nav-cta { display: none; gap: 10px; }

/* hamburger */
.nav-toggle {
  display: flex; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px;
}
.nav-toggle span { width: 24px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .25s, opacity .25s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 20px 22px;
  border-bottom: 1px solid var(--border); background: var(--white);
}
/* [hidden] must win over the display:flex above */
.mobile-menu[hidden] { display: none; }
.mobile-menu a { padding: 12px 10px; color: var(--text-body); font-weight: 500; border-radius: 8px; }
.mobile-menu a:hover { background: var(--primary-light); color: var(--primary); }
.mobile-menu .btn { margin-top: 8px; }

/* ---------- Hero ---------- */
.hero {
  position: relative; padding: 56px 0 64px; overflow: hidden;
  background:
    radial-gradient(60% 60% at 85% 0%, rgba(8, 145, 178, .07), transparent 62%),
    radial-gradient(55% 65% at 5% 5%, rgba(29, 78, 216, .08), transparent 62%),
    var(--white);
}
.hero-grid { display: grid; gap: 44px; align-items: center; }
.eyebrow {
  display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent);
  background: #ECFEFF; border: 1px solid #A5F3FC;
  padding: 6px 12px; border-radius: 999px; margin-bottom: 18px;
}
.hero h1 {
  font-size: clamp(1.85rem, 6vw, 3.4rem); line-height: 1.12; font-weight: 800;
  letter-spacing: -.025em; overflow-wrap: break-word;
}
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { margin-top: 18px; font-size: 1.09rem; color: var(--text-body); max-width: 560px; }
.lede strong { color: var(--text); font-weight: 600; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-actions.center { justify-content: center; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 26px; color: var(--text-muted); font-size: .9rem; }
.hero-trust li { display: flex; align-items: center; gap: 7px; }
.hero-trust svg { color: var(--success); flex-shrink: 0; }

/* ---------- Hero billboard scene ----------
   An outdoor digital billboard on a stand, against a dusk skyline, with content
   slides cross-fading on the screen. Pure CSS — no image requests, so it adds
   nothing to LCP and survives a strict CSP.
   ------------------------------------------------------------------ */
/* !important overrides the inline height:0 guard in the markup, which exists so
   the scene collapses instead of spilling raw text when this file is stale. */
.hero-visual {
  position: relative; display: flex; justify-content: center;
  height: auto !important; overflow: visible !important;
}

.scene {
  position: relative; width: 100%; max-width: 520px; aspect-ratio: 4 / 3.3;
  border-radius: 20px; overflow: hidden;
  background: linear-gradient(180deg, #172554 0%, #1E3A8A 34%, #7C3AED 58%, #F97316 84%, #FBBF24 100%);
  box-shadow: var(--shadow-lg);
}

/* dusk glow — warm sun low on the horizon, cool up top */
.scene-sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(52% 30% at 72% 76%, rgba(253, 224, 71, .85), transparent 68%),
    radial-gradient(70% 42% at 76% 82%, rgba(249, 115, 22, .6), transparent 72%),
    radial-gradient(46% 34% at 14% 8%, rgba(30, 58, 138, .55), transparent 70%);
}

/* skyline — kept low so the board and its stand read clearly against the sky.
   z-index puts it above the sky glow so buildings silhouette instead of washing out. */
.scene-city { position: absolute; left: 0; right: 0; bottom: 14%; height: 30%; z-index: 1; }
.bldg {
  position: absolute; bottom: 0; background: #111C33; opacity: .95;
  border-radius: 3px 3px 0 0;
  /* window grid */
  background-image:
    linear-gradient(90deg, rgba(226,232,240,.13) 1.5px, transparent 1.5px),
    linear-gradient(180deg, rgba(226,232,240,.13) 1.5px, transparent 1.5px);
  background-size: 9px 11px;
}
.b1 { left: 1%;  width: 13%; height: 56%; }
.b2 { left: 14%; width: 10%; height: 78%; }
.b3 { left: 25%; width: 8%;  height: 44%; }
.b4 { left: 62%; width: 11%; height: 62%; }
.b5 { left: 73%; width: 9%;  height: 40%; }
.b6 { left: 82%; width: 12%; height: 72%; }
.b7 { left: 94%; width: 8%;  height: 50%; }

.scene-ground {
  position: absolute; left: 0; right: 0; bottom: 0; height: 14%; z-index: 1;
  background: linear-gradient(180deg, #253449, #0F172A);
}

/* ---- billboard ---- */
.board { position: absolute; left: 7%; top: 8%; width: 62%; z-index: 2; }
.board-screen {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: 8px; background: #0B1220;
  border: 5px solid #E2E8F0;
  box-shadow: 0 18px 40px rgba(2, 6, 23, .55), 0 0 44px rgba(56, 189, 248, .28);
  /* lets the slide type scale with the board via cqw units */
  container-type: inline-size;
}

/* content slides */
.slide {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  justify-content: center; gap: 5%; padding: 8% 9%;
  opacity: 0; animation: slideCycle 12s infinite;
}
.slide-1 { background: linear-gradient(135deg, #1D4ED8, #0891B2); animation-delay: 0s; }
.slide-2 { background: linear-gradient(135deg, #0F172A, #334155); animation-delay: 4s; }
.slide-3 { background: linear-gradient(135deg, #7C2D12, #B45309); animation-delay: 8s; }

.slide-kicker {
  font-size: clamp(.42rem, 1.5cqw, .58rem); font-weight: 800; letter-spacing: .16em;
  color: rgba(255, 255, 255, .72);
}
.slide-title {
  font-size: clamp(1rem, 5.4cqw, 1.75rem); font-weight: 800; color: #fff;
  line-height: 1.05; letter-spacing: -.02em;
}
.slide-sub { font-size: clamp(.5rem, 2.2cqw, .8rem); color: rgba(255, 255, 255, .85); }

.menu-row {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  font-size: clamp(.48rem, 2cqw, .74rem); color: rgba(255, 255, 255, .9);
  border-bottom: 1px solid rgba(255, 255, 255, .16); padding-bottom: 3%;
}
.menu-row b { color: #fff; font-weight: 700; }
.menu-row b.ok { color: #6EE7B7; }
.menu-row b.warn { color: #FCD34D; }

/* screen furniture */
.board-live {
  position: absolute; top: 6%; right: 5%; z-index: 3;
  font-size: clamp(.4rem, 1.5cqw, .55rem); font-weight: 800; letter-spacing: .06em;
  color: #6EE7B7; background: rgba(6, 78, 59, .82);
  border: 1px solid rgba(110, 231, 183, .5);
  padding: 2px 6px; border-radius: 5px;
}
/* glass sheen */
.board-glass {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(118deg, rgba(255,255,255,.16) 8%, transparent 36%);
}
/* slow scanline sweep, so the screen reads as "live" */
.board-scan {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, transparent 44%, rgba(255,255,255,.07) 50%, transparent 56%);
  animation: scan 5.5s linear infinite;
}

/* top-rail spotlights */
.board-lights {
  position: absolute; top: -13px; left: 12%; right: 12%; height: 13px;
  display: flex; justify-content: space-between; z-index: 1;
}
.board-lights i {
  width: 15%; height: 5px; border-radius: 3px 3px 0 0;
  background: #CBD5E1; position: relative;
}
.board-lights i::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border-left: 13px solid transparent; border-right: 13px solid transparent;
  border-top: 26px solid rgba(253, 224, 71, .22);
}

/* stand */
.board-leg {
  position: absolute; top: 100%; width: 7px; height: 78px;
  background: linear-gradient(180deg, #94A3B8, #475569);
}
.board-leg-l { left: 24%; }
.board-leg-r { right: 24%; }
.board-brace {
  position: absolute; top: calc(100% + 34px); left: 24%; right: 24%;
  height: 5px; background: #64748B;
}
.board-base {
  position: absolute; top: calc(100% + 78px); left: 16%; right: 16%;
  height: 8px; border-radius: 3px;
  background: linear-gradient(180deg, #475569, #1E293B);
}

/* ---- paired small screen ---- */
.mini { position: absolute; right: 6%; bottom: 17%; width: 20%; z-index: 2; }
.mini-screen {
  display: block; aspect-ratio: 9 / 14; border-radius: 6px;
  border: 3px solid #CBD5E1; background: linear-gradient(150deg, #1D4ED8, #0891B2);
  box-shadow: 0 10px 24px rgba(2, 6, 23, .5);
  animation: miniSync 12s infinite;
}
.mini-stand {
  display: block; width: 5px; height: 26px; margin: 0 auto;
  background: linear-gradient(180deg, #94A3B8, #475569);
}

/* ---- motion ---- */
@keyframes slideCycle {
  0%, 2%    { opacity: 0; transform: translateY(6px) scale(.995); }
  6%, 30%   { opacity: 1; transform: none; }
  34%, 100% { opacity: 0; transform: translateY(-6px) scale(1.005); }
}
@keyframes scan {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}
/* the paired screen recolours in step with the billboard — "synced" */
@keyframes miniSync {
  0%, 30%   { background: linear-gradient(150deg, #1D4ED8, #0891B2); }
  34%, 63%  { background: linear-gradient(150deg, #0F172A, #334155); }
  67%, 96%  { background: linear-gradient(150deg, #7C2D12, #B45309); }
  100%      { background: linear-gradient(150deg, #1D4ED8, #0891B2); }
}

/* Looping motion is decorative: hold the first slide and stop the sweep. */
@media (prefers-reduced-motion: reduce) {
  .slide, .board-scan, .mini-screen { animation: none !important; }
  .slide-1 { opacity: 1; }
  .slide-2, .slide-3 { opacity: 0; }
}

/* ---------- Stats ---------- */
.stats { border-block: 1px solid var(--border); background: var(--bg-alt); padding: 32px 0; }
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; text-align: center; }
.stats-grid strong { display: block; font-size: 1.9rem; font-weight: 800; color: var(--primary); letter-spacing: -.02em; }
.stats-grid span { font-size: .85rem; color: var(--text-muted); }

/* ---------- Section heads ---------- */
.section-head { text-align: center; max-width: 660px; margin: 0 auto 44px; }
.section-head h2 { font-size: clamp(1.7rem, 4.5vw, 2.3rem); font-weight: 800; letter-spacing: -.022em; margin-top: 6px; }
.section-head p { margin-top: 12px; color: var(--text-muted); }

/* ---------- Feature cards ----------
   Each card is a white surface sitting on a soft colored layer that peeks out
   behind it, with a slight tilt — the "scattered sticker" look. The tilt lives
   on the card itself; the color comes from a ::before behind it, so the markup
   stays clean.
   ------------------------------------------------------------------ */
.feature-grid { display: grid; grid-template-columns: 1fr; gap: 26px; }

.card {
  --card-tint: #DBEAFE;
  --card-tilt: -1.6deg;
  --card-shift: 10px;

  position: relative;
  border-radius: var(--radius); padding: 27px;
  filter: drop-shadow(0 1px 2px rgba(15, 23, 42, .06)) drop-shadow(0 8px 18px rgba(15, 23, 42, .07));
  /* At rest the card sits flat and plain — no tilt. */
  transform: none;
  transition: transform .3s cubic-bezier(.2,.7,.3,1), filter .3s ease;
}

/* The colored layer. At rest it hides exactly behind the card (no offset, no
   rotation) so the card reads as a plain white surface; on hover/press it
   slides and rotates out from underneath. */
.card::before {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit; background: var(--card-tint);
  transform: none;
  transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
/* The white surface, painted over the tint. Using an ::after (rather than a
   negative z-index on ::before) keeps the whole stack inside the card, so it
   can't sink behind the section background. */
.card::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit; background: var(--surface);
  border: 1px solid var(--border);
}
/* Card content sits above both layers. */
.card > * { position: relative; z-index: 1; }

/* Vary which way each card leans and which corner its colour emerges from, so
   the grid animates with some variety instead of every card moving identically.
   These only take effect on hover/press — at rest every card is flat. */
.card:nth-child(even) { --card-tilt: 1.4deg; --card-shift: -10px; }
.card:nth-child(3n)   { --card-tilt: -1deg;  --card-shift: 11px; }
.card:nth-child(4n)   { --card-tilt: 1.8deg; --card-shift: -9px; }
.card:nth-child(5n)   { --card-tilt: -2deg;  --card-shift: 12px; }

/* Tints cycle through the brand palette, echoing the reference */
.card:nth-child(6n+1) { --card-tint: #BFD9FB; } /* blue   */
.card:nth-child(6n+2) { --card-tint: #FBD6BC; } /* peach  */
.card:nth-child(6n+3) { --card-tint: #D5CFFA; } /* violet */
.card:nth-child(6n+4) { --card-tint: #F8C9C9; } /* rose   */
.card:nth-child(6n+5) { --card-tint: #FAE3A0; } /* amber  */
.card:nth-child(6n+6) { --card-tint: #B6E5D4; } /* mint   */

/* ---- Interaction: the colour emerges from behind a plain card ----
   At rest the card is flat and white. On hover / keyboard focus / touch press
   it lifts and takes on a slight tilt while the colored layer slides and
   rotates out from underneath. `.is-pressed` is added by JS on touchstart
   (see main.js) because :hover does not fire reliably on touch devices.
   ------------------------------------------------------------------ */
.card:hover, .card:focus-within, .card.is-pressed {
  transform: rotate(var(--card-tilt)) translateY(-8px) scale(1.015);
  filter: drop-shadow(0 6px 10px rgba(15, 23, 42, .09)) drop-shadow(0 22px 38px rgba(15, 23, 42, .16));
}
.card:hover::before, .card:focus-within::before, .card.is-pressed::before {
  /* Counter-rotate and slide so the tint fans out past the card edge. */
  transform:
    rotate(calc(var(--card-tilt) * -3.2))
    translate(calc(var(--card-shift) * 1.9), calc(var(--card-shift) * 1.5));
}
/* Touch press should settle quickly — no lingering transition on release. */
.card.is-pressed, .card.is-pressed::before { transition-duration: .22s; }

.card-icon {
  width: 46px; height: 46px; display: grid; place-items: center;
  background: var(--primary-light); border: 1px solid #BFDBFE;
  border-radius: 12px; margin-bottom: 16px; color: var(--primary);
}
.card h3 { font-size: 1.1rem; margin-bottom: 8px; }
.card p { color: var(--text-muted); font-size: .94rem; }

/* Rotation and the slide-out are decorative. Under reduced motion, drop the
   tilt and the movement but keep a static colored edge so the cards still read
   as layered rather than losing their identity entirely. */
@media (prefers-reduced-motion: reduce) {
  /* Keep cards flat and still. The colour reveal is decorative, so hovering
     just shows a small static edge rather than sliding anything out. */
  .card, .card:hover, .card:focus-within, .card.is-pressed {
    transform: none !important;
  }
  .card::before { transform: none !important; }
  .card:hover::before, .card:focus-within::before, .card.is-pressed::before {
    transform: translate(6px, 6px) !important;
  }
}

/* ---------- Solutions ---------- */
.solution-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.solution {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--primary); border-radius: var(--radius-sm);
  padding: 22px 24px; transition: box-shadow .2s, transform .2s, border-left-color .2s;
}
.solution:hover { border-left-color: var(--accent); transform: translateX(3px); box-shadow: var(--shadow); }
.solution h3 { font-size: 1.06rem; margin-bottom: 6px; }
.solution p { color: var(--text-muted); font-size: .92rem; }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: 1fr; gap: 24px; }
.steps li {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px 24px 24px; box-shadow: var(--shadow-sm);
}
.step-num {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
  background: var(--grad); color: #fff; font-weight: 800; font-size: 1.1rem; margin-bottom: 14px;
}
.steps h3 { font-size: 1.1rem; margin-bottom: 6px; }
.steps p { color: var(--text-muted); font-size: .94rem; }

/* ---------- Pricing ---------- */
.pricing-grid { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: stretch; }
.plan {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 30px 26px; display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
}
.plan-featured { border-color: var(--primary); border-width: 2px; box-shadow: var(--shadow-lg); }
.plan-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--primary); color: #fff; font-size: .72rem; font-weight: 700;
  padding: 5px 14px; border-radius: 999px; letter-spacing: .04em; white-space: nowrap;
}
.plan h3 { font-size: 1.15rem; }
.plan-sub { font-size: .88rem; color: var(--text-muted); margin-top: 4px; }
.price { font-size: 2.4rem; font-weight: 800; margin: 12px 0 18px; color: var(--text); letter-spacing: -.02em; }
.price span { font-size: 1rem; font-weight: 500; color: var(--text-muted); letter-spacing: 0; }
.plan ul { display: grid; gap: 10px; margin-bottom: 24px; flex: 1; }
.plan ul li { color: var(--text-body); font-size: .94rem; display: flex; align-items: flex-start; gap: 9px; }
.plan ul svg { color: var(--success); flex-shrink: 0; margin-top: 5px; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; }
.faq details {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 2px 20px; transition: border-color .2s, box-shadow .2s;
}
.faq details[open] { border-color: var(--slate-300); box-shadow: var(--shadow-sm); }
.faq summary {
  cursor: pointer; font-weight: 600; color: var(--text); padding: 17px 0; 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: "+"; color: var(--primary); font-size: 1.5rem; font-weight: 400; line-height: 1; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { color: var(--text-muted); padding-bottom: 18px; font-size: .94rem; }

/* ---------- CTA banner ---------- */
.cta-banner {
  margin: 0 20px 72px; border-radius: 24px;
  background:
    radial-gradient(80% 130% at 100% 0%, rgba(6, 182, 212, .35), transparent 60%),
    var(--primary-dark);
}
.cta-inner { text-align: center; padding: 56px 20px; }
.cta-inner h2 { font-size: clamp(1.6rem, 4.5vw, 2.2rem); font-weight: 800; color: #fff; letter-spacing: -.02em; }
.cta-inner p { color: #DBEAFE; margin: 12px auto 4px; max-width: 520px; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border); background: var(--bg-alt); padding-top: 48px; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 30px; padding-bottom: 36px; }
.footer-brand .brand-name { color: var(--text); font-weight: 800; font-size: 1.15rem; }
.footer-brand p { color: var(--text-muted); font-size: .9rem; margin-top: 10px; max-width: 300px; }
.site-footer h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--slate-500); margin-bottom: 14px; }

/* ---------- Share ---------- */
.share { margin-top: 22px; }
.share h4 { margin-bottom: 10px; }
.share-list { display: flex; flex-wrap: wrap; gap: 8px; }
.share-btn {
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 10px; border: 1px solid var(--border); background: var(--white);
  color: var(--text-muted); cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.share-btn:hover {
  color: var(--primary); border-color: var(--primary);
  background: var(--primary-light); transform: translateY(-2px);
}
.share-status { display: block; min-height: 1.2em; margin-top: 8px; font-size: .82rem; color: var(--success); }
.site-footer nav a { display: block; color: var(--text-body); padding: 5px 0; font-size: .92rem; }
.site-footer nav a:hover { color: var(--primary); }
.footer-bottom {
  display: flex; flex-direction: column; gap: 8px; text-align: center;
  border-top: 1px solid var(--border); padding: 20px 0; color: var(--text-muted); font-size: .85rem;
}
.footer-bottom a:hover { color: var(--primary); }

/* ============================================================
   RESPONSIVE — tablet & desktop breakpoints
   ============================================================ */
@media (min-width: 600px) {
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .solution-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .footer-bottom { flex-direction: row; justify-content: space-between; }
}

@media (min-width: 900px) {
  .section { padding: 92px 0; }
  .nav-links { display: flex; }
  .nav-cta { display: flex; }
  .nav-toggle { display: none; }
  .mobile-menu { display: none !important; }
  .hero { padding: 84px 0 92px; }
  .hero-grid { grid-template-columns: 1.05fr .95fr; }
  .feature-grid { grid-template-columns: repeat(3, 1fr); }
  .solution-grid { grid-template-columns: repeat(3, 1fr); }
  .pricing-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Reveal-on-scroll ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* Feature cards own their transform (tilt + hover/press lift), so the reveal
   must not set one — `transform: none` would flatten the tilt and kill the
   slide-out. They fade in via .card-reveal instead (see main.js). */
.card-reveal { opacity: 0; transition: opacity .6s ease; }
.card-reveal.in { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .nav-toggle, .mobile-menu, .hero-visual, .cta-banner { display: none !important; }
  body { color: #000; }
  .reveal { opacity: 1; transform: none; }
}