:root{
  --bg: #FFFFFF;
  --surface: #F8FAFC;
  --text: #0F172A;
  --muted: #64748B;
  --primary: #1F3A8A;
  --secondary: #7C3AED;
  --accent: #FF6B00;
  --card: #ffffff;
  --shadow: 0 12px 30px rgba(2,8,23,.10);
}
html,body{margin:0;padding:0}
body{background: var(--bg); color: var(--text); font: 16px/1.6 TitilliumWeb, "Open Sans", Arial, sans-serif}
img{max-width:100%;display:block}
a{color: var(--primary); text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(1120px,92%); margin:0 auto}
.grid-2{display:grid; gap:28px; grid-template-columns:1fr}
.grid-3{display:grid; gap:18px; grid-template-columns:1fr}
@media(min-width:900px){
  .grid-2{grid-template-columns:1.2fr .8fr}
  .grid-3{grid-template-columns:repeat(3,1fr)}
}
.center{text-align:center} .narrow{max-width:720px;margin:60px auto}
.btn,.btn-alt{display:inline-block; padding:12px 18px; border-radius:14px; font-weight:700; box-shadow:var(--shadow); transition:transform .16s ease, box-shadow .16s ease}
.btn{background: linear-gradient(135deg, var(--accent), var(--secondary)); color:#fff}
.btn:hover{transform:translateY(-2px); box-shadow:0 18px 44px rgba(2,8,23,.18)}
.btn-alt{background: linear-gradient(135deg, #E2E8F0, #fff); color:#0f172a; border:1px solid #e5e7eb}
.link{font-weight:600}
.card{background:var(--card); border:1px solid #e5e7eb; border-radius:16px; padding:18px; box-shadow:var(--shadow)}
.card.tile{padding:22px}
.page-head{margin:28px 0 12px} .page-cta{margin:28px 0 60px} .mt-40{margin-top:40px}
ul.benefits, .checklist{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:14px 0 0; padding:0 0 0 18px}
.form label{display:block; margin:10px 0}
.form input,.form select,.form textarea{width:100%; padding:12px; border:1px solid #e5e7eb; border-radius:10px; outline:none; font-family:TitilliumWeb, "Open Sans", Arial, sans-serif}
.form input:focus,.form select:focus,.form textarea:focus{border-color: var(--primary); box-shadow:0 8px 20px rgba(2,8,23,.06)}
.form .check{display:flex; gap:8px; align-items:flex-start}

.hero{position:relative; overflow:hidden; padding:70px 0; background: linear-gradient(115deg, #ffffff, #F8FAFC)}
.hero .mark{background: linear-gradient(90deg, var(--accent), var(--secondary)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero .mark.alt{background: linear-gradient(90deg, var(--secondary), var(--primary)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero-light .decor{position:absolute; border-radius:50%; filter: blur(50px); opacity:.25; pointer-events:none}
.hero-light .decor-1{width:360px; height:360px; background: radial-gradient(circle at 30% 30%, var(--secondary), transparent 60%); top:-120px; right:-140px}
.hero-light .decor-2{width:300px; height:300px; background: radial-gradient(circle at 70% 70%, var(--accent), transparent 60%); bottom:-120px; left:-140px}
.hero-inner{display:grid; gap:26px; grid-template-columns:1fr}
@media(min-width:980px){ .hero-inner{grid-template-columns:1.1fr .9fr} }
.trust{display:flex; align-items:center; gap:12px; margin-top:18px}
.trust .dots{height:8px; flex:1; background-image: radial-gradient(var(--muted) 1px, transparent 1px); background-size: 10px 10px; background-repeat: repeat-x}
.features .cards{margin-top:18px}
.split{display:grid; gap:18px; grid-template-columns:1fr}
@media(min-width:980px){ .split{grid-template-columns:1.1fr .9fr} }
.split-card{background:linear-gradient(135deg, #fff, #F8FAFC)}

.cta-band{background: linear-gradient(90deg, var(--accent), var(--secondary)); color:#fff; padding:46px 0; margin:60px 0 0; text-align:center}

.site-footer{background:#0E1217; color:#e5e7eb; padding:26px 0; margin-top:60px}
.site-footer a{color:#cbd5e1}
.site-header{position:sticky; top:0; z-index:50; background:#fff; box-shadow:0 6px 20px rgba(2,8,23,.06); border-bottom:3px solid var(--primary)}
.site-header .nav{display:flex; align-items:center; justify-content:space-between; padding:12px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:900; color:var(--text)}
.menu{display:flex; gap:16px; align-items:center}
.menu a{padding:8px 10px; border-radius:10px}
#nav-toggle{display:none}
.burger{display:none; cursor:pointer}
.burger span{display:block; width:24px; height:2px; background:var(--text); margin:5px 0; border-radius:2px}
@media(max-width:760px){
  .burger{display:block}
  .menu{position:absolute; top:64px; right:4%; background:#fff; padding:12px; border-radius:12px; box-shadow:var(--shadow); display:none; flex-direction:column; min-width:240px}
  #nav-toggle:checked ~ .menu{display:flex}
}