@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

/* ===== RESET & TOKENS ===== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#171719;--bg2:#1c1c20;--bg3:#222228;
  --gold:#c49355;--gold-dim:rgba(196,147,85,.12);
  --cream:#d5d0cb;--gray:#8a8580;--gray2:rgba(138,133,128,.35);
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Space Grotesk',-apple-system,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
html{scroll-behavior:smooth;overflow-x:hidden;scrollbar-width:none}
html::-webkit-scrollbar{display:none}
body{font-family:var(--sans);background:var(--bg);color:var(--cream);overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
::selection{background:var(--gold);color:var(--bg)}
::-moz-selection{background:var(--gold);color:var(--bg)}
a{text-decoration:none;color:inherit;transition:color .3s}
img{max-width:100%;display:block}
button{border:none;background:none;font-family:inherit;color:inherit}
::selection{background:var(--gold);color:var(--bg)}
::-moz-selection{background:var(--gold);color:var(--bg)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}




/* ===== SCROLL PROGRESS ===== */
.scroll-bar{position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,var(--gold),rgba(196,147,85,.3));z-index:200;width:0}

/* ===== NAV ===== */
.nav{position:fixed;top:0;left:0;width:100%;z-index:150;display:flex;align-items:center;justify-content:space-between;padding:1rem 3rem;transition:background .4s,box-shadow .4s}
.nav.scrolled{background:rgba(23,23,25,.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 1px 30px rgba(0,0,0,.4)}
.nav-logo{font-family:var(--serif);font-size:1.8rem;font-weight:600;color:var(--gold);letter-spacing:.1em}
.nav-links{display:flex;align-items:center;gap:2.5rem}
.nav-link{font-family:var(--sans);font-size:.8rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--cream);position:relative;opacity:.5;transition:opacity .3s,color .3s}
.nav-link:hover,.nav-link.active{opacity:1;color:var(--gold)}
.nav-link::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:1px;background:var(--gold);transition:width .3s var(--ease)}
.nav-link:hover::after{width:100%}
.nav-cta{font-size:.7rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--bg);background:var(--gold);padding:.6rem 1.5rem;transition:all .3s;opacity:1}
.nav-cta:hover{background:var(--cream);transform:translateY(-1px)}
.nav-cta.active{color:var(--bg);opacity:1}

/* Hamburger */
.hamburger{display:none;flex-direction:column;gap:5px;width:26px;height:20px;z-index:201;padding:0}
.hamburger span{display:block;width:100%;height:1.5px;background:var(--cream);transition:all .4s var(--ease);transform-origin:center}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(4.5px,4.5px);background:var(--gold)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(4.5px,-4.5px);background:var(--gold)}

/* Mobile menu */
.mob-menu{position:fixed;inset:0;z-index:149;background:rgba(23,23,25,.97);backdrop-filter:blur(40px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.5rem;opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
.mob-menu.open{opacity:1;pointer-events:all}
.mob-menu a{font-family:var(--serif);font-size:clamp(1.5rem,4vw,2.5rem);font-weight:300;color:var(--cream);letter-spacing:.05em;transform:translateY(30px);opacity:0;transition:all .4s var(--ease)}
.mob-menu.open a{transform:translateY(0);opacity:1}
.mob-menu a:nth-child(1){transition-delay:.05s}
.mob-menu a:nth-child(2){transition-delay:.1s}
.mob-menu a:nth-child(3){transition-delay:.15s}
.mob-menu a:nth-child(4){transition-delay:.2s}
.mob-menu a:hover{color:var(--gold)}

@media(max-width:768px){
  .nav{padding:.8rem 1.5rem}
  .nav-links{display:none}
  .hamburger{display:flex}
}

/* ===== HERO ===== */
.hero{position:relative;height:100vh;display:flex;align-items:center;overflow:hidden;background:var(--bg)}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg canvas{width:100%;height:100%}
.hero-portrait{position:absolute;right:8%;bottom:0;height:85%;z-index:1}
/* ===== NEN AURA EFFECT ===== */
.hero-portrait img{height:100%;position:relative;z-index:1;filter:brightness(.85) contrast(1.1) saturate(.9) drop-shadow(0 0 15px rgba(196,147,85,.5)) drop-shadow(0 0 40px rgba(196,147,85,.25)) drop-shadow(0 0 80px rgba(196,147,85,.15));animation:nenGlow 3s ease-in-out infinite}
@keyframes nenGlow{0%,100%{filter:brightness(.85) contrast(1.1) saturate(.9) drop-shadow(0 0 12px rgba(196,147,85,.45)) drop-shadow(0 0 35px rgba(196,147,85,.2)) drop-shadow(0 0 70px rgba(196,147,85,.1))}50%{filter:brightness(.9) contrast(1.1) saturate(1) drop-shadow(0 0 20px rgba(196,147,85,.6)) drop-shadow(0 0 50px rgba(196,147,85,.35)) drop-shadow(0 0 100px rgba(196,147,85,.2))}}
/* Nen flow particles — on top */
.hero-portrait .nen-flow{position:absolute;inset:0;z-index:2;overflow:visible;pointer-events:none}
.hero-portrait .nen-flow span{position:absolute;width:2px;height:2px;background:var(--gold);border-radius:50%;opacity:0;box-shadow:0 0 6px 2px rgba(196,147,85,.4);animation:nenRise 4s ease-out infinite}
.hero-portrait .nen-flow span:nth-child(1){left:30%;bottom:10%;animation-delay:0s}
.hero-portrait .nen-flow span:nth-child(2){left:40%;bottom:5%;animation-delay:.5s;width:3px;height:3px}
.hero-portrait .nen-flow span:nth-child(3){left:50%;bottom:15%;animation-delay:1s}
.hero-portrait .nen-flow span:nth-child(4){left:60%;bottom:8%;animation-delay:1.5s;width:3px;height:3px}
.hero-portrait .nen-flow span:nth-child(5){left:70%;bottom:12%;animation-delay:2s}
.hero-portrait .nen-flow span:nth-child(6){left:45%;bottom:20%;animation-delay:2.5s;width:2px;height:2px}
.hero-portrait .nen-flow span:nth-child(7){left:55%;bottom:3%;animation-delay:3s}
.hero-portrait .nen-flow span:nth-child(8){left:35%;bottom:18%;animation-delay:3.5s;width:3px;height:3px}
@keyframes nenRise{0%{transform:translateY(0) scale(1);opacity:0}10%{opacity:.9}40%{opacity:.5}100%{transform:translateY(-350px) scale(0) translateX(8px);opacity:0}}
.hero-gradient{position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,var(--bg) 0%,rgba(23,23,25,.55) 50%,rgba(23,23,25,.2) 100%)}
.hero-gradient2{position:absolute;inset:0;z-index:2;background:linear-gradient(0deg,var(--bg) 0%,transparent 25%)}
.hero-content{position:relative;z-index:3;padding:0 3rem;max-width:700px}
.hero-label{font-family:var(--sans);font-size:.65rem;font-weight:500;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);margin-bottom:1.5rem;display:flex;align-items:center;gap:1rem}
.hero-label::before{content:'';width:30px;height:1px;background:var(--gold)}
.hero-title{font-family:var(--serif);font-size:clamp(3rem,7vw,6rem);font-weight:300;line-height:1.05;letter-spacing:-.01em;margin-bottom:1.5rem}
.hero-title em{font-style:italic;color:var(--gold)}
.hero-desc{font-size:.95rem;font-weight:300;color:var(--gray);line-height:1.9;max-width:480px;margin-bottom:2.5rem}
.hero-btns{display:flex;gap:1.5rem;flex-wrap:wrap}
.btn-primary{display:inline-block;font-size:.7rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--bg);background:var(--gold);padding:.9rem 2.2rem;transition:all .4s;position:relative;overflow:hidden;border-radius:2px}
.btn-primary:hover{background:#d4a365;transform:translateY(-2px);box-shadow:0 10px 30px rgba(196,147,85,.25)}
.btn-outline{display:inline-block;font-size:.7rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(196,147,85,.3);padding:.85rem 2.2rem;transition:all .4s;border-radius:2px}
.btn-outline:hover{border-color:var(--gold);background:rgba(196,147,85,.08);transform:translateY(-2px)}
.hero-scroll{position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:.5rem}
.hero-scroll span{font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gray2)}
.hero-scroll-line{width:1px;height:35px;background:linear-gradient(180deg,var(--gold),transparent);animation:scrollPulse 2s ease-in-out infinite}
@keyframes scrollPulse{0%,100%{opacity:.4;transform:scaleY(1)}50%{opacity:1;transform:scaleY(1.2)}}

@media(max-width:768px){
  .hero-content{padding:0 1.5rem}
  .hero-portrait{right:-5%;height:65%;opacity:.5}
  .hero-title{font-size:clamp(2.5rem,10vw,4rem)}
}

/* ===== SECTION SYSTEM ===== */
.section{padding:8rem 3rem;position:relative}
.section--dark{background:var(--bg);overflow:visible}
.section--alt{background:var(--bg2)}
.section--accent{background:linear-gradient(135deg,var(--bg2),#1a1a1e);position:relative}
.section--accent::before{content:'';position:absolute;top:50%;left:50%;width:400px;height:400px;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(196,147,85,.04) 0%,transparent 70%);pointer-events:none}
.section-header{text-align:center;margin-bottom:4rem}
.section-label{font-size:.65rem;font-weight:500;letter-spacing:.35em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem}
.section-title{font-family:var(--serif);font-size:clamp(2rem,4vw,3.5rem);font-weight:300;color:var(--cream);letter-spacing:.01em}
.section-line{width:40px;height:1px;background:var(--gold);margin:1.5rem auto 0;opacity:.4}

@media(max-width:768px){.section{padding:5rem 1.5rem}}

/* ===== REVEAL ANIMATIONS ===== */
.rv{opacity:0;transform:translateY(50px);transition:all .8s var(--ease)}
.rv-l{opacity:0;transform:translateX(-60px);transition:all .8s var(--ease)}
.rv-r{opacity:0;transform:translateX(60px);transition:all .8s var(--ease)}
.rv-s{opacity:0;transform:scale(.9);transition:all 1s var(--ease)}
.rv.vis,.rv-l.vis,.rv-r.vis,.rv-s.vis{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}

/* ===== SERVICES GRID ===== */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;max-width:1100px;margin:0 auto}
.service-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);padding:2.5rem;transition:all .4s;position:relative;overflow:hidden;border-radius:8px}
.service-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);transform:scaleX(0);transition:transform .5s var(--ease)}
.service-card:hover::before{transform:scaleX(1)}
.service-card:hover{border-color:rgba(196,147,85,.2);transform:translateY(-4px);box-shadow:0 15px 40px rgba(0,0,0,.3)}
.service-icon{font-size:1.8rem;margin-bottom:1.5rem}
.service-name{font-family:var(--serif);font-size:1.3rem;font-weight:400;margin-bottom:.8rem;letter-spacing:.02em}
.service-desc{font-size:.8rem;color:var(--gray);line-height:1.8}

@media(max-width:768px){.services{grid-template-columns:1fr;gap:1.2rem}}

/* ===== FEATURED PROJECTS ===== */
.projects-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;max-width:1100px;margin:0 auto}
.project-card{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--bg2);border:1px solid rgba(255,255,255,.04);transition:all .5s var(--ease);border-radius:8px}
.project-card:hover{border-color:rgba(196,147,85,.2);transform:translateY(-6px);box-shadow:0 20px 50px rgba(0,0,0,.4)}
.project-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;transition:all .6s var(--ease);filter:grayscale(.3)}
.project-card:hover .project-img{opacity:.7;transform:scale(1.05);filter:grayscale(0)}
.project-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(23,23,25,.9) 100%);z-index:1}
.project-info{position:absolute;bottom:0;left:0;right:0;padding:2rem;z-index:2}
.project-num{font-size:.6rem;font-weight:600;letter-spacing:.15em;color:var(--gold);opacity:.5;margin-bottom:.5rem}
.project-name{font-family:var(--serif);font-size:clamp(1.3rem,2.5vw,1.8rem);font-weight:400;margin-bottom:.4rem;letter-spacing:.02em}
.project-type{font-size:.7rem;color:var(--gray);letter-spacing:.1em;text-transform:uppercase}
.project-arrow{position:absolute;top:1.5rem;right:1.5rem;z-index:2;font-size:1.2rem;color:var(--gold);opacity:0;transform:translate(-10px,-10px);transition:all .4s var(--ease)}
.project-card:hover .project-arrow{opacity:1;transform:translate(0,0)}

@media(max-width:768px){.projects-grid{grid-template-columns:1fr;gap:1.2rem}}

/* ===== FLOATING 3D SCREENS ===== */
.float-screens{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;max-width:1100px;margin:0 auto;padding:0 2rem;perspective:1200px}

.float-screen{text-decoration:none;color:var(--cream);display:block;animation:screenFloat 6s ease-in-out infinite;cursor:pointer;will-change:transform}
.float-screen:nth-child(2){animation-delay:-2s}
.float-screen:nth-child(3){animation-delay:-4s}

@keyframes screenFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-12px)}
}

.screen-frame{position:relative;border-radius:10px;overflow:hidden;background:#0d0d0f;border:1px solid rgba(196,147,85,.12);box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 30px rgba(196,147,85,.03);transition:all .5s var(--ease);transform-style:preserve-3d}

.float-screen:hover .screen-frame{
  border-color:rgba(196,147,85,.3);
  box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 50px rgba(196,147,85,.08);
  transform:rotateY(-8deg) rotateX(4deg) scale(1.03);
}
.float-screen:nth-child(2):hover .screen-frame{transform:rotateY(0deg) rotateX(-5deg) scale(1.05)}
.float-screen:nth-child(3):hover .screen-frame{transform:rotateY(8deg) rotateX(4deg) scale(1.03)}

/* Bezel */
.screen-bezel{padding:8px 12px;background:linear-gradient(180deg,#1a1a1e,#141416);display:flex;align-items:center}
.screen-dots{display:flex;gap:5px}
.screen-dots span{width:7px;height:7px;border-radius:50%;background:#2a2a30}
.screen-dots span:nth-child(1){background:#ff5f57}
.screen-dots span:nth-child(2){background:#febc2e}
.screen-dots span:nth-child(3){background:#28c840}

/* Display */
.screen-display{position:relative;overflow:hidden;aspect-ratio:16/10}
.screen-img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .6s var(--ease)}
.float-screen:hover .screen-img{transform:scale(1.05)}

/* Hover overlay — "View Project" */
.screen-display::after{content:'View Project →';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);color:#fff;font-family:var(--sans);font-size:.85rem;letter-spacing:.15em;text-transform:uppercase;opacity:0;transition:opacity .35s ease;pointer-events:none;backdrop-filter:blur(2px)}
.float-screen:hover .screen-display::after{opacity:1}

/* Glow underneath */
.screen-glow{position:absolute;bottom:-20px;left:10%;right:10%;height:40px;background:radial-gradient(ellipse,rgba(196,147,85,.15),transparent);filter:blur(15px);opacity:0;transition:opacity .5s}
.float-screen:hover .screen-glow{opacity:1}

/* Info */
.screen-info{padding:1.2rem .5rem .5rem;text-align:center}
.screen-num{font-family:var(--serif);font-size:.75rem;color:var(--gold);opacity:.4;letter-spacing:.15em}
.screen-name{font-family:var(--serif);font-size:clamp(1rem,1.8vw,1.3rem);font-weight:400;margin:.4rem 0 .3rem;letter-spacing:.02em;transition:color .3s}
.float-screen:hover .screen-name{color:var(--gold)}
.screen-type{font-size:.65rem;color:var(--gray);letter-spacing:.1em;text-transform:uppercase}

@media(max-width:900px){.float-screens{grid-template-columns:repeat(2,1fr);gap:1.5rem;max-width:500px}}
@media(max-width:500px){.float-screens{grid-template-columns:1fr;max-width:350px}}

/* ===== PROCESS / HOW I WORK ===== */
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;max-width:1000px;margin:0 auto;padding:0 2rem}
.process-step{text-align:center;padding:2rem 1.5rem;position:relative;border:1px solid rgba(196,147,85,.08);border-radius:8px;background:rgba(28,28,32,.5);transition:all .4s var(--ease)}
.process-step:hover{border-color:rgba(196,147,85,.2);transform:translateY(-4px)}
.process-num{font-family:var(--serif);font-size:2.5rem;font-weight:300;color:var(--gold);opacity:.2;line-height:1;margin-bottom:.8rem}
.process-icon{color:var(--gold);margin-bottom:1rem}
.process-name{font-family:var(--serif);font-size:1.1rem;font-weight:400;margin-bottom:.6rem;letter-spacing:.03em}
.process-desc{font-size:.72rem;color:var(--gray);line-height:1.7}
@media(max-width:768px){.process-grid{grid-template-columns:1fr 1fr;gap:1rem}.process-step{padding:1.5rem 1rem}}
@media(max-width:480px){.process-grid{grid-template-columns:1fr}}

/* ===== TRUSTED BY ===== */
.brands-label{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gray);text-align:center;margin-bottom:1.5rem}
.brands-strip{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:2rem}
.brand-name{font-family:var(--serif);font-size:clamp(.9rem,1.5vw,1.2rem);color:var(--gray);opacity:.4;font-weight:400;letter-spacing:.05em;transition:opacity .3s}
.brand-name:hover{opacity:.8}
.brand-dot{width:4px;height:4px;border-radius:50%;background:var(--gold);opacity:.3}
@media(max-width:768px){.brands-strip{gap:1.2rem}.brand-dot{display:none}}

/* ===== MARQUEE ===== */
.marquee-wrap{overflow:hidden;padding:2rem 0;border-top:1px solid rgba(255,255,255,.03);border-bottom:1px solid rgba(255,255,255,.03);background:var(--bg)}
.marquee-track{display:flex;gap:3rem;animation:marqueeScroll 25s linear infinite;width:max-content}
.marquee-item{font-family:var(--serif);font-size:clamp(1rem,2vw,1.5rem);font-weight:300;color:var(--gray);white-space:nowrap;display:flex;align-items:center;gap:1.5rem;letter-spacing:.05em}
@keyframes marqueeScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ===== STATS ===== */
.stats{display:flex;justify-content:center;gap:5rem;flex-wrap:wrap;padding:4rem 0}
.stat{text-align:center}
.stat-num{font-family:var(--serif);font-size:clamp(2.5rem,5vw,4rem);font-weight:300;color:var(--gold);line-height:1}
.stat-text{font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gray);margin-top:.5rem}

@media(max-width:768px){.stats{gap:2.5rem}}

/* ===== CTA ===== */
.cta{text-align:center;max-width:600px;margin:0 auto}
.cta-title{font-family:var(--serif);font-size:clamp(2rem,4vw,3.5rem);font-weight:300;margin-bottom:1rem}
.cta-title em{font-style:italic;color:var(--gold)}
.cta-desc{font-size:.85rem;color:var(--gray);line-height:1.8;margin-bottom:2.5rem}

/* ===== SOCIAL MEDIA SECTION ===== */
.sm-intro{text-align:center;max-width:650px;margin:0 auto 3rem;font-size:.9rem;color:var(--gray);line-height:1.8}
.sm-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1.5rem;max-width:1200px;margin:0 auto;padding:0 2rem;align-items:stretch}
@media(max-width:1024px){.sm-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.sm-grid{grid-template-columns:repeat(2,1fr)}}
.sm-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:2rem 1.5rem;transition:all .4s ease;position:relative;overflow:hidden;display:flex;flex-direction:column}
.sm-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold),transparent);opacity:0;transition:opacity .4s}
.sm-card:hover{border-color:rgba(196,147,85,.15);transform:translateY(-4px);background:rgba(255,255,255,.05)}
.sm-card:hover::before{opacity:1}
.sm-icon{width:48px;height:48px;border-radius:10px;background:rgba(196,147,85,.08);display:flex;align-items:center;justify-content:center;color:var(--gold);margin-bottom:1.2rem}
.sm-brand{font-family:var(--serif);font-size:1.1rem;font-weight:400;margin-bottom:.3rem;color:var(--cream)}
.sm-role{font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:1.2rem}
.sm-services{list-style:none;padding:0;margin:0;flex-grow:1}
.sm-services li{font-size:.78rem;color:var(--gray);padding:.35rem 0;border-bottom:1px solid rgba(255,255,255,.03);position:relative;padding-left:1rem}
.sm-services li::before{content:'✦';position:absolute;left:0;color:var(--gold);font-size:.5rem;top:.5rem}
.sm-services li:last-child{border-bottom:none}
@media(max-width:900px){.sm-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.sm-grid{grid-template-columns:1fr}}

/* ===== FOOTER ===== */
.footer{padding:4rem 3rem 2rem;border-top:1px solid rgba(255,255,255,.04);text-align:center}
.footer-logo{font-family:var(--serif);font-size:clamp(3rem,8vw,5rem);font-weight:600;background:linear-gradient(180deg,rgba(196,147,85,.2),rgba(196,147,85,.05));-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:.15em;margin-bottom:1rem}
.footer-email{font-size:1.1rem;letter-spacing:.12em;color:var(--gold);opacity:.6;transition:opacity .3s;display:inline-block;margin-bottom:1.5rem}
.footer-email:hover{opacity:1}
.footer-socials{display:flex;justify-content:center;gap:2rem;margin-bottom:1.5rem}
.footer-social{font-size:1.3rem;color:var(--gray);transition:all .3s;opacity:.5}
.footer-social:hover{color:var(--gold);opacity:1;transform:translateY(-3px)}
.footer-copy{font-size:.55rem;color:var(--gray2);letter-spacing:.15em}

@media(max-width:768px){.footer{padding:3rem 1.5rem 2rem}}

/* ===== ABOUT PAGE ===== */
.about-hero{padding:10rem 3rem 6rem;max-width:900px;margin:0 auto}
.about-quote{font-family:var(--serif);font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:300;line-height:1.6;letter-spacing:.01em}
.about-quote em{font-style:italic;color:var(--gold)}
.about-body{max-width:800px;margin:0 auto}
.about-text{font-size:.95rem;color:var(--gray);line-height:2;margin-bottom:1.5rem}
.about-text strong{color:var(--cream);font-weight:500}
.about-link{color:var(--gold);position:relative}
.about-link::after{content:'';position:absolute;bottom:-1px;left:0;width:0;height:1px;background:var(--gold);transition:width .3s}
.about-link:hover::after{width:100%}

/* Skills */
.skills{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2rem}
.skill{font-size:.65rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--cream);border:1px solid rgba(255,255,255,.08);padding:.5rem 1rem;transition:all .3s;border-radius:4px;background:rgba(255,255,255,.03)}
.skill:hover{border-color:var(--gold);color:var(--gold)}

/* Experience */
.exp-list{max-width:700px;margin:0 auto}
.exp-item{padding:1.5rem 0 1.5rem 2rem;border-left:1px solid rgba(255,255,255,.06);position:relative;transition:all .3s}
.exp-item::before{content:'';position:absolute;left:-3px;top:1.8rem;width:5px;height:5px;border-radius:50%;background:var(--gold);opacity:.4;transition:opacity .3s}
.exp-item:hover{border-left-color:rgba(196,147,85,.3)}
.exp-item:hover::before{opacity:1}
.exp-role{font-family:var(--serif);font-size:1.1rem;margin-bottom:.3rem}
.exp-company{font-size:.75rem;color:var(--gold);letter-spacing:.1em;margin-bottom:.3rem}
.exp-desc{font-size:.8rem;color:var(--gray);line-height:1.7}

/* ===== CONTACT PAGE ===== */
.contact-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:8rem 2rem}
.contact-inner{max-width:550px;width:100%;text-align:center}
.contact-label{font-size:.65rem;font-weight:500;letter-spacing:.35em;text-transform:uppercase;color:var(--gold);margin-bottom:1.5rem;display:inline-block}
.contact-title{font-family:var(--serif);font-size:clamp(2rem,5vw,3rem);font-weight:300;margin-bottom:1rem}
.contact-sub{font-family:var(--serif);font-size:1rem;font-style:italic;color:var(--gray);margin-bottom:3rem;line-height:1.7}
.contact-sub span{color:var(--gold)}
.form{display:flex;flex-direction:column;gap:1.2rem;text-align:left}
.form-group{display:flex;flex-direction:column;gap:.4rem}
.form-label{font-size:.6rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.form-input,.form-textarea{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);padding:.9rem 1rem;font-family:var(--sans);font-size:.85rem;color:var(--cream);transition:border-color .3s,box-shadow .3s;outline:none;border-radius:4px}
.form-input:focus,.form-textarea:focus{border-color:rgba(196,147,85,.3);box-shadow:0 0 20px rgba(196,147,85,.06)}
.form-input::placeholder,.form-textarea::placeholder{color:var(--gray2);font-style:italic}
.form-textarea{min-height:130px;resize:vertical}
.form-btn{align-self:center;margin-top:.5rem;padding:.9rem 2.5rem;background:var(--gold);border:none;color:var(--bg);font-family:var(--sans);font-size:.7rem;font-weight:500;letter-spacing:.25em;text-transform:uppercase;transition:all .4s;border-radius:4px}
.form-btn:hover{background:#d4a365;transform:translateY(-2px);box-shadow:0 8px 20px rgba(196,147,85,.2)}
.form-ok{display:none;text-align:center;padding:2rem}
.form-ok.show{display:block}
.form-ok-icon{font-size:2.5rem;margin-bottom:1rem}
.form-ok-text{font-family:var(--serif);font-size:1.2rem;font-style:italic}
.socials{display:flex;justify-content:center;gap:2.5rem;margin-top:3rem;padding-top:2rem;border-top:1px solid rgba(255,255,255,.04)}
.social{font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gray);transition:color .3s}
.social:hover{color:var(--gold)}

/* ===== 3D CAROUSEL ===== */
.carousel-wrap{max-width:100%;margin:0 auto;padding:0 0 2rem}
.carousel-viewport{overflow:hidden;padding:2rem 0}
.carousel-track{display:flex;cursor:grab;user-select:none}
.carousel-track:active{cursor:grabbing}
.carousel-card{flex:0 0 80%;max-width:500px;margin:0 1.5%;perspective:1000px;transition:transform .25s,opacity .25s}
.carousel-card.active{transform:scale(1);opacity:1}
.carousel-card:not(.active){transform:scale(.85);opacity:.4}
.carousel-card-inner{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/3;background:#0a0a0c;border:1px solid rgba(255,255,255,.06);transition:transform .25s,box-shadow .25s;transform-style:preserve-3d}
.carousel-card.active .carousel-card-inner{box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 40px rgba(196,147,85,.06)}
.carousel-card:not(.active) .carousel-card-inner{transform:rotateY(15deg)}
.carousel-card:nth-child(even):not(.active) .carousel-card-inner{transform:rotateY(-15deg)}
.carousel-img{width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0}
.carousel-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.8) 0%,transparent 50%)}
.carousel-info{position:absolute;bottom:0;left:0;right:0;padding:2rem;z-index:1}
.carousel-num{font-size:.55rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:.5rem}
.carousel-name{font-family:var(--serif);font-size:clamp(1.2rem,2.5vw,1.6rem);font-weight:300;color:var(--cream);margin-bottom:.3rem}
.carousel-type{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gray)}
.carousel-nav{display:flex;align-items:center;justify-content:center;gap:1.5rem;margin-top:1.5rem}
.carousel-btn{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:var(--cream);font-size:1rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s}
.carousel-btn:hover{background:rgba(196,147,85,.15);border-color:var(--gold);color:var(--gold)}
.carousel-dots{display:flex;gap:.6rem}
.carousel-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.15);border:none;cursor:pointer;transition:all .3s;padding:0}
.carousel-dot.active{background:var(--gold);transform:scale(1.3)}
.carousel-hint{text-align:center;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gray2);margin-top:1rem;opacity:.5}
@media(max-width:600px){.carousel-card{flex:0 0 85%;margin:0 2%}}

/* ===== CASE STUDY ===== */
.cs-hero{position:relative;height:100vh;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.cs-hero-img{position:absolute;inset:0}
.cs-hero-img img{width:100%;height:100%;object-fit:cover;filter:brightness(.35) contrast(1.1)}
.cs-hero-fade{position:absolute;inset:0;background:linear-gradient(transparent 40%,var(--bg) 100%)}
.cs-hero-info{position:relative;z-index:1;text-align:center;padding:0 2rem 5rem;max-width:800px}

/* Clean hero variant — gradient bg + floating mockup */
.cs-hero--clean{height:100vh;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(180deg,#0e0e12 0%,#151518 40%,var(--bg) 100%)}
.cs-hero--clean .cs-hero-info{padding:0 2rem 3rem}
.cs-hero-mockup{position:relative;z-index:1;max-width:700px;width:90%;margin:0 auto}
.cs-hero-mockup .screen-frame{box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 40px rgba(196,147,85,.05);border:1px solid rgba(196,147,85,.1);border-radius:10px}
.cs-hero-mockup .screen-display{aspect-ratio:16/10}
.cs-number{font-family:var(--serif);font-size:clamp(4rem,10vw,8rem);font-weight:300;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.06);line-height:1;margin-bottom:1rem}
.cs-name{font-family:var(--serif);font-size:clamp(2.2rem,5vw,4rem);font-weight:300;margin-bottom:.8rem;letter-spacing:.02em}
.cs-tag{font-size:.7rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}

.cs-details{padding:4rem 3rem;background:var(--bg);border-top:1px solid rgba(255,255,255,.03);border-bottom:1px solid rgba(255,255,255,.03)}
.cs-details-grid{max-width:900px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;text-align:center}
.cs-detail-label{font-size:.7rem;font-weight:500;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);margin-bottom:.6rem}
.cs-detail-value{font-family:var(--serif);font-size:1.05rem;color:var(--cream)}
.cs-live{color:#4ade80}

.cs-block{padding:6rem 3rem;background:var(--bg)}
.cs-block--alt{background:var(--bg2)}
.cs-block-inner{max-width:650px;margin:0 auto}
.cs-block-label{font-size:.6rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:1.5rem;display:flex;align-items:center;gap:1rem}
.cs-block-label::before{content:'';width:20px;height:1px;background:var(--gold)}
.cs-block-heading{font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.2rem);font-weight:300;margin-bottom:1.5rem;line-height:1.3}
.cs-block-text{font-size:.95rem;color:var(--gray);line-height:2}

.cs-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:3rem;padding-top:2rem;border-top:1px solid rgba(255,255,255,.04)}
.cs-metric{text-align:center}
.cs-metric-num{font-family:var(--serif);font-size:2rem;font-weight:300;color:var(--gold);margin-bottom:.3rem}
.cs-metric-text{font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gray2)}

.cs-video-showcase{max-width:750px;margin:2.5rem auto 0;padding:0 2rem}
.cs-video-showcase .screen-frame{box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 40px rgba(196,147,85,.05);border:1px solid rgba(196,147,85,.1);border-radius:10px}

.cs-dual-videos{display:grid;grid-template-columns:1fr 1fr;gap:2rem;max-width:1000px;width:90%;margin:0 auto;padding-bottom:2rem}
.cs-dual-video .screen-frame{box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 30px rgba(196,147,85,.04);border:1px solid rgba(196,147,85,.1);border-radius:10px}
.cs-video-label{font-size:.6rem;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);text-align:center;margin-bottom:.8rem;opacity:.7}
@media(max-width:700px){.cs-dual-videos{grid-template-columns:1fr}}

.cs-next{padding:5rem 3rem;text-align:center;border-top:1px solid rgba(255,255,255,.03)}
.cs-next-label{font-size:.55rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gray2);margin-bottom:1.5rem}
.cs-next-link{display:inline-flex;flex-direction:column;align-items:center;gap:.8rem;transition:transform .4s}
.cs-next-link:hover{transform:translateY(-4px)}
.cs-next-title{font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.2rem);font-weight:300;transition:color .3s}
.cs-next-link:hover .cs-next-title{color:var(--gold)}
.cs-next-arrow{font-size:1.2rem;color:var(--gold)}

@media(max-width:768px){
  .cs-details-grid{grid-template-columns:1fr 1fr}
  .cs-block{padding:4rem 1.5rem}
  .cs-metrics{grid-template-columns:1fr}
  .cs-hero-info{padding:0 1.5rem 3rem}
}

/* ===== PAGE TRANSITION — Cinematic Curtain ===== */
.pg-trans{position:fixed;inset:0;z-index:9998;pointer-events:none}
.pg-trans .pt-layer{position:absolute;inset:0;transform:translateY(100%);transition:transform .4s cubic-bezier(.77,0,.18,1)}
.pg-trans .pt-1{background:#222228;z-index:1}
.pg-trans .pt-2{background:var(--bg);z-index:2;transition-delay:.08s}
.pg-trans .pt-gold{position:absolute;top:50%;left:0;width:100%;height:2px;z-index:3;background:linear-gradient(90deg,transparent 0%,var(--gold) 30%,var(--gold) 70%,transparent 100%);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.4,0,.2,1) .1s;opacity:.8}
.pg-trans .pt-logo{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.8);z-index:4;font-family:var(--serif);font-size:2rem;font-weight:600;color:var(--gold);opacity:0;transition:opacity .2s .15s,transform .3s .15s;letter-spacing:.15em}
.pg-trans.go .pt-layer{transform:translateY(0)}
.pg-trans.go .pt-gold{transform:scaleX(1)}
.pg-trans.go .pt-logo{opacity:.6;transform:translate(-50%,-50%) scale(1)}

/* ===== REDUCED MOTION ===== */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .rv,.rv-l,.rv-r,.rv-s{opacity:1!important;transform:none!important}
}


/* ===== PRELOADER (Countdown) ===== */
.preloader{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;align-items:center;justify-content:center;flex-direction:column;transition:opacity .8s cubic-bezier(.16,1,.3,1),visibility .8s}
.preloader.done{opacity:0;visibility:hidden;pointer-events:none}
.preloader-counter{font-family:var(--serif);font-size:clamp(3rem,8vw,5rem);font-weight:300;color:var(--gold);letter-spacing:-.02em;line-height:1;tabular-nums:true;font-variant-numeric:tabular-nums}
.preloader-bar{width:clamp(200px,30vw,320px);height:1px;background:rgba(255,255,255,.08);margin-top:2rem;overflow:hidden;border-radius:1px}
.preloader-bar-fill{width:0%;height:100%;background:linear-gradient(90deg,var(--gold),rgba(196,147,85,.6));transition:width .05s linear;border-radius:1px}
.preloader-tagline{font-family:var(--sans);font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.3);margin-top:1.8rem;opacity:0;animation:taglineFade .8s ease forwards .3s}
@keyframes taglineFade{to{opacity:1}}

/* ===== ENHANCED GLASSMORPHISM NAV ===== */
.nav.scrolled{background:rgba(23,23,25,.7);backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);box-shadow:0 1px 30px rgba(0,0,0,.4);border-bottom:1px solid rgba(196,147,85,.06)}

/* ===== MAGNETIC BUTTONS ===== */
.btn-magnetic{transition:transform .3s var(--ease)}

/* ===== GSAP TEXT SPLIT ===== */
.word-reveal{display:inline-block;overflow:hidden}
.word-reveal .word{display:inline-block;transform:translateY(100%);opacity:0}

/* ===== ANIMATED SECTION DIVIDER ===== */
.section-line{position:relative;overflow:hidden}
.section-line::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(196,147,85,.5),transparent);animation:shimmer 3s ease-in-out infinite}
@keyframes shimmer{0%{left:-100%}50%{left:100%}100%{left:100%}}

/* ===== SMOOTH PARALLAX ===== */
.hero-content{will-change:transform,opacity}
.float-screen{will-change:transform}

/* ===== FEATURED PROJECTS — Split Screen ===== */
.fp-showcase{display:grid;grid-template-columns:1.2fr 1fr;gap:0;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02);min-height:340px;max-width:960px;margin:1rem auto 0;animation:fpGlow 4s ease-in-out infinite;position:relative}
@keyframes fpGlow{0%,100%{box-shadow:0 20px 60px rgba(0,0,0,.4),0 0 0 rgba(196,147,85,0)}50%{box-shadow:0 25px 70px rgba(0,0,0,.5),0 0 30px rgba(196,147,85,.06)}}
.fp-media{position:relative;overflow:hidden}
.fp-video-wrap{position:relative;width:100%;height:100%;min-height:340px}
.fp-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease,transform 8s ease}
.fp-video.active{opacity:1;transform:scale(1.05)}
.fp-media:hover .fp-video.active{transform:scale(1.1)}
/* Gold divider line */
.fp-showcase::after{content:'';position:absolute;top:10%;bottom:10%;width:1px;background:linear-gradient(180deg,transparent,rgba(196,147,85,.3),var(--gold),rgba(196,147,85,.3),transparent);z-index:2;left:calc(1.2fr);pointer-events:none;opacity:.5;animation:fpDividerPulse 3s ease-in-out infinite}
.fp-info::before{content:'';position:absolute;left:0;top:10%;bottom:10%;width:1px;background:linear-gradient(180deg,transparent,rgba(196,147,85,.3),var(--gold),rgba(196,147,85,.3),transparent);opacity:.4;animation:fpDividerPulse 3s ease-in-out infinite}
@keyframes fpDividerPulse{0%,100%{opacity:.3}50%{opacity:.6}}
.fp-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:rgba(255,255,255,.08)}
.fp-progress-fill{height:100%;width:0;background:var(--gold);transition:width .1s linear;box-shadow:0 0 8px rgba(196,147,85,.4)}
.fp-info{padding:2.5rem 2.5rem 2rem;display:flex;flex-direction:column;justify-content:center;position:relative}
/* Staggered text animation */
.fp-slide{display:none}
.fp-slide.active{display:block}
.fp-slide.active .fp-num{animation:fpStagger .5s ease both;animation-delay:0s}
.fp-slide.active .fp-name{animation:fpStagger .5s ease both;animation-delay:.08s}
.fp-slide.active .fp-type{animation:fpStagger .5s ease both;animation-delay:.14s}
.fp-slide.active .fp-desc{animation:fpStagger .5s ease both;animation-delay:.2s}
.fp-slide.active .fp-tags{animation:fpStagger .5s ease both;animation-delay:.26s}
.fp-slide.active .fp-cta{animation:fpStagger .5s ease both;animation-delay:.32s}
@keyframes fpStagger{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.fp-num{font-size:.7rem;letter-spacing:.3em;color:var(--gold);display:block;margin-bottom:.6rem;font-weight:600}
.fp-total{color:var(--gray);font-weight:300}
.fp-name{font-family:var(--serif);font-size:clamp(1.4rem,3vw,2.2rem);font-weight:300;color:var(--cream);line-height:1.2;margin-bottom:.5rem}
.fp-type{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gray);margin-bottom:1rem}
.fp-desc{font-size:.82rem;line-height:1.7;color:rgba(255,255,255,.5);margin-bottom:1.2rem;font-weight:300}
.fp-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:1.4rem}
.fp-tags span{font-size:.55rem;letter-spacing:.1em;padding:.25rem .6rem;border-radius:20px;border:1px solid rgba(196,147,85,.2);color:var(--gold);background:rgba(196,147,85,.05);text-transform:uppercase;transition:all .3s}
.fp-tags span:hover{background:rgba(196,147,85,.12);border-color:var(--gold)}
.fp-cta{display:inline-flex;align-items:center;gap:8px;font-size:.65rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);padding:.55rem 1.2rem;border:1px solid rgba(196,147,85,.4);border-radius:24px;background:rgba(196,147,85,.08);text-decoration:none;transition:all .3s ease}
.fp-cta:hover{background:rgba(196,147,85,.18);border-color:var(--gold);box-shadow:0 0 15px rgba(196,147,85,.15)}
.fp-cta .arrow{display:inline-block;transition:transform .3s}
.fp-cta:hover .arrow{transform:translateX(4px)}
.fp-dots{display:flex;gap:8px;margin-top:1.8rem}
.fp-dot{width:10px;height:10px;border-radius:50%;border:1px solid rgba(196,147,85,.3);background:transparent;cursor:pointer;transition:all .3s;padding:0}
.fp-dot.active{background:var(--gold);border-color:var(--gold);transform:scale(1.2);box-shadow:0 0 8px rgba(196,147,85,.3)}
.fp-dot:hover{border-color:var(--gold)}
@media(max-width:768px){.fp-showcase{grid-template-columns:1fr}.fp-showcase::after{display:none}.fp-info::before{display:none}.fp-video-wrap{min-height:240px}.fp-info{padding:1.8rem}}


/* ===== PRINT ===== */
@media print{
  .nav,.cur,.dot,.scroll-bar,.pg-trans,.hero-scroll,.mob-menu,.hamburger,.preloader{display:none!important}
  body{background:#fff;color:#000;cursor:auto}
}