#hero-section {
    position: relative;
    width: 100vw; height: 100vh;
    overflow: hidden;
    background: #001122;
}

#glCanvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; will-change: opacity; }
#carOverlay { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; will-change: opacity; }
#three-hidden { display: none; }
#car-loading { position: absolute; font-size: 7px; letter-spacing: .22em; color: rgba(255,255,255,.28); z-index: 9; pointer-events: none; }

#hero {
    position: absolute; bottom: 110px; left: 60px; z-index: 10;
    padding: 0 28px 0 28px; max-width: 440px; pointer-events: none;
}
.rule-line { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; opacity: .6; }
.rule-line .line { background: #fff; height: 1px; }
.rule-line .num { font-size: 9px; color: #fff; letter-spacing: .1em; }
.rule-line .line-short { width: 28px; }
.rule-line .line-flex { flex: 1; }
.dither-bar {
    position: absolute; left: -8px; top: 0; bottom: 0; width: 3px;
    background-image:
    repeating-linear-gradient(0deg, transparent 0, transparent 1px, rgba(255,255,255,.55) 1px, rgba(255,255,255,.55) 2px),
    repeating-linear-gradient(90deg, transparent 0, transparent 1px, rgba(255,255,255,.55) 1px, rgba(255,255,255,.55) 2px);
    background-size: 3px 3px; opacity: .38;
}
h1.hero-h1 { font-size: clamp(1.5rem,4vw,2.6rem); font-weight: 700; color: #fff; letter-spacing: .12em; line-height: 1.15; margin-bottom: 8px; position: relative; font-family: monospace; }
.name-nguyen { opacity: .88; }
.hero-name-wrap { position: relative; }
.dots-row { display: flex; gap: 3px; margin-bottom: 10px; opacity: .35; }
.dots-row span { width: 2px; height: 2px; background: #fff; border-radius: 50%; display: block; }
p.desc { font-size: clamp(.68rem,1.4vw,.82rem); color: rgba(200,220,230,.78); margin-bottom: 18px; line-height: 1.65; letter-spacing: .02em; }
.btn-row { display: flex; gap: 12px; }
.btn {
    pointer-events: all; padding: 8px 18px; background: transparent;
    border: 1px solid #fff; color: #fff; font-family: monospace;
    font-size: .72rem; letter-spacing: .12em; cursor: pointer;
    transition: background .18s, color .18s; position: relative;
    text-decoration: none; display: inline-flex; align-items: center;
}
.btn:hover { background: var(--accent); color: #001122; border-color: var(--accent); }
.btn .acc { position: absolute; width: 7px; height: 7px; border-color: #fff; border-style: solid; opacity: 0; transition: opacity .18s; }
.btn:hover .acc { opacity: 1; }
.btn .acc-tl { top: -2px; left: -2px; border-width: 1px 0 0 1px; }
.btn .acc-br { bottom: -2px; right: -2px; border-width: 0 1px 1px 0; }
.bottom-note { display: flex; align-items: center; gap: 8px; margin-top: 16px; opacity: .38; }
.bottom-note span { font-size: 8px; color: #fff; letter-spacing: .08em; }
.bottom-note .line { flex: 1; height: 1px; background: #fff; }