/* ============================================================
   POZDNIAKOV.IT — design2 · "Control Panel / Observability"
   Flat near-black · acid-lime accent · monospace · dot-grid.
   NO blue, NO gradients. Techy, modern, unique.
   ============================================================ */
:root{
  --bg:#0b0c0a;
  --surface:#131512;
  --surface-2:#191c17;
  --ink:#eef0e8;
  --ink-soft:#a8ac9e;
  --ink-mute:#6b6f62;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.15);
  --accent:#c4f82a;
  --accent-dim:#9bc41f;
  --accent-ink:#0b0c0a;
  --err:#ff5b54;
  --maxw:1200px;
  --pad:clamp(1.1rem,4vw,3rem);
  --mono:"Martian Mono",ui-monospace,monospace;
  --sans:"IBM Plex Sans",system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:400;line-height:1.6;overflow-x:hidden;position:relative;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='1.5' cy='1.5' r='1' fill='%23ffffff' fill-opacity='0.05'/%3E%3C/svg%3E");
  background-position:-1px -1px;
  background-attachment:fixed;
}
a{color:inherit;text-decoration:none;}
::selection{background:var(--accent);color:var(--accent-ink);}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);position:relative;z-index:1;}
.mono{font-family:var(--mono);}

#progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--accent);z-index:100;transition:width .1s linear;}

/* top bar */
.topbar{position:sticky;top:0;z-index:50;background:rgba(11,12,10,.88);border-bottom:1px solid var(--line);}
.topbar .row{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);height:60px;display:flex;align-items:center;justify-content:space-between;gap:1rem;}
.brand{display:flex;align-items:center;gap:.55rem;font-family:var(--mono);font-weight:600;font-size:15px;letter-spacing:-.02em;}
.brand .mk{display:grid;place-items:center;width:28px;height:28px;background:var(--accent);color:var(--accent-ink);}
.brand .mk svg{width:17px;height:17px;display:block;}
.brand i{font-style:normal;color:var(--accent);}
.nav{display:flex;gap:clamp(.3rem,1.4vw,1.2rem);}
.nav a{font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--ink-mute);padding:6px 8px;transition:color .2s,background .2s;}
.nav a .ix{color:var(--accent);}
.nav a:hover,.nav a.active{color:var(--ink);background:var(--surface);}
@media(max-width:820px){.nav{display:none;}}

section{padding-block:clamp(4rem,10vh,7rem);}
.marker{display:flex;align-items:center;gap:.7rem;margin-bottom:1.8rem;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);}
.marker .br{color:var(--accent);}
.marker .ln{flex:1;height:1px;background:var(--line);}
h1,h2{font-family:var(--mono);font-weight:600;letter-spacing:-.04em;line-height:1.04;}

/* hero */
.hero{padding-top:clamp(3rem,7vh,5rem);}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(290px,30vw,400px);gap:clamp(2rem,5vw,4rem);align-items:start;}
.pill{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);border:1px solid var(--line-2);padding:5px 11px;border-radius:999px;}
.pill .live{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);animation:blip 1.8s infinite;}
@keyframes blip{0%,100%{opacity:1;}50%{opacity:.3;}}
.h1{margin-top:.2rem;font-size:clamp(1.7rem,4.4vw,3.5rem);font-weight:600;letter-spacing:-.05em;text-transform:uppercase;}
.h1 .w{display:inline-block;opacity:0;transform:translateY(16px);animation:wIn .6s var(--ease) forwards;}
@keyframes wIn{to{opacity:1;transform:none;}}
.h1 .accent{color:var(--accent);}
.h1 .caret{display:inline-block;color:var(--accent);animation:blink 1s step-end infinite;font-weight:400;}
@keyframes blink{50%{opacity:0;}}
.lede{margin-top:1.6rem;max-width:50ch;font-size:clamp(1.02rem,1.35vw,1.2rem);color:var(--ink-soft);line-height:1.55;}
.lede strong{color:var(--ink);font-weight:600;}
.cta-row{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.7rem;}
.btn{display:inline-flex;align-items:center;gap:.55rem;cursor:pointer;font-family:var(--mono);font-weight:500;font-size:12.5px;letter-spacing:.02em;text-transform:uppercase;padding:.85rem 1.3rem;border:1px solid var(--line-2);transition:background .2s,color .2s,border-color .2s,transform .15s var(--ease);}
.btn .ar{transition:transform .2s var(--ease);}
.btn:hover .ar{transform:translateX(3px);}
.btn-primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:700;}
.btn-primary:hover{background:#d4ff45;transform:translateY(-2px);}
.btn-ghost{background:transparent;color:var(--ink);}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);}
.stats{margin-top:2.4rem;display:flex;flex-wrap:wrap;gap:.7rem;}
.spill{border:1px solid var(--line);padding:.7rem 1rem;}
.spill .v{font-family:var(--mono);font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:600;line-height:1;}
.spill .v.acc{color:var(--accent);}
.spill .k{margin-top:.4rem;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);}

/* portrait panel */
.panel{position:relative;border:1px solid var(--line-2);background:var(--surface);padding:10px;}
.panel .bar{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);padding:2px 4px 8px;}
.panel .bar .live{display:inline-flex;align-items:center;gap:.4rem;color:var(--accent);}
.panel .bar .live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);animation:blip 1.8s infinite;}
.panel .img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;filter:grayscale(.35) contrast(1.05);}
.tick{position:absolute;width:8px;height:8px;border:1.5px solid var(--accent);}
.tick.t1{top:-1px;left:-1px;border-right:none;border-bottom:none;}
.tick.t2{top:-1px;right:-1px;border-left:none;border-bottom:none;}
.tick.t3{bottom:-1px;left:-1px;border-right:none;border-top:none;}
.tick.t4{bottom:-1px;right:-1px;border-left:none;border-top:none;}
.panel-id{margin-top:1rem;font-family:var(--mono);font-size:12px;line-height:1.9;}
.panel-id .r{display:flex;gap:1rem;}
.panel-id .k{width:58px;flex:none;color:var(--ink-mute);}
.panel-id .v{color:var(--ink);}
.panel-id .v.a{color:var(--accent);}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;}.port-wrap{max-width:330px;}}

/* marquee */
.marquee{position:relative;z-index:1;margin-top:.5rem;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;white-space:nowrap;}
.marquee .track{display:inline-flex;gap:1.8rem;padding:.65rem 0;font-family:var(--mono);font-weight:500;font-size:clamp(.85rem,1.4vw,1.05rem);text-transform:uppercase;color:var(--ink-soft);animation:scroll 32s linear infinite;}
.marquee .track span{display:inline-flex;align-items:center;gap:1.8rem;}
.marquee .track b{color:var(--accent);font-weight:400;}
@keyframes scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media(prefers-reduced-motion:reduce){.marquee .track{animation:none;}}

/* practice — terminal rows */
.lead2{font-size:clamp(1.7rem,4vw,2.9rem);max-width:20ch;font-weight:600;letter-spacing:-.04em;text-transform:uppercase;}
.lead2 .accent{color:var(--accent);}
.section-lede{margin-top:1.3rem;max-width:64ch;color:var(--ink-soft);font-size:clamp(1rem,1.2vw,1.12rem);}
.rows{margin-top:2.4rem;border-top:1px solid var(--line);}
.prow{display:grid;grid-template-columns:24px 40px 1fr auto;gap:clamp(.8rem,2.5vw,2rem);align-items:baseline;padding:1.4rem .6rem 1.4rem .2rem;border-bottom:1px solid var(--line);position:relative;transition:background .2s,padding-left .25s var(--ease);}
.prow::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(--accent);transition:width .25s var(--ease);}
.prow:hover{background:var(--surface);padding-left:1rem;}
.prow:hover::before{width:3px;}
.prow .pr{font-family:var(--mono);color:var(--ink-mute);transition:color .2s;}
.prow:hover .pr{color:var(--accent);}
.prow .pnum{font-family:var(--mono);font-size:12px;color:var(--ink-mute);}
.prow .pt{font-family:var(--mono);font-size:clamp(1.1rem,2.2vw,1.5rem);font-weight:600;letter-spacing:-.02em;text-transform:uppercase;}
.prow .pd{grid-column:3;margin-top:.5rem;color:var(--ink-soft);font-size:.96rem;line-height:1.5;max-width:62ch;}
.prow .ptag{align-self:center;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);border:1px solid var(--line);padding:4px 8px;white-space:nowrap;}
@media(max-width:600px){.prow{grid-template-columns:18px 1fr;}.prow .pnum{display:none;}.prow .ptag{display:none;}.prow .pd{grid-column:2;}}

/* timeline */
.log{margin-top:2.4rem;border:1px solid var(--line);}
.lrow{display:grid;grid-template-columns:120px 1fr;gap:clamp(1rem,3vw,2.5rem);align-items:center;padding:1.3rem 1.3rem;border-bottom:1px solid var(--line);position:relative;}
.lrow:last-child{border-bottom:none;}
.lrow .yr{font-family:var(--mono);font-size:clamp(1.3rem,2.8vw,1.9rem);font-weight:600;display:flex;align-items:center;gap:.7rem;}
.lrow .yr::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ink-mute);}
.lrow.acc .yr{color:var(--accent);}
.lrow.acc .yr::before{background:var(--accent);box-shadow:0 0 8px var(--accent);}
.lrow .ev{font-size:clamp(1rem,1.4vw,1.15rem);color:var(--ink);}
.lrow .ev .sub{display:block;margin-top:.3rem;font-family:var(--mono);font-size:11px;color:var(--ink-mute);}
@media(max-width:560px){.lrow{grid-template-columns:1fr;gap:.4rem;}}

/* contact */
.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:0;margin-top:2.4rem;border:1px solid var(--line-2);}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr;}}
.form{padding:1.5rem 1.5rem 1.6rem;border-right:1px solid var(--line);}
@media(max-width:820px){.form{border-right:none;border-bottom:1px solid var(--line);}}
.form-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:1rem;margin-bottom:1.2rem;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-mute);}
.field{margin-bottom:1rem;}
.field label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:.45rem;}
.field input,.field textarea{width:100%;background:var(--bg);border:1px solid var(--line-2);color:var(--ink);font-family:var(--sans);font-size:1rem;padding:.7rem .8rem;resize:vertical;transition:border-color .2s,box-shadow .2s;}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(196,248,42,.15);}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-mute);}
.contact-side{padding:1.6rem 1.6rem;display:flex;flex-direction:column;}
.invite{font-family:var(--sans);font-weight:600;font-size:clamp(1.05rem,1.55vw,1.3rem);line-height:1.4;letter-spacing:-.01em;color:var(--ink);}
.nl-wrap{display:grid;place-items:center;margin:1.4rem 0 .6rem;}
.netlogo{width:132px;height:132px;overflow:visible;}
.netlogo .ln{stroke:var(--line-2);stroke-width:1.2;}
.netlogo .pl{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:12 100;animation:nlFlow 2.4s linear infinite;}
.netlogo .pl.p2{animation-delay:.8s;}.netlogo .pl.p3{animation-delay:1.6s;}
@keyframes nlFlow{from{stroke-dashoffset:112;}to{stroke-dashoffset:0;}}
.netlogo .nd{fill:var(--accent);transform-box:fill-box;transform-origin:center;animation:nlNode 2.6s ease-in-out infinite;}
.netlogo .n2{animation-delay:.35s;}.netlogo .n3{animation-delay:.7s;}
@keyframes nlNode{0%,100%{opacity:.55;transform:scale(.85);}50%{opacity:1;transform:scale(1.1);}}
.netlogo .hub{fill:var(--accent);transform-box:fill-box;transform-origin:center;animation:nlHub 3s ease-in-out infinite;}
@keyframes nlHub{0%,100%{transform:scale(1);}50%{transform:scale(1.15);}}
.netlogo .ping{fill:none;stroke:var(--accent);stroke-width:1.2;transform-box:fill-box;transform-origin:center;animation:nlPing 3s ease-out infinite;}
@keyframes nlPing{0%{transform:scale(.5);opacity:.5;}80%,100%{transform:scale(2.7);opacity:0;}}
.coords{margin-top:0;padding-top:1.6rem;font-family:var(--mono);}
.coords .row{display:flex;gap:1rem;padding:.85rem 0;border-top:1px solid var(--line);}
.coords .k{width:84px;flex:none;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);padding-top:.3rem;}
.coords .v{font-size:1.02rem;color:var(--ink);font-family:var(--sans);}
.coords a.v:hover{color:var(--accent);}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-top:3.5rem;padding:1.4rem 0;border-top:1px solid var(--line);font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-mute);}

/* lang */
.lang{position:fixed;left:var(--pad);bottom:1.1rem;z-index:60;display:flex;align-items:stretch;background:var(--surface);border:1px solid var(--line-2);}
.lang-label{display:flex;align-items:center;gap:.45rem;padding:0 .7rem;border-right:1px solid var(--line);font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute);white-space:nowrap;}
.lang-label svg{width:13px;height:13px;stroke:var(--accent);fill:none;stroke-width:1.7;}
.lang button{font-family:var(--mono);font-size:11px;cursor:pointer;background:transparent;border:none;border-right:1px solid var(--line);color:var(--ink-mute);padding:8px 10px;transition:all .15s;}
.lang button:last-child{border-right:none;}
.lang button.on{background:var(--accent);color:var(--accent-ink);font-weight:700;}
.lang button:hover:not(.on){color:var(--ink);background:var(--surface-2);}
@media(max-width:520px){.lang{bottom:.6rem;}.lang-label{display:none;}}

/* reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease);}
.reveal.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .h1 .w{opacity:1;transform:none;animation:none;}
  .pill .live,.h1 .caret,.panel .bar .live::before,.lrow.acc .yr::before,.netlogo *{animation:none;}
}