/* NOBIN MORSALIN — PREMIUM UI SYSTEM v1.2
   Additive layer only: preserves existing render, API, chat and navigation logic. */
:root{--ease-premium:cubic-bezier(.22,1,.36,1);--surface-glass:rgba(13,17,23,.72);--line-soft:rgba(255,255,255,.08);--accent-soft:rgba(0,245,160,.12)}
html{scroll-padding-top:88px}body{background:radial-gradient(circle at 78% 8%,rgba(0,245,160,.035),transparent 28%),radial-gradient(circle at 8% 52%,rgba(0,212,255,.025),transparent 25%),var(--bg)}body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:80px 80px;mask-image:linear-gradient(to bottom,black,transparent 88%);opacity:.45}
.nav{transition:background .35s ease,box-shadow .35s ease,padding .35s var(--ease-premium)}.nav.scrolled{box-shadow:0 10px 40px rgba(0,0,0,.2)}.nav-links a{position:relative}.nav-links a:not(.nav-cta)::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease-premium)}.nav-links a:not(.nav-cta):hover::after,.nav-links a.is-current:not(.nav-cta)::after{transform:scaleX(1)}.nav-links a.is-current{color:var(--text)}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid rgba(0,245,160,.65);outline-offset:3px}
.hero{isolation:isolate}.hero-content{animation:premiumHeroIn .8s var(--ease-premium) both}.hero-visual{animation:premiumHeroVisual 1s .08s var(--ease-premium) both}@keyframes premiumHeroIn{from{opacity:0;transform:translate3d(0,24px,0)}to{opacity:1;transform:none}}@keyframes premiumHeroVisual{from{opacity:0;transform:translate3d(24px,0,0) scale(.98)}to{opacity:1;transform:none}}
.code-card{position:relative;transition:transform .5s var(--ease-premium),box-shadow .5s ease,border-color .35s ease}.code-card::after{content:"";position:absolute;inset:-1px;border-radius:inherit;background:linear-gradient(120deg,transparent 20%,rgba(0,245,160,.18),transparent 55%);opacity:0;transform:translateX(-30%);pointer-events:none;transition:opacity .35s ease,transform .8s var(--ease-premium)}.code-card:hover{transform:translateY(-7px) rotateX(1deg);border-color:rgba(0,245,160,.25);box-shadow:0 25px 70px rgba(0,0,0,.38),0 0 50px rgba(0,245,160,.07)}.code-card:hover::after{opacity:1;transform:translateX(30%)}
.btn{position:relative;overflow:hidden;min-height:48px;transition:transform .28s var(--ease-premium),box-shadow .28s ease,background .28s ease,border-color .28s ease}.btn::after{content:"";position:absolute;top:-60%;left:-35%;width:25%;height:220%;background:rgba(255,255,255,.22);transform:rotate(24deg) translateX(-250%);transition:transform .7s var(--ease-premium);pointer-events:none}.btn:hover::after{transform:rotate(24deg) translateX(650%)}
.section{position:relative}.section::before{content:"";position:absolute;top:0;left:50%;width:min(1160px,calc(100% - 48px));height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--line-soft),transparent);opacity:.55}.section-label{display:flex;align-items:center;gap:10px;text-transform:uppercase;font-size:.7rem;letter-spacing:.14em}.section-label::after{content:"";width:44px;height:1px;background:linear-gradient(90deg,var(--accent),transparent)}.section-title{letter-spacing:-.035em}.section-sub{line-height:1.75}.about-grid,.contact-grid{align-items:start}.about-content,.contact-info{padding-top:4px}
.skill-tag{transition:transform .25s var(--ease-premium),background .25s ease,border-color .25s ease}.skill-tag:hover{transform:translateY(-2px);background:rgba(0,245,160,.12);border-color:rgba(0,245,160,.35)}
.service-card,.project-card,.workflow-step,.contact-form-wrap{transition:transform .4s var(--ease-premium),border-color .3s ease,box-shadow .4s ease,background .3s ease}.service-card,.project-card,.workflow-step{position:relative;overflow:hidden;background:linear-gradient(145deg,rgba(22,27,34,.86),rgba(10,14,19,.92))}.service-card::before,.project-card::before,.workflow-step::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--mx,50%) var(--my,0%),rgba(0,245,160,.10),transparent 34%);opacity:0;transition:opacity .35s ease;pointer-events:none}.service-card:hover::before,.project-card:hover::before,.workflow-step:hover::before{opacity:1}.service-card:hover,.project-card:hover,.workflow-step:hover{transform:translateY(-7px);box-shadow:0 24px 55px rgba(0,0,0,.3),0 0 0 1px rgba(0,245,160,.035)}
.project-image{overflow:hidden}.project-image img{transition:transform .7s var(--ease-premium),filter .7s ease}.project-card:hover .project-image img{transform:scale(1.045);filter:saturate(1.06)}.project-links a{transition:transform .25s ease,color .25s ease}.project-links a:hover{transform:translateX(3px);color:var(--accent)}.workflow-step::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent-2));transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-premium)}.workflow-step:hover::after{transform:scaleX(1)}
.contact-form input,.contact-form textarea{transition:border-color .25s ease,box-shadow .25s ease,background .25s ease}.contact-form input:focus,.contact-form textarea:focus{border-color:rgba(0,245,160,.5);box-shadow:0 0 0 4px rgba(0,245,160,.07);outline:none;background:rgba(255,255,255,.035)}.footer{border-top:1px solid var(--border)}
.premium-reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .8s var(--ease-premium)}.premium-reveal.is-visible{opacity:1;transform:none}.premium-reveal[data-reveal-delay="1"]{transition-delay:.08s}.premium-reveal[data-reveal-delay="2"]{transition-delay:.16s}.premium-reveal[data-reveal-delay="3"]{transition-delay:.24s}.premium-stagger>*{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .65s var(--ease-premium)}.premium-stagger.is-visible>*{opacity:1;transform:none}.premium-stagger.is-visible>*:nth-child(2){transition-delay:.06s}.premium-stagger.is-visible>*:nth-child(3){transition-delay:.12s}.premium-stagger.is-visible>*:nth-child(4){transition-delay:.18s}.premium-stagger.is-visible>*:nth-child(5){transition-delay:.24s}.premium-stagger.is-visible>*:nth-child(6){transition-delay:.30s}
.premium-scroll-progress{position:fixed;top:0;left:0;width:0;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent-2));z-index:11000;box-shadow:0 0 12px rgba(0,245,160,.4);pointer-events:none}.premium-backtop{position:fixed;right:20px;bottom:24px;width:44px;height:44px;border:1px solid var(--border-hi);border-radius:50%;background:rgba(13,17,23,.82);backdrop-filter:blur(14px);color:var(--text);display:grid;place-items:center;opacity:0;visibility:hidden;transform:translateY(12px);transition:.3s var(--ease-premium);z-index:9000;cursor:pointer;box-shadow:0 12px 30px rgba(0,0,0,.28)}.premium-backtop.is-visible{opacity:1;visibility:visible;transform:none}.premium-backtop:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-3px)}.premium-section-marker{font-family:var(--font-mono);font-size:.65rem;color:rgba(139,148,158,.42);letter-spacing:.08em;margin-left:auto}
/* Mobile navigation polish. Existing main.js still owns the active state. */
@media(max-width:760px){
  html{scroll-padding-top:76px}.nav{padding:13px 0}.nav.scrolled{padding:10px 0}.nav-inner{padding:0 16px}.nav-logo{font-size:1.08rem;z-index:1002}.nav-toggle{display:flex;position:relative;z-index:1002;width:42px;height:42px;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:12px;background:rgba(13,17,23,.78);backdrop-filter:blur(12px)}.nav-toggle span{position:absolute;width:20px;transition:transform .3s var(--ease-premium),opacity .2s ease}.nav-toggle span:nth-child(1){transform:translateY(-6px)}.nav-toggle span:nth-child(2){transform:translateY(0)}.nav-toggle span:nth-child(3){transform:translateY(6px)}.nav-toggle.active span:nth-child(1){transform:rotate(45deg)}.nav-toggle.active span:nth-child(2){opacity:0;transform:scaleX(.2)}.nav-toggle.active span:nth-child(3){transform:rotate(-45deg)}
  .nav-links{position:fixed;top:0;right:0;width:min(88vw,360px);height:100dvh;padding:92px 18px 28px;display:flex;flex-direction:column;align-items:stretch;gap:6px;background:rgba(8,12,16,.97);border-left:1px solid var(--border);box-shadow:-30px 0 80px rgba(0,0,0,.45);backdrop-filter:blur(22px);transform:translateX(105%);visibility:hidden;opacity:0;transition:transform .4s var(--ease-premium),opacity .3s ease,visibility .4s;overflow-y:auto;overscroll-behavior:contain}.nav-links.active{transform:translateX(0);visibility:visible;opacity:1}.nav-links li{width:100%}.nav-links a{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:50px;padding:13px 15px;border:1px solid transparent;border-radius:13px;font-size:.95rem}.nav-links a:hover{background:rgba(255,255,255,.035)}.nav-links a:not(.nav-cta)::after{left:15px;right:auto;bottom:8px;width:24px}.nav-links a.nav-cta{justify-content:center;margin-top:10px;min-height:52px}.nav-links a.is-current:not(.nav-cta){background:rgba(0,245,160,.07);border-color:rgba(0,245,160,.16);color:var(--accent)}
  .hero{min-height:auto;padding-top:108px;padding-bottom:72px}.hero .container{grid-template-columns:1fr;gap:38px}.hero-title{font-size:clamp(2.35rem,12vw,4rem);line-height:1.02}.hero-sub{font-size:.94rem;line-height:1.7;margin-bottom:30px}.hero-actions{gap:10px;margin-bottom:38px}.hero-actions .btn{flex:1 1 100%;justify-content:center;width:100%;padding:13px 18px}.hero-stats{justify-content:space-between;gap:12px;width:100%}.stat-num{font-size:1.55rem}.stat-divider{height:32px}.code-body{padding:17px;font-size:.69rem;line-height:1.65;overflow-x:auto;-webkit-overflow-scrolling:touch}.code-header{padding:12px 14px}.code-card:hover{transform:none}
  .section{padding:72px 0}.section::before{width:calc(100% - 32px)}.container{padding-inline:16px}.section-title{font-size:clamp(1.85rem,8vw,2.55rem)}.section-sub{font-size:.94rem;margin-bottom:34px}.about-grid{gap:48px}.about-badge{right:4px;bottom:-14px;padding:12px 14px}.service-card,.project-card,.workflow-step{border-radius:18px}.service-card:hover,.project-card:hover,.workflow-step:hover{transform:none}.projects-grid{grid-template-columns:1fr}.services-grid{grid-template-columns:1fr}.filter-bar{gap:8px;margin-bottom:32px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;scrollbar-width:none}.filter-bar::-webkit-scrollbar{display:none}.filter-btn{white-space:nowrap;min-height:40px}.premium-backtop{right:14px;bottom:calc(72px + env(safe-area-inset-bottom));width:42px;height:42px}.premium-section-marker{display:none}.section-label{font-size:.64rem}.section-label::after{width:28px}.contact-form-wrap{border-radius:20px}.form-row{grid-template-columns:1fr!important;gap:0!important}
}
@media(max-width:380px){.nav-links{width:92vw}.hero-title{font-size:clamp(2.15rem,11.5vw,3.1rem)}.hero-stats{gap:7px}.stat-num{font-size:1.35rem}.stat-label{font-size:.65rem}.code-body{font-size:.62rem}.container{padding-inline:13px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important}.premium-reveal,.premium-stagger>*{opacity:1!important;transform:none!important;transition:none!important}.hero-content,.hero-visual{animation:none!important}.code-card::after,.btn::after{display:none}.service-card::before,.project-card::before,.workflow-step::before{display:none}.nav-links,.nav-toggle span{transition:none!important}}