@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#07111f;--panel:#0d1b2d;--panel2:#12233a;--text:#ecf4ff;--muted:#9eb0c8;
  --accent:#38bdf8;--accent2:#22d3ee;--line:#20334d;--white:#fff;--success:#34d399;
  --shadow:0 18px 60px rgba(0,0,0,.3);--radius:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.65}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
.site-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:16px clamp(20px,5vw,72px);background:rgba(7,17,31,.9);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.06)}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.05rem}.brand strong{color:var(--accent)}
.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#042036;font-weight:900}
.main-nav{display:flex;gap:26px;color:var(--muted);font-size:.94rem}.main-nav a:hover{color:var(--white)}
.menu-button{display:none;background:none;border:1px solid var(--line);border-radius:10px;color:var(--text);padding:8px 12px}
.hero{min-height:640px;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:70px;padding:90px clamp(24px,7vw,110px);background:
radial-gradient(circle at 75% 35%,rgba(56,189,248,.18),transparent 30%),
linear-gradient(160deg,#07111f 40%,#0b1c34)}
.hero-copy{max-width:720px}.eyebrow{display:inline-block;color:var(--accent);font-size:.75rem;font-weight:800;letter-spacing:.16em;margin-bottom:12px}
h1{font-size:clamp(2.6rem,6vw,5.6rem);line-height:1.03;letter-spacing:-.055em;margin:0 0 24px}
h2{font-size:clamp(2rem,4vw,3.4rem);line-height:1.12;letter-spacing:-.04em;margin:0 0 14px}
h3{line-height:1.25}.hero p{font-size:1.08rem;color:var(--muted);max-width:650px;margin-bottom:32px}
.primary-button{display:inline-flex;justify-content:center;align-items:center;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#032032;border:0;border-radius:13px;padding:14px 22px;font-weight:800;cursor:pointer;box-shadow:0 10px 30px rgba(34,211,238,.18)}
.primary-button:hover{transform:translateY(-1px);filter:brightness(1.06)}
.hero-card{position:relative;min-height:380px}.laptop{position:absolute;width:260px;height:170px;border:1px solid rgba(255,255,255,.16);border-radius:18px;background:linear-gradient(145deg,#18334f,#0b1727);box-shadow:var(--shadow);display:flex;flex-direction:column;justify-content:center;align-items:center}
.laptop:after{content:"";position:absolute;left:-18px;right:-18px;bottom:-13px;height:12px;border-radius:0 0 15px 15px;background:#718095}
.laptop span{color:var(--muted)}.laptop b{font-size:3rem;color:var(--accent)}.laptop-a{top:35px;left:0;transform:rotate(-5deg)}.laptop-b{right:0;bottom:35px;transform:rotate(5deg)}.versus{position:absolute;inset:0;display:grid;place-items:center;font-weight:900;font-size:2rem;color:#fff;text-shadow:0 0 25px var(--accent)}
.section{padding:100px clamp(24px,7vw,110px)}.muted-section{background:#0a1728}.section-heading{max-width:740px;margin-bottom:44px}.section-heading p,.editorial p{color:var(--muted)}
.ad-slot{margin:42px auto;max-width:970px;min-height:100px;border:1px dashed #37506c;border-radius:14px;display:grid;place-items:center;text-align:center;color:#71859f;background:#091626}.ad-slot small{display:block;font-size:.65rem;letter-spacing:.15em}.ad-slot-bottom{margin-bottom:80px}
.compare-picker{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:end;max-width:1000px;margin:auto}.compare-picker label{font-weight:700;color:#dbeafe}.compare-picker input{display:block;width:100%;margin-top:9px;padding:16px 18px;border-radius:13px;border:1px solid var(--line);background:#0a1727;color:var(--text);outline:none}.compare-picker input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(56,189,248,.12)}
.swap-button{height:54px;width:54px;border:1px solid var(--line);border-radius:50%;background:var(--panel);color:var(--accent);cursor:pointer;font-size:1.5rem}.compare-button{display:flex;margin:25px auto 0}.form-message{text-align:center;color:#fda4af;min-height:24px}
.comparison-result{margin-top:55px}.hidden{display:none}.winner-banner{padding:28px;border-radius:var(--radius);background:linear-gradient(135deg,rgba(56,189,248,.14),rgba(34,211,238,.05));border:1px solid rgba(56,189,248,.25);text-align:center}.winner-banner span{font-size:.7rem;color:var(--accent);font-weight:800;letter-spacing:.16em}.winner-banner h3{font-size:1.8rem;margin:7px 0}.winner-banner p{margin:0;color:var(--muted)}
.score-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:20px 0}.score-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:28px;text-align:center}.score-ring{margin:22px auto;width:125px;height:125px;border-radius:50%;border:10px solid var(--accent);display:grid;place-content:center}.score-ring span{font-size:2.2rem;font-weight:900}.score-ring small{color:var(--muted)}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:18px}table{border-collapse:collapse;width:100%;min-width:720px;background:var(--panel)}th,td{text-align:left;padding:17px 20px;border-bottom:1px solid var(--line)}th{background:#10223a;color:#bcd0e8;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em}td:last-child{color:var(--success);font-weight:700}.method-note{color:var(--muted);font-size:.8rem}
.guide-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.guide-grid article,.popular-card{padding:26px;background:var(--panel);border:1px solid var(--line);border-radius:18px}.guide-grid span{font-weight:900;color:var(--accent)}.guide-grid h3{margin:14px 0 8px}.guide-grid p{color:var(--muted);font-size:.92rem}
.popular-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.popular-card{cursor:pointer;transition:.2s}.popular-card:hover{transform:translateY(-4px);border-color:#3d6687}.popular-card small{color:var(--accent);font-weight:800}.popular-card h3{font-size:1rem}.popular-card p{color:var(--muted);margin-bottom:0}
.editorial{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:start;background:linear-gradient(135deg,#0c1c31,#07111f)}
footer{padding:55px clamp(24px,7vw,110px);border-top:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:30px;color:var(--muted)}.footer-brand{color:var(--text)}.footer-links{display:flex;gap:20px;flex-wrap:wrap}.copyright{grid-column:1/-1;border-top:1px solid var(--line);padding-top:20px;font-size:.82rem}
.legal-page{max-width:900px;margin:auto;padding:80px 24px 120px}.legal-page h1{font-size:clamp(2.3rem,6vw,4.5rem)}.legal-page h2{font-size:1.45rem;margin-top:35px}.legal-page p,.legal-page li{color:var(--muted)}.contact-form{display:grid;gap:15px;max-width:650px}.contact-form input,.contact-form textarea{padding:14px;border-radius:11px;border:1px solid var(--line);background:var(--panel);color:var(--text)}.contact-form textarea{min-height:160px}
@media(max-width:900px){.hero{grid-template-columns:1fr;min-height:auto}.hero-card{display:none}.guide-grid{grid-template-columns:1fr 1fr}.popular-grid{grid-template-columns:1fr 1fr}.editorial{grid-template-columns:1fr}.main-nav{display:none;position:absolute;top:67px;left:0;right:0;padding:20px;background:#07111f;flex-direction:column}.main-nav.open{display:flex}.menu-button{display:block}}
@media(max-width:620px){.hero,.section{padding:65px 20px}.compare-picker{grid-template-columns:1fr}.swap-button{margin:auto;transform:rotate(90deg)}.score-grid,.guide-grid,.popular-grid{grid-template-columns:1fr}footer{grid-template-columns:1fr}.footer-links{flex-direction:column;gap:10px}}