/* ============================================================
   The Connector — Cyberpunk skin (loaded AFTER style.css).
   Palette from the Palassis brand: neon yellow + red on near-black,
   a touch of cyan for the glow. Angular cut-corners, scanlines, neon.
   ============================================================ */
:root {
  --bg:          #07080d;
  --bg-raised:   #0c0e16;
  --bg-raised-2: #12151f;
  --border:      rgba(255, 212, 0, 0.30);
  --border-soft: #1b1f2c;
  --text:        #eef1f8;
  --text-muted:  #8a92a6;
  --gold:        #ffd400;   /* neon yellow — primary accent */
  --gold-deep:   #e0b400;
  --arcane:      #ff2a3c;   /* signal red — secondary */
  --radius:      3px;
  --radius-sm:   2px;
  --cyan:        #12e6ff;
  --font-display: "Orbitron","Rajdhani",sans-serif;
}

/* Fonts */
body { font-family: "Rajdhani","Inter",system-ui,sans-serif; letter-spacing:.02em; }
h1,h2,h3,.display,.nav__brand,.app-cta__title { font-family:"Orbitron",var(--font-display),sans-serif; }
.eyebrow,.live-banner__head,.nav__links a,.footer-legal,.linkrow__sub { font-family:"Share Tech Mono",monospace !important; }

/* Tech grid + scanlines over the whole page */
body::before {
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(rgba(255,212,0,.025) 1px, transparent 1px) 0 0 / 100% 3px,
    radial-gradient(1100px 520px at 50% -10%, rgba(255,212,0,.06), transparent 60%),
    linear-gradient(120deg, rgba(18,230,255,.04), transparent 40%),
    var(--bg);
}
body > * { position:relative; z-index:1; }

/* Headings: neon glow + hard edges */
.display, h1.display {
  text-transform:uppercase; letter-spacing:.02em; color:var(--text);
  text-shadow:0 0 18px rgba(255,212,0,.35), 0 0 2px rgba(255,212,0,.6);
}
.eyebrow {
  color:var(--gold); text-transform:uppercase; letter-spacing:.28em; font-size:.72rem;
}
.eyebrow::before { content:"// "; color:var(--arcane); }

/* Nav: dark bar, neon underline, mono links */
.nav { background:rgba(7,8,13,.86); backdrop-filter:blur(8px); border-bottom:1px solid var(--border); }
.nav__brand { color:var(--text); text-transform:uppercase; font-size:1rem; letter-spacing:.06em; }
.nav__links a {
  color:var(--text-muted); border:1px solid transparent; border-radius:0; text-transform:uppercase;
  font-size:.74rem; letter-spacing:.12em; padding:7px 12px; transition:.14s;
  clip-path:polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.nav__links a:hover, .nav__links a.is-active {
  color:#07080d; background:var(--gold); box-shadow:0 0 16px rgba(255,212,0,.5);
}

/* Buttons: angular neon, hard black text */
.btn { border-radius:0; text-transform:uppercase; letter-spacing:.1em; font-family:"Rajdhani",sans-serif; font-weight:700;
  clip-path:polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.btn--primary { background:var(--gold); color:#07080d; border:0; box-shadow:0 0 20px rgba(255,212,0,.35); }
.btn--primary:hover { background:#fff04d; box-shadow:0 0 30px rgba(255,212,0,.6); transform:translateY(-1px); }
.btn--ghost { border:1px solid var(--gold); color:var(--gold); background:transparent; }
.btn--ghost:hover { background:rgba(255,212,0,.1); box-shadow:0 0 18px rgba(255,212,0,.3); }

/* Panels / cards: cut corners + neon edge */
.app-cta, .book-card, .product-card, .linkrow, .si-card, .panel, .tstl-card {
  border:1px solid var(--border); border-radius:0; background:var(--bg-raised);
  clip-path:polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.app-cta:hover, .book-card:hover, .linkrow:hover { border-color:var(--gold); box-shadow:0 0 26px rgba(255,212,0,.18); }
.app-cta__title { text-transform:uppercase; letter-spacing:.04em; }

/* Live/latest label + video frame */
.live-banner__head { color:var(--cyan); text-transform:uppercase; letter-spacing:.18em; font-size:.72rem; }
.live-dot { background:var(--arcane); box-shadow:0 0 10px var(--arcane); }
.video-frame { border:1px solid var(--border); box-shadow:0 0 30px rgba(18,230,255,.12); }

/* Logo: show the full mark — no squish, no rounded clipping */
.nav__logo { height:36px; width:auto; border-radius:0; object-fit:contain; }

/* Links rows */
.linkrow__title { text-transform:uppercase; letter-spacing:.04em; }
.linkrow:hover { transform:translateX(2px); }
.linkrow__icon { width:22px; height:22px; color:var(--gold); flex-shrink:0; }

/* Footer */
.footer { border-top:1px solid var(--border); background:#05060a; }
.footer a:hover { color:var(--gold); }

/* Accent selection */
::selection { background:var(--gold); color:#07080d; }