:root {
  --brand-blue: #0b439d;
  --brand-cyan: #54c7e7;
  --brand-orange: #f18301;
  --ink: #0b439d;
  --ink-soft: #174779;
  --paper: #ffffff;
  --paper-deep: #edf9fc;
  --muted: #41617f;
  --blue: #0b439d;
  --blue-light: #54c7e7;
  --line: #c9e9f2;
  --line-dark: #b8dce8;
}

body { background: #fff; color: var(--brand-blue); }
.site-header { background: rgba(255,255,255,.96); color: var(--brand-blue); border-bottom: 1px solid #d7eaf1; backdrop-filter: blur(12px); }
.brand { color: var(--brand-blue); gap: 9px; }
.brand-logo { width: 43px; height: 43px; object-fit: contain; flex: none; }
.brand-name { font-size: 19px; letter-spacing: -.85px; font-weight: 800; }
.brand-name>span { font-weight: 600; }
.brand-name small { color: #3269a4; letter-spacing: 2.7px; }
.desktop-nav a { color: #315d91; }
.desktop-nav a:hover,.desktop-nav a:focus-visible { color: var(--brand-blue); }
.language-switch { color: var(--brand-blue); border-left-color: #c4d7e7; }
.header-contact { color: var(--brand-blue); border-color: #bad5e5; }
.header-contact:hover { color: #111; background: var(--brand-orange); border-color: var(--brand-orange); }
.menu-toggle span { background: var(--brand-blue); }
.mobile-nav:not([hidden]) { background: #fff; color: var(--brand-blue); border-bottom: 1px solid #c5e5ee; box-shadow: 0 16px 30px rgba(11,67,157,.12); }
.mobile-nav a { border-bottom-color: #d8edf3; }
.hero { background: #fff; color: var(--brand-blue); }
.hero::before { width: 72vw; height: 72vw; left: -30vw; top: -35vw; max-width: none; max-height: none; background: radial-gradient(circle,rgba(84,199,231,.18),transparent 65%); }
.hero-visual { margin: 26px 0 60px; border: 1px solid rgba(11,67,157,.15); border-radius: 13px; box-shadow: 0 24px 60px rgba(11,67,157,.12); }
.hero-visual::after { background: linear-gradient(0deg,rgba(11,67,157,.35),transparent 25%); }
.visual-label { color: #fff; }
.label-dot { background: var(--brand-orange); }
.eyebrow { color: var(--brand-blue); }
.hero h1,.intro h2,.examples h2,.brands h2,.contact h2 { color: var(--brand-blue); }
.hero h1 em,.intro h2 em,.examples h2 em,.brands h2 em,.contact h2 em { color: var(--brand-blue); }
.hero h1 em { text-decoration: underline; text-decoration-color: var(--brand-orange); text-decoration-thickness: 4px; text-underline-offset: 12px; }
.hero-lead,.intro-detail>p,.brands-content>p,.examples-heading p,.contact-inner>p:not(.eyebrow) { color: #47627c; }
.button-primary { background: var(--brand-orange); color: #101820; box-shadow: 0 10px 22px rgba(241,131,1,.18); }
.button-primary:hover,.button-light:hover { background: #ff9e2b; }
.text-link { color: var(--brand-blue); border-bottom-color: #90b3ce; }
.text-link span { color: var(--brand-orange); }
.hero-footnote,.hero-bottom { color: #55718f; }
.sparkle { color: var(--brand-orange); }
.intro { background: #fff; border-top: 1px solid #dceef3; }
.section-number,.small-caps { color: var(--brand-blue); }
.section-number::first-letter { color: var(--brand-orange); }
.section-rule,.micro-divider,.intro-points>div,.benefit-list>div { border-color: #c9e3eb; background-color: transparent; }
.section-rule,.micro-divider { background: #c9e3eb; }
.intro-points span,.benefit-number { color: var(--brand-orange); }
.intro-points p,.benefit-list>div { color: #224f7f; }
.examples { background: linear-gradient(145deg,#f7fdff,#e9f8fc 72%,#f7fdff); border-top: 1px solid #d3ebf3; border-bottom: 1px solid #d3ebf3; }
.examples-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
.examples-heading { margin-bottom: 40px; }
.example-card { background: #fff; border: 1px solid #c4e4ec; border-radius: 16px; padding: clamp(18px,2.5vw,34px); box-shadow: 0 16px 40px rgba(11,67,157,.06); }
.example-caption { padding: 0 0 24px; }
.card-kicker { color: #2e689d; }
.example-caption h3 { color: var(--brand-blue); font-size: clamp(24px,2.3vw,34px); margin-top: 9px; }
.example-flow { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(10px,1.6vw,24px); align-items: start; }
.flow-tile { min-width: 0; }
.flow-label { display: block; padding: 11px 2px; color: var(--brand-blue); font-size: 10px; font-weight: 800; letter-spacing: .14em; border-top: 2px solid var(--brand-cyan); }
.flow-output .flow-label { border-color: var(--brand-orange); }
.flow-photo,.flow-product-image { aspect-ratio: 3/4; border-radius: 8px; overflow: hidden; background: #e8f6fa; border: 1px solid #d5e7eb; }
.flow-photo img { display: block; width: 200%; max-width: none; height: 100%; object-fit: fill; }
.flow-output .flow-photo img { transform: translateX(-50%); }
.example-card:hover img { transform: none; }
.example-card:hover .flow-output .flow-photo img { transform: translateX(-50%); }
.flow-product-image { display: grid; place-items: center; background: radial-gradient(circle at 60% 35%,#ffffff,#d9f2f9 80%); }
.flow-product-image img { width: 88%; height: 88%; object-fit: contain; }
.examples-note { color: #55718b; font-size: 12px; }
.brands { background: #fff; }
.contact { background: linear-gradient(115deg,#e9faff,#c9f0f8 75%,#e8f9fc); color: var(--brand-blue); border-top: 1px solid #bce6f0; }
.contact::before { background: linear-gradient(90deg,rgba(255,255,255,.68),rgba(255,255,255,.18)); }
.contact-orb { width: 620px; height: 620px; right: -180px; top: -100px; background: radial-gradient(circle at 37% 38%,rgba(255,255,255,.8),rgba(84,199,231,.42) 35%,rgba(11,67,157,.15) 65%,transparent 73%); box-shadow: none; }
.contact .eyebrow { color: var(--brand-blue); }
.button-light { color: #121820; background: var(--brand-orange); box-shadow: 0 10px 22px rgba(241,131,1,.15); }
.contact-address { color: var(--brand-blue); border-bottom-color: #76accb; }
.contact-address:hover { color: #071d3c; }
.site-footer { background: #fff; color: var(--brand-blue); border-top: 1px solid #cde7ef; }
.footer-right { color: #41617f; }
.footer-right a:hover { color: var(--brand-blue); }
:focus-visible { outline-color: var(--brand-orange); }

@media (max-width: 830px) {
  .hero-visual { height: 550px; margin: 0 0 12px; }
  .hero { padding-bottom: 62px; }
}
@media (max-width: 600px) {
  .brand-logo { width: 38px; height: 38px; }
  .brand-name { font-size: 17px; letter-spacing: -.8px; }
  .brand-name small { font-size: 7px; letter-spacing: 2.3px; }
  .hero h1 em { text-decoration-thickness: 3px; text-underline-offset: 7px; }
  .hero-visual { height: 420px; margin: 0 0 12px; }
  .examples-grid { gap: 22px; }
  .example-card { padding: 18px; }
  .example-flow { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .flow-output { grid-column: 1 / -1; }
  .flow-output .flow-photo { max-height: 460px; }
  .flow-label { font-size: 9px; line-height: 1.3; min-height: 36px; }
  .contact { min-height: 500px; }
  .contact-orb { right: -410px; }
}
@media (max-width: 400px) {
  .example-flow { grid-template-columns: 1fr; }
  .flow-output { grid-column: auto; }
  .flow-photo,.flow-product-image { max-height: 430px; }
}