/* INQAIRY — shared styles for all pages. Edit here once; every page updates. */
/* Inter, self-hosted (SIL Open Font License, see /fonts/Inter-LICENSE.txt). One variable file per subset covers weights 400-800. */
@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:400 800;src:url(/fonts/inter-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:400 800;src:url(/fonts/inter-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* ============ BRAND TOKENS ============ */
  :root {
    --paper: #FAFAF7;
    --card: #FFFFFF;
    --ink: #1C2B3A;
    --ink-soft: #4A5B6D;
    --ai-blue: #3F9BDD;
    --ai-blue-deep: #1F6FAE;
    --ai-blue-text: #1F6FAE; /* text-safe blue on light backgrounds (5:1) */
    --ai-blue-soft: #E8F3FC;
    --on-blue: #0F2233;
    --warn: #B33A2E;
    --warn-bg: #FBEAE7;
    --pass: #2F6B4F;
    --pass-bg: #EAF3EE;
    --rule: #E4E1D8;
    --shadow: 0 1px 2px rgba(28,43,58,.05), 0 12px 32px rgba(28,43,58,.08);
    --shadow-lg: 0 2px 4px rgba(28,43,58,.06), 0 24px 60px rgba(28,43,58,.14);
    --frame: 1140px;
    --radius: 16px;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --paper: #121D27;
      --card: #192733;
      --ink: #EDF0F2;
      --ink-soft: #A6B2BE;
      --ai-blue-text: #3F9BDD;
      --ai-blue-deep: #7DBCEB;
      --warn: #F0897E;
      --pass: #6CC49B;
      --ai-blue-soft: #16304A;
      --warn-bg: #321C19;
      --pass-bg: #172A21;
      --rule: #2A3A48;
      --shadow: 0 1px 2px rgba(0,0,0,.3);
      --shadow-lg: 0 2px 4px rgba(0,0,0,.3), 0 24px 60px rgba(0,0,0,.35);
    }
  }

  /* ============ BASE ============ */
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: 80px; }
  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  a { color: inherit; }
  p { margin: 0 0 16px; text-align: left; text-wrap: pretty; }
  .frame { max-width: var(--frame); margin: 0 auto; padding: 0 32px; }
  .center { text-align: center; }

  /* Brand wordmark — always INQAIRY, AI in light blue */
  .brand { font-family: 'Inter', sans-serif; letter-spacing: .04em; font-weight: 800; white-space: nowrap; }
  .brand span { color: var(--ai-blue-text); }
  .ai { color: var(--ai-blue-text); }
  .logo { display: inline-flex; align-items: center; text-decoration: none; color: var(--ink); }
  .logo-svg { height: 36px; width: auto; display: block; }
  footer .logo-svg { height: 26px; }
  .logo span { color: var(--ai-blue); }

  /* Headings */
  h1, h2, h3 { font-family: 'Inter', sans-serif; color: var(--ink); }
  h2 { font-weight: 700; font-size: clamp(30px, 3.8vw, 44px); line-height: 1.12; letter-spacing: -.025em; margin: 0 0 24px; }
  .eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ai-blue-deep); margin: 0 0 14px; text-align: left; }
  .lead { font-size: 19px; color: var(--ink-soft); }

  /* Buttons */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    background: var(--ai-blue); color: var(--on-blue);
    font: 600 17px/1 'Inter', sans-serif;
    padding: 18px 36px; border-radius: 12px; border: 0;
    text-decoration: none; cursor: pointer;
    box-shadow: 0 8px 22px rgba(63,155,221,.32);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  }
  .btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(63,155,221,.42); background: #4FA7E6; }
  .btn .arr { transition: transform .18s ease; }
  .btn:hover .arr { transform: translateX(4px); }
  .btn.sm { font-size: 14.5px; padding: 11px 20px; box-shadow: none; border-radius: 10px; }
  .btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--rule); }
  .btn.ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ai-blue); background: transparent; }

  a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--ai-blue-deep); outline-offset: 3px; border-radius: 8px; }

  /* ============ HEADER ============ */
  header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(250,250,247,.86);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease, background .2s ease;
  }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) header { background: rgba(18,29,39,.86); } }
  header.scrolled { border-bottom-color: var(--rule); }
  header .frame { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 24px; }
  nav { display: flex; align-items: center; gap: 30px; }
  nav a.link { font-size: 15px; font-weight: 500; color: var(--ink-soft); text-decoration: none; transition: color .15s; }
  nav a.link:hover { color: var(--ink); }

  /* ============ HERO ============ */
  .hero { position: relative; padding: 92px 0 72px; text-align: center; overflow: hidden; }
  .hero::before {
    content: ""; position: absolute; inset: -20% -10% auto; height: 640px; z-index: -1;
    background: radial-gradient(closest-side, rgba(63,155,221,.16), transparent 70%);
  }
  .pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 14px; border-radius: 999px;
    background: var(--ai-blue-soft); color: var(--ai-blue-deep);
    font-size: 13.5px; font-weight: 600; margin-bottom: 26px;
  }
  .pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ai-blue); box-shadow: 0 0 0 0 rgba(63,155,221,.6); animation: ping 2s infinite; }
  @keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(63,155,221,.55); } 80%,100% { box-shadow: 0 0 0 9px rgba(63,155,221,0); } }
  .hero h1 {
    font-weight: 800;
    font-size: clamp(30px, 4.6vw, 60px);
    line-height: 1.08;
    letter-spacing: -.02em;
    text-transform: uppercase;
    margin: 0 auto 30px;
  }
  .hero .lead { font-size: 20px; line-height: 1.6; text-align: center; text-wrap: balance; max-width: 760px; margin: 0 auto 38px; }
  .nowrap { white-space: nowrap; }
  .hero-ctas { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
  .hero .small { font-size: 14px; color: var(--ink-soft); margin: 18px 0 0; text-align: center; }
  .trust {
    display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 28px;
    margin: 34px 0 0; padding: 0; list-style: none;
    font-size: 14.5px; font-weight: 500; color: var(--ink-soft);
  }
  .trust li { display: inline-flex; align-items: center; gap: 8px; }
  .trust svg { width: 18px; height: 18px; color: var(--ai-blue); flex: none; }

  /* ============ DEMO (two equal boxes) ============ */
  .demo { margin-top: 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; text-align: left; align-items: stretch; }
  .box {
    background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
    box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden;
  }
  .box-head {
    display: flex; align-items: center; gap: 12px;
    padding: 18px 22px; border-bottom: 1px solid var(--rule);
  }
  .step-no {
    width: 30px; height: 30px; border-radius: 50%; flex: none;
    background: var(--ai-blue); color: var(--on-blue);
    font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center;
  }
  .box-title { font-weight: 700; font-size: 16.5px; line-height: 1.3; }
  .box-title small { display: block; font-weight: 500; font-size: 13.5px; color: var(--ink-soft); }
  .box-body { padding: 22px; flex: 1; display: flex; flex-direction: column; }

  /* Chat window */
  .chat { flex: 1; display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; }
  .chat-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--rule); background: var(--card); font-size: 13px; font-weight: 600; color: var(--ink-soft); }
  .chat-bar i { width: 10px; height: 10px; border-radius: 50%; background: #E0DDD4; display: inline-block; }
  .chat-bar .spark { margin-left: 6px; color: var(--ai-blue); }
  .chat-log { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 12px; min-height: 270px; }
  .msg { max-width: 88%; padding: 11px 15px; font-size: 15px; line-height: 1.5; border-radius: 14px; opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease; }
  .msg.show { opacity: 1; transform: none; }
  .msg.q { align-self: flex-end; background: var(--ai-blue); color: var(--on-blue); border-bottom-right-radius: 4px; font-weight: 500; }
  .msg.a { align-self: flex-start; background: var(--card); border: 1px solid var(--rule); border-bottom-left-radius: 4px; }
  .msg.a ol { margin: 6px 0 0; padding-left: 20px; }
  .msg.a li { margin: 2px 0; }
  .typing { display: inline-flex; gap: 4px; }
  .typing b { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-soft); opacity: .4; animation: blink 1.2s infinite; }
  .typing b:nth-child(2) { animation-delay: .2s; } .typing b:nth-child(3) { animation-delay: .4s; }
  @keyframes blink { 0%,60%,100% { opacity: .25; } 30% { opacity: .9; } }
  .chat-input { display: flex; align-items: center; gap: 10px; margin: 0 12px 12px; padding: 11px 14px; border: 1px solid var(--rule); border-radius: 12px; background: var(--card); font-size: 15px; min-height: 46px; }
  .chat-input .txt { flex: 1; color: var(--ink); }
  .chat-input .txt:empty::before { content: "Ask anything…"; color: var(--ink-soft); opacity: .7; }
  .caret { display: inline-block; width: 2px; height: 18px; background: var(--ai-blue); vertical-align: -3px; animation: caret 1s steps(1) infinite; }
  @keyframes caret { 50% { opacity: 0; } }
  .send { width: 30px; height: 30px; border-radius: 8px; background: var(--ai-blue); color: var(--on-blue); display: flex; align-items: center; justify-content: center; flex: none; }
  .send svg { width: 15px; height: 15px; }
  .missing {
    display: flex; align-items: center; gap: 10px;
    margin-top: 14px; padding: 13px 16px; border-radius: 10px;
    background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn);
    font-weight: 700; font-size: 15px;
    opacity: 0; transform: scale(.97); transition: opacity .4s ease, transform .4s ease;
  }
  .missing.show { opacity: 1; transform: none; }
  .missing .ex { width: 22px; height: 22px; border-radius: 50%; background: var(--warn); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; flex: none; }
  .replay { margin-top: 10px; align-self: flex-start; background: none; border: 0; color: var(--ink-soft); font: 500 13px 'Inter', sans-serif; cursor: pointer; padding: 4px 0; }
  .replay:hover { color: var(--ai-blue-deep); }

  /* Report mini */
  .score { border-left: 4px solid var(--warn); padding: 4px 0 4px 16px; margin-bottom: 18px; }
  .score .k { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
  .score .v { font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--warn); line-height: 1.15; }
  .compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
  .col { border-radius: 12px; padding: 16px 12px; text-align: center; }
  .col.you { background: var(--warn-bg); border: 1px solid var(--warn); }
  .col.them { background: var(--pass-bg); border: 1px solid var(--pass); }
  .col .k { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
  .col .n { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin: 6px 0 0; }
  .col .s { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 10px; }
  .badge { display: inline-block; padding: 4px 11px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #fff; }
  .badge.low { background: var(--warn); } .badge.high { background: var(--pass); }
  .findings { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
  .findings li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 15px; font-weight: 500; }
  .findings .m { width: 20px; height: 20px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; font-weight: 700; }
  .findings .m.f { background: var(--warn); } .findings .m.p { background: var(--pass); }
  .findings .lock { margin-left: auto; color: var(--ink-soft); font-size: 12.5px; font-weight: 500; display: inline-flex; gap: 5px; align-items: center; }
  .findings .lock svg { width: 13px; height: 13px; }
  .ex-tag { display: inline-block; margin: 0 0 12px; padding: 3px 10px; border-radius: 999px; background: var(--ai-blue-soft); color: var(--ai-blue-deep); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
  .note { font-size: 13px; color: var(--ink-soft); text-align: center; margin: 16px 0 0; }

  /* ============ SECTIONS ============ */
  section { padding: 104px 0; }
  .alt { background: var(--card); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }

  /* WHY — light blue band */
  .blue { background: var(--ai-blue); color: var(--on-blue); position: relative; overflow: hidden; }
  .blue::after { content: ""; position: absolute; right: -180px; top: -180px; width: 520px; height: 520px; border-radius: 50%; background: rgba(255,255,255,.10); }
  .blue .eyebrow { color: var(--on-blue); opacity: .8; }
  .blue p { color: var(--on-blue); }
  .blue strong { font-weight: 700; }
  .blue .callout { grid-column: 1 / -1; background: #fff; color: #1C2B3A; border-radius: 14px; padding: 22px 28px; margin: 8px 0 0; font-size: 19px; text-align: center; box-shadow: 0 14px 34px rgba(15,34,51,.18); }
  .blue .callout .brand { color: #1C2B3A; }
  .why-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 420px 1fr; gap: 60px; align-items: center; }
  .stat-card { background: #fff; color: #1C2B3A; border-radius: 20px; padding: 34px 32px 30px; box-shadow: 0 24px 60px rgba(15,34,51,.22); }
  .stat-card .k { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #4A5B6D; margin-bottom: 18px; }
  .bars { display: grid; gap: 16px; margin-bottom: 18px; }
  .bar-row { display: grid; grid-template-columns: 92px 1fr 64px; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; color: #4A5B6D; }
  .bar-track { height: 14px; background: #EEF1F4; border-radius: 8px; overflow: hidden; }
  .bar-fill { height: 100%; width: 0; border-radius: 8px; transition: width 1.4s cubic-bezier(.2,.8,.2,1); }
  .bar-fill.old { background: #B9C4CF; }
  .bar-fill.new { background: var(--ai-blue); }
  .bar-row .val { font-size: 22px; font-weight: 800; color: #1C2B3A; text-align: right; letter-spacing: -.02em; }
  .stat-big { font-size: 64px; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--ai-blue-deep); }
  .stat-big small { font-size: 20px; font-weight: 700; letter-spacing: 0; color: #1C2B3A; margin-left: 6px; }
  .stat-card p { color: #4A5B6D; font-size: 14.5px; margin: 10px 0 0; text-align: left; }
  .blue h2.pull { color: var(--on-blue); }
  .pull { font-size: clamp(24px, 2.6vw, 30px); font-weight: 700; letter-spacing: -.02em; line-height: 1.25; margin: 0 0 22px; text-align: left !important; }

  /* WHAT WE CHECK */
  .cards4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 40px 0 36px; }
  .card {
    background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
    padding: 26px 22px; box-shadow: var(--shadow);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--ai-blue); }
  .icon { width: 48px; height: 48px; border-radius: 12px; background: var(--ai-blue-soft); color: var(--ai-blue-deep); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
  .icon svg { width: 24px; height: 24px; }
  .card h3 { font-size: 17px; font-weight: 700; margin: 0; line-height: 1.35; letter-spacing: -.01em; }
  .aside { font-style: italic; color: var(--ink-soft); font-size: 16px; border-left: 3px solid var(--ai-blue); padding-left: 18px; margin: 24px 0 0; }


  /* WHAT YOU RECEIVE */
  .recv-wrap { margin-top: 64px; }
  .recv-wrap h3.recv-title { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 20px; text-align: center; }
  .recv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
  .recv-card { display: flex; gap: 14px; align-items: flex-start; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); }
  .recv-ic { width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--ai-blue-soft); color: var(--ai-blue-deep); display: flex; align-items: center; justify-content: center; }
  .recv-ic svg { width: 24px; height: 24px; }
  .recv-card h3 { font-size: 16.5px; font-weight: 700; margin: 0 0 2px; letter-spacing: -.01em; }
  .recv-card p { margin: 0; font-size: 15px; color: var(--ink-soft); line-height: 1.5; }

  /* REPORT PREVIEW */
  .preview-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 60px; align-items: center; }
  .checks { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 14px; }
  .checks li { display: flex; gap: 12px; align-items: flex-start; font-weight: 500; }
  .checks svg { width: 22px; height: 22px; color: var(--ai-blue); flex: none; margin-top: 2px; }
  .browser { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; transform: perspective(1400px) rotateY(-5deg) rotateX(2deg); transition: transform .5s ease; }
  .browser:hover { transform: none; }
  .browser-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--rule); background: var(--paper); }
  .browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: #E0DDD4; }
  .url { margin-left: 10px; flex: 1; background: var(--card); border: 1px solid var(--rule); border-radius: 8px; padding: 5px 12px; font-size: 12.5px; color: var(--ink-soft); display: flex; align-items: center; gap: 6px; }
  .url svg { width: 12px; height: 12px; }
  .rep { padding: 28px 30px 0; position: relative; }
  .rep .kick { font-size: 12.5px; color: var(--ink-soft); }
  .rep .name { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
  .rep .sub { font-size: 13px; font-style: italic; color: var(--ink-soft); margin-bottom: 18px; }
  .rep .score { margin-bottom: 16px; }
  .rep .score .v { font-size: 24px; }
  .rep .rep-h { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin: 18px 0 8px; }
  .blurred { filter: blur(5px); user-select: none; pointer-events: none; }
  .blurred { padding-bottom: 40px; }
  .blurred .line { height: 12px; border-radius: 6px; background: #C9D2DB; margin: 12px 0; }
  .lock-overlay {
    position: absolute; left: 0; right: 0; bottom: 0; height: 190px;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--card) 55%);
    display: flex; align-items: flex-end; justify-content: center; padding-bottom: 26px;
  }
  .lock-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 600; box-shadow: var(--shadow); }
  .lock-chip svg { width: 14px; height: 14px; }

  /* HOW IT WORKS */
  .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; position: relative; }
  .steps::before { content: ""; position: absolute; top: 34px; left: 12%; right: 12%; height: 2px; background: linear-gradient(90deg, var(--ai-blue) 0 50%, transparent 0) 0 0 / 14px 2px repeat-x; opacity: .5; }
  .step { position: relative; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 28px 26px; box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease; }
  .step:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
  .step .num { width: 48px; height: 48px; border-radius: 50%; background: var(--ai-blue); color: var(--on-blue); font-size: 20px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; box-shadow: 0 0 0 6px var(--ai-blue-soft); }
  .step h3 { font-size: 21px; font-weight: 700; letter-spacing: -.015em; margin: 0 0 8px; }
  .step p { color: var(--ink-soft); margin: 0; }

  /* PRICE */
  .price-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
  .price-card { position: relative; background: var(--card); border: 2px solid var(--ai-blue); border-radius: 20px; padding: 44px 38px 38px; text-align: center; box-shadow: var(--shadow-lg); }
  .price-tag { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: var(--ai-blue); color: var(--on-blue); font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px; white-space: nowrap; }
  .price { font-size: 80px; font-weight: 800; letter-spacing: -.045em; line-height: 1; }
  .price small { font-size: 20px; font-weight: 600; letter-spacing: 0; color: var(--ink-soft); margin-left: 4px; }
  .price-note { font-size: 15px; color: var(--ink-soft); margin: 12px 0 24px; text-align: center; }
  .ticks { list-style: none; padding: 0; margin: 0 auto 30px; display: inline-grid; gap: 10px; text-align: left; }
  .ticks li { display: flex; align-items: center; gap: 12px; font-weight: 600; }
  .ticks li::before { content: "✓"; width: 24px; height: 24px; border-radius: 50%; background: var(--ai-blue-soft); color: var(--ai-blue-deep); font-size: 13px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }

  /* REQUEST FORM */
  .form-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
  form.box { padding: 32px; display: grid; gap: 16px; }
  label { font-size: 14px; font-weight: 600; display: block; margin-bottom: 6px; }
  label .opt { color: var(--ink-soft); font-weight: 400; }
  input {
    width: 100%; font: inherit; font-size: 16px;
    padding: 14px 15px; border: 1.5px solid var(--rule); border-radius: 10px;
    background: var(--paper); color: var(--ink); transition: border-color .15s, box-shadow .15s;
  }
  input:focus-visible { outline: 3px solid var(--ai-blue-deep); outline-offset: 2px; border-color: var(--ai-blue-deep); }
  .form-foot { text-align: center; margin-top: 6px; }
  .form-foot .btn { width: 100%; }
  .form-foot .small { font-size: 14px; color: var(--ink-soft); margin: 12px 0 0; text-align: center; }
  .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
  .confirm.err { border-left-color: var(--warn); background: var(--warn-bg); }
  .confirm { display: none; padding: 16px 18px; border-left: 3px solid var(--ai-blue); background: var(--ai-blue-soft); border-radius: 8px; font-size: 15.5px; }

  /* FAQ */
  .faq { margin-top: 36px; display: grid; gap: 12px; }
  details { background: var(--card); border: 1px solid var(--rule); border-radius: 14px; padding: 0 24px; transition: border-color .2s, box-shadow .2s; }
  details[open] { border-color: var(--ai-blue); box-shadow: var(--shadow); }
  summary { cursor: pointer; font-weight: 600; font-size: 18px; list-style: none; position: relative; padding: 22px 40px 22px 0; }
  summary::-webkit-details-marker { display: none; }
  summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; background: var(--ai-blue-soft); color: var(--ai-blue-deep); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 500; transition: transform .2s; }
  details[open] summary::after { content: "–"; }
  details p { margin: 0 0 22px; color: var(--ink-soft); }

  /* CLOSING CTA */
  .closing { padding: 0 0 104px; }
  .closing-card { background: #1C2B3A; color: #fff; border-radius: 24px; padding: 64px 40px; text-align: center; position: relative; overflow: hidden; }
  .closing-card::before { content: ""; position: absolute; left: -120px; bottom: -160px; width: 420px; height: 420px; border-radius: 50%; background: rgba(63,155,221,.22); }
  .closing-card h2 { color: #fff; position: relative; margin-bottom: 14px; }
  .closing-card h2 .ai { color: var(--ai-blue); }
  .closing-card p { position: relative; text-align: center; margin: 0 0 30px; font-size: 18px; }
  .closing-card p { color: #C2CCD6; }
  .closing-card .btn { position: relative; }

  /* FOOTER */
  footer { background: #1C2B3A; color: #C2CCD6; padding: 48px 0; font-size: 14.5px; }
  footer .frame { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
  footer .logo { color: #fff; }
  footer .brand { color: #fff; }
  footer .brand span { color: var(--ai-blue); }
  footer a { color: #C2CCD6; }
  footer a:hover { color: #fff; }
  footer p { margin: 0; text-align: left; }

  /* Mobile sticky call-to-action */
  .mobile-cta { display: none; }

  /* ============ SCROLL REVEAL ============ */
  .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
  .reveal.in { opacity: 1; transform: none; }
  .reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .reveal { opacity: 1; transform: none; }
    .browser { transform: none; }
  }

  /* ============ RESPONSIVE ============ */
  @media (max-width: 1020px) {
    nav a.link { display: none; }
    .cards4 { grid-template-columns: repeat(2, 1fr); }
    .demo, .why-grid, .price-wrap, .form-wrap, .preview-grid { grid-template-columns: 1fr; gap: 36px; }
    .why-grid .stat-card { max-width: 520px; }
    .steps { grid-template-columns: 1fr; }
    .steps::before { display: none; }
    .browser { transform: none; }
  }
  @media (max-width: 640px) {
    body { font-size: 16px; }
    .frame { padding: 0 20px; }
    section { padding: 72px 0; }
    .hero { padding: 56px 0 56px; }
    .hero h1 br { display: none; }
    .hero .lead { font-size: 18px; }
    p { text-align: left; hyphens: manual; }
    .hero-ctas .btn { width: 100%; }
    .trust { justify-content: flex-start; flex-direction: column; align-items: center; }
    .cards4 { grid-template-columns: 1fr; }
    .box-body { padding: 16px; }
    .chat-log { min-height: 250px; }
    .bar-row { grid-template-columns: 76px 1fr 52px; }
    .price { font-size: 64px; }
    .closing { padding-bottom: 72px; }
    .closing-card { padding: 48px 22px; border-radius: 18px; }
    .closing-card .btn { width: 100%; }
    footer .frame { flex-direction: column; align-items: flex-start; }
    footer { padding-bottom: 96px; }
    .mobile-cta {
      display: block; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60;
      transform: translateY(140%); visibility: hidden; transition: transform .3s ease, visibility 0s linear .3s;
    }
    .mobile-cta.on { transform: none; visibility: visible; transition: transform .3s ease, visibility 0s; }
    .mobile-cta .btn { width: 100%; box-shadow: 0 10px 30px rgba(15,34,51,.28); }
  }
  @media print {
    header, .mobile-cta, .hero-ctas, .closing { display: none; }
    body { background: #fff; }
    .reveal { opacity: 1; transform: none; }
  }

/* ===== Interactive touch 1: industry switcher ===== */
.switcher { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.sw-label { font-size: 14.5px; font-weight: 600; color: var(--ink-soft); margin-right: 4px; }
.chip { font: 600 13.5px 'Inter', sans-serif; color: var(--ink); background: var(--card); border: 1.5px solid var(--rule); border-radius: 999px; padding: 7px 14px; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.chip:hover { border-color: var(--ai-blue); transform: translateY(-1px); }
.chip.on { background: var(--ai-blue); border-color: var(--ai-blue); color: var(--on-blue); }

/* ===== Interactive touch 2: report "scan" ===== */
.rep { overflow: hidden; }
.scanline { position: absolute; left: 0; right: 0; top: -40px; height: 40px; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(63,155,221,.28) 70%, rgba(63,155,221,.9) 96%, transparent); }
.rep.scanning .scanline { animation: scan 2.2s ease-in-out; }
@keyframes scan { 0% { top: -40px; opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.rep .findings li { transition: opacity .35s ease, transform .35s ease; }
.rep .findings li.pending { opacity: .15; transform: translateX(-6px); }
.v.checking { color: var(--ink-soft) !important; }

/* ===== Interactive touch 3: soft moving glow behind the headline ===== */
.hero::before { display: none; }
.glow { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.glow span { position: absolute; width: 620px; height: 620px; border-radius: 50%; filter: blur(70px); opacity: .55; }
.glow span:nth-child(1) { background: rgba(63,155,221,.30); left: 8%; top: -260px; animation: drift1 16s ease-in-out infinite alternate; }
.glow span:nth-child(2) { background: rgba(63,155,221,.18); right: 6%; top: -120px; animation: drift2 20s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(180px, 90px) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-200px, 60px) scale(.9); } }

/* ===== Founder card ===== */
.founder { display: flex; gap: 18px; align-items: flex-start; margin-top: 28px; padding: 20px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); }
.founder img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 4px var(--ai-blue-soft); }
.founder p { margin: 0 0 8px; }
.f-name { font-weight: 700; font-size: 18px; }
.f-text { color: var(--ink-soft); font-size: 15.5px; }
.f-sign { font-size: 14px; color: var(--ink-soft); margin: 0 !important; }
@media (max-width: 640px) { .founder { flex-direction: column; } }
@media (max-width: 640px) {
  header nav .btn.sm { display: none; }
  .chip { font-size: 12px; padding: 6px 8px; }
  .switcher { gap: 5px; flex-wrap: nowrap; }
}

/* ===== "How AI decides" flow map (replaces the 4 check cards) ===== */
.flowmap { position: relative; display: grid; grid-template-columns: 1.15fr .9fr 1fr; gap: 64px; align-items: center; margin: 40px 0 36px; padding: 34px 32px 26px; background: var(--card); border: 1px solid var(--rule); border-radius: 20px; box-shadow: var(--shadow); }
.fm-wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.fm-col { position: relative; z-index: 1; display: grid; gap: 12px; }
.fm-label { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 2px; }
.sig { display: flex; align-items: center; gap: 12px; background: var(--paper); border: 1px solid var(--rule); border-radius: 12px; padding: 10px 14px; font-weight: 600; font-size: 15px; line-height: 1.3; }
.sig .icon { width: 36px; height: 36px; margin: 0; border-radius: 9px; flex: none; }
.sig .icon svg { width: 18px; height: 18px; }
.sig-t { flex: 1; }
.sig .dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.sig.ok .dot { background: var(--pass); box-shadow: 0 0 0 4px rgba(47,107,79,.15); }
.sig.bad .dot { background: var(--warn); box-shadow: 0 0 0 4px rgba(179,58,46,.15); }
.sig.bad { border-color: rgba(179,58,46,.45); }
.fm-ai { text-align: center; background: var(--card); border: 2px solid var(--ai-blue); border-radius: 18px; padding: 22px 16px; box-shadow: 0 0 0 8px var(--ai-blue-soft); display: grid; gap: 6px; justify-items: center; }
.fm-sym svg { width: 52px; height: 52px; display: block; }
.fm-ai b { font-size: 15px; }
.fm-ai span:last-child { font-size: 13px; color: var(--ink-soft); }
.flowmap.live .fm-ai { animation: aipulse 2.4s ease-in-out infinite; }
@keyframes aipulse { 50% { box-shadow: 0 0 0 14px rgba(63,155,221,.10); } }
.fm-out { background: var(--paper); border: 1px solid var(--rule); border-radius: 14px; padding: 16px; display: grid; gap: 8px; }
.fm-out-h { font-size: 14px; color: var(--ink-soft); font-style: italic; }
.fm-row { border-radius: 9px; padding: 9px 12px; font-size: 14.5px; font-weight: 600; }
.fm-row.win { background: var(--pass-bg); color: var(--pass); }
.fm-row.miss { background: var(--warn-bg); color: var(--warn); border: 1px dashed var(--warn); }
.fw { fill: none; stroke-width: 2; }
.fw.ok { stroke: #BFD9EE; } .fw.bad { stroke: rgba(179,58,46,.35); stroke-dasharray: 3 7; }
.ff { fill: none; stroke-width: 2.4; stroke-dasharray: 5 15; opacity: 0; }
.ff.ok { stroke: var(--ai-blue); } .ff.bad { display: none; }
.flowmap.live .ff { opacity: .85; animation: fmflow 1.5s linear infinite; }
@keyframes fmflow { to { stroke-dashoffset: -40; } }
.fm-legend { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; color: var(--ink-soft); border-top: 1px solid var(--rule); padding-top: 14px; margin-top: 4px; position: relative; z-index: 1; }
.fm-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.fm-legend i.ok { background: var(--pass); } .fm-legend i.bad { background: var(--warn); }
.fm-note { margin-left: auto; }
@media (max-width: 900px) {
  .flowmap { grid-template-columns: 1fr; gap: 34px; padding: 22px 16px 18px; }
  .fm-mid, .fm-right { position: relative; }
  .fm-mid::before, .fm-right::before { content: "↓"; position: absolute; top: -32px; left: 50%; transform: translateX(-50%); color: var(--ai-blue); font-size: 22px; font-weight: 700; }
  .fm-note { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .flowmap.live .ff, .flowmap.live .fm-ai { animation: none; } }

/* Dark mode: the lighter red/green/blue used for text there need dark text when they are a filled background. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .badge.low, :root:not([data-theme="light"]) .badge.high,
  :root:not([data-theme="light"]) .findings .m.f, :root:not([data-theme="light"]) .findings .m.p,
  :root:not([data-theme="light"]) .missing .ex { color: #0F2233; }
}