:root{

            --bg:#fafaf8;

            --surface:#ffffff;

            --text:#111111;

            --muted:#666666;

            --border:#e9e9e9;

            --orange:#ff8b4d;

            --blue:#4f7dff;

            --purple:#8d63ff;

            --coral:#ff5c73;

        }
        .hero{

            background:var(--bg);

            min-height:100svh;

            display:flex;

            align-items:center;

            padding-top:140px;

            padding-bottom:90px;

            position:relative;

            overflow:hidden;

        }
        .hero::before{

            content:"";

            position:absolute;
            inset:0;

            background:

            linear-gradient(
                rgba(0,0,0,.018) 1px,
                transparent 1px
            ),

            linear-gradient(
                90deg,
                rgba(0,0,0,.018) 1px,
                transparent 1px
            );

            background-size:48px 48px;

            opacity:.35;

            pointer-events:none;

        }
        .container{

            width:min(1400px,92%);

            margin:auto;

        }
        .hero-grid{

            display:grid;

            grid-template-columns:46% 54%;

            align-items:center;

            gap:60px;

        }
        .hero-content{

            max-width:640px;

        }
        .hero-label{

            display:inline-flex;

            align-items:center;

            padding:10px 18px;

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

            border-radius:999px;

            font-size:13px;

            letter-spacing:.15em;

            text-transform:uppercase;

            color:#555;

            margin-bottom:28px;

        }
        .hero-title{

            display:flex;

            flex-direction:column;

            gap:6px;

            font-size:82px;

            font-weight:800;

            line-height:.92;

            letter-spacing:-3px;

            color:var(--text);

        }
        .gradient{

            background:linear-gradient(
                90deg,
                var(--blue),
                var(--purple),
                var(--orange),
                var(--coral)
            );

            -webkit-background-clip:text;

            color:transparent;

        }
        .hero-description{

            margin-top:34px;

            font-size:20px;

            line-height:1.8;

            color:var(--muted);

            max-width:520px;

        }
        .hero-buttons{

            display:flex;

            gap:18px;

            margin-top:42px;

        }
        .btn-primary{

            background:#111;

            color:#fff;

            padding:18px 34px;

            border-radius:14px;

            text-decoration:none;

            transition:.35s;

        }

        .btn-primary:hover{

            transform:translateY(-4px);

        }
        .btn-secondary{

            border:1px solid #d8d8d8;

            padding:18px 34px;

            border-radius:14px;

            color:#111;

            text-decoration:none;

        }
        .hero-visual{

            display:flex;

            justify-content:center;

            align-items:center;

        }

        @media(max-width:992px){

            .hero{

                padding-top:120px;

            }

            .hero-grid{

                grid-template-columns:1fr;

                gap:70px;

            }

            .hero-title{

                font-size:58px;

            }

            .hero-description{

                font-size:18px;

            }

            .hero-buttons{

                flex-wrap:wrap;

            }

        }

        .circle-guide{

            position:absolute;

            width:650px;
            height:650px;

            border:1px solid rgba(0,0,0,.04);

            border-radius:50%;

        }

        .cross{

            width:12px;
            height:12px;
            position:absolute;

        }

        .cross::before,
        .cross::after{

            content:"";
            position:absolute;
            background:#d5d5d5;

        }

        .cross::before{

            width:12px;
            height:1px;
            top:50%;

        }

        .cross::after{

            width:1px;
            height:12px;
            left:50%;

        }


        .hero-artboard{

            position:relative;

            width:100%;

            max-width:560px;

            margin:0 auto;

            aspect-ratio:auto;

            display:flex;

            justify-content:center;

            align-items:center;

        }



        .note{

            position:absolute;

            font-size:11px;

            letter-spacing:.15em;

            text-transform:uppercase;

            color:#9a9a9a;

        }


        .reveal-up{

            opacity:0;

            transform:translateY(40px);

        }

        .reveal-scale{

            opacity:0;

            transform:scale(.92);

        }

        .reveal-note{

            opacity:0;

            transform:translateY(15px);

        }


        .hero-artboard{

            position:relative;

            width:100%;

            max-width:760px;

            aspect-ratio:760/640;

        }



/*SVG*/


       .hero-artboard{

        width:100%;

        max-width:760px;

        margin:auto;

    }
    .hero-svg{

        width:100%;

        height:auto;

        overflow:visible;

    }

    .hero-svg *{

        vector-effect:non-scaling-stroke;

    }

/*=====================================
      Transformer Skeleton
=====================================*/

.guide-frame{

    fill:none;

    stroke:#D7D7D7;

    stroke-width:1.5;

    stroke-dasharray:8 6;

}

.section-title{

    fill:#2F2F2F;

    font-family:Inter,sans-serif;

    font-size:18px;

    font-weight:700;

    letter-spacing:4px;

}

.section-subtitle{

    fill:#999;

    font-family:Inter,sans-serif;

    font-size:11px;

    letter-spacing:3px;

}

.impact-node{

    fill:var(--orange);

}

.impact-text{

    fill:#8E8E8E;

    font-family:Inter,sans-serif;

    font-size:10px;

    letter-spacing:3px;

}

.core-ring{

    fill:#fff;

    stroke:#999;

    stroke-width:2;

}

.core-dot{

    fill:var(--orange);

}

.tf-module-box{

    fill:#ffffff;

    stroke:#A6A6A6;

    stroke-width:1.6;

}

.tf-divider{

    stroke:#CFCFCF;

    stroke-width:1.2;

}

.tf-title{

    fill:#333;

    font-size:11px;

    font-family:Inter,sans-serif;

    font-weight:700;

    letter-spacing:2px;

}

.tf-sub{

    fill:#8A8A8A;

    font-size:10px;

    font-family:Inter,sans-serif;

    letter-spacing:1px;

}

.tf-trace{

    fill:none;

    stroke:#C2C2C2;

    stroke-width:2;

    stroke-linecap:round;

    stroke-linejoin:round;

}
.tf-port{

    fill:#fff;

    stroke:#9A9A9A;

    stroke-width:1.5;

}

.tf-port-line{

    stroke:#BDBDBD;

    stroke-width:1.5;

}
.tf-stack-line{

    stroke:#C8C8C8;

    stroke-width:2;

    stroke-linecap:round;

}

.tf-id{

    fill:#A4A4A4;

    font-size:7px;

    letter-spacing:1px;

    font-family:Inter,sans-serif;

}

.tf-rev{

    fill:#B0B0B0;

    font-size:7px;

    letter-spacing:1px;

    font-family:Inter,sans-serif;

}

.tf-status{

    fill:var(--orange);

}

.tf-id{

    fill:#999;

    font-size:7px;

    font-family:Inter,sans-serif;

    letter-spacing:1px;

}

.tf-rev{

    fill:#B3B3B3;

    font-size:7px;

    font-family:Inter,sans-serif;

    letter-spacing:1px;

}

.core-node{

    fill:#fff;

    stroke:#999;

    stroke-width:1.5;

}

.core-link{

    stroke:#C8C8C8;

    stroke-width:1.5;

}

.tf-residual{

    fill:none;

    stroke:#E1E1E1;

    stroke-width:1.4;

    stroke-dasharray:6 6;

}