:root{
  --bg:#111111; --panel:#181818; --panel-2:#1f1f1f; --panel-3:#262626;
  --fg:#ECECEC; --muted:#9d9d9d; --line:rgba(236,236,236,.14);
  --pink:#FF017E; --blue:#0179FF; --green:#2BD97C;
  --font-display:'RF Dewi Expanded','RF Dewi','Unbounded',system-ui,sans-serif;
  --font-body:'Onest',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --sidebar:264px; --radius:18px;
}
@font-face{font-family:'Another Danger';src:url('assets/fonts/another-danger-slanted-rus.otf') format('opentype');font-display:swap}
*{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:hidden}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--font-body); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:inherit}
img{max-width:100%; display:block}
.inv{filter:invert(1)}


.sidebar{
  position:fixed; inset:0 auto 0 0; width:var(--sidebar); padding:26px 20px;
  border-right:1px solid var(--line); display:flex; flex-direction:column; gap:22px;
  background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(8px); z-index:50;
}
.brand{display:flex; align-items:center; gap:12px; cursor:pointer}
.brand .emblem{width:34px}
.brand small{display:block; color:var(--muted); font-size:11px; letter-spacing:.14em; text-transform:uppercase}
.brand b{font-family:var(--font-display); font-size:15px; letter-spacing:.01em}
nav{display:flex; flex-direction:column; gap:2px; overflow:auto; margin-top:4px; scrollbar-width:none}
nav::-webkit-scrollbar{display:none}
nav a{
  text-decoration:none; color:var(--muted); font-size:14px; padding:8px 12px; border-radius:10px;
  display:flex; gap:10px; align-items:baseline; transition:.18s; -webkit-tap-highlight-color:transparent;
}
nav a .n{font-size:10px; opacity:.6; font-variant-numeric:tabular-nums; min-width:16px}
nav a:hover{color:var(--fg); background:var(--panel-2)}
nav a.active{color:var(--fg); background:var(--panel-3)}
nav a.active .n{color:var(--pink); opacity:1}


main{margin-left:var(--sidebar)}
.wrap{max-width:1000px; margin:0 auto; padding:0 40px}
section{padding:76px 0; border-top:1px solid var(--line); position:relative}
section:first-of-type{border-top:none}


.kicker{
  font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
  display:flex; align-items:center; gap:12px; margin:0 0 18px;
}
.kicker::before{content:""; width:34px; height:2px; background:var(--pink)}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:900; line-height:1.02; margin:0}
h1{font-size:clamp(48px,9vw,132px); letter-spacing:-.02em}
h2{font-size:clamp(30px,4.4vw,54px); letter-spacing:-.01em}
h3{font-size:20px; letter-spacing:0}
h4{font-size:15px; letter-spacing:.02em}
p{margin:0 0 14px}
.lead{font-size:19px; color:var(--fg); max-width:66ch}
.muted{color:var(--muted)}
.nameblock{display:grid; gap:0; margin:6px 0 16px; max-width:78ch}
.nameblock .row{display:grid; grid-template-columns:180px 1fr; gap:16px; align-items:baseline; padding:9px 0; border-bottom:1px dashed var(--line)}
.nameblock .lbl{color:var(--muted); font-size:13px; letter-spacing:.02em}
.nameblock .val{color:var(--fg)}
.sec-head{display:flex; align-items:flex-start; gap:18px; margin-bottom:34px}
.sec-num{
  font-family:var(--font-display); font-weight:900; color:var(--pink); font-size:15px;
  padding-top:14px; min-width:44px; letter-spacing:.02em;
}
.graffiti{color:var(--pink)}
.accentpink{color:var(--pink)}


.hero{min-height:92vh; display:flex; flex-direction:column; justify-content:center; position:relative; padding-top:40px; overflow:hidden}
.hero .wrap{position:relative; z-index:2}
.hero .emblem-lg{width:clamp(76px,11vw,124px); margin:0; flex:none; filter:invert(1) drop-shadow(0 0 24px rgba(255,1,126,.18))}
.hero-lockup{display:flex; align-items:center; gap:clamp(16px,3.2vw,44px)}
.hero-text{min-width:0}
.hero-lockup h1{font-size:clamp(34px,6vw,96px)}
.hero .sub{font-family:var(--font-display); font-weight:700; font-size:clamp(16px,2.4vw,26px); margin-top:20px}


.acc{position:absolute; pointer-events:none; mix-blend-mode:screen; z-index:1}
.acc img{width:100%}
.acc-1{width:min(560px,52vw); top:-6%; right:-14%; opacity:.95; animation:float 14s ease-in-out infinite}
.acc-2{width:min(420px,38vw); bottom:1%; left:-8%; opacity:.8; animation:float 18s ease-in-out infinite reverse}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-26px) rotate(6deg)}}


.grid{display:grid; gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:24px;
}
.card h3{margin-bottom:8px}
.card p:last-child{margin-bottom:0}
.card-pink{border-color:color-mix(in srgb,var(--pink) 46%,var(--line))}
.chip{
  display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px;
  border:1px solid var(--line); font-size:13px; margin:0 6px 6px 0; background:var(--panel-2);
}
.chip.pink{border-color:var(--pink); color:var(--pink)}
.chip.blue{border-color:var(--blue); color:var(--blue)}


.mission{
  border:1px solid color-mix(in srgb,var(--pink) 55%,var(--line));
  background:linear-gradient(160deg,rgba(255,1,126,.12),transparent 62%);
  border-radius:var(--radius); padding:30px 32px;
}
.mission p{font-family:var(--font-display); font-weight:700; font-size:clamp(20px,2.5vw,30px); line-height:1.18; margin:0}
.alt-mission{list-style:none; padding:0; margin:16px 0 0; display:flex; flex-direction:column; gap:10px}
.alt-mission li{color:var(--muted); font-size:15px; padding-left:18px; position:relative}
.alt-mission li::before{content:""; position:absolute; left:0; top:9px; width:7px; height:7px; background:var(--pink); border-radius:2px}


.deviz{
  font-family:var(--font-display); font-weight:900; font-size:clamp(24px,3.6vw,44px); line-height:1.05;
  padding:34px 32px; border-radius:var(--radius);
  background:var(--panel); border:1px solid var(--line); position:relative; overflow:hidden;
}
.deviz::after{content:""; position:absolute; right:-40px; bottom:-40px; width:180px; height:180px;
  background:radial-gradient(circle,var(--pink),transparent 68%); opacity:.35; filter:blur(10px)}


.arch{display:flex; flex-direction:column; gap:12px; margin:8px 0 22px}
.arch .row{display:flex; align-items:center; gap:14px}
.arch .box{border:1px solid var(--line); background:var(--panel); border-radius:12px; padding:13px 18px; font-family:var(--font-display); font-weight:700; font-size:15px}
.arch .box.pink{border-color:var(--pink); color:var(--pink)}
.arch .box.blue{border-color:var(--blue); color:var(--blue)}
.arch .box.grey{color:var(--muted)}
.arch .role{color:var(--muted); font-size:13px}
.arch .indent{margin-left:36px; position:relative}
.arch .indent::before{content:""; position:absolute; left:-18px; top:-14px; height:calc(50% + 14px); border-left:1px dashed var(--line)}
.arch .indent::after{content:""; position:absolute; left:-18px; top:50%; width:18px; border-top:1px dashed var(--line)}


.logo-row{margin-bottom:18px}
.logo-row .name{font-size:13px; color:var(--muted); margin-bottom:8px; letter-spacing:.03em}
.logo-pair{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.logo-pair.four{grid-template-columns:repeat(4,1fr)}
.logo-cell{border-radius:var(--radius); display:flex; align-items:center; justify-content:center; padding:30px; min-height:150px; border:1px solid var(--line)}
.logo-cell.dark{background:#0c0c0c}
.logo-cell.light{background:#ECECEC}
.logo-cell img{max-height:74px; width:auto}
.logo-cell.light img{max-height:74px}
.logo-cell.tall img{max-height:120px}
.modelabel{position:relative}
.modelabel::after{content:attr(data-label); position:absolute; top:10px; left:14px; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
a.logo-cell{text-decoration:none; cursor:pointer; transition:.15s}
a.logo-cell:hover{border-color:var(--pink)}


.pair{display:flex; flex-direction:column}
.pair h3{margin-bottom:12px}
.safezone{position:relative; display:flex; flex-direction:column; padding:24px; background:var(--panel); border-radius:var(--radius); border:1px solid var(--line)}
.safezone-stage{flex:1; display:grid; place-items:center; padding:16px 6px}
.safezone .frame{border:1px dashed var(--blue); padding:calc(var(--x) * 1); position:relative; border-radius:4px}
.safezone .frame::before{content:"X"; position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:var(--panel); padding:0 8px; color:var(--blue); font-size:12px}
.safezone .frame::after{content:"X"; position:absolute; left:0; top:50%; transform:translate(-50%,-50%); background:var(--panel); padding:6px 0; color:var(--blue); font-size:12px}
.safezone img{width:300px}
.safezone p{color:var(--muted); font-size:13px; margin:0}
.safezone .xlab{position:absolute; color:var(--blue); font-size:12px}


table{width:100%; border-collapse:collapse; font-size:14px}
th,td{text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top}
th{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:500}
tr:hover td{background:var(--panel)}
td b{font-weight:700}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.92em; background:var(--panel-3); padding:2px 6px; border-radius:6px}


.swatches{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.swatch{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; cursor:pointer; transition:.18s; background:var(--panel)}
.swatch:hover{transform:translateY(-4px)}
.swatch .fill{height:130px}
.swatch .info{padding:14px 16px}
.swatch .info .role{font-weight:700; font-size:14px}
.swatch .info .hex{color:var(--muted); font-size:12px; margin-top:3px; font-family:ui-monospace,monospace}
.swatch .info .copy{font-size:10px; color:var(--pink); letter-spacing:.12em; text-transform:uppercase; margin-top:8px; opacity:0; transition:.18s}
.swatch:hover .copy{opacity:1}
.propbar{display:flex; height:16px; border-radius:999px; overflow:hidden; margin:10px 0; border:1px solid var(--line)}
.propbar span{display:block}
.blist{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
.blist li{display:flex; gap:12px; align-items:flex-start}
.blist .ic{flex:none; width:20px; height:20px; border-radius:6px; display:grid; place-items:center; font-size:12px; margin-top:2px}
.ok{background:rgba(43,217,124,.16); color:var(--green)}
.no{background:rgba(255,1,126,.16); color:var(--pink)}
.cb-row{display:flex; align-items:center; justify-content:center; gap:22px; padding:30px 18px; background:#0c0c0c; border-radius:12px; margin:12px 0}
.cb-ppos{height:34px; width:auto}
.cb-ours{height:40px; width:auto}
.cb-line{flex:none; width:1px; height:48px; background:var(--line)}
.cb-cross{flex:none; position:relative; width:80px; height:52px; display:grid; place-items:center}
.cb-cross i{position:absolute}
.cb-cross i.l{left:0; top:50%; width:28px; border-top:1px dashed rgba(236,236,236,.45)}
.cb-cross i.r{right:0; top:50%; width:28px; border-top:1px dashed rgba(236,236,236,.45)}
.cb-cross i.v{left:50%; top:0; bottom:0; border-left:1px dashed rgba(236,236,236,.45)}
.cb-cross b{position:relative; z-index:1; background:#0c0c0c; color:#ECECEC; font-family:var(--font-display); font-weight:400; font-size:22px; line-height:1; padding:0 7px}


.fontcard{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:24px; margin-bottom:16px}
.fontcard .spec{margin:10px 0 0; overflow:hidden}
.fontcard .tag{display:block; margin:6px 0 0}
.font-disp .spec{font-family:var(--font-display); font-weight:900; letter-spacing:-.02em; font-size:clamp(30px,5vw,58px); line-height:1}
.font-body .spec{font-family:var(--font-body); font-weight:400; font-size:clamp(22px,3vw,34px)}
.font-accent .spec{font-family:'Another Danger',sans-serif; font-weight:400; color:var(--pink); font-size:clamp(34px,6vw,64px); letter-spacing:.02em; line-height:1.1}


.gal2{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:24px}
.gal-cap{display:flex; align-items:center; gap:10px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:12px}
.gal-cap::before{content:""; width:24px; height:2px; background:var(--pink)}
.gal-cap.glass::before{background:var(--blue)}
.gal-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.gal-grid .cell{aspect-ratio:1; background:#0c0c0c; border:1px solid var(--line); border-radius:14px; overflow:hidden; display:grid; place-items:center}
.gal-grid .cell img{mix-blend-mode:screen; width:100%; height:100%; object-fit:contain; padding:8px}
.tag{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}


.posts{display:grid; grid-template-columns:repeat(3,1fr); align-items:start; gap:18px; margin-top:18px}
.posts .post{margin:0}
.posts .post img{width:100%; border-radius:16px; border:1px solid var(--line); display:block; background:#0c0c0c}
.posts .post figcaption{margin-top:10px; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}


.griddemo{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px}
.gd-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:22px}
.gd-card h4{font-size:14px}
.gd-stage{display:grid; place-items:center; padding:18px; background:#0c0c0c; border-radius:12px; margin-top:14px}
.gd-frame{width:min(260px,74%); aspect-ratio:1; position:relative; background:#161616; border:1px solid var(--line); overflow:hidden}
.gd-grid{position:absolute; inset:0; background-image:repeating-linear-gradient(0deg,transparent 0 calc(5% - 1px),rgba(236,236,236,.12) calc(5% - 1px) 5%),repeating-linear-gradient(90deg,transparent 0 calc(5% - 1px),rgba(236,236,236,.12) calc(5% - 1px) 5%)}
.gd-safe{position:absolute; inset:5%; border:1px dashed var(--blue)}
.gd-bar{position:absolute}
.gd-stripe{position:absolute; height:2px; z-index:2}
.gd-obj{position:absolute; border-radius:50%; z-index:3; background:radial-gradient(circle at 34% 28%, #f4f4f4, #a2a7ad 46%, #3f3f3f 100%); box-shadow:0 6px 18px rgba(0,0,0,.5)}
.gd-logo{position:absolute; z-index:3; opacity:.95}
.gd-lbl{position:absolute; font-size:10px; letter-spacing:.1em; color:var(--blue); text-transform:uppercase}
.gd-size{font-size:12px; letter-spacing:.06em; color:var(--fg); background:rgba(12,12,12,.72); padding:2px 7px; border-radius:6px; text-transform:none}
.gd-cap{margin:14px 0 0; font-size:13px; color:var(--muted)}


.reg{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.reg .card.off{border-left:3px solid var(--blue)}
.reg .card.stu{border-left:3px solid var(--pink)}


.check{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.check-item{display:flex; gap:12px; align-items:flex-start; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 16px; font-size:14px; cursor:pointer; transition:.15s}
.check-item:hover{border-color:color-mix(in srgb,var(--pink) 45%,var(--line))}
.check-item input{appearance:none;-webkit-appearance:none;flex:none;width:18px;height:18px;border-radius:5px;border:1.5px solid var(--muted);margin:2px 0 0;cursor:pointer;position:relative;transition:.15s;background:transparent}
.check-item input:checked{background:var(--pink);border-color:var(--pink)}
.check-item input:checked::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:12px;line-height:1}

footer{padding:60px 0 90px; border-top:1px solid var(--line); color:var(--muted); font-size:13px}
footer .wrap{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap}
.top-link{position:fixed; right:22px; bottom:22px; z-index:60; width:46px; height:46px; border-radius:50%;
  border:1px solid var(--line); background:var(--panel); color:var(--fg); display:grid; place-items:center; cursor:pointer; transition:.18s}
.top-link:hover{border-color:var(--pink); color:var(--pink)}


.btn{
  display:inline-flex; align-items:center; gap:9px; padding:10px 18px;
  border:1px solid var(--line); border-radius:999px; background:transparent;
  color:var(--fg); font-size:14px; line-height:1; text-decoration:none;
  transition:.18s; -webkit-tap-highlight-color:transparent;
}
.btn:hover{border-color:var(--pink); color:var(--pink); background:var(--panel-2)}
.btn .ico{
  width:16px; height:16px; flex:none; background:currentColor;
  -webkit-mask-position:center; -webkit-mask-repeat:no-repeat; -webkit-mask-size:contain;
  mask-position:center; mask-repeat:no-repeat; mask-size:contain;
}
.ico-vk{-webkit-mask-image:url(assets/icons/vk.svg); mask-image:url(assets/icons/vk.svg)}
.ico-tg{-webkit-mask-image:url(assets/icons/tg.svg); mask-image:url(assets/icons/tg.svg)}
.btn-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
.side-social{
  display:flex; flex-direction:column; gap:8px; flex:none;
  margin-top:auto; padding-top:18px; border-top:1px solid var(--line);
}
.side-social .btn{justify-content:center}


@media (max-width:980px){
  :root{--sidebar:0px}
  .sidebar{position:static; width:auto; inset:auto; flex-direction:row; align-items:center; gap:14px; padding:14px 18px; border-right:none; border-bottom:1px solid var(--line)}
  .sidebar nav{flex-direction:row; overflow-x:auto; margin:0; gap:4px}
  .sidebar nav a,.sidebar nav a:hover,.sidebar nav a.active{background:transparent}
  .sidebar nav a .n{display:none}
  .side-social{display:none}
  main{margin-left:0}
  .wrap{padding:0 22px}
  .brand b{font-size:13px}
  .g2{grid-template-columns:1fr}
  .g3,.g4{grid-template-columns:1fr 1fr}
  .swatches{grid-template-columns:1fr 1fr}
  .logo-pair,.logo-pair.four{grid-template-columns:1fr 1fr}
  .mocks,.reg,.check,.griddemo{grid-template-columns:1fr}
  .posts{grid-template-columns:repeat(2,1fr)}
  .gal2{grid-template-columns:1fr}
  .hero{min-height:78vh}
}
@media (max-width:620px){
  .wrap{padding:0 16px}
  section{padding:56px 0}
  .hero-lockup{flex-direction:column; align-items:flex-start; gap:16px}
  .hero .emblem-lg{width:84px}
  .nameblock .row{grid-template-columns:1fr; gap:2px}
  .g3,.g4{grid-template-columns:1fr}
  .logo-pair{grid-template-columns:1fr}
  .posts{grid-template-columns:1fr}
  .logo-cell{padding:20px; min-height:110px}
  .logo-cell img{max-height:58px}
  .logo-cell.tall img{max-height:96px}
  table{font-size:12.5px}
  th,td{padding:8px 9px}
  .cb-row{gap:12px; padding:22px 10px}
  .cb-ppos{height:24px}
  .cb-ours{height:28px}
  .cb-line{height:36px}
  .cb-cross{width:56px; height:38px}
  .cb-cross i.l,.cb-cross i.r{width:18px}
  .cb-cross b{font-size:16px; padding:0 5px}
  .swatch .fill{height:96px}
}
.mt10{margin-top:10px}
.mt12{margin-top:12px}
.mt16{margin-top:16px}
.mt24{margin-top:24px}
.mt26{margin-top:26px}
.mt30{margin-top:30px}
.mt34{margin-top:34px}
.mb6{margin-bottom:6px}
.mb10{margin-bottom:10px}
.mb12{margin-bottom:12px}
.mb14{margin-bottom:14px}
.mb18{margin-bottom:18px}
.mb22{margin-bottom:22px}
.mb24{margin-bottom:24px}
.mb26{margin-bottom:26px}
.mw420{max-width:420px}
.mw640{max-width:640px}
.mw70{max-width:70ch}
.h3-block{margin:34px 0 14px}
.hl-sub{margin-top:6px;font-size:14px}
.note{margin-top:12px;font-size:14px}
.note-sm{margin-top:10px;font-size:14px}
.note-lg{margin-top:14px;font-size:14px}
.caption{margin:0;font-size:14px}
.fine{margin:12px 0 0;font-size:13px}
.fine-sm{margin-top:16px;font-size:13px}
.name-lg{font-family:var(--font-display);font-weight:900;font-size:22px}
.name-lg-2{line-height:1.15;margin-top:4px}
.footer-logo{height:30px;margin-bottom:12px}
.accentgreen{color:var(--green)}
.accentblue{color:var(--blue)}
.bg-ec{background:#ECECEC}
.bg-pink{background:#FF017E}
.bg-blue{background:#0179FF}
.bg-black{background:#111111;border:1px solid var(--line)}
.bg-black-line{background:#111111;border-bottom:1px solid var(--line)}
.propbar .pb-base{flex:80;background:linear-gradient(90deg,#ECECEC,#111111)}
.propbar .pb-pink{flex:12;background:#FF017E}
.propbar .pb-blue{flex:8;background:#0179FF}
.safezone .frame{--x:16px}
.gd-obj-1{left:35%;top:20%;width:20%;aspect-ratio:1}
.gd-lbl-1{top:5.6%;left:5.6%}
.gd-lbl-br{bottom:8px;right:8px}
.gd-lbl-bl{bottom:8px;left:8px}
.gd-s1{top:25%;left:0;width:50%;background:var(--pink)}
.gd-s2{bottom:19.5%;right:0;width:29%;background:var(--pink)}
.gd-s3{bottom:0;right:29%;width:2px;height:20%;background:var(--pink)}