/* Second edition: individual palettes, photographic mounts and calm spatial motion. */
body{--ease:cubic-bezier(.2,.75,.2,1);--photo-mat:var(--panel);--frame-color:var(--line);overflow-x:clip}
body[data-brand=parola]{color-scheme:light;--bg:#f5f3eb;--panel:#e8edf5;--text:#192743;--muted:#536079;--accent:#284db0;--line:#bac6da;--photo-mat:#fffcf5;--frame-color:#748bb9}
body[data-brand=apex]{color-scheme:light;--bg:#f3f5f7;--panel:#e6ecf2;--text:#17293d;--muted:#536579;--accent:#245dc0;--line:#b8c7d7;--photo-mat:#fff;--frame-color:#7f9ab8}
body[data-brand=noir]{--bg:#211922;--panel:#302333;--text:#f4e7ed;--muted:#c9b4c4;--accent:#e4b3ce;--line:#765a71;--photo-mat:#38293a;--frame-color:#b68aa7}
body[data-brand=velora]{--frame-color:#c6a18f;--photo-mat:#302024}
.project-note{background:var(--panel);color:var(--muted)}
html{scrollbar-color:var(--accent) var(--bg)}
html:has(body[data-brand=parola]){color-scheme:light;scrollbar-color:#284db0 #f5f3eb}
html:has(body[data-brand=apex]){color-scheme:light;scrollbar-color:#245dc0 #f3f5f7}
html:has(body[data-brand=noir]){scrollbar-color:#b88caa #211922}
.hero-copy{color:var(--muted)}
.btn{color:var(--bg);transition:transform .65s var(--ease),box-shadow .65s var(--ease),background .4s}
.btn.ghost{color:var(--accent)}
.btn:hover{box-shadow:0 12px 30px color-mix(in srgb,var(--accent) 18%,transparent)}
.arrow-circle{border-color:var(--frame-color)}
.arrow-circle:hover,button:hover>.arrow-circle,a:hover>.arrow-circle,.card:hover .arrow-circle{color:var(--bg)}
.float-chip,.chips button[aria-pressed=true]{color:var(--bg)}
.hero-tag span,.language-label{background:color-mix(in srgb,var(--bg) 94%,transparent);color:var(--text);border:1px solid var(--frame-color)}
.beauty-pillars,.apex-benefits{color:var(--accent)}
/* A visible mount rather than an invisible one-pixel edge. */
.frame,.hero-portrait{border:1px solid var(--frame-color);padding:9px;background:var(--photo-mat);box-shadow:0 9px 25px #080a1210}
.frame:after,.hero-portrait:after{content:'';position:absolute;inset:5px;border:1px solid color-mix(in srgb,var(--frame-color) 45%,transparent);pointer-events:none;z-index:2}
.frame img,.hero-portrait>img{border-radius:2px}
.gallery-grid>button{border:1px solid var(--frame-color);padding:5px;background:var(--photo-mat);border-radius:5px}
.gallery-grid .frame{border:0;padding:0;box-shadow:none}
.gallery-grid .frame:after{inset:5px}
.profile-card>.frame{margin:8px;min-height:284px}
.detail-photo{padding:9px;border-bottom:1px solid var(--frame-color)}
.gallery-dialog>img{padding:9px;border-bottom:1px solid var(--frame-color);background:var(--photo-mat)}
.floating-photo{padding:10px;border:1px solid var(--frame-color)}
.wide-photo,.apex-strip{padding:18px;background:var(--panel);border-block:1px solid var(--frame-color)}
.round-mark,.round-mark:before{border-color:var(--frame-color)}
.hero.full:not(.apex-hero):before{content:'';position:absolute;inset:16px;border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);z-index:2;pointer-events:none}
.hero.full:not(.apex-hero) .hero-copy{color:#f4e7ed}
.js .reveal{transition:opacity 1.05s var(--ease),transform 1.2s var(--ease);transform:translateY(24px)}
.js .reveal.in{transform:none}
.js .frame.reveal{transition:clip-path 1.45s var(--ease),opacity 1.1s var(--ease),transform 1.2s var(--ease)}
.word-inner{transition:transform 1.2s var(--ease),opacity .9s var(--ease)}
.frame img{transition:transform 1.4s var(--ease),clip-path 1.4s var(--ease)}
.tilt-surface{transition:transform .85s var(--ease)}
.price-card,.flash-card{transition:transform .7s var(--ease),border-color .6s,box-shadow .7s}
.card .frame{transition:border-color .7s,box-shadow .7s}
.card:hover .frame{border-color:var(--accent);box-shadow:0 16px 34px #0e19351a}
.hero-collage,.image-collage{perspective:1300px}
.hero-collage{transform:translateY(var(--collage-y,0px)) rotateX(var(--collage-rx,0deg));transition:transform .2s linear}
.hero-portrait>img,.hero-photo img{animation-duration:1.9s,26s}
.frame.visible img{animation-duration:26s}
.closing:before,.closing:after{border-color:color-mix(in srgb,var(--accent) 12%,transparent)}
.swap{animation:soft-swap .85s var(--ease)}
@keyframes soft-swap{from{opacity:.15;transform:translateY(12px)}to{opacity:1;transform:none}}
/* PAROLA: paper, cobalt, and tactile language cards. */
.parola-hero .hero-collage:before{border:1px solid #8299c8;background:#dce4f0;z-index:-1;inset:25px -15px -16px 20px}
.parola-hero .hero-portrait{padding:12px;rotate:1.5deg;border-radius:8px;background:#fffdf7;box-shadow:16px 20px 0 #dfe6f1}
.language-bubble{background:#f1b5a2;color:#532c25;box-shadow:0 12px 35px #19274318}
.parola-hero .float-chip{background:#284db0;color:#fff}
.parola-hero h1 em{color:#284db0}
.language-word{font-size:clamp(56px,6.3vw,100px)}
.parola-promise{color:var(--text)}
.language-story{height:180vh;min-height:1150px;background:#dce5f6;position:relative;overflow:clip;border-block:1px solid #b0c1df;--spread:0}
.spatial-sticky{position:sticky;top:80px;height:calc(100svh - 80px);min-height:650px;display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:65px}
.spatial-copy h2{margin:24px 0}
.spatial-copy>p:not(.eyebrow){color:var(--muted);max-width:420px;font-size:13px;line-height:1.95}
.spatial-controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:30px}
.spatial-controls button{border:1px solid var(--accent);border-radius:50%;width:46px;height:46px;color:var(--accent);font-size:23px;background:color-mix(in srgb,var(--bg) 65%,transparent);transition:background .5s,transform .5s}
.spatial-controls button:hover{background:var(--accent);color:var(--bg);transform:translateY(-3px)}
.spatial-controls small{font-size:9px;letter-spacing:.09em;color:var(--muted)}
.word-stage{position:relative;perspective:1400px;display:grid;place-items:center;height:560px}
.word-stage:before{content:'';position:absolute;width:430px;height:430px;border:1px solid #8ba3cc;border-radius:50%;transform:rotateX(62deg);box-shadow:0 30px 50px #2f538f18}
.word-stage:after{content:'';position:absolute;left:25%;right:25%;bottom:55px;height:25px;border-radius:50%;background:#254d9c26;filter:blur(18px)}
.word-cube{width:245px;height:245px;position:relative;transform-style:preserve-3d;transform:rotateX(-12deg) rotateY(var(--word-angle,-25deg));will-change:transform}
.word-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;backface-visibility:hidden;background:#fffcf4;border:2px solid #7892be;box-shadow:inset 0 0 0 8px #edf0f5;color:#284db0}
.word-face strong{font:italic 58px/1.1 var(--serif);letter-spacing:-.03em}
.word-face small{font-size:9px;letter-spacing:.18em;margin-bottom:21px}
.word-face span{font-size:11px;margin-top:23px;letter-spacing:.07em}
.word-front{transform:translateZ(122.5px)}.word-right{transform:rotateY(90deg) translateZ(122.5px);background:#f4b7a6;color:#63382b}.word-back{transform:rotateY(180deg) translateZ(122.5px);background:#284db0;color:#fff}.word-left{transform:rotateY(-90deg) translateZ(122.5px);background:#d6e8d9;color:#2b5744}.word-top{transform:rotateX(90deg) translateZ(122.5px);background:#f8ecd1}.word-bottom{transform:rotateX(-90deg) translateZ(122.5px)}
.spatial-phase{position:absolute;bottom:25px;right:0;font-size:9px;letter-spacing:.15em;color:var(--accent)}
.flash-card{padding:16px;min-height:275px;perspective:1100px;background:#f8f6ee;border:1px solid #8ba3cc;box-shadow:0 6px 0 #cbd5e6;border-radius:9px}
.flash-card:hover{transform:translateY(-5px)}
.flash-inner{position:relative;height:200px;transform-style:preserve-3d;transition:transform 1s var(--ease)}
.flash-card[aria-pressed=true] .flash-inner{transform:rotateY(180deg)}
.flash-side{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;backface-visibility:hidden;border-radius:4px;background:#e8edf6}
.flash-side.back{transform:rotateY(180deg);background:#284db0;color:#fff}
.flash-card .flash-answer{font:italic 40px/1.2 var(--serif);margin:0;color:inherit}
.flash-card .flash-hint{font-size:9px;letter-spacing:.03em;margin-top:16px}
/* NOIR retains the dark glass and warm metal of its existing model. */
.noir-hero .hero-light{background:linear-gradient(112deg,transparent 45%,#d7a8d61a 50%,transparent 56%)}
.bottle-story{background:radial-gradient(ellipse at 65% 45%,#64406140,transparent 55%),#18121b;border-color:#765a71}
.bottle-stage:before{border-color:#ba8fa54d}
.bottle-stage:after{background:#c48caa28}
.bottle-model{transition:transform .65s cubic-bezier(.16,.7,.25,1)}
body[data-brand=noir] #nuty,body[data-brand=noir] #zestaw{--bg:#efe6e9;--panel:#e3d7df;--text:#372439;--muted:#6b5367;--accent:#7b3d69;--line:#bda4b7;--frame-color:#9f7c96;--photo-mat:#faf5f4;background:var(--bg);color:var(--text);width:100%;padding-inline:max(52px,calc((100% - 1360px)/2))}
.noir-hero .hero-bottom{color:#f4e7ed}
.noir-still{padding:18px;background:var(--panel);border-block:1px solid var(--frame-color)}
/* APEX: a daylight editorial collage. */
.apex-hero{min-height:740px;max-height:none!important;height:auto!important;display:grid;grid-template-columns:.88fr 1.12fr;align-items:center;gap:40px;padding:68px 0 65px;overflow:visible}
.apex-hero .hero-content{padding:0;min-width:0}
.apex-hero h1{font-size:clamp(66px,6.3vw,108px);line-height:1;letter-spacing:-.07em}
.apex-hero h1 em{color:var(--accent);-webkit-text-stroke:0;font-weight:500}
.apex-hero .hero-copy{max-width:365px;font-size:13px;margin-top:27px}
.apex-hero .hero-actions{gap:22px;flex-wrap:wrap;margin-top:28px}
.apex-hero .hero-bottom{color:var(--muted);margin-top:32px;padding-bottom:0;justify-content:flex-start;font-size:8px}
.apex-hero:after{display:none}
.apex-collage{position:relative;min-width:0;padding:0 0 120px 14px;perspective:1300px}
.apex-main-photo{height:465px;rotate:-1.5deg;padding:10px;border-radius:7px;box-shadow:0 20px 50px #1d385422}
.apex-main-photo img{object-position:55% center}
.apex-mini{position:absolute;bottom:0;width:47%;padding:8px;background:#fff;border:1px solid #7f9ab8;border-radius:5px;box-shadow:0 12px 28px #1d385426;transition:transform .85s var(--ease);z-index:2;text-align:left}
.apex-mini.first{left:0;rotate:-6deg;animation:collage-breathe 11s ease-in-out infinite}
.apex-mini.second{right:-5px;bottom:20px;rotate:6deg;animation:collage-breathe 13s -4s ease-in-out infinite}
.apex-mini img{aspect-ratio:1.5;height:auto}
.apex-mini span{display:block;color:var(--muted);font-size:8px;letter-spacing:.08em;padding:10px 4px 3px}
.apex-mini:hover{transform:translateY(-9px) rotate(-2deg)}
.apex-photo-index{position:absolute;right:20px;top:20px;background:#f4f7f3e8;color:#17293d;border:1px solid #7f9ab8;padding:8px 12px;font-size:8px;letter-spacing:.12em;z-index:3}
@keyframes collage-breathe{50%{translate:0 -8px}}
.comparison{border:9px solid #fff;outline:1px solid var(--frame-color);border-radius:5px;background:var(--panel)}
.compare-handle{background:#f1f6ff}
.compare-handle:after{background:#173c67;color:#fff;border-color:#e4efff}
.compare-labels span{padding:7px 10px;background:#12293cc7;color:#fff;font-size:8px}
.apex-config .price-card{border-radius:7px}
.apex-config .price-card.featured{background:#1c3d67;color:#fff;--accent:#b4d4ff;--muted:#d3dfed;--bg:#1c3d67;--panel:#1c3d67}
.car-story{height:190vh;min-height:1250px;position:relative;overflow:clip;background:linear-gradient(145deg,#e0e9f5,#eef2f6 55%,#d5e2f2);border-block:1px solid var(--line);--car-spread:0}
.car-sticky{gap:25px;grid-template-columns:.8fr 1.2fr}
.car-stage{position:relative;height:540px;display:grid;place-items:center;perspective:1300px}
.car-stage:before{content:'';position:absolute;left:4%;right:0;bottom:100px;height:160px;border:1px solid #8ea8c4;border-radius:50%;transform:rotateX(65deg);background:radial-gradient(ellipse,#7d9fc233,transparent 65%)}
.car-assembly{position:relative;width:100%;aspect-ratio:1.5;transform-style:preserve-3d;transform:rotateX(var(--car-rx,0deg)) rotateY(var(--car-ry,0deg));will-change:transform}
.car-part{position:absolute;inset:0;object-fit:contain;transform:translate3d(var(--part-x,0px),var(--part-y,0px),var(--part-z,0px)) rotate(var(--part-r,0deg));filter:drop-shadow(0 10px 7px #24415d22);will-change:transform}
.clip-defs{position:absolute;width:0;height:0;overflow:hidden}
.car-upper{clip-path:url(#car-upper-clip)}.car-body{clip-path:url(#car-body-clip)}
.car-rear{clip-path:ellipse(8.3% 12.5% at 19.1% 66.7%);transform-origin:19.1% 66.7%}.car-front{clip-path:ellipse(8.3% 12.5% at 81.05% 68.3%);transform-origin:81.05% 68.3%}
.car-shadow{position:absolute;left:10%;right:5%;height:30px;bottom:100px;background:#335a821f;border-radius:50%;filter:blur(18px)}
.car-stage .spatial-phase{bottom:20px;right:10px}
.car-controls{margin-top:25px;max-width:365px}
.car-controls label{display:block;font-size:10px;color:var(--accent);margin-bottom:12px;letter-spacing:.04em}
.car-controls input{width:100%;accent-color:var(--accent);cursor:ew-resize}
.car-mode{border-bottom:1px solid var(--accent);font-size:10px;padding:7px 0;color:var(--accent);margin-top:12px}
.car-part-note{font-size:9px!important;margin-top:20px;max-width:360px}
.car-marker{position:absolute;color:#345778;font-size:8px;letter-spacing:.12em;border-top:1px solid #8da7c5;padding-top:7px;opacity:var(--marker-opacity,0)}
.car-marker.one{top:40px;right:25px}.car-marker.two{bottom:90px;left:25px}
@media(max-width:1100px){.spatial-sticky{gap:30px}.word-stage{scale:.88}.apex-hero{gap:25px}.apex-hero h1{font-size:76px}.apex-main-photo{height:420px}.apex-collage{padding-bottom:105px}.car-stage{height:480px}}
@media(min-width:761px) and (max-height:800px){.language-story,.car-story{height:auto;min-height:0}.spatial-sticky{position:relative;top:0;height:auto;min-height:0;padding-block:85px}}
@media(max-width:760px){
 .frame,.hero-portrait{padding:7px}.frame:after,.hero-portrait:after{inset:3px}
 .profile-card>.frame{margin:6px}.wide-photo,.apex-strip{padding:10px}
 .hero.full:not(.apex-hero):before{inset:10px}
 .hero-collage{transform:none}
 .language-story,.car-story{height:auto;min-height:0}
 .spatial-sticky{position:relative;top:0;height:auto;min-height:0;grid-template-columns:minmax(0,1fr);gap:10px;padding-block:65px}
 .spatial-copy h2{font-size:51px}.spatial-copy>p:not(.eyebrow){font-size:12px}
 .word-stage{height:420px;scale:.8;margin-block:-10px}.word-stage:before{width:360px;height:360px}.word-stage:after{bottom:35px}
 .word-cube{width:230px;height:230px}.word-front{transform:translateZ(115px)}.word-right{transform:rotateY(90deg) translateZ(115px)}.word-back{transform:rotateY(180deg) translateZ(115px)}.word-left{transform:rotateY(-90deg) translateZ(115px)}.word-top{transform:rotateX(90deg) translateZ(115px)}.word-bottom{transform:rotateX(-90deg) translateZ(115px)}
 .spatial-phase{bottom:0;font-size:10px}.spatial-controls{margin-top:22px}
 .parola-hero .hero-portrait{padding:8px;box-shadow:8px 10px 0 #dfe6f1}
 .parola-hero .hero-collage:before{inset:18px 0 -10px 10px}
 .flash-grid{gap:20px}.flash-card{min-height:240px}.flash-inner{height:170px}
 body[data-brand=noir] #nuty,body[data-brand=noir] #zestaw{padding-inline:23px}
 .bottle-model{transition:transform .7s var(--ease)}
 .apex-hero{display:flex;flex-direction:column;gap:38px;padding-block:55px 65px;min-height:0;overflow:hidden;width:100%;padding-inline:23px}
 .apex-hero .hero-content{padding:0;width:100%}.apex-hero h1{font-size:clamp(46px,12.1vw,66px)}
 .apex-hero .hero-copy{font-size:12px}.apex-hero .hero-actions{gap:17px;flex-direction:row;align-items:center}.apex-hero .hero-actions .btn{gap:22px;padding-inline:17px}.apex-hero .hero-bottom{margin-top:22px;font-size:8px}
 .apex-collage{padding:0 3px 88px 4px;width:100%}.apex-main-photo{height:310px;rotate:-1deg}.apex-mini{padding:6px;width:47%}.apex-mini span{font-size:7px;padding:6px 2px 2px}.apex-mini.second{right:3px;bottom:12px;rotate:4deg}.apex-mini.first{left:3px;rotate:-4deg}
 .apex-photo-index{top:17px;right:17px;font-size:7px}
 .car-stage{height:320px;margin-top:15px}.car-stage:before{bottom:47px;height:100px}.car-shadow{bottom:50px}
 .car-assembly{width:100%;margin-left:0}.car-stage .spatial-phase{bottom:0;right:0;font-size:8px}.car-marker.one{top:5px}.car-marker.two{bottom:30px}
 .car-controls{max-width:100%}.car-part-note{font-size:8px!important}.comparison{border-width:6px}
 .compare-labels{gap:12px;left:10px;right:10px}.compare-labels span{font-size:6px;letter-spacing:.02em;padding:6px}
}
.motion-off .hero-collage{transform:none}.motion-off .car-story,.motion-off .language-story{height:auto;min-height:0}.motion-off .spatial-sticky{position:relative;top:0;height:auto;min-height:0;padding-block:70px}.motion-off .car-part{will-change:auto}.motion-off .flash-inner{transition:none}
@media(prefers-reduced-motion:reduce){.hero-collage{transform:none}.language-story,.car-story{height:auto;min-height:0}.spatial-sticky{position:relative;top:0;height:auto;min-height:0;padding-block:70px}.car-part,.word-cube,.car-assembly{will-change:auto}.flash-inner{transition:none}}