/*
  --accent: primary accent
  --accent-2: secondary accent
  --on-accent: text/icons on the accent colour
  --on-accent-muted: softer text on the accent colour
  --cta-btn-bg: dark button on the accent block
  --cta-btn-text: label of that button
  --bg: page background
  --bg-alt: alternate section background
  --panel: card / panel background
  --panel-raised: badge, mock window
  --panel-button: secondary button
  --text: main text
*/

/*  Palette: Deep Navy (dark) */
/* :root{
  --accent:#22D3C5;
  --accent-2:#FB923C; 
  --on-accent:#0A1A33;  
  --on-accent-muted:#0A1A33;  
  --cta-btn-bg:#0A1A33;  
  --cta-btn-text:#F2F7FC; 
  --bg:#0A1A33; 
  --bg-alt:#0D2140; 
  --panel:#12284A;  
  --panel-raised:#0E2240; 
  --panel-button:#132A4C;  
  --text:#F2F7FC; 
  --text-hover:#FFFFFF;
  --text-soft:#E4ECF5;
  --text-label:#D3DFEC;
  --text-secondary:#B6C6DA;
  --text-muted:#9BB0C9;
  --text-dim:#7891B0;
  --border:#1F3A5E;
  --border-subtle:#17304F;
  --border-faint:#1A3354;
  --border-strong:#27466D;
  --border-step:#33557E;
  --border-bar:#44658F;
  --shadow:rgba(0,0,0,0.5);
} */

/* Palette: Light (blue). */
:root{
  --accent:#0B6FD1;
  --accent-2:#C2410C;
  --on-accent:#FFFFFF;
  --on-accent-muted:#E6F1FC;
  --cta-btn-bg:#02284C;
  --cta-btn-text:#FFFFFF;
  --bg:#F2F6FA;
  --bg-alt:#E6EDF4;
  --panel:#FAFCFE;
  --panel-raised:#FAFCFE;
  --panel-button:#FAFCFE;
  --text:#02284C;
  --text-hover:#011A33;
  --button-hover: #094A9F;
  --text-soft:#02284C;
  --text-label:#1B3A5C;
  --text-secondary:#33506E;
  --text-muted:#4A6280;
  --text-dim:#5E7590;
  --border:#D7E1EB;
  --border-subtle:#D7E1EB;
  --border-faint:#D7E1EB;
  --border-strong:#C9D6E3;
  --border-step:#B4C4D5;
  --border-bar:#8095AE;
  --shadow:rgba(2,40,76,0.10);
}

html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--bg)}
*,*::before,*::after{box-sizing:border-box}
ul,ol{list-style:none;margin:0;padding:0}
address{font-style:normal}
.eyebrow,.cta-note,.problem-quote{margin:0}
a{color:var(--text)}a:hover{color:var(--text-hover)}
.page{font-family: Geist, Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;color: var(--text);background: var(--bg);font-size: 17px;line-height: 1.6;-webkit-font-smoothing: antialiased}
.site-header{position: sticky;top: 0;z-index: 10;width: 100%;background: color-mix(in srgb, var(--panel) 82%, transparent);backdrop-filter: blur(14px);border-bottom: 1px solid var(--border)}
.nav{max-width: 1120px;margin: 0 auto;padding: 12px 24px;display: flex;align-items: center;justify-content: space-between;gap: 16px}
.brand{display: flex;align-items: center;gap: 10px;text-decoration: none}
.brand-mark{fill:var(--accent)}.brand-glyph{stroke:var(--on-accent)}
.brand-logo{height: 40px;width: auto;display: block}
.brand-name{font-weight: 600;font-size: 18px;letter-spacing: -0.03em}
.nav-links{display: flex;align-items: center;gap: 4px;font-size: 16px;font-weight: 500}
.nav-actions{display: flex;align-items: center;gap: 4px}
.nav-link{color: var(--text-secondary);text-decoration: none;padding: 10px 14px;border-radius: 999px}
.btn-nav{background: var(--text);color: var(--bg);text-decoration: none;font-size: 14px;font-weight: 600;padding: 11px 18px;border-radius: 999px}
.hero{border-bottom: 1px solid var(--border-subtle)}
.hero-inner{max-width: 1120px;margin: 0 auto;padding: 96px 24px 0;display: flex;flex-direction: column;align-items: center;text-align: center;gap: 28px}
.badge{display: inline-flex;align-items: center;gap: 10px;padding: 6px 14px 6px 8px;border: 1px solid var(--border-strong);border-radius: 999px;background: var(--panel-raised);font-size: 14px;color: var(--text-secondary)}
.badge-tag{background: var(--accent);color: var(--on-accent);font-family: 'Geist Mono', ui-monospace, monospace;font-size: 12px;font-weight: 500;padding: 3px 8px;border-radius: 999px}
.hero-title{margin: 0;font-weight: 600;font-size: clamp(2.75rem, 7vw, 5.5rem);line-height: 0.98;letter-spacing: -0.05em;max-width: 13ch}
.hero-lede{margin: 0;font-size: clamp(1.05rem, 1.6vw, 1.25rem);color: var(--text-muted);max-width: 38em;line-height: 1.55}
.hero-actions{display: flex;flex-wrap: wrap;justify-content: center;gap: 12px}
.hero-alt{margin: -12px 0 0;font-size: 0.95rem;color: var(--text-muted);white-space: nowrap}
.hero-alt a{color: var(--accent); text-decoration: none;}
.hero-alt a:hover{color: var(--button-hover); text-decoration: underline; text-underline-offset: 3px}
.btn-primary{background: var(--accent);color: var(--on-accent);text-decoration: none;font-weight: 600;padding: 14px 24px;border-radius: 999px}
.btn-primary:hover{background-color:var(--button-hover);color: var(--on-accent);}
.btn-secondary{background: var(--panel-button);color: var(--text);text-decoration: none;font-weight: 500;padding: 14px 24px;border-radius: 999px;border: 1px solid var(--border-strong)}
.btn-secondary:hover,.btn-ghost:hover{background-color:var(--bg-alt);border-color:var(--accent);color:var(--button-hover)}
.mock{width: 100%;margin-top:30px;background: var(--panel-raised);border: 1px solid var(--border-strong);border-bottom: none;border-radius: 20px 20px 0 0;padding: 14px 14px 0;box-shadow: 0 -20px 80px var(--shadow);text-align: left}
.mock-bar{display: flex;align-items: center;gap: 8px;padding: 2px 6px 14px}
.mock-dot{width: 10px;height: 10px;border-radius: 50%;background: var(--border-strong);display: inline-block}
.mock-caption{margin-left: 12px;font-family: 'Geist Mono', ui-monospace, monospace;font-size: 12px;color: var(--text-dim)}
.mock-body{background: var(--bg-alt);border: 1px solid var(--border-faint);border-bottom: none;border-radius: 12px 12px 0 0;padding: 28px;display: grid;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));gap: 28px}
.mock-bars{display: flex;flex-direction: column;gap: 18px}
.legend{display: flex;gap: 18px;font-size: 13px;color: var(--text-muted)}
.legend-item{display: flex;align-items: center;gap: 6px}
.swatch-outline{width: 12px;height: 8px;border: 1.5px solid var(--text-dim);border-radius: 2px;display: inline-block}
.swatch-fill{width: 12px;height: 8px;background: var(--accent);border-radius: 2px;display: inline-block}
.bar-group{display: flex;flex-direction: column;gap: 6px}
.bar-label{font-size: 14px;color: var(--text-label)}
.bar-stated-88{height: 8px;width: 88%;border: 1.5px solid var(--border-bar);border-radius: 4px;box-sizing: border-box}
.bar-actual-46{height: 8px;width: 46%;background: var(--accent);border-radius: 4px}
.bar-stated-70{height: 8px;width: 70%;border: 1.5px solid var(--border-bar);border-radius: 4px;box-sizing: border-box}
.bar-actual-64{height: 8px;width: 64%;background: var(--accent);border-radius: 4px}
.bar-stated-52{height: 8px;width: 52%;border: 1.5px solid var(--border-bar);border-radius: 4px;box-sizing: border-box}
.bar-actual-18{height: 8px;width: 18%;background: var(--accent);border-radius: 4px}
.bar-stated-20{height: 8px;width: 20%;border: 1.5px solid var(--border-bar);border-radius: 4px;box-sizing: border-box}
.bar-actual-72{height: 8px;width: 72%;background: var(--accent-2);border-radius: 4px}
.mock-cards{display: flex;flex-direction: column;gap: 12px}
.mock-card{background: var(--panel);border: 1px solid var(--border);border-radius: 12px;padding: 18px;display: flex;flex-direction: column;gap: 6px}
.mock-tag-warn{font-family: 'Geist Mono', ui-monospace, monospace;font-size: 12px;color: var(--accent-2)}
.mock-text{font-size: 15px;color: var(--text-soft)}
.mock-tag-ok{font-family: 'Geist Mono', ui-monospace, monospace;font-size: 12px;color: var(--accent)}
.mock-tag-muted{font-family: 'Geist Mono', ui-monospace, monospace;font-size: 12px;color: var(--text-muted)}
.band{border-bottom: 1px solid var(--border-subtle)}
.band-inner{max-width: 1120px;margin: 0 auto;padding: 40px 24px;display: flex;flex-wrap: wrap;gap: 20px 40px;align-items: center;justify-content: space-between}
.band-text{margin: 0;flex: 1 1 480px;font-size: 18px;color: var(--text-secondary)}
.text-strong{color: var(--text)}
.chips{display: flex;flex-wrap: wrap;gap: 8px}
.chip{font-family: 'Geist Mono', ui-monospace, monospace;font-size: 13px;padding: 7px 12px;background: var(--panel);border: 1px solid var(--border);border-radius: 999px;color: var(--text-secondary)}
.section-problems{max-width: 1120px;margin: 0 auto;padding: 120px 24px 40px;display: flex;flex-direction: column;gap: 48px}
.section-head{display: flex;flex-direction: column;gap: 14px;max-width: 720px}
.eyebrow{color: var(--accent);font-weight:600;}
.section-title{margin: 0;font-weight: 600;font-size: clamp(2rem, 4vw, 3.25rem);line-height: 1.05;letter-spacing: -0.04em}
.problems-grid{display: grid;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));gap: 20px}
.problem{background: var(--panel);border: 1px solid var(--border);border-radius: 20px;padding: 32px;display: flex;flex-direction: column;gap: 14px}
.problem-quote{font-size: 22px;font-weight: 600;letter-spacing: -0.02em;line-height: 1.25}
.muted{margin: 0;color: var(--text-muted)}
.section-services{max-width: 1120px;margin: 0 auto;padding: 80px 24px 120px;display: flex;flex-direction: column;gap: 48px}
.services-head{display: flex;flex-wrap: wrap;gap: 16px 48px;justify-content: space-between;align-items: flex-end}
.services-title-wrap{display: flex;flex-direction: column;gap: 14px;max-width: 640px}
.services-intro{margin: 0;max-width: 340px;color: var(--text-muted)}
.bento{display: grid;grid-template-columns: repeat(6, minmax(0, 1fr));gap: 16px}
.card-feature{grid-column: span 4;background: var(--panel);border: 1px solid var(--border);border-radius: 20px;padding: 36px;display: flex;flex-direction: column;justify-content: space-between;gap: 40px;min-height: 280px}
.card-meta-row{display: flex;justify-content: space-between;gap: 16px;flex-wrap: wrap}
.pill-accent{font-family: 'Geist Mono', ui-monospace, monospace;font-size: 12px;color: var(--on-accent);background: var(--accent);padding: 5px 10px;border-radius: 999px}
.meta{font-family: 'Geist Mono', ui-monospace, monospace;font-size: 13px;color: var(--text-muted)}
.feature-title{margin: 0;font-size: clamp(1.6rem, 2.6vw, 2.25rem);font-weight: 600;letter-spacing: -0.03em;line-height: 1.1}
.feature-text{margin: 0;color: var(--text-muted);max-width: 34em}
.card{grid-column: span 2;background: var(--panel);border: 1px solid var(--border);border-radius: 20px;padding: 32px;display: flex;flex-direction: column;justify-content: space-between;gap: 32px;min-height: 280px}
.card-body{display: flex;flex-direction: column;gap: 10px}
.card-title{margin: 0;font-size: 22px;font-weight: 600;letter-spacing: -0.02em;line-height: 1.2}
.card-text{margin: 0;color: var(--text-muted);font-size: 16px}
.card-wide{grid-column: span 4;background: var(--panel);border: 1px solid var(--border);border-radius: 20px;padding: 32px;display: flex;flex-wrap: wrap;gap: 32px;align-items: stretch;min-height: 280px}
.card-col{flex: 1 1 280px;min-width: 0;display: flex;flex-direction: column;justify-content: space-between;gap: 32px}
.terminal{flex: 1 1 260px;min-width: 0;background: var(--bg);border: 1px solid var(--border);border-radius: 12px;padding: 18px;font-family: 'Geist Mono', ui-monospace, monospace;font-size: 13px;line-height: 1.9;color: var(--text-muted)}
.term-prompt{color: var(--text-dim)}
.term-ok{color: var(--accent)}
.term-final{color: var(--text-soft)}
.section-approach{border-top: 1px solid var(--border-subtle);border-bottom: 1px solid var(--border-subtle);background: var(--bg-alt)}
.section-inner{max-width: 1120px;margin: 0 auto;padding: 120px 24px;display: flex;flex-direction: column;gap: 56px}
.steps{display: grid;grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));gap: 40px}
.step{display: flex;flex-direction: column;gap: 14px}
.step-head{display: flex;align-items: center;gap: 12px}
.step-num-active{width: 36px;height: 36px;border-radius: 50%;background: var(--accent);color: var(--on-accent);font-family: 'Geist Mono', ui-monospace, monospace;font-size: 14px;font-weight: 500;display: flex;align-items: center;justify-content: center}
.step-line{flex: 1;height: 1px;background: var(--border-strong)}
.step-title{margin: 0;font-size: 22px;font-weight: 600;letter-spacing: -0.02em}
.step-num{width: 36px;height: 36px;border-radius: 50%;border: 1px solid var(--border-step);color: var(--text);font-family: 'Geist Mono', ui-monospace, monospace;font-size: 14px;display: flex;align-items: center;justify-content: center;box-sizing: border-box}
.section-products{max-width: 1120px;margin: 0 auto;padding: 120px 24px;display: flex;flex-direction: column;gap: 48px}
.section-lede{margin: 0;color: var(--text-muted);font-size: 18px}
.product{background: var(--panel);border: 1px solid var(--border);border-radius: 24px;padding: 12px;display: flex;flex-wrap: wrap;gap: 12px}
.product-info{flex: 1 1 400px;min-width: 0;padding: 36px;display: flex;flex-direction: column;justify-content: space-between;gap: 32px}
.product-text{display: flex;flex-direction: column;gap: 16px}
.tag{font-family: 'Geist Mono', ui-monospace, monospace;font-size: 12px;padding: 5px 10px;border: 1px solid var(--border-strong);border-radius: 999px;color: var(--text-secondary)}
.product-title{margin: 0;font-size: clamp(1.9rem, 3vw, 2.5rem);font-weight: 600;letter-spacing: -0.04em;line-height: 1.05}
.product-actions{display: flex;flex-wrap: wrap;gap: 12px}
.btn-product{background: var(--accent);color: var(--on-accent);text-decoration: none;font-weight: 600;padding: 13px 22px;border-radius: 999px}
.btn-product:hover{background-color:var(--button-hover); color: var(--on-accent)}
.btn-ghost{color: var(--text);text-decoration: none;font-weight: 500;padding: 13px 22px;border-radius: 999px;border: 1px solid var(--border-strong)}
.screenshot{flex: 1 1 400px;min-width: 0;min-height: 340px;background: var(--bg);border: 1px solid var(--border);border-radius: 16px;display: flex;align-items: center;justify-content: center;color: var(--text-dim);font-family: 'Geist Mono', ui-monospace, monospace;font-size: 13px;padding: 24px}
.section-work{border-top: 1px solid var(--border-subtle);background: var(--bg-alt)}
.work-grid{display: grid;grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));gap: 16px}
.case{background: var(--panel);border: 1px solid var(--border);border-radius: 20px;padding: 32px;display: flex;flex-direction: column;gap: 20px}
.case-title{margin: 0;font-size: 24px;font-weight: 600;letter-spacing: -0.02em;line-height: 1.25}
.case-details{display: flex;flex-direction: column;gap: 10px;padding-top: 16px;border-top: 1px solid var(--border);font-size: 16px}
.quote{margin: 0;padding: 40px;background: var(--panel);border: 1px solid var(--border);border-radius: 20px;display: flex;flex-direction: column;gap: 18px}
.quote-text{margin: 0;font-size: clamp(1.4rem, 2.4vw, 2rem);line-height: 1.3;font-weight: 500;letter-spacing: -0.03em;max-width: 30em}
.quote-by{font-size: 15px;color: var(--text-muted)}
.section-contact{padding: 40px 20px 120px;}
.cta{max-width: 1120px;margin: 0 auto;background: var(--accent);color: var(--on-accent);border-radius: 28px;padding: clamp(40px, 6vw, 80px);display: flex;flex-wrap: wrap;gap: 40px;align-items: flex-end;justify-content: space-between}
.cta-text{flex: 1 1 520px;min-width: 0;display: flex;flex-direction: column;gap: 18px}
.cta-title{margin: 0;font-weight: 600;font-size: clamp(2.25rem, 5vw, 4rem);line-height: 1;letter-spacing: -0.05em}
.cta-lede{margin: 0;font-size: 18px;color: var(--on-accent-muted);max-width: 34em}
.cta-actions{flex: 0 1 320px;display: flex;flex-direction: column;gap: 12px}
.cta-alt{margin: 0;display: flex;justify-content: center;align-items: center;gap: 6px;white-space: nowrap}
.btn-dark{background: var(--cta-btn-bg);color: var(--cta-btn-text);text-decoration: none;font-weight: 600;padding: 16px 24px;border-radius: 999px;text-align: center}
.btn-dark:hover{background-color:var(--text-hover);color:var(--cta-btn-text)}
.btn-nav:hover{background-color:var(--text-hover);color:var(--bg)}
.cta-email{color: var(--cta-btn-bg);font-weight: 500;text-align: center;padding: 10px 0;text-decoration: none;}
.cta-email:hover{color: var(--text-hover);text-decoration: underline;text-underline-offset: 3px}
.cta-note{font-size: 14px;color: var(--on-accent-muted);text-align: center}
.site-footer{border-top: 1px solid var(--border-subtle)}
.footer-inner{max-width: 1120px;margin: 0 auto;padding: 40px 24px;display: flex;flex-wrap: wrap;gap: 24px 48px;justify-content: space-between;align-items: flex-start;font-size: 14px;color: var(--text-muted)}
.footer-brand{font-weight: 600;font-size: 17px;letter-spacing: -0.03em;color: var(--text)}
.footer-links{display: flex;flex-wrap: wrap;gap: 8px 24px}
.footer-link{color: var(--text-secondary);text-decoration: none;padding: 6px 0}
@media (max-width: 860px){.bento{grid-template-columns:1fr !important}.bento > *{grid-column:auto !important}.nav-links{display:none !important}}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

/* How we work: step numbers in logo blues (light → deep) */
.step-num-active,.step-num{border:0;color:#FFFFFF}
.step:nth-child(1) .step-num-active{background:#2A93E8}
.step:nth-child(2) .step-num{background:#0B6FD1}
.step:nth-child(3) .step-num{background:#0A4A9E}