/* ============================================================
   XtraTech & Serviços, Lda — style.css
   C:/xampp/htdocs/xtratech/assets/css/style.css
   ============================================================ */

/* ── RESET & VARIABLES ── */
:root {
  --navy:    #0D1F6B;
  --navy2:   #0A1855;
  --navy3:   #071240;
  --blue:    #1A3A9E;
  --accent:  #2E6BE6;
  --lblue:   #4A90E2;
  --sky:     #7DB8F7;
  --white:   #ffffff;
  --offwhite:#F0F4FF;
  --light:   #F7F9FF;
  --text:    #1a1a2e;
  --muted:   #6B7A9E;
  --border:  #E2E8F8;
  --card:    #ffffff;
  --shadow:  0 8px 32px rgba(13,31,107,.10);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family:'Inter', 'Segoe UI', system-ui, sans-serif;
  background:var(--light);
  color:var(--text);
  overflow-x:hidden;
  line-height:1.6;
}
img { max-width:100%; display:block; }
a { text-decoration:none; }
ul { list-style:none; }


/* ── NAVBAR ── */
#navbar {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(7,18,64,0.92);
  border-bottom:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  transition:background .3s;
}
#navbar.scrolled { background:rgba(7,18,64,0.99); }

.nav-inner {
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:.85rem 5%;
  gap:1.5rem;
}

/* Logo */
.logo-wrap {
  display:flex; align-items:center;
  flex-shrink:0; text-decoration:none;
}
.logo-full {
  height:40px;
  width:auto;
  max-width:160px;
  object-fit:contain;
  display:block;
}

/* Nav links */
.nav-links {
  display:flex; align-items:center; gap:1.8rem;
  margin-left:auto;
}
.nav-links a {
  color:rgba(255,255,255,.68);
  font-size:.88rem; font-weight:500;
  transition:color .2s;
  white-space:nowrap;
}
.nav-links a:hover { color:#fff; }

/* Nav CTA */
.nav-cta {
  background:var(--accent); color:#fff;
  padding:.52rem 1.3rem; border-radius:8px;
  font-weight:700; font-size:.84rem;
  transition:background .2s, transform .2s;
  white-space:nowrap; flex-shrink:0;
}
.nav-cta:hover { background:var(--lblue); transform:translateY(-1px); }

/* Hamburger */
.hamburger {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:4px;
}
.hamburger span {
  width:24px; height:2px;
  background:#fff; border-radius:2px;
  transition:.3s;
}
.hamburger.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.hamburger.active span:nth-child(2) { opacity:0; }
.hamburger.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* Mobile Menu */
.mobile-menu {
  display:none; position:fixed; top:62px; left:0; right:0;
  background:var(--navy3); border-bottom:1px solid rgba(255,255,255,.08);
  z-index:999; padding:1rem 5% 1.5rem;
  transform:translateY(-10px); opacity:0;
  transition:transform .3s, opacity .3s;
}
.mobile-menu.open {
  display:block;
  transform:translateY(0); opacity:1;
}
.mobile-menu ul { display:flex; flex-direction:column; gap:.2rem; }
.mobile-menu ul li a {
  display:block; padding:.75rem 0;
  color:rgba(255,255,255,.75); font-size:.95rem; font-weight:500;
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:color .2s;
}
.mobile-menu ul li a:hover { color:#fff; }
.mobile-cta {
  margin-top:.5rem;
  background:var(--accent) !important;
  color:#fff !important;
  border-radius:8px !important;
  border:none !important;
  text-align:center;
  padding:.75rem 0 !important;
}


/* ── BUTTONS ── */
.btn-white {
  background:#fff; color:var(--navy);
  padding:.82rem 1.9rem; border-radius:9px;
  font-weight:800; font-size:.92rem;
  transition:all .2s;
  box-shadow:0 4px 20px rgba(0,0,0,.22);
  display:inline-block;
}
.btn-white:hover { background:var(--offwhite); transform:translateY(-2px); }

.btn-ghost {
  border:1.5px solid rgba(255,255,255,.4); color:#fff;
  padding:.82rem 1.9rem; border-radius:9px;
  font-weight:600; font-size:.92rem;
  transition:all .2s;
  display:inline-block;
}
.btn-ghost:hover { border-color:#fff; background:rgba(255,255,255,.08); }


/* ── HERO ── */
.hero {
  min-height:100vh;
  display:flex; align-items:center;
  padding:7rem 5% 4rem;
  background:
    radial-gradient(ellipse 70% 60% at 75% 50%, rgba(46,107,230,.22) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 10% 85%, rgba(255,255,255,.04) 0%, transparent 55%),
    linear-gradient(135deg, var(--navy3) 0%, var(--navy) 55%, var(--blue) 100%);
  position:relative; overflow:hidden;
}
.hero::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:38px 38px;
}

.hero-inner {
  max-width:1200px; margin:0 auto; width:100%;
  display:grid; grid-template-columns:1fr 1fr;
  gap:3.5rem; align-items:center;
  position:relative; z-index:1;
}

/* Hero content */
.hero-badge {
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.9); padding:.35rem 1rem;
  border-radius:50px; font-size:.74rem; font-weight:600;
  letter-spacing:.7px; text-transform:uppercase; margin-bottom:1.2rem;
}
.badge-dot {
  width:7px; height:7px; background:#4ADE80;
  border-radius:50%; flex-shrink:0;
  animation:pulse 2s infinite;
}
@keyframes pulse {
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.5;transform:scale(1.7)}
}

.hero h1 {
  font-size:clamp(2rem,3.8vw,3.2rem);
  font-weight:900; line-height:1.1; letter-spacing:-1px;
  color:#fff; margin-bottom:1.2rem;
}
.hero h1 em { font-style:normal; color:var(--sky); }

.hero p {
  font-size:.98rem; color:rgba(255,255,255,.7);
  line-height:1.78; margin-bottom:2rem; max-width:460px;
}

.hero-btns { display:flex; gap:1rem; flex-wrap:wrap; }

/* Hero Visual Cards */
.hero-visual { display:flex; flex-direction:column; gap:.9rem; }

.hv-card {
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.13);
  border-radius:14px; padding:1.2rem 1.4rem;
  backdrop-filter:blur(12px);
  transition:transform .3s, border-color .3s;
}
.hv-card:hover { transform:translateX(6px); border-color:rgba(255,255,255,.28); }
.hv-card.float { animation:float 5.5s ease-in-out infinite; }
@keyframes float {
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}

.hvc-head { display:flex; align-items:center; gap:.7rem; margin-bottom:.9rem; }
.hvc-icon {
  width:40px; height:40px; border-radius:10px;
  background:rgba(255,255,255,.15);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; flex-shrink:0;
}
.hvc-title { font-weight:700; font-size:.88rem; color:#fff; }
.hvc-sub   { font-size:.7rem; color:rgba(255,255,255,.52); }

/* Stat grid (hero card) */
.stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.65rem; }
.stat-box {
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.11);
  border-radius:9px; padding:.7rem; text-align:center;
}
.sn { font-size:1.25rem; font-weight:800; color:var(--sky); }
.sl { font-size:.66rem; color:rgba(255,255,255,.5); margin-top:.1rem; }

/* Progress bars (hero card) */
.prog-wrap { display:flex; flex-direction:column; gap:.5rem; }
.prog-label {
  display:flex; justify-content:space-between;
  font-size:.73rem; color:rgba(255,255,255,.62); margin-bottom:.25rem;
}
.prog-bar {
  height:5px; background:rgba(255,255,255,.1);
  border-radius:3px; overflow:hidden;
}
.prog-fill {
  height:100%; border-radius:3px;
  background:linear-gradient(90deg, var(--accent), var(--sky));
}

/* Tags card */
.tags-label {
  font-size:.7rem; color:rgba(255,255,255,.42);
  font-weight:600; text-transform:uppercase;
  letter-spacing:1px; margin-bottom:.65rem;
}
.tags-wrap { display:flex; flex-wrap:wrap; gap:.45rem; }
.tag {
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.17);
  color:rgba(255,255,255,.84);
  border-radius:50px; padding:.2rem .7rem;
  font-size:.71rem; font-weight:600;
}


/* ── CLIENTS STRIP ── */
.clients-strip {
  background:var(--navy);
  padding:1.6rem 5%;
  border-top:1px solid rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.clients-inner { max-width:1100px; margin:0 auto; }
.clients-label {
  text-align:center; font-size:.7rem;
  color:rgba(255,255,255,.35); text-transform:uppercase;
  letter-spacing:2px; margin-bottom:1.1rem;
}
.client-logos {
  display:flex; justify-content:center;
  align-items:center; gap:2.5rem; flex-wrap:wrap;
}
.client-logo {
  color:rgba(255,255,255,.3); font-weight:800;
  font-size:.85rem; letter-spacing:1.5px;
  transition:color .25s; cursor:default;
}
.client-logo:hover { color:rgba(255,255,255,.75); }


/* ── SECTIONS BASE ── */
.section-light { background:var(--light); padding:5rem 5%; }
.section-dark  { background:var(--navy3); padding:5rem 5%; }
.section-white { background:#fff; padding:5rem 5%; }
.section-inner { max-width:1200px; margin:0 auto; }

.section-tag {
  display:inline-block;
  background:rgba(13,31,107,.1);
  color:var(--navy); border:1px solid rgba(13,31,107,.15);
  padding:.28rem .85rem; border-radius:50px;
  font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:1px; margin-bottom:.8rem;
}
.section-tag.inverted {
  background:rgba(255,255,255,.1);
  color:rgba(255,255,255,.8);
  border-color:rgba(255,255,255,.15);
}

.section-title {
  font-size:clamp(1.65rem,2.8vw,2.35rem);
  font-weight:800; letter-spacing:-.8px;
  color:var(--navy3); margin-bottom:.8rem;
}
.section-title.white { color:#fff; }

.section-subtitle {
  color:var(--muted); font-size:.95rem; line-height:1.75;
  max-width:520px;
}
.section-subtitle.center { margin:0 auto; text-align:center; }
.section-head-center { text-align:center; margin-bottom:.5rem; }


/* ── SERVICES ── */
.svc-intro {
  display:grid; grid-template-columns:1fr auto;
  gap:3rem; align-items:center; margin-bottom:2.8rem;
}
.svc-counts { display:flex; gap:2rem; flex-shrink:0; }
.sc-box { text-align:center; }
.scn { font-size:1.9rem; font-weight:800; color:var(--navy); }
.scl { font-size:.73rem; color:var(--muted); margin-top:.1rem; }

.services-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.2rem;
}

.svc-card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px; padding:1.75rem 1.5rem;
  transition:all .3s; position:relative; overflow:hidden;
}
.svc-card::after {
  content:''; position:absolute;
  bottom:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--navy),var(--accent));
  transform:scaleX(0); transition:transform .3s; transform-origin:left;
}
.svc-card:hover {
  border-color:rgba(13,31,107,.2);
  transform:translateY(-5px);
  box-shadow:0 14px 42px rgba(13,31,107,.11);
}
.svc-card:hover::after { transform:scaleX(1); }

.svc-icon {
  width:50px; height:50px; border-radius:12px;
  background:rgba(13,31,107,.08);
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; margin-bottom:1.1rem;
}
.svc-card h3 {
  font-size:.98rem; font-weight:700;
  margin-bottom:.45rem; color:var(--navy3);
}
.svc-card p { color:var(--muted); font-size:.83rem; line-height:1.62; }


/* ── ABOUT ── */
.about-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:4rem; align-items:center;
}
.about-desc {
  color:rgba(255,255,255,.66);
  font-size:.93rem; line-height:1.78; margin-bottom:.8rem;
}
.check-list { display:flex; flex-direction:column; gap:.65rem; margin-top:1.2rem; }
.check-list li {
  display:flex; align-items:flex-start; gap:.7rem;
  color:rgba(255,255,255,.7); font-size:.87rem; line-height:1.5;
}
.check-list li::before {
  content:'✓'; min-width:20px; height:20px;
  background:rgba(255,255,255,.12); color:var(--sky);
  border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:.68rem; font-weight:800;
  margin-top:.1rem; flex-shrink:0;
}
.about-stats { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.a-stat {
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:15px; padding:1.4rem; text-align:center;
  transition:border-color .3s;
}
.a-stat:hover { border-color:rgba(255,255,255,.25); }
.a-big {
  font-size:2rem; font-weight:800; color:var(--sky);
}
.a-desc { font-size:.74rem; color:rgba(255,255,255,.48); margin-top:.3rem; }


/* ── PROCESS ── */
.steps-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1.4rem; margin-top:2.8rem;
}
.step {
  background:var(--card); border:1px solid var(--border);
  border-radius:15px; padding:1.7rem 1.4rem; text-align:center;
  transition:all .3s;
}
.step:hover {
  border-color:rgba(13,31,107,.2);
  transform:translateY(-4px);
  box-shadow:var(--shadow);
}
.step-num {
  width:50px; height:50px; border-radius:50%;
  border:2px solid var(--navy); color:var(--navy);
  font-size:1.1rem; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 1.1rem; position:relative;
}
.step-num::after {
  content:''; position:absolute; inset:-6px;
  border-radius:50%; border:1px solid rgba(13,31,107,.15);
}
.step h3 { font-size:.93rem; font-weight:700; margin-bottom:.45rem; color:var(--navy3); }
.step p  { color:var(--muted); font-size:.82rem; line-height:1.62; }


/* ── FAQ ── */
.faq-wrap {
  display:grid; grid-template-columns:1fr 1fr;
  gap:3.5rem; align-items:start;
}
.faq-list { display:flex; flex-direction:column; gap:.75rem; margin-top:1.8rem; }
.faq-item {
  background:var(--card); border:1px solid var(--border);
  border-radius:12px; overflow:hidden;
}
.faq-q {
  padding:1.1rem 1.4rem; font-weight:600; font-size:.87rem;
  cursor:pointer; display:flex; justify-content:space-between; align-items:center;
  color:var(--navy3); transition:color .2s; user-select:none;
  gap:1rem;
}
.faq-q:hover { color:var(--navy); }
.faq-icon { font-size:1.2rem; color:var(--muted); transition:transform .3s,color .3s; flex-shrink:0; }
.faq-item.open .faq-icon { transform:rotate(45deg); color:var(--accent); }
.faq-a {
  max-height:0; overflow:hidden;
  transition:max-height .35s ease, padding .3s;
  color:var(--muted); font-size:.84rem; line-height:1.72;
  padding:0 1.4rem;
}
.faq-item.open .faq-a { max-height:250px; padding:0 1.4rem 1.2rem; }

/* FAQ CTA card */
.faq-cta {
  background:linear-gradient(135deg, var(--navy), var(--blue));
  border-radius:20px; padding:2.4rem 2rem; color:#fff;
  display:flex; flex-direction:column; gap:1rem;
}
.faq-cta h3 { font-size:1.25rem; font-weight:800; }
.faq-cta p  { font-size:.87rem; color:rgba(255,255,255,.7); line-height:1.7; }
.faq-cta a {
  background:#fff; color:var(--navy);
  padding:.75rem 1.5rem; border-radius:9px;
  font-weight:800; font-size:.87rem; display:inline-block;
  transition:all .2s; text-align:center;
}
.faq-cta a:hover { background:var(--offwhite); transform:translateY(-1px); }
.faq-cta-email {
  background:transparent !important;
  border:1.5px solid rgba(255,255,255,.3) !important;
  color:#fff !important;
}
.faq-cta-email:hover { border-color:#fff !important; background:rgba(255,255,255,.08) !important; }


/* ── CTA BAND ── */
.cta-band {
  background:linear-gradient(135deg, var(--navy3), var(--navy), var(--blue));
  padding:5rem 5%; text-align:center;
  border-top:1px solid rgba(255,255,255,.05);
}
.cta-band h2 {
  font-size:clamp(1.7rem,3vw,2.6rem);
  font-weight:800; color:#fff; letter-spacing:-.8px; margin-bottom:.8rem;
}
.cta-band p { color:rgba(255,255,255,.62); font-size:.96rem; margin-bottom:2rem; }
.cta-btns {
  display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;
  margin-bottom:1.5rem;
}
.cta-btn-w {
  background:#fff; color:var(--navy);
  padding:.85rem 2rem; border-radius:9px;
  font-weight:800; font-size:.92rem;
  transition:all .2s; box-shadow:0 4px 20px rgba(0,0,0,.25);
}
.cta-btn-w:hover { background:var(--offwhite); transform:translateY(-2px); }
.cta-btn-o {
  border:1.5px solid rgba(255,255,255,.4); color:#fff;
  padding:.85rem 2rem; border-radius:9px;
  font-weight:600; font-size:.92rem; transition:all .2s;
}
.cta-btn-o:hover { border-color:#fff; background:rgba(255,255,255,.08); }
.cta-socials {
  display:flex; gap:2rem; justify-content:center;
  flex-wrap:wrap; color:rgba(255,255,255,.45); font-size:.8rem;
}


/* ── FOOTER ── */
footer {
  background:var(--navy3);
  border-top:1px solid rgba(255,255,255,.06);
  padding:3rem 5% 1.5rem;
}
.footer-grid {
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr;
  gap:2.5rem;
  padding-bottom:2rem;
  border-bottom:1px solid rgba(255,255,255,.07);
}

/* Contacto na mesma linha que Empresa */
.footer-col.contacto { grid-column: auto; }
.footer-brand p {
  color:rgba(255,255,255,.42); font-size:.82rem;
  margin-top:.9rem; line-height:1.68; max-width:250px;
}
.footer-logo { margin-bottom:.2rem; }
.footer-logo-img  { width:34px; }
.footer-logo-text { height:20px; }

.footer-col h4 {
  font-size:.73rem; font-weight:700; text-transform:uppercase;
  letter-spacing:1.2px; color:rgba(255,255,255,.38); margin-bottom:.9rem;
}
.footer-col ul { display:flex; flex-direction:column; gap:.48rem; }
.footer-col ul li a {
  color:rgba(255,255,255,.52); font-size:.82rem; transition:color .2s;
}
.footer-col ul li a:hover { color:#fff; }

.footer-bottom {
  max-width:1200px; margin:1.4rem auto 0;
  display:flex; justify-content:space-between; align-items:center;
  color:rgba(255,255,255,.28); font-size:.77rem; flex-wrap:wrap; gap:.8rem;
}
.footer-socials { display:flex; gap:.6rem; }
.soc {
  width:32px; height:32px; border-radius:8px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09);
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.48); font-size:.78rem; font-weight:700;
  transition:all .2s;
}
.soc:hover { border-color:rgba(255,255,255,.35); color:#fff; }


/* ── LANGUAGE SWITCHER ── */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: .25rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: .28rem .32rem;
  flex-shrink: 0;
}
.lang-btn {
  display: flex;
  align-items: center;
  gap: .38rem;
  background: none;
  border: none;
  color: rgba(255,255,255,.45);
  font-size: .75rem;
  font-weight: 700;
  padding: .32rem .7rem;
  border-radius: 7px;
  cursor: pointer;
  transition: all .22s;
  font-family: inherit;
  letter-spacing: .8px;
  line-height: 1;
}
.lang-btn .flag {
  font-size: 1rem;
  line-height: 1;
}
.lang-btn:hover {
  color: #fff;
  background: rgba(255,255,255,.08);
}
.lang-btn.active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 10px rgba(46,107,230,.45);
}
.lang-divider {
  width: 1px;
  height: 16px;
  background: rgba(255,255,255,.12);
  flex-shrink: 0;
}

/* ── SCROLL REVEAL ── */
.reveal {
  opacity:0; transform:translateY(26px);
  transition:opacity .65s ease, transform .65s ease;
}
.reveal.visible { opacity:1; transform:none; }


/* ══════════════════════════════════
   RESPONSIVE
══════════════════════════════════ */
@media (max-width:1024px) {
  .services-grid { grid-template-columns:repeat(2,1fr); }
  .steps-grid    { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:900px) {
  .hero-inner    { grid-template-columns:1fr; }
  .hero-visual   { display:none; }  /* hide cards on mobile */
  .about-grid    { grid-template-columns:1fr; }
  .faq-wrap      { grid-template-columns:1fr; }
  .footer-grid   { grid-template-columns:1fr 1fr; }
  .svc-intro     { grid-template-columns:1fr; }
  .nav-links,
  .nav-cta       { display:none; }
  .hamburger     { display:flex; }
}

@media (max-width:620px) {
  .services-grid { grid-template-columns:1fr; }
  .steps-grid    { grid-template-columns:1fr; }
  .about-stats   { grid-template-columns:1fr 1fr; }
  .footer-grid   { grid-template-columns:1fr; }
  .hero h1       { font-size:2rem; }
}