/* ================= VARIÁVEIS PREMIUM ================= */

        :root {
            --bg-dark: #050505;
            --bg-card: rgba(20, 20, 25, 0.6);
            --border-color: rgba(255, 255, 255, 0.08);
            --text-main: #f5f5f7;
            --text-muted: #a1a1aa;
            --gc-blue: #0077ff;
            --gc-dark-blue: #002266;
            --gc-cyan: #00d4ff;
            --gc-silver: #d1d5db;
            --whatsapp-green: #25D366;
            --glow: 0 0 40px rgba(0, 119, 255, 0.15);
        }


        /* ================= BASE ================= */

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

        html {
            scroll-behavior: smooth;
        }

        body {
            background-color: var(--bg-dark);
            color: var(--text-main);
            font-family: 'Inter', sans-serif;
            overflow-x: hidden;
        }

        h1,
        h2,
        h3,
        h4 {
            font-family: 'Syne', sans-serif;
        }


        /* ================= FUNDO ================= */

        .bg-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: -2;
            overflow: hidden;
            background-color: var(--bg-dark);
        }

        .bg-grid {
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;

            background-image:
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);

            background-size: 50px 50px;
            animation: rotateGrid 120s linear infinite;
        }

        .blob {
            position: absolute;
            filter: blur(90px);
            opacity: 0.5;
            border-radius: 50%;

            animation: floatBlob 20s infinite alternate cubic-bezier(0.45, 0.05, 0.55, 0.95);
        }

        .blob-1 {
            top: -10%;
            left: -10%;
            width: 50vw;
            height: 50vw;

            background: radial-gradient(circle,
                    var(--gc-blue) 0%,
                    transparent 70%);
        }

        .blob-2 {
            bottom: -20%;
            right: -10%;
            width: 60vw;
            height: 60vw;

            background: radial-gradient(circle,
                    var(--gc-dark-blue) 0%,
                    transparent 70%);

            animation-delay: -5s;
        }

        .blob-3 {
            top: 30%;
            left: 40%;
            width: 45vw;
            height: 45vw;

            background: radial-gradient(circle,
                    var(--gc-cyan) 0%,
                    transparent 70%);

            animation-delay: -10s;
            opacity: 0.3;
        }


        /* ================= ANIMAÇÕES FUNDO ================= */

        @keyframes floatBlob {

            0% {
                transform: translate(0, 0) scale(1);
            }

            33% {
                transform: translate(15vw, -15vh) scale(1.2);
            }

            66% {
                transform: translate(-10vw, 20vh) scale(0.9);
            }

            100% {
                transform: translate(5vw, -5vh) scale(1.1);
            }
        }

        @keyframes rotateGrid {

            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }


        /* ================= NAVBAR ================= */

        header {
            position: fixed;
            top: 0;
            width: 100%;

            padding: 20px 5%;

            display: flex;
            justify-content: space-between;
            align-items: center;

            z-index: 1000;

            background: rgba(5, 5, 5, 0.7);
            backdrop-filter: blur(20px);

            border-bottom: 1px solid var(--border-color);

            transition: all 0.3s ease;
        }

        .logo {
            display: flex;
            align-items: center;
            text-decoration: none;
        }

        .logo img {
            height: clamp(40px, 5vw, 55px);
            width: auto;

            mix-blend-mode: lighten;

            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .logo:hover img {
            transform: scale(1.08);

            filter: drop-shadow(0 0 15px rgba(0, 119, 255, 0.5));
        }

        nav ul {
            display: flex;
            gap: 30px;
            list-style: none;
        }

        nav a {
            color: var(--gc-silver);
            text-decoration: none;

            font-size: 0.95rem;
            font-weight: 500;

            transition: color 0.3s ease;

            position: relative;
        }

        nav a:hover {
            color: #fff;
        }

        nav a::after {
            content: '';

            position: absolute;

            width: 0%;
            height: 2px;

            bottom: -5px;
            left: 0;

            background: var(--gc-blue);

            transition: width 0.3s ease;
        }

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

        .mobile-menu-btn {
            display: none;

            font-size: 1.8rem;
            color: white;

            cursor: pointer;

            background: none;
            border: none;
        }


        /* ================= BOTÕES ================= */

        .btn {
            padding: 16px 36px;

            background: linear-gradient(135deg,
                    var(--gc-blue),
                    #0055cc);

            color: white;

            border: none;
            border-radius: 50px;

            font-family: 'Inter', sans-serif;
            font-weight: 600;
            font-size: 1rem;

            text-decoration: none;

            box-shadow:
                0 10px 20px rgba(0, 119, 255, 0.2);

            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

            display: inline-flex;

            align-items: center;
            justify-content: center;

            text-align: center;
        }

        .btn:hover {
            transform: translateY(-5px) scale(1.02);

            box-shadow:
                0 15px 25px rgba(0, 119, 255, 0.4);
        }

        .btn-wpp {
            background: linear-gradient(135deg,
                    #25D366,
                    #128C7E);

            box-shadow:
                0 10px 20px rgba(37, 211, 102, 0.2);

            width: 100%;
            margin-top: 20px;
        }

        .btn-wpp:hover {
            box-shadow:
                0 15px 25px rgba(37, 211, 102, 0.4);
        }

        .btn-outline {
            background: transparent;

            border: 1px solid var(--gc-blue);

            box-shadow: none;
        }

        .btn-outline:hover {
            background: rgba(0, 119, 255, 0.1);
        }


        /* ================= WHATSAPP ================= */

        .float-wpp {
            position: fixed;

            width: 60px;
            height: 60px;

            bottom: 40px;
            right: 40px;

            background-color: var(--whatsapp-green);
            color: #FFF;

            border-radius: 50px;

            text-align: center;
            font-size: 32px;

            box-shadow:
                0 4px 15px rgba(0, 0, 0, 0.3);

            z-index: 1000;

            display: flex;

            align-items: center;
            justify-content: center;

            text-decoration: none;

            transition: all 0.3s ease;

            animation: pulseWpp 2s infinite;
        }

        .float-wpp:hover {
            background-color: #128C7E;
            transform: scale(1.1);
        }

        @keyframes pulseWpp {

            0% {
                box-shadow:
                    0 0 0 0 rgba(37, 211, 102, 0.7);
            }

            70% {
                box-shadow:
                    0 0 0 20px rgba(37, 211, 102, 0);
            }

            100% {
                box-shadow:
                    0 0 0 0 rgba(37, 211, 102, 0);
            }
        }


        /* ================= SEÇÕES ================= */

        section {
            padding: clamp(80px, 10vw, 120px) 5%;

            max-width: 1400px;

            margin: 0 auto;

            position: relative;

            z-index: 2;
        }

        .section-header {
            text-align: center;

            margin-bottom:
                clamp(40px, 6vw, 80px);
        }

        .section-header h2 {
            font-size:
                clamp(2rem, 5vw, 3rem);

            font-weight: 800;

            background:
                linear-gradient(to right,
                    #fff,
                    var(--gc-silver));

            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;

            margin-bottom: 15px;
        }

        .section-header p {
            color: var(--text-muted);

            font-size:
                clamp(1rem, 2vw, 1.1rem);

            max-width: 700px;

            margin: 0 auto;

            line-height: 1.6;
        }


        /* ================= HERO ================= */

        .hero {
            height: 100vh;

            min-height: 600px;

            display: flex;

            align-items: center;
            justify-content: center;

            text-align: center;

            padding-top: 80px;

            position: relative;
        }

        .hero-content {
            max-width: 900px;

            z-index: 2;

            padding: 0 15px;
        }

        .hero h1 {
            font-size:
                clamp(2.5rem, 6vw + 1rem, 5rem);

            line-height: 1.1;

            margin-bottom: 30px;

            letter-spacing: -1px;

            opacity: 0;

            transform: translateY(30px);

            animation:
                fadeUp 1s forwards 0.2s;
        }

        .hero h1 span {
            background:
                linear-gradient(135deg,
                    var(--gc-blue),
                    var(--gc-cyan));

            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .hero p {
            font-size:
                clamp(1rem, 2.5vw, 1.25rem);

            color: var(--text-muted);

            margin-bottom: 40px;

            opacity: 0;

            transform: translateY(30px);

            animation:
                fadeUp 1s forwards 0.4s;
        }

        .hero-buttons {
            display: flex;

            gap: 20px;

            justify-content: center;

            opacity: 0;

            transform: translateY(30px);

            animation:
                fadeUp 1s forwards 0.6s;
        }


        /* ================= PLANOS ================= */

        .pricing-grid {
            display: grid;

            grid-template-columns:
                repeat(auto-fit, minmax(280px, 1fr));

            gap: 40px;

            align-items: center;

            max-width: 1000px;

            margin: 0 auto;
        }

        .pricing-card {
            background: var(--bg-card);

            border: 1px solid var(--border-color);

            border-radius: 20px;

            padding:
                clamp(30px, 5vw, 50px) clamp(20px, 4vw, 40px);

            backdrop-filter: blur(10px);

            transition: all 0.4s ease;

            position: relative;
        }

        .pricing-card:hover {
            transform: translateY(-10px);
        }

        .pricing-card.premium {
            border-color: var(--gc-blue);

            box-shadow: var(--glow);

            transform: scale(1.05);

            background:
                linear-gradient(180deg,
                    rgba(20, 20, 25, 0.9) 0%,
                    rgba(0, 34, 102, 0.3) 100%);
        }

        .pricing-card.premium:hover {
            transform:
                scale(1.05) translateY(-10px);
        }

        .badge {
            position: absolute;

            top: -15px;
            right: 20px;

            background:
                linear-gradient(135deg,
                    var(--gc-blue),
                    var(--gc-cyan));

            color: #fff;

            font-size: 0.8rem;
            font-weight: bold;

            padding: 8px 15px;

            border-radius: 20px;

            box-shadow:
                0 5px 15px rgba(0, 119, 255, 0.3);
        }

        .pricing-card h3 {
            font-size:
                clamp(1.5rem, 3vw, 2rem);

            margin-bottom: 10px;
        }

        .pricing-card p.desc {
            color: var(--text-muted);

            margin-bottom: 30px;

            font-size: 0.95rem;
        }

        .features-list {
            list-style: none;

            margin-bottom: 30px;
        }

        .features-list li {
            margin-bottom: 15px;

            display: flex;

            align-items: flex-start;

            gap: 10px;

            color: var(--gc-silver);

            font-size: 0.95rem;

            line-height: 1.45;
        }

        .features-list li i {
            color: var(--whatsapp-green);

            margin-top: 3px;

            flex-shrink: 0;
        }


        /* ================= SOBRE ================= */

        .about-grid {
            display: grid;

            grid-template-columns:
                repeat(auto-fit, minmax(300px, 1fr));

            gap:
                clamp(40px, 6vw, 60px);

            align-items: center;
        }

        .about-img {
            width: 100%;

            height:
                clamp(300px, 40vw, 500px);

            background: var(--bg-card);

            border-radius: 20px;

            border: 1px solid var(--border-color);

            position: relative;

            overflow: hidden;

            box-shadow: var(--glow);

            animation:
                floatUpDown 6s ease-in-out infinite;
        }

        .about-img img {
            width: 100%;
            height: 100%;

            object-fit: cover;

            transition:
                transform 0.5s ease;
        }

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

        .about-img::before {
            content: '';

            position: absolute;

            top: 0;
            left: -150%;

            width: 50%;
            height: 100%;

            background:
                linear-gradient(to right,
                    transparent,
                    rgba(255, 255, 255, 0.1),
                    transparent);

            transform: skewX(-25deg);

            animation: shine 6s infinite;

            z-index: 1;

            pointer-events: none;
        }

        .about-text h3 {
            font-size:
                clamp(2rem, 4vw, 2.5rem);

            margin-bottom: 25px;

            color: #fff;
        }

        .about-text p {
            font-size:
                clamp(1rem, 2vw, 1.1rem);

            color: var(--text-muted);

            line-height: 1.8;

            margin-bottom: 20px;
        }

        .highlight-text {
            color: var(--gc-blue);

            font-weight: bold;
        }


        /* ================= TECNOLOGIAS ================= */

        .tech-grid {
            display: grid;

            grid-template-columns:
                repeat(auto-fit, minmax(150px, 1fr));

            gap:
                clamp(15px, 3vw, 30px);

            margin-top: 40px;
        }

        .tech-card {
            background: var(--bg-card);

            border: 1px solid var(--border-color);

            border-radius: 15px;

            padding: 25px 15px;

            text-align: center;

            transition: all 0.4s ease;

            backdrop-filter: blur(10px);
        }

        .tech-card i {
            font-size:
                clamp(2.5rem, 5vw, 3.5rem);

            margin-bottom: 15px;

            transition: 0.4s;
        }

        .tech-card h4 {
            font-size:
                clamp(1rem, 2vw, 1.2rem);

            margin-bottom: 10px;
        }

        .tech-card p {
            font-size: 0.85rem;

            color: var(--text-muted);

            line-height: 1.5;
        }

        .tech-card:hover {
            transform: translateY(-10px);
        }

        .tech-card.html:hover {
            border-color: #E34F26;

            box-shadow:
                0 10px 30px rgba(227, 79, 38, 0.2);
        }

        .tech-card.css:hover {
            border-color: #1572B6;

            box-shadow:
                0 10px 30px rgba(21, 114, 182, 0.2);
        }

        .tech-card.js:hover {
            border-color: #F7DF1E;

            box-shadow:
                0 10px 30px rgba(247, 223, 30, 0.2);
        }

        .tech-card.php:hover {
            border-color: #777BB4;

            box-shadow:
                0 10px 30px rgba(119, 123, 180, 0.2);
        }

        .tech-card.frameworks:hover {
            border-color: var(--gc-blue);

            box-shadow:
                0 10px 30px rgba(0, 119, 255, 0.2);
        }


        /* ================= FOOTER ================= */

        footer {
            border-top:
                1px solid var(--border-color);

            padding:
                60px 5% 40px;

            background:
                rgba(2, 2, 2, 0.9);

            text-align: center;

            position: relative;

            z-index: 2;

            backdrop-filter: blur(10px);
        }

        .footer-content h2 {
            font-size:
                clamp(1.5rem, 4vw, 2rem);

            margin-bottom: 20px;
        }

        .footer-content p {
            color: var(--text-muted);

            font-size: 0.95rem;

            margin-bottom: 20px;

            line-height: 1.6;
        }

        .footer-cta {
            margin-top: 25px;
        }


        /* ================= ANIMAÇÕES ================= */

        .reveal {
            opacity: 0;

            transform: translateY(50px);

            transition:
                all 0.8s cubic-bezier(0.5, 0, 0, 1);
        }

        .reveal.active {
            opacity: 1;

            transform: translateY(0);
        }

        .delay-1 {
            transition-delay: 0.1s;
        }

        .delay-2 {
            transition-delay: 0.2s;
        }

        @keyframes fadeUp {

            to {
                opacity: 1;

                transform: translateY(0);
            }
        }

        @keyframes shine {

            100% {
                left: 150%;
            }
        }

        @keyframes floatUpDown {

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

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


        /* ==================================================
           RESPONSIVO
        ================================================== */


        /* ================= TABLETS ================= */

        @media (max-width: 1024px) {

            header {
                padding: 16px 4%;
            }

            section {
                padding-left: 4%;
                padding-right: 4%;
            }

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

                gap: 25px;
            }

            .pricing-card.premium {
                transform: none;
            }

            .pricing-card.premium:hover {
                transform: translateY(-10px);
            }

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

                gap: 35px;
            }

            .tech-grid {
                grid-template-columns:
                    repeat(3, 1fr);

                gap: 20px;
            }

            .hero h1 {
                font-size:
                    clamp(2.8rem, 7vw, 4.5rem);
            }
        }


        /* ================= CELULARES ================= */

        @media (max-width: 768px) {

            html {
                scroll-padding-top: 80px;
            }

            body {
                overflow-x: hidden;
            }


            /* HEADER */

            header {
                padding: 12px 5%;

                min-height: 70px;
            }

            .logo img {
                height: 42px;

                max-width: 150px;

                object-fit: contain;
            }

            .mobile-menu-btn {
                display: flex;

                align-items: center;
                justify-content: center;

                width: 45px;
                height: 45px;

                font-size: 1.5rem;

                padding: 0;
            }

            nav {
                position: absolute;

                top: 100%;
                left: 0;

                width: 100%;
            }

            nav ul {
                display: none;

                flex-direction: column;

                gap: 0;

                width: 100%;

                padding: 10px 20px 20px;

                background:
                    rgba(5, 5, 5, 0.97);

                backdrop-filter: blur(20px);

                border-bottom:
                    1px solid var(--border-color);

                text-align: center;
            }

            nav ul.show {
                display: flex;
            }

            nav ul li {
                margin: 0;

                width: 100%;
            }

            nav a {
                display: block;

                width: 100%;

                padding: 15px 10px;

                font-size: 1rem;
            }

            nav a::after {
                display: none;
            }


            /* SEÇÕES */

            section {
                width: 100%;

                padding: 80px 5%;
            }

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

            .section-header h2 {
                font-size:
                    clamp(1.9rem, 8vw, 2.5rem);

                line-height: 1.15;
            }

            .section-header p {
                font-size: 0.95rem;

                line-height: 1.6;
            }


            /* HERO */

            .hero {
                min-height: 100svh;

                height: auto;

                padding:
                    120px 5% 80px;
            }

            .hero-content {
                width: 100%;

                max-width: 600px;

                padding: 0;
            }

            .hero h1 {
                font-size:
                    clamp(2.4rem, 10vw, 3.5rem);

                line-height: 1.08;

                letter-spacing: -1.5px;

                margin-bottom: 22px;
            }

            .hero p {
                font-size: 1rem;

                line-height: 1.65;

                margin-bottom: 30px;
            }

            .hero-buttons {
                flex-direction: column;

                width: 100%;

                gap: 12px;
            }

            .hero-buttons .btn {
                width: 100%;

                min-height: 54px;
            }


            /* BOTÕES */

            .btn {
                width: 100%;

                padding: 15px 22px;

                min-height: 52px;

                font-size: 0.95rem;
            }


            /* PLANOS */

            .pricing-grid {
                grid-template-columns: 1fr;

                width: 100%;

                max-width: 500px;

                gap: 25px;
            }

            .pricing-card {
                width: 100%;

                padding: 30px 25px;

                border-radius: 18px;
            }

            .pricing-card.premium {
                transform: none;
            }

            .pricing-card.premium:hover {
                transform: translateY(-7px);
            }

            .pricing-card h3 {
                font-size: 1.6rem;
            }

            .pricing-card p.desc {
                font-size: 0.9rem;

                line-height: 1.6;

                margin-bottom: 25px;
            }

            .features-list {
                margin-bottom: 25px;
            }

            .features-list li {
                font-size: 0.9rem;

                line-height: 1.45;

                gap: 9px;

                margin-bottom: 13px;
            }

            .badge {
                top: -12px;

                right: 15px;

                font-size: 0.7rem;

                padding: 7px 12px;
            }


            /* SOBRE */

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

                gap: 40px;
            }

            .about-img {
                width: 100%;

                height:
                    min(90vw, 420px);

                min-height: 280px;

                animation: none;
            }

            .about-text h3 {
                font-size:
                    clamp(1.8rem, 8vw, 2.3rem);

                line-height: 1.15;

                margin-bottom: 20px;
            }

            .about-text p {
                font-size: 0.98rem;

                line-height: 1.7;

                margin-bottom: 18px;
            }


            /* TECNOLOGIAS */

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

                gap: 15px;

                margin-top: 30px;
            }

            .tech-card {
                padding: 22px 12px;

                border-radius: 14px;
            }

            .tech-card i {
                font-size: 2.6rem;

                margin-bottom: 12px;
            }

            .tech-card h4 {
                font-size: 1rem;

                line-height: 1.25;
            }

            .tech-card p {
                font-size: 0.78rem;

                line-height: 1.45;
            }


            /* FOOTER */

            footer {
                padding:
                    50px 5% 30px;
            }

            .footer-content h2 {
                font-size: 1.7rem;
            }

            .footer-content p {
                font-size: 0.9rem;

                line-height: 1.6;
            }

            .footer-cta .btn {
                width: 100%;

                max-width: 350px;
            }


            /* WHATSAPP */

            .float-wpp {
                width: 52px;
                height: 52px;

                right: 18px;
                bottom: 18px;

                font-size: 25px;
            }


            /* FUNDO */

            .bg-grid {
                background-size: 35px 35px;
            }

            .blob {
                filter: blur(70px);
            }

            .blob-1 {
                width: 80vw;
                height: 80vw;
            }

            .blob-2 {
                width: 90vw;
                height: 90vw;
            }

            .blob-3 {
                width: 70vw;
                height: 70vw;
            }
        }


        /* ================= CELULARES PEQUENOS ================= */

        @media (max-width: 480px) {

            header {
                padding: 10px 4%;
            }

            .logo img {
                height: 38px;

                max-width: 135px;
            }

            .mobile-menu-btn {
                width: 42px;
                height: 42px;
            }

            section {
                padding: 70px 4%;
            }

            .hero {
                padding:
                    110px 4% 70px;
            }

            .hero h1 {
                font-size:
                    clamp(2.15rem, 11vw, 2.8rem);
            }

            .hero p {
                font-size: 0.92rem;
            }

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

            .section-header p {
                font-size: 0.9rem;
            }

            .pricing-card {
                padding: 27px 20px;
            }

            .pricing-card h3 {
                font-size: 1.45rem;
            }

            .features-list li {
                font-size: 0.86rem;
            }

            .tech-grid {
                grid-template-columns: 1fr 1fr;

                gap: 10px;
            }

            .tech-card {
                padding: 20px 8px;
            }

            .tech-card i {
                font-size: 2.3rem;
            }

            .tech-card p {
                font-size: 0.73rem;
            }

            .float-wpp {
                width: 48px;
                height: 48px;

                right: 15px;
                bottom: 15px;

                font-size: 23px;
            }
        }


        /* ================= MUITO PEQUENO ================= */

        @media (max-width: 360px) {

            .hero h1 {
                font-size: 2rem;
            }

            .hero p {
                font-size: 0.88rem;
            }

            .pricing-card {
                padding: 24px 17px;
            }

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

            .tech-card p {
                font-size: 0.8rem;
            }

            .badge {
                font-size: 0.65rem;

                padding:
                    6px 10px;
            }
        }


        /* ================= POUCA ALTURA ================= */

        @media (max-height: 650px) and (max-width: 768px) {

            .hero {
                min-height: auto;

                padding-top: 110px;

                padding-bottom: 60px;
            }

            .hero h1 {
                margin-bottom: 18px;
            }

            .hero p {
                margin-bottom: 25px;
            }
        }


        /* ================= MENOS ANIMAÇÕES ================= */

        @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;
            }
        }

/* APRIMORAMENTOS GCCODE */
header{padding:14px 5%;min-height:82px}.logo img{max-height:50px}main{padding-top:112px;position:relative;z-index:1}.hero{min-height:calc(100vh - 112px);display:flex;align-items:center;padding:72px 5% 96px}#planos,#tecnologias,#sobre{padding-top:46px}.section-header{margin-top:18px}@media(max-width:800px){header{min-height:72px;padding:12px 5%}main{padding-top:92px}.hero{min-height:calc(100vh - 92px);padding-top:56px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}


/* =========================================================
   GCCODE // EXPERIENCE V3
   Camada visual nova — mantém compatibilidade com as páginas
   existentes e não altera a API do chatbot.
   ========================================================= */

:root{
    --gc-bg:#02050b;
    --gc-panel:rgba(5,13,25,.72);
    --gc-panel-2:rgba(8,20,38,.82);
    --gc-line:rgba(80,170,255,.16);
    --gc-blue-2:#1687ff;
    --gc-cyan-2:#00e5ff;
    --gc-purple:#6d5cff;
}

body{
    background:
        radial-gradient(circle at 50% 0%,rgba(0,119,255,.09),transparent 34%),
        #02050b;
}
.bg-container{
    background:
        radial-gradient(circle at 15% 20%,rgba(0,119,255,.12),transparent 30%),
        radial-gradient(circle at 85% 80%,rgba(0,212,255,.07),transparent 30%),
        #02050b;
}
.bg-grid{
    opacity:.7;
    background-image:
        linear-gradient(rgba(53,142,255,.075) 1px,transparent 1px),
        linear-gradient(90deg,rgba(53,142,255,.075) 1px,transparent 1px);
    background-size:48px 48px;
    mask-image:linear-gradient(to bottom,black,transparent 92%);
}
.scanline{
    position:absolute;inset:0;
    background:linear-gradient(to bottom,transparent 0%,rgba(0,150,255,.035) 50%,transparent 100%);
    height:18%;
    animation:scanMove 8s linear infinite;
    pointer-events:none;
}
.noise{
    position:absolute;inset:0;opacity:.035;pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
.cursor-glow{
    position:fixed;width:420px;height:420px;border-radius:50%;
    pointer-events:none;z-index:-1;
    background:radial-gradient(circle,rgba(0,119,255,.10),transparent 68%);
    transform:translate(-50%,-50%);
    mix-blend-mode:screen;
}
#particles{position:absolute;inset:0;overflow:hidden}
.gc-particle{
    position:absolute;width:2px;height:2px;background:#58b8ff;border-radius:50%;
    box-shadow:0 0 10px #1687ff;opacity:.45;animation:particleFloat linear infinite;
}
@keyframes particleFloat{
    from{transform:translate3d(0,20px,0);opacity:0}
    15%{opacity:.55} 85%{opacity:.25}
    to{transform:translate3d(0,-110vh,0);opacity:0}
}
@keyframes scanMove{from{transform:translateY(-120%)}to{transform:translateY(650%)}}

header{
    background:rgba(2,6,13,.72)!important;
    border-bottom:1px solid rgba(80,170,255,.12)!important;
}
header::after{
    content:"";position:absolute;bottom:-1px;left:5%;right:5%;height:1px;
    background:linear-gradient(90deg,transparent,#1687ff,transparent);
    opacity:.55;
}
.logo img{border-radius:8px;object-fit:contain}
nav ul{align-items:center}
nav a{font-size:.88rem;letter-spacing:.02em}
.nav-ai{
    display:inline-flex!important;align-items:center;gap:8px;
    padding:10px 14px;border:1px solid rgba(0,160,255,.35);
    border-radius:10px!important;background:rgba(0,119,255,.07);
    color:#72c8ff!important;
    box-shadow:inset 0 0 20px rgba(0,119,255,.04);
}
.nav-ai::after{display:none!important}
.nav-ai:hover{
    border-color:#1687ff;box-shadow:0 0 24px rgba(0,119,255,.18);
    color:#fff!important;transform:translateY(-1px)
}

main{padding-top:0!important}
.hero{
    min-height:100svh!important;height:auto!important;
    padding:150px 5% 90px!important;
    overflow:hidden;
}
.hero::before{
    content:"";position:absolute;width:min(780px,90vw);height:420px;top:14%;left:50%;
    transform:translateX(-50%);
    background:radial-gradient(ellipse,rgba(0,119,255,.15),transparent 68%);
    filter:blur(15px);pointer-events:none;
}
.hero-content{max-width:1080px}
.hero-kicker{
    display:flex;justify-content:center;align-items:center;gap:10px;
    color:#72c8ff;font-size:.72rem;font-weight:700;letter-spacing:.18em;
    margin-bottom:28px;text-transform:uppercase;
}
.status-dot{width:7px;height:7px;border-radius:50%;background:#35e59a;box-shadow:0 0 12px #35e59a;animation:statusPulse 1.8s infinite}
.kicker-line{width:45px;height:1px;background:linear-gradient(90deg,#1687ff,transparent)}
@keyframes statusPulse{50%{opacity:.35;transform:scale(.75)}}
.hero h1{
    font-size:clamp(3.2rem,8vw,7.2rem)!important;
    line-height:.98!important;letter-spacing:-.055em!important;
    text-wrap:balance;
}
.hero-gradient{
    background:linear-gradient(90deg,#fff 0%,#52b2ff 35%,#00e5ff 62%,#7c6cff 100%)!important;
    -webkit-background-clip:text!important;background-clip:text!important;
    -webkit-text-fill-color:transparent!important;
    background-size:220% auto;
    animation:gradientFlow 5s ease-in-out infinite alternate;
}
@keyframes gradientFlow{to{background-position:100% center}}
.hero p{max-width:760px;margin-left:auto;margin-right:auto;color:#9eacc0!important}
.hero-buttons{gap:14px;flex-wrap:wrap}
.hero-buttons .btn{gap:12px;border-radius:12px;padding:15px 23px}
.btn{
    position:relative;overflow:hidden;
    background:linear-gradient(135deg,#0878ff,#0055d9)!important;
    box-shadow:0 12px 35px rgba(0,119,255,.22)!important;
}
.btn::before{
    content:"";position:absolute;inset:0;transform:translateX(-120%);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
    transition:transform .65s ease;
}
.btn:hover::before{transform:translateX(120%)}
.btn-outline{
    background:rgba(3,10,20,.42)!important;border-color:rgba(0,175,255,.55)!important;
}

.hero-terminal{
    width:min(720px,100%);margin:55px auto 0;text-align:left;
    background:rgba(2,8,17,.72);border:1px solid var(--gc-line);
    border-radius:15px;box-shadow:0 25px 80px rgba(0,0,0,.35),0 0 50px rgba(0,119,255,.06);
    overflow:hidden;backdrop-filter:blur(15px);
    animation:terminalFloat 5s ease-in-out infinite;
}
@keyframes terminalFloat{50%{transform:translateY(-5px)}}
.terminal-head{
    display:flex;align-items:center;gap:6px;padding:11px 14px;
    border-bottom:1px solid rgba(255,255,255,.06);font-size:.7rem;color:#63748a;
}
.terminal-head>span:nth-child(1){color:#ff5f57}.terminal-head>span:nth-child(2){color:#febc2e}.terminal-head>span:nth-child(3){color:#28c840}
.terminal-head strong{margin-left:10px;color:#71849c;font-weight:500}
.terminal-head em{margin-left:auto;color:#38d996;font-style:normal;font-size:.62rem;letter-spacing:.12em}
.terminal-body{padding:20px;font:500 .83rem/2 "SFMono-Regular",Consolas,monospace;color:#dbeafe}
.code-muted{color:#34485f;margin-right:20px}.code-blue{color:#6f9dff}.code-cyan{color:#22d3ee}.code-purple{color:#a78bfa}.code-green{color:#70e1a0}
.cursor-block{color:#1687ff;animation:blink 1s steps(1) infinite}@keyframes blink{50%{opacity:0}}
.scroll-indicator{
    position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
    display:flex;flex-direction:column;gap:7px;align-items:center;color:#52657c;font-size:.58rem;letter-spacing:.2em;
}
.scroll-indicator i{color:#1687ff;animation:scrollBounce 1.5s infinite}
@keyframes scrollBounce{50%{transform:translateY(5px);opacity:.45}}

.metrics{
    max-width:1180px!important;padding:20px 5% 80px!important;
    display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
}
.metric-card{
    position:relative;padding:25px 20px;text-align:left;
    background:linear-gradient(145deg,rgba(8,20,36,.72),rgba(3,9,17,.55));
    border:1px solid rgba(84,163,232,.13);border-radius:16px;
    overflow:hidden;transition:.35s ease;
}
.metric-card::after{
    content:"";position:absolute;width:90px;height:90px;right:-40px;top:-40px;
    border-radius:50%;background:rgba(0,119,255,.14);filter:blur(10px)
}
.metric-card:hover{transform:translateY(-7px);border-color:rgba(22,135,255,.42);box-shadow:0 18px 45px rgba(0,0,0,.25)}
.metric-icon{display:grid;place-items:center;width:38px;height:38px;border:1px solid rgba(22,135,255,.28);border-radius:10px;color:#4eb2ff;margin-bottom:18px}
.metric-card strong{font:800 clamp(1.7rem,3vw,2.35rem) Syne,sans-serif;color:#fff}
.metric-card b{color:#1687ff;font-size:1rem}.metric-card p{margin-top:5px;color:#718197;font-size:.78rem}

.solutions,.process,.ai-preview,.final-cta{max-width:1180px!important}
.section-tag{
    display:inline-block;color:#4eb2ff;font:700 .68rem/1 Inter,sans-serif;
    letter-spacing:.2em;margin-bottom:14px
}
.section-header h2{font-size:clamp(2.2rem,5vw,4rem)!important;letter-spacing:-.04em}
.section-header h2 span,.system-left h2 span,.ai-copy h2 span,.final-cta h2 span{color:#1687ff}
.solution-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tech-box{
    min-height:330px;padding:30px;position:relative;overflow:hidden;
    background:linear-gradient(150deg,rgba(8,20,36,.78),rgba(3,8,15,.72));
    border:1px solid rgba(83,154,219,.14);border-radius:18px;
    backdrop-filter:blur(12px);transition:transform .4s ease,border-color .4s ease,box-shadow .4s ease;
}
.tech-box::before{
    content:"";position:absolute;inset:-1px;border-radius:inherit;
    background:linear-gradient(120deg,rgba(0,170,255,.3),transparent 35%,transparent 70%,rgba(100,80,255,.2));
    opacity:0;transition:.4s;pointer-events:none
}
.tech-box:hover{transform:translateY(-10px) rotateX(2deg);border-color:rgba(22,135,255,.42);box-shadow:0 25px 60px rgba(0,0,0,.28),0 0 35px rgba(0,119,255,.08)}
.tech-box:hover::before{opacity:1}
.featured-box{background:linear-gradient(150deg,rgba(0,61,120,.32),rgba(3,8,15,.8));border-color:rgba(0,145,255,.28)}
.box-number{position:absolute;right:20px;top:20px;color:#263c54;font:700 .7rem monospace}
.box-icon{
    width:54px;height:54px;display:grid;place-items:center;border-radius:14px;
    color:#55b9ff;background:rgba(0,119,255,.09);border:1px solid rgba(0,145,255,.2);
    font-size:1.3rem;margin-bottom:65px;transition:.4s
}
.tech-box:hover .box-icon{transform:rotate(-5deg) scale(1.08);box-shadow:0 0 30px rgba(0,119,255,.18)}
.tech-box h3{font-size:1.35rem;margin-bottom:12px}.tech-box p{color:#77879b;line-height:1.7;font-size:.88rem}
.box-link{position:absolute;bottom:26px;left:30px;color:#4c83b4;font-size:.62rem;letter-spacing:.14em;font-weight:700}.box-link i{margin-left:6px;color:#1687ff}

.system-panel{
    display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center;
    padding:clamp(30px,5vw,60px);border-radius:24px;
    background:linear-gradient(135deg,rgba(7,21,39,.78),rgba(2,8,15,.82));
    border:1px solid rgba(65,144,219,.16);position:relative;overflow:hidden;
}
.system-panel::after{content:"";position:absolute;inset:auto -20% -60% 30%;height:300px;background:radial-gradient(circle,rgba(0,119,255,.13),transparent 68%);pointer-events:none}
.system-left h2{font-size:clamp(2.2rem,5vw,4rem);line-height:1.03;margin-bottom:20px}
.system-left p{color:#7f90a6;line-height:1.8;max-width:480px;margin-bottom:25px}
.text-link{color:#64bdff;text-decoration:none;font-size:.84rem;font-weight:700}.text-link i{margin-left:7px}
.system-console{padding:20px;border:1px solid rgba(82,156,222,.15);background:#020812;border-radius:15px;font-family:Consolas,monospace;box-shadow:inset 0 0 45px rgba(0,119,255,.035)}
.console-top{display:flex;justify-content:space-between;color:#627a94;font-size:.65rem;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.05)}
.live{color:#39d997}.live i{display:inline-block;width:6px;height:6px;background:#39d997;border-radius:50%;box-shadow:0 0 8px #39d997;margin-right:5px;animation:statusPulse 1.4s infinite}
.console-row{display:grid;grid-template-columns:1.2fr 1.5fr .6fr;gap:8px;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.045);font-size:.67rem}
.console-row span{color:#6b7e94}.console-row b{color:#45dba0;font-weight:500}.console-row small{text-align:right;color:#37516c}
.console-progress{height:3px;background:#0d1b2b;margin-top:18px;overflow:hidden}.console-progress span{display:block;width:72%;height:100%;background:linear-gradient(90deg,#0077ff,#00d4ff);animation:progressPulse 3s ease-in-out infinite alternate}
@keyframes progressPulse{to{width:96%}}
.console-code{color:#3d6389;font-size:.6rem;padding-top:14px}

.process-grid{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:stretch;gap:12px}
.process-step{
    padding:25px 18px;background:rgba(5,14,25,.65);border:1px solid rgba(83,154,219,.12);
    border-radius:16px;transition:.35s
}
.process-step:hover{border-color:rgba(22,135,255,.35);transform:translateY(-5px)}
.process-step>span{color:#1687ff;font:700 .65rem monospace}.process-step i{display:block;color:#67c0ff;font-size:1.2rem;margin:28px 0 20px}.process-step h3{font-size:1.05rem;margin-bottom:8px}.process-step p{color:#6f8197;font-size:.78rem;line-height:1.6}
.process-line{width:25px;height:1px;background:linear-gradient(90deg,transparent,#1687ff,transparent);align-self:center}

.ai-preview{padding-top:60px!important}
.ai-card{
    min-height:420px;display:flex;align-items:center;position:relative;overflow:hidden;
    padding:60px;gap:60px;border-radius:26px;border:1px solid rgba(22,135,255,.25);
    background:radial-gradient(circle at 20% 50%,rgba(0,119,255,.14),transparent 32%),linear-gradient(145deg,#061224,#02070f);
    box-shadow:0 25px 90px rgba(0,0,0,.35),inset 0 0 80px rgba(0,119,255,.035)
}
.ai-copy{max-width:580px;position:relative;z-index:2}.ai-copy h2{font-size:clamp(2.2rem,5vw,4rem);line-height:1.05;margin-bottom:18px}.ai-copy p{color:#7c8da2;line-height:1.8;max-width:560px;margin-bottom:25px}
.ai-core{
    position:relative;z-index:2;flex:0 0 210px;width:210px;height:210px;display:grid;place-items:center;
    border-radius:50%;font-size:3rem;color:#73caff;
    background:radial-gradient(circle,rgba(0,119,255,.3),rgba(3,11,21,.95) 62%);
    border:1px solid rgba(65,178,255,.5);box-shadow:0 0 80px rgba(0,119,255,.22),inset 0 0 40px rgba(0,119,255,.15);
    animation:corePulse 3s ease-in-out infinite
}
@keyframes corePulse{50%{box-shadow:0 0 120px rgba(0,119,255,.32),inset 0 0 60px rgba(0,119,255,.2);transform:scale(1.03)}}
.ai-orbit{position:absolute;left:30px;top:50%;width:360px;height:360px;border:1px dashed rgba(65,178,255,.18);border-radius:50%;transform:translateY(-50%) rotate(25deg)}
.orbit-two{width:290px;height:290px;left:65px;border-color:rgba(130,95,255,.17);transform:translateY(-50%) rotate(-40deg)}
.ai-signal{position:absolute;font:600 .58rem monospace;color:#365c7e;letter-spacing:.08em}.signal-1{top:35px;right:40px}.signal-2{bottom:38px;right:70px}.signal-3{top:50%;right:25px}
.final-cta{text-align:center;padding-bottom:110px!important}
.final-cta h2{font-size:clamp(2.7rem,6vw,5rem);line-height:1.02;margin-bottom:20px}.final-cta p{color:#77879b;margin-bottom:28px}.final-cta .hero-buttons{justify-content:center}

footer{
    background:rgba(1,5,11,.86)!important;
    border-top-color:rgba(55,142,220,.13)!important;
    padding:55px 5% 25px!important;
}
.footer-brand img{height:44px;width:auto;border-radius:7px;object-fit:contain;margin-bottom:12px}.footer-brand p{color:#65768b;font-size:.8rem}
.footer-links{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;margin:30px 0}.footer-links a{color:#75869b;text-decoration:none;font-size:.76rem}.footer-links a:hover{color:#4eb2ff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.05);padding-top:20px;display:flex;justify-content:space-between;gap:20px;color:#44556a;font-size:.68rem}.footer-bottom i{color:#1687ff}

/* Chat Code: o botão flutuante antigo é ocultado; a navegação abre a IA. */
.gccode-chat-toggle{display:none!important}

@media(max-width:900px){
    nav ul{gap:16px}.nav-ai{padding:8px 10px}
    .metrics{grid-template-columns:repeat(2,1fr)}
    .solution-grid{grid-template-columns:1fr 1fr}
    .system-panel{grid-template-columns:1fr;gap:35px}
    .process-grid{grid-template-columns:1fr 1fr}.process-line{display:none}
    .ai-card{padding:40px;gap:35px}.ai-core{flex-basis:170px;width:170px;height:170px}
}
@media(max-width:768px){
    .cursor-glow{display:none}
    .hero{padding:125px 5% 75px!important}
    .hero h1{font-size:clamp(2.65rem,12vw,4.2rem)!important}
    .hero-terminal{margin-top:38px}
    .scroll-indicator{display:none}
    .metrics{padding-top:0!important}
    .solution-grid{grid-template-columns:1fr}
    .tech-box{min-height:285px}
    .system-panel{padding:28px 22px}
    .process-grid{grid-template-columns:1fr}
    .ai-card{min-height:0;flex-direction:column;text-align:center;padding:45px 24px;gap:25px}
    .ai-core{flex:0 0 150px;width:150px;height:150px;font-size:2.3rem}
    .ai-orbit{left:50%;top:28px;width:210px;height:210px;transform:translateX(-50%)}
    .orbit-two{left:50%;width:175px;height:175px}
    .ai-copy{order:2}.ai-card .ai-core{order:1}.ai-copy .btn{width:auto}
    .ai-signal{display:none}
    .footer-bottom{flex-direction:column;text-align:center}
    nav ul{background:rgba(2,7,15,.98)!important}
    .nav-ai{justify-content:center}
}
@media(max-width:480px){
    .hero-kicker{font-size:.58rem}.kicker-line{width:20px}
    .hero h1{letter-spacing:-.045em!important}
    .hero-terminal{border-radius:12px}.terminal-body{padding:14px;font-size:.66rem}
    .metrics{grid-template-columns:1fr 1fr;gap:8px;padding-left:4%!important;padding-right:4%!important}
    .metric-card{padding:18px 14px}.metric-card strong{font-size:1.6rem}.metric-card p{font-size:.68rem}
    .tech-box{padding:24px}.box-icon{margin-bottom:50px}
    .console-row{grid-template-columns:1fr 1fr}.console-row small{display:none}
    .ai-copy .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
    .bg-grid,.blob,.scanline,.hero-gradient,.hero-terminal,.ai-core,.gccode-chat-toggle,.gc-particle{animation:none!important}
}


/* =========================================================
   GCCODE // VISUAL UPGRADE + PROJECT FORM
   ========================================================= */
:root{--gc-line:rgba(76,166,239,.18);--gc-panel:rgba(4,14,27,.72)}
.bg-container{background:#02070f!important}.bg-grid{opacity:.75!important}.scanline{position:absolute;inset:0;background:linear-gradient(180deg,transparent 0%,rgba(0,145,255,.035) 50%,transparent 100%);height:180px;animation:scanMove 9s linear infinite;pointer-events:none}.noise{position:absolute;inset:0;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");pointer-events:none}.cursor-glow{position:fixed;z-index:-1;width:420px;height:420px;pointer-events:none;border-radius:50%;background:radial-gradient(circle,rgba(0,119,255,.12),transparent 65%);transform:translate(-50%,-50%);mix-blend-mode:screen;transition:left .12s ease-out,top .12s ease-out}
@keyframes scanMove{0%{transform:translateY(-200px)}100%{transform:translateY(100vh)}}
.nav-link.active{color:#fff!important}.nav-link.active::after{width:100%!important}.nav-ai{display:flex;align-items:center;gap:7px!important;padding:9px 12px;border:1px solid rgba(0,150,255,.3);border-radius:10px;background:rgba(0,119,255,.08);color:#72c8ff!important}.nav-ai::after{display:none}.nav-ai:hover{background:rgba(0,119,255,.16);box-shadow:0 0 24px rgba(0,119,255,.12)}
.inner-hero{max-width:1180px;margin:0 auto;padding:95px 5% 70px;text-align:center}.inner-hero h1{font:800 clamp(2.8rem,7vw,6.2rem)/.98 Syne,sans-serif;letter-spacing:-.055em;margin-bottom:22px}.inner-hero h1 span{background:linear-gradient(90deg,#fff,#48b6ff,#00d9ff,#8175ff);background-size:220% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:gradientFlow 5s ease-in-out infinite alternate}.inner-hero p{max-width:760px;margin:0 auto;color:#8394a9;line-height:1.8;font-size:1rem}.hero-mini-stats{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:32px}.hero-mini-stats span{padding:10px 14px;border:1px solid rgba(76,166,239,.14);background:rgba(5,16,29,.58);border-radius:10px;color:#60758d;font-size:.7rem;letter-spacing:.08em}.hero-mini-stats b{color:#42aaff;margin-right:5px}.about-modern,.values-section,.projects-modern,.tech-modern,.architecture-section{max-width:1180px;margin:0 auto;padding:40px 5% 90px}.about-grid-modern{align-items:center;gap:70px}.about-grid-modern .about-img{position:relative}.image-frame{position:relative;border:1px solid rgba(64,156,225,.2);padding:10px;border-radius:22px;background:linear-gradient(145deg,rgba(10,27,47,.7),rgba(2,8,16,.7));box-shadow:0 30px 90px rgba(0,0,0,.35),0 0 50px rgba(0,119,255,.08)}.image-frame img{display:block;width:100%;height:470px;object-fit:cover;border-radius:15px;filter:saturate(.8) contrast(1.05)}.image-frame::before{content:"";position:absolute;inset:10px;border-radius:15px;background:linear-gradient(135deg,rgba(0,119,255,.13),transparent 45%,rgba(0,229,255,.08));pointer-events:none}.frame-label{position:absolute;left:26px;bottom:25px;padding:8px 11px;background:rgba(1,7,14,.8);border:1px solid rgba(67,159,225,.2);border-radius:8px;color:#6db9ed;font:600 .6rem monospace;letter-spacing:.12em}.about-text h2{font-size:clamp(2rem,4vw,3.5rem);line-height:1.05;margin-bottom:20px}.about-text h2 span{color:#1687ff}.about-text p{color:#7e90a5;line-height:1.8;margin-bottom:14px}.about-points{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:28px}.about-points>div{padding:16px;border:1px solid rgba(71,151,218,.12);background:rgba(5,15,27,.62);border-radius:13px}.about-points i{color:#49b5ff;display:block;margin-bottom:12px}.about-points b{display:block;font-size:.8rem}.about-points small{display:block;color:#566b82;font-size:.65rem;line-height:1.5;margin-top:5px}.values-section .section-header,.projects-modern .section-header,.tech-modern .section-header{text-align:center;margin-bottom:38px}.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.value-card{position:relative;padding:30px;min-height:255px;border-radius:18px;background:linear-gradient(150deg,rgba(7,20,35,.78),rgba(2,8,15,.8));border:1px solid rgba(73,153,220,.13);overflow:hidden;transition:.4s}.value-card::after{content:"";position:absolute;width:160px;height:160px;right:-80px;bottom:-80px;background:radial-gradient(circle,rgba(0,119,255,.15),transparent 68%)}.value-card:hover{border-color:rgba(31,148,255,.42);box-shadow:0 25px 70px rgba(0,0,0,.3)}.value-card>span{position:absolute;right:20px;top:18px;color:#28435e;font:700 .65rem monospace}.value-card i{color:#4bb6ff;font-size:1.35rem;margin:5px 0 28px}.value-card h3{font-size:1.25rem;margin-bottom:10px}.value-card p{color:#71839a;line-height:1.7;font-size:.84rem}.project-showcase{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.project-card{padding:30px;border:1px solid rgba(73,153,220,.14);border-radius:18px;background:linear-gradient(150deg,rgba(7,20,35,.75),rgba(2,8,15,.78));transition:.4s;position:relative;overflow:hidden}.project-card:hover{transform:translateY(-7px);border-color:rgba(22,135,255,.4);box-shadow:0 25px 70px rgba(0,0,0,.3)}.project-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.project-top span{font-size:.6rem;letter-spacing:.12em;color:#5ca8dc}.project-top i{color:#4bb6ff}.project-card h3{font-size:1.5rem;margin-bottom:10px}.project-card p{color:#75879b;line-height:1.7;font-size:.86rem;min-height:58px}.project-tech{display:flex;gap:7px;flex-wrap:wrap;margin:22px 0}.project-tech span{font:700 .58rem monospace;color:#537b9c;border:1px solid rgba(70,140,194,.16);padding:6px 8px;border-radius:6px}.project-card .btn{width:100%;justify-content:center;display:flex}.tech-hero{padding-bottom:50px}.stack-marquee{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:32px}.stack-marquee span{font:700 .6rem monospace;letter-spacing:.14em;color:#4d7da2;border:1px solid rgba(65,145,207,.15);padding:8px 11px;border-radius:7px;background:rgba(4,14,25,.6)}.tech-grid-modern{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.tech-modern-card{position:relative;min-height:285px;padding:26px;border-radius:18px;background:linear-gradient(150deg,rgba(7,20,35,.78),rgba(2,8,15,.82));border:1px solid rgba(73,153,220,.13);overflow:hidden;transition:.4s}.tech-modern-card:hover{transform:translateY(-8px);border-color:rgba(22,135,255,.4);box-shadow:0 25px 65px rgba(0,0,0,.3)}.tech-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}.tech-card-top span{color:#294863;font:700 .65rem monospace}.tech-card-top i{font-size:2rem;color:#45b5ff}.tech-modern-card:nth-child(1) i{color:#ff684d}.tech-modern-card:nth-child(2) i{color:#2589e8}.tech-modern-card:nth-child(3) i{color:#ffe047}.tech-modern-card:nth-child(4) i{color:#9a91d6}.tech-modern-card h3{font-size:1.3rem;margin-bottom:9px}.tech-modern-card p{color:#72859a;line-height:1.65;font-size:.82rem;min-height:82px}.tech-modern-card small{color:#47647e;font:700 .56rem monospace;letter-spacing:.1em}.tech-meter{height:3px;background:#0b1a2a;margin:18px 0 12px;overflow:hidden}.tech-meter span{display:block;height:100%;background:linear-gradient(90deg,#0077ff,#00d4ff);box-shadow:0 0 12px rgba(0,212,255,.35)}.architecture-panel{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;padding:55px;border-radius:24px;background:linear-gradient(135deg,rgba(7,21,39,.78),rgba(2,8,15,.85));border:1px solid rgba(65,144,219,.16)}.architecture-panel h2{font-size:clamp(2.1rem,4vw,3.6rem);line-height:1.05;margin:12px 0 18px}.architecture-panel h2 span{color:#1687ff}.architecture-panel p{color:#7b8da3;line-height:1.8;max-width:520px}.architecture-code{padding:24px;border:1px solid rgba(78,151,211,.13);border-radius:14px;background:#020812;font:500 .72rem Consolas,monospace}.architecture-code div{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.04)}.architecture-code b{color:#5b7793}.architecture-code span{color:#45c2ff}.architecture-code .code-line{height:2px;background:linear-gradient(90deg,#0077ff,#00d4ff,transparent);border:0;padding:0;margin-top:14px;animation:codePulse 2.5s ease-in-out infinite alternate}.architecture-code small{display:block;color:#3f698a;margin-top:13px}@keyframes codePulse{to{opacity:.4;transform:scaleX(.7);transform-origin:left}}
.contact-section{max-width:1180px!important;margin:0 auto;padding:60px 5% 100px;display:grid;grid-template-columns:.85fr 1.15fr;gap:55px;align-items:center}.contact-copy h2{font-size:clamp(2.3rem,5vw,4rem);line-height:1.04;margin-bottom:17px}.contact-copy h2 span{color:#1687ff}.contact-copy>p{color:#7d8ea3;line-height:1.8;max-width:500px}.contact-terminal{margin-top:25px;padding:18px 20px;border:1px solid rgba(69,151,219,.14);border-radius:12px;background:#020812;color:#507a9e;font:500 .68rem/2 Consolas,monospace;box-shadow:inset 0 0 30px rgba(0,119,255,.025)}.contact-terminal span{color:#2e4660;margin-right:15px}.contact-terminal b{color:#43dba0;font-weight:500}.contact-terminal i{color:#1687ff;animation:blink 1s steps(1) infinite}.project-form{padding:24px;border-radius:20px;border:1px solid rgba(68,158,225,.18);background:linear-gradient(145deg,rgba(7,21,37,.84),rgba(2,8,15,.9));box-shadow:0 25px 80px rgba(0,0,0,.3)}.form-head{display:flex;justify-content:space-between;gap:15px;align-items:center;padding-bottom:16px;margin-bottom:17px;border-bottom:1px solid rgba(255,255,255,.05);font:700 .65rem monospace;color:#63829e;letter-spacing:.08em}.form-head small{font-size:.55rem;color:#3e9975}.form-head small i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#38d996;box-shadow:0 0 8px #38d996;margin-right:5px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px} .project-form label{display:flex;flex-direction:column;gap:7px;color:#8194a9;font-size:.68rem;font-weight:600}.project-form label em{font-style:normal;color:#42566d;font-size:.58rem;margin-left:3px}.project-form input,.project-form select,.project-form textarea{width:100%;border:1px solid rgba(74,143,197,.16);background:#020a14;color:#dce8f5;border-radius:10px;padding:12px 13px;outline:none;font:inherit;font-size:.75rem;resize:vertical}.project-form select{appearance:auto}.project-form input::placeholder,.project-form textarea::placeholder{color:#40566e}.project-form input:focus,.project-form select:focus,.project-form textarea:focus{border-color:rgba(22,135,255,.65);box-shadow:0 0 0 3px rgba(0,119,255,.06)}.form-full{grid-column:1/-1}.project-form>.btn{margin-top:15px;width:100%;justify-content:center;display:flex}.form-note{display:block;text-align:center;color:#42566c;font-size:.58rem;line-height:1.5;margin-top:11px}.project-form .btn i:first-child{margin-right:3px}
@media(max-width:900px){.about-grid-modern{gap:35px}.about-points{grid-template-columns:1fr}.value-grid,.tech-grid-modern{grid-template-columns:1fr 1fr}.project-showcase{grid-template-columns:1fr}.architecture-panel{grid-template-columns:1fr}.contact-section{grid-template-columns:1fr;gap:35px}}
@media(max-width:768px){.inner-hero{padding-top:55px}.inner-hero h1{font-size:clamp(2.5rem,11vw,4.3rem)}.about-modern,.values-section,.projects-modern,.tech-modern,.architecture-section{padding-bottom:65px}.about-grid-modern{grid-template-columns:1fr!important}.image-frame img{height:340px}.value-grid,.tech-grid-modern{grid-template-columns:1fr}.project-card{padding:23px}.architecture-panel{padding:28px 22px}.contact-section{padding:35px 5% 75px}.contact-copy h2{font-size:clamp(2.3rem,10vw,3.5rem)}.form-grid{grid-template-columns:1fr}.form-full{grid-column:auto}.project-form{padding:18px}.form-head{align-items:flex-start;flex-direction:column}.nav-ai{justify-content:center}}
@media(max-width:480px){.hero-mini-stats span{width:calc(50% - 6px)}.image-frame img{height:280px}.tech-modern-card{min-height:250px}.tech-modern-card p{min-height:0}.architecture-code{padding:17px 14px}.architecture-code div{gap:10px}.contact-terminal{font-size:.58rem}.project-form input,.project-form select,.project-form textarea{font-size:16px}}
@media(prefers-reduced-motion:reduce){.scanline,.cursor-glow,.inner-hero h1 span,.architecture-code .code-line{animation:none!important}}