/* ================= GOOGLE FONT ================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* ================= ROOT ================= */

:root{

  --bg:#070B16;
  --card:#111827;
  --card-2:#151f34;

  --accent:#2FD6C4;
  --accent-2:#D8B4A0;
  --accent-soft: rgba(47,214,196,.12);
  --accent-strong: rgba(47,214,196,.25);

  --text:#ffffff;
  --text-secondary:#b5bdd8;

  --border:
  rgba(255,255,255,.08);

  --shadow:
  0 15px 40px
  rgba(0,0,0,.28);
}

/* ================= RESET ================= */

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

html{
  scroll-behavior:smooth;
}

body{
  background:var(--bg);
  color:var(--text);

  font-family:'Poppins',
  sans-serif;

  overflow-x:hidden;
}

/* ================= GLOBAL ================= */

section{
  padding:30px 16px;
}

a{
  text-decoration:none;
}

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

/* ================= FLOATING SECTION ================= */

.floating-section{

  background:
  rgba(255,255,255,.03);

  backdrop-filter:
  blur(18px);

  border:
  1px solid var(--border);

  border-radius:28px;

  margin:18px;

  box-shadow:
  var(--shadow);

  transition:.4s ease;
}

.floating-section:hover{

  transform:
  translateY(-6px);

  border-color:
  rgba(47,214,196,.25);
}

/* ================= NAVBAR ================= */

.navbar{

  position:sticky;
  top:0;

  z-index:999;

  display:flex;
  justify-content:
  space-between;

  align-items:center;

  padding:18px 20px;

  background:
  rgba(7,11,22,.75);

  backdrop-filter:
  blur(18px);

  border-bottom:
  1px solid var(--border);
}

.logo{

  font-size:22px;
  font-weight:700;

  color:
  var(--accent);
}

/* MENU ICON */

.menu-toggle{

  font-size:24px;
  cursor:pointer;

  color:white;
  padding:8px;
  border-radius:8px;
  background:transparent;
  border:none;
}

.menu-toggle:focus{
  outline:none;
  box-shadow:0 0 0 6px var(--accent-soft);
  border-radius:8px;


  color:white;

  font-size:15px;

  transition:.3s;
}

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

/* ================= NAV MENU LAYOUT ================= */

/* Hide mobile toggle on desktop; show on small screens in media query */
.menu-toggle{
  display:none;
}

.nav-menu{
  display:flex;
  align-items:center;
}

.nav-links{
  display:flex;
  gap:18px;
  list-style:none;
  margin:0;
  padding:0;
  align-items:center;
}

.nav-links li a{
  color:var(--text);
  padding:8px 12px;
  border-radius:10px;
  font-size:15px;
  font-weight:500;
  transition: all .18s ease;
  display:inline-block;
}

.nav-links li a:focus,
.nav-links li a:hover{
  color:var(--accent);
  background: rgba(47,214,196,.04);
  outline:none;
}

.nav-links li a.active{
  color:var(--accent);
  background: rgba(47,214,196,.08);
  box-shadow: 0 6px 14px rgba(47,214,196,.06);
}

@media (max-width: 820px){

  .menu-toggle{
    display:block;
  }

  .nav-menu{
    position:absolute;
    top:72px;
    right:18px;
    background: rgba(7,11,22,.95);
    border:1px solid var(--border);
    padding:12px;
    border-radius:12px;
    box-shadow: 0 20px 40px rgba(0,0,0,.6);
    transform: translateY(-10px);
    opacity:0;
    pointer-events:none;
    transition: all .22s ease;
    z-index:1001;
    width: calc(100% - 36px);
    max-width:420px;
  }

  .nav-menu.active{
    transform: translateY(0);
    opacity:1;
    pointer-events:auto;
  }

  .nav-links{
    flex-direction:column;
    gap:8px;
  }

  .nav-links li a{
    padding:12px 16px;
    font-size:16px;
  }

}

/* ================= HERO ================= */

.hero{

  position:relative;

  overflow:hidden;

  text-align:center;

  padding-top:40px;
}

/* HERO BACKGROUND */

.hero-bg{

  position:absolute;
  inset:0;

  background:
  radial-gradient(
  circle at top,
  rgba(47,214,196,.15),
  transparent 60%
  );

  z-index:-1;
}

.hero-container{

  display:flex;
  flex-direction:column;

  gap:28px;
}

/* HERO TAG */

.hero-tag{

  display:inline-block;

  padding:10px 18px;

  border-radius:50px;

  background:
  rgba(47,214,196,.12);

  color:
  var(--accent);

  font-size:12px;
}

/* HERO TEXT */

.hero-text h1{

  font-size:38px;
  line-height:1.2;

  margin-top:18px;
}

.hero-text h1 span{
  color:var(--accent);
}

.hero-text h2{

  color:
  var(--text-secondary);

  margin:10px 0;

  font-size:20px;
}

/* Reserve space for the typing text to avoid layout shifts on change */
.hero-text h2{
  min-height:28px;
}

#typing{
  display:inline-block;
  min-width:30ch; /* reserve width for the longest role */
  white-space:nowrap;
  overflow:hidden;
  vertical-align:middle;
}

.hero-text p{

  color:
  var(--text-secondary);

  font-size:14px;

  line-height:1.8;

  max-width:320px;

  margin:auto;
}

/* HERO BUTTONS */

.hero-buttons{

  display:flex;
  gap:12px;

  justify-content:center;

  flex-wrap:wrap;

  margin-top:22px;
}

.btn,
.btn-outline{

  padding:12px 18px;

  border-radius:16px;

  font-size:14px;

  transition:.3s ease;
}

.btn{

  background:
  linear-gradient(135deg, #6ee7d8, #2dd4bf 100%);

  color:#08111f;
  box-shadow: 0 14px 25px rgba(45,212,191,.18);
}

.btn:hover{
  transform:translateY(-4px);
  box-shadow: 0 18px 30px rgba(45,212,191,.22);
}

.btn-outline{

  border:
  1px solid
  var(--border);

  color:white;
  background: rgba(255,255,255,.02);
}

.btn-outline:hover{
  border-color: rgba(47,214,196,.25);
  background: rgba(47,214,196,.04);
  color: var(--accent);
}

/* HERO IMAGE */

.hero-image-wrapper{

  position:relative;

  width:220px;
  height:220px;

  margin:auto;
}

/* GLOW RING */

.hero-ring{

  position:absolute;

  inset:-10px;

  border-radius:50%;

  border:
  2px solid
  rgba(47,214,196,.25);

  animation:
  pulseGlow
  4s infinite;
}

.hero-image{

  width:100%;
  height:100%;

  border-radius:50%;

  overflow:hidden;

  border:
  4px solid
  rgba(255,255,255,.08);
}

.hero-image img{
  object-fit:cover;
  height:100%;
}

/* FLOAT ANIMATION */

.hero-image-wrapper{

  animation:
  floating
  4s ease-in-out infinite;
}

/* ANIMATION */

@keyframes floating{

  0%{
    transform:
    translateY(0);
  }

  50%{
    transform:
    translateY(-10px);
  }

  100%{
    transform:
    translateY(0);
  }
}

@keyframes pulseGlow{

  0%{
    transform:scale(1);
    opacity:.5;
  }

  50%{
    transform:scale(1.05);
    opacity:1;
  }

  100%{
    transform:scale(1);
    opacity:.5;
  }
}

/* ================= SECTION HEADER ================= */

.section-header{

  margin-bottom:24px;
}

.section-header span{

  color:var(--accent);

  letter-spacing:2px;

  font-size:12px;

  text-transform:
  uppercase;
}

.section-header h2{

  margin-top:10px;

  font-size:30px;
  line-height:1.2;
}

.section-header em{
  color:var(--accent-2);
  font-style:italic;
}

/* ================= ABOUT ================= */

.about-container{
  display:grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items:center;
  gap:28px;
}

.about-image{
  width:100%;
  max-width:300px;
  height:350px;
  margin:0 auto;
  border-radius:36px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background: linear-gradient(135deg, rgba(110,231,215,.10), rgba(124,58,237,.08));
  box-shadow: 0 26px 48px rgba(0,0,0,.22);
  position:relative;
  padding:10px;
}

.about-image::before{
  content:"";
  position:absolute;
  inset:18px;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.07);
  pointer-events:none;
}

.about-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:28px;
  filter: saturate(1.06) contrast(1.06) brightness(1.02);
  transform: scale(1.04);
}

.about-content{
  display:flex;
  flex-direction:column;
  gap:18px;
  text-align:left;
}

.about-content p{

  color:
  var(--text-secondary);

  font-size:14px;
  line-height:1.8;
}

.about-content strong{
  color:var(--accent);
}

/* JOURNEY CARD */

.journey-card{

  background:
  rgba(255,255,255,.03);

  border:
  1px solid
  var(--border);

  border-radius:22px;

  padding:18px;
}

.journey-card h3{

  font-size:18px;

  margin-bottom:10px;

  color:
  var(--accent);
}

.journey-card p{

  font-size:13px;
}

/* ================= SKILLS ================= */

.skills-grid{

  display:grid;
  gap:18px;
}

.skill-card{

  background:
  rgba(255,255,255,.03);

  border:
  1px solid
  var(--border);

  border-radius:24px;

  padding:20px;

  transition:.3s ease;
}

.skill-card:hover{

  transform:
  translateY(-5px);

  border-color:
  rgba(47,214,196,.25);
}

.skill-card h3{

  font-size:16px;

  margin-bottom:16px;

  color:
  var(--accent);
}

/* SKILL TAGS */

.skill-tags{

  display:flex;
  flex-wrap:wrap;

  gap:10px;
}

.skill-tags span{

  background:
  rgba(47,214,196,.10);

  border:
  1px solid
  rgba(47,214,196,.15);

  padding:10px 14px;

  border-radius:50px;

  font-size:12px;
}

/* ================= RESEARCH ================= */

.research-card{

  margin-top:22px;

  background:
  rgba(255,255,255,.03);

  border:
  1px solid
  rgba(216,180,160,.20);

  border-radius:24px;

  padding:20px;
}

.research-card h3{

  margin-bottom:16px;

  color:
  var(--accent-2);

  font-size:18px;
}

.research-tags{

  display:flex;
  flex-wrap:wrap;

  gap:10px;
}

.research-tags span{

  background:
  rgba(216,180,160,.10);

  border:
  1px solid
  rgba(216,180,160,.18);

  padding:10px 14px;

  border-radius:50px;

  font-size:12px;
}

/* Disable hover lift on touch devices to avoid accidental layout jumps */
@media (hover: none) {
  .floating-section:hover{
    transform: none;
  }
}

/* ================= EDUCATION ================= */

.education-card{

  background:
  rgba(255,255,255,.03);

  border:
  1px solid
  var(--border);

  border-radius:24px;

  padding:22px;

  display:flex;
  gap:16px;

  transition:.3s ease;
}

.education-card:hover{

  transform:
  translateY(-5px);
}

.education-icon{

  min-width:55px;
  height:55px;

  border-radius:18px;

  background:
  rgba(47,214,196,.12);

  display:flex;
  justify-content:center;
  align-items:center;

  color:
  var(--accent);

  font-size:22px;
}

.education-content h3{

  font-size:18px;

  margin-bottom:6px;
}

.education-content h4{

  font-size:13px;

  color:
  var(--accent-2);

  margin-bottom:12px;
}

.education-content p{

  color:
  var(--text-secondary);

  font-size:13px;

  line-height:1.8;
}

.status-badge{

  display:inline-block;

  margin-top:14px;

  background:
  rgba(47,214,196,.10);

  color:
  var(--accent);

  padding:8px 14px;

  border-radius:50px;

  font-size:12px;
}

/* ================= ROLES ================= */

.roles-grid{

  display:grid;
  gap:18px;
}

.role-card{

  background:
  rgba(255,255,255,.03);

  border:
  1px solid var(--border);

  border-radius:24px;

  padding:22px;

  text-align:center;

  transition:.3s ease;
}

.role-card:hover{

  transform:
  translateY(-6px);

  border-color:
  rgba(47,214,196,.25);
}

.role-card i{

  font-size:24px;

  color:
  var(--accent);

  margin-bottom:14px;
}

.role-card h3{

  font-size:16px;
  margin-bottom:8px;
}

.role-card p{

  color:
  var(--text-secondary);

  font-size:13px;
  line-height:1.7;
}

/* ================= CERTIFICATIONS ================= */

.cert-grid{

  display:grid;
  gap:18px;
}

.cert-card{

  background:
  rgba(255,255,255,.03);

  border:
  1px solid var(--border);

  border-radius:24px;

  padding:22px;

  text-align:center;

  transition:.3s ease;
}

.cert-card:hover{

  transform:
  translateY(-6px);
}

.cert-card i{

  font-size:24px;

  color:
  var(--accent);

  margin-bottom:12px;
}

.cert-card h3{

  font-size:16px;
  margin-bottom:8px;
}

.cert-card span{

  color:
  var(--accent-2);

  font-size:13px;
}

/* ================= PROJECTS ================= */

.left-align{
  text-align:left;
}

.projects p{

  color:
  var(--text-secondary);

  font-size:14px;

  line-height:1.8;
}

.filter-buttons{

  display:flex;
  gap:10px;

  overflow-x:auto;

  margin:20px 0;
}

.filter-btn{

  border:none;

  background:
  rgba(255,255,255,.06);

  color:white;

  padding:10px 16px;

  border-radius:50px;

  font-size:12px;

  cursor:pointer;

  transition:.3s;
}

.filter-btn.active,
.filter-btn:hover{

  background:
  var(--accent);

  color:#08111f;
}

/* PROJECT CARD */

.project-card{

  background:
  rgba(255,255,255,.03);

  border:
  1px solid var(--border);

  border-radius:24px;

  padding:22px;

  margin-top:18px;

  transition:.3s ease;
}

.project-card:hover{

  transform:
  translateY(-6px);

  border-color:
  rgba(47,214,196,.20);
}

.project-top{

  display:flex;
  justify-content:
  space-between;

  align-items:center;

  gap:12px;
}

.project-top h3{

  font-size:18px;
}

.project-tech{

  font-size:12px;

  color:
  var(--accent);

  background:
  rgba(47,214,196,.10);

  padding:8px 12px;

  border-radius:50px;
}

.project-tags{

  display:flex;
  flex-wrap:wrap;

  gap:8px;

  margin:18px 0;
}

.project-tags span{

  background:
  rgba(255,255,255,.05);

  border:
  1px solid
  var(--border);

  border-radius:50px;

  padding:8px 12px;

  font-size:12px;
}

.project-btn{

  display:inline-block;

  margin-top:8px;

  color:
  var(--accent);

  font-size:14px;
}

/* ================= LANDSCAPE CAROUSEL ================= */

.carousel-container{

  overflow:hidden;
}

/* ================= MOVING PHOTO CAROUSEL ================= */

.carousel-container{
  overflow:hidden;
  position:relative;
  width:100%;
}

.carousel-track{

  display:flex;
  gap:16px;

  width:max-content;

  animation:
  autoScroll 20s linear infinite;
}

/* PAUSE ON HOVER */

.carousel-track:hover{
  animation-play-state:
  paused;
}

.carousel-card{

  min-width:280px;
  height:180px;

  border-radius:24px;

  overflow:hidden;

  flex-shrink:0;

  border:
  1px solid var(--border);

  transition:.35s ease;
}

.carousel-card:hover{

  transform:
  translateY(-6px);

  border-color:
  rgba(47,214,196,.25);
}

.carousel-card img{

  width:100%;
  height:100%;

  object-fit:cover;
}

/* AUTO MOVEMENT */

@keyframes autoScroll{

  0%{
    transform:
    translateX(0);
  }

  100%{
    transform:
    translateX(-50%);
  }
}

.carousel-card{

  min-width:280px;
  height:180px;

  border-radius:24px;

  overflow:hidden;

  flex-shrink:0;

  scroll-snap-align:start;

  border:
  1px solid
  var(--border);
}

.carousel-card img{

  width:100%;
  height:100%;

  object-fit:cover;
}

/* ================= PREMIUM GALLERY ================= */

.premium-gallery{

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;
}

/* ================= PORTRAIT CAROUSEL ================= */

.portrait-carousel{
  width:100%;
  max-width:100%;
  overflow:hidden;
  position:relative;
  padding:8px 0 12px;
}

.portrait-carousel::before,
.portrait-carousel::after {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:60px;
  z-index:2;
  pointer-events:none;
}

.portrait-carousel::before {
  left:0;
  background:linear-gradient(90deg, rgba(5,11,22,1), rgba(5,11,22,0));
}

.portrait-carousel::after {
  right:0;
  background:linear-gradient(270deg, rgba(5,11,22,1), rgba(5,11,22,0));
}

.portrait-track{
  display:flex;
  gap:16px;
  width:max-content;
  padding:4px 0 6px;
  animation: portraitScroll 22s linear infinite;
}

.portrait-track:hover {
  animation-play-state: paused;
}

.portrait-card{
  width:min(22vw, 240px);
  height:min(32vw, 340px);
  min-width:200px;
  min-height:280px;
  flex-shrink:0;
  border-radius:30px;
  overflow:hidden;
  border:1px solid var(--border);
  background:rgba(255,255,255,.02);
  box-shadow:0 18px 40px rgba(0,0,0,.22);
  transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease;
  position:relative;
}

.portrait-card::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.06), transparent 30%, rgba(5,11,22,.15));
  pointer-events:none;
}

.portrait-card:hover{
  transform: translateY(-6px);
  border-color: rgba(110,231,215,.3);
  box-shadow:0 22px 50px rgba(110,231,215,.12);
}

.portrait-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.02);
}

@keyframes portraitScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* ANIMATION */

@keyframes fadeGallery{

  from{
    opacity:.4;
    transform:
    scale(.96);
  }

  to{
    opacity:1;
    transform:
    scale(1);
  }
}

/* ================= TESTIMONIALS ================= */

.testimonials {
  text-align: left;
}

.testimonial-carousel-wrap {
  overflow: hidden;
  margin-top: 20px;
  position: relative;
}

.testimonial-carousel-wrap::before,
.testimonial-carousel-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}

.testimonial-carousel-wrap::before {
  left: 0;
  background: linear-gradient(90deg, rgba(5,11,22,1), rgba(5,11,22,0));
}

.testimonial-carousel-wrap::after {
  right: 0;
  background: linear-gradient(270deg, rgba(5,11,22,1), rgba(5,11,22,0));
}

.testimonial-track {
  display: flex;
  width: max-content;
  gap: 18px;
  animation: testimonialScroll 30s linear infinite;
}

.testimonial-track:hover {
  animation-play-state: paused;
}

.testimonial-card {
  position: relative;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 24px 22px 20px;
  transition: .3s ease;
  width: min(360px, 70vw);
  flex-shrink: 0;
}

.testimonial-card:hover {
  transform: translateY(-5px);
  border-color: rgba(47,214,196,.22);
}

/* Flip card styles */
.testimonial-card {
  perspective: 1000px;
  -webkit-perspective: 1000px;
}

.testimonial-inner{
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(.2,.8,.2,1);
}

.testimonial-card .front,
.testimonial-card .back{
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  position: relative;
}

.testimonial-card .back{
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 18px;
}

.testimonial-card.is-flipped .testimonial-inner{
  transform: rotateY(180deg);
}

.back-content{
  text-align:center;
}

.back-note{
  color:var(--text-secondary);
  margin-top:12px;
  font-size:14px;
  line-height:1.6;
}

.testimonial-card.featured {
  background: linear-gradient(180deg, rgba(110,231,215,.06), rgba(255,255,255,.03));
  border-color: rgba(110,231,215,.2);
}

.quote-mark {
  font-size: 42px;
  line-height: 1;
  color: var(--accent);
  margin-bottom: 12px;
  font-weight: 700;
}

.testimonial-card p {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.8;
  font-size: 15px;
}

.testimonial-author {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.testimonial-author strong {
  color: var(--text);
  font-size: 14px;
}

.testimonial-author span {
  color: var(--accent-2);
  font-size: 12px;
  letter-spacing: .04em;
}

@keyframes testimonialScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ================= CONTACT SECTION ================= */

.contact {
  text-align: center;
}

.contact-shell {
  max-width: 900px;
  margin: 26px auto 0;
}

.contact-panel {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  border: 1px solid var(--border);
  border-radius: 34px;
  padding: 24px;
  box-shadow: 0 26px 56px rgba(0,0,0,.2);
  position: relative;
  overflow: hidden;
}

.contact-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left, rgba(110,231,215,.1), transparent 35%);
  pointer-events: none;
}

.contact-merged {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: stretch;
}

.contact-copy {
  text-align: left;
  position: relative;
  z-index: 1;
}

.contact-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(110,231,215,.08);
  border: 1px solid rgba(110,231,215,.18);
  color: var(--accent);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.contact-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.contact-meta span {
  display: inline-flex;
  align-items: center;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  color: var(--text-secondary);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.contact-details h3 {
  font-size: clamp(1.7rem, 2.4vw, 2.5rem);
  line-height: 1.15;
  margin: 0 0 16px;
  max-width: 560px;
}

.contact-text {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-secondary);
  margin: 0 0 22px;
}

.contact-info {
  margin: 20px 0 0;
  color: var(--text);
  font-size: 15px;
}

.contact-info p {
  margin: 12px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.04);
  transition: .3s ease;
}

.contact-info p:hover {
  border-color: rgba(110,231,215,.18);
  transform: translateX(2px);
}

.contact-info a {
  color: var(--text);
  text-decoration: none;
}

.contact-info i {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(110,231,215,.08);
  color: var(--accent);
  font-size: 12px;
}

.contact-form-wrap {
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, rgba(10,18,30,.7), rgba(10,18,30,.9));
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 24px;
  padding: 18px;
}

.contact-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(8,12,24,.78);
  color: var(--text);
  font-size: 14px;
  outline: none;
  transition: .3s ease;
  backdrop-filter: blur(10px);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(210,222,255,.62);
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: rgba(110,231,215,.45);
  box-shadow: 0 0 0 4px rgba(110,231,215,.12);
  background: rgba(10,16,30,.85);
}

.contact-form textarea {
  resize: vertical;
  min-height: 150px;
}

.contact-form .btn {
  width: 100%;
  background: linear-gradient(135deg, #6ee7d8, #2dd4bf 100%);
  color: #04131c;
  font-weight: 800;
  letter-spacing: .05em;
  padding: 16px 18px;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  transition: .3s ease;
  box-shadow: 0 18px 28px rgba(45,212,191,.22);
}

.contact-form .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 32px rgba(45,212,191,.24);
}

.social-icons {
  margin-top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.social-icons a {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  color: var(--text);
  transition: .3s ease;
}

.social-icons a:hover {
  background: rgba(110,231,215,.08);
  border-color: rgba(110,231,215,.25);
  transform: translateY(-3px);
  color: var(--accent);
}

@media (max-width: 820px) {
  .contact-merged {
    grid-template-columns: 1fr;
  }

  .contact-panel {
    padding: 24px 18px;
  }
}

/* ================= #0a3PREMIUM FOOTER ================= */

.footer{

  text-align:center;

  padding:40px 20px;

  margin:20px;

  border-radius:28px;

  background:
  rgba(255,255,255,.03);

  border:
  1px solid var(--border);
}

.footer h3{

  color:
  var(--accent);

  font-size:22px;

  margin-bottom:10px;
}

.footer p{

  color:
  var(--text-secondary);

  font-size:14px;

  margin-bottom:20px;
}

.footer-line{

  width:100px;
  height:2px;

  background:
  rgba(255,255,255,.10);

  margin:
  0 auto 18px;
}

.footer span{

  color:
  #8b93ad;

  font-size:12px;
}

/* ================= DESKTOP RESPONSIVE ================= */

@media(min-width:900px){

  section{
    padding:60px;
  }

  .hero-container,
  .about-container{

    display:grid;
    grid-template-columns:
    1fr 1fr;

    align-items:center;

    gap:50px;
  }

  .hero{
    text-align:left;
  }

  .hero-buttons{
    justify-content:flex-start;
  }

  .hero-image-wrapper{

    width:360px;
    height:360px;
  }

  .skills-grid,
  .roles-grid,
  .cert-grid,
  .gallery-grid{

    grid-template-columns:
    repeat(2,1fr);
  }

  .menu-toggle{
    display:none;
  }

  .nav-menu{

    position:static;

    background:none;

    max-height:none;

    width:auto;
  }

  .nav-links{

    display:flex;
    gap:24px;
  }

  .nav-links li{
    border:none;
  }

}

/* ================= HERO DATA VISUALS ================= */

.hero-image-wrapper{
  position:relative;
}

/* FLOATING CARDS */

.floating-chart{

  position:absolute;

  display:flex;
  align-items:center;
  gap:8px;

  background:
  rgba(255,255,255,.06);

  backdrop-filter:
  blur(20px);

  border:
  1px solid rgba(255,255,255,.08);

  padding:12px 16px;

  border-radius:18px;

  font-size:12px;

  color:white;

  z-index:10;

  box-shadow:
  0 10px 30px
  rgba(0,0,0,.18);

  animation:
  floatCard 5s
  ease-in-out infinite;
}

.floating-chart i{
  color:var(--accent);
}

/* POSITIONS */

.chart-1{
  top:10%;
  left:-35px;
}

.chart-2{
  top:50%;
  right:-40px;
}

.chart-3{
  bottom:10%;
  left:-25px;
}

/* ================= HERO MOVING CHARTS ================= */

.hero{
  position:relative;
  overflow:hidden;
}

/* CONTAINER */

.hero-charts{

  position:absolute;
  inset:0;

  pointer-events:none;
  z-index:0;
}

/* ================= BAR CHART ================= */

.bar-chart{

  position:absolute;

  bottom:30px;
  left:20px;

  display:flex;
  align-items:flex-end;

  gap:8px;

  opacity:.18;
}

.bar{

  width:16px;

  border-radius:20px 20px 0 0;

  background:
  linear-gradient(
  to top,
  var(--accent),
  rgba(47,214,196,.35)
  );

  animation:
  moveBars 3s
  ease-in-out infinite;
}

.bar1{
  height:50px;
}

.bar2{
  height:90px;
  animation-delay:.2s;
}

.bar3{
  height:65px;
  animation-delay:.4s;
}

.bar4{
  height:110px;
  animation-delay:.6s;
}

.bar5{
  height:80px;
  animation-delay:.8s;
}

/* ================= LINE GRAPH ================= */

.line-chart{

  position:absolute;

  top:80px;
  right:10px;

  width:220px;
  height:120px;

  opacity:.14;
}

.line-chart polyline{

  fill:none;

  stroke:
  var(--accent);

  stroke-width:4;

  stroke-linecap:round;

  stroke-linejoin:round;

  stroke-dasharray:500;
  stroke-dashoffset:500;

  animation:
  drawLine 6s
  linear infinite;
}

/* ================= ANIMATION ================= */

@keyframes moveBars{

  0%{
    transform:
    scaleY(1);
  }

  50%{
    transform:
    scaleY(1.35);
  }

  100%{
    transform:
    scaleY(1);
  }
}

@keyframes drawLine{

  0%{
    stroke-dashoffset:500;
  }

  100%{
    stroke-dashoffset:0;
  }
}

/* MOBILE */

@media(max-width:768px){

  .bar-chart{

    transform:
    scale(.7);

    left:-5px;
    bottom:10px;
  }

  .line-chart{

    width:150px;

    top:40px;
    right:-10px;
  }
}

/* ================= AVAILABILITY ================= */

.availability-card{
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 25px;
  text-align: center;
}

.availability-status{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  background: rgba(47,214,196,.10);
  border: 1px solid rgba(47,214,196,.15);

  padding: 12px 18px;
  border-radius: 50px;

  color: var(--accent);
  font-weight: 600;

  margin-bottom: 18px;
}

.status-dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;

  animation: pulse 1.5s infinite;
}

.availability-card p{
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 20px;
}

.availability-tags{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
}

.availability-tags span{
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);

  padding: 10px 14px;
  border-radius: 50px;
  font-size: 13px;
}

.company-marquee {
  overflow:hidden;
  position:relative;
  margin-top:12px;
  padding:8px 0;
}

.company-marquee::before,
.company-marquee::after {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:70px;
  z-index:2;
  pointer-events:none;
}

.company-marquee::before {
  left:0;
  background:linear-gradient(90deg, rgba(5,11,22,1), rgba(5,11,22,0));
}

.company-marquee::after {
  right:0;
  background:linear-gradient(270deg, rgba(5,11,22,1), rgba(5,11,22,0));
}

.company-track {
  display:flex;
  align-items:center;
  gap:16px;
  width:max-content;
  min-width:100%;
  animation: companyScroll 26s linear infinite;
}

.company-track:hover {
  animation-play-state: paused;
}

.company-track span {
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:180px;
  min-height:74px;
  padding:0 18px;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--border);
  border-radius: 18px;
  color: var(--text-secondary);
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-size:12px;
  text-align:center;
  transition: .3s ease;
}

.company-track span:hover{
  transform: translateY(-4px);
  border-color: rgba(110,231,215,.28);
  color: var(--text);
  box-shadow: 0 16px 28px rgba(0,0,0,.12);
}

@keyframes companyScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes pulse{
  0%{
    transform: scale(1);
    opacity:1;
  }

  50%{
    transform: scale(1.4);
    opacity:.6;
  }

  100%{
    transform: scale(1);
    opacity:1;
  }
}

/* ================= STATS ================= */

.project-card + .stats-grid {
  margin-top: 28px;
}

.stats-grid{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:18px;
}

.stats-card{
  position:relative;
  overflow:hidden;
  background: rgba(255,255,255,.03);
  border:1px solid var(--border);
  border-radius:24px;
  padding:20px 20px 22px;
  text-align:center;
  transition:.3s ease;
}

.stats-card::before{
  content:"";
  position:absolute;
  inset:auto 14px 8px 14px;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(47,214,196,.6), transparent);
}

.stats-card:hover{
  transform:translateY(-5px);
  border-color:rgba(47,214,196,.25);
}

.mini-chart{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:5px;
  width:100%;
  max-width:110px;
  height:42px;
  margin:0 auto 16px;
  padding:8px 10px 6px;
  background: rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  box-shadow: inset 0 0 18px rgba(47,214,196,.04);
}

.mini-chart span{
  display:block;
  width:100%;
  border-radius:7px 7px 0 0;
  transform-origin:bottom;
  opacity:0;
  transform:scaleY(.2);
  box-shadow: 0 0 12px rgba(255,255,255,.04);
}

.stats-card.is-active .mini-chart span {
  animation: miniBarRise .8s ease forwards;
  animation-delay: calc(var(--i, 0) * 100ms);
}

.mini-bars.low span {
  background: linear-gradient(180deg, rgba(255,92,92,.9), rgba(255,92,92,.2));
}

.mini-bars.medium span {
  background: linear-gradient(180deg, rgba(255,206,84,.92), rgba(255,206,84,.25));
}

.mini-bars.full span {
  background: linear-gradient(180deg, rgba(52,211,153,.92), rgba(52,211,153,.25));
}

.mini-bars.low span:nth-child(1){ height:34%; --i:0; }
.mini-bars.low span:nth-child(2){ height:44%; --i:1; }
.mini-bars.low span:nth-child(3){ height:58%; --i:2; }
.mini-bars.low span:nth-child(4){ height:72%; --i:3; }
.mini-bars.low span:nth-child(5){ height:88%; --i:4; }

.mini-bars.medium span:nth-child(1){ height:30%; --i:0; }
.mini-bars.medium span:nth-child(2){ height:48%; --i:1; }
.mini-bars.medium span:nth-child(3){ height:62%; --i:2; }
.mini-bars.medium span:nth-child(4){ height:76%; --i:3; }
.mini-bars.medium span:nth-child(5){ height:80%; --i:4; }

.mini-bars.full span:nth-child(1){ height:42%; --i:0; }
.mini-bars.full span:nth-child(2){ height:56%; --i:1; }
.mini-bars.full span:nth-child(3){ height:68%; --i:2; }
.mini-bars.full span:nth-child(4){ height:82%; --i:3; }
.mini-bars.full span:nth-child(5){ height:100%; --i:4; }

@keyframes miniBarRise {
  0% {
    opacity:0;
    transform:scaleY(.2);
  }
  100% {
    opacity:1;
    transform:scaleY(1);
  }
}

@keyframes chartRise{
  0% {
    transform: scaleY(0.2);
    opacity: 0.2;
  }
  100% {
    transform: scaleY(1);
    opacity: 1;
  }
}

.stats-card h3{
  font-size:38px;
  font-weight:700;
  line-height:1;
  letter-spacing:-0.06em;
  color:var(--accent);
  margin-bottom:8px;
  text-shadow:0 0 18px rgba(47,214,196,.25);
}

.stats-card p{
  color:var(--text-secondary);
  font-size:14px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  opacity:.88;
}

/* Mobile responsive */
@media(max-width:768px){
  .navbar {
    padding: 14px 16px;
  }

  .floating-section {
    margin: 12px 10px;
    border-radius: 22px;
  }

  .hero {
    padding-top: 28px;
  }

  .hero-text h1 {
    font-size: 30px;
  }

  .hero-text h2 {
    font-size: 18px;
  }

  .hero-text p {
    max-width: 100%;
    font-size: 13px;
  }

  .hero-tag {
    font-size: 11px;
    letter-spacing: 1px;
    padding: 9px 14px;
  }

  .hero-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .btn,
  .btn-outline {
    width: 100%;
    text-align: center;
  }

  .section-header h2 {
    font-size: 26px;
  }

  .about-container{
    grid-template-columns:1fr;
  }

  .about-image{
    max-width:260px;
    height:300px;
  }

  .stats-grid{
    grid-template-columns:1fr;
  }

  .company-track span {
    min-width:150px;
  }

  .portrait-carousel{
    max-width:100%;
  }

  .portrait-card{
    width:190px;
    height:300px;
    min-width:170px;
    min-height:260px;
  }
}

@media(min-width:900px){
  .company-track span {
    min-width:200px;
  }
}

section {
  padding: 80px 20px;
}

.floating-section {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 1s ease forwards;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}