/*
Theme Name: 3|Strategy
Theme URI: https://www.3strategy.pt
Author: HJFR
Description: Tema WordPress próprio da 3|Strategy — Information Security. Apresentação pura: CSS, imagens e animações. Conteúdo em páginas normais; funcionalidades (formulário, i18n, SEO, segurança) nos plugins 3strategy-core e 3strategy-i18n. Identidade conforme o Manual de Normas Gráficas.
Version: 3.4.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: s3strategy
License: GPL-2.0-or-later
Tags: one-column, custom-colors, sticky-post, threaded-comments
*/

/* ============================================================
   1. Tokens (Manual de Normas: verdes + preto/branco/cinza, Roboto/Segoe UI)
   ============================================================ */
:root {
  --g1: #7DEEB2;
  --g2: #0AD173;
  --teal: #0CD6CC;
  --lime: #B9DD77;
  --black: #050505;
  --dark: #0b0b0b;
  --dark-2: #101410;
  --panel: #161616;
  --ink: #141414;
  --body-c: #4f4f4f;
  --gray: #9B9B9B;
  --mist: #bdbdbd;
  --line-d: rgba(255, 255, 255, .08);
  --line-l: #e4e4e4;
  --light: #f5f5f5;
  --white: #ffffff;
  --font-h: 'Roboto', 'Segoe UI', sans-serif;
  --font-b: 'Segoe UI', 'Roboto', sans-serif;
  --max: 1400px;
  --pad: 6vw;
  --r: 3px;
  --sh-card: 0 14px 38px rgba(0, 0, 0, .08);
  --sh-card-d: 0 18px 44px rgba(0, 0, 0, .12);
}

/* ============================================================
   2. Fonts (self-hosted Roboto variable — all weights, 2 files)
   ============================================================ */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/roboto-vf-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/roboto-vf-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
   3. Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-b);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--dark);
}
img { max-width: 100%; height: auto; }
a { color: var(--g2); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--g1); }
h1, h2, h3, h4 { font-family: var(--font-h); color: inherit; margin: 0; }
p { margin: 0; }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--g2); outline-offset: 2px; }
.s3-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--g2); color: var(--black); padding: 10px 18px; font-weight: 600;
}
.s3-skip:focus { left: 0; }
.screen-reader-text {
  border: 0; clip-path: inset(50%); height: 1px; margin: -1px;
  overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important;
}

/* ============================================================
   4. Shared building blocks
   ============================================================ */
.s3-wrap { max-width: var(--max); margin: 0 auto; }

.s3-kicker {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-h); font-size: 14px; font-weight: 600;
  letter-spacing: 5px; text-transform: uppercase; color: var(--g2);
}
.s3-kicker::before {
  content: ''; width: 4px; height: 1.05em; background: var(--g2); flex: none;
}

.s3-h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 700; line-height: 1.22; letter-spacing: .5px; text-wrap: balance; }
.s3-h3 { font-size: 21px; font-weight: 600; }

.s3-btn {
  display: inline-block; background: var(--g2); color: #04180d;
  font-family: var(--font-h); font-weight: 600; font-size: 15px; letter-spacing: .5px;
  padding: 14px 34px; border: none; border-radius: var(--r); cursor: pointer;
  transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.s3-btn:hover {
  background: var(--g1); color: #04180d; transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(10, 209, 115, .35);
}
.s3-btn--dark { background: var(--dark); color: var(--white); }
.s3-btn--dark:hover { background: var(--g2); color: #04180d; box-shadow: 0 14px 30px rgba(10, 209, 115, .35); }
.s3-btn--ghost { background: transparent; border: 1.5px solid var(--dark); color: var(--dark); padding: 11px 28px; font-size: 14px; }
.s3-btn--ghost:hover { background: var(--ink); color: var(--white); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(10, 209, 115, .28); }

/* Unified brand-green hover "overlay": buttons glow green, cards lift with a
   soft green-tinted shadow (matching the button glow) instead of black. */
.s3-lift { transition: transform .3s ease, box-shadow .3s ease; }
.s3-lift:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(10, 209, 115, .20); }
.s3-lift-sm { transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.s3-lift-sm:hover { transform: translateY(-4px); border-color: var(--g2); box-shadow: 0 14px 30px rgba(10, 209, 115, .18); }

/* pipe list marker (wordmark motif) */
.s3-li { display: flex; gap: 14px; align-items: baseline; line-height: 1.6; color: var(--body-c); }
.s3-li::before { content: ''; width: 4px; height: .95em; background: var(--g2); flex: none; transform: translateY(2px); }

/* scroll reveal */
.rv { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.rv.is-in { opacity: 1; transform: none; }
.no-js .rv { opacity: 1; transform: none; }
/* Staggered cascade for items revealed together in a grid. */
.s3-services__grid .rv:nth-child(2), .s3-pillars .s3-wrap .rv:nth-child(2) { transition-delay: .09s; }
.s3-services__grid .rv:nth-child(3), .s3-pillars .s3-wrap .rv:nth-child(3) { transition-delay: .18s; }
.s3-services__grid .rv:nth-child(4) { transition-delay: .27s; }
.s3-services__grid .rv:nth-child(5) { transition-delay: .36s; }
.s3-services__grid .rv:nth-child(6) { transition-delay: .45s; }

/* ============================================================
   5. Header
   ============================================================ */
.s3-header { position: sticky; top: 0; z-index: 60; font-family: var(--font-b); }
.s3-topbar {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--black); color: var(--gray); font-size: 13px;
  padding: 7px var(--pad); border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.s3-topbar__info { display: flex; gap: 22px; flex-wrap: wrap; }
.s3-topbar a { color: var(--gray); }
.s3-topbar a:hover { color: var(--g2); }
.s3-langs { display: flex; gap: 2px; align-items: center; }
.s3-langs button, .s3-langs a {
  background: none; border: none; cursor: pointer; font-size: 13px; font-weight: 600;
  padding: 2px 5px; color: var(--gray); transition: color .2s ease;
}
.s3-langs button:hover, .s3-langs a:hover { color: var(--g1); }
.s3-langs button[aria-pressed="true"], .s3-langs a[aria-current="true"] { color: var(--g2); }

.s3-navbar {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  background: var(--dark); padding: 16px var(--pad);
  box-shadow: none; transition: box-shadow .3s ease;
}
.s3-header.is-scrolled .s3-navbar { box-shadow: 0 6px 24px rgba(0, 0, 0, .45); }
.s3-brand { display: block; line-height: 1; }
.s3-brand img { height: 44px; width: auto; display: block; }
.s3-nav { display: flex; gap: 34px; align-items: center; }
.s3-nav a {
  font-family: var(--font-h); font-size: 15px; font-weight: 500; letter-spacing: .5px;
  color: #e8eef5; border-bottom: 2px solid transparent; padding-bottom: 3px;
}
.s3-nav a:hover { color: var(--g2); }
.s3-nav a[aria-current="page"] { color: var(--g2); border-bottom-color: var(--g2); }

.s3-burger {
  display: none; background: none; border: 1.5px solid var(--line-d); border-radius: var(--r);
  width: 44px; height: 40px; cursor: pointer; padding: 9px 10px; flex-direction: column;
  justify-content: space-between;
}
.s3-burger span { display: block; height: 2px; background: var(--white); transition: transform .3s ease, opacity .3s ease; }
.s3-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.s3-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.s3-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

@media (max-width: 900px) {
  .s3-nav {
    position: fixed; inset: 0 0 0 auto; width: min(320px, 85vw); z-index: 70;
    flex-direction: column; align-items: flex-start; gap: 6px;
    background: var(--black); padding: 92px 30px 30px;
    transform: translateX(100%); transition: transform .35s ease; visibility: hidden;
  }
  .s3-nav.is-open { transform: none; visibility: visible; box-shadow: -20px 0 60px rgba(0, 0, 0, .5); }
  .s3-nav a { font-size: 19px; padding: 12px 0; width: 100%; border-bottom: 1px solid var(--line-d); }
  .s3-burger { display: flex; position: relative; z-index: 80; }
  .s3-scrim {
    position: fixed; inset: 0; z-index: 65; background: rgba(0, 0, 0, .55);
    opacity: 0; pointer-events: none; transition: opacity .3s ease;
  }
  .s3-scrim.is-open { opacity: 1; pointer-events: auto; }
}

.s3-top {
  position: fixed; right: 26px; bottom: 26px; z-index: 80;
  width: 46px; height: 46px; border: none; border-radius: 4px;
  background: var(--g2); color: #04180d; font-size: 20px; font-weight: 700; cursor: pointer;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity .3s ease, transform .3s ease, background .2s ease;
}
.s3-top:hover { background: var(--g1); }
.s3-top.is-show { opacity: 1; transform: none; pointer-events: auto; }

/* ============================================================
   6. Hero (front page)
   ============================================================ */
.s3-hero {
  position: relative; overflow: hidden; color: var(--white);
  /* No photograph any more: the network animation is the subject, and a stock
     padlock behind it only competed with it. A shallow gradient keeps depth so
     the field reads as space rather than a flat black box. */
  background:
    radial-gradient(120% 95% at 76% 28%, rgba(10, 209, 115, .09), transparent 60%),
    linear-gradient(158deg, #0c100e 0%, #070908 58%, #0a0d0c 100%);
}
.s3-hero__grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 88px);
}
.s3-hero__glow {
  position: absolute; top: -180px; right: -120px; width: 560px; height: 560px; pointer-events: none;
  background: radial-gradient(circle, rgba(10, 209, 115, .16), transparent 65%);
}
.s3-hero__fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 120px; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(5, 5, 5, .85));
}
.s3-hero__net { position: absolute; inset: 0; pointer-events: none; opacity: 1; }
.s3-hero__inner {
  position: relative; z-index: 1; max-width: var(--max); margin: 0 auto;
  padding: 110px var(--pad) 150px;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 40px; align-items: center;
}
.s3-hero__copy { max-width: 720px; display: grid; gap: 22px; justify-items: start; }
.s3-hero__title {
  font-size: clamp(36px, 4.6vw, 58px); font-weight: 900; line-height: 1.08;
  letter-spacing: -.5px; text-wrap: balance; margin: 0;
}
.s3-hero__title::after {
  content: '|'; content: '|' / ''; color: var(--g2); font-weight: 400; margin-left: 6px;
  animation: s3-blink 1.15s steps(2) infinite;
}
@keyframes s3-blink { 50% { opacity: 0; } }
.s3-hero__sub { font-size: 19px; line-height: 1.7; color: var(--mist); max-width: 560px; }
.s3-hero__king { justify-self: center; width: min(410px, 33vw); }
.s3-hero__king svg { width: 100%; height: auto; display: block; }

.s3-hero .rv-h { opacity: 0; transform: translateY(28px); animation: s3-up .7s ease forwards; }
.s3-hero .rv-h:nth-child(2) { animation-delay: .12s; }
.s3-hero .rv-h:nth-child(3) { animation-delay: .24s; }
.s3-hero .rv-h:nth-child(4) { animation-delay: .36s; }
@keyframes s3-up { to { opacity: 1; transform: none; } }

@media (max-width: 1000px) {
  .s3-hero__inner { grid-template-columns: 1fr; padding: 90px var(--pad) 120px; }
  .s3-hero__king { display: none; }
}

/* ============================================================
   7. Page hero (interior pages)
   ============================================================ */
.s3-phero {
  position: relative; overflow: hidden; color: var(--white);
  background: linear-gradient(100deg, #050505, #161616);
  padding: 78px var(--pad);
}
.s3-phero__grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(115deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 80px);
}
.s3-phero__glow {
  position: absolute; top: -160px; right: -100px; width: 480px; height: 480px; pointer-events: none;
  background: radial-gradient(circle, rgba(10, 209, 115, .15), transparent 65%);
}
.s3-phero .s3-wrap { position: relative; display: grid; gap: 14px; }
.s3-phero h1 { font-size: clamp(32px, 4vw, 42px); font-weight: 700; }
.s3-crumb { display: flex; gap: 10px; font-size: 14px; color: var(--gray); align-items: center; }
.s3-crumb a { color: var(--g2); }

/* ============================================================
   8. Front sections
   ============================================================ */
.s3-pillars { background: var(--light); padding: 0 var(--pad) 70px; }
.s3-pillars .s3-wrap {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; transform: translateY(-60px);
}
.s3-pillar {
  background: var(--white); box-shadow: var(--sh-card-d);
  padding: 38px 32px; border-top: 3px solid var(--g2);
}
.s3-pillar__icon { color: var(--g2); width: 40px; height: 40px; margin-bottom: 18px; }
.s3-pillar__icon svg { width: 100%; height: 100%; }
.s3-pillar h3 { margin-bottom: 12px; color: var(--ink); }
.s3-pillar p { color: var(--body-c); }

.s3-stats {
  background: radial-gradient(760px at 85% 0%, rgba(10, 209, 115, .09), transparent 60%) var(--dark);
  padding: 90px var(--pad); color: var(--white);
}
.s3-stats__head { max-width: 1100px; margin: 0 auto; text-align: center; display: grid; gap: 18px; }
.s3-stats__head h2 { letter-spacing: 2px; }
.s3-stats__head p { font-size: 17px; line-height: 1.8; color: var(--mist); max-width: 820px; margin: 0 auto; }
.s3-stats__grid {
  max-width: var(--max); margin: 60px auto 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px;
}
.s3-stat {
  background: var(--panel); border: 1px solid rgba(10, 209, 115, .3);
  padding: 36px 26px; text-align: center; position: relative;
}
.s3-stat::before {
  content: ''; position: absolute; top: -1px; left: 26px; right: 26px; height: 2px; background: var(--g2);
}
.s3-stat__n { font-family: var(--font-h); font-size: 46px; font-weight: 900; color: var(--g2); line-height: 1; font-variant-numeric: tabular-nums; }
.s3-stat p { margin-top: 16px; line-height: 1.6; color: var(--mist); font-size: 15px; }
.s3-stats__src { max-width: var(--max); margin: 26px auto 0; font-size: 12.5px; color: #8a8a8a; text-align: center; }

.s3-safer { background: var(--light); padding: 100px var(--pad); }
.s3-safer .s3-wrap { display: grid; grid-template-columns: 1fr 1.15fr; gap: 60px; align-items: center; }
.s3-safer__img { position: relative; }
.s3-safer__img img {
  border-radius: 6px; display: block; width: 100%; height: 420px;
  object-fit: contain; background: #f8f8f9;
}
.s3-safer__copy { display: grid; gap: 20px; justify-items: start; }
.s3-safer__copy > p { line-height: 1.8; color: var(--body-c); font-size: 17px; }
.s3-mv { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 6px; }
.s3-mv > div { border-left: 2px solid var(--g2); padding-left: 18px; }
.s3-mv h4 { font-size: 18px; font-weight: 600; margin-bottom: 8px; color: var(--ink); }
.s3-mv p { line-height: 1.65; color: var(--body-c); font-size: 15px; }

.s3-csoc {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--dark) 0%, var(--dark-2) 100%);
  padding: 100px var(--pad); color: var(--white);
}
.s3-csoc__radar {
  position: absolute; right: -80px; top: -60px; width: 380px; opacity: .5; pointer-events: none;
}
.s3-csoc__head { max-width: 860px; display: grid; gap: 16px; position: relative; }
.s3-csoc__head p { line-height: 1.8; color: var(--mist); font-size: 17px; }
.s3-tabs { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 42px; position: relative; }
.s3-tab {
  font-family: var(--font-h); font-weight: 600; font-size: 13.5px; letter-spacing: 1px;
  padding: 12px 22px; cursor: pointer; border-radius: var(--r);
  background: transparent; color: var(--mist); border: 1.5px solid rgba(10, 209, 115, .45);
  transition: background .25s ease, color .25s ease, transform .25s ease, border-color .25s ease;
}
.s3-tab:hover { transform: translateY(-2px); }
.s3-tab[aria-selected="true"] { background: var(--g2); color: #04180d; border-color: var(--g2); }
/* Tab panels are STACKED in one grid cell rather than shown and hidden, so the
   container is always as tall as the tallest panel. Switching tabs used to add
   or remove a panel from the flow, which resized the section and made the
   background image jump. Layout rules therefore live on .s3-panel, not on
   .is-active — an inactive panel must occupy exactly the space it will need. */
.s3-panels { display: grid; }
.s3-panels > .s3-panel { grid-area: 1 / 1; }
.s3-panel { display: grid; visibility: hidden; opacity: 0; pointer-events: none; }
.s3-panel.is-active { visibility: visible; opacity: 1; pointer-events: auto; animation: s3-up .5s ease both; }
.s3-csoc .s3-panel {
  grid-template-columns: 1.1fr 1fr; gap: 50px; align-items: start; margin-top: 38px;
}
.s3-csoc .s3-panel h3 { font-size: 24px; color: var(--white); margin-bottom: 16px; }
.s3-csoc .s3-panel p { line-height: 1.8; color: var(--mist); margin-bottom: 14px; }
.s3-csoc .s3-panel img {
  border-radius: 6px; width: 100%; height: 340px; display: block;
  object-fit: contain; background: #e9e9eb;
  /* Light artwork on a near-black section: the hairline stops the palest of
     the three from bleeding into the background. */
  border: 1px solid rgba(255, 255, 255, .10);
}

.s3-nist {
  /* Brand artwork, not stock: light trails running toward a shield, which suits a
     section about a process. The scrim is 60-72% rather than the 82-90% the old
     photograph carried — that one destroyed 73% of its own contrast and showed
     nothing. This one is meant to be seen. */
  background:
    linear-gradient(rgba(7, 11, 10, .60), rgba(7, 11, 10, .72)),
    url(assets/img/3strategy_nist_fundo.webp) center / cover no-repeat,
    #070b0a;
  padding: 100px var(--pad);
}
.s3-nist h2 { text-align: center; margin: 0 auto; max-width: 760px; color: var(--white); }
.s3-nist .s3-tabs { justify-content: center; margin-top: 40px; }
.s3-nist .s3-tab { border-color: rgba(255, 255, 255, .28); color: #d3e9df; background: rgba(255, 255, 255, .05); }
.s3-nist .s3-tab:hover { border-color: var(--g1); color: var(--white); }
.s3-nist .s3-tab[aria-selected="true"] { background: var(--g2); color: #04180d; border-color: var(--g2); }
.s3-nist .s3-panel {
  /* Art sits BESIDE the copy rather than under it: a watermark behind running
     text is the reliable way to hurt legibility, and this section is the one a
     visitor actually reads. The text column keeps the majority of the width. */
  grid-template-columns: 1.5fr 1fr; gap: 44px; align-items: center;
  background: var(--white); border: 1px solid var(--line-l);
  box-shadow: var(--sh-card); padding: 44px 48px; max-width: 980px; margin: 40px auto 0;
}
.s3-nist .s3-panel__art img {
  width: 100%; height: 220px; display: block; border-radius: 4px;
  /* The artwork ships with a transparent backdrop, so it sits directly on the
     white panel instead of showing as a grey rectangle inside it. */
  object-fit: contain;
}
.s3-nist .s3-panel > p { font-family: var(--font-h); font-weight: 600; font-size: 19px; line-height: 1.6; color: var(--ink); }
.s3-nist ul { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.s3-nist .s3-btn--ghost { margin-top: 28px; }

.s3-ctas { background: var(--white); padding: 90px var(--pad); }
.s3-ctas .s3-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.s3-cta { position: relative; height: 280px; overflow: hidden; border-radius: 4px; display: block; }
.s3-cta img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  /* These are illustrations, not photographs: every element carries meaning, so
     a cover crop decapitates laptops, clouds and people. `contain` guarantees the
     whole artwork is shown at any viewport; the background matches each image's
     own field, so the letterboxing is invisible. */
  object-fit: contain; background: #eff0f2;
  transition: transform .6s ease;
}
.s3-cta img[src*="cta_consultores"] { background: #c4d3d0; }
.s3-cta:hover img { transform: scale(1.05); }
.s3-cta::after {
  /* Scrim for the white heading. Kept clear over the top two thirds so the
     light brand artwork stays visible; the old flat .25 top stop turned these
     images muddy grey. */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg,
              rgba(0, 0, 0, 0) 30%,
              rgba(0, 0, 0, .55) 66%,
              rgba(0, 0, 0, .82) 88%);
}
.s3-cta__body { position: absolute; left: 34px; right: 34px; bottom: 30px; z-index: 1; display: grid; gap: 16px; justify-items: start; }
.s3-cta__body h3 { font-size: 23px; font-weight: 600; color: var(--white); text-wrap: balance; }

/* Customer / partner logos — production style: full-colour logos shown at a
   larger size on a white band, no individual boxes, centered and wrapping. */
.s3-partners { background: var(--white); padding: 56px var(--pad); border-top: 1px solid var(--line-l); }
.s3-partners .s3-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 36px 54px; }
.s3-partner {
  flex: 0 0 auto; background: none; border: none; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.s3-partner img {
  max-height: 70px; width: auto; max-width: 190px; object-fit: contain;
  transition: transform .3s ease;
}
.s3-partner:hover img { transform: scale(1.06); }

/* ============================================================
   9. Interior pages
   ============================================================ */
.s3-sobre { background: var(--white); padding: 100px var(--pad); }
.s3-sobre .s3-wrap { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: start; }
.s3-sobre__img { position: sticky; top: 130px; }
.s3-sobre__img img {
  border-radius: 6px; width: 100%; height: 560px; display: block;
  object-fit: contain; background: #d4d7d8;
}
.s3-sobre__copy { display: grid; gap: 26px; }
.s3-sobre__copy > p { line-height: 1.8; color: var(--body-c); font-size: 18px; }
.s3-approach { display: grid; gap: 22px; margin-top: 8px; }
.s3-approach__item {
  display: flex; gap: 22px; background: var(--light);
  border-left: 3px solid var(--g2); padding: 28px 30px;
}
.s3-approach__n { font-family: var(--font-h); font-size: 22px; font-weight: 700; color: var(--g2); line-height: 1.2; }
.s3-approach__item h3 { font-size: 20px; margin-bottom: 8px; color: var(--ink); }
.s3-approach__item p { line-height: 1.7; color: var(--body-c); }

.s3-services { background: var(--light); padding: 100px var(--pad); }
.s3-services__head { text-align: center; display: grid; gap: 12px; margin-bottom: 56px; justify-items: center; }
.s3-services__head h2 { font-size: clamp(28px, 3.2vw, 38px); color: var(--ink); }
.s3-services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.s3-card {
  background: var(--white); border-top: 3px solid var(--g2); box-shadow: var(--sh-card);
  padding: 38px 32px; display: grid; gap: 14px; align-content: start;
}
.s3-card__icon { color: var(--g2); width: 44px; height: 44px; }
.s3-card__icon svg { width: 100%; height: 100%; }
.s3-card h3 { color: var(--ink); }
.s3-card p { line-height: 1.75; color: var(--body-c); }
.s3-card__tag { font-family: var(--font-h); font-size: 13px; font-weight: 600; letter-spacing: .5px; color: var(--g2); margin-top: 6px; }

.s3-contact-info { background: var(--light); padding: 90px var(--pad); }
.s3-contact-info .s3-wrap { display: grid; grid-template-columns: 1fr 1.6fr; gap: 26px; align-items: stretch; }
.s3-contact-card {
  background: var(--white); border-top: 3px solid var(--g2); box-shadow: var(--sh-card);
  padding: 44px 40px; display: grid; gap: 10px; align-content: start;
}
.s3-contact-card h3 { font-size: 26px; font-weight: 700; color: var(--ink); }
.s3-contact-card p { color: var(--body-c); font-size: 17px; }
.s3-contact-card a { font-weight: 600; }
.s3-map { min-height: 340px; border-radius: 4px; overflow: hidden; box-shadow: var(--sh-card); }
.s3-map iframe { width: 100%; height: 100%; border: 0; display: block; }

.s3-form-sec { background: var(--white); padding: 90px var(--pad) 110px; }
.s3-form-sec .s3-wrap { max-width: 860px; }
.s3-form-head { text-align: center; display: grid; gap: 12px; margin-bottom: 44px; justify-items: center; }
.s3-form-head h2 { font-size: clamp(28px, 3vw, 36px); color: var(--ink); }
.s3-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.s3-form input[type="text"], .s3-form input[type="email"], .s3-form input[type="tel"], .s3-form textarea {
  font-family: var(--font-b); font-size: 16px; padding: 15px 18px; width: 100%;
  border: 1px solid #c9c9c9; border-radius: var(--r); background: #fafafa; color: var(--ink); outline: none;
  transition: border-color .2s ease;
}
.s3-form input:focus, .s3-form textarea:focus { border-color: var(--g2); }
.s3-form .is-invalid { border-color: #d64545; }
.s3-form__full { grid-column: 1 / -1; }
.s3-form textarea { resize: vertical; min-height: 150px; }
.s3-form__consent { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; font-size: 14.5px; color: var(--body-c); }
.s3-form__consent input { width: 16px; height: 16px; accent-color: var(--g2); flex: none; }
.s3-form__actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.s3-form__note { font-size: 13px; color: var(--gray); }
.s3-form__status { grid-column: 1 / -1; font-size: 15px; font-weight: 600; display: none; padding: 14px 18px; border-radius: var(--r); }
.s3-form__status.is-ok { display: block; background: rgba(10, 209, 115, .12); color: #067a44; border: 1px solid rgba(10, 209, 115, .4); }
.s3-form__status.is-err { display: block; background: rgba(214, 69, 69, .08); color: #b23333; border: 1px solid rgba(214, 69, 69, .35); }
.s3-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.s3-legal { background: var(--white); padding: 90px var(--pad) 110px; }
.s3-legal .s3-wrap { max-width: 860px; display: grid; gap: 34px; }
.s3-legal h2 { font-family: var(--font-h); font-size: 20px; font-weight: 700; color: var(--ink); display: flex; gap: 12px; align-items: baseline; }
.s3-legal h2::before { content: ''; width: 4px; height: 1em; background: var(--g2); flex: none; transform: translateY(2px); }
.s3-legal p { line-height: 1.8; color: var(--body-c); margin-top: 10px; }

.s3-404 { background: var(--white); padding: 120px var(--pad); text-align: center; }
.s3-404 .s3-wrap { display: grid; gap: 20px; justify-items: center; max-width: 640px; }
.s3-404__code { font-family: var(--font-h); font-size: 96px; font-weight: 900; color: var(--g2); line-height: 1; }
.s3-404 h1 { font-size: 30px; color: var(--ink); }
.s3-404 p { color: var(--body-c); }

/* ============================================================
   10. Footer
   ============================================================ */
.s3-footer { background: var(--black); color: var(--gray); font-size: 15px; position: relative; overflow: hidden; }
.s3-footer__mesh { position: absolute; inset: 0; opacity: .5; pointer-events: none; }
.s3-footer__mesh img { width: 100%; height: 100%; object-fit: cover; }
.s3-footer__cols {
  position: relative; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px;
  padding: 64px var(--pad) 48px; max-width: var(--max); margin: 0 auto;
}
.s3-footer__logo img { height: 40px; width: auto; display: block; margin-bottom: 18px; }
.s3-footer__cols p { line-height: 1.7; max-width: 340px; }
.s3-footer h3 {
  font-size: 17px; font-weight: 600; color: var(--white); margin-bottom: 18px;
  display: flex; gap: 10px; align-items: baseline;
}
.s3-footer h3::before { content: ''; width: 4px; height: .9em; background: var(--g2); flex: none; }
.s3-footer__list { display: grid; gap: 10px; }
.s3-footer__list a { color: var(--gray); }
.s3-footer__list a:hover { color: var(--g2); }
.s3-footer__bar {
  position: relative; border-top: 1px solid var(--line-d); padding: 18px var(--pad);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px;
}
.s3-footer__bar a { color: var(--gray); }
.s3-footer__bar a:hover { color: var(--g2); }

/* ============================================================
   11. Cookie banner
   ============================================================ */
.s3-cookies {
  position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 90;
  max-width: 640px; margin: 0 auto;
  background: var(--panel); color: var(--mist); border: 1px solid rgba(10, 209, 115, .35);
  border-radius: 6px; padding: 20px 24px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
  display: none; gap: 16px; align-items: center; flex-wrap: wrap; font-size: 14.5px;
}
.s3-cookies.is-show { display: flex; }
.s3-cookies p { flex: 1 1 300px; line-height: 1.6; }
.s3-cookies__btns { display: flex; gap: 10px; }
.s3-cookies button {
  font-family: var(--font-h); font-weight: 600; font-size: 13.5px; cursor: pointer;
  padding: 10px 20px; border-radius: var(--r); border: 1.5px solid var(--g2);
  background: var(--g2); color: #04180d; transition: background .2s ease, color .2s ease;
}
.s3-cookies button.s3-cookies__no { background: transparent; color: var(--mist); border-color: rgba(255, 255, 255, .25); }
.s3-cookies button:hover { background: var(--g1); border-color: var(--g1); color: #04180d; }

/* ============================================================
   12. Responsive
   ============================================================ */
@media (max-width: 1100px) {
  .s3-stats__grid { grid-template-columns: repeat(2, 1fr); }
  .s3-partners .s3-wrap { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .s3-pillars .s3-wrap { grid-template-columns: 1fr; transform: translateY(-40px); }
  .s3-safer .s3-wrap, .s3-sobre .s3-wrap, .s3-contact-info .s3-wrap { grid-template-columns: 1fr; }
  .s3-sobre__img { position: static; }
  .s3-sobre__img img { height: 340px; }
  .s3-csoc .s3-panel { grid-template-columns: 1fr; }
  .s3-csoc .s3-panel img { height: 260px; }
  .s3-csoc__radar { display: none; }
  .s3-services__grid { grid-template-columns: 1fr; }
  .s3-ctas .s3-wrap { grid-template-columns: 1fr; }
  .s3-nist .s3-panel { grid-template-columns: 1fr; gap: 28px; padding: 32px 26px; }
  .s3-nist .s3-panel__art img { height: 180px; }
  .s3-map { min-height: 280px; }
}
@media (max-width: 620px) {
  .s3-stats__grid { grid-template-columns: 1fr; }
  .s3-partners .s3-wrap { grid-template-columns: repeat(2, 1fr); }
  .s3-form { grid-template-columns: 1fr; }
  .s3-mv { grid-template-columns: 1fr; }
  .s3-topbar__info { font-size: 12px; gap: 12px; }
  .s3-safer__img img { height: 300px; }
}

/* ============================================================
   13. Reduced motion (accessibility)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .rv, .s3-hero .rv-h { opacity: 1; transform: none; }
  .s3-hero__title::after { animation: none; }
}