/* =========================================
   GLOBAL RESET & BASE
   ========================================= */

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

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;   /* ✅ key fix */
  overflow: hidden;         /* ✅ no scroll bar */
  background: #f8fafc;
  font-family: "Georgia", serif;
  color: #0f172a;
}

/* =========================================
   DESIGN CONTROL VARIABLES
   ========================================= */

:root {
  --hero-radius: 48px;
  --hero-width: 86vw;
  --hero-max-width: 1720px;
  --hero-top-gap: 2.1vh;
  --hero-height: 26vh;
  --footer-height: 42px;
}

/* =========================================
   MAIN LAYOUT
   ========================================= */

main {
  flex: 1;                 /* ✅ occupies remaining space */
  display: flex;
  flex-direction: column;
}

/* =========================================
   HERO – ROUNDED NEURAL NETWORK BOX
   ========================================= */

#hero {
  height: var(--hero-height);
  width: var(--hero-width);
  max-width: var(--hero-max-width);

  margin: var(--hero-top-gap) auto 3vh;

  position: relative;
  overflow: hidden;
  border-radius: var(--hero-radius);

  box-shadow:
    0 28px 65px rgba(0, 0, 0, 0.28);
}

/* Video */
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Overlay */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.55);
  z-index: 1;
}

/* Hero Text */
.hero-content {
  position: absolute;
  inset: 0;
  z-index: 2;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2rem;
}

.hero-title {
  font-size: 3.2rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #ffffff;

  text-shadow:
    0 0 6px rgba(255, 255, 255, 0.35),
    0 0 18px rgba(255, 244, 214, 0.25);
}

.hero-tagline {
  margin-top: 0.9rem;
  font-size: 1.05rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #d1d5db;
}

/* =========================================
   DOMAINS SECTION – AUTO-FIT (NO SCROLL)
   ========================================= */

#domains {
  flex: 1;                 /* ✅ fills remaining space */

  background:
    radial-gradient(
      circle at top center,
      rgba(255, 244, 214, 0.55),
      rgba(248, 250, 252, 0.96) 55%
    ),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f8fafc 100%
    );

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 0 6vw;
}



/* 🔧 GAP CONTROL BETWEEN LAST CARD & FOOTER */
:root {
  --footer-gap: 18px;   /* try 12px – 24px */
}

/* Adjust domains height to compensate */
#domains {
  height: calc(
    100vh
    - 26vh
    - var(--hero-top-gap)
    - 3vh
    - var(--footer-gap)
  );

  padding-bottom: var(--footer-gap);
}




/* Title */
.domains-title {
  text-align: center;
  font-size: 2rem;
  letter-spacing: 0.14em;
  margin-bottom: 2.6rem;
}

/* Grid */
.domains-grid {
  max-width: 1200px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 2.6rem 3rem;
}

/* =========================================
   DOMAIN CARDS
   ========================================= */

.domain-card {
  background: #ffffff;
  padding: 2rem 2.2rem;

  border-radius: 16px;
  text-align: center;

  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0f172a;

  border: 1.6px solid #0f172a;

  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.10);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border 0.25s ease,
    font-size 0.25s ease;
}

.domain-card:hover {
  transform: translateY(-6px);
  font-size: 1.12rem;
  border: 2.6px solid #000000;

  box-shadow:
    0 24px 52px rgba(0, 0, 0, 0.18);
}

.domain-center {
  grid-column: 2 / 3;
}



/* =========================================
   FOOTER – FINAL LOCKED ALIGNMENT (NO DRIFT)
   ========================================= */

.site-footer {
  height: 32px;                 /* compact + safe */
  padding: 0 3vw;

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;

  font-size: 0.78rem;
  letter-spacing: 0.08em;
  line-height: 1;               /* 🔒 prevents vertical shift */

  color: #475569;
  background: #f8fafc;

  border-top: 1px solid rgba(15, 23, 42, 0.18);
}

/* 🔒 COMMON LOCK */
.footer-left,
.footer-center,
.footer-right {
  display: flex;
  align-items: center;
  height: 100%;
  white-space: nowrap;          /* 🔒 prevents wrapping drift */
}

/* LEFT */
.footer-left {
  justify-self: start;
  gap: 1.6rem;
}

.footer-left a {
  text-decoration: none;
  color: #475569;
}

.footer-left a:hover {
  color: #0f172a;
}

/* CENTER */
.footer-center {
  justify-self: center;
  text-align: center;
  font-size: 0.78rem;
}

/* RIGHT — FINAL FIX */
.footer-right {
  justify-self: end;            /* 🔥 HARD RIGHT LOCK */
  text-align: right;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: #0f172a;
}


/* ================= DOMAIN LINK ================= */
.domain-link {
  text-decoration: none;
  color: inherit;
  display: inline-block;
}


/* Remove underline from domain links */
.domain-link {
  text-decoration: none;
  color: inherit;
  display: inline-block;
}


/* ================= DOMAIN CARD BASE ================= */
.domain-card {
  padding: 22px 28px;
  border: 2px solid #0d1b2a;
  border-radius: 14px;
  background-color: #ffffff;
  color: #0d1b2a;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-align: center;
  cursor: pointer;

  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.3s ease;
}

/* ================= HOVER ================= */
.domain-link:hover .domain-card {
  background-color: #1e1e1e;
  color: #ffffff;
  border-color: #1e1e1e;
  transform: translateY(-6px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25);
}

/* ================= CLICK (ACTIVE) ================= */
.domain-link:active .domain-card {
  background-color: #0f62fe;
  color: #ffffff;
  border-color: #0f62fe;
  transform: translateY(0);
  box-shadow: 0 8px 16px rgba(15, 98, 254, 0.4);
}

/* ================= KEYBOARD ACCESSIBILITY ================= */
.domain-link:focus-visible .domain-card {
  outline: none;
  box-shadow: 0 0 0 4px rgba(15, 98, 254, 0.35);
}

/* ================= OPTIONAL CENTER CARD ================= */
.domain-card.domain-center {
  margin-top: 10px;
}


.domain-link:hover,
.domain-link:focus,
.domain-link:active {
  text-decoration: none;
}



/* =========================================================
   STRUCTURAL & THERMAL PAGE — COMPACT HERO
   ========================================================= */

.structural-page #hero {
  height: 120px;              /* drastic reduction */
  min-height: 120px;
  border-radius: 28px;
  margin-top: 20px;
}

/* Video should still fill the smaller hero */
.structural-page .hero-video {
  height: 100%;
  object-fit: cover;
}

/* Center title vertically in compact hero */
.structural-page .hero-content {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Slightly smaller title for balance */
.structural-page .hero-title {
  font-size: 2.2rem;
  letter-spacing: 0.12em;
}