/* ============================================================================
   EGIS — Landing Gateway · Design Tokens
   Palette sampled from the EGIS logos (gold + silver + leaf-green on black).
   Vanilla CSS, no framework — matches the "super intelligent HTML" mandate.
   ========================================================================== */
:root {
  /* Brand */
  --gold:        #F2C200;
  --gold-lt:     #FBDB4A;
  --gold-deep:   #C8960A;
  --silver:      #D9DEE4;
  --silver-dim:  #9AA3AD;
  --green:       #56B033;
  --green-deep:  #2F7D1E;
  --lime:        #8CC63E;

  /* Surfaces */
  --black:       #050506;
  --ink:         #0C0D10;
  --ink-2:       #121419;
  --ink-3:       #1A1D24;
  --line:        rgba(255,255,255,.10);
  --line-strong: rgba(242,194,0,.35);

  /* Text */
  --white:       #F6F7F9;
  --muted:       #AEB4BE;
  --faint:       #6E7681;

  /* Effects */
  --glass:       rgba(255,255,255,.045);
  --glass-2:     rgba(255,255,255,.07);
  --glow-gold:   0 0 60px rgba(242,194,0,.35);
  --glow-green:  0 0 50px rgba(86,176,51,.30);
  --grad-sun:    radial-gradient(circle at 50% 38%, rgba(242,194,0,.28), rgba(242,194,0,0) 55%);
  --grad-brand:  linear-gradient(100deg, var(--gold), var(--lime) 55%, var(--green));
  --grad-metal:  linear-gradient(180deg, var(--gold-lt), var(--gold) 45%, var(--silver) 46%, var(--silver-dim));

  /* Type */
  --f-display: "Syne", "Segoe UI", system-ui, sans-serif;
  --f-head:    "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --f-body:    "Inter", "Segoe UI", system-ui, sans-serif;
  --f-mono:    "JetBrains Mono", "Consolas", monospace;

  /* Motion */
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --dur:       .8s;

  /* Layout */
  --maxw: 1200px;
  --pad:  clamp(20px, 5vw, 80px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  background: var(--black);
  color: var(--white);
  font-family: var(--f-body);
  line-height: 1.6;
  overflow-x: hidden;
}
body.locked { overflow: hidden; height: 100vh; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

::selection { background: var(--gold); color: #000; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--gold), var(--green)); border-radius: 10px; }

/* ---- Typographic helpers ------------------------------------------------ */
.kicker {
  font-family: var(--f-mono);
  font-size: .74rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}
.display {
  font-family: var(--f-display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.02em;
}
.metal-text {
  background: var(--grad-metal);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.brand-text {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  --b: var(--gold);
  display: inline-flex; align-items: center; gap: .7em;
  font-family: var(--f-head); font-weight: 600;
  font-size: .82rem; letter-spacing: .22em; text-transform: uppercase;
  padding: 1.05em 2.4em;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  color: var(--white);
  background: var(--glass);
  backdrop-filter: blur(8px);
  cursor: pointer;
  position: relative; overflow: hidden;
  transition: color .5s var(--ease), border-color .5s var(--ease), transform .4s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--grad-brand);
  transform: translateY(101%);
  transition: transform .5s var(--ease-out);
}
.btn:hover { color: #071206; border-color: transparent; transform: translateY(-2px); }
.btn:hover::before { transform: translateY(0); }
.btn .arrow { transition: transform .4s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

.btn-ghost {
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .3em;
  text-transform: uppercase; color: var(--gold);
  display: inline-flex; align-items: center; gap: .6em;
  padding-bottom: 4px; border-bottom: 1px solid transparent;
  transition: border-color .4s, gap .4s;
}
.btn-ghost:hover { border-color: var(--gold); gap: 1em; }

/* ---- Reveal-on-scroll --------------------------------------------------- */
[data-reveal] {
  opacity: 0; transform: translateY(38px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal="right"] { transform: translateX(-42px); }
[data-reveal="left"]  { transform: translateX(42px); }
[data-reveal="right"].in, [data-reveal="left"].in { transform: none; }
[data-delay="1"] { transition-delay: .12s; }
[data-delay="2"] { transition-delay: .24s; }
[data-delay="3"] { transition-delay: .36s; }
[data-delay="4"] { transition-delay: .48s; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
}