@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--bg:#080b14;--panel:#0e1321;--panel2:#111a2b;--text:#f2f5ff;--muted:#8c97ad;--line:rgba(171,190,231,.13);--blue:#76a9ff;--cyan:#72e4ee;--max:1120px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:85px}body{margin:0;background:var(--bg);color:var(--text);font-family:Manrope,system-ui,sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}.ambient{position:absolute;pointer-events:none;filter:blur(95px);opacity:.15;border-radius:50%;z-index:-1}.ambient-a{width:400px;height:400px;background:#316de7;top:80px;left:-180px}.ambient-b{width:380px;height:380px;background:#784bdb;top:700px;right:-200px}.topbar{height:76px;max-width:var(--max);padding:0 24px;margin:auto;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:relative;z-index:5}.brand{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:800;letter-spacing:2px}.brand-mark{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:linear-gradient(140deg,#8bc2ff,#6d7eff);color:#08101e;font-size:17px;letter-spacing:-1px}.brand-muted{color:#8c97ad;font-weight:500;margin-left:4px}.desktop-nav{display:flex;gap:30px;color:#9ba6bc;font-size:12px}.desktop-nav a:hover,.mobile-nav a:hover{color:white}.menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:9px;padding:7px 10px}.mobile-nav{display:none}.section-wrap{width:min(var(--max),100%);margin:auto;padding-left:24px;padding-right:24px}.hero{min-height:630px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:35px;padding-top:50px;padding-bottom:70px}.eyebrow,.section-kicker,.project-type,.project-art .art-label,.art-index,.profile-role,.card-bottom,.hero-stats span,.portfolio-foot,.filters,.section-note,.contact-panel small{font-family:'DM Mono',monospace;letter-spacing:1.2px;font-size:10px}.eyebrow{display:flex;align-items:center;gap:9px;color:#9fadc5}.pulse,.card-status i{width:7px;height:7px;border-radius:50%;background:#76edb5;box-shadow:0 0 12px #76edb577}.hero h1{font-size:clamp(44px,6vw,70px);line-height:1.04;letter-spacing:-3.5px;margin:24px 0 20px;font-weight:800}.gradient-text{background:linear-gradient(100deg,#f5f8ff 5%,#8eb9ff 48%,#8feaf0 100%);-webkit-background-clip:text;background-clip:text;color:transparent}.lead{color:var(--muted);line-height:1.9;font-size:14px;max-width:430px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:29px}.btn{border:1px solid var(--line);border-radius:8px;padding:13px 17px;font-size:12px;font-weight:700;display:inline-flex;gap:24px;align-items:center;justify-content:center;transition:transform .2s,border-color .2s}.btn:hover{transform:translateY(-2px);border-color:#85b4ff}.btn-primary{background:linear-gradient(110deg,#b8d5ff,#83dce8);color:#07101b;border:0}.btn-ghost{background:#ffffff04;color:#e7ecf8}.hero-stats{display:flex;gap:35px;margin-top:52px}.hero-stats div{display:flex;flex-direction:column;gap:7px}.hero-stats b{font-size:21px}.hero-stats span{font-size:9px;color:#77839a}.hero-visual{height:460px;position:relative;display:grid;place-items:center;isolation:isolate}.hero-grid{position:absolute;inset:5%;z-index:-2;background-image:linear-gradient(#b0c7ff0b 1px,transparent 1px),linear-gradient(90deg,#b0c7ff0b 1px,transparent 1px);background-size:28px 28px;mask-image:radial-gradient(ellipse,black,transparent 72%)}.orbit{position:absolute;border:1px solid #8bb4ff20;border-radius:50%;transform:rotate(-22deg)}.orbit-one{width:350px;height:430px}.orbit-two{width:270px;height:390px;transform:rotate(34deg)}.profile-card{position:relative;width:270px;height:350px;border:1px solid #b3caff40;border-radius:16px;padding:20px;background:linear-gradient(145deg,#17253cdd,#0a0e19f5 70%);box-shadow:0 35px 100px #0009, inset 0 1px #ffffff20;transform:rotate(-5deg);overflow:hidden;transition:transform .3s}.profile-card:hover{transform:rotate(0) translateY(-5px)}.card-glow{position:absolute;width:180px;height:180px;border-radius:50%;background:#5b8eff20;filter:blur(35px);top:100px;left:45px;z-index:-1}.card-top,.card-bottom{display:flex;justify-content:space-between;align-items:center}.mini-logo{font-weight:800;font-size:20px}.card-status{font:9px 'DM Mono',monospace;color:#92e6b9;display:flex;gap:7px;align-items:center}.avatar-wrap{display:grid;place-items:center;margin-top:32px}.avatar{width:100px;height:100px;border-radius:29px;display:grid;place-items:center;position:relative;font-size:50px;font-weight:800;color:#07101b;background:linear-gradient(140deg,#c1ddff,#7899ff 55%,#77e1e9);box-shadow:0 15px 45px #679bff35}.avatar span{position:absolute;right:-8px;top:-8px;font-size:22px;color:#d5faff}.profile-name{text-align:center;margin-top:22px;font-weight:800;letter-spacing:2px;font-size:16px}.profile-role{text-align:center;color:#8999b6;margin-top:8px;font-size:8px;letter-spacing:1px}.card-divider{height:1px;background:var(--line);margin:25px 0 17px}.card-bottom{font-size:8px;color:#8290aa}.float-tag{position:absolute;padding:11px 13px;border:1px solid #9bbdff30;background:#0d1423d9;border-radius:8px;font:9px 'DM Mono',monospace;letter-spacing:.6px;box-shadow:0 10px 30px #0005;backdrop-filter:blur(12px)}.tag-one{top:77px;right:0}.tag-two{bottom:76px;left:-3px}.section-block{padding-top:90px;padding-bottom:90px;border-top:1px solid var(--line)}.section-heading{margin-bottom:36px}.section-kicker{color:#7fafff}.section-heading h2,.contact-panel h2{font-size:clamp(31px,4.3vw,47px);line-height:1.15;letter-spacing:-1.8px;margin:15px 0 0}.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:22px}.about-panel{padding:28px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(145deg,#111a2b,#0b0f19)}.panel-symbol{color:#90c5ff;font-size:25px}.about-panel h3{font-size:25px;line-height:1.3;letter-spacing:-.7px;margin:22px 0 13px}.about-panel p,.detail-row p,.contact-panel p{font-size:12px;line-height:1.9;color:var(--muted)}.muted{color:#69768c!important}.about-details{border-top:1px solid var(--line)}.detail-row{display:flex;align-items:flex-start;gap:18px;padding:23px 15px;border-bottom:1px solid var(--line)}.detail-num{font:11px 'DM Mono',monospace;color:#779edc;padding-top:3px}.detail-row h4{margin:0;font-size:14px}.detail-row p{margin:8px 0 0}.detail-arrow{margin-left:auto;color:#a7caff}.heading-inline{display:flex;align-items:end;justify-content:space-between}.section-note{color:#78869e;line-height:1.9}.filters{display:flex;gap:9px;flex-wrap:wrap;margin:30px 0 20px}.filter{cursor:pointer;border:1px solid var(--line);background:transparent;border-radius:7px;padding:11px 14px;font-size:10px;color:#8e9bb2;letter-spacing:.7px}.filter.active,.filter:hover{background:#c0dcff;color:#08111e;border-color:#c0dcff}.filter span{margin-left:8px;opacity:.7}.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.project-card{border:1px solid var(--line);border-radius:11px;overflow:hidden;background:#0b101b;transition:transform .25s,border-color .25s}.project-card:hover{transform:translateY(-5px);border-color:#84adf34d}.project-card.hidden{display:none}.project-art{height:205px;position:relative;overflow:hidden;display:grid;place-items:center}.art-blue{background:radial-gradient(ellipse at 70% 20%,#4b8ffb80,transparent 50%),linear-gradient(135deg,#152e54,#0b1222)}.art-purple{background:radial-gradient(ellipse at 70% 30%,#b281ff75,transparent 50%),linear-gradient(135deg,#2b1b48,#111022)}.art-green{background:radial-gradient(ellipse at 70% 20%,#67d9a866,transparent 55%),linear-gradient(135deg,#123a35,#091a1b)}.art-orange{background:radial-gradient(ellipse at 80% 20%,#ffb06a70,transparent 55%),linear-gradient(135deg,#4a241b,#1d1114)}.art-pink{background:radial-gradient(ellipse at 70% 25%,#fa91ce66,transparent 55%),linear-gradient(135deg,#4a1c3c,#170f25)}.art-cyan{background:radial-gradient(ellipse at 80% 20%,#62e8ee70,transparent 55%),linear-gradient(135deg,#123b4b,#0a1827)}.art-label{position:absolute;top:14px;left:15px;color:#e1eaffa8;font-size:8px}.art-index{position:absolute;right:14px;bottom:12px;color:#ffffff90}.art-window{width:68%;height:112px;background:#0c1321d9;border:1px solid #d4e3ff38;border-radius:8px;padding:13px;transform:rotate(-4deg);box-shadow:0 20px 35px #0004}.window-dots{font-size:7px;color:#a9c9ff;letter-spacing:2px}.window-line{height:5px;width:45%;border-radius:4px;background:#87aefc;margin-top:10px;opacity:.6}.window-line.long{width:75%;height:8px;background:#e0ecff;opacity:.9}.window-boxes{display:flex;gap:7px;margin-top:13px}.window-boxes i{height:26px;flex:1;border-radius:4px;background:#6c9dfb35;border:1px solid #9ec0ff30}.search-art{width:65%;height:120px;padding:17px;background:#17122bd9;border:1px solid #d3c2ff40;border-radius:8px;transform:rotate(4deg);display:flex;flex-direction:column;position:relative}.search-art span{font-size:24px;color:#d4baff}.search-art b{font-size:16px;line-height:1.15}.search-art i{font:7px 'DM Mono',monospace;color:#c4a7ff;margin-top:auto}.bot-art{display:flex;align-items:center;gap:12px;padding:17px;background:#09201cd9;border:1px solid #a1ffda33;border-radius:10px;transform:rotate(-4deg)}.bot-face{width:43px;height:43px;display:grid;place-items:center;background:#6de0ad;color:#072119;border-radius:12px;font-size:23px}.bot-art b,.bot-art small{display:block;font:9px 'DM Mono',monospace}.bot-art small{margin-top:7px;color:#75dbb2;font-size:7px}.bot-check{color:#83f0bc;margin-left:10px}.poster-art{transform:rotate(-5deg);font-size:24px;line-height:.98;letter-spacing:-1px}.poster-art span{color:#ffb375}.poster-art i{display:block;font:8px 'DM Mono',monospace;letter-spacing:2px;margin-top:17px;color:#ffcfaa}.thumb-art{width:70%;height:115px;border:1px solid #ffb6e240;background:#2b1429d9;padding:14px;position:relative;transform:rotate(4deg)}.thumb-art span{position:absolute;right:9px;top:9px;font-size:8px;background:#ff9bd6;color:#301128;padding:4px}.thumb-art b{display:block;margin-top:20px;font-size:20px;line-height:1}.thumb-art i{font:7px 'DM Mono',monospace;color:#ffb7e2}.automation-art{display:flex;align-items:center;gap:8px;font:8px 'DM Mono',monospace}.automation-art span{padding:12px 9px;border:1px solid #83e6f04a;background:#0a2837;border-radius:6px}.automation-art b{color:#8feaf0}.project-info{display:flex;align-items:center;justify-content:space-between;padding:17px}.project-type{font-size:8px;color:#8194b3}.project-info h3{font-size:15px;margin:7px 0 0}.open-project{width:33px;height:33px;border-radius:8px;background:#ffffff06;border:1px solid var(--line);cursor:pointer;font-size:17px}.open-project:hover{background:#c0dcff;color:#07101b}.portfolio-foot{display:flex;justify-content:space-between;color:#64728b;font-size:8px;margin-top:22px}.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.review-card{border:1px solid var(--line);border-radius:11px;padding:23px;background:linear-gradient(145deg,#111827,#0a0e18);min-height:190px}.stars{letter-spacing:3px;color:#9fc9ff;font-size:12px}.review-card>p{font-size:13px;line-height:1.9;color:#d2daea;margin:18px 0 23px}.review-author{display:flex;align-items:center;gap:10px}.review-avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#1c2e4b;color:#a6c9ff;font-size:12px}.review-author b,.review-author span{display:block;font-size:10px}.review-author span{color:#75829b;margin-top:4px}.review-quote{background:linear-gradient(140deg,#152e4a,#0d1828)}.review-quote>span{font-size:38px;color:#a4c9ff;line-height:1}.review-quote>p{font-size:19px;font-weight:700;line-height:1.5;margin:10px 0}.review-quote small{font:8px 'DM Mono',monospace;color:#829dbf;letter-spacing:1px}.contact-section{padding-top:20px;padding-bottom:60px}.contact-panel{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:42px;border:1px solid #9fc5ff29;border-radius:14px;background:linear-gradient(110deg,#15253d,#101523 70%)}.contact-panel h2{font-size:clamp(34px,4vw,48px)}.contact-panel p{max-width:390px}.contact-panel .btn{position:relative;z-index:1;white-space:nowrap}.contact-orb{position:absolute;width:230px;height:230px;right:18%;top:-120px;border-radius:50%;background:#6a9fff1c;filter:blur(15px)}.social-links{display:flex;gap:25px;justify-content:center;flex-wrap:wrap;padding:28px 0 0}.social-links a{font:10px 'DM Mono',monospace;color:#8d9ab1}.social-links a:hover{color:#c5dcff}.footer{max-width:var(--max);margin:auto;padding:22px 24px 28px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:15px;color:#68758c;font:8px 'DM Mono',monospace;letter-spacing:.7px}.footer .brand{color:#e8efff;font:800 10px Manrope,sans-serif}.footer .brand-mark{width:24px;height:24px;font-size:13px}.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:20px;z-index:20}.modal.open{display:flex}.modal-backdrop{position:absolute;inset:0;background:#03050bd9;backdrop-filter:blur(8px)}.modal-box{position:relative;width:min(450px,100%);padding:32px;border:1px solid #a7caff35;background:#101827;border-radius:14px;box-shadow:0 30px 90px #0009}.modal-box h2{font-size:27px;margin:15px 0}.modal-box p{font-size:13px;line-height:1.9;color:#9ba8be}.modal-close{position:absolute;right:14px;top:12px;border:0;background:none;font-size:27px;color:#9ba8be;cursor:pointer}
@media(max-width:760px), (hover: none) and (pointer: coarse){.topbar{height:66px;padding:0 18px}.desktop-nav{display:none}.menu-btn{display:block}.mobile-nav{position:absolute;z-index:6;top:66px;left:12px;right:12px;padding:10px;background:#101827;border:1px solid var(--line);border-radius:10px;display:none;flex-direction:column}.mobile-nav.open{display:flex}.mobile-nav a{padding:13px;color:#aab6cc;font-size:12px}.section-wrap{padding-left:18px;padding-right:18px}.hero{grid-template-columns:1fr;padding-top:70px;padding-bottom:55px;gap:10px}.hero h1{font-size:clamp(44px,12vw,64px);letter-spacing:-2.7px}.lead{font-size:13px}.hero-stats{gap:25px;margin-top:37px}.hero-stats b{font-size:19px}.hero-visual{height:405px;margin-top:10px}.profile-card{width:250px;height:330px}.tag-one{right:0;top:56px}.tag-two{left:0;bottom:55px}.section-block{padding-top:65px;padding-bottom:65px}.about-grid{grid-template-columns:1fr}.heading-inline{align-items:flex-start;gap:15px;flex-direction:column}.section-note br{display:none}.project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.project-art{height:165px}.project-info{padding:13px}.project-info h3{font-size:13px}.project-type{font-size:7px}.review-grid{grid-template-columns:1fr}.review-card{min-height:auto}.contact-panel{align-items:flex-start;flex-direction:column;padding:28px 23px}.contact-panel .btn{margin-top:8px}.footer{padding:22px 18px;flex-wrap:wrap}.footer>span{order:3;width:100%;line-height:1.8}.portfolio-foot{font-size:7px}.automation-art{gap:4px}.automation-art span{padding:10px 5px;font-size:7px}}@media(max-width:380px){.project-grid{grid-template-columns:1fr}.project-art{height:190px}.hero-stats{gap:17px}.hero-stats b{font-size:17px}.hero-stats span{font-size:8px}}

/* Motion system inspired by the supplied portfolio video */
.intro-loader{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;background:#090a0d;transition:opacity .65s ease,visibility .65s ease}.loader-brand{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:3px;font-size:12px}.loader-brand>span{display:grid;place-items:center;width:42px;height:42px;border:1px solid #ffffff70;border-radius:12px;font-size:22px;letter-spacing:-2px}.loader-brand small{font:10px 'DM Mono',monospace;letter-spacing:2px}.loader-track{width:min(190px,55vw);height:2px;background:#ffffff20;overflow:hidden}.loader-track i{display:block;width:100%;height:100%;background:#f3f3f3;transform:scaleX(0);transform-origin:left;transition:transform .025s linear;will-change:transform}.loader-percent{font:10px 'DM Mono',monospace;color:#a5a5a5;letter-spacing:2px}.loader-done{opacity:0;visibility:hidden;pointer-events:none}.scroll-progress{position:fixed;z-index:99;top:0;left:0;width:0;height:2px;background:linear-gradient(90deg,#e7e7e7,#7b9dc8);box-shadow:0 0 12px #a9cfff55}.reveal{opacity:0;transform:translateY(24px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1);transition-delay:var(--reveal-delay,0ms)}.reveal.revealed{opacity:1;transform:translateY(0)}.hero-copy.reveal{transform:translateY(18px)}.hero-visual.reveal{transform:translateY(18px) scale(.985)}.hero-visual.revealed{transform:translateY(0) scale(1)}.nav-active{color:#fff!important}.desktop-nav a,.mobile-nav a{transition:color .25s ease}.brand-mark{transition:transform .35s ease,box-shadow .35s ease}.brand:hover .brand-mark{transform:rotate(-8deg) scale(1.06);box-shadow:0 0 24px #83b5ff2a}.profile-card{transition:transform .22s ease,box-shadow .35s ease}.hero-visual:hover .profile-card{box-shadow:0 35px 100px #0008,0 0 45px #75a9ff13}.orbit-one{animation:orbitSpin 28s linear infinite}.orbit-two{animation:orbitSpin 36s linear infinite reverse}.float-tag{animation:tagFloat 5s ease-in-out infinite}.tag-two{animation-delay:-2.3s}.ambient-a{animation:ambientDrift 12s ease-in-out infinite alternate}.ambient-b{animation:ambientDrift 15s ease-in-out infinite alternate-reverse}.project-card,.review-card,.about-panel,.contact-panel{transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease}.project-card:hover,.review-card:hover{transform:translateY(-6px);box-shadow:0 20px 45px #0003}.project-art:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 20%,#ffffff12 45%,transparent 65%);transform:translateX(-130%);transition:transform .7s ease}.project-card:hover .project-art:after{transform:translateX(130%)}.btn{transition:transform .25s ease,background .25s ease,box-shadow .25s ease}.btn:hover{transform:translateY(-2px)}.btn-primary:hover{box-shadow:0 10px 28px #9fc5ff22}.filter{transition:background .25s ease,color .25s ease,transform .25s ease}.filter:active,.open-project:active{transform:scale(.96)}.modal.open .modal-box{animation:modalIn .35s cubic-bezier(.2,.8,.2,1) both}.modal-box{transform-origin:center}.social-links a{transition:color .2s ease,transform .2s ease}.social-links a:hover{transform:translateY(-2px)}
@keyframes loaderFill{to{transform:scaleX(1)}}@keyframes orbitSpin{to{transform:rotate(360deg)}}@keyframes tagFloat{0%,100%{translate:0 0}50%{translate:0 -9px}}@keyframes ambientDrift{from{transform:translate3d(-10px,-8px,0) scale(.96)}to{transform:translate3d(22px,16px,0) scale(1.06)}}@keyframes modalIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:760px), (hover: none) and (pointer: coarse){.reveal{transform:translateY(17px);transition-duration:.6s}.loader-brand>span{width:38px;height:38px}.project-card:hover,.review-card:hover{transform:none}.hero-visual:hover .profile-card{box-shadow:0 25px 70px #0006}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}.intro-loader{display:none}}

/* Reference-inspired monochrome grid, glass navigation and bold portfolio cards */
:root{--bg:#202020;--panel:#292929;--panel2:#303030;--text:#f7f7f7;--muted:#b0b0b0;--line:rgba(255,255,255,.13);--blue:#e8e8e8;--cyan:#cfcfcf;--max:1180px}
body{background-color:#202020;background-image:linear-gradient(#ffffff0b 1px,transparent 1px),linear-gradient(90deg,#ffffff0b 1px,transparent 1px);background-size:42px 42px;background-attachment:fixed}
.ambient{opacity:.06;filter:blur(110px)}.ambient-a,.ambient-b{background:#fff}
.topbar{position:sticky;top:14px;width:min(1120px,calc(100% - 36px));height:78px;margin:14px auto 0;padding:0 32px;border:1px solid #ffffff12;border-radius:28px;background:linear-gradient(120deg,#383838eF,#191919ef);box-shadow:0 20px 55px #0006;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
.brand{font-size:14px;letter-spacing:1.5px}.brand-mark{background:#f5f5f5;color:#202020;border-radius:50%;box-shadow:0 3px 12px #0004}.brand-muted{color:#aaa}.desktop-nav{gap:24px;color:#d0d0d0}.desktop-nav a{font-size:12px}.menu-btn{border-radius:15px;background:#ffffff0a;font-size:23px;padding:6px 12px}
.mobile-nav{position:fixed;top:102px;left:7%;right:7%;padding:20px;background:linear-gradient(135deg,#393939f5,#1b1b1bf5);border:1px solid #ffffff20;border-radius:28px;box-shadow:0 25px 60px #0009;backdrop-filter:blur(24px)}.mobile-nav a{font-size:16px;padding:15px 16px;border-radius:12px}.mobile-nav a:hover{background:#ffffff12}
.section-wrap{width:min(var(--max),100%)}.hero{min-height:760px;padding-top:80px;padding-bottom:85px;gap:20px}.hero h1{font-size:clamp(45px,6.6vw,78px);line-height:1.06;letter-spacing:-3.5px}.hero-title-large{font-size:1.22em;letter-spacing:-4.5px}.gradient-text{background:linear-gradient(100deg,#fff,#c8c8c8 60%,#929292);-webkit-background-clip:text;background-clip:text;color:transparent}.eyebrow,.section-kicker{color:#c7c7c7}.lead{color:#c4c4c4}.btn{border-radius:999px;padding:14px 20px}.btn-primary{background:#f1f1f1;color:#171717}.btn-ghost{background:#ffffff08;border-color:#ffffff26}.hero-stats b{font-size:26px}.hero-visual{height:560px}.hero-grid{inset:-2%;background-image:linear-gradient(#ffffff12 1px,transparent 1px),linear-gradient(90deg,#ffffff12 1px,transparent 1px);background-size:35px 35px;mask-image:none;opacity:.55}.orbit{border-color:#ffffff20}.orbit-one{width:390px;height:500px}.orbit-two{width:315px;height:450px}
.profile-card{width:315px;height:430px;border-radius:24px;padding:23px;background:linear-gradient(145deg,#f6f6f6,#d8d8d8 78%);color:#171717;border:1px solid #ffffffa8;box-shadow:0 30px 75px #0008;transform:rotate(-4deg)}.card-status{color:#333}.card-status i{background:#444;box-shadow:none}.avatar-wrap{margin-top:26px}.avatar{width:155px;height:155px;border-radius:18px;background:linear-gradient(145deg,#414141,#111);color:#fff;box-shadow:0 15px 35px #0004;font-size:64px}.avatar-logo{font-size:75px;font-weight:900;letter-spacing:-9px}.avatar-spark{color:#fff!important;right:8px!important;top:6px!important}.profile-script{font-size:28px;font-weight:800;font-style:italic;text-align:center;letter-spacing:-1px;margin-top:14px;color:#555}.profile-name{margin-top:0;font-size:20px;letter-spacing:1px}.profile-role{color:#555;font-size:8px}.card-divider{background:#0002;margin:19px 0 15px}.card-bottom{color:#555}.card-glow{background:#fff;opacity:.2}.float-tag{background:#292929e8;border-color:#ffffff22;border-radius:999px;color:#f2f2f2;box-shadow:0 14px 30px #0007}.tag-one{right:-8px}.tag-two{left:-18px}
.section-block{border-top:1px solid #ffffff17;padding-top:105px;padding-bottom:105px}.section-heading h2,.contact-panel h2{font-size:clamp(36px,5vw,62px);letter-spacing:-2px}.section-kicker{font-size:11px}.about-panel,.review-card{background:linear-gradient(145deg,#333,#242424);border:1px solid #ffffff13;border-radius:22px}.detail-row{border-color:#ffffff17}.detail-num{color:#cfcfcf}.detail-arrow{color:#eee}
.filters{justify-content:center;gap:12px;margin:32px 0 30px}.filter{min-width:92px;border-radius:999px;padding:15px 24px;background:linear-gradient(145deg,#353535,#202020);border-color:#ffffff17;color:#eee;font-size:13px;box-shadow:0 8px 20px #0003}.filter.active,.filter:hover{background:#f1f1f1;color:#171717;border-color:#f1f1f1}
.project-grid{display:flex;gap:24px;overflow-x:auto;overflow-y:hidden;padding:12px 2px 25px;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#777 transparent}.project-card{flex:0 0 min(560px,72%);scroll-snap-align:center;border:1px solid #ffffff15;border-radius:28px;background:#f1f1f1;color:#111;box-shadow:0 20px 55px #0004}.project-card:hover{transform:translateY(-5px);border-color:#ffffff50}.project-art{height:330px;border-radius:0;filter:grayscale(.8)}.project-art:after{background:linear-gradient(115deg,transparent 20%,#ffffff30 45%,transparent 65%)}.project-info{padding:23px 25px}.project-type{color:#555}.project-info h3{font-size:22px}.open-project{border-radius:50%;width:44px;height:44px;background:#191919;color:#fff;border-color:#191919}.open-project:hover{background:#555;color:#fff}.portfolio-foot{color:#aaa}
.review-grid{gap:20px}.review-card{min-height:220px}.review-card>p{color:#eee}.review-avatar{background:#444;color:#fff}.review-author span{color:#aaa}.review-quote{background:linear-gradient(145deg,#414141,#222)}
.contact-panel{border-radius:28px;background:linear-gradient(120deg,#383838,#202020);border-color:#ffffff1c;padding:52px}.contact-panel p{color:#ccc}.social-links a{color:#ccc}.footer{border-color:#ffffff18;color:#aaa}.modal-box{background:#292929;border-color:#ffffff24;border-radius:24px}.modal-box p{color:#ccc}
@media(max-width:760px), (hover: none) and (pointer: coarse){body{background-size:32px 32px}.topbar{top:9px;width:calc(100% - 24px);height:68px;margin-top:9px;padding:0 20px;border-radius:24px}.brand{font-size:12px}.section-wrap{padding-left:18px;padding-right:18px}.hero{padding-top:50px;min-height:auto;gap:4px}.hero h1{font-size:clamp(39px,10vw,61px);letter-spacing:-2.6px}.hero-title-large{letter-spacing:-3px}.hero-visual{height:485px;margin-top:0}.profile-card{width:min(285px,78vw);height:400px;padding:20px}.avatar{width:135px;height:135px}.avatar-logo{font-size:65px}.profile-script{font-size:25px}.orbit-one{width:300px;height:430px}.orbit-two{width:250px;height:390px}.tag-one{right:-2px;top:48px}.tag-two{left:-2px;bottom:43px}.section-block{padding-top:75px;padding-bottom:75px}.section-heading h2,.contact-panel h2{font-size:clamp(34px,9vw,48px)}.filters{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:6px}.filter{min-width:78px;padding:13px 18px}.project-grid{gap:15px;margin-right:-18px;padding-right:18px;scroll-padding-left:18px}.project-card{flex-basis:84%;border-radius:22px}.project-art{height:245px}.project-info{padding:17px}.project-info h3{font-size:19px}.contact-panel{padding:30px 23px}.footer{gap:16px}.footer>span{font-size:8px}}
@media(max-width:390px){.hero h1{font-size:38px}.hero-visual{height:445px}.profile-card{height:375px}.avatar{width:120px;height:120px}.project-card{flex-basis:90%}.project-art{height:220px}.hero-stats{gap:19px}}
@media(prefers-reduced-motion:reduce){body{background-attachment:scroll}}


/* ID badge inspired by the supplied reference: hanging strap, metal clip, and draggable swing. */
.hero-visual{overflow:visible;touch-action:pan-y}
.lanyard{position:absolute;z-index:2;top:0;left:50%;transform:translateX(-50%);width:62px;height:145px;background:linear-gradient(90deg,#090909,#292929 28%,#080808 54%,#303030 75%,#090909);border-radius:0 0 7px 7px;box-shadow:0 5px 14px #0008;display:flex;flex-direction:column;align-items:center;justify-content:space-around;overflow:hidden;pointer-events:none}
.lanyard:before,.lanyard:after{content:"";position:absolute;top:0;bottom:0;width:1px;background:#ffffff25}
.lanyard:before{left:9px}.lanyard:after{right:9px}
.lanyard span{font:700 7px 'DM Mono',monospace;letter-spacing:1.8px;color:#bfbfbf;transform:rotate(90deg);text-shadow:0 1px #000}
.badge-clip{position:absolute;z-index:4;top:126px;left:50%;transform:translateX(-50%);width:39px;height:30px;pointer-events:none}
.badge-clip i{display:block;width:11px;height:15px;border:3px solid #b9b9b9;border-radius:7px;margin:0 auto -3px;box-shadow:0 1px 3px #0008}
.badge-clip b{display:block;margin:auto;width:32px;height:16px;border-radius:4px 4px 8px 8px;background:linear-gradient(135deg,#f5f5f5,#777 45%,#d8d8d8 65%,#5a5a5a);border:1px solid #666;box-shadow:0 3px 5px #0006}
.profile-card{z-index:3;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;transform:translateY(0) rotate(-3deg);transform-origin:50% 8px;transition:box-shadow .25s;will-change:transform}
.profile-card:active{cursor:grabbing}
.profile-card .avatar{background:linear-gradient(145deg,#b9b9b9,#303030 60%,#111);border:4px solid #fff;color:#f4f4f4;border-radius:8px}
.profile-card .avatar-logo{font-size:72px;letter-spacing:-8px}
.profile-card .avatar-caption{position:absolute;bottom:8px;left:0;right:0;text-align:center;font:700 6px 'DM Mono',monospace;letter-spacing:1.5px;color:#fff}
.profile-card .profile-script{font-family:Manrope,sans-serif;font-size:26px;font-weight:800;font-style:italic;color:#1685cf;text-shadow:0 1px #fff}
.profile-card .profile-name{font-size:20px;text-transform:none;letter-spacing:.4px}
.profile-card .profile-role{letter-spacing:.8px}
.profile-card.dragging{transition:none;box-shadow:0 45px 85px #000a}
.hero-visual .orbit{pointer-events:none}
@media(max-width:760px), (hover: none) and (pointer: coarse){.lanyard{height:126px;width:55px}.badge-clip{top:108px}.profile-card{width:min(285px,78vw);height:400px}.profile-card .avatar{width:135px;height:135px}.profile-card .avatar-logo{font-size:65px}}
@media(max-width:390px){.lanyard{height:116px}.badge-clip{top:98px}.profile-card{height:375px}.profile-card .avatar{width:120px;height:120px}}
@media(prefers-reduced-motion:reduce){.profile-card{transition:none}}

/* Final responsive corrections: compact mobile composition and a tether that stretches with the dragged badge. */
.lanyard{height:145px;transform-origin:50% 0;transition:height .06s linear;will-change:height,transform}
.badge-clip{transform-origin:50% 0;will-change:top,transform}
.profile-card{touch-action:none;overscroll-behavior:contain}
@media(max-width:760px), (hover: none) and (pointer: coarse){
  .section-wrap{width:100%;padding-left:18px;padding-right:18px}
  .topbar{position:sticky;top:8px;z-index:20;backdrop-filter:blur(16px);background:#080b14e8}
  .hero{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:46px 18px 34px}
  .hero-copy{width:100%;min-width:0}
  .hero h1{font-size:clamp(37px,10.5vw,54px);line-height:1.02;letter-spacing:-2.3px;overflow-wrap:anywhere}
  .lead{max-width:100%;font-size:13px;line-height:1.75}
  .hero-actions{gap:9px;margin-top:21px}
  .btn{padding:12px 13px;gap:12px;font-size:11px}
  .hero-stats{justify-content:space-between;gap:12px;margin-top:28px}
  .hero-stats b{font-size:18px}
  .hero-visual{width:100%;height:440px;margin:18px 0 0;overflow:visible}
  .profile-card{width:min(270px,76vw);height:380px;padding:18px;transform-origin:50% 8px}
  .profile-card .avatar{width:124px;height:124px}
  .profile-card .avatar-logo{font-size:62px}
  .profile-card .profile-script{font-size:23px}
  .orbit-one{width:min(290px,82vw);height:390px}
  .orbit-two{width:min(235px,68vw);height:350px}
  .float-tag{font-size:8px;padding:9px 10px}
  .tag-one{right:0;top:42px}.tag-two{left:0;bottom:34px}
  .section-block{padding-top:54px;padding-bottom:54px}
  .section-heading{margin-bottom:25px}
  .section-heading h2,.contact-panel h2{font-size:clamp(30px,8.5vw,42px);letter-spacing:-1.5px}
  .about-grid,.review-grid{grid-template-columns:1fr}
  .project-grid{display:grid;grid-template-columns:1fr;gap:14px;margin:0;padding:0;overflow:visible}
  .project-card{width:100%;min-width:0;flex:initial;border-radius:18px}
  .project-art{height:210px}
  .project-info{padding:16px}
  .project-info h3{font-size:18px}
  .contact-panel{padding:25px 20px;gap:16px}
  .social-links{flex-wrap:wrap;gap:15px}
  .footer{padding:22px 18px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
  .footer>span{order:0;width:auto;font-size:8px}
}
@media(max-width:390px){
 .hero{padding-left:15px;padding-right:15px}
 .hero h1{font-size:36px;letter-spacing:-1.9px}
 .hero-visual{height:415px}
 .profile-card{width: min(250px,75vw);height:360px;padding:16px}
 .profile-card .avatar{width:112px;height:112px}
 .profile-card .profile-script{font-size:21px}
 .project-art{height:185px}
 .hero-stats span{letter-spacing:.5px;font-size:7px}
}


/* Portfolio data is managed from admin; mobile projects are a horizontal swipe carousel. */
.project-empty{grid-column:1/-1;width:100%;padding:26px;border:1px dashed var(--line);border-radius:14px;color:var(--muted);font-size:13px;line-height:1.8;text-align:center}
.project-art{isolation:isolate}
.project-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.project-art .art-label,.project-art .art-index{z-index:1;text-shadow:0 1px 8px #000b}
.avatar{overflow:hidden}
.avatar #profilePhoto{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;border-radius:inherit}
.review-photo{width:32px;height:32px;object-fit:cover;border-radius:50%;flex:0 0 32px;border:1px solid var(--line)}
@media(max-width:760px), (hover: none) and (pointer: coarse){
  .project-grid{display:flex!important;flex-wrap:nowrap;gap:14px;margin:0 -18px;padding:8px 18px 22px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-left:18px;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#777 transparent}
  .project-card{display:block;flex:0 0 88%;width:88%;min-width:0;max-width:460px;scroll-snap-align:start}
  .project-art{height:225px}
  .project-empty{flex:0 0 88%;width:88%;min-width:0}
}
@media(max-width:390px){.project-card{flex-basis:88%;width:88%}.project-art{height:205px}}


/* FINAL MOBILE LAYOUT OVERRIDES — keep these rules last to avoid earlier conflicting styles */
html{max-width:100%;overflow-x:clip}
body{width:100%;max-width:100%;overflow-x:clip}
img,svg,video,canvas{max-width:100%}
@media (max-width: 760px), (hover: none) and (pointer: coarse){
  .topbar{box-sizing:border-box;width:calc(100% - 24px);margin:9px 12px 0;padding:0 16px;height:66px;position:sticky;top:8px;z-index:50;border-radius:22px}
  .brand{font-size:11px;letter-spacing:1.1px;white-space:nowrap}
  .desktop-nav{display:none!important}
  .menu-btn{display:block!important;flex:0 0 auto}
  .mobile-nav{z-index:60;left:12px;right:12px;top:82px;max-width:none}
  .section-wrap{box-sizing:border-box;width:100%;max-width:100%;padding-left:18px;padding-right:18px}
  .hero.section-wrap{display:flex!important;flex-direction:column!important;align-items:stretch;gap:0;padding:42px 18px 30px;min-height:0}
  .hero-copy{position:relative;width:100%;max-width:100%;min-width:0;z-index:1}
  .eyebrow,.section-kicker{font-size:10px;letter-spacing:1.5px;line-height:1.7}
  .hero h1{max-width:100%;font-size:clamp(36px,10.2vw,52px);line-height:1.04;letter-spacing:-2px;overflow-wrap:break-word;word-break:normal}
  .hero-title-large{font-size:clamp(38px,10.8vw,55px);letter-spacing:-2.2px;line-height:1.02}
  .lead{max-width:100%;font-size:13px;line-height:1.7}
  .hero-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
  .btn{max-width:100%;box-sizing:border-box}
  .hero-stats{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:28px;width:100%;z-index:2}
  .hero-stats>div{min-width:0}
  .hero-stats b{font-size:clamp(16px,5vw,20px)}
  .hero-stats span{font-size:8px;letter-spacing:1px;overflow-wrap:anywhere}
  .hero-visual{position:relative!important;inset:auto!important;display:flex;align-items:flex-start;justify-content:center;width:100%;height:420px;min-height:0;margin:24px 0 0;overflow:visible;isolation:isolate;z-index:0;flex:0 0 auto}
  .hero-grid{pointer-events:none}
  .profile-card{position:absolute;left:50%;top:26px;right:auto;bottom:auto;width:min(270px,76vw);height:370px;box-sizing:border-box;transform:translateX(-50%) rotate(-3deg);transform-origin:50% 8px;z-index:3}
  .lanyard{position:absolute;left:50%;top:0;z-index:2;max-width:none}
  .badge-clip{z-index:3}
  .orbit{pointer-events:none;max-width:100%}
  .float-tag{z-index:4;max-width:44%;font-size:8px;white-space:normal}
  .tag-one{right:0;top:44px}.tag-two{left:0;bottom:30px}
  .section-block{box-sizing:border-box;width:100%;padding-top:54px;padding-bottom:54px}
  .section-heading{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:24px}
  .section-heading h2,.contact-panel h2{font-size:clamp(30px,8.5vw,42px);line-height:1.08;letter-spacing:-1.5px;overflow-wrap:anywhere}
  .section-note{max-width:100%;font-size:11px;line-height:1.7}
  .about-grid,.review-grid{display:grid;grid-template-columns:minmax(0,1fr)!important;gap:14px}
  .filters{display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:10px;max-width:calc(100vw - 18px);overflow-x:auto;overflow-y:hidden;padding:5px 18px 12px;margin:0 -18px 20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .filters::-webkit-scrollbar{display:none}
  .filter{flex:0 0 auto;min-width:78px;box-sizing:border-box}
  /* Project cards are a horizontal swipe rail on phones, not a desktop grid */
  .project-grid{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:stretch;gap:14px;width:calc(100% + 36px);max-width:none;margin:0 -18px;padding:8px 18px 22px;overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x mandatory;scroll-padding-left:18px;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#777 transparent}
  .project-card{display:block!important;box-sizing:border-box;flex:0 0 86%!important;width:86%!important;min-width:0!important;max-width:440px;scroll-snap-align:start;scroll-snap-stop:normal}
  .project-art{height:clamp(185px,58vw,235px)}
  .project-info{padding:15px}
  .project-info h3{font-size:18px;line-height:1.25}
  .project-empty{box-sizing:border-box;flex:0 0 86%;width:86%;min-width:0}
  .review-card{min-height:0}
  .contact-panel{box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;gap:16px;width:100%;padding:25px 20px}
  .social-links{display:flex;flex-wrap:wrap;gap:12px}
  .footer{box-sizing:border-box;width:100%;display:flex;flex-wrap:wrap;gap:14px;padding:22px 18px}
  .footer>span{order:3;width:100%;line-height:1.8}
  .modal-box{width:calc(100% - 28px);max-width:480px;max-height:85dvh;overflow-y:auto;box-sizing:border-box}
}
@media (max-width: 390px){
  .hero.section-wrap{padding-left:16px;padding-right:16px}
  .hero h1{font-size:clamp(34px,9.8vw,39px);letter-spacing:-1.7px}
  .hero-visual{height:395px}
  .profile-card{width:min(250px,76vw);height:350px}
  .hero-stats{gap:5px}
  .hero-stats b{font-size:16px}
  .section-wrap{padding-left:16px;padding-right:16px}
  .project-grid{width:calc(100% + 32px);margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px;scroll-padding-left:16px}
  .project-card{flex-basis:88%!important;width:88%!important}
  .project-empty{flex-basis:88%;width:88%}
  .project-art{height:195px}
  .topbar{width:calc(100% - 20px);margin-left:10px;margin-right:10px;padding:0 13px}
}
@media (max-width:760px){
  .admin-wrap{box-sizing:border-box;width:100%;max-width:100%;padding:18px 14px}
  .admin-box{box-sizing:border-box;width:100%;max-width:100%;padding:20px 16px}
  .admin-row{display:flex;flex-direction:column;align-items:stretch;gap:10px}
  .admin-form input,.admin-form select,.admin-form textarea,.admin-form button{box-sizing:border-box;width:100%;max-width:100%;min-width:0}
  .admin-list{width:100%;max-width:100%;overflow-x:auto}
}

/* FINAL FIX: keep mobile ID card centered; tether and clip track the exact same horizontal drag offset. */
@media (max-width:760px){
  .hero-visual{position:relative;display:block;overflow:visible}
  .profile-card{left:50%;right:auto;transform:translateX(-50%) rotate(-3deg);transform-origin:50% 8px}
  .lanyard{left:50%;transform:translateX(-50%);transform-origin:50% 0}
  .badge-clip{left:50%;transform:translateX(-50%);transform-origin:50% 0}
}


/* Final mobile-specific composition: compact hero and correctly layered badge hardware. */
@media (max-width:760px){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  .hero.section-wrap{width:100%;max-width:100%;padding:34px 18px 24px;gap:0}
  .hero-copy{width:100%;max-width:100%;}
  .hero h1{font-size:clamp(34px,9vw,48px);line-height:1.03;letter-spacing:-1.8px;margin:18px 0 16px}
  .lead{font-size:13px;line-height:1.65}
  .hero-stats{margin-top:24px;gap:8px}
  .hero-visual{width:100%;height:380px;margin:14px 0 0;position:relative!important;display:block;overflow:visible;isolation:isolate}
  .orbit-one{width:min(270px,78vw);height:340px}
  .orbit-two{width:min(220px,65vw);height:310px}
  .profile-card{position:absolute;left:50%;top:24px;right:auto;bottom:auto;width:min(260px,76vw);height:350px;padding:17px;transform:translateX(-50%) rotate(-3deg);transform-origin:50% 8px;z-index:3}
  .lanyard{position:absolute;left:50%;top:0;width:52px;height:40px;transform:translateX(-50%);z-index:2;overflow:hidden}
  .lanyard span{font-size:6px}
  .badge-clip{position:absolute;left:50%;top:14px;width:39px;height:30px;transform:translateX(-50%);z-index:5}
  .badge-clip i,.badge-clip b{position:relative;z-index:5}
  .float-tag{z-index:4;max-width:42%;font-size:7px;padding:8px 9px}
  .tag-one{top:38px;right:0}.tag-two{bottom:22px;left:0}
  .section-block{padding-top:48px;padding-bottom:48px}
}
@media(max-width:390px){
  .hero.section-wrap{padding-left:15px;padding-right:15px}
  .hero h1{font-size:clamp(32px,8.9vw,36px);letter-spacing:-1.6px}
  .hero-visual{height:365px}
  .profile-card{width:min(245px,76vw);height:335px;padding:15px}
  .profile-card .avatar{width:108px;height:108px}
  .profile-card .profile-script{font-size:20px}
  .tag-one{right:-1px}.tag-two{left:-1px}
}

/* Mobile full-scale composition: use the phone viewport instead of shrinking desktop proportions. */
@media (max-width:760px){
  .section-wrap{padding-left:18px;padding-right:18px}
  .hero.section-wrap{width:100%;max-width:100%;padding:38px 18px 28px;min-height:0;gap:0}
  .hero-copy{width:100%;max-width:none}
  .hero h1{font-size:clamp(38px,10vw,50px);line-height:1.04;letter-spacing:-2px;max-width:100%}
  .lead{font-size:14px;line-height:1.7;max-width:100%}
  .hero-actions .btn{padding:14px 17px;font-size:12px}
  .hero-stats{width:100%;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:28px}
  .hero-visual{width:100%;height:475px;margin:18px 0 0;display:block;position:relative;overflow:visible}
  .orbit-one{width:min(330px,88vw);height:430px}
  .orbit-two{width:min(275px,74vw);height:390px}
  .profile-card{left:50%;top:32px;width:min(340px,88vw);height:430px;padding:21px;border-radius:23px;transform:translateX(-50%) rotate(-3deg);transform-origin:50% 10px}
  .profile-card .avatar{width:clamp(112px,32vw,136px);height:clamp(112px,32vw,136px);border-radius:25px}
  .profile-card .avatar-logo{font-size:clamp(52px,15vw,66px)}
  .profile-card .profile-script{font-size:clamp(21px,6vw,26px)}
  .profile-card .profile-name{font-size:clamp(16px,4.7vw,20px)}
  .profile-card .profile-role{font-size:8px;letter-spacing:.8px}
  .profile-card .card-divider{margin:22px 0 15px}
  .lanyard{left:50%;top:0;width:54px;height:52px;transform:translateX(-50%);z-index:2}
  .badge-clip{left:50%;top:22px;width:40px;height:30px;transform:translateX(-50%);z-index:5}
  .float-tag{max-width:42%;font-size:8px;padding:9px 10px;z-index:4}
  .tag-one{top:44px;right:0}.tag-two{bottom:26px;left:0}
  .section-block{padding-top:58px;padding-bottom:58px}
  .section-heading h2,.contact-panel h2{font-size:clamp(32px,8.8vw,44px)}
  .project-grid{width:calc(100% + 36px);margin-left:-18px;margin-right:-18px;padding-left:18px;padding-right:18px}
  .project-card{flex-basis:92%!important;width:92%!important;max-width:none}
  .project-art{height:clamp(210px,64vw,270px)}
}
@media(max-width:390px){
  .hero.section-wrap{padding-left:15px;padding-right:15px}
  .hero h1{font-size:clamp(35px,9.5vw,39px);letter-spacing:-1.8px}
  .hero-visual{height:450px}
  .profile-card{top:30px;width:88vw;height:410px;padding:18px}
  .profile-card .avatar{width:112px;height:112px}
  .profile-card .profile-script{font-size:21px}
  .project-grid{width:calc(100% + 30px);margin-left:-15px;margin-right:-15px;padding-left:15px;padding-right:15px}
  .project-card{flex-basis:92%!important;width:92%!important}
}

/* Dynamic review carousel: content comes only from portfolio_reviews in Supabase. */
.review-grid.review-carousel{display:flex;flex-direction:column;align-items:center;gap:18px;max-width:720px;margin:0 auto;min-height:245px}
.review-carousel .review-slide{width:100%;min-height:220px;padding:clamp(22px,4vw,34px);animation:reviewIn .42s ease both}
.review-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.review-kicker{font:9px 'DM Mono',monospace;letter-spacing:1.3px;color:#aaa}
.review-carousel .stars{color:#f4ce72;letter-spacing:3px;font-size:15px;white-space:nowrap}
.review-carousel .review-message{font-size:clamp(15px,2.2vw,19px);line-height:1.8;color:#f0f0f0;margin:25px 0 28px;overflow-wrap:anywhere}
.review-photo{width:38px;height:38px;object-fit:cover;border-radius:50%;border:1px solid #ffffff30}
.review-controls{display:flex;align-items:center;justify-content:center;gap:16px;width:100%}
.review-arrow{width:36px;height:36px;border:1px solid #ffffff25;border-radius:50%;background:#ffffff08;cursor:pointer;font-size:18px;display:grid;place-items:center}
.review-arrow:hover,.review-arrow:focus-visible{background:#f2f2f2;color:#111}
.review-dots{display:flex;align-items:center;gap:7px}
.review-dot{width:7px;height:7px;border:0;border-radius:50%;background:#ffffff45;padding:0;cursor:pointer}
.review-dot.active{width:20px;border-radius:9px;background:#f2f2f2}
.review-count{font:9px 'DM Mono',monospace;letter-spacing:1px;color:#aaa}
.review-empty{width:100%;padding:24px;border:1px dashed #ffffff30;border-radius:14px;color:#aaa;font-size:12px;line-height:1.8;text-align:center}
@keyframes reviewIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px), (hover: none) and (pointer: coarse){.review-grid.review-carousel{min-height:260px;gap:14px}.review-carousel .review-slide{padding:22px 19px;min-height:210px}.review-carousel .review-message{margin:21px 0 24px}.review-controls{gap:12px}}
@media(prefers-reduced-motion:reduce){.review-carousel .review-slide{animation:none}}

/* Public review form and final phone-first layout overrides. */
.review-submit-panel{width:100%;max-width:720px;margin:34px auto 0;padding:clamp(18px,4vw,30px);border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,#111827e8,#0b101be8);box-sizing:border-box}
.review-submit-heading h3{font-size:clamp(22px,4vw,30px);letter-spacing:-.8px;margin:10px 0}
.review-submit-heading p{color:var(--muted);font-size:13px;line-height:1.75;margin:0 0 22px}
.public-review-form{display:grid;grid-template-columns:minmax(0,1fr);gap:9px}
.public-review-form label{font-size:11px;color:#cbd5e8;font-weight:700;margin-top:5px}
.public-review-form input,.public-review-form textarea,.public-review-form select{display:block;width:100%;min-width:0;box-sizing:border-box;background:#080d17;color:#f2f5ff;border:1px solid var(--line);border-radius:10px;padding:13px 14px;font:inherit;font-size:13px;outline:none}
.public-review-form textarea{resize:vertical;min-height:110px;line-height:1.65}
.public-review-form input:focus,.public-review-form textarea:focus,.public-review-form select:focus{border-color:#76a9ff;box-shadow:0 0 0 3px #76a9ff20}
.public-review-form .btn{justify-self:start;margin-top:8px;cursor:pointer}
.public-review-form .btn:disabled{opacity:.65;cursor:wait}
.public-review-form .admin-note{min-height:18px;margin:2px 0 0;overflow-wrap:anywhere}
.review-admin-actions{display:flex;gap:6px;flex:0 0 auto;align-items:center}
.publish-btn{background:#132d28;border:1px solid #2c7461;color:#b8f5dc;border-radius:7px;padding:8px 10px;cursor:pointer;white-space:nowrap;font-size:11px}
.review-status{color:#91b6ff!important}
@media(max-width:760px), (hover: none) and (pointer: coarse){
 html,body{width:100%;max-width:100%;overflow-x:clip}
 .topbar{box-sizing:border-box;width:100%;max-width:none;height:68px;margin:0;padding:0 16px;border-radius:0}
 .section-wrap{box-sizing:border-box;width:100%;max-width:none;margin:0;padding-left:18px;padding-right:18px}
 .hero.section-wrap{box-sizing:border-box;width:100%;padding:38px 18px 24px;grid-template-columns:minmax(0,1fr);display:grid;gap:0;min-height:0}
 .hero-copy,.hero-visual{min-width:0;max-width:100%}
 .hero h1{font-size:clamp(36px,10vw,48px);line-height:1.04;letter-spacing:-1.8px;overflow-wrap:normal}
 .hero-actions{gap:9px}.hero-actions .btn{min-height:44px;padding:12px 15px;gap:12px}
 .hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:8px}
 .hero-visual{width:100%;height:clamp(400px,112vw,475px);margin:20px 0 0;overflow:hidden}
 .profile-card{width:min(86vw,350px);height:clamp(385px,100vw,430px);padding:clamp(16px,4vw,22px)}
 .lanyard{left:50%;width:54px;z-index:2}.badge-clip{left:50%;z-index:5}
 .section-block{width:100%;padding-top:52px;padding-bottom:52px}
 .section-heading{width:100%;min-width:0}
 .section-heading h2,.contact-panel h2{font-size:clamp(30px,8.6vw,42px);line-height:1.08;overflow-wrap:anywhere}
 .review-grid.review-carousel{display:flex!important;width:100%;max-width:none;min-height:0;align-items:stretch}
 .review-carousel .review-slide{width:100%;min-width:0;box-sizing:border-box;min-height:0;padding:22px 18px}
 .review-carousel .review-message{font-size:15px;line-height:1.75;overflow-wrap:anywhere}
 .review-submit-panel{width:100%;max-width:none;margin:26px 0 0;padding:20px 16px;border-radius:14px}
 .public-review-form .btn{width:100%;justify-self:stretch;min-height:46px}
 .contact-section{width:100%;padding-left:18px;padding-right:18px}
 .contact-panel{width:100%;max-width:none}
 .footer{width:100%;max-width:none;box-sizing:border-box}
 .admin-wrap{width:100%;max-width:none}
 .admin-box{min-width:0}
 .review-admin-item{align-items:flex-start;flex-direction:column}
 .review-admin-actions{width:100%;justify-content:flex-end}
}
@media(max-width:390px){
 .section-wrap,.contact-section{padding-left:14px;padding-right:14px}
 .hero.section-wrap{padding-left:14px;padding-right:14px}
 .hero h1{font-size:clamp(33px,9.4vw,38px);letter-spacing:-1.5px}
 .hero-visual{height:390px}
 .profile-card{width:88vw;height:365px;padding:15px}
 .review-submit-panel{padding:17px 13px}
}

/* Realistic portrait ID badge proportions and centered hardware. */
.profile-card{width:clamp(285px,29vw,340px);height:clamp(445px,43vw,500px);border-radius:22px;padding:22px;box-sizing:border-box}
.profile-card .avatar{width:clamp(124px,12vw,145px);height:clamp(124px,12vw,145px)}
.lanyard{width:58px;left:50%;transform:translateX(-50%);z-index:2}
.badge-clip{left:50%;transform:translateX(-50%);z-index:5}
@media(max-width:760px), (hover: none) and (pointer: coarse){
 .hero-visual{height:clamp(485px,132vw,560px);overflow:hidden}
 .profile-card{left:50%;top:32px;width:min(84vw,330px);height:min(132vw,470px);min-height:420px;padding:20px;transform:translateX(-50%) rotate(-3deg);transform-origin:50% 10px}
 .profile-card .avatar{width:clamp(122px,37vw,142px);height:clamp(122px,37vw,142px)}
 .lanyard{left:50%;top:0;width:54px;height:52px;transform:translateX(-50%);z-index:2}
 .badge-clip{left:50%;top:22px;transform:translateX(-50%);z-index:5}
}
@media(max-width:390px){
 .hero-visual{height:455px}
 .profile-card{width:min(86vw,310px);height:425px;min-height:0;padding:17px}
 .profile-card .avatar{width:112px;height:112px}
}

/* Free ID-card dragging: do not clip the card or its lanyard inside the hero visual. */
.hero-visual{overflow:visible!important}
@media(max-width:760px), (hover:none) and (pointer:coarse){.hero-visual{overflow:visible!important}}
/* Detail layanan lebih ringkas dan mudah dibaca */
.detail-row{gap:12px;padding:15px 0}.detail-row h4{font-size:clamp(13px,1.2vw,16px);line-height:1.35;margin:0 0 5px}.detail-row p{font-size:clamp(11px,.95vw,13px);line-height:1.65;margin:0;max-width:54ch}.detail-num,.detail-arrow{font-size:12px}.modal-box #modalWebsiteLink{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;margin:0 8px 8px 0}.modal-box #modalWebsiteLink[hidden]{display:none!important}
@media(max-width:600px){.detail-row{gap:9px;padding:12px 0}.detail-row h4{font-size:13px}.detail-row p{font-size:11px;line-height:1.55}.detail-num,.detail-arrow{font-size:10px}.modal-box{padding:25px 20px}.modal-box h2{font-size:22px}}

/* Compact project cards: prevent oversized artwork and titles on desktop/mobile. */
.project-art{height:165px!important}
.project-info{padding:16px 18px!important}
.project-info h3{font-size:17px!important;line-height:1.3!important;margin:8px 0 12px!important}
.project-type{font-size:8px!important;letter-spacing:1px!important}
.open-project{width:38px!important;height:38px!important;flex:0 0 38px}
@media(max-width:760px), (hover:none) and (pointer:coarse){
  .project-grid{gap:12px!important}
  .project-card{flex-basis:82%!important;width:82%!important;max-width:340px!important;border-radius:17px!important}
  .project-art{height:150px!important;min-height:150px!important}
  .project-info{padding:14px 15px!important}
  .project-info h3{font-size:15px!important;line-height:1.3!important;margin:7px 0 10px!important}
  .open-project{width:36px!important;height:36px!important;flex-basis:36px}
  .art-label{top:10px!important;left:11px!important}
  .art-index{right:10px!important;bottom:9px!important}
}
@media(max-width:390px){
  .project-card{flex-basis:84%!important;width:84%!important}
  .project-art{height:140px!important;min-height:140px!important}
  .project-info{padding:12px!important}
  .project-info h3{font-size:14px!important}
}

/* Realistic physical ID badge hardware: woven strap, stitched edges, layered metal clip and attachment slot. */
.lanyard{
  width:64px!important;
  background:repeating-linear-gradient(90deg,#090a0d 0 2px,#202329 2px 3px,#101115 3px 5px,#303238 5px 6px,#111216 6px 9px)!important;
  border-left:1px solid #5b5d63!important;border-right:1px solid #030405!important;
  border-radius:0 0 9px 9px!important;
  box-shadow:inset 4px 0 5px #ffffff12,inset -5px 0 7px #000b,0 5px 9px #0007!important;
}
.lanyard:before{left:7px!important;width:2px!important;background:linear-gradient(90deg,#ffffff25,#0008)!important;box-shadow:1px 0 #0008}
.lanyard:after{right:7px!important;width:2px!important;background:linear-gradient(90deg,#0008,#ffffff20)!important;box-shadow:-1px 0 #0008}
.lanyard span{color:#d2d4d8!important;text-shadow:0 1px 1px #000,0 -1px #ffffff25!important;letter-spacing:2px!important}
.badge-clip{filter:drop-shadow(0 3px 2px #0009)}
.badge-clip i{
  width:13px!important;height:18px!important;border:3px solid #c8cbd0!important;border-radius:7px 7px 5px 5px!important;
  background:linear-gradient(90deg,#555a60 0%,#f5f6f7 24%,#8d9298 48%,#f2f3f4 68%,#555a60 100%)!important;
  box-shadow:inset 0 0 0 1px #ffffff75,0 1px 2px #000a!important;position:relative;z-index:2
}
.badge-clip b{
  width:35px!important;height:19px!important;border:1px solid #656970!important;border-radius:4px 4px 7px 7px!important;
  background:linear-gradient(180deg,#f4f5f6 0%,#aeb2b8 15%,#62676f 27%,#d9dce0 42%,#888d94 63%,#e5e7e9 82%,#555a61 100%)!important;
  box-shadow:inset 0 1px 1px #fff, inset 0 -2px 2px #0005,0 2px 3px #0009!important;position:relative;z-index:3
}
.badge-clip b:before{content:"";display:block;width:13px;height:4px;margin:3px auto 0;border-radius:2px;background:linear-gradient(180deg,#555a61,#e8eaed 45%,#696e74);box-shadow:0 1px 1px #fff8}
.profile-card{border:1px solid #d9e0eb55!important;box-shadow:0 30px 65px #0009,0 5px 12px #0005,inset 0 1px #ffffff38,inset 0 -2px 5px #0005!important;background-image:linear-gradient(145deg,#26364b 0%,#101723 42%,#080c13 100%)!important}
.profile-card:before{content:"";position:absolute;z-index:1;top:0;left:12%;width:76%;height:1px;background:linear-gradient(90deg,transparent,#ffffff55,transparent);pointer-events:none}
.profile-card .avatar{box-shadow:inset 0 0 0 1px #ffffff55,0 5px 12px #0008,0 15px 32px #0005!important}
@media(max-width:760px), (hover:none) and (pointer:coarse){.lanyard{width:58px!important}.badge-clip b{width:34px!important}}
/* Ensure the brand name remains clearly readable on the dark, realistic ID card. */
.profile-card{color:#f4f7fc!important}
.profile-card .profile-name{position:relative;z-index:2;color:#ffffff!important;font-weight:900!important;text-shadow:0 1px 2px #000a,0 0 10px #8bbcff35!important;opacity:1!important;visibility:visible!important}
.profile-card .profile-role{position:relative;z-index:2;color:#b9c5d8!important}

/* Samakan panel Bagikan Pengalaman dengan kartu ulasan agar menyatu dengan tema abu-abu. */
.review-submit-panel{background:linear-gradient(145deg,#333333,#242424)!important;border-color:#ffffff13!important;}


/* YouTube channel feature — inline, never a popup */
.youtube-feature{width:min(100%,520px);margin-top:24px;padding:17px;border:1px solid #ffffff1c;border-radius:20px;background:linear-gradient(145deg,#303030,#222);box-shadow:0 18px 45px #0002;overflow:hidden}
.youtube-feature-top{display:flex;align-items:center;gap:12px;min-width:0}
.youtube-play-mark{width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;border-radius:14px;background:#ff2638;color:white;font-size:16px;box-shadow:0 7px 20px #ff263833}
.youtube-channel-copy{min-width:0;flex:1}
.youtube-eyebrow{font:9px 'DM Mono',monospace;letter-spacing:1.4px;color:#b7b7b7}
.youtube-channel-copy h3{margin:4px 0 1px;font-size:15px;letter-spacing:-.3px}
.youtube-channel-copy p{margin:0;color:#aaa;font-size:11px}
.youtube-subscribe{flex:0 0 auto;border:1px solid #ffffff24;border-radius:999px;padding:9px 11px;font-size:10px;font-weight:700;color:#fff;white-space:nowrap}
.youtube-subscribe:hover{background:#ffffff12}
.youtube-stats-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:17px 0 11px;padding-top:13px;border-top:1px solid #ffffff14}
.youtube-stats-row>span:first-child{display:flex;flex-direction:column;gap:3px}
.youtube-stats-row b{font-size:15px}
.youtube-stats-row small{font:8px 'DM Mono',monospace;letter-spacing:1.2px;color:#aaa}
.youtube-live-note{display:flex;align-items:center;gap:7px;color:#ddd;font-size:10px}
.youtube-live-note i{width:7px;height:7px;border-radius:50%;background:#ff3848;box-shadow:0 0 10px #ff384855}
.youtube-video-frame{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:13px;background:#111}
.youtube-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.youtube-footnote{margin:11px 1px 0!important;font-size:10px!important;color:#aaa!important;line-height:1.6!important}
.youtube-footnote a{color:#fff;text-decoration:underline;text-underline-offset:3px}
@media(max-width:760px), (hover:none) and (pointer:coarse){.youtube-feature{width:100%;margin-top:22px;padding:14px;border-radius:18px}.youtube-play-mark{width:38px;height:38px;flex-basis:38px}.youtube-channel-copy h3{font-size:14px}.youtube-subscribe{padding:8px 9px;font-size:9px}.youtube-stats-row{margin-top:14px}}
@media(max-width:360px){.youtube-feature-top{gap:8px}.youtube-subscribe{font-size:8px;padding:8px}.youtube-channel-copy h3{font-size:13px}}

/* YouTube button beside Contact in hero actions */
.btn-youtube{background:#ff2638;color:#fff;border-color:#ff2638;gap:9px}.btn-youtube:hover{background:#e91e30;border-color:#ff5360}.btn-youtube span{font-size:12px}
.youtube-video-placeholder{aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:20px;border-radius:13px;background:radial-gradient(ellipse at 50% 40%,#4a171c,#151515 72%);border:1px solid #ffffff12;color:#fff}.youtube-placeholder-play{width:52px;height:38px;display:grid;place-items:center;border-radius:12px;background:#ff2638;font-size:19px;box-shadow:0 8px 26px #ff263844}.youtube-video-placeholder strong{font-size:14px}.youtube-video-placeholder>span:last-child{font-size:10px;color:#c5c5c5}.youtube-video-placeholder:hover{border-color:#ff263866}
@media(max-width:420px){.hero-actions .btn-youtube{flex:1}.hero-actions .btn{gap:10px}}
.youtube-video-loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:20px;background:radial-gradient(ellipse at 50% 40%,#4a171c,#151515 72%);color:#fff}.youtube-video-loading strong{font-size:14px}.youtube-video-loading>span:last-child{font-size:10px;color:#c5c5c5}

/* YouTube panel disembunyikan sampai tombol YouTube ditekan */
.youtube-feature[hidden]{display:none!important}
#youtubeToggleBtn{font:inherit;cursor:pointer}
.youtube-toggle-chevron{font-size:14px!important;margin-left:1px}
.youtube-video-frame{aspect-ratio:auto;overflow:visible;background:transparent}
.youtube-video-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.youtube-video-item{min-width:0;overflow:hidden;border:1px solid #ffffff16;border-radius:13px;background:#171717;padding-bottom:12px}
.youtube-video-thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#111}
.youtube-video-thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s}
.youtube-video-thumb:hover img{transform:scale(1.04)}
.youtube-thumb-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:42px;height:30px;border-radius:9px;background:#ff2638;color:#fff;box-shadow:0 5px 18px #0008}
.youtube-video-item h4{font-size:12px;line-height:1.45;margin:10px 10px 8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:35px}
.youtube-watch-link{display:inline-block;margin:0 10px;color:#ff6672;font-size:10px;font-weight:700}
.youtube-video-loading{grid-column:1/-1;padding:22px 12px;text-align:center;color:#bbb;font-size:12px;background:#171717;border-radius:12px}
@media(max-width:420px){.youtube-video-grid{grid-template-columns:1fr}.youtube-video-item h4{font-size:13px}}


/* ID card ratio 9:16 and admin-selected background must remain visible */
.profile-card{width:270px!important;height:auto!important;aspect-ratio:9/16!important;min-height:0!important;background-repeat:no-repeat!important;background-size:cover!important;background-position:center!important;}
.hero-visual{min-height:520px;height:520px!important;}
.profile-card .avatar-wrap{margin-top:24px!important;}
.profile-card .avatar{width:112px!important;height:112px!important;}
.profile-card .profile-script{margin-top:10px!important;font-size:24px!important;}
.profile-card .profile-name{margin-top:0!important;font-size:18px!important;}
.profile-card .card-divider{margin:15px 0 12px!important;}
@media(max-width:760px),(hover:none) and (pointer:coarse){
 .hero-visual{height:530px!important;min-height:530px!important;}
 .profile-card{width:min(270px,70vw)!important;height:auto!important;aspect-ratio:9/16!important;padding:18px!important;}
 .profile-card .avatar-wrap{margin-top:20px!important;}
 .profile-card .avatar{width:clamp(90px,30vw,112px)!important;height:clamp(90px,30vw,112px)!important;}
 .profile-card .profile-script{font-size:clamp(19px,6vw,24px)!important;}
 .profile-card .profile-name{font-size:clamp(15px,4.8vw,18px)!important;}
 .orbit-one{height:450px!important}.orbit-two{height:410px!important;}
}
@media(max-width:390px){.hero-visual{height:500px!important;min-height:500px!important;}.profile-card{width:min(245px,70vw)!important;}}

/* CUPZ PROJECT — animated sci-fi frame for every complete project card */
.project-card{position:relative;isolation:isolate;overflow:visible!important;border:0!important;border-radius:0!important;background:linear-gradient(145deg,#080d17,#050810)!important;color:#f4f7ff!important;box-shadow:0 12px 34px #0007,0 0 0 1px #74caff25!important;transition:transform .35s ease,filter .35s ease,box-shadow .35s ease!important;}
.project-card::before{content:"";position:absolute;inset:-2px;z-index:5;pointer-events:none;background:url('./assets/project-frame.png') center/100% 100% no-repeat;filter:drop-shadow(0 0 4px #39bfff75);animation:cupzFramePulse 4.2s ease-in-out infinite;}
.project-card::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;opacity:0;background:linear-gradient(115deg,transparent 0%,#65d9ff0a 38%,#9deeff32 49%,transparent 57%);background-size:220% 100%;animation:cupzLightningSweep 6s linear infinite;}
.project-card>*{position:relative;z-index:1;}
.project-card:hover{transform:translateY(-5px)!important;box-shadow:0 18px 45px #0009,0 0 24px #35bfff25!important;}
.project-art{height:245px!important;position:relative;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 50% 45%,#12345780,transparent 66%),linear-gradient(145deg,#070d18,#050810)!important;filter:none!important;}
.project-art::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at center,#4abfff14,transparent 65%);animation:cupzLogoAura 4s ease-in-out infinite;}
.project-art .project-photo{position:relative;z-index:1;width:clamp(76px,38%,150px)!important;height:clamp(76px,38%,150px)!important;object-fit:contain!important;border-radius:14px;filter:drop-shadow(0 0 12px #55caff70);animation:cupzLogoFloat 4s ease-in-out infinite;}
.project-art .art-window,.project-art .search-art,.project-art .bot-art{position:relative;z-index:1;animation:cupzLogoFloat 5s ease-in-out infinite;}
.project-art .art-label,.project-art .art-index{z-index:2;color:#d9efff!important;text-shadow:0 0 8px #50bfff75;}
.project-info{position:relative;z-index:2;min-height:115px;padding:20px 22px 25px!important;display:flex;align-items:center;justify-content:space-between;gap:12px;background:linear-gradient(180deg,#070c16f2,#060a12)!important;color:#f4f7ff!important;}
.project-info h3{color:#f5f8ff!important;}
.project-type{color:#79d9ff!important;}
.open-project{flex:0 0 auto;position:relative;z-index:2;border:1px solid #77d8ff65!important;background:linear-gradient(145deg,#163752,#071523)!important;color:#dff7ff!important;box-shadow:0 0 15px #37baff20;}
.open-project:hover{box-shadow:0 0 22px #39c7ff65!important;}
@keyframes cupzFramePulse{0%,100%{filter:drop-shadow(0 0 3px #39bfff60) brightness(1)}45%{filter:drop-shadow(0 0 8px #39bfffbd) brightness(1.08)}50%{filter:drop-shadow(0 0 15px #a4f1ff) brightness(1.35)}56%{filter:drop-shadow(0 0 4px #39bfff70) brightness(1.02)}}
@keyframes cupzLightningSweep{0%,82%,100%{opacity:0;background-position:120% 0}85%{opacity:1;background-position:60% 0}91%{opacity:.65;background-position:-20% 0}94%{opacity:0;background-position:-80% 0}}
@keyframes cupzLogoFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-9px) rotate(2deg)}}
@keyframes cupzLogoAura{0%,100%{opacity:.35;transform:scale(.9)}50%{opacity:1;transform:scale(1.08)}}
@media(max-width:760px),(hover:none) and (pointer:coarse){.project-card{border-radius:0!important;overflow:visible!important}.project-art{height:230px!important}.project-info{padding:17px 18px 23px!important;min-height:108px}.project-card::before{inset:-1px}}
@media(prefers-reduced-motion:reduce){.project-card::before,.project-card::after,.project-art::before,.project-art .project-photo,.project-art .art-window,.project-art .search-art,.project-art .bot-art{animation:none!important}}

/* CUPZ PROJECT — compact, detailed project cards (override previous sizing) */
.project-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:18px!important;
  align-items:stretch;
}
.project-card{
  min-width:0!important;
  max-width:none!important;
  border-radius:3px!important;
  background:linear-gradient(150deg,#0a1421 0%,#050810 70%)!important;
  box-shadow:0 10px 28px #0006, inset 0 0 24px #54caff08!important;
}
.project-card::before{inset:-1px!important;opacity:.96;}
.project-card::after{inset:2px!important;}
.project-art{
  height:178px!important;
  padding:20px 14px 16px!important;
  background:radial-gradient(ellipse at 50% 45%,#12345790,transparent 68%),linear-gradient(145deg,#08111e,#050810)!important;
}
.project-art .project-photo{
  width:clamp(62px,42%,112px)!important;
  height:clamp(62px,42%,112px)!important;
  border-radius:12px!important;
}
.project-info{
  min-height:94px!important;
  padding:13px 14px 18px!important;
  gap:8px!important;
  align-items:center!important;
  background:linear-gradient(180deg,#08111deF,#050810)!important;
}
.project-info h3{font-size:clamp(13px,1.15vw,16px)!important;line-height:1.25!important;margin:5px 0 0!important;letter-spacing:-.25px;}
.project-type{font-size:8px!important;letter-spacing:.9px!important;}
.open-project{width:34px!important;height:34px!important;font-size:13px!important;}
.project-card:hover{transform:translateY(-4px) scale(1.012)!important;}
@media(min-width:761px) and (max-width:1050px){
  .project-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important;}
  .project-art{height:170px!important;}
}
@media(max-width:760px),(hover:none) and (pointer:coarse){
  .project-grid{
    display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;
    gap:13px!important;width:calc(100% + 36px)!important;max-width:none!important;
    margin:0 -18px!important;padding:8px 18px 22px!important;
    overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x mandatory!important;
    scroll-padding-left:18px!important;-webkit-overflow-scrolling:touch;
  }
  .project-card{
    flex:0 0 74%!important;width:74%!important;max-width:330px!important;min-width:0!important;
    scroll-snap-align:start!important;border-radius:2px!important;
  }
  .project-art{height:168px!important;padding:17px 12px 13px!important;}
  .project-art .project-photo{width:clamp(65px,30vw,100px)!important;height:clamp(65px,30vw,100px)!important;}
  .project-info{min-height:86px!important;padding:12px 13px 16px!important;}
  .project-info h3{font-size:14px!important;}
  .open-project{width:32px!important;height:32px!important;}
  .project-card:hover{transform:none!important;}
}
@media(max-width:390px){
  .project-card{flex-basis:78%!important;width:78%!important;}
  .project-art{height:155px!important;}
  .project-info{padding:10px 11px 14px!important;}
}

/* CUPZ PROJECT — keep every project label/title fully readable inside the frame */
.project-info{box-sizing:border-box!important;min-width:0!important;overflow:visible!important;position:relative!important;z-index:6!important;align-items:center!important;}
.project-info > div,.project-info > section,.project-info .project-copy,.project-info .project-meta{min-width:0!important;max-width:100%!important;flex:1 1 auto!important;}
.project-info h3{display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;overflow:hidden!important;text-overflow:ellipsis!important;overflow-wrap:anywhere!important;word-break:normal!important;white-space:normal!important;max-width:100%!important;line-height:1.35!important;min-height:2.7em!important;color:#f7fbff!important;text-shadow:0 1px 8px #000!important;}
.project-type{display:block!important;max-width:100%!important;white-space:normal!important;overflow-wrap:anywhere!important;line-height:1.45!important;color:#91e5ff!important;text-shadow:0 1px 6px #000!important;}
.project-info .open-project{flex-shrink:0!important;}
.project-card::before{z-index:5!important;pointer-events:none!important;}
@media(max-width:760px),(hover:none) and (pointer:coarse){.project-info{min-height:100px!important;padding:13px 15px 20px!important;gap:9px!important}.project-info h3{font-size:14px!important;min-height:2.7em!important}.project-type{font-size:8px!important;letter-spacing:.55px!important}}


/* CUPZ refinement: remove C. marks and avatar tile background; enlarge project logos and lower labels */
.profile-card .mini-logo,.profile-card .avatar-logo{display:none!important;}
.profile-card .avatar{background:transparent!important;box-shadow:none!important;border:0!important;border-radius:0!important;overflow:visible!important;}
.profile-card .avatar img{background:transparent!important;object-fit:contain!important;border:0!important;box-shadow:none!important;border-radius:0!important;}
.profile-card .avatar-spark,.profile-card .avatar-caption{display:none!important;}
.project-art .project-photo{width:clamp(92px,48%,172px)!important;height:clamp(92px,48%,172px)!important;max-width:70%!important;max-height:70%!important;object-fit:contain!important;border-radius:10px!important;}
.project-art .art-label{top:27px!important;left:15px!important;max-width:calc(100% - 30px)!important;white-space:normal!important;line-height:1.4!important;}
@media(max-width:760px),(hover:none) and (pointer:coarse){.project-art .project-photo{width:clamp(104px,52%,164px)!important;height:clamp(104px,52%,164px)!important;max-width:72%!important;max-height:72%!important}.project-art .art-label{top:25px!important;left:13px!important}}

/* YouTube videos: horizontal swipe carousel, matching the project cards */
.youtube-video-grid{
 display:flex!important; flex-direction:row; align-items:stretch; gap:12px;
 width:100%; max-width:100%; overflow-x:auto; overflow-y:hidden;
 padding:2px 2px 10px; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
 -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:#ff2638 #ffffff12;
}
.youtube-video-grid::-webkit-scrollbar{height:5px}
.youtube-video-grid::-webkit-scrollbar-track{background:#ffffff12;border-radius:99px}
.youtube-video-grid::-webkit-scrollbar-thumb{background:#ff2638;border-radius:99px}
.youtube-video-item{flex:0 0 220px;width:220px;min-width:220px;scroll-snap-align:start}
.youtube-video-loading{position:relative;inset:auto;flex:0 0 100%;min-height:95px;box-sizing:border-box;grid-column:auto}
.youtube-video-placeholder{flex:0 0 100%;box-sizing:border-box}
@media(max-width:420px){.youtube-video-item{flex-basis:190px;width:190px;min-width:190px}.youtube-video-item h4{font-size:12px}}