/* FGX — RocketGoGo case study
   Sits on the shared FGX project template (same layout and type as Wetility) and adds
   RocketGoGo-branded, scroll-driven showcase modules (prefix .rg-). */

/* ---------- page tokens ---------- */
.project-rocketgogo {
  --accent: #a855f7;
  --rg-bg: #08060d;
  --rg-bg-2: #120c1f;
  --rg-panel: rgba(20, 14, 32, .78);
  --rg-panel-2: rgba(28, 20, 44, .9);
  --rg-line: rgba(255, 255, 255, .08);
  --rg-line-2: rgba(255, 255, 255, .14);
  --rg-text: #f4eefb;
  --rg-soft: #c7bfd4;
  --rg-muted: #8f849e;
  --rg-violet: #c084fc;
  --rg-purple: #a855f7;
  --rg-deep: #7c3aed;
  --rg-green: #4ade80;
  --rg-green-2: #5bc28d;
  --rg-blue: #60a5fa;
  --rg-orange: #ff7a4e;
  --rg-display: "Bricolage Grotesque", "Inter", sans-serif;
  --rg-sans: "Inter", -apple-system, "Segoe UI", sans-serif;
  --rg-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}

/* same approved body-copy treatment as Wetility / Pilot */
.project-rocketgogo :is(.manifest.manifest-s, .split-info__details p, .split-data__descr p, .mxd-testimonials-project__manifest p) {
  font-family: "DM Sans", sans-serif; font-size: clamp(15px, 1.15vw, 20px); font-weight: 500; line-height: 1.3; letter-spacing: -0.02em;
}
.project-rocketgogo :is(.manifest.manifest-s, .split-info__details p, .split-data__descr p, .mxd-testimonials-project__manifest p) :is(span, a) { font: inherit; letter-spacing: inherit; }
@media (max-width: 767px) {
  .project-rocketgogo :is(.manifest.manifest-s, .split-info__details p, .split-data__descr p, .mxd-testimonials-project__manifest p) { font-size: 16px; }
}
.project-rocketgogo .split-info__details a { color: inherit; text-decoration: underline; text-underline-offset: .2em; text-decoration-color: var(--rg-purple); }

/* full-bleed media rows, as on Wetility */
.project-rocketgogo #mxd-page-content .mxd-container.fullwidth-container:has(.mxd-images-grid) {
  width: 100vw; max-width: none; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: 0; padding-right: 0;
}
.project-rocketgogo #mxd-page-content .mxd-images-grid, .project-rocketgogo #mxd-page-content .mxd-images-grid > .container-fluid { width: 100%; max-width: none; }

/* every rg module paints its own branded surface */
.rg-cell { position: absolute; inset: 0; overflow: hidden; background: var(--rg-bg); color: var(--rg-text); font-family: var(--rg-sans); isolation: isolate; }
.rg-cell::before { /* starfield + violet glow */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 68% 14%, rgba(255,255,255,.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 84% 62%, rgba(255,255,255,.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 32% 78%, rgba(255,255,255,.3) 50%, transparent 51%),
    radial-gradient(1px 1px at 52% 44%, rgba(192,132,252,.6) 50%, transparent 51%),
    radial-gradient(80% 70% at 30% 0%, rgba(124, 58, 237, .28), transparent 60%),
    radial-gradient(70% 60% at 100% 100%, rgba(168, 85, 247, .16), transparent 60%);
}
.project-rocketgogo .mxd-images-grid__item.wide .mxd-images-grid__inner { aspect-ratio: 16 / 8; }
@media (max-width: 991px) {
  .project-rocketgogo .mxd-images-grid__item.wide .mxd-images-grid__inner { aspect-ratio: 4 / 5; }
  .project-rocketgogo .mxd-images-grid__item:not(.wide) .mxd-images-grid__inner { aspect-ratio: 4 / 3.6; }
}
.rg-window { background: var(--rg-panel); border: 1px solid var(--rg-line); border-radius: 16px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.04); backdrop-filter: blur(8px); }
.rg-window__bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--rg-line); font: 500 12px/1 var(--rg-mono); color: var(--rg-muted); }
.rg-dots { display: inline-flex; gap: 6px; }
.rg-dots i { width: 9px; height: 9px; border-radius: 50%; background: #ef4444; }
.rg-dots i:nth-child(2) { background: #f59e0b; } .rg-dots i:nth-child(3) { background: #22c55e; }
.rg-eyebrow { font: 600 11px/1 var(--rg-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--rg-violet); display: inline-flex; align-items: center; gap: 10px; }
.rg-eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; }
.rg-k { color: var(--rg-violet); } .rg-s { color: #86efac; } .rg-n { color: #fcd34d; } .rg-c { color: #6b6280; } .rg-b { color: var(--rg-blue); } .rg-g { color: var(--rg-green); }

/* ---------- 01 Stage: the live site scrolling inside a studio display ---------- */
.rg-stage { position: relative; background: var(--rg-bg); overflow: hidden; color: var(--rg-text); }
.rg-stage__pin { position: relative; height: 100vh; min-height: 640px; display: grid; place-items: center; perspective: 1800px; overflow: hidden; }
.rg-stage__sky { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(1.2px 1.2px at 8% 18%, rgba(255,255,255,.55) 50%, transparent 52%),
    radial-gradient(1px 1px at 22% 72%, rgba(255,255,255,.4) 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 44% 12%, rgba(192,132,252,.8) 50%, transparent 52%),
    radial-gradient(1px 1px at 61% 84%, rgba(255,255,255,.4) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 78% 26%, rgba(255,255,255,.5) 50%, transparent 52%),
    radial-gradient(1px 1px at 91% 64%, rgba(192,132,252,.7) 50%, transparent 52%),
    radial-gradient(1px 1px at 35% 40%, rgba(255,255,255,.3) 50%, transparent 52%),
    radial-gradient(90% 70% at 50% 110%, rgba(124, 58, 237, .45), transparent 60%),
    radial-gradient(60% 50% at 50% -10%, rgba(168, 85, 247, .22), transparent 60%);
}
.rg-stage__orb { position: absolute; width: min(70vw, 980px); aspect-ratio: 1; border-radius: 50%; left: 50%; top: 58%; translate: -50% -50%;
  background: radial-gradient(circle at 34% 30%, #e9d5ff 0%, #c084fc 16%, #8b5cf6 38%, #4c1d95 64%, rgba(30, 10, 60, 0) 72%);
  filter: blur(2px); opacity: .55; pointer-events: none; }
.rg-stage__ring { position: absolute; left: 50%; top: 58%; translate: -50% -50%; border-radius: 50%; border: 1px dashed rgba(192,132,252,.22); pointer-events: none; }
.rg-stage__ring--1 { width: min(86vw, 1220px); aspect-ratio: 1; }
.rg-stage__ring--2 { width: min(104vw, 1480px); aspect-ratio: 1; border-style: solid; border-color: rgba(192,132,252,.08); }
.rg-display { position: relative; z-index: 2; width: min(74vw, 1120px, calc((100vh - 250px) * 1.6)); margin-top: 4vh; transform-style: preserve-3d; will-change: transform; }
.rg-display__frame { position: relative; padding: 14px; border-radius: 22px; background: linear-gradient(180deg, #2a2733, #121019); box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 60px 140px -40px rgba(124,58,237,.65), 0 30px 60px -20px rgba(0,0,0,.9); }
.rg-display__frame::after { content: ""; position: absolute; top: 5px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #3a3644; }
.rg-display__screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 9px; background: var(--rg-bg); }
.rg-display__shot { position: absolute; left: 0; top: 0; width: 100%; height: auto; max-width: none; display: block; will-change: transform; }
.rg-display__screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 32%); }
.rg-display__neck { width: 16%; height: clamp(40px, 7vh, 80px); margin: 0 auto; background: linear-gradient(90deg, #8e8b96, #d9d6de 45%, #9a97a3); clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%); }
.rg-display__foot { width: 30%; height: 10px; margin: 0 auto; border-radius: 0 0 8px 8px; background: linear-gradient(90deg, #77737f, #c9c6cf 45%, #8a8792); box-shadow: 0 24px 40px -10px rgba(0,0,0,.8); }
.rg-chip { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; background: rgba(18, 13, 30, .86); border: 1px solid var(--rg-line-2); box-shadow: 0 20px 50px -20px rgba(0,0,0,.9), 0 0 40px -16px rgba(168,85,247,.6); font: 500 13px/1.2 var(--rg-sans); color: var(--rg-text); backdrop-filter: blur(10px); white-space: nowrap; will-change: transform; }
.rg-chip small { display: block; font: 600 10px/1 var(--rg-sans); letter-spacing: .14em; color: var(--rg-muted); margin-bottom: 6px; }
.rg-chip b { font: 600 22px/1 var(--rg-mono); color: var(--rg-violet); }
.rg-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--rg-green); box-shadow: 0 0 12px var(--rg-green); }
.rg-chip em { font: 500 12px/1 var(--rg-mono); font-style: normal; color: var(--rg-muted); }
.rg-chip--sent { display: block; top: 16%; right: 7%; }
.rg-chip--ok { bottom: 20%; left: 6%; }
.rg-chip--email { top: 22%; left: 8%; } .rg-chip--email i { background: var(--rg-violet); box-shadow: 0 0 12px var(--rg-violet); }
.rg-chip--sms { top: 33%; left: 4%; } .rg-chip--sms i { background: var(--rg-blue); box-shadow: 0 0 12px var(--rg-blue); }
.rg-chip--wa { bottom: 28%; right: 5%; }
.rg-stage__caption { position: absolute; z-index: 3; left: 50%; bottom: 4.5vh; translate: -50% 0; display: flex; align-items: center; gap: 16px; font: 500 12px/1 var(--rg-mono); color: var(--rg-muted); letter-spacing: .06em; text-transform: uppercase; }
.rg-stage__bar { position: relative; width: 140px; height: 2px; background: rgba(255,255,255,.12); border-radius: 2px; overflow: hidden; }
.rg-stage__bar i { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--rg-orange), var(--rg-violet), var(--rg-deep)); }
@media (max-width: 991px) {
  .rg-stage__pin { height: auto; min-height: 0; padding: 18vw 0 22vw; }
  .rg-display { width: 90vw; }
  .rg-display__frame { padding: 8px; border-radius: 14px; }
  .rg-chip { padding: 9px 12px; font-size: 11px; }
  .rg-chip b { font-size: 16px; }
  .rg-chip--email, .rg-chip--sms { display: none; }
  .rg-chip--sent { top: 4vw; right: 4vw; } .rg-chip--ok { bottom: 8vw; left: 4vw; } .rg-chip--wa { bottom: 8vw; right: 4vw; }
  .rg-stage__caption { display: none; }
}

/* ---------- 02 Flow: one event, three channels ---------- */
.rg-flow { display: grid; grid-template-columns: 1.15fr .7fr 1.15fr; align-items: center; gap: 2vw; padding: 0 5vw; }
.rg-flow__svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: visible; }
.rg-flow__svg path { fill: none; stroke: url(#rgBeam); stroke-width: 2; stroke-linecap: round; }
.rg-flow__svg .rg-flow__ghost { stroke: rgba(192,132,252,.14); stroke-dasharray: 4 6; }
.rg-flow > :not(.rg-flow__svg) { position: relative; z-index: 1; }
.rg-code { padding: 0; }
.rg-code__head { display: flex; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--rg-line); font: 600 11px/1 var(--rg-mono); color: var(--rg-muted); letter-spacing: .08em; }
.rg-code__head b { color: var(--rg-violet); display: inline-flex; align-items: center; gap: 8px; }
.rg-code__head b::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.rg-code pre { margin: 0; padding: 18px 20px 22px; font: 400 clamp(11px, .95vw, 15px)/1.75 var(--rg-mono); color: var(--rg-soft); white-space: pre; overflow: hidden; }
.rg-code__l { display: block; }
.rg-hub { display: grid; place-items: center; position: relative; aspect-ratio: 1; }
.rg-hub__orb { width: 56%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #f3e8ff 0%, #c084fc 22%, #7c3aed 62%, #3b0f75 100%); box-shadow: 0 0 80px rgba(168,85,247,.55), inset -10px -14px 30px rgba(40,10,80,.6); display: grid; place-items: center; }
.rg-hub__orb svg { width: 46%; height: auto; }
.rg-hub__ring { position: absolute; inset: 6%; border-radius: 50%; border: 1px dashed rgba(192,132,252,.35); animation: rg-spin 24s linear infinite; }
.rg-hub__ring::after { content: ""; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--rg-violet); box-shadow: 0 0 14px var(--rg-violet); }
.rg-hub__ring--2 { inset: -6%; border-style: solid; border-color: rgba(192,132,252,.12); animation-duration: 40s; animation-direction: reverse; }
.rg-hub__label { position: absolute; bottom: -2%; font: 600 11px/1 var(--rg-mono); letter-spacing: .14em; color: var(--rg-violet); padding: 7px 12px; border-radius: 999px; background: rgba(168,85,247,.12); border: 1px solid rgba(168,85,247,.3); }
@keyframes rg-spin { to { transform: rotate(360deg); } }
.rg-msgs { display: grid; gap: 14px; }
.rg-msg { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 14px; background: rgba(255,255,255,.035); border: 1px solid var(--rg-line); }
.rg-msg__dot { width: 9px; height: 9px; border-radius: 50%; }
.rg-msg b { display: block; font: 600 clamp(13px, 1.05vw, 16px)/1.2 var(--rg-sans); }
.rg-msg span { display: block; margin-top: 4px; font: 400 clamp(11px, .85vw, 13px)/1.3 var(--rg-sans); color: var(--rg-muted); }
.rg-msg__st { font: 600 clamp(10px, .8vw, 12px)/1 var(--rg-mono); padding: 6px 10px; border-radius: 999px; color: var(--rg-muted); border: 1px solid var(--rg-line); transition: color .3s, background .3s, border-color .3s; }
.rg-msg__st.is-done { color: var(--rg-green); background: rgba(74,222,128,.08); border-color: rgba(74,222,128,.25); }
@media (max-width: 991px) {
  .rg-flow { grid-template-columns: 1fr; gap: 6vw; padding: 8vw 5vw; align-content: center; }
  .rg-hub { width: 34%; margin: 0 auto; }
  .rg-hub__label { display: none; }
  .rg-code pre { font-size: 10.5px; padding: 12px 14px 14px; }
  .rg-msg { padding: 10px 12px; gap: 10px; }
  .rg-flow__svg { display: none; }
}

/* ---------- 03 Terminal ---------- */
.rg-term-wrap { display: grid; place-items: center; padding: 7% 8%; }
.rg-term { width: 100%; max-width: 640px; }
.rg-term__body { padding: 20px 22px 26px; min-height: 15.5em; font: 400 clamp(11px, 1vw, 15px)/1.85 var(--rg-mono); color: var(--rg-soft); }
.rg-term__body p { margin: 0; white-space: pre; }
.rg-term__body .p { color: var(--rg-violet); }
.rg-term__body .ok { color: var(--rg-green); }
.rg-term__body .dim { color: #7a7090; padding-left: 1.3em; }
.rg-caret { display: inline-block; width: .6em; height: 1.1em; vertical-align: -.2em; background: var(--rg-violet); animation: rg-blink 1s steps(1) infinite; }
@keyframes rg-blink { 50% { opacity: 0; } }
.rg-term-wrap .rg-eyebrow { position: absolute; left: 8%; top: 7%; }

/* ---------- 04 Phone: notifications arrive ---------- */
.rg-phone-wrap { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6%; padding: 0 9%; }
.rg-phone-copy h3 { margin: 18px 0 12px; font: 700 clamp(22px, 2.3vw, 40px)/1.02 var(--rg-display); letter-spacing: -.03em; color: var(--rg-text); }
.rg-phone-copy p { margin: 0; font: 400 clamp(13px, 1vw, 16px)/1.5 var(--rg-sans); color: var(--rg-soft); max-width: 30ch; }
.rg-phone { position: relative; height: 90%; aspect-ratio: 9 / 19; border-radius: 42px; padding: 10px; background: linear-gradient(160deg, #3a3546, #15121c); box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 40px 90px -30px rgba(124,58,237,.7); align-self: center; }
.rg-phone__screen { position: relative; height: 100%; border-radius: 33px; overflow: hidden; background: radial-gradient(120% 70% at 50% 0%, #6d28d9 0%, #2e1065 45%, #0b0714 100%); }
.rg-phone__island { position: absolute; top: 10px; left: 50%; width: 30%; height: 20px; margin-left: -15%; border-radius: 12px; background: #000; z-index: 2; }
.rg-phone__time { padding-top: 16%; text-align: center; font: 300 clamp(30px, 2.8vw, 48px)/1 var(--rg-display); color: #fff; letter-spacing: -.02em; }
.rg-phone__date { text-align: center; margin-top: 6px; font: 500 12px/1 var(--rg-sans); color: rgba(255,255,255,.75); }
.rg-notes { position: absolute; left: 5%; right: 5%; bottom: 6%; display: grid; gap: 6px; }
.rg-note { display: grid; grid-template-columns: auto 1fr; gap: 8px; padding: 8px 9px; border-radius: 16px; background: rgba(255,255,255,.16); backdrop-filter: blur(14px); color: #fff; }
.rg-note__icon { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font: 700 12px/1 var(--rg-sans); }
.rg-note__icon--wa { background: #25d366; } .rg-note__icon--sms { background: #34c759; } .rg-note__icon--mail { background: linear-gradient(135deg, #ff7a4e, #a855f7); }
.rg-note__icon svg { width: 15px; height: 15px; }
.rg-note b { display: flex; justify-content: space-between; gap: 6px; font: 600 clamp(9px, .72vw, 11px)/1.2 var(--rg-sans); }
.rg-note b em { font-style: normal; font-weight: 400; opacity: .7; }
.rg-note span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; font: 400 clamp(9px, .7vw, 11px)/1.3 var(--rg-sans); opacity: .92; }
@media (max-width: 991px) {
  .rg-phone-wrap { grid-template-columns: 1fr; padding: 6% 8%; justify-items: center; }
  .rg-phone-copy { display: none; }
  .rg-phone { height: 92%; }
}

/* ---------- 05 Delivery log ---------- */
.rg-log-wrap { padding: 7% 6%; display: grid; align-content: center; }
.rg-log { overflow: hidden; }
.rg-log__table { width: 100%; border-collapse: collapse; font: 400 clamp(10px, .82vw, 13px)/1 var(--rg-mono); }
.rg-log__table th { text-align: left; padding: 12px 14px; font: 600 10px/1 var(--rg-sans); letter-spacing: .14em; color: var(--rg-muted); border-bottom: 1px solid var(--rg-line); }
.rg-log__table td { padding: 11px 14px; border-bottom: 1px solid rgba(255,255,255,.04); color: var(--rg-soft); white-space: nowrap; }
.rg-log__table td:first-child { color: #7a7090; }
.rg-tag { display: inline-block; padding: 4px 7px; border-radius: 6px; font: 600 10px/1 var(--rg-mono); letter-spacing: .06em; }
.rg-tag--email { color: var(--rg-violet); background: rgba(168,85,247,.15); }
.rg-tag--sms { color: var(--rg-blue); background: rgba(96,165,250,.15); }
.rg-tag--whatsapp { color: var(--rg-green); background: rgba(74,222,128,.12); }
.rg-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font: 500 11px/1 var(--rg-mono); color: var(--rg-violet); background: rgba(168,85,247,.12); border: 1px solid rgba(168,85,247,.25); }
.rg-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.rg-pill.is-ok { color: var(--rg-green); background: rgba(74,222,128,.08); border-color: rgba(74,222,128,.25); }
.rg-log__search { margin-left: auto; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid var(--rg-line); }
.rg-live { display: inline-flex; align-items: center; gap: 6px; color: var(--rg-green); }
.rg-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: rg-blink 1.4s steps(1) infinite; }
@media (max-width: 767px) { .rg-log__table .rg-hide-sm { display: none; } .rg-log-wrap { padding: 6% 4%; } }

/* ---------- 06 Cloudflare DNS ---------- */
.rg-dns-wrap { padding: 7% 7%; display: grid; align-content: center; gap: 22px; }
.rg-dns-wrap h3 { margin: 0; font: 700 clamp(20px, 2vw, 34px)/1.05 var(--rg-display); letter-spacing: -.03em; color: var(--rg-text); }
.rg-dns-wrap h3 em { font-style: normal; color: var(--rg-violet); }
.rg-dns__state { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font: 600 11px/1 var(--rg-mono); letter-spacing: .1em; color: var(--rg-muted); }
.rg-dns__state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.rg-dns__state.is-on { color: var(--rg-green); }
.rg-dns__row { display: grid; grid-template-columns: 64px 1.1fr 1.6fr 96px; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid rgba(255,255,255,.04); font: 400 clamp(10px, .8vw, 13px)/1.2 var(--rg-mono); color: var(--rg-soft); }
.rg-dns__row > span:nth-child(3) { color: #7a7090; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rg-dns__row > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rg-dns__type { text-align: center; padding: 5px 0; border-radius: 6px; font-weight: 600; color: var(--rg-violet); background: rgba(168,85,247,.14); }
.rg-dns__st { justify-self: end; font: 600 10px/1 var(--rg-mono); letter-spacing: .1em; color: var(--rg-muted); }
.rg-dns__st[data-s="pushed"] { color: var(--rg-blue); }
.rg-dns__st[data-s="verified"] { color: var(--rg-green); }
.rg-dns__st[data-s="verified"]::before { content: "✓ "; }
.rg-dns__foot { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; font: 500 11px/1 var(--rg-mono); color: var(--rg-muted); }
.rg-dns__foot b { color: var(--rg-violet); } .rg-dns__foot i { font-style: normal; color: var(--rg-green); padding: 3px 6px; border-radius: 4px; background: rgba(74,222,128,.12); }
@media (max-width: 767px) { .rg-dns__row { grid-template-columns: 52px 1fr 80px; } .rg-dns__row > span:nth-child(3) { display: none; } .rg-dns-wrap { padding: 6% 5%; } }

/* ---------- 07 Brand ---------- */
.rg-brand { display: grid; grid-template-rows: 1fr auto; padding: 7% 7% 6%; }
.rg-brand__mark { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
.rg-brand__logo { width: clamp(80px, 11vw, 190px); height: auto; filter: drop-shadow(0 0 40px rgba(168,85,247,.45)); }
.rg-brand__word { font: 700 clamp(30px, 4.4vw, 78px)/.9 var(--rg-display); letter-spacing: -.045em; color: var(--rg-text); }
.rg-brand__word span { color: var(--rg-violet); }
.rg-brand__specs { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 20px; }
.rg-type p { margin: 0 0 8px; color: var(--rg-soft); }
.rg-type p:nth-child(1) { font: 700 clamp(16px, 1.5vw, 24px)/1.1 var(--rg-display); letter-spacing: -.02em; color: var(--rg-text); }
.rg-type p:nth-child(2) { font: 400 clamp(12px, 1vw, 15px)/1.2 var(--rg-sans); }
.rg-type p:nth-child(3) { font: 400 clamp(11px, .9vw, 14px)/1.2 var(--rg-mono); color: var(--rg-violet); }
.rg-swatches { display: flex; gap: 8px; }
.rg-swatch { width: clamp(28px, 3vw, 52px); aspect-ratio: 1 / 1.6; border-radius: 10px; border: 1px solid var(--rg-line-2); position: relative; }
.rg-swatch span { position: absolute; left: 50%; bottom: -20px; translate: -50% 0; font: 500 9px/1 var(--rg-mono); color: var(--rg-muted); white-space: nowrap; }
@media (max-width: 767px) { .rg-brand__specs { grid-template-columns: 1fr; } .rg-swatch span { display: none; } }

/* ---------- 08 Stats ---------- */
.rg-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 7%; align-content: center; }
.rg-example-label { grid-column: 1 / -1; margin: 0; padding: 10px 13px; border: 1px solid var(--rg-line); border-radius: 999px; color: var(--rg-muted); background: var(--rg-panel); font: 600 10px/1.4 var(--rg-sans); letter-spacing: .08em; text-align: center; text-transform: uppercase; }
.rg-status-note { max-width: 100%; padding: clamp(22px, 3vw, 42px); border: 1px solid var(--rg-line); border-radius: 18px; background: var(--rg-panel); color: var(--rg-muted); }
.rg-status-note strong { display: block; margin-bottom: 10px; color: var(--rg-text); font: 700 12px/1.3 var(--rg-sans); letter-spacing: .1em; text-transform: uppercase; }
.rg-status-note p { max-width: 78ch; margin: 0; font: 400 14px/1.7 var(--rg-sans); }
.rg-stat { padding: clamp(14px, 1.6vw, 26px); border-radius: 16px; background: var(--rg-panel); border: 1px solid var(--rg-line); display: grid; gap: 10px; }
.rg-stat small { font: 600 10px/1 var(--rg-sans); letter-spacing: .14em; color: var(--rg-muted); text-transform: uppercase; }
.rg-stat b { font: 700 clamp(24px, 2.6vw, 46px)/1 var(--rg-display); letter-spacing: -.03em; color: var(--rg-text); }
.rg-stat em { font: 500 12px/1 var(--rg-mono); font-style: normal; color: var(--rg-green-2); }
.rg-stat svg { width: 100%; height: clamp(26px, 3vw, 46px); overflow: visible; }
.rg-stat svg path { fill: none; stroke: var(--rg-violet); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* ---------- 09 Wall: the whole site as a tilted, drifting surface ---------- */
.rg-wall { position: relative; height: 100vh; min-height: 620px; overflow: hidden; background: var(--rg-bg); perspective: 1600px; }
.rg-wall__plane { position: absolute; left: 50%; top: 50%; width: 150vw; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.2vw; transform: translate(-50%, -50%) rotateX(32deg) rotateZ(-16deg) scale(1.05); transform-style: preserve-3d; }
.rg-wall__col { display: grid; gap: 2.2vw; will-change: transform; }
.rg-wall__col img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 0 0 1px rgba(255,255,255,.07), 0 40px 80px -30px rgba(0,0,0,.9); }
.rg-wall::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 60% at 50% 50%, rgba(8,6,13,0) 30%, rgba(8,6,13,.85) 85%), linear-gradient(180deg, var(--rg-bg) 0%, rgba(8,6,13,0) 20%, rgba(8,6,13,0) 80%, var(--rg-bg) 100%); }
.rg-wall__title { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; text-align: center; pointer-events: none; }
.rg-wall__title > div { padding: 6vh 8vw; background: radial-gradient(closest-side, rgba(8,6,13,.92), rgba(8,6,13,.7) 60%, rgba(8,6,13,0)); }
.rg-wall__title h2 { margin: 0; font: 700 clamp(40px, 7vw, 130px)/.92 var(--rg-display); letter-spacing: -.05em; color: var(--rg-text); text-shadow: 0 10px 60px rgba(8,6,13,.9); }
.rg-wall__title h2 em { font-style: normal; background: linear-gradient(90deg, var(--rg-violet), #e879f9 60%, var(--rg-orange)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rg-wall__title p { margin: 18px 0 0; font: 500 12px/1 var(--rg-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--rg-soft); }
@media (max-width: 767px) { .rg-wall { height: 82vh; } .rg-wall__plane { width: 240vw; grid-template-columns: repeat(3, 1fr); } .rg-wall__col:nth-child(4) { display: none; } }

/* ---------- 10 Studio display showcase ---------- */
.rg-showcase { position: relative; overflow: hidden; background: #e9e8ec; }
.rg-showcase img { display: block; width: 100%; height: auto; will-change: transform; }

/* reduced motion: everything rests in its finished state */
@media (prefers-reduced-motion: reduce) {
  .rg-hub__ring, .rg-caret, .rg-live::before { animation: none; }
}

/* the template keeps photo pairs side by side on every width; these panels need room on phones */
@media (max-width: 767px) {
  .project-rocketgogo .mxd-images-grid__gallery { flex-wrap: wrap; }
  .project-rocketgogo .mxd-images-grid__gallery > [class*=col-] { flex: 0 0 100%; padding: 0 0 4px; }
}
@media (max-width: 767px) {
  .project-rocketgogo .mxd-images-grid__item.wide .mxd-images-grid__inner { aspect-ratio: 3 / 4.8; }
  .project-rocketgogo .mxd-images-grid__item:not(.wide) .mxd-images-grid__inner:has(.rg-phone-wrap) { aspect-ratio: 4 / 6.2; }
  .rg-log__table th:first-child, .rg-log__table td:first-child { display: none; }
  .rg-log__table td, .rg-log__table th { padding: 10px 8px; }
}
@media (max-width: 991px) {
  .rg-phone { height: auto; width: min(52%, 260px); }
  .rg-hide-sm { display: none !important; }
}