/* Вот Сайт — production stylesheet
   Breakpoints: 1200 (grid), 900 (stack), 768 (mobile CTA), 480 (compact) */

:root {
  --ink: #12161C;
  --ink-2: #3C4654;
  --mut: #6B7480;
  --mut-2: #7B8798;
  --mut-3: #9AA4B0;

  --line: #EAEDF0;
  --line-2: #E3E7EC;
  --line-3: #E8ECF0;

  --bg-soft: #F7F9FA;
  --bg-soft-2: #F4F6F8;
  --mint: #F3FAF6;
  --mint-line: #DCEDE4;
  --mint-line-2: #D7EBE0;
  --cream: #FFFCF4;
  --cream-line: #EFE4CC;
  --amber: #8A6108;
  --amber-bg: #FFF6E3;
  --amber-line: #F0E3C4;

  --green: #0F6B45;
  --green-d: #0B5335;
  --green-l: #35D68B;

  --dark: #0D1512;
  --dark-2: #12161C;
  --dark-3: #16211C;
  --dark-line: #22302A;
  --dark-txt: #A9B6AF;
  --dark-txt-2: #7E8C85;

  --r-lg: 20px;
  --r-md: 12px;
  --r-pill: 100px;

  --sec: 120px;
  --gut: 24px;

  --h1: clamp(38px, 5.6vw, 80px);
  --h2: clamp(28px, 3.6vw, 48px);
  --h3: clamp(24px, 2.6vw, 36px);
  --h4: clamp(20px, 1.8vw, 24px);
  --big: clamp(40px, 4.4vw, 56px);
  --big-2: clamp(48px, 5.6vw, 72px);
  --body: 17px;

  --ff: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--ff);
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }

a { color: var(--green); text-decoration: none; }
a:hover { color: var(--green-d); }

.wrap { width: min(1200px, 100% - 48px); margin-inline: auto; }

.sec { padding-top: var(--sec); }

.g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gut); }
.c3 { grid-column: span 3; }
.c4 { grid-column: span 4; }
.c5 { grid-column: span 5; }
.c6 { grid-column: span 6; }
.c7 { grid-column: span 7; }
.s6 { grid-column: 6 / span 7; }
.s7-6 { grid-column: 7 / span 6; }
.s7-3 { grid-column: 7 / span 3; }
.s9 { grid-column: 9 / span 4; }
.s10 { grid-column: 10 / span 3; }

.kicker {
  font-size: 13px; font-weight: 700; letter-spacing: 0.1em;
  color: var(--mut-2); text-transform: uppercase;
}
.kicker--green { color: var(--green); }
.kicker--amber { color: var(--amber); }

h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.038em; line-height: 1.05; }
h1 { font-size: var(--h1); letter-spacing: -0.042em; line-height: 0.96; }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); letter-spacing: -0.032em; line-height: 1.12; }
.thin { font-weight: 400; }
.mark { background: linear-gradient(transparent 64%, #C9EFDC 64%); }

p { margin: 0; font-size: var(--body); line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.lead { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 600; padding: 18px 32px;
  border-radius: var(--r-pill); border: 0; cursor: pointer;
  transition: background .2s, transform .2s; text-align: center;
}
.btn--green { background: var(--green); color: #fff; }
.btn--green:hover { background: var(--green-d); color: #fff; transform: translateY(-1px); }
.btn--dark { background: var(--ink); color: #fff; font-size: 15px; padding: 14px 24px; }
.btn--dark:hover { background: var(--green); color: #fff; }
.btn--mint { background: var(--green-l); color: var(--dark); font-weight: 700; }
.btn--mint:hover { background: #2BC17C; color: var(--dark); transform: translateY(-1px); }

/* ---------- header ---------- */

.hdr {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.hdr__in { height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.logo { display: flex; align-items: baseline; gap: 3px; font-family: var(--ff-mono); }
.logo__t { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--ink); white-space: pre; }
.logo__c { width: 11px; height: 16px; background: var(--green); flex: 0 0 auto; }
.logo__c--on { animation: blink 1.15s steps(1) infinite; }
@keyframes blink { 0%, 48% { opacity: 1; } 49%, 100% { opacity: 0; } }

.hdr__right { display: flex; align-items: center; gap: 32px; }
.hdr__phone { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.hdr__phone a { font-size: 20px; font-weight: 700; letter-spacing: -0.015em; color: var(--ink); white-space: nowrap; }
.hdr__phone span { font-size: 13px; color: var(--mut); }

.progress { height: 2px; background: transparent; }
.progress__bar { height: 2px; width: 0; background: var(--green); }

/* ---------- hero ---------- */

.hero {
  background: var(--bg-soft);
  background-image: linear-gradient(#E7ECEF 1px, transparent 1px), linear-gradient(90deg, #E7ECEF 1px, transparent 1px);
  background-size: 72px 72px;
  background-position: center top;
}
.hero__in { padding: 96px 0; align-items: center; }
.hero__copy { display: flex; flex-direction: column; gap: 24px; }
.pill {
  display: inline-flex; align-items: center; gap: 10px; width: max-content;
  background: #fff; border: 1px solid var(--mint-line-2); color: var(--green);
  font-size: 14px; font-weight: 600; padding: 10px 16px; border-radius: var(--r-pill);
}
.dot { position: relative; width: 8px; height: 8px; flex: 0 0 auto; }
.dot i, .dot b { position: absolute; inset: 0; border-radius: 50%; background: var(--green); }
.dot b { animation: pulse 2.2s ease-out infinite; }
@keyframes pulse {
  0% { transform: scale(1); opacity: .5; }
  70%, 100% { transform: scale(2.8); opacity: 0; }
}
.hero__cta { display: flex; align-items: center; gap: 24px; margin-top: 8px; flex-wrap: wrap; }
.hero__cta p { font-size: 15px; line-height: 1.5; color: var(--mut); max-width: 200px; }

.mockwrap { position: relative; }
.mockwrap__ghost {
  position: absolute; top: 28px; left: 20px; right: 44px; height: 320px;
  border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line-3);
  transform: rotate(-2.2deg); box-shadow: 0 10px 28px rgba(18, 22, 28, .05);
}
.badge-float {
  position: absolute; top: -26px; right: -12px; z-index: 3;
  background: var(--amber-bg); border: 1px solid var(--amber-line);
  border-radius: var(--r-md); padding: 10px 16px; pointer-events: none;
  animation: floatB 9s ease-in-out infinite;
  font-family: var(--ff-mono); font-size: 13px; font-weight: 700; color: var(--amber);
}
@keyframes floatB {
  0%, 100% { transform: rotate(6deg) translate(0, 0); }
  50% { transform: rotate(3deg) translate(-6px, -10px); }
}
.note-float {
  position: absolute; bottom: -30px; left: -52px; z-index: 3;
  display: flex; align-items: flex-end; gap: 8px; pointer-events: none;
  animation: floatA 7s ease-in-out infinite;
}
.note-float span { font-size: 15px; font-weight: 600; color: var(--green); line-height: 1.3; max-width: 132px; }
.note-float i {
  width: 30px; height: 22px; border-right: 2px solid var(--green); border-top: 2px solid var(--green);
  border-top-right-radius: 16px; transform: rotate(8deg); margin-bottom: 4px;
}
@keyframes floatA {
  0%, 100% { transform: rotate(-5deg) translate(0, 0); }
  50% { transform: rotate(-3deg) translate(4px, -12px); }
}

.mock {
  position: relative; z-index: 2;
  border: 1px solid var(--line-2); border-radius: var(--r-lg); background: #fff; padding: 16px;
  box-shadow: 0 1px 2px rgba(18, 22, 28, .04), 0 28px 64px rgba(18, 22, 28, .1);
  transform: rotate(1.1deg);
}
.mock__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 16px; }
.mock__stage { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mock__led { width: 8px; height: 8px; border-radius: 50%; background: var(--green-l); flex: 0 0 auto; }
.mock__label, .mock__timer { font-family: var(--ff-mono); font-size: 13px; }
.mock__label { font-weight: 500; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock__timer { font-weight: 700; color: var(--green); white-space: nowrap; }

.win { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line-2); background: #fff; }
.win__chrome { height: 36px; background: var(--bg-soft-2); border-bottom: 1px solid var(--line); display: flex; align-items: center; padding: 0 12px; gap: 16px; }
.win__dots { display: flex; gap: 6px; flex: 0 0 auto; }
.win__dots i { width: 9px; height: 9px; border-radius: 50%; background: #DCE2E8; }
.win__url { flex: 1; min-width: 0; height: 20px; border-radius: 6px; background: #fff; border: 1px solid var(--line-3); display: flex; align-items: center; padding: 0 8px; }
.win__url span { font-family: var(--ff-mono); font-size: 11px; color: var(--mut-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.skel { min-height: 432px; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.skel__row { display: flex; align-items: center; justify-content: space-between; }
.skel__brand { display: flex; align-items: center; gap: 8px; }
.sq { width: 20px; height: 20px; border-radius: 6px; background: var(--ink); }
.ln { height: 8px; border-radius: 4px; background: #DDE3E9; }
.ln--soft { background: #EBEFF3; }
.pillbar { height: 24px; border-radius: var(--r-pill); background: var(--green); }
.skel__hero { border-radius: var(--r-md); background: var(--ink); padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.skel__hero .ln { background: #fff; height: 14px; }
.skel__hero .ln--dim { background: #4B5A65; height: 8px; margin-top: 4px; }
.skel__hero .pillbar { background: var(--green-l); width: 96px; height: 26px; margin-top: 8px; }
.skel__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.skel__card { border: 1px solid var(--line-3); border-radius: var(--r-md); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.skel__card i { width: 24px; height: 24px; border-radius: 8px; background: #E7F1EB; }
.skel__two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.skel__two > div { border: 1px solid var(--line-3); border-radius: var(--r-md); height: 64px; background: var(--bg-soft); }
.skel__phone {
  border: 1px solid var(--mint-line-2); background: var(--mint); border-radius: var(--r-md);
  padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.skel__phone span { font-family: var(--ff-mono); font-size: 12px; font-weight: 700; color: var(--green); }
.skel__phone .ln { background: #BEDCCB; width: 96px; }
.mock__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 8px 8px; }
.mock__foot span { font-size: 13px; color: var(--mut); }
.mock__foot em { font-family: var(--ff-mono); font-size: 12px; color: var(--mut-3); font-style: normal; }

/* ---------- dark stats band ---------- */

.band { background: var(--dark); }
.band__in { padding: 88px 0; }
.band__col { display: flex; flex-direction: column; padding-right: 32px; }
.band__col:last-child { padding-right: 0; }
.band__k { font-family: var(--ff-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; color: #5E6E66; }
.band__k--on { color: var(--green-l); }
.band__figwrap { display: flex; align-items: flex-end; min-height: 68px; margin-top: 20px; }
.band__fig { font-size: var(--big); font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: #fff; white-space: nowrap; }
.band__fig--on { font-size: var(--big-2); color: var(--green-l); line-height: .92; }
.band__rule { height: 1px; background: var(--dark-line); margin-top: 24px; }
.band__rule--on { background: #2E6B50; }
.band__d { font-size: 16px; line-height: 1.55; color: var(--dark-txt); margin-top: 20px; }
.band__d--on { color: #C3D3CB; }

/* ---------- question cards ---------- */

.qcard { border-radius: var(--r-lg); padding: 48px; }
.qcard--cream {
  background: var(--cream); border: 1px solid var(--cream-line);
  transform: rotate(-0.7deg); box-shadow: 0 16px 40px rgba(90, 72, 32, .06);
}
.qcard--mint {
  background: var(--mint); border: 1px solid var(--mint-line);
  transform: rotate(0.5deg); box-shadow: 0 16px 40px rgba(15, 107, 69, .06);
}
.qcard h3 { margin-top: 24px; }
.qcard p { margin-top: 16px; }
.qcard p:first-of-type { margin-top: 24px; }

/* ---------- marquee ---------- */

.mq { margin-top: var(--sec); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-soft); overflow: hidden; }
.mq__track { display: flex; width: max-content; animation: mqmove 36s linear infinite; }
.mq__group { display: flex; align-items: center; gap: 48px; padding: 24px 24px 24px 0; }
.mq__group span { font-size: 17px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.mq__group i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex: 0 0 auto; }
@keyframes mqmove { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .mq__track { animation: none; }
  .badge-float, .note-float, .dot b { animation: none; }
}

/* ---------- before / after ---------- */

.ba { background: var(--dark); margin-top: var(--sec); }
.ba__in { padding: 96px 0; }
.ba h2 { color: #fff; }
.ba h2 .thin { color: var(--dark-txt); }
.ba__note { font-size: var(--body); line-height: 1.6; color: var(--dark-txt); }
.ba__grid { margin-top: 48px; }
.ba__col { display: flex; flex-direction: column; gap: 20px; }
.ba__head { display: flex; align-items: center; gap: 12px; }
.ba__tag { font-family: var(--ff-mono); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--dark-txt-2); }
.ba__tag--on { color: var(--green-l); }
.ba__line { flex: 1; height: 1px; background: var(--dark-line); }
.ba__stamp {
  font-family: var(--ff-mono); font-size: 12px; font-weight: 700; color: var(--dark);
  background: var(--green-l); padding: 6px 12px; border-radius: var(--r-pill); white-space: nowrap;
}
.shot { border-radius: 16px; overflow: hidden; background: #fff; }
.shot--before { transform: rotate(-1.4deg); box-shadow: 0 0 0 1px var(--dark-line), 0 20px 44px rgba(0, 0, 0, .4); }
.shot--after { transform: rotate(1deg); box-shadow: 0 0 0 1px #2E6B50, 0 24px 60px rgba(53, 214, 139, .22); }
.shot__chrome { height: 34px; background: #EDF1F3; display: flex; align-items: center; padding: 0 12px; gap: 14px; }
.shot__chrome i { width: 9px; height: 9px; border-radius: 50%; background: #CFD7DD; }
.shot__url { flex: 1; min-width: 0; height: 20px; border-radius: 6px; background: #fff; display: flex; align-items: center; padding: 0 10px; }
.shot__url span { font-family: var(--ff-mono); font-size: 11px; color: var(--mut-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shot__url span.on { color: var(--green); }
.shot__img { background: #fff; }
.shot__img img { width: 100%; }
.ba__cap { font-size: 15px; line-height: 1.6; color: var(--dark-txt-2); }
.ba__cap--on { color: var(--dark-txt); }

/* ---------- niche tabs ---------- */

.tabs { display: flex; gap: 8px; margin-top: 40px; flex-wrap: wrap; }
.tab {
  border: 1px solid var(--line-2); background: #fff; color: var(--ink-2);
  font-family: var(--ff); font-size: 15px; font-weight: 600; padding: 13px 24px;
  border-radius: var(--r-pill); cursor: pointer; white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s;
}
.tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.tabpanel {
  margin-top: 24px; background: var(--bg-soft); border-radius: var(--r-lg); padding: 48px;
  align-items: center;
}
.tabpanel__copy { display: flex; flex-direction: column; gap: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chips span { background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 9px 16px; font-size: 14px; color: var(--ink-2); }
.preview { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line-2); background: #fff; box-shadow: 0 12px 32px rgba(18, 22, 28, .07); }
.preview__body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.preview__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.preview__brand { font-size: 13px; font-weight: 700; letter-spacing: -0.01em; }
.preview__hero { border-radius: var(--r-md); background: var(--ink); padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.preview__hero b { font-size: 15px; font-weight: 700; color: #fff; letter-spacing: -0.015em; }
.preview__hero span { font-size: 12px; color: #8E9BA4; }
.preview__hero i { width: 88px; height: 24px; border-radius: var(--r-pill); background: var(--green-l); margin-top: 4px; }
.preview__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.preview__cards div { border: 1px solid var(--line-3); border-radius: var(--r-md); padding: 12px; font-size: 11px; color: var(--ink-2); line-height: 1.4; }
.preview__phone {
  border: 1px solid var(--mint-line-2); background: var(--mint); border-radius: var(--r-md);
  padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.preview__phone span { font-family: var(--ff-mono); font-size: 12px; font-weight: 700; color: var(--green); }
.preview__phone i { width: 76px; height: 24px; border-radius: var(--r-pill); background: var(--green); }

/* ---------- steps ---------- */

.sticky { position: sticky; top: 128px; display: flex; flex-direction: column; gap: 16px; }
.step { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 24px; padding: 40px 0; border-bottom: 1px solid var(--line); }
.step:first-child { padding-top: 0; }
.step:last-child { padding-bottom: 0; border-bottom: 0; }
.step__n { font-size: 48px; font-weight: 800; letter-spacing: -0.045em; line-height: 1; color: #DDE3E9; transition: color .35s; }
.step__n.on { color: var(--green); }
.step__b { display: flex; flex-direction: column; gap: 12px; }
.step__b h3 { font-size: var(--h4); font-weight: 700; letter-spacing: -0.025em; line-height: 1.25; }

/* ---------- chat ---------- */

.chat { margin-top: var(--sec); background: var(--mint); border-top: 1px solid var(--mint-line); border-bottom: 1px solid var(--mint-line); }
.chat__in { padding: 96px 0; align-items: center; }
.chat__copy { display: flex; flex-direction: column; gap: 16px; }
.chat__copy .btn { margin-top: 16px; align-self: flex-start; }
.chatbox {
  background: #fff; border: 1px solid var(--mint-line); border-radius: var(--r-lg); padding: 24px;
  box-shadow: 0 1px 2px rgba(18, 22, 28, .03), 0 24px 56px rgba(15, 107, 69, .09);
}
.chatbox__hd { display: flex; align-items: center; gap: 12px; padding: 8px 8px 20px; border-bottom: 1px solid #EEF2F0; }
.chatbox__av { width: 40px; height: 40px; border-radius: 50%; background: var(--ink); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; color: var(--green-l); flex: 0 0 auto; }
.chatbox__who { display: flex; flex-direction: column; gap: 2px; }
.chatbox__who b { font-size: 15px; font-weight: 700; }
.chatbox__who span { font-size: 13px; color: var(--green); }
.chatbox__body { display: flex; flex-direction: column; gap: 12px; padding: 20px 8px 8px; }
.msg { font-size: 15px; line-height: 1.5; padding: 14px 16px; }
.msg--them { align-self: flex-start; max-width: 84%; background: var(--ink); color: #fff; border-radius: 16px 16px 16px 4px; }
.msg--me { align-self: flex-end; max-width: 80%; background: #EDF3F0; color: var(--ink); border-radius: 16px 16px 4px 16px; }
.typing { align-self: flex-start; display: flex; align-items: center; gap: 6px; background: var(--ink); border-radius: 16px; padding: 16px 20px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: tp 1.2s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .18s; }
.typing i:nth-child(3) { animation-delay: .36s; }
@keyframes tp { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }

/* ---------- pricing bento ---------- */

.bento { margin-top: 40px; }
.bento__main {
  grid-column: span 6; grid-row: span 2; background: var(--ink); border-radius: var(--r-lg);
  padding: 48px; display: flex; flex-direction: column; justify-content: space-between;
}
.bento__main h3 { color: #fff; margin-top: 24px; }
.bento__main p { color: var(--dark-txt); margin-top: 24px; }
.bento__main .foot { font-size: 15px; color: var(--dark-txt-2); line-height: 1.6; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--dark-line); }
.bento__tile { grid-column: span 3; border-radius: var(--r-lg); padding: 32px; display: flex; flex-direction: column; gap: 12px; }
.bento__tile--mint { background: var(--mint); }
.bento__tile--soft { background: var(--bg-soft); }
.bento__tile h4 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.022em; }
.bento__tile p { font-size: 16px; line-height: 1.55; }
.bento__wide { grid-column: span 6; border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.bento__wide h4 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.022em; }
.bento__wide .sub { font-size: 15px; color: var(--mut); margin-top: 8px; }
.tagrow { display: flex; flex-wrap: wrap; gap: 8px; }
.tagrow span { background: var(--bg-soft-2); border-radius: var(--r-pill); padding: 9px 16px; font-size: 14px; color: var(--ink-2); }

/* ---------- comparison ---------- */

.cmp { margin-top: 48px; font-size: 16px; }
.cmp__head, .cmp__row { display: grid; grid-template-columns: 288px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
.cmp__head > div { padding: 0 24px 16px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--mut-2); border-bottom: 1.5px solid var(--ink); text-transform: uppercase; }
.cmp__head > div:first-child { padding-left: 0; }
.cmp__row > div { padding: 24px; border-bottom: 1px solid var(--line); transition: background .2s; }
.cmp__row > div:first-child { padding-left: 0; font-weight: 600; }
.cmp__row:hover > div { background: #FAFBFC; }
.cmp__row .dim { color: var(--mut); }
.cmp__row--us > div { background: var(--ink); color: #fff; border-bottom: 0; padding: 32px 24px; font-weight: 600; display: flex; align-items: center; }
.cmp__row--us:hover > div { background: var(--ink); }
.cmp__row--us > div:first-child { border-radius: var(--r-lg) 0 0 var(--r-lg); padding-left: 32px; gap: 8px; }
.cmp__row--us > div:last-child { border-radius: 0 var(--r-lg) var(--r-lg) 0; color: var(--green-l); font-weight: 700; }
.cmp__logo { font-family: var(--ff-mono); font-size: 18px; font-weight: 700; letter-spacing: -0.03em; color: #fff; }
.cmp__caret { width: 9px; height: 13px; background: var(--green-l); flex: 0 0 auto; }
.cmp__label { display: none; }

/* ---------- faq ---------- */

.faq { display: flex; flex-direction: column; }
.faq__i { padding: 32px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.faq__i:first-child { padding-top: 0; }
.faq__i:last-child { border-bottom: 0; padding-bottom: 0; }
.faq__i h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.022em; line-height: 1.25; }
.faq__i a { border-bottom: 1px solid #A8D3BF; }

/* ---------- market / founder ---------- */

.panel { background: var(--bg-soft); border-radius: var(--r-lg); padding: 48px; align-items: center; }
.panel h3 { line-height: 1.15; }
.panel .strong { font-size: 19px; line-height: 1.5; color: var(--ink); font-weight: 700; }
.stats2 { display: flex; flex-direction: column; gap: 32px; }
.stat { display: flex; flex-direction: column; gap: 8px; }
.stat b { font-size: clamp(40px, 4vw, 56px); font-weight: 800; letter-spacing: -0.045em; line-height: 1; color: var(--green); }
.stat span { font-size: 15px; color: var(--mut); line-height: 1.5; }

.founder { background: var(--dark); border-radius: var(--r-lg); padding: 64px; align-items: center; }
.founder h2 { color: #fff; }
.founder h2 .thin { color: var(--dark-txt); }
.founder p { color: var(--dark-txt); }
.founder__cta { display: flex; align-items: center; gap: 24px; margin-top: 8px; flex-wrap: wrap; }
.founder__cta a.tel { color: #fff; font-size: 22px; font-weight: 700; letter-spacing: -0.015em; white-space: nowrap; }
.founder__card { display: flex; align-items: center; gap: 24px; background: var(--dark-3); border-radius: var(--r-lg); padding: 32px; }
.founder__ph { width: 88px; height: 88px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; background: #E7EDEA; }
.founder__ph img { width: 100%; height: 100%; object-fit: cover; }
.founder__who { display: flex; flex-direction: column; gap: 8px; }
.founder__who b { font-size: 19px; font-weight: 700; color: #fff; }
.founder__who span { font-size: 15px; color: var(--dark-txt); line-height: 1.5; }
.founder__who a { font-family: var(--ff-mono); font-size: 14px; font-weight: 500; color: var(--green-l); }

/* ---------- footer ---------- */

.ft { margin-top: var(--sec); padding: 48px 0 64px; border-top: 1px solid var(--line); }
.ft__about { display: flex; flex-direction: column; gap: 16px; }
.ft__about p { font-size: 15px; color: var(--mut); line-height: 1.55; max-width: 320px; }
.ft__col { display: flex; flex-direction: column; gap: 12px; }
.ft__col b { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; color: var(--mut-3); text-transform: uppercase; }
.ft__col a { font-size: 15px; color: var(--ink); }
.ft__cr { font-size: 14px; color: var(--mut-3); margin-top: 64px; }

/* ---------- reveal ---------- */

.rv { opacity: 0; transform: translateY(28px); }
.rv.in { opacity: 1; transform: none; transition: opacity .8s cubic-bezier(.16, .8, .24, 1), transform .8s cubic-bezier(.16, .8, .24, 1); }
.rv--tilt-a { transform: rotate(-0.7deg) translateY(28px); }
.rv--tilt-a.in { transform: rotate(-0.7deg); }
.rv--tilt-b { transform: rotate(0.5deg) translateY(28px); }
.rv--tilt-b.in { transform: rotate(0.5deg); }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; }
  .rv--tilt-a { transform: rotate(-0.7deg); }
  .rv--tilt-b { transform: rotate(0.5deg); }
}

/* ---------- mobile sticky CTA ---------- */

.mcta {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .96); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
.mcta a { flex: 1; font-size: 16px; padding: 15px 12px; }
.mcta a.tel { background: #fff; border: 1px solid var(--ink); color: var(--ink); }

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  :root { --sec: 104px; }
  .cmp__head, .cmp__row { grid-template-columns: 220px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
  .bento__main { padding: 40px; }
  .founder { padding: 48px; }
  .note-float { left: -24px; }
}

@media (max-width: 1023px) {
  :root { --sec: 88px; --gut: 20px; }
  .hero__in { padding: 72px 0 88px; }
  .qcard { padding: 36px; }
  .tabpanel, .panel { padding: 32px; }
  .step { grid-template-columns: 72px minmax(0, 1fr); gap: 20px; }
  .step__n { font-size: 38px; }
  .sticky { position: static; }
  .cmp__head { display: none; }
  .cmp__row, .cmp__row--us { grid-template-columns: 1fr; border: 1px solid var(--line-2); border-radius: var(--r-lg); margin-bottom: 12px; overflow: hidden; }
  .cmp__row > div { border-bottom: 0; padding: 0; }
  .cmp__row > div:first-child { padding: 16px 20px; background: var(--bg-soft); font-weight: 700; font-size: 17px; }
  .cmp__row .cmp__cell { padding: 16px 20px; border-top: 1px solid var(--line); }
  .cmp__label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--mut-2); text-transform: uppercase; margin-bottom: 6px; }
  .cmp__row--us { border: 0; }
  .cmp__row--us > div { padding: 0; }
  .cmp__row--us > div:first-child { border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 20px; background: var(--ink); }
  .cmp__row--us > div:last-child { border-radius: 0 0 var(--r-lg) var(--r-lg); }
  .cmp__row--us .cmp__cell { padding: 16px 20px; border-top: 1px solid var(--dark-line); display: block; }
  .band__col { padding-right: 0; }
}

@media (max-width: 899px) {
  .g12 { grid-template-columns: 1fr; }
  .c3, .c4, .c5, .c6, .c7, .s6, .s7-6, .s7-3, .s9, .s10,
  .bento__main, .bento__tile, .bento__wide { grid-column: 1 / -1; grid-row: auto; }
  .ex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ex-grid > * { grid-column: auto; }
  .hero { background-size: 56px 56px; }
  .hero__in { padding: 56px 0 96px; }
  .mockwrap { margin-top: 8px; }
  .mockwrap__ghost { display: none; }
  .note-float { left: auto; right: 4px; bottom: -44px; }
  .mock { transform: none; }
  .skel { min-height: 0; }
  .band__figwrap { min-height: 0; }
  .band__col + .band__col { margin-top: 8px; }
  .qcard--cream, .qcard--mint { transform: none; }
  .rv--tilt-a.in, .rv--tilt-b.in { transform: none; }
  .rv--tilt-a, .rv--tilt-b { transform: translateY(28px); }
  .shot--before, .shot--after { transform: none; }
  .ba__stamp { font-size: 11px; padding: 5px 10px; }
  .bento__main .foot { margin-top: 28px; }
  .founder { padding: 36px; }
  .founder__card { margin-top: 8px; }
  .ft__cr { margin-top: 40px; }
  .hdr__phone span { display: none; }
}

@media (max-width: 767px) {
  :root { --sec: 72px; --body: 16px; }
  .wrap { width: min(1200px, 100% - 32px); }
  .hdr__in { height: 64px; }
  .hdr__right { gap: 16px; }
  .hdr__right .btn--dark { display: none; }
  .hdr__phone a { font-size: 17px; }
  .logo__t { font-size: 19px; }
  .logo__c { width: 10px; height: 14px; }
  .mcta { display: flex; }
  body { padding-bottom: 84px; }
  .sticky { top: auto; }
  .btn { padding: 16px 26px; font-size: 16px; }
  .hero__cta { gap: 16px; }
  .hero__cta .btn { width: 100%; }
  .hero__cta p { max-width: none; }
  .band__in, .chat__in, .ba__in { padding: 64px 0; }
  .qcard { padding: 28px; }
  .tabpanel, .panel, .bento__main { padding: 24px; }
  .bento__tile, .bento__wide { padding: 24px; }
  .chatbox { padding: 16px; }
  .chatbox__body { padding: 16px 0 0; }
  .msg--them, .msg--me { max-width: 92%; }
  .founder { padding: 28px; }
  .founder__cta { gap: 16px; }
  .founder__cta .btn { width: 100%; }
  .founder__card { padding: 24px; gap: 16px; }
  .founder__ph { width: 72px; height: 72px; }
  .skel__cards, .preview__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .skel__cards > :nth-child(3), .preview__cards > :nth-child(3) { display: none; }
  .step { grid-template-columns: 56px minmax(0, 1fr); gap: 16px; padding: 28px 0; }
  .step__n { font-size: 32px; }
  .faq__i { padding: 24px 0; }
  .faq__i h3 { font-size: 19px; }
  .mq__group { gap: 28px; padding: 18px 18px 18px 0; }
  .mq__group span { font-size: 15px; }
  .tabs { gap: 6px; margin-top: 28px; }
  .tab { padding: 11px 18px; font-size: 14px; }
  .ex-grid { grid-template-columns: 1fr; }
  .note-float { display: none; }
  .badge-float { top: -18px; right: 0; font-size: 11px; padding: 8px 12px; }
  .ft__cr { margin-top: 32px; }
  .ba__head { flex-wrap: wrap; }
  .ba__line { display: none; }
}

@media (max-width: 479px) {
  .wrap { width: min(1200px, 100% - 24px); }
  .qcard, .tabpanel, .panel, .bento__main, .bento__tile, .bento__wide, .founder { padding: 20px; }
  .chatbox__hd { padding: 4px 4px 16px; }
  .msg { font-size: 14.5px; padding: 12px 14px; }
  .step { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; }
  .step__n { font-size: 26px; }
  .founder__card { flex-direction: column; align-items: flex-start; }
  .cmp__row > div:first-child, .cmp__row--us > div:first-child { font-size: 16px; }
  .band__fig { letter-spacing: -0.03em; }
}