/* =====================
   CSS Variables & Reset
   ===================== */
:root {
    --bg-deep: #02050A;
    --cyan: #00ffcc;
    --red: #ff3366;
    --glass-bg: rgba(10, 16, 26, 0.6);
    --glass-border: rgba(0, 255, 204, 0.15);
    --text-main: #ffffff;
    --text-muted: #8b9bb4;
    
    --font-sans: 'Inter', sans-serif;
    --font-tech: 'Rajdhani', sans-serif;
}

/* =====================
   Loading Sequence (Simplified)
   ===================== */
#loader {
    position: fixed;
    inset: 0;
    background: var(--bg-deep);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.8s ease-out, visibility 0.8s;
}
#loader.loaded { opacity: 0; visibility: hidden; }
.loader-content { text-align: center; }
.loader-img { 
    width: 140px; 
    height: auto; 
    margin-bottom: 20px; 
    /* 将黑白 Logo 过滤为青色主题色 */
    filter: invert(85%) sepia(20%) saturate(2000%) hue-rotate(120deg) drop-shadow(0 0 20px rgba(0, 255, 204, 0.4));
}
.animate-pulse { animation: loaderPulse 1.5s ease-in-out infinite; }
@keyframes loaderPulse { 
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.7; }
}

/* =====================
   Premium Deep Background
   ===================== */
.premium-bg {
    position: fixed;
    inset: 0;
    background: #02050a;
    z-index: -1;
    overflow: hidden;
}
.premium-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, transparent 0px, rgba(0,255,204,0.03) 1px, transparent 2px);
    pointer-events: none;
    z-index: 1;
}

.star-field {
    position: absolute;
    inset: 0;
    background-image: 
        radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
        radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px);
    background-size: 550px 550px, 350px 350px;
    opacity: 0.25;
    animation: backgroundMove 120s linear infinite;
}
.nebula {
    position: absolute;
    top: -20%; left: -20%; width: 150vw; height: 150vh;
    background: 
        radial-gradient(circle at 20% 30%, rgba(0, 255, 204, 0.08), transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(0, 136, 255, 0.08), transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(255, 51, 102, 0.05), transparent 50%);
    filter: blur(100px);
    animation: nebulaFloat 40s ease-in-out infinite alternate;
}

@keyframes backgroundMove { from { background-position: 0 0; } to { background-position: 550px 550px; } }
@keyframes nebulaFloat { from { transform: translate(-5vw, -5vh) rotate(0deg); } to { transform: translate(5vw, 5vh) rotate(10deg); } }

html { scroll-behavior: smooth; }

.nav-item {
    position: relative;
    transition: color 0.3s;
}
.nav-item::after {
    content: '';
    position: absolute;
    bottom: -5px; left: 0; width: 0; height: 2px;
    background: var(--cyan);
    transition: width 0.3s;
}
.nav-item:hover::after,
body[data-step="hero"] .nav-links a[href="#hero"]::after,
body[data-step="traffic"] .nav-links a[href="#traffic"]::after,
body[data-step="threat"] .nav-links a[href="#threat"]::after,
body[data-step="features"] .nav-links a[href="#features"]::after {
    width: 100%;
}

/* =====================
   Premium Card Interactions
   ===================== */
.p-card {
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    overflow: hidden;
}

.p-card::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background: linear-gradient(45deg, transparent, rgba(0, 255, 204, 0.03), transparent);
    transform: rotate(45deg);
    transition: transform 0.6s;
    pointer-events: none;
}

.p-card:hover {
    transform: translateY(-8px);
    border-color: rgba(0, 255, 204, 0.4) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 255, 204, 0.1);
}

.p-card:hover::before {
    transform: rotate(45deg) translate(20%, 20%);
}

.p-card h3 {
    transition: color 0.3s;
}

.p-card:hover h3 {
    color: var(--cyan);
}

.p-card.active-feature {
    border-color: var(--cyan);
    background: rgba(0, 255, 204, 0.08);
    box-shadow: 0 0 30px rgba(0, 255, 204, 0.2);
    transform: translateY(-12px);
}

.brand-logo-img {
    height: 32px;
    width: auto;
    margin-right: 12px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-sans);
    background: radial-gradient(circle at center, #1b2838 0%, #0c1420 100%);
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }

.cyan-text { color: var(--cyan); text-shadow: 0 0 10px rgba(0, 255, 204, 0.5); }
.red-text { color: var(--red); text-shadow: 0 0 10px rgba(255, 51, 102, 0.5); }

/* =====================
   Background Effects
   ===================== */
.bg-grid {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: 
        linear-gradient(rgba(0, 255, 204, 0.08) 1px, transparent 1px), 
        linear-gradient(90deg, rgba(0, 255, 204, 0.08) 1px, transparent 1px);
    background-size: 50px 50px;
    z-index: 0;
    pointer-events: none;
}

.glow-orb {
    position: fixed;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(120px);
    z-index: 0;
    pointer-events: none;
}

.glow-orb.top-left {
    top: -200px;
    left: -200px;
    background: radial-gradient(circle, rgba(0, 136, 255, 0.15), transparent 70%);
}

.glow-orb.bottom-right {
    bottom: -200px;
    right: -200px;
    background: radial-gradient(circle, rgba(0, 255, 204, 0.1), transparent 70%);
}

/* =====================
   Fixed Earth Background
   ===================== */
#earth-container {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 1;
    pointer-events: none;
    transition: transform 2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

#earth-bg {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
}

#earth-transfer-svg {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    filter: drop-shadow(0 0 12px rgba(0, 255, 255, 0.75));
}

.transfer-arc-glow,
.transfer-arc-line,
.transfer-arc-pulse {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.transfer-arc-glow {
    stroke: rgba(0, 255, 255, 0.38);
    stroke-width: 12;
}

.transfer-arc-line {
    stroke: rgba(125, 255, 233, 0.95);
    stroke-width: 3.5;
}

.transfer-arc-pulse {
    stroke: #ffffff;
    stroke-width: 4.5;
    stroke-dasharray: 25 75; /* 25% 长度的流光，75% 的间隙 */
    animation: transferArcPulse 2.8s linear infinite;
}

@keyframes transferArcPulse {
    from { stroke-dashoffset: 100; }
    to { stroke-dashoffset: -25; } /* 确保流光完全滑出路径 */
}

/* 默认和首屏：地球偏右缩小，形成左文右球布局 */
body[data-step="hero"] #earth-container,
body:not([data-step]) #earth-container {
    transform: translateX(30vw) scale(0.72);
}

/* 进入滚屏交互后：地球全屏放大 */
body[data-step="traffic"] #earth-container,
body[data-step="threat"] #earth-container,
body[data-step="features"] #earth-container {
    transform: translateX(0) scale(1);
}

/* =====================
   Navigation
   ===================== */
.navbar {
    position: fixed;
    top: 0; left: 0; width: 100%;
    height: 70px;
    background: linear-gradient(180deg, rgba(2,5,10,0.9) 0%, rgba(2,5,10,0) 100%);
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5%;
    pointer-events: auto;
}

.nav-brand {
    font-family: var(--font-tech);
    font-size: 24px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.brand-logo-img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(161, 100, 255, 0.9)) brightness(1.1);
    transition: filter 0.3s;
}
.brand-logo-img:hover {
    filter: drop-shadow(0 0 18px rgba(161, 100, 255, 1)) brightness(1.3);
}


.nav-links a {
    margin: 0 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    transition: color 0.3s;
}
.nav-links a:hover { color: #fff; }

.nav-btn {
    padding: 8px 20px;
    border: 1px solid var(--cyan);
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--cyan);
    background: rgba(0, 255, 204, 0.1);
    cursor: pointer;
    transition: all 0.3s;
}
.nav-btn:hover {
    background: var(--cyan);
    color: var(--bg-deep);
    box-shadow: 0 0 20px rgba(0, 255, 204, 0.4);
}

/* =====================
   Scrollytelling Layers
   ===================== */
.scrolly-layer {
    position: relative;
    z-index: 10;
    pointer-events: none; /* Let earth receive drag events when not on a card */
}

/* 赋予 400vh 高度，产生超长的滚动“钝感/停滞感” */
.scroll-step {
    height: 300vh;
    position: relative;
}

/* 首屏只需200vh，快速过渡到交互区 */
.hero-step {
    height: 200vh;
}

/* 最后一个区块不需要极高高度 */
.scroll-step[data-step="features"] {
    height: auto;
    min-height: 100vh;
}

/* 核心：将内容粘性固定在屏幕中央 */
.sticky-wrapper {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    padding: 0 10%;
}

.center-align { justify-content: center; text-align: center; }
.left-align { justify-content: flex-start; }
.right-align { justify-content: flex-end; }
.normal-layout { display: block; padding-top: 100px; pointer-events: auto; }

/* Content Boxes */
.content-box {
    pointer-events: auto;
    max-width: 500px;
    transform: translateY(50px);
    opacity: 0;
    transition: transform 1s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 1s ease;
}

.scroll-step.is-active .content-box {
    transform: translateY(0);
    opacity: 1;
}

.hero-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 20px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    padding: 0 !important;
}

.cyber-badge {
    padding: 4px 12px;
    border: 1px solid var(--cyan);
    background: rgba(0,255,204,0.1);
    color: var(--cyan);
    font-family: var(--font-tech);
    font-size: 12px;
    letter-spacing: 2px;
    border-radius: 20px;
}

.glitch-title {
    font-size: 64px;
    font-weight: 800;
    line-height: 1.1;
    color: #fff;
    text-shadow: 0 0 20px rgba(255,255,255,0.3);
}

.hero-desc {
    font-size: 18px;
    color: var(--text-muted);
    max-width: 600px;
    margin-bottom: 20px;
}

/* Buttons */
.hero-buttons { display: flex; gap: 20px; margin-bottom: 40px; margin-top: 10px; }
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 24px; border-radius: 4px; font-weight: 600; font-size: 14px; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border: 1px solid transparent; }
.btn-large { padding: 14px 32px; font-size: 16px; }
.btn-primary { background: var(--cyan); color: var(--bg-deep); box-shadow: 0 0 15px rgba(0,255,204,0.3); }
.btn-primary:hover { background: #00d4ff; box-shadow: 0 0 25px rgba(0, 255, 204, 0.5); transform: translateY(-2px); }
.btn-glass { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); color: #fff; }
.btn-glass:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); transform: translateY(-2px); }

/* Stats */
.hero-stats { display: flex; gap: 48px; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 32px; width: 100%; }
.stat-item { display: flex; flex-direction: column; gap: 4px; }
.stat-num { font-family: var(--font-tech); font-size: 32px; font-weight: 700; color: #fff; }
.stat-label { font-size: 13px; color: var(--text-muted); }
.text-sm { font-size: 0.6em; opacity: 0.8; }

/* Scroll Indicator */
.scroll-indicator {
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    color: var(--text-muted);
    font-size: 11px;
    letter-spacing: 2px;
    font-family: var(--font-tech);
}

.mouse {
    width: 24px;
    height: 36px;
    border: 2px solid var(--text-muted);
    border-radius: 12px;
    position: relative;
}
.mouse::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 6px;
    background: var(--cyan);
    border-radius: 2px;
    animation: scrollMove 1.5s infinite;
}

@keyframes scrollMove {
    0% { transform: translate(-50%, 0); opacity: 1; }
    100% { transform: translate(-50%, 15px); opacity: 0; }
}

/* Glass Panels */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.8);
    /* 防止面板内容穿模到地球上方 */
    position: relative;
    z-index: 20;
    max-width: 480px;
    word-wrap: break-word;
}

.box-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-tech);
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.dot {
    width: 8px; height: 8px; border-radius: 50%;
}
.dot.cyan { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.dot.red { background: var(--red); box-shadow: 0 0 10px var(--red); }

.panel-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 15px;
}

.panel-desc {
    font-size: 15px;
    color: var(--text-muted);
    margin-bottom: 30px;
    line-height: 1.7;
}

/* Data Rows inside Panels */
.data-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.data-row .label { color: #fff; font-size: 14px; }
.data-row .value { font-family: var(--font-tech); font-size: 24px; font-weight: 700; }

/* Danger Panel overrides */
.danger-panel {
    border-color: rgba(255, 51, 102, 0.2);
    box-shadow: 0 30px 60px rgba(255, 51, 102, 0.1);
}

.mock-terminal {
    background: #000;
    border: 1px solid rgba(255, 51, 102, 0.2);
    border-radius: 6px;
    padding: 15px;
    font-family: var(--font-tech);
    font-size: 13px;
    color: #ccc;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.term-line {
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.5s ease;
}
.scroll-step.is-active .term-line {
    opacity: 1; transform: translateX(0);
}
.scroll-step.is-active .term-line:nth-child(1) { transition-delay: 0.5s; }
.scroll-step.is-active .term-line:nth-child(2) { transition-delay: 1.0s; }
.scroll-step.is-active .term-line:nth-child(3) { transition-delay: 1.5s; }
.scroll-step.is-active .term-line:nth-child(4) { transition-delay: 2.0s; }

/* =====================
   Bottom Content (Features & Footer)
   ===================== */
.bottom-content-wrapper {
    background: linear-gradient(180deg, transparent 0%, rgba(2,5,10,0.95) 10%, #02050A 100%);
    padding: 100px 5% 0;
    pointer-events: auto;
    position: relative;
}

.section-heading {
    text-align: center;
    margin-bottom: 60px;
}
.section-heading h2 {
    font-size: 42px; margin-bottom: 15px;
}
.section-heading p {
    color: var(--text-muted); font-size: 16px;
}

.premium-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
    margin-bottom: 120px;
}

.p-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 40px 30px;
    transition: all 0.4s ease;
}
.p-card:hover {
    background: rgba(0,255,204,0.05);
    border-color: rgba(0,255,204,0.3);
    transform: translateY(-5px);
}

.p-icon {
    width: 40px; height: 40px;
    margin-bottom: 20px;
    background-size: contain;
    background-repeat: no-repeat;
}
.cpu-icon { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%2300ffcc" stroke-width="2" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="2" ry="2"></rect><rect x="9" y="9" width="6" height="6"></rect><line x1="9" y1="1" x2="9" y2="4"></line><line x1="15" y1="1" x2="15" y2="4"></line><line x1="9" y1="20" x2="9" y2="23"></line><line x1="15" y1="20" x2="15" y2="23"></line><line x1="20" y1="9" x2="23" y2="9"></line><line x1="20" y1="14" x2="23" y2="14"></line><line x1="1" y1="9" x2="4" y2="9"></line><line x1="1" y1="14" x2="4" y2="14"></line></svg>'); }
.radar-icon { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%2300ffcc" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="6"></circle><circle cx="12" cy="12" r="2"></circle><line x1="12" y1="12" x2="19" y2="5"></line></svg>'); }
.wave-icon { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%2300ffcc" stroke-width="2" viewBox="0 0 24 24"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>'); }
.shield-icon { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%2300ffcc" stroke-width="2" viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>'); }

.p-card h3 {
    font-size: 20px; margin-bottom: 12px; color: #fff;
}
.p-card p {
    font-size: 14px; color: var(--text-muted); margin-bottom: 25px; line-height: 1.6;
}

/* Mini visual examples inside cards */
.mini-bar-chart { display: flex; align-items: flex-end; gap: 6px; height: 50px; }
.mini-bar-chart .bar { width: 8px; border-radius: 2px 2px 0 0; }
.animate-grow { animation: barGrow 1.5s cubic-bezier(0.17, 0.67, 0.83, 0.67) forwards; animation-delay: var(--delay); }
@keyframes barGrow { from { height: 0; } to { height: var(--h); } }

.mini-terminal { background: #000; padding: 12px; border-radius: 6px; font-family: var(--font-tech); font-size: 11px; color: #ffcc00; display: flex; flex-direction: column; gap: 6px; border: 1px solid rgba(255,255,255,0.1); position: relative; overflow: hidden; }
.mini-terminal::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0px, rgba(0,255,204,0.05) 1px, transparent 2px); pointer-events: none; }
.mini-terminal span:last-child { color: var(--cyan); }

.mini-line-chart { height: 50px; width: 100%; }
.mini-line-chart svg { width: 100%; height: 100%; overflow: visible; }
.animate-stroke { stroke-dasharray: 200; stroke-dashoffset: 200; animation: lineDraw 2.5s ease forwards infinite alternate; }
@keyframes lineDraw { to { stroke-dashoffset: 0; } }

.mini-policy { display: flex; flex-direction: column; gap: 8px; }
.mini-policy .tag { font-family: var(--font-tech); font-size: 11px; padding: 4px 8px; border-radius: 3px; }
.mini-policy .pass { background: rgba(0, 255, 204, 0.1); color: var(--cyan); border-left: 2px solid var(--cyan); }
.mini-policy .block { background: rgba(255, 51, 102, 0.1); color: var(--red); border-left: 2px solid var(--red); }

/* Premium Footer */
.premium-footer {
    border-top: 1px solid rgba(255,255,255,0.05);
    padding: 80px 0 30px;
}
.footer-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 60px;
    flex-wrap: wrap;
    gap: 40px;
}
.f-brand .brand-text {
    font-family: var(--font-tech); font-size: 24px; font-weight: 700; margin-bottom: 15px;
}
.f-brand p {
    color: var(--text-muted); font-size: 14px; line-height: 1.8;
}

.f-links {
    display: flex; gap: 80px; flex-wrap: wrap;
}
.f-col h4 {
    color: #fff; margin-bottom: 20px; font-size: 15px;
}
.f-col ul li { margin-bottom: 12px; }
.f-col a {
    color: var(--text-muted); font-size: 14px; transition: color 0.3s;
}
.f-col a:hover { color: var(--cyan); }

.footer-bottom {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid rgba(255,255,255,0.05);
    color: var(--text-muted);
    font-size: 12px;
}

/* =====================
   Feature Connector & Dynamic Details
   ===================== */
.technical-detail-section {
    margin-top: 80px;
    padding-bottom: 100px;
    position: relative;
}

.detail-connector {
    position: absolute;
    top: -80px;
    left: 12.5%; /* 初始对齐第一个卡片 */
    width: 2px;
    height: 80px;
    background: linear-gradient(to bottom, var(--cyan), transparent);
    transition: left 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    opacity: 0;
}

.technical-detail-section:has(~ .premium-features-grid .active-feature) .detail-connector,
.premium-features-grid:has(.active-feature) + .technical-detail-section .detail-connector {
    opacity: 1;
}

.detail-card {
    background: rgba(2, 5, 10, 0.4);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 255, 204, 0.2);
    border-radius: 12px;
    padding: 50px;
    position: relative;
}

.detail-content-area {
    min-height: 150px;
    display: flex;
    align-items: center;
}

.detail-placeholder {
    width: 100%;
    text-align: center;
    color: var(--text-muted);
    font-family: var(--font-tech);
    letter-spacing: 1px;
    opacity: 0.5;
}

/* 动态生成的内容样式 */
.detail-grid-dynamic {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    width: 100%;
    animation: fadeIn 0.4s ease-out;
}

.spec-item label {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.spec-val {
    font-family: var(--font-tech);
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 15px rgba(255,255,255,0.1);
}

.spec-chart-mini {
    margin-top: 15px;
    height: 4px;
    background: rgba(255,255,255,0.05);
    border-radius: 2px;
    overflow: hidden;
}

.spec-fill {
    height: 100%;
    background: var(--cyan);
    box-shadow: 0 0 10px var(--cyan);
    width: 0;
    transition: width 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Responsive */
@media (max-width: 768px) {
    .nav-links { display: none; }
    .scroll-step { padding: 0 5%; }
    .content-box { padding: 30px 20px; }
    .f-links { gap: 40px; }
}