/* ==== Axiforma font (provide files in /fonts) ==== */
@font-face{
  font-family: 'Axiforma';
  src: url('fonts/Axiforma-Regular.woff2') format('woff2'),
       url('fonts/Axiforma-Regular.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Axiforma';
  src: url('fonts/Axiforma-SemiBold.woff2') format('woff2'),
       url('fonts/Axiforma-SemiBold.woff') format('woff');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Axiforma';
  src: url('fonts/Axiforma-Bold.woff2') format('woff2'),
       url('fonts/Axiforma-Bold.woff') format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* Apply Axiforma globally with fallbacks */
html, body{ font-family: 'Axiforma', Inter, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; }


:root{
  --brand-accent: #0F6AFF;
  --bg:#0B1624;
  --bg-2:#0F2033;
  --card:#ffffff;
  --ink:#0B1624;
  --muted:#51607A;
  --brand:#1062ff;
  --brand-2:#0F6AFF;
  --ring: 0 8px 30px rgba(16,98,255,.18);
  --ring-2: 0 6px 16px rgba(16,98,255,.15);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif;color:var(--ink);background:#eef4fb}
a{color:inherit;text-decoration:none}
.button{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1rem;border-radius:.8rem;background:var(--bg);color:#fff;font-weight:600}
.container{max-width:1160px;margin-inline:auto;padding:0 20px}
header{
  position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid #e7edf5;
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px;font-weight:800}
.brand img{height:34px;width:auto}
.nav{display:flex;gap:28px;align-items:center}
.nav a{color:#0f2033;font-weight:600;opacity:.8}
.nav a:hover{opacity:1}
.flags{display:flex;gap:8px}
.flag{border:1px solid #e2e8f0;padding:.35rem .55rem;border-radius:.6rem;background:#fff;display:inline-flex;align-items:center;gap:.4rem;font-size:.85rem;color:#0f2033}
.hero{background:linear-gradient(180deg,#0E1C2E 0%, #0D1930 60%, #0B1527 100%);color:#fff;padding:56px 0 40px}
.hero-grid{display:grid;grid-template-columns:1fr 420px;gap:32px;align-items:center}
.logo-badge{height:52px;width:auto;margin-bottom:16px}
h1{font-size:44px;line-height:1.1;margin:0 0 8px}
.lead{opacity:.8}
.carousel{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
  border-radius:18px;height:220px;padding:18px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
}
.carousel .slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:22px;opacity:0;transition:opacity .5s}
.carousel .slide.active{opacity:1}
.carousel .dots{position:absolute;bottom:10px;left:0;right:0;display:flex;gap:6px;justify-content:center}
.carousel .dots span{width:7px;height:7px;border-radius:999px;background:#ffffff3a}
.carousel .dots span.on{background:#fff}
.section{padding:40px 0}
.kicker{display:inline-block;padding:.35rem .75rem;border-radius:999px;background:#e7f0ff;color:var(--brand);font-weight:700;font-size:.8rem;margin-bottom:12px}
h2{font-size:36px;margin:0 0 6px;text-align:center}
.sub{color:#52607a;text-align:center;margin-bottom:28px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{
  background:#fff;border-radius:16px;padding:18px;border:1px solid #e8eef6;box-shadow: 0 5px 18px rgba(9,31,76,.06);
}
.card 
.card h3{margin:0 0 6px;font-size:16px}
.card p{margin:0;color:#5b6b86;font-size:14px;line-height:1.55}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:10px}
.metric{background:#fff;border:1px solid #e8eef6;border-radius:16px;padding:16px;text-align:center}
.metric b{font-size:20px}
footer{background:#0B1527;color:#d8e7ff;margin-top:40px}
.foot-inner{padding:16px 0}
.foot-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:10px;margin-bottom:10px}
.foot-mini{display:flex;gap:18px;opacity:.8;font-size:13px;align-items:center}
.badge{display:inline-flex;align-items:center;gap:.35rem;background:#0c1e3d;border:1px solid #1b3972;color:#c6ddff;padding:.35rem .6rem;border-radius:.6rem;font-size:.8rem}
@media (max-width:1020px){
  .hero-grid{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .grid{grid-template-columns:1fr}
}


/* Flags refined */
.flags { display:flex; gap:14px; align-items:center; }
.flags a {
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border:1px solid #e6ecf5; border-radius:12px;
  background:#fff; text-decoration:none; font-size:14px; font-weight:500;
  color:#0f2033; white-space:nowrap; line-height:1;
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.flags a:hover { background:#f5f8fc; transform:translateY(-1px); box-shadow:0 4px 14px rgba(17,35,60,.10); }
.flags img { height:16px; width:auto; border-radius:2px; box-shadow:0 0 0 1px #d9e2ef inset; }


/* Brand text split: 'rabbit' (black) + 'tech' (brand blue) */
.brand-text { text-transform: lowercase; font-weight: 900; letter-spacing: .2px; }
.brand-text strong { color: #0f2033; font-weight: 900; }
.brand-text em { color: var(--brand-2); font-style: normal; font-weight: 900; }

/* Nav contact as normal link (remove heavy pill) handled in HTML) */

/* Footer logo size adjustment already inline; ensure container aligns */
footer .brand img { vertical-align: middle; }


/* Hero section updated with extracted blue */
.hero {
  background: #1e293d;
  color: #fff;
}

/* Brand text: rabbit white, tech azul */
.hero .brand-text strong {
  color: #ffffff;
}
.hero .brand-text em {
  color: #00A3FF;
}


/* === Hero atualizado com azul da referência === */
.hero {
  background: linear-gradient(180deg, #152134 0%, #0B121C 100%) !important;
}
/* Título do hero com cores da marca: 'rabbit' branco e 'tech' azul da marca */
.hero-title { margin: 0 0 8px; font-size: 44px; line-height: 1.1; color: #fff; }
.hero-title .rabbit { color: #FFFFFF; font-weight: 800; }
.hero-title .tech { color: #152134; font-weight: 800; }

/* Padronização do azul do 'tech' */
.brand-text em { color: var(--brand-accent) !important; font-weight: 900; font-style: normal; }
.hero-title .tech { color: var(--brand-accent) !important; }


/* Force 'tech' color to the correct bright blue everywhere */
.brand-text em { color: var(--brand-accent) !important; font-weight: 900; font-style: normal; }
.hero-title .tech { color: var(--brand-accent) !important; }


/* Centralizações e badge */
.title.center { text-align:center; }
.sub.center { text-align:center; max-width:900px; margin:0 auto 22px; }
.kicker.badge {
  display:inline-block; margin:0 auto 8px; background:#eaf2ff; color:var(--brand-2);
  padding:6px 12px; border-radius:999px; font-weight:800; font-size:12px; letter-spacing:.16em;
}

/* Grid e cards conforme mock */
.grid-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:12px}
.card{background:#fff;border-radius:16px;padding:18px;box-shadow:0 10px 24px rgba(17,35,60,.08),0 2px 8px rgba(17,35,60,.06);border:1px solid #e9eef7}
.card h3{margin:6px 0 8px;font-size:16px}
.card p{margin:0 0 8px;color:#4b5870;font-size:14px;line-height:1.45}



/* Link 'Ver detalhes' */
.link{color:var(--brand-2);font-weight:700;text-decoration:none}
.link:hover{text-decoration:underline}

/* Métricas em pílulas */
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:16px}
.metric{background:#fff;border-radius:14px;box-shadow:0 10px 24px rgba(17,35,60,.08),0 2px 8px rgba(17,35,60,.06);padding:16px;text-align:center;border:1px solid #e9eef7}
.metric strong{display:block;font-size:18px}
.metric small{color:#4b5870}
@media (max-width:980px){.grid-cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid-cards{grid-template-columns:1fr}.metrics{grid-template-columns:1fr}}

/* ICON MOCK */





/* === Circular icon style (as requested) === */
.icon{
  height:48px;
  width:48px;
  display:grid;
  place-items:center;
  border-radius:50%; /* círculo perfeito */
  background: radial-gradient(closest-side, #ffffff 60%, #eef4ff 100%);
  box-shadow: 0 8px 24px rgba(17,35,60,.10), 0 2px 6px rgba(17,35,60,.08);
  border: 1px solid #e6ecf5;
}
.icon svg{
  height:24px;
  width:24px;
  stroke: var(--brand-2);
  fill: none;
  stroke-width: 2.4;
}


/* === Modern elegant icon ring === */
:root{
  --brand-accent-soft: #4FA1FF;
  --icon-ring-bg: #EAF2FF;
}

.icon{
  position: relative;
  height:52px;
  width:52px;
  display:grid;
  place-items:center;
  border-radius:50%;
  /* layered background: inner white + conic brand ring */
  background:
    radial-gradient(circle at 50% 50%, #ffffff 63%, rgba(255,255,255,0) 64%),
    conic-gradient(var(--brand-2) 0 285deg, var(--icon-ring-bg) 285deg 360deg);
  box-shadow:
    0 10px 28px rgba(17,35,60,.12),
    0 2px 8px rgba(17,35,60,.10),
    inset 0 0 0 1px #e6ecf5;
  transition: transform .2s ease, box-shadow .2s ease, background .25s ease;
}
.icon::after{
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  box-shadow: inset 0 8px 18px rgba(17,35,60,.06);
  pointer-events: none;
}
.icon svg{
  height:24px;
  width:24px;
  stroke: var(--brand-2);
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Hover polish */
.card:hover .icon{
  transform: translateY(-1px);
  box-shadow:
    0 16px 36px rgba(17,35,60,.16),
    0 4px 12px rgba(17,35,60,.12),
    inset 0 0 0 1px #e3ebf7;
  background:
    radial-gradient(circle at 50% 50%, #ffffff 63%, rgba(255,255,255,0) 64%),
    conic-gradient(var(--brand-accent-soft) 0 300deg, var(--icon-ring-bg) 300deg 360deg);
}

/* Card lift + smoother edges */
.card{
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  border: 1px solid #e9eef7;
  border-radius: 16px;
}
.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(17,35,60,.14), 0 6px 14px rgba(17,35,60,.12);
  border-color: #e4ebf8;
}

/* ICON MODERN STYLE */
.icon svg{
  height:24px; width:24px;
  stroke: var(--brand-2);
  fill:none;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}


/* ==== Brand palette from guide ==== */
:root{
  --brand-bg-dark: #001440;   /* Azul Meia-Noite */
  --brand-2: #0054FF;         /* Azul Vibrante */
  --ink: #0f2033;
}
.hero{ background: linear-gradient(180deg, #001440 0%, #0B121C 100%) !important; }
.hero-title .tech{ color: var(--brand-2) !important; }


/* === Axiforma hero sizing & subtitle === */
.hero-title { 
  font-size: 3rem; /* ~48px */
  letter-spacing: -0.5px;
  font-weight: 700;
}
.hero-sub {
  color: rgba(255,255,255,.85);
  font-size: 1.25rem; /* 20px */
  line-height: 1.4;
  margin-top: .5rem;
  font-weight: 400;
}
@media (max-width: 1024px){
  .hero-title{ font-size: 2.5rem; }
}
@media (max-width: 640px){
  .hero-title{ font-size: 2rem; }
  .hero-sub{ font-size: 1.05rem; }
}


/* === Hero logo adjustments === */
.hero-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 3rem;
  letter-spacing: -0.5px;
}

.hero-title img,
.hero-logo {
  width: 90px; /* larger logo */
  height: auto;
  transform: translateY(5px);
}

@media (max-width: 768px) {
  .hero-title { font-size: 2.4rem; }
  .hero-title img,
  .hero-logo { width: 60px; transform: translateY(3px); }
}


/* ===== Elegance pass (non-breaking overrides) ===== */
:root{
  --radius: 14px;
  --radius-lg: 18px;
  --surface: #ffffff;
  --surface-2: #f6f9ff;
  --border: #e8edf5;
  --ink-soft: #385072;
  --elev-1: 0 6px 16px rgba(17,35,60,.08);
  --elev-2: 0 14px 36px rgba(17,35,60,.12);
}

/* Header: glassy, lighter border */
header{
  background: rgba(255,255,255,.9);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 0 0 1px rgba(255,255,255,.3), 0 8px 18px rgba(17,35,60,.04);
}
.header-inner{ padding: 16px 0; }
.nav a{
  padding: 8px 10px;
  border-radius: 10px;
  transition: background .2s ease, opacity .2s ease, transform .2s ease;
}
.nav a:hover{ background: rgba(60,90,130,.08); opacity: 1; transform: translateY(-1px); }

/* Flags: more elegant pills */
.flags{ gap: 10px; }
.flags a, .flag{
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: var(--elev-1);
  padding: 6px 10px;
}
.flags .active, .flag.active{
  background: var(--surface-2);
  border-color: #dbe7ff;
  box-shadow: 0 10px 26px rgba(124,58,237,.14);
}

/* Hero: soften gradient, typography rhythm */
.hero{
  background: linear-gradient(180deg,#2f2050 0%, #221a3f 55%, #1b1636 100%);
  color:#fff;
  padding: 60px 0 48px;
}
.hero-title{ letter-spacing: -0.02em; }
.lead{ font-size: 1.02rem; opacity: .92; }

/* Sections spacing */
.section{ padding: 52px 0; }
h2{ font-size: 34px; letter-spacing: -0.01em; }
.sub{ color: var(--ink-soft); max-width: 920px; margin: 0 auto 30px; }

/* Cards */
.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--elev-1);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{
  transform: translateY(-3px);
  box-shadow: var(--elev-2);
  border-color: #e4ebf8;
}
.card p{ color: #4b5d7a; }

/* Icon style (thin, airy) */
.icon{
  background: linear-gradient(180deg,#ffffff, #f3f6ff);
  border: 1px solid #e7edfb;
  border-radius: 14px;
  box-shadow: 0 6px 14px rgba(17,35,60,.08) inset;
  padding: 10px;
}

/* Metrics pills */
.metrics{ gap: 18px; }
.metric{
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: var(--elev-1);
}
.metric strong{ font-size: 1.06rem; }
.metric small{ color: var(--ink-soft); }

/* CTA & large blocks */
.cta, .panel{
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--elev-1);
}

/* Footer align tweaks */
footer{ border-top: 1px solid var(--border); }


/* ===== Company timeline (centered) ===== */
.timeline{
  position: relative;
  max-width: 900px;
  margin: 0 auto 6px;
  padding: 6px 0;
}
.timeline::before{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:0; bottom:0;
  width:2px;
  background:#e7edf7;
}
.timeline-item{
  position:relative;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:24px;
  align-items:start;
  margin: 22px 0;
}
.timeline-bullet{
  position:absolute;
  left:50%; transform: translate(-50%, 6px);
  width:10px;height:10px;border-radius:999px;
  background: var(--brand);
  outline:4px solid #fff;
  box-shadow: var(--elev-1);
}
.timeline-year{
  justify-self:end;
  align-self:start;
  color: var(--brand);
  background:#fff;
  border:1px solid var(--border);
  box-shadow: var(--elev-1);
  padding:6px 12px;
  border-radius:12px;
  font-weight:700;
}
.timeline-card{
  background:#fff;
  border:1px solid var(--border);
  box-shadow: var(--elev-1);
  border-radius:14px;
  padding:14px 16px;
}
.timeline-card p{ margin:.3rem 0 0; color:#465a79; }
@media (max-width: 820px){
  .timeline{ max-width: 100%; }
  .timeline::before{ left: 24px; transform: none; }
  .timeline-bullet{ left:24px; transform: translate(-50%, 8px); }
  .timeline-item{ grid-template-columns: 1fr; }
  .timeline-year{ justify-self: start; }
  .timeline-card{ margin-left: 18px; }
}

/* Centering tweaks */
.section h2 { text-align: center; }
.section .sub.center, .sub { text-align: center; }


/* ===== Timeline alternating (escadinha) ===== */
.timeline-item{ grid-template-columns: 1fr 1fr; }
.timeline-item:nth-child(odd) .timeline-year{ grid-column:1; justify-self:end; }
.timeline-item:nth-child(odd) .timeline-card{ grid-column:2; margin-left:18px; }
.timeline-item:nth-child(even) .timeline-year{ grid-column:2; justify-self:start; }
.timeline-item:nth-child(even) .timeline-card{ grid-column:1; margin-right:18px; }

@media (max-width: 820px){
  /* On mobile: stack items to the left, no alternating margins */
  .timeline-item{ grid-template-columns: 1fr; }
  .timeline-item .timeline-year{ grid-column:1; justify-self:start; }
  .timeline-item .timeline-card{ grid-column:1; margin: 0 0 0 18px; }
}


/* === FIX: center 3 service cards; 4 metrics in one row === */
.grid-cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(280px, 1fr));
  gap: 26px;
  justify-content: center;      /* centers the grid block if there's extra space */
  align-items: stretch;
}
.metrics{
  display:grid;
  grid-template-columns: repeat(4, minmax(200px, 1fr));
  gap: 22px;
}
.metric{ text-align: center; }

@media (max-width: 1024px){
  .grid-cards{ grid-template-columns: repeat(2, minmax(260px, 1fr)); }
}
@media (max-width: 980px){
  .metrics{ grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}
@media (max-width: 640px){
  .grid-cards{ grid-template-columns: 1fr; }
  .metrics{ grid-template-columns: 1fr; }
}



/* Partners badges (Sobre) */
.partners-badges{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem .75rem;
  margin-top:.5rem;
}
.partners-badges .partners-label{
  font-weight:600;
  color:#2b3a55;
  margin-right:.25rem;
}
.partner-badge{
  display:inline-block;
  padding:.35rem .6rem;
  border-radius:999px;
  background:#f2f6ff;
  border:1px solid #e0e8ff;
  font-size:.9rem;
  line-height:1;
  color:#2b3a55;
  box-shadow:0 1px 0 rgba(15,23,42,.04);
}
@media (prefers-color-scheme: dark){
  .partner-badge{
    background:#1e293b;
    border-color:#334155;
    color:#cfe4ff;
  }
  .partners-badges .partners-label{ color:#cfe4ff; }
}

.muted{opacity:.8;font-size:.95rem}

/* Cases mini grid */
.grid-cases{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:1rem;
}
.grid-cases .case{
  border:1px solid rgba(15,23,42,.08);
  border-radius:16px;
  padding:14px 16px;
  background:#fff;
  box-shadow:0 1px 2px rgba(15,23,42,.06);
}
.grid-cases .case h3{
  font-size:1rem;
  margin:0 0 .25rem;
}
.grid-cases .case p{
  margin:.35rem 0;
}
.grid-cases .case .tags{
  display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.25rem;
}
.grid-cases .case .tag{
  font-size:.75rem; padding:.2rem .45rem; border-radius:999px;
  background:#f3f4f6; border:1px solid #e5e7eb;
}
@media (prefers-color-scheme: dark){
  .grid-cases .case{ background:#0b1220; border-color:#1f2a44; box-shadow:none; }
  .grid-cases .case .tag{ background:#0f172a; border-color:#1e293b; color:#cfe4ff; }
}


/* Cases normalized */
.card.card-compact h3{ font-size:1rem; margin:0 0 .4rem; }
.card.card-compact p{ margin:.35rem 0; }
.tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.25rem; }
.tag{ font-size:.75rem; padding:.2rem .45rem; border-radius:999px; background:#f3f4f6; border:1px solid #e5e7eb; }
@media (prefers-color-scheme: dark){
  .tag{ background:#0f172a; border-color:#1e293b; color:#cfe4ff; }
}


/* Hero grid for Soluções page */
.hero .hero-grid{
  display:grid;
  grid-template-columns:minmax(280px, 1fr) minmax(220px, 420px);
  align-items:center;
  gap:1.5rem;
}
.hero .hero-aside{
  display:flex; align-items:center; justify-content:flex-end;
}
.hero .logo-badge{
  max-width:340px; width:100%; height:auto; opacity:.95;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.25));
}
@media (max-width: 900px){
  .hero .hero-grid{ grid-template-columns:1fr; }
  .hero .hero-aside{ justify-content:center; margin-top:1rem; }
  .hero .logo-badge{ max-width:220px; }
}


/* Center the two contact cards grid */
.contact-center-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(280px, 540px));
  gap: 1.25rem;
  justify-content: center; /* centers the columns horizontally */
  align-items: stretch;
}
@media (max-width: 980px){
  .contact-center-grid{
    grid-template-columns: minmax(280px, 1fr); /* stack on small screens */
    justify-content: center;
  }
}