:root{
      --green:#0b8a63; /* primary dark green */
      --green-2:#0f9b6f;
      --bg:#050607; /* near black */
      --card:#0b0f0e;
      --muted:#9aaea0;
      --glass: rgba(255,255,255,0.04);
      --accent-white: #e9f7f0;
      --max-width:1200px;
      --radius:16px;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    }
    *{box-sizing:border-box}
    html,body{height:100%;margin:0;background:linear-gradient(180deg,#031007 0%, #060708 60%);color:var(--accent-white);scroll-behavior:smooth}
    a{color:inherit;text-decoration:none}
    .container{max-width:var(--max-width);margin:0 auto;padding:28px}

    /* NAV */
    header{position:fixed;left:0;right:0;top:0;height:72px;z-index:40;backdrop-filter:blur(6px);display:flex;align-items:center}
    .nav-inner{display:flex;align-items:center;justify-content:space-between;width:100%;gap:16px;padding:0 20px}
    .brand{display:flex;align-items:center;gap:12px}
    .logo{width:44px;height:44px;border-radius:10px;background:linear-gradient(135deg,var(--green),#003f2b);display:grid;place-items:center;font-weight:800}
    .nav-links{display:flex;gap:18px;align-items:center}
    .nav-links a{padding:8px 12px;border-radius:10px;color:var(--accent-white);font-weight:600}
    .cta{background:linear-gradient(90deg,var(--green-2),var(--green));padding:10px 14px;border-radius:10px}

    /* Hamburger */
    .hamburger{display:none;background:transparent;border:0;color:var(--accent-white);cursor:pointer}
    .hamburger .bar{width:26px;height:2px;background:var(--accent-white);display:block;margin:6px 0;border-radius:2px;transition:all .25s}

    .hamburger.active .bar:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active .bar:nth-child(2) {
  opacity: 0;
}

.hamburger.active .bar:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}


    /* HERO */
    main{padding-top:92px}
    .hero{display:grid;grid-template-columns:1fr 420px;gap:32px;align-items:center;padding:60px 0}
    .hero-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:28px;border-radius:var(--radius);box-shadow:0 6px 30px rgba(2,8,8,0.6);position:relative;overflow:visible}

    /* animated particles behind hero */
    .particles{position:absolute;inset:0;z-index:0;pointer-events:none}
    .particle{position:absolute;border-radius:999px;opacity:.08;filter:blur(10px);transform:translate3d(0,0,0);animation:float 8s ease-in-out infinite}
    @keyframes float{0%{transform:translateY(0) translateX(0) scale(1)}50%{transform:translateY(-18px) translateX(12px) scale(1.05)}100%{transform:translateY(0) translateX(0) scale(1)}}

    .hero-content{position:relative;z-index:2}
    .eyebrow{color:var(--muted);font-weight:600;text-transform:uppercase;font-size:12px}
    h1{margin:8px 0 12px;font-size:36px;line-height:1.02}
    p.lead{color:var(--muted);margin:0 0 18px}
    .hero-cta{display:flex;gap:12px}
    .btn{padding:10px 14px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);font-weight:700;cursor:pointer}
    .btn-primary{background:linear-gradient(90deg,var(--green),var(--green-2));box-shadow:0 6px 20px rgba(11,138,99,0.12)}
    .btn-ghost{background:transparent}

    /* avatar */
    .avatar-wrap{display:flex;justify-content:center}
    .avatar{width:320px;height:320px;border-radius:24px;background:linear-gradient(135deg,#072b20,#00140f);display:grid;place-items:center;overflow:hidden;position:relative;border:1px solid rgba(255,255,255,0.03)}
    .avatar img{width:85%;height:85%;object-fit:cover;border-radius:50%;border:8px solid rgba(0,0,0,0.4);box-shadow:0 10px 40px rgba(0,0,0,0.7)}
    .avatar::after{content:'';position:absolute;inset:auto 12px 12px auto;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle at 30% 30%, rgba(10,200,140,0.12), transparent 35%);filter:blur(18px);}

    /* ABOUT */
    .about{display:grid;grid-template-columns:1fr 320px;gap:26px;margin-top:36px}
    .card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:22px;border-radius:14px;border:1px solid rgba(255,255,255,0.03)}
    .skills{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
    .chip{background:var(--glass);padding:8px 10px;border-radius:999px;font-weight:600;color:var(--muted);}

    /* Experience flowchart */
    .flowchart{margin-top:36px}
    .flow-grid{display:flex;flex-direction:column;gap:18px}
    .node{display:flex;align-items:center;gap:14px;padding:14px;border-radius:12px;background:linear-gradient(90deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));border:1px solid rgba(255,255,255,0.02)}
    .node .dot{width:14px;height:14px;border-radius:999px;background:var(--green);flex:0 0 14px;box-shadow:0 6px 18px rgba(11,138,99,0.12)}
    .node h4{margin:0;font-size:16px}
    .node p{margin:0;color:var(--muted);font-size:13px}
    .flow-line{height:36px;border-left:2px dashed rgba(255,255,255,0.03);margin-left:7px}

    /* GALLERY */
    .gallery{margin-top:36px}
    .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
    .grid img{width:100%;height:200px;object-fit:cover;border-radius:12px;cursor:pointer;border:1px solid rgba(255,255,255,0.03);transition:transform .28s}
    .grid img:hover{transform:scale(1.03)}

    /* CONTACT */
    .contact-grid{display:grid;grid-template-columns:1fr 360px;gap:20px;margin-top:36px}
    form{display:grid;gap:12px}
    input,textarea{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:12px;border-radius:10px;color:var(--accent-white);outline:none}
    textarea{min-height:140px;resize:vertical}

    /* FOOTER */
    footer{margin-top:46px;padding:30px 0;color:var(--muted)}
    .footer-inner{display:flex;justify-content:space-between;align-items:center;gap:12px}
    .socials{display:flex;gap:12px}
    .icon-btn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:10px;background:transparent;border:1px solid rgba(255,255,255,0.04)}
    


      #cookieConsent {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background: linear-gradient(135deg, var(--green), var(--green-2));
      color: #042016;
      padding: 14px 20px;
      border-radius: 14px;
      box-shadow: 0 6px 20px rgba(11,138,99,0.3);
      font-size: 14px;
      max-width: 280px;
      z-index: 150;
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 600;
      backdrop-filter: blur(8px);
      opacity: 0.95;
      user-select: none;
    }
    #cookieConsent button {
      background: #042016;
      border: none;
      color: var(--green-2);
      font-weight: 700;
      padding: 6px 14px;
      border-radius: 10px;
      cursor: pointer;
      transition: background-color 0.25s ease, color 0.25s ease;
      font-size: 13px;
      user-select: none;
    }
    #cookieConsent button:hover {
      background: var(--green-2);
      color: #042016;
    }
    #cookieConsent button.decline {
      background: transparent;
      color: #042016cc;
      font-weight: 600;
      border: 1px solid #042016cc;
    }
    #cookieConsent button.decline:hover {
      background: #042016;
      color: var(--green-2);
      border-color: var(--green-2);
    }
  .certifications-section {
  padding: 60px 20px;
  background-color: #0b0f0c;
  color: white;
  text-align: center;
}

.timeline {
  position: relative;
  max-width: 900px;
  margin: 40px auto;
}

.timeline::after {
  content: '';
  position: absolute;
  width: 3px;
  background-color: #00ff88;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 15px #00ff88;
}

.timeline-item {
  padding: 20px;
  position: relative;
  width: 50%;
}

.timeline-item:nth-child(odd) {
  left: 0;
}

.timeline-item:nth-child(even) {
  left: 50%;
}

.timeline-dot {
  position: absolute;
  top: 15px;
  width: 16px;
  height: 16px;
  background-color: #00ff88;
  border-radius: 50%;
  box-shadow: 0 0 10px #00ff88;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

.timeline-content {
  background: rgba(0, 255, 136, 0.05);
  border: 1px solid rgba(0, 255, 136, 0.3);
  padding: 20px;
  border-radius: 8px;
  position: relative;
  z-index: 2;
}

.timeline-content h3 {
  color: #00ff88;
  margin-bottom: 8px;
}

@media (max-width: 768px) {
  .timeline::after {
    left: 10px;
  }
  .timeline-item {
    width: 100%;
    padding-left: 40px;
    margin-bottom: 20px;
  }
  .timeline-item:nth-child(even) {
    left: 0;
  }
  .timeline-dot {
    left: 10px;
    transform: none;
  }
}

.rov-section {
  padding: 60px 20px;
  background-color: #0b0f0c;
  color: white;
  text-align: center;
}

.rov-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 30px;
}

.rov-card {
  background: rgba(0, 255, 136, 0.05);
  border: 1px solid rgba(0, 255, 136, 0.3);
  padding: 20px;
  border-radius: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.rov-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 15px rgba(0, 255, 136, 0.4);
}

.rov-card h3 {
  color: #00ff88;
  margin-bottom: 10px;
}

.rov-video {
  margin-top: 15px;
}

.rov-video iframe {
  width: 100%;
  height: 200px;
  border-radius: 8px;
  border: none;
}



    /* responsive */
    @media (max-width:980px){
      .hero{grid-template-columns:1fr 300px}
      .nav-links{display:none}
      .hamburger{display:block}
      .grid{grid-template-columns:repeat(2,1fr)}
    }
    @media (max-width:800px){
      .hero{grid-template-columns:1fr;gap:18px}
      .avatar{width:280px;height:280px}
      .about{grid-template-columns:1fr}
      .contact-grid{grid-template-columns:1fr}
      .grid{grid-template-columns:1fr}
      .chip{font-size: 10px;}
      
    }


    /* Mobile slide menu */
    .mobile-menu{position:fixed;inset:72px 0 auto 0;background:linear-gradient(180deg, rgba(2,6,4,0.95), rgba(0,0,0,0.9));height:calc(100vh - 72px);z-index:60;transform:translateY(-20px);opacity:0;pointer-events:none;transition:transform 0.28s ease, opacity 0.28s ease;}
    .mobile-menu.open{opacity:1;pointer-events:auto;transform:translateY(0)}
    .mobile-menu nav{display:flex;flex-direction:column;padding:20px;gap:12px}

    /* small UI niceties */
    .muted{color:var(--muted)}
    .shadow-soft{box-shadow:0 8px 40px rgba(2,8,6,0.6)}

    /* tiny animation for nodes */
    .node{transform-origin:left center;animation:pop .7s cubic-bezier(.2,.9,.3,1)}
    @keyframes pop{0%{opacity:0;transform:translateX(-8px) scale(.99)}100%{opacity:1;transform:none}}

    /* form success */
    .toast{position:fixed;right:20px;bottom:20px;background:linear-gradient(90deg,var(--green),var(--green-2));padding:12px 18px;border-radius:10px;color:#042016;display:none;z-index:80}
    .toast.show{display:block}

    /* fade-up animations */
    .fade-up{opacity:0;transform:translateY(18px);transition:all .6s cubic-bezier(.2,.9,.3,1)}
    .fade-up.in-view{opacity:1;transform:none}

    /* lightbox */
    .lightbox{position:fixed;inset:0;background:rgba(2,6,4,0.86);display:grid;place-items:center;padding:24px;z-index:120;opacity:0;pointer-events:none;transition:opacity .22s}
    .lightbox.open{opacity:1;pointer-events:auto}
    .lightbox-content{max-width:1100px;width:100%;display:flex;gap:12px;align-items:center}
    .lightbox img{width:100%;height:auto;border-radius:10px;max-height:80vh;object-fit:contain}
    .lightbox .meta{min-width:220px;color:var(--muted)}
    .lb-close{position:absolute;right:18px;top:18px;background:transparent;border:0;color:var(--accent-white);font-size:18px}