/* =========================================
   VARIABLES & THEME
   ========================================= */
:root {
    --color-bg: #050608;
    /* Near-black base */
    --color-text: #e5e5e5;
    --color-text-muted: #a3a3a3;
    --color-primary: #ffffff;
    --color-accent: #2fe27a;
    /* Light green */
    --color-accent-2: #0f9f57;
    /* Deep green */
    --color-accent-rgb: 47, 226, 122;
    --color-accent-2-rgb: 15, 159, 87;

    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;

    --container-width: 1200px;
    --header-height: 80px;
}

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

html {
    scroll-behavior: smooth;
    font-family: var(--font-sans);
    background-color: #050608;
    color: var(--color-text);
    line-height: 1.5;
}

body {
    background-color: #050608;
}

body {
    overflow-x: hidden;
    min-height: 100vh;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

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

/* =========================================
   UTILITIES (Tailwind-like polyfill for used classes)
   ========================================= */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

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

.justify-between {
    justify-content: space-between;
}

.gap-4 {
    gap: 1rem;
}

.gap-6 {
    gap: 1.5rem;
}

/* Grid Utilities */
.grid {
    display: grid;
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.gap-12 {
    gap: 3rem;
}

.gap-16 {
    gap: 4rem;
}

@media (min-width: 768px) {
    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.gap-8 {
    gap: 2rem;
}

.gap-12 {
    gap: 3rem;
}

.grid {
    display: grid;
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 768px) {
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .md\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .md\:flex {
        display: flex;
    }

    .md\:hidden {
        display: none;
    }

    .md\:px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .md\:py-20 {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }

    .md\:text-5xl {
        font-size: 3rem;
    }

    .md\:text-7xl {
        font-size: 4.5rem;
    }

    .md\:text-left {
        text-align: left;
    }

    .md\:inline-flex {
        display: inline-flex;
    }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .lg\:text-8xl {
        font-size: 6rem;
    }
}

.hidden {
    display: none;
}

.block {
    display: block;
}

.w-full {
    width: 100%;
}

.h-full {
    height: 100%;
}

.min-h-screen {
    min-height: 100vh;
}

.h-10 {
    height: 2.5rem;
}

.w-auto {
    width: auto;
}

.w-5 {
    width: 1.25rem;
}

.h-5 {
    height: 1.25rem;
}

.w-6 {
    width: 1.5rem;
}

.h-6 {
    height: 1.5rem;
}

.w-7 {
    width: 1.75rem;
}

.h-7 {
    height: 1.75rem;
}

.w-8 {
    width: 2rem;
}

.h-8 {
    height: 2rem;
}

.w-25px {
    width: 25px;
}

.h-25px {
    height: 25px;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

.inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.z-0 {
    z-index: 0;
}

.z-10 {
    z-index: 10;
}

.z-40 {
    z-index: 40;
}

.z-50 {
    z-index: 50;
}

.bg-black {
    background-color: #000;
}

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

.bg-white {
    background-color: #fff;
}

.bg-white\/5 {
    background-color: rgba(255, 255, 255, 0.05);
}

.bg-white\/10 {
    background-color: rgba(255, 255, 255, 0.1);
}

.bg-blue-500\/10 {
    background-color: rgba(var(--color-accent-2-rgb), 0.12);
}

.bg-purple-500\/10 {
    background-color: rgba(var(--color-accent-rgb), 0.12);
}

.bg-transparent {
    background-color: transparent;
}

.text-white {
    color: #fff;
}

.text-gray-300 {
    color: #d1d5db;
}

.text-gray-400 {
    color: #9ca3af;
}

.text-gray-500 {
    color: #6b7280;
}

.text-black {
    color: #000;
}

.text-purple-300 {
    color: var(--color-accent);
}

.text-blue-400 {
    color: var(--color-accent-2);
}

.text-purple-400 {
    color: var(--color-accent);
}

.text-green-400 {
    color: #4ade80;
}

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

.font-bold {
    font-weight: 700;
}

.font-black {
    font-weight: 900;
}

.font-semibold {
    font-weight: 600;
}

.font-medium {
    font-weight: 500;
}

.tracking-tighter {
    letter-spacing: -0.05em;
}

.py-24 {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.p-6 {
    padding: 1.5rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.mb-6 {
    margin-bottom: 1.5rem;
}

.mb-12 {
    margin-bottom: 3rem;
}

.rounded-lg {
    border-radius: 0.5rem;
}

.rounded-2xl {
    border-radius: 1rem;
}

.rounded-full {
    border-radius: 9999px;
}

.border {
    border-width: 1px;
}

.border-t {
    border-top-width: 1px;
}

.border-b {
    border-bottom-width: 1px;
}

.border-white\/10 {
    border-color: rgba(255, 255, 255, 0.1);
}

.border-white\/20 {
    border-color: rgba(255, 255, 255, 0.2);
}

.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.duration-300 {
    transition-duration: 300ms;
}

.hover\:opacity-80:hover {
    opacity: 0.8;
}

.hover\:text-white:hover {
    color: #fff;
}

.hover\:bg-white:hover {
    background-color: #fff;
}

.hover\:bg-white\/5:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.hover\:bg-white\/10:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.group:hover .hover\:-translate-y-1 {
    transform: translateY(-0.25rem);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Gradients */
.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.bg-gradient-to-b {
    background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}

.from-blue-400 {
    --tw-gradient-from: var(--color-accent);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(var(--color-accent-rgb), 0));
}

.from-transparent {
    --tw-gradient-from: transparent;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0, 0, 0, 0));
}

.to-purple-500 {
    --tw-gradient-to: var(--color-accent-2);
}

.to-black {
    --tw-gradient-to: #000;
}

.bg-clip-text {
    -webkit-background-clip: text;
    background-clip: text;
}

.text-transparent {
    color: transparent;
}

/* =========================================
   COMPONENTS
   ========================================= */

/* Hero */
#hero {
    overflow: hidden;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.animate-fade-in-up {
    animation: fadeIn 0.8s ease-out forwards;
    opacity: 0;
}

.delay-100 {
    animation-delay: 0.1s;
}

.delay-200 {
    animation-delay: 0.2s;
}

.delay-300 {
    animation-delay: 0.3s;
}

/* Mobile Menu */
#mobile-menu {
    transition: opacity 0.3s ease, visibility 0.3s;
}

#mobile-menu.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    display: flex;
    /* Override display:none from .hidden class to allow transitions, handled by opacity */
}

#mobile-menu:not(.hidden) {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* =========================================
   PARALLAX OPTIMIZATIONS
   ========================================= */
@media (prefers-reduced-motion: reduce) {

    *,
    ::before,
    ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .parallax-layer {
        transform: none !important;
    }
}

/* =========================================
   HERO (ZOOM PIN)
   ========================================= */

.hero-zoom {
    position: relative;
    height: 240vh;
    background: var(--color-bg);
}

.hero-zoom__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.hero-zoom__bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(80% 60% at 50% 40%, rgba(var(--color-accent-rgb), 0.12), transparent 60%),
        radial-gradient(60% 50% at 70% 60%, rgba(var(--color-accent-2-rgb), 0.1), transparent 60%),
        linear-gradient(180deg, #06080f, #050711);
    pointer-events: none;
}

.hero-zoom__content {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 0 1rem;
    max-width: 1100px;
    margin: 0 auto;
}

.hero-zoom__title {
    will-change: transform, opacity;
    transform: translate3d(0, 0, 0) scale(1);
    transform-origin: center center;
    opacity: 1;
    line-height: 1;
    letter-spacing: 0.06em;
}

@media (max-width: 768px) {
    .hero-zoom {
        height: 200vh;
    }

    .hero-zoom__bg {
        background:
            radial-gradient(80% 60% at 50% 40%, rgba(var(--color-accent-rgb), 0.08), transparent 60%),
            radial-gradient(60% 50% at 70% 60%, rgba(var(--color-accent-2-rgb), 0.08), transparent 60%),
            linear-gradient(180deg, #06080f, #050711);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-zoom {
        height: auto;
    }

    .hero-zoom__sticky {
        position: relative;
        height: auto;
        padding: 5rem 0;
    }

    .hero-zoom__title {
        transform: none !important;
        opacity: 1 !important;
    }
}

/* New Palette Utilities (Using CSS Vars) */
.text-accent {
    color: var(--color-accent);
}

.text-accent-2 {
    color: var(--color-accent-2);
}

.bg-accent-low {
    background-color: rgba(var(--color-accent-rgb), 0.1);
}

/* Pink low opacity */
.bg-accent-2-low {
    background-color: rgba(var(--color-accent-2-rgb), 0.1);
}

/* Purple low opacity */
.to-accent {
    --tw-gradient-to: var(--color-accent);
}

.from-accent-2 {
    --tw-gradient-from: var(--color-accent-2);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0));
}

.shadow-accent {
    box-shadow: 0 0 20px rgba(var(--color-accent-rgb), 0.3);
}


.hero-zoom__bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(80% 60% at 50% 40%, rgba(var(--color-accent-rgb), 0.12), transparent 60%),
        radial-gradient(60% 50% at 70% 60%, rgba(var(--color-accent-2-rgb), 0.1), transparent 60%),
        linear-gradient(180deg, #06080f, #050711);
    pointer-events: none;
}

.hero-zoom__content {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 0 1rem;
    max-width: 1100px;
    margin: 0 auto;
}

.hero-zoom__title {
    will-change: transform, opacity;
    transform: translate3d(0, 0, 0) scale(1);
    transform-origin: center center;
    opacity: 1;
    line-height: 1;
    letter-spacing: 0.06em;
}

@media (max-width: 768px) {
    .hero-zoom {
        height: 200vh;
    }

    .hero-zoom__bg {
        background:
            radial-gradient(80% 60% at 50% 40%, rgba(var(--color-accent-rgb), 0.08), transparent 60%),
            radial-gradient(60% 50% at 70% 60%, rgba(var(--color-accent-2-rgb), 0.08), transparent 60%),
            linear-gradient(180deg, #06080f, #050711);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-zoom {
        height: auto;
    }

    .hero-zoom__sticky {
        position: relative;
        height: auto;
        padding: 5rem 0;
    }

    .hero-zoom__title {
        transform: none !important;
        opacity: 1 !important;
    }
}

/* New Palette Utilities (Using CSS Vars) */
.text-accent {
    color: var(--color-accent);
}

.text-accent-2 {
    color: var(--color-accent-2);
}

.bg-accent-low {
    background-color: rgba(var(--color-accent-rgb), 0.1);
}

/* Pink low opacity */
.bg-accent-2-low {
    background-color: rgba(var(--color-accent-2-rgb), 0.1);
}

/* Purple low opacity */
.to-accent {
    --tw-gradient-to: var(--color-accent);
}

.from-accent-2 {
    --tw-gradient-from: var(--color-accent-2);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0));
}

.shadow-accent {
    box-shadow: 0 0 20px rgba(var(--color-accent-rgb), 0.3);
}

.shadow-accent-hover:hover {
    box-shadow: 0 0 30px rgba(var(--color-accent-rgb), 0.5);
}

/* =========================================
   PROOF POINTS & ENGINEERING SECTION
   ========================================= */

/* =========================================
   LAYOUT FIXES &  SECTIONS
   ========================================= */

/* Ensure content after Hero sits on top and has background */
.trust-logos,
#proof-points,
#engineering-proof,
#produtos,
#beneficios,
#app-mobile,
#faq,
footer {
    position: relative;
    z-index: 10;
    background-color: var(--color-bg);
    /* Ensure solid background to cover fixed hero */
}

.trust-logos {
    padding-top: 4rem;
    padding-bottom: 4rem;
    background: var(--color-bg);
}

/* PROOF STATS */
/* PROOF STATS */
#proof-points {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: #080b10;
}

.stat-icon svg {
    width: 3rem;
    /* w-12 */
    height: 3rem;
    /* h-12 */
    margin: 0 auto;
    /* mx-auto */
    display: block;
    margin-bottom: 1rem;
    /* mb-4 */
    opacity: 0.8;
}

/* Icon Colors */
.text-blue-500 {
    color: #3b82f6;
}

.text-green-500 {
    color: #22c55e;
}

.text-purple-500 {
    color: #a855f7;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
    /* Prevent edge touching */
}

.stat-value {
    font-size: 2rem;
    /* Reduced from 3.5rem to fit text */
    font-weight: 800;
    line-height: 1.2;
    color: #fff;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.1);
    margin-bottom: 0.75rem;
    text-align: center;
}

.stat-label {
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: none;
    /* Removed uppercase for better readability of long text */
    letter-spacing: normal;
    color: #9ca3af;
    text-align: center;
    line-height: 1.5;
    max-width: 300px;
    /* Constrain width for better reading */
}

/* Responsive */
@media (min-width: 768px) {
    .stat-value {
        font-size: 2.5rem;
        /* Reduced from 4.5rem */
    }
}

/* ENGINEERING PROOF SECTION */
#engineering-proof {
    background-color: #050608;
    padding-top: 8rem;
    padding-bottom: 8rem;
}

/* Dedicated Grid for Stability */
.engineering-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}

@media (min-width: 850px) {

    /* Triggers earlier to ensure side-by-side on most laptops/tablets */
    .engineering-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }
}

/* Left Column Typography (Reference Style) */
#engineering-proof h2 {
    font-size: 3.5rem;
    /* Large title */
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
}

#engineering-proof p {
    font-size: 1.125rem;
    line-height: 1.6;
    color: #a3a3a3;
    /* Muted text */
    max-width: 540px;
    margin-bottom: 2.5rem;
}

/* CTA Button (matches reference "Discutir Projeto" style) */
.btn-primary-glow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2.5rem;
    background-color: #2563eb;
    /* Blue */
    color: #fff;
    font-weight: 600;
    border-radius: 9999px;
    /* Pill shape */
    transition: all 0.3s ease;
    box-shadow: 0 4px 14px 0 rgba(37, 99, 235, 0.39);
}

.btn-primary-glow:hover {
    background-color: #1d4ed8;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.23);
}

/* CODE PANEL (macOS Style) */
.code-window {
    background: #080a0f;
    /* Very dark background */
    border-radius: 12px;
    box-shadow:
        0 50px 100px -20px rgba(0, 0, 0, 0.7),
        0 30px 60px -30px rgba(0, 0, 0, 0.8),
        0 0 0 1px rgba(255, 255, 255, 0.05);
    /* Subtle border */
    font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
    overflow: hidden;
    position: relative;
}

.window-header {
    background: #080a0f;
    /* Same as body, seamless */
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.window-dots {
    display: flex;
    gap: 8px;
}

.window-dots span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.window-dots .red {
    background-color: #ff5f56;
}

.window-dots .yellow {
    background-color: #ffbd2e;
}

.window-dots .green {
    background-color: #27c93f;
}

.window-title {
    margin-left: auto;
    margin-right: auto;
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.8rem;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    transform: translateX(-26px);
    /* Center visually correcting for dots */
}

.window-body {
    padding: 1.5rem;
    color: #e6edf3;
    font-size: 0.9rem;
    line-height: 1.6;
    overflow-x: auto;
}

.window-body pre {
    margin: 0;
}

.window-body code {
    display: block;
    font-family: inherit;
}

/* Syntax Highlighting - Matching Reference (Pink/Purple/Blue) */
.tok-cmt {
    color: #6a737d;
    font-style: italic;
}

.tok-key {
    color: #ff7b72;
}

/* Pink/Red for keywords (public, function, return) */
.tok-fn {
    color: #d2a8ff;
}

/* Purple/Lilac for functions */
.tok-type {
    color: #79c0ff;
}

/* Blue for types */
.tok-var {
    color: #e6edf3;
}

/* White for variables */
.tok-str {
    color: #a5d6ff;
}

/* Light blue for strings */
.tok-num {
    color: #79c0ff;
}

.tok-prop {
    color: #d2a8ff;
}

/* Properties */

/* Responsive Adjustments */
@media (max-width: 1024px) {
    #engineering-proof .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    #engineering-proof h2 {
        font-size: 2.5rem;
    }

    .code-window {
        margin-top: 2rem;
    }
}

@media (max-width: 768px) {
    .trust-logos {
        padding-top: 2rem;
    }

    #proof-points {
        display: none;
        /* Hide bubbles on mobile if too cluttered, or stack them */
    }

    #engineering-proof h2 {
        font-size: 2rem;
        text-align: center;
    }

    #engineering-proof p {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .btn-primary-glow {
        width: 100%;
    }

    #engineering-proof .grid {
        display: flex;
        flex-direction: column;
    }

    .window-body {
        font-size: 0.75rem;
        /* Smaller code on mobile */
    }
}

.text-shadow-accent {
    text-shadow: 0 0 40px rgba(var(--color-accent-rgb), 0.3);
}

/* =========================================
   GSAP HERO STYLES (ZOOM CLIP-PATH)
   ========================================= */

html,
body {
    margin: 0;
    height: 100%;
    /* background: #06080f;  Matches user request but we have var(--color-bg) which is #0e1938. 
     User asked for #06080f in the snippet. I will prioritize the snippet color for body if acceptable, 
     or just let the hero section handle its background. 
     The snippet sets html, body background. I'll just add the hero specific styles to avoid breaking other pages globally if possible,
     but the requested snippet set global body background. I will set it generally but respect existing vars if needed.
     Actually, let's stick to the snippet for exact reproduction. */
    background: #050608;
    color: #fff;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.hero-clip {
    width: 100%;
    height: 100vh;
    min-height: 100svh;
    position: relative;
    overflow: hidden;
    background-color: #050608;
    z-index: 1;
}

.hero-clip__pin {
    width: 100%;
    height: 100vh;
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.hero-clip__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

#clip-strex {
    transform-box: fill-box;
    transform-origin: center;
    will-change: transform;
}

.hero-clip__content {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 1rem;
    max-width: 900px;
    text-shadow: 0 0 20px rgba(0, 0, 0, 1);
}

.hero-clip__eyebrow {
    font-size: clamp(20px, 3vw, 36px);
    letter-spacing: 0.4em;
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
}

.hero-clip__tagline {
    margin: 16px 0 0;
    font-size: clamp(16px, 1.8vw, 20px);
    opacity: 0.9;
    color: #ffffff;
}

.actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 22px;
    flex-wrap: wrap;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border-radius: 12px;
    text-decoration: none;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(6px);
}

.btn.primary {
    border-color: rgba(0, 255, 150, 0.35);
    box-shadow: 0 0 26px rgba(0, 255, 150, 0.18);
    background: transparent;
    /* Fix for button style */
}

.btn.ghost {
    background: rgba(255, 255, 255, 0.04);
}

.panel.next {
    padding: 80px 20px;
    background: #080a0f;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.panel.next h2 {
    margin: 0 0 10px;
    font-size: 36px;
}

.spacer {
    height: 120vh;
}

/* Acessibilidade: reduz movimento */
@media (prefers-reduced-motion: reduce) {
    #logoPath {
        transform: none !important;
    }
}

/* =========================================
   GSAP HERO ZOOM IMPLEMENTATION (GTA VI STYLE)
   ========================================= */

.hero-pinned {
    width: 100%;
    height: 100vh;
    position: relative;
    /* ScrollTrigger will handle the pinning (position: fixed during pin) */
    overflow: hidden;
    z-index: 10;
}

/* 
  BACKGROUND LAYER (REVEALED CONTENT)
  This sits BEHIND the mask. 
*/

.hero-content-reveal {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: radial-gradient(circle at center, #1a2c5e 0%, #000000 100%);
}

.hero-content-reveal::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 180px);
    background-size: 140px 140px, 140px 140px, 180px 100%;
    background-position: 0 0, 0 0, 0 0;
    background-repeat: repeat;
    opacity: 0.4;
    filter: blur(0.4px);
    pointer-events: none;
    animation: heroLinesShift 48s linear infinite;
}

.hero-reveal-bg {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(at 20% 30%, rgba(47, 226, 122, 0.2) 0px, transparent 50%),
        radial-gradient(at 80% 80%, rgba(15, 159, 87, 0.2) 0px, transparent 50%);
    filter: blur(60px);
}

.hero-reveal-text {
    position: relative;
    z-index: 2;
    text-align: center;
    opacity: 0;
    /* Starts hidden, fades in nicely during zoom if we want */
    transform: scale(0.8);
    padding: 0 clamp(16px, 5vw, 48px);
}

.hero-reveal-text h2 {
    font-size: clamp(2.75rem, 5vw, 4rem);
    font-weight: 900;
    margin-bottom: 1rem;
    background: linear-gradient(to right, #fff, #aadaff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.scroll-indicator {
    margin-top: clamp(1rem, 3vw, 1.75rem);
    display: flex;
    justify-content: center;
    opacity: 0.8;
}

.scroll-indicator__icon {
    width: 28px;
    height: 28px;
    color: #ffffff;
    animation: scroll-bounce 1.6s ease-in-out infinite;
}

@keyframes scroll-bounce {

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

    50% {
        transform: translateY(8px);
    }
}

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

.hero-content-reveal::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 0),
        radial-gradient(rgba(0, 0, 0, 0.15) 1px, transparent 0);
    background-size: 3px 3px, 5px 5px;
    opacity: 0.35;
    pointer-events: none;
}

@keyframes heroLinesShift {
    from {
        background-position: 0 0, 0 0, 0 0;
    }

    to {
        background-position: 0 0, 0 0, -360px 0;
    }
}

/* 
  MASK LAYER (THE BLACK OVERLAY)
  Sits ON TOP of the revealed content.
  Contains the SVG with the mask.
*/
.hero-mask-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    pointer-events: none;
    /* Let clicks pass through if needed, but we have interactive elements inside */
}

.hero-mask-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 180px);
    background-size: 140px 140px, 140px 140px, 180px 100%;
    background-repeat: repeat;
    opacity: 0.4;
    filter: blur(0.4px);
    mix-blend-mode: screen;
    animation: heroLinesShift 48s linear infinite;
    pointer-events: none;
}

/* Efeito Neon/Spotlight Verde Tech */
.hero-mask-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 10%, rgba(47, 226, 122, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 85% 30%, rgba(47, 226, 122, 0.05) 0%, transparent 30%);
    pointer-events: none;
    z-index: 1;
    /* Acima do grid, abaixo do conteúdo se este tivesse z-index maior, mas ambos estão no overlay */
    mix-blend-mode: screen;
}

/* We need pointer events on the initial content though */
.hero-initial-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
    pointer-events: auto;
    /* Enable buttons */
    width: 100%;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(12px, 2vw, 24px);
    padding: 0 clamp(18px, 4vw, 40px);
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.25rem;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    margin-bottom: 0;
    margin-top: 4rem;
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.hero-eyebrow:hover {
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.hero-initial-content p {
    margin-top: clamp(78px, 25vw, 320px);
    /* Push down below the giant STREX cutout, but let it breathe on small screens/zooms */
    margin-bottom: clamp(16px, 1vw, 32px);
    font-size: clamp(1.05rem, 1.5vw, 1.35rem);
    line-height: 1.6;
    color: #a3a3a3;
    text-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

.hero-initial-content .actions {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(10px, 2vw, 16px);
    justify-content: center;
    margin-top: clamp(8px, 2vw, 16px);
}

.btn {
    padding: 0.75rem 2rem;
    border-radius: 9999px;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
}

.btn.primary {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(47, 226, 122, 0.5);
    color: white;
    backdrop-filter: blur(10px);
}

.btn.primary:hover {
    background: rgba(47, 226, 122, 0.2);
    box-shadow: 0 0 20px rgba(47, 226, 122, 0.4);
}

.btn.ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #a3a3a3;
}

.btn.ghost:hover {
    border-color: white;
    color: white;
}

.hero-initial-content .btn {
    min-width: clamp(160px, 32vw, 210px);
}

.trust-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: clamp(12px, 2vw, 18px);
}

.trust-pills .pill {
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.78);
    background: rgba(255, 255, 255, 0.03);
    font-size: 0.85rem;
    line-height: 1.1;
}

#main-header {
    background: transparent;
    border-bottom: 1px solid transparent;
    backdrop-filter: blur(0px);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    height: 80px;
    display: flex;
    align-items: center;
}

#main-header.header-scrolled {
    background: rgba(6, 8, 15, 0.75);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
    height: 64px;
}

.logo-blend {
    mix-blend-mode: screen;
    filter: brightness(1.1) contrast(1.1);
}

/* Nav Links Refinement */
nav a {
    position: relative;
    opacity: 0.65;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.85rem;
    letter-spacing: 0.05em;
}

nav a:hover {
    opacity: 1;
    color: #fff;
    transform: translateY(-1px);
}

nav a::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    width: 0;
    height: 2px;
    background: #2fe27a;
    transition: all 0.3s ease;
    transform: translateX(-50%);
    border-radius: 999px;
    box-shadow: 0 0 12px rgba(47, 226, 122, 0.6);
}

nav a:hover::after {
    width: 60%;
}

/* Header Social Icons Refinement */
.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.social-icon:hover {
    background: rgba(47, 226, 122, 0.1);
    border-color: rgba(47, 226, 122, 0.4);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(47, 226, 122, 0.2);
}

.social-icon-svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* Trust Logos */
.trust-logos {
    padding: clamp(2.5rem, 6vw, 4.5rem) 0;
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.trust-logos__rail {
    overflow: hidden;
    position: relative;
}

.trust-logos__header {
    text-align: center;
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.trust-logos__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

.trust-logos__title {
    margin-top: 12px;
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: 700;
    color: #fff;
}

.trust-logos__track {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2vw, 1.75rem);
    flex-wrap: nowrap;
    width: max-content;
    animation: trust-marquee 28s linear infinite;
}

.trust-logos__item {
    flex: 0 0 clamp(140px, 16vw, 200px);
    padding: 14px 18px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 72px;
}

.trust-logos__item img {
    max-height: 42px;
    max-width: 120px;
    filter: grayscale(1) saturate(0.1) brightness(1.1);
    opacity: 0.75;
    transition: filter 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}

.trust-logos__item:hover img {
    filter: grayscale(0.25) saturate(0.3) brightness(1.1);
    opacity: 1;
    transform: translateY(-2px);
}

@keyframes trust-marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

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

/* =========================================
   PRODUCT CARDS - PREMIUM DESIGN
   ========================================= */

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

@media (min-width: 640px) {
    .product-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1100px) {
    .product-cards-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.product-card {
    position: relative;
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.25rem;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

/* Accent glow in top-left corner */
.product-card::before {
    content: '';
    position: absolute;
    top: -40px;
    left: -40px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--card-accent, #818cf8);
    opacity: 0.06;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.product-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5);
}

.product-card:hover::before {
    opacity: 0.12;
}

/* Header: icon + badge row */
.product-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.product-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-card__badge {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    border: 1px solid transparent;
}

/* Name */
.product-card__name {
    font-size: 1.1rem;
    font-weight: 800;
    color: #f5f5f5;
    letter-spacing: -0.01em;
    margin-bottom: 0.5rem;
}

/* Description */
.product-card__desc {
    font-size: 0.8rem;
    color: #6b7280;
    line-height: 1.55;
    margin-bottom: 1.2rem;
}

/* Colored divider line */
.product-card__divider {
    height: 1px;
    width: 100%;
    margin-bottom: 1.2rem;
    border-radius: 1px;
}

/* Benefits list */
.product-card__benefits {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    flex: 1;
    margin-bottom: 1.5rem;
}

.product-card__benefits li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.8rem;
    color: #d1d5db;
    line-height: 1.4;
}

/* CTA button */
.product-card__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.7rem 1.25rem;
    border-radius: 0.75rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--cta-color, #818cf8);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.product-card__cta:hover {
    background: var(--cta-color, #818cf8);
    border-color: var(--cta-color, #818cf8);
    color: #000;
}

/* =========================================
   TECH STACK - SCROLLING PILLS
   ========================================= */

.stack-track-wrapper {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%);
}

.stack-track {
    display: flex;
    gap: 0.75rem;
    width: max-content;
    animation: stack-scroll 30s linear infinite;
}

@keyframes stack-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.stack-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.03);
    font-size: 0.78rem;
    font-weight: 500;
    color: #9ca3af;
    white-space: nowrap;
    transition: border-color 0.25s, color 0.25s;
    user-select: none;
}

.stack-pill:hover {
    border-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.stack-pill__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    opacity: 0.9;
}

/* =========================================
   BONUS CARDS - PREMIUM DESIGN
   ========================================= */

.bonus-cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 700px) {
    .bonus-cards-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.bonus-card {
    position: relative;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.015) 100%);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 1.5rem;
    padding: 2rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.bonus-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 30px 50px -15px rgba(0, 0, 0, 0.5);
}

/* Ambient glow circle in corner */
.bonus-card__glow {
    position: absolute;
    top: -60px;
    right: -60px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: var(--bonus-color, #818cf8);
    opacity: 0.05;
    transition: opacity 0.35s;
    pointer-events: none;
}

.bonus-card:hover .bonus-card__glow {
    opacity: 0.1;
}

/* Large faded number */
.bonus-card__num {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.15);
}

/* Icon container */
.bonus-card__icon-wrap {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bonus-card__title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #f0f0f0;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.bonus-card__desc {
    font-size: 0.82rem;
    color: #6b7280;
    line-height: 1.6;
    flex: 1;
}

/* Bottom accent bar */
.bonus-card__bar {
    height: 2px;
    border-radius: 2px;
    width: 60%;
    margin-top: 0.5rem;
}

/* =========================================
   APP SECTION - PREMIUM REDESIGN
   ========================================= */

.app-section {
    position: relative;
    overflow: hidden;
    padding: 8rem 0;
    background: linear-gradient(180deg, #06080f 0%, #0b0e1a 50%, #06080f 100%);
}

/* Background ambient glows */
.app-section__bg-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.app-section__bg-glow--left {
    width: 600px;
    height: 600px;
    top: -150px;
    left: -200px;
    background: radial-gradient(circle, rgba(47, 226, 122, 0.05) 0%, transparent 70%);
}

.app-section__bg-glow--right {
    width: 500px;
    height: 500px;
    bottom: -100px;
    right: -150px;
    background: radial-gradient(circle, rgba(129, 140, 248, 0.05) 0%, transparent 70%);
}

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

@media (min-width: 900px) {
    .app-section__grid {
        grid-template-columns: 1fr 1fr;
        gap: 6rem;
    }
}

/* Visual side (phone) */
.app-section__visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.app-section__ring {
    position: absolute;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(47, 226, 122, 0.12) 0%, rgba(47, 226, 122, 0.03) 50%, transparent 70%);
    filter: blur(20px);
    z-index: 0;
}

.app-section__phone {
    position: relative;
    z-index: 1;
    max-width: 380px;
    width: 100%;
    filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.5));
    transition: transform 0.6s ease;
}

.app-section__phone:hover {
    transform: translateY(-10px) scale(1.01);
}

/* Content side */
.app-section__content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Badge */
.app-section__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(47, 226, 122, 0.25);
    background: rgba(47, 226, 122, 0.06);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #2fe27a;
    width: fit-content;
}

.app-section__badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #2fe27a;
    box-shadow: 0 0 6px #2fe27a;
    animation: app-badge-blink 2s ease-in-out infinite;
}

@keyframes app-badge-blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

/* Headline */
.app-section__headline {
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    font-weight: 900;
    color: #f5f5f5;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.app-section__headline-em {
    font-style: normal;
    background: linear-gradient(135deg, #2fe27a 0%, #0f9f57 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Description */
.app-section__desc {
    font-size: 1rem;
    color: #6b7280;
    line-height: 1.65;
    max-width: 480px;
}

/* Feature list */
.app-section__features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.app-section__feature {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: #d1d5db;
    font-weight: 500;
}

.app-section__feature-icon {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: rgba(47, 226, 122, 0.08);
    border: 1px solid rgba(47, 226, 122, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* CTA Button */
.app-section__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 2rem;
    background: #2fe27a;
    color: #000;
    font-weight: 700;
    font-size: 0.9rem;
    border-radius: 0.9rem;
    border: none;
    cursor: pointer;
    text-decoration: none;
    width: fit-content;
    box-shadow: 0 0 30px rgba(47, 226, 122, 0.25), 0 8px 20px rgba(0, 0, 0, 0.3);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.app-section__cta:hover {
    background: #3eeF88;
    transform: translateY(-3px);
    box-shadow: 0 0 45px rgba(47, 226, 122, 0.4), 0 15px 30px rgba(0, 0, 0, 0.4);
}

/* Caption */
.app-section__caption {
    font-size: 0.75rem;
    color: #4b5563;
    margin-top: -0.5rem;
}

/* =========================================
   PROOF CARDS - PREMIUM INFORMATIVE
   ========================================= */

.proof-cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 700px) {
    .proof-cards-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.proof-card {
    position: relative;
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 1.5rem;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.proof-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.6);
}

/* Featured card variation */
.proof-card--featured {
    border-color: rgba(47, 226, 122, 0.15);
    background: linear-gradient(155deg, rgba(47, 226, 122, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
}

.proof-card--featured:hover {
    border-color: rgba(47, 226, 122, 0.28);
}

/* Featured label badge */
.proof-card__featured-label {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #2fe27a;
    background: rgba(47, 226, 122, 0.1);
    border: 1px solid rgba(47, 226, 122, 0.2);
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
}

/* Header row: icon + tag */
.proof-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.proof-card__icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.proof-card__tag {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid transparent;
}

.proof-card__title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #f3f4f6;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.proof-card__desc {
    font-size: 0.81rem;
    color: #6b7280;
    line-height: 1.6;
}

/* Bullet list */
.proof-card__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

.proof-card__list li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.8rem;
    color: #d1d5db;
}

.proof-card__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Bottom metric + progress bar */
.proof-card__metric {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.proof-card__metric-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #9ca3af;
}

.proof-card__metric-row strong {
    font-size: 0.85rem;
    font-weight: 700;
}

.proof-card__bar-bg {
    height: 4px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    overflow: hidden;
}

.proof-card__bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 1s ease;
}