:root{
  --c1:#1864B5;
  --c2:#16589D;
  --c3:#0E4680;
  --c4:#08345F;
  --c5:#001C4A;
  --c6:#001134;
  --g1:#3D4A66;
  --g2:#5D687E;
  --g3:#7B8598;
  --g4:#959CAA;
  --text:#eef4fb;
  --muted:#b9c4d4;
  --line:rgba(255,255,255,.10);
  --panel:rgba(255,255,255,.05);
  --panel-2:rgba(255,255,255,.03);
  --accent:#6ec1ff;
  --accent2:#dcecff;
  --shadow:0 20px 50px rgba(0,0,0,.28);
  --radius:22px;
  --mouse-x:50%;
  --mouse-y:50%;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  color:var(--text);
  overflow-x:hidden;
  background:
    radial-gradient(circle at 15% 0%, rgba(24,100,181,.20), transparent 30%),
    radial-gradient(circle at 85% 10%, rgba(93,104,126,.12), transparent 30%),
    linear-gradient(180deg, #061225 0%, #04101e 45%, #020816 100%);
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    radial-gradient(circle at 20% 30%, rgba(110,193,255,.12), transparent 25%),
    radial-gradient(circle at 80% 20%, rgba(110,193,255,.08), transparent 30%),
    radial-gradient(circle at 50% 80%, rgba(110,193,255,.06), transparent 35%);
  background-size:
    44px 44px,
    44px 44px,
    120% 120%,
    140% 140%,
    160% 160%;
  opacity:.22;
  animation:
    gridMove 24s linear infinite,
    atmosphereShift 18s ease-in-out infinite alternate;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1;
  background:
    radial-gradient(
      circle 320px at var(--mouse-x) var(--mouse-y),
      rgba(110,193,255,.12),
      transparent 70%
    );
}

@keyframes gridMove{
  from{transform:translateY(0)}
  to{transform:translateY(44px)}
}

@keyframes atmosphereShift{
  0%{
    transform:translate3d(0,0,0) scale(1);
    opacity:.18;
  }
  100%{
    transform:translate3d(0,-14px,0) scale(1.04);
    opacity:.28;
  }
}

.page{
  position:relative;
  z-index:2;
}

.topbar{
  position:sticky;
  top:0;
  z-index:100;
  backdrop-filter:blur(14px);
  background:rgba(5,13,27,.70);
  border-bottom:1px solid var(--line);
}

.topbar-inner{
  max-width:1200px;
  margin:0 auto;
  padding:14px 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:700;
  letter-spacing:.8px;
}

.brand-mark{
  width:12px;
  height:12px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--accent),white);
  box-shadow:0 0 18px rgba(110,193,255,.45);
}

.brand.fec .brand-mark{
  width:auto;
  height:auto;
  border-radius:0;
  background:none;
  box-shadow:none;
  font-size:18px;
  font-weight:800;
  letter-spacing:1.4px;
  color:var(--accent2);
}

.nav{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.nav a{
  text-decoration:none;
  color:var(--muted);
  padding:10px 14px;
  border-radius:10px;
  font-size:14px;
  transition:.2s;
}

.nav a:hover,
.nav a.active{
  color:white;
  background:rgba(255,255,255,.06);
}

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

.hero{
  min-height:90vh;
  display:flex;
  align-items:center;
  padding:72px 20px;
}

.hero-inner{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:24px;
  align-items:center;
}

.hero-card,
.info-card,
.card,
.split-card{
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.hero-card{
  padding:34px;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:18px;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--muted);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:1px;
  background:rgba(255,255,255,.04);
}

.eyebrow::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:999px;
  background:var(--accent);
  box-shadow:0 0 14px rgba(110,193,255,.4);
}

h1{
  margin:0;
  font-size:clamp(42px, 7vw, 82px);
  line-height:1;
  letter-spacing:-2px;
}

h2{
  margin:0 0 12px;
  font-size:clamp(30px,4vw,48px);
  letter-spacing:-1px;
}

.highlight{
  background:linear-gradient(90deg, white 0%, #c7e8ff 30%, #7ec6ff 70%, #dcecff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.lead{
  margin-top:22px;
  max-width:760px;
  color:var(--muted);
  line-height:1.75;
  font-size:18px;
}

.buttons{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:30px;
}

.btn{
  text-decoration:none;
  display:inline-block;
  padding:14px 18px;
  border-radius:12px;
  font-weight:700;
  transition:.2s;
  border:1px solid var(--line);
}

.btn-primary{
  color:#061120;
  background:linear-gradient(90deg, #dcecff, #6ec1ff);
  box-shadow:0 10px 28px rgba(110,193,255,.24);
}

.btn-secondary{
  color:var(--text);
  background:rgba(255,255,255,.05);
}

.btn:hover{
  transform:translateY(-2px);
}

.hero-stack{
  display:grid;
  gap:14px;
}

.info-card{
  padding:22px;
}

.info-card small{
  display:block;
  color:var(--g4);
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:8px;
  font-size:12px;
}

.info-card strong{
  display:block;
  font-size:28px;
  margin-bottom:8px;
}

.info-card span{
  color:var(--muted);
  line-height:1.7;
  font-size:15px;
}

section{
  padding:90px 20px;
}

.section-head{
  margin-bottom:34px;
  text-align:center;
}

.section-head p{
  max-width:760px;
  margin:0 auto;
  color:var(--muted);
  line-height:1.75;
  font-size:17px;
}

.grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
}

.card{
  padding:24px;
  transition:.22s;
}

.card:hover{
  transform:translateY(-4px);
  border-color:rgba(110,193,255,.34);
  box-shadow:0 18px 38px rgba(0,0,0,.24);
}

.card h3{
  margin:0 0 10px;
  font-size:21px;
  color:#e5f4ff;
}

.card p{
  margin:0;
  color:var(--muted);
  line-height:1.75;
}

.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.split-card{
  padding:24px;
}

.split-card h3{
  margin:0 0 12px;
  font-size:22px;
}

.split-card p{
  color:var(--muted);
  line-height:1.75;
  margin:0;
}

.gateway{
  min-height:100vh;
  display:flex;
  align-items:center;
  padding:40px 20px;
}

.gateway-top{
  text-align:center;
  margin-bottom:34px;
}

.gateway-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  align-items:stretch;
}

.gateway-panel{
  position:relative;
  overflow:hidden;
  min-height:420px;
  padding:32px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  text-decoration:none;
  color:inherit;
  border:1px solid var(--line);
  border-radius:24px;
  transform-origin:center center;
  transition:
    transform .35s ease,
    opacity .35s ease,
    filter .35s ease,
    box-shadow .35s ease,
    border-color .35s ease,
    background .35s ease;
  box-shadow:var(--shadow);
  will-change:transform, opacity, filter, box-shadow, border-color, background;
}

.gateway-panel > *{
  position:relative;
  z-index:2;
  transition:
    transform .35s ease,
    opacity .35s ease;
}

.gateway-panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.05), transparent 35%),
    linear-gradient(180deg, transparent, rgba(255,255,255,.03));
}

.gateway-panel::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  transition:opacity .35s ease;
  background:
    radial-gradient(circle at 50% 50%, rgba(110,193,255,.22), transparent 58%);
}

.gateway-panel.gaming{
  background:
    radial-gradient(circle at 20% 10%, rgba(24,100,181,.30), transparent 35%),
    linear-gradient(180deg, rgba(8,52,95,.90), rgba(0,17,52,.95));
}

.gateway-panel.tech{
  background:
    radial-gradient(circle at 80% 0%, rgba(149,156,170,.12), transparent 30%),
    linear-gradient(180deg, rgba(14,70,128,.75), rgba(1,17,52,.96));
  border-color:rgba(110,193,255,.25);
  box-shadow:0 28px 70px rgba(0,0,0,.38);
}

.gateway-tag{
  position:relative;
  z-index:1;
  display:inline-block;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--muted);
  background:rgba(255,255,255,.04);
  margin-bottom:20px;
}

.gateway-panel h2{
  position:relative;
  z-index:1;
  margin:0 0 14px;
  line-height:1.04;
}

.gateway-panel p{
  position:relative;
  z-index:1;
  margin:0;
  color:#d4deeb;
  line-height:1.8;
  font-size:16px;
  max-width:520px;
}

.gateway-footer{
  position:relative;
  z-index:1;
  margin-top:28px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}

.gateway-enter{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 18px;
  border-radius:12px;
  font-weight:700;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
  color:white;
  transition:
    transform .3s ease,
    background .3s ease,
    border-color .3s ease;
}

.gateway-note{
  font-size:13px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:1px;
}

.footer{
  padding:40px 20px 60px;
  text-align:center;
  border-top:1px solid var(--line);
  color:var(--g4);
  font-size:14px;
}

.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .6s ease, transform .6s ease;
}

.reveal.in-view{
  opacity:1;
  transform:translateY(0);
}

.gateway-hero{
  position:relative;
  z-index:2;
}

.gateway-divider{
  width:120px;
  height:1px;
  margin:30px auto 0;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(110,193,255,.6),
    transparent
  );
}

/* PURE CSS PORTAL HOVER */
.gateway-grid:hover .gateway-panel{
  opacity: .45 !important;
  filter: saturate(.70) brightness(.68) !important;
  transform: scale(.92) !important;
  box-shadow: 0 10px 20px rgba(0,0,0,.18) !important;
}

.gateway-grid .gateway-panel:hover{
  opacity: 1 !important;
  filter: saturate(1.2) brightness(1.12) !important;
  transform: translateY(-22px) scale(1.08) !important;
  border-color: rgba(110,193,255,.60) !important;
  box-shadow: 0 42px 110px rgba(0,0,0,.55) !important;
  z-index: 5;
}

.gateway-grid .gateway-panel:hover::after{
  opacity: 1 !important;
}

.gateway-grid .gateway-panel:hover > *{
  transform: translateY(-8px) !important;
}

.gateway-grid .gateway-panel:hover .gateway-enter{
  transform: translateX(10px) !important;
  background: rgba(255,255,255,.18) !important;
  border-color: rgba(255,255,255,.24) !important;
}

.gateway-grid .gateway-panel.gaming:hover{
  background:
    radial-gradient(circle at 20% 10%, rgba(24,100,181,.60), transparent 35%),
    linear-gradient(180deg, rgba(8,52,95,1), rgba(0,17,52,1)) !important;
}

.gateway-grid .gateway-panel.tech:hover{
  background:
    radial-gradient(circle at 80% 0%, rgba(149,156,170,.24), transparent 30%),
    radial-gradient(circle at 60% 20%, rgba(110,193,255,.28), transparent 32%),
    linear-gradient(180deg, rgba(14,70,128,1), rgba(1,17,52,1)) !important;
}