/* LITTLE CAESARS — $100 GIFT CARD | Palette: #F58220 · #111111 · #FFC72C · #FFFFFF */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --orange:#F58220;--orange-dk:#C9620A;--orange-lt:#FFF2E4;
  --yellow:#FFC72C;--yellow-lt:#FFF8DC;--red:#C8341B;
  --black:#111;--cream:#FFF9F1;--white:#fff;
  --text:#111;--soft:#4F4741;--muted:#928779;--border:#EDDFCB;--border-lt:#F5EBDB;
  --display:'Lilita One','Arial Black',sans-serif;--body:'Nunito',Arial,sans-serif;
  --r-xs:5px;--r-sm:12px;--r-md:18px;--r-xl:28px;
  --shadow:0 2px 8px rgba(17,17,17,.10),0 24px 64px rgba(17,17,17,.20);
}
html,body{min-height:100vh;font-family:var(--body);background:#FBE9D0;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(245,130,32,.16) 2.5px,transparent 2.5px);background-size:32px 32px}

.bg-float{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.bf{position:absolute;font-size:28px;opacity:.10;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(10deg)}66%{transform:translateY(-8px) rotate(-6deg)}}

.card{position:relative;z-index:1;width:100%;max-width:464px;background:var(--white);border-radius:var(--r-xl);overflow:hidden;
  box-shadow:var(--shadow);border:3px solid var(--black);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(--black)}.marquee.bottom{background:var(--orange);border-top:3px solid var(--black)}
.marquee-track{display:inline-flex;gap:16px;animation:scroll 20s linear infinite;padding-right:16px}
.marquee span{font-family:var(--display);font-size:13px;letter-spacing:1.6px;color:var(--white)}
.marquee.bottom span{color:var(--black)}
.marquee i{font-style:normal;font-size:8px;color:var(--orange);align-self:center}
.marquee.bottom i{color:var(--black)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* Header */
.card-header{display:flex;align-items:center;justify-content:space-between;padding:14px 22px 12px;background:var(--white)}
.lc-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:2px solid var(--black);
  color:var(--black);font-size:10px;font-weight:900;letter-spacing:1.6px;text-transform:uppercase}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--orange);animation:blink 1.4s infinite}

/* Hero */
.hero{position:relative;background:var(--orange);overflow:hidden;border-top:3px solid var(--black);border-bottom:3px solid var(--black)}
.hero-rays{position:absolute;inset:-60%;pointer-events:none;
  background:repeating-conic-gradient(from 0deg at 72% 40%,rgba(255,255,255,.13) 0deg 10deg,transparent 10deg 20deg);animation:spin 60s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-content{position:relative;z-index:1;padding:24px 24px 26px}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--black);border-radius:40px;padding:6px 14px 6px 11px;margin-bottom:20px}
.eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--yellow);animation:blink 1.3s infinite}
.hero-eyebrow span:last-child{font-size:10.5px;font-weight:800;color:var(--white);letter-spacing:1.6px;text-transform:uppercase}

.hero-main{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:16px}
.amount-col{display:flex;flex-direction:column;gap:10px}
.offer-amount{font-family:var(--display);font-weight:400;font-size:clamp(78px,20vw,100px);line-height:.95;letter-spacing:1px;color:var(--white);
  -webkit-text-stroke:3px var(--black);paint-order:stroke fill;text-shadow:5px 5px 0 var(--black)}
.amount-tag{width:fit-content;background:var(--yellow);border:3px solid var(--black);border-radius:var(--r-xs);padding:5px 11px;transform:rotate(-1.5deg)}
.amount-tag span{font-family:var(--display);font-size:12.5px;letter-spacing:1px;color:var(--black);text-transform:uppercase}

.slice-wrap{flex-shrink:0;width:116px;filter:drop-shadow(0 10px 10px rgba(0,0,0,.35));animation:bob 4s ease-in-out infinite}
.slice-svg{width:100%;height:auto;display:block;overflow:visible}
@keyframes bob{0%,100%{transform:translateY(0) rotate(8deg)}50%{transform:translateY(-7px) rotate(-2deg)}}
.steam .s{stroke-dasharray:60;animation:steam 2.6s ease-in-out infinite;opacity:.9}.steam .s2{animation-delay:.7s}
@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(0,0,0,.28);border:1px solid rgba(255,255,255,.35);border-radius:var(--r-sm);padding:7px 11px}
.tag-check{width:16px;height:16px;border-radius:50%;background:var(--yellow);color:var(--black);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:800;color:var(--white);letter-spacing:.7px;text-transform:uppercase}

.ticker-row{display:flex;gap:10px;flex-wrap:wrap}
.ticker-chip{display:inline-flex;align-items:center;gap:7px;background:var(--white);border:2px solid var(--black);border-radius:40px;padding:6px 14px;font-size:12.5px;font-weight:800;color:var(--black)}
.ticker-chip.dark{background:var(--black);color:var(--yellow)}
.ticker-dot{width:7px;height:7px;border-radius:50%;background:var(--orange);animation:blink 1.5s infinite}
.ticker-chip.dark .ticker-dot{background:var(--yellow)}

/* Sections */
.section-header{margin-bottom:18px}
.section-title{font-family:var(--display);font-weight:400;font-size:26px;letter-spacing:1px;color:var(--black);margin-bottom:6px}
.title-bar{width:60px;height:7px;background:var(--orange);border:2px solid var(--black);border-radius:6px}

.steps-section{padding:26px 22px 18px;background:var(--white)}
.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(--cream);border:2px solid transparent;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(--black);background:var(--yellow-lt)}
.step-badge{flex-shrink:0;width:44px;height:44px;border-radius:50%;background:var(--orange);border:3px solid var(--black);display:flex;align-items:center;justify-content:center;transition:transform .2s,background .2s}
.step-item:hover .step-badge{transform:rotate(-10deg) scale(1.08);background:var(--yellow)}
.finale .step-badge{background:var(--yellow)}
.step-num{font-family:var(--display);font-size:20px;color:var(--black);line-height:1}
.step-body{flex:1;min-width:0}
.step-title{font-size:15px;font-weight:900;color:var(--black);line-height:1.25}
.step-desc{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.45;font-weight:600}
.step-emoji{font-size:22px;opacity:.9;flex-shrink:0}

/* CTA */
.cta-section{padding:22px 22px 8px;background:var(--white)}
.cta-btn{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:18px 22px;
  background:var(--orange);color:var(--white);font-family:var(--display);font-size:20px;letter-spacing:1px;text-transform:uppercase;text-decoration:none;
  border:3px solid var(--black);border-radius:var(--r-md);box-shadow:0 6px 0 var(--black),0 14px 26px rgba(245,130,32,.4);
  -webkit-text-stroke:.6px var(--black);paint-order:stroke fill;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,.35),transparent);transform:skewX(-18deg);animation:shimmer 3s 1.4s infinite}
@keyframes shimmer{to{left:150%}}
.cta-btn:hover{transform:translateY(-3px);box-shadow:0 9px 0 var(--black),0 18px 34px rgba(245,130,32,.5);background:#FF9030}
.cta-btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--black),0 4px 10px rgba(245,130,32,.3)}
.cta-icon{font-size:22px}.cta-arrow{width:20px;height:20px;transition:transform .2s;-webkit-text-stroke:0}.cta-btn:hover .cta-arrow{transform:translateX(5px)}
.urgency-line{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;padding:9px 14px;background:var(--yellow);border:2px solid var(--black);border-radius:var(--r-sm);
  font-size:12px;font-weight:900;color:var(--black)}
.u-dot{width:7px;height:7px;border-radius:50%;background:var(--red);animation:blink 1s infinite;flex-shrink:0}

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

/* FAQ */
.faq-section{padding:24px 22px 20px;background:var(--cream);border-top:3px solid var(--black)}
.faq-card{background:var(--white);border:3px solid var(--black);border-radius:var(--r-md);overflow:hidden}
.faq-item{border-bottom:2px 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:14px;font-weight:900;color:var(--black);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(--black);transition:transform .28s cubic-bezier(.22,1,.36,1),stroke .18s}
.faq-question:hover .chevron,.faq-item.open .chevron{stroke:var(--orange-dk)}
.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;font-weight:600;color:var(--soft);line-height:1.7;border-top:2px solid var(--border-lt)}

@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
@media(max-width:380px){
  .card-header{padding:12px 16px 10px}.lc-logo-svg{width:150px}
  .hero-content{padding:20px 16px 22px}.offer-amount{font-size:66px}.slice-wrap{width:90px}
  .steps-section,.cta-section,.faq-section{padding-left:16px;padding-right:16px}.step-emoji{display:none}.cta-btn{font-size:17px}
}
@media(min-width:500px){.card{border-radius:32px}}
@media(min-width:768px){body{padding:52px 16px 80px}}
@media(prefers-reduced-motion:reduce){.bf,.marquee-track,.slice-wrap,.hero-rays,.steam .s,.cta-btn::after,.card,.step-item,.cta-btn{animation:none}}