:root{--sample-bg:#070910;--sample-panel:#111723;--sample-text:#f7f8fb;--sample-muted:#aab3c2;--sample-line:rgba(255,255,255,.13);--sample-accent:#7d70ff;--sample-accent2:#9bb1ff;--sample-green:#77e5b2;--sample-progress:0} *{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--sample-bg);color-scheme:dark}body.sample{margin:0;overflow-x:hidden;background:var(--sample-bg);color:var(--sample-text);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}.sample button,.sample a{touch-action:manipulation}.sample-progress{position:fixed;z-index:120;left:0;right:0;top:0;height:2px;background:rgba(255,255,255,.06)}.sample-progress i{display:block;width:calc(var(--sample-progress)*100%);height:100%;background:linear-gradient(90deg,var(--sample-accent),var(--sample-accent2));box-shadow:0 0 18px var(--sample-accent);transition:width .08s linear} .sample-backbar{position:fixed;z-index:110;left:50%;top:14px;transform:translateX(-50%);width:min(calc(100% - 28px),1180px);height:58px;padding:0 16px;display:flex;align-items:center;gap:18px;border:1px solid var(--sample-line);border-radius:17px;background:rgba(8,10,16,.76);backdrop-filter:blur(20px) saturate(135%);box-shadow:0 18px 60px rgba(0,0,0,.25)}.sample-backbar>a{font-size:11px;font-weight:850;letter-spacing:.04em}.sample-backbar span{margin-left:auto;font-size:9px;letter-spacing:.16em;color:#8e99aa}.sample-backbar b{font-size:9px;letter-spacing:.14em;color:var(--sample-accent2)} .sample-hero{position:relative;min-height:100svh;padding:130px max(24px,calc((100vw - 1200px)/2)) 90px;display:grid;grid-template-columns:1fr .9fr;gap:60px;align-items:center;overflow:hidden}.sample-hero-copy{position:relative;z-index:7}.sample-kicker{margin:0 0 21px;font-size:9px;font-weight:900;letter-spacing:.2em;color:var(--sample-accent2)}.sample-title{margin:0;font-size:clamp(58px,8vw,116px);line-height:.88;letter-spacing:-.07em;text-wrap:balance}.sample-title em{font-style:normal;color:var(--sample-accent2)}.sample-lead{max-width:690px;margin:28px 0 0;color:var(--sample-muted);font-size:clamp(17px,1.55vw,22px);line-height:1.55}.sample-actions{display:flex;gap:11px;flex-wrap:wrap;margin-top:31px}.sample-btn{position:relative;overflow:hidden;min-height:50px;padding:0 18px;border:1px solid var(--sample-line);border-radius:13px;background:rgba(255,255,255,.04);color:#fff;font-size:11px;font-weight:850;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:transform .2s ease,background .2s ease,border-color .2s ease}.sample-btn.primary{background:var(--sample-accent);border-color:transparent;box-shadow:0 18px 48px rgba(87,66,214,.27)}.sample-btn:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.25)}.sample-btn:after{content:"";position:absolute;inset:50% auto auto 50%;width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.45);transform:translate(-50%,-50%) scale(0);opacity:0}.sample-btn.is-hit:after{animation:hitPulse .62s ease-out}.sample-note{margin-top:18px;font-size:10px;letter-spacing:.08em;color:#707c90} .sample-visual{position:relative;z-index:5;min-height:520px}.sample-second{position:relative;min-height:88svh;padding:115px max(24px,calc((100vw - 1200px)/2));overflow:hidden}.sample-section-heading{max-width:900px}.sample-section-heading span{font-size:9px;letter-spacing:.18em;font-weight:900;color:var(--sample-accent2)}.sample-section-heading h2{margin:18px 0 18px;font-size:clamp(43px,6vw,78px);line-height:.97;letter-spacing:-.055em;text-wrap:balance}.sample-section-heading p{max-width:690px;margin:0;color:var(--sample-muted);font-size:16px;line-height:1.65}.sample-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:54px}.sample-card{position:relative;overflow:hidden;min-height:250px;padding:27px;border:1px solid var(--sample-line);border-radius:23px;background:linear-gradient(155deg,rgba(255,255,255,.06),rgba(255,255,255,.018));transition:transform .28s ease,border-color .28s ease}.sample-card:hover{transform:translateY(-7px);border-color:rgba(255,255,255,.24)}.sample-card>span{font-size:8px;letter-spacing:.17em;color:#7c8799}.sample-card h3{margin:25px 0 10px;font-size:27px;letter-spacing:-.04em}.sample-card p{margin:0;color:var(--sample-muted);font-size:13px;line-height:1.6}.sample-card .card-signal{position:absolute;right:22px;top:22px;width:9px;height:9px;border-radius:50%;background:var(--sample-green);box-shadow:0 0 16px rgba(119,229,178,.7)}[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .75s cubic-bezier(.2,.8,.2,1),transform .75s cubic-bezier(.2,.8,.2,1)}[data-reveal].in{opacity:1;transform:none} @keyframes hitPulse{0%{transform:translate(-50%,-50%) scale(0);opacity:.7}100%{transform:translate(-50%,-50%) scale(22);opacity:0}} .immersive{--sample-bg:#05050a;--sample-panel:#0d1020;--sample-accent:#7557ff;--sample-accent2:#b4a8ff}.immersive .sample-hero{background:radial-gradient(circle at 72% 30%,rgba(116,81,255,.14),transparent 30%),linear-gradient(180deg,#05050a,#080914)}.immersive .sample-hero:before{content:"";position:absolute;inset:-18%;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:58px 58px;transform:perspective(600px) rotateX(63deg) translateY(-9%);transform-origin:center 38%;animation:gridDrift 10s linear infinite}.immersive .sample-hero:after{content:"";position:absolute;left:-15%;bottom:-35%;width:70vw;height:70vw;border-radius:50%;background:radial-gradient(circle,rgba(78,50,216,.18),transparent 68%);animation:auraBreathe 5s ease-in-out infinite} .immersive .sample-title span{display:block}.immersive .sample-title em{display:block;text-shadow:0 0 50px rgba(121,94,255,.2)}.immersive-machine{display:grid;place-items:center;perspective:1100px}.machine-halo{position:absolute;width:440px;height:440px;border-radius:50%;background:radial-gradient(circle,rgba(115,81,255,.24),transparent 66%);filter:blur(3px);animation:haloPulse 3.8s ease-in-out infinite}.machine-ring{position:absolute;left:50%;top:50%;border:1px solid rgba(165,150,255,.18);border-radius:50%;transform:translate(-50%,-50%)}.machine-ring.r1{width:430px;height:430px;animation:ringSpin 13s linear infinite}.machine-ring.r2{width:330px;height:330px;border-style:dashed;animation:ringSpin 8s linear infinite reverse}.machine-ring.r3{width:235px;height:235px;animation:ringPulse 3.3s ease-in-out infinite}.machine-card{position:relative;z-index:5;width:min(86%,390px);min-height:270px;padding:26px;border:1px solid rgba(255,255,255,.18);border-radius:29px;background:linear-gradient(155deg,rgba(28,30,57,.82),rgba(9,11,21,.9));backdrop-filter:blur(18px);box-shadow:0 45px 110px rgba(0,0,0,.48),0 0 55px rgba(91,66,228,.12);animation:machineFloat 4s ease-in-out infinite;transform-style:preserve-3d}.machine-card:before{content:"";position:absolute;inset:1px;border-radius:28px;background:linear-gradient(125deg,rgba(255,255,255,.12),transparent 28%,transparent 72%,rgba(118,90,255,.1));pointer-events:none}.machine-top{display:flex;justify-content:space-between;align-items:center;font-size:8px;letter-spacing:.15em;color:#909bb0}.machine-live{display:flex;gap:7px;align-items:center}.machine-live i{width:7px;height:7px;border-radius:50%;background:var(--sample-green);box-shadow:0 0 15px rgba(119,229,178,.8);animation:liveBlink 1.2s ease-in-out infinite}.machine-word{margin-top:50px;font-size:clamp(48px,5vw,72px);line-height:.86;letter-spacing:-.07em;font-weight:850}.machine-word span{display:block;color:#b4a8ff}.machine-feedback{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:35px}.machine-feedback i{height:42px;border:1px solid rgba(255,255,255,.1);border-radius:11px;background:rgba(255,255,255,.035);position:relative;overflow:hidden}.machine-feedback i:after{content:"";position:absolute;left:-50%;top:0;width:45%;height:100%;background:linear-gradient(90deg,transparent,rgba(163,146,255,.28),transparent);animation:feedbackSweep 2.5s ease-in-out infinite}.machine-feedback i:nth-child(2):after{animation-delay:.45s}.machine-feedback i:nth-child(3):after{animation-delay:.9s}.machine-chip{position:absolute;z-index:7;padding:10px 12px;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:rgba(10,12,24,.76);backdrop-filter:blur(12px);font-size:8px;letter-spacing:.1em;box-shadow:0 18px 40px rgba(0,0,0,.3);animation:chipFloat 3.6s ease-in-out infinite}.machine-chip.c1{left:1%;top:26%}.machine-chip.c2{right:0;top:18%;animation-delay:-1.2s}.machine-chip.c3{right:7%;bottom:15%;animation-delay:-2.2s} .machine-card[data-live-trigger]{ cursor:pointer;outline:none; animation:machineFloat 4s ease-in-out infinite,machineCardBreath 3.6s ease-in-out infinite; transition:border-color .22s ease,box-shadow .22s ease,filter .22s ease } .machine-card[data-live-trigger]:hover{ border-color:rgba(188,176,255,.34); box-shadow:0 48px 120px rgba(0,0,0,.5),0 0 72px rgba(104,76,241,.16) } .machine-card[data-live-trigger]:focus-visible{ outline:2px solid #b4a8ff;outline-offset:8px } .machine-card[data-live-trigger]:after{ content:"CLIQUEZ POUR RÉAGIR";position:absolute;right:20px;bottom:13px; font-size:6.5px;font-weight:900;letter-spacing:.14em;color:#887bd7;opacity:.62 } .machine-card[data-live-trigger] .machine-top, .machine-card[data-live-trigger] .machine-word, .machine-card[data-live-trigger] .machine-feedback{ transition:transform .25s cubic-bezier(.2,.8,.2,1),filter .25s ease } .machine-card[data-live-trigger]:hover .machine-word{transform:translateY(-2px)} @keyframes machineCardBreath{ 0%,100%{filter:saturate(1);border-color:rgba(255,255,255,.18)} 50%{filter:saturate(1.08);border-color:rgba(179,164,255,.24)} } .machine-scroll-reactor{ position:absolute;z-index:6;left:-38%;top:50%;width:94px; transform: translate3d(calc((1 - var(--immersive-p))*-170px),-50%,0) scale(calc(.8 + var(--immersive-p)*.2)); opacity:clamp(0,calc((var(--immersive-p) - .06)*3.4),1); display:flex;flex-direction:column;align-items:center;gap:9px; pointer-events:none } .reactor-pill{ display:inline-flex;align-items:center;justify-content:center;min-width:76px;height:28px; padding:0 10px;border:1px solid rgba(185,173,255,.22);border-radius:999px; background:rgba(11,12,25,.78);backdrop-filter:blur(14px); color:#a99cff;font-size:6.5px;font-weight:900;letter-spacing:.18em; box-shadow:0 12px 28px rgba(0,0,0,.22) } .reactor-scroll-label{transform:translateX(-7px)} .reactor-reaction-label{transform:translateX(7px)} .reactor-track{ position:relative;width:42px;height:132px; border:1px solid rgba(181,169,255,.28);border-radius:999px; background: linear-gradient(180deg,rgba(126,101,255,.12),rgba(17,17,35,.76)), rgba(8,10,20,.76); overflow:hidden;box-shadow:inset 0 0 24px rgba(106,79,237,.08),0 14px 30px rgba(0,0,0,.24) } .reactor-track:before{ content:"";position:absolute;left:50%;top:12px;bottom:12px;width:1px; transform:translateX(-50%); background:linear-gradient(180deg,transparent,rgba(188,176,255,.7),transparent) } .reactor-track:after{ content:"";position:absolute;inset:6px;border-radius:999px; box-shadow:inset 0 0 18px rgba(131,103,255,.12);pointer-events:none } .reactor-ball{ position:absolute;z-index:4;left:50%;top:10px;width:17px;height:17px;border-radius:50%; transform:translate3d(-50%,0,0); background:radial-gradient(circle at 34% 28%,#fff 0 12%,#e4ddff 18%,#a58fff 45%,#7658ff 76%,#5d42d5 100%); box-shadow:0 0 12px rgba(255,255,255,.5),0 0 28px rgba(139,111,255,.95); animation:reactorBallBounce 3.4s cubic-bezier(.4,0,.2,1) infinite } .reactor-ball-trail{ position:absolute;z-index:2;left:50%;top:18px;width:5px;height:42px;border-radius:999px; transform:translateX(-50%); background:linear-gradient(180deg,rgba(170,149,255,.55),transparent); filter:blur(1px);opacity:.6; animation:reactorTrailBounce 3.4s cubic-bezier(.4,0,.2,1) infinite } .reactor-mark{ position:absolute;left:50%;width:17px;height:1px;transform:translateX(-50%); background:rgba(192,181,255,.22) } .reactor-mark.mark-a{top:25%} .reactor-mark.mark-b{top:50%} .reactor-mark.mark-c{top:75%} @keyframes reactorBallBounce{ 0%{transform:translate3d(-50%,0,0) scale(.96)} 48%{transform:translate3d(-50%,94px,0) scale(1.04);box-shadow:0 0 16px rgba(255,255,255,.58),0 0 32px rgba(139,111,255,.9)} 52%{transform:translate3d(-50%,94px,0) scale(1.04)} 100%{transform:translate3d(-50%,0,0) scale(.96)} } @keyframes reactorTrailBounce{ 0%{transform:translate3d(-50%,0,0) scaleY(.9);opacity:.42} 48%,52%{transform:translate3d(-50%,76px,0) scaleY(1.08);opacity:.62} 100%{transform:translate3d(-50%,0,0) scaleY(.9);opacity:.42} } @media(max-width:900px) and (min-width:621px){ .machine-scroll-reactor{left:-29%;width:86px} .reactor-pill{min-width:70px} } @media(max-width:620px){ .machine-scroll-reactor{display:none} .machine-card[data-live-trigger]:after{ content:"TOUCHEZ POUR RÉAGIR";right:auto;left:20px } } @media(prefers-reduced-motion:reduce){ .machine-scroll-reactor{transform:translate3d(0,-50%,0);opacity:1} .reactor-ball{animation:none;transform:translate3d(-50%,48px,0)} .reactor-ball-trail{animation:none;transform:translate3d(-50%,35px,0);opacity:.45} } .immersive-machine.is-activated .reactor-pill{ border-color:rgba(201,191,255,.5); color:#d9d1ff; box-shadow:0 12px 28px rgba(0,0,0,.22),0 0 24px rgba(112,81,255,.18) } .immersive-machine.is-activated .reactor-track{ border-color:rgba(201,191,255,.5); box-shadow:inset 0 0 28px rgba(106,79,237,.14),0 0 34px rgba(112,81,255,.18) } .immersive-machine.is-activated .reactor-ball, .immersive-machine.is-activated .reactor-ball-trail{ animation-duration:1.8s } .immersive-machine.is-activated .machine-card{ animation:activateCard .86s cubic-bezier(.2,.8,.2,1),machineFloat 4s .86s ease-in-out infinite,machineCardBreath 3.6s .86s ease-in-out infinite } .immersive-machine.is-activated .machine-card .machine-top{ animation:cardContentKick .72s ease-out } .immersive-machine.is-activated .machine-card .machine-word{ animation:wordKick .72s cubic-bezier(.2,.8,.2,1) } .immersive-machine.is-activated .machine-card .machine-feedback{ animation:feedbackKick .72s ease-out } @keyframes cardContentKick{ 0%{transform:translateY(0);opacity:1} 38%{transform:translateY(-5px);opacity:.82} 100%{transform:translateY(0);opacity:1} } @keyframes wordKick{ 0%{transform:scale(1)} 38%{transform:scale(1.07)} 100%{transform:scale(1)} } @keyframes feedbackKick{ 0%{transform:translateY(0)} 42%{transform:translateY(5px)} 100%{transform:translateY(0)} } @media(max-width:900px) and (min-width:621px){ .machine-scroll-reactor{left:-17%;width:80px;height:172px} } @media(max-width:620px){ .machine-scroll-reactor{display:none} .machine-card[data-live-trigger]:after{ content:"TOUCHEZ POUR RÉAGIR";right:auto;left:20px } } @media(prefers-reduced-motion:reduce){ .machine-scroll-reactor{transform:translate3d(0,-50%,0);opacity:1} .reactor-ball{animation:none;top:50%;transform:translate(-50%,-50%)} .machine-card[data-live-trigger]{animation:none} .machine-card[data-live-trigger] .machine-top, .machine-card[data-live-trigger] .machine-word, .machine-card[data-live-trigger] .machine-feedback{transition:none} } .immersive-machine.is-activated .machine-card{animation:activateCard .78s cubic-bezier(.2,.8,.2,1),machineFloat 4s .78s ease-in-out infinite}.immersive-machine.is-activated .machine-ring{border-color:rgba(191,181,255,.44)}.immersive-machine.is-activated .machine-halo{background:radial-gradient(circle,rgba(118,82,255,.42),transparent 66%)}.immersive-second{background:linear-gradient(180deg,#080914,#070910)}.immersive-second:before{content:"";position:absolute;right:-18%;top:3%;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(96,70,235,.12),transparent 68%)}.experience-line{position:absolute;left:8%;right:8%;top:66%;height:1px;background:linear-gradient(90deg,transparent,rgba(133,111,255,.35),transparent);overflow:hidden}.experience-line:after{content:"";display:block;width:18%;height:100%;background:#b8acff;box-shadow:0 0 18px #8268ff;animation:lineRunner 3s ease-in-out infinite} @keyframes gridDrift{to{background-position:58px 58px}}@keyframes auraBreathe{50%{transform:scale(1.08);opacity:.68}}@keyframes haloPulse{50%{transform:scale(1.12);opacity:.62}}@keyframes ringSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes ringPulse{50%{transform:translate(-50%,-50%) scale(1.08);opacity:.52}}@keyframes machineFloat{50%{transform:translateY(-13px) rotateX(2deg) rotateY(-2deg)}}@keyframes liveBlink{50%{opacity:.35}}@keyframes feedbackSweep{0%{transform:translateX(0)}100%{transform:translateX(340%)}}@keyframes chipFloat{50%{transform:translateY(-10px)}}@keyframes activateCard{0%{transform:scale(1)}35%{transform:scale(1.08) rotateZ(1deg);box-shadow:0 0 95px rgba(114,82,255,.48)}100%{transform:scale(1)}}@keyframes lineRunner{0%{transform:translateX(-100%)}100%{transform:translateX(650%)}} .kovo-sample{--sample-bg:#080b12;--sample-panel:#101724;--sample-accent:#627fff;--sample-accent2:#9cadff}.kovo-sample .sample-hero{background:radial-gradient(circle at 78% 25%,rgba(98,127,255,.17),transparent 30%),linear-gradient(180deg,#080b12,#0b101a)}.kovo-board{position:relative;min-height:500px;display:grid;place-items:center}.kovo-board-shell{width:min(95%,470px);padding:18px;border:1px solid rgba(255,255,255,.14);border-radius:26px;background:#101725;box-shadow:0 38px 90px rgba(0,0,0,.35);animation:kovoFloat 5s ease-in-out infinite}.kovo-board-top{height:38px;display:flex;align-items:center;justify-content:space-between;padding:0 5px;font-size:8px;letter-spacing:.14em;color:#7d899d}.kovo-board-hero{padding:24px;border-radius:18px;background:linear-gradient(135deg,rgba(98,127,255,.22),rgba(255,255,255,.025));border:1px solid rgba(98,127,255,.25)}.kovo-board-hero small{font-size:8px;letter-spacing:.16em;color:#9cadff}.kovo-board-hero b{display:block;margin-top:12px;font-size:31px;letter-spacing:-.05em}.kovo-quick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}.kovo-quick i{display:grid;place-items:center;height:74px;border:1px solid rgba(255,255,255,.09);border-radius:14px;background:#151e2e;font-style:normal;font-size:9px;color:#bcc5d4}.kovo-status{position:absolute;right:1%;bottom:15%;padding:10px 13px;border-radius:12px;background:#fff;color:#121622;font-size:8px;font-weight:900;box-shadow:0 16px 38px rgba(0,0,0,.25);animation:kovoStatus 3s ease-in-out infinite}.kovo-sample .sample-card:nth-child(2){border-color:rgba(98,127,255,.28)}@keyframes kovoFloat{50%{transform:translateY(-8px)}}@keyframes kovoStatus{50%{transform:translateY(-5px)}} .old-school{--sample-bg:#eeeade;--sample-panel:#fffdf7;--sample-text:#151515;--sample-muted:#5f5c55;--sample-line:rgba(0,0,0,.18);--sample-accent:#171717;--sample-accent2:#171717;color-scheme:light}.old-school .sample-backbar{background:rgba(244,241,232,.92);box-shadow:none}.old-school .sample-hero{background:#eeeade;grid-template-columns:1.1fr .9fr}.old-school .sample-kicker{color:#151515}.old-school .sample-title{font-family:Georgia,"Times New Roman",serif;letter-spacing:-.055em;line-height:.93}.old-school .sample-title em{color:#151515;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:7px}.old-school .sample-lead{color:#555149}.old-school .sample-btn{border-radius:0;background:transparent;color:#111;border:2px solid #111;box-shadow:none}.old-school .sample-btn.primary{background:#111;color:#fff}.old-menu{border:2px solid #161616;background:#f9f6ed;padding:23px;min-height:440px}.old-menu-head{display:flex;justify-content:space-between;padding-bottom:16px;border-bottom:2px solid #161616;font-weight:900;font-size:13px}.old-menu h2{font-family:Georgia,serif;margin:35px 0 18px;font-size:53px;letter-spacing:-.05em}.old-menu-actions{display:grid;gap:8px}.old-menu-actions a{display:flex;justify-content:space-between;padding:18px;border:1px solid #222;font-weight:900;font-size:12px}.old-menu-actions a:first-child{background:#151515;color:#fff}.old-menu-info{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:30px;padding-top:20px;border-top:1px solid #5a574f;font-size:11px}.old-school .sample-second{background:#f8f5ed}.old-school .sample-card{border-radius:0;background:transparent;border:1px solid #b9b3a8}.old-school .sample-card .card-signal{background:#161616;box-shadow:none}.old-school .sample-section-heading span{color:#171717}.old-school .sample-card p{color:#625e56}.old-school [data-reveal]{transform:none} .custom-sample{--sample-bg:#0a0b0e;--sample-panel:#14151a;--sample-accent:#ff6b5f;--sample-accent2:#6de5c2}.custom-sample .sample-hero{background:radial-gradient(circle at 14% 18%,rgba(255,107,95,.13),transparent 27%),radial-gradient(circle at 84% 70%,rgba(109,229,194,.12),transparent 30%),#0a0b0e}.custom-stage{position:relative;min-height:520px}.custom-blob{position:absolute;border-radius:50% 40% 60% 46%;filter:saturate(115%);animation:blobMove 6s ease-in-out infinite alternate}.custom-blob.one{left:3%;top:8%;width:270px;height:250px;background:linear-gradient(145deg,#ff685d,#9f4cff)}.custom-blob.two{right:0;bottom:3%;width:260px;height:245px;background:linear-gradient(145deg,#68e3c0,#4776ff);animation-delay:-2.3s}.custom-panel{position:absolute;z-index:3;left:50%;top:50%;width:min(82%,420px);transform:translate(-50%,-50%) rotate(-3deg);padding:30px;border:1px solid rgba(255,255,255,.17);border-radius:28px;background:rgba(15,16,22,.78);backdrop-filter:blur(24px);box-shadow:0 40px 100px rgba(0,0,0,.42);animation:customPanel 4.4s ease-in-out infinite}.custom-panel small{font-size:8px;letter-spacing:.17em;color:#9aa6b8}.custom-panel b{display:block;margin:24px 0 10px;font-size:38px;letter-spacing:-.055em}.custom-panel p{margin:0;color:#aab4c3;font-size:13px;line-height:1.55}.custom-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:24px}.custom-tags i{font-style:normal;padding:8px 10px;border:1px solid rgba(255,255,255,.12);border-radius:999px;font-size:8px}.custom-sample .sample-card:nth-child(1){background:linear-gradient(145deg,rgba(255,107,95,.09),rgba(255,255,255,.02))}.custom-sample .sample-card:nth-child(2){background:linear-gradient(145deg,rgba(109,229,194,.08),rgba(255,255,255,.02))}@keyframes blobMove{to{transform:translate3d(20px,14px,0) rotate(14deg);border-radius:38% 62% 44% 56%}}@keyframes customPanel{50%{transform:translate(-50%,-52%) rotate(2deg)}} @media(max-width:900px){.sample-hero{grid-template-columns:1fr;gap:35px;padding-top:115px}.sample-title{font-size:clamp(54px,12vw,86px)}.sample-visual{min-height:430px}.sample-grid{grid-template-columns:1fr 1fr}.old-school .sample-hero{grid-template-columns:1fr}.machine-ring.r1{width:390px;height:390px}.machine-ring.r2{width:300px;height:300px}} @media(max-width:620px){.sample-backbar{top:8px;width:calc(100% - 16px);height:52px;padding:0 12px}.sample-backbar span{display:none}.sample-hero{min-height:auto;padding:105px 16px 68px;display:block}.sample-title{font-size:clamp(50px,15vw,68px)}.sample-lead{font-size:16px}.sample-actions{display:grid;grid-template-columns:1fr}.sample-btn{width:100%}.sample-visual{min-height:410px;margin-top:42px}.sample-second{min-height:auto;padding:80px 16px}.sample-section-heading h2{font-size:clamp(40px,12vw,58px)}.sample-grid{grid-template-columns:1fr;margin-top:36px}.sample-card{min-height:210px}.machine-ring.r1{width:330px;height:330px}.machine-ring.r2{width:255px;height:255px}.machine-ring.r3{width:185px;height:185px}.machine-card{width:85%;padding:21px;min-height:240px}.machine-chip.c1{left:-1%}.machine-chip.c2{right:-1%}.machine-chip.c3{right:0}.machine-word{font-size:50px}.old-menu{min-height:400px;padding:19px}.old-menu h2{font-size:43px}.old-menu-info{grid-template-columns:1fr}.custom-blob.one{width:210px;height:200px}.custom-blob.two{width:200px;height:190px}.custom-panel{width:88%;padding:23px}.custom-panel b{font-size:31px}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}[data-reveal]{opacity:1;transform:none}} /* IMMERSIF V2 — SCROLL-DRIVEN STORY */ :root{--immersive-p:0;--story-p:0} .immersive .immersive-journey{height:185svh;min-height:0;padding:0;display:block;overflow:visible;background:#05050a} .immersive-sticky{position:sticky;top:0;height:100svh;min-height:720px;overflow:hidden;background: radial-gradient(circle at 73% 28%,rgba(113,78,255,.18),transparent 31%), radial-gradient(circle at 17% 80%,rgba(66,38,167,.14),transparent 32%), linear-gradient(180deg,#05050a,#080914)} .immersive-grid-bg{position:absolute;inset:-22%;background-image: linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px); background-size:58px 58px; transform:perspective(750px) rotateX(64deg) translate3d(calc(var(--immersive-p)*-45px),calc(-9% + var(--immersive-p)*55px),0) scale(calc(1 + var(--immersive-p)*.12)); transform-origin:center 38%;opacity:calc(.9 - var(--immersive-p)*.35)} .immersive-aura{position:absolute;border-radius:50%;filter:blur(12px);pointer-events:none}.immersive-aura.aura-one{width:48vw;height:48vw;right:-14vw;top:-12vw;background:radial-gradient(circle,rgba(113,82,255,.28),transparent 68%);transform:scale(calc(1 + var(--immersive-p)*.45)) translate3d(calc(var(--immersive-p)*-9vw),calc(var(--immersive-p)*10vh),0)}.immersive-aura.aura-two{width:42vw;height:42vw;left:-15vw;bottom:-18vw;background:radial-gradient(circle,rgba(71,48,170,.22),transparent 69%);transform:scale(calc(.9 + var(--immersive-p)*.5)) translate3d(calc(var(--immersive-p)*8vw),calc(var(--immersive-p)*-8vh),0)} .immersive-type-rails{position:absolute;z-index:1;inset:0;pointer-events:none;mix-blend-mode:screen}.type-rail{position:absolute;white-space:nowrap;font-size:clamp(58px,9vw,145px);line-height:.8;letter-spacing:-.07em;font-weight:900;color:rgba(194,184,255,.055);text-transform:uppercase}.rail-a{left:-18vw;top:16%;transform:translate3d(calc(var(--immersive-p)*33vw),calc(var(--immersive-p)*-9vh),0) rotate(-4deg)}.rail-b{right:-24vw;bottom:10%;transform:translate3d(calc(var(--immersive-p)*-39vw),calc(var(--immersive-p)*8vh),0) rotate(4deg)} .immersive-copy-main{position:absolute;z-index:8;left:max(24px,calc((100vw - 1200px)/2));top:17vh;width:min(650px,47vw);transform:translate3d(0,calc(var(--immersive-p)*-31vh),0) scale(calc(1 - var(--immersive-p)*.12));transform-origin:left top;opacity:calc(1 - var(--immersive-p)*1.22)} .immersive-copy-main .sample-title{font-size:clamp(64px,8.2vw,118px)}.immersive-copy-main .sample-lead{font-size:clamp(17px,1.45vw,21px)} .immersive-machine{position:absolute;z-index:7;right:max(24px,calc((100vw - 1200px)/2));top:50%;width:min(47vw,560px);min-height:560px;transform: translate3d(calc(var(--immersive-p)*-10vw),calc(-50% + var(--immersive-p)*3vh),0) scale(calc(.94 + var(--immersive-p)*.2)) rotate(calc(var(--immersive-p)*-4deg)); filter:saturate(calc(1 + var(--immersive-p)*.5))} .immersive-machine .machine-ring.r1{transform:translate(-50%,-50%) rotate(calc(var(--immersive-p)*240deg));animation:none}.immersive-machine .machine-ring.r2{transform:translate(-50%,-50%) rotate(calc(var(--immersive-p)*-360deg));animation:none}.immersive-machine .machine-ring.r3{transform:translate(-50%,-50%) scale(calc(1 + var(--immersive-p)*.18));animation:none} .immersive-machine .machine-card{animation:machineFloat 4s ease-in-out infinite} .immersive-machine .machine-halo{transform:scale(calc(1 + var(--immersive-p)*.5));opacity:calc(.85 - var(--immersive-p)*.18)} .immersive-machine .c1{transform:translate3d(calc(var(--immersive-p)*-70px),calc(var(--immersive-p)*-90px),0)}.immersive-machine .c2{transform:translate3d(calc(var(--immersive-p)*95px),calc(var(--immersive-p)*-60px),0)}.immersive-machine .c3{transform:translate3d(calc(var(--immersive-p)*75px),calc(var(--immersive-p)*90px),0)} .immersive-scroll-cue{position:absolute;z-index:9;left:50%;bottom:24px;transform:translateX(-50%);display:flex;align-items:center;gap:12px;color:#8994aa;font-size:8px;letter-spacing:.18em;opacity:calc(1 - var(--immersive-p)*1.8)}.immersive-scroll-cue i{display:block;width:70px;height:1px;background:rgba(255,255,255,.12);overflow:hidden}.immersive-scroll-cue i:after{content:"";display:block;width:45%;height:100%;background:#b4a8ff;box-shadow:0 0 12px #7557ff;animation:immersiveCue 1.7s ease-in-out infinite} @keyframes immersiveCue{from{transform:translateX(-110%)}to{transform:translateX(260%)}} .immersive-story{height:185svh;min-height:0;padding:0;overflow:visible;background:linear-gradient(180deg,#080914,#06070b)} .story-sticky{position:sticky;top:0;height:100svh;min-height:720px;overflow:hidden;padding:112px max(24px,calc((100vw - 1200px)/2)) 56px;background: radial-gradient(circle at 50% 48%,rgba(100,74,233,.13),transparent 35%), linear-gradient(180deg,#080914,#06070b)} .story-sticky:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 49.8%,rgba(255,255,255,.035) 50%,transparent 50.2%);opacity:.5} .story-orbit{position:absolute;left:50%;top:48%;border:1px solid rgba(163,148,255,.11);border-radius:50%;transform:translate(-50%,-50%) rotate(calc(var(--story-p)*240deg))}.orbit-a{width:min(82vw,900px);height:min(82vw,900px)}.orbit-b{width:min(58vw,640px);height:min(58vw,640px);border-style:dashed;transform:translate(-50%,-50%) rotate(calc(var(--story-p)*-330deg))} .story-kicker{position:relative;z-index:3;margin:0;text-align:center;font-size:9px;font-weight:900;letter-spacing:.2em;color:#9d91ee} .story-words{position:absolute;z-index:4;left:50%;top:46%;width:100%;transform:translate(-50%,-50%);text-align:center}.story-word{position:absolute;left:50%;top:50%;width:100%;transform:translate(-50%,-50%) scale(.68) rotate(-4deg);opacity:0;font-size:clamp(70px,14vw,210px);line-height:.8;letter-spacing:-.08em;font-weight:900;color:#f7f6ff;text-shadow:0 0 65px rgba(126,98,255,.1);transition:opacity .32s ease,transform .55s cubic-bezier(.2,.8,.2,1),filter .45s ease}.immersive-story[data-phase="0"] .word-0,.immersive-story[data-phase="1"] .word-1,.immersive-story[data-phase="2"] .word-2,.immersive-story[data-phase="3"] .word-3{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0);filter:blur(0)}.story-word:not(.word-0){color:#b8acff} .story-copy{position:absolute;z-index:4;left:50%;top:62%;width:min(680px,80vw);transform:translateX(-50%);margin:0;text-align:center;color:#aab3c2;font-size:15px;line-height:1.6;opacity:calc(.38 + var(--story-p)*.62)} .story-cards{position:absolute;z-index:5;left:max(24px,calc((100vw - 1200px)/2));right:max(24px,calc((100vw - 1200px)/2));bottom:62px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .story-card{min-height:145px;padding:18px;border:1px solid rgba(255,255,255,.11);border-radius:18px;background:rgba(12,14,25,.62);backdrop-filter:blur(16px);transform:translateY(calc((1 - var(--story-p))*85px)) scale(calc(.94 + var(--story-p)*.06));opacity:calc(.15 + var(--story-p)*.85);transition:border-color .25s ease}.story-card:nth-child(2){transform:translateY(calc((1 - var(--story-p))*125px)) scale(calc(.92 + var(--story-p)*.08))}.story-card:nth-child(3){transform:translateY(calc((1 - var(--story-p))*165px)) scale(calc(.9 + var(--story-p)*.1))}.story-card span{font-size:7px;letter-spacing:.16em;color:#8277d8}.story-card b{display:block;margin:19px 0 7px;font-size:19px;letter-spacing:-.03em}.story-card p{margin:0;color:#9da7b8;font-size:11px;line-height:1.5} .story-return{position:absolute;z-index:7;left:50%;bottom:18px;transform:translateX(-50%);font-size:9px;font-weight:850;letter-spacing:.08em;color:#c8c2ff;opacity:calc(.25 + var(--story-p)*.75)} @media(max-width:900px){ .immersive-copy-main{left:24px;top:14vh;width:55vw}.immersive-machine{right:8px;width:48vw} .story-card b{font-size:17px} } @media(max-width:620px){ .immersive .immersive-journey,.immersive-story{height:auto} .immersive-sticky,.story-sticky{position:relative;height:auto;min-height:0;overflow:hidden} .immersive-sticky{padding:108px 16px 68px} .immersive-copy-main{position:relative;left:auto;top:auto;width:100%;transform:none;opacity:1} .immersive-copy-main .sample-title{font-size:clamp(50px,15vw,68px)} .immersive-type-rails{opacity:.55}.type-rail{font-size:62px}.rail-a{top:8%;left:-55%}.rail-b{bottom:34%;right:-80%} .immersive-machine{position:relative;right:auto;top:auto;width:100%;min-height:430px;margin-top:32px;transform:none} .immersive-scroll-cue{display:none} .immersive-grid-bg{transform:perspective(650px) rotateX(65deg);opacity:.6} .story-sticky{padding:86px 16px 46px;min-height:940px} .story-words{top:29%}.story-word{font-size:clamp(58px,18vw,82px)} .story-copy{top:40%;width:calc(100% - 32px);font-size:14px} .story-cards{left:16px;right:16px;bottom:90px;grid-template-columns:1fr;gap:9px} .story-card,.story-card:nth-child(2),.story-card:nth-child(3){min-height:0;transform:none;opacity:1} .story-return{bottom:38px} .story-orbit{top:30%}.orbit-a{width:480px;height:480px}.orbit-b{width:340px;height:340px} } @media(prefers-reduced-motion:reduce){ .immersive-copy-main,.immersive-machine,.story-card,.story-card:nth-child(2),.story-card:nth-child(3),.story-word,.immersive-grid-bg,.immersive-aura,.story-orbit{transform:none!important;opacity:1!important} .story-word{position:relative;display:none;left:auto;top:auto}.immersive-story[data-phase="0"] .word-0{display:block} } /* IMMERSIF — SAFE TEXT FX */ .immersive-copy-main .sample-title>span{ position:relative; animation:titleDrift 4.6s ease-in-out infinite; } .immersive-copy-main .sample-title>span:nth-child(2){ animation-delay:-1.8s; } .immersive-copy-main .sample-title em{ color:transparent; background:linear-gradient(100deg,#8d78ff 0%,#d9d3ff 28%,#ffffff 46%,#a58fff 64%,#7156ff 100%); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; text-shadow:none; animation:textShimmer 4.2s linear infinite,textGlow 3.6s ease-in-out infinite; } .story-word{ color:transparent!important; background:linear-gradient(100deg,#f7f6ff 0%,#b8acff 34%,#ffffff 50%,#8e78ff 70%,#f7f6ff 100%); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; text-shadow:0 0 42px rgba(126,98,255,.12); animation:storyShimmer 4.8s linear infinite,storyGlow 3.8s ease-in-out infinite; } .story-word.word-1{animation-delay:-.7s,-1.1s} .story-word.word-2{animation-delay:-1.4s,-2.2s} .story-word.word-3{animation-delay:-2.1s,-3.1s} @keyframes textShimmer{ 0%{background-position:130% 50%} 100%{background-position:-90% 50%} } @keyframes titleDrift{ 0%,100%{filter:drop-shadow(0 0 0 rgba(126,98,255,0))} 50%{filter:drop-shadow(0 8px 18px rgba(126,98,255,.14))} } @keyframes textGlow{ 0%,100%{filter:drop-shadow(0 0 8px rgba(133,111,255,.12))} 50%{filter:drop-shadow(0 0 24px rgba(166,147,255,.3))} } @keyframes storyShimmer{ 0%{background-position:135% 50%} 100%{background-position:-95% 50%} } @keyframes storyGlow{ 0%,100%{text-shadow:0 0 28px rgba(126,98,255,.08)} 50%{text-shadow:0 0 58px rgba(126,98,255,.22)} } @media(prefers-reduced-motion:reduce){ .immersive-copy-main .sample-title>span, .immersive-copy-main .sample-title em, .story-word{animation:none!important} } /* SPÉCIALITÉ KOVO — CONTROLLED MOTION */ .kovo-sample .sample-hero:before{ content:""; position:absolute; inset:-15%; pointer-events:none; background: radial-gradient(circle at 72% 28%,rgba(118,139,255,.15),transparent 24%), radial-gradient(circle at 28% 72%,rgba(80,105,210,.08),transparent 28%); animation:kovoAuraDrift 9s ease-in-out infinite alternate; } .kovo-sample .sample-title em{ display:inline; color:transparent; background:linear-gradient(100deg,#8fa1ff 0%,#c8d0ff 38%,#ffffff 50%,#9cadff 68%,#7188ff 100%); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; animation:kovoTextSweep 6s linear infinite; } .kovo-board-shell{ position:relative; overflow:hidden; animation:kovoFloat 5s ease-in-out infinite,kovoBoardGlow 4.8s ease-in-out infinite; } .kovo-board-shell:before{ content:""; position:absolute; inset:-30% -60%; background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.08) 49%,rgba(158,177,255,.12) 50%,rgba(255,255,255,.07) 52%,transparent 59%); transform:translateX(-45%); animation:kovoBoardSweep 6.5s ease-in-out infinite; pointer-events:none; } .kovo-board-hero{ position:relative; overflow:hidden; animation:kovoHeroBreath 4.6s ease-in-out infinite; } .kovo-board-hero:after{ content:""; position:absolute; left:-45%; bottom:-1px; width:40%; height:1px; background:linear-gradient(90deg,transparent,#aebaff,transparent); box-shadow:0 0 14px rgba(150,168,255,.7); animation:kovoHeroLine 3.8s ease-in-out infinite; } .kovo-quick i{ position:relative; overflow:hidden; transition:transform .28s ease,border-color .28s ease,background .28s ease; } .kovo-quick i:nth-child(1){animation:kovoQuickFloat 4.8s ease-in-out infinite} .kovo-quick i:nth-child(2){animation:kovoQuickFloat 4.8s -1.2s ease-in-out infinite} .kovo-quick i:nth-child(3){animation:kovoQuickFloat 4.8s -2.4s ease-in-out infinite} .kovo-quick i:hover{ transform:translateY(-5px) scale(1.02); border-color:rgba(156,173,255,.38); background:#19243a; } .kovo-status{ animation:kovoStatus 3s ease-in-out infinite,kovoStatusPulse 2.8s ease-in-out infinite; } .kovo-sample .sample-card{ transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease; } .kovo-sample .sample-card:hover{ transform:translateY(-7px) scale(1.01); border-color:rgba(122,147,255,.35); box-shadow:0 22px 55px rgba(44,61,125,.13); } .kovo-sample .sample-card .card-signal{ animation:kovoSignal 2.4s ease-in-out infinite; } .kovo-sample .sample-card:nth-child(2) .card-signal{animation-delay:-.8s} .kovo-sample .sample-card:nth-child(3) .card-signal{animation-delay:-1.6s} @keyframes kovoAuraDrift{ 0%{transform:translate3d(-1.5%,0,0) scale(1)} 100%{transform:translate3d(2.5%,-2%,0) scale(1.08)} } @keyframes kovoTextSweep{ 0%{background-position:130% 50%} 100%{background-position:-90% 50%} } @keyframes kovoBoardGlow{ 0%,100%{box-shadow:0 38px 90px rgba(0,0,0,.35),0 0 0 rgba(98,127,255,0)} 50%{box-shadow:0 42px 95px rgba(0,0,0,.4),0 0 42px rgba(98,127,255,.08)} } @keyframes kovoBoardSweep{ 0%,18%{transform:translateX(-48%);opacity:0} 34%{opacity:1} 62%{opacity:.75} 78%,100%{transform:translateX(48%);opacity:0} } @keyframes kovoHeroBreath{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.012)} } @keyframes kovoHeroLine{ 0%{transform:translateX(0);opacity:0} 22%{opacity:1} 78%{opacity:1} 100%{transform:translateX(390%);opacity:0} } @keyframes kovoQuickFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} } @keyframes kovoStatusPulse{ 0%,100%{box-shadow:0 16px 38px rgba(0,0,0,.25),0 0 0 rgba(98,127,255,0)} 50%{box-shadow:0 20px 45px rgba(0,0,0,.3),0 0 28px rgba(98,127,255,.15)} } @keyframes kovoSignal{ 0%,100%{transform:scale(1);opacity:.75} 50%{transform:scale(1.28);opacity:1} } @media(max-width:620px){ .kovo-quick i:hover{transform:none} } @media(prefers-reduced-motion:reduce){ .kovo-sample .sample-hero:before, .kovo-sample .sample-title em, .kovo-board-shell, .kovo-board-shell:before, .kovo-board-hero, .kovo-board-hero:after, .kovo-quick i, .kovo-status, .kovo-sample .sample-card .card-signal{animation:none!important} } /* TEMP DEMO — REAL MOBILE WINDOW */ .phone-preview-toggle{ position:fixed;z-index:999;right:18px;bottom:18px;min-height:46px;padding:0 16px; display:inline-flex;align-items:center;justify-content:center;gap:9px; border:1px solid rgba(255,255,255,.16);border-radius:14px; background:rgba(10,14,22,.9);color:#f7f8fb;backdrop-filter:blur(18px) saturate(135%); box-shadow:0 18px 48px rgba(0,0,0,.3);font:800 11px/1 Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; letter-spacing:.04em;cursor:pointer;transition:transform .18s ease,background .18s ease,border-color .18s ease } .old-school .phone-preview-toggle{background:rgba(20,20,18,.88);color:#fff} .phone-preview-toggle:hover{transform:translateY(-2px);background:rgba(18,24,37,.96);border-color:rgba(255,255,255,.24)} .phone-preview-toggle svg{width:15px;height:15px} @media(max-width:820px){.phone-preview-toggle{display:none}} @media(prefers-reduced-motion:reduce){.phone-preview-toggle{transition:none}} /* IMMERSIVE STORY — MOBILE FLOW FIX */ @media(max-width:620px){ .immersive-story{height:auto!important;overflow:hidden} .story-sticky{ position:relative!important;height:auto!important;min-height:0!important; display:flex;flex-direction:column;overflow:hidden; padding:82px 16px 34px!important } .story-kicker{position:relative;order:1} .story-words{ position:relative!important;z-index:4;left:auto!important;top:auto!important; width:100%!important;height:96px;margin:28px 0 18px; transform:none!important;order:2 } .story-word{ left:50%!important;top:50%!important;width:100%; font-size:clamp(48px,16vw,68px)!important;line-height:.86; white-space:nowrap } .story-copy{ position:relative!important;z-index:4;left:auto!important;top:auto!important; width:100%!important;transform:none!important;margin:0 auto; text-align:center;font-size:14px;line-height:1.55;opacity:1!important;order:3 } .story-cards{ position:relative!important;z-index:5;left:auto!important;right:auto!important;bottom:auto!important; display:grid;grid-template-columns:1fr;gap:10px;width:100%;margin-top:28px;order:4 } .story-card,.story-card:nth-child(2),.story-card:nth-child(3){ min-height:0!important;transform:none!important;opacity:1!important;padding:18px } .story-card b{margin:12px 0 6px;font-size:18px} .story-return{ position:relative!important;left:auto!important;bottom:auto!important; transform:none!important;display:block;margin:26px auto 0;text-align:center; opacity:1!important;order:5 } .story-orbit{top:190px!important;opacity:.55} .orbit-a{width:430px!important;height:430px!important} .orbit-b{width:300px!important;height:300px!important} } @media(max-width:390px){ .story-words{height:84px;margin-top:24px} .story-word{font-size:clamp(43px,15vw,58px)!important} } /* SHARED KOVO AMBIENT BACKGROUND — all model pages use the same system */ :root{ --ambient-x:0px; --ambient-y:0px; --ambient-scroll-x:0px; --ambient-scroll-y:0px; --ambient-pointer-x:72%; --ambient-pointer-y:24%; } body.sample{ --ambient-base:#060810; --ambient-accent-rgb:98,127,255; --ambient-accent2-rgb:102,73,205; --ambient-grid-rgb:255,255,255; --ambient-word:rgba(164,177,255,.04); position:relative; isolation:isolate; background:transparent!important; } body.sample::before, body.sample::after{ position:fixed; pointer-events:none; z-index:-2; } body.sample::before{ content:""; inset:-4%; background: radial-gradient(circle 450px at var(--ambient-pointer-x) var(--ambient-pointer-y),rgba(var(--ambient-accent-rgb),.17),transparent 68%), radial-gradient(circle at 80% 18%,rgba(var(--ambient-accent-rgb),.14),transparent 28%), radial-gradient(circle at 16% 78%,rgba(var(--ambient-accent2-rgb),.105),transparent 31%), linear-gradient(rgba(var(--ambient-grid-rgb),.024) 1px,transparent 1px), linear-gradient(90deg,rgba(var(--ambient-grid-rgb),.024) 1px,transparent 1px), var(--ambient-base); background-size:auto,auto,auto,56px 56px,56px 56px,auto; background-position: 0 0, calc(50% + var(--ambient-x)) calc(50% + var(--ambient-y)), calc(50% + var(--ambient-scroll-x)) calc(50% + var(--ambient-scroll-y)), var(--ambient-scroll-x) var(--ambient-scroll-y), var(--ambient-scroll-x) var(--ambient-scroll-y), 0 0; transform:translate3d(var(--ambient-x),var(--ambient-y),0) scale(1.035); animation:sampleAmbientBreath 13s ease-in-out infinite alternate; will-change:transform,background-position; } body.sample::after{ content:""; z-index:-1; left:50%; bottom:4%; width:clamp(200px,25vw,380px); aspect-ratio:850/700; background:url("/assets/kovo-logo-dark.svg") center/contain no-repeat; opacity:.055; transform:translate3d( calc(-50% + var(--ambient-x) + var(--ambient-scroll-x)), calc(var(--ambient-y) + var(--ambient-scroll-y)), 0 ); filter:drop-shadow(0 18px 45px rgba(0,0,0,.22)); } @keyframes sampleAmbientBreath{ from{filter:saturate(.96) brightness(.975)} to{filter:saturate(1.06) brightness(1.025)} } @keyframes sampleAmbientWords{ from{opacity:.72;letter-spacing:-.079em} to{opacity:1;letter-spacing:-.071em} } /* Same structure, page-specific accent only. */ body.immersive{ --ambient-base:#060710; --ambient-accent-rgb:118,86,255; --ambient-accent2-rgb:74,49,174; --ambient-word:rgba(184,172,255,.055); } body.kovo-sample{ --ambient-base:#070a12; --ambient-accent-rgb:98,127,255; --ambient-accent2-rgb:73,96,190; --ambient-word:rgba(156,173,255,.05); } body.custom-sample{ --ambient-base:#090a0d; --ambient-accent-rgb:255,107,95; --ambient-accent2-rgb:109,229,194; --ambient-word:rgba(255,255,255,.037); } body.old-school{ --ambient-base:#eeeade; --ambient-accent-rgb:170,164,151; --ambient-accent2-rgb:210,204,191; --ambient-grid-rgb:20,20,20; --ambient-word:rgba(20,20,20,.035); background:transparent!important; } /* Remove hard section seams: the ambient background now lives behind the whole page. */ .sample-hero, .sample-second, .immersive .sample-hero, .kovo-sample .sample-hero, .old-school .sample-hero, .old-school .sample-second, .custom-sample .sample-hero, .immersive .immersive-journey, .immersive-story, .immersive-sticky, .story-sticky{ background:transparent!important; } /* The old moving text rails were clipped by the sticky section boundary. The global body watermark replaces them and continues between sections. */ .immersive-type-rails{display:none!important} /* Keep local model effects, but fade them into the shared background instead of hard cuts. */ .immersive-sticky, .story-sticky, .sample-hero, .sample-second{ isolation:isolate; } .immersive-sticky:after, .story-sticky:after{ content:""; position:absolute; left:0;right:0;bottom:-1px; height:120px; pointer-events:none; background:linear-gradient(to bottom,transparent,var(--ambient-base)); opacity:.18; z-index:0; } .sample-hero-copy,.sample-section-heading,.sample-grid, .story-kicker,.story-words,.story-copy,.story-cards,.story-return{ position:relative; z-index:2; } /* Keep the immersive visual in its designed absolute position on desktop. The mobile rule defined earlier still returns it to normal document flow. */ @media(min-width:621px){ .immersive .immersive-machine{position:absolute;z-index:7} } @media(max-width:620px){ body.sample::after{ left:50%; bottom:4%; width:min(58vw,220px); } } @media(prefers-reduced-motion:reduce){ body.sample::before,body.sample::after{animation:none!important} body.sample::after{transform:none} } /* MODEL PAGE AMBIENT POLISH */ .sample-hero, .sample-second, .immersive-sticky, .story-sticky{ border-bottom:1px solid rgba(var(--ambient-grid-rgb),.045); } .sample-card, .machine-card, .kovo-board-shell, .custom-panel, .old-menu{ box-shadow: 0 24px 70px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.025); } @media(prefers-reduced-motion:reduce){ body.sample::before{transform:none!important} } body.old-school::after{ background-image:url("/assets/kovo-logo-light.svg"); opacity:.06; } /* Official KOVO logo in every model header. */ .sample-backbar::before{ content:""; width:68px; height:42px; flex:0 0 auto; background:url("/assets/kovo-logo-dark.svg") center/contain no-repeat; } .old-school .sample-backbar::before{ background-image:url("/assets/kovo-logo-light.svg"); } @media(max-width:620px){ .sample-backbar::before{width:54px;height:36px} body.sample::after{width:min(58vw,220px);bottom:4%} }