:root{
  --bg: #ffffff;
  --ink: #0b1f33;
  --muted: #4c5b6a;
  --line: #e8eef5;
  --brand-1:#1CD7FF;
  --brand-2:#1147D9;
  --brand-3:#0b2f8a;
  --accent:#1147D9;
  --accent-2:#1CD7FF;
  --card:#ffffff;
  --shadow: 0 22px 50px rgba(17,71,217,.10);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1240px;margin:0 auto;padding:0 32px}

.header{position:sticky; top:0; z-index:50; background:#fffffff2; backdrop-filter:saturate(120%) blur(10px); border-bottom:1px solid var(--line)}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:20px 0;}
.header .brand{display:flex; gap:12px; align-items:center}
.header img{height:50px; width:auto}
nav a{margin:0 18px; font-weight:600; color:#23384d}
nav a:hover{color:var(--accent)}
.badge{color:#23384d; font-weight:700; font-size:12px; letter-spacing:.08em}

.btn{display:inline-block; padding:14px 20px; border-radius:14px; font-weight:700;
  background:linear-gradient(90deg,var(--brand-2),var(--brand-1)); color:white; box-shadow:var(--shadow);
  transition: transform .1s ease, box-shadow .2s ease;}
.btn:hover{transform:translateY(-2px); box-shadow: 0 28px 56px rgba(16,113,208,.18)}
.btn.ghost{background:transparent; color:var(--accent); border:1px solid var(--accent)}

.hero{padding:130px 0 70px; background:
 radial-gradient(1000px 460px at 18% 0%, rgba(28,215,255,.10), transparent 60%),
 radial-gradient(800px 380px at 85% 0%, rgba(17,71,217,.08), transparent 60%);
 border-bottom:1px solid var(--line);
}
.hero h1{font-size:52px; line-height:1.04; margin:14px 0 18px}
.hero p{color:var(--muted); font-size:19px; max-width:880px}
.grid{display:grid; gap:30px}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1080px){.grid.cols-3{grid-template-columns:1fr} .hero h1{font-size:44px}}

.section{padding:110px 0; position:relative}
.section + .section{border-top:1px solid var(--line)}
.section h2{font-size:34px;margin:0 0 18px}

.split{display:grid; grid-template-columns:1.1fr .9fr; gap:48px}
@media (max-width:940px){.split{grid-template-columns:1fr}}

.card{background:var(--card); border:1px solid var(--line); border-radius:20px; padding:30px; box-shadow:var(--shadow)}
.card h3{margin:18px 0 12px; font-size:24px}
.card p{color:var(--muted); margin:12px 0 16px}
.card ul{margin:12px 0 16px 22px; color:var(--muted); line-height:1.7}
.card .cta-wrap{margin-top:18px}

.icon{
  width:56px;height:56px; border-radius:14px; display:grid;place-items:center;
  background:linear-gradient(180deg,var(--brand-1),var(--brand-2)); color:white; box-shadow:var(--shadow);
  margin-bottom:12px;
}

.illus{
  background:linear-gradient(180deg,#f7fbff,#ffffff);
  border:1px dashed var(--line);
  border-radius:18px; padding:22px; display:grid; place-items:center; min-height:280px;
}

.form{
  background:linear-gradient(90deg, rgba(28,215,255,.08), rgba(17,71,217,.08));
  border:1px solid var(--line); border-radius:20px; padding:30px;
}
.form label{display:block; font-weight:600; margin:10px 0 8px}
.form input, .form textarea{
  width:100%; padding:14px 16px; border-radius:12px; border:1px solid var(--line);
  font:inherit; color:var(--ink); background:white;
}
.form textarea{min-height:160px; resize:vertical}
.form .row{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media (max-width:760px){.form .row{grid-template-columns:1fr}}

.footer{background:#0b1f33; color:#cbd8e6; border-top:1px solid #0a1a2a;}
.footer .container{padding:48px 32px}
.footer h4{margin:0 0 12px; color:white; font-size:16px}
.footer a{color:#cfe7ff}
.footer .cols{display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:32px}
.footer .legal{border-top:1px solid #132c47; margin-top:26px; padding-top:16px; font-size:13px; display:flex; gap:12px; flex-wrap:wrap; justify-content:space-between}
@media (max-width:1020px){.footer .cols{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.footer .cols{grid-template-columns:1fr}}
.badge-mini{display:inline-block; font-size:12px; background:#0f2744; color:#cfe7ff; padding:4px 8px; border-radius:999px}