:root { --brand:#0b77d8; --brand-2:#0bc48f; --ink:#0f172a; --muted:#475569; --bg:#e9ecf5; }
* { box-sizing:border-box; }
body { margin:0; font-family:'Manrope','Inter',system-ui,-apple-system,sans-serif; background:radial-gradient(circle at 10% 20%,#f3f8ff 0,#e6eef8 50%,#dfe7f3 100%); color:var(--ink); }
.skip-links { position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-links:focus-within { position:static; width:auto; height:auto; margin:8px; }
.skip-link { display:inline-block; padding:8px 12px; background:#0b77d8; color:#fff; font-weight:800; border-radius:10px; text-decoration:none; position:absolute; left:-999px; top:auto; }
.skip-link:focus { position:static; outline:2px solid #0bc48f; outline-offset:2px; }
.back-to-top { position:fixed; right:18px; bottom:18px; padding:12px 14px; border-radius:14px; background:#000; color:#fff; border:2px solid #fff; font-weight:900; font-size:18px; line-height:1; box-shadow:0 12px 24px rgba(0,0,0,0.25); cursor:pointer; opacity:0; pointer-events:none; transition:opacity 0.2s ease, transform 0.2s ease; transform:translateY(8px); display:flex; align-items:center; justify-content:center; text-decoration:none; z-index:999; }
.back-to-top, .back-to-top.is-visible { color:#fff !important; background-color:#000 !important; text-shadow:0 1px 2px rgba(0,0,0,0.35); }
.back-to-top:focus { outline:2px solid #0bc48f; outline-offset:2px; }
.back-to-top.is-visible { opacity:1; pointer-events:auto; transform:translateY(0); }
.page { max-width: 1200px; margin: 0 auto; padding: 32px 16px 64px; }
.hero { background: linear-gradient(135deg, rgba(11,119,216,0.12), rgba(11,196,143,0.12)); border:1px solid rgba(11,119,216,0.12); border-radius: 32px; padding: 28px; box-shadow: 0 20px 60px rgba(15,23,42,0.08), 0 10px 30px rgba(15,23,42,0.05); display:grid; grid-template-columns: 1.2fr 0.8fr; gap:24px; align-items:center; }
.hero h1 { margin:0 0 12px; font-size:34px; letter-spacing:-0.02em; }
.hero p { margin:0 0 10px; color:var(--muted); font-size:16px; }
.badge-row { display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.badge { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:14px; background:#fff; border:1px solid rgba(11,119,216,0.14); color:var(--ink); font-weight:700; box-shadow:0 10px 30px rgba(12,44,99,0.08); }
.search { background:#fff; border-radius:16px; padding:16px; border:1px solid rgba(15,23,42,0.08); box-shadow:0 14px 30px rgba(15,23,42,0.08); display:grid; grid-template-columns: 1fr 280px; gap:16px; align-items:center; }
.search--spaced { margin-top:16px; }
.search-fields { display:flex; flex-direction:column; gap:12px; }
.search input { flex:1; min-width:220px; padding:14px 16px; border-radius:12px; border:1px solid rgba(15,23,42,0.12); font-size:15px; width:100%; }
.filters { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.filters-inline { display:flex; gap:10px; }
.filters-half { flex:1; }
.filters-inline select, .filters-inline .chip-toggle--full { width:100%; }
.chip-toggle { border:1px solid rgba(11,119,216,0.2); background:rgba(11,119,216,0.06); color:var(--ink); border-radius:12px; padding:10px 12px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:8px; }
.chip-toggle--full { justify-content:center; height:48px; }
.chip-toggle[aria-pressed='true'] { background: linear-gradient(135deg, #0b77d8, #0bc48f); color:#fff; box-shadow:0 10px 24px rgba(11,119,216,0.2); }
.chip-toggle svg { width:18px; height:18px; stroke: currentColor; }
.chip-toggle.disabled { opacity:0.4; cursor:not-allowed; }
select { padding:14px 16px; border-radius:12px; border:1px solid rgba(15,23,42,0.12); font-size:15px; min-width:200px; height:48px; background:#fff; }
.search-actions { display:flex; gap:8px; align-items:center; }
.search-note { color:var(--muted); font-size:13px; }
.btn { background: linear-gradient(135deg,#0b77d8,#0bc48f); color:#fff; border:none; padding:12px 16px; border-radius:12px; font-weight:800; cursor:pointer; box-shadow:0 12px 30px rgba(11,119,216,0.25); display:inline-flex; align-items:center; gap:8px; }
.btn-wide { width:100%; justify-content:center; padding:14px 18px; font-size:16px; }
.btn svg { width:18px; height:18px; stroke:#fff; }
.illustration { background:#fff; border-radius:24px; height:100%; min-height:200px; display:grid; place-items:center; border:1px solid rgba(11,119,216,0.12); overflow:hidden; box-shadow:0 16px 36px rgba(15,23,42,0.08); }
.illustration img { width:100%; height:100%; object-fit:cover; display:block; }
.site-header { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-radius:16px; background:rgba(255,255,255,0.8); border:1px solid rgba(15,23,42,0.08); backdrop-filter: blur(12px); box-shadow:0 12px 30px rgba(12,44,99,0.08); margin-bottom:18px; }
.site-header .brand { display:flex; align-items:center; gap:10px; font-weight:900; color:var(--ink); text-decoration:none; letter-spacing:-0.01em; }
.site-header .brand img { width:38px; height:38px; border-radius:12px; object-fit:cover; }
.site-footer { margin-top:48px; padding:18px; text-align:center; color:var(--muted); font-size:14px; }
.section { margin-top:46px; background:#fff; border-radius:24px; padding:26px; border:1px solid rgba(15,23,42,0.06); box-shadow:0 16px 36px rgba(15,23,42,0.08); }
.section h2 { margin:0 0 12px; font-size:24px; letter-spacing:-0.01em; }
.section p { margin:0 0 10px; color:var(--muted); line-height:1.6; }
.grid { display:grid; gap:16px; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); }
.grid-two { grid-template-columns: repeat(auto-fit,minmax(320px,1fr)); }
.grid-two--columns { grid-template-columns: repeat(2,minmax(0,1fr)); grid-auto-flow: column; grid-template-rows: repeat(2, auto); }
.grid-two--columns > * { height:100%; }
.featured-grid { display:flex; flex-direction:column; gap:12px; }
.card { background:linear-gradient(140deg, #f7fbff, #eef4ff); border:1px solid rgba(11,119,216,0.08); border-radius:18px; padding:18px; box-shadow:0 12px 28px rgba(15,23,42,0.08); position:relative; overflow:hidden; }
.card-split { display:flex; flex-direction:column; gap:12px; min-height:210px; }
.card-split img { width:100%; height:180px; object-fit:cover; border-radius:12px; display:block; }
.card-text { justify-content:center; }
.card h3 { margin:0 0 10px; font-size:18px; }
.card p { margin:0 0 10px; color:var(--muted); }
.pill { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:12px; background:#fff; border:1px solid rgba(11,119,216,0.12); font-weight:700; color:var(--ink); }
.placeholder-img { height:200px; border-radius:14px; background:linear-gradient(135deg, rgba(11,119,216,0.15), rgba(11,196,143,0.12)); border:1px solid rgba(11,119,216,0.2); box-sizing:border-box; display:grid; place-items:center; color:var(--muted); font-weight:700; overflow:hidden; padding:12px; }
.placeholder-img img { max-width:100%; max-height:172px; width:auto; height:auto; object-fit:contain; display:block; margin:0 auto; }
.eco-foot { margin-top:48px; background:#081051; color:#e5e7eb; border-radius:22px; padding:26px 22px 28px; box-shadow:0 16px 40px rgba(8,16,81,0.28); border:1px solid rgba(255,255,255,0.06); }
.eco-foot h3 { margin:0 0 10px; font-size:18px; letter-spacing:-0.01em; color:#b3e8d8; }
.eco-foot p { margin:0 0 12px; color:#dce6f9; }
.eco-highlight { background:rgba(11,196,143,0.25); color:#0bc48f; padding:2px 6px; border-radius:8px; font-weight:800; }
.eco-bar { position:relative; height:82px; border-radius:30px; overflow:hidden; background: linear-gradient(90deg, #00e5ff 0%, #00e676 20%, #8bc34a 35%, #cddc39 50%, #ffeb3b 60%, #ffc107 70%, #ff9800 80%, #ff5722 90%, #f44336 100%); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.12); max-width:96%; margin:0 auto; }
.eco-bar .labels { position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; padding:0 16px; font-weight:800; color:#0f172a; mix-blend-mode:multiply; }
.eco-marker { position:absolute; top:4px; transform:none; font-weight:800; color:#fff; text-shadow:0 2px 6px rgba(0,0,0,0.45); white-space:nowrap; padding:5px 10px; border-radius:12px; }
.eco-marker--us { left:3%; background:rgba(255,255,255,0.24); color:#fff; }
.eco-marker--avg { left:78%; background:rgba(255,122,0,0.9); color:#fff; }
.eco-info { margin:16px 0 0; color:#ffffff; text-align:center; font-weight:700; }
.eco-info a { color:#ffffff; font-weight:800; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; }
.section-verify { margin-top:22px; }
.verify-grid { display:grid; gap:12px; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); list-style:none; padding:0; margin:0; }
.verify-card { display:flex; gap:10px; align-items:flex-start; padding:12px; border:1px solid rgba(12,44,99,0.08); border-radius:14px; background:rgba(248,250,252,0.9); box-shadow:0 8px 18px rgba(12,44,99,0.06); }
.verify-icon { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-weight:900; color:#fff; background:#0b77d8; border:1px solid #0a5fb5; text-shadow:0 1px 2px rgba(0,0,0,0.35); }
.verify-card h3 { margin:0 0 4px; font-size:16px; }
.verify-card p { margin:0; color:#475569; }
.list-muted { margin:0 0 8px 18px; color:var(--muted); }
.disclaimer { color:var(--muted); font-size:13px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.title-with-icon { display:flex; align-items:center; gap:8px; }
.title-with-icon svg { width:22px; height:22px; flex-shrink:0; }
.featured-hero-list { display:flex; flex-direction:column; gap:14px; }
.featured-card { padding:18px; border-radius:24px; position:relative; overflow:hidden; }
.featured-card--hero { background:#fff; border:1px solid rgba(11,119,216,0.08); box-shadow:0 16px 34px rgba(12,44,99,0.10); }
.featured-card__layout { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px; }
.featured-card__avatar { width:96px; height:96px; border-radius:24px; overflow:hidden; background:linear-gradient(135deg,#0b77d8,#2ad3ff); border:1px solid rgba(255,255,255,0.55); box-shadow:0 12px 32px rgba(11,119,216,0.22); display:grid; place-items:center; flex-shrink:0; }
.featured-card__avatar picture, .featured-card__avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.featured-avatar__placeholder { font-weight:900; color:#fff; font-size:28px; letter-spacing:0.3px; }
.featured-card__body { display:flex; flex-direction:column; gap:6px; }
.featured-card__name { margin:0; font-size:22px; letter-spacing:-0.01em; }
.featured-card__chips { display:flex; flex-wrap:wrap; gap:10px; margin:2px 0 6px; }
.featured-chip { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:14px; font-weight:800; border:1px solid transparent; background:rgba(255,255,255,0.7); box-shadow:0 10px 24px rgba(12,44,99,0.08); color:var(--ink); text-decoration:none; }
.featured-chip .icon { width:18px; height:18px; }
.featured-chip--area { background:rgba(11,119,216,0.08); border-color:rgba(11,119,216,0.25); }
.featured-chip--spec { background:rgba(11,196,143,0.12); border-color:rgba(11,196,143,0.35); color:#0b4f38; }
.featured-chip--mode { background:rgba(11,119,216,0.06); border-color:rgba(11,119,216,0.18); }
.featured-card__meta { margin:0; color:var(--muted); font-weight:700; }
.featured-card__cta { align-self:flex-start; box-shadow:0 10px 22px rgba(11,119,216,0.25); }
@media (max-width: 900px) { .hero { grid-template-columns:1fr; } .search { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .grid-two--columns { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
  .featured-card__layout { grid-template-columns: auto 1fr; }
  .featured-card__cta { grid-column: 1 / -1; justify-self:flex-start; margin-top:6px; }
  .featured-card__avatar { width:78px; height:78px; border-radius:18px; }
  .featured-card__name { font-size:20px; }
  .placeholder-img { background:none; border:none; padding:0; height:auto; display:block; }
  .placeholder-img img { max-width:100%; max-height:none; width:100%; height:auto; border-radius:12px; }
  .eco-marker--avg { left:60%; }
}