:root{
  --bg:#06080c; --bg2:#0a0e15; --ink:#e8eef7; --mut:#6b7888; --dim:#3a4452;
  --acc:#4ea1ff; --acc2:#56e0a0; --line:#161c26; --card:#0c111a;
  --mono:'JetBrains Mono',ui-monospace,"SF Mono",monospace;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--ink);font-family:'Inter',-apple-system,sans-serif;overflow-x:hidden;line-height:1.6;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
::selection{background:rgba(78,161,255,.3);}

/* ---- background ---- */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;}
.grid{position:absolute;inset:-2px;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;opacity:.3;mask-image:radial-gradient(ellipse 75% 55% at 50% 22%,#000 25%,transparent 72%);}
.glow{position:absolute;width:820px;height:820px;border-radius:50%;left:50%;top:18%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(78,161,255,.15),rgba(78,161,255,.05) 42%,transparent 66%);filter:blur(18px);animation:drift 16s ease-in-out infinite alternate;}
.glow2{top:78%;left:75%;width:620px;height:620px;background:radial-gradient(circle,rgba(86,224,160,.10),transparent 64%);animation-duration:20s;animation-direction:alternate-reverse;}
@keyframes drift{from{transform:translate(-54%,-50%) scale(1)}to{transform:translate(-46%,-44%) scale(1.14)}}

/* ---- topbar ---- */
.topbar{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:18px 30px;backdrop-filter:blur(8px);background:linear-gradient(180deg,rgba(6,8,12,.7),transparent);}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:18px;letter-spacing:.02em;font-weight:500;}
.brand b{font-weight:700;}.brand .d{color:var(--acc2);}
.logo-mark{width:26px;height:26px;color:var(--mut);flex-shrink:0;}
.topnav{display:flex;gap:26px;font-size:14px;color:var(--mut);}
.topnav a{transition:.2s;}.topnav a:hover{color:var(--ink);}
.nav-cta{color:var(--acc)!important;border:1px solid var(--line);padding:6px 14px;border-radius:8px;}
.nav-cta:hover{border-color:var(--acc);background:rgba(78,161,255,.08);}
.lang{display:flex;gap:3px;font-family:var(--mono);font-size:12px;}
.lang button{background:transparent;border:1px solid var(--line);color:var(--mut);padding:5px 10px;border-radius:7px;cursor:pointer;transition:.2s;}
.lang button.on{color:var(--bg);background:var(--ink);border-color:var(--ink);font-weight:600;}

/* ---- hero ---- */
.hero{position:relative;z-index:2;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 20px;}
.hero-inner{max-width:760px;}
/* font sized so the LONGEST state ("entertainment.systems" ≈ 21ch) fits any screen */
.wordmark{font-family:var(--mono);font-weight:700;line-height:1;font-size:clamp(21px,5.6vw,76px);letter-spacing:-.04em;white-space:nowrap;display:flex;align-items:baseline;justify-content:center;max-width:96vw;}
/* e + word in a FIXED-width, right-aligned slot so ".systems" stays pixel-stable */
.wm-lead{display:inline-block;width:13ch;text-align:right;}
.wm-e{color:var(--ink);}
.wm-word{color:var(--acc);text-shadow:0 0 18px rgba(78,161,255,.35);}
.wm-word .cursor{box-shadow:0 0 10px rgba(86,224,160,.7);}
/* glitch flicker applied briefly when a new word starts (micro-effect) */
.wm-lead.glitch{animation:glitch .26s steps(2) 1;}
@keyframes glitch{
  0%{transform:translate(0,0);filter:none;}
  20%{transform:translate(-2px,1px);filter:drop-shadow(2px 0 rgba(86,224,160,.6)) drop-shadow(-2px 0 rgba(78,161,255,.6));}
  40%{transform:translate(2px,-1px);}
  60%{transform:translate(-1px,0);filter:drop-shadow(-2px 0 rgba(86,224,160,.5));}
  100%{transform:translate(0,0);filter:none;}
}
/* faint scanline + vignette over hero for cinematic feel */
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:repeating-linear-gradient(0deg,rgba(255,255,255,.014) 0 1px,transparent 1px 3px);mix-blend-mode:overlay;opacity:.6;}
.wm-word .cursor{display:inline-block;width:.055em;height:.92em;background:var(--acc2);margin-left:.03em;transform:translateY(.08em);animation:blink 1s steps(1) infinite;}
@keyframes blink{50%{opacity:0}}
.wm-sys{color:var(--ink);opacity:.92;}
.reveal-eco{color:var(--acc2)!important;text-shadow:0 0 26px rgba(86,224,160,.4);}
.tagline{margin-top:30px;font-size:clamp(16px,2.3vw,21px);line-height:1.55;color:var(--mut);opacity:0;animation:rise .9s ease .3s forwards;}
.tagline b{color:var(--ink);font-weight:500;}
.sub{margin-top:12px;font-family:var(--mono);font-size:12.5px;color:var(--acc);letter-spacing:.12em;text-transform:uppercase;opacity:0;animation:rise .9s ease .5s forwards;}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.hero-cta{margin-top:38px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;opacity:0;animation:rise .9s ease .7s forwards;}
.btn{font-family:var(--mono);font-size:14px;padding:13px 24px;border-radius:10px;background:var(--acc);color:#04121f;font-weight:600;transition:.2s;border:1px solid var(--acc);}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(78,161,255,.25);}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line);}
.btn.ghost:hover{border-color:var(--acc2);box-shadow:none;}
.btn.big{font-size:clamp(18px,3vw,26px);padding:18px 34px;}
.scrollhint{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut);display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;animation:rise 1s ease 1s forwards;}
.scrollhint .bar{width:1px;height:32px;background:linear-gradient(var(--acc2),transparent);animation:spulse 2s ease-in-out infinite;}
@keyframes spulse{0%,100%{opacity:.3;transform:scaleY(.7)}50%{opacity:1;transform:scaleY(1)}}

/* ---- reveal util ---- */
.reveal{opacity:0;transform:translateY(28px);transition:.8s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1;transform:none;}

/* ---- sections common ---- */
section{position:relative;z-index:2;}
.sec-head{max-width:780px;margin:0 auto 56px;text-align:center;padding:0 22px;}
.sec-kicker{font-family:var(--mono);font-size:12.5px;color:var(--acc2);letter-spacing:.1em;}
.sec-head h2{font-size:clamp(26px,4.5vw,42px);font-weight:600;margin:14px 0 12px;letter-spacing:-.02em;}
.sec-lead{color:var(--mut);font-size:clamp(15px,2vw,18px);}

/* ---- manifesto ---- */
.manifesto{max-width:840px;margin:0 auto;padding:140px 22px;text-align:center;}
.manifesto .m-line{color:var(--mut);font-size:clamp(15px,2.2vw,19px);}
.manifesto .m-big{font-size:clamp(26px,5vw,52px);font-weight:600;line-height:1.18;letter-spacing:-.02em;margin:18px 0;background:linear-gradient(120deg,#fff,#7fb6ff 55%,#56e0a0);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}

/* ---- services ---- */
.services{max-width:1040px;margin:0 auto;padding:60px 22px 120px;}
.svc-list{display:flex;flex-direction:column;}
.svc-row{display:grid;grid-template-columns:300px 1fr auto;gap:26px;align-items:center;padding:30px 6px;border-top:1px solid var(--line);opacity:0;transform:translateY(26px);transition:.7s cubic-bezier(.2,.7,.2,1);cursor:default;}
.svc-row:last-child{border-bottom:1px solid var(--line);}
.svc-row.in{opacity:1;transform:none;}
.svc-row:hover{background:linear-gradient(90deg,rgba(78,161,255,.05),transparent);}
.svc-key{font-family:var(--mono);font-size:clamp(17px,2.5vw,23px);color:var(--acc);}
.svc-key i{color:var(--ink);font-style:normal;}
.svc-key:hover .x{color:var(--acc2);}
.svc-desc{font-size:clamp(15px,2vw,18px);color:var(--ink);}
.svc-tag{font-family:var(--mono);font-size:12px;color:var(--mut);white-space:nowrap;border:1px solid var(--line);padding:6px 12px;border-radius:999px;}
@media(max-width:760px){.svc-row{grid-template-columns:1fr;gap:8px;}.svc-tag{justify-self:start;}}

/* ---- ecosystem scroll moment ---- */
.ecosystem{height:200vh;}
.eco-sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;}
.eco-stage{position:relative;width:min(86vw,560px);height:min(86vw,560px);display:flex;align-items:center;justify-content:center;}
#ecoCanvas{position:absolute;inset:0;width:100%;height:100%;}
.eco-core{position:relative;font-family:var(--mono);font-weight:700;font-size:clamp(26px,6vw,52px);display:flex;align-items:baseline;z-index:3;text-shadow:0 0 24px rgba(6,8,12,.9),0 0 40px rgba(6,8,12,.7);}
.eco-core small{color:var(--acc2);font-size:1em;}
.eco-core .eco-sys{color:var(--ink);opacity:.9;}
.eco-cap{max-width:560px;text-align:center;color:var(--mut);font-size:clamp(15px,2.2vw,19px);padding:0 22px;}
.eco-cap b{color:var(--ink);font-weight:500;}

/* ---- work ---- */
.work{max-width:1100px;margin:0 auto;padding:120px 22px;}
.work-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;}
.work-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px;transition:.3s;opacity:0;transform:translateY(26px);}
.work-card.in{opacity:1;transform:none;}
.work-card:hover{border-color:rgba(78,161,255,.35);transform:translateY(-4px);}
.work-card .wc-tag{font-family:var(--mono);font-size:11px;color:var(--acc2);letter-spacing:.08em;}
.work-card h3{font-size:19px;font-weight:600;margin:10px 0 8px;}
.work-card p{color:var(--mut);font-size:14.5px;}

/* ---- approach ---- */
.approach{max-width:980px;margin:0 auto;padding:40px 22px 130px;}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;}
.step{border:1px solid var(--line);border-radius:14px;padding:24px;opacity:0;transform:translateY(24px);transition:.7s cubic-bezier(.2,.7,.2,1);}
.step.in{opacity:1;transform:none;}
.step .num{font-family:var(--mono);font-size:13px;color:var(--acc);}
.step h3{font-size:17px;margin:10px 0 6px;}
.step p{color:var(--mut);font-size:14px;}

/* ---- contact ---- */
.contact{padding:60px 22px 120px;}
.contact-card{max-width:720px;margin:0 auto;text-align:center;background:linear-gradient(160deg,rgba(78,161,255,.06),rgba(86,224,160,.03));border:1px solid var(--line);border-radius:24px;padding:64px 30px;}
.contact-card h2{font-size:clamp(26px,4.5vw,40px);font-weight:600;letter-spacing:-.02em;}
.contact-card p{color:var(--mut);margin:14px auto 30px;max-width:480px;}
.ct-sub{font-family:var(--mono);font-size:12.5px;color:var(--dim);margin-top:24px;}

/* ---- footer ---- */
.foot{border-top:1px solid var(--line);padding:46px 30px;text-align:center;position:relative;z-index:2;}
.foot-brand{font-family:var(--mono);font-size:17px;}
.foot-brand b{font-weight:700;}.foot-brand .d{color:var(--acc2);}
.foot-tag{color:var(--mut);font-size:14px;margin:8px 0;}
.foot-copy{font-family:var(--mono);font-size:12px;color:var(--dim);}

@media(max-width:680px){
  .topnav{display:none;}
  .topbar{padding:14px 18px;}
  .manifesto,.work,.services{padding-left:18px;padding-right:18px;}
}
@media(prefers-reduced-motion:reduce){
  .glow,.scrollhint .bar{animation:none;}
  .reveal,.svc-row,.work-card,.step{transition:opacity .4s;transform:none;}
}