/* ===== RESET & BASE ===== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --cyan:#ec4899;
  --cyan-light:#f472b6;
  --cyan-dark:#db2777;
  --cyan-glow:rgba(236,72,153,.45);
  --pink:#ec4899;
  --pink-light:#f472b6;
  --pink-glow:rgba(236,72,153,.5);
  --blue:#3b82f6;
  --indigo:#6366f1;
  --violet:#8b5cf6;
  --bg-dark:#030712;
  --bg-card:rgba(255,255,255,.02);
  --bg-card-hover:rgba(255,255,255,.05);
  --bg-glass:rgba(255,255,255,.03);
  --text:#f1f5f9;
  --text-muted:rgba(255,255,255,.55);
  --text-dim:rgba(255,255,255,.3);
  --gradient:linear-gradient(135deg,#ec4899 0%,#d946ef 48%,#8b5cf6 100%);
  --gradient-hot:linear-gradient(135deg,#f472b6 0%,#ec4899 50%,#d946ef 100%);
  --gradient-cold:linear-gradient(135deg,#8b5cf6 0%,#d946ef 50%,#ec4899 100%);
  --gradient-subtle:linear-gradient(135deg,rgba(236,72,153,.18) 0%,rgba(139,92,246,.12) 100%);
  --border:rgba(255,255,255,.06);
  --border-active:rgba(236,72,153,.35);
  --radius:20px;
  --radius-sm:12px;
  --transition:0.45s cubic-bezier(.4,0,.2,1);
  --ease-out-expo:cubic-bezier(0.16,1,0.3,1);
  --ease-spring:cubic-bezier(0.34,1.56,0.64,1);
  --ease-elastic:cubic-bezier(0.68,-0.55,0.265,1.55);
}
html{scroll-behavior:smooth;font-size:16px}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--bg-dark);
  color:var(--text);
  overflow-x:hidden;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
::selection{background:rgba(236,72,153,.3);color:#fff}
a{text-decoration:none;color:inherit}
ul{list-style:none}
img{max-width:100%;display:block}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--pink);border-radius:3px}

/* ===== LOADER ===== */
.loader{
  position:fixed;inset:0;z-index:99999;
  background:
    radial-gradient(ellipse 100% 80% at 50% 35%, rgba(17, 17, 24, 0.97) 0%, #030712 55%),
    #030712;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2rem;
  transition:opacity .75s var(--ease-out-expo),visibility .75s,transform .75s var(--ease-out-expo);
}
.loader::before{
  content:'';
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(236,72,153,.03) 2px,
    rgba(236,72,153,.03) 3px
  );
  pointer-events:none;
  opacity:.6;
  animation:loaderScan 6s linear infinite;
}
@keyframes loaderScan{
  to{transform:translateY(4px)}
}
.loader.hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:scale(1.02);
}
.loader-logo{
  font-size:2rem;font-weight:900;letter-spacing:8px;text-transform:uppercase;
  background:var(--gradient);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  animation:loaderPulse 1.5s ease-in-out infinite;
}
@keyframes loaderPulse{0%,100%{opacity:.5;transform:scale(.98)}50%{opacity:1;transform:scale(1)}}
.loader-bar{
  width:220px;height:3px;background:rgba(255,255,255,.07);border-radius:2px;overflow:hidden;
  box-shadow:inset 0 0 12px rgba(0,0,0,.4);
}
.loader-bar-inner{
  height:100%;width:0%;
  background:linear-gradient(90deg,#ec4899,#d946ef,#8b5cf6,#f472b6);
  background-size:200% 100%;
  border-radius:2px;
  animation:loaderFill 1.35s var(--ease-out-expo) forwards,loaderBarShine 1.8s ease-in-out infinite;
}
@keyframes loaderFill{to{width:100%}}
@keyframes loaderBarShine{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

/* ===== PAGE TRANSITION ===== */
.page-transition{
  position:fixed;inset:0;z-index:99998;
  background:var(--bg-dark);
  transform:translateY(100%);
  pointer-events:none;
}

/* ===== CUSTOM CURSOR ===== */
.cursor{
  position:fixed;z-index:99997;pointer-events:none;
  mix-blend-mode:difference;
  transition:transform .15s ease-out;
}
.cursor-dot{
  width:8px;height:8px;border-radius:50%;
  background:#fff;
  position:fixed;
  pointer-events:none;z-index:99997;
  transition:transform .1s ease-out;
}
.cursor-ring{
  width:40px;height:40px;
  border:1.5px solid rgba(255,255,255,.4);
  border-radius:50%;
  position:fixed;
  pointer-events:none;z-index:99996;
  transition:all .2s ease-out;
  transform:translate(-50%,-50%);
}
.cursor-ring.hover{
  width:60px;height:60px;
  border-color:var(--pink);
  background:rgba(236,72,153,.06);
}
.cursor-glow{
  position:fixed;
  width:400px;height:400px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(236,72,153,.04) 0%,transparent 70%);
  pointer-events:none;
  z-index:0;
  transform:translate(-50%,-50%);
  transition:left .5s ease-out,top .5s ease-out;
}

/* ===== NAVBAR ===== */
.navbar{
  position:fixed;top:0;left:0;width:100%;
  z-index:1000;
  padding:1.5rem 4rem;
  display:flex;align-items:center;justify-content:space-between;
  transition:all .5s var(--ease-out-expo);
}
.navbar.scrolled{
  padding:1rem 4rem;
  background:rgba(5,5,7,.85);
  backdrop-filter:blur(20px) saturate(1.5);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);
  border-bottom:1px solid var(--border);
}
.nav-logo{
  font-size:1.4rem;font-weight:900;
  letter-spacing:4px;text-transform:uppercase;
  background:var(--gradient);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  position:relative;
}
.nav-links{display:flex;gap:2.5rem;align-items:center}
.navbar__actions{
  display:flex;align-items:center;gap:.75rem;
  flex-shrink:0;
}
/* Language dropdown (navbar + fullscreen menu) */
.lang-dd{position:relative;display:inline-flex;align-items:center;vertical-align:middle}
.lang-dd__btn{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-muted);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:999px;
  padding:.42rem .9rem .42rem 1rem;
  cursor:pointer;font-family:inherit;
  transition:color .25s ease,background .25s ease,border-color .25s ease;
}
.lang-dd__btn:hover{color:var(--text);background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}
.lang-dd__value{min-width:1.75rem;text-align:center}
.lang-dd__chevron{
  flex-shrink:0;
  opacity:.75;
  transition:transform .35s var(--ease-out-expo),opacity .25s ease;
}
.lang-dd.is-open .lang-dd__chevron{transform:rotate(180deg);opacity:1}
.lang-dd__menu{
  position:absolute;top:100%;right:0;margin-top:10px;
  min-width:min(260px,calc(100vw - 2rem));
  padding:.55rem;
  background:rgba(12,12,16,.94);
  backdrop-filter:blur(24px) saturate(1.4);
  -webkit-backdrop-filter:blur(24px) saturate(1.4);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.45),0 0 0 1px rgba(236,72,153,.05) inset;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(8px);
  transition:opacity .3s ease,transform .35s var(--ease-out-expo),visibility .3s;
  z-index:1200;
}
.lang-dd__menu::before{
  content:'';
  position:absolute;top:-12px;right:0;left:0;height:12px;
}
.lang-dd.is-open .lang-dd__menu{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateY(0);
}
.lang-dd__item{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.65rem .9rem;border-radius:9px;
  color:var(--text-muted) !important;
  text-decoration:none !important;
  text-transform:none !important;
  letter-spacing:.2px;
  transition:background .25s ease,color .25s ease;
}
.lang-dd__item::after{display:none !important}
.lang-dd__item:hover{background:rgba(255,255,255,.07);color:var(--text) !important}
.lang-dd__item.is-active{
  background:rgba(236,72,153,.14);
  color:#fff !important;
  box-shadow:0 0 0 1px rgba(236,72,153,.28);
}
.lang-dd__code{
  font-size:.7rem;font-weight:800;letter-spacing:.14em;opacity:.9;min-width:2rem;
}
.lang-dd__name{font-size:.78rem;font-weight:500}
.lang-dd--menu .lang-dd__menu{z-index:5000}
.lang-dd--menu .lang-dd__btn{
  font-size:.65rem;padding:.38rem .85rem .38rem .95rem;
}
.nav-links > a,
.nav-links .nav-link{
  font-size:.8rem;font-weight:500;
  color:var(--text-muted);
  position:relative;
  letter-spacing:1px;
  text-transform:uppercase;
  transition:color var(--transition);
}
.nav-links > a::after,
.nav-links .nav-link::after{
  content:'';position:absolute;bottom:-6px;left:0;
  width:0;height:1.5px;
  background:var(--gradient);
  transition:width .5s var(--ease-out-expo);
}
.nav-links > a:hover,
.nav-links .nav-link:hover{color:var(--text)}
.nav-links > a:hover::after,
.nav-links .nav-link:hover::after,
.nav-links .nav-item--has-sub:hover .nav-link::after,
.nav-links .nav-item--has-sub.is-open .nav-link::after{width:100%}
.nav-links .is-active,
.nav-links .nav-item--has-sub.is-active .nav-link{color:var(--text)}
.nav-links .is-active::after,
.nav-links .nav-item--has-sub.is-active .nav-link::after{width:100%}

/* ===== Navbar dropdown (Video Produksion) ===== */
.nav-item--has-sub{
  position:relative;
  display:flex;align-items:center;
}
.nav-link--parent{
  display:inline-flex;align-items:center;gap:.45rem;
  cursor:pointer;
}
.nav-chevron{
  transition:transform .35s var(--ease-out-expo);
  opacity:.7;
}
.nav-item--has-sub:hover .nav-chevron,
.nav-item--has-sub.is-open .nav-chevron{
  transform:rotate(180deg);
  opacity:1;
}
.nav-dropdown{
  position:absolute;
  top:100%;left:50%;
  transform:translate(-50%,8px);
  min-width:260px;
  margin-top:14px;
  padding:.55rem;
  background:rgba(12,12,16,.92);
  backdrop-filter:blur(24px) saturate(1.4);
  -webkit-backdrop-filter:blur(24px) saturate(1.4);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.45),
             0 0 0 1px rgba(236,72,153,.05) inset;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s ease,transform .35s var(--ease-out-expo),visibility .3s;
  z-index:1100;
}
.nav-dropdown::before{
  content:'';
  position:absolute;
  top:-14px;left:0;right:0;height:14px;
}
.nav-item--has-sub:hover .nav-dropdown,
.nav-item--has-sub:focus-within .nav-dropdown,
.nav-item--has-sub.is-open .nav-dropdown{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translate(-50%,0);
}
.nav-dropdown__item{
  display:flex;align-items:center;gap:.7rem;
  padding:.7rem .9rem;
  border-radius:9px;
  color:var(--text-muted) !important;
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.6px;
  text-transform:none !important;
  text-decoration:none;
  transition:background .25s ease,color .25s ease,transform .35s var(--ease-out-expo);
}
.nav-dropdown__item::after{display:none !important}
.nav-dropdown__bullet{
  width:5px;height:5px;border-radius:50%;
  background:var(--text-dim);
  transition:background .25s ease,transform .35s var(--ease-out-expo);
  flex-shrink:0;
}
.nav-dropdown__item:hover{
  background:rgba(236,72,153,.08);
  color:#fff !important;
  transform:translateX(3px);
}
.nav-dropdown__item:hover .nav-dropdown__bullet{
  background:var(--pink);
  transform:scale(1.4);
  box-shadow:0 0 8px var(--pink-glow);
}

.nav-cta{
  padding:.65rem 1.8rem;
  border-radius:50px;
  background:var(--gradient);
  color:#fff;font-weight:700;font-size:.75rem;
  letter-spacing:1.5px;text-transform:uppercase;
  position:relative;overflow:hidden;
  transition:transform var(--transition),box-shadow var(--transition);
}
.nav-cta::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.2) 0%,transparent 50%);
  opacity:0;transition:opacity var(--transition);
}
.nav-cta:hover{transform:scale(1.05);box-shadow:0 0 40px var(--pink-glow)}
.nav-cta:hover::before{opacity:1}

/* Hamburger */
.hamburger{display:none;flex-direction:column;gap:6px;cursor:pointer;z-index:1001}
.hamburger span{width:28px;height:1.5px;background:var(--text);transition:var(--transition);transform-origin:center}
.hamburger.active span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.hamburger.active span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.active span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ===== HERO ===== */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 18% 25%,rgba(236,72,153,.22) 0%,transparent 52%),
    radial-gradient(ellipse at 82% 72%,rgba(139,92,246,.14) 0%,transparent 48%),
    radial-gradient(ellipse at 50% 48%,rgba(217,70,239,.08) 0%,transparent 58%);
  z-index:-1;
}
.hero-shapes{
  position:absolute;inset:0;
  pointer-events:none;
  z-index:0;
}
.shape{
  position:absolute;border-radius:50%;
  filter:blur(100px);opacity:.35;
}
.shape-1{width:500px;height:500px;top:-150px;right:-150px;opacity:.42;background:rgba(236,72,153,.28)}
.shape-2{width:350px;height:350px;bottom:5%;left:0;opacity:.32;background:rgba(217,70,239,.22)}
.shape-3{width:220px;height:220px;top:25%;left:35%;opacity:.22;background:rgba(139,92,246,.2)}
.shape-4{width:420px;height:420px;bottom:-100px;right:10%;opacity:.36;background:rgba(236,72,153,.2)}
.hero-content{
  position:relative;
  text-align:center;
  max-width:980px;
  z-index:2;
}
.hero-badge{
  display:inline-flex;align-items:center;gap:.7rem;
  padding:.6rem 1.3rem;
  background:rgba(236,72,153,.1);
  border:1px solid rgba(236,72,153,.35);
  border-radius:50px;
  font-size:.78rem;font-weight:700;
  text-transform:uppercase;
  letter-spacing:2.2px;
  color:var(--pink-light);
  margin-bottom:2rem;
  box-shadow:0 8px 36px rgba(236,72,153,.18);
}
.hero-badge .dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--pink);
  box-shadow:0 0 14px var(--pink-glow);
  animation:dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.3)}}
.hero-eyebrow{
  font-size:.9rem;font-weight:600;
  letter-spacing:3.5px;
  text-transform:uppercase;
  color:var(--text-dim);
  margin-bottom:1rem;
  background:linear-gradient(90deg,var(--text-dim),var(--pink-light),var(--text-dim));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  background-size:200% auto;
  animation:shimmerText 4s linear infinite;
}
@keyframes shimmerText{
  to{background-position:200% center}
}
.hero h1{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:clamp(2.6rem,5.6vw,4.8rem);
  font-weight:900;
  line-height:1.08;
  letter-spacing:-2px;
  margin-bottom:1.5rem;
}
.hero h1 .typing-text{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-style:normal;
  font-weight:900;
  letter-spacing:-2px;
}
.hero h1 .line{
  display:block;
  overflow:hidden;
}
.hero h1 .line-inner{
  display:block;
  transform:translateY(110%);
  animation:lineReveal .9s var(--ease-out-expo) forwards;
}
.hero h1 .line-inner:nth-child(1){animation-delay:.3s}
.hero h1 .line-inner:nth-child(2){animation-delay:.5s}
@keyframes lineReveal{to{transform:translateY(0)}}
.hero h1 .highlight{
  background:linear-gradient(95deg,#fff 0%,#f9c8e0 25%,#ec4899 55%,#a855f7 85%,#fff 100%);
  background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  position:relative;
  animation:heroHighlightShift 9s ease-in-out infinite;
  text-shadow:0 0 60px rgba(236,72,153,.15);
}
@keyframes heroHighlightShift{
  0%,100%{background-position:0% center}
  50%{background-position:100% center}
}
.hero h1 .stroke-text{
  -webkit-text-stroke:2px var(--pink);
  -webkit-text-fill-color:transparent;
  background:none;
}
.hero p{
  font-size:clamp(.78rem,.95vw,.95rem);
  color:var(--text-muted);
  max-width:none;
  margin:0 auto 2.5rem;
  line-height:1.6;
  font-weight:400;
  letter-spacing:.3px;
  white-space:nowrap;
  opacity:0;
  transform:translateY(14px);
  animation:heroPReveal 1s var(--ease-out-expo) .8s forwards;
}
.hero p.hero-tagline{
  background:linear-gradient(90deg,
    rgba(255,255,255,.35) 0%,
    rgba(255,255,255,.85) 30%,
    var(--pink-light) 50%,
    rgba(255,255,255,.85) 70%,
    rgba(255,255,255,.35) 100%);
  background-size:220% auto;
  background-position:-110% center;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  animation:heroPReveal 1s var(--ease-out-expo) .8s forwards,
            heroPShimmer 7s linear 1.8s infinite;
}
@keyframes heroPReveal{
  to{opacity:1;transform:translateY(0)}
}
@keyframes heroPShimmer{
  0%{background-position:-110% center}
  60%{background-position:110% center}
  100%{background-position:110% center}
}
@media(max-width:900px){
  .hero p{
    white-space:normal;
    font-size:.88rem;
    max-width:560px;
  }
}
.hero-buttons{
  display:flex;gap:1.2rem;
  justify-content:center;
  flex-wrap:wrap;
  opacity:0;
  transform:translateY(16px);
  animation:heroPReveal 1s var(--ease-out-expo) 1.1s forwards;
}

/* ===== GLASS / FROSTED HERO BUTTONS — compact + special ===== */
.btn-glass{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.7rem 1.35rem;
  border-radius:50px;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#fff;
  background:rgba(255,255,255,.035);
  backdrop-filter:blur(20px) saturate(1.6);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
  border:1px solid rgba(255,255,255,.1);
  overflow:hidden;
  isolation:isolate;
  cursor:pointer;
  transition:transform .55s var(--ease-out-expo),
             border-color .4s ease,
             box-shadow .5s ease,
             background .4s ease;
}
.btn-glass::after{
  content:'';
  position:absolute;top:0;left:-120%;
  width:60%;height:100%;
  background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,.22) 50%,transparent 100%);
  transition:left .85s var(--ease-out-expo);
  pointer-events:none;
}
.btn-glass:hover{
  transform:translateY(-2px);
  border-color:rgba(236,72,153,.55);
  background:rgba(255,255,255,.06);
  box-shadow:0 12px 36px rgba(236,72,153,.22);
}
.btn-glass:hover::after{left:140%}

/* Live status dot */
.btn-glass__dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--pink);
  box-shadow:0 0 10px var(--pink-glow);
  animation:dotPulse 1.8s ease-in-out infinite;
  flex-shrink:0;
}

/* Label split — rolls up on hover */
.btn-glass__label{
  position:relative;
  display:inline-block;
  overflow:hidden;
  height:1em;
  line-height:1;
}
.btn-glass__label > span{
  display:block;
  transition:transform .5s var(--ease-out-expo);
}
.btn-glass__label > span + span{
  position:absolute;
  top:100%;left:0;
  white-space:nowrap;
  color:var(--pink-light);
}
.btn-glass:hover .btn-glass__label > span{
  transform:translateY(-100%);
}

/* Icon bubble (primary) */
.btn-glass__icon{
  display:inline-flex;
  align-items:center;justify-content:center;
  width:22px;height:22px;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  transition:transform .4s var(--ease-spring),background .35s ease,color .35s ease;
  flex-shrink:0;
}
.btn-glass__icon svg{width:9px;height:9px}
.btn-glass:hover .btn-glass__icon{
  transform:scale(1.1) rotate(8deg);
  background:#fff;
  color:var(--pink);
}

/* Arrow (secondary) */
.btn-glass__arrow{
  display:inline-flex;
  transition:transform .4s var(--ease-out-expo);
  flex-shrink:0;
}
.btn-glass__arrow svg{width:12px;height:12px}
.btn-glass:hover .btn-glass__arrow{transform:translateX(4px)}

/* ===== PRIMARY: rotating conic halo (special effect) ===== */
.btn-glass--primary{
  background:linear-gradient(135deg,rgba(236,72,153,.22),rgba(217,70,239,.14));
  border-color:transparent;
  box-shadow:0 0 25px rgba(236,72,153,.2),
             0 8px 25px rgba(0,0,0,.25);
}
.btn-glass--primary::before{
  content:'';
  position:absolute;inset:-1px;
  border-radius:inherit;
  padding:1px;
  background:conic-gradient(from 0deg,
    transparent 0%,
    rgba(236,72,153,.95) 12%,
    rgba(217,70,239,.85) 22%,
    rgba(139,92,246,.5) 32%,
    transparent 42%,
    transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  animation:btnHaloSpin 3.5s linear infinite;
  pointer-events:none;
  z-index:1;
}
.btn-glass--primary:hover{
  background:linear-gradient(135deg,rgba(236,72,153,.34),rgba(217,70,239,.22));
  box-shadow:0 0 50px rgba(236,72,153,.45),
             0 14px 35px rgba(236,72,153,.22);
}
.btn-glass--primary:hover::before{
  animation-duration:1.5s;
}
@keyframes btnHaloSpin{
  to{transform:rotate(360deg)}
}
.btn-outline{
  background:transparent;
  border:1.5px solid rgba(255,255,255,.1);
  color:var(--text);
  backdrop-filter:blur(10px);
}
.btn-outline:hover{
  border-color:var(--pink);color:var(--pink-light);
  box-shadow:0 0 34px rgba(236,72,153,.2);
}

/* Magnetic button effect via JS */
.btn-magnetic{transition:transform .3s var(--ease-spring)}

/* Scroll indicator */
.scroll-indicator{
  position:absolute;bottom:3rem;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.8rem;
}
.scroll-indicator span{
  font-size:.65rem;color:var(--text-dim);
  text-transform:uppercase;letter-spacing:3px;
  font-weight:500;
}
.scroll-mouse{
  width:22px;height:36px;
  border:1.5px solid rgba(255,255,255,.2);
  border-radius:11px;
  position:relative;
}
.scroll-mouse::after{
  content:'';position:absolute;
  top:6px;left:50%;transform:translateX(-50%);
  width:3px;height:8px;border-radius:2px;
  background:var(--gradient);
  animation:scrollMouse 2s ease-in-out infinite;
  box-shadow:0 0 12px rgba(236,72,153,.5);
}
@keyframes scrollMouse{
  0%{transform:translateX(-50%) translateY(0);opacity:1}
  100%{transform:translateX(-50%) translateY(14px);opacity:0}
}

/* ===== SECTION COMMON ===== */
section{padding:8rem 4rem;position:relative;z-index:2}
.section-header{text-align:center;margin-bottom:5rem}
.section-label{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.7rem;font-weight:700;
  text-transform:uppercase;letter-spacing:4px;
  color:var(--pink);
  margin-bottom:1rem;
}
.section-label::before,.section-label::after{
  content:'';width:30px;height:1px;background:var(--pink);opacity:.4;
}
.section-title{
  font-family:'Fraunces','Times New Roman',Georgia,serif;
  font-variation-settings:'opsz' 144, 'SOFT' 30;
  font-size:clamp(2.2rem,4.5vw,3.8rem);
  font-weight:380;
  letter-spacing:-1.8px;
  margin-bottom:1.2rem;
  line-height:1.05;
}
.section-title .gradient-text,
.section-title em{
  font-style:italic;
  font-weight:300;
  font-variation-settings:'opsz' 144, 'SOFT' 100;
}
.section-title .gradient-text{
  background:var(--gradient);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
.section-desc{
  color:var(--text-muted);
  max-width:520px;margin:0 auto;
  font-size:1rem;
  line-height:1.8;
}

/* ===== MARQUEE ===== */
.marquee-section{
  padding:2rem 0;overflow:hidden;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  position:relative;z-index:2;
}
.marquee-track{
  display:flex;gap:3rem;
  animation:marquee 30s linear infinite;
  width:max-content;
}
.marquee-track:hover{animation-play-state:paused}
.marquee-item{
  font-size:clamp(2rem,5vw,4rem);
  font-weight:900;
  white-space:nowrap;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.08);
  letter-spacing:-1px;
  display:flex;align-items:center;gap:2rem;
  transition:all .5s;
}
.marquee-item:hover{
  -webkit-text-stroke-color:var(--pink);
}
.marquee-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--pink);opacity:.4;
  flex-shrink:0;
}
@keyframes marquee{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

/* ===== STATS BAR ===== */
.stats-bar{
  display:flex;justify-content:center;gap:5rem;flex-wrap:wrap;
  padding:5rem 4rem;
  position:relative;z-index:2;
}
.stat{text-align:center;position:relative}
.stat::after{
  content:'';position:absolute;top:50%;right:-2.5rem;
  width:1px;height:40px;transform:translateY(-50%);
  background:var(--border);
}
.stat:last-child::after{display:none}
.stat-number{
  font-size:3.5rem;font-weight:900;
  background:var(--gradient);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  line-height:1;
}
.stat-label{
  font-size:.75rem;color:var(--text-dim);margin-top:.6rem;
  text-transform:uppercase;letter-spacing:2px;font-weight:500;
}

/* ===== SERVICES ===== */
#services{background:transparent}
.services-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
  max-width:1200px;margin:0 auto;
}
.service-card{
  background:linear-gradient(145deg,rgba(255,255,255,.02),rgba(255,255,255,.015));
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:2.5rem;
  transition:all .5s var(--ease-out-expo);
  position:relative;
  overflow:hidden;
  backdrop-filter:blur(12px);
}
.service-card::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(236,72,153,.15) 0%,rgba(217,70,239,.1) 100%);
  opacity:0;transition:opacity .5s;
  z-index:0;
}
.service-card::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at var(--card-x,50%) var(--card-y,50%),rgba(236,72,153,.08) 0%,transparent 60%);
  opacity:0;transition:opacity .4s;
  z-index:0;
}
.service-card:hover{
  transform:translateY(-12px);
  border-color:rgba(236,72,153,.25);
  box-shadow:0 40px 100px rgba(0,0,0,.4),0 0 50px rgba(236,72,153,.1);
}
.service-card:hover::before{opacity:1}
.service-card:hover::after{opacity:1}
.service-card>*{position:relative;z-index:1}
.service-icon{
  width:60px;height:60px;
  border-radius:var(--radius-sm);
  background:linear-gradient(135deg,rgba(236,72,153,.12),rgba(217,70,239,.08));
  border:1px solid rgba(236,72,153,.18);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:2rem;
  transition:all .5s var(--ease-spring);
  position:relative;
}
.service-card:hover .service-icon{
  background:var(--gradient);
  box-shadow:0 8px 35px rgba(236,72,153,.3);
  transform:scale(1.1) rotate(3deg);
  border-color:transparent;
}
.service-icon svg{width:26px;height:26px;stroke:var(--pink);stroke-width:1.5;fill:none;transition:stroke .3s}
.service-card:hover .service-icon svg{stroke:#fff}
.service-card h3{
  font-size:1.35rem;font-weight:800;margin-bottom:.8rem;
  letter-spacing:-.4px;
  transition:color .3s;
}
.service-card:hover h3{color:var(--pink-light)}
.service-card p,
.service-card .service-body{color:var(--text-muted);font-size:.93rem;line-height:1.85;transition:color .3s}
.service-card:hover p,
.service-card:hover .service-body{color:var(--text)}
.service-card .service-link{
  display:inline-flex;align-items:center;gap:.5rem;
  margin-top:1.8rem;
  font-size:.78rem;font-weight:700;
  text-transform:uppercase;letter-spacing:1.8px;
  color:var(--pink);
  opacity:0;transform:translateY(15px);
  transition:all .5s var(--ease-out-expo);
  position:relative;
}
.service-card:hover .service-link{opacity:1;transform:translateY(0)}
.service-card .service-link::after{
  content:'';position:absolute;bottom:-2px;left:0;
  width:0;height:2px;background:var(--gradient);
  transition:width .4s var(--ease-out-expo);
}
.service-card:hover .service-link::after{width:100%}

/* ===== SHOWREEL / PORTFOLIO ===== */
#portfolio{background:transparent}
#portfolio .section-title{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-weight:900;
  letter-spacing:-2px;
  line-height:1.08;
}
#portfolio .section-title .gradient-text{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-style:normal;
  font-weight:900;
  letter-spacing:-2px;
}
.portfolio-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:auto;
  gap:1.5rem;
  max-width:1300px;margin:0 auto;
}
.portfolio-item{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  cursor:pointer;
  border:1px solid var(--border);
  transition:border-color .4s;
}
.portfolio-item:hover{border-color:rgba(236,72,153,.2)}
.portfolio-item:nth-child(1){grid-column:span 2;aspect-ratio:21/10}
.portfolio-item:nth-child(2){aspect-ratio:1/1}
.portfolio-item:nth-child(3){aspect-ratio:1/1}
.portfolio-item:nth-child(4){grid-column:span 2;aspect-ratio:21/10}
.portfolio-item:nth-child(5){aspect-ratio:16/10}
.portfolio-item:nth-child(6){aspect-ratio:16/10}
.portfolio-item img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1s var(--ease-out-expo),filter .6s;
  filter:saturate(.85) brightness(.92);
}
.portfolio-item:hover img{transform:scale(1.08);filter:saturate(1.1) brightness(1)}
.portfolio-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(2,2,4,.95) 0%,rgba(2,2,4,.3) 45%,transparent 75%);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:2.8rem;
  opacity:0;
  transform:translateY(20px);
  transition:all .6s var(--ease-out-expo);
}
.portfolio-item:hover .portfolio-overlay{opacity:1;transform:translateY(0)}
.portfolio-overlay .tag{
  display:inline-block;
  padding:.4rem 1rem;
  border-radius:50px;
  font-size:.7rem;font-weight:700;
  background:linear-gradient(135deg,rgba(236,72,153,.2),rgba(217,70,239,.15));
  border:1px solid rgba(236,72,153,.3);
  color:var(--pink-light);
  margin-bottom:.9rem;
  width:fit-content;
  letter-spacing:1.5px;text-transform:uppercase;
  box-shadow:0 4px 15px rgba(236,72,153,.15);
}
.portfolio-overlay h3{
  font-size:1.45rem;font-weight:800;letter-spacing:-.4px;
  color:var(--text);
  transform:translateY(15px);
  transition:transform .5s var(--ease-spring) .1s;
}
.portfolio-item:hover .portfolio-overlay h3{transform:translateY(0)}
.portfolio-overlay p{
  font-size:.9rem;color:var(--text-muted);margin-top:.4rem;
  transform:translateY(15px);
  transition:transform .5s var(--ease-spring) .15s;
}
.portfolio-item:hover .portfolio-overlay p{transform:translateY(0)}

/* Play button overlay */
.play-btn{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) scale(.7);
  width:80px;height:80px;
  border-radius:50%;
  background:rgba(236,72,153,.85);
  backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;
  transition:all .5s var(--ease-spring);
  box-shadow:0 0 40px rgba(236,72,153,.3);
}
.portfolio-item:hover .play-btn{opacity:1;transform:translate(-50%,-50%) scale(1)}
.portfolio-item.has-video{cursor:pointer}
.portfolio-item.has-video .play-btn{opacity:.55;transform:translate(-50%,-50%) scale(.85)}
.portfolio-item.has-video:hover .play-btn{opacity:1;transform:translate(-50%,-50%) scale(1.05)}
.portfolio-item.has-video:focus-visible{outline:2px solid var(--pink);outline-offset:4px}
.play-btn svg{width:22px;height:22px;fill:#fff;margin-left:3px}
.play-btn::before{
  content:'';position:absolute;inset:-8px;
  border:1.5px solid rgba(236,72,153,.3);
  border-radius:50%;
  animation:playPulse 2s ease-out infinite;
}
@keyframes playPulse{
  0%{transform:scale(1);opacity:.6}
  100%{transform:scale(1.4);opacity:0}
}

/* ===== PROCESS ===== */
.process-container{
  max-width:1100px;margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:0;
  position:relative;
}
.process-container::before{
  content:'';position:absolute;
  top:44px;left:10%;right:10%;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--pink),transparent);
  opacity:.15;
}
.process-step{
  text-align:center;padding:2rem;
  position:relative;
}
.step-number{
  width:48px;height:48px;
  border-radius:50%;
  border:1.5px solid rgba(236,72,153,.2);
  background:rgba(236,72,153,.05);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 1.5rem;
  font-size:.85rem;font-weight:800;
  color:var(--pink);
  position:relative;
  transition:all var(--transition);
}
.process-step:hover .step-number{
  background:var(--pink);color:#fff;
  box-shadow:0 0 30px var(--pink-glow);
}
.process-step h3{font-size:1.05rem;font-weight:700;margin-bottom:.6rem;letter-spacing:-.2px}
.process-step p{color:var(--text-muted);font-size:.85rem;line-height:1.7}

/* ===== SHOWREEL CTA ===== */
.showreel-section{
  padding:10rem 4rem;
  text-align:center;
  position:relative;overflow:hidden;z-index:2;
}
.showreel-section::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at center,rgba(236,72,153,.06) 0%,transparent 60%);
}
.showreel-play{
  width:120px;height:120px;
  border-radius:50%;
  border:1.5px solid rgba(236,72,153,.3);
  display:inline-flex;align-items:center;justify-content:center;
  margin-bottom:3rem;
  position:relative;
  cursor:pointer;
  transition:all .5s var(--ease-spring);
}
.showreel-play:hover{
  background:rgba(236,72,153,.1);
  border-color:var(--pink);
  box-shadow:0 0 60px rgba(236,72,153,.2);
  transform:scale(1.05);
}
.showreel-play svg{width:30px;height:30px;fill:var(--pink);margin-left:4px}
.showreel-play::after{
  content:'';position:absolute;inset:-15px;
  border:1px solid rgba(236,72,153,.1);
  border-radius:50%;
  animation:showreelPulse 3s ease-out infinite;
}
@keyframes showreelPulse{
  0%{transform:scale(1);opacity:.5}
  100%{transform:scale(1.3);opacity:0}
}
.showreel-section h2{
  font-size:clamp(1.8rem,3.5vw,2.8rem);
  font-weight:800;letter-spacing:-1px;
  margin-bottom:.8rem;position:relative;
}
.showreel-section p{
  color:var(--text-muted);font-size:1rem;position:relative;
}

/* ===== TESTIMONIALS ===== */
#testimonials{background:transparent}
.testimonials-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
  max-width:1200px;margin:0 auto;
}
.testimonial-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:2.8rem;
  transition:all .5s var(--ease-out-expo);
  backdrop-filter:blur(10px);
  position:relative;overflow:hidden;
}
.testimonial-card::before{
  content:'';position:absolute;inset:0;
  background:var(--gradient-subtle);
  opacity:0;transition:opacity .5s;
}
.testimonial-card:hover{
  border-color:rgba(236,72,153,.12);
  transform:translateY(-5px);
}
.testimonial-card:hover::before{opacity:1}
.testimonial-card>*{position:relative;z-index:1}
.stars{color:var(--pink);font-size:.9rem;margin-bottom:1.2rem;letter-spacing:3px}
.testimonial-card blockquote{
  font-size:.95rem;line-height:1.9;color:var(--text-muted);
  margin-bottom:1.8rem;font-style:italic;
}
.testimonial-card .quote-mark{
  font-size:3rem;line-height:1;color:var(--pink);opacity:.15;
  font-family:Georgia,serif;margin-bottom:.5rem;
}
.testimonial-author{display:flex;align-items:center;gap:1rem}
.testimonial-avatar{
  width:44px;height:44px;border-radius:50%;
  background:var(--gradient);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:1rem;color:#fff;
  flex-shrink:0;
}
.testimonial-info h4{font-size:.9rem;font-weight:700}
.testimonial-info span{font-size:.75rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px}

/* ===== CTA SECTION ===== */
.cta-section{
  text-align:center;
  padding:10rem 4rem;
  position:relative;overflow:hidden;z-index:2;
}
.cta-section::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at center,rgba(236,72,153,.08) 0%,transparent 60%);
}
.cta-section h2{
  font-size:clamp(2.5rem,5.5vw,4.5rem);
  font-weight:900;
  letter-spacing:-2px;
  margin-bottom:1.5rem;
  position:relative;
  line-height:1.08;
}
.cta-section p{
  color:var(--text-muted);
  font-size:1.05rem;
  max-width:480px;margin:0 auto 3rem;
  position:relative;
  line-height:1.8;
}

/* ===== CONTACT ===== */
#contact{background:transparent}
.contact-container{
  max-width:1100px;margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:4rem;
}
.contact-info h3{
  font-size:2rem;font-weight:900;margin-bottom:1rem;
  letter-spacing:-1px;line-height:1.2;
}
.contact-info>p{color:var(--text-muted);margin-bottom:2.5rem;line-height:1.8;font-size:.95rem}
.contact-detail{
  display:flex;align-items:center;gap:1.2rem;
  margin-bottom:1.4rem;
}
.contact-detail-icon{
  width:48px;height:48px;border-radius:var(--radius-sm);
  background:rgba(236,72,153,.06);
  border:1px solid rgba(236,72,153,.1);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  transition:all var(--transition);
}
.contact-detail:hover .contact-detail-icon{
  background:rgba(236,72,153,.12);
  box-shadow:0 0 25px rgba(236,72,153,.1);
}
.contact-detail-icon svg{width:20px;height:20px;stroke:var(--pink);fill:none;stroke-width:1.5}
.contact-detail{color:inherit;text-decoration:none}
a.contact-detail{cursor:pointer}
.contact-detail div{display:flex;flex-direction:column;gap:.15rem}
.contact-detail .detail-label{font-size:.7rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:1.5px;font-weight:600;margin-bottom:.2rem}
.contact-detail .detail-value{font-size:.95rem;color:var(--text-muted);line-height:1.45}
.contact-detail .detail-value--link{
  display:block;
  color:var(--text-muted);
  text-decoration:none;
  transition:color .3s ease,transform .3s ease;
}
.contact-detail .detail-value--link:hover{color:var(--pink-light)}
a.contact-detail:hover .detail-value{color:var(--text)}
a.contact-detail:hover .contact-detail-icon{
  background:rgba(236,72,153,.14);
  box-shadow:0 0 22px rgba(236,72,153,.18);
}

.contact-form{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:3rem;
  backdrop-filter:blur(10px);
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.form-group{margin-bottom:1.3rem}
.form-group label{
  display:block;font-size:.7rem;font-weight:600;
  text-transform:uppercase;letter-spacing:1.5px;
  margin-bottom:.6rem;color:var(--text-dim);
}
.form-group input,.form-group textarea,.form-group select{
  width:100%;padding:1rem 1.3rem;
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  color:var(--text);font-size:.9rem;
  font-family:inherit;
  transition:all var(--transition);
}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--text-dim)}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{
  outline:none;border-color:var(--pink);
  box-shadow:0 0 20px rgba(236,72,153,.08);
  background:rgba(236,72,153,.02);
}
.form-group textarea{resize:vertical;min-height:130px}
.form-group select{cursor:pointer}
.form-group select option{background:var(--bg-dark)}
.btn-submit{width:100%;margin-top:.5rem;justify-content:center}

/* =============================================================
   OWNER CARD — special signature card on contact page
   ============================================================= */
.owner-card-section{
  padding:3.5rem 4rem 1rem;
  max-width:1200px;
  margin:0 auto;
}
.owner-card{
  position:relative;
  display:grid;
  grid-template-columns:280px 1fr;
  gap:3.2rem;
  align-items:center;
  padding:2.8rem 3rem;
  border-radius:24px;
  background:
    linear-gradient(135deg,rgba(236,72,153,.06),rgba(139,92,246,.04) 50%,rgba(255,255,255,.015)),
    rgba(12,12,16,.55);
  border:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(22px) saturate(1.4);
  -webkit-backdrop-filter:blur(22px) saturate(1.4);
  box-shadow:
    0 30px 80px rgba(0,0,0,.45),
    0 0 0 1px rgba(236,72,153,.04) inset;
  overflow:hidden;
  isolation:isolate;
}
.owner-card::before{
  content:'';
  position:absolute;inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg,
    rgba(236,72,153,.4),
    rgba(217,70,239,.18) 30%,
    transparent 55%,
    rgba(139,92,246,.25) 80%,
    rgba(236,72,153,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
  z-index:0;
}

/* decorative glows */
.owner-card__glow{
  position:absolute;
  border-radius:50%;
  filter:blur(60px);
  pointer-events:none;
  z-index:0;
  opacity:.55;
}
.owner-card__glow--1{
  width:340px;height:340px;
  top:-140px;left:-100px;
  background:radial-gradient(circle,rgba(236,72,153,.5),transparent 70%);
  animation:ownerGlow1 9s ease-in-out infinite;
}
.owner-card__glow--2{
  width:280px;height:280px;
  bottom:-120px;right:-80px;
  background:radial-gradient(circle,rgba(139,92,246,.45),transparent 70%);
  animation:ownerGlow2 11s ease-in-out infinite;
}
@keyframes ownerGlow1{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(40px,30px) scale(1.1)}
}
@keyframes ownerGlow2{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-30px,-20px) scale(1.08)}
}

.owner-card__grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:32px 32px;
  pointer-events:none;
  z-index:0;
  mask-image:radial-gradient(ellipse at center,#000 30%,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 80%);
}

/* Photo */
.owner-card__photo-wrap{
  position:relative;
  z-index:1;
  display:flex;align-items:center;justify-content:center;
  width:260px;height:260px;
  margin:0 auto;
}
.owner-card__photo-ring{
  position:absolute;inset:-6px;
  border-radius:50%;
  background:conic-gradient(from 0deg,
    rgba(236,72,153,.95),
    rgba(217,70,239,.7),
    rgba(139,92,246,.6),
    rgba(236,72,153,.4),
    rgba(236,72,153,.95));
  animation:ownerRingSpin 8s linear infinite;
  filter:blur(.5px);
}
.owner-card__photo-ring::after{
  content:'';
  position:absolute;inset:5px;
  border-radius:50%;
  background:rgba(12,12,16,.95);
}
@keyframes ownerRingSpin{
  to{transform:rotate(360deg)}
}
.owner-card__photo-frame{
  position:relative;
  width:240px;height:240px;
  border-radius:50%;
  overflow:hidden;
  z-index:1;
  box-shadow:
    0 20px 60px rgba(236,72,153,.3),
    0 0 0 4px rgba(12,12,16,.95),
    0 0 0 5px rgba(236,72,153,.3);
}
.owner-card__photo{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transition:transform .8s var(--ease-out-expo),filter .6s ease;
  filter:saturate(1.05) contrast(1.02);
}
.owner-card:hover .owner-card__photo{
  transform:scale(1.06);
  filter:saturate(1.15) contrast(1.05);
}
.owner-card__photo-placeholder{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(236,72,153,.18),rgba(139,92,246,.14));
  color:rgba(255,255,255,.35);
}

.owner-card__badge{
  position:absolute;
  bottom:6px;right:6px;
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.35rem .7rem;
  background:rgba(12,12,16,.92);
  border:1px solid rgba(34,197,94,.5);
  border-radius:999px;
  font-size:.6rem;
  font-weight:700;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:#22c55e;
  z-index:2;
  backdrop-filter:blur(6px);
}
.owner-card__badge-dot{
  width:6px;height:6px;border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 8px rgba(34,197,94,.7);
  animation:ownerBadgePulse 1.8s ease-in-out infinite;
}
@keyframes ownerBadgePulse{
  0%,100%{opacity:1}
  50%{opacity:.4}
}

/* Body */
.owner-card__body{
  position:relative;
  z-index:1;
}
.owner-card__eyebrow{
  display:inline-flex;align-items:center;gap:.7rem;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:2.4px;
  text-transform:uppercase;
  color:var(--text-dim);
  margin-bottom:.9rem;
}
.owner-card__eyebrow-line{
  width:32px;height:1px;
  background:linear-gradient(90deg,var(--pink),transparent);
}
.owner-card__name{
  font-family:'Italiana','Cormorant Garamond',Georgia,serif;
  font-size:clamp(2.1rem,4vw,3rem);
  font-weight:400;
  letter-spacing:.5px;
  line-height:1.1;
  margin:0 0 .4rem;
  background:linear-gradient(135deg,#fff 0%,#fff 50%,rgba(236,72,153,.85) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.owner-card__role{
  display:inline-block;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--pink-light);
  margin-bottom:1.4rem;
}
.owner-card__quote{
  position:relative;
  font-family:'Italiana','Cormorant Garamond',Georgia,serif;
  font-style:italic;
  font-size:1.05rem;
  line-height:1.7;
  color:var(--text-muted);
  margin:0 0 2rem;
  padding-left:1.4rem;
  border-left:2px solid rgba(236,72,153,.45);
  max-width:540px;
}
.owner-card__quote-mark{
  font-family:'Italiana',serif;
  font-size:3rem;
  line-height:0;
  color:var(--pink);
  margin-right:.2rem;
  opacity:.7;
  vertical-align:-0.4em;
}

/* Action buttons */
.owner-card__actions{
  display:flex;flex-wrap:wrap;
  gap:.7rem;
}
.owner-card__btn{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.75rem 1.3rem;
  border-radius:50px;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:1.4px;
  text-transform:uppercase;
  text-decoration:none;
  transition:transform .35s var(--ease-out-expo),
             background .3s ease,
             border-color .3s ease,
             box-shadow .4s ease;
  cursor:pointer;
}
.owner-card__btn svg{flex-shrink:0;transition:transform .3s ease}
.owner-card__btn:hover{transform:translateY(-2px)}
.owner-card__btn:hover svg{transform:scale(1.1)}

.owner-card__btn--primary{
  background:linear-gradient(135deg,rgba(236,72,153,.95),rgba(217,70,239,.85));
  color:#fff;
  border:1px solid transparent;
  box-shadow:0 8px 22px rgba(236,72,153,.32);
}
.owner-card__btn--primary:hover{
  box-shadow:0 14px 36px rgba(236,72,153,.5);
}
.owner-card__btn--whatsapp{
  background:linear-gradient(135deg,#25d366,#1faa53);
  color:#fff;
  border:1px solid transparent;
  box-shadow:0 8px 22px rgba(37,211,102,.28);
}
.owner-card__btn--whatsapp:hover{
  box-shadow:0 14px 36px rgba(37,211,102,.45);
}
.owner-card__btn--ghost{
  background:rgba(255,255,255,.04);
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(8px);
}
.owner-card__btn--ghost:hover{
  background:rgba(236,72,153,.08);
  border-color:rgba(236,72,153,.4);
}

/* Responsive owner card */
@media(max-width:900px){
  .owner-card-section{padding:2.5rem 1.5rem .5rem}
  .owner-card{
    grid-template-columns:1fr;
    gap:2rem;
    padding:2.2rem 1.5rem;
    text-align:center;
  }
  .owner-card__photo-wrap{width:200px;height:200px}
  .owner-card__photo-frame{width:184px;height:184px}
  .owner-card__quote{
    padding-left:0;
    border-left:none;
    border-top:2px solid rgba(236,72,153,.4);
    padding-top:1.2rem;
    margin-left:auto;margin-right:auto;
  }
  .owner-card__eyebrow{justify-content:center}
  .owner-card__actions{justify-content:center}
}
@media(max-width:480px){
  .owner-card{padding:1.8rem 1.2rem}
  .owner-card__photo-wrap{width:170px;height:170px}
  .owner-card__photo-frame{width:156px;height:156px}
  .owner-card__btn{padding:.65rem 1.1rem;font-size:.65rem;letter-spacing:1.2px}
}

/* ===== FOOTER ===== */
.footer{
  padding:5rem 4rem 2rem;
  border-top:1px solid var(--border);
  position:relative;z-index:2;
}
.footer-content{
  max-width:1200px;margin:0 auto;
  display:grid;
  grid-template-columns:2fr 1fr 1.4fr;
  gap:4rem;
}
.footer-brand .nav-logo{display:inline-block;margin-bottom:1.2rem}
.footer-brand p{color:var(--text-muted);font-size:.85rem;line-height:1.8;max-width:280px}
.footer-col h4{
  font-size:.7rem;font-weight:700;
  text-transform:uppercase;letter-spacing:2.5px;
  margin-bottom:1.5rem;color:var(--pink);
}
.footer-col a{
  display:block;color:var(--text-muted);
  font-size:.85rem;padding:.35rem 0;
  transition:color var(--transition);
}
.footer-col a:hover{color:var(--text)}
.footer-social{display:flex;gap:.7rem;margin-top:1.8rem}
.footer-social a{
  width:38px;height:38px;border-radius:var(--radius-sm);
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  transition:all var(--transition);
  color:var(--text-muted);
}
.footer-social a:hover{
  background:var(--pink);border-color:var(--pink);
  color:#fff;box-shadow:0 0 25px var(--pink-glow);
}
.footer-bottom{
  max-width:1200px;margin:4rem auto 0;
  padding-top:2rem;
  border-top:1px solid var(--border);
  display:flex;justify-content:space-between;align-items:center;
  font-size:.75rem;color:var(--text-dim);
  letter-spacing:.5px;
}

/* ===== REVEAL ANIMATIONS ===== */
.reveal{
  opacity:0;
  transform:translateY(50px);
  transition:opacity 1s var(--ease-out-expo),transform 1s var(--ease-out-expo);
}
.reveal.active{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:.12s}
.reveal-delay-2{transition-delay:.24s}
.reveal-delay-3{transition-delay:.36s}
.reveal-delay-4{transition-delay:.48s}
.reveal-delay-5{transition-delay:.6s}

/* Scale reveal */
.reveal-scale{
  opacity:0;transform:scale(.92);
  transition:opacity .8s var(--ease-out-expo),transform .8s var(--ease-out-expo);
}
.reveal-scale.active{opacity:1;transform:scale(1)}

/* ===== GLITCH TEXT EFFECT ===== */
.glitch{position:relative;display:inline-block}
.glitch::before,.glitch::after{
  content:attr(data-text);
  position:absolute;top:0;left:0;width:100%;height:100%;
}
.glitch::before{
  left:2px;text-shadow:-2px 0 var(--pink);
  clip:rect(24px,550px,90px,0);
  animation:glitch-1 3s infinite linear alternate-reverse;
}
.glitch::after{
  left:-2px;text-shadow:-2px 0 var(--fuchsia);
  clip:rect(85px,550px,140px,0);
  animation:glitch-2 3s infinite linear alternate-reverse;
}
@keyframes glitch-1{
  0%{clip:rect(20px,9999px,60px,0)}
  10%{clip:rect(70px,9999px,120px,0)}
  20%{clip:rect(10px,9999px,40px,0)}
  30%{clip:rect(50px,9999px,90px,0)}
  40%{clip:rect(30px,9999px,80px,0)}
  50%{clip:rect(60px,9999px,100px,0)}
  60%{clip:rect(15px,9999px,55px,0)}
  70%{clip:rect(40px,9999px,95px,0)}
  80%{clip:rect(25px,9999px,75px,0)}
  90%{clip:rect(45px,9999px,85px,0)}
  100%{clip:rect(35px,9999px,70px,0)}
}
@keyframes glitch-2{
  0%{clip:rect(80px,9999px,130px,0)}
  10%{clip:rect(10px,9999px,50px,0)}
  20%{clip:rect(60px,9999px,110px,0)}
  30%{clip:rect(20px,9999px,70px,0)}
  40%{clip:rect(90px,9999px,140px,0)}
  50%{clip:rect(30px,9999px,80px,0)}
  60%{clip:rect(70px,9999px,120px,0)}
  70%{clip:rect(15px,9999px,65px,0)}
  80%{clip:rect(50px,9999px,100px,0)}
  90%{clip:rect(5px,9999px,45px,0)}
  100%{clip:rect(40px,9999px,90px,0)}
}

/* ===== VIDEO LIGHTBOX ===== */
.lightbox{
  position:fixed;inset:0;z-index:10000;
  background:rgba(0,0,0,.95);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;
  transition:all .5s var(--ease-out-expo);
  backdrop-filter:blur(20px);
}
.lightbox.active{opacity:1;visibility:visible}
.lightbox-close{
  position:absolute;top:2rem;right:2rem;
  width:50px;height:50px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:#fff;font-size:1.2rem;
  transition:all var(--transition);
  background:transparent;
}
.lightbox-close:hover{border-color:var(--pink);color:var(--pink)}

/* =============================================================
   RESPONSIVE — mobile-first cinematic experience
   Breakpoints: 1200 / 1024 / 900 / 768 / 600 / 480 / 380
   ============================================================= */

/* Tablet landscape & below */
@media(max-width:1200px){
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .testimonials-grid{grid-template-columns:repeat(2,1fr)}
  .portfolio-grid{grid-template-columns:repeat(2,1fr)}
  .portfolio-item:nth-child(1){grid-column:span 2}
  .portfolio-item:nth-child(4){grid-column:span 2}
  section{padding:7rem 3rem}
  .navbar{padding:1.25rem 3rem}
  .navbar.scrolled{padding:.9rem 3rem}
}

/* Tablet portrait */
@media(max-width:1024px){
  :root{--radius:18px;--radius-sm:10px}
  .footer-content{grid-template-columns:1fr 1fr}
  .process-container{grid-template-columns:repeat(2,1fr)}
  section{padding:6rem 2.25rem}
  .navbar{padding:1.1rem 2.25rem}
  .navbar.scrolled{padding:.85rem 2.25rem}
  .stats-bar{padding:4rem 2.25rem;gap:3rem}
  .showreel-section{padding:8rem 2.25rem}
  .cta-section{padding:8rem 2.25rem}
  .footer{padding:4rem 2.25rem 2rem}
  .section-header{margin-bottom:4rem}
}

/* Tablet to large phone */
@media(max-width:900px){
  .hero p{
    white-space:normal;
    font-size:.92rem;
    max-width:520px;
    line-height:1.7;
  }
}

/* ===== MOBILE — phones (≤768px) ===== */
@media(max-width:768px){
  html{font-size:15px}

  /* Disable heavy desktop UX */
  .cursor-dot,.cursor-ring,.cursor-glow{display:none!important}
  body{cursor:auto}

  /* Section rhythm */
  section{padding:4.5rem 1.25rem}
  .section-header{margin-bottom:3rem}
  .section-label{font-size:.65rem;letter-spacing:3px}
  .section-label::before,.section-label::after{width:20px}
  .section-title{font-size:clamp(1.9rem,7.5vw,2.6rem);letter-spacing:-1px}
  .section-desc{font-size:.92rem;line-height:1.7;padding:0 .5rem}

  /* Navbar — compact + safe area */
  .navbar{
    padding:.9rem 1.25rem;
    padding-top:max(.9rem,env(safe-area-inset-top));
    padding-left:max(1.25rem,env(safe-area-inset-left));
    padding-right:max(1.25rem,env(safe-area-inset-right));
  }
  .navbar.scrolled{padding:.7rem 1.25rem;padding-top:max(.7rem,env(safe-area-inset-top))}
  .nav-links,.nav-cta{display:none}
  .hamburger{display:flex}
  .nav-logo{font-size:1.1rem;letter-spacing:3px}

  /* Mobile fullscreen menu */
  .nav-links.mobile-open{
    display:flex;flex-direction:column;
    position:fixed;top:0;left:0;width:100%;height:100vh;
    background:rgba(5,5,7,.98);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    align-items:center;justify-content:center;
    gap:2.2rem;z-index:999;
    padding-top:env(safe-area-inset-top);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .nav-links.mobile-open a{font-size:1.4rem;letter-spacing:2px}

  /* HERO — mobile cinema */
  .hero{min-height:100svh;padding:6rem 1.25rem 4rem}
  .hero-content{padding:0 .25rem}
  .hero h1{
    font-size:clamp(2.2rem,9vw,3.4rem);
    letter-spacing:-1.2px;
    line-height:1.05;
  }
  .hero p{
    font-size:.85rem;
    line-height:1.65;
    max-width:480px;
    margin-bottom:2rem;
    letter-spacing:.2px;
  }
  .hero-badge{
    font-size:.7rem;
    padding:.5rem 1rem;
    letter-spacing:1.6px;
    margin-bottom:1.5rem;
  }
  .scroll-indicator{bottom:1.8rem;display:none}
  /* Reduce hero blur shapes for performance */
  .shape-1{width:280px;height:280px;filter:blur(80px)}
  .shape-2{width:200px;height:200px;filter:blur(70px)}
  .shape-3{width:140px;height:140px;filter:blur(60px)}
  .shape-4{width:240px;height:240px;filter:blur(80px)}

  /* Hero buttons — touch friendly */
  .hero-buttons{flex-direction:column;align-items:stretch;width:100%;max-width:340px;margin:0 auto;gap:.85rem}
  .btn-glass{
    width:100%;
    justify-content:center;
    padding:.95rem 1.5rem;
    font-size:.72rem;
    min-height:48px;
  }
  .btn-glass__icon{width:24px;height:24px}
  .btn-glass__icon svg{width:10px;height:10px}
  /* Disable label text-swap on touch (simpler) */
  .btn-glass__label > span + span{display:none}
  /* Slow halo for performance */
  .btn-glass--primary::before{animation-duration:5s}

  /* Marquee */
  .marquee-item{font-size:2rem;gap:1.2rem}
  .marquee-track{gap:1.5rem}

  /* Stats */
  .stats-bar{gap:1.8rem;padding:3rem 1.25rem;flex-direction:row;flex-wrap:wrap}
  .stat{flex:1 1 40%;min-width:130px}
  .stat::after{display:none}
  .stat-number{font-size:2.4rem}
  .stat-label{font-size:.65rem;letter-spacing:1.5px}

  /* Services / Portfolio / Testimonials grids */
  .services-grid,.testimonials-grid{grid-template-columns:1fr;gap:1rem}
  .service-card,.testimonial-card{padding:2rem 1.5rem}
  .service-card h3{font-size:1.2rem}
  .service-card p,.service-card .service-body{font-size:.9rem}

  /* Portfolio */
  .portfolio-grid{grid-template-columns:1fr;gap:1rem}
  .portfolio-item:nth-child(1),
  .portfolio-item:nth-child(4){grid-column:span 1}
  .portfolio-item{aspect-ratio:16/10!important}
  /* On touch, show overlay always (no hover) */
  .portfolio-overlay{
    opacity:1;transform:translateY(0);
    padding:1.4rem;
    background:linear-gradient(to top,rgba(2,2,4,.92) 0%,rgba(2,2,4,.4) 50%,transparent 80%);
  }
  .portfolio-overlay h3{font-size:1.1rem;transform:translateY(0)}
  .portfolio-overlay p{font-size:.8rem;transform:translateY(0)}
  .play-btn{width:60px;height:60px;opacity:1;transform:translate(-50%,-50%) scale(.85)}
  .play-btn svg{width:18px;height:18px}

  /* Process */
  .process-container{grid-template-columns:1fr 1fr;gap:1rem}
  .process-container::before{display:none}
  .process-step{padding:1.5rem .8rem}
  .process-step h3{font-size:.95rem}
  .process-step p{font-size:.8rem;line-height:1.6}
  .step-number{width:42px;height:42px;font-size:.78rem;margin-bottom:1rem}

  /* Showreel CTA */
  .showreel-section{padding:6rem 1.25rem}
  .showreel-play{width:90px;height:90px;margin-bottom:2rem}
  .showreel-play svg{width:24px;height:24px}

  /* CTA section */
  .cta-section{padding:6rem 1.25rem}
  .cta-section h2{font-size:clamp(2rem,8vw,3rem);letter-spacing:-1.2px}
  .cta-section p{font-size:.92rem;padding:0 .5rem}

  /* Contact */
  .contact-container{grid-template-columns:1fr;gap:2.5rem}
  .contact-info h3{font-size:1.6rem}
  .contact-form{padding:2rem 1.5rem}
  .form-row{grid-template-columns:1fr;gap:0}
  .form-group input,.form-group textarea,.form-group select{
    padding:.9rem 1.1rem;
    font-size:16px; /* prevents iOS zoom on focus */
  }

  /* Footer */
  .footer{padding:4rem 1.25rem 2rem}
  .footer-content{grid-template-columns:1fr;gap:2.5rem;text-align:left}
  .footer-bottom{
    flex-direction:column;gap:.6rem;
    text-align:center;
    padding-top:1.5rem;
    margin-top:2.5rem;
  }
  .footer-social{margin-top:1.2rem}
  .footer-brand p{max-width:none}

  /* Disable expensive backdrop-blur on weak devices via prefers-reduced-data */
  .navbar.scrolled,.testimonial-card,.contact-form{
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
  }
}

/* ===== SMALL PHONES (≤480px) ===== */
@media(max-width:480px){
  html{font-size:14.5px}

  section{padding:4rem 1rem}
  .navbar{padding:.85rem 1rem}
  .navbar.scrolled{padding:.65rem 1rem}

  .hero{padding:5rem 1rem 3rem}
  .hero h1{font-size:clamp(2rem,9.5vw,2.8rem)}
  .hero p{font-size:.82rem;margin-bottom:1.8rem}
  .hero-badge{font-size:.65rem;padding:.45rem .9rem;margin-bottom:1.2rem}

  .section-title{font-size:clamp(1.7rem,8vw,2.3rem)}
  .stats-bar{gap:1.4rem;padding:2.5rem 1rem}
  .stat{flex:1 1 45%}
  .stat-number{font-size:2.1rem}

  .services-grid,.portfolio-grid,.testimonials-grid{gap:.85rem}
  .service-card,.testimonial-card{padding:1.75rem 1.25rem}

  .process-container{grid-template-columns:1fr;gap:.5rem}
  .process-step{text-align:center;padding:1.25rem .5rem}

  .marquee-item{font-size:1.6rem;gap:.8rem}

  .footer{padding:3.5rem 1rem 2rem}
  .contact-form{padding:1.75rem 1.25rem}

  .btn-glass{padding:.9rem 1.25rem;font-size:.7rem;letter-spacing:1.6px}

  /* Safe area padding for footer/bottom */
  .footer{padding-bottom:max(2rem,env(safe-area-inset-bottom))}
}

/* ===== TINY PHONES (≤380px) ===== */
@media(max-width:380px){
  html{font-size:14px}
  section{padding:3.5rem .9rem}
  .hero{padding:4.5rem .9rem 3rem}
  .hero h1{font-size:1.9rem}
  .stat{flex:1 1 100%}
  .stat::after{display:none}
  .marquee-item{font-size:1.4rem}
  .nav-logo{font-size:1rem;letter-spacing:2px}
}

/* ===== TOUCH DEVICES ===== */
@media(hover:none) and (pointer:coarse){
  /* Disable cursor entirely on touch */
  body{cursor:auto!important}
  .cursor-dot,.cursor-ring,.cursor-glow{display:none!important}

  /* Show hover states by default for visibility */
  .portfolio-overlay{opacity:1;transform:none}
  .portfolio-overlay h3,.portfolio-overlay p{transform:none}

  /* Tap-friendly minimum sizes */
  .btn-glass,.btn,.nav-cta,.menu-cta,.footer-social a,.lightbox-close{
    min-height:44px;
  }
}

/* ===== MOTION REDUCED ===== */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .btn-glass--primary::before{animation:none}
  .marquee-track{animation:none}
  .hero p.hero-tagline{
    animation:heroPReveal 1s var(--ease-out-expo) .8s forwards;
    background:none;
    -webkit-text-fill-color:var(--text-muted);
    color:var(--text-muted);
  }
}

/* ===== LANDSCAPE PHONES — short height ===== */
@media(max-height:560px) and (orientation:landscape){
  .hero{min-height:100svh;padding:4rem 1.5rem 2rem}
  .hero h1{font-size:clamp(1.6rem,5vw,2.4rem);margin-bottom:.8rem}
  .hero p{margin-bottom:1.2rem;font-size:.82rem}
  .scroll-indicator{display:none}
}