/* Hero: «ИИ-агент для реальных дел», Cody at his desk rising into the headline, the call to action under him. Cody is
   a vector ink drawing with a hand-drawn «boil»; glass cards of real outcomes orbit him on two tilted ellipses
   (hero.js), in front of him on the near half and behind him on the far half. */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Cody's glyph leads the wordmark. */
.wordmark { display: inline-flex; align-items: center; gap: 7px; }
.wordmark .wordmark-glyph { font-family: "Cody Glyph"; font-size: 26px; font-weight: 400; letter-spacing: 0; color: var(--ink); line-height: 1; }
.wordmark .wordmark-text { color: var(--ink); font-weight: 650; }
.wordmark .wordmark-text span { color: var(--muted); font-weight: 450; }

.hero .hero-content {
  position: relative;
  z-index: 0;
  width: 100%;
  max-width: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: clamp(16px, 3vh, 40px);
  row-gap: 0;
}
.hero .hero-title { position: relative; z-index: 2; margin: 0; text-align: center; font-size: clamp(46px, 5.6vw, 88px); line-height: .92; }

/* Layers, back to front: far halves of the orbits, far cards, the headline, Cody, near halves of the orbits, near cards,
   the call to action — so the orbits and cards visibly wrap around him. */
.hero .hero-title { z-index: 3; }
.hero-orbit { --scene-h: clamp(320px, 48vh, 580px); position: relative; width: 100%; height: var(--scene-h); flex: none; margin-top: clamp(10px, 2.2vh, 24px); }
.hero-rings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hero-rings-back { z-index: 1; }
.hero-rings-front { z-index: 5; }
/* Orbits: a still, fine dashed line, barely there. The near arc repeats the far ellipse's dashes exactly (same start,
   same direction), a touch lighter. */
.hero-rings ellipse, .hero-rings path { fill: none; stroke: rgba(20, 20, 20, .13); stroke-width: 1; stroke-dasharray: 6 7; }
.hero-rings path { stroke: rgba(20, 20, 20, .09); }
.hero-desk { position: absolute; z-index: 4; left: 50%; top: 0; height: 94%; aspect-ratio: 828 / 652; transform: translateX(-50%); pointer-events: none; }
.hero-desk img { display: block; width: 100%; height: 100%; animation: hero-boil .5s steps(1) infinite; }
/* Hand-drawn boil: the ink wobbles a few times a second like a drawn animation. */
@keyframes hero-boil { 0% { filter: url(#boil-1); } 33% { filter: url(#boil-2); } 66% { filter: url(#boil-3); } }
/* Cody is layered so he can react to a poke (hero-cody.js): the scene is the whole drawing with his head masked out,
   on top sit the head and his face - pupils, blinking lids and the glasses frame. At rest the layers add up to the
   original drawing, pupils down in the laptop. Each drawn layer boils on its own, so a moving head costs no more. */
.hero-scene { -webkit-mask: url(hero/cody-desk-hole.svg) 0 0 / 100% 100% no-repeat; mask: url(hero/cody-desk-hole.svg) 0 0 / 100% 100% no-repeat; }
.hero-head { position: absolute; left: 37.4%; top: 3.53%; width: 29.03%; height: 34.41%; transform-origin: 49.25% 95.25%; }
.hero-face { position: absolute; left: 24.27%; top: 58.1%; width: 62.55%; height: 25.85%; }
.hero-face img { position: absolute; inset: 0; }
.hero-pupil { position: absolute; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: #141414; transition: transform .22s cubic-bezier(.3, .7, .3, 1); }
.hero-pupil-l { left: 27.05%; top: 71.26%; width: 9.76%; }
.hero-pupil-r { left: 81.04%; top: 56.03%; width: 9.98%; }
/* Blink: a white lid over the whole lens, with an ink line, closes for a moment; the frame covers its edges. */
.hero-lid { position: absolute; translate: -50% -50%; border-radius: 12%; background: #fff; transform: scaleY(0); animation: hero-blink 5.2s infinite; }
.hero-lid::after { content: ""; position: absolute; left: 12%; right: 12%; top: 50%; height: 16%; translate: 0 -50%; border-radius: 99px; background: #141414; }
.hero-lid-l { left: 22.76%; top: 59.4%; width: 34.25%; height: 49.91%; rotate: -2.8deg; }
.hero-lid-r { left: 77.1%; top: 43.84%; width: 34.42%; height: 51.64%; rotate: -8.7deg; }
@keyframes hero-blink { 0%, 90%, 100% { transform: scaleY(0); } 92.5%, 95% { transform: scaleY(1); } }

/* A poke lands on Cody himself (head and body), not on the desk around him. */
.hero-poke { position: absolute; z-index: 1; left: 36%; top: 2%; width: 31%; height: 52%; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; touch-action: manipulation; user-select: none; -webkit-tap-highlight-color: transparent; }
/* He starts: squash, stretch, settle - from the chin, so the head never leaves the collar - the glasses a beat behind. */
.hero-head.is-startled { animation: hero-startle .62s cubic-bezier(.3, .7, .3, 1); }
.hero-head.is-startled .hero-face { animation: hero-glasses .62s cubic-bezier(.3, .7, .3, 1) .06s; }
@keyframes hero-startle { 16% { transform: scale(1.05, .92); } 40% { transform: scale(1, 1.13); } 62% { transform: scale(1.03, .97); } 80% { transform: scale(1, 1.02); } }
@keyframes hero-glasses { 22% { transform: translateY(6%); } 48% { transform: translateY(-16%); } 70% { transform: translateY(4%); } }
/* He looks up from the laptop at you and blinks: the pupils grow a little and stop just short of the lens centres,
   so it reads as a friendly glance rather than a stare. */
.hero-head.is-looking .hero-pupil-l { transform: translate(-39%, -33%) scale(1.2); }
.hero-head.is-looking .hero-pupil-r { transform: translate(-35%, -33%) scale(1.2); }
.hero-head.is-blinking .hero-lid { animation: hero-blink-once .26s ease-in-out; }
@keyframes hero-blink-once { 40%, 60% { transform: scaleY(1); } }
/* The seventh poke overheats him: the flame shoots up and shakes, a drop of sweat runs down, the button below hops. */
.hero-head.is-overheated { animation: hero-overheat 1.8s cubic-bezier(.3, .7, .3, 1); }
@keyframes hero-overheat {
  14% { transform: scale(1.03, 1.24); }
  20%, 32%, 44%, 56%, 68% { transform: scale(1.03, 1.24) rotate(-1.5deg); }
  26%, 38%, 50%, 62%, 74% { transform: scale(1.03, 1.24) rotate(1.5deg); }
  86% { transform: scale(1, .97); }
}
.hero-sweat { position: absolute; left: 86%; top: 34%; width: 7%; overflow: visible; opacity: 0; fill: #fff; stroke: #141414; stroke-width: 2.6; stroke-linejoin: round; }
.hero-head.is-overheated .hero-sweat { animation: hero-sweat 1.8s ease-in; }
@keyframes hero-sweat { 0%, 14% { opacity: 0; transform: translateY(-30%) scale(.5); } 24% { opacity: 1; transform: none; } 80% { opacity: 1; transform: translateY(80%); } 100% { opacity: 0; transform: translateY(100%); } }
.hero .hero-cta.is-nudged { animation: hero-nudge .8s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes hero-nudge { 22% { transform: translateY(-8px) scale(1.05); } 48% { transform: translateY(1px) scale(.98); } 70% { transform: translateY(-3px) scale(1.01); } }

/* Cody says hello: an ink speech bubble by his head, two lines taking turns. It is also a way in: a click opens Cody
   in Telegram (tracked as the «hero-bubble» placement). */
.hero-say {
  position: absolute;
  z-index: 2;
  right: 63%;
  top: 10%;
  display: grid;
  margin: 0;
  padding: 9px 16px 10px;
  border: 2.5px solid #141414;
  border-radius: 22px;
  background: #fff;
  color: var(--ink);
  font-size: clamp(13px, 1.05vw, 16px);
  font-weight: 600;
  letter-spacing: -.01em;
  text-decoration: none;
  white-space: nowrap;
  pointer-events: auto;
  cursor: pointer;
  transform-origin: 100% 100%;
  transition: scale .2s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s ease;
  animation: hero-say-in .7s cubic-bezier(.34, 1.56, .64, 1) .6s both;
}
.hero-say:hover { scale: 1.06; box-shadow: 0 10px 24px rgba(20, 20, 20, .12); }
.hero-say:active { scale: .97; }
.hero-say:focus-visible { outline: 3px solid rgba(20, 20, 20, .2); outline-offset: 4px; }
.hero-say::after {
  content: "";
  position: absolute;
  right: -9px;
  bottom: 9px;
  width: 15px;
  height: 15px;
  background: #fff;
  border-right: 2.5px solid #141414;
  border-bottom: 2.5px solid #141414;
  border-bottom-right-radius: 4px;
  transform: rotate(-45deg) skewX(12deg);
}
.hero-say > span { grid-area: 1 / 1; text-align: center; }
.hero-say-a { animation: hero-say-a 9s cubic-bezier(.65, 0, .35, 1) 1.3s infinite; }
.hero-say-b { opacity: 0; animation: hero-say-b 9s cubic-bezier(.65, 0, .35, 1) 1.3s infinite; }
/* A poke swaps the two greetings for one answer for a few seconds; the bubble gives a little hop. */
.hero-say-quip, .hero-say.is-quip .hero-say-a, .hero-say.is-quip .hero-say-b { display: none; }
.hero-say.is-quip { white-space: normal; text-wrap: balance; }
.hero-say.is-quip .hero-say-quip { display: block; animation: hero-quip .32s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes hero-quip { from { opacity: 0; transform: translateY(5px) scale(.9); } }
.hero-say.is-popped { scale: 1.08; }
/* Beside the head on a wide screen an answer may grow to the left instead of stacking three short lines. */
@media (min-width: 901px) { .hero-say.is-quip { width: max-content; max-width: 16em; } }
@keyframes hero-say-in { from { opacity: 0; transform: scale(.5) translate(10px, 10px); } }
@keyframes hero-say-a { 0%, 44% { opacity: 1; transform: none; } 50%, 94% { opacity: 0; transform: translateY(-6px); } 100% { opacity: 1; transform: none; } }
@keyframes hero-say-b { 0%, 44% { opacity: 0; transform: translateY(6px); } 50%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } }
.hero .hero-cta-wrap { position: relative; z-index: 7; margin-top: clamp(6px, 1.6vh, 18px); padding: 0; }

/* Cards: one iOS-like family — frosted glass, a small «app · time» header, a bold line and a quiet line. Each shows a
   real outcome of a Cody project. Positioned by hero.js. */
/* Decorative: a card passing in front of Cody must not catch the poke meant for him. */
.orbit-card {
  position: absolute;
  pointer-events: none;
  left: 0;
  top: 0;
  z-index: 2;
  display: grid;
  gap: 7px;
  width: 224px;
  padding: 11px 12px 12px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .76);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .85), 0 0 0 1px rgba(20, 24, 40, .05), 0 1px 2px rgba(20, 24, 40, .06), 0 18px 40px rgba(20, 24, 40, .12);
  font-size: 13px;
  text-align: left;
  opacity: 0;
  will-change: transform, opacity;
}
.oc-head { display: flex; align-items: center; gap: 7px; color: #7b7b77; font-size: 11px; font-weight: 650; letter-spacing: .03em; text-transform: uppercase; }
.oc-head > span:nth-child(2) { flex: 1; white-space: nowrap; }
.oc-head i { font-style: normal; font-weight: 500; letter-spacing: 0; text-transform: none; }
.oc-app-icon { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border-radius: 6px; object-fit: cover; color: #fff; font-size: 12px; font-weight: 700; }
.oc-app-icon svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.oc-icon-pay { background: linear-gradient(180deg, #3ad16b, #24a653); }
.oc-icon-rev { background: linear-gradient(180deg, #6b95ff, #3b6cf0); }
.oc-icon-channel { background: linear-gradient(180deg, #37aee2, #1e96c8); }
.oc-body { display: grid; gap: 1px; min-width: 0; }
.oc-body b { color: var(--ink); font-size: 14.5px; font-weight: 650; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-body small { color: #6f6f6b; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* «now»: a live dot that keeps pulsing. */
.oc-live::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #34c759; vertical-align: 1px; animation: oc-pulse 1.8s ease-out infinite; }
@keyframes oc-pulse { 0% { box-shadow: 0 0 0 0 rgba(52, 199, 89, .55); } 80%, 100% { box-shadow: 0 0 0 6px rgba(52, 199, 89, 0); } }

.oc-note { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head head" "body side"; column-gap: 10px; align-items: center; }
.oc-note .oc-head { grid-area: head; }
.oc-note .oc-body { grid-area: body; }
.oc-side { grid-area: side; width: 40px; height: 40px; border-radius: 11px; object-fit: cover; }

.oc-pay { width: 204px; }
.oc-post { width: 226px; }
.oc-pay .oc-amount { color: #1f9d55; font-size: 22px; letter-spacing: -.02em; }

.oc-book { width: 212px; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 11px; padding: 10px 12px 10px 10px; }
.oc-date { width: 46px; height: 50px; display: grid; place-content: center; justify-items: center; border-radius: 13px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07), 0 2px 6px rgba(0, 0, 0, .05); line-height: 1; }
.oc-date small { color: #ff3b30; font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.oc-date b { margin-top: 3px; font-size: 22px; font-weight: 650; }

.oc-web { width: 220px; padding: 7px 7px 11px; }
.oc-shot { position: relative; display: block; overflow: hidden; border-radius: 14px; }
.oc-shot img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.oc-url { position: absolute; left: 7px; right: 7px; bottom: 7px; display: flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 9px; background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--ink); font-size: 11px; font-weight: 600; }
.oc-url i { width: 7px; height: 7px; border-radius: 50%; background: #34c759; }
.oc-web .oc-body { padding: 0 5px; }

.oc-rev { width: 200px; }
.oc-rev-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.oc-rev-row b { color: #1f9d55; font-size: 24px; font-weight: 650; letter-spacing: -.02em; line-height: 1; }
.oc-bars { display: flex; align-items: flex-end; gap: 4px; height: 34px; }
.oc-bars i { width: 8px; border-radius: 3px; background: linear-gradient(180deg, #86dca9, #34b870); transform-origin: 50% 100%; animation: oc-grow 3.6s cubic-bezier(.65, 0, .35, 1) infinite alternate; }
.oc-bars i:nth-child(1) { height: 36%; animation-delay: 0s; }
.oc-bars i:nth-child(2) { height: 50%; animation-delay: .1s; }
.oc-bars i:nth-child(3) { height: 42%; animation-delay: .2s; }
.oc-bars i:nth-child(4) { height: 64%; animation-delay: .3s; }
.oc-bars i:nth-child(5) { height: 58%; animation-delay: .4s; }
.oc-bars i:nth-child(6) { height: 80%; animation-delay: .5s; }
.oc-bars i:nth-child(7) { height: 100%; animation-delay: .6s; }
@keyframes oc-grow { from { transform: scaleY(.55); } }

.oc-cody { width: 244px; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 10px; padding: 10px 12px 10px 10px; }
.oc-avatar { width: 40px; height: 40px; overflow: hidden; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.oc-avatar img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
  .hero .hero-content { justify-content: center; padding-top: 12px; }
  .hero .hero-title { font-size: clamp(34px, 10.4vw, 44px); }
  .hero-orbit { --scene-h: min(300px, 80vw); margin-top: 10px; }
  .hero-desk { height: auto; width: 88%; }
  /* On phones the bubble sits to the right of his head, above the lamp, its tail pointing back to him. */
  .hero-say { right: auto; left: 57%; top: 6%; padding: 6px 11px 7px; border-width: 2px; font-size: 12px; transform-origin: 0 100%; }
  /* The bubble sits by the top right of his head here, so the drop of sweat runs down the other side. */
  .hero-sweat { left: 6%; width: 9%; }
  .hero-say::after { right: auto; left: -8px; bottom: 7px; width: 12px; height: 12px; border-width: 2px; transform: rotate(135deg) skewX(12deg); }
  /* Never past the screen edge: the room is the 43% of the desk right of the bubble, plus the space beside the desk
     (6% of the scene each side) and the page margin. If the phrase does not fit, it wraps onto a second line. */
  .hero-say { width: max-content; max-width: calc(43% + (100vw - 2 * var(--page-gutter)) * .06 + var(--page-gutter) - 4px); align-items: center; white-space: normal; text-wrap: balance; }
  /* Phones: no orbit. Moving glass cards blur what is under them every frame, and the page stuttered at the first swipe. */
  .hero-rings, .orbit-card { display: none; }
}

/* Small phones: a slightly smaller bubble, so it stays on one line down to 375px. */
@media (max-width: 400px) {
  .hero-say { padding: 5px 10px 6px; font-size: 11.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-desk img, .hero-lid, .hero-say, .hero-say > span, .oc-bars i, .oc-live::before { animation: none; }
  .hero-say-b { opacity: 0; }
  .hero-pupil { transition: none; }
}

.hero .hero-trust { color: var(--muted); font-size: 12.5px; }