:root{
  --navy:#06142f;
  --navy2:#0b2a60;
  --blue:#0c69c8;
  --gold:#d8aa59;
  --gold2:#f4d388;
  --white:#ffffff;
  --soft:#f5f8fd;
  --text:#0d1d38;
  --muted:#596b82;
  --line:#dfe8f5;
  --shadow:0 20px 55px rgba(6,20,47,.13);
  --radius:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,Arial,sans-serif;
  color:var(--text);
  background:var(--white);
  line-height:1.65;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.container{width:min(1180px,92%);margin:auto}
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:99;
  background:rgba(3,15,38,.86);
  backdrop-filter:blur(15px);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.nav{height:76px;display:flex;align-items:center;justify-content:space-between;color:white}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:54px;height:54px;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.brand-text strong{display:block;font-family:"Playfair Display",serif;font-size:29px;line-height:1;color:white}
.brand-text span{font-size:12px;letter-spacing:.6px;color:#e9f1ff}
.menu{display:flex;gap:26px;text-transform:uppercase;font-weight:800;font-size:13px;letter-spacing:.45px}
.menu a{opacity:.9}
.menu a:hover,.menu a.active{color:var(--gold2)}
.hamburger{display:none;background:none;border:0;color:white;font-size:32px;cursor:pointer}
.mobile-menu{display:none;padding:0 0 16px}
.mobile-menu a{display:block;color:white;padding:10px 0;border-top:1px solid rgba(255,255,255,.12);font-weight:700}

.hero{
  min-height:790px;
  padding-top:76px;
  color:white;
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(3,14,35,.96) 0%,rgba(3,22,58,.90) 42%,rgba(3,16,42,.55) 100%),
    url('../images/media_production.jpg') center/cover no-repeat;
}
.hero:before{
  content:"";position:absolute;left:-10%;right:-10%;bottom:-160px;height:330px;
  background:linear-gradient(100deg,transparent 10%,rgba(216,170,89,.95) 38%,rgba(12,105,200,.90) 55%,transparent 75%);
  border-radius:50%;transform:rotate(-2deg);opacity:.82;
}
.hero:after{
  content:"";position:absolute;right:-85px;bottom:82px;width:360px;height:360px;
  background:url('../images/app-icon.png') center/contain no-repeat;
  opacity:.18;filter:drop-shadow(0 10px 28px rgba(0,0,0,.2));
}
.hero-grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.04fr .96fr;gap:52px;align-items:center;
  padding:105px 0 145px;
}
.eyebrow{font-size:13px;letter-spacing:2px;text-transform:uppercase;font-weight:900;color:var(--gold2)}
.script{
  font-family:"Playfair Display",serif;
  color:var(--gold2);
  font-size:76px;
  font-style:italic;
  line-height:.95;
  margin:12px 0 -8px;
  display:block;
}
h1{font-size:60px;line-height:1.02;margin:0 0 20px;font-weight:900;letter-spacing:-1.8px}
.hero p{font-size:18px;max-width:620px;color:#eaf2ff}
.btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 24px;border-radius:999px;font-weight:900;font-size:14px
}
.btn.gold{background:linear-gradient(135deg,var(--gold2),var(--gold));color:#071633}
.btn.outline{border:1px solid rgba(255,255,255,.55);color:white}
.hero-preview{
  border-radius:32px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  box-shadow:0 30px 80px rgba(0,0,0,.25);
  backdrop-filter:blur(9px);
  padding:18px;
}
.browser{
  border-radius:24px;overflow:hidden;background:#081a3c;border:1px solid rgba(255,255,255,.12)
}
.browserbar{height:38px;background:#0b2b63;display:flex;align-items:center;padding:0 14px;gap:8px}
.dot{width:10px;height:10px;border-radius:50%;background:#ff5e66}
.dot:nth-child(2){background:#ffc64d}.dot:nth-child(3){background:#34d17b}
.browser-content{
  min-height:420px;
  padding:32px;
  background:
    linear-gradient(120deg,rgba(4,20,50,.92),rgba(8,55,115,.68)),
    url('../images/workshop.jpg') center/cover no-repeat;
}
.browser-content h3{font-size:38px;line-height:1.12;margin:0 0 16px}
.hero-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:155px}
.hero-card{background:white;color:var(--text);padding:15px;border-radius:16px;font-size:12px;min-height:116px}
.hero-card b{display:block;color:var(--blue);margin-bottom:5px}

section{padding:86px 0}
.section-head{text-align:center;margin:0 auto 44px;max-width:780px}
.section-head h2{font-size:42px;line-height:1.15;margin:8px 0 12px}
.section-head p{color:var(--muted)}
.about-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}
.about h2{font-size:42px;line-height:1.16;margin:8px 0 18px}
.about h2 span{color:var(--gold)}
.about p{color:#33475f}
.photo-card{
  border-radius:30px;overflow:hidden;box-shadow:var(--shadow);position:relative;background:white
}
.photo-card img{width:100%;height:390px;object-fit:cover}
.float-badge{
  position:absolute;right:18px;bottom:18px;background:#061a3a;color:white;
  border:1px solid rgba(255,255,255,.18);
  border-radius:20px;padding:18px 22px;box-shadow:var(--shadow)
}
.services{background:linear-gradient(180deg,#fff,var(--soft))}
.service-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.service-card{
  background:white;border:1px solid var(--line);border-radius:24px;padding:25px 17px;text-align:center;
  box-shadow:0 10px 28px rgba(6,20,47,.06);
  transition:.25s ease;
}
.service-card:hover{transform:translateY(-7px);box-shadow:var(--shadow)}
.icon{
  width:58px;height:58px;border-radius:16px;border:1px solid #bdd1ee;
  display:grid;place-items:center;margin:0 auto 16px;font-size:28px;color:var(--blue)
}
.service-card h3{font-size:15px;line-height:1.25;margin:0 0 8px}
.service-card p{font-size:13px;color:var(--muted);margin:0}
.stats{
  padding:30px 0;
  background:linear-gradient(90deg,var(--navy),var(--navy2));
  color:white
}
.stats-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;text-align:center}
.stat b{font-size:35px;display:block;line-height:1.2}
.stat span{font-size:13px;color:#dce9ff}
.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.work{
  background:white;border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:0 12px 34px rgba(6,20,47,.08)
}
.work img{width:100%;height:220px;object-fit:cover}
.work div{padding:18px}
.work h3{font-size:18px;margin:0 0 6px}
.work p{font-size:14px;color:var(--muted);margin:0}
.values{
  background:
    linear-gradient(135deg,rgba(3,14,35,.97),rgba(5,35,80,.94)),
    url('../images/brand_promise.jpg') center/cover no-repeat;
  color:white;
}
.values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.value{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  border-radius:24px;padding:26px;backdrop-filter:blur(8px)
}
.value h3{color:var(--gold2);margin:0 0 8px}
.value p{color:#dce9ff;margin:0}
.logo-meaning{display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:center}
.logo-meaning img{border-radius:28px;box-shadow:var(--shadow)}
.meaning-list{display:grid;gap:15px}
.meaning-list div{padding:18px;border-left:4px solid var(--gold);background:#fff;border-radius:0 18px 18px 0;box-shadow:0 10px 25px rgba(6,20,47,.06)}
.clients{background:var(--soft)}
.client-logos{display:flex;flex-wrap:wrap;gap:38px;justify-content:center;align-items:center}
.client-logos span{font-size:30px;font-weight:900;color:#9aa7b7;filter:grayscale(1)}
.cta{
  padding:70px 0;
  background:linear-gradient(90deg,var(--navy),var(--blue));
  color:white;
  text-align:center
}
.cta h2{font-size:38px;margin:0 0 12px}
.footer{
  background:#041127;color:white;padding:55px 0 24px
}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.1fr;gap:30px}
.footer a,.footer p{color:#c9d6ea;font-size:14px}
.footer h4{margin:0 0 14px}
.newsletter{display:flex;gap:0}
.newsletter input{width:100%;padding:13px;border:0;border-radius:12px 0 0 12px}
.newsletter button{border:0;padding:0 16px;background:var(--gold);border-radius:0 12px 12px 0;font-weight:900}
.copyright{text-align:center;border-top:1px solid rgba(255,255,255,.10);margin-top:35px;padding-top:20px;color:#9baeca;font-size:13px}

@media(max-width:1000px){
  .menu{display:none}.hamburger{display:block}.mobile-menu.open{display:block}
  .hero-grid,.about-grid,.logo-meaning{grid-template-columns:1fr}
  .hero{min-height:auto}
  .script{font-size:56px}h1{font-size:46px}
  .service-grid{grid-template-columns:repeat(2,1fr)}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .portfolio-grid{grid-template-columns:repeat(2,1fr)}
  .values-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .nav{height:68px}
  .brand-text strong{font-size:23px}.brand img{width:46px;height:46px}
  .hero{padding-top:68px}
  .hero-grid{padding:62px 0 105px}
  .script{font-size:42px}h1{font-size:35px}.hero p{font-size:15px}
  .browser-content{min-height:360px;padding:22px}
  .hero-cards{grid-template-columns:1fr;margin-top:60px}
  section{padding:58px 0}
  .section-head h2,.about h2,.cta h2{font-size:30px}
  .service-grid,.stats-grid,.portfolio-grid,.values-grid,.footer-grid{grid-template-columns:1fr}
  .photo-card img{height:300px}
}