:root { color-scheme: dark; --bg: #0b131a; --text: #f4f6f8; --muted: #a1b5cb; --accent: #ffa51d; --line: #35434f; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--bg); color: var(--text); font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.topbar { padding: 14px 3.65%; min-height: 86px; border-bottom: 1px solid #b07725; background: linear-gradient(110deg, #0c151d, #19202a); }
.brand { display: flex; align-items: center; gap: 16px; }
.brand-name { margin: 0; font-size: 25px; font-weight: 650; letter-spacing: .5px; line-height: 1.3; }
.subtitle { margin: 3px 0 0; color: var(--accent); font-size: 14px; letter-spacing: 2.2px; text-transform: uppercase; }
.hero { position: relative; overflow: hidden; min-height: calc(100svh - 163px); background: radial-gradient(ellipse at 58% 53%, #1d2c3a80, transparent 60%), linear-gradient(120deg, #0a1319, #0b141d 66%, #070f15); }
.network-art { position: absolute; top: 0; right: 0; width: 58%; height: auto; pointer-events: none; mask-image: linear-gradient(to bottom, black 76%, transparent), linear-gradient(to right, transparent, black 15%); mask-composite: intersect; }
.hero-grid { position: relative; max-width: 1920px; margin: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, 28%); gap: clamp(44px, 9vw, 200px); padding: clamp(66px, 6.1vw, 118px) 3.4% 0 4.65%; }
.introduction { min-width: 0; }
h1 { margin: 0 0 20px; font-size: clamp(40px, 3.55vw, 68px); font-weight: 750; line-height: 1.12; letter-spacing: -1.5px; }
.description { max-width: 740px; margin: 0; color: var(--muted); font-size: clamp(17px, 1.28vw, 24px); line-height: 1.5; }
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 28px; }
.feature { display: flex; align-items: flex-start; gap: 14px; padding: 21px 16px; min-width: 0; border: 1px solid var(--line); border-radius: 6px; background: linear-gradient(135deg, #0d171eea, #101a22c9); transition: border-color .18s; }
.feature:hover { border-color: #98713e; }
.feature img { width: 40px; height: 40px; flex-shrink: 0; }
.feature h2 { margin: 0 0 8px; color: var(--accent); font-size: clamp(10px, .75vw, 14px); font-weight: 700; letter-spacing: 1px; line-height: 1.5; text-transform: uppercase; }
.feature p { margin: 0; color: var(--muted); font-size: clamp(12px, .87vw, 16px); line-height: 1.55; }
.hardware-art { margin: 30px -10% 0 -8%; }
.hardware-art img { width: 100%; height: auto; display: block; mask-image: linear-gradient(to bottom, transparent, black 10%, black 95%, transparent), linear-gradient(to right, black 86%, transparent); mask-composite: intersect; }
.login-panel { position: relative; z-index: 1; align-self: start; margin-top: clamp(58px, 5.5vw, 106px); padding: 28px; border: 1px solid #3b4b58; border-radius: 7px; background: linear-gradient(125deg, #0c161eef, #0d151bee); box-shadow: 0 3px 10px #0004; }
.login-panel h2 { margin: 0 0 12px; color: var(--accent); font-size: 18px; letter-spacing: 1.5px; text-transform: uppercase; }
.hint { margin: 0 0 22px; font-size: 14px; line-height: 1.55; color: var(--muted); }
form label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 14px; letter-spacing: 1px; text-transform: uppercase; }
form input { display: block; width: 100%; min-width: 0; margin: 0 0 18px; height: 46px; padding: 10px 13px; color: var(--text); background: linear-gradient(110deg, #1c2630, #1a222c); border: 1px solid #35414d; border-radius: 4px; font: inherit; font-size: 17px; }
form input::placeholder { color: #778b9f; opacity: 1; }
form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
form button { width: 100%; margin-top: 4px; min-height: 46px; border: 1px solid #efad3b; border-radius: 4px; color: #151515; background: linear-gradient(110deg, #fba31e, #ed9b22); font: inherit; font-weight: 750; letter-spacing: 1.2px; text-transform: uppercase; cursor: pointer; transition: background .18s; }
form button:hover { background: #ffb63d; }
form button:focus-visible { outline: 2px solid white; outline-offset: 3px; }
.form-msg { margin: 10px 0 0; min-height: 0; color: var(--muted); font-size: 13px; }
.form-msg:empty { display: none; }
.footer { min-height: 77px; padding: 20px 3.65%; display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid #293540; background: linear-gradient(100deg, #0b141b, #0a1218); color: var(--muted); font-size: 12px; }
.footer p { margin: 0; }
.footer strong { font-weight: 600; }
.separator { padding: 0 16px; }
@media (max-width: 1400px) and (min-width: 901px) {
  .hero-grid { gap: 46px; grid-template-columns: minmax(0, 1fr) 330px; padding-top: 65px; }
  .feature { gap: 10px; padding: 16px 12px; }
  .feature img { width: 32px; height: 32px; }
  .login-panel { margin-top: 65px; padding: 24px; }
}
@media (max-width: 1100px) and (min-width: 901px) { .features { gap: 10px; } .feature { flex-direction: column; } h1 { font-size: 40px; } }
@media (max-width: 900px) {
  .topbar { padding: 18px 6%; }
  .hero-grid { grid-template-columns: 1fr; padding: 65px 6% 40px; gap: 26px; }
  .network-art { width: 100%; opacity: .45; }
  .description { max-width: 660px; }
  h1 { font-size: clamp(34px, 6vw, 52px); letter-spacing: -1px; }
  .feature h2 { font-size: 11px; } .feature p { font-size: 13px; }
  .hardware-art { margin: 24px -6% 0; }
  .login-panel { width: 100%; max-width: 600px; margin: 0 auto; }
  .footer { flex-wrap: wrap; padding: 22px 6%; }
}
@media (max-width: 540px) {
  .brand { gap: 10px; } .brand img { width: 36px; height: 36px; }
  .brand-name { font-size: 18px; } .subtitle { font-size: 9px; letter-spacing: 1.3px; }
  .hero-grid { padding-top: 44px; }
  h1 { font-size: 34px; line-height: 1.15; }
  .description { font-size: 16px; }
  .features { grid-template-columns: 1fr; gap: 12px; margin-top: 24px; }
  .feature { padding: 17px; align-items: center; } .feature h2 { font-size: 12px; } .feature p { font-size: 14px; }
  .hardware-art { margin-top: 20px; }
  .login-panel { padding: 24px; }
  .footer { font-size: 11px; gap: 14px; } .separator { padding: 0 8px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }