*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}

:root{
  --bg:#000;--bg2:#0a0a0a;--bg3:#141414;
  --glass-bg:rgba(255,255,255,.06);--glass-blur:20px;
  --text:#f5f5f5;--text2:#888;--text3:#444;
  --border:rgba(255,255,255,.07);--border-hover:rgba(255,255,255,.14);
  --nav-bg:rgba(0,0,0,.85);--shadow:rgba(0,0,0,.5);--card-shadow:rgba(255,255,255,.03);
  --scrollbar-track:#000;--scrollbar-thumb:#222;
  --accent:#fff;--accent2:#ccc;
  --badge-bg:rgba(255,255,255,.05);--badge-border:rgba(255,255,255,.12);
  --icon-bg:rgba(255,255,255,.05);
  --timeline-gradient:180deg,#fff,#444,transparent;
  --img-bg:#141414;
}
[data-theme="light"]{
  --bg:#fff;--bg2:#f5f5f5;--bg3:#eee;
  --glass-bg:rgba(255,255,255,.65);--glass-blur:14px;
  --text:#111;--text2:#666;--text3:#999;
  --border:rgba(0,0,0,.07);--border-hover:rgba(0,0,0,.13);
  --nav-bg:rgba(255,255,255,.85);--shadow:rgba(0,0,0,.06);--card-shadow:rgba(0,0,0,.03);
  --scrollbar-track:#fff;--scrollbar-thumb:#ccc;
  --accent:#000;--accent2:#444;
  --badge-bg:rgba(0,0,0,.04);--badge-border:rgba(0,0,0,.09);
  --icon-bg:rgba(0,0,0,.04);
  --timeline-gradient:180deg,#000,#999,transparent;
  --img-bg:#e8e8e8;
}

body{font-family:'Satoshi',sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden;line-height:1.6;transition:background .4s,color .4s}
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--scrollbar-track)}
::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:4px}
a{text-decoration:none;color:inherit}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
section{padding:100px 0;position:relative;scroll-margin-top:80px}

.glass{background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--border)}

#preloader{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:var(--bg);transition:opacity .6s,visibility .6s}
#preloader.hidden{opacity:0;visibility:hidden}
.loader-logo{font-size:48px;font-weight:900;color:var(--accent);animation:loader-pulse 1s ease-in-out infinite alternate}
@keyframes loader-pulse{0%{transform:scale(.9);opacity:.4}100%{transform:scale(1.1);opacity:1}}

#progress-bar{position:fixed;top:0;left:0;height:2px;background:var(--accent);z-index:1001;width:0;transition:width .1s}

#cursor-orb{position:fixed;width:32px;height:32px;border-radius:50%;background:var(--accent);opacity:.07;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width .3s,height .3s,opacity .3s;display:none;mix-blend-mode:var(--cursor-blend,difference)}
@media(hover:hover){#cursor-orb{display:block}}
[data-theme="dark"] #cursor-orb{mix-blend-mode:difference}
[data-theme="light"] #cursor-orb{mix-blend-mode:normal;opacity:.12}

#particles-canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none}

nav{position:fixed;top:0;left:0;width:100%;z-index:1000;padding:16px 0;transition:.4s}
nav.scrolled{background:var(--nav-bg);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid var(--border);padding:10px 0}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{font-size:22px;font-weight:800;color:var(--accent);white-space:nowrap}
.nav-actions{display:flex;align-items:center;gap:8px}
.nav-actions button{background:var(--glass-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--border);color:var(--text2);width:36px;height:36px;border-radius:10px;cursor:pointer;font-size:16px;transition:.3s;display:flex;align-items:center;justify-content:center}
.nav-actions button:hover{background:var(--glass-bg);color:var(--text);border-color:var(--border-hover)}
.nav-actions .lang-btn{width:auto;padding:0 10px;font-size:12px;font-weight:700;letter-spacing:.5px}
.nav-actions .lang-btn.active{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.theme-icon{font-size:15px}
.nav-links{display:flex;gap:24px;list-style:none}
.nav-links a{font-size:13px;font-weight:500;color:var(--text2);transition:.3s;position:relative;white-space:nowrap}
.nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--accent);transition:.3s;border-radius:1px}
.nav-links a:hover,.nav-links a.active{color:var(--text)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-toggle{display:none!important;flex-direction:column;gap:5px;cursor:pointer;background:var(--glass-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--border);border-radius:10px;padding:8px}
.nav-toggle span{width:20px;height:2px;background:var(--text2);border-radius:2px;transition:.3s;display:block}
.nav-toggle.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.nav-toggle.active span:nth-child(2){opacity:0}
.nav-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

.hero{min-height:100vh;display:flex;align-items:center;position:relative;z-index:1;padding-top:80px;scroll-margin-top:0}
.hero-content{max-width:800px}
.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border:1px solid var(--badge-border);border-radius:100px;font-size:13px;color:var(--accent2);margin-bottom:24px;background:var(--badge-bg)}
.hero-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse-dot 2s infinite}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.3}}
.hero h1{font-size:clamp(40px,8vw,80px);font-weight:800;line-height:1.1;margin-bottom:16px}
.hero h1 .accent-text{color:var(--accent)}
.hero .typewriter{font-size:clamp(18px,3vw,26px);font-weight:400;color:var(--text2);margin-bottom:24px;min-height:1.4em}
.hero .typewriter .cursor{display:inline-block;width:3px;height:1em;background:var(--accent);margin-left:4px;animation:blink 1s step-end infinite;vertical-align:text-bottom}
@keyframes blink{50%{opacity:0}}
.hero p{font-size:16px;color:var(--text2);max-width:600px;line-height:1.8;margin-bottom:36px}
.hero-buttons{display:flex;gap:16px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 32px;border-radius:12px;font-size:15px;font-weight:600;transition:.4s;cursor:pointer;border:none;font-family:inherit}
.btn-primary{background:var(--accent);color:var(--bg)}
.btn-primary:hover{transform:translateY(-3px);opacity:.85}
.btn-secondary{background:var(--glass-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--text);border:1px solid var(--border)}
.btn-secondary:hover{background:var(--glass-bg);transform:translateY(-3px)}
.btn-outline{background:transparent;color:var(--text2);border:1px solid var(--border)}
.btn-outline:hover{background:var(--glass-bg);color:var(--text)}
.hero-scroll{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--text3);font-size:12px;animation:bounce 2s infinite}
@keyframes bounce{0%,20%,50%,80%,100%{transform:translateX(-50%) translateY(0)}40%{transform:translateX(-50%) translateY(-10px)}60%{transform:translateX(-50%) translateY(-5px)}}

.section-header{text-align:center;margin-bottom:56px;position:relative;z-index:1}
.section-header .label{display:inline-block;font-size:11px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--text2);margin-bottom:12px}
.section-header h2{font-size:clamp(28px,5vw,44px);font-weight:800}
.section-header h2 span{color:var(--accent)}
.section-header p{color:var(--text2);margin-top:10px;max-width:500px;margin-left:auto;margin-right:auto;font-size:15px}

.about-grid{display:grid;grid-template-columns:280px 1fr;gap:60px;align-items:start;position:relative;z-index:1}
.about-avatar{position:relative}
.about-avatar .avatar-frame{border-radius:20px;border:2px solid var(--border);overflow:hidden;width:280px;height:280px}
.about-avatar .avatar-frame img{width:100%;height:100%;object-fit:cover;display:block}
.about-avatar .status-dot{position:absolute;bottom:16px;right:16px;width:24px;height:24px;background:var(--accent);border-radius:50%;border:3px solid var(--bg);animation:pulse-dot 2s infinite}
.about-text h3{font-size:22px;font-weight:700;margin-bottom:12px}
.about-text p{color:var(--text2);margin-bottom:14px;font-size:15px;line-height:1.8}
.about-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
.stat-card{background:var(--glass-bg);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);border:1px solid var(--border);border-radius:24px;padding:28px 20px;text-align:center;transition:.4s;box-shadow:0 8px 32px var(--card-shadow)}
.stat-card:hover{background:var(--glass-bg);transform:translateY(-6px);border-color:var(--border-hover);box-shadow:0 12px 48px var(--card-shadow)}
.stat-card .num{font-size:32px;font-weight:800;color:var(--accent);letter-spacing:-.5px}
.stat-card .lbl{font-size:12px;color:var(--text3);margin-top:6px;letter-spacing:.3px}

.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;position:relative;z-index:1}
.skill-category{background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--border);border-radius:20px;padding:28px;transition:.4s}
.skill-category:hover{background:var(--glass-bg);border-color:var(--border-hover);transform:translateY(-4px)}
.skill-category h4{font-size:16px;font-weight:600;margin-bottom:20px;display:flex;align-items:center;gap:10px}
.skill-category h4 .icon{font-size:20px}
.skill-item{margin-bottom:14px}
.skill-item:last-child{margin-bottom:0}
.skill-item .skill-info{display:flex;justify-content:space-between;font-size:13px;color:var(--text2);margin-bottom:6px}
.skill-item .skill-bar{width:100%;height:5px;background:var(--bg3);border-radius:3px;overflow:hidden}
.skill-item .skill-bar .fill{height:100%;border-radius:3px;background:var(--accent);width:0;transition:width 1.2s cubic-bezier(.25,.46,.45,.94)}
.skill-item .skill-bar .fill.animated{width:var(--pct)}

.project-filters{display:flex;justify-content:center;gap:10px;margin-bottom:36px;flex-wrap:wrap;position:relative;z-index:1}
.project-filters button{padding:8px 20px;background:var(--glass-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--border);border-radius:100px;font-size:13px;font-weight:500;color:var(--text2);cursor:pointer;transition:.3s;font-family:inherit}
.project-filters button:hover{color:var(--text);border-color:var(--border-hover)}
.project-filters button.active{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:24px;position:relative;z-index:1}
.project-card{background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--border);border-radius:20px;overflow:hidden;transition:.4s;perspective:1000px;cursor:pointer;display:block;position:relative}
.project-card:hover{transform:translateY(-8px);border-color:var(--border-hover);box-shadow:0 20px 60px var(--card-shadow)}
.project-card.hidden{display:none}
.project-card .click-hint{position:absolute;top:16px;right:16px;font-size:11px;color:#fff;opacity:0;transition:.3s;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:4px 10px;border-radius:6px;border:1px solid rgba(255,255,255,.15);z-index:2}
.project-card:hover .click-hint{opacity:1}
.project-card-inner{padding:28px}
.project-card .project-img{width:100%;height:140px;position:relative;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.project-card .project-img img{width:100%;height:100%;display:block;object-fit:cover}
.project-tag{display:inline-block;padding:4px 12px;font-size:11px;font-weight:600;border-radius:6px;background:var(--glass-bg);border:1px solid var(--border);color:var(--text2);margin-bottom:14px}
.project-card h3{font-size:18px;font-weight:700;margin-bottom:6px}
.project-card p{font-size:13px;color:var(--text2);line-height:1.7;margin-bottom:14px;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;display:-webkit-box}
.project-role{font-size:12px;color:var(--accent2);font-weight:500;margin-bottom:10px}
.project-stack{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.project-stack span{padding:3px 10px;font-size:11px;background:var(--glass-bg);border-radius:6px;color:var(--text2);border:1px solid var(--border)}

.modal-overlay{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:24px;opacity:0;transition:opacity .35s}
.modal-overlay.open{display:flex;opacity:1}
.modal{background:var(--bg2);border:1px solid var(--border);border-radius:20px;max-width:580px;width:100%;max-height:90vh;overflow-y:auto;position:relative;transform:scale(.92) translateY(16px);transition:transform .4s cubic-bezier(.22,1,.36,1)}
.modal-overlay.open .modal{transform:scale(1) translateY(0)}
.modal-close{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;background:var(--glass-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--border);color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.3s;z-index:2}
.modal-close:hover{color:var(--text);border-color:var(--border-hover)}
.modal-img{width:100%;height:200px;border-radius:20px 20px 0 0;overflow:hidden;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0}
.modal-img img{width:100%;height:100%;display:block;object-fit:cover}
.modal-img .img-label{position:absolute;bottom:16px;left:20px;font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.7)}
[data-theme="light"] .modal-img .img-label{color:rgba(0,0,0,.6)}
.modal-body{padding:28px 32px 32px}
.modal-tag{display:inline-block;padding:3px 10px;font-size:10px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;border-radius:6px;background:var(--glass-bg);border:1px solid var(--border);color:var(--accent2);margin-bottom:10px}
.modal-body h2{font-size:24px;font-weight:800;line-height:1.2;margin-bottom:4px}
.modal-role{font-size:13px;color:var(--accent2);font-weight:500;margin-bottom:18px}
.modal-desc{font-size:14px;color:var(--text2);line-height:1.8;margin-bottom:24px}
.modal-section{margin-bottom:20px}
.modal-section:last-child{margin-bottom:0}
.modal-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:1.2px;color:var(--text3);margin-bottom:6px}
.modal-value{font-size:14px;color:var(--text);line-height:1.6}
.modal-stack{display:flex;flex-wrap:wrap;gap:6px}
.modal-stack span{padding:4px 12px;font-size:11px;font-weight:500;background:var(--glass-bg);border:1px solid var(--border);border-radius:6px;color:var(--text2)}

.timeline{position:relative;z-index:1;max-width:800px;margin:0 auto}
.timeline::before{content:'';position:absolute;left:24px;top:0;width:2px;height:100%;background:linear-gradient(var(--timeline-gradient))}
.timeline-item{position:relative;padding-left:64px;padding-bottom:44px}
.timeline-item:last-child{padding-bottom:0}
.timeline-item .dot{position:absolute;left:16px;top:4px;width:18px;height:18px;border-radius:50%;background:var(--bg);border:3px solid var(--accent);z-index:2}
.timeline-item .dot.glow{box-shadow:0 0 20px rgba(255,255,255,.1)}
[data-theme="light"] .timeline-item .dot.glow{box-shadow:0 0 20px rgba(0,0,0,.1)}
.timeline-item .date{font-size:12px;color:var(--accent);font-weight:600;margin-bottom:4px}
.timeline-item h4{font-size:17px;font-weight:700;margin-bottom:4px}
.timeline-item .company{font-size:13px;color:var(--accent2);font-weight:500;margin-bottom:8px}
.timeline-item p{font-size:14px;color:var(--text2);line-height:1.7}

.testimonials{position:relative;z-index:1;overflow:hidden;touch-action:pan-y}
.testimonials-track{display:flex;transition:transform .6s cubic-bezier(.25,.46,.45,.94)}
.testimonial-card{min-width:100%;padding:0 12px}
.testimonial-inner{background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--border);border-radius:20px;padding:40px;text-align:center;max-width:680px;margin:0 auto}
.testimonial-inner .quote{font-size:15px;color:var(--text2);line-height:1.8;font-style:italic;margin-bottom:20px}
.testimonial-inner .quote::before{content:'\201C';font-size:56px;color:var(--text3);line-height:0;vertical-align:-20px;margin-right:6px;font-family:Georgia,serif}
.testimonial-inner .author{font-weight:600;margin-bottom:2px}
.testimonial-inner .role{font-size:13px;color:var(--text3)}
.testimonial-dots{display:flex;justify-content:center;gap:10px;margin-top:20px}
.testimonial-dots button{width:10px;height:10px;border-radius:50%;border:none;background:var(--text3);cursor:pointer;transition:.3s;padding:0}
.testimonial-dots button.active{background:var(--accent);width:28px;border-radius:5px}

.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;position:relative;z-index:1}
.blog-card{background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--border);border-radius:20px;padding:28px;transition:.4s}
.blog-card:hover{transform:translateY(-4px);border-color:var(--border-hover)}
.blog-card .category{font-size:11px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:1px;margin-bottom:10px}
.blog-card h4{font-size:17px;font-weight:700;margin-bottom:8px;line-height:1.4}
.blog-card p{font-size:13px;color:var(--text2);line-height:1.7;margin-bottom:14px}
.blog-card .date{font-size:12px;color:var(--text3)}
.blog-card .read-more{color:var(--accent);font-size:13px;font-weight:500;display:inline-flex;align-items:center;gap:6px;transition:.3s}
.blog-card .read-more{color:var(--accent);font-size:13px;font-weight:500;display:inline-flex;align-items:center;gap:6px;transition:.3s}
.blog-card .read-more:hover{gap:12px}

.blog-page .blog-grid{grid-template-columns:repeat(auto-fit,minmax(360px,1fr))}
.blog-page .blog-card{cursor:pointer;transition:.4s}
.blog-page .blog-card:hover{transform:translateY(-6px);border-color:var(--border-hover)}
.blog-hero{padding:140px 0 60px;position:relative;z-index:1}
.blog-hero h1{font-size:clamp(32px,5vw,48px);font-weight:800;margin-bottom:12px}
.blog-hero p{font-size:16px;color:var(--text2);max-width:500px}
.blog-empty{text-align:center;padding:80px 0;color:var(--text3);font-size:15px}

.article-hero{padding:140px 0 40px;position:relative;z-index:1}
.article-hero .article-meta{display:flex;gap:16px;font-size:13px;color:var(--text3);margin-bottom:12px;flex-wrap:wrap}
.article-hero .article-category{display:inline-block;padding:4px 12px;font-size:11px;font-weight:600;border-radius:6px;background:var(--glass-bg);border:1px solid var(--border);color:var(--text2);margin-bottom:14px}
.article-hero h1{font-size:clamp(28px,4vw,42px);font-weight:800;line-height:1.2;margin-bottom:8px}
.article-hero .article-desc{font-size:16px;color:var(--text2);line-height:1.7;max-width:700px}
.article-body{max-width:720px;margin:0 auto;padding:0 24px 80px;position:relative;z-index:1}
.article-body .article-content{font-size:17px;line-height:1.8;color:var(--text)}
.article-body .article-content h2{font-size:24px;font-weight:700;margin-top:48px;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.article-body .article-content h3{font-size:20px;font-weight:600;margin-top:36px;margin-bottom:12px}
.article-body .article-content p{margin-bottom:20px}
.article-body .article-content p:last-child{margin-bottom:0}
.article-body .article-content code{font-size:14px;background:var(--bg3);padding:2px 6px;border-radius:4px;font-family:'JetBrains Mono','Fira Code',monospace}
.article-body .article-content pre{background:var(--bg3);border:1px solid var(--border);border-radius:12px;padding:20px;overflow-x:auto;margin-bottom:24px;position:relative}
.article-body .article-content pre code{background:none;padding:0;border-radius:0;font-size:14px;line-height:1.6;display:block;color:var(--text)}
.article-body .article-content pre .code-lang{position:absolute;top:8px;right:12px;font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px}
.article-body .article-content ul{margin-bottom:24px;padding-left:24px}
.article-body .article-content ul li{margin-bottom:8px;list-style:disc}
.article-body .article-content ul li::marker{color:var(--accent)}
.article-body .article-content .list-heading{font-weight:600;margin-bottom:10px;display:block;color:var(--text)}
.article-divider{border:none;border-top:1px solid var(--border);margin:48px 0}
.article-footer{max-width:720px;margin:0 auto;padding:0 24px 40px;position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.article-footer .btn{font-size:14px;padding:10px 24px}
.article-footer .btn .arrow{transition:transform .3s}
.article-footer .btn:hover .arrow{transform:translateX(-4px)}

.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;z-index:1;align-items:start}
.contact-clock{text-align:right;color:var(--text);font-size:13px;pointer-events:none}
.clock-face{width:100px;height:100px;margin:0 auto 8px}
.clock-svg{width:100%;height:100%;display:block}
.clock-svg line{transition:transform .2s cubic-bezier(.4,2.08,.55,.44);transform-origin:50px 50px}
.contact-clock .time{font-size:36px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:2px}
.contact-clock .date{font-size:13px;margin-top:2px;color:var(--text2)}
.contact-links{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.contact-link{display:flex;align-items:center;gap:14px;padding:14px 18px;background:var(--glass-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--border);border-radius:12px;transition:.3s}
.contact-link:hover{background:var(--glass-bg);transform:translateX(6px);border-color:var(--border-hover)}
.contact-link .icon{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:10px;font-size:18px;flex-shrink:0;background:var(--icon-bg);color:var(--text)}
.contact-link .icon.txt{font-size:14px;font-weight:700;letter-spacing:-.5px}
.contact-link .info-label{font-size:11px;color:var(--text3)}
.contact-link .info-value{font-size:13px;font-weight:500}
.contact-links-divider{grid-column:1/-1;height:1px;background:var(--border);margin:6px 0}
.contact-form{display:flex;flex-direction:column;gap:0;padding-right:130px}
.contact-form .field-group{margin-bottom:14px}
.contact-form .field-group:last-of-type{margin-bottom:0}
.contact-form .btn{margin-top:8px}
.contact-form input,.contact-form textarea{padding:14px 18px;background:var(--glass-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--border);border-radius:12px;color:var(--text);font-size:14px;font-family:inherit;transition:.3s;outline:none}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--accent);background:var(--glass-bg)}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:var(--text3)}
.contact-form textarea{min-height:120px;resize:vertical}
.contact-form .field-error{border-color:#ff4444!important}
.contact-form .error-msg{font-size:12px;color:#ff4444;margin-top:-8px;display:none}

footer{text-align:center;padding:40px 24px;position:relative;z-index:1;border-top:1px solid var(--border)}
footer p{font-size:13px;color:var(--text3)}
.back-to-top{position:fixed;bottom:30px;right:30px;width:48px;height:48px;border-radius:50%;background:var(--accent);color:var(--bg);border:none;cursor:pointer;font-size:20px;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(20px);transition:.4s;z-index:999}
.back-to-top.visible{opacity:1;transform:translateY(0)}
.back-to-top:hover{transform:translateY(-4px);opacity:.85}

.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s ease,transform .8s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-left{opacity:0;transform:translateX(-60px);transition:opacity .8s ease,transform .8s ease}
.reveal-left.visible{opacity:1;transform:translateX(0)}
.reveal-right{opacity:0;transform:translateX(60px);transition:opacity .8s ease,transform .8s ease}
.reveal-right.visible{opacity:1;transform:translateX(0)}
.reveal-scale{opacity:0;transform:scale(.9);transition:opacity .8s ease,transform .8s ease}
.reveal-scale.visible{opacity:1;transform:scale(1)}

@media(max-width:900px){
  .about-grid{grid-template-columns:1fr}
  .about-avatar{display:flex;justify-content:center;margin-bottom:20px}
  .contact-grid{grid-template-columns:1fr}
  .contact-clock{display:none}
}
@media(max-width:768px){
  .nav-links{position:fixed;top:0;right:-100%;width:75%;height:100vh;background:var(--nav-bg);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);flex-direction:column;gap:0;padding:100px 32px;transition:.4s;border-left:1px solid var(--border)}
  .nav-links.open{right:0}
  .nav-links a{padding:14px 0;border-bottom:1px solid var(--border);font-size:15px}
  .nav-toggle{display:flex!important}
  .hero h1{font-size:34px}
  .projects-grid{grid-template-columns:1fr}
  .skills-grid{grid-template-columns:1fr}
  .blog-grid{grid-template-columns:1fr}
  .about-stats{grid-template-columns:repeat(3,1fr)}
  .blog-page .blog-grid{grid-template-columns:1fr}
  .blog-hero{padding:100px 0 40px}
  .article-hero{padding:100px 0 30px}
  .article-body .article-content{font-size:16px}
  .article-body .article-content h2{font-size:22px;margin-top:36px}
  .article-body .article-content pre{padding:16px;font-size:13px}
}
@media(max-width:480px){
  section{padding:60px 0}
  .about-stats{grid-template-columns:1fr}
  .hero-buttons{flex-direction:column}
  .btn{width:100%;justify-content:center}
  .nav-actions .lang-btn{font-size:10px;padding:0 8px}
  .modal-overlay{padding:16px}
  .modal-body{padding:20px 24px 24px}
  .modal-img{height:160px;border-radius:16px 16px 0 0}
  .contact-links{grid-template-columns:1fr}
}