:root{
  --bg0:#ffffff;
  --bg1:#fff5fb;
  --bg2:#ffeaf4;
  --ink:#1f2a42;
  --ink-soft:#5f6f91;
  --panel:#ffffff;
  --panel-ink:#1b2340;
  --panel-soft:#4f5f84;
  --cyra:#ff3c72;
  --cyra-2:#ff7da7;
  --hot:#ff4b4b;
  --ok:#35d5a2;
  --line:rgba(255,60,114,.12);
  --line-dark:rgba(255,60,114,.18);
  --shadow:0 24px 56px rgba(255,60,114,.14);
  --shadow-soft:0 12px 30px rgba(28,44,80,.12);
  --t-fast:180ms;
  --t-mid:480ms;
  --t-slow:860ms;
  --hint-h:46px;
  --scene-top:calc(var(--hint-h) + 22px);
  --max:1320px;
}

*{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(--ink);
  overflow:hidden;
  background:
    radial-gradient(1200px 900px at 12% 10%, rgba(255,60,114,.2), transparent 55%),
    radial-gradient(900px 700px at 90% -5%, rgba(255,125,167,.22), transparent 58%),
    linear-gradient(180deg, var(--bg0), var(--bg1) 45%, var(--bg2));
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-3;
  opacity:.09;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='340'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='340' height='340' filter='url(%23n)' opacity='.24'/%3E%3C/svg%3E");
  background-size:340px 340px;
}

.bg{
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
}
.bg svg{width:100%;height:100%}
.bg .grid{stroke:rgba(63,77,110,.12)}
.bg .circuit{stroke:rgba(255,125,167,.34)}
.bg .pulse{stroke:rgba(255,88,142,.76);filter:drop-shadow(0 0 14px rgba(255,88,142,.3))}
.bg .node{fill:rgba(44,57,88,.2)}
.bg .node.hot{fill:rgba(255,88,142,.95)}

.darkLayer{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(900px 620px at 50% -10%, rgba(255,60,114,.14), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.34));
}

.quickHint{
  position:fixed;
  inset:0 0 auto 0;
  height:var(--hint-h);
  z-index:90;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 14px;
  background:rgba(255,255,255,.9);
  border-bottom:1px solid rgba(255,60,114,.18);
  color:#3c4d73;
  box-shadow:0 10px 24px rgba(255,60,114,.08);
  font-size:12px;
  font-weight:850;
  letter-spacing:.1px;
  text-align:center;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.hintBrand{
  font-size:12px;
  font-weight:950;
  color:var(--cyra);
  letter-spacing:.4px;
  margin-right:4px;
}
.miniKbd{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:24px;
  padding:2px 6px;
  border:1px solid rgba(255,60,114,.24);
  background:#fff4fa;
  color:#304263;
  font-size:11px;
  border-radius:4px;
}

.dotnav{
  position:fixed;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  z-index:86;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:10px;
  border:1px solid rgba(255,60,114,.2);
  background:rgba(255,255,255,.92);
  box-shadow:0 12px 30px rgba(255,60,114,.1);
}
.dot{
  width:11px;
  height:11px;
  border-radius:999px;
  border:1px solid rgba(255,60,114,.24);
  background:rgba(255,60,114,.24);
  cursor:pointer;
  transition:transform var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.dot.active{
  background:var(--cyra);
  transform:scale(1.2);
  box-shadow:0 0 16px rgba(255,60,114,.55);
}

.edgeTap{
  position:fixed;
  top:var(--scene-top);
  bottom:0;
  width:16vw;
  min-width:42px;
  max-width:58px;
  border:0;
  background:transparent;
  z-index:82;
  display:none;
  -webkit-tap-highlight-color:transparent;
}
.edgeTap::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.16;
}
.edgeTap span{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,60,114,.24);
  background:rgba(255,255,255,.92);
  color:#2a3b61;
  font-size:14px;
  font-weight:900;
  border-radius:999px;
  box-shadow:0 10px 20px rgba(255,60,114,.16);
}
.edgeLeft{left:0}
.edgeLeft::before{background:linear-gradient(90deg, rgba(255,60,114,.28), transparent)}
.edgeLeft span{left:8px}
.edgeRight{right:0}
.edgeRight::before{background:linear-gradient(270deg, rgba(255,60,114,.28), transparent)}
.edgeRight span{right:8px}

.socialFixed{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:18px;
  z-index:92;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.socialLink{
  width:42px;
  height:42px;
  border:1px solid rgba(255,60,114,.24);
  background:rgba(255,255,255,.94);
  color:#1f2a42;
  display:grid;
  place-items:center;
  cursor:pointer;
  border-radius:10px;
  transition:transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), opacity var(--t-fast);
  box-shadow:0 8px 18px rgba(18,24,40,.14);
}
.socialLink:hover{
  transform:translateY(-2px);
  border-color:rgba(255,60,114,.45);
  box-shadow:0 12px 24px rgba(255,60,114,.22);
}
.socialLink svg{
  width:20px;
  height:20px;
  fill:currentColor;
}
.socialLink.isDisabled{
  opacity:.45;
  cursor:not-allowed;
}

.scenes{
  height:100%;
  padding-top:var(--scene-top);
  position:relative;
}
.scene{
  position:absolute;
  inset:var(--scene-top) 0 0 0;
  padding:22px 16px 28px;
  display:grid;
  place-items:center;
  opacity:0;
  transform:translateY(12px);
  pointer-events:none;
  transition:opacity var(--t-slow) ease, transform var(--t-slow) ease;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}
.scene.active{
  opacity:1;
  transform:none;
  pointer-events:auto;
}

.wrap{
  width:min(var(--max), 96vw);
  margin:0 auto;
}
.wrap.narrow{width:min(860px, 94vw)}

.panel{
  position:relative;
  overflow:hidden;
  padding:22px;
  border:1px solid var(--line-dark);
  background:linear-gradient(160deg, rgba(255,255,255,.96), rgba(255,245,251,.92));
  box-shadow:var(--shadow);
  border-radius:26px;
}
.panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.9;
  background:
    radial-gradient(120% 92% at -8% -20%, rgba(255,60,114,.16), transparent 54%),
    radial-gradient(120% 90% at 110% 120%, rgba(255,125,167,.14), transparent 56%);
}
.panel > *{position:relative;z-index:1}
.simplePanel{max-width:720px;margin:0 auto}

.sceneTag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border:1px solid rgba(255,60,114,.2);
  background:#fff3f8;
  color:#384666;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.24px;
  border-radius:999px;
  justify-self:center;
}

.title{
  margin:18px 0 10px;
  color:var(--panel-ink);
  font-size:clamp(34px, 4.6vw, 64px);
  line-height:1.02;
  letter-spacing:-1px;
  font-weight:950;
  text-align:center;
}
.titleSmall{
  margin:16px 0 8px;
  color:var(--panel-ink);
  font-size:clamp(28px, 3.8vw, 46px);
  line-height:1.08;
  font-weight:950;
  letter-spacing:-.6px;
  text-align:center;
}
.sub{
  margin:0;
  max-width:80ch;
  color:var(--panel-soft);
  font-size:clamp(14px, 1.75vw, 19px);
  line-height:1.62;
  font-weight:700;
  text-align:center;
  margin-inline:auto;
}

.introPhase,
.servicesPhase{
  transition:opacity var(--t-mid) ease, transform var(--t-mid) ease, max-height var(--t-mid) ease;
}
.introPhase{
  opacity:0;
  transform:translateY(8px);
  max-height:0;
  overflow:hidden;
}
.introPhase.is-visible{
  opacity:1;
  transform:none;
  max-height:600px;
}
.servicesPhase{
  opacity:0;
  transform:translateY(12px);
  max-height:0;
  overflow:hidden;
  pointer-events:none;
}
.servicesPhase.is-visible{
  opacity:1;
  transform:none;
  max-height:1600px;
  pointer-events:auto;
}

.cursor{
  display:inline-block;
  width:2px;
  height:.95em;
  margin-left:6px;
  transform:translateY(2px);
  background:var(--cyra);
  animation:blink 900ms steps(1) infinite;
}

.laserRow{
  margin:14px 0 18px;
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:8px;
}
.laser{
  height:3px;
  background:linear-gradient(90deg, transparent, rgba(255,60,114,.95), transparent);
  animation:scan 2.2s linear infinite;
}
.laser:nth-child(2){animation-delay:180ms}
.laser:nth-child(3){animation-delay:340ms}
.laser:nth-child(4){animation-delay:500ms}
.laser:nth-child(5){animation-delay:720ms}
.laser:nth-child(6){animation-delay:940ms}

.serviceGrid{
  margin-top:6px;
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:12px;
}
.serviceCard{
  grid-column:span 6;
  position:relative;
  overflow:hidden;
  min-height:182px;
  padding:14px;
  border:1px solid rgba(255,60,114,.2);
  background:linear-gradient(180deg, #ffffff, #fff6fb);
  box-shadow:var(--shadow-soft);
  border-radius:18px;
}
.serviceCard::before{
  content:"";
  position:absolute;
  top:0;
  left:-42%;
  width:42%;
  height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,60,114,.16), transparent);
  animation:ray 3.2s linear infinite;
}
.serviceCard::after{
  content:"";
  position:absolute;
  right:-44px;
  top:-44px;
  width:88px;
  height:88px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,60,114,.2), transparent 70%);
}
.serviceCard h3{
  margin:0;
  font-size:22px;
  color:#18223a;
  font-weight:950;
}
.serviceCard p{
  margin:10px 0 0;
  color:#4b5878;
  font-size:14px;
  line-height:1.58;
  font-weight:700;
}
.serviceHead{
  display:flex;
  align-items:center;
  gap:10px;
}
.serviceIcon{
  width:40px;
  height:40px;
  border:1px solid rgba(255,60,114,.2);
  background:#fff8fc;
  display:grid;
  place-items:center;
  border-radius:12px;
}
.serviceIcon svg{
  width:22px;
  height:22px;
  stroke:var(--cyra);
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.ledStrip{
  margin-top:12px;
  display:flex;
  gap:6px;
}
.ledStrip span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(255,60,114,.32);
  box-shadow:0 0 0 1px rgba(255,60,114,.22);
  animation:led 1.6s ease-in-out infinite;
}
.ledStrip span:nth-child(2){animation-delay:140ms}
.ledStrip span:nth-child(3){animation-delay:280ms}
.ledStrip span:nth-child(4){animation-delay:420ms}

.sc1{background:linear-gradient(180deg, #fff, #fff6fa)}
.sc2{background:linear-gradient(180deg, #fff, #fff7f8)}
.sc3{background:linear-gradient(180deg, #fff, #fff6fd)}
.sc4{background:linear-gradient(180deg, #fff, #fff7fb)}

.sceneProducts .wrap{display:grid;justify-items:center}
.clientsWrap{gap:10px}
.sceneProducts .clientsWrap,
.sceneProducts .productsGrid,
.sceneProducts .productCard,
.sceneProducts .logoCarousels,
.sceneProducts .logoCarouselCard,
.sceneProducts .logoCarousel{
  min-width:0;
  max-width:100%;
}

.clientsHead{
  width:min(880px, 100%);
  text-align:center;
}
.clientsHead h2{
  margin:12px 0 6px;
  color:#18223a;
  font-size:clamp(30px, 3.4vw, 46px);
  line-height:1.08;
  font-weight:950;
  letter-spacing:-.6px;
}
.clientsHead p{
  margin:0 auto;
  max-width:64ch;
  color:#4b5878;
  font-size:16px;
  line-height:1.6;
  font-weight:700;
}

.productsGrid{
  width:min(1360px, 100%);
  min-width:0;
  position:relative;
  perspective:1200px;
  overflow:visible;
  padding:8px 4px 14px;
}
.productsGrid::before,
.productsGrid::after{
  content:"";
  position:absolute;
  width:220px;
  height:220px;
  border-radius:50%;
  filter:blur(46px);
  pointer-events:none;
  opacity:.34;
  z-index:0;
  animation:orbFloat 7.2s ease-in-out infinite;
}
.productsGrid::before{
  left:-36px;
  top:-14px;
  background:rgba(255,60,114,.26);
}
.productsGrid::after{
  right:-30px;
  bottom:8px;
  background:rgba(255,125,167,.24);
  animation-delay:1.4s;
}
.productsMosaic{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
  align-items:stretch;
}
.productCard{
  --logo-scale-desktop:1.52;
  --logo-scale-mobile:1.56;
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  overflow:hidden;
  border:1px solid rgba(255,60,114,.22);
  background:linear-gradient(180deg, rgba(255,255,255,.99), rgba(255,244,250,.97));
  min-height:474px;
  padding:16px;
  box-shadow:0 16px 34px rgba(255,60,114,.14);
  border-radius:20px;
  transition:transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
  transform:translateY(0) scale(1);
  animation:mosaicReveal 680ms cubic-bezier(.2,.82,.23,1) both;
  animation-delay:var(--delay, 0ms);
}
.productCard::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:4px;
  background:linear-gradient(90deg, rgba(255,60,114,.96), rgba(255,125,167,.9));
}
.productCard::after{
  content:"";
  position:absolute;
  top:-120%;
  left:-44%;
  width:62%;
  height:300%;
  background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.18) 44%, rgba(255,255,255,.78) 50%, rgba(255,255,255,.18) 56%, transparent 70%);
  transform:translateX(-220%) rotate(15deg);
  opacity:.9;
  pointer-events:none;
  animation:cardSheen 4.2s ease-in-out infinite;
}
.productCard:hover{
  transform:translateY(-12px) scale(1.08);
  border-color:rgba(255,60,114,.62);
  box-shadow:0 30px 62px rgba(255,60,114,.3);
  z-index:3;
}
.productCard:hover::after{
  animation-duration:2.2s;
}
.productCard.isComingSoonCard{
  border-style:dashed;
  border-color:rgba(255,60,114,.36);
}
.productCard.isClickableCard{
  cursor:pointer;
}
.productCard.isClickableCard:focus-visible{
  outline:3px solid rgba(255,60,114,.58);
  outline-offset:2px;
}
.productLogoWrap{
  height:288px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:12px;
  padding:8px;
  border:1px solid rgba(255,60,114,.14);
  background:#ffffff;
  border-radius:12px;
  overflow:hidden;
}
.productLogoWrap img{
  display:block;
  width:100%;
  max-width:100%;
  height:100%;
  max-height:100%;
  object-fit:contain;
  object-position:center;
  transform:scale(var(--logo-scale-desktop));
  filter:none;
  opacity:1;
}
.productMeta{
  display:flex;
  flex-direction:column;
  flex:1;
  min-width:0;
}
.productBadge{
  align-self:flex-start;
  margin:0 0 10px;
  padding:5px 10px;
  border:1px solid rgba(255,60,114,.28);
  background:linear-gradient(180deg, rgba(255,245,251,.98), rgba(255,236,246,.96));
  color:#3b4b70;
  font-size:10px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  border-radius:999px;
}
.productMeta h3{
  margin:0;
  color:#18223a;
  font-size:22px;
  font-weight:950;
}
.productMeta p{
  margin:10px 0 0;
  color:#4b5878;
  font-size:15px;
  line-height:1.58;
  font-weight:700;
  overflow-wrap:anywhere;
}
.productMeta .btn{
  margin-top:14px;
  width:100%;
}
.btn.isComingSoon{
  opacity:1;
  cursor:not-allowed;
}
.btn.isComingSoon[disabled]{
  box-shadow:none;
  border-color:rgba(255,60,114,.24);
  color:#415075;
}
.soonIcon{
  font-size:14px;
  line-height:1;
}

.logoCarousels{
  width:min(1340px, 100%);
  min-width:0;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  padding:2px 6px 12px;
}
.logoCarouselCard{
  min-width:0;
  border:1px solid rgba(255,60,114,.16);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.96));
  padding:12px 12px 10px;
  border-radius:12px;
  overflow:hidden;
}
.logoCarouselCard h3{
  margin:0 0 10px;
  color:#253455;
  font-size:12px;
  font-weight:950;
  letter-spacing:.22em;
}
.logoCarousel{
  --loop-speed:22000ms;
  width:100%;
  min-width:0;
  overflow:hidden;
  border:0;
  background:#ffffff;
  border-radius:10px;
  min-height:172px;
  padding:22px 0;
}
.carouselTrack{
  width:max-content;
  display:flex;
  align-items:center;
  animation:carouselLoop var(--loop-speed) linear infinite;
}
.carouselGroup{
  display:flex;
  align-items:center;
  gap:20px;
  padding-right:20px;
}
.carouselLogo{
  width:208px;
  min-width:208px;
  height:102px;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  border-radius:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.carouselLogo img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  filter:none;
  opacity:1;
}
.logoCarousel#clientsCarousel .carouselLogo img{
  filter:grayscale(1) brightness(0) invert(24%);
}
.logoCarousel#clientsCarousel .carouselLogo img[src*="parceirotattoo"]{
  filter:none;
}

.productsNav{
  width:min(1080px, 100%);
  margin-top:8px;
}

.formSimple{
  margin-top:12px;
  display:grid;
  gap:10px;
  width:min(760px, 100%);
  margin-inline:auto;
}
label{
  color:#24304e;
  font-size:13px;
  font-weight:950;
}
input,textarea{
  width:100%;
  border:1px solid rgba(255,60,114,.2);
  background:#fffafd;
  color:#18223a;
  padding:13px;
  font-size:14px;
  font-weight:700;
  font-family:inherit;
  outline:none;
  border-radius:12px;
}
textarea{min-height:128px;resize:vertical}
input:focus,textarea:focus{
  border-color:rgba(255,60,114,.6);
  box-shadow:0 0 0 4px rgba(255,60,114,.14);
}
.contactHint{
  margin:0;
  color:#5e6b8c;
  font-size:12px;
  font-weight:700;
  text-align:center;
}
.formStatus{
  min-height:18px;
  margin:2px 0 0;
  text-align:center;
  font-size:12px;
  font-weight:800;
  color:#5e6b8c;
}
.formStatus.ok{color:#167f60}
.formStatus.err{color:#b33c61}

.btn{
  border:1px solid rgba(255,60,114,.2);
  background:#fffafd;
  color:#18223a;
  padding:11px 14px;
  font-size:13px;
  font-weight:900;
  font-family:inherit;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  transition:transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
  box-shadow:0 10px 22px rgba(18,24,40,.12);
  border-radius:12px;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.primary{
  border-color:rgba(255,60,114,.38);
  box-shadow:0 12px 28px rgba(255,60,114,.18);
}
.btn.hot{
  border-color:rgba(255,75,75,.38);
  background:linear-gradient(90deg, rgba(255,60,114,.14), rgba(255,75,75,.12), #fff);
  box-shadow:0 12px 28px rgba(255,75,75,.16);
}
.btn.big{width:100%;padding:15px}
.pageBtn{
  border-radius:999px;
  min-height:42px;
  padding:11px 18px;
}

.sceneNav{
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid rgba(18,24,40,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  width:min(980px, 100%);
  margin-inline:auto;
}
.navHint{
  color:#536283;
  font-size:12px;
  font-weight:850;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  text-align:center;
}
.kbd{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:24px;
  padding:2px 7px;
  border:1px solid rgba(255,60,114,.2);
  background:#fff5fa;
  color:#223050;
  font-size:11px;
  font-weight:900;
  border-radius:999px;
}
.navActions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
}

.reveal{
  opacity:0;
  transform:translateY(10px);
  transition:opacity var(--t-mid) ease, transform var(--t-mid) ease;
  transition-delay:var(--delay, 0ms);
}
.scene.active .reveal{
  opacity:1;
  transform:none;
}
.scene.active .servicesPhase .reveal{
  opacity:0;
  transform:translateY(10px);
}
.scene.active .servicesPhase.is-visible .reveal{
  opacity:1;
  transform:none;
}

@keyframes blink{50%{opacity:0}}
@keyframes scan{
  from{transform:translateX(-10px)}
  to{transform:translateX(10px)}
}
@keyframes ray{
  from{left:-42%}
  to{left:120%}
}
@keyframes led{
  0%,100%{background:rgba(255,60,114,.32);box-shadow:0 0 0 1px rgba(255,60,114,.22)}
  50%{background:rgba(255,60,114,.95);box-shadow:0 0 16px rgba(255,60,114,.55)}
}
@keyframes carouselLoop{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@keyframes productsLoop{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@keyframes mosaicReveal{
  from{opacity:0;transform:translateY(12px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes cardSheen{
  0%{transform:translateX(-220%) rotate(15deg)}
  56%{transform:translateX(280%) rotate(15deg)}
  100%{transform:translateX(280%) rotate(15deg)}
}
@keyframes orbFloat{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(0,-16px,0) scale(1.08)}
}
@keyframes flowLine{
  from{stroke-dashoffset:0}
  to{stroke-dashoffset:-240}
}
@keyframes wireNode{
  0%,100%{transform:scale(1);opacity:.85}
  50%{transform:scale(1.24);opacity:1}
}
@keyframes cardFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}
@keyframes sigFlow{
  from{stroke-dashoffset:0}
  to{stroke-dashoffset:-140}
}

@media (min-width: 1200px){
  .scene{padding:30px 20px 36px}
  .panel{padding:30px 34px}
  .title{font-size:clamp(40px, 4.4vw, 74px)}
  .titleSmall{font-size:clamp(32px, 3.5vw, 52px)}
  .wrap.narrow{width:min(940px, 92vw)}
}
@media (max-width: 980px){
  .serviceCard{grid-column:span 12}
  .scene{
    padding:16px 12px 118px;
    place-items:start center;
  }
  .sceneProducts{
    display:block;
    overflow-y:auto;
    overflow-x:hidden;
  }
  .sceneProducts .clientsWrap{
    width:100%;
    display:grid;
    justify-items:center;
    align-content:start;
    gap:12px;
    padding-bottom:8px;
    overflow-x:hidden;
  }
  .sceneProducts .clientsHead,
  .sceneProducts .productsGrid,
  .sceneProducts .logoCarousels,
  .sceneProducts .productsNav{
    width:100%;
    max-width:100%;
  }
  .sceneProducts .clientsHead p{
    font-size:14px;
    line-height:1.45;
  }
  .sceneProducts .productsGrid{
    padding:6px 0 10px;
  }
  .sceneProducts .productsGrid::before,
  .sceneProducts .productsGrid::after{
    width:150px;
    height:150px;
    filter:blur(34px);
  }
  .sceneProducts .productsMosaic{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
  }
  .sceneProducts .productCard{
    min-height:458px;
    padding:14px;
  }
  .sceneProducts .productLogoWrap{
    height:264px;
    padding:8px;
    margin-bottom:10px;
  }
  .sceneProducts .productLogoWrap img{
    transform:scale(var(--logo-scale-mobile));
  }
  .sceneProducts .logoCarousels{
    grid-template-columns:1fr;
    gap:8px;
    padding:0;
  }
  .sceneProducts .logoCarouselCard{
    min-width:0;
    padding:10px 8px;
  }
  .sceneProducts .logoCarouselCard h3{
    margin:0 0 8px;
    font-size:11px;
    letter-spacing:.12em;
  }
  .sceneProducts .logoCarousel{
    min-height:130px;
    padding:14px 0;
  }
  .sceneProducts .carouselGroup{
    gap:12px;
    padding-right:12px;
  }
  .sceneProducts .carouselLogo{
    width:138px;
    min-width:138px;
    height:68px;
  }
  .wrap,
  .wrap.narrow{
    width:min(100%, 760px);
  }
  .panel{
    width:100%;
    border-radius:22px;
    padding:18px;
  }
  .dotnav{
    right:auto;
    left:50%;
    top:auto;
    bottom:74px;
    transform:translateX(-50%);
    flex-direction:row;
    gap:8px;
    padding:8px 10px;
    border-radius:999px;
    backdrop-filter:blur(8px);
  }
  .dot{
    width:12px;
    height:12px;
  }
  .sceneNav{
    width:100%;
  }
  .navActions{
    width:100%;
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
  }
  .navActions .btn{
    width:100%;
    justify-content:center;
  }
  .edgeTap{
    display:block;
    width:56px;
    min-width:56px;
    max-width:56px;
    height:56px;
    top:auto;
    bottom:74px;
  }
  .edgeTap::before{display:none}
  .edgeTap span{
    position:static;
    transform:none;
    width:48px;
    height:48px;
    margin:4px;
    font-size:16px;
    background:rgba(255,255,255,.96);
  }
  .edgeLeft{left:10px}
  .edgeRight{right:10px}
  .socialFixed{
    bottom:14px;
    padding:6px 10px;
    border:1px solid rgba(255,60,114,.16);
    background:rgba(255,255,255,.84);
    border-radius:999px;
    backdrop-filter:blur(10px);
  }
}
@media (max-width: 860px){
  .quickHint{justify-content:center}
}
@media (max-width: 640px){
  :root{--hint-h:56px;--scene-top:calc(var(--hint-h) + 10px)}
  .quickHint{
    font-size:11px;
    padding:6px 10px;
    min-height:var(--hint-h);
    height:auto;
    line-height:1.3;
    flex-wrap:wrap;
    justify-content:center;
  }
  .scene{
    padding:12px 10px 126px;
  }
  .panel{
    padding:15px 14px;
    border-radius:18px;
  }
  .title{font-size:clamp(30px, 9vw, 42px)}
  .titleSmall{font-size:clamp(24px, 7vw, 34px)}
  .sub{
    font-size:14px;
    line-height:1.54;
  }
  .sceneProducts .productsGrid{
    padding:4px 0 8px;
  }
  .sceneProducts .productsGrid::before,
  .sceneProducts .productsGrid::after{
    width:118px;
    height:118px;
    filter:blur(28px);
    opacity:.26;
  }
  .sceneProducts .productsMosaic{
    grid-template-columns:1fr;
    gap:10px;
  }
  .sceneProducts .productCard{
    min-height:438px;
    padding:12px;
  }
  .sceneProducts .productLogoWrap{
    height:236px;
    padding:6px;
    margin-bottom:8px;
  }
  .sceneProducts .productLogoWrap img{
    transform:scale(var(--logo-scale-mobile));
  }
  .sceneProducts .productMeta h3{
    font-size:17px;
  }
  .sceneProducts .productMeta p{
    font-size:12px;
    line-height:1.4;
  }
  .serviceCard{
    min-height:unset;
    border-radius:16px;
  }
  .logoCarousels{
    grid-template-columns:1fr;
    gap:8px;
  }
  .sceneProducts .logoCarouselCard{
    padding:8px;
  }
  .sceneProducts .logoCarouselCard h3{
    font-size:10px;
    letter-spacing:.12em;
    margin:0 0 6px;
  }
  .sceneProducts .logoCarousel{
    min-height:114px;
    padding:10px 0;
  }
  .sceneProducts .carouselGroup{
    gap:10px;
    padding-right:10px;
  }
  .sceneProducts .carouselLogo{
    width:122px;
    min-width:122px;
    height:60px;
    padding:0;
  }
  .navHint{
    width:100%;
  }
  .navActions{
    grid-template-columns:1fr;
    gap:8px;
  }
  .socialLink{
    width:36px;
    height:36px;
  }
  .socialLink svg{
    width:18px;
    height:18px;
  }
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}