/* ═══════════════════════════════════
   INTRUSIONPANEL.COM — SHARED CSS
═══════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&family=Syne:wght@400;600;700;800&display=swap');

:root {
  --bg:    #060a0e;
  --bg2:   #0a0f14;
  --panel: #0d1520;
  --border:    #162030;
  --border-hi: #1e3550;
  --green:  #00ff88;
  --green2: #00cc6a;
  --green-glow: rgba(0,255,136,.14);
  --cyan:   #00e5ff;
  --red:    #ff2244;
  --orange: #ff7700;
  --yellow: #ffcc00;
  --text:   #b8ccd8;
  --dim:    #4a6a84;
  --bright: #e8f4ff;
  --mono: 'JetBrains Mono', monospace;
  --sans: 'Syne', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  overflow-x: hidden;
  cursor: none;
}

/* ── PAGE TRANSITION OVERLAY ── */
#page-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 9000;
  pointer-events: none;
  opacity: 0;
  transition: opacity .45s cubic-bezier(.4,0,.2,1);
}
#page-overlay.active   { opacity: 1;  pointer-events: all; }
#page-overlay.entering { opacity: 1; }

/* Grid wipe effect inside overlay */
#page-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,255,136,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,136,.04) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0;
  transition: opacity .3s;
}
#page-overlay.active::before { opacity: 1; }

/* ── CURSOR ── */
#cur {
  width: 10px; height: 10px;
  background: var(--green);
  position: fixed; top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: screen;
  transition: transform .1s, opacity .1s;
}
#cur-ring {
  width: 36px; height: 36px;
  border: 1px solid rgba(0,255,136,.35);
  position: fixed; top: 0; left: 0;
  pointer-events: none;
  z-index: 9998;
  transition: transform .15s, border-color .2s;
}

/* ── SCANLINES ── */
body::before {
  content: '';
  position: fixed; inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,.06) 3px, rgba(0,0,0,.06) 4px);
  pointer-events: none;
  z-index: 800;
}

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 500;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 3rem; height: 62px;
  background: rgba(6,10,14,.96);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(16px);
}
.logo {
  display: flex; align-items: center; gap: .6rem;
  text-decoration: none;
  font-family: var(--sans); font-weight: 800; font-size: 1rem;
  color: var(--bright);
}
.logo-b { color: var(--green); font-family: var(--mono); font-weight: 300; font-size: 1.1rem; }
.logo-dot {
  width: 7px; height: 7px;
  background: var(--green); border-radius: 50%;
  box-shadow: 0 0 8px var(--green);
  animation: throb 1.8s ease-in-out infinite;
}
@keyframes throb {
  0%,100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.4); opacity: .5; }
}
.nav-right { display: flex; align-items: center; gap: 2rem; }
.nav-links { display: flex; gap: 1.8rem; list-style: none; }
.nav-links a {
  color: var(--dim); text-decoration: none;
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  transition: color .2s; position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute; bottom: -4px; left: 0; right: 0;
  height: 1px; background: var(--green);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s;
}
.nav-links a:hover,
.nav-links a.active { color: var(--green); }
.nav-links a.active::after,
.nav-links a:hover::after { transform: scaleX(1); }

.nav-btn {
  border: 1px solid var(--green); color: var(--green);
  padding: .38rem 1.1rem;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
  text-decoration: none; text-transform: uppercase; cursor: none;
  transition: all .2s;
}
.nav-btn:hover { background: var(--green); color: var(--bg); }

.threat-badge {
  display: flex; align-items: center; gap: .5rem;
  font-size: .6rem; letter-spacing: .1em; color: var(--dim);
}
.tl-bar { display: flex; gap: 2px; }
.tl-seg { width: 6px; height: 14px; background: var(--border-hi); }
.tl-seg.a-lo { background: var(--green); }
.tl-seg.a-me { background: var(--yellow); }
.tl-seg.a-hi { background: var(--red); animation: segblink .6s ease-in-out infinite alternate; }
@keyframes segblink { from { opacity: 1; } to { opacity: .3; } }

/* ── TICKER ── */
.ticker-wrap {
  background: rgba(255,34,68,.04);
  border-top: 1px solid rgba(255,34,68,.12);
  border-bottom: 1px solid rgba(255,34,68,.12);
  overflow: hidden; padding: .65rem 0; position: relative;
}
.ticker-label {
  position: absolute; left: 0; top: 0; bottom: 0;
  display: flex; align-items: center; padding: 0 1.2rem;
  background: var(--red); font-size: .62rem; font-weight: 700;
  letter-spacing: .1em; color: #fff; z-index: 2; white-space: nowrap;
}
.ticker-track { display: flex; animation: tickerroll 45s linear infinite; padding-left: 160px; }
.ticker-item {
  display: inline-flex; align-items: center; gap: .8rem;
  padding: 0 3rem; font-size: .65rem; color: var(--dim); white-space: nowrap;
}
.ticker-item .ti-id { color: var(--orange); font-weight: 500; }
.ti-sev { padding: .1rem .4rem; font-size: .55rem; letter-spacing: .08em; border: 1px solid; }
.ti-sev.hi { background: rgba(255,34,68,.15); color: var(--red); border-color: rgba(255,34,68,.3); }
.ti-sev.me { background: rgba(255,119,0,.15); color: var(--orange); border-color: rgba(255,119,0,.3); }
.ti-sev.lo { background: rgba(0,255,136,.08); color: var(--green); border-color: rgba(0,255,136,.2); }
@keyframes tickerroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ── SECTION BASICS ── */
section { padding: 6rem 3rem; }
.sec-tag {
  font-size: .65rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--green); margin-bottom: .8rem;
  display: flex; align-items: center; gap: .6rem;
}
.sec-tag::before { content: '//'; color: var(--dim); }
.sec-title {
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(2.2rem,4vw,3.2rem);
  color: var(--bright); letter-spacing: -.02em; line-height: 1.05;
}
.sec-sub {
  font-size: .8rem; color: var(--dim);
  line-height: 1.9; max-width: 580px; margin-top: .8rem;
}

/* ── BUTTONS ── */
.btn-p {
  background: var(--green); color: var(--bg);
  padding: .85rem 2.2rem;
  font-family: var(--mono); font-size: .75rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; cursor: none; display: inline-block;
  position: relative; overflow: hidden;
  transition: transform .15s, box-shadow .2s;
}
.btn-p:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,255,136,.3); }
.btn-p::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
  transform: translateX(-100%); transition: transform .5s;
}
.btn-p:hover::before { transform: translateX(100%); }
.btn-o {
  border: 1px solid var(--border-hi); color: var(--dim);
  padding: .85rem 2.2rem;
  font-family: var(--mono); font-size: .75rem; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none; cursor: none;
  display: inline-block; transition: all .2s;
}
.btn-o:hover { border-color: var(--green); color: var(--green); }

/* ── TAGS ── */
.tag {
  font-size: .6rem; border: 1px solid var(--border);
  color: var(--dim); padding: .2rem .55rem; letter-spacing: .07em;
  transition: all .25s;
}

/* ── SCROLL REVEAL ── */
@keyframes fadeUp { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .65s ease, transform .65s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ── FOOTER ── */
footer {
  background: var(--bg); border-top: 1px solid var(--border);
  padding: 1.8rem 3rem;
  display: flex; align-items: center; justify-content: space-between;
  font-size: .65rem; color: var(--dim); letter-spacing: .06em;
  flex-wrap: wrap; gap: 1rem;
}
.foot-logo { font-family: var(--sans); font-weight: 800; color: var(--bright); font-size: .9rem; }
.foot-logo span { color: var(--green); }
.foot-links { display: flex; gap: 2rem; list-style: none; }
.foot-links a { color: var(--dim); text-decoration: none; transition: color .2s; }
.foot-links a:hover { color: var(--green); }

/* ── TERMINAL STYLES ── */
.term-win { border: 1px solid var(--border); overflow: hidden; }
.term-bar {
  background: var(--panel); border-bottom: 1px solid var(--border);
  padding: .6rem 1rem; display: flex; align-items: center; gap: .45rem;
  font-size: .65rem; color: var(--dim); letter-spacing: .06em;
}
.wdot { width: 10px; height: 10px; border-radius: 50%; }
.wdot.r { background: #ff5f56; } .wdot.y { background: #ffbd2e; } .wdot.g { background: #27c93f; }
.term-body { padding: 1.4rem 1.5rem; font-size: .7rem; line-height: 1.9; background: var(--bg); }
.tl { display: flex; gap: .8rem; }
.tp { color: var(--green); flex-shrink: 0; }
.tc { color: var(--bright); }
.to { color: var(--dim); padding-left: 1.4rem; }
.to .v { color: var(--cyan); } .to .w { color: var(--orange); }
.to .e { color: var(--red); }  .to .g { color: var(--green); }
.t-cur {
  display: inline-block; width: 7px; height: 13px;
  background: var(--green); animation: blink 1s step-end infinite; vertical-align: middle;
}
@keyframes blink { 0%,100% { opacity:1; } 50% { opacity:0; } }

/* ── PAGE HERO BASE ── */
.page-hero {
  min-height: 55vh; display: flex; flex-direction: column;
  justify-content: flex-end; padding: 8rem 3rem 4rem;
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.page-hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0,255,136,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,136,.025) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 80% at 30% 70%, black, transparent);
}
.page-hero-glow {
  position: absolute; width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(0,255,136,.06), transparent 70%);
  top: 50%; left: 20%; transform: translate(-50%,-50%);
  pointer-events: none;
}
.page-hero-content { position: relative; z-index: 2; }
.page-eyebrow {
  font-size: .68rem; color: var(--green); letter-spacing: .15em;
  margin-bottom: 1rem;
  opacity: 0; animation: fadeUp .5s .1s forwards;
}
.page-eyebrow span { color: var(--dim); }
.page-title {
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(3rem,7vw,6rem);
  line-height: .92; color: var(--bright); letter-spacing: -.03em;
  opacity: 0; animation: fadeUp .6s .3s forwards;
}
.page-title .ga { color: var(--green); }
.page-desc {
  font-size: .84rem; color: var(--dim); max-width: 520px;
  line-height: 1.9; margin-top: 1.2rem;
  opacity: 0; animation: fadeUp .6s .5s forwards;
}