:root{
  --bg:#17181d;
  --blue:#425daa;
  --red:#f66464;
  --yellow:#fdaf42;
  --purple:#834b9f;

  --card: rgba(0,0,0,.20);
  --border: rgba(255,255,255,.10);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.78);
  --muted2: rgba(255,255,255,.60);
  --shadow: 0 10px 30px rgba(0,0,0,.18);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.06)),
    radial-gradient(1200px 800px at 15% 10%, rgba(246,100,100,.28), transparent 60%),
    radial-gradient(1100px 760px at 85% 25%, rgba(66,93,170,.26), transparent 60%),
    radial-gradient(900px 700px at 50% 95%, rgba(131,75,159,.22), transparent 62%),
    radial-gradient(900px 700px at 58% 18%, rgba(253,175,66,.22), transparent 62%),
    radial-gradient(700px 520px at 22% 70%, rgba(253,175,66,.18), transparent 64%),
    var(--bg);
  overflow-x:hidden;
}

a{color:inherit; text-decoration:none}
code{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}

.container{max-width:1100px; margin:0 auto; padding:0 16px}

.page{position:relative; min-height:100vh}

.nav{
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid var(--border);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  transition: background .25s ease, backdrop-filter .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px;
  max-width:1100px; margin:0 auto;
  transition: padding .25s ease;
}
.brand{display:flex; align-items:center; gap:10px}
.brand-mark{
  height:36px; width:36px; display:grid; place-items:center;
  border-radius:16px; border:1px solid var(--border);
  background: rgba(0,0,0,.35);
  overflow:hidden;
  transition: height .25s ease, width .25s ease, border-radius .25s ease;
}
.brand-mark img{height:22px; width:22px; object-fit:contain}

/* Nav morph state on scroll */
.nav.nav--scrolled{
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(16px);
  box-shadow: 0 12px 32px rgba(0,0,0,.25);
  border-bottom-color: rgba(255,255,255,.14);
}
.nav.nav--scrolled .nav-inner{padding:8px 16px}
.nav.nav--scrolled .brand-mark{height:32px; width:32px; border-radius:14px}
.brand-text{display:flex; flex-direction:column; line-height:1.1}
.brand-name{font-weight:800; font-size:14px}
.brand-sub{font-size:12px; color:var(--muted2)}

.nav-links{display:none; gap:22px}
.nav-links a{font-size:14px; color:var(--muted2)}
.nav-links a:hover{color:var(--text)}
.nav-cta{display:flex; gap:10px; align-items:center}

@media (min-width: 768px){
  .nav-links{display:flex}
}

.hide-sm{display:none}
@media (min-width: 640px){ .hide-sm{display:inline-flex} }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  border-radius:18px;
  padding:10px 14px;
  border:1px solid transparent;
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  user-select:none;
  transition: transform .16s ease, filter .16s ease, background .16s ease, border-color .16s ease, opacity .16s ease;
}
.btn:active{transform:translateY(1px)}
.btn-lg{padding:12px 16px; font-size:15px}
.btn-icon{font-weight:900}
.btn-outline{
  border-color: rgba(255,255,255,.60);
  background: transparent;
  color: var(--text);
}
.btn-outline:hover{background: rgba(255,255,255,.10)}
.btn-grad{
  background: linear-gradient(90deg, var(--red), var(--yellow), var(--purple));
  color: #0b0b0f;
  color: #0b0b0f;
  position:relative;
  overflow:hidden;
  transform: translateZ(0);
  -webkit-font-smoothing: antialiased;
}
.btn-grad:before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
  opacity:.55;
}
.btn-grad:hover{filter:brightness(1.03)}
.btn:focus{outline: none; box-shadow: 0 0 0 4px rgba(253,175,66,.18)}

.card{
  border:1px solid var(--border);
  background: var(--card);
  border-radius: 28px;
  box-shadow: var(--shadow);
  padding:22px;
}
.lift{transition: transform .18s ease}
.lift:hover{transform: translateY(-6px)}

.h1{
  font-family: Sora, Inter, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 40px;
  line-height: 1.05;
  margin:18px 0 0;
}
@media(min-width:640px){ .h1{font-size:52px} }
.h2{
  font-family: Sora, Inter, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 30px;
  margin:0;
}
@media(min-width:640px){ .h2{font-size:36px} }
.p{color:var(--muted); line-height:1.75; margin:14px 0 0}
.lead{color:var(--muted); line-height:1.75; margin:16px 0 0}

.block{display:block}

.tagline-pill{
  display:inline-flex; align-items:center; gap:10px;
  border-radius:999px; border:1px solid var(--border);
  background: rgba(0,0,0,.20);
  padding:10px 14px;
}
.tagline-text{
  font-weight:900; letter-spacing:.18em; text-transform:uppercase;
  font-size:13px;
}
.tagline-icon{
  height:28px; width:28px; border-radius:999px;
  border:1px solid var(--border);
  background: rgba(0,0,0,.22);
  display:grid; place-items:center;
}
.tagline-icon svg{height:16px; width:16px}

.hero{position:relative; padding:46px 0 24px}
.hero-grid{display:grid; gap:22px}
@media(min-width:900px){ .hero-grid{grid-template-columns: 1.1fr .9fr; align-items:center} }

.hero-actions{display:flex; gap:12px; flex-direction:column; margin-top:18px}
@media(min-width:640px){ .hero-actions{flex-direction:row} }

.checks{list-style:none; padding:0; margin:18px 0 0; display:grid; gap:10px}
.checks li{display:flex; gap:10px; align-items:flex-start; color:var(--muted2)}
.check{display:inline-grid; place-items:center; height:18px; width:18px; border-radius:999px; border:1px solid var(--border); color:var(--text); margin-top:2px; font-weight:900}

.mock-grid{display:grid; grid-template-columns: repeat(12,1fr); gap:10px}
.mock{border-radius:18px; border:1px solid var(--border); overflow:hidden; background: rgba(255,255,255,.04)}
.mock.a{grid-column: span 7; aspect-ratio: 4/3; background: linear-gradient(120deg, rgba(246,100,100,.14), rgba(253,175,66,.14), rgba(131,75,159,.14), rgba(66,93,170,.14))}
.mock.b{grid-column: span 5; aspect-ratio:1/1; background: linear-gradient(120deg, rgba(246,100,100,.12), rgba(253,175,66,.12), rgba(131,75,159,.12), rgba(66,93,170,.12))}
.mock.c{grid-column: span 5; aspect-ratio:1/1; background: linear-gradient(120deg, rgba(246,100,100,.10), rgba(253,175,66,.10), rgba(131,75,159,.10), rgba(66,93,170,.10))}
.mock.d{grid-column: span 12; aspect-ratio: 16/6; background: linear-gradient(120deg, rgba(246,100,100,.12), rgba(253,175,66,.12), rgba(131,75,159,.12), rgba(66,93,170,.12))}
.hero-meta{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; flex-wrap:wrap}
.meta-left{display:flex; gap:10px; align-items:center}
.meta-icon{height:40px; width:40px; border-radius:18px; border:1px solid var(--border); display:grid; place-items:center}
.meta-title{font-weight:700; font-size:14px}
.meta-sub{font-size:12px; color:var(--muted)}
.badge{
  display:inline-flex; align-items:center;
  border-radius:999px; padding:8px 12px;
  border:1px solid var(--border);
  background: rgba(0,0,0,.22);
  font-weight:700; font-size:12px;
}

.workflow-top{padding:22px 0 20px}
.workflow-kicker{
  text-align:center;
  color: rgba(255,255,255,.70);
  letter-spacing:.22em;
  font-weight:800;
  text-transform:uppercase;
  font-size:12px;
  margin-bottom:10px;
}
.repeat-rail{position:relative; height:58px; max-width:860px; margin:0 auto 14px}
.repeat-rail svg{position:absolute; inset:0; width:100%; height:100%}
.repeat-badge{
  position:absolute; left:50%; top:10px; transform:translateX(-50%);
  border-radius:999px; padding:6px 10px;
  border:1px solid rgba(255,255,255,.15);
  background: rgba(0,0,0,.20);
  font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color: rgba(255,255,255,.70);
}

.grid3{display:grid; gap:14px}
@media(min-width:768px){ .grid3{grid-template-columns: repeat(3, 1fr)} }

.k{font-size:11px; letter-spacing:.24em; font-weight:900; color:rgba(255,255,255,.70)}
.t{margin-top:10px; font-weight:800; font-size:18px}
.d{margin-top:10px; color:var(--muted2); line-height:1.55; font-size:14px}

.section{padding:64px 0}
.sec-head{text-align:center; max-width:740px; margin:0 auto 26px}
.chip{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; padding:6px 10px;
  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.10);
  font-weight:800; font-size:12px;
  margin-bottom:10px;
}
.text-stack{max-width:760px; margin:0 auto 36px; display:grid; gap:14px}
.mt{margin-top:36px}
.mt2{margin-top:16px}

.card-top{display:flex; gap:12px; align-items:center}
.iconbox{
  height:44px; width:44px;
  border-radius:18px; border:1px solid var(--border);
  display:grid; place-items:center;
  background: rgba(0,0,0,.18);
}
.card-title{font-weight:800; font-size:18px}
.muted{color:var(--muted2); font-size:13px; line-height:1.55}
.small{font-size:12px}

.list{list-style:none; padding:0; margin:16px 0 0; display:grid; gap:12px}
.list.compact{gap:10px}
.list li{display:flex; gap:10px; align-items:flex-start; color:var(--muted)}
.dot{display:inline-block; width:18px; height:18px; border-radius:999px; border:1px solid var(--border); display:grid; place-items:center; color:var(--text); font-weight:900; margin-top:1px}

.section-werk{
  position:relative;
}
.werk-grid{display:grid; gap:16px}
@media(min-width:980px){ .werk-grid{grid-template-columns: 1.8fr 1fr; align-items:center} }

.filmstrip{
  position:relative;
  overflow:hidden;
  border-radius: 28px;
  border:1px solid var(--border);
  background: rgba(0,0,0,.20);
}
.filmstrip:before, .filmstrip:after{
  content:""; position:absolute; top:0; width:44px; height:100%;
  pointer-events:none; z-index:2;
}
.filmstrip:before{left:0; border-right:1px solid var(--border); background: linear-gradient(90deg, rgba(0,0,0,.35), transparent)}
.filmstrip:after{right:0; border-left:1px solid var(--border); background: linear-gradient(270deg, rgba(0,0,0,.35), transparent)}
.filmstrip-track{
  display:flex; gap:12px; padding:40px 58px;
  animation: marquee 28s linear infinite;
  will-change: transform;
}
@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-1200px)}
}
.filmcard{
  width:220px; flex:0 0 auto;
  border-radius: 22px;
  border:1px solid var(--border);
  background: rgba(0,0,0,.20);
  overflow:hidden;
  position:relative;
}
.filmimg{
  aspect-ratio:4/3;
  background:#000 center/cover no-repeat;
}
.filmhud{position:absolute; inset:0; pointer-events:none}
.corner{position:absolute; width:12px; height:12px; border-color: rgba(255,255,255,.50); }
.c1{left:12px; top:12px; border-left:2px solid; border-top:2px solid}
.c2{right:12px; top:12px; border-right:2px solid; border-top:2px solid}
.c3{left:12px; bottom:12px; border-left:2px solid; border-bottom:2px solid}
.c4{right:12px; bottom:12px; border-right:2px solid; border-bottom:2px solid}
.rec{
  position:absolute; left:12px; top:12px;
  border-radius:999px; padding:6px 8px;
  border:1px solid rgba(255,255,255,.15);
  background: rgba(0,0,0,.35);
  font-size:10px; font-weight:900; letter-spacing:.18em;
}
.rec-dot{
  display:inline-block; width:8px; height:8px; border-radius:999px;
  background: var(--red); margin-right:6px;
  box-shadow: 0 0 0 0 rgba(246,100,100,.55);
  animation: ping 1.2s ease-out infinite;
}
@keyframes ping{
  0%{box-shadow: 0 0 0 0 rgba(246,100,100,.55)}
  100%{box-shadow: 0 0 0 10px rgba(246,100,100,0)}
}
.timecode{
  position:absolute; right:12px; top:12px;
  border-radius:999px; padding:6px 8px;
  border:1px solid rgba(255,255,255,.15);
  background: rgba(0,0,0,.35);
  font-size:10px; font-weight:700; color: rgba(255,255,255,.80);
}
.film-bottom{
  position:absolute; left:12px; right:12px; bottom:12px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.caption{
  border-radius:999px; padding:6px 8px;
  border:1px solid rgba(255,255,255,.15);
  background: rgba(0,0,0,.35);
  font-size:11px; font-weight:800; color: rgba(255,255,255,.86);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width: 160px;
}
.cam{
  height:28px; width:28px; border-radius:999px;
  border:1px solid rgba(255,255,255,.15);
  background: rgba(0,0,0,.35);
  display:grid; place-items:center;
}
.flash{
  position:absolute; inset:0;
  opacity:0; pointer-events:none;
  background: rgba(255,255,255,.90);
}
.filmcard:hover .flash{
  animation: flash .35s ease-out;
}
@keyframes flash{
  0%{opacity:0}
  30%{opacity:.28}
  100%{opacity:0}
}

.grid-portfolio{
  display:grid; gap:12px;
  grid-template-columns: repeat(2, 1fr);
}
@media(min-width:768px){ .grid-portfolio{grid-template-columns: repeat(4, 1fr); gap:14px} }
.work{
  border-radius:24px;
  overflow:hidden;
  border:1px solid var(--border);
  background: rgba(0,0,0,.20);
  position:relative;
}
.work .img{position:absolute; inset:0; background:#000 center/cover no-repeat}
.work .grad{position:absolute; inset:0; background: linear-gradient(120deg, rgba(246,100,100,.10), rgba(253,175,66,.10), rgba(131,75,159,.10), rgba(66,93,170,.10))}
.work .shade{position:absolute; inset:0; opacity:0; transition: opacity .30s ease; background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.75))}
.work:hover .shade{opacity:1}
.work .badge{
  position:absolute; left:10px; bottom:10px;
  padding:7px 10px;
}
.work .pop{
  position:absolute; left:10px; right:10px; bottom:44px;
  transform: translateY(8px);
  opacity:0;
  transition: transform .30s ease, opacity .30s ease;
}
.work:hover .pop{transform:translateY(0); opacity:1}
.work .pop .title{font-weight:800}
.work .pop .sub{font-size:12px; color: rgba(255,255,255,.80); margin-top:4px}
.aspect-45{aspect-ratio:4/5}
.aspect-sq{aspect-ratio:1/1}
.aspect-1610{aspect-ratio:16/10}

.section-packages{position:relative}
.package{display:flex; flex-direction:column; height:100%}
.package-top{display:flex; justify-content:space-between; align-items:center; gap:10px}
.price{font-size:34px; font-weight:900; margin-top:10px}
.package-wrap{
  padding:1px;
  border-radius:28px;
  background: linear-gradient(90deg, var(--red), var(--yellow), var(--purple));
}
.package-growth{border-color: transparent}

.big-cta{
  display:flex; gap:16px; align-items:center; justify-content:space-between;
  flex-direction:column;
}
@media(min-width:768px){ .big-cta{flex-direction:row} }

.rotator{
  position:relative;
  min-height: 120px;
  overflow:hidden;
}
.rotator-row{
  display:grid; gap:14px;
  position:absolute;
  inset:0;
  will-change: transform, opacity, filter;
}
@media(min-width:768px){ .rotator-row{grid-template-columns: repeat(3, 1fr)} }
.rotator-enter-left{animation: enterLeft .55s ease-out}
.rotator-enter-right{animation: enterRight .55s ease-out}
@keyframes enterLeft{
  from{opacity:0; transform: translateX(-16px); filter: blur(6px)}
  to{opacity:1; transform: translateX(0); filter: blur(0)}
}
@keyframes enterRight{
  from{opacity:0; transform: translateX(16px); filter: blur(6px)}
  to{opacity:1; transform: translateX(0); filter: blur(0)}
}
.partner-card{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center}
.partner-card img{height:48px; width:auto; max-width:190px; object-fit:contain; opacity:.95}
.quote{color: rgba(255,255,255,.86); line-height:1.65}
.qname{margin-top:14px; font-weight:900}
.qrole{font-size:12px; color: var(--muted2)}

.contact-grid{display:grid; gap:16px}
@media(min-width:900px){ .contact-grid{grid-template-columns: 1fr 1fr} }
.contact-item{display:flex; gap:12px; align-items:flex-start; margin-bottom:14px}
.link{color: rgba(255,255,255,.86)}
.link:hover{color: rgba(255,255,255,.98)}
.contact-social{display:grid; gap:10px; margin-top:10px}

.form{display:grid; gap:12px}
.form-row{display:grid; gap:12px}
@media(min-width:640px){ .form-row{grid-template-columns: 1fr 1fr} }
label span{display:block; font-weight:700; font-size:13px; margin-bottom:8px}
input, textarea{
  width:100%;
  border-radius:16px;
  border:1px solid var(--border);
  background: rgba(0,0,0,.18);
  color: var(--text);
  padding:12px 12px;
  font-size:14px;
  outline:none;
}
input:focus, textarea:focus{box-shadow: 0 0 0 4px rgba(66,93,170,.18); border-color: rgba(255,255,255,.18)}
.form-actions{display:flex; gap:12px; align-items:center; justify-content:space-between; flex-direction:column}
@media(min-width:640px){ .form-actions{flex-direction:row} }

.footer{border-top:1px solid var(--border); padding:28px 0}
.footer-inner{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-direction:column}
@media(min-width:640px){ .footer-inner{flex-direction:row} }
.footer-brand{display:flex; align-items:center; gap:10px}
.footer-copy{font-size:12px; color: var(--muted2)}

.blob{
  position:absolute; z-index:-1;
  width:480px; height:480px;
  border-radius:999px;
  filter: blur(60px);
  opacity:.35;
  background: radial-gradient(circle at 30% 30%, rgba(246,100,100,.34), rgba(253,175,66,.30), rgba(131,75,159,.30), rgba(66,93,170,.24));
}
.b1{left:-180px; top:-220px}
.b2{right:-140px; bottom:-260px}
.b3{left:52%; top:18%; transform:translateX(-50%); opacity:.22}
.b4{left:18%; top:66%; opacity:.22}

.cloud-outline{position:absolute; z-index:-1; opacity:1; pointer-events:none}
.co1{left:-140px; top:16px; width:460px; height:260px; transform: rotate(-10deg)}
.co2{right:-170px; top:84px; width:520px; height:300px; transform: rotate(8deg)}
.co3{left:30%; top:-40px; width:420px; height:220px; transform: rotate(2deg)}

.intro{
  position:fixed; inset:0; z-index:80;
  display:grid; place-items:center;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
  backdrop-filter: blur(10px);
  pointer-events:none;
  animation: introFade 2.2s ease-out forwards;
}
@keyframes introFade{
  0%{opacity:1}
  84%{opacity:1}
  100%{opacity:0}
}
.intro-inner{position:relative; width:240px; height:240px}
.intro-cloud{
  position:absolute; left:50%; top:60%;
  border-radius:999px;
  filter: blur(22px);
  transform: translateX(-50%);
  background: rgba(255,255,255,.16);
  animation: cloudFloat 2.2s ease-out forwards;
  opacity:0;
}
.cloud1{width:160px; height:64px}
.cloud2{width:132px; height:56px; left:44%; top:54%; background: rgba(255,255,255,.14)}
.cloud3{width:112px; height:48px; left:58%; top:57%; background: rgba(255,255,255,.12)}
@keyframes cloudFloat{
  0%{opacity:0; transform: translate(-50%, 18px)}
  22%{opacity:.22; transform: translate(-50%, -22px)}
  55%{opacity:.18; transform: translate(-50%, -54px)}
  100%{opacity:0; transform: translate(-50%, -86px)}
}
.intro-logo{
  position:absolute; left:50%; top:50%;
  transform: translate(-50%,-50%);
  text-align:center;
  animation: logoDrop .72s ease-out forwards;
}
@keyframes logoDrop{
  from{transform: translate(-50%,-50%) translateY(-34px) scale(.96); opacity:0}
  to{transform: translate(-50%,-50%) translateY(0) scale(1); opacity:1}
}
.intro-logo-box{
  height:148px; width:148px;
  display:grid; place-items:center;
  border-radius: 32px;
  border:1px solid rgba(255,255,255,.15);
  background: rgba(0,0,0,.30);
  overflow:hidden;
}
.intro-logo-box img{height:86px;width:86px;object-fit:contain;}
.intro-logo-name{margin-top:10px; font-weight:800; color: rgba(255,255,255,.90); font-size:14px; letter-spacing:.04em}



/* Finom zaj a gradient banding / "hasábos" sávosodás ellen */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3'/%3E%3C/filter%3E%3Crect width='512' height='512' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  background-repeat:repeat;
  opacity:.045;
  mix-blend-mode:soft-light;
}
/* Minden tartalom a zaj fölé */
body > *{ position:relative; z-index:1; }

/* Logo watermark a hero preview kártyában – hogy többször látszódjon a brand */
.preview-card{position:relative}
.logo-watermark{
  position:absolute; inset:auto 16px 16px auto;
  width:120px; height:120px;
  opacity:.14;
  filter: blur(.2px) saturate(1.05);
  pointer-events:none;
}
.logo-watermark img{width:100%;height:100%;object-fit:contain}
@media (min-width: 900px){
  .logo-watermark{width:140px;height:140px; inset:auto 18px 18px auto; opacity:.16;}
}

/* Partners – jobbra sodródó logósáv */
.partners-wrap{
  display:grid;
  grid-template-columns: 1fr;
  gap:18px;
  align-items:center;
}
@media (min-width: 900px){
  .partners-wrap{grid-template-columns: 1fr 1.15fr; gap:28px;}
  .partners-head{text-align:left}
}
.partners-marquee{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
  border-radius: 28px;
  padding:18px 0;
  /* finom "fading" a széleken */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.partners-track{
  display:flex;
  gap:18px;
  align-items:center;
  width:max-content;
  padding-left:18px;
  animation: partnersMarquee 36s linear infinite;
  will-change: transform;
}
.partners-marquee:hover .partners-track{animation-play-state:paused}
@keyframes partnersMarquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.partner-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  white-space:nowrap;
}
.partner-logo{
  height:34px; width:auto; max-width:160px;
  object-fit:contain;
  opacity:.92;
}
.partner-name{
  font-size:12px;
  color: rgba(255,255,255,.78);
  max-width: 220px;
  overflow:hidden;
  text-overflow: ellipsis;
}
@media (min-width: 900px){
  .partner-logo{height:38px; max-width:180px;}
}