:root{--ink:#10222b;--muted:#60727b;--paper:#f6f7f3;--card:#fff;--accent:#e65d3f;--accent2:#123e4a;--line:#dbe1df;--ok:#1f7258}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font:16px/1.65 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:var(--paper)}
a{color:#155b70;text-decoration-thickness:1px;text-underline-offset:3px}a:hover{color:#0d3946}img{max-width:100%}
.wrap{width:min(1120px,92%);margin:auto}.top{background:#0d2c35;color:#e8f1f2;font-size:.86rem;padding:.5rem 0}.top a{color:#fff}
header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}.nav{display:flex;align-items:center;justify-content:space-between;min-height:68px;gap:1rem}.brand{font-weight:850;color:var(--ink);text-decoration:none;letter-spacing:-.02em}.brand span{color:var(--accent)}
nav{display:flex;gap:1.15rem;align-items:center}nav a{text-decoration:none;color:var(--ink);font-weight:650;font-size:.94rem}.menu{display:none;border:0;background:none;font-size:1.6rem}
.hero{padding:5rem 0 3.5rem;background:linear-gradient(135deg,#f7f7f2 0%,#e7efed 100%)}.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:3rem;align-items:center}
.eyebrow{font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);font-size:.78rem}.hero h1,h1{font-size:clamp(2.2rem,5vw,4.6rem);line-height:1.02;letter-spacing:-.055em;margin:.4rem 0 1rem}.hero p{font-size:1.15rem;color:var(--muted);max-width:700px}
.phone-art{aspect-ratio:1/1;border-radius:32px;background:radial-gradient(circle at 60% 35%,#ec755b 0 8%,transparent 9%),linear-gradient(145deg,#173c46,#091b21);position:relative;box-shadow:0 25px 60px #0c30333b}.phone-art:after{content:"4K • STORAGE • LENS • PLATFORM";position:absolute;bottom:12%;left:10%;right:10%;color:#fff;font-weight:800;letter-spacing:.08em;text-align:center}
.btn{display:inline-block;background:var(--accent);color:#fff!important;text-decoration:none;padding:.85rem 1.1rem;border-radius:10px;font-weight:800;border:0;cursor:pointer}.btn.secondary{background:var(--accent2)}.btn.ghost{background:#fff;color:var(--accent2)!important;border:1px solid var(--line)}
section{padding:3.5rem 0}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:1.35rem;box-shadow:0 8px 24px #1d333008}.card h3{margin-top:.2rem}.card p{color:var(--muted)}
.kicker{color:var(--accent);font-weight:800}.prose{width:min(780px,92%);margin:3rem auto}.prose h2{font-size:1.7rem;margin-top:2.2rem}.prose h3{margin-top:1.7rem}.prose p,.prose li{color:#334a54}.notice{background:#fff6e8;border-left:4px solid #df8a22;padding:1rem 1.2rem;border-radius:8px}.affiliate-box{background:#e8f0ef;border:1px solid #cbdad7;padding:1.3rem;border-radius:14px;margin:2rem 0}.compare{width:100%;border-collapse:collapse;background:#fff}.compare th,.compare td{padding:.9rem;border:1px solid var(--line);text-align:left}.compare th{background:#e8efed}
.breadcrumb{font-size:.88rem;color:var(--muted);margin-top:1.2rem}.related{background:#e9efed}.related h2{margin-top:0}
footer{background:#0d2c35;color:#cbd9dc;padding:3rem 0;margin-top:3rem}footer a{color:#fff}.footgrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem}
.popup{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);width:min(680px,92%);background:#fff;border:1px solid var(--line);box-shadow:0 18px 60px #0b222866;border-radius:16px;padding:1rem 3rem 1rem 1rem;z-index:50;display:none}.popup.show{display:block}.close{position:absolute;right:12px;top:8px;border:0;background:none;font-size:1.5rem;cursor:pointer}
.small{font-size:.86rem;color:var(--muted)}.tag{display:inline-block;background:#edf1ef;border-radius:999px;padding:.25rem .65rem;margin:.15rem;font-size:.82rem}
@media(max-width:760px){.hero-grid,.grid,.footgrid{grid-template-columns:1fr}.hero{padding-top:3rem}.phone-art{max-width:420px}.menu{display:block}nav{display:none;position:absolute;left:0;right:0;top:68px;background:#fff;padding:1rem 4%;border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start}nav.open{display:flex}.compare{font-size:.88rem}.prose{margin-top:2rem}}