:root {
            --void: #0c0e12;
            --panel: #141820;
            --line: #2a3140;
            --muted: #8b95a8;
            --text: #e8ecf2;
            --white: #f7f8fa;
            --amber: #5ec8f2;
            --amber-soft: #8adef8;
            --blue: #4f7cac;
            --display: 'Oswald', sans-serif;
            --sans: 'Instrument Sans', system-ui, sans-serif;
            --ease: cubic-bezier(0.16, 1, 0.3, 1);
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; scroll-padding-top: 88px; }
        body {
            font-family: var(--sans);
            background: var(--void);
            color: var(--text);
            line-height: 1.65;
            -webkit-font-smoothing: antialiased;
            overflow-x: hidden;
        }
        ::selection { background: rgba(94,200,242,0.28); color: var(--white); }
        a { color: inherit; text-decoration: none; }
        .wrap { width: min(1120px, calc(100% - 2.75rem)); margin-inline: auto; }

        /* Ambient grain */
        body::before {
            content: '';
            position: fixed; inset: 0;
            pointer-events: none; z-index: 200;
            opacity: 0.035;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
        }

        /* Nav */
        .nav {
            position: fixed; inset: 0 0 auto; z-index: 100;
            border-bottom: 1px solid transparent;
            transition: background 0.35s, border-color 0.35s;
        }
        .nav.on {
            background: rgba(12,14,18,0.9);
            backdrop-filter: blur(12px);
            border-color: var(--line);
        }
        .nav-row {
            display: flex; align-items: center; justify-content: space-between;
            height: 72px;
        }
        .brand {
            font-family: var(--display);
            font-weight: 700;
            font-size: 1.45rem;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--white);
        }
        .brand i { color: var(--amber); font-style: normal; }
        .links { display: flex; align-items: center; gap: 1.75rem; list-style: none; }
        .links a {
            font-size: 0.8rem;
            font-weight: 600;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--muted);
            transition: color 0.2s;
        }
        .links a:hover { color: var(--white); }
        .links .cta {
            color: var(--void);
            background: var(--amber);
            padding: 0.55rem 0.95rem;
        }
        .links .cta:hover { background: var(--amber-soft); color: var(--void); }
        .burger {
            display: none; background: none; border: 0; cursor: pointer; padding: 6px;
            flex-direction: column; gap: 5px;
        }
        .burger span { width: 22px; height: 2px; background: var(--white); display: block; }

        /* Hero */
        .hero {
            min-height: 100svh;
            position: relative;
            display: grid;
            align-items: end;
            overflow: hidden;
        }
        .hero-media {
            position: absolute; inset: 0;
            background:
                linear-gradient(180deg, rgba(12,14,18,0.45) 0%, rgba(12,14,18,0.55) 40%, rgba(12,14,18,0.96) 100%),
                url('https://images.pexels.com/photos/32588555/pexels-photo-32588555.jpeg?auto=compress&cs=tinysrgb&w=2000') center/cover no-repeat;
        }
        .hero-media::after {
            content: '';
            position: absolute; inset: 0;
            background: linear-gradient(90deg, rgba(12,14,18,0.75) 0%, transparent 55%);
        }
        .hero-content {
            position: relative; z-index: 2;
            padding: 7.5rem 0 3.75rem;
            width: min(1120px, calc(100% - 2.75rem));
            margin: 0 auto;
        }
        .hero-brand {
            font-family: var(--display);
            font-size: clamp(3.8rem, 11vw, 8.2rem);
            line-height: 0.88;
            letter-spacing: 0.02em;
            text-transform: uppercase;
            color: var(--white);
            margin-bottom: 1.15rem;
            opacity: 0;
            animation: up 1s var(--ease) 0.1s forwards;
        }
        .hero-brand span { color: var(--amber); }
        .hero-copy {
            max-width: 32rem;
            font-size: 1.1rem;
            color: rgba(232,236,242,0.78);
            margin-bottom: 1.85rem;
            font-weight: 500;
            opacity: 0;
            animation: up 1s var(--ease) 0.28s forwards;
        }
        .hero-actions {
            display: flex; flex-wrap: wrap; gap: 0.75rem;
            opacity: 0;
            animation: up 1s var(--ease) 0.45s forwards;
        }
        @keyframes up {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: none; }
        }
        .btn {
            display: inline-flex; align-items: center; gap: 0.5rem;
            padding: 0.9rem 1.25rem;
            font-weight: 700;
            font-size: 0.88rem;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            border: 0;
            cursor: pointer;
            transition: transform 0.25s var(--ease), background 0.25s, color 0.25s, border-color 0.25s;
        }
        .btn:hover { transform: translateY(-2px); }
        .btn-amber { background: var(--amber); color: var(--void); }
        .btn-amber:hover { background: var(--amber-soft); }
        .btn-line {
            background: transparent;
            color: var(--white);
            border: 1px solid rgba(255,255,255,0.28);
        }
        .btn-line:hover { border-color: var(--white); }

        /* Shared */
        section { padding: 5.5rem 0; position: relative; }
        .kicker {
            font-family: var(--display);
            font-size: 0.95rem;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--amber);
            margin-bottom: 0.7rem;
        }
        .title {
            font-family: var(--display);
            font-size: clamp(2.2rem, 4.2vw, 3.4rem);
            line-height: 1;
            letter-spacing: 0.02em;
            text-transform: uppercase;
            color: var(--white);
            margin-bottom: 1rem;
            max-width: 16ch;
        }
        .sub {
            color: var(--muted);
            font-size: 1.02rem;
            max-width: 36rem;
            font-weight: 500;
            text-align: justify;
            text-justify: inter-word;
            hyphens: auto;
        }

        /* About */
        .about { background: var(--panel); border-block: 1px solid var(--line); }
        .about-grid {
            display: grid;
            grid-template-columns: 1.15fr 0.85fr;
            gap: 3.5rem;
            align-items: start;
        }
        .about-text .title { max-width: 18ch; }
        .about-text p {
            color: var(--muted);
            margin-bottom: 1rem;
            font-size: 1.02rem;
            text-align: justify;
            text-justify: inter-word;
            hyphens: auto;
        }
        .about-text .kicker { text-align: left; }
        .about-text strong { color: var(--text); font-weight: 600; }
        .about-visual {
            position: sticky;
            top: 6rem;
            aspect-ratio: 4/5;
            background:
                linear-gradient(180deg, transparent 40%, rgba(12,14,18,0.85)),
                url('https://images.unsplash.com/photo-1631241470625-8c3cb167ef06?auto=format&fit=crop&w=1000&q=80') center/cover;
            overflow: hidden;
        }
        .about-bar {
            position: absolute; left: 0; right: 0; bottom: 0;
            padding: 1.25rem 1.35rem;
            background: linear-gradient(90deg, var(--amber), #2ba3d4);
            color: var(--void);
        }
        .about-bar b {
            display: block;
            font-family: var(--display);
            font-size: 1.25rem;
            letter-spacing: 0.06em;
            text-transform: uppercase;
        }
        .about-bar span { font-size: 0.85rem; font-weight: 600; }

        /* Vehicular — horizontal scroll feel via stacked bands */
        .vehicular { background: var(--void); }
        .veh-head {
            display: flex; justify-content: space-between; align-items: end;
            gap: 2rem; flex-wrap: wrap; margin-bottom: 2.5rem;
        }
        .bands { display: flex; flex-direction: column; gap: 0.85rem; }
        .band {
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 1.5rem;
            padding: 1.5rem 1.35rem;
            background: var(--panel);
            border: 1px solid var(--line);
            transition: border-color 0.3s, transform 0.3s var(--ease);
        }
        .band:hover {
            border-color: rgba(94,200,242,0.45);
            transform: translateX(6px);
        }
        .band-idx {
            font-family: var(--display);
            font-size: 2.4rem;
            color: var(--amber);
            line-height: 1;
            min-width: 2.5rem;
        }
        .band h3 {
            font-family: var(--display);
            font-size: 1.45rem;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: var(--white);
            margin-bottom: 0.35rem;
        }
        .band p { color: var(--muted); font-size: 0.96rem; max-width: 40rem; text-align: justify; text-justify: inter-word; hyphens: auto; }

        /* Industry */
        .industry {
            background:
                linear-gradient(180deg, rgba(12,14,18,0.88), rgba(12,14,18,0.92)),
                url('https://images.unsplash.com/photo-1698479603408-1a66a6d9e80f?auto=format&fit=crop&w=1800&q=80') center/cover fixed;
            border-block: 1px solid var(--line);
        }
        .ind-list {
            margin-top: 2.75rem;
            display: grid;
            gap: 0;
            border-top: 1px solid rgba(255,255,255,0.12);
        }
        .ind-row {
            display: grid;
            grid-template-columns: 3rem 1fr 2.5rem;
            gap: 1.25rem;
            align-items: start;
            padding: 1.5rem 0;
            border-bottom: 1px solid rgba(255,255,255,0.12);
        }
        .ind-row i { color: var(--amber); font-size: 1.15rem; margin-top: 0.2rem; }
        .ind-row h3 {
            font-family: var(--display);
            font-size: 1.35rem;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: var(--white);
            margin-bottom: 0.4rem;
        }
        .ind-row p { color: rgba(232,236,242,0.68); max-width: 42rem; }
        .ind-row .arrow {
            color: var(--muted);
            transition: color 0.2s, transform 0.2s;
            justify-self: end;
        }
        .ind-row:hover .arrow { color: var(--amber); transform: translateX(4px); }

        /* Air */
        .air { background: var(--panel); }
        .air-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
        }
        .checks {
            list-style: none;
            margin-top: 1.5rem;
            margin-bottom: 1.5rem;
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }
        .checks li {
            display: flex; gap: 0.7rem;
            color: var(--muted);
            font-weight: 500;
        }
        .checks i { color: var(--amber); margin-top: 0.2rem; }
        .facts {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.85rem;
            align-content: start;
        }
        .facts-intro {
            grid-column: 1 / -1;
            margin-bottom: 0.25rem;
        }
        .fact {
            padding: 1.35rem 1.25rem;
            border: 1px solid var(--line);
            background: var(--void);
            min-height: 100%;
            transition: border-color 0.25s, transform 0.25s var(--ease);
        }
        .fact:hover {
            border-color: rgba(94,200,242,0.45);
            transform: translateY(-2px);
        }
        .fact h4 {
            font-family: var(--display);
            font-size: 1.15rem;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: var(--white);
            margin-bottom: 0.55rem;
        }
        .fact p { color: var(--muted); font-size: 0.9rem; }
        .fact-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 0.55rem;
        }
        .fact-list li {
            display: flex;
            gap: 0.55rem;
            align-items: flex-start;
            color: var(--muted);
            font-size: 0.88rem;
            line-height: 1.45;
        }
        .fact-list i {
            color: var(--amber);
            margin-top: 0.15rem;
            flex-shrink: 0;
        }

        /* Clients */
        .clients { padding: 4rem 0; }
        .clients .title { max-width: none; margin-bottom: 0.85rem; }
        .clients-lead {
            max-width: 42rem;
            margin-bottom: 2rem;
        }
        .client-row {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.15rem;
            align-items: stretch;
        }
        .client-row-second {
            grid-template-columns: repeat(3, minmax(0, 220px));
            justify-content: center;
            margin-top: 1.15rem;
        }
        .client {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 150px;
            padding: 1.35rem 1.5rem;
            border: 1px solid var(--line);
            background: #fff;
            transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
        }
        .client:hover {
            border-color: rgba(94,200,242,0.55);
            transform: translateY(-3px);
            box-shadow: 0 10px 28px rgba(0,0,0,0.25);
        }
        .client img {
            max-width: 100%;
            max-height: 100px;
            width: auto;
            height: auto;
            object-fit: contain;
            display: block;
        }

        /* Contact */
        .contact { background: var(--panel); border-top: 1px solid var(--line); }
        .contact-head {
            text-align: center;
            margin-bottom: 2.75rem;
        }
        .contact-head .kicker { margin-bottom: 0.55rem; }
        .contact-head h2 {
            font-family: var(--display);
            font-size: clamp(2.2rem, 4vw, 3.2rem);
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: var(--white);
            margin-bottom: 0.7rem;
        }
        .contact-head p {
            color: var(--muted);
            max-width: 36rem;
            margin: 0 auto;
        }
        .contact-grid {
            display: grid;
            grid-template-columns: 0.95fr 1.05fr;
            gap: 2rem;
            align-items: start;
        }
        .contact-info h3 {
            font-family: var(--display);
            font-size: 1.7rem;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: var(--white);
            margin-bottom: 0.7rem;
        }
        .contact-info > p {
            color: var(--muted);
            margin-bottom: 1.5rem;
            text-align: justify;
            text-justify: inter-word;
            hyphens: auto;
        }
        .method {
            display: flex; gap: 0.9rem;
            padding: 1rem 0;
            border-bottom: 1px solid var(--line);
        }
        .method i {
            width: 2.4rem; height: 2.4rem;
            display: grid; place-items: center;
            background: var(--amber);
            color: var(--void);
            flex-shrink: 0;
        }
        .method strong {
            display: block;
            font-size: 0.75rem;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--muted);
            margin-bottom: 0.15rem;
        }
        .method a, .method span { font-weight: 600; color: var(--white); }
        .method a:hover { color: var(--amber); }
        .method-mails {
            display: flex;
            flex-direction: column;
            gap: 0.2rem;
        }
        .method-mails a { word-break: break-all; }
        .contact-form {
            background: var(--void);
            border: 1px solid var(--line);
            padding: 1.75rem 1.5rem;
        }
        .contact-form label {
            display: block;
            font-size: 0.75rem;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--muted);
            font-weight: 600;
            margin-bottom: 0.4rem;
        }
        .contact-form .field { margin-bottom: 1rem; }
        .contact-form input,
        .contact-form textarea {
            width: 100%;
            background: var(--panel);
            border: 1px solid var(--line);
            color: var(--white);
            font-family: var(--sans);
            font-size: 0.98rem;
            padding: 0.8rem 0.9rem;
            outline: none;
            transition: border-color 0.2s;
        }
        .contact-form input:focus,
        .contact-form textarea:focus { border-color: var(--amber); }
        .contact-form textarea { min-height: 130px; resize: vertical; }
        .contact-form .form-actions {
            display: flex;
            justify-content: flex-end;
            margin-top: 0.35rem;
        }
        .contact-form .btn { border: 0; cursor: pointer; }
        .form-status {
            margin-top: 0.85rem;
            font-size: 0.9rem;
            min-height: 1.2em;
        }
        .form-status.ok { color: #4ade80; }
        .form-status.err { color: #f87171; }
        .map {
            margin-top: 2rem;
            min-height: 320px;
            border: 1px solid var(--line);
            overflow: hidden;
            background: var(--void);
        }
        .map iframe {
            width: 100%; height: 100%; min-height: 320px; border: 0;
        }

        footer {
            padding: 2.25rem 0;
            text-align: center;
            color: var(--muted);
            font-size: 0.88rem;
            border-top: 1px solid var(--line);
        }
        footer .brand { display: inline-block; margin-bottom: 0.5rem; }
        footer a {
            color: var(--amber);
            text-decoration: none;
            font-weight: 600;
        }
        footer a:hover { color: var(--amber-soft); text-decoration: underline; }

        .whatsapp-float {
            position: fixed;
            right: 1.25rem;
            bottom: 1.25rem;
            z-index: 150;
            width: 3.5rem;
            height: 3.5rem;
            border-radius: 50%;
            background: #25d366;
            color: #fff;
            display: grid;
            place-items: center;
            font-size: 1.75rem;
            box-shadow: 0 10px 28px rgba(37, 211, 102, 0.35);
            transition: transform 0.25s var(--ease), box-shadow 0.25s;
        }
        .whatsapp-float:hover {
            transform: translateY(-3px) scale(1.06);
            box-shadow: 0 14px 32px rgba(37, 211, 102, 0.5);
        }

        .reveal {
            opacity: 0;
            transform: translateY(22px);
            transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
        }
        .reveal.in { opacity: 1; transform: none; }

        @media (max-width: 960px) {
            .about-grid, .air-grid, .contact-grid { grid-template-columns: 1fr; }
            .about-visual { position: relative; top: auto; max-height: 360px; aspect-ratio: 16/10; }
            .facts { grid-template-columns: 1fr; }
            .industry { background-attachment: scroll; }
            .client-row,
            .client-row-second {
                grid-template-columns: repeat(2, 1fr);
                justify-content: stretch;
            }
            .client-row-second { margin-top: 0.75rem; }
            .client { height: 135px; }
            .client img { max-height: 88px; }
        }
        @media (max-width: 768px) {
            .burger { display: flex; }
            .links {
                position: fixed; top: 0; right: -100%;
                width: min(300px, 86vw); height: 100vh;
                background: var(--panel);
                border-left: 1px solid var(--line);
                flex-direction: column; align-items: flex-start;
                padding: 5.5rem 1.5rem 2rem;
                gap: 1.15rem;
                transition: right 0.35s var(--ease);
            }
            .links.open { right: 0; }
            .client-row,
            .client-row-second {
                grid-template-columns: 1fr 1fr;
                gap: 0.75rem;
            }
            .client { height: 120px; padding: 1rem; }
            .client img { max-height: 76px; }
        }