:root {
      --bg: #021712;
      --bg-soft: #06241c;
      --bg-softer:#0a2d22;
      --accent: #f1e1a6;
      --accent-strong:#f7e6b7;
      --accent-muted:#c1ae76;
      --text-main:#f9fafb;
      --text-muted:#a7b2a5;
      --border:#163326;
      --border-strong:#234231;
      --radius-lg: 20px;
      --shadow-soft: 0 18px 40px rgba(0,0,0,0.7);
      --transition: 0.18s ease-out;
    }

    * { box-sizing:border-box; margin:0; padding:0; }

    html { scroll-behavior:smooth; }

    body {
      min-height:100vh;
      background: radial-gradient(circle at top, #063227 0, #021712 40%, #000 100%);
      color:var(--text-main);
      font-family:"Times New Roman", Georgia, serif;
      line-height:1.55;
      cursor:default;
    }

    img { max-width:100%; display:block; }

    a { color:inherit; text-decoration:none; }

    .container {
      width:100%;
      max-width:1160px;
      margin:0 auto;
      padding:0 1.75rem;
    }

/* INTRO OVERLAY (WELCOME SCREEN) */
#introOverlay {
  position:fixed;
  inset:0;
  background:radial-gradient(circle at top, #063227 0, #021712 40%, #000 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
  opacity:1;
  visibility:visible;
  transition:opacity 1s ease, visibility 1s ease;
}

#introOverlay.hidden {
  opacity:0;
  visibility:hidden;
}

.intro-inner {
  text-align:center;
  animation:introPop 1.4s ease-out;
}

.intro-logo {
  width:110px;
  height:auto;
  margin:0 auto 1.1rem;
  filter:drop-shadow(0 18px 45px rgba(0,0,0,0.9));
}

.intro-title {
  font-size:1.4rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--accent-strong);
}

@keyframes introPop {
  from { transform:scale(0.94); opacity:0; }
  to { transform:scale(1); opacity:1; }
}


    /* HEADER */

    header {
      position:sticky;
      top:0;
      z-index:40;
      background:linear-gradient(to bottom, rgba(1,15,11,0.97), rgba(1,15,11,0.9), transparent);
      backdrop-filter:blur(18px);
      border-bottom:1px solid rgba(33,64,50,0.9);
    }

    .nav-bar {
      height:76px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1.5rem;
    }

    .brand {
      display:flex;
      align-items:center;
      cursor:pointer;
    }

    .brand img {
      height:58px;
      width:auto;
      filter:drop-shadow(0 12px 28px rgba(0,0,0,0.9));
    }

    .nav-links {
      display:flex;
      gap:1.7rem;
      font-size:0.95rem;
      letter-spacing:0.14em;
      text-transform:uppercase;
    }

    .nav-links a {
      position:relative;
      color:var(--text-muted);
      padding-bottom:4px;
      transition:color var(--transition), transform var(--transition);
    }

    .nav-links a::after {
      content:"";
      position:absolute;
      left:0; bottom:0;
      height:2px; width:0;
      background:var(--accent);
      border-radius:999px;
      transition:width var(--transition);
    }

    .nav-links a:hover {
      color:var(--accent-strong);
      transform:translateY(-1px);
    }
    .nav-links a:hover::after { width:100%; }

    .nav-cta {
      padding:0.5rem 1.15rem;
      border-radius:999px;
      border:1px solid rgba(205,184,116,0.8);
      background:rgba(6,31,24,0.96);
      color:var(--accent);
      font-size:0.84rem;
      letter-spacing:0.16em;
      text-transform:uppercase;
      cursor:pointer;
      transition:background var(--transition), box-shadow var(--transition), transform var(--transition), color var(--transition);
    }

    .nav-cta:hover {
      background:var(--accent-strong);
      box-shadow:0 14px 40px rgba(0,0,0,0.8);
      transform:translateY(-1px);
      color:#1f2314;
    }

    .nav-toggle {
      display:none;
      background:none;
      border:1px solid var(--border);
      border-radius:999px;
      color:var(--text-muted);
      padding:0.35rem 0.85rem;
      font-size:0.82rem;
      letter-spacing:0.14em;
      text-transform:uppercase;
      cursor:pointer;
    }

    section { padding:3.8rem 0; }

    /* HERO */

    .hero { padding-top:4.6rem; }

    .hero-inner {
      display:grid;
      grid-template-columns:minmax(0,1.4fr) minmax(0,1.35fr);
      gap:3rem;
      align-items:center;
    }

    .hero-tagline {
      font-size:0.98rem;
      letter-spacing:0.16em;
      text-transform:uppercase;
      color:var(--accent-muted);
      margin-bottom:0.75rem;
    }

    .hero-title {
      font-size:2.8rem;
      letter-spacing:0.12em;
      text-transform:uppercase;
      margin-bottom:0.5rem;
    }

    .hero-subtitle {
      font-size:1.25rem;
      color:var(--accent-strong);
      margin-bottom:1.3rem;
    }

    .hero-text {
      font-size:1rem;
      color:var(--text-muted);
      max-width:36rem;
      margin-bottom:1.7rem;
    }

    .hero-badges {
      display:flex;
      flex-wrap:wrap;
      gap:0.7rem;
      margin-bottom:2rem;
    }

    .hero-badge {
      font-size:0.8rem;
      border-radius:999px;
      border:1px solid var(--border-strong);
      padding:0.3rem 0.8rem;
      background:rgba(7,37,27,0.9);
      color:var(--accent-muted);
    }

    .hero-actions {
      display:flex;
      flex-wrap:wrap;
      gap:0.9rem;
    }

    .btn {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius:999px;
      padding:0.82rem 1.7rem;
      border:1px solid transparent;
      font-size:0.92rem;
      letter-spacing:0.13em;
      text-transform:uppercase;
      cursor:pointer;
      transition:background var(--transition), box-shadow var(--transition), transform var(--transition), border-color var(--transition), color var(--transition);
    }

    .btn-primary {
      background:linear-gradient(135deg,#f8e9b8,#c8b26f);
      color:#1e2515;
      box-shadow:0 18px 45px rgba(0,0,0,0.85);
    }
    .btn-primary:hover {
      transform:translateY(-1px);
      box-shadow:0 24px 55px rgba(0,0,0,0.9);
    }

    .btn-ghost {
      background:transparent;
      color:var(--accent-strong);
      border-color:rgba(206,184,117,0.9);
    }
    .btn-ghost:hover {
      background:rgba(13,46,34,0.95);
      box-shadow:0 15px 40px rgba(0,0,0,0.85);
      transform:translateY(-1px);
    }

    .hero-media {
      background:radial-gradient(circle at top, #104130, #031712 60%);
      border-radius:26px;
      padding:1.7rem 1.6rem;
      border:1px solid rgba(48,90,70,0.95);
      box-shadow:var(--shadow-soft);
    }

    .hero-media-inner {
      display:grid;
      grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
      gap:1.2rem;
      align-items:center;
    }

    .hero-photo {
      border-radius:18px;
      overflow:hidden;
      border:1px solid rgba(220,201,134,0.9);
      box-shadow:0 18px 40px rgba(0,0,0,0.9);
    }

    .hero-meta-title {
      font-size:0.94rem;
      letter-spacing:0.12em;
      text-transform:uppercase;
      color:var(--accent-muted);
      margin-bottom:0.4rem;
    }

    .hero-meta-name {
      font-size:1.15rem;
      margin-bottom:0.6rem;
    }

    .hero-meta-list {
      font-size:0.88rem;
      color:var(--text-muted);
    }

    .hero-meta-list div { margin-bottom:0.32rem; }

    .hero-links {
      margin-top:0.9rem;
      display:flex;
      flex-wrap:wrap;
      gap:0.6rem;
    }

    .hero-link-chip {
      display:inline-flex;
      align-items:center;
      gap:0.5rem;
      padding:0.38rem 0.9rem;
      border-radius:999px;
      border:1px solid var(--border-strong);
      background:#031712;
      font-size:0.82rem;
      color:var(--accent-muted);
      transition:background var(--transition), transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    }

    .hero-link-chip img {
      width:20px;
      height:20px;
      object-fit:contain;
    }

    .hero-link-chip:hover {
      background:#0c2f24;
      border-color:var(--accent-muted);
      box-shadow:0 12px 35px rgba(0,0,0,0.8);
      transform:translateY(-1px);
    }

    /* SECTION HEADERS */

    .section-header { margin-bottom:2rem; }

    .section-eyebrow {
      font-size:0.82rem;
      letter-spacing:0.2em;
      text-transform:uppercase;
      color:var(--accent-muted);
      margin-bottom:0.35rem;
    }

    .section-title {
      font-size:2rem;
      letter-spacing:0.16em;
      text-transform:uppercase;
      margin-bottom:0.45rem;
    }

    .section-subtitle {
      font-size:0.98rem;
      color:var(--text-muted);
      max-width:34rem;
    }

    /* GRID / CARDS */

    .split-grid {
      display:grid;
      grid-template-columns:minmax(0,1fr) minmax(0,1fr);
      gap:2.2rem;
    }

    .card {
      background:var(--bg-soft);
      border-radius:var(--radius-lg);
      border:1px solid var(--border);
      padding:1.7rem 1.8rem;
      box-shadow:var(--shadow-soft);
      font-size:0.96rem;
      transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition), background var(--transition);
    }

    .card:hover {
      transform:translateY(-3px);
      box-shadow:0 22px 60px rgba(0,0,0,0.9);
      border-color:var(--border-strong);
      background:var(--bg-softer);
    }

    .card-gold {
      border-color:rgba(241,225,166,0.95);
      box-shadow:0 22px 60px rgba(0,0,0,0.95);
    }

    .pill {
      display:inline-flex;
      font-size:0.8rem;
      padding:0.22rem 0.75rem;
      border-radius:999px;
      border:1px solid var(--border-strong);
      background:#031712;
      color:var(--accent-muted);
      margin-bottom:0.5rem;
    }

    .card-heading {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:0.75rem;
      margin-bottom:0.5rem;
    }

    .card-heading-main {
      display:flex;
      align-items:center;
      gap:0.75rem;
    }

    .logo-small {
      width:48px;
      height:48px;
      border-radius:50%;
      background:#02130f;
      border:1px solid var(--border-strong);
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
    }

    .logo-small img {
      width:100%;
      height:100%;
      object-fit:contain;
    }

    .card-title {
      font-size:1.05rem;
      font-weight:bold;
    }

    .card-meta {
      font-size:0.8rem;
      color:var(--text-muted);
      text-align:right;
      white-space:nowrap;
    }

    .card-subtitle {
      font-size:0.9rem;
      color:var(--text-muted);
      margin-bottom:0.45rem;
    }

    .card ul {
      margin-top:0.55rem;
      padding-left:1.2rem;
      color:var(--text-muted);
    }
    .card li { margin-bottom:0.3rem; }

    /* ABOUT */

    .about-text {
      font-size:0.98rem;
      color:var(--text-muted);
    }

    .about-text p + p { margin-top:0.85rem; }

    .about-highlight {
      margin-top:1.4rem;
      padding:1.15rem 1.3rem;
      border-radius:var(--radius-lg);
      border:1px solid rgba(241,225,166,0.9);
      background:#031712;
      font-size:0.9rem;
      color:var(--accent-muted);
    }

    /* SKILLS */

    .skills-columns {
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
      gap:1.7rem;
      margin-top:0.7rem;
    }

    .skills-group-title {
      font-size:1.02rem;
      letter-spacing:0.18em;
      text-transform:uppercase;
      color:var(--accent-muted);
      margin-bottom:0.7rem;
    }

    .skill-row {
      display:flex;
      align-items:center;
      gap:0.85rem;
      padding:0.75rem 0.1rem;
      border-bottom:1px solid rgba(20,50,37,0.9);
      transition:background var(--transition), transform var(--transition), box-shadow var(--transition);
    }

    .skill-row:last-child {
      border-bottom:none;
    }

    .skill-row:hover {
      background:radial-gradient(circle at left, rgba(241,225,166,0.18), transparent 60%);
      transform:translateY(-1px);
    }

    .skill-row-icon {
      width:34px;
      height:34px;
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius:50%;
      background:#03130f;
      border:1px solid var(--border-strong);
      overflow:hidden;
      flex-shrink:0;
    }

    .skill-row-icon img {
      width:100%;
      height:100%;
      object-fit:contain;
    }

    .skill-row-label {
      font-size:1.02rem;
    }

    .skill-row-line {
      flex:1;
      height:2px;
      border-radius:999px;
      background:linear-gradient(90deg,rgba(0,0,0,0), #2ddf8a, rgba(0,0,0,0));
      opacity:0.55;
    }

    .soft-skills-grid {
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
      gap:1.4rem;
      margin-top:0.7rem;
    }

    .soft-skills-list {
      padding-left:1.15rem;
      font-size:0.96rem;
      color:var(--text-muted);
    }

    .soft-skills-list li { margin-bottom:0.35rem; }

    /* EDUCATION */

    .degree-grid {
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
      gap:1.6rem;
      margin-top:0.8rem;
    }

    .degree-placeholder {
      margin-top:0.9rem;
      border-radius:14px;
      border:1px dashed rgba(241,225,166,0.9);
      height:120px;
      display:flex;
      align-items:center;
      justify-content:center;
      color:var(--accent-muted);
      font-size:0.84rem;
      background:#02130f;
    }

    /* PROJECTS */

    .projects-grid {
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
      gap:1.6rem;
    }

    .project-links {
      margin-top:0.8rem;
      display:flex;
      flex-wrap:wrap;
      gap:0.7rem;
      font-size:0.85rem;
    }

    .project-link {
      color:var(--accent-strong);
      border-bottom:1px dashed rgba(206,184,117,0.85);
    }

    /* CERTIFICATES SLIDER (TOP SECTION) */

    .cert-slider-card {
      margin-top:0.3rem;
    }

    .cert-slider {
      position:relative;
      border-radius:26px;
      padding:2.3rem 2rem 2.6rem;
      background:radial-gradient(circle at top, #063029, #021712 65%);
      overflow:hidden;
      --prev-img:none;
      --next-img:none;
    }

    .cert-slider::before,
    .cert-slider::after {
      content:"";
      position:absolute;
      top:16%;
      width:55%;
      height:72%;
      background-position:center;
      background-repeat:no-repeat;
      background-size:cover;
      opacity:0.25;
      filter:blur(1px);
      border-radius:24px;
      pointer-events:none;
    }

    .cert-slider::before {
      left:-18%;
      background-image:var(--prev-img);
    }

    .cert-slider::after {
      right:-18%;
      background-image:var(--next-img);
    }

   .cert-slide-main {
  position:relative;
  z-index:2;
  max-width:720px;        
  max-height:420px;      
  margin:0 auto;
  border-radius:24px;
  overflow:hidden;
  border:2px solid rgba(241,225,166,0.95);
  box-shadow:0 26px 70px rgba(0,0,0,0.95);
  background:#000;
}

.cert-slide-main img {
  width:100%;
  height:100%;
  object-fit:contain;     
  display:block;
}


    .cert-slide-bottom {
      position:relative;
      z-index:3;
      margin-top:1.2rem;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:1.2rem;
      flex-wrap:wrap;
    }

    .cert-circle-nav {
      width:44px;
      height:44px;
      border-radius:50%;
      border:1px solid rgba(241,225,166,0.85);
      background:#02130f;
      color:var(--accent-strong);
      font-size:1.4rem;
      display:flex;
      align-items:center;
      justify-content:center;
      transition:background var(--transition), transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    }

    .cert-circle-nav:hover {
      background:rgba(241,225,166,0.18);
      border-color:var(--accent);
      transform:translateY(-1px);
      box-shadow:0 14px 40px rgba(0,0,0,0.9);
    }

    .cert-slide-text {
      text-align:center;
      max-width:520px;
    }

    .cert-slide-title {
      font-size:1rem;
      font-weight:bold;
      letter-spacing:0.1em;
      text-transform:uppercase;
      color:var(--accent-strong);
      margin-bottom:0.25rem;
    }

    .cert-slide-meta {
      font-size:0.9rem;
      color:var(--accent-muted);
    }

    /* CONTACT */

    .contact-grid {
      display:grid;
      grid-template-columns:minmax(0,1.05fr) minmax(0,1.25fr);
      gap:2.1rem;
    }

    .contact-lines {
      font-size:0.94rem;
      color:var(--text-muted);
    }

    .contact-lines div { margin-bottom:0.55rem; }

    .contact-social {
      margin-top:1.2rem;
      display:flex;
      flex-direction:column;
      gap:0.7rem;
    }

    .contact-chip {
      display:inline-flex;
      align-items:center;
      gap:0.6rem;
      padding:0.48rem 1rem;
      border-radius:999px;
      border:1px solid var(--border-strong);
      background:#02130f;
      font-size:0.88rem;
      color:var(--accent-muted);
      transition:background var(--transition), transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    }

    .contact-chip img {
      width:22px;
      height:22px;
      object-fit:contain;
    }

    form {
      display:grid;
      gap:0.95rem;
      font-size:0.88rem;
    }

    label {
      font-size:0.82rem;
      color:var(--text-muted);
      margin-bottom:0.12rem;
      display:block;
    }

    input[type="text"],
    input[type="email"],
    textarea {
      width:100%;
      padding:0.7rem 0.9rem;
      border-radius:0.9rem;
      border:1px solid var(--border-strong);
      background:#02130f;
      color:var(--text-main);
      outline:none;
      transition:border-color var(--transition), box-shadow var(--transition), background var(--transition), transform var(--transition);
      font-family:inherit;
    }

    textarea { min-height:130px; resize:vertical; }

    input::placeholder, textarea::placeholder { color:#64746b; }

    input:focus,
    textarea:focus {
      border-color:var(--accent-muted);
      box-shadow:0 0 0 1px rgba(205,184,116,0.45);
      transform:translateY(-1px);
      background:#031712;
    }

    /* FOOTER */

    footer {
      border-top:1px solid rgba(40,73,55,0.9);
      padding:1.7rem 0 1.5rem;
      font-size:0.83rem;
      color:var(--text-muted);
    }

    .footer-inner {
      display:flex;
      flex-wrap:wrap;
      justify-content:space-between;
      gap:0.9rem;
      align-items:center;
    }

    .footer-links {
      display:flex;
      flex-wrap:wrap;
      gap:1rem;
    }

    .footer-links a:hover { color:var(--accent-muted); }

    /* RESPONSIVE */

    @media (max-width:980px) {
      .hero-inner { grid-template-columns:minmax(0,1fr); gap:2.6rem; }
      .hero-media { order:-1; }
      .split-grid { grid-template-columns:minmax(0,1fr); }
      .contact-grid { grid-template-columns:minmax(0,1fr); }
      .cert-slider {
        padding:1.8rem 1.2rem 2rem;
      }
      .cert-slider::before,
      .cert-slider::after {
        display:none;
      }
    }

    @media (max-width:860px) {
      .nav-links {
        position:fixed;
        inset:76px 1.4rem auto 1.4rem;
        background:#02130f;
        border-radius:16px;
        border:1px solid var(--border-strong);
        box-shadow:0 18px 50px rgba(0,0,0,0.95);
        padding:0.9rem 1rem 1rem;
        flex-direction:column;
        gap:0.9rem;
        transform:scale(0.97);
        transform-origin:top right;
        opacity:0;
        pointer-events:none;
      }
      .nav-links.open {
        opacity:1;
        pointer-events:auto;
        transform:scale(1);
      }
      .nav-cta { display:none; }
      .nav-toggle { display:inline-flex; }
    }

    @media (max-width:700px) {
      .container { padding:0 1.2rem; }
      section { padding:3.2rem 0; }
      .hero-title { font-size:2.35rem; }
    }