/* BenihKode Design System */

/* ===== CSS Variables (Dark Mode Default) ===== */
:root {
    --bg-primary: #0B0D11;
    --bg-secondary: #12151C;
    --bg-card: rgba(255, 255, 255, 0.03);
    --bg-card-hover: rgba(255, 255, 255, 0.06);
    --text-primary: #F0F0F5;
    --text-secondary: #9A9CB0;
    --text-muted: #5D5F73;
    --accent: #FF6B2C;
    --accent-glow: rgba(255, 107, 44, 0.15);
    --gradient-start: #FF6B2C;
    --gradient-end: #FF3D7F;
    --border: rgba(255, 255, 255, 0.06);
    --border-hover: rgba(255, 255, 255, 0.12);
    --glass: rgba(255, 255, 255, 0.04);
    --glass-border: rgba(255, 255, 255, 0.08);
    --header-bg: rgba(11, 13, 17, 0.8);
    --radius: 16px;
    --radius-sm: 8px;
    --radius-xs: 6px;
}

/* ===== Light Mode ===== */
:root[data-theme="light"] {
    --bg-primary: #FDFBF7;
    --bg-secondary: #F3F0E6;
    --bg-card: rgba(0, 0, 0, 0.02);
    --bg-card-hover: rgba(0, 0, 0, 0.04);
    --text-primary: #1A1C23;
    --text-secondary: #4A4D5E;
    --text-muted: #8A8D9E;
    --accent: #E65A28;
    --accent-glow: rgba(230, 90, 40, 0.15);
    --gradient-start: #E65A28;
    --gradient-end: #D93668;
    --border: rgba(0, 0, 0, 0.08);
    --border-hover: rgba(0, 0, 0, 0.15);
    --glass: rgba(255, 255, 255, 0.6);
    --glass-border: rgba(0, 0, 0, 0.05);
    --header-bg: rgba(253, 251, 247, 0.8);
}

/* ===== Reset & Base ===== */
*, *::before, *::after {
    margin: 0; padding: 0; box-sizing: border-box;
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.7;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ===== Typography ===== */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--text-primary);
}
h1 { font-size: clamp(2.8rem, 5.5vw, 4.5rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1.08; }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: 1.2rem; font-weight: 700; font-family: 'Inter', sans-serif; }
h4 { font-size: 1.1rem; font-weight: 700; font-family: 'Inter', sans-serif; }

a { color: var(--accent); text-decoration: none; transition: color 0.25s ease; }
a:hover { color: var(--gradient-end); }

p { margin-bottom: 1em; color: var(--text-secondary); }

code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85em;
    padding: 0.15em 0.4em;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 4px;
}
pre {
    padding: 1.5em;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow-x: auto;
}
pre > code {
    all: unset;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    line-height: 1.7;
}

blockquote {
    border-left: 3px solid var(--accent);
    padding: 0 0 0 1.25rem;
    margin: 1rem 0;
    color: var(--text-secondary);
}

hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 2rem 0;
}

img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
table { width: 100%; }

/* ===== Utility Classes ===== */
.container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
.prose { max-width: 720px; margin: 0 auto; padding: 2rem; }
.prose p { margin-bottom: 1.5em; line-height: 1.8; }

.gradient-text {
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.mono {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    text-decoration: none;
    margin-bottom: 2rem;
    transition: color 0.2s;
}
.back-link:hover {
    color: var(--accent);
}

/* ===== Section Styling ===== */
section { padding: 6rem 0; position: relative; }

.section-label {
    display: inline-flex; align-items: center; gap: 0.75rem;
    font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); margin-bottom: 1rem;
}
.section-label::before { content: ''; width: 24px; height: 1px; background: var(--accent); }

.section-title {
    font-family: 'Playfair Display', serif; font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800; letter-spacing: -0.02em; margin-bottom: 0.75rem;
}
.section-desc {
    font-size: 1rem; color: var(--text-secondary); max-width: 560px; margin-bottom: 3rem;
}

.section-divider {
    height: 1px; max-width: 1200px; margin: 0 auto;
    background: linear-gradient(90deg, transparent, var(--border), transparent);
}

/* ===== Ambient Effects ===== */
.ambient-glow {
    position: fixed; width: 600px; height: 600px; border-radius: 50%;
    filter: blur(120px); opacity: 0.07; pointer-events: none; z-index: 0;
}
.glow-1 { top: -200px; right: -100px; background: var(--gradient-start); animation: floatGlow 15s ease-in-out infinite; }
.glow-2 { bottom: 30%; left: -200px; background: var(--gradient-end); animation: floatGlow 20s ease-in-out infinite reverse; }
.glow-3 { bottom: -100px; right: 20%; background: #6C63FF; animation: floatGlow 18s ease-in-out infinite 3s; }

.dot-pattern {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 0; opacity: 0.3;
    background-image: radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 32px 32px;
}

/* ===== Animations ===== */
@keyframes floatGlow {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -20px) scale(1.1); }
    66% { transform: translate(-20px, 30px) scale(0.9); }
}
@keyframes slideDownF { from { transform: translateY(-30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes slideUpF { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes slideRightF { from { transform: translateX(30px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes gradientShift { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } }
@keyframes pulseDot {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 var(--accent-glow); }
    50% { opacity: 0.7; box-shadow: 0 0 0 6px transparent; }
}
@keyframes floatCard {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* Scroll animations */
.animate-on-scroll {
    opacity: 0; transform: translateY(24px);
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.animate-on-scroll.visible { opacity: 1; transform: translateY(0); }
.stagger-children > .animate-on-scroll:nth-child(1) { transition-delay: 0s; }
.stagger-children > .animate-on-scroll:nth-child(2) { transition-delay: 0.08s; }
.stagger-children > .animate-on-scroll:nth-child(3) { transition-delay: 0.16s; }
.stagger-children > .animate-on-scroll:nth-child(4) { transition-delay: 0.24s; }
.stagger-children > .animate-on-scroll:nth-child(5) { transition-delay: 0.32s; }
.stagger-children > .animate-on-scroll:nth-child(6) { transition-delay: 0.40s; }

/* Scroll Progress */
.scroll-progress-container {
    position: fixed; top: 0; left: 0; width: 100%; height: 3px;
    background: rgba(255,255,255,0.05); z-index: 1001;
}
.scroll-progress {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end), #6C63FF, var(--gradient-start));
    background-size: 300% 100%;
    animation: gradientShift 3s linear infinite;
    transition: width 0.1s;
    box-shadow: 0 0 10px var(--accent-glow);
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
    section { padding: 4rem 0; }
}
@media (max-width: 768px) {
    .container { padding: 0 1.25rem; }
    section { padding: 3rem 0; }
}

/* ===== Screen Reader ===== */
.sr-only {
    border: 0; padding: 0; margin: 0;
    position: absolute !important; height: 1px; width: 1px;
    overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%); white-space: nowrap;
}

/* ===== Accessibility ===== */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
    border-radius: 2px;
}
.theme-toggle[data-astro-cid-x3pjskd3]{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:0.5rem;font-size:1.1rem;border-radius:var(--radius-xs);transition:all 0.25s ease;display:inline-flex;align-items:center}.theme-toggle[data-astro-cid-x3pjskd3]:hover{color:var(--accent);background:var(--bg-card-hover)}header[data-astro-cid-3ef6ksr2]{position:sticky;top:0;z-index:100;padding:0 2rem;background:var(--header-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border);animation:slideDownF 0.8s cubic-bezier(0.16,1,0.3,1) forwards}.header-inner[data-astro-cid-3ef6ksr2]{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;height:72px}.logo[data-astro-cid-3ef6ksr2]{text-decoration:none;display:flex;align-items:center;gap:0.75rem}.logo-icon[data-astro-cid-3ef6ksr2]{width:36px;height:36px;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 4px 8px var(--accent-glow))}.logo-name[data-astro-cid-3ef6ksr2]{font-family:"Playfair Display",serif;font-size:1.3rem;font-weight:800;color:var(--text-primary);line-height:1.1;letter-spacing:-0.02em}.logo-name[data-astro-cid-3ef6ksr2] .accent[data-astro-cid-3ef6ksr2]{background:linear-gradient(135deg,var(--gradient-start),var(--gradient-end));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.logo-subtitle[data-astro-cid-3ef6ksr2]{font-family:"JetBrains Mono",monospace;font-size:0.6rem;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);margin-top:2px;display:block}nav[data-astro-cid-3ef6ksr2] a[data-astro-cid-3ef6ksr2]{font-size:0.82rem;font-weight:500;color:var(--text-secondary);text-decoration:none;padding:0.5rem 1rem;border-radius:var(--radius-xs);transition:all 0.25s ease}nav[data-astro-cid-3ef6ksr2] a[data-astro-cid-3ef6ksr2]:hover{color:var(--text-primary);background:var(--bg-card-hover)}.header-actions[data-astro-cid-3ef6ksr2]{display:flex;align-items:center;gap:0.5rem}.mobile-menu[data-astro-cid-3ef6ksr2]{display:none;background:none;border:none;color:var(--text-primary);font-size:1.5rem;cursor:pointer;padding:0.5rem}.mobile-nav-overlay[data-astro-cid-3ef6ksr2]{display:none}@media (max-width: 768px){nav[data-astro-cid-3ef6ksr2]{display:none}.mobile-menu[data-astro-cid-3ef6ksr2]{display:block}.mobile-nav-overlay[data-astro-cid-3ef6ksr2]{position:fixed;top:72px;left:0;right:0;background:var(--header-bg);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:1rem 2rem;z-index:99;flex-direction:column;gap:0.5rem}.mobile-nav-overlay[data-astro-cid-3ef6ksr2].open{display:flex}.mobile-nav-overlay[data-astro-cid-3ef6ksr2] a[data-astro-cid-3ef6ksr2]{font-size:0.9rem;padding:0.75rem 1rem;color:var(--text-secondary);text-decoration:none;border-radius:var(--radius-xs)}.mobile-nav-overlay[data-astro-cid-3ef6ksr2] a[data-astro-cid-3ef6ksr2]:hover{background:var(--bg-card-hover);color:var(--text-primary)}}footer[data-astro-cid-sz7xmlte]{border-top:1px solid var(--border);padding:4rem 0;text-align:center}.footer-tagline[data-astro-cid-sz7xmlte]{font-family:"JetBrains Mono",monospace;font-size:0.78rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:1.5rem}.email[data-astro-cid-sz7xmlte]{font-family:"Playfair Display",serif;font-size:clamp(1.5rem,3vw,2.2rem);font-weight:700;color:var(--text-primary);text-decoration:none;display:inline-block;margin-bottom:1.5rem;transition:all 0.3s ease;position:relative}.email[data-astro-cid-sz7xmlte]::after{content:"";position:absolute;bottom:-2px;left:0;width:0;height:2px;background:linear-gradient(90deg,var(--gradient-start),var(--gradient-end));transition:width 0.3s ease}.email[data-astro-cid-sz7xmlte]:hover{background:linear-gradient(135deg,var(--gradient-start),var(--gradient-end));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.email[data-astro-cid-sz7xmlte]:hover::after{width:100%}.footer-copy[data-astro-cid-sz7xmlte]{font-size:0.78rem;color:var(--text-muted)}.footer-social[data-astro-cid-sz7xmlte]{display:flex;justify-content:center;gap:1rem;margin-bottom:2rem}.social-link[data-astro-cid-sz7xmlte]{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);background:var(--glass);border:1px solid var(--glass-border);color:var(--text-secondary);text-decoration:none;font-size:1.1rem;transition:all 0.25s ease}.social-link[data-astro-cid-sz7xmlte]:hover{background:var(--accent-glow);border-color:rgba(255,107,44,0.3);color:var(--accent);transform:translateY(-2px)}