
  html { scroll-behavior: smooth; }
  body {
    background: #fafaf7;
    color: #0e0f0c;
    font-family: "Inter", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  ::selection { background: #f5b800; color: #0e0f0c; }

  .ff-d { font-family: "Plus Jakarta Sans", "Inter", system-ui, sans-serif; }

  /* Display headings */
  .h-hero {
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
    font-size: clamp(32px, 4.8vw, 68px);
  }
  .h-section {
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.06;
    font-size: clamp(26px, 3.4vw, 48px);
  }
  .h-card {
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.18;
    font-size: 20px;
  }
  .h-eyebrow {
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: #6b6c66;
  }
  .h-eyebrow .pill {
    display:inline-block; padding: 2px 8px; background:#0e0f0c; color:#f5b800;
    border-radius: 999px; margin-right: 10px; font-size: 10px;
  }

  /* Top promo bar */
  .promo {
    background: #0e0f0c; color: #f3f2ed;
    font-size: 12.5px; font-weight: 500;
  }
  .promo .live {
    display:inline-block; width:7px; height:7px; border-radius:50%;
    background: #f5b800;
    animation: pulse 1.8s ease-in-out infinite;
    margin-right: 8px; vertical-align: 1px;
  }
  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

  /* Pill nav */
  .nav-pill {
    background: #ffffff;
    border: 1px solid #d9d8d0;
    border-radius: 999px;
  }

  /* Buttons */
  .btn {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 600; font-size: 14px;
    padding: 14px 22px; border-radius: 999px;
    transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
    border: 1px solid transparent;
    white-space: nowrap;
  }
  .btn-amber {
    background: #f5b800; color: #0e0f0c; border-color: #f5b800;
  }
  .btn-amber:hover { background: #ffcc1f; transform: translateY(-1px); }
  .btn-ink {
    background: #0e0f0c; color: #ffffff; border-color: #0e0f0c;
  }
  .btn-ink:hover { background: #1f2120; transform: translateY(-1px); }
  .btn-ghost {
    background: transparent; color: #0e0f0c; border-color: #0e0f0c;
  }
  .btn-ghost:hover { background: #0e0f0c; color: #ffffff; }

  /* Cards */
  .card {
    background: #ffffff;
    border: 1px solid #e6e5dd;
    border-radius: 22px;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .card:hover {
    transform: translateY(-2px);
    border-color: #0e0f0c;
    box-shadow: 0 12px 32px -16px rgba(14,15,12,0.15);
  }

  /* Trust badges */
  .trust {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 999px;
    background: #ffffff; border: 1px solid #e6e5dd;
    font-size: 12.5px; font-weight: 500; color: #1f2120;
  }
  .trust .tick {
    color: #2f6f4f; font-size: 14px;
  }

  /* Stat block */
  .stat-num {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 800; letter-spacing: -0.04em;
    line-height: 0.95;
    font-size: clamp(32px, 4vw, 56px);
    color: #0e0f0c;
  }
  .stat-num .sup { color: #f5b800; }

  /* Marquee */
  @keyframes scrollX {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }
  .marquee { animation: scrollX 50s linear infinite; }
  .no-scrollbar::-webkit-scrollbar { display: none; }
  .no-scrollbar { scrollbar-width: none; }

  /* Numbered point */
  .num-circle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 50%;
    background: #0e0f0c; color: #f5b800;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 700; font-size: 18px; letter-spacing: -0.02em;
  }

  /* Highlight underline */
  .hl {
    background-image: none;
    padding: 0;
  }

  /* Step pill */
  .step-pill {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%;
    background: #fef3c7; color: #0e0f0c;
    font-weight: 700; font-size: 14px;
  }

  /* Industry chip */
  .chip {
    border: 1px solid #e6e5dd; background: #ffffff;
    border-radius: 16px; padding: 18px 20px;
    transition: border-color .2s ease, transform .2s ease;
  }
  .chip:hover { border-color: #0e0f0c; transform: translateY(-1px); }

  /* Inputs */
  .input {
    width: 100%;
    background: #ffffff;
    border: 1px solid #e6e5dd;
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 15px;
    color: #0e0f0c;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
  }
  .input::placeholder { color: #9b9c95; }
  .input:focus { border-color: #0e0f0c; box-shadow: 0 0 0 3px rgba(245,184,0,0.25); }
  textarea.input { resize: vertical; min-height: 120px; line-height: 1.5; }

  /* Reveal */
  .reveal { opacity: 0; transform: translateY(10px); transition: opacity .7s ease, transform .7s ease; }
  .reveal.in { opacity: 1; transform: none; }

  /* Drawer */
  .drawer { position: fixed; inset: 0; z-index: 60; background: #0e0f0c; color: #fafaf7; transform: translateY(-100%); transition: transform .45s cubic-bezier(.6,.05,.2,1); }
  .drawer.open { transform: translateY(0); }

  /* FAQ */
  details summary { list-style: none; cursor: pointer; }
  details summary::-webkit-details-marker { display: none; }
  details[open] .chev { transform: rotate(45deg); }
  .chev { transition: transform .25s ease; display: inline-block; }

  /* Service card icon */
  .service-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 16px;
    background: #fef3c7;
  }
  .service-icon .material-symbols-outlined {
    font-size: 26px; color: #0e0f0c;
    font-variation-settings: 'wght' 400;
  }

  /* Logo tile */
  .logo-tile {
    height: 64px; min-width: 160px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 28px;
    background: #ffffff; border: 1px solid #e6e5dd; border-radius: 16px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 700; font-size: 16px; letter-spacing: -0.01em;
    color: #1f2120;
    white-space: nowrap;
  }

  /* Case study metric */
  .metric {
    background: #fafaf7; border: 1px solid #e6e5dd;
    border-radius: 14px; padding: 18px 20px;
  }

  /* Sticky offer in CTA */
  .ribbon {
    background: #0e0f0c;
    color: #f5b800;
    padding: 8px 14px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.04em;
    display: inline-block;
  }

  /* Google card */
  .g-card { background: #ffffff; border: 1px solid #e6e5dd; border-radius: 20px; padding: 28px; }
  .g-star { color: #f5b800; }

  /* Section divider */
  .div-line { height: 1px; background: #e6e5dd; }

  /* Form validation */
  .input.error { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,0.15); }
  .field-error { font-size: 12px; color: #dc2626; margin-top: 5px; display: none; }
  .field-error.show { display: block; }
  .pill-group-error { font-size: 12px; color: #dc2626; margin-top: 6px; display: none; }
  .pill-group-error.show { display: block; }
