:root{
  --bg:#f7fbff;
  --card:#ffffff;
  --text:#0b1b2e;
  --muted:#49627e;
  --brand:#1077ff;
  --brand-2:#22c1a7;
  --accent:#ffb703;
  --radius:22px;
  --shadow:0 12px 30px rgba(16,119,255,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg) url('../img/bg_pattern.svg') repeat;color:var(--text);font:16px/1.55 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial}
a{color:#0f6adf;text-decoration:none}
.container{max-width:1220px;margin:0 auto;padding:24px}
.header{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);border-bottom:1px solid #e4effa}
.nav{display:flex;gap:18px;align-items:center;justify-content:space-between;padding:14px 24px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.5px}
.logo .dot{width:14px;height:14px;border-radius:50%;background:conic-gradient(var(--brand),var(--brand-2),var(--accent),var(--brand));box-shadow:0 0 16px rgba(16,119,255,.4)}
.btn{display:inline-flex;gap:10px;align-items:center;border:1px solid #d7e9ff;background:#fff;color:var(--text);padding:12px 16px;border-radius:14px;cursor:pointer;transition:.2s;box-shadow:0 4px 12px rgba(16,119,255,.05)}
.btn:hover{transform:translateY(-1px);border-color:#cbe2ff}
.btn.brand{background:linear-gradient(90deg,var(--brand),#4aa2ff);border:0;color:#fff;font-weight:800;box-shadow:0 10px 20px rgba(16,119,255,.25)}
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:center;padding:48px 24px}
.hero .card{background:var(--card);padding:28px;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid #e3eefc}
.hero h1{font-size:46px;line-height:1.06;margin:0 0 12px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:16px}
.kpi{background:#ffffff;border:1px solid #e3eefc;padding:14px;border-radius:12px;text-align:center;box-shadow:0 6px 16px rgba(0,0,0,.03)}
.badge{font-size:12px;color:#fff;background:linear-gradient(90deg,var(--brand-2),#19b394);padding:5px 9px;border-radius:999px;display:inline-block}
.searchbar{display:flex;gap:10px;margin-top:12px}
.searchbar input, .searchbar select{flex:1;background:#fff;border:1px solid #dbe6f3;color:var(--text);padding:12px 14px;border-radius:12px;box-shadow:0 2px 8px rgba(15,26,43,.04)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid.cards{grid-template-columns:repeat(3,1fr)}
.card{background:var(--card);border:1px solid #e3eefc;border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.card h3{margin:0 0 6px}
.pill{display:inline-block;background:#eef6ff;border:1px solid #d8e9ff;color:#20456a;padding:6px 10px;border-radius:999px;font-size:12px}
.footer{border-top:1px solid #e3eefc;margin-top:40px;padding:30px;color:#5a7591;text-align:center;background:#fff}
.section{padding:26px 24px}
.section h2{margin:0 0 12px}
.list{display:flex;flex-wrap:wrap;gap:10px}
.star{filter:drop-shadow(0 2px 8px rgba(255,183,3,.25))}
.table{width:100%;border-collapse:collapse;border:1px solid #e3eefc;border-radius:12px;overflow:hidden;background:#fff}
.table th,.table td{border-bottom:1px solid #e3eefc;padding:12px;text-align:left}
.alert{background:#f5fbff;border:1px solid #d9edf9;padding:12px;border-radius:12px;color:#315d7a}
.banner{height:120px;border:2px dashed #cfe0f5;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#6583a4;background:#f9fcff}
.titleband{background:linear-gradient(180deg,#f3f9ff 0%,#f7fbff 100%);border-bottom:1px solid #e3eefc}
.titleband .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center}
.h1{font-size:46px}
.hero-ill{width:100%;height:auto;display:block;border-radius:18px;border:1px solid #e3eefc;box-shadow:0 8px 24px rgba(16,119,255,.08)}
.icon{width:28px;height:28px;vertical-align:-6px;margin-right:8px}
.cat-card{display:flex;align-items:center;gap:10px}
@media (max-width:1024px){
  .hero{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr 1fr}
  .grid.cards{grid-template-columns:1fr 1fr}
  .kpis{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .grid{grid-template-columns:1fr}
  .grid.cards{grid-template-columns:1fr}
}


/* === Step 8 Polish (UX, Brand, Perf, A11y) === */

/* Type scale & headings */
h1,h2,h3{letter-spacing:-.01em}
h1{font-weight:900}
h2{font-weight:800}

/* Consistent radius & shadows */
:root{--radius:20px; --shadow:0 12px 28px rgba(16,119,255,.10);}

/* Buttons hover/active & focus ring */
.btn{transition:transform .15s ease, box-shadow .2s ease, background-color .2s ease}
.btn:focus-visible{outline:3px solid #9fd2ff; outline-offset:2px; border-radius:14px}
.btn.brand:hover{transform:translateY(-1px); box-shadow:0 14px 28px rgba(16,119,255,.28)}
.btn:active{transform:translateY(0)}

/* Cards & lift on hover (desktop only) */
@media (hover:hover){
  .card:hover{transform:translateY(-2px); transition:transform .2s ease}
}

/* Hero layout balance */
.hero{gap:34px}
.hero .card{border-radius:22px}
.hero .card img{height:auto; width:100%; border-radius:18px}

/* KPI badges spacing */
.kpis .kpi{padding:16px}

/* Category icons alignment */
.cat-card .icon{flex:0 0 28px}

/* Banner belt refined */
#promo-belt .card{padding:12px}
.banner{height:100px}
.banner img{display:block; max-height:100px}

/* Reviews typography */
.reviews .rev{background:#fff;border:1px solid #e3eefc;border-radius:14px;padding:14px;box-shadow:0 4px 12px rgba(0,0,0,.03)}

/* Footer contrast & spacing */
.footer{color:#5a7591;background:#fff}

/* Motion preference */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}

/* Small utilities */
.hidden{display:none}
.visually-hidden{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}

/* STEP 13: hero illustration on right, larger category tiles */
.hero .ill {background:#ffffff;border:1px solid #e3eefc;border-radius:22px;box-shadow:0 10px 24px rgba(16,119,255,.08);padding:8px}
.hero .ill img{display:block;width:100%;height:auto;border-radius:18px}
.cat-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cat-tile{display:grid;grid-template-columns:140px 1fr;gap:12px;align-items:center;background:#fff;border:1px solid #e3eefc;border-radius:18px;padding:16px;box-shadow:0 8px 18px rgba(0,0,0,.04)}
.cat-tile .thumb{background:#f3f9ff;border:1px solid #e3eefc;border-radius:14px;height:120px;display:flex;align-items:center;justify-content:center}
.cat-tile .thumb img{max-height:100px;width:auto}
.cat-tile h3{margin:0 0 6px;font-size:20px}
@media (max-width:1024px){.cat-tiles{grid-template-columns:1fr 1fr}.cat-tile{grid-template-columns:1fr} .cat-tile .thumb{height:160px}}
@media (max-width:640px){.cat-tiles{grid-template-columns:1fr}}