/* ============================================
   Vince Wu | Moto Command Center
   Global Styles - Raycast/Linear/Vercel Inspired
   ============================================ */
@font-face {
  font-family: 'Geist Web';
  src: url('./assets/fonts/Geist-Variable.woff2') format('woff2-variations');
  font-style: normal;
  font-weight: 100 900;
  font-display: block;
}

@font-face {
  font-family: 'Geist Mono Web';
  src: url('./assets/fonts/GeistMono-Variable.woff2') format('woff2-variations');
  font-style: normal;
  font-weight: 100 900;
  font-display: block;
}

@font-face {
  font-family: 'Source Han Sans CN Web';
  src: url('./assets/fonts/SourceHanSansCN-VF.woff2') format('woff2-variations');
  font-style: normal;
  font-weight: 250 900;
  font-display: block;
}

:root {
  --bg-base:#0A0A0B; --bg-surface:#111113; --bg-elevated:#19191B; --bg-hover:#222224;
  --text-primary:#EDEDEF; --text-secondary:#A0A0A6; --text-tertiary:#6B6B76;
  --border-subtle:rgba(255,255,255,0.06); --border-default:rgba(255,255,255,0.08); --border-strong:rgba(255,255,255,0.14);
  --accent:#A7F432; --accent-hover:#A7F432; --accent-glow:rgba(167,244,50,0.10);
  --signal:#A7F432; --signal-dim:rgba(167,244,50,0.10); --titanium:#9CA3AF;
  --hero-sketch-brightness:0.71; --hero-bg-hue:36deg; --hero-bg-brightness:1.5; --hero-sketch-x:30px; --hero-sketch-y:-116px;
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:20px; --radius-full:9999px;
  --font-sans:'Geist Web','Source Han Sans CN Web';
  --font-mono:'Geist Mono Web','Source Han Sans CN Web';
  --ease:cubic-bezier(0.16,1,0.3,1);
}
[data-theme="light"] {
  --bg-base:#FAFAFA; --bg-surface:#FFFFFF; --bg-elevated:#F4F4F5; --bg-hover:#E4E4E7;
  --text-primary:#18181B; --text-secondary:#52525B; --text-tertiary:#A1A1AA;
  --border-subtle:rgba(0,0,0,0.04); --border-default:rgba(0,0,0,0.08); --border-strong:rgba(0,0,0,0.14);
  --accent-glow:rgba(167,244,50,0.06); --signal-dim:rgba(167,244,50,0.06);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}
body{font-family:var(--font-sans);background:var(--bg-base);color:var(--text-primary);line-height:1.6;overflow-x:hidden}
html.intro-lock,html.intro-lock body{overflow:hidden;overscroll-behavior:none}
html.intro-lock body{position:fixed;inset:0;width:100%;touch-action:none}
html.intro-lock .hero{position:fixed;inset:0;z-index:10000;min-height:100svh;height:100svh;padding:0 24px;background:#000}
html.intro-lock .nav,html.intro-lock .mobile-menu,html.intro-lock .back-to-top{visibility:hidden;pointer-events:none}
html.intro-lock .hero-logo-track{z-index:6}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--accent);color:#fff}

/* Noise */
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:0.015;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:256px 256px}

/* ============================================
   Layout
   ============================================ */
.container{max-width:960px;margin:0 auto;padding:0 24px}
#skills .container{max-width:1180px}
.section{padding:120px 0;position:relative}
.section-header{text-align:center;margin-bottom:64px}
.section-label{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;background:var(--accent-glow);border:1px solid rgba(167,244,50,0.2);border-radius:var(--radius-full);font-family:var(--font-mono);font-size:11px;font-weight:500;color:var(--accent);letter-spacing:0.06em;text-transform:uppercase;margin-bottom:16px}
.section-title{font-size:clamp(28px,4vw,40px);font-weight:700;letter-spacing:-0.03em;line-height:1.15;margin-bottom:12px}
.section-desc{font-size:16px;color:var(--text-secondary);max-width:480px;margin:0 auto;line-height:1.7}

/* ============================================
   Navigation - Floating
   ============================================ */
.nav{position:fixed;top:16px;left:50%;transform:translateX(-50%);width:calc(100% - 60px);max-width:640px;z-index:1000;transition:all 0.25s var(--ease)}
.nav-inner{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:18px;height:64px;padding:0 20px;background:rgba(13,13,15,.92);backdrop-filter:saturate(160%) blur(22px);-webkit-backdrop-filter:saturate(160%) blur(22px);border:1px solid rgba(255,255,255,.10);border-radius:18px;box-shadow:0 14px 40px rgba(0,0,0,.22)}.nav-brand{display:flex;align-items:center;justify-content:center;padding:7px;border-radius:10px;font-size:13px;font-weight:600;letter-spacing:-0.01em;transition:background .15s,transform .15s}
.nav-brand:hover{background:var(--bg-hover);transform:translateY(-1px)}
.nav-mark{width:20px;height:20px;display:flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;border-radius:6px;font-size:11px;font-weight:700}
.nav-logo-wordmark{display:block;width:auto;height:24px;object-fit:contain}
.nav-sep,.nav-label{display:none}
.nav-links{display:flex;gap:8px;min-width:0;overflow:hidden}
.nav-links-left{justify-content:flex-end}
.nav-links-right{justify-content:flex-start}
.nav-links::-webkit-scrollbar{display:none}
.nav-link{font-size:13px;font-weight:500;color:#8f8f96;padding:8px 8px;border-radius:9px;transition:all 0.15s;white-space:nowrap}
.nav-link:hover{color:var(--text-primary);background:var(--bg-hover)}
.nav-actions{display:flex;flex:0 0 auto;align-items:center;gap:8px}
.theme-btn{display:none;width:32px;height:32px;align-items:center;justify-content:center;border-radius:var(--radius-sm);color:var(--text-tertiary);transition:all 0.15s}
.theme-btn:hover{color:var(--text-primary);background:var(--bg-hover)}
.icon-moon{display:none}[data-theme="light"] .icon-sun{display:none}[data-theme="light"] .icon-moon{display:block}

.nav-cta:hover{opacity:0.85}
.mobile-btn{display:none;width:32px;height:32px;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--text-secondary);border-radius:var(--radius-sm)}
.mobile-btn span{display:block;width:15px;height:1.5px;background:currentColor;border-radius:2px}
.mobile-btn:hover{color:var(--text-primary);background:var(--bg-hover)}
.mobile-menu{display:none;position:fixed;top:80px;left:12px;right:12px;z-index:999;padding:12px;background:rgba(13,13,15,.97);backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.10);border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.42);grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.mobile-menu.active{display:grid}
.mobile-link{padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.035);font-size:14px;font-weight:500;color:var(--text-secondary);transition:color .15s,background .15s}
.mobile-link:hover{color:var(--accent)}
@media(max-width:900px){
.nav{top:12px;width:calc(100% - 24px);max-width:none}
.nav-inner{display:flex;justify-content:space-between;height:58px;padding:0 18px;gap:16px;border-radius:17px}
.nav-logo-wordmark{height:22px}
.nav-links,.nav-sep,.nav-label{display:none}
.nav-actions{display:none}
.mobile-btn{display:flex}
.mobile-menu{top:82px}
}
@media(min-width:901px){.mobile-menu.active{display:none}}

/* Navigation-integrated RPM — scheme 02 / Horizon */
.nav{display:flex;flex-direction:column-reverse;max-width:760px;overflow:hidden;border:1px solid rgba(255,255,255,.12);border-radius:20px;background:rgba(11,13,11,.94);box-shadow:0 18px 52px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.035);backdrop-filter:saturate(160%) blur(24px);-webkit-backdrop-filter:saturate(160%) blur(24px)}
.nav-inner{height:64px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.025));border:0;border-radius:0;box-shadow:inset 0 1px rgba(255,255,255,.018)}
.nav .nav-logo-wordmark{height:27px;filter:drop-shadow(0 0 10px rgba(167,244,50,.16))}
.nav .nav-link{color:rgba(239,241,238,.64);font-weight:540}.nav .nav-link:hover{color:#f4f6f3;background:rgba(255,255,255,.055)}
.nav-rpm{--nav-rpm-progress:0;position:relative;height:46px;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.055);background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(167,244,50,.006));font-family:var(--font-mono);touch-action:none;user-select:none;cursor:grab}
.nav-rpm:focus-visible{outline:2px solid rgba(167,244,50,.72);outline-offset:-3px}
.nav-rpm.is-dragging{cursor:grabbing}
.nav-rpm__gauge{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.nav-rpm__halo,.nav-rpm__track,.nav-rpm__value,.nav-rpm__rim{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
.nav-rpm__halo{stroke:url(#navRpmGradient);stroke-width:8;opacity:.055;filter:blur(4px)}
.nav-rpm__track{stroke:url(#navRpmGradient);stroke-width:3;opacity:.18}
.nav-rpm__value{stroke:url(#navRpmGradient);stroke-width:3;stroke-dasharray:100;stroke-dashoffset:98.6;opacity:.78;filter:drop-shadow(0 0 3px rgba(167,244,50,.4))}
.nav-rpm__rim{stroke:url(#navRpmRimGradient);stroke-width:.75;opacity:.45}
.nav-rpm__tick{stroke:rgba(240,245,237,.22);stroke-width:.8;transition:stroke .16s ease,opacity .16s ease}.nav-rpm__tick.is-major{stroke:rgba(242,245,240,.52);stroke-width:1.2}.nav-rpm__tick.is-warning{stroke:rgba(255,241,47,.6)}.nav-rpm__tick.is-redline{stroke:rgba(255,70,81,.65)}.nav-rpm__tick.is-active{stroke:rgba(240,255,228,.72);filter:drop-shadow(0 0 1px rgba(167,244,50,.7))}
.nav-rpm__label{font:620 7px var(--font-mono);fill:rgba(244,247,242,.42);text-anchor:middle;dominant-baseline:middle}.nav-rpm__label.is-warning{fill:rgba(237,238,50,.58)}.nav-rpm__label.is-redline{fill:rgba(255,70,81,.62)}
.nav-rpm__unit{font:600 6px var(--font-mono);letter-spacing:.08em;fill:rgba(240,244,237,.4);text-anchor:middle}
.nav-rpm__readout{position:absolute;z-index:2;left:22px;top:2px;color:rgba(244,247,242,.72)}.nav-rpm__readout strong{font:650 12px/.9 var(--font-mono);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.nav-rpm.is-redline{box-shadow:inset 0 0 28px rgba(255,56,69,.055)}
@media(max-width:900px){
  .nav{top:12px;width:calc(100% - 24px);max-width:none;border-radius:17px}
  .nav-inner{height:58px;padding:0 16px}.nav .nav-logo-wordmark{height:24px}
  .nav-rpm{height:38px}.nav-rpm__gauge{height:38px}
  .nav-rpm__readout{left:14px;top:1px}.nav-rpm__readout strong{font-size:10px}
  .nav-rpm__label{font-size:6px}.nav-rpm__unit{font-size:4px}
  .mobile-menu{top:108px}
}

/* ============================================
   Buttons
   ============================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;font-size:14px;font-weight:500;border-radius:var(--radius-md);transition:all 0.2s var(--ease);cursor:pointer;border:none}
.btn-primary{background:var(--accent);color:#0D0D0F;box-shadow:0 0 0 1px rgba(255,255,255,0.1)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(167,244,50,0.2),0 0 0 1px rgba(167,244,50,0.3)}
.btn-primary svg{transition:transform 0.2s}.btn-primary:hover svg{transform:translateX(2px)}
.btn-secondary{background:var(--bg-elevated);color:var(--text-primary);border:1px solid var(--border-default)}
.btn-secondary:hover{background:var(--bg-hover);border-color:var(--border-strong);transform:translateY(-1px)}
.btn-ghost{color:var(--text-tertiary);padding:10px 16px}.btn-ghost:hover{color:var(--text-secondary)}
.btn-full{width:100%}

/* ============================================
   Hero Section
   ============================================ */
.hero{position:relative;min-height:78svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:156px 24px 86px;overflow:hidden;background:#000}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-image-bg{position:absolute;inset:0;z-index:1;overflow:hidden;background:#0b1410;filter:hue-rotate(var(--hero-bg-hue)) brightness(var(--hero-bg-brightness)) saturate(1.08) contrast(1.06);will-change:opacity}
.hero-hud-bg{font-family:"Rajdhani","Bahnschrift","Helvetica Neue",Arial,sans-serif}
.hero-hud-bg__screen,.hero-hud-bg__hud{position:absolute;inset:0;pointer-events:none}
.hero-hud-bg__screen{overflow:hidden;background:radial-gradient(58% 62% at 44% 40%,rgba(167,244,50,.31) 0%,rgba(167,244,50,.18) 30%,rgba(167,244,50,.095) 58%,#171b17 80%,#0d100d 100%)}
.hero-hud-bg__grid{position:absolute;inset:-60px;background-image:linear-gradient(rgba(183,238,201,.085) 1px,transparent 1px),linear-gradient(90deg,rgba(183,238,201,.085) 1px,transparent 1px);background-size:48.5px 48.4px;background-position:-1px -1px}
.hero-hud-bg__bloom{position:absolute;inset:0;background:radial-gradient(40% 45% at 44% 38%,rgba(174,255,205,.12),transparent 70%)}
.hero-hud-bg__vig{position:absolute;inset:0;background:radial-gradient(78% 88% at 44% 42%,transparent 38%,rgba(0,0,0,.36) 76%,rgba(0,0,0,.74) 100%),linear-gradient(90deg,rgba(0,0,0,.44),transparent 12%,transparent 86%,rgba(0,0,0,.44)),linear-gradient(180deg,rgba(0,0,0,.38),transparent 10%,transparent 88%,rgba(0,0,0,.44))}
.hero-hud-bg__gloss{position:absolute;inset:0;background:linear-gradient(122deg,rgba(215,255,232,.055) 0%,transparent 26%,transparent 74%,rgba(200,255,225,.035)),repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 3px)}
.hero-hud-bg__scan{position:absolute;left:0;right:0;height:150px;background:linear-gradient(180deg,transparent,rgba(170,255,205,.045),transparent);animation:heroHudScan 9s linear infinite}
.hero-hud-bg__br{position:absolute;border:1px solid rgba(205,255,220,.85);filter:drop-shadow(0 0 3px rgba(120,255,170,.4))}
.hero-hud-bg__br--tl{left:30px;top:38px;width:30px;height:32px;border-right:0;border-bottom:0}
.hero-hud-bg__br--tr{right:30px;top:38px;width:30px;height:32px;border-left:0;border-bottom:0}
.hero-hud-bg__br--bl{left:30px;bottom:24px;width:30px;height:32px;border-right:0;border-top:0}
.hero-hud-bg__br--br{right:30px;bottom:24px;width:30px;height:32px;border-left:0;border-top:0}
.hero-hud-bg__dframe{position:absolute;left:42px;top:44px;right:42px;bottom:30px;border:1px dashed rgba(180,240,200,.55)}
.hero-image-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.15) 42%,rgba(0,0,0,.65) 100%),linear-gradient(90deg,rgba(0,0,0,.66) 0%,rgba(0,0,0,.15) 34%,rgba(0,0,0,.08) 62%,rgba(0,0,0,.52) 100%),radial-gradient(ellipse 58% 38% at 50% 48%,rgba(0,0,0,.46) 0%,rgba(0,0,0,.3) 45%,rgba(0,0,0,.08) 76%,transparent 100%);pointer-events:none}
.hero-sketch-layer{position:absolute;z-index:2;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;contain:paint;mix-blend-mode:screen;filter:grayscale(1) invert(1) brightness(var(--hero-sketch-brightness)) contrast(.72);will-change:opacity}
.hero-sketch-layer img{position:absolute;left:var(--hero-sketch-anchor-x,50%);top:var(--hero-sketch-anchor-y,50%);display:block;width:100%;height:calc(100% + 240px);max-width:none;object-fit:cover;object-position:center 46%;opacity:.46;translate:calc(-50% + var(--hero-sketch-x)) calc(-50% + var(--hero-sketch-y));transform:scale(1.02);user-select:none}
@keyframes heroHudScan{0%{top:-150px}100%{top:100%}}
.hero::after{content:"";position:absolute;z-index:2;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,transparent 28%,rgba(0,0,0,.62) 100%)}
.hero-chalk-trail{position:absolute;z-index:3;inset:0;width:100%;height:100%;pointer-events:none;opacity:1;mix-blend-mode:screen;filter:drop-shadow(0 0 10px rgba(167,244,50,.28));will-change:opacity}
.hero-content{position:relative;z-index:4;text-align:center;max-width:1180px;width:100%}
.hero-instrument{width:min(650px,88vw);margin:0 auto 34px;font-family:var(--font-mono);text-align:left}
.instrument-bezel{position:relative;isolation:isolate;overflow:hidden;padding:17px 28px 13px;clip-path:polygon(7% 0,93% 0,100% 43%,94% 100%,6% 100%,0 43%);background:linear-gradient(180deg,#242725 0,#0a0c0b 14%,#101311 88%,#252825 100%);filter:drop-shadow(0 28px 36px rgba(0,0,0,.58));box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.instrument-bezel::before{content:'';position:absolute;z-index:-1;inset:7px 12px 8px;clip-path:polygon(6% 0,94% 0,100% 45%,94% 100%,6% 100%,0 45%);border:1px solid rgba(167,244,50,.18);background:linear-gradient(180deg,rgba(29,34,30,.97),rgba(4,6,5,.98) 54%,rgba(18,22,19,.98));box-shadow:inset 0 0 55px rgba(167,244,50,.035)}
.instrument-rpm{position:relative;height:70px;margin:0 34px;color:#e7ece4}
.instrument-rpm__band{position:absolute;left:0;right:0;top:6px;height:6px;border-radius:8px;background:linear-gradient(90deg,#A7F432 0,#a7f432 58%,#f7e527 76%,#ff9d22 87%,#e83d38 100%);box-shadow:0 0 12px rgba(167,244,50,.18)}
.instrument-rpm__ticks{position:absolute;left:1%;right:1%;top:18px;height:19px;background:repeating-linear-gradient(90deg,rgba(243,247,240,.66) 0 1px,transparent 1px 10px);clip-path:polygon(0 0,100% 0,94% 100%,6% 100%)}
.instrument-rpm__numbers{position:absolute;left:3%;right:3%;top:35px;display:flex;justify-content:space-between;font-size:10px;font-weight:600;color:rgba(240,244,237,.72)}
.instrument-rpm__numbers span:nth-last-child(-n+2){color:#f2d52c}.instrument-rpm small{position:absolute;right:-27px;top:31px;writing-mode:vertical-rl;font-size:6px;letter-spacing:.08em;color:rgba(240,244,237,.34)}
.instrument-screen{position:relative;display:grid;grid-template-columns:30px 1fr 104px 1fr 30px;align-items:center;gap:12px;margin:-6px 10px 0;padding:10px 20px 8px;clip-path:polygon(8% 0,92% 0,100% 50%,92% 100%,8% 100%,0 50%);background:linear-gradient(115deg,rgba(255,255,255,.065),rgba(255,255,255,.015) 34%,rgba(255,255,255,.06) 70%,rgba(255,255,255,.015));border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.10)}
.instrument-status{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:8px;color:#a7f432}.instrument-status i{width:8px;height:8px;border:1px solid currentColor;border-radius:50%;box-shadow:0 0 8px rgba(167,244,50,.22)}.instrument-status--right{color:#e3d629}
.instrument-readout__top{display:flex;align-items:center;justify-content:space-between;padding-bottom:5px;border-bottom:1px solid rgba(255,255,255,.09);font-size:7px;color:rgba(234,240,230,.38)}.instrument-readout__top strong{font-size:9px;color:rgba(242,246,240,.76)}
.instrument-speed{display:flex;align-items:flex-end;justify-content:center;gap:6px;margin:9px 0 7px}.instrument-speed strong{font:610 43px/.82 var(--font-mono);letter-spacing:-.065em;color:#f2f4f1}.instrument-speed span{padding-bottom:3px;font-size:7px;letter-spacing:.08em;color:rgba(232,240,226,.42)}
.instrument-temp{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:5px;font-size:6px;color:rgba(235,240,232,.42)}.instrument-temp i{height:3px;border-radius:2px;background:linear-gradient(90deg,#a7f432 62%,rgba(255,255,255,.08) 62%)}.instrument-temp strong{grid-column:1/-1;text-align:center;font-size:8px;color:rgba(240,244,238,.70)}
.instrument-gear{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;height:112px;margin-top:-21px;border:1px solid rgba(167,244,50,.34);border-radius:8px;background:linear-gradient(155deg,#A7F432,rgba(167,244,50,.72) 68%,rgba(167,244,50,.48));box-shadow:0 0 25px rgba(167,244,50,.14),inset 0 1px 0 rgba(255,255,255,.22)}
.instrument-lap{position:absolute;top:-26px;width:150px;text-align:center;font-size:8px;letter-spacing:.05em;color:rgba(241,245,238,.64)}.instrument-gear strong{font:680 61px/.9 var(--font-mono);letter-spacing:-.06em;color:white;text-shadow:0 2px 8px rgba(0,0,0,.28)}.instrument-gear small{margin-top:8px;font-size:7px;letter-spacing:.32em;color:#a7f432}
.instrument-mode-name{display:flex;align-items:center;justify-content:center;gap:9px;margin:19px 0 14px}.instrument-mode-name span{writing-mode:vertical-rl;font-size:6px;letter-spacing:.13em;color:rgba(235,240,232,.35)}.instrument-mode-name strong{font-size:21px;letter-spacing:.04em;color:#f1f4ef}
.instrument-assist{display:flex;flex-direction:column;gap:4px;font-size:7px;color:rgba(235,240,232,.58)}.instrument-assist span{display:grid;grid-template-columns:24px 1fr auto;align-items:center}.instrument-assist i{height:3px;border-radius:2px;background:linear-gradient(90deg,#a7f432 76%,rgba(255,255,255,.08) 76%)}
.instrument-footer{position:relative;display:flex;align-items:center;justify-content:space-between;margin:8px 58px 0;font-size:7px;letter-spacing:.13em;color:rgba(229,238,222,.33)}.instrument-footer strong{font-size:9px;font-weight:650;letter-spacing:.28em;color:rgba(238,243,235,.70)}.instrument-footer span:first-child{color:#a7f432}
.hero-instrument{--rpm-progress:.0143;width:min(760px,91vw);margin-bottom:38px;touch-action:pan-y;user-select:none}
.instrument-bezel--rpm-only{height:148px;padding:0;clip-path:polygon(7% 5%,93% 5%,100% 74%,96% 100%,4% 100%,0 74%);background:linear-gradient(180deg,#313431 0,#151716 12%,#050706 58%,#151816 100%);filter:drop-shadow(0 24px 42px rgba(0,0,0,.62));box-shadow:none}
.instrument-bezel--rpm-only::before{inset:9px 16px 10px;clip-path:polygon(6% 0,94% 0,100% 72%,96% 100%,4% 100%,0 72%);border:1px solid rgba(235,240,232,.22);background:radial-gradient(ellipse 80% 120% at 50% 112%,#252826 0,#101311 52%,#070908 77%)}
.instrument-bezel--rpm-only .instrument-rpm{height:100%;margin:0 48px}
.instrument-bezel--rpm-only .instrument-rpm__band{left:0;right:0;top:13px;height:78px;border-radius:50% 50% 0 0/100% 100% 0 0;background:linear-gradient(90deg,#A7F432 0,#A7F432 49%,#ffea2d 67%,#ffda26 77%,#ff8727 89%,#e92b38 100%);opacity:.2;-webkit-mask:radial-gradient(ellipse 72% 112% at 50% 105%,transparent 70%,#000 71% 78%,transparent 79%);mask:radial-gradient(ellipse 72% 112% at 50% 105%,transparent 70%,#000 71% 78%,transparent 79%)}
.instrument-bezel--rpm-only .instrument-rpm__band--active{right:auto;width:calc(var(--rpm-progress) * 100%);opacity:1;box-shadow:0 0 15px rgba(118,235,78,.28);transition:none}
.instrument-bezel--rpm-only .instrument-rpm__ticks{left:1%;right:1%;top:31px;height:80px;background:repeating-conic-gradient(from 244deg at 50% 112%,rgba(250,252,248,.86) 0 .35deg,transparent .35deg 2.2deg);clip-path:none;-webkit-mask:radial-gradient(ellipse 73% 112% at 50% 105%,transparent 73%,#000 74% 89%,transparent 90%);mask:radial-gradient(ellipse 73% 112% at 50% 105%,transparent 73%,#000 74% 89%,transparent 90%)}
.instrument-rpm__cursor{position:absolute;z-index:3;left:calc(var(--rpm-progress) * 100%);top:calc(89px - var(--rpm-arc,0) * 70px);width:1px;height:1px;pointer-events:none}
.instrument-rpm__cursor i{position:absolute;width:8px;height:8px;border:2px solid #f7fff0;border-radius:50%;background:#a7f432;box-shadow:0 0 0 4px rgba(167,244,50,.13),0 0 18px 6px rgba(167,244,50,.42);transform:translate(-50%,-50%)}
.instrument-bezel--rpm-only .instrument-rpm__numbers{left:2.5%;right:2.5%;top:78px;display:grid;grid-template-columns:repeat(15,1fr);align-items:start;text-align:center;font-size:11px;font-weight:620;color:rgba(239,243,237,.78)}
.instrument-bezel--rpm-only .instrument-rpm__numbers span:nth-child(1),.instrument-bezel--rpm-only .instrument-rpm__numbers span:nth-child(15){transform:translateY(17px)}
.instrument-bezel--rpm-only .instrument-rpm__numbers span:nth-child(2),.instrument-bezel--rpm-only .instrument-rpm__numbers span:nth-child(14){transform:translateY(10px)}
.instrument-bezel--rpm-only .instrument-rpm__numbers span:nth-child(3),.instrument-bezel--rpm-only .instrument-rpm__numbers span:nth-child(13){transform:translateY(5px)}
.instrument-bezel--rpm-only .instrument-rpm__numbers span:nth-child(4),.instrument-bezel--rpm-only .instrument-rpm__numbers span:nth-child(12){transform:translateY(1px)}
.instrument-bezel--rpm-only .instrument-rpm__numbers span:nth-child(5),.instrument-bezel--rpm-only .instrument-rpm__numbers span:nth-child(11){transform:translateY(-2px)}
.instrument-bezel--rpm-only .instrument-rpm__numbers span:nth-child(6),.instrument-bezel--rpm-only .instrument-rpm__numbers span:nth-child(10){transform:translateY(-4px)}
.instrument-bezel--rpm-only .instrument-rpm__numbers span:nth-child(7),.instrument-bezel--rpm-only .instrument-rpm__numbers span:nth-child(9){transform:translateY(-5px)}
.instrument-bezel--rpm-only .instrument-rpm__numbers span:nth-child(n+12){color:#f0d833}.instrument-bezel--rpm-only .instrument-rpm__numbers span:nth-child(n+14){color:#f04a43}
.instrument-bezel--rpm-only .instrument-rpm__label{position:absolute;right:-35px;top:76px;writing-mode:vertical-rl;font-size:7px;letter-spacing:.08em;color:rgba(239,243,237,.42)}
.instrument-rpm__readout{position:absolute;z-index:2;left:50%;top:41px;display:flex;align-items:baseline;gap:7px;transform:translateX(-50%);color:#f5f8f3;text-shadow:0 0 20px rgba(167,244,50,.18)}
.instrument-rpm__readout strong{font:650 25px/1 var(--font-mono);letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.instrument-rpm__readout span{font-size:7px;letter-spacing:.14em;color:rgba(239,243,237,.42)}
.instrument-rpm__numbers span{transition:color .16s ease,opacity .16s ease,text-shadow .16s ease}
.instrument-rpm__numbers span.is-passed{color:#f4f8f1!important;opacity:1;text-shadow:0 0 8px rgba(167,244,50,.45)}
.rpm-cockpit{position:relative;height:184px;overflow:hidden;clip-path:polygon(5% 3%,95% 3%,100% 70%,96% 100%,4% 100%,0 70%);background:linear-gradient(180deg,rgba(39,43,40,.9),rgba(7,9,8,.96) 15%,#030504 66%,rgba(21,25,22,.96));border-top:1px solid rgba(255,255,255,.22);filter:drop-shadow(0 26px 44px rgba(0,0,0,.7));isolation:isolate}
.rpm-cockpit::before{content:"";position:absolute;z-index:-1;inset:7px 13px 9px;clip-path:polygon(4% 0,96% 0,100% 70%,96% 100%,4% 100%,0 70%);border:1px solid rgba(167,244,50,.15);background:radial-gradient(ellipse 76% 100% at 50% 106%,rgba(71,94,63,.2),transparent 63%),linear-gradient(180deg,rgba(20,24,21,.96),rgba(2,4,3,.98));box-shadow:inset 0 -22px 60px rgba(0,0,0,.7)}
.rpm-cockpit::after{content:"";position:absolute;inset:8px 14px;pointer-events:none;background:linear-gradient(108deg,transparent 12%,rgba(255,255,255,.045) 33%,transparent 47%);clip-path:inherit}
.rpm-cockpit__ambient{position:absolute;left:8%;right:8%;top:-62px;height:150px;border-radius:50%;background:radial-gradient(ellipse,rgba(167,244,50,.12),transparent 68%);filter:blur(22px);opacity:.8}
.rpm-gauge{position:absolute;z-index:1;inset:0;width:100%;height:100%;overflow:visible}
.rpm-gauge__halo,.rpm-gauge__track,.rpm-gauge__value{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
.rpm-gauge__halo{stroke:url(#heroRpmGradient);stroke-width:23;opacity:.1;filter:blur(8px)}
.rpm-gauge__track{stroke:url(#heroRpmGradient);stroke-width:11;opacity:.5}
.rpm-gauge__value{stroke:url(#heroRpmGradient);stroke-width:11;stroke-dasharray:100;stroke-dashoffset:98.6;filter:url(#heroRpmGlow)}
.rpm-gauge__tick{stroke:rgba(236,244,232,.28);stroke-width:1;transition:stroke .16s ease,opacity .16s ease}.rpm-gauge__tick.is-major{stroke:rgba(244,249,241,.7);stroke-width:1.7}.rpm-gauge__tick.is-active{stroke:#a7f432;opacity:1;filter:drop-shadow(0 0 3px #a7f432)}
.rpm-gauge__tick.is-warning{stroke:#ffe12b}.rpm-gauge__tick.is-redline{stroke:#ff5660}
.rpm-gauge__label{font:650 11px var(--font-mono);fill:rgba(245,248,243,.72);text-anchor:middle;dominant-baseline:middle}.rpm-gauge__label.is-warning{fill:#e8ef31}.rpm-gauge__label.is-redline{fill:#ff3e46}
.rpm-gauge__inner-rim{fill:none;stroke:rgba(234,238,232,.72);stroke-width:2;vector-effect:non-scaling-stroke;filter:drop-shadow(0 1px 2px #000)}
.rpm-gauge__unit{font:600 7px var(--font-mono);letter-spacing:.08em;fill:rgba(239,244,236,.55);text-anchor:middle}
.rpm-cockpit__readout{position:absolute;z-index:2;left:50%;top:102px;display:flex;flex-direction:column;align-items:center;transform:translateX(-50%);text-shadow:0 0 24px rgba(167,244,50,.2)}
.rpm-cockpit__readout strong{font:680 31px/.9 var(--font-mono);letter-spacing:-.07em;font-variant-numeric:tabular-nums;color:#f4f7f2}.rpm-cockpit__readout span{margin-top:8px;font:600 7px var(--font-mono);letter-spacing:.2em;color:rgba(239,245,236,.38)}
.rpm-cockpit__status{position:absolute;z-index:2;left:9%;bottom:18px;display:flex;align-items:center;gap:8px;font:600 7px var(--font-mono);letter-spacing:.13em;color:rgba(237,244,233,.34)}.rpm-cockpit__status i{width:5px;height:5px;border-radius:50%;background:#a7f432;box-shadow:0 0 8px #a7f432}.rpm-cockpit__status b{color:rgba(237,244,233,.65);font-weight:600}
.rpm-cockpit__hint{position:absolute;z-index:2;right:9%;bottom:18px;font:600 7px var(--font-mono);letter-spacing:.14em;color:rgba(237,244,233,.25)}
.hero-instrument.is-redline .rpm-cockpit{box-shadow:inset 0 0 42px rgba(255,62,70,.08)}
.hero-identity{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:48px}
.hero-identity-name{font-size:13px;font-weight:500;color:var(--text-secondary);letter-spacing:0.02em}
.hero-identity-dot{width:3px;height:3px;border-radius:50%;background:var(--text-tertiary)}
.hero-identity-role{font-size:13px;font-weight:400;color:var(--text-tertiary)}
.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:5px 14px;background:rgba(167,244,50,.075);border:1px solid rgba(167,244,50,.22);border-radius:var(--radius-full);font-family:var(--font-mono);font-size:12px;font-weight:650;color:var(--accent);letter-spacing:.08em;margin-bottom:30px}
.badge-dot{width:5px;height:5px;border-radius:50%;background:var(--signal);box-shadow:0 0 6px rgba(167,244,50,0.4);animation:dotPulse 2s ease-in-out infinite}
@keyframes dotPulse{0%,100%{opacity:1}50%{opacity:0.4}}
.hero-headline{font-size:34px;font-weight:650;letter-spacing:normal;line-height:calc(1.1em + 10px);margin-bottom:30px;text-wrap:balance}
.hero-headline span{background:linear-gradient(110deg,var(--text-primary) 18%,#8f8f98 88%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-desc{font-size:14px;font-weight:400;letter-spacing:.2px;line-height:1.72;color:var(--text-secondary);max-width:860px;margin:0 auto 42px;text-wrap:balance}
.hero-actions{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.hero-actions .btn{min-height:36px;padding:8px 12px;border-radius:8px;font-size:14px;font-weight:500;line-height:16px;letter-spacing:.2px}
.hero-project-cta{--cta-angle:0deg;--cta-x:18px;padding:1px;background:conic-gradient(from calc(var(--cta-angle) - 80deg) at var(--cta-x) 18px,transparent 0,rgba(167,244,50,.98) 20%,transparent 25%),#304318;border-radius:43px;box-shadow:0 0 20px rgba(167,244,50,.10);transform:translateZ(0);transition:background-color .2s ease,box-shadow .2s ease;animation:heroCtaRotate 3s linear -.64s infinite,heroCtaTravel 3s linear -.64s infinite}
.hero-project-cta:hover{background-color:#A7F432;box-shadow:0 0 20px 3px rgba(167,244,50,.25)}
.hero-actions .hero-project-cta .btn-primary{height:36px;min-height:36px;padding:4px 12px;color:var(--text-primary);background:#0f110d;border-radius:1000px;box-shadow:none}
.hero-actions .hero-project-cta .btn-primary:hover{transform:none;box-shadow:none}
.hero-actions .hero-project-cta .btn-primary svg{color:var(--accent)}
@property --cta-angle{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --cta-x{syntax:'<length-percentage>';inherits:false;initial-value:18px}
@keyframes heroCtaRotate{0%,32.82275711%{--cta-angle:0deg}50%,82.82275711%{--cta-angle:180deg}100%{--cta-angle:360deg}}
@keyframes heroCtaTravel{0%,82.82275711%,100%{--cta-x:18px}32.82275711%,50%{--cta-x:calc(100% - 18px)}}
.hero-actions .btn-secondary{background:rgba(255,255,255,.045);backdrop-filter:blur(12px)}
@media(min-width:420px){
  .hero-headline{font-size:46px}
}
@media(min-width:720px){
  .hero-headline{font-size:62px}
  .hero-desc{font-size:18px}
}
.hero-divider{width:48px;height:1px;background:var(--border-default);margin:64px auto 0}
.hero-scroll{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;color:var(--text-tertiary);font-family:var(--font-mono);letter-spacing:0.05em;text-transform:uppercase}
.scroll-line{width:1px;height:24px;background:linear-gradient(to bottom,var(--text-tertiary),transparent);animation:scrollPulse 2s ease-in-out infinite}
@keyframes scrollPulse{0%,100%{opacity:1;transform:scaleY(1)}50%{opacity:0.4;transform:scaleY(0.6)}}

/* Vince logo arrival */
.hero-logo-track{position:absolute;z-index:3;left:50%;top:50%;width:min(255px,24.6vw);aspect-ratio:1151/292;transform:translate(-50%,-50%);will-change:transform,opacity,filter}
.hero-logo-track svg{display:block;width:100%;height:100%;overflow:visible;shape-rendering:geometricPrecision}
.hero-logo-track__road{fill:#151d10;stroke:rgba(167,244,50,.24);stroke-width:2;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 15px rgba(167,244,50,.12))}
.hero-logo-track__lap{will-change:fill;stroke:none}
.hero .hero-content{z-index:4;filter:drop-shadow(0 4px 20px rgba(0,0,0,.72))}
.hero .hero-scroll{z-index:4}
.hero .hero-headline{color:#edefed}.hero .hero-desc{color:rgba(237,239,237,.68)}

/* ============================================
   Historical Partner Brands
   ============================================ */
.brand-marquee-section{--brand-edge-space:clamp(56px,14vw,280px);--brand-fade-width:clamp(54px,9vw,170px);position:relative;overflow:hidden;padding:34px 0 38px;background:linear-gradient(180deg,#111312 0%,#0d0e0e 100%);border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.brand-marquee-header{position:relative;z-index:3;text-align:center;margin-bottom:18px}
.brand-marquee-header h2{font-family:var(--font-mono);font-size:13px;font-weight:720;letter-spacing:.16em;color:rgba(238,242,235,.82);text-transform:uppercase}
.brand-marquee{position:relative;display:flex;width:calc(100% - (var(--brand-edge-space) * 2));margin:0 auto;overflow:hidden;mask-image:linear-gradient(90deg,transparent 0,#000 var(--brand-fade-width),#000 calc(100% - var(--brand-fade-width)),transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--brand-fade-width),#000 calc(100% - var(--brand-fade-width)),transparent 100%)}
.brand-marquee-track{display:flex;align-items:center;gap:0;min-width:max-content;animation:brandMarquee 32s linear infinite}
.brand-logo-slot{display:flex;align-items:center;justify-content:center;width:210px;height:78px;padding:0 32px;border-left:1px solid rgba(255,255,255,.08);font-family:var(--font-mono);font-size:20px;font-weight:780;letter-spacing:.04em;line-height:1.05;text-align:center;color:rgba(239,242,237,.42);filter:grayscale(1);transition:color .2s ease,text-shadow .2s ease}
.brand-logo-slot--wide{width:260px;font-size:17px}
.brand-logo-slot img{display:block;max-width:160px;max-height:42px;width:auto;height:auto;object-fit:contain;opacity:.52;filter:grayscale(1)}
.brand-marquee:hover .brand-marquee-track{animation-play-state:paused}
.brand-logo-slot:hover{color:rgba(239,242,237,.72);text-shadow:0 0 18px rgba(167,244,50,.12)}
@keyframes brandMarquee{to{transform:translateX(-100%)}}
/* ============================================
   Bento Grid & Cards
   ============================================ */
.bento-grid{display:grid;gap:16px}
.bento-card{position:relative;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-xl);padding:24px;transition:all 0.25s var(--ease);overflow:hidden}
.bento-card::before{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(255,255,255,0.02) 0%,transparent 50%);pointer-events:none}
.bento-card:hover{background:var(--bg-elevated);border-color:var(--border-strong);transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,0.3)}
.card-header{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.card-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);font-size:16px}
.card-title{font-size:15px;font-weight:600;letter-spacing:-0.01em}
.card-badge{margin-left:auto;padding:3px 10px;font-size:11px;font-weight:500;color:var(--accent);background:var(--accent-glow);border:1px solid rgba(167,244,50,0.2);border-radius:var(--radius-full)}
.card-body{margin-bottom:20px}
.card-body p{font-size:14px;color:var(--text-secondary);line-height:1.7}
.card-body strong{color:var(--accent);font-weight:600}
.card-footer{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.card-tag{padding:3px 10px;font-size:11px;font-weight:500;color:var(--text-tertiary);background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-full)}
.card-link{margin-left:auto;font-size:13px;font-weight:500;color:var(--accent);transition:color 0.15s}
.card-link:hover{color:var(--accent-hover)}

/* About Grid */
.about-grid{grid-template-columns:repeat(3,1fr)}
.about-intro{grid-column:span 2}
.about-timeline{grid-column:span 2}
.timeline-list{display:flex;flex-direction:column;gap:12px}
.timeline-entry{display:flex;align-items:center;gap:16px;padding:12px 16px;background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-md);transition:all 0.15s}
.timeline-entry:hover{border-color:var(--border-default);background:var(--bg-hover)}
.timeline-year{font-family:var(--font-mono);font-size:12px;color:var(--accent);min-width:90px;font-weight:500}
.timeline-text{font-size:13px;color:var(--text-secondary)}

/* Skills Grid */
.skill-carousel{position:relative;display:grid;grid-template-columns:1fr;gap:0;align-items:center;margin-top:8px}
.skill-carousel__stage{position:relative;height:620px;grid-column:1;overflow:visible;perspective:1200px;isolation:isolate}
.skill-panel{position:absolute;left:50%;top:50%;width:min(820px,78vw);min-height:430px;display:flex;flex-direction:column;padding:46px 50px 44px;border:1px solid rgba(255,255,255,.16);border-radius:26px;background:linear-gradient(145deg,rgba(28,29,31,.96),rgba(14,15,17,.98) 58%,rgba(8,9,10,.99));box-shadow:0 40px 90px rgba(0,0,0,.56),inset 0 1px 0 rgba(255,255,255,.06),inset 0 0 0 1px rgba(167,244,50,.035);color:#f7f8f5;transform:translate(-50%,-50%);transform-origin:center;overflow:hidden;will-change:transform,opacity,filter}
.skill-panel::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 14% 18%,rgba(255,255,255,.055),transparent 26%),radial-gradient(circle at 82% 78%,rgba(167,244,50,.075),transparent 34%),linear-gradient(120deg,rgba(255,255,255,.045),transparent 32%,rgba(167,244,50,.035) 100%);opacity:.9;pointer-events:none}
.skill-panel::after{content:'';position:absolute;inset:1px;border-radius:25px;background:linear-gradient(180deg,rgba(255,255,255,.04),transparent 18%),repeating-linear-gradient(135deg,rgba(255,255,255,.018) 0 1px,transparent 1px 18px);opacity:.42;pointer-events:none}
.skill-panel > *{position:relative;z-index:1}
.skill-panel__topline{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-bottom:24px;font:800 13px var(--font-mono);letter-spacing:0;text-transform:uppercase;color:var(--accent)}
.skill-panel__topline span{padding:8px 13px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(255,255,255,.035);color:rgba(239,242,237,.55)}
.skill-panel__topline strong{padding:8px 16px;border:1px solid rgba(167,244,50,.34);border-radius:999px;background:rgba(167,244,50,.11);color:var(--accent);box-shadow:inset 0 0 18px rgba(167,244,50,.08);font-weight:800}
.skill-panel__mark{height:48px;margin-bottom:12px;font-family:Georgia,serif;font-size:82px;font-weight:700;line-height:.8;color:var(--accent);text-shadow:0 0 24px rgba(167,244,50,.22)}
.skill-panel h3{max-width:710px;margin:0 0 22px;font-size:clamp(27px,3vw,38px);font-weight:780;line-height:1.42;letter-spacing:0;color:#f5f6f3}
.skill-panel p{max-width:700px;margin:0;font-size:17px;font-weight:700;line-height:1.55;color:rgba(238,239,234,.64)}
.skill-panel__divider{display:block;height:1px;margin:26px 0 22px;background:linear-gradient(90deg,rgba(255,255,255,.16),rgba(255,255,255,.06),rgba(167,244,50,.18))}
.skill-panel__metric-label{margin-bottom:14px;font:800 12px var(--font-mono);letter-spacing:0;text-transform:uppercase;color:rgba(238,239,234,.52)}
.skill-panel__metrics{display:grid;grid-template-columns:200px 1fr;gap:28px;align-items:center;margin-top:0;padding:28px 32px;border:1px solid rgba(255,255,255,.11);border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015));box-shadow:inset 0 1px 0 rgba(255,255,255,.045)}
.skill-panel__metrics strong{display:block;min-height:0;border:0;border-radius:0;background:transparent;font-family:var(--font-mono);font-size:76px;line-height:1;font-weight:780;letter-spacing:0;color:var(--accent);text-shadow:0 0 26px rgba(167,244,50,.18)}
.skill-panel__metrics span{max-width:420px;font-size:16px;line-height:1.5;color:rgba(238,239,234,.66)}
.skill-carousel__nav{position:absolute;top:282px;z-index:4;display:grid;place-items:center;width:54px;height:54px;justify-self:center;border:1px solid rgba(167,244,50,.25);border-radius:50%;background:rgba(14,16,15,.78);color:var(--accent);box-shadow:0 12px 30px rgba(0,0,0,.36),inset 0 0 18px rgba(167,244,50,.06);backdrop-filter:blur(14px);transition:background .2s,border-color .2s,color .2s,transform .2s}
.skill-carousel__nav--prev{left:0}
.skill-carousel__nav--next{right:0}
.skill-carousel__nav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.skill-carousel__nav:hover{background:rgba(167,244,50,.14);border-color:rgba(167,244,50,.58);color:#a7f432;transform:translateY(-2px)}
.skill-carousel__tabs{grid-column:1/-1;display:flex;justify-content:center;gap:34px;margin-top:16px;overflow-x:auto;padding:0 20px 8px}
.skill-carousel__tab{position:relative;flex:0 0 auto;padding:10px 0 16px;border:0;background:transparent;color:rgba(239,242,237,.46);font-size:15px;font-weight:680;letter-spacing:0;white-space:nowrap;transition:color .2s}
.skill-carousel__tab::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.skill-carousel__tab:hover,.skill-carousel__tab.is-active{color:var(--text-primary)}
.skill-carousel__tab.is-active::after{transform:scaleX(1)}
.skill-carousel__tab.is-active{color:var(--accent)}

/* Projects Grid */
.projects-grid{grid-template-columns:repeat(2,1fr)}
.project-featured{grid-column:span 2}
.project-name{font-size:18px;font-weight:600;letter-spacing:-0.01em;margin-bottom:8px}
.project-desc{font-size:14px;color:var(--text-secondary);line-height:1.6;margin-bottom:20px}
.project-metrics{display:flex;gap:24px;padding:16px 20px;background:var(--bg-elevated);border-radius:var(--radius-lg);border:1px solid var(--border-subtle)}
.project-metric{display:flex;flex-direction:column;gap:4px}
.metric-value{font-family:var(--font-mono);font-size:20px;font-weight:700;color:var(--signal)}
.metric-label{font-size:11px;color:var(--text-tertiary);font-weight:500}

/* Services Grid */
.services-grid{grid-template-columns:repeat(4,1fr)}
.service-card{text-align:center}
.service-icon{font-size:24px;margin-bottom:16px}
.service-name{font-size:14px;font-weight:600;margin-bottom:4px}
.service-desc{font-size:12px;color:var(--text-tertiary);line-height:1.5}

/* ============================================
   Contact Section
   ============================================ */
.main-contact{position:relative;isolation:isolate;display:flex;min-height:100vh;overflow:hidden;background:#080809;color:#f1f1f3}
.main-contact__visual{position:absolute;z-index:-3;inset:0;background:url('./assets/images/contact-motorcycle-right-detail.png') 68% center/cover no-repeat}
.main-contact::before{content:'';position:absolute;z-index:-2;inset:0;background:linear-gradient(90deg,#080809 0%,rgba(8,8,9,.98) 31%,rgba(8,8,9,.69) 53%,rgba(8,8,9,.08) 82%),linear-gradient(0deg,rgba(8,8,9,.82),transparent 35%)}
.main-contact::after{content:'';position:absolute;z-index:-1;inset:0;background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(90deg,black,transparent 57%);-webkit-mask-image:linear-gradient(90deg,black,transparent 57%)}
.main-contact__frame{display:flex;flex-direction:column;width:100%;max-width:1440px;min-height:100vh;margin:auto;padding:82px 64px 38px}
.main-contact__status{display:flex;align-items:center;gap:10px;margin-top:auto;font:600 11px var(--font-mono);letter-spacing:.11em;color:#a7f432}
.main-contact__status i{width:7px;height:7px;border-radius:50%;background:#a7f432;box-shadow:0 0 14px rgba(167,244,50,.65)}
.main-contact__title{max-width:620px;margin:30px 0 40px;font-size:clamp(48px,6.3vw,88px);font-weight:680;line-height:1.08;letter-spacing:-.045em}
.main-contact__email{display:inline-flex;align-items:center;gap:18px;width:max-content;max-width:100%;padding-bottom:9px;border-bottom:1px solid rgba(167,244,50,.5);font-size:clamp(18px,2vw,28px);font-weight:520;letter-spacing:-.025em;transition:.25s}
.main-contact__email i{display:grid;place-items:center;width:34px;height:34px;flex:0 0 auto;border-radius:50%;background:#a7f432;color:#080809;font-size:15px;font-style:normal;transition:.25s}
.main-contact__email:hover{color:#a7f432;border-color:#a7f432}
.main-contact__email:hover i{transform:translate(3px,-3px)}
.main-contact__bottom{display:grid;grid-template-columns:1fr auto;align-items:end;gap:48px;margin-top:auto;padding-top:64px;border-top:1px solid rgba(255,255,255,.11)}
.main-contact__channels{display:flex;gap:36px}
.main-contact__channel{color:#f1f1f3}
.main-contact__channel small{display:block;margin-bottom:7px;font:600 9px var(--font-mono);letter-spacing:.12em;color:#5f5f68}
.main-contact__channel span{font-size:13px;transition:.2s}
a.main-contact__channel:hover span{color:#a7f432}
.main-contact__signature{text-align:right;font:500 9px/1.75 var(--font-mono);letter-spacing:.09em;color:#5f5f68}
.main-contact__signature strong{display:block;color:#92929b;font-weight:560}

/* ============================================
   Footer
   ============================================ */
.footer{background:var(--bg-surface);border-top:1px solid var(--border-subtle);padding:80px 0 32px}
.footer-grid{display:grid;grid-template-columns:2fr 3fr;gap:48px;margin-bottom:48px}
.footer-logo{display:flex;align-items:center;gap:8px;width:max-content;font-size:16px;font-weight:600;margin-bottom:12px;border-radius:10px;transition:background .15s,transform .15s}
.footer-logo:hover{background:var(--bg-hover);transform:translateY(-1px)}
.footer-logo-wordmark{display:block;width:auto;height:34px;object-fit:contain}
.footer-tagline{font-size:14px;color:var(--text-secondary);line-height:1.7}
.footer-links{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.footer-col-title{font-size:13px;font-weight:600;margin-bottom:16px}
.footer-link{display:block;font-size:13px;color:var(--text-secondary);padding:4px 0;transition:color 0.15s}
.footer-link:hover{color:var(--accent)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:32px;border-top:1px solid var(--border-subtle)}
.footer-copy{font-size:12px;color:var(--text-tertiary)}
.footer-legal{display:flex;gap:24px}
.footer-legal a{font-size:12px;color:var(--text-tertiary);transition:color 0.15s}
.footer-legal a:hover{color:var(--text-primary)}

/* ============================================
   Back to Top
   ============================================ */
.back-to-top{position:fixed;bottom:32px;right:52px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:50%;color:var(--text-secondary);z-index:900;opacity:0;visibility:hidden;transform:translateY(10px) scale(0.9);transition:all 0.25s var(--ease);box-shadow:0 4px 12px rgba(0,0,0,0.3),0 0 0 1px rgba(255,255,255,0.05)}
.back-to-top::before{content:'';position:absolute;inset:-1px;border-radius:inherit;background:linear-gradient(135deg,rgba(167,244,50,0.15) 0%,transparent 50%);opacity:0;transition:opacity 0.15s;z-index:-1}
.back-to-top:hover{background:var(--bg-elevated);border-color:var(--signal);color:var(--signal);transform:translateY(-4px) scale(1.05);box-shadow:0 8px 24px rgba(167,244,50,0.15),0 0 0 1px rgba(167,244,50,0.2)}
.back-to-top:hover::before{opacity:1}
.back-to-top.visible{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.back-to-top svg{transition:transform 0.15s}
.back-to-top:hover svg{transform:translateY(-2px)}

/* ============================================
   Responsive
   ============================================ */
@media(max-width:1024px){
  .about-grid{grid-template-columns:1fr}.about-intro,.about-timeline{grid-column:span 1}
  .skill-carousel{grid-template-columns:1fr;gap:0}
  .skill-carousel__stage{height:600px}
  .skill-panel{width:min(700px,82vw);padding:42px 44px}
  .skill-panel h3{font-size:clamp(26px,4vw,34px)}
  .skill-panel__metrics{grid-template-columns:174px 1fr}
  .skill-panel__metrics strong{font-size:66px}
  .projects-grid{grid-template-columns:1fr}.project-featured{grid-column:span 1}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr;gap:32px}
}
@media(max-width:640px){
  .hero{padding:116px 20px 72px;min-height:82svh}
  .hero-image-bg{background-position:center center}
  .hero-sketch-layer img{object-position:50% 46%;transform:scale(1.04)}
  .hero-chalk-trail{display:none}
  .hero-instrument{width:min(100%,420px);margin-bottom:28px}
  .instrument-bezel--rpm-only{height:102px}
  .instrument-bezel--rpm-only .instrument-rpm{margin:0 27px}
  .instrument-bezel--rpm-only .instrument-rpm__band{top:10px;height:54px}
  .instrument-bezel--rpm-only .instrument-rpm__ticks{top:23px;height:52px}
  .instrument-bezel--rpm-only .instrument-rpm__numbers{top:56px;font-size:7px}
  .instrument-bezel--rpm-only .instrument-rpm__label{right:-22px;top:53px;font-size:5px}
  .instrument-rpm__readout{top:31px;gap:4px}.instrument-rpm__readout strong{font-size:16px}.instrument-rpm__readout span{font-size:5px}
  .instrument-rpm__cursor{top:calc(63px - var(--rpm-arc,0) * 48px)}
  .instrument-rpm__cursor i{width:6px;height:6px;border-width:1px}
  .rpm-cockpit{height:112px}.rpm-gauge{height:112px}.rpm-cockpit__readout{top:62px}.rpm-cockpit__readout strong{font-size:18px}.rpm-cockpit__readout span{margin-top:3px;font-size:5px}.rpm-cockpit__status,.rpm-cockpit__hint{bottom:7px;font-size:5px}.rpm-gauge__label{font-size:8px}
  .instrument-bezel{padding:12px 18px 10px}
  .instrument-rpm{height:55px;margin:0 21px}
  .instrument-rpm__numbers{top:31px;font-size:8px}
  .instrument-rpm small{display:none}
  .instrument-screen{grid-template-columns:16px 1fr 78px 1fr 16px;gap:5px;margin-top:-4px;padding:7px 10px 6px}
  .instrument-status span{display:none}
  .instrument-speed strong{font-size:30px}.instrument-speed span{font-size:5px}
  .instrument-gear{height:88px;margin-top:-16px}.instrument-gear strong{font-size:47px}.instrument-lap{top:-21px;font-size:6px}
  .instrument-mode-name{gap:4px;margin:15px 0 10px}.instrument-mode-name strong{font-size:14px}
  .instrument-readout__top,.instrument-assist{font-size:5px}.instrument-temp strong{font-size:6px}
  .instrument-footer{margin:6px 34px 0}
  .hero-headline{margin-bottom:28px}
  .hero-desc{margin-bottom:34px}
  .hero-actions{width:100%}.hero-actions .btn{width:auto;min-width:136px}.hero-scroll{display:none}
  .brand-marquee-section{--brand-edge-space:24px;--brand-fade-width:42px;padding:28px 0 30px}
  .brand-marquee-header{margin-bottom:14px}
  .brand-marquee-header h2{font-size:12px}
  .brand-logo-slot{width:164px;height:64px;padding:0 20px;font-size:16px}
  .brand-logo-slot--wide{width:206px;font-size:14px}
  .section{padding:80px 0}
  .skill-carousel{grid-template-columns:1fr;gap:18px}
  .skill-carousel__stage{grid-column:1;height:568px;overflow:hidden}
  .skill-panel{width:min(100%,344px);min-height:468px;padding:30px 24px 28px;border-radius:18px}
  .skill-panel::after{border-radius:17px}
  .skill-panel__topline{align-items:flex-start;flex-direction:column;gap:8px;margin-bottom:16px;font-size:10px}
  .skill-panel__topline span,.skill-panel__topline strong{padding:7px 11px}
  .skill-panel__mark{height:40px;margin-bottom:14px;font-size:58px}
  .skill-panel h3{font-size:23px;line-height:1.42}
  .skill-panel p{font-size:14px;line-height:1.55}
  .skill-panel__divider{margin:24px 0 18px}
  .skill-panel__metric-label{margin-bottom:12px;font-size:10px}
  .skill-panel__metrics{grid-template-columns:1fr;gap:10px;padding:20px 20px;border-radius:16px}
  .skill-panel__metrics strong{font-size:52px}
  .skill-panel__metrics span{font-size:13px;line-height:1.55}
  .skill-carousel__nav{position:absolute;top:510px;width:42px;height:42px}
  .skill-carousel__nav--prev{left:96px}
  .skill-carousel__nav--next{right:96px}
  .skill-carousel__tabs{justify-content:flex-start;gap:24px;margin-top:0;padding:0 6px 10px}
  .skill-carousel__tab{font-size:13px}
  .services-grid{grid-template-columns:1fr}
  .main-contact__visual{background-position:62% center}
  .main-contact::before{background:linear-gradient(0deg,#080809 0%,rgba(8,8,9,.93) 47%,rgba(8,8,9,.26) 100%)}
  .main-contact::after{opacity:.55}
  .main-contact__frame{padding:96px 24px 30px;justify-content:flex-end}
  .main-contact__status{margin-top:48vh}
  .main-contact__title{max-width:480px;margin:20px 0 28px;font-size:50px;line-height:1.08;letter-spacing:-.04em}
  .main-contact__email{gap:12px;font-size:17px}
  .main-contact__email i{width:32px;height:32px}
  .main-contact__bottom{grid-template-columns:1fr;gap:28px;margin-top:52px;padding-top:25px}
  .main-contact__channels{gap:22px;justify-content:space-between}
  .main-contact__signature{text-align:left}
  .footer-links{grid-template-columns:1fr;gap:24px}
  .footer-bottom{flex-direction:column;gap:16px;text-align:center}
  .hero-logo-track{width:27vw}
}

/* ============================================
   Animations
   ============================================ */
.fade-in{animation:fadeIn 0.5s var(--ease) forwards}
@keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
/* About Section Styles */

      :root {
        --bg-base:#0B0B0C;
        --bg-surface:#111113;
        --bg-elevated:#19191B;
        --bg-hover:#222224;
        --text-primary:#EDEDEF;
        --text-secondary:#A0A0A6;
        --text-tertiary:#6B6B76;
        --border-subtle:rgba(255,255,255,0.06);
        --border-default:rgba(255,255,255,0.08);
        --border-strong:rgba(255,255,255,0.14);
        --accent:#A7F432;
        --accent-dim:rgba(167,244,50,0.08);
        --signal:#A7F432;
        --signal-dim:rgba(167,244,50,0.08);
        --titanium:#9CA3AF;
        --radius-lg:16px;
        --radius-xl:24px;
        --radius-full:9999px;
        --font-sans:'Geist Web','Source Han Sans CN Web';
        --font-mono:'Geist Mono Web','Source Han Sans CN Web';
      }
      *,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
      html{font-size:16px;-webkit-font-smoothing:antialiased}
      body{font-family:var(--font-sans);background:var(--bg-base);color:var(--text-primary);line-height:1.6}

      /* About Section */
      .about-section {
        padding: 120px 0;
        position: relative;
      }

      .about-container {
        max-width: 1240px;
        margin: 0 auto;
        padding: 0 32px;
      }

      /* Section Header - Left Aligned */
      .about-header {
        margin-bottom: 64px;
      }

      .about-label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 5px 14px;
        background: var(--signal-dim);
        border: 1px solid rgba(167,244,50,0.2);
        border-radius: var(--radius-full);
        font-family: var(--font-mono);
        font-size: 11px;
        font-weight: 500;
        color: var(--signal);
        letter-spacing: 0.06em;
        text-transform: uppercase;
        margin-bottom: 24px;
      }

      .about-title {
        font-size: clamp(36px, 5vw, 64px);
        font-weight: 700;
        letter-spacing: -0.035em;
        line-height: 1.05;
        margin-bottom: 20px;
        max-width: 800px;
      }

      .about-desc {
        font-size: 18px;
        line-height: 1.75;
        color: var(--text-secondary);
        max-width: 720px;
      }

      /* Bento Grid - 12 Column */
      .about-grid {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 20px;
      }

      /* Cards */
      .about-card {
        position: relative;
        background: var(--bg-surface);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-xl);
        padding: 36px;
        overflow: hidden;
        transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
      }

      .about-card::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient(135deg, rgba(255,255,255,0.02) 0%, transparent 40%);
        pointer-events: none;
      }

      .about-card:hover {
        border-color: var(--border-strong);
        transform: translateY(-2px);
        box-shadow: 0 8px 32px rgba(0,0,0,0.3);
      }

      .about-card.card-intro {
        grid-column: span 7;
      }

      .about-card.card-brand {
        grid-column: span 5;
      }

      .about-card.card-content {
        grid-column: span 4;
      }

      .about-card.card-timeline {
        grid-column: span 8;
      }

      /* Card Icon Container */
      .card-icon-wrap {
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255,255,255,0.04);
        border: 1px solid var(--border-subtle);
        border-radius: 14px;
        margin-bottom: 24px;
      }

      .card-icon-wrap svg {
        width: 22px;
        height: 22px;
        color: var(--text-secondary);
      }

      /* Card Title */
      .card-title {
        font-size: 20px;
        font-weight: 600;
        letter-spacing: -0.02em;
        margin-bottom: 16px;
      }

      /* Card Body */
      .card-body {
        font-size: 16px;
        line-height: 1.75;
        color: var(--text-secondary);
        margin-bottom: 24px;
      }

      .card-body strong {
        color: var(--text-primary);
        font-weight: 600;
      }

      /* Tags */
      .card-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .tag {
        padding: 4px 12px;
        font-size: 12px;
        font-weight: 500;
        color: var(--text-tertiary);
        background: var(--bg-elevated);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-full);
      }

      /* Timeline */
      .timeline {
        display: flex;
        flex-direction: column;
        gap: 0;
      }

      .timeline-item {
        display: flex;
        align-items: flex-start;
        gap: 24px;
        padding: 20px 0;
        border-bottom: 1px solid var(--border-subtle);
        position: relative;
      }

      .timeline-item:last-child {
        border-bottom: none;
      }

      .timeline-year {
        font-family: var(--font-mono);
        font-size: 14px;
        font-weight: 500;
        color: var(--accent);
        min-width: 100px;
        flex-shrink: 0;
      }

      .timeline-content {
        flex: 1;
      }

      .timeline-title {
        font-size: 15px;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 4px;
      }

      .timeline-desc {
        font-size: 14px;
        color: var(--text-tertiary);
        line-height: 1.6;
      }

      /* Timeline dot */
      .timeline-item::before {
        content: '';
        position: absolute;
        left: -36px;
        top: 28px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--accent);
        box-shadow: 0 0 8px rgba(167,244,50,0.3);
      }

      .timeline-container {
        position: relative;
        padding-left: 36px;
      }

      .timeline-container::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 2px;
        background: linear-gradient(to bottom, var(--accent), var(--border-subtle));
        border-radius: 1px;
      }

      /* Responsive */
      @media (max-width: 1024px) {
        .about-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .about-card.card-intro,
        .about-card.card-brand,
        .about-card.card-content,
        .about-card.card-timeline {
          grid-column: span 1;
        }
      }

      @media (max-width: 640px) {
        .about-section {
          padding: 80px 0;
        }
        .about-container {
          padding: 0 20px;
        }
        .about-header {
          margin-bottom: 48px;
        }
        .about-title {
          font-size: 36px;
        }
        .about-desc {
          font-size: 16px;
        }
        .about-grid {
          grid-template-columns: 1fr;
          gap: 16px;
        }
        .about-card {
          padding: 24px;
        }
        .timeline-item {
          gap: 16px;
          padding: 16px 0;
        }
        .timeline-year {
          min-width: 80px;
          font-size: 13px;
        }
      }
    
/* Highlight Nav Link - 白底黑字 */
.nav-link-highlight {
  background: var(--text-primary) !important;
  color: var(--bg-base) !important;
  font-weight: 600;
}

.nav-link-highlight:hover {
  background: #fff !important;
  color: #000 !important;
}

/* 联系我按钮 - 深色模式白底黑字 */
[data-theme="dark"] 

[data-theme="dark"] .nav-cta:hover {
  background: #fff;
  color: #000;
}



.nav-cta:hover {
  background: #fff;
  color: #000;
}

[data-theme="light"] 

[data-theme="light"] .nav-cta:hover {
  background: #000;
  color: #fff;
}

/* 联系我按钮 - 白底白框黑字 */


.nav-cta:hover {
  background: #F5F5F7;
  border-color: #FFFFFF;
  color: #000000;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
}

[data-theme="light"] 

[data-theme="light"] .nav-cta:hover {
  background: #000000;
  border-color: #18181B;
  color: #FFFFFF;
}

/* 联系我按钮 - 简洁高级 */
.nav-cta {
  background: #FFFFFF;
  color: #0B0B0C;
  border: 1px solid rgba(255, 255, 255, 0.8);
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--radius-full);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nav-cta:hover {
  background: #F5F5F7;
  border-color: #FFFFFF;
  color: #000000;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15);
}

[data-theme="light"] .nav-cta {
  background: #18181B;
  color: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .nav-cta:hover {
  background: #000000;
  color: #FFFFFF;
  border-color: #18181B;
}

/* ============================================
   Blog / Field Notes
   ============================================ */
.blog-section{position:relative;padding:128px 0;background:var(--bg-surface);border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);overflow:hidden}
.blog-section::before{content:'';position:absolute;top:-220px;right:-120px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(167,244,50,.07),transparent 68%);pointer-events:none}
.blog-container{position:relative;z-index:1;max-width:1240px;margin:0 auto;padding:0 32px}
.blog-header{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.75fr);gap:80px;align-items:end;margin-bottom:52px}
.blog-header .section-label{margin-bottom:22px}
.blog-title{font-size:clamp(38px,5vw,66px);font-weight:700;letter-spacing:-.045em;line-height:1.05}
.blog-intro{font-size:17px;line-height:1.8;color:var(--text-secondary);padding-bottom:7px}
.blog-filters{display:flex;gap:8px;margin-bottom:24px;overflow-x:auto;scrollbar-width:none}
.blog-filters::-webkit-scrollbar{display:none}
.blog-filter{flex:none;padding:8px 15px;border:1px solid var(--border-default);border-radius:var(--radius-full);font-size:12px;font-weight:600;color:var(--text-tertiary);background:transparent;transition:all .2s var(--ease)}
.blog-filter:hover{color:var(--text-primary);border-color:var(--border-strong)}
.blog-filter.active{color:#0b0b0c;background:var(--accent);border-color:var(--accent)}
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.blog-card{background:var(--bg-base);border:1px solid var(--border-default);border-radius:var(--radius-xl);overflow:hidden;transition:transform .28s var(--ease),border-color .28s var(--ease),opacity .2s ease}
.blog-card:hover{transform:translateY(-4px);border-color:var(--border-strong)}
.blog-card.is-hidden{display:none}
.blog-featured{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,.7fr);min-height:430px}
.blog-featured-content{padding:48px;display:flex;flex-direction:column;align-items:flex-start}
.blog-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-family:var(--font-mono);font-size:11px;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.04em}
.blog-meta span+span::before{content:'·';margin-right:10px;color:var(--border-strong)}
.blog-meta .blog-kicker{color:var(--accent)}
.blog-meta .blog-kicker::before{display:none}
.blog-featured h3{max-width:760px;margin:38px 0 20px;font-size:clamp(30px,4vw,50px);line-height:1.12;letter-spacing:-.04em}
.blog-featured p{max-width:720px;font-size:16px;line-height:1.8;color:var(--text-secondary)}
.blog-byline{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:44px}
.blog-avatar{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--accent);color:#0b0b0c;font-family:var(--font-mono);font-size:11px;font-weight:700}
.blog-byline>span:last-child{display:flex;flex-direction:column;line-height:1.35}
.blog-byline strong{font-size:13px}.blog-byline small{font-size:11px;color:var(--text-tertiary)}
.blog-featured-visual{position:relative;display:flex;align-items:center;justify-content:center;min-height:320px;background:linear-gradient(145deg,var(--bg-elevated),var(--bg-base));border-left:1px solid var(--border-subtle);overflow:hidden}
.blog-featured-visual::before{content:'';position:absolute;inset:0;background-image:linear-gradient(var(--border-subtle) 1px,transparent 1px),linear-gradient(90deg,var(--border-subtle) 1px,transparent 1px);background-size:38px 38px;opacity:.55}
.signal-orbit{position:absolute;border:1px solid rgba(167,244,50,.22);border-radius:50%}
.orbit-one{width:230px;height:230px}.orbit-two{width:150px;height:150px;border-style:dashed;animation:signalSpin 18s linear infinite}
.signal-core{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;width:88px;height:88px;border-radius:50%;background:var(--accent);color:#0b0b0c;font:700 25px var(--font-mono);box-shadow:0 0 60px rgba(167,244,50,.18)}
.blog-featured-visual>span{position:absolute;right:22px;bottom:20px;font:500 10px/1.45 var(--font-mono);letter-spacing:.12em;color:var(--text-tertiary);text-align:right}
@keyframes signalSpin{to{transform:rotate(360deg)}}
.blog-story{display:flex;flex-direction:column;min-height:330px;padding:30px}
.blog-card-top,.blog-card-bottom{display:flex;align-items:center;justify-content:space-between;font:500 11px var(--font-mono);color:var(--text-tertiary)}
.blog-index{color:var(--accent)}
.blog-category{padding:4px 9px;border:1px solid var(--border-default);border-radius:var(--radius-full)}
.blog-story h3{margin:40px 0 14px;font-size:22px;line-height:1.35;letter-spacing:-.025em}
.blog-story p{font-size:14px;line-height:1.75;color:var(--text-secondary)}
.blog-card-bottom{margin-top:auto;padding-top:28px;border-top:1px solid var(--border-subtle)}
.blog-footer-row{display:flex;align-items:center;justify-content:space-between;gap:32px;margin-top:28px;padding:22px 4px 0;font-size:13px;color:var(--text-tertiary)}
.blog-footer-row p{display:flex;align-items:center;gap:9px}
.status-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px rgba(167,244,50,.45)}
.blog-subscribe{display:inline-flex;align-items:center;gap:10px;color:var(--text-primary);font-weight:600;transition:color .2s}
.blog-subscribe span{color:var(--accent);transition:transform .2s}.blog-subscribe:hover{color:var(--accent)}.blog-subscribe:hover span{transform:translateX(3px)}

@media(max-width:900px){
  .blog-header{grid-template-columns:1fr;gap:24px}
  .blog-featured{grid-template-columns:1fr}
  .blog-featured-visual{min-height:260px;border-left:0;border-top:1px solid var(--border-subtle)}
  .blog-grid{grid-template-columns:1fr 1fr}
  .blog-featured{grid-column:1/-1}
  .blog-story:last-of-type{grid-column:1/-1}
}
@media(max-width:640px){
  .blog-section{padding:82px 0}
  .blog-container{padding:0 20px}
  .blog-header{margin-bottom:38px}
  .blog-title{font-size:38px}
  .blog-intro{font-size:15px}
  .blog-grid{grid-template-columns:1fr;gap:14px}
  .blog-featured,.blog-story:last-of-type{grid-column:auto}
  .blog-featured-content{padding:28px}
  .blog-featured h3{margin-top:30px;font-size:30px}
  .blog-featured-visual{min-height:230px}
  .blog-story{min-height:300px;padding:24px}
  .blog-footer-row{align-items:flex-start;flex-direction:column;gap:16px}
}

[data-layout-id="hero-content-0"] {
  position: relative;
  font-size: 18px;
  width: 100%;
  max-width: 1040px;
  margin-top: -14px;
  margin-bottom: -10px;
  padding-top: 0px;
  left: 4px;
  top: 4px;
}

[data-layout-id="about-header-4"] {
  position: relative;
  font-size: 28px;
  width: 100%;
  left: -4px;
  top: 28px;
}

[data-layout-id="about-title-5"] {
  font-size: 61px;
  width: 100%;
  max-width: 1440px;
}

[data-layout-id="about-desc-6"] {
  max-width: 1350px;
}

[data-layout-id="about-card-card-intro-7"] {
  width: 57%;
}