:root{
      color-scheme:light;
      --ink:#0b0b0d;
      --paper:#ffffff;
      --line:#deded9;
      --lime:#e7ff4f;
      --red:#ff4b4b;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    .siteSkip{position:fixed;top:8px;left:8px;z-index:10000;padding:12px 16px;border-radius:5px;background:#050506;color:#fff;font-weight:850;text-decoration:none;transform:translateY(-160%);transition:transform .18s ease}.siteSkip:focus{transform:translateY(0);outline:3px solid #e7ff4f;outline-offset:2px}
    body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}
    a{color:inherit;text-decoration:none}
    button{font-family:"Montserrat",Arial,sans-serif}
    a.primary,a.secondary,a.darkBtn,.buy,.buyMini,.configTile a,.homeBack{font-family:"Montserrat",Arial,sans-serif}
    .nav{position:fixed;top:0;left:0;right:0;z-index:30;height:74px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:34px;padding:0 48px;background:#fff;border-bottom:1px solid rgba(0,0,0,.10);box-shadow:none}
    .navLinks{display:none}.hamb{display:none}
    .brand{justify-self:start;text-align:left;font-weight:950;letter-spacing:.08em;line-height:.88;color:#050506;text-shadow:none;transition:none;min-width:190px}
    .brand span{display:block;font-family:Arial,Helvetica,sans-serif;font-size:40px;font-weight:400;letter-spacing:0;text-transform:lowercase;color:#000;white-space:nowrap}
    .brand small{display:block;margin-top:7px;font-size:10px;letter-spacing:.24em;text-transform:none;color:#5d6068;font-weight:850;white-space:nowrap}
    @media(min-width:1121px){
      .homePage .brand{width:max-content;min-width:0}
      .homePage .brand small{width:100%;padding-left:.24em;text-align:center}
    }
    .navCenter{justify-self:center;display:flex;align-items:center;justify-content:center;gap:clamp(22px,3vw,46px);min-width:0;color:#050506;text-shadow:none;font-size:clamp(14px,1vw,18px);font-weight:850;white-space:nowrap;transition:none}.navCenter a{display:inline-flex;align-items:center;min-height:44px}
    .hamb,.navIcon{appearance:none;-webkit-appearance:none;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:#050506;place-items:center;cursor:pointer;transition:transform .18s ease}.hamb:hover,.navIcon:hover{transform:translateY(-1px)}.hambLines{width:25px;height:18px;display:grid;align-content:space-between}.hambLines span{display:block;height:2px;background:currentColor;border-radius:999px}.navActions{justify-self:end;display:flex;align-items:center;gap:16px}.navIcon{display:grid}.navIcon svg{width:29px;height:29px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}.mobileDrawer{display:none}
     .hero{--mood-image:url("assets/FOTO_DA_GESTIRE/01_HOME_SFONDI/pop notte 1 optimized.webp");--mood-wash:rgba(255,255,255,.18);--mood-ring:rgba(20,108,255,.34);--mood-ring-edge:rgba(20,108,255,.14);position:relative;min-height:calc(100vh - 74px);display:grid;grid-template-rows:auto minmax(420px,1fr) auto;align-items:center;justify-items:center;gap:10px;padding:42px 44px 34px;background:#f7f6f1;overflow:hidden;text-align:center;transition:background-color .5s ease}
    .hero:before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(255,255,255,.86) 0%,rgba(255,255,255,.48) 42%,rgba(255,255,255,.78) 100%),var(--mood-image);background-size:cover;background-position:center;filter:saturate(1.08) contrast(1.04) blur(1px);transform:scale(1.01);opacity:.96;pointer-events:none;transition:opacity .5s ease,background .5s ease}
    .hero:after{content:"";position:absolute;left:50%;top:calc(50% + 92px);z-index:1;width:min(940px,94vw);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-48%);background:radial-gradient(circle at 50% 48%,rgba(255,255,255,.44) 0 22%,rgba(255,255,255,.26) 42%,var(--mood-ring,rgba(20,108,255,.16)) 58%,var(--mood-ring-edge,rgba(20,108,255,.06)) 74%,rgba(255,255,255,0) 92%),radial-gradient(circle at 36% 26%,rgba(255,255,255,.38) 0 4%,rgba(255,255,255,.12) 14%,rgba(255,255,255,0) 30%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),inset 0 0 80px rgba(255,255,255,.24),0 24px 84px rgba(0,0,0,.045);backdrop-filter:blur(.18px) saturate(1.06) brightness(1.02);-webkit-mask-image:radial-gradient(circle,#000 0 52%,rgba(0,0,0,.56) 66%,rgba(0,0,0,.12) 80%,transparent 94%);mask-image:radial-gradient(circle,#000 0 52%,rgba(0,0,0,.56) 66%,rgba(0,0,0,.12) 80%,transparent 94%);opacity:.64;transition:background .32s ease,transform .32s ease;pointer-events:none}
    .heroCopy{display:none}
    .heroFullscreenCopy,.heroFullscreenFeatures,.discoverFullscreenCopy,.chooseWorldFullscreenCopy{display:none}
    h1{margin:-2px auto 0;font-family:Arial,Helvetica,sans-serif;font-size:clamp(68px,8.6vw,126px);line-height:.9;letter-spacing:-.02em;font-weight:900;color:#08090b;text-shadow:0 1px 0 rgba(255,255,255,.76),0 3px 0 rgba(0,0,0,.22),0 5px 0 rgba(0,0,0,.10),0 12px 24px rgba(0,0,0,.30),0 2px 24px rgba(255,255,255,.76),0 0 2px rgba(255,255,255,.72)}
    .lead{margin:0;color:#30333a;font-size:19px;line-height:1.52;max-width:540px}
    .mottoLine{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 0;margin:14px auto 0}
    .mottoLine span{display:inline-flex;align-items:baseline;font-size:clamp(14px,1.45vw,18px);font-weight:820;letter-spacing:0;color:#111318;text-shadow:0 1px 0 rgba(255,255,255,.62),0 1px 0 rgba(0,0,0,.10),0 5px 11px rgba(0,0,0,.16),0 1px 12px rgba(255,255,255,.68)}
    .mottoLine span i{font-style:normal;font-weight:950;margin-right:1px;color:inherit}
    .mottoLine span:not(:last-child){margin-right:24px}.mottoLine span:not(:last-child):after{content:"";width:4px;height:4px;border-radius:50%;background:rgba(0,0,0,.28);margin-left:24px}
    .primary,.secondary,.darkBtn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;border-radius:5px;padding:0 17px;font-weight:950;letter-spacing:.06em;border:2px solid #fff;cursor:pointer;background:#000;color:#fff}
    .primary{background:var(--ink);color:#fff}
    .secondary{background:#fff;color:var(--ink);border-color:var(--line)}
    .darkBtn{background:var(--lime);color:#111}
    .heroStage{position:relative;z-index:3;width:min(620px,86vw);height:min(58vh,620px);min-height:400px;isolation:isolate}
    .heroStage:before{content:"";position:absolute;left:50%;width:min(520px,70vw,65vh);aspect-ratio:1;z-index:0;border-radius:50%;transform:translate(-50%,-50%);top:calc(50% + 84px);background-image:radial-gradient(circle at 50% 48%,rgba(5,8,12,.18) 0 28%,rgba(5,8,12,.12) 48%,rgba(5,8,12,.04) 68%,rgba(5,8,12,0) 88%),radial-gradient(circle at 35% 25%,rgba(255,255,255,.30) 0 4%,rgba(255,255,255,.08) 13%,rgba(255,255,255,0) 30%),radial-gradient(circle,var(--mood-b,rgba(117,246,255,.05)) 0 34%,rgba(255,255,255,0) 88%),var(--mood-image);background-size:auto,auto,auto,128%;background-position:center,center,center,center;background-blend-mode:multiply,screen,screen,normal;box-shadow:inset 0 0 0 1px rgba(255,255,255,.32),inset 0 0 0 8px rgba(255,255,255,.035),inset 0 20px 42px rgba(255,255,255,.07),inset 0 -34px 58px rgba(0,0,0,.16),0 24px 58px rgba(0,0,0,.065);backdrop-filter:saturate(1.24) contrast(1.12) brightness(.94);-webkit-mask-image:radial-gradient(circle,#000 0 38%,rgba(0,0,0,.66) 56%,rgba(0,0,0,.20) 76%,transparent 96%);mask-image:radial-gradient(circle,#000 0 38%,rgba(0,0,0,.66) 56%,rgba(0,0,0,.20) 76%,transparent 96%);opacity:.68;transition:background-image .28s ease,opacity .28s ease}
    .heroStage:after{content:"";position:absolute;left:30%;right:30%;bottom:7%;z-index:0;height:11%;background:radial-gradient(ellipse,rgba(11,11,13,.23),rgba(11,11,13,.05) 62%,rgba(11,11,13,0) 80%);filter:blur(14px);opacity:.72;transition:opacity .28s ease}
    .heroStage.lightOn:before{opacity:.72}
    .heroStage.lightOn:after{opacity:.82}
    .heroStage model-viewer{position:relative;z-index:2;width:100%;height:100%;--poster-color:transparent;--progress-bar-color:transparent;--progress-bar-height:0px;background:transparent;filter:drop-shadow(0 42px 58px rgba(0,0,0,.24));transition:filter .22s ease}
    .heroStage #heroModel{transform:translateY(84px) scale(.88);transform-origin:center center}
    .heroStage.lightOn #heroModel{filter:brightness(1.08) saturate(1.1) drop-shadow(0 42px 58px rgba(0,0,0,.24)) drop-shadow(0 0 14px rgba(210,235,255,.92)) drop-shadow(0 0 34px rgba(130,208,255,.58)) drop-shadow(0 0 62px rgba(92,190,255,.32))}
    .spin model-viewer{animation:spinWheel 2.15s linear}
    @keyframes spinWheel{0%{transform:rotate(0deg)}100%{transform:rotate(1080deg)}}
    section{padding:84px 44px;border-top:1px solid rgba(0,0,0,.08)}
    .wrap{max-width:1240px;margin:0 auto}
    .sectionHead{display:grid;grid-template-columns:minmax(260px,430px) minmax(0,1fr);gap:54px;align-items:end;margin-bottom:34px}.sectionHead.personalizationHead{grid-template-columns:1fr;gap:18px;align-items:start;max-width:1120px}.sectionHead.personalizationHead h2{max-width:1120px;font-size:clamp(40px,4.4vw,62px);font-weight:400;line-height:.92;letter-spacing:0}.sectionHead.personalizationHead p{max-width:1120px}
    .kicker{margin:0 0 12px;font-size:12px;letter-spacing:.28em;font-weight:950;color:var(--red)}
    h2{margin:0;font-size:clamp(36px,5vw,70px);line-height:.92;letter-spacing:0}
    .sectionHead p{margin:0;color:#555963;font-size:18px;line-height:1.58;max-width:680px}.readyIntro{display:block;max-width:860px;margin-bottom:54px}.readyIntro h2{max-width:780px;font-size:clamp(44px,5.4vw,76px)}.readyBuySection{padding-top:28px}.readyIntro.readyBuyOnly{display:flex;justify-content:center;text-align:center;max-width:none;margin:0 auto 18px}.readyBuyTitle{margin:0;font-family:Arial,Helvetica,sans-serif;font-size:20px;font-weight:400;line-height:1.08;letter-spacing:0;color:#000;text-transform:none}.readyIntro h2.readyBuyTitle{max-width:none;font-size:clamp(28px,3.8vw,46px);font-weight:400;white-space:normal}.readyBuyTitle span{font-size:.58em;vertical-align:baseline}
    #parts .readyIntro.readyBuyOnly{margin-bottom:54px}#tech{padding-top:0;background:#fff!important;overflow:hidden;border-top:0!important}#tech .materialsSoloHead{position:relative;display:flex;align-items:flex-start;justify-content:center;text-align:center;max-width:none;margin:0 calc(50% - 50vw) 4px;height:200px;overflow:hidden;background:#fff}#tech .materialsSoloHead:before{content:"";position:absolute;z-index:0;top:0;left:0;width:100%;height:14px;background:url("assets/FOTO_DA_GESTIRE/03_HOME_CARTELLI/material-details-sign.webp?v=site-v7") top center/1050px auto repeat-x;pointer-events:none}#tech .materialsSoloTitle{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.materialsSign{display:block;flex:0 0 auto;width:1050px;max-width:none;height:auto;clip-path:polygon(49% 0,51% 0,51% 10%,56.5% 10%,56.5% 32%,43.5% 32%,43.5% 10%,49% 10%);object-fit:contain;object-position:top center;pointer-events:none;user-select:none}
    .readyBuySection{padding-top:34px!important;padding-bottom:38px!important}
    .collectionGrid{display:block}
    .readyShelf{display:grid;gap:16px;margin-top:0}
    .readyShelf+.readyShelf,.techShelf{margin-top:46px}
    .readyTabs{display:flex;align-items:center;justify-content:center;gap:28px;margin:0 0 28px}
    .readyTab{position:relative;appearance:none;-webkit-appearance:none;border:0;border-bottom:2px solid transparent;background:transparent;color:#050506;font-family:Arial,Helvetica,sans-serif;font-size:18px;font-weight:700;line-height:1.1;padding:0 0 5px;cursor:pointer}
    .readyTab:before{content:"";position:absolute;inset:-9px -10px}
    .readyTab.isActive{border-bottom-color:#050506}
    .readyTrack{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 40px)/2);gap:40px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;padding:0 2px 20px;scrollbar-width:thin}
    .readyTrack::-webkit-scrollbar{height:8px}
    .readyTrack::-webkit-scrollbar-track,.partsGrid::-webkit-scrollbar-track,.techTrack::-webkit-scrollbar-track{background:#ecebe7;border-radius:999px}
    .readyTrack::-webkit-scrollbar-thumb,.partsGrid::-webkit-scrollbar-thumb,.techTrack::-webkit-scrollbar-thumb{background:#a9a9a4;border-radius:999px}
    .readyTrack .product{scroll-snap-align:start}
    .readyShelf .chips{display:none}
    .readyShelf .productBody{align-items:center;text-align:center}
    .readyShelf .priceRow,.part .priceRow{justify-content:center;display:grid;justify-items:center;gap:8px;margin-top:4px}
    .readyShelf .price{font-family:Arial,Helvetica,sans-serif;font-size:15px;font-weight:700;line-height:1;color:#000}
    .readyShelf .buyMini,.part .buyMini{font-family:Arial,Helvetica,sans-serif;font-size:12px;font-weight:700;line-height:1.1;color:#000}
    .readyShelf .product small{display:inline-flex;align-items:center;justify-content:center;justify-self:center;min-height:19px;padding:0 10px;border-radius:5px;background:#000;color:#fff;font-family:Arial,Helvetica,sans-serif;font-size:9px;font-weight:700;letter-spacing:0;text-transform:uppercase}
    .product{border:0!important;border-radius:0;overflow:visible;background:transparent!important;box-shadow:none!important;min-width:0;display:flex;flex-direction:column}
    .productVisual{height:250px;background:transparent!important;position:relative}
    .productVisual:after{content:"";position:absolute;left:50%;bottom:18px;width:118px;height:18px;border-radius:50%;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(0,0,0,.16),rgba(0,0,0,.055) 56%,rgba(0,0,0,0) 78%);filter:blur(9px);pointer-events:none}
    .productVisual model-viewer{position:relative;z-index:1;width:100%;height:100%;--poster-color:transparent;background:transparent!important;transform:translateY(0)}
    /* # PRECARICAMENTO — Il cliente vede una scheda completa, mai parti 3D isolate. */
    .progressiveModel{opacity:0;transition:opacity .16s ease}
    .progressiveModel.isProgressiveReady{opacity:1}
    .progressiveVisual:before{content:"";position:absolute;z-index:0;inset:18% 28%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.72),rgba(245,240,232,.28) 54%,transparent 75%);opacity:.72;transition:opacity .16s ease;pointer-events:none}
    .progressiveVisual.isProgressiveReady:before{opacity:0}
    .homeStaticFrame{display:grid;place-items:center;overflow:visible!important;background:transparent!important}
    .homeStaticImage{position:relative;z-index:1;display:block;width:96%;height:96%;object-fit:contain;filter:drop-shadow(0 12px 14px rgba(0,0,0,.11))}
    .homeStaticImage.homeStaticLightOn{width:116%;height:116%}
    .homeStaticImage.homeStaticLightOff{width:122%;height:122%;transform:translateY(6px)}
    .productBody{padding:18px 0 0;display:grid;gap:10px;flex:1}
    .product small{font-size:11px;letter-spacing:.18em;font-weight:950;color:#a0a0a0;text-transform:uppercase}
    .product h3,.part h3,.product .catalogProductTitle,.part .catalogProductTitle{margin:0;font-size:17px;line-height:1.08;font-weight:500}
    .chips{display:flex;flex-wrap:wrap;gap:6px}
    .chip{display:inline-flex;align-items:center;min-height:28px;border-radius:5px;background:#f7f7f6;padding:0 9px;font-size:12px;color:#686b72}
    .priceRow{margin-top:auto;display:flex;align-items:center;justify-content:flex-start;gap:18px}
    .price{font-size:23px;font-weight:950}
    /* # TOUCH TARGET ACCESSIBILE - Area reale 44 px, ingombro e testo invariati. */
    .buyMini{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin-block:-15px;border:0;background:transparent;text-decoration:none;font-size:14px;font-weight:760;cursor:pointer;padding:0;color:#111}
    .catalogProduct{display:grid;place-items:center;min-height:100%;border-radius:8px!important;border:1px solid rgba(0,0,0,.1)!important;padding:28px!important;background:#f7f5ef!important}
    .catalogOnlyLink{background:#0b0b0d;color:#fff;border-color:#0b0b0d}
    .band{background:#0b0b0d;color:#fff}
    .band .sectionHead p,.band .muted{color:rgba(255,255,255,.68)}
    .band .kicker{color:var(--lime)}
    .lightPlus{background:#050506;color:#fff;position:relative;overflow:hidden;border-bottom:6px solid #fff}
    .lightPlus:before{content:"";position:absolute;left:48%;top:50%;width:620px;height:620px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(117,246,255,.34),rgba(255,75,75,.18) 32%,rgba(231,255,79,.12) 48%,transparent 70%);filter:blur(28px);pointer-events:none}
    .customSection{--component-breath:clamp(58px,6.4vw,92px);position:relative;background:#050506;color:#f6f6f2;border-top:0;padding:0;min-height:100svh;overflow:visible}
    .customSection>.wrap{max-width:none;width:100%;margin:0}
    .customSection .sectionHead{display:none!important}
    .customSection .kicker{display:none}
    .customSection .sectionHead h2{color:#fff;font-family:Arial,Helvetica,sans-serif;font-size:clamp(42px,4.4vw,56px);line-height:1.05;font-weight:400;letter-spacing:0;text-shadow:none}
    .customSection .sectionHead p{display:none}
    .customGrid{display:block;width:100%}
    .customHero{min-height:calc(100svh + var(--component-breath));margin-bottom:calc(-1 * var(--component-breath));border-radius:0;background:transparent url("assets/FOTO_DA_GESTIRE/01_HOME_SFONDI/animalier giorno 1 optimized.webp?v=site-v7") center center/cover no-repeat;padding:0;position:relative;overflow:hidden}
    /* # HOME - tutti gli sfondi fuori schermo aspettano la coda progressiva;
       Pop, bolla e primo Jigger conservano la priorita assoluta. */
    .homePage #catalog:not(.sectionBackgroundReady),.homePage #catalog-light-off:not(.sectionBackgroundReady),.homePage #parts:not(.sectionBackgroundReady),.homePage #light .lightRealStage:not(.sectionBackgroundReady),.homePage #custom .customHero:not(.sectionBackgroundReady),.homePage #tech:not(.sectionBackgroundReady) .materialsSoloHead:before{background-image:none!important}
    .customHero:before{content:"";position:absolute;inset:0;z-index:0;border-radius:0;transform:none;background:radial-gradient(ellipse at 50% 48%,rgba(0,0,0,.02),rgba(0,0,0,.22) 58%,rgba(0,0,0,.58) 100%),linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,.26));filter:none;pointer-events:none}
    .customHero model-viewer{position:absolute;z-index:1;inset:0;width:100%;height:100%;--poster-color:transparent;background:transparent;filter:drop-shadow(0 34px 48px rgba(0,0,0,.42))}
    .customHero{cursor:pointer;isolation:isolate;touch-action:manipulation}
    .customHero model-viewer{z-index:2}
    #customModel{transform:translateY(96px) scale(.96)}
    .rouletteRing{position:absolute;left:50%;z-index:1;width:min(820px,92vw);height:250px;transform:translateX(-50%);pointer-events:none;perspective:980px;transform-style:preserve-3d;opacity:.46;filter:saturate(.96) brightness(.86);transition:opacity .28s ease,filter .28s ease,z-index 0s linear .28s}
    .rouletteRing.top{top:12%}
    .rouletteRing.bottom{top:61%}
    .rouletteItem{position:absolute;left:50%;top:50%;width:118px;height:178px;margin:-89px 0 0 -59px;border:1px solid rgba(255,255,255,.56);border-radius:9px;overflow:hidden;background:#111;box-shadow:0 18px 38px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.22) inset;clip-path:polygon(0 0,100% 0,86% 100%,14% 100%);transition:filter .18s ease,border-color .18s ease,box-shadow .18s ease}
    .rouletteRing.top .rouletteItem{height:208px;margin:-104px 0 0 -59px}
    .rouletteRing.bottom .rouletteItem{clip-path:polygon(13% 0,87% 0,100% 100%,0 100%)}
    .rouletteItem img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.03)}
    .rouletteItem:before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(105deg,rgba(255,255,255,.46) 0 8%,rgba(255,255,255,.08) 26%,rgba(255,255,255,0) 44%,rgba(0,0,0,.20) 100%);mix-blend-mode:screen;pointer-events:none}
    .rouletteItem:after{content:"";position:absolute;inset:5px;z-index:3;border-radius:7px;border:1px solid rgba(255,255,255,.28);clip-path:inherit;pointer-events:none}
    .rouletteItem.is-selected{border-color:rgba(231,255,79,.96);filter:saturate(1.22) contrast(1.08);box-shadow:0 24px 54px rgba(0,0,0,.56),0 0 0 2px rgba(231,255,79,.95) inset,0 0 42px rgba(231,255,79,.32)}
    .rouletteHit{position:absolute;inset:0;z-index:0;border:0;background:transparent;color:transparent;pointer-events:none}
    .rouletteHit:focus-visible{outline:2px solid rgba(231,255,79,.88);outline-offset:-12px}
    /* # HOME CTA — dorato definitivo condiviso con Configurator e Individualize. */
    .customIndividualizeBtn{position:absolute;left:50%;bottom:4%;z-index:8;min-width:168px;height:52px;padding:0 26px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(0,0,0,.20);border-radius:7px;background:linear-gradient(135deg,#b77c22,#edc76f);color:#050506;font-family:Arial,Helvetica,sans-serif;font-size:22px;font-weight:900;line-height:1;text-decoration:none;box-shadow:0 8px 0 rgba(0,0,0,.16),0 18px 34px rgba(0,0,0,.34);transform:translateX(-50%);cursor:pointer}
    .customIndividualizeBtn:hover,.lightConfiguratorBtn:hover{filter:brightness(1.08)}.lightConfiguratorBtn{position:absolute;left:50%;bottom:6px;z-index:7;min-width:190px;height:52px;padding:0 28px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(0,0,0,.20);border-radius:7px;background:linear-gradient(135deg,#b77c22,#edc76f);color:#050506;font-family:Arial,Helvetica,sans-serif;font-size:22px;font-weight:900;line-height:1;text-decoration:none;box-shadow:0 8px 0 rgba(0,0,0,.18),0 18px 34px rgba(0,0,0,.38);transform:translate(-50%,38px);cursor:pointer}.lightConfiguratorBtn:focus-visible,.customIndividualizeBtn:focus-visible{outline:2px solid #fff;outline-offset:4px}
    .rouletteRing.is-active{z-index:5;opacity:1;filter:saturate(1.16) brightness(1);transition:opacity .16s ease,filter .16s ease,z-index 0s}.rouletteRing.is-active .rouletteItem{will-change:transform,opacity;filter:saturate(1.2) contrast(1.06) blur(.25px)}
    .customHero.is-spinning:after{content:"";position:absolute;left:50%;top:50%;z-index:1;width:min(620px,70vw);height:min(620px,62vh);border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(231,255,79,.14),rgba(117,246,255,.10) 36%,rgba(255,75,75,.08) 54%,transparent 72%);filter:blur(20px);pointer-events:none}
    @media (max-width:720px){.customSection{--component-breath:44px;padding-top:0;min-height:0!important}.customSection .sectionHead h2{font-size:40px}.customHero{min-height:calc(480px + var(--component-breath));margin-bottom:calc(-1 * var(--component-breath))}.rouletteRing{width:104vw;height:178px;filter:none}.rouletteRing.top{top:16%}.rouletteRing.bottom{top:54%}.rouletteItem{width:76px;height:116px;margin:-58px 0 0 -38px;box-shadow:0 10px 20px rgba(0,0,0,.34);transition:none}.rouletteRing.top .rouletteItem{height:136px;margin:-68px 0 0 -38px}.rouletteItem:before,.rouletteItem:after{display:none}.rouletteRing.is-active{filter:none}.rouletteRing.is-active .rouletteItem{filter:none}.customHero.is-spinning:after{display:none}.customHero model-viewer{transform:scale(1.05);filter:drop-shadow(0 18px 24px rgba(0,0,0,.3))}#customModel{transform:translateY(34px) scale(1.01)}.customIndividualizeBtn{bottom:4%;min-width:150px;height:48px;font-size:19px}.lightConfiguratorBtn{bottom:8px;min-width:160px;height:48px;font-size:19px}}
    @media (max-width:820px){
      .rouletteRing.top{
        height:226px!important;
        top:12%!important;
      }
      .rouletteRing.top .rouletteItem{
        width:98px!important;
        height:172px!important;
        margin:-86px 0 0 -49px!important;
      }
    }
    @media (min-width:721px) and (max-width:1280px){
      #customModel{transform:translateY(72px) scale(.96)}
      .rouletteRing.top{top:calc(12% - 20px)}
      .rouletteRing.bottom{top:calc(61% - 20px)}
    }
    @media (prefers-reduced-motion:reduce){.rouletteItem{transition:none}.rouletteRing.is-active .rouletteItem{filter:none}}
    .partsGrid{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 68px)/3);gap:34px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;padding:0 2px 22px;scrollbar-width:thin}
    .partsGrid::-webkit-scrollbar{height:8px}
    .part{border:0;border-radius:0;background:transparent;min-height:0;padding:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;overflow:visible;scroll-snap-align:start}
    .partBadge{display:inline-flex;align-items:center;justify-content:center;min-height:19px;padding:0 10px;border-radius:5px;background:#000;color:#fff;font-family:Arial,Helvetica,sans-serif;font-size:9px;font-weight:700;letter-spacing:0;text-transform:uppercase}
    .partTextSpacer{display:block;min-height:19px}
    .partArt{width:100%;height:250px;background:transparent;position:relative;overflow:visible}
    .partArt:before{content:none}
    .partArt:after{content:"";position:absolute;left:30%;right:30%;bottom:8px;height:10px;border-radius:50%;background:rgba(0,0,0,.16);filter:blur(10px);pointer-events:none}
    .partArt model-viewer{position:relative;z-index:1;width:100%;height:100%;--poster-color:transparent;--progress-bar-color:transparent;--progress-bar-height:0px;background:transparent!important;filter:none}
      /* Match catalog cone setup: crystal stays natural but reads on the light home background. */
    .partConeSet .partArt model-viewer{width:109%;height:109%;transform:translateY(35px);filter:drop-shadow(0 12px 14px rgba(0,0,0,.11))}
    .partCoverSet .homeStaticImage{width:100%;height:100%}
    .configTile{height:210px;display:grid;place-items:center;text-align:center}
    .configTile a{display:inline-flex;align-items:center;justify-content:center;min-height:52px;border-radius:5px;background:#000;color:#fff;padding:0 24px;font-weight:950;letter-spacing:.06em;border:2px solid #fff;box-shadow:0 10px 22px rgba(0,0,0,.18)}
    .part p{display:none}.part .price{font-size:15px;font-weight:700;line-height:1}
    .tech{background:#f7f5ef}
    #tech .techShelf{margin-top:0}.techTrack{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 56px)/3);gap:28px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;padding:0 2px 22px;scrollbar-width:thin}.techTrack::-webkit-scrollbar{height:8px}.techTrack .techCard{scroll-snap-align:start;min-width:0}
    .techCard{border-top:1px solid #cfcfca;padding:22px 0 0;min-height:210px}
    .techCard small{letter-spacing:.2em;color:#9b9b95;font-weight:950}.techCard h3{font-size:25px;margin:38px 0 12px}.techCard p{margin:0;color:#5c6068;line-height:1.55}
    .story{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
    .storyPanel{min-height:390px;border-radius:8px;padding:28px;display:flex;flex-direction:column;justify-content:flex-end;background:#111;color:#fff;overflow:hidden;position:relative}
    .storyPanel:nth-child(1){background:linear-gradient(135deg,#ff4b4b,#ff9d2e 48%,#111)}
    .storyPanel:nth-child(2){background:linear-gradient(135deg,#15161b,#26333c 58%,#75f6ff)}
    .storyPanel h3{font-size:42px;line-height:.92;margin:0 0 12px}.storyPanel p{max-width:460px;color:#555963;line-height:1.55}
    .storyPanel:only-child{grid-column:1/-1}.storyVideo{min-height:460px;padding:0;background:#111;isolation:isolate}.storyVideoMedia{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}.storyVideo:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,0,0,.74),rgba(0,0,0,.18) 68%,rgba(0,0,0,.36))}.storyVideo h3,.storyVideo p{color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.7)}.storyVideo p{color:rgba(255,255,255,.88)}.videoBand{padding-top:0;background:#f7f5ef}.storyVideoBars{width:100%}
    .contact{background:#fff}
    .contactBox{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;border:1px solid var(--line);border-radius:8px;padding:30px}
    footer{padding:34px 44px;border-top:1px solid rgba(0,0,0,.08);display:flex;justify-content:space-between;gap:18px;color:#6f737a;font-size:13px}
    .toast{position:fixed;left:50%;bottom:20px;z-index:80;transform:translateX(-50%) translateY(30px);opacity:0;pointer-events:none;background:#111;color:#fff;border-radius:999px;padding:12px 18px;font-weight:850;transition:.22s ease}
    .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
    @media(max-width:1120px){.readyTrack{grid-auto-columns:calc((100% - 20px)/2);gap:20px}.partsGrid{grid-auto-columns:calc((100% - 28px)/2);gap:28px}.nav{height:66px;padding:0 14px;grid-template-columns:1fr auto 1fr;gap:0}.hamb{display:grid}.brand{justify-self:center;text-align:center;min-width:0}.brand span{font-size:40px}.navCenter{display:none}.navActions{gap:9px}.hamb,.navIcon{width:44px;height:44px}.navIcon svg{width:25px;height:25px}.mobileDrawer{position:fixed;top:66px;left:10px;right:10px;z-index:29;display:grid;gap:8px;padding:12px;border:1px solid rgba(0,0,0,.10);border-radius:8px;background:#fff;box-shadow:0 24px 60px rgba(0,0,0,.18);transform:translateY(-14px);opacity:0;visibility:hidden;pointer-events:none;transition:.18s ease}body.menuOpen .mobileDrawer{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto}.mobileDrawer a{display:flex;align-items:center;justify-content:space-between;min-height:44px;border-bottom:1px solid rgba(0,0,0,.08);font-weight:950}.mobileDrawer a:last-child{border-bottom:0}.hero:after{top:calc(50% + 88px);width:min(760px,94vw)}.heroStage:before{top:calc(50% + 80px);width:min(500px,104vw,64vh)}.heroStage #heroModel{transform:translateY(80px) scale(.88)}}
    @media(min-width:821px) and (max-width:1120px){
      .nav{height:64px!important;padding:0 18px!important}
      .brand span{font-size:32px!important;line-height:.9!important}
      .brand small{margin-top:5px!important;font-size:9px!important;letter-spacing:.22em!important}
      .hamb,.navIcon{width:44px!important;height:44px!important}
      .hambLines{width:23px!important;height:16px!important}
      .navIcon svg{width:23px!important;height:23px!important}
    }
    @media(max-width:820px){
      .hero{min-height:auto;max-height:860px;grid-template-columns:1fr;padding:24px 18px 14px;overflow:hidden}.heroStage{order:0;height:54vh;min-height:370px}.heroStage:before{width:min(500px,104vw,64vh);opacity:.62;-webkit-mask-image:radial-gradient(circle,#000 0 54%,rgba(0,0,0,.72) 70%,rgba(0,0,0,.24) 84%,transparent 98%);mask-image:radial-gradient(circle,#000 0 54%,rgba(0,0,0,.72) 70%,rgba(0,0,0,.24) 84%,transparent 98%)}
      section{padding:62px 18px}.sectionHead,.customGrid,.story,.contactBox{grid-template-columns:1fr}.storyVideo{min-height:390px}.videoBand{padding-top:0}.readyTrack{grid-auto-columns:minmax(260px,82vw);gap:12px}.partsGrid,.techTrack{grid-auto-columns:minmax(260px,82vw);gap:18px}.readyTabs{gap:24px;margin:0 0 28px}.readyTab{font-size:18px}.readyShelf+.readyShelf{margin-top:38px}h1{font-size:62px}.mottoLine{gap:8px 12px}.mottoLine span{font-size:15px}.mottoLine span:not(:last-child){margin-right:12px}.mottoLine span:not(:last-child):after{margin-left:12px}.productVisual{height:270px}.readyIntro.readyBuyOnly{margin:0 auto 16px}.readyBuyTitle{font-size:20px}.readyIntro h2.readyBuyTitle{font-size:28px}footer{padding:28px 18px;flex-direction:column}
    }
      /* Reduce empty space below hero buttons */
    .hero{min-height:calc(100vh - 188px)!important;padding-bottom:0!important;grid-template-rows:auto minmax(330px,.82fr) auto!important}
    .heroStage{height:min(48vh,520px)!important;min-height:330px!important}
    @media(max-width:820px){.hero{max-height:780px!important;padding-bottom:0!important}.heroStage{height:46vh!important;min-height:320px!important}}
      /* Fullscreen hero: keep sphere and model centered, buttons near bottom */
    @media(min-width:1121px) and (min-height:820px){
      .hero{min-height:calc(100vh - 74px)!important;grid-template-rows:minmax(0,1fr) auto!important;padding-bottom:76px!important;align-items:end!important}
      .heroStage{grid-row:1!important;height:min(62vh,650px)!important;min-height:520px!important;align-self:center!important;transform:none!important}
      .heroStage:before{top:50%!important}
      .heroStage #heroModel{transform:translateY(0) scale(.88)}
    }
      /* Desktop Ready to buy: show three models with tighter spacing */
    @media(min-width:1121px){
      .readyShelf{position:relative;overflow:hidden}
      .readyTrack{grid-auto-columns:calc((100% - 48px)/3)!important;gap:24px!important;justify-content:start!important;padding:0 2px 20px!important}
      .readyShelf:before,.readyShelf:after{content:"";position:absolute;top:0;bottom:16px;width:72px;z-index:5;pointer-events:none}
      .readyShelf:before{left:0;background:linear-gradient(90deg,#fff,rgba(255,255,255,0))}
      .readyShelf:after{right:0;background:linear-gradient(270deg,#fff,rgba(255,255,255,0))}
    }
      /* Restore Shake rotation while keeping hero model position */
    .heroStage #heroModel{--hero-spin-y:84px}
    @media(max-width:1120px){.heroStage #heroModel{--hero-spin-y:80px}}
    @media(min-width:1121px) and (min-height:820px){.heroStage #heroModel{--hero-spin-y:0px}}
      [data-config-url]{cursor:pointer}

    @media(min-width:1360px) and (min-height:760px){
      .heroFullscreenCopy{
        display:grid;
        position:absolute;
        left:clamp(42px,4.8vw,92px);
        top:clamp(300px,39vh,430px);
        z-index:4;
        justify-items:start;
        gap:14px;
        color:#fff;
        text-align:left;
        pointer-events:none;
        text-shadow:0 2px 18px rgba(0,0,0,.62),0 1px 2px rgba(0,0,0,.7);
      }
      .heroFullscreenCopy strong{
        display:block;
        font-family:Arial,Helvetica,sans-serif;
        font-size:clamp(44px,3.6vw,68px);
        line-height:.94;
        font-weight:900;
        letter-spacing:0;
        color:#fff;
      }
      .heroFullscreenCopy span{
        display:block;
        font-size:clamp(18px,1.25vw,24px);
        line-height:1.12;
        font-weight:720;
        letter-spacing:0;
        color:rgba(255,255,255,.92);
        white-space:nowrap;
      }
      .heroFullscreenFeatures{
        display:grid;
        position:absolute;
        left:clamp(34px,4.2vw,78px);
        bottom:clamp(34px,5.8vh,72px);
        z-index:4;
        grid-template-columns:repeat(4,auto);
        align-items:end;
        gap:clamp(30px,3.35vw,64px);
        color:rgba(255,255,255,.84);
        text-align:center;
        text-transform:uppercase;
        pointer-events:none;
        text-shadow:0 2px 14px rgba(0,0,0,.68),0 1px 2px rgba(0,0,0,.8);
      }
      .heroFullscreenFeature{
        display:grid;
        justify-items:center;
        gap:9px;
        min-width:84px;
      }
      .heroFullscreenFeature svg{
        width:clamp(28px,2.2vw,38px);
        height:clamp(28px,2.2vw,38px);
        fill:none;
        stroke:currentColor;
        stroke-width:1.7;
        stroke-linecap:round;
        stroke-linejoin:round;
        filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));
      }
      .heroFullscreenFeature span{
        display:block;
        font-size:clamp(10px,.72vw,13px);
        line-height:1.42;
        font-weight:900;
        letter-spacing:.045em;
      }
      .discoverFullscreenCopy,.chooseWorldFullscreenCopy{
        display:grid;
        position:absolute;
        left:clamp(42px,4.8vw,92px);
        top:clamp(300px,39vh,430px);
        z-index:4;
        justify-items:start;
        gap:14px;
        color:#fff;
        text-align:left;
        pointer-events:none;
        text-shadow:0 2px 18px rgba(0,0,0,.62),0 1px 2px rgba(0,0,0,.7);
      }
      .discoverFullscreenCopy strong,.chooseWorldFullscreenCopy strong{
        display:block;
        font-family:Arial,Helvetica,sans-serif;
        font-size:clamp(34px,2.65vw,50px);
        line-height:.94;
        font-weight:900;
        letter-spacing:0;
        color:#fff;
      }
      .discoverFullscreenCopy span,.chooseWorldFullscreenCopy span{
        display:block;
        font-size:clamp(18px,1.25vw,24px);
        line-height:1.12;
        font-weight:720;
        letter-spacing:0;
        color:rgba(255,255,255,.92);
        white-space:nowrap;
      }
      .chooseWorldFullscreenCopy{
        z-index:7;
        top:clamp(360px,47vh,510px);
      }
      .chooseWorldFullscreenCopy strong{
        font-size:clamp(30px,2.25vw,42px);
      }
    }

    /* Hero bubble quick-buy experience */
    .hero{min-height:calc(100svh - 74px)!important;grid-template-rows:1fr!important;place-items:center!important;padding:86px clamp(16px,4vw,44px) 34px!important;background:#f4f1ea!important;overflow:hidden!important}
    .hero:before{background:linear-gradient(180deg,var(--hero-sky-top,rgba(252,248,238,.92)) 0%,var(--hero-sky-mid,rgba(255,255,255,.44)) 45%,var(--hero-sky-low,rgba(244,239,226,.88)) 100%),var(--mood-image)!important;background-size:cover!important;background-position:center!important;filter:saturate(var(--hero-sat,1.08)) contrast(1.04) blur(.6px)!important;opacity:var(--hero-bg-opacity,.96)!important;transform:scale(1.025)!important}
    .hero:after{display:none!important}
    .hero.is-night{--hero-sky-top:rgba(8,10,18,.78);--hero-sky-mid:rgba(12,16,28,.48);--hero-sky-low:rgba(5,7,12,.82);--hero-bg-opacity:.98;--hero-sat:1.2;color:#fff;background:#070910!important}
    .heroStage{position:relative!important;z-index:3;width:min(680px,84vw)!important;height:min(68vh,680px)!important;min-height:460px!important;isolation:isolate!important;cursor:pointer!important;animation:heroBubbleDrift 10s ease-in-out infinite!important;transform:none!important;will-change:transform!important}
    .heroStage:before{top:50%!important;width:min(590px,82vw,66vh)!important;opacity:.82!important;background-image:radial-gradient(circle at 50% 50%,rgba(255,255,255,.52) 0 20%,rgba(255,255,255,.22) 42%,var(--mood-ring,rgba(20,108,255,.22)) 62%,rgba(255,255,255,.06) 78%,rgba(255,255,255,0) 96%),radial-gradient(circle at 33% 22%,rgba(255,255,255,.75) 0 4%,rgba(255,255,255,.28) 12%,rgba(255,255,255,0) 26%),radial-gradient(circle at 70% 76%,rgba(255,255,255,.24) 0 3%,rgba(255,255,255,0) 18%),var(--mood-image)!important;background-size:auto,auto,auto,130%!important;background-blend-mode:screen,screen,screen,normal!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.46),inset 0 18px 54px rgba(255,255,255,.20),inset 0 -42px 70px rgba(0,0,0,.20),0 28px 78px rgba(0,0,0,.14),0 0 64px var(--mood-ring-edge,rgba(20,108,255,.14))!important;backdrop-filter:blur(2px) saturate(1.22) brightness(1.04)!important;mask-image:radial-gradient(circle,#000 0 58%,rgba(0,0,0,.72) 72%,rgba(0,0,0,.18) 88%,transparent 98%)!important;-webkit-mask-image:radial-gradient(circle,#000 0 58%,rgba(0,0,0,.72) 72%,rgba(0,0,0,.18) 88%,transparent 98%)!important;animation:heroBubbleNudge 7.5s ease-in-out infinite!important;pointer-events:none!important}
    .heroStage:after{left:27%!important;right:27%!important;bottom:3%!important;height:13%!important;opacity:.55!important;filter:blur(18px)!important;background:radial-gradient(ellipse,rgba(0,0,0,.26),rgba(0,0,0,.08) 58%,rgba(0,0,0,0) 82%)!important;pointer-events:none!important}
    .heroStage.lightOn:before{box-shadow:inset 0 0 0 1px rgba(255,255,255,.54),inset 0 18px 54px rgba(255,255,255,.23),inset 0 -42px 70px rgba(0,0,0,.22),0 28px 80px rgba(0,0,0,.18),0 0 72px rgba(120,210,255,.34)!important}
    .heroStage model-viewer{pointer-events:none!important;z-index:2!important;filter:drop-shadow(0 44px 64px rgba(0,0,0,.28))!important}
    .heroStage #heroModel{transform:translateY(6px) scale(.92) rotate(var(--jigger-clock-rot,0deg))!important;transform-origin:center center!important}
    .heroStage.lightOn #heroModel{filter:brightness(1.1) saturate(1.12) drop-shadow(0 44px 64px rgba(0,0,0,.30)) drop-shadow(0 0 14px rgba(218,240,255,.95)) drop-shadow(0 0 38px rgba(126,210,255,.62))!important}
    /* # HERO — LIVELLI CLIC: hotspot sopra il model-viewer; pulsanti Configurator/Buy ancora sopra. */
    .heroSpinHotspot{position:absolute;inset:8%;z-index:6;border:0;border-radius:50%;background:transparent;cursor:pointer;color:transparent;font-size:0}
    .heroSpinHotspot:focus{outline:none}.heroSpinHotspot:focus-visible{box-shadow:0 0 0 3px rgba(255,255,255,.62);outline:none}
    .heroBubbleButton{position:absolute;z-index:7;display:grid;place-items:center;gap:2px;width:clamp(92px,12vw,128px);aspect-ratio:1;border-radius:50%;border:1px solid rgba(255,255,255,.62);background:radial-gradient(circle at 34% 24%,rgba(255,255,255,.94),rgba(255,255,255,.32) 34%,rgba(255,255,255,.12) 68%,rgba(255,255,255,.03));backdrop-filter:blur(9px) saturate(1.22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),inset 0 -20px 34px rgba(0,0,0,.08),0 16px 42px rgba(0,0,0,.17);color:#050506;font-family:Arial,Helvetica,sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:0;font-size:15px;line-height:1;cursor:pointer;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease}
    .heroBubbleButton:hover{transform:translateY(-4px) scale(1.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.34),inset 0 -20px 34px rgba(0,0,0,.08),0 22px 54px rgba(0,0,0,.22)}
    .heroBubbleButton:active{transform:translateY(1px) scale(.98)}
    .heroConfigBubble{left:0;top:42%}.heroConfigBubble span{font-size:12px;line-height:1.05}.heroPrice{font-size:26px;line-height:.92}.heroBuyWord{font-size:14px;letter-spacing:.06em}
    .heroStage.spin{animation:heroBubbleRush .72s ease-in-out infinite!important}.heroStage.spin:before{animation:heroBubbleAgitate .42s ease-in-out infinite!important}
    @keyframes heroBubbleDrift{0%,100%{transform:translate3d(-4vw,-1vh,0) rotate(-1.6deg)}24%{transform:translate3d(3.2vw,-3vh,0) rotate(1.1deg)}52%{transform:translate3d(5vw,2vh,0) rotate(-.8deg)}76%{transform:translate3d(-2vw,3vh,0) rotate(1.4deg)}}
    @keyframes heroBubbleNudge{0%,72%,100%{scale:1}76%{scale:1.018}79%{scale:.992}82%{scale:1.01}86%{scale:1}}
    @keyframes heroBubbleRush{0%,100%{transform:translate3d(-5vw,-2vh,0) rotate(-3deg)}35%{transform:translate3d(6vw,-4vh,0) rotate(4deg)}70%{transform:translate3d(3vw,4vh,0) rotate(-2deg)}}
    @keyframes heroBubbleAgitate{0%,100%{scale:1;filter:saturate(1.1)}50%{scale:1.035;filter:saturate(1.35)}}

    /* Real 3D water bubble: layered shell, refraction, caustics and liquid rim */
    .heroStage{perspective:1100px!important;transform-style:preserve-3d!important;--bubble-size:min(590px,82vw,66vh);--bubble-z:0px}
    .heroStage:before{opacity:0!important}
    .bubble3d,.bubbleGlass{position:absolute;left:50%;top:50%;width:var(--bubble-size);aspect-ratio:1;border-radius:50%;transform:translate3d(-50%,-50%,var(--bubble-z)) rotateX(2deg) rotateY(-3deg);transform-style:preserve-3d;pointer-events:none}
    .bubble3d{z-index:1;filter:drop-shadow(0 34px 50px rgba(0,0,0,.20)) drop-shadow(0 0 34px var(--mood-ring-edge,rgba(100,190,255,.22)));animation:bubble3dBreath 7.4s ease-in-out infinite}
    .bubbleCore,.bubbleBack,.bubbleCaustics,.bubbleRim,.bubbleSpecular,.bubbleWaterline,.bubbleGlass span,.bubbleGlass i{position:absolute;inset:0;border-radius:50%;pointer-events:none}
    .bubbleBack{transform:translateZ(-46px) scale(.935);background:radial-gradient(circle at 54% 56%,rgba(255,255,255,.12) 0 26%,rgba(110,190,255,.10) 43%,rgba(0,20,35,.20) 70%,rgba(0,0,0,.10) 100%),var(--mood-image);background-size:150%;background-position:center;filter:blur(4px) saturate(1.18) contrast(1.08);opacity:.54;box-shadow:inset 0 0 78px rgba(0,0,0,.24)}
    .bubbleCore{transform:translateZ(-12px);background:radial-gradient(circle at 42% 35%,rgba(255,255,255,.42) 0 10%,rgba(255,255,255,.13) 28%,rgba(255,255,255,.05) 45%,rgba(255,255,255,0) 66%),radial-gradient(circle at 58% 62%,var(--mood-ring,rgba(80,170,255,.22)) 0 26%,rgba(255,255,255,.10) 50%,rgba(5,16,28,.20) 76%,rgba(255,255,255,0) 96%);box-shadow:inset 18px 22px 50px rgba(255,255,255,.18),inset -26px -34px 70px rgba(0,0,0,.18),inset 0 0 0 1px rgba(255,255,255,.30);backdrop-filter:blur(5px) saturate(1.28) contrast(1.06)}
    .bubbleCaustics{transform:translateZ(18px);background:radial-gradient(ellipse at 36% 30%,rgba(255,255,255,.16),rgba(255,255,255,0) 34%),radial-gradient(ellipse at 64% 68%,rgba(115,215,255,.11),rgba(255,255,255,0) 42%);mix-blend-mode:screen;opacity:.28;filter:blur(10px);animation:none!important}
    .bubbleRim{transform:translateZ(34px);box-shadow:inset 0 0 0 2px rgba(255,255,255,.42),inset 0 0 18px rgba(255,255,255,.34),inset 28px 24px 48px rgba(255,255,255,.16),inset -34px -34px 70px rgba(5,12,22,.26),0 0 32px var(--mood-ring-edge,rgba(120,210,255,.20));background:radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 0 55%,rgba(255,255,255,.20) 68%,rgba(255,255,255,.45) 76%,rgba(255,255,255,0) 88%)}
    .bubbleSpecular{transform:translateZ(62px);background:radial-gradient(ellipse at 31% 19%,rgba(255,255,255,.88) 0 5%,rgba(255,255,255,.42) 10%,rgba(255,255,255,0) 24%),radial-gradient(ellipse at 72% 18%,rgba(255,255,255,.36) 0 3%,rgba(255,255,255,0) 15%),radial-gradient(ellipse at 76% 76%,rgba(255,255,255,.24) 0 4%,rgba(255,255,255,0) 18%);filter:blur(.15px);opacity:.9}
    .bubbleWaterline{inset:11%;transform:translateZ(44px) rotate(-8deg);border-top:1px solid rgba(255,255,255,.28);border-bottom:1px solid rgba(255,255,255,.06);background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 34%,rgba(80,170,220,.10) 54%,rgba(255,255,255,0));clip-path:ellipse(46% 10% at 50% 49%);opacity:.68;animation:bubbleWaterTilt 5.8s ease-in-out infinite}
    .bubbleGlass{z-index:4;mix-blend-mode:screen;transform:translate3d(-50%,-50%,72px) rotateX(2deg) rotateY(-3deg)}
    .bubbleGlass span{background:radial-gradient(circle at 29% 20%,rgba(255,255,255,.55),rgba(255,255,255,0) 18%),radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 55%,rgba(255,255,255,.18) 74%,rgba(255,255,255,0) 92%);opacity:.82}
    .bubbleGlass i{inset:7%;background:linear-gradient(128deg,rgba(255,255,255,0) 19%,rgba(255,255,255,.22) 28%,rgba(255,255,255,0) 38%,rgba(255,255,255,.13) 58%,rgba(255,255,255,0) 70%);filter:blur(1px);opacity:.52;animation:bubbleGlint 6.8s ease-in-out infinite}
    .heroStage model-viewer{z-index:3!important;transform-style:preserve-3d!important;clip-path:circle(43% at 50% 50%);filter:drop-shadow(0 44px 64px rgba(0,0,0,.28)) saturate(1.07) contrast(1.03)!important}
    .heroStage.lightOn .bubble3d{filter:drop-shadow(0 34px 56px rgba(0,0,0,.23)) drop-shadow(0 0 42px rgba(125,215,255,.42))}
    .heroStage.lightOn .bubbleCore{box-shadow:inset 18px 22px 50px rgba(255,255,255,.20),inset -26px -34px 70px rgba(0,0,0,.20),inset 0 0 0 1px rgba(255,255,255,.38),0 0 52px rgba(130,210,255,.18)}
    .heroStage.spin .bubble3d{animation:bubble3dRush .48s ease-in-out infinite!important}.heroStage.spin .bubbleCaustics{transform:translateZ(18px);background:radial-gradient(ellipse at 36% 30%,rgba(255,255,255,.16),rgba(255,255,255,0) 34%),radial-gradient(ellipse at 64% 68%,rgba(115,215,255,.11),rgba(255,255,255,0) 42%);mix-blend-mode:screen;opacity:.28;filter:blur(10px);animation:none!important}.heroStage.spin .bubbleGlass i{animation:bubbleGlint .9s ease-in-out infinite!important;opacity:.82}
    @keyframes bubble3dBreath{0%,100%{transform:translate3d(-50%,-50%,0) rotateX(2deg) rotateY(-3deg) scale(1)}45%{transform:translate3d(-50.25%,-50.4%,8px) rotateX(3deg) rotateY(-2deg) scale(1.004)}72%{transform:translate3d(-49.75%,-49.8%,3px) rotateX(1deg) rotateY(-4deg) scale(.998)}}
    @keyframes bubble3dRush{0%,100%{transform:translate3d(-50%,-50%,0) rotateX(2deg) rotateY(-3deg) scale(1)}50%{transform:translate3d(-49.7%,-50.8%,12px) rotateX(4deg) rotateY(2deg) scale(1.008)}}
    @keyframes bubbleWaterTilt{0%,100%{transform:translateZ(44px) rotate(-8deg) translateY(0)}50%{transform:translateZ(44px) rotate(7deg) translateY(2%)}}
    @keyframes bubbleGlint{0%,100%{transform:translateX(-3%) rotate(0deg);opacity:.42}48%{transform:translateX(5%) rotate(7deg);opacity:.78}}
    @media(max-width:820px){.heroStage{--bubble-size:min(520px,96vw,60vh)}.bubbleWaterline{inset:13%}.heroStage model-viewer{clip-path:circle(46% at 50% 50%)}}


    /* Live water optics layer */
    .bubbleFx{position:absolute;left:50%;top:50%;z-index:4;width:var(--bubble-size);aspect-ratio:1;border-radius:50%;transform:translate3d(-50%,-50%,58px) rotateX(2deg) rotateY(-3deg);pointer-events:none;mix-blend-mode:screen;opacity:.62;filter:blur(.15px) saturate(1.22);clip-path:circle(49.5% at 50% 50%)}
    .heroStage.lightOn .bubbleFx{opacity:.76;filter:blur(.12px) saturate(1.35) brightness(1.12)}
    .heroStage.spin .bubbleFx{opacity:.9;filter:blur(.05px) saturate(1.55) brightness(1.16)}
    /* Free-floating hero bubble travel */
    .heroStage{animation:heroBubbleFreeFloat 13.5s cubic-bezier(.42,0,.28,1) infinite!important;will-change:transform!important;touch-action:manipulation}
    .heroStage.spin{animation:heroBubbleFastFloat 1.05s cubic-bezier(.35,0,.25,1) infinite!important}
    @keyframes heroBubbleFreeFloat{
      0%,100%{transform:translate3d(-16vw,-3vh,0) rotate(-2.5deg)}
      18%{transform:translate3d(-4vw,-9vh,0) rotate(1.2deg)}
      38%{transform:translate3d(14vw,-5vh,0) rotate(3deg)}
      58%{transform:translate3d(18vw,5vh,0) rotate(-1.4deg)}
      78%{transform:translate3d(-6vw,8vh,0) rotate(2.2deg)}
    }
    @keyframes heroBubbleFastFloat{
      0%,100%{transform:translate3d(-18vw,-5vh,0) rotate(-5deg)}
      25%{transform:translate3d(16vw,-8vh,0) rotate(6deg)}
      50%{transform:translate3d(20vw,7vh,0) rotate(-4deg)}
      75%{transform:translate3d(-12vw,9vh,0) rotate(5deg)}
    }
    @media(max-width:820px){
      @keyframes heroBubbleFreeFloat{
        0%,100%{transform:translate3d(-9vw,-3vh,0) rotate(-2deg)}
        24%{transform:translate3d(6vw,-7vh,0) rotate(1.6deg)}
        52%{transform:translate3d(9vw,5vh,0) rotate(-1.8deg)}
        76%{transform:translate3d(-7vw,6vh,0) rotate(2.4deg)}
      }
      @keyframes heroBubbleFastFloat{
        0%,100%{transform:translate3d(-10vw,-4vh,0) rotate(-4deg)}
        35%{transform:translate3d(10vw,-7vh,0) rotate(5deg)}
        70%{transform:translate3d(7vw,7vh,0) rotate(-4deg)}
      }
    }






    /* Fortune-wheel roulette: Jigger spins, water mass follows slowly */
    .heroStage.spin .bubble3d{animation:bubbleFollowFortune 5.2s cubic-bezier(.22,.68,.18,1) both!important}
    .heroStage.spin .bubbleShellMain{animation:bubbleShellFollowFortune 5.2s cubic-bezier(.22,.68,.18,1) both!important}
    .heroStage.spin .bubbleGlass{animation:bubbleGlassFollowFortune 5.2s cubic-bezier(.22,.68,.18,1) both!important}
    .heroStage.spin .bubbleFx{animation:bubbleFxFollowFortune 5.2s cubic-bezier(.22,.68,.18,1) both!important;opacity:.92!important}
    @keyframes bubbleFollowFortune{
      0%{transform:translate3d(calc(-50% + var(--liquid-lag-x)),calc(-50% + var(--liquid-lag-y)),-1px) rotateX(2deg) rotateY(-3deg) rotateZ(0deg) scale(var(--liquid-stretch-x),var(--liquid-stretch-y))}
      28%{transform:translate3d(calc(-50% + var(--liquid-lag-x) * 1.4),calc(-50% + var(--liquid-lag-y) * 1.4),10px) rotateX(3deg) rotateY(-2deg) rotateZ(10deg) scale(1.006,.996)}
      64%{transform:translate3d(calc(-50% + var(--liquid-lag-x) * -.8),calc(-50% + var(--liquid-lag-y) * -.8),4px) rotateX(2deg) rotateY(-4deg) rotateZ(22deg) scale(.998,1.004)}
      88%{transform:translate3d(calc(-50% + var(--liquid-lag-x) * .4),calc(-50% + var(--liquid-lag-y) * .4),0) rotateX(3deg) rotateY(-3deg) rotateZ(18deg) scale(1.003,.998)}
      100%{transform:translate3d(calc(-50% + var(--liquid-lag-x)),calc(-50% + var(--liquid-lag-y)),-1px) rotateX(2deg) rotateY(-3deg) rotateZ(36deg) scale(var(--liquid-stretch-x),var(--liquid-stretch-y))}
    }
    @keyframes bubbleShellFollowFortune{
      0%{transform:translate3d(calc(-50% + var(--liquid-lag-x) * .18),calc(-50% + var(--liquid-lag-y) * .18),40px) scale(1.01) rotateZ(0deg)}
      50%{transform:translate3d(calc(-50% + var(--liquid-lag-x) * .46),calc(-50% + var(--liquid-lag-y) * .46),48px) scale(1.045,.972) rotateZ(28deg)}
      84%{transform:translate3d(calc(-50% + var(--liquid-lag-x) * -.18),calc(-50% + var(--liquid-lag-y) * -.18),42px) scale(.992,1.018) rotateZ(43deg)}
      100%{transform:translate3d(calc(-50% + var(--liquid-lag-x) * .18),calc(-50% + var(--liquid-lag-y) * .18),40px) scale(1.01) rotateZ(36deg)}
    }
    @keyframes bubbleGlassFollowFortune{0%{transform:translate3d(calc(-50% + var(--liquid-lag-x)),calc(-50% + var(--liquid-lag-y)),72px) rotateX(2deg) rotateY(-3deg) rotateZ(0deg)}100%{transform:translate3d(calc(-50% + var(--liquid-lag-x)),calc(-50% + var(--liquid-lag-y)),72px) rotateX(2deg) rotateY(-3deg) rotateZ(30deg)}}
    @keyframes bubbleFxFollowFortune{0%{transform:translate3d(calc(-50% + var(--liquid-lag-x)),calc(-50% + var(--liquid-lag-y)),58px) rotateX(2deg) rotateY(-3deg) rotateZ(0deg) scale(1)}50%{transform:translate3d(calc(-50% + var(--liquid-lag-x) * -1.2),calc(-50% + var(--liquid-lag-y) * -1.2),58px) rotateX(2deg) rotateY(-3deg) rotateZ(-28deg) scale(1.006,.996)}100%{transform:translate3d(calc(-50% + var(--liquid-lag-x)),calc(-50% + var(--liquid-lag-y)),58px) rotateX(2deg) rotateY(-3deg) rotateZ(-36deg) scale(1)}}
    /* Clock roulette override: JS owns the Jigger rotation, CSS keeps the water moving only */
    .heroStage.spin #heroModel,
    .heroStage.lightOff.spin #heroModel{
      animation:none!important;
      will-change:transform;
      transform-origin:50% 50%!important;
    }
    /* Liquid interface states from the hero bubble spec */
    .hero{--pointer-x:50%;--pointer-y:50%;--shock-x:50%;--shock-y:50%;--shock-alpha:0;--reveal-alpha:0;--hover-pull:0}
    .hero:after{background:radial-gradient(circle at var(--bubble-cx) var(--bubble-cy),rgba(255,255,255,calc(.22 + var(--hover-pull) * .08)) 0 7%,rgba(150,225,255,.18) 14%,rgba(255,255,255,.06) 25%,rgba(255,255,255,0) 42%),radial-gradient(circle at var(--shock-x) var(--shock-y),rgba(255,255,255,calc(var(--shock-alpha) * .42)) 0 4%,rgba(120,220,255,calc(var(--shock-alpha) * .20)) 12%,rgba(255,255,255,0) 28%),radial-gradient(ellipse at var(--bubble-cx) calc(var(--bubble-cy) + 23%),rgba(0,0,0,calc(.14 + var(--bubble-speed) * .06)) 0 9%,rgba(0,0,0,.06) 19%,rgba(0,0,0,0) 35%),conic-gradient(from calc(var(--liquid-tilt,0deg) * 1) at var(--bubble-cx) var(--bubble-cy),rgba(255,255,255,0),rgba(255,255,255,.12),rgba(120,220,255,.08),rgba(255,255,255,0),rgba(255,255,255,.10),rgba(255,255,255,0))!important}
    .heroStage.is-hover{--hover-pull:1}
    .heroStage.is-hover .bubbleShell,.heroStage.is-hover .bubble3d{filter:drop-shadow(0 20px 44px rgba(160,230,255,.20)) drop-shadow(0 38px 72px rgba(0,0,0,.22)) saturate(1.28) brightness(1.06)!important}
    .heroStage.is-hover #heroModel{filter:brightness(1.12) saturate(1.14) drop-shadow(0 46px 68px rgba(0,0,0,.30)) drop-shadow(0 0 24px rgba(180,230,255,.46))!important}
    .heroStage.is-invite .bubbleShell,.heroStage.is-invite .bubble3d{animation:bubbleInviteShell .68s ease-out 1!important}
    .heroStage.is-invite .bubbleGlass i{animation:bubbleInviteGlint .68s ease-out 1!important}
    .heroStage.is-invite #heroModel{animation:jiggerInviteTilt .68s ease-out 1!important}
    .heroStage.is-pressing .bubbleShell,.heroStage.is-pressing .bubble3d,.heroStage.is-pressing .bubbleFx{transform:translate3d(calc(-50% + var(--liquid-lag-x)),calc(-50% + var(--liquid-lag-y)),40px) scale(1.08,.92)!important;filter:drop-shadow(0 18px 36px rgba(255,255,255,.20)) drop-shadow(0 30px 70px rgba(0,0,0,.28)) saturate(1.45)!important}
    .heroStage.is-pressing #heroModel{transform:translateY(18px) scale(.90)!important}
    .heroStage.is-reveal .bubbleShell,.heroStage.is-reveal .bubble3d{animation:bubbleRevealPulse .48s ease-out 1!important}
    .heroStage.is-reveal .heroBubbleButton{animation:priceRevealPulse .48s ease-out 1!important}
    .hero.world-react{--reveal-alpha:1}
    .hero.world-react:before{filter:saturate(calc(var(--hero-sat,1.08) + .32)) contrast(1.12) blur(.3px)!important}
    .hero.world-react:after{filter:blur(5px) saturate(1.55)!important}
    @keyframes bubbleInviteShell{0%,100%{scale:1}18%{scale:1.018 .982}34%{scale:.992 1.011}55%{scale:1.012 .994}}
    @keyframes bubbleInviteGlint{0%{transform:translateX(-16%) rotate(-8deg);opacity:.28}45%{transform:translateX(13%) rotate(9deg);opacity:.95}100%{transform:translateX(0) rotate(0);opacity:.46}}
    @keyframes jiggerInviteTilt{0%,100%{transform:translateY(6px) scale(.92) rotate(0deg)}45%{transform:translateY(2px) scale(.925) rotate(2.2deg)}}
    @keyframes bubbleRevealPulse{0%{scale:1;opacity:.9}36%{scale:1.052;opacity:1}100%{scale:1;opacity:.94}}
    @keyframes priceRevealPulse{0%,100%{scale:1}42%{scale:1.08}}
    /* Hero reacts to bubble position: light lens, wake, shadow and background parallax */
    .hero{--bubble-cx:50%;--bubble-cy:48%;--bubble-px:0px;--bubble-py:0px;--bubble-speed:0;--hero-parallax-x:50%;--hero-parallax-y:50%}
    .hero:before{background-position:var(--hero-parallax-x) var(--hero-parallax-y)!important;filter:saturate(calc(var(--hero-sat,1.08) + var(--bubble-speed) * .18)) contrast(1.05) blur(.6px)!important}
    .hero:after{content:""!important;display:block!important;position:absolute!important;z-index:1!important;left:0!important;top:0!important;right:0!important;bottom:0!important;width:auto!important;aspect-ratio:auto!important;border-radius:0!important;transform:none!important;pointer-events:none!important;opacity:1!important;background:radial-gradient(circle at var(--bubble-cx) var(--bubble-cy),rgba(255,255,255,.30) 0 7%,rgba(150,225,255,.18) 14%,rgba(255,255,255,.06) 25%,rgba(255,255,255,0) 42%),radial-gradient(ellipse at var(--bubble-cx) calc(var(--bubble-cy) + 23%),rgba(0,0,0,calc(.14 + var(--bubble-speed) * .06)) 0 9%,rgba(0,0,0,.06) 19%,rgba(0,0,0,0) 35%),conic-gradient(from calc(var(--liquid-tilt,0deg) * 1) at var(--bubble-cx) var(--bubble-cy),rgba(255,255,255,0),rgba(255,255,255,.12),rgba(120,220,255,.08),rgba(255,255,255,0),rgba(255,255,255,.10),rgba(255,255,255,0))!important;mix-blend-mode:screen!important;filter:blur(calc(10px - var(--bubble-speed) * 3px)) saturate(1.25)!important;transition:none!important;backdrop-filter:blur(calc(1.4px + var(--bubble-speed) * 1.2px)) saturate(calc(1.02 + var(--bubble-speed) * .18))!important;-webkit-mask-image:none!important;mask-image:none!important;box-shadow:none!important}
    .heroStage:after{transform:translate3d(calc(-50% + var(--liquid-lag-x) * -.9),calc(var(--liquid-lag-y) * -.24),0)!important;width:44%!important;left:50%!important;right:auto!important;background:radial-gradient(ellipse,rgba(0,0,0,calc(.20 + var(--bubble-speed) * .08)),rgba(0,0,0,.075) 58%,rgba(0,0,0,0) 82%)!important}
    .bubbleBack{background-position:calc(50% + var(--liquid-lag-x) * -1.8) calc(50% + var(--liquid-lag-y) * -1.8),center!important;filter:blur(calc(4px + var(--bubble-speed) * 2px)) saturate(calc(1.18 + var(--bubble-speed) * .28)) contrast(1.08)!important}
    .bubbleShell{height:calc(var(--bubble-size) * 1.045)!important}
    .bubbleShellMain{transform:translate3d(calc(-50% + var(--liquid-lag-x) * .18 + var(--spin-x) * .44),calc(-50% + var(--liquid-lag-y) * .18 + var(--spin-y) * .44),40px) rotateZ(calc(var(--spin-tilt) * .62)) scale(calc(1.01 + var(--bubble-speed) * .025)) scale(var(--spin-stretch-x),var(--spin-stretch-y))!important}
    /* GLB bubble shells: real 3D geometry for main and attached bubbles */
    .bubbleShell{position:absolute;left:50%;top:50%;z-index:2;width:calc(var(--bubble-size) * 1.045);aspect-ratio:1;transform:translate3d(-50%,-50%,40px) scale(1.01);pointer-events:none;--poster-color:transparent;--progress-bar-color:transparent;--progress-bar-height:0px;background:transparent!important;opacity:.92;mix-blend-mode:screen;filter:drop-shadow(0 18px 34px rgba(255,255,255,.10)) drop-shadow(0 34px 62px rgba(0,0,0,.16)) saturate(1.14) contrast(1.08)}
    .bubbleShellMain{clip-path:circle(49.8% at 50% 50%)}
    .heroStage.lightOn .bubbleShell{opacity:1;filter:drop-shadow(0 18px 38px rgba(150,220,255,.18)) drop-shadow(0 36px 68px rgba(0,0,0,.22)) saturate(1.2) contrast(1.08)}
    .heroBubbleButton{overflow:visible;background:transparent!important;border-color:transparent!important;box-shadow:none!important;isolation:isolate;color:#050506;text-shadow:0 1px 12px rgba(255,255,255,.72)}
    .heroSmallBubbleShell{position:absolute;inset:-17%;z-index:-1;width:134%;height:134%;pointer-events:none;--poster-color:transparent;--progress-bar-color:transparent;--progress-bar-height:0px;background:transparent!important;opacity:.98;filter:drop-shadow(0 12px 24px rgba(0,0,0,.18)) saturate(1.18) contrast(1.08)}
    .heroBubbleButton:before{content:"";position:absolute;inset:5%;z-index:-2;border-radius:50%;background:radial-gradient(circle at 34% 26%,rgba(255,255,255,.58),rgba(255,255,255,.14) 38%,rgba(40,85,110,.18) 72%,rgba(255,255,255,0));backdrop-filter:blur(7px);box-shadow:inset 0 0 18px rgba(255,255,255,.34)}
    .heroBubbleButton span{position:relative;z-index:2}.heroBubbleButton:hover .heroSmallBubbleShell{filter:drop-shadow(0 16px 32px rgba(0,0,0,.22)) saturate(1.28) brightness(1.06)}

    /* Blue water volume inside the main bubble, no background image */
    .heroStage .bubbleBack{
      background:
        radial-gradient(circle at 38% 24%,rgba(255,255,255,.42) 0 6%,rgba(210,246,255,.20) 16%,rgba(255,255,255,0) 34%),
        radial-gradient(circle at 58% 46%,rgba(96,214,255,.42) 0 20%,rgba(18,142,218,.34) 44%,rgba(3,56,112,.28) 72%,rgba(0,18,44,.18) 100%),
        conic-gradient(from calc(var(--liquid-tilt,0deg) * .7) at 50% 52%,rgba(255,255,255,0),rgba(178,242,255,.24),rgba(30,155,230,.18),rgba(255,255,255,0),rgba(92,211,255,.18),rgba(255,255,255,0))!important;
      background-size:100% 100%,115% 115%,130% 130%!important;
      background-position:center!important;
      background-blend-mode:screen,normal,screen!important;
      filter:blur(calc(2.8px + var(--bubble-speed) * 1.1px)) saturate(1.42) contrast(1.08) brightness(1.04)!important;
      opacity:.74!important;
      box-shadow:inset 0 0 84px rgba(0,55,105,.24),inset 0 0 34px rgba(158,232,255,.20)!important;
    }
    .heroStage .bubbleCore{
      background:
        radial-gradient(ellipse at 42% 30%,rgba(255,255,255,.40) 0 10%,rgba(205,247,255,.16) 30%,rgba(255,255,255,0) 62%),
        radial-gradient(ellipse at 55% 66%,rgba(44,185,255,.30) 0 24%,rgba(0,117,200,.20) 48%,rgba(0,45,98,.18) 76%,rgba(255,255,255,0) 96%),
        linear-gradient(145deg,rgba(232,252,255,.18),rgba(56,188,255,.20) 46%,rgba(0,64,137,.16))!important;
      backdrop-filter:blur(7px) saturate(1.42) contrast(1.06)!important;
      box-shadow:inset 20px 24px 54px rgba(255,255,255,.20),inset -28px -36px 74px rgba(0,43,94,.22),inset 0 0 0 1px rgba(224,250,255,.34)!important;
    }
    .heroStage .bubbleCaustics{
      background:
        radial-gradient(ellipse at 32% 28%,rgba(255,255,255,.22),rgba(255,255,255,0) 34%),
        radial-gradient(ellipse at 64% 68%,rgba(118,226,255,.20),rgba(255,255,255,0) 42%),
        repeating-conic-gradient(from calc(var(--liquid-tilt,0deg) * .35),rgba(255,255,255,0) 0 10deg,rgba(196,246,255,.075) 12deg 15deg,rgba(255,255,255,0) 20deg 34deg)!important;
      opacity:.36!important;
      filter:blur(9px) saturate(1.34)!important;
    }
    /* No ground shadow under the roaming hero bubble */
    .heroStage:after{
      content:none!important;
      display:none!important;
      opacity:0!important;
      background:none!important;
      filter:none!important;
      box-shadow:none!important;
    }
    /* Deep 3D water: inner suspended volume, caustics and refraction layers */
    .heroStage .bubbleBack,
    .heroStage .bubbleCore,
    .heroStage .bubbleCaustics{
      overflow:hidden!important;
      transform-style:preserve-3d!important;
    }
    .heroStage .bubbleBack:before,
    .heroStage .bubbleBack:after,
    .heroStage .bubbleCore:before,
    .heroStage .bubbleCore:after,
    .heroStage .bubbleCaustics:before{
      content:"";
      position:absolute;
      inset:-16%;
      border-radius:50%;
      pointer-events:none;
    }
    .heroStage .bubbleBack:before{
      background:
        radial-gradient(ellipse at 28% 22%,rgba(255,255,255,.26),rgba(255,255,255,0) 28%),
        radial-gradient(ellipse at 70% 72%,rgba(0,94,176,.22),rgba(255,255,255,0) 44%),
        repeating-radial-gradient(ellipse at 52% 54%,rgba(220,250,255,.075) 0 1px,rgba(60,190,255,.035) 2px 7px,rgba(255,255,255,0) 8px 18px);
      mix-blend-mode:screen;
      opacity:.62;
      filter:blur(3px);
      animation:trueWaterDrift 10.5s ease-in-out infinite;
    }
    .heroStage .bubbleBack:after{
      inset:4% 10% 8%;
      background:
        linear-gradient(95deg,rgba(255,255,255,0) 10%,rgba(225,252,255,.18) 23%,rgba(255,255,255,0) 39%,rgba(62,200,255,.13) 58%,rgba(255,255,255,0) 76%),
        radial-gradient(ellipse at 50% 56%,rgba(17,158,232,.26),rgba(1,53,118,.16) 58%,rgba(255,255,255,0) 78%);
      clip-path:ellipse(46% 23% at 50% 53%);
      opacity:.70;
      filter:blur(5px) saturate(1.25);
      transform:translateZ(-18px) rotate(-7deg);
      animation:trueWaterLens 7.8s ease-in-out infinite;
    }
    .heroStage .bubbleCore:before{
      background:
        conic-gradient(from 30deg at 50% 50%,rgba(255,255,255,0),rgba(188,244,255,.20),rgba(9,146,228,.10),rgba(255,255,255,0),rgba(151,235,255,.18),rgba(255,255,255,0)),
        radial-gradient(circle at 50% 52%,rgba(98,211,255,.24),rgba(0,94,184,.14) 52%,rgba(255,255,255,0) 78%);
      mix-blend-mode:screen;
      opacity:.52;
      filter:blur(8px);
      animation:trueWaterRoll 12s cubic-bezier(.42,0,.28,1) infinite;
    }
    .heroStage .bubbleCore:after{
      inset:14%;
      background:
        radial-gradient(ellipse at 36% 30%,rgba(255,255,255,.30),rgba(255,255,255,0) 34%),
        radial-gradient(ellipse at 62% 62%,rgba(68,203,255,.24),rgba(0,83,170,.16) 54%,rgba(255,255,255,0) 76%);
      border-radius:45% 55% 52% 48%/42% 48% 56% 58%;
      opacity:.54;
      filter:blur(4px) saturate(1.32);
      transform:translateZ(22px) rotate(8deg);
      animation:trueWaterBlob 8.8s ease-in-out infinite;
    }
    .heroStage .bubbleCaustics:before{
      background:
        repeating-conic-gradient(from 18deg at 50% 50%,rgba(255,255,255,0) 0 13deg,rgba(234,253,255,.12) 14deg 16deg,rgba(80,208,255,.07) 18deg 21deg,rgba(255,255,255,0) 23deg 38deg);
      mix-blend-mode:screen;
      opacity:.40;
      filter:blur(7px);
      animation:trueWaterCaustics 9.4s linear infinite;
    }
    .heroStage.spin .bubbleBack:before,
    .heroStage.spin .bubbleCore:before,
    .heroStage.spin .bubbleCaustics:before{
      animation-duration:3.8s!important;
      opacity:.72!important;
    }
    .heroStage.spin .bubbleBack:after,
    .heroStage.spin .bubbleCore:after{
      animation-duration:3.2s!important;
      opacity:.76!important;
    }
    @keyframes trueWaterDrift{
      0%,100%{transform:translate3d(-2%,-1%,0) rotate(-8deg) scale(1)}
      38%{transform:translate3d(3%,2%,14px) rotate(7deg) scale(1.045)}
      72%{transform:translate3d(-1%,4%,6px) rotate(15deg) scale(.985)}
    }
    @keyframes trueWaterLens{
      0%,100%{transform:translate3d(-1%,0,-18px) rotate(-7deg) scale(1,.92)}
      50%{transform:translate3d(2%,3%,-6px) rotate(6deg) scale(1.08,1.02)}
    }
    @keyframes trueWaterRoll{
      0%,100%{transform:translate3d(0,0,16px) rotate(0deg) scale(1)}
      45%{transform:translate3d(2%,-3%,28px) rotate(34deg) scale(1.04)}
      76%{transform:translate3d(-3%,2%,20px) rotate(58deg) scale(.99)}
    }
    @keyframes trueWaterBlob{
      0%,100%{border-radius:45% 55% 52% 48%/42% 48% 56% 58%;transform:translate3d(-1%,1%,22px) rotate(8deg)}
      45%{border-radius:54% 46% 44% 56%/52% 42% 58% 48%;transform:translate3d(2%,-2%,34px) rotate(-9deg)}
      72%{border-radius:48% 52% 58% 42%/46% 58% 44% 54%;transform:translate3d(-2%,3%,26px) rotate(5deg)}
    }
    @keyframes trueWaterCaustics{
      0%{transform:translate3d(-2%,1%,34px) rotate(0deg) scale(1.02)}
      100%{transform:translate3d(2%,-1%,34px) rotate(360deg) scale(1.02)}
    }
    /* Vivid crystal glass finish: brighter shell, stronger refraction, live color */
    .heroStage .bubbleShell{
      opacity:.98!important;
      mix-blend-mode:screen!important;
      filter:
        drop-shadow(0 0 18px rgba(228,252,255,.42))
        drop-shadow(0 0 42px var(--mood-ring,rgba(0,132,255,.30)))
        drop-shadow(0 34px 62px rgba(0,18,42,.20))
        saturate(1.42)
        contrast(1.16)
        brightness(1.14)!important;
    }
    .heroStage.lightOn .bubbleShell{
      filter:
        drop-shadow(0 0 24px rgba(235,252,255,.62))
        drop-shadow(0 0 58px rgba(94,214,255,.56))
        drop-shadow(0 36px 70px rgba(0,18,42,.24))
        saturate(1.48)
        contrast(1.18)
        brightness(1.18)!important;
    }
    .heroStage .bubble3d{
      filter:
        drop-shadow(0 0 22px rgba(220,250,255,.30))
        drop-shadow(0 0 46px var(--mood-ring,rgba(0,132,255,.26)))
        drop-shadow(0 30px 56px rgba(0,18,46,.20))
        saturate(1.32)
        contrast(1.12)
        brightness(1.08)!important;
    }
    .heroStage .bubbleBack{
      filter:blur(calc(2.2px + var(--bubble-speed) * .9px)) saturate(1.75) contrast(1.18) brightness(1.12)!important;
      opacity:.82!important;
    }
    .heroStage .bubbleCore{
      background:
        radial-gradient(ellipse at 36% 25%,rgba(255,255,255,.48) 0 9%,rgba(200,250,255,.20) 30%,rgba(255,255,255,0) 60%),
        radial-gradient(ellipse at 56% 61%,rgba(0,205,255,.36) 0 24%,rgba(0,132,255,.26) 48%,rgba(20,42,175,.18) 76%,rgba(255,255,255,0) 96%),
        linear-gradient(145deg,rgba(255,255,255,.20),rgba(0,213,255,.24) 38%,rgba(48,88,255,.16) 78%)!important;
      backdrop-filter:blur(8px) saturate(1.72) contrast(1.12) brightness(1.08)!important;
      -webkit-backdrop-filter:blur(8px) saturate(1.72) contrast(1.12) brightness(1.08)!important;
      box-shadow:
        inset 22px 24px 58px rgba(255,255,255,.26),
        inset -30px -38px 82px rgba(0,54,132,.26),
        inset 0 0 0 1px rgba(238,253,255,.46),
        inset 0 0 46px rgba(0,205,255,.14)!important;
    }
    .heroStage .bubbleRim{
      background:
        radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 0 51%,rgba(255,255,255,.10) 60%,rgba(194,246,255,.46) 70%,rgba(255,255,255,.82) 76%,rgba(71,205,255,.26) 83%,rgba(255,255,255,0) 91%),
        conic-gradient(from 16deg,rgba(255,255,255,.08),rgba(105,221,255,.34),rgba(255,255,255,.72),rgba(60,180,255,.22),rgba(255,255,255,.12),rgba(255,255,255,.08))!important;
      box-shadow:
        inset 0 0 0 2px rgba(255,255,255,.74),
        inset 0 0 24px rgba(255,255,255,.50),
        inset 22px 18px 52px rgba(255,255,255,.28),
        inset -36px -36px 78px rgba(0,42,100,.28),
        0 0 26px rgba(255,255,255,.36),
        0 0 54px var(--mood-ring,rgba(0,132,255,.24))!important;
      opacity:1!important;
    }
    .heroStage .bubbleSpecular{
      background:
        radial-gradient(ellipse at 28% 17%,rgba(255,255,255,.98) 0 5%,rgba(255,255,255,.58) 10%,rgba(255,255,255,0) 25%),
        radial-gradient(ellipse at 42% 9%,rgba(255,255,255,.56) 0 3%,rgba(255,255,255,0) 12%),
        radial-gradient(ellipse at 75% 18%,rgba(220,251,255,.58) 0 4%,rgba(255,255,255,0) 17%),
        radial-gradient(ellipse at 78% 76%,rgba(255,255,255,.34) 0 5%,rgba(255,255,255,0) 20%),
        linear-gradient(118deg,rgba(255,255,255,0) 18%,rgba(255,255,255,.22) 25%,rgba(255,255,255,0) 34%,rgba(125,226,255,.18) 56%,rgba(255,255,255,0) 70%)!important;
      filter:blur(.08px) saturate(1.18)!important;
      opacity:1!important;
    }
    .heroStage .bubbleGlass{
      mix-blend-mode:screen!important;
      filter:saturate(1.48) contrast(1.16) brightness(1.16) drop-shadow(0 0 18px rgba(240,253,255,.28))!important;
    }
    .heroStage .bubbleGlass span{
      background:
        radial-gradient(circle at 28% 19%,rgba(255,255,255,.78),rgba(255,255,255,.12) 17%,rgba(255,255,255,0) 28%),
        radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 50%,rgba(195,246,255,.20) 69%,rgba(255,255,255,.42) 77%,rgba(255,255,255,0) 93%),
        conic-gradient(from 20deg,rgba(255,255,255,0),rgba(255,255,255,.20),rgba(80,210,255,.10),rgba(255,255,255,0),rgba(255,255,255,.18),rgba(255,255,255,0))!important;
      opacity:.98!important;
    }
    .heroStage .bubbleGlass i{
      background:
        linear-gradient(126deg,rgba(255,255,255,0) 16%,rgba(255,255,255,.40) 26%,rgba(255,255,255,0) 38%,rgba(142,233,255,.24) 56%,rgba(255,255,255,0) 72%),
        radial-gradient(ellipse at 30% 18%,rgba(255,255,255,.36),rgba(255,255,255,0) 24%)!important;
      filter:blur(.7px)!important;
      opacity:.74!important;
    }
    .heroStage #heroModel{
      filter:saturate(1.22) contrast(1.10) brightness(1.06) drop-shadow(0 42px 62px rgba(0,0,0,.25))!important;
    }
    .heroStage.lightOn #heroModel{
      filter:
        saturate(1.28)
        contrast(1.12)
        brightness(1.12)
        drop-shadow(0 44px 64px rgba(0,0,0,.28))
        drop-shadow(0 0 18px rgba(230,248,255,.96))
        drop-shadow(0 0 46px rgba(84,210,255,.68))!important;
    }
    .heroBubbleButton:before{
      background:
        radial-gradient(circle at 30% 22%,rgba(255,255,255,.84),rgba(255,255,255,.22) 35%,rgba(45,205,255,.24) 64%,rgba(0,92,190,.13) 84%,rgba(255,255,255,0))!important;
      backdrop-filter:blur(9px) saturate(1.62) contrast(1.10)!important;
      -webkit-backdrop-filter:blur(9px) saturate(1.62) contrast(1.10)!important;
      box-shadow:inset 0 0 20px rgba(255,255,255,.52),inset 0 -16px 30px rgba(0,82,160,.16),0 0 18px rgba(125,225,255,.20)!important;
    }
    .heroSmallBubbleShell{
      filter:drop-shadow(0 0 14px rgba(235,252,255,.34)) drop-shadow(0 12px 24px rgba(0,0,0,.16)) saturate(1.42) contrast(1.14) brightness(1.12)!important;
    }
    /* Subtle real-water caustics: behind the product, not painted over it */
    .bubbleFx{
      z-index:2!important;
      opacity:.30!important;
      mix-blend-mode:screen!important;
      filter:blur(.35px) saturate(1.18) brightness(.94)!important;
    }
    .heroStage.lightOn .bubbleFx{opacity:.34!important;filter:blur(.32px) saturate(1.22) brightness(.98)!important}
    .heroStage.spin .bubbleFx{opacity:.48!important;filter:blur(.24px) saturate(1.28) brightness(1.03)!important}
    /* Lower highlights: sober realistic glass, less white glow */
    .heroStage .bubbleShell{
      opacity:.90!important;
      filter:
        drop-shadow(0 0 12px rgba(214,242,248,.20))
        drop-shadow(0 0 28px rgba(80,190,230,.18))
        drop-shadow(0 30px 56px rgba(0,18,42,.20))
        saturate(1.12)
        contrast(1.04)
        brightness(.92)!important;
    }
    .heroStage.lightOn .bubbleShell{
      opacity:.94!important;
      filter:
        drop-shadow(0 0 14px rgba(216,244,250,.24))
        drop-shadow(0 0 34px rgba(86,196,235,.24))
        drop-shadow(0 32px 62px rgba(0,18,42,.22))
        saturate(1.16)
        contrast(1.05)
        brightness(.95)!important;
    }
    .heroStage .bubble3d{
      filter:
        drop-shadow(0 0 12px rgba(190,230,238,.14))
        drop-shadow(0 0 24px rgba(80,178,225,.13))
        drop-shadow(0 28px 52px rgba(0,18,46,.18))
        saturate(1.08)
        contrast(1.04)
        brightness(.94)!important;
    }
    .heroStage .bubbleBack{
      opacity:.68!important;
      filter:blur(calc(2.8px + var(--bubble-speed) * .8px)) saturate(1.28) contrast(1.02) brightness(.86)!important;
    }
    .heroStage .bubbleCore{
      background:
        radial-gradient(ellipse at 36% 25%,rgba(225,246,250,.22) 0 8%,rgba(142,218,230,.10) 30%,rgba(255,255,255,0) 60%),
        radial-gradient(ellipse at 56% 61%,rgba(0,160,210,.20) 0 24%,rgba(0,104,172,.17) 48%,rgba(18,48,128,.12) 76%,rgba(255,255,255,0) 96%),
        linear-gradient(145deg,rgba(255,255,255,.09),rgba(0,170,210,.15) 38%,rgba(38,74,180,.10) 78%)!important;
      box-shadow:
        inset 18px 20px 46px rgba(255,255,255,.13),
        inset -28px -34px 72px rgba(0,46,110,.22),
        inset 0 0 0 1px rgba(210,240,245,.25),
        inset 0 0 36px rgba(0,170,210,.08)!important;
      backdrop-filter:blur(8px) saturate(1.28) contrast(1.03) brightness(.93)!important;
      -webkit-backdrop-filter:blur(8px) saturate(1.28) contrast(1.03) brightness(.93)!important;
    }
    .heroStage .bubbleRim{
      background:
        radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 0 54%,rgba(215,242,248,.07) 62%,rgba(205,240,248,.22) 71%,rgba(245,252,254,.36) 77%,rgba(82,190,225,.12) 84%,rgba(255,255,255,0) 92%)!important;
      box-shadow:
        inset 0 0 0 1px rgba(240,250,252,.40),
        inset 0 0 16px rgba(230,248,252,.22),
        inset 20px 18px 46px rgba(255,255,255,.12),
        inset -34px -34px 74px rgba(0,42,100,.24),
        0 0 18px rgba(220,244,250,.16),
        0 0 32px rgba(78,182,225,.12)!important;
      opacity:.78!important;
    }
    .heroStage .bubbleSpecular{
      opacity:.46!important;
      filter:blur(.45px) saturate(.88) brightness(.82)!important;
    }
    .heroStage .bubbleGlass{
      filter:saturate(1.04) contrast(1.03) brightness(.88) drop-shadow(0 0 10px rgba(220,244,250,.12))!important;
    }
    .heroStage .bubbleGlass span{opacity:.48!important}
    .heroStage .bubbleGlass i{opacity:.28!important;filter:blur(1.2px)!important}
    .bubbleFx{opacity:.22!important;filter:blur(.42px) saturate(1.08) brightness(.82)!important}
    .heroStage.lightOn .bubbleFx{opacity:.25!important;filter:blur(.40px) saturate(1.10) brightness(.86)!important}
    .heroStage.spin .bubbleFx{opacity:.34!important;filter:blur(.32px) saturate(1.16) brightness(.92)!important}
    .heroStage #heroModel{
      filter:saturate(1.10) contrast(1.04) brightness(.98) drop-shadow(0 38px 54px rgba(0,0,0,.24))!important;
    }
    .heroStage.lightOn #heroModel{
      filter:
        saturate(1.12)
        contrast(1.05)
        brightness(1.01)
        drop-shadow(0 40px 58px rgba(0,0,0,.26))
        drop-shadow(0 0 10px rgba(205,232,240,.42))
        drop-shadow(0 0 24px rgba(76,188,230,.28))!important;
    }
    /* Cone-sourced light: glow starts from the Jigger cones, not from the bubble shell */
    .coneGlowField{
      position:absolute;
      left:50%;
      top:50%;
      z-index:3;
      width:var(--bubble-size);
      aspect-ratio:1;
      transform:translate3d(calc(-50% + var(--liquid-lag-x) * .42 + var(--spin-x) * .18),calc(-50% + var(--liquid-lag-y) * .42 + var(--spin-y) * .18),66px) rotateX(2deg) rotateY(-3deg) rotateZ(calc(var(--spin-tilt) * .18));
      border-radius:50%;
      pointer-events:none;
      mix-blend-mode:screen;
      opacity:.62;
      filter:blur(.2px) saturate(1.05);
      clip-path:circle(48.8% at 50% 50%);
      transition:opacity .25s ease,filter .25s ease;
    }
    .coneGlowField:before{
      content:"";
      position:absolute;
      inset:14% 28%;
      border-radius:46% 54% 50% 50%;
      background:
        radial-gradient(ellipse at 50% 20%,rgba(202,236,242,.22),rgba(80,190,225,.10) 18%,rgba(255,255,255,0) 36%),
        radial-gradient(ellipse at 50% 80%,rgba(202,236,242,.18),rgba(80,190,225,.08) 18%,rgba(255,255,255,0) 36%),
        linear-gradient(180deg,rgba(180,228,238,0),rgba(112,205,232,.055) 35%,rgba(112,205,232,.050) 65%,rgba(180,228,238,0));
      filter:blur(12px);
      opacity:.70;
      transform:scale(.72,1.05);
      animation:coneGlowBreath 5.8s ease-in-out infinite;
    }
    .coneGlow{
      position:absolute;
      left:50%;
      width:30%;
      height:15%;
      transform:translateX(-50%);
      border-radius:50%;
      background:
        radial-gradient(ellipse at 50% 50%,rgba(235,250,252,.46) 0 7%,rgba(150,225,240,.28) 16%,rgba(65,185,225,.13) 36%,rgba(255,255,255,0) 70%);
      box-shadow:
        0 0 12px rgba(210,245,250,.22),
        0 0 26px rgba(70,190,230,.18),
        inset 0 0 10px rgba(255,255,255,.16);
      filter:blur(4px);
      opacity:.76;
    }
    .coneGlowTop{
      top:22%;
      transform:translateX(-50%) rotate(-3deg) scale(.76,.40);
    }
    .coneGlowBottom{
      top:65%;
      transform:translateX(-50%) rotate(3deg) scale(.76,.40);
    }
    .heroStage.lightOff .coneGlowField{display:none!important}
    .heroStage.lightOn .coneGlowField{opacity:.70}
    .heroStage.spin .coneGlowField{
      opacity:.86;
      filter:blur(.15px) saturate(1.12);
    }
    .heroStage.spin .coneGlow{
      opacity:.88;
      box-shadow:
        0 0 14px rgba(210,245,250,.26),
        0 0 32px rgba(70,190,230,.24),
        inset 0 0 12px rgba(255,255,255,.18);
    }
    .heroStage .bubbleShell,
    .heroStage.lightOn .bubbleShell{
      filter:
        drop-shadow(0 22px 44px rgba(0,18,42,.18))
        saturate(1.06)
        contrast(1.02)
        brightness(.90)!important;
    }
    .heroStage .bubble3d,
    .heroStage.lightOn .bubble3d{
      filter:
        drop-shadow(0 26px 48px rgba(0,18,46,.16))
        saturate(1.04)
        contrast(1.02)
        brightness(.92)!important;
    }
    .heroStage.lightOn #heroModel{
      filter:
        saturate(1.08)
        contrast(1.03)
        brightness(1.0)
        drop-shadow(0 38px 54px rgba(0,0,0,.24))
        drop-shadow(0 0 10px rgba(170,220,230,.20))!important;
    }
    @keyframes coneGlowBreath{
      0%,100%{opacity:.58;transform:scale(.70,1.02)}
      50%{opacity:.76;transform:scale(.76,1.10)}
    }
    /* Dark glass rim: black transparent edge for a heavier, more realistic bubble */
    .heroStage .bubbleRim{
      background:
        radial-gradient(circle at 50% 50%,
          rgba(255,255,255,0) 0 53%,
          rgba(3,8,12,.06) 61%,
          rgba(2,5,8,.34) 70%,
          rgba(0,0,0,.58) 77%,
          rgba(0,0,0,.34) 84%,
          rgba(255,255,255,0) 93%),
        radial-gradient(ellipse at 31% 18%,rgba(232,246,248,.22),rgba(255,255,255,0) 20%),
        radial-gradient(ellipse at 74% 78%,rgba(210,238,242,.10),rgba(255,255,255,0) 22%)!important;
      box-shadow:
        inset 0 0 0 1px rgba(0,0,0,.58),
        inset 0 0 18px rgba(0,0,0,.46),
        inset 18px 18px 42px rgba(255,255,255,.07),
        inset -34px -34px 76px rgba(0,0,0,.46),
        0 0 0 1px rgba(255,255,255,.10),
        0 18px 42px rgba(0,0,0,.18)!important;
      opacity:.94!important;
      mix-blend-mode:multiply!important;
      filter:contrast(1.08) saturate(.92)!important;
    }
    .heroStage.lightOn .bubbleRim{
      background:
        radial-gradient(circle at 50% 50%,
          rgba(255,255,255,0) 0 53%,
          rgba(6,12,16,.06) 61%,
          rgba(3,8,11,.31) 70%,
          rgba(0,0,0,.50) 77%,
          rgba(0,0,0,.29) 84%,
          rgba(255,255,255,0) 93%),
        radial-gradient(ellipse at 31% 18%,rgba(210,238,242,.24),rgba(255,255,255,0) 20%),
        radial-gradient(ellipse at 74% 78%,rgba(120,210,230,.12),rgba(255,255,255,0) 22%)!important;
      box-shadow:
        inset 0 0 0 1px rgba(0,0,0,.50),
        inset 0 0 18px rgba(0,0,0,.40),
        inset 18px 18px 42px rgba(255,255,255,.08),
        inset -34px -34px 76px rgba(0,0,0,.42),
        0 0 0 1px rgba(255,255,255,.10),
        0 0 18px rgba(80,190,225,.08)!important;
    }
    .heroStage .bubbleGlass span{
      opacity:.38!important;
    }
    .heroStage .bubbleSpecular{
      opacity:.34!important;
    }
    /* Natural optical aura: no drawn ring, only soft edge refraction */
    .heroStage .bubbleRim,
    .heroStage.lightOn .bubbleRim{
      background:
        radial-gradient(circle at 50% 50%,
          rgba(255,255,255,0) 0 61%,
          rgba(0,0,0,.05) 69%,
          rgba(0,0,0,.18) 77%,
          rgba(0,0,0,.10) 84%,
          rgba(255,255,255,0) 93%),
        radial-gradient(ellipse at 28% 20%,rgba(238,248,250,.20),rgba(160,214,225,.07) 18%,rgba(255,255,255,0) 35%),
        radial-gradient(ellipse at 74% 78%,rgba(130,210,230,.08),rgba(255,255,255,0) 30%)!important;
      box-shadow:
        inset 0 0 0 1px rgba(0,0,0,.18),
        inset -28px -28px 70px rgba(0,0,0,.25),
        inset 20px 18px 48px rgba(255,255,255,.06),
        0 0 26px rgba(190,224,232,.08)!important;
      opacity:.72!important;
      mix-blend-mode:normal!important;
      filter:blur(.7px) contrast(1.02) saturate(.9)!important;
    }
    .heroStage .bubbleShell,
    .heroStage.lightOn .bubbleShell{
      opacity:.82!important;
      mix-blend-mode:screen!important;
      filter:
        drop-shadow(-12px -10px 18px rgba(225,242,245,.10))
        drop-shadow(18px 24px 44px rgba(0,16,38,.20))
        saturate(1.02)
        contrast(1.01)
        brightness(.88)!important;
    }
    .heroStage .bubbleGlass span{
      background:
        radial-gradient(circle at 27% 19%,rgba(230,245,248,.26),rgba(255,255,255,0) 19%),
        radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 62%,rgba(210,236,242,.07) 77%,rgba(255,255,255,0) 94%)!important;
      opacity:.32!important;
    }
    .heroStage .bubbleGlass i{opacity:.20!important}
    .heroStage .bubbleSpecular{opacity:.26!important}
    .heroStage .bubbleBack{
      box-shadow:
        inset 34px 28px 80px rgba(255,255,255,.07),
        inset -42px -44px 96px rgba(0,0,0,.24)!important;
    }
    /* Keep cone texture readable: glow lives behind model */
    .coneGlowField{
      z-index:2!important;
      opacity:.34!important;
      filter:blur(1.4px) saturate(.95) brightness(.88)!important;
      mix-blend-mode:screen!important;
    }
    .heroStage.lightOn .coneGlowField{opacity:.38!important}
    .heroStage.spin .coneGlowField{opacity:.52!important}
    .coneGlowField:before{
      opacity:.34!important;
      filter:blur(20px)!important;
      transform:scale(.60,.92)!important;
    }
    .coneGlowTop{
      top:24%!important;
      width:22%!important;
      height:9%!important;
      opacity:.20!important;
      filter:blur(9px)!important;
      transform:translateX(-50%) rotate(-3deg) scale(.48,.24)!important;
      box-shadow:0 0 10px rgba(160,220,230,.10)!important;
    }
    .coneGlowBottom{
      opacity:.38!important;
      filter:blur(7px)!important;
    }

    .heroStage .bubbleGlass i{
      opacity:.10!important;
      filter:blur(1.7px)!important;
    }
    .heroStage .bubbleSpecular{
      opacity:.20!important;
    }
    /* Light Off has no lamp stripe on the covers */
    .heroStage.lightOff #heroModel{
      filter:saturate(1.06) contrast(1.02) brightness(.96) drop-shadow(0 38px 54px rgba(0,0,0,.22))!important;
    }
    .heroStage.lightOff .coneGlowField{
      display:none!important;
    }
    .heroStage.lightOff .bubbleGlass i{
      opacity:.04!important;
    }
    .heroStage.lightOff .bubbleSpecular{
      opacity:.14!important;
    }
    /* Hero-only background for bubble/glow effects */
    .hero:before{
      background:
        linear-gradient(180deg,rgba(5,6,14,.20) 0%,rgba(10,8,18,.05) 44%,rgba(4,4,10,.26) 100%),
        var(--mood-image)!important;
      background-size:cover!important;
      background-position:center!important;
      filter:saturate(1.16) contrast(1.04) blur(.35px)!important;
      opacity:1!important;
      transform:scale(1.018)!important;
    }
    /* Wider front reflection: no narrow stripe over the cone */
    .heroStage .bubbleGlass i{
      inset:-2%!important;
      background:
        radial-gradient(ellipse 24% 44% at 66% 28%,rgba(255,255,255,.16) 0 18%,rgba(178,244,255,.08) 34%,rgba(255,255,255,0) 62%),
        linear-gradient(104deg,rgba(255,255,255,0) 0 47%,rgba(255,255,255,.065) 55%,rgba(180,242,255,.045) 64%,rgba(255,255,255,0) 78%)!important;
      filter:blur(9px)!important;
      opacity:.24!important;
      transform:translateX(6%) rotate(3deg)!important;
    }
    .heroStage.lightOff .bubbleGlass i{
      opacity:.18!important;
      filter:blur(10px)!important;
    }
    .heroStage .bubbleSpecular{
      background:
        radial-gradient(ellipse at 30% 18%,rgba(255,255,255,.26) 0 5%,rgba(255,255,255,.10) 12%,rgba(255,255,255,0) 26%),
        radial-gradient(ellipse at 70% 22%,rgba(220,250,255,.18) 0 8%,rgba(255,255,255,0) 24%)!important;
      opacity:.16!important;
      filter:blur(1.8px)!important;
    }
    .heroStage #heroModel{
      transform:translateY(8px) scale(.88) rotate(var(--jigger-clock-rot,0deg))!important;
    }
    .heroStage.lightOff #heroModel{
      transform:translateY(20px) scale(.88) rotate(var(--jigger-clock-rot,0deg))!important;
    }
    /* Compact viewport: lower Light Off model away from the front reflection */
    @media(max-height:819px), (max-width:1120px){
      .heroStage.lightOff #heroModel{
        transform:translateY(54px) scale(.84) rotate(var(--jigger-clock-rot,0deg))!important;
      }
    }
    /* Product-first bubble layering: no glass/glint can cross the Jigger */
    .heroStage #heroModel{
      z-index:4!important;
    }
    .heroStage .bubbleGlass{
      z-index:2!important;
      opacity:.72!important;
    }
    
    .heroStage .bubbleGlass span{
      opacity:.20!important;
      background:
        radial-gradient(circle at 27% 18%,rgba(255,255,255,.18),rgba(255,255,255,0) 18%),
        radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 60%,rgba(255,255,255,.12) 78%,rgba(255,255,255,0) 94%)!important;
    }
    .heroStage .bubbleSpecular{
      opacity:.08!important;
      filter:blur(2.4px)!important;
    }
    .heroStage .bubbleFx{
      z-index:2!important;
      opacity:.18!important;
    }
    .heroStage .bubbleShell{
      z-index:2!important;
    }
    /* Restore soft white optics without the narrow front stripe */
    .heroStage .bubbleGlass{
      z-index:2!important;
      opacity:.82!important;
    }
    .heroStage .bubbleGlass i{
      opacity:0!important;
    }
    .heroStage .bubbleGlass span{
      opacity:.34!important;
      background:
        radial-gradient(ellipse 26% 18% at 31% 16%,rgba(255,255,255,.34),rgba(255,255,255,.10) 38%,rgba(255,255,255,0) 74%),
        radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 58%,rgba(255,255,255,.13) 76%,rgba(255,255,255,0) 93%)!important;
      filter:blur(1.8px)!important;
    }
    .heroStage .bubbleSpecular{
      opacity:.18!important;
      background:
        radial-gradient(ellipse at 32% 16%,rgba(255,255,255,.34) 0 5%,rgba(255,255,255,.12) 13%,rgba(255,255,255,0) 28%),
        radial-gradient(ellipse at 66% 18%,rgba(230,248,255,.20) 0 6%,rgba(255,255,255,0) 23%)!important;
      filter:blur(1.4px)!important;
    }
    /* Liquid physics movement: the bubble swims like suspended water */
    .heroStage{animation:none!important;--liquid-x:0px;--liquid-y:0px;--liquid-tilt:0deg;--liquid-stretch-x:1;--liquid-stretch-y:1;--liquid-lag-x:0px;--liquid-lag-y:0px;--spin-x:0px;--spin-y:0px;--spin-tilt:0deg;--spin-stretch-x:1;--spin-stretch-y:1;transform:translate3d(var(--liquid-x),var(--liquid-y),0) rotate(var(--liquid-tilt))!important;transition:none!important}
    .heroStage.spin{animation:none!important}
    .bubble3d,.bubbleGlass,.bubbleFx{transform:translate3d(calc(-50% + var(--liquid-lag-x) + var(--spin-x)),calc(-50% + var(--liquid-lag-y) + var(--spin-y)),-1px) rotateX(2deg) rotateY(-3deg) rotateZ(var(--spin-tilt)) scale(var(--liquid-stretch-x),var(--liquid-stretch-y)) scale(var(--spin-stretch-x),var(--spin-stretch-y))!important;transition:none!important}
    .bubbleGlass{transform:translate3d(calc(-50% + var(--liquid-lag-x) + var(--spin-x) * .72),calc(-50% + var(--liquid-lag-y) + var(--spin-y) * .72),72px) rotateX(2deg) rotateY(-3deg) rotateZ(calc(var(--spin-tilt) * .78)) scale(var(--liquid-stretch-x),var(--liquid-stretch-y)) scale(var(--spin-stretch-x),var(--spin-stretch-y))!important}
    .bubbleFx{transform:translate3d(calc(-50% + var(--liquid-lag-x) + var(--spin-x) * -1.05),calc(-50% + var(--liquid-lag-y) + var(--spin-y) * -1.05),58px) rotateX(2deg) rotateY(-3deg) rotateZ(calc(var(--spin-tilt) * -1.35)) scale(var(--liquid-stretch-x),var(--liquid-stretch-y)) scale(var(--spin-stretch-y),var(--spin-stretch-x))!important}
    .bubbleWaterline{transform:translate3d(calc(var(--liquid-lag-x) * -.22 + var(--spin-x) * -.30),calc(var(--liquid-lag-y) * -.18 + var(--spin-y) * -.30),44px) rotate(calc(-8deg - var(--liquid-tilt) * .55 - var(--spin-tilt) * .42))!important}
    .heroBubbleButton{transform:translate3d(calc(var(--liquid-lag-x) * -.34 + var(--spin-x) * .82),calc(var(--liquid-lag-y) * -.34 + var(--spin-y) * .82),0)}
    .heroBubbleButton:hover{transform:translate3d(calc(var(--liquid-lag-x) * -.34 + var(--spin-x) * .82),calc(var(--liquid-lag-y) * -.34 + var(--spin-y) * .82 - 4px),0) scale(1.035)}
    .heroStage.spin .heroBubbleButton{animation:none!important}
    @media(prefers-reduced-motion:reduce){.heroStage,.bubble3d,.bubbleCaustics,.bubbleWaterline,.bubbleGlass i{animation:none!important}}
    @media(max-width:820px){.hero{min-height:calc(100svh - 66px)!important;padding:76px 10px 18px!important}.heroStage{width:96vw!important;height:64vh!important;min-height:390px!important}.heroStage:before{width:min(520px,96vw,60vh)!important}.heroConfigBubble{left:2%;top:48%}.heroBubbleButton{width:clamp(82px,24vw,108px);font-size:12px}.heroPrice{font-size:22px}.heroConfigBubble span{font-size:10px}.heroStage #heroModel{transform:translateY(10px) scale(.86) rotate(var(--jigger-clock-rot,0deg))!important}}
    /* Match the fullscreen hero geometry in the normal hero too */
    .heroStage{
      height:min(62vh,650px)!important;
      min-height:min(520px,72svh)!important;
      align-self:center!important;
    }
    .heroStage:before{
      top:50%!important;
    }
    .heroStage #heroModel,
    .heroStage.lightOn #heroModel,
    .heroStage.lightOff #heroModel{
      --hero-spin-y:0px!important;
      transform:translateY(0) scale(.88) rotate(var(--jigger-clock-rot,0deg))!important;
      transform-origin:center center!important;
    }
    @media(max-width:820px){
      .heroStage{
        height:min(62vh,650px)!important;
        min-height:min(430px,68svh)!important;
      }
      .heroStage #heroModel,
      .heroStage.lightOn #heroModel,
      .heroStage.lightOff #heroModel{
        --hero-spin-y:0px!important;
        transform:translateY(0) scale(.86) rotate(var(--jigger-clock-rot,0deg))!important;
      }
    }

    /* Final hero refinement: preserve fullscreen geometry, reduce artificial blue mass */
    .heroStage #heroModel,
    .heroStage.lightOn #heroModel,
    .heroStage.lightOff #heroModel,
    .heroStage.is-pressing #heroModel,
    .heroStage.is-invite #heroModel{
      --hero-spin-y:0px!important;
      transform:translateY(0) scale(.88) rotate(var(--jigger-clock-rot,0deg))!important;
      transform-origin:center center!important;
    }
    .heroStage .bubbleBack{
      opacity:.34!important;
      background:
        radial-gradient(circle at 54% 56%,rgba(255,255,255,.10) 0 24%,rgba(175,220,232,.055) 44%,rgba(0,18,32,.13) 72%,rgba(0,0,0,.06) 100%),
        var(--mood-image)!important;
      background-size:155%!important;
      filter:blur(6px) saturate(1.04) contrast(1.03)!important;
    }
    .heroStage .bubbleCore{
      background:
        radial-gradient(circle at 38% 30%,rgba(255,255,255,.34) 0 9%,rgba(255,255,255,.11) 27%,rgba(255,255,255,.035) 46%,rgba(255,255,255,0) 68%),
        radial-gradient(circle at 58% 62%,rgba(150,220,238,.105) 0 24%,rgba(255,255,255,.055) 48%,rgba(5,16,28,.115) 77%,rgba(255,255,255,0) 96%)!important;
      box-shadow:
        inset 18px 22px 48px rgba(255,255,255,.13),
        inset -24px -32px 68px rgba(0,0,0,.14),
        inset 0 0 0 1px rgba(255,255,255,.24)!important;
      backdrop-filter:blur(3.4px) saturate(1.12) contrast(1.03)!important;
    }
    .heroStage .bubbleRim,
    .heroStage.lightOn .bubbleRim{
      background:
        radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 0 64%,rgba(255,255,255,.105) 72%,rgba(0,0,0,.15) 80%,rgba(255,255,255,.06) 88%,rgba(255,255,255,0) 95%),
        radial-gradient(ellipse at 29% 19%,rgba(255,255,255,.22),rgba(255,255,255,.055) 20%,rgba(255,255,255,0) 38%),
        radial-gradient(ellipse at 74% 78%,rgba(155,215,228,.075),rgba(255,255,255,0) 32%)!important;
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.18),
        inset -24px -28px 66px rgba(0,0,0,.20),
        inset 22px 18px 42px rgba(255,255,255,.08),
        0 22px 48px rgba(0,0,0,.16)!important;
      opacity:.62!important;
      filter:blur(.55px) saturate(.88) contrast(1.01)!important;
    }
    .heroStage .bubbleShell,
    .heroStage.lightOn .bubbleShell{
      opacity:.62!important;
      filter:
        drop-shadow(-10px -8px 16px rgba(238,248,250,.08))
        drop-shadow(18px 24px 44px rgba(0,12,32,.18))
        saturate(.88)
        contrast(1.01)
        brightness(.92)!important;
    }
    .heroStage .bubbleGlass{opacity:.56!important;mix-blend-mode:screen!important}
    .heroStage .bubbleGlass span{
      opacity:.22!important;
      background:
        radial-gradient(ellipse 26% 18% at 31% 16%,rgba(255,255,255,.24),rgba(255,255,255,.07) 38%,rgba(255,255,255,0) 74%),
        radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 64%,rgba(255,255,255,.075) 79%,rgba(255,255,255,0) 94%)!important;
      filter:blur(2.2px)!important;
    }
    .heroStage .bubbleGlass i{opacity:.08!important;filter:blur(11px)!important}
    .heroStage .bubbleSpecular{opacity:.115!important;filter:blur(2px)!important}
    .heroStage .bubbleFx{opacity:.13!important;filter:blur(.25px) saturate(1.02)!important}
    .heroStage.lightOn .bubbleFx{opacity:.18!important}
    .heroStage.lightOff .bubbleFx{opacity:.10!important}
    .heroStage.lightOff .bubbleGlass i,
    .heroStage.lightOff .bubbleSpecular{opacity:.07!important}
    .hero:after{
      background:
        radial-gradient(circle at var(--bubble-cx) var(--bubble-cy),rgba(255,255,255,.18) 0 6%,rgba(170,225,238,.09) 14%,rgba(255,255,255,.035) 25%,rgba(255,255,255,0) 42%),
        radial-gradient(ellipse at var(--bubble-cx) calc(var(--bubble-cy) + 23%),rgba(0,0,0,calc(.12 + var(--bubble-speed) * .045)) 0 9%,rgba(0,0,0,.045) 20%,rgba(0,0,0,0) 35%),
        conic-gradient(from calc(var(--liquid-tilt,0deg) * 1) at var(--bubble-cx) var(--bubble-cy),rgba(255,255,255,0),rgba(255,255,255,.055),rgba(150,220,235,.035),rgba(255,255,255,0),rgba(255,255,255,.045),rgba(255,255,255,0))!important;
      filter:blur(calc(11px - var(--bubble-speed) * 3px)) saturate(1.05)!important;
    }
    @media(max-width:820px){
      .heroStage #heroModel,
      .heroStage.lightOn #heroModel,
      .heroStage.lightOff #heroModel,
      .heroStage.is-pressing #heroModel,
      .heroStage.is-invite #heroModel{
        --hero-spin-y:0px!important;
        transform:translateY(0) scale(.86) rotate(var(--jigger-clock-rot,0deg))!important;
      }
    }

    /* Remove hero bubble floor shadow in every hero view */
    .heroStage:after,
    .heroStage.lightOn:after,
    .heroStage.lightOff:after,
    .heroStage.spin:after{
      display:none!important;
      opacity:0!important;
      background:none!important;
      box-shadow:none!important;
      filter:none!important;
    }
    .hero:after{
      background:
        radial-gradient(circle at var(--bubble-cx) var(--bubble-cy),rgba(255,255,255,.16) 0 6%,rgba(170,225,238,.075) 14%,rgba(255,255,255,.028) 25%,rgba(255,255,255,0) 42%),
        conic-gradient(from calc(var(--liquid-tilt,0deg) * 1) at var(--bubble-cx) var(--bubble-cy),rgba(255,255,255,0),rgba(255,255,255,.045),rgba(150,220,235,.026),rgba(255,255,255,0),rgba(255,255,255,.036),rgba(255,255,255,0))!important;
      box-shadow:none!important;
      backdrop-filter:none!important;
      -webkit-backdrop-filter:none!important;
    }

    /* No floor reflection: the hero bubble must float without a base shadow */
    .hero:after{
      display:none!important;
      opacity:0!important;
      background:none!important;
      box-shadow:none!important;
      filter:none!important;
      backdrop-filter:none!important;
      -webkit-backdrop-filter:none!important;
    }

    /* Hide the large GLB shell that renders as a lower reflection; CSS/glass layers keep the bubble visible */
    .heroStage .bubbleShellMain,
    .heroStage.lightOn .bubbleShellMain,
    .heroStage.lightOff .bubbleShellMain,
    .heroStage.spin .bubbleShellMain{
      display:none!important;
      opacity:0!important;
      visibility:hidden!important;
      pointer-events:none!important;
    }

    /* Blue transparent water inside the hero bubble: no background image visible through the volume */
    .heroStage .bubbleBack,
    .heroStage.lightOn .bubbleBack,
    .heroStage.lightOff .bubbleBack{
      opacity:.92!important;
      background:
        radial-gradient(circle at 36% 24%,rgba(235,252,255,.36) 0 8%,rgba(180,238,255,.18) 20%,rgba(255,255,255,0) 42%),
        radial-gradient(circle at 58% 52%,rgba(34,156,226,.48) 0 28%,rgba(28,120,202,.44) 54%,rgba(6,44,92,.34) 78%,rgba(2,16,40,.22) 100%),
        linear-gradient(145deg,rgba(145,226,255,.30),rgba(23,112,204,.42) 45%,rgba(5,35,82,.36))!important;
      background-size:100% 100%!important;
      background-position:center!important;
      filter:blur(2.6px) saturate(1.18) contrast(1.04)!important;
      box-shadow:
        inset 26px 24px 76px rgba(255,255,255,.18),
        inset -36px -42px 86px rgba(0,26,76,.36)!important;
    }
    .heroStage .bubbleCore,
    .heroStage.lightOn .bubbleCore,
    .heroStage.lightOff .bubbleCore{
      background:
        radial-gradient(circle at 34% 24%,rgba(255,255,255,.42) 0 7%,rgba(210,246,255,.20) 20%,rgba(255,255,255,0) 44%),
        radial-gradient(circle at 62% 62%,rgba(84,200,255,.38) 0 25%,rgba(24,132,218,.34) 52%,rgba(5,50,108,.29) 78%,rgba(255,255,255,0) 96%),
        linear-gradient(180deg,rgba(166,232,255,.28),rgba(38,145,222,.34) 48%,rgba(6,42,94,.28))!important;
      box-shadow:
        inset 18px 22px 54px rgba(255,255,255,.20),
        inset -28px -36px 78px rgba(0,31,82,.30),
        inset 0 0 0 1px rgba(230,250,255,.26)!important;
      backdrop-filter:none!important;
    }
    .heroStage .bubbleCaustics{
      opacity:.30!important;
      background:
        radial-gradient(ellipse at 36% 30%,rgba(255,255,255,.20),rgba(255,255,255,0) 34%),
        radial-gradient(ellipse at 66% 68%,rgba(105,220,255,.17),rgba(255,255,255,0) 44%)!important;
      mix-blend-mode:screen!important;
    }
    .heroStage .bubbleRim,
    .heroStage.lightOn .bubbleRim,
    .heroStage.lightOff .bubbleRim{
      opacity:.78!important;
      background:
        radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 0 62%,rgba(220,248,255,.17) 71%,rgba(0,45,110,.22) 80%,rgba(235,252,255,.10) 88%,rgba(255,255,255,0) 95%),
        radial-gradient(ellipse at 28% 19%,rgba(255,255,255,.28),rgba(180,235,255,.10) 22%,rgba(255,255,255,0) 40%)!important;
      box-shadow:
        inset 0 0 0 1px rgba(225,250,255,.25),
        inset -28px -32px 72px rgba(0,25,70,.28),
        inset 22px 20px 48px rgba(255,255,255,.13)!important;
      filter:blur(.45px) saturate(1.05) contrast(1.02)!important;
    }
    .heroStage .bubbleGlass span{
      opacity:.34!important;
    }
    .heroStage .bubbleFx{
      opacity:.24!important;
      mix-blend-mode:screen!important;
      filter:blur(.22px) saturate(1.18) brightness(1.02)!important;
    }
    .heroStage.lightOn .bubbleFx{opacity:.28!important}
    .heroStage.lightOff .bubbleFx{opacity:.22!important}

    /* Water reference tuning: clearer cyan water, less solid blue, more natural caustics */
    .heroStage .bubbleBack,
    .heroStage.lightOn .bubbleBack,
    .heroStage.lightOff .bubbleBack{
      opacity:.72!important;
      background:
        radial-gradient(ellipse 38% 24% at 28% 18%,rgba(242,255,255,.46) 0 13%,rgba(178,242,255,.20) 30%,rgba(255,255,255,0) 64%),
        radial-gradient(ellipse 46% 30% at 70% 30%,rgba(230,252,255,.34) 0 10%,rgba(120,220,250,.14) 31%,rgba(255,255,255,0) 68%),
        radial-gradient(ellipse 52% 36% at 42% 74%,rgba(238,255,255,.30) 0 12%,rgba(72,190,242,.16) 38%,rgba(255,255,255,0) 74%),
        linear-gradient(148deg,rgba(97,218,255,.34) 0%,rgba(0,133,215,.42) 34%,rgba(102,226,255,.24) 58%,rgba(0,94,188,.34) 100%)!important;
      filter:blur(3.2px) saturate(1.30) contrast(1.08) brightness(1.08)!important;
      box-shadow:
        inset 22px 24px 82px rgba(255,255,255,.22),
        inset -34px -42px 90px rgba(0,67,140,.22)!important;
    }
    .heroStage .bubbleCore,
    .heroStage.lightOn .bubbleCore,
    .heroStage.lightOff .bubbleCore{
      background:
        radial-gradient(ellipse 42% 24% at 30% 22%,rgba(255,255,255,.52) 0 9%,rgba(200,250,255,.22) 26%,rgba(255,255,255,0) 58%),
        radial-gradient(ellipse 58% 36% at 62% 44%,rgba(0,155,228,.30) 0 24%,rgba(32,184,240,.24) 48%,rgba(255,255,255,0) 78%),
        radial-gradient(ellipse 70% 30% at 42% 72%,rgba(230,255,255,.26) 0 13%,rgba(0,132,220,.18) 42%,rgba(255,255,255,0) 82%),
        linear-gradient(180deg,rgba(162,238,255,.22),rgba(0,150,226,.28) 48%,rgba(0,82,172,.22))!important;
      box-shadow:
        inset 18px 24px 60px rgba(255,255,255,.26),
        inset -28px -38px 84px rgba(0,70,150,.22),
        inset 0 0 0 1px rgba(230,255,255,.30)!important;
    }
    .heroStage .bubbleCaustics{
      opacity:.56!important;
      background:
        linear-gradient(118deg,rgba(255,255,255,0) 0 14%,rgba(230,255,255,.28) 21%,rgba(255,255,255,0) 34%,rgba(176,244,255,.20) 47%,rgba(255,255,255,0) 62%,rgba(245,255,255,.18) 75%,rgba(255,255,255,0) 100%),
        radial-gradient(ellipse 34% 18% at 30% 24%,rgba(255,255,255,.38),rgba(255,255,255,0) 62%),
        radial-gradient(ellipse 42% 20% at 68% 34%,rgba(195,250,255,.28),rgba(255,255,255,0) 66%),
        radial-gradient(ellipse 58% 18% at 45% 76%,rgba(245,255,255,.30),rgba(255,255,255,0) 70%)!important;
      filter:blur(7px) saturate(1.25) contrast(1.12)!important;
      mix-blend-mode:screen!important;
    }
    .heroStage .bubbleRim,
    .heroStage.lightOn .bubbleRim,
    .heroStage.lightOff .bubbleRim{
      opacity:.64!important;
      background:
        radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 0 63%,rgba(235,255,255,.20) 72%,rgba(0,116,196,.16) 81%,rgba(240,255,255,.12) 89%,rgba(255,255,255,0) 95%),
        radial-gradient(ellipse at 28% 19%,rgba(255,255,255,.34),rgba(178,244,255,.12) 24%,rgba(255,255,255,0) 42%)!important;
      box-shadow:
        inset 0 0 0 1px rgba(232,255,255,.26),
        inset -28px -34px 76px rgba(0,73,150,.18),
        inset 22px 20px 52px rgba(255,255,255,.16)!important;
    }
    .heroStage .bubbleGlass span{
      opacity:.42!important;
    }
    .heroStage .bubbleFx,
    .heroStage.lightOn .bubbleFx,
    .heroStage.lightOff .bubbleFx{
      opacity:.34!important;
      filter:blur(.16px) saturate(1.34) brightness(1.16)!important;
    }

    /* Stronger real-water caustic texture, still transparent */
    .heroStage .bubbleBack,
    .heroStage.lightOn .bubbleBack,
    .heroStage.lightOff .bubbleBack{
      opacity:.58!important;
      filter:blur(2.1px) saturate(1.38) contrast(1.16) brightness(1.14)!important;
    }
    .heroStage .bubbleCore,
    .heroStage.lightOn .bubbleCore,
    .heroStage.lightOff .bubbleCore{
      background:
        radial-gradient(ellipse 42% 24% at 30% 22%,rgba(255,255,255,.48) 0 8%,rgba(200,250,255,.18) 25%,rgba(255,255,255,0) 58%),
        radial-gradient(ellipse 58% 36% at 62% 44%,rgba(0,160,228,.22) 0 24%,rgba(32,190,244,.18) 48%,rgba(255,255,255,0) 78%),
        radial-gradient(ellipse 70% 30% at 42% 72%,rgba(235,255,255,.22) 0 13%,rgba(0,132,220,.13) 42%,rgba(255,255,255,0) 82%),
        linear-gradient(180deg,rgba(180,246,255,.16),rgba(0,154,226,.20) 48%,rgba(0,92,178,.16))!important;
    }
    .heroStage .bubbleBack:before,
    .heroStage .bubbleCore:before,
    .heroStage .bubbleCaustics:before{
      content:""!important;
      position:absolute!important;
      inset:3%!important;
      border-radius:50%!important;
      background:
        repeating-linear-gradient(112deg,rgba(255,255,255,0) 0 18px,rgba(236,255,255,.20) 24px,rgba(255,255,255,0) 38px),
        repeating-linear-gradient(24deg,rgba(255,255,255,0) 0 22px,rgba(80,220,255,.12) 30px,rgba(255,255,255,0) 48px),
        radial-gradient(ellipse 34% 16% at 24% 28%,rgba(255,255,255,.42),rgba(255,255,255,0) 62%),
        radial-gradient(ellipse 42% 18% at 72% 40%,rgba(205,252,255,.34),rgba(255,255,255,0) 66%),
        radial-gradient(ellipse 64% 14% at 48% 74%,rgba(248,255,255,.32),rgba(255,255,255,0) 70%)!important;
      mix-blend-mode:screen!important;
      opacity:.58!important;
      filter:blur(5px) contrast(1.24) saturate(1.2)!important;
      pointer-events:none!important;
    }
    .heroStage .bubbleBack:after,
    .heroStage .bubbleCore:after{
      content:""!important;
      position:absolute!important;
      inset:5%!important;
      border-radius:50%!important;
      background:
        conic-gradient(from 18deg at 48% 52%,rgba(255,255,255,0),rgba(255,255,255,.18),rgba(0,166,235,.08),rgba(255,255,255,0),rgba(240,255,255,.16),rgba(255,255,255,0)),
        radial-gradient(ellipse 55% 18% at 52% 88%,rgba(255,255,255,.34),rgba(0,180,235,.16) 34%,rgba(255,255,255,0) 72%)!important;
      mix-blend-mode:screen!important;
      opacity:.38!important;
      filter:blur(8px)!important;
      pointer-events:none!important;
    }
    .heroStage .bubbleCaustics{
      opacity:.72!important;
      filter:blur(4.8px) saturate(1.36) contrast(1.22)!important;
    }
    .heroStage .bubbleFx,
    .heroStage.lightOn .bubbleFx,
    .heroStage.lightOff .bubbleFx{
      opacity:.42!important;
      filter:blur(.10px) saturate(1.48) brightness(1.24)!important;
    }

    /* Remove straight caustic streaks: keep only soft water refraction */
    .heroStage .bubbleBack:before,
    .heroStage .bubbleCore:before,
    .heroStage .bubbleCaustics:before{
      background:
        radial-gradient(ellipse 34% 18% at 24% 28%,rgba(255,255,255,.32),rgba(180,244,255,.14) 34%,rgba(255,255,255,0) 68%),
        radial-gradient(ellipse 42% 20% at 72% 40%,rgba(205,252,255,.26),rgba(108,225,255,.12) 38%,rgba(255,255,255,0) 70%),
        radial-gradient(ellipse 64% 16% at 48% 74%,rgba(248,255,255,.24),rgba(100,220,255,.10) 36%,rgba(255,255,255,0) 72%)!important;
      opacity:.46!important;
      filter:blur(11px) contrast(1.08) saturate(1.12)!important;
      mix-blend-mode:screen!important;
    }
    .heroStage .bubbleBack:after,
    .heroStage .bubbleCore:after{
      background:
        radial-gradient(ellipse 42% 18% at 38% 42%,rgba(255,255,255,.20),rgba(140,232,255,.11) 36%,rgba(255,255,255,0) 72%),
        radial-gradient(ellipse 55% 18% at 52% 86%,rgba(255,255,255,.24),rgba(0,180,235,.10) 34%,rgba(255,255,255,0) 72%)!important;
      opacity:.30!important;
      filter:blur(13px)!important;
    }

    /* Calm natural water: remove electric/neon feeling */
    .heroStage .bubbleBack,
    .heroStage.lightOn .bubbleBack,
    .heroStage.lightOff .bubbleBack{
      opacity:.50!important;
      background:
        radial-gradient(ellipse 42% 26% at 30% 22%,rgba(245,255,255,.26) 0 10%,rgba(190,232,238,.12) 31%,rgba(255,255,255,0) 66%),
        radial-gradient(ellipse 58% 38% at 62% 48%,rgba(82,166,205,.20) 0 26%,rgba(46,128,178,.18) 54%,rgba(255,255,255,0) 82%),
        radial-gradient(ellipse 70% 32% at 45% 76%,rgba(235,250,250,.16) 0 14%,rgba(68,145,185,.10) 42%,rgba(255,255,255,0) 82%),
        linear-gradient(180deg,rgba(180,224,232,.13),rgba(42,132,184,.18) 50%,rgba(18,82,140,.15))!important;
      filter:blur(3.6px) saturate(.86) contrast(.96) brightness(1.03)!important;
      box-shadow:
        inset 22px 24px 82px rgba(255,255,255,.14),
        inset -34px -42px 90px rgba(8,42,88,.16)!important;
    }
    .heroStage .bubbleCore,
    .heroStage.lightOn .bubbleCore,
    .heroStage.lightOff .bubbleCore{
      background:
        radial-gradient(ellipse 42% 24% at 30% 22%,rgba(255,255,255,.28) 0 9%,rgba(210,238,242,.12) 26%,rgba(255,255,255,0) 60%),
        radial-gradient(ellipse 58% 38% at 62% 46%,rgba(70,155,200,.16) 0 26%,rgba(56,135,180,.13) 52%,rgba(255,255,255,0) 80%),
        linear-gradient(180deg,rgba(195,232,238,.12),rgba(54,138,188,.15) 50%,rgba(24,82,138,.12))!important;
      box-shadow:
        inset 18px 24px 60px rgba(255,255,255,.16),
        inset -28px -38px 84px rgba(10,52,105,.15),
        inset 0 0 0 1px rgba(230,250,252,.18)!important;
    }
    .heroStage .bubbleBack:before,
    .heroStage .bubbleCore:before,
    .heroStage .bubbleCaustics:before{
      opacity:.20!important;
      background:
        radial-gradient(ellipse 34% 18% at 24% 28%,rgba(255,255,255,.18),rgba(190,232,238,.08) 34%,rgba(255,255,255,0) 70%),
        radial-gradient(ellipse 42% 20% at 72% 40%,rgba(220,246,248,.14),rgba(142,202,218,.06) 38%,rgba(255,255,255,0) 72%),
        radial-gradient(ellipse 64% 16% at 48% 74%,rgba(255,255,255,.14),rgba(132,196,215,.05) 36%,rgba(255,255,255,0) 74%)!important;
      filter:blur(15px) contrast(.95) saturate(.85)!important;
    }
    .heroStage .bubbleBack:after,
    .heroStage .bubbleCore:after{
      opacity:.14!important;
      filter:blur(18px) saturate(.82)!important;
    }
    .heroStage .bubbleCaustics{
      opacity:.22!important;
      filter:blur(12px) saturate(.82) contrast(.92)!important;
    }
    .heroStage .bubbleFx,
    .heroStage.lightOn .bubbleFx,
    .heroStage.lightOff .bubbleFx{
      opacity:.14!important;
      filter:blur(.7px) saturate(.82) brightness(.98)!important;
    }
    .heroStage .bubbleGlass span{opacity:.26!important}
    .heroStage .bubbleSpecular{opacity:.10!important}

    /* Glass edge recovery: subtle dark outer rim so the bubble has real mass */
    .heroStage .bubbleRim,
    .heroStage.lightOn .bubbleRim,
    .heroStage.lightOff .bubbleRim{
      opacity:.88!important;
      background:
        radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 0 60%,rgba(255,255,255,.08) 68%,rgba(6,18,28,.22) 76%,rgba(0,4,10,.34) 83%,rgba(255,255,255,.10) 90%,rgba(255,255,255,0) 96%),
        radial-gradient(ellipse at 29% 18%,rgba(255,255,255,.30),rgba(210,240,245,.10) 22%,rgba(255,255,255,0) 42%)!important;
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.20),
        inset 0 0 18px rgba(255,255,255,.10),
        inset -24px -30px 72px rgba(0,10,24,.30),
        inset 22px 20px 52px rgba(255,255,255,.13),
        0 0 0 1px rgba(0,0,0,.18)!important;
      filter:blur(.35px) saturate(.92) contrast(1.06)!important;
      mix-blend-mode:normal!important;
    }
    .heroStage .bubbleGlass span{
      opacity:.34!important;
      background:
        radial-gradient(ellipse 26% 18% at 31% 16%,rgba(255,255,255,.30),rgba(255,255,255,.08) 38%,rgba(255,255,255,0) 74%),
        radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 60%,rgba(255,255,255,.08) 76%,rgba(4,12,22,.10) 84%,rgba(255,255,255,0) 94%)!important;
    }

    /* Remove configurator bubble from the hero only */
    #heroConfigBtn,
    .heroStage .heroConfigBubble{
      display:none!important;
      opacity:0!important;
      visibility:hidden!important;
      pointer-events:none!important;
    }

    /* Spin coupling: big bubble follows the Jigger */
    .heroStage{
      --spin-follow-rot:0deg;
    }
    .heroStage.spin .bubble3d,
    .heroStage.spin .bubbleGlass,
    .heroStage.spin .bubbleFx{
      transition:none!important;
    }
    .heroStage.spin .bubble3d{
      transform:translate3d(calc(-50% + var(--liquid-lag-x) + var(--spin-x)),calc(-50% + var(--liquid-lag-y) + var(--spin-y)),-1px) rotateX(2deg) rotateY(-3deg) rotateZ(calc(var(--spin-tilt) + var(--spin-follow-rot))) scale(var(--liquid-stretch-x),var(--liquid-stretch-y)) scale(var(--spin-stretch-x),var(--spin-stretch-y))!important;
    }
    .heroStage.spin .bubbleGlass{
      transform:translate3d(calc(-50% + var(--liquid-lag-x) + var(--spin-x) * .72),calc(-50% + var(--liquid-lag-y) + var(--spin-y) * .72),72px) rotateX(2deg) rotateY(-3deg) rotateZ(calc(var(--spin-tilt) * .78 + var(--spin-follow-rot))) scale(var(--liquid-stretch-x),var(--liquid-stretch-y)) scale(var(--spin-stretch-x),var(--spin-stretch-y))!important;
    }
    .heroStage.spin .bubbleFx{
      transform:translate3d(calc(-50% + var(--liquid-lag-x) + var(--spin-x) * -1.05),calc(-50% + var(--liquid-lag-y) + var(--spin-y) * -1.05),58px) rotateX(2deg) rotateY(-3deg) rotateZ(calc(var(--spin-tilt) * -1.35 + var(--spin-follow-rot))) scale(var(--liquid-stretch-x),var(--liquid-stretch-y)) scale(var(--spin-stretch-y),var(--spin-stretch-x))!important;
    }
    .heroStage.spin .bubbleWaterline{
      transform:translate3d(calc(var(--liquid-lag-x) * -.22 + var(--spin-x) * -.30),calc(var(--liquid-lag-y) * -.18 + var(--spin-y) * -.30),44px) rotate(calc(-8deg - var(--liquid-tilt) * .55 - var(--spin-tilt) * .42 - var(--spin-follow-rot)))!important;
    }

    /* Keep the main hero bubble physically round; depth comes from glass/rim, not geometry squash */
    .heroStage .bubble3d,
    .heroStage .bubbleGlass,
    .heroStage .bubbleFx{
      border-radius:50%!important;
    }
    .heroStage .bubble3d{
      transform:translate3d(calc(-50% + var(--liquid-lag-x) + var(--spin-x)),calc(-50% + var(--liquid-lag-y) + var(--spin-y)),-1px) rotateZ(var(--spin-tilt))!important;
    }
    .heroStage .bubbleGlass{
      transform:translate3d(calc(-50% + var(--liquid-lag-x) + var(--spin-x) * .72),calc(-50% + var(--liquid-lag-y) + var(--spin-y) * .72),72px) rotateZ(calc(var(--spin-tilt) * .78))!important;
    }
    .heroStage .bubbleFx{
      transform:translate3d(calc(-50% + var(--liquid-lag-x) + var(--spin-x) * -1.05),calc(-50% + var(--liquid-lag-y) + var(--spin-y) * -1.05),58px) rotateZ(calc(var(--spin-tilt) * -1.35))!important;
    }
    .heroStage.spin .bubble3d{
      transform:translate3d(calc(-50% + var(--liquid-lag-x) + var(--spin-x)),calc(-50% + var(--liquid-lag-y) + var(--spin-y)),-1px) rotateZ(calc(var(--spin-tilt) + var(--spin-follow-rot)))!important;
    }
    .heroStage.spin .bubbleGlass{
      transform:translate3d(calc(-50% + var(--liquid-lag-x) + var(--spin-x) * .72),calc(-50% + var(--liquid-lag-y) + var(--spin-y) * .72),72px) rotateZ(calc(var(--spin-tilt) * .78 + var(--spin-follow-rot)))!important;
    }
    .heroStage.spin .bubbleFx{
      transform:translate3d(calc(-50% + var(--liquid-lag-x) + var(--spin-x) * -1.05),calc(-50% + var(--liquid-lag-y) + var(--spin-y) * -1.05),58px) rotateZ(calc(var(--spin-tilt) * -1.35 + var(--spin-follow-rot)))!important;
    }
    .heroStage .bubbleShellMain,
    .heroStage.is-pressing .bubbleShell,
    .heroStage.is-pressing .bubble3d,
    .heroStage.is-pressing .bubbleFx{
      scale:1!important;
    }
    /* Reference bubble finish: optical glass, suspended microbubbles, internal Light On bloom */
    .heroStage .bubbleBack,
    .heroStage.lightOn .bubbleBack,
    .heroStage.lightOff .bubbleBack{
      opacity:.38!important;
      background:
        radial-gradient(circle at 49% 51%,rgba(3,8,18,.26) 0 17%,rgba(11,45,74,.18) 32%,rgba(60,180,220,.10) 52%,rgba(255,255,255,0) 74%),
        radial-gradient(ellipse 48% 34% at 28% 18%,rgba(210,250,255,.32),rgba(120,218,255,.10) 38%,rgba(255,255,255,0) 68%),
        radial-gradient(ellipse 52% 42% at 72% 76%,rgba(0,190,255,.18),rgba(0,72,155,.12) 42%,rgba(255,255,255,0) 72%)!important;
      filter:blur(2.8px) saturate(1.22) contrast(1.08) brightness(1.06)!important;
      box-shadow:
        inset 0 0 82px rgba(0,10,24,.34),
        inset 24px 18px 62px rgba(255,255,255,.16),
        inset -28px -32px 70px rgba(0,185,255,.13)!important;
    }
    .heroStage .bubbleCore,
    .heroStage.lightOn .bubbleCore,
    .heroStage.lightOff .bubbleCore{
      background:
        radial-gradient(circle at 50% 50%,rgba(0,0,0,.24) 0 14%,rgba(0,24,48,.16) 24%,rgba(0,134,200,.10) 42%,rgba(255,255,255,0) 66%),
        radial-gradient(circle at 49% 24%,rgba(255,255,255,.62) 0 .42%,rgba(255,255,255,0) .9%),
        radial-gradient(circle at 41% 38%,rgba(255,255,255,.58) 0 .34%,rgba(255,255,255,0) .82%),
        radial-gradient(circle at 57% 41%,rgba(185,245,255,.50) 0 .38%,rgba(255,255,255,0) .9%),
        radial-gradient(circle at 46% 54%,rgba(255,255,255,.46) 0 .30%,rgba(255,255,255,0) .76%),
        radial-gradient(circle at 62% 59%,rgba(180,240,255,.42) 0 .34%,rgba(255,255,255,0) .86%),
        radial-gradient(circle at 36% 62%,rgba(255,255,255,.40) 0 .27%,rgba(255,255,255,0) .75%),
        radial-gradient(circle at 54% 70%,rgba(255,255,255,.36) 0 .24%,rgba(255,255,255,0) .68%),
        radial-gradient(ellipse 38% 24% at 30% 18%,rgba(255,255,255,.34),rgba(140,232,255,.10) 40%,rgba(255,255,255,0) 74%),
        radial-gradient(ellipse 46% 30% at 72% 82%,rgba(0,210,255,.18),rgba(0,98,170,.10) 42%,rgba(255,255,255,0) 75%)!important;
      box-shadow:
        inset 0 0 0 1px rgba(235,252,255,.23),
        inset 0 0 46px rgba(255,255,255,.10),
        inset 20px 14px 62px rgba(255,255,255,.14),
        inset -34px -36px 82px rgba(0,8,22,.34)!important;
      backdrop-filter:blur(2.6px) saturate(1.26) contrast(1.07)!important;
    }
    .heroStage .bubbleBack:before,
    .heroStage .bubbleCore:before,
    .heroStage .bubbleCaustics:before{
      opacity:.54!important;
      background:
        radial-gradient(circle at 50% 50%,rgba(255,255,255,.42) 0 .30%,rgba(255,255,255,0) .78%),
        radial-gradient(circle at 54% 47%,rgba(150,238,255,.42) 0 .24%,rgba(255,255,255,0) .72%),
        radial-gradient(circle at 44% 45%,rgba(255,255,255,.36) 0 .22%,rgba(255,255,255,0) .66%),
        radial-gradient(circle at 59% 33%,rgba(255,255,255,.32) 0 .20%,rgba(255,255,255,0) .62%),
        radial-gradient(circle at 38% 72%,rgba(160,230,255,.30) 0 .18%,rgba(255,255,255,0) .58%),
        radial-gradient(ellipse 30% 14% at 34% 24%,rgba(255,255,255,.25),rgba(255,255,255,0) 66%),
        radial-gradient(ellipse 46% 14% at 61% 74%,rgba(0,206,255,.15),rgba(255,255,255,0) 70%)!important;
      filter:blur(3.2px) saturate(1.18) contrast(1.12)!important;
      mix-blend-mode:screen!important;
    }
    .heroStage .bubbleBack:after,
    .heroStage .bubbleCore:after{
      inset:7%!important;
      opacity:.46!important;
      background:
        radial-gradient(ellipse 28% 15% at 31% 18%,rgba(255,255,255,.46),rgba(255,255,255,.15) 38%,rgba(255,255,255,0) 72%),
        radial-gradient(ellipse 62% 18% at 52% 88%,rgba(255,255,255,.28),rgba(0,190,255,.18) 38%,rgba(255,255,255,0) 78%),
        conic-gradient(from 218deg at 50% 52%,rgba(255,255,255,0),rgba(255,255,255,.18),rgba(0,198,255,.12),rgba(255,255,255,0),rgba(255,255,255,.12),rgba(255,255,255,0))!important;
      filter:blur(8px) saturate(1.12)!important;
      mix-blend-mode:screen!important;
    }
    .heroStage .bubbleRim,
    .heroStage.lightOn .bubbleRim,
    .heroStage.lightOff .bubbleRim{
      opacity:.96!important;
      background:
        radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 0 54%,rgba(255,255,255,.06) 61%,rgba(20,88,130,.28) 70%,rgba(0,6,16,.48) 78%,rgba(120,228,255,.42) 84%,rgba(255,255,255,.35) 88%,rgba(255,255,255,0) 95%),
        radial-gradient(ellipse 38% 16% at 31% 15%,rgba(255,255,255,.68),rgba(190,245,255,.22) 38%,rgba(255,255,255,0) 76%),
        radial-gradient(ellipse 32% 10% at 72% 88%,rgba(255,255,255,.42),rgba(0,200,255,.20) 46%,rgba(255,255,255,0) 78%)!important;
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.34),
        inset 0 0 20px rgba(255,255,255,.18),
        inset -30px -34px 74px rgba(0,5,16,.46),
        inset 26px 22px 66px rgba(255,255,255,.18),
        0 0 0 1px rgba(0,0,0,.24)!important;
      filter:blur(.18px) saturate(1.12) contrast(1.12)!important;
      mix-blend-mode:normal!important;
    }
    .heroStage .bubbleSpecular{
      opacity:.74!important;
      background:
        radial-gradient(ellipse 30% 10% at 35% 10%,rgba(255,255,255,.96),rgba(255,255,255,.52) 34%,rgba(255,255,255,0) 70%),
        radial-gradient(ellipse 18% 8% at 68% 18%,rgba(255,255,255,.55),rgba(255,255,255,0) 70%),
        radial-gradient(ellipse 50% 12% at 52% 92%,rgba(255,255,255,.55),rgba(0,210,255,.18) 38%,rgba(255,255,255,0) 78%)!important;
      filter:blur(.42px) saturate(1.06)!important;
      mix-blend-mode:screen!important;
    }
    .heroStage .bubbleGlass span{
      opacity:.66!important;
      background:
        radial-gradient(ellipse 34% 13% at 35% 10%,rgba(255,255,255,.80),rgba(255,255,255,.30) 38%,rgba(255,255,255,0) 74%),
        radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 58%,rgba(140,232,255,.16) 72%,rgba(255,255,255,.24) 82%,rgba(0,10,22,.14) 88%,rgba(255,255,255,0) 95%)!important;
      filter:blur(.2px)!important;
    }
    .heroStage .bubbleGlass i{
      opacity:.44!important;
      background:linear-gradient(132deg,rgba(255,255,255,0) 16%,rgba(255,255,255,.30) 27%,rgba(255,255,255,0) 38%,rgba(0,214,255,.13) 58%,rgba(255,255,255,0) 72%)!important;
      filter:blur(1.6px)!important;
    }
    .heroStage .bubbleFx,
    .heroStage.lightOn .bubbleFx,
    .heroStage.lightOff .bubbleFx{
      opacity:.32!important;
      filter:blur(.18px) saturate(1.35) brightness(1.12)!important;
      mix-blend-mode:screen!important;
    }
    .heroStage.lightOn .bubbleCore:after{
      opacity:.72!important;
      background:
        radial-gradient(ellipse 42% 16% at 50% 91%,rgba(255,255,255,.78),rgba(150,238,255,.38) 32%,rgba(0,170,255,.12) 62%,rgba(255,255,255,0) 82%),
        radial-gradient(ellipse 12% 52% at 49% 76%,rgba(255,255,255,.36),rgba(160,240,255,.16) 38%,rgba(255,255,255,0) 72%),
        conic-gradient(from 250deg at 50% 92%,rgba(255,255,255,0),rgba(255,255,255,.38),rgba(150,238,255,.18),rgba(255,255,255,0),rgba(255,255,255,.30),rgba(255,255,255,0))!important;
      filter:blur(7px) saturate(1.22) brightness(1.22)!important;
    }
    .heroStage.lightOn .bubbleFx{opacity:.46!important;filter:blur(.12px) saturate(1.45) brightness(1.22)!important}
    .heroStage.lightOff .bubbleCore:after{opacity:.34!important}
    /* Remove the drawn inner circle while the Jigger spins; keep only the outer glass mass */
    .heroStage.spin .bubbleWaterline{
      opacity:0!important;
      visibility:hidden!important;
    }
    .heroStage.spin .bubbleRim,
    .heroStage.spin.lightOn .bubbleRim,
    .heroStage.spin.lightOff .bubbleRim{
      background:
        radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 0 72%,rgba(4,15,24,.10) 81%,rgba(0,4,10,.24) 88%,rgba(255,255,255,.05) 94%,rgba(255,255,255,0) 98%),
        radial-gradient(ellipse at 29% 18%,rgba(255,255,255,.20),rgba(210,240,245,.07) 20%,rgba(255,255,255,0) 42%)!important;
      box-shadow:
        inset -22px -28px 54px rgba(0,8,18,.24),
        inset 14px 16px 32px rgba(255,255,255,.08),
        0 0 28px rgba(0,0,0,.10)!important;
      opacity:.78!important;
    }
    .heroStage.spin .bubbleGlass span{
      background:
        radial-gradient(circle at 29% 20%,rgba(255,255,255,.26),rgba(255,255,255,0) 18%),
        radial-gradient(ellipse at 72% 78%,rgba(150,220,235,.06),rgba(255,255,255,0) 36%)!important;
      opacity:.32!important;
    }

    /* Final bubble optics: Light On gets a luminous glass rim; Light Off keeps the neutral water bubble */
    .heroStage .bubbleSpecular{
      opacity:.38!important;
      background:
        radial-gradient(ellipse 20% 7% at 46% 7%,rgba(255,255,255,.54),rgba(255,255,255,.16) 42%,rgba(255,255,255,0) 78%),
        radial-gradient(ellipse 46% 10% at 52% 93%,rgba(255,255,255,.42),rgba(120,230,255,.16) 40%,rgba(255,255,255,0) 80%)!important;
      filter:blur(.55px) saturate(.98)!important;
    }
    .heroStage .bubbleGlass span{
      opacity:.48!important;
      background:
        radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 58%,rgba(132,226,248,.12) 72%,rgba(255,255,255,.20) 83%,rgba(0,10,22,.12) 89%,rgba(255,255,255,0) 96%),
        radial-gradient(ellipse 50% 12% at 52% 92%,rgba(255,255,255,.36),rgba(0,210,255,.15) 42%,rgba(255,255,255,0) 78%)!important;
      filter:blur(.28px)!important;
    }
    .heroStage.lightOn .bubbleCore{
      background:
        radial-gradient(circle at 50% 50%,rgba(0,0,0,.18) 0 18%,rgba(0,25,48,.13) 34%,rgba(0,118,185,.07) 54%,rgba(255,255,255,0) 72%),
        radial-gradient(ellipse 92% 18% at 50% 8%,rgba(180,240,255,.13),rgba(255,255,255,0) 68%),
        radial-gradient(ellipse 80% 26% at 50% 92%,rgba(105,220,255,.08),rgba(255,255,255,0) 70%),
        linear-gradient(145deg,rgba(225,250,255,.06),rgba(36,172,230,.10) 44%,rgba(0,18,44,.12))!important;
      box-shadow:
        inset 22px 24px 58px rgba(255,255,255,.08),
        inset -34px -36px 82px rgba(0,8,22,.34),
        inset 0 0 0 1px rgba(210,248,255,.18)!important;
    }
    .heroStage.lightOn .bubbleCore:before,
    .heroStage.lightOn .bubbleCore:after{
      opacity:.18!important;
      background:
        radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 0 56%,rgba(120,230,255,.06) 70%,rgba(255,255,255,.08) 82%,rgba(255,255,255,0) 94%)!important;
      filter:blur(16px) saturate(1.02)!important;
      mix-blend-mode:screen!important;
    }
    .heroStage.lightOn .bubbleRim{
      opacity:1!important;
      background:
        radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 0 55%,rgba(8,44,70,.16) 67%,rgba(0,5,14,.40) 77%,rgba(86,216,255,.34) 83%,rgba(248,255,255,.28) 87%,rgba(255,255,255,0) 96%),
        radial-gradient(ellipse 72% 7% at 50% 5%,rgba(255,255,255,.92),rgba(214,252,255,.46) 34%,rgba(96,225,255,.22) 58%,rgba(255,255,255,0) 84%),
        radial-gradient(ellipse 26% 5% at 27% 10%,rgba(255,255,255,.44),rgba(150,238,255,.13) 45%,rgba(255,255,255,0) 80%),
        radial-gradient(ellipse 26% 5% at 73% 10%,rgba(255,255,255,.36),rgba(100,220,255,.11) 45%,rgba(255,255,255,0) 80%)!important;
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.36),
        inset 0 8px 18px rgba(232,254,255,.22),
        inset 0 -22px 56px rgba(0,24,48,.20),
        inset -30px -34px 74px rgba(0,5,16,.42),
        0 -3px 20px rgba(192,250,255,.26),
        0 0 0 1px rgba(0,0,0,.24)!important;
      filter:blur(.10px) saturate(1.10) contrast(1.08)!important;
    }
    .heroStage.lightOn .bubbleRim:before,
    .heroStage.lightOn .bubbleRim:after{
      content:"";
      position:absolute;
      inset:-1.2%;
      border-radius:50%;
      pointer-events:none;
      mix-blend-mode:screen;
    }
    .heroStage.lightOn .bubbleRim:before{
      background:
        radial-gradient(ellipse 72% 9% at 50% 4%,rgba(255,255,255,.52),rgba(184,246,255,.22) 42%,rgba(255,255,255,0) 78%),
        radial-gradient(ellipse 92% 24% at 50% 11%,rgba(75,210,255,.13),rgba(255,255,255,0) 72%);
      -webkit-mask-image:radial-gradient(circle at 50% 50%,transparent 0 64%,#000 72%,#000 88%,transparent 97%);
      mask-image:radial-gradient(circle at 50% 50%,transparent 0 64%,#000 72%,#000 88%,transparent 97%);
      opacity:.82;
      filter:blur(1.4px) saturate(1.12);
    }
    .heroStage.lightOn .bubbleRim:after{
      background:
        conic-gradient(from 206deg at 50% 50%,rgba(255,255,255,0),rgba(122,231,255,.10),rgba(255,255,255,.18),rgba(86,216,255,.08),rgba(255,255,255,0) 34%,rgba(255,255,255,0) 100%);
      -webkit-mask-image:radial-gradient(circle at 50% 50%,transparent 0 73%,#000 80%,transparent 93%);
      mask-image:radial-gradient(circle at 50% 50%,transparent 0 73%,#000 80%,transparent 93%);
      opacity:.46;
      filter:blur(2px) saturate(1.05);
    }
    .heroStage.lightOn .bubbleSpecular{
      opacity:.28!important;
      background:
        radial-gradient(ellipse 48% 6% at 50% 7%,rgba(255,255,255,.62),rgba(210,250,255,.24) 40%,rgba(255,255,255,0) 80%),
        radial-gradient(ellipse 42% 8% at 52% 93%,rgba(255,255,255,.18),rgba(120,230,255,.08) 44%,rgba(255,255,255,0) 80%)!important;
      filter:blur(.46px) saturate(1.02)!important;
    }
    .heroStage.lightOn .bubbleGlass span{
      opacity:.36!important;
      background:
        radial-gradient(ellipse 68% 8% at 50% 7%,rgba(255,255,255,.38),rgba(170,240,255,.14) 46%,rgba(255,255,255,0) 82%),
        radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 61%,rgba(132,226,248,.08) 74%,rgba(255,255,255,.12) 84%,rgba(0,10,22,.10) 90%,rgba(255,255,255,0) 96%)!important;
    }
    .heroStage.lightOn .bubbleFx{
      opacity:.26!important;
      filter:blur(.30px) saturate(1.12) brightness(1.02)!important;
    }
    .heroStage.lightOff .bubbleSpecular,
    .heroStage.lightOff .bubbleGlass span{
      opacity:.30!important;
    }
    /* Reference-style luminous corona: enabled only for Light On */
    .heroStage.lightOn .bubble3d{
      isolation:isolate!important;
      filter:
        drop-shadow(0 34px 56px rgba(0,0,0,.23))
        drop-shadow(0 0 18px rgba(218,248,255,.42))
        drop-shadow(0 0 52px rgba(83,190,255,.34))!important;
    }
    .heroStage.lightOn .bubble3d:before,
    .heroStage.lightOn .bubble3d:after{
      content:"";
      position:absolute;
      border-radius:50%;
      pointer-events:none;
      mix-blend-mode:screen;
    }
    .heroStage.lightOn .bubble3d:before{
      inset:-12%;
      z-index:0;
      background:
        repeating-conic-gradient(from -4deg at 50% 50%,rgba(180,226,255,0) 0deg,rgba(180,226,255,.28) .55deg,rgba(255,255,255,.18) .95deg,rgba(70,170,255,0) 2.6deg),
        radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 0 57%,rgba(140,220,255,.18) 65%,rgba(70,170,255,.34) 75%,rgba(255,255,255,.20) 83%,rgba(255,255,255,0) 97%);
      -webkit-mask-image:radial-gradient(circle at 50% 50%,transparent 0 58%,rgba(0,0,0,.24) 63%,#000 70%,rgba(0,0,0,.42) 87%,transparent 99%);
      mask-image:radial-gradient(circle at 50% 50%,transparent 0 58%,rgba(0,0,0,.24) 63%,#000 70%,rgba(0,0,0,.42) 87%,transparent 99%);
      opacity:.88;
      filter:blur(1.1px) saturate(1.36) brightness(1.12);
      transform:translateZ(-2px);
    }
    .heroStage.lightOn .bubble3d:after{
      inset:-.55%;
      z-index:5;
      background:
        radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 0 67.6%,rgba(150,224,255,.58) 70.2%,rgba(255,255,255,.96) 72.2%,rgba(116,210,255,.44) 74.6%,rgba(255,255,255,0) 78.2%),
        conic-gradient(from 12deg at 50% 50%,rgba(255,255,255,.72),rgba(86,190,255,.46),rgba(255,255,255,.92),rgba(80,176,255,.34),rgba(255,255,255,.68));
      -webkit-mask-image:radial-gradient(circle at 50% 50%,transparent 0 69%,#000 71.5%,#000 74.2%,transparent 77%);
      mask-image:radial-gradient(circle at 50% 50%,transparent 0 69%,#000 71.5%,#000 74.2%,transparent 77%);
      opacity:.96;
      filter:blur(.22px) saturate(1.25) brightness(1.18);
    }
    .heroStage.lightOn .bubbleRim{
      opacity:1!important;
      background:
        radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 0 56%,rgba(8,44,70,.12) 65%,rgba(0,5,14,.34) 75%,rgba(88,213,255,.46) 82%,rgba(255,255,255,.72) 86%,rgba(98,205,255,.30) 90%,rgba(255,255,255,0) 96%),
        radial-gradient(ellipse 36% 15% at 31% 18%,rgba(255,255,255,.50),rgba(195,246,255,.18) 44%,rgba(255,255,255,0) 78%)!important;
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.44),
        inset 0 0 18px rgba(224,252,255,.26),
        inset -32px -36px 76px rgba(0,5,18,.42),
        0 0 8px rgba(255,255,255,.52),
        0 0 26px rgba(140,224,255,.44),
        0 0 64px rgba(74,170,255,.28)!important;
      filter:blur(.08px) saturate(1.16) contrast(1.12)!important;
    }
    .heroStage.lightOn .bubbleRim:before{
      opacity:.88!important;
      background:
        radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 0 65%,rgba(120,216,255,.30) 72%,rgba(255,255,255,.32) 78%,rgba(255,255,255,0) 91%)!important;
      -webkit-mask-image:radial-gradient(circle at 50% 50%,transparent 0 65%,#000 72%,#000 84%,transparent 96%)!important;
      mask-image:radial-gradient(circle at 50% 50%,transparent 0 65%,#000 72%,#000 84%,transparent 96%)!important;
      filter:blur(1.8px) saturate(1.30)!important;
    }
    .heroStage.lightOn .bubbleRim:after{
      opacity:.72!important;
      background:
        repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,255,255,0) 0deg,rgba(170,226,255,.16) .55deg,rgba(255,255,255,.20) .9deg,rgba(60,160,255,0) 2.7deg)!important;
      -webkit-mask-image:radial-gradient(circle at 50% 50%,transparent 0 72%,#000 79%,transparent 92%)!important;
      mask-image:radial-gradient(circle at 50% 50%,transparent 0 72%,#000 79%,transparent 92%)!important;
      filter:blur(1.4px) saturate(1.18)!important;
    }
    .heroStage.lightOff .bubble3d:before,
    .heroStage.lightOff .bubble3d:after,
    .heroStage.lightOff .bubbleRim:before,
    .heroStage.lightOff .bubbleRim:after{
      content:none!important;
      display:none!important;
      opacity:0!important;
    }    /* Corona tuning: sharp edge, rays outside, no flat blue disk */
    .heroStage.lightOn .bubble3d:before{
      inset:-15%!important;
      background:
        repeating-conic-gradient(from -5deg at 50% 50%,rgba(255,255,255,0) 0deg,rgba(154,220,255,.22) .42deg,rgba(255,255,255,.18) .72deg,rgba(74,168,255,0) 2.5deg),
        radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 0 68%,rgba(96,196,255,.18) 73%,rgba(255,255,255,.13) 79%,rgba(76,160,255,.10) 88%,rgba(255,255,255,0) 99%)!important;
      -webkit-mask-image:radial-gradient(circle at 50% 50%,transparent 0 68%,rgba(0,0,0,.72) 72%,#000 80%,rgba(0,0,0,.32) 91%,transparent 99%)!important;
      mask-image:radial-gradient(circle at 50% 50%,transparent 0 68%,rgba(0,0,0,.72) 72%,#000 80%,rgba(0,0,0,.32) 91%,transparent 99%)!important;
      opacity:.68!important;
      filter:blur(.85px) saturate(1.28) brightness(1.08)!important;
    }
    .heroStage.lightOn .bubble3d:after{
      inset:-1.2%!important;
      background:
        radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 0 69.2%,rgba(92,205,255,.40) 70.4%,rgba(255,255,255,1) 71.2%,rgba(122,218,255,.50) 72.2%,rgba(255,255,255,0) 74.4%),
        conic-gradient(from 12deg at 50% 50%,rgba(255,255,255,.86),rgba(86,190,255,.52),rgba(255,255,255,.96),rgba(80,176,255,.38),rgba(255,255,255,.78))!important;
      -webkit-mask-image:radial-gradient(circle at 50% 50%,transparent 0 69.4%,#000 70.8%,#000 72.2%,transparent 74.1%)!important;
      mask-image:radial-gradient(circle at 50% 50%,transparent 0 69.4%,#000 70.8%,#000 72.2%,transparent 74.1%)!important;
      opacity:1!important;
      filter:blur(.12px) saturate(1.35) brightness(1.28)!important;
    }
    .heroStage.lightOn .bubbleRim{
      background:
        radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 0 61%,rgba(8,44,70,.08) 67%,rgba(0,5,14,.26) 75%,rgba(88,213,255,.36) 82%,rgba(255,255,255,.58) 86%,rgba(98,205,255,.22) 90%,rgba(255,255,255,0) 96%),
        radial-gradient(ellipse 34% 14% at 31% 18%,rgba(255,255,255,.48),rgba(195,246,255,.16) 44%,rgba(255,255,255,0) 78%)!important;
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.40),
        inset 0 0 16px rgba(224,252,255,.20),
        inset -32px -36px 76px rgba(0,5,18,.38),
        0 0 9px rgba(255,255,255,.60),
        0 0 28px rgba(140,224,255,.42),
        0 0 68px rgba(74,170,255,.24)!important;
    }
    /* Corona tuning 2: brighter reference-like white/blue rim and visible external rays */
    .heroStage.lightOn .bubble3d:before{
      inset:-18%!important;
      background:
        repeating-conic-gradient(from -6deg at 50% 50%,rgba(255,255,255,0) 0deg,rgba(128,207,255,.34) .36deg,rgba(255,255,255,.34) .66deg,rgba(86,176,255,.06) 1.25deg,rgba(70,170,255,0) 2.65deg),
        radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 0 67%,rgba(80,188,255,.20) 72%,rgba(255,255,255,.20) 78%,rgba(68,152,255,.14) 88%,rgba(255,255,255,0) 99%)!important;
      -webkit-mask-image:radial-gradient(circle at 50% 50%,transparent 0 67%,rgba(0,0,0,.62) 71%,#000 77%,rgba(0,0,0,.52) 88%,transparent 99%)!important;
      mask-image:radial-gradient(circle at 50% 50%,transparent 0 67%,rgba(0,0,0,.62) 71%,#000 77%,rgba(0,0,0,.52) 88%,transparent 99%)!important;
      opacity:.92!important;
      filter:blur(.45px) saturate(1.45) brightness(1.18)!important;
    }
    .heroStage.lightOn .bubble3d:after{
      background:
        radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 0 69.1%,rgba(116,216,255,.52) 70.1%,rgba(255,255,255,1) 71%,rgba(255,255,255,.86) 71.8%,rgba(95,202,255,.46) 72.7%,rgba(255,255,255,0) 74.8%),
        conic-gradient(from 12deg at 50% 50%,rgba(255,255,255,1),rgba(96,196,255,.70),rgba(255,255,255,1),rgba(76,172,255,.52),rgba(255,255,255,.92))!important;
      opacity:1!important;
      filter:blur(.06px) saturate(1.45) brightness(1.45)!important;
    }
    .heroStage.lightOn .bubbleRim{
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.48),
        inset 0 0 16px rgba(224,252,255,.22),
        inset -32px -36px 76px rgba(0,5,18,.38),
        0 0 10px rgba(255,255,255,.72),
        0 0 32px rgba(150,228,255,.58),
        0 0 86px rgba(70,160,255,.34)!important;
    }
    /* Corona tuning 3: no outer disk, only rim plus radial rays */
    .heroStage.lightOn .bubble3d:before{
      inset:-19%!important;
      background:
        repeating-conic-gradient(from -6deg at 50% 50%,rgba(255,255,255,0) 0deg,rgba(110,202,255,.30) .34deg,rgba(255,255,255,.28) .62deg,rgba(95,180,255,.05) 1.12deg,rgba(70,170,255,0) 2.7deg)!important;
      -webkit-mask-image:radial-gradient(circle at 50% 50%,transparent 0 57%,rgba(0,0,0,.12) 61%,#000 69%,rgba(0,0,0,.60) 82%,transparent 98%)!important;
      mask-image:radial-gradient(circle at 50% 50%,transparent 0 57%,rgba(0,0,0,.12) 61%,#000 69%,rgba(0,0,0,.60) 82%,transparent 98%)!important;
      opacity:.86!important;
      filter:blur(.36px) saturate(1.55) brightness(1.20)!important;
    }
    .heroStage.lightOn .bubble3d:after{
      box-shadow:
        0 0 8px rgba(255,255,255,.78),
        0 0 22px rgba(165,232,255,.62),
        0 0 58px rgba(72,166,255,.38)!important;
    }
    /* Final emitted-light aura: real outer edge ring, procedural rays, Light On only */
    .heroStage.lightOn .bubble3d{
      outline:2px solid rgba(246,253,255,.84)!important;
      outline-offset:-2px!important;
      box-shadow:
        0 0 7px rgba(255,255,255,.92),
        0 0 22px rgba(156,226,255,.76),
        0 0 58px rgba(70,160,255,.48),
        0 0 96px rgba(40,120,255,.22)!important;
      filter:drop-shadow(0 34px 56px rgba(0,0,0,.23))!important;
    }
    .heroStage.lightOn .bubble3d:before{
      inset:-22%!important;
      z-index:6!important;
      background:
        repeating-conic-gradient(from -5deg at 50% 50%,rgba(255,255,255,0) 0deg,rgba(94,190,255,.34) .28deg,rgba(255,255,255,.36) .54deg,rgba(92,178,255,.08) 1.15deg,rgba(255,255,255,0) 2.4deg),
        repeating-conic-gradient(from 1.2deg at 50% 50%,rgba(255,255,255,0) 0deg,rgba(116,206,255,.18) .18deg,rgba(255,255,255,.16) .34deg,rgba(255,255,255,0) 1.8deg)!important;
      -webkit-mask-image:radial-gradient(circle at 50% 50%,transparent 0 57%,rgba(0,0,0,.16) 60%,#000 66%,rgba(0,0,0,.72) 82%,transparent 99%)!important;
      mask-image:radial-gradient(circle at 50% 50%,transparent 0 57%,rgba(0,0,0,.16) 60%,#000 66%,rgba(0,0,0,.72) 82%,transparent 99%)!important;
      opacity:.96!important;
      filter:blur(.42px) saturate(1.65) brightness(1.28)!important;
      transform:none!important;
    }
    .heroStage.lightOn .bubble3d:after{
      inset:-.2%!important;
      z-index:7!important;
      background:radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 0 69.8%,rgba(124,218,255,.46) 70.4%,rgba(255,255,255,1) 70.9%,rgba(255,255,255,.92) 71.5%,rgba(95,202,255,.38) 72.2%,rgba(255,255,255,0) 73.3%)!important;
      -webkit-mask-image:radial-gradient(circle at 50% 50%,transparent 0 69.7%,#000 70.5%,#000 72.1%,transparent 73.4%)!important;
      mask-image:radial-gradient(circle at 50% 50%,transparent 0 69.7%,#000 70.5%,#000 72.1%,transparent 73.4%)!important;
      opacity:1!important;
      filter:blur(.04px) saturate(1.5) brightness(1.5)!important;
      box-shadow:none!important;
    }
    .heroStage.lightOn .bubbleRim{
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.28),
        inset 0 0 18px rgba(224,252,255,.18),
        inset -32px -36px 76px rgba(0,5,18,.36)!important;
    }
    .heroStage.lightOff .bubble3d{
      outline:none!important;
      box-shadow:none!important;
    }
    /* Corona tuning 4: fine fibre rays instead of thick bars */
    .heroStage.lightOn .bubble3d:before{
      inset:-18%!important;
      background:
        repeating-conic-gradient(from -5deg at 50% 50%,rgba(255,255,255,0) 0deg,rgba(120,208,255,.22) .10deg,rgba(255,255,255,.26) .18deg,rgba(88,176,255,.05) .34deg,rgba(255,255,255,0) 1.18deg),
        repeating-conic-gradient(from .7deg at 50% 50%,rgba(255,255,255,0) 0deg,rgba(82,178,255,.14) .07deg,rgba(255,255,255,.16) .13deg,rgba(255,255,255,0) .82deg)!important;
      -webkit-mask-image:radial-gradient(circle at 50% 50%,transparent 0 58%,rgba(0,0,0,.08) 61%,#000 67%,rgba(0,0,0,.66) 82%,transparent 98%)!important;
      mask-image:radial-gradient(circle at 50% 50%,transparent 0 58%,rgba(0,0,0,.08) 61%,#000 67%,rgba(0,0,0,.66) 82%,transparent 98%)!important;
      opacity:.82!important;
      filter:blur(.85px) saturate(1.48) brightness(1.18)!important;
    }
    /* Real lamp canvas layer: Light On aura can draw outside the bubble, Light Off stays clipped/neutral */
    .heroStage.lightOn .bubbleFx{
      width:calc(var(--bubble-size) * 1.55)!important;
      clip-path:none!important;
      z-index:8!important;
      opacity:.96!important;
      mix-blend-mode:screen!important;
      filter:blur(.10px) saturate(1.45) brightness(1.16)!important;
    }
    .heroStage.lightOff .bubbleFx{
      width:var(--bubble-size)!important;
      clip-path:circle(49.5% at 50% 50%)!important;
      z-index:2!important;
      opacity:.10!important;
      filter:blur(.25px) saturate(1.02)!important;
    }
    .heroStage.lightOn .bubble3d:before{
      opacity:.24!important;
    }    /* Canvas owns the emitted aura; CSS keeps only the clean bright rim */
    .heroStage.lightOn .bubble3d:before{
      opacity:0!important;
      display:none!important;
    }
    .heroStage.lightOn .bubbleFx{
      opacity:1!important;
      filter:blur(.02px) saturate(1.75) brightness(1.38)!important;
    }
    .heroStage.lightOn .bubble3d{
      outline:2.5px solid rgba(250,255,255,.90)!important;
      box-shadow:
        0 0 10px rgba(255,255,255,.96),
        0 0 30px rgba(126,218,255,.86),
        0 0 78px rgba(52,150,255,.58),
        0 0 120px rgba(30,105,255,.28)!important;
    }
    .heroStage.lightOn .bubble3d:after{
      opacity:1!important;
      filter:blur(.02px) saturate(1.58) brightness(1.48)!important;
    }    /* Reduce diffuse Light On halo, keep the fine emitted light lines */
    .heroStage.lightOn .bubbleFx{
      filter:blur(.02px) saturate(1.55) brightness(1.16)!important;
    }
    .heroStage.lightOn .bubble3d{
      box-shadow:
        0 0 7px rgba(255,255,255,.78),
        0 0 20px rgba(126,218,255,.54),
        0 0 46px rgba(52,150,255,.32),
        0 0 78px rgba(30,105,255,.14)!important;
    }
    .heroStage.lightOn .bubbleRim:before{
      opacity:.42!important;
    }    /* Halo reduction pass 2: keep rays, cut diffuse fog */
    .heroStage.lightOn .bubbleFx{
      filter:blur(0) saturate(1.42) brightness(1.06)!important;
    }
    .heroStage.lightOn .bubble3d{
      box-shadow:
        0 0 4px rgba(255,255,255,.54),
        0 0 11px rgba(126,218,255,.25),
        0 0 22px rgba(52,150,255,.11),
        0 0 38px rgba(30,105,255,.035)!important;
    }
    /* Rim vibration: the luminous outer edge follows the bubble's liquid movement */
    .heroStage .bubbleRim,
    .heroStage.lightOn .bubbleRim,
    .heroStage.lightOff .bubbleRim{
      transform:translate3d(calc(var(--liquid-lag-x) * .22 + var(--spin-x) * .22),calc(var(--liquid-lag-y) * .22 + var(--spin-y) * .22),34px) rotateZ(calc(var(--spin-tilt) * .16))!important;
      transition:none!important;
    }
    .heroStage.spin .bubbleRim,
    .heroStage.spin.lightOn .bubbleRim,
    .heroStage.spin.lightOff .bubbleRim{
      transform:translate3d(calc(var(--liquid-lag-x) * .28 + var(--spin-x) * .28),calc(var(--liquid-lag-y) * .28 + var(--spin-y) * .28),34px) rotateZ(calc(var(--spin-tilt) * .18 + var(--spin-follow-rot) * .10))!important;
      transition:none!important;
    }
    /* True proportional hero reduction: restore internal geometry, scale the whole stage only */
    .heroStage{
      --hero-global-scale:.79;
      --bubble-size:min(520px,96vw,60vh)!important;
      height:min(62vh,650px)!important;
      min-height:min(520px,72svh)!important;
      transform:translate3d(var(--liquid-x),var(--liquid-y),0) rotate(var(--liquid-tilt)) scale(var(--hero-global-scale))!important;
      transform-origin:center center!important;
    }
    .heroStage:before{
      width:min(520px,70vw,65vh)!important;
      top:50%!important;
    }
    .heroBubbleButton{
      width:clamp(92px,12vw,128px)!important;
      height:auto!important;
      min-height:0!important;
      aspect-ratio:1!important;
      font-size:15px!important;
    }
    .heroPrice{font-size:26px!important}
    .heroBuyWord{font-size:14px!important}
    @media(max-width:820px){
      .heroStage{
        height:min(62vh,650px)!important;
        min-height:min(430px,68svh)!important;
        transform:translate3d(var(--liquid-x),var(--liquid-y),0) rotate(var(--liquid-tilt)) scale(var(--hero-global-scale))!important;
      }
      .heroStage:before{
        width:min(520px,96vw,60vh)!important;
        top:50%!important;
      }
      .heroBubbleButton{
        width:clamp(82px,24vw,108px)!important;
        height:auto!important;
        min-height:0!important;
        aspect-ratio:1!important;
        font-size:12px!important;
      }
      .heroPrice{font-size:22px!important}
    }    /* Subtle ink outline pass: black 3D contour without changing inner bubble background */
    .heroStage .bubble3d,
    .heroStage.lightOff .bubble3d{
      outline:1.4px solid rgba(0,0,0,.46)!important;
      filter:
        drop-shadow(0 0 1.4px rgba(0,0,0,.72))
        drop-shadow(2px 3px 0 rgba(0,0,0,.16))
        drop-shadow(0 18px 34px rgba(0,0,0,.22))
        saturate(1.05) contrast(1.06)!important;
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.18),
        inset -16px -18px 36px rgba(0,0,0,.16),
        0 0 0 1px rgba(0,0,0,.28)!important;
    }
    .heroStage.lightOn .bubble3d{
      outline:1.4px solid rgba(0,0,0,.42)!important;
      filter:
        drop-shadow(0 0 1.4px rgba(0,0,0,.70))
        drop-shadow(2px 3px 0 rgba(0,0,0,.15))
        drop-shadow(0 18px 34px rgba(0,0,0,.22))
        saturate(1.06) contrast(1.07)!important;
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.20),
        inset -16px -18px 36px rgba(0,0,0,.14),
        0 0 0 1px rgba(0,0,0,.26),
        0 0 4px rgba(255,255,255,.54),
        0 0 11px rgba(126,218,255,.25),
        0 0 22px rgba(52,150,255,.11),
        0 0 38px rgba(30,105,255,.035)!important;
    }
    .heroStage .bubbleRim,
    .heroStage.lightOn .bubbleRim,
    .heroStage.lightOff .bubbleRim{
      box-shadow:
        inset 0 0 0 1px rgba(0,0,0,.34),
        inset 0 0 0 2px rgba(255,255,255,.18),
        inset -18px -22px 42px rgba(0,0,0,.18),
        0 0 0 1px rgba(0,0,0,.22)!important;
    }
    .heroStage.lightOn .bubbleRim{
      box-shadow:
        inset 0 0 0 1px rgba(0,0,0,.28),
        inset 0 0 0 2px rgba(255,255,255,.22),
        inset -18px -22px 42px rgba(0,0,0,.16),
        0 0 0 1px rgba(0,0,0,.18),
        0 0 5px rgba(238,252,255,.38),
        0 0 12px rgba(124,224,255,.22),
        0 0 22px rgba(70,176,255,.10)!important;
    }
    /* Light On uses the clean Light Off bubble base, with cone-colored inner light washes */
    .heroStage.lightOn .bubbleCore{
      background:
        radial-gradient(ellipse 42% 24% at 31% 20%,rgba(var(--cone-up-rgb,125,230,255),.18),rgba(var(--cone-up-rgb,125,230,255),.075) 34%,rgba(255,255,255,0) 68%),
        radial-gradient(ellipse 58% 28% at 70% 78%,rgba(var(--cone-down-rgb,125,230,255),.16),rgba(var(--cone-down-rgb,125,230,255),.065) 38%,rgba(255,255,255,0) 74%),
        radial-gradient(circle at 50% 50%,rgba(0,0,0,.24) 0 14%,rgba(0,24,48,.16) 24%,rgba(0,134,200,.07) 42%,rgba(255,255,255,0) 66%),
        radial-gradient(circle at 49% 24%,rgba(255,255,255,.50) 0 .42%,rgba(255,255,255,0) .9%),
        radial-gradient(circle at 41% 38%,rgba(255,255,255,.42) 0 .34%,rgba(255,255,255,0) .82%),
        linear-gradient(180deg,rgba(20,54,82,.12),rgba(8,28,52,.14) 52%,rgba(4,18,40,.16))!important;
      box-shadow:
        inset 22px 24px 58px rgba(255,255,255,.075),
        inset -34px -36px 82px rgba(0,8,22,.34),
        inset 0 0 0 1px rgba(210,248,255,.16)!important;
    }
    .heroStage.lightOn .bubbleCore:before{
      opacity:.42!important;
      background:radial-gradient(ellipse 44% 22% at 30% 19%,rgba(var(--cone-up-rgb,125,230,255),.28),rgba(var(--cone-up-rgb,125,230,255),.10) 36%,rgba(255,255,255,0) 76%)!important;
      filter:blur(17px) saturate(1.08)!important;
      mix-blend-mode:screen!important;
    }
    .heroStage.lightOn .bubbleCore:after{
      opacity:.36!important;
      background:radial-gradient(ellipse 54% 24% at 70% 78%,rgba(var(--cone-down-rgb,125,230,255),.25),rgba(var(--cone-down-rgb,125,230,255),.09) 38%,rgba(255,255,255,0) 78%)!important;
      filter:blur(18px) saturate(1.04)!important;
      mix-blend-mode:screen!important;
    }
    .heroStage.lightOn .bubbleBack{
      opacity:.38!important;
      filter:blur(3.2px) saturate(1.10) contrast(1.08) brightness(.98)!important;
    }

    /* Light Off keeps the same cone-colored inner washes without adding lamp aura */
    .heroStage.lightOff .bubbleCore:before{
      opacity:.30!important;
      background:radial-gradient(ellipse 44% 22% at 30% 19%,rgba(var(--cone-up-rgb,125,230,255),.24),rgba(var(--cone-up-rgb,125,230,255),.09) 36%,rgba(255,255,255,0) 76%)!important;
      filter:blur(17px) saturate(1.06)!important;
      mix-blend-mode:screen!important;
    }
    .heroStage.lightOff .bubbleCore:after{
      opacity:.28!important;
      background:radial-gradient(ellipse 54% 24% at 70% 78%,rgba(var(--cone-down-rgb,125,230,255),.23),rgba(var(--cone-down-rgb,125,230,255),.085) 38%,rgba(255,255,255,0) 78%)!important;
      filter:blur(18px) saturate(1.03)!important;
      mix-blend-mode:screen!important;
    }    .heroStage.lightOn .bubbleCaustics{
      opacity:.14!important;
      filter:blur(14px) saturate(.92)!important;
    }
  
    /* Cone-colored glass washes: only the marked top-left and bottom-right bubble zones */
    .heroStage.lightOn .bubbleBack,
    .heroStage.lightOff .bubbleBack{
      background:
        radial-gradient(circle at 49% 51%,rgba(3,8,18,.26) 0 17%,rgba(11,45,74,.18) 32%,rgba(60,180,220,.10) 52%,rgba(255,255,255,0) 74%),
        radial-gradient(ellipse 48% 34% at 28% 18%,rgba(var(--cone-up-rgb,125,230,255),.34),rgba(var(--cone-up-rgb,125,230,255),.12) 38%,rgba(255,255,255,0) 68%),
        radial-gradient(ellipse 52% 42% at 72% 76%,rgba(var(--cone-down-rgb,125,230,255),.24),rgba(var(--cone-down-rgb,125,230,255),.12) 42%,rgba(255,255,255,0) 72%)!important;
    }
    .heroStage.lightOn .bubbleCore,
    .heroStage.lightOff .bubbleCore{
      background:
        radial-gradient(ellipse 42% 24% at 31% 20%,rgba(var(--cone-up-rgb,125,230,255),.28),rgba(var(--cone-up-rgb,125,230,255),.11) 36%,rgba(255,255,255,0) 72%),
        radial-gradient(ellipse 58% 28% at 70% 78%,rgba(var(--cone-down-rgb,125,230,255),.25),rgba(var(--cone-down-rgb,125,230,255),.10) 40%,rgba(255,255,255,0) 76%),
        radial-gradient(circle at 50% 50%,rgba(0,0,0,.24) 0 14%,rgba(0,24,48,.16) 24%,rgba(0,134,200,.07) 42%,rgba(255,255,255,0) 66%),
        radial-gradient(circle at 49% 24%,rgba(255,255,255,.38) 0 .42%,rgba(255,255,255,0) .9%),
        radial-gradient(circle at 41% 38%,rgba(255,255,255,.36) 0 .34%,rgba(255,255,255,0) .82%),
        linear-gradient(180deg,rgba(20,54,82,.12),rgba(8,28,52,.14) 52%,rgba(4,18,40,.16))!important;
    }
    /* Remove the white spot inside the cone-colored wash; keep only cone-tinted glass */
    .heroStage.lightOn .bubbleSpecular,
    .heroStage.lightOff .bubbleSpecular{
      background:
        radial-gradient(ellipse 30% 10% at 35% 10%,rgba(var(--cone-up-rgb,125,230,255),.32),rgba(var(--cone-up-rgb,125,230,255),.12) 34%,rgba(255,255,255,0) 70%),
        radial-gradient(ellipse 18% 8% at 68% 18%,rgba(var(--cone-up-rgb,125,230,255),.18),rgba(255,255,255,0) 70%),
        radial-gradient(ellipse 50% 12% at 52% 92%,rgba(var(--cone-down-rgb,125,230,255),.22),rgba(var(--cone-down-rgb,125,230,255),.12) 38%,rgba(255,255,255,0) 78%)!important;
    }
    
    /* Attenuate the fixed inner glass spots at the source; keep subtle cone-tinted water only */
    .heroStage.lightOn .bubbleBack,
    .heroStage.lightOff .bubbleBack{
      background:
        radial-gradient(circle at 49% 51%,rgba(3,8,18,.26) 0 17%,rgba(11,45,74,.18) 32%,rgba(60,180,220,.08) 52%,rgba(255,255,255,0) 74%),
        radial-gradient(ellipse 48% 34% at 28% 18%,rgba(var(--cone-up-rgb,125,230,255),.16),rgba(var(--cone-up-rgb,125,230,255),.045) 40%,rgba(255,255,255,0) 70%),
        radial-gradient(ellipse 52% 42% at 72% 76%,rgba(var(--cone-down-rgb,125,230,255),.13),rgba(var(--cone-down-rgb,125,230,255),.040) 44%,rgba(255,255,255,0) 74%)!important;
    }
    .heroStage.lightOn .bubbleCore,
    .heroStage.lightOff .bubbleCore{
      background:
        radial-gradient(ellipse 42% 24% at 31% 20%,rgba(var(--cone-up-rgb,125,230,255),.13),rgba(var(--cone-up-rgb,125,230,255),.040) 38%,rgba(255,255,255,0) 74%),
        radial-gradient(ellipse 58% 28% at 70% 78%,rgba(var(--cone-down-rgb,125,230,255),.12),rgba(var(--cone-down-rgb,125,230,255),.038) 42%,rgba(255,255,255,0) 78%),
        radial-gradient(circle at 50% 50%,rgba(0,0,0,.24) 0 14%,rgba(0,24,48,.16) 24%,rgba(0,134,200,.055) 42%,rgba(255,255,255,0) 66%),
        linear-gradient(180deg,rgba(20,54,82,.12),rgba(8,28,52,.14) 52%,rgba(4,18,40,.16))!important;
    }
    .heroStage.lightOn .bubbleCore:before,
    .heroStage.lightOff .bubbleCore:before{
      opacity:.12!important;
      background:radial-gradient(ellipse 44% 22% at 30% 19%,rgba(var(--cone-up-rgb,125,230,255),.18),rgba(var(--cone-up-rgb,125,230,255),.045) 38%,rgba(255,255,255,0) 78%)!important;
    }
    .heroStage.lightOn .bubbleCore:after,
    .heroStage.lightOff .bubbleCore:after{
      opacity:.10!important;
      background:radial-gradient(ellipse 54% 24% at 70% 78%,rgba(var(--cone-down-rgb,125,230,255),.16),rgba(var(--cone-down-rgb,125,230,255),.040) 40%,rgba(255,255,255,0) 80%)!important;
    }
    .heroStage.lightOn .bubbleSpecular,
    .heroStage.lightOff .bubbleSpecular{
      opacity:.18!important;
      background:
        radial-gradient(ellipse 30% 10% at 35% 10%,rgba(var(--cone-up-rgb,125,230,255),.18),rgba(var(--cone-up-rgb,125,230,255),.045) 36%,rgba(255,255,255,0) 72%),
        radial-gradient(ellipse 50% 12% at 52% 92%,rgba(var(--cone-down-rgb,125,230,255),.14),rgba(var(--cone-down-rgb,125,230,255),.040) 42%,rgba(255,255,255,0) 80%)!important;
    }
    /* Light Off uses the same cone-color glass rule as Light On, without lamp aura/rays */
    .heroStage.lightOff .bubbleBack{
      background:
        radial-gradient(circle at 49% 51%,rgba(3,8,18,.26) 0 17%,rgba(11,45,74,.18) 32%,rgba(60,180,220,.10) 52%,rgba(255,255,255,0) 74%),
        radial-gradient(ellipse 48% 34% at 28% 18%,rgba(var(--cone-up-rgb,125,230,255),.34),rgba(var(--cone-up-rgb,125,230,255),.12) 38%,rgba(255,255,255,0) 68%),
        radial-gradient(ellipse 52% 42% at 72% 76%,rgba(var(--cone-down-rgb,125,230,255),.24),rgba(var(--cone-down-rgb,125,230,255),.12) 42%,rgba(255,255,255,0) 72%)!important;
    }
    .heroStage.lightOff .bubbleCore{
      background:
        radial-gradient(ellipse 42% 24% at 31% 20%,rgba(var(--cone-up-rgb,125,230,255),.30),rgba(var(--cone-up-rgb,125,230,255),.12) 36%,rgba(255,255,255,0) 72%),
        radial-gradient(ellipse 58% 28% at 70% 78%,rgba(var(--cone-down-rgb,125,230,255),.25),rgba(var(--cone-down-rgb,125,230,255),.10) 40%,rgba(255,255,255,0) 76%),
        radial-gradient(circle at 50% 50%,rgba(0,0,0,.24) 0 14%,rgba(0,24,48,.16) 24%,rgba(0,134,200,.07) 42%,rgba(255,255,255,0) 66%),
        linear-gradient(180deg,rgba(20,54,82,.12),rgba(8,28,52,.14) 52%,rgba(4,18,40,.16))!important;
    }
    .heroStage.lightOff .bubbleCore:before{
      opacity:.42!important;
      background:radial-gradient(ellipse 44% 22% at 30% 19%,rgba(var(--cone-up-rgb,125,230,255),.28),rgba(var(--cone-up-rgb,125,230,255),.10) 36%,rgba(255,255,255,0) 76%)!important;
      filter:blur(17px) saturate(1.08)!important;
      mix-blend-mode:screen!important;
    }
    .heroStage.lightOff .bubbleCore:after{
      opacity:.36!important;
      background:radial-gradient(ellipse 54% 24% at 70% 78%,rgba(var(--cone-down-rgb,125,230,255),.25),rgba(var(--cone-down-rgb,125,230,255),.09) 38%,rgba(255,255,255,0) 78%)!important;
      filter:blur(18px) saturate(1.04)!important;
      mix-blend-mode:screen!important;
    }
    .heroStage.lightOff .bubbleSpecular{
      opacity:.32!important;
      background:
        radial-gradient(ellipse 30% 10% at 35% 10%,rgba(var(--cone-up-rgb,125,230,255),.32),rgba(var(--cone-up-rgb,125,230,255),.12) 34%,rgba(255,255,255,0) 70%),
        radial-gradient(ellipse 18% 8% at 68% 18%,rgba(var(--cone-up-rgb,125,230,255),.18),rgba(255,255,255,0) 70%),
        radial-gradient(ellipse 50% 12% at 52% 92%,rgba(var(--cone-down-rgb,125,230,255),.22),rgba(var(--cone-down-rgb,125,230,255),.12) 38%,rgba(255,255,255,0) 78%)!important;
    }
    /* Unified cone-color glass rule for both Light On and Light Off */
    .heroStage.lightOn .bubbleBack,
    .heroStage.lightOff .bubbleBack{
      background:
        radial-gradient(circle at 49% 51%,rgba(3,8,18,.26) 0 17%,rgba(11,45,74,.18) 32%,rgba(60,180,220,.10) 52%,rgba(255,255,255,0) 74%),
        radial-gradient(ellipse 48% 34% at 28% 18%,rgba(var(--cone-up-rgb,125,230,255),.34),rgba(var(--cone-up-rgb,125,230,255),.12) 38%,rgba(255,255,255,0) 68%),
        radial-gradient(ellipse 52% 42% at 72% 76%,rgba(var(--cone-down-rgb,125,230,255),.24),rgba(var(--cone-down-rgb,125,230,255),.12) 42%,rgba(255,255,255,0) 72%)!important;
    }
    .heroStage.lightOn .bubbleCore,
    .heroStage.lightOff .bubbleCore{
      background:
        radial-gradient(ellipse 42% 24% at 31% 20%,rgba(var(--cone-up-rgb,125,230,255),.30),rgba(var(--cone-up-rgb,125,230,255),.12) 36%,rgba(255,255,255,0) 72%),
        radial-gradient(ellipse 58% 28% at 70% 78%,rgba(var(--cone-down-rgb,125,230,255),.25),rgba(var(--cone-down-rgb,125,230,255),.10) 40%,rgba(255,255,255,0) 76%),
        radial-gradient(circle at 50% 50%,rgba(0,0,0,.24) 0 14%,rgba(0,24,48,.16) 24%,rgba(0,134,200,.07) 42%,rgba(255,255,255,0) 66%),
        linear-gradient(180deg,rgba(20,54,82,.12),rgba(8,28,52,.14) 52%,rgba(4,18,40,.16))!important;
    }
    .heroStage.lightOn .bubbleCore:before,
    .heroStage.lightOff .bubbleCore:before{
      opacity:.42!important;
      background:radial-gradient(ellipse 44% 22% at 30% 19%,rgba(var(--cone-up-rgb,125,230,255),.28),rgba(var(--cone-up-rgb,125,230,255),.10) 36%,rgba(255,255,255,0) 76%)!important;
      filter:blur(17px) saturate(1.08)!important;
      mix-blend-mode:screen!important;
    }
    .heroStage.lightOn .bubbleCore:after,
    .heroStage.lightOff .bubbleCore:after{
      opacity:.36!important;
      background:radial-gradient(ellipse 54% 24% at 70% 78%,rgba(var(--cone-down-rgb,125,230,255),.25),rgba(var(--cone-down-rgb,125,230,255),.09) 38%,rgba(255,255,255,0) 78%)!important;
      filter:blur(18px) saturate(1.04)!important;
      mix-blend-mode:screen!important;
    }
    .heroStage.lightOn .bubbleSpecular,
    .heroStage.lightOff .bubbleSpecular{
      opacity:.32!important;
      background:
        radial-gradient(ellipse 30% 10% at 35% 10%,rgba(var(--cone-up-rgb,125,230,255),.32),rgba(var(--cone-up-rgb,125,230,255),.12) 34%,rgba(255,255,255,0) 70%),
        radial-gradient(ellipse 18% 8% at 68% 18%,rgba(var(--cone-up-rgb,125,230,255),.18),rgba(255,255,255,0) 70%),
        radial-gradient(ellipse 50% 12% at 52% 92%,rgba(var(--cone-down-rgb,125,230,255),.22),rgba(var(--cone-down-rgb,125,230,255),.12) 38%,rgba(255,255,255,0) 78%)!important;
    }    /* Ready shelves: keep two products plus Catalog in three tight slots from tablet up */
    @media(min-width:821px){
      #catalog .readyTrack,
      #catalog-light-off .readyTrack{
        grid-auto-columns:calc((100% - 48px)/3)!important;
        gap:24px!important;
        justify-content:start!important;
        padding-left:2px!important;
        padding-right:2px!important;
      }
    }
    /* Light arrow background under the hero scene */
    #catalog{
      position:relative;
      overflow:visible;
      padding-top:clamp(230px,24vw,360px)!important;
      border-top:0!important;
      background:#fff url("assets/FOTO_DA_GESTIRE/03_HOME_CARTELLI/light-arrow-background-thin-rope-hd.webp?v=site-v7") top center/100% auto no-repeat!important;
    }
    #catalog.readyBuySection{
      padding-top:clamp(230px,24vw,360px)!important;
      border-top:0!important;
      margin-top:0!important;
    }
    #catalog .readyIntro.readyBuyOnly{
      display:none!important;
    }
    #catalog .readyTabs{
      margin-top:0!important;
      transform:translateY(-132px)!important;
      gap:148px!important;
    }
    #catalog .readyShelf{
      margin-top:-105px!important;
    }
    #catalog>.wrap{
      position:relative;
      z-index:1;
    }
    @media(max-width:720px){
      #catalog,
      #catalog.readyBuySection{
        padding-top:178px!important;
        background-size:760px auto!important;
        background-position:top center!important;
      }
      #catalog .readyTabs{
        transform:translateY(-74px)!important;
        gap:112px!important;
      }
      #catalog .readyTab{
        font-size:17px!important;
      }
      #catalog .readyShelf{
        margin-top:-58px!important;
      }
    }
    /* Components arrow background under the Light/Cover sections */
    #parts{
      position:relative;
      overflow:visible;
      background:#fff url("assets/FOTO_DA_GESTIRE/03_HOME_CARTELLI/component-arrow-background-thin-rope-hd.webp?v=site-v7") top center/100% auto no-repeat!important;
      padding-top:clamp(190px,15vw,230px)!important;
      padding-bottom:28px!important;
      border-top:0!important;
      margin-top:clamp(58px,6.4vw,92px)!important;
    }
    #parts .wrap{background:#fff!important}
    #parts .readyIntro.readyBuyOnly{
      display:none!important;
    }
    #parts .partsGrid{
      margin-top:0!important;
    }
    @media(min-width:821px){
      #parts .partsGrid{
        grid-auto-columns:calc((100% - 48px)/3)!important;
        gap:24px!important;
        justify-content:start!important;
        padding-bottom:14px!important;
      }
    }
    @media(min-width:1281px){
      #parts{
        padding-top:330px!important;
      }
    }
    @media(max-width:720px){
      #parts{
        padding-top:146px!important;
        margin-top:44px!important;
        background-size:760px auto!important;
        background-position:top center!important;
      }
    }
    /* Cover arrow background under the Light Plus scene */
    #catalog-light-off{
      position:relative;
      overflow:visible;
      padding-top:clamp(230px,24vw,360px)!important;
      background:#fff url("assets/FOTO_DA_GESTIRE/03_HOME_CARTELLI/cover-arrow-background-thin-rope-hd.webp?v=site-v7") top center/100% auto no-repeat!important;
    }
    /* Light Off ready section: remove the pale divider under the black band */
    #catalog-light-off.readyBuySection{
      padding-top:clamp(230px,24vw,360px)!important;
      border-top:0!important;
      margin-top:0!important;
    }
    #catalog-light-off .readyIntro.readyBuyOnly{
      display:none!important;
    }
    #catalog-light-off .readyTabs{
      margin-top:0!important;
      transform:translate(-22px, -148px)!important;
      gap:154px!important;
    }
    #catalog-light-off .readyShelf{
      margin-top:-121px!important;
    }
    #catalog-light-off>.wrap{
      position:relative;
      z-index:1;
    }
    @media(max-width:720px){
      #catalog-light-off,
      #catalog-light-off.readyBuySection{
        padding-top:178px!important;
        background-size:760px auto!important;
        background-position:top center!important;
      }
      #catalog-light-off .readyTabs{
        transform:translate(-16px, -90px)!important;
        gap:104px!important;
      }
      #catalog-light-off .readyTab{
        font-size:17px!important;
      }
      #catalog-light-off .readyShelf{
        margin-top:-66px!important;
      }
    }
    /* # HOME — SFONDO SCHEDE: la sfumatura usa la scena Hero attiva senza rendere il testo meno leggibile. */
    #catalog{
      background:#fff url("assets/FOTO_DA_GESTIRE/03_HOME_CARTELLI/light-arrow-background-thin-rope-hd.webp?v=site-v7") top center/100% auto no-repeat!important;
    }
    #catalog:after{
      content:"";
      position:absolute;
      left:0;
      right:0;
      top:clamp(300px,28vw,420px);
      bottom:0;
      z-index:0;
      pointer-events:none;
      background-image:
        linear-gradient(90deg,#fff 0%,rgba(255,255,255,.32) 8%,rgba(255,255,255,0) 50%,rgba(255,255,255,.32) 92%,#fff 100%),
        linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.72) 10%,rgba(var(--section-scene-primary-rgb,239,0,43),.13) 42%,rgba(var(--section-scene-secondary-rgb,239,0,43),.075) 68%,rgba(255,255,255,.94) 100%),
        radial-gradient(ellipse at 50% 46%,rgba(var(--section-scene-primary-rgb,239,0,43),.18),rgba(var(--section-scene-secondary-rgb,239,0,43),.07) 48%,rgba(255,255,255,0) 76%);
      background-size:100% 100%,100% 100%,100% 100%;
      background-position:center,center,center;
      background-repeat:no-repeat;
      filter:saturate(1.08) blur(10px);
      opacity:.58;
    }
    #catalog-light-off{
      background:#fff url("assets/FOTO_DA_GESTIRE/03_HOME_CARTELLI/cover-arrow-background-thin-rope-hd.webp?v=site-v7") top center/100% auto no-repeat!important;
    }
    #catalog-light-off:after,
    #parts:after,
    #tech:after{
      content:"";
      position:absolute;
      left:0;
      right:0;
      bottom:0;
      z-index:0;
      pointer-events:none;
      background-image:
        linear-gradient(90deg,#fff 0%,rgba(255,255,255,.32) 8%,rgba(255,255,255,0) 50%,rgba(255,255,255,.32) 92%,#fff 100%),
        linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.72) 10%,rgba(var(--section-scene-primary-rgb,239,0,43),.13) 42%,rgba(var(--section-scene-secondary-rgb,239,0,43),.075) 68%,rgba(255,255,255,.94) 100%),
        radial-gradient(ellipse at 50% 46%,rgba(var(--section-scene-primary-rgb,239,0,43),.18),rgba(var(--section-scene-secondary-rgb,239,0,43),.07) 48%,rgba(255,255,255,0) 76%);
      background-size:100% 100%,100% 100%,100% 100%;
      background-position:center,center,center;
      background-repeat:no-repeat;
      filter:saturate(1.08) blur(10px);
      opacity:.58;
    }
    #catalog-light-off:after{
      top:clamp(300px,28vw,420px);
    }
    #parts{
      background:#fff url("assets/FOTO_DA_GESTIRE/03_HOME_CARTELLI/component-arrow-background-thin-rope-hd.webp?v=site-v7") top center/100% auto no-repeat!important;
    }
    #parts:after{
      top:clamp(270px,23vw,360px);
    }
    #parts .wrap{
      position:relative;
      z-index:1;
      background:transparent!important;
    }
    #tech{
      position:relative;
      background:#fff!important;
    }
    #tech:after{
      top:clamp(210px,19vw,270px);
    }
    #tech .materialsSoloHead:after{
      content:none;
    }
    #tech .materialsSoloHead,
    #tech .techShelf,
    #tech .materialsSign{
      position:relative;
      z-index:1;
    }
    /* Editorial contact close: a quiet final page, not a sales panel. */
    #contact.contact{
      padding:clamp(56px,6vw,88px) 44px clamp(148px,15vw,260px);
      border-top:1px solid rgba(0,0,0,.08);
      background:#fff;
    }
    #contact .wrap{
      max-width:800px;
    }
    #contact .contactBox{
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:0;
      padding:0;
      border:0;
      border-radius:0;
      text-align:center;
    }
    #contact .contactEyebrow{
      margin:0 0 34px;
      color:#6b6f76;
      font-size:12px;
      font-weight:900;
      letter-spacing:.3em;
    }
    #contact h2{
      max-width:780px;
      margin:0;
      color:#09090b;
      font-size:clamp(46px,5.2vw,74px);
      font-weight:500;
      line-height:.94;
      letter-spacing:-.045em;
    }
    #contact .contactIntro{
      max-width:660px;
      margin:52px auto 0;
      color:#565a62;
      font-size:clamp(18px,1.5vw,21px);
      line-height:1.65;
    }
    #contact .contactIntro p{
      margin:0;
    }
    #contact .contactIntro p+p{
      margin-top:16px;
      color:#1d1f23;
    }
    #contact .contactDetails{
      display:flex;
      justify-content:center;
      gap:clamp(52px,8vw,104px);
      margin:66px 0 0;
      font-style:normal;
    }
    #contact .contactDetails div{
      display:grid;
      gap:10px;
      min-width:150px;
    }
    #contact .contactDetails span{
      color:#6f737a;
      font-size:11px;
      font-weight:800;
      letter-spacing:.2em;
      text-transform:uppercase;
    }
    #contact .contactDetails a,
    #contact .contactDetails strong{
      color:#111216;
      font-size:17px;
      font-weight:500;
      line-height:1.4;
    }
    #contact .contactDetails a{
      display:inline-flex;
      align-items:center;
      min-height:44px;
      text-decoration:underline;
      text-decoration-color:transparent;
      text-underline-offset:5px;
      transition:text-decoration-color .22s ease;
    }
    #contact .contactDetails a:hover{
      text-decoration-color:currentColor;
    }
    #contact .contactCta{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:14px;
      min-height:54px;
      margin-top:62px;
      padding:0 28px;
      border:1px solid #111216;
      border-radius:4px;
      background:#111216;
      color:#fff;
      font-family:"Montserrat",Arial,sans-serif;
      font-size:15px;
      font-weight:700;
      letter-spacing:.01em;
      transition:transform .22s ease,background-color .22s ease,color .22s ease;
    }
    #contact .contactCta:hover{
      transform:translateY(-2px);
      background:#fff;
      color:#111216;
    }
    #contact .contactCta:focus-visible,
    #contact .contactDetails a:focus-visible{
      outline:3px solid #ef002b;
      outline-offset:5px;
    }
    #contact .contactHuman{
      max-width:520px;
      margin:24px auto 0;
      color:#6f737a;
      font-size:12px;
      line-height:1.55;
    }
    #contact .contactSignature{
      display:grid;
      gap:5px;
      margin:clamp(108px,11vw,160px) 0 0;
      color:#151619;
      font-size:clamp(19px,2vw,25px);
      font-weight:500;
      line-height:1.25;
      letter-spacing:-.015em;
    }
    @media(max-width:720px){
      #contact.contact{
        padding:56px 22px 132px;
      }
      #contact h2{
        font-size:clamp(40px,11.5vw,54px);
        line-height:.96;
      }
      #contact .contactEyebrow{
        margin-bottom:28px;
      }
      #contact .contactIntro{
        margin-top:40px;
        font-size:17px;
        line-height:1.62;
      }
      #contact .contactDetails{
        display:grid;
        gap:32px;
        margin-top:52px;
      }
      #contact .contactCta{
        width:100%;
        max-width:320px;
        margin-top:52px;
      }
      #contact .contactHuman{
        max-width:300px;
      }
      #contact .contactSignature{
        margin-top:100px;
      }
    }
    @media(prefers-reduced-motion:reduce){
      #contact .contactCta,
      #contact .contactDetails a{
        transition:none;
      }
      #contact .contactCta:hover{
        transform:none;
      }
    }
    @media(max-width:720px){
      #parts{
        background-size:760px auto!important;
        background-position:top center!important;
      }
      #catalog{
        background-size:760px auto!important;
        background-position:top center!important;
      }
      #catalog:after{
        top:238px;
        filter:saturate(.78) blur(14px);
        opacity:.28;
      }
      #catalog-light-off{
        background-size:760px auto!important;
        background-position:top center!important;
      }
      #catalog-light-off:after{
        top:238px;
        filter:saturate(.78) blur(14px);
        opacity:.28;
      }
      #parts:after{
        top:196px;
        filter:saturate(.78) blur(14px);
        opacity:.28;
      }
      #tech:after{
        top:192px;
        filter:saturate(.78) blur(14px);
        opacity:.28;
      }
    }
    /* Real rising GLB micro-bubble: born inside the big bubble, exits upward, then loops */
    .heroRisingBubble{
      position:absolute;
      left:50%;
      top:50%;
      z-index:4;
      width:calc(var(--bubble-size) * .058);
      aspect-ratio:1;
      border-radius:50%;
      pointer-events:none;
      opacity:0;
      transform:translate3d(calc(var(--bubble-size) * -.09),calc(var(--bubble-size) * .17),46px) scale(.22);
      animation:heroRisingBubble 8.8s cubic-bezier(.25,.08,.18,1) infinite;
      --poster-color:transparent;
      --progress-bar-color:transparent;
      --progress-bar-height:0px;
      background:transparent!important;
      mix-blend-mode:screen;
      filter:drop-shadow(0 0 8px rgba(170,240,255,.22)) saturate(1.12) contrast(1.05);
      will-change:transform,opacity;
    }
    .heroRisingBubble:before{
      content:"";
      position:absolute;
      inset:17%;
      z-index:2;
      border-radius:inherit;
      background:
        radial-gradient(ellipse 34% 18% at 32% 24%,rgba(255,255,255,.72),rgba(255,255,255,.18) 48%,rgba(255,255,255,0) 78%);
      filter:blur(.55px);
      pointer-events:none;
    }
    .heroRisingBubble:after{
      content:"";
      position:absolute;
      left:50%;
      top:50%;
      z-index:3;
      width:115%;
      aspect-ratio:1;
      border-radius:50%;
      opacity:0;
      transform:translate(-50%,-50%) scale(.15);
      background:
        radial-gradient(circle,rgba(255,255,255,.70) 0 8%,rgba(165,240,255,.34) 9% 18%,rgba(165,240,255,0) 52%),
        conic-gradient(from 8deg,rgba(255,255,255,0),rgba(213,252,255,.70),rgba(255,255,255,0) 13%,rgba(150,232,255,.54) 18%,rgba(255,255,255,0) 28%,rgba(255,255,255,.62) 36%,rgba(255,255,255,0) 48%,rgba(135,226,255,.55) 58%,rgba(255,255,255,0) 70%,rgba(255,255,255,.52) 82%,rgba(255,255,255,0));
      filter:blur(.35px);
      animation:heroRisingBubblePop 8.8s linear infinite;
      pointer-events:none;
    }
    .heroStage.spin .heroRisingBubble{
      animation-duration:5.8s;
      opacity:.42;
    }
    @keyframes heroRisingBubble{
      0%,7%{
        opacity:0;
        transform:translate3d(calc(var(--bubble-size) * -.09),calc(var(--bubble-size) * .18),46px) scale(.18);
      }
      14%{
        opacity:.70;
        transform:translate3d(calc(var(--bubble-size) * -.07),calc(var(--bubble-size) * .12),46px) scale(.62);
      }
      34%{
        opacity:.82;
        transform:translate3d(calc(var(--bubble-size) * -.02),calc(var(--bubble-size) * -.08),46px) scale(.88);
      }
      56%{
        opacity:.78;
        transform:translate3d(calc(var(--bubble-size) * .045),calc(var(--bubble-size) * -.34),46px) scale(1);
      }
      72%{
        opacity:.70;
        transform:translate3d(calc(var(--bubble-size) * .085),calc(var(--bubble-size) * -.62),46px) scale(.86);
      }
      84%{
        opacity:.52;
        transform:translate3d(calc(var(--bubble-size) * .12),calc(-46vh + var(--bubble-size) * .08),46px) scale(.64);
      }
      90%{
        opacity:.78;
        transform:translate3d(calc(var(--bubble-size) * .14),calc(-50vh + 18px),46px) scale(.48);
      }
      94%{
        opacity:0;
        transform:translate3d(calc(var(--bubble-size) * .14),calc(-50vh + 18px),46px) scale(.18);
      }
      100%{
        opacity:0;
        transform:translate3d(calc(var(--bubble-size) * -.09),calc(var(--bubble-size) * .18),46px) scale(.18);
      }
    }
    @keyframes heroRisingBubblePop{
      0%,87%{
        opacity:0;
        transform:translate(-50%,-50%) scale(.12) rotate(0deg);
      }
      90%{
        opacity:.92;
        transform:translate(-50%,-50%) scale(.58) rotate(10deg);
      }
      94%{
        opacity:0;
        transform:translate(-50%,-50%) scale(1.55) rotate(22deg);
      }
      100%{
        opacity:0;
        transform:translate(-50%,-50%) scale(.12) rotate(0deg);
      }
    }
    /* Rising GLB bubble path: visible on the right side, then pop at the top edge */
    .heroStage .heroRisingBubble{
      z-index:7!important;
      width:calc(var(--bubble-size) * .072)!important;
      animation:heroRisingBubbleRightPath 7.8s cubic-bezier(.25,.08,.18,1) infinite!important;
      filter:drop-shadow(0 0 5px rgba(140,220,235,.12)) saturate(.92) contrast(1.02) brightness(.90)!important;
    }
    .heroStage .heroRisingBubble:after{
      animation:heroRisingBubbleRightPop 7.8s linear infinite!important;
    }
    @keyframes heroRisingBubbleRightPop{
      0%,87%{
        opacity:0;
        transform:translate(-50%,-50%) scale(.10) rotate(0deg);
      }
      90%{
        opacity:.86;
        transform:translate(-50%,-50%) scale(.55) rotate(10deg);
      }
      95%{
        opacity:0;
        transform:translate(-50%,-50%) scale(1.45) rotate(24deg);
      }
      100%{
        opacity:0;
        transform:translate(-50%,-50%) scale(.10) rotate(0deg);
      }
    }
    /* Fix rising GLB bubble size: prevent hero model-viewer rules from stretching it */
    .heroStage model-viewer.heroRisingBubble{
      position:absolute!important;
      display:block!important;
      width:calc(var(--bubble-size) * .072)!important;
      height:calc(var(--bubble-size) * .072)!important;
      min-width:0!important;
      min-height:0!important;
      max-width:none!important;
      max-height:none!important;
      aspect-ratio:1!important;
      border-radius:50%!important;
      overflow:visible!important;
      pointer-events:none!important;
      background:transparent!important;
    }
    /* Match the rising GLB bubble to the big bubble glass: neutral water tint */
    .heroStage model-viewer.heroRisingBubble{
      opacity:.54!important;
      mix-blend-mode:screen!important;
    }
    .heroStage model-viewer.heroRisingBubble:before{
      inset:12%!important;
      background:
        radial-gradient(ellipse 38% 18% at 33% 24%,rgba(255,255,255,.42),rgba(210,245,255,.16) 46%,rgba(255,255,255,0) 78%),
        radial-gradient(circle at 65% 72%,rgba(42,122,150,.16),rgba(42,122,150,0) 62%)!important;
      filter:blur(.9px) saturate(.88)!important;
    }
    /* Liquid neck when the rising GLB bubble separates from the big bubble */
    .heroBubbleDetachNeck{
      position:absolute;
      left:50%;
      top:50%;
      z-index:6;
      width:calc(var(--bubble-size) * .078);
      height:calc(var(--bubble-size) * .050);
      border-radius:50% 50% 45% 45%;
      pointer-events:none;
      opacity:0;
      transform:
        translate3d(calc(var(--bubble-size) * .285),calc(var(--bubble-size) * -.495),52px)
        translate(-50%,-50%)
        scale(.30,.18);
      transform-origin:center bottom;
      background:
        radial-gradient(ellipse 62% 28% at 50% 22%,rgba(255,255,255,.72),rgba(210,250,255,.22) 34%,rgba(255,255,255,0) 72%),
        radial-gradient(ellipse 46% 58% at 50% 76%,rgba(118,223,245,.20),rgba(34,108,140,.08) 50%,rgba(255,255,255,0) 78%);
      box-shadow:
        inset 0 0 0 1px rgba(232,255,255,.34),
        inset 0 4px 7px rgba(255,255,255,.22),
        0 0 8px rgba(186,244,255,.18);
      filter:blur(.18px) saturate(.96);
      mix-blend-mode:screen;
      animation:heroBubbleDetachNeck 7.8s cubic-bezier(.22,.07,.2,1) infinite;
      will-change:transform,opacity;
    }
    .heroBubbleDetachNeck:before,
    .heroBubbleDetachNeck:after{
      content:"";
      position:absolute;
      left:50%;
      border-radius:50%;
      transform:translateX(-50%);
      pointer-events:none;
    }
    .heroBubbleDetachNeck:before{
      bottom:-11%;
      width:120%;
      height:44%;
      background:radial-gradient(ellipse,rgba(245,255,255,.58),rgba(150,236,255,.18) 42%,rgba(255,255,255,0) 74%);
      filter:blur(.65px);
    }
    .heroBubbleDetachNeck:after{
      top:-16%;
      width:86%;
      height:34%;
      background:radial-gradient(ellipse,rgba(255,255,255,.64),rgba(170,240,255,.16) 45%,rgba(255,255,255,0) 78%);
      filter:blur(.55px);
    }
    .heroBubbleDetachNeck i{
      position:absolute;
      left:47%;
      top:18%;
      width:12%;
      height:76%;
      border-radius:999px;
      transform:translateX(-50%) rotate(2deg);
      background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(196,248,255,.18) 48%,rgba(255,255,255,0));
      filter:blur(.8px);
      opacity:.70;
    }
    /* Rising bubble correction: detach on the big bubble rim and match existing bubble color */
    .heroStage model-viewer.heroRisingBubble{
      opacity:.44!important;
      mix-blend-mode:normal!important;
      filter:
        drop-shadow(0 0 4px rgba(150,220,235,.08))
        saturate(.72)
        contrast(1.12)
        brightness(.62)!important;
    }
    .heroStage model-viewer.heroRisingBubble:before{
      opacity:.44!important;
      background:
        radial-gradient(ellipse 38% 18% at 33% 24%,rgba(255,255,255,.28),rgba(180,225,235,.10) 46%,rgba(255,255,255,0) 78%),
        radial-gradient(circle at 64% 72%,rgba(20,62,86,.24),rgba(20,62,86,0) 64%)!important;
    }
    .heroBubbleDetachNeck{
      width:calc(var(--bubble-size) * .062)!important;
      height:calc(var(--bubble-size) * .042)!important;
      filter:blur(.28px) saturate(.72) brightness(.72)!important;
      background:
        radial-gradient(ellipse 62% 28% at 50% 22%,rgba(230,250,255,.36),rgba(145,216,232,.10) 34%,rgba(255,255,255,0) 72%),
        radial-gradient(ellipse 46% 58% at 50% 76%,rgba(55,145,170,.18),rgba(16,52,76,.10) 50%,rgba(255,255,255,0) 78%)!important;
      box-shadow:
        inset 0 0 0 1px rgba(210,245,250,.18),
        inset 0 4px 7px rgba(255,255,255,.10),
        0 0 6px rgba(130,218,236,.08)!important;
      mix-blend-mode:normal!important;
    }
    .heroBubbleDetachNeck:before,
    .heroBubbleDetachNeck:after{
      opacity:.52!important;
    }
    @keyframes heroRisingBubbleRightPath{
      0%,6%{
        opacity:0;
        transform:translate3d(calc(var(--bubble-size) * .17),calc(var(--bubble-size) * .22),54px) scale(.16);
      }
      14%{
        opacity:.52;
        transform:translate3d(calc(var(--bubble-size) * .19),calc(var(--bubble-size) * .13),54px) scale(.50);
      }
      34%{
        opacity:.50;
        transform:translate3d(calc(var(--bubble-size) * .22),calc(var(--bubble-size) * -.06),54px) scale(.75);
      }
      54%{
        opacity:.48;
        transform:translate3d(calc(var(--bubble-size) * .255),calc(var(--bubble-size) * -.30),54px) scale(.84);
      }
      64%{
        opacity:.48;
        transform:translate3d(calc(var(--bubble-size) * .275),calc(var(--bubble-size) * -.405),54px) scale(.76);
      }
      74%{
        opacity:.42;
        transform:translate3d(calc(var(--bubble-size) * .285),calc(var(--bubble-size) * -.53),54px) scale(.64);
      }
      86%{
        opacity:.32;
        transform:translate3d(calc(var(--bubble-size) * .30),calc(-50vh + 34px),54px) scale(.48);
      }
      91%{
        opacity:.46;
        transform:translate3d(calc(var(--bubble-size) * .31),calc(-50vh + 16px),54px) scale(.34);
      }
      95%{
        opacity:0;
        transform:translate3d(calc(var(--bubble-size) * .31),calc(-50vh + 16px),54px) scale(.14);
      }
      100%{
        opacity:0;
        transform:translate3d(calc(var(--bubble-size) * .17),calc(var(--bubble-size) * .22),54px) scale(.16);
      }
    }
    @keyframes heroBubbleDetachNeck{
      0%,50%{
        opacity:0;
        transform:
          translate3d(calc(var(--bubble-size) * .268),calc(var(--bubble-size) * -.365),52px)
          translate(-50%,-50%)
          scale(.22,.10);
      }
      56%{
        opacity:.30;
        transform:
          translate3d(calc(var(--bubble-size) * .270),calc(var(--bubble-size) * -.382),52px)
          translate(-50%,-50%)
          scale(.66,.24);
      }
      62%{
        opacity:.52;
        transform:
          translate3d(calc(var(--bubble-size) * .274),calc(var(--bubble-size) * -.402),52px)
          translate(-50%,-50%)
          scale(.88,.52);
      }
      68%{
        opacity:.42;
        transform:
          translate3d(calc(var(--bubble-size) * .280),calc(var(--bubble-size) * -.420),52px)
          translate(-50%,-50%)
          scale(.48,.86);
      }
      73%{
        opacity:0;
        transform:
          translate3d(calc(var(--bubble-size) * .286),calc(var(--bubble-size) * -.438),52px)
          translate(-50%,-50%)
          scale(.18,1.18);
      }
      100%{
        opacity:0;
        transform:
          translate3d(calc(var(--bubble-size) * .268),calc(var(--bubble-size) * -.365),52px)
          translate(-50%,-50%)
          scale(.22,.10);
      }
    }
    /* Real Water Bubble v2 - final override for premium liquid volume */
    .heroStage .bubble3d,
    .heroStage .bubbleGlass,
    .heroStage .bubbleFx{
      border-radius:50%!important;
      overflow:visible!important;
    }
    .heroStage .bubble3d{
      isolation:isolate!important;
      filter:
        drop-shadow(0 32px 58px rgba(0,0,0,.24))
        drop-shadow(0 0 18px rgba(210,248,255,.18))!important;
    }
    .heroStage.lightOn .bubble3d{
      filter:
        drop-shadow(0 34px 62px rgba(0,0,0,.25))
        drop-shadow(0 0 26px rgba(210,248,255,.30))
        drop-shadow(0 0 58px rgba(82,198,255,.24))!important;
    }
    .heroStage .bubbleBack,
    .heroStage.lightOn .bubbleBack,
    .heroStage.lightOff .bubbleBack{
      opacity:.56!important;
      background:
        radial-gradient(circle at 49% 51%,rgba(255,255,255,0) 0 18%,rgba(140,220,244,.10) 36%,rgba(8,30,58,.18) 67%,rgba(0,0,0,.13) 100%),
        radial-gradient(ellipse 44% 28% at 30% 17%,rgba(245,255,255,.28),rgba(180,236,250,.10) 42%,rgba(255,255,255,0) 72%),
        radial-gradient(ellipse 52% 38% at 72% 78%,rgba(76,192,238,.16),rgba(0,82,152,.12) 46%,rgba(255,255,255,0) 76%),
        conic-gradient(from 18deg at 50% 52%,rgba(255,255,255,0),rgba(230,252,255,.07),rgba(60,178,235,.06),rgba(255,255,255,0),rgba(255,255,255,.05),rgba(0,0,0,0))!important;
      filter:blur(3.8px) saturate(1.06) contrast(1.03) brightness(1.03)!important;
      box-shadow:
        inset 26px 24px 78px rgba(255,255,255,.12),
        inset -36px -42px 92px rgba(0,12,30,.22)!important;
    }
    .heroStage .bubbleCore,
    .heroStage.lightOn .bubbleCore,
    .heroStage.lightOff .bubbleCore{
      background:
        radial-gradient(circle at 48% 50%,rgba(0,0,0,.10) 0 14%,rgba(0,18,40,.07) 31%,rgba(255,255,255,0) 61%),
        radial-gradient(ellipse 72% 55% at 48% 56%,rgba(170,230,255,.05),rgba(255,255,255,0) 62%),
        radial-gradient(circle at 37% 28%,rgba(255,255,255,.36) 0 .36%,rgba(255,255,255,0) .84%),
        radial-gradient(circle at 59% 39%,rgba(210,250,255,.34) 0 .32%,rgba(255,255,255,0) .82%),
        radial-gradient(circle at 43% 54%,rgba(255,255,255,.28) 0 .28%,rgba(255,255,255,0) .72%),
        radial-gradient(circle at 63% 63%,rgba(180,240,255,.24) 0 .30%,rgba(255,255,255,0) .78%),
        radial-gradient(circle at 34% 67%,rgba(255,255,255,.22) 0 .24%,rgba(255,255,255,0) .66%),
        radial-gradient(ellipse 42% 24% at 31% 17%,rgba(255,255,255,.24),rgba(190,240,250,.08) 42%,rgba(255,255,255,0) 76%),
        radial-gradient(ellipse 54% 30% at 72% 80%,rgba(70,192,240,.12),rgba(0,92,160,.08) 44%,rgba(255,255,255,0) 76%)!important;
      box-shadow:
        inset 0 0 0 1px rgba(235,252,255,.20),
        inset 20px 18px 58px rgba(255,255,255,.12),
        inset -34px -36px 82px rgba(0,10,28,.20)!important;
      backdrop-filter:blur(2.4px) saturate(1.16) contrast(1.03)!important;
      -webkit-backdrop-filter:blur(2.4px) saturate(1.16) contrast(1.03)!important;
    }
    .heroStage .bubbleBack:before,
    .heroStage .bubbleCore:before,
    .heroStage .bubbleCaustics:before{
      content:""!important;
      position:absolute!important;
      inset:4%!important;
      border-radius:50%!important;
      pointer-events:none!important;
      background:
        radial-gradient(circle at 48% 40%,rgba(255,255,255,.34) 0 .24%,rgba(255,255,255,0) .68%),
        radial-gradient(circle at 54% 48%,rgba(170,238,255,.28) 0 .22%,rgba(255,255,255,0) .66%),
        radial-gradient(circle at 41% 46%,rgba(255,255,255,.24) 0 .20%,rgba(255,255,255,0) .62%),
        radial-gradient(circle at 61% 32%,rgba(255,255,255,.20) 0 .18%,rgba(255,255,255,0) .58%),
        radial-gradient(circle at 38% 73%,rgba(170,232,255,.20) 0 .16%,rgba(255,255,255,0) .56%),
        radial-gradient(ellipse 32% 15% at 33% 23%,rgba(255,255,255,.18),rgba(255,255,255,0) 66%),
        radial-gradient(ellipse 48% 16% at 60% 76%,rgba(80,202,255,.12),rgba(255,255,255,0) 72%)!important;
      filter:blur(4.8px) saturate(1.05) contrast(1.04)!important;
      mix-blend-mode:screen!important;
      opacity:.50!important;
    }
    .heroStage .bubbleBack:after,
    .heroStage .bubbleCore:after{
      content:""!important;
      position:absolute!important;
      inset:8%!important;
      border-radius:50%!important;
      pointer-events:none!important;
      background:
        radial-gradient(ellipse 30% 14% at 32% 18%,rgba(255,255,255,.34),rgba(255,255,255,.10) 38%,rgba(255,255,255,0) 72%),
        radial-gradient(ellipse 58% 18% at 52% 88%,rgba(255,255,255,.20),rgba(80,202,255,.10) 36%,rgba(255,255,255,0) 78%),
        conic-gradient(from 218deg at 50% 52%,rgba(255,255,255,0),rgba(255,255,255,.10),rgba(80,202,255,.06),rgba(255,255,255,0),rgba(255,255,255,.08),rgba(255,255,255,0))!important;
      filter:blur(10px) saturate(1.02)!important;
      mix-blend-mode:screen!important;
      opacity:.34!important;
    }
    .heroStage .bubbleCaustics{
      opacity:.30!important;
      background:
        radial-gradient(ellipse at 34% 26%,rgba(255,255,255,.22),rgba(255,255,255,0) 38%),
        radial-gradient(ellipse at 68% 70%,rgba(105,220,255,.12),rgba(255,255,255,0) 46%),
        conic-gradient(from calc(var(--liquid-tilt,0deg) * .5) at 50% 52%,rgba(255,255,255,0),rgba(255,255,255,.08),rgba(100,218,255,.05),rgba(255,255,255,0),rgba(255,255,255,.07),rgba(255,255,255,0))!important;
      filter:blur(8px) saturate(1.02) contrast(1.02)!important;
      mix-blend-mode:screen!important;
    }
    .heroStage .bubbleRim,
    .heroStage.lightOn .bubbleRim,
    .heroStage.lightOff .bubbleRim{
      opacity:.90!important;
      background:
        radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 0 57%,rgba(255,255,255,.05) 64%,rgba(8,42,70,.18) 73%,rgba(0,4,12,.31) 80%,rgba(176,236,255,.30) 86%,rgba(255,255,255,.22) 89%,rgba(255,255,255,0) 95%),
        radial-gradient(ellipse 38% 15% at 31% 16%,rgba(255,255,255,.60),rgba(190,245,255,.18) 44%,rgba(255,255,255,0) 78%),
        radial-gradient(ellipse 30% 10% at 74% 86%,rgba(255,255,255,.24),rgba(80,202,255,.12) 46%,rgba(255,255,255,0) 78%)!important;
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.25),
        inset 0 0 18px rgba(255,255,255,.10),
        inset -30px -34px 74px rgba(0,5,18,.34),
        inset 24px 20px 60px rgba(255,255,255,.13),
        0 0 0 1px rgba(0,0,0,.18)!important;
      filter:blur(.22px) saturate(1.02) contrast(1.04)!important;
      mix-blend-mode:normal!important;
    }
    .heroStage.lightOn .bubbleRim{
      opacity:1!important;
      background:
        radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 0 57%,rgba(255,255,255,.07) 64%,rgba(8,44,70,.19) 73%,rgba(0,5,14,.38) 80%,rgba(86,216,255,.42) 85%,rgba(248,255,255,.44) 88%,rgba(98,205,255,.20) 91%,rgba(255,255,255,0) 96%),
        radial-gradient(ellipse 42% 16% at 31% 16%,rgba(255,255,255,.68),rgba(195,246,255,.22) 44%,rgba(255,255,255,0) 78%)!important;
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.36),
        inset 0 0 18px rgba(224,252,255,.20),
        inset -32px -36px 76px rgba(0,5,18,.40),
        0 0 9px rgba(255,255,255,.46),
        0 0 28px rgba(140,224,255,.32),
        0 0 62px rgba(74,170,255,.20)!important;
    }
    .heroStage.lightOff .bubbleBack{
      opacity:.34!important;
      background:
        radial-gradient(circle at 49% 51%,rgba(255,255,255,0) 0 24%,rgba(168,228,245,.07) 45%,rgba(8,30,58,.08) 70%,rgba(0,0,0,.05) 100%),
        radial-gradient(ellipse 44% 28% at 30% 17%,rgba(255,255,255,.26),rgba(190,238,250,.08) 44%,rgba(255,255,255,0) 74%),
        radial-gradient(ellipse 52% 38% at 72% 78%,rgba(76,192,238,.08),rgba(0,82,152,.05) 46%,rgba(255,255,255,0) 76%)!important;
      box-shadow:
        inset 22px 22px 70px rgba(255,255,255,.10),
        inset -30px -34px 80px rgba(0,12,30,.10)!important;
    }
    .heroStage.lightOff .bubbleCore{
      background:
        radial-gradient(circle at 48% 50%,rgba(0,0,0,.045) 0 16%,rgba(0,18,40,.035) 33%,rgba(255,255,255,0) 62%),
        radial-gradient(ellipse 72% 55% at 48% 56%,rgba(190,238,255,.045),rgba(255,255,255,0) 62%),
        radial-gradient(circle at 37% 28%,rgba(255,255,255,.30) 0 .34%,rgba(255,255,255,0) .82%),
        radial-gradient(circle at 59% 39%,rgba(210,250,255,.26) 0 .30%,rgba(255,255,255,0) .78%),
        radial-gradient(ellipse 42% 24% at 31% 17%,rgba(255,255,255,.18),rgba(190,240,250,.06) 42%,rgba(255,255,255,0) 76%),
        radial-gradient(ellipse 54% 30% at 72% 80%,rgba(70,192,240,.07),rgba(0,92,160,.04) 44%,rgba(255,255,255,0) 76%)!important;
      box-shadow:
        inset 0 0 0 1px rgba(235,252,255,.16),
        inset 20px 18px 54px rgba(255,255,255,.10),
        inset -28px -30px 72px rgba(0,10,28,.10)!important;
    }
    .heroStage.lightOff .bubbleRim{
      opacity:.76!important;
      background:
        radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 0 58%,rgba(255,255,255,.035) 66%,rgba(8,42,70,.11) 75%,rgba(0,4,12,.17) 82%,rgba(176,236,255,.20) 88%,rgba(255,255,255,.15) 91%,rgba(255,255,255,0) 96%),
        radial-gradient(ellipse 38% 15% at 31% 16%,rgba(255,255,255,.46),rgba(190,245,255,.13) 44%,rgba(255,255,255,0) 78%)!important;
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.18),
        inset -26px -30px 68px rgba(0,5,18,.20),
        inset 22px 18px 54px rgba(255,255,255,.10),
        0 0 0 1px rgba(0,0,0,.10)!important;
    }
    .heroStage .bubbleSpecular{
      opacity:.64!important;
      background:
        radial-gradient(ellipse 34% 10% at 34% 10%,rgba(255,255,255,.82),rgba(255,255,255,.34) 38%,rgba(255,255,255,0) 72%),
        radial-gradient(ellipse 18% 8% at 68% 18%,rgba(255,255,255,.44),rgba(255,255,255,0) 70%),
        linear-gradient(118deg,rgba(255,255,255,0) 18%,rgba(255,255,255,.18) 28%,rgba(255,255,255,0) 39%),
        radial-gradient(ellipse 50% 12% at 52% 92%,rgba(255,255,255,.32),rgba(80,202,255,.12) 40%,rgba(255,255,255,0) 78%)!important;
      filter:blur(.52px) saturate(1.02)!important;
      mix-blend-mode:screen!important;
    }
    .heroStage .bubbleGlass{
      z-index:2!important;
      opacity:.84!important;
      mix-blend-mode:screen!important;
    }
    .heroStage .bubbleGlass span{
      opacity:.56!important;
      background:
        radial-gradient(ellipse 34% 13% at 35% 10%,rgba(255,255,255,.54),rgba(255,255,255,.18) 38%,rgba(255,255,255,0) 74%),
        radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 60%,rgba(132,226,248,.10) 73%,rgba(255,255,255,.16) 84%,rgba(0,10,22,.10) 90%,rgba(255,255,255,0) 96%)!important;
      filter:blur(.35px)!important;
    }
    .heroStage .bubbleGlass i{
      opacity:.22!important;
      background:
        linear-gradient(132deg,rgba(255,255,255,0) 18%,rgba(255,255,255,.20) 28%,rgba(255,255,255,0) 40%,rgba(80,202,255,.08) 58%,rgba(255,255,255,0) 72%)!important;
      filter:blur(2.6px)!important;
    }
    .heroStage .bubbleFx,
    .heroStage.lightOn .bubbleFx,
    .heroStage.lightOff .bubbleFx{
      z-index:2!important;
      opacity:.22!important;
      filter:blur(.22px) saturate(1.14) brightness(1.04)!important;
      mix-blend-mode:screen!important;
    }
    .heroStage.lightOn .bubbleFx{opacity:.34!important;filter:blur(.16px) saturate(1.28) brightness(1.12)!important}
    .heroStage.lightOff .bubbleFx{opacity:.16!important}
    .heroStage #heroModel,
    .heroStage.lightOn #heroModel,
    .heroStage.lightOff #heroModel{
      z-index:4!important;
      clip-path:circle(45% at 50% 50%)!important;
      filter:
        saturate(1.12)
        contrast(1.05)
        brightness(1.03)
        drop-shadow(0 42px 62px rgba(0,0,0,.24))!important;
    }
    .heroStage.lightOn #heroModel{
      filter:
        saturate(1.18)
        contrast(1.08)
        brightness(1.09)
        drop-shadow(0 44px 64px rgba(0,0,0,.26))
        drop-shadow(0 0 18px rgba(215,248,255,.42))!important;
    }
    .heroStage.is-hover .bubble3d,
    .heroStage.is-hover .bubbleGlass{
      filter:
        drop-shadow(0 32px 58px rgba(0,0,0,.24))
        drop-shadow(0 0 26px rgba(210,248,255,.34))
        saturate(1.12)
        brightness(1.05)!important;
    }
    .heroStage.is-pressing .bubble3d,
    .heroStage.is-pressing .bubbleGlass,
    .heroStage.is-pressing .bubbleFx{
      transform:translate3d(calc(-50% + var(--liquid-lag-x)),calc(-50% + var(--liquid-lag-y)),40px) scale(1.045,.955)!important;
      filter:
        drop-shadow(0 24px 50px rgba(0,0,0,.26))
        drop-shadow(0 0 28px rgba(210,248,255,.34))
        saturate(1.20)!important;
    }
    .heroStage.is-pressing #heroModel{
      transform:translateY(10px) scale(.875) rotate(var(--jigger-clock-rot,0deg))!important;
    }
    .heroStage.spin .bubble3d:before{
      opacity:.34!important;
      filter:blur(1.4px) saturate(1.14)!important;
    }
    .heroStage.spin .bubbleGlass span{
      opacity:.40!important;
    }
    @media(max-width:820px){
      .heroStage .bubbleGlass span{opacity:.46!important}
      .heroStage .bubbleSpecular{opacity:.42!important}
      .heroStage #heroModel,
      .heroStage.lightOn #heroModel,
      .heroStage.lightOff #heroModel{
        clip-path:circle(47% at 50% 50%)!important;
      }
    }

    /* Real Water Bubble v5 - clearer liquid, softer Light On corona */
    .heroStage.lightOn .bubble3d{
      filter:
        drop-shadow(0 34px 62px rgba(0,0,0,.24))
        drop-shadow(0 0 18px rgba(210,248,255,.24))
        drop-shadow(0 0 44px rgba(82,198,255,.18))!important;
    }
    .heroStage.lightOn .bubble3d:before{
      opacity:.20!important;
      filter:blur(.55px) saturate(1.08)!important;
    }
    .heroStage.lightOn .bubble3d:after{
      opacity:.58!important;
      filter:blur(.18px) saturate(1.06)!important;
    }
    .heroStage.lightOn .bubbleBack{
      opacity:.46!important;
      filter:blur(3.2px) saturate(1.08) contrast(1.02) brightness(1.04)!important;
    }
    .heroStage.lightOn .bubbleCore{
      background:
        radial-gradient(circle at 48% 50%,rgba(0,0,0,.07) 0 13%,rgba(0,18,40,.05) 31%,rgba(255,255,255,0) 62%),
        radial-gradient(ellipse 54% 28% at 35% 18%,rgba(255,255,255,.18),rgba(200,246,255,.06) 42%,rgba(255,255,255,0) 78%),
        radial-gradient(ellipse 62% 38% at 70% 78%,rgba(88,210,255,.10),rgba(0,92,160,.055) 46%,rgba(255,255,255,0) 78%)!important;
      box-shadow:
        inset 0 0 0 1px rgba(235,252,255,.18),
        inset 20px 18px 54px rgba(255,255,255,.10),
        inset -30px -34px 78px rgba(0,10,28,.16)!important;
    }
    .heroStage.lightOn .bubbleRim{
      opacity:.92!important;
      background:
        radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 0 58%,rgba(255,255,255,.05) 65%,rgba(8,44,70,.13) 74%,rgba(0,5,14,.28) 80%,rgba(86,216,255,.35) 85%,rgba(248,255,255,.36) 88%,rgba(98,205,255,.16) 91%,rgba(255,255,255,0) 96%),
        radial-gradient(ellipse 42% 15% at 31% 16%,rgba(255,255,255,.56),rgba(195,246,255,.17) 44%,rgba(255,255,255,0) 78%)!important;
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.28),
        inset 0 0 14px rgba(224,252,255,.16),
        inset -28px -32px 72px rgba(0,5,18,.30),
        0 0 6px rgba(255,255,255,.30),
        0 0 20px rgba(140,224,255,.22),
        0 0 44px rgba(74,170,255,.14)!important;
    }
    .heroStage.lightOn .bubbleSpecular{
      opacity:.54!important;
      background:
        radial-gradient(ellipse 36% 9% at 33% 11%,rgba(255,255,255,.72),rgba(255,255,255,.26) 38%,rgba(255,255,255,0) 74%),
        linear-gradient(118deg,rgba(255,255,255,0) 18%,rgba(255,255,255,.12) 29%,rgba(255,255,255,0) 40%),
        radial-gradient(ellipse 46% 10% at 52% 91%,rgba(255,255,255,.22),rgba(80,202,255,.09) 40%,rgba(255,255,255,0) 78%)!important;
    }
    .heroStage.lightOn .bubbleFx{
      opacity:.27!important;
      filter:blur(.20px) saturate(1.18) brightness(1.07)!important;
    }

    .heroStage.lightOff .bubble3d{
      filter:
        drop-shadow(0 30px 54px rgba(0,0,0,.21))
        drop-shadow(0 0 12px rgba(210,248,255,.12))!important;
    }
    .heroStage.lightOff .bubbleBack{
      opacity:.24!important;
      filter:blur(2.8px) saturate(1.02) contrast(1.01) brightness(1.06)!important;
      background:
        radial-gradient(circle at 49% 51%,rgba(255,255,255,0) 0 30%,rgba(168,228,245,.045) 50%,rgba(8,30,58,.055) 72%,rgba(0,0,0,.035) 100%),
        radial-gradient(ellipse 44% 26% at 30% 17%,rgba(255,255,255,.20),rgba(190,238,250,.055) 44%,rgba(255,255,255,0) 74%),
        radial-gradient(ellipse 52% 36% at 72% 78%,rgba(76,192,238,.055),rgba(0,82,152,.035) 46%,rgba(255,255,255,0) 76%)!important;
    }
    .heroStage.lightOff .bubbleCore{
      background:
        radial-gradient(circle at 48% 50%,rgba(0,0,0,.025) 0 16%,rgba(0,18,40,.020) 34%,rgba(255,255,255,0) 63%),
        radial-gradient(ellipse 72% 55% at 48% 56%,rgba(190,238,255,.030),rgba(255,255,255,0) 64%),
        radial-gradient(circle at 37% 28%,rgba(255,255,255,.22) 0 .30%,rgba(255,255,255,0) .78%),
        radial-gradient(circle at 59% 39%,rgba(210,250,255,.18) 0 .26%,rgba(255,255,255,0) .72%),
        radial-gradient(ellipse 42% 22% at 31% 17%,rgba(255,255,255,.13),rgba(190,240,250,.04) 42%,rgba(255,255,255,0) 76%),
        radial-gradient(ellipse 54% 28% at 72% 80%,rgba(70,192,240,.05),rgba(0,92,160,.025) 44%,rgba(255,255,255,0) 76%)!important;
      box-shadow:
        inset 0 0 0 1px rgba(235,252,255,.12),
        inset 18px 16px 50px rgba(255,255,255,.08),
        inset -24px -28px 66px rgba(0,10,28,.07)!important;
    }
    .heroStage.lightOff .bubbleRim{
      opacity:.62!important;
      background:
        radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 0 60%,rgba(255,255,255,.025) 67%,rgba(8,42,70,.075) 76%,rgba(0,4,12,.13) 82%,rgba(176,236,255,.16) 88%,rgba(255,255,255,.11) 91%,rgba(255,255,255,0) 96%),
        radial-gradient(ellipse 38% 14% at 31% 16%,rgba(255,255,255,.34),rgba(190,245,255,.10) 44%,rgba(255,255,255,0) 78%)!important;
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.12),
        inset -22px -26px 58px rgba(0,5,18,.14),
        inset 18px 16px 48px rgba(255,255,255,.075),
        0 0 0 1px rgba(0,0,0,.07)!important;
    }
    .heroStage.lightOff .bubbleSpecular{
      opacity:.33!important;
      background:
        radial-gradient(ellipse 34% 9% at 34% 11%,rgba(255,255,255,.54),rgba(255,255,255,.18) 40%,rgba(255,255,255,0) 74%),
        radial-gradient(ellipse 46% 10% at 52% 91%,rgba(255,255,255,.16),rgba(80,202,255,.055) 40%,rgba(255,255,255,0) 78%)!important;
    }
    .heroStage.lightOff .bubbleGlass span{
      opacity:.34!important;
    }
    .heroStage.lightOff .bubbleFx{
      opacity:.10!important;
      filter:blur(.30px) saturate(1.05) brightness(1.02)!important;
    }
    .heroStage.lightOff .bubbleShell,
    .heroStage.lightOff .bubbleShellMain{
      opacity:.08!important;
      filter:
        drop-shadow(0 18px 30px rgba(255,255,255,.02))
        drop-shadow(0 30px 54px rgba(0,0,0,.06))
        saturate(1.02)
        contrast(1.02)!important;
      mix-blend-mode:screen!important;
    }
    .heroStage.lightOff .bubbleRim{
      opacity:.54!important;
    }
    .heroStage.lightOn .bubbleShell,
    .heroStage.lightOn .bubbleShellMain{
      opacity:.78!important;
      filter:
        drop-shadow(0 18px 34px rgba(150,220,255,.12))
        drop-shadow(0 34px 62px rgba(0,0,0,.17))
        saturate(1.12)
        contrast(1.04)!important;
    }

    /* Mobile hero: trim a hair from the model base lip */
    @media(max-width:820px){
      .heroStage #heroModel,
      .heroStage.lightOn #heroModel,
      .heroStage.lightOff #heroModel{
        clip-path:inset(0 0 1.4% 0)!important;
      }
    }
    /* Bubble affordance: visible tap cue inside the bubble, without changing color or outer light */
    .heroSpinHotspot{
      touch-action:manipulation!important;
    }
    .heroSpinHotspot:before,
    .heroSpinHotspot:after{
      content:"";
      position:absolute;
      left:50%;
      top:50%;
      width:38%;
      aspect-ratio:1;
      border-radius:50%;
      pointer-events:none;
      transform:translate(-50%,-50%) scale(.56);
      opacity:0;
      border:1px solid rgba(255,255,255,.30);
      background:
        radial-gradient(circle at 50% 50%,rgba(255,255,255,.18),rgba(255,255,255,.06) 34%,rgba(255,255,255,0) 68%);
      mix-blend-mode:screen;
      filter:blur(.12px);
    }
    .heroSpinHotspot:before{
      animation:bubbleIdleTapHint 3.8s ease-out 1.2s infinite;
    }
    .heroSpinHotspot:after{
      width:18%;
      border-color:rgba(255,255,255,.24);
      animation:bubbleIdleTapDot 3.8s ease-out 1.2s infinite;
    }
    .heroStage.spin .heroSpinHotspot:before,
    .heroStage.spin .heroSpinHotspot:after,
    .heroStage.buySettled .heroSpinHotspot:before,
    .heroStage.buySettled .heroSpinHotspot:after{
      animation:none!important;
      opacity:0!important;
    }
    .heroStage.is-invite .heroSpinHotspot:before{
      animation:bubbleTapHint 1.05s ease-out 1!important;
    }
    .heroStage.is-invite .heroSpinHotspot:after{
      animation:bubbleTapDot 1.05s ease-out .10s 1!important;
    }
    .heroStage.is-invite .bubbleGlass{
      animation:bubbleInviteLean 1.05s cubic-bezier(.16,1,.3,1) 1!important;
    }
    .heroStage.is-invite .bubbleRim,
    .heroStage.is-invite .bubbleSpecular{
      animation:bubbleInviteSurface 1.05s cubic-bezier(.16,1,.3,1) 1!important;
    }
    .heroStage.is-pressing .heroSpinHotspot:before{
      animation:bubbleTapHint .46s ease-out 1!important;
    }
    @keyframes bubbleIdleTapHint{
      0%,58%,100%{opacity:0;transform:translate(-50%,-50%) scale(.52)}
      66%{opacity:.46;transform:translate(-50%,-50%) scale(.70)}
      86%{opacity:.10;transform:translate(-50%,-50%) scale(1.28)}
    }
    @keyframes bubbleIdleTapDot{
      0%,58%,100%{opacity:0;transform:translate(-50%,-50%) scale(.70)}
      64%{opacity:.34;transform:translate(-50%,-50%) scale(.92)}
      78%{opacity:.18;transform:translate(-50%,-50%) scale(.68)}
    }
    @keyframes bubbleTapHint{
      0%{opacity:0;transform:translate(-50%,-50%) scale(.48)}
      26%{opacity:.72;transform:translate(-50%,-50%) scale(.78)}
      100%{opacity:0;transform:translate(-50%,-50%) scale(1.62)}
    }
    @keyframes bubbleTapDot{
      0%{opacity:0;transform:translate(-50%,-50%) scale(.80)}
      22%{opacity:.50;transform:translate(-50%,-50%) scale(1)}
      100%{opacity:0;transform:translate(-50%,-50%) scale(.62)}
    }
    @keyframes bubbleInviteLean{
      0%,100%{transform:translate3d(-50%,-50%,72px) rotateX(2deg) rotateY(-3deg) scale(1)}
      42%{transform:translate3d(-50.35%,-50.55%,72px) rotateX(3deg) rotateY(-1deg) scale(1.022)}
    }
    @keyframes bubbleInviteSurface{
      0%,100%{transform:scale(1)}
      42%{transform:scale(1.032)}
    }
    @media(prefers-reduced-motion:reduce){
      .heroSpinHotspot:before,
      .heroSpinHotspot:after,
      .heroStage.is-invite .bubbleGlass,
      .heroStage.is-invite .bubbleRim,
      .heroStage.is-invite .bubbleSpecular{
        animation:none!important;
      }
    }

    /* BUY rectangle: shared pulse animation */
    @keyframes heroBuyPulse{
      0%,100%{
        transform:translate3d(-50%,0,0) scale(1);
        box-shadow:0 16px 34px rgba(0,0,0,.28), 0 0 0 rgba(214,166,71,0), inset 0 -2px 0 rgba(0,0,0,.12);
      }
      50%{
        transform:translate3d(-50%,-2px,0) scale(1.045);
        box-shadow:0 20px 42px rgba(0,0,0,.34), 0 0 22px rgba(214,166,71,.34), inset 0 -2px 0 rgba(0,0,0,.14);
      }
    }

    /* # HERO BUY — unico proprietario definitivo di geometria, stati e testo del pulsante Compra. */
    .hero > #heroDealBuy{
      position:absolute!important;
      left:50%!important;
      right:auto!important;
      top:auto!important;
      bottom:84px!important;
      z-index:80!important;
      width:clamp(92px,10vw,120px)!important;
      height:44px!important;
      min-height:44px!important;
      aspect-ratio:auto!important;
      display:flex!important;
      align-items:center!important;
      justify-content:center!important;
      padding:0 16px!important;
      border:0!important;
      border-radius:6px!important;
      background:linear-gradient(135deg,#b77c22,#edc76f)!important;
      color:#050505!important;
      box-shadow:0 16px 34px rgba(0,0,0,.28), inset 0 -2px 0 rgba(0,0,0,.12)!important;
      text-shadow:none!important;
      opacity:0!important;
      visibility:hidden!important;
      pointer-events:none!important;
      transform:translate3d(-50%,10px,0) scale(.96)!important;
      transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s, box-shadow .18s ease!important;
      overflow:hidden!important;
      mix-blend-mode:normal!important;
      appearance:none!important;
      -webkit-appearance:none!important;
    }
    .hero > #heroDealBuy::before,
    .hero > #heroDealBuy::after,
    .hero > #heroDealBuy .heroSmallBubbleShell,
    .hero > #heroDealBuy .heroPrice{
      display:none!important;
      content:none!important;
      opacity:0!important;
    }
    .hero > #heroDealBuy .heroBuyWord{
      display:block!important;
      margin:0!important;
      color:#050505!important;
      font-family:"Montserrat",Arial,sans-serif!important;
      font-size:19px!important;
      line-height:1!important;
      font-weight:950!important;
      letter-spacing:0!important;
      text-transform:none!important;
      transform:none!important;
      opacity:1!important;
      filter:none!important;
      mix-blend-mode:normal!important;
    }
    #heroStage.buySettled:not(.spin) ~ #heroDealBuy{
      opacity:1!important;
      visibility:visible!important;
      pointer-events:auto!important;
      transform:translate3d(-50%,0,0) scale(1)!important;
      animation:heroBuyPulse 1.55s ease-in-out infinite!important;
    }
    #heroStage.buySettled.buyExpired:not(.spin) ~ #heroDealBuy,
    #heroStage.spin ~ #heroDealBuy,
    #heroStage:not(.buySettled) ~ #heroDealBuy{
      opacity:0!important;
      visibility:hidden!important;
      pointer-events:none!important;
      transform:translate3d(-50%,10px,0) scale(.96)!important;
      animation:none!important;
    }
    #heroStage.buySettled:not(.spin) ~ #heroDealBuy:hover{
      transform:translate3d(-50%,-2px,0) scale(1.02)!important;
      box-shadow:0 18px 38px rgba(0,0,0,.34), 0 0 22px rgba(214,166,71,.30), inset 0 -2px 0 rgba(0,0,0,.14)!important;
    }
    #heroStage.buySettled:not(.spin) ~ #heroDealBuy:active{
      transform:translate3d(-50%,1px,0) scale(.99)!important;
    }
    @media(max-width:820px){
      .hero > #heroDealBuy{
        bottom:66px!important;
        width:94px!important;
        height:42px!important;
      }
      .hero > #heroDealBuy .heroBuyWord{font-size:18px!important;}
    }



    /* Light Plus real GLB montage */
    .lightPlusRealMontage{
      background:#000!important;
      color:#fff!important;
      overflow:hidden!important;
      min-height:100svh!important;
    }
    .lightPlusRealMontage .wrap{
      max-width:min(1460px,calc(100vw - 34px));
      margin:0 auto;
      padding:0 17px;
    }
.lightRealScene{
      position:relative;
      display:grid;
      grid-template-columns:minmax(0,1fr) 340px;
      gap:24px;
      align-items:center;
      min-height:min(78svh,820px);
      z-index:2;
    }
    .lightRealStage{
      position:relative;
      min-height:min(72svh,780px);
      cursor:pointer;
      touch-action:manipulation;
      outline:none;
    }
    .lightRealStage:focus-visible{
      box-shadow:0 0 0 3px rgba(117,246,255,.42);
      border-radius:8px;
    }
    .lightRealGlow{
      position:absolute;
      inset:6% -10% 2% -12%;
      background:
        radial-gradient(circle at 44% 48%, rgba(95,236,246,.20), transparent 24%),
        radial-gradient(circle at 58% 42%, rgba(255,75,139,.16), transparent 32%),
        radial-gradient(circle at 50% 50%, rgba(214,210,80,.10), transparent 44%);
      filter:blur(8px);
      pointer-events:none;
    }
    .lightPlusMontageModel{
      position:absolute;
      inset:-8% -15% -6% -15%;
      width:auto;
      height:101%;
      filter:drop-shadow(0 22px 34px rgba(0,0,0,.58));
      --poster-color:transparent;
      background:transparent;
    }
    .lightRealScene[data-state="open"] .lightRealGlow,
    .lightRealScene.is-playing .lightRealGlow{
      inset:6% -10% -12% -12%;
    }
    .lightRealScene[data-state="open"] .lightPlusMontageModel{
      pointer-events:auto;
      touch-action:none;
    }
    .lightRealScene.is-switching-src .lightRealGlow,
    .lightRealScene.is-restoring-closed .lightRealGlow{
      opacity:0;
      transition:opacity .18s ease;
    }
@media(max-width:900px){
    .lightRealScene{
        grid-template-columns:1fr;
        min-height:auto;
      }
      .lightRealStage{
        min-height:620px;
      }
}
/* Desktop Light Plus: wide stage with info overlay */
    @media (min-width: 901px){
      .lightPlusRealMontage{
        padding-left:0!important;
        padding-right:0!important;
      }
      .lightPlusRealMontage .wrap{
        width:calc(100vw - 8px);
        max-width:1640px;
        padding-left:4px;
        padding-right:4px;
      }
      .lightPlusRealMontage .lightRealScene{
        grid-template-columns:1fr!important;
        gap:0!important;
      }
      .lightPlusRealMontage .lightRealStage{
        min-height:min(78svh,840px);
      }
}
    /* Bring It On simple cinematic scene - 20260709 */
    .lightPlusRealMontage{
      position:relative;
      overflow:hidden;
      min-height:0!important;
      padding-left:0!important;
      padding-right:0!important;
      padding-top:0!important;
      padding-bottom:0!important;
      border-top:0!important;
      border-bottom:0!important;
      background:#030303!important;
    }
    .lightPlusRealMontage .wrap{
      position:relative;
      z-index:1;
      width:100%!important;
      max-width:none!important;
      padding-left:0!important;
      padding-right:0!important;
    }
    .lightPlusRealMontage .lightRealScene{
      grid-template-columns:minmax(0,1fr)!important;
      min-height:auto;
    }
    .lightPlusRealMontage .lightRealStage{
      overflow:hidden;
      isolation:isolate;
      min-height:clamp(780px,104svh,1020px);
      border-radius:0;
      background:#030303 url("assets/FOTO_DA_GESTIRE/01_HOME_SFONDI/desert notte2 optimized.webp?v=light-desert-bg-20260717") center center/cover no-repeat!important;
    }
    .lightPlusRealMontage .lightRealGlow{
      z-index:0;
      inset:0 -6% 16% -6%;
      background:
        radial-gradient(ellipse at 50% 25%, rgba(190,247,255,.28), rgba(105,224,255,.13) 18%, transparent 35%),
        radial-gradient(ellipse at 50% 58%, rgba(190,247,255,.18), rgba(105,224,255,.08) 15%, transparent 30%),
        radial-gradient(ellipse at 42% 48%, rgba(99,238,245,.30), transparent 25%),
        radial-gradient(ellipse at 62% 43%, rgba(255,92,72,.23), transparent 32%),
        radial-gradient(ellipse at 50% 56%, rgba(226,199,78,.10), transparent 42%);
      filter:blur(22px) saturate(1.18);
      opacity:1;
      -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 72%,rgba(0,0,0,.22) 86%,transparent 100%);
      mask-image:linear-gradient(180deg,#000 0%,#000 72%,rgba(0,0,0,.22) 86%,transparent 100%);
    }
    .lightPlusRealMontage .lightRealStage:after{
      content:"";
      position:absolute;
      inset:-1px;
      z-index:3;
      pointer-events:none;
      background:radial-gradient(ellipse at center, transparent 52%, rgba(0,0,0,.20) 82%, rgba(0,0,0,.38) 100%);
      mix-blend-mode:multiply;
    }
    .lightPlusRealMontage .lightPlusMontageModel{
      z-index:2;
      transform-origin:center center;
      transform:translate(0, -54px)!important;
      filter:
        drop-shadow(0 26px 38px rgba(0,0,0,.66))
        drop-shadow(0 0 22px rgba(255,255,255,.10));
    }
    .lightPlusRealMontage .lightConfiguratorBtn{
      bottom:44px!important;
      transform:translateX(-50%)!important;
    }
    .lightRealScene.is-switching-src .lightPlusMontageModel{
      opacity:0;
      transition:none;
    }    .lightRealScene.is-restoring-closed .lightPlusMontageModel{
      opacity:0!important;
      visibility:hidden;
      transition:none;
    }
    .lightRealScene.is-soft-reset .lightPlusMontageModel{
      opacity:0;
      transition:opacity .22s ease;
    }
@media(max-width:900px){
      .lightPlusRealMontage .lightRealStage{
        min-height:clamp(666px,96svh,920px);
        background-position:center center!important;
        background-size:cover!important;
      }
      .lightPlusRealMontage .lightPlusMontageModel{
        inset:-8% -17% -4% -17%;
        transform-origin:center center;
      }
    }
    @media(max-width:820px){
      model-viewer:not(#lightPlusMontageModel){
        touch-action:pan-y!important;
      }
      #heroModel,
      .productVisual model-viewer,
      .partArt model-viewer{
        pointer-events:none!important;
      }
      #customModel{
        pointer-events:auto!important;
        touch-action:pan-y!important;
      }
      #custom .customHero{
        touch-action:pan-y!important;
        overscroll-behavior-x:none;
        user-select:none;
        -webkit-user-select:none;
      }
      #lightRealScene:not([data-state="open"]) #lightPlusMontageModel{
        pointer-events:none!important;
        touch-action:pan-y!important;
      }
      /* Discover remains draggable during its renewable 10-second open hold. */
      #lightRealScene[data-state="open"] #lightPlusMontageModel{
        pointer-events:auto!important;
        touch-action:none!important;
      }
    }
    /* End Bring It On simple cinematic scene */


/* Fix mobile bubble tap artifact */
@media (max-width: 820px){
  #heroStage,
  #heroStage *{
    -webkit-tap-highlight-color: transparent !important;
  }

  #heroStage .bubble3d,
  #heroStage .bubbleGlass,
  #heroStage .bubbleFx,
  #heroStage .bubbleShell,
  #heroStage .bubbleShellMain,
  #heroStage .heroRisingBubble,
  #heroStage .coneGlowField,
  #heroStage .heroBubbleDetachNeck{
    pointer-events: none !important;
    background: transparent !important;
    outline: 0 !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  #heroStage model-viewer.heroRisingBubble,
  #heroStage model-viewer.bubbleShell,
  #heroStage model-viewer.bubbleShellMain{
    --poster-color: transparent !important;
    --progress-bar-color: transparent !important;
    --progress-bar-height: 0px !important;
    background: transparent !important;
    pointer-events: none !important;
    outline: none !important;
    touch-action: none !important;
  }
}

/* v312: keep the selected hero photograph on the real section background.
   This avoids losing it when the animated ::before lens is recomposited. */
.hero,
.hero.is-night{
  background-image:var(--mood-image)!important;
  background-size:cover!important;
  background-position:var(--hero-parallax-x,50%) var(--hero-parallax-y,50%)!important;
  background-repeat:no-repeat!important;
}
.hero:before{
  background:linear-gradient(180deg,rgba(5,6,14,.14) 0%,rgba(10,8,18,.025) 44%,rgba(4,4,10,.20) 100%)!important;
  opacity:1!important;
}

/* Full-screen product shelves: four products per view, Catalog always remains last. */
@media (min-width: 1360px) and (min-height: 760px){
  #catalog .readyTrack,
  #catalog-light-off .readyTrack{
    grid-auto-columns:calc((100% - 48px)/4) !important;
    gap:16px !important;
  }
  #parts .partsGrid{
    grid-auto-columns:calc((100% - 72px)/4) !important;
    gap:24px !important;
  }
  /* # HOME — ALLINEAMENTO FULL SCREEN: mantiene le fotografie in linea e lascia spazio sopra le etichette. */
  #catalog .homeStaticImage.homeStaticLightOn,
  #catalog-light-off .homeStaticImage.homeStaticLightOn{
    transform:translateY(-8px)!important;
  }
}

/* # COMPONENTS — ALLINEAMENTO DESKTOP
   Mantiene cover complete e coni Crystal sulla stessa linea visiva senza alterare il sistema mobile. */
@media (min-width:821px){
  #catalog .homeStaticImage.homeStaticLightOn,
  #catalog-light-off .homeStaticImage.homeStaticLightOn{
    width:104%!important;
    height:104%!important;
    transform:translateY(-8px)!important;
  }
  #catalog .homeStaticImage.homeStaticLightOff,
  #catalog-light-off .homeStaticImage.homeStaticLightOff{
    width:112%!important;
    height:112%!important;
    transform:translateY(-2px)!important;
  }
  #parts .part:not(.partCoverSet):not(.partConeSet):not(.catalogProduct) .homeStaticImage{
    width:88%;
    height:88%;
    margin:6% auto 0;
    object-fit:contain;
  }
  #parts .partCoverSet .homeStaticImage,
  #parts .partConeSet .homeStaticImage{
    width:96%;
    height:96%;
    margin:2% auto 0;
    object-fit:contain;
  }
  /* # HOME COMPONENT — RITMO UNICO DAL TABLET AL FULL SCREEN:
     replica il respiro mobile tra fotografia, badge e nome senza cambiare il telefono. */
  #parts .part:not(.partLightSystem):not(.catalogProduct) .homeStaticImage{
    transform:translateY(-32px);
  }
  #parts .part.partLightSystem:not(.partCoverSet):not(.partConeSet):not(.catalogProduct) .homeStaticImage{
    width:84%;
    height:84%;
    margin:0 auto;
    object-position:center;
    transform:translateY(-28px);
  }
}

/* # HERO BOLLA BLINDATA 20260810
   Contratto definitivo: scale responsive, baricentro Light Off, ordine del
   risultato e moto da biliardo si cambiano soltanto aggiornando verifica_sito.py. */
/* Definitive responsive relation: the Jigger follows the real bubble diameter
   continuously at every viewport size. Bubble geometry remains untouched. */
.heroModelPivot{
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  transform-origin:50% 50%;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  contain:layout paint style;
  will-change:transform;
}
.heroStage{
  --hero-model-scale-on:.76;
  --hero-model-scale-off:.825;
}
/* # HERO FULL SCREEN - il telefono conserva l'inquadratura contenuta;
   dal tablet in su entrambi gli stati riempiono un poco di piu la bolla. */
@media(min-width:821px){
  .heroStage{
    --hero-model-scale-on:.82;
    --hero-model-scale-off:1.02;
  }
}
.heroModelPivot #heroModel{
  width:100%;
  height:100%;
}
/* # HERO SPIN — la cornice resta centrata sulla bolla e contiene gli estremi
   del Jigger durante la rotazione, senza alterare le scale Light On/Off. */
.heroStage.spin .heroModelPivot{
  clip-path:circle(calc(min(260px,48vw,30vh) - 10px) at 50% 50%);
}
.heroStage.lightOn #heroModel{
  --hero-spin-y:0px!important;
  translate:0 0!important;
  transform:scale(var(--hero-model-scale-on,.76)) rotate(var(--jigger-clock-rot,0deg))!important;
}
/* # HERO LIGHT OFF MOBILE - 24 px in basso compensano l'assenza della basetta. */
.heroStage.lightOff #heroModel{
  --hero-spin-y:24px!important;
  translate:0 24px!important;
  transform:scale(var(--hero-model-scale-off,.825)) rotate(var(--jigger-clock-rot,0deg))!important;
  filter:saturate(1.06) contrast(1.02) brightness(.96)!important;
}
/* # HERO LIGHT OFF DESKTOP - il baricentro visivo del modello senza basetta
   viene portato sul centro della bolla e resta il perno della roulette. */
@media(min-width:821px){
  .heroStage.lightOff #heroModel{
    --hero-spin-y:62px!important;
    translate:0 62px!important;
    transform-origin:50% calc(50% - 62px)!important;
  }
}
.heroStage.spin #heroModel{
  transform-origin:50% 50%!important;
  transition:none!important;
  transform:scale(var(--hero-spin-model-scale,var(--hero-model-scale-on,.76))) rotate(var(--jigger-clock-rot,0deg))!important;
}
/* Il risultato Light puo essere gia deciso, ma durante il giro il baricentro
   segue la geometria ancora visibile. La classe Light continua a scegliere
   soltanto una delle due scale approvate. */
.heroStage.spin[data-spin-source-state="on"] #heroModel{
  --hero-spin-y:0px!important;
  translate:0 0!important;
  transform-origin:50% 50%!important;
}
.heroStage.spin[data-spin-source-state="off"] #heroModel{
  --hero-spin-y:24px!important;
  translate:0 24px!important;
  transform-origin:50% calc(50% - 24px)!important;
}
@media(min-width:821px){
  .heroStage.spin[data-spin-source-state="off"] #heroModel{
    --hero-spin-y:62px!important;
    translate:0 62px!important;
    transform-origin:50% calc(50% - 62px)!important;
  }
}
/* # HERO LIGHT OFF MOBILE - senza la basetta il baricentro visivo e piu alto:
   la roulette ruota attorno al centro reale del Jigger, senza descrivere un'orbita. */
@media(max-width:820px){
  .heroStage.spin[data-spin-source-state="off"] #heroModel{
    transform-origin:50% calc(50% - 24px)!important;
  }
}
@media(max-width:600px){
  .hero{
    isolation:isolate!important;
    contain:paint!important;
  }
  .hero,
  .hero:before{
    backface-visibility:hidden!important;
    -webkit-backface-visibility:hidden!important;
  }
}

/* Phone roulette: Light On uses the same lightweight compositor path as
   Light Off. The cone aura returns automatically when the spin ends. */
@media(max-width:820px){
  /* # HERO SPIN MOBILE - il solo modello ruota; gli strati decorativi della
     bolla restano fermi per evitare doppia rotazione e lampeggi del fondo. */
  .heroStage.spin .bubble3d,
  .heroStage.spin .bubbleShellMain,
  .heroStage.spin .bubbleGlass{
    animation:none!important;
  }
  .heroStage.spin .bubbleFx,
  .heroStage.spin .bubbleGlass span{
    visibility:hidden!important;
    opacity:0!important;
    animation:none!important;
  }
  .heroStage.lightOn.spin .coneGlowField,
  .heroStage.lightOn.spin .coneGlowField:before,
  .heroStage.lightOn.spin .coneGlow{
    display:none!important;
    animation:none!important;
    opacity:0!important;
    filter:none!important;
    box-shadow:none!important;
  }
  .heroStage.lightOn.spin .bubbleFx{
    visibility:hidden!important;
    opacity:0!important;
    animation:none!important;
    filter:none!important;
  }
  .heroStage.lightOn.spin #heroModel{
    transition:none!important;
    filter:saturate(1.06) contrast(1.02) brightness(.98) drop-shadow(0 38px 54px rgba(0,0,0,.22))!important;
  }
}

/* # HERO — CARICAMENTO UNITO
   Finché heroInitialPending è presente, bolla, glow e modello restano nascosti e appaiono nello stesso fotogramma. */
.heroStage.heroInitialPending:before,
.heroStage.heroInitialPending:after,
.heroStage.heroInitialPending .bubble3d,
.heroStage.heroInitialPending .bubbleShellMain,
.heroStage.heroInitialPending .bubbleFx,
.heroStage.heroInitialPending .bubbleGlass,
.heroStage.heroInitialPending .coneGlowField,
.heroStage.heroInitialPending #heroModel{
  opacity:0!important;
  visibility:hidden!important;
}

/* # COMPONENTS — DIMENSIONI TELEFONO/TABLET
   Le immagini mantengono proporzioni continue senza salti improvvisi tra una larghezza e l'altra. */
@media (max-width:820px){
  #catalogGrid .productVisual,
  #catalog-light-off .productVisual,
  #parts .partArt{
    height:clamp(250px,calc(231.9px + 4.65vw),270px)!important;
  }
  #catalog .homeStaticImage.homeStaticLightOn,
  #catalog-light-off .homeStaticImage.homeStaticLightOn{
    width:clamp(258px,69vw,292px)!important;
    height:auto!important;
    transform:translateY(-8px)!important;
  }
  #catalog .homeStaticImage.homeStaticLightOff,
  #catalog-light-off .homeStaticImage.homeStaticLightOff{
    width:clamp(264px,71vw,300px)!important;
    height:auto!important;
    transform:translateY(-2px)!important;
  }
  #parts .part:not(.partCoverSet):not(.partConeSet):not(.catalogProduct) .homeStaticImage{
    width:clamp(220px,58vw,246px)!important;
    height:auto!important;
  }
  #parts .partCoverSet .homeStaticImage{
    width:clamp(248px,66vw,280px)!important;
    height:auto!important;
  }
  #parts .partConeSet .homeStaticImage{
    width:clamp(248px,66vw,280px)!important;
    height:auto!important;
    transform:none!important;
  }
  #catalog:after,
  #catalog-light-off:after,
  #parts:after{
    filter:saturate(1.08) blur(10px)!important;
    opacity:.48!important;
  }
}

/* # HOME MOBILE — due modelli reali per riga visiva, senza modificare tablet e desktop. */
@media (max-width:600px){
  #catalog .readyShelf{
    margin-top:-87px!important;
  }
  #catalog .readyTrack>.product>.productBody{
    padding-top:47px!important;
  }
  #catalog-light-off .readyShelf{
    margin-top:-100px!important;
  }
  #catalog-light-off .readyTrack>.product>.productBody{
    padding-top:128px!important;
  }
  #catalog .readyTrack,
  #catalog-light-off .readyTrack{
    grid-template-columns:none!important;
    grid-auto-columns:calc((100% - 2px)/2)!important;
    gap:2px!important;
    padding:0 0 20px!important;
  }
  #parts .partsGrid{
    grid-template-columns:none!important;
    grid-auto-columns:calc((100% - 4px)/2)!important;
    gap:4px!important;
    padding:0 0 20px!important;
  }
  #catalog .readyTrack>.product,
  #catalog-light-off .readyTrack>.product,
  #parts .partsGrid>.part{
    box-sizing:border-box!important;
    padding-inline:4px!important;
  }
  #catalog .productVisual,
  #catalog-light-off .productVisual{
    height:180px!important;
  }
  #catalog-light-off .productVisual{
    height:104px!important;
  }
  #parts .partArt{
    height:230px!important;
  }
  #catalog .homeStaticImage.homeStaticLightOn,
  #catalog .homeStaticImage.homeStaticLightOff,
  #catalog-light-off .homeStaticImage.homeStaticLightOn,
  #catalog-light-off .homeStaticImage.homeStaticLightOff{
    width:100%!important;
    max-width:100%!important;
    height:230px!important;
    margin:0 auto!important;
    object-fit:contain!important;
    scale:1.42;
    transform-origin:center;
  }
  #parts .part .homeStaticImage{
    width:100%!important;
    max-width:100%!important;
    height:100%!important;
    margin:0 auto!important;
    object-fit:contain!important;
    scale:1.36;
    transform-origin:center;
  }
}

/* # HOME LIGHT DESKTOP — bilancia lo spazio tra selettore, modello e dati prodotto. */
@media (min-width:721px){
  #catalog .readyTrack>.product>.productBody{
    padding-top:55px!important;
  }
  #catalog-light-off .readyTrack>.product>.productBody{
    padding-top:55px!important;
  }
}

/* # HOME — CONTINUITÀ FULL SCREEN: uniforma il cono Crystal alle fotografie Component vicine. */
@media (min-width:1360px) and (min-height:760px){
  #catalog .readyShelf:before,
  #catalog .readyShelf:after,
  #catalog-light-off .readyShelf:before,
  #catalog-light-off .readyShelf:after{
    display:none!important;
    content:none!important;
  }
  #catalog .homeStaticImage.homeStaticLightOn,
  #catalog-light-off .homeStaticImage.homeStaticLightOn{
    transform:translateY(-28px)!important;
  }
  #catalog .homeStaticImage.homeStaticLightOff,
  #catalog-light-off .homeStaticImage.homeStaticLightOff{
    transform:translateY(-2px)!important;
  }
  #parts .partConeSet .partArt model-viewer{
    width:122%!important;
    height:122%!important;
    transform:translateY(20px)!important;
  }
}

/* # HOME SAFARI MAC — PARITA OTTICA CON ANDROID
   Compensa il rapporto tra fotografie e schede desktop senza modificare Android,
   geometria delle sezioni o posizionamento verticale gia approvato. */
@media (min-width:821px){
  .safariMac #catalog .homeStaticImage,
  .safariMac #catalog-light-off .homeStaticImage{
    scale:1.02;
  }
  .safariMac #parts .partLightSystem .homeStaticImage{
    scale:1.08;
  }
  .safariMac #parts .partCoverSet .homeStaticImage,
  .safariMac #parts .partConeSet .homeStaticImage{
    scale:1.14;
  }
}

/* # HOME COMPONENT - La scheda finale contiene soltanto Catalog, centrato nella casella. */
#parts .componentCatalogProduct{
  display:grid;
  grid-template:none;
  place-items:center;
  align-content:center;
  justify-content:center;
}
#parts .componentCatalogProduct .catalogOnlyLink{
  align-self:center;
  justify-self:center;
  margin:auto;
}

/* # HOME PORTATILI BASSI — stessa composizione a quattro prodotti del full
   screen, ma con fotografie contenute quando Windows/Edge riducono l'altezza
   CSS utile (tipico 1600x900 con scala di sistema al 125%). */
@media (min-width:1121px) and (max-height:760px){
  #catalog .readyTrack,
  #catalog-light-off .readyTrack{
    grid-auto-columns:calc((100% - 48px)/4)!important;
    gap:16px!important;
  }
  #catalog .productVisual,
  #catalog-light-off .productVisual{
    height:clamp(190px,30vh,216px)!important;
  }
  #catalog .homeStaticImage.homeStaticLightOn,
  #catalog .homeStaticImage.homeStaticLightOff,
  #catalog-light-off .homeStaticImage.homeStaticLightOn,
  #catalog-light-off .homeStaticImage.homeStaticLightOff{
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    scale:1!important;
    transform:translateY(-6px)!important;
    object-fit:contain!important;
  }
  #catalog .readyTrack>.product>.productBody,
  #catalog-light-off .readyTrack>.product>.productBody{
    padding-top:18px!important;
  }
}