: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 clamp(18px, 4vw, 34px);

            border-radius:14px;

            text-decoration:none;

            transition:.35s;

        }

        .btn-primary:hover{

            transform:translateY(-4px);

        }
        .btn-secondary{

            border:1px solid #d8d8d8;

            padding:18px clamp(18px, 4vw, 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;

                gap: 12px;

            }

        }

        .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);

        }


        /*svg part*/
        .hero-svg{

            width:100%;
            height:auto;
            overflow:visible;

        }
        .hero-svg *{

            vector-effect:non-scaling-stroke;

        }

/* Circles */

.draw-circle{

    fill:none;

    stroke:#dfdfdf;

    stroke-width:2;

}

/* Crosshair */

.guide-line{

    stroke:#ebebeb;

    stroke-width:1;

}

/* Center */

.center-point{

    fill:#c9c9c9;

}

/* Measurement */

.measure-line{

    stroke:#d8d8d8;

    stroke-width:1.5;

}

.measure-text{

    font-size:13px;

    fill:#8c8c8c;

    letter-spacing:3px;

    font-family:Inter,sans-serif;

}

/* Notes */

.note{

    font-size:12px;
    fill:#9b9b9b;

    opacity:.85;

    letter-spacing:4px;

    font-family:Inter,sans-serif;

}
.hero-label-dot{

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--orange);

    margin-right:12px;

}
.hero-sign{

    position:absolute;

    right:8%;

    bottom:60px;

}

.signature-line{

    display:block;

    width:90px;

    height:2px;

    background:#222;

    margin-bottom:16px;

}

.signature-text{

    font-family:"Caveat",cursive;

    font-size:30px;

    color:#222;

}

.pencil-barrel{

    fill:#232323;

}

.pencil-ring{

    fill:var(--orange);

}

.pencil-neck{

    fill:#d5d5d5;

}

.pencil-tip{

    fill:#bdbdbd;

}

.graphite{

    fill:#444;

}

.pencil-brand{

    fill:#bdbdbd;

    font-size:9px;

    letter-spacing:2px;

    font-family:Inter,sans-serif;

    user-select:none;

}
.pencil-shadow{

    fill:#000;

    opacity:.05;

    filter:blur(12px);

}
.pencil-highlight{

    stroke:#444;

    stroke-width:1;

    opacity:.35;

}
.ai-node{

    fill:#ffffff;

    stroke:#8d8d8d;

    stroke-width:2;

}

.ai-main{

    fill:var(--orange);

    stroke:none;

}

.pcb-line{

    stroke:#bcbcbc;

    stroke-width:1.5;

}

.pcb-trace{

    fill:none;

    stroke:#c2c2c2;

    stroke-width:2;

    stroke-linecap:round;

    stroke-linejoin:round;

    stroke-dasharray:300;

    stroke-dashoffset:300;

}
.chip-body{

    fill:#ffffff;

    stroke:#8f8f8f;

    stroke-width:2;

}

.chip-pin{

    stroke:#a9a9a9;

    stroke-width:2;

}

.chip-title{

    fill:#2b2b2b;

    font-size:11px;

    font-weight:700;

    letter-spacing:2px;

    font-family:Inter,sans-serif;

}

.chip-subtitle{

    fill:#666;

    font-size:8px;

    letter-spacing:2px;

    font-family:Inter,sans-serif;

}

.chip-rev{

    fill:#999;

    font-size:7px;

    letter-spacing:2px;

    font-family:Inter,sans-serif;

}
.chip-serial{

    font-size:6px;

    fill:#b5b5b5;

    letter-spacing:1px;

}
.pcb-pad{

    fill:#fff;

    stroke:#a9a9a9;

    stroke-width:2;

}
.signal-node{

    fill:var(--orange);

}
.pcb-label{

    fill:#b5b5b5;

    font-size:8px;

    letter-spacing:2px;

    font-family:Inter,sans-serif;

}
.signal{

    fill:var(--orange);

}
.junction{

    fill:#888;

}
.gear-outline{

    fill:none;

    stroke:#909090;

    stroke-width:2;

}

.gear-center{

    fill:#ffffff;

    stroke:#909090;

    stroke-width:2;

}

.gear-tooth{

    fill:#909090;

}
.cloud-outline{

    fill:none;

    stroke:#909090;

    stroke-width:2;

}
.edge-line{

    stroke:#909090;

    stroke-width:2;

}
.revision-tag{

    fill:none;

    stroke:#bcbcbc;

    stroke-width:1.5;

}

.revision-text{

    fill:#9d9d9d;

    font-size:10px;

    font-weight:700;

    font-family:Inter,sans-serif;

}

.stamp{

    fill:none;

    stroke:var(--orange);

    stroke-width:1.5;

    opacity:.7;

}

.stamp-text{

    fill:var(--orange);

    font-size:9px;

    letter-spacing:2px;

    font-family:Inter,sans-serif;

}

.pcb-ref{

    fill:#b2b2b2;

    font-size:8px;

    letter-spacing:2px;

    font-family:Inter,sans-serif;

}
.dimension{

    stroke:#d4d4d4;

    stroke-width:1;

}

.arrow{

    fill:#d4d4d4;

}

.dimension-text{

    fill:#b5b5b5;

    font-size:9px;

    letter-spacing:2px;

}
.cross{

    stroke:#d8d8d8;

    stroke-width:1;

}
.hand-note{

    fill:#8f8f8f;

    font-size:11px;

    font-family:"Caveat",cursive;

    opacity:.8;

}
.active-node{

    fill:none;

    stroke:var(--orange);

    stroke-width:2;

    opacity:.35;

}
.hero-sign{

    position:absolute;

    right:8%;

    bottom:70px;

    text-align:right;

}

.signature-line{

    width:110px;

    height:2px;

    background:#1f1f1f;

    margin-left:auto;

    margin-bottom:14px;

}

.signature-text{

    font-family:"Caveat",cursive;

    font-size:34px;

    color:#222;

    margin:0;

}

.signature-author{

    display:block;

    margin-top:6px;

    font-size:11px;

    letter-spacing:3px;

    color:#888;

    text-transform:uppercase;

}