:root {
      --bg: #0b1020;
      --bg-soft: #111831;
      --text: #e9edf5;
      --muted: #b6c0d4;
      --accent: #6aa5ff;
      --accent-2: #7bf1d7;
      --card: #131a36;
      --shadow: 0 10px 30px rgba(0,0,0,.35);
    }
    @media (prefers-color-scheme: light) {
      :root {
        --bg: #f7f9fc;
        --bg-soft: #ffffff;
        --text: #0b1020;
        --muted: #4a5568;
        --accent: #2563eb;
        --accent-2: #059669;
        --card: #ffffff;
        --shadow: 0 10px 25px rgba(0,0,0,.08);
      }
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background: radial-gradient(1200px 800px at 80% -20%, rgba(106,165,255,.15), transparent 60%), var(--bg); color: var(--text); }
    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; height: auto; display: block; }

    .container { width: min(1100px, 90%); margin-inline: auto; }
    .grid { display: grid; gap: 1.25rem; }
    .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    @media (max-width: 900px) { .grid-2, .grid-4 { grid-template-columns: 1fr; } }

    header { position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(140%) blur(8px); background: color-mix(in srgb, var(--bg-soft) 85%, transparent); border-bottom: 1px solid rgba(255,255,255,.08); }
    .nav { display: flex; align-items: center; justify-content: space-between; padding: .9rem 0; }
    .logo { display: inline-flex; align-items: center; gap: .6rem; font-weight: 700; letter-spacing: .2px; }
    .logo-badge { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: var(--shadow); }
    .nav-links { display: flex; gap: 1rem; align-items: center; position: relative; }
    .nav-links a { padding: .55rem .8rem; border-radius: .8rem; color: var(--muted); }
    .nav-links a:hover { background: rgba(255,255,255,.06); color: var(--text); }

    .dropdown { position: relative; }
    .dropdown-content { display: none; position: absolute; top: 100%; left:0; min-width:180px; background: var(--bg-soft); border:1px solid rgba(255,255,255,.1); border-radius:.8rem; box-shadow: var(--shadow); overflow:hidden; z-index:100; }
    .dropdown-content a { display:block; padding:.6rem .9rem; color:var(--muted); }
    .dropdown-content a:hover { background: rgba(255,255,255,.06); color:var(--text); }

    /* Hover dropdown for desktop */
    @media (min-width: 801px) {
      .dropdown:hover .dropdown-content { display: block; }
    }

    /* Open state for mobile toggle */
    .dropdown.open .dropdown-content { display: block; }

    .menu-btn { display: none; border: 1px solid rgba(255,255,255,.1); background: transparent; color: var(--text); padding: .55rem .75rem; border-radius: .75rem; }
    @media (max-width: 800px) {
      .nav-links { display: none; position: absolute; left: 5%; right: 5%; top: 64px; flex-direction: column; background: var(--bg-soft); padding: .75rem; border: 1px solid rgba(255,255,255,.1); border-radius: 1rem; box-shadow: var(--shadow); }
      .menu-btn { display: inline-flex; }
      .nav-open .nav-links { display: flex; }
      .dropdown-content { position: static; box-shadow:none; border:none; background:transparent; }
      .dropdown-content a { padding:.5rem 0; }
      .dropdown-btn { width:100%; padding:.5rem 0; display:inline-block; }
    }

    .hero { padding: 6rem 0 4rem; position: relative; }
    .greeting { font-size: clamp(1.6rem, 1rem + 2.5vw, 2.4rem); margin: 0 0 .4rem; }
    .clock { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', monospace; font-size: clamp(1.25rem, .9rem + 1.8vw, 2rem); margin: 0; }
    .date { color: var(--muted); margin: .3rem 0 0; }
    .subtitle { font-size: clamp(1rem, .9rem + .7vw, 1.15rem); color: var(--muted); max-width: 60ch; margin-top: .7rem; }
    .cta { display:flex; gap:.8rem; margin-top: 1.25rem; flex-wrap: wrap; }
    .btn { display:inline-flex; align-items:center; gap:.5rem; padding:.8rem 1rem; border-radius: .9rem; border: 1px solid rgba(255,255,255,.12); font-weight: 600; justify-content:center; }
    .btn.primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #0b1020; border: none; box-shadow: var(--shadow); }
    .btn img { width: 20px; height: 20px; }

    .card { background: var(--card); border: 1px solid rgba(255,255,255,.08); border-radius: 1.25rem; padding: 1.25rem; box-shadow: var(--shadow); }
    .card h3 { margin: .2rem 0 .35rem; font-size: 1.1rem; }
    .muted { color: var(--muted); }

    section { padding: 3.5rem 0; }
    .section-title { font-size: 1.6rem; margin: 0 0 .25rem; }
    .section-lead { color: var(--muted); margin: 0 0 1.2rem; }

    footer { border-top: 1px solid rgba(255,255,255,.1); padding: 2rem 0; color: var(--muted); }