/* ═══════════════════════════════════════════════════
   MECAPORT S.A.S. — Landing Page
   Identidad: Azul marino + Amarillo/Dorado corporativo
   ═══════════════════════════════════════════════════ */

:root {
  /* Brand — extraído del logo real */
  --navy:         #071828;
  --navy-mid:     #0d2440;
  --navy-light:   #1a3a5c;
  --blue-corp:    #1a3a8f;   /* azul del logo */
  --gold:         #f5c800;   /* amarillo del engranaje */
  --gold-dark:    #d4a900;
  --gold-light:   #ffd740;
  --gold-glow:    rgba(245,200,0,0.15);
  --accent:       #1a3a8f;
  --accent-light: #3a6fd8;
  --accent-glow:  rgba(26,58,143,0.15);
  --anthracite:   #1e2832;
  --white:        #ffffff;
  --off-white:    #f5f7fa;
  --text-primary: #e2e8f0;
  --text-muted:   #8899aa;
  --text-dark:    #1a2533;
  --border:       rgba(255,255,255,0.08);
  --border-mid:   rgba(255,255,255,0.13);

  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;

  --max-w:  1280px;
  --nav-h:  72px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  --shadow-sm:    0 2px 12px rgba(0,0,0,0.25);
  --shadow-md:    0 8px 32px rgba(0,0,0,0.35);
  --shadow-lg:    0 24px 64px rgba(0,0,0,0.45);
  --shadow-gold:  0 8px 32px rgba(245,200,0,0.2);
  --shadow-blue:  0 8px 32px rgba(26,58,143,0.3);

  --ease:     cubic-bezier(0.25,0.46,0.45,0.94);
  --ease-out: cubic-bezier(0,0,0.2,1);
  --t-fast:   0.15s;
  --t-mid:    0.3s;
  --t-slow:   0.6s;
}

/* ─── RESET ─────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%}
body{font-family:'Barlow',system-ui,sans-serif;background:var(--navy);color:var(--text-primary);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
section[id]{scroll-margin-top:var(--nav-h)}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button{cursor:pointer;border:none;background:none;font:inherit}
address{font-style:normal}

/* ─── LAYOUT ─────────────────────────────────── */
.container{width:min(var(--max-w),100%);padding-inline:clamp(1.25rem,4vw,2.5rem);margin-inline:auto}

/* ─── TYPOGRAPHY ─────────────────────────────── */
.section-label{font-family:'Barlow Condensed',sans-serif;font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:.75rem}
.section-title{font-family:'Barlow Condensed',sans-serif;font-size:clamp(2rem,4vw,3rem);font-weight:800;line-height:1.1;color:var(--white);margin-bottom:var(--space-md);text-transform:uppercase}
.section-desc{font-size:1.05rem;color:var(--text-muted);max-width:56ch;line-height:1.75}
.section-header{margin-bottom:var(--space-xl)}
.section-header.centered{text-align:center}
.section-header.centered .section-desc{margin-inline:auto}

/* ─── BUTTONS ─────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:'Barlow Condensed',sans-serif;font-size:1rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.75rem 1.75rem;border-radius:var(--radius-sm);transition:all var(--t-mid) var(--ease);position:relative;overflow:hidden}
.btn svg{width:18px;height:18px;transition:transform var(--t-fast) var(--ease)}
.btn:hover svg{transform:translateX(4px)}

.btn-primary{background:var(--gold);color:var(--navy);box-shadow:var(--shadow-gold)}
.btn-primary:hover{background:var(--gold-dark);box-shadow:0 12px 40px rgba(245,200,0,.35);transform:translateY(-2px)}
.btn-primary:active{transform:translateY(0)}

.btn-secondary{background:transparent;color:var(--white);border:1.5px solid rgba(255,255,255,.3)}
.btn-secondary:hover{border-color:var(--gold);color:var(--gold);background:var(--gold-glow)}

.btn-nav{background:var(--gold);color:var(--navy);padding:.5rem 1.2rem;font-size:.82rem;font-weight:800}
.btn-nav:hover{background:var(--gold-dark)}

.btn-white{display:inline-flex;align-items:center;gap:.5rem;font-family:'Barlow Condensed',sans-serif;font-size:1rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.75rem 1.75rem;border-radius:var(--radius-sm);background:var(--white);color:var(--navy);transition:all var(--t-mid) var(--ease)}
.btn-white:hover{background:rgba(255,255,255,.9);transform:translateY(-2px)}

.btn-lg{padding:1rem 2.5rem;font-size:1.1rem}

/* ─── NAVBAR ─────────────────────────────────── */
.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;height:var(--nav-h);background:transparent;transition:background var(--t-mid) var(--ease),box-shadow var(--t-mid)}
.navbar.scrolled{background:rgba(7, 24, 40, 0.342);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 1px 0 var(--border),0 4px 24px rgba(0,0,0,.35)}

.nav-container{display:flex;align-items:center;justify-content:space-between;height:100%;padding-inline:clamp(1.25rem,4vw,2.5rem);max-width:var(--max-w);margin:auto}

/* Logo real */
.nav-logo{display:flex;align-items:center}
.nav-logo-img{
  height: 52px;
  width: auto;
  display: block;
  object-fit: contain;
  /* El logo tiene fondo blanco — le damos un fondo oscuro redondeado para que se vea bien en la nav oscura */
  background: rgba(214, 216, 252, 0);
  border-radius: 6px;
  padding: 4px 10px;
  transition: opacity var(--t-fast);
}
.nav-logo-img:hover{opacity:.9}

.nav-menu{display:flex;align-items:center;gap:var(--space-lg)}
.nav-list{display:flex;list-style:none;gap:.25rem}
.nav-link{font-family:'Barlow Condensed',sans-serif;font-size:.82rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.75);padding:.4rem .75rem;border-radius:var(--radius-sm);transition:color var(--t-fast);position:relative}
.nav-link::after{content:'';position:absolute;bottom:-2px;left:50%;right:50%;height:2px;background:var(--gold);transition:left var(--t-mid) var(--ease),right var(--t-mid) var(--ease)}
.nav-link:hover{color:var(--white)}
.nav-link:hover::after{left:.75rem;right:.75rem}

.nav-toggle{display:none;flex-direction:column;gap:5px;padding:6px}
.hamburger-line{display:block;width:24px;height:2px;background:var(--white);border-radius:2px;transition:all var(--t-mid) var(--ease)}
.nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ─── HERO ─────────────────────────────────── */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding-top:var(--nav-h)}

.hero-bg{
  position:absolute;inset:0;
  background-image: url('images/Ensamble\ RS\ Final\ 6.JPG.jpeg');
  background-size: cover;
  background-position: center 48%;
  background-repeat: no-repeat;
}

.hero-overlay{position:absolute;inset:0;background:linear-gradient(100deg,rgba(7,24,40,.92) 40%,rgba(7,24,40,.55) 100%)}
.hero-grid-overlay{position:absolute;inset:0;background-image:linear-gradient(rgba(245,200,0,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(245,200,0,.04) 1px,transparent 1px);background-size:60px 60px;mask-image:linear-gradient(to bottom,transparent,rgba(0,0,0,.5) 25%,rgba(0,0,0,.5) 75%,transparent)}

.hero-content{position:relative;z-index:2;padding-block:var(--space-3xl) var(--space-2xl);max-width:780px}

.hero-badge{display:inline-flex;align-items:center;gap:.5rem;font-family:'Barlow Condensed',sans-serif;font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-light);padding:.4rem 1rem;background:rgba(245,200,0,.1);border:1px solid rgba(245,200,0,.25);border-radius:100px;margin-bottom:var(--space-md)}
.badge-dot{width:7px;height:7px;background:var(--gold);border-radius:50%;animation:pulse-dot 2s ease-in-out infinite}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}

.hero-title{font-family:'Barlow Condensed',sans-serif;font-size:clamp(2.8rem,6vw,5rem);font-weight:800;line-height:1.05;letter-spacing:-.01em;color:var(--white);margin-bottom:var(--space-md);text-transform:uppercase}
.hero-title-accent{color:var(--gold);display:block}

.hero-subtitle{font-size:clamp(1rem,1.8vw,1.1rem);color:var(--text-muted);line-height:1.75;max-width:54ch;margin-bottom:var(--space-lg)}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-bottom:var(--space-xl)}

.hero-stats{display:flex;align-items:center;gap:var(--space-md);flex-wrap:wrap}
.hero-stat{display:flex;flex-direction:column}
.hero-stat strong{font-family:'Barlow Condensed',sans-serif;font-size:1.5rem;font-weight:800;color:var(--gold-light)}
.hero-stat span{font-size:.72rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em}
.hero-stat-divider{width:1px;height:40px;background:var(--border-mid)}

.scroll-indicator{position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.5rem;z-index:2;animation:bounce-down 2.5s ease-in-out infinite}
.scroll-line{width:1px;height:48px;background:linear-gradient(to bottom,var(--gold),transparent)}
.scroll-indicator span{font-family:'Barlow Condensed',sans-serif;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted)}
@keyframes bounce-down{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(8px)}}

/* ─── ABOUT ─────────────────────────────────── */
.about{padding-block:var(--space-3xl);background:var(--off-white)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5rem);align-items:start}

.about-text{color:var(--text-dark)}
.about-text .section-label{color:var(--blue-corp)}
.about-text .section-title{color:var(--navy)}

.about-lead{font-size:1.1rem;font-weight:500;color:var(--navy);line-height:1.7;margin-bottom:var(--space-md);border-left:3px solid var(--gold);padding-left:var(--space-md)}
.about-body{font-size:1rem;color:#4a5f72;line-height:1.8;margin-bottom:var(--space-md)}
.about-values{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:var(--space-lg)}
.value-chip{font-family:'Barlow Condensed',sans-serif;font-size:.8rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:.4rem 1rem;background:rgba(26,58,143,.07);color:var(--blue-corp);border:1px solid rgba(26,58,143,.2);border-radius:100px}

.about-image-wrap{position:relative}
.about-main-img{width:100%;height:360px;object-fit:cover;object-position:center 30%;border-radius:var(--radius-md);box-shadow:var(--shadow-lg)}
.about-stat-card{position:absolute;bottom:-1.5rem;left:-1.5rem;background:var(--gold);color:var(--navy);padding:var(--space-md) var(--space-lg);border-radius:var(--radius-md);box-shadow:var(--shadow-gold);z-index:2}
.stat-card-number{display:block;font-family:'Barlow Condensed',sans-serif;font-size:2rem;font-weight:800;line-height:1;color:var(--navy)}
.stat-card-label{font-size:.75rem;font-weight:600;color:rgba(7,24,40,.7);display:block;margin-top:.25rem;max-width:14ch}

.about-mini-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(26,58,143,.15);border:1px solid rgba(26,58,143,.15);border-radius:var(--radius-md);margin-top:var(--space-xl);overflow:hidden}
.mini-stat{background:var(--off-white);padding:var(--space-md) var(--space-sm);text-align:center;display:flex;flex-direction:column;align-items:center}
.mini-stat-num{font-family:'Barlow Condensed',sans-serif;font-size:2rem;font-weight:800;color:var(--blue-corp);line-height:1}
.mini-stat-suffix{font-family:'Barlow Condensed',sans-serif;font-size:1.6rem;font-weight:800;color:var(--gold-dark)}
.mini-stat-label{font-size:.7rem;color:#6a8090;text-transform:uppercase;letter-spacing:.07em;margin-top:.3rem}

/* ─── INDUSTRIES ─────────────────────────────── */
.industries{padding-block:var(--space-3xl);background:var(--navy);position:relative}
.industries::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 40% at 80% 60%,rgba(245,200,0,.04) 0%,transparent 70%);pointer-events:none}

.industries-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden}

.industry-card{background:var(--navy-mid);padding:var(--space-xl) var(--space-lg);display:flex;flex-direction:column;gap:var(--space-md);position:relative;transition:background var(--t-mid) var(--ease)}
.industry-card::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--gold);transition:width var(--t-mid) var(--ease)}
.industry-card:hover{background:#0f2d4e}
.industry-card:hover::after{width:100%}

.card-icon-wrap{width:52px;height:52px;background:var(--gold-glow);border:1px solid rgba(245,200,0,.2);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;transition:all var(--t-mid)}
.industry-card:hover .card-icon-wrap{background:rgba(245,200,0,.2);border-color:var(--gold)}
.card-icon{width:26px;height:26px;color:var(--gold)}
.card-title{font-family:'Barlow Condensed',sans-serif;font-size:1.1rem;font-weight:700;color:var(--white);letter-spacing:.03em;text-transform:uppercase}
.card-text{font-size:.87rem;color:var(--text-muted);line-height:1.7;flex:1}
.card-arrow{width:28px;height:28px;color:var(--gold);opacity:0;transform:translateX(-8px);transition:opacity var(--t-mid),transform var(--t-mid) var(--ease);margin-top:auto}
.card-arrow svg{width:100%;height:100%}
.industry-card:hover .card-arrow{opacity:1;transform:translateX(0)}

/* ─── SERVICES ─────────────────────────────── */
.services{padding-block:var(--space-3xl);background:#080f18;position:relative}
.services::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 50% 60% at 10% 50%,rgba(26,58,143,.06) 0%,transparent 70%);pointer-events:none}

/* Grid: 3 cols, tarjetas grandes y cuadradas */
.services-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:3px;                         /* junta las tarjetas como en la referencia */
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--radius-md);
  overflow:hidden;
}

/* Tarjeta base — amplia, solo ícono + número + título */
.service-card{
  background:var(--navy-mid);
  padding: 2.5rem 2rem 2rem;
  min-height: 240px;
  display:flex;
  flex-direction:column;
  justify-content: flex-end;
  gap:.6rem;
  position:relative;
  overflow:hidden;
  transition:background var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
  border:none;
}

/* Línea dorada inferior al hacer hover */
.service-card::after{
  content:'';
  position:absolute;
  bottom:0;left:0;
  width:0; height:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-light));
  transition:width var(--t-mid) var(--ease);
}
.service-card::before{ display:none; }   /* quitar el ::before anterior */

.service-card:hover{ background:#0f2d4e; transform:none; box-shadow:none; border-color:transparent; }
.service-card:hover::after{ width:100%; }

/* Número arriba a la izquierda */
.service-number{
  font-family:'Barlow Condensed',sans-serif;
  font-size:.72rem;font-weight:700;
  letter-spacing:.18em;
  color:var(--gold);opacity:.65;
  position:absolute;
  top:2rem; left:2.5rem;
}

/* Ícono — grande y dorado, en el medio-bajo */
.service-icon{
  width:52px; height:52px;
  color:var(--gold);
  margin-bottom:.25rem;
}
.service-icon svg{ width:100%; height:100%; }

/* Título — grande, sin subtítulo */
.service-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:1.15rem;font-weight:800;
  color:var(--white);
  text-transform:uppercase;
  letter-spacing:.03em;
  line-height:1.25;
  margin:0;
}

/* Eliminamos desc y list (ya no existen en el HTML, por seguridad) */
.service-desc{ display:none; }
.service-list{ display:none; }

/* Tarjeta destacada — idéntica a las demás (eliminamos diferencia) */
.service-card--featured{
  background:var(--navy-mid);
  border-color:transparent;
}
.service-card--featured::before{ display:none; }

/* Tarjeta CTA — fondo azul corporativo */
.service-card--cta{
  background:var(--blue-corp);
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:220px;
}
.service-card--cta::after{ background:rgba(255,255,255,.3); }
.service-card--cta:hover{ background:#0f2a6e; }

.service-cta-content{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:1.5rem; }
.service-cta-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:1.6rem; font-weight:800;
  color:var(--white);
  text-transform:uppercase;
  line-height:1.15;
  margin:0;
}
/* Quitar el párrafo de la CTA si quedara */
.service-card--cta p{ display:none; }

/* ─── METRICS ─────────────────────────────── */
.metrics{position:relative;padding-block:var(--space-3xl);background:var(--navy-mid);overflow:hidden}
.metrics-bg{position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 50%,rgba(245,200,0,.05) 0%,transparent 70%)}
.metrics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-xl);position:relative}
.metric-item{text-align:center;position:relative}
.metric-item+.metric-item::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:80px;background:var(--border-mid)}
.metric-number{display:block;font-family:'Barlow Condensed',sans-serif;font-size:clamp(3rem,5vw,4.5rem);font-weight:800;line-height:1;color:var(--gold-light);margin-bottom:.5rem}
.metric-number span:last-child{font-size:.6em;color:var(--gold)}
.metric-label{display:block;font-family:'Barlow Condensed',sans-serif;font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-md)}
.metric-bar{height:2px;background:rgba(255,255,255,.06);border-radius:1px;overflow:hidden;margin-inline:auto;max-width:120px}
.metric-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--gold-dark),var(--gold-light));border-radius:1px;transition:width 1.5s var(--ease-out)}
.metric-fill.animated{width:var(--w)}

/* ─── PROJECTS ─────────────────────────────── */
.projects{padding-block:var(--space-3xl);background:var(--navy)}
.projects-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-md)}

.project-card{background:var(--navy-mid);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;transition:transform var(--t-mid) var(--ease),box-shadow var(--t-mid)}
.project-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}

.project-card--large{grid-column:span 2;display:grid;grid-template-columns:1.3fr 1fr}

.project-img-wrap{overflow:hidden;position:relative}
.project-card--large .project-img-wrap{min-height:300px}
.project-img-wrap--short{aspect-ratio:16/10}

.project-img-real{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .6s var(--ease)}
.project-card:hover .project-img-real{transform:scale(1.04)}
.project-card--large .project-img-real{height:100%;min-height:300px}

.project-img-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(7,24,40,.4) 0%,transparent 50%);pointer-events:none}

.project-info{padding:var(--space-xl) var(--space-lg);display:flex;flex-direction:column;gap:var(--space-sm);justify-content:center}
.project-tag{display:inline-block;font-family:'Barlow Condensed',sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);padding:.25rem .75rem;background:rgba(245,200,0,.1);border:1px solid rgba(245,200,0,.2);border-radius:100px;width:fit-content}
.project-title{font-family:'Barlow Condensed',sans-serif;font-size:1.3rem;font-weight:800;color:var(--white);text-transform:uppercase;letter-spacing:.01em;line-height:1.2}
.project-desc{font-size:.87rem;color:var(--text-muted);line-height:1.75}
.project-meta{display:flex;align-items:center;gap:.5rem;font-size:.72rem;color:#4a6070;letter-spacing:.07em;text-transform:uppercase;margin-top:auto;padding-top:var(--space-sm);border-top:1px solid var(--border)}

/* ─── TESTIMONIALS ─────────────────────────── */
.testimonials{padding-block:var(--space-3xl);background:var(--off-white)}
.testimonials .section-title{color:var(--navy)}
.testimonials .section-label{color:var(--blue-corp)}
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-lg)}

.testimonial-card{background:var(--white);border:1px solid rgba(26,58,143,.1);border-radius:var(--radius-lg);padding:var(--space-xl) var(--space-lg);display:flex;flex-direction:column;gap:var(--space-md);box-shadow:0 2px 16px rgba(0,0,0,.06);transition:box-shadow var(--t-mid),transform var(--t-mid)}
.testimonial-card:hover{box-shadow:0 12px 40px rgba(26,58,143,.1);transform:translateY(-3px)}
.testimonial-quote{width:28px;color:var(--gold-dark);opacity:.7}
.testimonial-quote svg{width:100%}
.testimonial-text{font-size:.95rem;color:#3a5060;line-height:1.8;flex:1}
.testimonial-author{display:flex;align-items:center;gap:var(--space-sm);padding-top:var(--space-md);border-top:1px solid rgba(26,58,143,.1)}
.author-avatar{width:44px;height:44px;background:var(--blue-corp);color:var(--white);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.87rem;flex-shrink:0}
.author-name{display:block;font-size:.87rem;font-weight:600;color:var(--navy);font-style:normal}
.author-company{display:block;font-size:.75rem;color:#6a8090;margin-top:.15rem}

/* ─── CTA + CONTACT ─────────────────────────── */
.cta-section{padding-block:var(--space-3xl);position:relative;background:var(--navy);overflow:hidden}
.cta-bg{position:absolute;inset:0;background:radial-gradient(ellipse 70% 70% at 50% 50%,rgba(245,200,0,.06) 0%,transparent 65%),linear-gradient(180deg,var(--navy) 0%,#040e18 100%)}
.cta-bg::after{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(245,200,0,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(245,200,0,.03) 1px,transparent 1px);background-size:50px 50px}

.cta-content{position:relative;z-index:2;max-width:820px;margin:auto}
.cta-title{font-family:'Barlow Condensed',sans-serif;font-size:clamp(2.2rem,4.5vw,3.5rem);font-weight:800;line-height:1.1;color:var(--white);text-transform:uppercase;margin-bottom:var(--space-md)}
.cta-desc{font-size:1.05rem;color:var(--text-muted);line-height:1.75;margin-bottom:var(--space-xl);max-width:58ch}

.cta-form{background:rgba(255,255,255,.03);border:1px solid var(--border-mid);border-radius:var(--radius-lg);padding:var(--space-xl);margin-bottom:var(--space-xl)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md);margin-bottom:var(--space-md)}
.form-group{display:flex;flex-direction:column;gap:.4rem}
.form-label{font-family:'Barlow Condensed',sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.form-input{background:rgba(255,255,255,.05);border:1px solid var(--border-mid);border-radius:var(--radius-sm);padding:.75rem 1rem;font-family:'Barlow',sans-serif;font-size:1rem;color:var(--white);transition:border-color var(--t-fast),background var(--t-fast),box-shadow var(--t-fast);width:100%}
.form-input::placeholder{color:rgba(255,255,255,.22)}
.form-input:focus{outline:none;border-color:var(--gold);background:rgba(245,200,0,.05);box-shadow:0 0 0 3px rgba(245,200,0,.1)}
.form-textarea{resize:both;min-height:30px;min-width:200%;margin: 0 auto; display: block;}
.btn-submit{
    display:block;
    width:100%;
    margin-top:var(--space-md);
    padding:0.7rem 1.4rem;
    font-size:0.9rem;
}
.form-success{margin-top:.75rem;font-size:.9rem;color:var(--gold);font-family:'Barlow Condensed',sans-serif;font-weight:600;letter-spacing:.06em;min-height:1.2em}

.cta-info{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-lg);padding-top:var(--space-xl);border-top:1px solid var(--border)}
.cta-info-item{display:flex;align-items:flex-start;gap:var(--space-sm)}
.cta-info-icon{width:40px;height:40px;background:var(--gold-glow);border:1px solid rgba(245,200,0,.2);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--gold)}
.cta-info-icon svg{width:20px;height:20px}
.cta-info-item strong{display:block;font-family:'Barlow Condensed',sans-serif;font-size:.82rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--white);margin-bottom:.2rem}
.cta-info-item span{font-size:.87rem;color:var(--text-muted);line-height:1.5}

/* ─── FOOTER ─────────────────────────────── */
.footer{background:#030c13}
.footer-top{padding-block:var(--space-3xl) var(--space-2xl);border-bottom:1px solid var(--border)}
.footer-grid{display:grid;grid-template-columns:1.8fr repeat(3,1fr);gap:var(--space-xl)}

.footer-brand{display:flex;flex-direction:column;gap:var(--space-md)}
.footer-logo-link{display:inline-block;width:fit-content}
.footer-logo-img{height:56px;width:auto;background:white;border-radius:6px;padding:5px 12px;object-fit:contain}
.footer-tagline{font-size:.87rem;color:var(--text-muted);line-height:1.7;max-width:28ch}

.footer-social{display:flex;gap:.75rem}
.social-link{width:38px;height:38px;background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:var(--text-muted);transition:all var(--t-fast)}
.social-link svg{width:16px;height:16px}
.social-link:hover{background:var(--gold-glow);border-color:var(--gold);color:var(--gold)}

.footer-nav-title{font-family:'Barlow Condensed',sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:var(--space-md)}
.footer-nav-list{list-style:none;display:flex;flex-direction:column;gap:.625rem}
.footer-nav-list a{font-size:.87rem;color:var(--text-muted);transition:color var(--t-fast)}
.footer-nav-list a:hover{color:var(--gold)}

.footer-address{display:flex;flex-direction:column;gap:.625rem}
.footer-address p{font-size:.87rem;color:var(--text-muted);line-height:1.65}
.footer-address a{transition:color var(--t-fast)}
.footer-address a:hover{color:var(--gold)}

.footer-bottom{padding-block:var(--space-md)}
.footer-bottom .container{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-sm)}
.footer-bottom span,.footer-bottom a{font-size:.72rem;color:rgba(255,255,255,.22);letter-spacing:.05em}
.footer-legal{display:flex;gap:var(--space-md)}
.footer-legal a:hover{color:var(--text-muted)}

/* ─── BACK TO TOP ─────────────────────────── */
.back-to-top{position:fixed;bottom:2rem;right:1.5rem;width:44px;height:44px;background:var(--gold);color:var(--navy);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-gold);opacity:0;visibility:hidden;transform:translateY(12px);transition:all var(--t-mid) var(--ease);z-index:99}
.back-to-top svg{width:20px;height:20px}
.back-to-top.visible{opacity:1;visibility:visible;transform:translateY(0)}
.back-to-top:hover{background:var(--gold-dark);transform:translateY(-2px)}

/* ─── REVEAL ANIMATIONS ─────────────────────── */
.reveal-up{opacity:0;transform:translateY(36px);transition:opacity .7s var(--ease-out) var(--delay,0s),transform .7s var(--ease-out) var(--delay,0s)}
.reveal-up.in-view{opacity:1;transform:translateY(0)}
.reveal-fade{opacity:0;transition:opacity .8s var(--ease-out) var(--delay,0s)}
.reveal-fade.in-view{opacity:1}

/* ─── RESPONSIVE ─────────────────────────────── */
@media(max-width:1100px){
  .industries-grid{grid-template-columns:repeat(2,1fr)}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--space-xl) var(--space-lg)}
}
@media(max-width:960px){
  .about-grid{grid-template-columns:1fr}
  .about-visual{order:-1}
  .about-stat-card{left:auto;right:0;bottom:-1rem}
  .project-card--large{grid-column:span 1;grid-template-columns:1fr}
  .project-card--large .project-img-wrap{min-height:220px;aspect-ratio:16/9}
  .project-card--large .project-img-real{height:220px}
  .metrics-grid{grid-template-columns:repeat(2,1fr)}
  .metric-item+.metric-item::before{display:none}
  .cta-info{grid-template-columns:1fr;gap:var(--space-md)}
  .testimonials-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .nav-menu{position:fixed;top:var(--nav-h);left:0;right:0;background:rgba(7,24,40,.98);backdrop-filter:blur(20px);flex-direction:column;align-items:stretch;gap:0;padding:var(--space-md) var(--space-md) var(--space-lg);transform:translateY(-110%);opacity:0;transition:transform var(--t-mid) var(--ease),opacity var(--t-mid);border-bottom:1px solid var(--border);pointer-events:none}
  .nav-menu.open{transform:translateY(0);opacity:1;pointer-events:all}
  .nav-list{flex-direction:column;gap:0}
  .nav-link{padding:.75rem 0;border-bottom:1px solid var(--border);font-size:.95rem}
  .nav-link::after{display:none}
  .btn-nav{margin-top:var(--space-md);text-align:center}
  .nav-toggle{display:flex}
  .hero-stat-divider{display:none}
  .industries-grid{grid-template-columns:1fr}
  .services-grid{grid-template-columns:1fr}
  .projects-grid{grid-template-columns:1fr}
  .metrics-grid{grid-template-columns:repeat(2,1fr)}
  .testimonials-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:var(--space-xl)}
  .about-mini-stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){
  .hero-title{font-size:clamp(2.2rem,9vw,3rem)}
  .hero-actions{flex-direction:column;align-items:flex-start}
  .cta-form{padding:var(--space-md)}
  .section-title{font-size:clamp(1.7rem,6vw,2.25rem)}
  .nav-logo-img{height:42px}
}

/* ─── SCROLLBAR ─────────────────────────────── */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--navy)}
::-webkit-scrollbar-thumb{background:var(--navy-light);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--gold)}
::selection{background:rgba(245,200,0,.25);color:var(--white)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}