:root{--color-bg: #F5F2EE;--color-primary: #2C2C2C;--color-accent: #C9A84C;--color-white: #FFFFFF;--font-heading: "DM Sans", sans-serif;--font-body: "Inter", sans-serif;--transition: all .3s ease;--shadow-sm: 0 4px 6px rgba(0, 0, 0, .05);--shadow-md: 0 10px 15px rgba(0, 0, 0, .08)}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:var(--font-body);color:var(--color-primary);background-color:var(--color-white);line-height:1.6;overflow-x:hidden}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:700;line-height:1.2}a{text-decoration:none;color:inherit;transition:var(--transition)}ul{list-style:none}img{max-width:100%;height:auto;display:block}.container{width:90%;max-width:1200px;margin:0 auto}.section-padding{padding:80px 0}.bg-light{background-color:var(--color-bg)}.bg-dark{background-color:var(--color-primary)}.text-white{color:var(--color-white)}.text-center{text-align:center}.mt-4{margin-top:2rem}.btn{display:inline-block;padding:12px 24px;border-radius:24px;font-family:var(--font-heading);font-weight:700;cursor:pointer;border:none;text-align:center;transition:var(--transition)}.btn-primary{background-color:var(--color-accent);color:var(--color-white)}.btn-primary:hover{background-color:#b3923c;transform:translateY(-2px)}.btn-outline{background-color:transparent;color:var(--color-white);border:2px solid var(--color-white)}.btn-outline:hover{background-color:var(--color-white);color:var(--color-primary)}.btn-large{padding:16px 36px;font-size:1.125rem}header{position:fixed;top:0;left:0;width:100%;z-index:1000;transition:var(--transition);padding:20px 0}header.scrolled{background-color:var(--color-white);box-shadow:var(--shadow-sm);padding:12px 0}.navbar{display:flex;justify-content:space-between;align-items:center}.logo{font-family:var(--font-heading);font-size:1.5rem;font-weight:800;color:var(--color-white)}header.scrolled .logo{color:var(--color-primary)}.logo span{color:var(--color-accent)}#nav-menu{display:flex;align-items:center;gap:32px}.nav-links{display:flex;gap:24px}.nav-links a{color:var(--color-white);font-weight:500}header.scrolled .nav-links a{color:var(--color-primary)}.nav-links a:hover{color:var(--color-accent)}.mobile-toggle{display:none;flex-direction:column;gap:6px;background:transparent;border:none;cursor:pointer}.mobile-toggle span{width:25px;height:2px;background-color:var(--color-white);transition:var(--transition)}header.scrolled .mobile-toggle span{background-color:var(--color-primary)}.hero{position:relative;min-height:55vh;padding-top:90px;padding-bottom:40px;display:flex;align-items:center;color:var(--color-white)}.hero-bg{position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1}.hero-bg img{width:100%;height:100%;object-fit:cover}.hero-bg .overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(#2c2c2cb3,#2c2c2ce6)}.hero-content{max-width:900px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center}.hero h1{font-family:Urbanist,sans-serif;font-size:clamp(3rem,6vw,4.5rem);margin-bottom:20px;line-height:1.1}.hero .subheadline{font-size:1.25rem;margin-bottom:40px;opacity:.9;max-width:700px;margin-left:auto;margin-right:auto}.hero-buttons{display:flex;justify-content:center;gap:16px;margin-bottom:24px;flex-wrap:wrap}.btn-pill{display:inline-flex;align-items:center;background-color:var(--color-white);color:var(--color-primary);border-radius:50px;padding:8px 8px 8px 24px;font-family:var(--font-heading);font-weight:700;font-size:1.1rem;text-decoration:none;transition:var(--transition);box-shadow:0 4px 15px #0000001a;gap:16px}.btn-pill:hover{transform:translateY(-2px);box-shadow:0 6px 20px #00000026}.btn-pill .icon-circle{display:flex;align-items:center;justify-content:center;background-color:var(--color-accent);color:var(--color-white);width:40px;height:40px;border-radius:50%;transition:var(--transition)}.btn-pill:hover .icon-circle{background-color:var(--color-primary)}.hero-social-proof{display:flex;align-items:center;justify-content:center;gap:16px;color:var(--color-white);animation-delay:.6s}.hero-social-proof .avatars{display:flex}.hero-social-proof .avatars img{width:48px;height:48px;border-radius:50%;border:3px solid rgba(255,255,255,.2);object-fit:cover;margin-left:-16px;box-shadow:0 4px 10px #0003}.hero-social-proof .avatars img:first-child{margin-left:0}.hero-social-proof .proof-text{display:flex;flex-direction:column;text-align:left}.hero-social-proof .proof-text strong{font-family:var(--font-heading);font-size:1.1rem;font-weight:700;line-height:1.2}.hero-social-proof .proof-text span{font-size:.9rem;opacity:.8}.marquee-section{padding:40px 0;overflow:hidden;background-color:var(--color-bg)}.marquee-container{display:flex;flex-direction:column;gap:16px}.marquee-track{display:flex;width:max-content;gap:16px}.row-1{animation:scrollMarqueeLeft 40s linear infinite}.row-2{animation:scrollMarqueeRight 45s linear infinite}.marquee-content{display:flex;gap:16px}.marquee-card{width:320px;height:220px;border-radius:12px;overflow:hidden;box-shadow:var(--shadow-sm);flex-shrink:0;background-color:#ddd}.marquee-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.marquee-card:hover img{transform:scale(1.05)}@keyframes scrollMarqueeLeft{0%{transform:translate(0)}to{transform:translate(-50%)}}@keyframes scrollMarqueeRight{0%{transform:translate(-50%)}to{transform:translate(0)}}.section-title{text-align:center;margin-bottom:48px}.section-title h2{font-family:Urbanist,sans-serif;font-size:2.5rem;margin-bottom:12px}.section-title p{color:#666;max-width:600px;margin:0 auto}.card{background-color:var(--color-white);padding:32px;border-radius:8px;box-shadow:var(--shadow-sm);transition:var(--transition)}.card:hover{box-shadow:var(--shadow-md);transform:translateY(-5px)}.layanan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px}.layanan-card{position:relative;border-radius:24px;padding:40px 32px;display:flex;flex-direction:column;gap:20px;box-shadow:0 10px 30px #0000000d;overflow:hidden;z-index:1}.layanan-card:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.06'/%3E%3C/svg%3E");z-index:0;pointer-events:none;mix-blend-mode:overlay}.layanan-card>*{position:relative;z-index:1}.layanan-card.light-card{background:linear-gradient(135deg,#fff,#f4f0ec);color:var(--color-primary);border:1px solid rgba(0,0,0,.03)}.layanan-card.dark-card{background:linear-gradient(135deg,#333,#1a1a1a);color:var(--color-white);border:1px solid rgba(255,255,255,.05)}.layanan-card .icon{margin-bottom:0;display:inline-flex}.layanan-card.light-card .icon{color:var(--color-primary)}.layanan-card.dark-card .icon{color:var(--color-white)}.layanan-card h3{font-family:Urbanist,sans-serif;font-size:1.4rem;margin-bottom:0}.layanan-card p{color:inherit;opacity:.8;font-size:.95rem;line-height:1.5}.portfolio-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px}@media(max-width:768px){.portfolio-grid{grid-template-columns:repeat(2,1fr);gap:16px}}.portfolio-card{position:relative;border-radius:20px;overflow:hidden;cursor:pointer;aspect-ratio:3/4}.portfolio-card img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}.portfolio-card:hover img{transform:scale(1.05)}.portfolio-overlay{position:absolute;bottom:0;left:0;right:0;height:50%;background:linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.5) 50%,transparent 100%);padding:32px 24px 24px;color:var(--color-white);display:flex;flex-direction:column;justify-content:flex-end;gap:16px;transition:var(--transition)}@media(max-width:768px){.portfolio-overlay{padding:16px 12px 12px;gap:8px}}.portfolio-info h3{font-family:Urbanist,sans-serif;font-size:1.5rem;margin-bottom:4px;line-height:1.2}@media(max-width:768px){.portfolio-info h3{font-size:1rem;margin-bottom:2px}}.portfolio-info p{font-size:.9rem;color:#ffffffb3}@media(max-width:768px){.portfolio-info p{font-size:.7rem;line-height:1.3}}.portfolio-action{display:flex;align-items:center;justify-content:space-between;padding-top:6px;font-weight:600;font-size:.95rem;opacity:.9}@media(max-width:768px){.portfolio-action{font-size:.75rem;padding-top:6px}.portfolio-action .icon-arrow svg{width:14px;height:14px}}.portfolio-action .icon-arrow{display:inline-flex;transition:transform .3s ease}.portfolio-card:hover .portfolio-action .icon-arrow{transform:translate(4px)}.testimoni-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}.testimoni-card{display:flex;flex-direction:column;justify-content:space-between}.stars{font-size:1.2rem;margin-bottom:16px}.quote{font-style:italic;margin-bottom:24px;color:#555}.client-info{display:flex;align-items:center;gap:16px}.client-info img{width:50px;height:50px;border-radius:50%;object-fit:cover}.client-info h4{font-size:1rem;margin-bottom:2px}.client-info span{font-size:.85rem;color:#777}.cta-subtext{font-size:1.125rem;opacity:.9;max-width:600px;margin:16px auto 0}footer{background-color:#1a1a1a;color:#ccc;padding:60px 0 20px}.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:40px;margin-bottom:40px}.footer-col h3{color:var(--color-white);margin-bottom:20px;font-size:1.25rem}.brand-col .logo{display:block;margin-bottom:16px;font-size:1.5rem}.links-col ul li{margin-bottom:12px}.links-col ul li a:hover,.contact-col a:hover{color:var(--color-accent)}.contact-col p{margin-bottom:12px}.footer-bottom{padding-top:20px;border-top:1px solid rgba(255,255,255,.1);font-size:.9rem}.modal{display:none;position:fixed;z-index:2000;top:0;left:0;right:0;bottom:0;background-color:#000c;align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .3s ease}.modal.show{display:flex;opacity:1}.modal-content{background-color:var(--color-white);max-width:800px;width:100%;border-radius:8px;overflow:hidden;position:relative;transform:translateY(-20px);transition:transform .3s ease}.modal.show .modal-content{transform:translateY(0)}.close-btn{position:absolute;top:16px;right:20px;font-size:2rem;color:var(--color-white);cursor:pointer;background:#00000080;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;z-index:10;transition:background .3s ease}.close-btn:hover{background:var(--color-primary)}#modal-img{width:100%;max-height:500px;object-fit:cover}.modal-text{padding:24px}.modal-text h3{margin-bottom:8px;font-size:1.5rem}.modal-text p{color:#555}.fade-in{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s ease}.fade-in.visible{opacity:1;transform:translateY(0)}@media(max-width:768px){.mobile-toggle{display:flex;z-index:1001}#nav-menu{position:fixed;top:0;right:-100%;width:250px;height:100vh;background-color:var(--color-white);flex-direction:column;justify-content:center;padding:40px;transition:var(--transition);box-shadow:-5px 0 15px #0000001a}#nav-menu.active{right:0}.nav-links{flex-direction:column;text-align:center;gap:24px;width:100%}.nav-links a{color:var(--color-primary);font-size:1.125rem}.nav-btn{margin-top:24px;width:100%}.hero{min-height:80vh;padding-top:100px;padding-bottom:80px}.hero h1{font-size:clamp(2.2rem,8vw,3rem);margin-bottom:16px}.hero .subheadline{font-size:1rem;margin-bottom:32px}.btn-pill{width:100%;justify-content:space-between;padding:6px 6px 6px 20px;font-size:.95rem}.btn-pill .icon-circle{width:36px;height:36px}.hero-social-proof .avatars img{width:40px;height:40px}.hero-social-proof .proof-text strong{font-size:1rem}.hero-social-proof .proof-text span{font-size:.8rem}.marquee-section{padding:24px 0}.marquee-card{width:240px;height:160px}.marquee-container,.marquee-track,.marquee-content{gap:12px}.section-title h2{font-size:2rem}}