/* =========================================================
   MENDEVO — Total Tech inspired redesign
   Premium local IT-support layout
   ========================================================= */

:root {
    --navy: #08111f;
    --navy-2: #0d1928;
    --card: #111f31;
    --gold: #d4af37;
    --gold-light: #f0cf65;
    --white: #ffffff;
    --muted: #a9b4c3;
    --line: rgba(255,255,255,.10);
    --green: #25d366;
    --max: 1200px;
}

* { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; }

body {
    font-family:'Inter', sans-serif;
    background:var(--navy);
    color:var(--white);
    line-height:1.6;
    overflow-x:hidden;
}

a { color:inherit; text-decoration:none; }

.container {
    width:min(92%, var(--max));
    margin:auto;
}

/* TOP BAR */
.topbar {
    background:#050b13;
    border-bottom:1px solid var(--line);
    font-size:.82rem;
    color:#bfc8d5;
}
.topbar-inner {
    min-height:38px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.top-contact { display:flex; gap:24px; }
.top-contact a:hover { color:var(--gold-light); }

/* NAVIGATION */
.navbar {
    position:sticky;
    top:0;
    z-index:1000;
    background:rgba(8,17,31,.94);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
}
.nav-container {
    min-height:76px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.logo-area {
    display:flex;
    align-items:center;
    gap:11px;
}
.nav-logo {
    width:64px;
    height:64px;
    object-fit:contain;
}
.brand-name {
    font-weight:800;
    letter-spacing:2.5px;
    font-size:1.5rem;
    background:linear-gradient(135deg,var(--gold),#fff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}
.nav-links {
    display:flex;
    align-items:center;
    gap:30px;
    font-size:.92rem;
    font-weight:600;
}
.nav-links a:not(.nav-cta) {
    color:#d5dbe4;
    transition:.25s;
}
.nav-links a:not(.nav-cta):hover { color:var(--gold-light); }
.nav-cta {
    background:var(--gold);
    color:#10151c !important;
    padding:11px 20px;
    border-radius:4px;
    transition:.25s;
}
.nav-cta:hover { background:var(--gold-light); transform:translateY(-1px); }
.menu-toggle { display:none; background:none; color:white; border:0; font-size:1.5rem; }

/* HERO */
.hero {
    position:relative;
    min-height:650px;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:
        linear-gradient(90deg,rgba(5,12,22,.98) 0%,rgba(5,12,22,.88) 45%,rgba(5,12,22,.35) 100%),
        url('https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=2000&q=85') center/cover;
}
.hero::after {
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 80% 45%,rgba(212,175,55,.13),transparent 30%);
    pointer-events:none;
}
.hero-grid {
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1.08fr .92fr;
    align-items:center;
    gap:55px;
    padding:80px 0;
}
.eyebrow,.section-label {
    color:var(--gold-light);
    font-size:.76rem;
    letter-spacing:2px;
    font-weight:800;
}
.hero-content h1 {
    font-size:clamp(2.8rem,5vw,4.8rem);
    line-height:1.03;
    letter-spacing:-2.5px;
    margin:16px 0 22px;
}
.hero-content h1 span {
    color:var(--gold-light);
}
.hero-content > p {
    max-width:650px;
    color:#c4cedb;
    font-size:1.08rem;
    margin-bottom:32px;
}
.hero-buttons { display:flex; gap:13px; flex-wrap:wrap; }
.btn-primary,.btn-outline,.btn-whatsapp {
    display:inline-flex;
    justify-content:center;
    align-items:center;
    gap:9px;
    min-height:48px;
    padding:0 24px;
    border-radius:4px;
    font-weight:700;
    transition:.25s;
}
.wa-icon { display:inline-flex; flex-shrink:0; }
.wa-icon svg { width:18px; height:18px; fill:currentColor; display:block; }
.whatsapp-float .wa-icon svg { width:30px; height:30px; }
.btn-primary {
    background:var(--gold);
    color:#10151c;
}
.btn-primary:hover { background:var(--gold-light); transform:translateY(-2px); }
.btn-outline {
    border:1px solid rgba(255,255,255,.3);
    color:#fff;
}
.btn-outline:hover { border-color:var(--gold); color:var(--gold-light); }

.hero-trust {
    display:flex;
    align-items:center;
    gap:28px;
    margin-top:45px;
    padding-top:28px;
    border-top:1px solid var(--line);
}
.trust-stat { display:flex; flex-direction:column; }
.trust-stat strong {
    font-size:2rem;
    font-weight:800;
    letter-spacing:-1px;
    line-height:1;
    margin-bottom:7px;
    background:linear-gradient(135deg,var(--gold),var(--gold-light));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    text-shadow:0 0 30px rgba(212,175,55,.25);
}
.trust-stat span { color:#a9b4c3; font-size:.78rem; max-width:165px; line-height:1.45; }
.trust-divider { width:1px; height:44px; background:var(--line); flex-shrink:0; }

.hero-card {
    position:relative;
    min-height:420px;
}
.hero-card-image {
    position:absolute;
    inset:15px 0 15px 25px;
    border-radius:10px;
    background:
        linear-gradient(180deg,rgba(8,17,31,.05),rgba(8,17,31,.4)),
        url('https://images.unsplash.com/photo-1587831990711-23ca6441447b?auto=format&fit=crop&w=1100&q=85') center/cover;
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 25px 70px rgba(0,0,0,.45);
}
.floating-card {
    position:absolute;
    left:0;
    bottom:42px;
    background:rgba(13,25,40,.96);
    border:1px solid rgba(212,175,55,.4);
    padding:17px 21px;
    display:flex;
    align-items:center;
    gap:12px;
    border-radius:6px;
    box-shadow:0 15px 40px rgba(0,0,0,.4);
}
.floating-card strong,.floating-card small { display:block; }
.floating-card small { color:var(--muted); font-size:.76rem; }
.status-dot {
    width:10px;height:10px;border-radius:50%;
    background:var(--green);
    box-shadow:0 0 12px rgba(37,211,102,.8);
}

/* BENEFITS */
.benefits {
    background:#0c1827;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}
.benefits-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
}
.benefit {
    padding:24px 18px;
    display:flex;
    gap:13px;
    align-items:center;
    border-right:1px solid var(--line);
}
.benefit:first-child { border-left:1px solid var(--line); }
.benefit-icon {
    min-width:43px;height:43px;
    display:grid;place-items:center;
    border:1px solid rgba(212,175,55,.35);
    color:var(--gold-light);
    border-radius:50%;
}
.benefit strong,.benefit span { display:block; }
.benefit strong { font-size:.86rem; }
.benefit span { color:#7f8c9e; font-size:.72rem; }

/* COMMON SECTIONS */
.section { padding:100px 0; }
.section-heading { max-width:700px; margin-bottom:48px; }
.section-heading.centered { margin-left:auto;margin-right:auto;text-align:center; }
.section-heading h2 {
    font-size:clamp(2rem,3.6vw,3rem);
    line-height:1.1;
    margin:11px 0 15px;
    letter-spacing:-1px;
}
.section-heading p { color:var(--muted); }

/* SERVICES */
.services { background:#091321; }
.services-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}
.service-card {
    position:relative;
    min-height:355px;
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:7px;
    background-size:cover;
    background-position:center;
    display:flex;
    align-items:flex-end;
    transition:.3s ease;
}
.service-card:hover {
    transform:translateY(-6px);
    border-color:rgba(212,175,55,.65);
    box-shadow:0 18px 45px rgba(0,0,0,.25);
}
.service-repair { background-image:url('https://images.unsplash.com/photo-1597872200969-2b65d56bd16b?auto=format&fit=crop&w=900&q=80'); }
.service-upgrade { background-image:url('https://images.unsplash.com/photo-1591488320449-011701bb6704?auto=format&fit=crop&w=900&q=80'); }
.service-build { background-image:url('https://images.unsplash.com/photo-1587202372634-32705e3bf49c?auto=format&fit=crop&w=900&q=80'); }
.service-data { background-image:url('https://images.unsplash.com/photo-1558494949-ef010cbdcc31?auto=format&fit=crop&w=900&q=80'); }
.service-network { background-image:url('assets/Homewifipic.jpg'); }
.service-business { background-image:url('https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=900&q=80'); }
.service-shade {
    position:absolute;inset:0;
    background:linear-gradient(0deg,rgba(4,10,18,.98),rgba(4,10,18,.15) 70%);
}
.service-content { position:relative; z-index:2; padding:27px; }
.service-number { color:var(--gold-light);font-size:.72rem;font-weight:800;letter-spacing:2px; }
.service-content h3 { font-size:1.35rem;margin:7px 0 8px; }
.service-content p { color:#b3bdca;font-size:.84rem;max-width:350px; }
.service-content a { display:inline-block;margin-top:16px;color:var(--gold-light);font-size:.82rem;font-weight:700; }

/* ABOUT */
.about { background:#0d1928; }
.about-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:75px;
    align-items:center;
}
.about-image {
    min-height:520px;
    border-radius:8px;
    background:
        linear-gradient(135deg,rgba(8,17,31,.05),rgba(8,17,31,.3)),
        url('https://images.unsplash.com/photo-1526738549149-8e07eca6c147?auto=format&fit=crop&w=1100&q=85') center/cover;
    border:1px solid var(--line);
}
.about-content h2 { font-size:clamp(2rem,3.5vw,3rem);line-height:1.1;margin:12px 0 20px; }
.about-content p { color:var(--muted);margin-bottom:17px; }
.check-list { margin:25px 0 30px;display:grid;gap:10px;color:#d9e0e8;font-size:.9rem; }
.check-list div::first-letter { color:var(--gold); }

/* WHY */
.why-us { background:#08111f; }
.why-grid { display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line); }
.why-card { padding:32px 25px; border-right:1px solid var(--line); }
.why-card:first-child { border-left:1px solid var(--line); }
.why-card span { color:var(--gold);font-size:.73rem;font-weight:800; }
.why-card h3 { margin:10px 0 8px;font-size:1.05rem; }
.why-card p { color:#8592a4;font-size:.82rem; }

/* CONTACT */
.contact {
    background:
        linear-gradient(90deg,rgba(7,16,28,.97),rgba(7,16,28,.86)),
        url('https://images.unsplash.com/photo-1556761175-b413da4baf72?auto=format&fit=crop&w=1800&q=80') center/cover;
}
.contact-box {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
}
.contact-copy h2 { font-size:clamp(2.3rem,4vw,3.7rem);line-height:1.05;margin:12px 0; }
.contact-copy > p { color:var(--muted);max-width:520px; }
.contact-details { margin-top:28px;display:grid;gap:11px; }
.contact-details a,.contact-details div { color:#cbd4df;font-size:.9rem; }
.contact-details span { margin-left:7px; }
.contact-details a:hover span { color:var(--gold-light); }

.contact-map {
    margin-top:26px;
    height:230px;
    border-radius:8px;
    overflow:hidden;
    border:1px solid rgba(212,175,55,.3);
    box-shadow:0 15px 40px rgba(0,0,0,.3);
    filter:grayscale(.15) contrast(1.05);
}
.contact-map iframe {
    width:100%;
    height:100%;
    border:0;
    display:block;
}

.contact-panel {
    background:rgba(17,31,49,.9);
    border:1px solid rgba(212,175,55,.3);
    padding:42px;
    border-radius:8px;
    box-shadow:0 25px 70px rgba(0,0,0,.3);
}
.contact-panel > span { color:var(--gold-light);font-size:.7rem;letter-spacing:2px;font-weight:800; }
.contact-panel h3 { font-size:1.65rem;margin:12px 0 8px; }
.contact-panel p { color:var(--muted);font-size:.88rem;margin-bottom:25px; }
.btn-whatsapp { background:var(--green);color:#07140b;width:100%; }
.btn-whatsapp:hover { filter:brightness(1.08);transform:translateY(-2px); }
.wa-symbol { margin-right:9px; }

/* FOOTER */
.footer { background:#050b13;border-top:1px solid var(--line);padding-top:55px; }
.footer-grid { display:grid;grid-template-columns:2fr 1fr 1.3fr;gap:50px;padding-bottom:45px; }
.footer-brand { color:var(--gold-light);font-weight:800;letter-spacing:2px;font-size:1.35rem; }
.footer-social { display:flex; gap:10px; margin-top:16px; }
.footer-social a {
    width:38px;height:38px;
    display:grid;place-items:center;
    border:1px solid var(--line);
    border-radius:50%;
    color:#a9b4c3;
    transition:.2s;
}
.footer-social a:hover {
    border-color:var(--gold);
    color:var(--gold-light);
    background:rgba(212,175,55,.08);
    transform:translateY(-2px);
}
.footer-social svg { width:17px;height:17px; }
.footer p,.footer a,.footer span { color:#788698;font-size:.8rem; }
.footer h4 { color:#fff;font-size:.85rem;margin-bottom:14px; }
.footer a,.footer-grid div:last-child span { display:block;margin:7px 0; }
.footer a:hover { color:var(--gold-light); }
.footer-social a { display:grid !important; margin:0 !important; }
.copyright {
    border-top:1px solid var(--line);
    min-height:65px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:.72rem;
    color:#8b96a7;
}

/* FLOATING WHATSAPP */
.whatsapp-float {
    position:fixed;
    right:24px;
    bottom:24px;
    z-index:1100;
    width:62px;height:62px;
    border-radius:50%;
    background:var(--green);
    color:#fff;
    display:grid;
    place-items:center;
    box-shadow:0 10px 30px rgba(0,0,0,.35),0 0 0 5px rgba(37,211,102,.12);
    transition:.25s;
}
.whatsapp-float:hover { transform:scale(1.08); }
.wa-phone { font-size:1.8rem; }
.wa-tooltip {
    position:absolute;
    right:75px;
    white-space:nowrap;
    background:#101b2a;
    color:#fff;
    padding:7px 12px;
    border-radius:4px;
    font-size:.72rem;
    opacity:0;
    transform:translateX(5px);
    pointer-events:none;
    transition:.2s;
}
.whatsapp-float:hover .wa-tooltip { opacity:1;transform:none; }

/* RESPONSIVE */
@media (max-width: 950px) {
    .hero-grid,.about-grid,.contact-box { grid-template-columns:1fr; }
    .hero-card { min-height:360px;max-width:650px;width:100%;margin:auto; }
    .benefits-grid { grid-template-columns:repeat(2,1fr); }
    .services-grid { grid-template-columns:repeat(2,1fr); }
    .why-grid { grid-template-columns:repeat(2,1fr); }
    .why-card:nth-child(3) { border-left:1px solid var(--line); }
}

@media (max-width: 700px) {
    .topbar-inner { justify-content:center; }
    .top-contact { display:none; }

    .nav-links {
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        position:absolute;
        top:100%;
        left:0;
        right:0;
        background:#0a1524;
        border-bottom:1px solid var(--line);
        max-height:0;
        overflow:hidden;
        opacity:0;
        visibility:hidden;
        transition:max-height .3s ease, opacity .25s ease;
        padding:0 24px;
    }
    .nav-links.open {
        max-height:400px;
        opacity:1;
        visibility:visible;
        padding:18px 24px 26px;
    }
    .nav-links a:not(.nav-cta) {
        padding:14px 0;
        border-bottom:1px solid var(--line);
    }
    .nav-links a:last-of-type:not(.nav-cta) { border-bottom:0; }
    .nav-links .nav-cta {
        margin-top:16px;
        text-align:center;
    }

    .menu-toggle { display:block; }
    .nav-container { min-height:68px; position:relative; }
    .hero { min-height:auto; }
    .hero-grid { padding:65px 0; }
    .hero-content h1 { letter-spacing:-1.5px; }
    .hero-trust { gap:15px;flex-wrap:wrap; }
    .hero-card { min-height:300px; }
    .benefits-grid,.services-grid,.why-grid { grid-template-columns:1fr; }
    .benefit { border-left:1px solid var(--line); }
    .why-card { border-left:1px solid var(--line); }
    .why-card:nth-child(3) { border-top:0; }
    .section { padding:70px 0; }
    .about-image { min-height:340px; }
    .contact-box { gap:35px; }
    .contact-panel { padding:30px 24px; }
    .footer-grid { grid-template-columns:1fr;gap:28px; }
    .copyright { flex-direction:column;justify-content:center;gap:4px;padding:18px 0; }
    .whatsapp-float { width:56px;height:56px;right:17px;bottom:17px; }
    .wa-tooltip { display:none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior:auto; }
    * { transition:none !important; }
}

/* =========================================================
   LEGAL PAGES (Privacy Policy / Terms & Conditions)
   ========================================================= */
.legal-hero {
    background:var(--navy-2);
    border-bottom:1px solid var(--line);
    padding:70px 0 40px;
}
.legal-hero .section-label { display:block; margin-bottom:10px; }
.legal-hero h1 { font-size:clamp(2rem,4vw,2.8rem); letter-spacing:-1px; margin-bottom:10px; }
.legal-hero p { color:var(--muted); font-size:.88rem; }

.legal-content {
    background:#0a1524;
    padding:60px 0 100px;
}
.legal-content .container { max-width:820px; }
.legal-content h2 {
    font-size:1.4rem;
    margin:42px 0 14px;
    color:var(--gold-light);
    letter-spacing:-.3px;
}
.legal-content h2:first-child { margin-top:0; }
.legal-content h3 {
    font-size:1.05rem;
    margin:22px 0 10px;
    color:#fff;
}
.legal-content p { color:#c4cedb; margin-bottom:14px; font-size:.95rem; }
.legal-content ul,.legal-content ol { color:#c4cedb; margin:0 0 14px 22px; font-size:.95rem; }
.legal-content li { margin-bottom:7px; }
.legal-content a { color:var(--gold-light); text-decoration:underline; }
.legal-content strong { color:#fff; }
.legal-note {
    background:rgba(212,175,55,.08);
    border:1px solid rgba(212,175,55,.3);
    border-radius:6px;
    padding:16px 20px;
    margin-bottom:28px;
    font-size:.85rem;
    color:#d9cfa8;
}
.legal-back {
    display:inline-block;
    margin-top:10px;
    color:var(--gold-light);
    font-size:.85rem;
    font-weight:700;
}

/* FOOTER LEGAL LINKS */
.footer-legal {
    display:flex;
    gap:18px;
    flex-wrap:wrap;
}
.footer-legal a { color:#788698; font-size:.72rem; }
.footer-legal a:hover { color:var(--gold-light); }

/* =========================================================
   COOKIE CONSENT BANNER
   ========================================================= */
@keyframes cookieSlideUp {
    from { opacity:0; transform:translateY(24px) scale(.98); }
    to   { opacity:1; transform:translateY(0) scale(1); }
}
.cookie-banner {
    position:fixed;
    left:20px;
    right:20px;
    bottom:20px;
    z-index:1200;
    max-width:480px;
    margin:0 auto;
    background:rgba(13,25,40,.85);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border:1px solid rgba(212,175,55,.35);
    border-radius:16px;
    padding:24px 24px 22px;
    box-shadow:0 25px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03) inset;
    display:none;
    animation:cookieSlideUp .45s cubic-bezier(.19,1,.22,1);
}
.cookie-banner.show { display:block; }
.cookie-banner-top {
    display:flex;
    align-items:flex-start;
    gap:13px;
    margin-bottom:14px;
}
.cookie-icon {
    flex-shrink:0;
    width:38px;height:38px;
    display:grid;place-items:center;
    border-radius:50%;
    background:rgba(212,175,55,.12);
    border:1px solid rgba(212,175,55,.35);
    color:var(--gold-light);
}
.cookie-icon svg { width:19px;height:19px; }
.cookie-banner-close {
    margin-left:auto;
    background:none;
    border:0;
    color:#7f8c9e;
    font-size:1.1rem;
    line-height:1;
    cursor:pointer;
    padding:4px;
    border-radius:4px;
    transition:.2s;
    flex-shrink:0;
}
.cookie-banner-close:hover { color:#fff; background:rgba(255,255,255,.08); }
.cookie-banner-text strong { display:block; color:#fff; font-size:.92rem; margin-bottom:4px; }
.cookie-banner p {
    color:#a9b4c3;
    font-size:.82rem;
    line-height:1.55;
    margin:0;
}
.cookie-banner a { color:var(--gold-light); }
.cookie-banner-actions { display:flex; gap:10px; }
.cookie-banner-actions button {
    flex:1;
    min-height:42px;
    padding:0 16px;
    border-radius:8px;
    font-weight:700;
    font-size:.82rem;
    border:1px solid transparent;
    cursor:pointer;
    transition:.2s;
}
.cookie-accept {
    background:var(--gold);
    color:#10151c;
}
.cookie-accept:hover { background:var(--gold-light); transform:translateY(-1px); }
.cookie-decline {
    background:transparent;
    color:#c4cedb;
    border-color:rgba(255,255,255,.18);
}
.cookie-decline:hover { border-color:rgba(255,255,255,.4); color:#fff; }

@media (max-width:700px) {
    .legal-hero { padding:55px 0 30px; }
    .legal-content { padding:40px 0 70px; }
    .cookie-banner { left:12px; right:12px; bottom:12px; padding:20px 20px 18px; }
}