/* 7 BREW — $500 GIFT CARD  |  Palette: #FF5A1F · #2A1810 · #FFF6EC · #FF3D81 */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --orange:#FF5A1F; --orange-dk:#D94410; --orange-lt:#FFF0E8;
  --pink:#FF3D81; --pink-lt:#FFEAF2;
  --espresso:#2A1810; --espresso-2:#3E2619;
  --cream:#FFF6EC; --cream-dk:#F6E7D3; --white:#FFFFFF;
  --text:#2A1810; --text-soft:#5B4336; --muted:#9A8272;
  --border:#EBD9C3; --border-lt:#F3E6D4;
  --display:'Poppins','Arial Black',sans-serif;
  --body:'DM Sans',Arial,sans-serif;
  --r-xs:6px; --r-sm:12px; --r-md:18px; --r-xl:30px;
  --shadow:0 2px 8px rgba(42,24,16,.08),0 22px 60px rgba(42,24,16,.16);
}

html,body{min-height:100vh;font-family:var(--body);background:var(--cream-dk);color:var(--text);}
body{display:flex;justify-content:center;align-items:flex-start;padding:32px 16px 60px;position:relative;overflow-x:hidden;}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(circle,rgba(255,90,31,.10) 2px,transparent 2px);background-size:30px 30px;}

/* Floating drinks */
.bg-float{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;}
.bf{position:absolute;font-size:28px;opacity:.09;animation:drift 17s ease-in-out infinite;}
.f1{top:6%;left:4%}.f2{top:20%;right:5%;animation-delay:3s}.f3{top:46%;left:3%;animation-delay:6s}
.f4{top:66%;right:4%;animation-delay:9s}.f5{top:84%;left:38%;animation-delay:4s}.f6{top:90%;right:18%;animation-delay:7s}
@keyframes drift{0%,100%{transform:translateY(0) rotate(0)}33%{transform:translateY(-16px) rotate(8deg)}66%{transform:translateY(-8px) rotate(-5deg)}}

/* Card */
.card{position:relative;z-index:1;width:100%;max-width:464px;background:var(--cream);border-radius:var(--r-xl);
  overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--border);animation:rise .65s cubic-bezier(.22,1,.36,1) both;}
@keyframes rise{from{opacity:0;transform:translateY(44px) scale(.96)}to{opacity:1;transform:none}}

/* Marquee */
.marquee{overflow:hidden;white-space:nowrap;padding:8px 0;}
.marquee.top{background:var(--espresso)} .marquee.bottom{background:var(--orange)}
.marquee-track{display:inline-flex;gap:18px;animation:scroll 20s linear infinite;padding-right:18px;}
.marquee span{font-family:var(--display);font-size:10px;font-weight:800;letter-spacing:2.2px;color:var(--cream);}
.marquee i{font-style:normal;font-size:7px;color:var(--pink);align-self:center;}
@keyframes scroll{to{transform:translateX(-50%)}}

/* Header */
.card-header{display:flex;align-items:center;justify-content:space-between;padding:18px 22px 14px;background:var(--cream);}
.bw-logo-svg{width:176px;height:auto;display:block;}
.live-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:40px;background:var(--orange-lt);
  border:1px solid rgba(255,90,31,.3);color:var(--orange-dk);font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--orange);animation:blink 1.5s infinite;}

/* Hero */
.hero{position:relative;background:linear-gradient(155deg,var(--orange) 0%,#FF7A3D 100%);overflow:hidden;}
.hero-blob{position:absolute;border-radius:50%;pointer-events:none;}
.b1{width:240px;height:240px;top:-90px;right:-70px;background:rgba(255,255,255,.12);}
.b2{width:180px;height:180px;bottom:-70px;left:-60px;background:rgba(42,24,16,.10);}
.hero-content{position:relative;z-index:1;padding:24px 24px 44px;}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(42,24,16,.22);border:1px solid rgba(255,255,255,.25);
  border-radius:40px;padding:5px 14px 5px 10px;margin-bottom:20px;}
.eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--cream);animation:blink 1.3s infinite;}
.hero-eyebrow span:last-child{font-size:10.5px;font-weight:700;color:var(--cream);letter-spacing:1.6px;text-transform:uppercase;}

.hero-main{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px;}
.amount-col{display:flex;flex-direction:column;gap:10px;}
.offer-amount{font-family:var(--display);font-weight:900;font-size:clamp(74px,19vw,94px);line-height:.9;letter-spacing:-3px;color:var(--cream);
  text-shadow:4px 4px 0 var(--espresso);}
.amount-tag{width:fit-content;background:var(--espresso);border-radius:var(--r-xs);padding:6px 12px;}
.amount-tag span{font-family:var(--display);font-size:10px;font-weight:800;letter-spacing:2.4px;color:var(--cream);text-transform:uppercase;}

.cup-wrap{flex-shrink:0;width:112px;filter:drop-shadow(0 10px 14px rgba(42,24,16,.28));animation:bob 4s ease-in-out infinite;}
.cup-svg{width:100%;height:auto;overflow:visible;display:block;}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-6px) rotate(3deg)}}
.steam .s{stroke-dasharray:60;animation:steam 2.6s ease-in-out infinite;opacity:.8;}
.steam .s2{animation-delay:.5s}.steam .s3{animation-delay:1s}
@keyframes steam{0%{stroke-dashoffset:60;opacity:0}40%{opacity:.9}100%{stroke-dashoffset:-60;opacity:0}}

.hero-badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.offer-tag{display:inline-flex;align-items:center;gap:7px;background:rgba(255,246,236,.18);border:1px solid rgba(255,255,255,.28);
  border-radius:var(--r-sm);padding:7px 11px;}
.tag-check{width:16px;height:16px;border-radius:50%;background:var(--cream);color:var(--orange-dk);font-size:9px;font-weight:900;display:flex;align-items:center;justify-content:center;}
.offer-tag span:last-child{font-size:10.5px;font-weight:700;color:var(--cream);letter-spacing:.6px;text-transform:uppercase;}

.ticker-row{display:flex;gap:10px;flex-wrap:wrap;}
.ticker-chip{display:inline-flex;align-items:center;gap:7px;background:var(--cream);border-radius:40px;padding:7px 14px;font-size:12.5px;font-weight:700;color:var(--text-soft);box-shadow:0 3px 10px rgba(42,24,16,.12);}
.ticker-chip.pink{background:var(--espresso);color:var(--cream);}
.ticker-dot{width:7px;height:7px;border-radius:50%;background:var(--orange);animation:blink 1.5s infinite;}
.ticker-chip.pink .ticker-dot{background:var(--pink);}
.hero-wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:24px;display:block;z-index:1;}

/* Sections */
.section-header{margin-bottom:18px;}
.section-title{font-family:var(--display);font-size:20px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;color:var(--espresso);margin-bottom:8px;}
.title-bar{width:48px;height:5px;border-radius:3px;background:linear-gradient(90deg,var(--orange),var(--pink));}

.steps-section{padding:26px 22px 18px;background:var(--cream);}
.steps-list{list-style:none;display:flex;flex-direction:column;gap:8px;}
.step-item{display:flex;align-items:center;gap:14px;padding:13px 15px;background:var(--white);border:1.5px solid var(--border-lt);
  border-radius:var(--r-md);transition:transform .18s,border-color .2s,background .2s;animation:slide .4s both;}
.step-item:nth-child(1){animation-delay:.12s}.step-item:nth-child(2){animation-delay:.22s}.step-item:nth-child(3){animation-delay:.32s}.step-item:nth-child(4){animation-delay:.42s}
@keyframes slide{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
.step-item:hover{transform:translateX(4px);border-color:var(--orange);background:var(--orange-lt);}
.step-badge{flex-shrink:0;width:42px;height:42px;border-radius:50%;background:var(--espresso);display:flex;align-items:center;justify-content:center;transition:background .2s,transform .2s;}
.step-item:hover .step-badge{background:var(--orange);transform:rotate(-8deg) scale(1.06);}
.finale .step-badge{background:var(--pink);}
.step-num{font-family:var(--display);font-size:18px;font-weight:900;color:var(--cream);line-height:1;}
.step-body{flex:1;min-width:0;}
.step-title{font-size:14.5px;font-weight:700;color:var(--espresso);line-height:1.3;}
.step-desc{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.5;}
.step-emoji{font-size:22px;opacity:.85;flex-shrink:0;}

/* CTA */
.cta-section{padding:20px 22px 8px;background:var(--cream);}
.cta-btn{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:19px 24px;
  background:linear-gradient(135deg,#FF6B35,var(--orange));color:var(--cream);font-family:var(--display);font-size:16.5px;font-weight:800;
  letter-spacing:1.4px;text-transform:uppercase;text-decoration:none;border-radius:var(--r-md);
  box-shadow:0 5px 0 var(--orange-dk),0 10px 26px rgba(255,90,31,.35);transition:transform .15s,box-shadow .15s;animation:slide .5s .5s both;}
.cta-btn::after{content:'';position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-18deg);animation:shimmer 3s 1.4s infinite;}
@keyframes shimmer{to{left:150%}}
.cta-btn:hover{transform:translateY(-3px);box-shadow:0 8px 0 var(--orange-dk),0 16px 34px rgba(255,90,31,.45);}
.cta-btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--orange-dk),0 4px 12px rgba(255,90,31,.25);}
.cta-icon{font-size:20px}.cta-arrow{width:20px;height:20px;transition:transform .2s;}
.cta-btn:hover .cta-arrow{transform:translateX(5px)}
.urgency-line{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;padding:9px 14px;background:var(--pink-lt);
  border:1px solid rgba(255,61,129,.28);border-radius:var(--r-sm);font-size:11.5px;font-weight:700;color:#C21F5C;}
.u-dot{width:6px;height:6px;border-radius:50%;background:var(--pink);animation:blink 1s infinite;flex-shrink:0;}

.trust-row{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;padding:14px 22px 22px;background:var(--cream);}
.trust-chip{font-size:11.5px;font-weight:700;color:var(--text-soft);background:var(--white);border:1.5px solid var(--border);border-radius:40px;padding:5px 13px;}

/* FAQ */
.faq-section{padding:24px 22px 16px;background:var(--cream-dk);border-top:1px solid var(--border);}
.faq-card{background:var(--white);border:1.5px solid var(--border);border-radius:var(--r-md);overflow:hidden;box-shadow:0 2px 10px rgba(42,24,16,.05);}
.faq-item{border-bottom:1.5px solid var(--border-lt);}.faq-item:last-child{border-bottom:none;}
.faq-question{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;background:none;border:none;cursor:pointer;text-align:left;
  font-family:var(--body);font-size:13.5px;font-weight:700;color:var(--espresso);line-height:1.4;transition:background .18s,color .18s;-webkit-tap-highlight-color:transparent;}
.faq-question:hover,.faq-item.open .faq-question{background:var(--orange-lt);color:var(--orange-dk);}
.chevron{width:18px;height:18px;flex-shrink:0;stroke:var(--muted);transition:transform .28s cubic-bezier(.22,1,.36,1),stroke .18s;}
.faq-question:hover .chevron,.faq-item.open .chevron{stroke:var(--orange);}
.faq-item.open .chevron{transform:rotate(180deg);}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .32s cubic-bezier(.22,1,.36,1);}
.faq-item.open .faq-answer{max-height:200px;}
.faq-answer-inner{padding:12px 18px 16px;font-size:13.5px;color:var(--text-soft);line-height:1.7;border-top:1px solid var(--border-lt);}

@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

@media (max-width:380px){
  .card-header{padding:14px 16px 12px}.bw-logo-svg{width:150px}
  .hero-content{padding:20px 18px 40px}.offer-amount{font-size:64px}.cup-wrap{width:88px}
  .steps-section,.cta-section,.faq-section{padding-left:16px;padding-right:16px}.step-emoji{display:none}
}
@media (min-width:500px){.card{border-radius:34px}}
@media (min-width:768px){body{padding:52px 16px 80px}}
@media (prefers-reduced-motion:reduce){.bf,.marquee-track,.cup-wrap,.steam .s,.cta-btn::after,.card{animation:none}}