:root{--primary:#d96437;--primary-dark:#e37b4f;--primary-light:#f2ac81;--primary-tint:#d9643729;--primary-tint-strong:#d9643752;--primary-glow:#d9643766;--ink:#b8b1a9;--charcoal:#2a2827;--charcoal-2:#201e1d;--bg:#1c1a19;--bg-alt:#242220;--surface:#2b2825;--surface-2:#322e2a;--text:#f3efe9;--text-muted:#aca59d;--border:#ffffff14;--border-strong:#ffffff24;--glass-bg:#2b2825a8;--glass-bg-strong:#1c1a19d1;--glass-highlight:#ffffff0d;--gradient-brand:linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 55%, #b6501f 100%);--font-head:"Poppins", "Segoe UI", sans-serif;--font-body:"Inter", "Segoe UI", sans-serif;--shadow-sm:0 2px 10px #0000003d;--shadow-md:0 12px 32px #00000057;--shadow-lg:0 24px 60px #0000007a;--shadow-glow:0 10px 32px -6px var(--primary-glow);--ease-out:cubic-bezier(.16, 1, .3, 1);--radius:16px;--radius-sm:10px;--radius-lg:26px;--container:1180px}*,:before,:after{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:84px}body{font-family:var(--font-body);color:var(--text);background:var(--bg);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;-webkit-font-smoothing:antialiased;margin:0;overflow-x:hidden}img{max-width:100%;display:block}a{color:inherit;text-decoration:none}ul{margin:0;padding:0;list-style:none}button{font:inherit;cursor:pointer;color:inherit;background:0 0;border:none}h1,h2,h3,h4{font-family:var(--font-head);color:var(--text);margin:0 0 .5em;font-weight:600;line-height:1.2}p{color:var(--text-muted);margin:0 0 1em;line-height:1.7}.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:24px}.skip-link{background:var(--primary);color:#fff;border-radius:var(--radius-sm);z-index:999;transition:top .2s var(--ease-out);padding:10px 16px;position:absolute;top:-100px;left:16px}.skip-link:focus{top:16px}:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:4px}.glass{background:var(--glass-bg);border:1px solid var(--border);-webkit-backdrop-filter:blur(18px);box-shadow:inset 0 1px 0 0 var(--glass-highlight), var(--shadow-sm)}.text-gradient{background:var(--gradient-brand);-webkit-text-fill-color:transparent;color:var(--primary);-webkit-background-clip:text;background-clip:text}.ambient-glow{filter:blur(90px);pointer-events:none;z-index:0;border-radius:50%;width:520px;height:520px;position:absolute}.ambient-glow--services{background:radial-gradient(circle, var(--primary-tint-strong) 0%, transparent 70%);opacity:.5;top:-140px;right:-140px}.ambient-glow--contact{opacity:.6;background:radial-gradient(circle,#f2ac8138 0%,#0000 70%);bottom:-160px;left:-160px}.btn{transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out), background .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out);white-space:nowrap;border-radius:999px;justify-content:center;align-items:center;gap:8px;padding:14px 28px;font-size:.95rem;font-weight:600;display:inline-flex}.btn-primary{background:var(--gradient-brand);color:#fff;box-shadow:var(--shadow-glow)}.btn-primary:hover{box-shadow:0 16px 40px -8px var(--primary-glow), var(--shadow-md);transform:translateY(-2px)}.btn-outline{color:#fff;border:1.5px solid #ffffff80}.btn-outline:hover{background:#ffffff1f;border-color:#ffffffb3;transform:translateY(-2px)}.btn-sm{padding:10px 20px;font-size:.85rem}.btn-block{width:100%}.site-header{z-index:100;transition:padding .3s var(--ease-out), background .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease-out);border-bottom:1px solid #0000;padding:20px 0;position:fixed;top:0;left:0;right:0}.site-header.is-scrolled{background:var(--glass-bg-strong);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--border);box-shadow:var(--shadow-sm);padding:12px 0}.header-inner{justify-content:space-between;align-items:center;gap:24px;display:flex}.brand-logo{width:auto;height:46px}.main-nav ul{gap:30px;display:flex}.nav-link{font-family:var(--font-head);color:#ffffffd9;transition:color .2s var(--ease-out);padding:6px 2px;font-size:.95rem;font-weight:500;position:relative}.nav-link:hover,.nav-link.is-active{color:#fff}.nav-link:after{content:"";background:var(--gradient-brand);width:0;height:2px;transition:width .25s var(--ease-out);position:absolute;bottom:0;left:0}.nav-link:hover:after,.nav-link.is-active:after{width:100%}.header-actions{align-items:center;gap:16px;display:flex}.nav-toggle{flex-direction:column;gap:5px;padding:8px;display:none}.nav-toggle span{width:22px;height:2px;transition:transform .3s var(--ease-out), opacity .3s var(--ease-out);background:#fff;border-radius:2px}.hero{background:radial-gradient(circle at 78% 20%, #3a332f 0%, var(--charcoal) 45%, var(--charcoal-2) 100%);align-items:center;min-height:100vh;padding-top:90px;display:flex;position:relative;overflow:hidden}.hero-grid{background-image:linear-gradient(#ffffff0d 1px,#0000 1px),linear-gradient(90deg,#ffffff0d 1px,#0000 1px);background-size:56px 56px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#0000,#000 15% 75%,#0000);mask-image:linear-gradient(#0000,#000 15% 75%,#0000)}.hero-glow{filter:blur(10px);background:radial-gradient(circle,#d9643759 0%,#d9643700 70%);width:620px;height:620px;position:absolute;top:-120px;right:-180px}.hero-glow-2{filter:blur(20px);background:radial-gradient(circle,#f2ac812e 0%,#f2ac8100 70%);width:480px;height:480px;animation:12s ease-in-out infinite floaty;position:absolute;bottom:-160px;left:-160px}.hero-cube{opacity:.75;filter:drop-shadow(0 0 46px #d9643738);animation:8s ease-in-out infinite float;position:absolute;bottom:-60px;right:-40px}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-18px)}}@keyframes floaty{0%,to{transform:translate(0)}50%{transform:translate(16px,-20px)}}.hero-content{z-index:2;max-width:700px;position:relative}.eyebrow{font-family:var(--font-head);color:var(--primary-light);text-transform:uppercase;letter-spacing:.16em;align-items:center;gap:10px;margin-bottom:16px;font-size:.8rem;font-weight:500;display:inline-flex}.eyebrow:before{content:"";background:var(--primary);width:22px;height:1.5px}.hero h1{font-family:var(--font-head);color:#fff;letter-spacing:-.01em;margin-bottom:22px;font-size:clamp(2.5rem,5.2vw,4rem);font-weight:600}.text-accent{color:var(--primary)}.hero-lead{color:#ffffffb8;max-width:560px;margin-bottom:36px;font-size:1.1rem}.hero-actions{flex-wrap:wrap;gap:16px;margin-bottom:42px;display:flex}.hero-trust{color:#ffffff80;margin:0;font-size:.85rem}.scroll-cue{z-index:2;border:1.5px solid #fff6;border-radius:20px;width:26px;height:42px;transition:border-color .2s;position:absolute;bottom:34px;left:50%;transform:translate(-50%)}.scroll-cue:hover{border-color:var(--primary)}.scroll-cue span{background:var(--primary);border-radius:3px;width:4px;height:8px;animation:1.8s ease-in-out infinite scrollcue;position:absolute;top:8px;left:50%;transform:translate(-50%)}@keyframes scrollcue{0%{opacity:1;top:8px}70%{opacity:0;top:20px}to{opacity:0;top:8px}}.section{padding:116px 0;position:relative}.section-alt{background:var(--bg-alt)}.section-head{z-index:1;text-align:center;max-width:640px;margin:0 auto 56px;position:relative}.section-head h2{font-family:var(--font-head);font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:600}.section-lead{font-size:1.05rem}.about-grid .eyebrow,.about-grid h2{text-align:left}.about-grid{z-index:1;grid-template-columns:1.1fr .9fr;align-items:center;gap:72px;display:grid;position:relative}.about-copy h2{font-family:var(--font-head);max-width:500px;font-size:clamp(1.9rem,3.1vw,2.5rem);font-weight:600}.feature-list{grid-template-columns:1fr 1fr;gap:28px;margin-top:36px;display:grid}.feature-list li{align-items:flex-start;gap:14px;display:flex}.feature-icon{background:var(--primary-tint);width:44px;height:44px;color:var(--primary);transition:box-shadow .25s var(--ease-out), background .25s var(--ease-out);border-radius:12px;flex-shrink:0;place-items:center;display:grid}.feature-list li:hover .feature-icon{background:var(--primary-tint-strong);box-shadow:0 0 0 1px var(--primary-tint-strong)}.feature-icon svg{width:22px;height:22px}.feature-list h3{font-family:var(--font-head);margin-bottom:4px;font-size:1rem}.feature-list p{margin:0;font-size:.9rem}.about-visual{position:relative}.about-visual-frame{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);aspect-ratio:4/5;border:1px solid var(--border);overflow:hidden}.about-visual-frame img{object-fit:cover;width:100%;height:100%}.about-badge{background:var(--glass-bg-strong);-webkit-backdrop-filter:blur(18px);border:1px solid var(--border);border-radius:var(--radius);box-shadow:inset 0 1px 0 0 var(--glass-highlight), var(--shadow-md);text-align:center;padding:22px 28px;position:absolute;bottom:-28px;left:-28px}.about-badge span{font-family:var(--font-head);color:var(--primary);font-size:2.1rem;font-weight:600;line-height:1;display:block}.about-badge p{color:var(--ink);margin:8px 0 0;font-size:.78rem;font-weight:500}.services-grid{z-index:1;grid-template-columns:repeat(3,1fr);gap:28px;display:grid;position:relative}.service-card{background:var(--glass-bg);border:1px solid var(--border);border-radius:var(--radius);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 0 var(--glass-highlight);transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease-out);padding:40px 32px;position:relative}.service-card:hover{border-color:var(--primary-tint-strong);box-shadow:inset 0 1px 0 0 var(--glass-highlight), var(--shadow-glow), var(--shadow-md);transform:translateY(-6px)}.service-icon{background:var(--primary-tint);width:56px;height:56px;color:var(--primary);transition:box-shadow .3s var(--ease-out);border-radius:14px;place-items:center;margin-bottom:24px;display:grid}.service-card:hover .service-icon{box-shadow:0 0 0 1px var(--primary-tint-strong)}.service-icon svg{width:26px;height:26px}.service-card h3{font-family:var(--font-head);margin-bottom:10px;font-size:1.2rem}.service-card p{margin:0;font-size:.92rem}.proyek-group{z-index:1;position:relative}.proyek-group+.proyek-group{margin-top:56px}.proyek-group-title{font-family:var(--font-head);letter-spacing:.01em;text-align:left;align-items:center;gap:16px;margin:0 0 28px;font-size:1.6rem;font-weight:600;display:flex}.proyek-group-title:before{content:"";background:var(--primary);border-radius:2px;flex-shrink:0;width:28px;height:3px}.proyek-group-title:after{content:"";background:linear-gradient(90deg, var(--border-strong), transparent);flex:1;height:1px}.project-gallery,.workshop-gallery,.group-modal-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));grid-auto-rows:300px;gap:22px;display:grid}.project-item{border-radius:var(--radius);text-align:left;border:1px solid var(--border);transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s var(--ease-out);padding:0;position:relative;overflow:hidden}.project-item img{object-fit:cover;width:100%;height:100%;transition:transform .6s var(--ease-out)}.project-item:after{content:"";opacity:.75;transition:opacity .3s var(--ease-out);background:linear-gradient(#14131200 25%,#14131226 45%,#141312e0 100%);position:absolute;inset:0}.project-item:hover{border-color:var(--primary-tint-strong);box-shadow:var(--shadow-md);transform:translateY(-4px)}.project-item:hover img{transform:scale(1.07)}.project-item:hover:after{opacity:.92}.project-item-caption{z-index:2;color:#fff;font-family:var(--font-head);font-size:1.05rem;font-weight:500;position:absolute;bottom:18px;left:22px}.project-item-badge{z-index:2;background:var(--glass-bg-strong);-webkit-backdrop-filter:blur(4px);color:#fff;border:1px solid var(--border);border-radius:999px;padding:5px 11px;font-size:.75rem;font-weight:600;position:absolute;top:16px;right:16px}.marquee{z-index:1;cursor:grab;touch-action:pan-x;-webkit-user-select:none;user-select:none;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:10px 0;display:flex;position:relative;overflow:auto hidden;-webkit-mask-image:linear-gradient(90deg,#0000,#000 6% 94%,#0000);mask-image:linear-gradient(90deg,#0000,#000 6% 94%,#0000)}.marquee::-webkit-scrollbar{display:none}.marquee.is-dragging{cursor:grabbing;scroll-behavior:auto}.marquee-track{flex-shrink:0;align-items:center;gap:20px;padding-inline:10px;display:flex}.client-logo{border-radius:var(--radius-sm);border:1px solid var(--border);width:168px;height:104px;box-shadow:var(--shadow-sm);transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out);background:#fff;flex-shrink:0;place-items:center;padding:16px;display:grid}.client-logo:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)}.client-logo img{object-fit:contain;-webkit-user-drag:none;pointer-events:none;width:100%;height:100%}.contact-grid{z-index:1;grid-template-columns:1fr 1fr;align-items:start;gap:36px;display:grid;position:relative}.contact-cards{gap:24px;display:grid}.contact-card{background:var(--glass-bg);border:1px solid var(--border);border-radius:var(--radius);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 0 var(--glass-highlight);transition:border-color .3s var(--ease-out);padding:32px}.contact-card:hover{border-color:var(--primary-tint-strong)}.contact-card-icon{background:var(--primary-tint);width:48px;height:48px;color:var(--primary);border-radius:12px;place-items:center;margin-bottom:18px;display:grid}.contact-card-icon svg{width:24px;height:24px}.contact-card h3{font-family:var(--font-head);margin-bottom:10px;font-size:1.1rem}.contact-card p{margin-bottom:16px;font-size:.92rem}.contact-meta{gap:6px;margin-bottom:16px;font-size:.92rem;display:grid}.contact-meta a{color:var(--text);font-weight:500}.contact-meta a:hover{color:var(--primary)}.link-arrow{color:var(--primary);font-size:.88rem;font-weight:600}.contact-form{background:var(--glass-bg-strong);border:1px solid var(--border);border-radius:var(--radius);-webkit-backdrop-filter:blur(18px);box-shadow:inset 0 1px 0 0 var(--glass-highlight);gap:18px;padding:36px;display:grid}.contact-form-title{color:#fff;font-family:var(--font-head);margin:0;font-size:1.15rem;font-weight:600}.contact-form label{color:#ffffffa6;gap:8px;font-size:.85rem;font-weight:500;display:grid}.contact-form input,.contact-form textarea{font-family:var(--font-body);border-radius:var(--radius-sm);color:#fff;resize:vertical;transition:border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);background:#ffffff0f;border:1px solid #ffffff26;padding:12px 14px;font-size:.95rem}.contact-form input::placeholder,.contact-form textarea::placeholder{color:#ffffff59}.contact-form input:focus,.contact-form textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-tint);outline:none}.site-footer{background:var(--charcoal-2);color:#fff9;padding-top:70px;position:relative}.site-footer:before{content:"";background:linear-gradient(90deg, transparent, var(--primary-tint-strong), transparent);height:1px;position:absolute;top:0;left:0;right:0}.footer-inner{border-bottom:1px solid #ffffff14;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:50px;display:grid}.footer-brand img{height:42px;margin-bottom:14px}.footer-brand p{color:#ffffff73;max-width:220px;font-size:.88rem}.footer-col h4{font-family:var(--font-head);color:#fff;margin-bottom:16px;font-size:.95rem}.footer-col ul{gap:10px;display:grid}.footer-col a,.footer-col p{color:#ffffff80;font-size:.88rem}.footer-col a:hover{color:var(--primary)}.footer-bottom{text-align:center;color:#ffffff59;padding:22px 0;font-size:.82rem}.whatsapp-fab{color:#fff;z-index:90;width:56px;height:56px;transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out);background:#25d366;border-radius:50%;place-items:center;display:grid;position:fixed;bottom:24px;right:24px;box-shadow:0 10px 26px #25d36673}.whatsapp-fab:hover{transform:scale(1.08);box-shadow:0 14px 34px #25d3668c}.whatsapp-fab svg{width:28px;height:28px}.group-modal{-webkit-backdrop-filter:blur(6px);z-index:190;background:#11100ff0;padding:70px 24px;position:fixed;inset:0;overflow-y:auto}.group-modal[hidden]{display:none}.group-modal-inner{max-width:var(--container);margin:0 auto}.group-modal-head{justify-content:space-between;align-items:center;gap:20px;margin-bottom:32px;display:flex}.group-modal-head h3{font-family:var(--font-head);margin:0;font-size:1.6rem;font-weight:600}.group-modal-close{color:#fff;width:44px;height:44px;transition:background .2s var(--ease-out);border-radius:50%;flex-shrink:0;place-items:center;font-size:2rem;line-height:1;display:grid}.group-modal-close:hover{background:#ffffff1a}.lightbox{-webkit-backdrop-filter:blur(6px);z-index:200;background:#11100feb;justify-content:center;align-items:center;padding:40px;display:flex;position:fixed;inset:0}.lightbox[hidden]{display:none}.lightbox figure{text-align:center;max-width:min(90vw,900px);margin:0}.lightbox-frame{border-radius:var(--radius-sm);border:1px solid var(--border);overflow:hidden}.lightbox img{cursor:zoom-in;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;max-width:100%;max-height:80vh;transition:transform .25s var(--ease-out);margin-inline:auto}.lightbox img.is-zoomed{cursor:grab}.lightbox img.is-zoomed:active{cursor:grabbing}.lightbox img.is-panning{transition:none}.lightbox-counter{color:var(--primary-light);letter-spacing:.08em;margin:16px 0 0;font-size:.8rem;font-weight:600}.lightbox figcaption{color:#ffffffe6;font-family:var(--font-head);margin-top:6px;font-size:1.15rem;font-weight:500}.lightbox-description{color:#fff9;white-space:pre-line;max-width:640px;margin:10px auto 0;font-size:.92rem;line-height:1.7}.lightbox-close{color:#fff;width:48px;height:48px;transition:background .2s var(--ease-out);border-radius:50%;place-items:center;font-size:2.2rem;line-height:1;display:grid;position:absolute;top:26px;right:30px}.lightbox-close:hover{background:#ffffff1a}.lightbox-controls{display:contents}.lightbox-nav{background:var(--glass-bg-strong);border:1px solid var(--border);color:#fff;width:52px;height:52px;transition:background .2s var(--ease-out), border-color .2s var(--ease-out);border-radius:50%;place-items:center;font-size:2rem;line-height:1;display:grid;position:absolute;top:50%;transform:translateY(-50%)}.lightbox-nav[hidden]{display:none}.lightbox-nav:hover{border-color:var(--border-strong);background:#ffffff24}.lightbox-prev{left:24px}.lightbox-next{right:24px}@media (width<=640px){.lightbox{flex-direction:column;padding:60px 20px 28px}.lightbox-controls{justify-content:center;gap:18px;margin-top:18px;display:flex}.lightbox-nav{width:46px;height:46px;font-size:1.6rem;position:static;transform:none}}.reveal{opacity:0;transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);transform:translateY(24px)scale(.98)}.reveal.in-view{opacity:1;transform:translateY(0)scale(1)}@media (width<=960px){.about-grid{grid-template-columns:1fr}.about-visual{order:-1}.services-grid,.contact-grid{grid-template-columns:1fr}.footer-inner{grid-template-columns:1fr 1fr}.ambient-glow{width:360px;height:360px}}@media (width<=860px){.main-nav{background:var(--glass-bg-strong);-webkit-backdrop-filter:blur(20px);border-left:1px solid var(--border);width:min(80vw,320px);height:100vh;transition:transform .35s var(--ease-out);z-index:99;padding:100px 32px 32px;position:fixed;top:0;right:0;transform:translate(100%)}.main-nav.is-open{transform:translate(0)}.main-nav ul{flex-direction:column;gap:26px}.main-nav .nav-link{color:#fff;font-size:1.05rem}.nav-toggle{display:flex}.nav-toggle.is-open span:first-child{transform:translateY(7px)rotate(45deg)}.nav-toggle.is-open span:nth-child(2){opacity:0}.nav-toggle.is-open span:nth-child(3){transform:translateY(-7px)rotate(-45deg)}.header-actions .btn-sm{display:none}}@media (width<=720px){.section{padding:80px 0}.feature-list{grid-template-columns:1fr}.project-gallery,.workshop-gallery,.group-modal-grid{grid-template-columns:1fr;grid-auto-rows:240px}.about-badge{padding:14px 18px;bottom:-20px;left:16px}.footer-inner{grid-template-columns:1fr}.hero{text-align:left;padding-top:110px}.hero-cube{opacity:.35;width:280px;height:280px}.ambient-glow{display:none}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}html{scroll-behavior:auto}.reveal{transform:none}}
