:root{--bg:#0b1020;--bg2:#111833;--text:#e6e9f2;--muted:#a3abc2;--blue:#3b82f6;--violet:#8b5cf6;--orange:#f59e0b;--glass:rgba(255,255,255,.05);--line:rgba(255,255,255,.12);--grad:linear-gradient(135deg,var(--blue),var(--violet) 55%,var(--orange))}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:17px/1.65 Inter,"PT Sans",system-ui,sans-serif;min-height:100vh;overflow-x:hidden}
a{color:#93c5fd}
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:radial-gradient(1200px 600px at 50% -10%,#16204a 0%,transparent 70%),var(--bg)}
.blob{position:absolute;width:520px;height:520px;border-radius:50%;filter:blur(90px);opacity:.38;animation:float 22s ease-in-out infinite alternate}
.b1{background:var(--blue);top:-140px;left:-120px}
.b2{background:var(--violet);top:30%;right:-160px;animation-duration:28s}
.b3{background:var(--orange);bottom:-200px;left:30%;opacity:.18;animation-duration:34s}
@keyframes float{0%{transform:translate(0,0) scale(1)}50%{transform:translate(80px,60px) scale(1.12)}100%{transform:translate(-60px,100px) scale(.95)}}
header{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:14px max(16px,calc((100% - 1040px)/2));background:rgba(11,16,32,.6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
main,footer{max-width:1040px;margin:auto;padding:16px}
.logo{font:800 20px Manrope,sans-serif;text-decoration:none;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
nav a{margin-left:22px;color:var(--muted);text-decoration:none;font-weight:500;transition:color .2s}
nav a:hover{color:#fff}
h1,h2,h3{font-family:Manrope,Montserrat,sans-serif;color:#fff;line-height:1.2}
h2{font-size:30px;margin:0 0 24px}
section{padding:56px 0}
.hero{display:flex;align-items:center;gap:56px;padding:90px 0 70px}
.hero h1{font-size:clamp(38px,6vw,64px);margin:0 0 16px;background:linear-gradient(90deg,#fff,#c4b5fd 40%,var(--blue) 70%,var(--orange));background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 8s linear infinite}
@keyframes shine{to{background-position:200% center}}
.hero p{font-size:20px;color:var(--muted);max-width:560px;margin:0 0 28px}
.photo-ring{flex:0 0 auto;padding:5px;border-radius:50%;background:conic-gradient(from 0deg,var(--blue),var(--violet),var(--orange),var(--blue));animation:spin 8s linear infinite;box-shadow:0 0 60px rgba(139,92,246,.35)}
.hero-photo{display:block;width:230px;height:230px;border-radius:50%;object-fit:cover;border:4px solid var(--bg);animation:spin 8s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.btn{display:inline-block;padding:12px 24px;margin:0 8px 8px 0;border-radius:999px;text-decoration:none;font-weight:600;color:#fff;background:var(--grad);background-size:150% 150%;box-shadow:0 8px 24px rgba(59,130,246,.3);transition:transform .25s,box-shadow .25s}
.btn:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(139,92,246,.45)}
.btn.alt{background:var(--glass);border:1px solid var(--line);box-shadow:none;backdrop-filter:blur(8px)}
.btn.alt:hover{border-color:rgba(255,255,255,.35);box-shadow:0 10px 28px rgba(59,130,246,.2)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.card,.since ul,#contacts p{background:var(--glass);border:1px solid var(--line);border-radius:18px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.card{padding:26px;position:relative;transition:transform .3s,box-shadow .3s,border-color .3s}
.card::before{content:"";position:absolute;left:26px;top:0;width:48px;height:3px;border-radius:3px;background:var(--grad)}
.card h3{margin:6px 0 10px;font-size:20px}
.card p{margin:0;color:var(--muted)}
.card:hover{transform:translateY(-6px);border-color:rgba(139,92,246,.5);box-shadow:0 18px 40px rgba(59,130,246,.18)}
.since ul{list-style:none;margin:0;padding:10px 26px}
.since li{padding:16px 0 16px 22px;position:relative;color:var(--muted);border-bottom:1px solid var(--line)}
.since li:last-child{border-bottom:0}
.since li::before{content:"";position:absolute;left:0;top:26px;width:9px;height:9px;border-radius:50%;background:var(--grad)}
.since strong{color:#fff}
#contacts p{padding:22px 26px;margin:0}
#contacts a{color:#fff;text-decoration:none;border-bottom:1px solid var(--violet)}
#contacts a:hover{color:var(--orange);border-color:var(--orange)}
footer{text-align:center;color:#6b7390;padding:40px 16px}
.js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.js [data-reveal].visible{opacity:1;transform:none}
.js .card[data-reveal].visible:hover{transform:translateY(-6px)}
@media (max-width:700px){header{flex-direction:column;gap:6px}nav a{margin:0 9px}.hero{flex-direction:column;text-align:center;gap:28px;padding:50px 0 30px}.hero p{margin-left:auto;margin-right:auto}.hero-photo{width:170px;height:170px}h2{font-size:26px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.js [data-reveal]{opacity:1;transform:none}}