*{box-sizing:border-box}
:root{
  --bg:#030b16;
  --line:rgba(94,180,255,.58);
  --text:#f4f8ff;
  --muted:#bac7d8;
  --blue:#169fff;
}
html,body{margin:0;min-height:100%;background:var(--bg);font-family:Arial,Helvetica,sans-serif;color:var(--text)}
body{overflow-x:hidden}
button,a{font:inherit}
.hero{
  min-height:100vh;
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-rows:auto 1fr auto auto;
  background:
    linear-gradient(180deg,rgba(1,5,12,.26) 0%,rgba(2,8,17,.02) 40%,rgba(2,8,17,.42) 78%,#030b16 100%),
    url("assets/earth-network.jpg") center/cover no-repeat;
}
.hero::after{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 50% 47%,transparent 0 26%,rgba(2,8,17,.04) 48%,rgba(2,8,17,.24) 100%);
}
.topbar,.center,.tiles,.footer{position:relative;z-index:2}
.topbar{
  height:84px;display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(24px,4vw,74px);
  background:linear-gradient(180deg,rgba(1,5,12,.55),rgba(1,5,12,0));
}
.brand img{width:clamp(150px,15vw,235px);display:block}
.top-actions{display:flex;align-items:center;gap:18px}
.languages{display:flex;align-items:center;gap:9px}
.lang{
  background:none;border:0;color:#cdd8e7;cursor:pointer;padding:8px 2px;
  display:flex;gap:7px;align-items:center;letter-spacing:.08em;font-size:13px
}
.lang span{font-size:15px}
.lang.active{color:#fff}
.lang.active b{border-bottom:2px solid var(--blue);padding-bottom:6px}
.sep{opacity:.35}
.icon-btn{
  width:42px;height:42px;border:0;background:transparent;color:#eaf4ff;
  display:grid;place-items:center;cursor:pointer;opacity:.92
}
.icon-btn svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

.center{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:24px 20px 14px;
  transform:translateY(-10px);
}
.eyebrow{
  margin:0 0 18px;
  font-size:clamp(12px,1.1vw,18px);
  font-weight:400;
  letter-spacing:.48em;
  color:rgba(239,246,255,.88);
  text-align:center;
}
.main-logo{
  width:clamp(270px,32vw,520px);
  max-height:310px;
  object-fit:contain;
  filter:drop-shadow(0 0 18px rgba(80,169,255,.14));
}

.tiles{
  width:min(1280px,92vw);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  padding:0 0 18px;
}
.tile{
  height:124px;
  position:relative;overflow:hidden;
  border:1px solid rgba(117,176,230,.42);
  text-decoration:none;color:white;
  background:rgba(3,11,22,.75);
  box-shadow:inset 0 -1px 0 rgba(20,160,255,.25);
}
.tile img{width:100%;height:100%;object-fit:cover;filter:saturate(.72) brightness(.74);transition:.35s ease}
.tile .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,8,17,.08),rgba(2,8,17,.82))}
.tile-title{
  position:absolute;left:18px;bottom:17px;
  font-size:13px;letter-spacing:.20em;font-weight:600
}
.arrow{
  position:absolute;right:16px;bottom:13px;font-size:25px;font-weight:200;color:#dff3ff;
  transition:.3s ease
}
.tile::after{
  content:"";position:absolute;left:18px;bottom:9px;width:34px;height:2px;background:#21b5ff
}
.tile:hover img{transform:scale(1.035);filter:saturate(.9) brightness(.84)}
.tile:hover .arrow{transform:translateX(4px);color:#25baff}

.footer{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px clamp(24px,4vw,70px) 20px;
  color:rgba(204,218,236,.48);
  font-size:10px;letter-spacing:.28em;
}
.footer i{font-style:normal;color:#1bafff;margin:0 7px}

.drawer{
  position:fixed;z-index:20;top:0;right:0;height:100vh;width:min(380px,86vw);
  background:rgba(3,10,20,.98);border-left:1px solid rgba(75,154,220,.28);
  transform:translateX(105%);transition:.28s ease;padding:95px 38px 40px;
}
.drawer.open{transform:translateX(0)}
.drawer nav{display:flex;flex-direction:column}
.drawer a{
  color:#eef6ff;text-decoration:none;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.08);
  font-size:18px;letter-spacing:.04em
}
.close{
  position:absolute;top:22px;right:25px;border:0;background:none;color:white;font-size:36px;cursor:pointer
}
.backdrop{
  position:fixed;z-index:19;inset:0;background:rgba(0,0,0,.5);
  opacity:0;pointer-events:none;transition:.25s ease
}
.backdrop.show{opacity:1;pointer-events:auto}

@media (max-width:900px){
  .hero{grid-template-rows:auto 1fr auto auto}
  .topbar{height:72px;padding:14px 18px}
  .brand img{width:145px}
  .languages .lang b,.sep{display:none}
  .top-actions{gap:7px}
  .center{padding-top:8px;transform:none}
  .eyebrow{letter-spacing:.3em;margin-bottom:12px}
  .main-logo{width:min(70vw,390px)}
  .tiles{grid-template-columns:repeat(2,1fr);gap:10px;width:94vw}
  .tile{height:112px}
  .footer{font-size:8px;letter-spacing:.16em;padding:8px 14px 16px}
}
@media (max-width:520px){
  .hero{min-height:100svh}
  .topbar{align-items:flex-start}
  .brand img{width:132px}
  .icon-btn{width:34px;height:34px}
  .icon-btn svg{width:24px}
  .center{justify-content:center;padding:16px 16px 18px}
  .eyebrow{font-size:10px;letter-spacing:.25em;line-height:1.7}
  .main-logo{width:78vw}
  .tiles{grid-template-columns:1fr 1fr}
  .tile{height:98px}
  .tile-title{font-size:10px;left:12px;bottom:15px;letter-spacing:.14em}
  .tile::after{left:12px;width:26px}
  .arrow{right:10px;font-size:20px}
  .footer span:first-child{display:none}
}