/* =========================================
   Gennisys - style.css (completo, comentado)
   - Navbar ajustada (logo | menu | flags)
   - Cards translúcidos e mais próximos
   - Responsivo com menu hambúrguer
   - Fontes: Poppins + Roboto
   - Animação SVG do logo
   ========================================= */

/* Reset & Base */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; scroll-padding-top:88px; }
body { 
  font-family:'Poppins', sans-serif; 
  background: linear-gradient(135deg, #0a0e1a, #0e121f); 
  color:#eef2ff; 
  -webkit-font-smoothing:antialiased; 
  -moz-osx-font-smoothing:grayscale; 
  overflow-x:hidden; 
}

/* Canvas background */
#particles { position:fixed; inset:0; width:100%; height:100%; z-index:-1; }

/* ---------- NAVBAR ---------- */
.navbar {
  position:fixed; top:0; left:0; right:0; height:72px; display:flex; align-items:center; justify-content:space-between;
  padding:0 24px; background: rgba(10,15,25,0.85); backdrop-filter: blur(8px); z-index:1000; box-shadow:0 4px 16px rgba(0,0,0,0.6);
}
.nav-left, .nav-center, .nav-right { display:flex; align-items:center; gap:12px; }

/* Logo */
.logo { font-size:1.6rem; font-weight:800; color:#38bdf8; text-decoration:none; letter-spacing:.8px; transition: transform .2s ease; }
.logo:hover { transform: translateY(-1px); }
.logo-svg { width: 140px; height: auto; }
.logo-svg path {
  fill: none;
  stroke: #38bdf8;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 2s ease-in-out;
}

/* Menu (desktop) */
.menu { list-style:none; display:flex; gap:22px; }
.menu li a {
  font-family:'Roboto', sans-serif;
  color:#cbd5e1;
  font-weight:800;
  padding:8px 16px;
  border-radius:8px;
  background:rgba(56,189,248,0.04);
  transition:all .22s;
  white-space:nowrap;
  text-align:center;
  font-size:1.12rem;
  letter-spacing:0.5px;
  display:flex;
  justify-content:center;
  align-items:center;
}
.menu li a:hover {
  color:#0f172a;
  background:rgba(56,189,248,0.88);
  box-shadow:0 6px 18px rgba(56,189,248,0.14);
}

/* Flags desktop */
.flags-desktop { display:flex; gap:10px; }
.flag { width:28px; height:20px; border-radius:3px; cursor:pointer; transition:transform .18s, box-shadow .18s; border:1px solid rgba(255,255,255,0.08); }
.flag:hover { transform:scale(1.07); box-shadow:0 6px 18px rgba(56,189,248,0.15); }

/* Hamburger (hidden in desktop) */
.hamburger { display:none; width:44px; height:36px; border-radius:8px; background:transparent; border:1px solid rgba(255,255,255,0.03); align-items:center; justify-content:center; cursor:pointer; flex-direction:column; gap:4px; }
.hamburger span { display:block; height:3px; width:22px; background:#cbd5e1; border-radius:2px; transition: all .18s ease; }

/* ---------- Mobile menu (slide down) ---------- */
.mobile-menu {
  display:none;
  position: fixed; top:72px; left:0; right:0; background: rgba(6,10,20,0.98); border-top:1px solid rgba(56,189,248,0.05); z-index:999; padding:12px 20px;
}
.mobile-menu.open { display:block; animation: fadeInDown .3s ease; }
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

.mobile-menu ul { list-style:none; display:flex; flex-direction:column; gap:12px; }
.mobile-menu a {
  display:block;
  padding:10px 14px;
  color:#cbd5e1;
  text-decoration:none;
  border-radius:8px;
  background: rgba(255,255,255,0.02);
  text-align:center;
  font-weight:800;
  font-size:1.08rem;
}
.mobile-menu a:hover { background: rgba(56,189,248,0.12); color:#38bdf8; }

/* Flags mobile */
.flags-mobile { display:flex; gap:10px; justify-content:center; margin-top:16px; padding-top:12px; border-top:1px solid rgba(255,255,255,0.05); }

/* ---------- Sections & Cards ---------- */
.section {
  padding:80px 20px; /* Reduced padding to bring cards closer */
  padding-top:88px;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:50vh; /* Adjusted min-height */
}
.card {
  width:100%; max-width:980px; 
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); 
  border-radius:16px; 
  padding:34px; 
  box-shadow:0 12px 40px rgba(2,6,23,0.6); 
  border:1px solid rgba(56,189,248,0.06); 
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center; /* Centraliza todo o texto dentro dos cards */
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 50px rgba(2,6,23,0.8);
}

/* Hero */
.hero-card { padding:48px; }
.hero-card h1 { font-size:2.6rem; color:#38bdf8; margin-bottom:16px; line-height:1.04; text-shadow: 1px 1px 2px rgba(0,0,0,0.3); }
.hero-card p { color:#dbeafe; font-size:1.15rem; margin-bottom:20px; font-weight: 600; text-shadow: 1px 1px 2px rgba(0,0,0,0.2); }

/* CEO */
.ceo-card { display:flex; flex-direction:column; align-items:center; gap:14px; padding:36px; }
.ceo-avatar { width:150px; height:150px; border-radius:50%; object-fit:cover; border:4px solid #38bdf8; box-shadow:0 10px 30px rgba(56,189,248,0.08); }
.ceo-card h3 { color:#eef2ff; font-size:1.5rem; font-weight: 700; text-shadow: 1px 1px 2px rgba(0,0,0,0.3); }
.ceo-position { color:#94a3b8; font-weight:700; text-shadow: 1px 1px 2px rgba(0,0,0,0.2); }

/* About and Contact cards */
.card h2 { color:#eef2ff; font-size:1.8rem; margin-bottom:16px; font-weight: 700; text-shadow: 1px 1px 2px rgba(0,0,0,0.3); }
.card p { color:#cbd5e1; font-size:1.05rem; line-height:1.6; font-weight: 600; text-shadow: 1px 1px 2px rgba(0,0,0,0.2); }

/* CTA button */
.btn { display:inline-block; padding:12px 26px; border-radius:10px; background:#38bdf8; color:#061023; font-weight:700; text-decoration:none; box-shadow:0 10px 24px rgba(56,189,248,0.14); transition: transform .12s, box-shadow .18s; }
.btn:hover { transform:translateY(-3px); box-shadow:0 16px 36px rgba(56,189,248,0.18); }

/* Footer */
footer { padding:28px 16px; text-align:center; color:#9ca3af; background:transparent; }

/* ---------- Responsive ---------- */
@media (max-width:920px){
  .menu { gap:16px; }
  .hero-card h1{font-size:2.2rem;}
  .logo{ font-size:1.5rem; }
  .desktop-only-logo { display:none; }
  .mobile-only-logo { display:block; }
}
@media (max-width:800px){
  .desktop-flags { display:none; } /* Hide desktop flags on mobile */
  .mobile-nav { display:flex; align-items:center; justify-content:space-between; width:100%; }
  .nav-center { display:none; }
  .nav-left { display:none; }
  .hamburger { display:flex; flex-direction:column; }
  .mobile-menu { display:none; }
  .mobile-menu.open { display:block; }
  .card{padding:20px;border-radius:12px;}
  .hero-card{padding:28px;}
  .ceo-avatar{width:120px;height:120px;}
}
@media(max-width:420px){ 
  .hero-card h1{font-size:1.6rem;} 
  .hamburger{width:40px;height:34px;} 
}