body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

header {
    background: #333;
    color: #fff;
    padding: 10px 0;
    text-align: center;
}

nav {
    display: flex;
    justify-content: center;
    background: #444;
}

nav a {
    color: #fff;
    padding: 15px 20px;
    text-decoration: none;
    text-align: center;
}

nav a:hover {
    background: #555;
}

.hamburger {
    display: none;
    cursor: pointer;
}

.hamburger div {
    width: 30px;
    height: 3px;
    background: #fff;
    margin: 5px;
    transition: 0.3s;
}

.menu {
    display: none;
    flex-direction: column;
}

.menu.active {
    display: flex;
}

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

footer {
    text-align: center;
    padding: 10px 0;
    background: #333;
    color: #fff;
    position: relative;
    bottom: 0;
    width: 100%;
}

/* ensure viewport sizing works reliably */
html, body { height: 100%; }

/* enable snap scrolling for the page content */
main {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

/* make each section align with the snap and keep existing padding */
section {
  scroll-snap-align: start;
}

/* Make the sections below the home section fullscreen and place content at the top */
#about,
#work {
  min-height: 100vh;
  display: flex;
  align-items: flex-start; /* keep content at the top of the viewport */
  justify-content: flex-start;
  padding: 80px 20px;  /* add extra top padding so content doesn't hide under header */
  box-sizing: border-box;
}

/* leave certifications relaxed (centered or replace if you prefer) */
#certs {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 48px 20px;
  box-sizing: border-box;
}

/* keep inner container full width and let its layout control content */
#about .container,
#work .container,
#certs .container {
  width: 100%;
}

/* mild mobile adjustments so content isn't flush to edges */
@media (max-width: 900px) {
  #about, #work, #certs {
    padding-top: 100px;
    padding-bottom: 80px;
  }
}

/* keep the home section snapping too (optional) */
#home { scroll-snap-align: start; }

:root{
      --accent:#6C63FF;
      --accent-2:#00C2A8;
      --bg:#f4f4f4;
      --card:#ffffff;
      --muted:#666;
    }

    /* Hero */
    .hero {
      display:flex;
      align-items:center;
      justify-content:center;
      min-height:70vh;
      padding:60px 20px;
      background: linear-gradient(120deg, rgba(108,99,255,0.12), rgba(0,194,168,0.06));
      position:relative;
      overflow:visible;
    }
    .hero-inner {
      max-width:1100px;
      width:100%;
      display:grid;
      grid-template-columns: 1fr 420px;
      gap:32px;
      align-items:center;
    }
    .hero-title {
      font-size: clamp(1.8rem, 2.8vw, 3rem);
      margin:0 0 12px;
      color:#111;
      letter-spacing:-0.02em;
    }
    .hero-sub {
      margin:0 0 20px;
      color:var(--muted);
      line-height:1.5;
    }
    .hero-ctas {
      display:flex;
      gap:12px;
      flex-wrap:wrap;
    }
    .btn {
      background:var(--accent);
      color:#fff;
      border:none;
      padding:10px 16px;
      border-radius:10px;
      cursor:pointer;
      font-weight:600;
      transition:transform .18s ease, box-shadow .18s ease;
      box-shadow:0 6px 18px rgba(108,99,255,.12);
      text-decoration:none;
    }
    .btn.secondary {
      background:transparent;
      border:1px solid rgba(17,17,17,.08);
      color:#111;
      box-shadow:none;
      text-decoration:none;
    }
    .btn:hover{ transform:translateY(-4px) }
    .hero-card {
      background:var(--card);
      padding:18px;
      border-radius:14px;
      box-shadow:0 8px 30px rgba(17,17,17,.06);
      display:flex;
      flex-direction:column;
      gap:10px;
      align-items:stretch;
    }
    .profile {
      display:flex;
      gap:12px;
      align-items:center;
    }
    .avatar {
      width:64px;
      height:64px;
      border-radius:12px;
      background:linear-gradient(135deg,var(--accent),var(--accent-2));
      display:flex;
      align-items:center;
      justify-content:center;
      color:#fff;
      font-weight:700;
      font-size:1.1rem;
      box-shadow:0 6px 18px rgba(0,0,0,.08);
    }
    .profile h4 { margin:0; font-size:1rem }
    .profile p { margin:0; color:var(--muted); font-size:.9rem }

    /* Sections */
    section { padding:48px 20px; }
    .container { max-width:1100px; margin:0 auto; }

    .about-grid { display:grid; grid-template-columns: 1fr 340px; gap:28px; align-items:start; }
    .bio { background:var(--card); padding:20px; border-radius:12px; box-shadow:0 8px 24px rgba(17,17,17,.04); }
    .skills { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
    .skill { background:linear-gradient(90deg, rgba(108,99,255,.08), rgba(0,194,168,.06)); padding:6px 10px; border-radius:999px; color:#333; font-weight:600; font-size:.85rem; }

    /* Work */
    .work-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; margin-top:20px; }
    .card {
      background:var(--card);
      padding:14px;
      border-radius:12px;
      box-shadow:0 10px 40px rgba(17,17,17,.04);
      transition:transform .16s ease, box-shadow .16s ease;
      cursor:pointer;
    }
    .card:hover { transform:translateY(-6px); box-shadow:0 18px 48px rgba(17,17,17,.08) }
    .card h5 { margin:8px 0 6px; }
    .card p { margin:0; color:var(--muted); font-size:.9rem; }

    /* Certifications */
    .cert-list { display:flex; gap:12px; flex-wrap:wrap; margin-top:12px; }
    .cert {
      background:linear-gradient(180deg,#fff,#fbfbff);
      border-radius:10px;
      padding:12px;
      min-width:220px;
      box-shadow:0 8px 24px rgba(17,17,17,.04);
    }

    /* Placeholder styling for certifications that are not yet added */
    .cert-placeholder {
      border:2px dashed rgba(108,99,255,0.18);
      background: linear-gradient(180deg, rgba(108,99,255,0.03), rgba(0,194,168,0.02));
      color:rgba(0,0,0,0.6);
      opacity:0.95;
      position:relative;
    }
    .cert-placeholder .placeholder-badge {
      position:absolute;
      top:10px;
      right:10px;
      background:var(--accent);
      color:#fff;
      padding:6px 8px;
      border-radius:999px;
      font-size:.75rem;
      font-weight:700;
    }
    .cert-placeholder .placeholder-title { color:rgba(0,0,0,0.65); display:block; margin-bottom:6px; }
    .cert-placeholder p { color:rgba(0,0,0,0.55); }

    @media (max-width:900px){
      .cert-list { flex-direction:column; }
    }
    .nav-desktop { display:flex; gap:10px; align-items:center; }
    .brand { font-weight:700; color:var(--accent); letter-spacing:-0.02em; }

    /* Mobile adapt */
    @media (max-width:900px){
      .hero-inner { grid-template-columns: 1fr; text-align:center }
      .about-grid { grid-template-columns: 1fr; }
      .nav-desktop { display:none }
    }

    /* Reveal animations */
    .reveal { opacity:0; transform:translateY(10px) scale(.995); transition:all .6s cubic-bezier(.2,.9,.3,1) }
    .reveal.visible { opacity:1; transform:none; }

    /* Menu overlay */
    .menu-overlay {
      position:fixed;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      background:linear-gradient(180deg, rgba(17,17,17,.6), rgba(17,17,17,.6));
      z-index:60;
      opacity:0;
      pointer-events:none;
      transition:opacity .25s ease;
    }
    .menu-overlay.open { opacity:1; pointer-events:auto; }
    .menu-box {
      background:linear-gradient(180deg,#fff,#fbfbff);
      border-radius:14px;
      padding:24px;
      width:90%;
      max-width:420px;
      box-shadow:0 18px 60px rgba(17,17,17,.28);
      display:flex;
      flex-direction:column;
      gap:12px;
      align-items:stretch;
    }
    .menu-box button { text-align:left; padding:12px; border-radius:10px; font-weight:700; border:none; background:transparent; cursor:pointer; }
    .menu-close { align-self:flex-end; font-size:1.2rem; background:transparent; border:none; cursor:pointer; }

    /* Modal */
    .modal {
      position:fixed; inset:0; display:grid; place-items:center; z-index:70; pointer-events:none; opacity:0; transition:.18s;
    }
    .modal.open { pointer-events:auto; opacity:1 }
    .modal-card {
      width:90%; max-width:760px; background:var(--card); border-radius:12px; padding:18px; box-shadow:0 22px 80px rgba(17,17,17,.35);
    }

     .btn.secondary2 {
      background:transparent;
      border:1px solid rgba(17,17,17,.08);
      color:#ffffff;
      box-shadow:none;
      opacity:.9;
    }

/* Utilities and moved inline styles */
.container-flex {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.flex-center-gap { display:flex; align-items:center; gap:12px; }
.brand-accent { color:var(--accent-2); }
.brand-sub { color:#fff; opacity:.9; font-weight:700; font-size:.9rem; }
.nav-inner { display:flex; align-items:center; gap:12px; }

.hamburger .bar { height:3px; background:#fff; margin:6px 0; border-radius:3px; }
.hamburger .bar.one { width:28px; }
.hamburger .bar.two { width:18px; opacity:.9; }
.hamburger .bar.three { width:22px; opacity:.8; }

.menu-box h3 { margin:0 0 6px; }
.menu-desc { margin:0 0 12px; color:var(--muted); }
.menu-cta { display:flex; gap:8px; margin-top:12px; }
.menu-cta .btn { flex:1; }

.status-row { display:flex; gap:10px; margin-top:18px; }
.status-dot { width:12px; height:12px; border-radius:50%; background:var(--accent); }
.status-text { color:var(--muted); }

.hero-card-links { margin-top:10px; color:var(--muted); font-size:.94rem; }
.quicklinks p { margin:0 0 10px; }
.quicklinks-buttons { display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:center; }

/* Profile image inside hero card (larger, centered) */
.profile-pic {
  /* keep full image visible: fix height, let width scale to intrinsic size */
  height:280px;
  width:auto;
  max-width:100%;
  object-fit:contain; /* show full image without cropping */
  object-position:center center; /* center the image in the box */
  border-radius:12px;
  box-shadow:0 20px 60px rgba(17,17,17,.16);
  flex-shrink:0;
  display:block;
  align-self:center;
}

/* Responsive downscaling for tablets and phones */
@media (max-width:1100px){
  /* reduce height slightly on medium screens */
  .profile-pic { height:250px; }
}
@media (max-width:900px){
  /* keep image prominent but smaller on tablet/mobile */
  .profile-pic { height:220px; }
}
@media (max-width:520px){
  .profile-pic { height:160px; border-radius:10px; }
  .hero-inner { gap:20px; grid-template-columns: 1fr; }
}

/* Improve perceived image quality when scaled/zoomed
   - Encourage GPU compositing (translateZ) to avoid re-rasterization
   - Use subtle contrast/saturation + tiny blur to reduce visible grain
   - Provide optional stronger soften class if you prefer a smoother look */
.profile-pic {
  image-rendering: auto; /* default, prefer smooth scaling for photos */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
  /* subtle softening to reduce pixel-level grain without overly blurring details */
  /* reduced softness for crisper appearance */
  filter: blur(.18px) contrast(1.02) saturate(1.03);
}

/* stronger soften class (use only if needed) - reduced so it's less blurry */
.profile-pic--soften { filter: blur(.45px) contrast(1.02) saturate(1.02); }

/* Optional slight blur fix (uncomment if you'd like to soften blocky pixels)
.profile-pic--soften { filter: blur(.18px) contrast(1.02) saturate(1.02); }
*/

.mt-12 { margin-top:12px; }
.section-heading { margin:8px 0; }
.about-list { margin:0 0 8px 18px; color:var(--muted); }
.cta-row { margin-top:14px; }
.cta-row .btn + .btn { margin-left:8px; }
.side-column { display:flex; flex-direction:column; gap:12px; }

.section-header { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.section-intro { color:var(--muted); margin-top:8px; }
.grid-spacing { margin-top:14px; }

/* New three-column work layout for explicit inline examples */
.work-sections {
  display:flex;
  gap:120px; /* large horizontal separation between the 3 sections */
  margin-top:24px;
  align-items:flex-start;
}
.work-column {
  flex:1 1 0;
  min-width:0; /* allow flex children to shrink properly */
  display:flex;
  flex-direction:column;
  gap:24px;
  border:2px dashed rgba(17,17,17,0.06); /* dashed border to visualize each work column */
  padding:16px;
  border-radius:12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,250,252,0.98));
  box-sizing:border-box;
}
.work-area {
  min-height:640px; /* tall pasteable area for inline examples */
  padding:14px;
  background:transparent;
  border-radius:8px;
  overflow:auto;
}
.big-gap {
  height:160px; /* large vertical gap to separate inline examples (kept for legacy use) */
}
.work-column h4 { margin:0 0 8px; }
.work-item { margin:0; }

/* Pigs Dice game styling — IMPORTANT: do NOT style .dice or .dot selectors here (JS depends on their layout). */
#work-web {
  display:flex;
  flex-direction:column;
  align-items:center; /* center everything horizontally inside the column */
  gap:18px;
}
#work-web .title { text-align:center; width:100%; }
#work-web .title h1 { margin:0 0 6px; font-size:1.6rem; }
#work-web #currentplayer { display:block; color:var(--muted); font-weight:600; }

/* Betting and controls centered (leave #bet and buttons intact for JS) */
#work-web .betting {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  width:100%;
}
#work-web .betting input#bet {
  width:180px;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid rgba(0,0,0,0.08);
  text-align:center;
}
#work-web .betting button {
  padding:8px 14px;
  border-radius:10px;
  border:none;
  background:var(--accent);
  color:#fff;
  cursor:pointer;
  font-weight:700;
}
#work-web .betting button:disabled { opacity:.65; cursor:not-allowed; }

/* Players/pot display: compact and centered */
#work-web .players-container { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; width:100%; }
#work-web .player1, #work-web .player2, #work-web .player3, #work-web .player4, #work-web .pot {
  text-align:center;
  background: rgba(255,255,255,0.7);
  padding:10px 12px;
  border-radius:8px;
  min-width:140px;
  box-shadow:0 8px 22px rgba(0,0,0,0.04);
}

/* Small screens: scale down spacing and controls so the game fits the column */
@media (max-width:520px){
  #work-web .betting input#bet { width:140px; }
  #work-web .player1, #work-web .player2, #work-web .player3, #work-web .player4, #work-web .pot { min-width:120px; padding:8px 10px; }
  #work-web .work-area, #work-web { padding:8px; }
}

@media (max-width:900px){
  .work-sections { flex-direction:column; gap:28px; }
}

.cert-actions { display:flex; gap:8px; margin-top:8px; }
.footer-copy { color:#fff; opacity:.9; }
.social { padding:8px 12px; }
.modal-close { float:right; background:transparent; border:none; font-size:1.3rem; cursor:pointer; }
.muted { color:var(--muted); }

/* fallback: small margin utility used a few places */
.mt-6 { margin-top:6px; }