/* ==========================================================================
   KODRYN SYSTEM DESIGN - CSS CUSTOM PROPERTIES
   Dark-only (Linear inspired) — this site no longer has a light theme.
   ========================================================================== */
:root {
    --primary: #0052FF;
    --primary-hover: #0041CC;
    --primary-glow: rgba(0, 196, 255, 0.1);
    --secondary: #00C4FF;
    --secondary-hover: #00B0E6;

    --bg-main: #070A13;
    --bg-secondary: #0D1220;
    --bg-card: #121829;
    --border-color: rgba(255, 255, 255, 0.06);
    --border-focus: rgba(0, 196, 255, 0.5);

    --text-main: #F8FAFC;
    --text-muted: #94A3B8;
    --text-inverse: #070A13;

    --card-shadow: 0 15px 35px -15px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(255, 255, 255, 0.02);
    --card-shadow-hover: 0 25px 50px -20px rgba(0, 82, 255, 0.2), 0 1px 5px rgba(0, 196, 255, 0.1);

    /* Service card tints */
    --tint-blue: rgba(0, 82, 255, 0.08);
    --tint-cyan: rgba(0, 196, 255, 0.08);
    --signature-bg: #080B16;
    --signature-border: rgba(255, 255, 255, 0.08);
    --signature-text: #F8FAFC;
    --signature-text-muted: #8B93A7;

    /* Font Families */
    --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Layout Variables */
    --container-max-width: 1200px;
    --header-height: 80px;
    --border-radius-sm: 8px;
    --border-radius-md: 16px;
    --border-radius-lg: 24px;

    /* Animation Timing */
    --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-normal: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-slow: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   RESET & BASE STYLES
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

body {
    background-color: var(--bg-main);
    color: var(--text-main);
    font-family: var(--font-body);
    line-height: 1.6;
    overflow-x: hidden;
    transition: background-color var(--transition-normal), color var(--transition-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

h1,
h2,
h3,
h4 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.25;
    color: var(--text-main);
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

input,
textarea,
button {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

/* ==========================================================================
   REUSABLE COMPONENTS (Buttons, Badges, Gradients)
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: var(--border-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

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

.btn-primary:hover {
    background-color: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -5px rgba(0, 82, 255, 0.3);
}

.btn-whatsapp {
    background-color: #25D366;
}

.btn-whatsapp:hover {
    background-color: #1EBE5A;
    box-shadow: 0 10px 20px -5px rgba(37, 211, 102, 0.35);
}

/* Floating WhatsApp button — round, brand green. Hidden on Home, shown from
   Servicios onward (app.js toggles .is-visible via IntersectionObserver). */
.whatsapp-float {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #25D366;
    color: #FFFFFF;
    box-shadow: 0 10px 28px -6px rgba(37, 211, 102, 0.55), 0 3px 10px rgba(0, 0, 0, 0.25);
    z-index: 900;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(12px) scale(0.9);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s, box-shadow var(--transition-fast);
}

.whatsapp-float.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0s, box-shadow var(--transition-fast);
}

.whatsapp-float::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid rgba(37, 211, 102, 0.55);
    animation: whatsapp-pulse 2.4s ease-out infinite;
}

@keyframes whatsapp-pulse {
    0% {
        transform: scale(0.9);
        opacity: 0.8;
    }

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

.whatsapp-float:hover {
    transform: translateY(-3px) scale(1.06);
    box-shadow: 0 14px 32px -6px rgba(37, 211, 102, 0.65), 0 4px 12px rgba(0, 0, 0, 0.3);
}

@media (prefers-reduced-motion: reduce) {
    .whatsapp-float::before {
        animation: none;
    }
}

@media (max-width: 768px) {
    .whatsapp-float {
        right: 24px;
        bottom: 40px;
        width: 52px;
        height: 52px;
    }
}

.btn-secondary {
    background-color: var(--bg-secondary);
    color: var(--text-main);
    border-color: var(--border-color);
}

.btn-secondary:hover {
    background-color: var(--border-color);
    transform: translateY(-2px);
}

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

.btn-outline:hover {
    background-color: var(--primary-glow);
    transform: translateY(-2px);
}

.btn-block {
    display: flex;
    width: 100%;
}

/* Badges */
.badge-tag {
    display: inline-block;
    padding: 6px 12px;
    background-color: var(--primary-glow);
    color: var(--primary);
    border: 1px solid var(--border-color);
    border-radius: 100px;
    font-size: 0.75rem;
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    width: fit-content;
}

.text-gradient {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Section Common Styles */
.section-header {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 32px;
}

.section-title {
    font-size: 2.5rem;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}

.section-title.text-left {
    text-align: left;
}

.section-subtitle {
    font-size: 1.125rem;
    color: var(--text-muted);
}

.section-subtitle.text-left {
    text-align: left;
}

/* ==========================================================================
   NAVBAR (HEADER) - FLOATING CAPSULE DESIGN
   ========================================================================== */
.header {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(-18px);
    width: max-content;
    height: 64px;
    background-color: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: 100px;
    box-shadow: 0 16px 36px -12px rgba(0, 82, 255, 0.08);
    z-index: 1000;
    padding: 0 8px;
    transition: background-color var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal),
        opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0s linear 0s;

    /* Load-in entrance: stays fully hidden (and unclickable) while the
       star-cluster burst plays. app.js adds .hero-entrance-ready to <html>
       the moment the burst finishes — same trigger used for the hero CTAs
       and mockup — so this only reveals once, on cue, instead of racing a
       CSS custom property that may not be set yet at first paint. */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

html.hero-entrance-ready .header {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
    .header {
        transition: none;
        transform: translateX(-50%);
    }
}

body.dark-mode .header {
    background-color: rgba(13, 18, 32, 0.85);
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 16px 36px -12px rgba(0, 0, 0, 0.5);
}

.header-container {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 0 16px !important;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;

}


.logo-text--footer {
    font-size: 1.8rem;
}

.logo-img {
    height: 80px;
    width: auto;
    object-fit: contain;
    transition: transform var(--transition-normal);
}

.logo:hover .logo-img,
.logo:hover .logo-text {
    transform: scale(1.05);
}

.logo-img-footer {
    height: 60px;
    width: auto;
    object-fit: contain;
    transition: transform var(--transition-normal);
}

.logo:hover .logo-img-footer {
    transform: scale(1.05);
}

.logo-text {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.25rem;
    letter-spacing: -0.03em;
    color: var(--text-main);
}

.nav-menu {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    background-color: rgba(0, 82, 255, 0.03);
    border: 1px solid rgba(0, 82, 255, 0.05);
    border-radius: 100px;
    padding: 4px;
}

body.dark-mode .nav-menu {
    background-color: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.04);
}

.nav-link {
    position: relative;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-muted);
    padding: 8px 18px;
    border-radius: 100px;
    transition: color var(--transition-fast);
    z-index: 2;
}

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

body.dark-mode .nav-link:hover {
    color: var(--secondary);
}

/* Floating hover background */
.nav-hover-bg {
    position: absolute;
    top: 4px;
    left: 4px;
    height: calc(100% - 8px);
    width: 0;
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 82, 255, 0.1);
    box-shadow: 0 4px 12px rgba(0, 82, 255, 0.05);
    border-radius: 100px;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

body.dark-mode .nav-hover-bg {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mobile-menu-btn {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
    background: none;
    border: none;
    cursor: pointer;
}

.mobile-menu-btn span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--text-main);
    border-radius: 2px;
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}



/* ==========================================================================
   HERO SECTION
   ========================================================================== */
/* ==========================================================================
   HERO SECTION (glowing, celestial, minimalist)
   ========================================================================== */
.hero-section {
    position: relative;
    z-index: 10;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-sticky-stage {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: calc(var(--header-height) + 24px);
    padding-bottom: 60px;
}

@media (min-width: 768px) {
    .hero-sticky-stage {
        padding-top: calc(var(--header-height) + 40px);
        padding-bottom: 80px;
    }
}

.hero-bg-gradients {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.hero-stars {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 1;
}

.gradient-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.35;
}

body.dark-mode .gradient-blob {
    opacity: 0.18;
}

/* Blue celestial blobs */
.blob-1 {
    top: -15%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 82, 255, 0.2) 0%, rgba(0, 82, 255, 0.05) 50%, transparent 100%);
}

.blob-2 {
    bottom: -15%;
    left: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(0, 196, 255, 0.12) 0%, transparent 100%);
}

.hero-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}

.hero-content {
    position: relative;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    /* load-in animation matching the transition — visibility:hidden on top
       of opacity so nothing in here can render (or be clicked) a frame
       before the star burst finishes, whatever else is going on. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(25px) scale(0.98);
    transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1), transform 1.4s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0s linear 0s;
    transition-delay: 0.1s;
}

html.hero-entrance-ready .hero-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* Badge Pill (What's new style) */
.hero-badge-pill {
    display: inline-flex;
    align-items: center;
    background: rgba(0, 82, 255, 0.03);
    border: 1px solid rgba(0, 82, 255, 0.08);
    border-radius: 100px;
    padding: 5px 8px;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 0.8rem;
    font-family: var(--font-body);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all var(--transition-normal);
}

body.dark-mode .hero-badge-pill {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
}

.badge-tag-blue {
    background: var(--primary);
    color: #FFFFFF;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.7rem;
    padding: 3px 10px;
    border-radius: 100px;
    letter-spacing: 0.05em;
    box-shadow: 0 2px 10px rgba(0, 82, 255, 0.25);
}

.badge-text-glass {
    color: var(--text-muted);
    padding-right: 6px;
    font-weight: 500;
}

body.dark-mode .badge-text-glass {
    color: #E2E8F0;
}

/* Hero Title */
.hero-title {
    font-size: 2.4rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.12;
    max-width: 800px;
    margin-bottom: 20px;
    color: var(--text-main);
}

.hero-title .text-blue {
    color: var(--primary);
    font-weight: 700;
}

body.dark-mode .hero-title .text-blue {
    color: #00C4FF;
}

@media (min-width: 768px) {
    .hero-title {
        font-size: 3.4rem;
    }
}

@media (min-width: 1024px) {
    .hero-title {
        font-size: 4.4rem;
    }
}

/* Hero Subtitle */
.hero-subtitle {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--text-muted);
    max-width: 620px;
    margin: 0 auto 28px;
    font-weight: 400;
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 0.3s;
}

body.dark-mode .hero-subtitle {
    color: #94A3B8;
}

/* Hero Actions / CTAs */
.hero-ctas {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    transition-delay: var(--hero-entrance-delay, 0s);
}

.btn-primary-hero {
    background-color: var(--primary);
    color: #FFFFFF;
    border-radius: var(--border-radius-sm);
    padding: 13px 28px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.95rem;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 8px 20px -5px rgba(0, 82, 255, 0.35),
        0 0 15px rgba(0, 82, 255, 0.15);
    transition: all var(--transition-fast);
}

.btn-primary-hero:hover {
    background-color: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 12px 25px -5px rgba(0, 82, 255, 0.45),
        0 0 20px rgba(0, 82, 255, 0.25);
}

.btn-outline-hero {
    background-color: rgba(0, 82, 255, 0.03);
    color: var(--text-main);
    border: 1.5px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 12px 26px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all var(--transition-fast);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

body.dark-mode .btn-outline-hero {
    background-color: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

.btn-outline-hero:hover {
    background-color: rgba(0, 82, 255, 0.08);
    border-color: var(--primary);
    transform: translateY(-2px);
}

body.dark-mode .btn-outline-hero:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

/* ==========================================================================
   HERO VISUAL (split layout: copy left, minimal icon panel right)
   ========================================================================== */
.hero-visual {
    position: relative;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 500px;
    margin: 48px auto 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(25px) scale(0.98);
    transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1), transform 1.4s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0s linear 0s;
    transition-delay: 0.1s;
}

html.hero-entrance-ready .hero-visual {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.hero-visual-glow {
    position: absolute;
    inset: 4% -10%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 82, 255, 0.22) 0%, rgba(0, 196, 255, 0.1) 45%, transparent 75%);
    filter: blur(40px);
    z-index: -1;
}

/* Mac-style window mockup: minimal CRM/dashboard suggesting AI automation */
.mac-window {
    width: 100%;
    border-radius: 14px;
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--card-shadow-hover);
    animation: hero-visual-float 6s ease-in-out infinite;
}

.mac-window-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 14px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.mac-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.mac-dot--red {
    background: #FF5F57;
}

.mac-dot--yellow {
    background: #FEBC2E;
}

.mac-dot--green {
    background: #28C840;
}

.mac-window-title {
    margin: 0 auto;
    transform: translateX(-14px);
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-muted);
}

.mac-window-body {
    position: relative;
    height: 282px;
    background: var(--bg-card);
    overflow: hidden;
    /* Depth for the panels' 3D rotation below */
    perspective: 1200px;
}

/* Each screen (CRM / website / code) stacks in the same spot, like faces of
   a box. Switching panels rotates the outgoing face away and the incoming
   face in around a vertical axis — JS toggles these classes and restarts
   them via a reflow so the motion always plays, every cycle. */
.mac-panel {
    position: absolute;
    inset: 0;
    display: flex;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.mac-panel.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.mac-panel.panel-enter {
    animation: box-rotate-in 0.7s cubic-bezier(0.65, 0, 0.35, 1) both;
}

.mac-panel.panel-exit {
    animation: box-rotate-out 0.6s cubic-bezier(0.65, 0, 0.35, 1) both;
}

@keyframes box-rotate-in {
    0% {
        opacity: 0;
        filter: blur(4px);
        transform: rotateY(95deg);
    }

    45% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        filter: blur(0);
        transform: rotateY(0deg);
    }
}

@keyframes box-rotate-out {
    0% {
        opacity: 1;
        filter: blur(0);
        transform: rotateY(0deg);
    }

    100% {
        opacity: 0;
        filter: blur(8px);
        transform: rotateY(-95deg);
    }
}


/* Sidebar */
.crm-sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 44px;
    padding: 16px 0;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
}

.crm-sidebar-logo {
    width: 16px;
    height: 16px;
    border-radius: 5px;
    background: var(--primary);
    margin-bottom: 6px;
}

.crm-nav-item {
    width: 16px;
    height: 16px;
    border-radius: 5px;
    background: var(--border-color);
}

.crm-nav-item--active {
    background: var(--primary);
    opacity: 0.85;
}

/* Main content */
.crm-main {
    flex: 1;
    min-width: 0;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.crm-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.crm-stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

.crm-stat-label {
    width: 60%;
    height: 5px;
    border-radius: 3px;
    background: var(--border-color);
}

.crm-stat-value {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-main);
}

.crm-stat-value--accent {
    color: var(--primary);
}

body.dark-mode .crm-stat-value--accent {
    color: #00C4FF;
}

.crm-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.crm-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.crm-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    opacity: 0.85;
}

.crm-row-lines {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.crm-line {
    height: 5px;
    border-radius: 3px;
    background: var(--border-color);
}

.crm-line--name {
    width: 65%;
}

.crm-line--sub {
    width: 40%;
    opacity: 0.6;
}

.crm-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    padding: 4px 8px;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 0.62rem;
    font-weight: 700;
    white-space: nowrap;
}

.crm-badge--ai {
    background: var(--primary-glow);
    color: var(--primary);
}

body.dark-mode .crm-badge--ai {
    color: #00C4FF;
}

.crm-badge--done {
    background: rgba(40, 200, 64, 0.12);
    color: #1DA831;
    padding: 4px;
    border-radius: 50%;
}

.crm-badge--pulse {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
}

.crm-pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
    animation: crm-pulse 1.6s ease-in-out infinite;
}

body.dark-mode .crm-pulse-dot {
    background: #00C4FF;
}

@keyframes crm-pulse {

    0%,
    100% {
        opacity: 0.35;
        transform: scale(0.85);
    }

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

/* Panel 2: Website preview mockup */
.mac-panel--site {
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.site-nav-logo {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    background: var(--primary);
    flex-shrink: 0;
}

.site-nav-link {
    width: 26px;
    height: 5px;
    border-radius: 3px;
    background: var(--border-color);
}

.site-nav-cta {
    margin-left: auto;
    width: 46px;
    height: 16px;
    border-radius: 100px;
    background: var(--primary);
    opacity: 0.85;
}

.site-hero {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.site-line {
    height: 8px;
    border-radius: 4px;
    background: var(--border-color);
}

.site-line--title-1 {
    width: 68%;
    height: 13px;
}

.site-line--title-2 {
    width: 46%;
    height: 13px;
}

.site-line--title-2.accent {
    background: var(--primary);
    opacity: 0.4;
}

.site-line--text {
    width: 82%;
    margin-top: 4px;
    opacity: 0.7;
}

.site-line--text.short {
    width: 52%;
}

.site-btn {
    margin-top: 8px;
    width: 76px;
    height: 22px;
    border-radius: 100px;
    background: var(--primary);
    box-shadow: 0 6px 14px -4px rgba(0, 82, 255, 0.4);
}

.site-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: auto;
}

.site-card {
    aspect-ratio: 1.8 / 1;
    border-radius: 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

/* Panel 3: Code editor with typing animation — always dark, like a real IDE */
.mac-panel--code {
    background: #0B0F1A;
    padding: 16px 18px;
    gap: 14px;
    font-family: 'JetBrains Mono', var(--font-body), monospace;
}

.code-gutter {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.72rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.2);
    user-select: none;
    flex-shrink: 0;
}

.code-typed {
    margin: 0;
    font-family: inherit;
    font-size: 0.72rem;
    line-height: 1.7;
    white-space: pre-wrap;
    color: #CBD5E1;
}

.tok-kw {
    color: #4EA1FF;
}

.tok-fn {
    color: #00C4FF;
}

.tok-cm {
    color: #5C6370;
    font-style: italic;
}

.code-cursor {
    display: inline-block;
    width: 6px;
    height: 13px;
    background: #00C4FF;
    margin-left: 2px;
    vertical-align: text-bottom;
    animation: code-blink 0.9s steps(1) infinite;
}

@media (prefers-reduced-motion: reduce) {
    .code-cursor {
        animation: none;
    }
}

@keyframes code-blink {

    0%,
    50% {
        opacity: 1;
    }

    50.01%,
    100% {
        opacity: 0;
    }
}

@keyframes hero-visual-float {

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

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

@media (prefers-reduced-motion: reduce) {

    .mac-window,
    .crm-pulse-dot {
        animation: none;
    }
}

@media (min-width: 1024px) {
    .hero-container--split {
        display: grid;
        grid-template-columns: 1.1fr 0.9fr;
        align-items: center;
        gap: 40px;
        text-align: left;
    }

    .hero-content--left {
        align-items: flex-start;
        text-align: left;
    }

    .hero-title--left,
    .hero-subtitle--left {
        margin-left: 0;
        margin-right: 0;
    }

    .hero-ctas--left {
        justify-content: flex-start;
    }
}

/* Minimal soft gradient mesh fading out at the base of the hero (Stripe-style, no shapes) */
.hero-fade-base {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 260px;
    background: linear-gradient(to bottom, transparent 0%, var(--bg-main) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Styled Navbar CTA */
.nav-cta {
    background-color: var(--primary) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 100px !important;
    padding: 10px 22px !important;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 82, 255, 0.25);
    transition: all var(--transition-fast);
}

.nav-cta:hover {
    background-color: var(--primary-hover) !important;
    transform: translateY(-1.5px) !important;
    box-shadow: 0 6px 16px rgba(0, 82, 255, 0.4) !important;
}

/* ==========================================================================
   SERVICES SECTION: four compact flip cards. Front = looping line
   illustration + title + one short line + arrow button; back = full
   description + 4 deliverables in terminal style. Flips on hover (pointer
   devices) and on click / tap / Enter via .is-flipped (MODULE: FLIP CARDS
   in app.js). Illustration motion is gated behind
   prefers-reduced-motion: no-preference.
   ========================================================================== */
.services-section {
    position: relative;
    z-index: 1;
    padding: 120px 0;
    background-color: var(--bg-main);
}

.services-title {
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 4.4vw, 3.6rem);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.035em;
    color: var(--text-main);
    margin-bottom: 56px;
}

/* Same italic accent as the projects title and the manifesto. */
.services-title em {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--secondary);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

/* ---- Flip card --------------------------------------------------------- */
.service-item {
    perspective: 1400px;
    cursor: pointer;
}

.service-inner {
    position: relative;
    display: grid;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-item.is-flipped .service-inner {
    transform: rotateY(180deg);
}

/* .hover-off: set after a click turns the card back, so the hover doesn't
   immediately re-flip it; cleared on mouseleave (app.js). */
@media (hover: hover) {
    .service-item:not(.hover-off):hover .service-inner {
        transform: rotateY(180deg);
    }
}

.service-face {
    grid-area: 1 / 1;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 24px 24px 26px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 24px;
    background: var(--bg-secondary);
    box-shadow: 0 24px 48px -32px rgba(0, 0, 0, 0.8);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.service-back {
    transform: rotateY(180deg);
    border-color: rgba(0, 196, 255, 0.28);
    background:
        radial-gradient(ellipse 90% 70% at 100% 100%, rgba(0, 82, 255, 0.16) 0%, transparent 70%),
        var(--bg-secondary);
}

/* Round arrow button: bottom-right on both faces. */
.service-toggle {
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: transparent;
    color: var(--text-main);
    cursor: pointer;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.service-toggle:hover {
    border-color: var(--primary);
    background-color: var(--primary);
}

.service-toggle:focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: 3px;
}

/* ---- Illustration stage -------------------------------------------------- */
.service-art {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 130px;
    margin: 0 0 18px;
}

.svc-art {
    width: 100%;
    max-width: 150px;
    height: auto;
    overflow: visible;
    fill: none;
    stroke: #CBD5E1;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.svc-art .acc { stroke: var(--secondary); }
.svc-art .dot { fill: #CBD5E1; stroke: none; }
.svc-art .acc-fill { fill: var(--secondary); stroke: none; }
.svc-art--web .pointer { fill: #F8FAFC; stroke: var(--bg-secondary); stroke-width: 1; }
/* Resting spot on the CTA (used as-is when motion is reduced). */
.svc-art--web .pointer { transform: translate(44px, 76px); }

/* ---- Text --------------------------------------------------------------- */
.service-title {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--text-main);
    margin-bottom: 6px;
}

.service-short {
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--text-muted);
    padding-right: 40px; /* keep clear of the arrow button */
}

.service-back-title {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--secondary);
    margin-bottom: 8px;
}

.service-text {
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--text-muted);
    margin-bottom: 14px;
}

.service-list {
    list-style: none;
    display: grid;
    gap: 7px;
    padding: 14px 40px 0 0;
    border-top: 1px solid var(--border-color);
}

.service-list li {
    position: relative;
    padding-left: 16px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    line-height: 1.45;
    color: #CBD5E1;
}

/* Terminal-style prompt instead of a bullet. */
.service-list li::before {
    content: '›';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--secondary);
}

.services-cta {
    margin-top: 32px;
    font-size: 1rem;
    color: var(--text-muted);
}

.services-cta a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 6px;
    font-family: var(--font-heading);
    font-weight: 500;
    color: var(--text-main);
    transition: color var(--transition-fast);
}

.services-cta a:hover {
    color: var(--secondary);
}

.services-cta .cta-arrow {
    transition: transform var(--transition-fast);
}

.services-cta a:hover .cta-arrow {
    transform: translateX(3px);
}

/* Cards reveal one after another. */
.services-grid .service-item:nth-child(2) { transition-delay: 0.06s; }
.services-grid .service-item:nth-child(3) { transition-delay: 0.12s; }
.services-grid .service-item:nth-child(4) { transition-delay: 0.18s; }

@media (prefers-reduced-motion: reduce) {
    /* Swap faces with a fade instead of a 3D turn. */
    .service-inner,
    .service-item.is-flipped .service-inner,
    .service-item:not(.hover-off):hover .service-inner {
        transform: none;
        transition: none;
    }

    .service-back {
        transform: none;
        opacity: 0;
        transition: opacity 0.25s ease;
    }

    .service-item.is-flipped .service-back {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) and (hover: hover) {
    .service-item:not(.hover-off):hover .service-back {
        opacity: 1;
    }
}

/* ---- Illustration motion ------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
    .svc-art * {
        transform-box: fill-box;
    }

    /* 1. Automation: data flows through the chip. */
    .svc-art--auto .flow {
        stroke-dasharray: 3 6;
        animation: svc-flow 1.1s linear infinite;
    }

    .svc-art--auto .packet {
        animation: svc-packet-in 2.6s cubic-bezier(0.45, 0, 0.3, 1) infinite;
    }

    .svc-art--auto .packet--2 { animation-delay: 1.3s; }

    .svc-art--auto .packet--out {
        animation: svc-packet-out 2.6s cubic-bezier(0.45, 0, 0.3, 1) 0.9s infinite;
    }

    .svc-art--auto .core,
    .svc-art--auto .core-spark {
        transform-origin: center;
        animation: svc-pulse 2.6s ease-in-out infinite;
    }

    .svc-art--auto .core-spark {
        animation-name: svc-spin-pulse;
    }

    /* 2. Code: lines type themselves, caret blinks. */
    .svc-art--code .code-line {
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
        animation: svc-type 5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
    }

    .svc-art--code .code-line:nth-of-type(3) { animation-delay: 0.45s; }
    .svc-art--code .code-line:nth-of-type(4) { animation-delay: 0.9s; }
    .svc-art--code .code-line:nth-of-type(5) { animation-delay: 1.35s; }

    .svc-art--code .caret {
        animation: svc-blink 1s steps(1) infinite;
    }

    /* 3. Web: the page assembles, then a pointer clicks the CTA. */
    .svc-art--web .blk {
        animation: svc-build 5.5s cubic-bezier(0.16, 1, 0.3, 1) infinite;
    }

    .svc-art--web .blk-2 { animation-delay: 0.25s; }
    .svc-art--web .blk-3 { animation-delay: 0.5s; }
    .svc-art--web .blk-4 { animation-delay: 0.75s; }

    .svc-art--web .pointer {
        animation: svc-pointer 5.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
    }

    /* 4. Learning: the cap floats, the tassel swings, sparkles twinkle. */
    .svc-art--learn .cap {
        animation: svc-float 4s ease-in-out infinite;
    }

    .svc-art--learn .tassel {
        transform-box: view-box;
        transform-origin: 80px 50px;
        animation: svc-swing 2.4s ease-in-out infinite alternate;
    }

    .svc-art--learn .spark {
        transform-origin: center;
        animation: svc-twinkle 2.8s ease-in-out infinite;
    }

    .svc-art--learn .spark-2 { animation-delay: 0.7s; }
    .svc-art--learn .spark-3 { animation-delay: 1.4s; }
    .svc-art--learn .spark-4 { animation-delay: 2.1s; }
}

@keyframes svc-flow {
    to { stroke-dashoffset: -18; }
}

@keyframes svc-packet-in {
    0% { transform: translateX(0); opacity: 0; }
    12% { opacity: 1; }
    62% { transform: translateX(42px); opacity: 1; }
    72%, 100% { transform: translateX(42px); opacity: 0; }
}

@keyframes svc-packet-out {
    0% { transform: translateX(0); opacity: 0; }
    12% { opacity: 1; }
    62% { transform: translateX(42px); opacity: 1; }
    72%, 100% { transform: translateX(42px); opacity: 0; }
}

@keyframes svc-pulse {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50% { transform: scale(1.08); opacity: 1; }
}

@keyframes svc-spin-pulse {
    0%, 100% { transform: scale(0.9) rotate(0deg); }
    50% { transform: scale(1.15) rotate(90deg); }
}

@keyframes svc-type {
    0% { stroke-dashoffset: 1; opacity: 1; }
    22% { stroke-dashoffset: 0; }
    80% { stroke-dashoffset: 0; opacity: 1; }
    92%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

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

@keyframes svc-build {
    0% { opacity: 0; transform: translateY(6px); }
    12% { opacity: 1; transform: none; }
    84% { opacity: 1; transform: none; }
    96%, 100% { opacity: 0; transform: none; }
}

@keyframes svc-pointer {
    0%, 20% { transform: translate(128px, 104px); opacity: 0; }
    30% { opacity: 1; }
    52% { transform: translate(44px, 76px) scale(1); }
    58% { transform: translate(44px, 76px) scale(0.8); }
    64% { transform: translate(44px, 76px) scale(1); }
    84% { transform: translate(44px, 76px); opacity: 1; }
    96%, 100% { transform: translate(44px, 76px); opacity: 0; }
}

@keyframes svc-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

@keyframes svc-swing {
    from { transform: rotate(-5deg); }
    to { transform: rotate(6deg); }
}

@keyframes svc-twinkle {
    0%, 100% { transform: scale(0.4) rotate(0deg); opacity: 0.2; }
    50% { transform: scale(1.1) rotate(45deg); opacity: 1; }
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 1100px) {
    .services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .services-section {
        padding: 80px 0;
    }

    .services-title {
        margin-bottom: 36px;
    }

    .services-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .service-art {
        height: 120px;
    }
}

.bento-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 40px;
    box-shadow: var(--card-shadow);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.bento-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--card-shadow-hover);
    border-color: rgba(0, 82, 255, 0.15);
}

.card-badge {
    position: absolute;
    top: 24px;
    right: 24px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--primary);
    letter-spacing: 0.05em;
    background-color: var(--primary-glow);
    padding: 4px 10px;
    border-radius: 100px;
}

.bento-card h3 {
    font-size: 1.5rem;
    margin-bottom: 12px;
    margin-top: 10px;
}

.bento-card p {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* ==========================================================================
   PRODUCTS SECTION: project grid. Left-aligned title with the brand in
   italic serif, then two cards side by side and a full-width one. Each
   card is a 3D flipper: front = screenshot (or typographic poster) + name
   bar with a round arrow button; back = project details. Flips on hover
   (pointer devices) and on click / tap / Enter via .is-flipped (app.js).
   ========================================================================== */
.products-section {
    position: relative;
    background-color: var(--bg-main);
    padding: 112px 0 120px;
}

.projects-title {
    font-family: var(--font-heading);
    font-size: clamp(2.4rem, 5.2vw, 4.4rem);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.035em;
    color: var(--text-main);
    margin-bottom: 64px;
}

.projects-title em {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--secondary);
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.project-card--wide {
    grid-column: 1 / -1;
}

/* ---- Flipper ------------------------------------------------------------ */
.project-card {
    perspective: 1600px;
    cursor: pointer;
}

.project-inner {
    position: relative;
    display: grid;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-card.is-flipped .project-inner {
    transform: rotateY(180deg);
}

/* .hover-off: set after a click turns the card back, so the hover doesn't
   immediately re-flip it; cleared on mouseleave (app.js). */
@media (hover: hover) {
    .project-card:not(.hover-off):hover .project-inner {
        transform: rotateY(180deg);
    }
}

.project-face {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    background: var(--bg-secondary);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.project-back {
    transform: rotateY(180deg);
}

/* ---- Front -------------------------------------------------------------- */
.project-media {
    position: relative;
    flex: 1;
    min-height: clamp(240px, 26vw, 360px);
    overflow: hidden;
    background: #0A0F1C;
}

.project-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

/* Typographic cover shown until a real screenshot is dropped in. */
.project-poster {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 32px;
    background:
        radial-gradient(ellipse 70% 90% at 85% 10%, rgba(0, 196, 255, 0.18) 0%, transparent 60%),
        radial-gradient(ellipse 80% 80% at 10% 110%, rgba(0, 82, 255, 0.35) 0%, transparent 65%),
        #0A0F1C;
}

.project-card:nth-child(2) .project-poster {
    background:
        radial-gradient(ellipse 70% 90% at 15% 0%, rgba(0, 196, 255, 0.2) 0%, transparent 60%),
        radial-gradient(ellipse 80% 80% at 95% 105%, rgba(0, 82, 255, 0.35) 0%, transparent 65%),
        #0A0F1C;
}

.project-card--wide .project-poster {
    background:
        radial-gradient(ellipse 50% 90% at 70% 50%, rgba(0, 82, 255, 0.3) 0%, transparent 65%),
        radial-gradient(ellipse 40% 70% at 100% 0%, rgba(0, 196, 255, 0.16) 0%, transparent 60%),
        #0A0F1C;
}

.project-poster-name {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4.2vw, 3.6rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.04em;
    color: rgba(248, 250, 252, 0.92);
}

.project-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    border-top: 1px solid var(--border-color);
}

.project-name {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--text-main);
}

.project-type {
    margin-top: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.project-toggle {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: transparent;
    color: var(--text-main);
    cursor: pointer;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.project-toggle:hover {
    border-color: var(--primary);
    background-color: var(--primary);
}

.project-toggle:focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: 3px;
}

/* ---- Back --------------------------------------------------------------- */
.project-back {
    position: relative;
    justify-content: center;
    padding: 40px;
    background:
        radial-gradient(ellipse 80% 60% at 100% 100%, rgba(0, 82, 255, 0.14) 0%, transparent 70%),
        var(--bg-secondary);
}

.project-back .project-type {
    margin: 0 0 14px;
    color: var(--secondary);
}

.project-back-title {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 2.2vw, 1.85rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--text-main);
    margin-bottom: 14px;
    max-width: 22ch;
}

.project-desc {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-muted);
    max-width: 46ch;
    margin-bottom: 22px;
}

.project-list {
    list-style: none;
    display: grid;
    gap: 10px;
}

.project-list li {
    position: relative;
    padding-left: 22px;
    font-size: 0.95rem;
    color: var(--text-main);
}

.project-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 10px;
    height: 1px;
    background: var(--secondary);
}

.project-toggle--back {
    position: absolute;
    right: 24px;
    bottom: 22px;
}

/* The wide card's back splits into two columns: text and deliverables. */
.project-card--wide .project-back {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: 64px;
    align-content: center;
}

.project-card--wide .project-back > .project-type,
.project-card--wide .project-back-title,
.project-card--wide .project-desc {
    grid-column: 1;
}

.project-card--wide .project-list {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
}

@media (prefers-reduced-motion: reduce) {
    /* Swap faces with a fade instead of a 3D turn. */
    .project-inner,
    .project-card.is-flipped .project-inner,
    .project-card:not(.hover-off):hover .project-inner {
        transform: none;
        transition: none;
    }

    .project-back {
        transform: none;
        opacity: 0;
        transition: opacity 0.25s ease;
    }

    .project-card.is-flipped .project-back {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) and (hover: hover) {
    .project-card:not(.hover-off):hover .project-back {
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .products-section {
        padding: 80px 0;
    }

    .projects-title {
        margin-bottom: 40px;
    }

    .projects-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .project-media {
        min-height: 220px;
    }

    .project-poster {
        padding: 24px;
    }

    .project-back {
        padding: 28px 24px 72px;
    }

    .project-card--wide .project-back {
        display: flex;
    }
}

/* ==========================================================================
   PROCESS SECTION (TIMELINE)
   ========================================================================== */
.process-section {
    padding: 40px 0;
    background-color: var(--bg-secondary);
    transition: background-color var(--transition-normal);
}

.process-path-wrap {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    min-height: 330px;
}

.process-path-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 130px;
    overflow: visible;
}

.process-path-svg path {
    fill: none;
    stroke: var(--primary);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    transition: stroke-dashoffset 1.8s cubic-bezier(0.65, 0, 0.35, 1);
}

.process-path-wrap.active .process-path-svg path {
    stroke-dashoffset: 0;
}

.process-step {
    position: absolute;
    transform: translate(-50%, 0);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 230px;
    z-index: 2;
}

.process-node {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(165deg, rgba(20, 26, 45, 0.95) 0%, rgba(7, 10, 19, 0.98) 100%);
    border: 1px solid rgba(0, 82, 255, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    box-shadow: 0 0 22px -4px rgba(0, 82, 255, 0.55);
    margin-bottom: 12px;
}

.process-step-body {
    position: relative;
    padding-top: 4px;
}

.process-step-ghost {
    position: absolute;
    top: -28px;
    right: -6px;
    font-family: var(--font-heading);
    font-size: 2.6rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.05);
    line-height: 1;
    z-index: -1;
}

.process-step-body h3 {
    font-size: 1.05rem;
    margin-bottom: 4px;
}

.process-step-body p {
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.5;
}

@media (max-width: 991px) {
    .process-path-wrap {
        display: flex;
        flex-direction: column;
        gap: 40px;
        min-height: 0;
    }

    .process-path-svg {
        display: none;
    }

    .process-step {
        position: static;
        transform: none;
        width: 100%;
    }
}

/* ==========================================================================
   METHOD METRICS (Pillars chips + animated count-up stats)
   ========================================================================== */
.method-metrics {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 56px;
    margin-bottom: 80px;
}


/* ==========================================================================
   MANIFESTO SECTION: full-screen kinetic statement ("Intelligent Solutions
   Powered by AI") before the contact form. Oversized centred Outfit type,
   one italic serif accent word, inline photo capsules and two small brand
   glyphs. Lines stagger in when the title gets .active (scroll reveal).
   ========================================================================== */
.manifesto-section {
    position: relative;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    padding: 96px 0;
    overflow: hidden;
    background:
        radial-gradient(ellipse 60% 45% at 50% 55%, rgba(0, 82, 255, 0.12) 0%, transparent 70%),
        var(--bg-main);
}

.manifesto-section > .container {
    position: relative;
    z-index: 1;
}

/* Light that trails the cursor behind the type (moved by app.js with a
   little inertia). Hidden until the pointer enters the section. */
.manifesto-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 720px;
    height: 720px;
    margin: -360px 0 0 -360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 196, 255, 0.26) 0%, rgba(0, 82, 255, 0.16) 35%, transparent 68%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease;
    will-change: transform;
}

.manifesto-section.is-lit .manifesto-glow {
    opacity: 1;
}

.manifesto-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.02em;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: clamp(3.2rem, 9.5vw, 8.5rem);
    line-height: 1.05;
    letter-spacing: -0.045em;
    color: var(--text-main);
    text-align: center;
}

/* The title itself stays put; its lines do the reveal. */
.manifesto-title.reveal-on-scroll,
.manifesto-title.reveal-on-scroll.active {
    opacity: 1;
    transform: none;
}

.manifesto-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.22em;
    white-space: nowrap;
}

.manifesto-accent {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--secondary);
    /* Italic descender clearance (the "l" tail and the line below). */
    padding: 0 0.04em 0.06em;
}

.manifesto-ai {
    color: var(--primary);
}

/* Photo capsules sitting inline with the type. */
.manifesto-pill {
    width: 1.55em;
    height: 0.66em;
    object-fit: cover;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 18px 40px -16px rgba(0, 82, 255, 0.45);
    flex-shrink: 0;
}

.manifesto-spark {
    width: 0.5em;
    height: 0.5em;
    color: var(--secondary);
    flex-shrink: 0;
}

.manifesto-bolt {
    width: 0.32em;
    height: 0.32em;
    color: var(--secondary);
    align-self: flex-start;
    margin-top: 0.3em;
    flex-shrink: 0;
}

/* ---- Reveal ------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    .manifesto-line {
        opacity: 0;
        transform: translateY(0.35em);
        transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .manifesto-line:nth-child(2) { transition-delay: 0.1s; }
    .manifesto-line:nth-child(3) { transition-delay: 0.2s; }
    .manifesto-line:nth-child(4) { transition-delay: 0.3s; }

    .manifesto-title.active .manifesto-line {
        opacity: 1;
        transform: none;
    }

    .manifesto-pill {
        transform: scale(0.6) rotate(-4deg);
        opacity: 0;
        transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1) 0.35s, opacity 0.6s ease 0.35s;
    }

    .manifesto-title.active .manifesto-pill {
        transform: none;
        opacity: 1;
    }

    /* ---- Float ----------------------------------------------------------
       Once revealed, every line drifts up and down a few pixels on its own
       rhythm, so the statement feels suspended rather than printed. Uses the
       standalone translate / rotate properties so it composes with the
       reveal's transform instead of overriding it. */
    .manifesto-title.active .manifesto-line {
        animation: manifesto-float 6s ease-in-out 1.2s infinite;
    }

    .manifesto-title.active .manifesto-line:nth-child(2) { animation-duration: 7s; animation-delay: 0.4s; }
    .manifesto-title.active .manifesto-line:nth-child(3) { animation-duration: 6.5s; animation-delay: 1.6s; }
    .manifesto-title.active .manifesto-line:nth-child(4) { animation-duration: 7.5s; animation-delay: 0.9s; }

    /* Capsules and glyphs sway a little on top of their line's drift. */
    .manifesto-title.active .manifesto-pill {
        animation: manifesto-sway 5.5s ease-in-out 1.4s infinite;
    }

    .manifesto-title.active .manifesto-line:nth-child(3) .manifesto-pill {
        animation-duration: 6.2s;
        animation-direction: reverse;
    }

    .manifesto-title.active .manifesto-spark {
        animation: manifesto-twinkle 4s ease-in-out infinite;
    }

    .manifesto-title.active .manifesto-bolt {
        animation: manifesto-sway 3.8s ease-in-out infinite;
    }
}

@keyframes manifesto-float {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -0.07em; }
}

@keyframes manifesto-sway {
    0%, 100% { translate: 0 0; rotate: 0deg; }
    50% { translate: 0 -0.05em; rotate: -3deg; }
}

@keyframes manifesto-twinkle {
    0%, 100% { scale: 1; rotate: 0deg; }
    50% { scale: 0.85; rotate: 45deg; }
}

@media (max-width: 768px) {
    .manifesto-section {
        min-height: 80dvh;
        padding: 96px 0;
    }

    .manifesto-title {
        font-size: clamp(2.2rem, 10.5vw, 4rem);
    }
}

/* ==========================================================================
   CONTACT SECTION & FORM: minimal two-column layout. Left: headline,
   subtitle and plain contact lines (label over value, no icons). Right:
   line inputs (bottom border only) that light up in brand blue on focus.
   ========================================================================== */
.contact-section {
    padding: 120px 0;
    border-top: 1px solid var(--border-color);
}

.contact-container {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 96px;
    align-items: start;
}

.contact-headline {
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--text-main);
    max-width: 12ch;
    margin-bottom: 20px;
}

.contact-subtitle {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text-muted);
    max-width: 40ch;
}

.contact-details {
    margin-top: 56px;
    display: grid;
    gap: 24px;
}

.detail-item dt {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.detail-item dd {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--text-main);
}

.detail-item a {
    transition: color var(--transition-fast);
}

.detail-item a:hover {
    color: var(--secondary);
}

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

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

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

.form-group label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 8px 0 12px;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0;
    background: transparent;
    color: var(--text-main);
    font-family: var(--font-body);
    font-size: 1.05rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-group textarea {
    resize: vertical;
    min-height: 88px;
    line-height: 1.6;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #7C8799; /* ~4.9:1 on the page bg (AA), clearly dimmer than typed text */
}

.form-group input:hover,
.form-group textarea:hover {
    border-bottom-color: rgba(255, 255, 255, 0.28);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-bottom-color: var(--primary);
    box-shadow: 0 1px 0 0 var(--primary);
}

.form-group input[aria-invalid="true"],
.form-group textarea[aria-invalid="true"] {
    border-bottom-color: #F87171;
}

.form-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 8px;
}

.btn-submit {
    gap: 10px;
    padding: 14px 28px;
}

.btn-submit .cta-arrow {
    transition: transform var(--transition-fast);
}

.btn-submit:hover .cta-arrow {
    transform: translateX(3px);
}

.btn-submit:active {
    transform: scale(0.98);
}

.form-status {
    font-size: 0.9rem;
    display: none;
}

.form-status.success {
    display: block;
    color: #34D399;
}

.form-status.error {
    display: block;
    color: #F87171;
}

@media (max-width: 1024px) {
    .contact-container {
        gap: 64px;
    }
}

@media (max-width: 768px) {
    .contact-section {
        padding: 80px 0;
    }

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

    .contact-details {
        margin-top: 36px;
    }

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

    .btn-submit {
        width: 100%;
    }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    padding: 80px 0 40px;
    transition: background-color var(--transition-normal);
}

.footer-container {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 60px;
    margin-bottom: 60px;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.brand-tagline {
    font-size: 0.95rem;
    color: var(--text-muted);
    max-width: 320px;
}

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

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

.link-column h4 {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-main);
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.link-column a {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.link-column a:hover {
    color: var(--primary);
}

.footer-bottom {
    border-top: 1px solid var(--border-color);
    padding-top: 40px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* ==========================================================================
   ANIMATIONS & SCROLL REVEAL UTILITIES
   ========================================================================== */
@keyframes progress {
    from {
        stroke-dasharray: 0, 100;
    }
}

/* Scroll reveal states */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.reveal-on-scroll.active {
    opacity: 1;
    transform: translateY(0);
}

/* Word-by-word stagger fade-in animation */
.hero-title .word {
    display: inline-block;
    opacity: 0;
    transform: translateY(12px) scale(0.96);
    filter: blur(4px);
    transition: opacity 0.7s cubic-bezier(0.15, 0.85, 0.35, 1),
        transform 0.7s cubic-bezier(0.15, 0.85, 0.35, 1),
        filter 0.7s cubic-bezier(0.15, 0.85, 0.35, 1);
}

.hero-title .word.revealed {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

/* ==========================================================================
   RESPONSIVE DESIGN (MEDIA QUERIES)
   ========================================================================== */
@media (max-width: 1024px) {
    .hero-title {
        font-size: 3.4rem;
    }

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

    .services-section .bento-grid {
        grid-template-columns: 1fr;
    }

    .bento-large {
        grid-column: span 2;
    }

    .bento-wide {
        grid-column: span 2;
        padding: 40px;
    }

    /* Removed unused about-grid queries */
}

@media (max-width: 991px) {
    :root {
        --header-height: 70px;
    }

    .header {
        width: calc(100% - 32px);
        max-width: 700px;
        height: var(--header-height);
        transform: translateX(-50%) translateY(0);
    }

    .header-container {
        width: 100%;
        justify-content: space-between;
        padding: 0 16px;
    }

    .logo-img {
        height: 55px;
    }

    .logo-img-footer {
        height: 40px;
    }

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

    .nav-menu {
        position: fixed;
        top: var(--header-height);
        left: 0;
        width: 100%;
        height: calc(100vh - var(--header-height));
        background: linear-gradient(180deg, rgba(8, 18, 48, 0.98) 0%, rgba(5, 10, 24, 0.99) 100%);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        flex-direction: column;
        justify-content: flex-start;
        padding: 40px 24px;
        gap: 30px;
        transform: translateX(100%);
        visibility: hidden;
        transition: transform var(--transition-normal), visibility var(--transition-normal);
        border: none;
        border-top: 1px solid var(--border-color);
        border-radius: 0;
        z-index: 999;
    }

    body.dark-mode .nav-menu {
        background: linear-gradient(180deg, rgba(8, 18, 48, 0.98) 0%, rgba(5, 10, 24, 0.99) 100%);
        border: none;
        border-top: 1px solid var(--border-color);
        border-radius: 0;
    }

    .nav-menu.open {
        transform: translateX(0);
        visibility: visible;
    }

    .nav-hover-bg {
        display: none;
    }

    .nav-cta {
        display: none;
        /* Hide outline CTA on mobile header */
    }

    .hero-sticky-stage {
        padding-top: calc(var(--header-height) + 60px);
        padding-bottom: 60px;
    }

    .hero-title {
        font-size: 2.4rem;
    }

    .hero-subtitle {
        font-size: 1.05rem;
    }

    .code-line {
        font-size: 0.68rem;
        gap: 10px;
    }

    .ide-tab {
        font-size: 0.66rem;
        padding: 6px 10px 8px;
    }

    .term-line {
        font-size: 0.68rem;
    }

    .flow-yaml .code-line {
        font-size: 0.64rem;
    }

    .mockup-sidebar {
        width: 40px;
        gap: 6px;
        padding: 12px 0;
    }

    .sidebar-icon {
        width: 24px;
        height: 24px;
        font-size: 0.7rem;
    }

    .flow-canvas {
        height: 160px;
    }

    .flow-node {
        padding: 6px 10px;
        font-size: 0.7rem;
    }

    .flow-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

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

    .bento-large {
        grid-column: span 1;
        grid-row: span 1;
    }

    .bento-wide {
        grid-column: span 1;
    }


    .process-path-wrap {
        min-height: 0;
    }

    .footer-container {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .footer-links {
        flex-direction: column;
        gap: 30px;
    }
}