:root {
  --bg: #0A0D12;
  --bg-2: #0E1218;
  --bg-3: #131820;
  --bg-4: #1A2030;
  --accent-rgb: 255,180,84;
  --accent-hi: #FFC56B;
  --orange: rgb(var(--accent-rgb));
  --orange-hi: #FFD299;
  --orange-dim: rgba(var(--accent-rgb),0.12);
  --orange-5: rgba(var(--accent-rgb),0.05);
  --cyan: #5BD9FF;
  --green: #5CFFB8;
  --red: #FF5C57;
  --border: rgba(var(--accent-rgb),0.14);
  --border-w: rgba(255,255,255,0.06);
  --text: #E8DDD0;
  --text-2: #B0A494;
  --muted: #6B5D4F;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --display: 'Space Grotesk', sans-serif;
  --body: 'Inter', sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
[data-accent="amber"] { --accent-rgb: 255,180,84; --accent-hi: #FFC56B; }
[data-accent="cyan"] { --accent-rgb: 91,217,255; --accent-hi: #A8EAFF; }
[data-accent="green"] { --accent-rgb: 92,255,184; --accent-hi: #B6FFD9; }
[data-accent="violet"] { --accent-rgb: 176,140,255; --accent-hi: #D8C6FF; }
[data-accent="pink"] { --accent-rgb: 255,140,190; --accent-hi: #FFC4DE; }
[data-accent="blue"] { --accent-rgb: 91,140,255; --accent-hi: #AEC2FF; }
[data-accent="red"] { --accent-rgb: 255,92,87; --accent-hi: #FFABA8; }
[data-accent="teal"] { --accent-rgb: 64,224,208; --accent-hi: #A6F5EC; }
[data-accent] .cursor-arrow path { stroke: var(--orange); }
[data-accent] svg[stroke*="255,180,84"] { stroke: rgba(var(--accent-rgb),0.3) !important; }
[data-accent] svg [fill*="255,180,84"] { fill: rgba(var(--accent-rgb),0.08) !important; }
html.no-motion *, html.no-motion *::before, html.no-motion *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
html.no-scanlines .scanlines { display: none; }
html.no-particles .section-particles, html.no-particles .proc-card-particles { display: none; }
html.no-glow .sec-tag::before,
html.no-glow .work-card:hover,
html.no-glow .cc-card[data-active] .work-card,
html.no-glow .settings-btn:hover,
html.no-glow .btn:hover { animation: none !important; box-shadow: none !important; text-shadow: none !important; }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; cursor: none; }
html { scroll-behavior: smooth; font-size: 16px; }
body { background: var(--bg); color: var(--text); font-family: var(--body); line-height: 1.65; overflow-x: hidden; cursor: none; animation: pageFade 1.1s ease both; }
@keyframes pageFade { from { opacity: 0; } to { opacity: 1; } }
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
button { cursor: none; font-family: inherit; }
::selection { background: rgba(var(--accent-rgb),0.25); color: #fff; }
body::after { content: ''; position: fixed; inset: 0; 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.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); pointer-events: none; z-index: 9990; opacity: 0.4; }
.scanlines { position: fixed; inset: 0; background: repeating-linear-gradient(to bottom, transparent 0px, transparent 3px, rgba(0,0,0,0.12) 3px, rgba(0,0,0,0.12) 4px); pointer-events: none; z-index: 9989; opacity: 0.35; }
.cursor { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 10000; }
.cursor-dot { transform-origin: top left; filter: drop-shadow(0 0 4px rgba(var(--accent-rgb),0.55)) drop-shadow(0 0 10px rgba(var(--accent-rgb),0.28)); transition: transform 0.18s var(--ease); }
.cursor-dot.hover { transform: scale(1.12); }
.cursor-dot.click { transform: scale(0.85); }
.cursor-arrow { display: block; overflow: visible; }
.trail-dot { position: absolute; top: 0; left: 0; border-radius: 50%; background: radial-gradient(circle, rgba(var(--accent-rgb),0.9) 0%, rgba(var(--accent-rgb),0.35) 45%, rgba(var(--accent-rgb),0) 78%); pointer-events: none; will-change: transform; }
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--orange); border-radius: 2px; }
@keyframes smoothBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.15; } }
.container { max-width: 1320px; margin: 0 auto; padding: 0 48px; }
.sec-tag { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--orange); display: inline-flex; align-items: center; gap: 10px; }
.sec-tag::before { content: '//'; color: var(--muted); letter-spacing: 0; }
@keyframes tagGlow { 0%, 100% { text-shadow: 0 0 4px rgba(var(--accent-rgb),0.3); } 50% { text-shadow: 0 0 12px rgba(var(--accent-rgb),0.6); } }
.sec-tag { animation: tagGlow 4s ease-in-out infinite; }
.section-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; margin-bottom: 72px; flex-wrap: wrap; }
.section-intro h2 { font-family: var(--display); font-weight: 700; font-size: clamp(2.2rem, 4vw, 3.6rem); letter-spacing: -0.03em; line-height: 1.05; margin-top: 16px; overflow: hidden; }
.section-intro h2 em { font-style: normal; color: var(--orange); }
.section-intro h2 .char { display: inline-block; opacity: 0; transform: translateY(100%); animation: charReveal 0.4s forwards; }
.section-intro h2 .char.space { width: 0.3em; }
@keyframes charReveal { to { opacity: 1; transform: translateY(0); } }
.section-intro p { color: var(--text-2); font-size: 0.98rem; max-width: 400px; font-weight: 300; line-height: 1.8; }
.btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bg); background: var(--orange); border: none; padding: 14px 28px; border-radius: 2px; transition: transform 0.2s var(--ease), box-shadow 0.2s; position: relative; overflow: hidden; }
.btn { position: relative; overflow: hidden; }
.btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),0.15), transparent); transform: translateX(-100%); transition: transform 0.5s ease; }
.btn:hover::after { transform: translateX(100%); }
.btn:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 8px 32px rgba(var(--accent-rgb),0.3), 0 0 60px rgba(var(--accent-rgb),0.1); }
.btn-ghost { background: transparent; color: var(--orange); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--orange-dim); box-shadow: none; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal-left { opacity: 0; transform: translateX(-28px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal-left.in { opacity: 1; transform: none; }
.reveal-right { opacity: 0; transform: translateX(28px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal-right.in { opacity: 1; transform: none; }
.reveal-scale { opacity: 0; transform: scale(0.94); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal-scale.in { opacity: 1; transform: none; }
.glitch { position: relative; display: inline-block; }
.glitch:hover { animation: glitchShift 0.3s steps(2) 2; }
@keyframes glitchShift { 0% { transform: translate(0); } 25% { transform: translate(-2px, 1px); } 50% { transform: translate(2px, -1px); } 75% { transform: translate(-1px, -1px); } 100% { transform: translate(0); } }
#nav { position: fixed; top: 14px; left: 20px; right: 20px; max-width: 1240px; margin: 0 auto; z-index: 1000; height: 64px; padding: 0 26px; display: flex; align-items: center; justify-content: space-between; gap: 26px; border-radius: 16px; background: rgba(16,21,32,0.34); -webkit-backdrop-filter: blur(34px) saturate(1.7); backdrop-filter: blur(34px) saturate(1.7); border: 1px solid rgba(255,255,255,0.07); box-shadow: 0 12px 40px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.07); transition: height 0.4s var(--ease), top 0.4s var(--ease), background 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease; }
#nav::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1px; background: linear-gradient(135deg, rgba(var(--accent-rgb),0.4), rgba(var(--accent-rgb),0.05) 35%, rgba(91,217,255,0.05) 70%, rgba(91,217,255,0.28)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
#nav::after { content: ''; position: absolute; top: 0; left: 30px; right: 30px; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.16) 30%, rgba(var(--accent-rgb),0.4) 50%, rgba(91,217,255,0.12) 70%, transparent); opacity: 0.7; }
#nav.scrolled { top: 10px; height: 56px; background: rgba(13,18,27,0.56); border-color: rgba(var(--accent-rgb),0.14); box-shadow: 0 18px 50px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05), 0 0 42px rgba(var(--accent-rgb),0.05); }
.nav-logo { display: inline-flex; align-items: center; gap: 3px; position: relative; z-index: 1; }
.nav-prompt { font-family: var(--mono); font-size: 1rem; font-weight: 700; letter-spacing: 0.02em; color: var(--orange); text-shadow: 0 0 14px rgba(var(--accent-rgb),0.45); transition: text-shadow 0.4s ease; }
.nav-logo:hover .nav-prompt { text-shadow: 0 0 22px rgba(var(--accent-rgb),0.8); }
.nav-cursor { display: inline-block; width: 5px; height: 15px; margin-left: 1px; border-radius: 1px; background: var(--orange); animation: cursorPulse 1.6s ease-in-out infinite; }
@keyframes cursorPulse { 0%, 100% { opacity: 1; box-shadow: 0 0 12px rgba(var(--accent-rgb),0.9), 0 0 26px rgba(var(--accent-rgb),0.45); } 50% { opacity: 0.42; box-shadow: 0 0 6px rgba(var(--accent-rgb),0.4), 0 0 12px rgba(var(--accent-rgb),0.15); } }
.logo-mark { position: relative; display: grid; place-items: center; width: 38px; height: 38px; transition: transform 0.4s var(--ease), filter 0.4s var(--ease); }
.logo-mark::before { display: none; }
.logo-mark img { position: relative; width: 100%; height: 100%; display: block; transition: transform 0.4s var(--ease), filter 0.4s var(--ease); }
.nav-logo:hover .logo-mark { transform: translateY(-2px); }
.nav-logo:hover .logo-mark img { transform: scale(1.05); filter: drop-shadow(0 8px 22px rgba(0,0,0,0.55)); }
.nav-links { display: flex; align-items: center; gap: 30px; position: relative; z-index: 1; }
.nav-links a { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding: 8px 2px; transition: color 0.25s ease, text-shadow 0.25s ease, background-size 0.25s ease; position: relative; background: linear-gradient(var(--orange), var(--orange)) no-repeat 0 100% / 0% 1px; }
.nav-links a::before { content: '['; opacity: 0; margin-right: 3px; color: var(--orange); transition: opacity 0.25s ease; }
.nav-links a::after { content: ']'; opacity: 0; margin-left: 3px; color: var(--orange); transition: opacity 0.25s ease; }
.nav-links a:hover { color: var(--text); background-size: 100% 1px; }
.nav-links a:hover::before, .nav-links a:hover::after { opacity: 1; }
.nav-links a.active { color: var(--orange); background-size: 100% 1px; text-shadow: 0 0 14px rgba(var(--accent-rgb),0.4); }
.nav-links a.active::before, .nav-links a.active::after { opacity: 1; }
.nav-divider { width: 1px; height: 22px; background: linear-gradient(180deg, transparent, rgba(255,255,255,0.16), transparent); flex: none; }
.nav-right { display: flex; align-items: center; gap: 14px; position: relative; z-index: 1; }
.nav-pill { display: flex; align-items: center; gap: 9px; padding: 7px 13px; border-radius: 999px; background: rgba(255,255,255,0.04); border: 1px solid rgba(var(--accent-rgb),0.14); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); font-family: var(--mono); }
.np-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); animation: pulse 2s ease-in-out infinite; flex: none; }
.np-tz { font-size: 0.52rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.np-time { font-size: 0.62rem; letter-spacing: 0.05em; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nc-sep { color: var(--orange); animation: smoothBlink 1.8s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.35} }
.nav-menu { display: none; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); color: var(--text); font-size: 1.15rem; padding: 0; transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease; }
.nav-menu:hover { border-color: rgba(var(--accent-rgb),0.32); background: rgba(var(--accent-rgb),0.06); color: var(--orange); }
.room-zone { position: relative; }
.room-bg { position: sticky; top: 0; height: 100vh; height: 100svh; margin-bottom: -100vh; margin-bottom: -100svh; z-index: 0; pointer-events: none; overflow: hidden; }
.room-bg::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(10,13,18,0.5) 0%, rgba(10,13,18,0.12) 38%, rgba(10,13,18,0.42) 100%); }
.room-zone > #hero, .room-zone > #capabilities { position: relative; z-index: 1; }
#hero { position: relative; }
.hero-stage { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; padding: 132px 0 96px; }
.hero-inner { transform-origin: center center; will-change: transform, opacity; }

.hero-backdrop { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 58% 52% at 15% 30%, rgba(var(--accent-rgb),0.10), transparent 66%), radial-gradient(ellipse 50% 58% at 92% 72%, rgba(91,217,255,0.06), transparent 70%), linear-gradient(90deg, rgba(10,13,18,0.74) 0%, rgba(10,13,18,0.34) 40%, rgba(10,13,18,0) 68%), linear-gradient(180deg, rgba(10,13,18,0.4) 0%, rgba(10,13,18,0) 24%, rgba(10,13,18,0) 62%, rgba(10,13,18,0.5) 100%); }
.hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 76px; align-items: center; width: 100%; }
.hero-content { min-width: 0; }

.hero-title { font-family: var(--display); font-weight: 700; font-size: clamp(2.5rem, 4.8vw, 4.2rem); letter-spacing: -0.04em; line-height: 1.02; margin-bottom: 24px; }
.hero-title span { display: block; animation: heroLine 0.75s var(--ease) backwards; transition: transform 0.35s var(--ease), color 0.35s ease; cursor: none; }
.hero-title .t1 { animation-delay: 0.06s; }
.hero-title .t2 { color: var(--muted); animation-delay: 0.14s; }
.hero-title .t3 { color: var(--orange); text-shadow: 0 0 36px rgba(var(--accent-rgb),0.4); animation-delay: 0.22s; }
@keyframes heroLine { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
.hero-title span:hover { transform: translateX(8px); }
.hero-title .t2:hover { color: var(--text); }
.hero-title .t3:hover { text-shadow: 0 0 46px rgba(var(--accent-rgb),0.65), 0 0 92px rgba(var(--accent-rgb),0.22); }

.hero-desc { font-size: 0.96rem; color: var(--text-2); max-width: 470px; font-weight: 300; line-height: 1.75; margin-bottom: 34px; animation: fadeUp 0.6s 0.36s var(--ease) both; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; animation: fadeUp 0.6s 0.42s var(--ease) both; }

.hero-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 64px; padding-top: 30px; border-top: 1px solid var(--border-w); position: relative; animation: fadeUp 0.6s 0.5s var(--ease) both; }
.hero-stats::before { content: ''; position: absolute; top: -1px; left: 0; width: 72px; height: 1px; background: linear-gradient(90deg, var(--orange), transparent); }
.hero-stat { position: relative; padding: 2px 26px; border-right: 1px solid var(--border-w); transition: transform 0.3s var(--ease), border-color 0.3s ease; }
.hero-stat:first-child { padding-left: 0; }
.hero-stat:last-child { border-right: none; }
.hero-stat:hover { transform: translateY(-4px); border-color: rgba(var(--accent-rgb),0.32); }
.hero-stat:hover .stat-n { color: var(--orange); text-shadow: 0 0 22px rgba(var(--accent-rgb),0.4); }
.hero-stat:hover .stat-label { color: var(--text); }
.stat-n { font-family: var(--display); font-weight: 700; font-size: 2.35rem; line-height: 1; letter-spacing: -0.03em; min-height: 1em; display: flex; align-items: baseline; gap: 1px; }
.stat-n sup { font-size: 1rem; color: var(--orange); }
.stat-label { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-top: 10px; line-height: 1.6; }
.shield-icon { color: var(--green); font-size: 2.4rem; filter: drop-shadow(0 0 12px rgba(92,255,184,0.4)); animation: shieldPulse 3s ease-in-out infinite; display: inline-block; }
@keyframes shieldPulse { 0%,100% { transform: scale(1); filter: drop-shadow(0 0 12px rgba(92,255,184,0.4)); } 50% { transform: scale(1.08); filter: drop-shadow(0 0 20px rgba(92,255,184,0.6)); } }
@keyframes fadeUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
.term { position: relative; min-width: 0; max-width: 100%; background: linear-gradient(180deg, rgba(16,22,30,0.96), rgba(9,13,18,0.97)); border: 1px solid var(--border-w); border-radius: 14px; overflow: hidden; box-shadow: 0 40px 90px rgba(0,0,0,0.55), 0 0 0 1px rgba(var(--accent-rgb),0.05), 0 0 70px rgba(var(--accent-rgb),0.06); animation: fadeUp 0.7s 0.5s var(--ease) backwards; transition: border-color 0.4s, box-shadow 0.4s, transform 0.4s var(--ease); }
.term::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),0.5), rgba(91,217,255,0.22), transparent); opacity: 0.7; }
.term:hover { border-color: rgba(var(--accent-rgb),0.32); box-shadow: 0 40px 100px rgba(0,0,0,0.6), 0 0 0 1px rgba(var(--accent-rgb),0.12), 0 0 110px rgba(var(--accent-rgb),0.16); transform: translateY(-6px) scale(1.01); }
.term-bar { display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: rgba(255,255,255,0.025); border-bottom: 1px solid var(--border-w); }
.term-bar .tb { width: 10px; height: 10px; border-radius: 50%; }
.term-bar .tb.r { background: rgba(255,92,87,0.55); }
.term-bar .tb.y { background: rgba(var(--accent-rgb),0.5); }
.term-bar .tb.g { background: rgba(92,255,184,0.5); }
.term-bar .title { margin-left: auto; margin-right: auto; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em; color: var(--muted); }
.term-bar .spacer { width: 46px; }
.term-body { padding: 16px 16px 20px; font-family: var(--mono); font-size: 0.68rem; line-height: 1.7; height: 340px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.term-body .ln { white-space: pre-wrap; word-break: break-word; }
.term-body.clearing { animation: termClear 0.3s ease; }
@keyframes termClear { 0% { opacity: 1; } 100% { opacity: 0; filter: blur(4px); } }
.term-body .c-p { color: var(--orange); }
.term-body .c-cmd { color: var(--text); }
.term-body .c-out { color: #555; }
.term-body .c-ok { color: #555; }
.term-body .c-cy { color: #555; }
.term-body .c-dim { color: #555; }
.term-body .c-wn { color: var(--orange-hi); }
.term-caret { display: inline-block; width: 7px; height: 13px; background: var(--orange); vertical-align: -2px; animation: smoothBlink 1.8s ease-in-out infinite; }
.hero-side { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.hero-side-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); padding-left: 4px; animation: fadeUp 0.7s 0.62s var(--ease) both; }
.hsm-item { display: inline-flex; align-items: center; gap: 8px; }
.hsm-item + .hsm-item::before { content: '/'; opacity: 0.4; margin-right: 2px; }
.hsm-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px rgba(92,255,184,0.7); flex: none; }
.hero-scroll { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 9px; font-family: var(--mono); font-size: 0.54rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--muted); transition: color 0.3s ease; animation: heroScrollIn 0.9s 0.85s var(--ease) backwards; }
@keyframes heroScrollIn { from { opacity: 0; } to { opacity: 1; } }
.hero-scroll:hover { color: var(--orange); }
.hs-track { position: relative; width: 22px; height: 34px; border: 1px solid var(--border-w); border-radius: 12px; }
.hs-thumb { position: absolute; top: 6px; left: 50%; width: 3px; height: 6px; border-radius: 2px; background: var(--orange); transform: translateX(-50%); animation: scrollThumb 1.9s var(--ease) infinite; }
@keyframes scrollThumb { 0% { opacity: 0; transform: translate(-50%, 0); } 25% { opacity: 1; } 70% { opacity: 1; transform: translate(-50%, 12px); } 100% { opacity: 0; transform: translate(-50%, 12px); } }
.marquee-wrap { overflow: hidden; border-top: 1px solid var(--border-w); border-bottom: 1px solid var(--border-w); padding: 15px 0; background: var(--bg-2); position: relative; z-index: 2; }
.marquee-track { display: flex; gap: 48px; animation: marquee 30s linear infinite; width: max-content; }
.marquee-item { font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); white-space: nowrap; display: flex; align-items: center; gap: 20px; }
.marquee-item .sep { color: var(--orange); font-size: 0.5rem; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
#capabilities { padding: 130px 0; position: relative; }
.cap-intro-side { max-width: 420px; }
.section-intro .cap-subtitle { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--orange); margin-bottom: 14px; }
.section-intro .cap-desc { color: var(--text-2); font-size: 0.98rem; font-weight: 300; line-height: 1.8; }
.services-bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.sc { --sc-pad: 42px; background: linear-gradient(180deg, #141A24, #10151D); border: 1px solid var(--border-w); border-radius: 12px; padding: var(--sc-pad); position: relative; overflow: hidden; display: flex; flex-direction: column; transition: border-color 0.45s var(--ease), transform 0.45s var(--ease), box-shadow 0.45s var(--ease); box-shadow: 0 4px 20px rgba(0,0,0,0.2), 0 0 0 1px rgba(var(--accent-rgb),0.02); }
.sc::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),0), transparent); transition: background 0.45s ease; }
.sc:hover { border-color: rgba(var(--accent-rgb),0.22); transform: translateY(-3px); box-shadow: 0 18px 48px rgba(0,0,0,0.45), 0 0 0 1px rgba(var(--accent-rgb),0.05); }
.sc:hover::before { background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),0.5), transparent); }
.sc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.sc-id { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.12em; color: rgba(var(--accent-rgb),0.35); transition: color 0.45s ease; }
.sc:hover .sc-id { color: var(--orange); }
.sc-1 { grid-column: 1 / 4; }
.sc-2 { grid-column: 4 / 7; }
.sc-3 { grid-column: 7 / 10; }
.sc-4 { grid-column: 10 / 13; }
.sc-quote { grid-column: 1 / 7; min-height: 240px; }
.sc-cta-card { grid-column: 7 / 13; min-height: 240px; }
.sc-icon { width: 50px; height: 50px; border: 1px solid var(--border); border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--orange-5); transition: border-color 0.4s ease, box-shadow 0.4s ease; }
.sc:hover .sc-icon { border-color: rgba(var(--accent-rgb),0.35); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.06), 0 0 18px rgba(var(--accent-rgb),0.16); }
.sc-icon svg { width: 22px; height: 22px; stroke: var(--orange); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sc h3 { font-family: var(--display); font-weight: 600; font-size: 1.3rem; letter-spacing: -0.02em; margin-bottom: 14px; }
.sc p { color: var(--text-2); font-size: 0.9rem; line-height: 1.75; font-weight: 300; }
.sc-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 24px; }
.sc-tags span { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); background: var(--bg-3); border: 1px solid var(--border-w); padding: 4px 10px; border-radius: 4px; transition: color 0.25s, border-color 0.25s, background 0.25s; }
.sc:hover .sc-tags span { color: var(--text-2); border-color: rgba(var(--accent-rgb),0.18); }
.sc-tags span:hover { color: var(--orange); border-color: rgba(var(--accent-rgb),0.4); background: var(--orange-5); }
.sc-status { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: auto calc(-1 * var(--sc-pad)) calc(-1 * var(--sc-pad)); padding: 11px 20px; background: rgba(0,0,0,0.18); border-top: 1px solid var(--border-w); font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.08em; color: var(--muted); }
.sc-file { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.06em; color: var(--muted); }
.sc-quote { background: linear-gradient(140deg, rgba(var(--accent-rgb),0.09) 0%, rgba(var(--accent-rgb),0.02) 45%, transparent 75%); border-color: var(--border); display: flex; flex-direction: column; justify-content: space-between; }
.sc-quote .sc-file { color: var(--orange); opacity: 0.8; }
.sc-quote blockquote { font-family: var(--display); font-weight: 600; font-size: 1.7rem; line-height: 1.25; letter-spacing: -0.03em; margin-top: auto; }
.sc-quote blockquote em { font-style: normal; color: var(--orange); }
.sc-quote .qmark { font-family: var(--mono); font-size: 4.5rem; line-height: 1; color: rgba(var(--accent-rgb),0.1); position: absolute; top: 22px; right: 30px; pointer-events: none; }
.sc-quote .sc-status { margin: 26px calc(-1 * var(--sc-pad)) calc(-1 * var(--sc-pad)); }
.sc-cta-card { background: linear-gradient(135deg, var(--accent-hi), var(--orange)); border-color: transparent; display: flex; flex-direction: column; justify-content: space-between; cursor: none; }
.sc-cta-card::before { display: none; }
.sc-cta-card:hover { transform: translateY(-3px); box-shadow: 0 18px 48px rgba(var(--accent-rgb),0.22); }
.sc-cta-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.sc-cta-card .sc-file { color: rgba(10,13,18,0.6); }
.sc-cta-dot { width: 8px; height: 8px; border-radius: 50%; background: #0A0D12; opacity: 0.45; animation: pulse 2s ease-in-out infinite; }
.sc-cta-body { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.sc-cta-card h3 { color: var(--bg); font-size: 1.55rem; letter-spacing: -0.03em; }
.sc-cta-card p { color: rgba(10,13,18,0.68); font-size: 0.92rem; margin-top: 10px; }
.cta-arrow { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.cta-arrow span { font-family: var(--mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bg); }
.cta-arrow-icon { width: 44px; height: 44px; border: 1px solid rgba(10,13,18,0.25); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--bg); font-size: 1.1rem; transition: transform 0.3s var(--ease), background 0.3s ease; }
.sc-cta-card:hover .cta-arrow-icon { transform: rotate(-45deg); background: rgba(10,13,18,0.12); }
#process { padding: 130px 0; background: var(--bg-2); border-top: 1px solid var(--border-w); border-bottom: 1px solid var(--border-w); }
.proc-subtitle { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); letter-spacing: 0.08em; }
.proc-layout { display: grid; grid-template-columns: 1fr 0.9fr; gap: 48px; align-items: start; }
.proc-cards { display: flex; flex-direction: column; gap: 12px; position: relative; }
.proc-cards::before { content: ''; position: absolute; left: 45px; top: 32px; bottom: 32px; width: 1px; background: linear-gradient(180deg, rgba(var(--accent-rgb),0), rgba(var(--accent-rgb),0.3) 8%, rgba(var(--accent-rgb),0.3) 92%, rgba(var(--accent-rgb),0)); z-index: 0; }
.proc-card-particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; border-radius: 10px; }
.proc-card { position: relative; padding: 2px; border-radius: 10px; cursor: none; transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); z-index: 1; }
.proc-card-glow { position: absolute; inset: 0; border-radius: 10px; opacity: 0; transition: opacity 0.5s ease; pointer-events: none; background: radial-gradient(ellipse at 50% 50%, rgba(var(--accent-rgb),0.16) 0%, transparent 70%); }
.proc-card.active .proc-card-glow { opacity: 1; }
.proc-card-inner { position: relative; display: flex; align-items: center; gap: 18px; padding: 20px; background: linear-gradient(180deg, #141A24, #10151D); border: 1px solid var(--border-w); border-radius: 10px; transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); overflow: hidden; }
.proc-card-inner::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),0), transparent); transition: all 0.5s ease; }
.proc-card:not(.active) { opacity: 0.55; }
.proc-card:not(.active):hover { transform: translateY(-2px); opacity: 0.92; }
.proc-card:not(.active):hover .proc-card-inner { border-color: rgba(var(--accent-rgb),0.2); }
.proc-card.active .proc-card-inner { border-color: rgba(var(--accent-rgb),0.4); transform: translateX(8px); box-shadow: 0 12px 40px rgba(0,0,0,0.35), 0 0 34px rgba(var(--accent-rgb),0.08); }
.proc-card.active .proc-card-inner::before { background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),0.7), transparent); }
.proc-node { width: 44px; height: 44px; min-width: 44px; display: grid; place-items: center; font-family: var(--mono); font-size: 0.95rem; font-weight: 700; color: rgba(var(--accent-rgb),0.4); background: #0C1016; border: 1px solid var(--border-w); border-radius: 50%; transition: all 0.5s ease; position: relative; }
.proc-card:not(.active):hover .proc-node { border-color: rgba(var(--accent-rgb),0.35); color: rgba(var(--accent-rgb),0.65); }
.proc-card.active .proc-node { color: #0A0D12; background: var(--orange); border-color: var(--orange); box-shadow: 0 0 24px rgba(var(--accent-rgb),0.55), 0 0 0 5px rgba(var(--accent-rgb),0.08); }
.proc-card-content { flex: 1; min-width: 0; }
.proc-card-content h3 { font-size: 1rem; font-weight: 600; color: var(--text); margin-bottom: 6px; transition: color 0.5s ease; }
.proc-card.active .proc-card-content h3 { color: var(--orange); }
.proc-card-content p { font-size: 0.82rem; color: var(--muted); line-height: 1.55; margin-bottom: 12px; }
.proc-card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.proc-card-tag { font-family: var(--mono); font-size: 0.62rem; padding: 3px 8px; background: rgba(var(--accent-rgb),0.08); border: 1px solid rgba(var(--accent-rgb),0.12); border-radius: 4px; color: var(--orange); letter-spacing: 0.04em; transition: all 0.5s ease; }
.proc-card.active .proc-card-tag { background: rgba(var(--accent-rgb),0.14); border-color: rgba(var(--accent-rgb),0.3); }
.proc-card-time { font-family: var(--mono); font-size: 0.62rem; color: var(--cyan); margin-left: auto; letter-spacing: 0.04em; }
.proc-card-arrow { align-self: center; margin-left: 4px; font-family: var(--mono); font-size: 1rem; color: rgba(var(--accent-rgb),0.15); transition: transform 0.5s var(--ease), color 0.5s ease; }
.proc-card:hover .proc-card-arrow { color: rgba(var(--accent-rgb),0.55); }
.proc-card.active .proc-card-arrow { color: var(--orange); transform: translateX(4px) rotate(-45deg); }
.proc-terminal { background: var(--bg-3); border: 1px solid var(--border-w); border-radius: 8px; overflow: hidden; position: sticky; top: 80px; transition: border-color 0.5s ease, box-shadow 0.5s ease; box-shadow: 0 4px 24px rgba(0,0,0,0.25), 0 0 0 1px rgba(var(--accent-rgb),0.03); }
.proc-terminal:hover { border-color: rgba(var(--accent-rgb),0.22); box-shadow: 0 8px 32px rgba(0,0,0,0.35), 0 0 0 1px rgba(var(--accent-rgb),0.06), 0 0 44px rgba(var(--accent-rgb),0.05); }
.proc-term-bar { display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: rgba(255,255,255,0.025); border-bottom: 1px solid var(--border-w); }
.proc-term-bar .title { flex: 1; text-align: center; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em; color: var(--muted); }
.proc-progress { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.14em; color: var(--orange); white-space: nowrap; }
.proc-term-body { padding: 26px 24px 18px; font-family: var(--mono); font-size: 0.74rem; line-height: 1.9; }
.proc-line { color: var(--text-2); }
.proc-line.spacer { height: 10px; }
.proc-prompt { color: var(--orange); font-weight: 500; }
.proc-cmd { color: var(--text); transition: all 0.3s ease; }
.proc-comment { color: var(--muted); font-style: italic; }
.proc-out-block { margin: 8px 0 4px; padding: 10px 14px; background: rgba(var(--accent-rgb),0.045); border: 1px solid rgba(var(--accent-rgb),0.09); border-left: 2px solid rgba(var(--accent-rgb),0.4); border-radius: 4px; }
.proc-output { padding-left: 0; }
.proc-ok { color: var(--green); font-weight: 500; }
.proc-detail { color: var(--orange); margin-right: 4px; }
.proc-time { color: var(--cyan); font-weight: 500; }
.proc-cursor { display: inline-block; width: 7px; height: 14px; background: var(--orange); animation: smoothBlink 1.8s ease-in-out infinite; vertical-align: middle; margin-left: 4px; }
.proc-line { transition: opacity 0.3s ease; }
#procCmd, #procPhaseDesc, #procPhaseDetail, #procPhaseTime { transition: opacity 0.25s ease; }
.proc-term-status { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: rgba(0,0,0,0.16); border-top: 1px solid var(--border-w); font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em; color: var(--muted); }
.pstat-ok { color: var(--green); font-weight: 700; margin-right: 6px; }
#work { padding: 130px 0; position: relative; }
.section-particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
#capabilities, #process, #about, #testimonials, footer { position: relative; }
#capabilities > .container, #process > .container, #about > .container, #testimonials > .container, footer > .container { position: relative; z-index: 1; }
.work-particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
#work .container { position: relative; z-index: 1; }
#work .section-intro h2 { margin-top: 20px; }
.work-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 48px; }
.filter-btn { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); background: none; border: 1px solid var(--border-w); padding: 8px 16px; border-radius: 2px; transition: all 0.2s; }
.filter-btn.active, .filter-btn:hover { color: var(--orange); border-color: var(--border); background: var(--orange-dim); }
.work-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.work-card { background: var(--bg-2); border: 1px solid var(--border-w); border-radius: 4px; overflow: visible; position: relative; transition: opacity 0.45s var(--ease), transform 0.45s var(--ease), border-color 0.5s var(--ease), filter 0.5s var(--ease), box-shadow 0.5s var(--ease); transform-style: preserve-3d; box-shadow: 0 4px 20px rgba(0,0,0,0.2), 0 0 0 1px rgba(var(--accent-rgb),0.02); }
.work-card:hover { border-color: rgba(var(--accent-rgb),0.22); }
.wc-1 { grid-column: 1 / 8; transition: border-color 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.wc-1 .term-preview { transition: opacity 0.5s ease, filter 0.5s ease; }
.wc-1:hover .term-preview { opacity: 0.25; filter: blur(3px) brightness(0.6); }
.wc-1::after { content: ''; position: absolute; inset: 0; background: rgba(10,13,18,0.65); opacity: 0; transition: opacity 0.5s ease; z-index: 2; pointer-events: none; }
.wc-1:hover::after { opacity: 1; }
.wc-1:hover .work-card-overlay { z-index: 5; }
.wc-2 { grid-column: 1 / 6; }
.wc-3 { grid-column: 8 / 13; }
.wc-4 { grid-column: 6 / 13; }
.work-card:hover { border-color: rgba(var(--accent-rgb),0.3); box-shadow: 0 16px 50px rgba(0,0,0,0.35), 0 0 30px rgba(var(--accent-rgb),0.06); }
.wc-contrib-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.wc-contrib-tags span { font-family: var(--mono); font-size: 0.52rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green); background: rgba(92,255,184,0.08); border: 1px solid rgba(92,255,184,0.2); padding: 3px 8px; border-radius: 2px; }
.work-card:hover .wc-contrib-tags span { color: var(--green); border-color: rgba(92,255,184,0.35); }
.wc-icon-art { position: relative; z-index: 1; opacity: 0.6; transition: opacity 0.4s, transform 0.6s var(--ease); }
.wc-icon-art svg { width: 140px; height: 140px; }
.work-card:hover .wc-icon-art { opacity: 1; transform: scale(1.05); }
.work-card-thumb { height: 220px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.wc-1 .work-card-thumb { height: 300px; }
.wc-bg { position: absolute; inset: 0; transition: transform 0.6s var(--ease); }
.work-card:hover .wc-bg { transform: scale(1.03); }
.wc-diagram { position: relative; z-index: 1; }
.work-card-terminal { align-items: flex-start; justify-content: flex-start; }
.term-preview { position: relative; z-index: 4; padding: 28px 24px 60px; font-family: var(--mono); font-size: 0.72rem; line-height: 1.8; width: 100%; box-shadow: inset 0 0 40px rgba(0,0,0,0.15); }
.tp-line { color: var(--text-2); position: relative; z-index: 4; opacity: 0; transform: translateX(-8px); transition: opacity 0.4s ease, transform 0.4s ease; }
.tp-line.visible { opacity: 1; transform: translateX(0); }
.tp-green { color: var(--green); font-weight: 500; }
.tp-dim { color: var(--muted); }
.tp-prompt { color: var(--orange); font-weight: 500; }
.tp-cmd { color: var(--text); }
.tp-ok { color: var(--green); }
.tp-file { color: var(--muted); padding-left: 12px; }
.tp-cursor { display: inline-block; width: 7px; height: 14px; background: var(--orange); animation: smoothBlink 1.8s ease-in-out infinite; vertical-align: middle; }
.work-card-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(10,13,18,0.95) 0%, rgba(10,13,18,0.7) 50%, transparent 100%); opacity: 0; transition: opacity 0.4s ease; display: flex; align-items: flex-end; padding: 20px 28px; z-index: 3; pointer-events: none; }
.wc-1:hover .work-card-overlay { opacity: 1; z-index: 5; }
.work-card:hover .work-card-overlay { opacity: 1; }
.overlay-stack span { transition: transform 0.3s ease, opacity 0.3s ease; opacity: 0; transform: translateY(10px); }
.work-card:hover .overlay-stack span { opacity: 1; transform: translateY(0); }
.work-card:hover .overlay-stack span:nth-child(1) { transition-delay: 0.05s; }
.work-card:hover .overlay-stack span:nth-child(2) { transition-delay: 0.1s; }
.work-card:hover .overlay-stack span:nth-child(3) { transition-delay: 0.15s; }
.work-card:hover .overlay-stack span:nth-child(4) { transition-delay: 0.2s; }
.overlay-stack { display: flex; flex-wrap: wrap; gap: 6px; }
.overlay-stack span { font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.1em; text-transform: uppercase; background: rgba(var(--accent-rgb),0.14); border: 1px solid rgba(var(--accent-rgb),0.28); color: var(--orange); padding: 3px 8px; border-radius: 2px; }
.work-card-body { padding: 28px; }
.wc-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.wc-type { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--orange); }
.wc-sep { width: 20px; height: 1px; background: var(--border-w); }
.wc-year { font-family: var(--mono); font-size: 0.58rem; color: var(--muted); }
.work-card h3 { font-family: var(--display); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.02em; margin-bottom: 4px; }
.wc-subtitle { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange); margin-bottom: 10px; opacity: 0.8; }
.work-card .wc-desc { color: var(--text-2); font-size: 0.88rem; line-height: 1.7; font-weight: 300; }
.wc-result { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border-w); }
.wc-result-num { font-family: var(--display); font-weight: 700; font-size: 1.6rem; color: var(--orange); letter-spacing: -0.03em; flex-shrink: 0; }
.wc-result-label { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); line-height: 1.5; }
#about { padding: 130px 0; background: var(--bg-2); border-top: 1px solid var(--border-w); border-bottom: 1px solid var(--border-w); }
.about-subtitle { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); letter-spacing: 0.08em; }
.about-cursor { display: inline-block; width: 7px; height: 13px; background: var(--orange); vertical-align: -2px; margin-left: 2px; animation: smoothBlink 1.8s ease-in-out infinite; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.about-terminal { background: var(--bg-3); border: 1px solid var(--border-w); border-radius: 8px; overflow: hidden; margin-bottom: 36px; transform-style: preserve-3d; transform: perspective(800px) rotateY(12deg) rotateX(3deg) translateX(40px) scale(1); will-change: transform; box-shadow: 0 4px 24px rgba(0,0,0,0.25), 0 0 0 1px rgba(var(--accent-rgb),0.03); transition: box-shadow 0.4s ease; }
.about-terminal.visible { transform: perspective(800px) rotateY(0deg) rotateX(0deg) translateX(0) scale(1); }
.about-terminal.tilting { transition: none; }
.about-terminal:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.35), 0 0 0 1px rgba(var(--accent-rgb),0.08), 0 0 40px rgba(var(--accent-rgb),0.05); }
.work-card.tilting, .testi-card.tilting { transition: none !important; }
.about-term-bar { display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: rgba(255,255,255,0.025); border-bottom: 1px solid var(--border-w); }
.about-term-bar .title { flex: 1; text-align: center; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em; color: var(--muted); }
.at-version { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.14em; color: var(--orange); white-space: nowrap; }
.about-term-body { padding: 24px 20px; font-family: var(--mono); font-size: 0.74rem; line-height: 1.85; }
.at-line { color: var(--text-2); }
.at-line.spacer { height: 10px; }
.at-prompt { color: var(--orange); font-weight: 500; }
.at-cmd { color: var(--text); }
.at-output { padding-left: 0; }
.at-line { opacity: 0; transform: translateX(-6px); transition: opacity 0.4s ease, transform 0.4s ease; }
.at-line.visible { opacity: 1; transform: translateX(0); }
.at-name { color: var(--green); font-weight: 500; }
.at-out-block { margin: 8px 0 4px; padding: 10px 14px; background: rgba(var(--accent-rgb),0.045); border: 1px solid rgba(var(--accent-rgb),0.09); border-left: 2px solid rgba(var(--accent-rgb),0.4); border-radius: 4px; }
.at-out-block .at-line { line-height: 1.75; }
.at-cursor { display: inline-block; width: 7px; height: 14px; background: var(--orange); animation: smoothBlink 1.8s ease-in-out infinite; vertical-align: middle; margin-left: 4px; }
.about-term-status { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: rgba(0,0,0,0.16); border-top: 1px solid var(--border-w); font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em; color: var(--muted); }
.box-status-l { display: inline-flex; align-items: center; }
.manifesto-list { margin-top: 40px; position: relative; display: flex; flex-direction: column; gap: 12px; }
.manifesto-list::before { content: ''; position: absolute; left: 34px; top: 24px; bottom: 24px; width: 1px; background: linear-gradient(180deg, rgba(var(--accent-rgb),0), rgba(var(--accent-rgb),0.3) 8%, rgba(var(--accent-rgb),0.3) 92%, rgba(var(--accent-rgb),0)); z-index: 0; }
.manifesto-item { position: relative; z-index: 1; }
.manifesto-inner { position: relative; display: flex; align-items: center; gap: 16px; padding: 16px 20px; background: linear-gradient(180deg, #141A24, #10151D); border: 1px solid var(--border-w); border-radius: 8px; transition: transform 0.4s var(--ease), border-color 0.4s ease, box-shadow 0.4s ease; }
.manifesto-inner::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),0), transparent); transition: background 0.4s ease; }
.manifesto-item:hover .manifesto-inner { transform: translateY(-2px); border-color: rgba(var(--accent-rgb),0.25); box-shadow: 0 10px 28px rgba(0,0,0,0.3), 0 0 0 1px rgba(var(--accent-rgb),0.04); }
.manifesto-item:hover .manifesto-inner::before { background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),0.4), transparent); }
.manifesto-node { width: 28px; height: 28px; min-width: 28px; display: grid; place-items: center; font-family: var(--mono); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.02em; color: rgba(var(--accent-rgb),0.4); background: #0C1016; border: 1px solid var(--border-w); border-radius: 50%; transition: all 0.4s ease; }
.manifesto-item:hover .manifesto-node { color: var(--orange); border-color: rgba(var(--accent-rgb),0.4); box-shadow: 0 0 14px rgba(var(--accent-rgb),0.2); }
.manifesto-text { flex: 1; font-family: var(--display); font-weight: 500; font-size: 0.92rem; letter-spacing: -0.01em; color: var(--text-2); line-height: 1.5; transition: color 0.4s ease; }
.manifesto-item:hover .manifesto-text { color: var(--text); }
.manifesto-arrow { font-family: var(--mono); font-size: 0.85rem; color: rgba(var(--accent-rgb),0.15); transition: transform 0.4s var(--ease), color 0.4s ease; }
.manifesto-item:hover .manifesto-arrow { color: var(--orange); transform: translateX(4px) rotate(-45deg); }
.about-system { background: var(--bg-3); border: 1px solid var(--border-w); border-radius: 8px; padding: 24px; margin-bottom: 24px; position: relative; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.2), 0 0 0 1px rgba(var(--accent-rgb),0.03); transition: border-color 0.4s ease, box-shadow 0.4s ease; }
.about-system:hover { border-color: rgba(var(--accent-rgb),0.2); box-shadow: 0 8px 28px rgba(0,0,0,0.3), 0 0 0 1px rgba(var(--accent-rgb),0.06); }
.about-system::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, var(--orange), transparent); animation: sysScan 3s ease-in-out infinite; }
@keyframes sysScan { 0%,100% { transform: translateX(-100%); } 50% { transform: translateX(100%); } }
.sys-header { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--border-w); }
.sys-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); animation: pulse 2s ease-in-out infinite; }
.sys-title { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); }
.sys-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.sys-item { display: flex; flex-direction: column; gap: 4px; padding: 12px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.04); border-radius: 6px; transition: border-color 0.4s ease, background 0.4s ease; }
.sys-item:hover { border-color: rgba(var(--accent-rgb),0.15); background: rgba(var(--accent-rgb),0.03); }
.sys-label { font-family: var(--mono); font-size: 0.52rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.sys-val { font-family: var(--display); font-size: 0.88rem; color: var(--text-2); }
.sys-active { color: var(--green); }
.sys-bar { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--border-w); }
.sys-bar-label { font-family: var(--mono); font-size: 0.52rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); flex-shrink: 0; }
.sys-bar-track { flex: 1; height: 4px; background: var(--bg-4); border-radius: 2px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,0.4); }
.sys-bar-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--orange), var(--green)); border-radius: 2px; box-shadow: 0 0 12px rgba(var(--accent-rgb),0.4); transition: width 1.5s var(--ease); }
.about-system.in .sys-bar-fill { width: 99.9%; }
.sys-bar-val { font-family: var(--mono); font-size: 0.62rem; color: var(--orange); font-weight: 500; }
.sys-status { display: flex; align-items: center; justify-content: space-between; margin: 20px -24px -24px; padding: 10px 14px; background: rgba(0,0,0,0.16); border-top: 1px solid var(--border-w); font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em; color: var(--muted); }
.about-stack-anim { background: var(--bg-3); border: 1px solid var(--border-w); border-radius: 8px; overflow: hidden; margin-bottom: 24px; box-shadow: 0 4px 20px rgba(0,0,0,0.2), 0 0 0 1px rgba(var(--accent-rgb),0.03); transition: border-color 0.4s ease, box-shadow 0.4s ease; }
.about-stack-anim:hover { border-color: rgba(var(--accent-rgb),0.2); box-shadow: 0 8px 28px rgba(0,0,0,0.3), 0 0 0 1px rgba(var(--accent-rgb),0.06); }
.sl-term-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: rgba(255,255,255,0.025); border-bottom: 1px solid var(--border-w); }
.sl-term-bar .tb { width: 8px; height: 8px; border-radius: 50%; }
.sl-term-bar .tb.r { background: rgba(255,92,87,0.55); }
.sl-term-bar .tb.y { background: rgba(var(--accent-rgb),0.5); }
.sl-term-bar .tb.g { background: rgba(92,255,184,0.5); }
.sl-term-bar .title { flex: 1; text-align: center; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.12em; color: var(--muted); }
.sl-status { font-family: var(--mono); font-size: 0.54rem; letter-spacing: 0.14em; color: var(--green); white-space: nowrap; }
.sl-body { padding: 18px 16px; font-family: var(--mono); font-size: 0.66rem; line-height: 1.8; }
.sl-line { color: #555; opacity: 0; transform: translateX(-6px); transition: opacity 0.4s ease, transform 0.4s ease; white-space: pre-wrap; }
.sl-line.visible { opacity: 1; transform: none; }
.sl-prompt { color: var(--orange); font-weight: 500; }
.sl-ok { color: var(--green); font-weight: 500; margin-right: 4px; }
.sl-cursor-line { margin-top: 4px; }
.sl-cursor { display: inline-block; width: 6px; height: 12px; background: var(--orange); animation: smoothBlink 1.8s ease-in-out infinite; vertical-align: middle; }
.sl-status-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: rgba(0,0,0,0.16); border-top: 1px solid var(--border-w); font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em; color: var(--muted); }
.about-quote { background: linear-gradient(135deg, rgba(var(--accent-rgb),0.08) 0%, rgba(92,255,184,0.04) 100%); border: 1px solid var(--border); border-radius: 8px; padding: 30px 32px; position: relative; overflow: hidden; transition: border-color 0.4s ease, box-shadow 0.4s ease; }
.about-quote:hover { border-color: rgba(var(--accent-rgb),0.25); box-shadow: 0 8px 28px rgba(0,0,0,0.25), 0 0 0 1px rgba(var(--accent-rgb),0.05); }
.about-quote::before { content: '"'; position: absolute; top: -20px; left: 20px; font-family: var(--display); font-size: 8rem; color: rgba(var(--accent-rgb),0.08); pointer-events: none; line-height: 1; }
.aq-label { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); position: relative; z-index: 1; }
.about-quote blockquote { font-family: var(--display); font-weight: 500; font-size: 1.1rem; line-height: 1.6; color: var(--text-2); position: relative; z-index: 1; margin-top: 10px; }
.about-quote blockquote em { font-style: normal; color: var(--orange); }
.aq-glow { position: absolute; top: -50%; right: -30%; width: 200px; height: 200px; background: radial-gradient(circle, rgba(var(--accent-rgb),0.1) 0%, transparent 70%); pointer-events: none; }
.value-cards { display: none; }
#testimonials { padding: 130px 0; }
.testi-subtitle { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); letter-spacing: 0.08em; }
.testi-cursor { display: inline-block; width: 7px; height: 13px; background: var(--orange); vertical-align: -2px; margin-left: 2px; animation: smoothBlink 1.8s ease-in-out infinite; }
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.testi-card { background: linear-gradient(180deg, #141A24, #10151D); border: 1px solid var(--border-w); border-radius: 8px; padding: 26px 24px; position: relative; transform-style: preserve-3d; transition: border-color 0.4s ease, box-shadow 0.4s ease; box-shadow: 0 4px 20px rgba(0,0,0,0.2), 0 0 0 1px rgba(var(--accent-rgb),0.02); }
.testi-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),0), transparent); transition: background 0.4s ease; }
.testi-card:hover { border-color: rgba(var(--accent-rgb),0.22); box-shadow: 0 10px 30px rgba(0,0,0,0.3), 0 0 0 1px rgba(var(--accent-rgb),0.04), 0 0 34px rgba(var(--accent-rgb),0.04); }
.testi-card:hover::before { background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),0.5), transparent); }
.testi-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.testi-stars { position: relative; display: inline-block; font-family: var(--mono); font-size: 0.8rem; line-height: 1; }
.stars-track, .stars-fill { display: inline-block; white-space: nowrap; letter-spacing: 2px; }
.stars-track { color: rgba(var(--accent-rgb),0.16); }
.stars-fill { position: absolute; top: 0; left: 0; height: 100%; width: var(--rate, 50%); overflow: hidden; color: var(--orange); text-shadow: 0 0 10px rgba(var(--accent-rgb),0.5); }
.testi-val { font-family: var(--mono); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.08em; color: var(--orange); background: var(--orange-dim); border: 1px solid var(--border); border-radius: 4px; padding: 3px 8px; white-space: nowrap; }
.testi-quote { font-size: 0.92rem; color: var(--text-2); line-height: 1.75; font-weight: 300; margin-bottom: 22px; }
.testi-author { display: flex; align-items: center; gap: 14px; padding-top: 18px; border-top: 1px solid var(--border-w); }
.testi-avatar { width: 40px; height: 40px; border-radius: 8px; background: var(--bg-3); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-weight: 700; font-size: 0.78rem; color: var(--orange); flex-shrink: 0; }
.testi-name { font-family: var(--display); font-weight: 600; font-size: 0.9rem; color: var(--text); }
.testi-role { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.testi-verif { margin-left: auto; font-family: var(--mono); font-size: 0.52rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.tc-featured { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; padding: 28px 30px; }
.tc-featured .testi-author { flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 0; padding-left: 26px; border-top: none; border-left: 1px solid var(--border-w); min-width: 220px; }
.tc-featured .testi-avatar { width: 48px; height: 48px; font-size: 0.9rem; }
.tc-featured .testi-quote { margin-bottom: 0; font-size: 1rem; line-height: 1.8; }
.tc-featured .testi-verif { margin-left: 0; margin-top: 6px; }
.testi-log { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding: 13px 18px; background: rgba(0,0,0,0.2); border: 1px solid var(--border-w); border-radius: 8px; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em; color: var(--muted); }
.tl-avg { color: var(--orange); font-weight: 500; }
#contact { padding: 130px 0; background: var(--bg-2); border-top: 1px solid var(--border-w); position: relative; overflow: hidden; }
.contact-particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.contact-aura { position: absolute; top: -140px; left: 50%; transform: translateX(-50%); width: 900px; max-width: 130%; height: 400px; background: radial-gradient(ellipse at center, rgba(var(--accent-rgb),0.10), transparent 65%); filter: blur(70px); pointer-events: none; z-index: 0; }
#contact .container { position: relative; z-index: 1; }
.contact-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 32px; align-items: start; }

.contact-left, .contact-form { position: relative; background: linear-gradient(180deg, rgba(20,26,35,0.72), rgba(11,15,21,0.85)); border: 1px solid var(--border-w); border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.03); transition: border-color 0.4s ease, box-shadow 0.4s ease; }
.contact-left:hover, .contact-form:hover { border-color: rgba(var(--accent-rgb),0.22); box-shadow: 0 30px 72px rgba(0,0,0,0.45), 0 0 0 1px rgba(var(--accent-rgb),0.06), 0 0 60px rgba(var(--accent-rgb),0.05); }

.cp-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: rgba(255,255,255,0.025); border-bottom: 1px solid var(--border-w); }
.cp-bar .tb { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.cp-bar .tb.r { background: rgba(255,92,87,0.55); }
.cp-bar .tb.y { background: rgba(var(--accent-rgb),0.5); }
.cp-bar .tb.g { background: rgba(92,255,184,0.5); }
.cp-bar-title { margin-left: 4px; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; color: var(--text-2); }
.cp-bar-state { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.cp-pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px rgba(92,255,184,0.75); animation: pulse 2s ease-in-out infinite; }
.cp-caret { display: inline-block; width: 6px; height: 12px; margin-left: 3px; background: var(--orange); vertical-align: -1px; animation: smoothBlink 1.6s ease-in-out infinite; }

.cp-body { padding: 26px 24px 28px; }
.cf-body { display: flex; flex-direction: column; gap: 16px; padding: 26px 24px 28px; }

.contact-info { display: flex; flex-direction: column; gap: 12px; }
.contact-row { display: flex; align-items: center; gap: 14px; padding: 15px 16px; background: var(--bg-3); border: 1px solid var(--border-w); border-radius: 6px; text-decoration: none; color: inherit; transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s var(--ease); }
.contact-row:hover { border-color: rgba(var(--accent-rgb),0.28); background: var(--bg-4); transform: translateX(3px); }
.contact-row.is-static:hover { transform: none; }
.cr-icon { width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--orange); font-family: var(--mono); font-size: 0.85rem; flex: none; background: var(--orange-5); }
.cr-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cr-label { font-family: var(--mono); font-size: 0.54rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.cr-val { font-family: var(--mono); font-size: 0.82rem; color: var(--text); font-weight: 300; letter-spacing: 0.02em; overflow-wrap: anywhere; }
.cr-arrow { margin-left: auto; font-family: var(--mono); font-size: 0.85rem; color: var(--muted); opacity: 0; transform: translate(-4px, 4px); transition: opacity 0.3s ease, transform 0.3s var(--ease), color 0.3s ease; }
.contact-row:hover .cr-arrow { opacity: 1; transform: translate(0, 0); color: var(--orange); }
.contact-row .cr-arrow.is-live { opacity: 1; transform: none; color: var(--green); }

.contact-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; padding-top: 18px; border-top: 1px solid var(--border-w); }
.cm-item { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cm-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex: none; }
.cm-dot.is-live { background: var(--orange); box-shadow: 0 0 8px rgba(var(--accent-rgb),0.7); animation: pulse 2s ease-in-out infinite; }
.cm-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cm-label { font-family: var(--mono); font-size: 0.54rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.cm-val { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.02em; color: var(--text-2); }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-group label { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.form-group label::before { content: '> '; color: var(--orange); }
.form-group input, .form-group select, .form-group textarea { background: rgba(0,0,0,0.22); border: 1px solid var(--border-w); border-radius: 6px; color: var(--text); font-family: var(--mono); font-size: 0.85rem; font-weight: 300; padding: 13px 15px; outline: none; transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; width: 100%; -webkit-appearance: none; }
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--muted); font-size: 0.8rem; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: rgba(var(--accent-rgb),0.38); background: rgba(0,0,0,0.3); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.1); }
.form-group select { cursor: none; color: var(--text-2); }
.form-group select option { background: var(--bg-3); color: var(--text); }
.form-group textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.form-submit { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 4px; }
.form-note { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.08em; color: var(--muted); line-height: 1.7; }
.form-success { display: none; background: rgba(var(--accent-rgb),0.07); border: 1px solid var(--border); border-radius: 6px; padding: 16px 18px; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em; color: var(--orange); }
.form-error { display: none; background: rgba(255,92,87,0.07); border: 1px solid rgba(255,92,87,0.2); border-radius: 6px; padding: 16px 18px; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em; color: var(--red); }

footer { padding: 72px 0 40px; border-top: 1px solid var(--border-w); background: var(--bg); position: relative; overflow: hidden; }
.footer-glow { position: absolute; top: -80px; left: 50%; transform: translateX(-50%); width: 600px; height: 180px; background: radial-gradient(ellipse at center, rgba(var(--accent-rgb),0.25) 0%, rgba(var(--accent-rgb),0.1) 40%, transparent 70%); pointer-events: none; filter: blur(40px); z-index: 0; animation: footer-breathe 4s ease-in-out infinite; }
@keyframes footer-breathe {
  0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.2); }
}
.footer-cta, .footer-top, .footer-bottom { position: relative; z-index: 1; }
.footer-cta { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-bottom: 40px; margin-bottom: 48px; border-bottom: 1px solid var(--border-w); flex-wrap: wrap; }
.footer-cta-title { font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 3.2vw, 2.5rem); letter-spacing: -0.02em; line-height: 1.12; margin-top: 14px; max-width: 620px; }
.footer-cta-title em { font-style: normal; color: var(--orange); }
.footer-cta .btn { flex: none; }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 56px; margin-bottom: 56px; }
.footer-brand .nav-logo { display: inline-flex; }
.footer-brand p { color: var(--muted); font-size: 0.88rem; line-height: 1.7; font-weight: 300; margin-top: 18px; max-width: 300px; }
.footer-brand .tagline { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange); margin-top: 22px; display: flex; align-items: center; gap: 10px; }
.footer-brand .tagline::before { content: ''; width: 20px; height: 1px; background: var(--orange); }
.footer-col h4 { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-2); margin-bottom: 20px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.footer-col ul li a { position: relative; font-size: 0.88rem; color: var(--muted); transition: color 0.2s ease, padding-left 0.25s var(--ease); font-weight: 300; }
.footer-col ul li a::before { content: ''; position: absolute; left: 0; top: 50%; width: 0; height: 1px; background: var(--orange); transform: translateY(-50%); transition: width 0.25s var(--ease); }
.footer-col ul li a:hover { color: var(--orange); padding-left: 14px; }
.footer-col ul li a:hover::before { width: 9px; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 28px; border-top: 1px solid var(--border-w); flex-wrap: wrap; gap: 16px; }
.footer-bottom-left { display: flex; align-items: center; gap: 10px; }
.footer-bottom p { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.footer-dot { color: var(--muted); opacity: 0.5; }
.footer-status { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.fs-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px rgba(92,255,184,0.75); animation: pulse 2s ease-in-out infinite; }
.footer-socials { display: flex; gap: 12px; }
.footer-socials a { width: 36px; height: 36px; border: 1px solid var(--border-w); border-radius: 8px; display: flex; align-items: center; justify-content: center; transition: border-color 0.2s, background 0.2s, transform 0.2s var(--ease); }
.footer-socials a:hover { border-color: var(--border); background: var(--orange-dim); transform: translateY(-2px); }
.footer-socials svg { width: 14px; height: 14px; stroke: var(--muted); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.2s; }
.footer-socials a:hover svg { stroke: var(--orange); }
.mobile-nav { position: fixed; inset: 0; background: rgba(10,13,18,0.96); backdrop-filter: blur(24px); z-index: 1500; display: flex; flex-direction: column; align-items: center; gap: 0; padding: 26px 28px 34px; transform: translateX(100%); transition: transform 0.4s var(--ease); }
.mobile-nav.open { transform: none; }
.mn-head { position: relative; width: 100%; display: flex; align-items: center; justify-content: space-between; flex: none; }
.mn-links { flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 26px; width: 100%; max-width: 260px; }
.mobile-nav .mn-links a { font-family: var(--mono); font-size: 1.3rem; letter-spacing: 0.04em; color: var(--text-2); transition: color 0.2s; }
.mobile-nav .mn-links a::before { content: '> '; color: var(--orange); opacity: 0.5; }
.mobile-nav .mn-links a:hover, .mobile-nav .mn-links a.active { color: var(--orange); }
.mn-status { position: relative; width: 100%; display: flex; justify-content: center; flex: none; }
.mobile-nav-close { width: 38px; height: 38px; border-radius: 11px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); color: var(--muted); font-size: 1rem; transition: color 0.2s, border-color 0.2s, background 0.2s; }
.mobile-nav-close:hover { color: var(--orange); border-color: rgba(var(--accent-rgb),0.32); background: rgba(var(--accent-rgb),0.06); }
.progress-bar { position: fixed; top: 0; left: 0; height: 2px; background: var(--orange); z-index: 10001; width: 0%; box-shadow: 0 0 10px rgba(var(--accent-rgb),0.6); transition: width 0.1s linear; }
.back-top { position: fixed; bottom: 32px; right: 32px; z-index: 500; opacity: 0; pointer-events: none; transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.23, 1, 0.32, 1); }
.back-top.show { opacity: 1; pointer-events: all; }
.settings-dock { position: fixed; bottom: 32px; left: 32px; z-index: 1200; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.settings-btn { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(150deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02) 40%, rgba(0,0,0,0.12)), rgba(16,21,32,0.42); -webkit-backdrop-filter: blur(20px) saturate(1.7); backdrop-filter: blur(20px) saturate(1.7); border: 1px solid rgba(255,255,255,0.12); color: var(--orange); cursor: none; box-shadow: 0 10px 30px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.16); transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s var(--ease), box-shadow 0.3s ease; }
.settings-btn:hover { transform: translateY(-2px); border-color: rgba(var(--accent-rgb),0.4); background: linear-gradient(150deg, rgba(var(--accent-rgb),0.22), rgba(var(--accent-rgb),0.06)), rgba(16,21,32,0.42); box-shadow: 0 14px 34px rgba(0,0,0,0.5), 0 0 24px rgba(var(--accent-rgb),0.18), inset 0 1px 0 rgba(255,255,255,0.2); }
.settings-btn svg { width: 18px; height: 18px; transition: transform 0.5s var(--ease); }
.settings-dock.open .settings-btn svg { transform: rotate(90deg); }
.settings-panel {
  position: relative;
  width: 280px;
  padding: 18px;
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(var(--accent-rgb),0.16), rgba(var(--accent-rgb),0) 55%),
    linear-gradient(155deg, rgba(255,255,255,0.10), rgba(255,255,255,0.015) 34%, rgba(0,0,0,0.14));
  background-color: rgba(13,18,27,0.4);
  -webkit-backdrop-filter: blur(30px) saturate(1.9);
  backdrop-filter: blur(30px) saturate(1.9);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow:
    0 26px 64px rgba(0,0,0,0.55),
    0 0 0 1px rgba(var(--accent-rgb),0.10),
    inset 0 1px 0 rgba(255,255,255,0.24),
    inset 0 -1px 0 rgba(0,0,0,0.35);
  opacity: 0;
  transform: translateY(12px) scale(0.97);
  transform-origin: bottom left;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.4s var(--ease);
}
.settings-dock.open .settings-panel { opacity: 1; transform: none; pointer-events: all; }
.sp-sheen { position: absolute; top: 0; left: 0; right: 0; height: 42%; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0)); opacity: 0.7; }
.sp-head { position: relative; display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding-bottom: 13px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.sp-title { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.05em; color: var(--orange); }
.sp-caret { opacity: 0.55; margin-right: 3px; }
.sp-close { background: none; border: none; color: var(--muted); font-size: 0.85rem; line-height: 1; cursor: none; transition: color 0.2s, transform 0.2s; }
.sp-close:hover { color: var(--orange); transform: rotate(90deg); }
.sp-section { position: relative; margin-bottom: 18px; }
.sp-section:last-of-type { margin-bottom: 0; }
.sp-label { display: block; font-family: var(--mono); font-size: 0.52rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 11px; }
.sp-swatches { display: grid; grid-template-columns: repeat(8, 1fr); gap: 7px; }
.sp-swatch { position: relative; aspect-ratio: 1; width: 100%; border-radius: 9px; border: 1px solid rgba(255,255,255,0.16); background: var(--sw); cursor: none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.3); transition: transform 0.25s var(--ease), box-shadow 0.25s ease; }
.sp-swatch[data-accent="amber"] { --sw: #FFB454; }
.sp-swatch[data-accent="cyan"] { --sw: #5BD9FF; }
.sp-swatch[data-accent="green"] { --sw: #5CFFB8; }
.sp-swatch[data-accent="violet"] { --sw: #B08CFF; }
.sp-swatch[data-accent="pink"] { --sw: #FF8CBE; }
.sp-swatch[data-accent="blue"] { --sw: #5B8CFF; }
.sp-swatch[data-accent="red"] { --sw: #FF5C57; }
.sp-swatch[data-accent="teal"] { --sw: #40E0D0; }
.sp-swatch:hover { transform: translateY(-2px) scale(1.06); }
.sp-swatch.active { box-shadow: 0 0 0 2px rgba(13,18,27,0.9), 0 0 0 4px var(--sw), 0 0 18px var(--sw); }
.sp-toggle { position: relative; display: flex; align-items: center; gap: 11px; width: 100%; background: none; border: none; padding: 8px 0; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); cursor: none; transition: color 0.25s; }
.sp-toggle:hover { color: var(--text-2); }
.sp-toggle + .sp-toggle { border-top: 1px solid rgba(255,255,255,0.05); }
.sp-tog-dot { width: 32px; height: 17px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1); position: relative; flex: none; transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
.sp-tog-dot::after { content: ''; position: absolute; top: 1px; left: 1px; width: 11px; height: 11px; border-radius: 50%; background: var(--muted); transition: transform 0.3s var(--ease), background 0.3s ease, box-shadow 0.3s ease; }
.sp-toggle.on { color: var(--orange); }
.sp-toggle.on .sp-tog-dot { background: rgba(var(--accent-rgb),0.2); border-color: rgba(var(--accent-rgb),0.45); box-shadow: inset 0 0 10px rgba(var(--accent-rgb),0.25); }
.sp-toggle.on .sp-tog-dot::after { transform: translateX(15px); background: var(--orange); box-shadow: 0 0 10px var(--orange); }
.sp-foot { position: relative; margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.08); }
.sp-hint { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.sp-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 8px var(--orange); animation: spPulse 2.4s ease-in-out infinite; }
@keyframes spPulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
@media (max-width: 1200px) {
  .container { padding: 0 36px; }
  #nav { padding: 0 26px; }
  .hero-inner { gap: 48px; }
  .about-stack-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
}

@media (max-width: 1100px) {
  .sc-1, .sc-2, .sc-3, .sc-4 { grid-column: span 6; }
  .sc-quote, .sc-cta-card { grid-column: span 12; }
  .wc-1, .wc-2, .wc-3, .wc-4 { grid-column: span 12; }
}

@media (max-width: 700px) {
  .sc-1, .sc-2, .sc-3, .sc-4, .sc-quote, .sc-cta-card { grid-column: span 12; }
  .sc { --sc-pad: 24px; }
}

@media (max-width: 1080px) {
  .hero-inner { grid-template-columns: 1fr; gap: 48px; }
  .hero-side { width: 100%; max-width: 640px; }
  .term { max-width: 100%; }
  .hero-desc { max-width: 100%; }
  .hero-title { font-size: clamp(2.1rem, 4.5vw, 3.5rem); }
  .hero-scroll { display: none; }
}

@media (max-width: 980px) {
  .nav-links { display: none; }
  .nav-menu { display: grid; }
  .nav-divider { display: none; }
  #nav { padding: 0 22px; }
  .container { padding: 0 24px; }
}

@media (max-width: 900px) {
  section { padding: 92px 0 !important; }
  .section-intro { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 52px; }
  .section-intro h2 { margin-top: 12px; }
  .section-intro p { max-width: 100%; }
  .about-grid { grid-template-columns: 1fr; gap: 48px; }
  .about-stack-grid { grid-template-columns: repeat(3, 1fr); }
  .contact-grid { grid-template-columns: 1fr; gap: 28px; }
  .testi-grid { grid-template-columns: 1fr 1fr; }
  .testi-card { padding: 28px; }
  .testi-quote { font-size: 0.88rem; margin-bottom: 20px; }
  footer { padding: 48px 0 32px; }
  .footer-cta { padding-bottom: 32px; margin-bottom: 36px; }
  .footer-cta-title { font-size: clamp(1.35rem, 4vw, 2rem); }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 32px; }
  .footer-brand { grid-column: 1 / -1; margin-bottom: 4px; }
  .footer-brand p { font-size: 0.85rem; line-height: 1.6; }
  .footer-col h4 { margin-bottom: 16px; }
  .footer-col ul { gap: 10px; }
  .sc-quote blockquote { font-size: 1.4rem; }
  .sc-quote .qmark { font-size: 3rem; }
  .proc-layout { grid-template-columns: 1fr; gap: 24px; }
  .proc-terminal { position: static; }
  .proc-card-inner { padding: 16px; }
  .proc-node { width: 40px; height: 40px; min-width: 40px; font-size: 0.85rem; }
  .proc-cards::before { left: 39px; }
  .proc-term-body { padding: 20px 16px; font-size: 0.68rem; }
  .proc-line { line-height: 1.7; }
  .proc-output { padding-left: 0; }
}

@media (max-width: 768px) {
  .container { padding: 0 20px; }
  #nav { padding: 0 20px; height: 60px; border-radius: 14px; }
  .nav-prompt { font-size: 0.9rem; }
  .nav-cursor { height: 13px; }
  .nav-logo { font-size: 0.85rem; }
  .logo-mark { width: 34px; height: 34px; }
  .hero-stage { padding: 120px 0 60px; }
  .hero-title { font-size: clamp(1.7rem, 6.8vw, 2.5rem); }
  .hero-desc { font-size: 0.86rem; margin-bottom: 30px; }
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 44px; padding-top: 24px; row-gap: 24px; }
  .hero-stat { padding: 0 22px 0 0; }
  .hero-stat:nth-child(odd) { padding-left: 0; border-right: 1px solid var(--border-w); }
  .hero-stat:nth-child(even) { padding-right: 0; border-right: none; }
  .stat-n { font-size: 1.8rem; }
  .shield-icon { font-size: 2rem; }
  .term-body { height: 300px; font-size: 0.68rem; }
  .term { max-width: 100%; }
  .marquee-item { font-size: 0.58rem; gap: 14px; }
  .marquee-track { gap: 32px; }
  section { padding: 80px 0 !important; }
  .section-intro { align-items: flex-start; }
  .section-intro h2 { margin-top: 12px; }
  .sc { --sc-pad: 30px; }
  .sc h3 { font-size: 1.15rem; }
  .sc p { font-size: 0.85rem; }
  .sc-tags { margin: 18px 0; }
  .sc-icon { width: 42px; height: 42px; }
  .sc-icon svg { width: 18px; height: 18px; }
  .sc-quote blockquote { font-size: 1.2rem; }
  .sc-quote .qmark { font-size: 2.4rem; top: 12px; right: 20px; left: auto; }
  .proc-card-inner { padding: 14px; gap: 12px; }
  .proc-node { width: 34px; height: 34px; min-width: 34px; font-size: 0.76rem; }
  .proc-cards::before { left: 34px; }
  .proc-card-content h3 { font-size: 0.9rem; }
  .proc-card-content p { font-size: 0.76rem; }
  .proc-card-tag { font-size: 0.56rem; padding: 2px 6px; }
  .proc-card-time { font-size: 0.56rem; }
  .proc-term-body { padding: 16px 12px; font-size: 0.62rem; }
  .proc-line { line-height: 1.6; }
  .proc-output { padding-left: 0; }
  .proc-cmd { font-size: 0.62rem; }
  .work-card-thumb { height: 200px; }
  .wc-1 .work-card-thumb { height: 260px; }
  .wc-icon-art svg { width: 100px; height: 100px; }
  .about-term-body { padding: 18px 14px; font-size: 0.65rem; }
  .about-term-bar .title { font-size: 0.55rem; }
  .work-card-body { padding: 22px; }
  .work-card h3 { font-size: 1.15rem; }
  .wc-result-num { font-size: 1.4rem; }
  .wc-contrib-tags { margin-top: 12px; }
  .about-stack-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .about-stack-item { padding: 14px 10px; gap: 8px; }
  .asi-icon { width: 30px; height: 30px; }
  .asi-icon svg { width: 14px; height: 14px; }
  .asi-name { font-size: 0.5rem; }
  .value-card { padding: 20px 24px; }
  .value-card h4 { font-size: 0.92rem; }
  .value-card p { font-size: 0.82rem; }
  .manifesto-inner { padding: 14px 16px; gap: 12px; }
  .manifesto-text { font-size: 0.88rem; }
  .testi-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .testi-card { padding: 24px; }
  .testi-quote { font-size: 0.85rem; line-height: 1.7; margin-bottom: 18px; }
  .contact-left p { font-size: 0.92rem; margin-bottom: 30px; }
  .cp-body, .cf-body { padding: 22px 18px 24px; }
  .contact-row { padding: 14px 16px; }
  .cr-val { font-size: 0.78rem; }
  .footer-cta-title { font-size: 1.45rem; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }
  .footer-brand { grid-column: 1 / -1; margin-bottom: 4px; }
  .footer-brand p { max-width: 100%; font-size: 0.82rem; line-height: 1.6; }
  .footer-brand .tagline { font-size: 0.52rem; margin-top: 14px; }
  .footer-col h4 { font-size: 0.52rem; margin-bottom: 10px; }
  .footer-col ul { gap: 7px; }
  .footer-col ul li a { font-size: 0.78rem; }
  .footer-socials a { width: 30px; height: 30px; }
  .footer-socials svg { width: 12px; height: 12px; }
}

@media (max-width: 600px) {
  .container { padding: 0 18px; }
  #nav { padding: 0 18px; }
  .logo-mark { width: 32px; height: 32px; }
  .hero-stage { padding: 110px 0 48px; }
  .hero-title { font-size: clamp(1.5rem, 6.2vw, 2.1rem); margin-bottom: 20px; }
  .hero-desc { font-size: 0.85rem; line-height: 1.7; margin-bottom: 26px; }
  .hero-cta { flex-direction: column; gap: 10px; }
  .hero-cta .btn { width: 100%; justify-content: center; padding: 13px 20px; font-size: 0.65rem; }
  .hero-stats { margin-top: 36px; padding-top: 20px; row-gap: 18px; }
  .hero-stat { padding: 0 16px 0 0; }
  .hero-side-meta { font-size: 0.54rem; letter-spacing: 0.1em; gap: 8px 12px; }
  .stat-n { font-size: 1.5rem; }
  .stat-label { font-size: 0.5rem; margin-top: 6px; }
  .shield-icon { font-size: 1.7rem; }
  .term-body { height: 260px; font-size: 0.62rem; line-height: 1.7; padding: 14px 14px 18px; }
  .term-bar { padding: 9px 12px; }
  .term-bar .title { font-size: 0.55rem; }
  .marquee-wrap { padding: 12px 0; }
  .marquee-item { font-size: 0.52rem; letter-spacing: 0.12em; gap: 12px; }
  section { padding: 68px 0 !important; }
  .section-intro h2 { margin-top: 12px; }
  .sec-tag { font-size: 0.58rem; }
  .section-intro h2 { font-size: clamp(1.7rem, 5vw, 2.4rem); }
  .section-intro p { font-size: 0.88rem; }
  .sc { --sc-pad: 22px; }
  .sc .sc-id { font-size: 0.52rem; }
  .sc-icon { width: 38px; height: 38px; border-radius: 8px; }
  .sc-icon svg { width: 16px; height: 16px; }
  .sc h3 { font-size: 1.05rem; margin-bottom: 10px; }
  .sc p { font-size: 0.82rem; line-height: 1.65; }
  .sc-tags { gap: 6px; margin: 14px 0; }
  .sc-tags span { font-size: 0.5rem; padding: 3px 8px; }
  .sc-quote blockquote { font-size: 1.1rem; line-height: 1.3; }
  .sc-cta-card h3 { font-size: 1.25rem; }
  .sc-cta-card p { font-size: 0.85rem; }
  .cta-arrow span { font-size: 0.6rem; }
  .cta-arrow-icon { width: 38px; height: 38px; font-size: 1rem; }
  .proc-card-inner { padding: 12px; gap: 10px; }
  .proc-node { width: 30px; height: 30px; min-width: 30px; font-size: 0.7rem; }
  .proc-cards::before { left: 30px; }
  .proc-card-content h3 { font-size: 0.82rem; }
  .proc-card-content p { font-size: 0.72rem; }
  .proc-card-meta { gap: 6px; }
  .proc-card-tag { font-size: 0.52rem; }
  .proc-card-time { font-size: 0.52rem; }
  .proc-term-bar .title { font-size: 0.55rem; }
  .proc-term-body { padding: 14px 10px; font-size: 0.58rem; }
  .proc-line { line-height: 1.55; }
  .proc-prompt { font-size: 0.58rem; }
  .proc-cmd { font-size: 0.58rem; }
  .proc-output { padding-left: 0; font-size: 0.55rem; }
  .proc-ok { font-size: 0.55rem; }
  .proc-detail { font-size: 0.55rem; }
  .proc-time { font-size: 0.55rem; }
  .proc-cursor { width: 6px; height: 11px; }
  .work-filter { gap: 6px; margin-bottom: 32px; }
  .filter-btn { font-size: 0.56rem; padding: 6px 12px; }
  .work-card-thumb { height: 160px; }
  .wc-1 .work-card-thumb { height: 200px; }
  .wc-icon-art svg { width: 80px; height: 80px; }
  .about-term-body { padding: 14px 10px; font-size: 0.58rem; }
  .about-term-bar .title { font-size: 0.5rem; }
  .term-preview { padding: 16px 14px 40px; font-size: 0.62rem; }
  .tp-line { line-height: 1.6; }
  .work-card-body { padding: 18px; }
  .work-card h3 { font-size: 1.05rem; margin-bottom: 6px; }
  .work-card .wc-desc { font-size: 0.82rem; line-height: 1.6; }
  .wc-result { margin-top: 14px; padding-top: 14px; gap: 10px; }
  .wc-result-num { font-size: 1.2rem; }
  .wc-result-label { font-size: 0.5rem; }
  .wc-contrib-tags span { font-size: 0.48rem; padding: 2px 6px; }
  .sys-grid { gap: 12px; }
  .sys-val { font-size: 0.82rem; }
  .about-left p { font-size: 0.92rem; }
  .manifesto-inner { padding: 12px 14px; gap: 10px; }
  .manifesto-node { width: 24px; height: 24px; min-width: 24px; font-size: 0.52rem; }
  .manifesto-list::before { left: 26px; }
  .manifesto-text { font-size: 0.82rem; }
  .value-card { padding: 18px 20px; }
  .value-card h4 { font-size: 0.88rem; gap: 8px; }
  .value-card h4 .v-icon { font-size: 0.8rem; }
  .value-card p { font-size: 0.78rem; }
  .testi-grid { grid-template-columns: 1fr; gap: 12px; }
  .testi-card { padding: 22px; }
  .testi-stars { font-size: 0.7rem; }
  .testi-top { margin-bottom: 14px; }
  .testi-quote { font-size: 0.82rem; margin-bottom: 16px; }
  .testi-avatar { width: 36px; height: 36px; font-size: 0.7rem; }
  .testi-name { font-size: 0.85rem; }
  .testi-role { font-size: 0.5rem; }
  .tc-featured { grid-template-columns: 1fr; gap: 18px; }
  .tc-featured .testi-author { flex-direction: row; align-items: center; gap: 12px; padding-left: 0; padding-top: 16px; border-left: none; border-top: 1px solid var(--border-w); min-width: 0; }
  .tc-featured .testi-verif { margin-left: auto; margin-top: 0; }
  .tc-featured .testi-quote { font-size: 0.9rem; }
  .testi-log { flex-wrap: wrap; font-size: 0.54rem; }
  .contact-left p { font-size: 0.88rem; margin-bottom: 24px; }
  .cp-body, .cf-body { padding: 20px 16px 22px; }
  .contact-row { padding: 12px 14px; gap: 12px; }
  .cr-icon { width: 32px; height: 32px; font-size: 0.75rem; }
  .cr-label { font-size: 0.5rem; }
  .cr-val { font-size: 0.75rem; }
  .contact-meta { grid-template-columns: 1fr; gap: 12px; }
  .form-group label { font-size: 0.52rem; }
  .form-group input, .form-group select, .form-group textarea { font-size: 0.8rem; padding: 10px 14px; }
  .form-group textarea { min-height: 90px; }
  .form-row { grid-template-columns: 1fr; }
  .form-submit { flex-direction: column; align-items: stretch; }
  .form-submit .btn { width: 100%; justify-content: center; }
  .form-note { text-align: center; }
  .form-success, .form-error { font-size: 0.65rem; padding: 16px 18px; }
  .footer-cta { flex-direction: column; align-items: flex-start; gap: 20px; padding-bottom: 24px; margin-bottom: 28px; }
  .footer-cta .btn { width: 100%; justify-content: center; }
  .footer-top { grid-template-columns: 1fr; gap: 20px; margin-bottom: 20px; }
  .footer-brand .tagline { font-size: 0.5rem; margin-top: 12px; }
  .footer-col h4 { font-size: 0.5rem; margin-bottom: 10px; }
  .footer-col ul { gap: 6px; }
  .footer-col ul li a { font-size: 0.75rem; }
  .footer-status { order: 3; width: 100%; }
  .footer-bottom { padding-top: 18px; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
  .footer-bottom-left { flex-direction: row; gap: 12px; }
  .footer-bottom p { font-size: 0.5rem; }
  .footer-socials { gap: 10px; }
  .footer-socials a { width: 28px; height: 28px; }
  .footer-socials svg { width: 11px; height: 11px; }
  .back-top { bottom: 16px; right: 16px; }
  .settings-dock { bottom: 16px; left: 16px; gap: 10px; }
  .settings-panel { width: 228px; }
  .mobile-nav a { font-size: 1.1rem; }
}

@media (max-width: 400px) {
  .container { padding: 0 16px; }
  #nav { padding: 0 16px; }
  .logo-mark { width: 30px; height: 30px; }
  .hero-title { font-size: clamp(1.35rem, 5.6vw, 1.85rem); }
  .stat-n { font-size: 1.3rem; }
  .shield-icon { font-size: 1.5rem; }
  .term-body { height: 220px; font-size: 0.56rem; }
  .proc-card-inner { padding: 10px; gap: 8px; }
  .proc-node { width: 28px; height: 28px; min-width: 28px; font-size: 0.66rem; }
  .proc-cards::before { left: 28px; }
  .proc-card-content h3 { font-size: 0.78rem; }
  .proc-card-content p { font-size: 0.68rem; }
  .proc-term-body { padding: 12px 8px; font-size: 0.52rem; }
  .proc-cmd { font-size: 0.52rem; }
  .proc-output { padding-left: 0; font-size: 0.5rem; }
  .sc { --sc-pad: 18px; }
  .sys-grid { grid-template-columns: 1fr; }
  .about-quote blockquote { font-size: 0.95rem; }
  .value-card { padding: 16px; }
  .mobile-nav a { font-size: 0.95rem; }
}

@media (max-width: 375px) {
  .container { padding: 0 14px; }
  #nav { padding: 0 14px; height: 54px; border-radius: 12px; }
  .nav-prompt { font-size: 0.82rem; }
  .nav-cursor { width: 4px; height: 12px; }
  .logo-mark { width: 28px; height: 28px; }
  .hero-stage { padding: 100px 0 40px; }
  .hero-title { font-size: clamp(1.25rem, 5.2vw, 1.7rem); margin-bottom: 16px; }
  .hero-desc { font-size: 0.8rem; line-height: 1.6; margin-bottom: 22px; }
  .hero-cta .btn { font-size: 0.6rem; padding: 12px 16px; }
  .hero-stats { margin-top: 28px; padding-top: 16px; row-gap: 14px; }
  .hero-stat { padding: 0 12px 0 0; }
  .stat-n { font-size: 1.2rem; }
  .stat-label { font-size: 0.45rem; margin-top: 4px; }
  .shield-icon { font-size: 1.3rem; }
  .term-body { height: 200px; font-size: 0.5rem; line-height: 1.6; padding: 12px 12px 16px; }
  .term-bar { padding: 8px 10px; }
  .term-bar .title { font-size: 0.48rem; }
  .marquee-item { font-size: 0.48rem; gap: 10px; }
  section { padding: 56px 0 !important; }
  .section-intro { align-items: flex-start; }
  .sec-tag { font-size: 0.5rem; }
  .section-intro h2 { font-size: clamp(1.4rem, 4vw, 1.8rem); }
  .section-intro p { font-size: 0.82rem; }
  .proc-card-inner { padding: 8px; gap: 6px; }
  .proc-node { width: 24px; height: 24px; min-width: 24px; font-size: 0.6rem; }
  .proc-cards::before { left: 24px; }
  .proc-card-content h3 { font-size: 0.72rem; }
  .proc-card-content p { font-size: 0.62rem; margin-bottom: 6px; }
  .proc-card-meta { gap: 4px; }
  .proc-card-tag { font-size: 0.48rem; padding: 1px 4px; }
  .proc-card-time { font-size: 0.48rem; }
  .proc-term-bar .title { font-size: 0.48rem; }
  .proc-term-body { padding: 10px 6px; font-size: 0.48rem; }
  .proc-line { line-height: 1.5; }
  .work-card-thumb { height: 140px !important; }
  .wc-1 .work-card-thumb, .wc-4 .work-card-thumb { height: 180px; }
  .work-card-body { padding: 14px; }
  .work-card h3 { font-size: 0.95rem; margin-bottom: 4px; }
  .work-card .wc-desc { font-size: 0.75rem; line-height: 1.5; }
  .wc-result { margin-top: 10px; padding-top: 10px; gap: 8px; }
  .wc-result-num { font-size: 1rem; }
  .wc-result-label { font-size: 0.45rem; }
  .wc-contrib-tags span { font-size: 0.42rem; padding: 2px 5px; }
  .about-grid { gap: 32px; }
  .about-left p { font-size: 0.85rem; }
  .manifesto-inner { padding: 10px 12px; gap: 8px; }
  .manifesto-node { width: 22px; height: 22px; min-width: 22px; font-size: 0.48rem; }
  .manifesto-list::before { left: 23px; }
  .manifesto-text { font-size: 0.75rem; }
  .about-system { padding: 18px; }
  .sl-body { padding: 14px 12px; font-size: 0.58rem; }
  .sl-term-bar .title { font-size: 0.5rem; }
  .sys-grid { gap: 10px; }
  .sys-val { font-size: 0.75rem; }
  .about-quote { padding: 24px; }
  .about-quote blockquote { font-size: 0.88rem; }
  .testi-card { padding: 18px; }
  .testi-stars { font-size: 0.62rem; }
  .testi-top { margin-bottom: 12px; }
  .testi-quote { font-size: 0.78rem; margin-bottom: 14px; }
  .testi-avatar { width: 32px; height: 32px; font-size: 0.65rem; }
  .testi-name { font-size: 0.8rem; }
  .testi-role { font-size: 0.45rem; }
  .contact-left p { font-size: 0.82rem; margin-bottom: 20px; }
  .cp-body, .cf-body { padding: 18px 14px 20px; }
  .contact-row { padding: 10px 12px; gap: 10px; }
  .cr-icon { width: 28px; height: 28px; font-size: 0.7rem; }
  .cr-label { font-size: 0.45rem; }
  .cr-val { font-size: 0.75rem; }
  .contact-meta { gap: 10px; }
  .form-group label { font-size: 0.48rem; }
  .form-group input, .form-group select, .form-group textarea { font-size: 0.75rem; padding: 9px 12px; }
  .form-group textarea { min-height: 80px; }
  .footer-top { gap: 16px; margin-bottom: 16px; }
  .footer-brand .tagline { font-size: 0.48rem; margin-top: 10px; }
  .footer-col h4 { font-size: 0.48rem; margin-bottom: 8px; }
  .footer-col ul { gap: 5px; }
  .footer-col ul li a { font-size: 0.72rem; }
  .footer-bottom { padding-top: 16px; }
  .footer-bottom p { font-size: 0.48rem; }
  .footer-socials { gap: 8px; }
  .footer-socials a { width: 24px; height: 24px; }
  .footer-socials svg { width: 10px; height: 10px; }
  .back-top { bottom: 12px; right: 12px; }
  .settings-dock { bottom: 12px; left: 12px; }
  .settings-panel { width: calc(100vw - 24px); max-width: 260px; }
  .mobile-nav a { font-size: 0.88rem; }
}

@media (hover: none) {
  body { cursor: auto; }
  #cursorDot, #cursorTrail { display: none; }
  .sc:hover, .work-card:hover, .testi-card:hover { transform: none !important; }
  .sc:active, .work-card:active { border-color: rgba(var(--accent-rgb),0.3); }
}

@keyframes cardGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(var(--accent-rgb),0.1); }
  50% { box-shadow: 0 0 30px rgba(var(--accent-rgb),0.2); }
}
.work-card:hover { animation: cardGlow 2s ease-in-out infinite; }
a.work-card { display: block; text-decoration: none; color: inherit; }
a.work-card:focus { outline: 2px solid var(--orange); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .scanlines { display: none; }
}

@supports (padding: env(safe-area-inset-bottom)) {
  footer { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
  #nav { top: calc(12px + env(safe-area-inset-top)); }
}