:root {
    --bg-color:        #080f18;
    --bg-secondary:    #121922;
    --bg-darkest:      #0b1016;
    --bg-card:         #161e29;
    --bg-card-hover:   #1a2433;

    --text-primary:    #ffffff;
    --text-secondary:  #a0aebc;
    --text-muted:      #5c6b7a;

    --accent-color:    #009ec3;
    --accent-hover:    #458bb2;
    --accent-subtle:   rgba(109, 162, 193, 0.08);

    --border-color:    rgba(255, 255, 255, 0.06);
    --border-accent:   rgba(109, 162, 193, 0.35);

    --font-heading: 'Epilogue', sans-serif;
    --font-body:    'Inter', sans-serif;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
}

/* RESET & BASE */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
body { background-color: var(--bg-color); color: var(--text-primary); font-family: var(--font-body); line-height: 1.6; overflow-x: hidden; 
       -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* CONTAINER */
.container { max-width: 1280px; margin: 0 auto; padding: 0 2.5rem; width: 100%; }
@media (max-width: 768px) {
    .container { padding: 0 1.25rem; }
}

/* TIPOGRAFIA GLOBAL */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--text-primary); line-height: 1.15; outline:none; }
p { color: var(--text-secondary); }

/* LABEL (etiqueta de seção) */
.label { display: inline-block; color: var(--accent-color); font-family: var(--font-body); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; 
         text-transform: uppercase; }

/* BOTÕES */
.btn { display: inline-flex; align-items: center; justify-content: center; background-color: var(--accent-color); color: var(--bg-color); font-family: var(--font-body); 
       font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; border-radius: var(--radius-sm); border: none; cursor: pointer; 
       transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; text-decoration: none; white-space: nowrap; }

.btn:hover { background-color: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(109, 162, 193, 0.22); }
.btn-nav { padding: 0.75rem 1.5rem; font-size: 0.8rem; }
.btn-entrar { padding: 0.500rem 1.25rem; font-size: 0.8rem; background-color: var(--accent-color); color: var(--bg-color); }
.btn-main { padding: 1.125rem 2.25rem; font-size: 0.875rem; }
.btn-outline { background-color: transparent; color: var(--text-primary); border: 1px solid rgba(255, 255, 255, 0.28); padding: 1.125rem 2.25rem; font-size: 0.875rem; }
.btn-outline:hover { background-color: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.6); transform: translateY(-2px); box-shadow: none; }

/* NAVBAR */
.navbar { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; padding: 1.5rem 0; background: rgba(13, 21, 32, 0.85); backdrop-filter: blur(12px); 
          -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-color); transition: background 0.3s ease, padding 0.3s ease; }
.nav-container { display: flex; justify-content: space-between; align-items: center; gap: 2rem; }
.logo { display: inline-block; color: var(--text-primary); cursor: pointer; text-decoration: none; flex-shrink: 0; }
.logo-milk-pro { font-family: var(--font-body); font-weight: 800; font-size: 1.375rem; letter-spacing: -0.03em; line-height: 1; }
.nav-links { display: flex; gap: 2.5rem; margin-left: auto; margin-right: 2rem; }
.nav-links a { color: var(--text-primary); font-size: 0.9rem; font-weight: 400; opacity: 0.8; transition: opacity 0.2s ease; white-space: nowrap; }
.nav-links a:hover { opacity: 1; }

/* RODAPÉ */
.site-footer { background-color: #080c11; padding: 3.75rem 0; border-top: 1px solid rgba(255,255,255,0.05); }
.footer-container { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; }
.footer-left { display: flex; flex-direction: column; gap: 1rem; }
.footer-left .logo-milk-pro { font-size: 1.125rem; }
.footer-left .logo-m { font-size: 1.375rem; }
.footer-left .logo-m::after { top: 6px; width: 6px; height: 5px; border-width: 2px; }
.footer-left .logo-aster { font-size: 0.7rem; margin-top: 4px; }
.copyright { font-size: 0.75rem; color: var(--text-secondary); opacity: 0.55; }
.footer-right { display: flex; gap: 2rem; flex-wrap: wrap; justify-content: flex-end; }
.footer-right a { color: var(--text-secondary); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; 
                  transition: opacity 0.2s ease, color 0.2s ease; }
.footer-right a:hover { color: var(--text-primary); opacity: 1; }
.hero-text { outline: none; border:none; }

/* RESPONSIVO — GLOBAL */
@media (max-width: 1024px) {
    .nav-links { gap: 1.5rem; margin-right: 1.25rem; }
}

@media (max-width: 768px) {
    .navbar { padding: 1.125rem 0; }
    .footer-container { flex-direction: column; align-items: center; text-align: center; }
    .footer-right { justify-content: center; gap: 1.25rem; }
}