:root{--black:#030303;--black-soft:#070604;--gold:#a78645;--gold-bright:#d1ae60;--gold-soft:#806735;--gold-dim:#5d4a29;--line:#292318;--line-soft:#19160f;--muted:#88847c;--white:#eee;--content:1180px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--black);color:var(--white);font-family:Inter,system-ui,sans-serif;overflow-x:hidden}.grain{position:fixed;inset:0;pointer-events:none;opacity:.045;z-index:20;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n' type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.preloader{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:#000;overflow:hidden;animation:loaderOut .55s 1.2s ease forwards;pointer-events:none}.stars,.stars:before,.stars:after{position:absolute;inset:0;background-repeat:repeat;background-size:180px 180px}.stars{background-image:radial-gradient(circle at 16% 20%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 76% 32%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 42% 78%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 88% 82%,#fff 0 1px,transparent 1.5px);opacity:.7}.stars:before,.stars:after{content:'';background-size:260px 260px;opacity:.45}.stars:before{background-image:radial-gradient(circle at 23% 64%,#fff 0 1px,transparent 1.4px),radial-gradient(circle at 58% 15%,#fff 0 1px,transparent 1.4px),radial-gradient(circle at 90% 52%,#fff 0 1px,transparent 1.4px);transform:scale(1.35)}.stars:after{background-image:radial-gradient(circle at 12% 42%,#fff 0 1.2px,transparent 1.5px),radial-gradient(circle at 67% 71%,#fff 0 1.2px,transparent 1.5px);transform:scale(1.7)}.rocket-wrap{position:relative;z-index:2;animation:rocketLaunch 1.1s cubic-bezier(.42,0,.24,1) .06s forwards;transform:translateY(48vh);opacity:0}.rocket{position:relative;width:58px;height:120px}.rocket-body{position:absolute;left:11px;top:16px;width:36px;height:68px;background:linear-gradient(135deg,#e5e5e5 0 48%,#777 49% 100%);border-radius:50% 50% 42% 42%/56% 56% 34% 34%;box-shadow:0 0 24px rgba(209,174,96,.18)}.rocket-nose{position:absolute;left:11px;top:0;width:0;height:0;border-left:18px solid transparent;border-right:18px solid transparent;border-bottom:25px solid #bda366}.rocket-window{position:absolute;left:22px;top:34px;width:14px;height:14px;border:3px solid #555;border-radius:50%;background:#111}.rocket-fin-left,.rocket-fin-right{position:absolute;top:66px;width:14px;height:27px;background:#777}.rocket-fin-left{left:3px;transform:skewY(28deg)}.rocket-fin-right{right:3px;transform:skewY(-28deg)}.rocket-flame{position:absolute;left:19px;top:80px;width:20px;height:40px;background:linear-gradient(#d1ae60,#8b6f38 42%,transparent);clip-path:polygon(50% 100%,0 25%,24% 40%,36% 0,50% 37%,65% 4%,76% 42%,100% 24%);filter:drop-shadow(0 0 9px rgba(209,174,96,.4));animation:flame .12s infinite alternate}.nav{position:fixed;top:0;left:0;right:0;height:86px;display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100vw - var(--content))/2));background:rgba(3,3,3,.9);border-bottom:1px solid var(--line);backdrop-filter:blur(10px);z-index:10;animation:navIn .7s ease both}.nav:after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.45}.brand{display:flex;align-items:center;width:210px;height:auto;overflow:visible;flex:0 0 auto}.brand img{display:block;width:210px;height:auto;max-width:100%;object-fit:contain;object-position:left center;filter:brightness(.82);transition:filter .3s,transform .3s;transform-origin:left center}.brand:hover img{filter:brightness(1);transform:scale(1.015)}.nav nav{display:flex;align-items:center;justify-content:flex-end;gap:28px;margin-left:auto}.nav nav a{position:relative;display:inline-flex;align-items:center;height:36px;padding:7px 0 9px;font:700 10px 'Space Mono',monospace;letter-spacing:.11em;color:var(--muted);text-decoration:none;white-space:nowrap;transition:color .25s,letter-spacing .25s}.nav nav a:hover,.nav nav a.active{color:var(--gold-bright);letter-spacing:.14em}.nav nav a.active:after{content:'';position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--gold);box-shadow:0 0 10px rgba(167,134,69,.32)}main{width:min(var(--content),calc(100% - 48px));margin:0 auto}.hero{min-height:68vh;padding-top:86px;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:86px;border-bottom:1px solid var(--line);position:relative}.hero:before{content:'';position:absolute;top:86px;left:0;right:0;height:1px;background:linear-gradient(90deg,var(--gold),transparent 58%);opacity:.8}.kicker{font:700 10px 'Space Mono',monospace;letter-spacing:.18em;color:var(--gold-bright);margin-bottom:24px;opacity:0;transform:translateY(18px);animation:up .8s .12s forwards}.hero h1{font-family:'M PLUS Rounded 1c',Inter,sans-serif;font-size:clamp(82px,13vw,168px);line-height:.8;letter-spacing:-.095em;margin:0;font-weight:900;opacity:0;transform:translateY(25px);animation:up .85s .18s forwards}.hero h1 span{color:#4d4b48}.hero p{color:#78746e;font-size:13px;max-width:470px;margin:30px 0 0;line-height:1.7;opacity:0;transform:translateY(18px);animation:up .8s .3s forwards}.setup{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);margin:68px 0 96px}.section{background:var(--black);padding:36px 34px 42px;min-height:280px;animation:sectionIn .65s ease both}.section:nth-child(2){animation-delay:.05s}.section:nth-child(3){animation-delay:.1s}.section:nth-child(4){animation-delay:.15s}.section:nth-child(5){animation-delay:.2s}.section:nth-child(6){animation-delay:.25s}.section:hover{background:var(--black-soft)}.title{display:flex;align-items:baseline;gap:15px;border-bottom:1px dotted #3f3525;padding-bottom:12px;margin-bottom:24px}.title>span{font:700 10px 'Space Mono',monospace;color:var(--gold-dim)}.title h2{font-family:'M PLUS Rounded 1c',Inter,sans-serif;margin:0;font-size:20px;font-weight:800;letter-spacing:-.035em;color:var(--gold-bright);text-shadow:0 0 20px rgba(209,174,96,.09);transition:text-shadow .3s,transform .3s}.section:hover .title h2{text-shadow:0 0 28px rgba(209,174,96,.23);transform:translateX(2px)}ul{list-style:none;padding:0;margin:0}li{position:relative;padding:7px 0 7px 18px;color:#8e8c88;font-size:13px;line-height:1.55;transition:color .2s,transform .2s}li:before{content:'➣';position:absolute;left:0;color:var(--gold-soft);transition:transform .2s,color .2s}li:hover{color:#ddd;transform:translateX(4px)}li:hover:before{color:var(--gold-bright);transform:translateX(2px)}em{display:block;color:#666;font-style:normal;font-size:11px;margin-top:2px}.page-content{margin:62px 0 96px;display:block;background:var(--line);padding:1px}.page-content .section{min-height:360px}.links{display:flex;flex-direction:column}.links a,.links>div{position:relative;display:flex;align-items:center;justify-content:space-between;gap:32px;padding:20px 12px 20px 0;border-bottom:1px solid var(--line-soft);text-decoration:none;transition:background .25s,padding .25s}.links a:last-child,.links>div:last-child{border-bottom:0}.links a:before{content:'';width:2px;height:18px;background:var(--gold);opacity:0;transform:translateX(-8px);transition:opacity .25s,transform .25s;position:absolute;left:-1px;top:50%;margin-top:-9px}.links a:hover{background:rgba(167,134,69,.035);padding-left:12px}.links a:hover:before{opacity:1;transform:none}.links strong{font-family:'M PLUS Rounded 1c',Inter,sans-serif;font-size:15px;color:var(--gold-bright);font-weight:800;letter-spacing:-.01em;transition:color .25s}.links span{font:11px 'Space Mono',monospace;color:#8f7b55;text-align:right;transition:color .25s}.links a:hover strong{color:#e0bd6c}.links a:hover span{color:#c5a761}.page-hero{min-height:56vh}.skill-levels{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-bottom:10px}.skill-levels span{padding:14px 16px;background:#080705;color:var(--gold);font:700 10px 'Space Mono',monospace;letter-spacing:.1em;text-align:center;border:1px solid var(--line-soft);position:relative}.skills{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}.skill{background:var(--black);padding:24px 22px 26px;min-height:148px;transition:background .25s,transform .25s}.skill:hover{background:var(--black-soft);transform:translateY(-2px)}.skill-top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.skill-info{min-width:0}.skill strong{display:block;font-family:'M PLUS Rounded 1c',Inter,sans-serif;font-size:16px;line-height:1.2;color:#ddd}.skill span{display:block;margin-top:6px;color:#6f6b64;font:10px 'Space Mono',monospace}.skill b{flex:0 0 auto;color:var(--gold-bright);font:800 10px 'Space Mono',monospace;letter-spacing:.1em;border:1px solid var(--gold-dim);padding:8px 10px}.skillbar{margin-top:18px;height:6px;background:#17130d;border:1px solid #2c2418;overflow:hidden}.skillbar i{display:block;height:100%;width:var(--skill);background:linear-gradient(90deg,var(--gold-soft),var(--gold-bright));box-shadow:0 0 14px rgba(209,174,96,.22);transform:scaleX(0);transform-origin:left;animation:skillFill .9s .25s cubic-bezier(.2,.75,.2,1) forwards}.skillbar-label{display:flex;justify-content:space-between;align-items:center;margin-top:8px;color:#4f493f;font:9px 'Space Mono',monospace;letter-spacing:.08em}.skill.level-beginner .skillbar-label strong,.skill.level-advanced .skillbar-label strong,.skill.level-professional .skillbar-label strong,.skill.level-master .skillbar-label strong{color:var(--gold-bright)}footer{width:min(var(--content),calc(100% - 48px));margin:0 auto;padding:0 0 52px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:34px 60px;align-items:start}footer .footer-brand{padding-top:22px;color:#69645b;font:700 10px 'Space Mono',monospace;letter-spacing:.14em}footer .footer-meta{padding-top:22px;color:#69645b;font:700 10px 'Space Mono',monospace;letter-spacing:.1em;text-align:right}footer .contact{grid-column:1 / -1;border-top:1px solid var(--line-soft);padding-top:20px;display:flex;flex-wrap:wrap;gap:12px 30px;align-items:center}footer .contact-title{color:var(--gold-bright);font:800 10px 'Space Mono',monospace;letter-spacing:.14em}footer .contact a,footer .contact span{color:#8f7b55;text-decoration:none;font:11px 'Space Mono',monospace;transition:color .2s}footer .contact a:hover{color:var(--gold-bright)}@keyframes up{to{opacity:1;transform:none}}@keyframes navIn{from{opacity:0;transform:translateY(-15px)}to{opacity:1;transform:none}}@keyframes sectionIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}@keyframes rocketLaunch{0%{opacity:0;transform:translateY(48vh) scale(.9)}20%{opacity:1}78%{opacity:1}100%{opacity:1;transform:translateY(-70vh) scale(1.06)}}@keyframes flame{from{transform:scaleY(.88)}to{transform:scaleY(1.08) translateY(-1px)}}@keyframes loaderOut{to{opacity:0;visibility:hidden}}@keyframes skillFill{to{transform:scaleX(1)}}@media(max-width:760px){.nav{height:72px;padding:0 18px;gap:12px}.brand{width:150px}.brand img{width:150px}.nav nav{gap:10px;max-width:65vw;overflow-x:auto;scrollbar-width:none}.nav nav::-webkit-scrollbar{display:none}.nav nav a{font-size:9px;letter-spacing:.06em}.nav nav a:hover,.nav nav a.active{letter-spacing:.09em}.hero{min-height:68vh;padding-bottom:62px}.hero h1{font-size:clamp(68px,21vw,108px)}.setup{grid-template-columns:1fr;margin:42px 0 70px}.section{min-height:0;padding:29px 22px 33px}.section:nth-child(2),.section:nth-child(3),.section:nth-child(4),.section:nth-child(5),.section:nth-child(6){animation-delay:0s}.skill-levels{grid-template-columns:1fr 1fr}.skills{grid-template-columns:1fr}.skill{padding:20px 18px}.skill strong{font-size:14px}.skill-top{gap:12px}.skill b{padding:7px 9px}main,footer{width:calc(100% - 36px)}.title h2{font-size:18px}.links a,.links>div{align-items:flex-start;flex-direction:column;gap:7px;padding:17px 0}.links span{text-align:left}.page-content{margin:40px 0 70px}.page-hero{min-height:58vh}.rocket{transform:scale(.82)}footer{grid-template-columns:1fr;gap:0;padding-bottom:34px}footer .footer-meta{text-align:left;padding-top:6px}footer .contact{margin-top:16px;gap:10px 20px}}@media(max-width:420px){.brand{width:125px}.brand img{width:125px}.nav nav{gap:9px;max-width:53vw}.nav nav a{font-size:8px}.hero h1{font-size:clamp(58px,20vw,84px)}li{font-size:12.5px}.skill{padding:18px 16px}.skill strong{font-size:14px}.skill-levels span{padding:12px 8px;font-size:9px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.preloader{display:none}.nav,.kicker,.hero h1,.hero p,.section,.skillbar i{animation:none!important;opacity:1;transform:none}.section{opacity:1}.skillbar i{transform:scaleX(1)}}

/* Responsive breakpoint system: phone / tablet / desktop / ultrawide */
@media (max-width: 900px){
  .nav{height:72px;padding:0 18px;justify-content:center}
  .nav .brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:150px;margin:0;display:flex;justify-content:center;align-items:center}
  .nav .brand img{width:150px;max-width:none;object-position:center;transform:none}
  .nav nav{display:none}
  main,footer{width:calc(100% - 36px);max-width:none}
  .hero{padding-top:72px;padding-bottom:62px;min-height:68vh}
  .hero h1{font-size:clamp(58px,15vw,108px);line-height:.84}
  .hero p{font-size:12px;max-width:100%;margin-top:26px}
  .setup,.skills{grid-template-columns:1fr}
  .setup{margin:42px 0 70px}
  .section{min-height:0;padding:29px 22px 33px}
  .skill{padding:20px 18px}
  .links a,.links>div{align-items:flex-start;flex-direction:column;gap:7px;padding:17px 0}
  .links span{text-align:left}
  .page-content{margin:40px 0 70px}
  .page-hero{min-height:58vh}
  footer{grid-template-columns:1fr;gap:0;padding-bottom:34px}
  footer .footer-meta{text-align:left;padding-top:6px}
  footer .contact{margin-top:16px;gap:10px 20px}
}

@media (min-width:901px) and (max-width:1199px){
  :root{--content:1040px}
  .nav{padding:0 32px}
  .nav nav{gap:18px}
  .nav nav a{font-size:9px}
  main,footer{width:calc(100% - 64px)}
  .hero h1{font-size:clamp(76px,11vw,132px)}
}

@media (min-width:1200px) and (max-width:1919px){
  :root{--content:1180px}
  main,footer{width:min(var(--content),calc(100% - 48px))}
}

@media (min-width:1920px){
  :root{--content:1540px}
  .nav{height:96px;padding-left:max(36px,calc((100vw - var(--content))/2));padding-right:max(36px,calc((100vw - var(--content))/2))}
  .brand,.brand img{width:250px}
  .nav nav{gap:36px}
  .nav nav a{font-size:11px}
  main,footer{width:min(var(--content),calc(100% - 72px))}
  .hero{padding-top:96px;padding-bottom:110px;min-height:72vh}
  .hero:before{top:96px}
  .hero h1{font-size:clamp(130px,8.5vw,190px)}
  .hero p{font-size:15px;max-width:560px;margin-top:38px}
  .kicker{font-size:11px;margin-bottom:30px}
  .setup{margin-top:82px;gap:2px}
  .section{padding:44px 42px 50px}
  .title h2{font-size:23px}
  .links a,.links>div{padding:24px 16px 24px 0}
  .links strong{font-size:17px}
  .links span{font-size:12px}
  footer{padding-bottom:64px}
}

@media (min-width:2560px){
  :root{--content:1760px}
  .nav nav{gap:42px}
  .hero h1{font-size:190px}
}