/* ============================================================
   BOTVIET CONNECTION COMMAND CENTER R42
   Scope: ONLY right content of /app/connections
   ============================================================ */

.connections-r42{
  --r42-bg:#020f24;
  --r42-panel:#071c3b;
  --r42-line:#1789ff;
  --r42-cyan:#2ed9ff;
  --r42-blue:#287cff;
  --r42-text:#f8fbff;
  --r42-muted:#9fb3d1;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:100%;
  padding:16px 18px 28px;
  color:var(--r42-text);
  background:
    radial-gradient(circle at 74% 8%,rgba(26,99,238,.16),transparent 28%),
    radial-gradient(circle at 7% 68%,rgba(0,142,255,.11),transparent 24%),
    linear-gradient(180deg,#03142d 0%,#020e21 100%);
}

.connections-r42::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-3;
  opacity:.28;
  background-image:
    linear-gradient(rgba(50,126,210,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(50,126,210,.06) 1px,transparent 1px);
  background-size:54px 54px;
  mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 82%,transparent);
}

.connections-r42::after{
  content:"";
  position:absolute;
  inset:-20% -10%;
  z-index:-2;
  pointer-events:none;
  background:linear-gradient(120deg,transparent 36%,rgba(38,135,255,.07) 48%,rgba(50,223,255,.06) 52%,transparent 64%);
  transform:translateX(-35%);
  animation:r42Sweep 9s ease-in-out infinite;
}

.r42-ambient{
  position:absolute;
  z-index:-1;
  width:420px;height:420px;
  border-radius:50%;
  filter:blur(80px);
  opacity:.12;
  pointer-events:none;
}
.r42-ambient-a{right:7%;top:5%;background:#1469ff;animation:r42Ambient 10s ease-in-out infinite}
.r42-ambient-b{left:-5%;bottom:12%;background:#00a8ff;animation:r42Ambient 13s ease-in-out infinite reverse}

.r42-hero{
  position:relative;
  display:grid;
  grid-template-columns:minmax(420px,.92fr) minmax(540px,1.08fr);
  gap:28px;
  align-items:stretch;
  max-width:1540px;
  margin:0 auto 18px;
}

.r42-hero-copy{
  position:relative;
  z-index:2;
  padding:14px 6px 0 10px;
}

.r42-hero-copy>h1{
  margin:0;
  font-size:clamp(42px,4.35vw,72px);
  line-height:.98;
  letter-spacing:-.055em;
  font-weight:950;
  color:#fff;
  text-shadow:0 7px 28px rgba(0,0,0,.26);
}
.r42-hero-copy>h1 span{
  background:linear-gradient(100deg,#67e8ff 0%,#3cb7ff 42%,#3478ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:none;
}
.r42-hero-copy>p{
  max-width:680px;
  margin:18px 0 26px;
  color:#bdcbe0;
  font-size:18px;
  line-height:1.48;
  font-weight:500;
}

.r42-smart-panel{
  position:relative;
  overflow:hidden;
  padding:24px 25px 20px;
  border-radius:22px;
  border:1px solid rgba(55,158,255,.68);
  background:
    radial-gradient(circle at 100% 0%,rgba(47,102,255,.26),transparent 32%),
    linear-gradient(145deg,rgba(11,41,89,.90),rgba(12,31,73,.86));
  box-shadow:
    inset 0 0 36px rgba(37,123,255,.08),
    0 14px 38px rgba(0,0,0,.18),
    0 0 22px rgba(30,119,255,.08);
}

.r42-smart-panel::after{
  content:"";
  position:absolute;
  right:-38px;
  top:-65px;
  width:260px;height:260px;
  border-radius:50%;
  border:1px solid rgba(74,137,255,.12);
  box-shadow:
    0 0 0 34px rgba(74,137,255,.035),
    0 0 0 70px rgba(74,137,255,.025);
  animation:r42Spin 18s linear infinite;
}

.r42-smart-shine{
  position:absolute;
  inset:-120% -30%;
  width:32%;
  transform:rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(119,209,255,.08),transparent);
  animation:r42PanelShine 7.5s ease-in-out infinite;
}
.r42-smart-panel h2{
  position:relative;
  z-index:1;
  margin:0 0 10px;
  font-size:22px;
  letter-spacing:-.02em;
}
.r42-smart-panel h2 span{
  color:#6deaff;
  margin-right:10px;
  text-shadow:0 0 16px #3ac9ff;
}
.r42-smart-panel>p{
  position:relative;
  z-index:1;
  margin:0;
  color:#b2c2da;
  font-size:14px;
  line-height:1.55;
}

.r42-smart-benefits{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  margin-top:18px;
}
.r42-smart-benefits>div{
  min-height:64px;
  display:grid;
  grid-template-columns:46px 1fr;
  gap:12px;
  align-items:center;
  padding-right:15px;
}
.r42-smart-benefits>div+div{
  padding-left:15px;
  border-left:1px solid rgba(82,151,226,.25);
}
.r42-smart-benefits span{
  width:43px;height:43px;
  display:grid;place-items:center;
  border-radius:12px;
  background:linear-gradient(145deg,rgba(16,81,171,.95),rgba(10,42,104,.95));
  color:#64c9ff;
  border:1px solid rgba(60,148,255,.25);
  box-shadow:0 0 18px rgba(20,114,255,.11);
}
.r42-smart-benefits svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.r42-smart-benefits b{color:#dfeafd;font-size:12px;line-height:1.35}

.r42-orbit-visual{
  position:relative;
  min-height:375px;
  overflow:hidden;
  border-radius:30px;
  background:
    radial-gradient(ellipse at 50% 50%,rgba(33,103,255,.20),transparent 44%),
    radial-gradient(circle at 50% 72%,rgba(0,190,255,.15),transparent 32%);
}

.r42-orbit-visual::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 50%,transparent 0 44%,rgba(47,145,255,.06) 45%,transparent 48%),
    linear-gradient(170deg,transparent 0 58%,rgba(27,99,221,.09) 58% 59%,transparent 59%);
  opacity:.9;
}

.r42-star-field i{
  position:absolute;
  width:4px;height:4px;
  border-radius:50%;
  background:#7cf2ff;
  box-shadow:0 0 7px #50cfff,0 0 16px #2d76ff;
  animation:r42Twinkle 2.4s ease-in-out infinite;
}
.r42-star-field i:nth-child(1){left:13%;top:31%}
.r42-star-field i:nth-child(2){left:25%;top:9%;animation-delay:.4s}
.r42-star-field i:nth-child(3){right:14%;top:17%;animation-delay:.8s}
.r42-star-field i:nth-child(4){right:6%;top:52%;animation-delay:1.2s}
.r42-star-field i:nth-child(5){left:39%;bottom:19%;animation-delay:1.5s}
.r42-star-field i:nth-child(6){right:31%;bottom:8%;animation-delay:1.8s}

.r42-ring{
  position:absolute;
  left:50%;top:54%;
  border-radius:50%;
  border:2px solid rgba(54,151,255,.78);
  box-shadow:
    0 0 15px rgba(51,176,255,.46),
    inset 0 0 15px rgba(56,164,255,.17);
  transform:translate(-50%,-50%) rotate(-8deg);
  pointer-events:none;
}
.r42-ring::after{
  content:"";
  position:absolute;
  width:10px;height:10px;
  left:3%;top:49%;
  border-radius:50%;
  background:#8af9ff;
  box-shadow:0 0 11px #52dfff,0 0 24px #2d7fff;
}
.r42-ring-a{width:75%;height:43%;animation:r42Orbit 12s linear infinite}
.r42-ring-b{width:61%;height:30%;border-color:rgba(68,92,255,.62);animation:r42OrbitReverse 15s linear infinite}
.r42-ring-c{width:86%;height:52%;border-color:rgba(39,112,255,.27);animation:r42Orbit 22s linear infinite}

.r42-core-wrap{
  position:absolute;
  left:50%;top:61%;
  width:270px;height:200px;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  perspective:700px;
}
.r42-core{
  position:absolute;
  z-index:8;
  top:5px;
  width:104px;height:104px;
  display:grid;place-items:center;
  border-radius:26px;
  color:#6be9ff;
  background:
    radial-gradient(circle at 36% 22%,rgba(255,255,255,.22),transparent 28%),
    linear-gradient(145deg,#1459ea,#1fa7ff);
  border:1px solid rgba(106,230,255,.7);
  box-shadow:
    inset 0 0 24px rgba(255,255,255,.09),
    0 0 30px rgba(39,161,255,.72),
    0 24px 42px rgba(0,0,0,.38);
  animation:r42CoreFloat 4.2s ease-in-out infinite;
}
.r42-core svg{width:58px;height:58px;fill:none;stroke:#c5fbff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

.r42-pedestal{
  position:absolute;
  left:50%;
  transform:translateX(-50%) rotateX(62deg);
  border-radius:50%;
  border:2px solid rgba(58,158,255,.8);
  background:radial-gradient(circle,rgba(30,130,255,.25),rgba(4,27,72,.7) 72%);
  box-shadow:0 0 24px rgba(32,133,255,.42),inset 0 0 22px rgba(71,203,255,.22);
}
.r42-pedestal-1{bottom:48px;width:200px;height:86px}
.r42-pedestal-2{bottom:20px;width:245px;height:92px;border-color:rgba(63,218,255,.7)}
.r42-pedestal-3{bottom:-8px;width:295px;height:100px;border-color:rgba(52,106,255,.42)}

.r42-float-platform{
  position:absolute;
  z-index:7;
  width:80px;height:80px;
  display:grid;place-items:center;
  border-radius:20px;
  filter:drop-shadow(0 16px 18px rgba(0,0,0,.35));
  animation:r42Float 4.4s ease-in-out infinite;
}
.r42-float-platform .connection-platform-icon{
  width:100%!important;height:100%!important;
  border-radius:20px!important;
  box-shadow:0 0 24px rgba(30,136,255,.36)!important;
}
.r42-float-platform .connection-platform-icon svg{width:54px!important;height:54px!important}
.r42-fb{left:22%;top:26%;transform:rotate(-8deg);animation-delay:.25s}
.r42-tiktok{left:45%;top:4%;animation-delay:.65s}
.r42-tiktok-shop{right:21%;top:25%;transform:rotate(7deg);animation-delay:1s}
.r42-shopee{right:5%;top:41%;transform:rotate(6deg);animation-delay:1.35s}

.r42-orbit-badge{
  position:absolute;
  z-index:10;
  display:grid;
  grid-template-columns:38px auto;
  align-items:center;
  gap:10px;
  min-width:174px;
  padding:10px 13px;
  border-radius:14px;
  border:1px solid rgba(65,145,255,.35);
  background:linear-gradient(145deg,rgba(7,27,65,.89),rgba(7,22,53,.90));
  box-shadow:0 12px 28px rgba(0,0,0,.23),0 0 18px rgba(31,116,255,.08);
  backdrop-filter:blur(8px);
  animation:r42BadgeFloat 5s ease-in-out infinite;
}
.r42-orbit-badge svg{
  width:32px;height:32px;
  fill:none;stroke:#6cc7ff;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;
}
.r42-orbit-badge b{font-size:11px;line-height:1.35;color:#dbe9ff}
.r42-badge-top-left{left:3%;top:4%}
.r42-badge-top-right{right:2%;top:5%;animation-delay:.8s}
.r42-badge-bottom-left{left:4%;bottom:7%;animation-delay:1.6s}
.r42-badge-bottom-right{right:2%;bottom:10%;animation-delay:2.3s}

.r42-platform-grid{
  max-width:1540px;
  margin:0 auto 18px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}

.r42-platform-card{
  position:relative;
  overflow:hidden;
  min-height:240px;
  padding:19px 20px 18px;
  border-radius:20px;
  border:1px solid rgba(43,132,226,.46);
  background:
    radial-gradient(circle at 100% 0%,rgba(49,87,182,.12),transparent 38%),
    linear-gradient(155deg,rgba(8,35,74,.96),rgba(6,24,55,.96));
  box-shadow:inset 0 0 26px rgba(24,97,188,.045),0 13px 36px rgba(0,0,0,.18);
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;
}
.r42-platform-card::before{
  content:"";
  position:absolute;
  inset:-100% 60% -100% -30%;
  width:28%;
  transform:rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(107,210,255,.08),transparent);
  animation:r42CardSweep 8s ease-in-out infinite;
}
.r42-platform-card:hover{
  transform:translateY(-5px) perspective(700px) rotateX(1.2deg);
  border-color:rgba(51,165,255,.86);
  box-shadow:0 20px 42px rgba(0,0,0,.26),0 0 22px rgba(29,121,255,.11);
}
.r42-platform-card.is-connected{border-color:rgba(45,139,255,.78)}
.r42-platform-card header{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.r42-platform-icon{
  width:60px;height:60px;display:grid;place-items:center;
}
.r42-platform-icon .connection-platform-icon{
  width:60px!important;height:60px!important;border-radius:15px!important;
}
.r42-platform-icon .connection-platform-icon svg{width:38px!important;height:38px!important}
.r42-status-pill{
  display:inline-flex;align-items:center;gap:7px;
  min-height:29px;padding:5px 11px;border-radius:999px;
  color:#c6d4e8;background:rgba(91,117,160,.17);
  font-size:11px;font-weight:700;
}
.r42-status-pill i{
  width:8px;height:8px;border-radius:50%;
  background:#a3c7ef;box-shadow:0 0 9px rgba(135,193,255,.75);
}
.is-connected .r42-status-pill{color:#55f4c6;background:rgba(0,169,130,.14)}
.is-connected .r42-status-pill i{background:#19e7ae;box-shadow:0 0 10px #14d9a4;animation:r42Pulse 1.8s ease-in-out infinite}
.needs-reauth .r42-status-pill{color:#ffd66e;background:rgba(182,117,0,.15)}
.needs-reauth .r42-status-pill i{background:#ffbc39}

.r42-platform-card h3{
  position:relative;z-index:2;margin:13px 0 6px;
  font-size:23px;letter-spacing:-.025em;
}
.r42-platform-card p{
  position:relative;z-index:2;
  min-height:50px;margin:0;color:#b3c2d9;font-size:13px;line-height:1.45;
}
.r42-account-live{
  position:relative;z-index:2;
  display:block;margin-top:4px;color:#68dff9;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.r42-platform-cta{
  position:absolute;z-index:3;
  left:20px;right:20px;bottom:16px;
  height:42px;
  display:flex;align-items:center;justify-content:center;
  border-radius:12px;
  border:1px solid #247bdf;
  background:linear-gradient(90deg,rgba(7,38,85,.98),rgba(8,42,95,.98));
  color:#3cc8ff!important;
  font-size:13px;font-weight:800;
  text-decoration:none!important;
  transition:.2s ease;
}
.r42-platform-card:not(.is-connected) .r42-platform-cta{
  border-color:#37b8ff;
  background:linear-gradient(90deg,#1a78ff,#3b72ff);
  color:#fff!important;
  box-shadow:0 0 18px rgba(35,134,255,.27);
}
.r42-platform-cta:hover{
  filter:brightness(1.09);
  transform:translateY(-1px);
}
.r42-platform-watermark{
  position:absolute;
  right:-26px;bottom:32px;
  width:120px;height:120px;
  opacity:.09;
  transform:rotate(-8deg);
  pointer-events:none;
}
.r42-platform-watermark .connection-platform-icon{width:120px!important;height:120px!important;background:transparent!important;border:0!important;box-shadow:none!important}
.r42-platform-watermark .connection-platform-icon svg{width:100px!important;height:100px!important}

.r42-sync-board{
  position:relative;
  max-width:1540px;
  min-height:260px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.45fr .95fr;
  overflow:hidden;
  border-radius:24px;
  border:1px solid rgba(42,145,255,.70);
  background:
    radial-gradient(circle at 76% 30%,rgba(32,93,220,.14),transparent 31%),
    linear-gradient(155deg,rgba(5,28,62,.98),rgba(4,19,45,.99));
  box-shadow:0 0 28px rgba(28,107,255,.08),inset 0 0 24px rgba(48,141,255,.035);
}
.r42-sync-board::before{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  background:linear-gradient(110deg,transparent 38%,rgba(72,182,255,.035) 49%,transparent 60%);
  animation:r42Sweep 8s ease-in-out infinite;
}
.r42-sync-main{
  position:relative;
  padding:22px 24px 20px;
  border-right:1px solid rgba(47,126,208,.30);
}
.r42-sync-main>header{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
}
.r42-sync-main>header h2{
  margin:0 0 5px;display:flex;align-items:center;gap:10px;font-size:21px;
}
.r42-sync-main>header h2 svg{width:30px;height:30px;fill:none;stroke:#52aaff;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.r42-sync-main>header p{margin:0;color:#a9b8d0;font-size:13px}
.r42-sync-all{
  height:42px;
  display:flex;align-items:center;gap:8px;
  padding:0 15px;border-radius:12px;
  border:1px solid #287fe3;
  background:linear-gradient(145deg,#082e65,#09234f);
  color:#49caff;font-weight:800;font-size:12px;
  box-shadow:0 0 18px rgba(22,114,255,.08);
}
.r42-sync-all svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.r42-sync-all.is-loading svg{animation:r42Spin 1s linear infinite}
.r42-metric-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px;
}
.r42-metric-card{
  position:relative;overflow:hidden;
  min-height:125px;padding:14px 14px 34px;
  border-radius:15px;border:1px solid rgba(49,116,202,.34);
  background:linear-gradient(145deg,rgba(8,39,82,.86),rgba(6,27,61,.92));
}
.r42-metric-card>div:not(.r42-spark){margin-left:49px}
.r42-metric-icon{
  position:absolute;left:12px;top:12px;
  width:39px;height:39px;display:grid;place-items:center;border-radius:12px;
  background:rgba(29,99,207,.34);color:#53a8ff;
  box-shadow:0 0 18px rgba(31,119,255,.10);
}
.r42-metric-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.r42-metric-card small{display:block;color:#aebdd3;font-size:11px}
.r42-metric-card strong{display:block;margin:2px 0 1px;color:#fff;font-size:21px}
.r42-metric-card em{font-size:11px;font-style:normal;font-weight:800}
.r42-spark{
  position:absolute;left:10px;right:10px;bottom:6px;height:28px;
}
.r42-spark svg{width:100%;height:100%;overflow:visible}
.r42-spark-line{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:180;stroke-dashoffset:180;animation:r42Draw 3.6s ease-in-out infinite alternate}
.r42-spark-area{fill:currentColor;opacity:.08}
.tone-1{color:#29a8ff}.tone-2{color:#a65fff}.tone-3{color:#22dc9c}.tone-4{color:#ffbd32}
.r42-live-foot{
  margin-top:12px;display:flex;justify-content:space-between;gap:12px;
  color:#8fa8c6;font-size:10px;
}
.r42-live-foot span:first-child{display:flex;align-items:center;gap:7px}
.r42-live-foot i{width:7px;height:7px;border-radius:50%;background:#19dfa7;box-shadow:0 0 10px #16c996;animation:r42Pulse 1.7s ease-in-out infinite}

.r42-live-preview{
  position:relative;
  min-height:270px;
  display:grid;
  grid-template-columns:115px 1fr 1.15fr;
  align-items:center;
  gap:10px;
  padding:18px 18px 16px;
  overflow:hidden;
}
.r42-live-preview::before{
  content:"";
  position:absolute;
  inset:14% 16%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(33,126,255,.18),transparent 64%);
  filter:blur(10px);
  animation:r42Ambient 7s ease-in-out infinite;
}
.r42-channel-stack{
  position:relative;z-index:2;display:flex;flex-direction:column;gap:8px;
}
.r42-channel-stack span{
  display:flex;align-items:center;gap:6px;
  min-height:31px;padding:4px 7px;border-radius:10px;
  border:1px solid rgba(51,129,230,.30);
  background:rgba(5,28,63,.88);
  color:#d7e8ff;font-size:8px;
  box-shadow:0 0 14px rgba(30,112,255,.06);
}
.r42-channel-stack .connection-platform-icon{width:21px!important;height:21px!important;border-radius:7px!important}
.r42-channel-stack .connection-platform-icon svg{width:14px!important;height:14px!important}

.r42-device-card{
  position:relative;z-index:2;
  height:198px;
  display:grid;place-items:center;
  border-radius:26px;
  transform:perspective(600px) rotateY(-6deg) rotateX(2deg);
  animation:r42DeviceFloat 5s ease-in-out infinite;
}
.r42-device-card::before{
  content:"";
  position:absolute;
  width:114px;height:178px;
  border-radius:22px;
  border:5px solid #1b3e85;
  background:linear-gradient(160deg,#14346c,#081b3c);
  box-shadow:0 0 0 1px #5c8eff inset,0 18px 30px rgba(0,0,0,.35),0 0 24px rgba(35,110,255,.18);
}
.r42-device-glow{
  position:absolute;
  width:150px;height:130px;border-radius:50%;
  background:#145dff;filter:blur(40px);opacity:.18;
}
.r42-product-stage{
  position:relative;z-index:3;
  width:96px;height:120px;
  display:grid;place-items:center;
  border-radius:15px;
  overflow:hidden;
  background:linear-gradient(145deg,#123875,#071a3c);
}
.r42-product-stage img{width:100%;height:100%;object-fit:cover}
.r42-product-placeholder{font-size:48px;color:#69c7ff;text-shadow:0 0 18px #2589ff}

.r42-content-live{
  position:relative;z-index:2;
  min-height:190px;padding:10px;
  border-radius:16px;
  border:1px solid rgba(52,133,230,.32);
  background:linear-gradient(155deg,rgba(8,31,70,.93),rgba(4,23,54,.95));
  box-shadow:0 16px 30px rgba(0,0,0,.18);
}
.r42-content-live>header{
  display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;
}
.r42-content-live>header b{font-size:10px;color:#dbe8fa}
.r42-content-live>header span{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 7px;border-radius:999px;background:rgba(0,180,125,.18);color:#4eebbd;font-size:7px;font-weight:800;
}
.r42-content-live>header i{width:5px;height:5px;border-radius:50%;background:#25e9ad;animation:r42Pulse 1.5s ease-in-out infinite}
.r42-content-live-list{display:flex;flex-direction:column;gap:6px}
.r42-content-row{
  min-height:42px;display:grid;grid-template-columns:38px 1fr;gap:8px;align-items:center;
  padding:4px 5px;border-radius:9px;background:rgba(10,43,87,.56);
  animation:r42RowIn .55s both;
}
.r42-content-row:nth-child(2){animation-delay:.1s}.r42-content-row:nth-child(3){animation-delay:.2s}
.r42-content-row>span{width:38px;height:32px;display:grid;place-items:center;border-radius:7px;overflow:hidden;background:#0d3268;color:#68c8ff}
.r42-content-row img{width:100%;height:100%;object-fit:cover}
.r42-content-row b{display:block;max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#f4f9ff;font-size:8px}
.r42-content-row small{display:block;margin-top:2px;color:#6fe2c4;font-size:6px}
.r42-content-empty{padding:20px 8px;color:#8da7c8;font-size:9px;line-height:1.5;text-align:center}

@keyframes r42Sweep{0%,100%{transform:translateX(-45%)}50%{transform:translateX(45%)}}
@keyframes r42Ambient{0%,100%{transform:scale(.9);opacity:.08}50%{transform:scale(1.12);opacity:.16}}
@keyframes r42Spin{to{transform:rotate(360deg)}}
@keyframes r42PanelShine{0%,22%{transform:translateX(-100%) rotate(18deg)}58%,100%{transform:translateX(510%) rotate(18deg)}}
@keyframes r42Orbit{to{transform:translate(-50%,-50%) rotate(352deg)}}
@keyframes r42OrbitReverse{to{transform:translate(-50%,-50%) rotate(-368deg)}}
@keyframes r42CoreFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-9px) rotate(1deg)}}
@keyframes r42Float{0%,100%{margin-top:0}50%{margin-top:-11px}}
@keyframes r42BadgeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes r42Twinkle{0%,100%{opacity:.25;transform:scale(.6)}50%{opacity:1;transform:scale(1.4)}}
@keyframes r42CardSweep{0%,28%{transform:translateX(-160%) rotate(18deg)}60%,100%{transform:translateX(500%) rotate(18deg)}}
@keyframes r42Pulse{0%,100%{opacity:.55;transform:scale(.9)}50%{opacity:1;transform:scale(1.25)}}
@keyframes r42Draw{to{stroke-dashoffset:0}}
@keyframes r42DeviceFloat{0%,100%{transform:perspective(600px) rotateY(-6deg) rotateX(2deg) translateY(0)}50%{transform:perspective(600px) rotateY(-3deg) rotateX(1deg) translateY(-7px)}}
@keyframes r42RowIn{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .connections-r42 *,
  .connections-r42 *::before,
  .connections-r42 *::after{animation-duration:.001ms!important;animation-iteration-count:1!important}
}

@media(max-width:1280px){
  .r42-hero{grid-template-columns:1fr 1fr}
  .r42-orbit-visual{min-height:340px}
  .r42-orbit-badge{min-width:150px;padding:8px 10px}
  .r42-platform-grid{grid-template-columns:repeat(2,1fr)}
  .r42-sync-board{grid-template-columns:1.15fr .85fr}
  .r42-metric-grid{grid-template-columns:repeat(2,1fr)}
  .r42-live-preview{grid-template-columns:90px 1fr}
  .r42-content-live{grid-column:1/-1}
}

@media(max-width:900px){
  .connections-r42{padding:12px}
  .r42-hero{grid-template-columns:1fr}
  .r42-orbit-visual{min-height:360px}
  .r42-platform-grid{grid-template-columns:repeat(2,1fr)}
  .r42-sync-board{grid-template-columns:1fr}
  .r42-sync-main{border-right:0;border-bottom:1px solid rgba(47,126,208,.30)}
  .r42-live-preview{grid-template-columns:105px 1fr 1.1fr}
  .r42-content-live{grid-column:auto}
}

@media(max-width:640px){
  .r42-hero-copy>h1{font-size:42px}
  .r42-hero-copy>p{font-size:14px}
  .r42-smart-benefits{grid-template-columns:1fr;gap:8px}
  .r42-smart-benefits>div+div{padding-left:0;border-left:0}
  .r42-orbit-visual{min-height:325px}
  .r42-orbit-badge{display:none}
  .r42-ring-a{width:90%}.r42-ring-b{width:74%}.r42-ring-c{width:105%}
  .r42-float-platform{width:62px;height:62px}
  .r42-float-platform .connection-platform-icon{width:62px!important;height:62px!important}
  .r42-fb{left:5%;top:29%}.r42-tiktok{left:38%;top:3%}.r42-tiktok-shop{right:16%;top:22%}.r42-shopee{right:2%;top:48%}
  .r42-platform-grid{grid-template-columns:1fr}
  .r42-sync-main>header{flex-direction:column}
  .r42-metric-grid{grid-template-columns:repeat(2,1fr)}
  .r42-live-preview{grid-template-columns:76px 1fr}
  .r42-content-live{grid-column:1/-1}
}