/* qbpg's own layout and motion, inspired by the reference's editorial rhythm. */
:root{--accent:#ae8cff;--accent-hot:#6b74ff;--accent-rgb:174,140,255}
html{scroll-padding-top:88px}
.scroll-progress{position:fixed;inset:0 0 auto;z-index:100;height:2px;pointer-events:none}.scroll-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-hot));box-shadow:0 0 16px rgba(var(--accent-rgb),.7)}
.pointer-glow{position:fixed;z-index:0;width:520px;height:520px;left:0;top:0;transform:translate3d(calc(var(--pointer-x,50vw) - 50%),calc(var(--pointer-y,40vh) - 50%),0);background:radial-gradient(circle,rgba(var(--accent-rgb),.055),transparent 65%);pointer-events:none;transition:transform .13s ease-out}
.site-header{position:sticky;top:0;z-index:30;height:68px;background:rgba(10,10,9,.88);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
nav a{position:relative;padding:10px 0}nav a::after{content:"";position:absolute;left:50%;bottom:-10px;width:29px;height:29px;border:1px solid var(--accent);border-radius:50%;opacity:0;transform:translate(-50%,4px) scale(.7);transition:opacity .25s,transform .25s;pointer-events:none}nav a:hover::after,nav a.active::after{opacity:.7;transform:translate(-50%,0) scale(1)}
.hero{min-height:calc(100svh - 68px);padding-top:clamp(85px,12vh,140px);padding-bottom:98px;isolation:isolate}.hero::after{display:none}.hero-wave{position:absolute;inset:15% -7% 0 -7%;z-index:-1;width:114%;height:85%;opacity:.72;pointer-events:none}.hero-copy{max-width:none}.hero .eyebrow{margin-bottom:25px}.hero h1{font-size:clamp(155px,26vw,380px);margin:30px 0 49px;letter-spacing:-.115em}.hero-description{font-size:clamp(19px,2vw,25px);max-width:760px}.hero-bottom{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;gap:20px;padding:23px 0;border-top:1px solid #292824;font:10px 'DM Mono',monospace;letter-spacing:.14em;color:#79766f}.hero-bottom a{color:#b5afa3;white-space:nowrap}.hero-bottom a:hover{color:var(--accent)}
.content-section{display:block;min-height:500px;padding:118px 0 128px;scroll-margin-top:65px}.section-heading{margin-bottom:58px}.section-heading h2{font-size:clamp(54px,6.7vw,104px);line-height:1.04;letter-spacing:-.085em;max-width:1150px}.section-body{max-width:none}.about .section-body{max-width:800px}.section-body .lead{max-width:850px;font-size:clamp(26px,3vw,42px);line-height:1.22}.section-body p{max-width:750px}.about{min-height:560px}
.project-card{display:grid;grid-template-columns:1fr .8fr;align-items:stretch;gap:5vw;min-height:400px;padding:0;border:0;border-top:1px solid #35312b;border-bottom:1px solid #35312b;background:none;border-radius:0}.project-card:hover{border-color:var(--accent);transform:none}.project-preview{margin:48px 0;min-height:300px;padding:19px 22px 25px;border:1px solid #38342e;border-radius:10px;background:radial-gradient(circle at 55% 30%,rgba(var(--accent-rgb),.17),transparent 60%),linear-gradient(135deg,#171714,#0c0d0d);box-shadow:0 20px 70px #0006;overflow:hidden;transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s}.project-card:hover .project-preview{transform:translateY(-7px) rotate(-1deg);box-shadow:0 35px 90px #0009}.preview-top{display:flex;justify-content:space-between;gap:8px;border-bottom:1px solid #34322e;padding-bottom:16px;font:10px 'DM Mono',monospace;color:#88847b}.preview-dots{letter-spacing:5px;color:var(--accent)}.preview-word{font-family:Inter,sans-serif;font-size:clamp(30px,4vw,60px);font-weight:900;letter-spacing:-.075em;margin:50px 0 42px}.preview-word span{color:var(--accent)}.preview-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.preview-grid i{height:90px;border-radius:3px;background:linear-gradient(155deg,#49443e,#191a1a)}.preview-grid i:nth-child(2){background:linear-gradient(140deg,#774f47,#242221)}.preview-grid i:nth-child(3){background:linear-gradient(140deg,#5a5b58,#242321)}.preview-grid i:nth-child(4){background:linear-gradient(140deg,#746357,#29221e)}.preview-grid i:nth-child(5){background:linear-gradient(140deg,#3c5556,#1e2424)}.project-info{display:flex;flex-direction:column;justify-content:center;padding:50px 0}.project-info h3{font-size:clamp(40px,5.2vw,82px);line-height:1.02;margin:20px 0 25px}.project-info h3 span{font-size:.5em;display:inline-block;transition:transform .25s}.project-card:hover .project-info h3 span{transform:translate(5px,-5px)}.project-info p{font-size:17px;line-height:1.65;color:#aaa8a1}.project-info .project-domain{margin-top:auto;padding-top:40px}
.skill-groups{grid-template-columns:repeat(3,1fr);gap:0;border:1px solid #35312b}.skill-group{min-height:205px;padding:32px;border:0;border-right:1px solid #35312b;position:relative}.skill-group:last-child{border-right:0}.skill-group::after{content:"";position:absolute;bottom:0;left:0;width:35%;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent-hot));transition:width .55s cubic-bezier(.22,1,.36,1)}.skill-group:hover::after{width:100%}.skill-group h3{color:var(--accent)}.tags span{border:0;background:none;padding:0;font-size:12px;line-height:1.8}.tags span:not(:last-child)::after{content:" ·";color:#777}
.music{min-height:540px;background:radial-gradient(ellipse 50% 60% at 78% 50%,rgba(var(--accent-rgb),.08),transparent 75%)}.music .section-body{max-width:780px}.music iframe{height:152px;border-radius:12px}.contact{min-height:450px}.site-footer{position:relative;z-index:1}
.music-dock{position:fixed;right:25px;bottom:21px;z-index:40;width:300px;border:1px solid #49443b;border-radius:18px;background:rgba(20,19,17,.96);box-shadow:0 15px 55px #0008;backdrop-filter:blur(18px);overflow:hidden}.dock-toggle{display:flex;align-items:center;gap:14px;width:100%;padding:11px 13px;background:none;border:0;color:#eeeae2;cursor:pointer;text-align:left}.dock-icon{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#16110c;font-size:18px;box-shadow:0 0 25px rgba(var(--accent-rgb),.25)}.dock-label{flex:1;font:10px 'DM Mono',monospace;letter-spacing:.11em;line-height:1.5}.dock-label small{font-size:9px;color:#89857e}.dock-chevron{font-size:23px;color:#aaa6a0;transition:transform .25s}.dock-toggle[aria-expanded="true"] .dock-chevron{transform:rotate(180deg)}.dock-panel{padding:0 10px 10px}.dock-panel iframe{border-radius:9px}
.motion-ready .reveal{opacity:0;transform:translateY(48px);transition:opacity .85s cubic-bezier(.22,1,.36,1),transform .85s cubic-bezier(.22,1,.36,1)}.motion-ready .reveal.is-visible{opacity:1;transform:translateY(0)}.hero-copy{animation:hero-rise .9s cubic-bezier(.22,1,.36,1) both}@keyframes hero-rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:900px){.content-section{min-height:0;padding:95px 0}.project-card{grid-template-columns:1fr;gap:0}.project-preview{margin:30px 0 0}.project-info{padding:32px 0}.skill-groups{grid-template-columns:1fr}.skill-group{min-height:125px;border-right:0;border-bottom:1px solid #35312b}.skill-group:last-child{border-bottom:0}.hero h1{font-size:clamp(130px,25vw,230px)}}
@media(max-width:650px){html{scroll-padding-top:76px}.site-header{height:76px}.hero{min-height:610px;padding-top:92px;padding-bottom:85px}.hero h1{font-size:clamp(95px,26vw,165px);margin:48px 0 50px}.hero-description{font-size:17px}.hero-wave{inset:20% -45% 0;width:190%;height:75%}.hero-bottom{font-size:8px;padding:18px 0}.hero-bottom span:nth-child(2){display:none}.content-section{padding:78px 0 90px}.section-heading{margin-bottom:37px}.section-heading h2{font-size:clamp(50px,12vw,72px)}.project-preview{min-height:240px;padding:14px}.preview-word{font-size:35px;margin:40px 0 30px}.preview-grid i{height:65px}.project-info h3{font-size:45px}.music-dock{right:13px;bottom:13px;width:275px}.pointer-glow{display:none}}
@media(prefers-reduced-motion:reduce){.motion-ready .reveal{opacity:1;transform:none;transition:none}.hero-copy{animation:none}.project-preview,.skill-group::after,.dock-chevron{transition:none}}
@media(max-width:650px){.hero h1{font-size:clamp(76px,21vw,112px);letter-spacing:-.105em}.hero{min-height:calc(100svh - 76px)}.hero-copy{width:100%}}
.hero h1>span{background:linear-gradient(120deg,#c5a7ff,#817dff);-webkit-background-clip:text;background-clip:text}.hero-description{color:#d9d5e0}.project-preview{background:radial-gradient(circle at 55% 30%,rgba(var(--accent-rgb),.19),transparent 60%),linear-gradient(135deg,#16141d,#0c0c10)}.preview-grid i:nth-child(2){background:linear-gradient(140deg,#6b4e8d,#24202c)}.preview-grid i:nth-child(3){background:linear-gradient(140deg,#4f5c8e,#20232e)}.preview-grid i:nth-child(4){background:linear-gradient(140deg,#735382,#27202a)}.preview-grid i:nth-child(5){background:linear-gradient(140deg,#454b79,#1e202b)}.skill-group{border-color:#3d3554}.music-dock{border-color:#454057}
body::before{background:radial-gradient(ellipse 50% 45% at 75% 57%,rgba(var(--accent-rgb),.065),transparent 80%)}
.page-shell{max-width:none;width:100%;padding-left:4vw;padding-right:4vw}
@media(max-width:650px){.page-shell{padding-left:23px;padding-right:23px}}