/* ========================================================================== CSS Variables & Theming System ========================================================================== */:root{--bg-primary:#FAFAFC;--bg-secondary:rgba(255, 255, 255, 0.85);--bg-alt:rgba(241, 242, 246, 0.85);--text-primary:#050505;--text-secondary:#222222;--accent-color:#0066FF;--accent-gradient:linear-gradient(135deg, #0066FF, #00C6FF);--border-color:rgba(0, 0, 0, 0.15);--glass-bg:rgba(255, 255, 255, 0.65);--glass-border:rgba(0, 102, 255, 1);--shadow-sm:0 4px 12px rgba(0,0,0,0.05);--shadow-md:6px 6px 0px rgba(0, 102, 255, 0.4);--font-heading:'Outfit', sans-serif;--font-body:'Inter', sans-serif;--font-mono:'Space Mono', Consolas, monospace;--transition:all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);--radius-sm:0px;--radius-md:0px;--radius-lg:0px;--section-spacing:100px;}[data-theme="dark"]{--bg-primary:#0A0A0B;--bg-secondary:rgba(18, 18, 20, 0.4);--bg-alt:rgba(24, 24, 27, 0.4);--text-primary:#FFFFFF;--text-secondary:#A1A1B5;--accent-color:#3B82F6;--accent-gradient:linear-gradient(135deg, #3B82F6, #8B5CF6);--border-color:rgba(255, 255, 255, 0.08);--glass-bg:rgba(10, 10, 15, 0.2);--glass-border:rgba(59, 130, 246, 1);--shadow-sm:0 4px 12px rgba(0,0,0,0.4);--shadow-md:6px 6px 0px rgba(59, 130, 246, 0.8);}/* ========================================================================== Resets and Base Styles ========================================================================== */ *{margin:0;padding:0;box-sizing:border-box;}html{scroll-behavior:smooth;background-color:var(--bg-primary);}body{font-family:var(--font-body);background-color:transparent;color:var(--text-primary);line-height:1.6;transition:background-color 0.3s ease, color 0.3s ease;overflow-x:hidden;}h1, h2, h3, h4, h5, h6{font-family:var(--font-heading);color:var(--text-primary);font-weight:600;line-height:1.2;}a{color:var(--text-primary);text-decoration:none;transition:var(--transition);}img{max-width:100%;height:auto;display:block;}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 24px;}.section-padding{padding:var(--section-spacing) 0;}.bg-alt{background-color:var(--bg-alt);}.text-center{text-align:center;}.mb-4{margin-bottom:1.5rem;}.mb-5{margin-bottom:3rem;}.mt-4{margin-top:2rem;}.section-title{font-size:2.5rem;font-weight:800;margin-bottom:1rem;}.section-subtitle{font-size:1.125rem;color:var(--text-secondary);max-width:600px;margin:0 auto 3rem;}.gradient-text{background:var(--accent-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}.reveal{opacity:0;transform:translateY(30px);transition:all 0.8s cubic-bezier(0.5, 0, 0, 1);}.reveal.active{opacity:1;transform:translateY(0);}/* ========================================================================== Components:Buttons & Forms ========================================================================== */ .btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 28px;font-weight:500;font-family:var(--font-heading);border-radius:100px;cursor:pointer;transition:var(--transition);border:none;}.btn-primary{background:var(--text-primary);color:var(--bg-primary);}.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);background:var(--accent-color);color:#fff;}.btn-secondary{background:transparent;color:var(--text-primary);border:2px solid var(--border-color);}.btn-secondary:hover{border-color:var(--text-primary);background:transparent;}.btn-large{padding:16px 36px;font-size:1.125rem;}.btn-block{width:100%;}.btn-icon{background:transparent;border:none;color:var(--text-primary);cursor:pointer;padding:8px;display:flex;align-items:center;justify-content:center;transition:var(--transition);border-radius:50%;}.btn-icon:hover{background:var(--border-color);}.glass-card{background:var(--glass-bg);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:2px solid var(--glass-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);}/* ========================================================================== Layout:Navigation (PillNav) ========================================================================== */:root{--pill-nav-h:64px;--pill-base:rgba(15, 23, 42, 0.4);--pill-bg:transparent;--pill-text:var(--text-primary);--hover-text:#ffffff;--pill-pad-x:28px;--pill-gap:12px;}.pill-nav-container{position:fixed;top:24px;left:50%;transform:translateX(-50%);width:95%;max-width:1200px;z-index:1000;display:flex;justify-content:center;gap:24px;align-items:center;transition:var(--transition);}.pill-logo-container{display:flex;align-items:center;justify-content:center;height:var(--pill-nav-h);background:var(--pill-base);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255, 255, 255, 0.1);border-radius:9999px;padding:0 32px;box-shadow:0 8px 32px rgba(0, 0, 0, 0.2);}.pill-logo-container .logo-wrapper{display:flex;align-items:center;height:100%;transition:transform 0.3s ease;}.pill-logo-container .logo-wrapper:hover{transform:scale(1.05);}.pill-logo-container .logo-img{height:48px;width:auto;object-fit:contain;}.pill-nav{display:flex;align-items:center;justify-content:center;height:var(--pill-nav-h);background:var(--pill-base);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255, 255, 255, 0.1);border-radius:9999px;padding:8px 16px;gap:var(--pill-gap);box-shadow:0 8px 32px rgba(0, 0, 0, 0.2);}.pill-nav-links{display:none;align-items:center;list-style:none;margin:0;padding:0;gap:var(--pill-gap);height:100%;}@media (min-width:768px){.pill-nav-links{display:flex;}}.pill-link{position:relative;display:inline-flex;align-items:center;justify-content:center;height:calc(var(--pill-nav-h) - 16px);padding:0 var(--pill-pad-x);border-radius:9999px;color:var(--pill-text);text-decoration:none;font-weight:500;font-size:0.85rem;text-transform:uppercase;letter-spacing:1px;overflow:hidden;cursor:pointer;transition:color 0.3s ease;}.pill-link::before{content:'';position:absolute;bottom:-150%;left:50%;width:200%;aspect-ratio:1;background:var(--accent-gradient);border-radius:50%;transform:translateX(-50%) scale(0);transition:transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);transform-origin:bottom center;z-index:1;}.pill-link:hover::before, .pill-link.active-link::before{transform:translateX(-50%) scale(1);}.pill-link.active-link::before{background:var(--primary-color);}.pill-link .label-stack{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;overflow:hidden;height:1.1em;}.pill-link .pill-label, .pill-link .pill-label-hover{transition:transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);line-height:1.1em;}.pill-link .pill-label-hover{position:absolute;top:100%;left:0;color:var(--hover-text);width:100%;text-align:center;}.pill-link:hover .pill-label{transform:translateY(-100%);}.pill-link:hover .pill-label-hover{transform:translateY(-100%);}.pill-hamburger{display:flex;align-items:center;justify-content:center;height:calc(var(--pill-nav-h) - 16px);width:calc(var(--pill-nav-h) - 16px);border-radius:50%;background:transparent;border:none;color:var(--text-primary);cursor:pointer;font-size:1.2rem;transition:background 0.3s ease;}@media (min-width:768px){.pill-hamburger{display:none;}}.pill-hamburger:hover{background:var(--glass-card-bg);}.mobile-menu-dropdown{position:absolute;top:calc(100% + 12px);left:0;right:0;background:var(--pill-base);border-radius:20px;padding:10px;display:none;flex-direction:column;gap:5px;box-shadow:0 10px 30px -10px rgba(0,0,0,0.5);opacity:0;transform:translateY(-10px);transition:opacity 0.3s ease, transform 0.3s ease;}.mobile-menu-dropdown.active{display:flex;opacity:1;transform:translateY(0);}.mobile-menu-dropdown a{color:var(--text-primary);text-decoration:none;padding:12px 20px;border-radius:12px;font-weight:500;font-size:0.9rem;text-transform:uppercase;letter-spacing:1px;transition:background 0.3s ease, color 0.3s ease;}.mobile-menu-dropdown a:hover, .mobile-menu-dropdown a.active-link{background:var(--glass-card-bg);color:var(--accent-color);}/* ========================================================================== Sections ========================================================================== */ .hero{min-height:100vh;display:flex;align-items:center;padding-top:100px;position:relative;overflow:hidden;}.hero-container{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:center;}.hero-tagline{font-weight:600;color:var(--accent-color);margin-bottom:1rem;letter-spacing:1px;text-transform:uppercase;font-size:0.85rem;}.hero-title{font-size:4.5rem;margin-bottom:1.5rem;letter-spacing:-2px;}.hero-subtitle{font-size:1.25rem;color:var(--text-secondary);margin-bottom:2.5rem;max-width:500px;}.hero-cta-group{display:flex;gap:16px;}.hero-visual{position:relative;height:auto;min-height:500px;display:flex;justify-content:center;align-items:center;}.glass-orb{position:absolute;z-index:1;width:450px;height:550px;background:radial-gradient(circle, rgba(0, 102, 255, 0.3) 0%, rgba(0, 102, 255, 0) 70%);border-radius:50%;filter:blur(40px);opacity:0.8;animation:heartbeatOrb 2.5s infinite ease-in-out;}[data-theme="dark"] .glass-orb{background:radial-gradient(circle, rgba(59, 130, 246, 0.4) 0%, rgba(59, 130, 246, 0) 70%);}.visual-card{position:relative;z-index:2;width:250px;height:350px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0));backdrop-filter:blur(24px);}.visual-card .metrics{text-align:center;}.metrics .numbers{display:block;font-family:var(--font-heading);font-size:3rem;font-weight:800;color:var(--text-primary);}.metrics .label{font-size:0.9rem;color:var(--text-secondary);}.hero-profile-img{position:relative;z-index:2;width:100%;max-width:380px;aspect-ratio:3 / 4;object-fit:cover;object-position:center;border-radius:var(--radius-lg);box-shadow:0 20px 40px rgba(0,0,0,0.15);border:4px solid var(--accent-color);}@keyframes float{0%{transform:translateY(0px);}50%{transform:translateY(-30px);}100%{transform:translateY(0px);}}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}.about-text p{font-size:1.125rem;color:var(--text-secondary);}.skill-tags{display:flex;flex-wrap:wrap;gap:12px;}.tag{background:var(--bg-alt);padding:10px 20px;border-radius:100px;font-weight:500;font-family:var(--font-mono);font-size:0.9rem;border:2px solid var(--border-color);}.uppercase-label{font-size:0.8rem;text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary);margin-bottom:12px;font-weight:600;}.tool-tag{display:inline-block;padding:6px 14px;border:2px solid var(--border-color);border-radius:8px;font-family:var(--font-mono);font-size:0.85rem;margin:0 8px 8px 0;color:var(--text-secondary);}.services-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:24px;position:relative;z-index:1;}.services-glass-wrap{contain:layout style;position:relative;padding:48px 40px;border-radius:var(--radius-lg);background:var(--glass-bg);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1.5px solid var(--glass-border);box-shadow:var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.05);}.service-card{background:rgba(10, 10, 15, 0.35);border:1.5px solid rgba(59, 130, 246, 0.15);padding:40px 30px;border-radius:var(--radius-md);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);transition:var(--transition);position:relative;overflow:hidden;}.service-card::before{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg, transparent, rgba(42, 143, 255, 0.5), transparent);pointer-events:none;}.service-card:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(13, 74, 158, 0.25);border-color:rgba(42, 143, 255, 0.4);background:rgba(10, 10, 25, 0.5);}.service-icon{font-size:2.5rem;margin-bottom:24px;}.service-title{font-size:1.4rem;margin-bottom:12px;}.service-card p{color:var(--text-secondary);font-size:0.95rem;}.portfolio-filter{display:flex;justify-content:center;gap:16px;}.filter-btn{background:transparent;border:none;font-family:var(--font-heading);font-size:1.1rem;color:var(--text-secondary);cursor:pointer;padding:8px 16px;position:relative;transition:var(--transition);}.filter-btn.active, .filter-btn:hover{color:var(--text-primary);}.filter-btn.active::after{content:'';position:absolute;bottom:0;left:16px;right:16px;height:2px;background:var(--text-primary);}.portfolio-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(350px, 1fr));gap:40px;}.case-study-card{background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:var(--radius-md);overflow:hidden;transition:var(--transition);display:flex;flex-direction:column;}.case-study-card:hover{box-shadow:var(--shadow-md);transform:translateY(-5px);}.case-image{height:240px;display:flex;align-items:center;justify-content:center;}.image-text{font-family:var(--font-heading);font-weight:800;font-size:1.5rem;color:#fff;opacity:0.8;}.case-content{padding:30px;flex-grow:1;display:flex;flex-direction:column;}.case-category{font-size:0.8rem;text-transform:uppercase;font-weight:600;color:var(--accent-color);letter-spacing:1px;margin-bottom:10px;}.case-title{font-size:1.5rem;margin-bottom:16px;}.case-brief{color:var(--text-secondary);font-size:0.9rem;margin-bottom:24px;flex-grow:1;}.case-brief p{margin-bottom:8px;}.highlight-result{color:var(--text-primary);background:var(--bg-alt);padding:8px;border-radius:6px;margin-top:12px;}.case-link{display:inline-flex;align-items:center;gap:8px;font-weight:600;}.case-link:hover{color:var(--accent-color);}.testimonial-block{max-width:800px;margin:0 auto;}.quote-icon{color:var(--accent-color);opacity:0.2;margin-bottom:24px;}.testimonial-text{font-family:var(--font-heading);font-size:1.75rem;line-height:1.4;margin-bottom:30px;}.testimonial-author{font-weight:600;color:var(--text-secondary);letter-spacing:1px;}.flex-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:3rem;}.blog-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 320px), 1fr));gap:30px;}.blog-card{border-radius:var(--radius-md);overflow:hidden;transition:var(--transition);background:rgba(255, 255, 255, 0.03);border:2px solid var(--glass-border);backdrop-filter:blur(24px);}.blog-card:hover{transform:translateY(-5px);box-shadow:0 10px 25px rgba(0, 102, 255, 0.15);border-color:rgba(0, 102, 255, 0.3);}.blog-card:hover .blog-image{transform:scale(1.05);}.blog-image{height:220px;transition:var(--transition);border-bottom:1px solid var(--glass-border);}.blog-content{padding:30px;}.blog-meta{font-size:0.85rem;font-weight:600;color:var(--text-secondary);display:flex;justify-content:space-between;margin-bottom:12px;}.blog-title{font-size:1.35rem;margin-bottom:12px;line-height:1.3;}.blog-title a:hover{color:var(--accent-color);}.blog-excerpt{color:var(--text-secondary);font-size:0.95rem;}.contact-container{display:grid;grid-template-columns:1fr 1fr;gap:60px;}.contact-info{padding-top:20px;}.contact-info p{font-size:1.1rem;color:var(--text-secondary);}.contact-methods{margin-top:40px;}.method{display:flex;align-items:center;gap:16px;margin-bottom:20px;font-size:1.1rem;font-weight:500;}.method svg{color:var(--accent-color);}.form-group{margin-bottom:24px;}.form-group label{display:block;margin-bottom:8px;font-weight:500;font-size:0.9rem;color:var(--text-secondary);}.contact-form{padding:40px;}.form-group input, .form-group textarea{width:100%;padding:14px 16px;background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-body);transition:var(--transition);}.form-group input:focus, .form-group textarea:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 3px rgba(0, 102, 255, 0.1);}.footer{background:transparent;border-top:1px solid var(--glass-border);position:relative;overflow:hidden;}.footer::before{content:'';position:absolute;top:-100px;right:-100px;width:300px;height:300px;background:radial-gradient(circle, rgba(0, 102, 255, 0.05) 0%, transparent 70%);border-radius:50%;pointer-events:none;}.footer-grid{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:40px;margin-bottom:40px;}.footer-brand{flex:1 1 300px;}.footer-brand .logo-img{height:36px;margin-bottom:16px;filter:drop-shadow(0 4px 12px rgba(0, 102, 255, 0.1));}.footer-desc{color:var(--text-secondary);font-size:1.05rem;line-height:1.6;max-width:350px;}.footer-links{flex:1 1 200px;}.footer-links ul{list-style:none;display:flex;gap:30px;justify-content:center;}.footer-links a{color:var(--text-primary);font-weight:500;transition:var(--transition);position:relative;padding-bottom:4px;}.footer-links a::after{content:'';position:absolute;bottom:0;left:0;width:0%;height:2px;background:var(--accent-gradient);transition:width 0.3s ease;}.footer-links a:hover::after{width:100%;}.footer-social{flex:1 1 200px;display:flex;gap:16px;justify-content:flex-end;}.social-icon{display:flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:50%;background:rgba(255, 255, 255, 0.03);border:2px solid var(--glass-border);color:var(--text-primary);backdrop-filter:blur(24px);transition:all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);}.social-icon:hover{background:var(--accent-gradient);border-color:transparent;color:#fff;transform:translateY(-6px) scale(1.1);box-shadow:0 10px 25px rgba(0, 102, 255, 0.3);}.footer-bottom{text-align:center;border-top:1px solid var(--border-color);padding:30px 0;color:var(--text-secondary);font-size:0.95rem;letter-spacing:0.5px;}/* ========================================================================== Inner Pages (Blog Content, Archive) ========================================================================== */ .pt-top{padding-top:140px;}.pb-bottom{padding-bottom:80px;}.container-narrow{max-width:800px;}.blog-search-filter{margin:40px auto;}.search-bar{position:relative;max-width:500px;margin:0 auto 30px;}.search-bar svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--text-secondary);}.search-bar input{width:100%;padding:16px 20px 16px 48px;background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:100px;font-size:1rem;color:var(--text-primary);font-family:var(--font-body);transition:var(--transition);}.search-bar input:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 3px rgba(0, 102, 255, 0.1);}.blog-categories{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;}.cat-btn{background:var(--bg-secondary);border:2px solid var(--border-color);color:var(--text-secondary);padding:8px 20px;border-radius:100px;cursor:pointer;font-size:0.9rem;font-weight:500;transition:var(--transition);}.cat-btn:hover, .cat-btn.active{background:var(--text-primary);color:var(--bg-primary);border-color:var(--text-primary);}.post-header{margin-bottom:40px;}.post-title{font-size:3rem;margin-bottom:20px;line-height:1.2;letter-spacing:-1px;}.post-subtitle{font-size:1.25rem;color:var(--text-secondary);line-height:1.5;}.blog-category.tag-link{background:var(--accent-color);color:#fff;padding:4px 12px;border-radius:100px;font-size:0.8rem;font-weight:600;text-transform:uppercase;margin-right:12px;}.flex-center{display:flex;align-items:center;justify-content:center;}.text-left{text-align:left;}.single-post .post-content{font-size:1.125rem;line-height:1.8;padding:60px;}.post-content h2{font-size:2rem;margin:40px 0 20px;}.post-content h3{font-size:1.5rem;margin:30px 0 15px;}.post-content p{margin-bottom:24px;color:var(--text-secondary);}.post-content ul, .post-content ol{margin-bottom:24px;padding-left:24px;color:var(--text-secondary);}.post-content li{margin-bottom:10px;}.post-content strong{color:var(--text-primary);font-weight:600;}.pull-quote{font-family:var(--font-heading);font-size:1.5rem;color:var(--text-primary);border-left:4px solid var(--accent-color);padding:20px 0 20px 30px;margin:40px 0;font-weight:600;background:linear-gradient(90deg, var(--bg-alt), transparent);}.callout-box{padding:30px;border-radius:var(--radius-md);margin:40px 0;border-left:4px solid var(--accent-color);}.callout-box h4{margin-top:0;margin-bottom:12px;}.callout-box p{margin-bottom:0;}.content-divider{border:0;height:1px;background:var(--border-color);}.read-more{font-weight:600;color:var(--accent-color);margin-top:auto;display:inline-block;}body{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='28' viewBox='0 0 10 14' shape-rendering='crispEdges'%3E%3Cpolygon points='0,0 0,11 3,8 5,12 7,11 5,7 9,7' fill='%231A6FD4'/%3E%3Cpolygon points='0,0 0,12 3,9 5,13 7,12 5,8 9,8' fill='none' stroke='%23051829' stroke-width='0.8'/%3E%3C/svg%3E") 0 0, default;}a, button, input, textarea, select, .btn, label[for], [role="button"]{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='28' viewBox='0 0 10 14' shape-rendering='crispEdges'%3E%3Cpolygon points='0,0 0,11 3,8 5,12 7,11 5,7 9,7' fill='%232A8FFF'/%3E%3Cpolygon points='0,0 0,12 3,9 5,13 7,12 5,8 9,8' fill='none' stroke='%23051829' stroke-width='0.8'/%3E%3C/svg%3E") 0 0, pointer;}.cursor-glow{display:none !important;}.newsletter-form{display:flex;gap:12px;max-width:500px;margin:0 auto;}.newsletter-input{flex-grow:1;padding:14px 20px;background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:100px;color:var(--text-primary);font-family:var(--font-body);}/* ========================================================================== Interactive Glow Effect ========================================================================== */ .cursor-glow{position:fixed;top:-1000px;left:-1000px;width:150px;height:150px;background:radial-gradient(circle, rgba(0, 102, 255, 0.25) 0%, rgba(0, 102, 255, 0) 70%);border-radius:50%;transform:translate(-50%, -50%);pointer-events:none;z-index:9999;transition:opacity 0.5s ease;will-change:top, left, transform;}[data-theme="dark"] .cursor-glow{background:radial-gradient(circle, rgba(59, 130, 246, 0.35) 0%, rgba(59, 130, 246, 0) 70%);}@keyframes heartbeatGlow{0%{transform:translate(-50%, -50%) scale(1);opacity:0.8;}15%{transform:translate(-50%, -50%) scale(1.15);opacity:1;}30%{transform:translate(-50%, -50%) scale(1);opacity:0.8;}45%{transform:translate(-50%, -50%) scale(1.15);opacity:1;}100%{transform:translate(-50%, -50%) scale(1);opacity:0.8;}}@keyframes heartbeatOrb{0%{transform:scale(1);opacity:0.6;}15%{transform:scale(1.1);opacity:1;}30%{transform:scale(1);opacity:0.6;}45%{transform:scale(1.1);opacity:1;}100%{transform:scale(1);opacity:0.6;}}/* ========================================================================== Testimonial Slider ========================================================================== */ .testimonial-slider-container{position:relative;max-width:800px;margin:0 auto;overflow:hidden;}.testimonial-slide{display:none;opacity:0;transition:opacity 0.5s ease-in-out;}.testimonial-slide.active{display:block;opacity:1;animation:fadeInSlide 0.5s forwards;}@keyframes fadeInSlide{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}.testimonial-controls{gap:20px;}.slider-btn{background:var(--bg-primary);border:2px solid var(--glass-border);color:var(--text-primary);width:40px;height:40px;border-radius:50%;cursor:pointer;transition:var(--transition);display:flex;justify-content:center;align-items:center;}.slider-btn:hover{background:var(--accent-gradient);color:white;border-color:transparent;}.slider-dots{display:flex;gap:8px;}.slider-dots .dot{width:10px;height:10px;border-radius:50%;background:var(--glass-border);cursor:pointer;transition:var(--transition);}.slider-dots .dot.active{background:var(--accent-color);transform:scale(1.2);}/* ========================================================================== Certificate Slider ========================================================================== */ .cert-slider-container{position:relative;max-width:800px;margin:40px auto 0;overflow:hidden;}.cert-slide{display:none;opacity:0;transition:opacity 0.5s ease-in-out;}.cert-slide.active{display:block;opacity:1;animation:fadeInSlide 0.5s forwards;}/* ========================================================================== Responsive Design ========================================================================== */ @media (max-width:992px){.hero-container{grid-template-columns:1fr;text-align:center;}.hero-cta-group{justify-content:center;}.hero-title{font-size:3.5rem;}.hero-subtitle{margin:0 auto 2.5rem;}.about-grid, .contact-container{grid-template-columns:1fr;}.flex-header{flex-direction:column;align-items:flex-start;gap:20px;}}@media (max-width:768px){.services-glass-wrap{padding:28px 18px;border-radius:var(--radius-md);}.services-grid{grid-template-columns:repeat(2, 1fr);gap:16px;}.nav-links{display:none;}.hero-title{font-size:2.8rem;}.section-title{font-size:2rem;}.footer-links ul{flex-direction:column;gap:12px;}.flex-footer{flex-direction:column;}.contact-form{padding:24px;}}.post-content{font-size:1.1rem;line-height:1.8;}.post-content h1, .post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6{margin-top:2em;margin-bottom:0.75em;font-weight:700;}.post-content h2{font-size:1.8rem;border-bottom:1px solid var(--border-color);padding-bottom:0.3em;}.post-content h3{font-size:1.5rem;}.post-content p{margin-bottom:1.25em;color:var(--text-secondary);}.post-content ul, .post-content ol{margin:1.25em 0;padding-left:2em;color:var(--text-secondary);}.post-content li{margin:0.5em 0;}.post-content blockquote{border-left:4px solid var(--accent-color);margin:1.5em 0;padding:0.5em 0 0.5em 1.5em;font-style:italic;background:rgba(0, 102, 255, 0.05);border-radius:0 var(--radius-sm) var(--radius-sm) 0;}.post-content code{background:var(--bg-alt);padding:0.2em 0.4em;border-radius:4px;font-family:'JetBrains Mono', monospace;font-size:0.9em;}.post-content pre{background:var(--bg-alt);padding:1.25em;border-radius:var(--radius-sm);overflow-x:auto;margin:1.5em 0;}.post-content pre code{background:none;padding:0;}.post-content img{max-width:100%;border-radius:var(--radius-md);margin:1.5em 0;}.post-content hr{border:none;height:1px;background:var(--border-color);margin:2em 0;}.post-content table{width:100%;border-collapse:collapse;margin:1.5em 0;}.post-content th, .post-content td{border:2px solid var(--border-color);padding:0.75em;text-align:left;}.post-content th{background:var(--bg-alt);font-weight:600;}.post-content{font-size:1.1rem;line-height:1.8;}.post-content h1, .post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6{margin-top:2em;margin-bottom:0.75em;font-weight:700;}.post-content h2{font-size:1.8rem;border-bottom:1px solid var(--border-color);padding-bottom:0.3em;}.post-content h3{font-size:1.5rem;}.post-content p{margin-bottom:1.25em;color:var(--text-secondary);}.post-content ul, .post-content ol{margin:1.25em 0;padding-left:2em;color:var(--text-secondary);}.post-content li{margin:0.5em 0;}.post-content blockquote{border-left:4px solid var(--accent-color);margin:1.5em 0;padding:0.5em 0 0.5em 1.5em;font-style:italic;background:rgba(0, 102, 255, 0.05);border-radius:0 var(--radius-sm) var(--radius-sm) 0;}.post-content code{background:var(--bg-alt);padding:0.2em 0.4em;border-radius:4px;font-family:'JetBrains Mono', monospace;font-size:0.9em;}.post-content pre{background:var(--bg-alt);padding:1.25em;border-radius:var(--radius-sm);overflow-x:auto;margin:1.5em 0;}.post-content pre code{background:none;padding:0;}.post-content img{max-width:100%;border-radius:var(--radius-md);margin:1.5em 0;}.post-content hr{border:none;height:1px;background:var(--border-color);margin:2em 0;}.post-content table{width:100%;border-collapse:collapse;margin:1.5em 0;}.post-content th, .post-content td{border:2px solid var(--border-color);padding:0.75em;text-align:left;}.post-content th{background:var(--bg-alt);font-weight:600;}@media (max-width:768px){.navbar.scrolled, .glass-card, .visual-card, .blog-card, .service-card, .services-glass-wrap, .case-study-card, .social-icon, .contact-form, .cert-slide, .certificate-card, .radiant-input-wrapper{backdrop-filter:none !important;-webkit-backdrop-filter:none !important;}.radiant-input-wrapper.is-active::before, .radiant-input-wrapper.is-active .radiant-input-border, .radiant-input-wrapper.is-one-shot::before, .radiant-input-wrapper.is-one-shot .radiant-input-border{animation:none !important;opacity:0 !important;}}/* ========================================================================== Radiant Search Bar — Gemini-style comet outline Palette:#051829 → #0A3060 → #0D4A9E → #1A6FD4 → #2A8FFF → #1A6FD4 → #0D4A9E Activates ONLY on focus / while typing (.is-active added by JS) ========================================================================== */ @property --angle{syntax:"<angle>";inherits:false;initial-value:0deg;}@keyframes gemini-spin{to{--angle:360deg;}}@keyframes gemini-pulse{0%, 100%{filter:blur(14px) brightness(1);}50%{filter:blur(18px) brightness(1.4);}}.radiant-input-wrapper{position:relative;max-width:500px;margin:0 auto 30px;border-radius:100px;--border-size:2.5px;background:var(--bg-secondary);box-shadow:0 0 0 1.5px rgba(13, 74, 158, 0.25);transition:box-shadow 0.5s ease;}.radiant-input-wrapper::before{content:"";position:absolute;inset:-4.5px;border-radius:inherit;background:conic-gradient( from var(--angle) at 50% 50%, #051829 0deg, #051829 60deg, #0A3060 90deg, #0D4A9E 130deg, #1A6FD4 155deg, #2A8FFF 165deg, #1A6FD4 175deg, #0D4A9E 210deg, #051829 260deg, #051829 360deg );z-index:-1;filter:blur(10.5px);opacity:0;transition:opacity 0.5s ease;pointer-events:none;}.radiant-input-border{position:absolute;inset:0;border-radius:inherit;padding:var(--border-size);background:conic-gradient( from var(--angle) at 50% 50%, #051829 0deg, #051829 60deg, #0A3060 90deg, #0D4A9E 130deg, #1A6FD4 155deg, #2A8FFF 165deg, #1A6FD4 175deg, #0D4A9E 210deg, #051829 260deg, #051829 360deg );-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);-webkit-mask-composite:destination-out;mask-composite:exclude;pointer-events:none;z-index:1;will-change:transform;opacity:0;transition:opacity 0.5s ease;}.radiant-input-wrapper.is-active{box-shadow:0 0 0 1.5px rgba(42, 143, 255, 0.15), 0 10px 32px rgba(13, 74, 158, 0.3);}.radiant-input-wrapper.is-active::before{opacity:1;animation:gemini-spin 2.5s linear infinite, gemini-pulse 3s ease-in-out infinite;}.radiant-input-wrapper.is-active .radiant-input-border{opacity:1;animation:gemini-spin 2.5s linear infinite;}.radiant-input-wrapper.is-fading::before, .radiant-input-wrapper.is-fading .radiant-input-border{opacity:0;transition:opacity 0.8s ease-out;}.radiant-input-wrapper.is-one-shot{box-shadow:0 0 0 1.5px rgba(42, 143, 255, 0.12), 0 8px 24px rgba(13, 74, 158, 0.2);}.radiant-input-wrapper.is-one-shot::before{opacity:1;animation:gemini-spin 2.5s linear 1 forwards;}.radiant-input-wrapper.is-one-shot .radiant-input-border{opacity:1;animation:gemini-spin 2.5s linear 1 forwards;}.search-inner{position:relative;z-index:2;display:flex;align-items:center;border-radius:inherit;background:var(--bg-secondary);padding:0;}.search-inner svg{position:absolute;left:20px;color:var(--text-secondary);transition:color 0.4s ease;}.radiant-input-wrapper.is-active .search-inner svg{color:#2A8FFF;}.search-inner input{width:100%;padding:16px 20px 16px 50px;background:transparent;border:none;color:var(--text-primary);font-size:1rem;font-family:var(--font-body);caret-color:#2A8FFF;}.search-inner input:focus{outline:none;}.btn{position:relative;overflow:hidden;}.btn::before{content:"";position:absolute;top:var(--y, 50%);left:var(--x, 50%);width:200px;height:200px;background:radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 50%);transform:translate(-50%, -50%);opacity:0;transition:opacity 0.3s ease;pointer-events:none;z-index:0;}.btn:hover::before{opacity:1;}.btn > *{position:relative;z-index:1;}.btn:not(.slider-btn) svg, .btn-arrow{transition:transform 0.3s ease;}.btn:not(.slider-btn):hover svg, .btn:hover .btn-arrow{transform:translateX(4px);}.pt-navbar{padding-top:100px;}.breadcrumb{display:flex;flex-wrap:wrap;list-style:none;padding:0;margin:0 0 20px 0;font-size:0.95rem;font-family:var(--font-body);}.breadcrumb.justify-content-center{justify-content:center;}.breadcrumb-item{color:var(--text-secondary);}.breadcrumb-item a{color:var(--text-secondary);text-decoration:none;transition:color 0.2s ease;}.breadcrumb-item a:hover{color:var(--accent-color);}.breadcrumb-item + .breadcrumb-item::before{content:"›";padding:0 10px;color:var(--text-secondary);font-size:1.2rem;vertical-align:middle;}.breadcrumb-item.active{color:var(--text-primary);font-weight:500;}

/* ===== NAVBAR BASE & BREAKPOINTS ===== */
.navbar{position:fixed;top:0;left:0;width:100%;z-index:1000;padding:0 24px;height:72px;display:flex;align-items:center;background:rgba(10,10,15,0.5);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,0.06);transition:box-shadow 0.3s ease,background 0.3s ease;}.navbar .container{display:flex;}.navbar.scrolled{background:rgba(10,10,15,0.85);box-shadow:0 4px 30px rgba(0,0,0,0.4);}.navbar .nav-content{display:flex;align-items:center;justify-content:space-between;width:100%;}.navbar .nav-links{display:flex;gap:32px;align-items:center;}.navbar .nav-links a{font-size:0.9rem;font-weight:500;color:var(--text-secondary);letter-spacing:0.5px;transition:color 0.2s;}.navbar .nav-links a:hover,.navbar .nav-links a.active-link{color:var(--text-primary);}.navbar .logo-img{height:40px;width:auto;}@media (min-width:769px){.navbar{display:flex !important;}.pill-nav-container{display:none !important;}}@media (max-width:768px){.navbar{display:none !important;}.pill-nav-container{display:flex !important;}}


/* ========================================================================== Performance Architecture � Core Web Vitals (LCP, CLS, INP) ========================================================================== */

/* -- LCP: Guarantee hero image layout before paint ---------- */
.hero-profile-img{aspect-ratio:515/1024;width:100%;max-width:380px;height:auto;contain:layout;}

/* -- CLS: Lock sizes for dynamic grid containers ------------ */
.blog-grid,.portfolio-grid,.services-grid{contain:layout style;}
.blog-card,.service-card,.case-study-card{contain:layout style;}

/* -- CLS: Reserve logo image dimensions to prevent jumps ---- */
.logo-img,.navbar .logo-img{height:40px;width:auto;aspect-ratio:300/127;}
.pill-logo-container .logo-img{height:48px;width:auto;aspect-ratio:300/127;}
.footer-brand .logo-img{height:36px;width:auto;aspect-ratio:300/127;}

/* -- content-visibility: defer off-screen section rendering -- */
.process,.why-choose-me,.contact-cta,.work-preview,.blog-archive,.case-study-grid,.cert-slider-container,.testimonial-slider-container{content-visibility:auto;contain-intrinsic-size:0 400px;}

/* -- will-change: only on actively animating elements -------- */
.glass-orb{will-change:transform;}.reveal{will-change:transform,opacity;}.reveal.active{will-change:auto;}.pill-link::before{will-change:transform;}

/* -- INP: Composite interactive elements on own GPU layer ---- */
.btn,.pill-link,.social-icon,.filter-btn,.cat-btn{transform:translateZ(0);}

/* -- Reduce paint area for fixed full-screen elements -------- */
#terminal-background{contain:strict;}


/* ========================================================================== Desktop Performance Fixes � v20260511 ========================================================================== */

/* -- DESKTOP: Remove expensive backdrop-filter from cards ----
   backdrop-filter on 8+ overlapping glass elements causes GPU
   paint storms. Keep blur ONLY on the navbar where it matters. */
@media (min-width: 769px) {
  .service-card,
  .blog-card,
  .case-study-card,
  .services-glass-wrap,
  .social-icon,
  .contact-form,
  .cert-slide,
  .certificate-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* -- content-visibility: remove from JS-rendered sections ----
   work-preview uses JS to inject cards. With content-visibility:auto
   the section collapses before JS runs causing CLS.            */
.work-preview {
  content-visibility: visible !important;
  contain-intrinsic-size: unset !important;
}

/* -- Compositing: use contain:paint on fixed bg elements -----
   Tells browser not to include these in layout recalculations */
#terminal-background {
  contain: strict;
  will-change: auto;
}
#ambient-starfield {
  contain: strict;
}

/* -- INP: Only promote hover state, not static state ---------
   transform:translateZ(0) on static elements wastes GPU memory */
.btn,
.pill-link,
.social-icon,
.filter-btn,
.cat-btn {
  transform: none;
}
.btn:hover,
.pill-link:hover,
.social-icon:hover {
  will-change: transform;
}