/* style.css — neon/futuristic portfolio (Orbitron) */

/* --- Theme variables --- */
/* Change --accent to #00f0ff if you prefer cyan instead of magenta */
:root{
    --bg: #0b0f1a;
    --panel: #0f1426;
    --muted: #c0cfff;
    --accent: #d603dc; /* MAGENTA (default) — change to #00f0ff for cyan */
    --glass: rgba(255,255,255,0.03);
    --glass-2: rgba(214,3,220,0.06);
    --radius: 14px;
    --max-width: 1100px;
  }
  
  *{box-sizing:border-box}
  html, body {
    min-height: 100%;
    height: auto;
  }
  
  body{
    margin:0;
    font-family: 'Orbitron', sans-serif;
    background: linear-gradient(180deg,#050512 0%, var(--bg) 100%);
    color:var(--muted);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    line-height:1.5;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }
  
  /* header */
  header{
    position:sticky;
    top:0;
    z-index:40;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 36px;
    background: linear-gradient(180deg,#050812, rgba(7,16,39,0.6));
    border-bottom: 1px solid #1a1f3f;
    backdrop-filter: blur(6px);
  }
  .logo{
    font-size:1.6rem;
    color:var(--accent);
    letter-spacing:1px;
    font-weight:700;
  }
  
  main {
    flex: 1;
  }
  
  nav ul{display:flex; gap:18px; list-style:none; margin:0; padding:0}
  nav a{
    color:var(--muted);
    text-decoration:none;
    padding:8px 10px;
    border-radius:8px;
    transition: color .18s, background .18s, transform .18s;
    font-weight:600;
  }
  nav a:hover{ color:var(--accent); transform:translateY(-2px); }
  
  /* sections & layout */
  .container{
    max-width:var(--max-width);
    margin:0 auto;
    padding:0 18px;
  }
  .section{
    padding:68px 0;
    border-bottom:1px solid rgba(255,255,255,0.02);
    opacity:0;
    transform:translateY(30px);
    transition:all .75s cubic-bezier(.2,.9,.2,1);
  }
  .section.in-view{
    opacity:1;
    transform:none;
  }
  
  /* hero */
  .hero{
    text-align:center;
    padding:96px 18px;
  }
  .hero .container{max-width:920px}
  .hero h1{
    margin:0;
    font-size:2.6rem;
    color:var(--accent);
    line-height:1.05;
  }
  .hero .accent{ color:var(--accent) }
  .lead{
    margin-top:12px;
    color:var(--muted);
    opacity:.95;
    font-size:1.05rem;
  }
  .cta-button{
    display:inline-block;
    margin-top:20px;
    padding:12px 28px;
    border-radius:999px;
    background: linear-gradient(90deg,var(--accent), #7b0385);
    color:#0b0f1a;
    font-weight:700;
    text-decoration:none;
    box-shadow: 0 8px 30px rgba(214,3,220,0.12);
    transition: transform .18s, box-shadow .18s;
  }
  .cta-button:hover{ transform:scale(1.04); box-shadow:0 18px 40px rgba(214,3,220,0.14) }
  
  /* card */
  .card{
    background: linear-gradient(180deg,var(--panel), rgba(16,18,38,0.9));
    border-radius:var(--radius);
    padding:22px;
    border:1px solid rgba(214,3,220,0.08);
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
  }
  
  /* about badges */
  .badges{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap}
  .pill{
    background:rgba(255,255,255,0.02);
    padding:8px 12px;
    border-radius:999px;
    font-weight:700;
    font-size:0.85rem;
    color:var(--muted);
  }
  
  /* projects grid */
  .section-title{ color:var(--accent); margin:0 0 18px 0; font-size:1.6rem; }
  .projects-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:18px;
    margin-top:12px;
  }
  .project-card{
    background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.008));
    border-radius:12px;
    padding:18px;
    text-decoration:none;
    color:var(--muted);
    border:1px solid rgba(255,255,255,0.02);
    transition: transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s;
    display:flex;
    flex-direction:column;
    gap:10px;
    min-height:150px;
  }
  .project-card:hover{
    transform: translateY(-10px);
    box-shadow: 0 18px 40px rgba(214,3,220,0.08);
    border: 1px solid rgba(214,3,220,0.12);
  }
  .thumb{
    height:100px;
    border-radius:8px;
    background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(214,3,220,0.02));
    display:flex;
    align-items:center;
    justify-content:center;
    color:rgba(255,255,255,0.18);
    font-size:0.95rem;
    font-weight:700;
    letter-spacing:0.6px;
  }
  .project-card h3{ margin:0; color:var(--accent); font-size:1.05rem; }
  .muted{ color:rgba(192,207,255,0.9); font-size:0.92rem; opacity:0.9 }
  .tags{ margin-top:auto; display:flex; gap:8px; flex-wrap:wrap }
  .tag{ background: rgba(255,255,255,0.02); padding:6px 8px; border-radius:8px; font-weight:700; font-size:0.82rem }
  
  /* footer */
  footer{
    padding:18px 0 36px;
    margin-top:36px;
    border-top:1px solid rgba(255,255,255,0.02);
  }
  .footer-inner{ display:flex; justify-content:center; align-items:center; gap:12px; color:var(--muted); font-size:0.95rem }
  .link{ color:var(--accent); text-decoration:none }
  
  /* responsiveness */
  @media (max-width:980px){
    .projects-grid{ grid-template-columns: repeat(2, 1fr) }
    .hero h1{ font-size:2.2rem }
  }
  @media (max-width:640px){
    header{ padding:14px }
    .projects-grid{ grid-template-columns: 1fr }
    .hero{ padding:48px 14px }
    .hero h1{ font-size:1.8rem }
  }
  
  a {
    color: var(--accent);          /* your magenta (#d603dc) */
    text-decoration: none;         /* remove underline if you want */
  }
  
  a:hover {
    color: #ff4fff;                /* a lighter purple/pink on hover */
    text-decoration: underline;    /* or glow effect if you like */
  }
  
/* --- Quick mobile top-bar fix (no HTML changes) --- */
@media (max-width: 640px) {
  header{
    padding:12px 14px;
    gap:10px;
  }

  .logo{
    font-size:1.1rem;
    max-width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Force nav into a single line and allow horizontal scroll instead of wrapping */
  nav {
    flex: 1 1 auto;
    min-width: 0; /* important to allow shrinking */
  }
  nav ul {
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;           /* do NOT wrap */
    overflow-x: auto;            /* allow side-scroll when items won't fit */
    -webkit-overflow-scrolling: touch;
    margin: 0;
    padding: 6px 0;
  }

  /* compact link appearance */
  nav a {
    padding: 6px 10px;
    font-size: 0.92rem;
    display: inline-block;
    white-space: nowrap;         /* keep each link single-line */
    border-radius: 8px;
  }

  /* optional: subtle scrollbar styling (WebKit) */
  nav ul::-webkit-scrollbar{ height:6px }
  nav ul::-webkit-scrollbar-thumb{
    background: rgba(255,255,255,0.04);
    border-radius: 6px;
  }
}

.btn{ display:inline-block; padding:10px 18px; border-radius:999px; background:linear-gradient(90deg,var(--accent), #7b0385); color:#0b0f1a; text-decoration:none; font-weight:700}