/* =========================
       Base reset and variables
       ========================= */
    *, *::before, *::after { box-sizing: border-box; }
    html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
    :root {
      /* Palette */
      --bg: #0a1b3f;          /* dark navy */
      --bg-alt: #0f244f;
      --surface: #ffffff;     /* cards on light */
      --ink: #101828;         /* text on light */
      --muted: #667085;
      --brand: #2563eb;       /* blue */
      --brand-strong: #1d4ed8;
      --accent: #d83b01;      /* action btn color */
      --success: #16a34a;
      --border: #e5e7eb;
      --shadow: 0 10px 30px rgba(2,6,23,.12);
      --radius: 14px;
      --container: min(1120px, 92vw);

      /* Typography */
      --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      --h1: clamp(2rem, 3vw + 1rem, 3rem);
      --h2: clamp(1.25rem, 1.2vw + 1rem, 1.75rem);
      --lead: clamp(1rem, .5vw + .9rem, 1.125rem);
    }
    @media (prefers-color-scheme: dark) {
      :root {
        --surface: #0f172a;   /* card bg on dark */
        --ink: #e5e7eb;       /* text on dark */
        --muted: #94a3b8;
        --border: #1f2a44;
        --shadow: 0 10px 30px rgba(0,0,0,.35);
      }
    }

    body { margin: 0; font-family: var(--font); color: var(--ink); background: #f8fafc; }
    @media (prefers-color-scheme: dark) { body { background: #0b1226; } }

    .container { width: var(--container); margin-inline: auto; }

    /* =========================
       Topbar (sticky) 
       ========================= */
    .topbar { position: sticky; top: 0; z-index: 50; background: var(--bg); color: #fff; border-bottom: 1px solid rgba(255,255,255,.08); }
    .topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; }
    .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: .2px; }
    .brand svg { width: 28px; height: 28px; }
    .contact { display: flex; align-items: center; gap: 10px; }
    .contact a { color: #fff; text-decoration: none; font-weight: 600; }
    .contact a:hover, .contact a:focus-visible { text-decoration: underline; color: #60a5fa; transform: scale(1.03)}
    .cta-top { padding: 8px 14px; border-radius: 10px; background: var(--accent); color: #fff; text-decoration: none; font-weight: 700; }
    .cta-top:hover, .cta-top:focus-visible { filter: brightness(1.08); box-shadow: 0 6px 18px rgba(216,59,1,.35); }

    /* =========================
       Hero
       ========================= */
    .hero { position: relative; background: radial-gradient(1200px 560px at 70% -10%, rgba(37,99,235,.35), transparent 55%), linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%); color: #fff; overflow: clip; }
    .hero-inner { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: center; padding: 64px 0 72px; }
    .hero-media { display: flex; align-items: center; justify-content: center; }
    .hero-media img { max-width: 420px; width: 100%; height: auto; filter: drop-shadow(0 20px 50px rgba(0,0,0,.4)); border-radius: 12px; }
    .eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; font-size: .9rem; opacity: .95; backdrop-filter: blur(6px); }
    .hero h1 { font-size: var(--h1); line-height: 1.1; margin: 14px 0 10px; }
    .hero h2 { font-size: var(--h2); font-weight: 600; margin: 0 0 12px; opacity: .95; }
    .lead { font-size: var(--lead); opacity: .95; }
    .price-badge { display: inline-flex; align-items: center; gap: 8px; margin: 18px 0; background: #fff; color: #0a1b3f; padding: 8px 14px; border-radius: 999px; font-weight: 800; }

    .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
    .btn { --btn-bg: var(--accent); --btn-ink: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 18px; border-radius: 10px; background: var(--btn-bg); color: var(--btn-ink); text-decoration: none; font-weight: 800; border: 0; cursor: pointer; box-shadow: 0 8px 22px rgba(216,59,1,.28); transition: transform .12s ease, box-shadow .2s ease; }
    .btn:hover, .btn:focus-visible { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(216,59,1,.38); }
    .btn.secondary { --btn-bg: transparent; --btn-ink: #fff; border: 1px solid rgba(255,255,255,.28); box-shadow: none; }

    /* =========================
       Section shells
       ========================= */
    section { padding: 56px 0; }
    section h2 { font-size: var(--h2); margin: 0 0 18px; text-transform: uppercase; letter-spacing: .3px; color: var(--bg); }
    @media (prefers-color-scheme: dark) { section h2 { color: #e2e8f0; } }
    .muted { color: var(--muted); }

    /* Benefits grid */
    .benefits { background: #f8fafc; }
    @media (prefers-color-scheme: dark) { .benefits { background: #0b1226; } }
    .benefit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
    .benefit { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); text-align: left; }
    .benefit h3 { margin: 10px 0 6px; font-size: 1.05rem; }
    .benefit p { margin: 0; color: var(--muted); }
    .benefit .icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; background: rgba(37,99,235,.1); }

    /* Pricing table */
    .pricing .note { color: var(--muted); margin-top: 8px; }
    .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
    table { width: 100%; border-collapse: collapse; min-width: 800px; }
    th, td { padding: 14px 16px; border-bottom: 1px solid var(--border); text-align: left; }
    thead th { position: sticky; top: 0; background: #0f244f; color: #fff; font-weight: 700; }
    tbody tr:hover { background: rgba(37,99,235,.06); }
    .badge { display: inline-block; padding: 4px 10px; border-radius: 999px; background: rgba(37,99,235,.12); color: #0a1b3f; font-weight: 700; font-size: .9rem; }
    .stock { display:inline-block; padding: 4px 10px; border-radius: 999px; font-weight:700; font-size:.85rem; background: rgba(22,163,74,.12); color:#065f46; }
    .stock.medium { background: rgba(234,179,8,.15); color:#7c2d12; }
    .btn.small { padding: 8px 12px; font-weight: 700; border-radius: 8px; box-shadow: none; }

    /* Comparison */
    .comparison .table-wrap { margin-top: 12px; }

    /* Use cases */
    .cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
    .case { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }

    /* Form */
    .form-section { background: #f8fafc; }
    @media (prefers-color-scheme: dark) { .form-section { background: #0b1226; } }
    .form { max-width: 560px; margin-inline: auto; display: grid; gap: 12px; }
    .field { display: grid; gap: 6px; text-align: left; }
    .field label { font-weight: 600; font-size: .95rem; }
    .input, textarea {-webkit-appearance: none;-moz-appearance: none;appearance: none; width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--ink); }
    .input:focus, textarea:focus { outline: 3px solid rgba(37,99,235,.3); border-color: #2563eb; }
    .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .hint { color: var(--muted); font-size: .9rem; }
select {-webkit-appearance: none;-moz-appearance: none;appearance: none;width: 100%;padding: 12px 14px;border: 1px solid var(--border);border-radius: 10px;background: var(--surface);color: var(--ink);background-image: url("data:image/svg+xml;utf8,<svg fill='%23000' height='20' viewBox='0 0 20 20' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M5.516 7.548l4.484 4.955 4.484-4.955z'/></svg>");background-repeat: no-repeat;background-position: right 12px center;background-size: 16px;padding-right: 36px;}
select:focus {outline: 3px solid rgba(37,99,235,.3);border-color: #2563eb;}
.wpcf7 .grid-2 {display: grid;grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));gap: 12px;max-width: 560px;margin-inline: auto;}
.hidden-fields-container {display: none !important;border: none !important;padding: 0 !important;margin: 0 !important;}
.wpcf7 .grid-1 {display: grid;grid-template-columns: 1fr;gap: 12px;max-width: 560px;margin-inline: auto;}
.wpcf7 input[type="submit"] {display: block;width: 100%;max-width: 560px;margin: 8px auto 0;background: #e94b0b;color: #fff;font-weight: 700;font-size: 1rem;border: none;border-radius: 10px;padding: 14px 0;cursor: pointer;box-shadow: 0 4px 10px rgba(0,0,0,0.1);transition: background .2s ease;}
.wpcf7 input[type="submit"]:hover {background: #cf3e00;}
.wpcf7-form .wpcf7-not-valid {
  border: 2px solid #e74c3c !important;
  background-color: #fffaf9 !important;
}

.wpcf7-form .wpcf7-not-valid-tip {
  display: block;
  color: #e74c3c;
  font-size: 13px;
  margin-top: 4px;
}
.wpcf7 .screen-reader-response {
  display: none !important;
}
.wpcf7 .wpcf7-response-output {
  margin-top: 15px !important;}
/* FAQ */
.faq-item {border: 1px solid var(--border);border-radius: var(--radius);background: #E9EFFD;box-shadow: var(--shadow);margin-bottom: 10px;overflow: hidden;}
.faq-q {width: 100%;background: #E9EFFD;color: #0f244f;border: 0;text-align: left;padding: 14px 16px;font-size: 16px;cursor: pointer;font-weight: 700;}
.faq-item.active .faq-q {background: #DDE7FC;}
.faq-a {display: none;padding: 14px 16px;color: #0f244f; background: #F7FAFF;}
.faq-item.active .faq-a { display: block; }
    /* Legal */
    .legal { background: #f8fafc; }
    @media (prefers-color-scheme: dark) { .legal { background: #0b1226; } }
    .legal p { max-width: 70ch; margin-inline: auto; }

    /* Footer */
    footer { background: var(--bg); color: #fff; padding: 18px 0; text-align: center; font-size: .95rem; }
.recaptcha-notice {
  font-size: 0.85rem;
  opacity: 0.8;
  margin-top: 10px;
  color: #fff;
}

.recaptcha-notice a.footer-v3 {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.2s ease;
}

.recaptcha-notice a.footer-v3:hover {
  opacity: 0.7;
}
.grecaptcha-badge { visibility: hidden; }

    /* Responsive */
    @media (max-width: 960px) {
      .hero-inner { grid-template-columns: 1fr; text-align: center; }
      section h2 { text-align: center; }
      .benefit-grid { grid-template-columns: repeat(2, 1fr); }
      .cases { grid-template-columns: 1fr; }
      .grid-2 { grid-template-columns: 1fr; }
    }
    @media (max-width: 560px) { .benefit-grid { grid-template-columns: 1fr; } }

    /* Motion preferences */
    @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
     /* Overrides per request */
    .faq h2 { text-align: left; }
    .pricing table th:last-child, .pricing table td:last-child { display: none; }
    .pricing table td:first-child, .pricing table th:first-child { background: rgba(37,99,235,.10); }
    .pricing .badge { background: transparent; padding: 0; color: inherit; }