:root{
  --blue-900:#0A2F5A;
  --blue-700:#1e6f90;
  --blue-100:#E6F4F8;
  --text:#0B1220;
  --muted:#9d9e9e;
  --line:#E5E7EB;
  --bg:#FFFFFF;
  --radius:14px;
  --shadow:0 10px 30px rgba(11,18,32,.08);
  --shadow2:0 6px 18px rgba(11,18,32,.10);
  --max:1200px;
  --g:24px;
  --font-body: "Montserrat", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial;
  --font-head: "Audiowide", "Montserrat", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

/* Contacto — card localização (Google Maps) */
.location-card{
  display:block;
  cursor:pointer;
  text-decoration:none;
  color:inherit;
}
.location-card:hover{
  transform: translateY(-2px);
  transition: transform .18s ease;
}
.location-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background: rgba(46, 200, 255, .9);
  box-shadow: 0 0 0 6px rgba(46, 200, 255, .12);
  display:inline-block;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--font-body);line-height:1.55}
a{color:#fff;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:var(--max);margin:0 auto;padding:0 20px}
.row{display:flex;gap:var(--g)}
.grid{display:grid;gap:var(--g)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:5px 11px;border-radius:12px;border:1px solid transparent;font-size:12px; font-weight:450;letter-spacing:.2px}
.btn-primary{background:var(--blue-700);color:#fff;box-shadow:var(--shadow2)}
.btn-primary:hover{filter:brightness(0.95)}
.btn-outline{border-color:rgba(30,111,144,.35);color:var(--blue-900);background:#fff}
.btn-outline:hover{background:var(--blue-100)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--blue-900)}

/* Produtos: botão "Saber mais" nos cards */
.btn-saber-mais{padding:9px 12px;border-radius:14px;font-size:13px;line-height:1}
.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:rgba(31,95,191,.08);color:var(--blue-900);font-weight:600;font-size:12px;border:1px solid rgba(31,95,191,.18)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:none}
.card.shadow{box-shadow:var(--shadow)}
.card .p{padding:22px}
.kicker{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-700);font-weight:750;margin-top: 0px;}
.h1{font-size:46px;line-height:1.05;margin:10px 0 14px}
.h2{font-size:32px;line-height:1.15;margin:0 0 10px}
.h3{font-size:20px;margin:0 0 6px}
.lead{font-size:18px;color:rgba(11,18,32,.82);max-width:60ch}
.muted{color:var(--muted)}
hr.sep{border:0;border-top:1px solid var(--line);margin:24px 0}
.topbar{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:14px}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:44px;height:44px;border-radius:12px;background:var(--blue-900);display:grid;place-items:center;color:#fff;font-weight:800}
.brand b{font-size:16px;letter-spacing:.3px}
.menu{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.menu a{padding:10px 8px;border-radius:10px;color:rgba(11,18,32,.85);font-weight:600;font-size:14px}
.menu a:hover{background:var(--blue-100);color:var(--blue-900)}
.nav-cta{display:flex;align-items:center;gap:10px}
.mobile-toggle{display:none;border:1px solid var(--line);background:#fff;border-radius:12px;padding:10px}
.hero{
  background:
    radial-gradient(900px 420px at 15% 10%, rgba(31,95,191,.14), transparent 60%),
    radial-gradient(800px 420px at 85% 20%, rgba(10,47,90,.14), transparent 60%),
    linear-gradient(180deg, rgba(233,241,255,.55), #fff 70%);
  border-bottom:1px solid var(--line);
}
.hero-wrap{padding:70px 0 44px}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--g);align-items:center}
.hero-media{border-radius:18px;border:1px solid rgba(10,47,90,.18);background:linear-gradient(135deg, rgba(10,47,90,.06), rgba(31,95,191,.10));box-shadow:var(--shadow);overflow:hidden;min-height:360px}
.hero-media .ph{height:100%;display:grid;place-items:center;padding:26px;text-align:center}
.hero-media .ph .muted{max-width:42ch}
.trustbar{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.section{padding:15px 0}
.section.alt{background:var(--blue-100);border-top:1px solid rgba(10,47,90,.08);border-bottom:1px solid rgba(10,47,90,.08)}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:14px;margin-bottom:18px}
.section-head .muted{max-width:62ch}
.cards6{grid-template-columns:repeat(3, 1fr)}
.cards3{grid-template-columns:repeat(3, 1fr)}
.cards4{grid-template-columns:repeat(4, 1fr)}
.icon{
  width:44px;height:44px;border-radius:14px;
  background:rgba(31,95,191,.10);
  border:1px solid rgba(31,95,191,.18);
  display:grid;place-items:center;color:var(--blue-900);font-weight:900;
}
.cardlink{display:flex;flex-direction:column;gap:14px}
.cardlink:hover{transform:translateY(-2px);transition:.2s ease;box-shadow:var(--shadow)}
.process{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.step{padding:18px;border-radius:16px;border:1px solid rgba(10,47,90,.12);background:#fff}
.step b{display:block;margin:10px 0 6px}
.darkband{background: linear-gradient(180deg, var(--blue-900), #0d7d83);color:#fff}
.darkband .muted{color:rgba(255,255,255,.78)}
.darkgrid{grid-template-columns:repeat(4,1fr)}
.darkcard{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);border-radius:16px;padding:18px}
.logogrid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.logobox{border:1px solid var(--line);border-radius:14px;background:#fff;height:70px;display:grid;place-items:center;color:rgba(11,18,32,.55);font-weight:700}
.footer{padding:40px 0;background:#fff;border-top:1px solid var(--line)}
.footergrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:24px}
.small{font-size:13px}
.input, textarea, select{
  width:100%;padding:12px 12px;border-radius:12px;border:1px solid var(--line);font:inherit;
  background:#fff;outline:none;
}
.input:focus, textarea:focus, select:focus{border-color:rgba(31,95,191,.55);box-shadow:0 0 0 4px rgba(31,95,191,.12)}
.formgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.note{font-size:12px;color:rgba(255,255,255,.78)}
.pagehead{padding:44px 0 20px;border-bottom:1px solid var(--line);background:linear-gradient(180deg, rgba(233,241,255,.55), #fff 70%)}
.breadcrumb{font-size:13px;color:rgba(11,18,32,.62)}
.kv{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:start}
.table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.table th,.table td{padding:12px 12px;border-bottom:1px solid var(--line);font-size:14px}
.table th{background:rgba(233,241,255,.7);text-align:left}
.table tr:last-child td{border-bottom:0}
.pills{display:flex;flex-wrap:wrap;gap:10px}
.pill{padding:8px 10px;border-radius:999px;border:1px solid rgba(10,47,90,.12);background:#fff;font-weight:600;font-size:13px}
.products-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

/* Conteúdo rico do backoffice (descritivo) */
.product-rich{line-height:1.7}
.product-rich :where(p,ul,ol,blockquote,table){margin:10px 0}
.product-rich :where(h1,h2,h3,h4){margin:18px 0 8px;line-height:1.2}
.product-rich :where(ul,ol){padding-left:18px}
.product-rich img{max-width:100%;height:auto;border-radius:14px;border:1px solid rgba(10,47,90,.12)}
.product-rich a{color:var(--blue-700);text-decoration:underline;text-underline-offset:3px}
.product-rich table{width:100%;border-collapse:collapse;display:block;overflow:auto;border:1px solid var(--line);border-radius:14px}
.product-rich th,.product-rich td{padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.product-rich tr:last-child td{border-bottom:0}
.prod-img{aspect-ratio:4/3;border-bottom:1px solid var(--line);border-radius:14px 14px 0 0;background:linear-gradient(135deg, rgba(10,47,90,.06), rgba(31,95,191,.10));display:grid;place-items:center;color:rgba(11,18,32,.55);font-weight:800}
.prod-meta{padding:16px}
.prod-meta .muted{font-size:13px}
.filters{display:grid;gap:12px}
.layout-2col{display:grid;grid-template-columns:320px 1fr;gap:24px}
.notice{border:1px solid rgba(31,95,191,.22);background:rgba(31,95,191,.08);border-radius:14px;padding:14px}
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
  .cards6{grid-template-columns:repeat(2,1fr)}
  .cards4{grid-template-columns:repeat(2,1fr)}
  .cards3{grid-template-columns:repeat(2,1fr)}
  .process{grid-template-columns:repeat(2,1fr)}
  .darkgrid{grid-template-columns:repeat(2,1fr)}
  .logogrid{grid-template-columns:repeat(3,1fr)}
  .footergrid{grid-template-columns:1fr 1fr}
  .layout-2col{grid-template-columns:1fr}
}
@media (max-width: 680px){
  .h1{font-size:38px}
  .menu{display:none}
  .mobile-toggle{display:inline-flex}
  .cards6,.cards4,.cards3{grid-template-columns:1fr}
  .process{grid-template-columns:1fr}
  .darkgrid{grid-template-columns:1fr}
  .logogrid{grid-template-columns:2,1fr}
  .formgrid{grid-template-columns:1fr}
  .products-grid{grid-template-columns:1fr}
}


h1,h2,h3,.h1,.h2,.h3{font-family:var(--font-head);letter-spacing:.2px}

.brand-logo{height:40px;width:auto;display:block}
@media (min-width:900px){.brand-logo{height:44px}}

/* Header CTA sizing (staging feedback) */
.nav-cta .btn{padding:10px 14px;font-size:14px;border-radius:12px}
.nav-cta .btn.primary{padding:10px 16px}
@media (max-width:900px){
  .nav-cta .btn{padding:10px 12px}
}


/* Hero media (imagem/vídeo) */
.hero-media{
  position:relative;
  border:1px solid rgba(30,111,144,.22);
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow2);
  min-height:360px;
  background:linear-gradient(180deg, rgba(230,243,247,.65), #fff);
}
.hero-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(900px 420px at 18% 18%, rgba(30,111,144,.14), transparent 60%);
  pointer-events:none;
}
.hero-video, .hero-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.hero-video{z-index:1}
.hero-img{z-index:0}



/* Se o vídeo carregar, escondemos a imagem (o browser mantém vídeo por cima) */
@supports (object-fit: cover){
  .hero-video{background:#000}
}

/* ===============================
   THEME OPTION A — High‑Tech Midnight (2026)
   Base escura + gradiente cinemático + glow subtil
   =============================== */
:root{
  --bg:#050A0F;
  --text:#EAF2F7;
  --muted:rgba(234,242,247,.70);
  --line:rgba(255,255,255,.12);
  --blue-100:rgba(30,111,144,.12);
  --shadow:0 14px 44px rgba(0,0,0,.55);
  --shadow2:0 10px 28px rgba(0,0,0,.55);
}
html,body{background:var(--bg);color:var(--text)}
.card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}
.card.shadow{box-shadow:var(--shadow)}
.topbar{background: rgb(255 255 255 / 68%);;backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid rgba(255,255,255,.10)}
.menu a{color:rgba(234,242,247,.82)}
.menu a:hover{background:rgba(30,111,144,.14);color:#fff}
.btn-outline{background:transparent;border-color:rgba(30,111,144,.42);color: #f4fbff}
.btn-outline:hover{background:rgba(30,111,144,.14)}
.btn-primary{box-shadow:0 10px 26px rgba(30,111,144,.38)}
.badge{background:rgba(30,111,144,.12);border-color:rgba(30,111,144,.22);color:rgba(234,242,247,.88)}
.icon{background:rgba(30,111,144,.14);border-color:rgba(30,111,144,.22);color:#EAF2F7;DISPLAY: none;}
.hero{
  background:
    radial-gradient(900px 420px at 18% 18%, rgba(30,111,144,.32), transparent 60%),
    radial-gradient(860px 460px at 85% 22%, rgba(0,180,216,.18), transparent 60%),
    linear-gradient(135deg, #050A0F 0%, #0B1F2A 35%, #1E6F90 75%, #2C8FB5 100%);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.hero-wrap{padding:5px 0 48px}
.lead{color:rgba(234,242,247,.80)}
.section.alt{background:rgba(30,111,144,.08);border-color:rgba(255,255,255,.10)}
.pagehead{background:linear-gradient(135deg, rgba(30,111,144,.14), rgba(5,10,15,.92));border-bottom:1px solid rgba(255,255,255,.12)}
.table{border-color:rgba(255,255,255,.12)}
.table th{background:rgba(30,111,144,.16)}
.table th,.table td{border-bottom-color:rgba(255,255,255,.10)}
.input, textarea, select{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.12);color:#009cfd;}
.input::placeholder{color:rgba(234,242,247,.55)}
.footer{background:rgba(5,10,15,.92);border-top:1px solid rgba(255,255,255,.12)}
.logobox{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.12);color:rgba(234,242,247,.60)}
.cardlink:hover{transform:translateY(-3px);transition:.18s ease;box-shadow:0 16px 46px rgba(0,0,0,.60)}

/* Glow subtil no hover para CTAs */
.btn-primary:hover{filter:none;box-shadow:0 12px 34px rgba(30,111,144,.48)}




/* ============================= */
/*  PARCEIROS – PREMIUM VERSION */
/* ============================= */

.pc-link{ 
  display:block; 
  text-decoration:none; 
}

.partners-carousel{
  position:relative;
  margin-top:18px;
}

/* Fade lateral elegante */
.pc-viewport{
  overflow:hidden;
  border-radius:16px;
  position:relative;
  margin-bottom: 30px;
}

/* Fade esquerda/direita */
.pc-viewport::before,
.pc-viewport::after{
  content:"";
  position:absolute;
  top:0;
  width:80px;
  height:100%;
  z-index:3;
  pointer-events:none;
}

.pc-viewport::before{
  left:0;
  background:linear-gradient(to right, rgba(8,18,32,1), rgba(8,18,32,0));
}

.pc-viewport::after{
  right:0;
  background:linear-gradient(to left, rgba(8,18,32,1), rgba(8,18,32,0));
}

/* Track */
.pc-track{
  display:flex;
  gap:16px;
  padding:6px 56px;
  overflow:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  cursor:grab;
}
.pc-track:active{ cursor:grabbing; }
.pc-track::-webkit-scrollbar{ display:none; }

/* Card */
.pc-item{
  flex:0 0 auto;
  width:220px;
  height:78px;
  border-radius:14px;
  border:1px solid rgba(157,158,158,.25);
  background:#fff;
  display:grid;
  place-items:center;
  transition:transform .2s ease, 
             border-color .2s ease, 
             background .2s ease,
             box-shadow .2s ease;
  will-change:transform;
}

.pc-item:hover{
  transform:scale(1.08);
  border-color:#1e6f90;
  background:rgba(255,255,255);
  box-shadow:0 10px 26px rgba(11,18,32,.10);
}

.pc-item img{
  max-width:170px;
  max-height:44px;
  width:auto;
  height:auto;
  opacity:.95;
  transition:transform .2s ease;
}

.pc-item:hover img{
  transform:scale(1.05);
}

/* ============================= */
/*  SETAS (APARECEM NO HOVER)   */
/* ============================= */

.pc-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(157,158,158,.35);
  background:rgba(0,0,0,.35);
  color:#fff;
  font-size:28px;
  display:grid;
  place-items:center;
  cursor:pointer;
  z-index:4;

  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease, background .2s ease, border-color .2s ease;
}

.partners-carousel:hover .pc-arrow{
  opacity:1;
  pointer-events:auto;
}

.pc-arrow:hover{
  border-color:#1e6f90;
  background:#1e6f90;
}

.pc-arrow.left{ left:10px; }
.pc-arrow.right{ right:10px; }

@media (max-width:700px){
  .pc-item{ width:170px; }
  .pc-track{ padding:6px 52px; }
}

/* ========================================= */
/* HERO – HIGH-TECH (parallax + glow + grain) */
/* ========================================= */

.hero{
  position:relative;
  overflow:hidden;
  padding:96px 0 86px;

  /* A imagem fica num layer separado para parallax via JS */
  background: transparent;
}

/* Layer da imagem (parallax) */
.hero .hero-bg{
  position:absolute;
  inset:-10% 0 -10% 0; /* margem para mover sem mostrar bordas */
  background: url("../img/hero-fleet.webp") center / cover no-repeat;
  transform: translate3d(0,0,0);
  will-change: transform;
  z-index:0;
  filter: saturate(1.05) contrast(1.03);
}

/* Overlay tech: gradiente animado lento + “glow” */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;

  background:
    radial-gradient(900px 520px at 18% 18%, rgba(0,220,255,.20), transparent 60%),
    radial-gradient(760px 460px at 86% 22%, rgba(30,111,144,.32), transparent 60%),
    linear-gradient(180deg,
      rgba(6,14,26,.86) 0%,
      rgba(30,111,144,.92) 35%,
      rgba(10,22,38,.88) 100%
    );

  /* gradiente “vivo” muito lento */
  background-size: 140% 140%, 140% 140%, 100% 100%;
  animation: heroGlow 18s ease-in-out infinite alternate;
}

@keyframes heroGlow{
  0%   { background-position: 0% 0%, 100% 0%, 0% 0%; }
  100% { background-position: 12% 10%, 88% 18%, 0% 0%; }
}

/* Grain subtil (sem imagem) */
.hero::after{
  content:"";
  position:absolute;
  inset:-20%;
  z-index:2;
  pointer-events:none;

  /* “ruído” por padrões minúsculos */
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.015) 0px,
      rgba(255,255,255,.015) 1px,
      rgba(0,0,0,.015) 2px,
      rgba(0,0,0,.015) 3px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.012) 0px,
      rgba(255,255,255,.012) 1px,
      rgba(0,0,0,.012) 2px,
      rgba(0,0,0,.012) 3px
    );

  opacity:.35;
  mix-blend-mode: overlay;
  transform: translateZ(0);
  animation: grainMove 9s steps(6) infinite;
}

@keyframes grainMove{
  0%   { transform: translate3d(-2%, -2%, 0); }
  100% { transform: translate3d(2%, 2%, 0); }
}

/* Conteúdo acima de tudo */
.hero-wrap{
  position:relative;
  z-index:3;
}

/* Texto high contrast */
.hero .kicker{ color:#fff; opacity:.86; letter-spacing:.08em; }
.hero .h1{ color:#fff; text-shadow: 0 10px 28px rgba(0,0,0,.45); }
.hero .lead{ color:#fff; opacity:.92; max-width: 640px; }

/* Botões com glow */
.hero .btn-primary{
  background:#fff;
  color:#1e6f90;
  border:none;
  box-shadow: 0 14px 34px rgba(0,220,255,.18);
}
.hero .btn-primary:hover{
  background:#f2fbff;
  box-shadow: 0 16px 40px rgba(0,220,255,.24);
}

.hero .btn-outline{
  border:1px solid rgba(255,255,255,.65);
  color:#fff;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(6px);
}
.hero .btn-outline:hover{
  background:#fff;
  color:#1e6f90;
}

/* Trustbar */
.hero .trustbar .badge{
  background: rgba(255,255,255,.10);
  color:#fff;
  border: 1px solid rgba(255,255,255,.22);
}

/* Motion fade-in (base) */
.reveal{
  opacity:0;
  transform: translateY(16px);
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}
.reveal.is-in{
  opacity:1;
  transform: translateY(0);
}

/* Acessibilidade: reduzir movimento */
@media (prefers-reduced-motion: reduce){
  .hero::before, .hero::after{ animation:none !important; }
  .reveal{ transition:none !important; opacity:1 !important; transform:none !important; }
}
/* Cards de Capacidades com imagem do CRM + filtro TRKW */
.cap-card{
  position:relative;
  overflow:hidden;
}

/* imagem do card (muito transparente) */
.cap-card::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--cap-bg);
  background-size: cover;
  background-position: center;
  opacity: .10;              /* 90% transparência (imagem quase apagada) */
  filter: saturate(1.1) contrast(1.05);
  transform: scale(1.06);
  z-index:0;
}

/* overlay/filtro (mesma linguagem do hero: azul + glow) */
.cap-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(520px 260px at 20% 15%, rgba(0,220,255,.16), transparent 60%),
    radial-gradient(460px 240px at 85% 25%, rgba(30,111,144,.18), transparent 60%),
    linear-gradient(180deg, rgba(30,111,144,.14), rgba(255,255,255,.00));
  z-index:1;
  pointer-events:none;
}

/* conteúdo acima do background */
.cap-card .p{
  position:relative;
  z-index:2;
}

/* Produto (detalhe): layout tipo “imagem 2” + galeria */
.pd-titlebar{background:rgba(10,47,90,.10);border:1px solid rgba(10,47,90,.18);border-radius:14px;padding:14px 16px;margin-bottom:14px}
.pd-titlebar__title{font-family:var(--font-head);font-size:22px;letter-spacing:.4px}
.pd-titlebar__sub{margin-top:6px;color:rgb(255 255 255 / 78%)}

.pd-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--g);align-items:start}
@media (max-width: 980px){.pd-layout{grid-template-columns:1fr}}

.pd-gallery{overflow:hidden}
.pd-gallery__main{position:relative;background:rgba(11,18,32,.04);height:clamp(320px,55vh,680px);display:flex;align-items:center;justify-content:center}
/*
  Importante: muitas imagens vêm com orientação EXIF e podem ser verticais.
  Para evitar "deformação"/crop agressivo, usamos contain e deixamos a área adaptar-se.
*/
.pd-gallery__main img{width:100%;height:100%;object-fit:contain;display:block}
.pd-empty{height:420px;display:grid;place-items:center}

.pd-nav{position:absolute;top:50%;transform:translateY(-50%);border:1px solid rgba(10,47,90,.25);background:rgba(255,255,255,.86);border-radius:12px;padding:8px 12px;font-size:20px;line-height:1;cursor:pointer}
.pd-nav:hover{background:#fff}
.pd-nav--prev{left:10px}
.pd-nav--next{right:10px}

.pd-count{position:absolute;right:12px;bottom:12px;background:rgba(11,18,32,.72);color:#fff;padding:6px 10px;border-radius:999px;font-size:12px}

.pd-thumbs{display:flex;gap:10px;overflow:auto;padding:12px;border-top:1px solid var(--line)}
.pd-thumb{border:1px solid rgba(10,47,90,.22);background:#fff;border-radius:12px;padding:0;min-width:82px;height:58px;overflow:hidden;cursor:pointer}
.pd-thumb img{width:100%;height:100%;object-fit:cover}
.pd-thumb.is-active{outline:2px solid rgba(30,111,144,.85)}

/* PDFs */
.pd-docs__list{display:grid;gap:10px;margin-top:12px}
.pd-doc{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border:1px solid rgba(10,47,90,.16);border-radius:14px;background:rgba(10,47,90,.03)}
.pd-doc__left{display:flex;align-items:center;gap:12px;min-width:0}
.pd-pdf-ic{width:34px;height:34px;color:var(--blue-700);flex:0 0 auto}
.pd-doc__name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52ch}
.pd-doc__hint{font-size:12px;margin-top:2px}

/* ========================================= */
/*        TRKW PREMIUM MODAL (pd-*)          */
/* ========================================= */

.pd-modal{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
}

/* overlay */
.pd-modal__overlay{
  position: absolute;
  inset: 0;
  background: rgba(2,10,16,.85);
  backdrop-filter: blur(6px);
}

/* panel */
.pd-modal__panel{
  position: relative;
  width: 520px;
  max-width: 92%;
  background: linear-gradient(145deg,#0c1620,#0a1118);
  border: 1px solid rgba(0,179,230,.3);
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(0,179,230,.15),
    0 0 35px rgba(0,179,230,.25),
    0 25px 60px rgba(0,0,0,.7);
  animation: pdScaleIn .18s ease;
}

@keyframes pdScaleIn{
  from{ opacity:0; transform:scale(.96) }
  to{ opacity:1; transform:scale(1) }
}

/* header */
.pd-modal__head{
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.pd-modal__head .h3{
  font-size: 18px;
  margin: 0;
  font-weight: 700;
  background: linear-gradient(90deg,#0aa3d2,#00d4ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.pd-modal__x{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.15);
  color: #0aa3d2;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

.pd-modal__x:hover{
  background: rgba(0,179,230,.15);
  border-color: rgba(0,179,230,.35);
}

/* body */
.pd-modal__body{
  padding: 18px 20px 8px 20px;
}

.pd-modal__body .muted{
  color: rgba(255,255,255,.65) !important;
}

.pd-label{
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #0aa3d2;
  margin: 12px 0 6px 0;
}

.pd-input{
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(0,179,230,.25);
  background: rgba(255,255,255,.04);
  color: #fff;
  font-size: 14px;
  transition: .2s;
}

.pd-input:focus{
  outline: none;
  border-color: #0aa3d2;
  box-shadow: 0 0 0 3px rgba(0,179,230,.25);
}

.pd-input::placeholder{
  color: rgba(255,255,255,.35);
}

/* footer */
.pd-modal__foot{
  padding: 14px 20px 18px 20px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* make primary button glow in modal */
.pd-modal__foot .btn-primary{
  background: linear-gradient(90deg,#0aa3d2,#00d4ff);
  border: none !important;
  box-shadow: 0 0 16px rgba(0,179,230,.45);
}

.pd-modal__foot .btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 0 26px rgba(0,179,230,.6);
}

/* thumbs bar com setas */
.pd-thumbsbar{
  display:grid;
  grid-template-columns: 44px 1fr 44px;
  align-items:center;
  gap:10px;
  padding:12px;
  border-top:1px solid var(--line);
}

.pd-tarrow{
  border:1px solid rgba(10,47,90,.25);
  background:rgba(255,255,255,.86);
  border-radius:12px;
  width:44px;height:44px;
  font-size:22px;line-height:1;
  cursor:pointer;
}
.pd-tarrow:disabled{opacity:.35;cursor:not-allowed}

.pd-thumbs{
  display:flex;
  gap:10px;
  overflow:hidden; /* importante: sem scroll livre */
  padding:0;
}

/* thumbs: mantém o mesmo estilo */
.pd-thumb{
  border:1px solid rgba(10,47,90,.22);
  background:#fff;
  border-radius:12px;
  padding:0;
  min-width:82px;
  height:58px;
  overflow:hidden;
  cursor:pointer;
}
.pd-thumb img{width:100%;height:100%;object-fit:cover}
.pd-thumb.is-active{outline:2px solid rgba(30,111,144,.85)}

/* ===== Catálogo: imagens iguais + botão no fim ===== */
.prod-card { display:flex; flex-direction:column; overflow:hidden; }
.prod-img{
  height: 210px;                /* ajusta se quiseres mais/menos */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* garante alinhamento do conteúdo */
.prod-meta{ display:flex; flex-direction:column; min-height: 210px; }
.prod-desc{
  margin-top:10px;
  flex: 1 1 auto;              /* empurra actions para baixo */
  display: -webkit-box;
  -webkit-line-clamp: 4;       /* limita linhas para os cards ficarem iguais */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.prod-actions{ margin-top: 12px; }

/* ===== Sidebar: categorias sempre abertas (lista) ===== */
.catlist-items{
  display:grid;
  gap:8px;
  margin-top: 10px;
}
.catitem{
  text-align:left;
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.85);
  cursor:pointer;
  font: inherit;
}
.catitem:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
}
.catitem.is-active{
  background: rgba(0,179,230,.14);
  border-color: rgba(0,179,230,.40);
  color: #fff;
}
/* Card com imagem de fundo (igual ao index/capabilities) */
.card.cardlink.has-bg {
  position: relative;
  overflow: hidden;
}

.card.cardlink.has-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--card-bg, none);
  background-size: cover;
  background-position: center;
  opacity: .25;          /* ajusta para mais/menos visível */
  transform: scale(1.03);
  z-index: 0;
}

/* “tinta”/overlay para manter legibilidade */
.card.cardlink.has-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 80% at 20% 10%, rgba(9, 170, 255, .18) 0%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.85) 100%);
  z-index: 0;
}

.card.cardlink.has-bg .p {
  position: relative;
  z-index: 1;
}

/* opcional: cursor e transição */
.card.cardlink.has-bg {
  transition: transform .15s ease, box-shadow .15s ease;
}
.card.cardlink.has-bg:hover {
  transform: translateY(-2px);
}
/* ===============================
   SERVIÇOS DETALHE LAYOUT
================================= */

/* botão voltar */
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* card hero título */
.service-hero .h2 {
  font-size: 28px;
  font-weight: 700;
}

.service-hero .muted {
  max-width: 800px;
  opacity: .8;
}


/* layout 2 colunas (CATÁLOGO: sidebar + listagem) */
.layout-2col{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap:24px;
}

/* Responsivo */
@media (max-width: 980px){
  .layout-2col{ grid-template-columns:1fr; }
}
/* Detalhe (servicos-detalhe.html): 2 colunas equilibradas */
body[data-product-detail-mode="external"] .layout-2col{
  grid-template-columns: 1.1fr 1fr;
  gap: 28px;
}

/* ===============================
   GALERIA
================================= */

.gallery {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #0c131a;
  border: 1px solid rgba(255,255,255,.06);
}

.gallery img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}

@media (max-width: 900px) {
  .gallery img {
    height: 260px;
  }
}

.gbtn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: rgba(0,0,0,.45);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  transition: .2s ease;
}

.gbtn:hover {
  background: rgba(0,180,255,.4);
}

.gbtn.prev { left: 14px; }
.gbtn.next { right: 14px; }

.gcount {
  position: absolute;
  right: 14px;
  bottom: 14px;
  background: rgba(0,0,0,.5);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
}

/* miniaturas */
.thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  overflow-x: auto;
}

.thumb {
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid transparent;
  opacity: .7;
  cursor: pointer;
  transition: .2s ease;
}

.thumb img {
  width: 80px;
  height: 55px;
  object-fit: cover;
  display: block;
}

.thumb.is-active {
  border-color: rgba(0,180,255,.7);
  opacity: 1;
}

/* ===============================
   DESCRIÇÃO
================================= */

.card .h3 {
  font-weight: 700;
}

.card .muted.small {
  opacity: .6;
}

.card p {
  line-height: 1.6;
}

.card strong {
  font-weight: 600;
}

/* ===============================
   DOCUMENTOS
================================= */

.doclist {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.docrow {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.05);
  transition: .2s ease;
}

.docrow:hover {
  background: rgba(0,180,255,.06);
  border-color: rgba(0,180,255,.25);
}

.docicon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(0,180,255,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.docmeta {
  flex: 1;
}

.doctitle {
  font-weight: 600;
}

.docbtn {
  white-space: nowrap;
}
/* MODAL EMAIL PDF */
.modal-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.75);
  backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:center;
  z-index:9999;
}
.modal-card{
  width:100%; max-width:420px;
  background:#0f1720;
  border-radius:18px;
  padding:28px;
  position:relative;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 0 40px rgba(0,180,255,.10);
}
.modal-close{
  position:absolute; top:12px; right:14px;
  border:none; background:transparent;
  color:#fff; font-size:22px; cursor:pointer;
}
/* NEWS (masonry-friendly) */
/*
  Objetivo:
  - Respeitar proporção real das imagens (horizontais/horizontais, verticais/verticais)
  - Evitar cortes (sem object-fit:cover)
  - Manter layout com colunas (masonry via CSS columns) para não criar "buracos" grandes
*/
.news-grid{
  column-count: 2;
  column-gap: 22px;
}
@media (max-width: 980px){ .news-grid{ column-count: 2; } }
@media (max-width: 600px){ .news-grid{ column-count: 1; } }

/* Cada card precisa evitar quebra dentro da coluna */
.news-card{
  display:inline-block;
  width:100%;
  margin: 0 0 22px;
  overflow:hidden;
  break-inside: avoid;
}

/* Media wrapper com aspect-ratio dinâmico (definido no JS após load) */
.news-media{
  width:100%;
  background: rgba(255,255,255,.06);
  position: relative;
  border-radius: 16px 16px 0 0;
  overflow:hidden;
}
.news-media img{
  width:100%;
  height:100%;
  display:block;
  object-fit: contain; /* sem cortes */
  background: rgba(0,0,0,.12);
}
.news-media::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.25));
  pointer-events:none;
}
.ql-align-center { text-align:center; }
.ql-align-right { text-align:right; }
.ql-align-justify { text-align:justify; }
/* Livro de Reclamações Online (footer) */
.footer-complaints{
  margin-top:14px;
  display:flex;
  justify-content:flex-end;
}
.footer-complaints a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
  transition: transform .18s ease, opacity .18s ease, border-color .18s ease;
}
.footer-complaints a:hover{
  transform: translateY(-2px);
  opacity:.95;
  border-color: rgba(0,180,255,.28);
}
.footer-complaints img{
  width: 70px; /* ~30% do tamanho anterior */
  max-width: 100%;
  height:auto;
  display:block;
  filter: brightness(.95);
}
@media (max-width: 720px){
  .footer-complaints{ justify-content:flex-start; }
  .footer-complaints img{ width: 64px; }
}

/* =========================================
   HERO — Slideshow notícias (FINAL / sem duplicados)
   ========================================= */

/* Card do lado direito: mais rectangular */
.hero-media{
  position: relative;
  border: 1px solid rgba(30,111,144,.22);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow2);
  background: linear-gradient(180deg, rgba(230,243,247,.10), rgba(255,255,255,.02));
  aspect-ratio: 16 / 10;
  min-height: 300px;
}

/* camada decorativa atrás do conteúdo */
.hero-media::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(900px 420px at 18% 18%, rgba(30,111,144,.14), transparent 60%);
  pointer-events:none;
  z-index:0;
}

/* Mount ocupa tudo */
.hero-media .hero-news{
  position: relative;
  width: 100%;
  height: 100%;
  z-index:1;
}

/* Slide ocupa tudo */
.hero-media .hero-news-slide{
  position: absolute;
  inset: 0;
  border-radius: 18px;
  overflow: hidden;
}

/* Imagem full-bleed */
.hero-media .hero-news-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

/* Link a cobrir o slide (clicável) */
.hero-media .hero-news-link{
  position:absolute;
  inset:0;
  z-index:2;
  display:block;
}

/* CAPTION no fundo com fundo escurecido (legível) */
.hero-media .hero-news-overlay{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:3;
  padding: 14px 14px 12px;
  background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,0));
  pointer-events:none;
}

/* Título/descrição mais forte */
.hero-media .hero-news-legend{
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .3px;
  text-transform: uppercase;
  line-height: 1.15;
  color: rgba(234,242,247,.98);
  text-shadow: 0 10px 28px rgba(0,0,0,.55);
  margin: 0 0 10px 0;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 94%;
}

/* “Ver mais” no fundo (visual forte) */
.hero-media .hero-news-more{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight: 800;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Setas por cima do link overlay */
.hero-media .hero-news-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:42px;height:42px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(0,0,0,.30);
  color:#fff;
  font-size:22px;
  display:grid;
  place-items:center;
  cursor:pointer;
  z-index:4;
  backdrop-filter: blur(6px);
}
.hero-media .hero-news-arrow.left{ left:12px; }
.hero-media .hero-news-arrow.right{ right:12px; }

/* Dots no topo à direita */
.hero-media .hero-news-dots{
  position:absolute;
  top:12px;
  right:12px;
  display:flex;
  gap:7px;
  align-items:center;
  z-index:4;
}
.hero-media .hero-news-dots .dot{
  width:9px;height:9px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.45);
  background:rgba(255,255,255,.22);
  cursor:pointer;
}
.hero-media .hero-news-dots .dot.active{
  background: rgba(255,255,255,.95);
}

@media (max-width: 980px){
  .hero-media{ aspect-ratio: 16 / 9; min-height: 260px; }
}
@media (max-width: 860px){
  .hero-media .hero-news-arrow{ display:none; }
}

/* =============================
   EMPRESA — coluna direita + slider de logótipos
   ============================= */

/* empilha o slider grande + o slider de logótipos na mesma coluna */
.empresa-right{
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* caixa do slider de logótipos: 90px de altura */
.logo-slider-card{
  height:142px;
}

/* slider de logótipos (compacto) */
.logo-slider{ position:relative; width:100%; }
.logo-slider .logo-slide{
  position:relative;
  height:120px;              /* área útil */
  display:flex;
  align-items:center;
  justify-content:center;
}

/* imagem 60px */
.logo-slider .logo-img{
  height:120px;
  width:auto;
  max-width:100%;
  object-fit:contain;
  display:block;
}

/* link overlay (se existir) */
.logo-slider .logo-link{
  position:absolute;
  inset:0;
  z-index:2;
  display:block;
}

/* setas compactas */
.logo-slider .logo-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:30px;
  height:30px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.22);
  color:#fff;
  font-size:18px;
  display:grid;
  place-items:center;
  cursor:pointer;
  z-index:3;
}
.logo-slider .logo-arrow.left{ left:6px; }
.logo-slider .logo-arrow.right{ right:6px; }

/* dots discretos no canto inferior direito */
.logo-slider .logo-dots{
  position:absolute;
  right:10px;
  bottom:-2px;
  display:flex;
  gap:6px;
  align-items:center;
  z-index:3;
}
.logo-slider .logo-dots .dot{
  width:7px;
  height:7px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.18);
  cursor:pointer;
}
.logo-slider .logo-dots .dot.active{
  background:rgba(255,255,255,.9);
}


/* FORCE notícias em 2 colunas (override) */
#newsGrid.news-grid, .news-grid{
  display:block !important;
  column-count: 2 !important;
  column-gap: 22px;
}
@media (max-width: 600px){
  #newsGrid.news-grid, .news-grid{ column-count: 1 !important; }
}

/* =========================================
   Empresa — Missão / Visão / Valores (MVV)
========================================= */

/* Cards MVV (Missão / Visão / Valores) */
.mvv-card{
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
}

.mvv-card:hover{
  background: rgba(0,179,230,.06);
  border-color: rgba(0,179,230,.22);
}

.mvv-card b{display:block;margin-bottom:4px}

/* Modal MVV: nunca sai do ecrã (topo/bottom) */
.pd-modal.mvv-modal{padding: 28px 18px; box-sizing: border-box;}

.mvv-modal .pd-modal__panel{
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.mvv-modal .pd-modal__body{
  text-align: justify;
  line-height: 1.65;
  color: rgba(255,255,255,.86);
  overflow: auto;
  flex: 1;
}

.mvv-modal .mvv-modal__content p{margin:0 0 12px 0}
.mvv-modal .mvv-modal__content p:last-child{margin-bottom:0}

.mvv-modal .mvv-modal__content h4{
  margin: 14px 0 10px 0;
  font-size: 14px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: rgba(255,255,255,.88);
}

.mvv-modal .mvv-modal__content ol{
  margin: 0 0 12px 18px;
  padding: 0;
}

.mvv-modal .mvv-modal__content li{margin:0 0 8px 0}

.pd-modal__panel--wide{
  width: 1100px;
  max-width: 96%;
}

.pd-modal__panel--wide .pd-modal__body{
  padding-bottom: 18px;
}

/* Justificação de texto nas cards de Políticas e processos */
.empresa-justify{
  text-align: justify;
  line-height: 1.65;
  opacity: .78;
}

/* Políticas e processos: tipografia e alinhamentos consistentes */
.empresa-policies .muted{
  text-align: justify;
}

.empresa-policies .card .muted.small{
  opacity: .78;
  font-size: 14px;
  line-height: 1.65;
  text-align: justify;
}

/* =========================================
   RESPONSIVE REFINEMENT PASS — mobile/tablet/cross-browser
   ========================================= */
:root{
  --header-offset: 92px;
}
html{
  -webkit-text-size-adjust:100%;
  scroll-padding-top: var(--header-offset);
}
body{overflow-x:hidden}
iframe{max-width:100%}
:where(button,a,input,select,textarea){touch-action:manipulation}
:where(a,button,.btn,.mobile-toggle,input,select,textarea){-webkit-tap-highlight-color:transparent}
:target{scroll-margin-top:calc(var(--header-offset) + 12px)}
.container{
  width:min(100%, var(--max));
  padding-left:max(20px, env(safe-area-inset-left));
  padding-right:max(20px, env(safe-area-inset-right));
}
.topbar{top:0;padding-top:env(safe-area-inset-top)}
.nav{min-height:76px}
.menu a, .nav-cta .btn, .mobile-toggle{min-height:44px}
.mobile-toggle{
  align-items:center;justify-content:center;min-width:44px;font-weight:700;color:#0B1220;
  box-shadow:0 4px 14px rgba(0,0,0,.08);
}
[data-mobile-panel]{border:1px solid rgba(255,255,255,.12);border-radius:18px;overflow:hidden;backdrop-filter:blur(12px)}
[data-mobile-panel] .p a{display:block;padding:12px 14px;border-radius:12px;color:var(--text);background:rgba(255,255,255,.03)}
[data-mobile-panel] .p a:hover{background:rgba(30,111,144,.12)}
.hero-wrap{padding-top:clamp(24px, 5vw, 56px);padding-bottom:clamp(28px, 6vw, 56px)}
.h1{font-size:clamp(2.2rem, 6vw, 4.6rem);line-height:1.02;text-wrap:balance}
.h2{font-size:clamp(1.6rem, 4vw, 2.4rem)}
.lead{font-size:clamp(1rem, 2.4vw, 1.125rem);max-width:58ch}
.kicker{letter-spacing:.12em}
.hero-grid,.kv,.layout-2col,.footergrid,.formgrid,.products-grid,.cards6,.cards4,.cards3,.darkgrid,.process{align-items:start}
.card, .darkcard, .step, .notice{border-radius:18px}
.table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
.table th,.table td{white-space:nowrap}
.pc-arrow, .hero-media .hero-news-arrow{min-width:44px;min-height:44px}
@supports (height: 100svh){.hero{min-height:min(100svh - var(--header-offset), 920px)}}
@supports not (height: 100svh){.hero{min-height:min(100vh - var(--header-offset), 920px)}}
@media (max-width: 1100px){
  :root{--header-offset:88px}
  .nav{flex-wrap:wrap}
  .menu{gap:10px}
  .nav-cta{margin-left:auto}
}
@media (max-width: 900px){
  :root{--header-offset:84px}
  .topbar{backdrop-filter:saturate(150%) blur(12px)}
  .nav{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:12px}
  .brand{min-width:0}
  .brand-logo{height:36px}
  .menu{display:none}
  .mobile-toggle{display:inline-flex}
  .nav-cta{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
  .nav-cta .btn{padding:10px 12px;font-size:13px}
  .hero-grid, .kv, .layout-2col{grid-template-columns:1fr}
  .hero-media{order:-1;min-height:260px}
  .section{padding:36px 0}
  .section-head{align-items:start; flex-direction:column}
  .footergrid{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width: 680px){
  :root{--header-offset:78px}
  .container{padding-left:max(16px, env(safe-area-inset-left));padding-right:max(16px, env(safe-area-inset-right))}
  .nav{grid-template-columns:1fr auto;grid-template-areas:"brand toggle" "cta cta";min-height:auto;padding:12px 0}
  .brand{grid-area:brand}
  .mobile-toggle{grid-area:toggle}
  .nav-cta{grid-area:cta;width:100%;margin:0;display:grid;grid-template-columns:1fr 1fr}
  .nav-cta .btn{width:100%;min-height:46px;border-radius:14px}
  [data-mobile-panel]{margin-bottom:12px !important}
  .hero{padding:0}
  .hero-wrap{padding-top:18px;padding-bottom:30px}
  .hero-grid{gap:18px}
  .hero-media{min-height:220px;aspect-ratio:16 / 11}
  .hero-media .hero-news-overlay{padding:12px}
  .hero-media .hero-news-legend{font-size:16px;max-width:100%}
  .trustbar{gap:8px}
  .badge{font-size:11px;padding:6px 9px}
  .cards6,.cards4,.cards3,.darkgrid,.products-grid,.process,.formgrid,.footergrid{grid-template-columns:1fr}
  .product-rich table{font-size:14px}
  .pc-viewport::before,.pc-viewport::after{display:none}
  .pc-track{padding:6px 6px 10px}
  .pc-item{width:150px;height:72px}
  .pc-item img{max-width:130px;max-height:38px}
  .footer{padding-bottom:calc(36px + env(safe-area-inset-bottom))}
}
@media (max-width: 420px){
  .brand-logo{height:32px}
  .mobile-toggle{padding:9px 12px}
  .nav-cta{grid-template-columns:1fr}
  .h1{font-size:clamp(2rem, 10vw, 2.5rem)}
  .lead{font-size:1rem}
  .card .p{padding:18px}
  .btn{font-size:13px}
}
@media (hover: none){
  .partners-carousel:hover .pc-arrow{opacity:0;pointer-events:none}
  .pc-item:hover, .cardlink:hover{transform:none}
}


/* Mobile offcanvas navigation */
.mobile-toggle{
  gap:10px;
  padding:10px 14px;
}
.mobile-toggle-label{display:inline-block}
.hamburger{display:inline-flex;flex-direction:column;justify-content:center;gap:4px;width:18px}
.hamburger span{display:block;width:18px;height:2px;border-radius:999px;background:currentColor;transition:transform .25s ease, opacity .2s ease}
.mobile-toggle[aria-expanded="true"] .hamburger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.mobile-toggle[aria-expanded="true"] .hamburger span:nth-child(2){opacity:0}
.mobile-toggle[aria-expanded="true"] .hamburger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mobile-overlay{
  position:fixed;inset:0;background:rgba(4,12,23,.46);backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:79;
}
.mobile-panel{
  position:fixed;top:0;right:0;height:100dvh;width:min(380px, calc(100vw - 24px));
  background:linear-gradient(180deg, #0a2f5a 0%, #123d6b 58%, #1e6f90 100%);
  color:#fff;box-shadow:-18px 0 48px rgba(0,0,0,.26);
  transform:translateX(100%);transition:transform .28s ease;z-index:80;
  padding:calc(16px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) 16px;
}
.mobile-panel[data-open="1"]{transform:translateX(0)}
.mobile-overlay[data-open="1"]{opacity:1;pointer-events:auto}
.mobile-panel-inner{display:flex;flex-direction:column;height:100%;gap:18px}
.mobile-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mobile-panel-title{font-size:14px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.mobile-panel-close{
  width:44px;height:44px;border-radius:14px;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);color:#fff;font-size:28px;line-height:1;cursor:pointer;
}
.mobile-panel-nav{display:grid;gap:8px}
.mobile-panel-nav a,
.mobile-panel-actions .btn{
  width:100%;justify-content:flex-start;min-height:52px;padding:14px 16px;border-radius:16px;
  font-size:16px;font-weight:700;
}
.mobile-panel-nav a{
  color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);
 }
.mobile-panel-nav a:hover{background:rgba(255,255,255,.14);color:#fff}
.mobile-panel-divider{height:1px;background:rgba(255,255,255,.16);margin:4px 0}
.mobile-panel-actions{display:grid;gap:10px;margin-top:auto}
.mobile-panel-actions .btn-outline{border-color:rgba(255,255,255,.28);background:transparent;color:#fff}
.mobile-panel-actions .btn-outline:hover{background:rgba(255,255,255,.1);color:#fff}
.mobile-panel-actions .btn-primary{justify-content:center}
body.menu-open{overflow:hidden}

@media (min-width: 681px){
  .mobile-overlay,.mobile-panel{display:none !important}
}
@media (max-width: 680px){
  .nav{grid-template-columns:1fr auto auto;grid-template-areas:"brand cta toggle";align-items:center}
  .nav-cta{grid-area:cta;width:auto;display:flex;grid-template-columns:none}
  .nav-cta .btn{min-width:150px}
  .mobile-toggle{justify-self:end}
}
@media (max-width: 520px){
  .nav{grid-template-columns:1fr auto;grid-template-areas:"brand toggle" "cta cta"}
  .nav-cta{width:100%;display:grid;grid-template-columns:1fr}
  .nav-cta .btn{width:100%}
  .mobile-panel{width:min(360px, calc(100vw - 12px))}
}

/* Premium mobile + tablet header refresh */
.topbar-premium{
  background:rgba(245,248,251,.78);
  backdrop-filter:saturate(165%) blur(18px);
  -webkit-backdrop-filter:saturate(165%) blur(18px);
  border-bottom:1px solid rgba(12,32,56,.08);
  box-shadow:0 10px 28px rgba(9,28,52,.06);
}
.nav-premium{
  min-height:82px;
  gap:16px;
}
.nav-premium .brand{
  position:relative;
  z-index:2;
}
.nav-premium .brand-logo{
  height:38px;
}
.nav-premium .menu a{
  font-weight:700;
  letter-spacing:.01em;
}
.nav-cta-premium .btn-header-proposal{
  min-width:174px;
  min-height:48px;
  border-radius:16px;
  box-shadow:0 10px 24px rgba(14,113,154,.2);
}
.mobile-toggle-premium{
  display:none;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-width:52px;
  min-height:52px;
  padding:0 16px;
  border-radius:18px;
  border:1px solid rgba(12,32,56,.1);
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(241,246,250,.86));
  color:#133252;
  box-shadow:0 12px 28px rgba(9,28,52,.1);
}
.mobile-toggle-premium:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 30px rgba(9,28,52,.14);
}
.mobile-panel-premium{
  width:min(420px, calc(100vw - 16px));
  background:
    radial-gradient(circle at top right, rgba(43,163,214,.28), transparent 32%),
    linear-gradient(180deg, #081c33 0%, #0d2d4d 52%, #13597b 100%);
  border-left:1px solid rgba(255,255,255,.08);
  box-shadow:-24px 0 56px rgba(0,0,0,.28);
}
.mobile-panel-premium .mobile-panel-inner{
  gap:20px;
}
.mobile-panel-brand{
  display:inline-flex;
  align-items:center;
  padding:10px 14px;
  border-radius:18px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);
}
.mobile-panel-brand img{
  display:block;
  height:30px;
  width:auto;
}
.mobile-panel-close{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.mobile-panel-intro{
  padding:18px;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.mobile-panel-eyebrow{
  margin-bottom:10px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.68);
}
.mobile-panel-intro p{
  margin:0;
  color:#fff;
  font-size:15px;
  line-height:1.55;
}
.mobile-panel-nav{
  gap:10px;
}
.mobile-panel-nav a{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-direction:column;
  padding:16px 18px;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.mobile-panel-nav a span{
  color:#fff;
  font-size:17px;
  font-weight:800;
  line-height:1.15;
}
.mobile-panel-nav a small{
  color:rgba(255,255,255,.72);
  font-size:12px;
  font-weight:600;
  line-height:1.35;
}
.mobile-panel-nav a:hover{
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.08));
  border-color:rgba(255,255,255,.16);
  transform:translateX(-2px);
}
.mobile-panel-actions-premium{
  gap:12px;
}
.mobile-panel-actions-premium .btn{
  min-height:54px;
  border-radius:18px;
  justify-content:center;
}
.mobile-panel-actions-premium .btn-outline{
  background:rgba(255,255,255,.05);
}
@media (max-width: 960px){
  .nav-premium{
    display:grid;
    grid-template-columns:1fr auto auto;
    align-items:center;
  }
  .nav-premium .menu{display:none}
  .mobile-toggle-premium{display:inline-flex}
  .nav-cta-premium{margin-left:auto}
  .nav-cta-premium .btn-header-proposal{
    min-width:158px;
    padding-inline:18px;
  }
}
@media (max-width: 760px){
  .nav-premium{
    grid-template-columns:1fr auto;
    min-height:76px;
  }
  .nav-cta-premium{display:none}
  .mobile-toggle-premium{
    min-width:54px;
    padding:0 14px;
  }
  .mobile-toggle-premium .mobile-toggle-label{display:none}
}
@media (max-width: 520px){
  .topbar-premium{box-shadow:0 8px 22px rgba(9,28,52,.07)}
  .nav-premium{min-height:72px;padding:10px 0}
  .nav-premium .brand-logo{height:34px}
  .mobile-toggle-premium{border-radius:16px}
  .mobile-panel-premium{width:min(390px, calc(100vw - 10px))}
  .mobile-panel-brand img{height:28px}
  .mobile-panel-intro{padding:16px;border-radius:22px}
  .mobile-panel-nav a{padding:15px 16px;border-radius:18px}
  .mobile-panel-nav a span{font-size:16px}
}


/* ===== PREMIUM GLOBAL RESPONSIVE ===== */

.header{
position:sticky;
top:0;
z-index:1000;
background:#fff;
box-shadow:0 4px 20px rgba(0,0,0,.06);
}

.header-inner{
display:flex;
align-items:center;
justify-content:space-between;
padding:14px 20px;
}

.hamburger{
width:42px;
height:42px;
border-radius:10px;
border:1px solid #e6e6e6;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
background:#fff;
}

.hamburger span{
display:block;
width:20px;
height:2px;
background:#0B1220;
margin:4px 0;
}

/* OFFCANVAS MENU */

.offcanvas{
position:fixed;
top:0;
right:-320px;
width:320px;
height:100%;
background:#0A2F5A;
color:#fff;
padding:28px;
transition:right .35s ease;
z-index:2000;
display:flex;
flex-direction:column;
gap:18px;
}

.offcanvas.open{
right:0;
}

.offcanvas a{
color:#fff;
font-size:18px;
font-weight:500;
opacity:.95;
}

.offcanvas .cta{
margin-top:20px;
padding:14px;
border-radius:10px;
background:#1e6f90;
text-align:center;
font-weight:600;
}

.menu-overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,.45);
opacity:0;
pointer-events:none;
transition:opacity .3s;
z-index:1500;
}

.menu-overlay.open{
opacity:1;
pointer-events:auto;
}

/* TABLET */

@media (max-width:1024px){

.row{
flex-direction:column;
}

.grid{
grid-template-columns:1fr;
}

.container{
padding:0 18px;
}

.hero h1{
font-size:32px;
line-height:1.2;
}

}

/* MOBILE */

@media (max-width:640px){

.hero{
padding:60px 0;
}

.hero h1{
font-size:26px;
}

.btn{
width:100%;
}

.cards{
grid-template-columns:1fr;
}

.footer-grid{
grid-template-columns:1fr;
gap:28px;
}

}

/* TOUCH IMPROVEMENTS */

button,a{
min-height:44px;
}