:root {
    /* Colors - Apple Clean Style */
    --bg-color: #ffffff;
    --bg-secondary: #f5f5f7;
    /* Apple's light gray background */
    --text-primary: #1d1d1f;
    /* SF Pro Black */
    --text-secondary: #86868b;
    /* SF Pro Gray */
    --accent-color: #0071e3;
    /* Apple Blue */
    --border-color: #d2d2d7;

    /* Typography */
    --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Layout */
    --container-width: 980px;
    /* Apple's standard content width */
    --nav-height: 64px;
    /* Thicker navbar as requested */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-stack);
    background-color: var(--bg-color);
    color: var(--text-primary);
    line-height: 1.47059;
    font-weight: 400;
    letter-spacing: -0.022em;
    overflow-x: hidden;
    padding-top: var(--nav-height);
    /* Prevent content jump */
}

/* Utilities */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 22px;
}

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

/* === Navbar: Floating Glass Panel === */
.navbar {
    position: fixed;
    top: 12px;
    left: 0;
    right: 0;
    margin: 0 auto;
    /* Center without transform */
    width: 96%;
    max-width: 1400px;
    height: var(--nav-height);

    /* Glass Effect */
    background: rgba(255, 255, 255, 0.85);
    /* Slightly clearer */
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(0, 0, 0, 0.05);
    /* Softer border */
    border-radius: 20px;
    /* Subtle roundness, not pill */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

    z-index: 9999;
    transition: opacity 0.6s ease, visibility 0.6s ease, transform 0.6s ease;
}

.navbar.hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px) scale(0.95);
    /* Animate Y only */
    pointer-events: none;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    width: 100%;
    max-width: 100% !important;
    /* Force override */
    padding: 0 20px;
    /* Slightly more breathing room from the absolute edge */
    position: relative;
}

/* Logo - Flex Item */
.logo {
    display: flex;
    align-items: center;
    z-index: 10;
    padding-left: 0;
    /* Remove extra padding */
}

/* CTA / Contact - Right Align */
.navbar .btn {
    justify-self: end;
    margin-right: 0;
    /* Reset */
    z-index: 10;
}

.logo img {
    height: 22px;
    width: auto;
    display: block;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.logo:hover img {
    opacity: 1;
}

/* Links - Absolute Center (The "Apple" Way) */
.nav-links {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 32px;
    z-index: 5;
    /* Below logo/btn if overlap functionality needed, but usually fine */
}

.nav-links a {
    font-size: 13px;
    /* Apple uses 12px for nav */
    color: rgba(0, 0, 0, 0.85);
    font-weight: 500;
    /* Medium weight */
    letter-spacing: -0.01em;
}

.nav-links a:hover {
    color: var(--accent-color);
}


.mobile-toggle {
    display: none;
    justify-self: end;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    line-height: 0;
}


/* === Hero Section === */
/* === Hero Section === */
.hero {
    padding-top: 1px;
    padding-bottom: 0;
    min-height: 1vh;
    display: flex;
    align-items: center;
    position: relative;
    /* Ensure relative for absolute canvas */
    overflow: hidden;
    background: #fff;
    z-index: 2;
}

/* Canvas Background */
#hero-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    /* Behind text */
    pointer-events: none;
    /* Let clicks pass through */
}

.hero-content {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    /* Restore Grid Layout */
    gap: 60px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    height: 100%;
}

.hero-text {
    text-align: left;
}

.hero-title {
    font-size: 64px;
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #1d1d1f 0%, #434344 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 24px;
}

.hero-subtitle {
    font-size: 24px;
    line-height: 1.4;
    color: #86868b;
    margin-bottom: 40px;
    font-weight: 400;
    max-width: 90%;
}

.hero-cta {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: flex-start;
    /* Left align buttons */
}

/* Visual Side */
.hero-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 700px;
    /* Increased from 600px */
}

.phone-mockup {
    height: 100%;
    width: auto;
    object-fit: contain;
    z-index: 10;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.15));
    position: absolute;
    bottom: -18%;
    /* Adjusted to clip the keyboard area exactly */
    left: 50%;
    transform: translateX(-50%);
}

/* Chat Bubbles */
.chat-bubble {
    position: absolute;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 16px 24px;
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.6);
    z-index: 20;
    max-width: 280px;
    font-size: 14px;
    font-weight: 500;
    color: #1d1d1f;
    opacity: 0;
    transform: scale(0.9) translateY(20px);
    /* Animation removed here, applied via JS class */
    min-width: 60px;
    /* Prevent collapse when empty */
    min-height: 52px;
    display: flex;
    align-items: center;
}

.chat-bubble.visible {
    animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.chat-bubble p {
    margin: 0;
    line-height: 1.4;
}

/* Specific Bubble Positions */
.bubble-1 {
    top: 15%;
    left: -20px;
    border-bottom-left-radius: 4px;
    animation-delay: 0.8s;
}

.bubble-2 {
    top: 35%;
    right: -40px;
    border-bottom-right-radius: 4px;
    background: #0071e3;
    /* User bubble blue? Or keep white per user overlap req? User said "overlap" with questions. Let's make this one accented for variety or keep white. Sticking to white glass for premium look. */
    background: rgba(255, 255, 255, 0.95);
    animation-delay: 1.2s;
}

.bubble-3 {
    bottom: 30%;
    left: -30px;
    border-bottom-left-radius: 4px;
    animation-delay: 1.6s;
}

.bubble-4 {
    bottom: 15%;
    right: -10px;
    border-bottom-right-radius: 4px;
    animation-delay: 2.0s;
}

@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(0.5) translateY(20px);
    }

    60% {
        opacity: 1;
        transform: scale(1.05) translateY(-5px);
        /* Overshoot for bounce */
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-primary {
    background: #0071e3;
    color: #fff;
    font-size: 14px;
    padding: 12px 24px;
    border-radius: 980px;
    font-weight: 500;
}

.btn-primary:hover {
    background: #0077ed;
    transform: translateY(-1px);
}

.btn-text {
    color: #0071e3;
    font-size: 16px;
    font-weight: 500;
}

/* Responsive */
@media (max-width: 900px) {
    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }

    .hero-text {
        text-align: center;
        margin: 0 auto;
    }

    .hero-cta {
        justify-content: center;
    }

    .hero-visual {
        height: 500px;
    }

    .chat-bubble {
        padding: 12px 16px;
        font-size: 12px;
        max-width: 200px;
    }

    .bubble-1 {
        top: 10%;
        left: 0;
    }

    .bubble-2 {
        top: 25%;
        right: 0;
    }

    .bubble-3 {
        bottom: 25%;
        left: 0;
    }

    .bubble-4 {
        bottom: 10%;
        right: 0;
    }
}

.btn-text:hover {
    text-decoration: underline;
}

.btn-sm {
    font-size: 12px;
    background: #0071e3;
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    height: 24px;
}

/* === Services Section: Clean Grid === */
.services {
    background: var(--bg-secondary);
    padding: 100px 0;
}

.section-label {
    display: block;
    text-align: center;
    font-size: 32px;
    /* Apple section header style */
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 10px;
    text-transform: none;
    letter-spacing: -0.01em;
}

.section-title {
    font-size: 19px;
    /* Sub-header style */
    font-weight: 400;
    text-align: center;
    color: #86868b;
    margin-bottom: 60px;
    line-height: 1.4;
}

.bento-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.bento-card {
    background: #fff;
    border-radius: 18px;
    /* Apple Radius */
    padding: 40px;
    height: 400px;
    box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease;
    border: none;
    overflow: hidden;
}

.bento-card:hover {
    transform: scale(1.01);
}

.card-creative {
    grid-column: 1 / 3;
    /* Full width top card */
    height: 500px;
    background: #fff url('../images/creative_bg.jpg') center/cover no-repeat;
    /* Placeholder if image exists, else white */
}

.card-tech {
    background: #fff url('../images/tech_bg.jpg') center/cover no-repeat;
    grid-column: 1 / 2;
}

.card-marketing {
    background: #fff url('../images/digital_bg.jpg') center/cover no-repeat;
    grid-column: 2 / 3;
}

/* Typography in cards */
.card-content h3 {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 10px;
}

.card-content p {
    font-size: 19px;
    color: #86868b;
    max-width: 400px;
}


/* === Clients Section === */
.clients {
    padding: 80px 0;
    background: #fff;
    border-bottom: 1px solid var(--border-color);
}

.clients-grid {
    display: grid;
    grid-template-columns: 1.5fr repeat(4, 1fr);
    /* Text Block + 4 Logos */
    gap: 40px;
    align-items: center;
}

.client-item {
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    background: var(--bg-secondary);
    transition: all 0.2s ease;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #86868b;
    text-decoration: none;
}

.client-item:hover {
    background: #ebebf0;
    transform: translateY(-2px);
}

.client-item img {
    height: 50px;
    /* Increased from 32px */
    width: auto;
    max-width: 120px;
    /* Ensure they don't get too wide */
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}

/* Specific adjustment for Sonar to balance visual weight */
.client-item img[src*="sonar"] {
    height: 24px;
    /* visually smaller to match others */
}

.client-item:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

.client-item:hover img {
    filter: grayscale(0%);
    /* Color on hover */
    opacity: 1;
}

.client-text {
    text-align: left;
    padding-right: 20px;
    border-right: 1px solid var(--border-color);
    padding-left: 0;
    border-left: none;
}

.client-text h3 {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #86868b;
    margin-bottom: 8px;
}

.client-text p {
    font-size: 19px;
    /* Comparable to Apple subhead */
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.3;
}

/* Footer */
/* Footer - Clean & Minimal */
footer {
    background: #f5f5f7;
    font-size: 12px;
    color: #86868b;
    padding: 60px 0 40px;
    border-top: 1px solid #d2d2d7;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px;
}

.footer-brand h2 {
    font-size: 12px;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 4px;
}

.footer-contact,
.footer-socials {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-email,
.footer-socials a {
    color: #424245;
    font-weight: 500;
    transition: color 0.2s ease;
}

.footer-email:hover,
.footer-socials a:hover {
    color: #0071e3;
    text-decoration: underline;
}

.footer-bottom {
    width: 100%;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #e5e5e5;
    text-align: center;
    color: #a1a1a6;
}

/* Responsive */
@media (max-width: 900px) {

    /* Mobile Hero Fix */
    .hero {
        padding-top: 100px;
        min-height: auto;
        padding-bottom: 60px;
        display: block;
        /* Stack content */
    }

    .nav-container {
        /* Keep logo left, toggle right */
        justify-content: space-between;
    }

    /* Hide the desktop links by default */
    .nav-links {
        display: none;
    }

    /* Active Mobile Menu Overlay */
    .nav-links.mobile-active {
        display: flex !important;
        /* Force show */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        height: 100vh;

        /* Reset positioning from parent */
        margin: 0;
        transform: none;

        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        z-index: 9998;
        padding-top: 0;

        /* Slide Down Animation */
        animation: slideDownOverlay 0.5s cubic-bezier(0.32, 0.72, 0, 1) forwards;
        border-radius: 0;
    }

    /* Fixed Mobile Visuals - Dynamic Breathing Strategy */
    .hero-visual {
        height: 500px;
        width: 85%;
        /* Fluid width: Spreads/Contracts with screen */
        max-width: 550px;
        /* Cap expansion so it doesn't get too wide on tablets */
        margin: 0 auto;
        position: relative;
        overflow: visible;
    }

    .chat-bubble {
        padding: 14px 18px;
        font-size: 13px;
        max-width: 220px;
        /* WIDER as requested */
        width: fit-content;
    }

    /* Left Side Bubbles */
    .bubble-1,
    .bubble-3 {
        left: 0;
        right: auto;
        margin-right: 0;
        text-align: left;
    }

    /* Right Side Bubbles */
    .bubble-2,
    .bubble-4 {
        right: 0;
        left: auto;
        margin-left: 0;
        text-align: right;
    }

    /* Vertical Positions */
    .bubble-1 {
        top: 5%;
    }

    .bubble-2 {
        top: 20%;
    }

    .bubble-3 {
        bottom: 30%;
    }

    .bubble-4 {
        bottom: 15%;
    }

    .nav-links.mobile-active a {
        font-size: 24px;
        margin-bottom: 32px;
        font-weight: 500;
        color: #1d1d1f;

        /* Staggered Setup */
        opacity: 0;
        transform: translateY(15px);
        animation: revealItem 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    }

    /* Staggered Delays */
    .nav-links.mobile-active a:nth-child(1) {
        animation-delay: 0.1s;
    }

    .nav-links.mobile-active a:nth-child(2) {
        animation-delay: 0.2s;
    }

    .nav-links.mobile-active a:nth-child(3) {
        animation-delay: 0.3s;
    }

    .nav-links.mobile-active a:nth-child(4) {
        animation-delay: 0.4s;
    }

    .mobile-toggle {
        display: flex;
        flex-direction: column;
        gap: 6px;
        z-index: 10000;
        /* Above everything */
        cursor: pointer;
        padding: 5px;
    }

    .mobile-toggle span {
        width: 20px;
        height: 1.5px;
        /* Thinner Apple-like lines */
        background: #1d1d1f;
        transition: all 0.3s ease;
        border-radius: 2px;
    }

    /* Hamburger to X animation */
    .mobile-toggle.active span:nth-child(1) {
        transform: translateY(7.5px) rotate(45deg);
    }

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

    .mobile-toggle.active span:nth-child(3) {
        transform: translateY(-7.5px) rotate(-45deg);
    }

    .hero-title {
        font-size: 40px;
    }

    .bento-grid {
        grid-template-columns: 1fr 1fr;
        /* 2 columns on mobile */
    }

    .card-creative {
        grid-column: 1 / -1;
        /* Spans both columns */
        height: 400px;
        /* Slight height adjustment for mobile prop? Optional. Keep 500 if unsure. Let's try 400 to save space. */
    }

    .clients-grid {
        grid-template-columns: 1fr 1fr;
        /* 2 cols for logos */
        gap: 20px;
    }

    .client-text {
        grid-column: 1 / -1;
        /* Text takes full width */
        order: -1;
        /* Put text on top for mobile? Or keep bottom? User said "paling kanan", usually becomes bottom. Let's keep bottom or make it first. Let's keep distinct. */
        margin-top: 20px;
        padding-left: 0;
        border-left: none;
        text-align: center;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideDownOverlay {
    from {
        opacity: 0;
        backdrop-filter: blur(0);
        clip-path: inset(0 0 100% 0);
    }

    to {
        opacity: 1;
        backdrop-filter: blur(20px);
        clip-path: inset(0 0 0% 0);
    }
}

@keyframes slideUpOverlay {
    from {
        opacity: 1;
        backdrop-filter: blur(20px);
        clip-path: inset(0 0 0% 0);
    }

    to {
        opacity: 0;
        backdrop-filter: blur(0);
        clip-path: inset(0 0 100% 0);
    }
}

/* Closing State */
.nav-links.mobile-closing {
    display: flex !important;
    /* Keep visible during animation */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(255, 255, 255, 0.98);
    z-index: 9998;
    animation: slideUpOverlay 0.5s cubic-bezier(0.32, 0.72, 0, 1) forwards;
}

@keyframes revealItem {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animations moved to Scroll Animations section */


/* Disable scroll animations for speed/simplicity if needed, or keep JS handling it */
/* === Process Section (How We Do It) === */
.process {
    padding: 120px 0;
    background: #fbfbfd;
}

.process-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    margin-top: 60px;
}

.process-column {
    flex: 1;
}

.process-column.text-right {
    text-align: right;
}

.process-column.text-left {
    text-align: left;
}

.process-group {
    margin-bottom: 40px;
    transition: all 0.3s ease;
    /* Smooth transition */
    opacity: 1;
}

.process-group.active {
    opacity: 1;
    transform: scale(1.05);
    z-index: 5;
}

.process-group.active h3 {
    color: #000;
}

.process-group.dimmed {
    opacity: 0.3;
    filter: blur(0.5px);
    transform: scale(0.98);
}

.process-group:last-child {
    margin-bottom: 0;
}

.process-group h3 {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 16px;
    color: #1d1d1f;
}

.process-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.process-list li {
    font-size: 17px;
    color: #86868b;
    margin-bottom: 8px;
    font-weight: 400;
    line-height: 1.5;
}



/* === Exploded Pie Chart (40/30/30) === */
.chart-container {
    position: relative;
    width: 340px;
    height: 340px;
    flex: 0 0 340px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pie-chart {
    width: 100%;
    height: 100%;
    position: relative;
    /* No background - slices are independent */
}

.chart-slice {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background-color: transparent;
    transition: transform 0.3s ease, filter 0.3s ease;
    /* Depth */
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.15));
}

/* 
   Exploded Logic:
   - Slices are full sized but masked via conic-gradient transparency.
   - We maintain strict percentages.
   - We translate them away from center.
*/

/* Designer (40%): 216deg to 360deg (Left side) */
.slice-design {
    background: conic-gradient(transparent 0deg 216deg,
            #d1d1d6 216deg 360deg);
    transform: translate(-10px, -3px);
    z-index: 1;
}

/* Coder (30%): 0deg to 108deg (Top Right) */
.slice-coder {
    background: conic-gradient(#1d1d1f 0deg 108deg,
            transparent 108deg 360deg);
    transform: translate(8px, -8px);
    z-index: 2;
}

/* Infra (30%): 108deg to 216deg (Bottom Right) */
.slice-infra {
    background: conic-gradient(transparent 0deg 108deg,
            #636366 108deg 216deg,
            transparent 216deg 360deg);
    transform: translate(8px, 8px);
    z-index: 2;
}

/* Interaction State Transitions */
.chart-slice,
.label {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
}

/* === State: Design Active === */
.chart-container[data-active-slice="design"] .slice-design {
    transform: translate(-12px, -4px) scale(1.05);
    /* Reduced Pop */
    z-index: 10;
    filter: drop-shadow(0 15px 20px rgba(0, 0, 0, 0.2));
}

.chart-container[data-active-slice="design"] .label-design {
    transform: translate(-12px, -50%) scale(1.05);
}

/* Shift others away slightly */
.chart-container[data-active-slice="design"] .slice-coder {
    transform: translate(6px, -2px) scale(0.98);
    filter: blur(0.5px);
}

.chart-container[data-active-slice="design"] .slice-infra {
    transform: translate(6px, 2px) scale(0.98);
    filter: blur(0.5px);
}

/* === State: Coder Active === */
.chart-container[data-active-slice="coder"] .slice-coder {
    transform: translate(10px, -10px) scale(1.05);
    z-index: 10;
    filter: drop-shadow(0 15px 20px rgba(0, 0, 0, 0.2));
}

.chart-container[data-active-slice="coder"] .label-coder {
    transform: translate(6px, -6px) scale(1.05);
}

/* Shift others away slightly */
.chart-container[data-active-slice="coder"] .slice-design {
    transform: translate(-4px, -1px) scale(0.98);
    filter: blur(0.5px);
}

.chart-container[data-active-slice="coder"] .slice-infra {
    transform: translate(2px, 6px) scale(0.98);
    filter: blur(0.5px);
}

/* === State: Infra Active === */
.chart-container[data-active-slice="infra"] .slice-infra {
    transform: translate(10px, 10px) scale(1.05);
    z-index: 10;
    filter: drop-shadow(0 15px 20px rgba(0, 0, 0, 0.2));
}

.chart-container[data-active-slice="infra"] .label-infra {
    transform: translate(6px, 6px) scale(1.05);
}

/* Shift others away slightly */
.chart-container[data-active-slice="infra"] .slice-design {
    transform: translate(-4px, -1px) scale(0.98);
    filter: blur(0.5px);
}

.chart-container[data-active-slice="infra"] .slice-coder {
    transform: translate(2px, -6px) scale(0.98);
    filter: blur(0.5px);
}

/* Labels - Clean & Horizontal */
.label {
    position: absolute;
    font-size: 17px;
    font-weight: 600;
    color: #fff;
    z-index: 20;
    pointer-events: none;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transform: none;
}



.label-coder {
    top: 26%;
    right: 18%;
}

.label-infra {
    bottom: 26%;
    right: 18%;
}

.label-design {
    top: 50%;
    left: 20%;
    transform: translateY(-50%);
    color: #1d1d1f;
    text-shadow: none;
    font-weight: 700;
}

/* Utility: restore visible class for animations */
.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive Process */
@media (max-width: 900px) {
    .process-grid {
        flex-direction: column;
        gap: 40px;
        text-align: center;
    }

    .process-column.text-right,
    .process-column.text-left {
        text-align: center;
    }

    .process-column.text-right .process-group,
    .process-column.text-left .process-group {
        text-align: center;
    }

    .chart-container {
        width: 280px;
        height: 280px;
        flex: 0 0 280px;
    }
}

/* === Loading Screen === */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

#loading-screen.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.logo-pulse {
    width: 80px;
    height: auto;
    animation: logoPulse 1.5s infinite ease-in-out;
}

@keyframes logoPulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.1);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0.8;
    }
}

/* === Scroll Animations === */
.fade-up,
.fade-in,
.scale-up {
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

.fade-up {
    transform: translateY(30px);
}

.fade-in {
    opacity: 0;
}

.scale-up {
    transform: scale(0.95);
}

/* In-View State */
.in-view {
    opacity: 1 !important;
    transform: none !important;
}

/* Delays */
/* Delays */
.delay-1 {
    transition-delay: 0.1s;
}

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

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

/* === Contact Page === */
.contact-hero {
    padding: 100px 0 60px;
    text-align: center;
}

.contact-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 80px;
    max-width: 900px !important;
    margin: 0 auto;
    padding-bottom: 100px;
}

.contact-info h3 {
    font-size: 14px;
    color: #86868b;
    margin-bottom: 8px;
    font-weight: 500;
}

.contact-info p,
.contact-link,
.social-link {
    font-size: 16px;
    color: #1d1d1f;
    font-weight: 500;
    display: block;
    margin-bottom: 24px;
}

.social-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Form Styles */
.form-group {
    margin-bottom: 24px;
}

.form-group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #86868b;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: 16px;
    font-size: 16px;
    font-family: inherit;
    border: 1px solid #d2d2d7;
    border-radius: 12px;
    background-color: #f5f5f7;
    transition: all 0.2s ease;
    outline: none;
    appearance: none;
    /* Only works on some elements/browsers */
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    border-color: #0071e3;
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.1);
}

.btn-block {
    width: 100%;
    margin-top: 16px;
    height: 52px;
    /* Taller touch target */
    border-radius: 26px;
    /* Pill shape (half of 52px) */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    /* Reset if needed */
}

/* Mobile Contact */
@media (max-width: 800px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .contact-hero {
        padding: 60px 0 40px;
    }

    .contact-info {
        order: 2;
        /* Info below form on mobile? Or above? Let's keep above for context or below? Usually below. */
        margin-top: 40px;
        padding-top: 40px;
        border-top: 1px solid #e5e5e5;
    }
}

/* === About Page === */
.about-hero {
    padding: 120px 0 80px;
    text-align: center;
}

.story-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    padding-bottom: 100px;
    align-items: start;
}

.story-left h2 {
    font-size: 40px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.1;
    color: #1d1d1f;
}

.story-right p {
    font-size: 18px;
    color: #424245;
    margin-bottom: 24px;
    line-height: 1.6;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding-bottom: 100px;
}

.value-card {
    background: #f5f5f7;
    padding: 40px;
    border-radius: 20px;
}

.value-card h3 {
    font-size: 24px;
    margin-bottom: 16px;
    color: #1d1d1f;
}

.value-card p {
    font-size: 16px;
    color: #86868b;
    line-height: 1.5;
}

.about-cta {
    text-align: center;
    padding: 40px 0 120px;
    background: #fafafa;
    /* Subtle separation */
    border-top: 1px solid #eee;
}

.about-cta h2 {
    font-size: 48px;
    margin-bottom: 32px;
    color: #1d1d1f;
    letter-spacing: -0.02em;
}

/* Mobile About */
@media (max-width: 900px) {
    .story-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

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

    .story-left h2 {
        font-size: 32px;
    }
}

/* === Timeline === */
.about-timeline {
    padding-bottom: 100px;
}

.timeline {
    position: relative;
    max-width: 700px;
    margin: 0 auto;
    padding: 20px 0;
}

/* Vertical Line */
.timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 20px;
    /* Line position */
    width: 2px;
    background: #e5e5e5;
}

.timeline-item {
    position: relative;
    padding-left: 60px;
    /* Space for marker */
    margin-bottom: 60px;
}

.timeline-item:last-child {
    margin-bottom: 0;
}

/* Marker Dot */
.timeline-marker {
    position: absolute;
    left: 11px;
    /* Align center with line (20px line - 10px marker / 2 + offset?) -> Line is at 20px. Marker width 20px. Left should be 20 - 9 = 11? */
    /* Let's calculate: Line left 20px. Center of line is 21px. Marker width 20px. Center of marker 10px. Left 11px. */
    left: 11px;
    top: 0;
    width: 20px;
    height: 20px;
    background: #fff;
    border: 4px solid #0071e3;
    border-radius: 50%;
    z-index: 2;
}

.timeline-year {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #0071e3;
    margin-bottom: 4px;
    letter-spacing: 0.02em;
}

.timeline-content h3 {
    font-size: 20px;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 8px;
    /* Align text top with marker */
    margin-top: 0;
}

/* === Portfolio Page === */
.portfolio-hero {
    padding: 120px 0 60px;
    text-align: center;
}

.portfolio-hero .hero-subtitle {
    max-width: 600px;
    margin: 0 auto;
}

.capabilities-header {
    text-align: center;
    margin-bottom: 56px;
}

.capabilities-header .section-title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.1;
    margin: 8px 0 16px;
    color: #1d1d1f;
}

.capabilities-header .section-sub {
    font-size: 17px;
    color: #86868b;
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.6;
}

.portfolio-content {
    padding-bottom: 120px;
}

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

.work-card {
    background: #f5f5f7;
    border-radius: 24px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 280px;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
    cursor: default;
}

.work-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
    background: #fff;
}

.card-body h3 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #1d1d1f;
}

.card-body p {
    font-size: 16px;
    color: #86868b;
    line-height: 1.5;
    margin-bottom: 24px;
}

.card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
}

.tag {
    font-size: 12px;
    font-weight: 500;
    color: #424245;
    background: #e5e5e5;
    /* Slightly darker than card bg */
    padding: 6px 12px;
    border-radius: 99px;
}

.work-card:hover .tag {
    background: #f5f5f7;
    /* Keep contrast when card becomes white */
}

/* Mobile Portfolio */
@media (max-width: 1000px) {
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* === Portfolio Gallery (Album / Coverflow) === */
.portfolio-gallery-section {
    padding: 80px 0 0;
}

/* When used as hero: extra top padding to clear navbar */
.portfolio-gallery-section.pg-hero {
    padding-top: 120px;
}

/* Stage: provides perspective for 3-D coverflow */
.pg-stage-outer {
    position: relative;
    height: 520px;
    overflow: visible;
}

.pg-stage {
    position: relative;
    width: 100%;
    height: 100%;
    perspective: 1400px;
    perspective-origin: 50% 40%;
}

/* Each card */
.pg-item {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 360px;
    height: 360px;
    border-radius: 16px;
    overflow: visible;
    cursor: pointer;
    display: none;
    transition: transform 600ms cubic-bezier(0.2, 0.9, 0.2, 1),
                opacity   500ms ease;
    will-change: transform, opacity;
}

.pg-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28),
                0 4px 16px rgba(0, 0, 0, 0.18);
    /* glass reflection below the card */
    -webkit-box-reflect: below 10px
        -webkit-linear-gradient(transparent 55%, rgba(200, 200, 210, 0.22) 100%);
}

/* ---- Position classes (set by JS) ---- */
.pg-item.pg-pos-0 {
    display: block;
    z-index: 5;
    opacity: 1;
    transform: translate(-50%, -50%) translateZ(0) rotateY(0deg) scale(1);
}

.pg-item.pg-pos-1l {
    display: block;
    z-index: 4;
    opacity: 0.88;
    transform: translate(calc(-50% - 290px), -50%) translateZ(-80px) rotateY(42deg) scale(0.83);
}

.pg-item.pg-pos-1r {
    display: block;
    z-index: 4;
    opacity: 0.88;
    transform: translate(calc(-50% + 290px), -50%) translateZ(-80px) rotateY(-42deg) scale(0.83);
}

.pg-item.pg-pos-2l {
    display: block;
    z-index: 3;
    opacity: 0.5;
    transform: translate(calc(-50% - 480px), -50%) translateZ(-160px) rotateY(56deg) scale(0.66);
}

.pg-item.pg-pos-2r {
    display: block;
    z-index: 3;
    opacity: 0.5;
    transform: translate(calc(-50% + 480px), -50%) translateZ(-160px) rotateY(-56deg) scale(0.66);
}

/* Navigation arrows */
.pg-nav {
    position: absolute;
    top: 46%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(0, 0, 0, 0.06);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    font-size: 26px;
    line-height: 1;
    color: #1d1d1f;
    z-index: 10;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}

.pg-nav:hover {
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
    background: rgba(255, 255, 255, 0.96);
}

.pg-prev { left: 24px; }
.pg-next { right: 24px; }

/* Dots */
.pg-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 60px 0 80px; /* top padding clears reflection */
}

.pg-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d1d1d6;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.3s, transform 0.3s;
}

.pg-dot.active {
    background: #1d1d1f;
    transform: scale(1.35);
}

/* Responsive */
@media (max-width: 900px) {
    .pg-stage-outer { height: 360px; }
    .pg-item { width: 280px; height: 280px; }
    .pg-item.pg-pos-1l { transform: translate(calc(-50% - 200px), -50%) translateZ(-60px) rotateY(40deg) scale(0.82); }
    .pg-item.pg-pos-1r { transform: translate(calc(-50% + 200px), -50%) translateZ(-60px) rotateY(-40deg) scale(0.82); }
    .pg-item.pg-pos-2l { transform: translate(calc(-50% - 340px), -50%) translateZ(-120px) rotateY(54deg) scale(0.65); opacity: 0.4; }
    .pg-item.pg-pos-2r { transform: translate(calc(-50% + 340px), -50%) translateZ(-120px) rotateY(-54deg) scale(0.65); opacity: 0.4; }
}

@media (max-width: 600px) {
    .pg-stage-outer { height: 280px; }
    .pg-item { width: 210px; height: 210px; }
    .pg-item.pg-pos-1l { transform: translate(calc(-50% - 140px), -50%) translateZ(-40px) rotateY(36deg) scale(0.80); opacity: 0.6; }
    .pg-item.pg-pos-1r { transform: translate(calc(-50% + 140px), -50%) translateZ(-40px) rotateY(-36deg) scale(0.80); opacity: 0.6; }
    .pg-item.pg-pos-2l { display: none; }
    .pg-item.pg-pos-2r { display: none; }
    .pg-prev { left: 8px; }
    .pg-next { right: 8px; }
}

.timeline-content p {
    font-size: 16px;
    color: #424245;
    line-height: 1.5;
}

/* === Language Switcher === */
.footer-lang {
    display: flex;
    align-items: center;
    gap: 4px;
}

.lang-btn {
    background: transparent;
    border: 1.5px solid rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #86868b;
    cursor: pointer;
    letter-spacing: 0.04em;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
    font-family: inherit;
}

.lang-btn:hover {
    color: #1d1d1f;
    border-color: rgba(0, 0, 0, 0.3);
}

.lang-btn.active {
    color: #1d1d1f;
    border-color: #1d1d1f;
    background: rgba(0, 0, 0, 0.05);
}

/* === Navbar Page Transition Support === */
.nav-transition-exit {
    transform: translateY(-150%) !important;
    opacity: 0 !important;
    pointer-events: none;
    transition: transform 0.6s cubic-bezier(0.83, 0, 0.17, 1), opacity 0.6s ease;
}