:root {
  --ink: #12110f;
  --paper: #f4f2ed;
  --paper-strong: #e7e3da;
  --surface: #fffefa;
  --surface-soft: #ece9e2;
  --line: #d5d0c5;
  --line-dark: #34322e;
  --muted: #6d6a63;
  --dark-muted: #99958d;
  --signal: #ff5c3a;
  --signal-soft: #ffe3da;
  --success: #18a66a;
  --radius: 9px;
  --hard-shadow: 8px 8px 0 #dfdbd2;
  --hard-shadow-dark: 8px 8px 0 #282622;
}

body {
  background-color: var(--paper);
  background-image:
    linear-gradient(rgba(18,17,15,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18,17,15,.022) 1px, transparent 1px);
  background-size: 32px 32px;
}

::selection { background: var(--signal); color: #fff; }
.container { width: min(100% - 56px, 1340px); }
.eyebrow { color: var(--signal); letter-spacing: .18em; }
.section-label { display: inline-flex; align-items: center; gap: 8px; color: var(--signal); }
.section-label::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); flex-shrink: 0; }

.button {
  min-height: 50px;
  border-radius: 7px;
  text-transform: uppercase;
  font: 700 11px/1.2 'IBM Plex Mono', monospace;
  letter-spacing: .075em;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}
.button:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.button--dark { background: var(--signal); border-color: var(--signal); color: #fff; }
.button--dark:hover { background: #ef4e2d; border-color: #ef4e2d; }
.button--light { background: var(--surface); }
.button--light:hover { background: var(--ink); color: #fff; }

.site-header {
  border-bottom: 1px solid #2e2c28;
  background: rgba(18,17,15,.97);
  color: #fff;
  box-shadow: 0 10px 30px rgba(18,17,15,.12);
}
.nav { min-height: 70px; }
.site-header .brand {
  position: relative;
  min-width: 180px;
  min-height: 48px;
  padding: 8px 16px 8px 48px;
  border: 1px solid #34322e;
  border-radius: 8px;
  background: #1d1c19;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.site-header .brand img { position: absolute; left: 14px; top: 12px; width: 25px; height: 25px; filter: none; }
.site-header .brand span { align-self: start; font-size: 15px; line-height: 1.1; }
.site-header .brand::after {
  content: 'AI SALES OS';
  position: absolute;
  left: 48px;
  bottom: 7px;
  color: #77746d;
  font: 500 8px/1 'IBM Plex Mono', monospace;
  letter-spacing: .22em;
}
.nav-links { gap: 26px; }
.nav-links a, .login-link { position: relative; color: #a9a69f; font-size: 12px; }
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -10px;
  height: 2px;
  background: var(--signal);
  transition: right .2s ease;
}
.nav-links a:hover, .login-link:hover { color: #fff; }
.nav-links a:hover::after { right: 0; }
.nav-actions .button { min-height: 40px; padding: 0 16px; box-shadow: none; }
.nav-actions .button:hover { transform: translateY(-2px); box-shadow: 0 7px 18px rgba(255,92,58,.18); }
.nav-toggle { border-color: #4b4842; background: #1d1c19; }
.nav-toggle span, .nav-toggle::before, .nav-toggle::after { background: #fff; }

.hero { position: relative; padding: 58px 0 36px; }
.hero::before {
  content: 'CHATFLOW / SALES INTELLIGENCE SYSTEM';
  position: absolute;
  top: 18px;
  left: max(28px, calc((100vw - 1340px) / 2));
  color: #918d85;
  font: 500 9px/1 'IBM Plex Mono', monospace;
  letter-spacing: .17em;
}
.hero::after {
  content: '';
  position: absolute;
  top: 0;
  right: max(28px, calc((100vw - 1340px) / 2));
  width: 1px;
  height: 100%;
  background: var(--line);
  z-index: -1;
}
.hero-grid { grid-template-columns: minmax(370px, .78fr) minmax(0, 1.22fr); gap: clamp(36px, 4vw, 68px); align-items: start; }
.hero-copy { max-width: 610px; padding-top: 8px; }
.hero-flags {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 20px 0 26px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.hero-flags span {
  position: relative;
  min-height: 68px;
  display: flex;
  align-items: flex-end;
  padding: 28px 14px 11px;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  color: var(--muted);
  font-size: 8.5px;
  line-height: 1.3;
  white-space: normal;
}
.hero-flags span:last-child { border-right: 0; }
.hero-flags span::before {
  position: absolute;
  top: 10px;
  left: 14px;
  color: var(--signal);
  font: 500 9px/1 'IBM Plex Mono', monospace;
}
.hero-flags span:nth-child(1)::before { content: '01 / SPEED'; }
.hero-flags span:nth-child(2)::before { content: '02 / NO-CODE'; }
.hero-flags span:nth-child(3)::before { content: '03 / PRICE'; }
.hero h1 { margin-bottom: 18px; font-size: clamp(36px, 4.2vw, 60px); line-height: 1.08; letter-spacing: -.04em; }
.hero h1 span { color: var(--signal); }
.hero-copy > p { max-width: 560px; margin-bottom: 22px; color: #5d5a54; font-size: 15px; }
.hero-buttons { gap: 12px; }
.dashboard-wrap { position: relative; padding: 0 12px 12px 0; margin-top: 56px; }
.dashboard-wrap::before,
.dashboard-wrap::after {
  content: '';
  position: absolute;
  z-index: 3;
  width: 18px;
  height: 18px;
  pointer-events: none;
}
.dashboard-wrap::before { left: -7px; top: 27px; border-left: 3px solid var(--signal); border-top: 3px solid var(--signal); }
.dashboard-wrap::after { right: 5px; bottom: 5px; border-right: 8px solid var(--ink); border-bottom: 8px solid var(--ink); }
.dashboard-meta {
  min-height: 36px;
  margin: 0;
  padding: 0 15px;
  border: 1px solid var(--ink);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: var(--ink);
  color: #88847d;
}
.dashboard-meta span:first-child::before { content: '01 / '; color: var(--signal); }
.dashboard-meta span:last-child { color: #d5d2cb; }
.dashboard-meta span:last-child::before { background: var(--success); box-shadow: 0 0 0 4px rgba(24,166,106,.12); }
.dashboard {
  border-radius: 0 0 8px 8px;
  border-color: var(--ink);
  box-shadow: 12px 12px 0 #dcd8cf;
  filter: saturate(.92) contrast(1.02);
}
.dashboard-wrap:hover .dashboard { transform: translate(-3px, -3px); box-shadow: 16px 16px 0 #d4cfc5; }

.integrations { position: relative; padding: 28px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); color: var(--ink); }
.integrations::before { display: none; }
.integrations-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.integrations-top .eyebrow::before { content: none; }
.integrations h2 { margin: 0; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.15; letter-spacing: -.03em; font-weight: 800; color: var(--ink) !important; }

.section { padding: clamp(40px, 5vw, 64px) 0; }
.section-heading { position: relative; padding-top: 16px; margin-bottom: clamp(20px, 3vw, 36px); border-top: 1px solid var(--line); }
.section-heading::before { content: ''; position: absolute; top: -1px; left: 0; width: 72px; height: 3px; background: var(--signal); }
.section-heading h2 { font-size: clamp(34px, 3.8vw, 54px); }

.problems {
  position: relative;
  background-color: var(--ink);
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 40px 40px;
}
.problems::after { content: 'SYSTEM ALERT / 01'; position: absolute; right: 28px; top: 28px; color: #56534d; font: 500 9px/1 'IBM Plex Mono', monospace; letter-spacing: .15em; }
.problems .section-heading { border-top-color: #3a3834; }
.problems .section-label { color: var(--signal); }
.problem-grid { border: 1px solid #393733; }
.problem {
  grid-template-columns: 74px minmax(0, 1fr) minmax(0, 1.05fr);
  padding: 20px 18px;
  border-bottom-color: #393733;
}
.problem:last-child { border-bottom: 0; }
.problem:hover { padding-left: 24px; padding-right: 14px; background: #1d1c19; }
.problem-index { color: var(--signal); letter-spacing: .12em; }
.problem-index::before { content: 'ALERT / '; color: #69665f; }

.steps { padding-bottom: clamp(40px, 5vw, 64px); }
.steps-list { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--hard-shadow); }
.step {
  min-height: 190px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 16px;
  border: 0;
  border-right: 1px solid var(--line);
}
.step:last-child { border-right: 0; }
.step-number { color: #d0cbc1; font-size: clamp(36px, 3.5vw, 54px); }
.step h4 { font-size: clamp(15px, 1.35vw, 19px); }
.step-marker { width: 100%; height: 3px; border: 0; border-radius: 0; background: #d9d5cc; }
.step:last-child .step-marker { background: var(--signal); }
.steps-note { margin: 16px 0 0; font: 500 10px/1.5 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }

.features-layout { border: 0; gap: 12px; }
.feature {
  position: relative;
  min-height: 180px;
  padding: 20px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 4px 4px 0 #e0dcd3;
  overflow: hidden;
}
.feature::after { content: ''; position: absolute; right: -1px; bottom: -1px; width: 16px; height: 16px; border-right: 8px solid var(--ink); border-bottom: 8px solid var(--ink); }
.feature:hover { background: var(--ink); color: #fff; transform: translate(-2px, -2px); box-shadow: 7px 7px 0 #d3cec4; }
.feature-no { color: var(--signal); letter-spacing: .14em; }
.feature-no::after { content: ' / MODULE'; color: #a09c94; }
.feature h3 { margin: 20px 0 6px; }

.comparison { background: var(--surface-soft); }
.comparison .section-heading { border: 0; padding-top: 0; margin-bottom: 24px; }
.comparison .section-heading::before { display: none; }
.comparison-grid { gap: 14px; border: 0; }
.comparison-column { min-height: 290px; padding: 22px !important; border: 1px solid var(--line) !important; background: var(--surface); }
.comparison-column:first-child { color: var(--muted); }
.comparison-column:last-child { background: var(--ink); color: #fff; box-shadow: 8px 8px 0 var(--signal); }
.comparison-column:last-child h3, .comparison-column:last-child li { color: #fff; }
.comparison-column:last-child li { border-top-color: #3c3935; }
.comparison-column:last-child li::before { color: var(--signal); }
.comparison h3 { margin: 0 0 18px; }
.comparison h3::before { display: block; margin-bottom: 12px; color: var(--signal); font: 500 9px/1 'IBM Plex Mono', monospace; letter-spacing: .15em; }
.comparison-column:first-child h3::before { content: '01 / LEGACY'; }
.comparison-column:last-child h3::before { content: '02 / CHATFLOW'; }
.comparison li { padding: 11px 0; }

.learning { padding: 0 0 clamp(40px, 5vw, 64px); }
.learning-inner {
  position: relative;
  padding: clamp(22px, 3.5vw, 40px);
  border: 1px solid var(--ink);
  background: var(--surface);
  box-shadow: 8px 8px 0 var(--ink);
}
.learning-inner::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 7px; background: var(--signal); }
.learning .eyebrow { color: var(--signal); }

.pricing {
  background-color: var(--ink);
  background-image: radial-gradient(circle at 16% 8%, rgba(255,92,58,.14), transparent 27%);
}
.pricing .section-heading { border-top-color: #3b3935; }
.pricing .section-heading::before { background: var(--signal); }
.pricing .section-heading h2 { font-size: clamp(26px, 2.8vw, 40px); }
.pricing .section-label { color: var(--signal); }
.price-layout { border: 1px solid #46433e; }
.price-side { padding: clamp(22px, 3.5vw, 42px) clamp(20px, 3.5vw, 44px) clamp(22px, 3.5vw, 42px) clamp(20px, 3.5vw, 44px); }
.price-side h2 { margin: 12px 0 18px; max-width: 460px; font-size: clamp(22px, 2.3vw, 32px); line-height: 1.15; letter-spacing: -.03em; }
.price-value { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; }
.price-value strong { font-size: clamp(34px, 4vw, 52px); line-height: .95; letter-spacing: -.06em; color: var(--signal); }
.price-side .eyebrow { color: var(--signal); }
.price-includes { padding: clamp(22px, 3.5vw, 42px) 0 clamp(22px, 3.5vw, 42px) clamp(20px, 3.5vw, 44px); }
.price-includes > h3 { margin: 0 0 18px; font-size: clamp(16px, 1.4vw, 20px); letter-spacing: -.025em; }
.pricing .button--dark { background: var(--signal); border-color: var(--signal); color: #fff; box-shadow: 4px 4px 0 #fff; }
.pricing .button--dark:hover { background: #ef4e2d; border-color: #ef4e2d; box-shadow: 7px 7px 0 #fff; }
.included { min-height: 96px; padding: 12px 14px; transition: background .18s ease; }
.included:hover { background: #1d1c19; }
.included h4::before { content: '+ '; color: var(--signal); }

.faq .section-heading { padding-top: 16px; margin-bottom: 22px; }
.faq details { background: rgba(255,254,250,.55); }
.faq summary { padding: 16px 14px; }
.faq summary:hover { color: var(--signal); }
.faq summary span { border-radius: 4px; }
.faq details p { margin: -2px 0 14px; padding-left: 14px; }

.final-inner {
  position: relative;
  min-height: 280px;
  padding: clamp(24px, 4vw, 48px);
  border: 1px solid var(--ink);
  border-bottom: 8px solid var(--signal);
  background-color: var(--ink);
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 38px 38px;
  box-shadow: 8px 8px 0 #d7d2c8;
}
.final-inner::after { content: 'SYSTEM READY'; position: absolute; right: 34px; top: 30px; color: var(--success); font: 500 9px/1 'IBM Plex Mono', monospace; letter-spacing: .14em; }
.final-inner .eyebrow { color: var(--signal); }
.final-inner h2 { max-width: 820px; margin: 14px 0 14px; font-size: clamp(26px, 3.2vw, 44px); line-height: 1.1; letter-spacing: -.04em; }
.final-inner p { max-width: 650px; margin-bottom: 18px; }
.final-inner .button { background: var(--signal); border-color: var(--signal); color: #fff; box-shadow: 4px 4px 0 #fff; }

footer { background: var(--surface); padding: 36px 0 18px; }
.footer-top { padding-bottom: 26px; gap: 32px; }
footer .brand { position: relative; padding-bottom: 15px; }
footer .brand::after { content: 'AI SALES OS'; position: absolute; left: 34px; bottom: 0; color: #8b877f; font: 500 8px/1 'IBM Plex Mono', monospace; letter-spacing: .16em; }
footer .brand img { filter: invert(1); }

.telegram-widget {
  right: 22px;
  bottom: 22px;
  width: auto;
  height: 54px;
  display: flex;
  gap: 11px;
  padding: 5px 13px 5px 5px;
  border: 1px solid #32302c;
  border-radius: 8px;
  background: var(--ink);
  box-shadow: 7px 7px 0 rgba(18,17,15,.16);
  color: #fff;
  font: 600 9px/1 'IBM Plex Mono', monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.telegram-widget__icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 6px; background: var(--signal); }
.telegram-widget svg { width: 18px; height: 18px; }
.telegram-widget i { width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(24,166,106,.12); }
.telegram-widget:hover { transform: translate(-2px, -2px); background: #1b1a18; }

@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { max-width: 780px; }
  .dashboard-wrap { max-width: 980px; margin-top: 0; }
  .steps-list { grid-template-columns: repeat(3, 1fr); }
  .step { min-height: 200px; border-bottom: 1px solid var(--line); }
  .step:nth-child(3) { border-right: 0; }
}

@media (max-width: 900px) {
  .site-header .brand { min-width: 168px; }
  .hero { padding-top: 40px; }
  .integration-grid { background: transparent; }
  .bento-card--featured {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 22px 20px;
  }
  .bento-card-left { display: contents; }
  .bento-card-header { order: 1; display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 2px; }
  .bento-logos--featured { order: 2; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; margin: 4px 0 10px; width: 100%; }
  .bento-card-body { order: 3; }
  .bento-features { order: 4; display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 12px; }
  .bento-card--featured .logo-box { width: 52px; height: 52px; }
  .bento-card--featured .logo-box img { width: 32px; height: 32px; }
  .problem { grid-template-columns: 62px minmax(0, 1fr); }
  .problem p { grid-column: 2; }
  .price-layout { grid-template-columns: 1fr; }
  .price-side { padding: 28px 24px; border-bottom: 1px solid #4a4a46; }
  .price-includes { padding: 28px 24px; border-left: 0; }
}

@media (max-width: 620px) {
  .container { width: min(100% - 32px, 1340px); }
  .site-header .brand { min-width: 0; min-height: 46px; padding: 8px 10px 8px 43px; border: 0; background: transparent; }
  .site-header .brand img { left: 8px; top: 10px; width: 25px; height: 25px; }
  .site-header .brand::after { left: 43px; bottom: 7px; }
  .hero::before { left: 16px; }
  .hero::after { right: 16px; }
  .hero-copy { display: flex; flex-direction: column; }
  .hero-copy .section-label { order: 1; }
  .hero-copy h1 { order: 2; margin-top: 30px; }
  .hero-copy > p { order: 3; }
  .hero-copy .hero-flags { order: 4; margin-top: 2px; }
  .hero-copy .hero-buttons { order: 5; }
  .hero-flags { grid-template-columns: 1fr; }
  .hero-flags span { min-height: 54px; border-right: 0; border-bottom: 1px solid var(--line); }
  .hero-flags span:last-child { border-bottom: 0; }
  .dashboard-wrap { padding-right: 7px; }
  .dashboard-meta { font-size: 8px; }
  .dashboard { box-shadow: 7px 7px 0 #dcd8cf; }
  .steps-list { grid-template-columns: 1fr; box-shadow: 6px 6px 0 #dfdbd2; }
  .step { min-height: 160px; border-right: 0; }
  .comparison-column { min-height: 0; padding: 24px !important; }
  .learning-inner { box-shadow: 7px 7px 0 var(--ink); }
  .pricing { padding: 40px 0; }
  .pricing .section-heading h2 { font-size: clamp(24px, 7vw, 34px); }
  .price-side { padding: 22px 18px; border-bottom: 1px solid #4a4a46; }
  .price-side h2 { font-size: clamp(20px, 5.5vw, 26px); margin: 10px 0 16px; }
  .price-value strong { font-size: clamp(32px, 8.5vw, 44px); }
  .pricing .button--dark { box-shadow: 3px 3px 0 #fff; }
  .price-includes { padding: 22px 18px; border-left: 0; }
  .price-includes > h3 { font-size: 16px; margin-bottom: 14px; }
  .included-grid { grid-template-columns: 1fr; border: 1px solid #46433e; }
  .included { min-height: auto; padding: 12px 14px; border: 0; border-bottom: 1px solid #46433e; }
  .included:last-child { border-bottom: 0; }
  .final-inner { box-shadow: 7px 7px 0 #d7d2c8; padding: 28px 20px; }
  .final-inner h2 { font-size: clamp(24px, 6.5vw, 36px); }
  .telegram-widget { right: 18px; bottom: 18px; width: 44px; height: 44px; padding: 3px; }
  .telegram-widget > span:not(.telegram-widget__icon), .telegram-widget > i { display: none; }
  .telegram-widget__icon { width: 36px; height: 36px; }
  .hero-actions .btn-primary { padding-right: 68px; }
}