:root {
  --bg:#07070d; --panel:#0e0e18; --fg:#e8e7ff; --mute:#8b89a8;
  --line:rgba(120,100,255,.18); --cyan:#3dfff0; --mag:#ff3d9a; --grid:rgba(61,255,240,.07);
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:"Space Grotesk",system-ui,sans-serif;
  background:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    var(--bg);
  background-size:48px 48px, 48px 48px, auto;
  color:var(--fg); line-height:1.5; min-height:100vh;
}
a { color:inherit; text-decoration:none; }
.shell { width:min(1120px, calc(100% - 1.5rem)); margin:0 auto; }

.nav {
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:1.1rem 0; border-bottom:1px solid var(--line); margin-bottom:2rem;
  position:sticky; top:0; z-index:10;
  background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(12px);
}
.brand { font-weight:700; letter-spacing:-.02em; }
.brand b { color:var(--cyan); font-weight:700; }
.nav-links { display:flex; gap:1rem; flex-wrap:wrap; font-size:.85rem; color:var(--mute); }
.nav-links a:hover { color:var(--cyan); }

.hero { padding: clamp(2rem,8vw,5rem) 0 clamp(3rem,8vw,4.5rem); }
.chip {
  display:inline-block; font-family:"IBM Plex Mono",monospace; font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--cyan);
  border:1px solid color-mix(in srgb, var(--cyan) 45%, transparent);
  padding:.4rem .7rem; border-radius:6px; margin-bottom:1.25rem;
  box-shadow:0 0 20px color-mix(in srgb, var(--cyan) 20%, transparent);
}
.hero h1 {
  font-size:clamp(2.6rem,11vw,6rem); line-height:.95; letter-spacing:-.04em;
  font-weight:700; margin-bottom:1rem;
  background:linear-gradient(120deg, #fff, var(--cyan) 50%, var(--mag));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.sub { font-size:clamp(1.05rem,2.5vw,1.35rem); color:var(--mute); max-width:28ch; margin-bottom:2rem; }
.row { display:flex; flex-wrap:wrap; gap:.9rem; align-items:center; }
.btn {
  display:inline-flex; padding:.85rem 1.25rem; border-radius:8px; font-weight:600; font-size:.95rem;
  background:var(--cyan); color:#041312; box-shadow:0 0 28px color-mix(in srgb, var(--cyan) 35%, transparent);
  transition:.2s;
}
.btn:hover { transform:translateY(-1px); box-shadow:0 0 40px color-mix(in srgb, var(--cyan) 55%, transparent); }
.btn-outline {
  background:transparent; color:var(--fg); border:1px solid var(--line);
  box-shadow:none;
}
.btn-outline:hover { border-color:var(--mag); color:var(--mag); box-shadow:0 0 24px color-mix(in srgb, var(--mag) 25%, transparent); }
.mail { font-family:"IBM Plex Mono",monospace; font-size:.85rem; color:var(--mute); }
.mail:hover { color:var(--cyan); }

.section { padding: clamp(2.5rem,7vw,4.5rem) 0; }
.kicker {
  font-family:"IBM Plex Mono",monospace; font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mag); margin-bottom:1.25rem;
}

.grid3 { display:grid; gap:1rem; }
@media (min-width:760px) { .grid3 { grid-template-columns:repeat(3,1fr); } }
.card {
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:1.4rem 1.25rem; position:relative; overflow:hidden;
}
.card::before {
  content:""; position:absolute; inset:0 0 auto 0; height:2px;
  background:linear-gradient(90deg, var(--cyan), var(--mag)); opacity:.8;
}
.card-num { font-family:"IBM Plex Mono",monospace; font-size:.75rem; color:var(--cyan); margin-bottom:.5rem; }
.card h3 { font-size:1.1rem; margin-bottom:.55rem; letter-spacing:-.01em; }
.card p { color:var(--mute); font-size:.95rem; }

.tags { display:flex; flex-wrap:wrap; gap:.55rem; list-style:none; }
.tags li {
  font-family:"IBM Plex Mono",monospace; font-size:.78rem;
  border:1px solid var(--line); padding:.5rem .75rem; border-radius:8px; color:var(--mute);
}
.tags li:hover { border-color:var(--cyan); color:var(--cyan); }

.lead { color:var(--mute); max-width:40ch; margin-bottom:1.5rem; }
.tariffs { display:grid; gap:1rem; }
@media (min-width:900px) { .tariffs { grid-template-columns:repeat(3,1fr); } }
.tariff {
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:1.5rem 1.3rem; display:flex; flex-direction:column; gap:.65rem;
}
.tariff.hot {
  border-color:color-mix(in srgb, var(--mag) 55%, transparent);
  box-shadow:0 0 40px color-mix(in srgb, var(--mag) 12%, transparent);
}
.tariff .n { font-family:"IBM Plex Mono",monospace; font-size:.72rem; color:var(--mute); }
.tariff h3 { font-size:1.75rem; letter-spacing:-.03em; }
.tariff .desc { color:var(--mute); flex:1; font-size:.95rem; }
.tariff .price { font-family:"IBM Plex Mono",monospace; font-size:.75rem; color:var(--cyan); letter-spacing:.08em; text-transform:uppercase; }
.tariff .btn { align-self:flex-start; margin-top:.4rem; font-size:.85rem; padding:.7rem 1rem; }

.contact-box {
  border:1px solid var(--line); border-radius:18px; padding:clamp(1.5rem,4vw,2.5rem);
  background:linear-gradient(145deg, color-mix(in srgb, var(--cyan) 8%, var(--panel)), var(--panel));
}
.contact-box h2 { font-size:clamp(1.6rem,4vw,2.4rem); letter-spacing:-.02em; max-width:16ch; margin:.4rem 0 1rem; }
.contact-box .lead { margin-bottom:1.25rem; }
.contact-box .mail {
  font-size:clamp(1rem,2.5vw,1.35rem); color:var(--cyan); font-weight:600;
  text-shadow:0 0 20px color-mix(in srgb, var(--cyan) 40%, transparent);
}

.foot {
  border-top:1px solid var(--line); padding:1.5rem 0 2.5rem; margin-top:1rem;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
  color:var(--mute); font-size:.85rem; font-family:"IBM Plex Mono",monospace;
}
.foot a:hover { color:var(--cyan); }

@media (max-width:600px) {
  body { background-size:32px 32px, 32px 32px, auto; }
}