:root{ --brand:#0b5cab; --brand-accent:#23a6f0; --ink:#0f172a; --surface:#ffffff; --radius:16px; --shadow:0 10px 30px rgba(2,8,23,0.12); }
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,"Helvetica Neue",Arial,"Noto Sans",sans-serif; line-height:1.6; color:var(--ink); background: linear-gradient(140deg, #071423, #0b2640); background-attachment: fixed;}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1120px; margin:0 auto; padding:0 20px}
.site-header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,0.85); backdrop-filter: blur(8px); border-bottom:1px solid #e2e8f0;}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:12px 0}
.brand{display:flex; align-items:center; gap:12px; font-weight:700; color:#0b5cab}
.brand img{width:28px; height:28px}
.nav a{margin-left:16px; font-weight:600; color:#0f172a}
.nav a.active{color:var(--brand)}
.hero{position:relative; color:white; padding:96px 0 72px; overflow:hidden;}
.hero::before{content:""; position:absolute; inset:0; background-image: url('assets/bg.png'); background-size: cover; background-position: center; opacity:.28; mix-blend:screen;}
.hero .container{position:relative}
.hero h1{font-size: clamp(28px, 5vw, 48px); margin:0 0 12px; line-height:1.15}
.hero p{font-size: clamp(16px, 2.4vw, 20px); max-width:820px; opacity:.95}
.actions{display:flex; gap:12px; margin-top:20px; flex-wrap:wrap}
.btn{display:inline-block; padding:12px 18px; border-radius:999px; font-weight:700; border:2px solid transparent; box-shadow: var(--shadow);}
.btn.primary{background:var(--brand); color:#fff}
.btn.secondary{background:#fff; color:var(--brand); border-color:var(--brand)}
.section{background:var(--surface); border-radius:var(--radius); margin:24px auto; padding:32px; box-shadow: var(--shadow)}
.section h2{margin:0 0 12px}
.two-col{display:grid; grid-template-columns:1fr; gap:20px}
@media(min-width:900px){ .two-col{grid-template-columns:1.1fr .9fr} }
.cards{display:grid; grid-template-columns:1fr; gap:16px}
@media(min-width:800px){ .cards{grid-template-columns:repeat(3,1fr)} }
.card{background:var(--surface); border-radius:var(--radius); box-shadow: var(--shadow); padding:22px}
.card h3{margin-top:0}
.features li{margin:8px 0; list-style:none; padding-left:24px; position:relative}
.features li::before{content:"✓"; position:absolute; left:0; color:var(--brand); font-weight:700}
.table{width:100%; border-collapse:collapse; overflow:hidden; border-radius:12px}
.table th, .table td{padding:12px 14px; border-bottom:1px solid #e2e8f0; text-align:left}
.table th{background:#f8fafc; font-size:.92rem}
.cta{text-align:center}
.footer{color:#cbd5e1; font-size:.9rem; padding:28px 0 40px; text-align:center}
.footer a{color:#e2e8f0}
.notice{font-size:.92rem; color:#475569}
.small{font-size:.92rem}