:root{
  --bg: #0B0E13;
  --bg-accent: #101622;
  --glass: rgba(255,255,255,0.08);
  --glass-strong: rgba(255,255,255,0.12);
  --border: rgba(255,255,255,0.25);
  --text: #E9EEF6;
  --muted: #B9C4D6;
  --primary: #7BD2FF;
  --primary-2: #8B8BFF;
  --shadow: 0 10px 30px rgba(0,0,0,0.35);
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  font: 500 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1200px 800px at 10% 10%, #131a2a 0, transparent 70%),
              radial-gradient(1200px 800px at 90% 20%, #181524 0, transparent 60%),
              radial-gradient(1000px 800px at 50% 100%, #142231 0, transparent 60%),
              var(--bg);
  overflow-x:hidden;
}

.bg{position:fixed;inset:0;z-index:-2}
.bg-noise{
  position:absolute;inset:0;opacity:.08;mix-blend-mode:soft-light;pointer-events:none;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 2px, transparent 2px 4px),
                    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 2px, transparent 2px 4px);
}
.bg-blobs{position:absolute;inset:0;filter:url(#gooey);opacity:.5}
.bg-blobs .blob{
  position:absolute;width:200px;height:200px;border-radius:50%;
  background: radial-gradient(60% 60% at 40% 40%, rgba(123,210,255,.9), rgba(139,139,255,.75) 60%, rgba(139,139,255,.2));
  filter: blur(12px);
  animation: float 18s ease-in-out infinite;
}
.bg-blobs .blob.b2{background: radial-gradient(60% 60% at 40% 40%, rgba(139,139,255,.9), rgba(123,210,255,.75) 60%, rgba(123,210,255,.2));animation-duration:22s}
.bg-blobs .blob.b3{background: radial-gradient(60% 60% at 40% 40%, rgba(255,170,227,.9), rgba(139,139,255,.65) 60%, rgba(139,139,255,.15));animation-duration:26s}

@keyframes float{0%{transform:translate(5vw,10vh)}25%{transform:translate(70vw,20vh)}50%{transform:translate(40vw,70vh)}75%{transform:translate(10vw,50vh)}100%{transform:translate(5vw,10vh)}}

.site-header{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:16px;
  justify-content:space-between;margin:16px; padding:10px 16px; border-radius:16px;
}
.header .nav-icons{display:flex;gap:8px}
.nav__link{display:grid;place-items:center;inline-size:40px;block-size:40px;border-radius:10px;color:var(--text);text-decoration:none;opacity:.95;border:1px solid rgba(255,255,255,.12)}
.nav__link:hover{background:var(--glass-strong)}
.brand{display:flex;align-items:center;gap:12px}
.logo{display:grid;place-items:center;inline-size:38px;block-size:38px;border-radius:10px;background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#081018;font-weight:900}
.brand-title{font-weight:700}
.brand-sub{font-size:.85rem;color:var(--muted)}

.nav{display:flex;gap:12px;flex-wrap:wrap}
.nav-link{color:var(--text);text-decoration:none;padding:8px 10px;border-radius:10px;opacity:.9}
.nav-link:hover{background:var(--glass-strong)}

.header-actions{display:flex;gap:10px;align-items:center}
#langSwitcher{appearance:none;background:var(--glass);color:var(--text);border:1px solid var(--border);padding:8px 10px;border-radius:10px}

.btn{cursor:pointer;user-select:none;border:1px solid transparent;border-radius:12px;padding:10px 14px;transition:transform .15s ease, background .2s ease, border-color .2s ease;color:var(--text)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(135deg, rgba(123,210,255,.2), rgba(139,139,255,.2));border-color:rgba(255,255,255,.22)}
.btn.primary:hover{background:linear-gradient(135deg, rgba(123,210,255,.35), rgba(139,139,255,.35))}
.btn.ghost{background:transparent;border-color:rgba(255,255,255,.18)}
.btn.ghost:hover{background:rgba(255,255,255,.08)}
.btn.btn-print{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
.btn.btn-print:hover{background:rgba(255,255,255,.12)}

.glass{
  background: var(--glass);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: var(--shadow);
  border-radius: 16px;
}
@supports (backdrop-filter: blur(10px)){
  .glass{backdrop-filter: blur(18px) saturate(160%);-webkit-backdrop-filter: blur(18px) saturate(160%);}
}

.site-main{padding:18px;max-width:1100px;margin-inline:auto}

.hero{position:relative;overflow:hidden;display:grid;place-items:center;min-block-size:52vh;margin-block:16px;padding:40px}
.hero-inner{text-align:center;max-width:900px}
.hero-title{margin:0 0 8px;font-size:clamp(24px,3.4vw,40px)}
.hero-subtitle{margin:0 0 6px;color:var(--muted)}
.hero-roles{opacity:.85;margin-block:8px 18px}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

.liquid{position:relative}
.liquid .liquid-layer{position:absolute;inset:-30%;filter: blur(22px) saturate(140%);pointer-events:none}
.liquid::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(120deg, rgba(255,255,255,.18), rgba(255,255,255,0) 30%, rgba(255,255,255,.14) 60%, rgba(255,255,255,0));opacity:.25;mix-blend-mode:screen;pointer-events:none}
.liquid:hover::before{opacity:.35}

.section{margin-block:28px}
.section-title{margin:0 0 14px;font-size:1.4rem}
.section-text{margin:0 0 12px;color:var(--muted)}
.grid{display:grid;grid-template-columns:2fr 1fr;gap:16px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.card{padding:18px}
.bullets{margin:8px 0 0 0;padding:0 1rem;color:var(--muted)}
.bullets li{margin:.25rem 0}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-items:stretch}
.stat{display:grid;place-items:center;background:linear-gradient(180deg, rgba(255,255,255,.06), transparent);padding:14px;border-radius:12px;border:1px solid rgba(255,255,255,.12)}
.stat-num{font-size:1.35rem;font-weight:800}
.stat-label{font-size:.85rem;color:var(--muted)}

.project .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.project .tags span{font-size:.8rem;color:var(--muted);background:rgba(255,255,255,.06);padding:6px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.12)}

.contact{display:grid;gap:12px}
.contact-actions{display:flex;gap:10px;flex-wrap:wrap}

.site-footer{margin:16px;display:flex;justify-content:space-between;align-items:center;padding:12px 16px;font-size:.95rem}
.site-footer .foot-right{color:var(--muted)}

@media (max-width: 900px){
  .grid{grid-template-columns:1fr}
  .site-header{flex-wrap:wrap}
  .brand-sub{display:none}
}

/* RTL/LTR friendliness */
html[dir="rtl"] .nav-link{padding-inline:12px}
html[dir="ltr"] .brand{flex-direction:row}

/* Focus and a11y */
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:10px}

/* Print styles (resume) */
@media print{
  :root{--text:#0b0e13;--muted:#111}
  body{background:white;color:var(--text)}
  .bg,.site-header .header-actions,#hero .hero-cta,.site-footer{display:none!important}
  .glass,.card,.site-header,.site-main,.section,.project .tags span{box-shadow:none!important;border-color:#ccc!important;background:white!important}
  .hero{min-block-size:auto;padding:0}
  a{color:inherit;text-decoration:none}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
}

/* Containers and legacy utility classes from previous layout */
.container{max-width:1100px;margin-inline:auto;padding-inline:16px}
.section__subtitle{display:block;color:var(--muted);margin-bottom:6px}
.section__title{margin:0 0 14px;font-size:1.6rem}
.grid{display:grid;gap:16px}

/* Buttons mapping to legacy .button from previous site */
.button{cursor:pointer;border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:10px 14px;color:var(--text);background:linear-gradient(135deg, rgba(123,210,255,.2), rgba(139,139,255,.2));display:inline-flex;gap:8px;align-items:center;text-decoration:none}
.button:hover{background:linear-gradient(135deg, rgba(123,210,255,.35), rgba(139,139,255,.35))}
.button--ghost{background:transparent;border-color:rgba(255,255,255,.18)}
.button--ghost:hover{background:rgba(255,255,255,.08)}

/* Home section */
.home__container{align-items:center}
.home__data{display:grid;gap:10px}
.home__handle{display:grid;place-items:center}
.home__img{max-inline-size:220px;border-radius:16px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);padding:6px}
.home__social{display:flex;gap:10px;justify-content:center}
.home__social-link{display:grid;place-items:center;inline-size:40px;block-size:40px;border-radius:10px;border:1px solid rgba(255,255,255,.12);color:var(--text);text-decoration:none}
.home__social-link:hover{background:var(--glass-strong)}
.home__scroll{display:flex;gap:8px;align-items:center;justify-content:center;color:var(--muted);text-decoration:none;margin-top:8px}

/* About */
.about__container{grid-template-columns:1fr 1.4fr}
.about__img{max-inline-size:260px;justify-self:center}
.about__info{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.about__box{display:grid;gap:6px;text-align:center}
.about__icon{font-size:1.4rem;color:var(--primary)}
.about__button-contact{margin-top:10px}

/* Skills */
.skills__container{grid-template-columns:1fr 1fr}
.skills__box{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.skills__data{display:flex;gap:10px;align-items:flex-start;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);padding:10px;border-radius:10px}
.skills__data i{color:var(--primary)}
.skills__name{margin:0}
.skills__level{color:var(--muted);font-size:.85rem}

/* Services */
.services__container{grid-template-columns:1fr 1fr}
.services__card .serv{display:flex;align-items:center;justify-content:space-between}
.services__modal{position:fixed;inset:0;display:none;place-items:center;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);z-index:70}
.services__modal.open{display:grid}
.services__modal-content{max-width:680px;width:min(92vw,680px);padding:18px;border-radius:16px}
.services__modal-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.services__modal-item{display:flex;gap:8px;align-items:flex-start}
.services__modal-item i{color:var(--primary)}

/* Work */
.work__filters{display:flex;gap:8px;justify-content:center;margin-bottom:12px}
.work__container{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.work__img{width:100%;height:180px;object-fit:cover;border-radius:12px;border:1px solid rgba(255,255,255,.12);margin-bottom:8px;background:rgba(255,255,255,.04)}
.work__title{margin:0 0 8px}
.work__button{align-self:flex-start}
.work__item.active-work{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28)}

/* Contact */
.contact__container{grid-template-columns:1fr 1fr}
.contact__card{padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);display:grid;gap:6px}
.contact__form-div{display:grid;gap:6px;margin-bottom:10px}
.contact__form-input{padding:10px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.02);color:var(--text)}

/* Footer */
.footer{margin:16px}
.footer__container{display:grid;gap:10px;align-items:center}
.footer__list,.footer__social{display:flex;gap:10px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.footer__link,.footer__social-link{color:var(--text);text-decoration:none}
.footer__social-link{display:grid;place-items:center;inline-size:36px;block-size:36px;border-radius:10px;border:1px solid rgba(255,255,255,.12)}
.footer__social-link:hover{background:var(--glass-strong)}

@media (max-width: 900px){
  .about__container,.skills__container,.services__container,.contact__container{grid-template-columns:1fr}
}