/* ============================================
   ZART TECH — PREMIUM SOFTWARE HOUSE
   Variáveis, Reset e Base
   ============================================ */
:root {
    --bg: #050505;
    --bg-secondary: #0a0a0a;
    --bg-tertiary: #0f0f0f;
    --bg-card: rgba(255, 255, 255, 0.02);
    --line: rgba(255, 255, 255, 0.06);
    --line-light: rgba(255, 255, 255, 0.1);
    --gold: #c8a84e;
    --gold-light: #e8d080;
    --gold-dark: #a08838;
    --text: #f8f8f6;
    --text-muted: #9a9a9a;
    --text-dim: #666;
    --accent-blue: #00c8ff;
    --accent-blue-dim: rgba(0, 200, 255, 0.15);
    --accent-purple: #8b5cf6;
    --accent-purple-dim: rgba(139, 92, 246, 0.15);
    --radius: 16px;
    --radius-lg: 24px;
    --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

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

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--text);
    overflow-x: hidden;
    line-height: 1.6;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -2;
    background: radial-gradient(ellipse at 50% 0%, rgba(200, 168, 78, 0.03) 0%, transparent 60%);
}

.container {
    width: min(1280px, calc(100% - 80px));
    margin: 0 auto;
}

/* ============================================
   BOOT OVERLAY
   ============================================ */
.boot-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

.boot-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.boot-content {
    text-align: center;
}

.boot-logo {
    margin-bottom: 24px;
    animation: bootPulse 1.5s ease-in-out infinite;
}

.boot-logo img {
    width: 200px;
    height: auto;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 0 18px rgba(200, 168, 78, .45));
}

@keyframes bootPulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

.boot-text {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: var(--gold);
    line-height: 2;
    margin-bottom: 24px;
    text-align: left;
    min-width: 260px;
}

.boot-progress {
    width: 200px;
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
    margin: 0 auto;
}

.boot-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
    border-radius: 2px;
    width: 0%;
    animation: bootProgress 1.8s ease-in-out forwards;
}

@keyframes bootProgress {
    0% { width: 0%; }
    30% { width: 40%; }
    60% { width: 75%; }
    100% { width: 100%; }
}

/* ============================================
   NAVBAR
   ============================================ */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: rgba(5, 5, 5, 0.6);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 1px solid var(--line);
    transition: var(--transition);
}

.navbar.scrolled {
    background: rgba(5, 5, 5, 0.85);
    box-shadow: 0 1px 0 var(--line);
}

.nav-inner {
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand {
    display: flex;
    gap: 12px;
    align-items: center;
    text-decoration: none;
    color: #fff;
    transition: var(--transition);
}

.brand:hover {
    opacity: 0.8;
}

.brand-logo {
    height: 32px;
    width: auto;
    object-fit: contain;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
}

.nav-links a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: var(--transition);
    position: relative;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1.5px;
    background: var(--gold);
    transition: width 0.3s ease;
}

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

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

.nav-links a.active {
    color: var(--text);
}

.nav-cta {
    padding: 8px 18px;
    border: 1px solid var(--line-light);
    border-radius: 50px;
    color: var(--text);
    background: rgba(255, 255, 255, 0.03);
    transition: var(--transition);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.nav-cta:hover {
    background: rgba(200, 168, 78, 0.1);
    border-color: var(--gold);
    transform: translateY(-1px);
}

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

.menu-toggle span {
    width: 20px;
    height: 1.5px;
    background: var(--text);
    border-radius: 2px;
    transition: var(--transition);
}

/* ============================================
   CANVAS ECOSYSTEM
   ============================================ */
#ecosystemCanvas {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero {
    min-height: 100vh;
    display: grid;
    align-items: center;
    padding: 100px 0 80px;
    position: relative;
    overflow: hidden;
}

.hero-background {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.gradient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.25;
}

.orb-1 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(200, 168, 78, 0.25), transparent 70%);
    top: -10%;
    right: 5%;
}

.orb-2 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(0, 200, 255, 0.15), transparent 70%);
    bottom: 10%;
    left: 0;
}

.orb-3 {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.12), transparent 70%);
    top: 40%;
    left: 40%;
}

.circuit-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(200, 168, 78, 0.08);
    border: 1px solid rgba(200, 168, 78, 0.2);
    border-radius: 50px;
    color: var(--gold-light);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 28px;
    opacity: 0;
    animation: heroFadeIn 0.6s ease-out 1.2s forwards;
}

.label-dot {
    width: 6px;
    height: 6px;
    background: var(--gold);
    border-radius: 50%;
    animation: labelPulse 2s ease-in-out infinite;
}

@keyframes labelPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.hero-title {
    font-size: clamp(44px, 6vw, 68px);
    line-height: 1.08;
    letter-spacing: -0.03em;
    font-weight: 800;
    margin-bottom: 24px;
}

.title-line {
    display: block;
    overflow: hidden;
}

#titleLine1 {
    opacity: 0;
    animation: heroFadeIn 0.8s ease-out 1.4s forwards;
}

#titleLine2 {
    opacity: 0;
    animation: heroFadeIn 0.8s ease-out 1.6s forwards;
}

.gradient-text {
    background: linear-gradient(135deg, var(--gold-light), var(--accent-blue), var(--accent-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% 200%;
    animation: gradientShift 6s ease infinite;
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.hero-description {
    font-size: 17px;
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 36px;
    max-width: 520px;
    opacity: 0;
    animation: heroFadeIn 0.8s ease-out 1.8s forwards;
}

.hero-cta {
    display: flex;
    gap: 14px;
    opacity: 0;
    animation: heroFadeIn 0.8s ease-out 2s forwards;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 26px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.02em;
    transition: var(--transition);
    cursor: pointer;
    border: none;
    position: relative;
    overflow: hidden;
}

.btn-primary {
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    color: #0a0a0a;
    box-shadow: 0 4px 24px rgba(200, 168, 78, 0.25);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(200, 168, 78, 0.35);
}

.btn-secondary {
    border: 1px solid var(--line-light);
    color: var(--text);
    background: rgba(255, 255, 255, 0.03);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--gold);
}

.btn-large {
    padding: 16px 32px;
    font-size: 15px;
}

@keyframes heroFadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Typing cursor */
.typing-cursor {
    display: inline-block;
    font-weight: 300;
    color: var(--gold);
    animation: cursorBlink 0.8s step-end infinite;
    margin-left: 2px;
}

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

/* ============================================
   HERO VISUAL - FLOATING CARDS
   ============================================ */
.hero-visual {
    position: relative;
    height: 480px;
    perspective: 1000px;
    opacity: 0;
    animation: heroFadeIn 1s ease-out 1.6s forwards;
}

.floating-card {
    position: absolute;
    padding: 20px 24px;
    background: rgba(10, 10, 10, 0.8);
    border: 1px solid var(--line-light);
    border-radius: 16px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    cursor: pointer;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    transform-style: preserve-3d;
    will-change: transform;
}

.floating-card:hover {
    border-color: rgba(200, 168, 78, 0.4);
    box-shadow: 0 8px 40px rgba(200, 168, 78, 0.1);
}

.card-glow {
    position: absolute;
    inset: -1px;
    border-radius: 16px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(200, 168, 78, 0.1), transparent, rgba(0, 200, 255, 0.05));
}

.floating-card:hover .card-glow {
    opacity: 1;
}

.card-icon-svg {
    width: 40px;
    height: 40px;
}

.card-icon-svg svg {
    width: 100%;
    height: 100%;
}

.card-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.card-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: 0.02em;
}

.card-status {
    display: flex;
    align-items: center;
    gap: 6px;
}

.status-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--text-dim);
}

.status-dot.active {
    background: #22c55e;
    animation: statusPulse 2s ease-in-out infinite;
}

@keyframes statusPulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
    50% { opacity: 0.7; box-shadow: 0 0 0 4px rgba(34, 197, 94, 0); }
}

.status-text {
    font-size: 10px;
    color: var(--text-dim);
    font-family: 'JetBrains Mono', monospace;
}

/* Card positions */
.card-ai {
    top: 5%;
    left: 0;
}

.card-api {
    top: 15%;
    right: 0;
}

.card-dashboard {
    bottom: 20%;
    left: 15%;
}

.card-cloud {
    bottom: 5%;
    right: 5%;
}

/* Card-specific animations */
.card-pulse-ring {
    position: absolute;
    inset: -4px;
    border-radius: 16px;
    border: 1px solid var(--accent-blue);
    opacity: 0;
    animation: pulseRing 3s ease-in-out infinite;
}

@keyframes pulseRing {
    0% { opacity: 0; transform: scale(1); }
    10% { opacity: 0.3; }
    50% { opacity: 0; transform: scale(1.05); }
    100% { opacity: 0; }
}

.pulse-circle {
    animation: circleBreath 4s ease-in-out infinite;
}

@keyframes circleBreath {
    0%, 100% { r: 8; opacity: 0.6; }
    50% { r: 10; opacity: 1; }
}

.pulse-core {
    animation: corePulse 2s ease-in-out infinite;
}

@keyframes corePulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

.data-lines {
    position: absolute;
    top: 50%;
    right: -30px;
    display: flex;
    gap: 4px;
    transform: translateY(-50%);
}

.data-line {
    width: 20px;
    height: 2px;
    background: var(--gold);
    border-radius: 1px;
    opacity: 0;
    animation: dataFlow 2s ease-in-out infinite;
}

@keyframes dataFlow {
    0% { opacity: 0; transform: translateX(-10px); }
    30% { opacity: 0.6; }
    70% { opacity: 0.6; }
    100% { opacity: 0; transform: translateX(10px); }
}

.sync-indicator {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    gap: 4px;
}

.sync-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--gold);
    animation: syncBlink 1.5s ease-in-out infinite;
}

@keyframes syncBlink {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

.card-micro-chart {
    height: 20px;
    width: 80px;
}

/* Connection lines */
.connection-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

.conn-line {
    stroke-dasharray: 4 4;
    animation: lineFlow 3s linear infinite;
}

@keyframes lineFlow {
    to { stroke-dashoffset: -16; }
}

/* Hero Scroll Indicator */
.hero-scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--text-dim);
    font-size: 11px;
    letter-spacing: 0.1em;
    opacity: 0;
    animation: heroFadeIn 0.6s ease-out 2.5s forwards;
}

.scroll-dot {
    width: 4px;
    height: 4px;
    background: var(--gold);
    border-radius: 50%;
    animation: scrollDot 2s ease-in-out infinite;
}

@keyframes scrollDot {
    0%, 100% { opacity: 0.4; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(6px); }
}

/* ============================================
   SECTIONS COMMON
   ============================================ */
section {
    padding: 120px 0;
    position: relative;
}

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

.section-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 16px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.section-header h2 {
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin-bottom: 16px;
}

.section-header p {
    font-size: 17px;
    color: var(--text-muted);
    max-width: 500px;
    line-height: 1.7;
}

/* ============================================
   ABOUT SECTION
   ============================================ */
.about {
    background: linear-gradient(180deg, var(--bg) 0%, var(--bg-secondary) 100%);
}

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

.about-card {
    padding: 36px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: var(--transition);
    opacity: 0;
    transform: translateY(20px);
}

.about-card.visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.about-card:hover {
    border-color: var(--line-light);
    background: rgba(255, 255, 255, 0.04);
}

.card-number {
    font-family: 'JetBrains Mono', monospace;
    font-size: 28px;
    font-weight: 600;
    background: linear-gradient(135deg, var(--gold-light), var(--accent-blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 16px;
}

.about-card h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
}

.about-card p {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.7;
}

/* ============================================
   SERVICES SECTION - VISUAL DEMOS
   ============================================ */
.services {
    background: var(--bg);
}

.services-visual {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 48px;
}

.demo-block {
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px;
    overflow: hidden;
    transition: var(--transition);
}

.demo-block:hover {
    border-color: var(--line-light);
}

.demo-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 20px;
}

/* Demo: API Flow */
.demo-flow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.demo-node {
    padding: 8px 14px;
    background: rgba(200, 168, 78, 0.08);
    border: 1px solid rgba(200, 168, 78, 0.2);
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--gold-light);
    font-family: 'JetBrains Mono', monospace;
}

.demo-connection {
    flex: 1;
    height: 2px;
    background: rgba(200, 168, 78, 0.1);
    position: relative;
    border-radius: 2px;
}

.data-packet {
    position: absolute;
    top: -2px;
    left: 0;
    width: 6px;
    height: 6px;
    background: var(--gold);
    border-radius: 50%;
    animation: packetMove 2s ease-in-out infinite;
}

@keyframes packetMove {
    0% { left: 0; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { left: calc(100% - 6px); opacity: 0; }
}

/* Demo: AI Brain */
.demo-brain {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    position: relative;
}

.brain-node {
    position: absolute;
}

.brain-node.center {
    width: 40px;
    height: 40px;
    animation: brainPulse 3s ease-in-out infinite;
}

@keyframes brainPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.brain-node.satellite {
    width: 8px;
    height: 8px;
    background: var(--accent-blue);
    border-radius: 50%;
    transform: rotate(var(--angle)) translateX(50px) rotate(calc(-1 * var(--angle)));
    animation: satellitePulse 2.5s ease-in-out infinite;
    animation-delay: calc(var(--angle) * 0.01s);
}

@keyframes satellitePulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* Demo: Chart */
.demo-chart {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 100px;
    padding: 0 10px;
}

.chart-bar {
    flex: 1;
    background: linear-gradient(180deg, var(--accent-purple), rgba(139, 92, 246, 0.3));
    border-radius: 4px 4px 0 0;
    height: var(--height);
    animation: barGrow 3s ease-in-out infinite;
}

@keyframes barGrow {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(0.8); }
}

/* Demo: Automation */
.demo-automation {
    display: flex;
    align-items: center;
    gap: 0;
    height: 60px;
}

.auto-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    padding: 8px;
    border-radius: 8px;
    transition: var(--transition);
}

.auto-step.active {
    color: var(--gold-light);
    background: rgba(200, 168, 78, 0.08);
}

.auto-line {
    width: 40px;
    height: 2px;
    background: var(--line);
    position: relative;
    border-radius: 2px;
}

.auto-flow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--gold);
    border-radius: 2px;
    animation: autoFlow 2s ease-in-out infinite;
    transform-origin: left;
}

@keyframes autoFlow {
    0% { transform: scaleX(0); opacity: 0; }
    30% { opacity: 1; }
    70% { opacity: 1; }
    100% { transform: scaleX(1); opacity: 0; }
}

/* Services List */
.services-list {
    border-top: 1px solid var(--line);
}

.service-item {
    display: grid;
    grid-template-columns: 1fr 2fr auto;
    align-items: center;
    gap: 24px;
    padding: 24px 0;
    border-bottom: 1px solid var(--line);
    transition: var(--transition);
    cursor: default;
}

.service-item:hover {
    padding-left: 8px;
}

.service-item:hover .service-arrow {
    transform: translateX(4px);
    color: var(--gold);
}

.service-name {
    font-size: 16px;
    font-weight: 600;
}

.service-desc {
    font-size: 14px;
    color: var(--text-muted);
}

.service-arrow {
    font-size: 18px;
    color: var(--text-dim);
    transition: var(--transition);
}

/* ============================================
   CASES SECTION
   ============================================ */
.cases {
    background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg) 100%);
}

.case-card {
    content-visibility: auto;
    contain-intrinsic-size: auto 900px;
}

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

.case-card {
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 32px;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    gap: 16px;
    opacity: 0;
    transform: translateY(20px);
    cursor: default;
}

.case-card.visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.case-card:hover {
    border-color: rgba(200, 168, 78, 0.3);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.case-featured {
    grid-column: span 2;
}

.case-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.case-tag {
    padding: 4px 10px;
    background: rgba(200, 168, 78, 0.1);
    border: 1px solid rgba(200, 168, 78, 0.25);
    border-radius: 50px;
    color: var(--gold-light);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.case-metrics {
    display: flex;
    gap: 20px;
}

.metric {
    text-align: center;
}

.metric-value {
    display: block;
    font-size: 16px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text);
}

.metric-label {
    display: block;
    font-size: 9px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.case-body h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
}

.case-body p {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 16px;
}

.case-tech-stack {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.case-tech-stack span {
    padding: 3px 8px;
    background: rgba(0, 200, 255, 0.08);
    border: 1px solid rgba(0, 200, 255, 0.2);
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    color: var(--accent-blue);
    font-family: 'JetBrains Mono', monospace;
}

.case-visual {
    margin-top: 8px;
}

.case-mini-chart svg {
    width: 100%;
    height: 60px;
}

.case-mini-visual svg {
    width: 100%;
    height: 60px;
    opacity: 0.6;
    transition: opacity var(--transition);
}

.case-card:hover .case-mini-visual svg {
    opacity: 1;
}

/* ============================================
   PROCESS SECTION
   ============================================ */
.process {
    background:
        radial-gradient(circle at 50% 45%, rgba(218, 165, 32, 0.055), transparent 34%),
        var(--bg);
    overflow: hidden;
    content-visibility: auto;
    contain-intrinsic-size: auto 1600px;
}

.pipeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 0 20px 34px;
    isolation: isolate;
}

.pipeline-line {
    position: absolute;
    z-index: 0;
    top: 8px;
    bottom: 8px;
    left: 0;
    width: 2px;
    overflow: visible;
    background: linear-gradient(180deg,
        rgba(218, 165, 32, .5),
        rgba(61, 212, 255, .45) 55%,
        rgba(139, 92, 246, .48));
    box-shadow: 0 0 12px rgba(218, 165, 32, .22);
}

.pipeline-pulse {
    position: absolute;
    left: 50%;
    top: 0;
    width: 3px;
    height: 78px;
    transform: translate(-50%, -100%);
    border-radius: 999px;
    background: linear-gradient(180deg, transparent, rgba(255, 220, 115, .4), #fff2b0, transparent);
    filter: drop-shadow(0 0 7px rgba(255, 209, 72, .95));
    animation: pipelineEnergyTravel 8.5s cubic-bezier(.45, .02, .55, .98) infinite;
}

.pipeline-pulse::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 14px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    transform: translateX(-50%);
    background: #fff7cf;
    box-shadow: 0 0 7px #fff, 0 0 18px var(--gold), 0 0 30px rgba(255, 204, 52, .65);
}

.pipeline-pulse.pulse-two {
    animation-delay: -4.2s;
    opacity: .7;
}

.pipeline-step {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px 20px;
    border: 1px solid var(--line);
    border-left: 2px solid var(--step-accent, var(--gold));
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255,255,255,.022), rgba(255,255,255,.005));
    opacity: 0;
    transform: translateX(16px);
    transition:
        opacity .65s cubic-bezier(.22, 1, .36, 1),
        transform .65s cubic-bezier(.22, 1, .36, 1),
        border-color .3s ease,
        box-shadow .3s ease;
    transition-delay: var(--step-delay, 0s);
}

.pipeline-step.visible {
    opacity: 1;
    transform: translateX(0);
}

.pipeline-step:hover {
    border-color: rgba(255, 255, 255, .16);
    box-shadow: 0 14px 34px rgba(0,0,0,.28), 0 0 20px color-mix(in srgb, var(--step-accent, var(--gold)) 16%, transparent);
}

.pipeline-node {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid color-mix(in srgb, var(--step-accent, var(--gold)) 55%, transparent);
    border-radius: 11px;
    background: rgba(7, 7, 7, .92);
    box-shadow: 0 0 14px color-mix(in srgb, var(--step-accent, var(--gold)) 18%, transparent);
}

.pipeline-node span {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    color: var(--step-accent, var(--gold));
}

.pipeline-copy {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.pipeline-copy h3 {
    margin: 0;
    color: var(--text);
    font-size: 15.5px;
    font-weight: 700;
    white-space: nowrap;
}

.pipeline-copy p {
    margin: 0;
    color: #a7a7a7;
    font-size: 12.5px;
    line-height: 1.5;
}

.pipeline-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    padding: 6px 10px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 999px;
    background: rgba(255,255,255,.018);
    color: #8e8e8e;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: .035em;
    white-space: nowrap;
}

.pipeline-status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--step-accent, var(--gold));
    box-shadow: 0 0 8px color-mix(in srgb, var(--step-accent, var(--gold)) 80%, transparent);
    animation: processStatusBlink 2.2s ease-in-out infinite;
    animation-delay: var(--step-delay, 0s);
}

.pipeline-phase {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0 4px -34px;
    padding-left: 34px;
    opacity: 0;
    transition: opacity .65s ease;
    transition-delay: var(--step-delay, 0s);
}

.pipeline-phase.visible { opacity: 1; }

.pipeline-phase span {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-dim);
    white-space: nowrap;
}

.pipeline-phase::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--line-light), transparent);
}

@keyframes pipelineEnergyTravel {
    0% { top: 0; opacity: 0; }
    6% { opacity: 1; }
    94% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

@keyframes processStatusBlink {
    0%, 100% { opacity: .42; }
    50% { opacity: 1; }
}

@media (max-width: 720px) {
    .pipeline {
        padding-left: 0;
    }
    .pipeline-line, .pipeline-node { display: none; }
    .pipeline-step {
        border-left: 2px solid var(--step-accent, var(--gold));
        flex-wrap: wrap;
    }
    .pipeline-phase {
        margin-left: 0;
        padding-left: 0;
    }
    .pipeline-copy {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pipeline-pulse,
    .pipeline-status i { animation: none !important; }
}

/* Ajustes finais para telas pequenas e WebView Android */
html { overflow-x: hidden; }
body { min-width: 0; overflow-x: hidden; overscroll-behavior-x: none; }
img, svg, video, canvas { max-width: 100%; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }

@supports (padding: env(safe-area-inset-top)) {
    .navbar { padding-top: env(safe-area-inset-top); }
    footer { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}

@media (max-width: 760px) {
    .container { width: min(100% - 28px, 680px); }
    .nav-inner { min-height: 64px; }
    .brand-logo { width: min(180px, 48vw); height: auto; }
    .hero { min-height: calc(100svh - 64px); min-height: calc(100dvh - 64px); padding-top: 74px; }
    .hero-content { max-width: 100%; }
    .hero-title { max-width: 100%; font-size: clamp(2.35rem, 11vw, 4rem); line-height: .98; overflow-wrap: anywhere; }
    .hero-description { font-size: 15px; line-height: 1.65; }
    .hero-cta { gap: 10px; }
    .section-header h2 { font-size: clamp(1.8rem, 8vw, 3rem); }
    .section-header p { font-size: 14px; }
    .about-grid, .services-grid, .cases-grid, .process-grid, .projects-grid { width: 100%; }
    .case-card, .project-card, .service-item, .process-step { min-width: 0; }
    .case-card p, .project-card p { overflow-wrap: anywhere; }
    .hero-visual, .case-showcase, .project-screen { max-width: 100%; overflow: hidden; }
    .mobile-menu { padding: calc(72px + env(safe-area-inset-top)) 24px 32px; }
    .mobile-menu a { min-height: 44px; display: inline-flex; align-items: center; }
}

@media (max-width: 420px) {
    .container { width: calc(100% - 24px); }
    section { padding: 64px 0; }
    .hero { padding-bottom: 42px; }
    .hero-cta .btn { min-height: 48px; }
    .stat-number { font-size: clamp(2rem, 12vw, 3.2rem); }
    .cta-box { padding: 34px 18px; }
    .footer-inner { gap: 24px; }
}

/* ============================================
   TECH STACK SECTION
   ============================================ */
.tech-stack {
    background: linear-gradient(180deg, var(--bg) 0%, var(--bg-secondary) 100%);
}

.stack-architecture {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 12px 0 12px 34px;
    isolation: isolate;
}

.stack-energy-line {
    position: absolute;
    z-index: 0;
    top: 8px;
    bottom: 8px;
    left: 0;
    width: 2px;
    overflow: visible;
    background: linear-gradient(180deg,
        rgba(0, 200, 255, .45),
        rgba(200, 168, 78, .5) 34%,
        rgba(139, 92, 246, .48) 66%,
        rgba(232, 208, 128, .45));
    box-shadow: 0 0 12px rgba(200, 168, 78, .22);
}

.stack-pulse {
    position: absolute;
    left: 50%;
    top: 0;
    width: 3px;
    height: 92px;
    transform: translate(-50%, -100%);
    border-radius: 999px;
    background: linear-gradient(180deg, transparent, rgba(255, 220, 115, .4), #fff2b0, transparent);
    filter: drop-shadow(0 0 7px rgba(255, 209, 72, .95));
    animation: stackEnergyTravel 6.2s cubic-bezier(.45, .02, .55, .98) infinite;
}

.stack-pulse::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 14px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    transform: translateX(-50%);
    background: #fff7cf;
    box-shadow: 0 0 7px #fff, 0 0 18px var(--gold), 0 0 30px rgba(255, 204, 52, .65);
}

.stack-pulse.pulse-two {
    animation-delay: -3.1s;
    opacity: .7;
}

.stack-layer {
    position: relative;
    z-index: 2;
    padding: 22px 24px;
    border: 1px solid var(--line);
    border-left: 2px solid var(--layer-accent, var(--gold));
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255,255,255,.025), rgba(255,255,255,.006));
    opacity: 0;
    transform: translateX(18px);
    transition:
        opacity .72s cubic-bezier(.22, 1, .36, 1),
        transform .72s cubic-bezier(.22, 1, .36, 1),
        border-color .35s ease,
        box-shadow .35s ease;
    transition-delay: var(--layer-delay, 0s);
}

.stack-layer.visible {
    opacity: 1;
    transform: translateX(0);
}

.stack-layer:hover {
    border-color: rgba(255, 255, 255, .16);
    box-shadow: 0 18px 44px rgba(0,0,0,.3), 0 0 24px color-mix(in srgb, var(--layer-accent, var(--gold)) 18%, transparent);
}

.stack-layer-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.stack-node {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid color-mix(in srgb, var(--layer-accent, var(--gold)) 55%, transparent);
    border-radius: 12px;
    background: rgba(7, 7, 7, .92);
    box-shadow: 0 0 16px color-mix(in srgb, var(--layer-accent, var(--gold)) 20%, transparent);
}

.stack-node span {
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px;
    font-weight: 700;
    color: var(--layer-accent, var(--gold));
}

.stack-layer-copy {
    flex: 1;
    min-width: 0;
}

.stack-layer-copy h3 {
    margin: 0 0 3px;
    color: var(--text);
    font-size: 17px;
    font-weight: 700;
}

.stack-layer-copy p {
    margin: 0;
    color: #a7a7a7;
    font-size: 12.5px;
    line-height: 1.5;
}

.stack-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    padding: 7px 10px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 999px;
    background: rgba(255,255,255,.018);
    color: #9a9a9a;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: .035em;
    white-space: nowrap;
}

.stack-status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--layer-accent, var(--gold));
    box-shadow: 0 0 8px color-mix(in srgb, var(--layer-accent, var(--gold)) 80%, transparent);
    animation: processStatusBlink 2.2s ease-in-out infinite;
    animation-delay: var(--layer-delay, 0s);
}

.stack-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-left: 64px;
}

.stack-icons .tech-item {
    flex: 0 0 auto;
}

@keyframes stackEnergyTravel {
    0% { top: 0; opacity: 0; }
    7% { opacity: 1; }
    92% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

@media (max-width: 700px) {
    .stack-architecture { padding-left: 0; gap: 14px; }
    .stack-energy-line, .stack-node { display: none; }
    .stack-layer { border-left: 2px solid var(--layer-accent, var(--gold)); }
    .stack-layer-head { flex-wrap: wrap; }
    .stack-icons { padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .stack-pulse { animation: none !important; opacity: 0; }
}

.tech-item {
    padding: 18px 16px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: var(--transition);
    cursor: default;
    opacity: 0;
    transform: translateY(10px);
}

.tech-item.visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.tech-item:hover {
    border-color: var(--gold);
    background: rgba(200, 168, 78, 0.05);
    transform: translateY(-2px);
}

.tech-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--gold-light);
    flex-shrink: 0;
    transition: color 0.3s ease, transform 0.3s ease;
}

.tech-icon svg {
    width: 100%;
    height: 100%;
}

.tech-item:hover .tech-icon {
    color: var(--gold);
    transform: scale(1.1);
}

.tech-name {
    font-size: 13px;
    font-weight: 600;
}

/* ============================================
   CTA SECTION
   ============================================ */
.cta {
    background: var(--bg-secondary);
}

.cta-box {
    padding: 80px 60px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    text-align: center;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px);
}

.cta-box.visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.cta-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(200, 168, 78, 0.05), transparent 70%);
    pointer-events: none;
}

.cta-box::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(200, 168, 78, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(200, 168, 78, .035) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: radial-gradient(ellipse at center, #000, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000, transparent 75%);
    pointer-events: none;
}

.cta-corner {
    position: absolute;
    width: 26px;
    height: 26px;
    border: 1px solid rgba(200, 168, 78, .4);
    opacity: .8;
    pointer-events: none;
}

.cta-corner-tl { top: 18px; left: 18px; border-width: 1px 0 0 1px; border-radius: 4px 0 0 0; }
.cta-corner-tr { top: 18px; right: 18px; border-width: 1px 1px 0 0; border-radius: 0 4px 0 0; }
.cta-corner-bl { bottom: 18px; left: 18px; border-width: 0 0 1px 1px; border-radius: 0 0 0 4px; }
.cta-corner-br { bottom: 18px; right: 18px; border-width: 0 1px 1px 0; border-radius: 0 0 4px 0; }

.cta-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 auto 20px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 213, 78, .18);
    border-radius: 999px;
    background: rgba(255,255,255,.02);
    color: var(--gold-light);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.cta-status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 8px rgba(74, 222, 128, .9);
    animation: processStatusBlink 2.2s ease-in-out infinite;
}

.cta-box h2 {
    position: relative;
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
    line-height: 1.2;
}

.cta-box p {
    position: relative;
    font-size: 16px;
    color: var(--text-muted);
    margin-bottom: 32px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.cta-box .btn {
    position: relative;
}

.cta-note {
    margin: 18px 0 0 !important;
    font-size: 12px !important;
    color: var(--text-dim) !important;
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
    border-top: 1px solid var(--line);
    padding: 48px 0 28px;
    background: var(--bg);
}

.footer-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--line);
}

.footer-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    max-width: 320px;
}

.footer-logo {
    height: 30px;
    width: auto;
    object-fit: contain;
}

.footer-tagline {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-dim);
}

.footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
}

.footer-nav a {
    color: var(--text-muted);
    font-size: 13px;
    text-decoration: none;
    transition: color 0.25s ease;
}

.footer-nav a:hover {
    color: var(--gold-light);
}

.footer-social {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-social a {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--text-muted);
    transition: color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.footer-social a:hover {
    color: var(--gold-light);
    border-color: rgba(200, 168, 78, .35);
    transform: translateY(-2px);
}

.footer-social a svg {
    width: 16px;
    height: 16px;
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding-top: 20px;
}

.footer-system-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text-dim);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.footer-system-status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 8px rgba(74, 222, 128, .9);
    animation: processStatusBlink 2.4s ease-in-out infinite;
}

.footer p {
    color: var(--text-dim);
    font-size: 12px;
}

@media (max-width: 700px) {
    .footer-top {
        flex-direction: column;
        gap: 24px;
    }
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

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

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

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

    .hero-text {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero-description {
        max-width: 600px;
    }

    .hero-visual {
        height: 350px;
        max-width: 500px;
        margin: 0 auto;
    }

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

    .case-featured {
        grid-column: span 1;
    }

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

    .process-grid::before {
        display: none;
    }

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

@media (max-width: 768px) {
    .container {
        width: calc(100% - 32px);
    }

    .nav-links a:not(.nav-cta) {
        display: none;
    }

    .menu-toggle {
        display: flex;
    }

    .hero {
        padding: 80px 0 60px;
        min-height: auto;
    }

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

    .hero-visual {
        height: 280px;
    }

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

    .stack-icons {
        gap: 8px;
    }

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

    .service-item {
        grid-template-columns: 1fr auto;
        gap: 8px;
    }

    .service-desc {
        display: none;
    }

    .cta-box {
        padding: 48px 28px;
    }

    section {
        padding: 80px 0;
    }
}

@media (max-width: 480px) {
    .hero-cta {
        flex-direction: column;
        width: 100%;
    }

    .btn {
        width: 100%;
    }

    .hero-visual {
        display: none;
    }

    .demo-flow {
        flex-direction: column;
    }

    .demo-connection {
        width: 2px;
        height: 20px;
    }

    .data-packet {
        animation: packetMoveVertical 2s ease-in-out infinite;
    }

    @keyframes packetMoveVertical {
        0% { top: 0; left: -2px; opacity: 0; }
        10% { opacity: 1; }
        90% { opacity: 1; }
        100% { top: calc(100% - 6px); opacity: 0; }
    }
}

/* ============================================
   MOBILE MENU
   ============================================ */
.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: rgba(5, 5, 5, 0.95);
    backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
}

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

.mobile-menu a {
    color: var(--text);
    text-decoration: none;
    font-size: 24px;
    font-weight: 600;
    transition: var(--transition);
}

.mobile-menu a:hover {
    color: var(--gold);
}

/* ============================================
   AJUSTE HERO — LOGO ZART TECH EM DESTAQUE
   ============================================ */
.hero-main-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(760px, 145%);
    max-width: none;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: contain;
    z-index: 0;
    filter: drop-shadow(0 0 22px rgba(200, 168, 78, 0.22));
    pointer-events: none;
    user-select: none;
}

.hero-visual .floating-card,
.hero-visual .connection-lines {
    z-index: 2;
}

@media (max-width: 1024px) {
    .hero-main-logo {
        width: min(680px, 150%);
    }
}

@media (max-width: 768px) {
    .hero-main-logo {
        width: min(560px, 155%);
    }
}


/* Phase1 command center */
.hero-visual{position:relative;overflow:visible}
.hero-visual::before{
content:"";position:absolute;inset:5% 8%;border:1px solid rgba(255,200,90,.12);
background:radial-gradient(circle at center,rgba(255,180,0,.05),transparent 70%);
backdrop-filter:blur(6px);border-radius:24px;z-index:0;
}
.command-grid{position:absolute;inset:0;pointer-events:none;z-index:1}
.command-grid svg{width:100%;height:100%}
.energy{stroke:#e8b84f;stroke-width:2;fill:none;stroke-dasharray:8 12;animation:flow 6s linear infinite;opacity:.5}
.node{fill:#e8b84f;filter:drop-shadow(0 0 6px #e8b84f);animation:blink 2.5s infinite alternate}
.hud-panel{position:absolute;right:8%;top:8%;padding:10px 14px;border:1px solid rgba(255,200,90,.2);background:rgba(20,20,20,.35);backdrop-filter:blur(10px);border-radius:12px;font:12px monospace;color:#d9d9d9;animation:floatHud 7s ease-in-out infinite}
@keyframes flow{to{stroke-dashoffset:-120}}
@keyframes blink{from{opacity:.4}to{opacity:1}}
@keyframes floatHud{50%{transform:translateY(-6px)}}

/* Phase2 Premium Hover */
.feature-card,.service-card,.case-card,.floating-card{
position:relative;
transform-style:preserve-3d;
transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s,border-color .45s;
overflow:hidden;
}
.feature-card::before,.service-card::before,.case-card::before,.floating-card::before{
content:"";
position:absolute;inset:-1px;
background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(232,208,128,.35),transparent 35%);
opacity:0;transition:opacity .3s;pointer-events:none;
}
.feature-card:hover,.service-card:hover,.case-card:hover,.floating-card:hover{
box-shadow:0 25px 60px rgba(0,0,0,.45),0 0 30px rgba(200,168,78,.18);
border-color:rgba(232,208,128,.35);
}
.feature-card:hover::before,.service-card:hover::before,.case-card:hover::before,.floating-card:hover::before{opacity:1;}
.icon-svg{width:28px;height:28px;color:var(--gold);}




/* Phase polish */
:root{
 --ai:#8b5cf6;--api:#3b82f6;--cloud:#22d3ee;--analytics:#fb923c;--security:#22c55e;
}
body{
 background:
 radial-gradient(circle at 20% 20%, rgba(139,92,246,.08), transparent 30%),
 radial-gradient(circle at 80% 30%, rgba(34,211,238,.08), transparent 30%),
 radial-gradient(circle at 50% 80%, rgba(251,146,60,.05), transparent 35%),
 #050505;
}
.hero::before{
content:"";
position:absolute;inset:0;
background:linear-gradient(90deg,transparent,rgba(255,215,0,.03),transparent);
animation:scan 12s linear infinite;
pointer-events:none;
}
@keyframes scan{from{transform:translateX(-30%)}to{transform:translateX(30%)}}
.floating-card:nth-child(1){border-color:var(--ai)}
.floating-card:nth-child(2){border-color:var(--api)}
.floating-card:nth-child(3){border-color:var(--cloud)}
.floating-card:nth-child(4){border-color:var(--security)}
.floating-card:hover{box-shadow:0 0 30px currentColor;transform:translateY(-8px) rotateX(6deg)}
section{position:relative}
section::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
background:linear-gradient(90deg,transparent,rgba(255,215,0,.25),transparent);
}

/* Global polish */
body::before{
content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
background:
radial-gradient(circle at 10% 20%, rgba(139,92,246,.12), transparent 30%),
radial-gradient(circle at 90% 30%, rgba(0,200,255,.10), transparent 28%),
radial-gradient(circle at 30% 80%, rgba(34,197,94,.08), transparent 24%),
radial-gradient(circle at 80% 75%, rgba(249,115,22,.08), transparent 24%);
animation:bgshift 18s ease-in-out infinite alternate;
}
@keyframes bgshift{to{transform:translateY(-20px) scale(1.04)}}
section{position:relative;overflow:hidden}
section::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(255,255,255,.01),transparent);opacity:.6}
.service-card:nth-child(1){border-top:2px solid var(--gold)}
.service-card:nth-child(2){border-top:2px solid #8b5cf6}
.service-card:nth-child(3){border-top:2px solid #00c8ff}
.service-card:nth-child(4){border-top:2px solid #22c55e}
.service-card:nth-child(5){border-top:2px solid #f97316}
.service-card,.feature-card,.case-card{transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s}
.service-card:hover,.feature-card:hover,.case-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 20px 50px rgba(0,0,0,.45)}

/* Global polish */
section{position:relative;overflow:hidden}
section::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.22;background:
radial-gradient(circle at 20% 20%,var(--accent,transparent),transparent 40%),
radial-gradient(circle at 80% 80%,rgba(255,255,255,.03),transparent 35%);
filter:blur(30px)}
#sobre{--accent:rgba(255,184,0,.16)}
#projetos{--accent:rgba(71,120,255,.18)}
#cases{--accent:rgba(170,84,255,.16)}
#processo{--accent:rgba(0,220,200,.16)}
#contato{--accent:rgba(0,255,120,.14)}
.service-card,.case-card,.feature-card{transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s}
.service-card:hover,.case-card:hover,.feature-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 20px 50px rgba(0,0,0,.35)}


/* Global polish */
section{position:relative;overflow:hidden}
section::before{
content:"";position:absolute;inset:-20%;
background:radial-gradient(circle at var(--gx,20%) var(--gy,30%), rgba(123,92,255,.10), transparent 28%),
radial-gradient(circle at 80% 70%, rgba(0,200,255,.08), transparent 30%),
radial-gradient(circle at 30% 90%, rgba(255,170,0,.06), transparent 25%);
pointer-events:none;animation:ambientMove 18s ease-in-out infinite alternate;
}
@keyframes ambientMove{from{transform:translate3d(-2%,0,0)}to{transform:translate3d(2%,-1%,0)}}
.service-card:nth-child(1){border-top:2px solid #d4af37}
.service-card:nth-child(2){border-top:2px solid #7b5cff}
.service-card:nth-child(3){border-top:2px solid #21c7ff}
.service-card:nth-child(4){border-top:2px solid #17d36b}
.service-card,.case-card,.feature-card{
transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s;
}
.service-card:hover,.case-card:hover,.feature-card:hover{
transform:translateY(-10px) rotateX(4deg);
box-shadow:0 25px 50px rgba(0,0,0,.45),0 0 30px rgba(212,175,55,.18);
}

/* ============================================
   TRUST BAND — métricas + clientes reais
   ============================================ */
.trust-band {
    position: relative;
    padding: 56px 0;
    background: linear-gradient(180deg, var(--bg) 0%, var(--bg-secondary) 100%);
    border-bottom: 1px solid var(--line);
    content-visibility: auto;
    contain-intrinsic-size: auto 320px;
}

.trust-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    text-align: center;
}

.trust-metric {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.6s cubic-bezier(.22,1,.36,1), transform 0.6s cubic-bezier(.22,1,.36,1);
}

.trust-metric.visible {
    opacity: 1;
    transform: translateY(0);
}

.trust-metric strong {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 700;
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.trust-metric span {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--text-dim);
}

.trust-divider {
    height: 1px;
    margin: 40px 0;
    background: linear-gradient(90deg, transparent, var(--line-light), transparent);
}

.trust-logos-label {
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 22px;
}

.trust-logos-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 44px;
}

.trust-logos-row img {
    height: 42px;
    width: auto;
    max-width: 90px;
    object-fit: contain;
    border-radius: 50%;
    filter: grayscale(1) brightness(1.15) opacity(.55);
    transition: filter 0.4s ease, transform 0.4s ease;
    opacity: 0;
    transform: translateY(8px);
}

.trust-logos-row img.visible {
    opacity: 1;
    transform: translateY(0);
}

.trust-logos-row img:hover {
    filter: grayscale(0) opacity(1);
    transform: translateY(-3px) scale(1.05);
}

@media (max-width: 700px) {
    .trust-metrics {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .trust-logos-row {
        gap: 28px;
    }
    .trust-logos-row img {
        height: 34px;
        max-width: 70px;
    }
}

/* ============================================
   ABOUT — ENGINEERING IDENTITY
   ============================================ */
.about {
    overflow: hidden;
    content-visibility: auto;
    contain-intrinsic-size: auto 1200px;
    background:
        radial-gradient(circle at 82% 38%, rgba(73, 128, 255, .10), transparent 30%),
        radial-gradient(circle at 15% 85%, rgba(200, 168, 78, .10), transparent 34%),
        linear-gradient(180deg, #090a0d 0%, #0d0f14 55%, #090a0d 100%);
}

.about-blueprint {
    position: absolute;
    inset: 0;
    opacity: .34;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(200,168,78,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(200,168,78,.045) 1px, transparent 1px),
        radial-gradient(circle at 72% 48%, rgba(200,168,78,.13) 0 1px, transparent 2px);
    background-size: 42px 42px, 42px 42px, 18px 18px;
    mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}

.about-shell { position: relative; z-index: 1; }
.about-header {
    display: grid;
    grid-template-columns: 1fr minmax(320px, 470px);
    gap: 80px;
    align-items: end;
}
.about-header p { max-width: none; margin-bottom: 4px; }

.about-showcase {
    display: grid;
    grid-template-columns: minmax(300px, .82fr) minmax(520px, 1.45fr);
    gap: 22px;
    align-items: stretch;
}

.about-principles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.principle-card {
    --principle: var(--gold);
    min-height: 210px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255,255,255,.052), rgba(255,255,255,.018));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
    transition: transform .55s cubic-bezier(.16,1,.3,1), border-color .45s ease, box-shadow .45s ease;
}
.principle-card::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--principle) 19%, transparent), transparent 46%);
    transition: opacity .4s ease;
}
.principle-card::after {
    content: '';
    position: absolute;
    left: 24px; right: 24px; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--principle), transparent);
    opacity: .55;
}
.principle-card:hover {
    transform: translateY(-7px);
    border-color: color-mix(in srgb, var(--principle) 38%, transparent);
    box-shadow: 0 20px 55px rgba(0,0,0,.32), 0 0 28px color-mix(in srgb, var(--principle) 10%, transparent);
}
.principle-card:hover::before { opacity: 1; }
.principle-architecture { --principle: #d7b75b; }
.principle-performance { --principle: #4f8cff; }
.principle-scale { --principle: #31d6c7; }
.principle-experience { --principle: #9d6cff; }
.principle-icon {
    width: 43px; height: 43px;
    display: grid; place-items: center;
    color: var(--principle);
    border: 1px solid color-mix(in srgb, var(--principle) 35%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--principle) 7%, transparent);
    box-shadow: 0 0 22px color-mix(in srgb, var(--principle) 10%, transparent);
}
.principle-icon svg { width: 25px; height: 25px; }
.principle-card div:last-child { position: relative; z-index: 1; }
.principle-card div:last-child > span {
    display: block; margin-bottom: 8px;
    font: 500 10px/1 'JetBrains Mono', monospace;
    letter-spacing: .16em; color: var(--principle); opacity: .78;
}
.principle-card h3 { font-size: 18px; margin-bottom: 8px; }
.principle-card p { color: var(--text-muted); font-size: 13px; line-height: 1.6; }

.about-intelligence {
    min-height: 452px;
    position: relative;
    border: 1px solid rgba(200,168,78,.18);
    border-radius: 22px;
    overflow: hidden;
    background:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
        radial-gradient(circle at 50% 45%, rgba(64,121,255,.12), transparent 34%),
        rgba(7,9,13,.86);
    background-size: 28px 28px, 28px 28px, auto, auto;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 30px 80px rgba(0,0,0,.28);
}
.about-intelligence::before {
    content: '';
    position: absolute;
    width: 250px; height: 250px;
    left: var(--about-x, 50%); top: var(--about-y, 45%);
    transform: translate(-50%,-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(79,140,255,.13), transparent 68%);
    pointer-events: none;
    transition: left .14s linear, top .14s linear;
}
.intelligence-topbar {
    height: 48px;
    padding: 0 18px;
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.022);
    font: 500 10px/1 'JetBrains Mono', monospace;
    letter-spacing: .13em;
    color: rgba(255,255,255,.62);
}
.intelligence-title { display:flex; align-items:center; gap:9px; }
.live-dot { width:7px; height:7px; border-radius:50%; background:#48df9b; box-shadow:0 0 14px #48df9b; animation: aboutLive 2.4s ease-in-out infinite; }
.intelligence-code { color: rgba(200,168,78,.72); }
@keyframes aboutLive { 0%,100%{opacity:.45;transform:scale(.85)} 50%{opacity:1;transform:scale(1.18)} }

.engineering-map { position: relative; height: 300px; }
.engineering-lines { position:absolute; inset:0; width:100%; height:100%; }
.map-line { fill:none; stroke-width:1; stroke:rgba(119,163,255,.26); stroke-dasharray:5 7; }
.map-line-2,.map-line-4 { stroke:rgba(200,168,78,.24); }
.map-pulse { fill:#72a1ff; filter:drop-shadow(0 0 7px #72a1ff); }
.pulse-2,.pulse-4 { fill:#d7b75b; filter:drop-shadow(0 0 7px #d7b75b); }
.map-node {
    position:absolute; width:126px; min-height:64px; padding:12px 13px;
    display:flex; flex-direction:column; justify-content:center;
    border:1px solid rgba(255,255,255,.09); border-radius:12px;
    background:rgba(9,12,18,.86); backdrop-filter:blur(10px);
    box-shadow:0 12px 32px rgba(0,0,0,.28);
    transition:transform .4s cubic-bezier(.16,1,.3,1), border-color .4s ease;
}
.map-node:hover { transform:translateY(-5px); border-color:rgba(115,161,255,.45); }
.map-node span { font:500 8px/1 'JetBrains Mono',monospace; letter-spacing:.15em; color:#74a4ff; margin-bottom:7px; }
.map-node strong { font-size:11px; line-height:1.3; }
.map-node small { margin-top:4px; color:var(--text-muted); font-size:9px; }
.map-node i { position:absolute; width:6px; height:6px; border-radius:50%; background:#58e3a3; right:9px; top:9px; box-shadow:0 0 10px #58e3a3; }
.map-client { left:4%; top:12%; }
.map-data { left:4%; bottom:8%; }
.map-core { left:50%; top:50%; width:144px; min-height:88px; transform:translate(-50%,-50%); border-color:rgba(200,168,78,.42); box-shadow:0 0 38px rgba(200,168,78,.10),0 14px 36px rgba(0,0,0,.32); }
.map-core:hover { transform:translate(-50%,-54%); border-color:rgba(200,168,78,.75); }
.map-core span { color:#d7b75b; }
.map-software { right:4%; top:12%; }
.map-result { right:4%; bottom:8%; }

.engineering-status {
    position:absolute; left:0; right:0; bottom:0;
    display:grid; grid-template-columns:repeat(4,1fr);
    border-top:1px solid rgba(255,255,255,.07);
    background:rgba(4,6,9,.78); backdrop-filter:blur(12px);
}
.status-module { padding:13px 14px; border-right:1px solid rgba(255,255,255,.06); }
.status-module:last-child { border-right:0; }
.status-module span { display:block; font-size:9px; color:var(--text-muted); margin-bottom:5px; }
.status-module strong { display:block; font:600 10px/1.2 'JetBrains Mono',monospace; letter-spacing:.06em; color:#e8edf7; }
.status-online,.status-healthy { color:#52dfa0 !important; }
.status-module > div { height:2px; margin-top:9px; background:rgba(255,255,255,.07); overflow:hidden; }
.status-module > div i { display:block; width:var(--value); height:100%; background:linear-gradient(90deg,#4f8cff,#31d6c7); transform-origin:left; animation: statusLoad 1.5s cubic-bezier(.16,1,.3,1) both; }
@keyframes statusLoad { from{transform:scaleX(0)} to{transform:scaleX(1)} }

@media (max-width: 1050px) {
    .about-showcase { grid-template-columns: 1fr; }
    .about-intelligence { min-height: 470px; }
}
@media (max-width: 760px) {
    .about-header { grid-template-columns: 1fr; gap: 18px; }
    .about-principles { grid-template-columns: 1fr; }
    .principle-card { min-height: 170px; }
    .about-intelligence { min-height: 650px; }
    .engineering-map { height: 475px; }
    .engineering-lines { display:none; }
    .map-node { position:relative; inset:auto !important; transform:none !important; width:auto; margin:12px 16px; min-height:58px; }
    .map-core { width:auto; }
    .engineering-status { grid-template-columns:1fr 1fr; }
    .status-module:nth-child(2) { border-right:0; }
    .status-module:nth-child(-n+2) { border-bottom:1px solid rgba(255,255,255,.06); }
}

/* =========================================================
   PROJETOS — vitrine visual de soluções reais
   ========================================================= */
.projects{position:relative;overflow:hidden;padding:120px 0;background:linear-gradient(180deg,rgba(4,7,15,.96),rgba(6,8,15,.98));content-visibility:auto;contain-intrinsic-size:auto 1500px;}
.projects-ambient{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 18% 20%,rgba(208,168,92,.09),transparent 34%),radial-gradient(circle at 82% 28%,rgba(113,76,255,.09),transparent 32%),radial-gradient(circle at 30% 82%,rgba(34,211,238,.07),transparent 30%),radial-gradient(circle at 80% 88%,rgba(34,197,94,.07),transparent 30%);filter:saturate(1.1);}
.projects-ambient:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to bottom,transparent,black 18%,black 82%,transparent);}
.projects .container{position:relative;z-index:1}.projects-header{display:grid;grid-template-columns:1.15fr .85fr;align-items:end;gap:70px;margin-bottom:52px}.projects-header p{max-width:560px;margin:0 0 8px auto}
.projects-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.project-card{--project:#d0a85c;position:relative;min-height:610px;padding:24px;border:1px solid rgba(255,255,255,.08);border-radius:26px;background:linear-gradient(150deg,rgba(255,255,255,.055),rgba(255,255,255,.018));box-shadow:0 25px 70px rgba(0,0,0,.28);overflow:hidden;isolation:isolate;transition:transform .55s cubic-bezier(.16,1,.3,1),border-color .4s ease,box-shadow .55s ease}.project-card:before{content:"";position:absolute;inset:-35%;z-index:-2;background:radial-gradient(circle,var(--project),transparent 58%);opacity:.075;transform:translate3d(-25%,-20%,0);transition:opacity .5s ease,transform .8s cubic-bezier(.16,1,.3,1)}.project-card:after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(120deg,transparent 30%,color-mix(in srgb,var(--project) 20%,transparent) 50%,transparent 70%);transform:translateX(-120%);transition:transform .9s cubic-bezier(.16,1,.3,1)}.project-card:hover{transform:translateY(-8px);border-color:color-mix(in srgb,var(--project) 55%,transparent);box-shadow:0 35px 90px rgba(0,0,0,.38),0 0 42px color-mix(in srgb,var(--project) 16%,transparent)}.project-card:hover:before{opacity:.13;transform:translate3d(10%,-5%,0)}.project-card:hover:after{transform:translateX(120%)}
.project-ai{--project:#986cff}.project-track{--project:#35d07f}.project-platform{--project:#2ccde9}.project-topline{display:flex;justify-content:space-between;align-items:center;margin-bottom:34px}.project-index{font:500 11px/1 'JetBrains Mono',monospace;letter-spacing:.18em;color:var(--project)}.project-status{display:flex;align-items:center;gap:7px;font:500 9px/1 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:rgba(230,235,244,.68)}.project-status i{width:6px;height:6px;border-radius:50%;background:var(--project);box-shadow:0 0 12px var(--project);animation:projectPulse 2.4s ease-in-out infinite}.project-kicker{display:block;margin-bottom:10px;font:600 10px/1 'JetBrains Mono',monospace;letter-spacing:.15em;text-transform:uppercase;color:var(--project)}.project-copy h3{font-size:clamp(28px,3vw,42px);margin:0 0 14px;letter-spacing:-.04em}.project-copy p{max-width:580px;margin:0;color:var(--text-secondary);line-height:1.72}.project-screen{position:relative;height:280px;margin:34px 0 24px;border:1px solid color-mix(in srgb,var(--project) 28%,rgba(255,255,255,.08));border-radius:18px;background:rgba(3,6,12,.72);overflow:hidden;box-shadow:inset 0 0 45px rgba(0,0,0,.45)}.project-footer{display:flex;flex-wrap:wrap;gap:8px}.project-footer span{padding:7px 10px;border:1px solid rgba(255,255,255,.075);border-radius:999px;background:rgba(255,255,255,.025);font:500 9px/1 'JetBrains Mono',monospace;color:rgba(224,230,240,.68)}
.screen-head{height:36px;display:flex;align-items:center;gap:6px;padding:0 13px;border-bottom:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.025)}.screen-head span,.browser-bar span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.16)}.screen-head b{margin-left:8px;font:500 9px/1 'JetBrains Mono',monospace;color:rgba(255,255,255,.48)}.screen-body{display:grid;grid-template-columns:54px 1fr;height:calc(100% - 36px)}.erp-sidebar{padding:18px 13px;border-right:1px solid rgba(255,255,255,.055)}.erp-sidebar i{display:block;height:8px;margin-bottom:15px;border-radius:2px;background:rgba(208,168,92,.14)}.erp-content{padding:20px}.erp-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.erp-metrics span{padding:10px;border:1px solid rgba(255,255,255,.055);border-radius:8px;background:rgba(255,255,255,.025)}.erp-metrics b{display:block;font:600 16px/1 'JetBrains Mono',monospace;color:var(--project)}.erp-metrics small{display:block;margin-top:6px;font-size:8px;color:rgba(255,255,255,.42)}.erp-chart{display:flex;align-items:end;gap:8px;height:95px;margin-top:18px;padding:0 8px 10px;border-bottom:1px solid rgba(255,255,255,.05)}.erp-chart i{flex:1;height:var(--h);border-radius:3px 3px 0 0;background:linear-gradient(to top,rgba(208,168,92,.22),var(--project));animation:barBreathe 3.8s ease-in-out infinite alternate}.erp-chart i:nth-child(2n){animation-duration:4.7s}.erp-stream{display:grid;gap:7px;margin-top:13px}.erp-stream span{height:5px;border-radius:3px;background:linear-gradient(90deg,rgba(208,168,92,.28),rgba(208,168,92,.03));animation:stream 3.2s ease-in-out infinite}.erp-stream span:nth-child(2){width:82%;animation-delay:.5s}.erp-stream span:nth-child(3){width:64%;animation-delay:1s}
.ai-screen{color:var(--project)}.ai-screen>svg{position:absolute;inset:0;width:100%;height:100%;opacity:.52}.ai-links path{stroke-dasharray:5 8;animation:dashFlow 9s linear infinite}.ai-pulses{filter:drop-shadow(0 0 8px currentColor)}.ai-node,.ai-core{position:absolute;display:flex;flex-direction:column;justify-content:center;border:1px solid color-mix(in srgb,var(--project) 36%,transparent);background:rgba(8,5,18,.78);box-shadow:0 0 25px rgba(152,108,255,.08)}.ai-node{width:104px;height:48px;padding:0 12px;border-radius:10px}.ai-node span{font:500 7px/1 'JetBrains Mono',monospace;letter-spacing:.09em;color:rgba(255,255,255,.38)}.ai-node b{margin-top:5px;font-size:10px;color:#e9e4ff}.input-a{left:3%;top:16%}.input-b{left:3%;bottom:16%}.output-a{right:3%;top:10%}.output-b{right:3%;top:41%}.output-c{right:3%;bottom:8%}.ai-core{left:50%;top:50%;width:92px;height:92px;transform:translate(-50%,-50%);align-items:center;border-radius:50%;box-shadow:0 0 0 14px rgba(152,108,255,.035),0 0 45px rgba(152,108,255,.17);animation:coreBreathe 3.6s ease-in-out infinite}.ai-core span{font:700 24px/1 'JetBrains Mono',monospace}.ai-core small{margin-top:7px;font-size:8px;color:rgba(255,255,255,.48)}
.map-screen{background:linear-gradient(145deg,rgba(5,20,15,.72),rgba(3,9,11,.9))}.map-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(53,208,127,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(53,208,127,.055) 1px,transparent 1px);background-size:30px 30px;transform:perspective(500px) rotateX(18deg) scale(1.15)}.map-screen svg{position:absolute;inset:0;width:100%;height:100%}.route-shadow{stroke:rgba(53,208,127,.13);stroke-width:10}.route-line{stroke:var(--project);stroke-width:2;stroke-dasharray:8 10;animation:dashFlow 8s linear infinite}.route-pulse{fill:#dfffee;filter:drop-shadow(0 0 8px var(--project))}.map-pin{position:absolute;width:10px;height:10px;border:2px solid var(--project);border-radius:50%;box-shadow:0 0 0 7px rgba(53,208,127,.08),0 0 18px var(--project)}.pin-a{left:6%;bottom:14%}.pin-b{left:39%;top:37%}.pin-c{right:5%;top:15%}.vehicle-chip{position:absolute;left:49%;top:53%;display:grid;grid-template-columns:18px 1fr;gap:2px 8px;padding:10px 13px;border:1px solid rgba(53,208,127,.24);border-radius:10px;background:rgba(3,15,10,.88);box-shadow:0 15px 35px rgba(0,0,0,.35)}.vehicle-chip i{grid-row:1/3;width:9px;height:9px;margin:auto;border-radius:50%;background:var(--project);box-shadow:0 0 12px var(--project)}.vehicle-chip span{font-size:9px;color:#e9fff2}.vehicle-chip b{font:500 7px/1 'JetBrains Mono',monospace;color:rgba(255,255,255,.45)}
.platform-screen{background:linear-gradient(145deg,rgba(4,16,24,.8),rgba(3,8,13,.95))}.browser-frame{position:absolute;left:6%;top:10%;width:82%;height:77%;border:1px solid rgba(44,205,233,.26);border-radius:11px;background:rgba(4,10,17,.92);box-shadow:0 18px 50px rgba(0,0,0,.45)}.browser-bar{height:26px;display:flex;align-items:center;gap:5px;padding:0 9px;border-bottom:1px solid rgba(255,255,255,.055)}.browser-bar i{margin-left:8px;font:500 7px/1 'JetBrains Mono',monospace;color:rgba(255,255,255,.3)}.browser-content{padding:13px}.platform-nav{width:45%;height:6px;border-radius:4px;background:rgba(44,205,233,.18)}.platform-hero{height:76px;margin-top:13px;padding:15px;border-radius:8px;background:linear-gradient(120deg,rgba(44,205,233,.12),rgba(44,205,233,.025))}.platform-hero span{display:block;width:56%;height:7px;margin-bottom:8px;border-radius:4px;background:rgba(255,255,255,.14)}.platform-hero span:nth-child(2){width:38%;opacity:.55}.platform-hero button{width:46px;height:13px;border:0;border-radius:3px;background:var(--project)}.platform-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}.platform-cards i{height:37px;border:1px solid rgba(44,205,233,.12);border-radius:6px;background:rgba(44,205,233,.035)}.mobile-frame{position:absolute;right:4%;bottom:7%;width:76px;height:144px;padding:11px 8px;border:1px solid rgba(44,205,233,.34);border-radius:14px;background:#050b11;box-shadow:0 18px 40px rgba(0,0,0,.52)}.mobile-frame div{height:54px;border-radius:6px;background:linear-gradient(145deg,rgba(44,205,233,.18),rgba(44,205,233,.035))}.mobile-frame span{display:block;height:5px;margin-top:9px;border-radius:4px;background:rgba(255,255,255,.12)}.mobile-frame span:nth-child(3){width:72%}.mobile-frame span:nth-child(4){width:48%;background:rgba(44,205,233,.34)}
.projects-cta{display:flex;align-items:center;justify-content:space-between;gap:28px;margin-top:28px;padding:28px 30px;border:1px solid rgba(255,255,255,.075);border-radius:20px;background:linear-gradient(100deg,rgba(208,168,92,.06),rgba(44,205,233,.035))}.projects-cta span{display:block;margin-bottom:7px;font-size:12px;color:var(--text-muted)}.projects-cta strong{font-size:18px;color:#f4f6fa}
@keyframes projectPulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.18)}}@keyframes barBreathe{from{filter:brightness(.8);transform:scaleY(.9)}to{filter:brightness(1.25);transform:scaleY(1)}}@keyframes stream{0%,100%{opacity:.25;transform:scaleX(.82);transform-origin:left}50%{opacity:.8;transform:scaleX(1)}}@keyframes dashFlow{to{stroke-dashoffset:-180}}@keyframes coreBreathe{0%,100%{box-shadow:0 0 0 12px rgba(152,108,255,.025),0 0 32px rgba(152,108,255,.12)}50%{box-shadow:0 0 0 18px rgba(152,108,255,.045),0 0 55px rgba(152,108,255,.26)}}
@media(max-width:980px){.projects-header{grid-template-columns:1fr;gap:22px}.projects-header p{margin:0}.projects-grid{grid-template-columns:1fr}.project-card{min-height:auto}.projects-cta{align-items:flex-start;flex-direction:column}}
@media(max-width:620px){.projects{padding:88px 0}.project-card{padding:18px;border-radius:20px}.project-screen{height:235px;margin-top:26px}.project-topline{margin-bottom:26px}.ai-node{width:82px;padding:0 8px}.ai-node b{font-size:8px}.ai-core{width:74px;height:74px}.projects-cta{padding:22px}.projects-cta .btn{width:100%;justify-content:center}}

/* ============================================
   CASE ERP ZART — PORTFÓLIO DE PRODUTO
   ============================================ */
.erp-case {
    position: relative;
    display: grid;
    grid-template-columns: minmax(320px, .78fr) minmax(520px, 1.35fr);
    gap: clamp(28px, 4vw, 64px);
    padding: clamp(28px, 4vw, 52px);
    min-height: 650px;
    overflow: hidden;
    background:
        radial-gradient(circle at 86% 16%, rgba(255, 196, 32, .14), transparent 28%),
        radial-gradient(circle at 60% 90%, rgba(0, 196, 255, .07), transparent 32%),
        linear-gradient(145deg, rgba(24,24,22,.98), rgba(9,9,9,.99));
    border-color: rgba(224, 176, 32, .35);
}
.erp-case::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(90deg, transparent, #000 35%, #000);
}
.erp-case-copy,
.erp-case-showcase { position: relative; z-index: 2; }
.erp-case-copy { display: flex; flex-direction: column; justify-content: center; }
.case-status {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 10px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: #72e8a4;
}
.case-status i {
    width: 7px; height: 7px; border-radius: 50%; background: #37d97a;
    box-shadow: 0 0 0 5px rgba(55,217,122,.1), 0 0 14px rgba(55,217,122,.7);
    animation: erpStatusPulse 2.4s ease-in-out infinite;
}
.case-eyebrow {
    margin: 24px 0 5px !important; color: var(--gold) !important;
    font-size: 10px !important; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
}
.erp-case .case-body h3 { font-size: clamp(40px, 5vw, 72px); line-height: .95; letter-spacing: -.05em; margin-bottom: 22px; }
.erp-case-lead { max-width: 590px; font-size: 15px !important; line-height: 1.75 !important; }
.erp-case-metrics {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 25px 0;
}
.erp-case-metrics div {
    min-height: 82px; padding: 15px 12px; border-radius: 13px;
    background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.075);
}
.erp-case-metrics strong { display: block; color: #fff; font: 700 20px/1.15 'JetBrains Mono', monospace; }
.erp-case-metrics span { display: block; margin-top: 7px; color: var(--text-dim); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.erp-feature-list {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin: 0 0 24px; padding: 0; list-style: none;
}
.erp-feature-list li { position: relative; padding-left: 18px; color: var(--text-muted); font-size: 12px; line-height: 1.45; }
.erp-feature-list li::before { content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border: 1px solid var(--gold); border-radius: 50%; box-shadow: 0 0 10px rgba(224,176,32,.35); }
.erp-stack span { color: #e7c451; border-color: rgba(224,176,32,.22); background: rgba(224,176,32,.07); }
.erp-case-cta {
    display: inline-flex; align-items: center; justify-content: space-between; gap: 20px;
    width: fit-content; margin-top: 26px; padding: 15px 18px 15px 20px;
    border: 1px solid rgba(224,176,32,.55); border-radius: 10px;
    color: #f2d269; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    background: linear-gradient(100deg, rgba(224,176,32,.1), rgba(224,176,32,.025));
    transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s, background .35s;
}
.erp-case-cta svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.erp-case-cta:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(224,176,32,.14); background: rgba(224,176,32,.14); }
.erp-case-showcase { min-height: 555px; perspective: 1300px; }
.erp-screen {
    position: absolute; overflow: hidden; border-radius: 13px; background: #0b0b0b;
    border: 1px solid rgba(224,176,32,.25); box-shadow: 0 28px 70px rgba(0,0,0,.55), inset 0 1px rgba(255,255,255,.04);
    transition: transform .55s cubic-bezier(.22,1,.36,1), border-color .4s, box-shadow .4s;
}
.erp-screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; filter: saturate(.9) contrast(1.04); }
.erp-screen-top { height: 26px; display: flex; align-items: center; gap: 5px; padding: 0 10px; background: #111; border-bottom: 1px solid rgba(255,255,255,.06); }
.erp-screen-top span { width: 6px; height: 6px; border-radius: 50%; background: rgba(224,176,32,.62); }
.erp-screen-top small { margin-left: 7px; color: #797979; font: 500 8px/1 'JetBrains Mono', monospace; }
.erp-screen-main { inset: 12px 4% 110px 5%; transform: rotateY(-3deg) rotateX(1deg); }
.erp-screen-main img { object-position: top center; }
.erp-screen-secondary { width: 47%; height: 205px; bottom: 0; }
.erp-screen-intelligence { left: 0; transform: rotateY(5deg) translateZ(12px); }
.erp-screen-dashboard { right: 0; transform: rotateY(-5deg) translateZ(15px); }
.erp-case:hover .erp-screen-main { transform: rotateY(-1deg) rotateX(0deg) translateY(-5px); border-color: rgba(224,176,32,.48); }
.erp-case:hover .erp-screen-intelligence { transform: rotateY(2deg) translateY(-7px); }
.erp-case:hover .erp-screen-dashboard { transform: rotateY(-2deg) translateY(-10px); }
.erp-data-pulse { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.erp-data-pulse span { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #f5c83b; box-shadow: 0 0 14px #f5c83b; opacity: 0; }
.erp-data-pulse span:nth-child(1) { top: 18%; left: 8%; animation: erpDataMove1 5.6s ease-in-out infinite; }
.erp-data-pulse span:nth-child(2) { top: 63%; left: 44%; animation: erpDataMove2 6.8s ease-in-out 1.2s infinite; }
.erp-data-pulse span:nth-child(3) { top: 40%; right: 7%; animation: erpDataMove3 7.4s ease-in-out 2.2s infinite; }
.erp-demo-note { position: absolute; right: 9px; bottom: -26px; color: rgba(255,255,255,.35); font-size: 8px; letter-spacing: .14em; text-transform: uppercase; }
@keyframes erpStatusPulse { 50% { opacity: .45; transform: scale(.76); } }
@keyframes erpDataMove1 { 0%,100%{opacity:0;transform:translate(0,0)} 15%{opacity:1} 70%{opacity:.9;transform:translate(390px,120px)} 85%{opacity:0} }
@keyframes erpDataMove2 { 0%,100%{opacity:0;transform:translate(0,0)} 20%{opacity:1} 72%{opacity:.8;transform:translate(250px,-210px)} 88%{opacity:0} }
@keyframes erpDataMove3 { 0%,100%{opacity:0;transform:translate(0,0)} 16%{opacity:1} 68%{opacity:.8;transform:translate(-350px,175px)} 86%{opacity:0} }
@media (max-width: 1050px) {
    .erp-case { grid-template-columns: 1fr; }
    .erp-case-showcase { min-height: 530px; }
}
@media (max-width: 680px) {
    .erp-case { padding: 24px 18px; min-height: auto; }
    .erp-case-metrics { grid-template-columns: 1fr; }
    .erp-feature-list { grid-template-columns: 1fr; }
    .erp-case-showcase { min-height: 410px; }
    .erp-screen-main { inset: 0 0 135px; transform: none; }
    .erp-screen-secondary { width: 49%; height: 128px; }
    .erp-case .case-header { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
    .case-status i, .erp-data-pulse span { animation: none !important; }
}


/* ============================================
   PERFORMANCE PASS — smoother scrolling
   ============================================ */
#ecosystemCanvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: .55;
    contain: strict;
    transform: translateZ(0);
}

section:not(.hero) {
    content-visibility: auto;
    contain-intrinsic-size: 900px;
}

.erp-case-feature, .erp-screen, .project-card, .principle-card, .service-card, .case-card {
    contain: layout paint style;
}

.erp-screen img {
    will-change: auto !important;
}

/* Large blurs and multiple animated shadows are expensive during scroll. */
.erp-case-feature, .erp-screen, .about-intelligence, .project-card, .hud-panel {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

@media (max-width: 1100px), (prefers-reduced-motion: reduce) {
    #ecosystemCanvas { opacity: .32; }
    .erp-data-pulse span, .energy, .node, .route-line, .pipeline-pulse, .process-packet,
    .case-status i, .hud-panel, .floating-card, .sync-line::after {
        animation: none !important;
    }
}

/* ============================================
   CASE ZART TRACK — RASTREAMENTO E TELEMETRIA
   ============================================ */
.track-case {
    position: relative;
    display: grid;
    grid-template-columns: minmax(320px, .78fr) minmax(520px, 1.35fr);
    gap: clamp(28px, 4vw, 64px);
    padding: clamp(28px, 4vw, 52px);
    min-height: 650px;
    overflow: hidden;
    background:
        radial-gradient(circle at 86% 16%, rgba(255, 123, 24, .14), transparent 28%),
        radial-gradient(circle at 58% 92%, rgba(46, 217, 138, .08), transparent 34%),
        linear-gradient(145deg, rgba(24,22,20,.98), rgba(7,9,8,.99));
    border-color: rgba(255, 132, 24, .34);
}
.track-case::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,145,35,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,145,35,.018) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: linear-gradient(90deg, transparent, #000 30%, #000);
}
.track-case-copy,
.track-case-showcase { position: relative; z-index: 2; }
.track-case-copy { display: flex; flex-direction: column; justify-content: center; }
.track-tag { color: #ffad4b; border-color: rgba(255,132,24,.28); background: rgba(255,132,24,.08); }
.track-status { color: #62e69a; }
.track-status i { background: #36d97b; box-shadow: 0 0 0 5px rgba(54,217,123,.1), 0 0 14px rgba(54,217,123,.65); }
.track-brandline { display: flex; align-items: center; gap: 18px; margin: 22px 0 4px; }
.track-brandline img {
    width: 76px; height: 76px; object-fit: cover; border-radius: 18px;
    border: 1px solid rgba(255,145,35,.34); box-shadow: 0 16px 35px rgba(0,0,0,.35);
}
.track-brandline .case-eyebrow { margin: 0 0 7px !important; color: #ff9f32 !important; }
.track-brandline h3 { margin: 0 !important; font-size: clamp(40px, 5vw, 70px) !important; line-height: .95; letter-spacing: -.05em; }
.track-case-lead { max-width: 590px; font-size: 15px !important; line-height: 1.75 !important; }
.track-case-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 25px 0; }
.track-case-metrics div {
    min-height: 82px; padding: 15px 12px; border-radius: 13px;
    background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.075);
}
.track-case-metrics strong { display:block; color:#fff; font:700 20px/1.15 'JetBrains Mono',monospace; }
.track-case-metrics span { display:block; margin-top:7px; color:var(--text-dim); font-size:9px; text-transform:uppercase; letter-spacing:.08em; }
.track-feature-list { display:grid; grid-template-columns:1fr 1fr; gap:10px 18px; margin:0 0 24px; padding:0; list-style:none; }
.track-feature-list li { position:relative; padding-left:18px; color:var(--text-muted); font-size:12px; line-height:1.45; }
.track-feature-list li::before {
    content:""; position:absolute; left:0; top:.5em; width:7px; height:7px; border:1px solid #ff8a1d;
    border-radius:50%; box-shadow:0 0 10px rgba(255,138,29,.34);
}
.track-stack span { color:#ffb35f; border-color:rgba(255,132,24,.24); background:rgba(255,132,24,.07); }
.track-case-cta {
    display:inline-flex; align-items:center; justify-content:space-between; gap:20px;
    width:fit-content; margin-top:26px; padding:15px 18px 15px 20px;
    border:1px solid rgba(255,132,24,.55); border-radius:10px;
    color:#ffb55e; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
    background:linear-gradient(100deg,rgba(255,132,24,.1),rgba(255,132,24,.025));
    transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s,background .35s;
}
.track-case-cta svg { width:18px; fill:none; stroke:currentColor; stroke-width:1.7; }
.track-case-cta:hover { transform:translateY(-3px); box-shadow:0 14px 34px rgba(255,132,24,.14); background:rgba(255,132,24,.14); }
.track-case-showcase { min-height:555px; perspective:1300px; }
.track-screen {
    position:absolute; overflow:hidden; border-radius:13px; background:#090b0a;
    border:1px solid rgba(255,132,24,.26); box-shadow:0 28px 70px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.04);
    transition:transform .55s cubic-bezier(.22,1,.36,1),border-color .4s,box-shadow .4s;
}
.track-screen img { display:block; width:100%; height:100%; object-fit:cover; object-position:top; filter:saturate(.92) contrast(1.04); }
.track-screen-top { height:26px; display:flex; align-items:center; gap:5px; padding:0 10px; background:#10110f; border-bottom:1px solid rgba(255,255,255,.06); }
.track-screen-top span { width:6px; height:6px; border-radius:50%; background:rgba(255,132,24,.72); }
.track-screen-top small { margin-left:7px; color:#7d7d78; font:500 8px/1 'JetBrains Mono',monospace; }
.track-screen-main { inset:12px 4% 110px 5%; transform:rotateY(-3deg) rotateX(1deg); }
.track-screen-secondary { width:47%; height:205px; bottom:0; }
.track-screen-panel { left:0; transform:rotateY(5deg) translateZ(12px); }
.track-screen-clients { right:0; transform:rotateY(-5deg) translateZ(15px); }
.track-case:hover .track-screen-main { transform:rotateY(-1deg) rotateX(0) translateY(-5px); border-color:rgba(255,132,24,.48); }
.track-case:hover .track-screen-panel { transform:rotateY(2deg) translateY(-7px); }
.track-case:hover .track-screen-clients { transform:rotateY(-2deg) translateY(-10px); }
.track-radar { position:absolute; right:4%; top:3%; width:110px; height:110px; pointer-events:none; opacity:.5; }
.track-radar span { position:absolute; inset:50%; border:1px solid rgba(61,224,137,.28); border-radius:50%; transform:translate(-50%,-50%); animation:trackRadar 4.6s ease-out infinite; }
.track-radar span:nth-child(2){animation-delay:1.5s}.track-radar span:nth-child(3){animation-delay:3s}
.track-route { position:absolute; inset:0; pointer-events:none; z-index:4; }
.track-route::before { content:""; position:absolute; left:12%; bottom:22%; width:72%; height:42%; border:1px dashed rgba(255,132,24,.28); border-color:rgba(255,132,24,.28) transparent transparent rgba(255,132,24,.28); border-radius:50%; transform:rotate(-9deg); }
.track-route i { position:absolute; width:7px; height:7px; border-radius:50%; background:#ff8a1d; box-shadow:0 0 14px #ff8a1d; opacity:0; animation:trackPulse 6.4s ease-in-out infinite; }
.track-route i:nth-child(1){left:15%;bottom:28%}.track-route i:nth-child(2){left:47%;top:43%;animation-delay:2.1s}.track-route i:nth-child(3){right:14%;top:22%;animation-delay:4.2s}
.track-route b { position:absolute; right:14%; top:20%; width:12px; height:12px; border:2px solid #54e394; border-radius:50%; box-shadow:0 0 0 8px rgba(84,227,148,.08),0 0 18px rgba(84,227,148,.6); }
.track-demo-note { position:absolute; right:9px; bottom:-26px; color:rgba(255,255,255,.35); font-size:8px; letter-spacing:.14em; text-transform:uppercase; }
@keyframes trackRadar { 0%{width:0;height:0;opacity:.65} 100%{width:110px;height:110px;opacity:0} }
@keyframes trackPulse { 0%,100%{opacity:0;transform:scale(.7)} 18%,72%{opacity:1;transform:scale(1)} 82%{opacity:0} }
@media(max-width:1050px){.track-case{grid-template-columns:1fr}.track-case-showcase{min-height:530px}}
@media(max-width:680px){
    .track-case{padding:24px 18px;min-height:auto}.track-brandline{align-items:flex-start}.track-brandline img{width:58px;height:58px;border-radius:14px}
    .track-case-metrics{grid-template-columns:1fr}.track-feature-list{grid-template-columns:1fr}.track-case-showcase{min-height:410px}
    .track-screen-main{inset:0 0 135px;transform:none}.track-screen-secondary{width:49%;height:128px}.track-radar{display:none}.track-case .case-header{align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){.track-radar span,.track-route i{animation:none!important}}


/* EMISSOR ZART CASE */
.emissor-case {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(480px, 1.1fr);
    gap: 42px;
    min-height: 650px;
    padding: 42px;
    overflow: hidden;
    position: relative;
    border-color: rgba(73, 154, 255, .22);
    background:
        radial-gradient(circle at 78% 25%, rgba(48, 137, 255, .13), transparent 35%),
        radial-gradient(circle at 25% 80%, rgba(224, 176, 32, .08), transparent 42%),
        linear-gradient(135deg, rgba(7, 13, 25, .98), rgba(6, 8, 14, .97));
}
.emissor-case::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(78,145,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(78,145,255,.035) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(to left, #000 30%, transparent 90%);
}
.emissor-case-copy,.emissor-case-showcase{position:relative;z-index:2}
.emissor-case-copy{display:flex;flex-direction:column;justify-content:center}
.emissor-tag{color:#8fc3ff!important;border-color:rgba(74,151,255,.32)!important;background:rgba(38,112,225,.08)!important}
.emissor-status{color:#7ef1b4}
.emissor-status i{background:#46df94;box-shadow:0 0 13px rgba(70,223,148,.8)}
.emissor-case .case-body h3{font-size:clamp(40px,5vw,72px);line-height:.95;letter-spacing:-.05em;margin-bottom:22px}
.emissor-case-lead{max-width:590px;font-size:15px!important;line-height:1.75!important}
.emissor-case-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:25px 0}
.emissor-case-metrics div{padding:15px 14px;border:1px solid rgba(77,151,255,.16);background:rgba(50,111,201,.055);border-radius:12px}
.emissor-case-metrics strong{display:block;color:#fff;font:700 20px/1.15 'JetBrains Mono',monospace}
.emissor-case-metrics span{display:block;margin-top:7px;color:var(--text-dim);font-size:9px;text-transform:uppercase;letter-spacing:.08em}
.emissor-feature-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px;margin:0 0 24px;padding:0;list-style:none}
.emissor-feature-list li{position:relative;padding-left:18px;color:var(--text-secondary);font-size:12px;line-height:1.5}
.emissor-feature-list li::before{content:'';position:absolute;left:0;top:.48em;width:7px;height:7px;border:1px solid #5ca4ff;transform:rotate(45deg);box-shadow:0 0 10px rgba(92,164,255,.45)}
.emissor-stack span{border-color:rgba(75,149,255,.2)!important;background:rgba(52,116,214,.07)!important}
.emissor-case-cta{display:inline-flex;align-items:center;gap:10px;width:max-content;padding:13px 17px;border:1px solid rgba(77,151,255,.35);border-radius:10px;color:#bcdcff;text-decoration:none;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;background:rgba(53,115,213,.08);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s}
.emissor-case-cta svg{width:18px;fill:none;stroke:currentColor;stroke-width:1.7}
.emissor-case-cta:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(51,126,234,.18);border-color:rgba(104,177,255,.66)}
.emissor-case-showcase{min-height:555px;perspective:1300px}
.emissor-flow{position:absolute;left:2%;right:2%;top:0;display:flex;align-items:center;justify-content:center;gap:8px;z-index:5}
.emissor-flow i{height:1px;flex:1;max-width:54px;background:linear-gradient(90deg,rgba(74,151,255,.15),#5ca4ff,rgba(224,176,32,.45));position:relative;overflow:hidden}
.emissor-flow i::after{content:'';position:absolute;top:-1px;width:18px;height:3px;background:#cbe5ff;filter:blur(1px);animation:emissorPulse 2.7s linear infinite}
.emissor-flow i:nth-of-type(2)::after{animation-delay:.45s}.emissor-flow i:nth-of-type(3)::after{animation-delay:.9s}.emissor-flow i:nth-of-type(4)::after{animation-delay:1.35s}
.flow-node{padding:7px 10px;border-radius:999px;border:1px solid rgba(86,158,255,.23);background:rgba(8,17,32,.88);font:700 8px/1 'JetBrains Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:#8fb8e8;white-space:nowrap}
.flow-node.active{color:#d7ebff;box-shadow:0 0 18px rgba(73,154,255,.14)}
.flow-node.success{color:#82f2b8;border-color:rgba(69,221,146,.28)}
@keyframes emissorPulse{from{left:-20px}to{left:calc(100% + 20px)}}
.emissor-placeholder{position:absolute;border:1px solid rgba(78,151,255,.22);border-radius:15px;overflow:hidden;background:linear-gradient(145deg,rgba(10,18,34,.96),rgba(5,9,17,.98));box-shadow:0 30px 65px rgba(0,0,0,.36);transition:transform .55s cubic-bezier(.2,.8,.2,1),border-color .4s,box-shadow .4s}
.emissor-placeholder-main{inset:54px 0 145px 7%;transform:rotateY(-4deg) rotateX(1deg)}
.emissor-placeholder-small{bottom:0;width:48%;height:160px}
.emissor-placeholder-left{left:0;transform:rotateY(4deg)}
.emissor-placeholder-right{right:0;transform:rotateY(-4deg)}
.emissor-window-bar{height:31px;display:flex;align-items:center;gap:6px;padding:0 11px;border-bottom:1px solid rgba(77,151,255,.13);background:rgba(12,24,44,.82)}
.emissor-window-bar span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.16)}
.emissor-window-bar span:first-child{background:#ff6c6c}.emissor-window-bar span:nth-child(2){background:#e0b020}.emissor-window-bar span:nth-child(3){background:#46df94}
.emissor-window-bar small{margin-left:auto;color:#7694b7;font:600 8px/1 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em}
.emissor-placeholder-body{height:calc(100% - 31px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:25px}
.emissor-placeholder-body svg{width:105px;fill:none;stroke:#66abff;stroke-width:2;opacity:.8;filter:drop-shadow(0 0 12px rgba(78,151,255,.28));margin-bottom:18px}
.emissor-placeholder-body strong{font-size:18px;color:#e7f2ff;margin-bottom:7px}.emissor-placeholder-body span{color:#7188a3;font-size:10px}
.emissor-mini-lines,.emissor-code-lines{padding:20px;display:grid;gap:10px}
.emissor-mini-lines b{display:block;height:11px;border-radius:5px;background:linear-gradient(90deg,rgba(73,154,255,.32),rgba(73,154,255,.05));animation:emissorLoad 3.4s ease-in-out infinite}
.emissor-mini-lines b:nth-child(2){width:76%;animation-delay:.35s}.emissor-mini-lines b:nth-child(3){width:91%;animation-delay:.7s}.emissor-mini-lines b:nth-child(4){width:58%;animation-delay:1.05s}
.emissor-code-lines b{font:600 9px/1.2 'JetBrains Mono',monospace;color:#7fb8ff;opacity:.72}.emissor-code-lines b:nth-child(2),.emissor-code-lines b:nth-child(3){padding-left:14px;color:#e0b020}
@keyframes emissorLoad{50%{filter:brightness(1.65);transform:translateX(3px)}}
.emissor-case:hover .emissor-placeholder-main{transform:rotateY(-1deg) translateY(-5px);border-color:rgba(87,163,255,.5);box-shadow:0 34px 78px rgba(8,58,125,.22)}
.emissor-case:hover .emissor-placeholder-left{transform:rotateY(1deg) translateY(-7px)}
.emissor-case:hover .emissor-placeholder-right{transform:rotateY(-1deg) translateY(-10px)}
.emissor-demo-note{position:absolute;right:12px;bottom:12px;color:#6f8daf;font:600 8px/1 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.1em;z-index:6}
@media(max-width:1050px){.emissor-case{grid-template-columns:1fr}.emissor-case-showcase{min-height:530px}}
@media(max-width:700px){.emissor-case{padding:24px 18px;min-height:auto}.emissor-case-metrics,.emissor-feature-list{grid-template-columns:1fr}.emissor-case-showcase{min-height:440px}.emissor-placeholder-main{inset:58px 0 150px}.emissor-placeholder-small{width:49%;height:140px}.emissor-flow{gap:4px}.flow-node{font-size:6px;padding:6px}.emissor-flow i{max-width:20px}.emissor-case .case-header{align-items:flex-start}}


/* EMISSOR ZART — ETAPA 2: TELAS REAIS */
.emissor-screen img {
    width: 100%;
    height: calc(100% - 31px);
    display: block;
    object-fit: cover;
    object-position: top center;
    filter: saturate(.88) contrast(1.04) brightness(.78);
    transition: transform .7s cubic-bezier(.2,.8,.2,1), filter .45s ease;
}
.emissor-placeholder-main img { object-position: top left; }
.emissor-placeholder-small img { object-position: top center; }
.emissor-screen::after {
    content: '';
    position: absolute;
    inset: 31px 0 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(75,151,255,.09), transparent 24%, transparent 78%, rgba(2,8,18,.28)),
        linear-gradient(90deg, rgba(65,146,255,.06), transparent 28%, transparent 72%, rgba(224,176,32,.04));
    mix-blend-mode: screen;
}
.emissor-screen-scan {
    position: absolute;
    left: 0;
    right: 0;
    top: 31px;
    height: 2px;
    opacity: .55;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, #7ab8ff 22%, #e0b020 52%, #7ab8ff 78%, transparent);
    box-shadow: 0 0 14px rgba(89,165,255,.75);
    animation: emissorScan 6.8s ease-in-out infinite;
}
@keyframes emissorScan {
    0%,100% { transform: translateY(0); opacity: 0; }
    8% { opacity: .55; }
    48% { opacity: .45; }
    55% { transform: translateY(360px); opacity: 0; }
}
.emissor-case:hover .emissor-screen img {
    filter: saturate(1) contrast(1.05) brightness(.92);
}
.emissor-case:hover .emissor-placeholder-main img { transform: scale(1.018); }
.emissor-case:hover .emissor-placeholder-small img { transform: scale(1.04); }
.flow-node.success {
    animation: emissorAuthorized 3.4s ease-in-out infinite;
}
@keyframes emissorAuthorized {
    0%,100% { box-shadow: 0 0 0 rgba(69,221,146,0); }
    45% { box-shadow: 0 0 20px rgba(69,221,146,.2), inset 0 0 12px rgba(69,221,146,.06); }
}
@media (max-width:700px) {
    .emissor-screen img { filter: saturate(.9) contrast(1.02) brightness(.84); }
    .emissor-screen-scan { display:none; }
}
@media (prefers-reduced-motion:reduce) {
    .emissor-screen-scan,.flow-node.success { animation:none!important; }
    .emissor-screen img { transition:none!important; }
}

/* CASE LUZZIÊ */
.luzzie-case {
    grid-column: 1 / -1;
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(520px, 1.08fr);
    gap: clamp(30px, 4vw, 64px);
    min-height: 690px;
    padding: clamp(30px, 4vw, 58px);
    border: 1px solid rgba(233, 188, 212, .18);
    background:
        radial-gradient(circle at 76% 28%, rgba(218, 151, 199, .13), transparent 34%),
        radial-gradient(circle at 86% 78%, rgba(153, 121, 214, .10), transparent 36%),
        linear-gradient(145deg, rgba(32, 17, 30, .92), rgba(12, 10, 17, .97));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 28px 80px rgba(36, 15, 31, .24);
}
.luzzie-case::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .32;
    background-image:
        linear-gradient(rgba(233,188,212,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(233,188,212,.035) 1px, transparent 1px);
    background-size: 38px 38px;
    mask-image: linear-gradient(90deg, transparent, #000 35%, #000);
}
.luzzie-case::after {
    content: '';
    position: absolute;
    width: 440px;
    height: 440px;
    right: -170px;
    top: -180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(235,169,212,.17), transparent 66%);
    filter: blur(18px);
    pointer-events: none;
}
.luzzie-case-copy,.luzzie-case-showcase{position:relative;z-index:2}
.luzzie-case-copy{display:flex;flex-direction:column;justify-content:center}
.luzzie-tag{color:#f3c7df;border-color:rgba(236,182,215,.33);background:rgba(218,139,190,.08)}
.luzzie-status{color:#f2d6e7}
.luzzie-status i{background:#efb8d8;box-shadow:0 0 14px rgba(239,184,216,.75);animation:luzzieStatus 2.8s ease-in-out infinite}
@keyframes luzzieStatus{0%,100%{opacity:.45;transform:scale(.8)}50%{opacity:1;transform:scale(1.1)}}
.luzzie-brandline{display:flex;align-items:center;gap:17px;margin:8px 0 17px}
.luzzie-brandline img{width:94px;height:auto;object-fit:contain;filter:drop-shadow(0 12px 24px rgba(214,145,188,.15))}
.luzzie-brandline h3{font-size:clamp(46px,5.3vw,76px)!important;line-height:.92!important;letter-spacing:-.055em!important;margin:0!important;color:#fff}
.luzzie-case-lead{max-width:610px;font-size:15px!important;line-height:1.78!important;color:rgba(255,255,255,.68)!important}
.luzzie-case-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:25px 0}
.luzzie-case-metrics div{padding:15px 14px;border:1px solid rgba(233,188,212,.16);background:rgba(218,145,190,.055);border-radius:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.luzzie-case-metrics strong{display:block;color:#fff;font:700 20px/1.15 'JetBrains Mono',monospace}
.luzzie-case-metrics span{display:block;margin-top:7px;color:rgba(255,255,255,.48);font-size:9px;text-transform:uppercase;letter-spacing:.08em}
.luzzie-feature-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px;margin:0 0 24px;padding:0;list-style:none}
.luzzie-feature-list li{position:relative;padding-left:17px;color:rgba(255,255,255,.65);font-size:12px;line-height:1.45}
.luzzie-feature-list li::before{content:'';position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:#eab9d5;box-shadow:0 0 10px rgba(234,185,213,.55)}
.luzzie-stack span{border-color:rgba(233,188,212,.18);background:rgba(226,159,201,.055);color:#edc9dd}
.luzzie-case-cta{display:inline-flex;align-items:center;gap:10px;width:max-content;padding:13px 17px;border:1px solid rgba(233,188,212,.38);border-radius:10px;color:#f4d5e6;text-decoration:none;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;background:rgba(222,148,196,.09);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s,background .35s}
.luzzie-case-cta svg{width:18px;fill:none;stroke:currentColor;stroke-width:1.7}
.luzzie-case-cta:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(215,140,188,.18);border-color:rgba(244,198,226,.68);background:rgba(222,148,196,.15)}
.luzzie-case-showcase{min-height:570px;perspective:1400px}
.luzzie-screen{position:absolute;overflow:hidden;border:1px solid rgba(240,200,224,.18);border-radius:18px;background:#17131a;box-shadow:0 30px 72px rgba(19,8,17,.48);transition:transform .7s cubic-bezier(.2,.8,.2,1),border-color .45s,box-shadow .45s}
.luzzie-screen-top{height:32px;display:flex;align-items:center;gap:6px;padding:0 12px;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015));border-bottom:1px solid rgba(255,255,255,.055)}
.luzzie-screen-top span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.24)}
.luzzie-screen-top span:first-child{background:#efb9d7}.luzzie-screen-top span:nth-child(2){background:#c9a6e3}.luzzie-screen-top span:nth-child(3){background:#f0d7e5}
.luzzie-screen-top small{margin-left:6px;color:rgba(255,255,255,.46);font-size:8px;letter-spacing:.08em;text-transform:uppercase}
.luzzie-screen img{width:100%;height:calc(100% - 32px);display:block;object-fit:cover;object-position:center;filter:saturate(.93) contrast(1.02) brightness(.86);transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .5s}
.luzzie-screen-main{inset:52px 34px 128px 0;transform:rotateY(-4deg) rotateX(1deg)}
.luzzie-screen-main img{object-position:center}
.luzzie-screen-secondary{width:48%;height:154px;bottom:0}
.luzzie-screen-product{left:3%;transform:rotateY(4deg) translateY(7px)}
.luzzie-screen-product img{object-position:center 58%}
.luzzie-screen-environment{right:0;transform:rotateY(-4deg) translateY(0)}
.luzzie-screen-environment img{object-position:center}
.luzzie-shine{position:absolute;top:32px;bottom:0;width:42%;left:-50%;background:linear-gradient(110deg,transparent,rgba(255,255,255,.10),transparent);transform:skewX(-12deg);animation:luzzieShine 8.5s ease-in-out infinite}
@keyframes luzzieShine{0%,62%{left:-55%;opacity:0}70%{opacity:.8}92%{left:120%;opacity:0}100%{left:120%;opacity:0}}
.luzzie-case:hover .luzzie-screen-main{transform:rotateY(-1deg) rotateX(0) translateY(-6px);border-color:rgba(242,198,224,.44);box-shadow:0 38px 88px rgba(42,14,34,.46)}
.luzzie-case:hover .luzzie-screen-product{transform:rotateY(2deg) translateY(-6px)}
.luzzie-case:hover .luzzie-screen-environment{transform:rotateY(-2deg) translateY(-9px)}
.luzzie-case:hover .luzzie-screen img{filter:saturate(1.02) contrast(1.03) brightness(.95);transform:scale(1.018)}
.luzzie-orb{position:absolute;border-radius:50%;filter:blur(8px);opacity:.45;pointer-events:none;animation:luzzieFloat 8s ease-in-out infinite}
.luzzie-orb-a{width:120px;height:120px;right:7%;top:3%;background:radial-gradient(circle,rgba(235,175,214,.32),transparent 68%)}
.luzzie-orb-b{width:90px;height:90px;left:3%;bottom:8%;background:radial-gradient(circle,rgba(166,128,220,.24),transparent 68%);animation-delay:-3.5s}
@keyframes luzzieFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-12px,0)}}
.luzzie-commerce-flow{position:absolute;left:3%;right:3%;top:8px;display:flex;align-items:center;gap:7px;justify-content:center;color:rgba(255,255,255,.5);font-size:7px;letter-spacing:.08em;text-transform:uppercase}
.luzzie-commerce-flow span{padding:6px 8px;border:1px solid rgba(233,188,212,.13);border-radius:999px;background:rgba(221,153,196,.05)}
.luzzie-commerce-flow i{height:1px;flex:1;max-width:30px;background:linear-gradient(90deg,rgba(233,188,212,.08),rgba(233,188,212,.68),rgba(233,188,212,.08));background-size:200% 100%;animation:luzzieFlow 2.8s linear infinite}
@keyframes luzzieFlow{to{background-position:-200% 0}}
.luzzie-demo-note{position:absolute;right:8px;bottom:164px;padding:5px 8px;border-radius:7px;border:1px solid rgba(233,188,212,.13);background:rgba(12,8,13,.7);color:rgba(255,255,255,.4);font-size:7px;text-transform:uppercase;letter-spacing:.08em}
@media(max-width:1050px){.luzzie-case{grid-template-columns:1fr}.luzzie-case-showcase{min-height:540px}}
@media(max-width:700px){.luzzie-case{padding:24px 18px;min-height:auto}.luzzie-brandline img{width:74px}.luzzie-case-metrics,.luzzie-feature-list{grid-template-columns:1fr}.luzzie-case-showcase{min-height:430px}.luzzie-screen-main{inset:52px 0 142px;transform:none}.luzzie-screen-secondary{width:49%;height:134px}.luzzie-commerce-flow{gap:3px}.luzzie-commerce-flow span{font-size:6px;padding:5px}.luzzie-commerce-flow i{max-width:12px}.luzzie-demo-note{bottom:143px}.luzzie-orb{display:none}.luzzie-case .case-header{align-items:flex-start}}
@media(prefers-reduced-motion:reduce){.luzzie-shine,.luzzie-orb,.luzzie-status i,.luzzie-commerce-flow i{animation:none!important}.luzzie-screen,.luzzie-screen img{transition:none!important}}


/* CASE PREMIUM — PLATAFORMA SHALOM */
.shalom-case{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:42px;min-height:650px;padding:42px;border:1px solid rgba(74,197,142,.2);background:radial-gradient(circle at 82% 18%,rgba(43,202,145,.13),transparent 36%),radial-gradient(circle at 18% 90%,rgba(184,131,64,.08),transparent 34%),linear-gradient(145deg,rgba(8,18,15,.98),rgba(7,11,10,.96));overflow:hidden;position:relative}
.shalom-case:before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(74,197,142,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(74,197,142,.035) 1px,transparent 1px);background-size:30px 30px;mask-image:linear-gradient(to left,#000,transparent 72%);pointer-events:none}
.shalom-case-copy,.shalom-case-showcase{position:relative;z-index:2}.shalom-case-copy{display:flex;flex-direction:column;justify-content:center}.shalom-tag{color:#85e6bc!important;border-color:rgba(90,220,160,.28)!important;background:rgba(42,190,132,.08)!important}.shalom-status{color:#8ce2bb}.shalom-status i{background:#48d79a;box-shadow:0 0 12px rgba(72,215,154,.8)}
.shalom-brandline{display:flex;align-items:center;gap:16px;margin:6px 0 18px}.shalom-brandline img{width:78px;height:78px;object-fit:cover;border-radius:18px;border:1px solid rgba(126,223,177,.25);box-shadow:0 15px 35px rgba(0,0,0,.25)}.shalom-brandline h3{font-size:clamp(38px,4.7vw,68px)!important;line-height:.95!important;letter-spacing:-.05em!important;margin:0!important}.shalom-case-lead{max-width:610px;font-size:15px!important;line-height:1.78!important;color:rgba(255,255,255,.67)!important}
.shalom-case-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:24px 0}.shalom-case-metrics div{padding:15px 14px;border:1px solid rgba(77,213,157,.16);background:rgba(53,184,132,.055);border-radius:13px}.shalom-case-metrics strong{display:block;color:#fff;font:700 18px/1.15 'JetBrains Mono',monospace}.shalom-case-metrics span{display:block;margin-top:7px;color:rgba(255,255,255,.46);font-size:9px;text-transform:uppercase;letter-spacing:.08em}.shalom-feature-list{display:grid;grid-template-columns:1fr 1fr;gap:9px 18px;margin:0 0 22px;padding:0;list-style:none}.shalom-feature-list li{font-size:11px;color:rgba(255,255,255,.62);padding-left:17px;position:relative}.shalom-feature-list li:before{content:'';position:absolute;left:0;top:6px;width:6px;height:6px;border-radius:50%;background:#49d89b;box-shadow:0 0 10px rgba(73,216,155,.65)}.shalom-stack span{border-color:rgba(75,211,157,.2)!important;color:#a9e9ca!important;background:rgba(50,180,126,.055)!important}.shalom-case-cta{display:inline-flex;align-items:center;gap:10px;width:max-content;padding:13px 17px;border:1px solid rgba(75,211,157,.36);border-radius:10px;color:#b6efd4;text-decoration:none;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;background:rgba(45,176,122,.09);transition:.35s}.shalom-case-cta svg{width:18px;fill:none;stroke:currentColor;stroke-width:1.7}.shalom-case-cta:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(42,192,131,.18);background:rgba(45,176,122,.15)}
.shalom-case-showcase{min-height:570px;perspective:1400px}.shalom-screen{position:absolute;overflow:hidden;border-radius:16px;border:1px solid rgba(113,224,175,.19);background:#07100d;box-shadow:0 28px 68px rgba(0,0,0,.42);transition:transform .7s cubic-bezier(.2,.8,.2,1),border-color .4s,box-shadow .4s}.shalom-screen-main{inset:44px 36px 158px 0;transform:rotateY(-4deg) rotateX(1deg)}.shalom-screen-secondary{bottom:0;width:48%;height:145px}.shalom-screen-catalog{left:0;transform:rotateY(3deg)}.shalom-screen-assistant{right:0;transform:rotateY(-3deg)}.shalom-screen-top{height:30px;display:flex;align-items:center;gap:6px;padding:0 11px;border-bottom:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.025)}.shalom-screen-top span{width:6px;height:6px;border-radius:50%;background:rgba(113,224,175,.42)}.shalom-screen-top small{margin-left:8px;color:rgba(255,255,255,.48);font:600 8px/1 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em}.shalom-screen img{width:100%;height:calc(100% - 30px);display:block;object-fit:cover;object-position:top center;filter:saturate(.92) contrast(1.03) brightness(.85);transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .4s}.shalom-scan{position:absolute;left:0;right:0;top:30px;height:2px;background:linear-gradient(90deg,transparent,#57daa0,transparent);box-shadow:0 0 14px rgba(87,218,160,.75);animation:shalomScan 7.4s ease-in-out infinite}.shalom-commerce-flow{position:absolute;top:0;left:5%;right:5%;display:flex;align-items:center;justify-content:center;gap:7px}.shalom-commerce-flow span{padding:6px 9px;border:1px solid rgba(78,211,155,.2);border-radius:999px;color:#9fe8c5;background:rgba(39,158,111,.08);font:700 7px/1 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em}.shalom-commerce-flow i{height:1px;flex:1;max-width:38px;background:linear-gradient(90deg,rgba(76,211,154,.15),#5bdca5,rgba(76,211,154,.15));position:relative;overflow:hidden}.shalom-commerce-flow i:after{content:'';position:absolute;inset:0;width:34%;background:#d1ffe9;box-shadow:0 0 9px #62dda8;animation:shalomFlow 2.8s linear infinite}.shalom-demo-note{position:absolute;right:10px;bottom:150px;padding:5px 8px;border-radius:999px;background:rgba(5,14,11,.75);border:1px solid rgba(85,215,159,.18);color:rgba(170,239,207,.65);font:600 7px/1 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em}.shalom-case:hover .shalom-screen-main{transform:rotateY(-1deg) translateY(-6px);border-color:rgba(113,224,175,.45);box-shadow:0 38px 88px rgba(0,30,20,.46)}.shalom-case:hover .shalom-screen-catalog{transform:rotateY(1deg) translateY(-7px)}.shalom-case:hover .shalom-screen-assistant{transform:rotateY(-1deg) translateY(-10px)}.shalom-case:hover .shalom-screen img{filter:saturate(1.03) contrast(1.04) brightness(.96);transform:scale(1.018)}
@keyframes shalomScan{0%,100%{transform:translateY(0);opacity:0}10%{opacity:.6}52%{transform:translateY(360px);opacity:.35}58%{opacity:0}}@keyframes shalomFlow{from{transform:translateX(-160%)}to{transform:translateX(430%)}}
@media(max-width:1050px){.shalom-case{grid-template-columns:1fr}.shalom-case-showcase{min-height:540px}}@media(max-width:700px){.shalom-case{padding:24px 18px;min-height:auto}.shalom-brandline img{width:62px;height:62px}.shalom-case-metrics,.shalom-feature-list{grid-template-columns:1fr}.shalom-case-showcase{min-height:430px}.shalom-screen-main{inset:50px 0 145px;transform:none}.shalom-screen-secondary{width:49%;height:136px}.shalom-commerce-flow{gap:3px}.shalom-commerce-flow span{font-size:6px;padding:5px}.shalom-commerce-flow i{max-width:12px}.shalom-demo-note{bottom:142px}.shalom-scan{display:none}}
@media(prefers-reduced-motion:reduce){.shalom-scan,.shalom-commerce-flow i:after{animation:none!important}.shalom-screen,.shalom-screen img{transition:none!important}}


/* CASE PREMIUM — CARLITO MULTIMARCAS */
.carlito-case{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:42px;min-height:640px;padding:42px;border:1px solid rgba(230,60,66,.22);background:radial-gradient(circle at 84% 16%,rgba(230,48,56,.14),transparent 36%),radial-gradient(circle at 16% 92%,rgba(200,200,210,.06),transparent 34%),linear-gradient(145deg,rgba(16,7,7,.98),rgba(8,7,7,.97));overflow:hidden;position:relative}
.carlito-case:before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(230,60,66,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(230,60,66,.035) 1px,transparent 1px);background-size:30px 30px;mask-image:linear-gradient(to left,#000,transparent 72%);pointer-events:none}
.carlito-case-copy,.carlito-case-showcase{position:relative;z-index:2}.carlito-case-copy{display:flex;flex-direction:column;justify-content:center}.carlito-tag{color:#ff9298!important;border-color:rgba(230,70,76,.3)!important;background:rgba(230,48,56,.09)!important}.carlito-status{color:#f0a1a5}.carlito-status i{background:#e63c42;box-shadow:0 0 12px rgba(230,60,66,.8)}
.carlito-brandline{display:flex;align-items:center;gap:16px;margin:6px 0 18px}.carlito-brandline img{width:78px;height:78px;object-fit:cover;border-radius:50%;border:1px solid rgba(230,90,96,.3);box-shadow:0 15px 35px rgba(0,0,0,.3)}.carlito-brandline h3{font-size:clamp(38px,4.7vw,68px)!important;line-height:.95!important;letter-spacing:-.05em!important;margin:0!important}.carlito-case-lead{max-width:610px;font-size:15px!important;line-height:1.78!important;color:rgba(255,255,255,.67)!important}
.carlito-case-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:24px 0}.carlito-case-metrics div{padding:15px 14px;border:1px solid rgba(230,80,86,.18);background:rgba(200,50,56,.06);border-radius:13px}.carlito-case-metrics strong{display:block;color:#fff;font:700 18px/1.15 'JetBrains Mono',monospace}.carlito-case-metrics span{display:block;margin-top:7px;color:rgba(255,255,255,.46);font-size:9px;text-transform:uppercase;letter-spacing:.08em}.carlito-feature-list{display:grid;grid-template-columns:1fr 1fr;gap:9px 18px;margin:0 0 22px;padding:0;list-style:none}.carlito-feature-list li{font-size:11px;color:rgba(255,255,255,.62);padding-left:17px;position:relative}.carlito-feature-list li:before{content:'';position:absolute;left:0;top:6px;width:6px;height:6px;border-radius:50%;background:#e6474d;box-shadow:0 0 10px rgba(230,71,77,.65)}.carlito-stack span{border-color:rgba(230,90,96,.22)!important;color:#f0b3b6!important;background:rgba(200,55,60,.06)!important}.carlito-case-cta{display:inline-flex;align-items:center;gap:10px;width:max-content;padding:13px 17px;border:1px solid rgba(230,90,96,.38);border-radius:10px;color:#ffc7c9;text-decoration:none;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;background:rgba(200,50,56,.1);transition:.35s}.carlito-case-cta svg{width:18px;fill:none;stroke:currentColor;stroke-width:1.7}.carlito-case-cta:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(210,50,56,.2);background:rgba(200,50,56,.16)}
.carlito-case-showcase{min-height:560px;perspective:1400px}.carlito-screen{position:absolute;overflow:hidden;border-radius:16px;border:1px solid rgba(230,90,96,.2);background:#0c0707;box-shadow:0 28px 68px rgba(0,0,0,.45);transition:transform .7s cubic-bezier(.2,.8,.2,1),border-color .4s,box-shadow .4s}.carlito-screen-main{inset:44px 0 168px 36px;transform:rotateY(4deg) rotateX(1deg)}.carlito-screen-secondary{bottom:0;width:48%;height:150px}.carlito-screen-stock{left:0;transform:rotateY(-3deg)}.carlito-screen-about{right:0;transform:rotateY(3deg)}.carlito-screen-top{height:30px;display:flex;align-items:center;gap:6px;padding:0 11px;border-bottom:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.025)}.carlito-screen-top span{width:6px;height:6px;border-radius:50%;background:rgba(230,90,96,.42)}.carlito-screen-top small{margin-left:8px;color:rgba(255,255,255,.48);font:600 8px/1 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em}.carlito-screen img{width:100%;height:calc(100% - 30px);display:block;object-fit:cover;object-position:top center;filter:saturate(.95) contrast(1.03) brightness(.88);transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .4s}.carlito-scan{position:absolute;left:0;right:0;top:30px;height:2px;background:linear-gradient(90deg,transparent,#ff5a60,transparent);box-shadow:0 0 14px rgba(255,90,96,.75);animation:carlitoScan 7.4s ease-in-out infinite}.carlito-commerce-flow{position:absolute;top:0;left:5%;right:5%;display:flex;align-items:center;justify-content:center;gap:7px}.carlito-commerce-flow span{padding:6px 9px;border:1px solid rgba(230,90,96,.22);border-radius:999px;color:#ffb3b6;background:rgba(190,45,50,.09);font:700 7px/1 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em}.carlito-commerce-flow i{height:1px;flex:1;max-width:38px;background:linear-gradient(90deg,rgba(230,80,86,.15),#ff6b70,rgba(230,80,86,.15));position:relative;overflow:hidden}.carlito-commerce-flow i:after{content:'';position:absolute;inset:0;width:34%;background:#ffd9da;box-shadow:0 0 9px #ff6b70;animation:carlitoFlow 2.8s linear infinite}.carlito-demo-note{position:absolute;left:10px;bottom:158px;padding:5px 8px;border-radius:999px;background:rgba(14,5,5,.75);border:1px solid rgba(230,90,96,.2);color:rgba(255,190,192,.65);font:600 7px/1 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em}.carlito-case:hover .carlito-screen-main{transform:rotateY(1deg) translateY(-6px);border-color:rgba(230,90,96,.5);box-shadow:0 38px 88px rgba(30,0,0,.5)}.carlito-case:hover .carlito-screen-stock{transform:rotateY(-1deg) translateY(-7px)}.carlito-case:hover .carlito-screen-about{transform:rotateY(1deg) translateY(-10px)}.carlito-case:hover .carlito-screen img{filter:saturate(1.05) contrast(1.05) brightness(.98);transform:scale(1.018)}
@keyframes carlitoScan{0%,100%{transform:translateY(0);opacity:0}10%{opacity:.6}52%{transform:translateY(340px);opacity:.35}58%{opacity:0}}@keyframes carlitoFlow{from{transform:translateX(-160%)}to{transform:translateX(430%)}}
@media(max-width:1050px){.carlito-case{grid-template-columns:1fr}.carlito-case-showcase{min-height:540px}}@media(max-width:700px){.carlito-case{padding:24px 18px;min-height:auto}.carlito-brandline img{width:62px;height:62px}.carlito-case-metrics,.carlito-feature-list{grid-template-columns:1fr}.carlito-case-showcase{min-height:430px}.carlito-screen-main{inset:50px 0 155px;transform:none}.carlito-screen-secondary{width:49%;height:140px}.carlito-commerce-flow{gap:3px}.carlito-commerce-flow span{font-size:6px;padding:5px}.carlito-commerce-flow i{max-width:12px}.carlito-demo-note{bottom:152px}.carlito-scan{display:none}}
@media(prefers-reduced-motion:reduce){.carlito-scan,.carlito-commerce-flow i:after{animation:none!important}.carlito-screen,.carlito-screen img{transition:none!important}}
.carlito-case{content-visibility:auto;contain-intrinsic-size:auto 900px;}


/* =========================================================
   PERFORMANCE PASS — mantém o visual, anima só o que está visível
   ========================================================= */
section {
    content-visibility: auto;
    contain-intrinsic-size: 900px;
}
.project-card,
.erp-case,
.track-case,
.emissor-case,
.luzzie-case,
.carlito-case,
.shalom-case {
    contain: layout paint style;
    isolation: isolate;
}
.project-card img,
.erp-case img,
.track-case img,
.emissor-case img,
.luzzie-case img,
.carlito-case img,
.shalom-case img {
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Animações decorativas ficam pausadas fora da viewport. */
.project-card:not(.perf-visible) *,
.erp-case:not(.perf-visible) *,
.track-case:not(.perf-visible) *,
.emissor-case:not(.perf-visible) *,
.luzzie-case:not(.perf-visible) *,
.shalom-case:not(.perf-visible) *,
.carlito-case:not(.perf-visible) *,
section:not(.perf-visible) .pipeline-pulse,
section:not(.perf-visible) .pipeline-status i {
    animation-play-state: paused !important;
}

/* Também pausa tudo quando a aba perde o foco. */
.page-hidden * {
    animation-play-state: paused !important;
}

/* O navegador promove apenas elementos realmente animados. */
.perf-visible .emissor-screen-scan,
.perf-visible .shalom-scan,
.perf-visible .carlito-scan,
.perf-visible .luzzie-shine,
.perf-visible .track-route i,
.perf-visible .erp-data-pulse span {
    will-change: transform, opacity;
}

/* Evita manter dezenas de camadas GPU permanentemente. */
:not(.perf-visible) .emissor-screen-scan,
:not(.perf-visible) .shalom-scan,
:not(.perf-visible) .carlito-scan,
:not(.perf-visible) .luzzie-shine,
:not(.perf-visible) .track-route i,
:not(.perf-visible) .erp-data-pulse span {
    will-change: auto;
}

/* Blurs grandes são visualmente semelhantes com custo bem menor. */
.luzzie-orb { filter: blur(5px) !important; }
.hero::before,
.hero::after { filter: blur(70px); }

/* Cards grandes não precisam recalcular backdrop em todo frame. */
.project-card,
.erp-case,
.track-case,
.emissor-case,
.luzzie-case,
.shalom-case,
.carlito-case,
.case-showcase {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* Transições limitadas às propriedades compostas pela GPU. */
.shalom-screen,
.carlito-screen,
.luzzie-screen,
.emissor-screen,
.track-screen,
.erp-screen {
    transition-property: transform, opacity, border-color, box-shadow !important;
}

/* Mobile: preserva movimento, mas elimina os efeitos mais caros. */
@media (max-width: 900px), (hover: none) {
    section { contain-intrinsic-size: 720px; }
    .project-card,
    .erp-case,
    .track-case,
    .emissor-case,
    .luzzie-case,
    .shalom-case,
    .carlito-case {
        box-shadow: 0 18px 42px rgba(0,0,0,.3) !important;
    }
    .luzzie-orb,
    .emissor-screen-scan,
    .shalom-scan,
    .carlito-scan {
        display: none !important;
    }
    .feature-card,
    .service-card,
    .case-card,
    .floating-card {
        transform: none !important;
    }
}


/* =========================================================
   PERFORMANCE PASS 2 — modo fluido
   ========================================================= */

/* Tudo fora da seção atual fica visualmente intacto, mas sem animação contínua. */
main section:not(.motion-active) *,
body > section:not(.motion-active) * {
    animation-play-state: paused !important;
}

/* Remove custos de pintura global acompanhando o cursor. */
html::before,
body::before,
body::after {
    pointer-events: none;
}

/* Glows passam a ser gradientes estáticos, sem filtros gigantes. */
.hero::before,
.hero::after,
section::before,
section::after {
    filter: none !important;
}

/* Mantém profundidade sem blur/backdrop pesado. */
.glass,
.glass-panel,
.command-panel,
.project-card,
.erp-case,
.track-case,
.emissor-case,
.luzzie-case,
.shalom-case,
.carlito-case,
.case-showcase,
.floating-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Imagens não viram camadas GPU até a interação. */
.project-card img,
.erp-case img,
.track-case img,
.emissor-case img,
.luzzie-case img,
.carlito-case img,
.shalom-case img {
    will-change: auto !important;
}
.motion-active .project-card:hover img,
.motion-active .erp-case:hover img,
.motion-active .track-case:hover img,
.motion-active .emissor-case:hover img,
.motion-active .luzzie-case:hover img,
.motion-active .shalom-case:hover img,
.motion-active .carlito-case:hover img {
    will-change: transform;
}

/* Reduz sombras múltiplas caras mantendo o mesmo contraste visual. */
.project-card,
.erp-case,
.track-case,
.emissor-case,
.luzzie-case,
.shalom-case,
.carlito-case {
    box-shadow: 0 20px 55px rgba(0,0,0,.36) !important;
}

/* Desliga scanlines e brilhos contínuos em telas pequenas ou notebook modesto. */
@media (max-width: 1180px) {
    .emissor-screen-scan,
    .shalom-scan,
    .carlito-scan,
    .luzzie-shine,
    .track-radar,
    .track-route-pulse,
    .erp-data-pulse,
    .command-scanline,
    .hud-scan {
        display: none !important;
    }

    .gradient-orb {
        animation: none !important;
        transform: none !important;
    }

    .floating-card,
    .feature-card,
    .service-card,
    .case-card {
        transform: none !important;
    }
}

/* Em celulares, somente animações de entrada; nada fica rodando para sempre. */
@media (max-width: 760px) {
    * {
        scroll-behavior: auto !important;
    }

    main section *,
    body > section * {
        animation-iteration-count: 1 !important;
    }

    .pipeline-pulse,
    .flow-pulse,
    .status-pulse,
    .live-dot,
    .particle,
    .circuit-pulse {
        animation: none !important;
    }
}

.financeiro-antunes-upgrade{margin-top:16px;padding:14px;border:1px solid rgba(90,200,120,.35);border-radius:14px;background:linear-gradient(180deg,rgba(16,40,24,.5),rgba(10,18,12,.4))}
.financeiro-antunes-upgrade h4{color:#8ef0a5;margin:0 0 8px}
.financeiro-antunes-upgrade ul{margin:0;padding-left:18px}


/* Financeiro Antunes premium */
.financeiro-antunes-upgrade{margin:14px 0;padding:14px;border:1px solid rgba(61,179,93,.25);background:linear-gradient(180deg,rgba(12,34,22,.7),rgba(8,18,14,.5));border-radius:14px}
.financeiro-antunes-upgrade h4{margin:0 0 8px;color:#66d98a}
.financeiro-antunes-upgrade ul{margin:0;padding-left:18px;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.financeiro-case-visual{display:grid;grid-template-columns:2fr 1fr;gap:10px;margin-top:16px}
.financeiro-screen{border:1px solid rgba(90,210,120,.2);border-radius:14px;background:#0b1110;padding:10px;color:#8fe8aa;min-height:110px;position:relative;overflow:hidden}
.financeiro-screen::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(86,217,120,.06));pointer-events:none}
.financeiro-flow{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;font-size:.75rem}
.financeiro-flow span{padding:6px 10px;border-radius:999px;background:rgba(86,217,120,.12);border:1px solid rgba(86,217,120,.25)}


/* =========================================================
   CASE — FINANCEIRO ANTUNES
   ========================================================= */
.financeiro-antunes-case{
    --fin-blue:#2f6df6;
    --fin-green:#16a764;
    --fin-ink:#0e1626;
    position:relative;
    grid-column:1/-1;
    display:grid;
    grid-template-columns:minmax(340px,.92fr) minmax(520px,1.28fr);
    min-height:700px;
    overflow:hidden;
    border:1px solid rgba(55,113,246,.26);
    background:
        radial-gradient(circle at 12% 88%,rgba(22,167,100,.12),transparent 36%),
        radial-gradient(circle at 90% 8%,rgba(47,109,246,.16),transparent 40%),
        linear-gradient(135deg,#08101d 0%,#0c1525 52%,#09111e 100%);
    box-shadow:0 22px 60px rgba(0,0,0,.36);
}
.financeiro-antunes-case::before{
    content:"";position:absolute;inset:0;pointer-events:none;opacity:.2;
    background-image:linear-gradient(rgba(91,136,230,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(91,136,230,.16) 1px,transparent 1px);
    background-size:34px 34px;
    mask-image:linear-gradient(90deg,#000,transparent 72%);
}
.financeiro-antunes-copy{position:relative;z-index:2;padding:54px 42px 48px;display:flex;flex-direction:column;justify-content:center}
.financeiro-antunes-tag{color:#78a6ff!important;border-color:rgba(67,129,255,.48)!important;background:rgba(47,109,246,.1)!important}
.financeiro-antunes-status{display:inline-flex;align-items:center;gap:8px;color:#62dfa0;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.11em}
.financeiro-antunes-status i{width:8px;height:8px;border-radius:50%;background:#32d57e;box-shadow:0 0 14px rgba(50,213,126,.85);animation:finPulse 2.8s ease-in-out infinite}
@keyframes finPulse{50%{opacity:.55;transform:scale(.82)}}
.financeiro-antunes-case .case-eyebrow{color:#5ee39f;margin-bottom:10px}
.financeiro-antunes-case h3{font-size:clamp(2.8rem,5vw,5.4rem);line-height:.94;letter-spacing:-.055em;margin:0 0 22px;color:#fff}
.financeiro-antunes-lead{max-width:620px;color:rgba(232,239,250,.72);font-size:1.04rem;line-height:1.75;margin-bottom:26px}
.financeiro-antunes-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:8px 0 25px}
.financeiro-antunes-metrics>div{padding:16px;border:1px solid rgba(88,139,255,.2);border-radius:14px;background:rgba(255,255,255,.035)}
.financeiro-antunes-metrics strong{display:block;color:#fff;font-size:1.28rem;margin-bottom:4px}.financeiro-antunes-metrics span{font-size:.7rem;color:rgba(223,232,245,.48);text-transform:uppercase;letter-spacing:.08em}
.financeiro-antunes-features{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;margin:0 0 22px;padding:0;list-style:none}
.financeiro-antunes-features li{position:relative;padding-left:18px;color:rgba(231,238,248,.72);font-size:.83rem;line-height:1.45}
.financeiro-antunes-features li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;border:1px solid #4f88ff;transform:rotate(45deg);box-shadow:0 0 8px rgba(79,136,255,.55)}
.financeiro-antunes-stack span{color:#69a0ff!important;border-color:rgba(65,128,255,.34)!important;background:rgba(47,109,246,.08)!important}
.financeiro-antunes-cta{display:inline-flex;align-items:center;gap:14px;width:max-content;margin-top:14px;padding:15px 20px;border:1px solid rgba(78,139,255,.5);border-radius:12px;color:#dce8ff;text-decoration:none;font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;background:linear-gradient(135deg,rgba(47,109,246,.15),rgba(22,167,100,.08));transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.financeiro-antunes-cta:hover{transform:translateY(-2px);border-color:#63a0ff;box-shadow:0 10px 28px rgba(47,109,246,.18)}
.financeiro-antunes-cta svg{width:18px;fill:none;stroke:currentColor;stroke-width:1.8}
.financeiro-antunes-showcase{position:relative;min-height:700px;padding:54px 36px 72px 8px}
.financeiro-antunes-glow{position:absolute;width:520px;height:520px;right:-100px;top:20px;border-radius:50%;background:radial-gradient(circle,rgba(47,109,246,.18),transparent 68%);pointer-events:none}
.financeiro-antunes-screen{position:absolute;overflow:hidden;border:1px solid rgba(66,126,247,.34);border-radius:15px;background:#eef3fb;box-shadow:0 25px 60px rgba(0,0,0,.38);transition:transform .55s cubic-bezier(.2,.8,.2,1),border-color .35s ease}
.financeiro-antunes-screen-main{left:3%;right:5%;top:78px;height:430px;transform:perspective(1200px) rotateY(-2deg)}
.financeiro-antunes-screen-small{width:42%;height:210px;bottom:62px}.financeiro-antunes-screen-loans{left:0}.financeiro-antunes-screen-charges{right:0}
.financeiro-antunes-screen-top{height:30px;display:flex;align-items:center;gap:6px;padding:0 11px;background:#111b2c;border-bottom:1px solid rgba(78,137,255,.24)}
.financeiro-antunes-screen-top span{width:7px;height:7px;border-radius:50%;background:#ff625f}.financeiro-antunes-screen-top span:nth-child(2){background:#ffbe36}.financeiro-antunes-screen-top span:nth-child(3){background:#35cf7c}.financeiro-antunes-screen-top small{margin-left:auto;color:rgba(224,233,247,.42);font-size:.58rem;text-transform:uppercase;letter-spacing:.11em}
.financeiro-antunes-screen img{width:100%;height:calc(100% - 30px);object-fit:cover;object-position:top left;display:block;filter:saturate(.9) contrast(1.02) brightness(.88);transition:transform .55s ease,filter .35s ease}
.financeiro-antunes-case:hover .financeiro-antunes-screen-main{transform:perspective(1200px) rotateY(0) translateY(-4px)}
.financeiro-antunes-case:hover .financeiro-antunes-screen img{filter:saturate(1) contrast(1.03) brightness(.98)}
.financeiro-antunes-case:hover .financeiro-antunes-screen-small img{transform:scale(1.025)}
.financeiro-antunes-flow{position:absolute;left:7%;right:7%;bottom:20px;display:flex;align-items:center;justify-content:center;gap:8px;color:rgba(139,178,255,.58);font-size:.58rem;text-transform:uppercase;letter-spacing:.1em}
.financeiro-antunes-flow i{height:1px;flex:1;background:linear-gradient(90deg,transparent,#3979ff,#32c681,transparent);background-size:200% 100%;animation:finFlow 5.5s linear infinite}
@keyframes finFlow{to{background-position:-200% 0}}
.financeiro-antunes-demo-note{position:absolute;right:36px;bottom:10px;color:rgba(219,229,244,.28);font-size:.56rem;text-transform:uppercase;letter-spacing:.12em}
@media(max-width:1050px){.financeiro-antunes-case{grid-template-columns:1fr}.financeiro-antunes-showcase{min-height:620px;padding-left:36px}.financeiro-antunes-copy{padding-bottom:12px}}
@media(max-width:700px){.financeiro-antunes-copy{padding:38px 24px 8px}.financeiro-antunes-features{grid-template-columns:1fr}.financeiro-antunes-metrics{grid-template-columns:1fr}.financeiro-antunes-showcase{min-height:470px;padding:26px 20px 60px}.financeiro-antunes-screen-main{left:20px;right:20px;top:24px;height:280px}.financeiro-antunes-screen-small{width:45%;height:145px;bottom:54px}.financeiro-antunes-screen-loans{left:20px}.financeiro-antunes-screen-charges{right:20px}.financeiro-antunes-flow{display:none}.financeiro-antunes-case h3{font-size:3rem}}
@media(prefers-reduced-motion:reduce){.financeiro-antunes-status i,.financeiro-antunes-flow i{animation:none!important}.financeiro-antunes-screen,.financeiro-antunes-screen img{transition:none!important}}

/* ============================================
   404 — ERROR PAGE
   ============================================ */
.error-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.error-shell {
    position: relative;
    max-width: 560px;
    padding: 40px;
    text-align: center;
    z-index: 1;
}

.error-grid {
    position: fixed;
    inset: 0;
    z-index: -2;
    background-image:
        linear-gradient(rgba(200, 168, 78, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(200, 168, 78, .05) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(circle at center, #000, transparent 72%);
    -webkit-mask-image: radial-gradient(circle at center, #000, transparent 72%);
}

.error-glow {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: radial-gradient(circle at 50% 40%, rgba(200, 168, 78, .08), transparent 45%);
}

.error-logo {
    width: 140px;
    height: auto;
    margin-bottom: 28px;
    filter: drop-shadow(0 0 18px rgba(200, 168, 78, .4));
    animation: bootPulse 3s ease-in-out infinite;
}

.error-code {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(64px, 12vw, 108px);
    font-weight: 700;
    line-height: 1;
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 20px;
}

.error-code-broken {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.error-break {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 130%;
    height: auto;
    transform: translate(-50%, -50%);
    color: var(--gold);
    pointer-events: none;
}

.error-spark {
    animation: errorSpark 1.6s ease-in-out infinite;
}

@keyframes errorSpark {
    0%, 100% { opacity: 0.3; r: 3; }
    50% { opacity: 1; r: 5; }
}

.error-shell h1 {
    font-size: clamp(22px, 3vw, 28px);
    font-weight: 800;
    letter-spacing: -0.01em;
    margin-bottom: 12px;
    color: var(--text);
}

.error-shell p {
    color: var(--text-muted);
    font-size: 15px;
    margin-bottom: 32px;
}

.error-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 28px;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--text-dim);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.error-status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 8px rgba(74, 222, 128, .9);
    animation: processStatusBlink 2.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .error-logo, .error-spark { animation: none !important; }
}

/* ============================================
   ACCESSIBILITY — skip link + keyboard focus
   ============================================ */
.skip-link {
    position: absolute;
    top: -60px;
    left: 16px;
    z-index: 10001;
    padding: 12px 20px;
    background: var(--gold);
    color: #0a0a0a;
    font-weight: 700;
    font-size: 14px;
    border-radius: 8px;
    text-decoration: none;
    transition: top 0.25s ease;
}

.skip-link:focus {
    top: 16px;
}

a:focus-visible,
button:focus-visible,
.floating-card:focus-visible,
.tech-item:focus-visible,
input:focus-visible {
    outline: 2px solid var(--gold-light);
    outline-offset: 3px;
    border-radius: 4px;
}

.nav-links a:focus-visible,
.footer-nav a:focus-visible {
    outline-offset: 4px;
}