/* VEA Consulting */

:root {
    --bg: #020304;
    --bg-dark: #0a0a09;
    --white: #FFFFFF;
    --muted: rgba(255,255,255,0.50);
    --faint: rgba(255,255,255,0.07);
    --red: #E30613;
    --blue: #00B3EA;
    --navy: #5568b8;
    --orange: #EA5B0B;
    --green: #40A135;
    --font: 'Century Gothic','CenturyGothic','Poppins',sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--font);background:var(--bg);color:var(--white);font-weight:300}
a{color:var(--white);text-decoration:none;transition:opacity .2s}
a:hover{opacity:.7}
img{max-width:100%;height:auto;display:block}

/* ── Nav ── */
.nav{
    position:fixed;top:0;left:0;right:0;z-index:100;
    background:rgba(2,3,4,.92);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    opacity:0;transform:translateY(-8px);pointer-events:none;
    transition:opacity .4s,transform .4s;
}
.nav.visible{opacity:1;transform:none;pointer-events:all}
.nav-inner{max-width:1080px;margin:0 auto;padding:0 40px;height:52px;display:flex;align-items:center;justify-content:space-between}
.nav-logo-img{height:20px}
.nav-links{display:flex;gap:44px}
.nav-links a{font-size:10px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.nav-links a:hover{color:var(--white);opacity:1}

.lang-toggle{
    background:none;border:1px solid var(--faint);color:var(--muted);
    font-family:var(--font);font-size:9px;font-weight:600;
    letter-spacing:.2em;padding:4px 10px;cursor:pointer;
    transition:color .2s,border-color .2s;
}
.lang-toggle:hover{color:var(--white);border-color:var(--muted)}
.mobile-menu-links .lang-toggle{margin-top:8px;padding:8px 16px;font-size:11px}
.nav-menu-btn{display:none;background:none;border:none;cursor:pointer;width:22px;height:14px;position:relative;z-index:110}
.nav-menu-btn span{display:block;width:100%;height:1px;background:var(--white);position:absolute;left:0;transition:transform .3s}
.nav-menu-btn span:first-child{top:0}
.nav-menu-btn span:last-child{bottom:0}
.nav-menu-btn.open span:first-child{transform:translateY(6px) rotate(45deg)}
.nav-menu-btn.open span:last-child{transform:translateY(-6px) rotate(-45deg)}

.mobile-menu{
    position:fixed;inset:0;background:var(--bg);z-index:99;
    display:flex;align-items:center;justify-content:center;
    opacity:0;pointer-events:none;transition:opacity .3s;
}
.mobile-menu.open{opacity:1;pointer-events:all}
.mobile-menu-links{display:flex;flex-direction:column;align-items:center;gap:40px}
.mobile-menu-links a{font-size:15px;font-weight:300;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* ── Layout ── */
.container{max-width:1080px;margin:0 auto;padding:0 48px}
.narrow{max-width:760px}
.section{padding:160px 0}
.section-dark{background:var(--bg-dark)}
.section-contact{text-align:center}

/* ── Hero ── */
.hero{
    min-height:100vh;display:flex;align-items:center;justify-content:center;
    flex-direction:column;position:relative;background:var(--bg);
}
.hero-logo{width:820px}
.scroll-down{
    position:absolute;bottom:52px;left:50%;transform:translateX(-50%);
    color:rgba(255,255,255,.15);animation:bob 2.5s ease infinite;
}
@keyframes bob{
    0%,100%{transform:translateX(-50%) translateY(0)}
    50%{transform:translateX(-50%) translateY(5px)}
}

/* ── Typography ── */
.label{
    font-size:10px;font-weight:600;letter-spacing:.4em;text-transform:uppercase;
    color:var(--red);margin-bottom:28px;
}
.headline{
    font-size:32px;font-weight:300;line-height:1.35;
    margin-bottom:36px;letter-spacing:.01em;
}
.subhead{
    font-size:17px;font-weight:300;color:var(--red);
    margin-bottom:40px;line-height:1.6;
}
.body-text{
    font-size:15px;font-weight:300;line-height:1.9;
    color:rgba(255,255,255,.7);margin-bottom:24px;
}
.body-text:last-of-type{margin-bottom:0}

/* ── Values ── */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:56px}
.value h3{
    font-size:10px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;
    color:var(--red);margin-bottom:16px;
}
.value p{font-size:13px;line-height:1.9;color:var(--muted)}

/* ── Services ── */
.services{margin-top:64px}
.svc{
    display:flex;align-items:baseline;gap:24px;
    padding:32px 0;border-bottom:1px solid var(--faint);
    transition:padding-left .3s;
}
.svc:first-child{border-top:1px solid var(--faint)}
.svc:hover{padding-left:8px}
.svc-n{
    font-size:32px;font-weight:300;color:rgba(255,255,255,.06);
    line-height:1;min-width:72px;flex-shrink:0;
}
.svc h3{
    font-size:13px;font-weight:600;letter-spacing:.14em;
    text-transform:uppercase;margin-bottom:6px;
}
.svc p{font-size:13px;line-height:1.8;color:var(--muted)}

.c-red{color:var(--red)}
.c-blue{color:var(--blue)}
.c-navy{color:var(--navy)}
.c-orange{color:var(--orange)}
.c-green{color:var(--green)}

/* ── What You Avoid ── */
.avoids{display:grid;grid-template-columns:1fr 1fr;gap:40px 56px;margin-top:48px}
.avoid h4{
    font-size:13px;font-weight:500;letter-spacing:.06em;margin-bottom:8px;
}
.avoid p{font-size:13px;line-height:1.8;color:var(--muted)}

/* ── VEA Agents ── */
.agent-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin-top:64px}
.agent-col h4{
    font-size:11px;font-weight:600;letter-spacing:.15em;
    text-transform:uppercase;margin-bottom:12px;
}
.agent-col p{font-size:13px;line-height:1.9;color:var(--muted)}

/* ── Contact ── */
.section-contact .headline{margin-bottom:48px}
.cta{
    display:inline-block;font-size:15px;font-weight:400;
    letter-spacing:.08em;padding-bottom:6px;
    border-bottom:1px solid var(--red);
    transition:border-color .3s;
}
.cta:hover{border-color:var(--white);opacity:1}

/* ── Footer ── */
.footer{
    padding:56px 48px;display:flex;flex-direction:column;
    align-items:center;gap:16px;background:var(--bg);
}
.footer-logo{height:20px;opacity:.2}
.footer p{font-size:10px;color:rgba(255,255,255,.2);letter-spacing:.1em}

/* ── Fade ── */
.fade-in{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.fade-in.visible{opacity:1;transform:none}

/* ── Responsive ── */
@media(max-width:900px){
    .values{grid-template-columns:1fr;gap:40px}
    .agent-cols{grid-template-columns:1fr;gap:40px}
    .avoids{grid-template-columns:1fr;gap:32px}
}
@media(max-width:768px){
    .nav-links{display:none}
    .nav-menu-btn{display:block}
    .section{padding:100px 0}
    .container{padding:0 28px}
    .hero-logo{width:420px}
    .headline{font-size:26px}
}
@media(max-width:480px){
    .hero-logo{width:300px}
    .headline{font-size:22px}
    .section{padding:80px 0}
    .container{padding:0 20px}
    .svc-n{font-size:24px;min-width:48px}
}