/* Farbe Firma cinematic layer (blocks: cine_hero, cine_process, cine_rail, cine_map + page effects) */
.cn-w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .04em .12em 0;margin-bottom:-.12em}.cn-w i{display:inline-block;font-style:normal;will-change:transform}
#ffx-header{transition:transform .45s cubic-bezier(.2,.7,.2,1),background-color .3s,box-shadow .3s}#ffx-header.cn-hide{transform:translateY(-100%)}
.cn-px{overflow:hidden}.cn-px img{will-change:transform}
html.cn-on{scroll-behavior:auto}
/* ---------- Hero ---------- */
.cn-hero{position:relative;background:#071d24;color:#fff}
html.cn-on .cn-hero{height:210vh}
.cn-hero-pin{position:relative;height:100vh;min-height:620px;overflow:hidden;display:flex;align-items:center}
html:not(.cn-on) .cn-hero-pin{height:auto;min-height:88vh;padding:120px 0 80px}
.cn-hero-bg{position:absolute;inset:0;overflow:hidden;background:radial-gradient(120% 90% at 80% 20%,#0f3f4c 0%,#071d24 55%,#04141a 100%)}
.cn-hero-bg i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;will-change:transform}
.cn-hero-bg .a{width:60vw;height:60vw;left:45%;top:-20%;background:radial-gradient(circle,#0f7c8a,transparent 65%);animation:cnA 14s ease-in-out infinite alternate}
.cn-hero-bg .b{width:40vw;height:40vw;left:-10%;bottom:-25%;background:radial-gradient(circle,#f4844d,transparent 65%);opacity:.28;animation:cnA 18s ease-in-out infinite alternate-reverse}
.cn-hero-bg .grid{inset:0;border-radius:0;filter:none;opacity:.35;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(70% 70% at 60% 50%,#000 30%,transparent 100%)}
.cn-hero[style*="--poster"] .cn-hero-bg::after{content:"";position:absolute;inset:0;background:var(--poster) center/cover no-repeat;opacity:.18;mix-blend-mode:luminosity}
@keyframes cnA{from{transform:translate(0,0) scale(1)}to{transform:translate(-8%,10%) scale(1.15)}}
.cn-hero-3d{position:absolute;inset:0;z-index:1}.cn-hero-3d canvas{width:100%!important;height:100%!important;display:block}
.cn-hero-fallback{position:absolute;right:8vw;top:50%;transform:translateY(-50%);width:min(26vw,300px);z-index:1;opacity:.95;filter:drop-shadow(0 30px 60px rgba(0,0,0,.5))}
.cn-hero.cn-3d .cn-hero-fallback{display:none}
.cn-amp-liq{transform:translateY(100%);transform-box:fill-box;transform-origin:50% 100%;animation:cnFill 6s cubic-bezier(.4,0,.2,1) .6s forwards}
@keyframes cnFill{to{transform:translateY(8%)}}
.cn-hero-copy{position:relative;z-index:2;width:100%}
.cn-hero-1{max-width:640px}
.cn-hero .ffx-eyebrow{color:#5BC4CE}.cn-hero .ffx-eyebrow::before{content:"";width:34px;height:2px;background:#F4844D;display:inline-block}
.cn-hero .ffx-ht{font-size:clamp(40px,6.2vw,86px);line-height:1.02;letter-spacing:-.02em;margin:18px 0 22px;color:#fff}
.cn-hero .sub{font-size:clamp(16px,1.35vw,20px);line-height:1.6;color:rgba(255,255,255,.78);max-width:560px;margin:0 0 30px}
.cn-hero-2{max-width:720px}
html.cn-on .cn-hero-2{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);padding:0 var(--pad,24px);opacity:0;pointer-events:none}
html:not(.cn-on) .cn-hero-2{margin-top:56px;padding-top:36px;border-top:1px solid rgba(255,255,255,.14)}
.cn-hero-2 .ffx-ht{font-size:clamp(32px,4.6vw,64px)}
.cn-scroll-hint{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;font:600 11px/1 var(--hf);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.cn-scroll-hint i{width:1px;height:44px;background:linear-gradient(#5BC4CE,transparent);animation:cnHint 1.8s ease-in-out infinite}
@keyframes cnHint{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
html:not(.cn-on) .cn-scroll-hint,html:not(.cn-on) .cn-progress{display:none}
.cn-progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.1);z-index:3}.cn-progress i{display:block;height:100%;background:linear-gradient(90deg,#0F7C8A,#5BC4CE,#F4844D);transform:scaleX(0);transform-origin:left}
[dir=rtl] .cn-progress i{transform-origin:right}
.cn-hero + .ffx-stats{position:relative;z-index:4}
/* ---------- Plant tour ---------- */
.cn-process{padding:110px 0 60px;background:#fff}
.cn-process-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:start;margin-top:40px}
.cn-steps{position:relative;padding-left:36px}
.cn-steps-line{position:absolute;left:8px;top:8px;bottom:8px;width:2px;background:var(--ln,#d8e4e6);border-radius:2px}.cn-steps-line i{display:block;width:100%;height:100%;background:linear-gradient(#0F7C8A,#5BC4CE);transform:scaleY(0);transform-origin:top;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.cn-step{position:relative;padding:12px 0 12px;min-height:62vh;display:flex;flex-direction:column;justify-content:center;opacity:.38;transition:opacity .5s}
.cn-step.on{opacity:1}
.cn-step::before{content:"";position:absolute;left:-33px;top:calc(50% - 6px);width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--ln,#d8e4e6);transition:background .4s,border-color .4s,box-shadow .4s}
.cn-step.on::before{background:#0F7C8A;border-color:#0F7C8A;box-shadow:0 0 0 6px rgba(15,124,138,.15)}
.cn-step .n{font:700 13px/1 var(--hf);letter-spacing:.16em;color:#F4844D}
.cn-step h3{font:700 clamp(24px,2.4vw,34px)/1.15 var(--hf);color:var(--n,#0C3C47);margin:12px 0 14px;letter-spacing:-.01em}
.cn-step p{font-size:17px;line-height:1.65;color:var(--mu,#52646a);margin:0;max-width:460px}
.cn-step .st{display:inline-block;margin-top:18px;padding:8px 14px;border-radius:999px;background:rgba(15,124,138,.08);color:#0F7C8A;font:700 13px/1 var(--hf);letter-spacing:.06em}
.cn-stage-wrap{position:sticky;top:96px}
.cn-stage{position:relative;aspect-ratio:800/520;border-radius:22px;overflow:hidden;background:radial-gradient(110% 100% at 70% 20%,#0f3f4c,#071d24 70%);box-shadow:0 50px 90px -40px rgba(7,29,36,.6)}
.cn-scene{position:absolute;inset:0;opacity:0;transform:scale(1.04);transition:opacity .7s ease,transform .9s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.cn-scene.on{opacity:1;transform:none}
.cn-scene-cap{position:absolute;left:22px;top:18px;font:700 11px/1 var(--hf);letter-spacing:.2em;text-transform:uppercase;color:#5BC4CE}
.cn-sv{width:100%;height:100%;display:block}
.cn-sv .cn-lbl{font:600 11px var(--hf);letter-spacing:.18em;fill:#7fb7bf}
.cn-sv .cn-big{font:700 34px var(--hf);fill:#fff}
.cn-sv .cn-grid line,.cn-sv .cn-gridl{stroke:rgba(255,255,255,.06)}
.cn-sv .cn-glass{fill:rgba(255,255,255,.06);stroke:#9fdde4;stroke-width:1.6}
.cn-sv .cn-vial{fill:rgba(255,255,255,.08);stroke:#9fdde4;stroke-width:1.2}
.cn-sv rect,.cn-sv circle,.cn-sv path{vector-effect:non-scaling-stroke}
.cn-sv .cn-hepa{fill:rgba(255,255,255,.12)}
.cn-sv .cn-laminar line{stroke:#5BC4CE;stroke-width:1.5;stroke-dasharray:6 14;opacity:.55;animation:cnFlow 1.2s linear infinite;animation-delay:calc(var(--i)*-.13s)}
@keyframes cnFlow{to{stroke-dashoffset:-20}}
.cn-sv .cn-belt rect{fill:rgba(255,255,255,.1)}.cn-sv .cn-belt-dots circle{fill:#5BC4CE;opacity:.6}.cn-sv .cn-belt-dots{animation:cnBelt 1.4s linear infinite}
@keyframes cnBelt{to{transform:translateX(24px)}}
.cn-sv .cn-lq{transform:translateY(418px) scaleY(var(--h,0));transform-origin:0 0;transform-box:view-box;height:150px;y:-150px}
.cn-fill .cn-lq{transition:none}
.cn-sv .cn-nozzle rect,.cn-sv .cn-nozzle path,.cn-sv .cn-arm rect,.cn-sv .cn-arm circle{fill:rgba(255,255,255,.14);stroke:#9fdde4;stroke-width:1.2}
.cn-sv .cn-stream{opacity:clamp(0,calc((var(--p) - .05)*6),1);transform:scaleY(calc(1 + var(--p)*.3));transform-origin:400px 204px;transform-box:view-box}
.cn-sv .cn-chamber rect{fill:rgba(255,255,255,.05);stroke:#9fdde4;stroke-width:1.6}.cn-sv .cn-chamber .cn-inner{fill:rgba(15,124,138,.08)}
.cn-sv .cn-shelves>g>rect{fill:#9fdde4;opacity:.7}
.cn-sv .cn-cake{fill:#e8f6f8;opacity:clamp(0,calc(var(--p)*70 - var(--i)),1);transition:opacity .2s}
.cn-sv .cn-frost circle{fill:#fff;opacity:.5;animation:cnFrost 4s ease-in-out infinite;animation-delay:calc(var(--i)*-.17s)}
@keyframes cnFrost{0%,100%{transform:translateY(0);opacity:.15}50%{transform:translateY(-14px);opacity:.6}}
.cn-sv .cn-gauge circle,.cn-sv .cn-temp rect{fill:rgba(255,255,255,.06);stroke:#9fdde4;stroke-width:1.4}.cn-sv .cn-gauge .cn-inner{stroke:rgba(255,255,255,.15)}
.cn-sv .cn-needle{stroke:#F4884D;stroke-width:3;stroke-linecap:round;transform:rotate(calc(-120deg + var(--p)*240deg));transform-box:fill-box;transform-origin:0 0;transform-origin:bottom}
.cn-sv .cn-gauge .cn-needle{transform-origin:50% 100%}
.cn-sv .cn-pivot{fill:#F4844D;stroke:none}
.cn-sv .cn-light{fill:rgba(255,255,255,.07);stroke:#9fdde4;stroke-width:1.4}
.cn-sv .cn-beam{transform:translateX(calc(var(--p)*500px));transform-box:view-box}
.cn-sv .cn-loupe{transform:translate(calc(150px + var(--p)*500px),260px);transform-box:view-box}.cn-sv .cn-loupe circle{fill:none;stroke:#fff;stroke-width:3}.cn-sv .cn-loupe .cn-inner{stroke:#5BC4CE;stroke-width:1.5;fill:rgba(91,196,206,.08)}.cn-sv .cn-loupe line{stroke:#fff;stroke-width:6;stroke-linecap:round}
.cn-sv .cn-ok{opacity:clamp(0,calc((var(--p) - .78)*5),1)}.cn-sv .cn-ok circle{fill:#F4844D}.cn-sv .cn-ok path{fill:none;stroke:#fff;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.cn-sv .cn-cam rect{fill:rgba(255,255,255,.12);stroke:#9fdde4;stroke-width:1.2}.cn-sv .cn-cam circle{fill:none;stroke:#9fdde4;stroke-width:1.4}
.cn-sv .cn-carton{transform:translate(calc(-220px + var(--p)*640px + var(--k)*200px),275px);transform-box:view-box}
.cn-sv .cn-carton rect{fill:rgba(255,255,255,.08);stroke:#9fdde4;stroke-width:1.3}.cn-sv .cn-carton .cn-lid{fill:rgba(244,132,77,.35);stroke:none}.cn-sv .cn-carton .cn-line,.cn-sv .cn-labels .cn-line{fill:rgba(255,255,255,.3);stroke:none}.cn-sv .cn-qr{fill:#5BC4CE;stroke:none;opacity:.8}
.cn-sv .cn-scanner rect{fill:rgba(255,255,255,.08);stroke:#9fdde4;stroke-width:1.3}.cn-sv .cn-scan-line{stroke:#F4844D;stroke-width:3;stroke-linecap:round;animation:cnScan 1.2s ease-in-out infinite alternate}
@keyframes cnScan{from{transform:translateY(-50px)}to{transform:translateY(0)}}
.cn-sv .cn-labels rect:first-child{fill:rgba(255,255,255,.06);stroke:#9fdde4;stroke-width:1.2}
.cn-sv .cn-plane{transform:translate(calc(520px + var(--p)*260px),calc(150px - var(--p)*90px));transform-box:view-box;opacity:clamp(0,calc((var(--p) - .35)*3),1)}.cn-sv .cn-plane path{fill:#F4844D}
.cn-sv .cn-chart>rect{fill:rgba(255,255,255,.05);stroke:#9fdde4;stroke-width:1.4}
.cn-sv .cn-trace{fill:none;stroke:#5BC4CE;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1500;stroke-dashoffset:calc(1500 - var(--p)*1500)}
.cn-sv .cn-flask path{fill:rgba(255,255,255,.06);stroke:#9fdde4;stroke-width:1.4}.cn-sv .cn-flask-lq{fill:#0F7C8A;opacity:.85}
.cn-sv .cn-vialrack>rect:last-child{fill:#9fdde4;opacity:.7}
/* ---------- Horizontal showcase ---------- */
.cn-rail{position:relative;padding:110px 0 0;background:var(--bg,#f2f7f8);overflow:hidden}
.cn-rail-head{padding-bottom:36px}
.cn-track{display:flex;gap:28px;padding:0 max(24px,calc((100vw - var(--wrap,1240px))/2)) 90px;will-change:transform}
.cn-rc{flex:0 0 auto;width:min(36vw,520px);background:#fff;border:1px solid var(--ln,#d8e4e6);border-radius:22px;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;transform-style:preserve-3d;box-shadow:0 30px 60px -44px rgba(8,43,51,.5)}
.cn-rc .im{display:block;aspect-ratio:3/2;overflow:hidden;background:#e8f1f3}.cn-rc .im img{width:100%;height:100%;object-fit:cover;transform:scale(1.18);will-change:transform}
.cn-rc .bd{display:flex;flex-direction:column;gap:8px;padding:22px 26px 26px}
.cn-rc .n{font:700 12px/1 var(--hf);letter-spacing:.16em;color:#F4844D}.cn-rc small{font:600 12px/1.2 var(--hf);letter-spacing:.08em;text-transform:uppercase;color:var(--t)}
.cn-rc b{font:700 clamp(22px,1.8vw,28px)/1.2 var(--hf);color:var(--n)}.cn-rc em{font-style:normal;color:var(--mu);font-size:15.5px;line-height:1.55}
.cn-rc .ffx-link{margin-top:8px}
.cn-rail-end{flex:0 0 10vw}
/* ---------- World map ---------- */
.cn-mapsec{background:#071d24;color:#fff;overflow:hidden}
.cn-mapsec .ffx-h2{color:#fff}.cn-mapsec .ffx-lede{color:rgba(255,255,255,.75)}
.cn-map-wrap{margin:36px auto 0;max-width:1100px}
.cn-map{width:100%;height:auto;display:block;overflow:visible}
.cn-dots{stroke:#3f7f8a;stroke-width:4.2;stroke-linecap:round;fill:none}
.cn-dots-s{stroke:#8fd6dd;stroke-width:4.6;stroke-linecap:round;fill:none}
.cn-route{fill:none;stroke:#F4844D;stroke-width:1.4;opacity:.75;stroke-linecap:round}
.cn-pin{fill:#F4844D;stroke:rgba(244,132,77,.35);stroke-width:8;animation:cnPin 2.4s ease-out infinite}
@keyframes cnPin{0%{stroke-width:2}70%{stroke-width:16;stroke-opacity:0}100%{stroke-width:16;stroke-opacity:0}}
.cn-hub-ring{fill:none;stroke:#F4844D;stroke-width:2;animation:cnRing 2s ease-out infinite}
@keyframes cnRing{0%{r:9;opacity:1}100%{r:34;opacity:0}}
.cn-map-regions{list-style:none;padding:0;margin:40px auto 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px;max-width:1000px}
.cn-map-regions li{border-left:2px solid #F4844D;padding:4px 0 4px 16px}[dir=rtl] .cn-map-regions li{border-left:0;border-right:2px solid #F4844D;padding:4px 16px 4px 0}
.cn-map-regions b{display:block;font:700 18px/1.2 var(--hf);color:#fff}.cn-map-regions span{display:block;margin-top:6px;color:rgba(255,255,255,.7);font-size:14px}
.cn-mapsec .ffx-btns{justify-content:center;margin-top:40px}
/* ---------- Formulation page ---------- */
.cn-fp{position:relative;transform-style:preserve-3d;--sx:-40%}.cn-fp img{will-change:transform;backface-visibility:hidden}
.cn-fp::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(var(--sx));mix-blend-mode:soft-light}
/* ---------- Responsive & reduced motion ---------- */
@media (max-width:1000px){.cn-process-grid{grid-template-columns:1fr;gap:28px}.cn-stage-wrap{position:sticky;top:70px;order:-1;z-index:2}.cn-step{min-height:auto;padding:26px 0;opacity:1}.cn-hero-fallback{right:4vw;width:24vw}}
@media (max-width:760px){html.cn-on .cn-hero{height:170vh}.cn-hero-pin{min-height:560px;align-items:flex-end;padding-bottom:84px}html.cn-on .cn-hero-2{top:auto;bottom:84px;transform:none}.cn-hero .sub{margin-bottom:22px}.cn-hero-fallback{display:none}.cn-hero .ffx-ht{font-size:clamp(34px,10vw,48px)}.cn-track{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:70px;transform:none!important}.cn-rc{width:82vw;scroll-snap-align:start}.cn-rc .im img{transform:none!important}.cn-rail-end{display:none}.cn-map-regions{grid-template-columns:repeat(2,1fr)}.cn-process{padding-top:70px}}
@media (prefers-reduced-motion:reduce){.cn-hero-bg i,.cn-scroll-hint i,.cn-laminar line,.cn-belt-dots,.cn-frost circle,.cn-scan-line,.cn-pin,.cn-hub-ring,.cn-amp-liq{animation:none!important}.cn-amp-liq{transform:translateY(8%)}.cn-scene{transition:none}}