:root { color-scheme: light dark; font-family: ui-sans-serif, system-ui, sans-serif; background:#f4f0e8; color:#11110f; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 75% 8%,#dbe0ff,transparent 30%),#f4f0e8; }
header,footer { display:flex; justify-content:space-between; padding:20px 28px; border-bottom:1px solid #bcb7ac; }
header span,footer { font-size:12px; color:#666158; }
main { display:grid; grid-template-columns:1fr 320px; gap:32px; max-width:1180px; margin:auto; padding:70px 28px; }
.intro { grid-column:1/-1; max-width:760px; }
.intro p { color:#445cff; font-size:13px; }
h1 { margin:8px 0 22px; font-family:Georgia,serif; font-size:clamp(42px,7vw,76px); font-weight:400; line-height:.98; }
.catalog { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
article,aside { border:1px solid #bcb7ac; border-radius:24px; background:rgba(255,255,255,.55); }
article { min-height:240px; padding:24px; }
article i { display:block; width:72px; height:72px; margin-bottom:28px; border-radius:50%; background:var(--accent); }
article h2,aside h2 { font-size:18px; }
article p { color:#666158; min-height:42px; }
article button { min-height:42px; padding:0 16px; border:0; border-radius:12px; color:white; background:#445cff; }
aside { align-self:start; position:sticky; top:24px; padding:24px; }
#cart div { display:flex; justify-content:space-between; padding:12px 0; border-top:1px solid #d2cdc3; }
@media(max-width:760px){main{grid-template-columns:1fr}.catalog{grid-template-columns:1fr}aside{position:static}}