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

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Inter',sans-serif;background:#0B1120;color:#ffffff;line-height:1.6;overflow-x:hidden;}
a{text-decoration:none;}
img{width:100%;display:block;}

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

section{padding:100px 8%;}
h1,h2,h3{line-height:1.2;}

.section-label{
  color:#3B82F6;
  font-size:.75rem;
  letter-spacing:4px;
  text-transform:uppercase;
  font-weight:600;
  margin-bottom:16px;
}

.section-title{
  font-family:'DM Sans',sans-serif;
  font-size:clamp(1.8rem,4vw,3rem);
  font-weight:800;
  margin-bottom:20px;
  line-height:1.15;
}

.section-sub{
  color:#64748B;
  font-size:1rem;
  max-width:600px;
  line-height:1.8;
}

.divider{
  width:48px;
  height:3px;
  background:#3B82F6;
  border-radius:2px;
  margin:24px 0;
}

/* ==========================
   NAVBAR — DESKTOP
========================== */

.navbar{
  position:fixed;
  top:0;left:0;
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 8%;
  background:rgba(11,17,32,0.92);
  backdrop-filter:blur(12px);
  z-index:1000;
}

.logo{
  font-family:'DM Sans',sans-serif;
  font-size:1.3rem;
  font-weight:800;
  color:#fff;
  flex-shrink:0;
}

.nav-links{
  display:flex;
  list-style:none;
  gap:36px;
}

.nav-links a{
  color:#CBD5E1;
  transition:.3s;
  font-size:.88rem;
  font-weight:500;
}

.nav-links a:hover{color:#3B82F6;}

.resume-btn{
  background:#3B82F6;
  color:#fff;
  padding:10px 18px;
  border-radius:8px;
  font-weight:600;
  font-size:.82rem;
  transition:.3s;
  flex-shrink:0;
  white-space:nowrap;
}

.resume-btn:hover{transform:translateY(-2px);background:#2563EB;}

/* Hamburger — hidden on desktop */
.hamburger{
  display:none;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
  padding:4px;
  z-index:1100;
}

.hamburger span{
  display:block;
  width:24px;
  height:2px;
  background:#fff;
  border-radius:2px;
  transition:.3s;
}

/* Hamburger open state */
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

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

.hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:140px 8% 80px;
  position:relative;
  overflow:hidden;
}

.hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 40%,rgba(59,130,246,.08) 0%,transparent 70%);
  pointer-events:none;
}

.hero-content{
  max-width:900px;
  position:relative;
  animation:fadeUp .8s ease forwards;
}

.tagline{
  color:#3B82F6;
  font-size:.78rem;
  letter-spacing:4px;
  text-transform:uppercase;
  margin-bottom:24px;
  font-weight:600;
}

.hero h1{
  font-family:'DM Sans',sans-serif;
  font-size:clamp(2.2rem,5.5vw,5rem);
  font-weight:800;
  line-height:1.12;
  margin-bottom:28px;
  letter-spacing:-1px;
  word-break:keep-all;
}

.hero h1 span{color:#3B82F6;}

.hero-description{
  font-size:clamp(.95rem,2vw,1.1rem);
  color:#94A3B8;
  max-width:620px;
  margin:0 auto 40px;
  line-height:1.8;
}

.hero-buttons{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}

.btn-primary{
  background:#3B82F6;
  color:#fff;
  padding:13px 26px;
  border-radius:10px;
  font-weight:600;
  font-size:.88rem;
  transition:.3s;
  white-space:nowrap;
}

.btn-primary:hover{background:#2563EB;transform:translateY(-2px);}

.btn-secondary{
  border:1px solid #334155;
  color:#CBD5E1;
  padding:13px 26px;
  border-radius:10px;
  font-size:.88rem;
  transition:.3s;
  white-space:nowrap;
}

.btn-secondary:hover{border-color:#3B82F6;color:#3B82F6;}

.scroll-badge{
  margin-top:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:#475569;
  font-size:.78rem;
}

.scroll-line{width:36px;height:1px;background:#334155;}

/* ==========================
   METRICS
========================== */

.metrics{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:16px;
  padding:60px 8%;
}

.metric-card{
  background:#111827;
  border:1px solid #1E293B;
  padding:28px 16px;
  border-radius:16px;
  text-align:center;
  transition:.3s;
}

.metric-card:hover{transform:translateY(-5px);border-color:#3B82F6;}

.metric-card h2{
  color:#3B82F6;
  font-family:'DM Sans',sans-serif;
  font-size:clamp(1.4rem,3.5vw,2rem);
  font-weight:800;
  margin-bottom:6px;
  line-height:1.1;
  word-break:break-word;
}

.metric-card p{
  color:#64748B;
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:1px;
}

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

.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
  margin-top:60px;
}

.about-text p{
  color:#94A3B8;
  margin-bottom:18px;
  font-size:.95rem;
  line-height:1.8;
}

.about-highlights{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:28px;
}

.highlight-row{display:flex;align-items:flex-start;gap:14px;}

.highlight-dot{
  width:8px;height:8px;
  border-radius:50%;
  background:#3B82F6;
  flex-shrink:0;
  margin-top:7px;
}

.highlight-row p{color:#94A3B8;font-size:.9rem;}

.about-image{position:relative;}
.about-image img{border-radius:20px;}

.about-tag{
  position:absolute;
  bottom:24px;left:-20px;
  background:#111827;
  border:1px solid #1E293B;
  padding:14px 20px;
  border-radius:12px;
}

.about-tag span{color:#3B82F6;font-size:1.2rem;font-weight:700;display:block;}
.about-tag small{color:#64748B;font-size:.75rem;}

/* ==========================
   EXPERIENCE
========================== */

.experience{background:#0D1526;}

.timeline{margin-top:60px;display:flex;flex-direction:column;}

.timeline-item{
  display:grid;
  grid-template-columns:200px 1fr;
  gap:40px;
  padding:40px 0;
  border-bottom:1px solid #1E293B;
}

.timeline-item:last-child{border-bottom:none;}

.timeline-left{text-align:right;padding-top:4px;}

.timeline-company{color:#3B82F6;font-weight:700;font-size:.95rem;margin-bottom:4px;}
.timeline-period{color:#475569;font-size:.78rem;}

.timeline-right h3{font-weight:700;font-size:1.05rem;margin-bottom:8px;}

.timeline-right .role-tag{
  display:inline-block;
  background:#1E293B;
  color:#94A3B8;
  padding:4px 12px;
  border-radius:6px;
  font-size:.75rem;
  margin-bottom:16px;
}

.timeline-right ul{list-style:none;display:flex;flex-direction:column;gap:8px;}

.timeline-right ul li{
  color:#94A3B8;
  font-size:.88rem;
  padding-left:18px;
  position:relative;
  line-height:1.7;
}

.timeline-right ul li::before{
  content:'→';
  position:absolute;left:0;
  color:#3B82F6;
  font-size:.78rem;
  top:2px;
}

.timeline-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}

.tech-tag{
  background:#1E293B;
  color:#64748B;
  padding:4px 10px;
  border-radius:6px;
  font-size:.72rem;
}

/* ==========================
   EXPERTISE
========================== */

.expertise-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:20px;
  margin-top:50px;
}

.expertise-card{
  background:#111827;
  border:1px solid #1E293B;
  padding:28px;
  border-radius:16px;
  transition:.3s;
  cursor:default;
}

.expertise-card:hover{border-color:#3B82F6;transform:translateY(-4px);}

.expertise-icon{
  width:42px;height:42px;
  background:#1E293B;
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:14px;
  font-size:1.1rem;
}

.expertise-card h3{font-weight:700;font-size:.92rem;margin-bottom:8px;}
.expertise-card p{color:#64748B;font-size:.82rem;line-height:1.7;}

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

.projects{background:#0D1526;}

.project-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:20px;
  margin-top:50px;
}

.project-card{
  background:#111827;
  border:1px solid #1E293B;
  padding:32px;
  border-radius:18px;
  transition:.3s;
  position:relative;
  overflow:hidden;
}

.project-card::before{
  content:'';
  position:absolute;top:0;left:0;right:0;
  height:3px;
  background:#3B82F6;
  transform:scaleX(0);
  transition:.3s;
  transform-origin:left;
}

.project-card:hover{transform:translateY(-5px);border-color:#1E3A5F;}
.project-card:hover::before{transform:scaleX(1);}

.project-num{
  color:#1E293B;
  font-family:'DM Sans',sans-serif;
  font-size:clamp(2.5rem,6vw,4rem);
  font-weight:800;
  position:absolute;top:20px;right:20px;
  line-height:1;
}

.project-badge{
  display:inline-block;
  background:#1E293B;
  color:#3B82F6;
  padding:4px 12px;
  border-radius:6px;
  font-size:.72rem;
  font-weight:600;
  margin-bottom:14px;
}

.project-card h3{font-weight:700;font-size:1rem;margin-bottom:10px;line-height:1.35;padding-right:40px;}
.project-card p{color:#64748B;font-size:.85rem;line-height:1.8;margin-bottom:18px;}

.project-result{
  display:flex;
  align-items:center;
  gap:8px;
  color:#3B82F6;
  font-size:.8rem;
  font-weight:600;
}

.project-result::before{
  content:'';
  width:5px;height:5px;
  border-radius:50%;
  background:#3B82F6;
  flex-shrink:0;
}

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

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

.skill-group{
  background:#111827;
  border:1px solid #1E293B;
  border-radius:16px;
  padding:26px;
}

.skill-group h3{
  font-weight:700;
  font-size:.82rem;
  color:#3B82F6;
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:18px;
}

.skill-pills{display:flex;flex-wrap:wrap;gap:8px;}

.pill{
  background:#1E293B;
  color:#94A3B8;
  padding:5px 12px;
  border-radius:8px;
  font-size:.78rem;
}

/* ==========================
   QUOTE
========================== */

.quote-section{
  background:#0D1526;
  text-align:center;
}

.quote-section blockquote{
  font-family:'DM Sans',sans-serif;
  font-size:clamp(1.2rem,3vw,2rem);
  font-weight:700;
  color:#E2E8F0;
  max-width:780px;
  margin:0 auto 28px;
  line-height:1.45;
}

.quote-section blockquote span{color:#3B82F6;}
.quote-cite{color:#475569;font-size:.82rem;}

/* ==========================
   CTA
========================== */

.cta{text-align:center;}

.cta-buttons{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:32px;
}

/* ==========================
   FOOTER
========================== */

footer{
  background:#060D1A;
  padding:36px 8%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid #1E293B;
  flex-wrap:wrap;
  gap:20px;
}

.footer-logo{font-family:'DM Sans',sans-serif;font-weight:800;font-size:1.1rem;}

.footer-links{display:flex;gap:28px;flex-wrap:wrap;}

.footer-links a{color:#475569;font-size:.82rem;transition:.3s;}
.footer-links a:hover{color:#3B82F6;}

.footer-copy{color:#334155;font-size:.78rem;}

/* ==========================
   ANIMATIONS
========================== */

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

/* ==========================
   TABLET — 992px
========================== */

@media(max-width:992px){
  .about-grid{grid-template-columns:1fr;gap:40px;}
  .about-tag{display:none;}
  .timeline-item{grid-template-columns:1fr;gap:6px;}
  .timeline-left{text-align:left;display:flex;gap:12px;align-items:center;}
  .timeline-period::before{content:'·';margin-right:4px;}
}

/* ==========================
   MOBILE — 768px
========================== */

@media(max-width:768px){

  /* Navbar: show hamburger, hide links */
  .hamburger{display:flex;}
  .resume-btn{display:none;}

  .nav-links{
    display:none;
    position:fixed;
    top:0;left:0;
    width:100%;
    height:100vh;
    background:#0B1120;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:36px;
    z-index:1000;
  }

  .nav-links.open{display:flex;}

  .nav-links a{
    font-size:1.3rem;
    font-weight:600;
  }

  /* Show resume inside mobile menu */
  .nav-links li.mobile-resume a{
    background:#3B82F6;
    color:#fff;
    padding:12px 28px;
    border-radius:10px;
    font-size:1rem;
  }

  /* Sections */
  section{padding:70px 6%;}
  .metrics{padding:36px 6%;grid-template-columns:repeat(2,1fr);}

  /* Hero */
  .hero{padding:110px 6% 60px;}
  .hero h1{font-size:clamp(1.9rem,7vw,2.8rem);letter-spacing:-.5px;}
  .hero-description{font-size:.92rem;}
  .scroll-badge{display:none;}

  /* Metric numbers */
  .metric-card h2{font-size:clamp(1.3rem,5vw,1.8rem);}
  .metric-card p{font-size:.68rem;}
  .metric-card{padding:22px 12px;}

  /* Timeline */
  .timeline-item{grid-template-columns:1fr;gap:6px;padding:28px 0;}
  .timeline-left{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
  .timeline-company{font-size:.88rem;}
  .timeline-period{font-size:.75rem;color:#475569;}
  .timeline-right ul li{font-size:.85rem;}

  /* Footer */
  footer{flex-direction:column;text-align:center;gap:14px;}
  .footer-links{justify-content:center;gap:18px;}
}

/* ==========================
   SMALL MOBILE — 480px
========================== */

@media(max-width:480px){
  .metrics{grid-template-columns:repeat(2,1fr);gap:12px;}
  .metric-card h2{font-size:clamp(1.2rem,6vw,1.6rem);}
  .project-card{padding:24px;}
  .project-card h3{padding-right:30px;}
  .project-num{font-size:2.2rem;top:16px;right:16px;}
  .hero-buttons .btn-secondary:last-child{display:none;}
}

/* ==========================
   WHATSAPP FLOATING BUTTON
========================== */

.whatsapp-float{
  position:-webkit-sticky; /* Safari fallback */
  position:fixed;
  bottom:28px;
  right:28px;
  z-index:9999;
  display:-webkit-flex;
  display:flex;
  -webkit-align-items:center;
  align-items:center;
  gap:10px;
  background:#25D366;
  color:#fff;
  padding:13px 20px 13px 16px;
  border-radius:50px;
  font-weight:600;
  font-size:.85rem;
  text-decoration:none;
  box-shadow:0 4px 20px rgba(37,211,102,.4);
  -webkit-transition:all .3s ease;
  transition:all .3s ease;
  /* Prevent Safari from treating it as inline */
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
}

.whatsapp-float:hover{
  background:#1ebe5a;
  -webkit-transform:translateY(-3px);
  transform:translateY(-3px);
  box-shadow:0 8px 28px rgba(37,211,102,.5);
}

.whatsapp-float svg{display:block;flex-shrink:0;}

.whatsapp-label{white-space:nowrap;color:#fff;}

@media(max-width:768px){
  .whatsapp-float{
    bottom:20px;
    right:16px;
    padding:12px;
    border-radius:50%;
    width:52px;
    height:52px;
    justify-content:center;
  }
  .whatsapp-label{display:none;}
}

/* ==========================
   FAQ SECTION
========================== */

.faq{background:#0B1120;}

.faq-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(460px,1fr));
  gap:20px;
  margin-top:50px;
}

.faq-item{
  background:#111827;
  border:1px solid #1E293B;
  border-radius:16px;
  padding:28px 32px;
  transition:.3s;
}

.faq-item:hover{
  border-color:#3B82F6;
  transform:translateY(-3px);
}

.faq-item h3{
  font-size:1rem;
  font-weight:700;
  color:#E2E8F0;
  margin-bottom:12px;
  line-height:1.4;
}

.faq-item p{
  color:#64748B;
  font-size:.88rem;
  line-height:1.8;
}

@media(max-width:768px){
  .faq-grid{
    grid-template-columns:1fr;
  }
  .faq-item{
    padding:22px 20px;
  }
}