/* Tokens taken from the "1920w light" Figma frame */
  :root {
    color-scheme: light;
    --ink: #000000;
    --text: #1a1a1a;
    --muted: #6b6b6b;
    --line: #dbdbdb;
    --panel: #f2f4f6;
    --card: #ffffff;
    --ground: #ffffff;
    --accent: #d12e5c;
    --accent-ink: #b8264e;
    --accent-soft: #fdf0f4;
    --good: #1f8a5b;
    --gutter: 24px;
    --section-y: 128px;
    --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  }
  @media (max-width: 1080px) { :root { --section-y: 96px; } }
  @media (max-width: 640px)  { :root { --section-y: 64px; --gutter: 20px; } }

  *, *::before, *::after { box-sizing: border-box; }
  [hidden] { display: none !important; }
  html { scroll-behavior: smooth; scroll-padding-top: 88px; }
  body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
  img { max-width: 100%; display: block; }
  a { color: inherit; }
  h1, h2, h3, p, ul, ol, figure { margin: 0; }
  ul, ol { padding: 0; list-style: none; }
  h1, h2, h3 { text-wrap: balance; }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

  .container { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--gutter); }
  .section { padding-block: var(--section-y); border-top: 1px solid var(--line); }

  /* Type */
  .label { display: flex; gap: 8px; font-size: 13px; line-height: 20px; margin-bottom: 24px; }
  .label b { color: var(--accent); font-weight: 600; }
  .label span { color: var(--muted); font-weight: 500; letter-spacing: .08em; }
  .title { font-size: 52px; line-height: 1.1; letter-spacing: -0.02em; font-weight: 700; }
  .title .sub { display: block; color: var(--muted); font-weight: 500; }
  .section-head { max-width: 880px; }
  .text-lg { font-size: 20px; line-height: 32px; color: var(--text); }
  .text-body { font-size: 18px; line-height: 28px; color: var(--text); }
  .caption { font-size: 13px; line-height: 20px; color: var(--muted); }
  @media (max-width: 1080px) { .title { font-size: 44px; } }
  @media (max-width: 640px)  { .title { font-size: 34px; } .text-lg { font-size: 18px; line-height: 28px; } .text-body { font-size: 16px; line-height: 26px; } }

  /* Buttons */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 0 28px; border-radius: 8px; border: 1px solid transparent; font: 700 19px/24px var(--font); text-decoration: none; cursor: pointer; transition: background .2s, border-color .2s; }
  .btn-sm { min-height: 44px; padding: 0 16px; font-size: 15px; line-height: 20px; }
  .btn-primary { background: var(--accent); color: #fff; }
  .btn-primary:hover { background: var(--accent-ink); }
  .btn-ghost { background: var(--card); color: var(--ink); border-color: var(--ink); }
  .btn-ghost:hover { background: var(--panel); }
  .btn-dark { background: var(--ink); color: #fff; }

  /* Check list */
  .check-list { display: grid; gap: 16px; }
  .check-item { display: flex; gap: 12px; font-size: 18px; line-height: 28px; }
  .check-badge { flex: none; width: 22px; height: 22px; margin-top: 3px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; }
  .check-badge::after { content: ""; width: 8px; height: 4px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
  @media (max-width: 640px) { .check-item { font-size: 16px; line-height: 26px; } }

  /* Header */
  .site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: rgba(255,255,255,.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
  .site-header .container { display: grid; grid-template-columns: 150px 1fr auto; align-items: center; min-height: 72px; gap: 16px; }
  .brand img { width: 152px; height: auto; }
  .nav-list { display: flex; justify-content: center; gap: 8px; }
  .nav-link { position: relative; display: block; padding: 10px 12px 14px; font-size: 15px; font-weight: 500; line-height: 20px; text-decoration: none; color: var(--muted); }
  .nav-link:hover, .nav-link[aria-current="page"] { color: var(--ink); }
  @keyframes nav-dot-in { from { opacity: 0; transform: translateY(3px) scale(.6); } }
  .nav-link[aria-current="page"]::after { animation: nav-dot-in .28s var(--ease); content: ""; position: absolute; left: 50%; bottom: 2px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--accent); }
  .menu-btn { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); cursor: pointer; }
  .menu-btn span, .menu-btn span::before, .menu-btn span::after { display: block; width: 18px; height: 2px; margin: auto; background: var(--ink); position: relative; content: ""; }
  .menu-btn span::before { position: absolute; top: -6px; } .menu-btn span::after { position: absolute; top: 6px; }
  @media (max-width: 900px) {
    .site-header .container { grid-template-columns: 1fr auto auto; }
    .brand img { width: 128px; }
    .menu-btn { display: grid; place-items: center; }
    .nav { position: absolute; inset: 72px 0 auto 0; background: var(--card); border-bottom: 1px solid var(--line); padding: 8px var(--gutter) 16px; }
    .nav[hidden] { display: none !important; }
    .nav-list { flex-direction: column; gap: 0; }
    .nav-link { padding: 14px 0; font-size: 17px; border-bottom: 1px solid var(--line); }
    .nav-link[aria-current="page"]::after { left: auto; right: 4px; bottom: 50%; margin: 0 0 -3px; }
  }
  @media (min-width: 901px) { .nav[hidden] { display: block !important; } }

  /* 01 Hero */
  .hero { padding-block: 96px 24px; }
  .hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
  .hero__content { min-width: 0; }
  .hero__art { margin: 0; min-width: 0; }
  .hero__art img { width: 100%; height: auto; }
  @media (max-width: 1080px) { .hero__grid { grid-template-columns: 1fr; } .hero__art { max-width: 640px; margin-top: 8px; } }

  .hero__mark { width: 56px; height: auto; margin-bottom: 20px; }
  @media (max-width: 640px) { .hero__mark { width: 44px; margin-bottom: 14px; } }
  .hero h1 { font-size: 60px; line-height: 66px; letter-spacing: -0.03em; font-weight: 700; }
  .hero h1 .sub { display: block; color: var(--muted); font-weight: 500; }
  .hero .text-lg { max-width: 560px; margin-top: 32px; }
  .hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; }
  @media (max-width: 1080px) { .hero h1 { font-size: 52px; line-height: 58px; } }
  @media (max-width: 640px) {
    .hero { padding-top: 48px; }
    .hero h1 { font-size: 40px; line-height: 44px; }
    .hero__actions .btn { flex: 1 1 100%; }
  }

  /* 02 Trusted by */
  .trusted { padding-block: 64px 0; margin-top: 64px; overflow: hidden; }
  .logos__title { font-size: 24px; line-height: 32px; font-weight: 500; }
  .logo-marquee { position: relative; margin-top: 44px; margin-bottom: 8px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
  .logo-track { display: flex; align-items: center; gap: 72px; width: max-content; animation: logo-scroll 42s linear infinite; }
  .logo-marquee:hover .logo-track, .logo-marquee:focus-within .logo-track { animation-play-state: paused; }
  .logo-track img { height: 30px; width: auto; opacity: .72; filter: grayscale(1); transition: opacity .3s var(--ease), filter .3s var(--ease), transform .3s var(--ease); }
  .logo-track img.tall { height: 46px; }
  .logo-track img:hover { opacity: 1; filter: grayscale(0); transform: translateY(-3px); }
  @keyframes logo-scroll { to { transform: translateX(calc(-50% - 36px)); } }
  @media (max-width: 640px) { .trusted { margin-top: 48px; padding-top: 48px; } .logos__title { font-size: 20px; line-height: 28px; } .logo-marquee { margin-top: 32px; } .logo-track { gap: 44px; } .logo-track img { height: 22px; } .logo-track img.tall { height: 34px; } }

  /* 03 Problem */
  .problem { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
  .problem .text-lg { margin-top: 32px; max-width: 556px; }
  .problem__figure { position: relative; max-width: 620px; width: 100%; margin: 0; }
  .peaks { width: 100%; height: auto; display: block; overflow: visible; }
  .peaks text { font-family: var(--font); }
  .pk-num { font-size: 46px; font-weight: 700; letter-spacing: -0.02em; fill: var(--accent); }
  .pk-num--ink { fill: var(--ink); }
  .pk-cap { font-size: 17px; font-weight: 400; fill: var(--muted); }
  @media (max-width: 900px) { .problem { grid-template-columns: 1fr; } }
  
  /* 04 System */
  .system { display: grid; grid-template-columns: 395px 1fr; gap: 48px; }
  .system__aside { position: sticky; top: 104px; align-self: start; }
  .system__aside .title .sub { margin-top: 0; }
  .system__aside .text-body { margin-top: 32px; }
  .system__aside .text-body + .text-body { margin-top: 24px; font-weight: 600; }
  .system__list { display: grid; gap: 24px; justify-self: end; width: 100%; max-width: 709px; counter-reset: step; }
  .system-card { position: relative; border: 1px solid var(--line); border-radius: 4px; background: var(--card); padding: 16px 12px; }
  .reg-row { display: flex; justify-content: space-between; height: 4px; }
  .reg-row i { width: 4px; height: 4px; background: var(--ink); }
  .system-card__inner { display: grid; grid-template-columns: 291px 1fr; gap: 16px; min-height: 388px; align-items: center; }
  .system-card__body { display: flex; flex-direction: column; justify-content: space-between; align-self: stretch; padding: 24px; }
  .system-card__label { font-size: 40px; line-height: 47px; font-weight: 700; letter-spacing: -0.02em; }
  .system-card__label small { display: block; font: 500 13px/20px var(--mono); color: var(--accent); letter-spacing: 0; margin-bottom: 6px; }
  .system-card__line { font-size: 20px; line-height: 28px; color: var(--text); }
  .mock { background: var(--panel); border-radius: 12px; padding: 18px; font-size: 12px; line-height: 16px; min-height: 250px; display: grid; gap: 10px; align-content: start; margin-right: 12px; }
  .mock .win { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px; display: grid; gap: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.05); }
  .mock .row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .mock .bar { height: 7px; border-radius: 4px; background: #d7dbe0; }
  .mock .bar.dark { background: #1a1a1a; }
  .mock .pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 99px; background: #fff; border: 1px solid var(--line); font-weight: 500; white-space: nowrap; }
  .mock .pill.hot { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
  .mock .muted { color: var(--muted); }
  .mock .quote { font-size: 13px; line-height: 18px; font-weight: 500; }
  .mock code { font-family: var(--mono); font-size: 11px; line-height: 17px; white-space: pre; display: block; overflow: hidden; }
  .mock .k { color: var(--accent); } .mock .s { color: var(--good); }
  .mock .strike { text-decoration: line-through; color: var(--muted); }
  .mock .chart { display: flex; align-items: flex-end; gap: 10px; height: 110px; padding-top: 8px; border-bottom: 1px solid var(--line); }
  .mock .chart i { flex: 1; border-radius: 4px 4px 0 0; background: #cfd3d8; }
  .mock .chart i.win-b { background: var(--accent); }
  .mock .big { font-size: 22px; line-height: 26px; font-weight: 700; letter-spacing: -0.02em; }
  .mock .up { color: var(--good); font-weight: 600; }
  .dot-ok { width: 8px; height: 8px; border-radius: 50%; background: var(--good); flex: none; }
  @media (max-width: 1080px) { .system { grid-template-columns: minmax(0, 1fr); } .system__aside { position: static; max-width: 640px; } .system__list { justify-self: stretch; max-width: none; } }
  @media (max-width: 720px) { .system-card__inner { grid-template-columns: minmax(0, 1fr); min-height: 0; } .system-card__body { gap: 12px; padding: 12px 8px 4px; } .system-card__label { font-size: 32px; line-height: 38px; } .system-card__line { font-size: 18px; line-height: 26px; } .mock { margin: 0 0 8px; min-height: 0; } }


  /* Case-study graphics inside the system cards */
  .mock__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
  .mock .tag { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 99px; padding: 2px 8px; }
  .kpis { display: flex; flex-wrap: wrap; gap: 8px; }
  .kpi { flex: 1 1 88px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
  .kpi strong { display: block; font-size: 22px; line-height: 26px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
  .kpi span { font-size: 11px; line-height: 15px; color: var(--muted); }
  .barline { display: grid; grid-template-columns: 1fr 78px 32px; align-items: center; gap: 8px; font-size: 11px; }
  .barline b { text-align: right; font-variant-numeric: tabular-nums; }
  .barline .bar { height: 8px; }
  .wire { position: relative; height: 74px; border-radius: 8px; background: var(--panel); border: 1px dashed #c3c8ce; }
  .wire__fold { position: absolute; left: 0; right: 0; bottom: 22px; border-top: 1px dashed var(--accent); color: var(--accent); font-size: 10px; font-weight: 600; padding-left: 6px; }
  .mock .chart { align-items: flex-end; padding-top: 22px; }
  .mock .chart i { position: relative; display: flex; justify-content: center; }
  .mock .chart i em { position: absolute; top: -16px; font-style: normal; font-size: 10px; font-weight: 600; color: var(--muted); }
  .mock .chart i.win-b em { color: var(--accent); }


  /* Section 04 service cards */
  .system-card__body { gap: 20px; }
  .system-card__label { font-size: 34px; line-height: 40px; }
  .system-card__lead { margin-top: 12px; font-size: 19px; line-height: 26px; font-weight: 700; letter-spacing: -0.01em; }
  .system-card__body .system-card__line { font-size: 15px; line-height: 23px; color: var(--muted); }
  .serp-q { border: 1px solid var(--line); border-radius: 99px; padding: 7px 12px; font-size: 12px; background: #fff; }
  .serp-ad { display: grid; gap: 3px; font-size: 12px; line-height: 17px; }
  .serp-ad b { font-size: 14px; line-height: 19px; color: #1a0dab; font-weight: 600; }
  .ai-mini { font-size: 13px; line-height: 19px; }
  .rank { display: grid; grid-template-columns: 1fr 54px 44px; gap: 8px; font-size: 12px; line-height: 18px; padding-block: 4px; border-top: 1px solid var(--line); }
  .rank span:nth-child(2) { color: var(--muted); }
  .rank b { color: var(--good); text-align: right; }
  .rank--head { border-top: 0; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
  .rank--head span:last-child { text-align: right; }
  .path { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; }
  .path > span:not(.pill) { background: var(--panel); border-radius: 6px; padding: 3px 8px; }
  .path i { color: var(--muted); font-style: normal; }
  @media (max-width: 720px) { .system-card__label { font-size: 28px; line-height: 34px; } .system-card__lead { font-size: 17px; line-height: 24px; } }

  /* 05 Audience */
  .audience__lists { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
  .audience__list h3 { font-size: 24px; line-height: 32px; font-weight: 700; margin: 24px 0 24px; }
  @media (max-width: 860px) { .audience__lists { grid-template-columns: 1fr; gap: 16px; } }

  /* 07 Platforms */
  .platforms__copy { margin-top: 32px; }
  .platforms__copy .text-lg { max-width: 853px; }
  .subhead { font-size: 24px; line-height: 32px; font-weight: 700; margin: 64px 0 24px; }
  .platform-list { border-top: 1px solid var(--line); }
  .platform-row { display: grid; grid-template-columns: 192px 1fr; gap: 32px; align-items: center; padding-block: 25px; border-bottom: 1px solid var(--line); }
  .logo-tile { height: 72px; border: 1px solid var(--line); border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 14px; font-weight: 700; font-size: 15px; letter-spacing: -0.01em; background: var(--card); }
  .logo-tile svg { width: 26px; height: 26px; flex: none; }
  .logo-tile b { white-space: nowrap; }
  .logo-tile .tag-more { font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 99px; background: var(--panel); color: var(--muted); }
  .platform-row__name { font-size: 18px; line-height: 24px; font-weight: 700; }
  .platform-row .text-body { color: var(--muted); margin-top: 4px; max-width: 992px; }
  @media (max-width: 640px) { .platform-row { grid-template-columns: 1fr; gap: 14px; padding-block: 20px; } .logo-tile { width: 150px; height: 60px; } .subhead { font-size: 20px; line-height: 28px; margin: 44px 0 16px; } }

  /* 08 AI search */
  .ai__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: center; margin-top: 64px; }
  .ai__copy { max-width: 564px; }
  .ai__copy .check-list { margin-top: 40px; }
  .ai-visual { position: relative; width: 100%; max-width: 440px; margin-inline: auto; padding: 18px 0 30px; }
  .ai-phone { width: min(320px, 100%); margin-inline: auto; background: #fff; border: 1px solid var(--line); border-radius: 36px; padding: 17px 19px 24px; box-shadow: 0 24px 60px rgba(0,0,0,.08); display: grid; gap: 14px; }
  .ai-phone__status { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; padding-inline: 4px; }
  .ai-phone__signal { display: flex; gap: 2px; align-items: flex-end; }
  .ai-phone__signal i { width: 3px; background: var(--ink); border-radius: 1px; }
  .ai-phone__header { display: flex; align-items: center; gap: 10px; padding: 12px 0; margin-top: 10px; border-bottom: 1px solid var(--line); }
  .ai-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; color: #fff; font-size: 14px; }
  .ai-phone__header b { font-size: 15px; } .ai-phone__header span { font-size: 12px; color: var(--muted); display: block; }
  .ai-bubble { justify-self: end; max-width: 258px; background: var(--ink); color: #fff; border-radius: 16px 16px 4px 16px; padding: 10px 14px; font-size: 14px; line-height: 20px; }
  .ai-answer { font-size: 14px; line-height: 20px; }
  .ai-answer b { font-weight: 700; }
  .ai-source { display: flex; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
  .ai-source__thumb { width: 48px; height: 48px; border-radius: 8px; background: var(--panel); display: grid; place-items: center; }
  .ai-source__thumb img { width: 36px; }
  .ai-source__text { font-size: 13px; line-height: 18px; } .ai-source__text small { display: block; color: var(--muted); font-size: 12px; }
  .ai-phone__input { display: flex; justify-content: space-between; align-items: center; height: 40px; border: 1px solid var(--line); border-radius: 99px; padding: 0 6px 0 14px; color: var(--muted); font-size: 13px; }
  .ai-phone__input i { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; color: #fff; font-style: normal; font-size: 14px; }
  .ai-chip { position: absolute; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 15px; border-radius: 99px; background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 24px rgba(0,0,0,.08); font-size: 15px; font-weight: 600; white-space: nowrap; }
  .ai-chip .check-badge { width: 20px; height: 20px; margin: 0; }
  .ai-chip--1 { top: 0; left: 0; } .ai-chip--2 { bottom: 0; right: 0; }
  @media (max-width: 900px) { .ai__row { grid-template-columns: minmax(0, 1fr); gap: 56px; margin-top: 40px; } }
  @media (max-width: 400px) { .ai-chip { font-size: 13px; height: 36px; } }

  /* 10 The call */
  .call { display: grid; grid-template-columns: 508px 1fr; gap: 48px; }
  .call__intro .text-lg { margin-top: 32px; }
  .call__note { margin-top: 24px; padding-left: 18px; border-left: 2px solid var(--line); color: var(--muted); }
  .call__intro .btn { margin-top: 32px; }
  .call__steps { justify-self: end; width: 100%; max-width: 604px; }
  .call-step { display: grid; grid-template-columns: 64px 1fr; gap: 32px; align-items: center; padding-block: 32px; border-bottom: 1px solid var(--line); }
  .call-step:first-child { border-top: 1px solid var(--line); }
  .call-step__num { font-size: 40px; line-height: 44px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
  .call-step__lead { display: block; font-size: 16px; line-height: 24px; color: var(--muted); }
  .call-step__title { display: block; font-size: 24px; line-height: 32px; font-weight: 600; }

  .call__cta { grid-column: 2; justify-self: end; width: 100%; max-width: 604px; display: grid; justify-items: center; gap: 12px; margin-top: 40px; }
  .btn-xl { width: 100%; min-height: 72px; font-size: 22px; letter-spacing: -0.01em; border-radius: 10px; }
  .call__cta .caption { text-align: center; }
  @media (max-width: 1000px) { .call { grid-template-columns: 1fr; } .call__cta { grid-column: 1; justify-self: stretch; max-width: none; margin-top: 8px; } .call__steps { justify-self: stretch; max-width: none; } }
  @media (max-width: 640px) { .btn-xl { min-height: 60px; font-size: 18px; } .call-step { grid-template-columns: 48px 1fr; gap: 16px; padding-block: 22px; } .call-step__num { font-size: 30px; } .call-step__title { font-size: 20px; line-height: 28px; } }

  /* 11 FAQ */
  .faq { display: grid; grid-template-columns: 399px 1fr; gap: 48px; }
  .faq__aside .text-body { margin-top: 24px; }
  .faq__aside .btn { margin-top: 16px; }
  .faq__list { justify-self: end; width: 100%; max-width: 709px; border-top: 1px solid var(--line); }
  .faq-item { border-bottom: 1px solid var(--line); }
  .faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 68px; padding-block: 20px; font-size: 20px; line-height: 28px; font-weight: 600; }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg) translateY(-3px); transition: transform .2s; margin-right: 6px; }
  .faq-item[open] summary::after { transform: rotate(-135deg) translate(-3px, 0); }
  .faq-item p { padding-bottom: 29px; max-width: 661px; color: var(--muted); }
  @media (max-width: 1000px) { .faq { grid-template-columns: 1fr; } .faq__list { justify-self: stretch; max-width: none; } }
  @media (max-width: 640px) { .faq-item summary { font-size: 17px; line-height: 24px; } }

  /* 12 Get started */
  .final-cta { background: var(--panel); position: relative; overflow: hidden; }
  .final-cta::before { content: ""; position: absolute; top: -40px; right: -60px; width: 420px; height: 318px;
    background: url("../img/apexcore-mark.png") no-repeat center / contain; opacity: .06; pointer-events: none; }
  @media (max-width: 900px) { .final-cta::before { width: 260px; height: 197px; right: -50px; top: -20px; } }
  .final-cta .section-head { margin-inline: auto; text-align: center; }
  .final-cta .label { justify-content: center; }
  .cta__row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 64px; align-items: start; }
  .form-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 40px; }
  .form-step { display: grid; gap: 24px; }
  .progress small { display: flex; gap: 8px; font-size: 12px; line-height: 16px; margin-bottom: 10px; }
  .progress small b { color: var(--accent); letter-spacing: .08em; font-weight: 600; }
  .progress small span { color: var(--muted); font-weight: 500; }
  .bars { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .bars i { height: 4px; border-radius: 2px; background: var(--line); }
  .bars i.on { background: var(--accent); }
  .field { display: grid; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
  .field > label, .field legend { font-size: 15px; line-height: 20px; font-weight: 600; padding: 0; }
  .field legend { float: left; width: 100%; margin-bottom: 8px; }
  .field .opt { color: var(--muted); font-weight: 400; }
  .help { font-size: 13px; line-height: 18px; color: var(--muted); }
  .input, .select { width: 100%; height: 48px; border: 1px solid var(--muted); border-radius: 8px; padding: 0 14px; font: 400 15px var(--font); color: var(--ink); background: var(--card); }
  .select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 44px; }
  .input:focus, .select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  .input[aria-invalid="true"] { border-color: var(--accent); }
  .error { font-size: 13px; line-height: 18px; color: var(--accent-ink); }
  .seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; clear: both; }
  .seg label, .chips label { position: relative; cursor: pointer; }
  .seg input, .chips input { position: absolute; opacity: 0; pointer-events: none; }
  .seg span { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 8px 12px; border: 1px solid var(--muted); border-radius: 8px; font-size: 15px; text-align: center; }
  .seg span::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--muted); }
  .seg input:checked + span { border: 1.5px solid var(--accent); background: var(--accent-soft); font-weight: 600; }
  .seg input:checked + span::before { background: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 3px #fff; }
  .chips { display: flex; flex-wrap: wrap; gap: 8px; clear: both; }
  .chips span { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 1px solid var(--muted); border-radius: 99px; font-size: 14px; line-height: 18px; }
  .chips input:checked + span { border: 1.5px solid var(--accent); background: var(--accent-soft); font-weight: 600; }
  .chips input:checked + span::before { content: "✓"; color: var(--accent); font-weight: 700; font-size: 13px; }
  .seg input:focus-visible + span, .chips input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
  .two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .actions-row { display: grid; grid-template-columns: auto 1fr; gap: 12px; }
  .actions-row .btn-ghost { border-color: var(--muted); font-size: 16px; padding: 0 20px; }
  .success { display: grid; gap: 20px; padding-block: 16px; }
  .success .badge { width: 56px; height: 56px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; }
  .success .badge::after { content: ""; width: 20px; height: 10px; border: 3px solid #fff; border-top: 0; border-right: 0; transform: translateY(-3px) rotate(-45deg); }
  .success h3 { font-size: 32px; line-height: 38px; letter-spacing: -0.02em; }
  .success p { color: var(--muted); font-size: 17px; line-height: 26px; }
  .wait { background: var(--panel); border-radius: 12px; padding: 20px; display: grid; gap: 12px; justify-items: start; }
  .wait small { font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--muted); }
  .wait p { color: var(--ink); font-size: 15px; line-height: 22px; }
  .wait .btn { min-height: 44px; font-size: 15px; padding: 0 20px; }
  .details { display: grid; gap: 32px; padding: 8px 0 0 24px; }
  .details h3 { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; color: var(--muted); margin-bottom: 16px; }
  .items { display: grid; gap: 16px; }
  .item { display: flex; gap: 14px; }
  .item strong { display: block; font-size: 17px; line-height: 22px; }
  .item span { color: var(--muted); font-size: 15px; line-height: 22px; }
  .next li { display: flex; gap: 16px; align-items: center; padding-block: 6px; }
  .next strong { font-size: 22px; line-height: 28px; min-width: 32px; font-variant-numeric: tabular-nums; }
  .next b { display: block; font-size: 16px; line-height: 22px; }
  .next span { color: var(--muted); font-size: 14px; line-height: 20px; }
  .details hr { border: 0; border-top: 1px solid var(--line); margin: 0; }
  .quote { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 24px; display: grid; gap: 12px; }
  .quote .stars { color: var(--accent); letter-spacing: 2px; }
  .quote p { font-size: 16px; line-height: 24px; font-weight: 500; }
  @media (max-width: 1000px) { .cta__row { grid-template-columns: 1fr; } .details { padding-left: 0; } }
  @media (max-width: 640px) { .form-card { padding: 24px 20px; } .cta__row { margin-top: 40px; } .form-card .btn { font-size: 17px; } }
  @media (max-width: 480px) { .two, .seg { grid-template-columns: 1fr; } }


  /* Teardown form (single card) */
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .tform { display: grid; gap: 12px; }
  .tform__badge { justify-self: start; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--accent-ink); background: var(--accent-soft); border-radius: 99px; padding: 6px 14px; margin-bottom: 24px; }
  .tform__head { display: grid; gap: 6px; margin-bottom: 12px; }
  .tform__head h3 { font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -0.02em; }
  .tform__head p { font-size: 15px; line-height: 22px; color: var(--muted); }
  .tinput { width: 100%; height: 52px; border: 1px solid #e3e5e8; border-radius: 12px; padding: 0 18px; font: 400 15px var(--font); color: var(--ink); background: var(--card); transition: border-color .25s var(--ease), box-shadow .25s var(--ease); }
  .tinput::placeholder { color: #7a7d82; }
  .tinput--area { height: auto; min-height: 92px; padding: 14px 18px; resize: vertical; line-height: 22px; }
  .tinput:hover { border-color: #c7cbd0; }
  .tinput:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  .tinput[aria-invalid="true"] { border-color: var(--accent); }
  .tbtn { width: 100%; min-height: 54px; border-radius: 12px; font-size: 17px; font-weight: 500; }
  .tbtn--dark { background: #1b1b1c; color: #fff; }
  .tbtn--dark::before { background: var(--accent); }
  .tbtn--dark:hover::before { transform: translateY(0); }
  .tbtn--line { background: var(--card); color: var(--ink); border-color: var(--ink); }
  .tbtn--line::before { background: var(--ink); }
  .tbtn--line:hover { color: #fff; }
  .tbtn--line:hover::before { transform: translateY(0); }
  .tform__or { justify-self: center; font-size: 12px; letter-spacing: .08em; color: var(--muted); }
  .tform__legal { text-align: center; font-size: 12px; line-height: 18px; color: #8a8d92; margin-top: 4px; }
  .form-card { border-radius: 24px; }

  /* Footer */
  .site-footer { border-top: 1px solid var(--line); padding-top: 97px; }
  .footer__top { display: grid; grid-template-columns: 429px repeat(3, 1fr); gap: 0; padding-bottom: 64px; }
  .footer__brand img { width: 150px; margin-top: 16px; }
  .footer__tagline { margin-top: 24px; max-width: 327px; color: var(--muted); font-size: 16px; line-height: 24px; }
  .footer__col h2 { font-size: 13px; line-height: 20px; font-weight: 600; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; margin-bottom: 4px; }
  .footer__link { display: flex; align-items: center; gap: 6px; min-height: 44px; font-size: 15px; line-height: 20px; text-decoration: none; color: var(--ink); }
  .footer__link:hover { color: var(--accent); }
  .footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-block: 20px 21px; }
  .footer__legal { display: flex; gap: 24px; }
  .footer__legal .footer__link { color: var(--muted); font-size: 13px; }
  @media (max-width: 1000px) { .footer__top { grid-template-columns: 1fr 1fr 1fr; row-gap: 40px; } .footer__brand { grid-column: 1 / -1; } }
  @media (max-width: 640px) { .site-footer { padding-top: 64px; } .footer__top { grid-template-columns: 1fr 1fr; padding-bottom: 40px; } }
  @media (max-width: 400px) { .footer__top { grid-template-columns: 1fr; } }

  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

  /* ================= Crimson problem section + calculator ================= */
  .crimson { position: relative; overflow: hidden; color: #fff;
             background: radial-gradient(120% 90% at 85% 0%, #c93a62 0%, rgba(201,58,98,0) 55%),
                         linear-gradient(160deg, #c52b55 0%, #ad2149 55%, #9f1f43 100%); }
  .crimson::after { content: ""; position: absolute; right: -80px; bottom: -120px; width: 560px; height: 424px;
                    background: url("../img/apexcore-mark.png") no-repeat center / contain;
                    filter: brightness(0) invert(1); opacity: .07; pointer-events: none; }
  .crimson .container { position: relative; z-index: 1; }
  .crimson .label b { color: #fff; }
  .crimson .label span { color: rgba(255,255,255,.8); }
  .crimson .title { color: #fff; }
  .crimson .title .sub { color: rgba(255,255,255,.72); }
  .crimson .text-lg { color: rgba(255,255,255,.9); }
  .crimson .pk-num { fill: #fff; }
  .crimson .pk-cap { fill: rgba(255,255,255,.8); }
  .problem__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 48px; align-items: center; }
  .problem__top .problem__figure { margin: 0; }
  @media (max-width: 900px) { .problem__top { grid-template-columns: minmax(0, 1fr); } }

  .calc { margin-top: 64px; background: #fff; color: var(--ink); border-radius: 24px;
          box-shadow: 0 30px 70px rgba(80,10,30,.18); display: grid;
          grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow: hidden; }
  .calc__in { padding: 36px; display: grid; gap: 26px; align-content: start; }
  .calc__in h3 { font-size: 22px; line-height: 28px; }
  .calc__in > p { color: var(--muted); font-size: 15px; margin-top: -18px; }
  .rng { display: grid; gap: 10px; }
  .rng__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 15px; font-weight: 500; }
  .rng__top output { font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; color: var(--accent-ink); }
  .rng--seg { gap: 12px; }
  .rng__label { font-size: 15px; font-weight: 500; }
  .seg { display: inline-flex; gap: 6px; background: #f2f2f5; border-radius: 12px; padding: 4px; }
  .seg__b { flex: 1; min-height: 40px; border: 0; border-radius: 9px; background: transparent; cursor: pointer;
            font: 600 15px var(--font); color: var(--muted); transition: background .25s var(--ease), color .25s var(--ease); }
  .seg__b:hover { color: var(--ink); }
  .seg__b.is-on { background: #fff; color: var(--accent-ink); box-shadow: 0 1px 3px rgba(16,16,20,.14); }
  .seg__b:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px;
                      background: linear-gradient(90deg, var(--accent) var(--p, 50%), #e7e7ea var(--p, 50%)); outline: none; cursor: pointer; }
  input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%;
                      background: #fff; border: 2px solid var(--accent); box-shadow: 0 2px 8px rgba(221,54,98,.35); transition: transform .2s var(--ease); }
  input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.12); }
  input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); }
  input[type=range]:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
  .calc__out { padding: 36px; background: #fdf6f8; display: grid; gap: 18px; align-content: center; border-left: 1px solid #f1e3e7; }
  .calc__out small { font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
  .calc__big { font-size: 56px; line-height: 1.05; font-weight: 800; letter-spacing: -0.03em; color: var(--accent); font-variant-numeric: tabular-nums; }
  .calc__unit { display: block; font-size: 17px; font-weight: 600; letter-spacing: 0; color: var(--ink); }
  .calc__sub { font-size: 16px; line-height: 25px; color: var(--text); }
  .calc__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .calc__tile { background: #fff; border: 1px solid #f0e2e6; border-radius: 14px; padding: 14px 16px; }
  .calc__tile b { display: block; font-size: 22px; font-variant-numeric: tabular-nums; }
  .calc__tile span { font-size: 13px; color: var(--muted); }
  .calc__note { font-size: 12px; line-height: 18px; color: var(--muted); }
  @media (max-width: 860px) { .calc { grid-template-columns: minmax(0, 1fr); } .calc__out { border-left: 0; border-top: 1px solid #f1e3e7; } }
  @media (max-width: 640px) { .calc__in, .calc__out { padding: 24px 20px; } .calc__big { font-size: 44px; } .calc { margin-top: 44px; } }

  /* ================= What we do: tabs + product visuals ================= */

  .offer__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 48px; align-items: end; }
  .tabs { margin-top: 56px; }
  .tablist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .tab { text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; cursor: pointer; font: inherit; color: inherit; display: grid; gap: 4px; transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease), background .3s var(--ease); }
  .tab small { font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
  .tab b { font-size: 20px; line-height: 26px; }
  .tab span { font-size: 14px; color: var(--muted); }
  .tab:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
  .tab[aria-selected="true"] { border-color: var(--accent); background: var(--panel-2); box-shadow: var(--shadow-md); }
  .tab[aria-selected="true"] small { color: var(--accent); }
  .panel { margin-top: 16px; background: #fff; border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow-md); padding: 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
  .panel[hidden] { display: none !important; }
  .panel.enter { animation: panel-in .5s var(--ease); }
  @keyframes panel-in { from { opacity: 0; transform: translateY(12px); } }
  .panel__copy h3 { font-size: 30px; line-height: 36px; letter-spacing: -0.02em; }
  .panel__copy > p { margin-top: 10px; }
  .svc { display: grid; gap: 18px; margin-top: 28px; }
  .svc li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding-top: 18px; border-top: 1px solid var(--line); }
  .svc__ic { width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); display: grid; place-items: center; }
  .svc__ic svg { width: 20px; height: 20px; stroke: var(--accent-ink); }
  .svc h4 { margin: 0; font-size: 17px; line-height: 24px; }
  .svc h4 span { color: var(--muted); font-weight: 500; }
  .svc p { font-size: 15px; line-height: 23px; color: var(--muted); margin-top: 2px; }
  /* panel CTA link (the .text-link rules never came across with the markup) */
  .text-link { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; line-height: 20px;
               font-weight: 600; color: var(--accent-ink); text-decoration: none; }
  .text-link .arrow { transition: transform .3s var(--ease); }
  .text-link:hover { color: var(--accent); }
  .text-link:hover .arrow { transform: translateX(4px); }
  .text-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
  .panel__cta { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line);
                min-height: 44px; width: 100%; }
  .stage { position: relative; min-height: 360px; border-radius: 20px; background: radial-gradient(90% 80% at 70% 20%, #fde7ee 0%, #f6f6f8 60%); padding: 28px; display: grid; place-items: center; overflow: hidden; }
  /* Visual: Get found */
  .v-search { width: 100%; max-width: 400px; display: grid; gap: 12px; }
  .v-bar { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 99px; padding: 12px 18px; box-shadow: var(--shadow-sm); font-size: 14px; }
  .v-bar svg { width: 16px; height: 16px; stroke: var(--muted); flex: none; }
  .v-caret { width: 1.5px; height: 16px; background: var(--ink); animation: blink 1s steps(1) infinite; }
  @keyframes blink { 50% { opacity: 0; } }
  .v-result { background: #fff; border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow-sm); display: grid; gap: 3px; font-size: 13px; color: var(--muted); }
  .v-result b { font-size: 15px; color: #1a0dab; }
  .v-result.you { border: 1.5px solid var(--accent); box-shadow: var(--shadow-md); }
  .v-result.you .tagline { color: var(--accent-ink); font-weight: 600; font-size: 12px; }
  .v-ai { background: #fff; border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow-sm); font-size: 13px; line-height: 19px; display: grid; gap: 8px; }
  .v-ai b { color: var(--ink); }
  .v-ai .src { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--accent-ink); font-weight: 600; }
  .v-ai .src img { width: 16px; }
  /* Visual: Stay visible */
  .v-feed { position: relative; width: 260px; }
  .v-post { background: #fff; border-radius: 18px; box-shadow: var(--shadow-md); overflow: hidden; }
  .v-post__top { display: flex; align-items: center; gap: 8px; padding: 12px 14px; font-size: 12px; }
  .v-post__top img { width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); padding: 5px; }
  .v-post__top span { color: var(--muted); display: block; font-size: 11px; }
  .v-post__img { height: 150px; background: linear-gradient(145deg, #1b1b1e, #3b1320); display: grid; place-items: center; color: #fff; text-align: center; padding: 16px; font-weight: 700; font-size: 18px; line-height: 23px; }
  .v-post__img i { font-style: normal; color: #ff8fac; }
  .v-post__cta { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; font-size: 12px; }
  .v-post__cta b { background: var(--accent); color: #fff; border-radius: 8px; padding: 6px 10px; font-size: 12px; }
  .v-touch { position: absolute; right: -54px; display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 99px; padding: 8px 12px; font-size: 12px; font-weight: 600; box-shadow: var(--shadow-md); white-space: nowrap; }
  .v-touch i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
  .v-touch.t1 { top: 16px; } .v-touch.t2 { top: 50%; } .v-touch.t3 { bottom: 20px; }
  /* Visual: Convert */
  .v-page { width: 100%; max-width: 380px; background: #fff; border-radius: 16px; box-shadow: var(--shadow-md); overflow: hidden; }
  .v-page__bar { display: flex; gap: 6px; padding: 10px 12px; background: #f4f4f6; }
  .v-page__bar i { width: 8px; height: 8px; border-radius: 50%; background: #d6d7dc; }
  .v-page__body { padding: 20px; display: grid; gap: 12px; }
  .v-swap { position: relative; height: 56px; }
  .v-swap p { position: absolute; inset: 0; font-size: 19px; line-height: 25px; font-weight: 800; letter-spacing: -0.01em; transition: opacity .5s var(--ease), transform .5s var(--ease); }
  .v-swap .old { color: #b4b5bb; text-decoration: line-through; }
  .v-swap .new { opacity: 0; transform: translateY(8px); }
  .stage:hover .v-swap .old, .panel:not([hidden]) .v-swap.on .old { opacity: 0; transform: translateY(-8px); }
  .stage:hover .v-swap .new, .panel:not([hidden]) .v-swap.on .new { opacity: 1; transform: none; }
  .v-proof { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
  .v-proof b { color: var(--accent); letter-spacing: 1px; }
  .v-form { display: grid; gap: 8px; }
  .v-form i { height: 34px; border-radius: 8px; border: 1px solid var(--line); }
  .v-form b { height: 38px; border-radius: 8px; background: var(--accent); display: grid; place-items: center; color: #fff; font-size: 13px; }
  .v-note { position: absolute; left: 18px; bottom: 18px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 600; padding: 8px 12px; border-radius: 10px; box-shadow: var(--shadow-md); }
  @media (max-width: 960px) { .offer__head { grid-template-columns: minmax(0, 1fr); gap: 16px; } .panel { grid-template-columns: minmax(0, 1fr); padding: 28px; gap: 32px; } }
  @media (max-width: 720px) {
    .tablist { grid-template-columns: minmax(0, 1fr); }
    .tab span { display: none; }
    .panel { padding: 22px 18px; }
    .stage { min-height: 300px; padding: 20px; }
    .v-touch { right: -18px; }
    .panel__copy h3 { font-size: 24px; line-height: 30px; }
  }

  /* Calculator: 100 visitors as 100 dots */
  .dots { display: grid; grid-template-columns: repeat(20, 1fr); gap: 5px; margin-bottom: 2px; }
  .dots i { display: block; aspect-ratio: 1; border-radius: 50%; background: #e6e6ec;
            transition: background .45s var(--ease), transform .45s var(--ease); }
  .dots i.is-now { background: var(--accent); }
  .dots i.is-gain { background: #f7a8bf; transform: scale(1.18); }
  .dots__key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 2px; }
  .dots__k { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
  .dots__k i { width: 9px; height: 9px; border-radius: 50%; background: #e6e6ec; }
  .dots__k--now i { background: var(--accent); }
  .dots__k--gain i { background: #f7a8bf; }
  @media (max-width: 860px) { .dots { grid-template-columns: repeat(20, 1fr); } }
  @media (max-width: 520px) { .dots { gap: 4px; } .dots__k { font-size: 11px; } }

  /* ============ Responsive fixes ============ */

  /* 3. proof line in the Convert visual */
  .v-proof__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good, #1f8a5b); flex: none; }

  /* 4. platform tile: never let the logo and label spill past the rounded border */
  .logo-tile { min-width: 0; max-width: 100%; overflow: hidden; }
  .logo-tile b { white-space: nowrap; overflow-wrap: normal; line-height: 1.2; }
  @media (max-width: 900px) { .logo-tile { gap: 8px; font-size: 14px; padding: 0 12px; } .logo-tile svg { width: 22px; height: 22px; } }

  @media (max-width: 720px) {
    /* 2. Meta feed: stack the journey pills under the post instead of over it */
    .v-feed { width: 100%; max-width: 320px; }
    .v-touch { position: static; right: auto; left: auto; top: auto; bottom: auto;
               width: -moz-fit-content; width: fit-content; margin-top: 10px; white-space: normal; }
    .v-touch.t1, .v-touch.t2, .v-touch.t3 { top: auto; bottom: auto; }

    /* 3. Convert visual: the note sat on top of the button */
    .v-page { width: 100%; }
    .v-note { position: static; left: auto; bottom: auto; display: block; width: -moz-fit-content; width: fit-content; margin-top: 12px; }
    .stage { display: flex; flex-direction: column; align-items: center; gap: 4px; }

    /* 5. AI chips: below the phone, not floating over its input row */
    .ai-visual { display: flex; flex-direction: column; align-items: center; gap: 12px; }
    .ai-chip { position: static; top: auto; right: auto; bottom: auto; left: auto;
               height: auto; min-height: 40px; padding: 8px 14px; white-space: normal; text-align: left; }
    .ai-chip .check-badge { margin-top: 0; }
  }

  @media (max-width: 640px) {
    /* 1. the gap between the hero and "Trusted by" was roughly a full screen */
    .hero { padding-bottom: 8px; }
    .hero__art, .hero figure { margin-bottom: 0; }
    .trusted { margin-top: 8px; padding-block: 36px 0; }
    .logo-marquee { margin-top: 24px; margin-bottom: 28px; }

    /* 4. platform tile at phone width */
    .logo-tile { width: auto; min-width: 0; height: auto; min-height: 56px; padding: 10px 14px; }
  }

  /* ============ Round 4 ============ */

  /* 3. Back to top. Bottom left, so it never sits under the WhatsApp widget. */
  .to-top { position: fixed; left: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 60;
            width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line);
            background: #fff; color: var(--ink); display: grid; place-items: center; cursor: pointer;
            box-shadow: 0 6px 20px rgba(16,16,20,.14);
            opacity: 0; transform: translateY(12px); pointer-events: none;
            transition: opacity .3s var(--ease), transform .3s var(--ease), background .25s var(--ease), color .25s var(--ease); }
  .to-top[hidden] { display: grid !important; }
  .to-top.show { opacity: 1; transform: none; pointer-events: auto; }
  .to-top svg { width: 20px; height: 20px; }
  .to-top:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
  .to-top:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  @media (max-width: 640px) { .to-top { left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: 44px; height: 44px; } }

  /* 2. Mobile only: the three services become an accordion, so each panel opens
        directly under its own heading and nothing has to be hunted for. */
  @media (max-width: 720px) {
    .tabs { display: flex; flex-direction: column; gap: 10px; }
    .tablist { display: contents; }
    #tab-found   { order: 1; } #panel-found   { order: 2; }
    #tab-visible { order: 3; } #panel-visible { order: 4; }
    #tab-convert { order: 5; } #panel-convert { order: 6; }

    .tab { position: relative; padding-right: 48px; }
    /* keep the service list visible on every header, so the other two are never missed */
    .tab span { display: block; }
    .tab::after { content: ""; position: absolute; right: 20px; top: 50%; width: 9px; height: 9px;
                  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
                  transform: translateY(-70%) rotate(45deg); transition: transform .3s var(--ease), border-color .3s var(--ease); }
    .tab[aria-selected="true"]::after { transform: translateY(-30%) rotate(-135deg); border-color: var(--accent); }

    .panel { margin-top: 0; border-radius: 16px; }
  }

  /* Calculator: figures sit with the inputs that produce them */
  .calc__row--left { margin-top: 6px; padding-top: 22px; border-top: 1px solid var(--line); }
  .calc__in { align-content: start; }
  .calc__big { transition: none; }
  @media (max-width: 860px) { .calc__row--left { margin-top: 2px; padding-top: 18px; } }
  .audits { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
  .audits li { font-size: 13px; line-height: 18px; font-weight: 600; color: #fff; background: var(--accent);
               border-radius: 99px; padding: 6px 12px; }
  @media (max-width: 480px) { .audits li { font-size: 12px; padding: 5px 10px; } }

  /* feedback card */
  .quote .stars { color: var(--accent); letter-spacing: 3px; font-size: 17px; line-height: 1; }
  /* audit chips: one row */
  .audits--row { flex-wrap: nowrap; gap: 6px; margin-top: 2px; }
  .audits--row li { font-size: 11.5px; line-height: 16px; padding: 6px 10px; white-space: nowrap; }
  @media (max-width: 900px) { .audits--row { flex-wrap: wrap; gap: 8px; } .audits--row li { font-size: 12px; padding: 6px 12px; } }

  /* The WhatsApp widget and the back-to-top button float over the bottom of the
     page. Give the last footer row room so neither ever covers a link. */
  .footer__bottom { padding-bottom: 28px; }
  @media (max-width: 900px) {
    .site-footer { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
    .footer__bottom { flex-direction: column; align-items: flex-start; gap: 10px; padding-bottom: 8px; }
  }

  /* ---- edit-5 ---- */
  /* 1. desktop: the Joinchat bubble should never pop up; the button opens the chat */
  /* the widget has no call-to-action bubble configured, so nothing to hide here */

  /* 2. phone: turn the three tabs into an accordion so each panel opens under its own header */
  @media (max-width: 720px) {
    .tabs { display: flex; flex-direction: column; }
    .tablist { display: contents; }
    #tab-found   { order: 1; } #panel-found   { order: 2; }
    #tab-visible { order: 3; } #panel-visible { order: 4; }
    #tab-convert { order: 5; } #panel-convert { order: 6; }
    .tab { margin-top: 10px; position: relative; padding-right: 52px; }
    .tab span { display: block; }               /* keep the "what is inside" line visible */
    .tab::after { content: ""; position: absolute; right: 22px; top: 50%; width: 9px; height: 9px;
                  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
                  transform: translateY(-70%) rotate(45deg); transition: transform .3s var(--ease); }
    .tab[aria-selected="true"]::after { transform: translateY(-30%) rotate(-135deg); border-color: var(--accent); }
    .panel { margin-top: 8px; }
  }

  /* Buttons are never underlined and never take a link colour, whatever else loads. */
  a.btn, a.btn:hover, a.btn:focus, a.btn:visited, a.btn:active { text-decoration: none; }
  .btn-dark, .btn-dark:hover, .btn-dark:focus, .btn-dark:visited { color: #fff; }
  .btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:visited { color: #fff; }

  /* reCAPTCHA v3 badge: hidden, with Google's required wording shown by the form
     instead (Google allows hiding the badge only on that condition). */
  .grecaptcha-badge { visibility: hidden !important; }
  .tform__recaptcha { text-align: center; font-size: 11px; line-height: 17px; color: #9a9da2; margin-top: 2px; }
  .tform__recaptcha a { color: #9a9da2; text-decoration: underline; }
  .tform__recaptcha a:hover { color: var(--ink); }

  /* The one service with a page of its own: make the heading announce it. */
  .svc__more { display: inline-flex; align-items: center; gap: 6px; color: inherit;
               text-decoration: none; border-bottom: 1px solid var(--line);
               transition: color .2s var(--ease), border-color .2s var(--ease); }
  .svc__more svg { width: 15px; height: 15px; flex: none; transition: transform .25s var(--ease); }
  .svc__more:hover { color: var(--accent-ink); border-bottom-color: var(--accent); }
  .svc__more:hover svg { transform: translateX(3px); }
  .svc__more:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
  @media (prefers-reduced-motion: reduce) { .svc__more svg { transition: none; } }

  /* ---- Services dropdown ---- */
  .nav-has-sub { position: relative; }
  /* A disclosure control, not a link: it matches .nav-link's type but takes none
     of its link decoration, whose underline sits at bottom:8px and would cut
     straight through a button of this height. */
  .nav-top { position: relative; display: inline-flex; align-items: center; gap: 5px;
             padding: 10px 12px 14px; background: none; border: 0; cursor: pointer;
             font-family: inherit; font-size: 15px; font-weight: 500; line-height: 20px;
             color: var(--muted); text-decoration: none;
             transition: color .2s var(--ease); }
  .nav-top:hover, .nav-top[aria-expanded="true"] { color: var(--ink); }
  .nav-top::before, .nav-top::after { content: none !important; }
  .nav-caret { width: 15px; height: 15px; flex: none; transition: transform .22s var(--ease); }
  .nav-top[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }

  .nav-sub { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%);
             min-width: 176px; margin: 0; padding: 6px; list-style: none; z-index: 40;
             background: #fff; border: 1px solid var(--line); border-radius: 14px;
             box-shadow: 0 2px 6px rgba(16,16,20,.06), 0 18px 44px rgba(16,16,20,.12); }
  .nav-sub[hidden] { display: none; }
  .nav-sub::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
  .nav-sub__link { display: block; padding: 10px 14px; border-radius: 9px; font-size: 15px;
                   line-height: 22px; color: var(--text); text-decoration: none;
                   transition: background .18s var(--ease), color .18s var(--ease); }
  .nav-sub__link:hover, .nav-sub__link:focus-visible { background: var(--panel); color: var(--ink); }
  .nav-sub__link[aria-current="page"] { color: var(--accent-ink); font-weight: 600; }
  .nav-top:focus-visible, .nav-sub__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  /* Inside the hamburger the panel becomes part of the stacked list. */
  @media (max-width: 900px) {
    .nav-has-sub { display: block; }
    .nav-top { width: 100%; justify-content: space-between; min-height: 48px; }
    .nav-sub { position: static; transform: none; min-width: 0; margin: 0 0 6px; padding: 2px 0 2px 14px;
               border: 0; border-left: 2px solid var(--line); border-radius: 0; box-shadow: none; }
    .nav-sub::before { display: none; }
    .nav-sub__link { min-height: 44px; display: flex; align-items: center; }
  }
  @media (prefers-reduced-motion: reduce) { .nav-caret { transition: none; } }

/* ---------------------------------------------- */

/* ---- Motion & hover layer ------------------------------------------- */
  :root { --ease: cubic-bezier(.22,.61,.36,1); }

  /* Buttons: colour sweep from the bottom + arrow slide */
  .btn { position: relative; overflow: hidden; isolation: isolate; transition: color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease); }
  .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: translateY(101%); transition: transform .45s var(--ease); }
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: translateY(0); }
  .btn-primary::before { background: var(--ink); }
  .btn-xl { transition: transform .35s var(--ease), box-shadow .35s var(--ease), color .3s var(--ease); }
  .btn-xl:hover { transform: translateY(-3px); box-shadow: 0 18px 38px rgba(221,54,98,.28); }
  .btn-primary:hover::before { transform: translateY(0); }
  .btn-ghost::before { background: var(--ink); }
  .btn-ghost:hover { color: #fff; border-color: var(--ink); background: var(--card); }
  .btn-ghost:hover::before { transform: translateY(0); }
  .btn-dark::before { background: var(--accent); }
  .btn-dark:hover::before { transform: translateY(0); }
  .btn .arrow { display: inline-block; transition: transform .35s var(--ease); }
  .btn:hover .arrow { transform: translateX(4px); }

  /* Header links: underline sweep */
  .nav-link::before { content: ""; position: absolute; left: 12px; right: 12px; bottom: 8px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
  .nav-link:hover::before { transform: scaleX(1); }
  .nav-link[aria-current="page"]::before { display: none; }
  .site-header { transition: box-shadow .3s var(--ease); }
  .site-header.scrolled { box-shadow: 0 6px 24px rgba(0,0,0,.06); }

  /* System cards (04) */
  .system-card { transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); }
  .system-card:hover { transform: translateY(-4px); border-color: #b9bec4; box-shadow: 0 16px 36px rgba(0,0,0,.07); }
  .system-card .mock { transition: transform .45s var(--ease); }
  .system-card:hover .mock { transform: scale(1.015); }
  .system-card:hover .system-card__label small { color: var(--accent-ink); }

  /* Platform rows (07) */
  .platform-row { transition: background .3s var(--ease); border-radius: 12px; }
  .platform-row:hover { background: var(--panel); }
  .platform-row .logo-tile { transition: transform .35s var(--ease), border-color .35s var(--ease); }
  .platform-row:hover .logo-tile { transform: translateY(-3px); border-color: #b9bec4; }

  /* Call steps (10) + FAQ (11) */
  .call-step { transition: padding-left .3s var(--ease); }
  .call-step:hover { padding-left: 8px; }
  .call-step:hover .call-step__num { color: var(--accent); }
  .call-step__num { transition: color .3s var(--ease); }
  .faq-item summary { transition: color .25s var(--ease); }
  .faq-item summary:hover { color: var(--accent); }
  .faq-item[open] p { animation: faq-open .35s var(--ease); }
  @keyframes faq-open { from { opacity: 0; transform: translateY(-6px); } }

  /* Check items + form controls */
  .check-item .check-badge { transition: transform .3s var(--ease); }
  .check-item:hover .check-badge { transform: scale(1.12); }
  .chips span, .seg span { transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease); }
  .chips label:hover span, .seg label:hover span { border-color: var(--accent); transform: translateY(-1px); }
  .input, .select { transition: border-color .25s var(--ease), box-shadow .25s var(--ease); }
  .input:hover, .select:hover { border-color: var(--ink); }
  .footer__link { transition: color .25s var(--ease), transform .25s var(--ease); }
  .footer__link:hover { transform: translateX(3px); }
  .form-card { transition: box-shadow .35s var(--ease); }
  .form-card:hover { box-shadow: 0 18px 40px rgba(0,0,0,.06); }

  /* AI phone */
  html.anim .hero__art { animation: float 9s ease-in-out 1s infinite; }
  .ai-chip { animation: float 6s ease-in-out infinite; }
  .ai-chip.two { animation-delay: -3s; }
  @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
  .ai-phone { transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
  .ai-visual:hover .ai-phone { transform: translateY(-6px); box-shadow: 0 32px 70px rgba(0,0,0,.12); }

  /* Scroll reveal (only when JS runs and motion is allowed) */
  html.anim .reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0ms); }
  html.anim .reveal.in { opacity: 1; transform: none; }
  html.anim .hero-line { opacity: 0; transform: translateY(24px); animation: rise .9s var(--ease) forwards; }
  html.anim .hero-line + .hero-line { animation-delay: .12s; }
  @keyframes rise { to { opacity: 1; transform: none; } }
  html.anim .peaks .pk { stroke-dasharray: 760; stroke-dashoffset: 760; }
  html.anim .peaks .pk-dot, html.anim .peaks .pk-label { opacity: 0; }
  html.anim .problem__figure.go .pk { animation: draw 1s var(--ease) forwards; }
  html.anim .problem__figure.go .pk--small { animation-delay: .45s; }
  html.anim .problem__figure.go .pk-dot { animation: fade .4s var(--ease) 1s forwards; }
  html.anim .problem__figure.go .pk-label--hot { animation: fade .5s var(--ease) .95s forwards; }
  html.anim .problem__figure.go .pk-label--cold { animation: fade .5s var(--ease) .6s forwards; }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  @keyframes fade { to { opacity: 1; } }

  @media (prefers-reduced-motion: reduce) {
    html.anim .hero__art { animation: none; }
    html.anim .reveal, html.anim .hero-line, html.anim .peaks .pk, html.anim .peaks .pk-dot, html.anim .peaks .pk-label { opacity: 1 !important; stroke-dashoffset: 0 !important; transform: none !important; animation: none !important; }
    .ai-chip { animation: none; }
    .logo-track { animation: none !important; }
    .btn:hover, .system-card:hover, .footer__link:hover, .ai-visual:hover .ai-phone { transform: none; }
  }

/* honeypot */
.apx-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Service pages nest under Services: a small marker reads cleaner than a rule */
.footer__sub{list-style:none;margin:12px 0 4px;padding:0;display:grid;gap:12px}
.footer__sub li{position:relative;padding-left:18px}
.footer__sub li::before{content:'';position:absolute;left:0;top:.62em;width:9px;height:1px;background:var(--line)}
.footer__link--sub{font-size:14px}