:root { --ink:#f5f2ee; --muted:#b7b0ac; --black:#09080d; --panel:#141219; --red:#ff3154; --orange:#ff7b2e; --line:rgba(255,255,255,.15); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--black); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.noise { position:fixed; inset:0; z-index:20; pointer-events:none; opacity:.045; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E"); }
.topbar { position:fixed; top:0; left:0; right:0; z-index:15; height:76px; padding:0 clamp(20px,4vw,70px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.12); background:linear-gradient(180deg,rgba(9,8,13,.86),rgba(9,8,13,.15)); backdrop-filter:blur(14px); }
.wordmark { display:flex; gap:10px; align-items:center; font-size:18px; font-weight:850; letter-spacing:.18em; }.wordmark__mark { display:grid; place-items:center; width:30px; height:30px; border:1px solid var(--red); border-radius:50%; color:var(--red); font-size:14px; letter-spacing:0; }
.desktop-nav { display:flex; gap:34px; font-size:13px; text-transform:uppercase; letter-spacing:.15em; }.desktop-nav a,.mobile-nav a { opacity:.68; transition:opacity .2s,color .2s; }.desktop-nav a:hover,.mobile-nav a:hover { opacity:1; color:var(--orange); }
.menu-toggle { display:none; border:1px solid var(--line); color:var(--ink); background:transparent; padding:8px 12px; border-radius:999px; cursor:pointer; font-size:12px; }
.mobile-nav { display:none; }
.kicker { margin:0 0 20px; color:var(--orange); font-size:11px; letter-spacing:.27em; text-transform:uppercase; font-weight:800; }
.button { display:inline-flex; align-items:center; gap:16px; padding:14px 20px; border:1px solid transparent; border-radius:999px; font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; transition:transform .25s,background .25s,border-color .25s; cursor:pointer; }.button span { font-size:17px; line-height:0; }.button:hover { transform:translateY(-3px); }.button--primary { color:#140b0b; background:var(--orange); }.button--primary:hover { background:#ff9b5c; }.button--ghost { color:var(--ink); border-color:var(--line); background:transparent; }.button--ghost:hover { border-color:var(--ink); }.button--light { color:var(--black); background:var(--ink); }.text-link { display:inline-flex; align-items:center; gap:10px; color:var(--ink); font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; opacity:.75; }.text-link:hover { opacity:1; }
.hero { min-height:100svh; position:relative; display:grid; grid-template-columns:1fr 1fr; align-items:center; padding:130px clamp(20px,8vw,150px) 70px; overflow:hidden; isolation:isolate; }.hero__backdrop { position:absolute; inset:0; z-index:-4; background:linear-gradient(90deg,rgba(9,8,13,.97) 10%,rgba(9,8,13,.73) 42%,rgba(9,8,13,.08) 100%), url("./public/assets/hero.jpg") center/cover; filter:saturate(1.15); transform:scale(1.05); }.hero__backdrop::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 70% 42%,rgba(255,49,84,.27),transparent 35%),linear-gradient(180deg,transparent 65%,var(--black)); }.hero__orb { position:absolute; border-radius:50%; filter:blur(70px); z-index:-2; opacity:.55; animation:orb 10s ease-in-out infinite alternate; }.hero__orb--one { width:320px; height:320px; right:8%; top:20%; background:#ff3154; }.hero__orb--two { width:260px; height:260px; right:38%; bottom:4%; background:#6d2eff; animation-delay:-4s; }.hero__copy { position:relative; z-index:2; max-width:590px; }.hero h1 { margin:0; font-size:clamp(62px,9vw,142px); line-height:.82; letter-spacing:-.08em; font-weight:900; }.hero h1 em,.manifesto h2 em,.section-intro h2 em,.product-reveal h2 em,.visit h2 em { color:var(--orange); font-style:normal; }.hero__lead { max-width:370px; margin:34px 0 28px; color:var(--muted); font-size:16px; line-height:1.7; }.hero__actions { display:flex; align-items:center; gap:24px; }.hero__visual { position:relative; z-index:1; min-height:580px; display:grid; place-items:center; }.hero__halo { position:absolute; width:min(40vw,540px); aspect-ratio:1; border:1px solid rgba(255,255,255,.25); border-radius:50%; box-shadow:0 0 90px rgba(255,49,84,.34),inset 0 0 80px rgba(255,49,84,.16); animation:spin 25s linear infinite; }.hero__halo::before,.hero__halo::after { content:""; position:absolute; inset:8%; border:1px solid rgba(255,255,255,.12); border-radius:50%; }.hero__halo::after { inset:25%; border-color:rgba(255,123,46,.24); }.hero__bottle-frame { position:relative; width:min(23vw,320px); min-width:230px; aspect-ratio:.64; transform:translateY(16px) rotate(4deg); filter:drop-shadow(0 25px 35px rgba(0,0,0,.5)); animation:float 5s ease-in-out infinite; }.hero__bottle-art { position:absolute; inset:0; border-radius:22% 22% 16% 16%; background:linear-gradient(105deg,rgba(255,255,255,.43),rgba(255,255,255,.05) 18%,transparent 27%),url("./public/assets/hero.jpg") center/cover; box-shadow:inset 0 0 0 2px rgba(255,255,255,.23),inset -20px 0 40px rgba(0,0,0,.32); clip-path:polygon(13% 11%,87% 11%,93% 20%,91% 100%,9% 100%,7% 20%); }.hero__bottle-art::before { content:""; position:absolute; top:-10%; left:14%; right:14%; height:18%; border-radius:25% 25% 35% 35%; background:linear-gradient(90deg,#14141a,#6d6c73 28%,#14141a 65%,#06060a); box-shadow:inset 0 0 10px rgba(255,255,255,.23); }.hero__bottle-art::after { content:"BOMBO\A BAR JUICE"; white-space:pre; position:absolute; top:42%; left:13%; right:13%; padding:14px 5px; color:#f9f4e9; background:#17131e; border-top:2px solid var(--red); border-bottom:2px solid var(--orange); text-align:center; font-size:14px; font-weight:900; letter-spacing:.14em; line-height:1.65; }.liquid-ribbon { position:absolute; z-index:2; width:23%; height:42%; top:66%; border-radius:50%; background:linear-gradient(180deg,rgba(255,123,46,.85),rgba(255,49,84,.05)); filter:blur(1px); transform-origin:top center; }.liquid-ribbon--one { right:25%; transform:rotate(13deg); animation:drip 3.8s ease-in-out infinite; }.liquid-ribbon--two { right:47%; height:28%; opacity:.7; transform:rotate(-10deg); animation:drip 3.8s ease-in-out -.8s infinite; }.hero__badge { position:absolute; right:-25%; bottom:19%; padding:12px 14px; border:1px solid rgba(255,255,255,.25); background:rgba(9,8,13,.55); backdrop-filter:blur(12px); color:var(--ink); font-size:10px; letter-spacing:.18em; line-height:1.6; }.hero__badge b { color:var(--orange); font-size:11px; }.hero__stamp { position:absolute; right:2%; bottom:4%; color:var(--muted); font-size:11px; letter-spacing:.2em; line-height:1.8; text-align:right; }.hero__stamp span { color:var(--ink); font-size:10px; }.scroll-cue { position:absolute; bottom:32px; left:clamp(20px,8vw,150px); display:flex; align-items:center; gap:12px; color:var(--muted); font-size:11px; letter-spacing:.15em; text-transform:uppercase; }.scroll-cue span { display:block; width:42px; height:1px; background:var(--orange); }
.manifesto { display:grid; grid-template-columns:1.2fr .8fr; gap:80px; padding:150px clamp(20px,11vw,190px); background:#0d0c12; }.manifesto h2,.section-intro h2,.product-reveal h2,.visit h2 { margin:0; font-size:clamp(44px,6vw,88px); line-height:.94; letter-spacing:-.07em; }.manifesto__right { align-self:end; padding-bottom:8px; }.manifesto__right p { max-width:380px; color:var(--muted); line-height:1.8; }.formula-line { display:flex; align-items:center; gap:12px; margin-top:48px; color:var(--orange); font-size:9px; letter-spacing:.22em; }.formula-line i { display:block; width:24px; height:1px; background:var(--line); }
.flavour-stage { padding:150px clamp(20px,8vw,150px); background:linear-gradient(135deg,#17101a,#0c0b0f); }.section-intro { display:grid; grid-template-columns:1fr .8fr; align-items:end; gap:35px; margin-bottom:64px; }.section-intro>p:last-child { max-width:270px; margin:0; color:var(--muted); line-height:1.7; }.flavour-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; }.flavour-card { position:relative; min-height:220px; padding:24px; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; overflow:hidden; border:1px solid var(--line); color:var(--ink); text-align:left; cursor:pointer; transition:transform .35s,border-color .35s; }.flavour-card::before { content:""; position:absolute; inset:0; opacity:.75; transition:transform .5s,opacity .5s; }.flavour-card:hover,.flavour-card.is-active { transform:translateY(-7px); border-color:var(--orange); }.flavour-card:hover::before,.flavour-card.is-active::before { transform:scale(1.08); opacity:1; }.flavour-card--fruit::before { background:linear-gradient(135deg,rgba(255,123,46,.2),rgba(255,49,84,.75)),url("./public/assets/flavours.jpg") center/cover; }.flavour-card--tobacco::before { background:linear-gradient(135deg,rgba(255,123,46,.26),rgba(20,8,4,.9)),url("./public/assets/tobacco.jpg") center/cover; }.flavour-card--pastry::before { background:linear-gradient(135deg,rgba(255,235,180,.25),rgba(68,23,42,.88)),url("./public/assets/pastry.jpg") center/cover; }.flavour-card>* { position:relative; z-index:1; }.flavour-card__index { position:absolute; top:20px; right:20px; color:var(--orange); font-size:11px; letter-spacing:.18em; }.flavour-card__name { font-size:24px; font-weight:900; letter-spacing:-.05em; }.flavour-card__meta { margin-top:5px; color:#ded8d5; font-size:12px; }.flavour-focus { display:grid; grid-template-columns:1.4fr .6fr; min-height:360px; margin-top:14px; border:1px solid var(--line); background:#0a090c; overflow:hidden; }.flavour-focus__image { min-height:360px; background:linear-gradient(90deg,transparent 55%,#0a090c),url("./public/assets/flavours.jpg") center/cover; transition:background-image .45s,transform .5s; }.flavour-focus__copy { display:flex; flex-direction:column; justify-content:center; padding:35px; }.flavour-focus__copy h3 { margin:0; max-width:200px; font-size:26px; line-height:1.1; letter-spacing:-.04em; }.focus-arrow { margin-top:30px; color:var(--orange); font-size:30px; }
.product-reveal { display:grid; grid-template-columns:1.15fr .85fr; min-height:640px; background:#c83444; }.product-reveal__media { position:relative; overflow:hidden; }.product-reveal__image { position:absolute; inset:0; background:linear-gradient(90deg,transparent 42%,#c83444),url("./public/assets/new-in.jpg") center/cover; transform:scale(1.05); transition:transform 1.2s ease; }.product-reveal:hover .product-reveal__image { transform:scale(1.12) translateX(-2%); }.product-reveal__label { position:absolute; left:clamp(20px,8vw,150px); bottom:35px; font-size:11px; letter-spacing:.2em; }.product-reveal__copy { display:flex; flex-direction:column; justify-content:center; padding:70px clamp(25px,7vw,120px) 70px 50px; }.product-reveal__copy h2 { color:#190b0d; }.product-reveal__copy h2 em { color:#fff0ea; }.product-reveal__copy>p:not(.kicker) { max-width:330px; color:#4f1a20; line-height:1.7; }.product-reveal__copy .button { align-self:flex-start; margin-top:20px; }
.visit { display:flex; align-items:end; justify-content:space-between; gap:30px; padding:130px clamp(20px,11vw,190px); background:#f2eae3; color:#120c0d; }.visit h2 em { color:var(--red); }.visit .button { flex-shrink:0; }.footer { display:flex; align-items:center; gap:28px; padding:35px clamp(20px,8vw,150px); background:#08070a; color:var(--muted); font-size:12px; }.footer__logo { width:82px; height:auto; }.footer__links { display:flex; gap:20px; margin-left:auto; }.footer__links a:hover { color:var(--orange); }
.age-gate { position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:20px; background:rgba(5,4,8,.88); backdrop-filter:blur(18px); }.age-gate.is-hidden { opacity:0; pointer-events:none; transition:opacity .45s; }.age-gate__glow { position:absolute; width:50vw; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(255,49,84,.25),transparent 67%); filter:blur(20px); }.age-gate__card { position:relative; width:min(460px,100%); padding:44px; border:1px solid rgba(255,255,255,.2); background:linear-gradient(145deg,rgba(33,21,32,.94),rgba(13,11,18,.96)); box-shadow:0 25px 90px rgba(0,0,0,.55); text-align:center; }.age-gate__logo { width:100px; height:auto; margin-bottom:20px; }.age-gate h1 { margin:0 0 15px; font-size:36px; letter-spacing:-.06em; }.age-gate p:not(.kicker) { color:var(--muted); font-size:14px; line-height:1.75; }.age-gate__actions { display:flex; justify-content:center; gap:10px; margin:28px 0 18px; }.age-gate small { color:#797178; font-size:11px; }
@keyframes float { 0%,100% { transform:translateY(16px) rotate(4deg); } 50% { transform:translateY(-12px) rotate(-2deg); } } @keyframes drip { 0%,100% { height:30%; opacity:.55; } 50% { height:47%; opacity:1; } } @keyframes spin { to { transform:rotate(360deg); } } @keyframes orb { to { transform:translate(35px,-25px) scale(1.14); } }
@media (max-width:860px) { .desktop-nav { display:none; }.menu-toggle { display:block; }.mobile-nav { position:fixed; top:76px; left:20px; right:20px; z-index:14; display:flex; max-height:0; overflow:hidden; flex-direction:column; gap:18px; padding:0 20px; border:1px solid transparent; background:#17121a; transition:max-height .35s,padding .35s,border-color .35s; }.mobile-nav.is-open { max-height:240px; padding:20px; border-color:var(--line); }.hero { grid-template-columns:1fr; padding-top:150px; }.hero__visual { min-height:450px; margin-top:-20px; }.hero__halo { width:min(78vw,500px); }.hero__bottle-frame { width:min(48vw,280px); }.hero__badge { right:-20%; }.manifesto,.product-reveal { grid-template-columns:1fr; }.manifesto { gap:50px; }.product-reveal__media { min-height:460px; }.product-reveal__copy { padding:70px 25px; }.section-intro { grid-template-columns:1fr; gap:20px; }.flavour-grid { grid-template-columns:1fr; }.flavour-card { min-height:150px; }.flavour-focus { grid-template-columns:1fr; }.flavour-focus__image { min-height:250px; }.visit { align-items:flex-start; flex-direction:column; }.footer { flex-wrap:wrap; }.footer__links { width:100%; margin-left:0; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.01ms!important; } }

.catalog-inline { margin:42px 0 18px; padding:34px; border:1px solid rgba(23,239,255,.22); background:linear-gradient(135deg,rgba(23,239,255,.07),rgba(255,63,159,.05)); position:relative; overflow:hidden; }
.catalog-inline[hidden] { display:none; }
.catalog-inline::before { content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.018) 4px); opacity:.7; }
.catalog-inline>header { position:relative; display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:22px; }
.catalog-inline h3 { margin:0; font-size:clamp(34px,5vw,62px); letter-spacing:-.06em; line-height:.9; }.catalog-inline h3 em { color:var(--orange); font-style:normal; }.catalog-inline header>p:last-child { max-width:300px; margin:0; color:var(--muted); line-height:1.6; font-size:12px; }
.catalog-inline__grid { position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.inline-product { position:relative; min-height:88px; padding:15px; display:grid; grid-template-columns:auto 1fr auto; grid-template-rows:auto auto; gap:6px 10px; border:1px solid rgba(255,255,255,.13); border-radius:12px; color:var(--ink); text-align:left; background:rgba(8,7,12,.46); cursor:pointer; transition:transform .25s,border-color .25s,box-shadow .25s; }.inline-product:hover,.inline-product:focus-visible { transform:translateY(-5px); border-color:var(--lime); box-shadow:0 0 22px rgba(183,255,42,.16); outline:none; }.inline-product>span { grid-row:1 / span 2; align-self:center; color:var(--orange); font-size:10px; letter-spacing:.1em; }.inline-product strong { overflow:hidden; font-size:13px; line-height:1.05; text-overflow:ellipsis; white-space:nowrap; }.inline-product small { color:rgba(245,242,238,.5); font-size:9px; letter-spacing:.08em; }.inline-product i { grid-column:3; grid-row:1 / span 2; align-self:center; color:var(--cyan); font-style:normal; font-size:18px; }
.catalog-inline__empty { position:relative; padding:16px 0 4px; }.catalog-inline__empty h3 { margin:0 0 10px; }.catalog-inline__empty p:last-child { color:var(--muted); }
.product-detail { position:fixed; inset:0; z-index:70; display:grid; place-items:center; padding:24px; opacity:0; pointer-events:none; transition:opacity .35s; }.product-detail.is-open { opacity:1; pointer-events:auto; }.product-detail__backdrop { position:absolute; inset:0; background:rgba(4,4,9,.84); backdrop-filter:blur(18px); }.product-detail__panel { position:relative; width:min(980px,100%); min-height:430px; display:grid; grid-template-columns:.9fr 1.1fr; overflow:hidden; border:1px solid rgba(23,239,255,.32); background:linear-gradient(135deg,#131321,#0a0b13); box-shadow:0 30px 100px rgba(0,0,0,.6),0 0 50px rgba(23,239,255,.12); transform:translateY(18px) scale(.98); transition:transform .4s cubic-bezier(.2,.8,.2,1); }.product-detail.is-open .product-detail__panel { transform:none; }.product-detail__panel>.catalog-close { position:absolute; z-index:2; top:18px; right:18px; }.product-detail__visual { position:relative; display:grid; place-items:center; min-height:430px; background:radial-gradient(circle at 50% 45%,rgba(183,255,42,.3),transparent 26%),radial-gradient(circle at 30% 80%,rgba(23,239,255,.16),transparent 45%),#10101b; }.product-detail__visual::before,.product-detail__visual::after { content:""; position:absolute; border:1px solid rgba(23,239,255,.25); border-radius:50%; }.product-detail__visual::before { width:62%; aspect-ratio:1; animation:spin 16s linear infinite; }.product-detail__visual::after { width:44%; aspect-ratio:1; border-color:rgba(255,63,159,.28); animation:spin 11s linear infinite reverse; }.product-detail__visual i { width:130px; height:190px; border-radius:38% 38% 28% 28%; background:linear-gradient(135deg,rgba(255,255,255,.52),rgba(23,239,255,.18) 20%,rgba(255,49,84,.62) 72%,rgba(9,8,13,.96)); box-shadow:inset 12px 0 20px rgba(255,255,255,.14),0 25px 45px rgba(0,0,0,.45),0 0 45px rgba(255,63,159,.2); transform:rotate(-8deg); }.product-detail__visual>span { position:absolute; z-index:1; left:28px; bottom:24px; color:var(--acid); font-size:11px; letter-spacing:.16em; }.product-detail__copy { display:flex; flex-direction:column; justify-content:center; padding:68px 68px 54px; }.product-detail__family { margin:0 0 16px; color:var(--cyan); font-size:11px; letter-spacing:.2em; }.product-detail__copy h2 { margin:0 0 20px; max-width:520px; font-size:clamp(40px,6vw,78px); line-height:.9; letter-spacing:-.07em; }.product-detail__copy>p:not(.kicker):not(.product-detail__family) { max-width:430px; color:var(--muted); line-height:1.8; }.product-detail__meta { display:flex; flex-wrap:wrap; gap:20px 34px; margin-top:30px; color:rgba(245,242,238,.48); font-size:10px; letter-spacing:.14em; }.product-detail__meta b { color:var(--lime); }.product-detail__meta a { color:var(--orange); }
body.detail-open { overflow:hidden; }
.product-detail__visual i { display:grid; place-items:center; animation:detailFloat 5s ease-in-out infinite; }
.product-detail__visual i::before { content:""; position:absolute; inset:12px; border:1px solid rgba(255,255,255,.28); border-radius:inherit; }
.product-detail__visual i b { color:rgba(255,255,255,.86); font-family:var(--display); font-size:34px; letter-spacing:-.08em; transform:rotate(8deg); }
@keyframes detailFloat { 0%,100% { transform:rotate(-8deg) translateY(0); } 50% { transform:rotate(-3deg) translateY(-10px); } }
@media (max-width:760px) { .catalog-inline { padding:24px 18px; }.catalog-inline>header { display:block; }.catalog-inline header>p:last-child { margin-top:12px; }.catalog-inline__grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.product-detail { padding:12px; }.product-detail__panel { grid-template-columns:1fr; max-height:calc(100vh - 24px); overflow:auto; }.product-detail__visual { min-height:240px; }.product-detail__visual i { width:90px; height:130px; }.product-detail__copy { padding:32px 24px 30px; }.product-detail__copy h2 { font-size:48px; } }

/* Stronger product-led hero motion: the bottle is a real transparent product asset,
   while the cap, stream and droplets move independently for an obvious first-frame effect. */
.hero__backdrop { filter:saturate(.72) brightness(.38); }
.hero__bottle-frame { width:min(27vw,360px); min-width:245px; aspect-ratio:1100/1422; }
.hero__bottle-art { display:none; }
.hero__bottle-body,.hero__bottle-cap { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.hero__bottle-body { clip-path:inset(15% 0 0 0); }
.hero__bottle-cap { clip-path:inset(0 0 78% 0); transform-origin:50% 90%; animation:capOpen 6s cubic-bezier(.5,0,.2,1) infinite; z-index:2; }
.liquid-stream { position:absolute; z-index:3; top:18%; width:12%; height:36%; border-radius:999px 999px 60% 60%; background:linear-gradient(180deg,rgba(255,193,77,.98),rgba(255,49,84,.18)); filter:drop-shadow(0 0 10px rgba(255,123,46,.65)); transform-origin:top center; }
.liquid-stream--one { right:42%; animation:streamOne 6s ease-in-out infinite; }
.liquid-stream--two { right:50%; width:8%; height:28%; opacity:.7; animation:streamTwo 6s ease-in-out -.8s infinite; }
.liquid-drop { position:absolute; z-index:4; width:12px; height:21px; border-radius:60% 40% 65% 35%; background:var(--orange); filter:drop-shadow(0 0 9px rgba(255,123,46,.8)); opacity:0; }
.liquid-drop--one { right:39%; top:45%; animation:dropFall 6s ease-in-out infinite; }
.liquid-drop--two { right:53%; top:38%; width:8px; height:14px; animation:dropFall 6s ease-in-out -1.1s infinite; }
@keyframes capOpen { 0%,26%,100% { transform:translateY(0) rotate(0); } 42%,70% { transform:translate(-12px,-28px) rotate(-9deg); } }
@keyframes streamOne { 0%,25%,100% { height:8%; opacity:0; transform:scaleY(.2); } 44%,70% { height:38%; opacity:1; transform:scaleY(1); } }
@keyframes streamTwo { 0%,28%,100% { height:6%; opacity:0; } 46%,69% { height:28%; opacity:.7; } }
@keyframes dropFall { 0%,36% { opacity:0; transform:translateY(0) scale(.4); } 47% { opacity:1; transform:translateY(0) scale(1); } 70%,78% { opacity:.1; transform:translateY(160px) scale(.75); } 79%,100% { opacity:0; transform:translateY(180px) scale(.4); } }
.hero__copy .kicker,.hero__copy h1,.hero__copy .hero__lead,.hero__copy .hero__actions { opacity:0; transform:translateY(25px); animation:heroIn .8s cubic-bezier(.2,.8,.2,1) forwards; }
.hero__copy h1 { animation-delay:.12s; }.hero__copy .hero__lead { animation-delay:.24s; }.hero__copy .hero__actions { animation-delay:.36s; }
@keyframes heroIn { to { opacity:1; transform:translateY(0); } }
@media (max-width:860px) { .hero__bottle-frame { width:min(58vw,320px); min-width:220px; } }
.hero__bottle-frame.is-open .hero__bottle-cap { animation:none; transform:translate(-12px,-30px) rotate(-10deg); }
.hero__interact { position:absolute; right:clamp(20px,7vw,120px); bottom:95px; z-index:4; padding:10px 14px; border:1px solid rgba(255,255,255,.25); color:var(--ink); background:rgba(9,8,13,.45); backdrop-filter:blur(10px); font-size:10px; letter-spacing:.18em; cursor:pointer; transition:border-color .25s,color .25s; }
.hero__interact:hover,.hero__interact:focus-visible { border-color:var(--orange); color:var(--orange); outline:none; }
.hero__interact span { margin-left:8px; color:var(--orange); font-size:16px; }
.hero__bottle-frame { aspect-ratio:1/1.18; }
#hero-canvas { display:block; width:100%; height:100%; cursor:grab; }
#hero-canvas:active { cursor:grabbing; }
.hero__bottle-frame.is-open #hero-canvas { filter:drop-shadow(0 0 22px rgba(255,123,46,.46)); }

/* Full-screen interactive fluid hero: the visual language is liquid and
   energetic, with no literal product shot competing with the headline. */
.hero { grid-template-columns:1fr; }
.hero__copy { max-width:780px; z-index:3; }
.hero__visual { display:none; }
#fluid-canvas { position:absolute; inset:0; z-index:-3; width:100%; height:100%; pointer-events:none; opacity:.95; mix-blend-mode:screen; }
.hero__backdrop { background:radial-gradient(circle at 74% 36%,rgba(255,49,84,.22),transparent 34%),radial-gradient(circle at 42% 72%,rgba(108,46,255,.28),transparent 40%),linear-gradient(120deg,#09080d 0%,#160b17 45%,#250c1b 100%); filter:none; }
.hero::before { content:""; position:absolute; inset:0; z-index:-2; pointer-events:none; background:repeating-linear-gradient(115deg,transparent 0 88px,rgba(255,255,255,.035) 89px,transparent 90px 178px); mask-image:linear-gradient(90deg,transparent,black 32%,black 72%,transparent); opacity:.35; }
.hero__fluid-hud { position:absolute; right:clamp(20px,8vw,150px); bottom:38px; z-index:3; display:flex; align-items:center; gap:12px; color:rgba(245,242,238,.68); font-size:10px; letter-spacing:.2em; text-transform:uppercase; }
.hero__fluid-hud i { display:block; width:7px; height:7px; border-radius:50%; background:var(--orange); box-shadow:0 0 18px var(--orange); animation:pulseDot 1.8s ease-in-out infinite; }
@keyframes pulseDot { 0%,100% { opacity:.45; transform:scale(.8); } 50% { opacity:1; transform:scale(1.2); } }
@media (max-width:860px) { .hero__fluid-hud { right:20px; bottom:24px; font-size:8px; } }

/* Neon constellation redesign: the page uses asymmetry, orbit lines and glow
   fields instead of a repeated card grid. */
:root { --lime:#b7ff2a; --cyan:#17efff; --violet:#8c4dff; --pink:#ff3f9f; --acid:#eaff52; }
body { background:#07070c; }
.hero { min-height:100svh; padding:150px clamp(24px,8vw,150px) 80px; }
.hero__backdrop { background:radial-gradient(circle at 72% 28%,rgba(255,43,142,.34),transparent 31%),radial-gradient(circle at 39% 71%,rgba(23,239,255,.27),transparent 36%),linear-gradient(118deg,#08070e,#18091f 48%,#080b1b); }
.hero__backdrop::after { background:radial-gradient(circle at 58% 48%,transparent 0 18%,rgba(183,255,42,.11) 19%,transparent 19.5% 30%,rgba(23,239,255,.10) 30.5%,transparent 31%),linear-gradient(180deg,transparent 70%,#07070c); }
.hero__grid { position:absolute; inset:-18%; z-index:-1; opacity:.24; transform:perspective(900px) rotateX(64deg) translateY(24%); background:linear-gradient(rgba(23,239,255,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(23,239,255,.35) 1px,transparent 1px); background-size:70px 70px; mask-image:linear-gradient(180deg,transparent,black 42%,transparent); animation:gridDrift 15s linear infinite; }
@keyframes gridDrift { to { transform:perspective(900px) rotateX(64deg) translateY(17%); } }
.hero h1 { max-width:980px; font-size:clamp(58px,9.5vw,150px); text-shadow:0 0 34px rgba(255,63,159,.22); }
.hero h1 em { color:var(--acid); text-shadow:0 0 24px rgba(234,255,82,.35); }
.hero__lead { color:rgba(245,242,238,.78); max-width:460px; }
.hero__signal { position:absolute; right:clamp(24px,8vw,150px); bottom:44px; z-index:3; display:flex; align-items:center; gap:12px; color:rgba(245,242,238,.74); font-size:10px; letter-spacing:.2em; }
.hero__signal i { width:8px; height:8px; border-radius:50%; background:var(--lime); box-shadow:0 0 18px var(--lime),0 0 38px var(--cyan); animation:pulseDot 1.7s ease-in-out infinite; }
.hero__stats { position:absolute; right:clamp(24px,8vw,150px); top:33%; display:grid; grid-template-columns:auto auto; gap:8px 16px; color:rgba(245,242,238,.65); font-size:10px; letter-spacing:.16em; text-align:right; }
.hero__stats b { color:var(--cyan); font-size:18px; text-shadow:0 0 16px rgba(23,239,255,.55); }
.hero__stats b:nth-of-type(2) { color:var(--pink); text-shadow:0 0 16px rgba(255,63,159,.55); }
.ticker { overflow:hidden; padding:20px 0; border-block:1px solid rgba(255,255,255,.13); background:#0a0910; }
.ticker__track { display:flex; align-items:center; width:max-content; min-width:100%; color:var(--acid); font-size:12px; font-weight:900; letter-spacing:.25em; white-space:nowrap; animation:tickerMove 34s linear infinite; }
.ticker__sequence { display:flex; align-items:center; gap:34px; flex:0 0 auto; padding-right:34px; }
.ticker__sequence > span:nth-of-type(3n) { color:var(--cyan); }
.ticker__sequence > span:nth-of-type(4n) { color:var(--pink); }
.ticker__sequence > i { color:var(--pink); font-style:normal; font-size:18px; text-shadow:0 0 12px rgba(255,63,159,.55); }
@keyframes tickerMove { to { transform:translateX(-50%); } }
.section-transition { position:relative; display:grid; place-items:center; height:20px; overflow:hidden; background:linear-gradient(180deg,#090912,#0c0d18,#0d0915); }
.section-transition::before { content:""; position:absolute; left:0; right:0; top:50%; height:2px; background:linear-gradient(90deg,transparent,var(--pink) 19%,var(--orange) 34%,var(--lime) 53%,var(--cyan) 81%,transparent); box-shadow:0 0 5px var(--cyan),0 0 14px rgba(183,255,42,.65),0 0 26px rgba(255,63,159,.42); filter:saturate(1.35); }
.section-transition::after { content:""; position:absolute; top:-70%; bottom:-70%; left:-14%; width:8%; background:linear-gradient(90deg,transparent,rgba(234,255,82,.8),rgba(23,239,255,.65),transparent); transform:skewX(-18deg); opacity:.8; filter:blur(.4px); animation:transitionSweep 5.2s linear infinite; pointer-events:none; }
.section-transition span { position:relative; z-index:1; padding:0 8px; color:var(--acid); background:rgba(9,9,18,.9); font-size:7px; font-weight:900; letter-spacing:.26em; text-shadow:0 0 8px rgba(183,255,42,.75),0 0 14px rgba(23,239,255,.45); }
.section-transition--to-quality { background:linear-gradient(180deg,#07070c 0%,#101522 48%,#11101a 100%); }
.section-transition--to-quality span { color:rgba(245,242,238,.62); background:#101522; }
.section-transition--to-contact { background:linear-gradient(180deg,#11101a 0%,#171022 52%,#100a19 100%); }
.section-transition--to-contact span { color:rgba(245,242,238,.66); background:#171022; }
@keyframes transitionSweep { to { transform:translateX(720%) skewX(-18deg); } }
@media (max-width:860px) { .section-transition { height:16px; }.section-transition span { padding:0 6px; font-size:6px; letter-spacing:.2em; } }
@media (prefers-reduced-motion:reduce) { .section-transition::after { animation:none; } }
.manifesto { position:relative; display:grid; grid-template-columns:1fr .8fr; gap:70px; min-height:600px; padding:150px clamp(24px,11vw,190px); overflow:hidden; background:#0a0910; }
.manifesto__stamp { position:absolute; top:42px; left:clamp(24px,11vw,190px); color:var(--cyan); font-size:11px; letter-spacing:.2em; line-height:1.4; }
.manifesto__stamp small { color:var(--muted); font-size:8px; }
.manifesto__left { align-self:center; z-index:1; }.manifesto__left h2 { font-size:clamp(60px,8vw,120px); }.manifesto__left h2 em { color:var(--pink); text-shadow:0 0 30px rgba(255,63,159,.3); }
.manifesto__right { align-self:end; max-width:370px; z-index:1; }.manifesto__right p { color:rgba(245,242,238,.68); line-height:1.9; }.formula-line { color:var(--lime); }
.manifesto__orb { position:absolute; right:-80px; top:50%; width:min(42vw,560px); aspect-ratio:1; transform:translateY(-50%); border:1px solid rgba(23,239,255,.28); border-radius:50%; box-shadow:0 0 90px rgba(23,239,255,.12),inset 0 0 110px rgba(255,63,159,.12); animation:spin 28s linear infinite; }
.manifesto__orb::before,.manifesto__orb::after { content:""; position:absolute; inset:12%; border:1px solid rgba(255,63,159,.25); border-radius:50%; }.manifesto__orb::after { inset:31%; border-color:rgba(183,255,42,.34); }.manifesto__orb span { position:absolute; left:18%; top:45%; color:var(--cyan); font-size:10px; letter-spacing:.25em; transform:rotate(-18deg); }
.families { padding:150px clamp(24px,8vw,150px) 120px; background:linear-gradient(135deg,#100b18,#080b12); overflow-anchor:none; }
.section-head { display:flex; justify-content:space-between; align-items:end; gap:50px; margin-bottom:58px; }.section-head h2 { margin:0; font-size:clamp(52px,7vw,105px); line-height:.9; letter-spacing:-.07em; }.section-head h2 em { color:var(--lime); text-shadow:0 0 24px rgba(183,255,42,.22); }.section-head>p { max-width:300px; margin:0 0 5px; color:var(--muted); line-height:1.8; }
.family-cloud { display:flex; flex-wrap:wrap; align-items:center; gap:14px 16px; max-width:1060px; transform:rotate(-1.2deg); }.family-chip { position:relative; padding:15px 19px; border:1px solid rgba(255,255,255,.2); border-radius:100px; color:rgba(245,242,238,.78); background:rgba(255,255,255,.025); cursor:pointer; transition:.35s; }.family-chip:nth-child(3n) { transform:translateY(13px) rotate(2deg); }.family-chip:nth-child(4n) { transform:translateY(-8px) rotate(-2deg); }.family-chip b { margin-left:7px; color:var(--cyan); font-size:10px; }.family-chip:hover { color:var(--lime); border-color:var(--lime); background:rgba(183,255,42,.1); box-shadow:0 0 20px rgba(183,255,42,.16); transform:translateY(-5px) rotate(0); }.family-chip.is-active { color:#08070c; border-color:var(--lime); background:var(--lime); box-shadow:0 0 28px rgba(183,255,42,.3); transform:translateY(-5px) rotate(0); }.family-chip.is-active b { color:#08070c; }
.family-readout { display:flex; align-items:center; gap:14px; margin-top:64px; color:var(--muted); font-size:10px; letter-spacing:.18em; }.family-readout strong { color:var(--pink); }.family-readout i { display:block; width:50px; height:1px; background:linear-gradient(90deg,var(--pink),var(--cyan)); }
.atlas { padding:150px clamp(24px,8vw,150px); background:#07070c; }.section-head--atlas { margin-bottom:70px; }.section-head--atlas h2 em { color:var(--pink); }
.product-focus { display:grid; grid-template-columns:1.2fr .8fr; min-height:510px; margin-bottom:100px; background:radial-gradient(circle at 31% 42%,rgba(23,239,255,.16),transparent 32%),#10101a; overflow:hidden; position:relative; }.product-focus__visual { position:relative; display:grid; place-items:center; min-height:510px; }.product-focus__visual::before { content:""; position:absolute; inset:12%; border:1px solid rgba(23,239,255,.23); border-radius:48% 52% 44% 56%; transform:rotate(-18deg); animation:liquidOrbit 11s ease-in-out infinite alternate; }.product-focus__visual::after { content:""; position:absolute; inset:25%; border:1px solid rgba(255,63,159,.3); border-radius:50%; transform:rotate(35deg); }.focus-halo { position:absolute; width:52%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(183,255,42,.38),rgba(23,239,255,.1) 38%,transparent 70%); filter:blur(16px); animation:orb 7s ease-in-out infinite alternate; }.product-focus__visual img { position:relative; z-index:1; width:min(230px,30vw); height:360px; object-fit:contain; filter:drop-shadow(0 0 28px rgba(183,255,42,.45)); animation:productFloat 5s ease-in-out infinite; }.focus-index { position:absolute; left:32px; bottom:28px; color:var(--cyan); font-size:10px; letter-spacing:.2em; }.product-focus__copy { display:flex; flex-direction:column; justify-content:center; padding:60px; }.product-focus__copy h3 { margin:0 0 20px; font-size:clamp(34px,4.5vw,70px); line-height:.95; letter-spacing:-.06em; }.product-focus__copy>p:not(.kicker) { color:var(--muted); line-height:1.8; max-width:350px; }.focus-meta { display:flex; flex-direction:column; gap:8px; margin:28px 0; color:var(--muted); font-size:9px; letter-spacing:.2em; }.focus-meta b { color:var(--lime); font-size:12px; }
@keyframes liquidOrbit { to { transform:rotate(12deg) scale(1.05); border-color:rgba(255,63,159,.36); } } @keyframes productFloat { 0%,100% { transform:translateY(5px) rotate(-4deg); } 50% { transform:translateY(-13px) rotate(4deg); } }
.product-constellation { display:grid; grid-template-columns:repeat(12,1fr); gap:24px 18px; align-items:start; }.product-card { position:relative; min-height:280px; padding:20px; grid-column:span 3; overflow:hidden; cursor:pointer; isolation:isolate; transition:transform .35s,filter .35s; }.product-card::before { content:""; position:absolute; inset:10px 0 0; z-index:-1; border-radius:48% 52% 38% 62% / 28% 34% 66% 72%; background:linear-gradient(145deg,rgba(23,239,255,.28),rgba(8,7,12,.94) 68%); transform:rotate(-4deg); transition:.4s; }.product-card:hover,.product-card.is-active { transform:translateY(-12px) rotate(1deg); filter:brightness(1.18); }.product-card:hover::before,.product-card.is-active::before { box-shadow:0 0 35px var(--card-glow,rgba(23,239,255,.3)); border:1px solid rgba(255,255,255,.32); }.product-card img { display:block; width:100%; height:170px; object-fit:contain; filter:drop-shadow(0 12px 12px rgba(0,0,0,.48)); transition:transform .4s; }.product-card:hover img { transform:translateY(-8px) rotate(6deg) scale(1.08); }.product-card__number { position:absolute; top:20px; right:20px; color:var(--acid); font-size:10px; letter-spacing:.2em; }.product-card div { position:relative; margin-top:4px; }.product-card small { display:block; color:rgba(245,242,238,.56); font-size:8px; letter-spacing:.17em; }.product-card strong { display:block; margin-top:7px; color:var(--ink); font-size:18px; line-height:.92; letter-spacing:-.04em; }.product-card--wide { grid-column:span 6; min-height:360px; --card-glow:rgba(23,239,255,.4); }.product-card--wide img { height:230px; }.product-card--lime { --card-glow:rgba(183,255,42,.42); }.product-card--lime::before { background:linear-gradient(145deg,rgba(183,255,42,.34),rgba(8,7,12,.94) 68%); }.product-card--pink { --card-glow:rgba(255,63,159,.45); }.product-card--pink::before { background:linear-gradient(145deg,rgba(255,63,159,.32),rgba(8,7,12,.94) 68%); }.product-card--gold::before { background:linear-gradient(145deg,rgba(255,182,73,.3),rgba(8,7,12,.94) 68%); }.product-card--violet::before { background:linear-gradient(145deg,rgba(140,77,255,.36),rgba(8,7,12,.94) 68%); }.product-card--cyan::before { background:linear-gradient(145deg,rgba(23,239,255,.3),rgba(8,7,12,.94) 68%); }.product-card--orange::before { background:linear-gradient(145deg,rgba(255,123,46,.34),rgba(8,7,12,.94) 68%); }.product-card--dark::before { background:linear-gradient(145deg,rgba(255,255,255,.2),rgba(8,7,12,.94) 68%); }.product-card:nth-child(4) { transform:translateY(22px); }.product-card:nth-child(5) { transform:translateY(-12px); }.product-card:nth-child(6) { transform:translateY(18px); }.product-card:nth-child(7) { transform:translateY(-6px); }.product-card:nth-child(8) { transform:translateY(26px); }
.atlas-footer { display:flex; align-items:center; justify-content:space-between; margin-top:74px; padding-top:24px; border-top:1px solid rgba(255,255,255,.14); color:var(--muted); font-size:10px; letter-spacing:.18em; }.atlas-footer b { color:var(--cyan); }.atlas-footer .button { letter-spacing:.12em; }
.quality { display:grid; grid-template-columns:.8fr 1fr .7fr; align-items:center; gap:70px; padding:150px clamp(24px,11vw,190px); background:#efebe6; color:#0a0910; overflow:hidden; }.quality h2 { margin:0 0 24px; font-size:clamp(52px,7vw,100px); line-height:.9; letter-spacing:-.07em; }.quality h2 em { color:#ff3f64; font-style:normal; }.quality p:not(.kicker) { max-width:360px; color:#5f5860; line-height:1.8; }.quality .text-link { color:#0a0910; }.quality__ring { position:relative; display:grid; place-items:center; width:min(260px,40vw); aspect-ratio:1; border:1px solid rgba(10,9,16,.35); border-radius:50%; box-shadow:0 0 0 22px rgba(10,9,16,.05),0 0 0 54px rgba(10,9,16,.04); animation:spin 30s linear infinite; }.quality__ring::before,.quality__ring::after { content:""; position:absolute; inset:16%; border:1px solid rgba(255,63,100,.35); border-radius:50%; }.quality__ring::after { inset:39%; border-color:rgba(10,9,16,.5); }.quality__ring span { position:relative; z-index:1; font-weight:900; font-size:28px; line-height:.9; letter-spacing:-.08em; }.quality__ring i { position:absolute; top:7%; right:23%; width:10px; height:10px; border-radius:50%; background:#ff3f64; box-shadow:0 0 20px #ff3f64; }.quality__numbers { display:grid; grid-template-columns:auto 1fr; gap:19px 14px; align-items:center; }.quality__numbers b { color:#ff3f64; font-size:26px; }.quality__numbers span { font-size:9px; letter-spacing:.18em; }
.contact { display:flex; justify-content:space-between; align-items:end; gap:50px; padding:150px clamp(24px,11vw,190px); background:linear-gradient(125deg,#100a19,#080c14); }.contact h2 { margin:0 0 22px; font-size:clamp(52px,7vw,100px); line-height:.9; letter-spacing:-.07em; }.contact h2 em { color:var(--cyan); font-style:normal; text-shadow:0 0 20px rgba(23,239,255,.35); }.contact>div>p:not(.kicker) { max-width:380px; color:var(--muted); line-height:1.8; }.contact__actions { display:flex; flex-direction:column; align-items:flex-start; gap:13px; }.contact__actions small { color:var(--muted); font-size:10px; line-height:1.7; }.reveal { opacity:0; transform:translateY(35px); transition:opacity .8s ease,transform .8s ease; }.reveal.is-visible { opacity:1; transform:none; }
@media (max-width:860px) { .hero__stats { top:auto; bottom:100px; left:24px; right:auto; text-align:left; }.hero__signal { right:24px; bottom:32px; font-size:8px; }.section-head,.contact { align-items:flex-start; flex-direction:column; }.manifesto { grid-template-columns:1fr; gap:30px; }.manifesto__orb { right:-180px; top:42%; width:480px; opacity:.7; }.families,.atlas,.quality,.contact { padding-block:100px; }.product-focus { grid-template-columns:1fr; }.product-focus__copy { padding:35px; }.product-focus__visual { min-height:360px; }.product-focus__visual img { height:280px; }.product-constellation { grid-template-columns:repeat(2,1fr); gap:15px; }.product-card,.product-card--wide { grid-column:span 1; min-height:250px; }.product-card--wide { grid-column:span 2; }.product-card img,.product-card--wide img { height:150px; }.product-card:nth-child(n) { transform:none; }.quality { grid-template-columns:1fr; gap:55px; }.quality__ring { width:220px; }.quality__numbers { max-width:260px; }.atlas-footer { align-items:flex-start; flex-direction:column; gap:20px; } }

/* Let the hero product focus breathe as an irregular light field, not a card. */
.product-focus { background:transparent; overflow:visible; gap:70px; }
.product-focus__visual { overflow:hidden; clip-path:polygon(3% 11%,19% 3%,46% 8%,74% 1%,98% 14%,94% 42%,100% 73%,83% 96%,53% 91%,26% 100%,4% 84%,8% 55%); background:radial-gradient(circle at 50% 45%,rgba(23,239,255,.18),transparent 42%),linear-gradient(135deg,#111522,#0c0b11); }
.product-focus__copy { padding-left:0; }
.language-switcher { position:relative; margin-left:auto; margin-right:24px; z-index:16; }
.desktop-nav { margin-left:auto; }
.language-switcher { margin-left:24px; margin-right:0; }
.language-current { padding:8px 10px; border:1px solid rgba(255,255,255,.2); border-radius:999px; color:var(--ink); background:rgba(7,7,12,.4); font-size:10px; letter-spacing:.08em; cursor:pointer; }
.language-current span { color:var(--lime); margin-left:4px; }
.language-menu { position:absolute; top:calc(100% + 10px); right:0; display:grid; min-width:116px; padding:7px; border:1px solid rgba(255,255,255,.18); background:rgba(12,10,20,.96); box-shadow:0 14px 32px rgba(0,0,0,.35); opacity:0; pointer-events:none; transform:translateY(-5px); transition:.2s; }
.language-switcher.is-open .language-menu { opacity:1; pointer-events:auto; transform:none; }
.language-menu button { padding:10px 11px; border:0; color:rgba(245,242,238,.75); background:transparent; text-align:left; font-size:11px; cursor:pointer; }
.language-menu button:hover { color:var(--lime); background:rgba(183,255,42,.08); }
@media (max-width:860px) { .language-switcher { margin-left:auto; margin-right:10px; }.language-current { font-size:9px; }.desktop-nav + .language-switcher { display:block; } }

/* Interaction pass: every major zone has its own motion language. */
:root { --scroll-progress:0%; }
section[id],#top { scroll-margin-top:92px; }
.topbar::before { content:""; position:absolute; left:0; bottom:-1px; width:var(--scroll-progress); height:2px; background:linear-gradient(90deg,var(--pink),var(--orange),var(--lime),var(--cyan)); box-shadow:0 0 14px rgba(23,239,255,.55); transition:width .12s linear; }
.desktop-nav a { position:relative; }
.desktop-nav a::after { content:""; position:absolute; left:0; right:0; bottom:-11px; height:2px; background:linear-gradient(90deg,var(--pink),var(--lime)); transform:scaleX(0); transform-origin:left; transition:transform .35s ease; }
.desktop-nav a:hover::after,.desktop-nav a.is-current::after { transform:scaleX(1); }
.desktop-nav a.is-current { color:var(--ink); opacity:1; }
.button { position:relative; overflow:hidden; transform:translate3d(var(--mag-x,0px),calc(var(--mag-y,0px) - 0px),0); }
.button::after { content:""; position:absolute; top:-60%; left:-45%; width:28%; height:220%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent); transform:translateX(-160%) rotate(18deg); transition:transform .7s ease; pointer-events:none; }
.button:hover::after,.button:focus-visible::after { transform:translateX(560%) rotate(18deg); }
.hero__copy { animation:heroBreathe 8s ease-in-out 1.2s infinite alternate; }
@keyframes heroBreathe { from { transform:translate3d(0,0,0); } to { transform:translate3d(0,-4px,0); } }
.hero__stats { animation:statsFloat 6s ease-in-out infinite alternate; }
@keyframes statsFloat { to { transform:translate3d(0,-9px,0); } }
.ticker__track { will-change:transform; }
.manifesto { isolation:isolate; }
.manifesto::before { content:""; position:absolute; inset:-40% -10%; z-index:-1; background:conic-gradient(from 30deg at 65% 55%,transparent 0 22%,rgba(23,239,255,.1) 28%,transparent 37%,rgba(255,63,159,.1) 52%,transparent 64%); animation:manifestoSweep 16s linear infinite; }
.manifesto::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg,transparent,var(--pink),var(--cyan),transparent); opacity:.7; }
@keyframes manifestoSweep { to { transform:rotate(360deg); } }
.formula-line i { position:relative; overflow:hidden; }
.formula-line i::after { content:""; position:absolute; inset:0; background:var(--lime); transform:translateX(-100%); animation:linePulse 2.8s ease-in-out infinite; }
@keyframes linePulse { 0%,25% { transform:translateX(-100%); } 65%,100% { transform:translateX(100%); } }
.families { position:relative; isolation:isolate; overflow:hidden; }
.families::before { content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(circle at 18% 70%,rgba(255,63,159,.16),transparent 24%),radial-gradient(circle at 86% 20%,rgba(183,255,42,.12),transparent 26%); animation:familyBloom 11s ease-in-out infinite alternate; }
.family-cloud::before { content:""; position:absolute; width:180px; height:180px; margin:-70px 0 0 34%; border:1px solid rgba(23,239,255,.2); border-radius:50%; box-shadow:0 0 60px rgba(23,239,255,.12); animation:spin 18s linear infinite; pointer-events:none; }
.family-cloud { position:relative; }
.family-chip { isolation:isolate; will-change:transform; }
.family-chip::after { content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.65),transparent 42%); opacity:0; transform:scale(.2); transition:opacity .35s,transform .45s; }
.family-chip:hover::after,.family-chip.is-active::after { opacity:.2; transform:scale(1.7); }
@keyframes familyBloom { to { transform:scale(1.12) translate3d(-2%,2%,0); filter:hue-rotate(30deg); } }
.product-constellation { position:relative; }
.product-constellation::before { content:""; position:absolute; inset:-45px -10px; z-index:-1; background:radial-gradient(circle at 22% 35%,rgba(23,239,255,.1),transparent 20%),radial-gradient(circle at 74% 66%,rgba(255,63,159,.1),transparent 22%); filter:blur(8px); animation:constellationPulse 9s ease-in-out infinite alternate; pointer-events:none; }
@keyframes constellationPulse { to { transform:translate3d(2%, -2%, 0) scale(1.06); filter:hue-rotate(60deg) blur(12px); } }
.product-card { --tilt-x:0deg; --tilt-y:0deg; --glow-x:50%; --glow-y:50%; opacity:0; transform:translate3d(0,22px,0) rotate(var(--tilt-y)) rotateX(var(--tilt-x)); transform-style:preserve-3d; transition:transform .35s cubic-bezier(.2,.75,.2,1),filter .35s,opacity .55s; }
.product-constellation.is-visible .product-card { opacity:1; transform:translate3d(0,0,0) rotate(var(--tilt-y)) rotateX(var(--tilt-x)); transition-delay:calc(var(--motion-index) * 45ms); }
.product-card::after { content:""; position:absolute; inset:12% -28%; z-index:-1; border:1px solid rgba(255,255,255,.17); border-radius:50%; transform:rotate(-18deg); opacity:.35; animation:cardOrbit 7s linear infinite; pointer-events:none; }
.product-card:nth-child(3n)::after { animation-direction:reverse; animation-duration:9s; }
@keyframes cardOrbit { to { transform:rotate(342deg) translateX(5px); } }
.product-card.filter-in { animation:filterIn .52s cubic-bezier(.2,.8,.2,1) both; }
@keyframes filterIn { from { opacity:0; transform:translateY(28px) scale(.94) rotate(-2deg); } to { opacity:1; transform:translateY(0) scale(1) rotate(var(--tilt-y)); } }
.product-card:focus-visible { outline:2px solid var(--lime); outline-offset:6px; }
.product-focus { isolation:isolate; }
.product-focus::after { content:""; position:absolute; inset:4% 6% auto auto; width:180px; height:180px; border:1px solid rgba(255,63,159,.34); border-radius:50%; box-shadow:0 0 40px rgba(255,63,159,.16); animation:spin 14s linear infinite reverse; pointer-events:none; }
.product-focus.is-switching .product-focus__visual { animation:focusVisualIn .65s cubic-bezier(.2,.8,.2,1) both; }
.product-focus.is-switching .product-focus__visual img { animation:focusImageIn .8s cubic-bezier(.2,.8,.2,1) both,productFloat 5s ease-in-out .8s infinite; }
.product-focus.is-switching .product-focus__copy > * { animation:focusCopyIn .55s cubic-bezier(.2,.8,.2,1) both; }
.product-focus.is-switching .product-focus__copy > *:nth-child(2) { animation-delay:.06s; }.product-focus.is-switching .product-focus__copy > *:nth-child(3) { animation-delay:.12s; }.product-focus.is-switching .product-focus__copy > *:nth-child(4) { animation-delay:.18s; }.product-focus.is-switching .product-focus__copy > *:nth-child(5) { animation-delay:.24s; }
@keyframes focusVisualIn { from { opacity:.5; transform:scale(.96) rotate(-2deg); filter:hue-rotate(-35deg); } to { opacity:1; transform:none; filter:none; } }
@keyframes focusImageIn { from { opacity:0; transform:translate3d(24px,14px,0) scale(.78) rotate(-12deg); } to { opacity:1; transform:translate3d(0,0,0) scale(1) rotate(0); } }
@keyframes focusCopyIn { from { opacity:0; transform:translate3d(22px,0,0); } to { opacity:1; transform:none; } }
.quality { position:relative; isolation:isolate; }
.quality::before { content:""; position:absolute; inset:0; z-index:-1; opacity:.35; background:linear-gradient(90deg,transparent 49.8%,rgba(10,9,16,.08) 50%,transparent 50.2%),linear-gradient(0deg,transparent 49.8%,rgba(10,9,16,.08) 50%,transparent 50.2%); background-size:52px 52px; mask-image:linear-gradient(90deg,transparent,black 25%,black 75%,transparent); animation:qualityGrid 18s linear infinite; }
@keyframes qualityGrid { to { background-position:52px 52px; } }
.quality__numbers b { position:relative; text-shadow:0 0 16px rgba(255,63,100,.25); animation:numberBeat 2.8s ease-in-out infinite alternate; }
.quality__numbers b:nth-of-type(2) { animation-delay:.5s; }.quality__numbers b:nth-of-type(3) { animation-delay:1s; }
@keyframes numberBeat { to { transform:translateX(6px); color:#ff3154; } }
.contact { position:relative; isolation:isolate; overflow:hidden; }
.contact::before,.contact::after { content:""; position:absolute; border-radius:50%; filter:blur(8px); z-index:-1; pointer-events:none; }
.contact::before { width:300px; height:300px; right:14%; top:10%; background:radial-gradient(circle,rgba(23,239,255,.18),transparent 68%); animation:contactOrb 8s ease-in-out infinite alternate; }
.contact::after { width:240px; height:240px; left:4%; bottom:-20%; background:radial-gradient(circle,rgba(255,63,159,.16),transparent 68%); animation:contactOrb 11s ease-in-out -3s infinite alternate-reverse; }
@keyframes contactOrb { to { transform:translate3d(26px,-18px,0) scale(1.16); } }
.contact__actions .button { box-shadow:0 0 0 1px rgba(255,255,255,.03),0 14px 30px rgba(0,0,0,.18); }
.footer { position:relative; overflow:hidden; }
.footer::after { content:""; position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(90deg,var(--pink),transparent 30%,var(--cyan) 70%,var(--lime)); animation:footerLine 6s ease-in-out infinite alternate; }
@keyframes footerLine { to { transform:translateX(15%); filter:hue-rotate(40deg); } }
.reveal > * { opacity:0; transform:translate3d(0,22px,0); transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1); transition-delay:calc(var(--child-index,0) * 90ms); }
.reveal.is-visible > * { opacity:1; transform:none; }
.product-constellation.is-visible .product-card:hover,.product-constellation.is-visible .product-card.is-active { transform:translate3d(0,-12px,0) rotate(var(--tilt-y)) rotateX(var(--tilt-x)); }
@media (prefers-reduced-motion:reduce) { .hero__copy,.hero__stats,.family-cloud::before,.product-card::after,.quality__numbers b { animation:none!important; }.reveal > *,.product-card { transition-delay:0ms!important; } }

/* Full local product atlas: a tactile, searchable layer instead of an external dead-end. */
body.catalog-open { overflow:hidden; }
.catalog-modal { position:fixed; inset:0; z-index:45; display:grid; place-items:center; padding:clamp(14px,3vw,42px); opacity:0; pointer-events:none; transition:opacity .35s ease; }
.catalog-modal.is-open { opacity:1; pointer-events:auto; }
.catalog-modal__backdrop { position:absolute; inset:0; background:rgba(4,4,10,.78); backdrop-filter:blur(18px) saturate(1.25); }
.catalog-modal__panel { position:relative; width:min(1180px,100%); max-height:min(860px,calc(100vh - 32px)); overflow:hidden; padding:clamp(22px,3vw,42px); border:1px solid rgba(255,255,255,.22); border-radius:28px; background:linear-gradient(145deg,rgba(18,15,28,.98),rgba(7,8,17,.98)); box-shadow:0 30px 100px rgba(0,0,0,.58),0 0 0 1px rgba(183,255,42,.1),0 0 80px rgba(23,239,255,.12); transform:translateY(28px) scale(.96); transition:transform .45s cubic-bezier(.2,.8,.2,1); }
.catalog-modal.is-open .catalog-modal__panel { transform:none; }
.catalog-modal__panel::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(110deg,transparent 0 46%,rgba(255,255,255,.04) 48%,transparent 51%),repeating-linear-gradient(0deg,transparent 0 6px,rgba(255,255,255,.015) 7px 8px); mix-blend-mode:screen; opacity:.5; }
.catalog-modal__header,.catalog-toolbar,.catalog-filter,.catalog-grid,.catalog-status { position:relative; z-index:1; }
.catalog-modal__header { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:20px; }
.catalog-modal__header h2 { margin:8px 0 0; font-size:clamp(34px,5vw,76px); line-height:.9; letter-spacing:-.06em; }
.catalog-modal__header h2 em { color:var(--orange); font-style:normal; }
.catalog-close { display:grid; place-items:center; width:44px; height:44px; border:1px solid rgba(255,255,255,.24); border-radius:50%; color:var(--ink); background:rgba(255,255,255,.05); font-size:28px; line-height:1; cursor:pointer; transition:transform .25s,background .25s,color .25s; }
.catalog-close:hover,.catalog-close:focus-visible { color:#07070c; background:var(--lime); transform:rotate(90deg); outline:none; }
.catalog-toolbar { display:flex; align-items:center; gap:16px; margin-bottom:12px; }
.catalog-search { display:flex; align-items:center; flex:1; min-width:0; gap:10px; padding:0 16px; border:1px solid rgba(255,255,255,.2); border-radius:999px; background:rgba(255,255,255,.06); color:var(--lime); }
.catalog-search span { font-size:24px; line-height:1; }
.catalog-search input { width:100%; padding:14px 0; border:0; outline:0; color:var(--ink); background:transparent; font:inherit; font-size:13px; letter-spacing:.04em; }
.catalog-search input::placeholder { color:rgba(245,242,238,.48); }
.catalog-count { flex:none; color:rgba(245,242,238,.55); font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
.catalog-count b { color:var(--orange); font-size:18px; }
.catalog-status { min-height:20px; margin:2px 0 10px; color:var(--lime); font-size:11px; letter-spacing:.08em; }
.catalog-filter { display:flex; gap:8px; overflow:auto; padding:4px 0 16px; scrollbar-width:thin; scrollbar-color:rgba(183,255,42,.5) transparent; }
.catalog-filter__button { flex:none; padding:8px 12px; border:1px solid rgba(255,255,255,.17); border-radius:999px; color:rgba(245,242,238,.72); background:rgba(255,255,255,.04); font:inherit; font-size:10px; letter-spacing:.07em; cursor:pointer; transition:.25s; }
.catalog-filter__button b { margin-left:5px; color:var(--orange); font-size:10px; }
.catalog-filter__button:hover,.catalog-filter__button:focus-visible,.catalog-filter__button.is-active { border-color:var(--lime); color:#07070c; background:var(--lime); outline:none; box-shadow:0 0 20px rgba(183,255,42,.24); }
.catalog-filter__button:hover b,.catalog-filter__button.is-active b { color:#07070c; }
.catalog-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; max-height:calc(min(860px,100vh - 32px) - 230px); overflow:auto; padding:2px 3px 4px 0; scrollbar-width:thin; scrollbar-color:rgba(23,239,255,.55) transparent; }
.catalog-item { position:relative; z-index:0; display:grid; grid-template-columns:auto 1fr auto; grid-template-rows:auto auto; gap:4px 10px; min-height:84px; padding:14px 13px; border:1px solid rgba(255,255,255,.13); border-radius:14px; overflow:hidden; color:var(--ink); text-align:left; background:linear-gradient(135deg,rgba(23,239,255,.06),rgba(255,63,159,.05)); cursor:pointer; transform-style:preserve-3d; transition:transform .34s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .34s,background .3s; }
.catalog-item::before { content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(150px circle at var(--mx,50%) var(--my,50%),rgba(183,255,42,.42),transparent 64%),radial-gradient(220px circle at 110% -20%,rgba(255,63,159,.28),transparent 68%); opacity:0; transition:opacity .25s; pointer-events:none; }
.catalog-item::after { content:""; position:absolute; inset:1px; z-index:3; border:1px solid rgba(23,239,255,.36); background:linear-gradient(108deg,transparent 24%,rgba(255,255,255,.82) 48%,transparent 67%); background-size:220% 100%; background-position:170% 0; opacity:0; pointer-events:none; transition:opacity .2s; }
.catalog-item:hover,.catalog-item:focus-visible { z-index:4; transform:translate3d(0,-9px,24px) scale(1.045) rotate(-1.1deg); border-color:var(--acid); background:linear-gradient(135deg,rgba(23,239,255,.2),rgba(255,63,159,.18) 58%,rgba(183,255,42,.1)); box-shadow:0 20px 36px rgba(0,0,0,.42),0 0 0 1px rgba(183,255,42,.34),0 0 28px rgba(23,239,255,.34),0 0 46px rgba(255,63,159,.18); outline:none; }
.catalog-item:hover::before,.catalog-item:focus-visible::before { opacity:1; }
.catalog-item:hover::after,.catalog-item:focus-visible::after { opacity:.92; animation:catalogSweep .78s cubic-bezier(.2,.8,.2,1) both; }
.catalog-item.is-picked { border-color:var(--lime); box-shadow:0 0 0 2px rgba(183,255,42,.18),0 0 30px rgba(183,255,42,.22); animation:catalogPick .5s ease both; }
.catalog-item__index { grid-row:1 / span 2; align-self:center; color:var(--orange); font-size:10px; letter-spacing:.08em; transition:color .25s,transform .25s,text-shadow .25s; }
.catalog-item__name { min-width:0; overflow:hidden; color:var(--ink); font-family:var(--display); font-size:13px; line-height:1.05; text-overflow:ellipsis; white-space:nowrap; transition:transform .25s,letter-spacing .25s,text-shadow .25s; }
.catalog-item small { min-width:0; overflow:hidden; color:rgba(245,242,238,.48); font-size:9px; letter-spacing:.08em; text-overflow:ellipsis; white-space:nowrap; }
.catalog-item i { grid-column:3; grid-row:1 / span 2; align-self:center; color:var(--cyan); font-style:normal; font-size:18px; transition:color .25s,transform .3s,text-shadow .25s; }
.catalog-item:hover .catalog-item__index,.catalog-item:focus-visible .catalog-item__index { color:var(--acid); transform:translateX(2px); text-shadow:0 0 12px rgba(234,255,82,.8); }
.catalog-item:hover .catalog-item__name,.catalog-item:focus-visible .catalog-item__name { transform:translateX(3px); letter-spacing:.025em; text-shadow:0 0 14px rgba(255,255,255,.35); }
.catalog-item:hover i,.catalog-item:focus-visible i { color:var(--acid); transform:translate(4px,-4px) scale(1.24) rotate(-10deg); text-shadow:0 0 14px rgba(23,239,255,.9); }
.catalog-empty { grid-column:1 / -1; padding:42px 12px; color:rgba(245,242,238,.56); text-align:center; letter-spacing:.1em; }
@keyframes catalogPick { 50% { transform:scale(1.025); } }
@keyframes catalogSweep { from { background-position:170% 0; } to { background-position:-55% 0; } }
@media (max-width:900px) { .catalog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px) { .catalog-modal { padding:10px; }.catalog-modal__panel { max-height:calc(100vh - 20px); padding:20px 15px 16px; border-radius:20px; }.catalog-modal__header h2 { font-size:42px; }.catalog-toolbar { display:block; }.catalog-count { margin:10px 0 0 4px; }.catalog-grid { grid-template-columns:1fr; max-height:calc(100vh - 310px); }.catalog-item { min-height:70px; } }
@media (prefers-reduced-motion:reduce) { .catalog-modal,.catalog-modal__panel,.catalog-item,.catalog-close { transition:none; }.catalog-item.is-picked { animation:none; } }

.atlas.family-switching .section-head,
.atlas.family-switching .product-focus,
.atlas.family-switching .product-constellation { animation:atlasFamilyFlash .65s cubic-bezier(.2,.8,.2,1) both; }
@keyframes atlasFamilyFlash { 0% { opacity:.38; transform:translateY(16px); filter:saturate(.55) blur(2px); } 100% { opacity:1; transform:none; filter:none; } }
@media (prefers-reduced-motion:reduce) { .atlas.family-switching .section-head,.atlas.family-switching .product-focus,.atlas.family-switching .product-constellation { animation:none; } }

/* Quality is a dark evidence lab, so the certification supports the story instead of dominating it. */
.quality { color:var(--ink); background:radial-gradient(circle at 18% 50%,rgba(23,239,255,.14),transparent 28%),radial-gradient(circle at 82% 18%,rgba(255,63,159,.14),transparent 30%),linear-gradient(135deg,#0b0d16,#11101a 52%,#08090f); }
.quality::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg,transparent 0 45%,rgba(183,255,42,.06) 50%,transparent 55%),linear-gradient(0deg,transparent 0 70%,rgba(23,239,255,.06)); mix-blend-mode:screen; }
.quality p:not(.kicker) { color:var(--muted); }
.quality .text-link { color:var(--ink); }
.quality__ring { border:10px solid transparent; background:linear-gradient(rgba(8,9,15,.92),rgba(8,9,15,.7)) padding-box,conic-gradient(from 18deg,transparent 0 14%,rgba(23,239,255,.2) 19%,#17efff 25% 43%,rgba(23,239,255,.16) 50%,transparent 57% 69%,rgba(23,239,255,.58) 76%,transparent 86%) border-box; box-shadow:0 0 0 22px rgba(23,239,255,.07),0 0 0 54px rgba(255,63,159,.06),0 0 36px rgba(23,239,255,.42),0 0 80px rgba(255,63,159,.12); animation:qualityOrbitOuter 30s linear infinite,qualityArcPulse 3.8s ease-in-out infinite; }
.quality__ring::before { inset:16%; border:8px solid transparent; background:linear-gradient(rgba(8,9,15,.8),rgba(8,9,15,.55)) padding-box,conic-gradient(from 192deg,transparent 0 10%,rgba(255,63,159,.22) 15%,#ff3f9f 22% 46%,rgba(255,63,159,.14) 53%,transparent 60% 76%,rgba(255,63,159,.62) 82%,transparent 92%) border-box; box-shadow:0 0 30px rgba(255,63,159,.3),0 0 60px rgba(255,63,159,.12); animation:qualityOrbitMiddle 18s linear infinite reverse,qualityArcPulse 3.2s ease-in-out -.8s infinite; }
.quality__ring::after { inset:39%; border:6px solid transparent; background:linear-gradient(rgba(8,9,15,.7),rgba(8,9,15,.42)) padding-box,conic-gradient(from 78deg,transparent 0 20%,rgba(183,255,42,.2) 26%,#b7ff2a 33% 59%,rgba(183,255,42,.12) 66%,transparent 72% 86%,rgba(183,255,42,.68) 92%,transparent) border-box; box-shadow:0 0 24px rgba(183,255,42,.34),0 0 48px rgba(183,255,42,.14); animation:qualityOrbitInner 11s linear infinite,qualityArcPulse 2.7s ease-in-out -1.2s infinite; }
.quality__ring span { display:block; position:relative; z-index:1; line-height:1; text-align:center; animation:qualityOrbitOuter 30s linear infinite reverse; }
.quality__ring span strong { display:block; position:relative; isolation:isolate; font-family:Impact,"Arial Black","Helvetica Neue",sans-serif; font-size:clamp(25px,3vw,38px); font-weight:900; letter-spacing:.22em; transform:skewX(-10deg) scaleX(1.08); background:linear-gradient(112deg,#e9ffff 8%,#b7ff2a 34%,#ffffff 49%,#17efff 68%,#e9ffff 92%); background-size:220% 100%; background-position:0% 50%; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; -webkit-text-stroke:1px rgba(23,239,255,.48); text-shadow:0 0 8px rgba(183,255,42,.8),0 0 22px rgba(23,239,255,.58),3px 0 0 rgba(255,63,159,.2); animation:brandPulse 2.8s ease-in-out infinite,brandShine 3.4s linear infinite,brandJolt 1.35s steps(2,end) infinite; }
.quality__ring span strong::before,.quality__ring span strong::after { content:"BOMBO"; position:absolute; inset:0; z-index:2; pointer-events:none; font-family:inherit; font-size:inherit; font-weight:inherit; letter-spacing:inherit; line-height:inherit; text-align:inherit; mix-blend-mode:screen; }
.quality__ring span strong::before { color:#17efff; -webkit-text-fill-color:#17efff; clip-path:polygon(0 4%,100% 4%,100% 17%,0 17%,0 31%,100% 31%,100% 37%,0 37%,0 58%,100% 58%,100% 69%,0 69%,0 84%,100% 84%,100% 96%,0 96%); filter:drop-shadow(-4px 0 0 rgba(23,239,255,.95)); animation:brandGlitchCyan 1.18s steps(3,end) infinite; }
.quality__ring span strong::after { color:#ff3f9f; -webkit-text-fill-color:#ff3f9f; clip-path:polygon(0 0,100% 0,100% 10%,0 10%,0 22%,100% 22%,100% 29%,0 29%,0 47%,100% 47%,100% 55%,0 55%,0 73%,100% 73%,100% 82%,0 82%,0 91%,100% 91%,100% 100%,0 100%); filter:drop-shadow(4px 0 0 rgba(255,63,159,.95)); animation:brandGlitchPink 1.55s steps(2,end) -.32s infinite; }
.quality__ring span b,.quality__ring span small { display:none; }
.quality__numbers span { color:rgba(245,242,238,.72); }
@keyframes qualityOrbitOuter { to { transform:rotate(360deg); } }
@keyframes qualityOrbitMiddle { to { transform:rotate(360deg); } }
@keyframes qualityOrbitInner { to { transform:rotate(360deg); } }
@keyframes qualityArcPulse { 0%,100% { filter:brightness(.78) saturate(.95); } 50% { filter:brightness(1.3) saturate(1.35); } }
@keyframes brandPulse { 0%,100% { transform:skewX(-8deg) scaleX(1.04) scaleY(.98); filter:brightness(.9); } 50% { transform:skewX(-8deg) scaleX(1.12) scaleY(1.04); filter:brightness(1.35); } }
@keyframes brandShine { to { background-position:220% 50%; } }
@keyframes brandJolt { 0%,68%,100% { text-shadow:0 0 8px rgba(183,255,42,.8),0 0 22px rgba(23,239,255,.58),3px 0 0 rgba(255,63,159,.2); } 71% { text-shadow:-6px 0 0 rgba(23,239,255,.95),6px 0 0 rgba(255,63,159,.9),0 0 26px rgba(183,255,42,.9); } 74% { text-shadow:4px 0 0 rgba(23,239,255,.9),-5px 0 0 rgba(255,63,159,.8),0 0 12px rgba(255,255,255,.8); } 78% { text-shadow:-2px 0 0 rgba(23,239,255,.7),2px 0 0 rgba(255,63,159,.7),0 0 20px rgba(183,255,42,.8); } 84% { text-shadow:0 0 8px rgba(183,255,42,.8),0 0 22px rgba(23,239,255,.58),3px 0 0 rgba(255,63,159,.2); } }
@keyframes brandGlitchCyan { 0%,68%,100% { opacity:0; transform:translate(0,0); } 71% { opacity:.9; transform:translate(-3px,1px) skewX(-10deg); } 75% { opacity:.34; transform:translate(4px,-1px) skewX(-10deg); } 79% { opacity:.82; transform:translate(-1px,0) skewX(-10deg); } 84% { opacity:0; transform:translate(0,0); } }
@keyframes brandGlitchPink { 0%,57%,100% { opacity:0; transform:translate(0,0); } 61% { opacity:.82; transform:translate(3px,-1px) skewX(-10deg); } 66% { opacity:.28; transform:translate(-4px,1px) skewX(-10deg); } 72% { opacity:.7; transform:translate(1px,0) skewX(-10deg); } 78% { opacity:0; transform:translate(0,0); } }
@media (prefers-reduced-motion:reduce) { .quality__ring,.quality__ring::before,.quality__ring::after,.quality__ring span,.quality__ring span strong,.quality__ring span strong::before,.quality__ring span strong::after { animation:none; } }

/* Quality reactor: asymmetric energy paths instead of a static target symbol. */
.quality { overflow:hidden; background:radial-gradient(circle at 10% 58%,rgba(23,239,255,.18),transparent 25%),radial-gradient(circle at 46% 110%,rgba(183,255,42,.1),transparent 30%),radial-gradient(circle at 88% 18%,rgba(255,63,159,.18),transparent 32%),linear-gradient(135deg,#080b14,#12101b 54%,#090910); }
.quality::before { opacity:.18; background-size:44px 44px; animation:qualityGrid 11s linear infinite; }
.quality::after { background:linear-gradient(112deg,transparent 0 23%,rgba(23,239,255,.08) 29%,transparent 36% 61%,rgba(255,63,159,.1) 67%,transparent 74%),radial-gradient(ellipse at 18% 50%,rgba(23,239,255,.13),transparent 34%); mix-blend-mode:screen; animation:reactorBackdrop 12s ease-in-out infinite alternate; }
.quality > .quality__ring { position:relative; display:grid; place-items:center; width:min(390px,34vw); aspect-ratio:1; overflow:visible; isolation:isolate; border:0; border-radius:0; background:none; box-shadow:none; transform:rotate(-12deg) skewX(-3deg); animation:none; }
.quality.is-visible > .quality__ring { transform:rotate(-12deg) skewX(-3deg); }
.quality__ring::before { content:""; position:absolute; inset:3%; z-index:-3; border-radius:46% 54% 52% 48% / 48% 43% 57% 52%; background:conic-gradient(from 18deg,transparent 0 7%,rgba(23,239,255,.08) 7% 12%,#17efff 13% 18%,transparent 19% 36%,rgba(255,63,159,.85) 37% 43%,transparent 44% 65%,rgba(183,255,42,.72) 66% 72%,transparent 73% 91%,rgba(23,239,255,.5) 92% 97%,transparent 98%); -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 21px),#000 calc(100% - 17px)); mask:radial-gradient(farthest-side,transparent calc(100% - 21px),#000 calc(100% - 17px)); filter:blur(1px) drop-shadow(0 0 18px rgba(23,239,255,.5)); animation:reactorHalo 4.8s ease-in-out infinite,reactorHaloSpin 24s linear infinite; }
.quality__ring::after { content:""; position:absolute; inset:12%; z-index:-2; border-radius:50%; background:repeating-conic-gradient(from -14deg,transparent 0 8deg,rgba(23,239,255,.18) 8.5deg 9.8deg,transparent 10.4deg 21deg,rgba(255,63,159,.12) 21.5deg 22.5deg,transparent 23deg 34deg); -webkit-mask:radial-gradient(farthest-side,transparent 0 55%,#000 56% 69%,transparent 70%); mask:radial-gradient(farthest-side,transparent 0 55%,#000 56% 69%,transparent 70%); filter:drop-shadow(0 0 12px rgba(255,63,159,.32)); opacity:.9; animation:reactorRays 9s linear infinite reverse; }
.quality__energy { position:absolute; display:block; z-index:1; border:0; line-height:0; transform-origin:50% 50%; pointer-events:none; }
.quality__energy::before { content:""; position:absolute; inset:0; border:10px solid transparent; border-radius:inherit; background:linear-gradient(rgba(6,8,15,.8),rgba(9,8,17,.36)) padding-box,conic-gradient(from 210deg,transparent 0 7%,rgba(23,239,255,.35) 8%,#17efff 14% 24%,transparent 25% 43%,rgba(255,63,159,.18) 44%,#ff3f9f 49% 59%,transparent 60% 78%,rgba(183,255,42,.22) 79%,#b7ff2a 83% 89%,transparent 90%) border-box; box-shadow:0 0 24px rgba(23,239,255,.34),inset 0 0 18px rgba(23,239,255,.12); animation:energyPulse 3.2s ease-in-out infinite; }
.quality__energy::after { content:""; position:absolute; inset:7%; border:1px dashed rgba(245,242,238,.18); border-radius:inherit; opacity:.7; animation:microOrbit 8s linear infinite; }
.quality__energy--outer { inset:1%; border-radius:47% 53% 51% 49% / 51% 44% 56% 49%; transform:rotate(18deg) skewX(-8deg); animation:orbitOuter 25s linear infinite; }
.quality__energy--middle { inset:15%; border-radius:54% 46% 48% 52% / 45% 57% 43% 55%; transform:rotate(-28deg) skewX(9deg); animation:orbitMiddle 17s linear infinite reverse; }
.quality__energy--inner { inset:30%; border-radius:44% 56% 57% 43% / 56% 45% 55% 44%; transform:rotate(42deg) skewX(-7deg); animation:orbitInner 10s linear infinite; }
.quality__energy--middle::before { inset:1px; border-width:8px; background:linear-gradient(rgba(12,7,17,.72),rgba(13,8,17,.34)) padding-box,conic-gradient(from 30deg,transparent 0 13%,rgba(255,63,159,.2) 14%,#ff3f9f 19% 39%,transparent 40% 57%,rgba(23,239,255,.26) 58%,#17efff 62% 70%,transparent 71% 87%,rgba(255,123,46,.38) 88% 94%,transparent 95%) border-box; box-shadow:0 0 26px rgba(255,63,159,.36),inset 0 0 18px rgba(255,63,159,.12); animation-delay:-.8s; }
.quality__energy--inner::before { inset:2px; border-width:6px; background:linear-gradient(rgba(10,10,16,.62),rgba(8,8,14,.24)) padding-box,conic-gradient(from 120deg,transparent 0 11%,rgba(183,255,42,.2) 12%,#b7ff2a 17% 36%,transparent 37% 56%,rgba(23,239,255,.24) 57%,#17efff 62% 75%,transparent 76% 90%,rgba(255,63,159,.5) 91% 96%,transparent 97%) border-box; box-shadow:0 0 24px rgba(183,255,42,.4),inset 0 0 14px rgba(183,255,42,.12); animation-delay:-1.4s; }
.quality__energy--middle::after { border-color:rgba(255,63,159,.42); animation-direction:reverse; animation-duration:6s; }
.quality__energy--inner::after { border-color:rgba(183,255,42,.44); animation-duration:4.5s; }
.quality__energy i { position:absolute; top:-7px; left:50%; z-index:2; display:block; width:38px; height:10px; border-radius:2px; background:linear-gradient(90deg,transparent,#17efff 22%,#f5ffff 52%,#b7ff2a 82%,transparent); clip-path:polygon(0 50%,14% 0,100% 8%,82% 100%,14% 100%); box-shadow:0 0 12px rgba(23,239,255,.9),0 0 24px rgba(183,255,42,.48); transform:translateX(-50%) rotate(-16deg); animation:shardFlash 1.55s steps(2,end) infinite; }
.quality__energy--middle i { width:32px; height:8px; background:linear-gradient(90deg,transparent,#ff3f9f 18%,#fff 52%,#ff7b2e 84%,transparent); box-shadow:0 0 12px rgba(255,63,159,.85),0 0 22px rgba(255,123,46,.45); animation-delay:-.45s; }
.quality__energy--inner i { width:26px; height:7px; background:linear-gradient(90deg,transparent,#b7ff2a 20%,#fff 52%,#17efff 82%,transparent); box-shadow:0 0 12px rgba(183,255,42,.9),0 0 20px rgba(23,239,255,.5); animation-delay:-.92s; }
.quality__shock { position:absolute; left:50%; top:50%; z-index:2; display:block; width:104px; height:58px; background:linear-gradient(135deg,rgba(23,239,255,.18),#17efff 34%,#fff 51%,#ff3f9f 72%,rgba(255,63,159,.08)); clip-path:polygon(0 53%,11% 17%,22% 45%,35% 2%,44% 39%,56% 0,63% 43%,82% 18%,100% 35%,86% 60%,96% 86%,68% 70%,57% 100%,44% 69%,24% 88%,18% 62%); filter:drop-shadow(0 0 10px rgba(23,239,255,.76)); opacity:.65; pointer-events:none; }
.quality__shock--one { transform:translate(-50%,-50%) rotate(-23deg) translateX(112px) scale(.8); animation:shockOne 2.6s cubic-bezier(.2,.8,.2,1) infinite; }
.quality__shock--two { width:78px; height:42px; background:linear-gradient(135deg,rgba(183,255,42,.12),#b7ff2a 34%,#fff 53%,#ff3f9f 78%,rgba(255,63,159,.08)); filter:drop-shadow(0 0 9px rgba(183,255,42,.82)); transform:translate(-50%,-50%) rotate(48deg) translateX(-104px) scale(.7); animation:shockTwo 2.1s cubic-bezier(.2,.8,.2,1) -.7s infinite reverse; }
.quality__core { position:relative; z-index:5; display:grid; place-items:center; width:43%; aspect-ratio:1; border-radius:42% 58% 47% 53% / 52% 41% 59% 48%; background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.2),transparent 17%),radial-gradient(circle at 58% 60%,rgba(183,255,42,.32),rgba(23,239,255,.14) 39%,rgba(9,8,16,.94) 73%); box-shadow:inset 12px 8px 26px rgba(255,255,255,.1),inset -18px -12px 28px rgba(0,0,0,.46),0 0 0 1px rgba(245,242,238,.2),0 0 28px rgba(23,239,255,.44),0 0 54px rgba(255,63,159,.22); transform:rotate(12deg); animation:coreThrob 2.7s ease-in-out infinite; }
.quality__core::before { content:""; position:absolute; inset:-16%; border:1px solid rgba(23,239,255,.55); border-radius:inherit; transform:rotate(-25deg); box-shadow:0 0 18px rgba(23,239,255,.3),inset 0 0 18px rgba(255,63,159,.18); animation:coreFrame 5s linear infinite; }
.quality__core::after { content:""; position:absolute; inset:10%; border-radius:inherit; background:repeating-linear-gradient(0deg,transparent 0 4px,rgba(245,242,238,.08) 5px 6px); mix-blend-mode:screen; opacity:.28; animation:coreScan 1.9s steps(4,end) infinite; }
.quality__core strong { display:block; position:relative; z-index:2; font-family:Impact,"Arial Black","Helvetica Neue",sans-serif; font-size:clamp(24px,3.2vw,42px); font-weight:900; letter-spacing:.15em; line-height:1; text-align:center; transform:rotate(-12deg) skewX(-13deg) scaleX(1.08); background:linear-gradient(105deg,#eaff52 6%,#fff 34%,#17efff 55%,#ff3f9f 78%,#eaff52 96%); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.34); text-shadow:0 0 8px rgba(183,255,42,.86),0 0 24px rgba(23,239,255,.72),4px 0 0 rgba(255,63,159,.35); animation:coreLogoPulse 2.4s ease-in-out infinite,coreLogoShine 3.1s linear infinite,coreLogoJolt 1.25s steps(2,end) infinite; }
.quality__core strong::before,.quality__core strong::after { content:"BOMBO"; position:absolute; inset:0; z-index:3; pointer-events:none; font:inherit; letter-spacing:inherit; line-height:inherit; text-align:inherit; mix-blend-mode:screen; }
.quality__core strong::before { color:#17efff; -webkit-text-fill-color:#17efff; clip-path:polygon(0 5%,100% 5%,100% 18%,0 18%,0 33%,100% 33%,100% 39%,0 39%,0 60%,100% 60%,100% 69%,0 69%,0 85%,100% 85%,100% 96%,0 96%); filter:drop-shadow(-4px 0 0 rgba(23,239,255,.96)); animation:coreGlitchCyan 1.12s steps(3,end) infinite; }
.quality__core strong::after { color:#ff3f9f; -webkit-text-fill-color:#ff3f9f; clip-path:polygon(0 0,100% 0,100% 11%,0 11%,0 23%,100% 23%,100% 31%,0 31%,0 48%,100% 48%,100% 57%,0 57%,0 74%,100% 74%,100% 84%,0 84%,0 92%,100% 92%,100% 100%,0 100%); filter:drop-shadow(4px 0 0 rgba(255,63,159,.96)); animation:coreGlitchPink 1.48s steps(2,end) -.26s infinite; }
.quality__numbers b { color:var(--pink); text-shadow:0 0 16px rgba(255,63,159,.4); }
@keyframes reactorBackdrop { to { transform:translate3d(3%, -2%, 0) scale(1.08); filter:hue-rotate(24deg); } }
@keyframes reactorHalo { 0%,100% { opacity:.56; filter:blur(1px) drop-shadow(0 0 14px rgba(23,239,255,.32)); } 50% { opacity:1; filter:blur(1px) drop-shadow(0 0 28px rgba(255,63,159,.52)); } }
@keyframes reactorHaloSpin { to { transform:rotate(360deg); } }
@keyframes reactorRays { to { transform:rotate(360deg); } }
@keyframes orbitOuter { to { transform:rotate(378deg) skewX(-8deg); } }
@keyframes orbitMiddle { to { transform:rotate(-388deg) skewX(9deg); } }
@keyframes orbitInner { to { transform:rotate(402deg) skewX(-7deg); } }
@keyframes energyPulse { 0%,100% { filter:brightness(.74) saturate(.9); } 50% { filter:brightness(1.36) saturate(1.5); } }
@keyframes microOrbit { to { transform:rotate(-360deg); } }
@keyframes shardFlash { 0%,70%,100% { opacity:.42; transform:translateX(-50%) rotate(-16deg) scaleX(.78); } 74% { opacity:1; transform:translateX(-50%) rotate(-16deg) scaleX(1.22); } 80% { opacity:.64; transform:translateX(-50%) rotate(-16deg) scaleX(.92); } }
@keyframes shockOne { 0%,100% { opacity:.12; transform:translate(-50%,-50%) rotate(-23deg) translateX(112px) scale(.62) rotate(-8deg); } 50% { opacity:.94; transform:translate(-50%,-50%) rotate(-23deg) translateX(112px) scale(1.1) rotate(8deg); } }
@keyframes shockTwo { 0%,100% { opacity:.1; transform:translate(-50%,-50%) rotate(48deg) translateX(-104px) scale(.55) rotate(7deg); } 50% { opacity:.86; transform:translate(-50%,-50%) rotate(48deg) translateX(-104px) scale(1.08) rotate(-7deg); } }
@keyframes coreThrob { 0%,100% { transform:rotate(12deg) scale(.94); filter:brightness(.86); } 50% { transform:rotate(12deg) scale(1.04); filter:brightness(1.28); } }
@keyframes coreFrame { to { transform:rotate(335deg); } }
@keyframes coreScan { 0%,100% { transform:translateY(-14%); opacity:.08; } 50% { transform:translateY(14%); opacity:.38; } }
@keyframes coreLogoPulse { 0%,100% { transform:rotate(-12deg) skewX(-13deg) scaleX(1.04) scaleY(.96); filter:brightness(.88); } 50% { transform:rotate(-12deg) skewX(-13deg) scaleX(1.12) scaleY(1.05); filter:brightness(1.4); } }
@keyframes coreLogoShine { to { background-position:220% 50%; } }
@keyframes coreLogoJolt { 0%,68%,100% { text-shadow:0 0 8px rgba(183,255,42,.86),0 0 24px rgba(23,239,255,.72),4px 0 0 rgba(255,63,159,.35); } 71% { text-shadow:-7px 0 0 rgba(23,239,255,.98),7px 0 0 rgba(255,63,159,.94),0 0 28px rgba(183,255,42,.94); } 75% { text-shadow:5px 0 0 rgba(23,239,255,.9),-6px 0 0 rgba(255,63,159,.86),0 0 14px rgba(255,255,255,.9); } 82% { text-shadow:0 0 8px rgba(183,255,42,.86),0 0 24px rgba(23,239,255,.72),4px 0 0 rgba(255,63,159,.35); } }
@keyframes coreGlitchCyan { 0%,68%,100% { opacity:0; transform:translate(0,0); } 71% { opacity:.92; transform:translate(-4px,1px) skewX(-13deg); } 75% { opacity:.34; transform:translate(4px,-1px) skewX(-13deg); } 80% { opacity:.8; transform:translate(-1px,0) skewX(-13deg); } 85% { opacity:0; transform:translate(0,0); } }
@keyframes coreGlitchPink { 0%,56%,100% { opacity:0; transform:translate(0,0); } 61% { opacity:.84; transform:translate(4px,-1px) skewX(-13deg); } 66% { opacity:.3; transform:translate(-5px,1px) skewX(-13deg); } 72% { opacity:.72; transform:translate(1px,0) skewX(-13deg); } 79% { opacity:0; transform:translate(0,0); } }
@media (max-width:860px) { .quality > .quality__ring { width:280px; } }
@media (prefers-reduced-motion:reduce) { .quality::after,.quality__ring,.quality__ring::before,.quality__ring::after,.quality__energy,.quality__energy::before,.quality__energy::after,.quality__energy i,.quality__shock,.quality__core,.quality__core::before,.quality__core::after,.quality__core strong,.quality__core strong::before,.quality__core strong::after { animation:none!important; } }

/* Keep the reactor layers above the legacy ring defaults defined earlier in the file. */
.quality__ring .quality__energy { position:absolute; display:block; z-index:1; line-height:0; animation-name:orbitOuter; animation-duration:25s; animation-timing-function:linear; animation-iteration-count:infinite; }
.quality__ring .quality__energy--outer { inset:1%; transform:rotate(18deg) skewX(-8deg); animation-name:orbitOuter; animation-duration:25s; animation-direction:normal; }
.quality__ring .quality__energy--middle { inset:15%; transform:rotate(-28deg) skewX(9deg); animation-name:orbitMiddle; animation-duration:17s; animation-direction:reverse; }
.quality__ring .quality__energy--inner { inset:30%; transform:rotate(42deg) skewX(-7deg); animation-name:orbitInner; animation-duration:10s; animation-direction:normal; }
.quality__ring .quality__shock { position:absolute; display:block; z-index:2; line-height:0; animation-name:shockOne; animation-duration:2.6s; animation-direction:normal; animation-timing-function:cubic-bezier(.2,.8,.2,1); animation-iteration-count:infinite; }
.quality__ring .quality__shock--one { left:50%; top:50%; width:104px; height:58px; transform:translate(-50%,-50%) rotate(-23deg) translateX(112px) scale(.8); animation-name:shockOne; animation-direction:normal; }
.quality__ring .quality__shock--two { left:50%; top:50%; width:78px; height:42px; transform:translate(-50%,-50%) rotate(48deg) translateX(-104px) scale(.7); animation-name:shockTwo; animation-duration:2.1s; animation-direction:reverse; }
.quality__ring .quality__core { position:relative; display:grid; place-items:center; z-index:5; width:43%; aspect-ratio:1; line-height:normal; text-align:center; animation-name:coreThrob; animation-duration:2.7s; animation-direction:normal; animation-timing-function:ease-in-out; animation-iteration-count:infinite; }
.quality__ring .quality__core strong { display:block; position:relative; z-index:2; font-family:Impact,"Arial Black","Helvetica Neue",sans-serif; font-size:clamp(24px,3.2vw,42px); font-weight:900; letter-spacing:.15em; line-height:1; text-align:center; transform:rotate(-12deg) skewX(-13deg) scaleX(1.08); background:linear-gradient(105deg,#eaff52 6%,#fff 34%,#17efff 55%,#ff3f9f 78%,#eaff52 96%); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.34); text-shadow:0 0 8px rgba(183,255,42,.86),0 0 24px rgba(23,239,255,.72),4px 0 0 rgba(255,63,159,.35); animation:coreLogoPulse 2.4s ease-in-out infinite,coreLogoShine 3.1s linear infinite,coreLogoJolt 1.25s steps(2,end) infinite; }
.quality__ring .quality__core strong::before,.quality__ring .quality__core strong::after { content:"BOMBO"; position:absolute; inset:0; z-index:3; pointer-events:none; font:inherit; letter-spacing:inherit; line-height:inherit; text-align:inherit; mix-blend-mode:screen; }
.quality__ring .quality__core strong::before { color:#17efff; -webkit-text-fill-color:#17efff; clip-path:polygon(0 5%,100% 5%,100% 18%,0 18%,0 33%,100% 33%,100% 39%,0 39%,0 60%,100% 60%,100% 69%,0 69%,0 85%,100% 85%,100% 96%,0 96%); filter:drop-shadow(-4px 0 0 rgba(23,239,255,.96)); animation:coreGlitchCyan 1.12s steps(3,end) infinite; }
.quality__ring .quality__core strong::after { color:#ff3f9f; -webkit-text-fill-color:#ff3f9f; clip-path:polygon(0 0,100% 0,100% 11%,0 11%,0 23%,100% 23%,100% 31%,0 31%,0 48%,100% 48%,100% 57%,0 57%,0 74%,100% 74%,100% 84%,0 84%,0 92%,100% 92%,100% 100%,0 100%); filter:drop-shadow(4px 0 0 rgba(255,63,159,.96)); animation:coreGlitchPink 1.48s steps(2,end) -.26s infinite; }
@media (prefers-reduced-motion:reduce) { .quality__ring .quality__energy,.quality__ring .quality__shock,.quality__ring .quality__core,.quality__ring .quality__core strong,.quality__ring .quality__core strong::before,.quality__ring .quality__core strong::after { animation:none!important; } }

/* Quality reactor v2: three deliberate signal arcs and a readable brand core. */
.quality > .quality__ring { width:min(420px,36vw); aspect-ratio:1; position:relative; display:grid; place-items:center; isolation:isolate; overflow:visible; border:0; border-radius:50%; background:transparent; box-shadow:none; transform:none!important; animation:none!important; }
.quality > .quality__ring::before { content:""; position:absolute; inset:16%; z-index:-3; border-radius:50%; background:radial-gradient(circle,rgba(23,239,255,.23),rgba(183,255,42,.08) 34%,transparent 70%); filter:blur(16px); animation:qualityCoreAura 4s ease-in-out infinite; }
.quality > .quality__ring::after { content:""; position:absolute; inset:4%; z-index:-2; border-radius:50%; background:repeating-conic-gradient(from 3deg,rgba(23,239,255,.24) 0 1deg,transparent 1deg 18deg,rgba(255,63,159,.18) 18deg 19deg,transparent 19deg 36deg); -webkit-mask:radial-gradient(farthest-side,transparent 0 77%,#000 78% 79%,transparent 80%); mask:radial-gradient(farthest-side,transparent 0 77%,#000 78% 79%,transparent 80%); opacity:.45; animation:qualityTicks 16s linear infinite reverse; }
.quality__arc { position:absolute; display:block; border-radius:50%; pointer-events:none; transform-origin:50% 50%; will-change:transform,filter; }
.quality__arc::before { content:""; position:absolute; inset:0; border-radius:inherit; background:inherit; -webkit-mask:inherit; mask:inherit; filter:blur(5px); opacity:.34; }
.quality__arc--outer { inset:0; --arc-thickness:15px; background:conic-gradient(from -28deg,#17efff 0 13deg,transparent 13deg 42deg,#ff3f9f 42deg 77deg,transparent 77deg 166deg,#b7ff2a 166deg 182deg,transparent 182deg 268deg,#17efff 268deg 305deg,transparent 305deg 360deg); -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--arc-thickness)),#000 calc(100% - var(--arc-thickness) + 2px)); mask:radial-gradient(farthest-side,transparent calc(100% - var(--arc-thickness)),#000 calc(100% - var(--arc-thickness) + 2px)); filter:drop-shadow(0 0 13px rgba(23,239,255,.65)); animation:qualityArcOuter 22s linear infinite; }
.quality__arc--middle { inset:13%; --arc-thickness:11px; background:conic-gradient(from 102deg,transparent 0 25deg,#ff3f9f 25deg 64deg,transparent 64deg 138deg,#ff7b2e 138deg 164deg,transparent 164deg 264deg,#17efff 264deg 313deg,transparent 313deg 360deg); -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--arc-thickness)),#000 calc(100% - var(--arc-thickness) + 2px)); mask:radial-gradient(farthest-side,transparent calc(100% - var(--arc-thickness)),#000 calc(100% - var(--arc-thickness) + 2px)); filter:drop-shadow(0 0 12px rgba(255,63,159,.56)); animation:qualityArcMiddle 15s linear infinite reverse; }
.quality__arc--inner { inset:27%; --arc-thickness:8px; background:conic-gradient(from 214deg,#b7ff2a 0 38deg,transparent 38deg 104deg,#17efff 104deg 146deg,transparent 146deg 228deg,#ff3f9f 228deg 258deg,transparent 258deg 360deg); -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--arc-thickness)),#000 calc(100% - var(--arc-thickness) + 2px)); mask:radial-gradient(farthest-side,transparent calc(100% - var(--arc-thickness)),#000 calc(100% - var(--arc-thickness) + 2px)); filter:drop-shadow(0 0 10px rgba(183,255,42,.62)); animation:qualityArcInner 9s linear infinite; }
.quality__scan { position:absolute; left:10%; top:50%; z-index:1; width:80%; height:2px; border-radius:999px; background:linear-gradient(90deg,transparent 0 12%,rgba(23,239,255,.08) 22%,#17efff 43%,#fff 50%,#ff3f9f 58%,rgba(255,63,159,.08) 78%,transparent 88%); box-shadow:0 0 14px rgba(23,239,255,.6),0 0 25px rgba(255,63,159,.25); transform:translateY(-50%) scaleX(.45); opacity:.42; animation:qualityScan 3.6s cubic-bezier(.2,.8,.2,1) infinite; }
.quality__core { position:relative; z-index:5; display:grid; place-items:center; width:58%; aspect-ratio:2.3; border:1px solid rgba(234,255,82,.88); border-radius:999px; background:linear-gradient(125deg,#0d1824 0%,#10101d 48%,#1b0e20 100%); box-shadow:inset 0 0 18px rgba(23,239,255,.22),0 0 0 5px rgba(23,239,255,.07),0 0 25px rgba(23,239,255,.38),0 0 40px rgba(255,63,159,.2); transform:rotate(-7deg) skewX(-8deg); animation:qualityCorePulse 3.2s ease-in-out infinite; }
.quality__core::before { content:""; position:absolute; inset:-9px -15px; border:1px solid rgba(23,239,255,.35); border-radius:inherit; transform:translate(7px,-5px) rotate(8deg); box-shadow:0 0 16px rgba(23,239,255,.22); }
.quality__core::after { content:""; position:absolute; inset:3px; border-radius:inherit; background:linear-gradient(105deg,transparent 0 38%,rgba(255,255,255,.22) 47%,transparent 55%); background-size:240% 100%; opacity:.42; animation:qualityCoreSweep 2.8s linear infinite; }
.quality__core strong { position:relative; z-index:2; display:block; color:#f8fff2; font-family:Impact,"Arial Black","Helvetica Neue",sans-serif; font-size:clamp(25px,3.25vw,43px); font-weight:900; letter-spacing:.18em; line-height:1; white-space:nowrap; text-shadow:0 0 5px rgba(255,255,255,.85),0 0 14px rgba(183,255,42,.92),0 0 28px rgba(23,239,255,.52); transform:skewX(8deg); animation:qualityBrandPulse 3.2s ease-in-out infinite,qualityBrandJolt 4.8s steps(2,end) infinite; }
.quality__core strong::before,.quality__core strong::after { content:attr(data-label); position:absolute; inset:0; z-index:3; pointer-events:none; font:inherit; letter-spacing:inherit; line-height:inherit; white-space:nowrap; opacity:0; }
.quality__core strong::before { color:#17efff; text-shadow:-4px 0 0 rgba(23,239,255,.9); clip-path:inset(18% 0 58% 0); animation:qualityBrandCyan 4.8s steps(3,end) infinite; }
.quality__core strong::after { color:#ff3f9f; text-shadow:4px 0 0 rgba(255,63,159,.9); clip-path:inset(62% 0 16% 0); animation:qualityBrandPink 4.8s steps(2,end) -.35s infinite; }
.quality__numbers b { color:var(--pink); text-shadow:0 0 16px rgba(255,63,159,.4); }
@keyframes qualityArcOuter { to { transform:rotate(360deg); } }
@keyframes qualityArcMiddle { to { transform:rotate(-360deg); } }
@keyframes qualityArcInner { to { transform:rotate(360deg); } }
@keyframes qualityTicks { to { transform:rotate(360deg); } }
@keyframes qualityCoreAura { 0%,100% { opacity:.6; transform:scale(.92); } 50% { opacity:1; transform:scale(1.08); } }
@keyframes qualityScan { 0%,100% { transform:translateY(-50%) scaleX(.3); opacity:.15; } 48% { transform:translateY(-50%) scaleX(1); opacity:.78; } 58% { transform:translateY(-50%) scaleX(.72); opacity:.45; } }
@keyframes qualityCorePulse { 0%,100% { transform:rotate(-7deg) skewX(-8deg) scale(.96); filter:brightness(.9); } 50% { transform:rotate(-7deg) skewX(-8deg) scale(1.04); filter:brightness(1.22); } }
@keyframes qualityCoreSweep { to { background-position:-140% 0; } }
@keyframes qualityBrandPulse { 0%,100% { transform:skewX(8deg) scaleX(1); } 50% { transform:skewX(8deg) scaleX(1.06); } }
@keyframes qualityBrandJolt { 0%,82%,100% { transform:skewX(8deg) translateX(0); } 85% { transform:skewX(8deg) translateX(-2px); } 88% { transform:skewX(8deg) translateX(2px); } }
@keyframes qualityBrandCyan { 0%,82%,100% { opacity:0; transform:translateX(0); } 85% { opacity:.75; transform:translateX(-4px); } 89% { opacity:0; transform:translateX(0); } }
@keyframes qualityBrandPink { 0%,76%,100% { opacity:0; transform:translateX(0); } 79% { opacity:.7; transform:translateX(4px); } 83% { opacity:0; transform:translateX(0); } }
@media (max-width:860px) { .quality > .quality__ring { width:280px; } }
@media (prefers-reduced-motion:reduce) { .quality > .quality__ring::before,.quality > .quality__ring::after,.quality__arc,.quality__scan,.quality__core,.quality__core::before,.quality__core::after,.quality__core strong,.quality__core strong::before,.quality__core strong::after { animation:none!important; } }

/* v2 cascade repair: the legacy span/core rules above are more specific, so the
   direct-child selectors below keep the reactor geometry and brand mark honest. */
.quality > .quality__ring > .quality__arc {
  position:absolute;
  display:block;
  z-index:1;
  width:auto;
  height:auto;
  line-height:0;
  text-align:initial;
  border:0;
  transform-origin:50% 50%;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}
.quality > .quality__ring > .quality__arc--outer {
  inset:0;
  animation-name:qualityArcOuter;
  animation-duration:22s;
  animation-direction:normal;
}
.quality > .quality__ring > .quality__arc--middle {
  inset:13%;
  animation-name:qualityArcMiddle;
  animation-duration:15s;
  animation-direction:normal;
}
.quality > .quality__ring > .quality__arc--inner {
  inset:27%;
  animation-name:qualityArcInner;
  animation-duration:9s;
  animation-direction:normal;
}
.quality > .quality__ring > .quality__arc::before {
  position:absolute;
  inset:0;
  display:block;
  border:0;
  animation:none;
}
.quality > .quality__ring > .quality__scan {
  position:absolute;
  display:block;
  z-index:1;
  width:80%;
  height:2px;
  line-height:0;
  text-align:initial;
  animation-name:qualityScan;
  animation-duration:3.6s;
  animation-direction:normal;
  animation-timing-function:cubic-bezier(.2,.8,.2,1);
  animation-iteration-count:infinite;
}
.quality > .quality__ring > .quality__core {
  position:relative;
  display:grid;
  place-items:center;
  z-index:5;
  width:58%;
  height:auto;
  aspect-ratio:2.3;
  line-height:normal;
  text-align:center;
  border:1px solid rgba(234,255,82,.88);
  border-radius:999px;
  background:linear-gradient(125deg,#0d1824 0%,#10101d 48%,#1b0e20 100%);
  box-shadow:inset 0 0 18px rgba(23,239,255,.22),0 0 0 5px rgba(23,239,255,.07),0 0 25px rgba(23,239,255,.38),0 0 40px rgba(255,63,159,.2);
  transform:rotate(-7deg) skewX(-8deg);
  animation-name:qualityCorePulse;
  animation-duration:3.2s;
  animation-direction:normal;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
}
.quality > .quality__ring > .quality__core::before {
  position:absolute;
  inset:-9px -15px;
  border:1px solid rgba(23,239,255,.35);
  border-radius:inherit;
  transform:translate(7px,-5px) rotate(8deg);
  box-shadow:0 0 16px rgba(23,239,255,.22);
  animation:none;
}
.quality > .quality__ring > .quality__core::after {
  position:absolute;
  inset:3px;
  border-radius:inherit;
  animation:qualityCoreSweep 2.8s linear infinite;
}
.quality > .quality__ring > .quality__core > strong {
  position:relative;
  display:block;
  z-index:2;
  color:#f8fff2;
  -webkit-text-fill-color:#f8fff2;
  background:none;
  background-image:none;
  -webkit-background-clip:border-box;
  background-clip:border-box;
  -webkit-text-stroke:0;
  font-family:Impact,"Arial Black","Helvetica Neue",sans-serif;
  font-size:clamp(25px,3.25vw,43px);
  font-weight:900;
  letter-spacing:.18em;
  line-height:1;
  white-space:nowrap;
  text-shadow:0 0 5px rgba(255,255,255,.85),0 0 14px rgba(183,255,42,.92),0 0 28px rgba(23,239,255,.52);
  transform:skewX(8deg);
  animation-name:qualityBrandPulse,qualityBrandJolt;
  animation-duration:3.2s,4.8s;
  animation-timing-function:ease-in-out,steps(2,end);
  animation-iteration-count:infinite,infinite;
}
.quality > .quality__ring > .quality__core > strong::before,
.quality > .quality__ring > .quality__core > strong::after {
  content:attr(data-label);
  position:absolute;
  inset:0;
  z-index:3;
  display:block;
  pointer-events:none;
  font:inherit;
  letter-spacing:inherit;
  line-height:inherit;
  white-space:nowrap;
  opacity:0;
  -webkit-text-fill-color:currentColor;
  mix-blend-mode:screen;
}
.quality > .quality__ring > .quality__core > strong::before {
  color:#17efff;
  text-shadow:-4px 0 0 rgba(23,239,255,.9);
  clip-path:inset(18% 0 58% 0);
  animation:qualityBrandCyan 4.8s steps(3,end) infinite;
}
.quality > .quality__ring > .quality__core > strong::after {
  color:#ff3f9f;
  text-shadow:4px 0 0 rgba(255,63,159,.9);
  clip-path:inset(62% 0 16% 0);
  animation:qualityBrandPink 4.8s steps(2,end) -.35s infinite;
}
@media (prefers-reduced-motion:reduce) {
  .quality > .quality__ring > .quality__arc,
  .quality > .quality__ring > .quality__scan,
  .quality > .quality__ring > .quality__core,
  .quality > .quality__ring > .quality__core::after,
  .quality > .quality__ring > .quality__core > strong,
  .quality > .quality__ring > .quality__core > strong::before,
  .quality > .quality__ring > .quality__core > strong::after { animation:none!important; }
}

/* Inline family cards: a cursor-reactive signal, not a passive list row. */
.catalog-inline .inline-product {
  isolation:isolate;
  overflow:hidden;
  transform-style:preserve-3d;
  border-color:rgba(255,255,255,.16);
  background:linear-gradient(120deg,rgba(9,11,20,.8),rgba(17,12,24,.68));
  transition:transform .38s cubic-bezier(.18,.86,.22,1),border-color .25s,box-shadow .38s,background .3s,filter .3s;
}
.catalog-inline .inline-product::before {
  content:"";
  position:absolute;
  inset:-1px;
  z-index:0;
  pointer-events:none;
  background:radial-gradient(170px circle at var(--mx,50%) var(--my,50%),rgba(234,255,82,.5),transparent 47%),linear-gradient(105deg,transparent 5%,rgba(23,239,255,.2) 30%,rgba(255,63,159,.24) 58%,transparent 86%);
  opacity:0;
  filter:saturate(1.4);
  transition:opacity .25s;
}
.catalog-inline .inline-product::after {
  content:"";
  position:absolute;
  inset:1px;
  z-index:0;
  pointer-events:none;
  border:1px solid rgba(23,239,255,.48);
  background:linear-gradient(108deg,transparent 20%,rgba(255,255,255,.94) 47%,transparent 68%);
  background-size:230% 100%;
  background-position:165% 0;
  opacity:0;
  transition:opacity .2s;
}
.catalog-inline .inline-product > * { position:relative; z-index:1; transition:transform .3s,color .25s,text-shadow .25s; }
.catalog-inline .inline-product:hover,
.catalog-inline .inline-product:focus-visible {
  z-index:4;
  transform:translate3d(0,-10px,30px) scale(1.045) rotate(-.8deg);
  border-color:var(--acid);
  background:linear-gradient(120deg,rgba(23,239,255,.2),rgba(255,63,159,.18) 56%,rgba(183,255,42,.12));
  box-shadow:0 18px 34px rgba(0,0,0,.48),0 0 0 1px rgba(183,255,42,.4),0 0 26px rgba(23,239,255,.46),0 0 42px rgba(255,63,159,.27);
  filter:saturate(1.3) brightness(1.12);
  outline:none;
}
.catalog-inline .inline-product:hover::before,
.catalog-inline .inline-product:focus-visible::before { opacity:1; }
.catalog-inline .inline-product:hover::after,
.catalog-inline .inline-product:focus-visible::after {
  opacity:.95;
  animation:inlineProductSweep .72s cubic-bezier(.2,.8,.2,1) both;
}
.catalog-inline .inline-product > span {
  color:var(--orange);
  text-shadow:0 0 0 transparent;
}
.catalog-inline .inline-product:hover > span,
.catalog-inline .inline-product:focus-visible > span {
  color:var(--acid);
  transform:translateX(3px) scale(1.08);
  text-shadow:0 0 12px rgba(234,255,82,.9);
}
.catalog-inline .inline-product > strong { transform:translateZ(0); transform-origin:left center; }
.catalog-inline .inline-product:hover > strong,
.catalog-inline .inline-product:focus-visible > strong {
  transform:translate3d(6px,0,10px) scale(1.1);
  letter-spacing:.018em;
  filter:brightness(1.22);
  text-shadow:0 0 14px rgba(255,255,255,.58),3px 0 0 rgba(255,63,159,.28);
}
.catalog-inline .inline-product:hover > small,
.catalog-inline .inline-product:focus-visible > small {
  transform:translate3d(6px,0,8px);
  color:rgba(245,242,238,.82);
}
.catalog-inline .inline-product:hover > i,
.catalog-inline .inline-product:focus-visible > i {
  color:var(--acid);
  transform:translate3d(5px,-5px,18px) scale(1.42) rotate(-13deg);
  text-shadow:0 0 8px rgba(23,239,255,1),0 0 18px rgba(183,255,42,.75);
}
@keyframes inlineProductSweep { from { background-position:165% 0; } to { background-position:-70% 0; } }
@media (prefers-reduced-motion:reduce) {
  .catalog-inline .inline-product,
  .catalog-inline .inline-product::after,
  .catalog-inline .inline-product > * { transition:none; animation:none!important; }
}

/* Detail close: make the signal break apart before the list returns. */
.product-detail__panel { transform-origin:50% 48%; will-change:transform,opacity,filter,clip-path; }
.product-detail__panel::before {
  content:"";
  position:absolute;
  inset:-1px;
  z-index:7;
  pointer-events:none;
  opacity:0;
  background:
    linear-gradient(112deg,transparent 0 38%,rgba(255,255,255,.9) 39%,transparent 40%),
    linear-gradient(73deg,transparent 0 52%,rgba(23,239,255,.85) 53%,transparent 54%),
    linear-gradient(158deg,transparent 0 63%,rgba(255,63,159,.8) 64%,transparent 65%);
  mix-blend-mode:screen;
}
.product-detail__shards {
  position:absolute;
  inset:-8%;
  z-index:8;
  pointer-events:none;
  opacity:0;
  overflow:visible;
  mix-blend-mode:screen;
}
.product-detail__shard {
  position:absolute;
  left:var(--left);
  top:var(--top);
  width:var(--width);
  height:var(--height);
  border:1px solid rgba(255,255,255,.82);
  background:linear-gradient(135deg,rgba(23,239,255,.9),rgba(255,63,159,.82) 56%,rgba(234,255,82,.75));
  clip-path:var(--shape);
  opacity:0;
  filter:drop-shadow(0 0 12px rgba(23,239,255,.7));
  transform-origin:50% 50%;
}
.product-detail__shard:nth-child(1) { --left:4%; --top:5%; --width:20%; --height:30%; --tx:-150px; --ty:-118px; --rot:-28deg; --scale:.72; --delay:0ms; --shape:polygon(0 0,100% 13%,73% 100%,12% 70%); }
.product-detail__shard:nth-child(2) { --left:23%; --top:-2%; --width:18%; --height:25%; --tx:-62px; --ty:-145px; --rot:18deg; --scale:.8; --delay:36ms; --shape:polygon(14% 0,100% 22%,68% 100%,0 72%); }
.product-detail__shard:nth-child(3) { --left:42%; --top:3%; --width:20%; --height:22%; --tx:12px; --ty:-150px; --rot:-12deg; --scale:.68; --delay:58ms; --shape:polygon(0 18%,76% 0,100% 72%,34% 100%); }
.product-detail__shard:nth-child(4) { --left:66%; --top:0%; --width:23%; --height:28%; --tx:105px; --ty:-122px; --rot:26deg; --scale:.76; --delay:22ms; --shape:polygon(9% 0,100% 18%,85% 100%,0 64%); }
.product-detail__shard:nth-child(5) { --left:84%; --top:13%; --width:18%; --height:24%; --tx:158px; --ty:-62px; --rot:38deg; --scale:.7; --delay:74ms; --shape:polygon(0 12%,74% 0,100% 78%,29% 100%); }
.product-detail__shard:nth-child(6) { --left:80%; --top:43%; --width:22%; --height:24%; --tx:170px; --ty:20px; --rot:54deg; --scale:.82; --delay:48ms; --shape:polygon(16% 0,100% 28%,76% 100%,0 72%); }
.product-detail__shard:nth-child(7) { --left:65%; --top:73%; --width:23%; --height:24%; --tx:118px; --ty:112px; --rot:-32deg; --scale:.74; --delay:84ms; --shape:polygon(0 20%,72% 0,100% 84%,28% 100%); }
.product-detail__shard:nth-child(8) { --left:43%; --top:78%; --width:22%; --height:22%; --tx:18px; --ty:150px; --rot:14deg; --scale:.65; --delay:60ms; --shape:polygon(22% 0,100% 38%,78% 100%,0 72%); }
.product-detail__shard:nth-child(9) { --left:20%; --top:72%; --width:22%; --height:26%; --tx:-88px; --ty:132px; --rot:-24deg; --scale:.78; --delay:40ms; --shape:polygon(0 22%,84% 0,100% 78%,26% 100%); }
.product-detail__shard:nth-child(10) { --left:2%; --top:45%; --width:20%; --height:25%; --tx:-160px; --ty:38px; --rot:-48deg; --scale:.7; --delay:18ms; --shape:polygon(18% 0,100% 26%,72% 100%,0 68%); }
.product-detail__shard:nth-child(11) { --left:31%; --top:29%; --width:18%; --height:27%; --tx:-84px; --ty:10px; --rot:-68deg; --scale:.55; --delay:96ms; --shape:polygon(6% 0,100% 18%,80% 100%,0 82%); }
.product-detail__shard:nth-child(12) { --left:54%; --top:33%; --width:19%; --height:28%; --tx:92px; --ty:34px; --rot:63deg; --scale:.6; --delay:106ms; --shape:polygon(0 14%,78% 0,100% 76%,26% 100%); }
.product-detail.is-shattering .product-detail__backdrop { animation:detailBackdropShatter .62s ease-out forwards; }
.product-detail.is-shattering .product-detail__panel {
  overflow:visible;
  animation:detailPanelShatter .62s cubic-bezier(.16,.84,.22,1) forwards;
}
.product-detail.is-shattering .product-detail__panel::before { animation:detailCrackFlash .62s ease-out forwards; }
.product-detail.is-shattering .product-detail__shards { opacity:1; }
.product-detail.is-shattering .product-detail__shard { animation:detailShardBurst .62s cubic-bezier(.16,.84,.22,1) var(--delay) forwards; }
.product-detail.is-shattering .product-detail__visual { animation:detailVisualScatter .42s ease-out forwards; }
.product-detail.is-shattering .product-detail__copy { animation:detailCopyScatter .38s ease-out forwards; }
.product-detail.is-shattering .product-detail__panel>.catalog-close { animation:detailCloseScatter .3s ease-out forwards; }
@keyframes detailPanelShatter {
  0% { opacity:1; transform:translateY(0) scale(1); filter:none; clip-path:polygon(0 0,100% 0,100% 100%,0 100%); }
  16% { opacity:1; transform:translate3d(0,-2px,0) scale(1.025) rotate(-.45deg); filter:brightness(1.65) saturate(1.6); clip-path:polygon(1% 2%,98% 0,100% 98%,0 100%); }
  46% { opacity:1; transform:translate3d(2px,-4px,0) scale(1.01) rotate(1deg); filter:brightness(1.35) saturate(1.8); clip-path:polygon(0 5%,96% 1%,100% 100%,4% 94%); }
  100% { opacity:0; transform:translate3d(0,-22px,0) scale(.84) rotate(-2.4deg); filter:blur(8px) brightness(1.7) saturate(1.8); clip-path:polygon(28% 0,100% 28%,75% 100%,0 72%); }
}
@keyframes detailBackdropShatter { 0%,22% { opacity:1; } 34% { opacity:.76; } 100% { opacity:0; } }
@keyframes detailCrackFlash { 0%,10% { opacity:0; } 18% { opacity:.95; } 34% { opacity:.55; } 100% { opacity:0; } }
@keyframes detailShardBurst {
  0% { opacity:0; transform:translate3d(0,0,0) rotate(0) scale(.25); }
  12% { opacity:1; transform:translate3d(0,0,0) rotate(0) scale(1); }
  100% { opacity:0; transform:translate3d(var(--tx),var(--ty),0) rotate(var(--rot)) scale(var(--scale)); filter:drop-shadow(0 0 3px rgba(255,255,255,.25)); }
}
@keyframes detailVisualScatter { 0% { opacity:1; transform:none; } 100% { opacity:0; transform:translate3d(-28px,14px,0) scale(.88) rotate(-7deg); filter:blur(4px); } }
@keyframes detailCopyScatter { 0% { opacity:1; transform:none; } 100% { opacity:0; transform:translate3d(34px,-10px,0) scale(.93) rotate(1.5deg); filter:blur(4px); } }
@keyframes detailCloseScatter { 0% { opacity:1; transform:scale(1) rotate(0); } 100% { opacity:0; transform:translate3d(24px,-22px,0) scale(.25) rotate(120deg); } }
@media (prefers-reduced-motion:reduce) {
  .product-detail.is-shattering .product-detail__panel,
  .product-detail.is-shattering .product-detail__panel::before,
  .product-detail.is-shattering .product-detail__backdrop,
  .product-detail.is-shattering .product-detail__shard,
  .product-detail.is-shattering .product-detail__visual,
  .product-detail.is-shattering .product-detail__copy,
  .product-detail.is-shattering .product-detail__panel>.catalog-close { animation:none!important; }
  .product-detail.is-shattering .product-detail__panel,
  .product-detail.is-shattering .product-detail__backdrop { opacity:0; }
}

/* Atlas balance: keep the story bold, but give the product focus room to breathe. */
.atlas { padding-block:118px 112px; }
.section-head--atlas { margin-bottom:52px; }
.section-head--atlas h2 { font-size:clamp(44px,5.6vw,82px); }
.product-focus { grid-template-columns:1.06fr .94fr; min-height:438px; margin-bottom:76px; }
.product-focus__visual { min-height:438px; }
.product-focus__visual img { width:min(205px,26vw); height:310px; }
.product-focus__copy { padding:48px clamp(34px,4.4vw,58px); }
.product-focus__copy h3 { max-width:430px; font-size:clamp(30px,3.8vw,58px); line-height:.97; }
.product-focus__copy>p:not(.kicker) { max-width:330px; font-size:14px; }