:root{--black:#050608;--deep:#07111f;--blue1:#0a2540;--el:#3b82f6;--br:#60a5fa;--wh:#f0f4ff;--gr:#8a9bb5;--gn:#16a34a}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--black);color:var(--wh);font-family:'Barlow',sans-serif;font-weight:300;overflow-x:hidden}
body.ar{font-family:'Cairo',sans-serif;direction:rtl}

/* LANG TOGGLE */
.lang-toggle{display:flex;align-items:center;gap:.4rem;background:rgba(59,130,246,.12);border:1px solid rgba(59,130,246,.25);border-radius:20px;padding:.25rem .3rem;cursor:pointer;flex-shrink:0}
.lang-btn{padding:.25rem .7rem;border-radius:16px;font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;transition:all .3s;color:var(--gr);border:none;background:transparent;cursor:pointer}
.lang-btn.active{background:var(--el);color:#fff}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;padding:1rem 4rem;background:rgba(5,6,8,0.93);backdrop-filter:blur(20px);border-bottom:1px solid rgba(59,130,246,.12);transition:border-color .3s;gap:1rem}
.logo img{height:44px;filter:drop-shadow(0 0 10px rgba(59,130,246,.5))}
nav ul{display:flex;gap:2rem;list-style:none;flex-wrap:nowrap}
nav ul a{color:var(--gr);text-decoration:none;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;transition:color .3s;white-space:nowrap}
body.ar nav ul a{letter-spacing:0;font-size:.82rem}
nav ul a:hover{color:var(--br)}
.nav-cta{background:linear-gradient(135deg,#16a34a,#15803d)!important;color:#fff!important;padding:.5rem 1.3rem;border-radius:2px;font-weight:600!important}
.nav-right{display:flex;align-items:center;gap:1rem}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;z-index:301}
.hamburger span{display:block;width:24px;height:2px;background:var(--gr);border-radius:2px}

/* HERO */
#hero{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;padding:0}
.hero-bg-img{position:absolute;inset:0;z-index:0}
.hero-bg-img img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;filter:brightness(1.4)}
.hero-bg-img::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,6,8,0.72) 0%,rgba(5,6,8,0.48) 45%,rgba(5,6,8,0.04) 100%)}
body.ar .hero-bg-img::after{background:linear-gradient(270deg,rgba(5,6,8,0.72) 0%,rgba(5,6,8,0.48) 45%,rgba(5,6,8,0.04) 100%)}
.hgrid{position:absolute;inset:0;z-index:1;background-image:linear-gradient(rgba(59,130,246,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(59,130,246,.025) 1px,transparent 1px);background-size:60px 60px}
.hi{position:relative;z-index:2;max-width:1200px;width:100%;margin:0 auto;padding:9rem 4rem 5rem;display:flex;flex-direction:column;justify-content:center;max-width:680px;padding-left:4rem}
body.ar .hi{padding-left:2rem;padding-right:4rem;margin-right:auto;margin-left:0}
.hsub{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--el);margin-bottom:1rem}
body.ar .hsub{letter-spacing:0;font-size:.85rem}
h1{font-family:'Bebas Neue',sans-serif;font-size:clamp(3.5rem,7vw,7.5rem);line-height:.88;letter-spacing:.02em;background:linear-gradient(135deg,#fff 0%,#93c5fd 50%,#38bdf8 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
body.ar h1{font-family:'Cairo',sans-serif;line-height:1.1;font-size:clamp(2.8rem,5vw,5.5rem)}
.hdesc{font-size:1rem;line-height:1.75;color:rgba(184,200,224,0.9);margin:1.5rem 0 2.5rem;max-width:500px}
.hbtns{display:flex;gap:1rem;flex-wrap:wrap}
.hstats{display:flex;gap:.75rem;flex-wrap:wrap}
#hstats-bar{background:var(--black);padding:2rem 4rem;border-top:1px solid rgba(59,130,246,.08);border-bottom:1px solid rgba(59,130,246,.08);display:flex;justify-content:center}
#hstats-bar .hstats{justify-content:center}
.sp{background:rgba(10,37,64,0.85);border:1px solid rgba(59,130,246,.25);padding:.8rem 1.2rem;border-radius:2px;text-align:center;backdrop-filter:blur(8px);min-width:80px}
.sp strong{display:block;font-family:'Bebas Neue',sans-serif;font-size:1.8rem;color:var(--br);line-height:1}
.sp span{font-size:.6rem;color:var(--gr);letter-spacing:.1em;text-transform:uppercase}
body.ar .sp span{letter-spacing:0;font-size:.65rem}
@keyframes fup{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

/* BUTTONS */
.btn-wa{display:inline-flex;align-items:center;gap:.6rem;background:linear-gradient(135deg,#16a34a,#15803d);color:#fff;padding:.9rem 2rem;border-radius:2px;font-size:.88rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;transition:all .3s;box-shadow:0 4px 24px rgba(22,163,74,.3)}
.btn-wa:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(22,163,74,.45)}
.btn-wa svg,.btn-wa-big svg{width:18px;height:18px;fill:#fff;flex-shrink:0}
.btn-out{display:inline-flex;align-items:center;gap:.6rem;background:rgba(59,130,246,.1);color:var(--br);padding:.9rem 2rem;border-radius:2px;border:1px solid rgba(59,130,246,.65);font-size:.88rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;transition:all .3s}
.btn-out:hover{border-color:var(--br);background:rgba(59,130,246,.08);transform:translateY(-2px)}
body.ar .btn-wa,body.ar .btn-out,body.ar .btn-wa-big{letter-spacing:0;font-size:.95rem}

/* TRUSTED BY */
#trusted{background:var(--deep);padding:2.5rem 4rem;border-top:1px solid rgba(59,130,246,.08);border-bottom:1px solid rgba(59,130,246,.08);overflow:hidden;direction:ltr}
.trlabel{text-align:center;font-size:.95rem;letter-spacing:.25em;text-transform:uppercase;color:var(--gr);margin-bottom:1.8rem}
body.ar .trlabel{letter-spacing:0;font-size:1rem}
.twrap{overflow:hidden;position:relative;filter:brightness(1.35)}
.twrap::before,.twrap::after{content:'';position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none}
.twrap::before{left:0;background:linear-gradient(90deg,var(--deep),transparent)}
.twrap::after{right:0;background:linear-gradient(270deg,var(--deep),transparent)}
.ticker{display:flex;gap:1.5rem;width:max-content;animation:tick 30s linear infinite;align-items:center}
.ticker:hover{animation-play-state:paused}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.cb{display:inline-flex;align-items:center;justify-content:center;background:rgba(10,37,64,.7);border:1px solid rgba(59,130,246,.15);padding:.6rem 1.4rem;border-radius:3px;white-space:nowrap;transition:all .3s;height:72px;min-width:100px}
.cb:hover{border-color:rgba(59,130,246,.4)}
.cb img{height:44px;width:auto;max-width:150px;object-fit:contain;opacity:.75;mix-blend-mode:screen;transition:opacity .3s}
.cb:hover img{opacity:1}

/* SECTIONS */
section{position:relative;z-index:1;padding:6rem 4rem}
.mw{max-width:1200px;margin:0 auto}
.slbl{font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--el);margin-bottom:.6rem}
body.ar .slbl{letter-spacing:0;font-size:.8rem}
.stit{font-family:'Bebas Neue',sans-serif;font-size:clamp(2.5rem,5vw,4.5rem);line-height:1;letter-spacing:.02em;margin-bottom:1rem}
body.ar .stit{font-family:'Cairo',sans-serif;font-weight:700;font-size:clamp(2rem,4vw,3.5rem);line-height:1.2}
.stit span{color:var(--br)}
.ssub{color:var(--gr);font-size:.95rem;max-width:540px;line-height:1.7}

/* REVEAL */
.rv{opacity:1;transform:translateY(0);transition:opacity .6s ease,transform .6s ease}
.rv.animate{opacity:0;transform:translateY(20px)}
.rv.animate.on{opacity:1;transform:translateY(0)}

/* MODELS */
#models{background:linear-gradient(180deg,var(--black) 0%,var(--deep) 100%)}
.mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.1);margin-top:3.5rem}
.mc{background:var(--black);padding:2.5rem;position:relative;overflow:hidden;transition:background .3s}
.mc::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--el),transparent);transform:scaleX(0);transition:transform .4s}
.mc:hover{background:rgba(10,37,64,.8)}
.mc:hover::after{transform:scaleX(1)}
.mtag{margin-bottom:1.2rem}.mtag img{height:80px;width:auto;display:block;filter:drop-shadow(0 0 8px rgba(59,130,246,.25));opacity:.9}
.mc h3{font-family:'Bebas Neue',sans-serif;font-size:1.6rem;letter-spacing:.05em;margin-bottom:.5rem}
body.ar .mc h3{font-family:'Cairo',sans-serif;font-weight:700;letter-spacing:0;font-size:1.4rem}
.mbadge{display:inline-block;background:rgba(29,78,216,.2);border:1px solid rgba(59,130,246,.3);color:var(--br);font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;padding:.25rem .7rem;border-radius:1px;margin-bottom:1rem}
body.ar .mbadge{letter-spacing:0;font-size:.75rem}
.mc p{font-size:.88rem;color:var(--gr);line-height:1.65;margin-bottom:1.5rem}
.mspecs{display:flex;flex-direction:column;gap:.4rem}
.mspec{display:flex;align-items:center;gap:.6rem;font-size:.78rem;color:var(--gr)}
.mspec::before{content:'';display:block;width:4px;height:4px;border-radius:50%;background:var(--el);flex-shrink:0}

/* FLIP GALLERY */
#showcase{background:var(--deep)}
.flip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:3.5rem}
.fw{perspective:1000px;aspect-ratio:3/4;cursor:pointer}
.fi{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .65s cubic-bezier(.4,0,.2,1);border-radius:2px}
.fw:hover .fi,.fw.flipped .fi{transform:rotateY(180deg)}
.ff,.fb{position:absolute;inset:0;backface-visibility:hidden;border-radius:2px;overflow:hidden}
.ff{border:1px solid rgba(59,130,246,.2)}
.fb{transform:rotateY(180deg);border:1px solid rgba(59,130,246,.4)}
.ff img,.fb img{width:100%;height:100%;object-fit:cover;display:block}
.fhint{text-align:center;margin-top:1.5rem;color:var(--gr);font-size:.78rem;letter-spacing:.1em}

/* FEATURES */
#features{background:var(--black)}
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5px;margin-top:3.5rem;background:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.08)}
.fc{background:var(--black);padding:2rem;transition:background .3s;position:relative;overflow:hidden}
.fc::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--el),transparent);transform:scaleX(0);transition:transform .4s}
.fc:hover{background:rgba(10,37,64,.7)}
.fc:hover::after{transform:scaleX(1)}
.ficon{font-size:3rem;margin-bottom:1rem;display:block}
.fc h3{font-family:'Bebas Neue',sans-serif;font-size:1.3rem;letter-spacing:.05em;margin-bottom:.5rem}
body.ar .fc h3{font-family:'Cairo',sans-serif;font-weight:700;letter-spacing:0;font-size:1.2rem}
.fc p{font-size:.85rem;color:var(--gr);line-height:1.65}

/* CUSTOM */
#custom{background:var(--deep)}
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
.steps{list-style:none;margin-top:2rem}
.step{display:flex;gap:1.5rem;padding:1.5rem 0;border-bottom:1px solid rgba(59,130,246,.08)}
.sn{font-family:'Bebas Neue',sans-serif;font-size:2.5rem;color:rgba(59,130,246,.2);line-height:1;min-width:44px}
.step h4{font-size:.92rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.3rem}
body.ar .step h4{letter-spacing:0;font-size:1rem;text-transform:none}
.step p{font-size:.83rem;color:var(--gr);line-height:1.6}
.cbox{background:linear-gradient(135deg,var(--blue1),var(--deep));border:1px solid rgba(59,130,246,.2);border-radius:2px;padding:3rem 2.5rem;text-align:center}
.cbox .big{font-size:5rem;margin-bottom:1.2rem;display:block}
.cbox h3{font-family:'Bebas Neue',sans-serif;font-size:2rem;letter-spacing:.08em;margin-bottom:.75rem}
body.ar .cbox h3{font-family:'Cairo',sans-serif;font-weight:700;letter-spacing:0;font-size:1.8rem}
.cbox p{color:var(--gr);font-size:.88rem;line-height:1.65;margin-bottom:1.8rem}
.cbox-btns{display:flex;flex-direction:column;gap:.75rem}

/* INSTAGRAM */
#instagram{background:var(--black);text-align:center;padding-bottom:2rem}
.iginner{max-width:1000px;margin:0 auto}
.iglink{display:inline-flex;align-items:center;gap:.8rem;background:linear-gradient(135deg,rgba(131,58,180,.12),rgba(253,29,29,.08),rgba(252,176,69,.08));border:1px solid rgba(200,50,100,.2);padding:.9rem 2rem;border-radius:50px;margin:1.5rem 0 2rem;text-decoration:none;transition:all .3s}
.iglink:hover{transform:scale(1.03)}
.igat{font-family:'Bebas Neue',sans-serif;font-size:1.6rem;letter-spacing:.1em;background:linear-gradient(90deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.iggrid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:2rem 0;border:1px solid rgba(59,130,246,.08)}
.igcell{aspect-ratio:1;overflow:hidden}
.igcell img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.igcell:hover img{transform:scale(1.07)}
.igmore{color:var(--gr);font-size:.78rem;letter-spacing:.08em}
.igmore a{color:var(--br);text-decoration:none}

/* ORDER */


.oi{position:relative;z-index:2;max-width:720px;margin:0 auto}
.oi h2{font-family:'Bebas Neue',sans-serif;font-size:clamp(3rem,6vw,6rem);line-height:.95;letter-spacing:.02em;margin-bottom:1.2rem}
body.ar .oi h2{font-family:'Cairo',sans-serif;font-weight:700;letter-spacing:0;line-height:1.2;font-size:clamp(2.5rem,5vw,5rem)}
.oi h2 span{background:linear-gradient(90deg,#4ade80,#22c55e);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.oi p{color:var(--gr);font-size:1rem;line-height:1.7;margin-bottom:2rem}
.ctarow{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-bottom:2rem}
.btn-wa-big{display:inline-flex;align-items:center;gap:.8rem;background:linear-gradient(135deg,#16a34a,#15803d);color:#fff;padding:1.1rem 2.5rem;font-size:1rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border-radius:2px;transition:all .3s;box-shadow:0 8px 32px rgba(22,163,74,.3)}
.btn-wa-big:hover{transform:translateY(-3px);box-shadow:0 16px 48px rgba(22,163,74,.45)}
.trow{display:flex;justify-content:center;gap:2rem;flex-wrap:wrap}
.ti{display:flex;align-items:center;gap:.5rem;color:var(--gr);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
body.ar .ti{letter-spacing:0;font-size:.85rem}

/* FOOTER */
footer{background:var(--black);border-top:1px solid rgba(59,130,246,.08);padding:2.5rem 4rem}
.foot1{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1.5rem}
.foot1 img{height:38px;filter:drop-shadow(0 0 6px rgba(59,130,246,.3))}
.flinks{display:flex;gap:2rem;flex-wrap:wrap}
.flinks a{color:var(--gr);text-decoration:none;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;transition:color .3s}
body.ar .flinks a{letter-spacing:0;font-size:.85rem}
.flinks a:hover{color:var(--br)}
.foot2{max-width:1200px;margin:1.5rem auto 0;padding-top:1.5rem;border-top:1px solid rgba(59,130,246,.08);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.fig-btn{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;transition:opacity .3s}
.fig-btn:hover{opacity:.75}
.fig-icon{width:34px;height:34px;border-radius:8px;background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.fig-icon svg{width:18px;height:18px;fill:white}
.fig-text small{display:block;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gr)}
.fig-text span{font-size:.82rem;font-weight:600;background:linear-gradient(90deg,#f09433,#dc2743,#bc1888);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.fcopy{color:rgba(138,155,181,.35);font-size:.72rem;letter-spacing:.06em}

/* SCROLL TO TOP */
#stt{position:fixed;bottom:6.5rem;right:2rem;z-index:999;width:44px;height:44px;border-radius:50%;background:rgba(10,37,64,0.9);border:1px solid rgba(59,130,246,.4);color:var(--br);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .3s,visibility .3s,transform .3s,background .3s;backdrop-filter:blur(8px)}
#stt.show{opacity:1;visibility:visible;transform:translateY(0)}
#stt:hover{background:rgba(29,78,216,.6);border-color:var(--br)}
#stt svg{width:18px;height:18px}

/* WA FLOAT */
.waf{position:fixed;bottom:2rem;right:2rem;z-index:999;background:#16a34a;border-radius:50%;width:58px;height:58px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(22,163,74,.5);text-decoration:none;animation:wab 2.5s ease-in-out infinite}
.waf:hover{background:#15803d;transform:scale(1.1);animation:none}
.waf svg{width:28px;height:28px;fill:#fff}
@keyframes wab{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* RESPONSIVE */
@media(max-width:1100px){.flip-grid{grid-template-columns:repeat(3,1fr)}.iggrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){
  nav{padding:1rem 1.5rem}
  nav ul{display:none}
  nav ul.open{display:flex;flex-direction:column;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(5,6,8,.98);align-items:center;justify-content:center;gap:2rem;z-index:300}
  nav ul.open a{font-size:1.2rem}
  .hamburger{display:flex}
  #hero{padding:0;min-height:100vh}
  .hero-bg-img img{object-position:60% center}
  .hero-bg-img::after{background:linear-gradient(180deg,rgba(5,6,8,0.5) 0%,rgba(5,6,8,0.72) 60%,rgba(5,6,8,0.88) 100%)}
  .hi{padding:8rem 1.5rem 3rem;max-width:100%}
  section{padding:4rem 1.5rem}
  #trusted{padding:2rem 1.5rem}
  .mgrid{grid-template-columns:1fr}
  .flip-grid{grid-template-columns:repeat(2,1fr)}
  .fgrid{grid-template-columns:1fr}
  .cgrid{grid-template-columns:1fr}
  .iggrid{grid-template-columns:repeat(2,1fr)}
  footer{padding:2rem 1.5rem}
  .foot1,.foot2{flex-direction:column;text-align:center}
  .ctarow{flex-direction:column;align-items:center}
}
@media(max-width:520px){.flip-grid{grid-template-columns:repeat(2,1fr)}.iggrid{grid-template-columns:repeat(2,1fr)}}


/* MIC ORDER CTA */
.mic-cta-wrap{display:flex;flex-direction:column;align-items:center;margin-bottom:2.5rem}
.mic-shape{
  position:relative;
  width:220px;height:280px;
  background:linear-gradient(160deg,#1a4a7a 0%,#0a2540 40%,#07111f 100%);
  border-radius:50% 50% 46% 46% / 40% 40% 60% 60%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 60px rgba(59,130,246,.35),0 20px 60px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08);
  cursor:pointer;
  transition:transform .3s, box-shadow .3s;
  text-decoration:none;
}
.mic-shape:hover{
  transform:translateY(-6px) scale(1.03);
  box-shadow:0 0 90px rgba(59,130,246,.55),0 30px 80px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.1);
}
/* foam texture overlay */
.mic-shape::before{
  content:'';
  position:absolute;inset:0;
  border-radius:inherit;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Ccircle cx='1' cy='1' r='.6' fill='rgba(255,255,255,0.04)'/%3E%3C/svg%3E");
  background-size:4px 4px;
}
/* edge highlight */
.mic-shape::after{
  content:'';
  position:absolute;inset:0;
  border-radius:inherit;
  border:1px solid rgba(59,130,246,.3);
  box-shadow:inset 0 0 30px rgba(59,130,246,.08);
}
.mic-text-inner{
  position:relative;z-index:2;
  display:flex;flex-direction:column;
  align-items:center;gap:.3rem;
  padding:1rem;
}

.mic-order-text{
  font-family:'Bebas Neue',sans-serif;
  font-size:3.2rem;
  line-height:.88;
  letter-spacing:.08em;
  text-align:center;
  background:linear-gradient(135deg,#ffffff 0%,#93c5fd 60%,#38bdf8 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  text-transform:uppercase;
  filter:drop-shadow(0 2px 12px rgba(59,130,246,.5));
}

/* mic body below the foam */
.mic-body{
  width:28px;height:60px;
  background:linear-gradient(180deg,#1a3a5c 0%,#0a1628 100%);
  border-radius:0 0 6px 6px;
  margin-top:-4px;
  box-shadow:0 8px 20px rgba(0,0,0,.5);
  border:1px solid rgba(59,130,246,.15);
  border-top:none;
}
.mic-glow-ring{
  position:absolute;
  width:260px;height:320px;
  border-radius:50% 50% 46% 46% / 40% 40% 60% 60%;
  border:1px solid rgba(59,130,246,.12);
  animation:micPulse 3s ease-in-out infinite;
  pointer-events:none;
}
.mic-glow-ring:nth-child(2){
  width:300px;height:360px;
  border-color:rgba(59,130,246,.06);
  animation-delay:.8s;
}
@keyframes micPulse{
  0%,100%{opacity:.4;transform:scale(1)}
  50%{opacity:1;transform:scale(1.02)}
}

/* FILMSTRIP */
#filmstrip{background:var(--black);padding:0;overflow:hidden;border-top:1px solid rgba(59,130,246,.08);border-bottom:1px solid rgba(59,130,246,.08);direction:ltr}
.fstrip-wrap{overflow:hidden;position:relative}
.fstrip-wrap::before,.fstrip-wrap::after{content:'';position:absolute;top:0;bottom:0;width:100px;z-index:2;pointer-events:none}
.fstrip-wrap::before{left:0;background:linear-gradient(90deg,var(--black),transparent)}
.fstrip-wrap::after{right:0;background:linear-gradient(270deg,var(--black),transparent)}
.fstrip{display:flex;gap:6px;width:max-content;animation:fstripMove 28s linear infinite;align-items:stretch;padding:6px 0}
.fstrip:hover{animation-play-state:paused}
@keyframes fstripMove{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.fstrip-item{width:220px;height:260px;flex-shrink:0;overflow:hidden;border-radius:2px;position:relative}
.fstrip-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.fstrip-item:hover img{transform:scale(1.06)}

/* ORDER SLIDESHOW */
#order{background:var(--black);text-align:center;position:relative;overflow:hidden}

.oi{position:relative;z-index:2;max-width:720px;margin:0 auto}