/* Gain Impact landing page styles */

:root {
  --background: #edf2f4;
  --foreground: #1d2126;
  --card: #ffffff;
  --card-foreground: #1d2126;
  --popover: #ffffff;
  --popover-foreground: #1d2126;
  --primary: #1c2127;
  --primary-foreground: #ffffff;
  --secondary: #edf2f4;
  --secondary-foreground: #1d2126;
  --muted: #edf2f4;
  --muted-foreground: #58616b;
  --accent: #edf2f4;
  --accent-foreground: #1d2126;
  --destructive: #c43b37;
  --border: #d1d9de;
  --input: #d9e0e5;
  --ring: #2aa7d8;
  --orange: #f2b33f;
  --orange-soft: #fff4dd;
  --blue: #1b9ed7;
  --blue-soft: #e9f8ff;
  --green: #16835b;
  --ink: #1d2126;
  --ink-soft: #2f3941;
  --surface: #ffffff;
  --surface-soft: #f4f7f8;
  --radius: 0.9rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 3px solid rgba(82, 103, 245, 0.35); outline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3, .brand { letter-spacing: -0.04em; }
.container { width: min(1160px, calc(100% - 48px)); margin: 0 auto; }
.section-shell { padding: 112px 0; }

.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 50;
  border-bottom: 1px solid transparent;
  background: transparent;
  backdrop-filter: none;
  transition: background 220ms ease, backdrop-filter 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.site-header.is-pinned {
  position: fixed;
  border-bottom-color: rgba(223, 222, 217, 0.8);
  background: rgba(251, 250, 247, 0.88);
  backdrop-filter: blur(18px);
  box-shadow: 0 12px 30px rgba(20, 24, 28, 0.05);
}
.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 76px;
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  color: var(--ink);
}
.brand-logo {
  display: block;
  width: clamp(96px, 7vw, 138px);
  height: auto;
  filter: drop-shadow(0 6px 18px rgba(24, 35, 44, 0.06));
}
.brand-logo-footer {
  width: clamp(90px, 6vw, 128px);
}
.brand-mark {
  display: none;
}
.desktop-nav {
  display: flex;
  align-items: center;
  gap: 25px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.desktop-nav a {
  position: relative;
  padding: 0;
  border-radius: 0;
  color: #5c6270;
  font-size: 13px;
  font-weight: 650;
}
.desktop-nav a::after {
  position: absolute;
  right: 0;
  bottom: -8px;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 160ms ease;
}
.desktop-nav a:hover { color: var(--ink); }
.desktop-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-dropdown { position: relative; }
.nav-dropdown::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 16px;
}
.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: #5c6270;
  font-family: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}
.nav-dropdown-trigger svg { width: 12px; height: 12px; transition: transform 160ms ease; }
.nav-dropdown:hover .nav-dropdown-trigger,
.nav-dropdown:focus-within .nav-dropdown-trigger { color: var(--ink); }
.nav-dropdown:hover .nav-dropdown-trigger svg,
.nav-dropdown:focus-within .nav-dropdown-trigger svg { transform: rotate(180deg); }
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  z-index: 60;
  display: flex;
  flex-direction: column;
  width: max-content;
  min-width: 200px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 20px 45px rgba(20, 24, 28, 0.12);
  opacity: 0;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity 160ms ease, transform 160ms ease;
  pointer-events: none;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.nav-dropdown-menu a {
  padding: 10px 12px;
  border-radius: 9px;
  color: #4c525d;
  font-size: 13px;
  font-weight: 620;
}
.nav-dropdown-menu a::after { content: none; }
.nav-dropdown-menu a:hover { background: var(--surface-soft); color: var(--ink); }
.header-actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 12px;
}
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border: 1px solid rgba(29, 33, 38, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
}
.lang-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 26px;
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lang-link.active {
  background: var(--ink);
  color: #fff;
}
.header-cta, .primary-cta, .secondary-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 12px;
  font-weight: 750;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.header-cta {
  justify-self: end;
  height: 42px;
  padding: 0 18px;
  border: 1px solid var(--ink);
  border-radius: 9px;
  background: var(--ink);
  color: #fff;
}
.header-cta:hover, .primary-cta:hover, .secondary-cta:hover { transform: translateY(-2px); }

.mobile-nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}
.mobile-nav-toggle-bar {
  display: block;
  width: 17px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 200ms ease, opacity 150ms ease;
}
.site-header.is-nav-open .mobile-nav-toggle-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-header.is-nav-open .mobile-nav-toggle-bar:nth-child(2) { opacity: 0; }
.site-header.is-nav-open .mobile-nav-toggle-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(20, 24, 28, 0.32);
}
.mobile-nav {
  position: fixed;
  top: 76px;
  right: 0;
  left: 0;
  z-index: 56;
  max-height: calc(100vh - 76px);
  overflow-y: auto;
  padding: 18px 20px calc(24px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: #fff;
  box-shadow: 0 20px 45px rgba(20, 24, 28, 0.14);
}
body.mobile-nav-locked .mobile-cta-bar { display: none; }
.mobile-nav nav { display: flex; flex-direction: column; }
.mobile-nav nav > a {
  padding: 14px 4px;
  border-bottom: 1px solid var(--border);
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
}
.mobile-nav-group {
  display: flex;
  flex-direction: column;
  padding: 10px 4px 4px;
  border-bottom: 1px solid var(--border);
}
.mobile-nav-group-label {
  margin-bottom: 6px;
  color: #9298a2;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mobile-nav-group a {
  padding: 10px 0;
  color: #4c525d;
  font-size: 14px;
  font-weight: 620;
}
.mobile-nav-cta { width: 100%; height: 50px; margin-top: 18px; }
body.mobile-nav-locked { overflow: hidden; }

.hero {
  position: relative;
  overflow: hidden;
  padding-top: 168px;
  padding-bottom: 94px;
}
.hero-glow {
  position: absolute;
  z-index: -1;
  border-radius: 999px;
  filter: blur(3px);
  pointer-events: none;
}
.hero-glow-one {
  top: 90px;
  right: -180px;
  width: 570px;
  height: 570px;
  background: radial-gradient(circle, rgba(82, 103, 245, 0.12), rgba(82, 103, 245, 0) 68%);
}
.hero-glow-two {
  bottom: -250px;
  left: 5%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(255, 109, 58, 0.1), rgba(255, 109, 58, 0) 67%);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(460px, 0.97fr);
  align-items: center;
  gap: clamp(54px, 7vw, 92px);
}
.eyebrow, .final-cta-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #5e6572;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.status-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 5px rgba(22, 131, 91, 0.1);
}
.hero h1 {
  max-width: 720px;
  margin-top: 24px;
  color: var(--ink);
  font-size: clamp(46px, 5vw, 72px);
  font-weight: 800;
  line-height: 1.01;
}
.hero h1 span {
  position: relative;
  color: var(--blue);
  white-space: nowrap;
}
.hero h1 span::after {
  position: absolute;
  right: 0;
  bottom: -2px;
  left: 0;
  height: 5px;
  border-radius: 999px;
  background: var(--orange);
  content: "";
  transform: rotate(-1.4deg);
  opacity: 0.75;
}
.hero-lead {
  max-width: 620px;
  margin-top: 26px;
  color: #5c6370;
  font-size: 18px;
  line-height: 1.68;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 34px;
}
.primary-cta {
  height: 54px;
  padding: 0 22px;
  border: 1px solid #12141a;
  border-radius: 12px;
  background: var(--ink);
  box-shadow: 0 9px 20px rgba(23, 25, 30, 0.15);
  color: #fff;
  font-size: 14px;
}
.primary-cta svg, .secondary-cta svg, .cta-note svg, .case-outcome svg, .result-label svg, .scope-trust svg, .final-proof svg, .brand-mark svg {
  width: 17px;
  height: 17px;
}
.secondary-cta {
  height: 54px;
  padding: 0 18px;
  border-radius: 12px;
  background: transparent;
  color: #3f4652;
  font-size: 14px;
}
.secondary-cta:hover { background: #efeee9; }
.cta-note {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  color: #747b87;
  font-size: 12px;
}
.hero-ai-nudge { margin-top: 18px; color: #747b87; font-size: 13px; }
.hero-ai-nudge a { color: var(--blue); font-weight: 700; }
.cta-note svg {
  width: 14px;
  height: 14px;
  color: var(--green);
}
.hero-proof {
  display: grid;
  grid-template-columns: 220px 1fr 1fr;
  max-width: 610px;
  margin-top: 43px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}
.hero-proof > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  padding: 0 20px;
  border-left: 1px solid var(--border);
}
.hero-proof > div:first-child { padding-left: 0; border-left: 0; }
.hero-proof strong { color: var(--ink); font-size: 19px; }
.hero-proof span {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #737a86;
  font-size: 11px;
}
.hero-proof svg {
  width: 12px;
  height: 12px;
  color: var(--orange);
}
.hero-proof .clutch-badge {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 45px;
}
.delivery-card {
  position: relative;
  overflow: hidden;
  border: 1px solid #343943;
  border-radius: 16px;
  background: #171a20;
  box-shadow: 0 24px 58px rgba(30, 36, 56, 0.16);
  color: #fff;
}
.delivery-card::before { position: absolute; top:-120px; right:-100px; width:300px; height:300px; border-radius:50%; background:radial-gradient(circle, rgba(82, 103, 245, 0.26), rgba(82, 103, 245, 0) 66%); content:""; pointer-events:none; }
.delivery-card-header { position: relative; display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:30px 30px 25px; }
.mini-label { color:#8e96a5; font-size:10px; font-weight:750; letter-spacing:0.12em; text-transform:uppercase; }
.delivery-card h2 { margin-top:7px; font-size:21px; font-weight:750; }
.live-badge { display:inline-flex; align-items:center; gap:7px; margin-top:2px; padding:8px 10px; border:1px solid rgba(255,255,255,0.1); border-radius:6px; background:rgba(255,255,255,0.055); color:#d8dbe2; font-size:10px; font-weight:700; }
.live-badge > span { width:6px; height:6px; border-radius:50%; background:#69d6a4; box-shadow:0 0 0 4px rgba(105,214,164,0.1); }
.progress-track { height:5px; margin:0 30px 24px; overflow:hidden; border-radius:999px; background:#2c3038; }
.progress-track span { display:block; width:62%; height:100%; border-radius:inherit; background:linear-gradient(90deg, var(--orange), #ffae6f 48%, var(--blue)); }
.build-steps { padding:0 18px 18px; }
.build-step { display:grid; grid-template-columns:32px 1fr auto; align-items:center; gap:13px; min-height:68px; padding:10px 12px; border-top:1px solid rgba(255,255,255,0.075); transition:border-color 240ms ease, background 240ms ease, border-radius 240ms ease; }
.build-step:first-child { border-top:0; }
.step-icon { position:relative; display:grid; width:28px; height:28px; place-items:center; overflow:hidden; border:1px solid #404550; border-radius:8px; background:#242830; transition:border-color 240ms ease, background 240ms ease, color 240ms ease; }
.step-icon svg { width:14px; height:14px; }
.build-step.complete .step-icon { border-color: rgba(105,214,164,0.35); background: rgba(105,214,164,0.11); color:#69d6a4; }
.build-step.active { border:1px solid rgba(255,109,58,0.28); border-radius:12px; background:rgba(255,109,58,0.06); }
.build-step.active + .build-step { border-top:0; }
.build-step.active .step-icon { border-color: rgba(255,109,58,0.4); background: rgba(255,109,58,0.12); }
.step-check { position:absolute; top:50%; left:50%; opacity:0; transform:translate(-50%,-50%); transition:opacity 220ms ease; }
.build-step.complete .step-check { opacity:1; }
.step-dot { position:absolute; top:50%; left:50%; display:none; width:8px; height:8px; border-radius:50%; background:var(--orange); transform:translate(-50%,-50%); }
.build-step.active .step-dot { display:block; animation:step-pulse 0.85s ease-in-out infinite; }
.build-step strong, .build-step small { display:block; }
.build-step strong { color:#f8f9fb; font-size:12px; }
.build-step small { margin-top:3px; color:#858d9b; font-size:10px; }
.step-state { color:#737b88; font-size:9px; font-weight:750; letter-spacing:0.05em; text-transform:uppercase; transition:color 240ms ease; }
.complete .step-state { color:#69d6a4; }
.active .step-state { color:#ffa480; }

@keyframes step-pulse {
  0%, 100% { transform:translate(-50%,-50%) scale(1); opacity:1; }
  50% { transform:translate(-50%,-50%) scale(1.35); opacity:.55; }
}

.build-steps-stage { position:relative; }
.build-steps { transition:opacity 260ms ease; }
.build-steps-stage.is-launching .build-steps { opacity:0; pointer-events:none; }

.launch-scene {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding:18px;
  opacity:0;
  visibility:hidden;
  transition:opacity 300ms ease, visibility 300ms;
}
.build-steps-stage.is-launching .launch-scene { opacity:1; visibility:visible; }

.launch-visual { position:relative; display:grid; place-items:end center; width:100%; height:110px; }
.launch-rocket { position:relative; z-index:2; width:38px; height:38px; color:var(--orange); }
.launch-rocket svg { width:100%; height:100%; }
.launch-flame { position:absolute; bottom:-8px; left:50%; width:10px; height:0; border-radius:0 0 8px 8px; background:linear-gradient(#ffdca6, var(--orange) 55%, transparent); transform:translateX(-50%); opacity:0; }
.launch-pad { position:relative; width:74px; height:30px; margin-top:8px; }
.launch-pad-base { position:absolute; bottom:0; left:50%; width:74px; height:4px; border-radius:2px; background:#404550; transform:translateX(-50%); }
.launch-pad-arm { position:absolute; bottom:4px; width:3px; height:24px; border-radius:2px; background:#404550; transform-origin:bottom; }
.launch-pad-arm.left { left:16px; transform:rotate(9deg); }
.launch-pad-arm.right { right:16px; transform:rotate(-9deg); }
.launch-light { position:absolute; bottom:7px; width:4px; height:4px; border-radius:50%; background:#5b6270; }
.launch-light:nth-of-type(4) { left:26px; }
.launch-light:nth-of-type(5) { left:37px; }
.launch-light:nth-of-type(6) { left:48px; }
.launch-caption { color:#c7ccd4; font-size:12px; font-weight:650; letter-spacing:0.01em; text-align:center; }

.build-steps-stage.is-launching .launch-rocket { animation:launch-shake 0.28s ease-in-out infinite; }
.build-steps-stage.is-launching .launch-light { animation:launch-blink 0.7s ease-in-out infinite; }
.build-steps-stage.is-launching .launch-light:nth-of-type(5) { animation-delay:0.15s; }
.build-steps-stage.is-launching .launch-light:nth-of-type(6) { animation-delay:0.3s; }

.build-steps-stage.is-lifting .launch-rocket { animation:launch-liftoff 1.4s cubic-bezier(.5,0,.4,1) forwards; }
.build-steps-stage.is-lifting .launch-flame { animation:launch-flame 1.4s ease-in forwards; }
.build-steps-stage.is-lifting .launch-light { animation:none; opacity:0.3; }

@keyframes launch-shake {
  0%, 100% { transform:translateY(0) rotate(0deg); }
  50% { transform:translateY(-1px) rotate(-1.5deg); }
}
@keyframes launch-blink {
  0%, 100% { background:#5b6270; }
  50% { background:var(--orange); }
}
@keyframes launch-liftoff {
  0% { transform:translateY(0); opacity:1; }
  15% { transform:translateY(-4px); }
  100% { transform:translateY(-130px); opacity:0; }
}
@keyframes launch-flame {
  0% { height:0; opacity:0; }
  20% { height:24px; opacity:1; }
  70% { height:16px; opacity:.8; }
  100% { height:0; opacity:0; }
}

.delivery-footer { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.025); }
.delivery-footer div { display:flex; flex-direction:column; gap:4px; padding:17px 20px; border-left:1px solid rgba(255,255,255,0.07); }
.delivery-footer div:first-child { border-left:0; }
.delivery-footer span { color:#7e8694; font-size:9px; text-transform:uppercase; }
.delivery-footer strong { font-size:11px; }
.client-strip { border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:#fff; }
.client-strip-inner { display:flex; align-items:center; justify-content:space-between; min-height:108px; gap:44px; }
.client-strip p { flex:0 0 auto; color:#8a909b; font-size:10px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; }
.client-names { display:flex; align-items:center; justify-content:space-between; width:100%; gap:32px; }
.client-logo {
  height: 26px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.55;
  transition: opacity 200ms ease, filter 200ms ease;
}
.client-logo:hover { filter: grayscale(0); opacity: 1; }
.section-intro h2, .scope-copy h2, .testimonial-heading h2, .faq-heading h2, .final-cta-inner h2 { color:var(--ink); font-size:clamp(36px,4vw,54px); font-weight:790; line-height:1.08; }
.section-kicker { display:inline-block; margin-bottom:18px; color:var(--blue); font-size:11px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; }
.split-intro { display:grid; grid-template-columns:1.2fr 0.8fr; align-items:end; gap:88px; }
.split-intro > p, .scope-copy > p, .testimonial-heading > p, .faq-heading > p { color:#646b77; font-size:16px; line-height:1.75; }
.assurance-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:64px; border-top:1px solid var(--ink); border-bottom:1px solid var(--border); }
.assurance-card { position:relative; min-height:300px; padding:30px 30px 28px; overflow:hidden; border:0; border-left:1px solid var(--border); border-radius:0; background:transparent; }
.assurance-card:first-child { border-left:0; }
.assurance-card.featured { border-color: #d8dcef; background: var(--blue-soft); }
.assurance-card > svg { width:34px; height:34px; margin-top:24px; color:var(--orange); }
.assurance-card.featured > svg { color:var(--blue); }
.assurance-number { color:#9ca1aa; font-size:11px; font-weight:800; letter-spacing:0.08em; }
.assurance-card h3 { margin-top:28px; color:var(--ink); font-size:20px; font-weight:760; }
.assurance-card p { margin-top:12px; color:#666d79; font-size:14px; line-height:1.7; }
.assurance-result { position:absolute; right:30px; bottom:26px; left:30px; display:flex; align-items:center; gap:8px; color:#4d5662; font-size:11px; font-weight:720; }
.assurance-result svg { width:15px; height:15px; color:var(--green); }
.comparison-panel { margin-top:16px; overflow:hidden; border:1px solid #343943; border-radius:14px; background:var(--ink); color:#fff; }
.comparison-head, .comparison-row { display:grid; grid-template-columns:1fr 50px 1fr; align-items:center; }
.comparison-head { padding:18px 28px; border-bottom:1px solid rgba(255,255,255,0.1); color:#929aa7; font-size:10px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; }
.comparison-head span:last-child { grid-column:3; color:#ffad8f; }
.comparison-row { min-height:72px; padding:0 28px; border-bottom:1px solid rgba(255,255,255,0.075); font-size:13px; }
.comparison-row:last-child { border-bottom:0; }
.comparison-row > span { color:#9da4af; }
.comparison-row > svg { width:18px; color:var(--orange); }
.comparison-row strong { color:#f5f6f8; font-weight:700; }
.process-block { margin-top:112px; }
.compact-intro h2 { font-size:clamp(32px,3vw,44px); }
.process-grid { position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin:50px 0 0; list-style:none; padding:0; }
.process-grid::before { position:absolute; top:20px; right:8%; left:8%; height:1px; background:var(--border); content:""; }
.process-grid li { position:relative; padding-right:30px; }
.process-grid li > span { position:relative; z-index:1; display:grid; width:42px; height:42px; place-items:center; border:1px solid var(--border); border-radius:50%; background:var(--background); color:var(--blue); font-size:11px; font-weight:800; }
.process-grid div { margin-top:22px; }
.process-grid strong { color:var(--ink); font-size:16px; }
.process-grid p { max-width:210px; margin-top:8px; color:#727986; font-size:13px; line-height:1.6; }
.scope-section { border-top:1px solid var(--border); border-bottom:1px solid var(--border); background: #f1f0ec; }
.scope-layout { display:grid; grid-template-columns:0.75fr 1.25fr; align-items:start; gap:92px; }
.scope-copy { position: sticky; top: 120px; }
.scope-copy h2 { font-size:clamp(38px,4vw,52px); }
.scope-copy > p { margin-top:24px; }
.scope-trust { display:flex; flex-wrap:wrap; gap:18px; margin-top:30px; }
.scope-trust span, .final-proof span { display:flex; align-items:center; gap:7px; color:#59616d; font-size:11px; font-weight:700; }
.scope-trust svg, .final-proof svg { width:14px; height:14px; color:var(--green); }
.scope-card { padding:34px; border:1px solid #dbdad5; border-radius:24px; background:#fff; box-shadow:0 20px 55px rgba(43,46,54,0.08); }
.scope-card fieldset { margin:0 0 30px; padding:0; border:0; }
.scope-card legend { margin-bottom:15px; color:var(--ink); font-size:13px; font-weight:770; }
.choice-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.choice-card {
  position:relative; display:flex; flex-direction:column; align-items:flex-start; min-height:104px; padding:17px; border:1px solid var(--border); border-radius:14px; background:#fff; cursor:pointer; transition:border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.choice-card:hover { border-color:#b8bdc8; transform:translateY(-2px); }
.choice-card input { position:absolute; top:14px; right:14px; }
.choice-card > svg { width:23px; height:23px; margin-bottom:auto; color:#6d7480; }
.choice-card > span { color:#4b525e; font-size:12px; font-weight:720; }
.text-choice { justify-content:center; min-height:58px; padding-right:36px; }
.text-choice input { top:50%; transform:translateY(-50%); }
.scope-result { min-height:120px; padding:26px; border:1px dashed #d6d5d0; border-radius:16px; background:#f8f7f4; }
.scope-result:has(.scope-result-message) { border-style:solid; border-color:#dbdad5; background:#fff; }
.empty-result { display:grid; min-height:68px; place-items:center; color:#9298a2; font-size:12px; }
.scope-result-message { margin:0 0 16px; color:var(--ink); font-size:14px; line-height:1.6; }
.scope-result-cta { display:inline-flex; align-items:center; height:44px; padding:0 20px; border-radius:10px; background:var(--ink); color:#fff; font-size:13px; font-weight:750; }
.cases-section { background:#fff; }
.cases-intro { align-items:end; }
.cases-view-all { display:inline-flex; align-items:center; gap:6px; margin-top:16px; color:var(--ink); font-size:13px; font-weight:750; }
.cases-view-all svg { width:15px; height:15px; color:var(--orange); transition:transform 160ms ease; }
.cases-view-all:hover svg { transform:translateX(3px); }
.cases-grid { display:grid; grid-template-columns:1.2fr 0.9fr 0.9fr; gap:16px; margin-top:62px; }
.case-card { display:block; overflow:hidden; border:1px solid var(--border); border-radius:20px; background:#fff; color:inherit; text-decoration:none; transition:transform 180ms ease, box-shadow 180ms ease; }
.case-card:hover { box-shadow:0 20px 50px rgba(35,39,47,0.1); transform:translateY(-5px); }
.case-visual { position:relative; display:grid; min-height:310px; overflow:hidden; place-items:center; }
.case-card:not(.case-primary) .case-visual { min-height:250px; }
.case-chip { position:absolute; top:16px; left:16px; z-index:3; padding:6px 9px; border:1px solid rgba(255,255,255,0.2); border-radius:6px; background:rgba(20,23,29,0.34); color:#fff; font-size:9px; font-weight:700; }
.phone-shell { position:relative; width:188px; min-height:258px; padding:28px 17px 16px; border:4px solid #20232a; border-radius:30px 30px 0 0; background:#f8f7f4; box-shadow:0 24px 44px rgba(31,34,48,0.34); color:var(--ink); transform:translateY(28px) rotate(-3deg); }
.phone-notch { position:absolute; top:8px; left:50%; width:50px; height:7px; border-radius:999px; background:#20232a; transform:translateX(-50%); }
.phone-brand { margin-bottom:30px; color:#5d62df; font-size:13px; font-weight:900; letter-spacing:0.08em; }
.phone-order { padding:13px; border:1px solid #e1e0dc; border-radius:12px; background:#fff; }
.phone-order span, .phone-order strong { display:block; }
.phone-order span { color:#7d838e; font-size:8px; }
.phone-order strong { margin-top:5px; font-size:12px; }
.phone-progress { display:flex; gap:5px; margin:14px 2px 23px; }
.phone-progress i { width:100%; height:4px; border-radius:999px; background:#d7d8dd; }
.phone-progress i:nth-child(-n + 2) { background:#5d62df; }
.phone-button { padding:11px; border-radius:9px; background:#20232a; color:#fff; font-size:8px; font-weight:700; text-align:center; }
.pos-screen { width:calc(100% - 48px); padding:16px; border:1px solid #464d59; border-radius:14px; background:#15181d; box-shadow:0 20px 38px rgba(0,0,0,0.3); color:#fff; transform:rotate(2deg); }
.pos-top, .pos-order { display:flex; align-items:center; justify-content:space-between; }
.pos-top { margin-bottom:14px; color:#8d95a2; font-size:8px; }
.pos-top strong { color:#fff; font-size:11px; }
.pos-order { margin-top:7px; padding:11px; border:1px solid #30353e; border-radius:8px; background:#20242b; color:#c2c7cf; font-size:8px; }
.pos-order b { padding:4px 6px; border-radius:999px; background:rgba(255,109,58,0.14); color:#ffa17f; font-size:7px; }
.pos-order b.ready { background:rgba(105,214,164,0.12); color:#69d6a4; }
.pos-order b.working { background:rgba(82,103,245,0.16); color:#9eabff; }
.case-content { padding:25px; }
.case-title-row { display:flex; align-items:baseline; justify-content:space-between; gap:15px; }
.case-title-row h3 { color:var(--ink); font-size:20px; font-weight:780; }
.case-title-row > span { color:#9298a2; font-size:9px; font-weight:700; }
.case-content > p { min-height:66px; margin-top:13px; color:#666d78; font-size:13px; line-height:1.65; }
.case-outcome { display:flex; align-items:flex-start; gap:11px; margin-top:20px; padding-top:17px; border-top:1px solid var(--border); color:#38404b; font-size:11px; font-weight:680; line-height:1.5; }
.case-outcome > svg { width:15px; height:15px; flex:0 0 auto; color:var(--orange); }
.case-outcome small { display:block; margin-bottom:3px; color:#989ea8; font-size:8px; font-weight:800; letter-spacing:0.07em; text-transform:uppercase; }

.case-detail-back { display:inline-flex; align-items:center; gap:7px; margin-bottom:22px; color:#666d79; font-size:13px; font-weight:650; }
.case-detail-back svg { width:16px; height:16px; }
.case-detail-back:hover { color:var(--ink); }
.case-detail-tag { margin-top:14px; color:#8a919b; font-size:13px; font-weight:650; }
.case-detail-image-wrap { padding-top:0; padding-bottom:0; }
.case-detail-image { width:100%; aspect-ratio:16/8; border-radius:24px; background-color:var(--ink); background-position:center; background-size:cover; box-shadow:0 30px 60px rgba(24,29,36,0.14); }
.case-detail-layout { display:grid; grid-template-columns:1fr 300px; align-items:start; gap:64px; }
.case-detail-body h2 { margin-top:44px; color:var(--ink); font-size:22px; font-weight:770; }
.case-detail-body h2:first-child { margin-top:0; }
.case-detail-body p { margin-top:14px; color:#4c525d; font-size:16px; line-height:1.8; }
.case-detail-meta { position:sticky; top:120px; display:flex; flex-direction:column; gap:20px; padding:26px; border:1px solid var(--border); border-radius:20px; background:#fff; }
.case-detail-meta-item span { display:block; margin-bottom:6px; color:#8a919b; font-size:10px; font-weight:800; letter-spacing:0.07em; text-transform:uppercase; }
.case-detail-meta-item strong { display:block; color:var(--ink); font-size:14px; font-weight:700; line-height:1.5; }
.case-detail-meta .primary-cta { width:100%; }
.testimonials { background:var(--ink); color:#fff; }
.testimonials-layout { display:grid; grid-template-columns:0.78fr 1.22fr; align-items:start; gap:100px; }
.testimonial-heading { position:sticky; top:120px; }
.testimonial-heading .section-kicker { color:#ff9b75; }
.testimonial-heading h2 { color:#fff; }
.testimonial-heading > p { margin-top:24px; color:#a2a8b2; }
.rating-block { display:flex; align-items:center; gap:16px; margin-top:32px; }
.rating-block > strong { font-size:30px; letter-spacing:-0.04em; }
.rating-block div, .rating-block small { display:block; }
.rating-block div > span { display:flex; gap:3px; }
.rating-block svg { width:13px; height:13px; color:var(--orange); }
.rating-block small { margin-top:4px; color:#858d99; font-size:9px; }
.testimonial-list { display:grid; gap:13px; }
.testimonial-list blockquote { margin:0; padding:29px; border:1px solid rgba(255,255,255,0.1); border-radius:18px; background:#20242b; }
.testimonial-list blockquote:nth-child(2) { margin-left:46px; border-color:rgba(255,109,58,0.26); }
.testimonial-list blockquote p { color:#f2f3f5; font-size:18px; font-weight:550; line-height:1.55; letter-spacing:-0.02em; }
.testimonial-list footer { display:flex; align-items:center; gap:11px; margin-top:23px; }
.quote-avatar { display:grid; width:35px; height:35px; place-items:center; border-radius:50%; background:var(--orange); color:#fff; font-size:11px; font-weight:800; }
.testimonial-list footer strong, .testimonial-list footer small { display:block; }
.testimonial-list footer strong { font-size:11px; }
.testimonial-list footer small { margin-top:3px; color:#858d99; font-size:9px; }
.faq-layout { display:grid; grid-template-columns:0.75fr 1.25fr; align-items:start; gap:100px; }
.faq-heading h2 { font-size:clamp(36px,3.7vw,50px); }
.faq-heading > p { margin:22px 0 26px; }
.faq-list { display:grid; gap:18px; }
.faq-item { padding:22px 0; border-top:1px solid var(--border); }
.faq-item h3 { color:var(--ink); font-size:15px; font-weight:750; }
.faq-item p { margin-top:12px; color:#656c77; font-size:13px; line-height:1.72; }
.final-cta-section { padding:116px 0; border-top:1px solid var(--border); background: var(--orange-soft); text-align:center; }
.final-cta-inner { display:flex; flex-direction:column; align-items:center; }
.final-cta-badge { color:#6e625d; }
.final-cta-inner h2 { max-width:850px; margin-top:24px; font-size:clamp(42px,5vw,66px); }
.final-cta-inner > p { max-width:660px; margin-top:22px; color:#69625e; font-size:16px; line-height:1.7; }
.final-cta-actions { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:32px; }
.final-cta-actions .secondary-cta { border:1px solid rgba(29,33,38,0.16); background:#fff; }
.final-proof { display:flex; flex-wrap:wrap; justify-content:center; gap:20px; margin-top:20px; }
.site-footer { background:#111318; color:#fff; }
.footer-top { display:grid; grid-template-columns:1.15fr auto auto auto; gap:56px; padding-top:60px; padding-bottom:50px; }
.site-footer .brand { color:#fff; }
.footer-top > div:first-child > p { max-width:310px; margin-top:16px; color:#858d99; font-size:12px; line-height:1.6; }
.footer-links-label { display:block; margin-bottom:14px; color:#5b6270; font-size:10px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; }
.footer-links { display:grid; grid-template-columns:repeat(2,auto); align-content:start; gap:12px 26px; }
.footer-links a, .footer-contact { color:#9aa1ac; font-size:11px; }
.footer-links a:hover, .footer-contact a:hover { color:#fff; }
.footer-contact { display:flex; flex-direction:column; gap:9px; }
.footer-contact a { color:#fff; font-size:13px; font-weight:700; }
.footer-bottom { display:flex; justify-content:space-between; padding-top:22px; padding-bottom:22px; border-top:1px solid rgba(255,255,255,0.08); color:#737b87; font-size:9px; }
.mobile-cta-bar { display:none; }

.page-shell {
  min-height: 100vh;
  background: var(--background);
}
.page-hero {
  padding-top: 156px;
  padding-bottom: 48px;
}
.narrow-copy {
  max-width: 760px;
}
.narrow-copy h1 {
  color: var(--ink);
  font-size: clamp(42px, 4vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.05em;
}
.narrow-copy p {
  margin-top: 18px;
  color: #646b77;
  font-size: 18px;
  line-height: 1.7;
}
.process-page,
.contact-page,
.about-page {
  padding-top: 0;
}
.process-steps-large {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.step-card {
  padding: 30px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: rgba(255,255,255,0.7);
}
.step-card span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
}
.step-card h2 {
  margin-top: 18px;
  color: var(--ink);
  font-size: 24px;
}
.step-card p {
  margin-top: 12px;
  color: #666d79;
  font-size: 15px;
  line-height: 1.7;
}
.page-cta-wrap {
  padding-top: 32px;
}
.page-cta-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 34px 38px;
  border: 1px solid var(--border);
  border-radius: 26px;
  background: #fff;
}
.page-cta-box h2 {
  color: var(--ink);
  font-size: clamp(28px, 3vw, 42px);
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 48px;
}
.feature-grid-2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feature-card {
  padding: 30px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.8);
}
.feature-card svg {
  width: 28px;
  height: 28px;
  margin-bottom: 18px;
  color: var(--orange);
}
.feature-card h3 {
  color: var(--ink);
  font-size: 18px;
  font-weight: 750;
}
.feature-card p {
  margin-top: 10px;
  color: #666d79;
  font-size: 14px;
  line-height: 1.7;
}
.single-case-wrap {
  max-width: 420px;
  margin: 48px auto 0;
}
.mockup-stage {
  display: grid;
  place-items: center;
  padding: 36px 24px 46px;
}
.mockup-chat {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 24px 32px;
}
.mockup-chat .chat-bubble { align-self: flex-start; max-width: 84%; }
.mockup-chat .chat-bubble-user { align-self: flex-end; background: var(--orange); color: #1d2126; }
.cases-page-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.cases-page-grid .case-visual.has-image, .cases-grid .case-visual.has-image { background-size: cover; background-position: center; }
.case-visual-fallback {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  background: linear-gradient(135deg, var(--ink) 0%, var(--ink-soft) 100%);
  color: rgba(255, 255, 255, 0.65);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.contact-layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.contact-card {
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: #fff;
}
.contact-label {
  margin-bottom: 14px;
  color: var(--blue);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.contact-card a:not(.primary-cta) {
  color: var(--ink);
  font-size: 24px;
  font-weight: 700;
}
.contact-card p {
  color: #646b77;
  font-size: 16px;
  line-height: 1.6;
}
.contact-cta-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.contact-form-section { padding-top: 0; }
.contact-form-card {
  padding: 40px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: #fff;
}
.contact-form-card h2 {
  margin-bottom: 24px;
  color: var(--ink);
  font-size: 22px;
  font-weight: 780;
}
.contact-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-success {
  padding: 12px 16px;
  margin-bottom: 20px;
  border-radius: 10px;
  background: #e3f6ee;
  color: var(--green);
  font-size: 13px;
  font-weight: 650;
}
.resource-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.resource-card {
  padding: 30px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: rgba(255,255,255,0.8);
}
.resource-card h2 {
  color: var(--ink);
  font-size: 22px;
}
.resource-card p {
  margin-top: 14px;
  color: #666d79;
  font-size: 15px;
  line-height: 1.7;
}
.about-layout {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 40px;
  align-items: center;
}
.about-copy h2 {
  color: var(--ink);
  font-size: clamp(30px, 3vw, 46px);
}
.about-copy p {
  margin-top: 20px;
  color: #646b77;
  font-size: 17px;
  line-height: 1.8;
}
.about-metrics {
  display: grid;
  gap: 16px;
}
.about-metrics > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
}
.about-metrics strong {
  color: var(--blue);
  font-size: 34px;
  letter-spacing: -0.05em;
}
.about-metrics span {
  color: #535d68;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

@media (max-width: 1020px) {
  .hero-grid { grid-template-columns:1fr; }
  .hero-copy { max-width:780px; }
  .delivery-card { width:min(640px,100%); margin:0 auto; }
  .split-intro, .scope-layout, .testimonials-layout, .faq-layout { gap:54px; }
  .cases-grid { grid-template-columns:1fr 1fr; }
  .case-primary { grid-column:1 / -1; }
  .case-primary .case-visual { min-height:360px; }
}
@media (max-width: 820px) {
  .section-shell { padding:86px 0; }
  .header-inner { grid-template-columns:1fr auto; }
  .desktop-nav { display:none; }
  .header-cta { grid-column:2; }
  .mobile-nav-toggle { display:flex; }
  .hero { padding-top:140px; padding-bottom:74px; }
  .hero h1 { font-size:clamp(43px,9vw,64px); }
  .client-strip-inner { flex-direction:column; align-items:flex-start; justify-content:center; padding-top:26px; padding-bottom:26px; gap:17px; }
  .client-names { flex-wrap:wrap; justify-content:flex-start; gap:16px 28px; }
  .split-intro, .scope-layout, .testimonials-layout, .faq-layout { grid-template-columns:1fr; }
  .split-intro { gap:22px; }
  .assurance-grid { grid-template-columns:1fr; }
  .assurance-card { min-height:290px; }
  .process-grid { grid-template-columns:1fr 1fr; gap:34px 20px; }
  .process-grid::before { display:none; }
  .scope-copy, .testimonial-heading { position:static; }
  .testimonials-layout, .faq-layout { gap:46px; }
  .testimonial-list blockquote:nth-child(2) { margin-left:0; }
  .footer-top { grid-template-columns:1fr 1fr; gap:45px; }
  .footer-top > div:first-child { grid-column:1 / -1; }
  .process-steps-large,
  .cases-page-grid,
  .contact-layout,
  .contact-form-row,
  .resource-grid,
  .feature-grid,
  .case-detail-layout,
  .about-layout { grid-template-columns: 1fr; }
  .case-detail-meta { position:static; }
  .page-cta-box { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
  .container { width:min(100% - 32px, 1160px); }
  .header-inner { min-height:70px; }
  .header-cta { display:none; }
  .mobile-nav-backdrop, .mobile-nav { top:70px; }
  .mobile-nav { max-height:calc(100vh - 70px); }
  .hero { padding-top:120px; }
  .hero h1 { font-size:42px; }
  .hero h1 span { white-space:normal; }
  .hero-lead { font-size:16px; }
  .hero-actions { align-items:stretch; flex-direction:column; }
  .hero-actions .primary-cta, .hero-actions .secondary-cta { width:100%; }
  .cta-note { justify-content:center; text-align:center; }
  .hero-proof { gap:0; }
  .hero-proof > div { padding:0 10px; }
  .hero-proof strong { font-size:16px; }
  .hero-proof span { font-size:9px; }
  .delivery-card-header { flex-direction:column; padding:24px 22px 20px; }
  .progress-track { margin-right:22px; margin-left:22px; }
  .build-steps { padding-right:10px; padding-left:10px; }
  .build-step { grid-template-columns:30px 1fr; }
  .step-state { display:none; }
  .delivery-footer div { padding:15px 10px; }
  .section-intro h2, .scope-copy h2, .testimonial-heading h2, .faq-heading h2 { font-size:36px; }
  .comparison-head { display:none; }
  .comparison-row { grid-template-columns:1fr 25px 1fr; min-height:100px; padding:0 17px; font-size:11px; }
  .process-block { margin-top:82px; }
  .process-grid { grid-template-columns:1fr; }
  .process-grid li { display:grid; grid-template-columns:42px 1fr; gap:16px; padding-right:0; }
  .process-grid div { margin-top:0; }
  .scope-card { padding:22px; }
  .choice-grid { grid-template-columns:1fr; }
  .project-choice-grid .choice-card { flex-direction:row; align-items:center; min-height:60px; gap:12px; }
  .project-choice-grid .choice-card > svg { margin:0; }
  .cases-grid { grid-template-columns:1fr; }
  .case-primary { grid-column:auto; }
  .case-primary .case-visual, .case-visual { min-height:280px; }
  .testimonial-list blockquote { padding:23px; }
  .testimonial-list blockquote p { font-size:16px; }
  .final-cta-section { padding:90px 0; }
  .final-cta-inner h2 { font-size:40px; }
  .final-proof { align-items:center; flex-direction:column; gap:10px; }
  .footer-top { grid-template-columns:1fr; }
  .footer-top > div:first-child { grid-column:auto; }
  .footer-bottom { padding-bottom:90px; }
  .mobile-cta-bar { position:fixed; right:0; bottom:0; left:0; z-index:60; display:block; padding:11px 16px calc(11px + env(safe-area-inset-bottom)); border-top:1px solid var(--border); background:rgba(251,250,247,0.94); backdrop-filter:blur(16px); }
  .mobile-cta-bar .primary-cta { width:100%; height:50px; }
}
/* Intake form + AI chat tool pages */
.tool-page { min-height:100vh; display:flex; flex-direction:column; background:var(--background); }
.tool-page-app { height:100vh; overflow:hidden; }
.tool-page-center { flex:1; min-height:0; display:flex; align-items:center; justify-content:center; padding:40px 24px; overflow-y:auto; }
.tool-header { flex:0 0 auto; border-bottom:1px solid var(--border); background:#fff; }
.tool-header-inner { display:flex; align-items:center; justify-content:space-between; min-height:76px; }
.tool-back { color:#5c6270; font-size:13px; font-weight:650; }
.tool-back:hover { color:var(--ink); }
.tool-alert { margin:20px auto 0; padding:14px 18px; border:1px solid #f0c6c6; border-radius:12px; background:#fdf2f2; color:#a13b3b; font-size:13px; font-weight:650; }

.intake-panel { box-sizing:border-box; width:min(620px, calc(100% - 48px)); margin:60px auto 100px; padding:34px; border:1px solid #dbdad5; border-radius:24px; background:#fff; box-shadow:0 20px 55px rgba(43,46,54,0.08); }
.intake-panel h1 { margin-bottom:10px; font-size:26px; letter-spacing:-0.03em; }
.intake-panel > p { color:#5c6270; font-size:14px; line-height:1.6; }
.intake-step-label { margin-bottom:18px; color:#9298a2; font-size:11px; font-weight:750; letter-spacing:0.08em; text-transform:uppercase; }
.intake-fieldset { margin:0; padding:0; border:0; }
.intake-fieldset legend { margin:22px 0 12px; padding:0; color:var(--ink); font-size:13px; font-weight:770; }
.intake-fieldset .choice-grid { margin-bottom:0; }
.choice-card.is-selected { border-color:var(--blue); background:var(--blue-soft); }
.choice-card.is-selected > span { color:var(--ink); }

.intake-field { display:flex; flex-direction:column; gap:7px; margin-top:18px; }
.intake-field span { color:var(--ink); font-size:12px; font-weight:720; }
.intake-field input, .intake-field textarea, .intake-field select {
  padding:12px 14px; border:1px solid var(--border); border-radius:10px; background:#fff;
  color:var(--ink); font:inherit; font-size:14px; resize:vertical;
}
.intake-field input:focus, .intake-field textarea:focus, .intake-field select:focus { outline:2px solid rgba(82,103,245,0.3); outline-offset:1px; border-color:var(--blue); }
.intake-field-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.intake-honeypot { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

.intake-actions { display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-top:26px; }
.intake-error { margin-top:16px; color:#a13b3b; font-size:13px; font-weight:650; }

.intake-success h1, .ai-gate-sent h1 { margin-bottom:12px; }
.intake-ai-nudge { margin-top:26px; padding-top:22px; border-top:1px solid var(--border); font-size:13px; }
.intake-ai-nudge a { color:var(--blue); font-weight:700; }

.ai-chat-shell { flex:1 1 auto; box-sizing:border-box; display:flex; min-height:0; padding:28px 32px; }
.ai-chat-grid { flex:1; box-sizing:border-box; display:grid; grid-template-columns:1fr 2fr; min-height:0; width:100%; gap:28px; }

.ai-chat-panel {
  box-sizing:border-box; display:flex; flex-direction:column; height:100%; min-height:0;
  padding:24px; border:1px solid #dbdad5; border-radius:24px; background:#fff; box-shadow:0 20px 55px rgba(43,46,54,0.08);
}
.chat-log { flex:1; min-height:0; display:flex; flex-direction:column; gap:14px; margin-bottom:16px; overflow-y:auto; padding-right:6px; }

.chat-row { display:flex; align-items:flex-end; gap:8px; }
.chat-row-user { justify-content:flex-end; }
.chat-row-assistant { justify-content:flex-start; }

.ai-mark {
  display:flex; flex:0 0 auto; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%; background:var(--ink); color:#fff;
}
.ai-mark svg { width:15px; height:15px; }

.chat-bubble { max-width:78%; padding:11px 15px; border-radius:16px; font-size:14px; line-height:1.55; white-space:pre-wrap; }
.chat-bubble-assistant { border-bottom-left-radius:4px; background:var(--surface-soft); color:var(--ink); }
.chat-bubble-user { border-bottom-right-radius:4px; background:var(--ink); color:#fff; }

.chat-input-row { flex:0 0 auto; display:flex; gap:10px; }
.chat-input-row input { flex:1; padding:12px 14px; border:1px solid var(--border); border-radius:10px; font:inherit; font-size:14px; }
.chat-input-row input:focus { outline:2px solid rgba(82,103,245,0.3); outline-offset:1px; border-color:var(--blue); }
.ai-chat-complete { flex:0 0 auto; align-self:center; margin-top:14px; }

.requirements-panel {
  box-sizing:border-box; display:flex; flex-direction:column; height:100%; min-height:0; overflow:hidden;
  border:1px solid var(--border); border-radius:24px; background:var(--surface-soft);
}
.requirements-header { flex:0 0 auto; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:26px 28px 20px; border-bottom:1px solid var(--border); }
.requirements-header h2 { font-size:19px; letter-spacing:-0.02em; }
.requirements-subtitle { margin-top:4px; color:#8a909b; font-size:12px; }
.requirements-progress {
  display:inline-flex; flex:0 0 auto; align-items:center; justify-content:center;
  min-width:44px; height:26px; padding:0 10px; border-radius:999px; background:var(--ink); color:#fff;
  font-size:11px; font-weight:750;
}

.requirements-body { flex:1; min-height:0; overflow-y:auto; padding:22px 28px 28px; }
.requirements-section { margin-bottom:26px; }
.requirements-section:last-child { margin-bottom:0; }
.requirements-section h3 { margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid var(--border); color:#7d8894; font-size:10.5px; font-weight:780; letter-spacing:0.1em; text-transform:uppercase; }

.requirements-field { margin:0 -12px 4px; padding:9px 12px; border-radius:10px; transition:background 200ms ease; }
.requirements-label { display:block; margin-bottom:4px; color:#8a909b; font-size:11px; font-weight:750; letter-spacing:0.04em; }
.requirements-value { color:var(--ink); font-size:13.5px; line-height:1.55; }
.requirements-empty { color:#a8adb6; font-size:13px; font-style:italic; }
.requirements-list { margin:0; padding-left:18px; color:var(--ink); font-size:13.5px; line-height:1.6; }
.requirements-list li { margin-bottom:3px; }
.requirements-field.is-updated { animation:requirement-flash 1600ms ease-out; }

@keyframes requirement-flash {
  0% { background:var(--blue-soft); }
  100% { background:transparent; }
}

@media (max-width:960px) {
  .tool-page-app { height:auto; overflow:visible; }
  .ai-chat-shell { flex:none; height:auto; padding:20px 16px 100px; }
  .ai-chat-grid { grid-template-columns:1fr; height:auto; }
  .ai-chat-panel { height:70vh; }
  .requirements-panel { height:60vh; }
}

@media (max-width:600px) {
  .intake-panel { padding:24px; margin:30px auto 120px; }
  .intake-field-row { grid-template-columns:1fr; }
  .ai-chat-panel, .requirements-panel { padding:0; }
  .ai-chat-panel { padding:20px; }
  .requirements-header { padding:20px 20px 16px; }
  .requirements-body { padding:18px 20px 24px; }
  .chat-bubble { max-width:88%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { transition-duration:0.01ms !important; animation-duration:0.01ms !important; }
}

/* Scroll reveal — progressive enhancement, see application.js */
.reveal, .reveal-group > * { opacity: 1; transform: none; }
body.js-reveal .reveal,
body.js-reveal .reveal-group > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 750ms cubic-bezier(.16,1,.3,1), transform 750ms cubic-bezier(.16,1,.3,1);
}
body.js-reveal .reveal.is-visible,
body.js-reveal .reveal-group.is-visible > * {
  opacity: 1;
  transform: none;
}
body.js-reveal .reveal-group > *:nth-child(1) { transition-delay: 0ms; }
body.js-reveal .reveal-group > *:nth-child(2) { transition-delay: 90ms; }
body.js-reveal .reveal-group > *:nth-child(3) { transition-delay: 180ms; }
body.js-reveal .reveal-group > *:nth-child(4) { transition-delay: 270ms; }
body.js-reveal .reveal-group > *:nth-child(5) { transition-delay: 360ms; }
body.js-reveal .reveal-group > *:nth-child(6) { transition-delay: 450ms; }

/* Backend: auth + admin/portal shell */

.auth-shell { display:grid; min-height:100vh; place-items:center; background:var(--background); padding:24px; }
.auth-card { width:100%; max-width:380px; padding:36px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); box-shadow:0 20px 50px rgba(35,39,47,0.08); }
.auth-logo { display:block; height:28px; margin:0 auto 26px; }
.auth-card h1 { margin-bottom:22px; color:var(--ink); font-size:20px; font-weight:780; text-align:center; }
.auth-flash { margin-bottom:16px; padding:11px 14px; border-radius:10px; font-size:13px; font-weight:600; }
.auth-flash.alert { background:#fbe9e8; color:var(--destructive); }
.auth-flash.notice { background:var(--orange-soft); color:#8a5a00; }
.auth-card .form-field { margin-bottom:14px; }
.auth-card .btn { width:100%; margin-top:6px; }
.auth-links { margin-top:18px; text-align:center; font-size:12px; }
.auth-links a { color:var(--blue); font-weight:600; }

.form-field { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.form-field label { color:var(--ink); font-size:12px; font-weight:700; }
.form-field input, .form-field select, .form-field textarea {
  padding:10px 12px; border:1px solid var(--input); border-radius:9px; background:#fff; color:var(--ink); font-size:14px; font-family:inherit;
}
.form-field textarea { min-height:100px; resize:vertical; }
.form-field .hint { color:#8a919b; font-size:11px; }
.form-actions { display:flex; gap:10px; margin-top:22px; }
.field-errors { padding:12px 14px; margin-bottom:18px; border-radius:10px; background:#fbe9e8; color:var(--destructive); font-size:13px; }
.field-errors ul { margin:4px 0 0 18px; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:10px 18px; border:1px solid transparent; border-radius:9px; font-size:13px; font-weight:700; cursor:pointer; text-decoration:none; }
.btn-primary { background:var(--ink); color:#fff; }
.btn-primary:hover { background:var(--ink-soft); }
.btn-secondary { border-color:var(--border); background:#fff; color:var(--ink); }
.btn-secondary:hover { border-color:var(--ink); }
.btn-danger { background:none; border:none; padding:0; color:var(--destructive); font-weight:700; font-size:12px; }
.btn-sm { padding:6px 12px; font-size:12px; }

.backend-shell { display:flex; min-height:100vh; background:var(--background); }
.backend-sidebar { display:flex; flex-direction:column; width:220px; flex:0 0 220px; padding:26px 18px; background:var(--ink); color:#fff; }
.backend-sidebar .brand-logo { height:22px; margin-bottom:30px; filter:brightness(0) invert(1); }
.backend-nav { display:flex; flex-direction:column; gap:4px; flex:1; }
.backend-nav a { padding:10px 12px; border-radius:8px; color:rgba(255,255,255,0.65); font-size:13px; font-weight:650; text-decoration:none; }
.backend-nav a:hover { color:#fff; background:rgba(255,255,255,0.06); }
.backend-nav a.active { color:#fff; background:rgba(255,255,255,0.12); }
.backend-user { padding-top:16px; border-top:1px solid rgba(255,255,255,0.12); font-size:12px; color:rgba(255,255,255,0.55); }
.backend-user strong { display:block; margin-bottom:8px; color:#fff; font-size:13px; }
.backend-user button { background:none; border:none; padding:0; color:rgba(255,255,255,0.55); font-size:12px; font-weight:700; cursor:pointer; text-decoration:underline; }
.backend-main { flex:1; padding:36px 44px; overflow-x:auto; }
.backend-topbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:28px; }
.backend-topbar h1 { color:var(--ink); font-size:24px; font-weight:780; }
.backend-flash { padding:12px 16px; margin-bottom:22px; border-radius:10px; font-size:13px; font-weight:650; }
.backend-flash.notice { background:var(--blue-soft); color:#0c6f93; }
.backend-flash.alert { background:#fbe9e8; color:var(--destructive); }

.stat-row { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; margin-bottom:32px; }
.stat-card { padding:22px; border:1px solid var(--border); border-radius:16px; background:#fff; }
.stat-card span { display:block; margin-bottom:8px; color:#8a919b; font-size:11px; font-weight:800; letter-spacing:0.06em; text-transform:uppercase; }
.stat-card strong { color:var(--ink); font-size:30px; font-weight:800; }

.data-table { width:100%; border-collapse:collapse; border:1px solid var(--border); border-radius:14px; overflow:hidden; background:#fff; }
.data-table th, .data-table td { padding:13px 16px; border-bottom:1px solid var(--border); text-align:left; font-size:13px; }
.data-table th { color:#8a919b; font-size:10px; font-weight:800; letter-spacing:0.06em; text-transform:uppercase; background:var(--surface-soft); }
.data-table tr:last-child td { border-bottom:none; }
.data-table td.actions { display:flex; gap:14px; white-space:nowrap; }
.data-table a { color:var(--blue); font-weight:650; text-decoration:none; }

.status-badge { display:inline-block; padding:4px 10px; border-radius:999px; background:var(--surface-soft); color:var(--ink-soft); font-size:11px; font-weight:700; }
.status-badge.status-completed { background:#e3f6ee; color:var(--green); }
.status-badge.status-in_progress { background:var(--blue-soft); color:#0c6f93; }
.status-badge.status-on_hold { background:#fbe9e8; color:var(--destructive); }

.backend-card { padding:26px; border:1px solid var(--border); border-radius:16px; background:#fff; }
.empty-state { padding:40px; border:1px dashed var(--border); border-radius:14px; color:#8a919b; font-size:13px; text-align:center; }
.checkbox-field { display:flex; align-items:center; gap:8px; }
.checkbox-field input { width:auto; }

@media (max-width:820px) {
  .backend-shell { flex-direction:column; }
  .backend-sidebar { width:100%; flex:none; flex-direction:row; align-items:center; padding:16px 20px; }
  .backend-nav { flex-direction:row; }
  .backend-user { display:none; }
  .backend-main { padding:24px; }
  .stat-row { grid-template-columns:1fr; }
}