/* ===================================
   CSS Variables for Easy Customization
   =================================== */
:root {
    /* Color Palette */
    --color-bg-primary: #0f172a;
    --color-bg-secondary: #1e293b;
    --color-text-primary: #f1f5f9;
    --color-text-secondary: #cbd5e1;
    --color-text-muted: #94a3b8;
    --color-accent: #3b82f6;
    --color-accent-hover: #2563eb;
    --color-circuit: #06b6d4;
    --color-circuit-glow: rgba(6, 182, 212, 0.6);
    --color-glass-bg: rgba(30, 41, 59, 0.4);
    --color-glass-border: rgba(148, 163, 184, 0.2);
    
    /* Gradients */
    --gradient-glow-blue: radial-gradient(circle at center, rgba(59, 130, 246, 0.15), transparent 70%);
    --gradient-glow-purple: radial-gradient(circle at center, rgba(139, 92, 246, 0.15), transparent 70%);
    --gradient-button: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    
    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 4rem;
    --spacing-3xl: 6rem;
    
    /* Typography */
    --font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Courier New', monospace;
    --font-size-xs: 0.875rem;
    --font-size-sm: 1rem;
    --font-size-md: 1.125rem;
    --font-size-lg: 1.5rem;
    --font-size-xl: 2rem;
    --font-size-2xl: 2.5rem;
    --font-size-3xl: 3.5rem;
    
    /* Borders & Radius */
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 16px;
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
}

/* ===================================
   Global Styles & Reset
   =================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    background-color: #0f172a;
    color: var(--color-text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    overflow-x: hidden;
    background-image: 
        radial-gradient(circle at 25% 25%, rgba(56, 189, 248, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(59, 130, 246, 0.05) 0%, transparent 50%),
        linear-gradient(90deg, rgba(56, 189, 248, 0.02) 1px, transparent 1px),
        linear-gradient(0deg, rgba(56, 189, 248, 0.02) 1px, transparent 1px);
    background-size: 
        100% 100%,
        100% 100%,
        50px 50px,
        50px 50px;
    background-position: 0 0, 0 0, 0 0, 0 0;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

/* ===================================
   PCB Circuit Board Background
   =================================== */
.pcb-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    background-color: #1a2332;
    background-image: 
        /* IC Chip outlines */
        repeating-linear-gradient(90deg, transparent 0, transparent 280px, rgba(0, 217, 255, 0.15) 280px, rgba(0, 217, 255, 0.15) 282px, transparent 282px, transparent 480px, rgba(0, 217, 255, 0.15) 480px, rgba(0, 217, 255, 0.15) 482px, transparent 482px, transparent 680px),
        repeating-linear-gradient(0deg, transparent 0, transparent 180px, rgba(0, 217, 255, 0.15) 180px, rgba(0, 217, 255, 0.15) 182px, transparent 182px, transparent 340px, rgba(0, 217, 255, 0.15) 340px, rgba(0, 217, 255, 0.15) 342px, transparent 342px, transparent 540px),
        /* Parallel traces */
        repeating-linear-gradient(0deg, transparent 0, transparent 18px, rgba(0, 217, 255, 0.25) 18px, rgba(0, 217, 255, 0.25) 19px, transparent 19px, transparent 22px, rgba(0, 217, 255, 0.25) 22px, rgba(0, 217, 255, 0.25) 23px, transparent 23px, transparent 26px, rgba(0, 217, 255, 0.25) 26px, rgba(0, 217, 255, 0.25) 27px, transparent 27px, transparent 60px),
        repeating-linear-gradient(90deg, transparent 0, transparent 35px, rgba(0, 217, 255, 0.25) 35px, rgba(0, 217, 255, 0.25) 36px, transparent 36px, transparent 40px, rgba(0, 217, 255, 0.25) 40px, rgba(0, 217, 255, 0.25) 41px, transparent 41px, transparent 80px),
        /* Connection dots */
        radial-gradient(circle at 20% 15%, rgba(0, 217, 255, 0.4) 2px, transparent 2px),
        radial-gradient(circle at 45% 25%, rgba(0, 217, 255, 0.4) 2px, transparent 2px),
        radial-gradient(circle at 70% 35%, rgba(0, 217, 255, 0.4) 2px, transparent 2px),
        radial-gradient(circle at 30% 55%, rgba(0, 217, 255, 0.4) 2px, transparent 2px),
        radial-gradient(circle at 85% 70%, rgba(0, 217, 255, 0.4) 2px, transparent 2px),
        /* Component rectangles (resistors/capacitors) */
        repeating-linear-gradient(0deg, transparent 0, transparent 150px, rgba(0, 217, 255, 0.08) 150px, rgba(0, 217, 255, 0.08) 155px, transparent 155px, transparent 165px, rgba(0, 217, 255, 0.08) 165px, rgba(0, 217, 255, 0.08) 170px, transparent 170px, transparent 300px),
        repeating-linear-gradient(90deg, transparent 0, transparent 220px, rgba(0, 217, 255, 0.08) 220px, rgba(0, 217, 255, 0.08) 245px, transparent 245px, transparent 420px);
    background-size: 
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        150px 150px,
        150px 150px,
        150px 150px,
        150px 150px,
        150px 150px,
        100% 100%,
        100% 100%;
    background-position: 50px 30px, 80px 60px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
    animation: pcbBuild 3.5s ease-out forwards, pcbPulse 5s ease-in-out 3.5s infinite;
}

@keyframes pcbBuild {
    0% {
        opacity: 0;
        filter: blur(12px) brightness(3) contrast(0.3);
    }
    30% {
        opacity: 0.15;
        filter: blur(8px) brightness(2) contrast(0.6);
    }
    60% {
        opacity: 0.28;
        filter: blur(3px) brightness(1.4) contrast(0.85);
    }
    100% {
        opacity: 0.35;
        filter: blur(0px) brightness(1) contrast(1);
    }
}

@keyframes pcbPulse {
    0%, 100% {
        filter: brightness(1) contrast(1);
    }
    50% {
        filter: brightness(1.15) contrast(1.1);
    }
}

/* ===================================
   Circuit Board SVG Overlay
   =================================== */
.circuit-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    opacity: 0.3;
}

.circuit-trace {
    fill: none;
    stroke: #38bdf8;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.6));
    opacity: 0.4;
}

.draw-circuit {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    animation: drawTrace 3s ease-out forwards;
}

@keyframes drawTrace {
    to {
        stroke-dashoffset: 0;
    }
}

.circuit-node {
    fill: #38bdf8;
    filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.8));
    opacity: 0;
}

.animate-node {
    animation: nodeGlow 0.5s ease-out forwards;
}

@keyframes nodeGlow {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    50% {
        opacity: 1;
        transform: scale(1.3);
    }
    100% {
        opacity: 0.6;
        transform: scale(1);
    }
}

/* Remove old background styles */
.pcb-background {
    display: none;
}

/* ===================================
   Section Animation (Fade in from circuit)
   =================================== */
.section-animate {
    position: relative;
    z-index: 2;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.section-animate.section-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ===================================
   Hero Section
   =================================== */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: var(--spacing-3xl) 0;
}

.hero-brand-image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0.08;
    filter: blur(3px);
}

.hero-banner {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    pointer-events: none;
    z-index: 0;
}

.hero-glow-left {
    top: -200px;
    left: -200px;
    background: var(--gradient-glow-blue);
}

.hero-glow-right {
    bottom: -200px;
    right: -200px;
    background: var(--gradient-glow-purple);
}

.hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

.hero-title-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
}

.hero-logo {
    height: 80px;
    width: auto;
    border: 2px solid rgba(56, 189, 248, 0.3);
    border-radius: var(--border-radius-md);
    box-shadow: 0 0 30px rgba(56, 189, 248, 0.4);
    animation: logoPulse 3s ease-in-out infinite;
}

@keyframes logoPulse {
    0%, 100% {
        box-shadow: 0 0 30px rgba(56, 189, 248, 0.4);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 50px rgba(56, 189, 248, 0.6);
        transform: scale(1.05);
    }
}

.hero-title {
    font-size: var(--font-size-3xl);
    font-weight: 800;
    margin-bottom: 0;
    background: linear-gradient(135deg, #f1f5f9 0%, #cbd5e1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.02em;
}

.hero-subtitle {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
}

.hero-tagline {
    font-size: var(--font-size-md);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-xl);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* ===================================
   Terminal Component
   =================================== */
.terminal {
    max-width: 600px;
    margin: var(--spacing-xl) auto 0;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid var(--color-glass-border);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.terminal-header {
    background: rgba(30, 41, 59, 0.6);
    padding: var(--spacing-sm) var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    border-bottom: 1px solid var(--color-glass-border);
}

.terminal-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-text-muted);
}

.terminal-dot:nth-child(1) {
    background: #ef4444;
}

.terminal-dot:nth-child(2) {
    background: #f59e0b;
}

.terminal-dot:nth-child(3) {
    background: #10b981;
}

.terminal-title {
    margin-left: auto;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-family: var(--font-mono);
}

.terminal-body {
    padding: var(--spacing-md);
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    color: var(--color-circuit);
    min-height: 60px;
    display: flex;
    align-items: center;
}

.terminal-prompt {
    color: var(--color-accent);
    margin-right: var(--spacing-xs);
}

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

.terminal-cursor {
    color: var(--color-circuit);
    animation: blink 1s step-end infinite;
    margin-left: 2px;
}

@keyframes blink {
    0%, 50% {
        opacity: 1;
    }
    51%, 100% {
        opacity: 0;
    }
}

/* ===================================
   About Section
   =================================== */
.about {
    padding: var(--spacing-3xl) 0;
    background-color: var(--color-bg-primary);
}

.about-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.section-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    margin-bottom: var(--spacing-xl);
    color: var(--color-text-primary);
}

.about-text {
    font-size: var(--font-size-md);
    color: var(--color-text-secondary);
    line-height: 1.8;
}

/* ===================================
   Services Section (Bento Grid)
   =================================== */
.services {
    padding: var(--spacing-3xl) 0;
    background-color: var(--color-bg-primary);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
}

.glass-card {
    background: var(--color-glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--color-glass-border);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
    transition: transform var(--transition-normal), border-color var(--transition-normal);
}

.glass-card:hover {
    transform: translateY(-4px);
    border-color: rgba(148, 163, 184, 0.4);
}

.service-card {
    text-align: center;
}

.service-icon {
    font-size: 3rem;
    margin-bottom: var(--spacing-md);
}

.service-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-primary);
}

.service-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.7;
}

/* ===================================
   Portfolio Section
   =================================== */
.portfolio {
    padding: var(--spacing-3xl) 0;
    background-color: var(--color-bg-primary);
}

.portfolio-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    align-items: center;
    margin-top: var(--spacing-xl);
    padding: var(--spacing-2xl);
}

.portfolio-visual {
    width: 100%;
}

.portfolio-screenshots {
    width: 100%;
    aspect-ratio: 9 / 16;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    position: relative;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    background: var(--color-bg-secondary);
}

.portfolio-screenshot {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.portfolio-screenshot.active {
    opacity: 1;
}

.portfolio-screenshot:nth-child(1) {
    animation: alternateSlide1 8s ease-in-out infinite;
}

.portfolio-screenshot:nth-child(2) {
    animation: alternateSlide2 8s ease-in-out infinite;
}

@keyframes alternateSlide1 {
    0%, 45% {
        opacity: 1;
    }
    50%, 100% {
        opacity: 0;
    }
}

@keyframes alternateSlide2 {
    0%, 45% {
        opacity: 0;
    }
    50%, 95% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.portfolio-placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, var(--color-bg-secondary) 0%, rgba(59, 130, 246, 0.1) 100%);
    border-radius: var(--border-radius-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--color-glass-border);
}

.placeholder-icon {
    font-size: 4rem;
    margin-bottom: var(--spacing-sm);
}

.placeholder-text {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.portfolio-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.portfolio-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-text-primary);
}

.portfolio-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.7;
}

.download-button {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    background-color: var(--color-bg-secondary);
    color: var(--color-text-primary);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--border-radius-md);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--font-size-sm);
    border: 1px solid var(--color-glass-border);
    transition: background-color var(--transition-normal), border-color var(--transition-normal);
    width: fit-content;
}

.download-button:hover {
    background-color: rgba(30, 41, 59, 0.8);
    border-color: rgba(148, 163, 184, 0.4);
}

.play-icon {
    width: 20px;
    height: 20px;
    color: var(--color-accent);
}

/* ===================================
   Contact Section & Footer
   =================================== */
.footer {
    padding: var(--spacing-3xl) 0 var(--spacing-2xl);
    background-color: var(--color-bg-secondary);
    border-top: 1px solid var(--color-glass-border);
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
    margin: var(--spacing-xl) 0;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: var(--color-glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--color-glass-border);
    border-radius: var(--border-radius-lg);
    text-decoration: none;
    transition: transform var(--transition-normal), border-color var(--transition-normal);
}

.contact-item:hover {
    transform: translateY(-4px);
    border-color: rgba(148, 163, 184, 0.4);
}

.contact-icon {
    width: 32px;
    height: 32px;
    color: var(--color-circuit);
    flex-shrink: 0;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contact-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-weight: 500;
}

.contact-value {
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    font-weight: 600;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-glass-border);
}

.footer-copyright {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.footer-link {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: var(--font-size-xs);
    transition: color var(--transition-fast);
}

.footer-link:hover {
    color: var(--color-accent);
}

/* ===================================
   Responsive Design
   =================================== */
@media (max-width: 968px) {
    :root {
        --font-size-3xl: 2.5rem;
        --font-size-2xl: 2rem;
        --font-size-xl: 1.5rem;
        --spacing-3xl: 4rem;
    }
    
    .portfolio-item {
        grid-template-columns: 1fr;
        padding: var(--spacing-xl);
    }
    
    .contact-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    :root {
        --font-size-3xl: 2rem;
        --font-size-2xl: 1.75rem;
        --font-size-xl: 1.25rem;
        --spacing-3xl: 3rem;
        --spacing-2xl: 2rem;
    }
    
    .services-grid {
        grid-template-columns: 1fr;
    }
    
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
    
    .hero-glow {
        width: 400px;
        height: 400px;
    }
    
    .terminal {
        font-size: 0.85rem;
    }
    
    .hero-title-wrapper {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .hero-logo {
        height: 60px;
    }
}