/*--------------------------------------------------------------
# STEP-IN Modern Styles
--------------------------------------------------------------*/

:root {
    --primary-color: #143756;
    --secondary-color: #16203c;
    --text-primary: #1D1D1F;
    --text-secondary: #86868B;
    --background-primary: #FFFFFF;
    --background-secondary: #F5F5F7;
    --border-color: #D2D2D7;
    --shadow-light: 0 4px 12px rgba(0, 0, 0, 0.05);
    --shadow-medium: 0 8px 25px rgba(0, 0, 0, 0.1);
    --border-radius: 12px;
    --section-padding: clamp(60px, 8vw, 120px);
    --transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/*--------------------------------------------------------------
# Reset & Base Styles
--------------------------------------------------------------*/

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--background-primary);
    overflow-x: hidden;
    font-feature-settings: 'kern' 1, 'liga' 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a,
a:visited {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover,
a:focus {
    color: #00ff88;
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/

.header {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--border-color);
    z-index: 1000;
    transition: var(--transition);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
}

.logo {
    font-size: 24px;
    font-weight: 300;
    color: var(--text-primary) !important;
    text-decoration: none;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    position: relative;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

a.logo,
a.logo:visited,
a.logo:focus {
    color: var(--text-primary) !important;
}

.logo:hover {
    color: var(--text-primary) !important;
    text-shadow: 0 0 20px rgba(0, 122, 255, 0.15);
}

.logo::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    transition: width 0.3s ease;
    background: linear-gradient(90deg, #00ff88, #1e6f55);
}

.logo:hover::after {
    width: 100%;
}

.logo img {
    height: 44px;
    width: auto;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.05));
    transition: filter 0.3s ease;
}

.logo:hover img {
    filter: drop-shadow(0 4px 12px rgba(0, 122, 255, 0.15));
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 40px;
    margin: 0;
}

.nav-menu a {
    color: var(--text-primary);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    position: relative;
    padding: 8px 0;
}

.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, #00ff88, #1e6f55);
    transition: width 0.3s ease;
}

.nav-menu a:hover::after {
    width: 100%;
}

.nav-menu a:hover {
    color: var(--primary-color);
    text-shadow: 0 0 10px rgba(0, 122, 255, 0.2);
}

/* Mobile Menu */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    color: var(--text-primary);
    cursor: pointer;
    padding: 8px;
}

.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100vh;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: saturate(180%) blur(20px);
    border-left: 1px solid var(--border-color);
    z-index: 1001;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    padding: 80px 24px 24px;
}

.mobile-menu.active {
    right: 0;
}

.mobile-menu-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    font-size: 24px;
    color: var(--text-primary);
    cursor: pointer;
    padding: 8px;
}

.mobile-menu-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 0;
}

.mobile-menu-list a {
    color: var(--text-primary);
    text-decoration: none;
    font-size: 20px;
    font-weight: 500;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
    transition: color 0.2s ease;
}

.mobile-menu-list a:hover {
    color: var(--primary-color);
}

.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/

.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px 24px 0;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
    position: relative;
    overflow: hidden;
}

/* Adjust hero height for page and post templates (excluding front page) */
.page:not(.home) .hero,
.single .hero {
    min-height: 40vh;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(120, 119, 198, 0.2) 0%, transparent 50%);
    animation: float 20s ease-in-out infinite;
}

.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="4" height="4" patternUnits="userSpaceOnUse"><path d="M 4 0 L 0 0 0 4" fill="none" stroke="rgba(0,200,255,0.2)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
    animation: pulse 4s ease-in-out infinite;
}

/* Floating particles */
.hero-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #00c8ff;
    border-radius: 50%;
    animation: particleFloat 15s linear infinite;
    box-shadow: 0 0 6px #00c8ff;
}

.particle:nth-child(1) { left: 10%; animation-delay: 0s; animation-duration: 12s; }
.particle:nth-child(2) { left: 20%; animation-delay: 2s; animation-duration: 16s; }
.particle:nth-child(3) { left: 30%; animation-delay: 4s; animation-duration: 14s; }
.particle:nth-child(4) { left: 40%; animation-delay: 6s; animation-duration: 18s; }
.particle:nth-child(5) { left: 50%; animation-delay: 8s; animation-duration: 10s; }
.particle:nth-child(6) { left: 60%; animation-delay: 1s; animation-duration: 15s; }
.particle:nth-child(7) { left: 70%; animation-delay: 3s; animation-duration: 13s; }
.particle:nth-child(8) { left: 80%; animation-delay: 5s; animation-duration: 17s; }
.particle:nth-child(9) { left: 90%; animation-delay: 7s; animation-duration: 11s; }

@keyframes particleFloat {
    0% { 
        transform: translateY(100vh) translateX(0px);
        opacity: 0;
    }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { 
        transform: translateY(-10vh) translateX(-50px);
        opacity: 0;
    }
}

@keyframes pulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.7; }
}

.hero-content {
    max-width: 980px;
    position: relative;
    z-index: 10;
}

.hero-title {
    font-size: clamp(40px, 7vw, 80px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: white;
    margin-bottom: 24px;
    text-shadow: 0 0 20px rgba(0, 200, 255, 0.3);
    animation: glow 3s ease-in-out infinite alternate;
    position: relative;
    z-index: 11;
}

.hero-title-block {
    display: inline-block;
    white-space: nowrap;
}

@keyframes glow {
    from { text-shadow: 0 0 20px rgba(0, 200, 255, 0.3); }
    to { text-shadow: 0 0 30px rgba(0, 200, 255, 0.5), 0 0 40px rgba(0, 200, 255, 0.3); }
}

.hero-subtitle {
    font-size: clamp(16px, 2.5vw, 28px);
    font-weight: 400;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 40px;
    letter-spacing: -0.01em;
    position: relative;
    z-index: 11;
}

.cta-group {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-button {
    background: var(--primary-color);
    color: #FFFFFF;
    padding: 12px 24px;
    border: none;
    border-radius: 22px;
    font-size: 17px;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    min-width: 120px;
    justify-content: center;
}

.cta-button:hover {
    background: #0051D5;
    color: #cccccc;
    transform: translateY(-1px);
}

a.cta-button,
a.cta-button:visited {
    color: #FFFFFF;
}

a.cta-button:hover,
a.cta-button:focus {
    color: #cccccc;
}

.cta-button.secondary {
    background: transparent;
    color: white;
    border: 1px solid white;
}

.cta-button.secondary:hover {
    background: white;
    color: var(--text-primary);
}

/*--------------------------------------------------------------
# Matrix Animation
--------------------------------------------------------------*/

.matrix-animation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.matrix-line {
    position: absolute;
    background: linear-gradient(90deg, 
        rgba(0, 255, 65, 0.8), 
        rgba(0, 255, 136, 0.6), 
        rgba(0, 122, 255, 0.4)
    );
    border-radius: 1px;
    opacity: 0.7;
    animation: matrix-pulse 4s ease-in-out infinite;
}

.matrix-line:nth-child(1) { width: 15%; height: 1px; top: 20%; left: 5%; animation-delay: 0s; }
.matrix-line:nth-child(2) { width: 1px; height: 25%; top: 15%; left: 20%; animation-delay: 0.2s; }
.matrix-line:nth-child(3) { width: 20%; height: 1px; top: 40%; right: 10%; animation-delay: 0.4s; }
.matrix-line:nth-child(4) { width: 1px; height: 30%; top: 25%; left: 80%; animation-delay: 0.6s; }
.matrix-line:nth-child(5) { width: 12%; height: 1px; top: 60%; left: 30%; animation-delay: 0.8s; }
.matrix-line:nth-child(6) { width: 1px; height: 20%; top: 50%; left: 42%; animation-delay: 1s; }
.matrix-line:nth-child(7) { width: 18%; height: 1px; top: 70%; right: 20%; animation-delay: 1.2s; }
.matrix-line:nth-child(8) { width: 1px; height: 35%; top: 35%; left: 65%; animation-delay: 1.4s; }
.matrix-line:nth-child(9) { width: 25%; height: 1px; top: 15%; left: 45%; animation-delay: 1.6s; }
.matrix-line:nth-child(10) { width: 1px; height: 40%; top: 10%; left: 15%; animation-delay: 1.8s; }
.matrix-line:nth-child(11) { width: 22%; height: 1px; top: 85%; left: 25%; animation-delay: 2s; }
.matrix-line:nth-child(12) { width: 1px; height: 28%; top: 60%; left: 90%; animation-delay: 2.2s; }
.matrix-line:nth-child(13) { width: 16%; height: 1px; top: 35%; right: 5%; animation-delay: 2.4s; }
.matrix-line:nth-child(14) { width: 1px; height: 45%; top: 40%; left: 55%; animation-delay: 2.6s; }
.matrix-line:nth-child(15) { width: 30%; height: 1px; top: 25%; left: 10%; animation-delay: 2.8s; }
.matrix-line:nth-child(16) { width: 1px; height: 32%; top: 70%; left: 40%; animation-delay: 3s; }
.matrix-line:nth-child(17) { width: 14%; height: 1px; top: 80%; right: 15%; animation-delay: 3.2s; }
.matrix-line:nth-child(18) { width: 1px; height: 38%; top: 20%; left: 75%; animation-delay: 3.4s; }
.matrix-line:nth-child(19) { width: 28%; height: 1px; top: 50%; left: 35%; animation-delay: 3.6s; }
.matrix-line:nth-child(20) { width: 1px; height: 26%; top: 65%; left: 85%; animation-delay: 3.8s; }

.matrix-node {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #00FF88;
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.9);
    animation: matrix-node-glow 2s ease-in-out infinite alternate;
}

.matrix-node:nth-child(21) { top: 20%; left: 20%; animation-delay: 0s; }
.matrix-node:nth-child(22) { top: 40%; left: 90%; animation-delay: 0.3s; }
.matrix-node:nth-child(23) { top: 15%; right: 10%; animation-delay: 0.6s; }
.matrix-node:nth-child(24) { top: 55%; left: 42%; animation-delay: 0.9s; }
.matrix-node:nth-child(25) { top: 70%; right: 20%; animation-delay: 1.2s; }
.matrix-node:nth-child(26) { top: 25%; left: 80%; animation-delay: 1.5s; }
.matrix-node:nth-child(27) { top: 85%; left: 47%; animation-delay: 1.8s; }
.matrix-node:nth-child(28) { top: 35%; left: 65%; animation-delay: 2.1s; }
.matrix-node:nth-child(29) { top: 60%; left: 30%; animation-delay: 2.4s; }
.matrix-node:nth-child(30) { top: 10%; left: 15%; animation-delay: 2.7s; }
.matrix-node:nth-child(31) { top: 75%; left: 85%; animation-delay: 3s; }
.matrix-node:nth-child(32) { top: 45%; right: 5%; animation-delay: 3.3s; }
.matrix-node:nth-child(33) { top: 80%; left: 25%; animation-delay: 3.6s; }
.matrix-node:nth-child(34) { top: 30%; left: 55%; animation-delay: 3.9s; }
.matrix-node:nth-child(35) { top: 65%; left: 75%; animation-delay: 4.2s; }

.matrix-data {
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(0, 122, 255, 0.8);
    border-radius: 50%;
    opacity: 0;
    animation: matrix-data-flow 5s linear infinite;
}

.matrix-data:nth-child(36) { top: 20%; left: 5%; animation-delay: 0s; }
.matrix-data:nth-child(37) { top: 40%; left: 15%; animation-delay: 0.2s; }
.matrix-data:nth-child(38) { top: 60%; left: 25%; animation-delay: 0.4s; }
.matrix-data:nth-child(39) { top: 80%; left: 35%; animation-delay: 0.6s; }
.matrix-data:nth-child(40) { top: 15%; left: 45%; animation-delay: 0.8s; }
.matrix-data:nth-child(41) { top: 35%; left: 55%; animation-delay: 1s; }
.matrix-data:nth-child(42) { top: 55%; left: 65%; animation-delay: 1.2s; }
.matrix-data:nth-child(43) { top: 75%; left: 75%; animation-delay: 1.4s; }
.matrix-data:nth-child(44) { top: 25%; left: 85%; animation-delay: 1.6s; }
.matrix-data:nth-child(45) { top: 45%; left: 95%; animation-delay: 1.8s; }
.matrix-data:nth-child(46) { top: 70%; left: 10%; animation-delay: 2s; }
.matrix-data:nth-child(47) { top: 90%; left: 20%; animation-delay: 2.2s; }
.matrix-data:nth-child(48) { top: 10%; left: 30%; animation-delay: 2.4s; }
.matrix-data:nth-child(49) { top: 30%; left: 40%; animation-delay: 2.6s; }
.matrix-data:nth-child(50) { top: 50%; left: 50%; animation-delay: 2.8s; }
.matrix-data:nth-child(51) { top: 85%; left: 60%; animation-delay: 3s; }
.matrix-data:nth-child(52) { top: 65%; left: 70%; animation-delay: 3.2s; }
.matrix-data:nth-child(53) { top: 95%; left: 80%; animation-delay: 3.4s; }
.matrix-data:nth-child(54) { top: 5%; left: 90%; animation-delay: 3.6s; }
.matrix-data:nth-child(55) { top: 75%; right: 5%; animation-delay: 3.8s; }
.matrix-data:nth-child(56) { top: 55%; right: 15%; animation-delay: 4s; }
.matrix-data:nth-child(57) { top: 35%; right: 25%; animation-delay: 4.2s; }
.matrix-data:nth-child(58) { top: 15%; right: 35%; animation-delay: 4.4s; }
.matrix-data:nth-child(59) { top: 95%; right: 45%; animation-delay: 4.6s; }
.matrix-data:nth-child(60) { top: 25%; right: 55%; animation-delay: 4.8s; }

.matrix-code {
    position: absolute;
    font-family: 'Fira Code', 'Courier New', monospace;
    font-size: 11px;
    color: rgba(0, 255, 65, 0.7);
    white-space: nowrap;
    overflow: hidden;
    opacity: 0;
    animation: typing-appear 8s linear infinite;
}

.matrix-code:nth-child(61) { 
    top: 2%; 
    left: 5%; 
    animation-delay: 0s;
}

.matrix-code:nth-child(61)::after {
    content: '';
    position: relative;
    animation: typing-code-1 8s steps(40, end) infinite;
}

.matrix-code:nth-child(62) { 
    top: 5%; 
    right: 15%; 
    animation-delay: 1.5s;
}

.matrix-code:nth-child(62)::after {
    content: '';
    position: relative;
    animation: typing-code-2 8s steps(30, end) 1.5s infinite;
}

.matrix-code:nth-child(63) { 
    bottom: 5%; 
    left: 20%; 
    animation-delay: 3s;
}

.matrix-code:nth-child(63)::after {
    content: '';
    position: relative;
    animation: typing-code-3 8s steps(35, end) 3s infinite;
}

.matrix-code:nth-child(64) { 
    bottom: 3%; 
    right: 25%; 
    animation-delay: 4.5s;
}

.matrix-code:nth-child(64)::after {
    content: '';
    position: relative;
    animation: typing-code-4 8s steps(32, end) 4.5s infinite;
}

.matrix-code:nth-child(65) { 
    top: 3%; 
    left: 35%; 
    animation-delay: 0.5s;
}

.matrix-code:nth-child(65)::after {
    content: '';
    position: relative;
    animation: typing-code-5 8s steps(28, end) 0.5s infinite;
}

.matrix-code:nth-child(66) { 
    bottom: 2%; 
    left: 45%; 
    animation-delay: 2s;
}

.matrix-code:nth-child(66)::after {
    content: '';
    position: relative;
    animation: typing-code-6 8s steps(38, end) 2s infinite;
}

.matrix-code:nth-child(67) { 
    top: 6%; 
    left: 60%; 
    animation-delay: 3.5s;
}

.matrix-code:nth-child(67)::after {
    content: '';
    position: relative;
    animation: typing-code-7 8s steps(25, end) 3.5s infinite;
}

.matrix-code:nth-child(68) { 
    bottom: 4%; 
    right: 10%; 
    animation-delay: 5s;
}

.matrix-code:nth-child(68)::after {
    content: '';
    position: relative;
    animation: typing-code-8 8s steps(33, end) 5s infinite;
}

@keyframes matrix-pulse {
    0%, 100% { 
        opacity: 0.2;
        box-shadow: 0 0 5px rgba(0, 255, 65, 0.3);
        transform: scale(1);
    }
    50% { 
        opacity: 0.9;
        box-shadow: 0 0 20px rgba(0, 255, 65, 0.8);
        transform: scale(1.05);
    }
}

@keyframes matrix-node-glow {
    0% { 
        box-shadow: 0 0 10px rgba(0, 255, 136, 0.6);
        transform: scale(0.8);
    }
    100% { 
        box-shadow: 0 0 25px rgba(0, 255, 136, 1);
        transform: scale(1.3);
    }
}

@keyframes matrix-data-flow {
    0% {
        opacity: 0;
        transform: translateX(-20px) translateY(-20px);
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
        transform: translateX(calc(100vw + 20px)) translateY(20px);
    }
    100% {
        opacity: 0;
        transform: translateX(calc(100vw + 40px)) translateY(40px);
    }
}

@keyframes typing-appear {
    0%, 15% {
        opacity: 0;
        transform: scale(0.9);
    }
    20%, 90% {
        opacity: 1;
        transform: scale(1);
    }
    95%, 100% {
        opacity: 0;
        transform: scale(0.9);
    }
}

@keyframes typing-code-1 {
    0% { content: ''; }
    5% { content: 'c'; }
    10% { content: 'co'; }
    15% { content: 'con'; }
    20% { content: 'cons'; }
    25% { content: 'const'; }
    30% { content: 'const '; }
    35% { content: 'const a'; }
    40% { content: 'const ap'; }
    45% { content: 'const app'; }
    50% { content: 'const app '; }
    55% { content: 'const app ='; }
    60% { content: 'const app = '; }
    65% { content: 'const app = n'; }
    70% { content: 'const app = ne'; }
    75% { content: 'const app = new'; }
    80% { content: 'const app = new '; }
    85% { content: 'const app = new E'; }
    90% { content: 'const app = new Ex'; }
    95% { content: 'const app = new Exp'; }
    100% { content: 'const app = new Express();'; }
}

@keyframes typing-code-2 {
    0% { content: ''; }
    10% { content: 'f'; }
    15% { content: 'fu'; }
    20% { content: 'fun'; }
    25% { content: 'func'; }
    30% { content: 'funct'; }
    35% { content: 'functi'; }
    40% { content: 'functio'; }
    45% { content: 'function'; }
    50% { content: 'function '; }
    55% { content: 'function i'; }
    60% { content: 'function in'; }
    65% { content: 'function ini'; }
    70% { content: 'function init'; }
    75% { content: 'function init('; }
    80% { content: 'function init()'; }
    85% { content: 'function init() '; }
    90% { content: 'function init() {'; }
    100% { content: 'function init() { ... }'; }
}

@keyframes typing-code-3 {
    0% { content: ''; }
    8% { content: 'i'; }
    12% { content: 'im'; }
    16% { content: 'imp'; }
    20% { content: 'impo'; }
    24% { content: 'impor'; }
    28% { content: 'import'; }
    32% { content: 'import '; }
    36% { content: 'import R'; }
    40% { content: 'import Re'; }
    44% { content: 'import Rea'; }
    48% { content: 'import Reac'; }
    52% { content: 'import React'; }
    56% { content: 'import React '; }
    60% { content: 'import React f'; }
    64% { content: 'import React fr'; }
    68% { content: 'import React fro'; }
    72% { content: 'import React from'; }
    76% { content: 'import React from '; }
    80% { content: "import React from '"; }
    84% { content: "import React from 're"; }
    88% { content: "import React from 'rea"; }
    92% { content: "import React from 'reac"; }
    96% { content: "import React from 'react"; }
    100% { content: "import React from 'react';"; }
}

@keyframes typing-code-4 {
    0% { content: ''; }
    10% { content: 'a'; }
    15% { content: 'ap'; }
    20% { content: 'app'; }
    25% { content: 'app.'; }
    30% { content: 'app.l'; }
    35% { content: 'app.li'; }
    40% { content: 'app.lis'; }
    45% { content: 'app.list'; }
    50% { content: 'app.liste'; }
    55% { content: 'app.listen'; }
    60% { content: 'app.listen('; }
    65% { content: 'app.listen(3'; }
    70% { content: 'app.listen(30'; }
    75% { content: 'app.listen(300'; }
    80% { content: 'app.listen(3000'; }
    85% { content: 'app.listen(3000,'; }
    90% { content: 'app.listen(3000, '; }
    95% { content: 'app.listen(3000, ()'; }
    100% { content: 'app.listen(3000, () => {});'; }
}

@keyframes typing-code-5 {
    0% { content: ''; }
    12% { content: 'c'; }
    16% { content: 'cl'; }
    20% { content: 'cla'; }
    24% { content: 'clas'; }
    28% { content: 'class'; }
    32% { content: 'class '; }
    36% { content: 'class A'; }
    40% { content: 'class Ap'; }
    44% { content: 'class App'; }
    48% { content: 'class App '; }
    52% { content: 'class App e'; }
    56% { content: 'class App ex'; }
    60% { content: 'class App ext'; }
    64% { content: 'class App exte'; }
    68% { content: 'class App exten'; }
    72% { content: 'class App extend'; }
    76% { content: 'class App extends'; }
    80% { content: 'class App extends '; }
    84% { content: 'class App extends C'; }
    88% { content: 'class App extends Co'; }
    92% { content: 'class App extends Com'; }
    96% { content: 'class App extends Comp'; }
    100% { content: 'class App extends Component'; }
}

@keyframes typing-code-6 {
    0% { content: ''; }
    8% { content: 'a'; }
    12% { content: 'as'; }
    16% { content: 'asy'; }
    20% { content: 'asyn'; }
    24% { content: 'async'; }
    28% { content: 'async '; }
    32% { content: 'async f'; }
    36% { content: 'async fu'; }
    40% { content: 'async fun'; }
    44% { content: 'async func'; }
    48% { content: 'async funct'; }
    52% { content: 'async functi'; }
    56% { content: 'async functio'; }
    60% { content: 'async function'; }
    64% { content: 'async function '; }
    68% { content: 'async function f'; }
    72% { content: 'async function fe'; }
    76% { content: 'async function fet'; }
    80% { content: 'async function fetc'; }
    84% { content: 'async function fetch'; }
    88% { content: 'async function fetchD'; }
    92% { content: 'async function fetchDa'; }
    96% { content: 'async function fetchDat'; }
    100% { content: 'async function fetchData() {'; }
}

@keyframes typing-code-7 {
    0% { content: ''; }
    15% { content: 'c'; }
    20% { content: 'co'; }
    25% { content: 'con'; }
    30% { content: 'cons'; }
    35% { content: 'conso'; }
    40% { content: 'consol'; }
    45% { content: 'console'; }
    50% { content: 'console.'; }
    55% { content: 'console.l'; }
    60% { content: 'console.lo'; }
    65% { content: 'console.log'; }
    70% { content: 'console.log('; }
    75% { content: "console.log('"; }
    80% { content: "console.log('H"; }
    85% { content: "console.log('He"; }
    90% { content: "console.log('Hel"; }
    95% { content: "console.log('Hell"; }
    100% { content: "console.log('Hello');"; }
}

@keyframes typing-code-8 {
    0% { content: ''; }
    10% { content: 'r'; }
    15% { content: 're'; }
    20% { content: 'ret'; }
    25% { content: 'retu'; }
    30% { content: 'retur'; }
    35% { content: 'return'; }
    40% { content: 'return '; }
    45% { content: 'return ('; }
    50% { content: 'return (<'; }
    55% { content: 'return (<d'; }
    60% { content: 'return (<di'; }
    65% { content: 'return (<div'; }
    70% { content: 'return (<div>'; }
    75% { content: 'return (<div>H'; }
    80% { content: 'return (<div>He'; }
    85% { content: 'return (<div>Hel'; }
    90% { content: 'return (<div>Hell'; }
    95% { content: 'return (<div>Hello'; }
    100% { content: 'return (<div>Hello</div>)'; }
}

@media (max-width: 768px) {
    .matrix-animation {
        opacity: 0.6;
    }
    
    .matrix-line {
        opacity: 0.5;
    }
    
    .matrix-node {
        width: 4px;
        height: 4px;
    }
    
    .matrix-data {
        width: 2px;
        height: 2px;
    }
    
    .matrix-code {
        font-size: 10px;
        opacity: 0.4;
    }
}

/*--------------------------------------------------------------
# Sections
--------------------------------------------------------------*/

.services, .about, .news {
    padding: var(--section-padding) 0;
}

.services {
    background: var(--background-primary);
}

.about {
    background: var(--background-secondary);
}

.news {
    background: var(--background-primary);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.section-header {
    text-align: center;
    margin-bottom: 80px;
}

.section-title {
    font-size: clamp(32px, 5vw, 56px);
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-primary);
    margin-bottom: 16px;
    letter-spacing: -0.02em;
    position: relative;
    display: inline-block;
    padding-bottom: 12px;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #00ff88, #1e6f55);
    border-radius: 2px;
}

.section-subtitle {
    font-size: clamp(19px, 2.5vw, 24px);
    color: var(--text-secondary);
    font-weight: 400;
    max-width: 600px;
    margin: 0 auto;
    letter-spacing: -0.01em;
}

/*--------------------------------------------------------------
# Services
--------------------------------------------------------------*/

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.service-card {
    background: var(--background-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 32px 24px;
    position: relative;
    overflow: hidden;
    transition: var(--transition);
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
}

.service-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, transparent 0%, #00c8ff 50%, transparent 100%);
    animation: scanLine 3s ease-in-out infinite;
    opacity: 0;
}

.service-card:hover::after {
    opacity: 1;
}

@keyframes scanLine {
    0% { transform: translateY(-100%); }
    50% { transform: translateY(0%); }
    100% { transform: translateY(100%); }
}

.service-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 20px;
    color: white;
    position: relative;
    overflow: hidden;
}


.service-title {
    font-size: 21px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.service-description {
    font-size: 17px;
    color: var(--text-secondary);
    line-height: 1.5;
    letter-spacing: -0.01em;
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.about-content h2 {
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-primary);
    margin-bottom: 24px;
    letter-spacing: -0.02em;
}

.about-content p {
    font-size: 19px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 24px;
    letter-spacing: -0.01em;
}

.about-visual {
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: var(--border-radius);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-visual-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 40px;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-items: center;
}

.visual-item {
    color: white;
    font-size: 2.5rem;
    opacity: 0.7;
    transition: all 0.3s ease;
    animation: floatIcon 5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    position: relative;
    will-change: transform;
    display: flex;
    align-items: center;
    justify-content: center;
}

.visual-item .material-icons {
    font-size: 60px;
}

.visual-item::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, rgba(0, 200, 255, 1) 0%, rgba(0, 200, 255, 0.6) 40%, transparent 70%);
    border-radius: 50%;
    box-shadow: 
        0 0 10px rgba(0, 200, 255, 0.8),
        0 0 20px rgba(0, 200, 255, 0.6),
        0 0 30px rgba(0, 200, 255, 0.4);
    top: 50%;
    left: 50%;
    margin-left: -4px;
    margin-top: -4px;
    opacity: 0;
    animation: orbitLight 3s linear infinite;
    transition: opacity 0.3s ease;
}

.visual-item::before {
    content: '';
    position: absolute;
    inset: -25px;
    border: 1px solid rgba(0, 200, 255, 1);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
    transform: rotateX(60deg);
    animation: ellipseRotate 6s linear infinite;
}

.visual-item:hover::after,
.visual-item:hover::before {
    opacity: 1;
}

@keyframes orbitLight {
    from { 
        transform: 
            rotate(0deg) 
            translateX(45px) 
            rotate(0deg)
            scaleX(1.3);
    }
    to { 
        transform: 
            rotate(360deg) 
            translateX(45px) 
            rotate(-360deg)
            scaleX(1.3);
    }
}

@keyframes ellipseRotate {
    0% {
        transform: rotateX(60deg) rotateY(0deg) rotateZ(0deg);
    }
    25% {
        transform: rotateX(45deg) rotateY(90deg) rotateZ(45deg);
    }
    50% {
        transform: rotateX(60deg) rotateY(180deg) rotateZ(90deg);
    }
    75% {
        transform: rotateX(75deg) rotateY(270deg) rotateZ(45deg);
    }
    100% {
        transform: rotateX(60deg) rotateY(360deg) rotateZ(0deg);
    }
}

.visual-item:nth-child(1) { animation-delay: 0s; }
.visual-item:nth-child(2) { animation-delay: 1.3s; }
.visual-item:nth-child(3) { animation-delay: 2.6s; }
.visual-item:nth-child(4) { animation-delay: 3.9s; }
.visual-item:nth-child(5) { animation-delay: 5.2s; }
.visual-item:nth-child(6) { animation-delay: 6.5s; }

.about-visual:hover .visual-item {
    opacity: 1;
    transform: scale(1.1);
}

@keyframes floatIcon {
    0%, 100% { 
        transform: translateY(0px) translateX(0px);
    }
    25% {
        transform: translateY(-8px) translateX(2px);
    }
    50% { 
        transform: translateY(-12px) translateX(0px);
    }
    75% {
        transform: translateY(-8px) translateX(-2px);
    }
}

/*--------------------------------------------------------------
# News Section
--------------------------------------------------------------*/

.news-grid {
    display: grid;
    gap: 16px;
    max-width: 800px;
    margin: 0 auto;
}

.news-item {
    background: var(--background-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 24px;
    transition: all 0.2s ease;
}

.news-item:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-light);
}

.news-date {
    font-size: 15px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    font-weight: 500;
}

.news-title {
    font-size: 19px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
    letter-spacing: -0.01em;
}

.news-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.news-title a:hover {
    color: var(--primary-color);
}

.news-description {
    font-size: 17px;
    color: var(--text-secondary);
    line-height: 1.5;
    letter-spacing: -0.01em;
    margin-bottom: 16px;
}

.news-read-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary-color);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.news-read-more:hover {
    gap: 10px;
    color: #00ff88;
}

.news-read-more .material-icons {
    font-size: 18px;
    transition: transform 0.2s ease;
}

.news-read-more:hover .material-icons {
    transform: translateX(2px);
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/

.footer {
    background: var(--background-secondary);
    padding: 60px 0 40px;
    border-top: 1px solid var(--border-color);
}

.footer-content {
    text-align: center;
    margin-bottom: 40px;
}

.footer-logo {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

.footer-logo img {
    height: 40px;
    width: auto;
}

.footer-description {
    font-size: 17px;
    color: var(--text-secondary);
    margin-bottom: 32px;
    letter-spacing: -0.01em;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

/* WordPress menu structure support */
.footer-links ul {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin: 0;
    padding: 0;
    list-style: none;
    flex-wrap: wrap;
}

.footer-links li {
    list-style: none;
}

.footer-links a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 17px;
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: var(--primary-color);
}

.footer-bottom {
    text-align: center;
    padding-top: 32px;
    border-top: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 15px;
}

/*--------------------------------------------------------------
# Animations
--------------------------------------------------------------*/

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    33% { transform: translateY(-10px) rotate(5deg); }
    66% { transform: translateY(5px) rotate(-3deg); }
}

.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/*--------------------------------------------------------------
# Mobile Responsive
--------------------------------------------------------------*/

@media (max-width: 768px) {
    .nav-menu {
        display: none;
    }

    .mobile-menu-toggle {
        display: block;
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .cta-group {
        flex-direction: column;
        align-items: center;
    }

    .cta-button {
        width: 200px;
    }

    .services-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .footer-links,
    .footer-links ul {
        flex-direction: column;
        gap: 16px;
    }

    .hero {
        padding-top: 40px;
    }
}

@media (max-width: 480px) {
    .nav-container {
        padding: 16px;
    }

    .hero {
        padding: 60px 16px 0;
    }

    .container {
        padding: 0 16px;
    }

    .service-card,
    .news-item {
        padding: 20px;
    }
}

/*--------------------------------------------------------------
# Utility Classes
--------------------------------------------------------------*/

.screen-reader-text {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    word-wrap: normal !important;
    border: 0;
    padding: 0;
    margin: 0;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

/*--------------------------------------------------------------
# WordPress Compatibility
--------------------------------------------------------------*/

.wp-block-image {
    margin: 0 0 1em 0;
}

.wp-block-separator {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 2em auto;
}

.wp-block-quote {
    border-left: 4px solid var(--primary-color);
    margin: 0 0 1em 0;
    padding-left: 1em;
}

.wp-block-code {
    background: var(--background-secondary);
    border-radius: 4px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    padding: 1em;
    overflow-x: auto;
}

.wp-block-button__link {
    background: var(--primary-color);
    border-radius: var(--border-radius);
    color: white;
    padding: 12px 24px;
    text-decoration: none;
    display: inline-block;
    transition: var(--transition);
}

.wp-block-button__link:hover {
    background: var(--secondary-color);
}

/* Block Editor Styles */
.editor-styles-wrapper .wp-block {
    max-width: 1200px;
}

.has-primary-blue-color {
    color: var(--primary-color);
}

.has-secondary-purple-color {
    color: var(--secondary-color);
}

.has-text-primary-color {
    color: var(--text-primary);
}

.has-text-secondary-color {
    color: var(--text-secondary);
}

/*--------------------------------------------------------------
# Page & Post Templates
--------------------------------------------------------------*/

.page-content,
.post-content {
    padding: var(--section-padding) 0;
    background: var(--background-primary);
}

.page-article,
.post-article {
    margin: 0 auto;
}

.page-content-inner,
.post-content-inner {
    background: var(--background-primary);
}

/* Breadcrumb */
.page-breadcrumb,
.post-breadcrumb {
    margin-bottom: 24px;
}

.page-breadcrumb nav,
.post-breadcrumb nav {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-secondary);
}

.breadcrumb-home,
.breadcrumb-blog {
    color: var(--primary-color);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s ease;
}

.breadcrumb-home:hover,
.breadcrumb-blog:hover {
    color: #00ff88;
}

.breadcrumb-separator .material-icons {
    font-size: 16px;
    color: var(--text-secondary);
}

.breadcrumb-current {
    color: var(--text-primary);
    font-weight: 500;
}

/* Entry Header */
.entry-title {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-primary);
    margin-bottom: 20px;
    letter-spacing: -0.02em;
}

/* Entry Meta for Posts */
.entry-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.post-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--text-secondary);
}

.post-meta-item .material-icons {
    font-size: 18px;
    color: var(--primary-color);
}

.post-meta-item a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.post-meta-item a:hover {
    color: var(--primary-color);
}

/* Featured Image */
.page-thumbnail,
.post-thumbnail {
    margin-bottom: 32px;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.page-featured-image,
.post-featured-image {
    width: 100%;
    height: auto;
    display: block;
}

/* Entry Content */
.entry-content {
    font-size: 18px;
    line-height: 1.7;
    color: var(--text-primary);
    margin-bottom: 32px;
}

.entry-content h2 {
    font-size: 28px;
    font-weight: 600;
    margin: 32px 0 16px 0;
    color: var(--text-primary);
}

.entry-content h3 {
    font-size: 24px;
    font-weight: 600;
    margin: 28px 0 14px 0;
    color: var(--text-primary);
}

.entry-content h4 {
    font-size: 20px;
    font-weight: 600;
    margin: 24px 0 12px 0;
    color: var(--text-primary);
}

.entry-content p {
    margin-bottom: 20px;
}

.entry-content ul,
.entry-content ol {
    margin: 20px 0;
    padding-left: 24px;
}

.entry-content li {
    margin-bottom: 8px;
}

.entry-content blockquote {
    border-left: 4px solid var(--primary-color);
    margin: 24px 0;
    padding: 16px 24px;
    background: var(--background-secondary);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    font-style: italic;
    color: var(--text-secondary);
}

.entry-content code {
    background: var(--background-secondary);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.9em;
}

.entry-content pre {
    background: var(--background-secondary);
    padding: 20px;
    border-radius: var(--border-radius);
    overflow-x: auto;
    margin: 20px 0;
}

.entry-content pre code {
    background: none;
    padding: 0;
}

/* Page Links */
.page-links {
    margin: 32px 0;
    padding: 20px;
    background: var(--background-secondary);
    border-radius: var(--border-radius);
    text-align: center;
}

.page-links-title {
    font-weight: 600;
    margin-right: 12px;
    color: var(--text-primary);
}

.page-link {
    display: inline-block;
    margin: 0 4px;
    padding: 8px 12px;
    background: var(--background-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    text-decoration: none;
    transition: all 0.2s ease;
}

.page-link:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* Entry Footer */
.entry-footer {
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
}

.post-taxonomies {
    margin-bottom: 20px;
}

.post-categories,
.post-tags {
    margin-bottom: 12px;
}

.taxonomy-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--text-primary);
    margin-right: 8px;
}

.taxonomy-label .material-icons {
    font-size: 18px;
    color: var(--primary-color);
}

.post-categories a,
.post-tags a {
    display: inline-block;
    padding: 4px 12px;
    background: var(--background-secondary);
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 16px;
    font-size: 14px;
    margin: 0 4px 4px 0;
    transition: all 0.2s ease;
}

.post-categories a:hover,
.post-tags a:hover {
    background: var(--primary-color);
    color: white;
}

/* Edit Link */
.edit-link {
    text-align: right;
}

.edit-link-inner {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--background-secondary);
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.2s ease;
}

.edit-link-inner:hover {
    background: var(--primary-color);
    color: white;
}

.edit-link-inner .material-icons {
    font-size: 16px;
}

/* Post Navigation */
.post-navigation {
    margin: 40px 0;
    padding: 24px;
    background: var(--background-secondary);
    border-radius: var(--border-radius);
}

.post-navigation .nav-links {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
    flex: 1;
    max-width: 48%;
}

.post-navigation a {
    display: block;
    padding: 16px;
    background: var(--background-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    text-decoration: none;
    transition: all 0.2s ease;
}

.post-navigation a:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-light);
}

.post-navigation .nav-subtitle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.post-navigation .nav-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
}

.post-navigation .nav-next .nav-subtitle {
    justify-content: flex-end;
}

/* Comments Section */
.comments-section {
    margin-top: 40px;
    padding: 32px;
    background: var(--background-secondary);
    border-radius: var(--border-radius);
}

/* Responsive */
@media (max-width: 768px) {
    .page-content-inner,
    .post-content-inner {
        padding: 24px;
    }
    
    .entry-meta {
        flex-direction: column;
        gap: 8px;
    }
    
    .post-navigation .nav-links {
        flex-direction: column;
    }
    
    .post-navigation .nav-previous,
    .post-navigation .nav-next {
        max-width: 100%;
    }
    
    .page-breadcrumb nav,
    .post-breadcrumb nav {
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .page-content,
    .post-content {
        padding: 40px 0;
    }
    
    .page-content-inner,
    .post-content-inner {
        padding: 20px;
        margin: 0 16px;
    }
    
    .entry-content {
        font-size: 16px;
    }
}