*{margin:0;padding:0;box-sizing:border-box}
:root{--cream:#fff4dc;--green:#154734;--mint:#c9f2d1;--pink:#ff8fb3;--orange:#ffb347;--brown:#3b2517}
body{font-family:Arial,Helvetica,sans-serif;background:var(--cream);color:var(--green);overflow-x:hidden}
a{text-decoration:none;color:inherit}
.noise{position:fixed;inset:0;pointer-events:none;opacity:.07;background-image:radial-gradient(#154734 1px, transparent 1px);background-size:18px 18px}
header{min-height:100vh;padding:28px 6vw;background:radial-gradient(circle at 15% 20%,var(--mint),transparent 28%),radial-gradient(circle at 85% 25%,#ffd5e3,transparent 30%),var(--cream)}
nav{display:flex;justify-content:space-between;align-items:center}
.logo{font-size:1.8rem;font-weight:950;letter-spacing:-.06em}
.navlinks{display:flex;gap:24px;font-weight:800}
.hero{min-height:calc(100vh - 80px);display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}
.hero-text span,.title span,.vibe-text span{text-transform:uppercase;letter-spacing:.15em;font-weight:900;font-size:.8rem;color:#e96894}
h1{font-size:clamp(4rem,8vw,8.4rem);line-height:.82;letter-spacing:-.1em;margin:18px 0}
.hero-text p{font-size:1.25rem;max-width:560px;color:#37634d;margin-bottom:28px}
.cta{display:inline-flex;background:var(--green);color:var(--cream);padding:16px 26px;border-radius:999px;font-weight:900;box-shadow:8px 8px 0 var(--pink)}
.hero-card{justify-self:center;width:min(360px,100%);height:440px;background:var(--pink);border:4px solid var(--green);border-radius:42px;padding:34px;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:18px 18px 0 var(--green);transform:rotate(4deg)}
.cup{font-size:7rem;margin-bottom:auto;text-align:center;filter:drop-shadow(8px 8px 0 rgba(21,71,52,.18))}
.hero-card h3{font-size:2.4rem;line-height:.9;letter-spacing:-.08em}
.hero-card p{margin-top:12px;color:#fff4dc;font-weight:700}
.marquee{padding:22px 0;background:var(--green);color:var(--cream);font-size:2.2rem;font-weight:950;white-space:nowrap;overflow:hidden}
.marquee span{display:block;animation:move 12s linear infinite}
@keyframes move{to{transform:translateX(-50%)}}
.products{padding:95px 7vw}
.title h2,.vibe-text h2,.visit h2{font-size:clamp(3rem,6vw,6rem);line-height:.86;letter-spacing:-.09em}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}
.product{background:#fff;border:4px solid var(--green);border-radius:34px;padding:28px;min-height:330px;box-shadow:10px 10px 0 var(--green)}
.product.hot{background:var(--orange)}
.emoji{font-size:4.8rem;margin-bottom:30px}
.product h3{font-size:2rem;letter-spacing:-.07em;margin-bottom:10px}
.product p{color:#37634d;margin-bottom:18px}
.product strong{font-size:1.6rem}
.vibe{display:grid;grid-template-columns:.8fr 1fr .8fr;gap:26px;align-items:center;padding:90px 7vw;background:#d9f8df}
.photo{height:520px;border-radius:42px;border:4px solid var(--green);box-shadow:12px 12px 0 var(--green);background-size:cover;background-position:center}
.one{background-image:url('https://images.unsplash.com/photo-1501339847302-ac426a4a7cbb?auto=format&fit=crop&w=900&q=80')}
.two{background-image:url('https://images.unsplash.com/photo-1442512595331-e89e73853f31?auto=format&fit=crop&w=900&q=80')}
.vibe-text p{font-size:1.1rem;color:#37634d;margin-top:20px}
.visit{text-align:center;padding:100px 7vw;background:var(--pink)}
.visit p{font-weight:800;margin:20px 0 26px}
.visit-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.visit-actions a{background:var(--green);color:var(--cream);padding:14px 24px;border-radius:999px;font-weight:900}
footer{padding:28px;text-align:center;font-weight:800}
@media(max-width:850px){.navlinks{display:none}.hero,.product-grid,.vibe{grid-template-columns:1fr}.hero-card{transform:none}.photo{height:340px}h1{font-size:4.2rem}}

html{scroll-behavior:smooth}
a,.cta,.visit-actions button,.product,.hero-card{transition:.25s ease}
.navlinks a:hover{color:#e96894;transform:translateY(-2px)}
.cta:hover{transform:translate(-3px,-3px);box-shadow:12px 12px 0 var(--pink)}
.product:hover{transform:translateY(-9px) rotate(-1deg);box-shadow:15px 15px 0 var(--green)}
.visit-actions button{background:var(--green);color:var(--cream);padding:14px 24px;border-radius:999px;font-weight:900;border:none;cursor:pointer}
.visit-actions button:hover{transform:translateY(-3px);background:#0f3526}
.hero-card:hover{transform:rotate(2deg) translateY(-8px)}

.popup{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:22px;z-index:80}
.popup.active{display:flex}
.popup-bg{position:absolute;inset:0;background:rgba(21,71,52,.48);backdrop-filter:blur(12px)}
.popup-card{position:relative;width:min(430px,100%);background:var(--cream);border:4px solid var(--green);border-radius:34px;padding:30px;text-align:center;box-shadow:14px 14px 0 var(--green)}
.popup-close{position:absolute;right:14px;top:14px;width:38px;height:38px;border:3px solid var(--green);border-radius:999px;background:#fff;color:var(--green);font-size:1.5rem;cursor:pointer}
.popup-emoji{font-size:4.2rem}
.popup-card h3{font-size:2.5rem;letter-spacing:-.08em;margin:8px 0}
.popup-card p{color:#37634d;font-weight:800;line-height:1.5}
.popup-action{margin-top:18px;background:var(--pink);border:3px solid var(--green);border-radius:999px;padding:12px 20px;font-weight:950;color:var(--green);cursor:pointer}
.popup-action:hover{transform:translateY(-2px)}