:root{
  --bg: #f7f9fc;
  --ink: #0b2a4a;
  --ink-2:#193759;
  --brand:#004aad;          /* azul do tema */
  --brand-2:#57a6ff;        /* azul claro */
  --accent:#ffcc00;         /* dourado do tema */
  --muted:#91a2b3;
  --white:#ffffff;
  --shadow: 0 6px 14px rgba(0,0,0,.12);
  --radius: 16px;
}

/* Reset suave e acessível */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial, 'Noto Sans', 'Apple Color Emoji','Segoe UI Emoji', 'Segoe UI Symbol';
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{max-width:100%;display:block}
a{color:inherit}
.container{width:min(1100px,92%);margin:0 auto}

.section{padding:56px 0}
.h2{font-size:clamp(1.4rem, 1.1rem + 1.5vw, 2rem);margin:0 0 20px;color:var(--ink)}
.badge{
  display:inline-block;background:var(--accent);color:var(--ink);
  font-weight:700;padding:6px 12px;border-radius:999px;font-size:.82rem
}

/* ====== HEADER / HERO ====== */
/* Dica: o HTML já tem estilos inline para .hero-header; aqui cuidamos do comportamento e alinhamentos */
.hero-header{
  position:relative;
}
.hero-header.is-stuck{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:rgba(11,42,74,.92);
  backdrop-filter:saturate(120%) blur(6px);
  box-shadow:0 8px 14px rgba(0,0,0,.18);
}
.logo{display:block;margin-inline:auto;height:250px;transition:transform .3s ease}
.logo:hover{transform:scale(1.03)}

nav{margin-top:10px}
.menu{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center
}
.menu li a{
  display:inline-block;text-decoration:none;color:#fff;
  background:rgba(0,74,173,.9);
  padding:10px 20px;border-radius:20px;font-weight:600;letter-spacing:.4px;
  box-shadow:0 3px 6px rgba(0,0,0,.15);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease
}
.menu li a:hover{background:var(--brand-2);color:var(--ink);transform:translateY(-2px);box-shadow:0 6px 12px rgba(0,0,0,.22)}
.menu li a:active{transform:scale(.97)}

/* ====== BUTTONS ====== */
.button{
  display:inline-block;border:2px solid var(--brand);padding:10px 18px;border-radius:999px;
  text-decoration:none;font-weight:700;transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease
}
.button:hover{transform:translateY(-2px)}
.button.primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.button.primary:hover{background:var(--brand-2);border-color:var(--brand-2);color:#0b2a4a}

/* ====== CARDS ====== */
.grid.cards{
  display:grid;gap:18px;
  grid-template-columns:repeat(3, minmax(0,1fr));
}
@media (max-width: 900px){
  .grid.cards{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width: 560px){
  .grid.cards{grid-template-columns:1fr}
}

.card{
  background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);
  padding:18px 18px 20px;border:1px solid rgba(25,55,89,.08);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease
}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 26px rgba(0,0,0,.12);border-color:rgba(25,55,89,.16)}
.card h3{margin:0 0 8px;font-size:1.05rem;color:var(--ink-2)}
.card p{margin:0;color:#2a4365}

/* ====== HERO SECTION ====== */
.hero .container{display:grid;gap:14px;justify-items:start}
.hero h1{
  font-size:clamp(1.3rem, 1rem + 1.6vw, 2.1rem);
  color:#fff;margin:10px 0 8px;line-height:1.25
}
.hero p{color:#e6f0ff;margin:0 0 10px;max-width:68ch}
.hero .cta{display:flex;gap:10px;flex-wrap:wrap}

/* ====== PLAYER CARD (mantém o visual atual) ====== */
#player .card{display:grid;place-items:center;aspect-ratio:16/9;overflow:hidden}

/* ====== FOOTER ====== */
footer.footer{
  background:linear-gradient(180deg,#0b2a4a,#021528);
  border-top:3px solid var(--accent);
  padding:50px 20px;color:#cbd6e2;margin-top:60px;font-size:.95em
}
.footer .cols{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:40px;
  max-width:1100px;margin:0 auto
}
.footer .cols>div{flex:1;min-width:250px}
.footer strong{color:var(--accent);font-size:1.1em}
.footer a{color:#cbd6e2;text-decoration:none;margin-bottom:5px;display:inline-block;transition:color .2s ease}
.footer a:hover{color:var(--accent)}
.footer .muted{color:var(--muted)}
.footer-bottom{border-top:1px solid #193759;text-align:center;margin-top:32px;padding-top:18px;color:#8fa4b8}
.footer .icon{margin-right:6px;color:var(--accent)}

/* ====== RESPONSIVIDADE EXTRA ====== */
@media (max-width: 1024px){
  .logo{height:220px}
}
@media (max-width: 768px){
  .logo{height:170px}
  .hero-header{padding:28px 0 18px}
}
@media (max-width: 520px){
  .logo{height:140px}
  .menu li a{font-size:.9rem;padding:8px 14px}
}

/* ====== UTILITÁRIOS ====== */
.hidden{display:none !important}
.center{text-align:center}
.m-0{margin:0}
.mt-2{margin-top:.5rem}
.mt-3{margin-top:1rem}
.mt-4{margin-top:1.5rem}