/* JUBA Fire Edition — compositor motion, no flashing, readable controls. */
:root{--bg:#100908;--surface:#1b100e;--surface-2:#281711;--line:#503024;--text:#fff3e8;--muted:#c9b2a4;--quiet:#af8b76;--purple:#ff9b55;--lime:#ffb55f;--pink:#ff7041;--danger:#ffb5ab;--radius:18px}
body{background:var(--bg)}
.ambient{background:radial-gradient(ellipse at 8% 26%,#ff4b151a,transparent 52%),radial-gradient(ellipse at 82% 8%,#ff93230c,transparent 56%)}
.announcement{background:linear-gradient(100deg,#37150e,#1b100c);border-color:#6b3020;color:#ffd4a8}
.site-header{background:color-mix(in srgb,var(--bg) 95%,transparent)}
.juba-emblem{position:relative;display:grid;place-items:center;flex-shrink:0;width:46px;height:46px;border-radius:12px;border:1px solid #95502e;background:linear-gradient(140deg,#472312,#180d0a);font:700 italic 32px var(--display);color:#ffb55f;box-shadow:inset 0 0 18px #ff63161a}
.juba-emblem>span{position:absolute;top:5px;left:6px;font:9px var(--display);color:#ffe1ab}
.brand strong,.wordmark{letter-spacing:.08em}.brand strong .accent-letter,.wordmark .accent-letter{color:#ffab61}
.hero{gap:42px;padding-block:52px 54px;overflow:visible;min-height:575px}
.hero-copy{padding-block:14px}.hero h1{line-height:1.3;font-size:clamp(38px,4vw,60px);letter-spacing:-.025em}
.hero h1 em{background-image:linear-gradient(100deg,#fff0c9 0%,#ffb552 35%,#ff7947 100%)}
.hero-intro{max-width:440px}.hero-actions .primary{position:relative;box-shadow:0 6px 30px #ff6a1826;overflow:hidden}
.primary,.button.primary{background:linear-gradient(110deg,#ffc477,#ff943f);color:#291208;border-color:#ffb55f;font-weight:800}
.hero-actions .primary:hover{background:linear-gradient(110deg,#ffcf90,#ffa25a);box-shadow:0 8px 35px #ff6a1840}
.hero-visual{aspect-ratio:1;max-height:none;display:block;isolation:isolate;transform:rotate(-2deg)}
.fire-frame{position:relative;border:1px solid #b55c31;border-radius:25px;overflow:hidden;background:#160905;box-shadow:0 28px 55px #0008,0 0 40px #d94a1020;z-index:1}
.hero-image{position:static;inset:auto;display:block;width:100%;height:auto;max-width:100%;aspect-ratio:1;object-fit:contain;mask-image:none;animation:none;transform:none}
.fire-frame:after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 38px #17050355;pointer-events:none}
.fire-halo{position:absolute;inset:-4%;border-radius:40%;background:radial-gradient(ellipse,#f95b1440,transparent 66%);filter:blur(24px);animation:juba-breathe 7s ease-in-out infinite;z-index:0;pointer-events:none}
.hero-visual:before,.hero-visual:after{content:'';position:absolute;width:28%;height:25%;border:1px solid #e88644aa;border-radius:6px;pointer-events:none;z-index:2}
.hero-visual:before{top:-9px;left:-9px;border-right:0;border-bottom:0}.hero-visual:after{right:-9px;bottom:-9px;border-left:0;border-top:0}
.visual-coordinate{position:absolute;inset:auto 12px -30px auto;font:600 9px var(--display);color:#e9a46f;letter-spacing:.14em;transform:none;white-space:nowrap}
.ember-field{position:absolute;inset:-16px;overflow:hidden;pointer-events:none;z-index:3;border-radius:30px;contain:layout style paint}
.juba-ember{position:absolute;left:var(--x);bottom:3%;height:var(--size);width:var(--size);border-radius:50%;background:#ffd090;box-shadow:0 0 6px #ff8533;opacity:0;animation:juba-ember var(--duration) var(--delay) linear infinite}
@keyframes juba-ember{0%{opacity:0;transform:translate3d(0,0,0) scale(.6)}15%{opacity:.8}75%{opacity:.6}100%{opacity:0;transform:translate3d(var(--drift),-430px,0) scale(.2)}}
@keyframes juba-breathe{0%,100%{opacity:.55;transform:scale(.96)}50%{opacity:.95;transform:scale(1.035)}}
.benefit-strip{border-block-color:#5a3020}.benefit-strip svg{color:#ffb36b}
.category-tile.active{background:#432414;border-color:#be7039}.category-tile.active small{color:#ffc38d}
.product-media{background:radial-gradient(ellipse,#873c171f,transparent 80%),var(--surface)}
.product-media:before,.product-media:after{border-color:#e8903a12}
.product-monogram{color:#c59e87}.product-card:hover{border-color:#b66a35;box-shadow:0 14px 38px #0005}
.card-cta .button{background:#3c2314;border-color:#744427;color:#ffca93}.card-cta .button:hover{background:#512d18}
.detail-art{background:radial-gradient(ellipse,#a4492855,transparent 80%),#1d100c}.detail-art .detail-brand{color:#dca57f}.detail-stock{color:#ffd29b}
.compare-bar{background:#2d1b13f5;border-color:#a05d32}.journey{background:linear-gradient(110deg,#ff7b1c0e,transparent)}.journey-x{color:#dd743c12}
.mobile-nav{background:color-mix(in srgb,var(--bg) 95%,transparent);border-top-color:#603721}
.store-contact{border-color:#774126;background:linear-gradient(115deg,#351b10,#1c100c)}
.store-contact-link[data-channel=telegram_channel]{color:#ffbe7d}.store-contact-link:hover{box-shadow:0 5px 25px #e6631614}
.account-intro .eyebrow{color:var(--purple)}.account-page .account-shell{min-height:55vh}
.account-page input:focus,.account-page select:focus{outline-color:#faaa60}
[data-theme=light]{--bg:#fff8f1;--surface:#fffdfa;--surface-2:#f8e9dc;--line:#dfc4ae;--text:#3a2117;--muted:#705548;--quiet:#8b6550;--purple:#a64416;--lime:#ffb55f;--pink:#b54e1c;--danger:#b53a2c;--shadow:0 25px 80px #682c1820}
[data-theme=light] .announcement{color:#ffe6c6}[data-theme=light] .hero h1 em{background-image:linear-gradient(110deg,#b45414,#b22b10)}
[data-theme=light] .hero-visual{background:transparent;border-radius:0;mask-image:none}
[data-theme=light] .category-tile.active{background:#fff0de;border-color:#bf7d4c}[data-theme=light] .category-tile.active small{color:#965321}
[data-theme=light] .card-cta .button{background:#fff0e3;color:#994712;border-color:#dbb08d}
[data-theme=light] .compare-bar{background:#fff5e9f5}[data-theme=light] .product-monogram{color:#a77350}
[data-theme=light] .store-contact{background:linear-gradient(110deg,#fff0e0,#fffdfa);border-color:#d9af89}
[data-theme=light] .store-contact-link[data-channel=telegram_channel]{color:#9a4c19}
[data-theme=light] .brand strong .accent-letter,[data-theme=light] .wordmark .accent-letter{color:#a84913}
/* This is also set by the visibility observer, so off-screen effects consume no animation time. */
[data-juba-paused=true] .juba-ember,[data-juba-paused=true] .fire-halo{animation-play-state:paused!important}
[data-motion=off] .ember-field{display:none}[data-motion=off] .fire-halo{animation:none}
@media(min-width:1400px){.hero{min-height:640px}.hero h1{font-size:67px}}
@media(max-width:980px){.hero{gap:26px;min-height:490px}.hero h1{font-size:45px}.hero-intro{font-size:15px}}
@media(max-width:760px){.hero{grid-template-columns:1fr .9fr;gap:22px;padding-block:35px 48px;min-height:0}.hero h1{font-size:34px}.hero-visual{aspect-ratio:1}.hero-actions{gap:14px}.juba-emblem{width:36px;height:36px;font-size:26px}.visual-coordinate{font-size:7px}.hero-intro{font-size:14px}}
@media(max-width:540px){.hero{display:flex;flex-direction:column;overflow:visible;text-align:center;padding-block:29px 44px;gap:28px}.hero-copy{padding:0}.hero h1{font-size:clamp(31px,8.7vw,44px);line-height:1.3}.hero-intro{max-width:340px;font-size:14px}.hero-visual{width:calc(100% - 20px);height:auto;margin:0;max-width:390px;aspect-ratio:1;transform:rotate(-1.2deg)}.hero-image{position:static;width:100%;height:auto;inset:auto;mask-image:none}.hero .eyebrow{font-size:9px}.hero-meta{margin-top:23px}.fire-frame{border-radius:19px}.visual-coordinate{bottom:-25px;right:8px;font-size:8px}.hero-actions .button{min-height:46px;padding-inline:21px}.hero-actions .text-link{font-size:13px}.brand strong{font-size:25px}.brand small{font-size:6px}}
@media(prefers-reduced-motion:reduce){.ember-field{display:none}.fire-halo{animation:none}.hero-visual{transform:none}}