:root{
--bg:#020A12;
--bg2:#04111D;
--white:#F4F8FF;
--cyan:#3ED6FF;
--blue:#0570FF;
--line:rgba(183,228,255,.17);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--white);font-family:"Manrope",Arial,Helvetica,sans-serif;overflow-x:hidden}
body.lock{overflow:hidden}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit}
img{display:block}
.site{width:100%;background:var(--bg)}
.section{position:relative;width:100%;line-height:0;overflow:hidden}
.section>img{width:100%;height:auto;user-select:none;-webkit-user-drag:none}

/* HOTSPOTS */
.hotspot{
position:absolute;
z-index:30;
padding:0;
margin:0;
border:0;
outline:0;
background:transparent;
cursor:pointer;
text-decoration:none;
border-radius:999px;
transition:background .2s ease,box-shadow .2s ease;
}
.hotspot:hover{
background:rgba(62,214,255,.025);
box-shadow:0 0 22px rgba(62,214,255,.18);
}

/* HERO */
.hero{
position:relative;
isolation:isolate;
background:#020A12;
--hero-energy:.36;
}
.hero>img{
position:relative;
z-index:1;
transform-origin:60% 44%;
will-change:transform;
animation:heroCameraDrift 8.6s ease-in-out infinite;
animation-play-state:paused;
}
.hero.hero-live-active>img{
animation-play-state:running;
}
.hero-life{
position:absolute;
z-index:5;
inset:0;
overflow:hidden;
pointer-events:none;
contain:paint;
}
.hero-life-parallax{
position:absolute;
inset:-2.5%;
will-change:transform;
transform:translate3d(0,0,0);
}
.hero-face-glow,
.hero-hair-light,
.hero-jacket-sheen,
.hero-atmosphere,
.hero-cursor-light,
.hero-particle{
position:absolute;
pointer-events:none;
}

.hero-face-glow{
left:49%;
top:8%;
width:31%;
height:72%;
border-radius:50%;
background:
radial-gradient(
ellipse at 52% 46%,
rgba(244,248,255,.12) 0%,
rgba(183,228,255,.07) 24%,
rgba(62,214,255,.035) 48%,
transparent 72%
);
opacity:.62;
transform:translate3d(0,0,0) scale(1);
animation:heroFaceLight 6.8s ease-in-out infinite;
will-change:transform,opacity;
}

.hero-hair-light{
left:31%;
top:-4%;
width:52%;
height:47%;
border-radius:50%;
background:
linear-gradient(
118deg,
transparent 20%,
rgba(62,214,255,.015) 37%,
rgba(183,228,255,.10) 48%,
rgba(244,248,255,.045) 54%,
transparent 68%
);
opacity:.42;
transform:translate3d(-5%,0,0) rotate(-5deg);
animation:heroHairLight 9.5s ease-in-out infinite;
will-change:transform,opacity;
}

.hero-jacket-sheen{
left:22%;
top:45%;
width:67%;
height:67%;
border-radius:46%;
background:
linear-gradient(
108deg,
transparent 29%,
rgba(5,112,255,.025) 39%,
rgba(62,214,255,.11) 48%,
rgba(244,248,255,.06) 52%,
transparent 62%
);
opacity:.47;
transform:translate3d(-8%,0,0) rotate(-6deg);
animation:heroJacketSheen 8.4s ease-in-out infinite;
will-change:transform,opacity;
}

.hero-atmosphere{
border-radius:50%;
will-change:transform,opacity;
}
.hero-atmosphere.a{
right:-9%;
top:-22%;
width:45%;
aspect-ratio:1;
background:
radial-gradient(
circle,
rgba(5,112,255,.12),
rgba(62,214,255,.035) 34%,
transparent 69%
);
opacity:.7;
animation:heroAtmosphereA 11s ease-in-out infinite;
}
.hero-atmosphere.b{
left:19%;
bottom:-38%;
width:51%;
aspect-ratio:1;
background:
radial-gradient(
circle,
rgba(62,214,255,.07),
rgba(5,112,255,.025) 42%,
transparent 72%
);
opacity:.55;
animation:heroAtmosphereB 13s ease-in-out infinite;
}

.hero-cursor-light{
left:0;
top:0;
width:260px;
height:260px;
margin:-130px 0 0 -130px;
border-radius:50%;
background:
radial-gradient(
circle,
rgba(244,248,255,.09) 0 4%,
rgba(62,214,255,.08) 12%,
rgba(5,112,255,.035) 34%,
transparent 68%
);
opacity:.18;
transform:translate3d(64vw,42%,0);
will-change:transform,opacity;
transition:opacity .2s linear;
}

.hero-particle{
width:3px;
height:3px;
border-radius:50%;
background:rgba(183,228,255,.72);
box-shadow:0 0 8px rgba(62,214,255,.34);
opacity:.35;
will-change:transform,opacity;
}
.hero-particle.p1{
left:39%;
top:20%;
animation:heroParticleOne 8.4s ease-in-out infinite;
}
.hero-particle.p2{
left:76%;
top:18%;
width:2px;
height:2px;
animation:heroParticleTwo 10.2s ease-in-out infinite;
}
.hero-particle.p3{
left:83%;
top:66%;
animation:heroParticleThree 9.2s ease-in-out infinite;
}
.hero-particle.p4{
left:29%;
top:72%;
width:2px;
height:2px;
animation:heroParticleTwo 11.4s ease-in-out -2s infinite;
}
.hero-particle.p5{
left:68%;
top:82%;
width:2px;
height:2px;
animation:heroParticleOne 9.6s ease-in-out -3s infinite;
}
.hero-particle.p6{
left:92%;
top:39%;
animation:heroParticleThree 12s ease-in-out -1.5s infinite;
}
.hero-particle.p7{
left:52%;
top:11%;
width:2px;
height:2px;
animation:heroParticleTwo 8.9s ease-in-out -4s infinite;
}
.hero-particle.p8{
left:22%;
top:39%;
width:2px;
height:2px;
animation:heroParticleThree 10.8s ease-in-out -3.5s infinite;
}

.hero-face-glow,
.hero-hair-light,
.hero-jacket-sheen,
.hero-atmosphere,
.hero-particle{
animation-play-state:paused;
}
.hero.hero-live-active .hero-face-glow,
.hero.hero-live-active .hero-hair-light,
.hero.hero-live-active .hero-jacket-sheen,
.hero.hero-live-active .hero-atmosphere,
.hero.hero-live-active .hero-particle{
animation-play-state:running;
}

@keyframes heroCameraDrift{
0%,100%{
transform:
translate3d(
calc(var(--hero-x,0px) - 4px),
calc(var(--hero-y,0px) + 2px),
0
)
scale(1.028);
}
44%{
transform:
translate3d(
calc(var(--hero-x,0px) + 7px),
calc(var(--hero-y,0px) - 4px),
0
)
scale(1.043);
}
72%{
transform:
translate3d(
calc(var(--hero-x,0px) + 2px),
calc(var(--hero-y,0px) + 3px),
0
)
scale(1.034);
}
}
@keyframes heroFaceLight{
0%,100%{
opacity:.48;
transform:translate3d(-1%,1%,0) scale(.98);
}
50%{
opacity:.72;
transform:translate3d(1%,-1%,0) scale(1.025);
}
}
@keyframes heroHairLight{
0%,100%{
opacity:.25;
transform:translate3d(-8%,1%,0) rotate(-5deg);
}
50%{
opacity:.52;
transform:translate3d(7%,-1%,0) rotate(-2deg);
}
}
@keyframes heroJacketSheen{
0%,100%{
opacity:.22;
transform:translate3d(-10%,0,0) rotate(-6deg);
}
48%{
opacity:.5;
transform:translate3d(8%,-1%,0) rotate(-4deg);
}
70%{
opacity:.32;
transform:translate3d(13%,1%,0) rotate(-3deg);
}
}
@keyframes heroAtmosphereA{
0%,100%{
opacity:.45;
transform:translate3d(0,0,0) scale(.96);
}
50%{
opacity:.72;
transform:translate3d(-5%,6%,0) scale(1.05);
}
}
@keyframes heroAtmosphereB{
0%,100%{
opacity:.35;
transform:translate3d(0,0,0) scale(.95);
}
50%{
opacity:.62;
transform:translate3d(5%,-4%,0) scale(1.05);
}
}
@keyframes heroParticleOne{
0%,100%{
opacity:.2;
transform:translate3d(0,5px,0) scale(.8);
}
50%{
opacity:.7;
transform:translate3d(7px,-10px,0) scale(1.25);
}
}
@keyframes heroParticleTwo{
0%,100%{
opacity:.16;
transform:translate3d(2px,-3px,0) scale(.75);
}
50%{
opacity:.58;
transform:translate3d(-8px,9px,0) scale(1.15);
}
}
@keyframes heroParticleThree{
0%,100%{
opacity:.18;
transform:translate3d(-4px,3px,0) scale(.8);
}
50%{
opacity:.66;
transform:translate3d(8px,-7px,0) scale(1.2);
}
}

.h-work{
left:74.3%;
top:3.2%;
width:6.8%;
height:9%;
}
.h-talk{
left:81.8%;
top:2.2%;
width:11.8%;
height:10%;
}
.h-showreel{
left:81.7%;
top:79%;
width:15.8%;
height:13%;
}

.hero-note{
position:absolute;
z-index:20;
left:29%;
top:1.2%;
width:42%;
height:10%;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
pointer-events:none;
}
.hero-note-text{
position:absolute;
width:100%;
padding:0 14px;
text-align:center;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
color:rgba(244,248,255,.92);
font-family:"Manrope",Arial,Helvetica,sans-serif;
font-style:italic;
font-size:clamp(12px,1.55vw,24px);
line-height:1.2;
opacity:1;
transform:translateY(0);
transition:opacity .42s ease,transform .42s ease;
}
.hero-note-text.hide{
opacity:0;
transform:translateY(-7px);
}

/* PROJECTS */
.projects{
position:relative;
}
.p-all{
left:86.1%;
top:4.4%;
width:10.8%;
height:8%;
}
.f-all{
left:30.6%;
top:4.5%;
width:4.4%;
height:8%;
}
.f-visual{
left:35.7%;
top:4.5%;
width:7.7%;
height:8%;
}
.f-fashion{
left:43.5%;
top:4.5%;
width:6.6%;
height:8%;
}
.f-brand{
left:50.3%;
top:4.5%;
width:5.2%;
height:8%;
}
.f-video{
left:56%;
top:4.5%;
width:5.2%;
height:8%;
}
.f-market{
left:61.3%;
top:4.5%;
width:9.2%;
height:8%;
}

.filter-static-cover{
position:absolute;
z-index:41;
left:30.45%;
top:9.05%;
width:3.65%;
height:1.25%;
background:#02080E;
pointer-events:none;
}
.filter-active{
position:absolute;
z-index:42;
top:9.45%;
height:1px;
background:#fff;
pointer-events:none;
transition:left .3s ease,width .3s ease;
}

.card{
position:absolute;
z-index:8;
padding:0;
border:0;
outline:0;
background:transparent;
cursor:pointer;
}
.card:hover{
box-shadow:
0 0 0 1px rgba(62,214,255,.55),
0 0 25px rgba(62,214,255,.1);
}

.c-lumiere{
left:4.58%;
top:14.1%;
width:25.1%;
height:81.1%;
}
.c-beauty{
left:30.72%;
top:14.1%;
width:21.72%;
height:40.9%;
}
.c-auto{
left:53.72%;
top:14.1%;
width:23%;
height:40.9%;
}
.c-tech{
left:77.82%;
top:14.1%;
width:17.68%;
height:81.1%;
}
.c-fashion{
left:30.72%;
top:57.3%;
width:19.28%;
height:37.9%;
}
.c-interior{
left:51.02%;
top:57.3%;
width:25.7%;
height:37.9%;
}

.project-filter-view{
position:absolute;
z-index:24;
left:4.55%;
right:4.5%;
top:13%;
bottom:4.5%;
display:flex;
align-items:center;
justify-content:center;
background:
radial-gradient(
circle at 50% 42%,
rgba(5,112,255,.07),
transparent 36%
),
#020A12;
opacity:0;
visibility:hidden;
pointer-events:none;
transition:opacity .3s ease,visibility .3s ease;
}
.project-filter-view.active{
opacity:1;
visibility:visible;
pointer-events:auto;
}

.filtered-grid{
width:100%;
height:100%;
padding:clamp(10px,1.7vw,24px);
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
gap:clamp(10px,1.5vw,20px);
}
.filtered-card{
position:relative;
height:80%;
max-height:290px;
min-height:120px;
aspect-ratio:var(--card-ratio);
padding:0;
flex:0 0 auto;
overflow:hidden;
border:1px solid rgba(183,228,255,.23);
background-image:url("/assets/projects.jpg");
background-repeat:no-repeat;
background-size:var(--crop-size-x) var(--crop-size-y);
background-position:var(--crop-pos-x) var(--crop-pos-y);
cursor:pointer;
}
.filtered-card:hover{
transform:translateY(-4px);
border-color:rgba(62,214,255,.6);
box-shadow:
0 13px 35px rgba(0,0,0,.32),
0 0 24px rgba(62,214,255,.09);
}
.filtered-grid.count-1 .filtered-card{
height:88%;
max-width:44%;
}
.filtered-grid.count-2 .filtered-card{
height:82%;
max-width:43%;
}
.filtered-grid.count-3 .filtered-card{
height:76%;
max-width:29%;
}

/* LUMIÈRE */
.c-lumiere{
left:4.58%;
top:14.1%;
width:25.1%;
height:81.1%;
z-index:12;
overflow:hidden;
border:1px solid rgba(183,228,255,.20);
border-radius:0;
background:#020A12;
background-image:
linear-gradient(
180deg,
transparent 51%,
rgba(1,5,9,.10) 63%,
rgba(1,5,9,.94) 100%
),
url("/assets/cases/lumiere/01_preview_LUMIERE.webp");
background-size:cover;
background-position:center;
background-repeat:no-repeat;
line-height:1.1;
text-align:left;
}
.c-lumiere .project-card-image{
position:absolute;
z-index:1;
inset:0;
width:100%;
height:100%;
object-fit:cover;
object-position:center;
opacity:1;
pointer-events:none;
will-change:transform;
transition:transform .35s ease;
}
.c-lumiere::before{
content:"";
position:absolute;
z-index:2;
inset:0;
pointer-events:none;
background:
linear-gradient(
180deg,
transparent 50%,
rgba(1,5,9,.08) 62%,
rgba(1,5,9,.94) 100%
);
}
.c-lumiere::after{
content:"";
position:absolute;
z-index:3;
inset:0;
pointer-events:none;
background:
linear-gradient(
135deg,
rgba(244,183,95,.045),
transparent 42%,
rgba(62,214,255,.018)
);
}
.project-card-lumiere-copy{
position:absolute;
z-index:4;
left:4.6%;
right:18%;
bottom:4.5%;
color:#fff;
pointer-events:none;
}
.project-card-lumiere-title{
display:block;
font-size:clamp(10px,1.06vw,17px);
font-weight:400;
letter-spacing:.01em;
line-height:1.05;
}
.project-card-lumiere-sub{
display:block;
margin-top:4px;
color:#F4F8FF;
opacity:.72;
font-size:clamp(7px,.72vw,11px);
line-height:1.15;
}
.project-card-lumiere-arrow{
position:absolute;
z-index:4;
right:4%;
bottom:4%;
width:clamp(20px,2.1vw,32px);
aspect-ratio:1;
display:grid;
place-items:center;
border:1px solid rgba(244,248,255,.58);
border-radius:50%;
color:#fff;
font-size:clamp(9px,.85vw,13px);
line-height:1;
pointer-events:none;
}
.c-lumiere:hover .project-card-image{
transform:scale(1.015);
}

/* ОЖИВШАЯ ИДЕЯ / ВИДЕО */
.c-ai-video{
z-index:12;
overflow:hidden;
border:1px solid rgba(244,207,146,.22);
background:#130e0a;
line-height:1.1;
text-align:left;
}
.c-ai-video .project-card-image{
position:absolute;
z-index:1;
inset:0;
width:100%;
height:100%;
object-fit:cover;
object-position:center;
pointer-events:none;
will-change:transform;
transition:transform .42s ease,filter .42s ease;
}
.c-ai-video::before{
content:"";
position:absolute;
z-index:2;
inset:0;
background:
linear-gradient(180deg,transparent 42%,rgba(12,8,5,.18) 61%,rgba(5,4,3,.94) 100%),
linear-gradient(135deg,rgba(255,221,158,.11),transparent 44%);
pointer-events:none;
}
.project-card-ai-copy{
position:absolute;
z-index:4;
left:5%;
right:19%;
bottom:7%;
color:#fff;
pointer-events:none;
}
.project-card-ai-title{
display:block;
font-size:clamp(10px,1.06vw,17px);
font-weight:400;
line-height:1.05;
}
.project-card-ai-sub{
display:block;
margin-top:4px;
color:#F4F8FF;
opacity:.72;
font-size:clamp(7px,.72vw,11px);
line-height:1.15;
}
.project-card-ai-arrow{
position:absolute;
z-index:4;
right:5%;
bottom:6%;
width:clamp(20px,2.1vw,32px);
aspect-ratio:1;
display:grid;
place-items:center;
border:1px solid rgba(255,241,216,.58);
border-radius:50%;
color:#fff;
font-size:clamp(9px,.85vw,13px);
line-height:1;
pointer-events:none;
}
.c-ai-video:hover .project-card-image{
transform:scale(1.025);
filter:saturate(1.06) brightness(1.03);
}


/* СИБИРСКАЯ КОЛЛЕКЦИЯ */
.c-sibirskaya{
z-index:12;
overflow:hidden;
border:1px solid rgba(183,228,255,.20);
background:#090405;
line-height:1.1;
text-align:left;
}
.c-sibirskaya .project-card-image{
position:absolute;
z-index:1;
inset:0;
width:100%;
height:100%;
object-fit:cover;
object-position:center;
pointer-events:none;
will-change:transform;
transition:transform .4s ease,filter .4s ease;
}
.c-sibirskaya::before{
content:"";
position:absolute;
z-index:2;
inset:0;
background:
linear-gradient(180deg,transparent 47%,rgba(4,2,3,.18) 62%,rgba(2,1,2,.94) 100%);
pointer-events:none;
}
.project-card-sibirskaya-copy{
position:absolute;
z-index:4;
left:6%;
right:20%;
bottom:7%;
color:#F4F8FF;
pointer-events:none;
}
.project-card-sibirskaya-title{
display:block;
font-size:clamp(9px,.98vw,15px);
font-weight:500;
line-height:1.08;
}
.project-card-sibirskaya-sub{
display:block;
margin-top:4px;
color:#F4F8FF;
opacity:.72;
font-size:clamp(7px,.7vw,10px);
line-height:1.15;
}
.project-card-sibirskaya-arrow{
position:absolute;
z-index:4;
right:6%;
bottom:6%;
width:clamp(20px,2vw,31px);
aspect-ratio:1;
display:grid;
place-items:center;
border:1px solid rgba(244,248,255,.58);
border-radius:50%;
color:#F4F8FF;
font-size:clamp(9px,.85vw,13px);
line-height:1;
pointer-events:none;
}
.c-sibirskaya:hover .project-card-image{
transform:scale(1.025);
filter:saturate(1.04) brightness(1.03);
}


/* ЗАЛИПAI — ФИРМЕННЫЙ СТИЛЬ */
.c-zalip-brand{z-index:12;overflow:hidden;border:1px solid rgba(183,228,255,.20);background:#020A12;line-height:1.1;text-align:left;}
.c-zalip-brand .project-card-image{position:absolute;z-index:1;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none;will-change:transform;transition:transform .4s ease,filter .4s ease;}
.c-zalip-brand::before{content:"";position:absolute;z-index:2;inset:0;background:linear-gradient(180deg,transparent 46%,rgba(1,5,9,.15) 62%,rgba(1,5,9,.94) 100%);pointer-events:none;}
.project-card-zalip-copy{position:absolute;z-index:4;left:5%;right:18%;bottom:7%;color:#F4F8FF;pointer-events:none;}
.project-card-zalip-title{display:block;font-size:clamp(10px,1vw,16px);font-weight:500;line-height:1.05;}
.project-card-zalip-sub{display:block;margin-top:4px;color:#F4F8FF;opacity:.72;font-size:clamp(7px,.72vw,11px);line-height:1.15;}
.project-card-zalip-arrow{position:absolute;z-index:4;right:5%;bottom:6%;width:clamp(20px,2.1vw,32px);aspect-ratio:1;display:grid;place-items:center;border:1px solid rgba(244,248,255,.58);border-radius:50%;color:#F4F8FF;font-size:clamp(9px,.85vw,13px);line-height:1;pointer-events:none;}
.c-zalip-brand:hover .project-card-image{transform:scale(1.02);filter:brightness(1.04);}


/* ВРЕМЯ В ДВИЖЕНИИ */
.c-watch-video{
z-index:12;
overflow:hidden;
border:1px solid rgba(183,228,255,.20);
background:#050608;
line-height:1.1;
text-align:left;
}
.c-watch-video .project-card-image{
position:absolute;
z-index:1;
inset:0;
width:100%;
height:100%;
object-fit:cover;
object-position:center;
pointer-events:none;
will-change:transform;
transition:transform .4s ease,filter .4s ease;
}
.c-watch-video::before{
content:"";
position:absolute;
z-index:2;
inset:0;
background:linear-gradient(180deg,transparent 48%,rgba(2,3,5,.15) 63%,rgba(2,3,5,.94) 100%);
pointer-events:none;
}
.project-card-watch-copy{
position:absolute;
z-index:4;
left:6%;
right:18%;
bottom:6%;
color:#F4F8FF;
pointer-events:none;
}
.project-card-watch-title{
display:block;
font-size:clamp(9px,.92vw,14px);
font-weight:500;
line-height:1.08;
}
.project-card-watch-sub{
display:block;
margin-top:4px;
color:#F4F8FF;
opacity:.72;
font-size:clamp(7px,.66vw,10px);
line-height:1.15;
}
.project-card-watch-arrow{
position:absolute;
z-index:4;
right:6%;
bottom:5%;
width:clamp(20px,2vw,30px);
aspect-ratio:1;
display:grid;
place-items:center;
border:1px solid rgba(244,248,255,.58);
border-radius:50%;
color:#F4F8FF;
font-size:clamp(9px,.84vw,13px);
line-height:1;
pointer-events:none;
}
.c-watch-video:hover .project-card-image{
transform:scale(1.025);
filter:brightness(1.04);
}

.filtered-card.custom-image{
background:#020A12;
}
.filtered-card-real-image{
position:absolute;
z-index:1;
inset:0;
width:100%;
height:100%;
object-fit:cover;
object-position:center;
pointer-events:none;
}
.filtered-card.custom-image::after{
content:"";
position:absolute;
z-index:2;
inset:0;
background:
linear-gradient(
180deg,
transparent 58%,
rgba(1,5,9,.92)
);
pointer-events:none;
}
.filtered-card-label{
position:absolute;
z-index:3;
left:12px;
right:12px;
bottom:12px;
padding-top:30px;
color:#fff;
text-align:left;
font-size:12px;
line-height:1.15;
background:
linear-gradient(
180deg,
transparent,
rgba(1,5,9,.88)
);
pointer-events:none;
}
.filtered-card-label small{
display:block;
margin-top:3px;
color:rgba(244,248,255,.68);
font-size:9px;
}



/* PROCESS */
.process{
position:relative;
background:
radial-gradient(
circle at 58% 50%,
rgba(5,112,255,.075),
transparent 38%
),
linear-gradient(
90deg,
#020A12,
#04111D 52%,
#020A12
);
}
.process>img{
opacity:0;
}
.process-ui{
position:absolute;
inset:0;
z-index:10;
display:grid;
grid-template-columns:27% 73%;
}
.process-left{
min-width:0;
padding:9% 11% 7% 18%;
border-right:1px solid var(--line);
}
.process-left-title{
margin:0 0 10%;
font-size:clamp(18px,2vw,31px);
font-weight:300;
line-height:.95;
letter-spacing:-.04em;
}
.process-steps{
display:grid;
gap:clamp(1px,.25vw,5px);
}
.process-step{
width:100%;
min-width:0;
min-height:clamp(31px,3.8vw,52px);
display:grid;
grid-template-columns:
clamp(32px,3.8vw,48px)
minmax(0,1fr);
align-items:center;
gap:clamp(5px,.7vw,11px);
padding:0;
border:0;
outline:0;
background:transparent;
color:rgba(244,248,255,.47);
text-align:left;
cursor:pointer;
transition:color .18s ease;
}
.process-step:hover,
.process-step.active{
color:#fff;
}
.process-step-number{
width:clamp(30px,3.2vw,42px);
height:clamp(30px,3.2vw,42px);
display:grid;
place-items:center;
border:1px solid transparent;
border-radius:50%;
font-size:clamp(9px,1vw,13px);
transition:
border-color .18s ease,
background .18s ease,
transform .18s ease;
}
.process-step:hover .process-step-number{
transform:scale(1.05);
background:rgba(62,214,255,.035);
}
.process-step.active .process-step-number{
border-color:rgba(244,248,255,.78);
}
.process-step-name{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
font-size:clamp(8px,1vw,13px);
line-height:1.2;
}

.process-center{
position:relative;
min-width:0;
height:100%;
overflow:hidden;
display:flex;
align-items:stretch;
justify-content:stretch;
padding:4.5% 5%;
}
.process-center::before{
content:"";
position:absolute;
left:10%;
top:50%;
width:48%;
aspect-ratio:1;
border:1px solid rgba(62,214,255,.055);
border-radius:50%;
transform:translateY(-50%);
pointer-events:none;
}
.process-center::after{
content:"";
position:absolute;
left:55%;
top:0;
width:1px;
height:100%;
background:
linear-gradient(
180deg,
transparent,
rgba(183,228,255,.05),
transparent
);
pointer-events:none;
}

.process-visual{
position:relative;
z-index:2;
width:100%;
height:100%;
overflow:hidden;
border:1px solid rgba(183,228,255,.11);
border-radius:26px 8px 26px 8px;
background:
radial-gradient(
circle at 67% 48%,
rgba(5,112,255,.15),
transparent 24%
),
radial-gradient(
circle at 76% 53%,
rgba(62,214,255,.05),
transparent 18%
),
linear-gradient(
135deg,
rgba(7,23,38,.82),
rgba(2,10,18,.92)
);
box-shadow:
inset 0 0 80px rgba(5,112,255,.025);
}
.process-visual-bg{
position:absolute;
inset:0;
opacity:1;
transform:scale(1);
transition:
opacity .38s ease,
transform .65s cubic-bezier(.2,.8,.2,1);
}
.process-visual-bg::before{
content:"";
position:absolute;
left:58%;
top:50%;
width:clamp(180px,28vw,440px);
aspect-ratio:1;
border-radius:50%;
transform:translate(-50%,-50%);
background:
radial-gradient(
circle at 40% 35%,
rgba(244,248,255,.28),
transparent 7%
),
radial-gradient(
circle at 46% 42%,
rgba(62,214,255,.34),
rgba(5,112,255,.18) 28%,
rgba(10,40,94,.09) 48%,
transparent 70%
);
box-shadow:
inset -34px -25px 70px rgba(0,0,0,.42),
0 0 65px rgba(5,112,255,.11);
}
.process-visual-bg::after{
content:"";
position:absolute;
left:58%;
top:50%;
width:clamp(215px,34vw,540px);
aspect-ratio:1;
border-radius:50%;
transform:translate(-50%,-50%);
border:1px solid rgba(183,228,255,.08);
box-shadow:
0 0 0 40px rgba(183,228,255,.013),
0 0 0 100px rgba(183,228,255,.008);
}
.process-content{
position:absolute;
z-index:4;
left:clamp(24px,4vw,62px);
top:50%;
width:38%;
transform:translateY(-50%);
}
.process-kicker{
margin-bottom:clamp(10px,1.4vw,18px);
color:rgba(183,228,255,.4);
font-size:clamp(7px,.85vw,11px);
line-height:1.2;
text-transform:uppercase;
letter-spacing:.2em;
}
.process-main-title{
margin:0;
width:100%;
color:#fff;
font-size:clamp(28px,4.3vw,66px);
line-height:.93;
letter-spacing:-.055em;
font-weight:300;
transition:
opacity .2s ease,
transform .2s ease;
}
.process-main-subtitle{
margin-top:clamp(13px,2vw,26px);
max-width:90%;
color:rgba(244,248,255,.52);
font-family:"Manrope",Arial,Helvetica,sans-serif;
font-size:clamp(11px,1.5vw,21px);
font-style:italic;
line-height:1.3;
transition:
opacity .2s ease,
transform .2s ease;
}
.process-center.changing .process-main-title,
.process-center.changing .process-main-subtitle{
opacity:0;
transform:translateY(8px);
}
.process-visual-number{
position:absolute;
z-index:4;
right:clamp(22px,3vw,46px);
top:clamp(20px,3vw,42px);
color:rgba(183,228,255,.12);
font-size:clamp(38px,7vw,110px);
line-height:.8;
letter-spacing:-.07em;
font-weight:300;
pointer-events:none;
}
.process-visual-note{
position:absolute;
z-index:4;
right:clamp(22px,3vw,46px);
bottom:clamp(18px,2.7vw,38px);
color:rgba(183,228,255,.3);
font-size:clamp(7px,.72vw,10px);
line-height:1;
letter-spacing:.14em;
text-transform:uppercase;
pointer-events:none;
}

/* EXPERIMENT */
.experiment{
position:relative;
overflow:hidden;
isolation:isolate;
background:#020A12;
cursor:none;
touch-action:pan-y;
contain:paint;
}
.experiment-stack{
position:relative;
z-index:1;
width:100%;
line-height:0;
}
.experiment-image,
.experiment-state{
display:block;
width:100%;
height:auto;
user-select:none;
-webkit-user-drag:none;
pointer-events:none;
}
.experiment-image{
position:relative;
z-index:1;
}
.experiment-state{
position:absolute;
z-index:3;
inset:0;
width:100%;
height:100%;
object-fit:cover;
opacity:0;
visibility:hidden;
pointer-events:none;
transform:translateZ(0);
}
.experiment-state.active{
opacity:1;
visibility:visible;
}

.direction-hints{
position:absolute;
z-index:8;
inset:0;
pointer-events:none;
}
.direction-hint{
position:absolute;
color:rgba(183,228,255,.23);
font-size:clamp(7px,.7vw,10px);
transition:
color .16s ease,
transform .16s ease;
}
.direction-hint.left{
left:2.2%;
top:50%;
transform:translateY(-50%);
}
.direction-hint.right{
right:2.2%;
top:50%;
transform:translateY(-50%);
}
.direction-hint.up{
top:5%;
left:50%;
transform:translateX(-50%);
}
.direction-hint.down{
bottom:5%;
left:50%;
transform:translateX(-50%);
}
.direction-hint.active{
color:rgba(244,248,255,.75);
}
.direction-hint.left.active{
transform:
translateY(-50%)
translateX(-4px);
}
.direction-hint.right.active{
transform:
translateY(-50%)
translateX(4px);
}
.direction-hint.up.active{
transform:
translateX(-50%)
translateY(-4px);
}
.direction-hint.down.active{
transform:
translateX(-50%)
translateY(4px);
}

.experiment-ghostword{
position:absolute;
z-index:3;
left:35%;
top:50%;
transform:translateY(-50%);
color:#B7E4FF;
font-size:clamp(80px,13vw,210px);
font-weight:700;
line-height:.7;
letter-spacing:-.09em;
opacity:.035;
pointer-events:none;
user-select:none;
transition:
opacity .16s ease,
transform .16s ease;
}
.experiment-ghostword.pulse{
opacity:.075;
transform:
translateY(-50%)
scale(1.025);
}

.orb-reactor{
position:absolute;
z-index:4;
left:53%;
top:50%;
width:36%;
height:92%;
transform:translate(-50%,-50%);
pointer-events:none;
opacity:.42;
}
.reactor-ring{
position:absolute;
border:1px solid rgba(62,214,255,.075);
border-radius:50%;
transition:
transform .16s ease,
border-color .16s ease;
}
.reactor-ring.ring-a{
inset:12% 18%;
}
.reactor-ring.ring-b{
inset:24% 5%;
}
.reactor-ring.ring-c{
inset:4% 28%;
}
.reactor-line{
position:absolute;
height:1px;
background:rgba(183,228,255,.13);
}
.reactor-line.line-a{
left:13%;
top:27%;
width:20%;
transform:rotate(-13deg);
}
.reactor-line.line-b{
right:7%;
top:39%;
width:17%;
transform:rotate(8deg);
}
.reactor-line.line-c{
left:20%;
bottom:18%;
width:14%;
transform:rotate(12deg);
}
.reactor-line.line-d{
right:16%;
bottom:20%;
width:13%;
transform:rotate(-17deg);
}
.reactor-dot{
position:absolute;
width:3px;
height:3px;
border-radius:50%;
background:rgba(183,228,255,.32);
}
.reactor-dot.dot-a{
left:15%;
top:27%;
}
.reactor-dot.dot-b{
right:7%;
top:39%;
}
.reactor-dot.dot-c{
left:20%;
bottom:18%;
}
.reactor-dot.dot-d{
right:16%;
bottom:20%;
}
.orb-reactor.active .ring-a{
transform:scale(1.055);
border-color:rgba(62,214,255,.24);
}
.orb-reactor.active .ring-b{
transform:scale(.96);
}
.orb-reactor.active .ring-c{
transform:scale(1.075);
}

.experiment-title{
position:absolute;
z-index:12;
left:4.5%;
top:23%;
width:31%;
pointer-events:none;
}
.experiment-title h2{
margin:0;
color:#fff;
font-size:clamp(25px,4.2vw,68px);
font-weight:300;
line-height:.9;
letter-spacing:-.055em;
}
.experiment-title p{
margin:
clamp(9px,1.25vw,16px)
0
0;
color:rgba(244,248,255,.52);
font-family:"Manrope",Arial,Helvetica,sans-serif;
font-style:italic;
font-size:clamp(10px,1.45vw,20px);
line-height:1.1;
}
.experiment-copy{
position:absolute;
z-index:12;
right:5%;
top:23%;
width:21%;
color:rgba(244,248,255,.61);
font-size:clamp(8px,1vw,13px);
line-height:1.55;
pointer-events:none;
}

.effect-panel{
position:absolute;
z-index:12;
right:5%;
top:58%;
width:21%;
line-height:1;
pointer-events:none;
}
.effect-head{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:10px;
margin-bottom:clamp(5px,.6vw,8px);
}
.effect-label{
color:rgba(183,228,255,.42);
font-size:clamp(6px,.62vw,9px);
letter-spacing:.15em;
text-transform:uppercase;
}
.effect-value{
color:#F4F8FF;
font-size:clamp(11px,1.45vw,21px);
font-weight:300;
letter-spacing:-.04em;
font-variant-numeric:tabular-nums;
}
.effect-track{
position:relative;
width:100%;
height:2px;
overflow:hidden;
background:rgba(183,228,255,.1);
}
.effect-fill{
display:block;
width:100%;
height:100%;
transform-origin:left center;
transform:scaleX(0);
will-change:transform;
background:
linear-gradient(
90deg,
rgba(5,112,255,.55),
#3ED6FF,
#F4F8FF
);
}
.effect-meta{
margin-top:clamp(6px,.75vw,10px);
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
}
.effect-phrase{
color:rgba(244,248,255,.48);
font-family:"Manrope",Arial,Helvetica,sans-serif;
font-style:italic;
font-size:clamp(7px,.75vw,11px);
}
.interaction-counter{
color:rgba(183,228,255,.38);
font-size:clamp(6px,.6vw,9px);
letter-spacing:.11em;
white-space:nowrap;
}
.interaction-counter strong{
margin-left:4px;
color:rgba(244,248,255,.82);
font-weight:400;
}

/* PLASMA */
.plasma-pulse{
position:absolute;
z-index:58;
left:0;
top:0;
width:34px;
height:34px;
border-radius:50%;
pointer-events:none;
opacity:0;
transform:
translate3d(-50%,-50%,0)
scale(.35);
border:1px solid rgba(244,248,255,.72);
background:
radial-gradient(
circle,
rgba(244,248,255,.18) 0 5%,
rgba(62,214,255,.13) 12%,
rgba(5,112,255,.055) 38%,
transparent 66%
);
will-change:transform,opacity;
}
.plasma-anchor{
position:absolute;
z-index:64;
left:0;
top:0;
width:0;
height:0;
pointer-events:none;
opacity:0;
transform:translate3d(0,0,0);
will-change:transform,opacity;
transition:opacity .06s linear;
contain:layout style;
}
.plasma-anchor.visible{
opacity:1;
}
.plasma-cursor{
--wake:.58;
--energy:.45;
--orbit-a:0deg;
--orbit-b:0deg;
position:absolute;
left:-13px;
top:-9px;
width:78px;
height:98px;
pointer-events:none;
transform-origin:13px 9px;
transform:
rotate(var(--cursor-angle,0deg))
scale(
calc(
var(--cursor-scale,.96)
+
var(--pulse-scale,0)
)
);
will-change:transform;
contain:layout paint style;
}
.plasma-cursor::before{
content:"";
position:absolute;
left:-29px;
top:-29px;
width:84px;
height:84px;
border-radius:50%;
pointer-events:none;
background:
radial-gradient(
circle,
rgba(244,248,255,.34) 0 3%,
rgba(62,214,255,.20) 9%,
rgba(5,112,255,.095) 24%,
rgba(5,112,255,.035) 43%,
transparent 68%
);
opacity:
calc(
.55 + var(--energy) * .35
);
}
.plasma-cursor::after{
content:"";
position:absolute;
left:-5px;
top:-5px;
width:36px;
height:36px;
border-radius:50%;
pointer-events:none;
border:1px solid rgba(183,228,255,.28);
background:
radial-gradient(
circle,
rgba(244,248,255,.12),
transparent 58%
);
opacity:
calc(
.38 + var(--energy) * .42
);
}

.plasma-orbit{
position:absolute;
left:13px;
top:9px;
border-radius:50%;
pointer-events:none;
transform-origin:center;
will-change:transform;
}
.plasma-orbit.orbit-a{
width:52px;
height:52px;
margin:-26px 0 0 -26px;
border:1px solid transparent;
border-top-color:rgba(244,248,255,.68);
border-right-color:rgba(62,214,255,.38);
transform:
rotate(var(--orbit-a))
scale(
calc(
.94 + var(--energy) * .08
)
);
}
.plasma-orbit.orbit-b{
width:72px;
height:72px;
margin:-36px 0 0 -36px;
border:1px solid transparent;
border-left-color:rgba(5,112,255,.36);
border-bottom-color:rgba(183,228,255,.26);
transform:
rotate(var(--orbit-b))
scale(
calc(
.95 + var(--energy) * .07
)
);
}
.plasma-cursor-svg{
position:absolute;
inset:0;
width:100%;
height:100%;
overflow:visible;
}
.plasma-shell{
fill:rgba(2,10,18,.56);
stroke:url(#plasmaEdge);
stroke-width:4.2;
stroke-linejoin:round;
}
.plasma-shell-inner{
fill:none;
stroke:rgba(244,248,255,.98);
stroke-width:1.18;
stroke-linejoin:round;
opacity:.9;
}
.plasma-channel{
fill:none;
stroke:url(#plasmaCore);
stroke-width:2.9;
stroke-linecap:round;
opacity:.96;
}
.plasma-channel-soft{
fill:none;
stroke:rgba(62,214,255,.24);
stroke-width:6.2;
stroke-linecap:round;
opacity:.46;
}
.plasma-orb-svg{
fill:url(#orbFill);
stroke:rgba(244,248,255,.98);
stroke-width:1.25;
}
.plasma-orb-ring{
fill:none;
stroke:rgba(183,228,255,.62);
stroke-width:1;
opacity:.95;
}
.plasma-tip{
fill:#fff;
}
.plasma-fin{
position:absolute;
left:24px;
top:42px;
height:1px;
width:90px;
transform-origin:left center;
border-radius:999px;
pointer-events:none;
background:
linear-gradient(
90deg,
rgba(255,255,255,.98),
rgba(183,228,255,.84) 10%,
rgba(62,214,255,.68) 28%,
rgba(5,112,255,.28) 64%,
transparent 100%
);
will-change:transform,opacity;
}
.plasma-fin.fin-a{
height:2px;
transform:
rotate(29deg)
scaleX(var(--wake));
opacity:
calc(
.58 + var(--energy) * .42
);
}
.plasma-fin.fin-b{
width:76px;
transform:
rotate(43deg)
translateY(3px)
scaleX(
calc(
var(--wake) * .88
)
);
opacity:
calc(
.28 + var(--energy) * .44
);
}
.plasma-fin.fin-c{
width:60px;
transform:
rotate(14deg)
translateY(-3px)
scaleX(
calc(
var(--wake) * .74
)
);
opacity:
calc(
.18 + var(--energy) * .30
);
}
.plasma-satellite{
position:absolute;
border-radius:50%;
background:#F4F8FF;
pointer-events:none;
will-change:transform,opacity;
}
.plasma-satellite.s1{
left:43px;
top:51px;
width:4px;
height:4px;
opacity:
calc(
.55 + var(--energy) * .4
);
transform:
translate3d(
calc(var(--energy) * 5px),
calc(var(--energy) * -3px),
0
);
}
.plasma-satellite.s2{
left:34px;
top:38px;
width:3px;
height:3px;
opacity:
calc(
.35 + var(--energy) * .36
);
transform:
translate3d(
calc(var(--energy) * -4px),
calc(var(--energy) * 4px),
0
);
}
.plasma-satellite.s3{
left:51px;
top:64px;
width:2px;
height:2px;
opacity:
calc(
.24 + var(--energy) * .28
);
transform:
translate3d(
calc(var(--energy) * 3px),
calc(var(--energy) * 5px),
0
);
}
.plasma-cursor.pulse{
--pulse-scale:.055;
}

/* FINAL */
.final{
position:relative;
isolation:isolate;
background:#020A12;
contain:paint;
}
.final>img{
position:relative;
z-index:1;
}
.final-particle-field{
position:absolute;
z-index:6;
inset:0;
overflow:hidden;
pointer-events:none;
contain:paint;
}
.final-door-particle{
position:absolute;
left:0;
top:0;
width:3px;
height:3px;
margin:-1.5px 0 0 -1.5px;
border-radius:50%;
opacity:0;
background:rgba(244,248,255,.96);
box-shadow:
0 0 5px rgba(183,228,255,.72),
0 0 11px rgba(62,214,255,.24);
transform:translate3d(0,0,0);
will-change:transform,opacity;
}
.final-door-particle::after{
content:"";
position:absolute;
left:50%;
top:50%;
width:10px;
height:1px;
transform:
translate(-100%,-50%)
rotate(var(--trail-angle,0deg));
transform-origin:100% 50%;
background:
linear-gradient(
90deg,
transparent,
rgba(62,214,255,.10),
rgba(183,228,255,.48)
);
opacity:.72;
pointer-events:none;
}
.final-door-particle.small{
width:2px;
height:2px;
margin:-1px 0 0 -1px;
box-shadow:
0 0 4px rgba(183,228,255,.62),
0 0 8px rgba(62,214,255,.18);
}
.final-door-particle.bright{
width:4px;
height:4px;
margin:-2px 0 0 -2px;
box-shadow:
0 0 6px rgba(244,248,255,.78),
0 0 14px rgba(62,214,255,.28);
}

.final-talk{
left:72.7%;
top:41%;
width:13.2%;
height:19%;
}
.ft-telegram{
left:73.7%;
top:38%;
width:6.7%;
height:28%;
}
.ft-behance{
left:80.5%;
top:38%;
width:6.2%;
height:28%;
}
.ft-instagram{
left:86.7%;
top:38%;
width:7.3%;
height:28%;
}

/* NORMAL OVERLAYS */
.overlay{
position:fixed;
inset:0;
z-index:100;
background:rgba(0,5,10,.76);
backdrop-filter:blur(12px);
opacity:0;
visibility:hidden;
pointer-events:none;
transition:
opacity .3s ease,
visibility .3s ease;
}
.overlay.open{
opacity:1;
visibility:visible;
pointer-events:auto;
}
.close{
position:absolute;
z-index:120;
top:24px;
right:24px;
width:44px;
height:44px;
border:1px solid rgba(255,255,255,.32);
border-radius:50%;
background:rgba(5,17,29,.64);
color:#fff;
font-size:22px;
cursor:pointer;
}

.drawer{
position:absolute;
top:0;
right:0;
width:min(460px,100%);
height:100%;
padding:92px 34px 34px;
background:#06111B;
transform:translateX(100%);
transition:transform .32s ease;
}
.overlay.open .drawer{
transform:translateX(0);
}
.drawer h2{
margin:0 0 18px;
font-size:48px;
font-weight:300;
}
.drawer p{
color:#AAB5BE;
font-size:14px;
line-height:1.65;
}
.contact-link{
min-height:58px;
margin-top:10px;
padding:12px 17px;
display:flex;
align-items:center;
justify-content:space-between;
border:1px solid var(--line);
color:#fff;
text-decoration:none;
}

.modal{
position:absolute;
left:50%;
top:50%;
width:min(900px,calc(100% - 36px));
max-height:86vh;
overflow:auto;
background:#06111B;
border:1px solid var(--line);
transform:translate(-50%,-50%);
}
.modal-head{
padding:26px 28px 18px;
}
.modal-head small{
color:#7F919E;
}
.modal-head h2{
margin:8px 0 0;
font-size:clamp(30px,4vw,44px);
font-weight:300;
}
.modal-media{
min-height:360px;
padding:30px;
display:grid;
place-items:center;
color:#9CABB6;
text-align:center;
background:#020A12;
}
.modal-actions{
padding:18px 28px 28px;
display:flex;
gap:10px;
flex-wrap:wrap;
}
.modal-btn{
min-height:44px;
padding:10px 17px;
border:1px solid rgba(255,255,255,.45);
border-radius:999px;
background:transparent;
color:#fff;
cursor:pointer;
}

/* LUMIÈRE FULL CASE */
#projectOverlay{
background:rgba(1,5,9,.95);
backdrop-filter:none;
-webkit-backdrop-filter:none;
}
.project-generic[hidden],
.project-case-modal[hidden]{
display:none !important;
}
.project-case-modal{
position:absolute;
left:50%;
top:50%;
width:min(1220px,calc(100% - 38px));
height:min(92vh,900px);
transform:translate(-50%,-50%);
overflow-y:auto;
overscroll-behavior:contain;
background:#03090f;
border:1px solid rgba(183,228,255,.15);
box-shadow:0 30px 90px rgba(0,0,0,.42);
scrollbar-width:thin;
scrollbar-color:
rgba(183,228,255,.22)
transparent;
}
.project-case-modal::-webkit-scrollbar{
width:7px;
}
.project-case-modal::-webkit-scrollbar-thumb{
background:rgba(183,228,255,.2);
border-radius:999px;
}

.case-hero{
position:relative;
overflow:hidden;
background:#090806;
aspect-ratio:1672/941;
}
.case-hero img,
.case-image img{
width:100%;
height:100%;
object-fit:cover;
user-select:none;
-webkit-user-drag:none;
display:block;
opacity:1;
visibility:visible;
}
.lumiere-asset{
background:#020A12;
}
.lumiere-asset.asset-error{
opacity:1;
}
.ai-video-asset{
background:#130e0a;
}
.ai-video-asset.asset-error{
opacity:1;
}
.case-hero,
.case-image{
background-color:#020A12;
background-size:cover;
background-position:center;
background-repeat:no-repeat;
}

.case-hero{
box-shadow:
inset 0 0 0 1px rgba(62,214,255,.16),
inset 0 -34px 70px rgba(5,112,255,.08);
}
.case-hero::before{
content:"";
position:absolute;
z-index:3;
left:0;
right:0;
top:0;
height:2px;
background:linear-gradient(90deg,transparent,#0570FF,#3ED6FF,transparent);
opacity:.85;
pointer-events:none;
}

.case-hero::after{
content:"";
position:absolute;
inset:auto 0 0;
height:38%;
background:
linear-gradient(
180deg,
transparent,
rgba(3,9,15,.8)
);
pointer-events:none;
}

.case-headline{
display:grid;
grid-template-columns:
minmax(0,1.25fr)
minmax(230px,.75fr);
gap:clamp(26px,5vw,78px);
padding:clamp(30px,5vw,72px);
border-bottom:1px solid rgba(183,228,255,.1);
}
.case-kicker{
margin-bottom:14px;
color:rgba(183,228,255,.46);
font-size:11px;
letter-spacing:.15em;
text-transform:uppercase;
}
.case-title{
margin:0;
color:#F4F8FF;
font-size:clamp(40px,6vw,78px);
font-weight:300;
line-height:.82;
letter-spacing:-.065em;
}
.case-title span{
display:block;
margin-top:18px;
color:rgba(244,248,255,.42);
font-size:clamp(13px,1.45vw,20px);
line-height:1.1;
letter-spacing:.02em;
}
.case-intro-copy{
align-self:end;
margin:0;
color:rgba(244,248,255,.62);
font-size:clamp(13px,1.2vw,16px);
line-height:1.72;
}

.case-meta{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:1px;
background:rgba(183,228,255,.09);
border-bottom:1px solid rgba(183,228,255,.1);
}
.case-meta-item{
padding:18px clamp(16px,2.5vw,34px);
background:#03090f;
}
.case-meta-item small{
display:block;
margin-bottom:8px;
color:rgba(183,228,255,.34);
font-size:8px;
letter-spacing:.16em;
text-transform:uppercase;
}
.case-meta-item strong{
color:rgba(244,248,255,.82);
font-size:12px;
font-weight:400;
line-height:1.35;
}

.case-section{
padding:clamp(28px,4.5vw,64px);
}
.case-section-head{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:24px;
margin-bottom:clamp(18px,2.8vw,34px);
}
.case-section-head h3{
margin:0;
color:#F4F8FF;
font-size:clamp(24px,3vw,38px);
font-weight:300;
line-height:.95;
letter-spacing:-.045em;
}
.case-section-head p{
max-width:410px;
margin:0;
color:rgba(244,248,255,.46);
font-size:12px;
line-height:1.6;
}

.case-pair{
display:grid;
grid-template-columns:1fr 1fr;
gap:clamp(10px,1.4vw,18px);
}
.case-image{
position:relative;
overflow:hidden;
background:#090806;
border:1px solid rgba(183,228,255,.09);
line-height:0;
}
.case-image.landscape{
aspect-ratio:1672/941;
}
.case-image.square{
aspect-ratio:1;
}
.case-image.series{
aspect-ratio:1600/900;
}
.ai-video-case{
background:
radial-gradient(circle at 82% 8%,rgba(5,112,255,.08),transparent 30%),
#03090f;
}
.ai-video-case .case-meta{
background:rgba(62,214,255,.08);
}
.ai-video-case .case-meta-item{
background:#03090f;
}
.ai-video-case .case-divider{
background:linear-gradient(90deg,transparent,rgba(62,214,255,.18),transparent);
}
.ai-video-frame{
position:relative;
overflow:hidden;
aspect-ratio:16/9;
border:1px solid rgba(255,224,173,.14);
background:#020304;
box-shadow:0 22px 70px rgba(0,0,0,.28);
}
.ai-video-frame iframe{
position:absolute;
inset:0;
width:100%;
height:100%;
border:0;
display:block;
background:#020304;
}
.ai-video-play{
position:absolute;
z-index:4;
left:50%;
top:50%;
width:clamp(64px,8vw,104px);
aspect-ratio:1;
transform:translate(-50%,-50%);
display:grid;
place-items:center;
border:1px solid rgba(255,244,225,.7);
border-radius:50%;
background:rgba(5,6,7,.48);
color:#fff4e1;
font:inherit;
font-size:clamp(24px,3vw,40px);
line-height:1;
cursor:pointer;
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
box-shadow:0 12px 40px rgba(0,0,0,.32);
transition:opacity .22s ease,transform .22s ease,background .22s ease;
}
.ai-video-play span{
transform:translateX(4%);
}
.ai-video-play:hover{
background:rgba(18,15,11,.72);
transform:translate(-50%,-50%) scale(1.05);
}
.ai-video-frame.is-playing .ai-video-play{
opacity:0;
visibility:hidden;
pointer-events:none;
}
.ai-video-status{
position:absolute;
z-index:5;
left:50%;
bottom:56px;
transform:translateX(-50%);
max-width:calc(100% - 36px);
padding:9px 13px;
border:1px solid rgba(255,224,173,.22);
border-radius:999px;
background:rgba(3,4,5,.78);
color:rgba(255,244,225,.82);
font-size:11px;
line-height:1.35;
text-align:center;
pointer-events:none;
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
}
.ai-video-status[hidden]{
display:none;
}
.ai-video-note{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding:12px 2px 0;
color:rgba(255,244,225,.38);
font-size:9px;
line-height:1.3;
letter-spacing:.08em;
text-transform:uppercase;
}
.case-image-caption{
display:flex;
justify-content:space-between;
gap:20px;
padding:11px 2px 0;
color:rgba(244,248,255,.34);
font-size:9px;
line-height:1.3;
letter-spacing:.08em;
text-transform:uppercase;
}
.case-stack{
display:grid;
gap:clamp(22px,3.4vw,46px);
}
.case-divider{
height:1px;
margin:
0
clamp(28px,4.5vw,64px);
background:
linear-gradient(
90deg,
transparent,
rgba(183,228,255,.13),
transparent
);
}


/* CASE EXPLANATION / ZALIPAI */
.project-case-modal{
--case-text:#F4F8FF;
}

.project-case-modal .case-kicker,
.project-case-modal .case-title,
.project-case-modal .case-title span,
.project-case-modal .case-intro-copy,
.project-case-modal .case-section-head h3,
.project-case-modal .case-section-head p,
.project-case-modal .case-brief-label,
.project-case-modal .case-brief strong,
.project-case-modal .case-brief p,
.project-case-modal .case-benefit strong,
.project-case-modal .case-benefit p{
color:var(--case-text);
}

.project-case-modal .case-kicker,
.project-case-modal .case-title span,
.project-case-modal .case-intro-copy,
.project-case-modal .case-section-head p,
.project-case-modal .case-brief p,
.project-case-modal .case-benefit p{
opacity:.58;
}

.case-brief{
display:grid;
grid-template-columns:1fr 1fr;
gap:1px;
background:rgba(183,228,255,.09);
border-bottom:1px solid rgba(183,228,255,.10);
}

.case-brief-item{
min-width:0;
padding:clamp(20px,3vw,34px);
background:#03090f;
}

.case-brief-label{
display:block;
margin-bottom:10px;
font-size:9px;
font-weight:600;
letter-spacing:.12em;
text-transform:uppercase;
opacity:.62;
}

.case-brief strong{
display:block;
max-width:520px;
font-size:clamp(15px,1.4vw,19px);
font-weight:500;
line-height:1.35;
}

.case-brief p{
max-width:560px;
margin:9px 0 0;
font-size:12px;
line-height:1.6;
}

.case-benefit{
display:grid;
grid-template-columns:minmax(190px,.55fr) minmax(0,1.45fr);
gap:clamp(18px,3vw,42px);
align-items:start;
margin-top:clamp(20px,3vw,38px);
padding:clamp(22px,3vw,36px);
border-left:2px solid #0570FF;
background:rgba(5,112,255,.045);
}

.case-benefit strong{
font-size:clamp(18px,2vw,27px);
font-weight:500;
line-height:1.15;
letter-spacing:-.025em;
}

.case-benefit p{
margin:0;
font-size:12px;
line-height:1.68;
}

.case-image-no-caption{
margin:0;
}

@media(max-width:760px){
.case-brief{
grid-template-columns:1fr;
}
.case-benefit{
grid-template-columns:1fr;
}
}



.sibirskaya-case .case-source-frame{
max-width:860px;
margin:0 auto;
overflow:hidden;
border:1px solid rgba(183,228,255,.14);
background:#f4f4f4;
box-shadow:0 22px 70px rgba(0,0,0,.22);
}
.sibirskaya-case .case-source-frame img{
display:block;
width:100%;
height:auto;
}
.sibirskaya-case .case-image.sibirskaya-series{
aspect-ratio:1600/1328;
}
.sibirskaya-case .case-kicker,
.sibirskaya-case .case-title,
.sibirskaya-case .case-title span,
.sibirskaya-case .case-intro-copy,
.sibirskaya-case .case-section-head h3,
.sibirskaya-case .case-section-head p,
.sibirskaya-case .case-brief-label,
.sibirskaya-case .case-brief strong,
.sibirskaya-case .case-brief p,
.sibirskaya-case .case-benefit strong,
.sibirskaya-case .case-benefit p{
color:#F4F8FF;
}


.zalip-brand-case .case-image.brand-system{aspect-ratio:1600/1000;}
.zalip-brand-case .case-image.brand-application{aspect-ratio:1600/900;}
.zalip-brand-case .case-benefit{border-left-color:#3ED6FF;background:linear-gradient(90deg,rgba(5,112,255,.055),rgba(62,214,255,.025));}


.watch-video-case .case-image.watch-frames{
aspect-ratio:1600/900;
}
.watch-video-case .watch-video-player{
width:min(100%,320px);
margin:0 auto;
background:#020304;
border:1px solid rgba(183,228,255,.13);
box-shadow:0 24px 80px rgba(0,0,0,.34);
}

.watch-video-case .watch-video-player video{
display:block;
width:100%;
height:auto;
max-height:66vh;
object-fit:contain;
background:#020304;
}

.watch-video-case .case-benefit{
border-left-color:#3ED6FF;
background:linear-gradient(90deg,rgba(5,112,255,.05),rgba(62,214,255,.02));
}

/* CASE FOOTER */
.case-footer{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:30px;
padding:clamp(34px,5vw,72px);
background:
radial-gradient(
circle at 75% 25%,
rgba(5,112,255,.08),
transparent 34%
),
#02080e;
}
.case-footer h3{
max-width:650px;
margin:0;
color:#F4F8FF;
font-size:clamp(26px,3.8vw,48px);
font-weight:300;
line-height:.92;
letter-spacing:-.055em;
}
.case-footer .modal-btn{
flex:0 0 auto;
}

/* эффект заключительной фразы */
.case-footer-message{
position:relative;
max-width:760px;
padding-bottom:18px;
}
.case-footer-title{
position:relative;
margin:0;
opacity:.28;
transform:translate3d(0,10px,0);
transition:
opacity .72s cubic-bezier(.2,.8,.2,1),
transform .72s cubic-bezier(.2,.8,.2,1);
}
.case-footer-line{
position:relative;
display:block;
width:max-content;
max-width:100%;
}
.case-footer-line::after{
content:attr(data-text);
position:absolute;
inset:0;
color:transparent;
background:
linear-gradient(
104deg,
transparent 0%,
transparent 36%,
rgba(183,228,255,.18) 43%,
rgba(244,248,255,.98) 49%,
rgba(62,214,255,.72) 53%,
transparent 61%,
transparent 100%
);
background-size:260% 100%;
background-position:180% 0;
-webkit-background-clip:text;
background-clip:text;
pointer-events:none;
opacity:0;
}
.case-footer-highlight{
color:rgba(244,248,255,.66);
transition:
color .55s ease,
text-shadow .55s ease;
}
.case-footer-accent{
position:absolute;
left:0;
bottom:0;
width:min(68%,520px);
height:1px;
background:
linear-gradient(
90deg,
rgba(62,214,255,.08),
rgba(62,214,255,.76) 72%,
rgba(244,248,255,.92) 88%,
transparent 100%
);
transform:scaleX(0);
transform-origin:left center;
opacity:.85;
}
.case-footer-accent::after{
content:"";
position:absolute;
right:0;
top:50%;
width:7px;
height:7px;
border-radius:50%;
background:#F4F8FF;
box-shadow:
0 0 7px rgba(183,228,255,.8),
0 0 14px rgba(62,214,255,.36);
transform:
translate(50%,-50%)
scale(.2);
opacity:0;
}
.case-footer.is-visible .case-footer-title{
opacity:1;
transform:translate3d(0,0,0);
}
.case-footer.is-visible .case-footer-line::after{
animation:
caseFooterShineLoop
7.2s
cubic-bezier(.22,.68,.2,1)
.55s
infinite
both;
}
.case-footer.is-visible .case-footer-highlight{
animation:
caseFooterHighlightLoop
7.2s
ease-in-out
.55s
infinite
both;
}
.case-footer.is-visible .case-footer-accent{
animation:
caseFooterLineLoop
7.2s
cubic-bezier(.18,.72,.16,1)
.55s
infinite
both;
}
.case-footer.is-visible .case-footer-accent::after{
animation:
caseFooterDotLoop
7.2s
ease-in-out
.55s
infinite
both;
}

@keyframes caseFooterShineLoop{
0%,6%{
opacity:0;
background-position:180% 0;
}
12%{
opacity:.9;
}
52%{
opacity:1;
background-position:-80% 0;
}
60%,100%{
opacity:0;
background-position:-80% 0;
}
}
@keyframes caseFooterHighlightLoop{
0%,8%,62%,100%{
color:rgba(244,248,255,.78);
text-shadow:0 0 8px rgba(62,214,255,.025);
}
20%{
color:rgba(244,248,255,.92);
text-shadow:
0 0 10px rgba(183,228,255,.10),
0 0 20px rgba(62,214,255,.045);
}
38%{
color:#F4F8FF;
text-shadow:
0 0 18px rgba(183,228,255,.28),
0 0 34px rgba(62,214,255,.14);
}
52%{
color:rgba(244,248,255,.94);
text-shadow:
0 0 12px rgba(183,228,255,.11),
0 0 22px rgba(62,214,255,.05);
}
}
@keyframes caseFooterLineLoop{
0%,8%{
transform:scaleX(.18);
opacity:.28;
}
22%{
transform:scaleX(.58);
opacity:.58;
}
46%{
transform:scaleX(1);
opacity:.9;
}
62%,100%{
transform:scaleX(1);
opacity:.72;
}
}
@keyframes caseFooterDotLoop{
0%,18%,66%,100%{
opacity:.28;
transform:
translate(50%,-50%)
scale(.55);
}
34%{
opacity:1;
transform:
translate(50%,-50%)
scale(1.22);
}
48%{
opacity:.82;
transform:
translate(50%,-50%)
scale(.78);
}
}

@keyframes caseFooterLine{
0%{
transform:scaleX(0);
opacity:.15;
}
100%{
transform:scaleX(1);
opacity:.85;
}
}
@keyframes caseFooterDot{
0%{
opacity:0;
transform:
translate(50%,-50%)
scale(.2);
}
60%{
opacity:1;
transform:
translate(50%,-50%)
scale(1.35);
}
100%{
opacity:.8;
transform:
translate(50%,-50%)
scale(.7);
}
}

/* CTA */
.case-footer-cta{
position:relative;
isolation:isolate;
overflow:hidden;
transition:
border-color .25s ease,
box-shadow .25s ease,
transform .25s ease;
}
.case-footer-cta::before{
content:"";
position:absolute;
z-index:-1;
top:-80%;
left:-38%;
width:28%;
height:260%;
background:
linear-gradient(
90deg,
transparent,
rgba(183,228,255,.10),
rgba(244,248,255,.42),
rgba(62,214,255,.12),
transparent
);
transform:
translate3d(-220%,0,0)
rotate(16deg);
pointer-events:none;
}
.case-footer-cta:hover{
border-color:rgba(183,228,255,.72);
box-shadow:
0 0 0 1px rgba(62,214,255,.05),
0 0 24px rgba(62,214,255,.10);
transform:translate3d(0,-1px,0);
}
.case-footer-cta:hover::before{
animation:
caseFooterButtonSweep
.72s
cubic-bezier(.2,.7,.2,1)
1;
}
.case-footer-arrow{
display:inline-block;
margin-left:5px;
transition:transform .25s ease;
}
.case-footer-cta:hover .case-footer-arrow{
transform:translate3d(4px,-2px,0);
}
@keyframes caseFooterButtonSweep{
0%{
transform:
translate3d(-220%,0,0)
rotate(16deg);
}
100%{
transform:
translate3d(620%,0,0)
rotate(16deg);
}
}

/* ALL PROJECTS */
.allprojects-overlay{
background:rgba(9,24,40,.035);
backdrop-filter:none;
-webkit-backdrop-filter:none;
opacity:0;
visibility:hidden;
pointer-events:none;
transition:
opacity .28s ease,
visibility 0s linear .28s;
}
.allprojects-overlay.active{
opacity:1;
visibility:visible;
pointer-events:auto;
background:rgba(12,31,50,.08);
backdrop-filter:
blur(4px)
saturate(1.04)
brightness(1.09);
-webkit-backdrop-filter:
blur(4px)
saturate(1.04)
brightness(1.09);
transition:
opacity .28s ease,
visibility 0s;
}

.allprojects-stage{
position:absolute;
inset:0;
display:grid;
place-items:center;
padding:clamp(30px,5vw,70px);
perspective:2200px;
perspective-origin:50% 48%;
overflow:hidden;
}
.allprojects-stage::before{
content:"";
position:absolute;
left:50%;
top:50%;
width:min(1080px,89vw);
height:min(630px,72vh);
transform:
translate3d(-50%,-50%,0)
scale(.88);
opacity:0;
background:
radial-gradient(
ellipse at center,
rgba(5,112,255,.11) 0%,
rgba(62,214,255,.035) 34%,
rgba(5,112,255,.012) 53%,
transparent 74%
);
pointer-events:none;
will-change:transform,opacity;
transition:
opacity .7s ease,
transform 1.1s cubic-bezier(.18,.72,.16,1);
}
.allprojects-overlay.open .allprojects-stage::before{
opacity:1;
transform:
translate3d(-50%,-50%,0)
scale(1);
}

.book-shell{
position:relative;
width:min(1020px,88vw);
height:min(590px,70vh);
min-height:440px;
transform-style:preserve-3d;
opacity:0;
transform:
translate3d(0,18px,0)
scale(.94)
rotateX(4deg);
will-change:transform,opacity;
transition:
transform .72s cubic-bezier(.18,.76,.16,1),
opacity .32s ease;
}
.book-shell::before{
content:"";
position:absolute;
z-index:-1;
left:5%;
right:5%;
top:8%;
bottom:-4%;
border-radius:44px;
background:rgba(0,0,0,.22);
box-shadow:0 24px 62px rgba(0,0,0,.25);
opacity:0;
transform:
translate3d(0,12px,-1px)
scale(.92);
transition:
opacity .75s ease,
transform 1.1s cubic-bezier(.18,.72,.16,1);
pointer-events:none;
}
.allprojects-overlay.open .book-shell{
opacity:1;
transform:
translate3d(0,0,0)
scale(1)
rotateX(0deg);
}
.allprojects-overlay.open .book-shell::before{
opacity:1;
transform:
translate3d(0,0,-1px)
scale(1);
}

.book-edge{
position:absolute;
z-index:26;
left:50%;
top:9%;
width:22px;
height:82%;
transform:
translate3d(-50%,0,10px)
scaleY(.72)
scaleX(.72);
opacity:0;
border-radius:999px;
background:
linear-gradient(
90deg,
rgba(3,12,21,.98),
rgba(38,113,151,.58) 48%,
rgba(3,12,21,.98)
);
border:1px solid rgba(183,228,255,.18);
box-shadow:
0 0 22px rgba(62,214,255,.10),
0 18px 42px rgba(0,0,0,.26);
pointer-events:none;
will-change:opacity,transform;
transition:
opacity .28s ease,
transform .72s cubic-bezier(.18,.76,.16,1);
}
.allprojects-overlay.active .book-edge{
opacity:1;
transform:
translate3d(-50%,0,10px)
scaleY(1)
scaleX(1);
}
.allprojects-overlay.open .book-edge{
opacity:0;
transform:
translate3d(-50%,0,10px)
scaleY(1)
scaleX(.22);
transition:
opacity .35s ease .44s,
transform .9s cubic-bezier(.18,.72,.16,1) .18s;
}

.book-spine{
position:absolute;
z-index:22;
left:50%;
top:6%;
width:4px;
height:88%;
opacity:0;
transform:
translate3d(-50%,0,6px)
scaleY(.25);
transform-origin:center;
border-radius:999px;
background:
linear-gradient(
180deg,
transparent,
rgba(183,228,255,.18) 12%,
rgba(62,214,255,.13) 50%,
rgba(183,228,255,.15) 88%,
transparent
);
box-shadow:
0 0 15px rgba(62,214,255,.08);
pointer-events:none;
will-change:opacity,transform;
transition:
opacity .35s ease,
transform .65s cubic-bezier(.18,.76,.16,1);
}
.allprojects-overlay.open .book-spine{
opacity:1;
transform:
translate3d(-50%,0,6px)
scaleY(1);
}

.book-page{
position:absolute;
top:0;
width:50%;
height:100%;
overflow:hidden;
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
transform-style:preserve-3d;
background:
radial-gradient(
circle at 50% 18%,
rgba(10,40,94,.18),
transparent 58%
),
linear-gradient(
145deg,
rgba(7,23,38,.985),
rgba(2,10,18,.965)
);
border:1px solid rgba(183,228,255,.13);
opacity:0;
will-change:transform,opacity;
contain:paint;
transition:
transform 1.72s cubic-bezier(.16,.72,.14,1),
opacity .18s ease;
}
.book-page.left{
left:0;
transform-origin:right center;
transform:
translate3d(0,0,2px)
rotateY(89deg);
border-radius:
38px
5px
16px
30px;
box-shadow:
inset -44px 0 54px rgba(0,0,0,.42);
}
.book-page.right{
right:0;
transform-origin:left center;
transform:
translate3d(0,0,2px)
rotateY(-89deg);
border-radius:
5px
38px
30px
16px;
box-shadow:
inset 44px 0 54px rgba(0,0,0,.42);
}
.allprojects-overlay.active .book-page{
opacity:1;
}
.allprojects-overlay.open .book-page.left{
transform:
translate3d(0,0,0)
rotateY(0deg);
}
.allprojects-overlay.open .book-page.right{
transform:
translate3d(0,0,0)
rotateY(0deg);
}

.book-page.left::after,
.book-page.right::before{
content:"";
position:absolute;
z-index:8;
top:0;
width:58px;
height:100%;
pointer-events:none;
opacity:.38;
}
.book-page.left::after{
right:0;
background:
linear-gradient(
90deg,
transparent,
rgba(0,0,0,.30)
);
}
.book-page.right::before{
left:0;
background:
linear-gradient(
90deg,
rgba(0,0,0,.29),
transparent
);
}

.book-page.left .book-intro::before,
.book-page.right .book-project-list::after{
content:"";
position:absolute;
top:8%;
bottom:8%;
width:1px;
background:
linear-gradient(
180deg,
transparent,
rgba(183,228,255,.16) 16%,
rgba(62,214,255,.06) 50%,
rgba(183,228,255,.12) 84%,
transparent
);
pointer-events:none;
}
.book-page.left .book-intro::before{
left:8px;
}
.book-page.right .book-project-list::after{
right:8px;
}

.book-intro,

.book-project-list{
opacity:0;
transform:translate3d(0,10px,0);
pointer-events:none;
transition:
opacity .45s ease,
transform .55s cubic-bezier(.2,.8,.2,1);
}
.allprojects-overlay.content-ready .book-intro,
.allprojects-overlay.content-ready .book-project-list{
opacity:1;
transform:translate3d(0,0,0);
pointer-events:auto;
}

.book-intro{
position:relative;
z-index:4;
height:100%;
padding:clamp(34px,4vw,58px);
display:flex;
flex-direction:column;
justify-content:space-between;
line-height:1.2;
}
.book-index{
color:rgba(183,228,255,.4);
font-size:10px;
letter-spacing:.2em;
text-transform:uppercase;
}
.book-title{
margin:8% 0 0;
max-width:430px;
font-size:clamp(42px,5vw,76px);
line-height:.88;
letter-spacing:-.065em;
font-weight:300;
}
.book-script{
margin-top:clamp(16px,2vw,26px);
max-width:310px;
color:rgba(244,248,255,.48);
font-family:"Manrope",Arial,Helvetica,sans-serif;
font-style:italic;
font-size:clamp(13px,1.5vw,19px);
line-height:1.25;
}
.book-bottom{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:20px;
}
.book-description{
max-width:290px;
margin:0;
color:rgba(244,248,255,.47);
font-size:12px;
line-height:1.65;
}

.book-project-list{
position:relative;
z-index:4;
height:100%;
padding:
clamp(24px,3vw,42px)
clamp(30px,3.5vw,50px)
clamp(24px,3vw,42px)
clamp(34px,4vw,56px);
display:grid;
grid-template-columns:1fr 1fr;
grid-template-rows:repeat(3,1fr);
gap:clamp(10px,1.2vw,16px);
}
.book-project{
position:relative;
overflow:hidden;
min-width:0;
padding:clamp(16px,1.7vw,24px);
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:space-between;
border:1px solid rgba(183,228,255,.11);
border-radius:
22px
7px
22px
8px;
background:
linear-gradient(
145deg,
rgba(244,248,255,.032),
rgba(5,112,255,.025)
);
color:#fff;
text-align:left;
cursor:pointer;
opacity:0;
transform:translate3d(0,7px,0);
transition:
opacity .32s ease,
transform .32s ease,
border-color .25s ease,
background .25s ease,
box-shadow .25s ease;
}
.allprojects-overlay.content-ready .book-project{
opacity:1;
transform:translate3d(0,0,0);
}
.allprojects-overlay.content-ready .book-project:nth-child(1){
transition-delay:0s;
}
.allprojects-overlay.content-ready .book-project:nth-child(2){
transition-delay:.035s;
}
.allprojects-overlay.content-ready .book-project:nth-child(3){
transition-delay:.07s;
}
.allprojects-overlay.content-ready .book-project:nth-child(4){
transition-delay:.105s;
}
.allprojects-overlay.content-ready .book-project:nth-child(5){
transition-delay:.14s;
}
.allprojects-overlay.content-ready .book-project:nth-child(6){
transition-delay:.175s;
}
.book-project:hover{
transform:translate3d(0,-4px,0);
border-color:rgba(62,214,255,.35);
background:
linear-gradient(
145deg,
rgba(62,214,255,.055),
rgba(5,112,255,.07)
);
box-shadow:
0 14px 35px rgba(0,0,0,.18),
inset 0 0 30px rgba(62,214,255,.025);
}
.book-project-number{
color:rgba(183,228,255,.34);
font-size:9px;
letter-spacing:.17em;
}
.book-project-name{
font-size:clamp(15px,1.7vw,24px);
line-height:1;
letter-spacing:-.04em;
font-weight:300;
}
.book-project-bottom{
width:100%;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
color:rgba(244,248,255,.37);
font-size:9px;
letter-spacing:.08em;
text-transform:uppercase;
}
.book-project-arrow{
width:28px;
height:28px;
display:grid;
place-items:center;
border:1px solid rgba(183,228,255,.15);
border-radius:50%;
color:rgba(244,248,255,.72);
transition:
transform .2s ease,
background .2s ease;
}
.book-project:hover .book-project-arrow{
transform:
translate3d(3px,0,0)
rotate(-8deg);
background:rgba(62,214,255,.06);
}



/* ВСЕ ПРОЕКТЫ — ВИЗУАЛЬНЫЕ КАРТОЧКИ */
.book-project{
padding:0;
display:block;
isolation:isolate;
background:#02070d;
border-color:rgba(183,228,255,.15);
}

.book-project::before{
content:"";
position:absolute;
z-index:2;
inset:0;
background:
linear-gradient(
180deg,
rgba(1,5,9,.04) 0%,
rgba(1,5,9,.04) 36%,
rgba(1,5,9,.60) 66%,
rgba(1,5,9,.97) 100%
);
pointer-events:none;
}

.book-project::after{
content:"";
position:absolute;
z-index:2;
left:0;
right:0;
bottom:0;
height:1px;
background:
linear-gradient(
90deg,
transparent,
rgba(62,214,255,.34),
transparent
);
opacity:.32;
pointer-events:none;
}

.book-project-media{
position:absolute;
z-index:1;
inset:0;
overflow:hidden;
background:#050a10;
}

.book-project-media img{
display:block;
width:100%;
height:100%;
object-fit:cover;
object-position:center;
filter:saturate(.94) brightness(.82);
transform:scale(1.002);
transition:
transform .45s cubic-bezier(.2,.8,.2,1),
filter .35s ease;
}

.book-project:hover .book-project-media img{
transform:scale(1.055);
filter:saturate(1.02) brightness(.94);
}

.book-project-number{
position:absolute;
z-index:4;
top:11px;
left:12px;
padding:4px 6px;
border:1px solid rgba(244,248,255,.14);
border-radius:999px;
background:rgba(2,8,13,.56);
backdrop-filter:blur(7px);
-webkit-backdrop-filter:blur(7px);
color:rgba(244,248,255,.63);
font-size:8px;
letter-spacing:.14em;
}

.book-project-video-badge{
position:absolute;
z-index:4;
top:10px;
right:11px;
width:25px;
height:25px;
display:grid;
place-items:center;
padding-left:1px;
border:1px solid rgba(244,248,255,.22);
border-radius:50%;
background:rgba(2,8,13,.60);
backdrop-filter:blur(7px);
-webkit-backdrop-filter:blur(7px);
color:#F4F8FF;
font-size:8px;
line-height:1;
box-shadow:0 0 22px rgba(62,214,255,.05);
}

.book-project-info{
position:absolute;
z-index:4;
left:0;
right:0;
bottom:0;
padding:
10px
clamp(11px,1.2vw,16px)
11px;
display:flex;
flex-direction:column;
gap:8px;
}

.book-project-name{
max-width:94%;
color:#F4F8FF;
font-size:clamp(12px,1.25vw,18px);
line-height:1.02;
letter-spacing:-.035em;
font-weight:500;
text-shadow:0 2px 12px rgba(0,0,0,.42);
}

.book-project-bottom{
width:100%;
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
color:rgba(244,248,255,.56);
font-size:7px;
letter-spacing:.065em;
text-transform:uppercase;
}

.book-project-arrow{
flex:0 0 auto;
width:24px;
height:24px;
background:rgba(3,10,16,.48);
border-color:rgba(244,248,255,.20);
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
}

.book-project:hover .book-project-arrow{
background:rgba(5,112,255,.18);
border-color:rgba(62,214,255,.42);
}

.book-project--lumiere .book-project-media img{
object-position:center 48%;
}

.book-project--sibirskaya .book-project-media img{
object-position:center 52%;
}

.book-project--idea .book-project-media img{
object-position:center 44%;
}

.book-project--watch .book-project-media img{
object-position:center 40%;
}

.book-project--zalip .book-project-media img{
object-position:center 50%;
}

.book-project-media--fashion{
background-image:url("/assets/projects.jpg");
background-repeat:no-repeat;
background-size:518.744% 263.88%;
background-position:38.06% 92.27%;
filter:saturate(.92) brightness(.78);
transition:
filter .35s ease,
transform .45s cubic-bezier(.2,.8,.2,1);
}

.book-project--fashion:hover .book-project-media--fashion{
filter:saturate(1) brightness(.91);
transform:scale(1.03);
}

.book-project:hover{
transform:translate3d(0,-4px,0);
border-color:rgba(62,214,255,.40);
background:#02070d;
box-shadow:
0 15px 40px rgba(0,0,0,.26),
0 0 28px rgba(62,214,255,.07);
}

@media(max-width:700px){
.book-project-list{
gap:7px;
}

.book-project{
padding:0;
display:grid;
grid-template-columns:34% 66%;
min-height:0;
border-radius:
13px
5px
13px
5px;
}

.book-project::before{
background:
linear-gradient(
90deg,
rgba(1,5,9,.04) 0%,
rgba(1,5,9,.12) 29%,
rgba(1,5,9,.86) 57%,
rgba(1,5,9,.98) 100%
);
}

.book-project-media{
right:auto;
width:42%;
}

.book-project-info{
left:36%;
top:0;
bottom:0;
padding:8px 10px;
justify-content:center;
gap:5px;
}

.book-project-name{
font-size:11px;
line-height:1.03;
}

.book-project-bottom{
font-size:6px;
}

.book-project-number{
display:none;
}

.book-project-video-badge{
top:7px;
right:7px;
width:20px;
height:20px;
font-size:6px;
}

.book-project-arrow{
width:19px;
height:19px;
font-size:9px;
}

.book-project-media--fashion{
width:42%;
}
}




/* CLEAN ALL PROJECTS SPREAD + NORMAL TEXT RENDERING */

/* Normal font rasterization: no stroke, no geometric precision tricks. */
html,
body{
text-rendering:auto;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
font-kerning:normal;
}

body,
button,
a,
input,
textarea,
select{
font-family:"Manrope",Arial,Helvetica,sans-serif;
}

/* ---------- LEFT PAGE ---------- */
.book-page.left{
overflow:hidden !important;
overscroll-behavior:none;
scrollbar-width:none;
}

.book-page.left::-webkit-scrollbar{
display:none;
}

.book-intro.book-intro--break{
height:100%;
min-height:0;
padding:
clamp(38px,4.3vw,62px)
clamp(36px,4.1vw,58px)
clamp(34px,3.8vw,54px);
display:grid;
grid-template-rows:auto minmax(0,1fr);
gap:clamp(18px,2.2vw,30px);
}

.book-intro--break .book-intro-head{
align-self:start;
}

.book-intro--break .book-title{
margin:0;
max-width:430px;
font-size:clamp(40px,4.7vw,68px);
line-height:.9;
letter-spacing:-.055em;
font-weight:400;
color:#F4F8FF;
}

/* No card inside a card. */
.book-page.left .easter-rest{
position:relative;
align-self:stretch;
width:100%;
max-width:none;
min-height:0;
margin:0;
padding:0;
overflow:visible;
border:0;
border-radius:0;
background:none;
box-shadow:none;
display:grid;
grid-template-rows:24px 16px minmax(0,1fr);
gap:3px;
}

.book-page.left .easter-rest-title{
margin:0;
align-self:end;
text-align:center;
color:rgba(244,248,255,.78);
font-size:12px;
font-weight:500;
line-height:1.2;
}

.book-page.left .easter-rest-title:empty{
visibility:hidden;
}

.book-page.left .easter-rest-copy{
min-height:16px;
margin:0;
text-align:center;
color:rgba(244,248,255,.54);
font-size:10px;
line-height:1.2;
}

.book-page.left .runaway-area{
position:relative;
height:100%;
min-height:220px;
overflow:hidden;
border:0;
border-radius:0;
background:
radial-gradient(
circle at 50% 50%,
rgba(5,112,255,.075),
transparent 34%
);
}

.book-page.left .easter-trigger{
position:absolute;
left:50%;
top:50%;
z-index:4;
min-width:158px;
min-height:50px;
padding:0 23px;
border:1px solid rgba(62,214,255,.42);
border-radius:999px;
background:rgba(5,112,255,.13);
color:#F4F8FF;
font-family:"Manrope",Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:500;
letter-spacing:.02em;
cursor:pointer;
transform:translate(-50%,-50%);
box-shadow:0 0 28px rgba(62,214,255,.07);
transition:
left .16s ease,
top .16s ease,
transform .15s ease,
background .2s ease,
border-color .2s ease;
}

.book-page.left .easter-trigger:hover{
background:rgba(5,112,255,.22);
border-color:rgba(62,214,255,.62);
}

.book-page.left .easter-trigger.is-caught{
left:50% !important;
top:50% !important;
transform:translate(-50%,-50%) !important;
min-width:166px;
pointer-events:auto;
}

.book-page.left .easter-trigger.is-caught:hover{
transform:translate(-50%,-50%) scale(1.03) !important;
}

/* ---------- RIGHT PAGE ---------- */
.book-projects-heading{
position:absolute;
z-index:9;
top:clamp(25px,3vw,42px);
left:clamp(34px,4vw,56px);
color:#F4F8FF;
font-size:clamp(15px,1.55vw,20px);
font-weight:500;
letter-spacing:.02em;
text-transform:none;
pointer-events:none;
}

/* Give the heading breathing room, then just the cards. */
.book-page.right .book-project-list{
padding-top:clamp(66px,7vw,88px);
}

/* No numeric badges at all. */
.book-project-number{
display:none !important;
}

/* Remove decorative arrows that were adding noise. */
.book-project-arrow{
display:none !important;
}

/* Card copy: only project + type, readable and clean. */
.book-project-name{
font-weight:500;
color:#F4F8FF;
}

.book-project-bottom{
color:rgba(244,248,255,.76);
font-weight:400;
}

/* ---------- IMPORTANT: CRISP BOOK TEXT AFTER OPEN ---------- */
/*
   During the page-turn animation Chrome rasterizes 3D layers.
   Once the book has opened, release those layers so text is drawn
   normally again instead of remaining on a GPU texture.
*/
.allprojects-overlay.open .book-shell{
transform:none;
will-change:auto;
transform-style:flat;
}

.allprojects-overlay.open .book-page.left,
.allprojects-overlay.open .book-page.right{
transform:none;
will-change:auto;
transform-style:flat;
contain:none;
}

.allprojects-overlay.content-ready .book-intro,
.allprojects-overlay.content-ready .book-project-list{
transform:none;
will-change:auto;
}

/* No background blur on the active all-projects layer. */
.allprojects-overlay.active{
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
}

/* Small copy should stay readable, not microscopic. */
.book-project-bottom{
font-size:max(11px,clamp(11px,1vw,13px));
}

@media(max-width:700px){

.book-intro.book-intro--break{
padding:18px 13px 16px;
gap:9px;
}

.book-intro--break .book-title{
font-size:clamp(24px,6.6vw,32px);
}

.book-page.left .easter-rest{
grid-template-rows:18px 12px minmax(0,1fr);
gap:2px;
}

.book-page.left .easter-rest-title{
font-size:9px;
}

.book-page.left .easter-rest-copy{
font-size:8px;
}

.book-page.left .runaway-area{
min-height:126px;
}

.book-page.left .easter-trigger{
min-width:120px;
min-height:38px;
padding:0 14px;
font-size:9px;
}

.book-projects-heading{
top:16px;
left:22px;
font-size:12px;
}

.book-page.right .book-project-list{
padding-top:45px;
}

.book-project-bottom{
font-size:9px;
}

}


.easter-glitch-line{
position:absolute;
z-index:2;
left:10%;
right:10%;
top:52%;
height:1px;
opacity:0;
background:
linear-gradient(
90deg,
transparent,
rgba(62,214,255,.86),
rgba(244,248,255,.72),
transparent
);
pointer-events:none;
}

.book-page.left.easter-glitch{
animation:easterPageJolt .11s steps(2,end) 5;
}

.book-page.left.easter-glitch .easter-rest-title,
.book-page.left.easter-glitch .easter-rest-copy{
animation:easterTextJolt .09s steps(2,end) 6;
}

.book-page.left.easter-glitch .easter-glitch-line{
opacity:1;
animation:easterScan .48s linear;
}

@keyframes easterPageJolt{
0%,100%{transform:translate(0,0)}
25%{transform:translate(-2px,1px)}
50%{transform:translate(2px,-1px)}
75%{transform:translate(-1px,-1px)}
}

@keyframes easterTextJolt{
0%,100%{transform:none}
50%{transform:translateX(3px)}
}

@keyframes easterScan{
0%{top:18%}
100%{top:84%}
}


/* ---------- GAME WINDOW ---------- */
.zalip-zone{
position:absolute;
z-index:120;
left:50%;
top:50%;
width:min(72%,680px);
height:min(72%,540px);
transform:translate(-50%,-50%);
display:none;
grid-template-rows:auto minmax(0,1fr);
gap:10px;
padding:clamp(14px,1.7vw,21px);
overflow:hidden;
border:1px solid rgba(183,228,255,.14);
border-radius:26px 9px 26px 9px;
background:
radial-gradient(
circle at 18% 14%,
rgba(5,112,255,.12),
transparent 31%
),
radial-gradient(
circle at 82% 72%,
rgba(62,214,255,.055),
transparent 33%
),
linear-gradient(
145deg,
rgba(3,12,22,.985),
rgba(1,6,12,.995)
);
box-shadow:
0 32px 100px rgba(0,0,0,.42),
inset 0 0 80px rgba(62,214,255,.025);
}

.zalip-zone.is-open{
display:grid;
animation:zalipZoneIn .24s ease both;
}

@keyframes zalipZoneIn{
from{opacity:0;transform:translate(-50%,-50%) scale(.988)}
to{opacity:1;transform:translate(-50%,-50%) scale(1)}
}

.zalip-zone-head{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}

.zalip-zone-kicker{
color:rgba(62,214,255,.58);
font-size:9px;
letter-spacing:.16em;
text-transform:uppercase;
}

.zalip-zone-actions{
display:flex;
align-items:center;
gap:6px;
}

.zalip-zone-back,
.zalip-zone-close{
min-height:40px;
padding:0 15px;
border:1px solid rgba(183,228,255,.13);
border-radius:999px;
background:rgba(244,248,255,.025);
color:rgba(244,248,255,.72);
font-family:"Manrope",Arial,Helvetica,sans-serif;
font-size:10px;
cursor:pointer;
}

.zalip-zone-close{
min-width:40px;
padding:0;
font-size:18px;
}

.zalip-zone-back:hover,
.zalip-zone-close:hover{
border-color:rgba(62,214,255,.34);
color:#F4F8FF;
}

.color-game{
position:relative;
z-index:2;
min-height:0;
display:grid;
grid-template-rows:auto minmax(210px,1fr) auto;
gap:9px;
}

.color-game-top{
position:relative;
min-height:58px;
display:grid;
grid-template-columns:72px minmax(0,1fr) 72px;
align-items:start;
gap:8px;
}

.color-game-task{
min-width:0;
text-align:center;
}

.color-game-command{
color:#F4F8FF;
font-size:clamp(18px,2vw,25px);
line-height:1.08;
font-weight:500;
letter-spacing:-.035em;
white-space:normal;
}

.color-game-level{
margin-top:5px;
color:rgba(244,248,255,.34);
font-size:8px;
letter-spacing:.11em;
font-variant-numeric:tabular-nums;
}

.run-stat{
padding-top:2px;
}

.run-stat--right{
text-align:right;
}

.run-stat span{
display:block;
color:rgba(244,248,255,.28);
font-size:6px;
letter-spacing:.13em;
}

.run-stat strong{
display:block;
margin-top:3px;
color:#F4F8FF;
font-size:14px;
font-weight:500;
font-variant-numeric:tabular-nums;
}

.color-game-field{
position:relative;
min-height:210px;
overflow:hidden;
border:1px solid rgba(183,228,255,.10);
border-radius:20px 6px 20px 6px;
background:
radial-gradient(
circle at 45% 46%,
rgba(5,112,255,.055),
transparent 50%
),
rgba(1,7,13,.88);
}

.game-shape{
position:absolute;
display:block;
border:0;
padding:0;
cursor:pointer;
transition:
left .20s ease,
top .20s ease,
opacity .14s ease,
filter .14s ease,
transform .12s ease;
animation:shapeFloat var(--float-speed,3s) ease-in-out infinite alternate;
touch-action:manipulation;
}

.game-shape:hover{
filter:brightness(1.10);
}

.game-shape.circle{
border-radius:50%;
}

.game-shape.square{
border-radius:5px;
}

.game-shape.diamond{
transform:rotate(45deg);
border-radius:4px;
}

.game-shape.triangle{
width:0 !important;
height:0 !important;
background:transparent !important;
border-left:calc(var(--shape-size) / 2) solid transparent;
border-right:calc(var(--shape-size) / 2) solid transparent;
border-bottom:var(--shape-size) solid var(--shape-color);
}

.game-shape.ring{
border-radius:50%;
background:transparent !important;
border:4px solid var(--shape-color);
}

.game-shape.white{
--shape-color:#F4F8FF;
background:#F4F8FF;
box-shadow:0 0 17px rgba(244,248,255,.13);
}

.game-shape.blue{
--shape-color:#0570FF;
background:#0570FF;
box-shadow:0 0 21px rgba(5,112,255,.23);
}

.game-shape.cyan{
--shape-color:#3ED6FF;
background:#3ED6FF;
box-shadow:0 0 20px rgba(62,214,255,.22);
}

.game-shape.purple{
--shape-color:#9B7CFF;
background:#9B7CFF;
box-shadow:0 0 20px rgba(155,124,255,.18);
}

.game-shape.pink{
--shape-color:#FF7CCB;
background:#FF7CCB;
box-shadow:0 0 20px rgba(255,124,203,.16);
}

.game-shape.green{
--shape-color:#6FE7B7;
background:#6FE7B7;
box-shadow:0 0 20px rgba(111,231,183,.16);
}

.game-shape.is-dodging{
filter:brightness(1.20);
}

.game-shape.is-wrong{
animation:wrongTap .17s ease 2;
}

@keyframes wrongTap{
0%,100%{filter:brightness(1)}
50%{filter:brightness(1.6)}
}

@keyframes shapeFloat{
from{translate:0 -2px}
to{translate:0 3px}
}

.color-game-bottom{
min-height:40px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}

.color-game-message{
color:rgba(183,228,255,.58);
font-size:9px;
font-variant-numeric:tabular-nums;
}

.color-game-reset{
min-height:38px;
padding:0 15px;
border:1px solid rgba(183,228,255,.13);
border-radius:999px;
background:rgba(244,248,255,.02);
color:rgba(244,248,255,.68);
font-family:"Manrope",Arial,Helvetica,sans-serif;
font-size:9px;
cursor:pointer;
}

.color-game-reset:hover{
border-color:rgba(62,214,255,.32);
color:#F4F8FF;
}

/* ---------- SINGLE RANDOM GIFT ---------- */
.game-finish-gift{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
padding:12px;
overflow:auto;
text-align:center;
background:
radial-gradient(
circle at 50% 44%,
rgba(5,112,255,.10),
transparent 44%
);
}

.game-finish-inner{
width:min(100%,410px);
margin:auto;
}

.random-gift-wrap{
width:min(100%,390px);
margin:auto;
}

.random-gift-art{
display:block;
width:min(100%,235px);
margin:0 auto;
aspect-ratio:4/3;
overflow:hidden;
border:1px solid rgba(183,228,255,.14);
border-radius:16px 5px 16px 5px;
background:#02070d;
box-shadow:
0 14px 34px rgba(0,0,0,.22);
}

.random-gift-art svg{
display:block;
width:100%;
height:100%;
}

.random-gift-caption{
margin-top:8px;
color:rgba(244,248,255,.58);
font-size:9px;
line-height:1.35;
}

.random-gift-caption strong{
display:block;
margin-bottom:3px;
color:#F4F8FF;
font-size:13px;
line-height:1.2;
font-weight:500;
letter-spacing:-.02em;
}

.random-gift-meta{
margin-top:6px;
color:rgba(62,214,255,.58);
font-size:8px;
letter-spacing:.05em;
}

.random-gift-actions{
display:flex;
justify-content:center;
gap:7px;
flex-wrap:wrap;
margin-top:10px;
}

.game-gift-button{
min-height:36px;
padding:0 15px;
border:1px solid rgba(62,214,255,.28);
border-radius:999px;
background:rgba(5,112,255,.09);
color:#F4F8FF;
font-family:"Manrope",Arial,Helvetica,sans-serif;
font-size:9px;
cursor:pointer;
}

.game-gift-button.secondary{
border-color:rgba(183,228,255,.14);
background:rgba(244,248,255,.025);
color:rgba(244,248,255,.72);
}

/* ---------- PERFORMANCE ---------- */
.book-intro,
.book-project-list{
visibility:hidden;
}

.allprojects-overlay.content-ready .book-intro,
.allprojects-overlay.content-ready .book-project-list{
visibility:visible;
}

.allprojects-overlay.active{
background:rgba(2,8,14,.76);
backdrop-filter:none;
-webkit-backdrop-filter:none;
}

.book-page{
transition:
transform .64s cubic-bezier(.18,.72,.16,1),
opacity .14s ease;
}

.book-project-number,
.book-project-video-badge,
.book-project-arrow{
backdrop-filter:none;
-webkit-backdrop-filter:none;
}

.book-project-media img{
filter:none;
transition:transform .28s ease;
}

.book-project:hover .book-project-media img{
filter:none;
}

@media(max-width:700px){

.book-intro.book-intro--break{
padding:17px 12px 14px;
gap:8px;
}

.book-intro--break .book-index{
font-size:6px;
}

.book-intro--break .book-title{
margin-top:3px;
font-size:clamp(23px,6.5vw,31px);
}

.book-page.left .easter-rest{
grid-template-rows:18px 12px minmax(0,1fr);
gap:2px;
}

.book-page.left .easter-rest-title{
font-size:8px;
}

.book-page.left .easter-rest-copy{
font-size:6px;
}

.book-page.left .runaway-area{
min-height:120px;
}

.book-page.left .easter-trigger{
min-width:118px;
min-height:38px;
padding:0 14px;
font-size:8px;
}

.book-projects-heading{
top:16px;
left:22px;
right:18px;
font-size:6px;
}

.book-page.right .book-project-list{
padding-top:39px;
}

.zalip-zone{
width:min(92%,500px);
height:min(78%,570px);
padding:11px;
gap:8px;
border-radius:16px 5px 16px 5px;
}

.zalip-zone-kicker{
font-size:7px;
}

.zalip-zone-back,
.zalip-zone-close{
min-height:36px;
font-size:8px;
}

.zalip-zone-back{
padding:0 11px;
}

.zalip-zone-close{
min-width:36px;
font-size:16px;
}

.color-game{
grid-template-rows:auto minmax(220px,1fr) auto;
}

.color-game-top{
grid-template-columns:52px minmax(0,1fr) 52px;
min-height:52px;
}

.color-game-command{
font-size:14px;
}

.color-game-level{
font-size:6px;
}

.run-stat strong{
font-size:11px;
}

.color-game-field{
min-height:220px;
}

.color-game-message{
font-size:8px;
}

.color-game-reset{
min-height:36px;
font-size:8px;
}

.random-gift-art{
width:min(100%,205px);
}

}

@media(prefers-reduced-motion:reduce){
.easter-trigger,
.game-shape,
.zalip-zone{
animation:none !important;
transition:none !important;
}
}

.book-close{
position:absolute;
z-index:50;
right:-18px;
top:-18px;
width:42px;
height:42px;
display:grid;
place-items:center;
padding:0;
border:1px solid rgba(183,228,255,.23);
border-radius:50%;
background:rgba(4,17,29,.92);
color:rgba(244,248,255,.8);
font-size:18px;
cursor:pointer;
opacity:0;
transform:
translate3d(0,0,0)
scale(.7)
rotate(-20deg);
transition:
opacity .32s ease,
transform .4s cubic-bezier(.2,.8,.2,1),
background .2s ease;
will-change:opacity,transform;
}
.allprojects-overlay.content-ready .book-close{
opacity:1;
transform:
translate3d(0,0,0)
scale(1)
rotate(0);
}
.book-close:hover{
background:rgba(5,112,255,.22);
}

.allprojects-overlay.closing .book-intro,
.allprojects-overlay.closing .book-project-list,
.allprojects-overlay.closing .book-close{
opacity:0;
pointer-events:none;
transition-delay:0s;
}
.allprojects-overlay.closing .book-page.left{
transform:
translate3d(0,0,2px)
rotateY(89deg);
transition-duration:.82s;
}
.allprojects-overlay.closing .book-page.right{
transform:
translate3d(0,0,2px)
rotateY(-89deg);
transition-duration:.82s;
}
.allprojects-overlay.closing .book-edge{
opacity:1;
transform:
translate3d(-50%,0,10px)
scaleY(1)
scaleX(.9);
transition:
opacity .24s ease .45s,
transform .55s ease .34s;
}
.allprojects-overlay.closing .book-spine{
opacity:0;
transition:opacity .28s ease .52s;
}

/* ACCESSIBILITY */
@media(prefers-reduced-motion:reduce){
.hero-face-glow,
.hero-hair-light,
.hero-jacket-sheen,
.hero-atmosphere,
.hero-particle,
.hero>img{
animation:none !important;
}
.hero-life-parallax,
.hero-cursor-light{
transform:none !important;
}
.final-door-particle{
display:none !important;
}
.case-footer-title{
opacity:1 !important;
transform:none !important;
}
.case-footer-line::after{
display:none !important;
}
.case-footer-highlight{
color:rgba(244,248,255,.93) !important;
text-shadow:none !important;
}
.case-footer-accent{
transform:scaleX(1) !important;
animation:none !important;
}
.book-shell,
.book-page,
.book-edge,
.book-spine,
.book-intro,
.book-project-list,
.book-project,
.book-close,
.allprojects-stage::before{
transition-duration:.001ms !important;
transition-delay:0s !important;
animation:none !important;
}
}

/* RESPONSIVE */
@media(max-width:700px){
.hero-note{
left:25%;
width:50%;
}
.process-ui{
grid-template-columns:34% 66%;
}
.process-left{
padding:7% 5% 5% 8%;
}
.process-center{
padding:3%;
}
.process-content{
left:7%;
width:44%;
}
.process-main-title{
font-size:clamp(20px,5vw,38px);
}
.process-main-subtitle{
font-size:clamp(9px,2vw,15px);
}
.experiment-title{
left:3.5%;
width:34%;
}
.experiment-copy{
right:3%;
width:25%;
}
.effect-panel{
right:3%;
width:25%;
}
.direction-hints{
display:none;
}
.book-shell{
width:92vw;
height:68vh;
min-height:500px;
}
.book-intro{
padding:26px 20px;
}
.book-title{
font-size:clamp(30px,8vw,45px);
}
.book-description{
font-size:10px;
}
.book-project-list{
padding:20px 18px 20px 22px;
grid-template-columns:1fr;
grid-template-rows:repeat(6,1fr);
gap:6px;
}
.book-project{
padding:10px 13px;
border-radius:
13px
5px
13px
5px;
}
.book-project-number{
display:none;
}
.book-project-name{
font-size:13px;
}
.book-project-bottom{
font-size:7px;
}
.book-project-arrow{
width:21px;
height:21px;
}
.project-case-modal{
width:calc(100% - 16px);
height:calc(100vh - 16px);
}
.case-headline{
grid-template-columns:1fr;
padding:26px 20px;
}
.case-title{
font-size:clamp(46px,16vw,74px);
}
.case-meta{
grid-template-columns:1fr;
}
.case-meta-item{
padding:14px 20px;
}
.case-section{
padding:28px 16px;
}
.case-section-head{
display:block;
}
.case-section-head p{
margin-top:12px;
}
.case-pair{
grid-template-columns:1fr;
}
.case-footer{
align-items:flex-start;
flex-direction:column;
padding:32px 20px;
}
}

@media(pointer:coarse){
.experiment{
cursor:auto;
}
.plasma-anchor,
.plasma-pulse{
display:none;
}
}


/* NORMAL VECTOR TEXT — NO FAKE SHARPENING */
body,
body *{
-webkit-text-stroke:0 !important;
text-shadow:none;
}

h1,
h2,
h3,
h4,
h5,
h6{
text-rendering:auto;
}

.hero-note-text,
.process-main-title,
.process-main-subtitle,
.experiment-title h2,
.experiment-title p,
.experiment-copy,
.effect-phrase,
.case-title,
.case-headline p,
.case-section p,
.case-benefit p,
.case-footer-title{
-webkit-font-smoothing:antialiased;
}

/* Ultra-light 300 on dark backgrounds can look fuzzy on Windows. */
.process-main-title,
.experiment-title h2,
.case-title,
.case-footer h3{
font-weight:400;
}



/* =========================================================
   PROJECT-CARD TEXT RENDERING — APPLIED SITE-WIDE
   Ориентир: текст карточек "Проекты"
   ========================================================= */

html,
body{
text-rendering:auto !important;
-webkit-font-smoothing:antialiased !important;
-moz-osx-font-smoothing:grayscale !important;
font-kerning:normal;
font-synthesis:none;
}

body,
button,
a,
input,
textarea,
select{
font-family:"Manrope",Arial,Helvetica,sans-serif !important;
}

/* Никакой искусственной резкости / размытия букв */
h1,h2,h3,h4,h5,h6,
p,span,strong,small,
a,button,label{
-webkit-text-stroke:0 !important;
text-shadow:none !important;
filter:none;
}

/*
   Именно это чаще всего отличает четкий текст карточек
   от "мыльного" текста в анимированных блоках:
   сами буквы больше не держим на отдельном GPU-слое.
*/
.hero-note-text,
.process-kicker,
.process-step-name,
.process-step-number,
.process-main-title,
.process-main-subtitle,
.process-visual-number,
.process-visual-note,
.experiment-title,
.experiment-title h2,
.experiment-title p,
.experiment-copy,
.direction-hint,
.effect-label,
.effect-phrase,
.interaction-counter,
.case-kicker,
.case-title,
.case-title span,
.case-intro-copy,
.case-meta-item small,
.case-meta-item strong,
.case-section-head h3,
.case-section p,
.case-brief-label,
.case-benefit strong,
.case-benefit p,
.case-footer-title,
.case-footer-highlight,
.modal-title,
.modal-copy,
.modal-label,
.book-title,
.book-projects-heading,
.book-project-name,
.book-project-bottom,
.easter-rest-title,
.easter-rest-copy,
.zalip-zone-kicker,
.color-game-command,
.color-game-level,
.run-stat span,
.run-stat strong,
.color-game-message,
.random-gift-caption{
will-change:auto !important;
filter:none !important;
}

/* Текст как в проектах: не ультратонкий */
h1,h2,h3,h4,h5,h6,
.hero-note-text,
.process-main-title,
.experiment-title h2,
.case-title,
.case-section-head h3,
.case-footer-title,
.modal-title,
.book-title,
.color-game-command{
font-weight:500 !important;
}

/* Обычный текст и подписи тоже не тоньше карточек проектов */
p,
small,
label,
.process-kicker,
.process-step-name,
.process-step-number,
.process-main-subtitle,
.process-visual-note,
.experiment-title p,
.experiment-copy,
.effect-label,
.effect-phrase,
.interaction-counter,
.case-kicker,
.case-title span,
.case-intro-copy,
.case-meta-item small,
.case-meta-item strong,
.case-section p,
.case-brief-label,
.case-benefit p,
.modal-copy,
.modal-label,
.book-projects-heading,
.book-project-name,
.book-project-bottom,
.easter-rest-title,
.easter-rest-copy,
.zalip-zone-kicker,
.color-game-level,
.run-stat span,
.run-stat strong,
.color-game-message,
.random-gift-caption{
font-weight:500 !important;
}

/* Курсив на мелком Manrope визуально был мягче обычного начертания */
.process-main-subtitle,
.experiment-title p,
.effect-phrase,
.hero-note-text,
.book-script{
font-style:normal !important;
}

/* Минимальный контраст — примерно как у подписи карточки проекта */
.process-main-subtitle,
.process-visual-note,
.experiment-title p,
.experiment-copy,
.effect-label,
.effect-phrase,
.case-title span,
.case-intro-copy,
.case-meta-item small,
.case-meta-item strong,
.case-section p,
.case-brief-label,
.case-benefit p,
.modal-copy,
.modal-label,
.easter-rest-title,
.easter-rest-copy,
.zalip-zone-kicker,
.color-game-level,
.run-stat span,
.color-game-message,
.random-gift-caption{
color:rgba(244,248,255,.78) !important;
}

/* Акцентные маленькие подписи — тот же чистый холодный оттенок */
.process-kicker,
.case-kicker,
.case-section-kicker,
.book-projects-heading{
color:rgba(183,228,255,.86) !important;
}

/* Заголовки и названия — как название проекта */
.process-main-title,
.experiment-title h2,
.case-title,
.case-section-head h3,
.case-footer-title,
.modal-title,
.book-title,
.book-project-name,
.color-game-command{
color:#F4F8FF !important;
}

/* У текстовых элементов не оставляем GPU-hint после анимации */
.hero-note-text,
.process-main-title,
.process-main-subtitle,
.case-footer-title{
transform:none !important;
}

/* Карточки проектов остаются эталоном */
.book-project-name{
font-weight:500 !important;
color:#F4F8FF !important;
}

.book-project-bottom{
font-weight:500 !important;
color:rgba(244,248,255,.78) !important;
}

/* Мобильный текст не делаем тоньше десктопного */
@media(max-width:700px){

h1,h2,h3,h4,h5,h6,
p,span,strong,small,
a,button,label{
-webkit-text-stroke:0 !important;
}

.process-kicker,
.process-step-name,
.process-step-number,
.process-main-subtitle,
.process-visual-note,
.effect-label,
.effect-phrase,
.case-kicker,
.case-meta-item small,
.case-meta-item strong,
.book-project-bottom,
.zalip-zone-kicker,
.color-game-level,
.run-stat span,
.color-game-message{
font-weight:500 !important;
}

}



/* =========================================================
   HANDWRITTEN NOTES
   ========================================================= */

.handwritten,
.hand-note{
font-family:
"Segoe Print",
"Segoe Script",
"Bradley Hand",
"Comic Sans MS",
cursive !important;
font-style:normal !important;
font-weight:400 !important;
letter-spacing:-.035em !important;
text-transform:none !important;
text-shadow:none !important;
-webkit-text-stroke:0 !important;
}

/* Existing central phrases */
.hero-note-text.handwritten{
font-size:clamp(17px,2vw,29px) !important;
line-height:1.05;
color:rgba(244,248,255,.96) !important;
}

.process-main-subtitle.handwritten{
max-width:96%;
font-size:clamp(16px,1.75vw,25px) !important;
line-height:1.22;
color:rgba(244,248,255,.84) !important;
}

.experiment-title p.handwritten{
font-size:clamp(15px,1.65vw,23px) !important;
line-height:1.2;
color:rgba(244,248,255,.84) !important;
}

.effect-phrase.handwritten{
font-size:clamp(12px,.95vw,16px) !important;
line-height:1.1;
color:rgba(244,248,255,.72) !important;
}

/* Don't let decorative notes interfere with small screens. */
@media(max-width:700px){

.hero-note-text.handwritten{
font-size:clamp(14px,3.8vw,20px) !important;
}

.process-main-subtitle.handwritten{
font-size:clamp(12px,3vw,17px) !important;
}

.experiment-title p.handwritten{
font-size:clamp(11px,2.8vw,16px) !important;
}

.effect-phrase.handwritten{
font-size:10px !important;
}

.hand-note{
font-size:11px;
max-width:150px;
}


}



/* Handwritten notes now live only where there is enough empty space */
.hand-note{
position:absolute;
z-index:18;
display:block;
max-width:280px;
color:rgba(244,248,255,.72);
font-size:clamp(16px,1.55vw,23px);
line-height:1.12;
pointer-events:none;
user-select:none;
}

.hand-note--experiment-main{
left:7%;
bottom:8%;
width:250px;
text-align:left;
color:rgba(183,228,255,.74);
}

.hand-note--final-clean{
right:7%;
bottom:10%;
width:220px;
text-align:right;
color:rgba(183,228,255,.76);
}

@media(max-width:700px){

.hand-note{
font-size:10px;
max-width:145px;
}

.hand-note--experiment-main{
left:5%;
bottom:6%;
width:145px;
}

.hand-note--final-clean{
right:5%;
bottom:7%;
width:135px;
}

}



/* =========================================================
   HANDWRITTEN TEXT — FIT SAFETY
   ========================================================= */

/* Базово рукописный текст не обрезаем никогда */
.handwritten,
.hand-note{
box-sizing:border-box !important;
white-space:normal !important;
overflow:visible !important;
text-overflow:clip !important;
overflow-wrap:normal !important;
word-break:normal !important;
hyphens:none !important;
}

/* HERO: старый блок был nowrap + overflow:hidden */
.hero-note{
left:25% !important;
top:.7% !important;
width:50% !important;
height:12.5% !important;
overflow:visible !important;
}

.hero-note-text.handwritten{
width:100% !important;
max-width:100% !important;
padding:0 8px !important;
white-space:normal !important;
overflow:visible !important;
text-overflow:clip !important;
font-size:clamp(15px,1.65vw,23px) !important;
line-height:1.12 !important;
}

/* PROCESS: даём фразе чуть больше реальной ширины */
.process-main-subtitle.handwritten{
width:100% !important;
max-width:100% !important;
padding-right:4% !important;
white-space:normal !important;
overflow:visible !important;
font-size:clamp(14px,1.55vw,22px) !important;
line-height:1.22 !important;
}

/* EXPERIMENT: текст может спокойно перейти на вторую строку */
.experiment-title p.handwritten{
width:100% !important;
max-width:100% !important;
padding-right:4% !important;
white-space:normal !important;
overflow:visible !important;
font-size:clamp(13px,1.45vw,20px) !important;
line-height:1.2 !important;
}

/* Маленькая рукописная фраза справа не должна упираться в счётчик */
.effect-meta{
align-items:flex-start !important;
}

.effect-phrase.handwritten{
flex:1 1 auto !important;
min-width:0 !important;
max-width:72% !important;
white-space:normal !important;
overflow:visible !important;
font-size:clamp(10px,.72vw,13px) !important;
line-height:1.18 !important;
}

.interaction-counter{
flex:0 0 auto !important;
}

/* Декоративные заметки: шире, но в безопасных пределах */
.hand-note--experiment-main{
width:min(270px,30vw) !important;
max-width:30vw !important;
}

.hand-note--final-clean{
width:min(240px,27vw) !important;
max-width:27vw !important;
}

/* На мобильном уменьшаем, а не обрезаем */
@media(max-width:700px){

.hero-note{
left:18% !important;
top:.4% !important;
width:64% !important;
height:13% !important;
}

.hero-note-text.handwritten{
padding:0 4px !important;
font-size:clamp(12px,3.2vw,17px) !important;
line-height:1.1 !important;
}

.process-main-subtitle.handwritten{
max-width:100% !important;
padding-right:0 !important;
font-size:clamp(11px,2.8vw,15px) !important;
line-height:1.18 !important;
}

.experiment-title p.handwritten{
padding-right:0 !important;
font-size:clamp(10px,2.55vw,14px) !important;
line-height:1.16 !important;
}

.effect-phrase.handwritten{
max-width:68% !important;
font-size:9px !important;
line-height:1.15 !important;
}

.hand-note--experiment-main{
width:130px !important;
max-width:36vw !important;
}

.hand-note--final-clean{
width:120px !important;
max-width:34vw !important;
}

}



/* Заголовок "Вот что может AI" теперь сам по себе */
.experiment-title{
width:31%;
}

.experiment-title h2{
margin-bottom:0 !important;
}

/* Рукописная подсказка относится к центральной интерактивной зоне */
/* Больше никаких дополнительных handwritten-note в этом блоке */
@media(max-width:700px){

}


/* =========================================================
   SITE OPENING — OPTIMIZED TORN COVER
   Только transform + opacity в движении
   ========================================================= */

body.intro-lock{
overflow:hidden !important;
}

.site-intro{
position:fixed;
z-index:99999;
inset:0;
overflow:hidden;
background:#060B1A;
pointer-events:auto;
isolation:isolate;
contain:strict;
}

.site-intro.is-finished{
pointer-events:none;
}

/* ---------------- PANELS ---------------- */
/*
   Сами половины теперь обычные прямоугольники.
   "Рваность" рисуется только узким псевдоэлементом у края,
   а не clip-path на половину экрана.
*/
.site-intro__panel{
position:absolute;
z-index:2;
top:0;
bottom:0;
width:50.5%;
background:
linear-gradient(
145deg,
#060B1A 0%,
#050A16 56%,
#02050D 100%
);
will-change:transform;
backface-visibility:hidden;
transform:translate3d(0,0,0);
}

.site-intro__panel--left{
left:0;
}

.site-intro__panel--right{
right:0;
}

.site-intro__panel--left::after,
.site-intro__panel--right::before{
content:"";
position:absolute;
top:0;
bottom:0;
width:18px;
background:#050A16;
pointer-events:none;
}

.site-intro__panel--left::after{
right:-17px;
clip-path:polygon(
0 0,
72% 0,
30% 5%,
82% 11%,
25% 17%,
75% 24%,
32% 31%,
88% 38%,
28% 45%,
78% 52%,
22% 60%,
82% 68%,
30% 76%,
76% 84%,
26% 92%,
70% 100%,
0 100%
);
}

.site-intro__panel--right::before{
left:-17px;
clip-path:polygon(
28% 0,
100% 0,
100% 100%,
30% 100%,
74% 92%,
24% 84%,
70% 76%,
18% 68%,
78% 60%,
22% 52%,
72% 45%,
12% 38%,
68% 31%,
25% 24%,
75% 17%,
18% 11%,
70% 5%
);
}

/* ---------------- BRAND ---------------- */
.site-intro__content{
position:absolute;
z-index:6;
inset:0;
display:grid;
place-items:center;
pointer-events:none;
will-change:opacity;
}

.site-intro__mark{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
min-width:min(72vw,540px);
}

.site-intro__brand{
display:inline-flex !important;
align-items:baseline;
justify-content:center;
gap:0;
font-family:"Manrope",Arial,Helvetica,sans-serif !important;
font-size:clamp(42px,6.2vw,88px) !important;
line-height:.92 !important;
letter-spacing:-.075em !important;
font-weight:300 !important;
white-space:nowrap;
opacity:0;
transform:translate3d(0,8px,0);
will-change:transform,opacity;
animation:introBrandInFast .34s cubic-bezier(.2,.75,.2,1) .08s forwards;
}

.site-intro__brand-base{
display:inline-block;
font-weight:300;
color:#F4F8FF;
}

.site-intro__brand-ai{
display:inline-block;
margin-left:.025em;
font-weight:500;
letter-spacing:-.06em;
background:linear-gradient(
145deg,
#B7E4FF 0%,
#3ED6FF 38%,
#0570FF 100%
);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
color:#3ED6FF;
}

/* Без glow — он был одной из дорогих операций */
.site-intro__line{
display:block;
width:0;
height:1px;
margin-top:16px;
background:
linear-gradient(
90deg,
transparent,
rgba(62,214,255,.82) 22%,
rgba(244,248,255,.92) 50%,
rgba(62,214,255,.82) 78%,
transparent
);
will-change:transform,opacity;
transform-origin:center;
animation:introLineFast .38s cubic-bezier(.2,.75,.2,1) .23s forwards;
}

/* ---------------- RIP ---------------- */
/* Простая световая линия, без filter/drop-shadow/сложного clip-path */
.site-intro__tear{
position:absolute;
z-index:5;
left:50%;
top:0;
width:2px;
height:100%;
opacity:0;
transform:translate3d(-50%,0,0) scaleY(.06);
transform-origin:center;
background:
linear-gradient(
180deg,
transparent 0%,
rgba(62,214,255,.45) 12%,
rgba(244,248,255,.96) 50%,
rgba(62,214,255,.45) 88%,
transparent 100%
);
will-change:transform,opacity;
animation:introTearFast .24s cubic-bezier(.2,.8,.2,1) .52s forwards;
}

/* Шум полностью убран: mix-blend-mode на весь viewport тормозил */
.site-intro__noise{
display:none !important;
}

/* ---------------- LEAVE ---------------- */
.site-intro.is-leaving .site-intro__content{
animation:introContentOutFast .12s linear forwards;
}

.site-intro.is-leaving .site-intro__panel--left{
animation:introRipLeftFast .62s cubic-bezier(.72,.02,.18,1) forwards;
}

.site-intro.is-leaving .site-intro__panel--right{
animation:introRipRightFast .62s cubic-bezier(.72,.02,.18,1) forwards;
}

.site-intro.is-leaving .site-intro__tear{
animation:introTearOutFast .16s linear forwards;
}

/* ---------------- KEYFRAMES ---------------- */
@keyframes introBrandInFast{
from{
opacity:0;
transform:translate3d(0,8px,0);
}
to{
opacity:1;
transform:translate3d(0,0,0);
}
}

@keyframes introLineFast{
from{
width:0;
opacity:0;
}
to{
width:min(62vw,430px);
opacity:1;
}
}

@keyframes introTearFast{
from{
opacity:0;
transform:translate3d(-50%,0,0) scaleY(.06);
}
to{
opacity:1;
transform:translate3d(-50%,0,0) scaleY(1);
}
}

@keyframes introContentOutFast{
to{
opacity:0;
}
}

@keyframes introRipLeftFast{
from{
transform:translate3d(0,0,0);
}
to{
transform:translate3d(-104%,0,0);
}
}

@keyframes introRipRightFast{
from{
transform:translate3d(0,0,0);
}
to{
transform:translate3d(104%,0,0);
}
}

@keyframes introTearOutFast{
to{
opacity:0;
}
}

@media(max-width:700px){

.site-intro__mark{
min-width:84vw;
}

.site-intro__brand{
font-size:clamp(38px,13vw,62px) !important;
letter-spacing:-.07em !important;
}

.site-intro__line{
margin-top:12px;
}

.site-intro__panel--left::after,
.site-intro__panel--right::before{
width:12px;
}

.site-intro__panel--left::after{
right:-11px;
}

.site-intro__panel--right::before{
left:-11px;
}

}

@media(prefers-reduced-motion:reduce){

.site-intro{
display:none !important;
}

body.intro-lock{
overflow:auto !important;
}

}



/* =========================================================
   TORN OPENING — LIVE SITE REVEAL
   Сайт виден сразу в той области, которую уже открыли панели.
   ========================================================= */

.site-intro{
background:transparent !important;
}

/*
   До начала движения экран полностью закрывают сами панели.
   После старта разрыва между ними нет отдельного фонового слоя —
   поэтому в щели сразу виден настоящий сайт.
*/
.site-intro__panel{
width:50.75% !important;
}

/* Чуть перекрываем центр до старта, чтобы не было тонкой щели */
.site-intro__panel--left{
left:0 !important;
}

.site-intro__panel--right{
right:0 !important;
}

/* Контент заставки исчезает в самом начале раскрытия,
   чтобы не висеть поверх уже показавшейся страницы. */
.site-intro.is-leaving .site-intro__content{
animation:introRevealContentOut .10s linear forwards !important;
}

.site-intro.is-leaving .site-intro__tear{
animation:introRevealTearOut .18s linear forwards !important;
}

@keyframes introRevealContentOut{
to{
opacity:0;
visibility:hidden;
}
}

@keyframes introRevealTearOut{
0%{opacity:1}
100%{opacity:0}
}

/*
   При раздвижении двигаются только две непрозрачные створки.
   Сам .site-intro прозрачен, поэтому каждая освобождённая область
   сразу показывает страницу под заставкой.
*/
.site-intro.is-leaving .site-intro__panel--left{
animation:introRevealLeft .66s cubic-bezier(.72,.02,.18,1) forwards !important;
}

.site-intro.is-leaving .site-intro__panel--right{
animation:introRevealRight .66s cubic-bezier(.72,.02,.18,1) forwards !important;
}

@keyframes introRevealLeft{
0%{
transform:translate3d(0,0,0);
}
100%{
transform:translate3d(-103%,0,0);
}
}

@keyframes introRevealRight{
0%{
transform:translate3d(0,0,0);
}
100%{
transform:translate3d(103%,0,0);
}
}



/* =========================================================
   ULTRA SMOOTH INTRO REVEAL
   ========================================================= */

/*
   Пока заставка открывается, фон сайта уже виден в щели,
   но его собственные анимации временно остановлены.
   Это убирает конкуренцию за GPU во время движения створок.
*/
body.intro-lock > *:not(.site-intro){
animation-play-state:paused !important;
}

body.intro-lock .hero *,
body.intro-lock .projects *,
body.intro-lock .process *,
body.intro-lock .experiment *,
body.intro-lock .final-section *{
animation-play-state:paused !important;
}

/* Створки — единственное, что активно двигается */
.site-intro__panel{
will-change:transform !important;
transform:translate3d(0,0,0);
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
}

/* Убираем любые потенциальные тяжёлые эффекты в заставке */
.site-intro,
.site-intro__panel,
.site-intro__content,
.site-intro__tear,
.site-intro__brand,
.site-intro__brand-ai,
.site-intro__line{
filter:none !important;
box-shadow:none !important;
}

/* Сам контейнер прозрачен: сайт сразу виден в раскрывающейся области */
.site-intro{
background:transparent !important;
}

/* Более медленное и мягкое открытие */
.site-intro.is-leaving .site-intro__panel--left{
animation:introRevealLeftSmooth 1.15s cubic-bezier(.62,.02,.22,1) forwards !important;
}

.site-intro.is-leaving .site-intro__panel--right{
animation:introRevealRightSmooth 1.15s cubic-bezier(.62,.02,.22,1) forwards !important;
}

/* Логотип мягко исчезает, не конкурируя со створками */
.site-intro.is-leaving .site-intro__content{
animation:introContentFadeSmooth .22s ease-out forwards !important;
}

/* Линия разрыва остаётся ещё чуть-чуть после начала движения */
.site-intro.is-leaving .site-intro__tear{
animation:introTearFadeSmooth .34s ease-out forwards !important;
}

@keyframes introRevealLeftSmooth{
0%{
transform:translate3d(0,0,0);
}
8%{
transform:translate3d(-1.5%,0,0);
}
100%{
transform:translate3d(-103%,0,0);
}
}

@keyframes introRevealRightSmooth{
0%{
transform:translate3d(0,0,0);
}
8%{
transform:translate3d(1.5%,0,0);
}
100%{
transform:translate3d(103%,0,0);
}
}

@keyframes introContentFadeSmooth{
0%{
opacity:1;
}
100%{
opacity:0;
visibility:hidden;
}
}

@keyframes introTearFadeSmooth{
0%{
opacity:1;
}
65%{
opacity:.55;
}
100%{
opacity:0;
}
}

/*
   Когда интро исчезло, браузеру больше не нужен отдельный слой створок.
*/
.site-intro.is-finished .site-intro__panel{
will-change:auto !important;
}

@media(max-width:700px){

.site-intro.is-leaving .site-intro__panel--left,
.site-intro.is-leaving .site-intro__panel--right{
animation-duration:1.05s !important;
}

}



/* =========================================================
   ZALIPAI INTRO — SINGLE CENTER TEAR + BRAND BACKGROUND
   ========================================================= */

/* Горизонтальной линии больше нет — только вертикальный разрыв */
.site-intro__line{
display:none !important;
}

/* База заставки прозрачна, сайт проявляется сразу в щели */
.site-intro{
background:transparent !important;
}

/* ---------- ФИРМЕННЫЙ ФОН СТВОРОК ---------- */
.site-intro__panel{
overflow:hidden;
background:
radial-gradient(
circle at 38% 30%,
rgba(5,112,255,.18) 0%,
rgba(5,112,255,.06) 24%,
transparent 49%
),
radial-gradient(
circle at 70% 78%,
rgba(62,214,255,.075) 0%,
transparent 36%
),
linear-gradient(
145deg,
#060B1A 0%,
#071329 46%,
#030712 100%
) !important;
}

/*
   Статичный digital-слой: тонкие линии и локальный свет.
   Никаких filter / blend-mode / анимаций.
*/
.site-intro__brand-bg{
position:absolute;
z-index:0;
inset:0;
pointer-events:none;
opacity:.78;
background:
linear-gradient(
90deg,
transparent 0%,
rgba(62,214,255,.055) 49.85%,
rgba(62,214,255,.055) 50.15%,
transparent 50.3%
),
linear-gradient(
0deg,
transparent 0%,
rgba(183,228,255,.035) 49.85%,
rgba(183,228,255,.035) 50.15%,
transparent 50.3%
);
background-size:
118px 118px,
118px 118px;
}

.site-intro__brand-bg::before{
content:"";
position:absolute;
width:min(50vw,560px);
aspect-ratio:1;
border:1px solid rgba(62,214,255,.10);
border-radius:50%;
top:50%;
transform:translateY(-50%);
}

.site-intro__brand-bg::after{
content:"";
position:absolute;
width:170px;
height:1px;
top:22%;
background:
linear-gradient(
90deg,
transparent,
rgba(62,214,255,.26),
transparent
);
}

.site-intro__brand-bg--left::before{
right:-31%;
}

.site-intro__brand-bg--right::before{
left:-31%;
}

.site-intro__brand-bg--left::after{
left:10%;
}

.site-intro__brand-bg--right::after{
right:10%;
}

/* Текст всегда поверх фирменного фона */
.site-intro__content{
z-index:7 !important;
}

/* ---------- ЕДИНСТВЕННЫЙ ЦЕНТРАЛЬНЫЙ РАЗРЫВ ---------- */
/*
   Линия повторяет ту же неровную вертикальную границу,
   от которой расходятся створки.
*/
.site-intro__tear{
z-index:8 !important;
left:50% !important;
top:-2% !important;
width:7px !important;
height:104% !important;
opacity:0;
transform:translate3d(-50%,0,0) scaleY(.04);
transform-origin:center center;
background:
linear-gradient(
180deg,
transparent 0%,
rgba(62,214,255,.40) 8%,
rgba(183,228,255,.92) 24%,
#F4F8FF 50%,
rgba(62,214,255,.90) 76%,
rgba(5,112,255,.38) 92%,
transparent 100%
) !important;
clip-path:polygon(
45% 0,
72% 4%,
38% 9%,
67% 14%,
33% 19%,
75% 25%,
40% 31%,
69% 37%,
30% 43%,
73% 49%,
37% 55%,
68% 61%,
32% 67%,
75% 73%,
40% 79%,
66% 85%,
35% 91%,
70% 96%,
48% 100%,
24% 96%,
52% 91%,
28% 85%,
58% 79%,
25% 73%,
55% 67%,
30% 61%,
61% 55%,
27% 49%,
57% 43%,
31% 37%,
62% 31%,
26% 25%,
56% 19%,
30% 14%,
60% 9%,
28% 4%
) !important;
filter:none !important;
box-shadow:none !important;
}

/*
   Рваные края створок визуально совпадают с центральной линией.
   Они узкие и статичные, поэтому остаются лёгкими.
*/
.site-intro__panel--left::after,
.site-intro__panel--right::before{
width:10px !important;
background:#071329 !important;
}

.site-intro__panel--left::after{
right:-9px !important;
clip-path:polygon(
0 0,
54% 0,
30% 6%,
67% 12%,
28% 18%,
72% 25%,
34% 32%,
64% 39%,
24% 46%,
70% 53%,
32% 60%,
68% 67%,
27% 74%,
71% 81%,
36% 88%,
63% 94%,
48% 100%,
0 100%
) !important;
}

.site-intro__panel--right::before{
left:-9px !important;
clip-path:polygon(
46% 0,
100% 0,
100% 100%,
52% 100%,
37% 94%,
64% 88%,
29% 81%,
73% 74%,
32% 67%,
68% 60%,
30% 53%,
76% 46%,
36% 39%,
66% 32%,
28% 25%,
72% 18%,
33% 12%,
70% 6%
) !important;
}

/* Линия появляется до движения створок и гаснет уже во время открытия */
.site-intro__tear{
animation:introBrandTearIn .34s cubic-bezier(.2,.8,.2,1) .50s forwards !important;
}

.site-intro.is-leaving .site-intro__tear{
animation:introBrandTearOut .46s ease-out forwards !important;
}

@keyframes introBrandTearIn{
from{
opacity:0;
transform:translate3d(-50%,0,0) scaleY(.04);
}
to{
opacity:1;
transform:translate3d(-50%,0,0) scaleY(1);
}
}

@keyframes introBrandTearOut{
0%{
opacity:1;
}
60%{
opacity:.55;
}
100%{
opacity:0;
}
}

@media(max-width:700px){

.site-intro__brand-bg{
background-size:
82px 82px,
82px 82px;
}

.site-intro__brand-bg::before{
width:74vw;
}

.site-intro__brand-bg::after{
width:110px;
}

.site-intro__tear{
width:5px !important;
}

}



/* =========================================================
   ZALIPAI INTRO — BRAND STYLE, NO GRID
   ========================================================= */

/* Полностью убираем ощущение сетки/квадратов */
.site-intro__brand-bg{
position:absolute;
z-index:0;
inset:0;
pointer-events:none;
opacity:1 !important;
background:none !important;
}

/* Большая мягкая фирменная дуга */
.site-intro__brand-bg::before{
content:"";
position:absolute;
top:50%;
width:min(66vw,760px);
height:min(66vw,760px);
border-radius:50%;
border:1px solid rgba(62,214,255,.13);
background:
radial-gradient(
circle at 50% 50%,
transparent 0 61%,
rgba(62,214,255,.025) 61.5%,
transparent 63%
);
transform:translateY(-50%);
}

/* Тонкая световая линия — как фирменный штрих, не как UI-сетка */
.site-intro__brand-bg::after{
content:"";
position:absolute;
top:28%;
width:min(34vw,420px);
height:1px;
background:
linear-gradient(
90deg,
transparent 0%,
rgba(183,228,255,.08) 18%,
rgba(62,214,255,.34) 52%,
rgba(5,112,255,.16) 82%,
transparent 100%
);
}

/* Левая створка */
.site-intro__brand-bg--left::before{
right:-45%;
}

.site-intro__brand-bg--left::after{
left:7%;
transform:rotate(-8deg);
transform-origin:left center;
}

/* Правая створка */
.site-intro__brand-bg--right::before{
left:-45%;
}

.site-intro__brand-bg--right::after{
right:7%;
transform:rotate(8deg);
transform-origin:right center;
}

/* Мягкие фирменные световые зоны вместо геометрической сетки */
.site-intro__panel--left{
background:
radial-gradient(
ellipse at 22% 24%,
rgba(5,112,255,.20) 0%,
rgba(5,112,255,.08) 24%,
transparent 50%
),
radial-gradient(
ellipse at 78% 76%,
rgba(62,214,255,.075) 0%,
transparent 38%
),
linear-gradient(
145deg,
#060B1A 0%,
#08162D 47%,
#030712 100%
) !important;
}

.site-intro__panel--right{
background:
radial-gradient(
ellipse at 76% 27%,
rgba(5,112,255,.17) 0%,
rgba(5,112,255,.065) 25%,
transparent 49%
),
radial-gradient(
ellipse at 24% 73%,
rgba(62,214,255,.07) 0%,
transparent 39%
),
linear-gradient(
215deg,
#060B1A 0%,
#08162D 47%,
#030712 100%
) !important;
}

/* Дополнительные очень тонкие световые штрихи по краям створок */
.site-intro__panel--left{
box-shadow:
inset -1px 0 0 rgba(62,214,255,.035) !important;
}

.site-intro__panel--right{
box-shadow:
inset 1px 0 0 rgba(62,214,255,.035) !important;
}

/*
   Центральный разрыв остаётся единственной активной графической осью.
   Линия чуть мягче, чтобы она выглядела частью фирменной графики,
   а не техническим разделителем.
*/
.site-intro__tear{
width:6px !important;
background:
linear-gradient(
180deg,
transparent 0%,
rgba(5,112,255,.12) 7%,
rgba(62,214,255,.58) 21%,
rgba(183,228,255,.90) 40%,
#F4F8FF 51%,
rgba(62,214,255,.80) 67%,
rgba(5,112,255,.30) 86%,
transparent 100%
) !important;
}

/* Никаких квадратных background-size / repeating-grid */
.site-intro__brand-bg,
.site-intro__panel{
background-size:auto !important;
}

@media(max-width:700px){

.site-intro__brand-bg::before{
width:94vw;
height:94vw;
}

.site-intro__brand-bg::after{
width:42vw;
}

.site-intro__tear{
width:5px !important;
}

}



/* =========================================================
   ZALIPAI INTRO — WOW BACKGROUND, STILL LIGHTWEIGHT
   ========================================================= */

/*
   Один сильный световой фокус вместо множества мелких деталей:
   ореол вокруг логотипа + мягкий луч + 3 точечных блика.
   Всё статично.
*/

.site-intro__panel--left{
background:
radial-gradient(
ellipse at 92% 48%,
rgba(183,228,255,.18) 0%,
rgba(62,214,255,.10) 16%,
rgba(5,112,255,.055) 31%,
transparent 49%
),
radial-gradient(
ellipse at 18% 18%,
rgba(5,112,255,.18) 0%,
rgba(5,112,255,.055) 28%,
transparent 52%
),
linear-gradient(
145deg,
#060B1A 0%,
#08162D 45%,
#030712 100%
) !important;
}

.site-intro__panel--right{
background:
radial-gradient(
ellipse at 8% 48%,
rgba(183,228,255,.18) 0%,
rgba(62,214,255,.10) 16%,
rgba(5,112,255,.055) 31%,
transparent 49%
),
radial-gradient(
ellipse at 84% 82%,
rgba(62,214,255,.10) 0%,
rgba(5,112,255,.045) 28%,
transparent 52%
),
linear-gradient(
215deg,
#060B1A 0%,
#08162D 45%,
#030712 100%
) !important;
}

/* Большая "линза" вокруг центра. На двух створках складывается в одно целое. */
.site-intro__brand-bg::before{
width:min(72vw,860px) !important;
height:min(72vw,860px) !important;
border:1px solid rgba(183,228,255,.14) !important;
background:
radial-gradient(
circle at 50% 50%,
rgba(62,214,255,.025) 0%,
rgba(62,214,255,.018) 42%,
transparent 58%
),
radial-gradient(
circle at 50% 50%,
transparent 0 67%,
rgba(62,214,255,.05) 67.4%,
transparent 69%
) !important;
}

/* Второй тонкий контур создаёт глубину, но не перегружает. */
.site-intro__brand-bg--left::before{
right:-49% !important;
}

.site-intro__brand-bg--right::before{
left:-49% !important;
}

/* Старый короткий штрих прячем — вместо него один большой световой луч. */
.site-intro__brand-bg::after{
display:none !important;
}

/* Световой луч: не анимируется, не использует blur/filter. */
.site-intro__beam{
position:absolute;
z-index:1;
pointer-events:none;
top:50%;
width:78%;
height:110px;
opacity:.65;
background:
linear-gradient(
90deg,
transparent 0%,
rgba(5,112,255,.02) 18%,
rgba(62,214,255,.10) 50%,
rgba(183,228,255,.035) 76%,
transparent 100%
);
}

.site-intro__beam--left{
right:-8%;
transform:translateY(-50%) rotate(-14deg);
transform-origin:right center;
}

.site-intro__beam--right{
left:-8%;
transform:translateY(-50%) rotate(14deg);
transform-origin:left center;
}

/* Очень редкие маленькие блики — именно акценты, не "звёздное небо". */
.site-intro__spark{
position:absolute;
z-index:2;
display:block;
width:3px;
height:3px;
border-radius:50%;
background:#B7E4FF;
opacity:.72;
pointer-events:none;
}

.site-intro__spark::after{
content:"";
position:absolute;
left:50%;
top:50%;
width:18px;
height:1px;
transform:translate(-50%,-50%);
background:
linear-gradient(
90deg,
transparent,
rgba(62,214,255,.28),
transparent
);
}

.site-intro__spark--a{
left:18%;
top:34%;
}

.site-intro__spark--b{
right:21%;
top:29%;
}

.site-intro__spark--c{
right:15%;
bottom:24%;
opacity:.50;
}

/*
   Центр чуть глубже по тону, чтобы логотип и линия-разрыв
   визуально "всплывали" вперёд.
*/
.site-intro__content::before{
content:"";
position:absolute;
z-index:-1;
left:50%;
top:50%;
width:min(46vw,610px);
height:min(28vw,330px);
transform:translate(-50%,-50%);
border-radius:50%;
background:
radial-gradient(
ellipse at center,
rgba(10,40,94,.16) 0%,
rgba(6,11,26,.08) 48%,
transparent 74%
);
pointer-events:none;
}

/* Performance: никаких фильтров, blur, blend-mode и backdrop-filter. */
.site-intro__beam,
.site-intro__spark,
.site-intro__brand-bg,
.site-intro__content::before{
filter:none !important;
backdrop-filter:none !important;
mix-blend-mode:normal !important;
}

@media(max-width:700px){

.site-intro__brand-bg::before{
width:108vw !important;
height:108vw !important;
}

.site-intro__beam{
height:76px;
width:86%;
opacity:.52;
}

.site-intro__content::before{
width:72vw;
height:42vw;
}

.site-intro__spark--c{
display:none;
}

}



/* =========================================================
   ULTRA CRISP TEXT PASS
   Чёткость без text-stroke и без искусственного sharpening
   ========================================================= */

html,
body{
text-rendering:auto !important;
-webkit-font-smoothing:subpixel-antialiased;
-moz-osx-font-smoothing:auto;
font-kerning:normal;
font-optical-sizing:auto;
font-synthesis:none;
}

body,
button,
a,
input,
textarea,
select{
font-family:"Manrope",Arial,Helvetica,sans-serif !important;
}

/* Ни один обычный текст не усиливаем фейковым stroke/shadow. */
h1,h2,h3,h4,h5,h6,
p,strong,small,label,
a,button,
.process-kicker,
.process-step-name,
.process-step-number,
.process-main-title,
.process-main-subtitle,
.process-visual-number,
.process-visual-note,
.experiment-title h2,
.experiment-copy,
.direction-hint,
.effect-label,
.effect-phrase,
.interaction-counter,
.case-kicker,
.case-title,
.case-title span,
.case-intro-copy,
.case-meta-item small,
.case-meta-item strong,
.case-section-head h3,
.case-section-head p,
.case-section p,
.case-brief-label,
.case-brief strong,
.case-brief p,
.case-benefit strong,
.case-benefit p,
.case-footer-title,
.case-footer-highlight,
.modal-title,
.modal-copy,
.modal-label,
.book-title,
.book-projects-heading,
.book-project-name,
.book-project-bottom,
.easter-rest-title,
.easter-rest-copy,
.zalip-zone-kicker,
.color-game-command,
.color-game-level,
.run-stat span,
.run-stat strong,
.color-game-message,
.random-gift-caption,
.random-gift-meta{
-webkit-text-stroke:0 !important;
text-shadow:none !important;
filter:none !important;
}

/* ---------------------------------------------------------
   УБИРАЕМ РАСТЕРИЗАЦИЮ ЦЕЛЫХ ТЕКСТОВЫХ БЛОКОВ ЧЕРЕЗ TRANSFORM
   --------------------------------------------------------- */

/* Было top:50% + translateY(-50%). Центруем без transform. */
.process-content{
top:0 !important;
bottom:0 !important;
height:max-content;
margin-top:auto !important;
margin-bottom:auto !important;
transform:none !important;
will-change:auto !important;
}

/* Весь открытый кейс раньше висел на translate(-50%,-50%). */
.project-case-modal{
left:0 !important;
right:0 !important;
top:0 !important;
bottom:0 !important;
margin:auto !important;
transform:none !important;
will-change:auto !important;
}

/* То же самое для игрового окна. */
.zalip-zone{
left:0 !important;
right:0 !important;
top:0 !important;
bottom:0 !important;
margin:auto !important;
transform:none !important;
}

/* После открытия книги текст точно не остаётся на 3D-текстуре. */
.allprojects-overlay.open .book-shell,
.allprojects-overlay.open .book-page.left,
.allprojects-overlay.open .book-page.right,
.allprojects-overlay.content-ready .book-intro,
.allprojects-overlay.content-ready .book-project-list{
transform:none !important;
will-change:auto !important;
transform-style:flat !important;
filter:none !important;
}

/* ---------------------------------------------------------
   ОСНОВНАЯ ТИПОГРАФИКА
   --------------------------------------------------------- */

h1,h2,h3,h4,h5,h6,
.process-main-title,
.experiment-title h2,
.case-title,
.case-section-head h3,
.case-footer-title,
.modal-title,
.book-title,
.color-game-command{
font-weight:500 !important;
color:#F4F8FF !important;
opacity:1;
}

/* Нормальный текст — плотный, но не жирный. */
p,
.case-intro-copy,
.case-section-head p,
.case-section p,
.case-brief p,
.case-benefit p,
.modal-copy,
.experiment-copy,
.process-main-subtitle{
font-weight:500 !important;
color:rgba(244,248,255,.88) !important;
}

/* В кейсах opacity .58 делала даже хороший шрифт визуально мутным. */
.project-case-modal .case-kicker,
.project-case-modal .case-title span,
.project-case-modal .case-intro-copy,
.project-case-modal .case-section-head h3,
.project-case-modal .case-section-head p,
.project-case-modal .case-brief-label,
.project-case-modal .case-brief strong,
.project-case-modal .case-brief p,
.project-case-modal .case-benefit strong,
.project-case-modal .case-benefit p,
.sibirskaya-case .case-kicker,
.sibirskaya-case .case-title span,
.sibirskaya-case .case-intro-copy,
.sibirskaya-case .case-section-head p,
.sibirskaya-case .case-brief p,
.sibirskaya-case .case-benefit p{
opacity:1 !important;
}

.case-intro-copy,
.case-section-head p,
.case-section p,
.case-brief p,
.case-benefit p{
color:rgba(244,248,255,.88) !important;
}

.case-title span,
.case-meta-item strong,
.case-brief strong,
.case-benefit strong{
color:rgba(244,248,255,.94) !important;
font-weight:600 !important;
}

/* ---------------------------------------------------------
   МИКРОТЕКСТ: БОЛЬШЕ НИКАКИХ 6–9 PX
   --------------------------------------------------------- */

.process-kicker,
.process-step-number,
.process-step-name,
.process-visual-note,
.direction-hint,
.effect-label,
.effect-phrase,
.interaction-counter,
.case-kicker,
.case-meta-item small,
.case-image-caption,
.case-brief-label,
.ai-video-note,
.filtered-card-label small,
.book-project-bottom,
.zalip-zone-kicker,
.color-game-level,
.run-stat span,
.color-game-message,
.random-gift-caption,
.random-gift-meta{
font-weight:600 !important;
opacity:1 !important;
letter-spacing:.075em !important;
}

.process-kicker{
font-size:clamp(10px,.82vw,12px) !important;
color:rgba(183,228,255,.90) !important;
}

.process-step-number,
.process-step-name{
font-size:clamp(10px,.94vw,13px) !important;
color:rgba(244,248,255,.84) !important;
}

.process-visual-note,
.direction-hint,
.effect-label,
.effect-phrase,
.interaction-counter{
font-size:clamp(10px,.72vw,12px) !important;
color:rgba(244,248,255,.82) !important;
}

.experiment-copy{
font-size:clamp(12px,1vw,14px) !important;
line-height:1.55 !important;
color:rgba(244,248,255,.88) !important;
}

.case-kicker,
.case-meta-item small,
.case-image-caption,
.case-brief-label,
.ai-video-note{
font-size:11px !important;
color:rgba(183,228,255,.88) !important;
}

.book-project-bottom{
font-size:clamp(10px,.82vw,12px) !important;
color:rgba(244,248,255,.82) !important;
}

.zalip-zone-kicker,
.color-game-level,
.run-stat span,
.color-game-message,
.random-gift-caption,
.random-gift-meta{
font-size:10px !important;
color:rgba(244,248,255,.84) !important;
}

/* ---------------------------------------------------------
   КАРТОЧКИ ПРОЕКТОВ НА ГЛАВНОЙ
   --------------------------------------------------------- */

.project-card-lumiere-title,
.project-card-ai-title,
.project-card-sibirskaya-title,
.project-card-zalip-title,
.project-card-watch-title{
font-size:clamp(12px,1.02vw,17px) !important;
font-weight:600 !important;
color:#F4F8FF !important;
text-shadow:none !important;
filter:none !important;
will-change:auto !important;
}

.project-card-lumiere-sub,
.project-card-ai-sub,
.project-card-sibirskaya-sub,
.project-card-zalip-sub,
.project-card-watch-sub{
font-size:clamp(10px,.72vw,12px) !important;
font-weight:500 !important;
color:rgba(244,248,255,.82) !important;
opacity:1 !important;
letter-spacing:.025em !important;
text-shadow:none !important;
filter:none !important;
will-change:auto !important;
}

/* ---------------------------------------------------------
   АНИМИРУЕМЫЙ ТЕКСТ: НЕ ЛОМАЕМ СМЕНУ, НО В ПОКОЕ ОН ЧЁТКИЙ
   --------------------------------------------------------- */

.process-main-title,
.process-main-subtitle,
.hero-note-text,
.case-footer-title{
will-change:auto !important;
filter:none !important;
}

.process-main-subtitle{
font-style:normal !important;
font-size:clamp(12px,1.5vw,20px) !important;
line-height:1.38 !important;
color:rgba(244,248,255,.88) !important;
}

/* ---------------------------------------------------------
   MOBILE: НЕ СЖИМАЕМ ТЕКСТ ОБРАТНО ДО МИКРОСКОПИЧЕСКОГО
   --------------------------------------------------------- */

@media(max-width:700px){

.process-kicker,
.process-step-number,
.process-step-name,
.process-visual-note,
.direction-hint,
.effect-label,
.effect-phrase,
.interaction-counter,
.case-kicker,
.case-meta-item small,
.case-image-caption,
.case-brief-label,
.ai-video-note,
.book-project-bottom,
.zalip-zone-kicker,
.color-game-level,
.run-stat span,
.color-game-message,
.random-gift-caption,
.random-gift-meta{
font-size:10px !important;
font-weight:600 !important;
}

.experiment-copy{
font-size:11px !important;
line-height:1.48 !important;
}

.process-main-subtitle{
font-size:12px !important;
line-height:1.35 !important;
}

.project-card-lumiere-title,
.project-card-ai-title,
.project-card-sibirskaya-title,
.project-card-zalip-title,
.project-card-watch-title{
font-size:12px !important;
}

.project-card-lumiere-sub,
.project-card-ai-sub,
.project-card-sibirskaya-sub,
.project-card-zalip-sub,
.project-card-watch-sub{
font-size:10px !important;
}

}



/* =========================================================
   CRISP BUTTONS + BOTTOM TEXT
   ========================================================= */

/* ---------------------------------------------------------
   БАЗА ДЛЯ ВСЕХ ЖИВЫХ КНОПОК
   --------------------------------------------------------- */

button,
.modal-btn,
.contact-link,
.process-step,
.game-gift-button,
.case-footer-cta,
.close{
font-family:"Manrope",Arial,Helvetica,sans-serif !important;
font-weight:600 !important;
font-style:normal !important;
font-synthesis:none !important;
text-rendering:auto !important;
-webkit-font-smoothing:antialiased !important;
-moz-osx-font-smoothing:grayscale !important;
-webkit-text-stroke:0 !important;
text-shadow:none !important;
filter:none !important;
opacity:1 !important;
}

/* Не двигаем весь текстовый button-слой: это часто даёт мыло */
.process-step,
.modal-btn,
.contact-link,
.game-gift-button,
.case-footer-cta{
will-change:auto !important;
}

/* ---------------------------------------------------------
   КНОПКИ "КАК ЭТО РАБОТАЕТ"
   --------------------------------------------------------- */

.process-step{
color:rgba(244,248,255,.86) !important;
}

.process-step:hover,
.process-step.active{
color:#F4F8FF !important;
}

.process-step-number,
.process-step-name{
font-weight:600 !important;
opacity:1 !important;
text-shadow:none !important;
filter:none !important;
will-change:auto !important;
}

.process-step-name{
font-size:clamp(11px,1vw,14px) !important;
letter-spacing:.005em !important;
}

.process-step-number{
font-size:clamp(10px,.92vw,13px) !important;
}

/* scale номера при наведении делал цифры мягче */
.process-step:hover .process-step-number{
transform:none !important;
}

/* ---------------------------------------------------------
   CTA / MODAL / CONTACT / GAME
   --------------------------------------------------------- */

.modal-btn,
.case-footer-cta{
font-size:13px !important;
line-height:1.15 !important;
letter-spacing:.01em !important;
color:#F4F8FF !important;
}

.contact-link{
font-size:13px !important;
line-height:1.2 !important;
letter-spacing:.005em !important;
color:#F4F8FF !important;
}

.game-gift-button{
font-size:12px !important;
line-height:1.1 !important;
letter-spacing:.01em !important;
color:#F4F8FF !important;
}

.game-gift-button.secondary{
color:rgba(244,248,255,.90) !important;
}

.close{
font-weight:500 !important;
color:#F4F8FF !important;
}

/* Кнопку CTA больше не двигаем целиком на hover */
.case-footer-cta{
transform:none !important;
transition:
border-color .20s ease,
background .20s ease !important;
}

.case-footer-cta:hover{
transform:none !important;
box-shadow:none !important;
}

/* Sweep остаётся только декоративным фоном, текст не затрагивает */
.case-footer-cta::before{
pointer-events:none !important;
}

/* ---------------------------------------------------------
   НИЗ КЕЙСОВ — УБИРАЕМ ДВОЙНОЙ / СВЕТЯЩИЙСЯ ТЕКСТ
   --------------------------------------------------------- */

.case-footer h3,
.case-footer-title,
.case-footer-line,
.case-footer-highlight{
font-weight:500 !important;
color:#F4F8FF !important;
opacity:1 !important;
text-shadow:none !important;
filter:none !important;
transform:none !important;
will-change:auto !important;
}

.case-footer h3{
line-height:1.02 !important;
letter-spacing:-.04em !important;
}

/*
   Псевдокопия текста с градиентом была буквально вторым слоем букв
   поверх первого — визуально это и давало "мыло".
*/
.case-footer-line::after{
display:none !important;
content:none !important;
animation:none !important;
}

/* Подсвечивать можно линию/точку, но не сами буквы */
.case-footer-highlight,
.case-footer.is-visible .case-footer-highlight{
animation:none !important;
color:#F4F8FF !important;
text-shadow:none !important;
}

.case-footer-title,
.case-footer.is-visible .case-footer-title{
opacity:1 !important;
transform:none !important;
transition:none !important;
}/* ---------------------------------------------------------
   САМЫЙ НИЗ САЙТА
   footer.jpg содержит растровый текст — поверх него ставим live labels
   --------------------------------------------------------- */

.footer>img{
image-rendering:auto;
-webkit-transform:none !important;
transform:none !important;
filter:none !important;
}

/* Ссылки теперь читаются живым HTML, а не JPG-буквами */
.footer .ft-telegram,
.footer .ft-behance,
.footer .ft-instagram{
display:flex !important;
align-items:center;
justify-content:center;
line-height:1 !important;
}/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:700px){

.modal-btn,
.case-footer-cta,
.contact-link{
font-size:12px !important;
}

.game-gift-button{
font-size:11px !important;
}

.process-step-name{
font-size:11px !important;
}}



/* =========================================================
   ORIGINAL LABELS ONLY
   Никаких новых текстов поверх исходных надписей изображений.
   ========================================================= */

.h-work,
.h-talk,
.h-showreel,
.p-all,
.ft-telegram,
.ft-behance,
.ft-instagram{
font-size:0 !important;
line-height:0 !important;
color:transparent !important;
text-shadow:none !important;
}

/* Исходные JPG остаются без искусственного blur/filter/transform */
.hero > img,
.projects > img,
.footer > img{
filter:none !important;
transform:none !important;
-webkit-transform:none !important;
image-rendering:auto !important;
}

/* Живые кнопки сайта сохраняют чёткий исходный текст */
button:not(.hotspot),
.modal-btn,
.contact-link,
.process-step,
.game-gift-button,
.case-footer-cta,
.close{
font-family:"Manrope",Arial,Helvetica,sans-serif !important;
font-synthesis:none !important;
text-rendering:auto !important;
-webkit-font-smoothing:antialiased !important;
-moz-osx-font-smoothing:grayscale !important;
-webkit-text-stroke:0 !important;
text-shadow:none !important;
filter:none !important;
}



/* =========================================================
   SHARP ORIGINAL RASTER TYPOGRAPHY
   Исходные надписи остаются частью оригинального дизайна.
   Никаких масок и новых текстов поверх.
   ========================================================= */

.hero > img,
.projects > img,
.footer > img{
image-rendering:auto !important;
filter:none !important;
transform:none !important;
-webkit-transform:none !important;
backface-visibility:visible !important;
will-change:auto !important;
}

/* hotspot остаётся только кликабельной зоной и ничего не рисует */
.h-work::before,
.h-work::after,
.h-talk::before,
.h-talk::after,
.h-showreel::before,
.h-showreel::after,
.p-all::before,
.p-all::after,
.f-all::before,
.f-all::after,
.f-visual::before,
.f-visual::after,
.f-fashion::before,
.f-fashion::after,
.f-brand::before,
.f-brand::after,
.f-video::before,
.f-video::after,
.f-market::before,
.f-market::after,
.ft-telegram::before,
.ft-telegram::after,
.ft-behance::before,
.ft-behance::after,
.ft-instagram::before,
.ft-instagram::after{
content:none !important;
display:none !important;
}



/* =========================================================
   HERO CENTER + TRUE LIVE FOOTER
   ========================================================= */

/* ---------------------------------------------------------
   HERO CENTER
   Фраза уже есть внутри исходного hero-изображения.
   Живой дубль скрываем полностью — больше никакого наложения.
   --------------------------------------------------------- */

.hero-note{
display:none !important;
}

/* ---------------------------------------------------------
   FOOTER
   Больше никакого footer.jpg: вся типографика настоящая.
   --------------------------------------------------------- */

.footer.section{
position:relative;
width:100%;
height:clamp(68px,8.3008vw,160px);
min-height:68px;
overflow:hidden;

background:
radial-gradient(
ellipse at 96% 50%,
rgba(62,214,255,.030) 0%,
rgba(5,112,255,.010) 14%,
transparent 28%
),
linear-gradient(
180deg,
#020A10 0%,
#01080D 100%
) !important;

border-top:1px solid rgba(183,228,255,.025);
}

/* старого растрового слоя больше нет вообще */
.footer.section > img{
display:none !important;
}

/* ---------------------------------------------------------
   ЛОГО
   --------------------------------------------------------- */

.footer-live-brand{
position:absolute;
z-index:3;
left:4.62%;
top:50%;
transform:translateY(-50%);

display:flex;
align-items:baseline;
gap:0;

font-family:"Manrope",Arial,Helvetica,sans-serif !important;
font-size:clamp(14px,1.42vw,24px);
font-weight:500;
line-height:1;
letter-spacing:-.045em;
white-space:nowrap;

color:#F4F8FF;
text-rendering:auto;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-webkit-text-stroke:0;
text-shadow:none;
filter:none;
}

.footer-live-brand-ai{
margin-left:.02em;
font-weight:600;

background:linear-gradient(
145deg,
#B7E4FF 0%,
#3ED6FF 40%,
#0570FF 100%
);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
color:#3ED6FF;
}

/* ---------------------------------------------------------
   ПОДПИСЬ СЛЕВА
   --------------------------------------------------------- */

.footer-live-tagline{
position:absolute;
z-index:3;
left:12.48%;
top:50%;
transform:translateY(-50%);

font-family:"Manrope",Arial,Helvetica,sans-serif !important;
font-size:clamp(9px,.82vw,13px);
font-weight:500;
line-height:1;
letter-spacing:0;
white-space:nowrap;

color:rgba(244,248,255,.46);
text-rendering:auto;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-webkit-text-stroke:0;
text-shadow:none;
filter:none;
}

/* ---------------------------------------------------------
   СОЦСЕТИ
   Используем те же ссылки, которые уже были hotspot'ами,
   но теперь это и есть видимый текст — не слой поверх JPG.
   --------------------------------------------------------- */

.footer .ft-telegram,
.footer .ft-behance,
.footer .ft-instagram{
position:absolute !important;
z-index:4 !important;
top:50% !important;
height:auto !important;
width:auto !important;
transform:translateY(-50%) !important;

display:block !important;
padding:4px 2px !important;

font-family:"Manrope",Arial,Helvetica,sans-serif !important;
font-size:clamp(9px,.82vw,13px) !important;
font-weight:500 !important;
font-style:normal !important;
line-height:1 !important;
letter-spacing:0 !important;
white-space:nowrap !important;

color:rgba(244,248,255,.64) !important;
opacity:1 !important;
text-decoration:none !important;

text-rendering:auto !important;
-webkit-font-smoothing:antialiased !important;
-moz-osx-font-smoothing:grayscale !important;
-webkit-text-stroke:0 !important;
text-shadow:none !important;
filter:none !important;
will-change:auto !important;

transition:color .18s ease !important;
}

.footer .ft-telegram{
left:73.75% !important;
}

.footer .ft-behance{
left:80.46% !important;
}

.footer .ft-instagram{
left:86.62% !important;
}

.footer .ft-telegram:hover,
.footer .ft-behance:hover,
.footer .ft-instagram:hover{
color:#F4F8FF !important;
}

/* ---------------------------------------------------------
   ТОЧКА СПРАВА
   --------------------------------------------------------- */

.footer-live-dot{
position:absolute;
z-index:3;
right:4.63%;
top:50%;
width:6px;
height:6px;
transform:translateY(-50%);
border-radius:50%;
background:#F4F8FF;
}

/* ---------------------------------------------------------
   УБИРАЕМ СТАРЫЕ hotspot-настройки, которые делали ссылки
   огромными невидимыми прямоугольниками.
   --------------------------------------------------------- */

.footer .hotspot.ft-telegram,
.footer .hotspot.ft-behance,
.footer .hotspot.ft-instagram{
bottom:auto !important;
right:auto !important;
background:none !important;
border:0 !important;
}

/* ---------------------------------------------------------
   MOBILE
   На узком экране сохраняем тот же характер, но не микротекст.
   --------------------------------------------------------- */

@media(max-width:700px){

.footer.section{
height:82px;
min-height:82px;
}

.footer-live-brand{
left:5%;
top:34%;
font-size:15px;
}

.footer-live-tagline{
left:5%;
top:66%;
font-size:9px;
}

.footer .ft-telegram,
.footer .ft-behance,
.footer .ft-instagram{
top:50% !important;
font-size:9px !important;
}

.footer .ft-telegram{
left:auto !important;
right:26% !important;
}

.footer .ft-behance{
display:none !important;
}

.footer .ft-instagram{
left:auto !important;
right:10% !important;
}

.footer-live-dot{
display:none;
}

}



/* =========================================================
   HERO HANDWRITTEN ROTATING TEXT — RESTORED
   Старая фраза удалена из hero JPG.
   Здесь остаётся только один живой меняющийся текст.
   ========================================================= */

.hero-note{
display:flex !important;
position:absolute !important;
z-index:24 !important;
left:29% !important;
top:1.15% !important;
width:42% !important;
height:11% !important;
align-items:center !important;
justify-content:center !important;
overflow:visible !important;
pointer-events:none !important;
}

.hero-note-text.handwritten{
position:absolute !important;
left:0 !important;
top:50% !important;
width:100% !important;
max-width:100% !important;
padding:0 4px !important;
margin:0 !important;

transform:translateY(-50%) !important;

font-family:
"Segoe Print",
"Segoe Script",
"Bradley Hand",
"Comic Sans MS",
cursive !important;

font-style:normal !important;
font-weight:400 !important;
font-size:clamp(14px,1.48vw,22px) !important;
line-height:1.08 !important;
letter-spacing:-.035em !important;

text-align:center !important;
white-space:nowrap !important;
overflow:visible !important;
text-overflow:clip !important;

color:rgba(244,248,255,.94) !important;
opacity:1;
text-shadow:none !important;
filter:none !important;
-webkit-text-stroke:0 !important;
will-change:opacity,transform;
transition:
opacity .42s ease,
transform .42s ease !important;
}

.hero-note-text.handwritten.hide{
opacity:0 !important;
transform:translateY(calc(-50% - 7px)) !important;
}

/* На мобильном фраза остаётся в одну строку и не лезет в кнопки */
@media(max-width:700px){

.hero-note{
left:20% !important;
top:.7% !important;
width:60% !important;
height:11% !important;
}

.hero-note-text.handwritten{
font-size:clamp(11px,3.1vw,16px) !important;
letter-spacing:-.03em !important;
}

}




/* =========================================================
   PRODUCTION STABILITY FIXES
   ========================================================= */

/* Cross-platform handwriting. No OS-dependent Segoe Print fallback. */
.handwritten,
.hand-note,
.hero-note-text.handwritten,
.process-main-subtitle.handwritten{
  font-family:"Caveat","Segoe Print","Segoe Script",cursive !important;
  font-style:normal !important;
  font-weight:500 !important;
  text-shadow:none !important;
  -webkit-text-stroke:0 !important;
  filter:none !important;
}

/* Keep the live UI crisp. */
.process-left-title,
.process-step-name,
.process-step-number,
.process-kicker,
.process-main-title,
.process-visual-number,
.process-visual-note,
.experiment-title h2,
.experiment-copy,
.effect-label,
.effect-value,
.effect-phrase,
.interaction-counter,
.footer-live-brand,
.footer-live-tagline,
.footer .ft-telegram,
.footer .ft-behance,
.footer .ft-instagram{
  font-family:"Manrope",Arial,Helvetica,sans-serif !important;
  font-style:normal !important;
  font-synthesis:none !important;
  text-rendering:auto !important;
  -webkit-font-smoothing:antialiased !important;
  -moz-osx-font-smoothing:grayscale !important;
  -webkit-text-stroke:0 !important;
  text-shadow:none !important;
  filter:none !important;
}

.process-left-title,
.process-step-name,
.process-step-number,
.process-kicker,
.process-main-title,
.process-visual-number,
.process-visual-note,
.experiment-title h2,
.experiment-copy,
.effect-label,
.effect-value,
.interaction-counter{
  font-weight:500 !important;
}

.process-step{ color:rgba(244,248,255,.68) !important; }
.process-step:hover,
.process-step.active{ color:#F4F8FF !important; }
.experiment-copy{ color:rgba(244,248,255,.84) !important; }

/* ---------------------------------------------------------
   EXPERIMENT
   The old base JPG contains obsolete text. Mask only that
   raster text. Live text stays above it; directional states
   remain clean and render above the mask.
   --------------------------------------------------------- */
.experiment-stack::after{
  content:"";
  position:absolute;
  z-index:2;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      #020A12 0%,
      #020A12 33%,
      rgba(2,10,18,.92) 37%,
      rgba(2,10,18,.28) 43%,
      rgba(2,10,18,0) 47%,
      rgba(2,10,18,0) 66%,
      rgba(2,10,18,.35) 71%,
      rgba(2,10,18,.94) 77%,
      #020A12 82%,
      #020A12 100%
    );
}
.experiment-state{ z-index:3 !important; }
.orb-reactor{ z-index:4 !important; }
.experiment-title,
.experiment-copy,
.effect-panel{ z-index:12 !important; }
.effect-panel{ top:68% !important; }

/* The experiment block must contain no extra handwritten text. */
#experiment .handwritten,
#experiment .hand-note{ display:none !important; }

/* ---------------------------------------------------------
   FOOTER
   Use full-height flex alignment instead of translated text.
   This avoids subpixel blur and keeps the baseline stable.
   --------------------------------------------------------- */
.footer-live-brand,
.footer-live-tagline,
.footer .ft-telegram,
.footer .ft-behance,
.footer .ft-instagram{
  top:0 !important;
  height:100% !important;
  transform:none !important;
  display:flex !important;
  align-items:center !important;
}
.footer-live-brand{
  font-size:clamp(16px,1.5vw,24px) !important;
  font-weight:500 !important;
}
.footer-live-tagline{
  font-size:clamp(10px,.9vw,14px) !important;
  font-weight:500 !important;
  color:rgba(244,248,255,.62) !important;
}
.footer .ft-telegram,
.footer .ft-behance,
.footer .ft-instagram{
  font-size:clamp(10px,.88vw,14px) !important;
  font-weight:500 !important;
  color:rgba(244,248,255,.76) !important;
  padding:0 2px !important;
}
.footer-live-dot{
  top:50% !important;
  transform:translateY(-50%) !important;
}

/* Reserve geometry before external assets finish loading. */
#top{ aspect-ratio:1024/372; }
#projects{ aspect-ratio:1024/423; }
#process{ aspect-ratio:1024/261; }
#experiment{ aspect-ratio:1024/189; }
#finalSection{ aspect-ratio:1024/206; }

/* Desktop/tablet composition remains the reference design. */
.site{ width:100%; }



@media(max-width:700px){
  /* Keep the original composition, but scale every live layer to the same visual ratio as the raster design. */
  .hero-note{
    left:20% !important;
    top:.7% !important;
    width:60% !important;
    height:11% !important;
  }
  .hero-note-text.handwritten{
    font-size:7px !important;
    line-height:1 !important;
    letter-spacing:-.02em !important;
    white-space:nowrap !important;
  }

  /* Projects: stop live captions from growing larger than the cards. */
  .project-card-lumiere-title,
  .project-card-ai-title,
  .project-card-sibirskaya-title,
  .project-card-zalip-title,
  .project-card-watch-title{
    font-size:7px !important;
    line-height:1.05 !important;
    font-weight:600 !important;
  }
  .project-card-lumiere-sub,
  .project-card-ai-sub,
  .project-card-sibirskaya-sub,
  .project-card-zalip-sub,
  .project-card-watch-sub{
    margin-top:1px !important;
    font-size:5.5px !important;
    line-height:1.05 !important;
    opacity:.82 !important;
  }
  .project-card-lumiere-arrow,
  .project-card-ai-arrow,
  .project-card-sibirskaya-arrow,
  .project-card-zalip-arrow,
  .project-card-watch-arrow{
    width:14px !important;
    font-size:5px !important;
  }

  /* Process: the section is only ~99px high at 390px, so all live UI must scale with it. */
  .process-ui{ grid-template-columns:34% 66% !important; }
  .process-left{
    padding:5px 4px 4px 8px !important;
  }
  .process-left-title{
    margin:0 0 4px !important;
    font-size:12px !important;
    line-height:.95 !important;
    letter-spacing:-.035em !important;
  }
  .process-steps{
    gap:0 !important;
  }
  .process-step{
    min-height:13px !important;
    grid-template-columns:18px minmax(0,1fr) !important;
    gap:2px !important;
  }
  .process-step-number,
  .process-step-name{
    font-size:6px !important;
    line-height:1 !important;
    letter-spacing:0 !important;
  }
  .process-step-number{
    width:15px !important;
    height:15px !important;
    min-width:15px !important;
  }
  .process-center{ padding:4px !important; }
  .process-visual{
    border-radius:10px 3px 10px 3px !important;
  }
  .process-content{
    left:7% !important;
    width:48% !important;
  }
  .process-kicker{
    font-size:5px !important;
    line-height:1 !important;
    letter-spacing:.05em !important;
  }
  .process-main-title{
    margin-top:3px !important;
    font-size:14px !important;
    line-height:.95 !important;
    letter-spacing:-.04em !important;
  }
  .process-main-subtitle.handwritten{
    margin-top:3px !important;
    font-size:7px !important;
    line-height:1.05 !important;
    padding:0 !important;
  }
  .process-visual-number{
    font-size:34px !important;
    line-height:.8 !important;
  }
  .process-visual-note{
    font-size:5px !important;
    line-height:1 !important;
    letter-spacing:.04em !important;
  }

  /* Experiment: remove old raster copy and keep the live interface readable without collisions. */
  .experiment-title{
    left:4% !important;
    top:23% !important;
    width:31% !important;
  }
  .experiment-title h2{
    font-size:16px !important;
    line-height:.95 !important;
    letter-spacing:-.045em !important;
  }
  .experiment-copy{
    right:4% !important;
    top:22% !important;
    width:22% !important;
    font-size:5.5px !important;
    line-height:1.32 !important;
    letter-spacing:0 !important;
  }
  .effect-panel{
    right:4% !important;
    top:66% !important;
    width:22% !important;
  }
  .effect-label,
  .effect-phrase,
  .interaction-counter{
    font-size:4.5px !important;
    line-height:1 !important;
    letter-spacing:.02em !important;
  }
  .effect-value{
    font-size:7px !important;
    line-height:1 !important;
  }
  .effect-track{ height:1px !important; margin-top:2px !important; }
  .effect-meta{ margin-top:2px !important; }
  .direction-hints{ display:none !important; }

  /* Final decorative handwritten note must scale with the raster section too. */
  .hand-note--final-clean{
    right:5% !important;
    bottom:7% !important;
    width:100px !important;
    max-width:26vw !important;
    font-size:6px !important;
    line-height:1 !important;
  }

  /* Footer: real text, stable positions, no translated/blurry layers. */
  .footer.section{
    height:72px !important;
    min-height:72px !important;
  }
  .footer-live-brand{
    left:5% !important;
    top:13px !important;
    height:22px !important;
    transform:none !important;
    font-size:14px !important;
  }
  .footer-live-tagline{
    left:5% !important;
    top:34px !important;
    height:18px !important;
    transform:none !important;
    font-size:8px !important;
  }
  .footer .ft-telegram,
  .footer .ft-behance,
  .footer .ft-instagram{
    top:0 !important;
    height:72px !important;
    transform:none !important;
    font-size:8px !important;
    display:flex !important;
    align-items:center !important;
  }
  .footer .ft-telegram{ left:auto !important; right:29% !important; }
  .footer .ft-behance{ left:auto !important; right:17% !important; }
  .footer .ft-instagram{ left:auto !important; right:5% !important; }
  .footer-live-dot{ display:none !important; }
}

/* =========================================================
   FINAL MOBILE FOOTER POSITION FIX
   Higher specificity than the legacy hotspot rules.
   ========================================================= */
@media(max-width:700px){
  footer.footer.section a.hotspot.ft-telegram,
  footer.footer.section a.hotspot.ft-behance,
  footer.footer.section a.hotspot.ft-instagram{
    position:absolute !important;
    left:auto !important;
    right:auto !important;
    top:0 !important;
    bottom:auto !important;
    width:max-content !important;
    height:72px !important;
    min-width:0 !important;
    padding:0 1px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    transform:none !important;
    background:none !important;
    border:0 !important;
  }
  footer.footer.section a.hotspot.ft-telegram{ right:29% !important; }
  footer.footer.section a.hotspot.ft-behance{ right:17% !important; }
  footer.footer.section a.hotspot.ft-instagram{ right:5% !important; }
}



/* =========================================================
   FINAL MOBILE PRODUCTION LAYOUT
   Desktop remains unchanged. Mobile is a real layout, not a scaled raster.
   ========================================================= */
.mobile-hero-ui,
.projects-mobile-head,
.mobile-experiment-head,
.mobile-direction-controls,
.mobile-final-ui{display:none;}
.mobile-project-grid{display:contents;}
.mobile-fashion-image,.mobile-fashion-copy,.mobile-fashion-arrow{display:none;}
.footer-socials{display:contents;}

.footer a[aria-disabled="true"]{cursor:default;opacity:.42 !important;pointer-events:none;}

@media(max-width:700px){
  html,body{background:#020A12 !important;}
  body{overflow-x:hidden !important;}
  .site{width:100% !important; overflow:hidden !important;}

  /* ---------- HERO ---------- */
  .hero{
    height:650px !important;
    min-height:650px !important;
    overflow:hidden !important;
    background:#020A12 !important;
  }
  .hero>img{
    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:64% 50% !important;
    transform:none !important;
    animation:none !important;
  }
  .hero::after{
    content:"";
    position:absolute;
    z-index:8;
    inset:0;
    pointer-events:none;
    background:
      linear-gradient(180deg,rgba(2,10,18,.26) 0%,rgba(2,10,18,.03) 34%,rgba(2,10,18,.18) 58%,rgba(2,10,18,.94) 100%),
      linear-gradient(90deg,rgba(2,10,18,.62) 0%,rgba(2,10,18,.12) 45%,transparent 78%);
  }
  .hero-life{z-index:5 !important; opacity:.65;}
  .hero-face-glow{left:27% !important;top:7% !important;width:68% !important;height:67% !important;}
  .hero-hair-light,.hero-jacket-sheen,.hero-atmosphere,.hero-particle,.hero-cursor-light{display:none !important;}
  .hero .h-work,.hero .h-talk,.hero .h-showreel{display:none !important;}

  .mobile-hero-ui{
    position:absolute;
    z-index:20;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:20px 18px 24px;
    line-height:1.2;
    pointer-events:none;
  }
  .mobile-hero-ui button,.mobile-hero-ui a{pointer-events:auto;}
  .mobile-hero-top{display:flex;align-items:center;justify-content:space-between;gap:12px;}
  .mobile-hero-brand{
    font:600 19px/1 "Manrope",sans-serif;
    letter-spacing:-.045em;
    color:#F4F8FF;
  }
  .mobile-hero-brand span{
    color:#3ED6FF;
    background:linear-gradient(135deg,#B7E4FF,#3ED6FF 52%,#0570FF);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  }
  .mobile-hero-contact{
    min-height:38px;
    padding:0 15px;
    border:1px solid rgba(244,248,255,.45);
    border-radius:999px;
    background:rgba(2,10,18,.20);
    color:#F4F8FF;
    font:600 11px/1 "Manrope",sans-serif !important;
  }
  .mobile-hero-main{margin-top:auto;margin-bottom:24px;max-width:330px;}
  .mobile-hero-main h1{
    margin:0;
    color:#F4F8FF;
    font:500 clamp(44px,13.6vw,60px)/.92 "Manrope",sans-serif !important;
    letter-spacing:-.065em;
  }
  .mobile-hero-main p{
    margin:18px 0 0;
    color:rgba(244,248,255,.68) !important;
    font:600 10px/1.55 "Manrope",sans-serif !important;
    letter-spacing:.14em;
    text-transform:uppercase;
  }
  .mobile-hero-actions{display:flex;gap:9px;align-items:center;}
  .mobile-hero-actions a,.mobile-hero-actions button{
    min-height:42px;
    padding:0 14px;
    display:inline-flex;align-items:center;justify-content:center;
    border-radius:999px;
    font:600 11px/1 "Manrope",sans-serif !important;
    text-decoration:none;
  }
  .mobile-hero-actions a{background:#F4F8FF;color:#06101c;}
  .mobile-hero-actions button{border:1px solid rgba(244,248,255,.35);background:rgba(2,10,18,.30);color:#F4F8FF;}
  .hero-note{
    z-index:21 !important;
    left:18px !important;
    top:72px !important;
    width:calc(100% - 36px) !important;
    height:34px !important;
    justify-content:flex-start !important;
  }
  .hero-note-text.handwritten{
    position:relative !important;
    top:auto !important;left:auto !important;
    width:auto !important;
    padding:0 !important;
    transform:none !important;
    text-align:left !important;
    white-space:nowrap !important;
    font:500 20px/1 "Caveat",cursive !important;
    letter-spacing:0 !important;
    color:rgba(244,248,255,.9) !important;
  }
  .hero-note-text.handwritten.hide{opacity:0 !important;transform:translateY(-5px) !important;}

  /* ---------- PROJECTS ---------- */
  .projects{
    padding:42px 16px 52px !important;
    background:
      radial-gradient(circle at 86% 7%,rgba(5,112,255,.12),transparent 24%),
      #020A12 !important;
    line-height:1.2 !important;
    overflow:visible !important;
  }
  .projects>img,.projects>.p-all,.projects>.filter,.filter-static-cover,.filter-active,.project-filter-view{display:none !important;}
  .projects-mobile-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:18px;
    margin-bottom:22px;
  }
  .projects-mobile-head small{
    display:block;margin-bottom:7px;color:rgba(62,214,255,.72);
    font:600 9px/1 "Manrope",sans-serif;letter-spacing:.16em;
  }
  .projects-mobile-head h2{
    margin:0;color:#F4F8FF;
    font:500 35px/.94 "Manrope",sans-serif !important;
    letter-spacing:-.055em;
  }
  .projects-mobile-head button{
    flex:0 0 auto;
    padding:0 0 5px;
    border:0;border-bottom:1px solid rgba(244,248,255,.45);
    background:transparent;color:#F4F8FF;
    font:600 10px/1 "Manrope",sans-serif !important;
  }
  .mobile-project-grid{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .mobile-project-grid>.card{
    position:relative !important;
    left:auto !important;right:auto !important;top:auto !important;bottom:auto !important;
    width:100% !important;height:auto !important;
    aspect-ratio:.88 !important;
    border:1px solid rgba(183,228,255,.18) !important;
    border-radius:14px 5px 14px 5px !important;
    overflow:hidden !important;
    background:#04101b !important;
  }
  .mobile-project-grid>.c-lumiere,
  .mobile-project-grid>.c-tech{
    grid-column:1/-1;
    aspect-ratio:1.58 !important;
  }
  .mobile-project-grid .project-card-image{
    position:absolute !important;inset:0 !important;
    width:100% !important;height:100% !important;
    object-fit:cover !important;
  }
  .mobile-project-grid .project-card-lumiere-copy,
  .mobile-project-grid .project-card-ai-copy,
  .mobile-project-grid .project-card-sibirskaya-copy,
  .mobile-project-grid .project-card-zalip-copy,
  .mobile-project-grid .project-card-watch-copy,
  .mobile-fashion-copy{
    left:12px !important;right:44px !important;bottom:12px !important;
  }
  .mobile-project-grid .project-card-lumiere-title,
  .mobile-project-grid .project-card-ai-title,
  .mobile-project-grid .project-card-sibirskaya-title,
  .mobile-project-grid .project-card-zalip-title,
  .mobile-project-grid .project-card-watch-title,
  .mobile-fashion-copy strong{
    font-size:12px !important;font-weight:650 !important;line-height:1.08 !important;
  }
  .mobile-project-grid .project-card-lumiere-sub,
  .mobile-project-grid .project-card-ai-sub,
  .mobile-project-grid .project-card-sibirskaya-sub,
  .mobile-project-grid .project-card-zalip-sub,
  .mobile-project-grid .project-card-watch-sub,
  .mobile-fashion-copy span{
    margin-top:4px !important;font-size:9px !important;line-height:1.1 !important;color:rgba(244,248,255,.72) !important;
  }
  .mobile-project-grid .project-card-lumiere-arrow,
  .mobile-project-grid .project-card-ai-arrow,
  .mobile-project-grid .project-card-sibirskaya-arrow,
  .mobile-project-grid .project-card-zalip-arrow,
  .mobile-project-grid .project-card-watch-arrow,
  .mobile-fashion-arrow{
    right:12px !important;bottom:12px !important;width:26px !important;height:26px !important;font-size:10px !important;
  }
  .mobile-fashion-image,.mobile-fashion-copy,.mobile-fashion-arrow{display:block !important;}
  .mobile-fashion-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
  .c-fashion::before{content:"";position:absolute;z-index:2;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(1,5,9,.92) 100%);}
  .mobile-fashion-copy{position:absolute;z-index:4;color:#F4F8FF;pointer-events:none;}
  .mobile-fashion-copy strong,.mobile-fashion-copy span{display:block;}
  .mobile-fashion-arrow{position:absolute;z-index:4;display:grid !important;place-items:center;border:1px solid rgba(244,248,255,.58);border-radius:50%;color:#F4F8FF;pointer-events:none;}

  /* ---------- PROCESS ---------- */
  .process{
    padding:44px 16px 52px !important;
    min-height:0 !important;
    background:
      radial-gradient(circle at 82% 58%,rgba(5,112,255,.10),transparent 28%),
      linear-gradient(180deg,#020A12,#04111D 56%,#020A12) !important;
    line-height:1.2 !important;
  }
  .process>img{display:none !important;}
  .process-ui{position:relative !important;inset:auto !important;display:block !important;}
  .process-left{padding:0 !important;border:0 !important;}
  .process-left-title{
    margin:0 0 22px !important;
    font:500 36px/.94 "Manrope",sans-serif !important;
    letter-spacing:-.055em !important;
  }
  .process-steps{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:6px !important;
    margin-bottom:16px;
  }
  .process-step{
    min-height:72px !important;
    display:flex !important;flex-direction:column;align-items:flex-start;justify-content:center;
    gap:7px !important;padding:8px 8px !important;
    border:1px solid rgba(183,228,255,.12) !important;
    border-radius:12px 4px 12px 4px;
    background:rgba(7,23,38,.55) !important;
  }
  .process-step.active{border-color:rgba(62,214,255,.46) !important;background:rgba(5,112,255,.09) !important;}
  .process-step-number{width:26px !important;height:26px !important;font-size:9px !important;}
  .process-step-name{font-size:9px !important;white-space:normal !important;line-height:1.1 !important;}
  .process-center{height:360px !important;padding:0 !important;overflow:visible !important;}
  .process-center::before{left:auto !important;right:-18% !important;top:48% !important;width:84% !important;opacity:.7;}
  .process-center::after{display:none !important;}
  .process-visual{border-radius:24px 7px 24px 7px !important;}
  .process-content{
    left:20px !important;right:auto !important;width:68% !important;
    top:0 !important;bottom:0 !important;height:max-content !important;margin:auto 0 !important;
  }
  .process-kicker{font-size:9px !important;margin-bottom:12px !important;letter-spacing:.14em !important;}
  .process-main-title{font-size:38px !important;line-height:.92 !important;letter-spacing:-.06em !important;}
  .process-main-subtitle.handwritten{font:500 20px/1.08 "Caveat",cursive !important;margin-top:14px !important;max-width:100% !important;color:rgba(244,248,255,.82) !important;}
  .process-visual-bg::before{left:70% !important;width:260px !important;}
  .process-visual-bg::after{left:70% !important;width:310px !important;}
  .process-visual-number{right:16px !important;top:18px !important;font-size:62px !important;}
  .process-visual-note{right:16px !important;bottom:16px !important;font-size:8px !important;}

  /* ---------- EXPERIMENT ---------- */
  .experiment{
    min-height:0 !important;
    padding:44px 16px 48px !important;
    display:flex !important;
    flex-direction:column;
    gap:16px;
    cursor:auto !important;
    touch-action:pan-y !important;
    contain:none !important;
    line-height:1.2 !important;
    background:
      radial-gradient(circle at 50% 45%,rgba(5,112,255,.10),transparent 28%),
      #020A12 !important;
  }
  .mobile-experiment-head{display:block !important;order:1;}
  .mobile-experiment-head small{display:block;margin-bottom:8px;color:rgba(62,214,255,.74);font:600 9px/1 "Manrope",sans-serif;letter-spacing:.16em;}
  .mobile-experiment-head h2{margin:0;color:#F4F8FF;font:500 38px/.92 "Manrope",sans-serif !important;letter-spacing:-.055em;}
  .mobile-experiment-head p{max-width:330px;margin:14px 0 0;color:rgba(244,248,255,.68) !important;font:500 12px/1.5 "Manrope",sans-serif !important;}
  .experiment-stack{
    order:2;
    height:310px !important;
    border:1px solid rgba(183,228,255,.13);
    border-radius:24px 7px 24px 7px;
    overflow:hidden;
    background:#04101b;
  }
  .experiment-image,.experiment-state{
    position:absolute !important;inset:0 !important;
    width:100% !important;height:100% !important;
    object-fit:cover !important;object-position:50% 50% !important;
  }
  .experiment-image{z-index:1 !important;}
  .experiment-state{z-index:3 !important;}
  .mobile-direction-controls{
    order:3;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .mobile-direction-controls button{
    min-height:44px;padding:0 12px;
    border:1px solid rgba(183,228,255,.16);
    border-radius:12px 4px 12px 4px;
    background:rgba(7,23,38,.78);
    color:#F4F8FF;
    font:600 10px/1 "Manrope",sans-serif !important;
  }
  .mobile-direction-controls button:active{background:rgba(5,112,255,.16);border-color:rgba(62,214,255,.48);}
  .experiment-title,.experiment-copy,.direction-hints,.experiment-ghostword,.orb-reactor,.plasma-anchor,.plasma-pulse{display:none !important;}
  .effect-panel{
    order:4;
    position:relative !important;
    right:auto !important;left:auto !important;top:auto !important;bottom:auto !important;
    width:100% !important;
    padding:13px 14px;
    border:1px solid rgba(183,228,255,.11);
    border-radius:14px 5px 14px 5px;
    background:rgba(7,23,38,.55);
  }
  .effect-label,.effect-phrase,.interaction-counter{font-size:9px !important;}
  .effect-value{font-size:18px !important;}
  .effect-track{height:2px !important;margin-top:8px !important;}
  .effect-meta{margin-top:9px !important;}

  /* ---------- FINAL ---------- */
  .final{
    height:520px !important;
    min-height:520px !important;
    overflow:hidden !important;
    background:#020A12 !important;
  }
  .final>img{
    position:absolute !important;inset:0 !important;
    width:100% !important;height:100% !important;
    object-fit:cover !important;object-position:50% 50% !important;
  }
  .final::after{
    content:"";position:absolute;z-index:5;inset:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(2,10,18,.18),rgba(2,10,18,.10) 42%,rgba(2,10,18,.86) 100%),linear-gradient(90deg,rgba(2,10,18,.72),transparent 72%);
  }
  .final-particle-field,.final-talk,.hand-note--final-clean{display:none !important;}
  .mobile-final-ui{
    position:absolute;z-index:12;inset:0;
    display:flex !important;flex-direction:column;justify-content:flex-end;align-items:flex-start;
    padding:34px 20px 28px;
    line-height:1.2;
  }
  .mobile-final-ui small{display:block;margin-bottom:10px;color:rgba(62,214,255,.74);font:600 9px/1 "Manrope",sans-serif;letter-spacing:.16em;}
  .mobile-final-ui h2{margin:0;color:#F4F8FF;font:500 38px/.94 "Manrope",sans-serif !important;letter-spacing:-.055em;}
  .mobile-final-ui p{max-width:315px;margin:15px 0 19px;color:rgba(244,248,255,.72) !important;font:500 12px/1.5 "Manrope",sans-serif !important;}
  .mobile-final-ui button{min-height:44px;padding:0 17px;border:1px solid rgba(244,248,255,.46);border-radius:999px;background:rgba(2,10,18,.28);color:#F4F8FF;font:600 11px/1 "Manrope",sans-serif !important;}
  .mobile-final-ui>span{margin-top:22px;color:rgba(183,228,255,.8);font:500 18px/1 "Caveat",cursive;}

  /* ---------- FOOTER ---------- */
  footer.footer.section{
    height:auto !important;
    min-height:0 !important;
    padding:27px 20px 30px !important;
    display:block !important;
    line-height:1.2 !important;
  }
  footer.footer.section .footer-live-brand,
  footer.footer.section .footer-live-tagline{
    position:static !important;
    width:auto !important;height:auto !important;
    transform:none !important;
  }
  footer.footer.section .footer-live-brand{font-size:17px !important;}
  footer.footer.section .footer-live-tagline{margin-top:7px !important;font-size:10px !important;color:rgba(244,248,255,.47) !important;}
  .footer-socials{
    display:flex !important;
    align-items:center;
    gap:22px;
    margin-top:24px;
  }
  footer.footer.section .footer-socials a.hotspot{
    position:static !important;
    width:auto !important;height:auto !important;min-width:0 !important;
    padding:0 !important;margin:0 !important;
    display:inline-flex !important;
    font-size:10px !important;
    transform:none !important;
    color:rgba(244,248,255,.72) !important;
    background:none !important;box-shadow:none !important;
  }
  footer.footer.section .footer-live-dot{display:none !important;}

  /* Modals: viewport-safe on phones. */
  .drawer{width:100% !important;max-width:none !important;padding:72px 22px 28px !important;}
  .modal{width:calc(100% - 24px) !important;}
}

@media(max-width:380px){
  .hero{height:610px !important;min-height:610px !important;}
  .mobile-hero-main h1{font-size:43px !important;}
  .mobile-project-grid{grid-template-columns:1fr !important;}
  .mobile-project-grid>.c-lumiere,.mobile-project-grid>.c-tech{grid-column:auto !important;aspect-ratio:1.25 !important;}
  .mobile-project-grid>.card{aspect-ratio:1.08 !important;}
  .process-steps{grid-template-columns:repeat(2,1fr) !important;}
  .process-center{height:350px !important;}
}



/* =========================================================
   MOBILE V2 HARD FIX — 360–700 px
   Desktop untouched. Phone layout is independent from raster desktop layout.
   ========================================================= */
@media (max-width:700px){
  *{box-sizing:border-box;}
  html,body{width:100%;max-width:100%;min-width:0!important;overflow-x:hidden!important;background:#020A12!important;}
  body{margin:0!important;}
  .site,.section{width:100%!important;max-width:100%!important;min-width:0!important;}
  img,video,iframe{max-width:100%;}

  /* ---------- INTRO: lightweight mobile ---------- */
  .site-intro__content{padding:0 22px!important;}
  .site-intro__brand{font-size:clamp(34px,10vw,48px)!important;}
  .site-intro__brand-bg::before{width:520px!important;height:520px!important;}
  .site-intro__beam{opacity:.45!important;}
  .site-intro__spark:nth-of-type(n+3){display:none!important;}

  /* ---------- HERO: crop to portrait, never scale full desktop canvas ---------- */
  .hero{
    position:relative!important;
    height:720px!important;
    min-height:720px!important;
    padding:0!important;
    overflow:hidden!important;
    background:
      linear-gradient(180deg,rgba(1,7,12,.05) 0%,rgba(1,7,12,.07) 42%,rgba(1,7,12,.82) 78%,#020A12 100%),
      linear-gradient(90deg,rgba(1,7,12,.38) 0%,rgba(1,7,12,.02) 62%),
      url('/assets/hero.jpg') 63% 50% / auto 100% no-repeat!important;
  }
  .hero>img{display:none!important;}
  .hero::after{display:none!important;}
  .hero-life{display:none!important;}
  .hero .h-work,.hero .h-talk,.hero .h-showreel{display:none!important;}
  .mobile-hero-ui{
    display:flex!important;position:absolute!important;z-index:20!important;inset:0!important;
    flex-direction:column!important;padding:22px 18px 26px!important;pointer-events:none!important;
  }
  .mobile-hero-ui a,.mobile-hero-ui button{pointer-events:auto!important;}
  .mobile-hero-top{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;}
  .mobile-hero-brand{font:600 20px/1 Manrope,sans-serif!important;letter-spacing:-.045em!important;color:#F4F8FF!important;}
  .mobile-hero-brand span{background:linear-gradient(135deg,#B7E4FF,#3ED6FF 52%,#0570FF);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
  .mobile-hero-contact{height:40px!important;padding:0 16px!important;border:1px solid rgba(244,248,255,.48)!important;border-radius:999px!important;background:rgba(1,7,12,.18)!important;color:#F4F8FF!important;font:600 11px/1 Manrope,sans-serif!important;}
  .mobile-hero-main{margin-top:auto!important;margin-bottom:28px!important;max-width:350px!important;}
  .mobile-hero-main h1{margin:0!important;font:500 clamp(48px,14.5vw,64px)/.90 Manrope,sans-serif!important;letter-spacing:-.068em!important;color:#F4F8FF!important;}
  .mobile-hero-main p{margin:18px 0 0!important;font:600 10px/1.55 Manrope,sans-serif!important;letter-spacing:.13em!important;text-transform:uppercase!important;color:rgba(244,248,255,.74)!important;}
  .mobile-hero-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;}
  .mobile-hero-actions a,.mobile-hero-actions button{height:46px!important;padding:0 14px!important;border-radius:999px!important;font:600 11px/1 Manrope,sans-serif!important;text-decoration:none!important;display:flex!important;align-items:center!important;justify-content:center!important;}
  .mobile-hero-actions a{background:#F4F8FF!important;color:#06101C!important;}
  .mobile-hero-actions button{background:rgba(2,10,18,.28)!important;color:#F4F8FF!important;border:1px solid rgba(244,248,255,.34)!important;}
  .hero-note{display:flex!important;left:18px!important;top:74px!important;width:calc(100% - 36px)!important;height:38px!important;justify-content:flex-start!important;z-index:22!important;}
  .hero-note-text.handwritten{position:static!important;width:auto!important;transform:none!important;padding:0!important;text-align:left!important;white-space:nowrap!important;font:500 21px/1 Caveat,cursive!important;letter-spacing:0!important;color:rgba(244,248,255,.90)!important;}
  .hero-note-text.handwritten.hide{transform:translateY(-5px)!important;opacity:0!important;}

  /* ---------- PROJECTS: one readable card per row ---------- */
  .projects{padding:54px 16px 62px!important;background:radial-gradient(circle at 92% 4%,rgba(5,112,255,.13),transparent 23%),#020A12!important;overflow:visible!important;}
  .projects>img,.projects>.p-all,.projects>.filter,.filter-static-cover,.filter-active,.project-filter-view{display:none!important;}
  .projects-mobile-head{display:flex!important;align-items:flex-end!important;justify-content:space-between!important;gap:12px!important;margin:0 0 24px!important;}
  .projects-mobile-head small{font:600 9px/1 Manrope,sans-serif!important;letter-spacing:.16em!important;color:rgba(62,214,255,.78)!important;margin:0 0 8px!important;display:block!important;}
  .projects-mobile-head h2{margin:0!important;font:500 40px/.92 Manrope,sans-serif!important;letter-spacing:-.06em!important;color:#F4F8FF!important;}
  .projects-mobile-head button{border:0!important;border-bottom:1px solid rgba(244,248,255,.48)!important;background:none!important;color:#F4F8FF!important;font:600 10px/1 Manrope,sans-serif!important;padding:0 0 5px!important;}
  .mobile-project-grid{display:grid!important;grid-template-columns:1fr!important;gap:14px!important;}
  .mobile-project-grid>.card,
  .mobile-project-grid>.c-lumiere,
  .mobile-project-grid>.c-tech{
    position:relative!important;inset:auto!important;width:100%!important;height:auto!important;aspect-ratio:1.48!important;
    overflow:hidden!important;border:1px solid rgba(183,228,255,.18)!important;border-radius:18px 6px 18px 6px!important;background:#04101B!important;
  }
  .mobile-project-grid .project-card-image,.mobile-fashion-image{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;}
  .mobile-project-grid>.card::after{content:"";position:absolute;z-index:2;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(1,6,10,.88) 100%);pointer-events:none;}
  .project-card-lumiere-copy,.project-card-ai-copy,.project-card-sibirskaya-copy,.project-card-zalip-copy,.project-card-watch-copy,.mobile-fashion-copy{position:absolute!important;z-index:4!important;left:16px!important;right:56px!important;bottom:15px!important;color:#F4F8FF!important;display:block!important;}
  .project-card-lumiere-title,.project-card-ai-title,.project-card-sibirskaya-title,.project-card-zalip-title,.project-card-watch-title,.mobile-fashion-copy strong{display:block!important;font:650 15px/1.05 Manrope,sans-serif!important;letter-spacing:-.02em!important;color:#F4F8FF!important;}
  .project-card-lumiere-sub,.project-card-ai-sub,.project-card-sibirskaya-sub,.project-card-zalip-sub,.project-card-watch-sub,.mobile-fashion-copy span{display:block!important;margin-top:5px!important;font:500 11px/1.2 Manrope,sans-serif!important;color:rgba(244,248,255,.74)!important;}
  .project-card-lumiere-arrow,.project-card-ai-arrow,.project-card-sibirskaya-arrow,.project-card-zalip-arrow,.project-card-watch-arrow,.mobile-fashion-arrow{position:absolute!important;z-index:5!important;right:15px!important;bottom:15px!important;width:30px!important;height:30px!important;display:grid!important;place-items:center!important;border:1px solid rgba(244,248,255,.52)!important;border-radius:50%!important;color:#F4F8FF!important;font-size:11px!important;}

  /* ---------- PROCESS: 2x2 tabs + readable card ---------- */
  .process{padding:54px 16px 62px!important;min-height:0!important;background:linear-gradient(180deg,#020A12,#04111D 52%,#020A12)!important;}
  .process>img{display:none!important;}
  .process-ui{position:relative!important;inset:auto!important;display:block!important;}
  .process-left{padding:0!important;border:0!important;}
  .process-left-title{margin:0 0 24px!important;font:500 40px/.92 Manrope,sans-serif!important;letter-spacing:-.06em!important;color:#F4F8FF!important;}
  .process-steps{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;margin:0 0 14px!important;}
  .process-step{height:58px!important;min-height:58px!important;padding:0 12px!important;display:flex!important;flex-direction:row!important;align-items:center!important;gap:10px!important;border:1px solid rgba(183,228,255,.13)!important;border-radius:13px 4px 13px 4px!important;background:rgba(7,23,38,.62)!important;}
  .process-step.active{border-color:rgba(62,214,255,.52)!important;background:rgba(5,112,255,.10)!important;}
  .process-step-number{width:26px!important;height:26px!important;display:grid!important;place-items:center!important;font-size:9px!important;flex:0 0 26px!important;}
  .process-step-name{font-size:11px!important;line-height:1.15!important;white-space:normal!important;text-align:left!important;}
  .process-center{height:410px!important;padding:0!important;overflow:hidden!important;border-radius:22px 7px 22px 7px!important;}
  .process-center::before,.process-center::after{display:none!important;}
  .process-visual{height:100%!important;border-radius:22px 7px 22px 7px!important;overflow:hidden!important;border:1px solid rgba(183,228,255,.13)!important;}
  .process-content{left:20px!important;right:20px!important;top:auto!important;bottom:24px!important;width:auto!important;height:auto!important;margin:0!important;transform:none!important;}
  .process-kicker{font-size:9px!important;margin:0 0 12px!important;letter-spacing:.15em!important;}
  .process-main-title{font-size:44px!important;line-height:.90!important;letter-spacing:-.065em!important;max-width:300px!important;}
  .process-main-subtitle.handwritten{font:500 22px/1.05 Caveat,cursive!important;margin-top:14px!important;max-width:290px!important;color:rgba(244,248,255,.86)!important;}
  .process-visual-number{right:16px!important;top:16px!important;font-size:64px!important;opacity:.16!important;}
  .process-visual-note{right:16px!important;bottom:16px!important;font-size:8px!important;opacity:.68!important;}

  /* ---------- EXPERIMENT: clean image, no baked legacy copy ---------- */
  .experiment{padding:54px 16px 60px!important;min-height:0!important;display:flex!important;flex-direction:column!important;gap:16px!important;background:radial-gradient(circle at 50% 47%,rgba(5,112,255,.10),transparent 30%),#020A12!important;cursor:auto!important;touch-action:pan-y!important;}
  .mobile-experiment-head{display:block!important;order:1!important;}
  .mobile-experiment-head small{display:block!important;margin:0 0 8px!important;font:600 9px/1 Manrope,sans-serif!important;letter-spacing:.16em!important;color:rgba(62,214,255,.78)!important;}
  .mobile-experiment-head h2{margin:0!important;font:500 40px/.92 Manrope,sans-serif!important;letter-spacing:-.06em!important;color:#F4F8FF!important;}
  .mobile-experiment-head p{margin:14px 0 0!important;max-width:340px!important;font:500 13px/1.5 Manrope,sans-serif!important;color:rgba(244,248,255,.70)!important;}
  .experiment-stack{order:2!important;position:relative!important;height:300px!important;width:100%!important;overflow:hidden!important;border:1px solid rgba(183,228,255,.13)!important;border-radius:22px 7px 22px 7px!important;background:#04101B!important;}
  .experiment-image,.experiment-state{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;}
  .experiment-image{z-index:1!important;}
  .experiment-state{z-index:3!important;}
  .mobile-direction-controls{order:3!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;}
  .mobile-direction-controls button{height:48px!important;border:1px solid rgba(183,228,255,.16)!important;border-radius:13px 4px 13px 4px!important;background:rgba(7,23,38,.78)!important;color:#F4F8FF!important;font:600 11px/1 Manrope,sans-serif!important;}
  .mobile-direction-controls button:active{background:rgba(5,112,255,.18)!important;border-color:rgba(62,214,255,.52)!important;}
  .experiment-title,.experiment-copy,.direction-hints,.experiment-ghostword,.orb-reactor,.plasma-anchor,.plasma-pulse,.effect-panel{display:none!important;}

  /* ---------- FINAL: center crop only, no baked desktop copy visible ---------- */
  .final{position:relative!important;height:560px!important;min-height:560px!important;padding:0!important;overflow:hidden!important;background:
    linear-gradient(180deg,rgba(2,10,18,.08),rgba(2,10,18,.15) 45%,rgba(2,10,18,.92) 100%),
    linear-gradient(90deg,rgba(2,10,18,.55),rgba(2,10,18,.08) 70%),
    url('/assets/final.jpg') 50% 50% / auto 100% no-repeat!important;}
  .final>img{display:none!important;}
  .final::after{display:none!important;}
  .final-particle-field,.final-talk,.hand-note--final-clean{display:none!important;}
  .mobile-final-ui{position:absolute!important;z-index:12!important;inset:0!important;display:flex!important;flex-direction:column!important;justify-content:flex-end!important;align-items:flex-start!important;padding:36px 20px 30px!important;}
  .mobile-final-ui small{display:block!important;margin:0 0 10px!important;font:600 9px/1 Manrope,sans-serif!important;letter-spacing:.16em!important;color:rgba(62,214,255,.78)!important;}
  .mobile-final-ui h2{margin:0!important;font:500 42px/.92 Manrope,sans-serif!important;letter-spacing:-.06em!important;color:#F4F8FF!important;}
  .mobile-final-ui p{margin:16px 0 20px!important;max-width:330px!important;font:500 13px/1.5 Manrope,sans-serif!important;color:rgba(244,248,255,.72)!important;}
  .mobile-final-ui button{height:46px!important;padding:0 18px!important;border:1px solid rgba(244,248,255,.46)!important;border-radius:999px!important;background:rgba(2,10,18,.28)!important;color:#F4F8FF!important;font:600 11px/1 Manrope,sans-serif!important;}
  .mobile-final-ui>span{margin-top:22px!important;font:500 20px/1 Caveat,cursive!important;color:rgba(183,228,255,.86)!important;}

  /* ---------- FOOTER ---------- */
  footer.footer.section{height:auto!important;min-height:0!important;padding:30px 20px 34px!important;background:#020A10!important;}
  footer.footer.section .footer-live-brand,footer.footer.section .footer-live-tagline{position:static!important;transform:none!important;width:auto!important;height:auto!important;}
  footer.footer.section .footer-live-brand{font-size:18px!important;}
  footer.footer.section .footer-live-tagline{margin-top:8px!important;font-size:11px!important;line-height:1.3!important;color:rgba(244,248,255,.50)!important;}
  .footer-socials{display:flex!important;flex-wrap:wrap!important;gap:18px 24px!important;margin-top:26px!important;}
  footer.footer.section .footer-socials a.hotspot{position:static!important;display:inline-flex!important;width:auto!important;height:auto!important;padding:0!important;margin:0!important;transform:none!important;font-size:11px!important;line-height:1!important;color:rgba(244,248,255,.72)!important;background:none!important;}
  footer.footer.section .footer-live-dot{display:none!important;}

  /* ---------- ALL PROJECTS: remove 3D book on phone ---------- */
  #allprojectsOverlay{padding:0!important;background:rgba(1,6,10,.98)!important;overflow:hidden!important;}
  #allProjectsStage{position:absolute!important;inset:0!important;padding:0!important;overflow:hidden!important;perspective:none!important;}
  #allprojectsOverlay .book-shell{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;border:0!important;border-radius:0!important;background:#020A12!important;box-shadow:none!important;transform:none!important;transform-style:flat!important;overflow-y:auto!important;overflow-x:hidden!important;padding:72px 16px 34px!important;}
  #allprojectsOverlay .book-shell::before,#allprojectsOverlay .book-edge,#allprojectsOverlay .book-spine{display:none!important;}
  #allprojectsOverlay .book-close{position:fixed!important;z-index:200!important;right:16px!important;top:16px!important;width:42px!important;height:42px!important;border-radius:50%!important;background:rgba(7,23,38,.88)!important;border:1px solid rgba(183,228,255,.18)!important;font-size:24px!important;color:#F4F8FF!important;}
  #allprojectsOverlay .book-shell{display:flex!important;flex-direction:column!important;}
  #allprojectsOverlay .book-page.left{
    display:block!important;order:2!important;position:relative!important;inset:auto!important;width:100%!important;height:320px!important;min-height:320px!important;
    margin:24px 0 0!important;padding:0!important;transform:none!important;transform-style:flat!important;overflow:hidden!important;
    border:1px solid rgba(183,228,255,.13)!important;border-radius:18px 6px 18px 6px!important;background:rgba(7,23,38,.46)!important;
  }
  #allprojectsOverlay .book-page.left .book-intro{position:relative!important;inset:auto!important;width:100%!important;height:100%!important;padding:22px!important;transform:none!important;opacity:1!important;visibility:visible!important;}
  #allprojectsOverlay .book-page.left .book-title{margin:0!important;font:500 32px/.94 Manrope,sans-serif!important;letter-spacing:-.05em!important;color:#F4F8FF!important;}
  #allprojectsOverlay .easter-rest{position:absolute!important;left:22px!important;right:22px!important;bottom:22px!important;top:96px!important;}
  #allprojectsOverlay .easter-rest-title{font-size:15px!important;line-height:1.1!important;}
  #allprojectsOverlay .easter-rest-copy{font-size:10px!important;line-height:1.4!important;}
  #allprojectsOverlay .runaway-area{position:absolute!important;left:0!important;right:0!important;bottom:0!important;height:145px!important;}
  #allprojectsOverlay .easter-trigger{min-width:112px!important;height:42px!important;padding:0 16px!important;font-size:10px!important;}
  #allprojectsOverlay .book-page.right{position:relative!important;order:1!important;inset:auto!important;width:100%!important;height:auto!important;min-height:0!important;padding:0!important;transform:none!important;transform-style:flat!important;background:transparent!important;border:0!important;overflow:visible!important;opacity:1!important;visibility:visible!important;}
  #allprojectsOverlay .book-projects-heading{position:static!important;margin:0 0 20px!important;font:500 40px/.95 Manrope,sans-serif!important;letter-spacing:-.055em!important;color:#F4F8FF!important;}
  #allprojectsOverlay .book-project-list{position:static!important;display:grid!important;grid-template-columns:1fr!important;gap:12px!important;transform:none!important;opacity:1!important;visibility:visible!important;}
  #allprojectsOverlay .book-project{position:relative!important;display:grid!important;opacity:1!important;visibility:visible!important;transform:none!important;grid-template-columns:118px 1fr!important;align-items:center!important;gap:14px!important;width:100%!important;min-height:112px!important;padding:10px!important;border:1px solid rgba(183,228,255,.13)!important;border-radius:16px 5px 16px 5px!important;background:rgba(7,23,38,.54)!important;text-align:left!important;overflow:hidden!important;}
  #allprojectsOverlay .book-project-media{position:relative!important;width:118px!important;height:90px!important;border-radius:11px 4px 11px 4px!important;overflow:hidden!important;background:#04101B!important;}
  #allprojectsOverlay .book-project-media img{width:100%!important;height:100%!important;object-fit:cover!important;}
  #allprojectsOverlay .book-project-media--fashion{background-image:url('/assets/cases/fashion/01_preview_FASHION.jpg')!important;background-size:cover!important;background-position:center!important;}
  #allprojectsOverlay .book-project-info{position:static!important;display:block!important;min-width:0!important;}
  #allprojectsOverlay .book-project-name{display:block!important;font:650 14px/1.08 Manrope,sans-serif!important;color:#F4F8FF!important;white-space:normal!important;}
  #allprojectsOverlay .book-project-bottom{display:block!important;margin-top:6px!important;font:500 10px/1.2 Manrope,sans-serif!important;letter-spacing:.02em!important;color:rgba(244,248,255,.68)!important;}
  #allprojectsOverlay .book-project-video-badge{left:96px!important;top:18px!important;width:23px!important;height:23px!important;font-size:8px!important;}

  /* ---------- GAME: fit phone viewport ---------- */
  #allprojectsOverlay .zalip-zone{position:fixed!important;inset:0!important;width:100%!important;height:100dvh!important;padding:18px!important;border-radius:0!important;background:#020A12!important;overflow:hidden!important;}
  .zalip-zone-head{height:auto!important;display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:10px!important;}
  .zalip-zone-kicker{font-size:9px!important;}
  .zalip-zone-actions{display:flex!important;gap:7px!important;}
  .zalip-zone-back,.zalip-zone-close{height:38px!important;min-width:38px!important;padding:0 10px!important;}
  .color-game{height:calc(100dvh - 82px)!important;min-height:0!important;}
  .color-game-top{grid-template-columns:58px 1fr 58px!important;gap:6px!important;}
  .color-game-command{font-size:clamp(22px,7vw,30px)!important;line-height:.95!important;}
  .color-game-level{font-size:9px!important;}
  .run-stat strong{font-size:18px!important;}
  .color-game-field{min-height:0!important;height:100%!important;}
  .color-game-bottom{height:46px!important;}

  /* ---------- PROJECT CASES: full-width phone reader ---------- */
  #projectOverlay{padding:0!important;align-items:stretch!important;justify-content:stretch!important;background:rgba(1,6,10,.98)!important;}
  .project-case-modal{position:fixed!important;inset:0!important;width:100%!important;height:100dvh!important;max-width:none!important;max-height:none!important;margin:0!important;border:0!important;border-radius:0!important;overflow-y:auto!important;overflow-x:hidden!important;background:#020A12!important;box-shadow:none!important;}
  .project-case-modal .case-hero{height:auto!important;min-height:0!important;aspect-ratio:1/1!important;background-size:cover!important;background-position:center!important;}
  .project-case-modal .case-hero>img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;}
  .project-case-modal .case-headline{display:block!important;padding:28px 18px 24px!important;}
  .project-case-modal .case-kicker{font-size:10px!important;letter-spacing:.12em!important;margin-bottom:9px!important;}
  .project-case-modal .case-title{font-size:clamp(36px,11vw,52px)!important;line-height:.92!important;letter-spacing:-.055em!important;}
  .project-case-modal .case-title span{display:block!important;margin-top:9px!important;font-size:13px!important;line-height:1.25!important;letter-spacing:0!important;}
  .project-case-modal .case-intro-copy{margin:18px 0 0!important;max-width:none!important;font-size:14px!important;line-height:1.55!important;}
  .project-case-modal .case-brief{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;padding:0 18px 30px!important;}
  .project-case-modal .case-brief-item{padding:17px!important;border:1px solid rgba(183,228,255,.12)!important;border-radius:15px 5px 15px 5px!important;background:rgba(7,23,38,.48)!important;}
  .project-case-modal .case-brief-label{font-size:9px!important;}
  .project-case-modal .case-brief strong{display:block!important;margin-top:7px!important;font-size:16px!important;line-height:1.25!important;}
  .project-case-modal .case-brief p{margin:9px 0 0!important;font-size:13px!important;line-height:1.55!important;}
  .project-case-modal .case-section{padding:30px 18px!important;}
  .project-case-modal .case-section-head{display:block!important;margin-bottom:16px!important;}
  .project-case-modal .case-section-head h3{font-size:28px!important;line-height:1!important;letter-spacing:-.04em!important;margin:0!important;}
  .project-case-modal .case-section-head p{margin:10px 0 0!important;max-width:none!important;font-size:13px!important;line-height:1.55!important;}
  .project-case-modal .case-image,.project-case-modal .case-source-frame{width:100%!important;height:auto!important;min-height:0!important;aspect-ratio:auto!important;border-radius:15px 5px 15px 5px!important;overflow:hidden!important;}
  .project-case-modal .case-image img,.project-case-modal .case-source-frame img{width:100%!important;height:auto!important;display:block!important;object-fit:contain!important;}
  .project-case-modal .case-divider{margin:0 18px!important;}
  .project-case-modal .case-benefit{margin-top:18px!important;padding:17px!important;border-radius:15px 5px 15px 5px!important;}
  .project-case-modal .case-benefit strong{font-size:16px!important;line-height:1.25!important;}
  .project-case-modal .case-benefit p{font-size:13px!important;line-height:1.55!important;}
  .project-case-modal .case-footer{padding:34px 18px 38px!important;display:block!important;}
  .project-case-modal .case-footer-title{font-size:34px!important;line-height:.96!important;letter-spacing:-.045em!important;}
  .project-case-modal .case-footer-cta{width:100%!important;margin-top:22px!important;height:48px!important;justify-content:center!important;}


  #projectOverlay>.close{position:fixed!important;z-index:1000!important;right:14px!important;top:14px!important;width:42px!important;height:42px!important;border-radius:50%!important;background:rgba(7,23,38,.88)!important;border:1px solid rgba(183,228,255,.18)!important;color:#F4F8FF!important;font-size:24px!important;}
  /* ---------- CONTACT / SHOWREEL ---------- */
  .drawer{width:100%!important;max-width:none!important;padding:72px 20px 28px!important;}
  .modal{width:calc(100% - 20px)!important;max-width:none!important;margin:10px!important;}
}

@media (max-width:380px){
  .hero{height:680px!important;min-height:680px!important;background-position:61% 50%!important;}
  .mobile-hero-main h1{font-size:46px!important;}
  .projects-mobile-head h2,.process-left-title,.mobile-experiment-head h2{font-size:37px!important;}
  .process-main-title{font-size:40px!important;}
  .mobile-final-ui h2{font-size:38px!important;}
  #allprojectsOverlay .book-project{grid-template-columns:102px 1fr!important;}
  #allprojectsOverlay .book-project-media{width:102px!important;height:82px!important;}
}


/* =========================================================
   MOBILE V3 — SECTION FLOW FIX
   Реальная причина «слипшихся» блоков:
   у секций оставался desktop aspect-ratio, поэтому process и experiment
   схлопывались по высоте, а их содержимое вылезало в следующие блоки.
   ========================================================= */
@media (max-width:700px){
  #top,
  #projects,
  #process,
  #experiment,
  #finalSection{
    aspect-ratio:auto !important;
  }

  #process{
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
  }
  #process .process-ui{
    position:relative !important;
    height:auto !important;
    min-height:0 !important;
  }

  #experiment{
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
  }
  #experiment .experiment-stack{
    flex:0 0 300px !important;
    height:300px !important;
    min-height:300px !important;
  }

  #projects{margin-top:24px !important;}
  #process,
  #experiment,
  #finalSection,
  footer.footer.section{margin-top:24px !important;}

  #projects,
  #process,
  #experiment,
  #finalSection,
  footer.footer.section{
    isolation:isolate !important;
  }
}

@media (max-width:380px){
  #experiment .experiment-stack{
    flex-basis:280px !important;
    height:280px !important;
    min-height:280px !important;
  }
}