:root{--bg:#E4E7EB;--ink:#14171B;--muted:#58616C;--card:#FFFFFF;--line:rgba(20,23,27,.1);--accent:#2F5BD3;color-scheme:light;box-sizing:border-box}
@media (prefers-color-scheme: dark){:root{--bg:#121519;--ink:#EEF1F4;--muted:#9AA3AE;--card:#1B1F25;--line:rgba(255,255,255,.09);--accent:#86A4FF;color-scheme:dark}}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;min-height:100dvh;background:var(--bg);color:var(--ink);font-family:"Arquivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.45;
  padding:max(28px,env(safe-area-inset-top)) clamp(18px,5vw,64px) max(28px,env(safe-area-inset-bottom))}
.wrap{max-width:1100px;margin:0 auto}
h1{margin:0;font-stretch:70%;font-weight:800;font-size:clamp(44px,9vw,120px);line-height:.9;letter-spacing:-.02em}
h1 span{font-weight:300;opacity:.6}
.lede{margin:.8em 0 0;max-width:46ch;color:var(--muted);font-size:clamp(16px,1.6vw,20px)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:clamp(28px,5vw,56px)}
a.card{display:block;text-decoration:none;color:inherit;background:var(--card);border-radius:24px;padding:26px 26px 22px;box-shadow:inset 0 0 0 1px var(--line);transition:transform .25s cubic-bezier(.2,1,.3,1),box-shadow .25s}
a.card:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--line),0 18px 40px rgba(0,0,0,.12)}
a.card:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.shape{height:150px;display:grid;place-items:center;margin-bottom:18px}
.duo{display:flex;width:190px;height:120px}
.duo i{flex:1;background:linear-gradient(150deg,#46506A,#2A3243);border-radius:16px 3px 3px 16px;box-shadow:inset 0 0 0 4px #0b0d12}
.duo i+i{border-radius:3px 16px 16px 3px}
.tabshape{width:200px;height:140px;border-radius:18px;background:linear-gradient(150deg,#46506A,#2A3243);box-shadow:inset 0 0 0 5px #0b0d12}
h2{margin:0;font-stretch:80%;font-weight:800;font-size:30px;letter-spacing:-.01em}
.card p{margin:.4em 0 0;color:var(--muted)}
.go{display:inline-block;margin-top:14px;font-weight:700;color:var(--accent)}
footer{margin-top:40px;color:var(--muted);font-size:14px}
@media (prefers-reduced-motion: reduce){a.card{transition:none}}
.foneshape{width:70px;height:140px;border-radius:16px;background:linear-gradient(150deg,#46506A,#2A3243);box-shadow:inset 0 0 0 4px #0b0d12}
.macshape{display:flex;flex-direction:column;align-items:center}
.macshape::before{content:"";width:190px;height:118px;border-radius:10px 10px 2px 2px;background:linear-gradient(150deg,#46506A,#2A3243);box-shadow:inset 0 0 0 5px #0b0d12}
.macshape i{width:220px;height:9px;border-radius:0 0 8px 8px;background:#9ea2a9}
.grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.audioshape{position:relative;width:170px;height:130px}
.audioshape i{position:absolute;left:18px;top:6px;width:110px;height:110px;border-radius:50%;border:12px solid #2A3243;border-bottom-color:transparent;box-sizing:border-box}
.audioshape i::before,.audioshape i::after{content:"";position:absolute;bottom:-18px;width:30px;height:52px;border-radius:12px;background:linear-gradient(150deg,#46506A,#2A3243);box-shadow:inset 0 0 0 3px #0b0d12}
.audioshape i::before{left:-20px}.audioshape i::after{right:-20px}
.audioshape b{position:absolute;right:0;bottom:4px;width:52px;height:38px;border-radius:16px;background:linear-gradient(150deg,#46506A,#2A3243);box-shadow:inset 0 0 0 3px #0b0d12}