/* RESET */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:"SF Pro Display","Inter","Segoe UI",Arial,sans-serif;
}

html{
scroll-behavior:smooth;
}

body{
background:black;
color:white;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
text-rendering:geometricPrecision;
}

img,
video,
canvas{
max-width:100%;
}

button,
textarea,
select{
font:inherit;
}

@media(hover:hover) and (pointer:fine){

body.has-custom-cursor,
body.has-custom-cursor a,
body.has-custom-cursor button,
body.has-custom-cursor input,
body.has-custom-cursor textarea,
body.has-custom-cursor select,
body.has-custom-cursor [role="button"]{
cursor:none;
}

.custom-cursor{
position:fixed;
left:0;
top:0;
width:34px;
height:34px;
border:1px solid rgba(92,199,201,0.95);
border-radius:50%;
pointer-events:none;
z-index:10000;
opacity:0;
transform:translate3d(-80px,-80px,0) translate(-50%,-50%);
mix-blend-mode:screen;
box-shadow:
0 0 14px rgba(92,199,201,0.56),
inset 0 0 12px rgba(92,199,201,0.22);
transition:
opacity 0.22s ease,
width 0.18s ease,
height 0.18s ease,
border-color 0.18s ease,
background 0.18s ease;
}

.custom-cursor::before{
content:"";
position:absolute;
left:50%;
top:50%;
width:5px;
height:5px;
border-radius:50%;
background:#5cc7c9;
box-shadow:0 0 14px rgba(92,199,201,0.9);
transform:translate(-50%,-50%);
}

.custom-cursor::after{
content:"";
position:absolute;
right:-3px;
top:50%;
width:8px;
height:8px;
border-top:1px solid #5cc7c9;
border-right:1px solid #5cc7c9;
transform:translateY(-50%) rotate(45deg);
filter:drop-shadow(0 0 8px rgba(92,199,201,0.85));
}

.custom-cursor.is-visible{
opacity:1;
}

.custom-cursor.is-link{
width:46px;
height:46px;
border-color:#b8ff4d;
background:rgba(92,199,201,0.08);
}

.custom-cursor.is-link::before{
background:#b8ff4d;
}

.custom-cursor.is-down{
width:24px;
height:24px;
background:rgba(92,199,201,0.16);
}

}

/* LOADER */

.loader{
position:fixed;
width:100%;
height:100%;
background:black;
display:flex;
align-items:center;
justify-content:center;
z-index:9999;
}

/* NAVBAR */

.navbar{
position:fixed;
top:16px;
left:50%;
width:min(1120px,calc(100% - 32px));
display:flex;
justify-content:space-between;
align-items:center;
padding:10px 12px;
border:1px solid rgba(255,255,255,0.12);
border-radius:999px;
background:rgba(8,10,14,0.62);
backdrop-filter:blur(18px);
box-shadow:
0 18px 54px rgba(0,0,0,0.38),
inset 0 0 0 1px rgba(255,255,255,0.035);
transform:translateX(-50%);
z-index:1000;
}

.logo{
display:inline-flex;
align-items:center;
gap:10px;
padding:6px 12px 6px 7px;
border-radius:999px;
color:white;
text-decoration:none;
font-weight:bold;
font-size:17px;
letter-spacing:0;
}

.logo-mark{
display:grid;
place-items:center;
width:38px;
height:38px;
border-radius:50%;
background:linear-gradient(135deg,#6761de,#5cc7c9,#b8ff4d);
color:#050505;
font-size:12px;
font-weight:900;
box-shadow:0 0 22px rgba(92,199,201,0.32);
}

.nav-links{
display:flex;
align-items:center;
gap:4px;
list-style:none;
}

.nav-links a{
position:relative;
display:inline-flex;
align-items:center;
min-height:38px;
padding:0 16px;
border-radius:999px;
color:rgba(255,255,255,0.78);
font-size:14px;
font-weight:800;
text-decoration:none;
transition:
color 0.25s ease,
background 0.25s ease,
box-shadow 0.25s ease,
transform 0.25s ease;
}

.nav-links a::before{
content:"";
position:absolute;
left:16px;
right:16px;
bottom:7px;
height:2px;
border-radius:999px;
background:linear-gradient(90deg,#b8ff4d,#5cc7c9);
transform:scaleX(0);
transform-origin:center;
transition:transform 0.25s ease;
}

.nav-links a:hover{
color:white;
background:rgba(255,255,255,0.08);
box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08);
transform:translateY(-1px);
}

.nav-links a:hover::before{
transform:scaleX(1);
}

/* HERO */

.hero{
position:relative;
min-height:100svh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding:120px 24px 80px;
}

#stars{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:0;
}

.hero-content{
position:relative;
z-index:2;
max-width:900px;
padding:0 12px;
}

.hero-title{
position:relative;
display:inline-block;
max-width:980px;
padding-bottom:18px;
font-size:clamp(38px,5vw,62px);
line-height:1.08;
font-weight:900;
letter-spacing:0;
text-transform:none;
text-align:center;
background:linear-gradient(45deg,#7b61ff,#00e5ff);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
filter:drop-shadow(0 16px 34px rgba(0,229,255,0.18));
}

.hero-title::after{
content:"";
position:absolute;
left:50%;
bottom:0;
width:min(280px,72%);
height:3px;
border-radius:999px;
background:linear-gradient(90deg,transparent,#7b61ff,#00e5ff,transparent);
box-shadow:0 0 24px rgba(0,229,255,0.4);
transform:translateX(-50%);
}

.hero-text{
max-width:620px;
margin:22px auto 0;
color:rgba(255,255,255,0.76);
font-size:18px;
font-weight:600;
line-height:1.65;
}

.cta-btn{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
min-height:52px;
margin-top:30px;
padding:0 32px;
border:none;
border-radius:999px;
background:linear-gradient(90deg,#6761de,#5a78d9,#5293d3,#54afcd,#5cc7c9);
color:#050505;
font-size:14px;
font-weight:900;
letter-spacing:0;
text-decoration:none;
cursor:pointer;
box-shadow:
0 16px 38px rgba(92,199,201,0.26),
inset 0 1px 0 rgba(255,255,255,0.34);
overflow:hidden;
transition:
transform 0.28s ease,
box-shadow 0.28s ease,
filter 0.28s ease;
}

.cta-btn::after{
content:"";
position:absolute;
top:0;
bottom:0;
left:-42%;
width:34%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,0.55),transparent);
transform:skewX(-18deg);
transition:left 0.42s ease;
}

.cta-btn:hover{
transform:translateY(-3px);
box-shadow:
0 20px 52px rgba(0,229,255,0.34),
0 0 24px rgba(123,97,255,0.22);
filter:saturate(1.12);
}

.cta-btn:hover::after{
left:108%;
}

/* SECTIONS */

section{
padding:clamp(80px,8vw,120px) clamp(20px,5vw,60px);
text-align:center;
scroll-margin-top:120px;
}

footer{
scroll-margin-top:120px;
}

/* ========================= */
/* INTRO EXPERIENCE */
/* ========================= */

.intro{
position:relative;
display:grid;
grid-template-columns:minmax(340px,0.72fr) minmax(0,1fr);
align-items:start;
gap:64px;
overflow:hidden;
isolation:isolate;
min-height:auto;
padding-top:clamp(112px,8vw,136px);
padding-bottom:76px;
text-align:left;
background:
radial-gradient(circle at 18% 24%,rgba(184,255,77,0.16),transparent 28%),
radial-gradient(circle at 82% 74%,rgba(255,107,74,0.12),transparent 30%),
linear-gradient(180deg,#000 0%,#06100f 52%,#050506 100%);
border-top:1px solid rgba(255,255,255,0.08);
border-bottom:1px solid rgba(255,255,255,0.08);
}

.intro-grid-bg{
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(255,255,255,0.045) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,0.045) 1px,transparent 1px);
background-size:70px 70px;
mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);
opacity:0.42;
z-index:-3;
}

.intro-orbit span{
position:absolute;
right:8%;
top:50%;
border:1px solid rgba(92,199,201,0.14);
border-radius:50%;
transform:translateY(-50%) rotateX(70deg);
box-shadow:0 0 50px rgba(92,199,201,0.08);
z-index:-1;
}

.intro-orbit span:nth-child(1){
width:520px;
height:520px;
animation:serviceOrbitSpin 22s linear infinite;
}

.intro-orbit span:nth-child(2){
width:760px;
height:760px;
border-style:dashed;
animation:serviceOrbitSpin 34s linear infinite reverse;
}

.intro-content{
position:relative;
z-index:2;
max-width:720px;
grid-column:2;
grid-row:1;
align-self:start;
padding-top:12px;
}

.intro-kicker{
display:inline-flex;
align-items:center;
gap:10px;
margin-bottom:18px;
padding:9px 16px;
border:1px solid rgba(255,255,255,0.14);
border-radius:999px;
background:rgba(255,255,255,0.05);
color:#b8ff4d;
font-size:12px;
font-weight:900;
text-transform:uppercase;
}

.intro-kicker::before{
content:"";
display:inline-block;
width:7px;
height:7px;
background:#ff6b4a;
box-shadow:0 0 18px rgba(255,107,74,0.78);
}

.intro h1{
font-size:clamp(42px,6.4vw,86px);
line-height:0.95;
max-width:780px;
background:linear-gradient(90deg,#ffffff,#b8ff4d 45%,#5cc7c9);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.intro p{
max-width:650px;
margin-top:24px;
color:rgba(255,255,255,0.7);
font-size:18px;
line-height:1.75;
}

.intro-metrics{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
margin-top:34px;
}

.intro-metrics div{
padding:18px;
border:1px solid rgba(255,255,255,0.12);
border-radius:8px;
background:rgba(255,255,255,0.055);
box-shadow:inset 0 0 0 1px rgba(255,255,255,0.03);
}

.intro-metrics strong{
display:block;
margin-bottom:7px;
font-size:34px;
line-height:1;
color:#5cc7c9;
}

.intro-metrics span{
color:rgba(255,255,255,0.64);
font-size:12px;
font-weight:900;
text-transform:uppercase;
}

.intro-device{
position:relative;
z-index:2;
grid-column:1;
grid-row:1;
align-self:start;
min-height:0;
display:grid;
place-items:center;
perspective:1200px;
padding-top:52px;
}

.device-glow{
position:absolute;
width:min(520px,72vw);
height:min(520px,72vw);
border-radius:50%;
background:radial-gradient(circle,rgba(92,199,201,0.18),rgba(184,255,77,0.08),transparent 68%);
filter:blur(16px);
}

.device-screen{
position:relative;
width:min(500px,42vw);
aspect-ratio:1.05;
overflow:hidden;
border:1px solid rgba(255,255,255,0.14);
border-radius:8px;
background:
linear-gradient(145deg,rgba(255,255,255,0.14),rgba(255,255,255,0.035)),
rgba(0,0,0,0.42);
box-shadow:
0 30px 90px rgba(0,0,0,0.5),
inset 0 0 40px rgba(92,199,201,0.08);
transform:rotateX(10deg) rotateY(-14deg) rotateZ(2deg);
transform-style:preserve-3d;
animation:introFloat 5s ease-in-out infinite;
}

.device-screen::before{
content:"";
position:absolute;
inset:0;
background:
repeating-linear-gradient(90deg,rgba(255,255,255,0.06) 0 1px,transparent 1px 18px),
repeating-linear-gradient(0deg,rgba(255,255,255,0.035) 0 1px,transparent 1px 18px);
opacity:0.46;
}

.screen-content{
position:absolute;
left:10%;
top:12%;
width:48%;
z-index:3;
display:grid;
gap:10px;
padding:18px;
border:1px solid rgba(255,255,255,0.12);
border-radius:8px;
background:rgba(0,0,0,0.18);
backdrop-filter:blur(10px);
text-align:left;
}

.screen-label{
width:max-content;
padding:6px 9px;
border:1px solid rgba(184,255,77,0.3);
border-radius:999px;
background:rgba(184,255,77,0.08);
color:#b8ff4d;
font-size:9px;
font-weight:900;
text-transform:uppercase;
}

.screen-content strong{
display:block;
color:white;
font-size:clamp(19px,1.6vw,27px);
line-height:1;
}

.screen-content p{
max-width:230px;
margin:0;
color:rgba(255,255,255,0.68);
font-size:12px;
line-height:1.45;
}

.screen-rows{
display:grid;
gap:7px;
margin-top:4px;
}

.screen-rows span{
position:relative;
display:flex;
align-items:center;
width:min(100%,210px);
height:26px;
padding:0 10px 0 26px;
border:1px solid rgba(255,255,255,0.1);
border-radius:999px;
background:rgba(255,255,255,0.06);
color:rgba(255,255,255,0.78);
font-size:10px;
font-weight:900;
}

.screen-rows span::before{
content:"";
position:absolute;
left:10px;
width:7px;
height:7px;
border-radius:50%;
background:#5cc7c9;
box-shadow:0 0 14px rgba(92,199,201,0.72);
}

.screen-rows span:nth-child(2)::before{
background:#b8ff4d;
box-shadow:0 0 14px rgba(184,255,77,0.72);
}

.screen-rows span:nth-child(3)::before{
background:#ff6b4a;
box-shadow:0 0 14px rgba(255,107,74,0.72);
}

.screen-line,
.screen-card,
.screen-dot{
position:absolute;
display:block;
}

.screen-line{
height:3px;
border-radius:999px;
background:linear-gradient(90deg,#b8ff4d,#5cc7c9,#ff6b4a);
box-shadow:0 0 24px rgba(92,199,201,0.3);
z-index:1;
opacity:0.82;
}

.screen-line-one{
left:12%;
top:16%;
width:45%;
}

.screen-line-two{
right:9%;
bottom:16%;
width:42%;
}

.screen-card{
border:1px solid rgba(255,255,255,0.16);
border-radius:8px;
background:rgba(255,255,255,0.08);
backdrop-filter:blur(12px);
z-index:1;
opacity:0.48;
}

.screen-card-one{
left:16%;
bottom:18%;
width:30%;
height:22%;
}

.screen-card-two{
right:13%;
top:27%;
width:28%;
height:30%;
}

.screen-dot{
width:14px;
height:14px;
border-radius:50%;
background:#b8ff4d;
box-shadow:0 0 22px rgba(184,255,77,0.72);
}

.screen-dot-one{
left:24%;
top:48%;
}

.screen-dot-two{
right:29%;
bottom:31%;
background:#ff6b4a;
box-shadow:0 0 22px rgba(255,107,74,0.72);
}

@keyframes introFloat{
0%,
100%{
transform:rotateX(10deg) rotateY(-14deg) rotateZ(2deg) translateY(0);
}

50%{
transform:rotateX(6deg) rotateY(-8deg) rotateZ(-1deg) translateY(-14px);
}
}

/* ========================= */
/* AUTO SCROLL BAR */
/* ========================= */

.auto-scroll-bar{
--bar-purple:#6761de;
--bar-blue:#5293d3;
--bar-cyan:#5cc7c9;
--bar-blue-rgb:82,147,211;
--bar-cyan-rgb:92,199,201;
position:relative;
margin-top:-76px;
padding:22px 0 86px;
overflow:hidden;
isolation:isolate;
background:
radial-gradient(circle at 8% 18%,rgba(103,97,222,0.26),transparent 28%),
radial-gradient(circle at 90% 42%,rgba(var(--bar-cyan-rgb),0.18),transparent 32%),
linear-gradient(180deg,rgba(0,0,0,0) 0%,#020406 26%,#050505 100%);
border-top:none;
border-bottom:1px solid rgba(255,255,255,0.08);
}

.auto-scroll-bar::after{
content:"";
position:absolute;
inset:0;
background-image:
radial-gradient(circle,rgba(255,255,255,0.82) 0 1px,transparent 1.6px),
radial-gradient(circle,rgba(92,199,201,0.68) 0 1px,transparent 1.5px);
background-size:180px 120px,260px 180px;
background-position:24px 8px,90px 58px;
opacity:0.2;
mask-image:linear-gradient(180deg,transparent,#000 18%,#000 86%,transparent);
pointer-events:none;
z-index:-2;
}

.auto-scroll-bar::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(
circle at var(--mouse-x,50%) var(--mouse-y,50%),
rgba(var(--bar-cyan-rgb),0.34),
transparent 360px
);
opacity:0;
transition:opacity 0.3s ease;
z-index:-1;
}

.auto-scroll-bar.is-hovering::before{
opacity:1;
}

.auto-mouse-glow{
position:absolute;
left:var(--mouse-x,50%);
top:var(--mouse-y,50%);
width:240px;
height:240px;
border-radius:50%;
background:
radial-gradient(
circle,
rgba(var(--bar-cyan-rgb),0.42),
rgba(103,97,222,0.18) 45%,
transparent 70%
);
filter:blur(8px);
opacity:0;
pointer-events:none;
transform:translate(-50%,-50%) scale(0.65);
transition:opacity 0.25s ease,transform 0.25s ease;
z-index:0;
}

.auto-color-orb{
position:absolute;
left:50%;
top:50%;
width:92px;
height:92px;
border-radius:50%;
background:var(--bar-cyan);
box-shadow:
0 0 18px rgba(var(--bar-cyan-rgb),0.9),
0 0 60px rgba(var(--bar-cyan-rgb),0.42),
inset 0 0 18px rgba(255,255,255,0.42);
opacity:0.22;
pointer-events:none;
transform:translate(-50%,-50%) scale(0.85);
transition:opacity 0.3s ease,transform 0.3s ease;
z-index:0;
}

.auto-scroll-bar.is-hovering .auto-color-orb{
opacity:0.5;
transform:translate(-50%,-50%) scale(1.08);
}

.auto-scroll-bar.is-active .auto-color-orb{
opacity:0.75;
transform:translate(-50%,-50%) scale(1.24);
}

.auto-scroll-bar.is-hovering .auto-mouse-glow{
opacity:1;
transform:translate(-50%,-50%) scale(1);
}

.auto-scroll-lane{
position:relative;
width:100%;
overflow:hidden;
padding:0;
background:linear-gradient(90deg,#6761de 0%,#5a78d9 25%,#5293d3 50%,#54afcd 75%,#5cc7c9 100%);
transform:rotate(-0.75deg);
z-index:1;
box-shadow:
0 12px 40px rgba(0,0,0,0.4),
0 0 28px rgba(var(--bar-cyan-rgb),0.18);
}

.auto-scroll-lane::before,
.auto-scroll-lane::after{
display:none;
}

.auto-scroll-lane::before{
left:0;
background:transparent;
}

.auto-scroll-lane::after{
right:0;
background:transparent;
}

.auto-scroll-lane-reverse{
margin-top:4px;
transform:rotate(0.75deg);
}

.auto-scroll-track{
display:flex;
width:max-content;
animation:autoScroll 34s linear infinite;
will-change:transform;
transform:translate3d(0,0,0);
}

.auto-scroll-lane-reverse .auto-scroll-track{
animation-direction:reverse;
animation-duration:40s;
}

.auto-scroll-group{
display:flex;
gap:0;
padding-right:0;
}

.auto-scroll-item{
--rotate-x:0deg;
--rotate-y:0deg;
--shine-x:50%;
--shine-y:50%;
--item-scale:1;
position:relative;
min-width:auto;
height:54px;
display:flex;
align-items:center;
justify-content:center;
padding:0 40px;
border:none;
border-radius:0;
background:
radial-gradient(
circle at var(--shine-x) var(--shine-y),
rgba(255,255,255,0.34),
transparent 32%
),
transparent;
box-shadow:none;
color:#050505;
font-size:16px;
font-weight:900;
letter-spacing:0;
white-space:nowrap;
cursor:default;
backface-visibility:hidden;
transform:
perspective(700px)
rotateX(var(--rotate-x))
rotateY(var(--rotate-y))
scale(var(--item-scale));
transition:
transform 0.18s ease,
color 0.25s ease,
background 0.25s ease;
}

.auto-scroll-item::after{
content:"•";
position:absolute;
right:-6px;
top:50%;
font-size:20px;
line-height:1;
transform:translateY(-50%);
color:#050505;
}

.auto-scroll-item:hover{
--item-scale:1.04;
background:
radial-gradient(
circle at var(--shine-x) var(--shine-y),
rgba(255,255,255,0.42),
transparent 34%
),
rgba(255,255,255,0.12);
}

.auto-scroll-bar.is-active .auto-scroll-item{
color:#050505;
}

.what-we-do{
position:relative;
z-index:1;
display:grid;
grid-template-columns:minmax(280px,0.86fr) minmax(0,1.14fr);
gap:34px;
align-items:end;
max-width:1180px;
margin:62px auto 0;
padding:34px clamp(20px,5vw,60px);
text-align:left;
border:1px solid rgba(255,255,255,0.08);
border-radius:8px;
background:
radial-gradient(circle at 18% 8%,rgba(184,255,77,0.12),transparent 28%),
radial-gradient(circle at 82% 90%,rgba(92,199,201,0.16),transparent 30%),
linear-gradient(135deg,rgba(255,255,255,0.055),rgba(255,255,255,0.015));
box-shadow:
0 28px 90px rgba(0,0,0,0.34),
inset 0 0 0 1px rgba(255,255,255,0.025);
overflow:hidden;
isolation:isolate;
}

.what-we-do::before{
content:"";
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(255,255,255,0.045) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,0.045) 1px,transparent 1px);
background-size:42px 42px;
mask-image:radial-gradient(circle at 50% 50%,#000,transparent 78%);
opacity:0.34;
z-index:-2;
}

.what-we-do::after{
content:"";
position:absolute;
top:-40%;
left:-28%;
width:46%;
height:180%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,0.14),transparent);
transform:rotate(18deg);
animation:whatLightSweep 7.5s ease-in-out infinite;
z-index:-1;
pointer-events:none;
}

.what-we-do-copy{
position:relative;
max-width:560px;
grid-row:1 / span 2;
}

.what-kicker{
position:relative;
display:inline-flex;
align-items:center;
gap:10px;
margin-bottom:16px;
padding:8px 14px;
border:1px solid rgba(92,199,201,0.38);
border-radius:999px;
background:rgba(92,199,201,0.08);
color:#5cc7c9;
font-size:12px;
font-weight:900;
text-transform:uppercase;
box-shadow:0 0 24px rgba(92,199,201,0.12);
}

.what-kicker::before{
content:"";
width:7px;
height:7px;
border-radius:50%;
background:#b8ff4d;
box-shadow:0 0 18px rgba(184,255,77,0.8);
}

.what-we-do h2{
max-width:560px;
font-size:clamp(34px,4.5vw,58px);
line-height:1;
background:linear-gradient(90deg,#ffffff,#b8ff4d 48%,#5cc7c9);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
filter:drop-shadow(0 18px 36px rgba(92,199,201,0.12));
}

.what-we-do p{
margin-top:20px;
color:rgba(255,255,255,0.72);
font-size:17px;
line-height:1.75;
}

.scroll-keyboard{
--key-glow:0;
position:relative;
align-self:end;
min-height:214px;
padding:18px;
border:1px solid rgba(92,199,201,0.18);
border-radius:8px;
background:
radial-gradient(circle at 18% 18%,rgba(184,255,77,0.18),transparent 30%),
radial-gradient(circle at 82% 12%,rgba(92,199,201,0.24),transparent 34%),
linear-gradient(145deg,rgba(7,16,20,0.7),rgba(8,9,13,0.36));
box-shadow:
0 24px 82px rgba(0,0,0,0.34),
0 0 calc(34px * var(--key-glow)) rgba(92,199,201,0.34),
inset 0 0 0 1px rgba(255,255,255,0.035);
transform:perspective(900px) rotateX(10deg) rotateY(-14deg) translateY(14px);
transform-origin:center bottom;
overflow:hidden;
isolation:isolate;
}

.scroll-keyboard::before{
content:"";
position:absolute;
inset:-1px;
border-radius:inherit;
background:
linear-gradient(120deg,transparent,rgba(255,255,255,0.16),transparent),
linear-gradient(90deg,rgba(184,255,77,0.18),rgba(92,199,201,0.26),rgba(103,97,222,0.16));
opacity:0.24;
mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
mask-composite:exclude;
padding:1px;
pointer-events:none;
z-index:-1;
}

.scroll-keyboard::after{
content:"";
position:absolute;
left:12%;
right:12%;
bottom:-18px;
height:34px;
border-radius:50%;
background:rgba(92,199,201,0.32);
filter:blur(18px);
opacity:0.68;
z-index:-2;
}

.keyboard-halo{
position:absolute;
right:-42px;
top:-54px;
width:180px;
height:180px;
border:1px solid rgba(184,255,77,0.18);
border-radius:50%;
background:radial-gradient(circle,rgba(92,199,201,0.28),transparent 62%);
box-shadow:inset 0 0 44px rgba(92,199,201,0.12);
opacity:0.72;
}

.keyboard-screen{
position:relative;
display:grid;
grid-template-columns:1fr auto;
gap:12px;
align-items:center;
min-height:78px;
padding:14px 16px;
border:1px solid rgba(255,255,255,0.1);
border-radius:8px;
background:
linear-gradient(135deg,rgba(255,255,255,0.11),rgba(255,255,255,0.035)),
rgba(0,0,0,0.28);
overflow:hidden;
}

.keyboard-status{
grid-column:1 / -1;
color:#b8ff4d;
font-size:12px;
font-weight:900;
text-transform:uppercase;
letter-spacing:0;
}

.keyboard-wave{
display:flex;
align-items:end;
gap:5px;
height:34px;
}

.keyboard-wave span{
display:block;
width:7px;
height:42%;
border-radius:999px;
background:linear-gradient(180deg,#b8ff4d,#5cc7c9);
box-shadow:0 0 16px rgba(92,199,201,0.54);
transform-origin:bottom;
}

.keyboard-wave span:nth-child(2){
height:74%;
}

.keyboard-wave span:nth-child(3){
height:56%;
}

.keyboard-wave span:nth-child(4){
height:88%;
}

.keyboard-lines{
display:grid;
gap:7px;
}

.keyboard-lines span{
display:block;
height:7px;
border-radius:999px;
background:linear-gradient(90deg,rgba(92,199,201,0.9),rgba(184,255,77,0.76),transparent);
box-shadow:0 0 14px rgba(92,199,201,0.32);
transform-origin:left;
}

.keyboard-lines span:nth-child(2){
width:82%;
}

.keyboard-lines span:nth-child(3){
width:58%;
}

.keyboard-deck{
position:relative;
display:grid;
grid-template-columns:1.3fr repeat(4,1fr);
gap:8px;
margin-top:12px;
}

.keyboard-key{
position:relative;
display:flex;
align-items:center;
justify-content:center;
min-height:38px;
padding:0 10px;
border:1px solid rgba(255,255,255,0.12);
border-radius:7px;
background:
linear-gradient(180deg,rgba(255,255,255,0.14),rgba(255,255,255,0.035)),
rgba(5,8,11,0.62);
color:rgba(255,255,255,0.78);
font-size:12px;
font-weight:900;
box-shadow:
0 10px 22px rgba(0,0,0,0.22),
inset 0 1px 0 rgba(255,255,255,0.14);
transform:translateY(0);
}

.keyboard-key.is-pressed{
border-color:rgba(184,255,77,0.5);
color:#ffffff;
background:
radial-gradient(circle at 50% 0%,rgba(184,255,77,0.28),transparent 54%),
linear-gradient(180deg,rgba(92,199,201,0.22),rgba(255,255,255,0.045)),
rgba(5,8,11,0.76);
box-shadow:
0 0 18px rgba(92,199,201,0.3),
inset 0 0 18px rgba(92,199,201,0.12);
}

.key-wide,
.key-space{
grid-column:span 2;
}

.key-accent{
color:#050505;
background:linear-gradient(135deg,#b8ff4d,#5cc7c9);
}

.what-we-do{
overflow:visible;
}

.scroll-keyboard{
--keyboard-glow:0.35;
--typed-reveal:0%;
--line-scale:0;
--keyboard-lift:0px;
min-height:258px;
padding:14px;
margin:-12px -18px 12px 0;
border-color:rgba(92,199,201,0.28);
background:
linear-gradient(115deg,rgba(255,255,255,0.12),transparent 16%,rgba(92,199,201,0.12) 44%,transparent 62%),
radial-gradient(circle at 18% 10%,rgba(184,255,77,0.17),transparent 28%),
radial-gradient(circle at 90% 28%,rgba(92,199,201,0.26),transparent 32%),
linear-gradient(145deg,rgba(8,22,26,0.86),rgba(5,7,12,0.58));
box-shadow:
0 28px 76px rgba(0,0,0,0.42),
0 0 calc(46px * var(--keyboard-glow)) rgba(92,199,201,0.32),
inset 0 0 0 1px rgba(255,255,255,0.045);
transform:
perspective(1100px)
rotateX(12deg)
rotateY(-17deg)
rotateZ(2deg)
translateY(var(--keyboard-lift));
}

.scroll-keyboard::before{
background:
repeating-linear-gradient(0deg,rgba(255,255,255,0.055) 0 1px,transparent 1px 8px),
linear-gradient(120deg,transparent,rgba(255,255,255,0.2),transparent),
linear-gradient(90deg,rgba(184,255,77,0.32),rgba(92,199,201,0.42),rgba(103,97,222,0.24));
opacity:0.36;
animation:keyboardScan 5.5s linear infinite;
}

.scroll-keyboard::after{
left:8%;
right:6%;
bottom:-22px;
height:44px;
background:linear-gradient(90deg,rgba(184,255,77,0.28),rgba(92,199,201,0.48),rgba(103,97,222,0.2));
filter:blur(22px);
opacity:0.78;
}

.keyboard-orbit{
position:absolute;
border:1px solid rgba(92,199,201,0.22);
border-radius:50%;
pointer-events:none;
z-index:-1;
}

.keyboard-orbit-one{
right:-62px;
top:-58px;
width:170px;
height:170px;
background:radial-gradient(circle,rgba(92,199,201,0.28),transparent 64%);
animation:keyboardOrbit 8s linear infinite;
}

.keyboard-orbit-two{
left:-30px;
bottom:18px;
width:102px;
height:102px;
border-color:rgba(184,255,77,0.22);
box-shadow:inset 0 0 38px rgba(184,255,77,0.1);
animation:keyboardOrbit 6.5s linear infinite reverse;
}

.keyboard-screen{
display:block;
min-height:106px;
padding:15px 17px;
background:
repeating-linear-gradient(90deg,rgba(92,199,201,0.06) 0 1px,transparent 1px 18px),
linear-gradient(90deg,rgba(92,199,201,0.12),transparent 52%),
linear-gradient(135deg,rgba(255,255,255,0.13),rgba(255,255,255,0.035)),
rgba(0,0,0,0.32);
}

.keyboard-screen::after{
content:"";
position:absolute;
left:16px;
right:16px;
bottom:11px;
height:2px;
border-radius:999px;
background:linear-gradient(90deg,#b8ff4d,#5cc7c9,transparent);
transform:scaleX(var(--line-scale));
transform-origin:left;
box-shadow:0 0 18px rgba(92,199,201,0.45);
}

.keyboard-status{
display:block;
margin-bottom:12px;
color:#b8ff4d;
font-size:11px;
letter-spacing:0.04em;
}

.keyboard-typed{
position:relative;
display:block;
width:max-content;
max-width:100%;
color:#ffffff;
font-size:clamp(22px,2.35vw,32px);
line-height:1.08;
font-weight:900;
letter-spacing:0;
text-shadow:
0 0 20px rgba(92,199,201,0.32),
0 0 38px rgba(184,255,77,0.16);
clip-path:inset(0 calc(100% - var(--typed-reveal)) 0 0);
}

.keyboard-caret{
position:absolute;
left:auto;
right:calc(100% - var(--typed-reveal));
bottom:28px;
width:2px;
height:28px;
border-radius:999px;
background:#b8ff4d;
box-shadow:0 0 16px rgba(184,255,77,0.8);
animation:keyboardCaretBlink 0.72s steps(2,end) infinite;
}

.keyboard-deck{
grid-template-columns:repeat(4,minmax(0,1fr));
gap:9px;
margin-top:11px;
}

.keyboard-key{
min-height:34px;
border-color:rgba(255,255,255,0.14);
background:
linear-gradient(180deg,rgba(255,255,255,0.16),rgba(255,255,255,0.035)),
rgba(4,9,12,0.72);
transition:
transform 0.18s ease,
border-color 0.18s ease,
background 0.18s ease,
box-shadow 0.18s ease,
color 0.18s ease;
}

.key-service{
min-height:40px;
color:#dffcff;
font-size:12px;
}

.key-service::after{
content:"";
position:absolute;
left:12px;
right:12px;
bottom:7px;
height:2px;
border-radius:999px;
background:linear-gradient(90deg,#b8ff4d,#5cc7c9);
opacity:0.42;
}

.keyboard-key.is-pressed{
transform:translateY(5px) scale(0.985);
}

.key-space{
grid-column:span 4;
min-height:38px;
}

.keyboard-trail{
position:absolute;
inset:auto -12px -24px auto;
display:grid;
grid-template-columns:repeat(2,max-content);
gap:8px;
pointer-events:none;
}

.keyboard-trail span{
display:inline-flex;
align-items:center;
min-height:32px;
padding:0 10px;
border:1px solid rgba(92,199,201,0.26);
border-radius:999px;
background:rgba(4,12,14,0.72);
color:rgba(255,255,255,0.72);
font-size:10px;
font-weight:900;
box-shadow:0 12px 32px rgba(0,0,0,0.24);
}

@keyframes keyboardCaretBlink{
50%{
opacity:0;
}
}

@keyframes keyboardScan{
from{
background-position:0 0, -220px 0, 0 0;
}

to{
background-position:0 56px, 260px 0, 0 0;
}
}

@keyframes keyboardOrbit{
to{
transform:rotate(360deg);
}
}

.what-we-do-points{
position:relative;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
}

.what-we-do-points div{
position:relative;
min-height:168px;
padding:22px;
border:1px solid rgba(255,255,255,0.12);
border-radius:8px;
background:
radial-gradient(circle at 18% 16%,rgba(92,199,201,0.2),transparent 34%),
linear-gradient(150deg,rgba(255,255,255,0.1),rgba(255,255,255,0.025)),
rgba(0,0,0,0.24);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.025),
0 18px 60px rgba(0,0,0,0.28);
overflow:hidden;
transition:
transform 0.28s ease,
border-color 0.28s ease,
box-shadow 0.28s ease,
background 0.28s ease;
}

.what-we-do-points div::before{
content:"";
position:absolute;
left:18px;
right:18px;
top:0;
height:2px;
border-radius:999px;
background:linear-gradient(90deg,transparent,#b8ff4d,#5cc7c9,transparent);
box-shadow:0 0 18px rgba(92,199,201,0.4);
opacity:0.72;
}

.what-we-do-points div::after{
content:"";
position:absolute;
right:-32px;
bottom:-32px;
width:104px;
height:104px;
border:1px solid rgba(92,199,201,0.28);
border-radius:50%;
box-shadow:inset 0 0 28px rgba(92,199,201,0.12);
opacity:0.72;
}

.what-we-do-points div:nth-child(2){
background:
radial-gradient(circle at 18% 16%,rgba(184,255,77,0.15),transparent 34%),
linear-gradient(150deg,rgba(255,255,255,0.1),rgba(255,255,255,0.025)),
rgba(0,0,0,0.24);
}

.what-we-do-points div:nth-child(3){
background:
radial-gradient(circle at 18% 16%,rgba(103,97,222,0.2),transparent 34%),
linear-gradient(150deg,rgba(255,255,255,0.1),rgba(255,255,255,0.025)),
rgba(0,0,0,0.24);
}

.what-we-do-points div:hover{
transform:translateY(-8px);
border-color:rgba(92,199,201,0.45);
box-shadow:
0 24px 76px rgba(0,0,0,0.36),
0 0 34px rgba(92,199,201,0.12),
inset 0 0 0 1px rgba(255,255,255,0.05);
}

.what-we-do-points strong{
position:relative;
z-index:1;
display:block;
margin-bottom:12px;
color:#5cc7c9;
font-size:20px;
}

.what-we-do-points span{
position:relative;
z-index:1;
display:block;
color:rgba(255,255,255,0.68);
font-size:14px;
font-weight:700;
line-height:1.55;
}

@keyframes whatLightSweep{
0%,
34%{
transform:translateX(0) rotate(18deg);
opacity:0;
}

48%{
opacity:1;
}

72%,
100%{
transform:translateX(320%) rotate(18deg);
opacity:0;
}
}

.auto-click-ripple{
position:absolute;
left:var(--ripple-x);
top:var(--ripple-y);
width:18px;
height:18px;
border-radius:50%;
background:rgba(var(--bar-cyan-rgb),0.6);
box-shadow:0 0 24px rgba(var(--bar-cyan-rgb),0.72);
pointer-events:none;
transform:translate(-50%,-50%) scale(0);
animation:autoRipple 0.72s ease-out forwards;
z-index:3;
}

@keyframes autoScroll{
from{
transform:translateX(0);
}

to{
transform:translate3d(-25%,0,0);
}
}

@keyframes autoRipple{
to{
opacity:0;
transform:translate(-50%,-50%) scale(18);
}
}

/* ========================= */
/* SERVICES SHOWCASE */
/* ========================= */

.services{
--spot-x:50%;
--spot-y:50%;
position:relative;
min-height:980px;
padding:120px 60px 160px;
overflow:hidden;
background:
radial-gradient(circle at 18% 22%,rgba(103,97,222,0.2),transparent 28%),
radial-gradient(circle at 82% 76%,rgba(92,199,201,0.18),transparent 30%),
linear-gradient(180deg,#000 0%,#050711 45%,#000 100%);
}

.services::before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(rgba(255,255,255,0.035) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,0.035) 1px,transparent 1px);
background-size:72px 72px;
mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
pointer-events:none;
}

.services::after{
content:"";
position:absolute;
left:50%;
top:55%;
width:min(880px,80vw);
height:min(880px,80vw);
border:1px solid rgba(92,199,201,0.16);
border-radius:50%;
transform:translate(-50%,-50%);
box-shadow:
0 0 0 120px rgba(103,97,222,0.025),
0 0 0 240px rgba(92,199,201,0.018);
pointer-events:none;
}

.service-spotlight{
position:absolute;
left:var(--spot-x);
top:var(--spot-y);
width:520px;
height:520px;
background:
radial-gradient(circle,rgba(92,199,201,0.18),rgba(103,97,222,0.08) 38%,transparent 68%);
filter:blur(12px);
opacity:0;
pointer-events:none;
transform:translate(-50%,-50%) scale(0.85);
transition:opacity 0.25s ease,transform 0.25s ease;
z-index:1;
}

.services.is-hovering .service-spotlight{
opacity:1;
transform:translate(-50%,-50%) scale(1);
}

.services-header{
position:relative;
z-index:2;
max-width:720px;
margin:0 auto;
opacity:0;
transform:translateY(24px);
}

.service-kicker{
display:inline-flex;
padding:9px 14px;
border:1px solid rgba(92,199,201,0.4);
border-radius:8px;
background:rgba(255,255,255,0.04);
color:#5cc7c9;
font-size:12px;
font-weight:800;
letter-spacing:0;
text-transform:uppercase;
}

.services-header h2{
margin-top:18px;
font-size:58px;
line-height:1;
background:linear-gradient(90deg,#6761de,#5cc7c9);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.services-header p{
max-width:590px;
margin:18px auto 0;
color:rgba(255,255,255,0.68);
font-size:17px;
line-height:1.7;
}

.services-showcase{
position:relative;
z-index:2;
max-width:1180px;
min-height:690px;
margin:70px auto 0;
perspective:1200px;
transform-style:preserve-3d;
}

.services-showcase::before{
content:"";
position:absolute;
left:50%;
top:50%;
width:min(780px,78vw);
height:min(780px,78vw);
border-radius:50%;
background:
conic-gradient(from 0deg,rgba(92,199,201,0),rgba(92,199,201,0.22),rgba(103,97,222,0),rgba(103,97,222,0.18),rgba(92,199,201,0));
filter:blur(12px);
opacity:0.32;
transform:translate(-50%,-50%);
animation:serviceSpin 18s linear infinite;
pointer-events:none;
}

.service-orbits{
position:absolute;
inset:0;
pointer-events:none;
transform-style:preserve-3d;
}

.service-orbits span{
position:absolute;
left:50%;
top:50%;
border:1px solid rgba(255,255,255,0.12);
border-radius:50%;
transform:translate(-50%,-50%) rotateX(66deg);
box-shadow:0 0 36px rgba(92,199,201,0.08);
}

.service-orbits span:nth-child(1){
width:520px;
height:520px;
animation:serviceOrbitSpin 16s linear infinite;
}

.service-orbits span:nth-child(2){
width:760px;
height:760px;
border-style:dashed;
animation:serviceOrbitSpin 24s linear infinite reverse;
}

.service-orbits span:nth-child(3){
width:980px;
height:980px;
opacity:0.55;
animation:serviceOrbitSpin 34s linear infinite;
}

.service-energy{
position:absolute;
left:50%;
top:50%;
width:1px;
height:520px;
background:linear-gradient(180deg,transparent,rgba(92,199,201,0.42),transparent);
transform-origin:center;
opacity:0.32;
pointer-events:none;
}

.service-energy-one{
transform:translate(-50%,-50%) rotate(58deg);
}

.service-energy-two{
transform:translate(-50%,-50%) rotate(-36deg);
}

.service-core{
--core-reveal:0;
--core-x:0px;
--core-y:0px;
--core-scale:0.86;
position:absolute;
left:50%;
top:50%;
width:230px;
height:230px;
display:flex;
align-items:center;
justify-content:center;
border:1px solid rgba(255,255,255,0.16);
border-radius:8px;
background:
linear-gradient(145deg,rgba(255,255,255,0.16),rgba(255,255,255,0.04)),
linear-gradient(90deg,rgba(103,97,222,0.18),rgba(92,199,201,0.18));
box-shadow:
0 26px 70px rgba(0,0,0,0.5),
inset 0 0 30px rgba(255,255,255,0.06);
transform:translate(calc(-50% + var(--core-x)),calc(-50% + var(--core-y))) rotate(45deg) scale(var(--core-scale));
opacity:var(--core-reveal);
overflow:hidden;
}

.service-core::before{
content:"";
position:absolute;
inset:-40%;
background:conic-gradient(from 90deg,transparent,#6761de,#5cc7c9,transparent);
animation:serviceSpin 8s linear infinite;
opacity:0.5;
}

.service-core::after{
content:"";
position:absolute;
inset:3px;
border-radius:6px;
background:#050711;
}

.service-core-content{
position:relative;
z-index:1;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:8px;
width:168px;
min-height:120px;
padding:8px;
transform:rotate(-45deg);
text-align:center;
}

.service-core span{
display:block;
font-size:46px;
line-height:0.92;
font-weight:900;
background:linear-gradient(90deg,#6761de,#5cc7c9);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.service-core strong{
display:block;
width:100%;
font-size:13px;
letter-spacing:0;
text-transform:uppercase;
color:rgba(255,255,255,0.72);
line-height:1.18;
text-align:center;
text-wrap:balance;
overflow-wrap:break-word;
}

.service-card{
--orbit-x:0px;
--orbit-y:0px;
--orbit-rotate:0deg;
--active-scale:1;
position:absolute;
left:50%;
top:50%;
width:305px;
z-index:2;
transform:
translate(calc(-50% + var(--service-x) + var(--orbit-x)),calc(-50% + var(--service-y) + var(--orbit-y)))
rotate(var(--orbit-rotate))
scale(var(--active-scale));
transition:z-index 0s linear 0.2s;
will-change:transform;
}

.service-card.is-active{
--active-scale:1.08;
z-index:4;
}

.service-card-one{
--service-x:-365px;
--service-y:-205px;
}

.service-card-two{
--service-x:365px;
--service-y:-185px;
}

.service-card-three{
--service-x:-365px;
--service-y:170px;
}

.service-card-four{
--service-x:365px;
--service-y:175px;
}

.service-card-five{
--service-x:0px;
--service-y:300px;
}

.service-card-inner{
--reveal:0;
--enter-y:70px;
--float-y:0px;
--move-x:0px;
--move-y:0px;
--tilt-x:0deg;
--tilt-y:0deg;
--card-scale:0.88;
--card-blur:0px;
--active-glow:0;
position:relative;
min-height:190px;
padding:26px;
display:flex;
flex-direction:column;
justify-content:flex-end;
text-align:left;
border:1px solid rgba(255,255,255,0.14);
border-radius:8px;
background:
linear-gradient(145deg,rgba(255,255,255,0.12),rgba(255,255,255,0.035)),
linear-gradient(90deg,rgba(103,97,222,0.12),rgba(92,199,201,0.08));
box-shadow:
0 22px 55px rgba(0,0,0,0.45),
inset 0 0 28px rgba(255,255,255,0.04);
opacity:var(--reveal);
filter:none;
overflow:hidden;
cursor:pointer;
backface-visibility:hidden;
transform:
perspective(900px)
translate3d(var(--move-x),calc(var(--move-y) + var(--float-y) + var(--enter-y)),0)
rotateX(var(--tilt-x))
rotateY(var(--tilt-y))
scale(var(--card-scale));
transition:border-color 0.25s ease,box-shadow 0.25s ease,background 0.25s ease;
}

.service-card-inner::before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(120deg,transparent,rgba(92,199,201,0.24),transparent);
transform:translateX(-120%);
transition:transform 0.7s ease;
}

.service-card-inner::after{
content:"";
position:absolute;
left:0;
top:0;
width:100%;
height:4px;
background:linear-gradient(90deg,#6761de,#5cc7c9);
opacity:var(--active-glow);
box-shadow:0 0 28px rgba(92,199,201,0.65);
}

.service-card-inner:hover::before{
transform:translateX(120%);
}

.service-card-inner:hover{
border-color:rgba(92,199,201,0.65);
box-shadow:
0 0 28px rgba(92,199,201,0.22),
0 28px 70px rgba(0,0,0,0.55);
}

.service-card.is-active .service-card-inner{
--active-glow:1;
border-color:rgba(92,199,201,0.78);
background:
linear-gradient(145deg,rgba(255,255,255,0.17),rgba(255,255,255,0.055)),
linear-gradient(120deg,rgba(103,97,222,0.2),rgba(92,199,201,0.14));
box-shadow:
0 0 38px rgba(92,199,201,0.26),
0 32px 80px rgba(0,0,0,0.58),
inset 0 0 30px rgba(255,255,255,0.06);
}

.service-number{
position:absolute;
top:24px;
right:24px;
font-size:42px;
font-weight:900;
color:transparent;
-webkit-text-stroke:1px rgba(255,255,255,0.28);
}

.service-card h3{
position:relative;
font-size:24px;
line-height:1.1;
margin-bottom:14px;
color:white;
}

.service-card.is-active h3{
background:linear-gradient(90deg,#ffffff,#5cc7c9);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.service-card p{
position:relative;
color:rgba(255,255,255,0.68);
font-size:14px;
line-height:1.6;
}

@keyframes serviceSpin{
to{
transform:rotate(360deg);
}
}

@keyframes serviceOrbitSpin{
to{
transform:translate(-50%,-50%) rotateX(66deg) rotateZ(360deg);
}
}

/* ========================= */
/* PROJECTS MOTION LAB */
/* ========================= */

.projects-lab{
--project-mouse-x:50%;
--project-mouse-y:50%;
position:relative;
min-height:100vh;
padding:120px 60px 92px;
overflow:hidden;
isolation:isolate;
text-align:left;
background:
linear-gradient(180deg,#050506 0%,#0b0c12 46%,#040506 100%);
border-top:1px solid rgba(255,255,255,0.08);
border-bottom:1px solid rgba(255,255,255,0.08);
}

.projects-lab::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(
circle at var(--project-mouse-x) var(--project-mouse-y),
rgba(255,255,255,0.16),
rgba(92,199,201,0.08) 18%,
transparent 36%
);
opacity:0;
transition:opacity 0.35s ease;
z-index:-2;
}

.projects-lab.is-hovering::before{
opacity:1;
}

.projects-grid-bg{
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(255,255,255,0.055) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,0.055) 1px,transparent 1px);
background-size:70px 70px;
mask-image:linear-gradient(180deg,transparent,black 18%,black 84%,transparent);
opacity:0.42;
z-index:-3;
}

.projects-light-field span{
position:absolute;
width:48vw;
height:1px;
background:
linear-gradient(
90deg,
transparent,
rgba(92,199,201,0.72),
rgba(255,107,74,0.42),
transparent
);
transform-origin:center;
filter:drop-shadow(0 0 18px rgba(92,199,201,0.35));
animation:projectBeam 8s linear infinite;
z-index:-1;
}

.projects-light-field span:nth-child(1){
top:18%;
left:-12%;
transform:rotate(18deg);
}

.projects-light-field span:nth-child(2){
right:-8%;
top:48%;
animation-delay:-2.4s;
transform:rotate(-14deg);
}

.projects-light-field span:nth-child(3){
left:14%;
bottom:16%;
animation-delay:-4.8s;
transform:rotate(6deg);
}

.projects-header{
max-width:780px;
margin:0 auto 58px;
text-align:center;
opacity:0;
transform:translateY(38px);
}

.projects-kicker{
display:inline-flex;
align-items:center;
gap:10px;
margin-bottom:18px;
padding:9px 16px;
border:1px solid rgba(255,255,255,0.14);
border-radius:999px;
background:rgba(255,255,255,0.05);
color:#b8ff4d;
font-size:12px;
font-weight:900;
letter-spacing:0;
text-transform:uppercase;
}

.projects-kicker::before{
content:"";
display:inline-block;
width:7px;
height:7px;
background:#ff6b4a;
box-shadow:0 0 18px rgba(255,107,74,0.78);
}

.projects-header h2{
font-size:clamp(42px,7vw,92px);
line-height:0.96;
margin-bottom:22px;
background:linear-gradient(90deg,#ffffff,#5cc7c9 45%,#ff6b4a);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.projects-header p{
max-width:640px;
margin:0 auto;
color:rgba(255,255,255,0.68);
font-size:17px;
line-height:1.7;
}

.projects-stage{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:22px;
max-width:1240px;
margin:0 auto;
perspective:1200px;
}

.motion-project-card{
--card-y:72px;
--card-rotate:-3deg;
--float-y:0px;
--tilt-x:0deg;
--tilt-y:0deg;
--glow-x:50%;
--glow-y:50%;
--accent:#5cc7c9;
--accent-two:#ff6b4a;
position:relative;
display:flex;
flex-direction:column;
min-height:590px;
padding:18px;
overflow:hidden;
border:1px solid rgba(255,255,255,0.12);
border-radius:8px;
background:
linear-gradient(160deg,rgba(255,255,255,0.11),rgba(255,255,255,0.035)),
linear-gradient(180deg,rgba(255,255,255,0.055),rgba(0,0,0,0.25));
box-shadow:
0 30px 90px rgba(0,0,0,0.52),
inset 0 0 0 1px rgba(255,255,255,0.035);
opacity:0;
transform:
translateY(calc(var(--card-y) + var(--float-y)))
rotateX(var(--tilt-x))
rotateY(var(--tilt-y))
rotateZ(var(--card-rotate));
transform-style:preserve-3d;
will-change:transform,opacity;
}

.motion-project-card::before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(135deg,transparent,rgba(255,255,255,0.1),transparent);
opacity:0;
transition:opacity 0.35s ease;
pointer-events:none;
}

.motion-project-card:hover::before,
.motion-project-card.is-active::before{
opacity:1;
}

.project-card-one{
--accent:#5cc7c9;
--accent-two:#ff6b4a;
}

.project-card-two{
--accent:#b8ff4d;
--accent-two:#6761de;
}

.project-card-three{
--accent:#ff6b4a;
--accent-two:#5cc7c9;
}

.project-card-glow{
position:absolute;
inset:-1px;
background:
radial-gradient(
circle at var(--glow-x) var(--glow-y),
color-mix(in srgb,var(--accent) 32%,transparent),
transparent 34%
);
opacity:0;
transition:opacity 0.35s ease;
pointer-events:none;
}

.motion-project-card:hover .project-card-glow,
.motion-project-card.is-active .project-card-glow{
opacity:1;
}

.project-visual{
position:relative;
height:245px;
overflow:hidden;
border-radius:8px;
background:
linear-gradient(140deg,rgba(255,255,255,0.09),rgba(255,255,255,0.02)),
linear-gradient(180deg,rgba(0,0,0,0.18),rgba(0,0,0,0.56));
transform:translateZ(42px);
}

.project-visual::before{
content:"";
position:absolute;
inset:0;
background:
repeating-linear-gradient(
90deg,
rgba(255,255,255,0.08) 0 1px,
transparent 1px 18px
);
opacity:0.16;
}

.project-visual::after{
content:"";
position:absolute;
left:0;
right:0;
top:34%;
height:1px;
background:linear-gradient(90deg,transparent,var(--accent),transparent);
box-shadow:0 0 24px color-mix(in srgb,var(--accent) 70%,transparent);
}

.visual-frame,
.visual-ring,
.visual-line,
.visual-chip{
position:absolute;
display:block;
}

.visual-frame{
left:50%;
top:50%;
width:128px;
height:128px;
border:1px solid color-mix(in srgb,var(--accent) 68%,transparent);
transform:translate(-50%,-50%) rotate(45deg);
box-shadow:0 0 38px color-mix(in srgb,var(--accent) 22%,transparent);
}

.visual-ring{
left:50%;
top:50%;
border:1px solid rgba(255,255,255,0.24);
border-radius:50%;
opacity:0;
transform:translate(-50%,-50%) scale(0.72);
}

.visual-ring-large{
width:190px;
height:190px;
border-top-color:var(--accent);
border-right-color:transparent;
}

.visual-ring-small{
width:92px;
height:92px;
border-bottom-color:var(--accent-two);
border-left-color:transparent;
}

.visual-line{
height:3px;
border-radius:999px;
background:linear-gradient(90deg,var(--accent),var(--accent-two));
box-shadow:0 0 20px color-mix(in srgb,var(--accent) 50%,transparent);
}

.visual-line-one{
left:18px;
bottom:34px;
width:48%;
}

.visual-line-two{
right:22px;
top:28px;
width:34%;
}

.visual-chip{
width:58px;
height:42px;
border:1px solid rgba(255,255,255,0.18);
border-radius:6px;
background:rgba(255,255,255,0.08);
backdrop-filter:blur(12px);
}

.visual-chip-one{
left:28px;
top:34px;
}

.visual-chip-two{
right:28px;
bottom:28px;
}

.project-visual-cinema .visual-frame{
width:150px;
height:94px;
border-radius:6px;
transform:translate(-50%,-50%) rotate(-8deg);
}

.project-visual-product .visual-frame{
clip-path:polygon(50% 0,100% 28%,100% 72%,50% 100%,0 72%,0 28%);
transform:translate(-50%,-50%) rotate(0deg);
}

.project-visual-ai .visual-frame{
border-radius:50%;
transform:translate(-50%,-50%) rotate(0deg);
}

.project-copy{
position:relative;
z-index:1;
display:flex;
flex-direction:column;
gap:13px;
padding:26px 4px 20px;
transform:translateZ(34px);
}

.project-number{
font-size:58px;
line-height:0.85;
font-weight:900;
color:transparent;
-webkit-text-stroke:1px color-mix(in srgb,var(--accent) 72%,rgba(255,255,255,0.2));
}

.project-type{
color:var(--accent);
font-size:12px;
font-weight:900;
letter-spacing:0;
text-transform:uppercase;
}

.project-copy h3{
font-size:30px;
line-height:1.08;
color:white;
}

.project-copy p{
color:rgba(255,255,255,0.68);
font-size:15px;
line-height:1.65;
}

.project-tags{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:4px;
}

.project-tags span{
padding:7px 10px;
border:1px solid rgba(255,255,255,0.12);
border-radius:999px;
background:rgba(255,255,255,0.06);
color:rgba(255,255,255,0.72);
font-size:12px;
font-weight:800;
}

.project-btn{
position:relative;
z-index:2;
display:inline-flex;
align-items:center;
justify-content:center;
width:max-content;
margin:auto 4px 4px;
padding:13px 22px;
border:1px solid color-mix(in srgb,var(--accent) 62%,rgba(255,255,255,0.18));
border-radius:999px;
background:
linear-gradient(90deg,var(--accent),var(--accent-two));
color:#050505;
font-size:13px;
font-weight:900;
text-decoration:none;
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
}

.project-btn:hover{
transform:translateY(-4px);
box-shadow:0 0 26px color-mix(in srgb,var(--accent) 48%,transparent);
}

.project-marquee{
max-width:1240px;
height:54px;
margin:36px auto 0;
overflow:hidden;
border-top:1px solid rgba(255,255,255,0.1);
border-bottom:1px solid rgba(255,255,255,0.1);
}

.project-marquee-track{
display:flex;
align-items:center;
height:100%;
width:max-content;
will-change:transform;
transform:translate3d(0,0,0);
backface-visibility:hidden;
}

.project-marquee-track span{
display:flex;
align-items:center;
padding:0 30px;
color:rgba(255,255,255,0.42);
font-size:13px;
font-weight:900;
text-transform:uppercase;
white-space:nowrap;
}

.project-marquee-track span::after{
content:"";
width:8px;
height:8px;
margin-left:30px;
border:1px solid rgba(255,255,255,0.24);
transform:rotate(45deg);
}

@keyframes projectBeam{
0%{
opacity:0;
translate:-12% 0;
}

20%,
80%{
opacity:1;
}

100%{
opacity:0;
translate:16% 0;
}
}

/* ========================= */
/* LIVE TRANSLATE MOTION CONSOLE */
/* ========================= */

.live-translate{
--translate-x:50%;
--translate-y:50%;
position:relative;
padding:120px 60px;
overflow:hidden;
isolation:isolate;
background:
linear-gradient(180deg,#040404 0%,#08100f 48%,#050506 100%);
border-bottom:1px solid rgba(255,255,255,0.08);
}

.live-translate::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(
circle at var(--translate-x) var(--translate-y),
rgba(184,255,77,0.13),
rgba(92,199,201,0.09) 22%,
transparent 44%
);
opacity:0;
transition:opacity 0.3s ease;
z-index:-2;
}

.live-translate.is-hovering::before{
opacity:1;
}

.translate-grid-bg,
.video-grid-bg{
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(255,255,255,0.045) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,0.045) 1px,transparent 1px);
background-size:64px 64px;
mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);
opacity:0.44;
z-index:-3;
}

.translate-signal-field span,
.video-light-lines span{
position:absolute;
height:1px;
background:linear-gradient(90deg,transparent,rgba(184,255,77,0.65),rgba(92,199,201,0.42),transparent);
box-shadow:0 0 24px rgba(184,255,77,0.18);
z-index:-1;
}

.translate-signal-field span:nth-child(1){
top:18%;
left:-8%;
width:52vw;
transform:rotate(-10deg);
animation:projectBeam 9s linear infinite;
}

.translate-signal-field span:nth-child(2){
top:52%;
right:-12%;
width:56vw;
transform:rotate(9deg);
animation:projectBeam 11s linear infinite reverse;
}

.translate-signal-field span:nth-child(3){
bottom:18%;
left:16%;
width:44vw;
transform:rotate(2deg);
animation:projectBeam 10s linear infinite;
animation-delay:-4s;
}

.translate-header,
.video-header{
position:relative;
max-width:760px;
margin:0 auto 54px;
text-align:center;
opacity:0;
transform:translateY(34px);
z-index:2;
}

.translate-kicker,
.video-kicker{
display:inline-flex;
align-items:center;
gap:10px;
margin-bottom:18px;
padding:9px 16px;
border:1px solid rgba(255,255,255,0.14);
border-radius:999px;
background:rgba(255,255,255,0.05);
color:#b8ff4d;
font-size:12px;
font-weight:900;
text-transform:uppercase;
}

.translate-kicker::before,
.video-kicker::before{
content:"";
display:inline-block;
width:7px;
height:7px;
background:#ff6b4a;
box-shadow:0 0 18px rgba(255,107,74,0.78);
}

.live-title,
.video-title{
font-size:clamp(40px,6vw,76px);
line-height:0.98;
margin-bottom:20px;
background:linear-gradient(90deg,#ffffff,#b8ff4d 46%,#5cc7c9);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.translate-header p,
.video-header p{
max-width:650px;
margin:0 auto;
color:rgba(255,255,255,0.68);
font-size:17px;
line-height:1.7;
}

.translate-container{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0,1fr) minmax(320px,0.82fr);
gap:22px;
max-width:1180px;
margin:0 auto;
perspective:1200px;
}

.translate-panel{
--panel-y:54px;
--tilt-x:0deg;
--tilt-y:0deg;
position:relative;
min-height:560px;
padding:28px;
overflow:hidden;
border:1px solid rgba(255,255,255,0.12);
border-radius:8px;
background:
linear-gradient(145deg,rgba(255,255,255,0.11),rgba(255,255,255,0.035)),
linear-gradient(180deg,rgba(11,19,18,0.86),rgba(0,0,0,0.46));
box-shadow:
0 32px 90px rgba(0,0,0,0.52),
inset 0 0 0 1px rgba(255,255,255,0.04);
opacity:0;
transform:
translateY(var(--panel-y))
rotateX(var(--tilt-x))
rotateY(var(--tilt-y));
transform-style:preserve-3d;
will-change:transform,opacity;
}

.translate-panel::before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(90deg,transparent,rgba(184,255,77,0.1),transparent);
transform:translateX(-120%);
pointer-events:none;
}

.translate-panel.is-active::before{
animation:panelSweep 1.6s ease;
}

.signal-stack{
position:absolute;
left:28px;
right:28px;
top:28px;
display:grid;
gap:12px;
opacity:0.42;
}

.signal-stack span{
height:2px;
border-radius:999px;
background:linear-gradient(90deg,#b8ff4d,transparent);
transform-origin:left center;
}

.ai-avatar{
position:relative;
width:min(360px,70vw);
height:min(360px,70vw);
margin:38px auto 26px;
display:grid;
place-items:center;
transform:translateZ(44px);
}

.avatar-ring,
.voice-node{
position:absolute;
display:block;
border-radius:50%;
}

.avatar-ring{
border:1px solid rgba(255,255,255,0.16);
}

.avatar-ring-one{
width:100%;
height:100%;
border-top-color:#b8ff4d;
border-right-color:transparent;
}

.avatar-ring-two{
width:76%;
height:76%;
border-bottom-color:#5cc7c9;
border-left-color:transparent;
}

.avatar-ring-three{
width:52%;
height:52%;
border-top-color:#ff6b4a;
border-right-color:transparent;
}

.ai-face{
position:relative;
width:148px;
height:178px;
border:1px solid rgba(184,255,77,0.5);
border-radius:48% 48% 42% 42%;
background:
radial-gradient(circle at 50% 32%,rgba(255,255,255,0.34),transparent 10%),
linear-gradient(180deg,#f4c4ad 0%,#d99284 68%,#b87374 100%);
box-shadow:
0 0 44px rgba(184,255,77,0.16),
inset 0 0 34px rgba(255,255,255,0.16);
}

.ai-face::before{
content:"";
position:absolute;
left:-19px;
right:-19px;
top:-16px;
height:78px;
border-radius:58% 58% 30% 30%;
background:
radial-gradient(circle at 18% 74%,transparent 0 18px,#17151b 19px),
linear-gradient(135deg,#17151b,#36303d 52%,#17151b);
box-shadow:0 16px 24px rgba(0,0,0,0.28);
z-index:2;
pointer-events:none;
}

.ai-face::after{
content:"";
position:absolute;
left:50%;
bottom:-48px;
width:172px;
height:76px;
border:1px solid rgba(255,255,255,0.12);
border-radius:50% 50% 24px 24px;
background:
linear-gradient(135deg,rgba(184,255,77,0.18),rgba(92,199,201,0.14)),
rgba(255,255,255,0.05);
transform:translateX(-50%);
z-index:-1;
}

.ai-hair{
position:absolute;
top:28px;
width:40px;
height:112px;
border-radius:999px;
background:linear-gradient(180deg,#191720,#332a37);
z-index:1;
}

.ai-hair-left{
left:-22px;
transform:rotate(10deg);
}

.ai-hair-right{
right:-22px;
transform:rotate(-10deg);
}

.ai-eye{
position:absolute;
top:62px;
width:16px;
height:16px;
border-radius:50%;
background:#20161c;
box-shadow:
0 0 0 4px rgba(255,255,255,0.24),
0 0 18px rgba(184,255,77,0.42);
z-index:3;
}

.ai-eye-left{
left:42px;
}

.ai-eye-right{
right:42px;
}

.ai-cheek{
position:absolute;
top:94px;
width:22px;
height:10px;
border-radius:50%;
background:rgba(255,107,116,0.34);
filter:blur(1px);
z-index:3;
}

.ai-cheek-left{
left:27px;
}

.ai-cheek-right{
right:27px;
}

.ai-nose{
position:absolute;
left:50%;
top:86px;
width:1px;
height:28px;
background:rgba(255,255,255,0.28);
transform:translateX(-50%);
z-index:3;
}

.mouth{
position:absolute;
left:50%;
bottom:38px;
width:48px;
height:9px;
border-radius:999px;
background:#9d3042;
box-shadow:0 0 18px rgba(255,107,74,0.7);
transform:translateX(-50%);
z-index:3;
}

.ai-shoulder{
position:absolute;
left:50%;
bottom:-67px;
width:210px;
height:64px;
border-radius:70px 70px 24px 24px;
background:linear-gradient(90deg,#5cc7c9,#b8ff4d,#ff6b4a);
opacity:0.28;
filter:blur(0.3px);
transform:translateX(-50%);
z-index:-2;
}

.mouth.talking{
animation:mouthTalk 0.18s infinite alternate ease-in-out;
}

.ai-avatar.speaking .avatar-ring{
box-shadow:0 0 32px rgba(184,255,77,0.18);
}

.ai-avatar.speaking .ai-eye{
background:#b8ff4d;
box-shadow:
0 0 0 4px rgba(255,255,255,0.24),
0 0 22px rgba(184,255,77,0.78);
}

.voice-node{
width:12px;
height:12px;
background:#5cc7c9;
box-shadow:0 0 18px rgba(92,199,201,0.76);
}

.voice-node-one{
left:9%;
top:28%;
}

.voice-node-two{
right:13%;
top:22%;
background:#b8ff4d;
}

.voice-node-three{
right:22%;
bottom:12%;
background:#ff6b4a;
}

.subtitle-box{
position:relative;
display:grid;
gap:10px;
padding:22px;
border:1px solid rgba(255,255,255,0.12);
border-radius:8px;
background:rgba(0,0,0,0.28);
text-align:left;
transform:translateZ(30px);
}

.subtitle-label,
.input-kicker{
color:#b8ff4d;
font-size:12px;
font-weight:900;
text-transform:uppercase;
}

#subtitleText{
min-height:54px;
color:white;
font-size:22px;
font-weight:800;
line-height:1.35;
}

.caption-wave{
display:flex;
align-items:end;
justify-content:center;
gap:8px;
height:58px;
margin-top:20px;
}

.caption-wave span{
width:8px;
height:22px;
border-radius:999px;
background:linear-gradient(180deg,#b8ff4d,#5cc7c9);
transform-origin:bottom;
animation:waveBounce 1.1s ease-in-out infinite;
}

.caption-wave span:nth-child(2){
animation-delay:0.12s;
}

.caption-wave span:nth-child(3){
animation-delay:0.24s;
}

.caption-wave span:nth-child(4){
animation-delay:0.36s;
}

.caption-wave span:nth-child(5){
animation-delay:0.48s;
}

.input-section{
display:flex;
flex-direction:column;
gap:18px;
}

.input-section textarea{
width:100%;
min-height:260px;
resize:vertical;
border:1px solid rgba(255,255,255,0.14);
border-radius:8px;
padding:20px;
background:rgba(0,0,0,0.32);
color:white;
font-size:17px;
line-height:1.6;
outline:none;
transition:border-color 0.25s ease,box-shadow 0.25s ease;
}

.input-section textarea:focus,
.input-section select:focus{
border-color:rgba(184,255,77,0.72);
box-shadow:0 0 0 4px rgba(184,255,77,0.1);
}

.translate-controls{
display:grid;
grid-template-columns:1fr auto;
gap:12px;
}

.input-section select{
min-height:52px;
border:1px solid rgba(255,255,255,0.14);
border-radius:8px;
padding:0 16px;
background:#0d1110;
color:white;
font-weight:800;
outline:none;
}

.translate-btn{
min-height:52px;
padding:0 24px;
border:none;
border-radius:999px;
background:linear-gradient(90deg,#b8ff4d,#5cc7c9,#ff6b4a);
color:#050505;
font-size:14px;
font-weight:900;
cursor:pointer;
transition:transform 0.28s ease,box-shadow 0.28s ease;
}

.translate-btn:hover{
transform:translateY(-3px);
box-shadow:0 0 28px rgba(184,255,77,0.34);
}

.language-strip{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:auto;
}

.language-strip span{
display:grid;
place-items:center;
width:46px;
height:46px;
border:1px solid rgba(255,255,255,0.12);
border-radius:50%;
background:rgba(255,255,255,0.06);
color:rgba(255,255,255,0.72);
font-size:12px;
font-weight:900;
}

@keyframes mouthTalk{
from{
height:8px;
}

to{
height:28px;
border-radius:18px;
}
}

@keyframes waveBounce{
0%,
100%{
transform:scaleY(0.55);
}

50%{
transform:scaleY(1.8);
}
}

@keyframes panelSweep{
to{
transform:translateX(120%);
}
}

/* ========================= */
/* VIDEO MOTION LAB */
/* ========================= */

.video-lab{
--video-x:50%;
--video-y:50%;
position:relative;
padding:120px 60px 105px;
overflow:hidden;
isolation:isolate;
background:
linear-gradient(180deg,#050506 0%,#0d0b10 52%,#050505 100%);
border-bottom:1px solid rgba(255,255,255,0.08);
}

.video-lab::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(
circle at var(--video-x) var(--video-y),
rgba(255,107,74,0.15),
rgba(92,199,201,0.08) 26%,
transparent 48%
);
opacity:0;
transition:opacity 0.3s ease;
z-index:-2;
}

.video-lab.is-hovering::before{
opacity:1;
}

.video-light-lines span:nth-child(1){
top:26%;
left:-10%;
width:54vw;
transform:rotate(12deg);
animation:projectBeam 10s linear infinite;
}

.video-light-lines span:nth-child(2){
right:-10%;
bottom:24%;
width:56vw;
transform:rotate(-10deg);
animation:projectBeam 12s linear infinite reverse;
}

.video-header .video-title{
background:linear-gradient(90deg,#ffffff,#ff6b4a 45%,#5cc7c9);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.video-stage{
position:relative;
z-index:2;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:22px;
max-width:1240px;
margin:0 auto;
perspective:1200px;
}

.video-card{
--card-y:62px;
--card-rotate:-2deg;
--tilt-x:0deg;
--tilt-y:0deg;
position:relative;
display:flex;
flex-direction:column;
gap:22px;
padding:16px;
min-height:520px;
overflow:hidden;
border:1px solid rgba(255,255,255,0.12);
border-radius:8px;
background:
linear-gradient(155deg,rgba(255,255,255,0.12),rgba(255,255,255,0.035)),
rgba(0,0,0,0.3);
box-shadow:
0 32px 90px rgba(0,0,0,0.52),
inset 0 0 0 1px rgba(255,255,255,0.035);
opacity:0;
transform:
translateY(var(--card-y))
rotateX(var(--tilt-x))
rotateY(var(--tilt-y))
rotateZ(var(--card-rotate));
transform-style:preserve-3d;
will-change:transform,opacity;
}

.video-card::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(120deg,transparent,rgba(255,255,255,0.12),transparent);
opacity:0;
transition:opacity 0.3s ease;
pointer-events:none;
}

.video-card:hover::before,
.video-card.is-active::before{
opacity:1;
}

.video-frame{
position:relative;
overflow:hidden;
aspect-ratio:16/10;
border-radius:8px;
background:#050505;
transform:translateZ(36px);
}

.video-frame video{
width:100%;
height:100%;
object-fit:cover;
filter:saturate(1.08) contrast(1.08);
transform:scale(1.03);
transition:transform 0.55s ease,filter 0.55s ease;
}

.video-card:hover video,
.video-card.is-active video{
transform:scale(1.1);
filter:saturate(1.18) contrast(1.12);
}

.video-scan{
position:absolute;
inset:0;
background:
linear-gradient(180deg,transparent,rgba(255,255,255,0.16),transparent),
repeating-linear-gradient(0deg,rgba(255,255,255,0.04) 0 1px,transparent 1px 8px);
mix-blend-mode:screen;
opacity:0.35;
transform:translateY(-100%);
pointer-events:none;
}

.play-overlay{
position:absolute;
left:50%;
top:50%;
display:grid;
place-items:center;
width:76px;
height:76px;
border:1px solid rgba(255,255,255,0.24);
border-radius:50%;
background:rgba(0,0,0,0.42);
backdrop-filter:blur(12px);
transform:translate(-50%,-50%) scale(0.96);
transition:opacity 0.25s ease,transform 0.25s ease;
}

.play-overlay span{
display:block;
width:0;
height:0;
margin-left:5px;
border-top:13px solid transparent;
border-bottom:13px solid transparent;
border-left:20px solid white;
}

.video-card:hover .play-overlay,
.video-card.is-active .play-overlay{
opacity:0;
transform:translate(-50%,-50%) scale(1.16);
}

.video-copy{
position:relative;
z-index:1;
display:grid;
gap:12px;
text-align:left;
transform:translateZ(26px);
}

.video-number{
font-size:54px;
line-height:0.9;
font-weight:900;
color:transparent;
-webkit-text-stroke:1px rgba(255,107,74,0.62);
}

.video-card-two .video-number{
-webkit-text-stroke-color:rgba(184,255,77,0.62);
}

.video-card-three .video-number{
-webkit-text-stroke-color:rgba(92,199,201,0.62);
}

.video-copy h3{
color:white;
font-size:28px;
line-height:1.1;
}

.video-copy p{
color:rgba(255,255,255,0.68);
font-size:15px;
line-height:1.65;
}

.video-tags{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:4px;
}

.video-tags span{
padding:7px 10px;
border:1px solid rgba(255,255,255,0.12);
border-radius:999px;
background:rgba(255,255,255,0.06);
color:rgba(255,255,255,0.74);
font-size:12px;
font-weight:800;
}

.video-timeline{
position:relative;
z-index:2;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px;
max-width:780px;
height:8px;
margin:42px auto 0;
}

.video-timeline span{
--bar-scale:0;
border-radius:999px;
background:rgba(255,255,255,0.1);
overflow:hidden;
}

.video-timeline span::before{
content:"";
display:block;
width:100%;
height:100%;
background:linear-gradient(90deg,#ff6b4a,#b8ff4d,#5cc7c9);
transform:scaleX(var(--bar-scale));
transform-origin:left center;
}

/* ========================= */
/* INNER PAGES */
/* ========================= */

.inner-page{
background:#050505;
}

.subpage-hero{
position:relative;
min-height:76svh;
display:grid;
place-items:center;
overflow:hidden;
isolation:isolate;
padding:132px 40px 76px;
text-align:center;
background:
radial-gradient(circle at 16% 20%,rgba(103,97,222,0.18),transparent 30%),
radial-gradient(circle at 84% 78%,rgba(92,199,201,0.12),transparent 32%),
linear-gradient(180deg,#020203 0%,#07100f 100%);
}

.subpage-hero::after,
.page-section::before{
content:"";
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(255,255,255,0.045) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,0.045) 1px,transparent 1px);
background-size:68px 68px;
mask-image:linear-gradient(180deg,transparent,#000 16%,#000 86%,transparent);
opacity:0.42;
z-index:-2;
}

.subpage-hero-content{
position:relative;
z-index:2;
width:min(100%,900px);
max-width:900px;
display:flex;
flex-direction:column;
align-items:center;
}

.subpage-kicker,
.form-kicker,
.pricing-badge{
display:inline-flex;
align-items:center;
gap:10px;
margin-bottom:18px;
padding:9px 16px;
border:1px solid rgba(255,255,255,0.14);
border-radius:999px;
background:rgba(255,255,255,0.05);
color:#b8ff4d;
font-size:12px;
font-weight:900;
text-transform:uppercase;
}

.subpage-kicker::before,
.form-kicker::before,
.pricing-badge::before{
content:"";
display:inline-block;
width:7px;
height:7px;
background:#ff6b4a;
box-shadow:0 0 18px rgba(255,107,74,0.78);
}

.subpage-hero h1{
font-size:clamp(42px,6.2vw,76px);
line-height:1.02;
max-width:900px;
margin:0 auto 18px;
background:linear-gradient(90deg,#ffffff,#b8ff4d 48%,#5cc7c9);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.subpage-hero p{
max-width:680px;
margin:0 auto;
color:rgba(255,255,255,0.68);
font-size:17px;
line-height:1.55;
}

.page-section{
position:relative;
overflow:hidden;
isolation:isolate;
padding:105px 60px;
background:
radial-gradient(circle at 18% 18%,rgba(184,255,77,0.1),transparent 30%),
linear-gradient(180deg,#050505 0%,#07100f 100%);
}

.page-grid{
display:grid;
grid-template-columns:minmax(0,0.85fr) minmax(320px,0.72fr);
gap:26px;
max-width:1240px;
margin:0 auto;
align-items:start;
}

.page-card,
.form-panel,
.pricing-card{
position:relative;
border:1px solid rgba(255,255,255,0.12);
border-radius:8px;
background:
linear-gradient(145deg,rgba(255,255,255,0.105),rgba(255,255,255,0.035)),
rgba(0,0,0,0.3);
box-shadow:
0 28px 80px rgba(0,0,0,0.42),
inset 0 0 0 1px rgba(255,255,255,0.03);
}

.page-card,
.form-panel{
padding:28px;
text-align:left;
}

.page-card h2,
.form-panel h2{
color:white;
font-size:clamp(28px,3vw,42px);
line-height:1.05;
margin-bottom:18px;
}

.page-card p,
.form-panel p{
color:rgba(255,255,255,0.68);
font-size:15px;
line-height:1.75;
}

.job-list{
display:grid;
gap:14px;
margin-top:26px;
}

.job-item{
display:grid;
gap:8px;
padding:18px;
border:1px solid rgba(255,255,255,0.1);
border-radius:8px;
background:rgba(255,255,255,0.045);
}

.job-item strong{
color:#5cc7c9;
font-size:19px;
}

.job-item span{
color:rgba(255,255,255,0.65);
font-size:13px;
font-weight:800;
}

.form-grid{
display:grid;
gap:14px;
margin-top:22px;
}

.form-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.form-field{
display:grid;
gap:8px;
}

.form-field label{
color:rgba(255,255,255,0.72);
font-size:12px;
font-weight:900;
text-transform:uppercase;
}

.form-field input,
.form-field textarea,
.form-field select{
width:100%;
min-height:52px;
border:1px solid rgba(255,255,255,0.14);
border-radius:8px;
padding:0 16px;
background:rgba(0,0,0,0.32);
color:white;
outline:none;
transition:border-color 0.25s ease,box-shadow 0.25s ease;
}

.form-field textarea{
min-height:138px;
padding:16px;
resize:vertical;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus{
border-color:rgba(184,255,77,0.72);
box-shadow:0 0 0 4px rgba(184,255,77,0.1);
}

.form-note{
padding:14px 16px;
border:1px solid rgba(92,199,201,0.24);
border-radius:8px;
background:rgba(92,199,201,0.07);
color:rgba(255,255,255,0.7);
font-size:13px;
line-height:1.6;
}

.action-row{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-top:22px;
}

.action-button,
.outline-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:52px;
padding:0 24px;
border-radius:999px;
font-size:13px;
font-weight:900;
text-decoration:none;
cursor:pointer;
transition:transform 0.25s ease,box-shadow 0.25s ease,background 0.25s ease;
}

.action-button{
border:none;
background:linear-gradient(90deg,#6761de,#5cc7c9);
color:#050505;
}

.outline-button{
border:1px solid rgba(92,199,201,0.64);
background:transparent;
color:#5cc7c9;
}

.action-button:hover,
.outline-button:hover{
transform:translateY(-3px);
box-shadow:0 0 26px rgba(92,199,201,0.24);
}

.pricing-section{
position:relative;
overflow:hidden;
isolation:isolate;
padding:120px 60px;
background:
radial-gradient(circle at 0 0,rgba(103,97,222,0.18),transparent 34%),
radial-gradient(circle at 100% 100%,rgba(92,199,201,0.13),transparent 34%),
linear-gradient(180deg,#080711 0%,#05100f 100%);
}

.pricing-header{
max-width:860px;
margin:0 auto 52px;
text-align:center;
}

.pricing-header h1{
font-size:clamp(42px,6vw,72px);
line-height:1;
color:white;
margin-bottom:20px;
}

.pricing-header p{
color:rgba(255,255,255,0.68);
font-size:18px;
line-height:1.7;
}

.pricing-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:24px;
max-width:1240px;
margin:0 auto;
}

.pricing-card{
display:flex;
flex-direction:column;
min-height:610px;
padding:42px;
text-align:left;
}

.pricing-card.is-featured{
border-color:rgba(103,97,222,0.8);
box-shadow:
0 28px 80px rgba(0,0,0,0.46),
0 0 0 1px rgba(103,97,222,0.45),
0 0 42px rgba(103,97,222,0.14);
}

.pricing-card h2{
color:white;
font-size:32px;
margin-bottom:28px;
}

.price{
display:block;
color:#5fe1f7;
font-size:clamp(54px,6vw,78px);
font-weight:900;
line-height:0.95;
}

.price-caption{
display:block;
margin-top:12px;
color:rgba(255,255,255,0.58);
font-size:18px;
font-weight:800;
}

.pricing-list{
display:grid;
gap:18px;
margin:34px 0;
padding:0;
list-style:none;
}

.pricing-list li{
position:relative;
padding-left:28px;
color:rgba(255,255,255,0.72);
font-size:16px;
font-weight:800;
line-height:1.35;
}

.pricing-list li::before{
content:"✓";
position:absolute;
left:0;
color:#5fe1f7;
font-weight:900;
}

.pricing-card .action-button,
.pricing-card .outline-button{
width:100%;
margin-top:auto;
}

.package-request{
display:none;
max-width:860px;
margin:34px auto 0;
}

.package-request.is-visible{
display:block;
}

.selected-plan-label{
color:#5cc7c9;
font-weight:900;
}

/* ========================= */
/* FOOTER */
/* ========================= */

.site-footer{
position:relative;
overflow:hidden;
isolation:isolate;
padding:88px 60px 28px;
color:white;
background:
radial-gradient(circle at 16% 0%,rgba(184,255,77,0.12),transparent 30%),
radial-gradient(circle at 84% 100%,rgba(92,199,201,0.12),transparent 32%),
linear-gradient(180deg,#050505 0%,#07100f 100%);
border-top:1px solid rgba(255,255,255,0.08);
}

.footer-grid-bg{
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(255,255,255,0.04) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,0.04) 1px,transparent 1px);
background-size:68px 68px;
mask-image:linear-gradient(180deg,#000,transparent 92%);
opacity:0.48;
z-index:-2;
}

.footer-main{
display:grid;
grid-template-columns:minmax(280px,1.4fr) repeat(3,minmax(180px,1fr));
gap:28px;
max-width:1240px;
margin:0 auto;
text-align:left;
}

.footer-brand,
.footer-column{
padding:24px;
border:1px solid rgba(255,255,255,0.1);
border-radius:8px;
background:rgba(255,255,255,0.04);
box-shadow:inset 0 0 0 1px rgba(255,255,255,0.025);
}

.footer-logo{
display:inline-flex;
align-items:center;
gap:10px;
margin-bottom:20px;
color:white;
font-size:20px;
font-weight:900;
text-decoration:none;
}

.footer-brand p,
.footer-column p,
.footer-column a,
.footer-bottom{
color:rgba(255,255,255,0.66);
font-size:14px;
line-height:1.7;
}

.footer-brand p{
max-width:390px;
}

.footer-social{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:22px;
}

.footer-social a,
.footer-column a{
text-decoration:none;
transition:color 0.25s ease,transform 0.25s ease;
}

.footer-social a{
padding:8px 12px;
border:1px solid rgba(255,255,255,0.12);
border-radius:999px;
background:rgba(255,255,255,0.05);
color:rgba(255,255,255,0.74);
font-size:12px;
font-weight:900;
}

.footer-social a:hover,
.footer-column a:hover{
color:#b8ff4d;
transform:translateY(-2px);
}

.footer-column{
display:flex;
flex-direction:column;
gap:10px;
}

.footer-column h3{
margin-bottom:8px;
color:#b8ff4d;
font-size:15px;
text-transform:uppercase;
}

.footer-contact a:last-child{
color:#5cc7c9;
font-weight:900;
}

.footer-bottom{
display:flex;
align-items:center;
justify-content:space-between;
flex-wrap:wrap;
gap:18px;
max-width:1240px;
margin:28px auto 0;
padding-top:24px;
border-top:1px solid rgba(255,255,255,0.1);
}

.credit-link{
color:#5cc7c9;
font-weight:900;
text-decoration:none;
transition:color 0.25s ease;
}

.credit-link:hover{
color:#b8ff4d;
}

body.light-theme{
background:#f5f7f1;
color:#080b0d;
}

body.light-theme .loader{
background:#f5f7f1;
color:#080b0d;
}

body.light-theme .navbar{
background:rgba(255,255,255,0.78);
border-color:rgba(5,10,12,0.12);
box-shadow:
0 18px 54px rgba(24,40,32,0.16),
inset 0 0 0 1px rgba(255,255,255,0.72);
}

body.light-theme .logo,
body.light-theme .nav-links a,
body.light-theme .footer-logo{
color:#080b0d;
}

body.light-theme .hero,
body.light-theme .intro,
body.light-theme .auto-scroll-bar,
body.light-theme .services,
body.light-theme .projects-lab,
body.light-theme .live-translate,
body.light-theme .video-lab,
body.light-theme .subpage-hero,
body.light-theme .page-section,
body.light-theme .pricing-section,
body.light-theme .site-footer{
background:
radial-gradient(circle at 18% 22%,rgba(184,255,77,0.16),transparent 30%),
radial-gradient(circle at 82% 78%,rgba(92,199,201,0.12),transparent 30%),
linear-gradient(180deg,#ffffff 0%,#edf4eb 100%);
color:#080b0d;
}

body.light-theme #stars{
opacity:0.22;
filter:invert(1);
}

body.light-theme .hero-title,
body.light-theme .what-we-do h2,
body.light-theme .intro h1,
body.light-theme .services-header h2,
body.light-theme .projects-header h2,
body.light-theme .live-title,
body.light-theme .video-title,
body.light-theme .subpage-hero h1{
background:linear-gradient(90deg,#080b0d,#4e8c3c 46%,#0b8990);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

body.light-theme .hero-text,
body.light-theme .what-we-do p,
body.light-theme .intro p,
body.light-theme .services-header p,
body.light-theme .service-card p,
body.light-theme .projects-header p,
body.light-theme .translate-header p,
body.light-theme .video-header p,
body.light-theme .subpage-hero p,
body.light-theme .pricing-header p,
body.light-theme .page-card p,
body.light-theme .form-panel p,
body.light-theme .job-item span,
body.light-theme .form-note,
body.light-theme .project-copy p,
body.light-theme .video-copy p,
body.light-theme .project-marquee-track span,
body.light-theme .footer-brand p,
body.light-theme .footer-column p,
body.light-theme .footer-column a,
body.light-theme .footer-bottom{
color:rgba(8,11,13,0.68);
}

body.light-theme .intro-metrics div,
body.light-theme .what-we-do-points div,
body.light-theme .device-screen,
body.light-theme .service-card-inner,
body.light-theme .motion-project-card,
body.light-theme .translate-panel,
body.light-theme .video-card,
body.light-theme .page-card,
body.light-theme .form-panel,
body.light-theme .pricing-card,
body.light-theme .job-item,
body.light-theme .footer-brand,
body.light-theme .footer-column,
body.light-theme .subtitle-box,
body.light-theme .input-section textarea,
body.light-theme .input-section select,
body.light-theme .form-field input,
body.light-theme .form-field textarea,
body.light-theme .form-field select{
background:rgba(255,255,255,0.72);
border-color:rgba(8,11,13,0.14);
box-shadow:
0 22px 60px rgba(24,40,32,0.12),
inset 0 0 0 1px rgba(255,255,255,0.7);
}

body.light-theme .project-copy h3,
body.light-theme .video-copy h3,
body.light-theme #subtitleText,
body.light-theme .input-section textarea,
body.light-theme .input-section select,
body.light-theme .page-card h2,
body.light-theme .form-panel h2,
body.light-theme .pricing-header h1,
body.light-theme .pricing-card h2,
body.light-theme .pricing-list li,
body.light-theme .form-field input,
body.light-theme .form-field textarea,
body.light-theme .form-field select{
color:#080b0d;
}

body.light-theme .auto-scroll-lane::before{
background:linear-gradient(90deg,#f5f7f1,transparent);
}

body.light-theme .auto-scroll-lane::after{
background:linear-gradient(270deg,#f5f7f1,transparent);
}

body.light-theme .theme-toggle{
background:rgba(8,11,13,0.08);
border-color:rgba(8,11,13,0.14);
color:#080b0d;
}

body.light-theme .theme-toggle-dot{
background:linear-gradient(135deg,#ffffff,#b8ff4d);
box-shadow:0 0 18px rgba(74,122,52,0.22);
}

body.light-theme .credit-link{
color:#0b8990;
}

body.light-theme .intro-kicker,
body.light-theme .service-kicker,
body.light-theme .projects-kicker,
body.light-theme .translate-kicker,
body.light-theme .video-kicker,
body.light-theme .subpage-kicker,
body.light-theme .form-kicker,
body.light-theme .pricing-badge,
body.light-theme .screen-label,
body.light-theme .service-card h3,
body.light-theme .service-core span,
body.light-theme .service-core strong,
body.light-theme .project-type,
body.light-theme .subtitle-label,
body.light-theme .input-kicker,
body.light-theme .footer-column h3{
color:#080b0d;
}

body.light-theme .form-field label,
body.light-theme .price-caption{
color:rgba(8,11,13,0.62);
}

body.light-theme .screen-content strong,
body.light-theme .screen-content p,
body.light-theme .what-we-do-points span,
body.light-theme .screen-rows span,
body.light-theme .project-tags span,
body.light-theme .video-tags span,
body.light-theme .language-strip span,
body.light-theme .footer-social a{
color:rgba(8,11,13,0.78);
}

body.light-theme .screen-label,
body.light-theme .screen-rows span,
body.light-theme .screen-content,
body.light-theme .screen-card,
body.light-theme .project-tags span,
body.light-theme .video-tags span,
body.light-theme .language-strip span,
body.light-theme .footer-social a{
background:rgba(8,11,13,0.055);
border-color:rgba(8,11,13,0.14);
}

body.light-theme .service-number,
body.light-theme .project-number,
body.light-theme .video-number{
-webkit-text-stroke-color:rgba(8,11,13,0.5);
}

body.light-theme .auto-scroll-item,
body.light-theme .project-btn,
body.light-theme .translate-btn{
color:#050505;
}

body.light-theme .what-kicker,
body.light-theme .what-we-do-points strong{
color:#0b8990;
}

body.light-theme .nav-links a:hover{
color:#080b0d;
background:rgba(8,11,13,0.07);
}

.theme-toggle{
display:inline-flex;
align-items:center;
gap:10px;
min-height:42px;
padding:0 14px 0 6px;
border:1px solid rgba(255,255,255,0.14);
border-radius:999px;
background:rgba(255,255,255,0.06);
color:white;
font-size:13px;
font-weight:900;
cursor:pointer;
white-space:nowrap;
transition:
background 0.25s ease,
color 0.25s ease,
border-color 0.25s ease,
transform 0.25s ease;
}

.theme-toggle:hover{
transform:translateY(-2px);
background:rgba(255,255,255,0.1);
}

.theme-toggle-dot{
display:block;
width:30px;
height:30px;
border-radius:50%;
background:linear-gradient(135deg,#050505,#5cc7c9);
box-shadow:0 0 18px rgba(92,199,201,0.26);
}

/* ========================= */
/* NEBULA CLOUDS */
/* ========================= */

.nebula{
position:fixed;
width:600px;
height:600px;
border-radius:50%;

filter:blur(120px);
opacity:0.35;

z-index:-3;

animation:nebulaMove 40s infinite linear;
}

.nebula1{
background:
radial-gradient(circle,#7b61ff,transparent);

top:-100px;
left:-100px;
}

.nebula2{
background:
radial-gradient(circle,#00e5ff,transparent);

bottom:-100px;
right:-100px;

animation-direction:reverse;
}

@keyframes nebulaMove{

0%{transform:translate(0,0)}

50%{transform:translate(80px,40px)}

100%{transform:translate(0,0)}

}

/* ========================= */
/* SHOOTING STARS */
/* ========================= */

#shootingStars{
position:fixed;
top:0;
left:0;

width:100%;
height:100%;

z-index:-1;
pointer-events:none;
}

@media(max-width:1100px){

.hero-title{
font-size:52px;
}

.hero-text{
font-size:17px;
}

.intro{
grid-template-columns:1fr;
gap:34px;
min-height:auto;
text-align:center;
}

.intro-content{
margin:0 auto;
grid-column:1;
grid-row:auto;
}

.intro p{
margin-left:auto;
margin-right:auto;
}

.intro-device{
min-height:360px;
grid-column:1;
grid-row:auto;
padding-top:0;
}

.services-showcase{
max-width:900px;
}

.service-card{
width:270px;
}

.service-card-one{
--service-x:-300px;
--service-y:-195px;
}

.service-card-two{
--service-x:300px;
--service-y:-165px;
}

.service-card-three{
--service-x:-300px;
--service-y:165px;
}

.service-card-four{
--service-x:300px;
--service-y:195px;
}

.service-card-five{
--service-x:0px;
--service-y:300px;
}

.projects-lab{
padding:110px 34px 82px;
}

.what-we-do{
grid-template-columns:1fr;
align-items:start;
text-align:center;
}

.what-we-do-copy{
margin:0 auto;
grid-row:auto;
}

.scroll-keyboard{
width:min(720px,100%);
margin:0 auto;
transform:perspective(900px) rotateX(8deg) rotateY(0deg) translateY(10px);
}

.what-we-do-points{
max-width:860px;
margin:0 auto;
}

.projects-stage{
grid-template-columns:1fr;
max-width:760px;
}

.motion-project-card{
min-height:auto;
}

.project-visual{
height:270px;
}

.translate-container{
grid-template-columns:1fr;
max-width:760px;
}

.translate-panel{
min-height:auto;
}

.video-stage{
grid-template-columns:1fr;
max-width:760px;
}

.video-card{
min-height:auto;
}

.footer-main{
grid-template-columns:repeat(2,minmax(0,1fr));
}

.page-grid,
.pricing-grid{
grid-template-columns:1fr;
max-width:820px;
}

.pricing-card{
min-height:auto;
}

}

@media(max-width:768px){

.hero{
min-height:92svh;
padding:142px 20px 78px;
}

.hero-title{
font-size:40px;
line-height:1.12;
}

.hero-text{
max-width:480px;
font-size:15px;
}

.cta-btn{
min-height:52px;
padding:0 28px;
}

.navbar{
flex-direction:column;
justify-content:center;
align-items:center;
gap:10px;
top:10px;
width:calc(100% - 24px);
padding:12px 14px;
border-radius:24px;
}

.logo{
position:static;
font-size:18px;
line-height:1.2;
white-space:nowrap;
}

.nav-links{
width:100%;
min-width:0;
flex:0 1 auto;
justify-content:center;
flex-wrap:wrap;
gap:6px;
max-width:none;
font-size:13px;
line-height:1.2;
}

.nav-links a{
min-height:32px;
padding:0 9px;
font-size:12px;
}

.subpage-hero,
.page-section,
.pricing-section{
padding:108px 20px 68px;
}

.subpage-hero{
min-height:68svh;
}

.subpage-hero h1{
font-size:clamp(36px,10vw,54px);
line-height:1.08;
margin-bottom:16px;
}

.subpage-hero p,
.pricing-header p{
font-size:15px;
}

.page-grid{
gap:16px;
}

.page-card,
.form-panel,
.pricing-card{
padding:20px;
}

.form-row{
grid-template-columns:1fr;
}

.pricing-header{
margin-bottom:34px;
}

.pricing-card{
min-height:auto;
}

.intro{
padding:88px 20px 72px;
}

.intro h1{
font-size:42px;
}

.intro p{
font-size:15px;
}

.intro-metrics{
grid-template-columns:1fr;
gap:10px;
}

.intro-device{
min-height:300px;
}

.device-screen{
width:min(320px,86vw);
transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

.intro-orbit{
display:none;
}

.auto-scroll-bar{
margin-top:-52px;
padding:20px 0 68px;
}

.auto-scroll-lane::before,
.auto-scroll-lane::after{
width:70px;
}

.auto-scroll-group{
gap:0;
padding-right:0;
}

.auto-scroll-item{
min-width:auto;
height:48px;
padding:0 28px;
font-size:13px;
border-radius:0;
}

.what-we-do{
gap:26px;
margin-top:44px;
padding:26px 20px;
}

.what-we-do p{
font-size:15px;
}

.scroll-keyboard{
min-height:0;
padding:12px;
margin:0 auto;
box-shadow:
0 18px 46px rgba(0,0,0,0.38),
0 0 calc(26px * var(--keyboard-glow)) rgba(92,199,201,0.22),
inset 0 0 0 1px rgba(255,255,255,0.04);
contain:paint;
will-change:transform,opacity;
transform:translateZ(0);
}

.scroll-keyboard::before{
animation:none;
opacity:0.2;
}

.scroll-keyboard::after{
height:30px;
filter:blur(16px);
opacity:0.5;
}

.keyboard-orbit{
animation:none;
opacity:0.42;
}

.keyboard-screen{
grid-template-columns:1fr;
min-height:88px;
padding:14px;
}

.keyboard-typed{
font-size:clamp(20px,6.5vw,30px);
}

.keyboard-deck{
grid-template-columns:repeat(3,1fr);
gap:7px;
}

.keyboard-key{
min-height:34px;
padding:0 8px;
font-size:11px;
}

.key-space{
grid-column:span 3;
}

.keyboard-trail{
display:none;
}

.what-we-do-points{
grid-template-columns:1fr;
gap:12px;
}

.what-we-do-points div{
min-height:auto;
padding:20px;
}

.services{
min-height:auto;
padding:90px 20px;
}

.services::after{
display:none;
}

.service-spotlight,
.service-orbits,
.service-energy,
.services-showcase::before{
display:none;
}

.services-header h2{
font-size:44px;
}

.services-header p{
font-size:15px;
}

.services-showcase{
display:grid;
grid-template-columns:1fr;
gap:16px;
min-height:auto;
margin-top:44px;
perspective:none;
}

.service-core{
position:relative;
left:auto;
top:auto;
width:100%;
height:auto;
min-height:150px;
transform:rotate(0deg) scale(var(--core-scale));
}

.service-core-content{
width:100%;
transform:none;
}

.service-card{
position:relative;
left:auto;
top:auto;
width:100%;
transform:none;
}

.service-card-inner{
min-height:190px;
padding:24px;
}

.service-card h3{
font-size:22px;
}

.nebula{
display:none;
}

.projects-lab{
padding:88px 20px 72px;
}

.projects-light-field span{
width:86vw;
}

.projects-header{
margin-bottom:36px;
}

.projects-header h2{
font-size:44px;
}

.projects-header p{
font-size:15px;
}

.projects-stage{
gap:16px;
}

.motion-project-card{
padding:14px;
transform:
translateY(calc(var(--card-y) + var(--float-y)))
rotateZ(var(--card-rotate));
}

.project-visual{
height:218px;
}

.project-copy{
padding:22px 2px 18px;
}

.project-number{
font-size:46px;
}

.project-copy h3{
font-size:25px;
}

.project-marquee{
height:48px;
margin-top:28px;
}

.project-marquee-track span{
padding:0 18px;
font-size:11px;
}

.project-marquee-track span::after{
margin-left:18px;
}

.live-translate,
.video-lab{
padding:88px 20px 72px;
}

.translate-signal-field span,
.video-light-lines span{
width:88vw;
}

.translate-header,
.video-header{
margin-bottom:36px;
}

.live-title,
.video-title{
font-size:40px;
}

.translate-header p,
.video-header p{
font-size:15px;
}

.translate-container,
.video-stage{
gap:16px;
}

.translate-panel,
.video-card{
padding:16px;
transform:translateY(var(--panel-y, var(--card-y, 0px)));
}

.ai-avatar{
width:min(286px,78vw);
height:min(286px,78vw);
margin:28px auto 20px;
}

.ai-face{
width:126px;
height:154px;
}

.ai-eye{
top:50px;
width:14px;
height:14px;
}

.ai-eye-left{
left:33px;
}

.ai-eye-right{
right:33px;
}

.ai-hair{
top:24px;
height:96px;
}

.ai-cheek{
top:82px;
}

.ai-nose{
top:76px;
}

#subtitleText{
font-size:18px;
}

.input-section textarea{
min-height:210px;
font-size:15px;
}

.translate-controls{
grid-template-columns:1fr;
}

.translate-btn{
width:100%;
}

.language-strip span{
width:40px;
height:40px;
}

.video-frame{
aspect-ratio:16/11;
}

.video-number{
font-size:46px;
}

.video-copy h3{
font-size:25px;
}

.video-timeline{
margin-top:28px;
}

.site-footer{
padding:72px 20px 24px;
}

.footer-main{
grid-template-columns:1fr;
gap:16px;
}

.footer-brand,
.footer-column{
padding:20px;
}

.footer-bottom{
flex-direction:column;
text-align:left;
}

}

@media(max-width:480px){

.subpage-hero{
min-height:66svh;
padding:126px 18px 58px;
}

.subpage-hero h1{
font-size:36px;
line-height:1.08;
}

.subpage-kicker{
margin-bottom:14px;
font-size:11px;
padding:8px 12px;
}

.hero-title{
font-size:30px;
line-height:1.14;
}

.hero-text{
font-size:15px;
line-height:1.6;
}

.cta-btn{
width:min(100%,240px);
}

.navbar{
padding:12px;
gap:8px;
}

.logo{
font-size:16px;
}

.nav-links{
gap:7px 12px;
font-size:12px;
}

.nav-links a{
padding:0 8px;
}

.intro h1{
font-size:34px;
}

.intro-metrics strong{
font-size:28px;
}

.live-title,
.video-title{
font-size:34px;
}

.translate-kicker,
.video-kicker,
.projects-kicker{
font-size:11px;
padding:8px 12px;
}

.subtitle-box{
padding:18px;
}

.caption-wave{
height:46px;
}

.play-overlay{
width:62px;
height:62px;
}

}

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

html{
scroll-behavior:auto;
}

*,
*::before,
*::after{
animation-duration:0.01ms !important;
animation-iteration-count:1 !important;
scroll-behavior:auto !important;
transition-duration:0.01ms !important;
}

}