:root{
  --bg:#0b1220;
  --panel:#ffffff;
  --text-main:#e9eef9;

  --accent-1:#00E6FF;
  --accent-2:#7A5CFF;
  --accent-3:#FF7AE6;

  --glass-line: rgba(10,20,40,0.10);
  --shadow: 0 16px 40px rgba(10, 20, 40, 0.20);
  --radius: 16px;
  --max-width:1200px;
}

/* Reset & base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  background: linear-gradient(180deg, #05060a 0%, var(--bg) 60%);
  color: var(--text-main);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* Container */
.container{width:calc(100% - 48px); max-width:var(--max-width); margin:0 auto; padding:24px}

/* Canvas (background) */
#mouse-canvas{
  position: fixed;
  inset: 0;
  width:100vw;
  height:100vh;
  z-index: 0; /* behind content */
  pointer-events: none;
  mix-blend-mode: screen; /* additive visual mixing under glass */
}

/* Header */
.header{position: sticky; top: 18px; z-index: 2; display:flex; justify-content:center; pointer-events: auto;}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 16px; border-radius:12px; background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02)); box-shadow: 0 6px 18px rgba(0,0,0,0.45); border:1px solid rgba(255,255,255,0.04)}
.glass-header{backdrop-filter: blur(10px) saturate(120%)}

/* Nav */
.nav-links{display:flex; gap:10px; align-items:center}
.nav-link{font-weight:700; color:var(--text-main); padding:8px 10px; border-radius:10px; text-decoration:none; transition: all .18s ease}
.nav-link:hover, .nav-link.active{ background: linear-gradient(90deg, rgba(0,230,255,.06), rgba(122,92,255,.06)); color: white; box-shadow: 0 8px 28px rgba(122,92,255,0.06) }

/* Hero */
.hero{ min-height:70vh; display:flex; align-items:center; justify-content:center; text-align:center; position:relative; padding:64px 0 48px; z-index:1 }
.hero-inner{max-width:900px; padding:0 12px}
.hero-title{ font-size: clamp(30px, 6vw, 56px); margin:0 0 12px; line-height:1.02; color: var(--text-main); text-shadow: 0 8px 30px rgba(122,92,255,0.06) }
.hero-sub{ color: rgba(230,240,255,0.85); margin-bottom:18px; font-size:clamp(15px,2.0vw,18px); z-index:1 }

/* Buttons */
.btn{ display:inline-block; padding:12px 18px; border-radius:12px; font-weight:800; letter-spacing:.3px; border:1px solid var(--glass-line); background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); color:var(--text-main); text-decoration:none; transition: transform .18s ease, box-shadow .18s ease; cursor:pointer; z-index:1 }
.btn.primary{ color: white; background: linear-gradient(90deg, var(--accent-2), var(--accent-1)); box-shadow: 0 12px 34px rgba(122,92,255,0.12) }
.btn:hover{ transform: translateY(-3px) }

/* Sections */
.section{ position:relative; z-index:1; margin: 36px auto; padding: 48px 18px; border-radius: 20px }
.glass{ background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.04)); border-radius: var(--radius); border: 1px solid rgba(255,255,255,0.06); box-shadow: var(--shadow); backdrop-filter: blur(12px) saturate(130%); -webkit-backdrop-filter: blur(12px) saturate(130%); transition: transform .22s ease, box-shadow .22s ease, background .22s ease; overflow:hidden }
.glass::after{ content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(135deg, rgba(255,255,255,0.02) 0%, transparent 20%); mix-blend-mode: overlay }

/* Titles (ensured visible) */
.section h2{ margin:2px 10px 2px; font-size: clamp(22px, 3vw, 34px); color: var(--text-main); text-shadow: 0 6px 18px rgba(122,92,255,0.06), 0 10px 26px rgba(0,230,255,0.04); position:relative; z-index:2 }

/* lead */
.lead{ color: rgba(220,230,255,0.75); max-width:80ch; margin:8px auto 20px; text-align:center }

/* Mobile optimization for header */
@media (max-width: 768px) {
  .header-inner {
    flex-direction: column;       /* Stack items vertically if needed */
    padding: 8px 12px;            /* Reduce padding */
    gap: 8px;                     /* Smaller gap between elements */
  }

  .nav-links {
    flex-wrap: wrap;              /* Allow nav links to wrap to next line */
    justify-content: center;
    gap: 6px;                     /* Smaller gaps on mobile */
  }

  .hero {
    padding: 48px 12px 32px;      /* Reduce hero padding on small screens */
  }

  .hero-title {
    font-size: clamp(24px, 8vw, 40px); /* Smaller hero title */
  }

  .hero-sub {
    font-size: clamp(14px, 4vw, 16px); /* Smaller subtitle */
  }

  .btn {
    padding: 10px 14px;           /* Smaller buttons */
    font-size: 14px;
  }
}

/* Profiles & cards */
.profiles{ display:flex; gap:28px; flex-wrap:wrap; justify-content:center; margin-top:20px }
.profile-card{ width:110px; padding:22px; text-align:center; border-radius:14px; position:relative; z-index:2 }
.small-profiles .profile-card{ width:100%; max-width:520px; text-align:left; padding:18px }
.profile-photo{ width:200px; height:200px; object-fit:cover; border-radius:50%; margin:0 auto 12px; border: 2px solid rgba(255,255,255,0.14); box-shadow: 0 8px 22px rgba(10,10,20,0.35) }
.profile-name{ margin:6px 0; font-size:1.15rem; color: white; font-weight:700 }
.profile-role{ margin-bottom:8px; color: rgba(220,230,255,0.8) }
.profile-bio{ color: rgba(210,220,235,0.85); line-height:1.45; max-height:3.2em; overflow:hidden; transition: max-height .36s ease }
/* Existing profile card styles */
.profile-card {
  width: 1100px; /* your desktop size */
  padding: 22px;
  text-align: center;
  border-radius: 14px;
  position: relative;
  z-index: 2;
}

/* Mobile & tablet adjustments */
@media (max-width: 1024px) {
  .profile-card {
    width: 90%;
    max-width: 600px;
    padding: 18px;
  }
  /* other adjustments */
}

@media (max-width: 480px) {
  .profile-card {
    width: 95%;
    padding: 12px;
  }
  /* other adjustments */
}


/* Read-more button */
.read-more-btn{ display:inline-block; margin-top:12px; padding:8px 12px; border-radius:10px; background:transparent; border:1px solid rgba(255,255,255,0.06); color:var(--accent-2); font-weight:700; cursor:pointer; transition: all .2s ease; z-index:2 }
.read-more-btn:hover{ color:var(--accent-1); transform: translateY(-3px) }

/* when expanded */
.profile-card.expanded .profile-bio{ max-height: 14em }
.profile-extra{ margin-top:12px; color: rgba(200,210,230,0.9); display:none }
.profile-card.expanded .profile-extra{ display:block }

/* Projects grid & cards */
.grid{ display:grid; gap:18px; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); margin-top:18px; align-items: start; }
.card{ padding:18px; border-radius:12px; background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02)); position:relative; z-index:2 }
.card h3{ margin:0 0 8px; color:white }
.card p{ color: rgba(200,210,230,0.85) }
/* Project images, tech, and extra section */
.project-img {
  width: 100%;
  max-width: 280px;
  height: 280px;
  object-fit: cover;
  border-radius: 20px;
  margin:0 auto 12px;
  display: block;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

.project-desc {
  color: rgba(220,230,255,0.85);
  margin-bottom: 8px;
}

.project-tech {
  font-size: 0.9rem;
  color: rgba(200,210,230,0.85);
  margin-bottom: 12px;
}

.project-extra {
  display: none;
  margin-top: 12px;
  color: rgba(200,210,230,0.9);
}

/* Read-more button (projects use same style as profile cards) */
.card .read-more-btn {
  display: inline-block;
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--accent-2);
  font-weight: 700;
  cursor: pointer;
  transition: all .2s ease;
}

.card.expanded .project-extra {
  display: block;
}


/* Tech grid */
.tech-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(120px,1fr)); gap:18px; margin-top:18px }
.tech{ padding:14px; display:flex; flex-direction:column; align-items:center; gap:8px; border-radius:12px; text-align:center; font-weight:700; color:white; position:relative; z-index:2 }
.tech-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
}
.tech-logo{ width:68px; height:68px; display:grid; place-items:center; font-weight:900; font-size:18px; border-radius:12px; background:linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); border:1px solid rgba(255,255,255,0.03); padding:8px }
.tech-name{ font-size:0.9rem; color: rgba(230,240,255,0.95) }

/* Footer */
.footer{ margin:40px auto 80px; text-align:center; padding:18px; border-radius:12px; border: 1px solid rgba(255,255,255,0.03); position:relative; z-index:2 }
.footer p{ color: rgba(200,210,230,0.9) }

/* Reveal animations */
.reveal{ opacity:0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease }
.reveal.show{ opacity:1; transform: translateY(0) }

/* Responsive */
@media (max-width: 900px){
  .profiles{ flex-direction:column; align-items:center }
  .header-inner{ padding:8px }
  .hero{ padding-top:40px; padding-bottom:20px }
  .container{ padding:12px }
}

/* ===== Mobile text-only adjustments ===== */
@media (max-width: 768px) {
  /* Hero section */
  .hero-title {
    font-size: clamp(24px, 6vw, 36px);
  }

  .hero-sub {
    font-size: clamp(12px, 3.5vw, 16px);
  }

  /* Navigation */
  .nav-link {
    font-size: 14px;
  }

  /* Buttons */
  .btn {
    font-size: 13px;
  }

  /* Profile cards */
  .profile-name {
    font-size: 1rem; /* smaller name */
  }

  .profile-role {
    font-size: 0.85rem; /* smaller role */
  }

  .profile-bio {
    font-size: 0.8rem; /* smaller bio text */
  }

  .read-more-btn {
    font-size: 0.8rem; /* smaller read-more button text */
  }
}