.projects-page{background:#06172f;color:#eaf6ff;min-height:100vh}.projects-page .site-header{background:rgba(6,23,47,.94);backdrop-filter:blur(18px)}
.projects-hero{padding:112px 0 58px;background:radial-gradient(circle at 75% 15%,rgba(53,200,255,.20),transparent 28%),linear-gradient(180deg,#071a35,#06172f)}
.projects-hero .eyebrow{color:#4bd0ff}.projects-hero h1{max-width:900px;margin:10px 0 18px;font-size:clamp(42px,6vw,78px);line-height:.98;color:#fff}.projects-hero .lead{max-width:860px;color:#afcbe3;font-size:clamp(18px,2vw,23px);line-height:1.6}.portfolio-note{max-width:900px;margin-top:24px;padding:15px 18px;border:1px solid rgba(75,208,255,.24);border-radius:16px;background:rgba(10,39,73,.64);color:#9fbdd6;font-size:14px;line-height:1.5}
.projects-shell{width:min(1220px,calc(100% - 40px));margin:auto}.project-filters{display:flex;gap:10px;flex-wrap:wrap;padding:30px 0 18px}.project-filter{border:1px solid #24587f;background:#0a2749;color:#bcd5e9;border-radius:999px;padding:10px 16px;font:800 13px/1 Arial,sans-serif;cursor:pointer}.project-filter.active,.project-filter:hover{background:#35c8ff;color:#041426;border-color:#35c8ff}.projects-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;padding:10px 0 70px}.project-card{overflow:hidden;border:1px solid #24587f;border-radius:24px;background:linear-gradient(160deg,#0a2749,#081f3b);box-shadow:0 24px 65px rgba(0,0,0,.18);transition:.25s transform,.25s border-color}.project-card:hover{transform:translateY(-4px);border-color:#43cfff}.project-card[hidden]{display:none}.project-visual{height:300px;position:relative;overflow:hidden;background:#091f3a}.project-visual img{width:100%;height:100%;object-fit:cover;display:block}.project-visual:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(6,23,47,.9))}.project-visual.synthetic{display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 70% 15%,rgba(75,208,255,.28),transparent 28%),linear-gradient(135deg,#0b3159,#081c36)}.visual-word{position:relative;z-index:2;font:900 clamp(30px,5vw,58px)/.9 Arial,sans-serif;letter-spacing:-2px;color:#fff;text-align:center}.visual-word small{display:block;margin-top:12px;color:#54cbff;font:800 11px/1.2 Arial,sans-serif;letter-spacing:2.5px}.visual-ui{position:absolute;border:1px solid rgba(90,211,255,.36);background:rgba(7,26,52,.78);border-radius:16px}.visual-ui.a{width:42%;height:44%;left:8%;top:15%}.visual-ui.b{width:34%;height:25%;right:8%;bottom:15%}.visual-ui.c{width:22%;height:14%;right:15%;top:14%;background:linear-gradient(135deg,#1c75ff,#36d4ff)}.project-mosaic{display:grid;grid-template-columns:1fr 1fr;gap:3px;width:100%;height:100%}.project-mosaic img{height:150px;object-fit:cover}.project-body{padding:24px}.project-topline{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:14px}.project-badge{display:inline-flex;border:1px solid rgba(75,208,255,.34);background:rgba(35,117,178,.15);color:#69d8ff;border-radius:999px;padding:7px 10px;font:900 10px/1 Arial,sans-serif;letter-spacing:1px;text-transform:uppercase}.project-cat{color:#6f93b0;font:800 11px/1 Arial,sans-serif;text-transform:uppercase;letter-spacing:1px}.project-card h2{margin:0 0 12px;color:#fff;font-size:25px;line-height:1.14}.project-card p{margin:0;color:#a9c7df;line-height:1.6}.project-tags{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0;list-style:none}.project-tags li{padding:7px 9px;border-radius:9px;background:#071d37;color:#91b6d2;font-size:12px}.project-link{display:inline-flex;margin-top:20px;color:#56d4ff!important;font-weight:900}.projects-cta{padding:0 0 90px}.projects-cta-card{padding:36px;border:1px solid #2f719d;border-radius:26px;background:radial-gradient(circle at 90% 10%,rgba(53,200,255,.20),transparent 32%),#092748}.projects-cta-card h2{margin:0 0 8px;color:white;font-size:34px}.projects-cta-card p{max-width:760px;color:#aec9df;line-height:1.6}.projects-cta-card .button{margin-top:18px}
.home-projects-strip{padding:66px 0;background:linear-gradient(180deg,#06172f,#071c36)}.home-projects-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:24px}.home-projects-head h2{margin:5px 0;color:#fff;font-size:clamp(30px,4vw,46px)}.home-projects-head p{max-width:650px;color:#a8c5dc;line-height:1.55}.home-projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.home-project-card{display:block;padding:22px;min-height:170px;border:1px solid #24587f;border-radius:20px;background:linear-gradient(145deg,#0a2749,#081f3b);color:#fff!important}.home-project-card:hover{border-color:#4bd0ff;transform:translateY(-2px)}.home-project-card span{display:block;color:#52d0ff;font:900 10px/1 Arial,sans-serif;letter-spacing:1.2px;text-transform:uppercase}.home-project-card strong{display:block;margin:13px 0 8px;font-size:20px;line-height:1.18}.home-project-card small{color:#96b6cf;line-height:1.4}.home-projects-more{display:inline-flex;margin-top:22px;color:#55d2ff!important;font-weight:900}
@media(max-width:900px){.projects-grid{grid-template-columns:1fr}.home-projects-grid{grid-template-columns:1fr 1fr}.project-visual{height:250px}.home-projects-head{display:block}.projects-hero{padding-top:88px}}
@media(max-width:620px){.projects-shell{width:min(100% - 24px,1220px)}.home-projects-grid{grid-template-columns:1fr}.projects-hero h1{font-size:42px}.project-visual{height:220px}.project-body{padding:20px}.projects-cta-card{padding:24px}.home-projects-strip{padding:48px 0}}


/* premium portfolio polish v3 */
.projects-page{background:
  radial-gradient(circle at 8% 26%,rgba(39,145,255,.08),transparent 24%),
  radial-gradient(circle at 92% 58%,rgba(53,200,255,.06),transparent 24%),
  #06172f}
.projects-hero{position:relative;overflow:hidden;border-bottom:1px solid rgba(92,205,255,.08)}
.projects-hero:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.26;background-image:linear-gradient(rgba(108,202,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(108,202,255,.05) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 88%)}
.projects-hero:after{content:"";position:absolute;width:420px;height:420px;right:-130px;top:-160px;border-radius:50%;background:rgba(53,200,255,.12);filter:blur(80px);pointer-events:none}
.projects-hero .projects-shell{position:relative;z-index:1}
.projects-hero h1{letter-spacing:-.045em;text-wrap:balance;text-shadow:0 10px 45px rgba(0,0,0,.2)}
.projects-hero .lead{text-wrap:balance}
.portfolio-note{box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 14px 35px rgba(0,0,0,.08);backdrop-filter:blur(14px)}
.project-filters{position:sticky;top:70px;z-index:25;margin:0 -10px 6px;padding:18px 10px;background:linear-gradient(180deg,rgba(6,23,47,.97) 74%,rgba(6,23,47,0));backdrop-filter:blur(14px)}
.project-filter{transition:transform .2s ease,background .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease;box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
.project-filter:hover{transform:translateY(-1px);box-shadow:0 9px 24px rgba(16,159,225,.13)}
.project-filter:focus-visible{outline:2px solid #7de0ff;outline-offset:3px}
.projects-grid{counter-reset:project}
.project-card{counter-increment:project;position:relative;isolation:isolate;display:flex;flex-direction:column;background:linear-gradient(155deg,rgba(11,43,78,.98),rgba(6,28,55,.98));box-shadow:0 20px 60px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.025);transition:transform .34s cubic-bezier(.2,.7,.2,1),border-color .34s ease,box-shadow .34s ease}
.project-card:before{content:"";position:absolute;inset:0;z-index:2;border-radius:24px;pointer-events:none;opacity:0;background:linear-gradient(125deg,rgba(255,255,255,.09),transparent 22%,transparent 72%,rgba(53,200,255,.06));transition:opacity .34s ease}
.project-card:hover{transform:translateY(-7px);border-color:rgba(91,215,255,.8);box-shadow:0 28px 80px rgba(0,0,0,.28),0 0 0 1px rgba(76,204,255,.07),inset 0 1px 0 rgba(255,255,255,.04)}
.project-card:hover:before{opacity:1}
.project-visual{transform:translateZ(0);border-bottom:1px solid rgba(77,188,236,.10)}
.project-visual:before{content:counter(project,decimal-leading-zero);position:absolute;right:18px;top:16px;z-index:3;display:grid;place-items:center;min-width:34px;height:28px;padding:0 8px;border:1px solid rgba(134,222,255,.18);border-radius:999px;background:rgba(5,22,43,.56);backdrop-filter:blur(10px);color:rgba(222,247,255,.78);font:800 10px/1 Arial,sans-serif;letter-spacing:.12em;box-shadow:0 8px 18px rgba(0,0,0,.12)}
.project-visual img{transition:transform .55s cubic-bezier(.2,.7,.2,1),filter .35s ease}
.project-card:hover .project-visual img{transform:scale(1.035);filter:saturate(1.05) contrast(1.02)}
.project-body{display:flex;flex:1;flex-direction:column;position:relative;z-index:3}
.project-topline{min-height:30px}
.project-badge{box-shadow:inset 0 1px 0 rgba(255,255,255,.03);backdrop-filter:blur(8px)}
.project-card h2{letter-spacing:-.025em;text-wrap:balance}
.project-card p{text-wrap:pretty}
.project-tags{margin-top:auto;padding-top:20px}
.project-tags li{border:1px solid rgba(79,171,217,.08);background:rgba(5,25,49,.72);transition:border-color .2s ease,color .2s ease}
.project-card:hover .project-tags li{border-color:rgba(76,199,247,.13);color:#a8cbe2}
.project-link{margin-top:18px;align-items:center;gap:6px;transition:gap .22s ease,color .22s ease}
.project-link:hover{gap:10px;color:#8ee5ff!important}
.projects-cta-card{position:relative;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.035)}
.projects-cta-card:after{content:"";position:absolute;width:240px;height:240px;right:-70px;top:-90px;border-radius:50%;background:rgba(53,200,255,.13);filter:blur(46px);pointer-events:none}
.projects-cta-card>*{position:relative;z-index:1}
.home-project-card{transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.home-project-card:hover{transform:translateY(-5px);box-shadow:0 20px 50px rgba(0,0,0,.17)}
@media(max-width:900px){.project-filters{top:64px}.project-card:hover{transform:translateY(-4px)}}
@media(max-width:620px){.project-filters{top:58px;display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin:0 -12px 4px;padding:14px 12px 18px}.project-filters::-webkit-scrollbar{display:none}.project-filter{flex:0 0 auto}.projects-grid{gap:16px}.project-card{border-radius:20px}.project-card:before{border-radius:20px}.project-visual:before{right:12px;top:12px}.project-card h2{font-size:23px}}
@media(prefers-reduced-motion:reduce){.project-card,.project-visual img,.project-filter,.home-project-card,.project-link{transition:none!important}.project-card:hover,.home-project-card:hover,.project-filter:hover{transform:none!important}.project-card:hover .project-visual img{transform:none!important}}

/* Keep new 16:10 illustrations intact at every card width. Legacy concept frames stay unchanged. */
.project-visual:has(>img[src^="/assets/project-covers/"]){height:auto;aspect-ratio:16/10}
.project-visual:has(>img[src^="/assets/project-covers/"]):after{background:linear-gradient(180deg,transparent 72%,rgba(6,23,47,.48))}

/* Home portfolio visual upgrade v5 */
.home-project-card{overflow:hidden;padding-top:0;display:flex;flex-direction:column;min-height:365px;position:relative}
.home-project-card:before{content:"";display:block;flex:0 0 154px;height:154px;margin:0 -22px 20px;background-color:#081d37;background-repeat:no-repeat;background-position:center;background-size:cover;border-bottom:1px solid rgba(89,203,255,.14);box-shadow:inset 0 -48px 54px rgba(5,20,39,.24);transition:filter .28s ease,transform .38s cubic-bezier(.2,.7,.2,1)}
.home-project-card:hover:before{filter:saturate(1.08) brightness(1.035);transform:scale(1.012)}
.home-project-card:nth-child(1):before{background-image:url('/assets/project-covers/beqson.svg')}
.home-project-card:nth-child(2):before{background-image:url('/assets/project-covers/geo.svg')}
.home-project-card:nth-child(4):before{background-image:url('/assets/project-covers/brandkit.svg')}
.home-project-card:nth-child(5):before{background-image:url('/assets/project-covers/report.svg')}
.home-project-card:nth-child(6):before{background-image:url('/assets/project-covers/ai-visual.svg')}
.home-project-card:nth-child(3):before{background-image:url('/assets/project-covers/industry.svg');background-size:cover;background-position:center}


.home-project-card span{margin-top:0}.home-project-card strong{font-size:19px}.home-project-card small{display:block;margin-top:auto;padding-top:8px}
@media(max-width:900px){.home-project-card{min-height:350px}.home-project-card:before{flex-basis:170px;height:170px}}
@media(max-width:620px){.home-project-card{min-height:0}.home-project-card:before{flex-basis:190px;height:190px}.home-project-card strong{font-size:20px}}
@media(prefers-reduced-motion:reduce){.home-project-card:before{transition:none!important}.home-project-card:hover:before{transform:none!important}}