:root{--void:#05090c;--panel:#0c121d;--ink:#f2f4f8;--soft:rgba(242,244,248,.66);--mute:rgba(242,244,248,.43);--line:rgba(255,255,255,.14);--blue:#2d6cdf;--font:"Pretendard Variable",Pretendard,-apple-system,"Segoe UI","Malgun Gothic",sans-serif}
*{box-sizing:border-box}html{background:var(--void);scroll-behavior:smooth}body{margin:0;background:var(--void);color:var(--ink);font-family:var(--font);word-break:keep-all;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}button:focus-visible,a:focus-visible{outline:2px solid #8db6ff;outline-offset:3px}.portfolio-shell{width:min(1180px,calc(100% - 48px));margin:0 auto}
.portfolio-head{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;min-height:78px;padding:0 clamp(24px,4.8vw,72px);border-bottom:1px solid var(--line);background:rgba(5,9,12,.86);backdrop-filter:blur(16px)}.portfolio-brand{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;letter-spacing:.16em}.portfolio-brand>span{width:13px;height:13px;background:linear-gradient(135deg,#8fb6ff,#2f66d8);clip-path:polygon(50% 0,100% 100%,0 100%)}.portfolio-brand small{font-size:10px;font-weight:400;letter-spacing:.1em;color:var(--mute)}.portfolio-head nav{display:flex;align-items:center;gap:8px}.portfolio-head nav>a{padding:8px 12px;font-size:12px;color:var(--soft)}.portfolio-head nav>a:not(.head-cta){position:relative;padding-bottom:13px;transition:color .2s}.portfolio-head nav>a:not(.head-cta)::after{content:"";position:absolute;right:12px;bottom:3px;left:12px;height:2px;background:var(--blue);transform:scaleX(0);transition:transform .2s}.portfolio-head nav>a:not(.head-cta):hover,.portfolio-head nav>a[aria-current="page"]{color:var(--ink)}.portfolio-head nav>a:not(.head-cta):hover::after,.portfolio-head nav>a[aria-current="page"]::after{transform:scaleX(1)}.portfolio-head .head-cta{padding:9px 15px;border:1px solid var(--blue);border-radius:999px;color:var(--ink)}.portfolio-head .head-cta:hover{background:var(--blue)}
.portfolio-hero{position:relative;min-height:440px;display:flex;align-items:end;overflow:hidden;border-bottom:1px solid var(--line);background:radial-gradient(circle at 76% 22%,rgba(45,108,223,.27),transparent 34%),linear-gradient(130deg,#09111c,#05090c 70%)}.hero-grid{position:absolute;inset:0;opacity:.55;background:linear-gradient(90deg,rgba(124,171,255,.13) 1px,transparent 1px),linear-gradient(rgba(124,171,255,.11) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(90deg,transparent 0%,#000 42%,transparent 100%)}.hero-copy{position:relative;padding:112px 0 72px}.eyebrow{margin:0 0 16px;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#90b7ff}.hero-copy h1,.section-head h2,.portfolio-cta h2{margin:0;font-weight:300;letter-spacing:-.035em}.hero-copy h1{font-size:clamp(42px,6vw,78px);line-height:1.08}.hero-copy>p:last-child{max-width:48ch;margin:26px 0 0;color:var(--soft);font-size:17px;line-height:1.65}
.portfolio-section{padding:108px 0 120px}.section-head{display:flex;align-items:end;justify-content:space-between;gap:34px;margin-bottom:40px}.section-head h2{font-size:clamp(31px,4vw,52px);line-height:1.18}.section-head>p{max-width:31ch;margin:0;color:var(--soft);font-size:16px;line-height:1.65}.portfolio-filter{display:grid;grid-template-columns:repeat(7,max-content);column-gap:10px;align-items:end;width:100%;padding:0 0 12px;border-bottom:1px solid var(--line)}.portfolio-filter button{position:relative;padding:8px 6px 10px;border:0;border-radius:0;background:transparent;color:var(--mute);font-size:14px;font-weight:600;line-height:1;white-space:nowrap;cursor:pointer;transition:color .2s}.portfolio-filter button::after{content:"";position:absolute;right:6px;bottom:-13px;left:6px;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:center;transition:transform .2s}.portfolio-filter button:hover,.portfolio-filter button.is-active{background:transparent;border-color:transparent;color:var(--ink)}.portfolio-filter button.is-active::after{transform:scaleX(1)}
.portfolio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:30px}.portfolio-card{overflow:hidden;border:1px solid var(--line);border-radius:16px;background:var(--panel);transition:transform .2s,border-color .2s}.portfolio-card:hover{transform:translateY(-4px);border-color:rgba(120,168,255,.72)}.portfolio-card[hidden]{display:none}.project-media{position:relative;display:grid;place-items:center;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(135deg,rgba(45,108,223,.32),rgba(5,9,16,.94) 62%)}.project-media::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(124,171,255,.16) 1px,transparent 1px),linear-gradient(rgba(124,171,255,.12) 1px,transparent 1px);background-size:28px 28px}.project-media span{position:relative;font-size:10px;font-weight:700;letter-spacing:.14em;color:rgba(225,236,255,.58)}.project-media b{position:absolute;top:14px;left:14px;font-size:11px;letter-spacing:.12em;color:#b8d0ff}.project-body{padding:19px 20px 22px}.project-body p{margin:0;color:#91b9ff;font-size:11px;font-weight:700;letter-spacing:.04em}.project-body h3{margin:10px 0 8px;font-size:21px;letter-spacing:-.03em}.project-body span{display:block;color:var(--soft);font-size:14px;line-height:1.55}
.portfolio-cta{padding:110px 0;background:linear-gradient(135deg,#102a59,#071321 66%);border-top:1px solid rgba(140,183,255,.28)}.portfolio-cta h2{font-size:clamp(30px,4vw,54px);line-height:1.2}.portfolio-cta a{display:inline-flex;gap:12px;align-items:center;margin-top:32px;padding:13px 20px;border:1px solid rgba(255,255,255,.42);border-radius:999px;font-weight:600}.portfolio-cta a:hover{background:rgba(255,255,255,.12)}.portfolio-cta a span{color:#a9c8ff;font-size:20px}.portfolio-foot{display:flex;justify-content:space-between;gap:20px;padding:28px clamp(24px,4.8vw,72px);color:var(--mute);font-size:12px}.portfolio-foot span:first-child{font-weight:700;letter-spacing:.14em;color:var(--soft)}
@media (max-width:760px){.portfolio-shell{width:min(100% - 40px,1180px)}.portfolio-head{min-height:64px;padding:0 20px}.portfolio-brand small,.portfolio-head nav>a:not(.head-cta){display:none}.portfolio-hero{min-height:390px}.hero-copy{padding:88px 0 52px}.section-head{display:block}.section-head>p{margin-top:20px}.portfolio-section{padding:78px 0}.portfolio-grid{grid-template-columns:1fr;gap:14px}.portfolio-cta{padding:78px 0}.portfolio-foot{display:block;padding:24px 20px}.portfolio-foot span{display:block}.portfolio-foot span+span{margin-top:8px}}