:root{
  --navy-900:#071626;
  --navy-800:#0b1f33;
  --navy-700:#103151;
  --cyan:#1fb6ff;
  --gold:#d8b76d;
  --ivory:#f6f2e8;
  --text:#e9eef4; --muted:#a9b6c4; --border:rgba(255,255,255,.12);
  --card:rgba(14,33,58,.62); --radius:18px;
}
*{box-sizing:border-box} html,body{height:100%} body{
  margin:0; font-family: ui-sans-serif, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--text);
  background:
    radial-gradient(1200px 500px at 10% -10%, rgba(31,182,255,.09), transparent 55%),
    linear-gradient(180deg, var(--navy-800), var(--navy-900));
}
.container{width:min(1140px,96vw); margin:auto; padding-inline:clamp(16px,2vw,28px)}
header{position:sticky; top:0; z-index:40; background:rgba(6,18,32,.72); backdrop-filter: blur(8px) saturate(140%); border-bottom:1px solid var(--border)}
.nav{display:flex; align-items:center; justify-content:space-between; padding:12px 0}
.brand{display:flex; gap:12px; align-items:center; font-weight:900; letter-spacing:.5px}
.brand img{width:32px; height:32px}
.nav a{color:var(--text); text-decoration:none; margin-left:18px; font-weight:800}
.nav a:hover{opacity:.9}
.hero{padding: clamp(54px,8vw,120px) 0 42px}
.grid2{display:grid; grid-template-columns: 1.05fr .95fr; gap:28px; align-items:center}
@media(max-width:900px){.grid2{grid-template-columns:1fr}}
.kicker{display:inline-block; padding:7px 12px; border:1px solid rgba(216,183,109,.45); color:#f4e7c4; background:rgba(216,183,109,.10); border-radius:999px; font-weight:900; letter-spacing:.3px}
h1{font-size: clamp(36px,6.4vw,66px); line-height:1.02; margin:12px 0 8px}
h1 .gold{color:var(--gold)}
.sub{color:var(--muted); font-size:clamp(16px,2.2vw,20px)}
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:20px; box-shadow:0 22px 60px rgba(0,0,0,.48)}
.heroArt{border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; aspect-ratio:16/11}
.heroArt img{width:100%; height:100%; object-fit:cover; display:block}
.section{padding:60px 0}
.figure{border:1px solid var(--border); border-radius:16px; overflow:hidden}
.figure img{width:100%; display:block}
h2{font-size: clamp(26px,4.6vw,40px); margin:0 0 10px}
.lead{color:var(--muted)}
.list{margin:0; padding-left:18px; line-height:1.65}
.list li::marker{color:var(--cyan); font-size:1.1em}
.badges{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.badge{display:inline-block; padding:8px 12px; border-radius:999px; background:#0e2b45; color:#bfeaff; border:1px solid rgba(31,182,255,.25); font-weight:900; font-size:14px}
.cta{margin-top:18px; display:flex; gap:12px; flex-wrap:wrap}
.btn{padding:12px 16px; border-radius:12px; text-decoration:none; font-weight:900; letter-spacing:.3px; border:1px solid rgba(255,255,255,.14); color:var(--text); background:#0e2b45; transition:.2s}
.btn:hover{transform:translateY(-1px); box-shadow:0 12px 22px rgba(0,0,0,.35)}
.btn.primary{background:linear-gradient(135deg, var(--cyan), #49d6ff); color:#072033; border:none}
.btn.ghost{background:transparent}
.brandBar{display:flex; align-items:center; justify-content:center; gap:16px; padding:12px; border:1px solid var(--border); border-radius:14px; background:rgba(255,255,255,.03)}
.brandBar img{width:60px; height:60px}
.brandBar strong{color:var(--gold)}
.contact{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:12px}
@media(max-width:700px){.contact{grid-template-columns:1fr}}
.box{border:1px solid var(--border); border-radius:14px; padding:14px; background:#0e2b45}
.logoSeal{display:block; width:min(420px,92%); margin: 8px auto 0; filter:drop-shadow(0 16px 28px rgba(0,0,0,.45))}
.footer{padding:22px 0 34px; text-align:center; color:var(--muted); border-top:1px solid var(--border)}
.small{font-size:14px} hr{border:0; border-top:1px solid var(--border); margin:18px 0}