:root {
    /* Quattro / Dark Minimal Palette */
    --bg-color: #030303;
    --bg-gradient: radial-gradient(circle at 50% 0%, #1a1a1a 0%, #030303 100%);
    --text-primary: #ffffff;
    --text-secondary: #999999;
    --text-tertiary: #555555;

    --accent-color: #0099ff;
    /* Blue from config */

    --card-bg: rgba(255, 255, 255, 0.03);
    --card-border: rgba(255, 255, 255, 0.08);
    --card-hover-border: rgba(255, 255, 255, 0.2);

    --font-main: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    --container-width: 1200px;
    --easing: cubic-bezier(0.16, 1, 0.3, 1);
    --easing-spring: cubic-bezier(0.68, -0.6, 0.32, 1.6);

    --radius-sm: 8px;
    --radius-md: 12px;
}

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

body {
    background: var(--bg-color);
    background-image: var(--bg-gradient);
    color: var(--text-primary);
    font-family: var(--font-main);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 40px;
}

a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

a:hover {
    opacity: 0.8;
}

/* Header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 24px 0;
    background: rgba(3, 3, 3, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 100;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: -0.02em;
}

#nav-logo {
    height: 32px;
    width: auto;
    border-radius: 4px;
    /* Slight roundness if it's a square logo */
}

nav {
    display: flex;
    align-items: center;
    gap: 32px;
}

nav a {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: color 0.2s;
}

nav a:hover {
    color: var(--text-primary);
}

.hamburger-menu {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 102;
    /* Above nav overlay */
}

.hamburger-menu span {
    width: 100%;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Hamburger Animation when active */
.hamburger-menu.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 6px);
}

.hamburger-menu.active span:nth-child(2) {
    opacity: 0;
}

.hamburger-menu.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -6px);
}

@media (max-width: 768px) {
    .hamburger-menu {
        display: flex;
    }

    nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(3, 3, 3, 0.95);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 40px;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: all 0.3s ease;
        z-index: 101;
    }

    nav.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    nav a {
        font-size: 24px;
        font-weight: 600;
        color: var(--text-primary);
    }
}

.lang-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
    font-family: var(--font-main);
}

.lang-btn:hover {
    background: var(--text-primary);
    color: #000;
    border-color: var(--text-primary);
}

/* Hero */
.hero {
    padding-top: 120px;
    /* Reduced specific padding, let flex center it */
    padding-bottom: 40px;
    min-height: 100vh;
    min-height: 100dvh;
    /* Mobile browser friendly */
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    text-align: left;
    overflow: hidden;
    /* integrated video crop */
}

.hero-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    /* Dark overlay for readability */
    z-index: 1;
}

.hero .container {
    position: relative;
    z-index: 2;
    /* Content above video */
}

.hero-top-row {
    display: flex;
    align-items: center;
    gap: 32px;
    margin-bottom: 140px;
    /* Increased from 80px */
}

.hero-logo-circle {
    width: 60px;
    /* Reduced from 80 */
    height: 60px;
    /* Reduced from 80 */
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.logo-text {
    color: #000;
    font-weight: 700;
    font-size: 16px;
    /* Reduced from 20 */
    font-family: serif;
    /* T&H looks serif-like in reference? Using sans for now, user can tweak */
}

.hero-description {
    max-width: 400px;
    color: #fff;
    /* User requested white */
    font-size: 12px;
    /* Reduced from 14 */
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hero-headline-row {
    margin-bottom: 80px;
}

.headline {
    font-size: clamp(64px, 10vw, 120px);
    font-weight: 500;
    letter-spacing: -0.05em;
    line-height: 0.9;
    color: #fff;
    margin: 0;
}

.mobile-br {
    display: none;
}

@media (max-width: 768px) {
    .mobile-br {
        display: block;
        /* Force break on mobile */
    }

    .headline {
        font-size: 56px;
        /* Slightly smaller than 64 to fit "Transformação" if needed, or keeping it huge */
        /* User asked for "larger" on mobile. Default was clamp(64px...), so min 64.
           If words are split, we can go BIGGER. */
        font-size: 72px;
    }
}

/* Specific styling for "de Excelência" part handled via JS or HTML?
   The user asked for "Digital" white and "de Excelência" grey. 
   We might need to adjust HTML or just use specific CSS targeting if possible, 
   but for now let's make the whole thing white/grey mix or handle via opacity in config. 
   Actually, let's keep it simple for now or use JS to inject spans? 
   The config has the whole string. 
*/

.hero-footer-row {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 60px;
}

.location-text {
    color: var(--text-tertiary);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space: nowrap;
}

.separator-line {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    width: 100%;
}

/* Remove old/unused classes */
.tagline,
.subheadline,
.hero-visual,
.hero-content,
.gradient-glow {
    display: none;
}

.intro-text {
    font-size: 18px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: 40px;
    max-width: 800px;
}


.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-size: 15px;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: transform 0.2s var(--easing-spring), background-color 0.2s ease;
    border: none;
}

.btn-primary {
    background: var(--text-primary);
    color: #000;
}

.btn-primary:hover {
    background: #e6e6e6;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -5px rgba(255, 255, 255, 0.1);
}

/* Description Section (New 2-Col Layout) */
.description-section {
    padding-top: 100px;
    /* Added spacing as requested */
    /* Already padded by hero bottom */
    padding-bottom: 140px;
}

.description-grid {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
}

/* Mobile First Ordering: Image (-1), Text (0) */
.description-image-col {
    order: -1;
    width: 100%;
    position: relative;
    border-radius: var(--radius-sm);
    overflow: hidden;
    aspect-ratio: 16/10;
    /* Wider on mobile */
}

.description-text-col {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.large-description {
    font-size: 24px;
    line-height: 1.5;
    font-weight: 500;
    color: #fff;
    margin-bottom: 40px;
}

/* Desktop Layout for Description */
@media (min-width: 900px) {
    .description-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 80px;
        align-items: stretch;
        /* Stretch to equal height */
    }

    .description-image-col {
        order: 2;
        /* Image on right */
        aspect-ratio: 1/1;
        /* Square on desktop */
        height: auto;
    }

    .description-text-col {
        order: 1;
        /* Text on left */
        justify-content: space-between;
        /* Push link to bottom */
        padding-bottom: 20px;
        /* Align with bottom of image */
    }

    .large-description {
        font-size: 32px;
        /* Larger text on desktop */
        margin-bottom: 0;
    }

    .text-link {
        align-self: flex-start;
        /* Ensure left align */
    }
}

.scroll-word {
    opacity: 0.2;
    /* Initial state for karaoke */
    transition: opacity 0.1s linear;
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: color 0.2s;
}

.text-link:hover {
    color: #fff;
}

.arrow-icon {
    font-family: system-ui;
    /* For the arrow char */
    font-size: 18px;
    transition: transform 0.2s var(--easing-spring);
}

.text-link:hover .arrow-icon {
    transform: translate(2px, -2px);
}

.description-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    opacity: 0.8;
    transition: filter 0.3s, opacity 0.3s;
}

.description-image:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* Sections General */
section {
    padding: 100px 0;
    /* Reduced for mobile */
}

.section-title {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-tertiary);
    margin-bottom: 60px;
    font-weight: 600;
}

/* Client List */
/* Clients Section */
.clients-grid {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.clients-info-col {
    order: 1;
}

.clients-link-wrapper {
    order: 2;
    /* Mobile: Link comes second */
    margin-bottom: 20px;
}

.clients-list-col {
    order: 3;
    /* Mobile: List comes last */
}

.client-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.client-item {
    display: flex;
    flex-direction: column;
    /* Mobile: Stacked name/type */
    gap: 8px;
    /* Spacing between name and type */
    padding: 24px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: background 0.3s ease;
}

.client-name {
    font-size: 24px;
    font-weight: 500;
}

.client-type {
    color: var(--text-secondary);
    font-size: 15px;
}

/* Desktop Clients Layout */
@media (min-width: 900px) {
    .clients-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "info list"
            "link list";
        gap: 80px;
        align-items: start;
    }

    .clients-info-col {
        grid-area: info;
    }

    .clients-link-wrapper {
        grid-area: link;
        align-self: end;
        /* Push to bottom if height allows, or just place in grid row */
        margin-top: auto;
        /* Ensure it sits at bottom of viewport relative to list? List might be long. */
        /* If grid row is auto, it sits below info. */
        /* We want it pinned to bottom of the list height? */
        /* Let's make the grid rows automatic based on content? */
        /* Actually, if list is long, we want link at bottom of left column. */
        /* height: 100% of the grid? */
    }

    .clients-list-col {
        grid-area: list;
        grid-row: 1 /span 2;
        /* Span both info and link rows */
    }

    .client-item {
        flex-direction: row;
        /* Desktop: Side by side */
        justify-content: space-between;
        align-items: center;
        padding: 32px 0;
    }

    .client-name {
        font-size: 32px;
    }
}

/* Specialties (Horizontal Scroll) */
.specialties-section {
    height: 400vh;
    /* Scrolldistance */
    position: relative;
    padding: 0;
    /* Remove default section padding */
}

.specialties-sticky-wrapper {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #050505;
    /* Ensure background matches to cover content below */
}

.specialties-track {
    display: flex;
    gap: 40px;
    padding-left: max(20px, (100vw - 1200px) / 2);
    /* Align first item to container left */
    padding-right: 100px;
    width: max-content;
}

.specialty-card {
    width: 60vw;
    /* Wide cards */
    max-width: 600px;
    height: 400px;
    background: #0f0f0f;
    border-radius: var(--radius-md);
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.3s;
}

.specialty-card:hover {
    background: #141414;
    border-color: rgba(255, 255, 255, 0.1);
}

.specialty-number {
    font-size: 80px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.1);
    line-height: 1;
    align-self: flex-end;
    /* Number on right as in screenshot */
    margin-bottom: auto;
    /* Push it up */
}

.specialty-title {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 24px;
    line-height: 1.2;
}

.specialty-desc {
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1.6;
    max-width: 400px;
}

.specialties-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* Explicit left align */
    gap: 32px;
    margin-bottom: 60px;
    width: 100%;
    margin-top: 60px;
    /* Add some top spacing inside sticky wrapper */
}

.specialties-header .section-title {
    margin-bottom: 0;
    white-space: nowrap;
    text-align: left;
}

.scroll-progress-track {
    flex-grow: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
    /* More visible */
    position: relative;
    height: 1.5px;
}

.scroll-progress-bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: #fff;
    width: 0%;
    transition: width 0.1s linear;
}

/* Featured Products Section */
.featured-products {
    padding: 100px 0;
}

.featured-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 768px) {
    .featured-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
}

.featured-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    padding: 32px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.featured-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.featured-content .text-link {
    display: inline-flex;
    margin-top: auto;
}

@media (max-width: 900px) {
    .specialties-section {
        height: auto;
        padding: 80px 0;
    }

    .specialties-sticky-wrapper {
        position: relative;
        height: auto;
        display: block;
        background: transparent;
    }

    .specialties-track {
        flex-direction: column;
        width: 100%;
        padding: 0 20px;
        gap: 20px;
    }

    .specialty-card {
        width: 100%;
        max-width: none;
        height: auto;
        min-height: 300px;
        padding: 40px;
    }

    .specialty-number {
        font-size: 60px;
    }
}

/* Footer / Contact Cards */
.footer-headline {
    font-size: clamp(40px, 5vw, 64px);
    margin-bottom: 80px;
    text-align: center;
    letter-spacing: -0.03em;
    font-weight: 600;
}

.contact-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    margin-bottom: 120px;
}

.card {
    background: var(--card-bg);
    padding: 40px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--card-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
    font-weight: 500;
    transition: all 0.3s var(--easing-spring);
}

.card:hover {
    border-color: var(--card-hover-border);
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
}

.icon {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: transform 0.3s var(--easing);
}

.card:hover .icon {
    transform: rotate(-45deg);
    background: var(--text-primary);
    color: #000;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 60px;
    padding-bottom: 60px;
    font-size: 14px;
    color: var(--text-secondary);
    display: flex;
    justify-content: center;
}

.copyright {
    display: flex;
    gap: 40px;
    opacity: 0.6;
}

/* Animations */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s var(--easing), transform 0.8s var(--easing);
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

.delay-1 {
    transition-delay: 0.1s;
}

.delay-2 {
    transition-delay: 0.2s;
}

.delay-3 {
    transition-delay: 0.3s;
}



/* Mobile */
@media (max-width: 900px) {
    .headline {
        font-size: 48px;
    }

    .specialties-grid {
        grid-template-columns: 1fr;
    }

    .specialty-item {
        aspect-ratio: auto;
        min-height: 200px;
    }

    .client-item {
        padding: 30px 0;
    }

    .client-name {
        font-size: 24px;
    }

    .container {
        padding: 0 24px;
    }

    .copyright {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
}