/* ============================================================
   MEA ASSISTANT V2 — STYLESHEET
   Mobile-first. MEA DNA intact. Cloudflare modern nav.
   ============================================================

   SECTION INDEX
   ─────────────
   1.  TOKENS & RESET
   2.  BASE
   3.  HERO BACKGROUND
   4.  NAVBAR  (mobile-first, hide/show, dropdown)
   5.  HERO SECTION
   6.  BUTTONS
   7.  PLATFORM CARDS
   8.  STATUS SECTION
   9.  CTA SECTION
   10. FOOTER
   11. SCROLL ANIMATIONS
   12. RESPONSIVE — tablet / desktop
   13. REDUCED MOTION
   ============================================================ */


/* ─────────────────────────────────────────────────────────
   1. TOKENS & RESET
───────────────────────────────────────────────────────── */
:root {
  /* Colors */
  --clr-bg      : #050505;
  --clr-card    : #0f0f0f;
  --clr-red     : #C41E3A;
  --clr-red-dim : #8B0000;
  --clr-white   : #F0EDE8;
  --clr-grey    : #9A9690;
  --clr-border  : rgba(255,255,255,0.07);

  /* Typography */
  --f-display : 'Bebas Neue', sans-serif;
  --f-body    : 'Cormorant Garamond', serif;
  --f-mono    : 'Space Mono', monospace;

  /* Motion */
  --ease      : cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --t-fast    : 0.22s var(--ease);
  --t-med     : 0.38s var(--ease);

  /* Nav height — used for scroll-padding */
  --nav-h     : 60px;

  /* Fallback bg gradient */
  --bg-fallback:
    radial-gradient(ellipse 70% 55% at 60% 35%, rgba(196,30,58,0.16), transparent 65%),
    linear-gradient(160deg, #0A0000 0%, var(--clr-bg) 45%, #0D0000 100%);
}

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

html {
  scroll-behavior    : smooth;
  scroll-padding-top : var(--nav-h);
  overflow-x         : hidden;
}


/* ─────────────────────────────────────────────────────────
   2. BASE
───────────────────────────────────────────────────────── */
body {
  background   : var(--clr-bg);
  color        : var(--clr-white);
  font-family  : var(--f-body);
  font-size    : 16px;
  line-height  : 1.7;
  overflow-x   : hidden;
  min-height   : 100vh;
  -webkit-overflow-scrolling: touch;
}

img { display: block; max-width: 100%; }
a   { color: inherit; text-decoration: none; }
ul  { list-style: none; }

/* Thin red scrollbar */
::-webkit-scrollbar       { width: 3px; }
::-webkit-scrollbar-track { background: var(--clr-bg); }
::-webkit-scrollbar-thumb { background: var(--clr-red); }

.container {
  width      : 100%;
  max-width  : 1200px;
  margin     : 0 auto;
  padding    : 0 1.25rem;
}

/* Grain overlay — GPU-isolated, no repaint cost */
.grain {
  position         : fixed;
  inset            : 0;
  z-index          : 9000;
  pointer-events   : none;
  opacity          : 0.025;
  will-change      : transform;
  background-image : url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size  : 200px;
  animation        : grain-shift 0.2s steps(1) infinite;
}
@keyframes grain-shift {
  0%   { transform: translate(0,0);    }
  25%  { transform: translate(-3%,2%); }
  50%  { transform: translate(2%,-3%); }
  75%  { transform: translate(3%,1%);  }
  100% { transform: translate(-1%,3%); }
}


/* ─────────────────────────────────────────────────────────
   3. HERO BACKGROUND
   Layer order: fallback gradient → image → overlay
───────────────────────────────────────────────────────── */
.hero-bg {
  position : fixed;
  inset    : 0;
  z-index  : -10;
  overflow : hidden;
  /* Fallback shows immediately — no white flash */
  background : var(--bg-fallback);
}

/* Image — src injected by JS. Fades in when loaded */
.hero-bg-img {
  position   : absolute;
  inset      : 0;
  width      : 100%;
  height     : 100%;
  object-fit : cover;
  filter     : brightness(0.38) contrast(1.15);
  transform  : scale(1.06);
  opacity    : 0;
  transition : opacity 0.7s var(--ease);
}
.hero-bg-img.is-loaded { opacity: 1; }

/* Dark overlay + red accent on top of image */
.hero-bg::after {
  content  : "";
  position : absolute;
  inset    : 0;
  background :
    radial-gradient(circle at top left,     rgba(196,30,58,0.18), transparent 35%),
    radial-gradient(circle at bottom right, rgba(196,30,58,0.12), transparent 40%),
    linear-gradient(rgba(5,5,5,0.55), rgba(5,5,5,0.93));
}


/* ─────────────────────────────────────────────────────────
   4. NAVBAR
   Mobile-first: starts collapsed. Toggle shows slide-down panel.
   Desktop (≥ 768px): inline row with dropdowns.
───────────────────────────────────────────────────────── */

/* ── Shell ── */
.nav {
  position    : fixed;
  top         : 0;
  left        : 0;
  right       : 0;
  z-index     : 1000;
  height      : var(--nav-h);
  display     : flex;
  align-items : center;
  padding     : 0 1.25rem;
  /* Cloudflare-style: no blur, just a clean solid border */
  background  : rgba(5,5,5,0.92);
  border-bottom : 1px solid var(--clr-border);
  transition  : background var(--t-med), border-color var(--t-med);
}

/* Scrolled state — slightly darker */
.nav.scrolled {
  background    : rgba(3,0,0,0.97);
  border-color  : rgba(196,30,58,0.2);
}

/* ── Logo (always visible top-right) ── */
.nav-logo {
  font-family    : var(--f-display);
  font-size      : 1.75rem;
  letter-spacing : 0.12em;
  color          : var(--clr-red);
  flex-shrink    : 0;
  /* Push logo to right on mobile using margin-left auto */
  margin-left    : auto;
  order          : 2;
}

/* ── Hamburger toggle (mobile) ── */
.nav-toggle {
  order       : 1;
  display     : flex;
  flex-direction : column;
  gap         : 5px;
  background  : none;
  border      : none;
  cursor      : pointer;
  padding     : 8px;
  /* Optical touch area */
  touch-action: manipulation;
  margin-right: auto;
}
.nav-toggle span {
  display    : block;
  width      : 22px;
  height     : 1px;
  background : var(--clr-white);
  transition : transform var(--t-fast), opacity var(--t-fast);
}
/* Animate to ✕ */
.nav-toggle.open span:nth-child(1) { transform: rotate(45deg)  translate(4px, 4px); }
.nav-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(4px, -4px); }

/* ── Mobile nav panel ── */
.nav-links {
  /* Slide down from under navbar */
  position   : fixed;
  top        : var(--nav-h);
  left       : 0;
  right      : 0;
  background : #060003;
  border-bottom : 1px solid rgba(196,30,58,0.2);
  padding    : 0;
  max-height : 0;
  overflow   : hidden;
  transition : max-height var(--t-med), padding var(--t-fast);
  z-index    : 999;
  display    : flex;
  flex-direction : column;
  /* Prevent display from being set to flex until open — use max-height */
}
.nav-links.open {
  max-height : 80vh;
  overflow-y : auto;
  padding    : 0.5rem 0 1rem;
}

/* ── Nav items ── */
.nav-item {
  border-bottom : 1px solid var(--clr-border);
}
.nav-item:last-child { border-bottom: none; }

/* Shared style: button trigger + direct link */
.nav-btn,
.nav-direct {
  display      : flex;
  align-items  : center;
  justify-content: space-between;
  width        : 100%;
  padding      : 0.85rem 1.25rem;
  font-family  : var(--f-mono);
  font-size    : 0.7rem;
  letter-spacing : 0.2em;
  text-transform : uppercase;
  color        : var(--clr-grey);
  transition   : color var(--t-fast), background var(--t-fast);
  cursor       : pointer;
}
/* Button reset */
.nav-btn {
  background : none;
  border     : none;
  outline    : none;
  -webkit-appearance: none;
  -webkit-font-smoothing: antialiased;
}

.nav-btn:hover,
.nav-direct:hover,
.nav-btn:focus-visible,
.nav-direct:focus-visible {
  color       : var(--clr-white);
  background  : rgba(196,30,58,0.06);
}

/* Chevron SVG */
.nav-chevron {
  flex-shrink : 0;
  transition  : transform var(--t-fast);
  opacity     : 0.5;
  stroke      : currentColor;
}
.has-dropdown.open .nav-chevron { transform: rotate(180deg); }

/* ── Dropdown panel (mobile: accordion) ── */
.nav-dropdown {
  background  : rgba(196,30,58,0.04);
  max-height  : 0;
  overflow    : hidden;
  transition  : max-height var(--t-med);
  border-top  : 1px solid var(--clr-border);
}
.has-dropdown.open .nav-dropdown { max-height: 400px; }

.nav-dropdown a {
  display        : block;
  padding        : 0.75rem 1.75rem;
  font-family    : var(--f-mono);
  font-size      : 0.65rem;
  letter-spacing : 0.18em;
  text-transform : uppercase;
  color          : var(--clr-grey);
  border-bottom  : 1px solid var(--clr-border);
  transition     : color var(--t-fast), padding-left var(--t-fast);
}
.nav-dropdown li:last-child a { border-bottom: none; }
.nav-dropdown a:hover {
  color        : var(--clr-white);
  padding-left : 2.1rem;
}


/* ─────────────────────────────────────────────────────────
   5. HERO SECTION
───────────────────────────────────────────────────────── */
.hero {
  min-height      : 100vh;
  padding         : calc(var(--nav-h) + 3rem) 1.25rem 4rem;
  display         : flex;
  flex-direction  : column;
  justify-content : center;
  position        : relative;
}

/* Decorative watermark — scaled for mobile */
.hero::before {
  content        : "ASSISTANT";
  position       : absolute;
  right          : -10px;
  top            : 50%;
  transform      : translateY(-50%);
  font-family    : var(--f-display);
  font-size      : clamp(5rem, 22vw, 20rem);
  color          : rgba(255,255,255,0.03);
  pointer-events : none;
  user-select    : none;
  white-space    : nowrap;
}

/* Eyebrow label */
.hero-tag {
  font-family    : var(--f-mono);
  font-size      : 0.6rem;
  letter-spacing : 0.35em;
  color          : var(--clr-red);
  margin-bottom  : 1.25rem;
  text-transform : uppercase;
}

/* Main heading */
.hero h1 {
  font-family : var(--f-display);
  font-size   : clamp(5rem, 20vw, 12rem);
  line-height : 0.85;
}
.hero h1 .outline {
  display              : block;
  color                : transparent;
  -webkit-text-stroke  : 1px rgba(255,255,255,0.3);
}

/* Subtext */
.hero-desc {
  margin-top  : 1.25rem;
  max-width   : 500px;
  font-size   : clamp(0.95rem, 2.5vw, 1.15rem);
  line-height : 1.9;
  color       : var(--clr-grey);
  white-space : pre-line;
}

/* CTA buttons row */
.hero-btns {
  display   : flex;
  gap       : 0.85rem;
  margin-top: 2.25rem;
  flex-wrap : wrap;
}

/* Scroll indicator */
.scroll-cue {
  position    : absolute;
  bottom      : 2rem;
  left        : 1.25rem;
  display     : flex;
  flex-direction: column;
  align-items : flex-start;
  gap         : 0.4rem;
}
.scroll-line {
  display    : block;
  width      : 1px;
  height     : 36px;
  background : linear-gradient(to bottom, var(--clr-red), transparent);
  animation  : pulse 2.5s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.15; } }
.scroll-label {
  font-family    : var(--f-mono);
  font-size      : 0.5rem;
  letter-spacing : 0.3em;
  color          : var(--clr-grey);
}


/* ─────────────────────────────────────────────────────────
   6. BUTTONS
───────────────────────────────────────────────────────── */
.btn {
  padding         : 0.85rem 1.5rem;
  border          : 1px solid var(--clr-red);
  font-family     : var(--f-mono);
  font-size       : 0.65rem;
  letter-spacing  : 0.2em;
  text-transform  : uppercase;
  cursor          : pointer;
  transition      : transform var(--t-fast), background var(--t-fast);
  display         : inline-flex;
  align-items     : center;
  touch-action    : manipulation;
}
.btn-primary {
  background : var(--clr-red);
  color      : #fff;
}
.btn-secondary {
  background : transparent;
  color      : var(--clr-white);
}
.btn:hover  { transform: translateY(-3px); }
.btn-secondary:hover { background: rgba(196,30,58,0.1); }


/* ─────────────────────────────────────────────────────────
   7. PLATFORM CARDS
───────────────────────────────────────────────────────── */
.platform {
  padding : 5rem 0;
}

/* Section heading block */
.section-head {
  margin-bottom : 2.5rem;
}
.section-label {
  font-family    : var(--f-mono);
  font-size      : 0.6rem;
  letter-spacing : 0.3em;
  color          : var(--clr-red);
  text-transform : uppercase;
  margin-bottom  : 0.6rem;
}
.section-title {
  font-family : var(--f-display);
  font-size   : clamp(2.5rem, 8vw, 5rem);
  line-height : 0.95;
}

/* Card grid — single col on mobile */
.cards {
  display               : grid;
  grid-template-columns : 1fr;
  gap                   : 1rem;
}

/* Individual card */
.card {
  background  : rgba(255,255,255,0.025);
  border      : 1px solid var(--clr-border);
  padding     : 1.75rem;
  transition  : transform var(--t-fast), border-color var(--t-fast);
  contain     : content;
}
.card:hover {
  transform    : translateY(-5px);
  border-color : rgba(196,30,58,0.4);
}
/* Red top accent on hover */
.card::before {
  content    : "";
  display    : block;
  height     : 2px;
  background : var(--clr-red);
  transform  : scaleX(0);
  transform-origin: left;
  transition : transform var(--t-fast);
  margin-bottom: 1.25rem;
}
.card:hover::before { transform: scaleX(1); }

.card-icon {
  font-size     : 1.75rem;
  margin-bottom : 0.85rem;
}
.card h3 {
  font-family   : var(--f-display);
  font-size     : 1.5rem;
  letter-spacing: 0.04em;
  margin-bottom : 0.6rem;
}
.card p {
  font-size   : 0.9rem;
  line-height : 1.75;
  color       : var(--clr-grey);
}
.badge {
  display        : inline-block;
  margin-top     : 1rem;
  font-family    : var(--f-mono);
  font-size      : 0.6rem;
  letter-spacing : 0.15em;
  color          : var(--clr-red);
  text-transform : uppercase;
}
.badge.owner { color: #ff5b5b; }


/* ─────────────────────────────────────────────────────────
   8. STATUS SECTION
───────────────────────────────────────────────────────── */
.status {
  padding : 3rem 0 4rem;
  display : flex;
  flex-direction : column;
  gap     : 1rem;
}

.status-card {
  padding    : 1.5rem 1.75rem;
  background : rgba(255,255,255,0.02);
  border     : 1px solid var(--clr-border);
  /* Cloudflare-style: left red accent line */
  border-left: 2px solid var(--clr-red);
  display    : flex;
  align-items: center;
  gap        : 1.25rem;
}
.status-label {
  font-family    : var(--f-mono);
  font-size      : 0.55rem;
  letter-spacing : 0.25em;
  color          : var(--clr-grey);
  text-transform : uppercase;
  flex-shrink    : 0;
  min-width      : 80px;
}
.status-value {
  font-family    : var(--f-display);
  font-size      : clamp(1.5rem, 4vw, 2.2rem);
  letter-spacing : 0.04em;
}


/* ─────────────────────────────────────────────────────────
   9. CTA SECTION
───────────────────────────────────────────────────────── */
.cta {
  padding : 5rem 0 6rem;
}
.cta-inner {
  text-align : center;
  max-width  : 600px;
  margin     : 0 auto;
}
.cta h2 {
  font-family : var(--f-display);
  font-size   : clamp(2.75rem, 9vw, 5.5rem);
  line-height : 0.92;
  white-space : pre-line;
  margin-bottom: 1rem;
}
.cta p {
  font-size   : 1rem;
  color       : var(--clr-grey);
  margin-bottom: 2rem;
}
.cta .hero-btns { justify-content: center; }


/* ─────────────────────────────────────────────────────────
   10. FOOTER
───────────────────────────────────────────────────────── */
footer {
  padding      : 2.5rem 1.25rem;
  text-align   : center;
  border-top   : 1px solid var(--clr-border);
}
.footer-logo {
  font-family    : var(--f-display);
  font-size      : 1.5rem;
  letter-spacing : 0.15em;
  color          : var(--clr-red);
  display        : block;
  margin-bottom  : 0.5rem;
}
.footer-sub {
  font-family    : var(--f-mono);
  font-size      : 0.55rem;
  letter-spacing : 0.2em;
  color          : var(--clr-grey);
  text-transform : uppercase;
}


/* ─────────────────────────────────────────────────────────
   11. SCROLL ANIMATIONS
   Elements start invisible, JS adds .is-visible
───────────────────────────────────────────────────────── */
.reveal {
  opacity    : 0;
  transform  : translateY(36px);
  transition :
    opacity   0.65s var(--ease),
    transform 0.65s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity   : 1;
  transform : translateY(0);
}
.delay-1 { transition-delay: 0.08s; }
.delay-2 { transition-delay: 0.16s; }
.delay-3 { transition-delay: 0.24s; }


/* ─────────────────────────────────────────────────────────
   12. RESPONSIVE — tablet ≥ 600px
───────────────────────────────────────────────────────── */
@media (min-width: 600px) {

  .container { padding: 0 2rem; }

  .cards {
    grid-template-columns : repeat(2, 1fr);
  }

  .status { flex-direction: row; flex-wrap: wrap; }
  .status-card { flex: 1 1 calc(50% - 0.5rem); }

}


/* ─────────────────────────────────────────────────────────
   12b. RESPONSIVE — desktop ≥ 768px
   Nav switches to inline horizontal row
───────────────────────────────────────────────────────── */
@media (min-width: 768px) {

  :root { --nav-h: 64px; }

  .container { padding: 0 2.5rem; }

  /* ── Desktop nav: inline row ── */
  .nav { padding: 0 2.5rem; }
  .nav-toggle { display: none; }

  .nav-logo {
    order       : 1;
    margin-left : 0;
    margin-right: auto; /* Push links to right */
  }

  /* Nav links: horizontal inline */
  .nav-links {
    position    : static;
    max-height  : none;
    overflow    : visible;
    background  : none;
    border      : none;
    padding     : 0;
    flex-direction : row;
    align-items : center;
    gap         : 0.15rem;
    order       : 2;
    /* Cancel the slide-down transition on desktop */
    transition  : none;
  }

  .nav-item {
    border      : none;
    position    : relative;
  }

  .nav-btn,
  .nav-direct {
    padding     : 0.45rem 0.7rem;
    font-size   : 0.65rem;
    justify-content: flex-start;
    border-radius: 0;
  }
  .nav-btn:hover,
  .nav-direct:hover {
    background : rgba(196,30,58,0.08);
  }

  /* Desktop dropdown — absolute positioned */
  .nav-dropdown {
    position     : absolute;
    top          : calc(100% + 6px);
    left         : 50%;
    transform    : translateX(-50%) translateY(-4px);
    min-width    : 160px;
    background   : rgba(6,0,3,0.97);
    border       : 1px solid var(--clr-border);
    border-top   : 1px solid rgba(196,30,58,0.3);
    max-height   : 0;
    overflow     : hidden;
    padding      : 0;
    transition   : max-height var(--t-fast), transform var(--t-fast), opacity var(--t-fast);
    opacity      : 0;
    pointer-events: none;
    /* Arrow tip */
  }
  .nav-dropdown::before {
    content   : "";
    position  : absolute;
    top       : -5px;
    left      : 50%;
    transform : translateX(-50%) rotate(45deg);
    width     : 8px;
    height    : 8px;
    background: rgba(6,0,3,0.97);
    border-left : 1px solid rgba(196,30,58,0.3);
    border-top  : 1px solid rgba(196,30,58,0.3);
  }
  .has-dropdown.open .nav-dropdown {
    max-height     : 300px;
    opacity        : 1;
    pointer-events : auto;
    transform      : translateX(-50%) translateY(0);
  }

  .nav-dropdown a {
    padding       : 0.6rem 1.1rem;
    border-bottom : 1px solid var(--clr-border);
    font-size     : 0.62rem;
  }
  .nav-dropdown li:last-child a { border-bottom: none; }
  .nav-dropdown a:hover { padding-left: 1.4rem; }

  /* ── Layout upgrades ── */
  .hero {
    padding : calc(var(--nav-h) + 4rem) 2.5rem 5rem;
  }

  .cards { grid-template-columns: repeat(3, 1fr); }

  .status {
    flex-direction : row;
    flex-wrap      : nowrap;
  }
  .status-card {
    flex      : 1;
    flex-direction : column;
    align-items    : flex-start;
    gap            : 0.4rem;
    padding        : 2rem;
  }
  .status-label { min-width: unset; }
  .status-value { font-size: clamp(2rem, 3vw, 2.8rem); }

}


/* ─────────────────────────────────────────────────────────
   12c. RESPONSIVE — large ≥ 1024px
───────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .container { padding: 0 3rem; }

  .nav { padding: 0 3rem; }

  .hero { padding: calc(var(--nav-h) + 5rem) 3rem 6rem; }

  .platform { padding: 7rem 0; }
  .status   { padding: 4rem 0 5rem; }
  .cta      { padding: 7rem 0 8rem; }
}


/* ─────────────────────────────────────────────────────────
   13. REDUCED MOTION
───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration     : 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration    : 0.01ms !important;
    scroll-behavior        : auto   !important;
  }
  .grain { animation: none; }
  .reveal { opacity: 1; transform: none; }
}