:root{--primary-color:#5e35b1;--primary-light:#7c4dff;--primary-dark:#4527a0;--secondary-color:#00bfa5;--accent-color:#ff6e40;--text-primary:#1a1a2e;--text-secondary:#4a5568;--text-light:#6c6c8a;--bg-primary:#ffffff;--bg-secondary:#f8f9fc;--bg-tertiary:#f0f2f5;--gradient-primary:linear-gradient(135deg,var(--primary-color),var(--primary-light));--gradient-hero:linear-gradient(135deg,rgba(94,53,177,0.95),rgba(124,77,255,0.9));--shadow-sm:0 2px 8px rgba(0,0,0,0.08);--shadow-md:0 4px 20px rgba(0,0,0,0.12);--border-radius:12px;--transition-fast:0.2s ease;--transition-normal:0.3s ease;--font-primary:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif } [data-theme="dark"]{--text-primary:#e8e8f0;--text-secondary:#b8b8c8;--text-light:#8888a0;--bg-primary:#0d0d1a;--bg-secondary:#16162a;--bg-tertiary:#1e1e38;--shadow-sm:0 2px 8px rgba(0,0,0,0.3);--shadow-md:0 4px 20px rgba(0,0,0,0.4) } @media(prefers-color-scheme:dark){[data-theme="auto"]{--text-primary:#e8e8f0;--text-secondary:#b8b8c8;--text-light:#8888a0;--bg-primary:#0d0d1a;--bg-secondary:#16162a;--bg-tertiary:#1e1e38 } } *{margin:0;padding:0;box-sizing:border-box } html{scroll-behavior:smooth } body{font-family:var(--font-primary);line-height:1.6;color:var(--text-primary);background:var(--bg-primary);overflow-x:hidden } .container{max-width:1200px;margin:0 auto;padding:0 2rem } .navbar{position:fixed;top:0;left:0;right:0;z-index:1000;padding:1rem 2rem;background:rgba(255,255,255,0.95);backdrop-filter:blur(10px);box-shadow:var(--shadow-sm);transition:var(--transition-normal) } [data-theme="dark"] .navbar{background:rgba(13,13,26,0.95) } @media(prefers-color-scheme:dark){[data-theme="auto"] .navbar{background:rgba(13,13,26,0.95) } } .nav-container{max-width:1400px;margin:0 auto;display:flex;justify-content:space-between;align-items:center } .nav-logo{font-size:1.5rem;font-weight:700;color:var(--primary-color);text-decoration:none } .nav-menu{display:flex;gap:2rem;align-items:center;list-style:none } .nav-link{color:var(--text-primary);text-decoration:none;font-weight:500;transition:var(--transition-fast);position:relative } .hero{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;padding:6rem 2rem 4rem;overflow:hidden } .hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(0.7) saturate(1.2);transform-origin:center;z-index:0;opacity:0 } .hero-bg-1{background-image:url('../img/codemotion2025.webp');animation:heroFade 24s linear infinite } .hero-bg-2{background-image:url('../img/codemotion2025-2.webp');animation:heroFade 24s linear infinite;animation-delay:6s } .hero-bg-3{background-image:url('../img/codemotion2025-3.webp');animation:heroFade 24s linear infinite;animation-delay:12s } .hero-bg-4{background-image:url('../img/codemotion2024.webp');animation:heroFade 24s linear infinite;animation-delay:18s } @keyframes heroFade{0%,100%{opacity:0;transform:scale(1) } 4.17%,25%{opacity:1;transform:scale(1.05) } 29.17%,100%{opacity:0;transform:scale(1.1) } } .hero-overlay{position:absolute;inset:0;background:var(--gradient-hero);z-index:1 } .hero-content{position:relative;z-index:2;text-align:center;max-width:900px;color:white } .hero-greeting{font-size:1.25rem;font-weight:500;opacity:0.9;margin-bottom:0.5rem } .hero-title{font-size:clamp(2.5rem,6vw,4.5rem);font-weight:800;line-height:1.1;margin-bottom:1rem } .hero-subtitle{font-size:clamp(1rem,2vw,1.25rem);opacity:0.9;margin-bottom:1.5rem } .hero-description{font-size:1.1rem;opacity:0.85;margin-bottom:2rem;max-width:600px;margin-left:auto;margin-right:auto } .hero-cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap } .btn{display:inline-flex;align-items:center;gap:0.5rem;padding:0.875rem 2rem;border-radius:50px;font-weight:600;text-decoration:none;transition:var(--transition-normal);border:none;cursor:pointer } .btn-primary{background:white;color:var(--primary-color) } .btn-secondary{background:transparent;color:white;border:2px solid rgba(255,255,255,0.5) } @media(max-width:768px){.nav-menu{display:none } .hero{padding:5rem 1rem 3rem } } @font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/Inter-Light.woff2') format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/Inter-Regular.woff2') format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/Inter-Medium.woff2') format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/Inter-SemiBold.woff2') format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/Inter-Bold.woff2') format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/Inter-ExtraBold.woff2') format('woff2')} .pagefind-ui__result.svelte-j9e30.svelte-j9e30{list-style-type:none;display:flex;align-items:flex-start;gap:min(calc(40px * var(--pagefind-ui-scale)),3%);padding:calc(30px * var(--pagefind-ui-scale)) 0 calc(40px * var(--pagefind-ui-scale));border-top:solid var(--pagefind-ui-border-width) var(--pagefind-ui-border)}.pagefind-ui__result.svelte-j9e30.svelte-j9e30:last-of-type{border-bottom:solid var(--pagefind-ui-border-width) var(--pagefind-ui-border)}.pagefind-ui__result-thumb.svelte-j9e30.svelte-j9e30{width:min(30%,calc((30% - (100px * var(--pagefind-ui-scale))) * 100000));max-width:calc(120px * var(--pagefind-ui-scale));margin-top:calc(10px * var(--pagefind-ui-scale));aspect-ratio:var(--pagefind-ui-image-box-ratio);position:relative}.pagefind-ui__result-image.svelte-j9e30.svelte-j9e30{display:block;position:absolute;left:50%;transform:translate(-50%);font-size:0;width:auto;height:auto;max-width:100%;max-height:100%;border-radius:var(--pagefind-ui-image-border-radius)}.pagefind-ui__result-inner.svelte-j9e30.svelte-j9e30{flex:1;display:flex;flex-direction:column;align-items:flex-start;margin-top:calc(10px * var(--pagefind-ui-scale))}.pagefind-ui__result-title.svelte-j9e30.svelte-j9e30{display:inline-block;font-weight:700;font-size:calc(21px * var(--pagefind-ui-scale));margin-top:0;margin-bottom:0}.pagefind-ui__result-title.svelte-j9e30 .pagefind-ui__result-link.svelte-j9e30{color:var(--pagefind-ui-text);text-decoration:none}.pagefind-ui__result-title.svelte-j9e30 .pagefind-ui__result-link.svelte-j9e30:hover{text-decoration:underline}.pagefind-ui__result-excerpt.svelte-j9e30.svelte-j9e30{display:inline-block;font-weight:400;font-size:calc(16px * var(--pagefind-ui-scale));margin-top:calc(4px * var(--pagefind-ui-scale));margin-bottom:0;min-width:calc(250px * var(--pagefind-ui-scale))}.pagefind-ui__loading.svelte-j9e30.svelte-j9e30{color:var(--pagefind-ui-text);background-color:var(--pagefind-ui-text);border-radius:var(--pagefind-ui-border-radius);opacity:.1;pointer-events:none}.pagefind-ui__result-tags.svelte-j9e30.svelte-j9e30{list-style-type:none;padding:0;display:flex;gap:calc(20px * var(--pagefind-ui-scale));flex-wrap:wrap;margin-top:calc(20px * var(--pagefind-ui-scale))}.pagefind-ui__result-tag.svelte-j9e30.svelte-j9e30{padding:calc(4px * var(--pagefind-ui-scale)) calc(8px * var(--pagefind-ui-scale));font-size:calc(14px * var(--pagefind-ui-scale));border-radius:var(--pagefind-ui-border-radius);background-color:var(--pagefind-ui-tag)}.pagefind-ui__result.svelte-4xnkmf.svelte-4xnkmf{list-style-type:none;display:flex;align-items:flex-start;gap:min(calc(40px * var(--pagefind-ui-scale)),3%);padding:calc(30px * var(--pagefind-ui-scale)) 0 calc(40px * var(--pagefind-ui-scale));border-top:solid var(--pagefind-ui-border-width) var(--pagefind-ui-border)}.pagefind-ui__result.svelte-4xnkmf.svelte-4xnkmf:last-of-type{border-bottom:solid var(--pagefind-ui-border-width) var(--pagefind-ui-border)}.pagefind-ui__result-nested.svelte-4xnkmf.svelte-4xnkmf{display:flex;flex-direction:column;padding-left:calc(20px * var(--pagefind-ui-scale))}.pagefind-ui__result-nested.svelte-4xnkmf.svelte-4xnkmf:first-of-type{padding-top:calc(10px * var(--pagefind-ui-scale))}.pagefind-ui__result-nested.svelte-4xnkmf .pagefind-ui__result-link.svelte-4xnkmf{font-size:.9em;position:relative}.pagefind-ui__result-nested.svelte-4xnkmf .pagefind-ui__result-link.svelte-4xnkmf:before{content:"\2937 ";position:absolute;top:0;right:calc(100% + .1em)}.pagefind-ui__result-thumb.svelte-4xnkmf.svelte-4xnkmf{width:min(30%,calc((30% - (100px * var(--pagefind-ui-scale))) * 100000));max-width:calc(120px * var(--pagefind-ui-scale));margin-top:calc(10px * var(--pagefind-ui-scale));aspect-ratio:var(--pagefind-ui-image-box-ratio);position:relative}.pagefind-ui__result-image.svelte-4xnkmf.svelte-4xnkmf{display:block;position:absolute;left:50%;transform:translate(-50%);font-size:0;width:auto;height:auto;max-width:100%;max-height:100%;border-radius:var(--pagefind-ui-image-border-radius)}.pagefind-ui__result-inner.svelte-4xnkmf.svelte-4xnkmf{flex:1;display:flex;flex-direction:column;align-items:flex-start;margin-top:calc(10px * var(--pagefind-ui-scale))}.pagefind-ui__result-title.svelte-4xnkmf.svelte-4xnkmf{display:inline-block;font-weight:700;font-size:calc(21px * var(--pagefind-ui-scale));margin-top:0;margin-bottom:0}.pagefind-ui__result-title.svelte-4xnkmf .pagefind-ui__result-link.svelte-4xnkmf{color:var(--pagefind-ui-text);text-decoration:none}.pagefind-ui__result-title.svelte-4xnkmf .pagefind-ui__result-link.svelte-4xnkmf:hover{text-decoration:underline}.pagefind-ui__result-excerpt.svelte-4xnkmf.svelte-4xnkmf{display:inline-block;font-weight:400;font-size:calc(16px * var(--pagefind-ui-scale));margin-top:calc(4px * var(--pagefind-ui-scale));margin-bottom:0;min-width:calc(250px * var(--pagefind-ui-scale))}.pagefind-ui__loading.svelte-4xnkmf.svelte-4xnkmf{color:var(--pagefind-ui-text);background-color:var(--pagefind-ui-text);border-radius:var(--pagefind-ui-border-radius);opacity:.1;pointer-events:none}.pagefind-ui__result-tags.svelte-4xnkmf.svelte-4xnkmf{list-style-type:none;padding:0;display:flex;gap:calc(20px * var(--pagefind-ui-scale));flex-wrap:wrap;margin-top:calc(20px * var(--pagefind-ui-scale))}.pagefind-ui__result-tag.svelte-4xnkmf.svelte-4xnkmf{padding:calc(4px * var(--pagefind-ui-scale)) calc(8px * var(--pagefind-ui-scale));font-size:calc(14px * var(--pagefind-ui-scale));border-radius:var(--pagefind-ui-border-radius);background-color:var(--pagefind-ui-tag)}legend.svelte-1v2r7ls.svelte-1v2r7ls{position:absolute;clip:rect(0 0 0 0)}.pagefind-ui__filter-panel.svelte-1v2r7ls.svelte-1v2r7ls{min-width:min(calc(260px * var(--pagefind-ui-scale)),100%);flex:1;display:flex;flex-direction:column;margin-top:calc(20px * var(--pagefind-ui-scale))}.pagefind-ui__filter-group.svelte-1v2r7ls.svelte-1v2r7ls{border:0;padding:0}.pagefind-ui__filter-block.svelte-1v2r7ls.svelte-1v2r7ls{padding:0;display:block;border-bottom:solid calc(2px * var(--pagefind-ui-scale)) var(--pagefind-ui-border);padding:calc(20px * var(--pagefind-ui-scale)) 0}.pagefind-ui__filter-name.svelte-1v2r7ls.svelte-1v2r7ls{font-size:calc(16px * var(--pagefind-ui-scale));position:relative;display:flex;align-items:center;list-style:none;font-weight:700;cursor:pointer;height:calc(24px * var(--pagefind-ui-scale))}.pagefind-ui__filter-name.svelte-1v2r7ls.svelte-1v2r7ls::-webkit-details-marker{display:none}.pagefind-ui__filter-name.svelte-1v2r7ls.svelte-1v2r7ls:after{position:absolute;content:"";right:calc(6px * var(--pagefind-ui-scale));top:50%;width:calc(8px * var(--pagefind-ui-scale));height:calc(8px * var(--pagefind-ui-scale));border:solid calc(2px * var(--pagefind-ui-scale)) currentColor;border-right:0;border-top:0;transform:translateY(-70%) rotate(-45deg)}.pagefind-ui__filter-block[open].svelte-1v2r7ls .pagefind-ui__filter-name.svelte-1v2r7ls:after{transform:translateY(-70%) rotate(-225deg)}.pagefind-ui__filter-group.svelte-1v2r7ls.svelte-1v2r7ls{display:flex;flex-direction:column;gap:calc(20px * var(--pagefind-ui-scale));padding-top:calc(30px * var(--pagefind-ui-scale))}.pagefind-ui__filter-value.svelte-1v2r7ls.svelte-1v2r7ls{position:relative;display:flex;align-items:center;gap:calc(8px * var(--pagefind-ui-scale))}.pagefind-ui__filter-value.svelte-1v2r7ls.svelte-1v2r7ls:before{position:absolute;content:"";top:50%;left:calc(8px * var(--pagefind-ui-scale));width:0px;height:0px;border:solid 1px #fff;opacity:0;transform:translate(calc(4.5px * var(--pagefind-ui-scale) * -1),calc(.8px * var(--pagefind-ui-scale))) skew(-5deg) rotate(-45deg);transform-origin:top left;border-top:0;border-right:0;pointer-events:none}.pagefind-ui__filter-value.pagefind-ui__filter-value--checked.svelte-1v2r7ls.svelte-1v2r7ls:before{opacity:1;width:calc(9px * var(--pagefind-ui-scale));height:calc(4px * var(--pagefind-ui-scale));transition:width .1s ease-out .1s,height .1s ease-in}.pagefind-ui__filter-checkbox.svelte-1v2r7ls.svelte-1v2r7ls{margin:0;width:calc(16px * var(--pagefind-ui-scale));height:calc(16px * var(--pagefind-ui-scale));border:solid 1px var(--pagefind-ui-border);appearance:none;-webkit-appearance:none;border-radius:calc(var(--pagefind-ui-border-radius) / 2);background-color:var(--pagefind-ui-background);cursor:pointer}.pagefind-ui__filter-checkbox.svelte-1v2r7ls.svelte-1v2r7ls:checked{background-color:var(--pagefind-ui-primary);border:solid 1px var(--pagefind-ui-primary)}.pagefind-ui__filter-label.svelte-1v2r7ls.svelte-1v2r7ls{cursor:pointer;font-size:calc(16px * var(--pagefind-ui-scale));font-weight:400}.pagefind-ui--reset *:where(:not(html,iframe,canvas,img,svg,video):not(svg *,symbol *)){all:unset;display:revert;outline:revert}.pagefind-ui--reset *,.pagefind-ui--reset *:before,.pagefind-ui--reset *:after{box-sizing:border-box}.pagefind-ui--reset a,.pagefind-ui--reset button{cursor:revert}.pagefind-ui--reset ol,.pagefind-ui--reset ul,.pagefind-ui--reset menu{list-style:none}.pagefind-ui--reset img{max-width:100%}.pagefind-ui--reset table{border-collapse:collapse}.pagefind-ui--reset input,.pagefind-ui--reset textarea{-webkit-user-select:auto}.pagefind-ui--reset textarea{white-space:revert}.pagefind-ui--reset meter{-webkit-appearance:revert;appearance:revert}.pagefind-ui--reset::placeholder{color:unset}.pagefind-ui--reset:where([hidden]){display:none}.pagefind-ui--reset:where([contenteditable]:not([contenteditable="false"])){-moz-user-modify:read-write;-webkit-user-modify:read-write;overflow-wrap:break-word;-webkit-line-break:after-white-space;-webkit-user-select:auto}.pagefind-ui--reset:where([draggable="true"]){-webkit-user-drag:element}.pagefind-ui--reset mark{all:revert}:root{--pagefind-ui-scale:.8;--pagefind-ui-primary:#393939;--pagefind-ui-text:#393939;--pagefind-ui-background:#ffffff;--pagefind-ui-border:#eeeeee;--pagefind-ui-tag:#eeeeee;--pagefind-ui-border-width:2px;--pagefind-ui-border-radius:8px;--pagefind-ui-image-border-radius:8px;--pagefind-ui-image-box-ratio:3 / 2;--pagefind-ui-font:system,-apple-system,"BlinkMacSystemFont",".SFNSText-Regular","San Francisco","Roboto","Segoe UI","Helvetica Neue","Lucida Grande","Ubuntu","arial",sans-serif}.pagefind-ui.svelte-e9gkc3{width:100%;color:var(--pagefind-ui-text);font-family:var(--pagefind-ui-font)}.pagefind-ui__hidden.svelte-e9gkc3{display:none!important}.pagefind-ui__suppressed.svelte-e9gkc3{opacity:0;pointer-events:none}.pagefind-ui__form.svelte-e9gkc3{position:relative}.pagefind-ui__form.svelte-e9gkc3:before{background-color:var(--pagefind-ui-text);width:calc(18px * var(--pagefind-ui-scale));height:calc(18px * var(--pagefind-ui-scale));top:calc(23px * var(--pagefind-ui-scale));left:calc(20px * var(--pagefind-ui-scale));content:"";position:absolute;display:block;opacity:.7;-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.7549 11.255H11.9649L11.6849 10.985C12.6649 9.845 13.2549 8.365 13.2549 6.755C13.2549 3.165 10.3449 0.255005 6.75488 0.255005C3.16488 0.255005 0.254883 3.165 0.254883 6.755C0.254883 10.345 3.16488 13.255 6.75488 13.255C8.36488 13.255 9.84488 12.665 10.9849 11.685L11.2549 11.965V12.755L16.2549 17.745L17.7449 16.255L12.7549 11.255ZM6.75488 11.255C4.26488 11.255 2.25488 9.245 2.25488 6.755C2.25488 4.26501 4.26488 2.255 6.75488 2.255C9.24488 2.255 11.2549 4.26501 11.2549 6.755C11.2549 9.245 9.24488 11.255 6.75488 11.255Z' fill='%23000000'/%3E%3C/svg%3E%0A");mask-image:url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.7549 11.255H11.9649L11.6849 10.985C12.6649 9.845 13.2549 8.365 13.2549 6.755C13.2549 3.165 10.3449 0.255005 6.75488 0.255005C3.16488 0.255005 0.254883 3.165 0.254883 6.755C0.254883 10.345 3.16488 13.255 6.75488 13.255C8.36488 13.255 9.84488 12.665 10.9849 11.685L11.2549 11.965V12.755L16.2549 17.745L17.7449 16.255L12.7549 11.255ZM6.75488 11.255C4.26488 11.255 2.25488 9.245 2.25488 6.755C2.25488 4.26501 4.26488 2.255 6.75488 2.255C9.24488 2.255 11.2549 4.26501 11.2549 6.755C11.2549 9.245 9.24488 11.255 6.75488 11.255Z' fill='%23000000'/%3E%3C/svg%3E%0A");-webkit-mask-size:100%;mask-size:100%;z-index:9;pointer-events:none}.pagefind-ui__search-input.svelte-e9gkc3{height:calc(64px * var(--pagefind-ui-scale));padding:0 calc(70px * var(--pagefind-ui-scale)) 0 calc(54px * var(--pagefind-ui-scale));background-color:var(--pagefind-ui-background);border:var(--pagefind-ui-border-width) solid var(--pagefind-ui-border);border-radius:var(--pagefind-ui-border-radius);font-size:calc(21px * var(--pagefind-ui-scale));position:relative;appearance:none;-webkit-appearance:none;display:flex;width:100%;box-sizing:border-box;font-weight:700}.pagefind-ui__search-input.svelte-e9gkc3::placeholder{opacity:.2}.pagefind-ui__search-clear.svelte-e9gkc3{position:absolute;top:calc(3px * var(--pagefind-ui-scale));right:calc(3px * var(--pagefind-ui-scale));height:calc(58px * var(--pagefind-ui-scale));padding:0 calc(15px * var(--pagefind-ui-scale)) 0 calc(2px * var(--pagefind-ui-scale));color:var(--pagefind-ui-text);font-size:calc(14px * var(--pagefind-ui-scale));cursor:pointer;background-color:var(--pagefind-ui-background);border-radius:var(--pagefind-ui-border-radius)}.pagefind-ui__drawer.svelte-e9gkc3{gap:calc(60px * var(--pagefind-ui-scale));display:flex;flex-direction:row;flex-wrap:wrap}.pagefind-ui__results-area.svelte-e9gkc3{min-width:min(calc(400px * var(--pagefind-ui-scale)),100%);flex:1000;margin-top:calc(20px * var(--pagefind-ui-scale))}.pagefind-ui__results.svelte-e9gkc3{padding:0}.pagefind-ui__message.svelte-e9gkc3{box-sizing:content-box;font-size:calc(16px * var(--pagefind-ui-scale));height:calc(24px * var(--pagefind-ui-scale));padding:calc(20px * var(--pagefind-ui-scale)) 0;display:flex;align-items:center;font-weight:700;margin-top:0}.pagefind-ui__button.svelte-e9gkc3{margin-top:calc(40px * var(--pagefind-ui-scale));border:var(--pagefind-ui-border-width) solid var(--pagefind-ui-border);border-radius:var(--pagefind-ui-border-radius);height:calc(48px * var(--pagefind-ui-scale));padding:0 calc(12px * var(--pagefind-ui-scale));font-size:calc(16px * var(--pagefind-ui-scale));color:var(--pagefind-ui-primary);background:var(--pagefind-ui-background);width:100%;text-align:center;font-weight:700;cursor:pointer}.pagefind-ui__button.svelte-e9gkc3:hover{border-color:var(--pagefind-ui-primary);color:var(--pagefind-ui-primary);background:var(--pagefind-ui-background)}:root{--bg-primary:#ffffff;--bg-secondary:#f8f9fa;--bg-card:#ffffff;--text-primary:#1a1a1a;--text-secondary:#4a5568;--accent-primary:#2563eb;--accent-secondary:#3b82f6;--border-color:#e5e7eb;--shadow:rgba(0,0,0,0.1);--shadow-hover:rgba(0,0,0,0.15);--spacing-xs:0.5rem;--spacing-sm:1rem;--spacing-md:2rem;--spacing-lg:4rem;--spacing-xl:6rem;--font-primary:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI','Roboto',sans-serif;--font-size-base:16px;--font-size-sm:0.875rem;--font-size-lg:1.125rem;--font-size-xl:1.5rem;--font-size-2xl:2rem;--font-size-3xl:3rem;--transition-fast:0.2s ease;--transition-normal:0.3s ease;--transition-slow:0.5s ease} [data-theme="dark"]{--bg-primary:#0f172a;--bg-secondary:#1e293b;--bg-card:#1e293b;--text-primary:#f1f5f9;--text-secondary:#cbd5e1;--accent-primary:#3b82f6;--accent-secondary:#60a5fa;--border-color:#334155;--shadow:rgba(0,0,0,0.3);--shadow-hover:rgba(0,0,0,0.5)} [data-theme="auto"]{color-scheme:light dark} @media (prefers-color-scheme:dark){[data-theme="auto"]{--bg-primary:#0f172a;--bg-secondary:#1e293b;--bg-card:#1e293b;--text-primary:#f1f5f9;--text-secondary:#cbd5e1;--accent-primary:#3b82f6;--accent-secondary:#60a5fa;--border-color:#334155;--shadow:rgba(0,0,0,0.3);--shadow-hover:rgba(0,0,0,0.5)} } .blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.5rem;align-items:stretch} .blog-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;cursor:pointer;transition:transform var(--transition-fast),box-shadow var(--transition-fast)} .blog-card:hover{transform:translateY(-6px);box-shadow:0 10px 30px var(--shadow-hover)} .blog-card-image{width:100%;height:200px;object-fit:cover;display:block;background:linear-gradient(180deg,#efefef,#e6e6e6)} .blog-card-content{padding:1rem;display:flex;flex-direction:column;gap:0.5rem;flex:1 1 auto} .blog-card-title{font-size:1.125rem;font-weight:700;color:var(--text-primary)} .blog-card-description{color:var(--text-secondary);font-size:var(--font-size-sm)} .blog-card-footer{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:0.5rem} *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;font-size:var(--font-size-base)} body{font-family:var(--font-primary);background-color:var(--bg-primary);color:var(--text-primary);line-height:1.6;transition:background-color var(--transition-normal),color var(--transition-normal)} .container{max-width:1200px;margin:0 auto;padding:0 var(--spacing-md)} a{text-decoration:none;color:inherit;transition:color var(--transition-fast)} .dropdown{position:relative} .dropdown-toggle{display:flex;align-items:center;justify-content:center;gap:0.3rem;padding:0.5rem 0.8rem;background:var(--bg-card);border:2px solid var(--border-color);border-radius:8px;color:var(--text-primary);font-weight:600;font-size:var(--font-size-sm);font-family:var(--font-primary);cursor:pointer;transition:all var(--transition-fast);box-shadow:0 2px 4px var(--shadow);min-width:65px;width:65px} .dropdown-toggle:hover{background:var(--bg-secondary);border-color:var(--accent-primary);transform:translateY(-1px);box-shadow:0 4px 8px var(--shadow)} .dropdown-arrow{display:none} .dropdown-icon{font-size:1.2rem} .dropdown-text{font-weight:700;font-size:var(--font-size-sm)} .dropdown-menu{position:absolute;top:calc(100% + 0.5rem);right:0;background:var(--bg-card);border:2px solid var(--border-color);border-radius:8px;box-shadow:0 4px 12px var(--shadow);min-width:150px;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all var(--transition-fast);overflow:hidden} .dropdown.open .dropdown-menu,.nav-dropdown.open .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)} .dropdown-item{width:100%;padding:0.75rem 1rem;border:none;background:transparent;color:var(--text-primary);font-size:var(--font-size-sm);font-family:var(--font-primary);font-weight:500;text-align:left;cursor:pointer;transition:all var(--transition-fast);display:flex;align-items:center;gap:0.5rem} .dropdown-item:hover{background:var(--bg-secondary)} .dropdown-item.active{background:var(--accent-primary);color:white;font-weight:700} .lang-btn,.theme-btn{display:none} .navbar{position:fixed;top:0;width:100%;background:var(--bg-card);backdrop-filter:blur(10px);border-bottom:1px solid var(--border-color);z-index:1000;transition:all var(--transition-normal)} .navbar .container{display:flex;justify-content:space-between;align-items:center;padding:1rem var(--spacing-md)} .nav-brand{display:flex;align-items:center;gap:1rem;cursor:pointer} .nav-logo{height:40px;width:auto;transition:transform var(--transition-fast)} .nav-logo:hover{transform:scale(1.05)} .nav-brand h2{font-size:var(--font-size-xl);background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .nav-menu{display:flex;list-style:none;gap:var(--spacing-md);align-items:center} .nav-menu .nav-dropdown{position:relative} .nav-link{color:var(--text-secondary);font-weight:500;transition:color var(--transition-fast);position:relative} .nav-link::after{content:'';position:absolute;bottom:-5px;left:0;width:0;height:2px;background:var(--accent-primary);transition:width var(--transition-fast)} .nav-link:hover{color:var(--accent-primary)} .nav-link:hover::after{width:100%} .hamburger{display:none;flex-direction:column;cursor:pointer;gap:5px;z-index:1002;position:relative} .hamburger span{width:25px;height:3px;background:var(--text-primary);border-radius:3px;transition:all var(--transition-fast)} .hero{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--spacing-xl) 0;position:relative;overflow:hidden} .hero::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,rgba(15,23,42,0.85) 0%,rgba(30,41,59,0.75) 50%,rgba(15,23,42,0.85) 100%);pointer-events:none;z-index:1} .hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;transform-origin:center;will-change:opacity,transform;z-index:0;opacity:0} .hero-bg-1{background-image:url('../img/codemotion2025.webp');animation:heroFade 24s linear infinite} .hero-bg-2{background-image:url('../img/codemotion2025-2.webp');animation:heroFade 24s linear infinite;animation-delay:6s} .hero-bg-3{background-image:url('../img/codemotion2025-3.webp');animation:heroFade 24s linear infinite;animation-delay:12s} .hero-bg-4{background-image:url('../img/codemotion2024.webp');animation:heroFade 24s linear infinite;animation-delay:18s} @keyframes heroFade{0%{opacity:0;transform:scale(1)} 8%{opacity:1;transform:scale(1.02)} 42%{opacity:1;transform:scale(1.03)} 50%{opacity:0;transform:scale(1.05)} 100%{opacity:0;transform:scale(1)} } .hero-content{text-align:center;position:relative;z-index:2;animation:fadeInUp 1s ease} .hero .hero-buttons{margin-bottom:2.5rem} #about{padding-top:1.5rem} .hero-content{text-align:center;position:relative;z-index:1;animation:fadeInUp 1s ease} .hero-title{font-size:clamp(2rem,5vw,var(--font-size-3xl));font-weight:700;margin-bottom:var(--spacing-sm);line-height:1.2;color:#ffffff;text-shadow:2px 2px 8px rgba(0,0,0,0.7)} .about-highlights-row{display:flex;gap:1rem;justify-content:center;align-items:stretch;margin:1.5rem 0 0 0;padding:0 var(--spacing-md);flex-wrap:wrap} .about-highlights-row .highlight-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;padding:1rem 1.25rem;min-width:160px;max-width:260px;flex:1 1 180px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 6px 18px var(--shadow);transition:transform var(--transition-fast),box-shadow var(--transition-fast)} .about-highlights-row .highlight-card:hover{transform:translateY(-6px);box-shadow:0 12px 28px var(--shadow-hover)} .about-highlights-row .highlight-number{font-size:1.6rem;font-weight:800;color:var(--accent-primary);margin-bottom:0.25rem} .about-highlights-row .highlight-label{font-size:0.95rem;color:var(--text-secondary);text-align:center} @media (max-width:720px){.about-highlights-row{padding:0 0.5rem;gap:0.75rem} .about-highlights-row .highlight-card{min-width:140px;flex:1 1 45%} } .hero-title .highlight{background:linear-gradient(135deg,#60a5fa,#3b82f6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:none} .hero-subtitle{font-size:var(--font-size-lg);color:#e2e8f0;margin-bottom:var(--spacing-md);font-weight:600;text-shadow:1px 1px 4px rgba(0,0,0,0.8)} .hero-description{font-size:var(--font-size-lg);color:#cbd5e1;max-width:700px;margin:0 auto var(--spacing-md);text-shadow:1px 1px 4px rgba(0,0,0,0.8)} .hero-buttons{display:flex;gap:var(--spacing-sm);justify-content:center;flex-wrap:wrap} .btn{padding:1rem 2rem;border-radius:50px;font-weight:600;font-size:var(--font-size-base);cursor:pointer;transition:all var(--transition-normal);border:none;display:inline-block} .btn-primary{background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:white;box-shadow:0 4px 15px rgba(37,99,235,0.3)} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(37,99,235,0.4)} .btn-secondary{background:transparent;color:var(--accent-primary);border:2px solid var(--accent-primary)} .hero .hero-buttons .btn-secondary{background:rgba(255,255,255,0.06);color:#ffffff;border-color:rgba(255,255,255,0.32);box-shadow:0 6px 18px rgba(0,0,0,0.45);backdrop-filter:blur(4px)} .hero .hero-buttons .btn-secondary:hover{background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.6);color:#ffffff;transform:translateY(-2px)} .scroll-indicator{position:absolute;bottom:30px;left:50%;transform:translateX(-50%)} .scroll-indicator span{display:block;width:24px;height:40px;border:2px solid var(--accent-primary);border-radius:20px;position:relative} .scroll-indicator span::before{content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);width:4px;height:8px;background:var(--accent-primary);border-radius:4px;animation:scroll 2s infinite} @keyframes scroll{0%{top:8px;opacity:1} 100%{top:24px;opacity:0} } section{padding:var(--spacing-xl) 0} .section-title{font-size:var(--font-size-2xl);font-weight:700;text-align:center;margin-bottom:var(--spacing-lg);position:relative} .section-title::after{content:'';display:block;width:60px;height:4px;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));margin:var(--spacing-sm) auto 0;border-radius:2px} .about{background:var(--bg-secondary)} .about-content{display:grid;grid-template-columns:1fr 2fr;gap:var(--spacing-lg);align-items:start} .about-image{position:relative;border-radius:20px;overflow:hidden;box-shadow:0 10px 30px var(--shadow);transition:transform var(--transition-normal)} .about-image:hover{transform:translateY(-5px)} .about-image img{width:100%;height:auto;display:block;border-radius:20px} .about-image::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,rgba(37,99,235,0.1),rgba(59,130,246,0.1));pointer-events:none} .about-text{font-size:var(--font-size-lg);color:var(--text-secondary)} .about-text p{margin-bottom:var(--spacing-md)} .about-highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-md)} .highlight-card{background:var(--bg-card);padding:var(--spacing-md);border-radius:15px;text-align:center;box-shadow:0 4px 6px var(--shadow);transition:transform var(--transition-normal)} .highlight-card:hover{transform:translateY(-5px)} .highlight-number{font-size:var(--font-size-3xl);font-weight:700;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .highlight-label{color:var(--text-secondary);font-weight:600;margin-top:var(--spacing-xs)} .timeline{position:relative;max-width:900px;margin:0 auto} .timeline::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--border-color)} .timeline-item{position:relative;padding-left:40px;margin-bottom:var(--spacing-lg);animation:fadeInLeft 0.6s ease} .timeline-dot{position:absolute;left:-6px;top:0;width:14px;height:14px;border-radius:50%;background:var(--accent-primary);border:3px solid var(--bg-primary);box-shadow:0 0 0 4px var(--bg-secondary)} .timeline-content{background:var(--bg-card);padding:var(--spacing-md);border-radius:15px;box-shadow:0 4px 6px var(--shadow);transition:transform var(--transition-normal),box-shadow var(--transition-normal)} .timeline-content:hover{transform:translateX(5px);box-shadow:0 6px 12px var(--shadow-hover)} .timeline-content h3{color:var(--accent-primary);font-size:var(--font-size-xl);margin-bottom:var(--spacing-xs)} .timeline-content h4{color:var(--text-primary);font-size:var(--font-size-lg);margin-bottom:var(--spacing-xs)} .timeline-date{color:var(--text-secondary);font-size:var(--font-size-sm);font-weight:600;margin-bottom:var(--spacing-sm)} .timeline-content p{color:var(--text-secondary);line-height:1.6} .skills{background:var(--bg-secondary)} .skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--spacing-md)} .skill-category{background:var(--bg-card);padding:var(--spacing-md);border-radius:15px;box-shadow:0 4px 6px var(--shadow);transition:transform var(--transition-normal)} .skill-category:hover{transform:translateY(-5px)} .skill-category h3{font-size:var(--font-size-xl);margin-bottom:var(--spacing-md);color:var(--accent-primary)} .skill-list{display:flex;flex-wrap:wrap;gap:var(--spacing-xs)} .skill-tag{background:var(--bg-secondary);color:var(--text-primary);padding:0.5rem 1rem;border-radius:50px;font-size:var(--font-size-sm);font-weight:500;transition:all var(--transition-fast);border:1px solid var(--border-color)} .skill-tag:hover{background:var(--accent-primary);color:white;border-color:var(--accent-primary);transform:translateY(-2px)} .blog{background:var(--bg-secondary)} .blog-subtitle{text-align:center;font-size:var(--font-size-lg);color:var(--text-secondary);max-width:700px;margin:0 auto var(--spacing-lg)} .blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--spacing-md)} .blog-loading{grid-column:1 / -1;text-align:center;padding:var(--spacing-lg);color:var(--text-secondary);font-style:italic} .blog-card{background:var(--bg-card);border-radius:15px;overflow:hidden;box-shadow:0 4px 6px var(--shadow);transition:all var(--transition-normal);cursor:pointer;display:flex;flex-direction:column;height:100%} .blog-card:hover{transform:translateY(-5px);box-shadow:0 8px 16px var(--shadow-hover)} .blog-card-image{width:100%;height:200px;object-fit:cover;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary))} .blog-card-content{padding:var(--spacing-md);flex-grow:1;display:flex;flex-direction:column} .blog-card-id{font-size:var(--font-size-sm);font-weight:700;color:var(--accent-primary);margin-bottom:var(--spacing-xs)} .blog-card-title{font-size:var(--font-size-xl);font-weight:700;color:var(--text-primary);margin-bottom:var(--spacing-sm);line-height:1.3} .blog-card-description{color:var(--text-secondary);line-height:1.6;margin-bottom:var(--spacing-sm);flex-grow:1} .blog-card-footer{display:flex;justify-content:space-between;align-items:center;padding-top:var(--spacing-sm);border-top:1px solid var(--border-color)} .blog-card-date{font-size:var(--font-size-sm);color:var(--text-secondary)} .blog-card-languages{display:flex;gap:var(--spacing-xs)} .blog-card-lang{padding:0.25rem 0.5rem;background:var(--bg-secondary);border-radius:5px;font-size:var(--font-size-sm);font-weight:600;color:var(--text-secondary);text-transform:uppercase} .blog-card-lang.active{background:var(--accent-primary);color:white} .blog-pagination{display:flex;justify-content:center;align-items:center;gap:var(--spacing-md);margin-top:var(--spacing-lg);padding:var(--spacing-md) 0} .pagination-btn{padding:0.75rem 1.5rem;background:var(--accent-primary);color:white;border:none;border-radius:8px;font-size:var(--font-size-base);font-weight:600;cursor:pointer;transition:all var(--transition-fast);display:flex;align-items:center;gap:0.5rem;font-family:var(--font-primary)} .pagination-btn:hover:not(:disabled){background:var(--accent-secondary);transform:translateY(-2px);box-shadow:0 4px 12px var(--shadow-hover)} .pagination-btn:disabled{background:var(--bg-secondary);color:var(--text-secondary);cursor:not-allowed;opacity:0.6} .page-info{font-size:var(--font-size-lg);font-weight:600;color:var(--text-primary);min-width:60px;text-align:center} .publications-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--spacing-md)} .publication-card{background:var(--bg-card);padding:var(--spacing-md);border-radius:15px;text-align:center;box-shadow:0 4px 6px var(--shadow);transition:all var(--transition-normal);border:2px solid transparent} .publication-card:hover{transform:translateY(-5px);border-color:var(--accent-primary);box-shadow:0 8px 16px var(--shadow-hover)} .publication-icon{font-size:3rem;margin-bottom:var(--spacing-sm)} .publication-card h3{font-size:var(--font-size-xl);margin-bottom:var(--spacing-sm);color:var(--accent-primary)} .publication-card p{color:var(--text-secondary);line-height:1.6} .contact{background:var(--bg-secondary)} .contact-subtitle{text-align:center;font-size:var(--font-size-lg);color:var(--text-secondary);max-width:600px;margin:0 auto var(--spacing-lg)} .contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--spacing-md)} .contact-card{background:var(--bg-card);padding:var(--spacing-md);border-radius:15px;text-align:center;box-shadow:0 4px 6px var(--shadow);transition:all var(--transition-normal);border:2px solid transparent;cursor:pointer} .contact-card:hover{transform:translateY(-5px);border-color:var(--accent-primary);box-shadow:0 8px 16px var(--shadow-hover)} .contact-icon{font-size:2.5rem;margin-bottom:var(--spacing-sm)} .contact-card h3{font-size:var(--font-size-xl);margin-bottom:var(--spacing-xs);color:var(--accent-primary)} .contact-card p{color:var(--text-secondary);font-size:var(--font-size-sm);word-break:break-word} .footer{background:var(--bg-card);padding:var(--spacing-md) 0;text-align:center;border-top:1px solid var(--border-color)} .footer p{color:var(--text-secondary);margin:var(--spacing-xs) 0} .footer-links{margin-top:var(--spacing-sm)} .footer-links a{color:var(--accent-primary);text-decoration:none;transition:color var(--transition-fast)} .footer-links a:hover{color:var(--accent-secondary);text-decoration:underline} @keyframes fadeInUp{from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} } @keyframes fadeInLeft{from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} } .back-to-top{position:fixed;bottom:30px;right:30px;background:var(--accent-primary);color:white;border:none;border-radius:50%;width:50px;height:50px;font-size:1.5rem;font-weight:bold;cursor:pointer;box-shadow:0 4px 15px var(--shadow);opacity:0;visibility:hidden;transition:all var(--transition-normal);z-index:999;display:flex;align-items:center;justify-content:center} .back-to-top.visible{opacity:1;visibility:visible} .back-to-top:hover{background:var(--accent-secondary);transform:translateY(-5px);box-shadow:0 6px 20px var(--shadow-hover)} @media (max-width:768px){.hamburger{display:flex} .nav-menu{position:fixed;left:-100%;top:70px;display:block;background:var(--bg-card);width:100%;text-align:center;transition:left var(--transition-normal);padding:var(--spacing-md);box-shadow:0 4px 6px var(--shadow);gap:0} .nav-menu.active{left:0} .nav-menu li{margin:1rem 0} .nav-menu li{display:block;width:100%} .nav-menu .nav-dropdown{display:inline-flex;align-items:center;justify-content:center;width:auto;margin:0.25rem 0.25rem;position:relative} .nav-menu .nav-dropdown .dropdown-menu{position:absolute;top:calc(100% + 0.4rem);left:50%;transform:translateX(-50%);margin-top:0;min-width:140px;max-width:320px;width:auto;opacity:0;visibility:hidden;box-shadow:0 6px 18px var(--shadow);transition:all var(--transition-fast);z-index:1003} .nav-menu .nav-dropdown.open .dropdown-menu,.nav-menu .dropdown.open .dropdown-menu{opacity:1;visibility:visible;transform:translateX(-50%);display:block} .back-to-top{bottom:20px;right:20px;width:45px;height:45px;font-size:1.3rem} .hero-title{font-size:2rem} .hero-buttons{flex-direction:column} .about-content{grid-template-columns:1fr} .about-image{max-width:300px;margin:0 auto} .about-highlights{grid-template-columns:1fr} .timeline::before{left:10px} .timeline-item{padding-left:50px} .timeline-dot{left:4px} section{padding:var(--spacing-lg) 0} .container{padding:0 var(--spacing-sm)} .blog-pagination{flex-direction:column;gap:var(--spacing-sm)} .pagination-btn{width:100%;max-width:250px;justify-content:center} } @media (max-width:480px){:root{--font-size-base:14px} .about-highlights{grid-template-columns:1fr} .skills-grid,.publications-grid,.contact-grid{grid-template-columns:1fr} } @media (min-width:769px){.dropdown-toggle#theme-toggle{border:none;background:transparent;box-shadow:none;padding:0.35rem 0.6rem} .dropdown-toggle#theme-toggle:hover{background:transparent;border-color:transparent;transform:none;box-shadow:none} .dropdown-toggle#lang-toggle{border:none;background:transparent;box-shadow:none;padding:0.35rem 0.6rem} .dropdown-toggle#lang-toggle:hover{background:transparent;border-color:transparent;transform:none;box-shadow:none} } @media (max-width:768px){.nav-menu .nav-dropdown,.nav-menu .dropdown{display:flex;align-items:center;justify-content:center;gap:0.5rem;margin:0.25rem 0} .nav-menu .dropdown-toggle#theme-toggle,.nav-menu .dropdown-toggle#lang-toggle{border:none;background:transparent;box-shadow:none;padding:0.35rem 0.5rem;display:inline-flex;align-items:center;justify-content:center;gap:0.35rem;min-width:auto;width:auto} .nav-menu li{margin:0.25rem 0} } .search-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);z-index:2000;justify-content:center;align-items:flex-start;padding-top:100px;backdrop-filter:blur(5px)} .search-modal.active{display:flex} .search-modal-content{background-color:var(--bg-card);padding:1rem 1.5rem 1.5rem 1.5rem;border-radius:12px;width:95%;max-width:800px;max-height:85vh;overflow-y:auto;box-shadow:0 10px 25px var(--shadow-hover);position:relative;border:1px solid var(--border-color)} .close-modal{position:absolute;top:0.75rem;right:0.75rem;font-size:2.5rem;line-height:1;cursor:pointer;color:var(--text-secondary);transition:all var(--transition-fast);z-index:10;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--bg-secondary);border:1px solid var(--border-color)} .close-modal:hover{color:var(--accent-primary);background:var(--bg-primary);transform:scale(1.1);box-shadow:0 2px 10px var(--shadow-hover)} #search-toggle{background:transparent;border:none;box-shadow:none;cursor:pointer;font-size:1.2rem;padding:0.5rem;color:var(--text-primary);transition:color var(--transition-fast);display:flex;align-items:center;justify-content:center} #search-toggle:hover{color:var(--accent-primary);transform:scale(1.1)} .pagefind-ui{padding:0 !important;margin:0 !important} .pagefind-ui__form{margin:0 0 1rem 0 !important} .pagefind-ui__search-input{background-color:var(--bg-secondary) !important;color:var(--text-primary) !important;border:1px solid var(--border-color) !important} .pagefind-ui__results-area{padding:0 !important;margin:0 !important} .pagefind-ui__results{padding:0 !important;margin:0 !important} .pagefind-ui__result{padding:0.75rem !important;margin-bottom:0.5rem !important;background-color:var(--bg-secondary) !important;border-radius:8px !important} .pagefind-ui__result-title{color:var(--accent-primary) !important} .pagefind-ui__result-excerpt{color:var(--text-secondary) !important} .article-tags{display:flex;flex-wrap:wrap;gap:0.5rem;margin:0.5rem 0} .tag-link{display:inline-block;padding:0.2rem 0.6rem;background:var(--bg-secondary);color:var(--accent-primary);border:1px solid var(--border-color);border-radius:4px;font-size:0.75rem;font-weight:600;transition:all var(--transition-fast)} .tag-link:hover{background:var(--accent-primary);color:white;border-color:var(--accent-primary);transform:translateY(-1px);text-decoration:none} .blog-card-content .article-tags{margin-bottom:0.5rem} .nav-controls{display:flex;gap:1rem;align-items:center} .language-switcher-compact{display:flex;gap:0.25rem;background:var(--bg-card);padding:0.25rem;border-radius:8px;box-shadow:0 2px 4px var(--shadow)} .language-switcher-compact .lang-btn{padding:0.4rem 0.8rem;font-size:var(--font-size-sm);background:transparent;color:var(--text-secondary);border:none;border-radius:6px;cursor:pointer;transition:all var(--transition-fast);font-weight:600} .language-switcher-compact .lang-btn:hover{background:var(--bg-secondary);color:var(--text-primary)} .language-switcher-compact .lang-btn.active{background:var(--accent-primary);color:white} .btn-home{display:inline-flex;align-items:center;gap:0.5rem;padding:0.5rem 1rem;background:var(--accent-primary);color:white;border-radius:8px;font-weight:600;font-size:var(--font-size-sm);transition:all var(--transition-fast);text-decoration:none} .btn-home:hover{background:var(--accent-secondary);transform:translateY(-2px);box-shadow:0 4px 12px rgba(99,102,241,0.3)} .nav-menu{display:flex;align-items:center;gap:var(--spacing-md)} .article-section{min-height:100vh;padding:calc(80px + var(--spacing-lg)) 0 var(--spacing-lg);background:var(--bg-primary)} .article-back{margin-bottom:var(--spacing-md)} .back-link{display:inline-flex;align-items:center;gap:0.5rem;color:var(--accent-primary);font-weight:600;transition:all var(--transition-fast);padding:0.5rem 1rem;border-radius:8px} .back-link:hover{background:var(--bg-secondary);transform:translateX(-5px)} .article-content{background:var(--bg-card);padding:var(--spacing-lg);border-radius:20px;box-shadow:0 4px 6px var(--shadow);max-width:1200px;margin:0 auto} .article-loading{text-align:center;padding:var(--spacing-xl);color:var(--text-secondary);font-style:italic} .article-content h1{font-size:var(--font-size-3xl);font-weight:700;color:var(--text-primary);margin-bottom:var(--spacing-md);line-height:1.2;border-bottom:3px solid var(--accent-primary);padding-bottom:var(--spacing-sm)} .article-content h2{font-size:var(--font-size-2xl);font-weight:700;color:var(--text-primary);margin-top:var(--spacing-lg);margin-bottom:var(--spacing-md);line-height:1.3} .article-content h3{font-size:var(--font-size-xl);font-weight:600;color:var(--text-primary);margin-top:var(--spacing-md);margin-bottom:var(--spacing-sm)} .article-content p{font-size:var(--font-size-lg);line-height:1.8;color:var(--text-secondary);margin-bottom:var(--spacing-md);text-align:justify} .article-content ul,.article-content ol{font-size:var(--font-size-lg);line-height:1.8;color:var(--text-secondary);margin-bottom:var(--spacing-md);padding-left:var(--spacing-lg)} .article-content li{margin-bottom:var(--spacing-xs)} .article-content a{color:var(--accent-primary);text-decoration:underline;transition:color var(--transition-fast)} .article-content a:hover{color:var(--accent-secondary)} .article-content blockquote{border-left:4px solid var(--accent-primary);padding-left:var(--spacing-md);margin:var(--spacing-md) 0;font-style:italic;color:var(--text-secondary);background:var(--bg-secondary);padding:var(--spacing-md);border-radius:8px} .article-content code{background:var(--bg-secondary);padding:0.2rem 0.4rem;border-radius:4px;font-family:'Courier New',monospace;font-size:0.9em;color:var(--accent-primary)} .article-content pre{background:var(--bg-secondary);padding:var(--spacing-md);border-radius:12px;overflow-x:auto;margin:var(--spacing-md) 0;border:1px solid var(--border-color)} .article-content pre code{background:none;padding:0;color:var(--text-primary)} .article-content img{max-width:100%;height:auto;border-radius:12px;margin:var(--spacing-md) 0;box-shadow:0 4px 12px var(--shadow)} .article-hero{margin-bottom:var(--spacing-md);text-align:center} .article-hero-image{width:100%;max-height:420px;object-fit:cover;border-radius:12px;box-shadow:0 6px 20px var(--shadow)} .article-content table{width:100%;border-collapse:collapse;margin:var(--spacing-md) 0;font-size:var(--font-size-base)} .article-content table th,.article-content table td{padding:var(--spacing-sm);border:1px solid var(--border-color);text-align:left} .article-content table th{background:var(--bg-secondary);font-weight:600;color:var(--text-primary)} .article-content hr{border:none;border-top:2px solid var(--border-color);margin:var(--spacing-lg) 0} .article-nav{display:flex;justify-content:space-between;gap:var(--spacing-md);margin-top:var(--spacing-lg);max-width:900px;margin-left:auto;margin-right:auto} .article-nav-btn{flex:1;padding:var(--spacing-md);background:var(--bg-card);border:2px solid var(--border-color);border-radius:12px;color:var(--text-primary);font-weight:600;font-size:var(--font-size-base);cursor:pointer;transition:all var(--transition-normal);display:flex;align-items:center;justify-content:center;gap:0.5rem} .article-nav-btn:hover{background:var(--accent-primary);color:white;border-color:var(--accent-primary);transform:translateY(-2px)} @media (max-width:768px){.nav-menu{flex-direction:column;gap:var(--spacing-sm)} .btn-home{width:100%;justify-content:center} .article-section{padding:calc(70px + var(--spacing-md)) 0 var(--spacing-md)} .article-content{padding:var(--spacing-md)} .article-content h1{font-size:var(--font-size-2xl)} .article-content h2{font-size:var(--font-size-xl)} .article-content p,.article-content ul,.article-content ol{font-size:var(--font-size-base)} .article-nav{flex-direction:column} } .article-meta{display:flex;align-items:center;gap:var(--spacing-md);flex-wrap:wrap;padding-bottom:var(--spacing-md);margin-bottom:var(--spacing-md);border-bottom:1px solid var(--border-color);color:var(--text-secondary);font-size:var(--font-size-sm)} .article-meta-item{display:flex;align-items:center;gap:0.5rem} .article-meta-item strong{color:var(--text-primary)} .back-to-top{position:fixed;bottom:2rem;right:2rem;background:var(--accent-primary);color:white;width:3rem;height:3rem;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;visibility:hidden;transition:all var(--transition-fast);box-shadow:0 4px 12px var(--shadow);z-index:100;border:none;font-size:1.5rem} .back-to-top.visible{opacity:1;visibility:visible} .back-to-top:hover{background:var(--accent-secondary);transform:translateY(-5px)}