/* ===== VIVID GLASS THEME + EXTRAS ===== */
:root{
  --bg:#0a0f1f;
  --fg:#e7ecff;
  --muted:#a2accf;
  --surface:rgba(255,255,255,0.06);
  --surface-strong:rgba(255,255,255,0.12);
  --border:rgba(255,255,255,0.14);
  --ring:rgba(0,229,255,0.6);
  --accent-1:#00e5ff; /* cyan */
  --accent-2:#ff4d8d; /* pink */
  --accent-3:#8a5cf6; /* violet */
  --accent-4:#00e18e; /* mint */
  --accent-5:#ffb020; /* amber */
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.35), inset 0 0 0 1px var(--border);
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

html[data-theme="light"]{
  --bg:#f8fbff;
  --fg:#0d1226;
  --muted:#5a6382;
  --surface:rgba(255,255,255,0.7);
  --surface-strong:rgba(255,255,255,0.9);
  --border:rgba(12,16,28,0.10);
  --ring:rgba(138,92,246,0.35);
}

/* Base */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  color:var(--fg);
  background: var(--bg);
  line-height:1.55;
  min-height:100vh;
  overflow-x:hidden;
}

/* Skip link */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  position:fixed; left:16px; top:16px; width:auto; height:auto; padding:8px 12px;
  background:var(--surface-strong); color:var(--fg); border-radius:10px; z-index:9999;
  border:1px solid var(--border); backdrop-filter: blur(6px);
}

/* Animated gradient mesh backdrop */
.bg-mesh{
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(40% 40% at 10% 20%, rgba(255,77,141,.28), transparent 55%),
    radial-gradient(35% 35% at 85% 25%, rgba(0,225,142,.22), transparent 60%),
    radial-gradient(50% 50% at 30% 80%, rgba(138,92,246,.22), transparent 60%),
    radial-gradient(60% 60% at 85% 80%, rgba(0,229,255,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.0));
  filter:saturate(1.2);
  animation: drift 24s ease-in-out infinite alternate;
}
@keyframes drift{
  0%   { transform: translateY(-2%) scale(1); }
  100% { transform: translateY(1.5%) scale(1.03); }
}

/* Subtle grid glow */
.bg-grid{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at 50% -10%, black 40%, transparent 75%);
  opacity:.5;
}

/* Containers */
.container{max-width:1100px;margin:0 auto;padding:24px}
.section{margin-top:36px}

/* Sticky glass header */
.site-header{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,0));
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-top:10px; padding-bottom:10px;
}
.brand{
  display:flex; align-items:center; gap:14px;
}
.brand h1{font-size:1.25rem; margin:0}
.brand .role{color:var(--muted); font-size:.95rem}
nav{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
nav a{
  text-decoration:none; color:var(--fg);
  padding:8px 12px; border-radius:999px;
  background:linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--border);
  backdrop-filter: blur(6px);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
nav a:hover{ transform: translateY(-1px); box-shadow:0 8px 20px rgba(0,229,255,.15) }
nav a:focus-visible{ outline:2px solid var(--ring) }
.tools{display:flex; align-items:center; gap:8px}

/* Theme toggle */
.toggle-theme{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:999px; border:1px solid var(--border);
  background:linear-gradient(180deg, var(--surface), rgba(255,255,255,0.02));
  cursor:pointer; box-shadow: var(--shadow);
}
.toggle-theme svg{ width:18px; height:18px }

/* Hero */
.hero{
  display:grid; gap:18px; margin:18px 0 26px;
  grid-template-columns: 120px 1fr;
  align-items:center;
}
@media (max-width:720px){ .hero{ grid-template-columns: 1fr; } }
.hero .subtitle{ font-size:1.05rem; color:var(--muted); margin-top:4px }
.gradient-text{
  background:linear-gradient(90deg, var(--accent-1), var(--accent-2), var(--accent-3));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow: 0 0 24px rgba(0,229,255,.25);
}
.avatar{
  position:relative; width:110px; height:110px; border-radius:999px;
  display:grid; place-items:center;
}
.avatar::before{
  content:""; position:absolute; inset:-3px; border-radius:999px;
  background: conic-gradient(from 180deg, var(--accent-2), var(--accent-3), var(--accent-1), var(--accent-2));
  filter: blur(6px); opacity:.8; z-index:-1;
}
.avatar img{
  width:100%; height:100%; border-radius:999px; object-fit:cover;
  border:2px solid rgba(255,255,255,.55);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:6px}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:14px; text-decoration:none; color:var(--fg);
  background: linear-gradient(90deg, var(--accent-2), var(--accent-3));
  border:none; box-shadow: var(--shadow);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.btn.secondary{
  background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border:1px solid var(--border);
}
.btn:hover{ transform: translateY(-2px) }
.btn:active{ transform: translateY(0) scale(.98) }

/* Headings */
h1{font-size:clamp(2.1rem,3.8vw,3.2rem);margin:0}
h2{font-size:clamp(1.3rem,2vw,1.6rem);margin:28px 0 12px; position:relative; padding-bottom:8px}
h2::after{
  content:""; position:absolute; left:0; bottom:0; height:3px; width:120px;
  background: linear-gradient(90deg, var(--accent-2), var(--accent-3), var(--accent-1));
  border-radius:999px;
}
h3{margin:0 0 6px}
p{margin:0.5rem 0}
.small{font-size:.92rem}
.muted{color:var(--muted)}

/* Cards / glass */
.cards{ list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px }
.card{
  padding:16px; border-radius:var(--radius);
  background: linear-gradient(180deg, var(--surface), transparent);
  border:1px solid var(--border);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 12px 36px rgba(138,92,246,.25);
}
.card h4{margin:0 0 6px}

/* Experience timeline + company logos */
.timeline{ position:relative; list-style:none; padding:0; margin:0 }
.timeline::before{
  content:""; position:absolute; left:16px; top:0; bottom:0; width:2px;
  background: linear-gradient(var(--accent-3), var(--accent-1));
  opacity:.6;
}
.timeline li{
  position:relative; margin-left:36px; padding:16px; border-radius:var(--radius);
  background:linear-gradient(180deg, var(--surface), transparent);
  border:1px solid var(--border); box-shadow: var(--shadow); backdrop-filter: blur(8px);
}
.timeline li + li{ margin-top:12px }
.timeline li::before{
  content:""; position:absolute; left:-24px; top:20px; width:12px; height:12px; border-radius:999px;
  background: radial-gradient(circle at 30% 30%, #fff, var(--accent-2));
  box-shadow: 0 0 0 3px rgba(255,255,255,.15);
}
.timeline .meta{ display:block; color:var(--muted); font-size:.95rem; margin-top:4px }
.company{
  display:flex; align-items:center; gap:10px; margin-bottom:6px;
}
.company-logo{
  width:28px; height:28px; border-radius:8px; border:1px solid var(--border);
  background:linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.04));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

/* Tags */
.tags{ display:flex; flex-wrap:wrap; gap:8px }
.tags span{
  padding:6px 10px; border-radius:999px; font-weight:500;
  background:linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  border:1px solid var(--border); backdrop-filter: blur(6px);
}

/* Form */
form{ display:grid; gap:12px }
.grid{ display:grid; gap:12px; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)) }
label{ display:grid; gap:6px }
input, textarea{
  padding:12px 12px; border-radius:12px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, var(--surface-strong), rgba(255,255,255,0.02));
  color:var(--fg); font:inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition: border-color .18s ease, box-shadow .18s ease;
}
input:focus, textarea:focus{
  outline:none; border-color: transparent;
  box-shadow: 0 0 0 3px var(--ring);
}
.cf-turnstile{ transform:scale(.96); transform-origin: left top; }

/* Footer */
footer{ margin-top:32px; padding-top:16px; border-top:1px dashed var(--border) }

/* Floating to-top button */
.to-top{
  position:fixed; right:18px; bottom:18px; z-index:40;
  width:44px; height:44px; border-radius:999px; border:1px solid var(--border);
  display:grid; place-items:center;
  background:linear-gradient(180deg, var(--surface), rgba(255,255,255,0.02));
  box-shadow: var(--shadow);
  opacity:0; visibility:hidden; transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.to-top.show{ opacity:1; visibility:visible; transform: translateY(0) }

/* Reveal on scroll */
.reveal{
  opacity:0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease;
}
.reveal.is-visible{ opacity:1; transform:none }

/* Modal (project detail) */
dialog{
  border:none; padding:0; border-radius:20px; width:min(720px, 92vw);
  background: linear-gradient(180deg, var(--surface-strong), rgba(255,255,255,0.06));
  box-shadow: 0 20px 60px rgba(0,0,0,.5), inset 0 0 0 1px var(--border);
  color:var(--fg);
}
dialog::backdrop{
  background: rgba(10,15,31,.65);
  backdrop-filter: blur(3px);
}
.modal-card{ padding:18px }
.modal-header{
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px;
}
.modal-title{ font-size:1.15rem; margin:0 }
.modal-close{
  appearance:none; border:1px solid var(--border); background:linear-gradient(180deg, var(--surface), rgba(255,255,255,0.02));
  border-radius:999px; width:36px; height:36px; color:var(--fg); display:grid; place-items:center; cursor:pointer;
}
.modal-sub{ color:var(--muted); margin:0 0 10px }
.modal-body{ display:grid; gap:10px }
.modal-tags{ display:flex; gap:8px; flex-wrap:wrap }
.modal-tags span{ padding:6px 10px; border-radius:999px; border:1px solid var(--border); background:linear-gradient(180deg, var(--surface), rgba(255,255,255,0.02)); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .btn, nav a, .card, .timeline li{ transition:none !important }
  .bg-mesh { animation:none }
  .reveal{ opacity:1 !important; transform:none !important }
}
/* .skills-grid {
  display: grid;
  gap: 1.25rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.skills-grid h4 { margin-bottom: .5rem; }
.tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.tags span { padding: .25rem .55rem; border-radius: .5rem; border: 1px solid var(--border, rgba(255,255,255,.15)); } */
.tags a {
  display: inline-block;
  padding: .25rem .55rem;
  border-radius: .5rem;
  border: 1px solid var(--border, rgba(255,255,255,.15));
  text-decoration: none;
  color: inherit;
  transition: background .2s;
}
.tags a:hover {
  background: rgba(255,255,255,.1);
}
/* === Mobile-only polish (keeps desktop intact) === */
@media (max-width: 640px){
  .container { padding-inline: 16px; }
  header nav {
    display:flex; gap:10px; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  header nav::-webkit-scrollbar{ display:none; }

  /* Stack cards cleanly on small screens */
  .cards { grid-template-columns: 1fr; gap: 12px; }

  /* Timeline items breathe & stack logos/text */
  .timeline .company { flex-direction: column; align-items: flex-start; }

  /* Make CTA buttons full-width for easy taps */
  .cta .btn { width: 100%; text-align: center; }

  /* Dialogs safe on iOS/small screens */
  dialog[open]{ display:block; } /* Safari */
  .modal-card { width:100%; max-width:none; height: 100dvh; border-radius: 0; padding: 16px; }
  .modal-body { max-height: calc(100dvh - 180px); overflow:auto; }

  /* Move FABs up so they don't clash with nav bars/inputs */
  .to-top { bottom: 80px; right: 16px; }
  #terminalFloat { bottom: 80px; right: 80px; }

  /* Larger tap targets */
  nav a, .btn, .to-top, #terminalFloat, .modal-close { min-width:44px; min-height:44px; }
}

/* Prevent iOS zoom on inputs */
input, textarea, select, button { font-size: 16px; }

/* Make the terminal nav button pop (already styled, keep here too for cascade) */
.terminal-btn {
  font-weight: 700;
  background: linear-gradient(135deg, #0a0f1f, #1e3a8a);
  color: #fff;
  border: 2px solid #2563eb;
  box-shadow: 0 0 10px rgba(37, 99, 235, 0.5);
  transition: all 0.3s ease-in-out;
}
.terminal-btn:hover {
  background: linear-gradient(135deg, #1e3a8a, #2563eb);
  transform: scale(1.05);
  box-shadow: 0 0 18px rgba(37, 99, 235, 0.8);
}
.terminal-btn:active { transform: scale(0.98); }

/* Floating terminal button sits left of back-to-top (already styled) */
.float-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: linear-gradient(135deg, #0a0f1f, #1e3a8a);
  color: #fff;
  border: 2px solid #2563eb;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px rgba(37, 99, 235, 0.5);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  z-index: 999;
}
.float-btn:hover {
  background: linear-gradient(135deg, #1e3a8a, #2563eb);
  transform: scale(1.1);
  box-shadow: 0 0 18px rgba(37, 99, 235, 0.8);
}
#terminalFloat { right: 80px; } /* offset left of to-top */


/* --- Compact header on mobile --- */
@media (max-width: 640px){
  /* Reduce overall header height */
  .site-header { padding-block: 6px; }
  .header-inner { gap: 10px; }

  /* Avatar smaller */
  .brand .avatar img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
  }

  /* Tighten heading and labels */
  .brand h1 {
    font-size: 1.25rem;     /* was larger */
    line-height: 1.15;
    margin: 0 0 2px 0;
  }
  .role {
    font-size: 0.9rem;
    line-height: 1.2;
    margin: 0 0 2px 0;
  }

  /* Make the micro tagline take less space (2-line clamp) */
  .micro {
    font-size: 0.82rem;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;  /* clamp to 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 100%;
    opacity: 0.9;
    margin: 0;
  }

  /* Keep nav compact and scrollable if needed */
  header nav {
    gap: 8px;
    padding-top: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  header nav::-webkit-scrollbar { display: none; }

  /* Reduce background header visuals a touch (optional, visual calm) */
  .bg-mesh, .bg-grid { opacity: 0.6; }
}

@media (max-width: 640px){
  .micro { display: none !important; }
}

/* --- Minimal header for mobile --- */
@media (max-width: 640px){
  .brand h1,
  .brand .role,
  .brand .micro {
    display: none !important; /* hide name, role, tagline */
  }

  .brand .avatar img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
  }

  .header-inner {
    justify-content: center; /* center the avatar */
    gap: 0;
    padding: 8px 0;
  }
}

/* --- Minimal header + top-only shortcuts (mobile) --- */
@media (max-width: 640px){
  /* Hide header texts; keep avatar */
  .brand h1,
  .brand .role,
  .brand .micro { display: none !important; }

  /* Avatar bar fixed at top */
  .site-header{
    position: fixed;
    top: 0; left: 0; width: 100%;
    padding: 6px 0;
    background: var(--bg, #0a0f1f);
    z-index: 1000;
    box-shadow: 0 2px 6px rgba(0,0,0,.3);
  }
  .brand .avatar img{
    width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
  }
  .header-inner{ justify-content: center; gap: 0; }

  /* Hide the original header nav on mobile (we'll insert a copy below the header) */
  header nav{ display: none !important; }

  /* New mobile nav bar that appears just below the fixed header and scrolls away */
  #mobileNavBar{
    position: relative;
    margin-top: 60px;          /* space for fixed avatar bar */
    padding: 8px 12px;
    display: flex;
    gap: 10px;
    justify-content: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #mobileNavBar::-webkit-scrollbar{ display: none; }
  #mobileNavBar a{
    white-space: nowrap;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 999px;
    padding: 6px 10px;
    text-decoration: none;
    font-size: 0.9rem;
  }

  /* Ensure the main content starts after avatar bar + shortcuts row */
  main{ margin-top: 100px; }
}

/* === Mobile: avatar bar + shortcuts only at top (not sticky) === */
@media (max-width: 640px){
  /* Keep texts hidden; keep small avatar */
  .brand h1,
  .brand .role,
  .brand .micro { display: none !important; }

  .brand .avatar img {
    width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
  }

  /* Make header normal flow (not fixed) */
  .site-header {
    position: static !important;
    padding: 6px 0;
    box-shadow: none;
  }

  .header-inner { justify-content: center; gap: 0; }

  /* Show the cloned mobile nav just under the header; also not sticky */
  #mobileNavBar {
    position: static !important;
    margin-top: 0 !important;
    padding: 8px 12px;
    display: flex;
    gap: 10px;
    justify-content: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: transparent;
  }
  #mobileNavBar::-webkit-scrollbar { display: none; }
  #mobileNavBar a {
    white-space: nowrap;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 999px;
    padding: 6px 10px;
    text-decoration: none;
    font-size: 0.9rem;
  }

  /* Since header/nav are no longer fixed, remove extra offset */
  main { margin-top: 0 !important; }
}
/* === Mobile: bring back role + location near avatar === */
@media (max-width: 640px){
  /* Show role + micro again */
  .brand .role,
  .brand .micro {
    display: block !important;
    font-size: 0.85rem;
    line-height: 1.2;
    margin: 2px 0;
    text-align: center;
    opacity: 0.9;
  }

  /* Avatar + text stacked vertically, centered */
  .header-inner {
    flex-direction: column;
    align-items: left;
    gap: 4px;
  }

  /* Keep avatar compact */
  /* .brand .avatar img {
    width: 56px;
    height: 56px;
  } */

  /* Optional: hide the big h1 name if you prefer only role + location */
  /* .brand h1 {
    display: none !important;
  } */
}
/* === Mobile: avatar + name as title + role + location === */
@media (max-width: 640px){
  .header-inner {
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }

  .brand .avatar img {
    width: 56px;
    height: 56px;
  }

  .brand h1 {
    display: block !important;
    font-size: 1.4rem;    /* make it stand out as title */
    font-weight: 700;
    margin: 4px 0 0 0;
    text-align: center;
  }

  .brand .role {
    display: block !important;
    font-size: 1rem;
    font-weight: 500;
    margin: 2px 0;
    text-align: center;
    opacity: 0.95;
  }

  .brand .micro {
    display: block !important;
    font-size: 0.85rem;
    margin: 0;
    text-align: center;
    opacity: 0.8;
  }
}
/* === Mobile: avatar + name as title + role + location === */
@media (max-width: 640px){
  .header-inner {
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }

  .brand .avatar img {
    width: 56px;
    height: 56px;
  }

  .brand h1 {
    display: block !important;
    font-size: 1.4rem;    /* make it stand out as title */
    font-weight: 700;
    margin: 4px 0 0 0;
    text-align: center;
  }

  .brand .role {
    display: block !important;
    font-size: 1rem;
    font-weight: 500;
    margin: 2px 0;
    text-align: center;
    opacity: 0.95;
  }

  .brand .micro {
    display: block !important;
    font-size: 0.85rem;
    margin: 0;
    text-align: center;
    opacity: 0.8;
  }
}