/* DIME / dimensional studio edition */
:root { --text-muted:#abb0c3; }
::selection { background:#8beaff; color:#080b12; }
:focus-visible { outline:2px solid var(--cyan); outline-offset:6px; }
.noise { opacity:.022; }
.cursor-dot { display:none; }
.cursor-glow { opacity:.32!important; }
.site-header { padding-inline:5vw; background:rgba(5,5,8,.88); backdrop-filter:blur(10px); }
.brand-mark img { width:44px; height:44px; object-fit:cover; }
.hero { display:grid; grid-template-columns:1fr 1.3fr; min-height:850px; min-height:100svh; text-align:left; padding:130px 5vw 120px; gap:0; overflow:visible; }
.hero-content { align-items:flex-start; max-width:620px; }
.hero-kicker { font-size:11px; letter-spacing:.23em; color:#a8dce6; margin-bottom:30px; display:flex; align-items:center; gap:12px; }
.hero-kicker:before { content:''; width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 15px var(--cyan); flex-shrink:0; }
.hero-tagline { font-family:var(--font-body); font-size:clamp(42px,5.7vw,86px); font-weight:500; line-height:1.06; letter-spacing:-.045em; max-width:10ch; margin-bottom:28px; }
html[lang=ru] .hero-tagline { font-size:clamp(38px,4.5vw,68px); max-width:16ch; }
.hero-tagline .word { margin-right:0; padding-bottom:.08em; margin-bottom:-.08em; }
.hero-lead { font-size:17px; line-height:1.7; max-width:345px; margin-bottom:32px; }
.hero-actions { justify-content:flex-start; }
.btn { border-radius:4px; font-family:var(--font-body); letter-spacing:.03em; }
.btn-primary { background:#b5f5ff; box-shadow:0 0 30px #3de8ff18; }
.btn-primary:hover { background:#d0f9ff; box-shadow:0 0 35px #3de8ff44; }
.orb { opacity:.12; filter:blur(110px); }
.orb-cyan { left:45%; top:20%; }
.orb-magenta { right:1%; bottom:25%; }
.orb-mid,.hero-rings,.hero-shapes { display:none; }
.particles { opacity:.35; }
.logo-stage { width:100%; aspect-ratio:1; position:relative; min-width:0; overflow:visible; }
#logo-3d { position:absolute; left:50%; top:50%; width:142%; height:142%; translate:-50% -50%; opacity:0; transition:opacity 1s; }
.logo-stage.ready #logo-3d { opacity:1; }
.logo-fallback { position:absolute; width:90%; left:5%; top:5%; mix-blend-mode:screen; }
.logo-stage.ready .logo-fallback { visibility:hidden; }
.stage-grid { position:absolute; inset:8%; border:1px solid #b6d5ff0b; border-radius:50%; background:radial-gradient(ellipse,#3de8ff08,transparent 66%); pointer-events:none; }
.stage-grid:after { content:''; position:absolute; inset:12%; border:1px dashed #b6d5ff13; border-radius:50%; }
.hero-bottom { position:absolute; left:5vw; right:5vw; bottom:30px; display:flex; justify-content:space-between; border-top:1px solid #ffffff14; padding-top:20px; font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:#8d95aa; }
.scroll-hint { bottom:28px; width:18px; height:28px; }
.section { padding:110px 5vw; }
.section-inner,.footer-inner { max-width:1320px; }
.craft .section-inner { display:grid; grid-template-columns:1fr 1fr; gap:0 80px; }
.craft .eyebrow { grid-column:1/-1; }
.section h2 { font-family:var(--font-body); font-size:clamp(34px,4vw,60px); font-weight:500; letter-spacing:-.035em; }
.craft-list { margin-top:10px; }
.craft-list h3 { font-family:var(--font-body); font-size:20px; letter-spacing:0; }
.craft-line { height:1px; opacity:.35; }
.craft-num { color:#8e9bab; background:none; }
.stack { background:linear-gradient(180deg,#080a10,transparent); border-top:1px solid #ffffff0b; }
.pillars { grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.pillar { padding:30px 24px 34px; min-height:250px; border-radius:5px; background:linear-gradient(145deg,#121720,#0a0c12); }
.pillar-icon { height:48px; margin-bottom:26px; }
.pillar-icon .shape { scale:1.4; margin-left:5px; }
.pillar h3 { font-family:var(--font-body); font-size:19px; letter-spacing:0; }
.pillar p { font-size:15px; line-height:1.65; }
.pillar:nth-child(2):hover { border-color:#c77dff88; }
.pillar:nth-child(3):hover { border-color:#7ec8ff88; }
.pillar:nth-child(4):hover { border-color:#ff4fd888; }
.connect { padding-top:25px; }
.connect-inner { border-radius:6px; padding-block:85px; background:radial-gradient(ellipse at 50% 120%,#27365a66,transparent 65%),#0b0e16; }
.connect-inner.reveal.visible { box-shadow:none; border-color:#ffffff1c; }
.connect h2 { max-width:700px; }
.footer-inner { border-top:1px solid #ffffff14; padding-top:25px; }
@media(min-width:1600px) { .hero { padding-inline:max(5vw,calc((100vw - 1450px)/2)); } }
@media(max-width:1000px) {
  .hero { grid-template-columns:1fr 1fr; gap:12px; padding:120px 4vw 100px; }
  .hero-tagline { font-size:clamp(32px,4.2vw,56px); }
  html[lang=ru] .hero-tagline { font-size:clamp(28px,3.8vw,48px); }
  .pillars { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .craft .section-inner { gap:0 35px; }
  #logo-3d { width:120%; height:120%; }
}
@media(max-width:780px) {
  body { overflow-x:hidden; }
  body.nav-open { overflow:hidden; }
  :root { --header-h: 3.5rem; }
  .site-header {
    height: var(--header-h);
    min-height: var(--header-h);
    padding: 0 12px 0 14px;
    gap: 12px;
    background: rgba(5,5,8,.96);
    backdrop-filter: none;
    border-bottom: 1px solid rgba(255,255,255,.06);
    transform: none !important; /* never auto-hide on mobile */
  }
  .site-header.scrolled {
    background: rgba(5,5,8,.98);
  }
  .site-header.is-open {
    border-bottom-color: transparent;
  }
  .orb { display:none; }
  .section, .pillar, .product { content-visibility:auto; contain-intrinsic-size:1px 420px; }

  .brand-mark {
    gap: 8px;
    flex-shrink: 0;
    min-height: 44px;
  }
  .brand-mark img {
    display: block;
    width: 32px;
    height: 32px;
  }
  .brand-mark span {
    font-size: 15px;
    letter-spacing: .14em;
  }

  .header-actions {
    gap: 8px;
    margin-left: auto;
  }
  .header-linkedin { display: none !important; }
  .nav-toggle { display: inline-flex; }

  .lang-switch {
    flex-shrink: 0;
    padding: 3px;
    border-radius: 4px;
  }
  .lang-btn {
    min-width: 2.4rem;
    min-height: 36px;
    padding: 0 .5rem;
    font-size: .7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .nav {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--header-h);
    z-index: 39;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 16px 28px;
    margin: 0;
    background: rgba(5,5,8,.98);
    border-bottom: 1px solid rgba(255,255,255,.08);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .28s ease, transform .28s var(--ease-out), visibility 0s linear .28s;
  }
  .site-header.is-open .nav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity .28s ease, transform .28s var(--ease-out), visibility 0s;
  }
  .nav > a:not(.btn) {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 4px;
    font-family: var(--font-body);
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--text);
    border-bottom: 1px solid rgba(255,255,255,.06);
    white-space: nowrap;
  }
  .nav > a:not(.btn)::after { display: none; }
  .nav > a:not(.btn):active { color: var(--cyan); }

  .nav-backdrop {
    display: block;
    position: fixed;
    inset: var(--header-h) 0 0;
    z-index: 38;
    background: rgba(0,0,0,.45);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .28s ease, visibility 0s linear .28s;
  }
  .site-header.is-open ~ .nav-backdrop,
  body.nav-open .nav-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .28s ease, visibility 0s;
  }

  .hero {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:8px;
    min-height:auto;
    text-align:center;
    padding:calc(var(--header-h) + 20px) 20px 36px;
    overflow:hidden;
  }
  .hero-content {
    align-items:center;
    max-width:100%;
    width:100%;
    order:2;
  }
  .hero-kicker {
    font-size:10px;
    letter-spacing:.16em;
    margin-bottom:16px;
    justify-content:center;
  }
  .hero-tagline {
    font-size:clamp(34px,9vw,44px);
    max-width:14ch;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:16px;
  }
  html[lang=ru] .hero-tagline {
    font-size:clamp(28px,7.5vw,36px);
    max-width:18ch;
  }
  .hero-lead {
    font-size:15px;
    line-height:1.55;
    max-width:32ch;
    margin:0 auto 22px;
  }
  .hero-actions {
    justify-content:center;
    width:100%;
    gap:10px;
  }
  .hero-actions .btn {
    flex:1 1 auto;
    min-width:0;
    padding:.75rem 1rem;
    font-size:.9rem;
  }
  .logo-stage {
    order:1;
    width:min(100%,360px);
    margin:0 auto 8px;
    aspect-ratio:1;
    overflow:hidden;
  }
  #logo-3d {
    width:100%;
    height:100%;
    left:0;
    top:0;
    translate:none;
  }
  .logo-fallback { width:86%; left:7%; top:7%; }
  .hero-bottom {
    order:3;
    position:static;
    left:auto;
    right:auto;
    bottom:auto;
    width:100%;
    margin-top:20px;
    padding-top:16px;
    font-size:9px;
    letter-spacing:.1em;
    gap:12px;
    flex-wrap:wrap;
    justify-content:center;
    text-align:center;
  }
  .scroll-hint { display:none; }

  .symbol-divider { gap:10px; padding:6px 16px; }
  .divider-symbols { flex-basis:160px; height:64px; }

  .section { padding:64px 20px; }
  .section h2 { font-size:clamp(28px,7vw,40px); max-width:none; }
  .section-lead { font-size:15px; margin-bottom:1.75rem; }
  .craft .section-inner { display:block; }
  .craft-list { margin-top:28px; }
  .craft-list li { gap:1rem; padding:1.35rem 0; }
  .craft-list h3 { font-size:17px; }
  .craft-list p { font-size:14px; }

  .pillars {
    grid-template-columns:1fr;
    gap:12px;
  }
  .pillar {
    padding:22px 18px 24px;
    min-height:0;
  }
  .pillar h3 { font-size:17px; }
  .pillar p { font-size:14px; }

  .products .section-lead { margin-bottom:1.5rem; }
  .product { padding:1.5rem 1.2rem 1.7rem; max-width:none; }
  .product-name { font-size:clamp(1.75rem,8vw,2.25rem); }
  .product-text { font-size:15px; }

  .about-copy { grid-template-columns:1fr; gap:16px; font-size:15px; line-height:1.7; }
  .studio-about h2 { max-width:none; }

  .connect { padding-top:0; }
  .connect-inner { padding:48px 18px; }
  .connect h2 { font-size:clamp(26px,7vw,36px); }

  .footer-inner {
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    padding-top:20px;
  }
}
@media(max-width:400px) {
  .brand-mark span { font-size:14px; }
  .lang-btn { min-width:2.15rem; font-size:.68rem; }
  .nav > a:not(.btn) { font-size:1.1rem; min-height:48px; }
  .hero { padding-inline:16px; }
  .hero-actions { flex-direction:column; }
  .hero-actions .btn { width:100%; }
  .logo-stage { width:min(100%,300px); }
  .section { padding:56px 16px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

/* Four-player interlude. Shared timeline keeps the encounters coordinated. */
.symbol-divider { position:relative; z-index:2; display:flex; align-items:center; justify-content:center; gap:28px; padding:12px 8vw; overflow:hidden; }
.divider-line { height:1px; flex:1; max-width:440px; background:linear-gradient(90deg,transparent,#79bddb30); }
.divider-line:last-child { transform:scaleX(-1); }
.divider-symbols { position:relative; flex:0 0 216px; height:86px; font-size:48px; }
.divider-symbols svg { position:absolute; left:calc(50% - 10px); top:calc(50% - 10px); width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; color:#73dbe9; opacity:.85; filter:drop-shadow(0 0 4px currentColor); will-change:transform,opacity; animation:player-triangle 14s cubic-bezier(.45,0,.2,1) infinite both; }
.divider-symbols svg:nth-child(2) { color:#bd9bdf; animation-name:player-circle; }
.divider-symbols svg:nth-child(3) { color:#88bced; animation-name:player-cross; }
.divider-symbols svg:nth-child(4) { color:#da8fce; animation-name:player-square; }
.divider-symbols:after { content:''; position:absolute; left:calc(50% - 7px); top:calc(50% - 7px); width:14px; height:14px; border:1px solid #b6dfff; border-radius:50%; pointer-events:none; animation:player-impact 14s ease-out infinite; }
@keyframes player-impact { 0%,57% { opacity:0; transform:translateX(-24px) scale(.2); } 58% { opacity:.8; transform:translateX(-24px) scale(.6); } 64%,100% { opacity:0; transform:translateX(-24px) scale(3.5); } }
@media(max-width:780px) { .symbol-divider { gap:10px; padding:6px 16px; } .divider-symbols { flex-basis:160px; height:64px; } }
@media(prefers-reduced-motion:reduce) { .divider-symbols svg { animation:none; opacity:.8; } .divider-symbols svg:nth-child(1) { transform:translateX(-1.5em); } .divider-symbols svg:nth-child(2) { transform:translateX(-.5em); } .divider-symbols svg:nth-child(3) { transform:translateX(.5em); } .divider-symbols svg:nth-child(4) { transform:translateX(1.5em); } .divider-symbols:after { display:none; } }

@keyframes player-triangle {
 0% { transform:translate(-1.5em,0px) rotate(0deg) scale(1); opacity:0.85; }
 8% { transform:translate(-1.5em,0px) rotate(0deg) scale(1); opacity:0.85; }
 12% { transform:translate(-1.65em,3px) rotate(-15deg) scale(0.9); opacity:1; }
 19% { transform:translate(-0.5em,-23px) rotate(15deg) scale(1.1); opacity:1; }
 26% { transform:translate(0.5em,0px) rotate(0deg) scale(1); opacity:0.85; }
 32% { transform:translate(0.5em,0px) rotate(0deg) scale(1); opacity:0.85; }
 39% { transform:translate(1.6em,-18px) rotate(30deg) scale(1.1); opacity:1; }
 45% { transform:translate(1.5em,0px) rotate(0deg) scale(1); opacity:0.85; }
 66% { transform:translate(1.5em,0px) rotate(0deg) scale(1); opacity:0.85; }
 72% { transform:translate(1.65em,0px) rotate(-15deg) scale(0.9); opacity:1; }
 82% { transform:translate(-0.2em,-25px) rotate(-180deg) scale(1.05); opacity:1; }
 92% { transform:translate(-1.5em,0px) rotate(-360deg) scale(1); opacity:0.85; }
 100% { transform:translate(-1.5em,0px) rotate(-360deg) scale(1); opacity:0.85; }
}

@keyframes player-circle {
 0% { transform:translate(-0.5em,0px) rotate(0deg) scale(1); opacity:0.85; }
 12% { transform:translate(-0.5em,0px) rotate(0deg) scale(1); opacity:0.85; }
 19% { transform:translate(-1em,16px) rotate(0deg) scale(0.9); opacity:0.7; }
 26% { transform:translate(-1.5em,0px) rotate(0deg) scale(1); opacity:0.85; }
 32% { transform:translate(-1.5em,0px) rotate(0deg) scale(1); opacity:0.85; }
 39% { transform:translate(-1em,-18px) rotate(0deg) scale(1.1); opacity:1; }
 45% { transform:translate(-0.5em,0px) rotate(0deg) scale(1); opacity:0.85; }
 50% { transform:translate(-0.5em,0px) rotate(0deg) scale(1); opacity:0.85; }
 56% { transform:translate(0.5em,-23px) rotate(0deg) scale(1.15); opacity:1; }
 63% { transform:translate(1.5em,-18px) rotate(0deg) scale(1); opacity:1; }
 69% { transform:translate(0.5em,0px) rotate(0deg) scale(1); opacity:0.85; }
 76% { transform:translate(0.5em,0px) rotate(0deg) scale(1); opacity:0.85; }
 84% { transform:translate(-0.5em,18px) rotate(0deg) scale(0.9); opacity:1; }
 92% { transform:translate(-0.5em,0px) rotate(0deg) scale(1); opacity:0.85; }
 100% { transform:translate(-0.5em,0px) rotate(0deg) scale(1); opacity:0.85; }
}

@keyframes player-cross {
 0% { transform:translate(0.5em,0px) rotate(0deg) scale(1); opacity:0.85; }
 12% { transform:translate(0.5em,0px) rotate(0deg) scale(1); opacity:0.85; }
 19% { transform:translate(0em,18px) rotate(90deg) scale(0.9); opacity:1; }
 26% { transform:translate(-0.5em,0px) rotate(180deg) scale(1); opacity:0.85; }
 32% { transform:translate(-0.5em,0px) rotate(180deg) scale(1); opacity:0.85; }
 39% { transform:translate(0em,18px) rotate(270deg) scale(1); opacity:1; }
 45% { transform:translate(0.5em,0px) rotate(360deg) scale(1); opacity:0.85; }
 51% { transform:translate(0.65em,0px) rotate(340deg) scale(0.9); opacity:1; }
 58% { transform:translate(-0.5em,0px) rotate(450deg) scale(1.2); opacity:1; }
 62% { transform:translate(-0.25em,-8px) rotate(490deg) scale(1); opacity:1; }
 68% { transform:translate(-0.5em,0px) rotate(540deg) scale(1); opacity:0.85; }
 76% { transform:translate(-0.5em,0px) rotate(540deg) scale(1); opacity:0.85; }
 84% { transform:translate(0.5em,-18px) rotate(630deg) scale(1.1); opacity:1; }
 92% { transform:translate(0.5em,0px) rotate(720deg) scale(1); opacity:0.85; }
 100% { transform:translate(0.5em,0px) rotate(720deg) scale(1); opacity:0.85; }
}

@keyframes player-square {
 0% { transform:translate(1.5em,0px) rotate(0deg) scale(1); opacity:0.85; }
 32% { transform:translate(1.5em,0px) rotate(0deg) scale(1); opacity:0.85; }
 39% { transform:translate(0em,22px) rotate(-90deg) scale(1); opacity:1; }
 45% { transform:translate(-1.5em,0px) rotate(-180deg) scale(1); opacity:0.85; }
 51% { transform:translate(-1.5em,0px) rotate(-180deg) scale(1); opacity:0.85; }
 58% { transform:translate(-0.5em,0px) rotate(-270deg) scale(0.8); opacity:1; }
 61% { transform:translate(-1em,-9px) rotate(-300deg) scale(0.65); opacity:0.12; }
 68% { transform:translate(-1.5em,0px) rotate(-360deg) scale(0.7); opacity:0.15; }
 73% { transform:translate(-1.5em,0px) rotate(-360deg) scale(0.7); opacity:0.15; }
 78% { transform:translate(-1.5em,0px) rotate(-360deg) scale(1.2); opacity:1; }
 81% { transform:translate(-1.5em,0px) rotate(-360deg) scale(1); opacity:0.85; }
 87% { transform:translate(0em,23px) rotate(-450deg) scale(1); opacity:1; }
 95% { transform:translate(1.5em,0px) rotate(-540deg) scale(1); opacity:0.85; }
 100% { transform:translate(1.5em,0px) rotate(-540deg) scale(1); opacity:0.85; }
}

/* Keep the primary content immediately visible for readers and crawlers. */
.hero-tagline .word > span { animation:none; opacity:1; transform:none; }
.hero-lead.reveal,.hero-actions.reveal { opacity:1; filter:none; transform:none; }
.skip-link { position:fixed; left:20px; top:-100px; z-index:100; padding:12px 20px; background:#b5f5ff; color:#050508; }
.skip-link:focus { top:12px; }
.lang-btn { display:inline-flex; align-items:center; justify-content:center; }
.studio-about { padding-top:20px; }
.studio-about h2 { max-width:850px; }
.about-copy { display:grid; grid-template-columns:1fr 1fr; gap:50px; color:var(--text-muted); font-size:17px; line-height:1.8; }
/* Products */
.products { border-top:1px solid #ffffff0b; background:linear-gradient(180deg,#080a10 0%,transparent 55%); }
.products .section-lead { margin-bottom:2.5rem; max-width:36rem; }
.product {
  position:relative;
  max-width:720px;
  padding:2.25rem 2rem 2.4rem;
  border:1px solid rgba(61,232,255,.18);
  border-radius:6px;
  background:
    linear-gradient(145deg, rgba(61,232,255,.06), transparent 42%),
    linear-gradient(200deg, rgba(255,79,216,.05), transparent 50%),
    #0b0e16;
  overflow:hidden;
  transform-style:preserve-3d;
}
.product-glow {
  position:absolute; inset:-30%;
  background:radial-gradient(circle at var(--mx,30%) var(--my,40%), rgba(61,232,255,.14), transparent 42%);
  opacity:0; transition:opacity .35s ease; pointer-events:none;
}
.product:hover .product-glow { opacity:1; }
.product:hover { border-color:rgba(61,232,255,.4); }
.product-top { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1.25rem; margin-bottom:1.1rem; }
.product-status {
  font-family:var(--font-display); font-size:.68rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.product-meta { font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); }
.product-name {
  font-family:var(--font-body); font-size:clamp(2rem,4vw,3rem); font-weight:500; letter-spacing:-.03em;
  margin-bottom:.85rem; line-height:1.1;
}
.product-text { color:var(--text-muted); font-size:1.05rem; line-height:1.7; max-width:34rem; margin-bottom:1.5rem; }
.product-link {
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.95rem; color:var(--cyan); letter-spacing:.02em;
  transition:color .25s ease, transform .3s var(--ease-out);
}
.product-link:hover { color:var(--magenta); transform:translateX(3px); }