/* HERO */
.hero {
  min-height: 100svh; display: grid; align-items: center;
  padding: calc(var(--cd-nav) + 1.2rem) 0 clamp(3rem, 7vw, 4.5rem);
}
.hero__grid {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
}
.hero__title {
  margin: .85rem 0 .9rem; font-size: clamp(2.1rem, 5vw, 3.6rem);
  font-weight: 750; letter-spacing: -.035em; line-height: 1.08; max-width: 14ch;
}
.hero__rotator {
  min-height: 1.5em; margin: .35rem 0 1rem; color: var(--cd-accent);
  font-weight: 650; font-size: clamp(1.05rem, 2vw, 1.3rem);
}
.hero__rotator span { display: inline-block; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem; }
.hero__stage { position: relative; min-height: clamp(280px, 42vw, 480px); }
.hero__glow {
  position: absolute; inset: 10% 5%; border-radius: 50%;
  background: radial-gradient(circle, rgba(62,207,255,.2), transparent 65%);
  filter: blur(12px); transform: translate3d(var(--mx,0), var(--my,0), 0);
  transition: transform .45s var(--cd-ease); pointer-events: none;
}
.hero-visual {
  position: relative; height: 100%; min-height: inherit; border-radius: 24px; overflow: hidden;
  border: 1px solid var(--cd-border-2); background: #0b1119;
  box-shadow: var(--cd-shadow); transform: translate3d(calc(var(--mx,0)*-.3), calc(var(--my,0)*-.3), 0);
  transition: transform .5s var(--cd-ease);
}
.hero-visual__bar {
  display: flex; align-items: center; gap: .4rem; padding: .75rem 1rem;
  border-bottom: 1px solid var(--cd-border); background: rgba(255,255,255,.03);
}
.hero-visual__dot { width: 8px; height: 8px; border-radius: 50%; background: #3a4452; }
.hero-visual__dot:nth-child(1) { background: #ff6b6b; }
.hero-visual__dot:nth-child(2) { background: #ffd166; }
.hero-visual__dot:nth-child(3) { background: #6bcB77; }
.hero-visual__url {
  margin-left: .6rem; flex: 1; font-size: .72rem; color: var(--cd-faint);
  font-family: var(--cd-mono); padding: .35rem .6rem; border-radius: 8px; background: rgba(0,0,0,.25);
}
.hero-visual__body { display: grid; grid-template-columns: .9fr 1.1fr; gap: .8rem; padding: 1rem; min-height: 280px; }
.hero-visual__code {
  border-radius: 12px; border: 1px solid var(--cd-border); background: rgba(0,0,0,.28);
  padding: .85rem; font-family: var(--cd-mono); font-size: .68rem; color: #9ec9e8; line-height: 1.55;
}
.hero-visual__code b { color: var(--cd-accent); font-weight: 600; }
.hero-visual__code i { color: #c4b5ff; font-style: normal; }
.hero-visual__geo {
  position: relative; border-radius: 12px; border: 1px solid var(--cd-border);
  background:
    radial-gradient(circle at 70% 30%, rgba(62,207,255,.22), transparent 40%),
    radial-gradient(circle at 30% 70%, rgba(124,140,255,.18), transparent 42%),
    linear-gradient(160deg, #121925, #0a1018);
  overflow: hidden;
}
.hero-visual__shape {
  position: absolute; border: 1px solid rgba(62,207,255,.35); border-radius: 14px;
  background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(62,207,255,.05));
  backdrop-filter: blur(4px);
  animation: floatY 7s ease-in-out infinite;
}
.hero-visual__shape--a { width: 46%; height: 42%; left: 12%; top: 18%; transform: rotate(-12deg); }
.hero-visual__shape--b {
  width: 38%; height: 38%; right: 12%; bottom: 16%; border-radius: 50%;
  animation-delay: -2.5s; border-color: rgba(124,140,255,.4);
}
.hero-visual__shape--c {
  width: 24%; height: 24%; left: 42%; top: 48%; border-radius: 8px; animation-delay: -4s;
}
@keyframes floatY {
  0%, 100% { transform: translateY(0) rotate(var(--r, -12deg)); }
  50% { transform: translateY(-10px) rotate(var(--r, -12deg)); }
}
.hero-visual__shape--a { --r: -12deg; }
.hero-visual__shape--b { --r: 0deg; }
.hero-visual__shape--c { --r: 8deg; }

/* REMASTER — compact interactive examples */
.compare__intro {
  margin: 1.25rem 0 1rem; color: var(--cd-accent); font-size: .9rem; font-weight: 560;
}
.ba-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem; max-width: 860px; margin: 0 auto;
}
.ba-card {
  padding: .85rem; border-radius: 18px; border: 1px solid var(--cd-border);
  background: linear-gradient(160deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  transition: border-color .25s, transform .25s var(--cd-ease);
}
.ba-card:hover { border-color: rgba(62,207,255,.3); transform: translateY(-2px); }
.ba-card__head { margin-bottom: .65rem; padding: 0 .15rem; }
.ba-card__head h3 { font-size: 1rem; letter-spacing: -.02em; margin: 0 0 .2rem; }
.ba-card__head p { margin: 0; color: var(--cd-muted); font-size: .8rem; }
.ba {
  --pos: 52%; --ba-accent: #3ecfff; --ba-accent-2: #7c8cff;
  position: relative; aspect-ratio: 16 / 10.5; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--cd-border-2);
  box-shadow: 0 14px 36px rgba(0,0,0,.4), 0 0 28px color-mix(in srgb, var(--ba-accent) 18%, transparent);
  background: #0b1119; touch-action: none; user-select: none; cursor: ew-resize;
  outline: none;
}
.ba:focus-visible {
  box-shadow:
    0 14px 36px rgba(0,0,0,.4),
    0 0 0 2px color-mix(in srgb, var(--ba-accent) 70%, transparent),
    0 0 36px color-mix(in srgb, var(--ba-accent) 28%, transparent);
}
.ba::after {
  content: ""; position: absolute; inset: -28%; z-index: 0; pointer-events: none; opacity: .5;
  background: radial-gradient(circle at 70% 30%, color-mix(in srgb, var(--ba-accent) 28%, transparent), transparent 42%);
  animation: baGlow 6s ease-in-out infinite alternate;
}
.ba.is-dragging {
  box-shadow:
    0 18px 44px rgba(0,0,0,.5),
    0 0 42px color-mix(in srgb, var(--ba-accent) 32%, transparent);
}
.ba.is-dragging::after { animation-duration: 1.6s; opacity: .85; }
@keyframes baGlow {
  from { transform: translate3d(-2%, -1%, 0) scale(1); opacity: .35; }
  to { transform: translate3d(3%, 2%, 0) scale(1.05); opacity: .65; }
}
.ba__layer { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.ba__layer--before {
  z-index: 2;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.ba.is-settling:not(.is-dragging) .ba__layer--before,
.ba.is-settling:not(.is-dragging) .ba__handle {
  transition: clip-path .55s cubic-bezier(.22,1,.36,1), left .55s cubic-bezier(.22,1,.36,1);
}
.ba__mock { height: 100%; padding: .7rem .75rem; display: flex; flex-direction: column; }
.ba__mock--old {
  background: linear-gradient(#d8dce3, #b8c0cb);
  color: #333; font-family: Georgia, "Times New Roman", serif;
}
.ba__mock--new {
  --ba-accent: #3ecfff; --ba-accent-2: #7c8cff;
  background:
    radial-gradient(circle at 80% 0%, color-mix(in srgb, var(--ba-accent) 26%, transparent), transparent 42%),
    linear-gradient(165deg, #121925, #0a1018);
  color: var(--cd-text);
  font-family: var(--cd-font, "DM Sans", system-ui, sans-serif);
}
.ba__mock--cyan { --ba-accent: #3ecfff; --ba-accent-2: #6aa8ff; }
.ba__mock--violet { --ba-accent: #b07cff; --ba-accent-2: #ff4ecd; }
.ba__mock--amber { --ba-accent: #ffb347; --ba-accent-2: #ff6b4a; }
.ba__mock--mint { --ba-accent: #5ddea8; --ba-accent-2: #3ecfff; }
.ba__cta {
  display: inline-flex; margin-top: .45rem; padding: .32rem .65rem; border-radius: 999px;
  background: linear-gradient(135deg, var(--ba-accent), var(--ba-accent-2));
  color: #061018; font-size: .65rem; font-weight: 700; width: fit-content;
}
.ba__cta--amber { color: #1a1208; }

/* --- Handwerk: CTA + Trust --- */
.ba-layout--handwerk { gap: .45rem; }
.ba-hw__top {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .62rem; color: var(--cd-muted);
}
.ba-hw__brand { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ba-accent); }
.ba-hw__phone {
  padding: .2rem .45rem; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ba-accent) 45%, transparent);
  background: color-mix(in srgb, var(--ba-accent) 12%, transparent); color: var(--cd-text);
}
.ba-hw__hero {
  flex: 1; padding: .7rem; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--ba-accent) 40%, transparent);
  background: linear-gradient(145deg, color-mix(in srgb, var(--ba-accent) 18%, transparent), rgba(255,255,255,.03));
}
.ba-hw__hero h4 { font-size: .95rem; margin: 0 0 .2rem; letter-spacing: -.02em; }
.ba-hw__hero p { margin: 0; font-size: .66rem; color: var(--cd-muted); }
.ba-hw__trust {
  display: flex; gap: .35rem; font-size: .6rem; color: var(--cd-muted);
}
.ba-hw__trust span {
  padding: .18rem .4rem; border-radius: 6px; background: rgba(255,255,255,.04);
  border: 1px solid var(--cd-border);
}
.ba-layout--handwerk-old { padding: .55rem .65rem; }
.ba-old-table__row {
  font-size: .62rem; background: #003399; color: #fff; padding: .25rem .4rem; margin: -.1rem -.2rem .45rem;
}
.ba-old-table__row u { color: #ff0; }
.ba-old-wall {
  margin: 0 0 .4rem; font-size: .62rem; line-height: 1.35; color: #222;
  max-height: 4.6em; overflow: hidden;
}
.ba-old-tiny { margin: 0; font-size: .55rem; color: #666; }

/* --- Creator: Profile + Links + Grid --- */
.ba-layout--creator {
  align-items: center; text-align: center; gap: .5rem;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--ba-accent) 35%, transparent), transparent 50%),
    linear-gradient(180deg, #1a1028, #0a0814) !important;
}
.ba-cr__profile { display: flex; align-items: center; gap: .55rem; width: 100%; text-align: left; }
.ba-cr__avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--ba-accent), var(--ba-accent-2));
  box-shadow: 0 0 16px color-mix(in srgb, var(--ba-accent) 50%, transparent);
}
.ba-cr__profile h4 { margin: 0; font-size: .85rem; }
.ba-cr__live {
  display: inline-block; margin-top: .15rem; font-size: .55rem; font-weight: 800;
  letter-spacing: .06em; color: #ff4d6d;
}
.ba-cr__links { display: flex; flex-direction: column; gap: .28rem; width: 100%; }
.ba-cr__links span {
  padding: .38rem .55rem; border-radius: 999px; font-size: .68rem; font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--ba-accent) 40%, transparent);
  background: color-mix(in srgb, var(--ba-accent) 14%, rgba(0,0,0,.25));
}
.ba-cr__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; width: 100%; margin-top: .15rem;
}
.ba-cr__grid i {
  display: block; aspect-ratio: 1; border-radius: 6px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--ba-accent) 40%, #222), #1a1228);
  border: 1px solid color-mix(in srgb, var(--ba-accent) 30%, transparent);
}
.ba-layout--creator-old {
  background: #e8e8e8 !important; align-items: stretch; font-family: Arial, sans-serif;
}
.ba-cr-old__title {
  margin: 0 0 .45rem; text-align: center; font-size: .75rem; color: #444; text-transform: lowercase;
}
.ba-cr-old__list { display: flex; flex-direction: column; gap: .28rem; }
.ba-cr-old__list span {
  padding: .35rem; background: #fff; border: 1px solid #bbb; font-size: .62rem;
  color: #06c; text-decoration: underline; text-align: center; border-radius: 2px;
}

/* --- Gastro: Dishes + Reserve --- */
.ba-layout--gastro {
  gap: .4rem;
  background:
    radial-gradient(ellipse at 30% 0%, rgba(255,140,60,.28), transparent 50%),
    linear-gradient(165deg, #1c120c, #0d0908) !important;
}
.ba-ga__hero {
  position: relative; padding: .55rem .65rem; border-radius: 10px; min-height: 2.6rem;
  background:
    linear-gradient(120deg, rgba(0,0,0,.35), transparent),
    linear-gradient(135deg, #5a3420, #2a1810);
  border: 1px solid rgba(255,179,71,.35);
}
.ba-ga__hero h4 { margin: .35rem 0 0; font-size: .95rem; color: #ffe8c8; }
.ba-ga__badge {
  position: absolute; top: .35rem; right: .4rem; font-size: .52rem; font-weight: 700;
  padding: .12rem .35rem; border-radius: 999px; background: #3d9a5f; color: #fff;
}
.ba-ga__dishes { display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.ba-ga__dish {
  display: flex; align-items: center; gap: .45rem; padding: .3rem;
  border-radius: 8px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,179,71,.2);
}
.ba-ga__dish i {
  width: 28px; height: 28px; border-radius: 6px; flex-shrink: 0;
  background: linear-gradient(145deg, #c47840, #6b3a1e);
}
.ba-ga__dish b { display: block; font-size: .7rem; color: #ffe8c8; }
.ba-ga__dish em { font-style: normal; font-size: .65rem; color: var(--ba-accent); font-weight: 700; }
.ba-layout--gastro-old {
  align-items: center; justify-content: center; text-align: center; gap: .55rem;
  background: #cfc8be !important;
}
.ba-ga-old__pdf {
  padding: .7rem 1rem; background: #fff; border: 2px dashed #888; font-size: .78rem; font-weight: 700; color: #444;
}
.ba-ga-old__times { margin: 0; font-size: .68rem; color: #333; line-height: 1.35; }
.ba-ga-old__times small { color: #a00; }
.ba-ga-old__note { margin: 0; font-size: .58rem; color: #666; line-height: 1.3; }

/* --- Shop: Product grid --- */
.ba-layout--shop { gap: .35rem; padding-top: .55rem; }
.ba-sh__bar {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .65rem; font-weight: 700; color: var(--cd-muted);
}
.ba-sh__cart {
  padding: .18rem .4rem; border-radius: 999px; font-size: .58rem;
  background: color-mix(in srgb, var(--ba-accent) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--ba-accent) 40%, transparent); color: var(--cd-text);
}
.ba-sh__filters { display: flex; gap: .25rem; }
.ba-sh__filters em {
  font-style: normal; font-size: .55rem; padding: .15rem .4rem; border-radius: 999px;
  border: 1px solid var(--cd-border); color: var(--cd-muted);
}
.ba-sh__filters em:first-child {
  background: color-mix(in srgb, var(--ba-accent) 25%, transparent);
  border-color: color-mix(in srgb, var(--ba-accent) 45%, transparent); color: var(--cd-text);
}
.ba-sh__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; flex: 1;
}
.ba-sh__card {
  display: flex; flex-direction: column; gap: .2rem; padding: .3rem;
  border-radius: 8px; border: 1px solid var(--cd-border); background: rgba(255,255,255,.03);
}
.ba-sh__card i {
  display: block; aspect-ratio: 1.1; border-radius: 5px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--ba-accent) 35%, #1a2030), #121820);
}
.ba-sh__card b { font-size: .58rem; }
.ba-sh__card span { font-size: .62rem; font-weight: 700; color: var(--ba-accent); }
.ba-sh__card--feat {
  border-color: color-mix(in srgb, var(--ba-accent) 50%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--ba-accent) 25%, transparent);
}
.ba-layout--shop-old {
  background: #dfe3ea !important; font-family: "Times New Roman", serif; gap: .35rem;
}
.ba-sh-old__h { margin: 0; font-size: .8rem; color: #000080; text-decoration: underline; }
.ba-sh-old__list {
  margin: 0; padding-left: 1rem; font-size: .6rem; color: #222; line-height: 1.45; flex: 1;
}
.ba-sh-old__list li { margin-bottom: .1rem; }
.ba-sh-old__cart { margin: 0; font-size: .62rem; color: #00c; text-decoration: underline; }
.ba__handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 4;
  width: 3px; margin-left: -1.5px;
  background: linear-gradient(180deg, transparent 4%, var(--ba-accent, #3ecfff) 35%, var(--ba-accent-2, #7c8cff) 65%, transparent 96%);
  pointer-events: none;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--ba-accent, #3ecfff) 75%, transparent));
}
.ba__handle::before {
  content: ""; position: absolute; inset: 0 -10px; background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--ba-accent) 22%, transparent), transparent);
  opacity: .7;
}
.ba.is-dragging .ba__handle {
  width: 4px; margin-left: -2px;
  filter: drop-shadow(0 0 16px color-mix(in srgb, var(--ba-accent, #3ecfff) 90%, transparent));
}
.ba__grip {
  position: absolute; top: 50%; left: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.45);
  background: linear-gradient(145deg, var(--ba-accent, #3ecfff), var(--ba-accent-2, #7c8cff));
  box-shadow:
    0 8px 20px rgba(0,0,0,.4),
    0 0 18px color-mix(in srgb, var(--ba-accent, #3ecfff) 55%, transparent),
    inset 0 1px 0 rgba(255,255,255,.35);
  display: grid; place-items: center; place-content: center; grid-auto-flow: column; gap: 2px;
  transform: scale(1); transition: transform .2s var(--cd-ease), box-shadow .2s;
}
.ba.is-dragging .ba__grip {
  transform: scale(1.12);
  box-shadow:
    0 10px 26px rgba(0,0,0,.45),
    0 0 28px color-mix(in srgb, var(--ba-accent, #3ecfff) 70%, transparent),
    inset 0 1px 0 rgba(255,255,255,.4);
}
.ba:not(.is-touched) .ba__grip {
  animation: baPulse 2.4s ease-in-out infinite;
}
@keyframes baPulse {
  0%, 100% { box-shadow: 0 8px 20px rgba(0,0,0,.4), 0 0 14px color-mix(in srgb, var(--ba-accent) 45%, transparent), inset 0 1px 0 rgba(255,255,255,.35); }
  50% { box-shadow: 0 8px 20px rgba(0,0,0,.4), 0 0 26px color-mix(in srgb, var(--ba-accent) 75%, transparent), inset 0 1px 0 rgba(255,255,255,.35); }
}
.ba__grip::before, .ba__grip::after {
  content: ""; width: 0; height: 0; border-style: solid; opacity: .95;
}
.ba__grip::before {
  border-width: 4px 5px 4px 0; border-color: transparent #061018 transparent transparent;
}
.ba__grip::after {
  border-width: 4px 0 4px 5px; border-color: transparent transparent transparent #061018;
}
.ba__tag {
  position: absolute; top: .45rem; z-index: 5; padding: .18rem .45rem; border-radius: 999px;
  font-size: .6rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid var(--cd-border); background: rgba(5,7,11,.72); color: var(--cd-muted);
  backdrop-filter: blur(8px); pointer-events: none;
}
.ba__tag--old { left: .45rem; }
.ba__tag--new {
  right: .45rem; color: var(--ba-accent, var(--cd-accent));
  border-color: color-mix(in srgb, var(--ba-accent, #3ecfff) 40%, transparent);
  background: color-mix(in srgb, var(--ba-accent, #3ecfff) 14%, rgba(5,7,11,.7));
}
.ba__range {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap;
  opacity: 0; pointer-events: none;
}
.compare__note { margin-top: .85rem; text-align: center; font-size: .75rem; color: var(--cd-faint); }
.feature-chips {
  display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center;
  margin: 1.25rem auto 0; max-width: 640px;
}
.feature-chips li {
  padding: .4rem .7rem; border-radius: 999px; border: 1px solid var(--cd-border);
  background: rgba(255,255,255,.02); color: var(--cd-muted); font-size: .8rem;
}
.feature-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-top: 1.75rem;
}
.feature-grid li {
  padding: .9rem 1rem; border-radius: var(--cd-r-sm); border: 1px solid var(--cd-border);
  background: rgba(255,255,255,.02); color: var(--cd-muted); font-size: .92rem;
}
@media (max-width: 760px) {
  .ba-grid { grid-template-columns: 1fr; max-width: 400px; }
}
@media (prefers-reduced-motion: reduce) {
  .ba::after, .ba-card:hover, .ba:not(.is-touched) .ba__grip { animation: none; transform: none; }
  .ba.is-settling:not(.is-dragging) .ba__layer--before,
  .ba.is-settling:not(.is-dragging) .ba__handle { transition: none; }
}

/* WORKFLOW / PROCESS */
.steps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin-top: 2rem;
}
.step {
  padding: 1.1rem 1rem; border-radius: var(--cd-r-sm); border: 1px solid var(--cd-border);
  background: rgba(255,255,255,.02); min-height: 120px;
}
.step strong {
  display: block; font-family: var(--cd-mono); font-size: .75rem; color: var(--cd-accent); margin-bottom: .45rem;
}
.step p { color: var(--cd-muted); font-size: .9rem; }

/* SERVICES */
.service-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 1rem; }
.service-tabs button {
  padding: .55rem .95rem; border-radius: 999px; border: 1px solid var(--cd-border);
  color: var(--cd-muted); background: rgba(255,255,255,.02); font-weight: 560;
}
.service-tabs button[aria-selected="true"] {
  color: #061018; background: linear-gradient(135deg, #3ecfff, #7c8cff); border-color: transparent;
}
.service-panel { display: none; }
.service-panel.is-active { display: block; }
.service-list {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem;
}
.service-list li {
  padding: .85rem .95rem; border-radius: var(--cd-r-sm); border: 1px solid var(--cd-border);
  background: rgba(255,255,255,.02); color: var(--cd-muted); font-size: .92rem;
}

/* SYSTEMS / WHY / TECH / BOTS / PROJECTS */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .85rem; margin-top: 1.75rem; }
.card {
  padding: 1.2rem 1.15rem; border-radius: var(--cd-r); border: 1px solid var(--cd-border);
  background: rgba(255,255,255,.02); transition: border-color .25s, transform .25s var(--cd-ease);
}
.card:hover { border-color: rgba(62,207,255,.35); transform: translateY(-2px); }
.card h3 { font-size: 1.05rem; margin-bottom: .45rem; letter-spacing: -.015em; }
.card p { color: var(--cd-muted); font-size: .92rem; }

.tech-cloud {
  display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.6rem;
}
.tech-cloud span {
  padding: .55rem .85rem; border-radius: 999px; border: 1px solid var(--cd-border);
  background: rgba(255,255,255,.025); color: var(--cd-muted); font-size: .88rem; font-weight: 550;
}

.demo-badge {
  display: inline-flex; margin-bottom: .55rem; padding: .25rem .55rem; border-radius: 999px;
  border: 1px dashed rgba(240,179,90,.45); color: var(--cd-warn); font-size: .72rem; font-weight: 650;
}

/* GAMING / BOT RENTAL */
.game-pillars {
  display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.35rem 0 1.6rem;
}
.game-pillars span {
  padding: .4rem .75rem; border-radius: 999px; border: 1px solid var(--cd-border);
  background: rgba(255,255,255,.02); color: var(--cd-muted); font-size: .8rem; font-weight: 560;
}
.game-features {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1.35rem;
}
.game-feat {
  padding: 1rem 1.05rem; border-radius: 14px; border: 1px solid var(--cd-border);
  background: linear-gradient(165deg, rgba(88,101,242,.08), rgba(255,255,255,.02));
}
.game-feat h3 { margin: 0 0 .35rem; font-size: .95rem; letter-spacing: -.015em; }
.game-feat p { margin: 0; color: var(--cd-muted); font-size: .8rem; line-height: 1.4; }
.game-plans--row {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem;
}
.game-plan {
  position: relative; padding: 1.15rem 1.05rem; border-radius: 16px; border: 1px solid var(--cd-border);
  background: rgba(0,0,0,.22); display: flex; flex-direction: column;
}
.game-plan--hot {
  border-color: rgba(62,207,255,.45);
  background: linear-gradient(160deg, rgba(62,207,255,.12), rgba(88,101,242,.06));
  box-shadow: 0 0 36px rgba(62,207,255,.12);
}
.game-plan__badge {
  position: absolute; top: .65rem; right: .7rem; padding: .15rem .45rem; border-radius: 999px;
  font-size: .58rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase;
  background: linear-gradient(135deg, #3ecfff, #7c8cff); color: #061018;
}
.game-plan__top {
  display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; margin-bottom: .55rem;
}
.game-plan__top strong { font-size: 1rem; }
.game-plan__price { margin: 0; display: flex; align-items: baseline; gap: .25rem; }
.game-plan__price b { font-size: 1.3rem; letter-spacing: -.03em; color: var(--cd-text); }
.game-plan__price span { font-size: .72rem; color: var(--cd-muted); }
.game-plan ul {
  margin: 0 0 .95rem; padding: 0; list-style: none; display: grid; gap: .3rem; flex: 1;
}
.game-plan li {
  position: relative; padding-left: 1rem; font-size: .8rem; color: var(--cd-muted);
}
.game-plan li::before {
  content: ""; position: absolute; left: 0; top: .45em; width: .4rem; height: .4rem; border-radius: 50%;
  background: var(--cd-accent);
}
.game-plan .btn { align-self: flex-start; }

.timeline { margin-top: 2rem; display: grid; gap: .7rem; }
.timeline li {
  display: grid; grid-template-columns: 56px 1fr; gap: 1rem; padding: 1rem 1.1rem;
  border: 1px solid var(--cd-border); border-radius: var(--cd-r-sm); background: rgba(255,255,255,.02);
}
.timeline b { color: var(--cd-accent); font-family: var(--cd-mono); font-size: .85rem; }
.timeline strong { display: block; margin-bottom: .25rem; }
.timeline p { color: var(--cd-muted); font-size: .92rem; }

@media (max-width: 960px) {
  .hero__grid, .game-plans--row { grid-template-columns: 1fr; }
  .game-features { grid-template-columns: 1fr 1fr; }
  .feature-grid, .service-list, .card-grid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .hero-visual__body { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .feature-grid, .service-list, .card-grid, .steps, .game-features { grid-template-columns: 1fr; }
  .hero__actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-visual__shape { animation: none; }
  .hero__glow, .hero-visual { transform: none !important; }
  .card:hover { transform: none; }
}