/* ============================================
   SYMA GROUP — Variant 05: Minimal Swiss
   Inspired by Swiss/Bauhaus design principles
   Typography as dominant element
   ============================================ */

/* --- Reset & Base --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --white: #FFFFFF;
    --black: #000000;
    --red: #3c79e6;
    --navy: #0a192b;
    --gray-100: #F5F5F5;
    --gray-200: #EEEEEE;
    --gray-300: #E0E0E0;
    --gray-400: #BDBDBD;
    --gray-500: #9E9E9E;
    --gray-600: #757575;
    --gray-700: #616161;
    --gray-800: #424242;
    --gray-900: #212121;
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --grid-gap: 24px;
    --container-max: 1200px;
    --section-padding: 120px;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font);
    font-weight: 400;
    color: var(--black);
    background-color: var(--white);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* --- Container / Grid System --- */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--grid-gap);
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

p {
    line-height: 1.7;
    color: var(--gray-700);
}

a {
    color: var(--black);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--red);
}

/* --- Buttons --- */
.btn {
    display: inline-block;
    padding: 10px 22px;
    font-size: 0.82rem;
    font-family: var(--font);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: 2px solid var(--black);
    border-radius: 0;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    text-align: center;
    text-decoration: none;
    line-height: 1.4;
}

.btn-primary {
    background-color: var(--navy);
    color: var(--white);
    border-color: var(--navy);
}

.btn-primary:hover {
    background-color: var(--black);
    border-color: var(--black);
    color: var(--white);
}

.btn-outline {
    background-color: transparent;
    color: var(--black);
    border-color: var(--black);
}

.btn-outline:hover {
    background-color: var(--black);
    color: var(--white);
}

/* --- Navigation --- */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: var(--white);
    border-bottom: 1px solid var(--black);
    transition: background-color 0.3s ease;
}

.nav-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--grid-gap);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
}

.nav-logo-img {
    height: 40px;
    width: auto;
    filter: brightness(0);
    position: relative;
    z-index: 9999;
}

.nav-menu {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 0;
}

.nav-link {
    display: block;
    padding: 10px 22px;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--black);
    border-radius: 0;
    transition: color 0.2s ease;
    text-decoration: none;
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 6px;
    left: 22px;
    right: 22px;
    height: 2px;
    background-color: var(--red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.2s ease;
}

.nav-link:hover::after {
    transform: scaleX(1);
}

.nav-link:hover {
    color: var(--red);
}

.nav-cta {
    background-color: var(--navy);
    color: var(--white) !important;
    margin-left: 8px;
}

.nav-cta::after {
    display: none;
}

.nav-cta:hover {
    background-color: var(--black);
    color: var(--white) !important;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--black);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.nav-toggle.active span:nth-child(2) {
    opacity: 0;
}

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

/* --- Language Switcher --- */
.lang-switcher {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: 16px;
    padding-left: 16px;
    border-left: 1px solid var(--gray-300, #d4d4d4);
}

.lang-link {
    display: inline-block;
    padding: 6px 9px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gray-500, #888);
    text-decoration: none;
    border-radius: 0;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.lang-link:hover {
    color: var(--black);
}

.lang-link.active {
    color: var(--white);
    background-color: var(--black);
}

/* --- Hero Section --- */
.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 140px var(--grid-gap) 80px;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--black);
    max-width: var(--container-max);
    margin: 0 auto;
}

/* Decorative background/foreground image (windmill).
   Sizing notes (important — img is a replaced element, see CSS spec):
   - We cannot use top + bottom + width:auto to define the box. For a
     replaced element that would fall back to its natural size (1024x1536)
     and ignore `bottom`. We set height explicitly and let width track via
     aspect ratio.
   - height: calc(100% - 20px)  = image is nearly the full hero height,
                                  minus a small top gap so the blade tips
                                  don't touch the navbar border.
   - bottom: -60px              pushes the whole image down past the hero
                                separator so the last ~60px of the pole
                                (including the transparent PNG padding and
                                the unattractive ground-level render of
                                the pole base) are clipped by hero's
                                overflow:hidden.
   - right: 0                   image is flush against the right edge of
                                hero's max-width container.
   - width: auto                preserves the natural aspect ratio.
   - z-index: 1                 middle layer: most of the hero content is
                                above this image, but the last line of the
                                headline ("Renewable Assets") is below it
                                so the windmill visually covers those
                                letters (see rules further down).
   - pointer-events: none       so CTA clicks in the hero are never
                                intercepted. */
.hero-bg-image {
    position: absolute;
    right: 0;
    bottom: -60px;
    height: calc(100% - 20px);
    width: auto;
    z-index: 1;
    pointer-events: none;
    user-select: none;
}

/* On narrow viewports the windmill overlaps the text instead of sitting
   behind it, which looks bad. Hide it under ~768px and let the hero go
   back to being a pure text block. */
@media (max-width: 768px) {
    .hero-bg-image {
        display: none;
    }
}

/* IMPORTANT: .hero-content intentionally has NO z-index so it does not
   form its own stacking context. That way individual descendants can be
   stacked *against* .hero-bg-image at the hero's level, which is what we
   need to put one specific line of the headline behind the image while
   keeping everything else in front. */
.hero-content {
    position: relative;
}

/* All of the "always in front of the windmill" hero bits. */
.hero-label,
.hero-subtitle,
.hero-buttons,
.hero-scroll {
    position: relative;
    z-index: 2;
}

/* The headline needs per-line stacking, so do NOT give the h1 a z-index
   either — just make it a positioned ancestor. */
.hero-title {
    position: relative;
}

/* First two lines ("From Agriculture Land to", "Ready-To-Build") paint
   above the windmill. */
.hero-title .typewriter-line {
    position: relative;
    z-index: 2;
}

/* The last line ("Renewable Assets") is the exception: the windmill
   paints OVER these letters. */
.hero-title .typewriter-line:last-child {
    z-index: 2;
}

.hero-label {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--red);
    margin-bottom: 32px;
}

.hero-title {
    font-size: clamp(3rem, 7vw, 6rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.04em;
    margin-bottom: 40px;
    color: var(--black);
}

.hero-title .accent {
    color: var(--red);
}

.hero-title .typewriter-line {
    display: inline;
    position: relative;
}

.hero-title .typewriter-line.typing::after {
    content: '|';
    animation: blink 0.6s steps(1) infinite;
    color: var(--red);
    font-weight: 400;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.hero-subtitle {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--gray-700);
    max-width: 640px;
    margin-bottom: 48px;
}

.hero-buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.hero-scroll {
    position: absolute;
    bottom: 40px;
    left: var(--grid-gap);
    display: flex;
    align-items: center;
    gap: 12px;
}

.hero-scroll span {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--gray-500);
}

.scroll-line {
    width: 60px;
    height: 1px;
    background-color: var(--gray-400);
    position: relative;
    overflow: hidden;
}

.scroll-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: var(--red);
    animation: scrollLine 2s ease-in-out infinite;
}

@keyframes scrollLine {
    0% { left: -100%; }
    50% { left: 0; }
    100% { left: 100%; }
}

/* --- Section Base --- */
.section {
    padding: var(--section-padding) 0;
    border-bottom: 1px solid var(--gray-300);
}

.section-bordered {
    background-color: var(--gray-100);
}

.section-header {
    margin-bottom: 72px;
}

.section-label {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--red);
    margin-bottom: 16px;
}

.section-title {
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--black);
    line-height: 1.08;
}

.section-sub {
    color: var(--gray-600);
    margin-top: 16px;
    font-size: 0.95rem;
}

/* --- Reveal Animation --- */
[data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-reveal].revealed {
    opacity: 1;
    transform: translateY(0);
}

/* --- Key Metrics --- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.stat-card {
    padding: 40px 24px;
    border: 1px solid var(--black);
    margin-right: -1px;
    margin-bottom: -1px;
    position: relative;
}

.stat-card:hover {
    background-color: var(--black);
}

.stat-card:hover .stat-number,
.stat-card:hover .stat-suffix,
.stat-card:hover .stat-label,
.stat-card:hover .stat-detail {
    color: var(--white);
}

.stat-card:hover .stat-number {
    color: var(--red);
}

.stat-number {
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--black);
    line-height: 1;
    display: inline;
    transition: color 0.2s ease;
}

.stat-suffix {
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    font-weight: 800;
    color: var(--red);
    display: inline;
    margin-left: 4px;
    transition: color 0.2s ease;
}

.stat-label {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--black);
    margin-top: 16px;
    transition: color 0.2s ease;
}

.stat-detail {
    font-size: 0.78rem;
    color: var(--gray-600);
    margin-top: 8px;
    transition: color 0.2s ease;
}

/* --- Leadership --- */
.leadership-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: 72px;
}

.leader-card {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 48px;
    padding: 48px 0;
    border-bottom: 1px solid var(--black);
    align-items: start;
}

.leader-card:first-child {
    border-top: 1px solid var(--black);
}

.leader-photo {
    width: 280px;
    height: 280px;
    overflow: hidden;
    border-radius: 0;
}

.leader-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.leader-info h3 {
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 4px;
}

.leader-role {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--red);
    margin-bottom: 24px;
}

.leader-bio {
    font-size: 0.92rem;
    color: var(--gray-700);
    line-height: 1.7;
    margin-bottom: 12px;
}

/* --- Team Grid --- */
.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.team-card {
    padding: 32px 20px;
    border: 1px solid var(--gray-400);
    margin-right: -1px;
    margin-bottom: -1px;
    text-align: center;
    transition: border-color 0.2s ease;
}

.team-card:hover {
    border-color: var(--black);
    z-index: 1;
}

.team-photo {
    width: 120px;
    height: 120px;
    margin: 0 auto 20px;
    overflow: hidden;
    border-radius: 0;
}

.team-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--gray-200);
}

.team-photo-placeholder svg {
    width: 48px;
    height: 48px;
    color: var(--gray-500);
}

.team-card h4 {
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin-bottom: 4px;
}

.team-role {
    font-size: 0.78rem;
    color: var(--gray-600);
    font-weight: 400;
}

/* --- About --- */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: start;
}

.about-text .lead {
    font-size: 1.15rem;
    font-weight: 400;
    color: var(--black);
    line-height: 1.7;
    margin-bottom: 24px;
    border-left: 3px solid var(--red);
    padding-left: 24px;
}

.about-text p {
    font-size: 0.95rem;
    margin-bottom: 20px;
}

.about-highlights {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.highlight-card {
    display: flex;
    gap: 24px;
    padding: 32px 0;
    border-bottom: 1px solid var(--gray-300);
    align-items: flex-start;
}

.highlight-card:first-child {
    border-top: 1px solid var(--gray-300);
}

.highlight-number {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--red);
    min-width: 32px;
    line-height: 1.3;
}

.highlight-card h3 {
    font-size: 1rem;
    font-weight: 800;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

.highlight-card p {
    font-size: 0.88rem;
    color: var(--gray-600);
    line-height: 1.6;
}

/* --- Timeline --- */
.timeline {
    position: relative;
    padding-left: 0;
}

.timeline-item {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 48px;
    padding: 32px 0;
    border-bottom: 1px solid var(--gray-400);
    align-items: baseline;
    transition: background-color 0.2s ease;
}

.timeline-item:first-child {
    border-top: 1px solid var(--gray-400);
}

.timeline-item:hover {
    background-color: var(--white);
    padding-left: 16px;
    padding-right: 16px;
}

.timeline-year {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--red);
    line-height: 1;
}

.timeline-content h3 {
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

.timeline-content p {
    font-size: 0.92rem;
    color: var(--gray-600);
    line-height: 1.6;
}

/* --- Revenue Model --- */
.revenue-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
}

.revenue-card {
    padding: 48px 36px;
    border: 1px solid var(--black);
    margin-right: -1px;
    margin-bottom: -1px;
    position: relative;
}

.revenue-card:hover {
    background-color: var(--black);
}

.revenue-card:hover .revenue-number,
.revenue-card:hover h3,
.revenue-card:hover p,
.revenue-card:hover li {
    color: var(--white);
}

.revenue-card:hover .revenue-number {
    color: var(--red);
}

.revenue-number {
    font-size: 3rem;
    font-weight: 800;
    color: var(--gray-300);
    letter-spacing: -0.03em;
    margin-bottom: 16px;
    transition: color 0.2s ease;
}

.revenue-card h3 {
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 16px;
    letter-spacing: -0.01em;
    transition: color 0.2s ease;
}

.revenue-card > p {
    font-size: 0.9rem;
    color: var(--gray-600);
    margin-bottom: 20px;
    line-height: 1.6;
    transition: color 0.2s ease;
}

.revenue-card ul {
    list-style: none;
    padding: 0;
}

.revenue-card li {
    font-size: 0.85rem;
    color: var(--gray-700);
    padding: 6px 0;
    border-top: 1px solid var(--gray-300);
    transition: color 0.2s ease;
    font-weight: 400;
}

.revenue-card:hover li {
    border-top-color: var(--gray-700);
}

.revenue-card li:last-child {
    padding-bottom: 0;
}

/* --- Strategy --- */
.strategy-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
}

.strategy-card {
    padding: 48px 36px;
    border: 1px solid var(--gray-400);
    margin-right: -1px;
    margin-bottom: -1px;
    position: relative;
}

.strategy-card:hover {
    border-color: var(--black);
    z-index: 1;
}

.strategy-number {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--red);
    letter-spacing: -0.02em;
    margin-bottom: 20px;
    line-height: 1;
}

.strategy-card h3 {
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 16px;
    letter-spacing: -0.01em;
}

.strategy-card p {
    font-size: 0.9rem;
    color: var(--gray-600);
    line-height: 1.6;
}

/* --- Investment --- */
.invest-content {
    max-width: 720px;
}

.invest-content p {
    font-size: 1rem;
    color: var(--gray-700);
    margin-bottom: 24px;
    line-height: 1.7;
}

.invest-cta {
    display: flex;
    gap: 16px;
    margin-top: 40px;
    flex-wrap: wrap;
}

/* --- FAQ --- */
.faq-list {
    max-width: 840px;
}

.faq-item {
    border-bottom: 1px solid var(--gray-400);
}

.faq-item:first-child {
    border-top: 1px solid var(--gray-400);
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 24px 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--font);
    font-size: 1rem;
    font-weight: 700;
    color: var(--black);
    letter-spacing: -0.01em;
    transition: color 0.2s ease;
}

.faq-question:hover {
    color: var(--red);
}

.faq-question svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
    stroke: var(--black);
}

.faq-question[aria-expanded="true"] svg {
    transform: rotate(45deg);
    stroke: var(--red);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
}

.faq-answer.open {
    max-height: 500px;
    padding-bottom: 24px;
}

.faq-answer p {
    font-size: 0.92rem;
    color: var(--gray-600);
    line-height: 1.7;
}

/* --- Locations (dark section) --- */
.section-dark {
    background-color: var(--navy);
    color: var(--white);
    border-bottom: none;
    position: relative;
    overflow: hidden;
}

.locations-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.locations-title {
    font-size: clamp(2.4rem, 5vw, 4rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: 16px;
}

.locations-email {
    margin-bottom: 40px;
}

.locations-email a {
    color: var(--red);
    font-size: 1rem;
    text-decoration: none;
}

.locations-email a:hover {
    text-decoration: underline;
}

.locations-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.location-item h4 {
    font-size: 0.92rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--white);
}

.location-item p {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--gray-400);
}

.locations-map {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.locations-map img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 80%;
    opacity: 0.9;
}

/* --- Contact --- */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 72px;
    align-items: start;
}

.contact-item {
    margin-bottom: 32px;
}

.contact-item h4 {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--black);
    margin-bottom: 8px;
}

.contact-item p {
    font-size: 0.95rem;
    color: var(--gray-700);
}

.contact-item a {
    color: var(--red);
    text-decoration: none;
    font-weight: 400;
}

.contact-item a:hover {
    text-decoration: underline;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    font-family: var(--font);
    font-size: 0.92rem;
    padding: 14px 16px;
    border: 1px solid var(--gray-400);
    border-radius: 0;
    background-color: var(--white);
    color: var(--black);
    outline: none;
    transition: border-color 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    border-color: var(--black);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: var(--gray-500);
}

.contact-form textarea {
    resize: vertical;
    min-height: 120px;
}

.contact-form select {
    cursor: pointer;
    color: var(--gray-500);
}

.contact-form select:valid {
    color: var(--black);
}

/* Honeypot: visually hidden but present in DOM and tab order excluded. */
.form-honeypot {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Status bar under the form: empty by default, color-coded when active. */
.form-status {
    font-size: 0.88rem;
    line-height: 1.5;
    padding: 0;
    min-height: 0;
    transition: padding 0.2s ease;
}

.form-status:empty {
    display: none;
}

.form-status.is-pending,
.form-status.is-success,
.form-status.is-error {
    padding: 14px 16px;
    border-left: 4px solid var(--black);
    background: var(--gray-100, #f4f4f4);
}

.form-status.is-pending {
    border-left-color: var(--gray-500, #888);
    color: var(--gray-700, #444);
}

.form-status.is-success {
    border-left-color: #2a7f3f;
    background: #e9f6ec;
    color: #1b5e28;
}

.form-status.is-error {
    border-left-color: var(--accent, #d13f3f);
    background: #fbecec;
    color: #8a1f1f;
}

/* Disabled submit button while sending. */
.contact-form button[disabled] {
    opacity: 0.6;
    cursor: wait;
}

/* --- Footer --- */
.footer {
    padding: 64px 0 40px;
    border-top: 2px solid var(--black);
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.footer-logo-img {
    height: 36px;
    width: auto;
    filter: brightness(0);
    margin-bottom: 12px;
}

.footer-brand p {
    font-size: 0.85rem;
    color: var(--gray-600);
}

.footer-links {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.footer-links a {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--black);
    text-decoration: none;
    position: relative;
}

.footer-links a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: var(--red);
    transition: width 0.2s ease;
}

.footer-links a:hover::after {
    width: 100%;
}

.footer-links a:hover {
    color: var(--red);
}

.footer-bottom {
    padding-top: 32px;
    border-top: 1px solid var(--gray-300);
}

.footer-bottom p {
    font-size: 0.78rem;
    color: var(--gray-600);
}

.footer-disclaimer {
    margin-top: 8px;
    font-size: 0.72rem !important;
    color: var(--gray-500) !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
    :root {
        --section-padding: 80px;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .locations-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .locations-list {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .locations-map {
        display: none;
    }

    .leader-card {
        grid-template-columns: 220px 1fr;
        gap: 32px;
    }

    .leader-photo {
        width: 220px;
        height: 220px;
    }
}

@media (max-width: 768px) {
    :root {
        --section-padding: 64px;
        --grid-gap: 20px;
    }

    /* Nav Mobile */
    .nav-menu {
        display: none;
        position: fixed;
        top: 64px;
        left: 0;
        width: 100%;
        background-color: var(--white);
        flex-direction: column;
        padding: 24px;
        border-bottom: 1px solid var(--black);
        gap: 0;
    }

    .nav-menu.active {
        display: flex;
    }

    .nav-link {
        padding: 12px 0;
        border-bottom: 1px solid var(--gray-200);
    }

    .nav-link::after {
        display: none;
    }

    .nav-cta {
        margin-left: 0;
        margin-top: 12px;
        text-align: center;
        display: block;
    }

    .lang-switcher {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
        justify-content: center;
        gap: 6px;
    }

    .nav-toggle {
        display: flex;
    }

    /* Hero */
    .hero {
        padding: 120px var(--grid-gap) 60px;
        min-height: auto;
    }

    .hero-title {
        font-size: clamp(2.2rem, 8vw, 3.5rem);
    }

    .hero-scroll {
        display: none;
    }

    /* Stats */
    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .stat-card {
        padding: 28px 20px;
    }

    /* Leadership */
    .leader-card {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .leader-photo {
        width: 100%;
        height: 280px;
    }

    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Revenue + Strategy */
    .revenue-grid,
    .strategy-grid {
        grid-template-columns: 1fr;
    }

    .revenue-card,
    .strategy-card {
        padding: 36px 24px;
    }

    /* Footer */
    .footer-content {
        flex-direction: column;
        gap: 32px;
    }

    .footer-links {
        gap: 16px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }

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

    .hero-buttons {
        flex-direction: column;
    }

    .hero-buttons .btn {
        text-align: center;
    }

    .invest-cta {
        flex-direction: column;
    }

    .invest-cta .btn {
        text-align: center;
    }

    .timeline-item {
        grid-template-columns: 80px 1fr;
        gap: 24px;
    }

    .timeline-year {
        font-size: 1.4rem;
    }
}

/* LinkedIn Links */
.social-links { margin-top: 12px; }
.social-links a { color: inherit; opacity: 0.6; transition: opacity 0.3s; }
.social-links a:hover { opacity: 1; }
.linkedin-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 0.82rem; font-weight: 500; opacity: 0.7; transition: opacity 0.3s; }
.linkedin-link:hover { opacity: 1; }
.team-linkedin { display: inline-block; margin-top: 8px; opacity: 0.5; transition: opacity 0.3s; }
.team-linkedin:hover { opacity: 1; }