:root {
  --navy: #061f3c;
  --navy-2: #0a3158;
  --teal: #10cfc7;
  --teal-dark: #00aaa5;
  --ink: #09254a;
  --muted: #60769a;
  --line: #dce7f1;
  --pale: #effbfb;
  --white: #fff;
  --shadow: 0 18px 52px rgba(6, 31, 60, .1);
  --radius: 20px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #fff; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.55; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.section-shell { width: min(1640px, calc(100% - 96px)); margin-inline: auto; }

.site-header { height: 94px; display: grid; grid-template-columns: 220px 1fr auto auto auto; gap: 24px; align-items: center; padding: 0 max(32px, calc((100vw - 1640px)/2)); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.94); backdrop-filter: blur(16px); }
.brand img { width: 190px; height: 64px; object-fit: contain; }
.nav { justify-self: center; display: flex; gap: clamp(20px, 3vw, 48px); font-weight: 650; }
.nav a, .header-link { transition: color .2s ease; }
.nav a:hover, .header-link:hover { color: var(--teal-dark); }
.menu-toggle { display: none; }
.language-switch { display:flex; align-items:center; gap:7px; color:#7790ae; font-size:.84rem; font-weight:800; }
.language-switch a { padding:7px 8px; border-radius:8px; }
.language-switch a:hover, .language-switch a.active { color:var(--ink); background:var(--pale); }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 58px; padding: 0 28px; border: 0; border-radius: 12px; background: linear-gradient(135deg, #08d6cc, #13c7c2); color: #041d38; box-shadow: 0 12px 30px rgba(16,207,199,.22); font: inherit; font-weight: 800; cursor: pointer; }
.button:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(16,207,199,.28); }
.button-small { min-height: 50px; padding-inline: 22px; }
.button-outline { background: #fff; color: var(--ink); border: 1px solid #9db0c9; box-shadow: none; }

.hero { min-height: 760px; display: grid; grid-template-columns: .92fr 1.18fr; gap: 78px; align-items: center; padding-block: 88px 76px; position: relative; }
.hero::after { content: ""; position: absolute; width: 410px; height: 410px; border: 40px solid rgba(16,207,199,.08); border-radius: 50%; right: -250px; bottom: -230px; pointer-events: none; }
.eyebrow { margin: 0 0 22px; color: #47709e; font-size: .82rem; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; }
.eyebrow::after { content: ""; display: inline-block; width: 48px; height: 3px; margin-left: 18px; vertical-align: middle; background: var(--teal); }
h1, h2, h3 { margin-top: 0; color: var(--ink); line-height: 1.08; }
h1 { margin-bottom: 28px; max-width: 760px; font-size: clamp(3.2rem, 5vw, 5.8rem); letter-spacing: -.055em; }
h1 span { color: var(--teal); }
h2 { margin-bottom: 22px; font-size: clamp(2.35rem, 3.8vw, 4rem); letter-spacing: -.045em; }
h3 { margin-bottom: 12px; font-size: 1.35rem; }
.lead { max-width: 700px; margin: 0 0 32px; color: var(--muted); font-size: 1.25rem; }
.actions { display: flex; gap: 18px; flex-wrap: wrap; }
.assurance { margin: 24px 0 0; color: #36577e; }
.assurance span { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: 10px; border: 2px solid var(--teal); border-radius: 50%; color: var(--teal-dark); font-weight: 900; }

.flow-card { position: relative; padding: 74px 28px 34px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, #fff, #f6fbff); box-shadow: var(--shadow); overflow: hidden; }
.flow-line { position: absolute; top: 37px; left: 8%; width: 84%; height: 78px; border-top: 5px solid var(--teal); border-radius: 50%; }
.flow-line::before, .flow-line::after { content:""; position: absolute; top: -11px; width: 18px; height: 18px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 24px rgba(16,207,199,.65); }
.flow-line::before { left: 0; } .flow-line::after { right: 0; }
.flow { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5,1fr); gap: 14px; margin: 0; padding: 0; list-style: none; }
.flow li { min-height: 238px; padding: 22px 14px; display: flex; flex-direction: column; align-items: center; text-align: center; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.92); }
.flow li:not(:last-child)::after { content:"→"; position: absolute; transform: translate(calc(50% + 54px), 54px); color: var(--teal); font-size: 1.7rem; }
.flow-icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 18px; border-radius: 16px; background: var(--pale); color: var(--ink); font-size: 2rem; font-weight: 800; }
.flow-icon.mark img { width: 48px; height: 48px; object-fit: contain; }
.flow strong { line-height: 1.2; }
.flow small { margin-top: 12px; color: var(--muted); line-height: 1.35; }
.flow-caption { margin: 30px 0 0; color: #557399; text-align: center; font-size: .75rem; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; }

.systems, .solutions, .examples, .about, .contact { padding-block: 96px; }
.systems { display: grid; grid-template-columns: .65fr 1.35fr; gap: 70px; align-items: end; border-top: 1px solid var(--line); }
.systems h2 { font-size: clamp(2.3rem,3.4vw,3.6rem); }
.system-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.system { min-height: 130px; padding: 22px; display: flex; flex-direction: column; justify-content: center; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 10px 26px rgba(6,31,60,.05); }
.system b { font-size: 1rem; line-height: 1.2; }
.system span { margin-top: 8px; color: var(--muted); font-size: .9rem; }

.solutions { border-top: 1px solid var(--line); }
.section-heading { display: grid; grid-template-columns: 1.5fr .5fr; gap: 80px; align-items: end; margin-bottom: 46px; }
.section-heading > p { color: var(--muted); font-size: 1.1rem; }
.solution-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.solution-grid article { min-height: 260px; padding: 34px; border: 1px solid var(--line); border-radius: var(--radius); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.solution-grid article:hover { transform: translateY(-6px); border-color: rgba(16,207,199,.65); box-shadow: var(--shadow); }
.solution-grid p, .example-row p { color: var(--muted); }
.tile-icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 28px; border-radius: 50%; background: var(--pale); color: var(--teal-dark); font-size: 2rem; font-weight: 800; }

.examples { background: linear-gradient(180deg,#fff,#f7fbfe); }
.example-row { display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; }
.example-row article { min-height: 300px; padding: 28px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.example-row article > span { color: var(--teal-dark); font-size: 1.6rem; font-weight: 900; }
.example-row h3 { margin-top: 54px; }

.process-wrap { background: radial-gradient(circle at 52% 60%, #0b4268 0, var(--navy) 48%, #04182d 100%); color: #d7e9f8; position: relative; overflow: hidden; }
.process-wrap::after { content:""; position:absolute; inset:auto -10% -150px; height:320px; border-top:1px solid rgba(16,207,199,.6); border-radius:50%; transform:rotate(-5deg); }
.process { padding-block: 92px; position:relative; z-index:1; }
.light h2, .light p, .light .eyebrow { color: #fff; }
.steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 26px; margin: 0; padding: 0; list-style: none; }
.steps li { display: flex; gap: 18px; }
.steps li > span { flex: 0 0 auto; display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:var(--teal); color:var(--navy); font-weight:900; }
.steps h3 { color:#fff; }
.steps p { margin:0; color:#aecaDF; }

.brand-visual { min-height:620px; display:grid; align-items:center; position:relative; overflow:hidden; color:#d7e9f8; background:#041a32 url("systems-flow-hero.png") center/cover no-repeat; }
.brand-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(4,24,45,.97) 0%,rgba(4,24,45,.84) 34%,rgba(4,24,45,.18) 70%,rgba(4,24,45,.06)); }
.brand-visual-copy { position:relative; z-index:1; padding-block:100px; }
.brand-visual-copy h2 { max-width:720px; color:#fff; }
.brand-visual-copy > p:not(.eyebrow) { max-width:650px; color:#b8cde0; font-size:1.18rem; }
.brand-visual .eyebrow { color:#91b9d7; }
.visual-points { display:flex; flex-wrap:wrap; gap:12px; margin:32px 0 0; padding:0; list-style:none; }
.visual-points li { padding:11px 16px; border:1px solid rgba(16,207,199,.42); border-radius:999px; background:rgba(3,25,46,.62); color:#e8f9ff; font-weight:700; backdrop-filter:blur(8px); }

.about { display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:start; }
.about-copy { color: var(--muted); font-size:1.22rem; }
.value-row { display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }
.value-row span { padding:10px 16px; border:1px solid var(--line); border-radius:999px; color:var(--ink); font-size:.95rem; font-weight:700; }

.contact { display:grid; grid-template-columns:.85fr 1.15fr; gap:80px; margin-bottom:70px; padding-inline:54px; border-radius:28px; background:#f4fafc; }
.contact > div > p:last-child { color:var(--muted); font-size:1.12rem; }
.contact-form { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:30px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; box-shadow:var(--shadow); }
.contact-form label { color:#436184; font-size:.86rem; font-weight:700; }
.contact-form input, .contact-form textarea { width:100%; margin-top:7px; padding:15px 16px; border:1px solid #cfdce9; border-radius:10px; color:var(--ink); background:#fff; font:inherit; }
.contact-form input:focus, .contact-form textarea:focus { outline:3px solid rgba(16,207,199,.18); border-color:var(--teal-dark); }
.full { grid-column:1/-1; }

.faq { padding-block:30px 110px; }
.faq-list { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.faq details { border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 10px 28px rgba(6,31,60,.04); }
.faq summary { padding:24px 56px 24px 24px; position:relative; color:var(--ink); font-size:1.08rem; font-weight:800; cursor:pointer; list-style:none; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; position:absolute; right:22px; top:18px; color:var(--teal-dark); font-size:1.6rem; }
.faq details[open] summary::after { content:"−"; }
.faq details p { margin:0; padding:0 24px 24px; color:var(--muted); }

.footer { display:grid; grid-template-columns:1.2fr .8fr .8fr; gap:60px; padding-block:60px 26px; border-top:1px solid var(--line); }
.footer img { width:220px; height:76px; object-fit:contain; }
.footer p { color:var(--muted); }
.footer div { display:flex; flex-direction:column; gap:9px; }
.footer b { margin-bottom:8px; }
.footer a { color:#4b678b; }
.copyright { grid-column:1/-1; padding-top:24px; border-top:1px solid var(--line); font-size:.9rem; }

@media (max-width: 1120px) {
  .site-header { grid-template-columns:190px 1fr auto auto; }
  .nav { gap:20px; }
  .header-link { display:none; }
  .hero { grid-template-columns:1fr; }
  .flow-card { max-width:900px; }
  .systems { grid-template-columns:1fr; }
  .system-grid { grid-template-columns:repeat(4,1fr); }
  .example-row { grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 760px) {
  .section-shell { width:min(100% - 36px, 1640px); }
  .site-header { height:76px; grid-template-columns:150px 1fr auto auto; padding-inline:18px; gap:8px; }
  .brand img { width:145px; height:54px; }
  .menu-toggle { display:block; justify-self:end; border:1px solid var(--line); background:#fff; border-radius:8px; padding:9px 12px; color:var(--ink); font-weight:800; }
  .nav { display:none; position:absolute; top:76px; left:0; right:0; padding:22px; flex-direction:column; background:#fff; border-bottom:1px solid var(--line); box-shadow:var(--shadow); }
  .nav.open { display:flex; }
  .button-small { display:none; }
  .language-switch { font-size:.76rem; }
  .language-switch a { padding:5px; }
  .hero { min-height:auto; padding-block:64px; gap:46px; }
  h1 { font-size:clamp(2.75rem,13vw,4.4rem); }
  .lead { font-size:1.08rem; }
  .actions { flex-direction:column; }
  .flow-card { overflow-x:auto; padding-inline:18px; }
  .flow { min-width:780px; }
  .system-grid, .solution-grid, .steps { grid-template-columns:1fr 1fr; }
  .section-heading, .about, .contact, .faq-list { grid-template-columns:1fr; gap:24px; }
  .contact { padding-inline:22px; }
  .footer { grid-template-columns:1fr 1fr; }
}

@media (max-width: 520px) {
  .system-grid, .solution-grid, .example-row, .steps, .contact-form, .footer { grid-template-columns:1fr; }
  .systems, .solutions, .examples, .about, .contact { padding-block:64px; }
  .section-heading { margin-bottom:28px; }
  .example-row article { min-height:auto; }
  .example-row h3 { margin-top:30px; }
  .footer { gap:34px; }
  .brand-visual { min-height:560px; background-position:64% center; }
  .brand-visual::after { background:linear-gradient(90deg,rgba(4,24,45,.97),rgba(4,24,45,.72)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { transition:none !important; }
}