@import "https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,600;1,700&display=swap";:root{--bg:#0b0d15;--panel:#121521;--text:#f6f3ed;--muted:#9da1ae;--line:#ffffff1f;--lime:#d8ff74}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--text);margin:0;font-family:DM Sans,sans-serif}#root{z-index:1;position:relative}.water-trail{pointer-events:none;z-index:0;mix-blend-mode:screen;position:fixed;inset:0}.wrap{width:min(1160px,100% - 64px);margin:auto}.nav{justify-content:space-between;align-items:center;height:88px;display:flex}.logo{color:#fff;letter-spacing:-2px;font:700 25px DM Mono,monospace;text-decoration:none}.logo span{color:var(--lime)}nav{gap:32px;margin-left:80px;display:flex}nav a,footer a{color:var(--muted);font-size:14px;text-decoration:none}.nav-cta,.case-link{color:var(--text);align-items:center;gap:10px;font-size:14px;text-decoration:none;display:inline-flex}.arrow{font-size:20px;line-height:.7;transition:transform .2s;display:inline-block}.arrow.left{transform:rotate(180deg)}a:hover .arrow{transform:translate(4px)}a:hover .arrow.left{transform:rotate(180deg)translate(4px)}.hero{padding:90px 0 80px;position:relative;overflow:hidden}.signal{color:#b9d9b8;letter-spacing:.02em;margin-bottom:45px;font:12px DM Mono,monospace}.signal i{background:#89f39a;border-radius:50%;width:8px;height:8px;margin-right:8px;display:inline-block;box-shadow:0 0 12px #89f39a}.eyebrow{letter-spacing:.12em;color:#9da1ae;margin:0 0 16px;font:11px DM Mono,monospace}.hero h1,h2{letter-spacing:-.06em;z-index:1;margin:0;font:600 clamp(52px,7.7vw,105px)/.95 Playfair Display,serif;position:relative}.hero h1 em,h2 em{color:var(--lime);font-weight:600}.intro{color:#b7bac5;max-width:530px;margin:32px 0;font-size:18px;line-height:1.6}.hero-actions{align-items:center;gap:28px;display:flex}.button{padding:15px 20px;font-size:14px;font-weight:500;text-decoration:none}.primary{background:var(--lime);color:#13160f;align-items:center;gap:14px;display:inline-flex}.text-button{color:var(--text);align-items:center;gap:10px;display:inline-flex}.hero-orbit{border:1px solid var(--line);color:#aeb3c0;border-radius:50%;flex-wrap:wrap;place-content:center;gap:17px;width:390px;height:390px;font:13px DM Mono;display:flex;position:absolute;top:68px;right:-56px;transform:rotate(-15deg)}.hero-orbit:before,.hero-orbit:after{content:"";border:1px solid #d8ff7442;border-radius:50%;position:absolute}.hero-orbit:before{inset:42px}.hero-orbit:after{inset:105px}.hero-orbit span,.hero-orbit b{z-index:1}.hero-orbit b{color:var(--lime)}.metrics{border-top:1px solid var(--line);border-bottom:1px solid var(--line);grid-template-columns:repeat(3,1fr);margin-bottom:142px;padding:27px 0;display:grid}.metrics div{border-right:1px solid var(--line);align-items:center;gap:19px;padding:0 35px;display:flex}.metrics div:first-child{padding-left:0}.metrics div:last-child{border:0}.metrics strong{letter-spacing:-.08em;font:500 40px/.9 DM Mono}.metrics strong span{color:var(--lime)}.metrics p{color:#9da1ae;margin:0;font-size:12px;line-height:1.4}.section-head{justify-content:space-between;align-items:end;margin-bottom:45px;display:flex}.section-head h2,.about h2{font-size:60px}.section-copy{width:285px;color:var(--muted);margin:0;font-size:15px;line-height:1.55}.project-card{border:1px solid var(--line);background:#171a26;grid-template-columns:1.05fr .95fr;min-height:515px;display:grid;overflow:hidden}.project-content{padding:58px}.project-content h3{letter-spacing:-.04em;margin:0 0 17px;font:600 42px Playfair Display}.project-description{color:#c4c6ce;max-width:380px;font-size:16px;line-height:1.55}.project-content ul{margin:31px 0;padding:0;list-style:none}.project-content li{color:#dddde0;margin:11px 0;font-size:13px}.project-content li span{color:var(--lime);margin-right:10px;font-size:10px}.tags{flex-wrap:wrap;gap:7px;margin-bottom:31px;display:flex}.tags span{color:#c2c5ce;border:1px solid #ffffff3d;border-radius:20px;padding:6px 9px;font:11px DM Mono}.case-link{border-bottom:1px solid;padding-bottom:4px}.project-art{background:radial-gradient(circle,#2c2633,#141722 70%);place-items:center;display:grid;position:relative;overflow:hidden}.project-art:after{content:"";background:repeating-linear-gradient(90deg,#0000 0 55px,#ffffff06 56px);position:absolute;inset:0}.glow{filter:blur(50px);opacity:.32;background:#e4342a;border-radius:50%;width:270px;height:270px;position:absolute}.browser{z-index:1;background:#f1eee8;width:74%;height:62%;position:relative;transform:rotate(-5deg);box-shadow:0 28px 55px #0008}.browser-top{background:#20222b;height:30px;padding:10px}.browser-top i{background:#989ca5;border-radius:50%;width:6px;height:6px;margin-right:4px;display:inline-block}.browser-body{padding:25px}.project-mark{color:#1c1d28;font:700 42px DM Sans}.art-lines b{background:#ccc9c3;width:68%;height:7px;margin:15px 0;display:block}.art-lines b:nth-child(2){width:45%}.art-cards{gap:9px;margin-top:30px;display:flex}.art-cards span{background:#d6d3cf;flex:1;height:63px}.yellow .project-art{background:radial-gradient(circle,#473d1b,#151720 70%)}.yellow .glow{background:#f5bb1d}.yellow .project-mark{color:#e2a900}.blue .project-art{background:radial-gradient(circle,#193b52,#141720 70%)}.blue .glow{background:#2f9ee5}.blue .project-mark{color:#2587c4}.slider-controls{justify-content:space-between;align-items:center;padding:22px 0 142px;display:flex}.dots{gap:9px;display:flex}.dots button{cursor:pointer;background:#40434d;border:0;border-radius:50%;width:7px;height:7px;padding:0}.dots .active{background:var(--lime);border-radius:4px;width:27px}.round-button{border:1px solid var(--line);color:#fff;cursor:pointer;background:0 0;width:42px;height:42px;margin-left:7px}.round-button:hover{border-color:var(--lime);color:var(--lime)}.about{grid-template-columns:1fr 1fr;gap:60px;padding-bottom:145px;display:grid}.about-copy{max-width:500px}.about-copy p{color:#b8bbc5;margin:0 0 19px;font-size:17px;line-height:1.7}.about-copy .case-link{margin-top:14px}.skills{background:#131620;padding:90px 0}.skill-cloud{flex-wrap:wrap;gap:12px;max-width:880px;display:flex}.skill-cloud span{border:1px solid var(--line);color:#adb0ba;border-radius:30px;padding:11px 17px;font:13px DM Mono}.skill-cloud .featured{color:#10130c;background:var(--lime);border-color:var(--lime)}.contact{padding:145px 0 120px}.contact h2{font-size:80px}.email{color:#fff;border-bottom:1px solid var(--lime);align-items:center;gap:15px;margin-top:43px;padding-bottom:7px;font:500 clamp(17px,2.5vw,27px) DM Mono;text-decoration:none;display:inline-flex}.phone{color:var(--muted);margin-top:25px;font:13px DM Mono}footer{border-top:1px solid var(--line);justify-content:space-between;align-items:center;height:100px;display:flex}footer p{color:#777b87;font-size:12px}@media (width<=700px){.wrap{width:calc(100% - 40px)}.nav{height:70px}.nav nav{display:none}.nav-cta{font-size:0}.nav-cta .arrow{font-size:20px}.hero{padding:70px 0 62px}.hero h1{font-size:57px}.hero-orbit{opacity:.28;width:310px;height:310px;top:75px;right:-130px}.intro{font-size:16px}.metrics{grid-template-columns:1fr;margin-bottom:85px;padding:0}.metrics div{border:0;border-bottom:1px solid var(--line);padding:20px 0}.metrics div:last-child{border:0}.section-head{margin-bottom:30px;display:block}.section-head h2,.about h2{font-size:49px}.section-copy{width:auto;margin-top:25px}.project-card{grid-template-columns:1fr}.project-content{padding:35px 28px}.project-content h3{font-size:37px}.project-art{min-height:300px}.slider-controls{padding-bottom:82px}.about{grid-template-columns:1fr;gap:28px;padding-bottom:85px}.about-copy p{font-size:16px}.skills{padding:65px 0}.contact{padding:90px 0}.contact h2{font-size:57px}.email{align-items:flex-end;line-height:1.3}.email .arrow{flex:none}footer{height:90px}.hero-actions{flex-direction:column;align-items:flex-start;gap:10px}.button{padding:13px 16px}}.skills{transition:background-color .35s}.skills.skill-active{background:var(--skill-color)}.skill-cloud span{cursor:default;transition:transform .2s,box-shadow .2s}.skill-cloud span:hover{transform:translateY(-3px);box-shadow:0 7px 24px #0005}body,.project-mark,.hero h1,h2,.project-content h3{font-family:Poppins,sans-serif}.hero-orbit{align-content:unset;justify-content:unset;overflow:hidden}.hero-orbit img{object-fit:cover;object-position:50% 22%;z-index:1;filter:contrast(1.03)saturate(.93);width:112%;height:112%;position:relative;transform:rotate(15deg)scale(1.05)}.hero-orbit:before,.hero-orbit:after{z-index:2;pointer-events:none}.skills{margin-bottom:142px}@media (width<=700px){.skills{margin-bottom:85px}}
