/* CSS Reset & Variables */
:root {
    --bg-dark: #090C14;
    /* Richer Deep Navy */
    --bg-card: #141824;
    /* Slightly lighter/bluer for cards */
    --bg-card-hover: #1C2130;
    --text-main: #FFFFFF;
    --text-muted: #9CA3AF;
    --accent-blue: #3B82F6;
    --accent-purple: #8B5CF6;
    --gradient-primary: linear-gradient(90deg, #3B82F6 0%, #8B5CF6 100%);
    --gradient-glow: rgba(59, 130, 246, 0.5);

    --font-main: 'Inter', sans-serif;

    --container-width: 1280px;
    --header-height: 80px;
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
}

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

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

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

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

.container {
    width: 90%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 1rem;
}

/* Typography */
h1,
h2,
h3,
h4 {
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

h1 {
    font-size: 4rem;
    /* Adjusted for Inter */
    margin-bottom: 2rem;
    color: white;
}

h2 {
    font-size: 2.25rem;
    margin-bottom: 0.5rem;
}

h3 {
    font-size: 1.25rem;
    font-weight: 600;
}

p {
    color: var(--text-muted);
    font-size: 1.05rem;
}

.badge {
    display: inline-block;
    padding: 0.5rem 1.2rem;
    background: rgba(30, 58, 138, 0.4);
    /* Darker blue bg */
    color: #60A5FA;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 2rem;
    border: 1px solid rgba(59, 130, 246, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dot {
    color: var(--accent-blue);
    margin: 0 0.5rem;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 1.8rem;
    border-radius: 50px;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn-primary {
    background: var(--gradient-primary);
    color: white;
    box-shadow: 0 4px 15px var(--gradient-glow);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--gradient-glow);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    color: white;
    margin-left: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
}

.btn.small {
    padding: 0.6rem 1.2rem;
    font-size: 0.85rem;
}

.btn-white {
    background: white;
    color: var(--bg-dark);
}

.btn-outline {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    margin-left: 1rem;
}

/* Header */
.header {
    height: var(--header-height);
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(7, 9, 14, 0.6);
    /* More transparent */
    backdrop-filter: blur(20px);
    /* Stronger blur */
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    z-index: 1000;
}

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

.logo {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.5px;
    color: white;
}

.desktop-nav {
    display: flex;
    gap: 2.5rem;
}

.desktop-nav a {
    font-size: 0.9rem;
    color: #9CA3AF;
    font-weight: 400;
    transition: color 0.2s ease;
}

.desktop-nav a:hover {
    color: white;
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 6px;
}

.mobile-menu-btn span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: white;
    border-radius: 2px;
}

/* Hero Section */
.hero {
    padding-top: calc(var(--header-height) + 4rem);
    padding-bottom: 4rem;
    min-height: 90vh;
    display: flex;
    align-items: center;
}

.hero-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Split into two columns */
    gap: 4rem;
    align-items: center;
}

.hero-desc {
    font-size: 1.15rem;
    max-width: 500px;
    margin-bottom: 2.5rem;
}

.hero-actions {
    display: flex;
    margin-bottom: 2rem;
}

.hero-features {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* Hero Visual (Cube) */
.hero-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 500px;
    perspective: 1000px;
    /* Enable 3D space */
}

.cube-container {
    position: relative;
    width: 300px;
    height: 300px;
    transform-style: preserve-3d;
    /* Combine slow periodic rotation with gentle floating */
    animation: rotate-continuous 20s linear infinite;
}

/* Add a wrapper or modifying the transform directly can be tricky with dual axis. 
   Let's keep it simple: The rotation happens on Y axis. 
   The floating happens via a separate animation or applied to the parent's flex alignment? 
   No, we can chain animations if they don't conflict on the same property axis excessively.
   Actually, rotate and translate are both transform. 
   The best way to mix them is to have a parent wrapper do the floating, and the child do the rotating.
   However, without changing HTML, we can maintain the rotateX(-20deg) in the keyframe.
*/

@keyframes rotate-continuous {
    0% {
        transform: rotateX(-20deg) rotateY(0deg) translateY(0px);
    }

    25% {
        transform: rotateX(-20deg) rotateY(90deg) translateY(-10px);
    }

    50% {
        transform: rotateX(-20deg) rotateY(180deg) translateY(0px);
    }

    75% {
        transform: rotateX(-20deg) rotateY(270deg) translateY(-10px);
    }

    100% {
        transform: rotateX(-20deg) rotateY(360deg) translateY(0px);
    }
}

/* Common Face Styles */
.face {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Outer Wireframe Cube --- */
.cube-wireframe {
    width: 260px;
    height: 260px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-style: preserve-3d;
}

.cube-wireframe .face {
    width: 260px;
    height: 260px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    /* Thinner, more subtle lines */
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
    /* Depth */
    background: transparent;
}

/* Wireframe Face Transforms */
.cube-wireframe .face-front {
    transform: translateZ(130px);
}

.cube-wireframe .face-back {
    transform: rotateY(180deg) translateZ(130px);
}

.cube-wireframe .face-right {
    transform: rotateY(90deg) translateZ(130px);
}

.cube-wireframe .face-left {
    transform: rotateY(-90deg) translateZ(130px);
}

.cube-wireframe .face-top {
    transform: rotateX(90deg) translateZ(130px);
}

.cube-wireframe .face-bottom {
    transform: rotateX(-90deg) translateZ(130px);
}


/* --- Inner Glowing Cube --- */
.cube-solid {
    width: 140px;
    height: 140px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-style: preserve-3d;
}

.cube-solid .face {
    width: 140px;
    height: 140px;
    background: linear-gradient(135deg, #EBEFFF 0%, #C7D2FE 100%);
    /* Crisp white-blue */
    box-shadow: 0 0 60px rgba(165, 180, 252, 0.6), inset 0 0 20px rgba(255, 255, 255, 0.5);
    /* Enhanced Glow */
    border: 1px solid rgba(255, 255, 255, 0.9);
    opacity: 0.98;
    /* Solid but glowing */
}

/* Inner Face Transforms */
.cube-solid .face-front {
    transform: translateZ(70px);
}

.cube-solid .face-back {
    transform: rotateY(180deg) translateZ(70px);
}

.cube-solid .face-right {
    transform: rotateY(90deg) translateZ(70px);
}

.cube-solid .face-left {
    transform: rotateY(-90deg) translateZ(70px);
}

.cube-solid .face-top {
    transform: rotateX(90deg) translateZ(70px);
}

.cube-solid .face-bottom {
    transform: rotateX(-90deg) translateZ(70px);
}

.floating-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Let clicks pass through */
}

.floating-card {
    position: absolute;
    background: #0F1218;
    /* Solid dark color matching screenshot */
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 1rem 1.5rem;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
    /* Deeper shadow */
    min-width: 180px;
    animation: float 6s ease-in-out infinite;
    z-index: 10;
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-15px);
    }

    100% {
        transform: translateY(0px);
    }
}

.perf-card {
    top: 15%;
    left: 5%;
    animation-delay: 0s;
}

.launch-card {
    bottom: 20%;
    right: 0%;
    animation-delay: 2.5s;
}

.icon-circle {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.green {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.green-check {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.2));
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.green-check::before {
    content: "✓";
    color: #10B981;
    font-weight: bold;
    font-size: 16px;
}

.floating-card small {
    display: block;
    font-size: 0.7rem;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    font-weight: 500;
}

.floating-card strong {
    font-size: 1.5rem;
    /* Larger number */
    color: white;
    font-weight: 700;
    line-height: 1;
}

/* Services Section */
.services {
    padding: 8rem 0;
}

.section-header {
    margin-bottom: 4rem;
}

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

.service-card {
    background: linear-gradient(145deg, rgba(20, 24, 33, 0.6), rgba(10, 12, 16, 0.6));
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 2.5rem 2rem;
    border-radius: 20px;
    position: relative;
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 280px;
    overflow: hidden;
}

/* Subtle glow on hover */
.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(400px circle at top right, rgba(59, 130, 246, 0.08), transparent 40%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.service-card:hover::before {
    opacity: 1;
}

.service-card:hover {
    transform: translateY(-8px);
    border-color: rgba(139, 92, 246, 0.4);
    box-shadow: 0 30px 60px -15px rgba(124, 58, 237, 0.25);
}

.card-icon-box {
    width: 56px;
    height: 56px;
    background: rgba(30, 35, 45, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    color: #A78BFA;
    /* Purple Icon */
    position: relative;
    z-index: 1;
    transition: 0.3s ease;
}

.service-card:hover .card-icon-box {
    border-color: rgba(139, 92, 246, 0.5);
    color: white;
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.4);
}

.service-card h3 {
    font-size: 1.35rem;
    margin-bottom: 0.75rem;
    position: relative;
    z-index: 1;
}

.service-card p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    color: #9CA3AF;
    position: relative;
    z-index: 1;
}

.link-arrow {
    color: var(--accent-blue);
    font-size: 0.95rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    z-index: 1;
}

.link-arrow::after {
    content: "→";
    transition: transform 0.3s ease;
}

.link-arrow:hover::after {
    transform: translateX(4px);
}

.project-tag {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    font-size: 0.7rem;
    /* Smaller text */
    background: rgba(30, 58, 138, 0.6);
    /* Dark Blue bg */
    color: #93C5FD;
    /* Light Blue text */
    padding: 0.3rem 0.7rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
}


/* Work Section */
.work {
    padding: 6rem 0;
}

.work-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

/* Responsive adjustment for work grid */
@media (max-width: 1200px) {
    .work-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.work-card {
    display: block;
    text-decoration: none;
    background: var(--bg-card);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.work-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.work-image {
    height: 220px;
    background: #1A1D26;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

/* Skeleton UI for image placeholder */
.img-content {
    width: 80%;
    height: 80%;
    background: linear-gradient(135deg, #252832 0%, #1F222B 100%);
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}

/* Add some "shine" to the skeleton */
.img-content::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    transform: skewX(-20deg) translateX(-150%);
    animation: shine 3s infinite;
}

@keyframes shine {
    0% {
        transform: skewX(-20deg) translateX(-150%);
    }

    20% {
        transform: skewX(-20deg) translateX(150%);
    }

    100% {
        transform: skewX(-20deg) translateX(150%);
    }
}

.work-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    color: white;
    font-size: 0.65rem;
    padding: 6px 10px;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-weight: 500;
}

.work-info {
    padding: 1.5rem;
}

.work-info h3 {
    font-size: 1.1rem;
    margin-bottom: 0.35rem;
    color: white;
    font-weight: 500;
}

.work-type {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Process */
.process {
    padding: 8rem 0;
}

.process-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    position: relative;
}

/* Visual connector line attempt - debatable if needed for "exact" clone without seeing it, 
   but looks premium. For now, keep it simple as per image (likely text based). */

.step {
    position: relative;
}

.step h3 {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    color: white;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.step p {
    font-size: 1rem;
    line-height: 1.6;
    color: #9CA3AF;
}

/* CTA Section */
.cta-section {
    padding: 6rem 0;
}

.cta-box {
    background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 60%, #A78BFA 100%);
    border-radius: 32px;
    padding: 6rem 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(139, 92, 246, 0.3);
}

/* Fancy background effect for CTA */
.cta-box::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 60%);
    pointer-events: none;
}

.cta-box h2 {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
}

.cta-box p {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2.5rem;
    font-size: 1.2rem;
    position: relative;
    z-index: 1;
}

.cta-btns {
    position: relative;
    z-index: 1;
}

/* Footer */
/* Footer */
.footer {
    background: #050608;
    /* Even darker for footer */
    padding: 0 0 2rem;
    position: relative;
    border-top: none;
}

.footer-gradient-border {
    height: 1px;
    width: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(59, 130, 246, 0.5) 50%, transparent 100%);
    margin-bottom: 5rem;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.3);
}

.footer-content {
    display: flex;
    justify-content: space-between;
    gap: 4rem;
    margin-bottom: 4rem;
    align-items: flex-start;
}

.footer-brand {
    max-width: 320px;
}

.logo-footer {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
    font-size: 1.2rem;
    color: white;
}

.logo-icon {
    width: 24px;
    height: 24px;
    background: radial-gradient(circle, #60A5FA 0%, #3B82F6 100%);
    border-radius: 50%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

.logo-glow {
    width: 12px;
    height: 12px;
    background: white;
    filter: blur(4px);
    border-radius: 50%;
    opacity: 0.8;
}

.footer-brand p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #9CA3AF;
}

/* Links Layout */
.footer-links-wrapper {
    display: flex;
    gap: 5rem;
}

.footer-col h4 {
    margin-bottom: 1.2rem;
    font-size: 1rem;
    color: white;
    font-weight: 600;
}

.footer-col a {
    display: block;
    color: #9CA3AF;
    font-size: 0.95rem;
    margin-bottom: 0.8rem;
    transition: color 0.2s;
}

.footer-col a:hover {
    color: white;
}

/* Contact Column Specifics */
.social-icons {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
    color: #D1D5DB;
    transition: all 0.2s;
}

.social-icons a:hover {
    color: white;
    transform: translateY(-2px);
}

.email-link {
    display: inline-flex !important;
    align-items: center;
    color: #9CA3AF;
}

.footer-bottom {
    text-align: center;
    font-size: 0.8rem;
    color: #4B5563;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
}

/* Services Page Specific Styles */
.page-hero {
    padding: 8rem 0 4rem;
    text-align: center;
}

.page-hero h1 {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    background: linear-gradient(to right, #fff, #9ca3af);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-desc {
    font-size: 1.25rem;
    color: white;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.section-sub-desc {
    font-size: 1rem;
    color: #9CA3AF;
    line-height: 1.6;
}

.services-detail {
    padding: 2rem 0 6rem;
}

.services-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.service-card-full {
    background: #0B0E14;
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 2.5rem;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.service-card-full:hover {
    transform: translateY(-5px);
    border-color: rgba(139, 92, 246, 0.4);
    box-shadow: 0 30px 60px -15px rgba(124, 58, 237, 0.25);
}

.service-card-full:hover .card-icon-box {
    border-color: rgba(139, 92, 246, 0.5);
    color: white;
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.4);
}

.service-card-full h3 {
    font-size: 1.35rem;
    margin: 1.5rem 0 1rem;
    color: white;
}

.service-card-full p {
    color: #9CA3AF;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.service-card-full ul {
    list-style: none;
    padding: 0;
    margin-bottom: 2rem;
    flex-grow: 1;
}

.service-card-full ul li {
    font-size: 0.9rem;
    color: #D1D5DB;
    margin-bottom: 0.5rem;
    display: block;
}

.full-width {
    width: 100%;
    text-align: center;
    justify-content: center;
    margin-top: auto;
}

/* Why Section */
.why-section {
    padding: 4rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
}

.section-header-small {
    text-align: center;
    margin-bottom: 3rem;
}

.section-header-small h3 {
    font-size: 1.5rem;
    color: white;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    text-align: center;
    position: relative;
}

/* Connecting Line (Base) */
.why-grid::before {
    content: '';
    position: absolute;
    top: 30px;
    /* Align with center of 60px icon */
    left: 10%;
    /* Start a bit inwards */
    width: 80%;
    /* Don't span full width to avoid touching edges */
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    z-index: 0;
}

/* Connecting Line (Animated Purple Light) */
.why-grid::after {
    content: '';
    position: absolute;
    top: 30px;
    left: 10%;
    width: 80%;
    height: 2px;
    /* Slightly thicker for the light */
    background: linear-gradient(90deg, transparent, #A78BFA, transparent);
    background-size: 50% 100%;
    background-repeat: no-repeat;
    z-index: 0;
    opacity: 0.8;
    animation: light-flow 3s linear infinite;
}

@keyframes light-flow {
    0% {
        background-position: -100% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.why-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    position: relative;
    z-index: 1;
}

.why-icon {
    width: 60px;
    height: 60px;
    background: #090C14;
    /* Match page bg to mask line */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9CA3AF;
    position: relative;
    z-index: 2;
    transition: 0.3s ease;
}

.why-item:hover .why-icon {
    border-color: #A78BFA;
    color: #A78BFA;
    box-shadow: 0 0 15px rgba(167, 139, 250, 0.3);
}

.why-item h4 {
    font-size: 0.95rem;
    color: #D1D5DB;
    font-weight: 500;
}

/* Process Small */
.process-section-small {
    padding: 4rem 0;
}

.process-timeline {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
}

.process-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.p-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: #9CA3AF;
}

.process-item h4 {
    font-size: 0.95rem;
    color: white;
    font-weight: 500;
}

/* CTA Bottom */
.cta-bottom {
    padding: 4rem 0 8rem;
}

.cta-mini-box {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    border-radius: 20px;
    padding: 3rem;
    text-align: center;
}

.cta-mini-box h3 {
    font-size: 1.5rem;
    color: white;
    margin-bottom: 0.5rem;
}

.cta-mini-box p {
    color: #9CA3AF;
    margin-bottom: 2rem;
}

.cta-mini-btns {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.small-btn {
    padding: 0.6rem 1.5rem;
    font-size: 0.9rem;
}

/* Work Page Specifics */
.work-filters {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2.5rem;
    flex-wrap: wrap;
}

.filter-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #9CA3AF;
    padding: 0.5rem 1.2rem;
    border-radius: 100px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s;
}

.filter-btn.active,
.filter-btn:hover {
    background: white;
    color: black;
    border-color: white;
}

.work-details {
    padding: 2rem 0 6rem;
}

.work-card-detail {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: #0B0E14;
}

.work-card-detail .work-image {
    height: 240px;
    background: #14171F;
}

.work-card-detail .work-info {
    padding: 1.5rem;
}

.work-card-detail h3 {
    font-size: 1.1rem;
    color: white;
    margin-bottom: 0.5rem;
}

.work-card-detail p {
    font-size: 0.9rem;
    color: #9CA3AF;
    margin-bottom: 1rem;
    line-height: 1.5;
}

.project-tags {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.project-tags span {
    font-size: 0.7rem;
    color: #9CA3AF;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
}

.view-case {
    font-size: 0.85rem;
    color: white;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.view-case:hover {
    text-decoration: underline;
}

/* Difference Section */
.difference-section {
    padding: 4rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
}

.difference-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Actually the screenshot looks like a vertical list on mobile, maybe grid on desktop? Re-checking screenshot. 
    Desktop screenshot isn't fully clear on this section, but usually 3 items = 3 columns.
    Mobile screenshot shows vertical stack. */
    gap: 3rem;
    margin-top: 3rem;
}

.diff-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    text-align: left;
}

.diff-icon {
    min-width: 48px;
    height: 48px;
    background: rgba(30, 58, 138, 0.2);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #60A5FA;
}

.diff-content h4 {
    font-size: 1.1rem;
    color: white;
    margin-bottom: 0.5rem;
}

.diff-content p {
    font-size: 0.95rem;
    color: #9CA3AF;
    line-height: 1.6;
}

/* Process Page Specifics */
.timeline-section {
    padding: 2rem 0 6rem;
    position: relative;
    overflow: hidden;
}

.timeline-container {
    position: relative;
    padding: 2rem 0;
}

/* Vertical central line */
/* Vertical central line */
.timeline-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.05) 15%, rgba(255, 255, 255, 0.05) 85%, transparent 100%);
    transform: translateX(-50%);
    z-index: 0;
}

.timeline-line-progress {
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    /* Match base line */
    height: 0;
    background: #8B5CF6;
    transform: translateX(-50%);
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.6);
    z-index: 0;
    transition: height 0.1s linear;
}

.timeline-dot.active {
    background: #8B5CF6;
    border-color: #8B5CF6;
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.8);
    transition: all 0.5s ease;
}

/* Gold Theme */
.icon-theme-gold {
    background: rgba(234, 179, 8, 0.1);
    color: #EAB308;
    border: 1px solid rgba(234, 179, 8, 0.2);
}

.timeline-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4rem;
    position: relative;
    width: 100%;
}

.timeline-row.left {
    flex-direction: row;
}

.timeline-row.right {
    flex-direction: row-reverse;
}

.process-card-detail {
    width: 45%;
    background: #0B0E14;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 2rem;
    position: relative;
    z-index: 1;
}

/* Horizontal Connector Line */
.process-card-detail::after {
    content: '';
    position: absolute;
    top: 40px;
    /* Align with icon center approx */
    width: 11.5%;
    /* Span the 5% gap (5/45 = ~11%) plus a bit */
    height: 1px;
    background: rgba(59, 130, 246, 0.4);
    z-index: 0;
}

.timeline-row.left .process-card-detail::after {
    right: -11.5%;
}

.timeline-row.right .process-card-detail::after {
    left: -11.5%;
}

.timeline-dot {
    width: 14px;
    height: 14px;
    background: #0B0E14;
    /* Dark center */
    border-radius: 50%;
    border: 2px solid #3B82F6;
    /* Blue border */
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    top: 33px;
    /* Align with connector line */
}

/* Specific glowing dot for active steps? All seem active in design */

.step-header {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    margin-bottom: 1.5rem;
}

/* Theme Colors for Process Steps */
.icon-theme-teal {
    background: linear-gradient(135deg, rgba(45, 212, 191, 0.2) 0%, rgba(20, 184, 166, 0.05) 100%);
    border-color: rgba(45, 212, 191, 0.3);
    color: #2DD4BF;
    box-shadow: inset 0 0 15px rgba(45, 212, 191, 0.1);
}

.icon-theme-purple {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(147, 51, 234, 0.05) 100%);
    border-color: rgba(168, 85, 247, 0.3);
    color: #A855F7;
    box-shadow: inset 0 0 15px rgba(168, 85, 247, 0.1);
}

.icon-theme-pink {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.2) 0%, rgba(219, 39, 119, 0.05) 100%);
    border-color: rgba(236, 72, 153, 0.3);
    color: #EC4899;
    box-shadow: inset 0 0 15px rgba(236, 72, 153, 0.1);
}

.icon-theme-blue {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.05) 100%);
    border-color: rgba(59, 130, 246, 0.3);
    color: #3B82F6;
    box-shadow: inset 0 0 15px rgba(59, 130, 246, 0.1);
}

/* Matching Timeline Dots */
.dot-theme-teal {
    background: #0B0E14;
    border-color: #2DD4BF;
    box-shadow: 0 0 8px rgba(45, 212, 191, 0.4);
}

.dot-theme-purple {
    background: #0B0E14;
    border-color: #A855F7;
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.4);
}

.dot-theme-pink {
    background: #0B0E14;
    border-color: #EC4899;
    box-shadow: 0 0 8px rgba(236, 72, 153, 0.4);
}

.dot-theme-blue {
    background: #0B0E14;
    border-color: #3B82F6;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
}


.step-label {
    display: block;
    font-size: 0.8rem;
    color: #6B7280;
    font-weight: 500;
    margin-bottom: 4px;
}

.process-card-detail h3 {
    font-size: 1.15rem;
    color: white;
    margin: 0;
}

.process-card-detail p {
    font-size: 0.95rem;
    color: #9CA3AF;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.key-points strong {
    display: block;
    font-size: 0.85rem;
    color: white;
    margin-bottom: 0.5rem;
}

.key-points ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.key-points ul li {
    font-size: 0.85rem;
    color: #D1D5DB;
    margin-bottom: 0.3rem;
}

/* Why Process Works */
.why-process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 2rem;
}

.why-proc-item h4 {
    color: white;
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.why-proc-item p {
    color: #9CA3AF;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* CTA Process Box */
.cta-process-box {
    border: 1px solid rgba(59, 130, 246, 0.3);
    background: linear-gradient(90deg, rgba(8, 15, 28, 1) 0%, rgba(13, 20, 36, 1) 100%);
    border-radius: 20px;
    padding: 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.1);
}

.cta-process-box h3 {
    font-size: 1.5rem;
    color: white;
    margin: 0;
}

/* CTA Process Box Buttons */
.cta-process-box .cta-btns {
    display: flex;
    gap: 1rem;
}

/* Assuming btn-white is already defined or I need to add it? */
/* I saw btn-white in services.html but maybe not in css? checking... */
/* If not, I'll add a generic one here */
.btn-white {
    background: white;
    color: black;
    border: 1px solid white;
}

.btn-white:hover {
    background: #f3f4f6;
    color: black;
}

/* The gradient button */
.cta-process-box .btn-secondary {
    background: linear-gradient(90deg, #6366F1 0%, #A855F7 100%);
    color: white;
    border: none;
}

.cta-process-box .btn-secondary:hover {
    opacity: 0.9;
}

/* About Page Specifics */
.story-section {
    padding: 2rem 0 6rem;
}

.story-grid {
    display: flex;
    justify-content: space-between;
    gap: 4rem;
}

.story-title h2 {
    font-size: 2rem;
    color: white;
    white-space: nowrap;
}

.story-content p {
    color: #9CA3AF;
    line-height: 1.7;
    font-size: 1rem;
    max-width: 600px;
}

/* Values Grid */
.values-section {
    padding: 0 0 6rem;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.value-card {
    background: #0B0E14;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* The mauve/purple glow hint */
    box-shadow: 0 20px 40px -15px rgba(124, 58, 237, 0.15);
}

.value-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Gradient from top-right blueish to bottom-left purpleish hint */
    background: radial-gradient(circle at top right, rgba(59, 130, 246, 0.1), transparent 60%),
        radial-gradient(circle at bottom center, rgba(139, 92, 246, 0.08), transparent 50%);
    pointer-events: none;
}

.value-card:hover {
    transform: translateY(-5px);
    border-color: rgba(139, 92, 246, 0.4);
    /* Purple border on hover */
    box-shadow: 0 30px 60px -15px rgba(124, 58, 237, 0.25);
    /* Stronger purple glow */
}

.value-icon {
    width: 48px;
    height: 48px;
    background: rgba(30, 35, 45, 0.5);
    /* Darker, slightly transparent */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #A78BFA;
    /* Lighter Purple Icon Color to match screenshot */
    margin-bottom: 1.5rem;
    box-shadow: none;
    /* Removed internal blue glow to match the clean dark look */
}

.value-card h3 {
    font-size: 1.1rem;
    color: white;
    margin-bottom: 0.75rem;
}

.value-card p {
    font-size: 0.9rem;
    color: #9CA3AF;
    line-height: 1.5;
}

/* About Differences */
.about-difference-section {
    padding: 2rem 0 6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
}

.about-diff-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    margin-top: 2rem;
}

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

.diff-list li {
    margin-bottom: 2rem;
    position: relative;
    padding-left: 1.5rem;
}

.diff-list li::before {
    content: '•';
    color: #3B82F6;
    position: absolute;
    left: 0;
    font-size: 1.2rem;
    line-height: 1;
}

.diff-list li strong {
    display: block;
    color: white;
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.diff-list li p {
    color: #9CA3AF;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* Tools Stack */
.tools-section {
    padding: 4rem 0 6rem;
    text-align: center;
}

.tools-grid {
    display: flex;
    justify-content: center;
    gap: 4rem;
    margin-top: 3rem;
}

.tool-col h4 {
    color: white;
    font-size: 1rem;
    opacity: 0.8;
}

/* CTA Bottom Center */
.center-content {
    flex-direction: column;
    text-align: center;
    justify-content: center;
    gap: 2rem;
}

/* --- Responsive 390px (Mobile) --- */
@media (max-width: 768px) {
    h1 {
        font-size: 2.5rem;
    }

    .desktop-nav {
        display: none;
    }

    /* Reveal button on mobile header */
    .header .btn {
        display: inline-flex;
        padding: 0.6rem 1rem;
        font-size: 0.8rem;
        margin-right: 1.25rem;
        background: var(--gradient-primary);
        /* Ensure explicit bg if overridden */
    }

    .mobile-menu-btn {
        display: flex;
    }

    .header-container {
        padding: 0 1.25rem;
    }

    .hero {
        padding-top: calc(var(--header-height) + 2rem);
        text-align: left;
        /* Align left for mobile 390px */
    }

    .hero-container {
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: left;
    }

    .hero-content {
        display: block;
        /* Remove flex column center */
        align-items: flex-start;
    }

    .hero-actions {
        flex-direction: column;
        /* Stack buttons on mobile? design check... 
           Image 390ps: "Book a Free Call" (Blue) and "View Work" (Outline). 
           They seem next to each other or stacked? 
           Usually stacked on very small screens, or side-by-side if they fit. 
           Let's keep side-by-side but allow wrapping */
        flex-wrap: wrap;
        gap: 1rem;
    }

    .btn-secondary,
    .btn-outline {
        margin-left: 0;
        /* Remove left margin for flex gap */
    }

    .hero-features {
        justify-content: flex-start;
        /* Left align */
    }

    .hero-visual {
        height: 350px;
    }

    .cube-container {
        transform: scale(0.85);
    }

    .services-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

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

    .process-steps {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .section-header h2 {
        font-size: 2rem;
    }

    .footer-content {
        flex-direction: column;
        gap: 3rem;
    }

    .footer-links-wrapper {
        flex-wrap: wrap;
        gap: 2rem;
        width: 100%;
        justify-content: space-between;
    }

    .cta-box {
        padding: 3rem 1.5rem;
    }

    .cta-box h2 {
        font-size: 2rem;
    }

    .cta-btns {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        width: 100%;
    }

    .cta-btns .btn {
        width: 100%;
    }

    /* Process Page Mobile */
    .timeline-line {
        left: 24px;
        /* Shift line to left */
        transform: none;
    }

    .timeline-row,
    .timeline-row.left,
    .timeline-row.right {
        flex-direction: column;
        align-items: flex-start;
        padding-left: 4rem;
        /* More space for line */
        margin-bottom: 3rem;
    }

    .process-card-detail {
        width: 100%;
        margin-bottom: 0;
    }

    .timeline-dot {
        left: 24px;
        /* Align dot with shifted line */
        transform: translateX(-50%);
        top: 40px;
        /* Align with connector/icon */
    }

    .process-card-detail::after {
        right: auto;
        left: -2rem;
        /* Connect back to line */
        width: 2rem;
        /* Distance from card to line */
    }

    .timeline-row.left .process-card-detail::after,
    .timeline-row.right .process-card-detail::after {
        left: -2.1rem;
        /* Adjust for padding */
        right: auto;
        width: 2.1rem;
    }

    .why-process-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* About Page Mobile */
    .story-grid {
        flex-direction: column;
        gap: 1.5rem;
    }

    .values-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 columns on mobile as per screenshot? Or 1? Screenshot looks like 2 side-by-side or very narrow 1. Usually 1 is safer for 390px but screenshot shows "Clarity, Quality" side-by-side. Wait, screenshot mobile view shows "Clarity | Quality" so 2 columns! */
        gap: 1rem;
    }

    .about-diff-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .tools-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }

    .center-content {
        padding: 2rem;
    }


    /* Services Page Mobile */
    .services-row {
        grid-template-columns: 1fr;
    }

    .why-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem 1rem;
    }

    .process-timeline {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .page-hero h1 {
        font-size: 2.5rem;
    }

    .cta-mini-btns {
        flex-direction: column;
    }

    /* Work Page Mobile */
    .difference-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .diff-item {
        flex-direction: row;
        /* Keep icon next to text on mobile as per screenshot */
        align-items: flex-start;
    }
}

/* 3D Atom Logo Animation */
.logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.atom-icon {
    width: 32px;
    height: 32px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
}

/* Central Nucleus */
.nucleus {
    width: 10px;
    height: 10px;
    background: radial-gradient(circle, #A78BFA, #7C3AED);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(124, 58, 237, 0.6);
    position: absolute;
    z-index: 10;
}

/* Orbits */
.orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(59, 130, 246, 0.4);
    border-radius: 50%;
    transform-style: preserve-3d;
}

/* Specific Orbit Rotations */
.orbit-1 {
    transform: translate(-50%, -50%) rotateZ(0deg) rotateY(60deg);
    animation: rotateOrbit1 4s linear infinite;
}

.orbit-2 {
    transform: translate(-50%, -50%) rotateZ(60deg) rotateY(60deg);
    animation: rotateOrbit2 4s linear infinite;
}

.orbit-3 {
    transform: translate(-50%, -50%) rotateZ(120deg) rotateY(60deg);
    animation: rotateOrbit3 4s linear infinite;
}

/* Electrons (Dots on orbits) */
.electron {
    position: absolute;
    top: -2px;
    /* Position on the ring */
    left: 50%;
    width: 4px;
    height: 4px;
    background: #60A5FA;
    border-radius: 50%;
    box-shadow: 0 0 6px #3B82F6;
    transform: translateX(-50%);
}

/* Animations */
@keyframes rotateOrbit1 {
    0% {
        transform: translate(-50%, -50%) rotateZ(0deg) rotateY(60deg) rotateZ(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotateZ(0deg) rotateY(60deg) rotateZ(360deg);
    }
}

@keyframes rotateOrbit2 {
    0% {
        transform: translate(-50%, -50%) rotateZ(60deg) rotateY(60deg) rotateZ(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotateZ(60deg) rotateY(60deg) rotateZ(360deg);
    }
}

@keyframes rotateOrbit3 {
    0% {
        transform: translate(-50%, -50%) rotateZ(120deg) rotateY(60deg) rotateZ(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotateZ(120deg) rotateY(60deg) rotateZ(360deg);
    }
}

/* Contact Page Specifics */
.contact-hero {
    padding: 8rem 0 4rem;
    text-align: center;
}

.contact-content {
    padding-bottom: 8rem;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

/* Contact Form Card - With Purple Glow */
.contact-form-card {
    background: #0B0E14;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 2.5rem;
    position: relative;
    /* The requested purple glow */
    box-shadow: 0 0 60px -15px rgba(124, 58, 237, 0.2);
    z-index: 1;
}

/* Enhanced Glow Effect matching Icons */
.contact-form-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Subtle purple gradient overlay for the glow feel */
    background: radial-gradient(circle at center, rgba(139, 92, 246, 0.05), transparent 70%);
    pointer-events: none;
    z-index: -1;
    border-radius: 20px;
}

/* Input Fields */
.form-group {
    margin-bottom: 1.5rem;
}

.form-input {
    width: 100%;
    background: #151922;
    /* Darker input bg */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1rem;
    color: white;
    font-family: var(--font-main);
    font-size: 0.95rem;
    transition: 0.3s ease;
}

.form-input:focus {
    outline: none;
    border-color: #3B82F6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    background: #1A1E29;
}

.form-input::placeholder {
    color: #6B7280;
}

.full-width-btn {
    width: 100%;
    justify-content: center;
    margin-top: 1rem;
}

.privacy-text {
    font-size: 0.75rem;
    color: #4B5563;
    text-align: center;
    margin-top: 1.5rem;
    line-height: 1.5;
}

/* Right Side Info Cards */
.contact-info-col {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.contact-info-card {
    background: #0B0E14;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 2rem;
}

.contact-info-card h3 {
    font-size: 1.25rem;
    color: white;
    margin-bottom: 1.5rem;
}

.mb-1-5 {
    margin-bottom: 1.5rem;
}

.small-btn {
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
}

.contact-details {
    list-style: none;
    padding: 0;
    margin-bottom: 2rem;
}

.contact-details li {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: #D1D5DB;
    margin-bottom: 0.8rem;
    font-size: 0.95rem;
}

.contact-details li svg {
    color: #9CA3AF;
}

.info-icons-row {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 1.5rem;
    gap: 1rem;
}

.info-icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
}

.info-icon-item svg {
    color: #9CA3AF;
}

.info-icon-item span {
    font-size: 0.7rem;
    color: #6B7280;
}

.small-card p {
    color: #9CA3AF;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Responsive Contact */
@media (max-width: 900px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
}

/* Chat Widget Styles - Premium Design */
#wapim-chat-widget {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 9999;
    font-family: var(--font-main, 'Inter', sans-serif);
}

#chat-toggle-btn {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #3B82F6, #8B5CF6);
    border-radius: 50%;
    border: none;
    color: white;
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.6);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#chat-toggle-btn:hover {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.7);
}

#chat-window {
    position: absolute;
    bottom: 90px;
    right: 0;
    width: 380px;
    height: 500px;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s ease-out;
    transform-origin: bottom right;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }

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

#chat-window.hidden {
    display: none;
}

.chat-header {
    background: linear-gradient(to right, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.9));
    padding: 1.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.chat-header h4 {
    margin: 0;
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-header h4::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #10B981;
    border-radius: 50%;
    box-shadow: 0 0 10px #10B981;
}

#chat-close-btn {
    background: none;
    border: none;
    color: #94A3B8;
    font-size: 1.8rem;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
}

#chat-close-btn:hover {
    color: white;
}

#chat-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

/* Login Form */
#chat-login-form {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    padding: 2.5rem;
    height: 100%;
    justify-content: center;
    background: radial-gradient(circle at center, rgba(59, 130, 246, 0.1), transparent 70%);
}

.chat-intro {
    color: #CBD5E1;
    font-size: 1rem;
    text-align: center;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

#chat-login-form input {
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1rem;
    border-radius: 10px;
    color: white;
    transition: all 0.3s ease;
}

#chat-login-form input:focus {
    outline: none;
    border-color: #3B82F6;
    background: rgba(30, 41, 59, 1);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

#start-chat-btn {
    background: linear-gradient(135deg, #3B82F6, #6366F1);
    color: white;
    border: none;
    padding: 1rem;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    margin-top: 1rem;
    transition: transform 0.2s;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

#start-chat-btn:hover {
    transform: translateY(-2px);
}

/* Conversation View */
#chat-conversation {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#messages-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
    scroll-behavior: smooth;
}

/* Scrollbar Style */
#messages-list::-webkit-scrollbar {
    width: 6px;
}

#messages-list::-webkit-scrollbar-track {
    background: transparent;
}

#messages-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.chat-msg {
    padding: 0.8rem 1.2rem;
    max-width: 80%;
    font-size: 0.95rem;
    line-height: 1.5;
    position: relative;
    word-wrap: break-word;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.chat-msg.visitor {
    background: linear-gradient(135deg, #3B82F6, #2563EB);
    color: white;
    align-self: flex-end;
    border-radius: 18px 18px 4px 18px;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
}

.chat-msg.admin {
    background: rgba(51, 65, 85, 0.9);
    color: #F8FAFC;
    align-self: flex-start;
    border-radius: 18px 18px 18px 4px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.input-area {
    display: flex;
    gap: 0.8rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 1rem;
    background: rgba(15, 23, 42, 0.9);
    backdrop-filter: blur(10px);
}

#chat-message-input {
    flex: 1;
    background: rgba(30, 41, 59, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 25px;
    color: white;
    padding: 0.8rem 1.2rem;
    resize: none;
    height: 48px;
    line-height: 1.4;
    font-family: inherit;
    transition: background 0.2s;
}

#chat-message-input:focus {
    outline: none;
    background: rgba(30, 41, 59, 1);
    border-color: rgba(59, 130, 246, 0.5);
}

#send-message-btn {
    background: #3B82F6;
    border: none;
    color: white;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.4);
}

#send-message-btn:hover {
    transform: scale(1.05);
}

.status-bar {
    text-align: center;
    padding: 2rem 1rem;
    color: #94A3B8;
    font-size: 0.9rem;
    background: transparent;
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.waiting-dots {
    display: flex;
    gap: 6px;
    justify-content: center;
    padding: 10px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 20px;
}

.waiting-dots span {
    width: 10px;
    height: 10px;
    background: #3B82F6;
    border-radius: 50%;
    animation: bounce 1.4s infinite ease-in-out both;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

.waiting-dots span:nth-child(1) {
    animation-delay: -0.32s;
}

.waiting-dots span:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes bounce {

    0%,
    80%,
    100% {
        transform: scale(0);
        opacity: 0.5;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }
}




/* --- FAQ Section --- */
.faq-section {
    padding: 6rem 0;
    position: relative;
    background: linear-gradient(180deg, transparent 0%, rgba(15, 23, 42, 0.4) 100%);
}

.faq-container {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    background: rgba(30, 41, 59, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    /* Subtle border */
    border-radius: 12px;
    margin-bottom: 1rem;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:hover {
    border-color: rgba(59, 130, 246, 0.3);
    /* Blue hover glow */
    background: rgba(30, 41, 59, 0.5);
}

.faq-item details {
    width: 100%;
}

.faq-item summary {
    padding: 1.5rem;
    cursor: pointer;
    font-weight: 500;
    color: white;
    list-style: none;
    /* Remove default triangle */
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.05rem;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: '+';
    font-size: 1.5rem;
    color: #9CA3AF;
    transition: transform 0.3s ease;
    line-height: 1;
}

.faq-item details[open] summary::after {
    transform: rotate(45deg);
    /* Turn + to x */
    color: #3B82F6;
    /* Active blue */
}

.faq-item details[open] summary {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: #3B82F6;
}

.faq-answer {
    padding: 1.5rem;
    color: #9CA3AF;
    line-height: 1.7;
    font-size: 0.95rem;
    animation: fadeIn 0.3s ease;
}

.faq-answer strong {
    color: #E2E8F0;
    font-weight: 600;
}

.faq-header {
    text-align: center;
    margin-bottom: 3rem;
}

.faq-header h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    background: linear-gradient(to right, #fff, #94a3b8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ----------------------------------------------------------------------
   Mobile Navigation Overlay & Drawer
   ---------------------------------------------------------------------- */
.mobile-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
}

.mobile-nav-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mobile-nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 300px;
    height: 100vh;
    background: var(--bg-card);
    z-index: 999;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -5px 0 30px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    padding: 2rem;
    border-left: 1px solid rgba(255, 255, 255, 0.05);
}

.mobile-nav.active {
    transform: translateX(0);
}

.mobile-nav-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.mobile-nav-header .logo {
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 1px;
    color: white;
}

.close-menu-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
    padding: 0.5rem;
    transition: 0.3s;
}

.close-menu-btn:hover {
    color: white;
    transform: rotate(90deg);
}

.mobile-nav-links {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.mobile-nav-links a {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--text-muted);
    transition: 0.3s;
    display: block;
}

.mobile-nav-links a:hover,
.mobile-nav-links a.active {
    color: white;
    transform: translateX(10px);
    color: var(--accent-blue);
}

.mobile-nav .btn {
    margin-top: auto;
    text-align: center;
}