/* ============================================================
   Repeatless import — Globe + Solutions sections
   Ported from repeatless_9a57.vercel.app (GlobeSection.tsx,
   SolutionsSection.tsx + SolutionsSection.module.css)
   ============================================================ */

/* Native "Here's how it works" section removed at user request —
   its cards used fixed-pixel rotate/translate transforms that
   clipped on narrow viewports and had no working replacement. */
#process { display: none !important; }

/* Native nav hamburger menu icon removed at user request. */
.framer-yqymta { display: none !important; }

/* Native "Hello!" intro section replaced at user request — its floating
   skill pills used fixed-pixel absolute positions (broke on narrow
   viewports) and the section read as small/sparse; see intro2.css. */
#intro { display: none !important; }

/* Native experience timeline table hidden at user request */
.framer-7gltf0, #experience { display: none !important; }

/* "Book a Discovery Call" CTA + FAQ block removed at user request — the page
   should end at the "Let's Connect" footer. The CTA button, the
   "Or, email me at ..." line and every FAQ row all live inside this one
   #faq wrapper, so a single rule covers the whole block. */
#faq { display: none !important; }

/* Email (@) icon removed from the footer social row at user request. This is
   the "At" icon slot specifically — the other mailto link in the footer
   (.framer-1610r1m-container) is the "Book a free intro call" CTA button, so
   it must stay. X, LinkedIn and Instagram are untouched. */
.framer-1gnn4kr-container { display: none !important; }

.framer-1ttr2a3 {
  justify-content: flex-start !important;
  place-content: flex-start !important;
  height: auto !important;
  gap: 1.5rem !important;
}
.framer-1xfuprx {
  height: auto !important;
  width: 100% !important;
  flex: 1 0 auto !important;
}
.framer-lnjdja {
  max-width: 100% !important;
  width: 100% !important;
  flex: 1 0 auto !important;
}


@font-face {
  font-family: "RL Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts.gstatic.com/s/poppins/v24/pxiEyp8kv8JHgFVrJJfecg.woff2") format("woff2");
}
@font-face {
  font-family: "RL Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2") format("woff2");
}
@font-face {
  font-family: "RL Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLEj6Z1xlFQ.woff2") format("woff2");
}
@font-face {
  font-family: "RL Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLCz7Z1xlFQ.woff2") format("woff2");
}
@font-face {
  font-family: "RL Poppins";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLDD4Z1xlFQ.woff2") format("woff2");
}
@font-face {
  font-family: "RL Poppins";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLBT5Z1xlFQ.woff2") format("woff2");
}
@font-face {
  font-family: "RL Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggexSg.woff2") format("woff2");
}

.rl-import, .rl-import * , .rl-import *::before, .rl-import *::after {
  box-sizing: border-box;
}
.rl-import {
  font-family: "RL Manrope", ui-sans-serif, system-ui, sans-serif;
  width: 100%;
  max-width: 100vw;
  min-width: 0;
  white-space: normal;
}
.rl-import * {
  white-space: normal;
}
.rl-import h1, .rl-import h2, .rl-import h3, .rl-import p {
  margin: 0;
}

/* ---------------------------------------------------------
   Globe section
   --------------------------------------------------------- */
.rl-globe {
  position: relative;
  width: 100%;
  max-width: 100vw;
  min-width: 0;
  overflow: hidden;
  color: #fff;
  user-select: none;
}
@media (min-width: 1180px) {
  .rl-globe { min-height: 100vh; }
}

.rl-globe__fade-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 12rem;
  background: linear-gradient(to bottom, transparent, #000);
  z-index: 0;
}
.rl-globe__fade-bottom {
  position: absolute;
  top: 12rem; left: 0; right: 0; bottom: 0;
  background: #000;
  z-index: 0;
}
.rl-globe__radial {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 70% 42%, rgba(255,255,255,0.08) 0, rgba(255,255,255,0.025) 28%, rgba(0,0,0,0) 55%),
    linear-gradient(180deg, transparent 0%, #09090b 48%, #030304 100%);
}
.rl-globe__grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.03;
  background-image:
    linear-gradient(to right, #fff 1px, transparent 1px),
    linear-gradient(to bottom, #fff 1px, transparent 1px);
  background-size: 60px 60px;
}

.rl-globe__wrap {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: 4rem 0;
}
@media (min-width: 640px) {
  .rl-globe__wrap { padding: 5rem 0; }
}
@media (min-width: 1180px) {
  .rl-globe__wrap { min-height: 100vh; padding: 7rem 0; }
}

.rl-globe__container {
  position: relative;
  z-index: 10;
  margin-inline: auto;
  width: 100%;
  max-width: 1440px;
  padding-inline: 1.25rem;
}
@media (min-width: 640px) { .rl-globe__container { padding-inline: 1.5rem; } }
@media (min-width: 768px) { .rl-globe__container { padding-inline: 2.5rem; } }
@media (min-width: 1024px) { .rl-globe__container { padding-inline: 4rem; } }

.rl-globe__grid-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 2.5rem;
}
@media (min-width: 1180px) {
  .rl-globe__grid-layout { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4rem; }
}

.rl-globe__text-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
}
@media (min-width: 1024px) { .rl-globe__text-col { grid-column: span 6 / span 6; } }
@media (min-width: 1180px) { .rl-globe__text-col { grid-column: span 5 / span 5; } }

.rl-globe__badge-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.rl-globe__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.7);
}
@media (min-width: 640px) { .rl-globe__eyebrow { font-size: 0.875rem; } }
.rl-globe__eyebrow svg { width: 1rem; height: 1rem; flex: none; }

.rl-globe__title {
  font-size: 1.875rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: #fff;
  filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.55));
}
@media (min-width: 640px) { .rl-globe__title { font-size: 2.25rem; } }
@media (min-width: 768px) { .rl-globe__title { font-size: clamp(2.75rem, 4.4vw, 3.25rem); } }
.rl-globe__title-sub { color: rgba(255, 255, 255, 0.72); }

.rl-globe__regions {
  margin-top: 0.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 36rem;
  gap: 0.75rem;
}
@media (min-width: 640px) {
  .rl-globe__regions { margin-top: 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.rl-globe__region-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-color: rgba(255, 255, 255, 0.07);
  padding: 0.875rem;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
@media (min-width: 640px) { .rl-globe__region-card { padding: 1rem; } }

.rl-globe__region-dot {
  margin-top: 0.25rem;
  height: 0.625rem;
  width: 0.625rem;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.36);
}
.rl-globe__region-info { min-width: 0; }
.rl-globe__region-name {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  color: #fff;
}
.rl-globe__region-city { font-weight: 500; color: rgba(255, 255, 255, 0.42); }

.rl-globe__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 1024px) { .rl-globe__stage { grid-column: span 6 / span 6; } }
@media (min-width: 1180px) { .rl-globe__stage { grid-column: span 7 / span 7; } }

.rl-globe__orb {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: min(90vw, 560px);
  user-select: none;
}

.rl-globe__labels {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 20;
  height: 100%;
  width: 100%;
}
.rl-globe__label {
  position: absolute;
  top: 0;
  width: max-content;
  pointer-events: none;
  transition: all 0.5s;
  opacity: 0;
  filter: blur(4px);
  transform: translate(-50%, -50%) scale(0.95);
}
.rl-globe__label-pill {
  border-radius: 4px;
  background-color: #111116;
  padding: 3px 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #fff;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
}
@media (min-width: 640px) { .rl-globe__label-pill { font-size: 10px; } }

.rl-globe__canvas {
  width: 100%;
  height: 100%;
  cursor: grab;
  opacity: 0;
  transition: opacity 1.2s ease;
  border-radius: 50%;
  touch-action: none;
  display: block;
}

/* ---------------------------------------------------------
   Solutions section (horizontal pinned scroller)
   --------------------------------------------------------- */
.rl-solutions {
  position: relative;
  width: 100%;
  max-width: 100vw;
  min-width: 0;
  overflow: hidden;
  background: #f4f1ec;
  color: #171717;
}
.rl-solutions__viewport {
  min-height: 100svh;
  width: 100%;
  max-width: 100vw;
  min-width: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.rl-solutions__track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.rl-solutions__panel {
  width: 100vw;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(300px, 0.88fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 5rem);
  padding: clamp(5rem, 8vw, 7rem) clamp(1.5rem, 6vw, 6rem);
}

.rl-solutions__text {
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.rl-solutions__caption {
  font-family: "RL Poppins", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(23, 23, 23, 0.45);
  margin-bottom: 1.25rem;
}
.rl-solutions__title {
  margin-top: 0;
  max-width: 700px;
  font-family: "RL Poppins", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(2.5rem, 6vw, 6.4rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.01em;
  overflow: hidden;
}
.rl-solutions__word-wrap { display: inline-block; overflow: hidden; vertical-align: bottom; }
.rl-solutions__word { display: inline-block; transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.rl-solutions__body {
  margin-top: 1.6rem;
  max-width: 540px;
  color: rgba(23, 23, 23, 0.62);
  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
  font-weight: 600;
  line-height: 1.7;
}
.rl-solutions__meta {
  margin-top: 2rem;
  font-family: "RL Poppins", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(23, 23, 23, 0.32);
}

.rl-solutions__image-mask {
  position: relative;
  min-height: min(58vw, 620px);
  overflow: hidden;
  border-radius: 26px;
  box-shadow: 0 24px 80px rgba(24, 24, 27, 0.12);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), clip-path 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.rl-solutions__image-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.rl-solutions__panel-image {
  width: 100%;
  height: 100%;
  display: block;
  transform: translateY(-10%);
}
.rl-solutions__panel-image--cover { object-fit: cover; }
.rl-solutions__panel-image--contain { object-fit: contain; }

@media (max-width: 900px) {
  .rl-solutions__viewport { min-height: auto; display: block; }
  .rl-solutions__track { display: block; width: 100%; }
  .rl-solutions__panel {
    width: 100%;
    min-height: auto;
    grid-template-columns: 1fr;
    padding: 4rem 1.25rem;
    gap: 2.5rem;
  }
  .rl-solutions__title { font-size: clamp(3rem, 14vw, 5rem); }
  .rl-solutions__image-mask {
    min-height: 320px;
    border-radius: 18px;
    clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0 100%) !important;
  }
}

/* Workflow / chat-bot inline diagrams inherit neutral text color regardless of page theme */
.rl-solutions svg text { font-family: ui-sans-serif, system-ui, sans-serif; }

/* ============================================================
   Quick Launch cards + Catalog modal
   Ported from agency-webos (StudioApp.tsx quick-launch cards,
   SpotlightCard.tsx, ServicesApp.tsx, AutomationsApp.tsx)
   ============================================================ */

.rl-quicklaunch {
  background: #fff;
  padding: 4rem 1.25rem;
}
@media (min-width: 768px) { .rl-quicklaunch { padding: 5rem 2rem; } }
.rl-quicklaunch__inner { max-width: 900px; margin-inline: auto; }
.rl-quicklaunch__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .rl-quicklaunch__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.rl-ql-card {
  position: relative;
  overflow: hidden;
  height: 220px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: #111111;
  padding: 2rem;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.3), 0 8px 10px -6px rgba(0,0,0,0.3);
  cursor: pointer;
  transition: background-color 0.2s ease;
  text-align: left;
}
.rl-ql-card:hover { background: #000; }

.rl-ql-card__wave { position: absolute; inset: 0; z-index: 0; opacity: 0.4; transition: opacity 0.3s ease; }
.rl-ql-card:hover .rl-ql-card__wave { opacity: 0.6; }
.rl-ql-card__wave img {
  width: 100%; height: 100%; object-fit: cover; object-position: right; mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(to right, transparent 10%, black 80%);
  mask-image: linear-gradient(to right, transparent 10%, black 80%);
}
.rl-ql-card__wave--flip img { transform: scaleY(-1); }

.rl-ql-card__radial {
  position: absolute; inset: 0; opacity: 0.2; pointer-events: none;
  background: radial-gradient(ellipse at bottom right, rgba(234,179,8,0.9) 0%, rgba(234,179,8,0) 70%);
  transition: opacity 0.5s ease;
}
.rl-ql-card:hover .rl-ql-card__radial { opacity: 0.4; }

.rl-ql-card__orb {
  position: absolute; bottom: -40px; right: -40px; width: 256px; height: 256px;
  background: rgba(234, 179, 8, 0.1); border-radius: 9999px; filter: blur(60px); pointer-events: none;
  transition: background-color 0.5s ease;
}
.rl-ql-card:hover .rl-ql-card__orb { background: rgba(234, 179, 8, 0.25); }

.rl-ql-card__arrow {
  position: absolute; right: 2rem; bottom: 2rem; width: 48px; height: 48px; z-index: 10;
  background: #fff; border-radius: 9999px; display: flex; align-items: center; justify-content: center;
  color: #000; box-shadow: 0 0 15px rgba(234,179,8,0.5);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.rl-ql-card__arrow svg { width: 20px; height: 20px; }
.rl-ql-card:hover .rl-ql-card__arrow { transform: scale(1.1); box-shadow: 0 0 30px rgba(234,179,8,0.8); }

.rl-ql-card__icon {
  position: relative; z-index: 10; width: 48px; height: 48px; margin-bottom: auto;
  border-radius: 9999px; background: #1a1a1a; border: 1.5px solid rgba(234,179,8,0.3);
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
}
.rl-ql-card__icon span {
  width: 36px; height: 36px; border-radius: 9999px; border: 1px solid rgba(234,179,8,0.2);
  display: flex; align-items: center; justify-content: center;
}
.rl-ql-card__icon svg { width: 16px; height: 16px; color: #facc15; }

.rl-ql-card__title { position: relative; z-index: 10; color: #fff; font-size: 19px; font-weight: 700; margin: 0 0 0.5rem; }
.rl-ql-card__desc { position: relative; z-index: 10; color: #9ca3af; font-size: 13px; line-height: 1.6; max-width: 85%; margin: 0; }

.rl-spotlight-host { position: relative; }
.rl-spotlight { position: absolute; inset: -1px; z-index: 0; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }

/* ---------------------------------------------------------
   Modal shell
   --------------------------------------------------------- */
.rl-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999999;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10, 10, 10, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.rl-modal-window {
  position: relative;
  width: min(1100px, 94vw);
  max-height: min(86vh, 920px);
  display: flex;
  flex-direction: column;
  background: #fafafa;
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,0.6);
  transform-origin: bottom center;
  font-family: "RL Manrope", ui-sans-serif, system-ui, sans-serif;
}
.rl-modal-close {
  position: absolute;
  top: 20px; right: 20px;
  z-index: 10;
  width: 40px; height: 40px;
  border-radius: 9999px;
  background: #f3f4f6;
  border: none;
  display: flex; align-items: center; justify-content: center;
  color: #374151;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.rl-modal-close:hover { background: #e5e7eb; }
.rl-modal-close svg { width: 18px; height: 18px; }
.rl-modal-content {
  flex: 1;
  overflow-y: auto;
  padding: 3rem 2.5rem 4rem;
}
@media (max-width: 640px) { .rl-modal-content { padding: 4rem 1.25rem 3rem; } }

/* ---------------------------------------------------------
   Catalog (shared list/detail primitives)
   --------------------------------------------------------- */
.rl-catalog, .rl-detail { max-width: 1000px; margin-inline: auto; color: #111827; }
.rl-catalog__eyebrow { font-size: 11px; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 0.75rem; }
.rl-catalog__title-row { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.rl-catalog__title { font-size: 2.25rem; font-weight: 800; letter-spacing: -0.02em; color: #111827; margin: 0 0 1rem; }
.rl-catalog__title-row .rl-catalog__title { margin-bottom: 0; }
.rl-count-badge { font-size: 14px; font-weight: 700; color: #9ca3af; background: #f3f4f6; padding: 0.25rem 0.75rem; border-radius: 9999px; }
.rl-catalog__subtitle { color: #6b7280; font-size: 16px; font-weight: 500; max-width: 42rem; line-height: 1.6; margin: 0 0 2.5rem; }

.rl-mark { position: relative; background: #fff; border: 1px solid #f3f4f6; box-shadow: 0 1px 2px rgba(0,0,0,0.04); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rl-mark svg { display: block; width: 100%; height: 100%; }

.rl-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.rl-chip { padding: 0.375rem 0.75rem; background: #f9fafb; border: 1px solid #f3f4f6; border-radius: 8px; font-size: 13px; font-weight: 600; color: #4b5563; display: inline-flex; align-items: center; }
.rl-chip--sm { padding: 0.125rem 0.5rem; font-size: 11px; border-radius: 6px; }

.rl-view-link { display: flex; align-items: center; gap: 0.5rem; font-size: 14px; font-weight: 700; color: #111111; margin-top: auto; }
.rl-view-link--sm { font-size: 13px; font-weight: 700; color: #9ca3af; }
.rl-view-link svg, .rl-cta-btn svg, .rl-back svg { width: 16px; height: 16px; transition: transform 0.2s ease; }

/* ---------------------------------------------------------
   Services grid
   --------------------------------------------------------- */
.rl-cat-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 1.5rem; }
@media (min-width: 768px) { .rl-cat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px) { .rl-cat-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }

.rl-cat-card {
  position: relative;
  display: flex; flex-direction: column; text-align: left;
  background: #fff; border: 1px solid #f3f4f6; border-radius: 24px;
  min-height: 320px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer; padding: 0;
}
.rl-cat-card:hover { transform: translateY(-16px) scale(1.05); box-shadow: 0 30px 60px rgba(0,0,0,0.15); z-index: 5; }
.rl-cat-card__inner { display: flex; flex-direction: column; height: 100%; width: 100%; padding: 2rem; background: #fff; border-radius: inherit; }
.rl-cat-card__top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; }
.rl-cat-card__top .rl-mark { width: 64px; height: 64px; border-radius: 16px; }
.rl-cat-card__arrow { width: 32px; height: 32px; border-radius: 9999px; background: #f9fafb; display: flex; align-items: center; justify-content: center; color: #d1d5db; transition: background-color 0.2s ease, color 0.2s ease; }
.rl-cat-card__arrow svg { width: 16px; height: 16px; }
.rl-cat-card:hover .rl-cat-card__arrow { background: #facc15; color: #fff; }
.rl-cat-card__title { font-size: 1.5rem; font-weight: 700; color: #111827; margin: 0 0 0.75rem; transition: color 0.2s ease; }
.rl-cat-card:hover .rl-cat-card__title { color: #eab308; }
.rl-cat-card__desc { color: #6b7280; font-size: 14px; line-height: 1.6; margin: 0 0 2rem; flex: 1; }
.rl-cat-card__footer { display: flex; flex-direction: column; gap: 0.75rem; padding-top: 1.5rem; border-top: 1px solid #f3f4f6; font-size: 12px; font-weight: 600; }
.rl-cat-card__footer span { display: flex; align-items: center; gap: 0.5rem; color: #6b7280; }
.rl-cat-card__footer svg { width: 14px; height: 14px; color: #d1d5db; flex-shrink: 0; }

/* ---------------------------------------------------------
   Detail view (services + automation)
   --------------------------------------------------------- */
.rl-back { display: inline-flex; align-items: center; gap: 0.5rem; background: none; border: none; padding: 0; color: #6b7280; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; cursor: pointer; margin-bottom: 2.5rem; transition: color 0.2s ease; }
.rl-back:hover { color: #111827; }
.rl-back:hover svg { transform: translateX(-4px); }
.rl-detail__head { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; margin-bottom: 2rem; }
.rl-detail__head .rl-mark { border-radius: 22px; }
.rl-detail__head h1 { font-size: 2.25rem; font-weight: 800; letter-spacing: -0.02em; color: #111827; margin: 0 0 0.5rem; }
.rl-detail__oneline { font-size: 1.25rem; color: #4b5563; line-height: 1.6; font-weight: 500; margin: 0; }
.rl-detail__overview { background: #fff; border: 1px solid #f3f4f6; border-radius: 16px; padding: 2rem; margin-bottom: 3rem; box-shadow: 0 8px 30px rgba(0,0,0,0.03); }
.rl-detail__overview h3 { display: flex; align-items: center; gap: 0.5rem; font-size: 18px; font-weight: 700; color: #111827; margin: 0 0 1rem; }
.rl-detail__overview p { color: #4b5563; line-height: 1.7; font-size: 16px; margin: 0; }
.rl-detail__overview svg { width: 20px; height: 20px; color: #3b82f6; }

.rl-detail__grid, .rl-auto-detail-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 2rem; margin-bottom: 3rem; }
@media (min-width: 1024px) {
  .rl-detail__grid { grid-template-columns: 2fr 1fr; }
  .rl-auto-detail-grid { grid-template-columns: 1fr 1fr; }
}
.rl-detail__main { display: flex; flex-direction: column; gap: 3rem; }
.rl-detail__side { display: flex; flex-direction: column; gap: 1.5rem; }
.rl-detail__section h3 { display: flex; align-items: center; gap: 0.5rem; font-size: 20px; font-weight: 700; color: #111827; margin: 0 0 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid #f3f4f6; }
.rl-detail__section h3 svg { width: 20px; height: 20px; }

.rl-deliverables { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0,1fr); gap: 1rem; }
@media (min-width: 768px) { .rl-deliverables { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.rl-deliverable { display: flex; align-items: flex-start; gap: 0.75rem; background: #fff; padding: 1rem; border-radius: 12px; border: 1px solid #f3f4f6; box-shadow: 0 1px 2px rgba(0,0,0,0.03); color: #374151; font-size: 14px; font-weight: 500; line-height: 1.6; }
.rl-deliverable__dot { width: 6px; height: 6px; border-radius: 9999px; background: #22c55e; margin-top: 8px; flex-shrink: 0; }

.rl-process { display: flex; flex-direction: column; gap: 1rem; }
.rl-process-step { display: flex; align-items: center; gap: 1rem; }
.rl-process-step__num { width: 40px; height: 40px; border-radius: 9999px; background: #f3f4f6; color: #6b7280; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.rl-process-step__card { flex: 1; background: #fff; padding: 1.25rem; border-radius: 16px; border: 1px solid #f3f4f6; box-shadow: 0 1px 2px rgba(0,0,0,0.03); }
.rl-process-step__card h4 { font-weight: 700; color: #111827; margin: 0 0 0.25rem; font-size: 15px; }
.rl-process-step__card p { color: #6b7280; font-size: 13px; line-height: 1.6; margin: 0; }

.rl-faq { display: flex; flex-direction: column; gap: 1rem; }
.rl-faq-item { background: #fff; padding: 1.5rem; border-radius: 16px; border: 1px solid #f3f4f6; box-shadow: 0 1px 2px rgba(0,0,0,0.03); }
.rl-faq-item h4 { font-weight: 700; color: #111827; margin: 0 0 0.5rem; font-size: 15px; }
.rl-faq-item p { color: #4b5563; font-size: 14px; line-height: 1.6; margin: 0; }

.rl-invest-card { background: #111111; color: #fff; border-radius: 24px; padding: 2rem; box-shadow: 0 20px 40px rgba(0,0,0,0.3); position: relative; overflow: hidden; }
.rl-invest-card::before { content: ""; position: absolute; top: 0; right: 0; width: 128px; height: 128px; background: rgba(250,204,21,0.1); border-radius: 9999px; filter: blur(48px); }
.rl-invest-card__row { position: relative; z-index: 1; margin-bottom: 1.75rem; }
.rl-invest-card__label { display: flex; align-items: center; gap: 0.5rem; color: #9ca3af; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.5rem; }
.rl-invest-card__label svg { width: 14px; height: 14px; }
.rl-invest-card__value { font-size: 1.5rem; font-weight: 700; }
.rl-cta-btn {
  position: relative; z-index: 1; width: 100%; background: #facc15; color: #000; border: none;
  padding: 1rem 1.5rem; border-radius: 12px; font-weight: 700; font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2); transition: background-color 0.2s ease, transform 0.2s ease;
}
.rl-cta-btn:hover { background: #fde047; transform: translateY(-2px); }
.rl-tech-card { background: #fff; border: 1px solid #f3f4f6; border-radius: 24px; padding: 2rem; box-shadow: 0 4px 20px rgba(0,0,0,0.02); }
.rl-tech-card h3 { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; color: #111827; margin: 0 0 1rem; font-size: 15px; }
.rl-tech-card svg { width: 16px; height: 16px; color: #9ca3af; }

/* ---------------------------------------------------------
   Automations
   --------------------------------------------------------- */
.rl-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2.5rem; }
.rl-pill { padding: 0.375rem 1rem; border-radius: 9999px; font-size: 13px; font-weight: 600; background: #fff; border: 1px solid #e5e7eb; color: #4b5563; cursor: pointer; transition: all 0.2s ease; }
.rl-pill:hover { background: #f9fafb; }
.rl-pill--active { background: #111111; color: #fff; border-color: #111111; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.rl-pill--active:hover { background: #111111; }

.rl-auto-wrap { display: flex; flex-direction: column; gap: 1.5rem; }
.rl-featured {
  position: relative; z-index: 1;
  display: block; width: 100%; text-align: left; background: #fff; border: 1px solid #f3f4f6; border-radius: 24px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.04); cursor: pointer; padding: 0;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.rl-featured:hover { transform: translateY(-12px) scale(1.03); box-shadow: 0 30px 60px rgba(0,0,0,0.15); z-index: 5; }
.rl-featured .rl-card-clip { overflow: hidden; border-radius: inherit; background: #fff; display: grid; grid-template-columns: minmax(0,1fr); }
@media (min-width: 1024px) { .rl-featured .rl-card-clip { grid-template-columns: 1fr 1fr; } }
.rl-featured__image { background: #1a1a1a; padding: 2rem; display: flex; align-items: center; justify-content: center; aspect-ratio: 16/9; min-height: 300px; }
@media (min-width: 1024px) { .rl-featured__image { aspect-ratio: auto; } }
.rl-featured__image img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 20px 30px rgba(0,0,0,0.4)); }
.rl-featured__info { padding: 2rem; display: flex; flex-direction: column; justify-content: center; gap: 0.25rem; }
.rl-featured__info .rl-mark { margin-bottom: 0.75rem; }
.rl-featured__category { font-size: 11px; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.1em; }
.rl-featured__info h2 { font-size: 1.75rem; font-weight: 800; color: #111827; margin: 0.25rem 0 0.75rem; transition: color 0.2s ease; }
.rl-featured:hover .rl-featured__info h2 { color: #ca8a04; }
.rl-featured__info p { color: #4b5563; font-size: 16px; line-height: 1.6; margin: 0 0 1rem; }
.rl-featured__info .rl-chips { margin-bottom: 1.5rem; }
.rl-featured:hover .rl-view-link svg { transform: translateX(4px); color: #eab308; }

.rl-auto-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 1.5rem; }
@media (min-width: 768px) { .rl-auto-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px) { .rl-auto-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.rl-auto-card { position: relative; z-index: 1; display: flex; flex-direction: column; text-align: left; background: #fff; border: 1px solid #f3f4f6; border-radius: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.03); cursor: pointer; padding: 0; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.rl-auto-card:hover { transform: translateY(-16px) scale(1.05); box-shadow: 0 30px 60px rgba(0,0,0,0.15); z-index: 5; }
.rl-auto-card .rl-card-clip { overflow: hidden; border-radius: inherit; background: #fff; display: flex; flex-direction: column; height: 100%; }
.rl-auto-card__image { background: #1a1a1a; padding: 1.5rem; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; }
.rl-auto-card__image img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 20px rgba(0,0,0,0.4)); }
.rl-auto-card__body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.rl-auto-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.rl-auto-card__top .rl-mark { width: 56px; height: 56px; border-radius: 12px; }
.rl-auto-card__top span { font-size: 10px; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.1em; }
.rl-auto-card__body h3 { font-size: 1.25rem; font-weight: 700; color: #111827; margin: 0 0 0.5rem; line-height: 1.3; transition: color 0.2s ease; }
.rl-auto-card:hover .rl-auto-card__body h3 { color: #ca8a04; }
.rl-auto-card__body p { color: #6b7280; font-size: 14px; line-height: 1.6; margin: 0 0 1.5rem; }
.rl-auto-card__body .rl-chips { margin-bottom: 1.5rem; }
.rl-auto-card:hover .rl-view-link--sm { color: #111111; }
.rl-auto-card:hover .rl-view-link--sm svg { transform: translateX(4px); color: #eab308; }

.rl-auto-canvas { background: #1a1a1a; border-radius: 16px; padding: 2rem; display: flex; align-items: center; justify-content: center; min-height: 320px; margin-bottom: 1.5rem; }
.rl-auto-canvas img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 20px 30px rgba(0,0,0,0.4)); }
.rl-status-pill { display: inline-block; padding: 0.375rem 0.875rem; background: #f0fdf4; color: #15803d; border: 1px solid #dcfce7; border-radius: 9999px; font-size: 13px; font-weight: 600; }

.rl-empty { text-align: center; padding: 5rem 0; color: #6b7280; font-weight: 500; }

/* Magic Card hover glow — ported from agency-webos: src/app/globals.css (Uiverse) */
.magic-card::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  background: linear-gradient(-45deg, #111111 0%, #facc15 50%, #111111 100%);
  z-index: -1;
  pointer-events: none;
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  opacity: 0;
}
.magic-card::after {
  content: "";
  z-index: -2;
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  background: linear-gradient(-45deg, #000000 0%, #facc15 50%, #000000 100%);
  transform: translate3d(0, 0, 0) scale(0.97);
  filter: blur(14px);
  transition: all 0.6s ease;
  opacity: 0;
  pointer-events: none;
}
.magic-card:hover::before, .magic-card:hover::after { opacity: 1; }
.magic-card:hover::after { filter: blur(18px); }
.magic-card:hover::before { transform: rotate(-2deg) scale(1.008); }

/* Hero heading — hold it to exactly two lines at every width.
   Each "<text> [image] <text>" row is native Framer markup with fixed
   per-breakpoint font and image sizes, and Framer caps the container at
   1000px. On anything narrower than the width it was designed for the row
   either clips at the edges or wraps into extra lines (which is what turned
   this into four). So instead: widen the container, hold each row on a single
   line, and scale the type and the inline image fluidly with the viewport so
   both rows always fit — two lines from small laptops up to large displays. */
@media (min-width: 700px) {
  .framer-1y81y3z {
    max-width: min(94vw, 1560px) !important;
  }
  .framer-heading-row {
    flex-wrap: nowrap !important;
    justify-content: center !important;
    /* Framer's fixed 12px gap reads as cramped once the type scales up, and
       the images are rotated so their corners eat into it. */
    column-gap: clamp(10px, 1.6vw, 28px) !important;
  }
  .framer-heading-row h1.framer-text {
    font-size: clamp(20px, 4vw, 70px) !important;
    white-space: nowrap !important;
  }
  /* Scale both inline images with the type so they can't dominate the row —
     and so the two rows stay visually matched. Left to Framer's own fixed
     per-breakpoint sizes they jump in steps and drift out of sync with each
     other (e.g. 83px vs 102px on the same screen). The width tracks the font
     clamp at ~1.4x, which lands each image's height just under one text line
     (4:3 aspect) — at Framer's original ratio they stood ~1.5x taller than
     the line and, with the rows now tightened to two, collided vertically. */
  .framer-heading-row .framer-nlltkq,
  .framer-heading-row .framer-1a56uwu {
    width: clamp(30px, 5.6vw, 98px) !important;
    height: auto !important;
    aspect-ratio: 1.33333 !important;
  }
}

/* ============================================================
   Cypher AI — Founder & Capabilities 6-Card Grid
   ============================================================ */
.framer-1ttr2a3, [data-framer-name="Text Container"] {
  justify-content: flex-start !important;
  gap: 28px !important;
}

.cypher-founder-bio {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: clamp(20px, 2.1vw, 25px) !important;
  font-weight: 500 !important;
  color: #111827 !important;
  line-height: 1.45 !important;
  letter-spacing: -0.018em !important;
  margin: 0 !important;
}

@media (max-width: 809.98px) {
  .cypher-founder-bio {
    font-size: 17px !important;
    line-height: 1.45 !important;
  }
}

.cypher-about-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 22px 18px !important;
  margin-top: 0 !important;
  width: 100% !important;
}

@media (max-width: 1100px) {
  .cypher-about-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px 16px !important;
  }
}

@media (max-width: 680px) {
  .cypher-about-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

.cypher-about-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 11px !important;
}

.cypher-about-card__icon {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 11px !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 3px 10px -2px rgba(0, 0, 0, 0.06), 0 1px 3px -1px rgba(0, 0, 0, 0.04) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: #171717 !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.cypher-about-card__icon svg {
  width: 18px !important;
  height: 18px !important;
}

.cypher-about-card:hover .cypher-about-card__icon {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 14px -2px rgba(0, 0, 0, 0.1), 0 2px 5px -1px rgba(0, 0, 0, 0.05) !important;
}

.cypher-about-card__content {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.cypher-about-card__title {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}

.cypher-about-card__desc {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 400 !important;
  color: #525252 !important;
  line-height: 1.38 !important;
  letter-spacing: -0.005em !important;
  margin: 0 !important;
}

.cypher-founder-bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin-top: 14px !important;
  padding: 0 4px !important;
}

.cypher-social-links {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.cypher-social-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  color: #6b7280 !important;
  text-decoration: none !important;
  transition: color 0.2s ease, transform 0.2s ease !important;
}

.cypher-social-link:hover {
  color: #111827 !important;
  transform: translateY(-1.5px) !important;
}

.cypher-founder-meta {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  text-align: right !important;
}

.cypher-founder-name {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

.cypher-founder-role {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #6b7280 !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}