:root{color-scheme:light;font-family:Arial,sans-serif;color:#123b4c;background:#f3f8f9}
*{box-sizing:border-box}
body{margin:0;min-height:100svh;display:grid;place-items:center;padding:24px;background:radial-gradient(ellipse at top right,#bcecf0 0,transparent 55%),#f3f8f9}
.demo-home{width:min(100%,700px);padding:clamp(28px,6vw,56px);border:1px solid #c9e2e9;border-radius:24px;background:#fff;box-shadow:0 18px 60px #062e430a}
.brands{display:flex;align-items:center;gap:16px;margin-bottom:40px}
.brands img{max-width:42%;height:56px;object-fit:contain}
.brands span{color:#007b8f;font-size:24px}
.eyebrow{color:#007b8f;letter-spacing:.18em;text-transform:uppercase;font-size:12px;font-weight:700}
h1{color:#062e43;font-size:clamp(28px,5vw,40px);line-height:1.15;letter-spacing:-.03em;margin:14px 0}
.intro{line-height:1.6;color:#51717d;margin:0 0 30px}
nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
nav a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:56px;padding:16px;border:1px solid #c9e2e9;border-radius:14px;color:#062e43;text-decoration:none;font-weight:700;background:#eafaff;transition:background .15s}
nav a:first-child{background:linear-gradient(120deg,#087f96,#0b5269);border-color:transparent;color:#fff}
nav a:hover{background:#c9f2f6}
nav a:first-child:hover{background:#075f78}
a:focus-visible{outline:3px solid #f16a5c;outline-offset:4px}
.note{font-size:12px;line-height:1.6;color:#51717d;margin:28px 0 0}
@media(max-width:540px){nav{grid-template-columns:1fr}.brands{gap:10px;margin-bottom:32px}body{padding:16px}}
@media(prefers-reduced-motion:reduce){nav a{transition:none}}