:root{
      --bg:#000000;
      --card:rgba(255,255,255,.03);
      --card-hover:rgba(255,255,255,.05);
      --border:rgba(255,255,255,.08);
      --text:#ffffff;
      --muted:#86868b;
      --accent:#007aff;
      --glow:rgba(0,122,255,.4);
      --ease:cubic-bezier(.4,0,.2,1);
      --spring:cubic-bezier(.34,1.56,.64,1);
    }
    *{margin:0;padding:0;box-sizing:border-box}
    body{
      font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
      background:var(--bg);
      color:var(--text);
      line-height:1.6;
      min-height:100vh;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }
    body::before{
      content:'';
      position:fixed;
      top:50%;
      left:50%;
      width:900px;
      height:900px;
      background:radial-gradient(circle,var(--glow),transparent 70%);
      transform:translate(-50%,-50%);
      opacity:.12;
      animation:pulse 8s ease-in-out infinite;
      pointer-events:none;
    }
    @keyframes pulse{
      0%,100%{opacity:.12;transform:translate(-50%,-50%) scale(1)}
      50%{opacity:.2;transform:translate(-50%,-50%) scale(1.08)}
    }

    .loading{
      position:fixed;
      inset:0;
      background:var(--bg);
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      z-index:9999;
      opacity:1;
      transition:opacity .6s var(--ease);
    }
    .loading.fade{
      opacity:0;
      pointer-events:none;
    }
    .loading-logo{
      width:100px;
      height:100px;
      border-radius:22px;
      margin-bottom:1.5rem;
      box-shadow:0 8px 32px rgba(0,0,0,.4),0 0 0 .5px rgba(255,255,255,.1);
      animation:float 3s ease-in-out infinite;
    }
    @keyframes float{
      0%,100%{transform:translateY(0)}
      50%{transform:translateY(-8px)}
    }
    .loading-text{
      font-size:2rem;
      font-weight:600;
      margin-bottom:1.5rem;
      letter-spacing:-.02em;
    }
    .loading-dots{
      display:flex;
      gap:10px;
    }
    .loading-dot{
      width:12px;
      height:12px;
      background:var(--accent);
      border-radius:50%;
      animation:bounce 1.4s ease-in-out infinite;
    }
    .loading-dot:nth-child(2){animation-delay:.2s}
    .loading-dot:nth-child(3){animation-delay:.4s}
    @keyframes bounce{
      0%,80%,100%{transform:scale(.8);opacity:.5}
      40%{transform:scale(1.2);opacity:1}
    }

    nav{
      position:sticky;
      top:0;
      background:rgba(0,0,0,.7);
      backdrop-filter:blur(20px) saturate(180%);
      border-bottom:1px solid var(--border);
      z-index:1000;
      transition:background .3s var(--ease);
    }
    nav.scrolled{
      background:rgba(0,0,0,.85);
    }
    .nav-content{
      max-width:1200px;
      margin:0 auto;
      padding:1rem 2rem;
      display:flex;
      justify-content:space-between;
      align-items:center;
    }
    .logo{
      display:flex;
      align-items:center;
      gap:.75rem;
      text-decoration:none;
      color:var(--text);
      font-weight:600;
      font-size:1.1rem;
      transition:transform .3s var(--ease);
    }
    .logo:hover{
      transform:translateY(-1px);
    }
    .logo img{
      width:40px;
      height:40px;
      border-radius:10px;
    }
    .nav-links{
      display:flex;
      gap:.5rem;
      list-style:none;
    }
    .nav-links a{
      color:var(--muted);
      text-decoration:none;
      padding:.65rem 1rem;
      border-radius:10px;
      font-size:.95rem;
      font-weight:500;
      transition:all .3s var(--ease);
    }
    .nav-links a:hover{
      color:var(--text);
      background:rgba(255,255,255,.06);
    }
    .nav-links a.active{
      color:#fff;
      background:var(--accent);
    }

    .main{
      max-width:1200px;
      margin:0 auto;
      padding:5rem 2rem 4rem;
      opacity:0;
      transform:translateY(20px);
      transition:opacity .8s var(--ease),transform .8s var(--ease);
    }
    .main.show{
      opacity:1;
      transform:translateY(0);
    }

    .hero{
      text-align:center;
      margin-bottom:4rem;
    }
    .hero-icon{
      width:70px;
      height:70px;
      margin:0 auto 1.5rem;
      background:rgba(0,122,255,.1);
      border-radius:16px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:2rem;
      color:var(--accent);
      animation:fadeUp 1s var(--ease) .2s both;
    }
    .hero h1{
      font-size:4rem;
      font-weight:700;
      letter-spacing:-.03em;
      margin-bottom:.75rem;
      animation:fadeUp 1s var(--ease) .3s both;
    }
    .hero p{
      font-size:1.25rem;
      color:var(--muted);
      animation:fadeUp 1s var(--ease) .4s both;
    }
    @keyframes fadeUp{
      0%{opacity:0;transform:translateY(20px)}
      100%{opacity:1;transform:translateY(0)}
    }

    .team-grid{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:2rem;
      max-width:900px;
      margin:0 auto;
      animation:fadeUp 1s var(--ease) .5s both;
    }
    .member-card{
      background:var(--card);
      backdrop-filter:blur(40px) saturate(180%);
      border:1px solid var(--border);
      border-radius:20px;
      overflow:hidden;
      transition:all .3s var(--ease);
      position:relative;
    }
    .member-card::before{
      content:'';
      position:absolute;
      inset:0;
      background:linear-gradient(180deg,rgba(255,255,255,.03),transparent);
      opacity:0;
      transition:opacity .3s var(--ease);
    }
    .member-card:hover{
      transform:translateY(-4px);
      border-color:rgba(255,255,255,.15);
      background:var(--card-hover);
      box-shadow:0 20px 40px rgba(0,0,0,.3);
    }
    .member-card:hover::before{
      opacity:1;
    }

    .banner{
      width:100%;
      height:100px;
      background:linear-gradient(135deg,#007aff,#5856d6);
      overflow:hidden;
      position:relative;
    }
    .banner img{
      width:100%;
      height:100%;
      object-fit:cover;
    }

    .card-content{
      padding:3.5rem 1.5rem 1.5rem;
      position:relative;
    }
    .avatar-wrap{
      position:absolute;
      top:-40px;
      left:1.5rem;
      width:80px;
      height:80px;
      border-radius:50%;
      border:4px solid var(--bg);
      overflow:hidden;
      box-shadow:
        0 8px 24px rgba(0,0,0,.4),
        0 0 0 1px rgba(255,255,255,.1);
      transition:transform .3s var(--spring);
      cursor:pointer;
    }
    .member-card:hover .avatar-wrap{
      transform:scale(1.05);
    }
    .avatar-wrap img{
      width:100%;
      height:100%;
      object-fit:cover;
    }

    .badge{
      position:absolute;
      top:1rem;
      right:1.5rem;
      background:rgba(0,122,255,.15);
      backdrop-filter:blur(10px);
      border:1px solid rgba(0,122,255,.3);
      padding:.35rem .75rem;
      border-radius:6px;
      font-size:.7rem;
      font-weight:600;
      text-transform:uppercase;
      letter-spacing:.05em;
      color:var(--accent);
      transition:all .3s var(--ease);
    }

    .member-name{
      font-size:1.5rem;
      font-weight:700;
      margin-bottom:.25rem;
      letter-spacing:-.02em;
    }
    .member-role{
      font-size:.95rem;
      color:var(--muted);
      margin-bottom:1rem;
      font-weight:500;
    }
    .member-comment{
      display:flex;
      align-items:center;
      gap:.75rem;
      font-size:.9rem;
      color:rgba(255,255,255,.7);
      padding-top:1rem;
      border-top:1px solid var(--border);
    }
    .divider{
      color:var(--muted);
      font-weight:300;
    }
    .emoji{
      width:18px;
      height:18px;
      vertical-align:middle;
      transition:transform .2s var(--spring);
      cursor:pointer;
    }
    .emoji:hover{
      transform:scale(1.2) translateY(-2px);
    }

    footer{
      margin-top:6rem;
      padding:3rem 2rem;
      border-top:1px solid var(--border);
      background:rgba(255,255,255,.02);
    }
    .footer-content{
      max-width:1200px;
      margin:0 auto;
      display:flex;
      justify-content:space-between;
      gap:3rem;
    }
    .footer-section{
      flex:1;
    }
    .footer-logo{
      display:flex;
      align-items:center;
      gap:.75rem;
      margin-bottom:.75rem;
    }
    .footer-logo img{
      width:50px;
      height:50px;
      border-radius:12px;
    }
    .footer-logo span{
      font-size:1.3rem;
      font-weight:600;
    }
    .footer-by{
      color:var(--muted);
      font-size:.9rem;
      margin-bottom:1rem;
    }
    .footer-heading{
      font-size:1rem;
      font-weight:600;
      margin-bottom:1rem;
      color:rgba(255,255,255,.6);
    }
    .footer-links{
      display:flex;
      flex-direction:column;
      gap:.5rem;
    }
    .footer-links a{
      color:var(--muted);
      text-decoration:none;
      font-size:.95rem;
      transition:color .3s var(--ease);
      display:flex;
      align-items:center;
      gap:.5rem;
    }
    .footer-links a:hover{
      color:var(--text);
    }
    .footer-links i{
      width:16px;
      font-size:.85rem;
    }
    .footer-bottom{
      text-align:center;
      margin-top:2rem;
      padding-top:2rem;
      border-top:1px solid var(--border);
      color:var(--muted);
      font-size:.9rem;
    }

    @media(max-width:768px){
      .nav-content{
        flex-direction:column;
        gap:1rem;
      }
      .nav-links{
        width:100%;
        justify-content:center;
        flex-wrap:wrap;
      }
      .main{
        padding:3rem 1.5rem 2rem;
      }
      .hero h1{
        font-size:2.5rem;
      }
      .hero p{
        font-size:1.1rem;
      }
      .team-grid{
        grid-template-columns:1fr;
        gap:1.5rem;
      }
      .footer-content{
        flex-direction:column;
        text-align:center;
      }
    }