:root { --ink:#10213b; --muted:#62718a; --blue:#1d61dd; --teal:#078b87; --line:#dce5f0; --bg:#f6f8fc; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--bg); font-family:Inter,Segoe UI,Arial,sans-serif; }
.site-header { max-width:1180px; min-height:86px; padding:18px 28px; margin:auto; display:flex; justify-content:space-between; align-items:center; }
.brand img { width:225px; max-width:55vw; display:block; }
.header-login,.primary-action,.secondary-action { border-radius:10px; padding:12px 18px; text-decoration:none; font-weight:700; }
.header-login { color:var(--blue); border:1px solid #b8cdf6; background:#fff; }
main { max-width:1180px; padding:20px 28px 62px; margin:auto; }
.hero { min-height:420px; border-radius:28px; padding:60px; display:grid; grid-template-columns:1.35fr .65fr; gap:42px; align-items:center; background:linear-gradient(120deg,#0d797b,#134a86); color:#fff; box-shadow:0 20px 44px #0a376033; }
.eyebrow { margin:0 0 15px; letter-spacing:.12em; font-size:.78rem; font-weight:800; text-transform:uppercase; opacity:.86; }
h1 { max-width:660px; font-size:clamp(2.35rem,5vw,4.5rem); line-height:1.03; letter-spacing:-.045em; margin:0; }
.lead { font-size:1.15rem; line-height:1.6; max-width:640px; margin:24px 0 30px; color:#e6f4ff; }
.actions { display:flex; flex-wrap:wrap; gap:14px; }
.primary-action { color:#124678; background:#fff; }
.secondary-action { color:#fff; border:1px solid #a8d8ec; }
.hero-panel { padding:29px; border:1px solid #8bd1d3; border-radius:20px; background:#ffffff17; display:grid; gap:12px; backdrop-filter:blur(5px); }
.hero-panel p { margin:0; font-size:.9rem; color:#d7fbfa; }
.hero-panel strong { font-size:1.75rem; line-height:1.16; }
.hero-panel span { color:#e7f9fb; line-height:1.5; }
.features { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:28px; }
.features article { min-height:230px; padding:27px; border:1px solid var(--line); border-radius:18px; background:#fff; }
.features span { display:block; color:var(--blue); font-size:.78rem; font-weight:800; letter-spacing:.1em; }
.features h2 { font-size:1.22rem; margin:20px 0 10px; }
.features p { margin:0; color:var(--muted); line-height:1.55; }
footer { min-height:90px; border-top:1px solid var(--line); background:#fff; display:flex; justify-content:center; align-items:center; gap:10px; color:var(--ink); font-weight:800; padding:22px 28px; }
footer img { width:29px; height:29px; } footer small { color:var(--muted); font-weight:500; margin-left:8px; }
@media (max-width:800px) { .site-header,main { padding-left:18px; padding-right:18px; } .hero { padding:38px 28px; grid-template-columns:1fr; } .features { grid-template-columns:1fr 1fr; } }
@media (max-width:520px) { .site-header { min-height:76px; } .header-login { padding:10px 12px; font-size:.9rem; } .hero { border-radius:20px; padding:34px 23px; } .features { grid-template-columns:1fr; } footer { flex-wrap:wrap; } footer small { width:100%; text-align:center; margin:0; } }