/* v7x: three «wow» first screens. Glass agent plates in the site's own language (Space Grotesk, Inter, cyan → violet).
   Desktop: the plates live in the hero's free sides, never over the text column. Phones: a stack or arc above the
   headline and small plates under the field, in the flow (no absolute positioning near the text). */

.v7-hero{ position:relative; overflow:hidden; }
.v7-hero .hero-content{ position:relative; z-index:3; }
.x7-layer{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.x7-mob, .x7-stack, .x7-arc{ display:none; }

/* ---- the plate: an account badge of an agent */
.x7-plate, .x7-node{ --c:#22d3ee; display:flex; align-items:center; gap:.7rem; padding:.7rem .95rem .7rem .7rem; border-radius:18px;
  background:linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.03)); backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(255,255,255,.10), 0 18px 40px -18px rgba(0,0,0,.75), 0 0 34px -14px var(--c); color:#fff; }
.x7-av{ flex:none; position:relative; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:#fff;
  background:radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--c) 80%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 45%, #000)); box-shadow:0 0 16px -2px var(--c); }
.x7-av svg{ width:19px; height:19px; }
.x7-av::after{ content:''; position:absolute; right:-1px; bottom:-1px; width:11px; height:11px; border-radius:50%; background:#34d399; box-shadow:0 0 0 2px #0b1022; }
.x7-tx{ min-width:0; text-align:left; }
.x7-tx b{ display:block; font:700 .92rem/1.2 'Space Grotesk',sans-serif; letter-spacing:-.01em; white-space:nowrap; }
.x7-st{ display:flex; align-items:center; gap:.4rem; margin-top:.2rem; font-size:.78rem; color:rgba(222,232,246,.78); white-space:nowrap; }
.x7-st i{ flex:none; width:6px; height:6px; border-radius:50%; background:#34d399; box-shadow:0 0 8px #34d399; animation:x7blink 2.4s ease-in-out infinite; }
.x7-st em{ font-style:normal; transition:opacity .35s, transform .35s; display:inline-block; }
.x7-st em.out{ opacity:0; transform:translateY(-6px); }
@keyframes x7blink{ 50%{ opacity:.35; } }
body.light .x7-plate, body.light .x7-node{ color:#0f172a; background:linear-gradient(160deg, rgba(255,255,255,.92), rgba(255,255,255,.7));
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.08), 0 18px 40px -20px rgba(15,23,42,.35), 0 0 30px -14px var(--c); }
body.light .x7-st{ color:#475569; }
body.light .x7-av::after{ box-shadow:0 0 0 2px #fff; }

/* entrance: once, one by one (--i); then calm */
.x7-plate, .x7-node, .x7-sav, .x7-more, .x7-arcn{ opacity:0; }
.x7-on .x7-plate, .x7-on .x7-node{ animation:x7in .7s cubic-bezier(.2,.8,.2,1) forwards; animation-delay:calc(.35s + var(--i) * .22s); }
.x7-on .x7-sav, .x7-on .x7-more, .x7-on .x7-arcn{ animation:x7pop .5s cubic-bezier(.3,1.4,.4,1) forwards; animation-delay:calc(.25s + var(--i) * .14s); }
@keyframes x7in{ from{ opacity:0; transform:translateY(16px) scale(.92); filter:blur(6px); } to{ opacity:1; transform:none; filter:none; } }
@keyframes x7pop{ from{ opacity:0; transform:scale(.4); } to{ opacity:1; transform:none; } }

/* ===== H1 «Команда собирается»: eight plates in the free sides, left and right of the text column */
.x7-h1 .x7-plate{ position:absolute; width:236px; }
.x7-p0{ left:4%;  top:19%; } .x7-p1{ left:9%;  top:37%; } .x7-p2{ left:3%;  top:55%; } .x7-p3{ left:8.5%; top:73%; }
.x7-p4{ right:4%; top:17%; } .x7-p5{ right:9%; top:35%; } .x7-p6{ right:3%; top:53%; } .x7-p7{ right:8.5%; top:71%; }
.x7-h1 .x7-plate:nth-child(odd){ --float:-5px; } .x7-h1 .x7-plate:nth-child(even){ --float:5px; }
.x7-done .x7-h1 .x7-plate{ animation:x7float 9s ease-in-out infinite; animation-delay:calc(var(--i) * -1.1s); opacity:1; }
@keyframes x7float{ 50%{ transform:translateY(var(--float)); } }
@media (max-width:1360px){ .x7-h1 .x7-plate{ width:212px; } .x7-p0, .x7-p2{ left:1.5%; } .x7-p4, .x7-p6{ right:1.5%; } .x7-p1, .x7-p3{ left:4%; } .x7-p5, .x7-p7{ right:4%; } }
@media (max-width:1200px){ .x7-p1, .x7-p3, .x7-p5, .x7-p7{ display:none; } .x7-h1 .x7-plate{ width:196px; } }

/* ===== H2 «Объём по краям»: three big cards in depth, tilt with the pointer (--rx, --ry set by JS) */
.x7-h2{ perspective:1100px; }
.x7-depth{ position:absolute; transform-style:preserve-3d; transition:transform .5s cubic-bezier(.2,.7,.2,1);
  transform:translate3d(0,0,var(--z,0)) rotateY(calc(var(--ry,0deg) + var(--y0,0deg))) rotateX(calc(var(--rx,0deg) + var(--x0,0deg))); }
.x7-d0{ left:5%; top:19%; --y0:18deg; --x0:4deg; --z:40px; }
.x7-d1{ right:6.5%; top:32%; --y0:-20deg; --x0:-3deg; --z:70px; }
.x7-d2{ left:5.5%; top:60%; --y0:14deg; --x0:-6deg; --z:-20px; }
.x7-big{ flex-wrap:wrap; width:262px; padding:1rem 1.1rem; border-radius:22px; }
.x7-big .x7-av{ width:48px; height:48px; } .x7-big .x7-av svg{ width:22px; height:22px; }
.x7-big .x7-tx b{ font-size:1.08rem; } .x7-big .x7-st{ font-size:.86rem; }
.x7-bars{ flex:1 0 100%; display:flex; align-items:flex-end; gap:5px; height:42px; margin-top:.75rem; }
.x7-bars i{ flex:1; height:var(--h); border-radius:4px 4px 0 0; background:linear-gradient(180deg, var(--c), color-mix(in srgb, var(--c) 30%, transparent)); opacity:.8; transform-origin:bottom; }
.x7-on .x7-bars i{ animation:x7bar .9s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(1s + var(--i) * .25s); }
@keyframes x7bar{ from{ transform:scaleY(0); } to{ transform:none; } }
.x7-tag{ display:inline-flex; align-items:center; gap:.35rem; margin-top:.6rem; padding:.2rem .6rem; border-radius:999px; font:700 .66rem 'Inter',sans-serif;
  letter-spacing:.12em; text-transform:uppercase; color:#5cf2b8; background:rgba(52,211,153,.12); box-shadow:inset 0 0 0 1px rgba(52,211,153,.35); }
.x7-tag i{ width:6px; height:6px; border-radius:50%; background:#34d399; }
body.light .x7-tag{ color:#047857; }
.x7-depth::after{ content:''; position:absolute; left:10%; right:10%; bottom:-26px; height:22px; border-radius:50%; background:radial-gradient(closest-side, rgba(0,0,0,.45), transparent); filter:blur(6px); transform:translateZ(-60px); }
body.light .x7-depth::after{ background:radial-gradient(closest-side, rgba(15,23,42,.18), transparent); }
@media (max-width:1300px){ .x7-big{ width:226px; } .x7-d0, .x7-d2{ left:4%; } .x7-d1{ right:5.5%; } }
@media (max-width:1120px){ .x7-d2{ display:none; } }

/* ===== H3 «Орбита Mai»: agents on an orbit around the Mai mark, thin links, rare pulses */
.x7-links{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.x7-links path{ fill:none; stroke:rgba(79,227,255,.22); stroke-width:1.2; vector-effect:non-scaling-stroke; stroke-dasharray:3 5;
  opacity:0; transition:opacity 1.2s ease; }
.x7-on .x7-links path{ opacity:1; }
.x7-pulse{ fill:#7df3ff; filter:drop-shadow(0 0 2px #7df3ff); opacity:0; }
.x7-pulse.go{ opacity:1; }
body.light .x7-links path{ stroke:rgba(8,145,178,.3); } body.light .x7-pulse{ fill:#0891b2; }
.x7-node{ position:absolute; transform:translate(-50%,-50%); padding:.55rem .85rem .55rem .55rem; }
.x7-on .x7-node{ animation-name:x7node; }
@keyframes x7node{ from{ opacity:0; transform:translate(-50%,-50%) scale(.6); } to{ opacity:1; transform:translate(-50%,-50%); } }
.x7-node.hit .x7-av{ animation:x7hit .9s ease-out; }
@keyframes x7hit{ 0%{ box-shadow:0 0 0 0 var(--c), 0 0 16px -2px var(--c); } 100%{ box-shadow:0 0 0 14px transparent, 0 0 16px -2px var(--c); } }
.x7-h3 .x7-node:nth-of-type(n+4):nth-of-type(-n+4){ }
@media (max-width:1300px){ .x7-node .x7-st{ display:none; } }
@media (max-width:1100px){ .x7-node:nth-of-type(2), .x7-node:nth-of-type(6){ display:none; } }

/* ===== phones and narrow screens: nothing over the text or the field */
@media (max-width:1199px){
  .x7-layer{ display:none; }
  .x7-mob{ display:grid; gap:.55rem; width:100%; max-width:440px; margin:1.1rem auto 0; }
  .x7-mob-grid{ grid-template-columns:1fr 1fr; }
  .x7-mob-two{ grid-template-columns:1fr 1fr; perspective:800px; }
  .x7-mini{ padding:.5rem .6rem .5rem .5rem; gap:.5rem; border-radius:14px; min-width:0; }
  .x7-mini .x7-av{ width:30px; height:30px; } .x7-mini .x7-av svg{ width:15px; height:15px; } .x7-mini .x7-av::after{ width:8px; height:8px; }
  .x7-mini .x7-tx b{ font-size:.78rem; white-space:normal; } .x7-mini .x7-st{ font-size:.68rem; white-space:normal; }
  .x7-mini .x7-st em{ overflow:hidden; text-overflow:ellipsis; }
  .x7-tilt{ transform:perspective(700px) rotateY(8deg); } .x7-tilt + .x7-tilt{ transform:perspective(700px) rotateY(-8deg); }
  .x7-done .x7-tilt{ animation:none; }
  @keyframes x7drift{ 50%{ transform:perspective(700px) rotateY(0deg) translateY(-3px); } }
  /* h1: team stack in place of the mark */
  .x7-has-stack .x-hl-logo{ display:none; }
  .x7-stack{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:0; margin:0 auto 1rem; }
  .x7-sav{ width:38px; height:38px; margin-left:-9px; border-radius:50%; display:grid; place-items:center; color:#fff;
    background:radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--c) 80%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 45%, #000));
    box-shadow:0 0 0 2px #070b17, 0 0 14px -3px var(--c); }
  .x7-sav:first-child{ margin-left:0; } .x7-sav svg{ width:17px; height:17px; }
  body.light .x7-sav{ box-shadow:0 0 0 2px #fff, 0 0 14px -3px var(--c); }
  .x7-more{ margin-left:.6rem; font:600 .74rem 'Inter',sans-serif; color:var(--text-m); white-space:nowrap; }
  /* h3: a small arc of agents around the Mai mark */
  .x7-has-arc .x-hl-logo{ margin-top:2.2rem !important; }
  .x7-arc{ display:block; position:relative; width:220px; height:0; margin:0 auto; }
  .x7-arc-ring{ position:absolute; left:50%; top:-13px; width:156px; height:156px; margin-left:-78px; border-radius:50%; border:1px dashed rgba(79,227,255,.22);
    clip-path:inset(0 0 50% 0); }
  .x7-arcn{ position:absolute; left:50%; top:65px; width:30px; height:30px; margin:-15px 0 0 -15px; border-radius:50%; display:grid; place-items:center; color:#fff;
    transform:rotate(var(--a)) translate(78px) rotate(calc(-1 * var(--a)));
    background:radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--c) 80%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 45%, #000)); box-shadow:0 0 12px -2px var(--c); }
  .x7-arcn svg{ width:14px; height:14px; }
  .x7-on .x7-arcn{ animation-name:x7arc; }
  @keyframes x7arc{ from{ opacity:0; transform:rotate(var(--a)) translate(40px) rotate(calc(-1 * var(--a))) scale(.4); } to{ opacity:1; transform:rotate(var(--a)) translate(78px) rotate(calc(-1 * var(--a))); } }
}
@media (max-width:370px){ .x7-sav{ width:34px; height:34px; } .x7-more{ flex-basis:100%; text-align:center; margin:.45rem 0 0; } }

/* reduced motion: everything in place at once, no float, no pulses */
@media (prefers-reduced-motion: reduce){
  .x7-plate, .x7-node, .x7-sav, .x7-more, .x7-arcn, .x7-links path{ opacity:1 !important; animation:none !important; }
  .x7-depth{ transition:none; }
}

/* h2 on a phone: the two cards stand above the headline, in place of the mark (seen at once, never over the text) */
@media (max-width:1199px){ .x7-has-cards .x-hl-logo{ display:none; } .x7-has-cards .x7-mob-two{ margin:0 auto 1.1rem; } }
/* after the entrance everything stays visible, whatever calm animation follows */
.x7-done .x7-plate, .x7-done .x7-node, .x7-done .x7-sav, .x7-done .x7-more, .x7-done .x7-arcn{ opacity:1; }

/* ===== final (12.10 day 3): orbit on a computer with two compact rich cards; h1 on a phone ===== */
.x7-final .x7-node{ max-width:220px; }
.x7-rich{ flex-wrap:wrap; width:206px; max-width:206px !important; padding:.85rem .9rem .8rem !important; border-radius:20px; align-items:center; }
.x7-rich .x7-av{ width:40px; height:40px; }
.x7-rich .x7-tx b{ font-size:.95rem; }
.x7-rich .x7-bars{ height:34px; margin-top:.65rem; gap:4px; }
.x7-rich .x7-bars i{ height:100%; transform:scaleY(var(--h)); }
.x7-on .x7-rich .x7-bars i{ animation:x7barT .9s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(1.1s + var(--i) * .22s); }
@keyframes x7barT{ from{ transform:scaleY(0); } to{ transform:scaleY(var(--h)); } }
.x7-rich .x7-tag{ margin-top:.55rem; }

/* ===== smoothness (his word: «лаги убери»): only transform and opacity move, glass without live blur ===== */
.v7-hero:not(.x7-done) .x7-plate, .v7-hero:not(.x7-done) .x7-node{ backdrop-filter:none; -webkit-backdrop-filter:none; }
@keyframes x7in{ from{ opacity:0; transform:translateY(16px) scale(.94); } to{ opacity:1; transform:none; } }
.x7-node.hit .x7-av{ animation:none; }
.x7-av::before{ content:''; position:absolute; inset:-2px; border-radius:50%; border:2px solid var(--c); opacity:0; pointer-events:none; }
.x7-node.hit .x7-av::before{ animation:x7ring .9s ease-out; }
@keyframes x7ring{ from{ opacity:.9; transform:scale(1); } to{ opacity:0; transform:scale(1.7); } }
/* everything in the first screen stops while it is off screen or the tab is hidden (class set by v7x.js) */
.v7-hero.x7-off, .v7-hero.x7-off *, .v7-hero.x7-off *::before, .v7-hero.x7-off *::after{ animation-play-state:paused !important; }

/* small phones with a short screen: less empty space above the team (his word: big phones stay as they are) */
@media (max-width:400px) and (max-height:860px){
  .v7-hero .hero-content{ padding-top:4.3rem !important; }
  .x7-stack{ margin-bottom:.8rem; }
}
.x7-dot{ position:absolute; left:-4px; top:-4px; width:8px; height:8px; border-radius:50%; background:#7df3ff; box-shadow:0 0 10px 2px rgba(125,243,255,.7); opacity:0; will-change:transform; pointer-events:none; }
body.light .x7-dot{ background:#0891b2; box-shadow:0 0 8px 2px rgba(8,145,178,.5); }
/* calm: the status dots stand still (one less loop per plate) */
/* status dots blink as before */
/* after the entrance the plates drop their animations, so the browser can flatten them into one still layer */
.x7-done .x7-node, .x7-done .x7-plate:not(.x7-tilt), .x7-done .x7-sav, .x7-done .x7-more{ animation:none !important; opacity:1; transform:none; }
.x7-done .x7-node{ transform:translate(-50%,-50%); }
.x7-done .x7-rich .x7-bars i{ animation:none !important; transform:scaleY(var(--h)); }
.x7-final .x7-node{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.10), 0 16px 34px -18px rgba(0,0,0,.75) !important; }
body.light .x7-final .x7-node{ box-shadow:inset 0 0 0 1px rgba(15,23,42,.08), 0 16px 34px -20px rgba(15,23,42,.3) !important; }
.x7-final .x7-av{ box-shadow:0 0 12px -3px var(--c); }
.x7-rich .x7-tx{ flex:1 1 0; min-width:0; } .x7-rich .x7-tx b, .x7-rich .x7-st{ overflow:hidden; text-overflow:ellipsis; }
.x7-rich{ width:236px; max-width:236px !important; } .x7-rich .x7-tx b{ font-size:.92rem; } .x7-rich .x7-st{ font-size:.76rem; }
.x7-final .x7-st{ white-space:normal; overflow:visible; text-overflow:clip; align-items:flex-start; } .x7-final .x7-st i{ margin-top:.35em; } .x7-final .x7-node:not(.x7-rich){ max-width:240px; }