.gradient-green-blue,.gradient-navy-steel{background:linear-gradient(135deg,#0A1628 0,#1E3A5F 100%)}.gradient-text{background:linear-gradient(135deg,#D4A03C 0,#1E3A5F 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.space-unit{padding:.5rem}@media (max-width:640px){.mobile-padding{padding-left:1rem;padding-right:1rem}.flex-col-mobile{flex-direction:column!important}h1{font-size:2rem}h2{font-size:1.5rem}.card-mobile-full{width:100%;margin:.5rem 0}}@media (max-width:768px){body{padding-bottom:80px}footer{margin-bottom:80px}}@media (max-width:768px){.grid-mobile-1{grid-template-columns:1fr!important}section{padding-top:3rem;padding-bottom:3rem}}input:focus,select:focus,textarea:focus{outline:0;box-shadow:0 0 0 3px rgba(212,160,60,.1)}@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{from{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}.animate-on-scroll{opacity:0;transform:translateY(30px);transition:opacity .6s ease-out,transform .6s ease-out}.animate-on-scroll.visible{opacity:1;transform:translateY(0)}.no-js .animate-on-scroll{opacity:1!important;transform:none!important}.btn-primary{background-color:#D4A03C;color:#fff;padding:.75rem 1.5rem;border-radius:.5rem;font-weight:600;transition:all .3s cubic-bezier(.4, 0, .2, 1);position:relative;overflow:hidden}.btn-primary::before{content:'';position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:rgba(255,255,255,.3);transform:translate(-50%,-50%);transition:width .6s,height .6s}.btn-primary:hover::before{width:300px;height:300px}.btn-primary:hover{background-color:#C08A2E;transform:translateY(-2px);box-shadow:0 10px 20px rgba(212,160,60,.3)}.btn-secondary{background-color:#1E3A5F;color:#fff;padding:.75rem 1.5rem;border-radius:.5rem;font-weight:600;transition:all .3s ease}.btn-secondary:hover{background-color:#162D4A;transform:translateY(-2px);box-shadow:0 4px 6px rgba(10,22,40,.1)}.card-hover{transition:all .3s cubic-bezier(.4, 0, .2, 1);backdrop-filter:blur(10px);background-color:var(--color-bg-card)}.card-hover:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 20px 40px var(--color-shadow-md);background-color:var(--color-bg-card-hover)}.glass-card{background-color:var(--color-bg-card);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--color-border-primary);box-shadow:0 8px 32px 0 var(--color-shadow-sm)}.gradient-border{position:relative;background-color:var(--color-bg-card);border-radius:.5rem}.gradient-border::before{content:'';position:absolute;inset:0;border-radius:.5rem;padding:2px;background:linear-gradient(135deg,#D4A03C,#1E3A5F);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}:root{--font-scale:1.25;--spacing-unit:0.5rem}h1,h2,h3,h4,h5,h6{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:700;letter-spacing:-.02em;line-height:1.2}body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.6;font-size:16px;color:var(--color-text-primary)}.text-xs{font-size:.75rem}.text-sm{font-size:.875rem}.text-base{font-size:1rem}.text-lg{font-size:1.125rem}.text-xl{font-size:1.25rem}.text-2xl{font-size:1.563rem}.text-3xl{font-size:1.953rem}.text-4xl{font-size:2.441rem}.text-5xl{font-size:3.052rem}.loading{opacity:.5;pointer-events:none}.min-h-hero{min-height:60vh}@media (max-width:768px){.min-h-hero{min-height:50vh}}.blog-content{color:var(--color-text-primary);line-height:1.8}.blog-content h1{font-size:2rem;font-weight:700;margin-top:2rem;margin-bottom:1rem;color:var(--color-primary-navy)}.blog-content h2{font-size:1.5rem;font-weight:700;margin-top:1.5rem;margin-bottom:.75rem;color:var(--color-primary-navy)}.blog-content h3{font-size:1.25rem;font-weight:700;margin-top:1.25rem;margin-bottom:.5rem;color:var(--color-steel-blue)}.blog-content p{margin-bottom:1rem}.blog-content ol,.blog-content ul{margin-bottom:1rem;padding-left:2rem}.blog-content li{margin-bottom:.5rem}.blog-content strong{font-weight:600;color:var(--color-primary-navy)}.blog-content a{color:var(--color-primary-blue);text-decoration:underline}.blog-content a:hover{color:var(--color-primary-blue-hover)}.blog-content blockquote{border-left:4px solid var(--color-accent-gold);padding-left:1rem;margin:1.5rem 0;font-style:italic;color:var(--color-text-secondary)}.blog-content code{background-color:var(--color-bg-tertiary);color:var(--color-text-primary);padding:.125rem .25rem;border-radius:.25rem;font-size:.875em}.blog-content pre{background-color:var(--color-bg-tertiary);color:var(--color-text-primary);padding:1rem;border-radius:.5rem;overflow-x:auto;margin-bottom:1rem}.blog-content hr{border:none;border-top:1px solid var(--color-border-primary);margin:2rem 0}

/* ========================================
   CUSTOM SCROLLBAR - Site-wide
   ======================================== */

/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-secondary, #f1f5f9);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #D4A03C 0%, #1E3A5F 100%);
    border-radius: 6px;
    border: 2px solid var(--color-bg-secondary, #f1f5f9);
    transition: all 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #C08A2E 0%, #162D4A 100%);
    border-width: 1px;
}

::-webkit-scrollbar-corner {
    background: var(--color-bg-secondary, #f1f5f9);
}

/* Dark mode scrollbar */
.dark ::-webkit-scrollbar-track,
[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #0A1628;
}

.dark ::-webkit-scrollbar-thumb,
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #D4A03C 0%, #1E3A5F 100%);
    border-color: #0A1628;
}

.dark ::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #E5B34A 0%, #2A4E7A 100%);
}

.dark ::-webkit-scrollbar-corner,
[data-theme="dark"] ::-webkit-scrollbar-corner {
    background: #0A1628;
}

/* Firefox scrollbar */
* {
    scrollbar-width: auto;
    scrollbar-color: #D4A03C var(--color-bg-secondary, #f1f5f9);
}

.dark *,
[data-theme="dark"] * {
    scrollbar-color: #D4A03C #0A1628;
}

/* ========================================
   HERO ANIMATIONS - Global Variants
   ======================================== */

/* Base hero styles */
.hero-animated {
    position: relative;
    overflow: hidden;
}

.hero-animated > .hero-particles,
.hero-animated > .hero-shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Gradient animation - subtle color shift */
.gradient-animated {
    background-size: 200% 200%;
    animation: gradientShift 8s ease infinite;
}

.gradient-animated-slow {
    background-size: 200% 200%;
    animation: gradientShift 15s ease infinite;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ---- VARIANT 1: Fade Up (Blog) ---- */
.hero-v1-title {
    opacity: 0;
    transform: translateY(30px);
    animation: heroFadeUp 0.8s ease forwards;
}

.hero-v1-subtitle {
    opacity: 0;
    transform: translateY(20px);
    animation: heroFadeUp 0.8s ease 0.2s forwards;
}

.hero-v1-content {
    opacity: 0;
    transform: translateY(20px);
    animation: heroFadeUp 0.8s ease 0.4s forwards;
}

.hero-v1-extra {
    opacity: 0;
    animation: heroFadeIn 0.8s ease 0.6s forwards;
}

@keyframes heroFadeUp {
    to { opacity: 1; transform: translateY(0); }
}

@keyframes heroFadeIn {
    to { opacity: 1; }
}

/* ---- VARIANT 2: Slide In (Home) ---- */
.hero-v2-title {
    opacity: 0;
    transform: translateX(-40px);
    animation: heroSlideRight 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero-v2-subtitle {
    opacity: 0;
    transform: translateX(-30px);
    animation: heroSlideRight 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}

.hero-v2-content {
    opacity: 0;
    transform: translateX(-20px);
    animation: heroSlideRight 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}

.hero-v2-cta {
    opacity: 0;
    transform: translateY(20px);
    animation: heroFadeUp 0.7s ease 0.5s forwards;
}

@keyframes heroSlideRight {
    to { opacity: 1; transform: translateX(0); }
}

/* ---- VARIANT 3: Scale Pop (Services) ---- */
.hero-v3-title {
    opacity: 0;
    transform: scale(0.9);
    animation: heroScalePop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.hero-v3-subtitle {
    opacity: 0;
    transform: scale(0.95);
    animation: heroScalePop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s forwards;
}

.hero-v3-content {
    opacity: 0;
    animation: heroFadeIn 0.6s ease 0.3s forwards;
}

@keyframes heroScalePop {
    to { opacity: 1; transform: scale(1); }
}

/* ---- VARIANT 4: Blur Reveal (Resume) ---- */
.hero-v4-title {
    opacity: 0;
    filter: blur(10px);
    animation: heroBlurReveal 1s ease forwards;
}

.hero-v4-subtitle {
    opacity: 0;
    filter: blur(8px);
    animation: heroBlurReveal 1s ease 0.2s forwards;
}

.hero-v4-content {
    opacity: 0;
    filter: blur(5px);
    animation: heroBlurReveal 0.8s ease 0.4s forwards;
}

@keyframes heroBlurReveal {
    to { opacity: 1; filter: blur(0); }
}

/* ---- VARIANT 5: Bounce Up (Projects) ---- */
.hero-v5-title {
    opacity: 0;
    transform: translateY(50px);
    animation: heroBounceUp 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.hero-v5-subtitle {
    opacity: 0;
    transform: translateY(40px);
    animation: heroBounceUp 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s forwards;
}

.hero-v5-content {
    opacity: 0;
    transform: translateY(30px);
    animation: heroBounceUp 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards;
}

@keyframes heroBounceUp {
    to { opacity: 1; transform: translateY(0); }
}

/* ---- VARIANT 6: Elegant Fade (Contact/General) ---- */
.hero-v6-title {
    opacity: 0;
    animation: heroElegantFade 1.2s ease forwards;
}

.hero-v6-subtitle {
    opacity: 0;
    animation: heroElegantFade 1.2s ease 0.3s forwards;
}

.hero-v6-content {
    opacity: 0;
    animation: heroElegantFade 1s ease 0.5s forwards;
}

@keyframes heroElegantFade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* ---- VARIANT 7: Creative Blog (Slider Revolution Inspired) ---- */

/* Main title with typewriter cursor and glow pulse */
.hero-blog-title {
    opacity: 0;
    animation: blogTitleReveal 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    text-shadow: 0 0 40px rgba(212, 160, 60, 0.5), 0 0 80px rgba(30, 58, 95, 0.3);
    position: relative;
}

.hero-blog-title::after {
    content: '|';
    position: absolute;
    right: -10px;
    animation: cursorBlink 1s step-end infinite;
    color: #D4A03C;
    text-shadow: 0 0 10px #D4A03C;
}

@keyframes blogTitleReveal {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.9);
        filter: blur(10px);
        letter-spacing: 0.3em;
    }
    60% {
        letter-spacing: 0.05em;
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        letter-spacing: normal;
    }
}

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

/* Subtitle with word-by-word reveal */
.hero-blog-subtitle {
    opacity: 0;
    animation: blogSubtitleReveal 0.8s ease 0.5s forwards;
}

@keyframes blogSubtitleReveal {
    0% {
        opacity: 0;
        transform: translateY(20px);
        filter: blur(5px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* Content with slide-up and fade */
.hero-blog-content {
    opacity: 0;
    animation: blogContentReveal 0.6s ease 0.8s forwards;
}

@keyframes blogContentReveal {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Pulsing glow effect for title */
.hero-text-glow-pulse {
    animation: textGlowPulse 3s ease-in-out infinite;
}

@keyframes textGlowPulse {
    0%, 100% {
        text-shadow: 0 0 20px rgba(212, 160, 60, 0.4), 0 0 40px rgba(30, 58, 95, 0.2);
    }
    50% {
        text-shadow: 0 0 40px rgba(212, 160, 60, 0.7), 0 0 80px rgba(30, 58, 95, 0.4), 0 0 120px rgba(212, 160, 60, 0.2);
    }
}

/* Morphing blob background */
.hero-morphing-blob {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.hero-morphing-blob::before,
.hero-morphing-blob::after {
    content: '';
    position: absolute;
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    filter: blur(40px);
    opacity: 0.4;
    animation: morphBlob 15s ease-in-out infinite;
}

.hero-morphing-blob::before {
    width: 500px;
    height: 500px;
    background: linear-gradient(135deg, rgba(212, 160, 60, 0.4) 0%, rgba(30, 58, 95, 0.3) 100%);
    top: -200px;
    right: -150px;
}

.hero-morphing-blob::after {
    width: 400px;
    height: 400px;
    background: linear-gradient(315deg, rgba(30, 58, 95, 0.4) 0%, rgba(212, 160, 60, 0.2) 100%);
    bottom: -150px;
    left: -100px;
    animation-delay: -7s;
    animation-direction: reverse;
}

@keyframes morphBlob {
    0%, 100% {
        border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
        transform: translate(0, 0) rotate(0deg) scale(1);
    }
    25% {
        border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%;
        transform: translate(20px, -20px) rotate(90deg) scale(1.1);
    }
    50% {
        border-radius: 50% 60% 30% 60% / 70% 40% 50% 40%;
        transform: translate(0, 20px) rotate(180deg) scale(0.95);
    }
    75% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
        transform: translate(-20px, -10px) rotate(270deg) scale(1.05);
    }
}

/* Floating tech symbols particles */
.hero-particles-tech {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.hero-particles-tech::before {
    content: '< > { } // ** () => []';
    position: absolute;
    font-family: 'Courier New', monospace;
    font-size: 24px;
    color: rgba(255, 255, 255, 0.06);
    white-space: nowrap;
    width: 200%;
    top: 20%;
    left: -50%;
    letter-spacing: 40px;
    animation: floatTechSymbols 40s linear infinite;
}

.hero-particles-tech::after {
    content: '[] {} <> // ** => ()';
    position: absolute;
    font-family: 'Courier New', monospace;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.04);
    white-space: nowrap;
    width: 200%;
    bottom: 25%;
    right: -50%;
    letter-spacing: 30px;
    animation: floatTechSymbols 50s linear infinite reverse;
}

@keyframes floatTechSymbols {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Gradient line accent */
.hero-gradient-line {
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, #D4A03C, #1E3A5F, #D4A03C);
    background-size: 200% 100%;
    border-radius: 2px;
    margin: 0 auto 1.5rem;
    animation: gradientLineShift 3s linear infinite;
}

@keyframes gradientLineShift {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* ---- Floating Particles (Multiple styles) ---- */
.hero-particles-circles::before,
.hero-particles-circles::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    animation: floatCircle 20s ease-in-out infinite;
}

.hero-particles-circles::before {
    width: 300px;
    height: 300px;
    top: -100px;
    right: -100px;
}

.hero-particles-circles::after {
    width: 200px;
    height: 200px;
    bottom: -50px;
    left: -50px;
    animation-delay: -10s;
}

@keyframes floatCircle {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(20px, 20px) rotate(5deg); }
    50% { transform: translate(0, 40px) rotate(0deg); }
    75% { transform: translate(-20px, 20px) rotate(-5deg); }
}

/* Diagonal lines variant */
.hero-particles-lines::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 100px,
        rgba(255, 255, 255, 0.02) 100px,
        rgba(255, 255, 255, 0.02) 101px
    );
    animation: slideLines 30s linear infinite;
}

@keyframes slideLines {
    0% { transform: translate(0, 0); }
    100% { transform: translate(100px, 100px); }
}

/* Dots grid variant */
.hero-particles-dots::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 40px 40px;
    animation: pulseDots 4s ease-in-out infinite;
}

@keyframes pulseDots {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

/* Glow orbs variant */
.hero-particles-glow::before,
.hero-particles-glow::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    animation: floatGlow 15s ease-in-out infinite;
}

.hero-particles-glow::before {
    width: 400px;
    height: 400px;
    background: rgba(212, 160, 60, 0.15);
    top: -150px;
    right: -100px;
}

.hero-particles-glow::after {
    width: 300px;
    height: 300px;
    background: rgba(30, 58, 95, 0.15);
    bottom: -100px;
    left: -50px;
    animation-delay: -7s;
}

@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); }
}

/* Text glow effect */
.hero-text-glow {
    text-shadow: 0 0 40px rgba(255, 255, 255, 0.3);
}

/* Icon pulse */
.hero-icon-pulse {
    animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.1); opacity: 1; }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .hero-v1-title, .hero-v1-subtitle, .hero-v1-content, .hero-v1-extra,
    .hero-v2-title, .hero-v2-subtitle, .hero-v2-content, .hero-v2-cta,
    .hero-v3-title, .hero-v3-subtitle, .hero-v3-content,
    .hero-v4-title, .hero-v4-subtitle, .hero-v4-content,
    .hero-v5-title, .hero-v5-subtitle, .hero-v5-content,
    .hero-v6-title, .hero-v6-subtitle, .hero-v6-content {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        animation: none !important;
    }
    .gradient-animated, .gradient-animated-slow,
    .hero-particles-circles, .hero-particles-lines,
    .hero-particles-dots, .hero-particles-glow {
        animation: none !important;
    }
}