
:root{
  --brand:#155eef; --brand-dark:#1247b8; --brand-soft:#eef4ff;
  --ink:#14213d; --muted:#5d6b82; --line:#e5eaf2; --surface:#f6f8fc;
  --white:#fff; --accent:#16a6a1; --shadow:0 18px 50px rgba(20,33,61,.09);
  --radius:18px; --max:1160px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--ink);line-height:1.65;background:#fff}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
.container{width:min(var(--max),calc(100% - 40px));margin:auto}
.topbar{background:#1769c2;color:rgba(255,255,255,.74);font:11px 'Plus Jakarta Sans',sans-serif}
.topbar-inner{max-width:1240px;margin:auto;padding:8px 28px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.topbar-left,.topbar-right{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.topbar-right{gap:8px}
.topbar a{transition:color .2s}
.topbar a:hover{color:#fff;font-weight:600}
.topbar-right a{width:24px;height:24px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.22);border-radius:7px;font-size:10px;transition:background .2s,border-color .2s,color .2s}
.topbar-right .facebook:hover,.topbar-right .facebook:focus-visible{background:#1877f2;border-color:#1877f2;color:#fff}
.topbar-right .instagram:hover,.topbar-right .instagram:focus-visible{background:linear-gradient(45deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5);border-color:transparent;color:#fff}
.topbar-right .linkedin:hover,.topbar-right .linkedin:focus-visible{background:#0a66c2;border-color:#0a66c2;color:#fff}
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);border-bottom:1px solid rgba(219,229,240,.8);backdrop-filter:blur(18px)}
.nav-inner{max-width:1240px;height:60px;margin:auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between}
.nav-logo{display:inline-flex;align-items:center;gap:10px;color:var(--ink);font:700 22px 'Space Grotesk',sans-serif;letter-spacing:-.04em}
.logo-icon{width:39px;height:32px;display:grid;place-items:center;border-radius:10px;overflow:hidden;background:linear-gradient(135deg,#1769e0,#2cc9e8);color:white;box-shadow:0 6px 16px rgba(23,105,224,.24)}
.logo-icon[src]{object-fit:contain;background:transparent;box-shadow:none}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:.02em;color:#102a56}
.brand-mark{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--brand),#22b8cf);display:grid;place-items:center;color:white;font-weight:900;font-size:20px;box-shadow:0 7px 18px rgba(21,94,239,.22)}
.brand small{display:block;font-size:10px;letter-spacing:.16em;color:#6c7a90;font-weight:700;margin-top:-4px}
.nav{display:flex;align-items:center;gap:3px;margin:0;padding:0;list-style:none;font:600 12px 'Plus Jakarta Sans',sans-serif}
.nav a{display:block;color:#61718a;padding:9px 13px;border-radius:9px;transition:.25s ease}
.nav a:hover,.nav a.active{color:#1769e0;background:#eff6ff}
.nav .nav-cta,.nav .nav-cta:hover{color:#fff;background:#f05b55;margin-left:10px;padding:11px 18px;border:0;box-shadow:0 8px 18px rgba(16,36,62,.18);transform:none}
.nav-cta,.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 19px;border-radius:9px;background:var(--brand);color:white;font-weight:700;border:1px solid var(--brand);transition:.2s;cursor:pointer}
.nav-cta:hover,.btn:hover{background:var(--brand-dark);transform:translateY(-1px)}
.btn-outline{background:white;color:var(--brand);border-color:#c9d8ff}
.btn-outline:hover{background:var(--brand-soft);color:var(--brand-dark)}
.menu-toggle{display:none;border:0;background:none;cursor:pointer;padding:6px}
.hamburger span{display:block;width:23px;height:2px;margin:5px;background:#10243e;border-radius:3px}
.hero{position:relative;overflow:hidden;background:linear-gradient(115deg,#0e2b5c 0%,#124ca3 57%,#087f9c 100%);color:white;padding:88px 0 82px}
.hero:before,.hero:after{content:"";position:absolute;border:1px solid rgba(255,255,255,.12);border-radius:50%;width:520px;height:520px;right:-100px;top:-240px}
.hero:after{width:370px;height:370px;right:65px;top:-160px}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:55px;position:relative;z-index:1}
.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.16em;font-weight:800;color:#b8d6ff;display:inline-flex;align-items:center;gap:9px}
.eyebrow:before{content:"";width:25px;height:2px;background:#45d5cf}
h1{font-size:clamp(38px,5vw,58px);line-height:1.09;letter-spacing:-.035em;margin:18px 0}
.hero p{font-size:18px;color:#e2edff;max-width:650px;margin:0 0 28px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero .btn{background:#fff;color:#1247b8;border-color:#fff}
.hero .btn-outline{background:transparent;color:white;border-color:rgba(255,255,255,.55)}
.hero-art{position:relative;z-index:2}
.hero-art img{width:100%;display:block;filter:drop-shadow(0 22px 35px rgba(0,0,0,.2))}
.hero-note{margin-top:22px;font-size:13px;color:#c9dcff}
.section{padding:76px 0}
.section.alt{background:var(--surface)}
.section-head{max-width:740px;margin:0 auto 38px;text-align:center}
.kicker{color:var(--brand);font-size:12px;font-weight:800;letter-spacing:.15em;text-transform:uppercase}
h2{font-size:clamp(29px,3.5vw,40px);line-height:1.2;letter-spacing:-.025em;margin:10px 0 14px}
.lead{color:var(--muted);font-size:17px;margin:0}
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:25px;box-shadow:0 6px 24px rgba(20,33,61,.035)}
.card h3{font-size:18px;margin:12px 0 7px}
.card p{color:var(--muted);margin:0}
.icon-box{width:48px;height:48px;border-radius:14px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-size:23px}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
.stat{padding:19px;border:1px solid rgba(255,255,255,.22);border-radius:14px;background:rgba(255,255,255,.09)}
.stat strong{display:block;font-size:25px}
.stat span{font-size:13px;color:#d4e4ff}
.callout{border-radius:22px;padding:34px;background:linear-gradient(115deg,#eff5ff,#f1fbfc);border:1px solid #dce8ff;display:flex;align-items:center;justify-content:space-between;gap:24px}
.callout h2{font-size:28px;margin:0 0 8px}
.callout p{margin:0;color:var(--muted)}
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;position:relative}
.timeline .card{position:relative}
.day{font-size:12px;color:var(--brand);font-weight:850;letter-spacing:.1em;text-transform:uppercase}
.step-no{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:#fff;font-weight:800;margin-bottom:14px}
.penalty{font-size:30px;font-weight:850;color:var(--brand);letter-spacing:-.03em}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px}
table{width:100%;border-collapse:collapse;min-width:620px}
th,td{text-align:left;padding:15px 18px;border-bottom:1px solid var(--line);vertical-align:top}
th{background:#f2f6fd;color:#253a5d;font-size:13px}
td{font-size:14px;color:#46556d}
tr:last-child td{border-bottom:0}
.faq{max-width:850px;margin:auto}
.faq details{background:white;border:1px solid var(--line);border-radius:12px;padding:17px 20px;margin:10px 0}
.faq summary{cursor:pointer;font-weight:750;list-style:none;display:flex;justify-content:space-between;gap:18px}
.faq summary:after{content:"+";color:var(--brand);font-size:22px;line-height:1}
.faq details[open] summary:after{content:"−"}
.faq details p{color:var(--muted);margin:12px 0 0}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
label{font-size:13px;font-weight:750;color:#34435c}
input,select,textarea{width:100%;border:1px solid #d6deea;border-radius:9px;padding:12px 13px;font:inherit;color:var(--ink);background:white}
textarea{min-height:110px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:3px solid rgba(21,94,239,.12);border-color:var(--brand)}
.form-note{font-size:12px;color:var(--muted);margin-top:12px}
.notice{background:#fff9e9;border:1px solid #f3dfad;color:#71551b;border-radius:12px;padding:15px 17px;font-size:13px}
.breadcrumb{font-size:13px;color:#d7e6ff;margin-bottom:15px}
.page-hero{background:linear-gradient(115deg,#0e2b5c,#1557ad);color:white;padding:58px 0}
.page-hero h1{font-size:clamp(34px,4vw,48px);margin:10px 0}
.page-hero p{max-width:760px;color:#e1ecff;font-size:17px;margin:0}
.content h2{text-align:left;margin-top:0}
.content h3{margin:24px 0 8px}
.content p,.content li{color:#53627a}
.content ul{padding-left:21px}
.content li{margin:7px 0}
.definition{border-left:3px solid var(--brand);padding:12px 18px;background:#f5f8ff;margin:14px 0;border-radius:0 10px 10px 0}
.footer{background:#0d2348;color:#dce7fa;padding:52px 0 20px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:35px}
.footer h3{color:white;font-size:15px}
.footer p,.footer a{color:#b8c9e4;font-size:13px}
.footer a:hover{color:white}
.footer-bottom{border-top:1px solid rgba(255,255,255,.15);margin-top:30px;padding-top:17px;font-size:12px;color:#9db1d1}
.badge{display:inline-block;border-radius:999px;background:#eaf2ff;color:#1551b5;padding:5px 10px;font-size:11px;font-weight:800;letter-spacing:.04em}
.text-link{color:var(--brand);font-weight:750}
.small{font-size:12px;color:var(--muted)}
@media(max-width:900px){
 .hero-grid{grid-template-columns:1fr;gap:28px}.hero-art{max-width:540px;margin:auto}
 .grid-4{grid-template-columns:repeat(2,1fr)}.timeline{grid-template-columns:repeat(2,1fr)}
 .nav{gap:14px}.nav a{font-size:13px}
}
@media(max-width:768px){
 .topbar{display:none}
 .nav-inner{height:68px;padding:0 18px}.menu-toggle{display:block}
 .nav{display:none;position:absolute;top:68px;left:0;right:0;padding:12px 18px 17px;gap:3px;flex-direction:column;align-items:stretch;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
 .nav.open{display:flex}.nav a{padding:12px;font-size:12px}
 .nav .nav-cta{margin:4px 0 0;text-align:center}
}
@media(max-width:680px){
 .container{width:min(var(--max),calc(100% - 30px))}
 .hero{padding:60px 0 54px}.hero p{font-size:16px}
 .section{padding:55px 0}.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
 .timeline{grid-template-columns:1fr}.stat-row{grid-template-columns:1fr}
 .callout{display:block;padding:25px}.callout .btn{margin-top:18px}
 .form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}
 .footer-grid{grid-template-columns:1fr;gap:18px}
}
