/* Home hero: particle vortex canvas in the core + turning product callouts round it (js/hero-orbit.js). */.x-viz{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none;}.hero-object.x-orbit-on .core-glow{background:rgba(134,196,255,.24);}/* The circle's centre sits level with the centre of the text block on the left. */.hero-object.x-orbit-on{top:0;}@media (max-width: 700px){/* Phone: the whole first screen fits an iPhone screen without scrolling. The circle is smaller
     (js sets --core-scale and stretches this box to the bottom of the screen); tighter gaps between
     the bar, the title and the download button. */.hero-object{height:296px;--core-scale:.62;}/* The dashed trace rings stay round (not stretched ovals) when js makes this box taller. */.hero-traces{inset:auto;width:86%;height:auto;aspect-ratio:1;}body[data-page="home"] .hero{padding:104px 0 0;}body[data-page="home"] .hero-copy{padding-top:21px;--hero-rhythm:20px;}/* No NEURAL VOCAL line on a phone: the title starts 32 px under the buttons. */body[data-page="home"] .hero .kicker{display:none;}body[data-page="home"] .hero-layout{gap:0;}}/* Room for the logo glow. The mark box used to be exactly the logo size, so on GPU-composited
   layers (Safari, Chrome) its drop-shadow could be cut at the box edge and show as a light square.
   The box is now larger than the logo and the glow fades out inside it. */.hero-object .core-mark-shell{--mark-pad:72px;width:calc(34% + var(--mark-pad) * 2);}.hero-object .core-mark{box-sizing:border-box;padding:var(--mark-pad);}.hero-object .core-mark-shell::before,
.hero-object .core-mark-shell::after{inset:var(--mark-pad);}/* The core is a door to the catalogue: hover lights the glass, the logo leans in; a click warps. */.hero-object.x-orbit-on .core{cursor:pointer;}.hero-object .core::before{transition:border-color .24s ease, box-shadow .24s ease, background-color .24s ease;}.hero-object .core-glow{transition:transform .32s cubic-bezier(.2, .86, .24, 1), background-color .32s ease;}.hero-object .core-mark-shell{transition:transform var(--look-speed, 180ms) cubic-bezier(.2, .86, .24, 1), scale .24s cubic-bezier(.2, .86, .24, 1);}.hero-object .core.is-hot::before{border-color:rgba(155,220,255,.3);background-color:rgba(155,220,255,.035);box-shadow:inset 0 0 70px rgba(142,202,255,.1), 0 0 60px rgba(105,170,240,.16), 0 0 80px rgba(0,0,0,.45);}.hero-object .core.is-hot .core-glow{transform:scale(1.4);background-color:rgba(134,196,255,.34);}.hero-object .core.is-hot .core-mark-shell{scale:1.07;}.hero-object .core.is-warp .core-mark-shell{scale:1.24;transition-duration:var(--look-speed, 180ms), .42s;}.hero-object .core.is-warp .core-glow{transform:scale(2.1);background-color:rgba(170,220,255,.5);}@media (prefers-reduced-motion: reduce){.hero-object .core.is-hot .core-mark-shell, .hero-object .core.is-warp .core-mark-shell{scale:1;}}/* Hover: the logo glows a little brighter and the whole circle breathes, so it reads as clickable. */.hero-object .core-mark{transition:filter .24s ease;}.hero-object .core.is-hot .core-mark{filter:brightness(1.32) grayscale(1) drop-shadow(0 0 26px rgba(255,255,255,.72)) drop-shadow(0 0 58px rgba(111,172,235,.62));}/* The rings keep their own rotation; `scale` is a separate property, so the breath never restarts it. */.hero-object .core.is-hot::before{animation:coreBreath 1.6s ease-in-out infinite;}.hero-object .core.is-hot .core-ring{scale:1.02;transition:scale .5s ease;}@keyframes coreBreath{0%, 100%{scale:1;}50%{scale:1.04;}}@media (prefers-reduced-motion: reduce){.hero-object .core.is-hot::before{animation:none;}}/* On a phone the circle shrinks a little to leave room for the callouts (js sets --core-scale).
   `scale` is a separate property from the transforms the rings and the scroll float use. */.hero-object .core,
.hero-object .hero-traces,
.hero-object::before,
.hero-object::after{scale:var(--core-scale, 1);}/* Product callouts round the circle; js/hero-orbit.js places them every frame. The link box is the
   hover target and never changes size, so hovering its very edge cannot make it jitter. */.hero-object .x-tag{position:absolute;left:0;top:0;z-index:3;display:flex;align-items:center;padding:6px;color:var(--white);text-decoration:none;will-change:transform;-webkit-tap-highlight-color:transparent;}.x-tag .x-name{font-family:"SLIMZ GOOGLE", sans-serif;font-size:.7rem;line-height:1.15;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:rgba(205,232,255,.82);transition:color .2s ease, text-shadow .2s ease;}.x-tag:hover .x-name{color:#fff;text-shadow:0 0 14px rgba(155,220,255,.65);}@media (max-width: 700px){.hero-object .x-tag{padding:4px;}/* Two centred lines on a phone: SLIMZ above the product name. */.x-tag .x-name{font-size:.56rem;letter-spacing:.1em;text-align:center;}.x-tag .x-brand{display:block;font-size:.82em;opacity:.62;}}/* Home nav: ВСЕ ПРОДУКТЫ and СУПЕРАКЦИЯ side by side, same size, the pair centred at the top. */.nav-pair{position:absolute;left:50%;top:50%;z-index:4;display:flex;gap:12px;transform:translate(-50%, -50%);}body[data-page="home"] .nav-pair .nav-products{position:relative;left:auto;top:auto;transform:none;}body[data-page="home"] .nav-pair .nav-products:hover,
body[data-page="home"] .nav-pair .nav-products:focus-visible{transform:translateY(-2px);}@media (max-width: 700px){/* Phone: brand and RU/EN on the first row, the two buttons centred on the second. */body[data-page="home"] .nav-inner{grid-template-columns:1fr max-content;grid-template-rows:34px 40px;justify-content:stretch;}body[data-page="home"] .nav .brand{grid-column:1;grid-row:1;justify-self:start;}body[data-page="home"] .nav-actions{grid-column:2;grid-row:1;}/* The two buttons fill the row, so their outer edges line up with SLIMZ AI STUDIO on the left
     and the settings button on the right; a little more air between the rows. */body[data-page="home"] .nav-inner{row-gap:10px;}.nav-pair{position:static;grid-column:1 / -1;grid-row:2;justify-self:stretch;gap:8px;transform:none;}body[data-page="home"] .nav-pair .nav-products{flex:1 1 0;width:auto;min-width:0;max-width:none;padding:0 10px;gap:7px;}body[data-page="home"] .nav-pair .nav-products:hover,
  body[data-page="home"] .nav-pair .nav-products:focus-visible{width:auto;transform:none;}}