*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #0A0C10;
  --bg-raised: #12151B;
  --bg-card: #151922;
  --border: #232833;
  --text: #E7EAEE;
  --text-dim: #9AA3B2;
  --text-faint: #5C6472;
  --accent: #3ECF8E;
  --accent-dim: rgba(62, 207, 142, 0.12);
  --accent-line: rgba(62, 207, 142, 0.35);
  --warn: #F0B429;
  --radius: 14px;
  --font-head: 'Space Grotesk', 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
}
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
.wrap { max-width: 1120px; margin: 0 auto; padding-inline: 24px; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-head); line-height: 1.15; text-wrap: balance; }

/* Nav */
nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10,12,16,0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
nav .wrap { display: flex; align-items: center; justify-content: space-between; padding-block: 18px; }
.logo { font-family: var(--font-head); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; display: flex; align-items: center; gap: 8px; text-decoration: none; }
.logo-mark { width: 10px; height: 10px; border-radius: 3px; background: var(--accent); box-shadow: 0 0 14px var(--accent-line); flex-shrink: 0; }
.nav-links { display: flex; gap: 32px; font-size: 14.5px; color: var(--text-dim); }
.nav-links a { text-decoration: none; }
.nav-links a:hover { color: var(--text); }
.nav-links a.active { color: var(--text); }
.nav-cta {
  font-size: 14.5px; font-weight: 600; padding: 9px 18px; border-radius: 8px;
  background: var(--accent); color: #06110C; text-decoration: none;
}
.nav-links-wrap { display: flex; align-items: center; gap: 32px; }
@media (max-width: 720px) { .nav-links { display: none; } }

/* Page header (non-home pages) */
.page-header { padding: 72px 0 56px; border-bottom: 1px solid var(--border); }
.page-header .eyebrow { margin-bottom: 20px; }
.page-header h1 { font-size: clamp(30px, 4.4vw, 46px); font-weight: 700; letter-spacing: -0.02em; max-width: 720px; }
.page-header p.lead { font-size: 17.5px; color: var(--text-dim); max-width: 600px; margin-top: 16px; }

/* Hero (home only) */
.hero { padding: 96px 0 88px; position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; top: -200px; right: -160px; width: 560px; height: 560px;
  background: radial-gradient(circle, var(--accent-dim), transparent 70%);
  pointer-events: none;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent);
  background: var(--accent-dim); border: 1px solid var(--accent-line);
  padding: 6px 12px; border-radius: 100px; margin-bottom: 24px;
}
.hero h1 { font-size: clamp(34px, 5vw, 56px); font-weight: 700; letter-spacing: -0.02em; max-width: 760px; }
.hero h1 span { color: var(--accent); }
.hero p.lead { font-size: 19px; color: var(--text-dim); max-width: 560px; margin-top: 20px; }
.hero-ctas { display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; }
.btn-primary {
  background: var(--accent); color: #06110C; font-weight: 600; font-size: 15px;
  padding: 13px 24px; border-radius: 9px; text-decoration: none; display: inline-block;
  box-shadow: 0 8px 24px -8px var(--accent-line);
}
.btn-secondary {
  border: 1px solid var(--border); color: var(--text); font-weight: 600; font-size: 15px;
  padding: 13px 24px; border-radius: 9px; text-decoration: none; display: inline-block;
}
.hero-proof { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--border); display: flex; gap: 40px; flex-wrap: wrap; }
.hero-proof-item { font-size: 14px; color: var(--text-faint); }
.hero-proof-item strong { color: var(--text); font-weight: 600; }

/* Section shared */
section { padding: 88px 0; border-top: 1px solid var(--border); }
.section-tag { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.section-head { max-width: 640px; margin-bottom: 56px; }
.section-head h2 { font-size: clamp(26px, 3.4vw, 36px); font-weight: 700; letter-spacing: -0.01em; }
.section-head p { color: var(--text-dim); font-size: 16.5px; margin-top: 14px; }

/* 3-up card grid - reused for problem cards, services, ICP */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 860px) { .grid-3 { grid-template-columns: 1fr; } }
.card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; }
.card .num { font-family: var(--font-head); font-size: 13px; color: var(--text-faint); margin-bottom: 14px; }
.card h3 { font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.card p { font-size: 14.5px; color: var(--text-dim); }
.card ul { margin-top: 14px; padding-left: 18px; color: var(--text-dim); font-size: 14px; display: flex; flex-direction: column; gap: 6px; }

/* Process */
.process-list { display: flex; flex-direction: column; }
.process-item { display: grid; grid-template-columns: 64px 1fr; gap: 24px; padding-block: 28px; border-top: 1px solid var(--border); }
.process-item:first-child { border-top: none; }
.process-num { font-family: var(--font-head); font-size: 22px; font-weight: 700; color: var(--accent); }
.process-item h3 { font-size: 19px; font-weight: 600; margin-bottom: 8px; }
.process-item p { color: var(--text-dim); font-size: 15px; max-width: 620px; }

/* ICP */
.icp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.icp-card { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; }
.icp-tag { font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.icp-card h3 { font-size: 19px; font-weight: 600; margin-bottom: 10px; }
.icp-card p { color: var(--text-dim); font-size: 14.5px; }
@media (max-width: 860px) { .icp-grid { grid-template-columns: 1fr; } }

/* Offer / pricing box */
.offer-box {
  background: linear-gradient(155deg, var(--bg-card), var(--bg-raised));
  border: 1px solid var(--accent-line); border-radius: 20px; padding: 48px;
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center;
}
.offer-box h2 { font-size: 28px; font-weight: 700; margin-bottom: 16px; }
.offer-box > div:first-child p { color: var(--text-dim); font-size: 16px; margin-bottom: 10px; }
.offer-list { list-style: none; margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.offer-list li { display: flex; gap: 10px; font-size: 14.5px; color: var(--text-dim); }
.offer-list li::before { content: "✓"; color: var(--accent); font-weight: 700; flex-shrink: 0; }
.offer-card { background: var(--bg); border: 1px solid var(--border); border-radius: 14px; padding: 28px; text-align: center; }
.offer-card .big { font-family: var(--font-head); font-size: 15px; font-weight: 600; color: var(--text); }
.offer-card .big span { display: block; font-size: 30px; color: var(--accent); margin-top: 6px; line-height: 1.3; }
.offer-card p.note { font-size: 13px; color: var(--text-faint); margin-top: 10px; }
@media (max-width: 860px) { .offer-box { grid-template-columns: 1fr; padding: 32px; } }

/* FAQ (pricing page) */
.faq-item { border-top: 1px solid var(--border); padding: 24px 0; }
.faq-item:first-child { border-top: none; }
.faq-item h3 { font-size: 16.5px; font-weight: 600; margin-bottom: 8px; }
.faq-item p { color: var(--text-dim); font-size: 15px; }

/* Team grid (about page) */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 860px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .team-grid { grid-template-columns: 1fr; } }
.team-card { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; text-align: center; }
.team-avatar {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 16px; display: flex;
  align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 700;
  font-size: 18px; background: var(--accent-dim); border: 1px solid var(--accent-line); color: var(--accent);
}
.team-card h3 { font-size: 15.5px; font-weight: 600; }

/* Boutique / stat callout */
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 12px; }
@media (max-width: 860px) { .stat-row { grid-template-columns: 1fr; } }
.stat-box { border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; background: var(--bg-card); }
.stat-box .stat-num { font-family: var(--font-head); font-size: 30px; font-weight: 700; color: var(--accent); }
.stat-box p { color: var(--text-dim); font-size: 14px; margin-top: 6px; }

/* Contact page */
.contact-info-row { display: flex; gap: 48px; flex-wrap: wrap; }
.contact-info-item .label { font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); margin-bottom: 6px; }
.contact-info-item .value { font-size: 16px; font-weight: 500; }
.contact-info-item .value a { text-decoration: none; }
.contact-info-item .value a:hover { color: var(--accent); }

/* Prose (privacy page) */
.prose h2 { font-size: 21px; font-weight: 700; margin: 40px 0 12px; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--text-dim); font-size: 15.5px; margin-bottom: 14px; max-width: 720px; }
.prose ul { color: var(--text-dim); font-size: 15.5px; padding-left: 20px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }

/* CTA */
.cta-section { text-align: center; padding: 96px 0; }
.cta-section h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 700; max-width: 620px; margin: 0 auto; }
.cta-section p { color: var(--text-dim); font-size: 17px; max-width: 480px; margin: 18px auto 32px; }
.cta-section.compact { padding: 64px 0; }

/* Calendly - auto-resized via postMessage listener (see script on contact
   page) so the widget never needs its own internal scrollbar. Calendly
   switches its OWN internal layout from side-by-side (info | calendar |
   time slots) to stacked once its container drops below ~1000px wide -
   stacked is both visually wrong (info block "splits" above the calendar
   instead of running parallel to it) and taller, which is what was
   actually causing the scrollbar. Keeping the wrapper close to the site's
   own content width keeps Calendly in its wide, parallel layout. */
.calendly-wrap { max-width: 1120px; margin: 0 auto; }
.calendly-inline-widget { width: 100%; min-width: 0; height: 700px; }
@media (max-width: 1000px) { .calendly-inline-widget { height: 1150px; } }
@media (max-width: 460px) { .calendly-inline-widget { height: 1300px; } }

footer { border-top: 1px solid var(--border); padding: 40px 0; }
footer .wrap { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 24px; }
footer .foot-links { display: flex; gap: 24px; font-size: 13.5px; color: var(--text-dim); }
footer .foot-links a { text-decoration: none; }
footer .foot-links a:hover { color: var(--text); }
footer p { color: var(--text-faint); font-size: 13.5px; }
footer .foot-col { display: flex; flex-direction: column; gap: 10px; }