:root{
  --bg:#0b1220;
  --panel:rgba(255,255,255,.06);
  --panel2:rgba(255,255,255,.1);
  --text:#e7eefc;
  --muted:rgba(231,238,252,.72);
  --brand:#48d1ff;
  --brand2:#7af6c8;
  --shadow: 0 18px 45px rgba(0,0,0,.35);
  --radius: 18px;
  --max: 1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:
    radial-gradient(900px 400px at 20% 10%, rgba(72,209,255,.20), transparent 55%),
    radial-gradient(850px 420px at 80% 20%, rgba(122,246,200,.14), transparent 55%),
    radial-gradient(900px 520px at 60% 90%, rgba(72,209,255,.12), transparent 60%),
    var(--bg);
  color:var(--text);
}
a{color:inherit; text-decoration:none}
a:hover{opacity:.92}
.container{max-width:var(--max); margin:0 auto; padding:0 20px}
.btn{
  display:inline-flex; gap:10px; align-items:center; justify-content:center;
  padding:12px 16px; border-radius:999px; border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06); color:var(--text); cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover{transform:translateY(-1px); background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.20)}
.btn.primary{
  background: linear-gradient(135deg, rgba(72,209,255,.35), rgba(122,246,200,.25));
  border-color: rgba(122,246,200,.35);
}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  color:var(--muted);
  font-size:13px;
}
nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(11,18,32,.55);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:14px}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px}
.logo{
  width:34px; height:34px; border-radius:12px;
  background: conic-gradient(from 180deg, rgba(72,209,255,.95), rgba(122,246,200,.95), rgba(72,209,255,.95));
  box-shadow: 0 10px 26px rgba(72,209,255,.12);
}
.nav-links{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.nav-links a{color:var(--muted); font-size:14px; padding:8px 10px; border-radius:999px}
.nav-links a.active, .nav-links a:hover{color:var(--text); background:rgba(255,255,255,.06)}
.nav-actions{display:flex; gap:10px; align-items:center}
.lang-toggle{display:flex; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:4px}
.lang-toggle button{border:none; background:transparent; color:var(--muted); padding:8px 10px; border-radius:999px; cursor:pointer; font-weight:700; font-size:12px}
.lang-toggle button.active{background:rgba(255,255,255,.10); color:var(--text)}
.hero{padding:54px 0 28px}
.hero-grid{display:grid; grid-template-columns: 1.2fr .8fr; gap:26px; align-items:stretch}
.h1{font-size:44px; line-height:1.05; margin:14px 0 12px}
.p{color:var(--muted); font-size:16px; line-height:1.65; margin:0 0 18px}
.card{background:var(--panel); border:1px solid rgba(255,255,255,.10); border-radius:var(--radius); box-shadow:var(--shadow)}
.hero-card{padding:18px}
.hero-media{
  height:100%;
  display:flex; flex-direction:column; gap:12px;
  padding:18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.03)),
    url("./assets/img/dual-tank-poster.jpg");
  background-size: cover;
  background-position:center;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.hero-media .overlay{
  margin-top:auto;
  background:rgba(11,18,32,.65);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  padding:12px;
}
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:16px}
.kpi{padding:14px}
.kpi .num{font-size:24px; font-weight:900}
.kpi .lbl{color:var(--muted); font-size:13px; margin-top:6px}
.section{padding:34px 0}
.section h2{font-size:26px; margin:0 0 10px}
.section .sub{color:var(--muted); margin:0 0 18px; line-height:1.6}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
.item{padding:16px}
.item h3{margin:2px 0 8px; font-size:16px}
.item p{margin:0; color:var(--muted); line-height:1.6; font-size:14px}
.split{display:grid; grid-template-columns: 1fr 1fr; gap:14px; align-items:start}
.list{display:grid; gap:10px; margin:0; padding:0; list-style:none}
.list li{
  padding:12px 12px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  color:var(--muted);
  line-height:1.55;
  font-size:14px;
}
.hr{height:1px; background:rgba(255,255,255,.10); margin:18px 0}
.footer{padding:30px 0 42px; border-top:1px solid rgba(255,255,255,.08); color:var(--muted)}
.footer-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:14px; align-items:start}
.small{font-size:13px; line-height:1.6; color:var(--muted)}
.pills{display:flex; gap:8px; flex-wrap:wrap}
.pill{padding:7px 10px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); font-size:13px}
.table{width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius:16px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04)}
.table th, .table td{padding:12px; text-align:left; font-size:14px; color:var(--muted); border-bottom:1px solid rgba(255,255,255,.08)}
.table th{color:var(--text); font-weight:800; background:rgba(255,255,255,.05)}
.table tr:last-child td{border-bottom:none}
.notice{padding:12px 14px; border-radius:16px; border:1px dashed rgba(255,255,255,.20); color:var(--muted); background:rgba(255,255,255,.04); line-height:1.6; font-size:13px}
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr}
  .h1{font-size:36px}
}