@font-face{
  font-family:MAXWare;
  src:url("fonts/MAXWare.ttf") format("truetype");
  font-display:swap;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:MAXWare,system-ui,-apple-system,sans-serif;
  -webkit-tap-highlight-color:transparent;
}

:root{
  --bg-primary:#06060c;
  --bg-secondary:#0d0d16;
  --bg-card:rgba(18,18,30,0.45);
  --bg-toolbar:rgba(255,255,255,0.04);
  --text-primary:#f0f2f5;
  --text-secondary:#b0b8c1;
  --accent-blue:#4a8cff;
  --accent-green:#34c759;
  --accent-red:#ff4757;
  --accent-purple:#a855f7;
  --accent-orange:#ff9f43;
  --accent-cyan:#22d3ee;
  --border-subtle:rgba(255,255,255,0.08);
  --border-glass:rgba(255,255,255,0.12);
  --shadow-card:0 8px 32px rgba(0,0,0,0.4);
  --shadow-glow:0 0 80px rgba(74,140,255,0.15);
  --radius-xl:24px;
  --radius-lg:18px;
  --radius-md:14px;
  --radius-sm:10px;
  --radius-full:50%;
  --transition-fast:0.2s cubic-bezier(0.4,0,0.2,1);
  --transition-smooth:0.35s cubic-bezier(0.4,0,0.2,1);
  --transition-bounce:0.4s cubic-bezier(0.34,1.56,0.64,1);
}

body{
  background:var(--bg-primary);
  background-image:
    radial-gradient(ellipse at 30% 10%,rgba(74,140,255,0.07) 0%,transparent 55%),
    radial-gradient(ellipse at 70% 70%,rgba(168,85,247,0.05) 0%,transparent 55%),
    radial-gradient(ellipse at 50% 40%,rgba(52,199,89,0.04) 0%,transparent 65%),
    radial-gradient(ellipse at 80% 20%,rgba(34,211,238,0.03) 0%,transparent 50%);
  color:var(--text-primary);
  overflow-x:hidden;
  scroll-behavior:smooth;
  min-height:100vh;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

::-webkit-scrollbar{
  width:6px;
}

::-webkit-scrollbar-track{
  background:var(--bg-primary);
}

::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,0.12);
  border-radius:10px;
}

::-webkit-scrollbar-thumb:hover{
  background:rgba(255,255,255,0.22);
}

::selection{
  background:rgba(74,140,255,0.3);
  color:#fff;
}

.toolbar{
  position:fixed;
  top:16px;
  left:50%;
  transform:translateX(-50%);
  width:calc(100% - 32px);
  max-width:1100px;
  height:64px;
  padding:0 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-radius:var(--radius-xl);
  background:rgba(255,255,255,0.03);
  backdrop-filter:blur(40px) saturate(200%);
  -webkit-backdrop-filter:blur(40px) saturate(200%);
  border:1px solid var(--border-glass);
  box-shadow:0 8px 32px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.05);
  z-index:1000;
  transition:all var(--transition-smooth);
}

.toolbar.scrolled{
  top:8px;
  height:56px;
  border-radius:var(--radius-lg);
  background:rgba(255,255,255,0.05);
  backdrop-filter:blur(50px) saturate(200%);
  -webkit-backdrop-filter:blur(50px) saturate(200%);
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:600;
  font-size:1.1rem;
  letter-spacing:0.5px;
}

.brand img{
  width:32px;
  height:32px;
  border-radius:var(--radius-full);
  transition:transform var(--transition-bounce);
}

.brand:hover img{
  transform:rotate(15deg) scale(1.1);
}

.menu-btn{
  width:42px;
  height:42px;
  border:none;
  background:rgba(255,255,255,0.05);
  cursor:pointer;
  border-radius:var(--radius-full);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all var(--transition-fast);
}

.menu-btn:hover{
  background:rgba(255,255,255,0.12);
  transform:scale(1.05);
}

.menu-btn:active{
  transform:scale(0.95);
}

.sidebar{
  position:fixed;
  top:0;
  right:-280px;
  width:280px;
  height:100vh;
  background:rgba(10,10,20,0.94);
  backdrop-filter:blur(40px);
  -webkit-backdrop-filter:blur(40px);
  border-left:1px solid var(--border-subtle);
  transition:right var(--transition-smooth);
  z-index:1200;
  display:flex;
  flex-direction:column;
  border-radius:var(--radius-xl) 0 0 var(--radius-xl);
}

.sidebar.open{
  right:0;
}

.sidebar-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 20px 16px;
  border-bottom:1px solid var(--border-subtle);
}

.sidebar-brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:600;
  font-size:1.05rem;
}

.sidebar-brand img{
  width:36px;
  height:36px;
  border-radius:var(--radius-full);
}

.close-btn{
  width:38px;
  height:38px;
  border:none;
  background:rgba(255,255,255,0.05);
  cursor:pointer;
  border-radius:var(--radius-full);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all var(--transition-fast);
}

.close-btn:hover{
  background:rgba(255,255,255,0.12);
  transform:rotate(90deg);
}

.sidebar-nav{
  flex:1;
  padding:12px 12px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.sidebar-nav a{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border-radius:var(--radius-md);
  color:var(--text-primary);
  text-decoration:none;
  transition:all var(--transition-fast);
  font-size:0.95rem;
  border:1px solid transparent;
  position:relative;
}

.sidebar-nav a:hover{
  background:rgba(255,255,255,0.06);
  border-color:rgba(255,255,255,0.08);
  transform:translateX(-4px);
}

.sidebar-nav a .nav-icon{
  width:38px;
  height:38px;
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,0.04);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:all var(--transition-fast);
  color:var(--text-secondary);
}

.sidebar-nav a:hover .nav-icon{
  background:rgba(255,255,255,0.08);
  color:var(--accent-blue);
}

.sidebar-nav a .nav-text{
  flex:1;
}

.sidebar-nav a .nav-arrow{
  opacity:0;
  transform:translateX(-8px);
  transition:all var(--transition-fast);
  color:var(--text-secondary);
}

.sidebar-nav a:hover .nav-arrow{
  opacity:1;
  transform:translateX(0);
}

.sidebar-footer{
  padding:16px 20px;
  border-top:1px solid var(--border-subtle);
  text-align:center;
}

.sidebar-footer p{
  color:var(--text-secondary);
  font-size:0.8rem;
  letter-spacing:2px;
  text-transform:uppercase;
}

.overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.5);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  opacity:0;
  pointer-events:none;
  transition:opacity var(--transition-smooth);
  z-index:1100;
}

.overlay.show{
  opacity:1;
  pointer-events:auto;
}

.fab{
  position:fixed;
  bottom:120px;
  left:50%;
  transform:translateX(-50%);
  width:52px;
  height:52px;
  border-radius:50%;
  background:rgba(255,255,255,0.03);
  backdrop-filter:blur(30px);
  -webkit-backdrop-filter:blur(30px);
  border:1px solid var(--border-glass);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:999;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity 0.3s ease,visibility 0.3s ease,transform 0.3s cubic-bezier(0.34,1.56,0.64,1),background 0.3s ease,box-shadow 0.3s ease;
  box-shadow:0 4px 20px rgba(0,0,0,0.3);
}

.fab:hover{
  background:rgba(255,255,255,0.08);
  box-shadow:0 8px 32px rgba(0,0,0,0.5),0 0 40px rgba(168,85,247,0.15);
  transform:translateX(-50%) scale(1.08);
}

.fab:active{
  transform:translateX(-50%) scale(0.9);
}

.fab.fab-hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateX(-50%) scale(0.8);
}

header{
  padding:160px 24px 90px;
  text-align:center;
  position:relative;
}

.logo{
  width:136px;
  height:136px;
  margin:auto;
  border-radius:var(--radius-full);
  background:url("image/logo.png") center/cover no-repeat;
  animation:glow 7s infinite alternate;
  position:relative;
}

.logo::after{
  content:'';
  position:absolute;
  inset:-6px;
  border-radius:var(--radius-full);
  background:transparent;
  border:2px solid rgba(255,255,255,0.08);
  animation:pulse-ring 3s infinite;
}

@keyframes glow{
  0%{box-shadow:0 0 24px var(--accent-blue);}
  33%{box-shadow:0 0 64px var(--accent-purple);}
  66%{box-shadow:0 0 90px var(--accent-green);}
  100%{box-shadow:0 0 120px var(--accent-blue);}
}

@keyframes pulse-ring{
  0%{transform:scale(1);opacity:0.5;}
  50%{transform:scale(1.08);opacity:0.1;}
  100%{transform:scale(1);opacity:0.5;}
}

.logo-text{
  margin-top:26px;
  font-size:2.8rem;
  font-weight:700;
  letter-spacing:2px;
  background:linear-gradient(135deg,var(--accent-blue),var(--accent-purple),var(--accent-green));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:shimmer 4s infinite;
  background-size:200% 200%;
}

@keyframes shimmer{
  0%,100%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
}

.subtitle{
  margin-top:12px;
  color:var(--text-secondary);
  font-size:1.05rem;
  letter-spacing:4px;
  text-transform:uppercase;
}

main{
  max-width:1240px;
  margin:auto;
  padding:40px 24px 160px;
}

.projects{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:32px;
}

.project{
  background:var(--bg-card);
  backdrop-filter:blur(28px);
  -webkit-backdrop-filter:blur(28px);
  border-radius:var(--radius-xl);
  padding:0;
  border:1px solid var(--border-subtle);
  box-shadow:var(--shadow-card);
  transition:all var(--transition-smooth);
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.project::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.12),transparent);
  z-index:2;
}

.project:hover{
  transform:translateY(-6px);
  border-color:rgba(255,255,255,0.15);
  box-shadow:0 16px 48px rgba(0,0,0,0.5),var(--shadow-glow);
}

.project-img-wrapper{
  position:relative;
  overflow:hidden;
}

.project img{
  width:100%;
  height:200px;
  object-fit:cover;
  transition:transform var(--transition-smooth);
}

.project:hover img{
  transform:scale(1.05);
}

.project h3{
  margin:20px 24px 0;
  font-size:1.4rem;
  font-weight:600;
}

.project p{
  margin:8px 24px 0;
  color:var(--text-secondary);
  font-size:0.95rem;
  flex:1;
}

.more-btn{
  margin:20px 24px 24px;
  width:calc(100% - 48px);
  height:46px;
  border:none;
  border-radius:var(--radius-md);
  background:rgba(255,255,255,0.08);
  color:var(--text-primary);
  cursor:pointer;
  font-size:0.95rem;
  font-weight:500;
  letter-spacing:0.5px;
  transition:all var(--transition-fast);
  border:1px solid rgba(255,255,255,0.06);
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.more-btn svg{
  transition:transform var(--transition-fast);
}

.more-btn:hover svg{
  transform:translateX(4px);
}

.more-btn::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(74,140,255,0.15),rgba(168,85,247,0.15));
  opacity:0;
  transition:opacity var(--transition-fast);
}

.more-btn:hover{
  background:rgba(255,255,255,0.14);
  border-color:rgba(255,255,255,0.15);
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(0,0,0,0.3);
}

.more-btn:hover::after{
  opacity:1;
}

.more-btn:active{
  transform:scale(0.97);
}

.partners-section{
  margin-top:100px;
  text-align:center;
}

.partners-section h2{
  font-size:2.6rem;
  font-weight:700;
  margin-bottom:40px;
  letter-spacing:1px;
  background:linear-gradient(180deg,var(--text-primary),var(--text-secondary));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.partners{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:56px;
}

.partner-link{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
  border-radius:var(--radius-md);
  transition:all var(--transition-smooth);
}

.partner-link img{
  width:130px;
  height:65px;
  object-fit:contain;
  transition:all var(--transition-bounce);
  filter:grayscale(40%) brightness(0.85);
}

.partner-link:hover img{
  transform:scale(1.15) translateY(-4px);
  filter:grayscale(0%) brightness(1.1);
}

footer{
  text-align:center;
  padding:40px 16px 120px;
  border-top:1px solid var(--border-subtle);
  position:relative;
  z-index:1;
}

.footer-content p{
  color:var(--text-secondary);
  font-size:0.9rem;
  letter-spacing:0.5px;
}

.footer-tagline{
  margin-top:6px;
  font-size:0.75rem;
  letter-spacing:3px;
  text-transform:uppercase;
  opacity:0.6;
}

.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.6);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity var(--transition-smooth);
  z-index:1400;
}

.modal.active{
  opacity:1;
  pointer-events:auto;
}

.modal-content{
  background:rgba(20,20,34,0.88);
  backdrop-filter:blur(34px);
  -webkit-backdrop-filter:blur(34px);
  padding:36px 32px;
  border-radius:var(--radius-xl);
  text-align:center;
  width:90%;
  max-width:400px;
  border:1px solid var(--border-subtle);
  box-shadow:0 24px 64px rgba(0,0,0,0.6);
  animation:modal-in var(--transition-bounce);
}

@keyframes modal-in{
  from{
    opacity:0;
    transform:scale(0.9) translateY(24px);
  }
  to{
    opacity:1;
    transform:scale(1) translateY(0);
  }
}

.modal-icon{
  margin-bottom:16px;
}

.modal-content h3{
  font-size:1.5rem;
  margin-bottom:6px;
}

.modal-content p{
  color:var(--text-secondary);
  margin-bottom:2px;
}

.modal-sub{
  font-size:0.85rem;
  opacity:0.7;
}

.modal-content button{
  margin-top:22px;
  padding:12px 36px;
  border:none;
  border-radius:var(--radius-md);
  background:linear-gradient(135deg,rgba(168,85,247,0.3),rgba(74,140,255,0.3));
  color:var(--text-primary);
  cursor:pointer;
  font-size:0.95rem;
  font-weight:600;
  letter-spacing:0.5px;
  transition:all var(--transition-fast);
  border:1px solid rgba(168,85,247,0.3);
}

.modal-content button:hover{
  background:linear-gradient(135deg,rgba(168,85,247,0.5),rgba(74,140,255,0.5));
  transform:scale(1.05);
  box-shadow:0 8px 24px rgba(168,85,247,0.3);
}

.ripple{
  position:relative;
  overflow:hidden;
}

.ripple .ripple-effect{
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,0.3);
  transform:scale(0);
  animation:ripple-anim 0.6s ease-out;
  pointer-events:none;
}

@keyframes ripple-anim{
  to{
    transform:scale(4);
    opacity:0;
  }
}

.error-page{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  padding:40px 24px;
  text-align:center;
}

.error-page .error-icon{
  width:140px;
  height:140px;
  margin-bottom:32px;
  animation:float 4s ease-in-out infinite;
}

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

.error-page .error-code{
  font-size:7rem;
  font-weight:800;
  letter-spacing:8px;
  background:linear-gradient(135deg,var(--accent-red),var(--accent-orange),var(--accent-purple));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  line-height:1;
  margin-bottom:12px;
  animation:glitch 3s infinite;
}

@keyframes glitch{
  0%,90%,100%{transform:translate(0);}
  92%{transform:translate(-3px,2px);}
  94%{transform:translate(3px,-2px);}
  96%{transform:translate(-2px,-1px);}
  98%{transform:translate(2px,1px);}
}

.error-page .error-title{
  font-size:1.8rem;
  font-weight:600;
  margin-bottom:12px;
  color:var(--text-primary);
}

.error-page .error-desc{
  font-size:1.05rem;
  color:var(--text-secondary);
  max-width:480px;
  margin-bottom:36px;
  line-height:1.7;
}

.error-page .home-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 32px;
  border-radius:var(--radius-md);
  background:rgba(255,255,255,0.08);
  color:var(--text-primary);
  text-decoration:none;
  font-size:1rem;
  font-weight:500;
  border:1px solid var(--border-subtle);
  transition:all var(--transition-fast);
  letter-spacing:0.5px;
}

.error-page .home-btn:hover{
  background:rgba(255,255,255,0.14);
  border-color:rgba(255,255,255,0.15);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,0.3);
}

.error-page .home-btn svg{
  transition:transform var(--transition-fast);
}

.error-page .home-btn:hover svg{
  transform:translateX(-4px);
}

.server-error .error-code{
  background:linear-gradient(135deg,var(--accent-orange),var(--accent-red));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.forbidden-error .error-code{
  background:linear-gradient(135deg,var(--accent-red),var(--accent-purple));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.maintenance-error .error-code{
  background:linear-gradient(135deg,var(--accent-purple),var(--accent-blue));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

@media(max-width:768px){
  .logo-text{
    font-size:2rem;
  }
  .projects{
    grid-template-columns:1fr;
  }
  .partners{
    gap:36px;
  }
  .partner-link img{
    width:100px;
    height:50px;
  }
  .sidebar{
    width:260px;
    right:-260px;
  }
  .fab{
    bottom:100px;
    width:46px;
    height:46px;
  }
}