/* ============================================================
   Chat AI 5 — official site
   Implemented 1:1 from the Claude Design comps:
     dark  → `官网.dc.html`
     light → `官网 白天版.dc.html`
   The two comps are line-aligned and share one DOM, so the light
   theme is a pure re-skin: every declaration that differs between
   them is a custom property below, and nothing else is.

   NOTE: the design source has no box-sizing reset, so every
   explicit width/height in it is content-box (e.g. the web-mock
   sidebar is width:172px + padding:12px 10px = 192px occupied).
   We deliberately do NOT add `box-sizing:border-box` — it would
   shift the app-preview mock by ~20px.
   ============================================================ */

/* ============================================================
   THEME TOKENS
   Dark is the default so a no-JS client still gets a complete,
   correct page; the inline resolver in index.html sets
   data-theme before first paint.
   ============================================================ */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  /* page + type */
  --page-bg: #070809;
  --text-strong: #F5F7F6;
  --text-68: rgba(255,255,255,0.65);
  --text-60: rgba(255,255,255,0.55);
  --accent: #2ECC82;
  --accent-bright: #3DDB92;

  /* nav */
  --nav-pill-bg: rgba(255,255,255,0.045);
  --nav-pill-border: rgba(255,255,255,0.11);
  --nav-pill-shadow: inset 0 1px 0.5px rgba(255,255,255,0.22), 0 8px 24px rgba(0,0,0,0.4);
  --nav-link-hover-bg: rgba(255,255,255,0.08);
  --nav-login-bg: rgba(255,255,255,0.06);
  --nav-login-border: rgba(255,255,255,0.13);
  --nav-login-hover-bg: rgba(255,255,255,0.1);

  /* hero */
  --grid-line: rgba(255,255,255,0.032);
  --chip-bg: rgba(255,255,255,0.04);
  --chip-border: rgba(255,255,255,0.1);
  --chip-shadow: none;
  --chip-icon-fill: rgba(255,255,255,0.9);
  --chip-text: rgba(245,247,246,0.92);

  /* app mock — browser frame */
  --mock-frame-radius: 22px 22px 0 0;
  --mock-frame-bg: rgba(255,255,255,0.035);
  --mock-frame-blur: blur(24px) saturate(150%);
  --mock-frame-border: rgba(255,255,255,0.13);
  --mock-frame-border-bottom: none;
  --mock-frame-shadow: inset 0 1px 0.5px rgba(255,255,255,0.22), 0 -20px 70px -30px rgba(46,204,130,0.25), 0 24px 60px rgba(0,0,0,0.5);
  --mock-bar-border: rgba(255,255,255,0.08);
  --mock-dot: rgba(255,255,255,0.14);
  --mock-url-bg: rgba(255,255,255,0.06);
  --mock-url-text: rgba(255,255,255,0.5);
  --mock-url-icon: rgba(255,255,255,0.5);
  --mock-body-bg: #0A0B0D;

  /* app mock — sidebar */
  --mock-sidebar-bg: rgba(255,255,255,0.03);
  --mock-sidebar-border: rgba(255,255,255,0.08);
  --mock-newchat-bg: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.04));
  --mock-newchat-border: rgba(255,255,255,0.13);
  --mock-newchat-shadow: none;
  --mock-newchat-icon: #3DDB92;
  --mock-label: rgba(255,255,255,0.4);
  --mock-item-text: rgba(255,255,255,0.6);
  --mock-item-active-bg: rgba(255,255,255,0.07);
  --mock-item-active-border: rgba(255,255,255,0.09);
  --mock-logo-shadow: 0 3px 9px rgba(0,0,0,0.4);

  /* app mock — composer */
  --composer-bg: rgba(255,255,255,0.045);
  --composer-border: rgba(255,255,255,0.11);
  --composer-shadow: inset 0 1px 0.5px rgba(255,255,255,0.3), 0 8px 20px rgba(0,0,0,0.5);
  --placeholder: rgba(255,255,255,0.32);
  --composer-btn-bg: rgba(255,255,255,0.08);
  --composer-btn-text: rgba(255,255,255,0.9);
  --composer-chevron: rgba(255,255,255,0.5);
  --suggest-bg: rgba(255,255,255,0.06);
  --suggest-border: rgba(255,255,255,0.12);
  --suggest-text: rgba(255,255,255,0.8);
  --suggest-shadow: none;

  /* app mock — phone */
  --phone-bg: #0B0C0E;
  --phone-border: rgba(255,255,255,0.16);
  --phone-shadow: inset 0 1px 0.5px rgba(255,255,255,0.25), 0 24px 60px rgba(0,0,0,0.6);
  --phone-circle-bg: rgba(255,255,255,0.07);
  --phone-circle-border: rgba(255,255,255,0.12);
  --phone-circle-icon: rgba(255,255,255,0.9);
  --phone-logo-shadow: 0 2px 7px rgba(0,0,0,0.4);
  --pcomposer-shadow: inset 0 1px 0.5px rgba(255,255,255,0.3), 0 6px 16px rgba(0,0,0,0.5);
  --phone-home: rgba(255,255,255,0.35);

  /* feature + solution cards */
  --card-bg:
    radial-gradient(135% 95% at 12% -10%, rgba(255,255,255,0.09), rgba(255,255,255,0) 46%),
    linear-gradient(157deg, rgba(255,255,255,0.05), rgba(255,255,255,0.022));
  --card-border: rgba(255,255,255,0.11);
  --card-shadow: inset 0 1px 0.5px rgba(255,255,255,0.16), 0 8px 22px rgba(0,0,0,0.35);
  --icon-shadow-lg: drop-shadow(0 5px 10px rgba(0,0,0,0.45));
  --icon-shadow-sm: drop-shadow(0 4px 8px rgba(0,0,0,0.45));

  /* tool chips */
  --toolchip-bg: rgba(255,255,255,0.04);
  --toolchip-border: rgba(255,255,255,0.09);
  --toolchip-text: rgba(255,255,255,0.72);
  --toolchip-shadow: none;

  /* reviews */
  --review-bg:
    radial-gradient(135% 95% at 12% -10%, rgba(255,255,255,0.08), rgba(255,255,255,0) 46%),
    linear-gradient(157deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02));
  --review-border: rgba(255,255,255,0.1);
  --review-shadow: none;
  --review-text: rgba(255,255,255,0.6);

  /* pricing */
  --plan-bg:
    radial-gradient(135% 95% at 12% -10%, rgba(255,255,255,0.08), rgba(255,255,255,0) 46%),
    linear-gradient(157deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02));
  --plan-border: rgba(255,255,255,0.11);
  --plan-shadow: inset 0 1px 0.5px rgba(255,255,255,0.16), 0 8px 22px rgba(0,0,0,0.35);
  --plan-desc: rgba(255,255,255,0.5);
  --plan-desc-pro: rgba(255,255,255,0.55);
  --plan-period: rgba(255,255,255,0.5);
  --plan-savepill-text: #6FE7B0;
  --plan-savenote: rgba(255,255,255,0.45);
  --plan-features: rgba(255,255,255,0.65);
  --plan-features-pro: rgba(255,255,255,0.72);
  --plan-btn-bg: rgba(255,255,255,0.07);
  --plan-btn-border: rgba(255,255,255,0.14);
  --plan-btn-hover-bg: rgba(255,255,255,0.11);
  --plan-pro-bg:
    radial-gradient(140% 110% at 15% -15%, rgba(46,204,130,0.16), rgba(46,204,130,0) 55%),
    linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
  --plan-pro-border: rgba(46,204,130,0.45);
  --plan-pro-shadow: inset 0 1px 0.5px rgba(255,255,255,0.25), 0 0 0 5px rgba(46,204,130,0.06), 0 24px 60px -18px rgba(46,204,130,0.35), 0 12px 30px rgba(0,0,0,0.45);
  --plan-lifetime-bg:
    radial-gradient(135% 95% at 12% -10%, rgba(244,212,140,0.08), rgba(244,212,140,0) 46%),
    linear-gradient(157deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02));
  --plan-lifetime-border: rgba(222,169,91,0.3);
  --plan-tag-text: #E8C284;
  --pricing-note: rgba(255,255,255,0.4);

  /* footer */
  --footer-border: rgba(255,255,255,0.07);
  --footer-bg: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0));
  --footer-tagline: rgba(255,255,255,0.5);
  --footer-heading: rgba(255,255,255,0.45);
  --footer-link-hover: #FFFFFF;
  --footer-contact: #34D186;
  --footer-contact-hover: #6FE7B0;
  --footer-bottom: rgba(255,255,255,0.35);
  --badge-shadow: 0 0 0 0.5px rgba(255,255,255,0.16), 0 6px 18px rgba(0,0,0,0.45);
}

:root[data-theme="light"] {
  color-scheme: light;

  --page-bg: #F7F8FA;
  --text-strong: #17191C;
  --text-68: rgba(23,26,30,0.68);
  --text-60: rgba(23,26,30,0.6);
  --accent: #0FA463;
  --accent-bright: #0FA463;

  --nav-pill-bg: rgba(255,255,255,0.78);
  --nav-pill-border: rgba(17,24,28,0.08);
  --nav-pill-shadow: 0 8px 24px rgba(17,24,28,0.08);
  --nav-link-hover-bg: rgba(17,24,28,0.05);
  --nav-login-bg: rgba(17,24,28,0.05);
  --nav-login-border: rgba(17,24,28,0.1);
  /* the comp leaves this hover on its dark value — see README "刻意偏离" */
  --nav-login-hover-bg: rgba(17,24,28,0.08);

  --grid-line: rgba(17,24,28,0.045);
  --chip-bg: #FFFFFF;
  --chip-border: rgba(17,24,28,0.1);
  --chip-shadow: 0 1px 3px rgba(17,24,28,0.05);
  --chip-icon-fill: rgba(23,26,30,0.88);
  --chip-text: rgba(23,26,30,0.85);

  /* light turns the browser mock into a fully-rounded solid card:
     all four corners, no backdrop blur, bottom border restored */
  --mock-frame-radius: 22px;
  --mock-frame-bg: #FFFFFF;
  --mock-frame-blur: none;
  --mock-frame-border: rgba(17,24,28,0.12);
  --mock-frame-border-bottom: 0.5px solid rgba(17,24,28,0.12);
  --mock-frame-shadow: 0 -20px 70px -30px rgba(46,204,130,0.18), 0 26px 60px rgba(17,24,28,0.14);
  --mock-bar-border: rgba(17,24,28,0.08);
  --mock-dot: rgba(17,24,28,0.14);
  --mock-url-bg: rgba(17,24,28,0.05);
  --mock-url-text: rgba(23,26,30,0.55);
  --mock-url-icon: rgba(23,26,30,0.5);
  --mock-body-bg: #FAFBFC;

  --mock-sidebar-bg: rgba(17,24,28,0.025);
  --mock-sidebar-border: rgba(17,24,28,0.07);
  --mock-newchat-bg: #FFFFFF;
  --mock-newchat-border: rgba(17,24,28,0.12);
  --mock-newchat-shadow: 0 1px 2px rgba(17,24,28,0.06);
  --mock-newchat-icon: #12A05F;
  --mock-label: rgba(23,26,30,0.45);
  --mock-item-text: rgba(23,26,30,0.6);
  --mock-item-active-bg: rgba(17,24,28,0.05);
  --mock-item-active-border: rgba(17,24,28,0.08);
  --mock-logo-shadow: 0 3px 9px rgba(17,24,28,0.18);

  --composer-bg: #FFFFFF;
  --composer-border: rgba(17,24,28,0.1);
  --composer-shadow: 0 8px 20px rgba(17,24,28,0.08);
  --placeholder: rgba(23,26,30,0.38);
  --composer-btn-bg: rgba(17,24,28,0.05);
  --composer-btn-text: rgba(23,26,30,0.85);
  --composer-chevron: rgba(23,26,30,0.5);
  --suggest-bg: #FFFFFF;
  --suggest-border: rgba(17,24,28,0.1);
  --suggest-text: rgba(23,26,30,0.75);
  --suggest-shadow: 0 1px 2px rgba(17,24,28,0.05);

  --phone-bg: #FFFFFF;
  --phone-border: rgba(17,24,28,0.14);
  --phone-shadow: 0 24px 60px rgba(17,24,28,0.18);
  --phone-circle-bg: rgba(17,24,28,0.05);
  --phone-circle-border: rgba(17,24,28,0.1);
  --phone-circle-icon: rgba(23,26,30,0.85);
  --phone-logo-shadow: 0 2px 7px rgba(17,24,28,0.16);
  --pcomposer-shadow: 0 6px 16px rgba(17,24,28,0.08);
  --phone-home: rgba(17,24,28,0.25);

  --card-bg: #FFFFFF;
  --card-border: rgba(17,24,28,0.08);
  --card-shadow: 0 1px 3px rgba(17,24,28,0.04), 0 10px 26px rgba(17,24,28,0.06);
  --icon-shadow-lg: drop-shadow(0 5px 10px rgba(17,24,28,0.22));
  --icon-shadow-sm: drop-shadow(0 4px 8px rgba(17,24,28,0.22));

  --toolchip-bg: #FFFFFF;
  --toolchip-border: rgba(17,24,28,0.09);
  --toolchip-text: rgba(23,26,30,0.75);
  --toolchip-shadow: 0 1px 2px rgba(17,24,28,0.04);

  --review-bg: #FFFFFF;
  --review-border: rgba(17,24,28,0.08);
  --review-shadow: 0 1px 3px rgba(17,24,28,0.04), 0 8px 20px rgba(17,24,28,0.05);
  --review-text: rgba(23,26,30,0.62);

  --plan-bg: #FFFFFF;
  --plan-border: rgba(17,24,28,0.09);
  --plan-shadow: 0 1px 3px rgba(17,24,28,0.04), 0 10px 26px rgba(17,24,28,0.06);
  --plan-desc: rgba(23,26,30,0.55);
  --plan-desc-pro: rgba(23,26,30,0.6);
  --plan-period: rgba(23,26,30,0.5);
  --plan-savepill-text: #0E8A52;
  --plan-savenote: rgba(23,26,30,0.5);
  --plan-features: rgba(23,26,30,0.68);
  --plan-features-pro: rgba(23,26,30,0.75);
  --plan-btn-bg: rgba(17,24,28,0.05);
  --plan-btn-border: rgba(17,24,28,0.12);
  --plan-btn-hover-bg: rgba(17,24,28,0.08);
  --plan-pro-bg:
    radial-gradient(140% 110% at 15% -15%, rgba(46,204,130,0.12), rgba(46,204,130,0) 55%),
    #FFFFFF;
  --plan-pro-border: rgba(46,204,130,0.5);
  --plan-pro-shadow: 0 0 0 5px rgba(46,204,130,0.07), 0 24px 60px -18px rgba(46,204,130,0.28), 0 12px 30px rgba(17,24,28,0.08);
  --plan-lifetime-bg:
    radial-gradient(135% 95% at 12% -10%, rgba(244,212,140,0.22), rgba(244,212,140,0) 46%),
    #FFFFFF;
  --plan-lifetime-border: rgba(222,169,91,0.5);
  --plan-tag-text: #8F6425;
  --pricing-note: rgba(23,26,30,0.5);

  --footer-border: rgba(17,24,28,0.08);
  --footer-bg: linear-gradient(180deg, rgba(17,24,28,0.018), rgba(17,24,28,0));
  --footer-tagline: rgba(23,26,30,0.58);
  --footer-heading: rgba(23,26,30,0.5);
  --footer-link-hover: #17191C;
  --footer-contact: #0FA463;
  --footer-contact-hover: #0C8A54;
  --footer-bottom: rgba(23,26,30,0.45);
  --badge-shadow: 0 0 0 0.5px rgba(17,24,28,0.12), 0 6px 18px rgba(17,24,28,0.16);
}

/* ---------- base ---------- */
html, body {
  margin: 0;
  padding: 0;
  background: var(--page-bg);
}
html { scroll-behavior: smooth; }

h1, h2, h3, h4, p, ul, li, figure, address {
  margin: 0;
  padding: 0;
  font: inherit;
  font-style: normal;
}
ul { list-style: none; }
img { display: block; }

/* identical in both comps — the design keeps the dark-mode link green */
a {
  color: #34D186;
  text-decoration: none;
}
a:hover { color: #6FE7B0; }

.site {
  width: 100%;
  min-width: 1280px;
  background: var(--page-bg);
  font-family: -apple-system, 'SF Pro', system-ui, sans-serif;
  overflow: hidden;
  position: relative;
}

.spacer { flex: 1; }

/* shared section headings */
.eyebrow {
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 1.4px;
}
.section-title {
  text-align: center;
  font-size: 36px;
  font-weight: 800;
  color: var(--text-strong);
  margin-top: 12px;
  letter-spacing: -0.9px;
}

/* ---------- keyframes ---------- */
@keyframes cmarq  { 0% { transform: translateX(0); }    100% { transform: translateX(-50%); } }
@keyframes cmarqr { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }
@keyframes ctaShine { 0% { left: -45%; } 60% { left: 120%; } 100% { left: 120%; } }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 22px 72px 0;
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: inherit;
}
.nav__brand:hover { color: inherit; }
.nav__brand img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
}
.nav__brand span {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-strong);
  letter-spacing: -0.2px;
}

.nav__pill {
  position: absolute;
  left: 50%;
  top: 22px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  height: 46px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--nav-pill-bg);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  border: 0.5px solid var(--nav-pill-border);
  box-shadow: var(--nav-pill-shadow);
}
.nav__link {
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-68);
  transition: background 0.18s ease, color 0.18s ease;
}
.nav__link.is-active { color: var(--text-strong); }
.nav__link:hover {
  background: var(--nav-link-hover-bg);
  color: var(--text-strong);
}

.nav__login {
  display: flex;
  align-items: center;
  height: 42px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--nav-login-bg);
  border: 0.5px solid var(--nav-login-border);
  transition: background 0.18s ease, transform 0.12s ease;
}
.nav__login span {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-strong);
}
.nav__login:hover { background: var(--nav-login-hover-bg); }
.nav__login:active { transform: scale(0.97); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  padding: 96px 32px 90px;
}

.hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(720px 520px at 50% 30%, black, transparent 78%);
  mask-image: radial-gradient(720px 520px at 50% 30%, black, transparent 78%);
  pointer-events: none;
}

/* the three hero glows are identical in both comps */
.hero__glow { position: absolute; pointer-events: none; }
.hero__glow--green {
  top: -160px;
  left: 50%;
  margin-left: -430px;
  width: 860px;
  height: 560px;
  background: radial-gradient(closest-side, rgba(46,204,130,0.13), rgba(46,204,130,0) 70%);
}
.hero__glow--purple {
  top: 120px;
  left: 50%;
  margin-left: -620px;
  width: 520px;
  height: 420px;
  background: radial-gradient(closest-side, rgba(128,76,240,0.1), rgba(128,76,240,0) 70%);
}
.hero__glow--amber {
  top: 60px;
  left: 50%;
  margin-left: 180px;
  width: 540px;
  height: 440px;
  background: radial-gradient(closest-side, rgba(219,146,110,0.07), rgba(219,146,110,0) 70%);
}

.hero__inner {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero__title {
  font-size: 72px;
  line-height: 1.08;
  font-weight: 800;
  color: var(--text-strong);
  letter-spacing: -2.2px;
}
.hero__title span { color: var(--accent-bright); }

/* model chips */
.models {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.model-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 25px;
  border-radius: 999px;
  background: var(--chip-bg);
  border: 0.5px solid var(--chip-border);
  box-shadow: var(--chip-shadow);
}
.model-chip img { width: 24px; height: 24px; }
/* Claude's mark is 23px in the comp — needs the type selector to outrank the rule above */
.model-chip img.model-chip__img--23 { width: 23px; height: 23px; }
/* CSS beats the SVGs' fill presentation attribute; DeepSeek's path keeps its own brand fill */
.model-chip > svg { fill: var(--chip-icon-fill); }
.model-chip span {
  font-size: 17px;
  font-weight: 600;
  color: var(--chip-text);
}

/* CTA — identical in both comps */
.cta-row {
  margin-top: 42px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.cta {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 11px;
  height: 68px;
  padding: 0 44px;
  border-radius: 999px;
  background: linear-gradient(160deg, #34D186, #1B9E63);
  box-shadow:
    inset 0 1px 0.5px rgba(255,255,255,0.45),
    0 10px 28px rgba(46,204,130,0.35);
  transition: filter 0.18s ease, transform 0.12s ease;
}
.cta:hover { filter: brightness(1.08); }
.cta:active { transform: scale(0.97); }
.cta__shine {
  position: absolute;
  top: -8px;
  bottom: -8px;
  left: -45%;
  width: 34%;
  background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-18deg);
  animation: ctaShine 3.4s ease-in-out infinite;
  pointer-events: none;
}
.cta__label {
  position: relative;
  font-size: 19px;
  font-weight: 700;
  color: #04170E;
}

/* ---------- app preview ---------- */
.preview {
  position: relative;
  margin-top: 72px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* browser window */
.browser {
  position: relative;
  width: 760px;
  height: 440px;
  border-radius: var(--mock-frame-radius);
  overflow: hidden;
  background: var(--mock-frame-bg);
  backdrop-filter: var(--mock-frame-blur);
  -webkit-backdrop-filter: var(--mock-frame-blur);
  border: 0.5px solid var(--mock-frame-border);
  border-bottom: var(--mock-frame-border-bottom);
  box-shadow: var(--mock-frame-shadow);
}
.browser__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  border-bottom: 0.5px solid var(--mock-bar-border);
}
.browser__dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--mock-dot);
}
.browser__urlwrap {
  flex: 1;
  display: flex;
  justify-content: center;
}
.browser__url {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--mock-url-bg);
  font-size: 11.5px;
  color: var(--mock-url-text);
}
.browser__url svg rect,
.browser__url svg path { stroke: var(--mock-url-icon); }
.browser__body {
  display: flex;
  width: 100%;
  height: 400px;
  background: var(--mock-body-bg);
}

/* web mock — sidebar */
.wsidebar {
  width: 172px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: var(--mock-sidebar-bg);
  border-right: 0.5px solid var(--mock-sidebar-border);
  padding: 12px 10px;
}
.wsidebar__brand {
  display: flex;
  align-items: center;
  gap: 6px;
}
.wsidebar__brand img { width: 17px; height: 17px; border-radius: 5px; }
.wsidebar__brand span { font-size: 10.5px; font-weight: 700; color: var(--text-strong); }
.wsidebar__new {
  height: 26px;
  border-radius: 9px;
  background: var(--mock-newchat-bg);
  border: 0.5px solid var(--mock-newchat-border);
  box-shadow: var(--mock-newchat-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.wsidebar__new svg path { stroke: var(--mock-newchat-icon); }
.wsidebar__new span { font-size: 9px; font-weight: 600; color: var(--text-strong); }
.wsidebar__label {
  font-size: 7.5px;
  font-weight: 600;
  color: var(--mock-label);
  letter-spacing: 0.6px;
  margin-top: 4px;
}
.wsidebar__item {
  height: 20px;
  display: flex;
  align-items: center;
  padding: 0 7px;
  font-size: 8.5px;
  color: var(--mock-item-text);
  white-space: nowrap;
  overflow: hidden;
}
.wsidebar__item.is-active {
  border-radius: 7px;
  background: var(--mock-item-active-bg);
  border: 0.5px solid var(--mock-item-active-border);
  color: var(--text-strong);
}
.wsidebar__user {
  display: flex;
  align-items: center;
  gap: 6px;
  border-top: 0.5px solid var(--mock-sidebar-border);
  padding-top: 8px;
}
.wsidebar__user img {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  object-fit: cover;
}
.wsidebar__user span { font-size: 8.5px; font-weight: 600; color: var(--text-strong); }

/* web mock — main */
.wmain {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.wmain__glow {
  position: absolute;
  top: -60px;
  left: 50%;
  margin-left: -160px;
  width: 320px;
  height: 220px;
  background: radial-gradient(closest-side, rgba(46,224,138,0.09), rgba(46,224,138,0) 72%);
  pointer-events: none;
}
.wmain__greet {
  display: flex;
  align-items: center;
  gap: 9px;
}
.wmain__greet img {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  box-shadow: var(--mock-logo-shadow);
}
.wmain__greet span {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 25px;
  color: var(--text-strong);
}

.wcomposer {
  width: 74%;
  border-radius: 17px;
  background: var(--composer-bg);
  border: 0.5px solid var(--composer-border);
  box-shadow: var(--composer-shadow);
  padding: 11px 9px 8px;
}
.wcomposer__input {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 4px;
}
.caret {
  display: inline-block;
  width: 1.5px;
  height: 11px;
  background: #34D186;
  border-radius: 1px;
}
.caret--sm { height: 9px; }
.ph { font-size: 9.5px; color: var(--placeholder); }
.ph--sm { font-size: 7.5px; }
.wcomposer__row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 9px;
}
.wcomposer__icon {
  width: 21px;
  height: 21px;
  border-radius: 999px;
  background: var(--composer-btn-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.wcomposer__auto {
  height: 21px;
  border-radius: 999px;
  background: var(--composer-btn-bg);
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 8px;
}
.wcomposer__auto span { font-size: 8.5px; font-weight: 600; color: var(--composer-btn-text); }
.wcomposer__auto svg path { stroke: var(--composer-chevron); }
.wcomposer__send {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #2ECC82;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wsuggest {
  display: flex;
  align-items: center;
  gap: 5px;
}
.wsuggest__chip {
  height: 20px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--suggest-bg);
  border: 0.5px solid var(--suggest-border);
  box-shadow: var(--suggest-shadow);
  display: flex;
  align-items: center;
  font-size: 8px;
  font-weight: 500;
  color: var(--suggest-text);
}

/* phone */
.phone {
  position: relative;
  width: 200px;
  height: 400px;
  margin-left: -70px;
  margin-bottom: -60px;
  border-radius: 30px;
  overflow: hidden;
  background: var(--phone-bg);
  border: 1px solid var(--phone-border);
  box-shadow: var(--phone-shadow);
  flex-shrink: 0;
  z-index: 2;
}
.phone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--mock-body-bg);
  display: flex;
  flex-direction: column;
}
.phone__glow {
  position: absolute;
  top: -30px;
  left: 50%;
  margin-left: -90px;
  width: 180px;
  height: 130px;
  background: radial-gradient(closest-side, rgba(46,224,138,0.1), rgba(46,224,138,0) 72%);
  pointer-events: none;
}
.phone__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 12px 0;
}
.phone__circle {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--phone-circle-bg);
  border: 0.5px solid var(--phone-circle-border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.phone__circle svg path,
.phone__circle svg rect { stroke: var(--phone-circle-icon); }
.phone__title { font-size: 9.5px; font-weight: 600; color: var(--text-strong); }
.phone__greet {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.phone__greet img {
  width: 17px;
  height: 17px;
  border-radius: 5px;
  box-shadow: var(--phone-logo-shadow);
}
.phone__greet span {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 15px;
  color: var(--text-strong);
}
.phone__bottom {
  padding: 0 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.phone__chips {
  display: flex;
  gap: 4px;
  overflow: hidden;
}
.phone__chip {
  height: 17px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--suggest-bg);
  border: 0.5px solid var(--suggest-border);
  box-shadow: var(--suggest-shadow);
  display: flex;
  align-items: center;
  font-size: 7px;
  font-weight: 500;
  color: var(--suggest-text);
  white-space: nowrap;
}
.pcomposer {
  border-radius: 14px;
  background: var(--composer-bg);
  border: 0.5px solid var(--composer-border);
  box-shadow: var(--pcomposer-shadow);
  padding: 8px 7px 6px;
}
.pcomposer__input {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 3px;
}
.pcomposer__row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 7px;
}
.pcomposer__icon {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--composer-btn-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pcomposer__auto {
  height: 16px;
  border-radius: 999px;
  background: var(--composer-btn-bg);
  display: flex;
  align-items: center;
  padding: 0 6px;
}
.pcomposer__auto span { font-size: 7px; font-weight: 600; color: var(--composer-btn-text); }
.pcomposer__send {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #2ECC82;
  display: flex;
  align-items: center;
  justify-content: center;
}
.phone__home {
  height: 3px;
  width: 56px;
  border-radius: 999px;
  background: var(--phone-home);
  margin: 2px auto 0;
}

/* ============================================================
   PRO FEATURES
   ============================================================ */
.features {
  position: relative;
  max-width: 1160px;
  margin: 0 auto;
  padding: 20px 32px 96px;
  scroll-margin-top: 24px;
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 48px;
}
.feature-card,
.solution-card {
  background: var(--card-bg);
  border: 0.5px solid var(--card-border);
  box-shadow: var(--card-shadow);
}
.feature-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 24px 24px;
  border-radius: 24px;
  transition: border-color 0.2s ease;
}
/* identical in both comps */
.feature-card:hover { border-color: rgba(46,204,130,0.35); }
.feature-card img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  filter: var(--icon-shadow-lg);
}
.feature-card h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-strong);
  letter-spacing: -0.2px;
}
.feature-card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-60);
  margin-top: -6px;
}

/* ============================================================
   ONE-CLICK SOLUTIONS
   ============================================================ */
.solutions {
  position: relative;
  padding: 0 0 96px;
  scroll-margin-top: 24px;
}
/* identical in both comps */
.solutions__glow {
  position: absolute;
  top: 40px;
  left: 50%;
  margin-left: -460px;
  width: 920px;
  height: 480px;
  background: radial-gradient(closest-side, rgba(128,76,240,0.08), rgba(128,76,240,0) 70%);
  pointer-events: none;
}
.solutions__inner {
  position: relative;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 32px;
}
.solution-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 48px;
}
.solution-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 22px;
  border-radius: 24px;
}
.solution-card img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: var(--icon-shadow-sm);
}
.solution-card h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-strong);
}
.solution-card ul {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 13.5px;
  color: var(--text-60);
  line-height: 1.4;
}
.solution-card li {
  display: flex;
  gap: 8px;
}
/* bullet keeps the dark-mode green in both comps */
.solution-card li span { color: #2ECC82; }

.toolchips {
  margin-top: 34px;
  display: flex;
  justify-content: center;
}
.toolchips__inner {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 1020px;
  padding: 0 32px;
}
.toolchip {
  height: 38px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--toolchip-bg);
  border: 0.5px solid var(--toolchip-border);
  box-shadow: var(--toolchip-shadow);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--toolchip-text);
}

/* ============================================================
   REVIEWS
   ============================================================ */
.reviews {
  position: relative;
  padding: 0 0 96px;
}
.marquee {
  margin-top: 44px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.marquee__track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: cmarqr 46s linear infinite;
}
.review-card {
  width: 340px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 22px 20px;
  border-radius: 22px;
  background: var(--review-bg);
  border: 0.5px solid var(--review-border);
  box-shadow: var(--review-shadow);
  flex-shrink: 0;
}
.review-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* avatar gradients and the star row are identical in both comps */
.avatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #FFFFFF;
  flex-shrink: 0;
}
.avatar--blue   { background: linear-gradient(150deg, #6C8CFF, #4A5BD6); }
.avatar--orange { background: linear-gradient(150deg, #FF9A6C, #D66A4A); }
.avatar--purple { background: linear-gradient(150deg, #B98CFF, #7E4AD6); }
.review-card__meta {
  display: flex;
  flex-direction: column;
}
.review-card__name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-strong);
}
.stars {
  font-size: 11.5px;
  color: #E8B44C;
  letter-spacing: 1px;
}
.review-card h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-strong);
}
.review-card p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--review-text);
}

/* ============================================================
   PRICING
   ============================================================ */
.pricing {
  position: relative;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 32px 100px;
  scroll-margin-top: 24px;
}
/* identical in both comps */
.pricing__glow {
  position: absolute;
  top: 60px;
  left: 50%;
  margin-left: -400px;
  width: 800px;
  height: 500px;
  background: radial-gradient(closest-side, rgba(46,204,130,0.09), rgba(46,204,130,0) 70%);
  pointer-events: none;
}
.pricing .eyebrow,
.pricing .section-title,
.pricing__note { position: relative; }

.plans {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.08fr 1fr;
  gap: 16px;
  margin-top: 52px;
  align-items: stretch;
}

.plan {
  display: flex;
  flex-direction: column;
  padding: 28px 26px 26px;
  border-radius: 26px;
  margin-top: 18px;
  background: var(--plan-bg);
  border: 0.5px solid var(--plan-border);
  box-shadow: var(--plan-shadow);
}

.plan--pro {
  position: relative;
  padding: 30px 28px 28px;
  border-radius: 28px;
  margin-top: 0;
  background: var(--plan-pro-bg);
  border: 1px solid var(--plan-pro-border);
  box-shadow: var(--plan-pro-shadow);
}

.plan--lifetime {
  background: var(--plan-lifetime-bg);
  border: 0.5px solid var(--plan-lifetime-border);
}

/* identical in both comps */
.plan__badge {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  height: 30px;
  padding: 0 14px;
  border-radius: 999px;
  background: linear-gradient(160deg, #34D186, #1B9E63);
  box-shadow:
    inset 0 1px 0.5px rgba(255,255,255,0.45),
    0 6px 16px rgba(46,204,130,0.4);
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 800;
  color: #04170E;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

.plan__nameRow {
  display: flex;
  align-items: center;
  gap: 8px;
}
.plan__name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-strong);
}
.plan__tag {
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(222,169,91,0.14);
  border: 0.5px solid rgba(222,169,91,0.4);
  display: flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  background-clip: padding-box;
  color: var(--plan-tag-text);
}
.plan__desc {
  font-size: 13px;
  color: var(--plan-desc);
  margin-top: 6px;
  line-height: 1.5;
}
.plan__desc--pro { color: var(--plan-desc-pro); }

.plan__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 20px;
}
.plan__amount {
  font-size: 40px;
  font-weight: 800;
  color: var(--text-strong);
  letter-spacing: -1px;
}
.plan__amount--lg {
  font-size: 46px;
  letter-spacing: -1.2px;
}
/* the gold price gradient is identical in both comps */
.plan__amount--gold {
  background: linear-gradient(180deg, #F4D48C 6%, #DEA95B 52%, #BE8A40 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.plan__period {
  font-size: 14px;
  color: var(--plan-period);
}

.plan__save {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.plan__savepill {
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(46,204,130,0.14);
  border: 0.5px solid rgba(46,204,130,0.35);
  display: flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--plan-savepill-text);
}
.plan__savenote {
  font-size: 12.5px;
  color: var(--plan-savenote);
}

.plan__features {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 22px;
  font-size: 13.5px;
  color: var(--plan-features);
}
.plan__features--pro {
  margin-top: 20px;
  color: var(--plan-features-pro);
}
.plan__features li {
  display: flex;
  gap: 9px;
  align-items: center;
}
.plan__features svg { flex-shrink: 0; }

.plan__btn {
  margin-top: 26px;
  height: 46px;
  border-radius: 999px;
  background: var(--plan-btn-bg);
  border: 0.5px solid var(--plan-btn-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-strong);
  transition: background 0.18s ease, filter 0.18s ease, transform 0.12s ease;
}
.plan__btn:hover { background: var(--plan-btn-hover-bg); color: var(--text-strong); }
.plan__btn:active { transform: scale(0.98); }

/* the two coloured plan buttons are identical in both comps */
.plan__btn--pro {
  height: 50px;
  background: linear-gradient(160deg, #34D186, #1B9E63);
  border: none;
  box-shadow:
    inset 0 1px 0.5px rgba(255,255,255,0.45),
    0 10px 26px rgba(46,204,130,0.4);
  font-size: 15.5px;
  font-weight: 800;
  color: #04170E;
}
.plan__btn--pro:hover {
  filter: brightness(1.08);
  background: linear-gradient(160deg, #34D186, #1B9E63);
  color: #04170E;
}

.plan__btn--gold {
  background: linear-gradient(180deg, #F4D48C, #C99950);
  border: none;
  box-shadow:
    inset 0 1px 0.5px rgba(255,255,255,0.5),
    0 8px 22px rgba(222,169,91,0.3);
  font-size: 14.5px;
  font-weight: 800;
  color: #2B1D08;
}
.plan__btn--gold:hover {
  filter: brightness(1.06);
  background: linear-gradient(180deg, #F4D48C, #C99950);
  color: #2B1D08;
}

.pricing__note {
  text-align: center;
  font-size: 13px;
  color: var(--pricing-note);
  margin-top: 26px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  border-top: 0.5px solid var(--footer-border);
  background: var(--footer-bg);
  scroll-margin-top: 24px;
}
.footer__inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 56px 32px 40px;
  display: flex;
  gap: 60px;
}
.footer__brandcol {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.footer__brand {
  display: flex;
  align-items: center;
  gap: 11px;
}
.footer__brand img {
  width: 32px;
  height: 32px;
  border-radius: 9px;
}
.footer__brand span {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-strong);
}
.footer__tagline {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--footer-tagline);
  max-width: 300px;
}
.footer__badge {
  width: max-content;
  display: block;
  border-radius: 9px;
  box-shadow: var(--badge-shadow);
  transition: filter 0.18s ease;
}
.footer__badge img {
  height: 44px;
  width: auto;
  border-radius: 9px;
}
.footer__badge:hover { filter: brightness(1.18); }

.footer__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer__col h4 {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--footer-heading);
  letter-spacing: 1px;
}
.footer__col a {
  font-size: 13.5px;
  color: var(--text-68);
  transition: color 0.16s ease;
}
.footer__col a:hover { color: var(--footer-link-hover); }
.footer__address {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-68);
}
/* type selector needed so these outrank `.footer__col a` above */
.footer__col a.footer__contact {
  font-size: 13.5px;
  color: var(--footer-contact);
}
.footer__col a.footer__contact:hover { color: var(--footer-contact-hover); }

.footer__bottom {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 32px 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--footer-bottom);
}

/* ============================================================
   RESPONSIVE
   Both comps are fixed 1280+ desktop layouts — everything above
   is byte-for-byte from them. Below 1280 we scale the same layout
   down; ≥1280 renders identically to the comps.
   ============================================================ */
@media (max-width: 1279px) {
  .site { min-width: 0; }
  .nav { padding: 22px 28px 0; }
  .hero { padding: 72px 24px 74px; }
  .hero__title { font-size: 60px; letter-spacing: -1.7px; }
  /* Pin the mock to its natural footprint (760 browser + 200 phone - 70 overlap)
     so the browser window never shrinks/distorts, then scale the whole thing.
     .site's overflow:hidden clips the overhang, so no horizontal scrollbar. */
  .preview {
    width: 890px;
    transform: scale(0.86);
    transform-origin: top center;
    margin-bottom: -62px;
  }
  .features, .solutions__inner, .pricing { padding-left: 24px; padding-right: 24px; }
  .footer__inner { gap: 40px; }
}

@media (max-width: 1023px) {
  .nav__pill { display: none; }
  .hero { padding: 56px 24px 62px; }
  .hero__title { font-size: 48px; letter-spacing: -1.3px; }
  .section-title { font-size: 30px; letter-spacing: -0.6px; }
  .model-chip { height: 46px; padding: 0 18px; gap: 8px; }
  .model-chip span { font-size: 15px; }
  .cta { height: 60px; padding: 0 34px; }
  .cta__label { font-size: 17px; }
  .preview {
    transform: scale(0.66);
    margin-top: 48px;
    margin-bottom: -152px;
  }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .solution-grid { grid-template-columns: repeat(2, 1fr); }
  .plans {
    grid-template-columns: 1fr;
    gap: 30px;
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
  }
  .plan, .plan--pro { margin-top: 0; }
  .footer__inner { flex-wrap: wrap; gap: 36px 60px; }
  .footer__brandcol { flex: 1 1 100%; }
}

@media (max-width: 767px) {
  .nav { padding: 18px 18px 0; }
  .nav__brand img { width: 30px; height: 30px; }
  .nav__brand span { font-size: 16px; }
  .nav__login { height: 38px; padding: 0 16px; }
  .hero { padding: 40px 18px 44px; }
  .hero__title { font-size: 36px; line-height: 1.12; letter-spacing: -0.9px; }
  .section-title { font-size: 25px; letter-spacing: -0.4px; }
  .eyebrow { font-size: 12px; }
  .models { gap: 8px; margin-top: 24px; }
  .model-chip { height: 40px; padding: 0 14px; gap: 7px; }
  .model-chip img, .model-chip img.model-chip__img--23 { width: 19px; height: 19px; }
  .model-chip span { font-size: 13.5px; }
  .cta-row { margin-top: 32px; }
  .preview {
    transform: scale(0.42);
    margin-top: 36px;
    margin-bottom: -258px;
  }
  .features { padding: 8px 18px 64px; }
  .feature-grid, .solution-grid { grid-template-columns: 1fr; margin-top: 32px; }
  .solutions { padding-bottom: 64px; }
  .solutions__inner { padding: 0 18px; }
  .toolchips__inner { padding: 0 18px; gap: 8px; }
  .toolchip { height: 34px; padding: 0 13px; font-size: 12.5px; }
  .reviews { padding-bottom: 64px; }
  .marquee { margin-top: 32px; }
  .review-card { width: 264px; }
  .pricing { padding: 0 18px 72px; }
  .plans { margin-top: 36px; }
  .footer__inner { padding: 40px 18px 32px; gap: 30px; }
  .footer__col { flex: 1 1 40%; }
  .footer__bottom {
    padding: 0 18px 28px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

@media (max-width: 479px) {
  .hero__title { font-size: 30px; letter-spacing: -0.6px; }
  .preview { transform: scale(0.36); margin-bottom: -282px; }
}

@media (max-width: 374px) {
  .preview { transform: scale(0.30); margin-bottom: -308px; }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee__track, .cta__shine { animation: none; }
  .cta__shine { display: none; }
}