/* Start custom CSS */@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600&family=Playfair+Display:wght@400;500;600;700&display=swap');
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
body{font-family:'Inter',sans-serif;background:#0a0a0a;color:#f5f5f5;overflow-x:hidden;-webkit-font-smoothing:antialiased}

.site-nav{position:fixed;top:0;left:0;width:100%;z-index:1000;padding:24px 48px;display:flex;justify-content:space-between;align-items:center;transition:all .6s cubic-bezier(.16,1,.3,1);opacity:0;animation:fadeInDown 1s ease forwards .5s}
.site-nav.scrolled{background:rgba(10,10,10,.9);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:16px 48px}
.nav-logo{font-family:'Playfair Display',serif;font-size:22px;font-weight:600;letter-spacing:2px;color:#f5f5f5;text-decoration:none}
.nav-logo span{color:#c9a96e}
.nav-links{display:flex;gap:40px;list-style:none}
.nav-links a{font-family:'Inter',sans-serif;font-size:12px;font-weight:300;letter-spacing:2px;text-transform:uppercase;color:rgba(245,245,245,.6);text-decoration:none;position:relative;padding-bottom:4px;transition:color .4s ease}
.nav-links a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:#c9a96e;transition:width .4s cubic-bezier(.16,1,.3,1)}
.nav-links a:hover{color:#f5f5f5}
.nav-links a:hover::after{width:100%}
.nav-cta{font-family:'Inter',sans-serif;font-size:11px;font-weight:400;letter-spacing:2px;text-transform:uppercase;color:#0a0a0a;background:#c9a96e;padding:12px 28px;text-decoration:none;transition:all .4s cubic-bezier(.16,1,.3,1)}
.nav-cta:hover{background:#d4b87a;transform:translateY(-2px)}
.mobile-toggle{display:none;flex-direction:column;gap:6px;cursor:pointer;z-index:1001}
.mobile-toggle span{width:28px;height:1px;background:#f5f5f5;transition:all .4s ease}

.hero-pinned{position:relative;height:400vh}
.hero-sticky{position:sticky;top:0;height:100vh;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;background:#0a0a0a}
.hero-text{position:absolute;z-index:20;text-align:center;max-width:800px;padding:0 24px;top:55%;transform:translateY(-50%);transition:opacity .15s linear,transform .15s linear;pointer-events:none}
.hero-tagline{font-family:'Inter',sans-serif;font-size:11px;font-weight:300;letter-spacing:5px;text-transform:uppercase;color:#c9a96e;margin-bottom:30px;opacity:0;animation:fadeInUp 1.2s ease forwards 1s}
.hero-headline{font-family:'Playfair Display',serif;font-size:clamp(32px,7vw,72px);font-weight:500;line-height:1.15;letter-spacing:-1px;color:#f5f5f5;margin-bottom:20px}
.hero-headline span{display:inline-block;opacity:0;transform:translateY(40px);animation:revealUp 1s cubic-bezier(.16,1,.3,1) forwards}
.hero-headline:nth-of-type(1) span{animation-delay:1.2s}
.hero-headline:nth-of-type(2) span{animation-delay:1.5s}
.hero-headline:nth-of-type(3) span{animation-delay:1.8s}
.hero-description{font-family:'Inter',sans-serif;font-size:clamp(14px,1.4vw,17px);font-weight:300;line-height:1.8;color:rgba(245,245,245,.5);max-width:550px;margin:0 auto 40px;opacity:0;animation:fadeInUp 1.2s ease forwards 2s}
.hero-cta-group{display:flex;gap:24px;justify-content:center;align-items:center;opacity:0;animation:fadeInUp 1s ease forwards 2.4s;pointer-events:auto}
.hero-cta-primary{font-family:'Inter',sans-serif;font-size:12px;font-weight:400;letter-spacing:2px;text-transform:uppercase;color:#0a0a0a;background:#c9a96e;padding:16px 36px;text-decoration:none;transition:all .4s cubic-bezier(.16,1,.3,1)}
.hero-cta-primary:hover{background:#d4b87a;transform:translateY(-2px)}
.hero-cta-secondary{font-family:'Inter',sans-serif;font-size:12px;font-weight:300;letter-spacing:2px;text-transform:uppercase;color:rgba(245,245,245,.6);text-decoration:none;padding:16px 0;position:relative;transition:color .4s ease}
.hero-cta-secondary::after{content:'';position:absolute;bottom:12px;left:0;width:0;height:1px;background:#c9a96e;transition:width .4s cubic-bezier(.16,1,.3,1)}
.hero-cta-secondary:hover{color:#f5f5f5}
.hero-cta-secondary:hover::after{width:100%}
.scroll-indicator{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;opacity:0;animation:fadeInUp 1s ease forwards 3s;z-index:20;transition:opacity .15s linear}
.scroll-indicator span{font-family:'Inter',sans-serif;font-size:9px;font-weight:300;letter-spacing:4px;text-transform:uppercase;color:rgba(245,245,245,.25)}
.scroll-line{width:1px;height:50px;background:linear-gradient(to bottom,rgba(245,245,245,.2),transparent);position:relative;overflow:hidden}
.scroll-line::after{content:'';position:absolute;top:-100%;left:0;width:100%;height:100%;background:#c9a96e;animation:scrollPulse 2s ease-in-out infinite}

.web-system{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10;width:var(--web-size,180px);height:var(--web-size,180px);transition:none;will-change:width,height}
.web-container{position:relative;width:100%;height:100%}
.web-svg{position:absolute;top:0;left:0;width:100%;height:100%;opacity:var(--web-opacity,.6);transition:none}
.web-svg line{stroke:rgba(200,200,200,.4);stroke-width:.8;stroke-linecap:round;transition:none}
.web-svg .web-radial{stroke:rgba(200,200,200,.15);stroke-width:.5}
.dew-drop{position:absolute;width:3px;height:3px;background:radial-gradient(circle,rgba(255,255,255,.6) 0%,transparent 70%);border-radius:50%;opacity:var(--dew-opacity,.4);transition:none}
.spider{position:absolute;width:var(--spider-size,24px);height:var(--spider-size,24px);top:var(--spider-y,-100px);left:50%;transform:translateX(-50%);z-index:25;transition:none;will-change:top,width,height}
.spider-body{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60%;height:70%;background:radial-gradient(ellipse at 30% 30%,#333 0%,#1a1a1a 60%,#000 100%);border-radius:50% 50% 45% 45%;box-shadow:0 2px 8px rgba(0,0,0,.5)}
.spider-head{position:absolute;top:15%;left:50%;transform:translateX(-50%);width:35%;height:30%;background:radial-gradient(ellipse at 40% 30%,#333 0%,#000 100%);border-radius:50%}
.spider-eye{position:absolute;width:3px;height:3px;background:rgba(200,200,200,.8);border-radius:50%;box-shadow:0 0 2px rgba(255,255,255,.3)}
.spider-eye.left{top:35%;left:30%}
.spider-eye.right{top:35%;right:30%}
.spider-leg{position:absolute;width:2px;background:linear-gradient(to bottom,#333,#111);border-radius:1px;transform-origin:top center}
.spider-leg.l1{top:20%;left:10%;height:45%;transform:rotate(-35deg)}
.spider-leg.l2{top:35%;left:5%;height:40%;transform:rotate(-55deg)}
.spider-leg.l3{top:55%;left:8%;height:35%;transform:rotate(-70deg)}
.spider-leg.l4{top:70%;left:18%;height:30%;transform:rotate(-85deg)}
.spider-leg.r1{top:20%;right:10%;height:45%;transform:rotate(35deg)}
.spider-leg.r2{top:35%;right:5%;height:40%;transform:rotate(55deg)}
.spider-leg.r3{top:55%;right:8%;height:35%;transform:rotate(70deg)}
.spider-leg.r4{top:70%;right:18%;height:30%;transform:rotate(85deg)}
.silk-thread{position:absolute;top:-200vh;left:50%;transform:translateX(-50%);width:1px;height:200vh;background:linear-gradient(to bottom,transparent,rgba(200,200,200,.3));z-index:24;opacity:var(--silk-opacity,0);transition:none}

.content-section{position:relative;padding:120px 48px;background:#0a0a0a;z-index:30}
.content-section::before{content:'';position:absolute;top:0;left:0;width:100%;height:1px;background:linear-gradient(to right,transparent,rgba(245,245,245,.08),transparent)}
.section-header{text-align:center;max-width:700px;margin:0 auto 80px}
.section-label{font-family:'Inter',sans-serif;font-size:11px;font-weight:300;letter-spacing:5px;text-transform:uppercase;color:#c9a96e;margin-bottom:20px;opacity:0;transform:translateY(20px);transition:all 1s ease}
.section-label.visible{opacity:1;transform:translateY(0)}
.section-title{font-family:'Playfair Display',serif;font-size:clamp(28px,4.5vw,52px);font-weight:500;line-height:1.2;color:#f5f5f5;opacity:0;transform:translateY(30px);transition:all 1s ease .15s}
.section-title.visible{opacity:1;transform:translateY(0)}
.section-desc{font-family:'Inter',sans-serif;font-size:15px;font-weight:300;line-height:1.8;color:rgba(245,245,245,.5);margin-top:24px;opacity:0;transform:translateY(20px);transition:all 1s ease .3s}
.section-desc.visible{opacity:1;transform:translateY(0)}

.services-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:rgba(245,245,245,.03)}
.service-card{background:#0f0f0f;padding:60px 40px;position:relative;overflow:hidden;cursor:pointer;opacity:0;transform:translateY(40px);transition:background .6s ease,opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
.service-card.visible{opacity:1;transform:translateY(0)}
.service-card:nth-child(1){transition-delay:0s}
.service-card:nth-child(2){transition-delay:.15s}
.service-card:nth-child(3){transition-delay:.3s}
.service-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse at center,rgba(201,169,110,.05) 0%,transparent 70%);opacity:0;transition:opacity .6s ease}
.service-card:hover::before{opacity:1}
.service-card:hover{background:#141414}
.service-icon{width:48px;height:48px;margin-bottom:28px;border:1px solid rgba(201,169,110,.3);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;color:#c9a96e;transition:all .4s ease}
.service-card:hover .service-icon{border-color:#c9a96e;transform:translateY(-4px)}
.service-title{font-family:'Playfair Display',serif;font-size:24px;font-weight:500;color:#f5f5f5;margin-bottom:14px;position:relative;z-index:2}
.service-description{font-family:'Inter',sans-serif;font-size:14px;font-weight:300;line-height:1.7;color:rgba(245,245,245,.45);position:relative;z-index:2;transition:color .4s ease}
.service-card:hover .service-description{color:rgba(245,245,245,.65)}
.service-link{display:inline-flex;align-items:center;gap:8px;margin-top:24px;font-family:'Inter',sans-serif;font-size:11px;font-weight:400;letter-spacing:2px;text-transform:uppercase;color:rgba(245,245,245,.35);text-decoration:none;position:relative;z-index:2;transition:all .4s ease}
.service-link::after{content:'->';transition:transform .4s ease;color:#c9a96e}
.service-card:hover .service-link{color:#f5f5f5}
.service-card:hover .service-link::after{transform:translateX(6px)}

.portfolio-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;max-width:1200px;margin:0 auto}
.portfolio-item{position:relative;overflow:hidden;aspect-ratio:16/10;opacity:0;transform:translateY(50px);transition:all 1s cubic-bezier(.16,1,.3,1)}
.portfolio-item.visible{opacity:1;transform:translateY(0)}
.portfolio-item:nth-child(1){transition-delay:0s}
.portfolio-item:nth-child(2){transition-delay:.15s}
.portfolio-item:nth-child(3){transition-delay:.3s}
.portfolio-item:nth-child(4){transition-delay:.45s}
.portfolio-item img{width:100%;height:100%;object-fit:cover;filter:grayscale(20%) brightness(.6);transition:all .8s cubic-bezier(.16,1,.3,1);transform:scale(1.05)}
.portfolio-item:hover img{filter:grayscale(0%) brightness(.85);transform:scale(1.02)}
.portfolio-overlay{position:absolute;bottom:0;left:0;width:100%;padding:40px;background:linear-gradient(to top,rgba(10,10,10,.95),transparent);transform:translateY(20px);opacity:0;transition:all .5s cubic-bezier(.16,1,.3,1)}
.portfolio-item:hover .portfolio-overlay{transform:translateY(0);opacity:1}
.portfolio-title{font-family:'Playfair Display',serif;font-size:22px;font-weight:500;color:#f5f5f5;margin-bottom:6px}
.portfolio-category{font-family:'Inter',sans-serif;font-size:11px;font-weight:300;letter-spacing:3px;text-transform:uppercase;color:#c9a96e}

.stats-row{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
.stat-box{text-align:center;opacity:0;transform:translateY(30px);transition:all 1s cubic-bezier(.16,1,.3,1)}
.stat-box.visible{opacity:1;transform:translateY(0)}
.stat-box:nth-child(1){transition-delay:0s}
.stat-box:nth-child(2){transition-delay:.1s}
.stat-box:nth-child(3){transition-delay:.2s}
.stat-box:nth-child(4){transition-delay:.3s}
.stat-num{font-family:'Playfair Display',serif;font-size:clamp(36px,5vw,56px);font-weight:500;line-height:1;color:#c9a96e;margin-bottom:12px}
.stat-num .counter{display:inline-block}
.stat-label-text{font-family:'Inter',sans-serif;font-size:12px;font-weight:300;letter-spacing:2px;text-transform:uppercase;color:rgba(245,245,245,.4)}

.cta-section{text-align:center;position:relative}
.cta-bg-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:600px;height:300px;background:radial-gradient(ellipse at center,rgba(201,169,110,.08) 0%,transparent 70%);filter:blur(60px);pointer-events:none}
.cta-content{position:relative;z-index:2;max-width:600px;margin:0 auto}
.cta-title{font-family:'Playfair Display',serif;font-size:clamp(32px,5vw,48px);font-weight:500;line-height:1.2;color:#f5f5f5;margin-bottom:24px;opacity:0;transform:translateY(30px);transition:all 1s ease}
.cta-title.visible{opacity:1;transform:translateY(0)}
.cta-desc{font-family:'Inter',sans-serif;font-size:15px;font-weight:300;line-height:1.8;color:rgba(245,245,245,.5);margin-bottom:40px;opacity:0;transform:translateY(20px);transition:all 1s ease .2s}
.cta-desc.visible{opacity:1;transform:translateY(0)}
.cta-btn{display:inline-block;font-family:'Inter',sans-serif;font-size:12px;font-weight:400;letter-spacing:2px;text-transform:uppercase;color:#0a0a0a;background:#c9a96e;padding:18px 44px;text-decoration:none;position:relative;overflow:hidden;opacity:0;transform:translateY(20px);transition:all .4s cubic-bezier(.16,1,.3,1),opacity 1s ease .4s,transform 1s ease .4s}
.cta-btn.visible{opacity:1;transform:translateY(0)}
.cta-btn:hover{background:#d4b87a;transform:translateY(-2px)}

.site-footer{position:relative;padding:80px 48px 40px;background:#070707}
.site-footer::before{content:'';position:absolute;top:0;left:0;width:100%;height:1px;background:linear-gradient(to right,transparent,rgba(245,245,245,.06),transparent)}
.footer-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:60px}
.footer-brand{font-family:'Playfair Display',serif;font-size:20px;font-weight:600;letter-spacing:1px;color:#f5f5f5;margin-bottom:16px}
.footer-brand span{color:#c9a96e}
.footer-tagline{font-family:'Inter',sans-serif;font-size:13px;font-weight:300;line-height:1.7;color:rgba(245,245,245,.35);max-width:280px}
.footer-column h4{font-family:'Inter',sans-serif;font-size:11px;font-weight:400;letter-spacing:3px;text-transform:uppercase;color:rgba(245,245,245,.5);margin-bottom:20px}
.footer-column ul{list-style:none}
.footer-column li{margin-bottom:10px}
.footer-column a{font-family:'Inter',sans-serif;font-size:13px;font-weight:300;color:rgba(245,245,245,.35);text-decoration:none;transition:color .3s ease}
.footer-column a:hover{color:#c9a96e}
.footer-bottom{max-width:1200px;margin:50px auto 0;padding-top:24px;border-top:1px solid rgba(245,245,245,.04);display:flex;justify-content:space-between;align-items:center}
.footer-copyright{font-family:'Inter',sans-serif;font-size:11px;font-weight:300;color:rgba(245,245,245,.25)}
.footer-social{display:flex;gap:20px}
.footer-social a{font-family:'Inter',sans-serif;font-size:11px;font-weight:300;letter-spacing:1px;text-transform:uppercase;color:rgba(245,245,245,.35);text-decoration:none;transition:color .3s ease}
.footer-social a:hover{color:#c9a96e}

@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}100%{opacity:1;transform:translateY(0)}}
@keyframes revealUp{0%{opacity:0;transform:translateY(40px)}100%{opacity:1;transform:translateY(0)}}
@keyframes scrollPulse{0%{top:-100%}100%{top:100%}}

@media(max-width:1024px){.services-grid,.portfolio-grid{grid-template-columns:repeat(2,1fr)}.stats-row{grid-template-columns:repeat(2,1fr);gap:30px}.footer-inner{grid-template-columns:1fr 1fr}}
@media(max-width:768px){.site-nav{padding:20px 24px}.nav-links,.nav-cta{display:none}.mobile-toggle{display:flex}.services-grid,.portfolio-grid{grid-template-columns:1fr}.stats-row{grid-template-columns:1fr 1fr}.footer-inner{grid-template-columns:1fr;gap:40px}.footer-bottom{flex-direction:column;gap:16px;text-align:center}.content-section{padding:80px 24px}.hero-text{padding:0 16px;top:58%}.web-system{--web-size:140px!important}.hero-headline{font-size:clamp(28px,10vw,48px)}}/* End custom CSS */