/*
Theme Name: ZAVI Construcciones
Theme URI: https://zaviconstrucciones.com
Author: ZAVI Studio
Author URI: https://zaviconstrucciones.com
Description: Tema WordPress premium para ZAVI Construcciones — réplica exacta 1:1 del diseño React/Next Gen.
Version: 3.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: Proprietary
Text Domain: zavi
*/

/* === 0. RESET & VARIABLES === */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Manrope:wght@300;400;500;600;700;800;900&family=Oswald:wght@400;500;600;700&display=swap');
:root{--zavi-dark:#0F172A;--zavi-primary:#C5A059;--zavi-surface:#1E293B;--zavi-surfaceLight:#334155;--font-sans:'Manrope',ui-sans-serif,system-ui,sans-serif;--font-display:'Oswald',ui-sans-serif,system-ui,sans-serif;--font-serif:'Cinzel',Georgia,serif;--transition-smooth:all .5s cubic-bezier(.16,1,.3,1)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-sans);background:var(--zavi-dark);color:#F8FAFC;overflow-x:hidden;cursor:none;-webkit-font-smoothing:antialiased}
::selection{background:var(--zavi-primary);color:var(--zavi-dark)}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
button{cursor:none;font-family:var(--font-sans)}
body.admin-bar .zavi-navbar{top:32px}
@media(max-width:782px){body.admin-bar .zavi-navbar{top:46px}}

/* === 1. NOISE === */
.bg-noise{position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.03;mix-blend-mode:overlay;background-image:url('https://www.transparenttextures.com/patterns/stardust.png')}

/* === 2. LOADER === */
.zavi-loader{position:fixed;inset:0;z-index:10000;background:var(--zavi-dark);display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;transition:transform .8s cubic-bezier(.76,0,.24,1)}
.zavi-loader .loader-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:50px 50px;opacity:.2}
.zavi-loader .loader-inner{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;animation:loaderFadeIn 1s ease forwards}
.zavi-loader .loader-logo{margin-bottom:32px;transform:scale(1.5)}
.zavi-loader .loader-logo img{height:80px;width:auto}
.zavi-loader .loader-bar{height:4px;background:var(--zavi-primary);animation:loaderBar 1.5s ease-in-out forwards}
.zavi-loader .loader-text{color:var(--zavi-primary);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5em;margin-top:16px}
.zavi-loader.hidden{transform:translateY(-100%);pointer-events:none}
@keyframes loaderFadeIn{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
@keyframes loaderBar{from{width:0}to{width:140px}}

/* === 3. CURSOR === */
.zavi-cursor{position:fixed;z-index:99999;pointer-events:none;width:16px;height:16px;background:var(--zavi-primary);border-radius:50%;transform:translate(-50%,-50%);mix-blend-mode:difference;transition:width .3s,height .3s,opacity .3s}
.zavi-cursor-follower{position:fixed;z-index:99998;pointer-events:none;width:48px;height:48px;border:1px solid rgba(197,160,89,.5);border-radius:50%;transform:translate(-50%,-50%);transition:width .15s cubic-bezier(.34,1.56,.64,1),height .15s cubic-bezier(.34,1.56,.64,1),border-color .3s,background .3s,opacity .3s}
.cursor-hover .zavi-cursor{width:0;height:0}
.cursor-hover .zavi-cursor-follower{width:72px;height:72px;border-color:rgba(197,160,89,.8);background:rgba(234,179,8,.2)}
@media(max-width:1024px){.zavi-cursor,.zavi-cursor-follower{display:none!important}body{cursor:auto}button{cursor:pointer}}

/* === 4. NAVBAR === */
.zavi-navbar{position:fixed;top:0;left:0;right:0;z-index:50;transition:all .5s ease;border-bottom:1px solid rgba(255,255,255,.1);background:rgba(15,23,42,.6);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:12px 0}
.zavi-navbar.scrolled{background:rgba(15,23,42,.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom-color:rgba(197,160,89,.3);padding:2px 0;box-shadow:0 10px 15px -3px rgba(0,0,0,.3)}
.navbar-inner{max-width:1400px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:10}
@media(min-width:768px){.navbar-inner{padding:0 48px}}
.navbar-logo a{display:flex;align-items:center;gap:12px}
.navbar-logo img{height:80px;width:auto;object-fit:contain;border-radius:2px}
@media(min-width:768px){.navbar-logo img{height:96px}}
@media(min-width:1024px){.navbar-logo img{height:112px}}
.navbar-center{display:none}
@media(min-width:1024px){.navbar-center{display:flex;align-items:center;justify-content:center}}
.nav-pills{display:flex;align-items:center;gap:4px;background:rgba(17,24,39,.9);padding:6px;border-radius:12px;border:1px solid rgba(255,255,255,.05);backdrop-filter:blur(12px);box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}
.nav-pill{padding:10px 24px;border-radius:8px;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.15em;transition:all .3s;color:#9CA3AF;background:transparent;border:none;font-family:var(--font-sans)}
.nav-pill:hover{color:#fff;background:rgba(255,255,255,.05)}
.nav-pill.active{background:var(--zavi-primary);color:#000;box-shadow:0 10px 15px -3px rgba(0,0,0,.3)}
.navbar-actions{display:none}
@media(min-width:768px){.navbar-actions{display:flex;align-items:center;gap:24px}}
.navbar-actions .icon-link{color:#fff;transition:color .3s}
.navbar-actions .icon-link:hover{color:var(--zavi-primary)}
.navbar-divider{height:16px;width:1px;background:rgba(255,255,255,.1)}
.navbar-lang{display:flex;align-items:center;gap:12px;font-size:10px;font-weight:900;letter-spacing:.2em}
.navbar-lang .active{color:#fff}
.navbar-lang .inactive{color:#4B5563;transition:color .3s;cursor:pointer}
.navbar-lang .inactive:hover{color:#fff}
.navbar-cta{background:#fff;color:#000;font-weight:900;font-size:10px;text-transform:uppercase;letter-spacing:.15em;padding:8px 20px;border-radius:2px;transition:all .3s;display:flex;align-items:center;gap:8px}
.navbar-cta:hover{background:var(--zavi-primary);color:#fff}
.menu-toggle{display:block;background:none;border:none;color:#fff;padding:8px;border-radius:8px;transition:background .3s}
.menu-toggle:hover{background:rgba(255,255,255,.1)}
@media(min-width:1024px){.menu-toggle{display:none}}

/* Mobile Menu */
.mobile-menu{position:fixed;inset:0;z-index:60;background:rgba(15,23,42,.95);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .5s cubic-bezier(.16,1,.3,1)}
.mobile-menu.open{transform:translateX(0)}
.mobile-menu-header{display:flex;justify-content:space-between;align-items:center;padding:24px;border-bottom:1px solid rgba(255,255,255,.1)}
.mobile-menu-header img{height:64px;width:auto}
.mobile-menu-close{width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:none;color:#fff;display:flex;align-items:center;justify-content:center;transition:all .3s}
.mobile-menu-close:hover{background:#fff;color:#000}
.mobile-menu-body{flex:1;display:flex;flex-direction:column;justify-content:center;padding:0 40px;gap:32px;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:50px 50px;padding-bottom:80px}
.mobile-menu-link{font-family:var(--font-display);font-size:clamp(2.5rem,8vw,3.5rem);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;color:#fff;transition:color .3s}
.mobile-menu-link.active{color:var(--zavi-primary)}

/* === 5. HERO === */
.zavi-hero{position:relative;height:100vh;min-height:700px;width:100%;overflow:hidden;background:#000;color:#fff;display:flex;flex-direction:column}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-bg::before{content:'';position:absolute;inset:0;z-index:10;background:linear-gradient(to right,rgba(0,0,0,.9),rgba(0,0,0,.4),transparent)}
.hero-bg::after{content:'';position:absolute;inset:0;z-index:10;background:linear-gradient(to top,rgba(0,0,0,.8),transparent,rgba(0,0,0,.2))}
.hero-bg iframe{position:absolute;top:50%;left:50%;width:177.77vh;height:56.25vw;min-width:100%;min-height:100%;transform:translate(-50%,-50%) scale(1.25);pointer-events:none}
.hero-content{position:relative;z-index:20;flex-grow:1;width:100%;max-width:1400px;margin:0 auto;padding:160px 24px 208px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
@media(min-width:768px){.hero-content{padding-left:48px;padding-right:48px}}
.hero-content-inner{max-width:72rem}
.hero-label{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.hero-badge{display:inline-flex;align-items:center;gap:12px;padding:6px 16px;border-radius:9999px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05);backdrop-filter:blur(4px)}
.hero-badge .badge-pulse{width:6px;height:6px;border-radius:50%;background:var(--zavi-primary);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.5)}}
.hero-badge span{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#fff}
.hero-quality{color:var(--zavi-primary);font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.hero-title{font-family:var(--font-display);font-weight:900;font-size:clamp(3.5rem,10vw,7rem);line-height:.9;color:#fff;margin-bottom:24px;text-transform:uppercase;filter:drop-shadow(0 25px 25px rgba(0,0,0,.25))}
.hero-title .gradient-text,.gradient-text{background:linear-gradient(to right,#C5A059,#E5C585,#C5A059);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-desc{color:#E5E7EB;font-size:clamp(1rem,2vw,1.25rem);line-height:1.75;max-width:42rem;border-left:4px solid var(--zavi-primary);padding-left:24px;margin-bottom:40px;font-weight:300;filter:drop-shadow(0 4px 3px rgba(0,0,0,.3))}
.hero-desc b{color:#fff;font-weight:700}
.hero-buttons{display:flex;flex-direction:column;gap:16px}
@media(min-width:640px){.hero-buttons{flex-direction:row}}
.btn-hero-primary{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:16px 32px;background:var(--zavi-primary);color:#000;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.2em;transition:all .3s;border-radius:2px;box-shadow:0 10px 15px -3px rgba(0,0,0,.3)}
.btn-hero-primary:hover{background:#fff}
.btn-hero-primary svg{transition:transform .3s}
.btn-hero-primary:hover svg{transform:translateX(4px)}
.btn-hero-secondary{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:16px 32px;border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(4px);color:#fff;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.2em;transition:all .3s;border-radius:2px}
.btn-hero-secondary:hover{background:rgba(255,255,255,.1)}
.btn-hero-secondary .play-icon{color:var(--zavi-primary)}

/* Hero HUD */
.hero-hud{display:none;position:absolute;bottom:0;left:0;width:100%;z-index:20;border-top:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
@media(min-width:1024px){.hero-hud{display:flex}}
.hero-hud-inner{max-width:1400px;margin:0 auto;padding:0 48px;display:grid;grid-template-columns:repeat(3,1fr);width:100%}
.hero-hud-item{padding:16px 40px;display:flex;align-items:center;gap:24px;border-right:1px solid rgba(255,255,255,.1);transition:background .3s}
.hero-hud-item:last-child{border-right:none}
.hero-hud-item:hover{background:rgba(255,255,255,.1)}
.hero-hud-icon{color:var(--zavi-primary)}
.hero-hud-text h4{font-size:14px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.1em}
.hero-hud-text span{font-size:12px;color:#9CA3AF}


/* === 6. PARTNERS === */
.zavi-partners{position:relative;padding:128px 0;overflow:hidden;background:var(--zavi-dark)}
.partners-grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:50px 50px;opacity:.2;pointer-events:none}
.partners-watermark{position:absolute;bottom:0;right:0;font-family:var(--font-display);font-size:clamp(8rem,20vw,16rem);font-weight:900;color:rgba(255,255,255,.02);line-height:.8;pointer-events:none;text-transform:uppercase;letter-spacing:-.05em}
.partners-glow{position:absolute;top:50%;left:50%;width:600px;height:600px;background:radial-gradient(circle,rgba(197,160,89,.08),transparent);transform:translate(-50%,-50%);pointer-events:none}
.partners-inner{max-width:1400px;margin:0 auto;padding:0 24px;position:relative;z-index:10}
@media(min-width:768px){.partners-inner{padding:0 48px}}
.partners-grid{display:flex;flex-direction:column;gap:64px}
@media(min-width:1024px){.partners-grid{flex-direction:row;gap:96px}}
.partners-left{position:relative;width:100%}
@media(min-width:1024px){.partners-left{width:50%}}
.partners-deco-left{display:none}
@media(min-width:1024px){.partners-deco-left{display:block;position:absolute;left:-32px;top:64px;width:64px;height:64px;border:1px solid rgba(197,160,89,.2);border-radius:50%}}
.partners-deco-top{display:none}
@media(min-width:1024px){.partners-deco-top{display:block;position:absolute;right:64px;top:-32px;width:128px;height:128px;border:1px solid rgba(197,160,89,.1);border-radius:50%}}
.partners-main-img{position:relative;border-radius:24px;overflow:hidden;box-shadow:0 25px 50px -12px rgba(0,0,0,.5);aspect-ratio:4/3}
.partners-main-img img{width:100%;height:100%;object-fit:cover;transition:transform 1s}
.partners-main-img:hover img{transform:scale(1.05)}
.partners-main-img .img-gradient{position:absolute;inset:0;background:linear-gradient(to top,rgba(15,23,42,.8),transparent)}
.partners-main-img .img-overlay-ui{position:absolute;bottom:0;left:0;width:100%;padding:24px;z-index:10;display:flex;justify-content:space-between;align-items:flex-end}
.partners-main-img .img-status{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.partners-main-img .img-status .pulse{width:6px;height:6px;border-radius:50%;background:#22C55E;animation:pulse 2s infinite}
.partners-main-img .img-status span{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#22C55E}
.partners-main-img .img-title{font-family:var(--font-display);font-size:1.5rem;font-weight:700;color:#fff}
.partners-main-img .img-percent{text-align:right}
.partners-main-img .img-percent span:first-child{display:block;font-family:var(--font-display);font-size:2rem;font-weight:700;color:var(--zavi-primary)}
.partners-main-img .img-percent span:last-child{font-size:10px;text-transform:uppercase;letter-spacing:.2em;color:#9CA3AF}
.partners-secondary-img{display:none}
@media(min-width:1024px){.partners-secondary-img{display:block;position:absolute;bottom:-48px;right:-48px;width:200px;height:200px;border-radius:16px;overflow:hidden;border:4px solid var(--zavi-dark);box-shadow:0 25px 50px -12px rgba(0,0,0,.5)}}
.partners-secondary-img img{width:100%;height:100%;object-fit:cover}
.partners-right{width:100%}
@media(min-width:1024px){.partners-right{width:50%}}
.partners-header-line{display:flex;align-items:center;gap:16px;margin-bottom:32px}
.partners-header-line .line{width:48px;height:1px;background:var(--zavi-primary)}
.partners-header-line span{color:var(--zavi-primary);font-size:10px;font-weight:700;letter-spacing:.3em;text-transform:uppercase}
.partners-title{font-family:var(--font-display);font-size:clamp(3rem,6vw,5rem);font-weight:900;line-height:.9;text-transform:uppercase;letter-spacing:-.02em;margin-bottom:32px}
.partners-title .gold-text{position:relative;display:block}
.partners-title .shadow-text{position:absolute;color:transparent;-webkit-text-stroke:1px rgba(197,160,89,.3)}
.partners-title .main-text{position:relative;color:var(--zavi-primary)}
.partners-desc{margin-bottom:48px}
.partners-desc p{color:rgba(255,255,255,.7);font-size:clamp(1rem,1.5vw,1.25rem);line-height:1.75}
.partners-desc strong{color:#fff}
.partners-stats{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-bottom:48px}
.partners-stat h3{font-family:var(--font-display);font-size:clamp(2rem,4vw,3rem);font-weight:700;color:#fff}
.partners-stat h3 .suffix{font-size:.5em;color:var(--zavi-primary);margin-left:4px}
.partners-stat p{font-size:12px;color:#6B7280;text-transform:uppercase;letter-spacing:.2em;margin-top:8px;display:flex;align-items:center;gap:8px}
.partners-stat p .dot{width:4px;height:4px;border-radius:50%;background:var(--zavi-primary)}
.partners-resources{padding-top:32px;border-top:1px solid rgba(255,255,255,.1)}
.res-header{display:flex;align-items:center;gap:8px;margin-bottom:24px;color:var(--zavi-primary)}
.res-header span:first-of-type{font-size:10px;font-weight:700;letter-spacing:.3em;text-transform:uppercase}
.res-header .res-line{flex:1;height:1px;background:rgba(255,255,255,.1)}
.partners-resources-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.res-item{padding:16px;text-align:center}
.res-item.bordered{border-left:1px solid rgba(255,255,255,.1)}
.res-item .res-icon{color:var(--zavi-primary);margin-bottom:12px;display:flex;justify-content:center}
.res-item h4{font-size:10px;font-weight:900;letter-spacing:.3em;text-transform:uppercase;color:#fff;margin-bottom:4px}
.res-item p{font-size:10px;color:#6B7280;letter-spacing:.1em}

/* === 7. CONSTRUCTION GAP === */
.zavi-construction-gap{position:relative;min-height:80vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.gap-parallax-bg{position:absolute;inset:0;z-index:0}
.gap-parallax-bg img{width:100%;height:120%;object-fit:cover;position:absolute;top:0;left:0;transition:transform .1s linear}
.gap-parallax-bg .gap-texture{position:absolute;inset:0;background-image:url('https://www.transparenttextures.com/patterns/stardust.png');opacity:.1}
.gap-parallax-bg .gap-dark-overlay{position:absolute;inset:0;background:rgba(15,23,42,.85)}
.gap-fade-top,.gap-fade-bottom{position:absolute;left:0;right:0;height:128px;z-index:5;pointer-events:none}
.gap-fade-top{top:0;background:linear-gradient(to bottom,var(--zavi-dark),transparent)}
.gap-fade-bottom{bottom:0;background:linear-gradient(to top,var(--zavi-dark),transparent)}
.gap-content{position:relative;z-index:10;max-width:56rem;margin:0 auto;padding:96px 24px;text-align:center}
@media(min-width:768px){.gap-content{padding:128px 48px}}
.gap-quote-icon{color:var(--zavi-primary);opacity:.3;margin-bottom:32px;display:flex;justify-content:center}
.gap-headline{font-family:var(--font-serif);font-size:clamp(1.5rem,3vw,2.25rem);font-weight:400;color:#fff;line-height:1.6;margin-bottom:32px}
.gap-headline .gold{color:var(--zavi-primary)}
.gap-headline .underlined{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--zavi-primary)}
.gap-separator{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:32px}
.gap-separator .line{width:48px;height:1px;background:rgba(255,255,255,.2)}
.gap-separator .diamond{width:8px;height:8px;background:var(--zavi-primary);transform:rotate(45deg)}
.gap-secondary{color:#9CA3AF;font-size:clamp(.875rem,1.5vw,1.125rem);line-height:1.75;max-width:42rem;margin:0 auto}
.gap-secondary strong{color:#fff}

/* === 8. SERVICES ACCORDION === */
.zavi-services{position:relative;padding:128px 0;overflow:hidden}
.services-bg{position:absolute;inset:0;z-index:0}
.services-bg img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.services-bg .overlay-gradient{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(15,23,42,.85),rgba(15,23,42,.9))}
.services-bg .overlay-dark{position:absolute;inset:0;background:rgba(0,0,0,.25)}
.services-grid-overlay{position:absolute;inset:0;z-index:1;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:50px 50px;opacity:.2;pointer-events:none}
.services-inner{max-width:1400px;margin:0 auto;padding:0 24px;position:relative;z-index:10}
@media(min-width:768px){.services-inner{padding:0 48px}}
.services-header{display:flex;flex-direction:column;gap:16px;margin-bottom:64px}
@media(min-width:768px){.services-header{flex-direction:row;justify-content:space-between;align-items:flex-end}}
.services-label{display:flex;align-items:center;gap:8px;color:var(--zavi-primary);font-size:10px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;margin-bottom:16px}
.services-title{font-family:var(--font-display);font-size:clamp(3rem,6vw,5rem);font-weight:900;line-height:.9;text-transform:uppercase}
.services-title .gradient-white{background:linear-gradient(to right,#fff,rgba(255,255,255,.3));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.services-hint{color:#6B7280;font-size:12px;max-width:300px;text-align:right;display:none}
@media(min-width:768px){.services-hint{display:block}}

/* Accordion Panels */
.services-accordion{display:flex;flex-direction:column;gap:8px;height:auto}
@media(min-width:1024px){.services-accordion{flex-direction:row;height:600px;gap:8px}}
.service-panel{position:relative;overflow:hidden;border-radius:16px;cursor:pointer;transition:all .6s cubic-bezier(.4,0,.2,1);flex:none;min-height:80px}
@media(max-width:1023px){.service-panel{border:1px solid rgba(255,255,255,.05)}.service-panel.active{min-height:320px;border-color:rgba(197,160,89,.2);box-shadow:0 0 40px rgba(197,160,89,.08),0 20px 40px -12px rgba(0,0,0,.3)}}
@media(min-width:1024px){.service-panel{flex:.8;min-height:auto}.service-panel.active{flex:4}}
.panel-bg{position:absolute;inset:0;z-index:0}
.panel-bg .panel-img{width:100%;height:100%;object-fit:cover;opacity:.3;transition:opacity .7s,transform .7s;transform:scale(1.1)}
.service-panel.active .panel-bg .panel-img{opacity:.6;transform:scale(1)}
.panel-bg .panel-gradient{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.9),rgba(0,0,0,.3),transparent)}
.panel-bg .panel-scan{position:absolute;inset:0;background:linear-gradient(transparent 50%,rgba(197,160,89,.03) 50%);background-size:100% 4px;pointer-events:none;opacity:0;transition:opacity .5s}
.service-panel.active .panel-bg .panel-scan{opacity:1}
.panel-active-border{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;transition:opacity .5s}
.service-panel.active .panel-active-border{opacity:1}
.panel-active-border .line-top{position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(to right,transparent,var(--zavi-primary),transparent)}
.panel-active-border .line-bottom{position:absolute;bottom:0;left:0;width:100%;height:2px;background:linear-gradient(to right,transparent,var(--zavi-primary),transparent)}
.corner-marker{position:absolute;font-size:10px;color:rgba(197,160,89,.3);z-index:5;opacity:0;transition:opacity .5s}
.service-panel.active .corner-marker{opacity:1}
.corner-tl{top:8px;left:12px}.corner-tr{top:8px;right:12px}.corner-bl{bottom:8px;left:12px}.corner-br{bottom:8px;right:12px}
.panel-ui{position:relative;z-index:10;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:24px}
@media(min-width:1024px){.panel-ui{padding:32px}}
.panel-top{display:flex;justify-content:space-between;align-items:flex-start}
.panel-icon-circle{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;color:var(--zavi-primary);background:rgba(0,0,0,.3);backdrop-filter:blur(4px);transition:all .3s}
.service-panel.active .panel-icon-circle{background:var(--zavi-primary);color:#000;border-color:var(--zavi-primary)}
.panel-giant-number{font-family:var(--font-display);font-size:clamp(3rem,6vw,5rem);font-weight:700;color:rgba(255,255,255,.05);line-height:1;transition:color .5s}
.service-panel.active .panel-giant-number{color:rgba(197,160,89,.15)}
.panel-vertical-title{display:none}
@media(min-width:1024px){.panel-vertical-title{display:block;font-family:var(--font-display);font-size:22px;font-weight:900;text-transform:uppercase;letter-spacing:.3em;color:rgba(255,255,255,.7);writing-mode:vertical-rl;text-orientation:mixed;position:absolute;right:32px;top:50%;transform:translateY(-50%);transition:opacity .5s}.service-panel.active .panel-vertical-title{opacity:0}}
.panel-bottom{margin-top:auto}
.panel-mobile-title{font-family:var(--font-display);font-size:1.25rem;font-weight:700;text-transform:uppercase;color:#fff}
@media(min-width:1024px){.panel-mobile-title{display:none}}
.panel-active-content{max-height:0;overflow:hidden;opacity:0;transition:max-height .6s cubic-bezier(.4,0,.2,1),opacity .5s ease,transform .5s ease;transform:translateY(10px)}
.service-panel.active .panel-active-content{max-height:500px;opacity:1;transform:translateY(0)}
@media(max-width:1023px){.panel-active-content{margin-top:16px}}
@media(max-width:1023px){
.service-panel .panel-bg .panel-img{transition:opacity .8s cubic-bezier(.4,0,.2,1),transform 1s cubic-bezier(.4,0,.2,1)}
.service-panel.active{transform:translateY(-2px)}
.service-panel .panel-icon-circle{transition:all .5s cubic-bezier(.4,0,.2,1)}
}
.panel-stats{display:flex;gap:32px;margin-bottom:16px}
.panel-stat-label{display:block;font-size:9px;color:#6B7280;text-transform:uppercase;letter-spacing:.2em}
.panel-stat-val{font-family:var(--font-display);font-size:1.25rem;font-weight:700;color:var(--zavi-primary)}
.panel-subtitle{font-size:10px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--zavi-primary);margin-bottom:8px}
.panel-service-title{font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2.5rem);font-weight:900;text-transform:uppercase;color:#fff;margin-bottom:16px}
.panel-desc-row{display:flex;flex-direction:column;gap:16px}
@media(min-width:1024px){.panel-desc-row{flex-direction:row;align-items:flex-end;justify-content:space-between}}
.panel-desc{color:#9CA3AF;font-size:.875rem;max-width:400px;line-height:1.6}
.panel-consult-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;background:rgba(255,255,255,.1);border-radius:9999px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.2em;color:#fff;transition:all .3s;white-space:nowrap}
.panel-consult-btn:hover{background:var(--zavi-primary);color:#000}


/* === 9. MARQUEE === */
.zavi-marquee{padding:80px 0;overflow:hidden;position:relative;width:100%}
@keyframes marqueeScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* === 10. PROJECTS SECTION === */
.zavi-projects{position:relative;background:#F2F2F2;color:#0F172A}
.projects-inner{max-width:1400px;margin:0 auto;padding:0 16px;display:flex;flex-direction:column}
@media(min-width:768px){.projects-inner{padding:0 24px}}
@media(min-width:1024px){.projects-inner{flex-direction:row}}
.projects-sticky-image{display:none}
@media(min-width:1024px){.projects-sticky-image{display:block;width:50%;height:100vh;position:sticky;top:0;padding:48px 48px 48px 0}}
.projects-sticky-frame{position:relative;width:100%;height:100%;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}
.projects-sticky-frame .arch-grid{position:absolute;inset:0;z-index:10;opacity:.2;background:linear-gradient(rgba(255,255,255,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.2) 1px,transparent 1px);background-size:50px 50px}
.projects-sticky-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:all .7s}
.projects-sticky-overlay{position:absolute;bottom:0;left:0;width:100%;padding:32px;z-index:20;color:#fff;background:linear-gradient(to top,rgba(0,0,0,.8),transparent)}
.projects-sticky-overlay .label{display:block;color:var(--zavi-primary);font-size:12px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;margin-bottom:8px}
.projects-sticky-overlay h2{font-size:2.5rem;font-family:var(--font-display);font-weight:700}
.projects-sticky-overlay .arrow-circle{width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.1);backdrop-filter:blur(12px)}
.projects-scroll{width:100%;padding:120px 0 160px}
@media(min-width:1024px){.projects-scroll{width:50%;padding-left:48px}}
.projects-scroll-header{margin-bottom:80px}
.projects-scroll-header .label{color:var(--zavi-primary);font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:.875rem;margin-bottom:16px}
.projects-scroll-header h2{font-family:var(--font-display);font-size:clamp(3rem,6vw,4.5rem);font-weight:900;color:#0F172A;line-height:1;margin-bottom:24px}
.projects-scroll-header h2 .gradient-dark{background:linear-gradient(to right,#0F172A,#94A3B8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.projects-scroll-header p{color:#6B7280;max-width:28rem}

/* Desktop: cards-wrap is just a normal flow container */
.projects-cards-wrap{display:block}

/* Desktop project cards */
.project-card{min-height:80vh;display:flex;flex-direction:column;justify-content:center;padding:80px 0;border-bottom:1px solid #D1D5DB;position:relative}
.project-card:last-child{border-bottom:none}
.project-card .card-number{font-size:clamp(4rem,8vw,6rem);font-family:var(--font-display);font-weight:700;color:#E5E7EB;position:absolute;z-index:-1;transform:translateY(-48px);user-select:none}
.project-card .card-tags{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.project-card .card-tag-gold{background:var(--zavi-primary);color:#000;font-size:12px;font-weight:700;padding:4px 12px;text-transform:uppercase;letter-spacing:.2em}
.project-card .card-location{color:#6B7280;font-family:monospace;font-size:12px;display:flex;align-items:center;gap:4px}
.project-card h3{font-family:var(--font-display);font-size:clamp(3rem,6vw,4.5rem);font-weight:700;color:#0F172A;line-height:.9;margin-bottom:32px;text-transform:uppercase}
.project-card .card-desc{color:#4B5563;font-size:1.125rem;line-height:1.75;max-width:28rem;margin-bottom:32px}
.project-card .card-meta{display:flex;align-items:center;gap:48px;margin-bottom:32px}
.project-card .card-meta-item .meta-label{display:block;font-size:12px;font-weight:700;color:#9CA3AF;text-transform:uppercase;letter-spacing:.2em;margin-bottom:4px}
.project-card .card-meta-item .meta-value{font-family:var(--font-display);font-size:1.25rem;color:#0F172A}
.project-card .card-link{display:inline-flex;align-items:center;gap:12px;color:#0F172A;font-weight:700;text-transform:uppercase;letter-spacing:.2em;transition:color .3s;width:fit-content}
.project-card .card-link span{border-bottom:2px solid #0F172A;padding-bottom:4px;transition:border-color .3s}
.project-card .card-link:hover{color:var(--zavi-primary)}
.project-card .card-link:hover span{border-color:var(--zavi-primary)}
.project-card .card-link svg{transition:transform .3s}
.project-card .card-link:hover svg{transform:translate(4px,-4px)}
.project-mobile-img{width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;margin-bottom:24px;position:relative;box-shadow:0 20px 40px -12px rgba(0,0,0,.3)}
@media(min-width:1024px){.project-mobile-img{display:none}}
.project-mobile-img img{width:100%;height:100%;object-fit:cover}
.project-mobile-img .overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.4),transparent)}
.projects-cta{margin-top:80px;padding:48px;background:#0F172A;border-radius:16px;color:#fff;text-align:center;position:relative;overflow:hidden}
.projects-cta .cta-bg{position:absolute;inset:0;background:rgba(197,160,89,.1);transform:translateY(100%);transition:transform .5s}
.projects-cta:hover .cta-bg{transform:translateY(0)}
.projects-cta h3{font-family:var(--font-display);font-size:1.875rem;font-weight:700;margin-bottom:16px;position:relative;z-index:10}
.projects-cta p{color:#9CA3AF;margin-bottom:32px;position:relative;z-index:10}
.projects-cta .cta-btn{display:inline-block;padding:12px 32px;background:#fff;color:#0F172A;font-weight:700;text-transform:uppercase;letter-spacing:.2em;border-radius:9999px;position:relative;z-index:10;transition:all .3s}
.projects-cta:hover .cta-btn{background:var(--zavi-primary)}

/* Desktop: hide dots */
.projects-dots{display:none}

/* ====== MOBILE PROJECTS (vertical sticky like desktop) ====== */
@media(max-width:1023px){
.zavi-projects{overflow:visible}
.projects-inner{flex-direction:column}

/* Mobile sticky image at top */
.projects-sticky-image{display:block !important;width:100% !important;height:60vw;position:sticky !important;top:72px;z-index:10;padding:0 !important}
.projects-sticky-frame{border-radius:0 !important;height:100%}
.projects-sticky-overlay{padding:16px 20px !important}
.projects-sticky-overlay h2{font-size:1.3rem !important}
.projects-sticky-overlay .arrow-circle{width:36px;height:36px}

/* Scroll column */
.projects-scroll{padding:32px 0 64px;width:100% !important;padding-left:0 !important}
.projects-scroll-header{margin-bottom:40px;padding:0 20px}
.projects-scroll-header h2{font-size:2rem !important;line-height:1.1}
.projects-scroll-header p{font-size:.875rem}

/* Cards vertical flow */
.projects-cards-wrap{display:block !important}

.project-card{min-height:auto !important;padding:32px 20px !important;border-bottom:1px solid #D1D5DB !important;opacity:0;transform:translateY(40px);transition:opacity .7s cubic-bezier(.4,0,.2,1),transform .7s cubic-bezier(.4,0,.2,1)}
.project-card.mob-visible{opacity:1;transform:translateY(0)}

.project-card .card-number{font-size:3rem !important;color:#E5E7EB !important}
.project-card h3{font-size:1.5rem !important;color:#0F172A !important;margin-bottom:16px !important;line-height:1.1 !important}
.project-card .card-desc{font-size:.875rem !important;color:#4B5563 !important;margin-bottom:16px !important}
.project-card .card-meta{gap:24px !important;margin-bottom:16px !important}
.project-card .card-meta-item .meta-label{color:#9CA3AF !important}
.project-card .card-meta-item .meta-value{font-size:1rem !important;color:#0F172A !important}
.project-card .card-link{font-size:.7rem !important;color:#0F172A !important}
.project-card .card-link span{border-bottom-color:#0F172A !important}

/* Hide mobile img in vertical mode - use sticky image instead */
.project-mobile-img{display:none !important}

/* Hide dots in vertical mode */
.projects-dots{display:none !important}

.projects-cta{margin:24px 16px 0 !important;padding:28px 20px !important}
.projects-cta h3{font-size:1.15rem !important}
}

/* === 11. ABOUT === */
.zavi-about{position:relative;padding:128px 0;overflow:hidden}
.about-inner{max-width:1400px;margin:0 auto;padding:0 24px;position:relative;z-index:10}
@media(min-width:768px){.about-inner{padding:0 48px}}
.about-grid{display:flex;flex-direction:column;gap:64px}
@media(min-width:1024px){.about-grid{flex-direction:row;gap:96px}}
.about-img-col{width:100%;position:relative}
@media(min-width:1024px){.about-img-col{width:50%}}
.about-main-img{border-radius:24px;overflow:hidden;box-shadow:0 25px 50px -12px rgba(0,0,0,.5);aspect-ratio:4/3}
.about-main-img img{width:100%;height:100%;object-fit:cover;transition:transform 1s}
.about-main-img:hover img{transform:scale(1.05)}
.about-floating-card{display:none}
@media(min-width:1024px){.about-floating-card{display:block;position:absolute;bottom:-32px;right:-32px;background:rgba(15,23,42,.9);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:24px;box-shadow:0 25px 50px -12px rgba(0,0,0,.5)}}
.about-floating-card .card-top{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.about-floating-card .card-top .icon-circle{width:40px;height:40px;border-radius:50%;background:var(--zavi-primary);display:flex;align-items:center;justify-content:center;color:#000}
.about-floating-card .card-top h4{font-family:var(--font-display);font-size:1.125rem;font-weight:700;color:#fff}
.about-floating-card .card-top p{font-size:10px;color:#6B7280;text-transform:uppercase;letter-spacing:.2em}
.about-floating-card .card-bar{height:6px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}
.about-floating-card .card-bar .fill{height:100%;background:var(--zavi-primary);border-radius:3px;width:97%}
.about-text-col{width:100%}
@media(min-width:1024px){.about-text-col{width:50%}}
.about-label{display:flex;align-items:center;gap:8px;color:var(--zavi-primary);font-size:10px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;margin-bottom:16px}
.about-heading{font-family:var(--font-display);font-size:clamp(3rem,6vw,5rem);font-weight:900;line-height:.9;text-transform:uppercase;margin-bottom:32px}
.about-heading .muted{color:rgba(255,255,255,.3)}
.about-manifesto{padding:32px;border-left:4px solid var(--zavi-primary);background:rgba(255,255,255,.03);margin-bottom:48px}
.about-manifesto h3{font-family:var(--font-display);font-size:1.5rem;font-weight:700;text-transform:uppercase;color:#fff;margin-bottom:16px}
.about-manifesto p{color:#9CA3AF;line-height:1.75}
.about-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.about-stat{text-align:center;padding:24px;border:1px solid rgba(255,255,255,.05);border-radius:16px;transition:all .3s}
.about-stat:hover{border-color:rgba(197,160,89,.3);background:rgba(255,255,255,.02)}
.about-stat h3{font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2rem);font-weight:700;color:var(--zavi-primary)}
.about-stat p{font-size:10px;color:#6B7280;text-transform:uppercase;letter-spacing:.2em;margin-top:8px}

/* === 12. TESTIMONIALS === */
.zavi-testimonials{padding:128px 0;background:#fff;color:#111;position:relative;overflow:hidden}
.testimonials-inner{max-width:1400px;margin:0 auto;padding:0 24px;position:relative;z-index:10}
@media(min-width:768px){.testimonials-inner{padding:0 48px}}
.testimonials-header{text-align:center;margin-bottom:64px}
.testimonials-label{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--zavi-primary);font-size:10px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;margin-bottom:16px}
.testimonials-title{font-family:var(--font-display);font-size:clamp(3rem,6vw,5rem);font-weight:900;line-height:.9;text-transform:uppercase;color:#111}
.testimonials-grid{display:grid;grid-template-columns:1fr;gap:32px}
@media(min-width:768px){.testimonials-grid{grid-template-columns:repeat(3,1fr)}}
.testimonial-card{background:#fff;border:1px solid #E5E7EB;border-radius:16px;padding:32px;position:relative;overflow:hidden;transition:all .3s}
.testimonial-card:hover{box-shadow:0 25px 50px -12px rgba(0,0,0,.1);border-color:var(--zavi-primary);transform:translateY(-4px)}
.testimonial-card .card-glow{position:absolute;top:-50%;right:-50%;width:200px;height:200px;background:radial-gradient(circle,rgba(197,160,89,.1),transparent);pointer-events:none}
.testimonial-stars{display:flex;gap:4px;margin-bottom:16px;color:var(--zavi-primary)}
.testimonial-text{font-style:italic;color:#4B5563;line-height:1.75;margin-bottom:24px;font-size:.875rem}
.testimonial-author{display:flex;align-items:center;gap:16px}
.testimonial-avatar{width:48px;height:48px;border-radius:50%;background:var(--zavi-primary);display:flex;align-items:center;justify-content:center;color:#000;font-weight:900;font-size:1.125rem}
.testimonial-name{font-weight:700;color:#111;font-size:.875rem}
.testimonial-role{font-size:12px;color:#6B7280}

/* === 13. CONTACT CTA === */
.zavi-contact-cta{position:relative;padding:128px 0;overflow:hidden}
.contact-cta-bg{position:absolute;inset:0;z-index:0}
.contact-cta-bg img{width:100%;height:100%;object-fit:cover;opacity:.15}
.cta-overlay{position:absolute;inset:0;background:var(--zavi-dark)}
.cta-grid-overlay{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:50px 50px;opacity:.2}
.contact-cta-inner{max-width:1400px;margin:0 auto;padding:0 24px;position:relative;z-index:10;display:flex;flex-direction:column;gap:64px}
@media(min-width:768px){.contact-cta-inner{padding:0 48px}}
@media(min-width:1024px){.contact-cta-inner{flex-direction:row;gap:96px}}
.contact-cta-left{width:100%}
@media(min-width:1024px){.contact-cta-left{width:42%}}
.contact-label{color:var(--zavi-primary);font-size:10px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;margin-bottom:16px}
.contact-title{font-family:var(--font-display);font-size:clamp(3rem,6vw,5rem);font-weight:900;line-height:.9;text-transform:uppercase;margin-bottom:24px}
.gold-gradient{background:linear-gradient(to right,#C5A059,#E5C585,#C5A059);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.contact-desc{color:#9CA3AF;font-size:1rem;line-height:1.75;margin-bottom:24px}
.contact-badge{display:inline-flex;align-items:center;gap:8px;color:var(--zavi-primary);font-size:12px;font-weight:600;margin-bottom:32px}
.contact-info-cards{display:flex;flex-direction:column;gap:16px}
.info-card{display:flex;align-items:center;gap:16px;padding:16px;border:1px solid rgba(255,255,255,.1);border-radius:12px;transition:all .3s}
.info-card:hover{border-color:rgba(197,160,89,.3);background:rgba(255,255,255,.02)}
.icon-circle{width:40px;height:40px;border-radius:50%;background:rgba(197,160,89,.1);display:flex;align-items:center;justify-content:center;color:var(--zavi-primary);flex-shrink:0}
.info-label{display:block;font-size:10px;color:#6B7280;text-transform:uppercase;letter-spacing:.2em}
.info-value{display:block;color:#fff;font-weight:700;font-size:.875rem;transition:color .3s}
.info-value:hover{color:var(--zavi-primary)}
.contact-cta-right{width:100%}
@media(min-width:1024px){.contact-cta-right{width:58%}}
.form-box{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:32px;position:relative;overflow:hidden}
@media(min-width:768px){.form-box{padding:48px}}
.form-scan-line{position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(to right,transparent,var(--zavi-primary),transparent);animation:scanLine 3s infinite}
@keyframes scanLine{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.form-top-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.1)}
.bar-left{display:flex;align-items:center;gap:8px}
.bar-dot{width:6px;height:6px;border-radius:50%;background:#22C55E;animation:pulse 2s infinite}
.bar-text{font-size:10px;color:#22C55E;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.bar-right{font-size:10px;color:#6B7280;letter-spacing:.2em;text-transform:uppercase}
.form-title{font-family:var(--font-display);font-size:1.25rem;font-weight:700;color:#fff;margin-bottom:32px}
.contact-form{display:flex;flex-direction:column;gap:24px}
.form-row{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:640px){.form-row{grid-template-columns:1fr 1fr}}
.form-group{display:flex;flex-direction:column;gap:8px}
.form-group label{font-size:9px;font-weight:900;letter-spacing:.3em;text-transform:uppercase;color:var(--zavi-primary)}
.form-group input,.form-group select,.form-group textarea{background:rgba(0,0,0,.4);border:none;border-bottom:1px solid rgba(255,255,255,.2);padding:12px 16px;color:#fff;font-family:var(--font-sans);font-size:.875rem;transition:border-color .3s;border-radius:0;-webkit-appearance:none}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-bottom-color:var(--zavi-primary)}
.form-group input::placeholder,.form-group textarea::placeholder{color:#4B5563}
.form-group select{cursor:pointer;color:#9CA3AF}
.form-group textarea{resize:none}
.submit-btn{width:100%;background:#fff;color:var(--zavi-dark);padding:16px;font-weight:900;font-size:12px;text-transform:uppercase;letter-spacing:.2em;border:none;transition:all .3s;display:flex;align-items:center;justify-content:center;gap:8px}
.submit-btn:hover{background:var(--zavi-primary)}
.submit-btn svg{transition:transform .3s}
.submit-btn:hover svg{transform:translateX(4px)}

/* === 14. FOOTER MARQUEE === */
.zavi-footer-marquee{padding:64px 0;overflow:hidden;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1)}
.footer-marquee-row{display:flex;white-space:nowrap;animation:marqueeScroll 25s linear infinite;gap:64px;align-items:center;padding:16px 0}
.footer-marquee-text{font-family:var(--font-display);font-size:clamp(4rem,10vw,8rem);font-weight:900;text-transform:uppercase;color:transparent;-webkit-text-stroke:2px var(--zavi-primary);flex-shrink:0}
.footer-marquee-dot{width:16px;height:16px;border-radius:50%;background:var(--zavi-primary);flex-shrink:0}

/* === 15. FOOTER === */
.zavi-footer{position:relative;overflow:hidden;padding:0}
.footer-grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:50px 50px;opacity:.2;pointer-events:none}
.footer-cta{text-align:center;padding:128px 24px;position:relative;z-index:10}
.footer-cta-label{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--zavi-primary);font-size:10px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;margin-bottom:24px}
.footer-cta-heading{font-family:var(--font-display);font-size:clamp(5rem,12vw,10rem);font-weight:900;text-transform:uppercase;line-height:.85;margin-bottom:32px}
.footer-cta-heading .outline{color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.2)}
.footer-cta-heading .gold{color:var(--zavi-primary)}
.footer-cta-btn{display:inline-flex;align-items:center;gap:12px;padding:20px 48px;background:var(--zavi-primary);color:#000;font-weight:900;font-size:12px;text-transform:uppercase;letter-spacing:.2em;border-radius:2px;transition:all .3s;box-shadow:0 10px 15px -3px rgba(0,0,0,.3)}
.footer-cta-btn:hover{background:#fff}
.footer-cta-btn svg{transition:transform .3s}
.footer-cta-btn:hover svg{transform:translateX(4px)}
.footer-columns{max-width:1400px;margin:0 auto;padding:64px 24px;border-top:1px solid rgba(255,255,255,.1);display:grid;grid-template-columns:1fr;gap:48px;position:relative;z-index:10}
@media(min-width:768px){.footer-columns{padding:64px 48px;grid-template-columns:2fr 1fr 1fr 1fr}}
.footer-brand p{color:#6B7280;font-size:.875rem;line-height:1.75;margin-top:16px;max-width:300px}
.footer-brand img{height:80px;width:auto}
.footer-col h4{font-size:10px;font-weight:900;letter-spacing:.3em;text-transform:uppercase;color:var(--zavi-primary);margin-bottom:24px}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.footer-col li a{color:#6B7280;font-size:.875rem;transition:color .3s}
.footer-col li a:hover{color:#fff}
.footer-social{display:flex;gap:16px;margin-top:24px}
.footer-social a{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;color:#6B7280;transition:all .3s}
.footer-social a:hover{border-color:var(--zavi-primary);color:var(--zavi-primary);background:rgba(197,160,89,.1)}
.footer-bottom{max-width:1400px;margin:0 auto;padding:24px;border-top:1px solid rgba(255,255,255,.05);display:flex;flex-direction:column;gap:16px;align-items:center;position:relative;z-index:10}
@media(min-width:768px){.footer-bottom{padding:24px 48px;flex-direction:row;justify-content:space-between}}
.footer-bottom p{color:#4B5563;font-size:12px}
.footer-watermark{font-family:var(--font-display);font-size:10px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.05)}

/* === 16. FLOATING WHATSAPP === */
.floating-whatsapp{position:fixed;bottom:32px;right:32px;z-index:50;display:flex;align-items:center;gap:12px}
.floating-whatsapp .tooltip{background:rgba(15,23,42,.9);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:12px 16px;color:#fff;font-size:12px;font-weight:600;opacity:0;transform:translateX(10px);transition:all .3s;pointer-events:none;white-space:nowrap}
.floating-whatsapp:hover .tooltip{opacity:1;transform:translateX(0)}
.floating-whatsapp .wa-btn{width:56px;height:56px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 10px 15px -3px rgba(0,0,0,.3);transition:transform .3s;animation:waFloat 3s ease-in-out infinite}
.floating-whatsapp .wa-btn:hover{transform:scale(1.1)}
@keyframes waFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* === 17. SCROLL ANIMATIONS === */
.animate-on-scroll{opacity:0;transform:translateY(40px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.animate-on-scroll.is-visible{opacity:1;transform:translateY(0)}
.stagger-2{transition-delay:.2s}
.stagger-3{transition-delay:.4s}
.stagger-4{transition-delay:.6s}

/* === 18. PAGE HERO (Interior Pages) === */
.page-hero{position:relative;height:50vh;min-height:350px;overflow:hidden;display:flex;align-items:center;justify-content:center;padding-top:100px}
@media(min-width:768px){.page-hero{height:60vh;min-height:500px;padding-top:0}}
.page-hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.page-hero-bg iframe{position:absolute;top:50%;left:50%;width:177.77vh;height:56.25vw;min-width:100%;min-height:100%;transform:translate(-50%,-50%) scale(1.1);pointer-events:none}
.page-hero-bg .overlay-dark{position:absolute;inset:0;background:rgba(0,0,0,.4);z-index:10}
.page-hero-bg .overlay-gradient{position:absolute;inset:0;background:linear-gradient(to bottom,transparent,rgba(15,23,42,.5),var(--zavi-dark));z-index:20}
.page-hero-content{position:relative;z-index:30;text-align:center;padding:48px 24px;max-width:64rem;margin:0 auto}
@media(min-width:768px){.page-hero-content{margin-top:96px}}
.page-hero-badge{display:inline-flex;align-items:center;gap:12px;padding:6px 16px;border-radius:9999px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);backdrop-filter:blur(12px);margin-bottom:24px;color:var(--zavi-primary);font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.page-hero-badge .pulse{width:6px;height:6px;border-radius:50%;background:var(--zavi-primary);animation:pulse 2s infinite;display:inline-block}
.page-hero-content h1{font-family:var(--font-display);font-size:clamp(3rem,8vw,6rem);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:.85;margin-bottom:24px}
.page-hero-content .subtitle{color:#9CA3AF;font-size:clamp(1rem,2vw,1.125rem);max-width:36rem;margin:0 auto 48px;line-height:1.75;font-weight:300}
.page-hero-content .muted-text{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.3)}
.scroll-indicator{display:flex;flex-direction:column;align-items:center;gap:8px}
.scroll-indicator span{font-size:9px;text-transform:uppercase;letter-spacing:.3em;color:#6B7280;font-weight:700}
.scroll-indicator .bar{width:1px;height:48px;background:rgba(255,255,255,.1);position:relative;overflow:hidden}
.scroll-indicator .bar::after{content:'';position:absolute;top:0;left:0;width:100%;height:50%;background:var(--zavi-primary);animation:scrollBar 1.5s ease-in-out infinite}
@keyframes scrollBar{0%{transform:translateY(0)}50%{transform:translateY(96px)}100%{transform:translateY(0)}}

/* === 19. SERVICES PAGE === */
.services-page-container{max-width:1400px;margin:0 auto;padding:80px 24px 128px;position:relative;z-index:20}
@media(min-width:768px){.services-page-container{padding:80px 48px 128px}}
.services-page-cards{position:relative}
.service-sticky-card{position:sticky;display:flex;flex-direction:column;gap:0;border-radius:24px;overflow:hidden;box-shadow:0 25px 50px -12px rgba(0,0,0,.25);background:#fff;border:1px solid #E5E7EB;margin-bottom:96px}
@media(min-width:1024px){.service-sticky-card{flex-direction:row;margin-bottom:128px}}
.card-content{width:100%;padding:40px;display:flex;flex-direction:column;justify-content:center;position:relative;background:linear-gradient(to bottom right,#fff,#F8FAFC)}
@media(min-width:1024px){.card-content{width:50%;padding:64px}}
.card-content .ghost-icon{position:absolute;top:0;right:0;padding:32px;opacity:.05;color:var(--zavi-dark)}
.card-content .chip{display:inline-block;width:fit-content;padding:4px 12px;border:1px solid rgba(197,160,89,.3);border-radius:9999px;background:rgba(197,160,89,.1);color:var(--zavi-primary);font-family:monospace;font-size:.875rem;margin-bottom:24px}
.card-content h2{font-family:var(--font-display);font-size:clamp(2rem,4vw,3rem);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;color:var(--zavi-dark);margin-bottom:24px}
.card-content .desc{font-size:1.125rem;color:#475569;line-height:1.75;font-weight:300;margin-bottom:40px}
.card-content .features{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:40px}
@media(min-width:640px){.card-content .features{grid-template-columns:1fr 1fr;column-gap:32px}}
.feature-item{display:flex;align-items:center;gap:12px}
.feature-dot{width:6px;height:6px;border-radius:50%;background:var(--zavi-primary);flex-shrink:0;transition:transform .3s}
.feature-item:hover .feature-dot{transform:scale(1.5)}
.feature-item span{color:#334155;font-size:.875rem;font-weight:500;text-transform:uppercase;letter-spacing:.1em}
.card-cta-area{margin-top:auto;padding-top:32px;border-top:1px solid #E5E7EB}
.card-cta{display:inline-flex;align-items:center;gap:16px;padding:12px 24px;background:var(--zavi-dark);color:#fff;border-radius:9999px;font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:.15em;transition:all .3s;box-shadow:0 10px 15px -3px rgba(0,0,0,.1)}
.card-cta:hover{background:var(--zavi-primary);color:var(--zavi-dark)}
.card-cta svg{transition:transform .3s}
.card-cta:hover svg{transform:translateX(4px)}
.card-image{width:100%;position:relative;min-height:300px;overflow:hidden}
@media(min-width:1024px){.card-image{width:50%;min-height:600px}}
.card-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(100%);transition:all 1s;transform:scale(1.05)}
.card-image:hover img{filter:grayscale(0);transform:scale(1)}
.card-image .img-overlay{position:absolute;inset:0;background:linear-gradient(to right,#fff,rgba(255,255,255,.2),transparent);opacity:.8}
@media(min-width:1024px){.card-image .img-overlay{opacity:1}}
.services-features-grid{margin-top:128px;display:grid;grid-template-columns:1fr;gap:32px;border-top:1px solid rgba(255,255,255,.1);padding-top:80px}
@media(min-width:768px){.services-features-grid{grid-template-columns:repeat(3,1fr)}}
.services-feature-card{background:rgba(255,255,255,.05);padding:32px;border-radius:16px;border:1px solid rgba(255,255,255,.1);text-align:center;box-shadow:0 10px 15px -3px rgba(0,0,0,.1);backdrop-filter:blur(4px)}
.services-feature-card svg{color:var(--zavi-primary);margin:0 auto 24px}
.services-feature-card h3{font-size:1.25rem;font-weight:700;color:#fff;text-transform:uppercase;margin-bottom:8px}
.services-feature-card p{color:#9CA3AF;font-size:.875rem}

/* Services page mobile */
@media(max-width:767px){
.services-page-container{padding:40px 16px 40px !important}
.service-sticky-card{margin-bottom:32px !important;border-radius:16px}
.card-content{padding:24px 20px !important}
.card-content h2{font-size:1.5rem !important;margin-bottom:16px !important}
.card-content .desc{font-size:.9rem !important;margin-bottom:20px !important;line-height:1.6}
.card-content .features{gap:10px !important;margin-bottom:20px !important}
.feature-item span{font-size:.75rem !important}
.card-cta-area{padding-top:16px !important}
.card-cta{font-size:9px !important;padding:10px 20px !important}
.card-image{min-height:200px !important}
.card-content .ghost-icon{display:none}
.card-content .chip{font-size:.75rem;margin-bottom:16px}
.services-features-grid{margin-top:32px !important;padding-top:32px !important;gap:16px !important}
.services-feature-card{padding:20px !important}
.services-feature-card svg{width:32px !important;height:32px !important;margin-bottom:12px !important}
.services-feature-card h3{font-size:1rem !important;margin-bottom:4px !important}
.services-feature-card p{font-size:.8rem !important}
}
@media(min-width:768px) and (max-width:1023px){
.service-sticky-card{margin-bottom:48px !important}
.card-content{padding:32px !important}
.card-image{min-height:250px !important}
.services-features-grid{margin-top:48px !important;padding-top:48px !important}
}

/* === 20. PROJECTS PAGE === */
.projects-page-container{max-width:1400px;margin:0 auto;padding:0 24px 128px;position:relative;z-index:20}
@media(min-width:768px){.projects-page-container{padding:0 48px 128px}}
.projects-page-filter{position:sticky;top:128px;z-index:40;margin-bottom:80px;display:flex;justify-content:center}
.filter-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;padding:8px;border-radius:16px;background:#fff;border:1px solid rgba(255,255,255,.2);box-shadow:0 25px 50px -12px rgba(0,0,0,.25);backdrop-filter:blur(20px)}
.filter-icon{padding:0 12px;color:#9CA3AF}
.filter-btn{position:relative;padding:8px 20px;border-radius:12px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.15em;transition:all .3s;color:#6B7280;background:transparent;border:none;font-family:var(--font-sans);cursor:pointer}
.filter-btn:hover{color:#000;background:#F3F4F6}
.filter-btn.active{background:var(--zavi-primary);color:#fff;box-shadow:0 4px 6px -1px rgba(0,0,0,.1)}
.cinematic-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:768px){.cinematic-grid{grid-template-columns:repeat(2,1fr);gap:32px}}
@media(min-width:1024px){.cinematic-grid{grid-template-columns:repeat(12,1fr)}}
.cinematic-card{position:relative;height:400px;border-radius:16px;overflow:hidden;cursor:pointer;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.05);transition:opacity .3s,transform .3s}
@media(min-width:768px){.cinematic-card{height:500px}}
@media(min-width:1024px){.cinematic-card.wide{grid-column:span 8}.cinematic-card.normal{grid-column:span 4}}
.cinematic-card img{width:100%;height:100%;object-fit:cover;transition:transform 1s;opacity:.6}
.cinematic-card:hover img{transform:scale(1.1);opacity:1}
.card-gradient{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,.2),transparent);opacity:.8;transition:opacity .5s}
.cinematic-card:hover .card-gradient{opacity:.6}
.card-info{position:absolute;inset:0;padding:32px;display:flex;flex-direction:column;justify-content:flex-end}
.card-info-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.card-chip{font-size:10px;color:var(--zavi-primary);font-weight:700;letter-spacing:.2em;text-transform:uppercase;border:1px solid rgba(197,160,89,.3);padding:4px 8px;border-radius:4px;backdrop-filter:blur(4px)}
.card-year{font-family:monospace;font-size:12px;color:rgba(255,255,255,.6)}
.card-title{font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2.5rem);font-weight:900;text-transform:uppercase;color:#fff;line-height:1}
.card-hover-info{max-height:0;overflow:hidden;opacity:0;transition:all .5s}
.cinematic-card:hover .card-hover-info{max-height:100px;opacity:1}
.card-location{color:#D1D5DB;font-size:.875rem;display:flex;align-items:center;gap:8px;margin-top:16px;font-weight:300}
.card-location svg{color:var(--zavi-primary)}
.card-view-link{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.15em;color:#fff;border-bottom:1px solid var(--zavi-primary);padding-bottom:4px;margin-top:16px}
.hover-border{position:absolute;inset:0;border:2px solid var(--zavi-primary);opacity:0;transition:opacity .5s;border-radius:16px;pointer-events:none}
.cinematic-card:hover .hover-border{opacity:1}
.projects-page-cta{margin-top:128px;position:relative;border-radius:24px;overflow:hidden;border:1px solid rgba(255,255,255,.05)}
.projects-page-cta .cta-bg{position:absolute;inset:0;background:#111}
.projects-page-cta .cta-radial{position:absolute;inset:0;background:radial-gradient(circle at center,rgba(197,160,89,.1),transparent);opacity:.5}
.projects-page-cta .cta-content{position:relative;z-index:10;padding:80px 32px;text-align:center}
@media(min-width:768px){.projects-page-cta .cta-content{padding:128px 32px}}
.projects-page-cta h2{font-family:var(--font-display);font-size:clamp(2.5rem,6vw,4rem);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;color:#fff;margin-bottom:32px}
.projects-page-cta .gold{color:var(--zavi-primary)}
.projects-page-cta .cta-btn{display:inline-flex;align-items:center;gap:8px;padding:16px 40px;background:var(--zavi-primary);color:#000;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.15em;border-radius:9999px;transition:all .3s}
.projects-page-cta .cta-btn:hover{background:#fff;transform:scale(1.05)}

/* === 21. ABOUT PAGE === */
.section-label{display:inline-flex;align-items:center;gap:8px;color:var(--zavi-primary);font-size:10px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;margin-bottom:20px}
.section-label svg{width:14px;height:14px}

/* Founder */
.about-founder{position:relative;z-index:20;padding:96px 24px;max-width:1400px;margin:0 auto}
@media(min-width:768px){.about-founder{padding:128px 48px}}
.founder-inner{display:flex;flex-direction:column;gap:48px}
@media(min-width:1024px){.founder-inner{flex-direction:row;gap:80px;align-items:center}}
.founder-image{width:100%;position:relative}
@media(min-width:1024px){.founder-image{width:45%}}
.founder-frame{border-radius:24px;overflow:hidden;aspect-ratio:4/3;position:relative;box-shadow:0 25px 50px -12px rgba(0,0,0,.5)}
.founder-frame img{width:100%;height:100%;object-fit:cover;filter:grayscale(60%);transition:filter .8s}
.founder-frame:hover img{filter:grayscale(0)}
.founder-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(15,23,42,.6),transparent)}
.founder-badge{position:absolute;bottom:-20px;left:24px;display:flex;align-items:center;gap:12px;background:rgba(15,23,42,.95);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:16px 20px;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.founder-badge svg{color:var(--zavi-primary);flex-shrink:0}
.founder-badge .badge-title{display:block;font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--zavi-primary)}
.founder-badge .badge-name{display:block;color:#fff;font-family:var(--font-display);font-weight:700;font-size:1rem;margin-top:2px}
.founder-text{width:100%}
@media(min-width:1024px){.founder-text{width:55%}}
.founder-text h2{font-family:var(--font-display);font-size:clamp(2rem,4vw,3.5rem);font-weight:900;text-transform:uppercase;color:#fff;line-height:.9;margin-bottom:12px}
.founder-role{color:var(--zavi-primary);font-size:1rem;font-weight:600;margin-bottom:32px;letter-spacing:.05em}
.founder-text p{color:rgba(255,255,255,.7);font-size:1.05rem;line-height:1.8;margin-bottom:20px}
.founder-stats{display:flex;gap:32px;margin-top:40px;padding-top:32px;border-top:1px solid rgba(255,255,255,.1)}
.stat-item{text-align:center}
.stat-number{display:block;font-family:var(--font-display);font-size:clamp(2rem,4vw,2.5rem);font-weight:900;color:var(--zavi-primary)}
.stat-label{display:block;font-size:.7rem;color:#9CA3AF;text-transform:uppercase;letter-spacing:.15em;margin-top:4px}

/* Pillars */
.about-pillars{position:relative;z-index:20;padding:0 24px 96px;max-width:1400px;margin:0 auto}
@media(min-width:768px){.about-pillars{padding:0 48px 128px}}
.pillars-inner{display:grid;grid-template-columns:1fr;gap:32px}
@media(min-width:768px){.pillars-inner{grid-template-columns:1fr 1fr;gap:48px}}
.pillar-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:24px;padding:40px;position:relative;overflow:hidden;transition:border-color .4s}
.pillar-card:hover{border-color:rgba(197,160,89,.3)}
.pillar-icon{color:var(--zavi-primary);margin-bottom:24px;opacity:.8}
.pillar-label{display:block;font-family:monospace;font-size:.8rem;color:var(--zavi-primary);margin-bottom:16px;letter-spacing:.1em}
.pillar-card h3{font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2rem);font-weight:900;text-transform:uppercase;color:#fff;margin-bottom:20px}
.pillar-card p{color:rgba(255,255,255,.65);font-size:.95rem;line-height:1.8;margin-bottom:24px}
.pillar-values{display:flex;flex-wrap:wrap;gap:8px}
.value-tag{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border:1px solid rgba(197,160,89,.2);border-radius:9999px;font-size:.75rem;color:var(--zavi-primary);font-weight:600;letter-spacing:.05em;background:rgba(197,160,89,.05)}
.value-tag svg{width:12px;height:12px}

/* Team */
.about-team{position:relative;z-index:20;padding:96px 24px;max-width:1400px;margin:0 auto}
@media(min-width:768px){.about-team{padding:96px 48px}}
.team-header{margin-bottom:48px}
.team-header h2{font-family:var(--font-display);font-size:clamp(2.5rem,5vw,4rem);font-weight:900;text-transform:uppercase;color:#fff;line-height:.9}
.team-content{max-width:48rem;margin-bottom:64px}
.team-content p{color:rgba(255,255,255,.7);font-size:1.05rem;line-height:1.8;margin-bottom:20px}
.team-roles{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(min-width:768px){.team-roles{grid-template-columns:repeat(4,1fr);gap:24px}}
.role-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:28px 20px;text-align:center;transition:all .4s}
.role-card:hover{border-color:rgba(197,160,89,.3);transform:translateY(-4px)}
.role-icon{color:var(--zavi-primary);margin-bottom:16px}
.role-card h4{font-family:var(--font-display);font-size:.9rem;font-weight:700;color:#fff;text-transform:uppercase;margin-bottom:8px}
.role-card p{color:#9CA3AF;font-size:.8rem;line-height:1.5}

/* Quote */
.about-quote{position:relative;z-index:20;padding:80px 24px;text-align:center}
@media(min-width:768px){.about-quote{padding:96px 48px}}
.quote-inner{max-width:48rem;margin:0 auto;position:relative}
.quote-mark{font-family:var(--font-display);font-size:clamp(6rem,12vw,10rem);color:var(--zavi-primary);opacity:.15;line-height:1;position:absolute;top:-40px;left:50%;transform:translateX(-50%)}
.quote-inner blockquote{font-family:var(--font-serif);font-style:italic;font-size:clamp(1.5rem,3vw,2.5rem);color:#fff;line-height:1.4;position:relative;z-index:10}
.quote-inner cite{display:block;margin-top:24px;color:var(--zavi-primary);font-size:.875rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-style:normal}

/* About page mobile */
@media(max-width:767px){
.about-founder{padding:48px 16px 64px}
.founder-badge{bottom:-16px;left:16px;padding:12px 16px}
.founder-badge .badge-name{font-size:.875rem}
.founder-stats{gap:16px;flex-wrap:wrap}
.stat-number{font-size:1.75rem}
.about-pillars{padding:0 16px 64px}
.pillar-card{padding:28px 20px}
.about-team{padding:48px 16px}
.team-header h2{font-size:2rem}
.role-card{padding:20px 12px}
.role-card h4{font-size:.75rem}
.role-card p{font-size:.7rem}
.about-quote{padding:48px 16px}
}

/* === 22. CONTACT PAGE === */
.contact-page-body{max-width:1400px;margin:0 auto;padding:80px 24px 128px;position:relative;z-index:20;display:flex;flex-direction:column;gap:64px}
@media(min-width:768px){.contact-page-body{padding:80px 48px 128px}}
@media(min-width:1024px){.contact-page-body{flex-direction:row;gap:96px}}
.contact-page-info{width:100%}
@media(min-width:1024px){.contact-page-info{width:42%}}
.contact-page-info .label{color:var(--zavi-primary);font-weight:700;letter-spacing:.4em;text-transform:uppercase;font-size:12px;margin-bottom:24px;display:block}
.contact-page-info h1{font-family:var(--font-display);font-size:clamp(3rem,6vw,5rem);font-weight:900;line-height:.9;text-transform:uppercase;margin-bottom:48px}
.gradient-gold{background:linear-gradient(to right,var(--zavi-primary),#fff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.info-items{display:flex;flex-direction:column;gap:48px}
.info-item{display:flex;align-items:flex-start;gap:24px}
.icon-box{width:56px;height:56px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;color:var(--zavi-primary);flex-shrink:0;transition:all .3s}
.info-item:hover .icon-box{background:var(--zavi-primary);color:#000}
.info-item .info-label{display:block;font-size:10px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:#6B7280;margin-bottom:8px}
.info-item .info-value{color:#fff;font-family:var(--font-display);font-weight:700;transition:color .3s;display:block}
.info-item .info-value:hover{color:var(--zavi-primary)}
.info-item .info-value.big{font-size:clamp(1.5rem,3vw,2rem)}
.info-item .info-value.medium{font-size:clamp(1rem,2vw,1.5rem)}
.info-item .info-value.normal{font-size:1.5rem}
.bottom-badges{margin-top:80px;padding-top:48px;border-top:1px solid rgba(255,255,255,.1);display:grid;grid-template-columns:1fr 1fr;gap:32px}
.bottom-badge{display:flex;align-items:center;gap:12px;color:#9CA3AF}
.bottom-badge svg{color:var(--zavi-primary)}
.bottom-badge span{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.15em}
.contact-page-form{width:100%}
@media(min-width:1024px){.contact-page-form{width:58%}}
.contact-page-form .form-box{background:rgba(255,255,255,.05);padding:32px;border:1px solid rgba(255,255,255,.1);position:relative;overflow:hidden}
@media(min-width:768px){.contact-page-form .form-box{padding:48px}}
.contact-page-form .top-bar{position:absolute;top:0;left:0;width:128px;height:4px;background:var(--zavi-primary)}
.contact-page-form h2{font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2rem);font-weight:700;color:#fff;margin-bottom:40px;display:flex;align-items:center;gap:16px}
.contact-page-form .number{color:rgba(197,160,89,.4)}
.contact-page-form form{display:flex;flex-direction:column;gap:32px}
.contact-page-form .form-row{display:grid;grid-template-columns:1fr;gap:32px}
@media(min-width:768px){.contact-page-form .form-row{grid-template-columns:1fr 1fr}}
.contact-page-form .form-group{display:flex;flex-direction:column;gap:8px}
.contact-page-form label{font-size:9px;font-weight:900;letter-spacing:.3em;text-transform:uppercase;color:var(--zavi-primary)}
.contact-page-form input,.contact-page-form select,.contact-page-form textarea{width:100%;background:rgba(0,0,0,.4);border:none;border-bottom:1px solid rgba(255,255,255,.2);padding:16px;color:#fff;font-family:var(--font-sans);font-size:.875rem;transition:border-color .3s;border-radius:0;-webkit-appearance:none}
.contact-page-form input:focus,.contact-page-form select:focus,.contact-page-form textarea:focus{outline:none;border-bottom-color:var(--zavi-primary)}
.contact-page-form input::placeholder,.contact-page-form textarea::placeholder{color:#4B5563}
.contact-page-form select{cursor:pointer;color:#9CA3AF}
.contact-page-form textarea{resize:none}
.contact-page-form .submit-btn{width:100%;background:#fff;color:var(--zavi-dark);padding:24px;font-weight:900;font-size:12px;text-transform:uppercase;letter-spacing:.4em;border:none;transition:all .3s;display:flex;align-items:center;justify-content:center;gap:16px}
.contact-page-form .submit-btn:hover{background:var(--zavi-primary)}
.contact-page-form .submit-btn svg{transition:transform .3s}
.contact-page-form .submit-btn:hover svg{transform:translateX(8px)}


/* === 23. HOMEPAGE MARQUEE (front-page specific classes) === */
.marquee-row-1,.marquee-row-2{display:flex;overflow:hidden;padding:16px 0;width:100%}
.marquee-track{display:flex;white-space:nowrap;animation:marqueeScroll 30s linear infinite;gap:0;align-items:center;width:max-content;will-change:transform}
.marquee-row-2 .marquee-track{animation-direction:reverse}
.marquee-item{display:flex;align-items:center;gap:32px;padding:0 32px;flex-shrink:0}
.marquee-text-solid{font-family:var(--font-display);font-size:clamp(2.5rem,5vw,5rem);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;color:#fff;flex-shrink:0;white-space:nowrap}
.marquee-text-outline{font-family:var(--font-display);font-size:clamp(2.5rem,5vw,5rem);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.2);flex-shrink:0;white-space:nowrap}
.marquee-text-serif{font-family:var(--font-serif);font-style:italic;font-weight:400;font-size:clamp(1.5rem,3vw,3rem);color:var(--zavi-primary);letter-spacing:.05em;flex-shrink:0;white-space:nowrap}
.marquee-zap{color:var(--zavi-primary);flex-shrink:0}
.marquee-dot{width:8px;height:8px;border-radius:50%;background:var(--zavi-primary);flex-shrink:0}
.marquee-grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:50px 50px;opacity:.2;pointer-events:none}

/* === 24. (removed duplicate - using section 10 styles) === */

/* === 25. HOMEPAGE ABOUT (front-page specific) === */
.about-watermark{position:absolute;top:50%;right:0;font-family:var(--font-display);font-size:clamp(10rem,25vw,20rem);font-weight:900;color:rgba(255,255,255,.02);line-height:.8;pointer-events:none;transform:translateY(-50%);text-transform:uppercase}
.about-grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:50px 50px;opacity:.2;pointer-events:none}
.about-grid{display:flex;flex-direction:column;gap:64px}
@media(min-width:1024px){.about-grid{flex-direction:row;gap:96px}}
.about-left{width:100%}
@media(min-width:1024px){.about-left{width:50%}}
.about-image-wrapper{position:relative}
.about-image{border-radius:24px;overflow:hidden;box-shadow:0 25px 50px -12px rgba(0,0,0,.5);aspect-ratio:4/3}
.about-image img{width:100%;height:100%;object-fit:cover;filter:grayscale(100%);transition:filter 1s}
.about-image:hover img{filter:grayscale(0)}
.about-image .color-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(15,23,42,.8),transparent)}
.about-image-border{display:none}
@media(min-width:1024px){.about-image-border{display:block;position:absolute;inset:-12px;border:1px solid rgba(197,160,89,.2);border-radius:28px;z-index:-1}}
.about-floating-card{display:none}
@media(min-width:1024px){.about-floating-card{display:flex;flex-direction:column;gap:12px;position:absolute;bottom:-32px;right:-32px;background:rgba(15,23,42,.9);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:24px;box-shadow:0 25px 50px -12px rgba(0,0,0,.5);max-width:220px}}
.about-floating-card svg{color:var(--zavi-primary)}
.about-floating-card h3{font-family:var(--font-display);font-size:1.25rem;font-weight:700;color:#fff;text-transform:uppercase}
.about-floating-card p{font-size:.75rem;color:#6B7280;line-height:1.6}
.about-right{width:100%}
@media(min-width:1024px){.about-right{width:50%}}
.about-label{color:var(--zavi-primary);font-size:10px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;margin-bottom:16px}
.about-title{font-family:var(--font-display);font-size:clamp(3rem,6vw,5rem);font-weight:900;line-height:.9;text-transform:uppercase;margin-bottom:32px}
.about-manifesto{padding:32px;border-left:4px solid var(--zavi-primary);background:rgba(255,255,255,.03);margin-bottom:48px}
.about-manifesto p{color:#9CA3AF;line-height:1.75;margin-bottom:12px}
.about-manifesto .bold{color:#fff;font-weight:700}
.about-stats-row{display:flex;gap:48px;margin-bottom:48px}
.about-stat .number{font-family:var(--font-display);font-size:clamp(2rem,4vw,3rem);font-weight:700;color:#fff;display:block}
.about-stat p{font-size:10px;color:#6B7280;text-transform:uppercase;letter-spacing:.2em;margin-top:8px}
.about-cta a{display:inline-flex;align-items:center;gap:16px;color:var(--zavi-primary);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.2em;transition:gap .3s}
.about-cta a:hover{gap:24px}
.about-cta .arrow-circle{width:32px;height:32px;border-radius:50%;border:1px solid rgba(197,160,89,.3);display:flex;align-items:center;justify-content:center;color:var(--zavi-primary);transition:all .3s}
.about-cta a:hover .arrow-circle{background:var(--zavi-primary);color:#000;border-color:var(--zavi-primary)}

/* === 26. HOMEPAGE TESTIMONIALS (front-page specific) === */
.testimonials-grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(0,0,0,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.05) 1px,transparent 1px);background-size:50px 50px;opacity:.2;pointer-events:none}
.testimonials-watermark{position:absolute;top:50%;right:0;font-family:var(--font-display);font-size:clamp(6rem,15vw,12rem);font-weight:900;color:rgba(0,0,0,.03);line-height:.8;pointer-events:none;transform:translateY(-50%);text-transform:uppercase}
.testimonials-inner .testimonials-header{text-align:center;margin-bottom:64px}
.testimonials-header .label{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--zavi-primary);font-size:10px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;margin-bottom:16px}
.testimonials-header h2{font-family:var(--font-display);font-size:clamp(3rem,6vw,5rem);font-weight:900;line-height:.9;text-transform:uppercase;color:#111}
.testimonials-header .divider{width:48px;height:2px;background:var(--zavi-primary);margin:24px auto 0}
.testimonials-grid{display:grid;grid-template-columns:1fr;gap:32px}
@media(min-width:768px){.testimonials-grid{grid-template-columns:repeat(3,1fr)}}
.testimonial-card{background:#fff;border:1px solid #E5E7EB;border-radius:16px;padding:32px;position:relative;overflow:hidden;transition:all .3s}
.testimonial-card:hover{box-shadow:0 25px 50px -12px rgba(0,0,0,.1);border-color:var(--zavi-primary);transform:translateY(-4px)}
.testimonial-card.elevated{transform:translateY(-8px);box-shadow:0 25px 50px -12px rgba(0,0,0,.15);border-color:rgba(197,160,89,.3)}
.testimonial-card .top-line{position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(to right,var(--zavi-primary),transparent)}
.testimonial-card .quote-icon{color:rgba(197,160,89,.2);margin-bottom:16px}
.testimonial-card .stars{display:flex;gap:4px;margin-bottom:16px;color:var(--zavi-primary)}
.testimonial-card .quote-text{font-style:italic;color:#4B5563;line-height:1.75;margin-bottom:24px;font-size:.875rem}
.testimonial-card .author{display:flex;align-items:center;gap:16px}
.author-avatar{position:relative;width:48px;height:48px;flex-shrink:0}
.author-avatar .glow{position:absolute;inset:-4px;border-radius:50%;background:radial-gradient(circle,rgba(197,160,89,.3),transparent);animation:pulse 3s infinite}
.author-avatar img{width:48px;height:48px;border-radius:50%;object-fit:cover;position:relative;z-index:10}
.author-name{font-weight:700;color:#111;font-size:.875rem}
.author-company{font-size:12px;color:#6B7280}

/* === 27. HOMEPAGE FOOTER (front-page specific) === */
.footer-inner{max-width:1400px;margin:0 auto;padding:0 24px;position:relative;z-index:10}
@media(min-width:768px){.footer-inner{padding:0 48px}}
.footer-cta-header{padding:128px 0;display:flex;flex-direction:column;align-items:center;gap:48px;text-align:center;border-bottom:1px solid rgba(255,255,255,.1)}
@media(min-width:1024px){.footer-cta-header{flex-direction:row;justify-content:space-between;text-align:left}}
.footer-cta-text .line-solid{font-family:var(--font-display);font-size:clamp(5rem,12vw,10rem);font-weight:900;text-transform:uppercase;line-height:.85;color:#fff}
.footer-cta-text .line-outline{font-family:var(--font-display);font-size:clamp(5rem,12vw,10rem);font-weight:900;text-transform:uppercase;line-height:.85;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.2)}
.footer-giant-btn{display:none}
@media(min-width:1024px){.footer-giant-btn{display:flex;align-items:center;justify-content:center;width:160px;height:160px;border-radius:50%;border:1px solid rgba(255,255,255,.2);color:#fff;transition:all .5s;position:relative;flex-shrink:0}}
.footer-giant-btn:hover{background:var(--zavi-primary);color:#000;border-color:var(--zavi-primary);transform:scale(1.1)}
.footer-giant-btn .btn-label{position:absolute;top:-24px;font-size:10px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--zavi-primary)}
.footer-mobile-cta{display:inline-flex;align-items:center;gap:12px;padding:16px 32px;background:var(--zavi-primary);color:#000;font-weight:900;font-size:12px;text-transform:uppercase;letter-spacing:.2em;border-radius:2px;transition:all .3s}
@media(min-width:1024px){.footer-mobile-cta{display:none}}
.footer-mobile-cta:hover{background:#fff}
.footer-content{padding:64px 0;border-bottom:1px solid rgba(255,255,255,.05);display:flex;flex-direction:column;gap:48px}
@media(min-width:768px){.footer-content{flex-direction:row;gap:64px}}
.footer-brand{width:100%}
@media(min-width:768px){.footer-brand{width:40%}}
.brand-logo img{height:80px;width:auto}
.brand-desc{color:#6B7280;font-size:.875rem;line-height:1.75;margin-top:16px;max-width:300px}
.brand-contacts{margin-top:24px;display:flex;flex-direction:column;gap:16px}
.brand-contact-item{display:flex;align-items:center;gap:12px}
.brand-contact-item .icon-circle{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;color:var(--zavi-primary);flex-shrink:0}
.brand-contact-item h4{font-size:10px;color:#6B7280;text-transform:uppercase;letter-spacing:.2em}
.brand-contact-item a,.brand-contact-item p{color:#9CA3AF;font-size:.875rem;transition:color .3s}
.brand-contact-item a:hover{color:var(--zavi-primary)}
.footer-nav{display:flex;flex-wrap:wrap;gap:48px;width:100%}
@media(min-width:768px){.footer-nav{width:60%;justify-content:space-between}}
.footer-nav-col h4{font-size:10px;font-weight:900;letter-spacing:.3em;text-transform:uppercase;color:var(--zavi-primary);margin-bottom:24px}
.footer-nav-col ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.footer-nav-col li a{color:#6B7280;font-size:.875rem;transition:color .3s;display:flex;align-items:center;gap:8px}
.footer-nav-col li a:hover{color:#fff}
.hover-dot{width:0;height:4px;border-radius:50%;background:var(--zavi-primary);transition:width .3s;display:inline-block}
.footer-nav-col li a:hover .hover-dot{width:4px}
.footer-social{display:flex;flex-direction:column;gap:16px}
.footer-social a{display:flex;align-items:center;gap:12px;color:#6B7280;transition:color .3s}
.footer-social a:hover{color:var(--zavi-primary)}
.social-circle{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;transition:all .3s}
.footer-social a:hover .social-circle{border-color:var(--zavi-primary);background:rgba(197,160,89,.1)}
.footer-bottom{padding:24px 0;text-align:center;position:relative;z-index:10}
.footer-bottom p{color:#4B5563;font-size:12px}
.footer-watermark{position:absolute;bottom:0;left:50%;transform:translateX(-50%);z-index:1;pointer-events:none}
.footer-watermark h1{font-family:var(--font-display);font-size:clamp(10rem,25vw,20rem);font-weight:900;color:rgba(255,255,255,.02);text-transform:uppercase;line-height:.8}

/* === 28. FOOTER MARQUEE (front-page specific) === */
.footer-marquee-track{display:flex;white-space:nowrap;animation:marqueeScroll 25s linear infinite;gap:0;align-items:center;padding:16px 0}
.footer-marquee-word{font-family:var(--font-display);font-size:clamp(4rem,10vw,8rem);font-weight:900;text-transform:uppercase;color:transparent;-webkit-text-stroke:2px var(--zavi-primary);flex-shrink:0;padding:0 16px}
.footer-marquee-dot{width:16px;height:16px;border-radius:50%;background:var(--zavi-primary);flex-shrink:0;margin:0 16px}

/* === 29. FLOATING WHATSAPP (front-page specific) === */
.floating-whatsapp a{display:flex;align-items:center;gap:12px}
.floating-whatsapp svg{flex-shrink:0}
.floating-whatsapp .tooltip{background:rgba(15,23,42,.9);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:12px 16px;color:#fff;font-size:12px;font-weight:600;opacity:0;transform:translateX(10px);transition:all .3s;pointer-events:none;white-space:nowrap}
.floating-whatsapp:hover .tooltip{opacity:1;transform:translateX(0)}
.floating-whatsapp a svg:first-child{width:32px;height:32px;padding:12px;box-sizing:content-box;border-radius:50%;background:#25D366;color:#fff;box-shadow:0 10px 15px -3px rgba(0,0,0,.3);animation:waFloat 3s ease-in-out infinite}