/* Product-first landing variant. Real app screen; decorative note is outside it. */
.hero-ingredients{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.hero-copy{z-index:3}
.hero-ingredients>span{position:absolute;width:145px;height:145px}
.hero-ingredients i{display:block;width:100%;height:100%;background:url('assets/hero-ingredients.png') 0 0/300% 200% no-repeat;animation:ingredient-bob 6s ease-in-out infinite;filter:drop-shadow(0 12px 12px #0005)}
.hero-ingredients>span:nth-child(2) i{background-position:50% 0;animation-delay:-2s}
.hero-ingredients>span:nth-child(3) i{background-position:100% 0;animation-delay:-4s}
.hero-ingredients>span:nth-child(4) i{background-position:0 100%;animation-delay:-1s}
.hero-ingredients>span:nth-child(5) i{background-position:50% 100%;animation-delay:-3s}
.hero-ingredients>span:nth-child(6){width:100px;height:100px}
.hero-ingredients>span:nth-child(6) i{background-position:100% 100%;animation-delay:-5s}
.hero.ingredients-paused i{animation-play-state:paused}
.hero .phone::before{content:"";position:absolute;inset:8px;border-radius:28px;pointer-events:none;z-index:1;background:radial-gradient(ellipse,#a66bff66,transparent 70%);box-shadow:inset 0 0 30px #a45dff;opacity:var(--ingredient-glow,0)}
@keyframes ingredient-bob{0%,100%{translate:0 0;rotate:-3deg}50%{translate:0 -7px;rotate:3deg}}
@media(max-width:700px){.hero-ingredients>span{width:85px;height:85px}}
.hero-copy{top:25%;max-width:47%}
.hero-copy h1{font-size:clamp(56px,5.7vw,100px)}
.hero-copy>p:not(.hero-category){max-width:530px;font-size:clamp(17px,1.4vw,22px);line-height:1.65}
.hero-copy .hero-category{font-size:11px;letter-spacing:.14em;color:#cfb3f1;margin-bottom:22px}
.hero .phone{width:clamp(245px,21vw,350px);right:21%;bottom:15%;padding:8px;border-radius:38px;box-shadow:25px 30px 70px #0009,0 0 100px #9043d333;animation:hero-phone-float 7s ease-in-out infinite}
.hero .phone::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 35%,#ffffff16 49%,transparent 63%);transform:translateX(-130%);animation:hero-phone-sheen 12s ease-in-out infinite}
@keyframes hero-phone-float{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes hero-phone-sheen{0%,65%{transform:translateX(-130%)}90%,100%{transform:translateX(130%)}}
.hero .phone img{border-radius:28px}
.hero-product-note{position:absolute;right:13%;bottom:22%;display:flex;align-items:center;gap:16px;padding:20px 24px;border:1px solid #bc8bff99;border-radius:20px;background:#261735ed;box-shadow:0 15px 50px #0006}
.hero-product-note>span{font-size:30px;color:#bd8aff}
.hero-product-note strong{font-size:19px;display:block}
.hero-product-note small{display:block;font-size:12px;color:#d7c5e3;margin-top:7px}
.plan-copy .plan-principle{color:#bdafc7;max-width:500px}
@media(min-width:701px){
 .hero .phone{top:21.33%;bottom:auto;width:clamp(241.5px,20.7vw,333.5px)}
 .hero-ingredients>span{width:191.7625px;height:191.7625px}
 .hero-ingredients>span:nth-child(6){width:132.25px;height:132.25px}
 .hero-product-note{bottom:12%}
}
@media(max-width:700px){
 .hero{height:100svh;min-height:680px}
 .hero::before{background-image:url('assets/burger-background.png')}
 .hero-photo{top:0;height:100%;object-position:center;mask-image:none;-webkit-mask-image:none}
 .hero-copy{top:74px;bottom:0;max-width:none}
 .hero-copy .hero-category{font-size:8px;letter-spacing:.08em;margin-bottom:10px}
 .hero-copy h1{font-size:clamp(34px,9.5vw,44px);margin-bottom:12px}
 .hero-copy>p:not(.hero-category){font-size:13px;line-height:1.5;max-width:340px;margin:0 auto}
 .hero .phone{width:clamp(151.8px,22svh,206.8px);right:calc(50% - clamp(75.9px,11svh,103.4px));bottom:153px;border-radius:24px;padding:5px}
 .hero-ingredients>span{width:102px;height:102px}
 .hero .phone img{border-radius:17px}
 .hero-product-note{right:16px;bottom:162px;padding:12px 14px;gap:9px;border-radius:14px}
 .hero-product-note>span{font-size:20px}
 .hero-product-note strong{font-size:13px}
 .hero-product-note small{font-size:9px;margin-top:4px}
 .plan-copy .plan-principle{margin-top:14px}
 .plan-visual{margin-top:16px}
}
@media(max-width:700px) and (max-height:740px){.hero .phone{width:145.2px;right:calc(50% - 72.6px)}.hero-copy>p:not(.hero-category){font-size:12px}.hero-copy h1{font-size:34px}}