:root {
  --ink: #07111f;
  --panel: #0c1929;
  --panel-2: #102238;
  --text: #edf5f3;
  --muted: #93a7ad;
  --green: #4ee3ae;
  --red: #ff8d87;
  --line: rgba(222, 241, 239, .12);
  --mono: "DM Mono", monospace;
  --sans: "Manrope", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--text); font-family: var(--sans); line-height: 1.6; }
a { color: inherit; text-decoration: none; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 20; background: var(--green); color: var(--ink); padding: .7rem 1rem; border-radius: .4rem; }
.skip-link:focus { top: 1rem; }

.site-header { height: 82px; max-width: 1280px; margin: auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 12px; font-size: 1.03rem; font-weight: 800; letter-spacing: -.035em; }
.brand > span:last-child > span { color: var(--green); }
.brand-mark { width: 30px; height: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; transform: skew(-8deg); }
.brand-mark i { display: block; background: var(--green); border-radius: 2px; }
.brand-mark i:last-child { height: 66%; align-self: end; opacity: .62; }
nav { display: flex; gap: 32px; color: var(--muted); font-size: .83rem; font-weight: 600; }
nav a:hover, nav a:focus-visible { color: var(--text); }
.private-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; border: 1px solid rgba(78,227,174,.24); border-radius: 99px; color: var(--green); font: 500 .67rem var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.private-badge i, .availability span { width: 7px; height: 7px; background: var(--green); border-radius: 50%; box-shadow: 0 0 14px var(--green); }

.hero { min-height: calc(100vh - 82px); max-width: 1280px; margin: auto; padding: 105px 32px 90px; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 74px; }
.eyebrow { margin: 0 0 18px; color: var(--green); font: 500 .71rem var(--mono); letter-spacing: .15em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(3rem, 6vw, 6.1rem); line-height: .97; letter-spacing: -.07em; }
h1 em { color: var(--green); font-style: normal; }
.hero-text { max-width: 640px; margin: 28px 0 0; color: var(--muted); font-size: 1.06rem; }
.hero-actions { display: flex; gap: 12px; margin-top: 36px; }
.button { min-height: 50px; padding: 13px 20px; display: inline-flex; align-items: center; justify-content: center; gap: 28px; border: 1px solid var(--line); border-radius: 8px; font-size: .84rem; font-weight: 700; transition: .2s ease; }
.button.primary { background: var(--green); color: var(--ink); border-color: var(--green); }
.button:hover { transform: translateY(-2px); }
.button.secondary:hover { border-color: var(--green); }
.availability { display: flex; align-items: center; gap: 9px; margin-top: 24px; color: #718990; font: .65rem var(--mono); }

.system-card { background: linear-gradient(145deg, rgba(16,34,56,.96), rgba(8,20,34,.97)); border: 1px solid rgba(78,227,174,.2); border-radius: 16px; box-shadow: 0 32px 100px rgba(0,0,0,.33), inset 0 1px rgba(255,255,255,.04); overflow: hidden; transform: perspective(1000px) rotateY(-2deg); }
.terminal-head, .terminal-foot { display: flex; justify-content: space-between; padding: 15px 19px; color: #718990; font: .61rem var(--mono); letter-spacing: .08em; border-bottom: 1px solid var(--line); }
.terminal-foot { justify-content: flex-start; gap: 24px; border: 0; border-top: 1px solid var(--line); }
.secure { color: var(--green); }
.system-status { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 27px 25px 14px; }
.system-status div { padding: 17px; background: rgba(255,255,255,.025); border: 1px solid var(--line); border-radius: 9px; }
.system-status small { display: block; color: #718990; font: .6rem var(--mono); letter-spacing: .1em; }
.system-status strong { display: flex; align-items: center; gap: 8px; margin-top: 8px; font: 500 .8rem var(--mono); }
.system-status .locked { color: var(--red); }
.pulse { width: 7px; height: 7px; background: var(--green); border-radius: 50%; box-shadow: 0 0 12px var(--green); }
.chart { padding: 0 24px 18px; }
.chart svg { width: 100%; height: 235px; overflow: visible; }
.chart .grid { stroke: rgba(255,255,255,.06); stroke-width: 1; }
.chart .area { fill: url(#area); }
.chart .line { fill: none; stroke: var(--green); stroke-width: 2.5; vector-effect: non-scaling-stroke; }

.signal-strip { padding: 17px 32px; display: flex; align-items: center; justify-content: center; gap: 25px; background: var(--green); color: #07111f; font: 500 .66rem var(--mono); letter-spacing: .07em; text-transform: uppercase; overflow: hidden; white-space: nowrap; }
.signal-strip i { width: 4px; height: 4px; background: var(--ink); border-radius: 50%; opacity: .5; }
.section { max-width: 1280px; margin: auto; padding: 130px 32px; }
.section-heading { max-width: 720px; margin-bottom: 58px; }
h2 { margin: 0; font-size: clamp(2rem, 4vw, 4rem); line-height: 1.08; letter-spacing: -.055em; }
.section-heading > p:last-child { color: var(--muted); }
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.feature { position: relative; min-height: 390px; padding: 40px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; }
.feature::after { content: ""; position: absolute; width: 180px; height: 180px; right: -80px; bottom: -80px; border-radius: 50%; background: var(--green); filter: blur(80px); opacity: 0; transition: .35s; }
.feature:hover::after { opacity: .09; }
.feature-number { position: absolute; right: 32px; top: 28px; color: #4b6069; font: .65rem var(--mono); }
.feature-icon { color: var(--green); font: 2.2rem var(--mono); }
.feature h3 { margin: 57px 0 12px; font-size: 1.42rem; letter-spacing: -.025em; }
.feature p { max-width: 500px; color: var(--muted); }
.feature ul { padding: 18px 0 0; margin: 0; list-style: none; color: #bfd0d2; font-size: .77rem; }
.feature li { padding: 7px 0; border-top: 1px solid rgba(255,255,255,.055); }
.feature li::before { content: "+"; margin-right: 10px; color: var(--green); font-family: var(--mono); }

.workflow { padding: 130px max(32px, calc((100vw - 1216px)/2)); background: #091624; border-block: 1px solid var(--line); }
.steps { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; }
.steps li { min-height: 220px; padding: 28px; border: 1px solid var(--line); border-right: 0; }
.steps li:last-child { border-right: 1px solid var(--line); }
.steps li > span { color: var(--green); font: .69rem var(--mono); }
.steps div { margin-top: 70px; }
.steps strong { font-size: 1.05rem; }
.steps p { margin: 8px 0 0; color: var(--muted); font-size: .82rem; }

.safety-panel { display: grid; grid-template-columns: .9fr 1.1fr; gap: 75px; padding: 65px; background: var(--panel); border: 1px solid var(--line); border-radius: 15px; }
.safety-panel > div:first-child > p:last-child { margin-top: 28px; color: var(--muted); }
.safety-list > div { display: grid; grid-template-columns: 38px 1fr; gap: 12px; padding: 21px 0; border-top: 1px solid var(--line); }
.safety-list > div:last-child { border-bottom: 1px solid var(--line); }
.safety-list span { color: var(--green); font: .65rem var(--mono); }
.safety-list p { margin: 0; color: var(--muted); font-size: .8rem; }
.safety-list strong { display: block; margin-bottom: 4px; color: var(--text); font-size: .93rem; }
.closing { padding: 95px 32px 135px; text-align: center; }
.closing .private-badge { margin-top: 34px; }
.private-badge.large { padding: 10px 14px; }

footer { max-width: 1280px; margin: auto; padding: 35px 32px 55px; display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 30px; align-items: center; border-top: 1px solid var(--line); color: #718990; font-size: .66rem; }
footer p { text-align: center; }
footer > span { text-align: right; font-family: var(--mono); }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } }

@media (max-width: 850px) {
  .site-header { padding: 0 20px; }
  nav { display: none; }
  .hero { min-height: auto; padding: 80px 20px; grid-template-columns: 1fr; gap: 60px; }
  .system-card { transform: none; }
  .feature-grid, .safety-panel { grid-template-columns: 1fr; }
  .section, .workflow { padding: 90px 20px; }
  .steps { grid-template-columns: 1fr 1fr; }
  .steps li:nth-child(2) { border-right: 1px solid var(--line); }
  .safety-panel { padding: 32px 24px; gap: 35px; }
  footer { margin: 0 20px; padding-inline: 0; grid-template-columns: 1fr; text-align: center; }
  footer p, footer > span { text-align: center; }
}

@media (max-width: 520px) {
  .private-badge { display: none; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .feature-grid, .steps { grid-template-columns: 1fr; }
  .feature { min-height: 360px; padding: 30px 25px; }
  .steps li, .steps li:nth-child(2) { border-right: 1px solid var(--line); }
  .system-status { grid-template-columns: 1fr; }
  .terminal-foot { gap: 12px; overflow: hidden; }
  .signal-strip { justify-content: flex-start; }
}