*{box-sizing:border-box;margin:0;padding:0}html,body{background:#0c0c0c}body{color:#d7e2ea;font-family:Kanit,sans-serif;overflow-x:clip}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}button{cursor:pointer;font-family:inherit}.hero-heading{background:linear-gradient(#646973 0%,#bbccd7 100%);-webkit-text-fill-color:transparent;color:#0000;-webkit-background-clip:text;background-clip:text}.fade{opacity:0;transform:translate(var(--fx,0),var(--fy,30px));transition:opacity var(--fd,.7s) cubic-bezier(.25,.1,.25,1),transform var(--fd,.7s) cubic-bezier(.25,.1,.25,1);transition-delay:var(--fdelay,0s)}.fade.in{opacity:1;transform:translate(0)}.contact-btn{outline-offset:-3px;color:#fff;text-transform:uppercase;letter-spacing:.12em;background:linear-gradient(123deg,#18011f 7%,#b600a8 37%,#7621b0 72%,#be4c00 100%);border:none;border-radius:9999px;outline:2px solid #fff;padding:12px 32px;font-size:.75rem;font-weight:500;transition:transform .25s,filter .25s;display:inline-block;box-shadow:0 4px 4px #b501a740,inset 4px 4px 12px #7721b1}.contact-btn:hover{filter:brightness(1.12);transform:translateY(-2px)}@media (min-width:640px){.contact-btn{padding:14px 40px;font-size:.85rem}}@media (min-width:768px){.contact-btn{padding:16px 48px;font-size:1rem}}.ghost-btn{color:#d7e2ea;text-transform:uppercase;letter-spacing:.15em;background:0 0;border:2px solid #d7e2ea;border-radius:9999px;padding:12px 32px;font-size:.85rem;font-weight:500;transition:background .2s;display:inline-block}.ghost-btn:hover{background:#d7e2ea1a}@media (min-width:640px){.ghost-btn{padding:14px 40px;font-size:1rem}}.hero{flex-direction:column;height:100svh;display:flex;position:relative;overflow-x:clip}.navbar{z-index:20;justify-content:space-between;align-items:center;padding:24px 24px 0;display:flex;position:relative}@media (min-width:768px){.navbar{padding:32px 40px 0}}.navbar a{color:#d7e2ea;text-transform:uppercase;letter-spacing:.08em;font-size:.875rem;font-weight:500;transition:opacity .2s}.navbar a:hover{opacity:.7}@media (min-width:768px){.navbar a{font-size:1.125rem}}@media (min-width:1024px){.navbar a{font-size:1.4rem}}.hero-title-wrap{width:100%;overflow:hidden}.hero h1{text-transform:uppercase;letter-spacing:-.02em;white-space:nowrap;text-align:center;width:100%;margin-top:24px;font-size:14vw;font-weight:900;line-height:.95}@media (min-width:640px){.hero h1{margin-top:16px;font-size:15vw}}@media (min-width:768px){.hero h1{margin-top:-20px;font-size:16vw}}@media (min-width:1024px){.hero h1{font-size:17.5vw}}.hero-bottom{z-index:20;justify-content:space-between;align-items:flex-end;margin-top:auto;padding:0 24px 28px;display:flex;position:relative}@media (min-width:640px){.hero-bottom{padding-bottom:32px}}@media (min-width:768px){.hero-bottom{padding:0 40px 40px}}.hero-tagline{color:#d7e2ea;text-transform:uppercase;letter-spacing:.06em;max-width:160px;font-size:clamp(.75rem,1.4vw,1.5rem);font-weight:300;line-height:1.35}@media (min-width:640px){.hero-tagline{max-width:220px}}@media (min-width:768px){.hero-tagline{max-width:260px}}.hero-visual{z-index:10;will-change:transform;width:280px;margin-top:-110px;position:absolute;top:50%;left:50%;transform:translate(-50%)}@media (min-width:640px){.hero-visual{width:380px;margin-top:0;top:auto;bottom:0}}@media (min-width:768px){.hero-visual{width:470px}}@media (min-width:1024px){.hero-visual{width:560px}}.browser{background:linear-gradient(160deg,#15151a,#1e1f26);border:1px solid #d7e2ea2e;border-bottom:none;border-radius:22px 22px 0 0;overflow:hidden;box-shadow:0 -10px 80px #7621b059,0 0 120px #b600a82e}.browser-bar{background:#d7e2ea0f;align-items:center;gap:7px;padding:13px 16px;display:flex}.browser-bar i{border-radius:50%;width:10px;height:10px;display:block}.browser-bar i:first-child{background:#ff5f57}.browser-bar i:nth-child(2){background:#febc2e}.browser-bar i:nth-child(3){background:#28c840}.browser-url{color:#8a95a3;letter-spacing:.05em;background:#0c0c0c99;border-radius:99px;flex:1;margin-left:8px;padding:4px 12px;font-size:10px}.browser-body{padding:26px 24px 34px;position:relative;overflow:hidden}.browser-body:before{content:"";aspect-ratio:1;background:radial-gradient(circle,#b600a866,#0000 65%);border-radius:50%;width:70%;position:absolute;top:-40%;right:-20%}.browser-body h6{text-transform:uppercase;font-size:clamp(15px,2.4vw,24px);font-weight:800;line-height:1.05;position:relative}.browser-body p{color:#8a95a3;max-width:75%;margin:8px 0 14px;font-size:clamp(8px,1.1vw,11px);font-weight:300;position:relative}.browser-pills{gap:8px;display:flex;position:relative}.bpill{text-transform:uppercase;letter-spacing:.1em;border:1px solid #d7e2ea4d;border-radius:99px;padding:5px 12px;font-size:clamp(7px,1vw,10px)}.bpill.grad{background:linear-gradient(123deg,#b600a8,#7621b0);border-color:#0000;font-weight:600}.marquee{background:#0c0c0c;padding:96px 0 40px}@media (min-width:640px){.marquee{padding-top:128px}}@media (min-width:768px){.marquee{padding-top:160px}}.mrow{will-change:transform;gap:12px;width:max-content;display:flex}.mrow+.mrow{margin-top:12px}.tile{border-radius:16px;flex-direction:column;flex:none;width:420px;height:270px;display:flex;position:relative;overflow:hidden}.tile .t-nav{text-transform:uppercase;letter-spacing:.12em;color:#ffffffd9;justify-content:space-between;align-items:center;padding:14px 18px;font-size:9px;display:flex}.tile .t-nav b{letter-spacing:.05em;font-size:11px}.tile .t-links{opacity:.7;gap:10px;display:flex}.tile .t-hero{flex-direction:column;flex:1;justify-content:center;padding:0 20px;display:flex}.tile .t-hero h6{text-transform:uppercase;color:#fff;max-width:75%;font-size:21px;font-weight:800;line-height:1.05}.tile .t-line{background:#ffffff59;border-radius:99px;height:5px;margin-top:8px}.tile .t-line.s{width:52%}.tile .t-line.t{width:30%}.tile .t-btn{text-transform:uppercase;letter-spacing:.12em;color:#111;background:#fff;border-radius:99px;align-self:flex-start;margin-top:12px;padding:6px 14px;font-size:8px;font-weight:600}.tile .t-glow{filter:blur(2px);pointer-events:none;border-radius:50%;position:absolute}.about{flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:80px 20px;display:flex;position:relative}@media (min-width:640px){.about{padding:80px 32px}}@media (min-width:768px){.about{padding:80px 40px}}.about h2{text-transform:uppercase;letter-spacing:-.02em;text-align:center;font-size:clamp(3rem,12vw,160px);font-weight:900;line-height:.95}.about-text{color:#d7e2ea;text-align:center;max-width:560px;margin-top:40px;font-size:clamp(1rem,2vw,1.35rem);font-weight:500;line-height:1.7}@media (min-width:640px){.about-text{margin-top:56px}}@media (min-width:768px){.about-text{margin-top:64px}}.about-text .ch{opacity:.2;position:relative}.about .contact-btn{margin-top:64px}@media (min-width:640px){.about .contact-btn{margin-top:80px}}@media (min-width:768px){.about .contact-btn{margin-top:96px}}.deco{pointer-events:none;position:absolute}.deco svg{filter:drop-shadow(0 10px 30px #7621b059);width:100%;height:auto;display:block}.deco-tl{width:120px;top:4%;left:1%}.deco-bl{width:100px;bottom:8%;left:3%}.deco-tr{width:120px;top:4%;right:1%}.deco-br{width:130px;bottom:8%;right:3%}@media (min-width:640px){.deco-tl{width:160px;left:2%}.deco-bl{width:140px;left:6%}.deco-tr{width:160px;right:2%}.deco-br{width:170px;right:6%}}@media (min-width:768px){.deco-tl{width:210px;left:4%}.deco-bl{width:180px;left:10%}.deco-tr{width:210px;right:4%}.deco-br{width:220px;right:10%}}.services{color:#0c0c0c;background:#fff;border-radius:40px 40px 0 0;padding:80px 20px;position:relative}@media (min-width:640px){.services{border-radius:50px 50px 0 0;padding:96px 32px}}@media (min-width:768px){.services{border-radius:60px 60px 0 0;padding:128px 40px}}.services h2{text-transform:uppercase;text-align:center;letter-spacing:-.02em;color:#0c0c0c;margin-bottom:64px;font-size:clamp(3rem,12vw,160px);font-weight:900;line-height:.95}@media (min-width:640px){.services h2{margin-bottom:80px}}@media (min-width:768px){.services h2{margin-bottom:112px}}.svc-list{max-width:1024px;margin:0 auto}.svc{border-bottom:1px solid #0c0c0c26;align-items:flex-start;gap:clamp(20px,4vw,60px);padding:32px 0;display:flex}.svc:first-child{border-top:1px solid #0c0c0c26}@media (min-width:640px){.svc{padding:40px 0}}@media (min-width:768px){.svc{padding:48px 0}}.svc-num{color:#0c0c0c;flex:none;font-size:clamp(3rem,10vw,140px);font-weight:900;line-height:.9}.svc-name{text-transform:uppercase;font-size:clamp(1rem,2.2vw,2.1rem);font-weight:500;line-height:1.2}.svc-desc{opacity:.6;max-width:672px;margin-top:8px;font-size:clamp(.85rem,1.6vw,1.25rem);font-weight:300;line-height:1.7}.svc-price{text-transform:uppercase;letter-spacing:.08em;border:2px solid #0c0c0c;border-radius:99px;margin-top:14px;padding:6px 18px;font-size:clamp(.8rem,1.4vw,1.05rem);font-weight:600;display:inline-block}.svc-cta{text-align:center;margin-top:72px}.svc-cta p{opacity:.6;margin-bottom:24px;font-size:clamp(.9rem,1.6vw,1.2rem);font-weight:300}.projects{z-index:10;background:#0c0c0c;border-radius:40px 40px 0 0;margin-top:-40px;padding:80px 20px 120px;position:relative}@media (min-width:640px){.projects{border-radius:50px 50px 0 0;margin-top:-48px;padding:96px 32px 140px}}@media (min-width:768px){.projects{border-radius:60px 60px 0 0;margin-top:-56px;padding:128px 40px 160px}}.projects h2{text-transform:uppercase;text-align:center;letter-spacing:-.02em;margin-bottom:64px;font-size:clamp(3rem,12vw,160px);font-weight:900;line-height:.95}@media (min-width:768px){.projects h2{margin-bottom:96px}}.card-stack{max-width:1100px;margin:0 auto}.card-holder{height:85vh;position:relative}.pcard{will-change:transform;transform-origin:top;background:#0c0c0c;border:2px solid #d7e2ea;border-radius:40px;padding:16px;position:sticky;top:96px}@media (min-width:640px){.pcard{border-radius:50px;padding:24px}}@media (min-width:768px){.pcard{border-radius:60px;padding:32px;top:128px}}.pcard-top{flex-wrap:wrap;align-items:center;gap:clamp(12px,3vw,36px);padding:8px 8px 20px;display:flex}.pcard-num{font-size:clamp(2.6rem,8vw,110px);font-weight:900;line-height:.9}.pcard-cat{text-transform:uppercase;letter-spacing:.15em;opacity:.55;font-size:clamp(.65rem,1.2vw,.9rem)}.pcard-name{text-transform:uppercase;font-size:clamp(1.1rem,2.6vw,2.2rem);font-weight:600;line-height:1.1}.pcard-top .ghost-btn{margin-left:auto}.pcard-grid{gap:12px;display:flex}@media (min-width:640px){.pcard-grid{gap:16px}}.pcol1{flex-direction:column;gap:12px;width:40%;display:flex}@media (min-width:640px){.pcol1{gap:16px}}.pcol2{width:60%}.pimg{border-radius:40px;justify-content:center;align-items:center;width:100%;display:flex;position:relative;overflow:hidden}@media (min-width:640px){.pimg{border-radius:50px}}@media (min-width:768px){.pimg{border-radius:60px}}.pimg-a{height:clamp(130px,16vw,230px)}.pimg-b{height:clamp(160px,22vw,340px)}.pimg-c{height:calc(clamp(130px,16vw,230px) + clamp(160px,22vw,340px) + 12px)}@media (min-width:640px){.pimg-c{height:calc(clamp(130px,16vw,230px) + clamp(160px,22vw,340px) + 16px)}}.pimg .mock-ui{color:#fff;width:78%}.pimg .mock-ui .mu-title{text-transform:uppercase;font-size:clamp(13px,2vw,26px);font-weight:800;line-height:1.05}.pimg .mock-ui .mu-line{background:#ffffff59;border-radius:99px;height:6px;margin-top:9px}.pimg .mock-ui .mu-line.s{width:55%}.pimg .mock-ui .mu-line.t{width:32%}.pimg .mock-ui .mu-btn{text-transform:uppercase;letter-spacing:.12em;color:#111;background:#fff;border-radius:99px;margin-top:12px;padding:6px 14px;font-size:clamp(7px,1vw,10px);font-weight:600;display:inline-block}.pimg .mock-grid{grid-template-columns:1fr 1fr;gap:8px;width:74%;display:grid}.pimg .mock-grid i{aspect-ratio:4/3;background:#ffffff29;border-radius:14px;display:block}.pimg .mock-stat{text-align:center;color:#fff}.pimg .mock-stat b{font-size:clamp(22px,3.4vw,46px);font-weight:900;line-height:1;display:block}.pimg .mock-stat span{text-transform:uppercase;letter-spacing:.15em;opacity:.7;font-size:clamp(7px,1.1vw,11px)}.contact{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:80vh;padding:100px 24px;display:flex;position:relative;overflow:hidden}.contact:before{content:"";aspect-ratio:1.6;pointer-events:none;background:radial-gradient(circle,#7621b047,#b600a81f 45%,#0000 70%);border-radius:50%;width:min(900px,120vw);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.contact h2{text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(2.6rem,10vw,130px);font-weight:900;line-height:.95;position:relative}.contact p{color:#8a95a3;max-width:520px;margin:26px auto 44px;font-size:clamp(.95rem,1.8vw,1.25rem);font-weight:300;position:relative}.contact .mail{letter-spacing:.04em;color:#d7e2ea;margin-top:36px;font-size:clamp(1rem,2.4vw,1.6rem);font-weight:500;transition:opacity .2s;display:block;position:relative}.contact .mail:hover{opacity:.7}footer{color:#8a95a3;text-transform:uppercase;letter-spacing:.1em;border-top:1px solid #d7e2ea26;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:28px 24px;font-size:.85rem;font-weight:300;display:flex}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.fade{opacity:1;transform:none}.about-text .ch{opacity:1}}
