*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --blue: #0a66c2;
      --blue-dark: #004182;
      --blue-hover: #0958a8;
      --text: #191919;
      --muted: #666;
      --border: #d6d3d1;
      --bg: #f3f2ef;
    }

    body {
      font-family: 'Source Sans 3', sans-serif;
      background: var(--bg);
      color: var(--text);
      min-height: 100vh;
    }

    /* NAV */
    nav {
      background: #fff;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 24px;
      height: 56px;
      position: sticky;
      top: 0;
      z-index: 100;
    }

    .nav-logo svg { display: block; }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 4px;
      flex: 1;
      justify-content: center;
    }

    .nav-link {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      padding: 0 16px;
      height: 56px;
      justify-content: center;
      text-decoration: none;
      color: var(--muted);
      font-size: 12px;
      font-weight: 400;
      border-bottom: 2px solid transparent;
      transition: color 0.15s, border-color 0.15s;
      cursor: pointer;
    }
    .nav-link:hover { color: var(--text); border-bottom-color: var(--text); }
    .nav-link svg { width: 24px; height: 24px; }

    .nav-actions { display: flex; align-items: center; gap: 12px; }

    .btn-outline {
      padding: 6px 20px;
      border: 1.5px solid var(--muted);
      border-radius: 24px;
      background: transparent;
      font-size: 16px;
      font-weight: 600;
      color: var(--muted);
      cursor: pointer;
      transition: all 0.15s;
      font-family: inherit;
      text-decoration: none;
      display: inline-block;
    }
    .btn-outline:hover { background: rgba(0,0,0,0.05); border-color: var(--text); color: var(--text); }

    .btn-primary {
      padding: 6px 20px;
      border: 1.5px solid var(--blue);
      border-radius: 24px;
      background: var(--blue);
      color: #fff;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.15s;
      font-family: inherit;
      text-decoration: none;
      display: inline-block;
    }
    .btn-primary:hover { background: var(--blue-hover); border-color: var(--blue-hover); }

    /* HERO */
    .hero {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: calc(100vh - 56px);
      position: relative;
      overflow: hidden;
      padding: 40px 20px;
    }

    /* Floating avatar network – left */
    .network-left, .network-right {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 280px;
      height: 360px;
    }
    .network-left { left: 60px; }
    .network-right { right: 60px; }

    .avatar-node {
      position: absolute;
      border-radius: 50%;
      overflow: hidden;
      box-shadow: 0 4px 18px rgba(0,0,0,0.12);
      animation: float 4s ease-in-out infinite;
    }
    .avatar-node img { width: 100%; height: 100%; object-fit: cover; display: block; }

    /* Left avatars */
    .l1 { width: 80px; height: 80px; top: 10px; left: 60px; animation-delay: 0s; background: #b0cfe8; }
    .l2 { width: 64px; height: 64px; top: 110px; left: 0px; animation-delay: 0.8s; background: #e3cfc4; }
    .l3 { width: 90px; height: 90px; top: 200px; left: 50px; animation-delay: 1.6s; background: #f4c8b0; }
    .l4 { width: 70px; height: 70px; top: 290px; left: 160px; animation-delay: 0.4s; background: #e8c4d0; }

    /* Right avatars */
    .r1 { width: 84px; height: 84px; top: 20px; right: 40px; animation-delay: 0.3s; background: #c8d8e8; }
    .r2 { width: 70px; height: 70px; top: 150px; right: 0px; animation-delay: 1.1s; background: #c0d4c4; }
    .r3 { width: 76px; height: 76px; top: 260px; right: 80px; animation-delay: 1.8s; background: #e8d4b0; }

    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }

    /* SVG connectors */
    .network-svg {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      pointer-events: none;
    }
    .connector { stroke: #b0b8c8; stroke-width: 1.5; stroke-dasharray: 4 4; fill: none; opacity: 0.7; }

    /* Avatars with illustrated characters */
    .av-chef { background: linear-gradient(135deg, #b0cfe8 60%, #8ab4d4 100%); }
    .av-prof { background: linear-gradient(135deg, #f4c8a0 60%, #e8a87a 100%); }
    .av-support { background: linear-gradient(135deg, #f0b0b8 60%, #e08898 100%); }
    .av-anon { background: linear-gradient(135deg, #d4cce8 60%, #b8aadc 100%); }
    .av-woman1 { background: linear-gradient(135deg, #c8d8e8 60%, #a0b8d4 100%); }
    .av-woman2 { background: linear-gradient(135deg, #c0d4c4 60%, #98b89c 100%); }
    .av-worker { background: linear-gradient(135deg, #e8c880 60%, #d4a840 100%); }

    /* Center card */
    .center-card {
      text-align: center;
      max-width: 480px;
      width: 100%;
      z-index: 10;
      animation: fadeUp 0.7s ease both;
    }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(24px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .hero-title {
      font-size: clamp(28px, 4vw, 44px);
      font-weight: 300;
      line-height: 1.2;
      color: var(--text);
      margin-bottom: 36px;
      letter-spacing: -0.3px;
    }
.Googlebtn{
  text-decoration: none;
}
    .auth-buttons { display: flex; flex-direction: column; gap: 12px; }

    .auth-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 13px 24px;
      border-radius: 28px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.18s;
      font-family: inherit;
      width: 100%;
      border: none;
    }

    .auth-btn-google {
      background: var(--blue);
      color: #fff;
    }
    .auth-btn-google:hover { background: var(--blue-hover); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(10,102,194,0.3); }

    .auth-btn-ms, .auth-btn-email {
      background: #fff;
      color: var(--text);
      border: 1.5px solid var(--border) !important;
      border: none;
    }
    .auth-btn-ms:hover, .auth-btn-email:hover { background: #f3f2ef; transform: translateY(-1px); box-shadow: 0 2px 10px rgba(0,0,0,0.08); }

    .auth-btn-email { color: var(--text); }

    .auth-legal {
      font-size: 12px;
      color: var(--muted);
      margin-top: 16px;
      line-height: 1.6;
    }
    .auth-legal a { color: var(--blue); text-decoration: none; }
    .auth-legal a:hover { text-decoration: underline; }

    .auth-join {
      margin-top: 20px;
      font-size: 16px;
      color: var(--text);
    }
    .auth-join a { color: var(--blue); font-weight: 600; text-decoration: none; }
    .auth-join a:hover { text-decoration: underline; }

    /* Google icon */
    .g-icon { width: 20px; height: 20px; flex-shrink: 0; }

    /* MS icon */
    .ms-icon { width: 20px; height: 20px; flex-shrink: 0; }

    /* Email icon */
    .email-icon { width: 20px; height: 20px; flex-shrink: 0; fill: var(--muted); }

    @media (max-width: 960px) {
      .network-left, .network-right { display: none; }
    }
    @media (max-width: 600px) {
      .hero-title { font-size: 26px; }}