:root{
  --bg:#12100e; --bg2:#1a1714; --panel:#211d19; --line:#332c25;
  --ink:#f4efe8; --ink2:#c9bfb2; --ink3:#8d8377;
  --amber:#e8a33d; --amber2:#f5c477;
  --maxw:1080px; --r:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.7 ui-sans-serif,-apple-system,"SF Pro SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
a{color:var(--amber2); text-decoration:none}
a:hover{text-decoration:underline}

/* film-grain overlay */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.5;
  background-image:url("/assets/grain.svg");
}

/* ── header ── */
header{
  position:sticky; top:0; z-index:20;
  backdrop-filter:blur(14px); background:rgba(18,16,14,.82);
  border-bottom:1px solid var(--line);
}
.hd{display:flex; align-items:center; gap:18px; height:64px}
.brand{display:flex; align-items:center; gap:10px; font-weight:650; letter-spacing:.02em; color:var(--ink)}
.brand:hover{text-decoration:none}
.brand svg{flex:0 0 auto}
.brand .sub{color:var(--ink3); font-weight:400; font-size:13px; letter-spacing:.06em}
nav{margin-left:auto; display:flex; align-items:center; gap:20px}
nav a{color:var(--ink2); font-size:14.5px}
nav a:hover{color:var(--ink); text-decoration:none}
.lang{display:flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; background:var(--bg2)}
.lang button{
  appearance:none; border:0; background:transparent; color:var(--ink3);
  font:inherit; font-size:13px; padding:6px 14px; cursor:pointer; letter-spacing:.03em;
}
.lang button[aria-pressed="true"]{background:var(--amber); color:#1b1408; font-weight:600}
@media(max-width:720px){ nav a{display:none} }

/* ── hero ── */
.hero{padding:92px 0 76px; position:relative; overflow:hidden}
.hero::after{
  content:""; position:absolute; top:-260px; right:-160px; width:620px; height:620px;
  background:radial-gradient(circle,rgba(232,163,61,.16),transparent 62%); pointer-events:none;
}
.eyebrow{
  display:inline-block; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--amber); border:1px solid rgba(232,163,61,.35); border-radius:999px; padding:5px 13px; margin-bottom:22px;
}
h1{font-size:clamp(34px,6vw,60px); line-height:1.1; margin:0 0 18px; letter-spacing:-.02em; font-weight:700}
h1 .accent{color:var(--amber)}
.lede{font-size:clamp(16px,2.2vw,19px); color:var(--ink2); max-width:62ch; margin:0 0 34px}
.tags{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:38px}
.tag{font-size:13px; color:var(--ink2); background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:5px 12px}

/* ── buttons ── */
.btns{display:flex; flex-wrap:wrap; gap:12px}
.btn{
  display:inline-flex; align-items:center; gap:9px; padding:12px 20px; border-radius:11px;
  font-weight:600; font-size:15px; border:1px solid transparent;
  transition:transform .15s ease, background .15s ease;
}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn-p{background:var(--amber); color:#1b1408}
.btn-p:hover{background:var(--amber2)}
.btn-s{background:var(--panel); color:var(--ink); border-color:var(--line)}
.btn-s:hover{border-color:var(--ink3)}

/* ── sections ── */
section{padding:72px 0; border-top:1px solid var(--line); position:relative; z-index:2}
h2{font-size:clamp(24px,3.4vw,34px); margin:0 0 12px; letter-spacing:-.01em; font-weight:680}
.sub{color:var(--ink2); max-width:64ch; margin:0 0 40px; font-size:16px}

.grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:22px}
.card h3{margin:0 0 8px; font-size:16.5px; font-weight:640; color:var(--ink)}
.card p{margin:0; color:var(--ink2); font-size:14.5px; line-height:1.65}
.card .ic{color:var(--amber); margin-bottom:13px; display:block}

/* ── company facts ── */
.facts{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.fact{display:grid; grid-template-columns:230px 1fr; gap:18px; padding:17px 22px; border-bottom:1px solid var(--line)}
.fact:last-child{border-bottom:0}
.fact dt{color:var(--ink3); font-size:13.5px; letter-spacing:.03em; text-transform:uppercase}
.fact dd{margin:0; color:var(--ink); font-size:15.5px}
@media(max-width:640px){ .fact{grid-template-columns:1fr; gap:4px} }

/* ── stores ── */
.stores{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.store{
  display:flex; align-items:center; gap:15px; background:var(--panel);
  border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; color:var(--ink);
}
.store:hover{border-color:var(--amber); text-decoration:none}
.store .ic{color:var(--amber); flex:0 0 auto}
.store b{display:block; font-size:15.5px; font-weight:640}
.store span{font-size:13px; color:var(--ink3)}

/* ── footer ── */
footer{border-top:1px solid var(--line); padding:44px 0 56px; color:var(--ink3); font-size:14px; position:relative; z-index:2}
footer .row{display:flex; flex-wrap:wrap; gap:26px; justify-content:space-between; align-items:flex-start}
footer .ent{color:var(--ink2); line-height:1.75}
footer .ent strong{color:var(--ink); font-weight:620}

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