/* ============================================================
   MSK-IT · cyber hacking AI edition
   ============================================================ */
:root{
  --bg:        #05070a;
  --bg-2:      #080c12;
  --panel:     #0a1017;
  --panel-2:   #0d1520;
  --line:      rgba(0,255,170,.14);
  --line-soft: rgba(0,255,170,.07);
  --green:     #00ffaa;
  --green-2:   #00d58f;
  --cyan:      #00d5ff;
  --magenta:   #ff2ec4;
  --amber:     #ffc857;
  --text:      #c9d4d9;
  --dim:       #5f7280;
  --dim-2:     #3d4e5a;
  --glow:      0 0 22px rgba(0,255,170,.25);
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --nav-h: 64px;
  --max-w: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{ background:rgba(0,255,170,.28); color:#eafff6; }
a{ color:var(--green); text-decoration:none; }
a:hover{ color:#7dffc9; }
strong{ font-weight:700; }
.dim{ color:var(--dim); }
.accent{ color:var(--green); }

.container{ max-width:var(--max-w); margin:0 auto; padding:0 24px; position:relative; }
.container--narrow{ max-width:880px; }
.wide{ display:none; }
@media(max-width:720px){ .wide{ display:inline; } }

/* ---------- overlays ---------- */
.scanlines{
  position:fixed; inset:0; z-index:90; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay;
}
.grid-bg{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(0,213,255,.07), transparent 60%),
    radial-gradient(ellipse 70% 50% at 50% 110%, rgba(0,255,170,.05), transparent 60%),
    repeating-linear-gradient(90deg, rgba(0,255,170,.030) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg,  rgba(0,255,170,.030) 0 1px, transparent 1px 72px),
    linear-gradient(180deg, #04060a, #05070a);
}
.progress{
  position:fixed; top:0; left:0; height:2px; width:0%; z-index:100;
  background:linear-gradient(90deg, var(--green), var(--cyan));
  box-shadow:0 0 10px rgba(0,255,170,.6);
  transition:width .1s linear;
}

/* ---------- shared ---------- */
.kicker{
  font-family:var(--mono);
  font-size:.78rem; letter-spacing:.18em; text-transform:lowercase;
  color:var(--green); margin-bottom:14px;
  text-shadow:0 0 12px rgba(0,255,170,.5);
}
.section{ padding:110px 0; border-top:1px solid var(--line-soft); position:relative; }
.section--alt{ background:linear-gradient(180deg, rgba(10,16,23,.9), rgba(8,12,18,.6)); }
.section__title{
  font-family:var(--mono);
  font-size:clamp(1.5rem, 3.4vw, 2.35rem);
  font-weight:700; line-height:1.25; letter-spacing:-.01em;
  color:#e8f2f5; margin-bottom:18px;
}
.section__title--sm{ font-size:clamp(1.25rem, 2.6vw, 1.8rem); }
.section__intro{ color:var(--dim); max-width:720px; font-size:1.02rem; margin-bottom:48px; }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:.85rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  padding:14px 26px; border:1px solid var(--line);
  color:var(--green); background:rgba(0,255,170,.05);
  cursor:pointer; position:relative; transition:all .22s ease;
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.btn:hover{
  background:rgba(0,255,170,.14); color:#eafff6;
  box-shadow:var(--glow); border-color:rgba(0,255,170,.5);
  transform:translateY(-1px);
}
.btn--primary{ background:var(--green); color:#03130c; border-color:var(--green); }
.btn--primary:hover{ background:#7dffc9; box-shadow:0 0 30px rgba(0,255,170,.45); }
.btn--full{ width:100%; justify-content:center; }

.pulse-dot{
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--green); box-shadow:0 0 8px var(--green);
  animation:pulse 1.6s ease-in-out infinite;
}
.pulse-dot--small{ width:5px; height:5px; }
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1)} 50%{ opacity:.35; transform:scale(.75)} }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .65s ease, transform .65s ease; }
.reveal.in{ opacity:1; transform:none; }
/* dN delay helper */
.reveal.d1.in{ transition-delay:.08s } .reveal.d2.in{ transition-delay:.16s }
.reveal.d3.in{ transition-delay:.24s } .reveal.d4.in{ transition-delay:.32s }
.reveal.d5.in{ transition-delay:.40s }

/* ---------- nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:80; height:var(--nav-h);
  background:rgba(5,7,10,.78); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.nav__inner{ display:flex; align-items:center; justify-content:space-between; height:100%; gap:20px; }
.nav__logo{
  font-family:var(--mono); font-weight:800; font-size:1.05rem; letter-spacing:.04em;
  color:#eafff6; display:inline-block;
}
.nav__logo-bracket{ color:var(--dim); font-weight:400; }
.nav__logo-cursor{ color:var(--green); animation:blink 1.1s steps(1) infinite; margin-left:2px; }
@keyframes blink{ 50%{ opacity:0 } }

.nav__links{ display:flex; align-items:center; gap:6px; }
.nav__link{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.04em;
  color:var(--dim); padding:9px 12px; transition:color .2s, background .2s;
  border:1px solid transparent;
}
.nav__link-idx{ color:var(--green); opacity:.65; margin-right:6px; font-size:.68rem; }
.nav__link:hover{ color:#eafff6; background:rgba(0,255,170,.06); border-color:var(--line-soft); }
.nav__link.active{ color:var(--green); border-color:var(--line); background:rgba(0,255,170,.05); }

.nav__cta{
  font-family:var(--mono); font-size:.78rem; font-weight:600; letter-spacing:.04em;
  color:var(--green); border:1px solid var(--line); padding:10px 16px; margin-left:10px;
  background:rgba(0,255,170,.06); transition:all .2s;
  clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.nav__cta:hover{ background:var(--green); color:#03130c; box-shadow:var(--glow); }

.nav__burger{
  display:none; flex-direction:column; gap:5px; background:none; border:1px solid var(--line);
  padding:10px 9px; cursor:pointer;
}
.nav__burger span{ display:block; width:22px; height:2px; background:var(--green); transition:all .25s; }
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width: 900px){
  .nav__burger{ display:flex; }
  .nav__links{
    position:fixed; top:var(--nav-h); left:0; right:0;
    flex-direction:column; align-items:stretch; gap:8px;
    background:rgba(5,7,10,.97); border-bottom:1px solid var(--line);
    padding:18px 20px 24px; transform:translateY(-130%); transition:transform .3s ease;
    max-height:calc(100vh - var(--nav-h)); overflow:auto;
  }
  .nav__links.open{ transform:translateY(0); }
  .nav__link{ padding:13px 14px; font-size:.9rem; border-color:var(--line-soft); }
  .nav__cta{ margin:8px 0 0; text-align:center; justify-content:center; }
}

/* ---------- hero ---------- */
.hero{
  min-height:100vh; padding:calc(var(--nav-h) + 70px) 0 0;
  display:flex; flex-direction:column; justify-content:center;
  position:relative; border-top:none; overflow:hidden;
}
.hero__matrix{
  position:absolute; inset:0; z-index:0; opacity:.5;
  pointer-events:none;
}
.hero__grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;
  z-index:1; padding-bottom:70px;
}
@media (max-width: 1120px){
  .hero__grid{ grid-template-columns:1fr; gap:36px; padding-bottom:50px; }
  .hero__term{ order:2; }
  .term__body{ min-height:240px; }
}
.hero__title{
  font-family:var(--mono); font-weight:800;
  font-size:clamp(1.9rem, 4.6vw, 3.3rem); line-height:1.12; letter-spacing:-.015em;
  color:#f2fbf8; margin-bottom:22px;
}
.hero__lead{ color:var(--dim); font-size:1.05rem; max-width:540px; margin-bottom:32px; }
.hero__actions{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:30px; }
.hero__meta{
  list-style:none; display:flex; flex-wrap:wrap; gap:10px 22px;
  font-family:var(--mono); font-size:.78rem; color:var(--dim);
}
.hero__meta li{ display:flex; gap:8px; align-items:center; }
.chip__label{
  color:var(--green); background:rgba(0,255,170,.07); border:1px solid var(--line);
  padding:2px 8px; font-size:.68rem; letter-spacing:.08em;
}

/* glitch */
.glitch{ position:relative; display:inline-block; }
.glitch::before, .glitch::after{
  content:attr(data-text); position:absolute; inset:0; overflow:hidden;
  pointer-events:none; opacity:0;
}
.glitch:hover::before{
  opacity:.8; color:var(--cyan); transform:translate(2px,0);
  clip-path:inset(12% 0 58% 0); animation:glitchA .45s steps(2) 2;
  text-shadow:none;
}
.glitch:hover::after{
  opacity:.8; color:var(--magenta); transform:translate(-2px,0);
  clip-path:inset(58% 0 10% 0); animation:glitchB .45s steps(2) 2;
}
@keyframes glitchA{ 0%{transform:translate(2px,0)} 50%{transform:translate(-3px,1px)} 100%{transform:translate(2px,-1px)} }
@keyframes glitchB{ 0%{transform:translate(-2px,0)} 50%{transform:translate(4px,1px)} 100%{transform:translate(-2px,-1px)} }

/* ---------- terminal ---------- */
.terminal-glow{ filter:drop-shadow(0 0 28px rgba(0,255,170,.10)); }
.term{
  background:linear-gradient(180deg, #0a121b, #080f16);
  border:1px solid var(--line);
  box-shadow:0 24px 60px rgba(0,0,0,.55), inset 0 0 60px rgba(0,255,170,.03);
  position:relative;
}
.term::before, .term::after{
  content:""; position:absolute; width:14px; height:14px; border:1px solid var(--green); opacity:.7;
}
.term::before{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
.term::after{ bottom:-1px; right:-1px; border-left:none; border-top:none; }
.term__bar{
  display:flex; align-items:center; gap:7px;
  padding:11px 14px; border-bottom:1px solid var(--line-soft);
  background:rgba(0,255,170,.03);
}
.term__dot{ width:10px; height:10px; border-radius:50%; }
.term__dot--r{ background:#ff5f57; } .term__dot--y{ background:#febc2e; } .term__dot--g{ background:#28c840; }
.term__title{ font-family:var(--mono); font-size:.72rem; color:var(--dim); margin-left:8px; flex:1; }
.term__live{ font-family:var(--mono); font-size:.68rem; color:var(--green); display:flex; align-items:center; gap:6px; letter-spacing:.14em; }
.term__body{
  padding:20px 18px 24px; min-height:285px; font-family:var(--mono); font-size:.82rem;
  line-height:1.85; white-space:pre-wrap; word-break:break-word;
}
.term__body .p{ color:var(--green); }      /* prompt */
.term__body .c{ color:#cfe9ff; }            /* command */
.term__body .o{ color:var(--dim); }         /* output */
.term__body .ok{ color:var(--green); text-shadow:0 0 8px rgba(0,255,170,.5); }
.term__body .warn{ color:var(--amber); }
.term__body .cy{ color:var(--cyan); }
.term__cursor{
  display:inline-block; width:9px; height:1.05em; background:var(--green);
  vertical-align:text-bottom; animation:blink 1s steps(1) infinite;
  box-shadow:0 0 8px var(--green);
}

/* ---------- ticker ---------- */
.ticker{
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
  background:rgba(0,255,170,.02); overflow:hidden; position:relative; z-index:1;
  padding:13px 0;
}
.ticker__track{ display:flex; white-space:nowrap; width:max-content; animation:tick 36s linear infinite; }
.ticker:hover .ticker__track{ animation-play-state:paused; }
.ticker__track span{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.22em; color:var(--dim);
  padding:0 26px;
}
.ticker__track i{ color:var(--green); font-style:normal; font-size:.6rem; }
@keyframes tick{ to{ transform:translateX(-50%); } }

/* ---------- services ---------- */
.services{ display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; }
.svc{
  background:linear-gradient(180deg, var(--panel), var(--bg-2));
  border:1px solid var(--line-soft); padding:30px 28px;
  position:relative; transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.svc::before, .svc::after{
  content:""; position:absolute; width:16px; height:16px; border:1px solid var(--green);
  opacity:0; transition:opacity .25s;
}
.svc::before{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
.svc::after{ bottom:-1px; right:-1px; border-left:none; border-top:none; }
.svc:hover{ transform:translateY(-4px); border-color:var(--line); box-shadow:0 18px 44px rgba(0,0,0,.5), var(--glow); }
.svc:hover::before, .svc:hover::after{ opacity:.85; }
.svc--flag{ grid-column:1 / -1; border-color:var(--line); background:linear-gradient(120deg, rgba(0,255,170,.06), var(--panel) 40%); }
.svc__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.svc__num{
  font-family:var(--mono); font-size:.8rem; color:var(--green); font-weight:700;
  letter-spacing:.1em;
}
.svc__tag{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:#03130c; background:var(--green); padding:3px 10px; font-weight:700;
  box-shadow:0 0 14px rgba(0,255,170,.4);
}
.svc__title{ font-family:var(--mono); font-size:1.12rem; font-weight:700; color:#e8f2f5; margin-bottom:12px; letter-spacing:-.01em; }
.svc__desc{ color:var(--dim); font-size:.94rem; margin-bottom:18px; }
.svc__list{ list-style:none; border-top:1px dashed var(--line-soft); padding-top:16px; }
.svc__list li{
  font-family:var(--mono); font-size:.8rem; color:#9fb2ba;
  padding:5px 0 5px 22px; position:relative;
}
.svc__list li::before{ content:"▸"; position:absolute; left:0; color:var(--green); }
@media (max-width:860px){ .services{ grid-template-columns:1fr; } .svc--flag{ grid-column:auto; } }

/* ---------- diagram ---------- */
.diagram{ padding:90px 0; border-top:1px solid var(--line-soft); background:radial-gradient(ellipse 80% 90% at 50% 50%, rgba(0,213,255,.045), transparent 70%), linear-gradient(180deg, var(--bg-2), var(--bg)); }
.diagram__wrap svg{ width:100%; height:auto; display:block; }
.node__box{ fill:rgba(10,18,26,.92); stroke:rgba(0,255,170,.28); stroke-width:1.2; }
.node__box--hot{ stroke:rgba(0,213,255,.55); }
.node__inner{ fill:rgba(0,213,255,.10); stroke:rgba(0,213,255,.35); stroke-width:1; }
.node__line{ stroke:rgba(0,213,255,.35); stroke-width:1.5; }
.node__txt{ fill:#dfeef5; font-family:var(--mono); font-size:13px; font-weight:700; letter-spacing:.12em; text-anchor:middle; }
.node__sub{ fill:var(--dim); font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-anchor:middle; }
.fw-shield{ fill:none; stroke:var(--cyan); stroke-width:2; filter:url(#glow); }
.led{ animation:ledBlink 1.8s ease-in-out infinite; }
.led--g{ fill:var(--green); } .led--c{ fill:var(--cyan); animation-delay:.4s } .led--m{ fill:var(--magenta); animation-delay:.9s }
@keyframes ledBlink{ 0%,100%{ opacity:1 } 50%{ opacity:.2 } }
.node__ping{ fill:var(--green); animation:ping 2s ease-out infinite; }
@keyframes ping{ 0%{ r:3; opacity:1 } 80%{ r:14; opacity:0 } 100%{ r:14; opacity:0 } }
.wifi{ animation:wifiPulse 2.2s ease-in-out infinite; transform-origin:500px 380px; }
.wifi-arc{ fill:none; stroke:var(--green); stroke-width:3.4; stroke-linecap:round; }
.wifi-arc:nth-child(2){ opacity:.7; }
.wifi-arc:nth-child(3){ opacity:.5; }
.wifi-dot{ fill:var(--green); filter:url(#glow); }
.ant{ stroke:rgba(0,213,255,.65); stroke-width:2.4; stroke-linecap:round; }
.ant-tip{ fill:var(--cyan); filter:url(#glow); animation:ledSoft 2.6s ease-in-out infinite; }
.port{ fill:rgba(0,0,0,.45); stroke:rgba(0,213,255,.42); stroke-width:1; }
.led-soft{ animation:ledSoft 2.4s ease-in-out infinite; }
@keyframes ledSoft{ 0%,100%{ opacity:1 } 50%{ opacity:.4 } }
@keyframes wifiPulse{ 0%,100%{ opacity:.35 } 50%{ opacity:1 } }

.wire{
  fill:none; stroke:url(#wire); stroke-width:1.6;
  stroke-dasharray:6 8; animation:wireFlow 1.4s linear infinite;
}
.wire--dim{ opacity:.5; }
@keyframes wireFlow{ to{ stroke-dashoffset:-28; } }
.packet{ fill:var(--green); filter:url(#glow); }
.packet.p1{ offset-path:path("M140 210 L220 210 L350 210 L440 210"); animation:packetRun 5s linear infinite; }
.packet.p2{ offset-path:path("M560 210 C600 210 620 190 650 190 L800 190 L860 86"); animation:packetRun 6s linear infinite; animation-delay:1.2s; }
.packet.p3{ offset-path:path("M725 130 L725 96"); animation:packetRun 4s linear infinite; animation-delay:2s; }
@keyframes packetRun{ 0%{ offset-distance:0% } 100%{ offset-distance:100%; } }
.diagram__legend{
  display:flex; gap:26px; list-style:none; margin-top:22px; flex-wrap:wrap;
  font-family:var(--mono); font-size:.74rem; color:var(--dim);
}
.lg{ display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:8px; }
.lg--green{ background:var(--green); box-shadow:0 0 8px var(--green); }
.lg--cyan{ background:var(--cyan); box-shadow:0 0 8px var(--cyan); }
.lg--mag{ background:var(--magenta); box-shadow:0 0 8px var(--magenta); }

/* ---------- cyber section ---------- */
.cyber__grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:44px; align-items:start; margin-bottom:54px; }
.shield svg{ width:100%; max-width:300px; display:block; margin:0 auto; }
.shield-body{
  fill:rgba(0,255,170,.045); stroke:var(--green); stroke-width:2; stroke-linejoin:round;
  filter:drop-shadow(0 0 14px rgba(0,255,170,.35));
}
.shield-inner{ fill:none; stroke:rgba(0,255,170,.35); stroke-width:1; stroke-dasharray:4 6; animation:wireFlow 3s linear infinite; }
.circuit path{ fill:none; stroke:rgba(0,213,255,.75); stroke-width:2; }
.circuit circle{ fill:var(--cyan); }
.shield-txt{ fill:#dfeef5; font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.18em; text-anchor:middle; }
.shield-sub{ fill:var(--dim); font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-anchor:middle; }
.scanring{ fill:none; stroke:rgba(0,255,170,.5); stroke-width:1.4; stroke-dasharray:40 240; transform-origin:120px 120px; animation:ringSpin 7s linear infinite; }
.scanring--2{ stroke:rgba(0,213,255,.4); stroke-dasharray:18 300; animation-duration:4.5s; animation-direction:reverse; }
@keyframes ringSpin{ to{ transform:rotate(360deg); } }

.pill{
  border:1px solid var(--line-soft); background:linear-gradient(180deg, var(--panel), transparent);
  padding:22px 24px; margin-bottom:14px; transition:border-color .25s, box-shadow .25s, transform .25s;
}
.pill:hover{ border-color:var(--line); box-shadow:var(--glow); transform:translateX(4px); }
.pill__num{ font-family:var(--mono); font-size:.74rem; color:var(--green); letter-spacing:.12em; display:block; margin-bottom:6px; }
.pill h3{ font-family:var(--mono); font-size:1rem; color:#e8f2f5; margin-bottom:6px; letter-spacing:-.01em; }
.pill p{ color:var(--dim); font-size:.92rem; }

.alertbar{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px;
  border:1px solid rgba(255,200,87,.35); background:rgba(255,200,87,.05);
  padding:18px 22px;
  clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}
.alertbar__tag{ font-family:var(--mono); font-size:.78rem; font-weight:700; color:var(--amber); letter-spacing:.1em; animation:blink 2.4s steps(1) infinite; }
.alertbar__msg{ color:#e6d9b8; font-size:.95rem; flex:1; min-width:260px; }
.alertbar__cta{ font-family:var(--mono); font-size:.8rem; font-weight:600; letter-spacing:.06em; color:var(--amber); border:1px solid rgba(255,200,87,.4); padding:10px 16px; transition:all .2s; }
.alertbar__cta:hover{ background:var(--amber); color:#201503; box-shadow:0 0 18px rgba(255,200,87,.4); }
@media (max-width:860px){ .cyber__grid{ grid-template-columns:1fr; } .shield{ order:-1; } }

/* ---------- steps ---------- */
.steps{
  list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
  counter-reset:step;
}
.step{
  border:1px solid var(--line-soft); background:linear-gradient(180deg, var(--panel), transparent);
  padding:26px 22px; position:relative; transition:border-color .25s, transform .25s;
}
.step:hover{ border-color:var(--line); transform:translateY(-4px); }
.step:not(:last-child)::after{
  content:"→"; position:absolute; right:-15px; top:50%; transform:translateY(-50%);
  color:var(--green); font-family:var(--mono); z-index:1;
}
.step__idx{ font-family:var(--mono); font-size:1.9rem; font-weight:800; color:transparent; -webkit-text-stroke:1px rgba(0,255,170,.55); display:block; margin-bottom:12px; }
.step:hover .step__idx{ -webkit-text-stroke:1px var(--green); text-shadow:0 0 18px rgba(0,255,170,.4); }
.step__title{ font-family:var(--mono); font-size:.98rem; color:#e8f2f5; margin-bottom:8px; }
.step__desc{ color:var(--dim); font-size:.88rem; }
@media (max-width:960px){ .steps{ grid-template-columns:repeat(2,1fr);} .step::after{ display:none; } }
@media (max-width:520px){ .steps{ grid-template-columns:1fr; } }

/* ---------- FAQ ---------- */
.faq{ display:flex; flex-direction:column; gap:12px; }
.faq__item{
  border:1px solid var(--line-soft); background:linear-gradient(180deg, var(--panel), transparent);
  transition:border-color .25s;
}
.faq__item[open]{ border-color:var(--line); }
.faq__item summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 22px; font-family:var(--mono); font-size:.92rem; font-weight:600; color:#dfeef5;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item p{ padding:0 22px 20px; color:var(--dim); font-size:.92rem; }
.faq__icon{
  flex:none; width:14px; height:14px; position:relative;
}
.faq__icon::before, .faq__icon::after{
  content:""; position:absolute; background:var(--green); left:50%; top:50%;
}
.faq__icon::before{ width:14px; height:2px; transform:translate(-50%,-50%); }
.faq__icon::after{ width:2px; height:14px; transform:translate(-50%,-50%); transition:transform .25s; }
.faq__item[open] .faq__icon::after{ transform:translate(-50%,-50%) rotate(90deg); }
.faq__item[open] summary{ color:var(--green); }

/* ---------- contact ---------- */
.contact__grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:44px; align-items:start; }
.kv{
  display:flex; flex-direction:column; gap:4px;
  padding:16px 0; border-bottom:1px dashed var(--line-soft);
}
.kv:first-child{ padding-top:0; }
.kv__k{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--green);
}
.kv__v{ color:#dfeef5; font-family:var(--mono); font-size:.95rem; }
.kv__v:hover{ text-shadow:0 0 10px rgba(0,255,170,.4); }
@media (max-width:860px){ .contact__grid{ grid-template-columns:1fr; } }

.form{
  border:1px solid var(--line); background:linear-gradient(180deg, var(--panel), var(--bg-2));
  padding:30px 28px; position:relative;
}
.form::before, .form::after{
  content:""; position:absolute; width:16px; height:16px; border:1px solid var(--green); opacity:.8;
}
.form::before{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
.form::after{ bottom:-1px; right:-1px; border-left:none; border-top:none; }
.form__note{ font-family:var(--mono); font-size:.74rem; color:var(--dim); margin-bottom:22px; line-height:1.7; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:560px){ .form__row{ grid-template-columns:1fr; } }
.field{ display:block; margin-bottom:16px; }
.field__label{
  display:block; font-family:var(--mono); font-size:.68rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--green); margin-bottom:8px;
}
.field input, .field select, .field textarea{
  width:100%; background:rgba(0,0,0,.35); color:#e8f2f5;
  border:1px solid var(--line-soft); padding:13px 14px;
  font-family:var(--mono); font-size:.88rem;
  transition:border-color .2s, box-shadow .2s;
  appearance:none; -webkit-appearance:none;
}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2300ffaa' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}
.field textarea{ resize:vertical; min-height:120px; }
.field input::placeholder, .field textarea::placeholder{ color:var(--dim-2); }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--green);
  box-shadow:0 0 0 1px rgba(0,255,170,.35), 0 0 18px rgba(0,255,170,.15);
}
.form button{ margin-top:8px; }
.form__fallback{ margin-top:16px; font-size:.84rem; color:var(--dim); }

/* ---------- footer ---------- */
.footer{ border-top:1px solid var(--line); background:linear-gradient(180deg, transparent, rgba(0,255,170,.025)); }
.footer__inner{
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  padding:34px 24px 22px;
}
.footer__logo{ font-family:var(--mono); font-weight:800; color:#eafff6; letter-spacing:.05em; }
.footer__tag{ font-family:var(--mono); font-size:.74rem; color:var(--green); letter-spacing:.14em; margin-top:4px; }
.footer__links{ display:flex; gap:18px; flex-wrap:wrap; }
.footer__links a{ font-family:var(--mono); font-size:.76rem; color:var(--dim); letter-spacing:.08em; }
.footer__links a:hover{ color:var(--green); }
.footer__legal{ width:100%; font-family:var(--mono); font-size:.72rem; color:var(--dim-2); letter-spacing:.06em; }
.footer__status{
  display:flex; gap:26px; justify-content:center; flex-wrap:wrap;
  border-top:1px dashed var(--line-soft); padding:12px 0 14px;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; color:var(--dim);
}
.footer__status span{ display:flex; align-items:center; gap:8px; }

/* ---------- to top ---------- */
.totop{
  position:fixed; right:22px; bottom:22px; z-index:70;
  width:46px; height:46px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); background:rgba(5,7,10,.85); color:var(--green);
  font-family:var(--mono); font-size:1.1rem; cursor:pointer;
  opacity:0; pointer-events:none; transform:translateY(10px); transition:all .25s;
  clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.totop.show{ opacity:1; pointer-events:auto; transform:none; }
.totop:hover{ background:rgba(0,255,170,.15); box-shadow:var(--glow); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
}