/* v7 home (12.10): the approved text in the live site's look. Same tokens and fonts; only what the new blocks need. */

/* ---- first screen: the live hello hero, now carrying the selling words */

.v7-h1{ margin:.7rem 0 0; }
.v7-sub{ max-width:640px; margin-left:auto; margin-right:auto; }
.v7-hero .x-gate{ margin-top:1.4rem; }
.v7-hero-alt{ display:flex; justify-content:center; margin-top:1rem; }
.v7-hero-alt .x-btn{ font-size:.92rem; padding:.7rem 1.2rem; }
.v7-hero .x-gate-meta{ margin-top:1rem; }


/* ---- system: three tiles */
.v7-three{ display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:1rem; margin-top:1.6rem; }
.v7-three .x-two-i{ margin:0; }
@media (max-width:980px){ .v7-three{ grid-template-columns:1fr; } }
.v7-talk-fig{ display:flex; align-items:center; gap:.7rem; min-height:150px; }
.v7-talk-mic{ flex:none; width:52px; height:52px; border-radius:50%; display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg,var(--cyan),var(--purple)); box-shadow:0 0 0 0 rgba(0,212,255,.45); animation:v7ring 2.6s ease-out infinite; }
.v7-talk-mic svg{ width:24px; height:24px; }
.v7-talk-say{ padding:.7rem .9rem; border-radius:16px 16px 16px 4px; background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  font-size:.9rem; line-height:1.4; color:#e6edf7; }
body.light .v7-talk-say{ background:#fff; color:#0f172a; box-shadow:inset 0 0 0 1px rgba(15,23,42,.1); }
@keyframes v7ring{ 0%{ box-shadow:0 0 0 0 rgba(0,212,255,.45); } 80%,100%{ box-shadow:0 0 0 18px rgba(0,212,255,0); } }

/* ---- how to start: three big cards, the line runs from number to number and stops at the third */
.v7-how{ list-style:none; margin:2.4rem 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.v7-step{ position:relative; padding:1.4rem 1.4rem 1.6rem; border-radius:26px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.v7-step:not(:last-child)::after{ content:''; position:absolute; z-index:2; top:calc(1.4rem + 21px); left:calc(1.4rem + 44px); width:calc(100% - 44px + 1.4rem); height:2px;
  background:linear-gradient(90deg, rgba(0,212,255,.8), rgba(139,92,246,.8)); border-radius:2px; transform-origin:left; transform:scaleX(0); transition:transform 1.1s cubic-bezier(.2,.7,.2,1); }
.v7-how.go .v7-step:not(:last-child)::after{ transform:scaleX(1); }
.v7-how.go .v7-step:nth-child(2)::after{ transition-delay:.7s; }
.v7-num{ position:relative; z-index:3; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:#0b1430;
  border:2px solid rgba(0,212,255,.7); box-shadow:0 0 18px rgba(0,212,255,.35); font:700 1.05rem 'Space Grotesk',sans-serif; color:#fff; }
.v7-step:last-child .v7-num{ border-color:rgba(139,92,246,.85); box-shadow:0 0 18px rgba(139,92,246,.4); }
.v7-step h3{ margin:1.1rem 0 .45rem; font:700 1.25rem/1.25 'Space Grotesk',sans-serif; color:#fff; }
.v7-step p{ margin:0; font-size:.94rem; line-height:1.55; color:var(--text-m); }
body.light .v7-step{ background:#fff; box-shadow:inset 0 0 0 1px rgba(15,23,42,.08), 0 20px 40px -28px rgba(15,23,42,.3); }
body.light .v7-step h3{ color:#0f172a; } body.light .v7-num{ background:#fff; color:#0f172a; }
@media (max-width:860px){
  .v7-how{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:1rem; margin-left:-16px; margin-right:-16px; padding:0 16px 10px; scrollbar-width:none; }
  .v7-how::-webkit-scrollbar{ display:none; }
  .v7-step{ flex:0 0 84%; scroll-snap-align:center; }
  .v7-step:not(:last-child)::after{ width:calc(100% - 44px + 1rem); }
}

/* illustrations: drawn in CSS and SVG, animate only while the block is on screen (.go) */
.v7-ill{ position:relative; height:178px; margin-top:1.1rem; border-radius:18px; overflow:hidden;
  background:radial-gradient(120% 90% at 100% 0%, rgba(139,92,246,.2), transparent 60%), radial-gradient(100% 80% at 0% 100%, rgba(0,212,255,.16), transparent 60%), rgba(6,10,22,.6);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
body.light .v7-ill{ background:radial-gradient(120% 90% at 100% 0%, rgba(139,92,246,.12), transparent 60%), radial-gradient(100% 80% at 0% 100%, rgba(0,212,255,.12), transparent 60%), #f4f7fc; }
.v7-ill *{ animation-play-state:paused !important; }
.v7-how.go .v7-ill *{ animation-play-state:running !important; }
/* 1: phone, voice, wave to Mai */
.v7-phone{ position:absolute; left:14%; top:16px; width:96px; height:176px; border-radius:20px; background:#0b1022; box-shadow:inset 0 0 0 2px rgba(255,255,255,.18), 0 10px 30px -10px rgba(0,0,0,.6); }
body.light .v7-phone{ background:#fff; box-shadow:inset 0 0 0 2px rgba(15,23,42,.18), 0 10px 30px -14px rgba(15,23,42,.35); }
.v7-ph-notch{ position:absolute; top:7px; left:50%; width:30px; height:5px; margin-left:-15px; border-radius:4px; background:rgba(255,255,255,.18); }
.v7-ph-say{ position:absolute; top:22px; left:8px; right:8px; padding:6px 7px; border-radius:10px 10px 10px 3px; font-size:.58rem; line-height:1.3; color:#dbe7f7; background:rgba(0,212,255,.14); }
body.light .v7-ph-say{ color:#0f172a; }
.v7-ph-wave{ position:absolute; left:10px; right:10px; top:86px; height:34px; display:flex; align-items:center; justify-content:space-between; }
.v7-ph-wave i{ width:3px; border-radius:2px; height:30%; background:linear-gradient(180deg,var(--cyan),var(--purple)); animation:v7bar 1.1s ease-in-out infinite; animation-delay:calc(var(--k) * -.09s); }
@keyframes v7bar{ 0%,100%{ height:22%; } 50%{ height:95%; } }
.v7-ph-mic{ position:absolute; left:50%; bottom:22px; width:34px; height:34px; margin-left:-17px; border-radius:50%; display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg,var(--cyan),var(--purple)); animation:v7ring 2.2s ease-out infinite; }
.v7-ph-mic svg{ width:16px; height:16px; }
.v7-arc{ position:absolute; left:calc(14% + 100px); right:20%; top:44px; height:60px; overflow:visible; }
.v7-arc path{ fill:none; stroke:url(#none); stroke:rgba(0,212,255,.6); stroke-width:2; stroke-dasharray:4 7; animation:v7flow 1.2s linear infinite; }
@keyframes v7flow{ to{ stroke-dashoffset:-22; } }
.v7-mai-orb{ position:absolute; right:10%; top:56px; width:62px; height:62px; border-radius:50%; display:grid; place-items:center; color:#4fe3ff;
  background:radial-gradient(circle at 35% 30%, rgba(79,227,255,.35), rgba(11,20,48,.9) 70%); box-shadow:0 0 30px rgba(0,212,255,.45); animation:v7breath 3s ease-in-out infinite; }
.v7-mai-orb .x-mark{ width:40px; height:40px; }
@keyframes v7breath{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.08); } }
/* 2: words assemble into agent cards */
.v7-words{ position:absolute; left:12px; top:14px; width:46%; display:flex; flex-wrap:wrap; gap:6px; }
.v7-w{ padding:4px 9px; border-radius:999px; font-size:.68rem; font-weight:600; color:#dbe7f7; background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  animation:v7word 4.8s ease-in-out infinite; animation-delay:calc(var(--k) * .35s); }
body.light .v7-w{ color:#334155; background:#fff; box-shadow:inset 0 0 0 1px rgba(15,23,42,.12); }
@keyframes v7word{ 0%,10%{ opacity:0; transform:translateY(8px); } 20%,55%{ opacity:1; transform:none; } 75%,100%{ opacity:0; transform:translateX(70px) scale(.8); } }
.v7-agents{ position:absolute; right:12px; top:14px; width:50%; display:flex; flex-direction:column; gap:8px; }
.v7-agent{ display:flex; align-items:center; gap:8px; padding:8px 9px; border-radius:12px; background:rgba(11,20,48,.85); box-shadow:inset 0 0 0 1px rgba(0,212,255,.35);
  animation:v7card 4.8s ease-in-out infinite; animation-delay:calc(1.3s + var(--k) * .5s); }
body.light .v7-agent{ background:#fff; box-shadow:inset 0 0 0 1px rgba(8,145,178,.35); }
.v7-av{ flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; color:#4fe3ff; background:rgba(0,212,255,.12); }
.v7-av .x-mark{ width:16px; height:16px; }
.v7-agent b{ display:block; font:700 .74rem 'Space Grotesk',sans-serif; color:#fff; } body.light .v7-agent b{ color:#0f172a; }
.v7-agent small{ display:block; font-size:.62rem; color:var(--text-m); }
@keyframes v7card{ 0%,15%{ opacity:.25; transform:scale(.94); } 30%,85%{ opacity:1; transform:none; } 100%{ opacity:.25; transform:scale(.94); } }
.v7-shadow-tag{ align-self:flex-start; padding:3px 8px; border-radius:999px; font:700 .6rem 'Inter',sans-serif; letter-spacing:.1em; text-transform:uppercase; color:#5cf2b8;
  background:rgba(52,211,153,.1); box-shadow:inset 0 0 0 1px rgba(52,211,153,.35); }
body.light .v7-shadow-tag{ color:#047857; }
/* 3: report card */
.v7-report{ position:absolute; left:50%; top:14px; width:min(250px, 86%); transform:translateX(-50%); padding:10px 12px; border-radius:14px;
  background:rgba(11,20,48,.9); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12), 0 14px 30px -14px rgba(0,0,0,.7); animation:v7float 4s ease-in-out infinite; }
body.light .v7-report{ background:#fff; box-shadow:inset 0 0 0 1px rgba(15,23,42,.1), 0 14px 30px -18px rgba(15,23,42,.35); }
@keyframes v7float{ 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,-4px); } }
.v7-rep-h{ display:flex; align-items:center; gap:6px; font:700 .72rem 'Space Grotesk',sans-serif; color:#fff; } body.light .v7-rep-h{ color:#0f172a; }
.v7-dot{ width:7px; height:7px; border-radius:50%; background:#34d399; box-shadow:0 0 8px #34d399; }
.v7-rep-n{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:8px 0; }
.v7-rep-n div{ padding:5px 6px; border-radius:8px; background:rgba(255,255,255,.05); }
body.light .v7-rep-n div{ background:#f1f5f9; }
.v7-rep-n b{ display:block; font:700 1.05rem 'Space Grotesk',sans-serif; background:linear-gradient(90deg,var(--cyan),var(--purple)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.v7-rep-n span{ display:block; font-size:.58rem; color:var(--text-m); line-height:1.2; }
.v7-rep-bars{ display:flex; align-items:flex-end; gap:5px; height:30px; }
.v7-rep-bars i{ flex:1; height:var(--h); border-radius:3px 3px 0 0; background:linear-gradient(180deg, rgba(0,212,255,.8), rgba(139,92,246,.5)); transform-origin:bottom; animation:v7grow 4s ease-in-out infinite; }
@keyframes v7grow{ 0%{ transform:scaleY(.2); } 30%,100%{ transform:scaleY(1); } }
.v7-rep-btn{ display:block; margin-top:8px; padding:5px; border-radius:8px; text-align:center; font:700 .66rem 'Inter',sans-serif; color:#04060d; background:linear-gradient(90deg,var(--cyan),var(--purple)); }
@media (prefers-reduced-motion: reduce){ .v7-ill *{ animation:none !important; } .v7-step::after{ transform:scaleX(1) !important; } }

/* ---- final: Mai and two small ways on */
.v7-final{ text-align:center; }
.v7-final-mark{ width:64px; height:64px; margin:0 auto 1rem; color:#4fe3ff; filter:drop-shadow(0 0 18px rgba(0,212,255,.55)); animation:v7breath 3.4s ease-in-out infinite; }
.v7-final-mark .x-mark{ width:64px; height:64px; }
.v7-more{ display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; margin-top:1.4rem; }
.v7-more .x-pill{ font-size:.86rem; }

/* ---- footer: a soft line of light on top */
.site-footer{ position:relative; }
.site-footer::after{ content:''; position:absolute; left:8%; right:8%; top:0; height:1px; background:linear-gradient(90deg, transparent, rgba(0,212,255,.55), rgba(139,92,246,.55), transparent); }
/* first screen fits 1440×900 with the field and the second button */
.v7-hero .hero-content{ padding-top:5.2rem; padding-bottom:2.6rem; }
.v7-hero .x-hl-logo{ transform:none; width:76px; height:76px; margin:0 auto .2rem; }
.v7-hero .x-hl-logo svg, .v7-hero .x-hl-logo .x-hl-mark{ width:76px; height:76px; }
.v7-h1{ font-size:clamp(2.1rem, 4.4vw, 3.5rem) !important; line-height:1.08 !important; }
.v7-hero{ min-height:auto !important; }
@media (max-width:760px){ .v7-hero .hero-content{ padding-top:4.6rem; } .v7-hero .x-hl-logo{ width:60px; height:60px; margin-bottom:0; } .v7-hero .x-hl-logo svg{ width:60px; height:60px; } }

/* ===== 12.10 fixes after his phone review ===== */
/* hero: logo, chip and headline stack in the flow at every width (no overlap) */
.v7-hero .x-hl-logo{ position:relative; flex:none; width:72px !important; height:72px !important; aspect-ratio:auto; margin:0 auto 1.1rem !important; transform:none !important; }
.v7-hero .x-hl-logo .x-hl-mark{ position:static; display:block; width:100% !important; height:100% !important; }
.v7-hero .x-hl-halo{ inset:-45%; }
.v7-hero .hero-eyebrow{ position:static; margin:0 auto; }
.v7-hero .hero-content{ min-height:0; }
/* the field: wider on a computer, the primary gradient button everywhere */
.v7-hero .x-gate{ max-width:780px; width:100%; }
.v7-gate button, .x-hello.v7-hero .x-gate button, body.light .x-hello.v7-hero .x-gate button{
  background:linear-gradient(135deg,var(--cyan),var(--blue),var(--purple)) !important; color:#fff !important;
  box-shadow:0 0 28px rgba(0,212,255,.38), inset 0 1px 0 rgba(255,255,255,.3) !important; font-weight:700; }
.v7-gate button:hover{ filter:brightness(1.08); }
/* the two small lines: one centred line on a computer, stacked on a phone */
.v7-hero .x-gate-meta{ flex-wrap:nowrap; white-space:nowrap; }
@media (max-width:760px){
  .v7-hero .x-gate-meta{ flex-direction:column; gap:.25rem; white-space:normal; text-align:center; font-size:.8rem; }
  .v7-hero .x-gate-meta i{ display:none; }
  .v7-hero .x-hl-logo{ width:60px !important; height:60px !important; margin-bottom:.9rem !important; }
  .v7-hero .hero-content{ padding-top:5.4rem; padding-bottom:2rem; }
  .v7-hero-alt .x-btn{ width:100%; justify-content:center; }
}
/* system: three equal cards in one grid, figures of one height */
.v7-three{ grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; }
.v7-three .x-two-i{ display:flex; flex-direction:column; height:100%; }
.v7-fig{ height:220px; display:flex; flex-direction:column; justify-content:center; margin-bottom:1rem; }
.v7-fig .x-mdl{ height:130px; margin:0 auto; }
.v7-fig .v6-mtasks{ justify-content:center; margin:.6rem 0 0; }
.v7-fig .x-two-big{ margin:0; }
@media (max-width:980px){ .v7-three{ grid-template-columns:1fr; } .v7-fig{ height:auto; min-height:150px; } }
/* pyramid: balanced rows, no far-right numbers, the Mai row as tall as the others */
.v7-pyr .x-pyr-row{ grid-template-columns:minmax(210px,280px) 1fr !important; gap:1.6rem; }
.v7-pyr .x-pyr-row > em{ display:none; }
.v7-pyr .x-pyr-l{ padding:1rem 0; }
.v7-pyr .x-pyr-v{ padding:1rem 0; }
.v7-pyr .x-pyr-mai .x-pyr-v{ max-width:none; }
.v7-pyr .x-pyr-mai .x-pyr-l b{ background:linear-gradient(90deg,var(--cyan),var(--purple)); -webkit-background-clip:text; background-clip:text; color:transparent; }
@media (max-width:760px){ .v7-pyr .x-pyr-row{ grid-template-columns:1fr !important; gap:.2rem; } .v7-pyr .x-pyr-v{ justify-content:flex-start; padding-top:0; } }
/* rhythm: tighter than the long live page, one value for every section */
body[data-v7] .x-sec{ padding:6.5rem 0; }
body[data-v7] .x-hero + .x-sec{ padding-top:5.5rem; }
body[data-v7] .v6-cta{ margin-top:1.8rem; }
body[data-v7] #faq .x-faq{ max-width:none; margin-top:2rem; }
@media (max-width:760px){ body[data-v7] .x-sec{ padding:4.2rem 0; } }
@media (max-width:760px){ .v7-pyr .x-pyr-v{ max-width:none !important; margin:0 !important; justify-content:flex-start !important; } }
.v7-three .x-two-i h3{ font-size:clamp(1.25rem,1.7vw,1.5rem) !important; }
body[data-v7] .x-line .x-cards, body[data-v7] .x-line .x-scale{ width:auto !important; max-width:none !important; margin-left:0 !important; margin-right:0 !important; }

/* ===== 12.10 day 2 ===== */
/* globe: the city and server labels are back, as on the live site (his word) */
body[data-v7] .x-gl-lab{ display:block !important; }
/* system: three compact, even cards */
.v7-three .x-two-i{ padding:1.4rem 1.5rem 1.5rem !important; }
.v7-fig{ height:168px; margin-bottom:.7rem; }
.v7-fig .x-mdl{ height:112px; }
.v7-three .x-two-i h3{ margin:0 0 .35rem !important; }
.v7-three .x-two-i p{ margin:0 !important; }
.v7-talk-fig{ min-height:0; }
@media (max-width:980px){ .v7-fig{ height:auto; min-height:0; } .v7-three .x-two-i{ padding:1.2rem 1.25rem 1.3rem !important; } }
/* how to start, computer: the number is centred above each card, the line runs centre to centre and stops at 3 */
.v7-num{ margin:0 auto; }
.v7-step-b{ margin-top:0; }
.v7-step:not(:last-child)::after{ left:calc(50% + 22px) !important; width:calc(100% + 1.4rem - 44px) !important; }
/* how to start, phone: steps go down; numbers on a vertical line on the left, the picture and the text to the right */
@media (max-width:860px){
  .v7-how{ display:flex !important; flex-direction:column; overflow:visible !important; margin:2rem 0 0 !important; padding:0 !important; gap:1.6rem !important; }
  .v7-step{ flex:none !important; display:grid; grid-template-columns:44px 1fr; column-gap:.9rem; padding:0 !important; background:none !important; box-shadow:none !important; border-radius:0; }
  .v7-num{ margin:0; grid-column:1; grid-row:1; align-self:start; }
  .v7-step-b{ grid-column:2; grid-row:1; min-width:0; padding:1rem 1rem 1.2rem; border-radius:20px;
    background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
  body.light .v7-step-b{ background:#fff; box-shadow:inset 0 0 0 1px rgba(15,23,42,.08), 0 18px 34px -26px rgba(15,23,42,.3); }
  .v7-step-b .v7-ill{ margin-top:0; }
  .v7-step:not(:last-child)::after{ left:21px !important; top:44px !important; width:2px !important; height:calc(100% - 44px + 1.6rem) !important;
    background:linear-gradient(180deg, rgba(0,212,255,.8), rgba(139,92,246,.8)) !important; transform-origin:top; transform:scaleY(0); }
  .v7-how.go .v7-step:not(:last-child)::after{ transform:scaleY(1); }
  .v7-step h3{ margin-top:.9rem; font-size:1.12rem; }
  .v7-ill{ height:164px; }
  .v7-phone{ left:10%; }
}

/* ===== 12.10 day 3 ===== */
/* the point where the model lines meet is our mark */
.x-mdl-logo{ color:#3fe0ff; fill:#3fe0ff; overflow:visible; }
body.light .x-mdl-logo{ color:#0ea5d8; fill:#0ea5d8; }
.x-mdl-glow{ fill:url(#mdlGlow); }
/* infrastructure tiles: tighter labels, slightly bigger numbers */
body[data-v7] .x-infra-n b{ font-size:2.35rem; margin-bottom:.3rem; }
body[data-v7] .x-infra-n span{ display:block; line-height:1.25; }
@media (max-width:760px){ body[data-v7] .x-infra-n b{ font-size:1.85rem; } }
/* 12.10 evening (his word «нет анимаций»): the live animations are back exactly as on the live site.
   The field border waits until the first-screen entrance is over, so the load has nothing else to paint. */
body[data-v7] .v7-hero:not(.x7-done) .x-gate-ring{ animation-play-state:paused; }
.v7-talk-mic, .v7-ph-mic{ animation:none !important; position:relative; }
.v7-talk-mic::after, .v7-ph-mic::after{ content:''; position:absolute; inset:0; border-radius:50%; border:2px solid rgba(0,212,255,.6); opacity:0; animation:v7ringT 2.6s ease-out infinite; }
@keyframes v7ringT{ 0%{ opacity:.8; transform:scale(1); } 80%,100%{ opacity:0; transform:scale(1.6); } }
.v7-ill *{ animation-play-state:paused; }
.v7-ph-wave i{ height:100% !important; transform:scaleY(.3); animation-name:v7barT !important; }
@keyframes v7barT{ 0%,100%{ transform:scaleY(.22); } 50%{ transform:scaleY(.95); } }
.x-mdl-logo{ filter:drop-shadow(0 0 6px rgba(0,212,255,.6)); }

/* ===== 12.10 evening: same motion, cheap ===== */
/* infinite animations run only in a section on screen (v7.js sets .is-live) */
body[data-v7] main > section:not(.is-live) *, body[data-v7] main > section:not(.is-live) *::before, body[data-v7] main > section:not(.is-live) *::after,
body[data-v7] footer.site-footer:not(.is-live), body[data-v7] footer.site-footer:not(.is-live)::before, body[data-v7] footer.site-footer:not(.is-live) *{ animation-play-state:paused !important; }
/* executor dots: still dots plus three twinkle layers (one animation each) over them, same layout */
body[data-v7] .x-pyr-ex .x-pyr-v.v7-tw-base > i{ animation:none !important; }
body[data-v7] .x-pyr-ex .x-pyr-v.v7-tw-base{ position:relative; }
body[data-v7] .v7-tw{ position:absolute !important; inset:0; margin:0 !important; pointer-events:none; opacity:0; z-index:1; animation:v7tw 3.2s ease-in-out infinite; }
body[data-v7] .v7-tw > i{ opacity:1 !important; animation:none !important; }
body[data-v7] .v7-tw > .v7-tw-off{ visibility:hidden; }
body[data-v7] .v7-tw-1{ animation-delay:-.8s; } body[data-v7] .v7-tw-2{ animation-delay:-1.6s; } body[data-v7] .v7-tw-3{ animation-delay:-2.4s; }
@keyframes v7tw{ 0%,100%{ opacity:0; } 50%{ opacity:1; } }
/* the green live dots: the ping ring is a pre-drawn layer that grows and fades (was an animated box-shadow) */
body[data-v7] .x-gate-dot, body[data-v7] .x-fc-dot, body[data-v7] .x-mai-eb i{ animation:none !important; position:relative; }
body[data-v7] .x-gate-dot::after, body[data-v7] .x-fc-dot::after, body[data-v7] .x-mai-eb i::after{ content:''; position:absolute; inset:0; border-radius:50%;
  background:rgba(52,211,153,.55); animation:v7ping 2.2s infinite; pointer-events:none; }
@keyframes v7ping{ 0%{ transform:scale(1); opacity:1; } 70%{ transform:scale(2.8); opacity:0; } 100%{ transform:scale(1); opacity:0; } }
/* the hero headline shimmer: two still gradients cross-fade (was an animated background-position) */
body[data-v7] .v7-hero h1 em{ position:relative; display:inline-block; animation:none !important; background-position:0% 50% !important; }
body[data-v7] .v7-shim{ position:absolute; inset:0; color:transparent; background:inherit; background-size:200% 200%; background-position:100% 50% !important;
  -webkit-background-clip:text; background-clip:text; opacity:0; animation:v7shim 4s ease-in-out infinite; pointer-events:none; }
@keyframes v7shim{ 0%,100%{ opacity:0; } 50%{ opacity:1; } }
body[data-v7] .x-pyr-ex .x-lit{ z-index:3; }

/* ===== 12.10 day 4 ===== */
/* client results: each number in the colour of its own case (cases page: droptop #ff2a2a; nordic-cleaning navy #1c4079,
   a lighter step of it on the dark theme so it stays readable; the tour case keeps the old green) */
body[data-v7] .x-proof-g a[href*="droptop"]{ --n:255,42,42; --nt:#ff4d4d; --nl:#e11d1d; }
body[data-v7] .x-proof-g a[href*="nordic-cleaning"]{ --n:58,110,214; --nt:#5b8dee; --nl:#1c4079; }
body[data-v7] .x-proof-g a[href*="tour-operator-sea"]{ --n:52,211,153; --nt:#5cf2b8; --nl:#059669; }
/* system: a bigger model picture (five dots and our mark), more air above the title, less below */
.v7-three .x-two-i:first-child .v7-fig{ height:auto; min-height:0; padding-top:.6rem; }
.v7-three .x-two-i:first-child .x-mdl{ width:100%; max-width:380px; height:auto !important; aspect-ratio:320/150; }
.v7-three .x-two-i:first-child h3{ margin-top:auto !important; padding-top:1rem; }
.v7-three .x-two-i:first-child{ padding-bottom:1.25rem !important; }
.v7-fig{ height:196px; }
@media (max-width:980px){ .v7-three .x-two-i:first-child .x-mdl{ max-width:100%; } .v7-three .x-two-i:first-child h3{ padding-top:.8rem; } }
/* «19»: bigger */
.v7-three .x-two-big b{ font-size:clamp(4.6rem,7.6vw,6.4rem) !important; }
/* menu: seven items still fit on a computer */
@media (min-width:1025px) and (max-width:1380px){ #nav .nav-links a{ padding-left:.6rem !important; padding-right:.6rem !important; font-size:.84rem !important; } }

/* ===== constructor page: first screen with the team assembling, and its own «Как начать» ===== */
.k7-hero .k7-grid{ display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:3.2rem; align-items:center; max-width:1180px; margin:0 auto; text-align:left; }
.k7-hero .k7-text .x-h1{ text-align:left; }
.k7-hero .k7-text .hero-desc{ margin-left:0; max-width:560px; }
.k7-hero .k7-text .x-btns, .k7-hero .k7-text .x-gate-meta{ justify-content:flex-start; }
.k7-team{ position:relative; padding:1.2rem; border-radius:26px; text-align:left;
  background:linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1), 0 30px 60px -30px rgba(0,0,0,.7), 0 0 60px -30px rgba(0,212,255,.6); }
body.light .k7-team{ background:#fff; box-shadow:inset 0 0 0 1px rgba(15,23,42,.08), 0 30px 60px -34px rgba(15,23,42,.35); }
.k7-team-h{ display:flex; align-items:center; gap:.7rem; }
.k7-mai{ width:42px; height:42px; display:grid; place-items:center; color:#3fe0ff; }
.k7-mai .x-mark{ width:36px; height:36px; }
.k7-team-h b{ display:block; font:700 1.05rem 'Space Grotesk',sans-serif; color:#fff; } body.light .k7-team-h b{ color:#0f172a; }
.k7-team-h small{ display:flex; align-items:center; gap:.4rem; font-size:.78rem; color:var(--text-m); }
.k7-team-h small i{ width:6px; height:6px; border-radius:50%; background:#fbbf24; }
.k7-say{ margin:.9rem 0 .8rem; padding:.7rem .9rem; border-radius:16px 16px 16px 4px; font-size:.88rem; line-height:1.4; color:#e6edf7; background:rgba(0,212,255,.12);
  opacity:0; animation:x7in .6s .5s cubic-bezier(.2,.8,.2,1) forwards; }
body.light .k7-say{ color:#0f172a; background:#ecfeff; }
.k7-plates{ display:grid; grid-template-columns:1fr 1fr; gap:.55rem; }
.k7-plates .x7-plate{ opacity:0; animation:x7in .6s cubic-bezier(.2,.8,.2,1) forwards; animation-delay:calc(1.1s + var(--i) * .35s); }
.k7-plates .x7-mini{ padding:.55rem .65rem .55rem .55rem; gap:.55rem; border-radius:14px; min-width:0; }
.k7-plates .x7-mini .x7-av{ width:32px; height:32px; } .k7-plates .x7-mini .x7-av svg{ width:15px; height:15px; }
.k7-plates .x7-mini .x7-tx b{ font-size:.82rem; white-space:normal; } .k7-plates .x7-mini .x7-st{ font-size:.7rem; white-space:normal; }
.k7-done{ display:flex; align-items:center; gap:.5rem; margin-top:.9rem; font-size:.84rem; font-weight:600; color:#5cf2b8; opacity:0; animation:x7in .6s 2.8s cubic-bezier(.2,.8,.2,1) forwards; }
.k7-done i{ width:8px; height:8px; border-radius:50%; background:#34d399; }
body.light .k7-done{ color:#047857; }
@media (max-width:980px){
  .k7-hero .k7-grid{ grid-template-columns:1fr; gap:1.8rem; text-align:center; }
  .k7-hero .k7-text .x-h1{ text-align:center; } .k7-hero .k7-text .hero-desc{ margin:0 auto; }
  .k7-hero .k7-text .x-btns, .k7-hero .k7-text .x-gate-meta{ justify-content:center; }
  .k7-team{ max-width:460px; width:100%; margin:0 auto; }
}
@media (max-width:420px){ .k7-plates{ grid-template-columns:1fr 1fr; gap:.45rem; } .k7-team{ padding:1rem; } }
@media (prefers-reduced-motion: reduce){ .k7-say, .k7-plates .x7-plate, .k7-done{ opacity:1; animation:none; } }
/* four steps on the constructor page: the line runs centre to centre and stops at 4 */
@media (min-width:861px){ .k7-how4{ grid-template-columns:repeat(4,1fr) !important; gap:1.1rem !important; }
  .k7-how4 .v7-step:not(:last-child)::after{ width:calc(100% + 1.1rem - 44px) !important; }
  .k7-how4 .v7-step{ padding:1.2rem 1.1rem 1.4rem; } .k7-how4 .v7-step h3{ font-size:1.12rem; } }
/* illustrations of steps 2 and 3 */
.k7-adv{ position:absolute; inset:14px; display:flex; flex-direction:column; gap:8px; }
.k7-adv-roles{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.k7-tg{ display:flex; align-items:center; gap:6px; padding:5px 8px; border-radius:10px; font-size:.68rem; font-weight:600; color:#dbe7f7; background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); }
.k7-tg i{ width:22px; height:12px; border-radius:999px; background:rgba(255,255,255,.18); position:relative; flex:none; }
.k7-tg i::after{ content:''; position:absolute; left:2px; top:2px; width:8px; height:8px; border-radius:50%; background:#fff; transition:transform .3s; }
.k7-tg.on i{ background:linear-gradient(90deg,var(--cyan),var(--purple)); } .k7-tg.on i::after{ transform:translateX(10px); }
.v7-how.go .k7-tg:nth-child(4) i{ animation:k7tgl 3.2s ease-in-out infinite; } 
@keyframes k7tgl{ 0%,40%{ opacity:.5; } 60%,100%{ opacity:1; } }
.k7-adv-rule{ display:flex; align-items:center; gap:7px; padding:7px 9px; border-radius:10px; font-size:.68rem; color:#e6edf7; background:rgba(139,92,246,.14); box-shadow:inset 0 0 0 1px rgba(139,92,246,.35); }
.k7-adv-rule b{ color:#c4a5ff; }
body.light .k7-tg{ color:#334155; background:#fff; box-shadow:inset 0 0 0 1px rgba(15,23,42,.1); } body.light .k7-adv-rule{ color:#0f172a; }
.k7-chat{ position:absolute; inset:14px; display:flex; flex-direction:column; gap:8px; }
.k7-in, .k7-out{ max-width:80%; padding:7px 10px; border-radius:12px; font-size:.7rem; line-height:1.35; }
.k7-in{ align-self:flex-start; color:#e6edf7; background:rgba(255,255,255,.08); border-bottom-left-radius:4px; }
.k7-out{ align-self:flex-end; color:#04060d; background:linear-gradient(135deg,#5cf2b8,#22d3ee); border-bottom-right-radius:4px; opacity:0; transform:translateY(6px); }
.v7-how.go .k7-out{ animation:x7in .6s .8s forwards; }
.k7-lock{ align-self:flex-end; display:flex; align-items:center; gap:5px; font:700 .6rem 'Inter',sans-serif; letter-spacing:.1em; text-transform:uppercase; color:#5cf2b8; }
.k7-lock svg{ width:12px; height:12px; }
body.light .k7-in{ color:#0f172a; background:#e2e8f0; } body.light .k7-lock{ color:#047857; }
@media (max-width:980px){ .v7-fig{ height:auto !important; min-height:0 !important; } .v7-three .x-two-big{ min-height:0; } .v7-talk-fig{ padding:.4rem 0; } }
.k7-hero .k7-text .x-h1{ font-size:clamp(2.3rem,4.3vw,3.7rem) !important; line-height:1.06 !important; }
@media (max-width:980px){ .k7-hero .k7-text .x-h1{ font-size:clamp(2rem,8.4vw,2.6rem) !important; } }