:root { --ink:#172033; --muted:#526078; --brand:#2457d6; --brand2:#00a3a3; --paper:#fff; --wash:#f4f7fc; --line:#d7deea; --good:#137333; --warn:#9a5b00; font-size:18px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--wash); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:1rem; line-height:1.58; }
a { color:#164dbf; }
button,input,textarea,select { font:inherit; }
button,.button { min-height:48px; min-width:48px; border:0; border-radius:12px; padding:.72rem 1.15rem; font-weight:700; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:.45rem; }
.primary { color:#fff; background:var(--brand); box-shadow:0 7px 22px #2457d62b; }
.secondary { color:var(--brand); background:#e8efff; }
.ghost { color:var(--ink); background:transparent; border:2px solid var(--line); }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline:4px solid #ffbf47; outline-offset:2px; }
header { background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10; }
.nav { max-width:1180px; margin:auto; padding:.65rem 1rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brand { display:flex; align-items:center; gap:.65rem; color:var(--ink); text-decoration:none; font-size:1.15rem; font-weight:800; }
.brand img { width:48px; height:48px; border-radius:12px; }
.nav-links { display:flex; align-items:center; flex-wrap:wrap; gap:.55rem 1rem; }
.nav-links a { color:var(--ink); }
main { max-width:1180px; margin:auto; padding:1rem; }
.hero { margin:1.3rem 0 2rem; padding:clamp(1.3rem,5vw,4rem); border-radius:28px; color:#fff; background:linear-gradient(135deg,#112c72,#2457d6 55%,#008d94); display:grid; grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr); gap:2rem; align-items:center; }
.hero-logo { width:min(100%,320px); margin:auto; border-radius:28%; filter:drop-shadow(0 18px 25px #07193b66); }
h1 { font-size:clamp(2rem,5vw,3.3rem); line-height:1.08; margin:.3rem 0 1rem; }
h2 { font-size:clamp(1.55rem,3vw,2.05rem); line-height:1.25; }
h3 { font-size:1.25rem; }
.eyebrow { font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.lead { font-size:1.15rem; }
.muted { color:var(--muted); }
.hero .muted { color:#e8efff; }
.actions,.platforms { display:flex; flex-wrap:wrap; gap:.75rem; margin:1.2rem 0; }
.platform { flex:1 1 220px; }
.card,.panel { background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:1.35rem; box-shadow:0 10px 28px #263b6410; }
.grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin:1rem 0 2rem; }
.steps { counter-reset:step; }
.steps .card::before { counter-increment:step; content:counter(step); display:grid; place-items:center; width:44px; height:44px; border-radius:50%; color:#fff; background:var(--brand); font-weight:800; }
.download-box { margin:1.5rem 0; }
.field { position:relative; margin:.75rem 0 1rem; }
label { display:block; font-weight:750; margin-bottom:.35rem; }
input,textarea,select { width:100%; min-height:52px; border:2px solid #b7c2d5; border-radius:12px; background:#fff; color:var(--ink); padding:.72rem 3.1rem .72rem .8rem; }
textarea { min-height:120px; resize:vertical; overflow:hidden; }
.clear-field { position:absolute; right:.32rem; top:2.42rem; min-width:44px; min-height:44px; padding:0; border-radius:10px; background:#edf1f7; color:#28354b; display:none; }
.field.has-text .clear-field { display:inline-grid; }
.notice { border-left:6px solid var(--brand); background:#edf3ff; border-radius:8px; padding:.9rem 1rem; }
.notice.error { border-color:#b3261e; background:#fff0ef; }
.notice.success { border-color:var(--good); background:#effbf2; }
.metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.75rem; }
.metric { padding:1rem; border-radius:16px; background:#f7f9fd; border:1px solid var(--line); }
.metric strong { display:block; font-size:1.55rem; }
.qr { width:240px; max-width:100%; background:white; padding:10px; border:1px solid var(--line); border-radius:12px; }
table { width:100%; border-collapse:collapse; }
th,td { text-align:left; padding:.75rem; border-bottom:1px solid var(--line); vertical-align:top; }
footer { margin-top:3rem; background:#172033; color:#fff; }
footer .wrap { max-width:1180px; margin:auto; padding:1.6rem 1rem; }
footer a { color:#dce7ff; }
.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; overflow:hidden!important; clip:rect(1px,1px,1px,1px)!important; }
@media (max-width:800px) { .hero { grid-template-columns:1fr; } .hero-logo { max-width:210px; } .grid,.metrics { grid-template-columns:1fr; } .nav-links a:not(.button) { display:none; } }
@media (min-width:801px) and (max-width:1050px) { .grid { grid-template-columns:repeat(2,1fr); } .metrics { grid-template-columns:repeat(2,1fr); } }
/* Full-screen traffic monitor */
.traffic-monitor { position:fixed; inset:0; z-index:50; overflow:auto; padding:clamp(18px,4vw,56px); background:#0d1422f2; backdrop-filter:blur(16px); }
.traffic-monitor-entry { display:block; width:100%; margin:1rem 0 1.5rem; min-height:78px; padding:1rem 1.4rem; border:0; border-radius:16px; background:#bd1f2d; color:#fff; font-size:clamp(24px,3vw,34px); font-weight:850; letter-spacing:.01em; box-shadow:0 10px 24px #bd1f2d55; cursor:pointer; }
.traffic-monitor-entry:hover { background:#d72b3b; }
.traffic-monitor-entry:focus-visible { outline:4px solid #172033; outline-offset:4px; }
.traffic-monitor-card { max-width:1500px; margin:0 auto; padding:clamp(20px,4vw,48px); border:1px solid #ffffff2b; border-radius:24px; background:#f8fbff; color:#172033; box-shadow:0 24px 80px #0008; }
.traffic-monitor header { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin-bottom:1.5rem; }
.traffic-monitor h2 { margin:0; font-size:clamp(28px,4vw,44px); }
.traffic-monitor h3 { margin-top:0; font-size:22px; }
.traffic-monitor .panel { margin-top:1rem; }
.traffic-daily { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; }
.traffic-day { padding:14px; border-radius:14px; background:#eaf2fb; border:1px solid #c9d9eb; }
.traffic-day strong { display:block; font-size:24px; }
.traffic-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:1rem; }
.traffic-monitor td, .traffic-monitor th { white-space:nowrap; }
@media (max-width: 900px) { .traffic-grid { grid-template-columns:1fr; } }