/* ============= RESET & BASE ============= */
*, *::before, *::after { box-sizing: border-box; margin:0; padding:0; }
body { font-family: 'Inter', sans-serif; line-height: 1.6; color:#333; background:#f9f9fb; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; }
.container { max-width:1200px; margin:auto; padding:0 1rem; }
section { padding:4rem 0; }

/* ============= HEADER & NAV ============= */
header { background:#0A2540; color:#fff; position:sticky; top:0; z-index:1000; box-shadow:0 2px 10px rgba(0,0,0,.1); }
.header-inner { display:flex; align-items:center; justify-content:space-between; height:70px; }
.logo { font-weight:700; font-size:1.4rem; }
.logo span { color:#00D4FF; }

.hamburger { display:none; cursor:pointer; }
.hamburger span { display:block; width:25px; height:3px; background:#fff; margin:5px 0; transition:0.3s; }

nav ul { display:flex; gap:2rem; list-style:none; }
nav a { font-weight:600; transition:color .2s; }
nav a:hover { color:#00D4FF; }

@media (max-width:768px){
    .hamburger { display:block; }
    nav { position:fixed; top:70px; left:-100%; width:100%; height:calc(100vh - 70px); background:#0A2540; transition:left .3s; padding-top:2rem; }
    nav ul { flex-direction:column; align-items:center; gap:1.5rem; font-size:1.1rem; }
    nav.active { left:0; }
}

/* ============= HERO ============= */
.hero { background:linear-gradient(135deg, #0A2540 0%, #004C70 100%); color:#fff; text-align:center; padding:6rem 0; }
.hero h1 { font-size:2.8rem; margin-bottom:1rem; }
.subtitle { font-size:1.3rem; margin-bottom:1rem; color:#00D4FF; }
.hero p { max-width:700px; margin:1.5rem auto; font-size:1.1rem; opacity:0.9; }
.btn-primary { display:inline-block; margin-top:2rem; padding:.9rem 2rem; background:#00D4FF; color:#0A2540; font-weight:600; border-radius:50px; transition:transform .2s; }
.btn-primary:hover { transform:translateY(-3px); }

/* ============= FEATURES ============= */
.features { background:#fff; }
.grid { display:grid; gap:2rem; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); }
.card { background:#fff; padding:2rem; border-radius:12px; box-shadow:0 4px 15px rgba(0,0,0,.05); text-align:center; transition:transform .2s; overflow:visible; }
.card:hover { transform:translateY(-5px); }
.card .icon { margin-bottom:1rem; }
.card .icon span { font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif; }
.card h3 { margin-bottom:.8rem; }
.card-link { color:#00D4FF; font-weight:600; font-size:0.9rem; }

/* Destaque */
.card.highlight { border: 2px solid #00D4FF; position:relative; }
.card.highlight::after {
    content: "EM DESTAQUE";
    position: absolute;
    top: -12px;
    right: 15px;
    background: #00D4FF;
    color: #0A2540;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Em Breve */
.coming-soon { opacity: 0.7; border: 2px dashed #aaa; }

/* ============= SHOWCASE ============= */
.showcase { background:#f0f8ff; text-align:center; }
.flex-container { display: flex; flex-wrap: wrap; gap: 3rem; align-items: center; margin: 2rem 0; }
.text-content { flex: 1; min-width: 300px; text-align:left; }
.features-list { margin: 1.5rem 0; padding-left: 1.2rem; }
.features-list li { margin: .5rem 0; }

.tela-zonasegura { max-width:320px; margin:2rem auto; position:relative; }
.tela-zonasegura img { width:100%; }
.screen { position:absolute; top:5.8%; left:50%; transform:translateX(-50%); width:87%; height:86%; background:#fff; border-radius:4px; overflow:hidden; }
.screen img { width:100%; height:100%; object-fit:cover; }


/* ============= ABOUT ============= */
.about { background:#fff; }
.about-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.about-grid h3 { color: #00D4FF; margin-bottom: .5rem; }

/* ============= FOOTER ============= */
footer { background:#0A2540; color:#fff; text-align:center; padding:2rem 0; font-size:0.9rem; }
footer p { margin-bottom:.5rem; }
.social a { margin:0 .5rem; font-size:1.4rem; color:#00D4FF; transition:0.2s; }
.social a:hover { transform:scale(1.2); }

/* ============= UTILITIES ============= */
.text-center { text-align:center; }
.mt-1 { margin-top:1rem; }
.mb-2 { margin-bottom:2rem; }

@media (max-width: 768px) {
    .flex-container { flex-direction: column; text-align: center; }
    .text-content { text-align:center; }
    .tela-zonasegura { order: -1; }
}