/* ═══════════════════════════════════════════════════════
   base.css — Unison Systems
   Variables · Reset · Typography · Buttons · Animations
   Shared across ALL pages
═══════════════════════════════════════════════════════ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&family=Outfit:wght@400;500;600;700&family=Montserrat:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&family=Oswald:wght@400;500;600&family=Roboto:wght@300;400;500;700&display=swap');

/* ── CSS Custom Properties ── */
:root {
  --black:     #141318;
  --purple:    #5B4FCF;
  --purple-l:  #7B6EE8;
  --purple-d:  #3D348F;
  --gray-1:    #1E1C26;
  --gray-2:    #2C2A38;
  --gray-3:    #3E3C4E;
  --gray-m:    #6B6882;
  --gray-lt:   #C4C2D4;
  --off-white: #F5F4F9;
  --white:     #FFFFFF;
  --teal:      #00C6A2;
  --navy:      #0D0C18;
  --font-head: 'Sora', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --radius:    12px;
  --radius-lg: 20px;
}

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

html {
  scroll-behavior: smooth;
  /* Land anchors flush with the bottom of the main nav (135px), which means
     the section image's top edge sits at the main nav's bottom edge and the
     subnav (which floats below the main nav at top:135) overlays the top
     ~40px of the section image. This is intentional per design preference. */
  scroll-padding-top: 135px;
}

/* Mobile: no floating subnav, nav is ~73px tall with icon logo —
   land anchors flush with the bottom of the nav */
@media (max-width: 768px) {
  html { scroll-padding-top: 73px; }
}

body {
  font-family: var(--font-body);
  background: var(--navy);
  color: var(--white);
  overflow-x: hidden;
  line-height: 1.6;
}

img { display: block; max-width: 100%; }
a   { color: inherit; }

/* ── Typography ── */
h1 {
  font-family: var(--font-head);
  font-size: clamp(42px, 6vw, 76px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -2px;
  color: var(--white);
  margin-bottom: 24px;
}

h2 {
  font-family: var(--font-head);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 800;
  letter-spacing: -1.5px;
  line-height: 1.1;
  color: var(--white);
  margin-bottom: 16px;
}

h3 {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--white);
}

p {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--gray-lt);
}

/* h2 italic emphasis — purple on default sections */
h2 em { font-style: normal; color: var(--purple-l); }

/* Section-specific em color overrides applied in components.css */

.section-sub {
  font-size: 17px;
  color: var(--gray-lt);
  font-weight: 300;
  line-height: 1.65;
  max-width: 560px;
}

/* ── Section Eyebrow ── */
.section-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--purple-l);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-eyebrow::before,
.section-eyebrow::after {
  content: '';
  width: 24px;
  height: 1.5px;
  background: var(--purple);
  display: block;
}

/* Teal variant — AI sections */
.eyebrow-teal {
  color: var(--teal);
}
.eyebrow-teal::before,
.eyebrow-teal::after {
  background: var(--teal);
}

/* Orange/amber variant — Cybersecurity sections */
.eyebrow-cyber {
  color: #FFBE74;
}
.eyebrow-cyber::before,
.eyebrow-cyber::after {
  background: #FFA032;
}

/* ── Buttons ── */

/* Primary — on dark backgrounds */
.btn-primary {
  background: var(--purple);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 15px 30px;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font-body);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.btn-primary:hover {
  background: var(--purple-l);
  transform: translateY(-2px);
}

/* Secondary — ghost */
.btn-secondary {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 10px;
  padding: 15px 30px;
  font-size: 15px;
  font-weight: 500;
  font-family: var(--font-body);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.btn-secondary:hover {
  border-color: rgba(91,79,207,0.6);
  background: rgba(91,79,207,0.08);
}

/* CTA band — on purple background */
.btn-white {
  background: white;
  color: var(--purple-d);
  border-radius: 10px;
  padding: 15px 30px;
  font-size: 15px;
  font-weight: 700;
  font-family: var(--font-body);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.btn-white:hover {
  background: var(--off-white);
  transform: translateY(-2px);
}

.btn-outline-white {
  background: transparent;
  color: white;
  border: 1.5px solid rgba(255,255,255,0.4);
  border-radius: 10px;
  padding: 15px 30px;
  font-size: 15px;
  font-weight: 500;
  font-family: var(--font-body);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.btn-outline-white:hover {
  border-color: white;
  background: rgba(255,255,255,0.08);
}

/* ── Animations ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Responsive Breakpoints ── */
@media (max-width: 768px) {
  section { padding: 72px 24px; }
}

@media (max-width: 640px) {
  h1 { font-size: clamp(34px, 8vw, 48px); letter-spacing: -1.2px; }
  h2 { font-size: clamp(26px, 6.5vw, 38px); letter-spacing: -1px; }
  .section-sub { font-size: 16px; }
}