:root{
  --bg:#070B14;
  --text:rgba(255,255,255,.90);
  --muted:rgba(255,255,255,.66);
  --line:rgba(255,255,255,.12);

  --blue:#1F6FEB;
  --blue2:#00B3FF;
  --ink:#061226;

  --shadow: 0 18px 55px rgba(0,0,0,.45);
  --radius:18px;
  --radius2:26px;
  --container:1120px;
  --header-offset: 30px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top: var(--header-offset);}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden;
}
#top{ position:absolute; top:0; }
a{ color:inherit; text-decoration:none; }
.container{ width:min(var(--container), calc(100% - 40px)); margin:0 auto; }

/* Fundo água */
.bg{
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background-image: url("/static/img/Fundo_Agua_tile.png");
  background-repeat: repeat;
  background-size: 520px 520px;
  background-position: 0 0;
  animation: waterDrift 15s ease-in-out infinite alternate;
}
@keyframes waterDrift{
  from { background-position: 0 0; }
  to   { background-position: 180px 120px; }
}
.bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(60% 60% at 20% 15%, rgba(31,111,235,.18), transparent 55%),
    linear-gradient(to bottom, rgba(7,11,20,.72), rgba(7,11,20,.90));
  pointer-events:none;
}

/* Navbar */
.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(14px);
  border-bottom:1px solid transparent;
  transition: background-color .25s ease, border-color .25s ease;
}
.nav.is-scrolled{
  background: rgba(7,11,20,.58);
  border-color: var(--line);
}
.nav__inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 14px 0;
}
.brand{ display:flex; align-items:center; gap:10px; font-weight:200; letter-spacing:.2px; }
.brand__name {font-size: clamp(16px, 3.5vw, 20px); white-space: nowrap; }

/* Botão da marca */
.brand--btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:14px;
  background: rgb(27, 41, 78);
  border: 1px solid rgba(0,0,0,.08);
  color: white;
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  height:60px;
}
.brand__logo{
  width:80px; height:80px;
  object-fit:contain;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.12));
}

.brand--btn:hover{ transform: translateY(-1px); box-shadow: 0 14px 34px rgba(0,0,0,.16); }
.brand--btn:active{ transform: translateY(0) scale(.99); }

.menu{ display:flex; align-items:center; gap:18px; }
.menu a{ color:var(--muted); font-weight:600; font-size:13px; }
.menu a:hover{ color:var(--text); }

.burger{
  width:44px;
  height:44px;
  border-radius:12px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  cursor:pointer;
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;          
  padding:0;         
}
.burger span{
  display:block;
  width:18px;         /* comprimento da linha */
  height:2px;         /* espessura */
  background: rgba(255,255,255,.82);
  border-radius:999px; /* deixa levemente arredondado */
}

.mobile {
  padding: 12px 12px 16px; /* menos margem lateral */
  border-top: 1px solid var(--line);
  background: rgba(7,11,20,.65);
  backdrop-filter: blur(14px);
  display: grid;
  gap: 8px; /* gap menor */
  width: 100%; max-width: none;
}

/* BOTÕES MOBILE AJUSTADOS */
.mobile a {
  width: 100%;                 /* ocupa toda a largura */
  padding: 7px 10px;           /* mais fino (era 12px 12px) */
  border-radius: 10px;         /* pode ser menor também */
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  font-size: 14px;             /* opcional: reduz um pouco a fonte */
  text-align: left;         
  display: block;              /* garante largura total */
}

.mobile[hidden]{ display:none !important; }
.mobile:not([hidden]){ display:grid; }

/* Botões */
.btn{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  padding: 12px 16px;
  border-radius: 14px;
  font-weight:800;
  color: var(--ink);
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(90deg, rgba(31,111,235,.98), rgba(0,179,255,.85));
  box-shadow: 0 16px 40px rgba(31,111,235,.16);
  transition: transform .2s ease, filter .2s ease;
}
.btn:hover{ transform: translateY(-2px); filter: brightness(1.05); }
.btn:active{ transform: translateY(0) scale(.99); }
.btn--ghost{
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  box-shadow:none;
  border-color: rgba(255,255,255,.14);
}
.btn--sm{ padding:10px 12px; border-radius: 12px; font-size:13px; }
.btn--full{ width:100%; }

/* HERO */
.hero{ padding: 78px 0 42px; }
.hero__grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:28px;
  align-items:center;
}
.pill{
  display:inline-flex; gap:10px; align-items:center;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  font-size:13px;
}
.hero__title{
  margin:16px 0 12px;
  font-size: clamp(32px, 4.3vw, 44px);
  letter-spacing:-.02em;
  line-height:1.06;
}
.accent{
  background: linear-gradient(90deg, var(--blue), var(--blue2));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}
.hero__subtitle{
  font-size:14px;
  margin:0 0 14px;
  color: var(--muted);
  line-height:1.7;
}
.hero__cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top: 8px; }

.hero__stats{
  margin-top: 22px;
  display:grid;
  grid-template-columns: 2fr 2fr 3fr;
  gap:12px;
}
.stat{
  padding: 14px;
  border-radius: 16px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
}
.stat__n{ display:block; font-weight:900; font-size: 20px; margin-bottom: 6px; }
.stat__t{ color: var(--muted); font-size: 13px; line-height: 1.65; }

/* Glass */
.hero__visual{ position:relative; }
.glass{
  border-radius: var(--radius2);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.glass__top{
  display:flex; align-items:center; gap:10px;
  padding: 14px 16px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.glass__title{ margin-right:auto; color: rgba(255,255,255,.72); font-weight:600; font-size: 15px; }
.dot{ width:10px; height:10px; border-radius:50%; opacity:.9; }
.dot--a{ background:#2EA8FF; }
.dot--b{ background:#1F6FEB; }
.dot--c{ background:#00B3FF; }
.kpis{ padding: 18px; display:grid; gap:14px; }
.kpi__row{ display:flex; justify-content:space-between; font-size:13px; color: var(--muted); }
.kpi__row--split{ align-items:center; }
.kpi__value{ color: var(--text); font-weight:700; }
.bar{
  height:10px; border-radius:999px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  overflow:hidden;
}
.bar span{
  display:block; height:100%; width: var(--w);
  border-radius:999px;
  background: linear-gradient(90deg, rgba(31,111,235,.98), rgba(0,179,255,.85));
}
.shine{
  position:absolute; inset:-40%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.20), transparent 45%);
  transform: rotate(18deg);
  opacity:.55;
  animation: shine 6s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes shine{
  from{ transform: translate3d(-3%, -2%, 0) rotate(18deg); }
  to{ transform: translate3d(3%, 2%, 0) rotate(18deg); }
}

/* ============================
   SEÇÕES: AGORA DIFERENTES DE VERDADE
   ============================ */

.section{
  padding: 74px 0;
  position:relative;
}

/* painel interno: é aqui que a “cara” muda */
.section__inner{
  position:relative;
  padding: 28px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 16px 45px rgba(0,0,0,.25);
  overflow:hidden;
}

/* textura sutil por cima do painel */
.section__inner::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(60% 60% at 10% 0%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(50% 50% at 90% 10%, rgba(255,255,255,.04), transparent 55%);
  pointer-events:none;
  opacity:.9;
}

/* barra de acento (topo do painel) */
.section__inner::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), transparent 70%);
  opacity: .95;
  pointer-events:none;
}

/* Cabeçalho com acento */
.section__head{ margin-bottom: 22px; position:relative; }
.section__head h2{
  margin:0 0 8px;
  font-size:28px;
  letter-spacing:-.01em;
  display:flex;
  align-items:center;
  gap:10px;
}
.h-accent{
  width:10px;
  height:22px;
  border-radius:999px;
  background: linear-gradient(180deg, var(--accent), rgba(255,255,255,.12));
  box-shadow: 0 0 0 3px rgba(255,255,255,.03);
}
.section__head p{ margin:0; color: var(--muted); line-height:1.7; }

/* Cada seção define seu --accent e um fundo próprio */
.section--solucoes { --accent: #00B3FF; }
.section--portfolio{ --accent: #a01feb; }
.section--diferenciais{ --accent: #f65c9c; }
.section--analise{ --accent: #F59E0B; }
.section--parceiros{ --accent: #10B981; }
.section--contato{ --accent: #3B82F6; }

.section--solucoes .section__inner{
  background: linear-gradient(180deg, rgba(0,179,255,.10), rgba(255,255,255,.03));
}
.section--portfolio .section__inner{
  background: linear-gradient(180deg, rgba(31,111,235,.11), rgba(255,255,255,.03));
}
.section--diferenciais .section__inner{
  background: linear-gradient(180deg, rgba(139,92,246,.11), rgba(255,255,255,.03));
}
.section--analise .section__inner{
  background: linear-gradient(180deg, rgba(245,158,11,.10), rgba(255,255,255,.03));
}
.section--parceiros .section__inner{
  background: linear-gradient(180deg, rgba(16,185,129,.10), rgba(255,255,255,.03));
}
.section--contato .section__inner{
  background: linear-gradient(180deg, rgba(59,130,246,.10), rgba(255,255,255,.03));
}

/* Grids / Cards */
.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}

/* Grids / Cards */
.gridA{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:14px;
}

/* Cards herdam a cor da seção */
.card{
  padding: 18px;
  border-radius: var(--radius);
  background: rgba(0,0,0,.14);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
  transition: transform .25s ease, border-color .25s ease, background-color .25s ease;
  position:relative;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at 20% 10%, color-mix(in oklab, var(--accent) 32%, transparent), transparent 45%),
    radial-gradient(circle at 70% 80%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 45%);
  opacity:.9;
}
.card > *{ position:relative; }
.card:hover{
  transform: translateY(-6px);
  border-color: color-mix(in oklab, var(--accent) 45%, rgba(255,255,255,.18));
  background: rgba(255,255,255,.04);
}
.card__icon{
  width: 38px; height: 38px;
  border-radius: 12px;
  display:grid; place-items:center;
  background: color-mix(in oklab, var(--accent) 16%, rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.12);
  margin-bottom: 10px;
  font-size: 18px;
}
.card h3{ margin:0 0 8px; font-size:18px; color: white}
.card p{ margin:0 0 10px; color: var(--muted); line-height:1.7; }

.list{
  margin: 10px 0 0;
  padding-left: 18px;
  color: rgba(255,255,255,.75);
  line-height: 1.7;
  font-size: 13px;
}
.list--compact{ margin-top: 8px; }
.list--compact li{ margin: 4px 0; }

/* Callout */
.callout{
  margin-top: 16px;
  padding: 18px;
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
}
.callout__copy h3{ margin: 0 0 6px; font-size: 18px; }
.callout__copy p{ margin: 0; color: var(--muted); line-height: 1.6; }

/* Portfólio */
.portfolio{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
.work{
  padding:18px;
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  transition: transform .25s ease, border-color .25s ease, background-color .25s ease;
  position:relative;
  overflow:hidden;
}
.work::before{
  content:"";
  position:absolute;
  inset:-35%;
  background: radial-gradient(circle at 20% 10%, color-mix(in oklab, var(--accent) 26%, transparent), transparent 55%);
  opacity:.9;
}
.work > *{ position:relative; }
.work:hover{
  transform: translateY(-6px);
  border-color: color-mix(in oklab, var(--accent) 45%, rgba(255,255,255,.18));
  background: rgba(255,255,255,.04);
}
.work__tag{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: color-mix(in oklab, var(--accent) 16%, rgba(255,255,255,.02));
  color: rgba(255,255,255,.84);
  font-size: 12px;
  font-weight:800;
}
.work h3{ margin:10px 0 8px; }
.work p{ margin:0; color: var(--muted); line-height:1.7; }

.metrics{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.metric{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
}
.metric__k{ display:block; color: rgba(255,255,255,.70); font-size: 12px; font-weight: 800; }
.metric__v{ display:block; margin-top: 4px; font-size: 13px; font-weight: 900; }

/* Comparativo */
.compare{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.compare__card{
  padding: 18px;
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
}
.compare__card--highlight{
  border-color: color-mix(in oklab, var(--accent) 55%, rgba(255,255,255,.16));
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 14%, rgba(255,255,255,.03)), rgba(0,0,0,.12));
  position:relative;
}
.badgeTop{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--accent) 18%, rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.12);
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 10px;
}
.bar{
  height:10px; border-radius:999px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  overflow:hidden;
}
.bar span{
  display:block; height:100%; width: var(--w);
  border-radius:999px;
  background: linear-gradient(90deg, color-mix(in oklab, var(--accent) 85%, #ffffff), var(--accent));
}
.bar--thin{ height:8px; }
.score__label{ display:block; margin: 12px 0 8px; color: rgba(255,255,255,.74); font-size: 12px; font-weight: 800; }

/* Logos */
.logos{ display:flex; gap:10px; flex-wrap:wrap; }
.logo{
  padding: 10px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  font-weight:800;
  font-size: 13px;
  color: rgba(255,255,255,.82);
}

/* Contato */
.contact{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:14px;
  align-items:start;
}
.badges{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.badge{
  padding: 8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.80);
  font-size: 12px;
  font-weight:700;
}
.form{
  padding:18px;
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.14);
  box-shadow: var(--shadow);
  display:grid;
  gap:12px;
}
label{ display:grid; gap:8px; color: var(--muted); font-size: 13px; }
input, textarea{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: var(--text);
  outline:none;
}
input:focus, textarea:focus{
  border-color: color-mix(in oklab, var(--accent) 60%, rgba(255,255,255,.10));
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 20%, transparent);
}
.tiny{ margin:0; color: rgba(255,255,255,.45); font-size: 12px; }

/* Footer */
.bg-blue-dark{ background-color:#031833 !important; }
.footer__inner{
  display:flex;
  justify-content:space-between;
  gap:14px;
  color: rgba(255,255,255,.72);
  font-size: 13px;
}

/* Base reveal */
.reveal{ will-change: transform, opacity, filter; }

/* Responsivo */
@media (max-width: 980px){
  .hero__grid{ grid-template-columns: 1fr; }
  .grid, .gridA, .portfolio, .compare{ grid-template-columns: 1fr; }
  .contact{ grid-template-columns: 1fr; }
  .hero__stats{ grid-template-columns: 1fr; }
  .menu{ display:none; }
  .burger{ display:flex; }
  .callout{ flex-direction: column; align-items: flex-start; }
  .section__inner{ padding: 18px; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation: none !important; transition: none !important; }
}

@media (max-width: 600px) {
  .brand__name {white-space: normal; text-align: center; }
  .brand__divider {display: none;}
  .brand__subtitle {display: block; font-size: 12px; }
}

/* =========================
   TABELA - ANÁLISE COMPETITIVA
   ========================= */

.tableWrap{
  margin-top: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  overflow: hidden;
  background: rgba(0,0,0,.14);
  box-shadow: 0 14px 42px rgba(0,0,0,.22);

  /* permite rolagem horizontal suave se necessário (desktop ok) */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.compTable{
  width: 100%;
  border-collapse: collapse;
  min-width: 820px; /* garante boa leitura em telas médias */
}

.compTable thead th{
  text-align: left;
  font-size: 12.5px;
  letter-spacing: .02em;
  text-transform: none;
  color: rgba(255,255,255,.86);
  padding: 14px 14px;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.compTable tbody th{
  width: 180px;
  font-weight: 900;
  color: rgba(255,255,255,.88);
  padding: 14px 14px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  vertical-align: top;
}

.compTable td{
  padding: 14px 14px;
  color: rgba(255,255,255,.78);
  line-height: 1.65;
  border-bottom: 1px solid rgba(255,255,255,.10);
  vertical-align: top;
}

/* linhas alternadas bem discretas (melhora leitura) */
.compTable tbody tr:nth-child(even) td,
.compTable tbody tr:nth-child(even) th{
  background: rgba(255,255,255,.018);
}

/* Destaque da coluna SaneGroup */
.compTable .is-highlight{
  position: relative;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--accent) 18%, rgba(255,255,255,.04)),
    rgba(255,255,255,.03)
  );
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.compTable .is-highlightCell{
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--accent) 14%, rgba(0,0,0,.10)),
    rgba(0,0,0,.10)
  );
  border-left: 1px solid color-mix(in oklab, var(--accent) 40%, rgba(255,255,255,.12));
}

.compTable .is-highlightCell strong{
  color: rgba(255,255,255,.92);
}

/* Nota abaixo da tabela */
.tableNote{
  margin: 12px 2px 0;
  color: rgba(255,255,255,.55);
  font-size: 12px;
}

/* =========================
   MOBILE: vira "cards" (melhor que rolar tabela)
/* ========================= */
@media (max-width: 860px){
  .compTable{
    min-width: 0;
    border-collapse: separate;
    border-spacing: 0;
  }

  /* Esconde o cabeçalho no mobile (usaremos os rótulos nas células) */
  .compTable thead{
    display: none;
  }

  /* Empilha a tabela como "cards" por linha */
  .compTable, .compTable tbody, .compTable tr{
    display: block;
    width: 100%;
  }

  .compTable tr{
    padding: 14px;
    border-bottom: 1px solid rgba(255,255,255,.10);
    border-radius: .5rem;                /* opcional: dá um acabamento melhor */
    background: rgba(0,0,0,0.08);        /* ajuste ao seu tema */
  }

  /* A primeira célula da linha (Atributo) vira o título do card */
  .compTable tbody th{
    display: block;
    width: 100%;
    padding: 0 0 10px;
    border: 0;
    background: transparent;
    font-size: 14px;
    font-weight: 700;
  }

  /* Demais células: grid com 2 colunas (label | valor) */
  .compTable td{
    display: grid;
    grid-template-columns: 120px 1fr;    /* 120px para o rótulo, resto para o valor */
    gap: 10px;
    padding: 10px 0;
    border: 0;
    background: transparent;
    font-size: 13px;
    white-space: normal;
    word-break: break-word;
  }

  /* Rótulos por coluna no mobile (vêm de data-label) */
  .compTable td::before{
    content: attr(data-label);           /* <-- usa o texto vindo do <thead> */
    font-weight: 900;
    color: rgba(255,255,255,.70);
  }

  /* Célula em destaque não precisa de bordas/indentação extras no mobile */
  .compTable .is-highlightCell{
    border-left: 0;
    padding-left: 0;
    background: transparent;
  }

  /* Sem rolagem horizontal no mobile (empilhado) */
  .tableWrap{
    overflow: hidden;
  }
}

.card, .work, .glass, .section__inner {
  contain: layout paint;
}


.lang-switch {
    width: 100%;
    text-align: right;
    margin-right: 25px;     /* margem do lado direito */
    font-size: 0.95rem;

}

.lang-switch a {
    text-decoration: none;
    color: white;           /* ajuste se quiser outra cor */
    font-weight: 500;
}


.lang-switch a:hover {
    opacity: 0.7;
}

.flag {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-right: 4px;
    border-radius: 2px;
}