:root { --ink:#172140; --paper:#fbf8f0; --cream:#f2ecd9; --purple:#6448e8; --violet:#a349dc; --orange:#ff9b46; --teal:#20b9a8; --pink:#ee5b83; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color:inherit; text-underline-offset:3px; }
.site-header, main, footer { max-width:1180px; margin:auto; padding-left:32px; padding-right:32px; }
.site-header { height:88px; display:flex; justify-content:space-between; align-items:center; }
.brand { display:inline-flex; align-items:center; gap:9px; font-weight:800; text-decoration:none; letter-spacing:-.04em; font-size:1.16rem; }
.brand-mark { display:grid; place-items:center; width:25px; height:25px; color:white; background:var(--purple); border-radius:8px 8px 12px 12px; font-size:1.5rem; line-height:12px; transform:rotate(180deg); }
nav { display:flex; gap:28px; font-size:.9rem; font-weight:650; }
nav a { text-decoration:none; }
nav a:hover, footer a:hover { color:var(--purple); }
.hero { min-height:595px; padding:70px 7% 82px; overflow:hidden; border-radius:32px; background:radial-gradient(circle at 76% 18%, #ffe9a3 0 7%, transparent 24%), linear-gradient(135deg,#f2dfdf 0%,#fcebd7 50%,#e7e0fa 100%); display:grid; grid-template-columns:1fr 1fr; align-items:center; position:relative; }
.eyebrow { color:#675b83; font-size:.76rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; margin:0 0 15px; }
h1,h2,h3,p { margin-top:0; }
h1,h2 { font-family:Georgia, "Times New Roman", serif; letter-spacing:-.06em; line-height:.95; }
h1 { font-size:clamp(3.3rem,6.4vw,6rem); margin-bottom:26px; max-width:590px; }
h1 em { color:var(--purple); font-weight:normal; }
.lede { max-width:450px; color:#3f4561; font-size:1.08rem; line-height:1.7; }
.button { display:inline-flex; align-items:center; gap:14px; margin-top:15px; padding:14px 19px; color:#fff; background:var(--ink); border-radius:999px; font-weight:750; text-decoration:none; box-shadow:0 8px 0 #0d1229; }
.button:hover { transform:translateY(-2px); box-shadow:0 10px 0 #0d1229; }
.puzzle-art { height:420px; position:relative; min-width:390px; }
.bottle { position:absolute; bottom:25px; width:96px; height:275px; overflow:hidden; border:5px solid rgba(23,33,64,.78); border-top-width:10px; border-radius:18px 18px 32px 32px; background:rgba(255,255,255,.28); box-shadow:inset 13px 0 rgba(255,255,255,.32), 7px 13px 0 rgba(23,33,64,.11); }
.bottle:before { content:""; position:absolute; z-index:4; left:25px; top:-35px; width:35px; height:33px; border:5px solid rgba(23,33,64,.78); border-bottom:0; border-radius:9px 9px 0 0; background:#f8ead9; }
.bottle i { display:block; height:25%; }
.bottle-a { left:8%; }.bottle-a i:nth-child(1){background:var(--orange)}.bottle-a i:nth-child(2){background:var(--purple)}.bottle-a i:nth-child(3){background:var(--teal)}.bottle-a i:nth-child(4){background:var(--pink)}
.bottle-b { left:41%; height:296px; }.bottle-b i:nth-child(1){background:var(--pink)}.bottle-b i:nth-child(2){background:var(--orange)}.bottle-b i:nth-child(3){background:var(--purple)}.bottle-b i:nth-child(4){background:var(--teal)}
.bottle-c { right:5%; }.bottle-c i:nth-child(1){background:var(--teal)}.bottle-c i:nth-child(2){background:var(--pink)}.bottle-c i:nth-child(3){background:var(--orange)}.bottle-c i:nth-child(4){background:var(--purple)}
.tilted { transform:rotate(18deg); transform-origin:50% 95%; bottom:118px; }.pour-stream { position:absolute; left:54%; top:100px; height:133px; width:20px; border-radius:20px; background:var(--teal); transform:rotate(-12deg); }.spark { position:absolute; color:#ffab45; font-size:30px; }.spark-one{top:35px;right:9%}.spark-two{top:119px;left:10%;font-size:18px;color:var(--violet)}
.steps { padding-top:135px; padding-bottom:130px; }.section-heading { display:flex; align-items:end; justify-content:space-between; border-bottom:1px solid #d8d2c6; padding-bottom:28px; }.section-heading h2 { margin:0; font-size:clamp(2.5rem,4vw,4.1rem); max-width:620px; }.steps ol { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,1fr); }.steps li { padding:35px 30px 5px 0; }.steps li+li { padding-left:30px; border-left:1px solid #d8d2c6; }.steps span { color:var(--purple); font-size:.78rem; font-weight:800; }.steps h3 { margin:18px 0 10px; font-size:1.25rem; letter-spacing:-.04em; }.steps li p { line-height:1.65; color:#555d73; max-width:270px; }
.quiet-puzzle { margin-bottom:80px; min-height:335px; overflow:hidden; padding:60px 8%; display:flex; justify-content:space-between; align-items:center; border-radius:30px; color:#fff; background:#26367b; }.quiet-puzzle h2 { margin:0; font-size:clamp(2.35rem,4vw,4rem); }.quiet-puzzle .eyebrow { color:#c3cdfb; }.mini-bottles { display:flex; gap:13px; align-items:end; height:180px; }.mini-bottles b { width:46px; height:150px; border:4px solid #b9d2ff; border-radius:10px 10px 19px 19px; background:linear-gradient(#f0bf36 0 25%,#e75d80 25% 50%,#39bdb1 50% 75%,#9254e5 75%); }.mini-bottles b:nth-child(even){height:120px;background:linear-gradient(#9254e5 0 25%,#f0bf36 25% 50%,#e75d80 50% 75%,#39bdb1 75%)}
footer { min-height:115px; border-top:1px solid #d8d2c6; display:flex; align-items:center; gap:24px; font-size:.85rem; color:#5f6475; } footer p { margin:0 auto 0 0; } footer div { display:flex; gap:20px; } footer a { text-decoration:none; }
.legal { max-width:800px; padding-top:72px; padding-bottom:88px; }.legal h1 { font-size:clamp(2.8rem,5vw,4.5rem); margin-bottom:13px; }.legal .updated { color:#626a7b; margin-bottom:50px; }.legal h2 { font-size:1.75rem; letter-spacing:-.04em; line-height:1.1; margin:42px 0 14px; }.legal p, .legal li { line-height:1.72; color:#3f465a; }.legal ul { padding-left:24px; }.legal a { color:#4733b8; }
@media (max-width:760px){.site-header, main, footer{padding-left:20px;padding-right:20px}.site-header{height:76px}nav{gap:14px;font-size:.78rem}.hero{margin:0;min-height:680px;padding:60px 9% 30px;grid-template-columns:1fr;border-radius:0}.puzzle-art{transform:scale(.78);transform-origin:bottom center;margin:-10px auto -75px;min-width:350px}.steps{padding:85px 0}.section-heading{display:block}.section-heading h2{margin-top:15px}.steps ol{grid-template-columns:1fr}.steps li,.steps li+li{padding:27px 0;border-left:0;border-bottom:1px solid #d8d2c6}.quiet-puzzle{margin:0 -20px 45px;border-radius:0;display:block}.mini-bottles{transform:scale(.8);transform-origin:left bottom;margin-top:35px}.legal{padding-top:48px}footer{min-height:150px;align-items:flex-start;flex-wrap:wrap;padding-top:28px;gap:15px}footer p{width:100%;order:3}footer div{gap:15px}}