:root{
  --brand:#20214F;             /* RAL 5002 approx */
  --brand-700:#17183a;
  --brand-500:#2a2f7a;
  --ink:#0f1220;
  --ink-2:#2c2f3a;
  --muted:#6b7183;
  --bg:#f5f6f9;
  --panel:#ffffff;
  --line:#e7e9f0;
  --accent:#3da9fc;
  --radius:14px;
  --shadow:0 10px 30px rgba(20,20,40,.08);
}
html{color-scheme: light}
html[data-theme="dark"]{color-scheme: dark}
html[data-theme="dark"]{
  --brand:#3a3db0;
  --brand-700:#2a2d88;
  --brand-500:#5055c8;
  --ink:#e8ebf6;
  --ink-2:#c7cbe0;
  --muted:#9aa3b2;
  --bg:#0e111a;
  --panel:#151a24;
  --line:#23283a;
  --accent:#4db2ff;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}
@media (prefers-color-scheme: dark){
  html:not([data-theme]){
    --brand:#3a3db0;
    --brand-700:#2a2d88;
    --brand-500:#5055c8;
    --ink:#e8ebf6;
    --ink-2:#c7cbe0;
    --muted:#9aa3b2;
    --bg:#0e111a;
    --panel:#151a24;
    --line:#23283a;
    --accent:#4db2ff;
    --shadow:0 10px 30px rgba(0,0,0,.35);
  }
}
@media (prefers-color-scheme: dark){ html:not([data-theme]){ color-scheme: dark } }
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--ink); background:var(--bg)}
.topbar{
  position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 20px;
  background:linear-gradient(180deg,var(--panel),rgba(255,255,255,.88)); backdrop-filter:saturate(1.2) blur(6px); border-bottom:1px solid var(--line)
}
html[data-theme="dark"] .topbar{background:linear-gradient(180deg,var(--panel),rgba(21,26,36,.88))}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink)}
.logo{height:40px}
.logo.small{height:28px}
.brand span{font-weight:700}
.nav{display:flex; gap:18px; align-items:center}
.nav a{color:var(--ink-2); text-decoration:none; font-weight:600}
.nav a:hover{color:var(--brand); filter:brightness(2);}
.nav-toggle{display:none; background:none; border:1px solid var(--line); padding:8px 10px; border-radius:10px}
.btn{display:inline-flex; align-items:center; justify-content:center; font-weight:700; text-decoration:none; border-radius:10px; padding:10px 14px; border:1px solid transparent; transition:.2s}
.btn-primary{background:var(--brand); color:var(--bg) !important}
.btn-primary:hover{filter:brightness(2) !important}
.btn-outline{border-color:var(--brand); color:var(--brand); background:#fff}
.btn-outline:hover{background:var(--brand); color: var(--bg)}
.theme-toggle{display:inline-flex; align-items:center; justify-content:center; gap:6px; background:transparent; color:var(--ink-2); border:1px solid var(--line); padding:8px 10px; border-radius:10px; cursor:pointer}
.theme-toggle:hover{filter:brightness(1.2)}
html[data-theme="dark"] .btn-outline{background:transparent; color:var(--accent); border-color:var(--accent)}
html[data-theme="dark"] .btn-outline:hover{background:var(--accent); color:#0b0d12}
.section{padding:64px 20px}
.container{max-width:1100px; margin:0 auto}
.grid{display:grid; gap:22px}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){
  .grid.cols-2,.grid.cols-3{grid-template-columns:1fr}
  .nav{display:none}
  .nav[aria-expanded="true"]{display:flex; flex-direction:column; align-items:flex-start; padding:12px 0}
  .nav-toggle{display:block}
}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}
.card .media{width:100%; max-height: 25rem; object-fit:contain;}
.card .pad{padding:18px}
.badge{display:inline-block; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:700; background:#eef2ff; color:var(--brand); border:1px solid #dfe4fb}
.hero{padding:60px 20px 30px; background:radial-gradient(1200px 400px at 70% -20%, rgba(32,33,79,.22), transparent 60%),linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%); border-bottom:1px solid var(--line)}
html[data-theme="dark"] .hero{background:radial-gradient(1200px 400px at 70% -20%, rgba(61,169,252,.12), transparent 60%),linear-gradient(180deg, #121722 0%, #0e111a 100%)}
.hero .wrap{max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1.1fr .9fr; gap:24px}
.hero h1{font-size:clamp(28px,3.2vw,48px); line-height:1.1; margin:0 0 12px}
.hero p{color:var(--muted); margin:0 0 20px}
.hero .cta{display:flex; gap:12px; flex-wrap:wrap}
.hero .shot{border-radius:18px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); object-fit: contain;}
.hero .shot img{ max-height:20rem; display:block; justify-self: center;}
@media (max-width:900px){ .hero .wrap{grid-template-columns:1fr} }
.features{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:18px}
.feature{padding:14px; background:#fff; border:1px solid var(--line); border-radius:12px}
html[data-theme="dark"] .feature{background:var(--panel)}
.feature h4{margin:8px 0 6px}
.feature p{margin:0; color:var(--muted)}
.feature img{width: 100%; }
@media (max-width:900px){ .features{grid-template-columns:1fr 1fr} }
.table{width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden}
.table th,.table td{padding:12px 14px; border-bottom:1px solid var(--line)}
.table th{background:#f0f2f8; text-align:left}
.table tr:hover td{background:#fafbff}
html[data-theme="dark"] .table{background:var(--panel)}
html[data-theme="dark"] .table th{background:rgba(255,255,255,.06)}
html[data-theme="dark"] .table tr:hover td{background:rgba(255,255,255,.03)}
.form{display:grid; gap:12px}
.input, textarea{width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--line); background:#fff}
html[data-theme="dark"] .input, html[data-theme="dark"] textarea{background:var(--panel); color:var(--ink)}
.help{font-size:12px; color:var(--muted)}
.muted{color:var(--muted)}
.site-footer{margin-top:40px; padding:40px 20px; background:linear-gradient(180deg,#fff,#f3f5fb); border-top:1px solid var(--line)}
html[data-theme="dark"] .site-footer{background:linear-gradient(180deg,#121722,#0e111a)}
.site-footer .cols{display:grid; grid-template-columns:2fr 1fr 1fr 1.3fr; gap:22px; max-width:1100px; margin:0 auto}
.site-footer h4{margin:.2rem 0 .6rem}
.site-footer ul{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.site-footer a{text-decoration:none; color:var(--ink-2)}
.site-footer a:hover{color:var(--brand)}
.site-footer .f-brand{display:flex; align-items:center; gap:10px; margin-bottom:6px}
.site-footer .legal{max-width:1100px; margin:18px auto 0; padding-top:12px; border-top:1px solid var(--line); text-align:center; font-size:13px}
.pills{display:flex; flex-wrap:wrap; gap:8px}
.pill{font-size:12px; border:1px dashed var(--line); padding:6px 10px; border-radius:999px; background:#fff}
html[data-theme="dark"] .pill{background:var(--panel)}
.build{margin-left:.5rem; font-size:12px}
.badge{background:#eef2ff}
html[data-theme="dark"] .badge{background:rgba(61,169,252,.12); border-color:rgba(61,169,252,.24); color:var(--accent)}

em { font-style: normal; color: var(--brand-500); font-weight: 700; }

strong { font-weight: 800; }