html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: "Poppins", sans-serif;
  background-color: #132440;
  background-image: url('../bg.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
}

    canvas#bg {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
    }

    main {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 20px;
    }

    h1 {
      font-size: 3.6rem;
      color: #e6f7f7;
      margin-bottom: 12px;
      letter-spacing: 1px;
    }

    .button-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 35px;
      width: 100%;
      max-width: 1200px;
      justify-items: center;
    }

  .hero-inner { text-align: center; max-width: 960px; width: 100%; }
  .hero-title { font-weight: 700; margin: 0 0 6px 0; }
  .hero-sub { color: rgba(230,247,247,0.85); margin: 0 0 22px 0; }

  .hero-inner > * { position: relative; z-index:2; }

  .hero-search { display:flex; gap:10px; justify-content:center; align-items:center; }
  .hero-search input { width: min(680px, 78%); padding:14px 16px; border-radius:10px; border:none; background: rgba(0,0,0,0.45); color:#e6f7f7; font-size:1.05rem; box-shadow: 0 8px 30px rgba(0,0,0,0.6); }
  .hero-search-btn {
    width:48px;
    height:44px;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    border:none;
    background:#3B9797;
    cursor:pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  }
  .hero-search-btn i {
    width:20px;
    height:20px;
    color:#082022;
    display:inline-block;
  }

.dock-logo {
  width: 22px;
  height: 22px;
  display: inline-block;
  vertical-align: middle;
  border-radius: 6px;
  object-fit: cover;
}

#hero-quote {
  display: inline-block;
  position: relative;
}
#hero-quote::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 1em;
  background: #e6f7f7;
  margin-left: 8px;
  vertical-align: middle;
  animation: blink 1s steps(2, end) infinite;
}
@keyframes blink { 50% { opacity: 0 } }

    .card {
      position: relative;
      width: 260px;
      height: auto;
  @keyframes blink { 50% { opacity: 0 } }
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}

.bottom-dock .dock-btn i {
  width: 22px;
  height: 22px;
  color: #e6f7f7;
  display: inline-block;
}

/* ensure lucide-generated SVGs and images match icon sizing and color */
.bottom-dock .dock-btn svg {
  width: 22px;
  height: 22px;
  display: inline-block;
  color: #e6f7f7;
}
.bottom-dock .dock-btn svg * {
  stroke: currentColor !important;
  fill: currentColor !important;
}
.bottom-dock .dock-btn img {
  width: 22px;
  height: 22px;
  object-fit: cover;
  border-radius: 6px;
}

.bottom-dock .dock-btn:hover {
  transform: translateY(-6px) scale(1.06);
  box-shadow: 0 12px 30px rgba(2,6,23,0.5);
  background: rgba(255,255,255,0.08);
}

@media (max-width: 480px) {
  .bottom-dock .dock-inner { gap: 10px; padding: 8px 12px; }
  .bottom-dock .dock-btn { width: 48px; height: 40px; }
}

/* styles moved from home/index.html */
:root {
  --sb-bg-opaque: rgba(40,44,48,0.52);
  --sb-accent: rgba(92,100,108,0.28);
  --sb-outline: rgba(255,255,255,0.04);
  --sb-glow: rgba(75,85,96,0.12);
  --text: #e6eef2;
}

.sidebar {
  position: fixed;
  left: 12px;
  top: 12px;
  bottom: 12px;
  width: 84px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 8px;
  gap: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.02);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border: 1px solid var(--sb-outline);
  z-index: 60;
  transition: transform 240ms cubic-bezier(.2,.9,.2,1), box-shadow 240ms;
}

.sidebar::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  border-radius: 14px;
  background: linear-gradient(120deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.06) 2%, rgba(255,255,255,0.00) 30%);
  mix-blend-mode: overlay;
  opacity: 0.6;
  transform: translateX(-40%);
  animation: sheen 4.5s linear infinite;
}

@keyframes sheen { to { transform: translateX(140%); } }

.sidebar .group {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  padding-top: 6px;
}

.sidebar .icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
  box-shadow: 0 6px 12px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.02);
  color: var(--text);
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
  position: relative;
}

.sidebar .icon i svg { width: 22px; height: 22px; stroke: currentColor; }
.sidebar .icon img { width: 22px; height: 22px; }

.sidebar .icon:hover { transform: translateY(-6px); box-shadow: 0 12px 24px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04); background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.03)); }
.sidebar .icon.active { background: linear-gradient(180deg, rgba(75,85,96,0.16), rgba(30,36,40,0.06)); box-shadow: 0 10px 20px rgba(0,0,0,0.48); }

.sidebar .icon .label {
  position: absolute;
  left: 72px;
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  background: rgba(18,22,26,0.88);
  color: #ffffff;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 14px;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(0,0,0,0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 80;
}

.sidebar .icon:hover .label { opacity: 1; transform: translateY(-50%) translateX(0); }
.sidebar .divider { width: 68%; height: 1px; background: rgba(255,255,255,0.03); margin: 8px 0; border-radius: 2px; }
.sidebar .bottom { margin-top: auto; margin-bottom: 8px; width: 100%; display: flex; justify-content: center; }
.sidebar .bottom .icon { width: 60px; height: 60px; }

main.hero { margin-left: 120px; transition: margin 200ms ease; }
@media (max-width: 900px) { .sidebar { display: none; } main.hero { margin-left: 0; } }