:root {
  --clr-primary: #4f46e5;
  --clr-primary-light: #6366f1;
  --clr-secondary: #ec4899;
  --clr-bg: #f9fafb;
  --clr-surface: #ffffff;
  --clr-text-dark: #111827;
  --clr-text-light: #6b7280;
  --radius-sm: .5rem;
  --radius-md: 1rem;
  --shadow-sm: 0 2px 8px rgba(0,0,0,.06);
  --transition: all .3s ease;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Poppins',system-ui,sans-serif;
  color:var(--clr-text-dark);
  background:var(--clr-bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.container{width:min(90%,1100px);margin-inline:auto}
.section{padding-block:4rem}
h2.section-title{
  text-align:center;
  font-size:clamp(1.75rem,3vw,2.25rem);
  margin-bottom:2rem;
  position:relative;
}
h2.section-title::after{
  content:"";
  width:4rem;height:3px;
  background:var(--clr-primary);
  position:absolute;left:50%;bottom:-.75rem;
  transform:translateX(-50%);
}

/* Header / Hero */
header{
  background:linear-gradient(135deg,var(--clr-primary)0%,var(--clr-secondary)100%);
  color:#fff;text-align:center;
  padding:7rem 1rem 8rem;
  position:relative;overflow:hidden;
}
header::after{
  content:"";position:absolute;top:100%;left:0;width:100%;height:4rem;
  background:var(--clr-bg);
  clip-path:polygon(0 0,100% 100%,0 100%);
}
header h1{font-size:clamp(2.25rem,4vw,3rem);font-weight:700;letter-spacing:-.5px}
header p{font-size:1.125rem;opacity:.9;margin-top:.75rem}

/* Nav */
nav{
  position:sticky;top:0;
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(10px);
  box-shadow:var(--shadow-sm);
  z-index:100;
}
.nav-wrapper{
  display:flex;justify-content:center;gap:2rem;
  padding:.75rem 1rem;font-weight:500;
}
nav a{position:relative;transition:var(--transition)}
nav a::after{
  content:"";position:absolute;bottom:-4px;left:0;width:0;height:2px;
  background:var(--clr-primary);transition:var(--transition);
}
nav a:hover{color:var(--clr-primary)}
nav a:hover::after{width:100%}

/* Services */
.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:2rem;
}
.service-card{
  background:var(--clr-surface);
  padding:2rem 1.5rem;border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);transition:var(--transition);
}
.service-card:hover{
  transform:translateY(-6px);
  box-shadow:0 10px 25px rgba(0,0,0,.08);
}
.service-card h3{font-size:1.25rem;margin-bottom:.5rem}
.service-card p{color:var(--clr-text-light);font-size:.95rem}

/* Process */
.process-flow{display:grid;gap:2rem}
.process-step{
  display:flex;gap:1rem;align-items:flex-start;
  background:var(--clr-surface);padding:1.5rem;
  border-radius:var(--radius-md);box-shadow:var(--shadow-sm);
  transition:var(--transition);
}
.process-step:hover{transform:translateY(-4px)}
.process-number{
  font-weight:600;color:var(--clr-primary);
  font-size:1.75rem;line-height:1;min-width:2.75rem;
}
.process-content h3{margin-bottom:.35rem;font-size:1.1rem}
.process-content p{font-size:.95rem;color:var(--clr-text-light)}

/* Plans */
.plans-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:2rem;
}
.plan-card{
  background:var(--clr-surface);padding:2rem 1.5rem 2.5rem;
  border-radius:var(--radius-md);box-shadow:var(--shadow-sm);
  transition:var(--transition);position:relative;overflow:hidden;
}
.plan-card:hover{
  transform:translateY(-6px);
  box-shadow:0 12px 28px rgba(0,0,0,.08);
}
.plan-card h3{margin-bottom:.75rem;font-size:1.3rem}
.plan-card p{font-size:.95rem;color:var(--clr-text-light)}
.plan-price{margin-top:1rem;font-weight:600;color:var(--clr-primary)}
.plan-card[data-tier="bronze"]{background:#cd7f32;color:#fff}
.plan-card[data-tier="silver"]{background:#c0c0c0;color:#000}
.plan-card[data-tier="gold"]{background:#ffd700;color:#000}

/* Timeline */
.timeline{position:relative;margin-top:3rem}
.timeline::before{
  content:"";position:absolute;left:50%;top:0;
  transform:translateX(-50%);width:4px;height:100%;
  background:var(--clr-primary);opacity:.1;
}
.timeline-item{position:relative;display:flex;width:100%;margin-bottom:3rem}
.timeline-item.left{justify-content:flex-start}
.timeline-item.right{justify-content:flex-end}
.timeline-content{
  position:relative;background:var(--clr-surface);
  padding:1.25rem 1.5rem;width:min(90%,450px);
  border-radius:var(--radius-md);box-shadow:var(--shadow-sm);
}
.timeline-content::before{
  content:"";position:absolute;top:1rem;width:16px;height:16px;
  background:var(--clr-bg);border:4px solid var(--clr-primary);
  border-radius:50%;z-index:10;
}
.timeline-item.left .timeline-content::before{right:-36px}
.timeline-item.right .timeline-content::before{left:-36px}
.timeline-content h3{margin-bottom:.35rem}
.timeline-content p{font-size:.95rem;color:var(--clr-text-light)}

/* Contact */
#contact p{text-align:center;font-size:1rem}
#contact a{color:var(--clr-primary);font-weight:500}

/* Footer */
footer{
  background:var(--clr-text-dark);color:#fff;
  text-align:center;padding:1.25rem 1rem;
}

/* Responsive tweaks */
@media(max-width:768px){
  .nav-wrapper{gap:1rem}
  .process-step{flex-direction:column}
  .process-number{font-size:1.4rem}
  .timeline::before{left:8px}
  .timeline-item{justify-content:flex-start}
  .timeline-item.right .timeline-content{margin-left:1.75rem}
  .timeline-item.right .timeline-content::before,
  .timeline-item.left  .timeline-content::before{left:-32px}
}

/* Portfolio fix on phone */
@media(max-width: 768px) {
  .timeline {
    padding-left: 1.5rem;
  }
  .timeline::before {
    left: 1rem;
  }
  .timeline-item {
    flex-direction: row;
    justify-content: flex-start;
  }
  .timeline-item.right,
  .timeline-item.left {
    justify-content: flex-start;
  }
  .timeline-content {
    margin-left: 2.5rem;
    width: 100%;
  }
  .timeline-content::before {
    left: -1.75rem;
    top: 1rem;
    right: auto;
  }
}

/* Language switcher */
.lang-switcher {
  position: fixed;
  top: 60px;
  right: 1rem;
  display: flex;
  gap: .4rem;
  z-index: 90;
}

.lang-btn{
  background:var(--clr-surface);
  border:1px solid var(--clr-primary);
  padding:.35rem .65rem;
  font-size:.8rem;
  font-weight:600;
  border-radius:var(--radius-sm);
  transition:var(--transition);
}

.lang-btn:hover{
  background:var(--clr-primary);
  color:#fff;
}

.lang-btn.active{        /* highlight current language */
  background:var(--clr-primary);
  color:#fff;
  pointer-events:none;
}

  /* WhatsApp Icon */
.whatsapp-float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  cursor: pointer;
}
.whatsapp-float img {
  width: 100%;
  height: auto;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}