/*!
 * Neptune UAE — custom styles for the Slides edition, v3.2.0
 * Designed & developed by NEPTUNE UAE — https://neptuneuae.net
 */
:root {
  --bg: #070b14;
  --text: #e8eef7;
  --muted: #a9b8cc;
  --line: rgba(255, 255, 255, .14);
  --surface: rgba(255, 255, 255, .06);
  --brand: #2f8cff;
  --brand-2: #22d3c5;
  --grad: linear-gradient(135deg, #2f8cff 0%, #22d3c5 100%);
  --wa: #25d366;
  --radius: 14px;
}

/* ---------- Base typography ---------- */
html { background: var(--bg); }
.slides, .slides p, .slides li, .slides a, .slides input, .slides textarea, .slides button { font-family: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.slides { background: var(--bg); color: var(--text); }
.slides h1, .slides h2, .slides h3, .slides .h1 { font-family: "Poppins", system-ui, sans-serif; font-weight: 600; letter-spacing: -.01em; }
.slides .h1.title { line-height: 1.2; margin-bottom: 18px; }
.slides p { color: inherit; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.eyebrow { color: var(--brand-2) !important; font-weight: 700 !important; font-size: 13px !important; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 14px; }
.lead { font-size: 18px; line-height: 1.65; color: #cdd8e6 !important; margin-bottom: 22px; }
.slides svg use { fill: currentColor; }

/* ---------- Backgrounds (mobile first, larger on desktop) ---------- */
.bg-hero     { background-image: url(../assets/images/hero-it-solutions-uae-800.webp); }
.bg-about    { background-image: url(../assets/images/bg-about-data-center-960.webp); }
.bg-erp      { background-image: url(../assets/images/technology-dashboard-background-960.webp); }
.bg-software { background-image: url(../assets/images/bg-software-development-ai-960.webp); }
.bg-web      { background-image: url(../assets/images/bg-web-design-development-960.webp); }
.bg-pos      { background-image: url(../assets/images/pos-network-hardware-background-960.webp); }
.bg-services { background-image: url(../assets/images/bg-it-services-cyber-security-960.webp); }
.bg-work     { background-image: url(../assets/images/bg-our-work-digital-grid-960.webp); }
.bg-contact  { background-image: url(../assets/images/bg-contact-server-room-960.webp); }
@media (min-width: 1024px) {
  .bg-hero     { background-image: url(../assets/images/hero-it-solutions-uae.webp); }
  .bg-about    { background-image: url(../assets/images/bg-about-data-center.webp); }
  .bg-erp      { background-image: url(../assets/images/technology-dashboard-background.webp); }
  .bg-software { background-image: url(../assets/images/bg-software-development-ai.webp); }
  .bg-web      { background-image: url(../assets/images/bg-web-design-development.webp); }
  .bg-pos      { background-image: url(../assets/images/pos-network-hardware-background.webp); }
  .bg-services { background-image: url(../assets/images/bg-it-services-cyber-security.webp); }
  .bg-work     { background-image: url(../assets/images/bg-our-work-digital-grid.webp); }
  .bg-contact  { background-image: url(../assets/images/bg-contact-server-room.webp); }
}
.slide .background { background-size: cover; background-position: center; }
/* bluish brand tint over every slide */
.slide .content { background-image: linear-gradient(160deg, rgba(7, 11, 20, .35), rgba(10, 30, 60, .25)); }

/* ---------- Top panel ---------- */
.site-top { padding-top: 14px; padding-bottom: 14px; }
.brand { display: inline-flex !important; align-items: center; gap: 10px; color: #fff; pointer-events: all; text-decoration: none; }
.brand img { width: 34px; height: 34px; }
.brand-word { width: 132px; height: 32px; fill: #fff; color: #fff; }
.site-top .right { white-space: nowrap; }
.top-phone { display: inline-flex !important; align-items: center; gap: 8px; vertical-align: middle; margin-right: 12px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); background: rgba(7, 11, 20, .35); color: #fff; font-weight: 700; font-size: 15px; text-decoration: none; pointer-events: all; transition: border-color .2s, background .2s; }
.top-phone:hover { border-color: var(--brand-2); background: rgba(34, 211, 197, .12); }
.top-phone svg { width: 16px; height: 16px; fill: var(--brand-2); }
.sidebar .brand-word { width: 110px; height: 27px; }
.sidebar .mainMenu a { font-size: 20px; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 12px 24px; border-radius: 999px; border: 1px solid transparent; font-weight: 700; font-size: 16px; line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease; }
.btn svg { width: 18px; height: 18px; flex: none; fill: currentColor; }
.btn-primary { background: var(--grad); color: #04101f !important; box-shadow: 0 10px 26px -10px rgba(47, 140, 255, .75); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(34, 211, 197, .75); }
.btn-ghost { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .25); color: #fff !important; }
.btn-ghost:hover { border-color: var(--brand-2); background: rgba(34, 211, 197, .12); }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ---------- Hero ---------- */
.hero-slide .wrap { position: relative; }
.hero-slide .content { background: radial-gradient(ellipse at bottom, rgba(27, 39, 53, .55) 0%, rgba(9, 10, 15, .8) 100%); }
.hero-title { margin: 6px 0 24px; font-family: "Lato", sans-serif !important; font-weight: 300 !important; }
.hero-line { display: block; font-size: clamp(30px, 4.6vw, 62px); line-height: 1.16; letter-spacing: .2em; text-transform: uppercase; padding-left: .2em; background: linear-gradient(#ffffff, #6f8aa8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-lead { max-width: 680px; margin: 0 auto 28px; font-size: 18px; line-height: 1.65; color: #cfdae8 !important; }

/* starfield */
.stars { position: absolute; inset: -40vh -10vw; z-index: -1; overflow: hidden; pointer-events: none; }
.stars i { position: absolute; top: 0; left: 0; border-radius: 50%; background: transparent; }
.stars i::after { content: ""; position: absolute; top: 2000px; left: 0; width: inherit; height: inherit; border-radius: 50%; box-shadow: inherit; }
.stars .s1 { width: 1px; height: 1px; animation: starfly 60s linear infinite; }
.stars .s2 { width: 2px; height: 2px; animation: starfly 110s linear infinite; }
.stars .s3 { width: 3px; height: 3px; animation: starfly 160s linear infinite; }
@keyframes starfly { to { transform: translateY(-2000px); } }

/* ---------- About stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 760px; margin: 34px auto 0; padding: 0; list-style: none; }
.stats li { background: rgba(7, 11, 20, .45); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 8px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.stats strong { display: block; font: 700 30px/1.1 "Poppins", sans-serif; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stats span { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); }

/* ---------- Split layouts ---------- */
.split > li { padding: 0 2%; }
.device-img { width: 100%; max-width: 620px; filter: drop-shadow(0 26px 40px rgba(0, 0, 0, .6)); }
.pos-img { max-width: 520px; }
.checklist { list-style: none; padding: 0; margin: 4px 0 26px; }
.checklist li { position: relative; padding-left: 32px; margin-bottom: 10px; color: #dbe4ef; font-size: 16px; line-height: 1.5; text-align: left; }
.checklist li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: rgba(34, 211, 197, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%2322d3c5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 14px no-repeat; }

/* ---------- ERP ---------- */
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; list-style: none; padding: 0; margin: 6px 0 16px; }
.feature-grid li { display: flex; gap: 12px; align-items: flex-start; text-align: left; }
.feature-grid svg { width: 38px; height: 38px; flex: none; padding: 8px; border-radius: 10px; background: rgba(47, 140, 255, .16); color: #7cc0ff; }
.feature-grid span { font-size: 14px; line-height: 1.4; color: var(--muted); }
.feature-grid b { display: block; color: #fff; font-size: 15px; font-family: "Poppins", sans-serif; font-weight: 600; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; }
.pills span { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .05); font-size: 13px; color: #dbe4ef; }

.app-window { max-width: 560px; margin: 0 auto; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .16); background: rgba(10, 16, 30, .9); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(47, 140, 255, .15); text-align: left; }
.app-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: rgba(255, 255, 255, .06); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.app-bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.app-bar i:nth-child(2) { background: #febc2e; } .app-bar i:nth-child(3) { background: #28c840; }
.app-bar span { margin-left: 10px; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-body { display: flex; min-height: 260px; }
.app-side { width: 54px; padding: 14px 10px; background: rgba(255, 255, 255, .03); border-right: 1px solid rgba(255, 255, 255, .06); display: flex; flex-direction: column; gap: 12px; }
.app-side b { display: block; height: 10px; border-radius: 4px; background: rgba(255, 255, 255, .14); }
.app-side b.on { background: var(--grad); }
.app-main { flex: 1; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.app-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.app-tiles div { padding: 10px; border-radius: 10px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .07); }
.app-tiles small { display: block; font-size: 11px; color: var(--muted); }
.app-tiles strong { display: block; font: 600 16px/1.3 "Poppins", sans-serif; color: #fff; white-space: nowrap; }
.app-tiles em { font-style: normal; font-size: 11px; color: var(--brand-2); }
.app-chart { flex: 1; min-height: 100px; display: flex; align-items: flex-end; gap: 8px; padding: 10px; border-radius: 10px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .06); }
.app-chart span { flex: 1; height: var(--h); border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #22d3c5, rgba(47, 140, 255, .55)); transform-origin: bottom; animation: grow 1.6s cubic-bezier(.2, .8, .2, 1) both; }
.app-chart span:nth-child(2) { animation-delay: .1s; } .app-chart span:nth-child(3) { animation-delay: .2s; } .app-chart span:nth-child(4) { animation-delay: .3s; }
.app-chart span:nth-child(5) { animation-delay: .4s; } .app-chart span:nth-child(6) { animation-delay: .5s; } .app-chart span:nth-child(7) { animation-delay: .6s; } .app-chart span:nth-child(8) { animation-delay: .7s; }
@keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.app-rows p { display: flex; gap: 10px; margin: 0 0 7px !important; }
.app-rows b { width: 30%; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .16); }
.app-rows i { flex: 1; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .07); }

/* ---------- Tiles (software / services) ---------- */
.tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; list-style: none; padding: 0; margin: 24px 0 0; text-align: left; }
.tile-grid.four { grid-template-columns: repeat(4, 1fr); }
.tile-grid li { padding: 20px; border-radius: var(--radius); background: rgba(7, 11, 20, .55); border: 1px solid var(--line); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: border-color .25s, transform .25s; }
.tile-grid li:hover { border-color: rgba(34, 211, 197, .5); transform: translateY(-3px); }
.tile-grid svg { width: 40px; height: 40px; padding: 8px; border-radius: 10px; background: rgba(34, 211, 197, .14); color: var(--brand-2); margin-bottom: 12px; }
.tile-grid h3 { font-size: 16px !important; line-height: 1.3; margin: 0 0 6px; color: #fff; }
.tile-grid p { font-size: 14px !important; line-height: 1.5; color: var(--muted) !important; margin: 0; }
.tile-grid.four li { padding: 16px; }
.tile-grid.four p { font-size: 13.5px !important; }

/* ---------- Work ---------- */
.work-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; list-style: none; padding: 0; margin: 28px 0 0; }
.work-grid li { padding: 16px 12px 12px; border-radius: var(--radius); background: rgba(255, 255, 255, .05); border: 1px solid var(--line); transition: transform .25s, border-color .25s; }
.work-grid li:hover { transform: translateY(-4px); border-color: rgba(47, 140, 255, .55); }
.work-grid img { width: 100%; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .55)); }
.work-grid p { margin: 8px 0 0 !important; font-size: 14px !important; font-weight: 700; color: #dbe4ef; }

/* ---------- Contact ---------- */
.contact-list { list-style: none; padding: 0; margin: 22px 0; }
.contact-list li { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; text-align: left; }
.contact-list svg { width: 46px; height: 46px; flex: none; padding: 13px; border-radius: 12px; background: rgba(255, 255, 255, .08); fill: var(--brand-2); }
.contact-list span { display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.contact-list a { color: #fff; font-weight: 700; font-size: 17px; text-decoration: none; word-break: break-word; }
.contact-list a:hover { color: var(--brand-2); }
.contact-list small { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.social-row { display: flex; gap: 10px; list-style: none; padding: 0; margin: 0; }
.social-row a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); color: #fff; transition: background .2s, border-color .2s; }
.social-row a:hover { background: var(--brand); border-color: var(--brand); }
.social-row svg { width: 18px; height: 18px; fill: #fff; }
.contact-form { max-width: 480px; margin: 0 auto; padding: 26px; border-radius: 18px; background: rgba(10, 16, 30, .82); border: 1px solid var(--line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); text-align: left; }
.contact-form h3 { font-size: 20px !important; margin: 0 0 14px; color: #fff; }
.field { margin-bottom: 12px; min-width: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 5px; }
.field input, .field textarea { width: 100%; box-sizing: border-box; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, .06); color: #fff; font-size: 16px; outline: none; transition: border-color .2s, background .2s; }
.field textarea { resize: vertical; min-height: 84px; }
.field input:focus, .field textarea:focus { border-color: var(--brand-2); background: rgba(255, 255, 255, .09); }
.field .invalid { border-color: #ff6b6b; }
.hp { position: absolute; left: -9999px; }
.form-status { margin: 10px 0 0 !important; font-size: 14px !important; min-height: 1.3em; }
.form-status.ok { color: #4ade80 !important; } .form-status.err { color: #ff8a8a !important; }
.form-status a { color: #fff; }
.mobile-footer { display: none; }

/* ---------- Bottom panel ---------- */
.site-bottom a { color: #fff; text-decoration: none; pointer-events: all; }
.site-bottom .wa-ico { width: 16px; height: 16px; fill: var(--wa); vertical-align: -3px; margin-right: 4px; }
.site-bottom .center span { font-size: 13px; }
.site-bottom .sig { color: var(--brand-2) !important; font-weight: 700; }

/* ---------- Quick bar (phones/tablets only) ---------- */
.quick-bar { display: none; }

/* ---------- Desktop fine-tuning ---------- */
@media (min-width: 1024px) {
  .slides .h1.title { font-size: 40px; }
}
@media (min-width: 1024px) and (max-height: 820px) {
  .slides .h1.title { font-size: 32px; margin-bottom: 12px; }
  .lead { font-size: 16px; margin-bottom: 14px; }
  .hero-line { font-size: 44px; }
  .feature-grid { gap: 8px 16px; }
  .feature-grid svg { width: 32px; height: 32px; padding: 6px; }
  .tile-grid { margin-top: 14px; gap: 12px; }
  .tile-grid li, .tile-grid.four li { padding: 14px; }
  .tile-grid svg { width: 34px; height: 34px; margin-bottom: 8px; }
  .app-body { min-height: 220px; }
  .contact-form { padding: 20px; }
  .stats { margin-top: 22px; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1023px) {
  .tile-grid, .tile-grid.four { grid-template-columns: repeat(2, 1fr); }
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .split > li { padding: 0; }
  .split .device-img, .split .app-window { margin: 30px auto 10px; }
  .split .left .btn { margin-bottom: 10px; }
}
@media (max-width: 767px) {
  .slides .h1.title { font-size: 28px; }
  .lead, .hero-lead { font-size: 16.5px; }
  .hero-line { letter-spacing: .1em; padding-left: .1em; font-size: clamp(26px, 8vw, 40px); }
  .btn-row { flex-direction: column; align-items: stretch; max-width: 360px; margin: 0 auto; }
  .tile-grid, .tile-grid.four, .work-grid, .feature-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .contact-form { padding: 20px; }
  .top-phone span { display: none; }
  .top-phone { padding: 0; width: 44px; height: 44px; justify-content: center; margin-right: 8px; }
  .brand-word { width: 108px; height: 26px; }
  .brand img { width: 30px; height: 30px; }
  .app-tiles strong { font-size: 13px; }
}

/* ---------- Mobile scroll mode (Slides "simplifiedMobile") ---------- */
/* let tall slides grow instead of overlapping the next slide */
.mobile .simplifiedMobile .container { height: auto !important; min-height: 100vh; min-height: 100svh; }
.mobile .simplifiedMobile .slide .wrap { padding-top: 96px; padding-bottom: 72px; }
.mobile .simplifiedMobile .slide .background { min-height: 100% !important; height: 100%; }
.mobile .simplifiedMobile .panel.top { background: rgba(7, 11, 20, .9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--line); padding-top: 10px; padding-bottom: 10px; }
.mobile .simplifiedMobile .panel.bottom, .mobile .simplifiedMobile .side { display: none !important; }
.mobile .mobile-footer { display: block; margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line); text-align: center; }
.mobile .mobile-footer p { margin: 4px 0 !important; font-size: 13px !important; color: var(--muted) !important; }
.mobile .mobile-footer a { color: var(--brand-2); font-weight: 700; }
.mobile .quick-bar { display: grid; grid-template-columns: repeat(3, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 300; background: rgba(7, 11, 20, .95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.mobile .quick-bar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 62px; font-size: 12px; font-weight: 700; color: #fff; text-decoration: none; }
.mobile .quick-bar a + a { border-left: 1px solid var(--line); }
.mobile .quick-bar svg { width: 20px; height: 20px; fill: var(--brand-2); }
.mobile .quick-bar .wa svg { fill: var(--wa); }
.mobile .slides { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }

/* Scroll-reveal animations on phones (replaces the slide-change animations) */
.mobile .simplifiedMobile .slide [class*=ae-] { transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1) !important; }
.mobile .simplifiedMobile.js-reveal .slide [class*=ae-]:not(.m-in) { opacity: 0 !important; transform: translate3d(0, 36px, 0) !important; }
.mobile .simplifiedMobile.js-reveal .slide .fromLeft:not(.m-in) { transform: translate3d(-40px, 0, 0) !important; }
.mobile .simplifiedMobile.js-reveal .slide .fromRight:not(.m-in) { transform: translate3d(40px, 0, 0) !important; }
.mobile .simplifiedMobile.js-reveal .slide .fromCenter:not(.m-in) { transform: scale(.88) !important; }
.mobile .simplifiedMobile .slide .ae-2 { transition-delay: .08s !important; }
.mobile .simplifiedMobile .slide .ae-3 { transition-delay: .16s !important; }
.mobile .simplifiedMobile .slide .ae-4 { transition-delay: .22s !important; }
.mobile .simplifiedMobile .slide .ae-5 { transition-delay: .28s !important; }
.mobile .simplifiedMobile .slide .ae-6, .mobile .simplifiedMobile .slide .ae-7, .mobile .simplifiedMobile .slide .ae-8, .mobile .simplifiedMobile .slide .ae-9, .mobile .simplifiedMobile .slide .ae-10 { transition-delay: .32s !important; }

@media (prefers-reduced-motion: reduce) {
  .stars i, .app-chart span { animation: none !important; }
  .mobile .simplifiedMobile.js-reveal .slide [class*=ae-] { opacity: 1 !important; transform: none !important; }
}

/* generated starfield */
.stars .s1 { box-shadow: 1326px 1941px #fff,617px 808px #fff,197px 148px #fff,2194px 192px #fff,1497px 1193px #fff,237px 1863px #fff,2078px 439px #fff,153px 176px #fff,1776px 856px #fff,286px 492px #fff,371px 1128px #fff,1738px 121px #fff,2316px 253px #fff,914px 1291px #fff,2387px 1940px #fff,253px 1181px #fff,2398px 812px #fff,203px 1999px #fff,905px 95px #fff,2280px 1758px #fff,545px 593px #fff,1716px 295px #fff,2214px 241px #fff,2338px 631px #fff,2294px 1671px #fff,740px 211px #fff,2382px 1169px #fff,769px 762px #fff,399px 1121px #fff,257px 1155px #fff,244px 1267px #fff,843px 1016px #fff,2177px 875px #fff,1286px 953px #fff,2398px 1891px #fff,1856px 740px #fff,1227px 508px #fff,736px 1431px #fff,999px 167px #fff,2352px 614px #fff,2151px 1013px #fff,1406px 1493px #fff,1838px 589px #fff,299px 241px #fff,2096px 856px #fff,675px 1550px #fff,1401px 311px #fff,2002px 863px #fff,160px 1970px #fff,317px 1565px #fff,2285px 1173px #fff,1285px 696px #fff,1434px 1217px #fff,2034px 1187px #fff,1868px 140px #fff,383px 1934px #fff,1105px 970px #fff,266px 124px #fff,1268px 1325px #fff,2367px 1395px #fff,1825px 582px #fff,1580px 1816px #fff,1421px 46px #fff,1891px 727px #fff,688px 1251px #fff,479px 1011px #fff,241px 446px #fff,1177px 264px #fff,1014px 814px #fff,1601px 1877px #fff,2033px 165px #fff,681px 919px #fff,1645px 1125px #fff,1138px 1809px #fff,560px 1677px #fff,1763px 1769px #fff,2253px 570px #fff,1701px 734px #fff,1558px 1961px #fff,945px 309px #fff,339px 360px #fff,619px 475px #fff,955px 24px #fff,1986px 1702px #fff,746px 538px #fff,1154px 8px #fff,596px 858px #fff,2189px 756px #fff,2319px 652px #fff,514px 1414px #fff,2111px 1946px #fff,221px 935px #fff,2290px 803px #fff,1630px 817px #fff,1614px 212px #fff,1972px 1299px #fff,1640px 127px #fff,780px 137px #fff,855px 902px #fff,664px 225px #fff,1392px 1230px #fff,215px 209px #fff,0px 1160px #fff,619px 1098px #fff,415px 1943px #fff,1489px 1256px #fff,104px 144px #fff,851px 1257px #fff,1541px 304px #fff,1033px 1956px #fff,1422px 1233px #fff,1491px 971px #fff,503px 236px #fff,1999px 954px #fff,1967px 990px #fff,1277px 175px #fff,590px 209px #fff,1403px 1516px #fff,1084px 980px #fff,661px 1057px #fff,94px 420px #fff,2163px 740px #fff,600px 1413px #fff,2224px 1872px #fff,110px 1552px #fff,2163px 610px #fff,372px 1425px #fff,1069px 1061px #fff,1502px 1860px #fff,684px 728px #fff,912px 1090px #fff,2218px 1595px #fff,2059px 675px #fff,913px 1255px #fff,799px 1650px #fff,980px 1675px #fff,1641px 1515px #fff,928px 409px #fff,2120px 1009px #fff,1456px 1497px #fff,118px 57px #fff,1144px 967px #fff,1061px 396px #fff,1410px 915px #fff,1431px 1955px #fff,1493px 164px #fff,903px 209px #fff,929px 962px #fff,805px 691px #fff,837px 988px #fff,7px 981px #fff,1409px 1637px #fff,347px 1709px #fff,491px 1863px #fff,1591px 1602px #fff,816px 979px #fff,731px 888px #fff,1361px 177px #fff,1621px 948px #fff,1644px 1522px #fff,347px 1484px #fff,650px 348px #fff,520px 56px #fff,619px 1209px #fff,1906px 1651px #fff,598px 1252px #fff,1942px 1346px #fff,1435px 319px #fff,2247px 1122px #fff,536px 43px #fff,58px 1637px #fff,420px 1078px #fff,570px 888px #fff,797px 1691px #fff,864px 57px #fff,1031px 435px #fff,1199px 1026px #fff,985px 1564px #fff,1335px 531px #fff,2229px 858px #fff,536px 124px #fff,1449px 1838px #fff,1876px 1356px #fff,2389px 1669px #fff,2116px 861px #fff,2054px 267px #fff,2178px 310px #fff,2144px 1045px #fff,76px 1787px #fff,1802px 1590px #fff,750px 1246px #fff,16px 1589px #fff,613px 352px #fff,579px 969px #fff,492px 1139px #fff,252px 667px #fff,2123px 1086px #fff,2275px 988px #fff,434px 1808px #fff,2294px 116px #fff,1017px 391px #fff,1134px 86px #fff,400px 1039px #fff,1852px 1150px #fff,114px 1556px #fff,259px 907px #fff,1333px 1254px #fff,2070px 1241px #fff,2097px 408px #fff,1135px 926px #fff,2081px 1092px #fff,1958px 1039px #fff,1014px 1431px #fff,2143px 1795px #fff,1063px 1889px #fff,2291px 1828px #fff,829px 1720px #fff,1833px 280px #fff,1706px 249px #fff,1607px 905px #fff,1294px 148px #fff,985px 877px #fff,299px 435px #fff,1240px 1605px #fff,501px 1837px #fff,632px 1924px #fff,1499px 292px #fff,1036px 1808px #fff,562px 1981px #fff,1915px 449px #fff,385px 815px #fff,1995px 333px #fff,916px 330px #fff,1767px 1055px #fff,1654px 694px #fff,1725px 400px #fff,1460px 652px #fff,377px 1478px #fff,1498px 39px #fff,1384px 1134px #fff,1878px 902px #fff,74px 787px #fff,1357px 1059px #fff,1210px 1049px #fff,263px 231px #fff,936px 1990px #fff,429px 172px #fff,1087px 556px #fff,162px 1855px #fff,743px 553px #fff,530px 1678px #fff,1729px 1739px #fff,1059px 831px #fff,611px 1098px #fff,2108px 1168px #fff,2025px 1434px #fff,1339px 183px #fff,1143px 117px #fff,750px 871px #fff,296px 550px #fff,68px 1299px #fff,362px 1641px #fff,1067px 171px #fff,910px 136px #fff,1083px 1766px #fff,498px 929px #fff,47px 694px #fff,2265px 855px #fff,1097px 1273px #fff,529px 88px #fff,2158px 1453px #fff,976px 1921px #fff,448px 1984px #fff,661px 536px #fff,206px 370px #fff,826px 1909px #fff,1277px 1287px #fff,1249px 1087px #fff,843px 593px #fff,1825px 1024px #fff,728px 554px #fff,1421px 1645px #fff,74px 512px #fff,151px 31px #fff,75px 1501px #fff,2071px 1128px #fff,776px 1053px #fff,1944px 503px #fff,1831px 217px #fff,1770px 1344px #fff,2027px 1118px #fff,1610px 1987px #fff,2075px 630px #fff,881px 470px #fff,1403px 406px #fff,572px 828px #fff,1423px 111px #fff,531px 29px #fff,289px 1280px #fff,1046px 882px #fff,668px 113px #fff,346px 1362px #fff,1560px 1782px #fff,2072px 1373px #fff,1154px 1226px #fff,992px 1418px #fff,1200px 92px #fff,1881px 379px #fff,645px 550px #fff,1826px 7px #fff,1078px 745px #fff,1347px 1991px #fff,2240px 662px #fff,1001px 70px #fff,1267px 446px #fff,1460px 374px #fff,4px 686px #fff,1563px 171px #fff,1944px 571px #fff,2059px 1343px #fff,823px 508px #fff,2067px 1589px #fff,20px 186px #fff,1082px 1673px #fff,367px 294px #fff,1636px 1201px #fff,170px 806px #fff,92px 613px #fff,1246px 1289px #fff,953px 173px #fff,2398px 1961px #fff,2167px 1747px #fff,635px 1346px #fff,1595px 1565px #fff,1335px 1475px #fff,2024px 306px #fff,1163px 1483px #fff,592px 89px #fff,2101px 1284px #fff,1758px 1502px #fff,2070px 285px #fff,2145px 1541px #fff,2065px 1164px #fff,65px 1692px #fff,2392px 1634px #fff,941px 174px #fff,127px 85px #fff,545px 1304px #fff,1477px 1965px #fff,429px 771px #fff,1848px 1143px #fff,207px 1285px #fff,77px 1282px #fff,2176px 1394px #fff,1001px 1002px #fff,1080px 6px #fff,1871px 1633px #fff,287px 1532px #fff,2060px 1838px #fff,2192px 188px #fff,2154px 135px #fff,1940px 516px #fff,304px 1732px #fff,1087px 480px #fff,840px 472px #fff,1885px 1011px #fff,1566px 157px #fff,1962px 1864px #fff,1176px 1570px #fff,191px 1263px #fff,812px 158px #fff,603px 679px #fff,1040px 1334px #fff,1246px 1272px #fff,2325px 273px #fff,51px 987px #fff,248px 994px #fff,1100px 1991px #fff,407px 1417px #fff,891px 1383px #fff; }
.stars .s2 { box-shadow: 2005px 595px #fff,2115px 584px #fff,1903px 954px #fff,1910px 1571px #fff,485px 1830px #fff,2249px 408px #fff,1276px 175px #fff,1937px 35px #fff,1186px 939px #fff,313px 1679px #fff,2075px 1982px #fff,1840px 550px #fff,1584px 429px #fff,863px 152px #fff,2381px 184px #fff,580px 1530px #fff,2146px 536px #fff,1472px 271px #fff,2083px 572px #fff,461px 1440px #fff,1495px 473px #fff,2039px 1838px #fff,1991px 807px #fff,101px 325px #fff,14px 1945px #fff,2013px 1395px #fff,1846px 830px #fff,1236px 1489px #fff,576px 852px #fff,1408px 770px #fff,1294px 247px #fff,1357px 3px #fff,1329px 1537px #fff,1385px 1718px #fff,1631px 245px #fff,801px 1460px #fff,48px 1846px #fff,1187px 518px #fff,1524px 133px #fff,1609px 799px #fff,312px 738px #fff,1753px 1547px #fff,1127px 1749px #fff,197px 574px #fff,416px 105px #fff,1169px 1300px #fff,609px 510px #fff,1088px 893px #fff,2092px 646px #fff,777px 1583px #fff,1529px 1607px #fff,1752px 1810px #fff,118px 1662px #fff,1638px 1870px #fff,2269px 1124px #fff,833px 1473px #fff,330px 101px #fff,1682px 923px #fff,567px 1319px #fff,1172px 994px #fff,200px 1867px #fff,2253px 260px #fff,699px 967px #fff,1699px 703px #fff,1154px 609px #fff,1047px 1513px #fff,1065px 831px #fff,977px 616px #fff,1979px 1141px #fff,1615px 245px #fff,685px 1317px #fff,662px 153px #fff,851px 1025px #fff,2036px 1127px #fff,901px 927px #fff,1363px 1554px #fff,1843px 875px #fff,571px 1121px #fff,788px 499px #fff,371px 357px #fff,1400px 1138px #fff,373px 653px #fff,979px 754px #fff,1058px 1657px #fff,2333px 413px #fff,82px 1535px #fff,1690px 784px #fff,1695px 1527px #fff,2146px 430px #fff,1543px 553px #fff,1385px 1540px #fff,254px 1020px #fff,1136px 1176px #fff,1475px 257px #fff,2061px 1083px #fff,884px 189px #fff,1110px 1836px #fff,1017px 787px #fff,1637px 1322px #fff,1826px 884px #fff,1278px 1738px #fff,89px 260px #fff,132px 870px #fff,1938px 1983px #fff,2006px 0px #fff,299px 801px #fff,2162px 1751px #fff,1917px 1991px #fff,1838px 508px #fff,446px 458px #fff,632px 311px #fff,2139px 1990px #fff,446px 1928px #fff,1873px 174px #fff,2258px 1591px #fff,161px 2px #fff,514px 476px #fff,2332px 1883px #fff,153px 1321px #fff,1244px 1971px #fff; }
.stars .s3 { box-shadow: 524px 1283px #fff,1031px 1081px #fff,1791px 1430px #fff,459px 203px #fff,288px 615px #fff,2148px 1932px #fff,2387px 392px #fff,1589px 534px #fff,915px 1618px #fff,4px 21px #fff,2201px 617px #fff,1886px 570px #fff,1295px 1320px #fff,992px 973px #fff,2155px 480px #fff,2240px 505px #fff,119px 1967px #fff,1686px 1443px #fff,1259px 113px #fff,89px 397px #fff,2041px 1812px #fff,1720px 166px #fff,1053px 466px #fff,1738px 1894px #fff,1516px 464px #fff,2019px 69px #fff,1384px 1471px #fff,1722px 742px #fff,1623px 405px #fff,27px 1632px #fff,1196px 1513px #fff,2067px 138px #fff,840px 1015px #fff,820px 638px #fff,794px 472px #fff,1905px 453px #fff,1085px 1557px #fff,1208px 223px #fff,2030px 1249px #fff,767px 1835px #fff,914px 993px #fff,1708px 1864px #fff,231px 1943px #fff,599px 1888px #fff,1611px 111px #fff,872px 48px #fff,581px 850px #fff,212px 1453px #fff,246px 377px #fff,1611px 920px #fff,1286px 1500px #fff,463px 162px #fff,678px 674px #fff,781px 379px #fff,2149px 1528px #fff; }

/* keep image proportions (framework sets explicit heights) */
.work-grid img, .device-img, .brand img { height: auto !important; }

/* phone refinements */
@media (max-width: 767px) {
  .hero-line { font-size: clamp(22px, 6.8vw, 40px); letter-spacing: .07em; padding-left: .07em; }
  .slides .h1.title .play { display: block; margin: 12px auto; }
}

/* =========================================================
   Menu panel v3.2.0
   ========================================================= */
.sidebar.menu-panel {
  width: 420px; max-width: 100%;
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(47, 140, 255, .22), transparent 60%),
    radial-gradient(90% 50% at 0% 100%, rgba(34, 211, 197, .16), transparent 60%),
    linear-gradient(180deg, #0c1424 0%, #070b14 100%);
  border-left: 1px solid rgba(255, 255, 255, .08);
  box-shadow: -30px 0 80px -20px rgba(0, 0, 0, .8);
  transition: transform .55s cubic-bezier(.2, .8, .2, 1), opacity .4s ease !important;
}
.sidebar.menu-panel::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--grad); opacity: .9; }
.sidebar.menu-panel .content { padding: 34px 34px 28px; min-height: 100%; box-sizing: border-box; display: flex; flex-direction: column; }
.sidebar.menu-panel .close { top: 22px; right: 22px; padding: 0; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); opacity: 1; transition: transform .3s, background .3s, border-color .3s; }
.sidebar.menu-panel .close svg { width: 18px; height: 18px; color: #fff; fill: none; }
.sidebar.menu-panel .close:hover { transform: rotate(90deg); border-color: var(--brand-2); background: rgba(34, 211, 197, .12); }
.menu-panel .brand-word { width: 128px; height: 31px; }
.menu-tag { margin: 10px 0 0 !important; font-size: 12.5px !important; color: var(--muted) !important; letter-spacing: .02em; }
.menu-label { margin: 28px 0 8px !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .28em; text-transform: uppercase; color: var(--brand-2) !important; }

.menu-list { list-style: none; padding: 0; margin: 0 -10px 22px; }
.menu-list li { margin: 0; }
.menu-list a {
  position: relative; display: flex; align-items: center; gap: 14px; padding: 9px 12px; border-radius: 12px;
  color: #fff; text-decoration: none; overflow: hidden; transition: background .3s, transform .3s;
}
.menu-list a::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px; border-radius: 3px; background: var(--grad); transform: scaleY(0); transition: transform .3s; }
.menu-list a:hover, .menu-list a.active { background: linear-gradient(90deg, rgba(47, 140, 255, .16), rgba(34, 211, 197, .04)); transform: translateX(4px); }
.menu-list a:hover::before, .menu-list a.active::before { transform: scaleY(1); }
.menu-list .mi { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); transition: background .3s, border-color .3s; }
.menu-list .mi svg { width: 19px; height: 19px; color: #9ec9ff; fill: none; }
.menu-list a:hover .mi, .menu-list a.active .mi { background: var(--grad); border-color: transparent; }
.menu-list a:hover .mi svg, .menu-list a.active .mi svg { color: #04101f; }
.menu-list .mt { flex: 1; font: 600 17px/1.2 "Poppins", sans-serif; letter-spacing: -.005em; }
.menu-list .mt small { display: block; margin-top: 2px; font: 400 12.5px/1.3 "Lato", sans-serif; color: var(--muted); letter-spacing: 0; }
.menu-list .mn { font: 600 12px "Poppins", sans-serif; color: rgba(255, 255, 255, .28); letter-spacing: .05em; transition: color .3s; }
.menu-list a:hover .mn, .menu-list a.active .mn { color: var(--brand-2); }

.menu-cta { display: grid; grid-template-columns: 1.35fr 1fr; gap: 10px; margin-bottom: 22px; }
.menu-cta .btn { min-height: 46px; padding: 10px 14px; font-size: 14.5px; }
.menu-cta .btn-ghost svg { fill: var(--wa); }
.menu-contact { list-style: none; padding: 16px 0 0; margin: 0 0 18px; border-top: 1px solid rgba(255, 255, 255, .08); }
.menu-contact li { display: flex; align-items: center; gap: 10px; margin: 0 0 9px; font-size: 14px; color: var(--muted); }
.menu-contact svg { width: 15px; height: 15px; flex: none; fill: var(--brand-2) !important; }
.menu-contact a { color: #dbe4ef; text-decoration: none; }
.menu-contact a:hover { color: var(--brand-2); }
.menu-social { display: flex; gap: 10px; list-style: none; padding: 0; margin: 0 0 18px; }
.menu-social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .14); transition: background .25s, border-color .25s, transform .25s; }
.menu-social a:hover { background: var(--brand); border-color: var(--brand); transform: translateY(-2px); }
.menu-social svg { width: 16px; height: 16px; fill: #fff; }
.menu-sign { margin: auto 0 0 !important; padding-top: 10px; font-size: 12px !important; color: rgba(255, 255, 255, .4) !important; }
.menu-sign a { color: var(--brand-2); font-weight: 700; text-decoration: none; }

/* staggered entrance */
.menu-panel .menu-list li, .menu-panel .menu-cta, .menu-panel .menu-contact, .menu-panel .menu-social { opacity: 0; transform: translateX(30px); }
.sidebarShown .menu-panel.visible .menu-list li,
.sidebarShown .menu-panel.visible .menu-cta,
.sidebarShown .menu-panel.visible .menu-contact,
.sidebarShown .menu-panel.visible .menu-social { animation: menuIn .55s cubic-bezier(.2, .8, .2, 1) forwards; }
.sidebarShown .menu-panel.visible .menu-list li:nth-child(1) { animation-delay: .08s; }
.sidebarShown .menu-panel.visible .menu-list li:nth-child(2) { animation-delay: .12s; }
.sidebarShown .menu-panel.visible .menu-list li:nth-child(3) { animation-delay: .16s; }
.sidebarShown .menu-panel.visible .menu-list li:nth-child(4) { animation-delay: .20s; }
.sidebarShown .menu-panel.visible .menu-list li:nth-child(5) { animation-delay: .24s; }
.sidebarShown .menu-panel.visible .menu-list li:nth-child(6) { animation-delay: .28s; }
.sidebarShown .menu-panel.visible .menu-list li:nth-child(7) { animation-delay: .32s; }
.sidebarShown .menu-panel.visible .menu-list li:nth-child(8) { animation-delay: .36s; }
.sidebarShown .menu-panel.visible .menu-list li:nth-child(9) { animation-delay: .40s; }
.sidebarShown .menu-panel.visible .menu-cta { animation-delay: .44s; }
.sidebarShown .menu-panel.visible .menu-contact { animation-delay: .50s; }
.sidebarShown .menu-panel.visible .menu-social { animation-delay: .56s; }
@keyframes menuIn { to { opacity: 1; transform: none; } }

/* compact on short laptop screens */
@media (min-width: 768px) and (max-height: 940px) {
  .sidebar.menu-panel .content { padding-top: 26px; }
  .menu-label { margin-top: 18px !important; }
  .menu-list a { padding: 6px 12px; }
  .menu-list .mi { width: 34px; height: 34px; }
  .menu-list .mt small { display: none; }
  .menu-contact li:nth-child(2) { display: none; }
}
/* phones: full-screen menu */
@media (max-width: 767px) {
  .sidebar.menu-panel { width: 100%; border-left: 0; }
  .sidebar.menu-panel .content { padding: 26px 22px calc(28px + env(safe-area-inset-bottom)); }
  .sidebar.menu-panel .close { top: 18px; right: 18px; }
  .menu-list .mt { font-size: 16.5px; }
  .menu-cta { grid-template-columns: 1fr 1fr; }
}
.mobile.sidebarShown .quick-bar { opacity: 0; pointer-events: none; }
.quick-bar { transition: opacity .3s; }
.c-strong { color: #fff; font-weight: 700; font-size: 17px; }
@media (prefers-reduced-motion: reduce) {
  .menu-panel .menu-list li, .menu-panel .menu-cta, .menu-panel .menu-contact, .menu-panel .menu-social { opacity: 1; transform: none; animation: none !important; }
}

/* ---------- Find Us / map (v3.2.0) ---------- */
.map-frame { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(47, 140, 255, .18); background: #0b1322; aspect-ratio: 4 / 3; max-height: 64vh; width: 100%; }
.map-frame iframe { display: block; width: 100%; height: 100%; border: 0; filter: invert(.92) hue-rotate(180deg) saturate(.75) brightness(.95); }
.map-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), inset 0 -60px 60px -40px rgba(7, 11, 20, .6); }
.map-open { position: absolute; right: 12px; bottom: 12px; z-index: 2; padding: 8px 14px; border-radius: 999px; background: rgba(7, 11, 20, .85); border: 1px solid rgba(255, 255, 255, .2); color: #fff !important; font-size: 13px; font-weight: 700; text-decoration: none; backdrop-filter: blur(6px); }
.map-open:hover { border-color: var(--brand-2); }
.place-card { display: flex; align-items: center; gap: 14px; padding: 14px 18px; margin: 4px 0 22px; border-radius: 14px; background: rgba(7, 11, 20, .55); border: 1px solid var(--line); text-align: left; }
.place-card svg { width: 44px; height: 44px; flex: none; padding: 11px; border-radius: 12px; background: var(--grad); fill: #04101f; }
.place-card strong { display: block; font: 600 17px/1.3 "Poppins", sans-serif; color: #fff; }
.place-card span { font-size: 14px; color: var(--muted); }
.btn-row.left-row { justify-content: flex-start; }
@media (max-width: 1023px) { .map-frame { margin-top: 26px; max-height: none; } }
@media (max-width: 767px) { .map-frame { aspect-ratio: 1 / 1; } .btn-row.left-row { margin: 0; } }