@import url("https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;600;700&display=swap");

/* ===== Root Tokens (Single Light Theme) ===== */
:root {
  --font-sans: "Titillium Web", -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --carousel-gap: 1.25rem;
  /*--bg: #f5f7fa;*/
  --bg: #dde5ef;
  --bg-alt: #ffffff;
  --bg-soft: #eef2f6;
  --border: #d5dde6;
  --border-strong: #b8c4d1;
  --text: #1b2732;
  --text-soft: #435463;
  --text-faint: #6a7a87;
  --accent: #0d55ff;
  --accent-alt: #256bff;
  --accent-grad: linear-gradient(135deg,#246bff,#5a52ff);
  --warn: #ffb347;
  --radius: 18px;
  --radius-sm: 8px;
  --shadow-sm: 0 2px 4px -2px rgba(20,40,60,.16),0 4px 10px -2px rgba(30,50,70,.08);
  --shadow-lg: 0 8px 28px -8px rgba(50,70,90,.18);
  --transition: 150ms cubic-bezier(.4,.14,.3,1);
  --focus: 0 0 0 3px #ffffff,0 0 0 6px rgba(13,85,255,0.5);
}

html,body { height:100%; }
body { scroll-behavior:smooth; 
  font-family: var(--font-sans); 
  background:var(--bg); 
  color:var(--text); 
  line-height:1.55; 
  -webkit-font-smoothing:antialiased;
  overflow-x: hidden;
}

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

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animate-in { animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-fade { animation: fadeIn 1s ease-out forwards; }

/* ===== Layout ===== */
header {
  /* Unify with page background, add subtle accent overlays */
  background:
    radial-gradient(800px 360px at 30% 15%, rgba(36,107,255,0.12), rgba(36,107,255,0) 60%),
    radial-gradient(600px 300px at 70% 80%, rgba(90,82,255,0.08), rgba(90,82,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 70%),
    var(--bg);
  color:var(--text);
  padding: 140px 0 90px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
header:before, header:after { content:""; position:absolute; width:400px; height:400px; background:rgba(74,128,255,0.15); filter:blur(100px); border-radius:50%; animation: float 8s ease-in-out infinite; }
header:before { top:-140px; left:-160px; opacity:.4; animation-delay: -4s; }
header:after { bottom:-160px; right:-140px; opacity:.35; }
@keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } }
header h1 { font-size: clamp(2.5rem,4vw,3.4rem); font-weight:600; letter-spacing:.5px; margin-bottom: 0; }
header p { font-size: 1.12rem; margin: 18px auto 28px; max-width: 780px; color:var(--text-soft); }

.btn-gradient { background: var(--accent-grad); color:#fff; border:none; padding:14px 32px; font-weight:600; letter-spacing:.5px; border-radius: 999px; box-shadow:0 6px 20px -6px rgba(36,107,255,.5); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; }
.btn-gradient:before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent); opacity: 0; transition: opacity 0.3s; }
.btn-gradient:hover { transform:translateY(-4px) scale(1.02); box-shadow:0 16px 32px -12px rgba(36,107,255,.6); color:#fff; }
.btn-gradient:hover:before { opacity: 1; }
.btn-gradient:active { transform: translateY(-2px) scale(1); }
.btn-gradient:focus-visible { outline:none; box-shadow: var(--focus); }

.btn-secondary { background: rgba(255,255,255,0.9); color:var(--accent); border:2px solid var(--accent); padding:12px 28px; font-weight:600; letter-spacing:.5px; border-radius: 999px; box-shadow:0 4px 14px -6px rgba(36,107,255,.3); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); backdrop-filter: blur(8px); }
.btn-secondary:hover { transform:translateY(-4px) scale(1.02); box-shadow:0 12px 26px -10px rgba(36,107,255,.5); background: white; color:var(--accent); }
.btn-secondary:active { transform: translateY(-2px) scale(1); }
.btn-secondary:focus-visible { outline:none; box-shadow: var(--focus); }

section { padding: 60px 0; }
section h2 { font-size: clamp(2rem,3vw,2.5rem); font-weight:600; margin-bottom: 1.2rem; text-align:center; position:relative; letter-spacing:.5px; }

h2.section-title { font-size: clamp(2rem,3vw,2.5rem); font-weight:600; margin-bottom: 1.8rem; text-align:center; position:relative; letter-spacing:.5px; }
h2.section-title:after { content:""; display:block; width:84px; height:4px; margin:16px auto 0; background: var(--accent-grad); border-radius:4px; }

/* Section headers with underline */
h2.section-header { 
  font-size: clamp(2rem,3vw,2.5rem); 
  font-weight:600; 
  margin-bottom: 1.8rem; 
  text-align:center; 
  position:relative; 
  letter-spacing:.5px; 
}
h2.section-header:after { 
  content:""; 
  display:block; 
  width:84px; 
  height:4px; 
  margin:16px auto 0; 
  background: var(--accent-grad); 
  border-radius:4px; 
}

.container-narrow { max-width: 1080px; margin:0 auto; padding:0 24px; }

.container { max-width: 1200px; margin:0 auto; padding:0 24px; }

/* ===== Projects Grid (3 columns) ===== */
.projects-carousel-wrapper { position: relative; perspective: 1200px; }
.projects-viewport { position:relative; overflow:hidden; }
.projects-track.projects-grid { /* reuse existing class names */
  display:flex;
  gap:var(--carousel-gap);
  padding:1rem 0 1.5rem;
  will-change:transform;
  touch-action:pan-y;
  box-sizing:border-box;
  transition: filter 0.7s ease;
}
.projects-track.is-animating {
  filter: blur(0.5px);
}
.projects-track.is-animating .project-item {
  transform: scale(0.98);
  filter: brightness(0.95);
}
/* disable native scroll behavior since we manage translateX */
.projects-track.projects-grid::-webkit-scrollbar { display:none; }

/* Optional responsive fallbacks (comment out to force 3 columns always) */
@media (max-width: 992px) {
  .projects-grid .project-item { flex: 0 0 calc(50% - .75rem); }
}
@media (max-width: 576px) {
  .projects-track.projects-grid { gap:0; padding:1rem 0 1.5rem; }
  .projects-grid .project-item { flex: 0 0 100%; }
}

/* Carousel sizing: 3 columns default ( (100% - 2*gap) / 3 ) */
.projects-track .project-item { flex:0 0 calc((100% - (var(--carousel-gap) * 2)) / 3); }

/* Ensure desktop layout is enforced (after mobile/medium overrides) */
@media (min-width: 993px) {
  .projects-track.projects-grid { gap: var(--carousel-gap); }
  .projects-track .project-item { flex:0 0 calc((100% - (var(--carousel-gap) * 2)) / 3); }
}

/* Hide native scrollbar (non-destructive) */
.projects-grid::-webkit-scrollbar { display: none; }

/* Navigation arrows */
.projects-nav-btn { position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.95); border:1px solid var(--border); width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 4px 16px -6px rgba(30,50,70,.3); color:var(--text-soft); backdrop-filter:blur(12px); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index:5; font-size: 1.2rem; }
.projects-nav-btn:hover { background:#fff; color:var(--accent); box-shadow:0 8px 24px -8px rgba(36,107,255,.4); transform:translateY(-50%) scale(1.08); }
.projects-nav-btn:active { transform:translateY(-50%) scale(.98); }
.projects-nav-btn:focus-visible { outline:none; box-shadow: var(--focus); }
.projects-nav-prev { left:-64px; }
.projects-nav-next { right:-64px; }
@media (max-width:1300px){
  .projects-nav-prev { left:4px; }
  .projects-nav-next { right:4px; }
}
@media (max-width:720px){
  .projects-nav-btn { width:40px; height:40px; }
}

.carousel-counter { 
  position: absolute; 
  bottom: -48px; 
  left: 50%; 
  transform: translateX(-50%); 
  background: rgba(255,255,255,0.95); 
  backdrop-filter: blur(8px); 
  border: 1px solid var(--border); 
  border-radius: 20px; 
  padding: 8px 16px; 
  font-size: 0.9rem; 
  font-weight: 600; 
  color: var(--text-soft); 
  box-shadow: 0 2px 8px -2px rgba(30,50,70,.15);
  z-index: 10;
  display: flex;
  gap: 4px;
  align-items: center;
}
.counter-current { 
  color: var(--accent); 
  font-size: 1rem;
}
.carousel-counter .counter-total {
  color: var(--text-faint);
}

body.no-js .projects-track { flex-wrap:wrap; }
body.no-js .projects-nav-btn { display:none; }

/* Final mobile override: ensure exactly one card per view on very small screens */
@media (max-width: 576px) {
  .projects-track .project-item { flex:0 0 100% !important; }
}

/* ===== Simplified Project Card ===== */
.project-item { background:linear-gradient(155deg,#ffffff,#f1f6ff); border:1px solid var(--border); border-radius: 22px; padding:24px 22px 22px; display:flex; flex-direction:column; gap:12px; box-shadow:0 2px 8px -2px rgba(30,50,70,.1),0 1px 0 0 rgba(255,255,255,.7) inset; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s ease, filter 0.7s ease; pointer-events:auto; position:relative; min-height:200px; overflow:hidden; transform-origin: center; }
.project-number { position: absolute; top: 16px; right: 18px; font-size: 2.5rem; font-weight: 700; color: rgba(13,85,255,0.08); line-height: 1; pointer-events: none; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.project-item:hover .project-number { color: rgba(13,85,255,0.12); }
.project-item::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 85% 12%,rgba(36,107,255,0.18),transparent 65%); opacity:0; transition: opacity 0.4s; pointer-events:none; border-radius:inherit; }
.project-item::after { content:""; position:absolute; inset:-2px; background: var(--accent-grad); opacity:0; border-radius: 23px; z-index:-1; transition: opacity 0.4s; }
.project-item:hover { border-color: var(--accent-alt); box-shadow:0 12px 32px -14px rgba(36,107,255,.5),0 6px 16px -6px rgba(30,50,70,.22); transform:translateY(-8px); }
.project-item:hover::before { opacity:1; }
.project-item:hover::after { opacity:0.15; }
.project-item:focus-within { border-color: var(--accent-alt); box-shadow:0 0 0 3px #ffffff,0 0 0 6px rgba(13,85,255,0.5),0 14px 30px -12px rgba(36,107,255,.42); }
.pi-title { font-size:1rem; font-weight:600; margin:0; letter-spacing:.3px; display:flex; text-align:left; gap:8px; flex-wrap:wrap; }
.pi-desc { font-size:.88rem; line-height:1.42; margin:0 0 4px; color: var(--text-soft); text-align:left}
.pi-link { align-self:flex-start; --btn-bg: var(--accent-grad); font-size:.72rem; text-transform:uppercase; letter-spacing:1.1px; font-weight:700; background: var(--btn-bg); color:#fff !important; padding:9px 18px 10px; border-radius: 999px; text-decoration:none; transition: var(--transition); box-shadow:0 5px 18px -8px rgba(36,107,255,.55); pointer-events:auto; position:relative; display:inline-flex; gap:8px; }
.pi-link::after { content:"→"; font-size:.85em; transition: transform var(--transition); }
.pi-link:hover { filter:brightness(1.08); box-shadow:0 10px 28px -10px rgba(36,107,255,.55); color:#fff; }
.pi-link:hover::after { transform: translateX(4px); }
.pi-link:active { transform:translateY(1px); }
.pi-link:focus-visible { outline:none; box-shadow: var(--focus); }

/* ===== Tech Stack Badges ===== */
.pi-stack { display:flex; flex-wrap:wrap; gap:6px; margin: -2px 0 2px; }
.pi-desc-stack { font-size:.88rem; color: var(--text-soft); margin:0 0 4px; }
.pi-tag { font-size:.58rem; font-weight:600; letter-spacing:.5px; padding:4px 9px 5px; border-radius:999px; background:var(--bg-soft); border:1px solid var(--border); color: var(--text-soft); line-height:1; position:relative; }
.pi-tag[data-type="web"] { background:#e5f3ff; border-color:#c6e5ff; color:#0d4d96; }
.pi-tag[data-type="devops"] { background:#e9f7ef; border-color:#cce9d8; color:#1a6d3a; }
.pi-tag[data-type="util"] { background:#f2f2f5; border-color:#d9dbe0; color:#555e66; }
.pi-tag[data-type="ml"] { background:#fff4e5; border-color:#f2d8b3; color:#9a6405; }
.pi-tag[data-type="api"] { background:#eef3ff; border-color:#d2e0ff; color:#2a4f9c; }
.pi-tag[data-type="robotics"] { background:#f0ecff; border-color:#d9ceff; color:#4d3799; }

@media (prefers-reduced-motion: no-preference) {
  .pi-tag { transition: background var(--transition), color var(--transition), border-color var(--transition); }
  .pi-tag:hover { filter:brightness(1.05); }
}

/* ===== Text Sections ===== */
.about p.lead, #research p.lead, #contact p.lead { color: var(--text-soft); font-size:1.02rem; }

footer { background:linear-gradient(180deg, rgba(233,238,243,0.5) 0%, #e9eef3 100%); padding:32px 0 32px; text-align:center; font-size:.85rem; color: var(--text-faint); margin-top:60px; border-top: 1px solid rgba(181,196,209,0.3); }
footer a { color: var(--accent-alt); text-decoration:none; transition: color 0.2s; }
footer a:hover { text-decoration:underline; color: var(--accent); }

/* ===== Accessibility & Focus ===== */
a, button { -webkit-tap-highlight-color: rgba(0,0,0,0); }
*:focus-visible { outline:none; box-shadow: var(--focus); border-radius:8px; }

/* ===== Responsive ===== */
@media (max-width: 720px) { header { padding:100px 0 60px; } }

/* ===== Enhanced Section Divider (HR) ===== */
hr {
  position: relative;
  border: none;
  height: 1px;
  width: min(960px, 88%);
  margin: 56px auto;
  background: linear-gradient(90deg, rgba(13,85,255,0) 0%, rgba(13,85,255,0.35) 50%, rgba(13,85,255,0) 100%);
}
/* accent bar centered */
hr::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -1px;
  width: 120px;
  height: 3px;
  background: var(--accent-grad);
  border-radius: 999px;
  opacity: .9;
}
/* center dot */
hr::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  background: var(--bg-alt);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(36,107,255,.18), 0 8px 22px -10px rgba(30,50,70,.28);
}

@media (max-width: 720px) {
  hr { width: 92%; margin: 44px auto; }
  hr::before { width: 90px; }
  hr::after { width: 10px; height: 10px; }
}
@media (prefers-reduced-motion: no-preference) {
  hr::after { transition: box-shadow var(--transition), transform var(--transition); }
  hr:hover::after { box-shadow: 0 0 0 3px rgba(36,107,255,.22), 0 10px 26px -12px rgba(30,50,70,.32); transform: translate(-50%, -50%) scale(1.06); }
}

/* ===== Service Status Badges ===== */
.status-badge{display:inline-flex;align-items:center;gap:.4rem;font-size:.85rem;margin-left:.25rem;user-select:none}
.status-dot{width:.6rem;height:.6rem;border-radius:50%;display:inline-block}
.status-checking .status-dot{background:#ffc107;box-shadow:0 0 6px rgba(255,193,7,.7);animation:pulse 1.2s ease-in-out infinite}
.status-online .status-dot{background:#28a745;box-shadow:0 0 6px rgba(40,167,69,.7)}
.status-offline .status-dot{background:#dc3545;box-shadow:0 0 6px rgba(220,53,69,.7)}
@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.2)}100%{transform:scale(1)}}
.status-text{color:#6c757d}
.status-online .status-text{color:#198754}
.status-offline .status-text{color:#dc3545}

/* ===== Disabled App Link ===== */
.pi-link.disabled{pointer-events:none;opacity:.55;cursor:not-allowed;filter:grayscale(15%);text-decoration:none!important}

/* ===== Animation Delays ===== */
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-35 { animation-delay: 0.35s; }
.delay-4 { animation-delay: 0.4s; }

/* ===== Header Button Container ===== */
.header-btns { display: flex; gap: 12px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }

/* ===== Project Intro Text ===== */
.project-intro { max-width: 900px; margin-left: auto; margin-right: auto; font-size: 1.05rem; line-height: 1.7; }

/* ===== VPS Notice ===== */
.vps-notice { font-size: small; color: var(--text-faint); margin-top: 1rem; }

/* ===== Project Link Container ===== */
.pi-links { display: flex; gap: 8px; flex-wrap: wrap; }

/* ===== Secondary Project Link (GitHub) ===== */
.pi-link.secondary { 
  background: rgba(255, 255, 255, 0.7); 
  color: var(--text) !important; 
  border: 1px solid var(--border-strong);
  box-shadow: 0 2px 8px -2px rgba(30,50,70,.15);
}
.pi-link.secondary::after { 
  content: "↗"; 
  font-size: .9em;
}
.pi-link.secondary:hover { 
  background: rgba(255, 255, 255, 0.95); 
  border-color: var(--accent);
  color: var(--accent) !important;
  box-shadow: 0 4px 16px -4px rgba(36,107,255,.3);
  filter: none;
}

/* ===== Diagram Image ===== */
.diagram-img { border-radius: 16px; box-shadow: 0 8px 24px -8px rgba(30,50,70,.2); }

/* ===== Why Section Text ===== */
.why-text { max-width: 820px; margin: 0 auto; font-size: 1.05rem; line-height: 1.7; }

/* ===== Email Link ===== */
.email-link { color: var(--accent-alt); font-weight: 600; }

/* ===== About Section ===== */
#about { padding: 50px 0 30px; }
.about-text { 
  max-width: 820px; 
  margin: 0 auto; 
  font-size: 1.05rem; 
  line-height: 1.7; 
  color: var(--text-soft);
}

/* ===== Skills Section ===== */
#skills { padding: 50px 0; }
.skills-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
  gap: 24px; 
  max-width: 1100px; 
  margin: 0 auto;
}
.skill-category { 
  background: linear-gradient(155deg, #ffffff, #f8fafc); 
  border: 1px solid var(--border); 
  border-radius: 16px; 
  padding: 24px; 
  box-shadow: 0 2px 8px -2px rgba(30,50,70,.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.skill-category:hover { 
  transform: translateY(-4px); 
  box-shadow: 0 8px 24px -8px rgba(36,107,255,.3);
  border-color: var(--accent-alt);
}
.skill-category-title { 
  font-size: 1.1rem; 
  font-weight: 600; 
  margin-bottom: 16px; 
  color: var(--text);
}
.skill-tags { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 8px;
}
.skill-badge { 
  font-size: 0.85rem; 
  font-weight: 600; 
  padding: 8px 14px; 
  background: rgba(36,107,255,0.08); 
  color: var(--accent); 
  border: 1px solid rgba(36,107,255,0.15); 
  border-radius: 8px;
  transition: all 0.2s;
}
.skill-badge:hover { 
  background: rgba(36,107,255,0.12); 
  border-color: var(--accent);
  transform: translateY(-1px);
}

/* ===== Project Filters ===== */
.project-filters { 
  display: flex; 
  justify-content: center; 
  gap: 12px; 
  margin: 32px 0; 
  flex-wrap: wrap;
}
.filter-btn { 
  background: rgba(255, 255, 255, 0.7); 
  color: var(--text-soft); 
  border: 1px solid var(--border); 
  padding: 10px 20px; 
  font-size: 0.9rem; 
  font-weight: 600; 
  border-radius: 999px; 
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px -2px rgba(30,50,70,.1);
}
.filter-btn:hover { 
  background: rgba(255, 255, 255, 0.95); 
  border-color: var(--accent-alt); 
  color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px -4px rgba(36,107,255,.3);
}
.filter-btn.active { 
  background: var(--accent-grad); 
  color: #fff; 
  border-color: var(--accent);
  box-shadow: 0 4px 16px -6px rgba(36,107,255,.5);
}
.filter-btn:focus-visible { 
  outline: none; 
  box-shadow: var(--focus);
}

/* Project filtering animation */
.project-item.hidden { 
  display: none;
}

/* ===== Contact/CTA Section ===== */
#contact { padding: 60px 0; }
.contact-text { 
  max-width: 720px; 
  margin: 0 auto 40px; 
  font-size: 1.1rem; 
  line-height: 1.8; 
  color: var(--text-soft);
}
.contact-links { 
  display: flex; 
  gap: 20px; 
  justify-content: center; 
  flex-wrap: wrap;
  max-width: 900px;
  margin: 0 auto;
}
.contact-btn { 
  margin: 1em;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.85); 
  color: var(--text); 
  border: 1px solid var(--border);
  padding: 16px 28px; 
  font-size: 1rem; 
  font-weight: 600; 
  border-radius: 12px; 
  text-decoration: none !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px -2px rgba(30,50,70,.15);
  min-width: 200px;
  justify-content: center;
}
.contact-btn svg { 
  flex-shrink: 0;
  transition: transform 0.3s;
}
.contact-btn:hover { 
  background: #fff; 
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px -8px rgba(36,107,255,.4);
}
.contact-btn:hover svg {
  transform: scale(1.1);
}
.contact-btn:active { 
  transform: translateY(-1px);
}
.contact-btn:focus-visible { 
  outline: none; 
  box-shadow: var(--focus);
}

@media (max-width: 768px) {
  .contact-links {
    flex-direction: column;
    align-items: stretch;
    max-width: 400px;
  }
  .contact-btn {
    width: 100%;
  }
}

/* ===== Profile Image ===== */
.profile-image-wrapper {
  margin: 0 auto 1.5rem;
  width: 120px;
  height: 120px;
}
.profile-image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--bg-alt);
  box-shadow: var(--shadow-lg);
}

/* ===== Skills Section ===== */
#skills {
  padding: 3rem 1rem;
}
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 2.5rem;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.skill-category {
  background: var(--bg-alt);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
}
.skill-category:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.skill-category-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--text);
}
.skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.skill-tag {
  background: linear-gradient(135deg, var(--bg-soft), var(--bg));
  border: 1px solid var(--border);
  padding: 0.4rem 0.9rem;
  border-radius: 20px;
  font-size: 0.875rem;
  color: var(--text-soft);
  transition: all var(--transition);
}
.skill-tag:hover {
  background: var(--accent-grad);
  color: white;
  border-color: transparent;
  transform: translateY(-2px);
}

/* ===== Project Types (CTA Enhancement) ===== */
.project-types {
  margin: 2.5rem auto 3rem;
  max-width: 700px;
}
.project-types-label {
  font-weight: 600;
  color: var(--text);
  margin-bottom: 1.5rem;
  text-align: center;
  font-size: 1.1rem;
}
.project-types-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}
.project-types-list li {
  background: var(--bg-alt);
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.95rem;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 500;
}
.project-types-list li:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
  background: linear-gradient(135deg, var(--bg-alt), var(--bg-soft));
}
.project-types-list li::before {
  content: attr(data-icon);
  font-size: 1.5rem;
  flex-shrink: 0;
  filter: grayscale(0.3);
  transition: all var(--transition);
}
.project-types-list li:hover::before {
  filter: grayscale(0);
  transform: scale(1.15);
}

/* ===== VPS Badge ===== */
.badge-online {
  color: #22c55e;
  font-size: 0.8em;
  margin-right: 0.25rem;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@media (max-width: 768px) {
  .skills-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .project-types {
    padding: 0 1rem;
  }
  .project-types-list {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .project-types-list li {
    padding: 1rem 1.25rem;
  }
}