: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;

        }

        .hero-svg{

            width:100%;

            height:100%;

        }

/*=========================================
BLUEPRINT
=========================================*/

.bp-grid{

    opacity:.75;

}
.blueprint circle{

    fill:none;

    stroke:#DADADA;
    stroke-width:1.4;
    opacity:.9;

    stroke-width:1.2;

}

.blueprint line{

    stroke:#ECECEC;

    stroke-width:1;

}

.center-point{

    fill:#C9C9C9;

}
/*=========================================
GLASS
=========================================*/

.glass rect{

    fill:url(#glassGradient);

    stroke:#FFFFFF;

    stroke-width:1;

}

.glass-back rect{

    opacity:.45;

}

.glass-front rect{

    opacity:.28;

}
/*==================================================
NETWORK
==================================================*/

.connection{

    fill:none;


    stroke-linecap:round;


    stroke:#CFCFCF;
    opacity:.55;
    stroke-width:1.3;

}

.node{

   fill:url(#glassGradient);

   stroke:#B8B8B8;

   stroke-width:1.8;

   filter:drop-shadow(0 2px 8px rgba(0,0,0,.04));

   transition:

   stroke .4s,

   transform .4s,

   filter .4s;

}

.node.active{

    stroke:var(--orange);

    filter:drop-shadow(0 0 8px rgba(255,139,77,.35));

}

.node:hover{

    transform-box:fill-box;

    transform-origin:center;

    transform:scale(1.12);

    stroke:#FF8B4D;

}

.node::after{

    display:none;

}
.core-glow{

    fill:#FF8B4D;

    opacity:.12;

    animation:corePulse 3.2s ease-in-out infinite;

}


@keyframes corePulse{

    0%{

        transform:scale(.92);

        opacity:.08;

    }

    50%{

        transform:scale(1.12);

        opacity:.18;

    }

    100%{

        transform:scale(.92);

        opacity:.08;

    }

}

.core-ring{

    fill:white;

    stroke:#FF8B4D;

    stroke-width:2;

}

.core-glass{

    fill:url(#coreGradient);

}

.core-center{

    fill:white;

}
.layer-title{

    font-size:11px;

    font-weight:700;

    fill:#6B6B6B;

    letter-spacing:2px;

    text-anchor:middle;

}

.layer-subtitle{

    font-size:8px;

    fill:#A5A5A5;

    letter-spacing:1.6px;

    text-anchor:middle;

}

.cad-label{

    font-size:8px;

    fill:#A8A8A8;

    letter-spacing:1.8px;

}

.cad-value{

    font-size:10px;

    fill:#444;

}

/*==================================================
GLASS SYSTEM
==================================================*/

.glass-surface{

    fill:rgba(255,255,255,.88);

    stroke:rgba(255,255,255,.9);

    stroke-width:1;

}

.glass-back{

    opacity:.12;

}

.glass-middle{

    opacity:.20;

}

.glass-front{

    opacity:.32;

}
.glass-surface{

    fill:url(#glassGradient);

    stroke:rgba(255,255,255,.9);

    stroke-width:1;

    filter:drop-shadow(0 18px 40px rgba(0,0,0,.05));

}


    /*==================================================
LIGHT
==================================================*/

.ambient-glow{

    fill:url(#coreGradient);

    opacity:.05;

}
#network{

    transform-origin:center;

}

/*==================================================
ACTIVE PATH
==================================================*/

.active-line{

    fill:none;

    stroke:var(--orange);

    stroke-width:2;

    stroke-linecap:round;

    opacity:0;

}

/*==================================================
DATA PACKET
==================================================*/

#packet{

    fill:var(--orange);

    filter:drop-shadow(0 0 10px rgba(255,139,77,.55));

}

.glass-highlight{

    fill:none;

    stroke:white;

    stroke-width:1.2;

    opacity:.35;

}
/*==================================================
PHASE 1 : COMPUTER VISION HERO
==================================================*/

.hero-artboard{

    max-width:760px;

    aspect-ratio:760/640;

}

.hero-svg{

    width:100%;

    height:100%;

}

/* CAD GRID */

.cad-grid{

    fill:url(#cadGrid);

    opacity:.9;

}

/* Glow */

.hero-glow{

    fill:url(#heroGlow);

}

/* Perspective */

.floor-grid line{

    stroke:#E8E8E8;

    stroke-width:1;

}

/* Glass */

.glass-panel{

    fill:url(#glassFill);

    stroke:white;

    stroke-width:1;

    filter:drop-shadow(0 20px 45px rgba(0,0,0,.05));

}

/* HUD */

.hud path{

    stroke:#4C84FF;

    stroke-width:2;

    fill:none;

    opacity:.85;

}

/*==================================================
PHASE 2 : INDUSTRIAL MACHINE
==================================================*/

.shaft{

    fill:#d7d7d7;

}

.bearing{

    fill:#ececec;

    stroke:#bcbcbc;

    stroke-width:3;

}

.bearing-inner{

    fill:#fafafa;

    stroke:#bdbdbd;

    stroke-width:2;

}

.gear-body{

    fill:#efefef;

    stroke:#a8a8a8;

    stroke-width:3;
}

.gear-inner{

    fill:white;

    stroke:#b9b9b9;

    stroke-width:2;
}

.gear-hole{

    fill:#d8d8d8;
}

.gear-teeth rect{

    fill:#ededed;

    stroke:#aaaaaa;

    stroke-width:1.3;
}

#machine{

    filter:drop-shadow(0 18px 24px rgba(0,0,0,.06));

}

/*==================================================
PHASE 3 : DETECTION SYSTEM
==================================================*/

.detect-box{

    fill:none;

    stroke:#4C84FF;

    stroke-width:2;

    stroke-dasharray:10 6;

}

.label-bg{

    fill:rgba(255,255,255,.90);

    stroke:white;

    stroke-width:1;

    filter:drop-shadow(0 10px 20px rgba(0,0,0,.05));

}

.label-title{

    font-size:11px;

    font-weight:600;

    fill:#111;

}

.label-score{

    font-size:10px;

    fill:#FF8B4D;

    font-weight:700;

}

.connector{

    stroke:#4C84FF;

    stroke-width:1.4;

    opacity:.65;

}

/*=========================================
VISION DASHBOARD
=========================================*/

.feature{

    fill:#FF8B4D;

}

.engine{

    fill:url(#glassFill);

    stroke:#fff;

    stroke-width:1;

}

.engine-title{

    font-size:11px;

    letter-spacing:2px;

    font-weight:700;

    fill:#111;

}

.engine-value{

    font-size:16px;

    font-weight:700;

    fill:#4C84FF;

}

.engine-sub{

    font-size:10px;

    fill:#777;

}

.flow-line{

    fill:none;

    stroke:#FF8B4D;

    stroke-width:2;

    stroke-dasharray:6 8;

}

.stat-card{

    fill:url(#glassFill);

    stroke:white;

}

.stat-title{

    font-size:10px;

    fill:#888;

}

.stat-value{

    font-size:18px;

    font-weight:700;

    fill:#111;

}