/* ===== Theme (blue/teal on dark; switches to light if user prefers) ===== */
:root{ --bg:#0a0f14; --panel:#0f1620; --card:#0b131a; --border:#13202b; --ring:#1ea1a1; --brand:#2ca6d9; --text:#e6eef5; --muted:#9fb3c8 }
@media (prefers-color-scheme: light){ :root{ --bg:#f6fbff; --panel:#ffffff; --card:#ffffff; --border:#d9e2ec; --text:#0b1a2b; --muted:#4b5b6a; --brand:#1e88e5; --ring:#1ba7a7 } }

/* Base resets */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial; background:var(--bg); color:var(--text); line-height:1.65}
img{max-width:100%; display:block}
.fade-in{opacity:0; animation:fadein .35s ease forwards} @keyframes fadein{to{opacity:1}}

/* Sticky page layout so footer stays at bottom */
html,body{height:100%}
body{min-height:100vh; display:flex; flex-direction:column}
main{flex:1}

/* Nav */
.nav{position:sticky; top:0; z-index:50; background:#0e1a24; border-bottom:1px solid rgba(255,255,255,.06); box-shadow:0 2px 10px rgba(0,0,0,.35)}
.nav-inner{max-width:1200px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:12px 20px}
.brand{font-weight:800;letter-spacing:.4px;color:#eaf4ff;text-decoration:none}
.menu{display:flex;gap:22px;list-style:none}
.menu a{color:#cfe0ef;text-decoration:none;font-weight:700}
.menu a.active, .menu a:hover{color:#ffffff}
.hamb{display:none;background:none;border:0;color:#eaf4ff;font-size:22px}
@media (max-width:820px){ .menu{display:none;position:absolute;right:20px;top:56px;background:#13202b;border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:10px 12px;flex-direction:column} .menu.open{display:flex} .hamb{display:block} }
.menu a.active{position:relative}
.menu a.active::after{content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:linear-gradient(90deg,var(--brand),var(--ring)); border-radius:2px}

/* Sections & utilities */
.section{max-width:1200px;margin:0 auto;padding:64px 20px}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:24px}
.center{text-align:center} .small{font-size:14px} .muted{color:var(--muted)} .spacer{height:12px}
.btn{display:inline-block;background:linear-gradient(135deg,var(--brand),var(--ring)); color:#fff; padding:10px 16px; border-radius:12px; text-decoration:none; font-weight:700; box-shadow:0 10px 30px rgba(46,166,217,.25)}
.btn.ghost{background:transparent;border:1px solid var(--border); color:var(--text)} .text-link{color:var(--brand); text-decoration:none}

/* Hero (subtle glows, parallax) */
.hero{position:relative;background: radial-gradient(1200px 400px at 50% -10%, rgba(44,166,217,.35), transparent 60%), radial-gradient(1000px 500px at 90% 10%, rgba(30,161,161,.25), transparent 60%)}
.hero-inner{max-width:1200px;margin:0 auto;padding:72px 20px; text-align:center}
.hero h1{font-size:clamp(28px,4.5vw,48px)} .hero p{color:var(--muted); margin:8px 0 16px}
.parallax{background-attachment:fixed}

/* About */
.about{display:grid;grid-template-columns:40% 60%;gap:24px;align-items:center}
.about-photo{width:100%;height:auto;max-width:520px;border-radius:16px;object-fit:cover;border:2px solid var(--border)}
.about-copy h2{margin-bottom:8px}
@media (max-width:900px){ .about{grid-template-columns:1fr} }

/* Scrolling logo ticker */
.ticker-wrap{overflow:hidden;border:1px solid var(--border);border-radius:16px;background:#fff}
.ticker{display:flex;gap:28px;align-items:center;padding:18px 24px;animation:scroll 28s linear infinite;width:max-content}
.ticker img{height:56px;object-fit:contain;filter:grayscale(.05);opacity:.95}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Project grid & cards */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px;margin-bottom:8px}
.grid + .center{margin-top:28px} /* spacing before the All Projects button */
.card{background:var(--panel);border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:transform .2s, box-shadow .2s}
.card:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.card img{width:100%;height:240px;object-fit:contain;background:#fff;padding:16px;border-bottom:1px solid var(--border)}
.card .body{padding:18px} .card h3{font-size:18px;margin-bottom:6px} .card p{color:var(--muted);font-size:14px}
/* Nice spacing for lists inside project cards */
.card .body ul { margin: 8px 0 0 18px; color: var(--muted); }
.card .body li { margin-bottom: 6px; }

/* ===== Resume embed ===== */
.resume-intro { text-align: center; margin-bottom: 16px; }

/* Mobile-first: Show download buttons prominently */
.resume-mobile-actions { 
  display: flex; 
  flex-direction: column; 
  gap: 12px; 
  align-items: center; 
  margin: 16px 0; 
}

.resume-mobile-actions .btn {
  min-width: 220px;
  text-align: center;
}

/* Desktop iframe viewer - hidden on mobile */
.resume-desktop-viewer { 
  display: none;
}

.resume-viewport{
  width: min(100vh, 1200px);
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  height: min(85vh, 1200px);
}

.resume-viewport .resume-frame{ 
  width: 100%; 
  height: 100%; 
  border: 0; 
  display: block;
}

.resume-desktop-actions {
  text-align: center;
  margin-top: 12px;
}

.resume-desktop-actions .sep {
  color: var(--muted);
  margin: 0 8px;
}

/* Desktop styles - show iframe, hide mobile actions */
@media (min-width: 768px) {
  .resume-mobile-actions {
    display: none;
  }
  
  .resume-desktop-viewer {
    display: block;
  }
  
  .resume-intro {
    text-align: left;
  }
}

/* Large screens - optimize iframe size */
@media (min-width: 1024px) {
  .resume-viewport {
    width: min(90vh, 1000px);
    height: min(80vh, 1100px);
  }
}






/* ===== CONTACT STUFF  ===== */
/* Contact page only (scoped, won't affect other pages) */
.contact-panel{
  max-width:1100px;      /* panel width inside .section */
  margin:0 auto;
}

.contact-section{ max-width:1200px; width:100%; margin:0 auto; padding:64px 20px; }


.contact-form{
  display:grid;
  gap:12px;
  width:100%;
  max-width:960px;       /* width of the form column */
  margin:0 auto;         /* center it */
}

.contact-form label span{
  display:block; font-weight:600; margin-bottom:6px;
}

.contact-form input,
.contact-form textarea{
  width:100%; margin:0;
  padding:10px 12px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
  border-radius:10px;
}

.contact-form .btn{ 
    justify-self:center; 
    width: 40%;
    
}

.contact-form input:focus,
.contact-form textarea:focus{
  outline:none; box-shadow:0 0 0 3px rgba(30,161,161,.25);
}

.btn[disabled]{opacity:.7; cursor:not-allowed}
.form-status{ margin-top:6px; font-weight:600; }
.form-status.success{ color:#27c281; }
.form-status.error{   color:#ff6b6b; }








/* Footer (black bar) */
.footer{background:#0b0b0b;color:#f2f2f2;text-align:center;padding:48px 20px}
.footer .icons{display:flex;justify-content:center;gap:18px;margin:16px 0}
.footer .icons a{color:#f2f2f2;text-decoration:none;font-weight:600}
.footer small{color:#c9c9c9}

/* Reveal-on-scroll */
.reveal-on-scroll{opacity:.001; transform:translateY(8px); transition:opacity .5s ease, transform .5s ease}
.reveal-on-scroll.is-visible{opacity:1; transform:none}
.delay-1{transition-delay:.08s} .delay-2{transition-delay:.16s}

.page-title{font-size:clamp(26px,4vw,40px); margin-bottom:16px}



/* ===== Certification filters (chips) ===== */
.filters{ display:flex; flex-wrap:wrap; gap:10px }
.chip{ 
    font-size: 1.25rem;
    appearance:none; 
    background:transparent; 
    border:1px solid var(--border); 
    color:var(--text); 
    padding:8px 12px; 
    border-radius:999px; 
    font-weight:700; 
    cursor:pointer 
}
.chip:hover{ border-color: var(--brand) }
.chip.active{ background: linear-gradient(135deg, var(--brand), var(--ring)); color:#fff; border-color: transparent }
.cert-actions{ margin-top:10px }


/* Certifications grid: lock proportions and keep slots when filtering */
.grid.cert-grid{
  max-width: 1100px;
  margin: 16px auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(360px, 1fr)); /* always 2 columns on desktop */
  gap: 24px;
  align-items: start;
  justify-content: center; /* center the two columns */
}

/* When filtered out, hide without collapsing the grid slot */
.grid.cert-grid .card.is-hidden{
  visibility: hidden;
  pointer-events: none;
}

/* Mobile: fall back to one column */
@media (max-width: 900px){
  .grid.cert-grid{ grid-template-columns: 1fr; }
}




/* ===== In-page PDF modal viewer ===== */
.pdf-modal{ position: fixed; inset: 0; background: rgba(0,0,0,.6); display: none; align-items: center; justify-content: center; z-index: 100 }
.pdf-modal.open{ display:flex }
.pdf-modal .panel{ width: min( calc(100vw - 32px), 1100px ); height: min(90vh, 1200px); background: var(--panel); border: 1px solid var(--border); border-radius: 12px; display:flex; flex-direction: column; overflow: hidden }
.pdf-toolbar{ display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--border); background: rgba(10,15,20,.9); color:var(--text) }
.pdf-toolbar .spacer{ flex:1 }
.pdf-btn{ appearance:none; border:1px solid var(--border); background: var(--card); color: var(--text); padding:6px 10px; border-radius:8px; cursor:pointer }
.pdf-btn:hover{ border-color: var(--brand) }
.pdf-canvas-wrap{ flex:1; overflow:auto; background:#fff; padding:12px }
#pdfPages canvas{ display:block; width:100%; height:auto; margin:0 auto 12px }



/* ===== IMDB project page polish ===== */
.imdb-page .report-hero { margin: .5rem 0 1.25rem; }
.imdb-page .report-title { margin: 0 0 .25rem; }
.imdb-page .report-intro { margin: .5rem 0 0.75rem; max-width: 80ch; }
.imdb-page .report-links .sep { color: var(--muted, #666); margin: 0 .35rem; }

/* small stats row */
.imdb-page .stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin: 0 0 1rem;
}
.imdb-page .stat {
  padding: .6rem .7rem;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
  background: var(--card, #fff);
}
.imdb-page .stat-label { margin-bottom: .2rem; }
.imdb-page .stat-value { font-weight: 600; }

/* sections & lists */
.imdb-page .section { margin: 1.25rem 0; }
.imdb-page .tight-list { margin: .4rem 0 0; padding-left: 1rem; }
.imdb-page .tight-list li { margin: .25rem 0; }

/* responsive iframe */
.imdb-page .imdb-embed-wrap { position: relative; width: 100%; max-width: 1200px; margin: .5rem auto 1rem; }
.imdb-page .imdb-embed-16x9 { position: relative; padding-top: 56.25%; }
.imdb-page .imdb-embed-16x9 iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* gallery */
.imdb-page .imdb-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.imdb-page .imdb-gallery img { width: 100%; height: auto; display: block; border-radius: 8px; }

/* IMDB utilities */
.btn-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.btn-row.center { justify-content: center; }