.tilt-3d {
            transform-style: preserve-3d;
            transition: transform .2s ease-out, box-shadow .2s ease-out;
            will-change: transform;
        }
        .tilt-3d::after {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background: radial-gradient(circle at var(--shine-x, 50%) var(--shine-y, 50%), rgba(255,255,255,0.12), transparent 60%);
            opacity: 0;
            transition: opacity .25s ease;
            pointer-events: none;
        }
        .tilt-3d:hover::after { opacity: 1; }

        .role-card { cursor: pointer; }
        .role-card .role-arrow { transition: transform .25s ease; }
        .role-card:hover .role-arrow { transform: translateX(5px); }

        .role-modal-backdrop {
            position: fixed; inset: 0; z-index: 200;
            background: rgba(3,5,10,0.78);
            backdrop-filter: blur(6px);
            display: flex; align-items: center; justify-content: center;
            padding: 20px;
            opacity: 0; visibility: hidden;
            transition: opacity .3s ease, visibility .3s ease;
        }
        .role-modal-backdrop.open { opacity: 1; visibility: visible; }
        .role-modal {
            position: relative;
            width: 100%; max-width: 560px;
            max-height: 85vh; overflow-y: auto;
            background: linear-gradient(160deg, rgba(15,23,42,0.98), rgba(5,7,13,0.98));
            border: 1px solid rgba(148,163,184,0.2);
            border-radius: 24px;
            padding: 34px;
            transform: perspective(1200px) rotateX(10deg) scale(.9);
            opacity: 0;
            transition: transform .4s cubic-bezier(.2,.9,.3,1.2), opacity .3s ease;
        }
        .role-modal-backdrop.open .role-modal {
            transform: perspective(1200px) rotateX(0deg) scale(1);
            opacity: 1;
        }
        .role-modal-close {
            position: absolute; top: 16px; right: 16px;
            width: 36px; height: 36px; border-radius: 50%;
            display: flex; align-items:center; justify-content:center;
            background: rgba(148,163,184,0.08); color:#94a3b8;
            transition: background .2s, color .2s, transform .2s;
        }
        .role-modal-close:hover { background: rgba(239,68,68,.15); color:#f87171; transform: rotate(90deg); }
        .role-modal-icon {
            width: 56px; height:56px; border-radius:16px;
            display:flex; align-items:center; justify-content:center;
            font-size: 1.6rem; margin-bottom: 18px;
        }
        .role-modal-title { font-size:1.5rem; font-weight:800; color:#fff; margin-bottom:8px; }
        .role-modal-desc { color:#94a3b8; font-size:.9rem; line-height:1.6; margin-bottom: 20px; }
        .role-modal-subtitle { color:#e2e8f0; font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700; margin: 18px 0 10px; }
        .role-modal-list { display:flex; flex-direction:column; gap:10px; }
        .role-modal-list li { display:flex; gap:10px; align-items:flex-start; color:#cbd5e1; font-size:.875rem; line-height:1.5; }
        .role-modal-list li i { color: #4ade80; margin-top:3px; flex-shrink:0; }
        .role-modal-tags { display:flex; flex-wrap:wrap; gap:8px; }
        .role-modal-tags span { padding: 6px 12px; border-radius: 999px; background: rgba(148,163,184,0.08); border:1px solid rgba(148,163,184,0.2); font-size:.75rem; color:#cbd5e1; }

        .coverflow-wrap { position: relative; display:flex; align-items:center; gap: 8px; margin-top: 44px; outline: none; }
        .coverflow-stage { position: relative; flex:1; height: 320px; perspective: 1400px; overflow: hidden; cursor: grab; touch-action: pan-y; }
        .coverflow-stage.grabbing { cursor: grabbing; }


        .coverflow-track { position: relative; width:100%; height:100%; transform-style: preserve-3d; z-index:1; will-change: transform; }
        .coverflow-track.dragging-track { transition: none !important; }
        .cf-item {
            position:absolute; top:50%; left:50%;
            width: 190px; height: 250px;
            cursor: pointer;
            transition: transform .6s cubic-bezier(.16,.84,.32,1), opacity .6s ease;
        }
        .cf-item { --cf-accent: #4ade80; }
        .cf-face {
            position:relative; width:100%; height:100%;
            border-radius: 20px;
            display:flex; flex-direction:column; align-items:center; justify-content:center;
            gap: 12px; padding: 20px; text-align:center;
            background: linear-gradient(160deg, rgba(15,23,42,0.92), rgba(5,7,13,0.96));
            border: 1px solid rgba(148,163,184,0.15);
            box-shadow: 0 20px 40px -20px rgba(0,0,0,.6);
            transition: border-color .3s ease, box-shadow .3s ease, transform .15s ease-out;
            transform-style: preserve-3d;
            will-change: transform;
        }
        .cf-icon { font-size: 3.1rem; }
        .cf-name { color:#fff; font-weight:700; font-size:1rem; }
        .cf-tag { font-size:.68rem; color:#64748b; text-transform:uppercase; letter-spacing:.08em; }
        .cf-item.cf-active .cf-face { border-color: var(--cf-accent, #4ade80); box-shadow: 0 20px 50px -15px color-mix(in srgb, var(--cf-accent, #4ade80) 55%, transparent); }
        .cf-item.cf-active .cf-face:hover { box-shadow: 0 24px 55px -12px color-mix(in srgb, var(--cf-accent, #4ade80) 70%, transparent); }
        .cf-hint { font-size:.62rem; color:#475569; margin-top:2px; }

        .cf-nav {
            width: 46px; height: 46px; border-radius:50%; flex-shrink:0;
            display:flex; align-items:center; justify-content:center;
            background: rgba(148,163,184,0.08); border:1px solid rgba(148,163,184,0.2);
            color:#cbd5e1; transition: all .2s ease; z-index:50;
        }
        .cf-nav:hover { background: rgba(74,222,128,.15); color:#4ade80; border-color: rgba(74,222,128,.4); transform: scale(1.08); }

        .cf-footer { display:flex; align-items:center; justify-content:center; gap:18px; margin-top: 26px; }
        .cf-dots { display:flex; align-items:center; gap:9px; }
        .cf-dot {
            width:9px; height:9px; border-radius:50%; padding:0; border:none;
            background: rgba(148,163,184,.3); cursor:pointer;
            transition: transform .3s ease, background .3s ease, width .3s ease;
        }
        .cf-dot:hover { background: rgba(148,163,184,.6); }
        .cf-dot.cf-dot-active { width:24px; border-radius:99px; background: linear-gradient(90deg,#22c55e,#3b82f6); }
        /* Tags com logo dentro do modal de áreas */
        .role-modal-tags span.tag-with-icon { display:inline-flex; align-items:center; gap:6px; }
        .role-modal-tags span.tag-with-icon i { font-size:1rem; }

        @media (max-width: 640px) {
            .coverflow-stage { height: 260px; }
            .cf-item { width: 138px; height: 190px; }
            .cf-icon, .cf-icon-img { font-size: 2.2rem; width: 46px; height: 46px; }
            .cf-nav { width: 38px; height:38px; }
            .cf-dot { width:7px; height:7px; }
            .cf-dot.cf-dot-active { width:20px; }
        }

        .bg-scene {
            position: fixed;
            inset: 0;
            z-index: -2;
            overflow: hidden;
            background:
                radial-gradient(ellipse 900px 600px at 12% -5%, rgba(34,197,94,0.16), transparent 60%),
                radial-gradient(ellipse 800px 700px at 88% 15%, rgba(59,130,246,0.14), transparent 60%),
                radial-gradient(ellipse 700px 600px at 50% 100%, rgba(168,85,247,0.12), transparent 60%),
                #05070d;
        }
        .bg-scene::before {
            content: "";
            position: absolute; inset: 0;
            background-image:
                linear-gradient(rgba(148,163,184,0.05) 1px, transparent 1px),
                linear-gradient(90deg, rgba(148,163,184,0.05) 1px, transparent 1px);
            background-size: 56px 56px;
            mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, black 20%, transparent 80%);
            -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, black 20%, transparent 80%);
        }
        .bg-scene::after {
            content: "";
            position: absolute; inset: 0;
            background: radial-gradient(ellipse 1200px 900px at 50% 0%, transparent 0%, rgba(5,7,13,0.6) 55%, #05070d 100%);
        }
        .bg-orb {
            position: absolute; border-radius: 50%; filter: blur(90px);
            opacity: .32; animation: bgOrbFloat 16s ease-in-out infinite;
        }

        .why-card {
            position: relative;
            isolation: isolate;
        }
        .why-card::before {
            content: "";
            position: absolute; inset: 0; border-radius: inherit; padding: 1px;
            background: linear-gradient(140deg, var(--why-accent, #22c55e), transparent 45%, transparent 65%, var(--why-accent, #22c55e));
            -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            -webkit-mask-composite: xor; mask-composite: exclude;
            opacity: .35; transition: opacity .3s ease; pointer-events: none;
        }
        .why-card:hover::before { opacity: .8; }
        .why-card .why-icon-badge {
            position: relative;
            box-shadow: 0 0 0 1px rgba(255,255,255,0.04) inset, 0 12px 30px -12px var(--why-accent, #22c55e);
        }
        .why-card .why-icon-badge::after {
            content: "";
            position: absolute; inset: -6px; border-radius: inherit;
            background: var(--why-accent, #22c55e);
            filter: blur(14px); opacity: .25; z-index: -1;
            transition: opacity .3s ease;
        }
        .why-card:hover .why-icon-badge::after { opacity: .5; }

        .role-card {
            position: relative; isolation: isolate;
        }
        .role-card::before {
            content: "";
            position: absolute; left:0; top:0; bottom:0; width: 3px; border-radius: 3px;
            background: var(--role-accent, #22c55e);
            opacity: .5; transition: opacity .3s ease, width .3s ease;
        }
        .role-card:hover::before { opacity: 1; width: 4px; }
        .role-card:hover { box-shadow: 0 20px 45px -22px var(--role-accent, #22c55e); }
        .role-card .role-icon-badge {
            position: relative;
            transition: transform .3s ease;
        }
        .role-card:hover .role-icon-badge { transform: scale(1.08) rotate(-4deg); }

        .cf-icon-img {
            width: 64px; height: 64px; object-fit: contain;
            filter: drop-shadow(0 6px 16px rgba(0,0,0,.5));
            transition: transform .3s ease;
        }
        .cf-item.cf-active .cf-icon-img { transform: scale(1.05); }
        .role-modal-icon.tech-icon-wrap { background: rgba(148,163,184,0.08); padding: 8px; }
        .role-modal-icon.tech-icon-wrap img { width: 100%; height: 100%; object-fit: contain; }

        .tech-modal-areas { display:flex; flex-wrap:wrap; gap:8px; margin-top: 6px; }
        .tech-modal-areas span {
            padding: 6px 12px; border-radius: 999px;
            background: rgba(74,222,128,0.08); border:1px solid rgba(74,222,128,0.25);
            font-size:.75rem; color:#86efac; font-weight:600;
        }

          @keyframes coditech-gradient-flow {
            0%   { background-position: 0% 50%; }
            50%  { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .text-gradient-blue {
            background: linear-gradient(90deg, #60a5fa, #3b82f6, #2563eb, #3b82f6, #60a5fa);
            background-size: 300% auto;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: #3b82f6;
            animation: coditech-gradient-flow 5s linear infinite;
        }

        .text-gradient-green {
            background: linear-gradient(90deg, #4ade80, #22c55e, #16a34a, #22c55e, #4ade80);
            background-size: 300% auto;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: #22c55e;
            animation: coditech-gradient-flow 5s linear infinite;
        }

        .menu-link-dynamic {
            position: relative;
            transition: color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .menu-link-dynamic::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -6px;
            width: 100%;
            height: 2px;
            border-radius: 999px;
            background: linear-gradient(90deg, #3b82f6, #22c55e, #3b82f6);
            background-size: 200% auto;
            background-position: 0% 50%;
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), background-position 0.8s ease;
        }
        .menu-link-dynamic:hover {
            color: #4ade80;
        }
        .menu-link-dynamic:hover::after {
            transform: scaleX(1);
            background-position: 100% 50%;
        }

        .btn-dynamic {
            transition: color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease, transform 0.3s ease, box-shadow 0.4s ease;
        }