/* =====================================================================
   ChatGPT Integration Services  —  cg- prefix
   Ink #0a0f2c, electric blue #2b5cff (sampled from the owner's icons),
   cyan + lilac + pink only inside gradients (hero-bg palette).
   ===================================================================== */

.cg-page {
  --cg-ink: #0a0f2c;
  --cg-ink-2: #121a44;
  --cg-text: #4a5277;
  --cg-blue: #2b5cff;
  --cg-cyan: #1fc8ff;
  --cg-violet: #8b5cf6;
  --cg-pink: #f39ac8;
  --cg-bg: #fbfbff;
  --cg-soft: #f2f4ff;
  --cg-line: rgba(10, 15, 44, 0.09);
  --cg-grad: linear-gradient(110deg, var(--cg-blue) 0%, var(--cg-violet) 55%, var(--cg-pink) 100%);
  --cg-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --cg-ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --cg-f: "Geist", system-ui, sans-serif;
  --cg-mono: "Geist Mono", ui-monospace, monospace;

  font-family: var(--cg-f);
  color: var(--cg-ink);
  background: var(--cg-bg);
  overflow-x: clip;
}

/* style.css forces Gabarito !important on h1-h6/p */
.cg-page :is(h1, h2, h3, h4, p, button) {
  font-family: var(--cg-f) !important;
}

.cg-page :is(h1, h2, h3, h4, p, ul, ol, dl, dd) {
  margin: 0;
}

.cg-page :is(ul, ol) {
  padding: 0;
  list-style: none;
}

.cg-page img {
  max-width: 100%;
}

.cg-page :where(p, dd) {
  text-align: justify;
  hyphens: auto;
}

.cg-page section {
  position: relative;
}

/* ---------- shared type ---------- */
.cg-title {
  font-size: clamp(30px, 3.6vw, 52px);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--cg-ink);
  text-wrap: balance;
}

.cg-page em {
  font-style: normal;
  font-weight: inherit;
  background: var(--cg-grad);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: cg-sheen 6s ease-in-out infinite alternate;
}

.cg-title--light {
  color: #fff;
}

.cg-page .cg-title--light em,
.cg-page .cg-cta--dark em,
.cg-page .cg-why em {
  background-image: linear-gradient(110deg, #8fb0ff, #c9b6ff 50%, #ffc1e0);
}

.cg-head {
  max-width: 820px;
  margin: 0 auto 56px;
  text-align: center;
}

.cg-page .cg-head p {
  margin-top: 18px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--cg-text);
  text-align: center;
}

.cg-page strong {
  color: var(--cg-ink);
  font-weight: 600;
}

/* ---------- button: disc slides to the left on hover (owner rule) ---------- */
.cg-btn {
  --cg-icon: 44px;
  --cg-in: 6px;
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: calc(var(--cg-icon) + var(--cg-in) * 2);
  max-width: 100%;
  padding: 0 calc(var(--cg-icon) + var(--cg-in) + 18px) 0 26px;
  border-radius: 999px;
  background: var(--cg-ink);
  color: #fff !important;
  font-weight: 500;
  font-size: 16px;
  text-decoration: none;
  isolation: isolate;
  overflow: hidden;
  box-shadow: 0 14px 34px -12px rgba(43, 92, 255, 0.55);
  transition:
    padding 0.55s var(--cg-ease-io),
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

.cg-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--cg-grad);
  background-size: 200% 100%;
  opacity: 0;
  transition: opacity 0.45s ease;
  animation: cg-sheen 4s linear infinite alternate;
}

.cg-btn__label {
  line-height: 1.25;
  padding: 12px 0;
}

.cg-btn__icon {
  position: absolute;
  top: var(--cg-in);
  right: var(--cg-in);
  width: var(--cg-icon);
  height: var(--cg-icon);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--cg-ink);
  transition:
    right 0.55s var(--cg-ease-io),
    background 0.3s ease,
    color 0.3s ease;
}

.cg-btn__icon svg {
  width: 20px;
  height: 20px;
  transform: rotate(-45deg);
  transition: transform 0.55s var(--cg-ease-io);
}

.cg-btn:hover,
.cg-btn:focus-visible {
  padding: 0 26px 0 calc(var(--cg-icon) + var(--cg-in) + 18px);
  box-shadow: 0 18px 40px -12px rgba(139, 92, 246, 0.6);
  transform: translateY(-2px);
}

.cg-btn:hover::before,
.cg-btn:focus-visible::before {
  opacity: 1;
}

.cg-btn:hover .cg-btn__icon,
.cg-btn:focus-visible .cg-btn__icon {
  right: calc(100% - var(--cg-icon) - var(--cg-in));
}

.cg-btn:hover .cg-btn__icon svg,
.cg-btn:focus-visible .cg-btn__icon svg {
  transform: rotate(0deg);
}

.cg-btn--light {
  background: #fff;
  color: var(--cg-ink) !important;
}

.cg-btn--light .cg-btn__icon {
  background: var(--cg-ink);
  color: #fff;
}

.cg-btn--light:hover,
.cg-btn--light:focus-visible {
  color: #fff !important;
}

.cg-btn--light:hover .cg-btn__icon,
.cg-btn--light:focus-visible .cg-btn__icon {
  background: #fff;
  color: var(--cg-ink);
}

/* ---------- reveal (CSS animation: stagger never slows hover transitions) ---------- */
:where(.cg-anim) .cg-reveal {
  opacity: 0;
}

:where(.cg-anim) .cg-reveal.is-in {
  animation: cg-rise 0.9s var(--cg-ease) var(--d, 0ms) both;
}

/* ---------- caret ---------- */
.cg-caret {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  margin-left: 3px;
  vertical-align: -0.18em;
  background: currentColor;
  animation: cg-blink 1s steps(1) infinite;
}

/* ---------- aurora (dark bands) ---------- */
.cg-aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.cg-aurora i {
  position: absolute;
  width: 46vw;
  height: 46vw;
  max-width: 700px;
  max-height: 700px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
  animation: cg-drift 18s ease-in-out infinite alternate;
}

.cg-aurora i:nth-child(1) {
  left: -10%;
  top: -30%;
  background: #2b5cff;
}

.cg-aurora i:nth-child(2) {
  right: -12%;
  top: 10%;
  background: #8b5cf6;
  animation-duration: 22s;
  animation-delay: -6s;
}

.cg-aurora i:nth-child(3) {
  left: 30%;
  bottom: -50%;
  background: #f39ac8;
  opacity: 0.32;
  animation-duration: 26s;
  animation-delay: -12s;
}

.cg-aurora--dim i {
  opacity: 0.28;
}

/* cursor spotlight */
.js-spot::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(520px circle at var(--sx, 50%) var(--sy, 50%), rgba(255, 255, 255, 0.08), transparent 60%);
  z-index: 0;
}

/* =====================================================================
   HERO
   ===================================================================== */
/* the site header is in normal flow above the hero, so this is breathing room only */
.cg-hero {
  padding: 48px 0 72px;
  background:
    var(--cg-hero-bg) center / cover no-repeat,
    linear-gradient(180deg, #f6f3ff, #fff);
  overflow: hidden;
}

.cg-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 160px;
  background: linear-gradient(180deg, transparent, var(--cg-bg));
  pointer-events: none;
}

.cg-hero__dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(43, 92, 255, 0.16) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 70% 50%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 55% at 70% 50%, #000 20%, transparent 75%);
  animation: cg-pan 40s linear infinite;
}

.cg-hero__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  animation: cg-drift 16s ease-in-out infinite alternate;
}

.cg-hero__blob--a {
  width: 420px;
  height: 420px;
  left: -120px;
  top: 80px;
  background: rgba(31, 200, 255, 0.3);
}

.cg-hero__blob--b {
  width: 520px;
  height: 520px;
  right: 4%;
  top: 60px;
  background: rgba(139, 92, 246, 0.24);
  animation-delay: -8s;
}

.cg-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  gap: 40px;
  align-items: center;
}

.cg-hero__title {
  font-size: clamp(42px, 5vw, 78px) !important;
  line-height: 0.98 !important;
  font-weight: 600 !important;
  letter-spacing: -0.045em;
  color: var(--cg-ink);
}

.cg-word {
  display: inline-block;
  opacity: 0;
  filter: blur(14px);
  transform: translateY(28px);
  transition:
    opacity 0.9s var(--cg-ease),
    filter 0.9s var(--cg-ease),
    transform 0.9s var(--cg-ease);
  transition-delay: calc(0.15s + var(--i) * 0.14s);
}

.cg-hero__title em.cg-word {
  padding-right: 0.08em;
}

.cg-page .cg-hero__text {
  max-width: 600px;
  margin: 22px 0 0;
  font-size: 17.5px;
  line-height: 1.7;
  color: var(--cg-text);
  text-align: justify;
}

.cg-hero__text,
.cg-hero__perks,
.cg-hero__actions {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.9s var(--cg-ease),
    transform 0.9s var(--cg-ease);
}

.cg-hero__text {
  transition-delay: 0.55s;
}

.cg-hero__actions {
  margin-top: 30px;
  transition-delay: 0.75s;
}

.cg-hero.is-ready :is(.cg-word, .cg-hero__text, .cg-hero__perks, .cg-hero__actions) {
  opacity: 1;
  filter: none;
  transform: none;
}

/* benefit chips under the copy */
.cg-hero__perks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0 0 !important;
  padding: 0 !important;
  list-style: none;
  transition-delay: 0.65s;
}

.cg-hero__perks li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(43, 92, 255, 0.14);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--cg-ink);
  transition:
    transform 0.4s var(--cg-ease),
    box-shadow 0.4s ease;
}

.cg-hero__perks li:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -16px rgba(43, 92, 255, 0.7);
}

.cg-hero__perks i {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--cg-blue), var(--cg-violet));
  color: #fff;
  font-size: 14px;
}

/* ---- demo stage: everything inside is sized in em, and 1em scales with the stage width */
.cg-demo {
  width: min(100%, 600px, calc(100vh - 150px));
  margin-left: auto;
  container-type: inline-size;
}

.cg-demo__stage {
  position: relative;
  aspect-ratio: 1;
  font-size: calc(100cqw / 37.5);
}

.cg-demo__halo {
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  background: conic-gradient(from var(--cg-angle, 0deg), rgba(31, 200, 255, 0.5), rgba(139, 92, 246, 0.5), rgba(243, 154, 200, 0.5), rgba(31, 200, 255, 0.5));
  filter: blur(3.4em);
  opacity: 0.75;
  animation: cg-angle 9s linear infinite;
}

.cg-demo__orbit {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  border: 1px dashed rgba(43, 92, 255, 0.22);
  animation: cg-spin 60s linear infinite;
}

.cg-demo__orbit::before,
.cg-demo__orbit::after {
  content: "";
  position: absolute;
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: var(--cg-violet);
  box-shadow: 0 0 0 0.35em rgba(139, 92, 246, 0.18);
  top: 50%;
  left: -0.3em;
}

.cg-demo__orbit::after {
  left: auto;
  right: -0.3em;
  background: var(--cg-cyan);
  box-shadow: 0 0 0 0.35em rgba(31, 200, 255, 0.2);
}

.cg-demo__wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.cg-demo__wires path {
  fill: none;
  stroke: url(#cgDemoWire);
  stroke-width: 2;
  stroke-dasharray: 5 6;
  animation: cg-wire 1.4s linear infinite;
}

.cg-demo__wires circle {
  fill: var(--cg-violet);
  filter: drop-shadow(0 0 4px rgba(139, 92, 246, 0.9));
}

/* phone */
.cg-phone {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15.6em;
  height: 32em;
  margin: -16em 0 0 -7.8em;
  display: flex;
  flex-direction: column;
  padding: 0.6em;
  border-radius: 2.6em;
  background: linear-gradient(160deg, #1b2257, var(--cg-ink));
  box-shadow:
    0 2.4em 5em -1.6em rgba(10, 15, 44, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  opacity: 0;
  transform: translateY(2em) rotate(-3deg);
  transition:
    opacity 1s var(--cg-ease),
    transform 1.2s var(--cg-ease);
  transition-delay: 0.35s;
}

.cg-hero.is-ready .cg-phone {
  opacity: 1;
  transform: none;
}

.cg-phone::before {
  content: "";
  position: absolute;
  top: 1.05em;
  left: 50%;
  width: 4.4em;
  height: 1.15em;
  margin-left: -2.2em;
  border-radius: 1em;
  background: var(--cg-ink);
  z-index: 2;
}

.cg-phone > * {
  position: relative;
}

.cg-phone__bar {
  display: flex;
  align-items: center;
  gap: 0.55em;
  padding: 2.4em 0.9em 0.75em;
  border-radius: 2em 2em 0 0;
  background: #fff;
  border-bottom: 1px solid var(--cg-line);
  color: var(--cg-ink);
}

.cg-phone__logo {
  width: 2.1em;
  height: 2.1em;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--cg-blue), var(--cg-violet));
}

.cg-phone__logo img {
  width: 1.3em;
  height: 1.3em;
  filter: brightness(0) invert(1);
}

.cg-phone__who {
  flex: 1;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.cg-phone__who b {
  font-size: 0.85em;
  font-weight: 600;
}

.cg-phone__who small {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: 0.68em;
  color: #16a34a;
}

.cg-phone__who small::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: #22c55e;
  animation: cg-pulse 2s ease-in-out infinite;
}

.cg-phone__bar > i {
  font-size: 1em;
  color: var(--cg-text);
}

.cg-phone__thread {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.6em;
  padding: 0.9em 0.8em;
  overflow: hidden;
  background: linear-gradient(180deg, #fff, #f3f5ff);
}

/* older messages fade out under the header */
.cg-phone__thread::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  height: 4em;
  background: linear-gradient(180deg, #fff, rgba(255, 255, 255, 0));
}

.cg-pmsg {
  flex: none;
  max-width: 84%;
  padding: 0.6em 0.85em;
  border-radius: 1.1em;
  font-size: 0.78em;
  line-height: 1.45;
  animation: cg-pmsg 0.5s var(--cg-ease) both;
}

.cg-pmsg--me {
  align-self: flex-end;
  border-bottom-right-radius: 0.3em;
  background: linear-gradient(135deg, var(--cg-blue), var(--cg-violet));
  color: #fff;
}

.cg-pmsg--ai {
  align-self: flex-start;
  border-bottom-left-radius: 0.3em;
  background: #fff;
  color: var(--cg-ink);
  box-shadow:
    0 0.5em 1.2em -0.8em rgba(10, 15, 44, 0.4),
    inset 0 0 0 1px var(--cg-line);
}

.cg-pmsg--dots {
  display: flex;
  gap: 0.3em;
  padding: 0.85em 0.9em;
}

.cg-pmsg--dots i {
  width: 0.45em;
  height: 0.45em;
  border-radius: 50%;
  background: var(--cg-violet);
  animation: cg-dot 1.2s ease-in-out infinite;
}

.cg-pmsg--dots i:nth-child(2) {
  animation-delay: 0.15s;
}

.cg-pmsg--dots i:nth-child(3) {
  animation-delay: 0.3s;
}

.cg-phone__composer {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.6em 0.6em 0.9em;
  border-radius: 0 0 2em 2em;
  background: #f3f5ff;
}

.cg-phone__input {
  flex: 1;
  min-width: 0;
  height: 2.4em;
  display: flex;
  align-items: center;
  padding: 0 0.9em;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(43, 92, 255, 0.18);
  font-size: 0.78em;
  color: var(--cg-ink);
  white-space: nowrap;
  overflow: hidden;
}

.cg-phone__send {
  flex: none;
  width: 2.2em;
  height: 2.2em;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--cg-ink);
  color: #fff;
  font-size: 0.95em;
  transition:
    background 0.3s ease,
    transform 0.4s var(--cg-ease),
    box-shadow 0.4s ease;
}

.cg-phone__send.is-sent {
  background: var(--cg-blue);
  transform: scale(1.12);
  box-shadow: 0 0 0 0.45em rgba(43, 92, 255, 0.18);
}

/* stack chips around the phone */
.cg-chip {
  position: absolute;
  z-index: 2;
  top: var(--y);
  left: var(--x);
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.45em 1em 0.45em 0.45em;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  box-shadow:
    0 1em 2.1em -1.1em rgba(43, 92, 255, 0.6),
    inset 0 0 0 1px rgba(255, 255, 255, 0.95);
  font-size: 0.92em;
  font-weight: 500;
  color: var(--cg-ink);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-2em);
  transition:
    opacity 0.8s var(--cg-ease),
    transform 1s var(--cg-ease);
  transition-delay: calc(0.9s + var(--i) * 0.12s);
  animation: cg-float 6s ease-in-out infinite;
  animation-delay: calc(var(--i) * -1.1s);
}

.cg-chip--r {
  left: auto;
  right: var(--x);
  transform: translateX(2em);
}

.cg-hero.is-ready .cg-chip {
  opacity: 1;
  transform: none;
}

.cg-chip__logo {
  width: 2em;
  height: 2em;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0.2em 0.6em -0.25em rgba(10, 15, 44, 0.35);
  color: var(--cg-blue);
  font-size: 1.05em;
}

.cg-chip__logo + .cg-chip__logo {
  margin-left: -1.1em;
}

.cg-chip__logo img {
  width: 1.2em;
  height: 1.2em;
  object-fit: contain;
}

/* =====================================================================
   BRING CHATGPT  —  6 cards around a core
   ===================================================================== */
.cg-bring {
  padding: 90px 0 120px;
}

.cg-bring__hub {
  position: relative;
  display: grid;
  grid-template-columns: 1fr minmax(240px, 300px) 1fr;
  grid-template-rows: repeat(3, auto);
  gap: 22px 64px;
  align-items: stretch;
}

/* curved wires, core -> cards (paths set by JS); under the cards and core */
.cg-bring__wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}

.cg-wire path {
  fill: none;
  stroke-linecap: round;
}

.cg-wire__base {
  stroke: rgba(43, 92, 255, 0.16);
  stroke-width: 1.5;
}

/* dashes run from the core out to the card */
.cg-wire__flow {
  stroke: url(#cgWireGrad);
  stroke-width: 2;
  stroke-dasharray: 6 12;
  opacity: 0.3;
  animation: cg-wire 1.1s linear infinite;
  transition:
    opacity 0.5s ease,
    stroke-width 0.5s ease;
}

.cg-wire.is-active .cg-wire__flow {
  opacity: 1;
  stroke-width: 2.5;
}

.cg-wire__dot {
  fill: #8b5cf6;
  filter: drop-shadow(0 0 6px rgba(139, 92, 246, 0.9));
  opacity: 0;
  transition: opacity 0.4s ease;
}

.cg-wire.is-active .cg-wire__dot {
  opacity: 1;
}

.cg-bring__card {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 16px;
  padding: 22px 22px 24px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--cg-line);
  box-shadow: 0 10px 30px -22px rgba(10, 15, 44, 0.35);
  cursor: default;
  outline: none;
  transition:
    border-color 0.4s ease,
    box-shadow 0.4s ease,
    transform 0.5s var(--cg-ease);
}

/* left column cards 0-2, right column cards 3-5 */
.cg-bring__card:nth-of-type(-n + 3) {
  grid-column: 1;
}

.cg-bring__card:nth-of-type(n + 4) {
  grid-column: 3;
}

.cg-bring__card:nth-of-type(1),
.cg-bring__card:nth-of-type(4) {
  grid-row: 1;
}

.cg-bring__card:nth-of-type(2),
.cg-bring__card:nth-of-type(5) {
  grid-row: 2;
}

.cg-bring__card:nth-of-type(3),
.cg-bring__card:nth-of-type(6) {
  grid-row: 3;
}

.cg-bring__icon {
  flex: none;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(140deg, #4d7bff, var(--cg-blue) 50%, #6f4cf6);
  box-shadow: 0 10px 20px -10px rgba(43, 92, 255, 0.8);
  transition: transform 0.5s var(--cg-ease);
}

.cg-bring__icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.cg-bring__card h3 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}

.cg-page .cg-bring__card p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--cg-text);
}

/* beam into the core */




.cg-bring__card.is-active {
  border-color: rgba(43, 92, 255, 0.35);
  box-shadow: 0 26px 50px -26px rgba(43, 92, 255, 0.55);
  transform: translateY(-4px);
}

.cg-bring__card.is-active .cg-bring__icon {
  transform: rotate(-8deg) scale(1.06);
}


.cg-core {
  z-index: 1;
  grid-column: 2;
  grid-row: 1 / span 3;
  position: relative;
  display: grid;
  place-items: center;
  align-self: center;
  aspect-ratio: 1;
}

.cg-core__wave {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 1px solid rgba(43, 92, 255, 0.35);
  animation: cg-ripple 3.6s var(--cg-ease) infinite;
}

.cg-core__wave:nth-child(2) {
  animation-delay: 1.2s;
}

.cg-core__wave:nth-child(3) {
  animation-delay: 2.4s;
}

.cg-core__orb {
  position: relative;
  width: 58%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, #6b8dff 0, var(--cg-blue) 45%, #6a3fe0 100%);
  box-shadow:
    0 30px 70px -20px rgba(43, 92, 255, 0.55),
    inset 0 -10px 30px rgba(20, 10, 80, 0.35),
    inset 0 8px 20px rgba(255, 255, 255, 0.25);
  animation: cg-float 6s ease-in-out infinite;
}

.cg-core__orb::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: conic-gradient(from var(--cg-angle, 0deg), var(--cg-cyan), var(--cg-blue), var(--cg-violet), var(--cg-pink), var(--cg-cyan));
  z-index: -1;
  filter: blur(10px);
  opacity: 0.7;
  animation: cg-angle 6s linear infinite;
}

.cg-core__orb img {
  width: 44%;
  filter: brightness(0) invert(1); /* owner's blue mark -> white */
  animation: cg-spin 30s linear infinite;
}

.cg-core__label {
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--cg-ink);
  color: #fff;
  font-family: var(--cg-mono);
  font-size: 13px;
  white-space: nowrap;
}

.cg-core__label.is-swap {
  animation: cg-swap 0.5s var(--cg-ease);
}

/* =====================================================================
   SERVICES  —  chat thread
   ===================================================================== */
.cg-svc {
  padding: 120px 0;
  background:
    radial-gradient(800px 500px at 0% 0%, rgba(43, 92, 255, 0.07), transparent 60%),
    radial-gradient(700px 500px at 100% 100%, rgba(243, 154, 200, 0.12), transparent 60%),
    var(--cg-soft);
}

.cg-svc__layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 72px;
  align-items: start;
}

.cg-svc__aside {
  position: sticky;
  top: 120px;
}

.cg-page .cg-svc__aside p {
  margin-top: 18px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--cg-text);
}

.cg-svc__index {
  margin-top: 34px !important;
  display: grid;
  gap: 4px;
  border-left: 1px solid var(--cg-line);
}

.cg-svc__index li {
  position: relative;
}

.cg-svc__index button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 0 8px 18px;
  border: 0;
  background: none;
  font-size: 15px;
  text-align: left;
  color: #8a91b0;
  cursor: pointer;
  transition:
    color 0.35s ease,
    transform 0.4s var(--cg-ease);
}

.cg-svc__index button:hover {
  color: var(--cg-ink);
  transform: translateX(4px);
}

.cg-svc__index button:focus-visible {
  outline: 2px solid var(--cg-blue);
  outline-offset: 2px;
  border-radius: 6px;
}

.cg-svc__index button.is-done {
  color: #5b6383;
}

.cg-svc__index li::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--cg-grad);
  transform: scaleY(0);
  transition: transform 0.4s var(--cg-ease);
}

.cg-svc__index li:has(.is-active) button {
  color: var(--cg-ink);
  font-weight: 500;
}

.cg-svc__index li:has(.is-active) i {
  color: var(--cg-blue);
}

.cg-svc__index li:has(.is-active)::before {
  transform: scaleY(1);
}

.cg-thread {
  display: grid;
  gap: 34px;
}

.cg-turn {
  display: grid;
  gap: 14px;
  transition: opacity 0.5s ease;
}

/* only the turn synced with the active index item is at full strength */
.cg-turn.is-in:not(.is-current) {
  opacity: 0.5;
}

.cg-turn.is-in:not(.is-current):hover {
  opacity: 1;
}

.cg-turn.is-current .cg-turn__bubble {
  border-color: rgba(43, 92, 255, 0.3);
  box-shadow: 0 24px 50px -30px rgba(43, 92, 255, 0.6);
}

.cg-turn__ask {
  justify-self: end;
  max-width: 90%;
  padding: 14px 20px;
  border-radius: 22px 22px 6px 22px;
  background: var(--cg-ink);
  color: #fff;
  box-shadow: 0 16px 30px -18px rgba(10, 15, 44, 0.6);
}

.cg-turn__ask h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 500;
  color: #fff;
}

.cg-turn__ask i {
  font-size: 20px;
  color: #9db5ff;
}

.cg-turn__reply {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.cg-turn__avatar {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 16px -8px rgba(43, 92, 255, 0.6);
}

.cg-turn__avatar img {
  width: 24px;
  height: 24px;
}

.cg-turn__bubble {
  position: relative;
  flex: 1;
  min-height: 56px;
  padding: 18px 22px;
  border-radius: 6px 22px 22px 22px;
  background: #fff;
  border: 1px solid var(--cg-line);
  box-shadow: 0 18px 40px -30px rgba(10, 15, 44, 0.4);
  transition:
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}

.cg-page .cg-turn__bubble p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--cg-text);
}

.cg-typing {
  position: absolute;
  left: 22px;
  top: 22px;
  display: flex;
  gap: 5px;
  opacity: 0;
}

.cg-typing i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cg-blue);
  animation: cg-dot 1s ease-in-out infinite;
}

.cg-typing i:nth-child(2) {
  animation-delay: 0.15s;
}

.cg-typing i:nth-child(3) {
  animation-delay: 0.3s;
}

/* sequence: ask slides in -> reply bubble appears with dots -> text streams in */
.cg-anim .cg-turn__ask,
.cg-anim .cg-turn__reply {
  opacity: 0;
}

.cg-anim .cg-turn.is-in .cg-turn__ask {
  animation: cg-from-right 0.55s var(--cg-ease) both;
}

.cg-anim .cg-turn.is-in .cg-turn__reply {
  animation: cg-rise 0.6s var(--cg-ease) 0.2s both;
}

.cg-anim .cg-turn.is-in .cg-typing {
  animation: cg-typing-show 0.9s ease both 0.25s;
}

.cg-anim .cg-turn__bubble p {
  opacity: 0;
}

.cg-anim .cg-turn.is-in .cg-turn__bubble p {
  animation: cg-stream 0.7s ease 0.95s both;
}

/* =====================================================================
   BAND CTA
   ===================================================================== */
/* =====================================================================
   CTA  —  one slim, wide card: icon | copy | button
   ===================================================================== */
.cg-band {
  padding: 56px 0;
  background: linear-gradient(180deg, var(--cg-soft), var(--cg-bg));
}

.cg-final {
  padding: 72px 0 24px;
}

.cg-cta {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 36px;
  padding: 44px 48px 44px 44px;
  border-radius: 32px;
  overflow: hidden;
  isolation: isolate;
}

.cg-cta--spaced {
  margin-top: 56px;
}

/* light sweep */
.cg-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 40%, var(--cg-cta-sheen, rgba(255, 255, 255, 0.14)) 50%, transparent 60%);
  background-size: 260% 100%;
  animation: cg-sweep 7s ease-in-out infinite;
  pointer-events: none;
}

.cg-cta__fx {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

.cg-cta__fx i {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  filter: blur(60px);
  animation: cg-drift 14s ease-in-out infinite alternate;
}

.cg-cta__fx i:first-child {
  left: -80px;
  top: -160px;
}

.cg-cta__fx i:last-child {
  right: 10%;
  bottom: -200px;
  animation-delay: -7s;
}

.cg-cta__icon {
  position: relative;
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  font-size: 38px;
}

/* pulsing ring around the badge */
.cg-cta__icon::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1.5px solid currentColor;
  opacity: 0;
  animation: cg-ring 2.8s ease-out infinite;
}

.cg-cta h2 {
  font-size: clamp(24px, 2.5vw, 36px) !important;
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.02em;
}

.cg-page .cg-cta p {
  margin-top: 12px;
  max-width: 760px;
  font-size: 17px;
  line-height: 1.65;
  text-align: justify;
}

.cg-cta .cg-btn {
  flex: none;
}

/* dark: ink + aurora */
.cg-cta--dark {
  background: var(--cg-ink);
  color: #fff;
  box-shadow: 0 30px 60px -40px rgba(10, 15, 44, 0.9);
}

.cg-cta--dark .cg-cta__fx i:first-child {
  background: rgba(43, 92, 255, 0.55);
}

.cg-cta--dark .cg-cta__fx i:last-child {
  background: rgba(139, 92, 246, 0.45);
}

.cg-cta--dark h2 {
  color: #fff;
}

.cg-page .cg-cta--dark p {
  color: rgba(255, 255, 255, 0.72);
}

.cg-cta--dark .cg-cta__icon {
  background: linear-gradient(140deg, var(--cg-blue), var(--cg-violet));
  color: #fff;
  box-shadow: 0 14px 28px -12px rgba(43, 92, 255, 0.9);
}

/* line: white with an animated gradient border */
.cg-cta--line {
  --cg-cta-sheen: rgba(43, 92, 255, 0.07);
  background: #fff;
  box-shadow: 0 30px 60px -44px rgba(43, 92, 255, 0.8);
}

.cg-cta--line::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--cg-angle, 0deg), rgba(43, 92, 255, 0.12), var(--cg-blue), var(--cg-violet), var(--cg-pink), rgba(43, 92, 255, 0.12));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: cg-angle 6s linear infinite;
  pointer-events: none;
}

.cg-cta--line .cg-cta__fx i:first-child {
  background: rgba(31, 200, 255, 0.16);
}

.cg-cta--line .cg-cta__fx i:last-child {
  background: rgba(139, 92, 246, 0.16);
}

.cg-page .cg-cta--line p {
  color: var(--cg-text);
}

.cg-cta--line .cg-cta__icon {
  background: #e8edff;
  color: var(--cg-blue);
}

/* final: centered pastel card on the hero wave, slimmed down */
.cg-final__card {
  position: relative;
  padding: 64px clamp(28px, 17vw, 260px);
  border-radius: 40px;
  text-align: center;
  background:
    var(--cg-hero-bg) center / cover no-repeat,
    #f4f1ff;
  overflow: hidden;
  isolation: isolate;
}

.cg-final__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.2) 70%);
}

.cg-final__card h2 {
  max-width: 860px;
  margin: 0 auto;
  font-size: clamp(30px, 3.4vw, 50px) !important;
  line-height: 1.06 !important;
  font-weight: 600 !important;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.cg-page .cg-final__card p {
  max-width: 720px;
  margin: 16px auto 28px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--cg-text);
  text-align: center;
}

.cg-final__orbit {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.cg-final__orbit i {
  position: absolute;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(140deg, var(--cg-blue), var(--cg-violet));
  box-shadow: 0 18px 30px -14px rgba(43, 92, 255, 0.8);
  animation: cg-float 6s ease-in-out infinite;
}

.cg-final__orbit img {
  width: 30px;
  height: 30px;
}

.cg-final__orbit i:nth-child(1) {
  left: 6%;
  top: 16%;
  rotate: -12deg;
}

.cg-final__orbit i:nth-child(2) {
  left: 11%;
  bottom: 14%;
  rotate: 10deg;
  animation-delay: -2s;
}

.cg-final__orbit i:nth-child(3) {
  right: 7%;
  top: 18%;
  rotate: 12deg;
  animation-delay: -3.5s;
}

.cg-final__orbit i:nth-child(4) {
  right: 11%;
  bottom: 12%;
  rotate: -8deg;
  animation-delay: -1s;
}

/* =====================================================================
   CASE STUDIES  —  stacking cards (stack only when they fit, see JS)
   ===================================================================== */
.cg-case {
  padding: 120px 0 110px;
}

.cg-case__stack {
  display: grid;
  gap: 36px;
}

.cg-case__card {
  --sink: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 48px;
  align-items: center;
  padding: 24px;
  border-radius: 32px;
  background: #fff;
  border: 1px solid var(--cg-line);
  box-shadow: 0 30px 70px -40px rgba(10, 15, 44, 0.45);
  transform-origin: 50% 0;
}

.cg-case__stack.is-stacking .cg-case__card {
  position: sticky;
  top: calc(100px + var(--i) * 20px);
  transform: scale(calc(1 - var(--sink) * 0.05));
  filter: brightness(calc(1 - var(--sink) * 0.06));
}

.cg-case__art {
  width: 100%;
  max-width: min(520px, calc(100vh - 220px));
  aspect-ratio: 1;
  justify-self: center;
  overflow: hidden;
  border-radius: 22px;
  box-shadow: 0 20px 40px -28px rgba(10, 15, 44, 0.5);
  transition: transform 0.6s var(--cg-ease);
}

.cg-case__art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cg-case__card:hover .cg-case__art {
  transform: translateY(-4px);
}

.cg-case__body {
  padding: 8px 24px 8px 0;
}

.cg-case__body h3 {
  font-size: clamp(28px, 2.6vw, 38px);
  font-weight: 600;
  letter-spacing: -0.03em;
  margin-bottom: 22px;
}

.cg-case__psr {
  display: grid;
  gap: 16px;
}

.cg-case__psr > div {
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--cg-soft);
  border-left: 3px solid var(--c);
}

.cg-case__psr .is-p {
  --c: #ef5a6f;
}

.cg-case__psr .is-s {
  --c: var(--cg-blue);
}

.cg-case__psr .is-r {
  --c: #16b981;
}

.cg-case__psr dt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--cg-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c);
  margin-bottom: 6px;
}

.cg-case__psr dt i {
  font-size: 16px;
}

.cg-page .cg-case__psr dd {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--cg-text);
}

/* =====================================================================
   BUILD  —  feature console
   ===================================================================== */
.cg-build {
  padding: 120px 0;
  background: linear-gradient(180deg, var(--cg-bg), var(--cg-soft));
}

.cg-build__layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 40px;
  align-items: stretch;
}

.cg-build__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.cg-build__tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--cg-line);
  border-radius: 16px;
  background: #fff;
  color: var(--cg-ink);
  font-size: 15.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.4s var(--cg-ease),
    color 0.3s ease;
}

.cg-build__tab img {
  flex: none;
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.cg-build__tab span {
  flex: 1;
  line-height: 1.3;
}

.cg-build__tab > i {
  font-size: 18px;
  opacity: 0;
  transform: translate(-6px, 6px);
  transition:
    opacity 0.3s ease,
    transform 0.4s var(--cg-ease);
}

.cg-build__tab:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -22px rgba(43, 92, 255, 0.7);
}

.cg-build__tab:hover > i,
.cg-build__tab.is-active > i {
  opacity: 1;
  transform: none;
}

.cg-build__tab.is-active {
  border-color: transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--cg-grad) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 18px 36px -22px rgba(43, 92, 255, 0.8);
  color: var(--cg-blue);
}

.cg-build__tab:focus-visible {
  outline: 2px solid var(--cg-blue);
  outline-offset: 2px;
}

.cg-console {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  background: #0b1030;
  box-shadow:
    0 40px 80px -40px rgba(10, 15, 44, 0.8),
    inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  overflow: hidden;
  min-height: 340px;
}

.cg-console::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(500px 260px at 90% 0%, rgba(139, 92, 246, 0.35), transparent 60%),
    radial-gradient(400px 260px at 0% 100%, rgba(43, 92, 255, 0.3), transparent 60%);
  pointer-events: none;
}

.cg-console__bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cg-console__bar i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ff5f57;
}

.cg-console__bar i:nth-child(2) {
  background: #febc2e;
}

.cg-console__bar i:nth-child(3) {
  background: #28c840;
}

.cg-console__bar span {
  margin-left: 12px;
  font-family: var(--cg-mono);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

.cg-console__screen {
  position: relative;
  flex: 1;
  padding: 34px 36px;
}

.cg-page .cg-console__label {
  font-family: var(--cg-mono) !important;
  font-size: 13px;
  color: #6f7bb5;
  text-align: left;
}

.cg-page .cg-console__feat {
  margin: 8px 0 30px;
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 600;
  letter-spacing: -0.03em;
  background: linear-gradient(110deg, #fff, #c7d3ff 60%, #ffc8e4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-align: left;
}

.cg-page .cg-console__out {
  margin-top: 8px;
  font-family: var(--cg-mono) !important;
  font-size: 18px;
  line-height: 1.6;
  color: #e3e8ff;
  text-align: left;
  min-height: 3.2em;
}

.cg-console__out .cg-caret {
  color: var(--cg-cyan);
}

.cg-console__meter {
  position: relative;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
}

.cg-console__meter span {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--cg-cyan), var(--cg-violet), var(--cg-pink));
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0.125));
  transition: transform 0.6s var(--cg-ease);
}

/* idea CTA */
/* =====================================================================
   INDUSTRIES  —  3D icons, tilt
   ===================================================================== */
.cg-ind {
  padding: 120px 0;
}

.cg-ind__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  perspective: 1200px;
}

.cg-ind__card {
  position: relative;
  padding: 30px 30px 34px;
  border-radius: 26px;
  background: #fff;
  border: 1px solid var(--cg-line);
  overflow: hidden;
  isolation: isolate;
  transform: rotateX(var(--rx, 0)) rotateY(var(--ry, 0));
  transform-style: preserve-3d;
  transition:
    transform 0.5s var(--cg-ease),
    box-shadow 0.4s ease,
    border-color 0.4s ease;
}

.cg-ind__card:hover {
  border-color: rgba(43, 92, 255, 0.28);
  box-shadow: 0 40px 70px -40px rgba(43, 92, 255, 0.55);
}

.cg-ind__halo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgba(43, 92, 255, 0.12), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.cg-ind__card:hover .cg-ind__halo {
  opacity: 1;
}

.cg-ind__art {
  display: block;
  width: 120px;
  height: 120px;
  margin: -6px 0 18px -8px;
  object-fit: contain;
  filter: drop-shadow(0 18px 18px rgba(43, 92, 255, 0.25));
  transform: translateZ(40px);
  animation: cg-float 5s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.8s);
  transition: scale 0.5s var(--cg-ease);
}

.cg-ind__card:hover .cg-ind__art {
  scale: 1.08;
}

.cg-ind__card h3 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 10px;
  transform: translateZ(24px);
}

.cg-page .cg-ind__card p {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--cg-text);
}

/* =====================================================================
   TECH  —  three nodes on a data wire
   ===================================================================== */
.cg-tech {
  padding: 110px 0 120px;
  background:
    radial-gradient(700px 500px at 20% 60%, rgba(43, 92, 255, 0.1), transparent 65%),
    radial-gradient(600px 400px at 90% 20%, rgba(243, 154, 200, 0.14), transparent 65%),
    var(--cg-soft);
  overflow: clip;
}

.cg-tech__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

/* ---- 3D layered stack (orthographic iso) ---- */
.cg-tech__scene {
  --spread: 0;
  --s: 1;
  position: relative;
  height: 580px;
  display: grid;
  place-items: center;
}

.cg-tech__iso {
  position: relative;
  width: 340px;
  height: 340px;
  transform: scale(var(--s)) rotateX(56deg) rotateZ(-45deg);
  transform-style: preserve-3d;
}

.cg-tech__plate {
  --z: calc((1 - var(--i)) * (46px + var(--spread) * 84px));
  position: absolute;
  inset: 0;
  padding: 22px 26px;
  border-radius: 34px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(232, 237, 255, 0.92));
  border: 1px solid rgba(43, 92, 255, 0.18);
  box-shadow:
    7px 7px 0 rgba(43, 92, 255, 0.16),
    40px 40px 60px -20px rgba(10, 15, 44, 0.2);
  transform: translateZ(var(--z));
  transform-style: preserve-3d;
  transition:
    transform 0.9s var(--cg-ease),
    box-shadow 0.9s var(--cg-ease),
    border-color 0.9s ease;
}

/* gradients can't be transitioned, so the active fill is a layer that fades in */
.cg-tech__plate::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, #3d6bff, var(--cg-blue) 40%, var(--cg-violet));
  opacity: 0;
  transition: opacity 0.9s var(--cg-ease);
}

.cg-tech__plate.is-active::before {
  opacity: 1;
}

.cg-tech__plate.is-active {
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow:
    7px 7px 0 #2140b8,
    50px 50px 80px -20px rgba(43, 92, 255, 0.55);
  transform: translateZ(calc(var(--z) + 26px));
}

.cg-tech__plate-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--cg-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cg-ink);
  transform: translateZ(1px);
  transition: color 0.9s var(--cg-ease);
}

.cg-tech__plate-name i {
  font-size: 18px;
  color: var(--cg-blue);
  transition: color 0.9s var(--cg-ease);
}

.cg-tech__plate.is-active .cg-tech__plate-name,
.cg-tech__plate.is-active .cg-tech__plate-name i {
  color: #fff;
}

.cg-tech__tiles {
  position: absolute;
  inset: 70px 26px 26px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-content: start;
  gap: 14px;
  transform: translateZ(1px);
  transform-style: preserve-3d;
}

.cg-tech__tile {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: #fff;
  color: var(--cg-blue);
  font-size: 30px;
  box-shadow:
    4px 4px 0 rgba(10, 15, 44, 0.12),
    0 0 0 rgba(10, 15, 44, 0);
  transition:
    transform 0.8s var(--cg-ease),
    box-shadow 0.8s var(--cg-ease);
  transition-delay: calc(var(--j) * 0.05s);
}

.cg-tech__tile img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

/* tiles pop off the active plate */
.cg-tech__plate.is-active .cg-tech__tile {
  transform: translateZ(18px);
  box-shadow:
    5px 5px 0 rgba(10, 15, 44, 0.25),
    16px 16px 24px -8px rgba(10, 15, 44, 0.35);
}

.cg-tech__shadow {
  position: absolute;
  left: 50%;
  bottom: 18px;
  width: 420px;
  height: 70px;
  margin-left: -210px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(43, 92, 255, 0.25), transparent 70%);
  filter: blur(10px);
  transform: scale(calc(var(--s) * (1 - var(--spread) * 0.15)));
}

/* ---- group cards ---- */
.cg-tech__groups {
  display: grid;
  gap: 16px;
}

.cg-tech__group {
  position: relative;
  padding: 22px 24px 24px;
  border-radius: 22px;
  background-color: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--cg-line);
  outline: none;
  cursor: default;
  box-shadow: 0 30px 60px -36px rgba(43, 92, 255, 0);
  transition:
    background-color 0.7s var(--cg-ease),
    box-shadow 0.7s var(--cg-ease),
    transform 0.7s var(--cg-ease);
}

.cg-tech__group::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: var(--cg-grad);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s var(--cg-ease);
}

.cg-tech__group.is-active {
  background-color: #fff;
  box-shadow: 0 30px 60px -36px rgba(43, 92, 255, 0.6);
  transform: translateX(-6px);
}

.cg-tech__group.is-active::before {
  opacity: 1;
}

.cg-tech__group:focus-visible {
  outline: 2px solid var(--cg-blue);
  outline-offset: 3px;
}

/* a div, not <header>: the site styles every header element (adds a box-shadow) */
.cg-tech__ghead {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.cg-tech__badge {
  flex: none;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--cg-ink);
  color: #fff;
  font-size: 21px;
  position: relative;
  isolation: isolate;
  transition: transform 0.7s var(--cg-ease);
}

.cg-tech__badge::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(140deg, var(--cg-blue), var(--cg-violet));
  opacity: 0;
  transition: opacity 0.7s var(--cg-ease);
}

.cg-tech__group.is-active .cg-tech__badge {
  transform: rotate(-8deg);
}

.cg-tech__group.is-active .cg-tech__badge::after {
  opacity: 1;
}

.cg-tech__group h3 {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.cg-tech__bar {
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: var(--cg-line);
  overflow: hidden;
}

.cg-tech__bar span {
  display: block;
  height: 100%;
  background: var(--cg-grad);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.cg-tech__group.is-active .cg-tech__bar span {
  animation: cg-fill 3.2s linear forwards;
}

/* the loop is paused while hovered, so the bar holds full */
.cg-tech__group.is-active:is(:hover, :focus-visible) .cg-tech__bar span {
  animation: none;
  transform: scaleX(1);
}

.cg-tech__group ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cg-tech__group li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  background: var(--cg-soft);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.3;
  transition:
    background-color 0.7s var(--cg-ease),
    transform 0.4s var(--cg-ease);
}

.cg-tech__group.is-active li {
  background: #eef1ff;
}

.cg-tech__group li:hover {
  transform: translateY(-2px);
}

.cg-tech__logo {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 8px -4px rgba(10, 15, 44, 0.35);
  color: var(--cg-blue);
  font-size: 16px;
}

.cg-tech__logo img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.cg-page .cg-tech__note {
  max-width: 860px;
  margin: 56px auto 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--cg-text);
  text-align: center;
}

/* =====================================================================
   COST  —  range chart
   ===================================================================== */
.cg-cost {
  padding: 120px 0;
}

.cg-cost__layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 64px;
  align-items: center;
}

.cg-page .cg-cost__copy p {
  margin-top: 20px;
  font-size: 17px;
  line-height: 1.75;
  color: var(--cg-text);
}

.cg-page .cg-cost__note {
  padding: 14px 18px;
  border-radius: 14px;
  background: var(--cg-soft);
  border-left: 3px solid var(--cg-violet);
  font-size: 15.5px !important;
}

.cg-chart {
  padding: 30px 30px 22px;
  border-radius: 28px;
  background: #fff;
  border: 1px solid var(--cg-line);
  box-shadow: 0 40px 80px -50px rgba(43, 92, 255, 0.6);
}

.cg-chart__table {
  width: 100%;
  border-collapse: collapse;
}

.cg-chart__table thead th {
  padding: 0 0 14px;
  font-family: var(--cg-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a91b0;
  text-align: left;
}

.cg-chart__table thead th:last-child {
  text-align: right;
}

.cg-chart__table tbody tr {
  border-top: 1px solid var(--cg-line);
}

.cg-chart__table tbody th {
  width: 36%;
  padding: 16px 16px 16px 0;
  font-size: 15.5px;
  font-weight: 500;
  text-align: left;
  vertical-align: middle;
}

.cg-chart__table td {
  position: relative;
  padding: 16px 0;
  vertical-align: middle;
}

/* axis spans 0-90k so "80k+" has room to fade out */
.cg-chart__track {
  position: relative;
  display: block;
  height: 10px;
  border-radius: 99px;
  background: repeating-linear-gradient(90deg, var(--cg-soft) 0 calc(22.222% - 1px), rgba(10, 15, 44, 0.08) calc(22.222% - 1px) 22.222%);
}

.cg-chart__bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--a) / 90 * 100%);
  width: calc((var(--b) - var(--a)) / 90 * 100%);
  border-radius: 99px;
  background: linear-gradient(90deg, var(--cg-blue), var(--cg-violet));
  box-shadow: 0 6px 14px -6px rgba(43, 92, 255, 0.8);
  transform-origin: 0 50%;
  transform: scaleX(0);
  transition: transform 1.1s var(--cg-ease);
  transition-delay: calc(var(--i) * 0.12s);
}

.is-open .cg-chart__bar {
  width: calc((var(--b) - var(--a) + 10) / 90 * 100%);
  background: linear-gradient(90deg, var(--cg-violet), var(--cg-pink) 75%, transparent);
}

.cg-chart__price {
  display: block;
  margin-top: 8px;
  font-family: var(--cg-mono);
  font-size: 13.5px;
  color: var(--cg-ink);
  text-align: right;
  opacity: 0;
  transition: opacity 0.6s ease;
  transition-delay: calc(0.5s + var(--i) * 0.12s);
}

.cg-chart.is-drawn .cg-chart__bar {
  transform: scaleX(1);
}

.cg-chart.is-drawn .cg-chart__price {
  opacity: 1;
}

.cg-chart__axis {
  display: flex;
  justify-content: space-between;
  margin-left: 36%;
  margin-right: 11.1%;
  padding-top: 10px;
  border-top: 1px solid var(--cg-line);
  font-family: var(--cg-mono);
  font-size: 12px;
  color: #8a91b0;
}

.cg-chart__axis span {
  width: 0;
  display: flex;
  justify-content: center;
  white-space: nowrap;
}

/* budget CTA */
/* =====================================================================
   PROCESS  —  scroll-filled line
   ===================================================================== */
.cg-proc {
  padding: 120px 0;
  background: var(--cg-ink);
  overflow: clip; /* not hidden: hidden breaks the sticky aside */
}

.cg-proc::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%);
}

.cg-proc .container {
  position: relative;
}

.cg-proc .cg-head p {
  color: rgba(255, 255, 255, 0.7);
}

.cg-proc .cg-head strong {
  color: #fff;
}

.cg-proc__layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 80px;
  align-items: start;
}

/* grid item with align-self: start keeps its own height, so it sticks for the whole list */
.cg-proc__aside {
  position: sticky;
  top: 120px;
  align-self: start;
}

.cg-page .cg-proc__aside p {
  margin-top: 18px;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.7);
}

.cg-proc__aside strong {
  color: #fff !important;
}


.cg-proc__meter {
  position: relative;
  width: 210px;
  margin-top: 44px;
  display: grid;
  justify-items: center;
}

.cg-proc__meter svg {
  width: 170px;
  height: 170px;
  transform: rotate(-90deg);
  filter: drop-shadow(0 0 18px rgba(139, 92, 246, 0.45));
}

.cg-proc__meter circle {
  fill: none;
  stroke-width: 6;
}

.cg-proc__ring-bg {
  stroke: rgba(255, 255, 255, 0.08);
}

.cg-proc__ring {
  stroke: url(#cgProcGrad);
  stroke-linecap: round;
  stroke-dasharray: 326.73;
  stroke-dashoffset: calc(326.73px * (1 - var(--p, 0.2)));
  transition: stroke-dashoffset 0.7s var(--cg-ease);
}

.cg-proc__count {
  position: absolute;
  top: 0;
  height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #fff;
  font-family: var(--cg-mono);
}

.cg-proc__count b {
  font-size: 44px;
  font-weight: 500;
  line-height: 1;
}

.cg-proc__count small {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.45);
}

.cg-proc__now {
  margin-top: 16px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 14px;
  white-space: nowrap;
}

.cg-proc__now.is-swap {
  animation: cg-swap-up 0.5s var(--cg-ease);
}

/* vertical rail: base line + scroll fill, both on the list itself */
.cg-proc__list {
  position: relative;
  display: grid;
  gap: calc(22px + var(--extra, 0px));
  padding-left: 92px !important;
}

.cg-proc__list::before,
.cg-proc__list::after {
  content: "";
  position: absolute;
  left: 31px;
  top: var(--rail-top, 32px);
  height: var(--rail-len, 0px);
  width: 2px;
  background: rgba(255, 255, 255, 0.1);
}

.cg-proc__list::after {
  background: linear-gradient(180deg, var(--cg-cyan), var(--cg-violet), var(--cg-pink));
  box-shadow: 0 0 14px rgba(139, 92, 246, 0.7);
  transform-origin: 50% 0;
  transform: scaleY(var(--fill, 0));
  transition: transform 0.7s var(--cg-ease);
}

/* z-index: the reveal's translate makes each step a stacking context, keep it above the rail */
.cg-proc__step {
  position: relative;
  z-index: 1;
}

.cg-proc__num {
  position: absolute;
  z-index: 1;
  left: -92px;
  top: 0;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--cg-ink-2);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-family: var(--cg-mono);
  font-size: 18px;
  color: rgba(255, 255, 255, 0.5);
  transition:
    background 0.5s ease,
    color 0.5s ease,
    box-shadow 0.5s ease,
    transform 0.6s var(--cg-ease);
}

.cg-proc__step.is-done .cg-proc__num {
  background: #1b2560;
  color: #c9d4ff;
  border-color: rgba(157, 181, 255, 0.35);
}

.cg-proc__step.is-active .cg-proc__num {
  background: linear-gradient(140deg, var(--cg-blue), var(--cg-violet));
  border-color: transparent;
  color: #fff;
  box-shadow:
    0 0 0 8px rgba(43, 92, 255, 0.18),
    0 14px 30px -10px rgba(139, 92, 246, 0.8);
  transform: scale(1.08);
}

.cg-proc__card {
  position: relative;
  padding: 26px 30px 28px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  transition:
    background 0.5s ease,
    border-color 0.5s ease,
    transform 0.6s var(--cg-ease),
    box-shadow 0.5s ease;
}

.cg-proc__card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--cg-cyan), var(--cg-violet));
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform 0.6s var(--cg-ease);
}

.cg-proc__step.is-active .cg-proc__card {
  background: linear-gradient(120deg, rgba(43, 92, 255, 0.16), rgba(139, 92, 246, 0.08) 60%, rgba(255, 255, 255, 0.02));
  border-color: rgba(157, 181, 255, 0.3);
  box-shadow: 0 30px 60px -40px rgba(43, 92, 255, 0.9);
  transform: translateX(6px);
}

.cg-proc__step.is-active .cg-proc__card::before {
  transform: scaleY(1);
}

.cg-proc__step h3 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #fff;
  margin-bottom: 10px;
}

.cg-page .cg-proc__step p {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.5s ease;
}

.cg-page .cg-proc__step:is(.is-active, .is-done) p {
  color: rgba(255, 255, 255, 0.8);
}

/* =====================================================================
   EXISTING APP  —  sticky art + scroll-active list
   ===================================================================== */
.cg-exist {
  padding: 120px 0;
}

.cg-exist__layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 72px;
  align-items: start;
}

.cg-exist__media {
  height: 100%;
}

.cg-exist__sticky {
  position: sticky;
  top: 110px;
  display: grid;
  place-items: center;
}

.cg-exist__disc {
  position: absolute;
  width: 88%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(31, 200, 255, 0.35), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(243, 154, 200, 0.45), transparent 60%),
    radial-gradient(circle, rgba(139, 92, 246, 0.25), transparent 70%);
  filter: blur(10px);
  animation: cg-spin 30s linear infinite;
}



.cg-page .cg-exist__copy > div > p {
  margin-top: 18px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--cg-text);
}

.cg-exist__list {
  margin-top: 36px !important;
  display: grid;
  gap: calc(12px + var(--extra, 0px));
}

.cg-exist__item {
  display: flex;
  gap: 18px;
  padding: 20px 22px;
  border-radius: 20px;
  border: 1px solid transparent;
  transition:
    background 0.45s ease,
    border-color 0.45s ease,
    box-shadow 0.45s ease,
    transform 0.5s var(--cg-ease);
}

.cg-exist__icon {
  flex: none;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--cg-soft);
  transition:
    background 0.45s ease,
    transform 0.5s var(--cg-ease);
}

.cg-exist__icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.cg-exist__item h3 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}

.cg-page .cg-exist__item p {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--cg-text);
}

.cg-exist__item.is-active {
  background: #fff;
  border-color: var(--cg-line);
  box-shadow: 0 24px 50px -32px rgba(43, 92, 255, 0.6);
  transform: translateX(8px);
}

.cg-exist__item.is-active .cg-exist__icon {
  background: #e3e9ff;
  transform: rotate(-8deg);
}

.cg-exist__frame {
  position: relative;
  width: min(100%, 440px, calc((100vh - 150px) * 900 / 1145));
  animation: cg-float 7s ease-in-out infinite;
}

.cg-exist__art {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 40px 50px rgba(10, 15, 44, 0.25));
}

/* screen area of the phone in existing-art (alpha bbox + bezel) */
.cg-exist__screen {
  position: absolute;
  left: 10%;
  right: 9%;
  top: 6%;
  bottom: 5%;
  border-radius: 18px;
  overflow: hidden;
  pointer-events: none;
}

.cg-exist__scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 22%;
  background: linear-gradient(180deg, transparent, rgba(43, 92, 255, 0.14));
  border-bottom: 2px solid rgba(43, 92, 255, 0.7);
  box-shadow: 0 6px 16px -6px rgba(139, 92, 246, 0.8);
  animation: cg-scan 4.5s var(--cg-ease-io) infinite;
}

/* =====================================================================
   WHY  —  dark bento with glow cards
   ===================================================================== */
.cg-why {
  padding: 120px 0;
  background: var(--cg-ink);
  overflow: hidden;
  isolation: isolate;
}

.cg-why .container {
  position: relative;
  z-index: 1;
}

.cg-why .cg-head p {
  color: rgba(255, 255, 255, 0.7);
}

.cg-why .cg-head strong {
  color: #fff;
}

.cg-why__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px;
}

.cg-why__card {
  grid-column: span 2;
  position: relative;
  padding: 32px 30px 34px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 0.5s var(--cg-ease),
    border-color 0.4s ease;
}

.cg-why__card:nth-child(-n + 2) {
  grid-column: span 3;
}

.cg-why__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(340px circle at var(--sx, -400px) var(--sy, -400px), rgba(139, 92, 246, 0.28), transparent 60%);
  transition: opacity 0.4s ease;
  opacity: 0;
}

.cg-why__card:hover {
  transform: translateY(-6px);
  border-color: rgba(157, 181, 255, 0.35);
}

.cg-why__card:hover::before {
  opacity: 1;
}

.cg-why__icon {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  margin-bottom: 24px;
  border-radius: 18px;
  background: linear-gradient(140deg, var(--cg-blue), var(--cg-violet));
  box-shadow: 0 14px 30px -12px rgba(43, 92, 255, 0.9);
  transition: transform 0.6s var(--cg-ease);
}

.cg-why__card:hover .cg-why__icon {
  transform: rotate(-10deg) scale(1.08);
}

.cg-why__icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.cg-why__card h3 {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #fff;
  margin-bottom: 10px;
}

.cg-page .cg-why__card p {
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.66);
}

/* =====================================================================
   FINAL CTA
   ===================================================================== */
/* =====================================================================
   FAQ
   ===================================================================== */
.cg-faq {
  padding: 100px 0 120px;
}

.cg-faq__layout {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 64px;
  align-items: start;
}

.cg-faq__aside {
  position: sticky;
  top: 110px;
}

.cg-faq__promo {
  position: relative;
  margin-top: 32px;
  padding: 32px 28px;
  border-radius: 26px;
  background:
    radial-gradient(300px 200px at 100% 0%, rgba(139, 92, 246, 0.5), transparent 60%),
    var(--cg-ink);
  color: #fff;
  overflow: hidden;
}

.cg-faq__promo-mark {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 20px;
  border-radius: 16px;
  background: #fff;
}

.cg-faq__promo-mark img {
  width: 30px;
  height: 30px;
  animation: cg-spin 20s linear infinite;
}

.cg-faq__promo h3 {
  font-size: 22px;
  font-weight: 600;
  color: #fff;
}

.cg-page .cg-faq__promo p {
  margin: 10px 0 24px;
  font-size: 15.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);
}

.cg-faq__list {
  display: grid;
  gap: 12px;
}

.cg-faq__item {
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--cg-line);
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
  interpolate-size: allow-keywords;
}

.cg-faq__item::details-content {
  height: 0;
  overflow: clip;
  transition:
    height 0.45s var(--cg-ease),
    content-visibility 0.45s allow-discrete;
}

.cg-faq__item[open]::details-content {
  height: auto;
}

.cg-faq__item[open] {
  border-color: rgba(43, 92, 255, 0.3);
  box-shadow: 0 24px 50px -36px rgba(43, 92, 255, 0.7);
}

.cg-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  cursor: pointer;
  list-style: none;
}

.cg-faq__item summary::-webkit-details-marker {
  display: none;
}

.cg-faq__item summary h3 {
  font-size: 17.5px;
  font-weight: 500;
  line-height: 1.4;
}

.cg-faq__mark {
  flex: none;
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--cg-soft);
  transition:
    background 0.3s ease,
    transform 0.45s var(--cg-ease);
}

.cg-faq__mark::before,
.cg-faq__mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2px;
  margin: -1px 0 0 -6px;
  border-radius: 2px;
  background: var(--cg-ink);
  transition: background 0.3s ease;
}

.cg-faq__mark::after {
  transform: rotate(90deg);
}

.cg-faq__item[open] .cg-faq__mark {
  background: var(--cg-ink);
  transform: rotate(135deg);
}

.cg-faq__item[open] .cg-faq__mark::before,
.cg-faq__item[open] .cg-faq__mark::after {
  background: #fff;
}

.cg-page .cg-faq__item > p {
  padding: 0 24px 22px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--cg-text);
}

/* =====================================================================
   KEYFRAMES
   ===================================================================== */
@property --cg-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes cg-angle {
  to {
    --cg-angle: 360deg;
  }
}

@keyframes cg-rise {
  from {
    opacity: 0;
    translate: 0 34px;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes cg-from-right {
  from {
    opacity: 0;
    translate: 40px 0;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes cg-stream {
  from {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }

  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

@keyframes cg-typing-show {
  0%,
  100% {
    opacity: 0;
  }

  15%,
  80% {
    opacity: 1;
  }
}

@keyframes cg-dot {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.4;
  }

  50% {
    transform: translateY(-5px);
    opacity: 1;
  }
}

@keyframes cg-sheen {
  from {
    background-position: 0% 50%;
  }

  to {
    background-position: 100% 50%;
  }
}

@keyframes cg-blink {
  50% {
    opacity: 0;
  }
}

@keyframes cg-drift {
  from {
    transform: translate(0, 0) scale(1);
  }

  to {
    transform: translate(60px, 40px) scale(1.15);
  }
}

@keyframes cg-pan {
  to {
    background-position: 260px 260px;
  }
}

@keyframes cg-spin {
  to {
    rotate: 360deg;
  }
}

@keyframes cg-pmsg {
  from {
    opacity: 0;
    transform: translateY(0.8em) scale(0.96);
  }
}

@keyframes cg-pulse {
  50% {
    box-shadow: 0 0 0 8px rgba(139, 92, 246, 0.12);
  }
}

@keyframes cg-float {
  50% {
    translate: 0 -12px;
  }
}

@keyframes cg-ripple {
  from {
    transform: scale(0.6);
    opacity: 0.9;
  }

  to {
    transform: scale(1.35);
    opacity: 0;
  }
}


@keyframes cg-swap {
  from {
    opacity: 0;
    translate: -50% 10px;
    filter: blur(6px);
  }

  to {
    opacity: 1;
    translate: -50% 0;
    filter: none;
  }
}

@keyframes cg-sweep {
  0% {
    background-position: 160% 0;
  }

  55%,
  100% {
    background-position: -60% 0;
  }
}

@keyframes cg-ring {
  0% {
    transform: scale(1);
    opacity: 0.55;
  }

  100% {
    transform: scale(1.45);
    opacity: 0;
  }
}

@keyframes cg-swap-up {
  from {
    opacity: 0;
    translate: 0 10px;
    filter: blur(6px);
  }

  to {
    opacity: 1;
    translate: 0 0;
    filter: none;
  }
}

@keyframes cg-fill {
  to {
    transform: scaleX(1);
  }
}

@keyframes cg-wire {
  to {
    stroke-dashoffset: -18;
  }
}

@keyframes cg-scan {
  0% {
    top: -22%;
    opacity: 0;
  }

  12% {
    opacity: 1;
  }

  88% {
    opacity: 1;
  }

  100% {
    top: 100%;
    opacity: 0;
  }
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1199.98px) {
  .cg-bring__hub {
    gap: 20px 40px;
  }


  .cg-proc__layout {
    gap: 48px;
  }
}

@media (max-width: 991.98px) {
  .cg-hero {
    padding: 40px 0 64px;
  }

  .cg-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .cg-hero__copy {
    text-align: center;
  }

  .cg-page .cg-hero__text {
    margin-inline: auto;
    text-align: center;
  }

  .cg-hero__perks {
    justify-content: center;
  }

  .cg-demo {
    order: -1;
    width: min(100%, 560px);
    margin: 0 auto;
  }

  .cg-bring,
  .cg-svc,
  .cg-case,
  .cg-build,
  .cg-ind,
  .cg-tech,
  .cg-cost,
  .cg-proc,
  .cg-exist,
  .cg-why,
  .cg-faq {
    padding: 84px 0;
  }

  .cg-head {
    margin-bottom: 40px;
  }

  /* hub: core on top, cards in two columns */
  .cg-bring__hub {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    gap: 16px;
  }

  .cg-bring__card:nth-of-type(n) {
    grid-column: auto;
    grid-row: auto;
  }


  .cg-bring__wires {
    display: none;
  }

  .cg-core {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 240px;
    justify-self: center;
    margin-bottom: 8px;
  }

  .cg-svc__layout,
  .cg-build__layout,
  .cg-cost__layout,
  .cg-exist__layout,
  .cg-faq__layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .cg-svc__aside,
  .cg-faq__aside,
  .cg-proc__aside {
    position: static;
  }

  .cg-proc__layout {
    grid-template-columns: 1fr;
  }

  .cg-page .cg-proc__aside,
  .cg-page .cg-proc__aside p {
    text-align: center;
  }

  .cg-proc__meter {
    display: none;
  }

  .cg-svc__index {
    display: none;
  }

  .cg-page :is(.cg-svc__aside, .cg-exist__copy > div, .cg-cost__copy) {
    text-align: center;
  }

  .cg-page :is(.cg-svc__aside, .cg-exist__copy > div, .cg-cost__copy) > p,
  .cg-page .cg-exist__copy > div > p {
    text-align: center;
  }

  .cg-case__card {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 18px;
  }

  .cg-case__body {
    padding: 0 6px 8px;
  }

  .cg-case__art {
    max-width: 520px;
  }

  .cg-ind__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cg-tech__layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* the stack sits above the cards and scrolls away while they're read: cards only */
  .cg-tech__scene {
    display: none;
  }

  .cg-tech__group.is-active .cg-tech__bar span {
    animation: none;
    transform: scaleX(1);
    transition: transform 0.6s var(--cg-ease);
  }

  .cg-tech__group.is-active {
    transform: none;
  }

  .cg-exist__media {
    order: -1;
  }

  .cg-exist__sticky {
    position: relative;
    top: 0;
  }

  .cg-exist__frame {
    width: min(100%, 320px);
  }

  .cg-exist__item.is-active {
    transform: none;
  }

  .cg-why__card,
  .cg-why__card:nth-child(-n + 2) {
    grid-column: span 3;
  }

  .cg-why__card:last-child {
    grid-column: 1 / -1;
  }

}

@media (max-width: 991.98px) {
  .cg-band {
    padding: 40px 0;
  }

  .cg-final__orbit {
    display: none;
  }

  .cg-final__card {
    padding: 52px 28px;
    border-radius: 30px;
  }

  .cg-final {
    padding: 56px 0 16px;
  }

  .cg-cta {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 20px 26px;
    padding: 36px 32px;
  }

  .cg-cta .cg-btn {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 767.98px) {
  .cg-cta {
    grid-template-columns: 1fr;
    padding: 30px 22px;
    gap: 16px;
  }

  .cg-cta__icon {
    width: 62px;
    height: 62px;
    font-size: 28px;
    border-radius: 18px;
  }

  .cg-cta .cg-btn {
    grid-column: 1;
  }

  .cg-cta--spaced {
    margin-top: 40px;
  }

  .cg-hero__perks li {
    font-size: 13.5px;
  }
}

@media (max-width: 767.98px) {
  .cg-hero {
    padding: 40px 0 64px;
  }

  .cg-page .cg-hero__text {
    font-size: 16px;
  }

  .cg-bring__hub,
  .cg-build__list,
  .cg-ind__grid,
  .cg-why__grid {
    grid-template-columns: 1fr;
  }

  .cg-why__card,
  .cg-why__card:nth-child(-n + 2),
  .cg-why__card:last-child {
    grid-column: auto;
  }

  .cg-core {
    width: 200px;
  }



  .cg-turn__ask {
    max-width: 100%;
  }

  .cg-turn__ask h3 {
    font-size: 16px;
  }

  .cg-turn__avatar {
    display: none;
  }

  .cg-turn__bubble {
    padding: 16px 18px;
  }

  .cg-page .cg-turn__bubble p {
    text-align: left;
  }

  .cg-console {
    min-height: 0;
  }

  .cg-console__screen {
    padding: 24px 22px;
  }

  .cg-page .cg-console__out {
    font-size: 15px;
    min-height: 4.8em;
  }

  .cg-proc__list {
    padding-left: 70px !important;
  }

  .cg-proc__list::before,
  .cg-proc__list::after {
    left: 23px;
  }

  .cg-proc__num {
    left: -70px;
    width: 48px;
    height: 48px;
    font-size: 15px;
  }

  .cg-proc__card {
    padding: 20px 20px 22px;
  }

  .cg-proc__step.is-active .cg-proc__card {
    transform: none;
  }

  .cg-proc__step h3 {
    font-size: 19px;
  }

  .cg-chart {
    padding: 22px 18px 16px;
  }

  .cg-chart__table thead {
    display: none;
  }

  .cg-chart__table tbody tr {
    display: block;
    padding: 14px 0;
  }

  .cg-chart__table tbody th,
  .cg-chart__table td {
    display: block;
    width: auto;
    padding: 0;
  }

  .cg-chart__table td {
    margin-top: 10px;
  }

  .cg-chart__axis {
    margin-left: 0;
  }

  .cg-exist__item {
    padding: 16px 12px;
    gap: 14px;
  }

  .cg-btn {
    font-size: 15px;
  }

  .cg-faq__item summary {
    padding: 18px;
  }

  .cg-page .cg-faq__item > p {
    padding: 0 18px 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cg-page *,
  .cg-page *::before,
  .cg-page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* short / zoomed screens: smaller ring and type so the sticky aside fits the viewport */
@media (min-width: 992px) and (max-height: 820px) {
  .cg-proc__aside .cg-title {
    font-size: clamp(28px, 3vw, 40px);
  }

  .cg-page .cg-proc__aside p {
    margin-top: 12px;
    font-size: 15.5px;
  }

  .cg-proc__meter {
    margin-top: 20px;
  }

  .cg-proc__meter svg,
  .cg-proc__count {
    width: 110px;
    height: 110px;
  }

  .cg-proc__count b {
    font-size: 30px;
  }

  .cg-proc__now {
    margin-top: 10px;
  }
}

/* short desktop screens (1366x768 laptops): compact hero so the whole demo stays above the fold */
@media (min-width: 992px) and (max-height: 820px) {
  .cg-hero {
    padding: 28px 0 48px;
  }

  .cg-hero__title {
    font-size: clamp(40px, 4.4vw, 64px) !important;
  }

  .cg-page .cg-hero__text {
    margin-top: 16px;
    font-size: 16.5px;
  }

  .cg-hero__perks {
    margin-top: 18px !important;
  }

  .cg-hero__actions {
    margin-top: 22px;
  }
}