/* Fizco brand tokens — mirror fizcoapp/lib/core/constants/app_colors.dart */
  :root {
    --navy: #1E3A8A;
    --navy-dark: #00236F;
    --indigo: #2563EB;
    --emerald: #10B981;
    --bg: #F8FAFC;
    --card: #FFFFFF;
    --text: #0F172A;
    --muted: #64748B;
    --line: #E2E8F0;
    --tint: #EFF4FF;
    --header: rgba(248, 250, 252, 0.72);
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #0B1220; --card: #111A2E; --text: #F1F5F9; --muted: #94A3B8;
      --line: #1E293B; --tint: #13213F; --indigo: #6B93FF;
      --header: rgba(11, 18, 32, 0.72);
    }
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
  body {
    margin: 0; background: var(--bg); color: var(--text);
    font: 100%/1.55 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  img { display: block; max-width: 100%; height: auto; }
  a { color: inherit; }
  .wrap { max-width: 68rem; margin: 0 auto; padding: 0 1rem; }
  @media (min-width: 640px) { .wrap { padding: 0 1.5rem; } }

  /* Translucent header — content scrolls under it */
  header {
    position: sticky; top: 0; z-index: 10;
    background: var(--header);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid transparent;
    transition: border-color 200ms ease;
  }
  header.scrolled { border-bottom-color: var(--line); }
  header .wrap { display: flex; align-items: center; justify-content: space-between; height: 3.75rem; }
  .brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; }
  .brand img { width: 2rem; height: 2rem; }

  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    min-height: 2.75rem; padding: 0 1.25rem; border-radius: 999px;
    font: inherit; font-weight: 600; font-size: 0.95rem; letter-spacing: 0.005em;
    text-decoration: none; cursor: pointer; border: 0;
    background: var(--navy); color: #fff;
    transition: transform 100ms ease-out, background-color 150ms ease;
    -webkit-tap-highlight-color: transparent;
  }
  .btn:hover { background: var(--navy-dark); }
  .btn:active { transform: scale(0.97); }
  .btn:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; }
  .btn.ghost { background: var(--card); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
  .btn.ghost:hover { background: var(--tint); }
  .btn svg { width: 1.15rem; height: 1.15rem; fill: currentColor; }
  .btn.sm { min-height: 2.25rem; padding: 0 1rem; font-size: 0.875rem; }

  /* Hero */
  .hero { padding: 3.5rem 0 4rem; overflow: hidden; }
  .hero .wrap { display: grid; gap: 3rem; align-items: center; }
  @media (min-width: 900px) { .hero { padding: 5rem 0 6rem; } .hero .wrap { grid-template-columns: 1.15fr 0.85fr; } }
  .eyebrow {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.3rem 0.75rem; border-radius: 999px; background: var(--tint);
    color: var(--indigo); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em;
  }
  .eyebrow::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--emerald); }
  h1 {
    margin: 1.1rem 0 0; font-size: clamp(2.25rem, 6vw, 3.75rem);
    line-height: 1.05; letter-spacing: -0.03em; font-weight: 800;
  }
  h1 span { color: var(--navy); }
  @media (prefers-color-scheme: dark) { h1 span { color: var(--indigo); } }
  .lede { margin: 1.25rem 0 0; max-width: 34rem; font-size: clamp(1.05rem, 2vw, 1.2rem); color: var(--muted); }
  .ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
  .ctas .btn { min-height: 3.25rem; padding: 0 1.5rem; font-size: 1rem; }

  .phone { position: relative; justify-self: center; width: min(19rem, 78vw); }
  .phone::before {
    content: ""; position: absolute; inset: 10% -25% -5%; z-index: -1;
    background: radial-gradient(closest-side, rgba(37, 99, 235, 0.22), transparent);
  }
  .phone img { filter: drop-shadow(0 30px 40px rgba(15, 23, 42, 0.22)); }

  /* Steps */
  section.how { padding: 4.5rem 0; background: var(--card); border-block: 1px solid var(--line); }
  h2 { margin: 0; font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.1; letter-spacing: -0.025em; font-weight: 800; }
  .sub { margin: 0.75rem 0 0; color: var(--muted); max-width: 36rem; }
  .steps { list-style: none; margin: 2.75rem 0 0; padding: 0; display: grid; gap: 1rem; }
  @media (min-width: 640px) { .steps { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1000px) { .steps { grid-template-columns: repeat(4, 1fr); } }
  .steps li { padding: 1.5rem; border-radius: 1.25rem; background: var(--bg); border: 1px solid var(--line); }
  .num {
    display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 0.7rem;
    background: var(--navy); color: #fff; font-weight: 700; font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
  }
  .steps h3 { margin: 1.1rem 0 0.4rem; font-size: 1.1rem; line-height: 1.3; letter-spacing: -0.01em; }
  .steps p { margin: 0; color: var(--muted); font-size: 0.95rem; }

  /* Closing CTA */
  .cta { padding: 4.5rem 0; }
  .cta-card {
    border-radius: 1.75rem; padding: 3rem 1.5rem; text-align: center; color: #fff;
    background: linear-gradient(160deg, #2747A3, var(--navy) 55%, var(--navy-dark));
  }
  .cta-card img { width: 4rem; height: 4rem; margin: 0 auto 1.25rem; border-radius: 1rem; box-shadow: 0 0 0 1px rgba(255,255,255,0.18); }
  .cta-card p { margin: 0.75rem auto 0; max-width: 30rem; color: rgba(255,255,255,0.78); }
  .cta-card .ctas { justify-content: center; }
  .cta-card .btn { background: #fff; color: var(--navy); }
  .cta-card .btn:hover { background: #E5EEFF; }
  .cta-card .btn.ghost { background: rgba(255,255,255,0.12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28); }
  .cta-card .btn.ghost:hover { background: rgba(255,255,255,0.2); }

  footer { padding: 2rem 0 3rem; color: var(--muted); font-size: 0.875rem; }
  footer .wrap { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; }
  footer nav { display: flex; gap: 1.25rem; }
  footer a { text-decoration: none; }
  footer a:hover { color: var(--text); }

  /* Gentle entrance; removed entirely for reduced motion */
  .rise { animation: rise 600ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .rise.d1 { animation-delay: 80ms; } .rise.d2 { animation-delay: 160ms; } .rise.d3 { animation-delay: 240ms; }
  @keyframes rise { from { opacity: 0; transform: translateY(12px); } }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .rise { animation: none; }
    .btn:active { transform: none; }
  }
  @media (prefers-reduced-transparency: reduce) {
    header { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
  }

  /* Support page */
  .page { padding: 3rem 0 4rem; }
  .page .wrap { max-width: 48rem; }
  .page h1 { font-size: clamp(2rem, 5vw, 2.75rem); }
  .contact {
    display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; justify-content: space-between;
    margin-top: 2rem; padding: 1.5rem; border-radius: 1.25rem;
    background: var(--card); border: 1px solid var(--line);
  }
  .contact h2 { font-size: 1.15rem; letter-spacing: -0.01em; }
  .contact p { margin: 0.25rem 0 0; color: var(--muted); font-size: 0.95rem; }
  .faq { margin-top: 3rem; }
  .faq > h2 { margin-bottom: 1rem; }
  .faq details { border-bottom: 1px solid var(--line); }
  .faq summary {
    display: flex; justify-content: space-between; gap: 1rem; align-items: center;
    padding: 1.1rem 0; cursor: pointer; list-style: none;
    font-weight: 600; font-size: 1.05rem; letter-spacing: -0.005em;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after {
    content: ""; flex: none; width: 0.6rem; height: 0.6rem; margin-right: 0.25rem;
    border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
    transform: rotate(45deg); transition: transform 200ms ease;
  }
  .faq details[open] summary::after { transform: rotate(-135deg); }
  .faq summary:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; border-radius: 4px; }
  .faq details p { margin: -0.25rem 0 1.1rem; color: var(--muted); }
  .faq details p a { color: var(--indigo); }