:root {
    --navy-950: #070C18;
    --accent-cyan: #19E5FF;
    --accent-teal: #2DD4BF;
  }

  section[id] { scroll-margin-top: 5rem; }

  /* ---------- Eyebrow / chips ---------- */
  .eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }
  .chip-dark {
    display: inline-flex; align-items: center;
    border-radius: 9999px; border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
    padding: 0.3rem 0.85rem;
    font-family: 'JetBrains Mono', monospace; font-size: 0.7rem;
    color: #cbd5e1; letter-spacing: 0.04em;
  }
  .chip-light {
    display: inline-flex; align-items: center;
    border-radius: 9999px; border: 1px solid #e2e8f0;
    background: #ffffff;
    padding: 0.3rem 0.85rem;
    font-family: 'JetBrains Mono', monospace; font-size: 0.7rem;
    color: #475569; letter-spacing: 0.04em;
  }
  .card-dark {
    border: 1px solid rgba(255,255,255,0.08);
    background-color: rgba(255,255,255,0.03);
    border-radius: 1rem;
  }

  /* ---------- Background grid ---------- */
  .bg-grid {
    background-image:
      linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 48px 48px;
  }

  /* ---------- Header logo ---------- */
 
  .site-logo {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: clamp(10.5rem, 18vw, 15.3rem);
    height: 3rem;
    overflow: hidden;
  }
  .site-logo img {
    display: block;
    width: 75%;
    height: 75%;
    object-fit: contain;
    object-position: left center;
    filter: drop-shadow(0 5px 14px rgba(255, 255, 255, 0.16));
    transition: transform 0.25s ease, filter 0.25s ease;
    transform-origin: left center;
  }
  .site-logo-link:hover .site-logo img {
    transform: scale(1.1);
    filter: drop-shadow(0 7px 18px rgba(255, 255, 255, 0.24));
  }

  @media (max-width: 420px) {
    .site-logo-link {
      padding: 0.35rem 0.55rem 0.35rem 0.4rem;
    }
    .site-logo {
      width: 9.7rem;
      height: 1.64rem;
    }
  }

  /* ---------- Buttons ---------- */
  .btn-solid {
    display: inline-flex; align-items: center; gap: 0.5rem;
    border-radius: 9999px; padding: 0.9rem 1.85rem;
    font-size: 0.875rem; font-weight: 600;
    color: var(--navy-950);
    background-color: var(--accent-cyan);
    box-shadow: 0 12px 28px -12px rgba(25,229,255,0.55);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    white-space: nowrap;
  }
  .btn-solid:hover { transform: translateY(-6px); box-shadow: 0 18px 34px -10px rgba(25,229,255,0.7); }

  .btn-outline {
    display: inline-flex; align-items: center; gap: 0.5rem;
    border-radius: 9999px; padding: 0.9rem 1.85rem;
    font-size: 0.875rem; font-weight: 600; color: #fff;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.03);
    transition: border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease, gap 0.25s ease;
    white-space: nowrap;
  }
  .btn-outline:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); background: rgba(25,229,255,0.08); gap: 0.75rem; }

  .btn-outline-dark {
    display: inline-flex; align-items: center; gap: 0.5rem;
    border-radius: 9999px; padding: 0.9rem 1.85rem;
    font-size: 0.875rem; font-weight: 600; color: var(--navy-950);
    border: 1px solid #cbd5e1;
    background: transparent;
    transition: border-color 0.25s ease, gap 0.25s ease, background-color 0.25s ease;
  }
  .btn-outline-dark:hover { border-color: var(--navy-950); background: #f1f5f9; gap: 0.75rem; }

  /* ---------- "+" corner mark ---------- */
  .plus-mark {
    display: flex; align-items: center; justify-content: center;
    height: 2.25rem; width: 2.25rem; border-radius: 9999px;
    border: 1px solid rgba(255,255,255,0.12);
    color: #fff;
    transition: transform 0.35s ease, background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
  }
  .group:hover .plus-mark {
    transform: rotate(45deg);
    background-color: var(--accent-cyan);
    border-color: var(--accent-cyan);
    color: var(--navy-950);
  }

  /* ---------- Scroll reveal ---------- */
  .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
  .reveal.is-visible { opacity: 1; transform: translateY(0); }

  /* ---------- Hero card: scan line ---------- */
  .scan-line { position: absolute; left: 6%; right: 6%; height: 1.5px; animation: scan 3.4s ease-in-out infinite; }
  @keyframes scan { 0%, 100% { top: 6%; opacity: 0.85; } 50% { top: 92%; opacity: 0.85; } }

  /* ---------- Small illustration scan lines ---------- */
  .illus-scan { position: absolute; left: 10%; right: 10%; height: 1px; animation: scan-small 2.8s ease-in-out infinite; }
  @keyframes scan-small { 0%, 100% { top: 14%; opacity: 0.85; } 50% { top: 84%; opacity: 0.85; } }

  /* ---------- Float chips ---------- */
  .float-chip { animation: float 5.5s ease-in-out infinite; }
  .float-chip-delay { animation: float 5.5s ease-in-out infinite; animation-delay: 1.4s; }
  @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

  /* ---------- Hero card: verification checklist ---------- */
  .check-icon {
    border-color: rgba(255,255,255,0.15); background-color: transparent;
    animation: check-bg 0.35s ease forwards; animation-delay: var(--d);
  }
  .check-icon svg { opacity: 0; transform: scale(0.4); animation: check-mark 0.35s ease forwards; animation-delay: var(--d); }
  @keyframes check-bg { to { background-color: var(--accent-teal); border-color: var(--accent-teal); } }
  @keyframes check-mark { to { opacity: 1; transform: scale(1); } }

  /* ---------- Pulse dot ---------- */
  .pulse-dot::before {
    content: ''; position: absolute; inset: 0; border-radius: 9999px;
    background-color: var(--accent-teal); opacity: 0.75;
    animation: pulse-ring 2s cubic-bezier(0,0,0.2,1) infinite;
  }
  @keyframes pulse-ring { 0% { transform: scale(1); opacity: 0.6; } 75%, 100% { transform: scale(2.2); opacity: 0; } }

  .pulse-ring-cyan {
    position: relative;
  }
  .pulse-ring-cyan::before {
    content: ''; position: absolute; inset: -4px; border-radius: 9999px;
    border: 1px solid var(--accent-cyan); opacity: 0.5;
    animation: pulse-ring 2.4s cubic-bezier(0,0,0.2,1) infinite;
  }

  /* ---------- FAQ accordion ---------- */
  details > summary { list-style: none; cursor: pointer; }
  details > summary::-webkit-details-marker { display: none; }
  .faq-icon { transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease; }
  details[open] .faq-icon {
    transform: rotate(45deg);
    background-color: var(--navy-950);
    border-color: var(--navy-950);
    color: #fff;
  }
  details .faq-answer {
    overflow: hidden; max-height: 0; opacity: 0;
    transition: max-height 0.35s ease, opacity 0.35s ease, margin-top 0.35s ease;
  }
  details[open] .faq-answer { max-height: 12rem; opacity: 1; margin-top: 0.75rem; }

  /* ---------- Accessibility & motion ---------- */
  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
    outline: 2px solid var(--accent-cyan); outline-offset: 2px; border-radius: 4px;
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .scan-line, .illus-scan, .float-chip, .float-chip-delay, .pulse-dot::before, .pulse-ring-cyan::before {
      animation: none !important;
    }
    .check-icon, .check-icon svg {
      animation: none !important; opacity: 1 !important; transform: none !important;
      background-color: var(--accent-teal) !important; border-color: var(--accent-teal) !important;
    }
    .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    .group:hover .plus-mark { transform: none; }
  }