:root{
  --bg:#050a18;
  --panel:#0a1228;
  --muted:#9fb4d6;
  --accent:#4d8dff;
  --accent2:#6ad1ff;
  --radius:16px;
  --glass: rgba(255,255,255,0.05);
  --glass-strong: rgba(255,255,255,0.08);
  color-scheme: dark;
}

*{box-sizing:border-box;margin:0;padding:0;font-family:"Inter",sans-serif}
html,body{height:100%}
body{
  background:
    radial-gradient(circle at 15% 10%, rgba(77,141,255,.12), transparent 20%),
    radial-gradient(circle at 85% 90%, rgba(106,209,255,.07), transparent 25%),
    var(--bg);
  color:#e8eef8;
  padding-bottom:60px;
}

/* Navbar */
.navbar{
  display:flex;justify-content:space-between;align-items:center;
  gap:12px;padding:14px 28px;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,0.03);
  flex-wrap:wrap;
}
.navbar a{
  color:var(--accent);
  text-decoration:none;
  font-weight:700;
  font-size:16px;
  transition:0.2s;
}
.navbar a:hover{
  color:var(--accent2);
}

/* Latest Updates */
#latest-updates{
  padding:24px 36px;
}
#latest-updates h2{
  color: var(--accent);
  margin-bottom:12px;
  font-size:24px;
}
#updates-list{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:10px;
}
#updates-list li{
  background:var(--panel);
  padding:12px 16px;
  border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,0.4);
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity:0;
  transform: translateY(20px);
}
#updates-list li.visible{
  opacity:1;
  transform: translateY(0);
}
#updates-list li a{
  color: var(--accent2);
  text-decoration:none;
}

/* Companies Grid */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:26px;
  padding:36px;
}

/* Company Card */
.company-card{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,0.03);
  box-shadow:0 8px 26px rgba(2,8,20,0.6);
  transition: transform 0.35s cubic-bezier(.2,.9,.2,1), box-shadow .35s;
  cursor:default;position:relative;
  opacity:0; transform: translateY(20px);
}
.company-card.visible{opacity:1; transform: translateY(0);}
.company-card .thumb{
  height:140px; overflow:hidden; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,0.2);
}
.company-card .thumb img{
  max-height:100%; max-width:100%; object-fit:contain;
}
.company-card .content{
  padding:16px; display:flex; flex-direction:column; gap:8px;
}
.company-card h3{color:var(--accent); font-size:18px;}
.company-card p{color:var(--muted); font-size:14px;}

/* Buttons */
.company-card .links{
  margin-top:12px;
  display:flex; flex-wrap:wrap; gap:8px;
}
.company-card .links a{
  padding:6px 12px; border-radius:12px; background:var(--glass-strong); color:var(--accent);
  text-decoration:none; font-weight:600; font-size:13px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.company-card:hover {
  box-shadow: 0 8px 26px #1b284299;
}

.company-card .links a:hover{
  transform: translateY(-2px); box-shadow:0 0 10px rgba(77,141,255,0.35);
}

/* Mobile */
@media(max-width:820px){
  #latest-updates{padding:16px 20px;}
  .grid{grid-template-columns:1fr; padding:20px; gap:16px;}
  .navbar{flex-direction:column; align-items:flex-start; gap:8px; padding:10px 16px;}

  .navbar a {
    width: 100%;
    padding: 7px;
    border-radius: 3px;
  }

  .navbar a:hover {
    background: #4d8dff17;
  }
}
