:root {
  --bg: #08080a;
  --ink: #efeee9;
  --dim: rgba(239, 238, 233, .62);
  --faint: rgba(239, 238, 233, .34);
  --line: rgba(239, 238, 233, .13);
  --red: #ff3b14;
  --disp: "Oswald", "Roboto Condensed", "Arial Narrow", sans-serif;
  --body: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  --pad: clamp(20px, 5vw, 76px);
  --max: 1280px;
}
html[data-lang="zh"] { --body: "Noto Sans SC", "Microsoft YaHei", sans-serif; --disp: "Oswald", "Noto Sans SC", sans-serif; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: var(--bg); }
body { background: var(--bg); color: var(--ink); font-family: var(--body); font-weight: 300; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body::before { /* зерно плёнки */
  content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .055; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: var(--red); color: #fff; }

/* ---------- шапка ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 60; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; padding: 18px var(--pad); transition: background .35s, padding .35s; }
.nav.solid { background: rgba(8, 8, 10, .82); backdrop-filter: blur(12px); padding-top: 12px; padding-bottom: 12px; box-shadow: 0 1px 0 var(--line); }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { height: 34px; width: auto; }
.bw { display: grid; line-height: 1.05; }
.bw b { font-family: var(--disp); font-weight: 700; font-size: 20px; letter-spacing: .12em; }
.bw i { font-style: normal; font-size: 10px; letter-spacing: .28em; color: var(--faint); margin-top: 3px; }
.menu { display: flex; justify-content: center; gap: clamp(18px, 3vw, 46px); }
.menu a { display: flex; align-items: baseline; gap: 8px; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); transition: color .2s; }
.menu a em { font-style: normal; font-size: 10px; color: var(--red); letter-spacing: .1em; }
.menu a:hover { color: var(--ink); }
.lang { display: flex; gap: 2px; }
.lang button { background: none; border: 1px solid transparent; color: var(--faint); font: 500 12px var(--disp); letter-spacing: .16em; padding: 6px 10px; cursor: pointer; transition: color .2s, border-color .2s; }
.lang button:hover { color: var(--ink); }
.lang button.on { color: var(--ink); border-color: var(--red); }
@media (max-width: 980px) { .menu { display: none; } .nav { grid-template-columns: 1fr auto; } .bw i { display: none; } }

/* ---------- главный экран ---------- */
.hero { position: relative; height: 300vh; --p: 0; --s: 0; --s2: 0; --f: 0; --tg: 0; background: var(--bg); }
.stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 38% 56% at 50% 50%, rgba(255, 59, 20, calc(.04 + var(--p) * .38 + var(--f) * .5)) 0%, rgba(255, 59, 20, 0) 70%); }
.embers { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.title { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-52%); text-align: center; padding: 0 var(--pad); pointer-events: none; }
.word { position: relative; display: inline-block; transform: scale(calc(1 + var(--f) * .035)); }
.word h1 { font-family: var(--disp); font-weight: 700; font-size: clamp(46px, 13vw, 220px); line-height: 1; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; display: flex; opacity: var(--s2); will-change: transform; }
.word h1 .a { color: var(--ink); }
.word h1 .b { color: var(--red); }
/* слово режется той же рваной трещиной, что и камень; половины влетают с краёв и смыкаются */
.hl { clip-path: polygon(0 0, 50% 0, 51.5% 12%, 48.5% 26%, 52% 41%, 48% 55%, 51.5% 69%, 49% 83%, 50.5% 100%, 0 100%); transform: translate(calc((1 - var(--s)) * -70vw), calc((1 - var(--s)) * -9vh)) rotate(calc((1 - var(--s)) * -4deg)); }
.hr { position: absolute; inset: 0; clip-path: polygon(50% 0, 51.5% 12%, 48.5% 26%, 52% 41%, 48% 55%, 51.5% 69%, 49% 83%, 50.5% 100%, 100% 100%, 100% 0); transform: translate(calc((1 - var(--s)) * 70vw), calc((1 - var(--s)) * 9vh)) rotate(calc((1 - var(--s)) * 4deg)); }
.seam { position: absolute; inset: 4% 0; width: 100%; height: 92%; overflow: visible; pointer-events: none; opacity: var(--f); filter: drop-shadow(0 0 calc(2px + var(--f) * 12px) rgba(255, 59, 20, .95)); }
.seam polyline { fill: none; stroke: var(--red); stroke-width: calc(.3px + var(--f) * 1px); vector-effect: non-scaling-stroke; stroke-linejoin: miter; }
.tag { margin-top: clamp(24px, 3.4vw, 54px); font-size: clamp(12px, 1.3vw, 18px); letter-spacing: .34em; text-transform: uppercase; color: var(--dim); opacity: var(--tg); transform: translateY(calc((1 - var(--tg)) * 14px)); }
.mono { position: absolute; left: 50%; top: 50%; height: min(78vh, 900px); aspect-ratio: 828 / 1349; transform: translate(-50%, -50%); }
.half { position: absolute; inset: 0; width: 100%; height: 100%; will-change: transform; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .55)); }
.half.l { transform: translateX(calc(var(--p) * -62vw)) rotate(calc(var(--p) * -5deg)); transform-origin: 20% 90%; }
.half.r { transform: translateX(calc(var(--p) * 62vw)) rotate(calc(var(--p) * 5deg)); transform-origin: 80% 90%; }
.hint { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); font-size: 11px; letter-spacing: .4em; text-transform: uppercase; color: var(--faint); opacity: calc(1 - var(--p) * 4); text-align: center; }
.hint::after { content: ""; display: block; width: 1px; height: 36px; margin: 12px auto 0; background: linear-gradient(var(--red), rgba(255, 59, 20, 0)); animation: drip 2s ease-in-out infinite; }
@keyframes drip { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- бегущая строка (скорость и наклон зависят от прокрутки) ---------- */
.ticker { overflow: hidden; border-block: 1px solid var(--line); padding: 20px 0; background: var(--bg); font-size: clamp(30px, 3.6vw, 52px); }
.tk { display: flex; align-items: center; width: max-content; will-change: transform; --sk: 0deg; transform: skewX(var(--sk)); }
.it { font-family: var(--disp); font-size: 1em; line-height: 1.25; font-weight: 700; letter-spacing: .14em; padding: 0 clamp(18px, 2.6vw, 38px); color: transparent; -webkit-text-stroke: 1px rgba(239, 238, 233, .42); white-space: nowrap; transition: color .25s, -webkit-text-stroke-color .25s; cursor: default; }
.it.cn { font-family: "Noto Sans SC", sans-serif; font-weight: 900; font-size: .84em; letter-spacing: .3em; -webkit-text-stroke: 0; color: var(--red); }
.it:hover { color: var(--ink); -webkit-text-stroke-color: var(--ink); }
.it.cn:hover { color: var(--ink); }
.dm { flex: none; width: 11px; height: 11px; background: var(--red); transform: rotate(45deg); }

/* ---------- секции ---------- */
.block { padding: clamp(84px, 11vw, 150px) var(--pad); position: relative; }
.wrap { max-width: var(--max); margin: 0 auto; }
.sh { display: flex; align-items: baseline; gap: 18px; margin-bottom: 22px; }
.sh .no { font-family: var(--disp); font-size: 14px; letter-spacing: .2em; color: var(--red); }
.sh .lab { font-size: 12px; letter-spacing: .4em; text-transform: uppercase; color: var(--ink); }
.tri { font-size: 11px; letter-spacing: .26em; color: var(--faint); text-transform: uppercase; }
h2 { font-family: var(--disp); font-size: clamp(38px, 6vw, 92px); font-weight: 500; letter-spacing: .02em; line-height: 1.02; text-transform: uppercase; max-width: 16ch; }
h2 b { font-weight: 700; color: var(--red); }
html[data-lang="zh"] h2 { font-family: "Noto Sans SC", var(--disp); font-weight: 900; letter-spacing: .04em; max-width: 14ch; }
.lead { margin-top: 26px; max-width: 64ch; color: var(--dim); font-size: clamp(16px, 1.45vw, 20px); }
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- проекты ---------- */
.sub { display: flex; align-items: center; gap: 18px; margin: 72px 0 24px; font-family: var(--disp); font-size: 15px; letter-spacing: .38em; text-transform: uppercase; }
.sub i { flex: 1; height: 1px; background: var(--line); }
.sub .tri { order: 3; }
.feature { position: relative; border: 1px solid var(--line); background: #0c0c0e; overflow: hidden; display: grid; }
.feature .art { display: block; overflow: hidden; aspect-ratio: 3 / 1; }
.feature .art img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.2, .7, .2, 1), filter .6s; filter: saturate(.92); }
.feature:hover .art img { transform: scale(1.05); filter: saturate(1.1); }
.fmeta { padding: 28px 34px 32px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 20px 40px; justify-content: space-between; align-items: flex-end; }
.fl { display: grid; gap: 12px; max-width: 62ch; }
.fl h3 { font-family: var(--disp); font-size: clamp(26px, 2.8vw, 40px); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.fl p { color: var(--dim); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-block; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; padding: 5px 11px; border: 1px solid var(--faint); color: var(--dim); }
.chip.hot { border-color: var(--red); color: var(--red); }
.chip.dim { border-color: var(--line); color: var(--faint); }
.btn { display: inline-block; font-family: var(--disp); font-size: 13px; letter-spacing: .28em; text-transform: uppercase; padding: 14px 24px; border: 1px solid var(--red); color: var(--red); }
.btn.off { border-style: dashed; border-color: var(--faint); color: var(--faint); }

.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 900px) { .tiles { grid-template-columns: 1fr; } }
.tile { position: relative; min-height: 300px; border: 1px solid var(--line); background: #0b0b0d; padding: 26px 28px 30px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; isolation: isolate; transition: border-color .3s, transform .3s; }
.tile:hover { border-color: rgba(255, 59, 20, .6); transform: translateY(-4px); }
.tile::before { content: attr(data-bg); position: absolute; right: -8px; top: -14px; z-index: -1; font-family: var(--disp); font-weight: 700; font-size: 120px; line-height: 1; letter-spacing: .04em; color: transparent; -webkit-text-stroke: 1px rgba(239, 238, 233, .13); transition: -webkit-text-stroke-color .4s, transform .6s; }
.tile:hover::before { -webkit-text-stroke-color: rgba(255, 59, 20, .5); transform: translateX(-10px); }
.tn { font-family: var(--disp); font-size: 15px; letter-spacing: .2em; color: var(--red); }
.tile h4 { margin-top: 14px; font-family: var(--disp); font-size: clamp(22px, 2.1vw, 30px); letter-spacing: .06em; text-transform: uppercase; font-weight: 600; line-height: 1.15; }
.tile p { margin-top: 8px; color: var(--dim); }
html[data-lang="zh"] .tile h4 { font-family: "Noto Sans SC", sans-serif; font-weight: 900; }

/* засекреченный проект */
.secret { border-style: dashed; border-color: rgba(239, 238, 233, .26); background: #09090b; }
.secret::before { display: none; }
.secret::after { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 4px); }
.scan { position: absolute; left: 0; right: 0; height: 90px; top: -90px; z-index: -1; background: linear-gradient(180deg, rgba(255, 59, 20, 0), rgba(255, 59, 20, .14), rgba(255, 59, 20, 0)); animation: scan 5s linear infinite; }
@keyframes scan { to { transform: translateY(420px); } }
.q { position: absolute; right: 14px; top: -22px; z-index: -1; font-family: var(--disp); font-weight: 700; font-size: 230px; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(239, 238, 233, .16); animation: flick 6s steps(1) infinite; }
@keyframes flick { 0%, 92%, 100% { opacity: 1; } 93% { opacity: .2; } 95% { opacity: .9; } 97% { opacity: .1; } }
.stamp > span { display: inline-block; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--red); border: 1px solid var(--red); padding: 5px 10px; }
.soon { margin-top: 14px; font-family: var(--disp); font-size: clamp(30px, 3vw, 44px); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.soon::after { content: "_"; color: var(--red); animation: blink 1s steps(1) infinite; margin-left: 4px; }
@keyframes blink { 50% { opacity: 0; } }
.bars { display: grid; gap: 8px; margin-top: 16px; }
.bars i { display: block; height: 10px; width: var(--w); background: rgba(239, 238, 233, .22); transition: width .5s; }
.secret:hover .bars i:nth-child(odd) { width: 30%; }
.secret:hover .bars i:nth-child(even) { width: 96%; }

/* ---------- карта пути ---------- */
.rm { --fill: 0%; position: relative; list-style: none; margin-top: 70px; }
.rm::before, .rm::after { content: ""; position: absolute; left: 134px; top: 0; width: 1px; }
.rm::before { bottom: 0; background: var(--line); }
.rm::after { height: var(--fill); background: linear-gradient(var(--red), #ff9a14); box-shadow: 0 0 14px rgba(255, 59, 20, .6); }
.ms { display: grid; grid-template-columns: 110px 48px 1fr; gap: 0; padding: 30px 0; opacity: .32; transition: opacity .5s; }
.ms.on { opacity: 1; }
.mn { font-family: var(--disp); font-size: clamp(36px, 4.6vw, 62px); font-weight: 700; line-height: .9; color: transparent; -webkit-text-stroke: 1px rgba(239, 238, 233, .4); transition: color .5s, -webkit-text-stroke-color .5s; }
.ms.on .mn { -webkit-text-stroke-color: var(--red); }
.dot { position: relative; margin: 8px 0 0 18px; width: 13px; height: 13px; border-radius: 50%; background: var(--bg); border: 1px solid var(--faint); z-index: 1; transition: background .4s, border-color .4s, box-shadow .4s; }
.ms.on .dot { background: var(--red); border-color: var(--red); box-shadow: 0 0 0 5px rgba(255, 59, 20, .18); }
.mc time { font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--red); }
.mc h3 { margin-top: 6px; font-family: var(--disp); font-size: clamp(22px, 2.6vw, 36px); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; line-height: 1.15; }
html[data-lang="zh"] .mc h3 { font-family: "Noto Sans SC", sans-serif; font-weight: 900; }
.mc p { margin-top: 10px; max-width: 62ch; color: var(--dim); }
.ms.next .mn { color: var(--red); -webkit-text-stroke: 0; }
.ms.next .mc h3 { color: var(--red); }
@media (max-width: 700px) { .ms { grid-template-columns: 54px 34px 1fr; } .rm::before, .rm::after { left: 70px; } .dot { margin-left: 10px; } }

/* ---------- студия ---------- */
.about { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(30px, 6vw, 100px); align-items: start; }
@media (max-width: 920px) { .about { grid-template-columns: 1fr; } }
.sign { margin-top: 30px; color: var(--dim); }
.sign b { color: var(--ink); font-family: var(--disp); letter-spacing: .12em; font-size: 20px; text-transform: uppercase; font-weight: 600; margin-right: 8px; }
.facts { display: grid; margin-top: 8px; }
.fact { display: grid; grid-template-columns: 78px 1fr; gap: 14px; padding: 26px 0; border-top: 1px solid var(--line); }
.fact:last-child { border-bottom: 1px solid var(--line); }
.fn { font-family: "Noto Sans SC", sans-serif; font-weight: 900; font-size: 42px; line-height: 1; color: var(--red); }
.fact b { display: block; font-family: var(--disp); letter-spacing: .1em; text-transform: uppercase; font-size: 17px; font-weight: 600; margin-bottom: 4px; }
.fact span:not(.fn) { color: var(--dim); }

/* ---------- контакты ---------- */
.social { margin-top: 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); border: 1px solid var(--line); }
.soc { display: grid; gap: 4px; padding: 30px 26px; border-right: 1px solid var(--line); transition: background .3s; position: relative; overflow: hidden; }
.soc:last-child { border-right: 0; }
.soc::after { content: "↗"; position: absolute; right: 22px; top: 22px; color: var(--faint); transition: color .3s, transform .3s; }
.soc:hover { background: rgba(255, 59, 20, .08); }
.soc:hover::after { color: var(--red); transform: translate(3px, -3px); }
.soc b { font-family: var(--disp); font-size: 12px; letter-spacing: .4em; color: var(--red); text-transform: uppercase; font-weight: 500; }
.soc span { font-family: var(--disp); font-size: 24px; letter-spacing: .05em; }
.soc em { font-style: normal; font-size: 13px; color: var(--faint); }

/* ---------- подвал ---------- */
footer { border-top: 1px solid var(--line); padding: 44px var(--pad) 56px; color: var(--faint); font-size: 13px; }
footer .row { display: flex; flex-wrap: wrap; gap: 14px 40px; justify-content: space-between; max-width: var(--max); margin: 0 auto; padding: 0; border: 0; }
footer .row:hover { padding: 0; background: none; }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 28px; }
footer a:hover { color: var(--ink); }
footer .disc { max-width: var(--max); margin: 24px auto 0; font-size: 12px; line-height: 1.6; color: rgba(239, 238, 233, .28); }

/* ---------- юридические страницы ---------- */
.doc { max-width: 820px; margin: 0 auto; padding: 130px var(--pad) 90px; }
.doc h1 { font-family: var(--disp); font-size: clamp(30px, 4vw, 50px); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px; }
.doc .upd { color: var(--faint); font-size: 13px; letter-spacing: .1em; margin-bottom: 36px; }
.doc h2 { font-family: var(--disp); font-size: 18px; letter-spacing: .12em; margin: 34px 0 10px; max-width: none; font-weight: 600; }
.doc p, .doc li { color: var(--dim); margin-bottom: 10px; }
.doc ul { padding-left: 22px; }
.doc .warn { border: 1px dashed var(--red); padding: 14px 18px; color: var(--ink); background: rgba(255, 59, 20, .06); margin-bottom: 30px; font-size: 14px; }
.doc table { width: 100%; border-collapse: collapse; margin: 14px 0; }
.doc td { padding: 12px 10px; border-bottom: 1px solid var(--line); color: var(--dim); vertical-align: top; }
.doc td:first-child { width: 38%; color: var(--ink); }
.doc mark { background: rgba(255, 59, 20, .18); color: var(--ink); padding: 0 4px; }
.back { display: inline-block; margin-bottom: 26px; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--red); }
.nav.plain { grid-template-columns: auto auto; justify-content: space-between; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { transition: none; opacity: 1; transform: none; }
  .scan, .q, .hint::after, .soon::after { animation: none; }
}