/* ═══════════════════════════════════════════════════════════════════
   DISTRIL — lofi night. Neon over indigo, string lights, pixel edges.
   Brand: royal #0c3df4 · cyan #02b5ff · violet #a44cee · coral #ff847f
   Type: Pixelify Sans (display) + VT323 (terminal) + Albert Sans (body)
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --night:    #07071f;
  --night-2:  #0a0a2e;
  --panel:    #12123f;
  --panel-2:  #191950;
  --royal:    #0c3df4;
  --cyan:     #02b5ff;
  --violet:   #a44cee;
  --coral:    #ff847f;
  --amber:    #ffb85c;
  --text:     #c9d4ff;
  --text-dim: #8b96cf;
  --white:    #eef2ff;
  --font-display: "Pixelify Sans", monospace;
  --font-term:    "VT323", monospace;
  --font-body:    "Albert Sans", sans-serif;
  --wrap: 1160px;
  --glow-cyan:   0 0 6px rgba(2,181,255,.9), 0 0 18px rgba(2,181,255,.5), 0 0 42px rgba(2,181,255,.25);
  --glow-coral:  0 0 6px rgba(255,132,127,.9), 0 0 18px rgba(255,132,127,.5), 0 0 42px rgba(255,132,127,.25);
  --glow-amber:  0 0 6px rgba(255,184,92,.9), 0 0 18px rgba(255,184,92,.5), 0 0 42px rgba(255,184,92,.25);
  --glow-violet: 0 0 6px rgba(164,76,238,.9), 0 0 18px rgba(164,76,238,.5), 0 0 42px rgba(164,76,238,.25);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--night-2);
  color: var(--text);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* scanlines + vignette over everything */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 999;
  background:
    repeating-linear-gradient(0deg, rgba(4,4,30,.14) 0 1px, transparent 1px 3px),
    radial-gradient(120% 100% at 50% 50%, transparent 60%, rgba(3,3,20,.4) 100%);
}

/* neon ems */
em { font-style: normal; }
.neon-cyan   { color: #9fe6ff; text-shadow: var(--glow-cyan); }
.neon-coral  { color: #ffc9c6; text-shadow: var(--glow-coral); }
.neon-amber  { color: #ffe1b3; text-shadow: var(--glow-amber); }
.neon-violet { color: #e2bdff; text-shadow: var(--glow-violet); }

/* reveal animation */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); }
.reveal.is-in { opacity: 1; transform: none; }

/* blinking terminal cursor */
.cursor { color: var(--cyan); margin-left: 6px; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ═══════════════ HERO ═══════════════ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column;
  color: var(--white);
  background: var(--night);
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; }
.hero__art { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); will-change: transform; }
.hero__vignette {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(7,7,31,.75) 0%, rgba(7,7,31,.15) 26%, rgba(7,7,31,.05) 55%, rgba(7,7,31,.88) 100%),
    radial-gradient(90% 60% at 50% 46%, rgba(7,7,31,.42) 0%, rgba(7,7,31,.1) 60%, transparent 100%);
}
/* faint animated rain streaks */
.hero__rain {
  position: absolute; inset: -10% 0;
  background: repeating-linear-gradient(112deg,
    transparent 0 46px,
    rgba(160,200,255,.05) 46px 47px,
    transparent 47px 90px,
    rgba(160,200,255,.08) 90px 91px);
  animation: rainfall 1.1s linear infinite;
  pointer-events: none;
}
@keyframes rainfall { to { transform: translateY(90px); } }

/* nav */
.nav {
  position: relative; z-index: 6;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px clamp(20px, 4vw, 48px);
}
.nav__logo { line-height: 0; }
.nav__logo img {
  height: 46px; width: auto;
  filter: drop-shadow(0 0 10px rgba(2,181,255,.6)) drop-shadow(0 0 26px rgba(2,181,255,.3));
  transition: filter .25s;
}
.nav__logo:hover img { filter: drop-shadow(0 0 14px rgba(2,181,255,.95)) drop-shadow(0 0 34px rgba(2,181,255,.5)); }
.nav__links { display: flex; align-items: center; gap: 26px; }
.nav__links a {
  color: var(--text);
  font-family: var(--font-term); font-size: 20px; letter-spacing: .04em;
  text-transform: lowercase;
  transition: color .2s, text-shadow .2s;
}
.nav__links a:not(.nav__cta):hover { color: #9fe6ff; text-shadow: var(--glow-cyan); }
.nav__radio {
  font-family: var(--font-term); font-size: 19px; letter-spacing: .05em;
  background: none; border: 2px solid rgba(255,184,92,.5);
  color: #ffe1b3; text-shadow: 0 0 8px rgba(255,184,92,.4);
  padding: 4px 12px 6px; cursor: pointer;
  box-shadow: 0 0 10px rgba(255,184,92,.2), inset 0 0 8px rgba(255,184,92,.08);
  transition: box-shadow .25s, border-color .25s;
}
.nav__radio:hover { border-color: var(--amber); box-shadow: 0 0 20px rgba(255,184,92,.5), inset 0 0 12px rgba(255,184,92,.15); }
.nav__radio[aria-pressed="true"] {
  border-color: var(--amber);
  box-shadow: 0 0 22px rgba(255,184,92,.6), inset 0 0 14px rgba(255,184,92,.2);
  animation: twinkle-lights 1.4s ease-in-out infinite alternate;
}
.nav__cta {
  border: 2px solid var(--cyan);
  color: #9fe6ff !important;
  padding: 6px 16px 8px;
  box-shadow: 0 0 12px rgba(2,181,255,.35), inset 0 0 12px rgba(2,181,255,.15);
  transition: box-shadow .25s, background .25s;
}
.nav__cta:hover { box-shadow: 0 0 24px rgba(2,181,255,.7), inset 0 0 18px rgba(2,181,255,.3); }
.nav__burger { display: none; }

/* string lights */
.stringlights {
  position: relative; z-index: 5;
  height: 26px;
  margin-top: -6px;
  background-image:
    radial-gradient(4px 4px at 20px 14px,  #ffd9a0 40%, rgba(255,184,92,.35) 60%, transparent 75%),
    radial-gradient(4px 4px at 70px 20px,  #a0e8ff 40%, rgba(2,181,255,.35) 60%, transparent 75%),
    radial-gradient(4px 4px at 120px 12px, #ffc9c6 40%, rgba(255,132,127,.35) 60%, transparent 75%),
    radial-gradient(4px 4px at 170px 19px, #e2bdff 40%, rgba(164,76,238,.35) 60%, transparent 75%),
    radial-gradient(4px 4px at 220px 13px, #ffd9a0 40%, rgba(255,184,92,.35) 60%, transparent 75%);
  background-size: 250px 26px;
  background-repeat: repeat-x;
  animation: twinkle-lights 2.6s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes twinkle-lights { from { opacity: .75; } to { opacity: 1; } }

/* hero content */
.hero__content {
  position: relative; z-index: 4;
  margin: auto;
  text-align: center;
  padding: 34px clamp(20px, 4vw, 52px) 38px;
  max-width: 980px;
}
/* HUD scrim so the headline reads over the bright city */
.hero__content::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(85% 80% at 50% 42%, rgba(6,6,26,.78) 0%, rgba(6,6,26,.62) 55%, rgba(6,6,26,0) 100%);
  backdrop-filter: blur(2.5px);
  -webkit-backdrop-filter: blur(2.5px);
  border-radius: 24px;
}
.hero__kicker {
  font-family: var(--font-term);
  font-size: clamp(17px, 2vw, 22px);
  letter-spacing: .1em;
  color: #9fe6ff;
  text-shadow: var(--glow-cyan);
  margin-bottom: 20px;
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 6.8vw, 84px);
  line-height: 1.06;
  color: var(--white);
  text-shadow: 0 2px 4px rgba(3,3,20,.8), 0 6px 30px rgba(3,3,20,.9);
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "clig" 0;
}
.hero__title em { filter: drop-shadow(0 3px 5px rgba(3,3,20,.95)); }
.hero__title .line { display: block; }
.hero__title em { animation: neonflicker 7s linear infinite; }
.hero__title .line:nth-child(2) em { animation-delay: 2.4s; }
.hero__title .line:nth-child(3) em { animation-delay: 4.8s; }
@keyframes neonflicker {
  0%, 4.4%, 5.4%, 100% { opacity: 1; }
  4.8%, 5.1% { opacity: .55; }
}
.hero__sub {
  margin: 26px auto 34px; max-width: 640px;
  font-size: clamp(16px, 1.6vw, 18.5px);
  color: #d5ddff; text-shadow: 0 2px 10px rgba(3,3,20,.9);
}
.hero__chips { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.chip {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(10,10,46,.82);
  border: 2px solid rgba(2,181,255,.45);
  color: var(--white);
  font-weight: 600; font-size: 14px;
  padding: 10px 16px;
  box-shadow: 0 0 14px rgba(2,181,255,.2), inset 0 0 10px rgba(2,181,255,.08);
  backdrop-filter: blur(3px);
  transition: transform .22s, box-shadow .25s, border-color .25s;
}
.chip:hover { transform: translateY(-4px); border-color: var(--cyan); box-shadow: 0 0 26px rgba(2,181,255,.55), inset 0 0 14px rgba(2,181,255,.18); }
.chip__num { font-family: var(--font-term); font-size: 19px; color: #9fe6ff; text-shadow: var(--glow-cyan); }
.chip--hot { border-color: rgba(255,132,127,.6); box-shadow: 0 0 16px rgba(255,132,127,.3), inset 0 0 10px rgba(255,132,127,.1); }
.chip--hot:hover { border-color: var(--coral); box-shadow: 0 0 28px rgba(255,132,127,.6), inset 0 0 14px rgba(255,132,127,.2); }
.chip--hot .chip__num { color: #ffc9c6; text-shadow: var(--glow-coral); }
.chip__tag {
  font-family: var(--font-term); font-size: 14px; letter-spacing: .14em; text-transform: uppercase;
  color: #ffc9c6; border: 1px solid rgba(255,132,127,.6);
  padding: 1px 7px 2px; margin-left: 2px;
  text-shadow: var(--glow-coral);
}

.hero__scroll {
  position: absolute; z-index: 4; bottom: 24px; left: 50%; transform: translateX(-50%);
  width: 24px; height: 40px; border: 2px solid rgba(159,230,255,.55);
}
.hero__scroll span {
  position: absolute; top: 6px; left: 50%; width: 6px; height: 6px; margin-left: -3px;
  background: var(--cyan); box-shadow: var(--glow-cyan);
  animation: scrollhint 1.6s steps(4) infinite;
}
@keyframes scrollhint { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(22px); opacity: 0; } }

/* ═══════════════ PIXEL EDGES ═══════════════ */
.pixeledge { line-height: 0; position: relative; z-index: 6; }
.pixeledge svg { width: 100%; height: 40px; display: block; }
.pixeledge--tonight { margin-top: -40px; }
.pixeledge--tonight svg path { fill: var(--night-2); }
.pixeledge--todark { background: var(--night-2); }
.pixeledge--todark svg path { fill: var(--night-2); }
.pixeledge--todark { background: transparent; }

/* ═══════════════ STATS ═══════════════ */
.stats { background: var(--night-2); padding: 40px 20px 14px; position: relative; z-index: 6; }
.stats__row {
  max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.stat {
  background: var(--panel);
  border: 2px solid rgba(2,181,255,.28);
  padding: 24px 18px 18px;
  text-align: center;
  box-shadow: 0 0 18px rgba(2,181,255,.12), inset 0 0 22px rgba(2,181,255,.05);
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.stat:hover { transform: translateY(-4px); border-color: rgba(2,181,255,.6); box-shadow: 0 0 26px rgba(2,181,255,.3), inset 0 0 24px rgba(2,181,255,.08); }
.stat strong, .stat__suffix {
  font-family: var(--font-term);
  font-size: clamp(38px, 3.8vw, 54px);
  line-height: 1;
  color: #9fe6ff; text-shadow: var(--glow-cyan);
}
.stat:nth-child(2) strong, .stat:nth-child(2) .stat__suffix { color: #e2bdff; text-shadow: var(--glow-violet); }
.stat--trophy strong { color: #ffe1b3; text-shadow: var(--glow-amber); }
.stat:nth-child(4) strong, .stat:nth-child(4) .stat__suffix { color: #ffc9c6; text-shadow: var(--glow-coral); }
.stat p { font-size: 13.5px; color: var(--text-dim); margin-top: 8px; }

/* ═══════════════ SHARED SECTION PIECES ═══════════════ */
.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-term);
  font-size: 21px; letter-spacing: .12em;
  color: #9fe6ff; text-shadow: 0 0 10px rgba(2,181,255,.4);
  margin-bottom: 16px;
}
.eyebrow__num {
  font-family: var(--font-term); font-size: 24px;
  color: var(--white);
  border: 2px solid var(--cyan);
  box-shadow: 0 0 12px rgba(2,181,255,.4), inset 0 0 10px rgba(2,181,255,.15);
  width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}
.eyebrow__num--hot { border-color: var(--coral); box-shadow: 0 0 12px rgba(255,132,127,.45), inset 0 0 10px rgba(255,132,127,.15); }

.pillar h2, .flagship__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.14;
  color: var(--white);
  margin-bottom: 18px;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "clig" 0;
}
.pillar p { color: var(--text); max-width: 56ch; }
.pillar p + p { margin-top: 12px; }
.pillar p strong, .flagship__lede strong { color: var(--white); }

.pixellist { list-style: none; margin: 22px 0 26px; display: grid; gap: 10px; }
.pixellist li {
  background: var(--panel);
  border: 2px solid rgba(2,181,255,.22);
  border-left: 6px solid var(--cyan);
  padding: 11px 16px;
  font-size: 15px; color: var(--text);
  box-shadow: 0 0 12px rgba(2,181,255,.08);
  transition: border-color .25s, box-shadow .25s;
}
.pixellist li:hover { border-color: rgba(2,181,255,.5); box-shadow: 0 0 18px rgba(2,181,255,.2); }
.pixellist li strong { color: var(--white); }

.smallprint { font-size: 12.5px !important; color: var(--text-dim) !important; margin-top: 18px; max-width: 54ch; line-height: 1.55; }

/* ═══════════════ PILLARS ═══════════════ */
.pillar { background: var(--night-2); padding: clamp(60px, 9vw, 116px) 20px; position: relative; }
.pillar--alt { background: var(--night); }
.pillar__inner {
  max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(36px, 6vw, 84px); align-items: center;
}
.pillar--alt .pillar__inner { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }

/* pixel-art frames: chunky border + neon corners */
.pixelframe {
  position: relative;
  border: 3px solid var(--panel-2);
  outline: 2px solid rgba(2,181,255,.35);
  outline-offset: 3px;
  box-shadow: 0 0 30px rgba(2,181,255,.18), 0 18px 50px rgba(3,3,20,.7);
  transition: outline-color .3s, box-shadow .4s, transform .4s;
  line-height: 0;
  background: var(--night);
}
.pixelframe img { width: 100%; height: auto; }
.pixelframe::before, .pixelframe::after {
  content: ""; position: absolute; width: 12px; height: 12px;
  background: var(--cyan); box-shadow: var(--glow-cyan);
}
.pixelframe::before { top: -7px; left: -7px; }
.pixelframe::after { bottom: -7px; right: -7px; }
.pixelframe:hover { outline-color: rgba(2,181,255,.8); box-shadow: 0 0 46px rgba(2,181,255,.4), 0 22px 60px rgba(3,3,20,.8); transform: translateY(-6px); }
.pixelframe--glow { outline-color: rgba(255,132,127,.45); }
.pixelframe--glow::before, .pixelframe--glow::after { background: var(--coral); box-shadow: var(--glow-coral); }
.pixelframe--glow:hover { outline-color: rgba(255,132,127,.85); box-shadow: 0 0 46px rgba(255,132,127,.4), 0 22px 60px rgba(3,3,20,.8); }

/* IG stat card */
.igcard {
  margin-top: 26px;
  background: var(--panel);
  border: 2px solid rgba(164,76,238,.4);
  padding: 22px;
  box-shadow: 0 0 22px rgba(164,76,238,.18), inset 0 0 20px rgba(164,76,238,.06);
  max-width: 440px;
}
.igcard__head { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }
.igcard__avatar {
  width: 48px; height: 48px; border-radius: 50%; flex: none;
  background: conic-gradient(from 210deg, var(--royal), var(--cyan), var(--violet), var(--coral), var(--royal));
  box-shadow: 0 0 14px rgba(164,76,238,.5);
  position: relative;
}
.igcard__avatar::after {
  content: "CS"; position: absolute; inset: 4px; border-radius: 50%;
  background: var(--night); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-term); font-size: 18px;
}
.igcard__head strong { display: inline-flex; align-items: center; gap: 5px; font-size: 16px; color: var(--white); }
.igcard__head span { display: block; font-size: 13px; color: var(--text-dim); }
.igcard__verified { width: 15px; height: 15px; fill: var(--cyan); }
.igcard__verified .igcard__check { fill: var(--night); }
.igcard__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 18px; }
.igcard__stats div { text-align: center; background: var(--night-2); border: 1px solid rgba(2,181,255,.2); padding: 12px 6px; }
.igcard__stats strong { font-family: var(--font-term); font-size: 22px; color: #9fe6ff; text-shadow: 0 0 8px rgba(2,181,255,.4); display: block; line-height: 1.1; }
.igcard__stats span { font-size: 11.5px; color: var(--text-dim); }

/* ═══════════════ BUTTONS ═══════════════ */
.btn {
  display: inline-block;
  font-weight: 700; font-size: 15px;
  padding: 13px 26px;
  border: 2px solid;
  transition: transform .22s, box-shadow .25s;
}
.btn:hover { transform: translateY(-3px); }
.btn--ghost {
  border-color: var(--cyan); color: #9fe6ff;
  box-shadow: 0 0 14px rgba(2,181,255,.25), inset 0 0 12px rgba(2,181,255,.08);
}
.btn--ghost:hover { box-shadow: 0 0 26px rgba(2,181,255,.55), inset 0 0 16px rgba(2,181,255,.18); }
.btn--blue {
  background: var(--royal); border-color: var(--royal); color: #fff;
  box-shadow: 0 0 18px rgba(12,61,244,.5);
}
.btn--blue:hover { box-shadow: 0 0 30px rgba(12,61,244,.8); }
.btn--coral {
  background: var(--coral); border-color: var(--coral); color: #40100e;
  font-size: 17px; padding: 15px 32px;
  box-shadow: 0 0 22px rgba(255,132,127,.55);
}
.btn--coral:hover { box-shadow: 0 0 38px rgba(255,132,127,.85); }
.btn--wa {
  border-color: rgba(159,230,255,.4); color: var(--white);
  background: var(--panel);
  position: relative; padding-left: 44px;
  box-shadow: 0 0 12px rgba(2,181,255,.15);
}
.btn--wa::before {
  content: ""; position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; border-radius: 50%;
  background: #2ee66f; box-shadow: 0 0 10px rgba(46,230,111,.8);
}
.btn--wa:hover { box-shadow: 0 0 22px rgba(2,181,255,.4); }

/* ═══════════════ FLAGSHIP (SALES) ═══════════════ */
.flagship {
  background: var(--night);
  color: var(--text);
  padding: clamp(70px, 9vw, 120px) 20px clamp(56px, 7vw, 90px);
  position: relative; overflow: hidden;
}
.flagship::before {
  /* pixel stars */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 8% 16%, #eef2ff 45%, transparent 55%),
    radial-gradient(2px 2px at 24% 7%, #9fe6ff 45%, transparent 55%),
    radial-gradient(2px 2px at 39% 20%, #eef2ff 45%, transparent 55%),
    radial-gradient(2px 2px at 57% 9%, #e2bdff 45%, transparent 55%),
    radial-gradient(2px 2px at 72% 17%, #eef2ff 45%, transparent 55%),
    radial-gradient(2px 2px at 88% 7%, #9fe6ff 45%, transparent 55%),
    radial-gradient(2px 2px at 95% 26%, #eef2ff 45%, transparent 55%),
    radial-gradient(2px 2px at 5% 55%, #e2bdff 45%, transparent 55%),
    radial-gradient(2px 2px at 94% 52%, #eef2ff 45%, transparent 55%),
    radial-gradient(2px 2px at 10% 82%, #9fe6ff 45%, transparent 55%),
    radial-gradient(2px 2px at 91% 86%, #e2bdff 45%, transparent 55%),
    radial-gradient(2px 2px at 50% 96%, #eef2ff 45%, transparent 55%),
    radial-gradient(2px 2px at 30% 90%, #9fe6ff 45%, transparent 55%),
    radial-gradient(2px 2px at 70% 92%, #eef2ff 45%, transparent 55%);
  animation: twinkle-lights 3.4s ease-in-out infinite alternate;
}
.flagship__inner { max-width: var(--wrap); margin: 0 auto; position: relative; }
.flagship__title { margin-bottom: 20px; }
.flagship__lede { max-width: 66ch; font-size: clamp(16px, 1.6vw, 18.5px); margin-bottom: 30px; }

/* the pipeline conveyor */
.pipeline {
  display: flex; flex-wrap: wrap; gap: 8px 6px;
  align-items: center;
  margin-bottom: 44px;
  font-family: var(--font-term);
  font-size: 19px; letter-spacing: .05em;
}
.pipeline span {
  border: 1px solid rgba(255,184,92,.5);
  color: #ffe1b3; text-shadow: 0 0 8px rgba(255,184,92,.4);
  padding: 3px 12px 4px;
  background: rgba(255,184,92,.05);
}
.pipeline span:not(:last-child)::after {
  content: "▸"; margin-left: -2px;
  position: relative; left: 13px;
  color: rgba(255,184,92,.7);
}
.pipeline span:not(:last-child) { margin-right: 14px; }

.flagship__grid {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: clamp(30px, 5vw, 64px); align-items: start;
}
.syscards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.syscard {
  background: var(--panel);
  border: 2px solid rgba(2,181,255,.22);
  padding: 20px;
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.syscard:hover { transform: translateY(-4px); border-color: rgba(255,132,127,.55); box-shadow: 0 0 20px rgba(255,132,127,.2); }
.syscard h3 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 19px; color: #ffc9c6; text-shadow: 0 0 10px rgba(255,132,127,.35);
  margin-bottom: 8px;
}
.syscard p { font-size: 14px; color: var(--text); line-height: 1.55; }

.flagship__cta {
  margin-top: 44px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  position: relative;
}
.flagship__cta p { font-family: var(--font-term); font-size: clamp(21px, 2.3vw, 27px); color: #ffe1b3; text-shadow: 0 0 10px rgba(255,184,92,.4); }

/* ═══════════════ CONTACT ═══════════════ */
.contact { background: var(--night-2); padding: clamp(60px, 8vw, 104px) 20px; }
.contact__card {
  max-width: 760px; margin: 0 auto; text-align: center;
  background: var(--panel);
  border: 2px solid rgba(2,181,255,.35);
  padding: clamp(44px, 6vw, 68px) clamp(24px, 5vw, 60px);
  box-shadow: 0 0 40px rgba(2,181,255,.15), inset 0 0 40px rgba(2,181,255,.05);
  position: relative;
}
.contact__neon {
  position: absolute; top: -19px; left: 50%; transform: translateX(-50%) rotate(-1.5deg);
  font-family: var(--font-term); font-size: 23px; letter-spacing: .3em; text-indent: .3em;
  color: #ffc9c6; text-shadow: var(--glow-coral);
  background: var(--night);
  border: 2px solid rgba(255,132,127,.65);
  box-shadow: 0 0 18px rgba(255,132,127,.4);
  padding: 3px 16px 5px;
  animation: neonflicker 6s linear infinite;
}
.contact__card h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(28px, 3.4vw, 44px); line-height: 1.16;
  color: var(--white);
  margin-bottom: 14px;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "clig" 0;
}
.contact__card > p { color: var(--text-dim); margin-bottom: 30px; }
.contact__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ═══════════════ FOOTER ═══════════════ */
.footer { background: var(--night); color: var(--text-dim); position: relative; }
.footer__skyline { display: block; width: 100%; height: 90px; background: var(--night-2); }
.footer__skyline path { fill: var(--night); }
.footer__inner { max-width: var(--wrap); margin: 0 auto; padding: 26px 20px 44px; text-align: center; }
.footer__logo { height: 44px; width: auto; margin: 0 auto 16px; filter: drop-shadow(0 0 12px rgba(2,181,255,.5)); }
.footer__legal { font-size: 13.5px; margin-bottom: 18px; }
.footer__links { display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; }
.footer__links a { font-family: var(--font-term); font-size: 19px; color: var(--text); transition: color .2s, text-shadow .2s; }
.footer__links a:hover { color: #9fe6ff; text-shadow: var(--glow-cyan); }
.footer__fine { font-size: 12px; color: #5a628f; }

/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width: 960px) {
  .stats__row { grid-template-columns: repeat(2, 1fr); }
  .pillar__inner, .pillar--alt .pillar__inner { grid-template-columns: 1fr; }
  .pillar--alt .pillar__inner .pixelframe { order: -1; }
  .pixelframe { max-width: 440px; margin: 0 auto; }
  .flagship__grid { grid-template-columns: 1fr; }
  .flagship .pixelframe { max-width: 380px; }
  .syscards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .nav__links { display: none; }
  .nav__links.is-open {
    display: flex; position: absolute; top: 72px; right: 16px; z-index: 50;
    flex-direction: column; gap: 14px;
    background: var(--panel);
    border: 2px solid rgba(2,181,255,.4);
    box-shadow: 0 0 30px rgba(2,181,255,.25);
    padding: 22px 26px;
  }
  .nav__burger {
    display: flex; flex-direction: column; gap: 5px;
    background: rgba(10,10,46,.85);
    border: 2px solid rgba(2,181,255,.5);
    padding: 10px 9px; cursor: pointer;
    box-shadow: 0 0 12px rgba(2,181,255,.25);
  }
  .nav__burger span { width: 20px; height: 2.5px; background: #9fe6ff; box-shadow: 0 0 6px rgba(2,181,255,.6); }
  .syscards { grid-template-columns: 1fr; }
  .stats__row { grid-template-columns: 1fr 1fr; gap: 12px; }
  .pipeline { font-size: 17px; }
}

/* ═══════════════ MOTION SAFETY ═══════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__rain, .hero__scroll span, .cursor, .contact__neon,
  .hero__title em, .stringlights, .flagship::before { animation: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero__art { transform: none; }
  * { transition-duration: .01ms !important; }
}