/* ============================================
   CYBER PROJECTS — SHARED STYLES
   Teenage Engineering inspired: light, precise, industrial
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300&family=Syne:wght@400;500;600;700;800&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --orange:     #E8450A;
  --orange-dim: #C03A08;
  --orange-tint:#FDF0EB;

  --warm-white: #F4F2EE;
  --warm-100:   #ECEAE5;
  --warm-200:   #D8D5CE;
  --warm-400:   #A8A49C;
  --warm-600:   #6B6860;
  --warm-800:   #2E2D2A;
  --warm-900:   #1A1917;

  --rule:       rgba(0,0,0,0.10);
  --rule-light: rgba(0,0,0,0.05);

  --font-display: 'Syne', sans-serif;
  --font-mono:    'DM Mono', monospace;
}

html { scroll-behavior: smooth; }

body {
  background: var(--warm-white);
  color: var(--warm-800);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  overflow-x: hidden;
}

/* ── NAV ── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2.5rem;
  border-bottom: 0.5px solid var(--rule);
  background: rgba(244,242,238,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.logo-wrap { display: flex; align-items: center; gap: 10px; text-decoration: none; }

.logo-icon { width: 30px; height: 30px; flex-shrink: 0; }

.logo-text-block { line-height: 1.15; }
.logo-name {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--warm-800);
}
.logo-sub {
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--warm-400);
}

nav ul { list-style: none; display: flex; gap: 2rem; align-items: center; }
nav ul li a {
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--warm-600);
  transition: color 0.15s;
}
nav ul li a:hover,
nav ul li a.active { color: var(--warm-800); }

.nav-cta {
  background: var(--orange) !important;
  color: #fff !important;
  padding: 7px 18px !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  font-family: var(--font-mono) !important;
  text-decoration: none;
  transition: background 0.15s;
  display: inline-block;
}
.nav-cta:hover { background: var(--orange-dim) !important; }

/* ── TICKER ── */
.ticker {
  border-top: 0.5px solid var(--rule);
  border-bottom: 0.5px solid var(--rule);
  background: var(--warm-100);
  padding: 9px 0;
  overflow: hidden;
}
.ticker-track {
  display: flex;
  gap: 2.5rem;
  animation: ticker 30s linear infinite;
  white-space: nowrap;
}
.ticker-item {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--warm-400);
  flex-shrink: 0;
}
.ticker-item span { color: var(--orange); margin-right: 0.75rem; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── SECTION PRIMITIVES ── */
.section-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-label::before { content: '//'; }

.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.5vw, 3rem);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: var(--warm-900);
  margin-bottom: 1.5rem;
}

.body-text {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 300;
  color: var(--warm-600);
  line-height: 1.9;
  margin-bottom: 1.25rem;
}
.body-text strong { color: var(--warm-800); font-weight: 400; }

/* ── RULE DIVIDER ── */
.h-rule { border: none; border-top: 0.5px solid var(--rule); }

/* ── BUTTONS ── */
.btn-primary {
  display: inline-block;
  background: var(--orange);
  color: #fff;
  padding: 12px 28px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.15s, transform 0.1s;
  border: none; cursor: pointer;
}
.btn-primary:hover { background: var(--orange-dim); transform: translateY(-1px); }

.btn-outline {
  display: inline-block;
  background: transparent;
  color: var(--warm-600);
  padding: 11px 28px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border: 0.5px solid var(--warm-200);
  transition: border-color 0.15s, color 0.15s;
}
.btn-outline:hover { border-color: var(--warm-600); color: var(--warm-800); }

/* ── FOOTER ── */
footer {
  border-top: 0.5px solid var(--rule);
  background: var(--warm-100);
  padding: 1.75rem 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer-copy {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  color: var(--warm-400);
}
.footer-right {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.footer-nav a {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--warm-400);
  text-decoration: none;
  margin-left: 1.5rem;
  transition: color 0.15s;
}
.footer-nav a:hover { color: var(--warm-800); }

/* ── FORM ── */
.form-group { margin-bottom: 1.1rem; }
.form-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--warm-400);
  margin-bottom: 5px;
}
.form-input, .form-textarea, .form-select {
  width: 100%;
  background: #fff;
  border: 0.5px solid var(--warm-200);
  color: var(--warm-800);
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 10px 13px;
  outline: none;
  transition: border-color 0.15s;
  -webkit-appearance: none;
  border-radius: 0;
}
.form-input:focus, .form-textarea:focus, .form-select:focus { border-color: var(--orange); }
.form-textarea { resize: vertical; min-height: 110px; }
.form-select { color: var(--warm-600); cursor: pointer; }
.form-select option { background: #fff; }
.form-submit {
  width: 100%;
  background: var(--orange);
  color: #fff;
  border: none;
  padding: 13px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s;
  margin-top: 0.4rem;
}
.form-submit:hover { background: var(--orange-dim); }