/* =========================================================
   1.  Colour tokens  –  light & dark palettes, auto-switch
   ========================================================= */
:root {
  /* Light palette (defaults) */
  --bg-light:     #f6f7f8;
  --fg-light:     #222222;
  --border-light: #e2e4e6;

  /* Dark palette */
  --bg-dark:      #121417;
  --fg-dark:      #f7f8fa;
  --border-dark:  #2a2c30;

  /* Active tokens used everywhere below */
  --bg:           var(--bg-light);
  --fg:           var(--fg-light);
  --border:       var(--border-light);

  /* Tell browsers we support both schemes */
  color-scheme: light dark;
}

/* Dark-mode override */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:      var(--bg-dark);
    --fg:      var(--fg-dark);
    --border:  var(--border-dark);
  }
}

/* (Optional) explicit light override for completeness */
@media (prefers-color-scheme: light) {
  :root {
    --bg:      var(--bg-light);
    --fg:      var(--fg-light);
    --border:  var(--border-light);
  }
}

/* =========================================================
   2.  Global reset  –  unchanged from your original file
   ========================================================= */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  width: 100%;
  font-family: "Montserrat", sans-serif;
  background: var(--bg);
  color: var(--fg);
  overflow-x: hidden;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* ensures full height */
}

/* =========================================================
   3.  Main layout
   ========================================================= */
.main-content {
  flex: 1;                       /* take remaining space */
  display: flex;
  flex-direction: column;
  align-items: center;           /* ⬅︎ horizontal centring (already there) */
  justify-content: center;       /* ⬅︎ NEW: vertical centring */
  padding: 2rem 1rem;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* ---------- HERO ---------- */
.hero {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4rem;
  padding: 2rem;
  text-align: left;
  animation: fade 1s ease-out both;
  flex-wrap: wrap;
}

.hero-text {
  max-width: 600px;
  flex: 1;
}

.hero-text h1 {
  font-size: clamp(1.8rem, 6vw, 3.5rem);
  font-weight: 900;
  margin-bottom: 1rem;
}

.hero-text p {
  font-size: clamp(1rem, 4vw, 1.4rem);
  line-height: 1.5;
}

.logo-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
}

/* Logo image (monochrome SVG) – tint via filter */
.logo {
  max-width: 500px;
  width: 100%;
  height: auto;
  user-select: none;
  filter: none;                               /* light mode = black glyph */
  transition: filter 0.3s ease;
}

@media (prefers-color-scheme: dark) {
  .logo { filter: invert(1) brightness(2); }   /* dark mode = white glyph */
}

/* ---------- SOCIAL ---------- */
.social-section {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
  padding: 1rem;
}

.social-links {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 3rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.social-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100px;
  height: 80px;
  text-align: center;
}

/* Social icons (monochrome SVGs) – tint via filter */
.social-item img {
  width: 40px;
  height: auto;
  border-radius: 6px;
  transition: transform 0.3s ease, opacity 0.3s ease, filter 0.3s ease;
  filter: invert(1) brightness(0);            /* light mode = black */
}

.social-item:hover img {
  transform: scale(1.1);
  opacity: 0.85;
}

@media (prefers-color-scheme: dark) {
  .social-item img { filter: invert(1) brightness(2); } /* dark mode = white */
}

.label {
  position: absolute;
  top: 0;
  font-size: 1rem;
  color: var(--fg);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: translateY(-8px);
  pointer-events: none;
  white-space: nowrap;
}

.social-item:hover .label {
  opacity: 1;
  transform: translateY(-30px);
}

/* ---------- FOOTER ---------- */
footer {
  text-align: center;
  font-size: 0.9rem;
  padding: 1rem;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

/* =========================================================
   4.  Responsive tweaks – unchanged
   ========================================================= */
/* Tablet & below */
@media (max-width: 1024px) {
  .hero {
    flex-direction: column-reverse;
    text-align: center;
    gap: 2rem;
    padding: 2rem 1rem;
  }
  .logo-container { justify-content: center; }
  .hero-text     { text-align: center; }
}

/* Mobile phones */
@media (max-width: 600px) {
  .hero-text h1 { font-size: 1.8rem; }
  .hero-text p  { font-size: 1rem;  }

  .logo { max-width: 200px; }

  .social-links { gap: 1.5rem; }
  .social-item  { width: 70px;   }

  .label { font-size: 0.75rem; }
}