:root {
    --bg-dark: #0f0f11;
    --bg-panel: rgba(26, 26, 30, 0.85); /* Semi-transparent for 3D visibility */
    --accent: #22AB87;
    --text-main: #ffffff;
    --text-muted: #b0b0b8;
    --font-head: 'Rajdhani', sans-serif;
    --font-body: 'Barlow', sans-serif;
}

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

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: var(--font-body);
    overflow-x: hidden;
}

/* 3D Container - FIXED BACKGROUND */
#canvas-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0; /* Behind nav, but interplays with sections */
    pointer-events: none;
}

/* Navbar */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 1.5rem 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    background: rgba(15, 15, 17, 0.9);
    backdrop-filter: blur(10px);
}

.logo {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: 2px;
}

.logo .highlight {
    color: var(--accent);
}

.nav-right {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.lang-btn {
    background: none;
    border: 1px solid var(--text-muted);
    color: var(--text-main);
    padding: 0.5rem 1rem;
    cursor: pointer;
    font-family: var(--font-head);
    font-weight: 700;
    transition: all 0.3s;
}

.lang-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.cta-btn {
    background: var(--accent);
    color: var(--bg-dark);
    text-decoration: none;
    padding: 0.7rem 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    font-family: var(--font-head);
    transition: transform 0.2s;
}

.cta-btn:hover {
    transform: translateY(-2px);
}

/* Sections */
.panel {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    padding: 4rem 10%;
    /* Important: Z-index 1 to sit above the 3D canvas base, but we might want transparency */
    z-index: 1;
    pointer-events: none; /* Let clicks pass through to 3D if needed, but usually we want text selection */
}

/* Re-enable pointer events for content */
.panel .content, .panel .content-split, .panel .cards-container, .panel form, .panel footer {
    pointer-events: auto;
}

h1 {
    font-family: var(--font-head);
    font-size: 6rem;
    line-height: 0.9;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

h2 {
    font-family: var(--font-head);
    font-size: 3.5rem;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

p {
    font-size: 1.2rem;
    color: var(--text-muted);
    max-width: 550px;
    line-height: 1.6;
}

/* Hero */
.hero {
    align-items: flex-start;
}

/* Remove solid background overlays to show 3D */
.hero .bg-overlay {
    display: none;
}

.scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 10%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    letter-spacing: 2px;
}

.scroll-indicator .line {
    width: 1px;
    height: 60px;
    background: var(--accent);
}

/* Split Layout */
.content-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

/* Visual Block: Now often empty because 3D is there, or used for spacing */
.visual-block {
    min-height: 200px; 
}

/* Context Section */
#context {
    /* Slight background to read text over 3D if it passes behind */
    background: linear-gradient(90deg, rgba(15,15,17,0.9) 0%, rgba(15,15,17,0.4) 100%);
}

/* Solutions Cards */
.light {
    /* Use a semi-transparent light theme or keep it dark for better 3D contrast? 
       Let's keep it light but maybe just panels, not full width bg?
       Actually, full width light bg obscures the 3D model fixed behind.
       Let's make this section glass-morphism dark or just solid panels.
       User wants "modern". Dark is safer for 3D visibility.
       Let's stick to dark theme but different shade.
    */
    background: rgba(30, 30, 35, 0.8);
    backdrop-filter: blur(5px);
    color: var(--text-main);
}
.light h2 { color: var(--text-main); }
.light p { color: var(--text-muted); }

.cards-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

.card {
    background: rgba(255, 255, 255, 0.05);
    padding: 2rem;
    border-top: 4px solid var(--accent);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    transition: transform 0.3s;
    backdrop-filter: blur(10px);
}

.card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.1);
}

.card-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.card h3 {
    font-family: var(--font-head);
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

/* Product Section */
#product {
    /* Make room for the 3D model on the right */
    background: linear-gradient(270deg, rgba(15,15,17,0.3) 0%, rgba(15,15,17,0.9) 50%);
}

/* Specs */
.specs-list {
    list-style: none;
    display: flex;
    gap: 2rem;
    margin-top: 2rem;
}

.specs-list li {
    display: flex;
    flex-direction: column;
}

.spec-val {
    font-size: 2rem;
    font-family: var(--font-head);
    color: var(--accent);
    font-weight: 700;
}

.spec-label {
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* Contact */
.yellow {
    background: var(--accent);
    color: var(--bg-dark);
    align-items: center;
    text-align: center;
    /* Solid background for footer area is fine */
    z-index: 2; 
    pointer-events: auto;
}

.yellow h2, .yellow p {
    color: var(--bg-dark);
}

.contact-form {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    width: 100%;
    max-width: 500px;
}

.contact-form input {
    flex: 1;
    padding: 1rem;
    border: none;
    background: rgba(0,0,0,0.1);
    color: var(--bg-dark);
    font-weight: 600;
}

.contact-form input::placeholder {
    color: rgba(0,0,0,0.5);
}

.submit-btn {
    padding: 1rem 2rem;
    background: var(--bg-dark);
    color: var(--accent);
    border: none;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    font-family: var(--font-head);
}

footer {
    margin-top: 4rem;
    font-size: 0.9rem;
    opacity: 0.6;
}

/* Responsive */
@media (max-width: 768px) {
    h1 { font-size: 3.5rem; }
    h2 { font-size: 2.5rem; }
    .content-split, .cards-container {
        grid-template-columns: 1fr;
    }
    .contact-form { flex-direction: column; }
    /* Hide 3D on mobile or fix it to background simply */
}