:root{
  --bg:#040917;
  --bg2:#08142e;
  --card:rgba(11,22,50,.82);
  --text:#eef3ff;
  --muted:#aebbd9;
  --line:rgba(255,255,255,.08);
  --violet:#a855f7;
  --blue:#4467ff;
  --green1:#1db954;
  --green2:#58e593;
  --shadow:0 22px 60px rgba(0,0,0,.34);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(circle at 16% 18%, rgba(68,103,255,.18), transparent 24%),
    radial-gradient(circle at 84% 10%, rgba(168,85,247,.18), transparent 24%),
    radial-gradient(circle at 74% 58%, rgba(68,103,255,.12), transparent 28%),
    linear-gradient(180deg,#020611 0%, #05102a 38%, #061233 100%);
  font-family:Inter,Segoe UI,Arial,sans-serif;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.16) .9px, transparent .9px);
  background-size:140px 140px;
  opacity:.28;
}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
.container{width:min(1320px,calc(100% - 32px));margin:0 auto}

.site-header{
  position:sticky; top:0; z-index:90;
  background:rgba(3,8,22,.92);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav{
  min-height:84px;
  display:flex; align-items:center; gap:18px;
}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand-logo-only{display:flex;align-items:center}
.site-logo-only{
  height:62px; width:auto; max-width:180px; object-fit:contain;
  filter:drop-shadow(0 10px 22px rgba(88,110,255,.16));
}
.brand-mark{
  width:58px; height:38px; border-radius:14px; position:relative; overflow:hidden;
  background:linear-gradient(135deg,#5fd1ff,#4467ff 55%,#a855f7);
}
.brand-mark:before,.brand-mark:after{
  content:""; position:absolute; background:#071127; border-radius:16px; transform:skewX(-22deg)
}
.brand-mark:before{width:60px;height:10px;left:-6px;top:8px}
.brand-mark:after{width:42px;height:10px;left:14px;top:21px}

.nav-links{
  display:flex; align-items:center; gap:8px; margin-left:auto;
}
.nav-item{position:relative}
.nav-link,.submenu-toggle{
  appearance:none; border:0; background:none; color:#fff; font:inherit; cursor:pointer;
  padding:12px 14px; border-radius:14px; font-weight:800; font-size:16px; line-height:1.2;
  display:inline-flex; align-items:center; justify-content:center;
}
.nav-link:hover,.submenu-toggle:hover{background:rgba(255,255,255,.05)}

.has-sub::after{
  content:"";
  position:absolute;
  left:0; right:0; top:100%;
  height:18px;
}
.has-sub .submenu{
  position:absolute;
  left:0; top:calc(100% + 8px);
  min-width:270px;
  display:grid;
  grid-template-columns:1fr;
  gap:6px;
  padding:12px;
  background:rgba(7,15,36,.98);
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  box-shadow:var(--shadow);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.has-sub:hover > .submenu,
.has-sub.open > .submenu,
.has-sub:focus-within > .submenu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}
.submenu a{
  padding:12px 14px;
  border-radius:14px;
  color:#dbe6ff;
  font-weight:700;
}
.submenu a:hover{background:rgba(255,255,255,.05)}
.submenu-large{min-width:330px}

.nav-actions{
  display:flex; align-items:center; gap:12px; flex:0 0 auto;
}
.wa-pill,.btn-primary,.btn-secondary,.btn-outline,.live-btn,.shot-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border-radius:999px; font-weight:800; transition:.24s ease;
}
.wa-pill{
  padding:14px 18px;
  background:linear-gradient(135deg,#1db954,#58e593);
  color:#052314;
  box-shadow:0 14px 32px rgba(29,185,84,.26);
  white-space:nowrap;
}
.btn-primary{
  padding:15px 24px;
  background:linear-gradient(90deg,#4467ff,#a855f7);
  color:#fff;
  box-shadow:0 16px 34px rgba(90,82,255,.34);
}
.btn-secondary,.btn-outline,.live-btn,.shot-btn{
  padding:14px 20px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  color:#fff;
}
.wa-pill:hover,.btn-primary:hover,.btn-secondary:hover,.btn-outline:hover,.live-btn:hover,.shot-btn:hover{
  transform:translateY(-2px);
}

.hero{padding:68px 0 38px}
.hero-grid{
  display:grid; grid-template-columns:1.02fr .98fr; gap:30px; align-items:center;
}
.eyebrow{
  display:inline-flex;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:#9db2df;
  font-size:13px;
  font-weight:900;
  letter-spacing:.20em;
  text-transform:uppercase;
}
.hero h1{
  margin:22px 0 18px;
  font-size:clamp(46px,7vw,86px);
  line-height:.95;
  letter-spacing:-.06em;
  max-width:780px;
}
.gradient-text{
  background:linear-gradient(90deg,#8db6ff,#8f72ff,#d16cff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p{
  margin:0;
  max-width:780px;
  font-size:22px;
  line-height:1.65;
  color:var(--muted);
}
.hero-actions{
  display:flex; flex-wrap:wrap; gap:14px; margin-top:28px;
}
.hero-points{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:28px;
}
.hero-point,.glass,.live-card,.shot-card,.process-card,.faq-item,.contact-card,.service-card,.cta-band{
  background:var(--card);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  backdrop-filter:blur(12px);
}
.hero-point{
  padding:16px 18px;
  border-radius:18px;
  color:#d7e4ff;
  font-weight:700;
}
.hero-panel{
  padding:18px;
  border-radius:30px;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:var(--shadow);
  min-height:560px;
}
.hero-mosaic{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  min-height:100%;
}
.hero-col{display:grid;gap:14px}
.hero-tile{
  position:relative;
  overflow:hidden;
  border-radius:22px;
  background:linear-gradient(145deg,#0e1737,#091126);
  border:1px solid rgba(255,255,255,.08);
  min-height:250px;
}
.hero-tile img{width:100%; height:100%; object-fit:cover}
.hero-tile::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(4,10,26,0) 30%, rgba(4,10,26,.78) 100%);
}
.hero-label{
  position:absolute; left:14px; bottom:14px; z-index:2;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(7,13,30,.80);
  border:1px solid rgba(255,255,255,.08);
  font-size:12px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.section{padding:34px 0}
.section-head{margin-bottom:22px}
.section-kicker{
  display:inline-flex;
  padding:11px 15px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:#9db2df;
  font-size:13px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.section h2{
  font-size:clamp(34px,4.6vw,60px);
  line-height:1.02;
  letter-spacing:-.05em;
  margin:16px 0 12px;
}
.section p.lead{
  margin:0;
  color:var(--muted);
  font-size:21px;
  line-height:1.65;
  max-width:980px;
}

.live-grid,.shot-grid,.process-grid,.faq-grid,.service-grid{
  display:grid; gap:20px;
}
.live-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.shot-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.process-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.faq-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.service-grid{grid-template-columns:repeat(3,minmax(0,1fr))}

.process-card,.faq-item,.contact-card,.service-card{padding:24px;border-radius:24px}
.service-card h3,.faq-item h3{margin:0 0 10px;font-size:22px;letter-spacing:-.02em}
.service-card p,.faq-item p{margin:0;color:var(--muted);line-height:1.65}

.live-card,.shot-card{
  border-radius:24px;
  overflow:hidden;
  display:flex; flex-direction:column;
}
.live-media,.shot-media{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  background:linear-gradient(145deg,#101a3f,#0b1128);
}
.live-media img,.shot-media img{width:100%;height:100%;object-fit:cover}
.live-media::after,.shot-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(4,10,26,0) 32%, rgba(4,10,26,.82) 100%);
}
.card-body{padding:18px}
.card-tag{
  display:inline-flex;
  padding:9px 12px;
  border-radius:999px;
  background:rgba(97,77,255,.16);
  border:1px solid rgba(154,126,255,.22);
  color:#d8dfff;
  font-size:12px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.live-title{font-size:30px;line-height:1.05;letter-spacing:-.03em;margin:12px 0 10px;font-weight:900}
.shot-title{font-size:22px;line-height:1.1;letter-spacing:-.03em;margin:8px 0 10px;font-weight:900}
.card-body p{margin:0 0 16px;color:var(--muted);line-height:1.65}
.shot-card{cursor:pointer;text-align:left;color:#fff}
.shot-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.shot-cat{font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#cfd8ff}

.process-card .step{
  width:62px;height:62px;border-radius:20px;display:grid;place-items:center;
  background:linear-gradient(135deg,#4467ff,#a855f7);
  font-size:24px;font-weight:900;margin-bottom:18px;
}
.process-card h3{margin:0 0 10px;font-size:28px;line-height:1.04;letter-spacing:-.03em}
.process-card p{margin:0;color:var(--muted);line-height:1.65}

.contact-wrap{
  display:grid; grid-template-columns:1fr .95fr; gap:22px;
}
.contact-form{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px;
}
.contact-form input,.contact-form textarea{
  width:100%;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:#09142f;
  color:#fff;
  padding:16px 18px;
  font:inherit;
  outline:none;
}
.contact-form textarea{
  grid-column:1/-1;
  min-height:150px;
  resize:vertical;
}
.contact-form button{grid-column:1/-1;border:0;cursor:pointer}
.contact-lines{display:grid;gap:12px;margin-top:18px}
.contact-line{display:flex;gap:10px;align-items:flex-start;color:#dce7ff;line-height:1.6}

.site-footer{
  padding:30px 0 42px;
  color:#9cb0db;
  border-top:1px solid rgba(255,255,255,.06);
  margin-top:42px;
}
.footer-row{
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
}
.footer-wa{color:#b8f0cc;font-weight:800}
.wa-float{
  position:fixed; right:16px; bottom:16px; z-index:80;
  width:62px;height:62px;border-radius:50%;
  background:linear-gradient(135deg,#1db954,#58e593);
  display:grid;place-items:center;
  box-shadow:0 18px 40px rgba(29,185,84,.35);
  color:#0b2d18; font-size:28px; font-weight:900;
}

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:100;
  display:none; align-items:center; justify-content:center;
  background:rgba(2,6,18,.92);
  backdrop-filter:blur(10px);
  padding:26px;
}
.lightbox.active{display:flex}
.lightbox-box{width:min(1460px,100%);max-height:100%;display:grid;gap:14px}
.lightbox-top{display:flex;align-items:center;justify-content:space-between;gap:14px}
.lightbox-title{font-size:24px;font-weight:900}
.lightbox-frame{
  position:relative;
  border-radius:28px;
  overflow:hidden;
  background:#050b1f;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 25px 70px rgba(0,0,0,.45);
}
.lightbox-frame img{
  width:100%;
  max-height:82vh;
  object-fit:contain;
  margin:auto;
  background:#050b1f;
}
.lb-btn{
  width:54px;height:54px;border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
  color:#fff; display:grid; place-items:center;
  cursor:pointer; font-size:26px;
  position:absolute; z-index:2;
}
.lb-close{right:18px;top:18px}
.lb-prev{left:18px;top:50%;transform:translateY(-50%)}
.lb-next{right:18px;top:50%;transform:translateY(-50%)}

/* Service pages */
.page-shell{min-height:100vh}
.page-main{
  width:min(1280px,calc(100% - 32px));
  margin:0 auto;
  padding:34px 0 70px;
}
.page-hero{
  display:grid;
  grid-template-columns:1.02fr .98fr;
  gap:24px;
  align-items:stretch;
  margin-bottom:28px;
}
.page-copy,.page-visual,.cta-band{border-radius:28px}
.page-copy{padding:34px}
.page-copy h1{
  font-size:clamp(42px,5vw,68px);
  line-height:.98;
  letter-spacing:-.05em;
  margin:0 0 18px;
}
.page-copy p{
  margin:0;
  color:var(--muted);
  font-size:21px;
  line-height:1.7;
}
.page-visual{
  position:relative;
  overflow:hidden;
  min-height:470px;
}
.page-visual img{
  width:100%; height:100%; object-fit:cover;
}
.page-visual::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(5,10,27,.04) 0%, rgba(5,10,27,.20) 48%, rgba(5,10,27,.74) 100%);
}
.page-visual-tag{
  position:absolute; left:18px; bottom:18px; z-index:2;
  display:inline-flex; padding:12px 16px; border-radius:999px;
  background:rgba(8,15,35,.78); border:1px solid rgba(255,255,255,.10);
  color:#fff; font-size:12px; font-weight:900; letter-spacing:.16em; text-transform:uppercase;
}
.page-cta-row{
  display:flex; flex-wrap:wrap; gap:14px; margin-top:26px;
}
.cta-band{
  margin-top:24px;
  padding:26px 28px;
  display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap;
}
.cta-band h3{
  margin:0 0 8px;
  font-size:30px;
  letter-spacing:-.03em;
}
.cta-band p{
  margin:0;
  color:#b7c4df;
  font-size:18px;
  line-height:1.7;
  max-width:780px;
}

/* Tablet */
@media (max-width: 1180px){
  .container,.page-main{width:min(100% - 28px,100%)}
  .hero-grid,.page-hero{grid-template-columns:1fr}
  .hero-panel{min-height:auto}
  .live-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .process-grid,.service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .faq-grid{grid-template-columns:1fr 1fr}
}

/* Mobile / menu */
.mobile-menu-toggle{
  display:none;
  width:50px;height:50px;border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  cursor:pointer; position:relative; padding:0; margin-left:auto;
}
.mobile-menu-toggle span{
  position:absolute; left:13px; right:13px; height:2px; background:#fff; border-radius:999px; transition:.22s ease;
}
.mobile-menu-toggle span:nth-child(1){top:16px}
.mobile-menu-toggle span:nth-child(2){top:24px}
.mobile-menu-toggle span:nth-child(3){top:32px}
.nav.nav-open .mobile-menu-toggle span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav.nav-open .mobile-menu-toggle span:nth-child(2){opacity:0}
.nav.nav-open .mobile-menu-toggle span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

@media (max-width: 920px){
  .nav{flex-wrap:wrap; min-height:auto; padding:14px 0; row-gap:12px}
  .mobile-menu-toggle{display:block; order:2}
  .nav-links,.nav-actions{
    display:none; width:100%; order:4; margin-left:0;
  }
  .nav.nav-open .nav-links,.nav.nav-open .nav-actions{display:flex}
  .nav-links{
    flex-direction:column; gap:8px;
    padding:10px;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.08);
    border-radius:22px;
  }
  .nav-item,.has-sub{width:100%}
  .nav-link,.submenu-toggle{
    width:100%; justify-content:space-between;
    padding:12px 13px; font-size:14px;
    border-radius:14px;
    background:rgba(255,255,255,.02);
  }
  .has-sub::after{display:none}
  .has-sub .submenu{
    position:static;
    min-width:100%;
    margin-top:8px;
    box-shadow:none;
    background:rgba(255,255,255,.02);
    border-radius:18px;
    display:none;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
  }
  .has-sub.open > .submenu{display:grid}
  .nav-actions{
    flex-direction:column; gap:10px;
  }
  .nav-actions a{
    width:100%; justify-content:center;
  }
  .site-logo-only{
    height:48px;
    max-width:132px;
  }
  .hero{
    padding:42px 0 24px;
  }
  .hero h1{font-size:clamp(42px,10vw,66px)}
  .hero p,.section p.lead,.page-copy p{font-size:18px}
  .hero-points{grid-template-columns:1fr 1fr}
  .hero-mosaic{grid-template-columns:1fr; gap:12px}
  .process-grid,.faq-grid,.service-grid{grid-template-columns:1fr 1fr}
  .contact-wrap{grid-template-columns:1fr}
  .page-visual{min-height:340px}
}

@media (max-width: 640px){
  .container,.page-main{width:min(100% - 18px,100%)}
  .site-logo-only{
    height:40px;
    max-width:112px;
  }
  .nav-link,.submenu-toggle{
    font-size:13px;
    padding:11px 12px;
  }
  .wa-pill{
    font-size:13px;
    padding:11px 13px;
  }
  .btn-primary,.btn-secondary,.btn-outline,.live-btn,.shot-btn{
    padding:12px 15px;
    font-size:14px;
  }
  .hero h1{
    font-size:clamp(34px,13vw,52px);
    line-height:.98;
  }
  .hero p,.section p.lead,.page-copy p{
    font-size:17px;
    line-height:1.6;
  }
  .hero-actions,.page-cta-row{
    flex-direction:column;
  }
  .hero-actions a,.page-cta-row a{
    width:100%;
    justify-content:center;
  }
  .hero-points,.live-grid,.shot-grid,.process-grid,.faq-grid,.service-grid,.contact-form{
    grid-template-columns:1fr;
  }
  .page-copy,.page-visual,.process-card,.faq-item,.contact-card,.service-card,.cta-band{
    padding:22px;
  }
  .page-copy h1{
    font-size:clamp(32px,12vw,44px);
  }
  .page-visual{
    min-height:250px;
  }
  .hero-tile{min-height:180px}
  .wa-float{
    width:58px;height:58px;right:12px;bottom:12px;font-size:26px;
  }
  .lightbox{padding:10px}
  .lightbox-frame img{max-height:74vh}
}