/* Ordinafix brand palette
   Navy: #0D1B2A
   Electric blue: #2563EB
   Slate: #64748B
   Light gray: #E5E7EB
   White: #FFFFFF
*/
:root {
  --navy:#0D1B2A;
  --blue:#2563EB;
  --blue-dark:#1D4ED8;
  --slate:#64748B;
  --ink:#172033;
  --muted:#536174;
  --line:#E5E7EB;
  --soft:#F5F7FA;
  --white:#FFFFFF;
  --shadow:0 18px 50px rgba(13,27,42,.10);
  --radius:22px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
}
img { max-width:100%; height:auto; display:block; }
a { color:inherit; }
.container { width:min(1120px, calc(100% - 40px)); margin-inline:auto; }
.skip-link { position:absolute; left:-999px; top:10px; z-index:1000; background:var(--white); padding:10px 14px; }
.skip-link:focus { left:10px; }
.site-header {
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.94);
  border-bottom:1px solid rgba(229,231,235,.9);
  backdrop-filter:blur(14px);
}
.header-inner { min-height:82px; display:flex; align-items:center; gap:30px; }
.brand { margin-right:auto; }
.brand img { width:255px; }
nav { display:flex; gap:24px; }
nav a { text-decoration:none; color:var(--muted); font-weight:700; font-size:.95rem; }
nav a:hover { color:var(--blue); }
.header-call {
  text-decoration:none;
  background:var(--navy); color:var(--white);
  padding:11px 18px; border-radius:999px; font-weight:800;
}
.hero {
  overflow:hidden;
  background:
    radial-gradient(circle at 90% 10%, rgba(37,99,235,.22), transparent 28%),
    linear-gradient(145deg, #F8FAFC 0%, #FFFFFF 58%);
  padding:92px 0 78px;
}
.hero-grid { display:grid; grid-template-columns:1.2fr .8fr; align-items:center; gap:68px; }
.eyebrow {
  margin:0 0 12px;
  text-transform:uppercase; letter-spacing:.16em;
  font-size:.77rem; font-weight:900; color:var(--blue);
}
h1,h2,h3 { margin-top:0; color:var(--navy); line-height:1.12; }
h1 { margin-bottom:22px; font-size:clamp(2.75rem, 6vw, 5.3rem); letter-spacing:-.055em; max-width:760px; }
h2 { margin-bottom:16px; font-size:clamp(2rem, 4vw, 3.35rem); letter-spacing:-.04em; }
h3 { margin-bottom:10px; font-size:1.2rem; }
.hero-lead { max-width:680px; font-size:1.18rem; color:var(--muted); }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin:30px 0 26px; }
.button {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:52px; padding:0 22px; border-radius:12px;
  text-decoration:none; font-weight:850; transition:.2s ease;
}
.button-primary { color:var(--white); background:var(--blue); box-shadow:0 12px 28px rgba(37,99,235,.23); }
.button-primary:hover { background:var(--blue-dark); transform:translateY(-2px); }
.button-secondary { color:var(--navy); background:var(--white); border:1px solid var(--line); }
.button-secondary:hover { border-color:var(--blue); color:var(--blue); transform:translateY(-2px); }
.trust-list { display:flex; flex-wrap:wrap; gap:18px; padding:0; margin:0; list-style:none; color:var(--muted); font-size:.93rem; font-weight:700; }
.trust-list li::before { content:"✓"; color:var(--blue); margin-right:8px; }
.hero-card {
  position:relative; min-height:440px; display:grid; place-items:center;
  border:1px solid rgba(229,231,235,.8); border-radius:38px;
  background:linear-gradient(145deg,#FFFFFF,#F0F5FF);
  box-shadow:var(--shadow);
}
.hero-card img { width:min(70%, 310px); filter:drop-shadow(0 18px 22px rgba(13,27,42,.12)); }
.hero-card span {
  position:absolute; padding:9px 14px; border-radius:999px;
  background:var(--white); box-shadow:0 10px 24px rgba(13,27,42,.1);
  font-size:.85rem; font-weight:850; color:var(--navy);
}
.hero-card span:nth-of-type(1) { top:62px; right:34px; }
.hero-card span:nth-of-type(2) { bottom:74px; left:28px; }
.hero-card span:nth-of-type(3) { bottom:42px; right:42px; }
.section { padding:96px 0; }
.section-soft { background:var(--soft); }
.section-heading { max-width:720px; margin-bottom:44px; }
.section-heading > p:last-child, .split > div > p:last-child { color:var(--muted); font-size:1.06rem; }
.service-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.service-card {
  padding:28px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--white); transition:.2s ease;
}
.service-card:hover { transform:translateY(-5px); border-color:#BFDBFE; box-shadow:0 18px 42px rgba(13,27,42,.08); }
.service-card p { margin-bottom:0; color:var(--muted); }
.service-icon {
  width:48px; height:48px; display:grid; place-items:center; margin-bottom:22px;
  border-radius:14px; color:var(--blue); background:#EFF6FF; font-weight:900;
}
.split { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.benefit-list { display:grid; gap:14px; }
.benefit-list div {
  display:grid; grid-template-columns:120px 1fr; gap:20px;
  padding:22px; background:var(--white); border-radius:16px; border:1px solid var(--line);
}
.benefit-list strong { color:var(--navy); }
.benefit-list span { color:var(--muted); }
.region-card {
  display:grid; grid-template-columns:1fr auto; gap:50px; align-items:center;
  padding:48px; border:1px solid var(--line); border-radius:30px;
  background:linear-gradient(135deg,#FFFFFF,#F8FAFC); box-shadow:var(--shadow);
}
.region-card p { color:var(--muted); max-width:760px; }
.region-badge {
  width:180px; aspect-ratio:1; display:grid; place-content:center; text-align:center;
  border-radius:50%; background:var(--navy); color:var(--white);
  box-shadow:0 0 0 12px #DBEAFE;
}
.region-badge span { font-size:.8rem; text-transform:uppercase; letter-spacing:.12em; color:#BFDBFE; }
.region-badge strong { font-size:1.25rem; }
.contact-section { padding-top:20px; }
.contact-card {
  display:grid; grid-template-columns:1fr .8fr; gap:60px; align-items:center;
  padding:54px; border-radius:32px; color:var(--white);
  background:linear-gradient(135deg,var(--navy),#102A46);
}
.contact-card h2, .contact-card p { color:var(--white); }
.eyebrow-light { color:#93C5FD; }
.contact-actions { display:grid; gap:12px; }
.contact-actions a {
  display:flex; justify-content:space-between; gap:20px;
  padding:18px 20px; border:1px solid rgba(255,255,255,.18);
  border-radius:14px; text-decoration:none; background:rgba(255,255,255,.06);
}
.contact-actions a:hover { background:rgba(255,255,255,.12); }
.contact-actions span { color:#BFDBFE; }
.site-footer { padding:48px 0 100px; border-top:1px solid var(--line); }
.footer-inner { display:grid; grid-template-columns:260px 1fr auto; gap:30px; align-items:center; color:var(--muted); font-size:.9rem; }
.footer-inner img { width:240px; }
.footer-inner p { margin:4px 0; }
.mobile-actions { display:none; }

@media (max-width: 900px) {
  nav, .header-call { display:none; }
  .header-inner { min-height:72px; }
  .brand img { width:220px; }
  .hero { padding-top:58px; }
  .hero-grid, .split, .contact-card { grid-template-columns:1fr; gap:40px; }
  .hero-card { min-height:340px; }
  .service-grid { grid-template-columns:repeat(2,1fr); }
  .footer-inner { grid-template-columns:1fr; }
}
@media (max-width: 620px) {
  .container { width:min(100% - 28px, 1120px); }
  .brand img { width:195px; }
  .hero { padding:48px 0 54px; }
  h1 { font-size:3rem; }
  .hero-actions .button { width:100%; }
  .trust-list { display:grid; gap:8px; }
  .hero-card { min-height:290px; border-radius:24px; }
  .hero-card span { display:none; }
  .section { padding:68px 0; }
  .service-grid { grid-template-columns:1fr; }
  .service-card { padding:24px; }
  .benefit-list div { grid-template-columns:1fr; gap:6px; }
  .region-card { grid-template-columns:1fr; padding:30px; }
  .region-badge { width:150px; }
  .contact-card { padding:30px; }
  .contact-actions a { display:grid; gap:3px; }
  .site-footer { padding-bottom:92px; }
  .mobile-actions {
    position:fixed; left:12px; right:12px; bottom:12px; z-index:60;
    display:grid; grid-template-columns:1fr 1fr; gap:8px;
    padding:8px; border-radius:18px; background:rgba(13,27,42,.95);
    box-shadow:0 18px 40px rgba(13,27,42,.28); backdrop-filter:blur(12px);
  }
  .mobile-actions a {
    padding:12px; border-radius:12px; text-align:center;
    text-decoration:none; font-weight:850; color:var(--white);
  }
  .mobile-actions a:first-child { background:var(--blue); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { transition:none !important; }
}