:root { color-scheme:light dark; --bg:#f4f1e8; --surface:#fffdf8; --card:#ffffffb8; --ink:#15231c; --muted:#5e6b64; --brand:#2f6b50; --accent:#a8d8bd; --line:#d5ddd7; --badge:#0b0d0c; --badge-ink:#fff; }
* { box-sizing:border-box; }
body { margin:0; font:16px/1.6 system-ui,-apple-system,sans-serif; color:var(--ink); background:radial-gradient(circle at 78% 8%,#dbe9df 0,transparent 34%),var(--bg); }
.wrap { width:min(1040px,calc(100% - 40px)); margin:auto; }
nav { display:flex; align-items:center; justify-content:space-between; padding:24px 0; }
.brand { color:var(--ink); font-weight:800; text-decoration:none; font-size:1.2rem; }
nav div { display:flex; gap:20px; } nav div a { color:var(--muted); }
.hero { min-height:68vh; display:grid; place-content:center; text-align:center; padding:72px 0; }
.mark { width:82px; height:82px; margin:auto; display:grid; place-items:center; border-radius:24px; background:var(--brand); color:white; font-size:40px; box-shadow:0 20px 50px #315d4a44; }
h1 { font-size:clamp(42px,8vw,78px); line-height:1; margin:28px 0 18px; letter-spacing:-.05em; }
.lead { max-width:650px; margin:0 auto 30px; color:var(--muted); font-size:1.18rem; }
.stores { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.store-badge { min-width:190px; height:64px; display:flex; align-items:center; gap:12px; padding:9px 17px; border:1px solid #ffffff40; border-radius:14px; background:var(--badge); color:var(--badge-ink); text-decoration:none; text-align:left; box-shadow:0 12px 28px #0000001f; transition:transform .2s ease,box-shadow .2s ease; }
.store-badge:hover { transform:translateY(-2px); box-shadow:0 16px 34px #0000002e; }
.store-badge svg { width:31px; height:31px; flex:none; }
.store-copy { display:flex; flex-direction:column; line-height:1.05; }
.store-copy small { margin-bottom:5px; font-size:10px; letter-spacing:.04em; text-transform:uppercase; opacity:.76; }
.store-copy strong { font-size:20px; letter-spacing:-.02em; }
.coming { margin-left:auto; align-self:flex-start; padding:3px 7px; border-radius:20px; background:#ffffff1c; font-size:9px; text-transform:uppercase; letter-spacing:.05em; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding:40px 0 90px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:24px; padding:26px; backdrop-filter:blur(16px); }
.card h2 { margin-top:0; font-size:1.15rem; }
main.policy { max-width:780px; padding:40px 0 90px; } main.policy h1 { font-size:42px; }
footer { border-top:1px solid var(--line); padding:26px 0 40px; color:var(--muted); }
footer .wrap { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }
a { color:var(--brand); }
@media(max-width:700px){ .grid{grid-template-columns:1fr} nav div{gap:10px;font-size:.9rem} }
@media(prefers-color-scheme:dark){ :root{--bg:#0d1410;--surface:#121b16;--card:#16221bcc;--ink:#f1f6f2;--muted:#a8b6ad;--brand:#8ed0aa;--accent:#8ed0aa;--line:#2d4135;--badge:#050706;--badge-ink:#fff} body{background:radial-gradient(circle at 78% 2%,#20382a 0,transparent 31%),linear-gradient(145deg,#0b110d,#101913 60%,#0c120e)} .mark{background:#8ed0aa;color:#102018;box-shadow:0 20px 50px #0008} nav div a{color:#b8c5bc} }