/* Hanken Grotesk — self-hosted (free Aeonik-style grotesque, à la Scale.com) */
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/hanken-grotesk-400.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/hanken-grotesk-500.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/hanken-grotesk-600.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/hanken-grotesk-700.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/hanken-grotesk-800.woff2") format("woff2"); }

:root {
  --primary-navy: #13233A;
  --primary-blue: #3F6FD9;
  --background-white: #F8FAFC;
  --warm-neutral: #F5F1EA;
  --light-blue: #EAF1FF;
  --body-text: #334155;
  --muted-text: #64748B;
  --white: #FFFFFF;
  --line: rgba(51, 65, 85, 0.14);
  --line-blue: rgba(63, 111, 217, 0.22);
  --shadow: 0 18px 50px rgba(19, 35, 58, 0.10);
  --soft-shadow: 0 10px 30px rgba(19, 35, 58, 0.08);
  --font-sans: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--background-white);
  color: var(--body-text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
p { margin: 0; }

.page-shell {
  width: min(1160px, calc(100% - 40px));
  margin: 0 auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(19, 35, 58, 0.94);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.nav-shell {
  width: min(1160px, calc(100% - 40px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--white); font-weight: 700; }
.brand-mark {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary-blue), #7EA1F2);
  box-shadow: 0 10px 30px rgba(63,111,217,.25);
  font-size: 15px;
  letter-spacing: -0.04em;
}
.brand-text { font-size: 18px; letter-spacing: -0.02em; }
.brand-logo { height: 42px; width: auto; display: block; }
@media (max-width: 680px) { .brand-logo { height: 32px; } }
.footer-logo { height: 34px; width: auto; display: block; margin-bottom: 10px; }
.nav-menu { display: flex; flex: 1; align-items: center; justify-content: space-between; margin-left: 36px; }
.nav-list { list-style: none; display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; }
.nav-item { position: static; }
.nav-link {
  font-family: inherit; font-size: 15.5px; font-weight: 500; color: rgba(255,255,255,0.8);
  background: none; border: 0; cursor: pointer; padding: 10px 14px; border-radius: 10px;
  display: inline-flex; align-items: center; gap: 7px;
  transition: color .15s var(--ease), background-color .15s var(--ease);
}
.nav-link:hover, .nav-item:hover > .nav-link, .nav-item.open > .nav-link, .nav-item:focus-within > .nav-link { color: var(--white); }
.has-mega > .nav-link::after {
  content: ""; width: 6px; height: 6px; margin-top: -3px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); opacity: .55; transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.nav-item.has-mega:hover > .nav-link::after, .nav-item.has-mega.open > .nav-link::after { transform: rotate(-135deg) translate(-1px,-1px); opacity: .9; }

.mega {
  position: absolute; top: 100%; left: 50%; width: min(900px, calc(100vw - 32px));
  transform: translateX(-50%) translateY(10px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .24s var(--ease), transform .24s var(--ease), visibility .24s;
}
.mega::before { content: ""; position: absolute; top: -16px; left: 0; right: 0; height: 16px; }
.nav-item.has-mega:hover > .mega, .nav-item.has-mega:focus-within > .mega, .nav-item.has-mega.open > .mega {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.mega-inner {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 30px;
  background: rgba(20, 36, 60, 0.98); border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px; box-shadow: 0 30px 80px rgba(0,0,0,.38); backdrop-filter: blur(20px); padding: 28px;
}
.mega-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 34px; }
.mega-cols.one-col { grid-template-columns: 1fr; }
.mega-col { display: flex; flex-direction: column; gap: 4px; }
.mega-head { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .2em; font-size: 11px; font-weight: 600; color: #BFD0FA; margin-bottom: 10px; }
.mega-col a { color: rgba(255,255,255,.82); font-size: 15.5px; font-weight: 500; padding: 7px 0; transition: color .15s var(--ease), transform .15s var(--ease); }
.mega-col a:hover { color: var(--white); transform: translateX(4px); }
.mega-visual {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
  min-height: 210px; border-radius: 16px; padding: 22px; color: var(--white); overflow: hidden;
  background: linear-gradient(150deg, var(--primary-blue), #16294a 72%); border: 1px solid rgba(255,255,255,.12);
  transition: transform .2s var(--ease);
}
.mega-visual.alt { background: linear-gradient(150deg, #2b4a7d, #13233a 74%); }
.mega-visual::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 82% 12%, rgba(255,255,255,.2), transparent 46%); pointer-events: none; }
.mega-visual:hover { transform: translateY(-2px); }
.mega-visual-kicker { position: relative; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .2em; font-size: 11px; color: #BFD0FA; }
.mega-visual-title { position: relative; font-size: 18px; font-weight: 700; letter-spacing: -.02em; line-height: 1.18; }
.mega-visual-cta { position: relative; font-size: 13px; font-weight: 600; opacity: .9; }

.nav-actions { display: flex; align-items: center; gap: 12px; }
.nav-ghost { color: rgba(255,255,255,.85); font-size: 15px; font-weight: 500; padding: 11px 18px; border-radius: 8px; border: 1px solid rgba(255,255,255,.22); transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease); }
.nav-ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.42); color: var(--white); }
.nav-cta {
  color: var(--white) !important;
  padding: 11px 20px;
  border-radius: 8px;
  background: var(--primary-blue);
  font-weight: 600;
  font-size: 15px;
  box-shadow: 0 10px 26px rgba(63,111,217,.30);
  transition: background-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease);
}
.nav-cta:hover { background: #335fc4; box-shadow: 0 12px 30px rgba(63,111,217,.40); transform: translateY(-1px); }
.mobile-toggle { display: none; border: 0; background: none; color: var(--white); font-size: 28px; }

.section-dark { background: var(--primary-navy); color: var(--white); }
.section-white { background: var(--background-white); }
.section-light { background: var(--warm-neutral); }
.section-blue { background: var(--light-blue); color: var(--body-text); }
section { padding: 96px 0; }

.hero { position: relative; overflow: hidden; padding: 118px 0 104px; }
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 10% 18%, rgba(63,111,217,0.36), transparent 30%),
    radial-gradient(circle at 82% 8%, rgba(234,241,255,0.20), transparent 30%),
    radial-gradient(circle at 70% 78%, rgba(245,241,234,0.10), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,0.045) 0 1px, transparent 1px) 0 0/42px 42px;
  pointer-events: none;
}
.hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 72px; align-items: center; }
.eyebrow { font-family: var(--font-mono); color: #BFD0FA; font-size: 14px; text-transform: uppercase; letter-spacing: .18em; font-weight: 600; margin-bottom: 18px; }
.eyebrow.navy { color: var(--primary-blue); }
h1, h2, h3 { margin: 0; line-height: 1.06; letter-spacing: -0.045em; color: inherit; font-weight: 700; }
h1 { font-size: clamp(50px, 7.6vw, 88px); max-width: 820px; }
h2 { font-size: clamp(34px, 4.8vw, 58px); color: var(--primary-navy); }
.section-dark h2, .section-dark h3, .hero h1, .hero h3 { color: var(--white); }
.section-blue h2 { color: var(--primary-navy); }
h3 { font-size: 22px; letter-spacing: -0.035em; color: var(--primary-navy); }
.hero-lede { max-width: 720px; margin-top: 24px; color: rgba(255,255,255,0.78); font-size: 21px; }
.hero-actions { display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 22px; border-radius: 999px; font-weight: 600; transition: background-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease), border-color .15s var(--ease); }
.button-primary { background: var(--primary-blue); color: var(--white); box-shadow: 0 14px 32px rgba(63,111,217,.25); }
.button-primary:hover { background: #335fc4; box-shadow: 0 16px 36px rgba(63,111,217,.34); transform: translateY(-1px); }
.button-secondary { color: var(--white); border: 1px solid rgba(255,255,255,0.28); background: rgba(255,255,255,0.05); }
.button-secondary:hover { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.10); }
.hero-proof { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; color: rgba(255,255,255,0.72); }
.hero-proof span { border: 1px solid rgba(255,255,255,0.18); padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,0.05); font-size: 13px; }

.hero-visual { min-height: 560px; position: relative; display: flex; align-items: center; justify-content: center; }
.orb { position: absolute; border-radius: 999px; filter: blur(36px); opacity: .8; pointer-events: none; }
.orb-one { width: 320px; height: 320px; background: radial-gradient(circle, rgba(63,111,217,.55), transparent 70%); top: -10px; right: 0; animation: orb-drift 14s var(--ease) infinite alternate; }
.orb-two { width: 240px; height: 240px; background: radial-gradient(circle, rgba(126,161,242,.32), transparent 70%); bottom: 0; left: 10px; animation: orb-drift 18s var(--ease) infinite alternate-reverse; }
@keyframes orb-drift { to { transform: translate(-18px, 22px) scale(1.08); } }

/* ===== Intellego console card (hero product mock) ===== */
.console-card {
  position: relative; z-index: 2; width: min(440px, 100%); transform: translateX(28px);
  border-radius: 26px; padding: 26px;
  background: linear-gradient(165deg, rgba(30, 51, 82, 0.92), rgba(18, 32, 54, 0.92));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 40px 90px -28px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(20px);
}
.console-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(150deg, rgba(126,161,242,.5), rgba(255,255,255,0) 42%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.console-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.console-kicker { font-family: var(--font-mono); color: #BFD0FA; font-size: 12px; text-transform: uppercase; font-weight: 600; letter-spacing: .18em; }
.console-live { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.7); }
.console-live i { width: 7px; height: 7px; border-radius: 50%; background: #3FB37A; box-shadow: 0 0 0 0 rgba(63,179,122,.55); animation: pulse-dot 2.2s ease-out infinite; }
@keyframes pulse-dot { 0% { box-shadow: 0 0 0 0 rgba(63,179,122,.5); } 70% { box-shadow: 0 0 0 8px rgba(63,179,122,0); } 100% { box-shadow: 0 0 0 0 rgba(63,179,122,0); } }

.console-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.metric {
  display: flex; flex-direction: column; gap: 3px; padding: 14px 12px; border-radius: 16px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
  transition: transform .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.metric:hover { transform: translateY(-3px); border-color: rgba(126,161,242,.45); background: rgba(63,111,217,.14); }
.metric-label { font-size: 11px; font-weight: 600; letter-spacing: .04em; color: rgba(255,255,255,.6); text-transform: uppercase; }
.metric-value { font-size: 24px; font-weight: 800; letter-spacing: -.04em; color: #fff; line-height: 1.05; }
.metric-value small { font-size: 12px; font-weight: 700; color: rgba(255,255,255,.55); margin-left: 1px; }
.metric-delta { font-size: 11px; font-weight: 700; }
.metric-delta.up { color: #5FCB93; }

.console-chart { padding: 16px; border-radius: 18px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); margin-bottom: 16px; }
.chart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.chart-title { font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.72); }
.chart-badge { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: #BFD0FA; padding: 4px 9px; border-radius: 999px; background: rgba(63,111,217,.2); border: 1px solid rgba(126,161,242,.3); }
.spark { display: block; width: 100%; height: 76px; }
.spark-line { stroke-dasharray: 700; stroke-dashoffset: 700; animation: draw-spark 1.8s var(--ease) .25s forwards; }
.spark-area { opacity: 0; animation: fade-area .9s ease .9s forwards; }
.spark-dot { opacity: 0; animation: fade-area .5s ease 1.7s forwards; filter: drop-shadow(0 0 6px rgba(157,187,250,.9)); }
@keyframes draw-spark { to { stroke-dashoffset: 0; } }
@keyframes fade-area { to { opacity: 1; } }

.console-pipeline { display: flex; gap: 7px; flex-wrap: wrap; }
.pipe-stage { flex: 1; min-width: 0; text-align: center; font-size: 11.5px; font-weight: 600; padding: 9px 6px; border-radius: 11px; color: rgba(255,255,255,.6); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); white-space: nowrap; transition: all .25s var(--ease); }
.pipe-stage.done { color: #BFD0FA; background: rgba(63,111,217,.16); border-color: rgba(126,161,242,.28); }
.pipe-stage.active { color: #fff; background: linear-gradient(135deg, var(--primary-blue), #5B83E0); border-color: rgba(255,255,255,.4); box-shadow: 0 8px 22px -6px rgba(63,111,217,.7); }

.float-chip {
  position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 16px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: #fff;
  background: rgba(24, 42, 68, 0.88); border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 40px -12px rgba(0,0,0,.55); backdrop-filter: blur(14px);
  animation: float-soft 6s ease-in-out infinite;
}
.float-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: #3FB37A; box-shadow: 0 0 8px rgba(63,179,122,.8); }
.float-chip .dot.amber { background: #E6B23E; box-shadow: 0 0 8px rgba(230,178,62,.8); }
.float-chip.chip-a { top: 4%; left: 28px; }
.float-chip.chip-b { bottom: 2%; right: -10px; animation-delay: 1.4s; }
@keyframes float-soft { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.intro-strip { padding: 34px 0; border-bottom: 1px solid var(--line); }
.strip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; font-weight: 700; color: var(--primary-navy); }

.split-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; align-items: start; }
.split-section p { color: var(--muted-text); margin-top: 18px; font-size: 17px; }
.two-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.problem-card, .solution-card { min-height: 340px; border-radius: 28px; padding: 32px; border: 1px solid var(--line); box-shadow: var(--soft-shadow); }
.problem-card { background: var(--warm-neutral); }
.solution-card { background: var(--light-blue); color: var(--body-text); border-color: var(--line-blue); }
.card-label { font-family: var(--font-mono); display: inline-flex; margin-bottom: 36px; font-size: 12px; text-transform: uppercase; letter-spacing: .2em; font-weight: 700; color: var(--primary-blue); }
.solution-card .card-label { color: var(--primary-blue); }
.problem-card p, .solution-card p { margin-top: 18px; color: var(--muted-text); opacity: 1; }

.statement-band { padding: 84px 0; border-top: 1px solid var(--line-blue); border-bottom: 1px solid var(--line-blue); }
.statement-band h2 { max-width: 850px; }
.statement-band p { max-width: 900px; margin-top: 24px; color: var(--body-text); font-size: 20px; }

.section-heading { max-width: 760px; margin-bottom: 46px; }
.section-heading p:not(.eyebrow) { margin-top: 18px; color: var(--muted-text); font-size: 18px; }
.section-heading.inverse p:not(.eyebrow) { color: rgba(255,255,255,.72); }
.service-grid, .client-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.service-grid article, .client-grid article {
  border: 1px solid var(--line-blue);
  background: var(--light-blue);
  border-radius: 24px;
  padding: 26px;
  min-height: 218px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.service-grid article:hover, .client-grid article:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line-blue); }
.service-grid p, .client-grid p { color: var(--muted-text); margin-top: 14px; font-size: 15px; }
.secondary-service { margin-top: 22px; padding: 22px 26px; border-radius: 22px; background: var(--light-blue); color: var(--primary-navy); border: 1px solid var(--line-blue); }
.secondary-service strong { color: var(--primary-navy); }

.intellego-section { position: relative; overflow: hidden; }
.intellego-section::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 0%, rgba(63,111,217,.22), transparent 34%); pointer-events: none; }
.intellego-section .page-shell { position: relative; }
.engine-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.engine-flow article { padding: 28px; border-radius: 26px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13); min-height: 248px; }
.engine-flow span { font-family: var(--font-mono); color: #BFD0FA; font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.engine-flow h3 { margin-top: 22px; color: var(--white); }
.engine-flow p { margin-top: 14px; color: rgba(255,255,255,.72); font-size: 15px; }

.use-case-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 70px; align-items: start; }
.sticky-heading { position: sticky; top: 110px; }
.use-case-list { display: grid; gap: 12px; }
.use-case-list div { display: grid; grid-template-columns: .65fr 1fr; gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.use-case-list strong { color: var(--primary-navy); font-size: 18px; }
.use-case-list span { color: var(--muted-text); }

.client-grid article { background: var(--white); min-height: 190px; }
.why-section .compact { align-items: center; }
.why-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.why-list div { background: var(--light-blue); border: 1px solid var(--line-blue); border-radius: 18px; padding: 18px; font-weight: 600; color: var(--primary-navy); }

.contact-section { padding: 96px 0; }
.contact-grid { display: grid; grid-template-columns: 1fr .72fr; gap: 70px; align-items: center; }
.contact-grid h2 { max-width: 640px; color: var(--white); }
.contact-grid p { margin-top: 20px; color: rgba(255,255,255,.76); font-size: 18px; }
.contact-card { border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.07); border-radius: 28px; padding: 34px; }
.contact-card h3 { color: var(--white); margin-bottom: 22px; }
.contact-card p { color: rgba(255,255,255,.78); margin-top: 14px; font-size: 16px; }
.contact-card a { color: var(--white); font-weight: 600; }

.pilot-form { max-width: 720px; display: grid; gap: 18px; }
.pilot-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pilot-form label { display: grid; gap: 8px; font-weight: 700; color: var(--primary-navy); font-size: 14px; }
.pilot-form input, .pilot-form textarea {
  font-family: inherit; font-size: 16px; color: var(--body-text);
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--white); width: 100%;
}
.pilot-form input:focus, .pilot-form textarea:focus {
  outline: none; border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(63,111,217,.15);
}
.pilot-form textarea { resize: vertical; }
.pilot-form button { margin-top: 6px; justify-self: start; border: 0; cursor: pointer; }
.form-note { max-width: 720px; margin-bottom: 24px; padding: 16px 18px; border-radius: 14px; font-weight: 700; font-size: 15px; }
.form-note.success { background: var(--light-blue); color: var(--primary-navy); border: 1px solid var(--line-blue); }
.form-note.error { background: #FDECEC; color: #9B1C1C; border: 1px solid rgba(155, 28, 28, 0.22); }

.site-footer { background: #0E1A2B; color: rgba(255,255,255,.72); padding: 34px 0; }
.footer-grid { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.footer-grid strong { color: var(--white); }
.footer-grid p { margin-top: 4px; font-size: 14px; }
.footer-grid div:last-child { display: flex; gap: 20px; font-size: 14px; font-weight: 600; color: var(--white); }
.footer-grid a { transition: color .15s var(--ease); }
.footer-grid a:hover { color: #BFD0FA; }

.page-hero { padding: 128px 0 84px; position: relative; overflow: hidden; }
.page-hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 12% 12%, rgba(63,111,217,0.30), transparent 32%),
    radial-gradient(circle at 90% 10%, rgba(234,241,255,0.14), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,0.04) 0 1px, transparent 1px) 0 0/42px 42px;
  pointer-events: none;
}
.page-hero .page-shell { position: relative; }
.service-grid article a { color: var(--primary-blue); font-weight: 700; transition: color .15s var(--ease); }
.split-section.compact > div:last-child p { color: var(--muted-text); font-size: 17px; margin-bottom: 14px; }

@media (max-width: 980px) {
  .mobile-toggle { display: block; }
  .nav-menu { display: none; position: absolute; left: 16px; right: 16px; top: 72px; flex-direction: column; align-items: stretch; gap: 0; background: var(--primary-navy); border: 1px solid rgba(255,255,255,.12); border-radius: 18px; padding: 10px; margin-left: 0; max-height: 80vh; overflow-y: auto; }
  .nav-menu.open { display: flex; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .nav-item { width: 100%; border-bottom: 1px solid rgba(255,255,255,.06); }
  .nav-link { width: 100%; justify-content: space-between; padding: 14px; font-size: 16px; border-radius: 0; }
  .has-mega > .nav-link::after { margin-top: 0; }
  .mega, .nav-item.has-mega:hover > .mega, .nav-item.has-mega:focus-within > .mega, .nav-item.has-mega.open > .mega { position: static; transform: none; width: 100%; left: auto; opacity: 1; visibility: visible; pointer-events: auto; overflow: hidden; transition: max-height .28s var(--ease); }
  .mega { max-height: 0; }
  .nav-item.has-mega.open > .mega { max-height: 640px; }
  .mega::before { display: none; }
  .mega-inner { grid-template-columns: 1fr; background: none; border: 0; box-shadow: none; backdrop-filter: none; padding: 0 6px 14px; gap: 14px; }
  .mega-cols, .mega-cols.one-col { grid-template-columns: 1fr; gap: 14px; }
  .mega-visual { display: none; }
  .mega-col a { padding: 9px 8px; }
  .nav-actions { flex-direction: column; align-items: stretch; gap: 8px; width: 100%; margin-top: 10px; }
  .nav-ghost, .nav-cta { text-align: center; justify-content: center; }
  .hero-grid, .split-section, .use-case-layout, .contact-grid, .strip-grid { grid-template-columns: 1fr; }
  .hero-visual { min-height: 730px; }
  .main-card { left: 0; right: 0; margin: 0 auto; }
  .two-card-grid, .service-grid, .client-grid, .engine-flow, .why-list { grid-template-columns: 1fr 1fr; }
  .sticky-heading { position: static; }
}
@media (max-width: 680px) {
  .page-shell, .nav-shell { width: min(100% - 28px, 1160px); }
  section { padding: 64px 0; }
  .hero { padding: 76px 0 64px; }
  h1 { font-size: clamp(38px, 11vw, 52px); }
  h2 { font-size: clamp(30px, 8.5vw, 44px); }
  .hero-lede { font-size: 18px; margin-top: 20px; }
  .two-card-grid, .service-grid, .client-grid, .engine-flow, .why-list, .use-case-list div { grid-template-columns: 1fr; }
  .problem-card, .solution-card { min-height: 0; padding: 26px; }
  .pilot-form .form-row { grid-template-columns: 1fr; }
  .hero-visual { display: none; }
  .footer-grid { flex-direction: column; align-items: flex-start; }
  .footer-grid div:last-child { flex-wrap: wrap; }
}

/* ===== Demo / book-a-demo page ===== */
.demo-section { padding: 64px 0 88px; overflow-x: clip; }
.demo-layout { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 40px; align-items: center; }
.demo-layout > .demo-main, .demo-layout > .demo-aside { min-width: 0; }
.demo-main h1 { font-size: clamp(40px, 5vw, 60px); margin-top: 14px; }
.demo-lede { color: var(--muted-text); font-size: 19px; margin-top: 18px; max-width: 540px; }
.demo-form { display: grid; gap: 18px; margin-top: 30px; max-width: 620px; }
.demo-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.demo-form > label, .demo-form .form-row > label { display: grid; gap: 8px; font-weight: 700; color: var(--primary-navy); font-size: 15px; }
.demo-form input, .demo-form select, .demo-form textarea {
  font-family: inherit; font-size: 16px; color: var(--body-text);
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); width: 100%;
}
.demo-form select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.demo-form input:focus, .demo-form select:focus, .demo-form textarea:focus {
  outline: none; border-color: var(--primary-blue); box-shadow: 0 0 0 3px rgba(63,111,217,.15);
}
.demo-form textarea { resize: vertical; }
.demo-checks { border: 0; padding: 0; margin: 4px 0; display: grid; gap: 11px; }
.demo-checks legend { font-weight: 700; color: var(--primary-navy); font-size: 15px; padding: 0; margin-bottom: 8px; }
.demo-checks .check { display: flex; align-items: center; gap: 10px; font-weight: 500; color: var(--body-text); font-size: 15.5px; cursor: pointer; }
.demo-checks .check input { width: 18px; height: 18px; accent-color: var(--primary-blue); cursor: pointer; }
.demo-fineprint { color: var(--muted-text); font-size: 13px; margin-top: 2px; }
.demo-form button { justify-self: start; border: 0; cursor: pointer; margin-top: 6px; }
.demo-aside { position: sticky; top: 96px; align-self: center; display: flex; align-items: center; justify-content: center; padding: 0; overflow: visible; }
.da-image {
  width: 122%; max-width: 122%; height: auto; max-height: 760px; object-fit: contain; display: block;
  /* nudge it toward the page edge so the larger graphic fills the right side */
  margin-right: -11%; margin-left: auto;
  -webkit-mask-image: radial-gradient(128% 122% at 52% 47%, #000 56%, rgba(0,0,0,0) 100%);
  mask-image: radial-gradient(128% 122% at 52% 47%, #000 56%, rgba(0,0,0,0) 100%);
}
@media (prefers-reduced-motion: no-preference) {
  .js-anim .da-image {
    opacity: 0;
    transform: translateY(28px) scale(.96);
    filter: blur(8px);
    will-change: opacity, transform, filter;
    animation: demo-fade 1.25s cubic-bezier(0.16, 1, 0.3, 1) .25s forwards;
  }
}
@keyframes demo-fade {
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.demo-aside-inner { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 22px; }
.da-preview { background: var(--white); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); overflow: hidden; }
.da-preview-bar { display: flex; align-items: center; gap: 7px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--background-white); }
.da-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-blue); }
.da-dot:nth-child(1) { background: #E2675F; }
.da-dot:nth-child(2) { background: #E6B23E; }
.da-dot:nth-child(3) { background: #3FB37A; }
.da-preview-title { margin-left: 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .02em; color: var(--muted-text); }
.da-preview-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.da-msg { background: var(--background-white); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.da-msg-response { background: var(--light-blue); border-color: var(--line-blue); }
.da-msg-role { display: block; font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--primary-blue); margin-bottom: 5px; }
.da-msg p { font-size: 13.5px; color: var(--primary-navy); line-height: 1.5; }
.da-criteria { display: flex; flex-wrap: wrap; gap: 7px; }
.da-chip { font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; }
.da-chip-pass { background: rgba(63, 179, 122, 0.12); color: #1E7A4E; }
.da-chip-flag { background: rgba(230, 178, 62, 0.16); color: #946400; }
.da-rating { display: flex; align-items: center; gap: 10px; padding-top: 4px; border-top: 1px dashed var(--line); padding: 12px 2px 2px; }
.da-rating-label { font-size: 12.5px; font-weight: 600; color: var(--body-text); }
.da-stars { margin-left: auto; color: var(--primary-blue); letter-spacing: 2px; font-size: 15px; }
.da-star-empty { color: var(--line-blue); }
.da-rating-val { font-family: var(--font-mono); font-size: 12px; color: var(--muted-text); }
.da-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.da-stats div { background: var(--white); border: 1px solid var(--line-blue); border-radius: 16px; padding: 16px 18px; box-shadow: var(--soft-shadow); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.da-stats div:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.da-stats strong { display: block; font-size: 26px; font-weight: 800; color: var(--primary-navy); line-height: 1.1; letter-spacing: -.03em; }
.da-stats span { font-size: 12.5px; color: var(--muted-text); }

.da-eyebrow { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .18em; font-size: 11px; font-weight: 600; color: var(--primary-blue); margin-bottom: 2px; }
.da-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--muted-text); }
.da-live i { width: 7px; height: 7px; border-radius: 50%; background: #3FB37A; box-shadow: 0 0 0 0 rgba(63,179,122,.5); animation: pulse-dot 2.2s ease-out infinite; }
.da-progress { padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.da-progress-row { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; color: var(--body-text); }
.da-progress-row span:last-child { font-family: var(--font-mono); color: var(--muted-text); }
.da-bar { height: 7px; border-radius: 999px; background: var(--light-blue); overflow: hidden; }
.da-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--primary-blue), #7EA1F2); animation: bar-grow 1.4s var(--ease) .3s both; }
@keyframes bar-grow { from { width: 0 !important; } }

@media (max-width: 980px) {
  .demo-layout { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .demo-aside { position: static; order: 2; }
  /* single-column: keep the graphic centered and contained, no edge bleed */
  .da-image { width: 108%; max-width: 108%; margin: 0 auto; max-height: 520px; }
}
@media (max-width: 680px) {
  .da-image { width: 116%; max-width: 116%; max-height: 420px; }
}
@media (max-width: 680px) {
  .demo-form .form-row { grid-template-columns: 1fr; }
}

/* ===== Fade-up entrance animation ===== */
/* Hidden state is gated on .js-anim (set by an inline head script) so content
   shows normally when JS is off, and never flashes when JS is on.
   Disabled entirely for users who prefer reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .js-anim :is(
    .hero-copy > *, .hero-visual, .page-hero .page-shell > *, .strip-grid > *,
    .split-section > div, .section-heading, .service-grid > article, .engine-flow > article,
    .two-card-grid > *, .why-list > div, .use-case-list > div, .client-grid > article,
    .contact-grid > div, .pilot-form, .secondary-service, .statement-band h2, .statement-band p
  ) {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
  }
  .js-anim .av-in { opacity: 1 !important; transform: none !important; }
}

/* =====================================================================
   MODERNIZATION LAYER — Scale.com / Linear-inspired polish
   Stays within brand palette. Overrides earlier rules where noted.
   ===================================================================== */

/* --- Dark sections: richer gradient + subtle grid + edge glow --- */
.section-dark { position: relative; background: linear-gradient(180deg, #16294a 0%, var(--primary-navy) 60%); }
.hero.section-dark, .page-hero.section-dark { background: radial-gradient(120% 90% at 80% -10%, #1d3760 0%, var(--primary-navy) 55%); }
.section-dark::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px) 0 0 / 100% 56px,
    linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px) 0 0 / 56px 100%;
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 25%, transparent 75%);
  mask-image: radial-gradient(120% 80% at 50% 0%, #000 25%, transparent 75%);
}
.section-dark > .page-shell, .section-dark .page-shell, .hero-grid { position: relative; z-index: 1; }

/* --- Refined eyebrow as a pill chip --- */
.eyebrow:not(.navy) {
  display: inline-block; padding: 7px 14px; border-radius: 999px;
  background: rgba(126,161,242,.1); border: 1px solid rgba(126,161,242,.22);
  font-size: 14px; color: #CDDBFB;
}
.eyebrow.navy {
  display: inline-block; padding: 7px 14px; border-radius: 999px;
  background: rgba(63,111,217,.08); border: 1px solid rgba(63,111,217,.18);
  font-size: 14px;
}

/* --- Buttons: subtle gradient + crisper motion --- */
.button-primary, .nav-cta { background: linear-gradient(135deg, #4A78DD, var(--primary-blue)); }
.button-primary:hover { background: linear-gradient(135deg, #3F6FD9, #2F58B8); }
.button { font-size: 15.5px; }

/* --- Headlines: tighter, premium gradient on hero --- */
.hero h1 {
  background: linear-gradient(180deg, #ffffff 30%, #C8D6F4 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-lede, .page-hero .hero-lede { color: rgba(226,234,248,.82); }

/* --- Cards (light): cleaner surface, lift, top accent --- */
.service-grid article, .client-grid article {
  position: relative; background: var(--white);
  border: 1px solid var(--line); border-radius: 22px;
  box-shadow: 0 1px 2px rgba(19,35,58,.04); overflow: hidden;
}
.service-grid article::before, .client-grid article::before {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--primary-blue), #7EA1F2);
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.service-grid article:hover, .client-grid article:hover {
  transform: translateY(-5px); box-shadow: 0 24px 50px -20px rgba(19,35,58,.28); border-color: var(--line-blue);
}
.service-grid article:hover::before, .client-grid article:hover::before { transform: scaleX(1); }
.section-light .service-grid article, .section-light .client-grid article { background: var(--white); }
.section-white .service-grid article { background: var(--background-white); }
.service-grid article h3, .client-grid article h3 { letter-spacing: -.03em; }
.service-grid article a { display: inline-flex; align-items: center; gap: 5px; margin-top: 14px; }
.service-grid article a:hover { gap: 9px; color: #2F58B8; }

/* --- Problem / solution cards: glassy gradient --- */
.problem-card { background: linear-gradient(165deg, #FBF8F2, #F2ECE1); }
.solution-card { background: linear-gradient(165deg, #F3F7FF, #E2ECFF); }
.problem-card, .solution-card { border-radius: 26px; box-shadow: 0 18px 44px -26px rgba(19,35,58,.28); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.problem-card:hover, .solution-card:hover { transform: translateY(-4px); box-shadow: 0 28px 56px -26px rgba(19,35,58,.32); }
.card-label { padding: 5px 11px; border-radius: 999px; background: rgba(63,111,217,.1); border: 1px solid rgba(63,111,217,.2); margin-bottom: 24px; }
.problem-card .card-label { background: rgba(150,124,78,.12); border-color: rgba(150,124,78,.22); color: #8A6D3B; }

/* --- Engine flow (Intellego) on dark: numbered glass cards --- */
.engine-flow article {
  position: relative; padding: 30px; border-radius: 22px;
  background: linear-gradient(165deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.1); overflow: hidden;
  transition: transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.engine-flow article:hover { transform: translateY(-5px); border-color: rgba(126,161,242,.4); background: linear-gradient(165deg, rgba(63,111,217,.16), rgba(255,255,255,.03)); }
.engine-flow span {
  display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 13px;
  background: rgba(63,111,217,.18); border: 1px solid rgba(126,161,242,.3);
  color: #BFD0FA; font-size: 14px; letter-spacing: 0; margin-bottom: 4px;
}

/* --- Use-case list: card rows with hover --- */
.use-case-list { gap: 0; }
.use-case-list div {
  align-items: center; padding: 22px 18px; border: 1px solid transparent; border-bottom: 1px solid var(--line);
  border-radius: 16px; transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.use-case-list div:hover { background: var(--light-blue); border-color: var(--line-blue); transform: translateX(4px); }
.use-case-list strong { letter-spacing: -.02em; }

/* --- Why-list & pilot tiles: gradient surface --- */
.why-list div {
  position: relative; padding: 20px 20px 20px 48px; border-radius: 16px;
  background: var(--white); border: 1px solid var(--line); color: var(--primary-navy);
  box-shadow: 0 1px 2px rgba(19,35,58,.04); transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.why-list div::before {
  content: ""; position: absolute; left: 18px; top: 50%; width: 16px; height: 16px; margin-top: -8px;
  border-radius: 5px; background: rgba(63,111,217,.14);
  box-shadow: inset 0 0 0 1px rgba(63,111,217,.3);
}
.why-list div::after {
  content: ""; position: absolute; left: 22px; top: 50%; width: 8px; height: 5px; margin-top: -3px;
  border-left: 2px solid var(--primary-blue); border-bottom: 2px solid var(--primary-blue);
  transform: rotate(-45deg);
}
.why-list div:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(19,35,58,.3); border-color: var(--line-blue); }

/* --- Statement band: centered, decorative --- */
.statement-band { background: radial-gradient(80% 120% at 50% 0%, #F2F7FF, var(--light-blue)); }
.statement-band .page-shell { text-align: center; }
.statement-band h2, .statement-band p { margin-left: auto; margin-right: auto; }

/* --- Secondary service: glass note --- */
.secondary-service { background: linear-gradient(135deg, #F3F7FF, #E8F0FF); border-radius: 18px; }

/* --- Intro strip --- */
.intro-strip .strip-grid { font-size: 18px; letter-spacing: -.01em; }
.intro-strip { background: linear-gradient(180deg, #FBF8F2, var(--warm-neutral)); }

/* --- Contact card glass --- */
.contact-card { background: linear-gradient(165deg, rgba(255,255,255,.1), rgba(255,255,255,.04)); border-radius: 24px; backdrop-filter: blur(14px); box-shadow: 0 30px 70px -34px rgba(0,0,0,.6); }

/* --- Forms: softer, premium --- */
.pilot-form input, .pilot-form textarea, .demo-form input, .demo-form select, .demo-form textarea { border-radius: 13px; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.demo-aside { background: none; border: 0; border-radius: 0; }

/* --- Mega menu: lift links into chips --- */
.mega-col a { border-radius: 9px; padding: 8px 10px; }
.mega-col a:hover { background: rgba(255,255,255,.06); transform: translateX(3px); }

/* --- Footer: top divider glow --- */
.site-footer { position: relative; }
.site-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(126,161,242,.4), transparent); }

/* --- Scroll progress bar --- */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--primary-blue), #7EA1F2); z-index: 1200; box-shadow: 0 0 12px rgba(63,111,217,.5); }

@media (max-width: 980px) {
  .hero-visual { min-height: 480px; }
}
@media (max-width: 680px) {
  .hero-visual { display: flex; min-height: 0; margin-top: 36px; }
  .console-card { width: 100%; }
  .float-chip { display: none; }
  .da-stats { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .orb, .console-live i, .float-chip, .spark-line, .spark-area, .spark-dot, .da-bar i, .da-live i { animation: none !important; }
  .spark-line { stroke-dashoffset: 0; } .spark-area, .spark-dot { opacity: 1; }
}