/* ── Swaff — Spritz palette ── */
:root{
  --cocoa:#2A1410;
  --tangerine:#FF5A1F;
  --raspberry:#E0156B;
  --sun:#F4B400;
  --paper:#FFF4E8;
  --white:#FFFFFF;

  --display:'Syne',sans-serif;
  --body:'Hanken Grotesque',system-ui,sans-serif;

  --maxw:1080px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}
body{
  font-family:var(--body);
  background:var(--paper);
  color:var(--cocoa);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.dot{color:var(--tangerine)}

/* subtle paper grain */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
}

a{color:inherit}

/* ── Nav ── */
.nav{
  max-width:var(--maxw);margin:0 auto;padding:1.5rem 2rem;
  display:flex;align-items:center;justify-content:space-between;
}
.brand{
  font-family:var(--display);font-weight:600;font-size:1.6rem;
  letter-spacing:-.04em;text-decoration:none;color:var(--cocoa);
}
.nav nav{display:flex;align-items:center;gap:1.6rem}
.nav nav a{font-size:.9rem;font-weight:600;text-decoration:none;color:var(--cocoa);opacity:.8;transition:.2s}
.nav nav a:hover{opacity:1}
.nav nav a.pill{
  background:var(--cocoa);color:var(--paper);opacity:1;
  padding:.5rem 1.1rem;border-radius:100px;
}
.nav nav a.pill:hover{background:var(--tangerine)}

/* ── Hero ── */
.hero{
  max-width:var(--maxw);margin:0 auto;padding:3rem 2rem 5rem;
  display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center;
}
.eyebrow{
  display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tangerine);margin-bottom:1.2rem;
}
.hero h1{
  font-family:var(--display);font-weight:600;font-size:clamp(3rem,8vw,5.5rem);
  line-height:.98;letter-spacing:-.04em;
}
.lede{font-size:1.15rem;max-width:38ch;margin-top:1.5rem;color:#54392c}
.cta{display:flex;gap:.8rem;margin-top:2rem;flex-wrap:wrap}
.soon{margin-top:1.2rem;font-size:.85rem;font-weight:600;color:var(--raspberry)}

/* staggered load */
.hero-copy>*{opacity:0;transform:translateY(14px);animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
.hero-copy .eyebrow{animation-delay:.05s}
.hero-copy h1{animation-delay:.15s}
.hero-copy .lede{animation-delay:.28s}
.hero-copy .cta{animation-delay:.4s}
.hero-copy .soon{animation-delay:.5s}
@keyframes rise{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.hero-copy>*{animation:none;opacity:1;transform:none}}

/* ── Buttons ── */
.btn{
  font-family:var(--body);font-weight:700;font-size:.92rem;text-decoration:none;
  padding:.8rem 1.6rem;border-radius:6px;display:inline-block;cursor:pointer;
  border:1.5px solid transparent;transition:.2s;
}
.btn-primary{background:var(--cocoa);color:var(--paper)}
.btn-primary:hover{background:var(--tangerine)}
.btn-ghost{background:transparent;color:var(--cocoa);border-color:var(--cocoa)}
.btn-ghost:hover{background:var(--cocoa);color:var(--paper)}

/* ── CSS can ── */
.can-stage{display:flex;justify-content:center;animation:floaty 6s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@media(prefers-reduced-motion:reduce){.can-stage{animation:none}}
.can{
  position:relative;width:220px;height:400px;border-radius:18px;background:var(--paper);
  box-shadow:0 30px 50px -20px rgba(42,20,16,.4),0 6px 16px rgba(42,20,16,.12);
  overflow:hidden;isolation:isolate;
}
.can::after{
  content:"";position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:18px;
  background:linear-gradient(90deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,0) 16%,
    rgba(255,255,255,.5) 44%,rgba(255,255,255,.15) 56%,rgba(0,0,0,0) 84%,rgba(0,0,0,.18) 100%);
}
.can .lid{
  position:absolute;top:0;left:0;right:0;height:20px;z-index:6;
  background:linear-gradient(180deg,#cfcfd4,#9a9aa0 55%,#bcbcc2);border-bottom:1px solid rgba(0,0,0,.18);
}
.can .lid::before{content:"";position:absolute;top:5px;left:50%;transform:translateX(-50%);
  width:32px;height:8px;border-radius:6px;background:linear-gradient(180deg,#7d7d83,#b6b6bc)}
.can .label{
  position:absolute;inset:20px 0 0;z-index:3;display:flex;flex-direction:column;align-items:center;
  padding:2rem 1.3rem 1.5rem;color:var(--cocoa);text-align:center;
}
.can .ce{font-size:.58rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;opacity:.7}
.can .cm{font-family:var(--display);font-weight:600;font-size:3rem;letter-spacing:-.04em;line-height:1;margin-top:1.3rem}
.can .cband{align-self:stretch;margin:1.6rem -1.3rem 0;background:var(--tangerine);
  color:var(--paper);padding:.5rem 0;text-align:center;font-family:var(--display);font-weight:600;font-size:1.05rem}
.can .ctags{margin-top:auto;display:flex;flex-direction:column;gap:.25rem}
.can .ctags .t1{font-size:.6rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase}
.can .ctags .t2{font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;opacity:.6}
.can .fizz{position:absolute;inset:0;z-index:2;pointer-events:none}
.can .fizz i{position:absolute;border-radius:50%;background:var(--raspberry);opacity:.45}
.can .fizz i:nth-child(1){width:8px;height:8px;top:38%;left:18%}
.can .fizz i:nth-child(2){width:5px;height:5px;top:30%;left:78%}
.can .fizz i:nth-child(3){width:11px;height:11px;top:62%;left:80%;opacity:.3}
.can .fizz i:nth-child(4){width:6px;height:6px;top:70%;left:14%;opacity:.4}
.can .fizz i:nth-child(5){width:4px;height:4px;top:50%;left:86%}

/* ── Section shared ── */
.kicker{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tangerine);margin-bottom:1rem}
section h2{font-family:var(--display);font-weight:600;font-size:clamp(1.8rem,4vw,2.6rem);
  letter-spacing:-.02em;line-height:1.05}

/* ── What ── */
.what{max-width:var(--maxw);margin:0 auto;padding:4rem 2rem;border-top:1px solid #ecdcc6}
.what-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.what-points p{font-size:1.05rem;color:#54392c}
.what-points p+p{margin-top:1rem}

/* ── The drink ── */
.product{max-width:var(--maxw);margin:0 auto;padding:4rem 2rem;text-align:center}
.product h2{font-size:clamp(2.4rem,6vw,3.6rem);margin-top:.3rem}
.lede2{font-size:1.15rem;color:#54392c;max-width:48ch;margin:1.2rem auto 0}
.attrs{display:flex;justify-content:center;flex-wrap:wrap;gap:1rem;margin-top:2.5rem}
.attr{background:var(--white);border-radius:12px;padding:1.2rem 1.6rem;min-width:170px;
  box-shadow:0 12px 30px -18px rgba(42,20,16,.3)}
.attr strong{font-family:var(--display);font-weight:600;font-size:1.05rem;display:block}
.attr span{font-size:.82rem;color:#6f5f50;margin-top:.25rem;display:block}

/* ── Find / Notify ── */
.find{padding:5rem 2rem;background:var(--cocoa);color:var(--paper);margin-top:2rem}
.find-inner{max-width:var(--maxw);margin:0 auto;text-align:center}
.find .kicker{color:var(--sun)}
.find h2{max-width:18ch;margin:0 auto}
.find p{margin-top:1.2rem;font-size:1.1rem;opacity:.85;max-width:46ch;margin-left:auto;margin-right:auto}
.notify{margin-top:2.2rem;display:flex;flex-direction:column;align-items:center;gap:.9rem}
.notify .btn-primary{background:var(--tangerine);color:var(--white)}
.notify .btn-primary:hover{background:var(--sun);color:var(--cocoa)}
.notify-sub{font-size:.85rem;opacity:.7}
.notify-sub a{color:var(--sun);text-decoration:none;font-weight:600}

/* ── Footer ── */
.footer{max-width:var(--maxw);margin:0 auto;padding:2.5rem 2rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.footer .brand.small{font-size:1.2rem}
.footer .meta{font-size:.78rem;color:#a99a88}

/* ── Responsive ── */
@media(max-width:820px){
  .hero{grid-template-columns:1fr;text-align:center}
  .hero-copy{order:0}
  .can-stage{order:1;margin-top:2.5rem}
  .lede{margin-left:auto;margin-right:auto}
  .cta{justify-content:center}
  .what-grid{grid-template-columns:1fr;gap:1.5rem}
}
@media(max-width:480px){
  .nav nav{gap:.9rem}
  .nav nav a:not(.pill){display:none}
}