/* ===========================================================
   Inds IT — Design System
   ===========================================================
   Dark navy base, faceted-blue accent (from brand hexagon mark),
   amber CTA for contrast. Layout patterns inspired by enterprise
   IT consulting sites: sticky nav w/ mega menu, bold hero,
   card-driven service/insight grids, stat strip, CTA banner.

   ONE stylesheet serves every page (PT root + /en/ subfolder).
   There is no build step / preprocessor — this is plain, hand
   written CSS. Class names are the only "component" abstraction;
   there's no BEM-style strictness, just descriptive names kept
   consistent across pages (e.g. every page reuses .card, .btn,
   .section, .grid-3 rather than inventing per-page variants).

   HOW TO FIND THINGS (Ctrl+F the "---------- Name ----------"
   banners below):
     Design tokens (:root)      → colors, spacing, radii, easing
     Base resets & typography   → *, body, h1-h3, .container
     Buttons                    → .btn, .btn-cta/.btn-outline/...
     Header                     → .site-header, mega menu, mobile nav
     Hero                       → .hero, hex decoration, stats strip
     Logos strip / Marquee      → .logo-strip, .marquee (partners row)
     Generic sections & grids   → .section, .grid-3/4/5, .card
     Insight / CTA / value      → .insight-card, .cta-banner, .value-grid
     Forms                      → .form-grid, .field, .form-status, honeypot
     Legal content              → .legal-content (privacy/terms prose)
     Footer                     → .site-footer
     Utilities                  → .mt-*, .reveal (scroll-in animation)
     Responsive                 → @media blocks near the end of the file
     WhatsApp float + mobile nav→ very end of the file

   JS DEPENDENCY: assets/js/main.js toggles a handful of state
   classes that this stylesheet styles but never sets on its own:
   .is-scrolled (header), .is-open (mega menu + mobile nav),
   .is-visible (scroll-reveal), .is-success/.is-error (forms).
   If you rename one of those classes here, update main.js too.

   Z-INDEX STACKING (kept intentionally low/sparse — raise a value
   here if you add something that must sit above these, and check
   this list first so you don't accidentally bury an existing UI
   element):
     200  .site-header        always on top (nav must stay clickable)
     195  .mobile-nav          below header, above the WhatsApp button
                                 (so the open mobile menu isn't covered)
     190  .whatsapp-float      floats above normal content
      50  .mega-menu           local to the header; only needs to clear
                                 the page content behind it
   Everything else relies on normal DOM/paint order (no explicit
   z-index), which is enough given how few overlapping layers exist.
=========================================================== */

:root{
  /* ---- Color tokens -------------------------------------------------
     Every color in the site should come from one of these variables
     rather than a new hard-coded hex, so the palette stays consistent
     and a future rebrand only touches this block. */

  /* Backgrounds, darkest to lightest. --bg-alt is used to create the
     alternating light/dark rhythm between stacked <section>s (see
     .section.alt below) — keep that alternation in mind when adding,
     removing or hiding sections; consecutive same-background sections
     read as one flat block. --bg-elev/--bg-card(-hover) are for raised
     surfaces (mega menu, cards) sitting on top of a section background. */
  --bg: #050b1c;
  --bg-alt: #081228;
  --bg-elev: #0c1830;
  --bg-card: #0f1c3d;
  --bg-card-hover: #132349;

  /* Hairline borders on dark surfaces — kept as low-opacity white/blue
     rather than a flat gray so they read correctly against any of the
     background tokens above. */
  --border: rgba(148, 180, 224, 0.14);
  --border-strong: rgba(148, 180, 224, 0.28);

  /* Text — 3-step hierarchy: primary copy, secondary/muted copy
     (paragraph body text), and faint copy (labels, metadata, captions). */
  --text: #eef3fb;
  --text-muted: #a9bcdd;
  --text-faint: #6f84ab;

  /* Brand blue — matches the hexagon logo mark. --accent-glow is used
     for soft box-shadow "glow" effects (e.g. the hero's orbiting dot). */
  --accent: #4f8ff7;
  --accent-light: #8ec5ff;
  --accent-deep: #1c3f8f;
  --accent-glow: rgba(79, 143, 247, 0.35);

  /* Amber CTA — the one warm color on an otherwise all-blue/navy page,
     used deliberately only for primary calls to action so it keeps its
     visual weight (buttons, WhatsApp accent excluded — that's brand
     green, see .whatsapp-float near the end of the file). */
  --cta: #f2b705;
  --cta-hover: #ffca2c;
  --cta-text: #14100a;

  /* ---- Shape / spacing tokens ---------------------------------------- */
  --radius-sm: 8px;   /* inputs, small chips */
  --radius-md: 14px;  /* team photo, medium tiles */
  --radius-lg: 22px;  /* cards, media blocks, CTA banner — the "house" radius */

  --container: 1240px; /* max content width; see .container */
  --header-h: 84px;    /* fixed header height; drives hero/page-hero top padding
                           so content never starts underneath the fixed header */

  --shadow-card: 0 20px 50px -25px rgba(0, 8, 30, 0.7);
  --ease: cubic-bezier(.4,0,.2,1); /* the one easing curve used for all transitions */
}

/* ---------- Base resets & typography ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; } /* native smooth-scroll for in-page #anchor links */
html, body{ margin:0; padding:0; }

body{
  background: var(--bg);
  color: var(--text);
  /* Inter loaded from Google Fonts (see <link> in each page's <head>);
     the fallback stack covers every major OS so text still looks
     native if the webfont fails to load. */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* belt-and-braces guard against any stray element
                          forcing horizontal scroll on narrow viewports */
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,p{ margin:0; } /* spacing between elements is opt-in via
                               utility classes (.mt-*) or component rules,
                               not browser default margins */
button{ font-family: inherit; cursor:pointer; }

/* The site's single max-width wrapper. Every section's content sits
   inside one of these so page width stays consistent; sections that
   need a full-bleed background (hero, footer, logo-strip) put the
   background on the outer <section> and the width cap on this inner
   .container. */
.container{
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}

section{ position: relative; } /* establishes a positioning context so any
                                   absolutely-positioned decoration inside
                                   a section (hero-grid, media-block::after
                                   texture, etc.) stays contained to it */

/* Small uppercase label used above nearly every section heading
   ("O QUE FAZEMOS", "NOSSA MISSÃO", ...). The short gradient dash is
   drawn with ::before rather than typed as a text character so it
   can't be mistaken for an em dash in the copy and never needs
   translating between the PT/EN page pairs. */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: 16px;
}
.eyebrow::before{
  content:"";
  width: 22px; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  border-radius: 2px;
}

/* Heading scale. clamp() lets h1/h2 scale fluidly with viewport width
   instead of jumping between fixed sizes at each breakpoint. */
h1{ font-size: clamp(2.4rem, 4.5vw, 4rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; }
h2{ font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; }
h3{ font-size: 1.25rem; font-weight: 700; }
/* Standard "eyebrow + h2 + intro paragraph" header used at the top of
   most sections (grid-based ones especially) for a consistent max
   readable line length. */
.section-head{ max-width: 640px; margin-bottom: 48px; }
.section-head p{ color: var(--text-muted); font-size: 1.05rem; margin-top: 14px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  border: 1px solid transparent;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  white-space: nowrap;
}
.btn svg{ width:16px; height:16px; transition: transform .25s var(--ease); flex-shrink:0; }
.btn:hover svg{ transform: translateX(3px); }

.btn-cta{
  background: linear-gradient(135deg, var(--cta), #ffdf7a);
  color: var(--cta-text);
  box-shadow: 0 10px 30px -10px rgba(242,183,5,0.55);
}
.btn-cta:hover{ transform: translateY(-2px); box-shadow: 0 16px 36px -12px rgba(242,183,5,0.7); }

.btn-outline{
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text);
}
.btn-outline:hover{ border-color: var(--accent-light); background: rgba(79,143,247,0.08); transform: translateY(-2px); }

.btn-ghost{
  background: rgba(255,255,255,0.06);
  color: var(--text);
  border-color: var(--border);
}
.btn-ghost:hover{ background: rgba(255,255,255,0.1); }

.btn-block{ width:100%; justify-content:center; }
.btn-sm{ padding: 10px 18px; font-size: 0.85rem; }

/* ---------- Header ----------
   Fixed/transparent-until-scrolled header. main.js toggles
   .is-scrolled on scroll (see the onScroll listener near the top of
   that file) — this stylesheet only defines what that class looks
   like, it never adds/removes it itself. */
.site-header{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 200;
  height: var(--header-h);
  display:flex;
  align-items:center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease), height .3s var(--ease), backdrop-filter .3s var(--ease);
}
.site-header.is-scrolled{
  background: rgba(5, 11, 28, 0.86);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--border);
  height: 72px;
}
.header-inner{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 24px;
}
.brand{
  display:flex;
  align-items:center;
  gap: 12px;
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--text);
}
.brand img{ width: 34px; height: 34px; }
.brand span{ background: linear-gradient(90deg, #ffffff, var(--accent-light)); -webkit-background-clip:text; background-clip:text; color:transparent; }

.main-nav{ display:flex; align-items:center; gap: 4px; }
.main-nav > ul{ display:flex; align-items:center; gap: 4px; }
.nav-link{
  display:flex;
  align-items:center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-muted);
  transition: color .2s, background .2s;
}
.nav-link:hover, .nav-link[aria-expanded="true"]{ color: var(--text); background: rgba(255,255,255,0.06); }
.nav-link svg{ width: 13px; height: 13px; transition: transform .25s var(--ease); opacity:.7; }
.has-mega:hover .nav-link svg, .nav-item.is-open .nav-link svg{ transform: rotate(180deg); }

.header-actions{ display:flex; align-items:center; gap: 14px; }

.lang-switch{
  display:flex;
  align-items:center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: rgba(255,255,255,0.04);
  color: var(--text-muted);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: .02em;
  transition: color .2s, border-color .2s, background .2s, transform .2s;
}
.lang-switch svg{ width:15px; height:15px; flex-shrink:0; }
.lang-switch:hover{ color: var(--text); border-color: var(--accent-light); background: rgba(79,143,247,0.1); transform: translateY(-1px); }
.mobile-nav .lang-switch{
  display:inline-flex;
  width: fit-content;
  margin-top: 10px;
  padding: 10px 18px;
  font-size: 0.9rem;
  border-color: var(--border-strong);
}
.nav-toggle{
  display:none;
  width: 42px; height:42px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  align-items:center; justify-content:center;
  flex-direction: column; gap: 4px;
}
.nav-toggle span{ display:block; width: 18px; height: 2px; background: var(--text); border-radius:2px; transition: all .25s var(--ease); }

/* Mega menu ("Serviços"/"Services" dropdown — currently the only nav
   item with a mega menu; "Setores"/"Industries" used to have one too
   but was simplified to a direct link, see the site's change history).
   Visibility is driven entirely by the .is-open class; there is no
   CSS :hover fallback on purpose — main.js manages opening (on
   mouseenter, with a short close delay to bridge the visual gap to
   the dropdown, plus click for touch/keyboard) and closes it
   immediately when a .mega-link is actually clicked, so the menu
   never gets stuck open after navigating. If you re-add a :hover
   rule here, re-read the mega-menu event-handling comments in
   main.js first — that hover would re-introduce the "stays open
   after clicking a link" bug it was written to fix. */
.nav-item{ position: relative; }
.mega-menu{
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: 620px;
  background: linear-gradient(180deg, var(--bg-elev), var(--bg-card));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 28px;
  box-shadow: var(--shadow-card);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  z-index: 50;
}
.nav-item.is-open .mega-menu{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.mega-col-title{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 4px 0 10px;
  grid-column: span 1;
}
.mega-link{
  display:flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.92rem;
  transition: background .2s, color .2s, padding-left .2s;
}
.mega-link:hover{ background: rgba(79,143,247,0.1); color: var(--text); padding-left: 16px; }
.mega-link .dot{ width:6px; height:6px; border-radius:50%; background: var(--accent); flex-shrink:0; opacity:.7; }

/* ---------- Hero ---------- */
.hero{
  position: relative;
  padding: calc(var(--header-h) + 96px) 0 110px;
  background:
    radial-gradient(circle at 82% -10%, rgba(79,143,247,0.28), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(28,63,143,0.35), transparent 45%),
    linear-gradient(180deg, #050b1c 0%, #071230 55%, #050b1c 100%);
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.hero-lines{
  position:absolute; inset:0;
  z-index:0;
  opacity: .55;
  pointer-events:none;
}
/* Faint graph-paper texture behind the hero copy. Two 1px-line
   gradients form the grid; a radial mask fades it out toward the
   edges so it reads as an ambient texture rather than a hard-edged
   grid. The same grid+mask technique repeats on .media-block and
   .insight-media further down for the "abstract data" placeholder
   panels — look here first if you need to tweak that shared look. */
.hero-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(148,180,224,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,180,224,0.06) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 60% 30%, black, transparent);
  pointer-events:none;
}
.hero-inner{
  position: relative;
  z-index: 2;
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items:center;
}
.hero h1{ color: #fff; }
.hero h1 em{
  font-style: normal;
  background: linear-gradient(90deg, var(--accent-light), var(--accent));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{ margin-top: 22px; font-size: 1.15rem; color: var(--text-muted); max-width: 560px; }
.hero-cta{ margin-top: 36px; display:flex; gap: 16px; flex-wrap:wrap; }

/* Decorative hexagon-and-orbit graphic beside the hero headline. It's
   just the brand logo SVG (.hex-core) gently bobbing up and down,
   framed by two purely-decorative rotating rings (.hex-ring) — one
   solid ring with a glowing dot riding it, one dashed ring spinning
   the opposite direction. All aria-hidden in the HTML since it adds
   nothing screen readers need. */
.hero-visual{
  position: relative;
  aspect-ratio: 1/1;
  display:flex; align-items:center; justify-content:center;
}
.hex-orbit{ position:absolute; inset:0; }
.hex-core{
  position:relative;
  width: 62%; height: 62%;
  filter: drop-shadow(0 30px 60px rgba(79,143,247,0.35));
  animation: float 7s ease-in-out infinite;
}
@keyframes float{ 0%,100%{ transform: translateY(0px);} 50%{ transform: translateY(-14px);} }
.hex-ring{
  position:absolute;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  top:50%; left:50%;
}
.hex-ring.r1{ width:78%; height:78%; transform:translate(-50%,-50%); animation: spin 34s linear infinite; }
.hex-ring.r2{ width:100%; height:100%; transform:translate(-50%,-50%); animation: spin 50s linear infinite reverse; border-style:dashed; }
@keyframes spin{ to{ transform: translate(-50%,-50%) rotate(360deg);} }
.hex-ring i{
  position:absolute; width:8px; height:8px; border-radius:50%;
  background: var(--accent-light); box-shadow: 0 0 14px 3px var(--accent-glow);
  top:-4px; left:50%; margin-left:-4px;
}

.hero-stats{
  position: relative;
  z-index:2;
  margin-top: 76px;
  /* grid+1fr, sized with width:fit-content (not 100%) — with only 2 items
     (years of experience, projects delivered; was 4 originally, hence
     1fr columns instead of flex-hugging each card to its own content),
     this makes both stat cards exactly the same width (equal to the
     wider of the two labels) while still not stretching edge-to-edge
     across the whole hero column the way a width:100% grid would. The
     result lines its right edge up with the .hero-cta button row above
     it, instead of stopping short (inline-flex) or overshooting it
     (width:100%). If stats are added back to 4, this still works as-is. */
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  width: fit-content;
  max-width:100%;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow:hidden;
}
.stat{
  background: rgba(9,17,38,0.75);
  padding: 26px 32px;
  text-align:left;
}
.stat strong{ display:block; font-size: 2rem; font-weight: 800; color:#fff; letter-spacing:-0.02em; }
.stat span{ font-size: 0.85rem; color: var(--text-muted); }

/* ---------- Logos strip ---------- */
.logo-strip{ padding: 56px 0; border-bottom: 1px solid var(--border); background: var(--bg-alt); }
.logo-strip p{ text-align:center; font-size: 0.82rem; letter-spacing:.1em; text-transform:uppercase; color: var(--text-faint); margin-bottom: 30px; }
.logo-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap: 48px; }
.logo-row .tag{
  font-weight: 800; font-size: 1.05rem; color: var(--text-faint);
  letter-spacing: .02em; opacity:.65; transition: opacity .2s, color .2s;
}
.logo-row .tag:hover{ opacity:1; color: var(--accent-light); }

/* Marquee variant — an unbroken, continuously floating row (used for the
   technology-partners strip). The track's content is duplicated in the
   HTML; scrolling exactly -50% loops it back seamlessly. */
.marquee{
  overflow: hidden;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.marquee-track{
  flex-wrap: nowrap;
  width: max-content;
  gap: 34px;
  animation: marquee-scroll 26s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state: paused; }
.marquee-track .tag{ white-space: nowrap; font-size: 0.85rem; font-weight: 700; }
@keyframes marquee-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation: none; }
}

/* Technology-partners strip specifically: more compact than the default
   logo-strip padding/spacing used elsewhere. */
#parceiros, #partners{ padding: 36px 0; }
#parceiros p, #partners p{ margin-bottom: 18px; }
@media (max-width: 640px){
  .marquee{ mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%); }
}

/* ---------- Generic sections ---------- */
.section{ padding: 110px 0; }
.section.alt{ background: var(--bg-alt); }
.section.tight{ padding: 80px 0; }

/* Services grid */
.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.grid-2{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.grid-4{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.grid-5{ display:grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }

.card{
  background: linear-gradient(180deg, var(--bg-card), rgba(15,28,61,0.4));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  transition: transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.card:hover{
  transform: translateY(-6px);
  border-color: var(--border-strong);
  background: linear-gradient(180deg, var(--bg-card-hover), rgba(15,28,61,0.5));
  box-shadow: var(--shadow-card);
}
.card .icon{
  width: 52px; height: 52px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(79,143,247,0.22), rgba(79,143,247,0.05));
  border: 1px solid var(--border-strong);
  margin-bottom: 22px;
}
.card .icon svg{ width: 24px; height: 24px; color: var(--accent-light); }
.card h3{ margin-bottom: 12px; }
.card p{ color: var(--text-muted); font-size: 0.96rem; }
.card .card-link{
  display:inline-flex; align-items:center; gap:8px;
  margin-top: 20px; font-weight:700; font-size: 0.88rem; color: var(--accent-light);
}
.card .card-link svg{ width:14px; height:14px; transition: transform .2s; }
.card:hover .card-link svg{ transform: translateX(4px); }

/* Compact card variant — used where 5 items need to sit together in one row */
.card.compact{ padding: 22px 18px; }
.card.compact .icon{ width: 42px; height: 42px; border-radius: 12px; margin-bottom: 16px; }
.card.compact .icon svg{ width: 19px; height: 19px; }
.card.compact h3{ font-size: 1.02rem; margin-bottom: 8px; }
.card.compact p{ font-size: 0.85rem; }

/* Tag pill (industries) */
.pill-row{ display:flex; flex-wrap:wrap; gap: 12px; }
.pill{
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  font-weight: 600; font-size: 0.9rem;
  color: var(--text-muted);
  transition: all .25s var(--ease);
}
.pill:hover{ color:#fff; border-color: var(--accent); background: rgba(79,143,247,0.12); transform: translateY(-3px); }

/* Insight / report cards */
.insight-card{
  border-radius: var(--radius-lg);
  overflow:hidden;
  border: 1px solid var(--border);
  background: var(--bg-card);
  display:flex; flex-direction:column;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.insight-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-card); }
.insight-media{
  height: 170px;
  position:relative;
  background: linear-gradient(135deg, var(--accent-deep), #0a1732 60%);
  overflow:hidden;
}
.insight-media::after{
  content:"";
  position:absolute; inset:0;
  background-image: linear-gradient(rgba(148,180,224,0.14) 1px, transparent 1px), linear-gradient(90deg, rgba(148,180,224,0.14) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 80% 80% at 30% 20%, black, transparent 70%);
}
.insight-tag{
  position:absolute; top:16px; left:16px;
  background: rgba(5,11,28,0.7);
  border: 1px solid var(--border-strong);
  color: var(--accent-light);
  font-size: 11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding: 6px 12px; border-radius: 999px;
  z-index:2;
}
.insight-body{ padding: 24px; display:flex; flex-direction:column; gap:12px; flex:1; }
.insight-body h3{ font-size: 1.05rem; }
.insight-body p{ color: var(--text-muted); font-size: 0.9rem; }
.insight-body .card-link{ margin-top:auto; display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:0.85rem; color: var(--accent-light); }

/* CTA banner */
.cta-banner{
  border-radius: var(--radius-lg);
  padding: 64px;
  background:
    radial-gradient(circle at 90% 10%, rgba(79,143,247,0.35), transparent 55%),
    linear-gradient(135deg, #0c1a3d, #071129);
  border: 1px solid var(--border-strong);
  display:flex; align-items:center; justify-content:space-between; gap: 40px;
  flex-wrap: wrap;
}
.cta-banner h2{ max-width: 520px; }
.cta-banner .actions{ display:flex; gap:16px; flex-wrap:wrap; }

/* Values / timeline */
.value-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
.value-item{ text-align:left; }
.value-item .num{ font-size: 0.8rem; font-weight:800; color: var(--accent-light); letter-spacing:.1em; margin-bottom: 10px; display:block; }

/* Two-column "text beside a visual" layout, reused across most pages
   for mission/service/expertise blocks. Service detail sections
   alternate .split and .split.reverse down the page purely so the
   visual side swaps left/right each time instead of always sitting
   on the same edge — .reverse just pushes the second column
   (.media-block or .stat-block) after the text via flex/grid order,
   no HTML reordering needed. */
.split{ display:grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items:center; }
.split.reverse .media-block{ order: 2; }
/* Used on contato.html/en/contact.html: the form column and the
   contact-info column are both plain text content of different natural
   heights (the address line wraps to several lines, making contact-info
   taller than the form in practice) — centering them like a normal
   .split made the shorter column's content start partway down instead
   of level with the other, reading as a stray gap. Top-align instead so
   both columns' first line sits on the same row regardless of height. */
.split.split-top{ align-items:start; }
.check-list{ display:flex; flex-direction:column; gap: 14px; margin-top: 26px; }
.check-list li{ display:flex; align-items:flex-start; gap: 12px; color: var(--text-muted); font-size: 0.95rem; }
.check-list li svg{ width:20px; height:20px; flex-shrink:0; color: var(--accent-light); margin-top:1px; }
.service-block{ padding: 70px 0; border-bottom: 1px solid var(--border); }
.service-block:last-child{ border-bottom:none; }
.split img, .split .media-block{ border-radius: var(--radius-lg); }
.media-block{
  aspect-ratio: 4/3.2;
  background:
    radial-gradient(circle at 30% 20%, rgba(79,143,247,0.4), transparent 55%),
    linear-gradient(160deg, #0c1a3d, #050b1c);
  border: 1px solid var(--border-strong);
  position:relative;
  overflow:hidden;
}
.media-block::after{
  content:"";
  position:absolute; inset:0;
  background-image: linear-gradient(rgba(148,180,224,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(148,180,224,0.1) 1px, transparent 1px);
  background-size: 34px 34px;
}

/* Big stat visual — a confident, single-number statement (not a dated story) */
.stat-block{
  aspect-ratio: 4/3.2;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong);
  background:
    radial-gradient(circle at 30% 20%, rgba(79,143,247,0.4), transparent 55%),
    linear-gradient(160deg, #0c1a3d, #050b1c);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding: 40px;
}
.stat-block strong{
  font-size: clamp(3.4rem, 6vw, 5.5rem);
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(90deg, #ffffff, var(--accent-light));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-block span{ margin-top: 18px; color: var(--text-muted); font-size: 1.05rem; max-width: 260px; }

/* Team */
.team-card{ text-align:left; }
.team-photo{
  aspect-ratio: 1/1; border-radius: var(--radius-md); margin-bottom: 18px;
  background: linear-gradient(150deg, #17285a, #0a1430);
  border: 1px solid var(--border);
  position:relative; overflow:hidden;
}
.team-photo::after{ content:""; position:absolute; inset:0; background: radial-gradient(circle at 50% 30%, rgba(79,143,247,0.35), transparent 60%); }
.team-card h3{ font-size:1.05rem; }
.team-card span{ color: var(--text-muted); font-size:0.85rem; }

/* Form submit feedback. This <p class="form-status"> element is NOT
   in any page's HTML — main.js creates and appends one to every
   form[data-site-form] at page-load, then toggles .is-success /
   .is-error and fills its text after each submit attempt. The
   grid-column/flex-basis rules make it span the full row whether the
   form's immediate parent is a CSS grid (.form-grid, the main contact
   form) or a flex row (.footer-newsletter form). */
.form-status{ margin-top: 14px; font-size: 0.85rem; font-weight: 600; grid-column: 1 / -1; flex-basis: 100%; }
.form-status.is-success{ color: #34d399; }
.form-status.is-error{ color: #f87171; }

/* Honeypot: kept in the layout (not display:none) so basic bots that skip
   hidden fields still fill it in, but invisible and unreachable to people. */
.hp-field{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Forms */
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field.full{ grid-column: 1 / -1; }
.field label{ font-size:0.85rem; font-weight:600; color: var(--text-muted); }
.field input, .field select, .field textarea{
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(79,143,247,0.15);
}
.field textarea{ resize: vertical; min-height: 130px; }

.contact-info{ display:flex; flex-direction:column; gap: 26px; }
.contact-info .row{ display:flex; gap:16px; align-items:flex-start; }
.contact-info .icon{
  width:44px; height:44px; border-radius:12px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background: rgba(79,143,247,0.12); border:1px solid var(--border-strong);
}
.contact-info .icon svg{ width:20px; height:20px; color: var(--accent-light); }
.contact-info h3{ font-size:1rem; margin-bottom:4px; }
.contact-info p{ color: var(--text-muted); font-size:0.92rem; }

/* Page header (inner pages) */
.page-hero{
  padding: calc(var(--header-h) + 72px) 0 80px;
  background:
    radial-gradient(circle at 85% 0%, rgba(79,143,247,0.25), transparent 50%),
    linear-gradient(180deg, #050b1c, #071230);
  border-bottom: 1px solid var(--border);
}
.breadcrumb{ display:flex; align-items:center; gap:8px; font-size:0.85rem; color: var(--text-faint); margin-bottom: 20px; }
.breadcrumb a:hover{ color: var(--accent-light); }
.page-hero p.lead{ margin-top:18px; font-size:1.1rem; color: var(--text-muted); max-width: 640px; }

/* Legal / long-form prose content (privacy policy, terms of use) */
.legal-content{ max-width: 760px; }
.legal-content > .eyebrow{ margin-top: 44px; }
.legal-content h2{ font-size: 1.5rem; margin-top: 48px; margin-bottom: 16px; }
.legal-content p{ color: var(--text-muted); font-size: 1rem; margin-top: 14px; }
.legal-content p.legal-meta{ color: var(--text-faint); font-size: 0.88rem; margin-top: 0; padding-bottom: 28px; border-bottom: 1px solid var(--border); }
.legal-content ul{ margin-top: 14px; display:flex; flex-direction:column; gap: 10px; padding-left: 22px; list-style: disc; }
.legal-content li{ color: var(--text-muted); font-size: 1rem; }
.legal-content strong{ color: var(--text); }
.legal-content a{ color: var(--accent-light); text-decoration: underline; text-underline-offset: 2px; }
.legal-content a:hover{ color: var(--text); }

/* Footer */
.site-footer{ background: #030814; border-top: 1px solid var(--border); padding: 72px 0 28px; }
.footer-top{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.1fr; gap: 32px; padding-bottom: 56px; border-bottom: 1px solid var(--border); }
/* Grid items default to min-width:auto, which floors each column at its
   content's min-content size — e.g. the newsletter form's "Subscribe"
   button — and can force the whole row wider than the viewport on narrow
   screens. Let every column shrink to its actual track width instead. */
.footer-top > *{ min-width: 0; }
.footer-brand p{ color: var(--text-muted); font-size:0.9rem; margin-top:16px; max-width: 260px; }
.footer-social{ display:flex; gap:10px; margin-top:22px; }
.footer-social a{
  width:38px; height:38px; border-radius:10px; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; transition: all .2s;
}
.footer-social a:hover{ border-color: var(--accent); background: rgba(79,143,247,0.12); }
.footer-social svg{ width:16px; height:16px; color: var(--text-muted); }
/* h3, not h4 — these are the last heading before the footer on every page,
   and every page's main content ends at h2, so h4 here skipped a level in
   the document outline. Selector was renamed to match when the markup
   changed from <h4> to <h3>; the compact uppercase label look is purely
   this class, not tied to the heading level. */
.footer-col h3{ font-size:0.82rem; letter-spacing:.08em; text-transform:uppercase; color: var(--text-faint); margin-bottom:18px; }
.footer-col ul{ display:flex; flex-direction:column; gap:12px; }
.footer-col a{ color: var(--text-muted); font-size:0.92rem; transition: color .2s; }
.footer-col a:hover{ color: var(--accent-light); }
.footer-newsletter form{ display:flex; gap:8px; margin-top:14px; }
.footer-newsletter input{
  flex:1; min-width:0; background: var(--bg-card); border:1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px 14px; color: var(--text); font-size:0.88rem;
}
.footer-newsletter input:focus{ outline:none; border-color: var(--accent); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top: 26px; flex-wrap:wrap; gap:12px; }
.footer-bottom p{ color: var(--text-faint); font-size:0.82rem; }
.footer-bottom .legal-links{ display:flex; gap:20px; }
.footer-bottom .legal-links a{ color: var(--text-faint); font-size:0.82rem; }
.footer-bottom .legal-links a:hover{ color: var(--accent-light); }

/* Utility */
.mt-8{ margin-top:8px;} .mt-16{ margin-top:16px;} .mt-24{ margin-top:24px;} .mt-32{ margin-top:32px;} .mt-48{ margin-top:48px;}
.text-center{ text-align:center; }

/* Scroll-in reveal animation. Add class="reveal" to any element and
   main.js's IntersectionObserver adds .is-visible the first time it
   scrolls into view, which is what actually triggers this transition
   (this file only defines the two visual states, not when they
   switch). Two safety nets protect against content getting stuck
   invisible if JS/the observer never runs:
     1. main.js also force-adds .is-visible to every .reveal element
        after 8s, regardless of scroll position (see the comment
        there for why the delay is long on purpose).
     2. Each page's <head> has a <noscript> block that overrides this
        rule to opacity:1 outright when JavaScript is disabled.
   Don't rely on .reveal alone hiding something important — always
   pair it with content that's still meaningful/readable if it never
   animates (it should look like a subtle enhancement, not a gate). */
.reveal{ opacity:0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform: translateY(0); }

/* ---------- Responsive ----------
   Three breakpoints, mobile-first is NOT used here (base styles are
   the desktop/wide layout; each @media below only overrides what
   needs to change going down in width):
     1080px — "small desktop / tablet landscape": multi-column grids
              (services, values, footer) drop from 3-4 cols to 2, the
              hero goes from 2 columns to stacked.
      860px — nav-collapse threshold: the full desktop nav (.main-nav)
              and CTA button hide, the hamburger (.nav-toggle) and
              .mobile-nav overlay take over. This number is driven by
              how much horizontal room the nav links + actions need,
              not a device category — adjust it if nav items are
              added/removed and it starts wrapping oddly above 860px.
      640px — phone width: grids collapse to a single column, form
              grids go single-column, container side padding shrinks.
   When adding a new grid/component, check whether it needs an entry
   in one or more of these blocks rather than only ever looking fine
   at the width you happened to test in the browser. */
@media (max-width: 1080px){
  .hero-inner{ grid-template-columns: 1fr; }
  .hero-visual{ max-width: 380px; margin: 0 auto; }
  .split{ grid-template-columns: 1fr; gap: 40px; }
  .grid-3, .grid-4{ grid-template-columns: repeat(2,1fr); }
  .grid-5{ grid-template-columns: repeat(3,1fr); }
  .value-grid{ grid-template-columns: repeat(2,1fr); }
  .footer-top{ grid-template-columns: 1fr 1fr; gap: 40px 24px; }
}

@media (max-width: 860px){
  .main-nav{ display:none; }
  .nav-toggle{ display:flex; }
  .header-actions .btn-cta{ display:none; }
  .hero{ padding-top: calc(var(--header-h) + 56px); }
  .cta-banner{ padding: 40px; flex-direction:column; text-align:center; justify-content:center; }
  .cta-banner .actions{ justify-content:center; }
}

@media (max-width: 640px){
  .container{ padding: 0 20px; }
  .grid-3, .grid-4, .grid-5, .grid-2, .value-grid{ grid-template-columns: 1fr; }
  /* .hero-stats' base fit-content grid (see that rule) can still exceed a
     narrow phone's width at 2 equal-width columns — stack them full-width
     instead at this breakpoint. */
  .hero-stats{ display:flex; flex-direction:column; width:100%; }
  .form-grid{ grid-template-columns: 1fr; }
  .footer-top{ grid-template-columns: 1fr; }
  section.section{ padding: 76px 0; }
  .logo-row{ gap: 26px; }
  /* The CTA banner's longer button labels don't fit unwrapped once its own
     padding + the container padding eat into a ~320-360px viewport — let
     them wrap instead of forcing the page wider than the screen. */
  .cta-banner .btn{ white-space: normal; text-align: center; }
}

/* ---------- WhatsApp floating button ----------
   Fixed bubble present on every page (markup repeated in each HTML
   file, right before </body>). Uses WhatsApp's own brand green
   (#25D366) rather than the site's amber --cta on purpose, so it
   reads as "this is WhatsApp" at a glance rather than blending in as
   just another site button. The ::before pseudo-element draws the
   expanding/fading pulse ring (wa-pulse keyframes below); the actual
   button box does not scale, only that outline does. */
.whatsapp-float{
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 190;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #25D366;
  color: #ffffff;
  box-shadow: 0 12px 28px -8px rgba(37, 211, 102, 0.65);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.whatsapp-float svg{ width: 30px; height: 30px; }
.whatsapp-float:hover{ transform: translateY(-3px) scale(1.05); box-shadow: 0 16px 34px -8px rgba(37, 211, 102, 0.8); }
.whatsapp-float::before{
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, 0.55);
  animation: wa-pulse 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes wa-pulse{
  0%{ transform: scale(0.9); opacity: .8; }
  70%{ transform: scale(1.35); opacity: 0; }
  100%{ transform: scale(1.35); opacity: 0; }
}
.whatsapp-float .wa-tooltip{
  position: absolute;
  right: 72px;
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  box-shadow: var(--shadow-card);
}
.whatsapp-float:hover .wa-tooltip{ opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); }

@media (max-width: 640px){
  .whatsapp-float{ right: 16px; bottom: 16px; width: 54px; height: 54px; }
  .whatsapp-float svg{ width: 27px; height: 27px; }
  .whatsapp-float .wa-tooltip{ display: none; }
}

/* Mobile nav panel */
.mobile-nav{
  position: fixed; inset: 0; top: var(--header-h);
  background: rgba(3,8,20,0.98);
  backdrop-filter: blur(10px);
  z-index: 195; /* above the WhatsApp float (190) so it doesn't poke through the open menu */
  padding: 24px;
  display:flex; flex-direction:column; gap: 6px;
  transform: translateX(100%);
  transition: transform .3s var(--ease);
  overflow-y:auto;
}
.mobile-nav.is-open{ transform: translateX(0); }
.mobile-nav a{ display:block; padding: 16px 6px; font-size:1.1rem; font-weight:700; border-bottom: 1px solid var(--border); color: var(--text); }
.mobile-nav .btn{ margin-top: 20px; }