/* Britixo EU AI Compliance Monitor — ultrafast, responsive, no dependencies */
:root{
  --bg:#070A12;
  --panel:#0C1222;
  --panel2:#0A1020;
  --text:#EAF0FF;
  --muted:#A9B4D0;
  --line:rgba(255,255,255,.10);
  --brand:#7C5CFF;
  --brand2:#22D3EE;
  --ok:#34D399;
  --shadow: 0 18px 55px rgba(0,0,0,.55);
  --radius: 18px;
  --max: 1160px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--font); color:var(--text);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(124,92,255,.35), transparent 60%),
    radial-gradient(900px 540px at 90% 0%, rgba(34,211,238,.22), transparent 55%),
    linear-gradient(180deg, #060813 0%, #050713 100%);
  min-height:100vh;
}
a{color:inherit; text-decoration:none}
.container{max-width:var(--max); margin:0 auto; padding:0 20px}
.row{display:flex; gap:18px}
@media (max-width: 900px){ .row{flex-direction:column} }
.skip{position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip:focus{left:12px; top:12px; width:auto; height:auto; padding:10px 12px; background:#111827; border:1px solid var(--line); border-radius:10px; z-index:9999}
header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(6,8,19,.62);
  border-bottom: 1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0;}
.brand{display:flex; align-items:center; gap:10px; font-weight:750; letter-spacing:.2px;}
.logo{
  width:34px; height:34px; border-radius:12px;
  background: conic-gradient(from 210deg, var(--brand), var(--brand2), var(--brand));
  box-shadow: 0 10px 30px rgba(124,92,255,.35);
}
.navlinks{display:flex; align-items:center; gap:14px}
.navlinks a{padding:10px 12px; border-radius:12px; color:var(--muted);}
.navlinks a:hover{background:rgba(255,255,255,.06); color:var(--text)}
.actions{display:flex; align-items:center; gap:10px}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px; padding:10px 14px; border-radius:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  color:var(--text); font-weight:650;
}
.btn:hover{background: rgba(255,255,255,.08)}
.btn.primary{
  border-color: transparent;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand2) 100%);
  color:#061022;
}
.btn.primary:hover{filter: brightness(1.07)}
.btn.small{padding:9px 12px; border-radius:12px}
.iconbtn{
  width:42px; height:42px; border-radius:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  color:var(--text);
  display:inline-flex; align-items:center; justify-content:center;
}
.iconbtn:hover{background: rgba(255,255,255,.08)}
.hamburger{display:none}
@media (max-width: 980px){ .navlinks{display:none} .hamburger{display:inline-flex} }
.mobile{display:none; border-top:1px solid var(--line); padding:10px 0 16px;}
.mobile a{display:block; padding:12px 10px; border-radius:14px; color:var(--muted);}
.mobile a:hover{background:rgba(255,255,255,.06); color:var(--text)}
.mobile .row{gap:10px}
.mobile.open{display:block}
.hero{padding:56px 0 26px}
.badge{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 12px; border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--muted); font-weight:650;
}
.badge .dot{width:8px; height:8px; border-radius:999px; background: var(--ok); box-shadow:0 0 0 4px rgba(52,211,153,.15)}
h1{font-size:44px; line-height:1.06; letter-spacing:-.8px; margin:14px 0 12px}
@media (max-width: 680px){ h1{font-size:34px} }
.lead{font-size:18px; line-height:1.55; color:var(--muted); max-width:64ch}
.heroGrid{display:grid; grid-template-columns: 1.15fr .85fr; gap:18px; align-items:stretch}
@media (max-width: 960px){ .heroGrid{grid-template-columns:1fr} }
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card.pad{padding:18px}
.kpis{display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; margin-top:18px}
@media (max-width: 680px){ .kpis{grid-template-columns:1fr} }
.kpi{padding:14px; border-radius:16px; border:1px solid var(--line); background: rgba(0,0,0,.18);}
.kpi b{display:block; font-size:18px}
.kpi span{color:var(--muted); font-size:13px; line-height:1.4}
.section{padding:26px 0}
.section h2{font-size:26px; letter-spacing:-.3px; margin:0 0 10px}
.section p{color:var(--muted); line-height:1.65; margin:0}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:14px}
@media (max-width: 980px){ .grid3{grid-template-columns:1fr} }
.feature{padding:16px; border-radius:18px; border:1px solid var(--line); background: rgba(0,0,0,.16);}
.feature h3{margin:0 0 8px; font-size:16px}
.feature p{margin:0; font-size:14px}
.split{display:grid; grid-template-columns: 1fr 1fr; gap:18px; align-items:start;}
@media (max-width: 980px){ .split{grid-template-columns:1fr} }
.list{margin:12px 0 0; padding:0; list-style:none}
.list li{padding:10px 0; border-bottom:1px solid rgba(255,255,255,.08); color: var(--muted);}
.list li b{color:var(--text)}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 10px; border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  color:var(--muted); font-size:13px; font-weight:650;
}
.footer{margin-top:30px; border-top:1px solid var(--line); background: rgba(0,0,0,.18);}
.footer .cols{display:grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap:18px; padding:26px 0;}
@media (max-width: 980px){ .footer .cols{grid-template-columns:1fr} }
.footer a{color:var(--muted)} .footer a:hover{color:var(--text)}
.small{color:var(--muted); font-size:13px; line-height:1.55}
.copy{padding:14px 0; border-top:1px solid rgba(255,255,255,.08); color:var(--muted); font-size:13px}
dialog{
  width:min(780px, calc(100% - 26px));
  border:none; border-radius:22px;
  background: rgba(7,10,18,.95);
  color:var(--text);
  box-shadow: 0 30px 110px rgba(0,0,0,.72);
  padding:0;
}
dialog::backdrop{background: rgba(0,0,0,.55); backdrop-filter: blur(2px)}
.modalHead{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line);}
.modalBody{padding:14px 16px 18px}
.input{
  width:100%; padding:12px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  color:var(--text); outline:none;
}
.input:focus{border-color: rgba(124,92,255,.6); box-shadow:0 0 0 4px rgba(124,92,255,.15)}
.results{margin-top:12px; display:grid; gap:10px}
.result{padding:12px; border-radius:16px; border:1px solid var(--line); background: rgba(255,255,255,.03);}
.result .t{font-weight:750} .result .d{color:var(--muted); font-size:13px; margin-top:4px; line-height:1.45}
kbd{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace; border:1px solid var(--line); background: rgba(255,255,255,.04); padding:3px 7px; border-radius:8px; color:var(--muted); font-size:12px;}