/* ==== 20-hero.css ==== */
/* ==== home hero (owner: hero agent) · one full screen: cobalt band, centred copy, 3D laptop with a live dashboard, cards on one route ====
   The hero is exactly one screen tall (100svh). The copy takes what it needs, the scene (.hs) takes the rest and the scene box
   (.hs-in) scales to fit that space both ways, so the laptop is always whole and centred. Everything in the scene is sized in cqw
   of .hs-in, so the static route lines up with the cards at every size. The dashboard inside the screen sizes itself in cqw of
   the screen (.hs-view) and switches to a big-type variant when the screen is small (phones).
   The copy is plain HTML/CSS (visible at once, LCP). The scene and the background are aria-hidden; the intro is pure CSS with
   delays (--t) and only runs with JS on and motion allowed. 21-hero.js adds the live loop (a light travels the route card by card,
   the dashboard counts the visit and the reservation). Without JS or with reduced motion everything sits still in its final state.
   The background is a still picture (auras, rings, a floor grid with the dashed lane, light beams, points of light, glass shapes).
   The laptop stands still after its intro; a card moves only when the pointer comes close to it (21-hero.js). */

.hero{position:relative;isolation:isolate;overflow:clip;color:#fff;background:var(--night);display:flex;flex-direction:column;height:100vh;height:100svh;min-height:540px;padding:var(--hdr) 0 clamp(12px,2.4vh,32px)}
/* 2026-09-27 „Кино“: the hero has no card edge any more; its background fades into the dark stage below (04-stage.css) */
.hero{background:transparent}
.hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;contain:paint;-webkit-mask-image:linear-gradient(#000 86%,transparent);mask-image:linear-gradient(#000 86%,transparent);
  /* 2026-10-15 (owner): the arena photo instead of the flat blue; its floor grid, rings and haze replace the drawn ones */
  background:linear-gradient(180deg,rgba(4,6,26,.35) 0%,rgba(4,6,26,0) 40%,rgba(4,6,26,.45) 100%),
    url(/assets/img/bg/00-hero-d.webp) 50% 70%/cover no-repeat #060A2E}
@media (orientation:portrait){.hero-bg{background:linear-gradient(180deg,rgba(4,6,26,.3) 0%,rgba(4,6,26,0) 40%,rgba(4,6,26,.5) 100%),
  url(/assets/img/bg/00-hero-m.webp) 50% 80%/cover no-repeat #060A2E}}
.hero-bg :is(.hb-floor,.hb-ring,.hb-halo,.hb-grid,.hb-glow,.hb-aura){display:none}
.hb-aura{position:absolute;aspect-ratio:1;border-radius:50%;pointer-events:none}
.hb-a1{left:-22%;top:-38%;width:72vmax;background:radial-gradient(closest-side,rgba(132,150,255,.4),rgba(132,150,255,0))}
.hb-a2{right:-26%;bottom:-44%;width:66vmax;background:radial-gradient(closest-side,rgba(92,196,255,.2),rgba(92,196,255,0))}
.hb-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:72px 72px;background-position:50% 0;-webkit-mask-image:linear-gradient(#000,rgba(0,0,0,.4) 34%,transparent 56%);mask-image:linear-gradient(#000,rgba(0,0,0,.4) 34%,transparent 56%)}
.hb-glow{position:absolute;left:50%;top:48%;width:min(1200px,130vw);aspect-ratio:2/1;translate:-50% 0;background:radial-gradient(closest-side,rgba(160,176,255,.3),transparent);pointer-events:none}
/* A still orbital contour ties the floating cards to the laptop. */
.hero-bg::after{content:"";position:absolute;left:50%;top:45%;width:94%;height:45%;border-radius:50%;
  transform:translateX(-50%) rotate(-9deg);border:1px solid rgba(190,211,255,.28);
  box-shadow:0 1px 0 rgba(255,255,255,.18),0 12px 36px -20px rgba(119,166,255,.8),inset 0 -14px 32px -28px #C9D9FF;
  mask-image:linear-gradient(120deg,transparent 8%,#000 30%,transparent 54%,#000 82%,transparent);pointer-events:none}
@media (max-width:699px){.hero-bg::after{top:48%;width:132%;height:34%;opacity:.55}}
/* rings of light centred behind the laptop: fine concentric lines that fade out toward the edges, one brighter ring */
.hb-halo{position:absolute;left:50%;top:64%;width:max(1500px,150vw);aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:repeating-radial-gradient(circle,rgba(200,210,255,0) 0 calc(4.2% - 1px),rgba(200,210,255,.13) calc(4.2% - 1px) 4.2%);
  -webkit-mask-image:radial-gradient(closest-side,#000 8%,rgba(0,0,0,.55) 30%,transparent 62%);mask-image:radial-gradient(closest-side,#000 8%,rgba(0,0,0,.55) 30%,transparent 62%)}
.hb-ring{position:absolute;left:50%;top:64%;width:min(1180px,118vw);aspect-ratio:1;translate:-50% -50%;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(214,222,255,.3),0 0 60px -10px rgba(150,168,255,.45),inset 0 0 90px -30px rgba(150,168,255,.4);
  -webkit-mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.5) 38%,transparent 60%);mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.5) 38%,transparent 60%)}
/* the floor: a grid in perspective under the scene, and the brand's dashed lane running into it */
.hb-floor{position:absolute;left:-30%;right:-30%;bottom:0;height:34%;transform:perspective(560px) rotateX(58deg);transform-origin:50% 100%;
  background-image:linear-gradient(rgba(210,218,255,.3) 1px,transparent 1px),linear-gradient(90deg,rgba(210,218,255,.3) 1px,transparent 1px);background-size:96px 96px;background-position:50% 100%;
  -webkit-mask-image:radial-gradient(ellipse 60% 100% at 50% 100%,#000 30%,rgba(0,0,0,.5) 65%,transparent 95%);mask-image:radial-gradient(ellipse 60% 100% at 50% 100%,#000 30%,rgba(0,0,0,.5) 65%,transparent 95%)}
.hb-lane{position:absolute;left:50%;top:0;bottom:0;width:10px;translate:-50% 0;background:repeating-linear-gradient(180deg,rgba(255,255,255,.75) 0 38px,transparent 38px 76px);-webkit-mask-image:linear-gradient(transparent,#000 40%);mask-image:linear-gradient(transparent,#000 40%)}
/* light beams: a fan of soft shafts hung from one point above the copy. The vertical mask keeps them faint behind the copy
   (text contrast unchanged) and full around the laptop. Pre-soft gradients, nothing moves. */
.hb-rays{position:absolute;left:0;right:0;top:-10%;height:112%;transform-origin:50% 0}
.hb-rays i{position:absolute;left:50%;top:0;height:100%;width:var(--w);min-width:56px;translate:-50% 0;rotate:var(--r);transform-origin:50% 0;opacity:var(--o);
  background:linear-gradient(90deg,rgba(196,208,255,0),rgba(196,208,255,.17) 50%,rgba(196,208,255,0));
  -webkit-mask-image:linear-gradient(180deg,transparent 10%,rgba(0,0,0,.28) 32%,#000 56%,rgba(0,0,0,.45) 80%,transparent 97%);mask-image:linear-gradient(180deg,transparent 10%,rgba(0,0,0,.28) 32%,#000 56%,rgba(0,0,0,.45) 80%,transparent 97%)}
/* points of light */
.hb-dust i{position:absolute;left:var(--x);top:var(--y);width:var(--s);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff 0,rgba(255,255,255,.65) 38%,rgba(255,255,255,0) 72%);opacity:var(--o)}

/* ---------- holographic line drawings (still, inline SVG, 1px strokes at every size) ----------
   Both sit beside the headline, never behind it, and end above the scene, never on a card. Width: the room left between the
   band edge and the headline (the headline is about 10.6 font-sizes wide). Height (--ah): the band from just under the nav to
   28px above the top of the scene (copy padding + the two headline lines + the scene's top margin), so the cards below always
   keep clear of it. --asp is each drawing's width/height; a drawing limited by its width is centred in that band. */
.hb-art{--hf:clamp(34px,min(5.3vw,8vh),82px);--room:calc(50vw - 5.45*var(--hf) - 1.6vw);
  --ah:calc(clamp(14px,3.4vh,52px) + 2.08*var(--hf) + clamp(10px,2.6vh,34px) - 36px);
  --aw:clamp(0px,min(var(--room) - 28px,var(--ah)*var(--asp),460px),460px);
  position:absolute;top:calc(var(--hdr) + 8px + (var(--ah) - var(--aw)/var(--asp))/2);width:var(--aw);pointer-events:none}
.hb-art-l{--asp:1.497;left:max(14px,(var(--room) - var(--aw))/2)}
.hb-art-r{--asp:1.754;right:max(14px,(var(--room) - var(--aw))/2)}
.hb-art svg{display:block;width:100%;height:auto;overflow:visible}
.hb-art svg *{vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
/* the leaders: one faint dashed line from each drawing down to its card (the real place to the map, the world to the post).
   Drawn once per layout by 21-hero.js, still. */
.hb-lead{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.hb-lead path{fill:none;stroke:rgba(214,222,255,.5);stroke-width:1;stroke-dasharray:2 6;stroke-linecap:round}
.hb-lead circle{fill:#fff;opacity:.85}
.hb-lead .hl-o{fill:none;stroke:rgba(255,255,255,.55);stroke-width:1}
.hb-lead circle:not([cx]),.hb-lead path:not([d]){display:none}
/* the bistro: lit faces in pale cobalt, edges in fine light lines, glass windows, the brand's dashed lane on the street */
.hb-iso path,.hb-iso circle{stroke:rgba(214,222,255,.62);stroke-width:1;fill:none}
.hb-iso .ab-sh{stroke:none;fill:rgba(4,8,70,.22)}
.hb-iso .ab-top{fill:rgba(201,210,255,.085)}
.hb-iso .ab-l{fill:rgba(143,160,255,.09)}
.hb-iso .ab-r{fill:rgba(14,23,143,.22)}
.hb-iso .ab-road2{stroke:none;fill:url(#abFade);fill-opacity:.32}
.hb-iso .ab-ed{stroke:url(#abFade)}
.hb-iso .ab-lane2{stroke:url(#abFade);stroke-width:1.6}
.hb-iso .ab-grid{stroke:rgba(214,222,255,.14)}
.hb-iso .ab-road{fill:rgba(11,18,51,.2);stroke:rgba(214,222,255,.3)}
.hb-iso .ab-lane{stroke:#fff;stroke-width:1.6;stroke-opacity:.85}
.hb-iso .ab-in{stroke:rgba(214,222,255,.38)}
.hb-iso .ab-win{fill:rgba(201,210,255,.3);stroke:rgba(255,255,255,.72)}
.hb-iso .ab-door{fill:rgba(255,255,255,.5);stroke:#fff}
.hb-iso .ab-aw{fill:rgba(255,255,255,.22);stroke:rgba(255,255,255,.85)}
.hb-iso .ab-e2{stroke:rgba(214,222,255,.5)}
.hb-iso .ab-e{stroke:rgba(214,222,255,.7)}
.hb-iso .ab-sign{fill:rgba(255,255,255,.2);stroke:#fff}
.hb-iso .ab-sdot{fill:#fff;stroke:none}
.hb-iso .ab-tab{fill:rgba(255,255,255,.28)}
.hb-iso .ab-par{fill:rgba(201,210,255,.2);stroke:rgba(255,255,255,.7)}
.hb-iso .ab-tree{fill:rgba(143,160,255,.16)}
.hb-iso .ab-lamp{fill:#fff;stroke:rgba(255,255,255,.3);stroke-width:5}
.hb-iso .ab-ring{fill:rgba(255,255,255,.1);stroke:rgba(255,255,255,.8)}
.hb-iso .ab-ring2{stroke:rgba(255,255,255,.34);stroke-dasharray:2 4}
.hb-iso .ab-beam{stroke:rgba(255,255,255,.7);stroke-dasharray:1.5 3}
.hb-iso .ab-pin{fill:#fff;stroke:none}
.hb-iso .ab-pdot{fill:#2335FF;stroke:none}
.hb-iso .ab-node{fill:#fff;stroke:rgba(255,255,255,.3);stroke-width:4}
/* the globe: a fine wireframe, a few linked cities, two orbits carrying the service points (back halves fainter) */
.hb-globe path,.hb-globe ellipse,.hb-globe circle{fill:none;stroke-width:1}
.hb-globe .gl-ball{stroke:rgba(255,255,255,.78)}
.hb-globe .gl-lat,.hb-globe .gl-mer{stroke:rgba(214,222,255,.34)}
.hb-globe .gl-eq{stroke:rgba(214,222,255,.5)}
.hb-globe .gl-orb{stroke:rgba(255,255,255,.62)}
.hb-globe .gl-orb2{stroke:rgba(214,222,255,.45);stroke-dasharray:2 5}
.hb-globe .gl-back{stroke-opacity:.3}
.hb-globe .gl-arc{stroke:rgba(255,255,255,.7)}
.hb-globe .gl-city{fill:#fff;stroke:none}
.hb-globe .gl-hub{fill:#fff;stroke:rgba(255,255,255,.35);stroke-width:6}
.hb-globe .gl-node{fill:rgba(14,23,143,.55);stroke:rgba(255,255,255,.75)}
.hb-globe .gl-ic{stroke:#fff}

/* ---------- two glass drops at the band edges (still): clear glass, a fine rim and one highlight, no gloss colour ---------- */
.lv{position:absolute;z-index:0;display:block;left:var(--x);top:var(--y);width:var(--s);aspect-ratio:1;pointer-events:none;opacity:.6}
.lv b{position:absolute;inset:0;display:block;border-radius:50%;
  background:
    radial-gradient(circle at 31% 25%,rgba(255,255,255,.9) 0,rgba(255,255,255,.22) 10%,rgba(255,255,255,0) 22%),
    radial-gradient(ellipse 46% 22% at 56% 86%,rgba(214,222,255,.4),rgba(214,222,255,0) 100%),
    radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 56%,rgba(201,210,255,.12) 78%,rgba(255,255,255,.4) 98%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),0 16px 26px -18px rgba(2,4,40,.45)}

/* ---------- copy ---------- */
.hero-in{position:relative;z-index:2;flex:none;display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:clamp(14px,3.4vh,52px)}
/* the headline alone: two lines, the second in a light gradient (the same one as the scene titles below) */
.hero-h{font-size:clamp(34px,min(5.3vw,8vh),82px);line-height:1;letter-spacing:-.05em;font-weight:600;text-wrap:balance;filter:drop-shadow(0 .08em .5em rgba(4,8,70,.32))}
.hero-l1{display:block}
.hero-h em{display:block;padding-bottom:.08em;font-style:normal;background:linear-gradient(95deg,#fff 15%,#DDE2FF 55%,#B6C0FF 95%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- scene: .hs fills the rest of the screen, .hs-in is the biggest box of ratio --ar that fits in it ---------- */
.hs{position:relative;z-index:1;flex:1 1 0;min-height:0;margin-top:clamp(10px,2.6vh,34px);container-type:size;display:grid;place-items:center;pointer-events:none;user-select:none}
.hs-in{--ar:2.3;--side:140px;position:relative;width:min(100cqw - 2*var(--gut) - var(--side),calc(var(--ar)*100cqh),1800px);aspect-ratio:var(--ar);container-type:inline-size}

/* laptop (still: no float, no tilt). --lw = its width; the deck and the front edge scale with it */
.hs-lap{--lw:52cqw;position:absolute;z-index:1;left:calc(50cqw - var(--lw)/2);top:2cqw;width:var(--lw);perspective:130cqw;perspective-origin:50% calc(100% - 1.25cqw)}
.hs-light{position:absolute;left:-30%;right:-30%;top:-18%;bottom:-30%;z-index:-1;background:radial-gradient(closest-side,rgba(190,202,255,.55),rgba(120,140,255,.18) 55%,transparent);pointer-events:none}
.hs-lid{position:relative;transform-origin:50% 100%;transform-style:preserve-3d}
.hs-scr{position:relative;background:linear-gradient(180deg,#1A1F3A,#0A0D1F 40%);border-radius:1.4cqw 1.4cqw .35cqw .35cqw;padding:.85cqw .85cqw 1.25cqw;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 0 0 1px rgba(170,184,255,.22),0 0 6cqw -1cqw rgba(130,150,255,.5),0 4cqw 7cqw -3cqw rgba(0,0,30,.8);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.hs-scr::before{content:'';position:absolute;top:.28cqw;left:50%;width:.42cqw;height:.42cqw;margin-left:-.21cqw;border-radius:50%;background:radial-gradient(circle at 40% 35%,#4A5388,#1B2040 60%);box-shadow:0 0 0 .08cqw #2A3055}
/* aluminium rim: the top edge catches the light, the sides fade */
.hs-scr::after{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.12) 12%,rgba(255,255,255,0) 40%,rgba(255,255,255,0) 80%,rgba(180,192,255,.22));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.hs-view{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:.35cqw;background:#F5F7FC;container-type:inline-size}
/* screen glass: one soft reflection from the upper left */
.hs-view::after{content:'';position:absolute;inset:0;z-index:4;background:linear-gradient(118deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,.06) 26%,rgba(255,255,255,0) 44%);pointer-events:none}
.hs-glare{position:absolute;inset:0;z-index:3;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 48%,rgba(255,255,255,.1) 56%,transparent 70%);opacity:0;pointer-events:none}
.hs-dark{position:absolute;inset:0;z-index:5;background:#05081E;opacity:0;pointer-events:none}
.hs-back{position:absolute;inset:0;border-radius:1.4cqw 1.4cqw .35cqw .35cqw;background:linear-gradient(180deg,#E9ECF4,#B9C0D2);transform:rotateX(180deg);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.hs-back i{position:absolute;left:50%;top:50%;width:4cqw;height:4cqw;margin:-2cqw 0 0 -2cqw;border-radius:50%;background:rgba(255,255,255,.45)}
/* keyboard deck: one plane (depth .62 of the width) tilted back 85deg in its own perspective, so the far edge sits at the hinge
   and the near edge comes out ~11% wider, like a laptop seen from a little above. Box height = what the tilted plane shows. */
.hs-dk{position:relative;container-type:inline-size;aspect-ratio:1/.0603}
.hs-deck{position:absolute;left:0;top:0;width:100cqw;height:62cqw;transform-origin:50% 0;transform:perspective(600cqw) rotateX(85deg);border-radius:0 0 3cqw 3cqw;
  background:linear-gradient(180deg,#5C6488 0%,#A9B0C8 7%,#D5D9E5 40%,#EDEFF5 100%)}
.hs-deck::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(120,140,255,.4),rgba(120,140,255,0) 35%)}
.hs-keys{position:absolute;left:7.5%;right:7.5%;top:8%;height:44%;border-radius:1.2cqw;background-color:#151A2E;box-shadow:0 0 0 .35cqw #9FA7BF;
  background-image:linear-gradient(90deg,#3A4264 0 .35cqw,transparent .35cqw),linear-gradient(#3A4264 0 1.1cqw,transparent 1.1cqw);background-size:calc(100%/15) calc(100%/6)}
.hs-pad{position:absolute;left:33%;right:33%;top:58%;height:34%;border-radius:1.6cqw;background:linear-gradient(180deg,#C7CCDB,#DADEE8);box-shadow:inset 0 0 0 .3cqw rgba(110,118,150,.35)}
/* front edge: as wide as the deck's near edge */
.hs-base{position:relative;height:calc(var(--lw)*.022);margin-top:-1.5px;margin-inline:calc(var(--lw)*-.0575);background:linear-gradient(180deg,#FBFCFF 0%,#D2D6E3 40%,#8E95AB 100%);border-radius:0 0 1.4cqw 1.4cqw/0 0 1cqw 1cqw;box-shadow:inset 0 1px 0 #fff,0 1.4cqw 2.4cqw -1cqw rgba(0,0,30,.5)}
.hs-base::before{content:'';position:absolute;left:50%;top:0;width:15%;height:38%;translate:-50% 0;background:#B3B9CA;border-radius:0 0 .8cqw .8cqw}
.hs-base::after{content:'';position:absolute;left:calc(var(--lw)*.0575);right:calc(var(--lw)*.0575);bottom:100%;height:.75cqw;border-radius:.5cqw .5cqw 0 0;background:linear-gradient(180deg,#DCE0EA,#AAB1C4);opacity:0}
/* the aluminium edge catches the same light that sweeps the screen glass (a beat after it) */
.hs-shine{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.hs-shine i{position:absolute;top:0;bottom:0;left:0;width:36%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.95) 50%,rgba(255,255,255,0));opacity:0}
/* soft shadow on the "road" under the floating laptop, and the screen's light spilling onto it */
.hs-floor{position:absolute;z-index:0;left:50%;top:39.6cqw;width:58cqw;height:2.2cqw;translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,rgba(2,4,46,.85),rgba(2,4,46,.35) 60%,rgba(2,4,46,0))}
.hs-spill{position:absolute;z-index:0;left:50%;top:40.2cqw;width:84cqw;height:7cqw;translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,rgba(176,190,255,.3),rgba(130,148,255,.1) 55%,rgba(130,148,255,0));pointer-events:none}
/* the platform: rings drawn in a 1000x120 box whose centre (500,50) sits under the laptop's front edge; --dw = its width */
.hs-dais{--dw:100cqw;position:absolute;z-index:0;left:calc(50cqw - var(--dw)/2);top:calc(var(--dy,39.4cqw) - var(--dw)*.05);width:var(--dw);height:calc(var(--dw)*.12);overflow:visible;pointer-events:none;filter:drop-shadow(0 0 6px rgba(150,168,255,.35))}
.hs-dais ellipse{fill:none}
.hs-dais .hd-r1{stroke:url(#hdFade);stroke-width:2.2}
.hs-dais .hd-r2{stroke:rgba(214,222,255,.5);stroke-width:3.2;stroke-dasharray:1.2 10}
.hs-dais .hd-r3{stroke:url(#hdFade);stroke-width:1.4;opacity:.9}
.hs-dais .hd-r4{stroke:url(#hdFade);stroke-width:1.2;opacity:.6}
.hs-dais .hd-n{fill:#fff;opacity:.85}
.hs-dais .hd-nb{fill:#fff;stroke:rgba(255,255,255,.3);stroke-width:7;paint-order:stroke;opacity:1}

/* dashboard inside the screen (cqw = % of the screen width). Three tiles and two charts, set large enough to read:
   labels and headings never go under 13px on a laptop, small print that could not be read at that size is left out. */
.db{--rail:7.4cqw;position:absolute;inset:0;display:grid;grid-template-columns:var(--rail) minmax(0,1fr);color:var(--ink);font-family:var(--f);text-align:left;line-height:1.25;
  background:radial-gradient(ellipse 60% 50% at 85% 0%,rgba(35,53,255,.07),transparent 70%),#F3F5FB}
/* app rail: dark navy, the open section lit in cobalt */
.db-rail{display:flex;flex-direction:column;align-items:center;gap:1.9cqw;padding:1.7cqw 0 2cqw;background:linear-gradient(180deg,#131B52,#0B1233 70%);box-shadow:inset -1px 0 0 rgba(255,255,255,.06)}
.db-rmk{width:4.2cqw;height:4.2cqw;margin-bottom:.8cqw;flex:none;border-radius:50%;box-shadow:0 0 0 .35cqw rgba(255,255,255,.1)}
.db-rail i{display:grid;place-items:center;width:4.6cqw;height:4.6cqw;border-radius:1.3cqw;flex:none}
.db-rail i svg{width:52%;height:52%;fill:none;stroke:rgba(214,220,255,.55);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.db-rail .on{background:linear-gradient(180deg,#4453FF,#2335FF);box-shadow:0 .6cqw 1.6cqw -.4cqw rgba(35,53,255,.8),inset 0 1px 0 rgba(255,255,255,.3)}
.db-rail .on svg{stroke:#fff}
.db-rail b{flex:none}
.db-me{margin-top:auto;width:3.8cqw;height:3.8cqw;border-radius:50%;background:radial-gradient(circle at 50% 38%,#FFD9B8 0 28%,transparent 29%),radial-gradient(ellipse 60% 44% at 50% 100%,#FFD9B8 0 70%,transparent 71%),linear-gradient(160deg,#FF9F7A,#E0567A);box-shadow:0 0 0 .3cqw rgba(255,255,255,.18)}
.db-main{display:flex;flex-direction:column;min-width:0;min-height:0}
.db-bar{display:flex;align-items:center;gap:2cqw;height:7.4cqw;padding:0 3cqw;background:rgba(255,255,255,.92);border-bottom:1px solid #E6E9F2;flex:none}
.db-brand{display:flex;align-items:center;gap:1.2cqw;font-size:max(13px,2.3cqw);font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.db-mk{display:none;width:max(18px,3.8cqw);height:max(18px,3.8cqw);flex:none}
.db-tabs{display:flex;gap:.5cqw;margin-left:1cqw}
.db-tabs i{font-style:normal;font-size:max(13px,1.9cqw);color:var(--muted);padding:.7cqw 1.5cqw;border-radius:99px}
.db-tabs .on{background:var(--cobalt-tint);color:var(--cobalt);font-weight:600}
.db-month{margin-left:auto;display:flex;align-items:center;gap:.9cqw;font-size:max(13px,1.9cqw);font-weight:500;padding:.8cqw 1.6cqw;border:1px solid #E1E5EF;border-radius:99px}
.db-month svg{width:max(14px,2cqw);height:max(14px,2cqw);fill:none;stroke:var(--cobalt);stroke-width:2;stroke-linecap:round}
.db-body{flex:1;display:flex;flex-direction:column;gap:2cqw;padding:2.4cqw 3cqw 2.8cqw;min-height:0}
.db-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw}
.db-kpis li,.db-card{background:#fff;border-radius:1.6cqw;box-shadow:0 0 0 1px rgba(11,18,51,.04),0 .1cqw .3cqw rgba(11,18,51,.06),0 1cqw 2.4cqw -1.2cqw rgba(11,18,51,.2)}
.db-kpis li{position:relative;padding:1.8cqw 2cqw 2cqw;overflow:hidden}
/* a small trend line in the corner of every tile */
.db-sp{position:absolute;right:1.8cqw;bottom:2cqw;width:22%;height:3.4cqw;overflow:visible}
.db-sp path{fill:none;stroke:var(--cobalt);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.db-sp .db-spf{fill:rgba(35,53,255,.1);stroke:none}
.db-l{display:flex;align-items:center;gap:1cqw;font-size:max(13px,2.2cqw);color:var(--muted);white-space:nowrap}
.db-ic{width:max(17px,3.1cqw);height:max(17px,3.1cqw);border-radius:.9cqw;background:var(--cobalt-tint);display:grid;place-items:center;flex:none}
.db-ic svg{width:62%;height:62%;fill:none;stroke:var(--cobalt);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.db-v{display:flex;align-items:center;margin-top:1.2cqw;font-size:max(21px,5.2cqw);line-height:1;font-weight:600;letter-spacing:-.035em;font-variant-numeric:tabular-nums;white-space:nowrap}
.db-v small{font-size:.55em;font-weight:500;margin-right:.12em;color:var(--muted);letter-spacing:0}
/* the reservations tile is the one that matters: cobalt, white type */
.db-kpis .db-g{background:linear-gradient(145deg,#4655FF 0%,#2335FF 48%,#1A22C4 100%);color:#fff;box-shadow:0 1.2cqw 2.6cqw -1cqw rgba(35,53,255,.6),inset 0 1px 0 rgba(255,255,255,.25)}
.db-g .db-l{color:rgba(255,255,255,.82)}
.db-g .db-ic{background:rgba(255,255,255,.18)}.db-g .db-ic svg{stroke:#fff}
.db-g .db-sp path{stroke:#fff}.db-g .db-sp .db-spf{fill:rgba(255,255,255,.16)}
.db-g .db-plus{background:#fff;color:var(--cobalt)}
.db-g .db-ping{box-shadow:0 0 0 max(1.5px,.22cqw) #fff,0 0 0 max(4px,.9cqw) rgba(255,255,255,.25)}
/* live bits: the tile ring and the +1 chip (shown by 21-hero.js when the route arrives) */
.db-ping{position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 max(1.5px,.22cqw) var(--cobalt),0 0 0 max(4px,.9cqw) rgba(35,53,255,.13);opacity:0;pointer-events:none}
.db-plus{margin-left:.35em;padding:.22em .5em;border-radius:99px;background:var(--cobalt-tint);color:var(--cobalt);font-style:normal;font-size:max(13px,.4em);font-weight:700;letter-spacing:0;line-height:1;opacity:0}
.db-row{flex:1;display:grid;grid-template-columns:1.75fr 1fr;gap:2cqw;min-height:0}
.db-card{display:flex;flex-direction:column;min-height:0;padding:1.9cqw 2.2cqw 1.7cqw}
.db-h{display:flex;align-items:baseline;gap:1cqw;font-size:max(13px,2.1cqw);font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.db-hv{display:none;font-variant-numeric:tabular-nums}
.db-plot{position:relative;flex:1;margin-top:1.4cqw}
.db-grid{position:absolute;inset:0;background:repeating-linear-gradient(to bottom,#E9ECF4 0 1px,transparent 1px 25%)}
.db-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.db-svg{filter:drop-shadow(0 .7cqw .8cqw rgba(35,53,255,.28))}
.db-line{fill:none;stroke:url(#hsLine);stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.db-peak{position:absolute;left:100%;top:17.1%;width:1.3cqw;height:1.3cqw;margin:-.65cqw 0 0 -.65cqw;border-radius:50%;background:#6A45FF;box-shadow:0 0 0 .35cqw #fff,0 0 0 .8cqw rgba(35,53,255,.18)}
.db-x{display:flex;justify-content:space-between;margin-top:1cqw;font-size:max(13px,1.6cqw);color:#8A91AB}
.db-cols{flex:1;display:grid;grid-template-columns:repeat(7,1fr);gap:.7cqw;margin-top:1.4cqw;min-height:0}
.db-cols li{display:grid;grid-template-rows:1fr auto;justify-items:center;gap:.8cqw;min-height:0}
.db-cols i{position:relative;font-style:normal;align-self:end;width:100%;height:var(--h);border-radius:99px 99px .5cqw .5cqw;background:var(--cobalt);transform-origin:50% 100%}
.db-cols li:not(.hi) i{background:linear-gradient(180deg,#DCE1FC,#C4CBF4)}
.db-cols .hi i{background:linear-gradient(180deg,#6A45FF,var(--cobalt));box-shadow:0 .8cqw 1.8cqw -.6cqw rgba(35,53,255,.7)}
/* the busiest day carries its count */
.db-cv{position:absolute;left:50%;top:max(5px,.9cqw);translate:-50% 0;font-size:max(13px,1.7cqw);font-style:normal;letter-spacing:-.02em;font-weight:700;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
@container (max-width:599px){.db-cv{display:none}}
.db-cols span{font-size:max(13px,1.6cqw);color:#8A91AB}
/* the axis ticks only where they come out readable (big screens); the chart headings already say what is plotted */
@container (max-width:599px){.db-x,.db-cols span{display:none}}
@container (max-width:659px){.db-tabs{display:none}}
/* the notification that drops into the top bar (right side, centred in the bar, never over the numbers).
   Hidden at rest: only the live loop shows it for a few seconds, so the still picture (no JS, reduced motion) keeps the month readable. */
.db-toast{position:absolute;z-index:3;top:calc((7.4cqw - max(26px,5.2cqw))/2);right:2.4cqw;display:flex;align-items:center;gap:max(6px,1cqw);height:max(26px,5.2cqw);padding:0 max(11px,1.8cqw) 0 max(4px,.6cqw);border-radius:99px;background:#fff;box-shadow:0 0 0 1px rgba(11,18,51,.07),0 1.2cqw 2.6cqw -1cqw rgba(11,18,51,.4);font-size:max(13px,1.9cqw);line-height:1;white-space:nowrap;opacity:0}
.db-toast b{font-weight:600;letter-spacing:-.01em}
.db-tx{color:var(--muted)}
.db-tx::before{content:'· ';color:#A3A9BF}
.db-tic{display:grid;place-items:center;width:max(19px,4cqw);height:max(19px,4cqw);border-radius:50%;background:var(--cobalt);flex:none}
.db-tic svg{width:58%;height:58%;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@container (max-width:539px){.db-tx{display:none}}

/* big-type dashboard for small screens (phones): two tiles, one chart, nothing under 13px; the month stays as a compact chip */
@container (max-width:440px){
  .db{--rail:0px;grid-template-columns:minmax(0,1fr)}
  .db-rail,.db-sp{display:none}
  .db-mk{display:block}
  .db-bar{height:30px;padding:0 10px;gap:8px}
  .db-brand{font-size:13px;gap:6px}
  .db-mk{width:18px;height:18px}
  .db-month{gap:5px;padding:0;border:0;font-size:13px;color:var(--ink)}
  .db-month svg{width:14px;height:14px}
  .db-tabs,.db-k1,.db-bars,.db-x,.db-tx{display:none}
  .db-body{gap:8px;padding:8px 10px 10px}
  .db-kpis{grid-template-columns:1fr 1fr;gap:8px}
  .db-kpis li,.db-card{border-radius:10px}
  .db-kpis li{padding:7px 9px 8px}
  .db-l{font-size:13px;gap:6px}
  .db-ic{width:18px;height:18px;border-radius:6px}
  .db-ic svg{width:12px;height:12px}
  .db-v{margin-top:4px;font-size:21px}
  .db-plus{font-size:14px}
  .db-row{grid-template-columns:1fr}
  .db-card{padding:7px 10px 8px}
  .db-h{font-size:14px;gap:8px}
  .db-hv{display:inline;font-size:15px;color:var(--ink)}
  .db-plot{margin-top:4px}
  .db-peak{width:8px;height:8px;margin:-4px 0 0 -4px;box-shadow:0 0 0 2px #fff,0 0 0 5px rgba(35,53,255,.18)}
  .db-toast{top:3px;right:8px;height:24px;gap:6px;padding:0 10px 0 3px}
  .db-tic{width:18px;height:18px}
}
@container (max-width:300px){
  /* icons go (tiles, brand mark, calendar); the month stays as plain text after the brand */
  .db-ic,.db-mk,.db-month svg{display:none}
  .db-month{color:var(--muted)}
  .db-month::before{content:'·';color:#A3A9BF}
  .db-bar{height:26px}
  .db-kpis li{padding:5px 8px 6px}
  .db-v{margin-top:2px;font-size:18px}
  .db-body{gap:6px;padding:6px 8px 8px}
  .db-card{padding:5px 8px 6px}
  .db-toast{top:1px}
}
/* the very smallest screen (a 375x548 window): no room for the month beside the brand and the route */
@container (max-width:230px){.db-month{display:none}}

/* route: every segment starts and ends under a card, so it always meets the card edge whatever the card height */
.hs-route{position:absolute;inset:0;z-index:2;width:100%;height:100%;overflow:visible;display:none;--sw:.13}
.hs-route path{fill:none;stroke:#fff;stroke-opacity:.85;stroke-width:var(--sw);stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.hs-route .rt-w{stroke-opacity:1;stroke-width:calc(var(--sw)*2.8)}
.hs-route .rt-c{stroke:var(--cobalt);stroke-opacity:1}
.rt-end{fill:var(--cobalt);stroke:#fff;stroke-width:calc(var(--sw)*1.6);transform-box:fill-box;transform-origin:center}
.rt-d5{display:block}
/* the travelling light: white core, a thin cobalt ring (so it reads on the white screen too), soft halo */
.rt-dot{--ds:max(9px,.8cqw);position:absolute;z-index:2;left:0;top:0;width:var(--ds);aspect-ratio:1;margin:calc(var(--ds)/-2) 0 0 calc(var(--ds)/-2);border-radius:50%;background:#fff;box-shadow:0 0 0 max(1.5px,.14cqw) rgba(35,53,255,.9),0 0 max(10px,1.1cqw) max(3px,.3cqw) rgba(220,228,255,.6);opacity:0;pointer-events:none;will-change:transform,opacity}
.rt-dot2{--ds:max(6px,.55cqw);background:rgba(255,255,255,.8);box-shadow:0 0 max(8px,.8cqw) max(2px,.2cqw) rgba(220,228,255,.4)}
.rt-dot3{--ds:max(4px,.38cqw);background:rgba(255,255,255,.6);box-shadow:0 0 max(6px,.6cqw) rgba(220,228,255,.3)}

/* cards: solid white (the route runs under them and must never show through), a fine glass rim against the cobalt, deep soft shadow */
@property --kx{syntax:'<length>';inherits:false;initial-value:0px}
@property --ky{syntax:'<length>';inherits:false;initial-value:0px}
@property --krx{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --kry{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --kk{syntax:'<number>';inherits:false;initial-value:1}
/* still until the pointer comes close: 21-hero.js then draws that one card toward it (--kx/--ky), tilts it (--krx/--kry) and lifts it (--kk) */
.hc{position:absolute;z-index:3;transform:perspective(900px) translate3d(var(--kx,0px),var(--ky,0px),0) rotateX(var(--krx,0deg)) rotateY(var(--kry,0deg)) scale(var(--kk,1))}
.hc.near{z-index:6}
.hc-web.near{z-index:4} /* the phone stays in front of the browser card */
.hc .hc-a{transition:box-shadow .5s var(--ease)}
.hc.near .hc-a{box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(11,18,51,.05),0 0 0 var(--bz) rgba(255,255,255,.2),0 .3cqw .6cqw rgba(3,6,60,.14),0 3.2cqw 5.6cqw -1.6cqw rgba(3,6,60,.7),0 0 3.4cqw -.4cqw rgba(170,186,255,.6)}
.hc-ph.near .hc-a{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22),0 0 0 1px rgba(255,255,255,.2),0 3.4cqw 5cqw -1.6cqw rgba(0,0,30,.8),0 0 3cqw -.6cqw rgba(170,186,255,.55)}
/* one surface for all five: white with a faint cool fall-off, a hairline, and a frosted glass bezel (--bz) with a fine rim */
.hc-a{--bz:max(5px,.42cqw);position:relative;background:linear-gradient(180deg,#fff 40%,#F7F8FD);color:var(--ink);border-radius:max(12px,1.25cqw);padding:max(10px,.95cqw);
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(11,18,51,.05),0 0 0 var(--bz) rgba(255,255,255,.12),0 .15cqw .4cqw rgba(3,6,60,.12),0 2.2cqw 4.4cqw -1.6cqw rgba(3,6,60,.62);
  outline:1px solid rgba(255,255,255,.3);outline-offset:calc(var(--bz) - 1px);text-align:left}
.hc-l{display:flex;align-items:center;gap:max(7px,.6cqw);font-size:max(13px,1.1cqw);font-weight:600;line-height:1.2;letter-spacing:-.01em;white-space:nowrap}
/* the step chip: the number on a cobalt disc inside a ring of five segments, lit up to its step (1 of 5 ... 5 of 5).
   The white gaps fall on the segment ends, so every segment has clean ends and the unlit ones keep a visible track. */
.hc-n{--p:.2;position:relative;isolation:isolate;display:grid;place-items:center;width:max(25px,1.95cqw);height:max(25px,1.95cqw);border-radius:50%;
  background:repeating-conic-gradient(from -7deg,#fff 0 14deg,transparent 14deg 72deg),conic-gradient(var(--cobalt) calc(var(--p)*360deg),#C9D2FF 0);color:#fff;font-style:normal;font-size:max(13px,.95cqw);font-weight:700;line-height:1;font-variant-numeric:tabular-nums;flex:none}
.hc-n::before{content:'';position:absolute;z-index:-1;inset:max(3.5px,.27cqw);border-radius:50%;background:linear-gradient(160deg,#5463FF,#2335FF 55%,#1A22C4);box-shadow:0 0 0 max(1.5px,.11cqw) #fff,inset 0 1px 0 rgba(255,255,255,.35)}
.hc-web .hc-n,.hc-ph .hc-n{--p:.4}.hc-chat .hc-n{--p:.6}.hc-cal .hc-n{--p:.8}.hc-post .hc-n{--p:1}
/* the channel glyph at the right of every header, and the AI mark on the chat */
.hc-g{display:grid;margin-left:auto;width:max(16px,1.25cqw);height:max(16px,1.25cqw);flex:none}
.hc-g svg{width:100%;height:100%;fill:none;stroke:#A0A8C8;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hc-ai{margin-left:auto;padding:max(3px,.25cqw) max(7px,.5cqw);border-radius:99px;background:linear-gradient(135deg,var(--cobalt-tint),#E4E8FF);color:var(--cobalt);font-size:max(14px,.9cqw);font-weight:700;letter-spacing:.02em;line-height:1.1;box-shadow:inset 0 0 0 1px rgba(35,53,255,.12)}
.hc-n::after{content:'';position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 2px rgba(35,53,255,.55);opacity:0}

/* 1 map */
.hc-map{left:3.5cqw;top:2cqw;width:16.5cqw;z-index:3}
.map{position:relative;margin-top:max(8px,.8cqw);border-radius:max(8px,.8cqw);overflow:hidden;aspect-ratio:5/3}
.map svg{display:block;width:100%;height:100%}
.map-pin{position:absolute;left:47%;top:30%;width:18%;aspect-ratio:1;translate:-50% -85%;color:var(--cobalt)}
.map-pin svg{position:relative;width:100%;height:100%;fill:var(--cobalt);stroke:#fff;stroke-width:1.6;filter:drop-shadow(0 .3cqw .4cqw rgba(11,18,51,.3))}
.map-pin svg circle{fill:#fff;stroke:none}
.map-ring{position:absolute;left:50%;top:92%;width:78%;aspect-ratio:2/1;translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,rgba(35,53,255,.3),rgba(35,53,255,0));box-shadow:0 0 0 1px rgba(35,53,255,.22)}
.map svg .map-rt{fill:none;stroke:var(--cobalt);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.map{box-shadow:inset 0 0 0 1px rgba(11,18,51,.06)}
.map-km{position:absolute;left:35%;top:56%;display:flex;align-items:center;gap:max(3px,.25cqw);padding:max(3px,.22cqw) max(8px,.55cqw) max(3px,.22cqw) max(5px,.38cqw);border-radius:99px;background:#fff;color:var(--ink);font-size:max(13px,.92cqw);font-weight:650;line-height:1.1;white-space:nowrap;box-shadow:0 0 0 1px rgba(11,18,51,.06),0 .35cqw .9cqw -.3cqw rgba(11,18,51,.4)}
.map-km svg{width:max(13px,.95cqw);height:max(13px,.95cqw);fill:none;stroke:var(--cobalt);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.map-no{position:absolute;left:58%;top:6%;padding:.25em .55em;border-radius:99px;background:var(--cobalt);color:#fff;font-size:max(13px,1.05cqw);font-weight:700;line-height:1.1;box-shadow:0 .4cqw .9cqw -.3cqw rgba(11,18,51,.45);transform-origin:0 100%}

/* 2 browser + phone */
.hc-web{left:0;top:19cqw;width:22.5cqw;z-index:4}
.hc-ptab{display:none;position:absolute;z-index:2;right:calc(100% - 8px);bottom:12%;color:var(--ink);padding:max(6px,.45cqw) max(12px,.9cqw) max(6px,.45cqw) max(6px,.45cqw);border-radius:99px;background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.4),0 .8cqw 1.8cqw -.8cqw rgba(3,6,60,.5)}
.bw{margin-top:max(8px,.7cqw);border-radius:max(8px,.7cqw);overflow:hidden;box-shadow:0 0 0 1px rgba(11,18,51,.07)}
.bw-bar{display:flex;align-items:center;gap:max(4px,.35cqw);height:max(22px,1.9cqw);padding:0 max(8px,.8cqw);background:#EEF1F8}
.bw-bar i{width:max(6px,.5cqw);height:max(6px,.5cqw);border-radius:50%;background:#C9D0E3}
.bw-bar span{display:flex;align-items:center;gap:max(4px,.3cqw);flex:1;height:58%;margin-left:max(6px,.6cqw);max-width:54%;padding:0 max(6px,.45cqw);border-radius:99px;background:#fff;box-shadow:inset 0 0 0 1px rgba(11,18,51,.05)}
.bw-bar span svg{width:max(9px,.7cqw);height:max(9px,.7cqw);fill:none;stroke:var(--cobalt);stroke-width:2.4;stroke-linecap:round;flex:none}
.bw-bar span b{flex:1;height:max(3px,.24cqw);max-width:70%;border-radius:99px;background:#D9DEEC}
.hc-web img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:50% 0}
.hc-ph{left:18cqw;top:26.5cqw;width:7.4cqw;z-index:5}
.hc-ph .hc-a{padding:max(3px,.42cqw);border-radius:max(16px,1.5cqw);background:#0A0D1F;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18),0 0 0 1px rgba(255,255,255,.12),0 2.4cqw 4cqw -1.6cqw rgba(0,0,30,.75)}
.ph-v{position:relative;aspect-ratio:390/844;overflow:hidden;border-radius:max(13px,1.15cqw);background:#F6EFE3}
.ph-v::before{content:'';position:absolute;z-index:2;top:2.6%;left:50%;width:30%;height:3.2%;translate:-50% 0;border-radius:99px;background:#000}
.ph-v::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(120deg,rgba(255,255,255,.22),rgba(255,255,255,0) 38%);pointer-events:none}
.ph-v img{width:100%;height:100%;object-fit:cover;object-position:top}

/* 3 chat */
.hc-chat{left:79.5cqw;top:30.5cqw;width:17.5cqw;z-index:4}
.ch-q{margin:max(8px,.8cqw) 0 0 auto;width:fit-content;max-width:90%;padding:max(6px,.5cqw) max(10px,.85cqw);border-radius:max(12px,1cqw) max(12px,1cqw) max(4px,.3cqw) max(12px,1cqw);background:var(--mist-2);font-size:max(13px,1.05cqw);line-height:1.3}
.ch-a{position:relative;display:flex;align-items:flex-end;gap:max(6px,.5cqw);margin-top:max(6px,.55cqw);min-height:max(28px,2.4cqw)}
.ch-av{display:grid;place-items:center;width:max(24px,1.9cqw);height:max(24px,1.9cqw);border-radius:50%;flex:none;
  background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.7) 0,rgba(255,255,255,0) 30%),linear-gradient(150deg,#8FA0FF,#2335FF 60%,#0E178F);box-shadow:0 .25cqw .6cqw -.15cqw rgba(35,53,255,.6),inset 0 0 0 1px rgba(255,255,255,.25)}
.ch-av svg{width:60%;height:60%;fill:#fff}
.ch-end{white-space:nowrap}
.ch-ok{display:inline-grid;place-items:center;vertical-align:-.2em;margin-left:.4em;width:1.15em;height:1.15em;border-radius:50%;background:#fff}
.ch-ok svg{width:78%;height:78%;fill:none;stroke:var(--cobalt);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.ch-r{box-shadow:0 .4cqw .9cqw -.4cqw rgba(35,53,255,.65);padding:max(6px,.5cqw) max(7px,.55cqw) max(6px,.5cqw) max(10px,.85cqw);border-radius:max(12px,1cqw) max(12px,1cqw) max(12px,1cqw) max(4px,.3cqw);background:linear-gradient(160deg,#4655FF,#2335FF 60%);color:#fff;font-size:max(13px,1.05cqw);line-height:1.3;transform-origin:0 100%}
.ch-dots{position:absolute;left:calc(max(22px,1.8cqw) + max(6px,.5cqw));bottom:0;display:flex;gap:max(3px,.28cqw);padding:max(9px,.75cqw) max(10px,.85cqw);border-radius:max(12px,1cqw) max(12px,1cqw) max(12px,1cqw) max(4px,.3cqw);background:var(--mist-2);opacity:0}
.ch-dots i{width:max(5px,.42cqw);height:max(5px,.42cqw);border-radius:50%;background:#8A91AB}

/* 4 calendar */
.hc-cal{left:79.5cqw;top:17.5cqw;width:16cqw;z-index:3}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:max(2px,.18cqw);margin-top:max(8px,.8cqw);padding:max(3px,.25cqw);border-radius:max(9px,.75cqw);background:var(--mist)}
.cal span{display:grid;place-items:center;height:max(22px,1.75cqw);border-radius:max(6px,.5cqw);font-size:max(14px,.85cqw);font-weight:600;color:#8A91AB;line-height:1}
.cal .on{background:linear-gradient(160deg,#4655FF,#2335FF 60%);color:#fff;box-shadow:0 .3cqw .7cqw -.2cqw rgba(35,53,255,.6)}
.cal-s{display:flex;gap:max(5px,.4cqw);margin-top:max(6px,.5cqw)}
.cal-s span{position:relative;display:flex;align-items:center;justify-content:center;gap:max(3px,.2cqw);flex:1;height:max(24px,1.85cqw);border-radius:max(7px,.6cqw);box-shadow:inset 0 0 0 1px #E1E5F0;font-size:max(14px,.88cqw);font-weight:600;color:#6B7290;font-variant-numeric:tabular-nums;line-height:1;white-space:nowrap}
.cal-s .cal-go{isolation:isolate;flex:1.3;color:#fff;box-shadow:0 .35cqw .8cqw -.3cqw rgba(35,53,255,.65)}
.cal-go::before{content:'';position:absolute;z-index:-1;inset:0;border-radius:inherit;background:linear-gradient(160deg,#4655FF,#2335FF 60%);transform-origin:0 50%}
.cal-go svg{width:max(12px,.95cqw);height:max(12px,.95cqw);fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;flex:none}
@container (max-width:1499px){.cal-s .cal-3{display:none}}

/* 5 post: the far card (smaller, a lighter shadow; no blur, it keeps the text crisp) */
.hc-post{left:82.5cqw;top:1cqw;width:12.5cqw;z-index:2}
.hc-post .hc-a{box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(255,255,255,.3),0 1.4cqw 2.8cqw -1.4cqw rgba(3,6,60,.45)}
.post-img{margin-top:max(8px,.7cqw);border-radius:max(8px,.7cqw);overflow:hidden;aspect-ratio:16/11}
.post-img svg{display:block;width:100%;height:100%}
.post-ft{display:flex;align-items:center;gap:max(8px,.7cqw);margin-top:max(7px,.6cqw)}
.post-like{position:relative;display:grid;width:max(18px,1.45cqw);height:max(18px,1.45cqw)}
.post-like svg{width:100%;height:100%;fill:var(--cobalt);stroke:var(--cobalt);stroke-width:1.6;stroke-linejoin:round}
.post-c{width:max(18px,1.45cqw);height:max(18px,1.45cqw)}
.post-bm{margin-left:auto}
.post-img{position:relative}
.post-av{position:absolute;left:max(5px,.45cqw);top:max(5px,.45cqw);width:max(16px,1.3cqw);height:max(16px,1.3cqw);border-radius:50%;box-shadow:0 0 0 max(1.5px,.12cqw) #fff,0 .2cqw .5cqw rgba(11,18,51,.3)}
.post-av svg{display:block;width:100%;height:100%}
.post-c svg{width:100%;height:100%;fill:none;stroke:#8A91AB;stroke-width:1.8;stroke-linejoin:round}
.ht{position:absolute;left:15%;top:10%;width:70%;height:70%;opacity:0;background:var(--cobalt);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20s-7.5-4.6-7.5-10A4.3 4.3 0 0 1 12 7.4 4.3 4.3 0 0 1 19.5 10c0 5.4-7.5 10-7.5 10z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20s-7.5-4.6-7.5-10A4.3 4.3 0 0 1 12 7.4 4.3 4.3 0 0 1 19.5 10c0 5.4-7.5 10-7.5 10z'/%3E%3C/svg%3E") center/contain no-repeat}

@container (max-width:1599px){.ch-x{display:none}}
/* the far card is too narrow for its channel glyph on smaller boxes: the label keeps the room */
@container (max-width:1079px){.hc-post .hc-g{display:none}}
@container (max-width:320px){.ch-av{display:none}.ch-dots{left:0}}
/* the smallest phones: the phone's label shrinks to its number so it never covers the chart */
@container (max-width:300px){.hc-ptab{top:-7px;right:auto;bottom:auto;left:-7px;gap:0;padding:0;background:none;box-shadow:none;font-size:0}}

/* short laptops (box under 1000px): the post and the calendar step up so the right column keeps its gaps */
@container (max-width:1000px){.hc-post{top:0}.hc-cal{top:16.5cqw}}

/* ---------- small desktop scene (the box is under 900px wide): three cards ---------- */
@container (max-width:900px){
  .hc-cal,.hc-post{display:none}
  .hc-map{left:1cqw;top:0;width:19cqw}
  .hc-web{left:0;top:19.5cqw;width:23cqw}
  .hc-ph{left:19cqw;top:27cqw;width:7cqw}
  .hc-chat{left:77.5cqw;top:13cqw;width:22.5cqw}
  .ch-q{max-width:none}
  .ch-x{display:none}
  .rt-d5{display:none}.rt-d3{display:block}
  .hs-route{--sw:.2}
}

/* ---------- intro, levitation and the live loop's resting states (JS on + motion allowed only) ---------- */
@media (prefers-reduced-motion:no-preference){
  /* timeline: lid opens .2–1.3 s, screen on at 1.1 s, cards and route 1.4–4.35 s. 21-hero.js reads these animations: the
     counters start on the screen's power-on, the first live pass once the route and the cards are finished */
  html.js .hs-in{animation:hsIn 1s var(--ease) .1s both}
  html.js .hs-lid{animation:hsLid 1.1s cubic-bezier(.45,.02,.12,1) .2s both}
  html.js .hs-base::after{animation:hsEdge .3s ease-in .25s both}
  html.js .hs-light{animation:hsFade 1.3s ease-out 1s both}
  html.js .hs-dark{animation:hsPower .8s ease-out 1.1s both}
  html.js .hs-glare{animation:hsGlare 1.2s cubic-bezier(.4,0,.2,1) 1.05s both,hsSheen 13s cubic-bezier(.4,0,.2,1) 8s infinite}
  html.js .hs-shine i{animation:hsShine 13s cubic-bezier(.4,0,.2,1) 8.35s infinite}
  html.js .db-line{animation:hsDraw 1.7s cubic-bezier(.5,0,.25,1) 1.5s both}
  html.js .db-fill{animation:hsFade 1.2s ease-out 2.3s both}
  html.js .db-peak{animation:hsPop .6s cubic-bezier(.3,1.6,.5,1) 3s both}
  html.js .db-cols i{animation:hsBar 1s var(--ease) calc(1.7s + var(--i)*80ms) both}
  html.js .hs-floor{animation:hsFade 1.1s ease-out .7s both}
  html.js .hs-spill{animation:hsFade 1.5s ease-out 1.2s both}

  html.js .hs-route path{animation:hsDraw var(--l) cubic-bezier(.45,0,.3,1) var(--t) both}
  html.js .rt-end{animation:hsPop .5s cubic-bezier(.3,1.6,.5,1) var(--t) both}

  html.js .hc-a{animation:hcIn .9s var(--ease) var(--t) both}
  html.js .map-pin{animation:hcDrop .7s cubic-bezier(.3,1.5,.5,1) calc(var(--t) + .35s) both}
  html.js .map svg .map-rt{animation:hsDraw .8s cubic-bezier(.45,0,.3,1) calc(var(--t) + .55s) both}
  html.js .map-km{animation:hsPop .5s cubic-bezier(.3,1.6,.5,1) calc(var(--t) + 1.15s) both}
  html.js .ch-ok{animation:hsPop .45s cubic-bezier(.3,1.7,.5,1) calc(var(--t) + 1.75s) both}
  html.js .map-ring{animation:hcRing 2.6s ease-out calc(var(--t) + .9s) infinite}
  html.js .map-no{animation:hsPop .55s cubic-bezier(.3,1.7,.5,1) calc(var(--t) + .8s) both}
  html.js .ch-dots{animation:chDots 1.15s linear calc(var(--t) + .35s) both}
  html.js .ch-dots i{animation:chBounce .6s ease-in-out calc(var(--t) + .35s) 3}
  html.js .ch-dots i:nth-child(2){animation-delay:calc(var(--t) + .5s)}
  html.js .ch-dots i:nth-child(3){animation-delay:calc(var(--t) + .65s)}
  html.js .ch-r{animation:hsPop .5s cubic-bezier(.3,1.4,.5,1) calc(var(--t) + 1.45s) both}
  html.js .cal-go::before{animation:calFill .6s var(--ease) calc(var(--t) + .5s) both}
  html.js .cal-go svg{animation:hsPop .45s cubic-bezier(.3,1.6,.5,1) calc(var(--t) + .95s) both}
  html.js .post-like svg{animation:hsPop .5s cubic-bezier(.3,1.8,.5,1) calc(var(--t) + .4s) both}
  html.js .ht{animation:heartUp 1.5s cubic-bezier(.2,.6,.3,1) calc(var(--t) + .5s) both}
  html.js .ht:nth-of-type(2){--kx2:-70%;animation-delay:calc(var(--t) + .68s)}
  html.js .ht:nth-of-type(3){--kx2:80%;animation-delay:calc(var(--t) + .86s)}
  /* the leaders appear once their card has landed (map 1.4 s + .9 s, post 3.15 s + .9 s); never replayed after the intro */
  html.js .hb-lead .hl-l{animation:hsFade .8s ease-out 2.3s both}
  html.js .hb-lead .hl-r{animation:hsFade .8s ease-out 4.05s both}
  .hero:has(.hs-done) .hb-lead *{animation:none!important}


  /* the intro plays once (21-hero.js sets .hs-done when every intro animation has finished). After that an element that comes
     back into the layout (a rotated tablet, a resized window) shows its final state at once instead of replaying its intro
     under the live loop. Only the intro timings go to 0; the loops keep their own timing and never restart. */
  .hs-done :is(.hs-in,.hs-lid,.hs-light,.hs-dark,.db-line,.db-fill,.db-peak,.db-cols i,.hs-route path,.rt-end,.map-pin,.map-rt,.map-km,.ch-ok,.map-no,.ch-dots,.ch-dots i,.ch-r,.cal-go svg,.post-like svg,.ht,.hc-a,.hs-floor,.hs-spill),
  .hs-done .hs-base::after,.hs-done .cal-go::before{animation-delay:0s!important;animation-duration:0s!important}
  html.js .hs-done .hs-glare{animation-delay:0s,8s;animation-duration:0s,13s}

  /* off-screen: the loops pause (the scene's once the intro is done: a one-off intro always finishes, so a visitor who
     scrolls away early comes back to a finished screen, with the counters and the first light in step with it) */
  .hs.hs-done.off *{animation-play-state:paused!important}
}
@keyframes hsIn{from{opacity:0;translate:0 4cqw}}
@keyframes hsLid{from{transform:rotateX(-90deg)}}
@keyframes hsEdge{from{opacity:1}}
@keyframes hsFade{from{opacity:0}}
@keyframes hsPower{0%{opacity:1}35%{opacity:.35}100%{opacity:0}}
@keyframes hsGlare{0%{opacity:0;transform:translateX(-70%)}25%{opacity:1}100%{opacity:0;transform:translateX(70%)}}
@keyframes hsSheen{0%{opacity:0;transform:translateX(-80%)}4%{opacity:.4}14%{opacity:0;transform:translateX(80%)}100%{opacity:0;transform:translateX(80%)}}
@keyframes hsDraw{0%{stroke-dashoffset:1;opacity:0}.5%{opacity:1}100%{stroke-dashoffset:0}}
@keyframes hsShine{0%{opacity:0;transform:translateX(-100%)}3%{opacity:.85}12%{opacity:0;transform:translateX(280%)}100%{opacity:0;transform:translateX(280%)}}
@keyframes hsBar{from{transform:scaleY(0)}}
@keyframes hsPop{from{opacity:0;transform:scale(.3)}}
@keyframes hcIn{from{opacity:0;transform:translateY(2.2cqw) scale(.94)}}
@keyframes hcDrop{from{opacity:0;transform:translateY(-60%)}}
@keyframes hcRing{0%{opacity:.9;transform:scale(.3)}80%,100%{opacity:0;transform:scale(1.25)}}
@keyframes chDots{0%{opacity:0}12%,86%{opacity:1}100%{opacity:0}}
@keyframes chBounce{50%{transform:translateY(-45%)}}
@keyframes calFill{from{transform:scaleX(0)}}
@keyframes heartUp{0%{opacity:0;transform:translate(0,0) scale(.5)}18%{opacity:1}100%{opacity:0;transform:translate(var(--kx2,10%),-260%) scale(1)}}

/* ---------- layouts ---------- */
/* phones, portrait tablets and short landscape screens: a taller scene; map and chat above the laptop, the phone at its lower right corner.
   Cards stay clear of the dashboard tiles. Two boxes: 1.1 (short screens) and .82 (tall phones, the scene area is taller than wide).
   The route reaches the screen from the chat card and crosses the top bar at its right end, so the month follows the brand on the left;
   the step numbers are left out here (in this arrangement 1-3-2 would read out of order), the labels and the route carry the story. */
@media (max-width:699px),(orientation:portrait) and (max-width:1100px),(orientation:landscape) and (max-height:500px){
  .hs-in{--ar:1.1;--side:0px}
  .hs-lap{--lw:78cqw;top:32.5cqw}
  .hs-floor{top:88.9cqw;width:90cqw;height:4.2cqw}
  .hs-spill{top:89.1cqw;width:104cqw;height:7cqw}
  .hs-dais{--dw:150cqw;--dy:88.6cqw}
  /* the headline spans the band here: the line drawings beside it have no room */
  .hb-art,.hb-lead{display:none}
  .hc-web,.hc-cal,.hc-post,.hc-n{display:none}
  .hc-map{left:0;top:0;width:38cqw}
  .hc-chat{left:54cqw;top:0;width:46cqw}
  .hc-ph{left:79cqw;top:53.5cqw;width:16.5cqw}
  .hc-ptab{display:flex}
  /* the notification drops in on the left, over the brand and the month, and only while live */
  .db-toast{right:auto;left:calc(var(--rail,0px) + max(6px,2.2cqw))}
  .db-month{margin-left:0}
  /* the phone stands in front of the chart's right end: one full-width area chart, no bar chart for it to cut */
  .db-bars{display:none}
  .db-row{grid-template-columns:1fr}
  .ch-q{max-width:none}
  .ch-x{display:none}
  .rt-d5,.rt-d3{display:none}.rt-m{display:block}
  .hs-route{--sw:.42}
  .hc-a{border-radius:14px}
  /* bigger story labels; the phone mockup stands over the chart's right end, so the curve (and its peak) ends left of it */
  .hc-l{font-size:15px;font-weight:650}
  .hc-ptab{font-size:14px}
  .db-area .db-plot{margin-right:17cqw}
  .db-g .db-sp{display:none}
  /* the two glass drops move to the band edges beside the scene */
  .lv-pearl{--x:-2.5%!important;--y:66%!important;--s:40px!important}
  .lv-bub{--x:91%!important;--y:54%!important}
  @container (max-aspect-ratio:1/1){
    .hs-in{--ar:.82}
    .hs-lap{--lw:90cqw;top:42cqw}
    .hs-floor{top:106.9cqw;width:98cqw;height:5cqw}
    .hs-spill{top:107.2cqw;width:108cqw;height:9cqw}
    .hs-dais{--dw:172cqw;--dy:106.6cqw}
    .hc-map{width:42cqw}
    .hc-chat{left:52cqw;top:11cqw;width:48cqw}
    .hc-ph{left:76cqw;top:71.5cqw;width:21cqw}
    .rt-m{display:none}.rt-t{display:block}
  }
  /* the smallest boxes: a narrower chat card keeps the brand in the top bar readable; the phone's label (only its number there) goes */
  @container (max-width:300px){.hc-chat{left:57cqw;width:43cqw}.hc-ptab{display:none}}
}
/* portrait tablets: a bigger headline, a thinner route, cards at the laptop's scale */
@media (orientation:portrait) and (min-width:561px) and (max-width:1100px){
  .hero-h{font-size:clamp(40px,7vw,64px)}
  .hs-route{--sw:.3}
  .lv-pearl{--x:-1%!important}
}
@media (orientation:portrait) and (min-width:700px) and (max-width:1100px){.hc-map{width:34cqw}.hc-chat{left:60cqw;width:40cqw}}
/* short landscape screens (phones turned sideways): copy on the left, the scene on the right at full height, no scrolling */
@media (orientation:landscape) and (max-height:500px){
  .hero{min-height:0;display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);grid-template-rows:minmax(0,1fr);align-items:center}
  .hero-in{width:auto;margin:0;padding:0 0 0 var(--gut);align-items:flex-start;text-align:left}
  .hero-h{font-size:clamp(28px,4.8vw,46px);line-height:1.04}
  .hs{align-self:stretch;margin-top:0}
  /* no free band edge beside the copy here: the background layer alone carries the depth */
  .lv{display:none}
}
/* keep the phone mockup clear of the floating AI button (shown from 761px) */
@media (orientation:landscape) and (max-height:500px) and (min-width:761px){
  .hs{padding-right:76px}
  .hs-in{width:min(100cqw - var(--gut),calc(var(--ar)*100cqh))}
}
@media (max-width:560px){
  .hero-in{padding-top:clamp(10px,2vh,24px)}
  .hero-h{font-size:clamp(32px,10.4vw,46px);line-height:1.02}
  .lv-bub{--x:88%!important;--y:calc(var(--hdr) + 236px)!important;--s:34px!important}
  .lv-pearl{--x:-5%!important;--y:calc(var(--hdr) + 290px)!important;--s:40px!important}
}

/* ==== 30-home.css ==== */
/* WhiteWays · home below the hero, shared rules only.
   Each scene has its own file: 31 services (ly-/hs-) · 32 work reel (rl-) · 34 month = „Как работи“, id #how (hmo-) · 35 plan (pw-/hp-).
   2026-10-15: the old 33 how scene merged into 34 (its 4-step strip was removed the same day, owner); copy in _archive/2026-10-15-pre-merge-how/.
   The old „Кино“ scene rules (.hm-sv/-wk/-hw/-mo/-rp/-pl) were removed 2026-09-30; copy in _archive/2026-09-30-home-dead-code/. */

.hm-main svg .sq{transform-box:fill-box;transform-origin:50% 50%}
.hm-main .scn-title{font-size:clamp(38px,4.6vw,64px)}

/* ==== 31-home-services.css ==== */
/* WhiteWays · home #services „assemble“ (services team, HOME-WOW round 2026-09-30, brief docs/briefs/HOME-WOW-BRIEF.md §2).
   Six iso slabs (2D SVG) drop in apart, click together into one lit block, and the block grows into the poster object;
   the report bars grow out of its top. Every size is in design units: --u = one px of the 1240 x 620 desktop stage
   (scales with the stage width), .72px on phones, 1px on tablets.
   Geometry vars on .ly-stage: --lp exploded pitch, --lq shut pitch, --lb shut base (distance of the shut block above the box
   bottom), --lh box height, --sc final scale of the shut block, --spo / --spz the spine's exploded / shut length (share of the
   390u desktop spine), --spb its breath stretch, --hw / --ho halo width / offset.
   Timing: --ts scales the whole sequence (1 on tall desktops, .62 on phones, tablets and short screens, so the click lands
   while the block is still in the middle of the screen for a visitor who keeps scrolling).
   Wrappers: .ly-box (the grow) > .ly-lay (drop-in, .sq) > .ly-z (the click) > .ly-b (the one calm loop, only while .live).
   Base state = the shut, grown block. Before the stage plays, the stack waits as a faint exploded ghost (never an empty field). */

.ly{padding-top:clamp(64px,6vw,88px)}
.ly .scn-head{max-width:1080px;margin-bottom:clamp(12px,1.6vw,22px)}

/* phones + tablets: a compact stack (46u pitch) so the shut block sits right above the legend */
.ly-stage{--u:.72px;--lp:46;--lq:14;--lb:56;--lh:412;--sc:1.2;--spo:.5897;--spz:.1795;--spb:1.4286;--hw:380;--ho:116;
  --ts:.62;--sq-gap:calc(.16s * var(--ts));--tdr:.5s;--tcl:.6s;
  position:relative;isolation:isolate;max-width:1240px;margin-inline:auto;container-type:inline-size;overflow-x:clip}
/* Two quiet floor contours anchor the service stack without another card. */
.ly-stage::before,.ly-stage::after{content:"";position:absolute;z-index:-1;left:50%;top:calc(260 * var(--u));
  width:84%;height:calc(260 * var(--u));translate:-50% 0;border:1px solid rgba(143,160,255,.2);border-radius:50%;
  background:radial-gradient(ellipse,rgba(35,53,255,.13),transparent 68%);pointer-events:none;
  mask-image:linear-gradient(180deg,transparent,#000 45%,#000 80%,transparent)}
.ly-stage::after{top:calc(300 * var(--u));width:62%;height:calc(180 * var(--u));background:none;border-color:rgba(170,192,255,.3)}
@media (max-width:1023px){
  .ly-stage::before{top:calc(210 * var(--u));width:100%;height:calc(170 * var(--u))}
  .ly-stage::after{top:calc(245 * var(--u));width:74%;height:calc(110 * var(--u))}
}

/* ---------- the stack ---------- */
.ly-box{position:relative;width:calc(340 * var(--u));height:calc(var(--lh) * var(--u));margin-inline:auto;
  transform-origin:calc(170 * var(--u)) calc((var(--lh) - var(--lb) - 91 - 2.5 * var(--lq)) * var(--u));transform:scale(var(--sc))}
.ly-lay{position:absolute;left:0;bottom:0;width:100%;
  --yo:calc(var(--i) * var(--lp) * -1 * var(--u));
  --ys:calc((var(--lb) + var(--i) * var(--lq)) * -1 * var(--u));
  transition:translate .6s var(--ease)}
.ly-z{position:relative;transform:translateY(var(--ys));transition:opacity .3s}
.ly-b{position:relative}
.ly-slab{display:block;width:100%;height:auto;overflow:visible}
.ly-face{fill:url(#ly-fg);stroke:#DFE3EE;stroke-width:1;vector-effect:non-scaling-stroke}
.ly-rim{fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;vector-effect:non-scaling-stroke}
/* rim light: the lit (left) side of every slab gets a pale edge along its lower rim, so the strata read as lit edges */
.ly-slab>g[clip-path] rect{stroke:#DDE3FF;stroke-width:1.6;vector-effect:non-scaling-stroke}
.ly-bolt{fill:#fff;stroke:#2335FF;stroke-width:1.5}
/* the Сб bar: the lit one. White top with a cobalt edge, brighter sides, a lavender glow */
.ly-sat{stroke:#2335FF;stroke-width:1.5;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.ly-bar-sat{filter:drop-shadow(0 0 6px rgba(143,160,255,.9))}

/* contact shadow a slab casts on the slab below while the stack is apart; it fades as the gap closes */
.ly-shd{position:absolute;left:calc(35 * var(--u));top:calc((26 + var(--lp)) * var(--u));width:calc(270 * var(--u));height:calc(106 * var(--u));
  border-radius:50%;background:radial-gradient(closest-side,rgba(11,18,51,.42),rgba(11,18,51,.18) 62%,rgba(11,18,51,0));opacity:0;pointer-events:none}

/* spine + seam: drawn for the 572u desktop box, bottom-anchored (preserveAspectRatio xMidYMax slice), so the SVG box is exactly
   the stack box at every size and never reaches above it; paths are shifted by the shut base */
.ly-over{position:absolute;left:0;bottom:0;width:100%;height:calc(var(--lh) * var(--u));overflow:visible;pointer-events:none}
.ly-over path{fill:none;stroke-linecap:round}
.ly-sp0{stroke:#2335FF;stroke-width:5}
.ly-sp1{stroke:#fff;stroke-width:2.2}
.ly-sp-z{transform-box:view-box;transform-origin:170px 562px;transform:translateY(calc(var(--lb) * -1px)) scaleY(var(--spz))}
.ly-sp-b{transform-box:view-box;transform-origin:170px calc(562px - var(--lb) * 1px)}
/* two seam outlines, one per block geometry (a: compact, b: desktop), drawn at the shut block's own coordinates */
.ly-seam{stroke:#fff;stroke-width:2.2;stroke-linejoin:round;opacity:0;filter:drop-shadow(0 0 6px rgba(255,255,255,.9))}
.ly-seam-b{display:none}

.ly-halo{position:absolute;left:calc((170 - var(--hw) / 2) * var(--u));top:calc((var(--lh) - var(--lb) - var(--ho)) * var(--u));
  width:calc(var(--hw) * var(--u));height:calc(190 * var(--u));border-radius:50%;
  background:radial-gradient(closest-side,rgba(150,168,255,.62),rgba(60,84,255,.3) 55%,transparent 100%);pointer-events:none}
/* the floor: a soft bright pool right under the shut block, the light the block stands in (380u on phones so the grown pool
   stays inside 360px; 440u from tablets up) */
.ly-floor{position:absolute;left:calc((170 - var(--fw,380) / 2) * var(--u));width:calc(var(--fw,380) * var(--u));top:calc((var(--lh) - var(--lb) - 40) * var(--u));height:calc(96 * var(--u));
  border-radius:50%;background:radial-gradient(closest-side,rgba(226,231,255,.5),rgba(143,160,255,.2) 45%,rgba(60,84,255,0) 100%);pointer-events:none}
/* cobalt light from the left: the lit sides of the strata catch it (phones: kept inside the box's gutter, so no rect passes the
   viewport's left edge at 360 or 641; desktop reaches further out) */
.ly-lit{position:absolute;left:calc(var(--ll,-25) * var(--u));width:calc(var(--lw,215) * var(--u));top:calc((var(--lh) - var(--lb) - 250) * var(--u));height:calc(240 * var(--u));
  border-radius:50%;background:radial-gradient(closest-side,rgba(46,69,255,.55),rgba(46,69,255,.18) 55%,rgba(46,69,255,0));pointer-events:none}

/* ---------- leaders (desktop only) ---------- */
.ly-leads{display:none;position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.ly-leads path{fill:none;stroke:#C9D2FF;stroke-width:1.5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.ly-la{opacity:0}
.ly-lb{opacity:.75}
.ly-lb>*{transition:opacity .3s}
.ly-sk{transform-box:view-box}

/* ---------- labels: one list; a 2-column legend on phones ---------- */
/* the right margin keeps every pill clear of the fixed back-to-top / assistant column (16px + 58px orb + air) */
/* subscription round (2026-10-01): the labels are outcomes (longer words), so phones use word-sized chips that grow to fill
   each row (no label wraps inside its chip at 360/390); the old 2-column grid is in _archive/2026-10-01-subscription/b1-home/ */
.ly-leg{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:18px calc(78px - var(--gut)) 0 0;padding:0}
.ly-li{flex:1 1 auto;min-width:0}
.ly-pill{display:flex;align-items:center;gap:8px;min-width:0;min-height:48px;height:100%;padding:6px 12px 6px 8px;border-radius:24px;color:#fff;
  font-size:16px;font-weight:600;line-height:1.2;letter-spacing:-.01em;white-space:nowrap;justify-content:center;
  background:linear-gradient(155deg,rgba(143,160,255,.16),rgba(255,255,255,.04));
  box-shadow:inset 0 1px 0 rgba(219,228,255,.26),inset 0 0 0 1px var(--hair),0 8px 20px -16px #000;transition:background-color .3s,box-shadow .3s}
.ly-pill:hover,.ly-pill:focus-visible{background-color:rgba(255,255,255,.17);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
/* the swatch is a tile in the layer's side colour carrying the service icon, so the legend reads without the leaders */
.ly-sw{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:6px;background:var(--c);color:var(--g,#fff);
  box-shadow:0 0 0 1px rgba(255,255,255,.28)}
.ly-sw .ic{width:14px;height:14px;stroke-width:2.2}

/* phones: sequence in pairs in reading order (2026-10-01: Сайт · Магазин · Google · Реклама · AI асистент · Резервации ·
   Видео и визия · Отчет); desktop places each label absolutely by --y / data-i, so the DOM order only changes phones */
.ly-li:nth-child(1) .ly-pill{--s:8}
.ly-li:nth-child(2) .ly-pill,.ly-li:nth-child(3) .ly-pill{--s:8.7}
.ly-li:nth-child(4) .ly-pill,.ly-li:nth-child(5) .ly-pill{--s:9.4}
.ly-li:nth-child(6) .ly-pill,.ly-li:nth-child(7) .ly-pill{--s:10.1}
.ly-li:nth-child(8) .ly-pill{--s:10.8}

/* the foot button rides the stage: it waits for the stage's .play (not its own trigger line) and arrives right after the last
   legend pill (phones: .15s + 7.5 x .16s = 1.35s; Автоматизации lands at 1.22s), so a visitor who keeps scrolling never meets
   an empty band where the button will be */
.ly .scn-foot .sq{--s:7.5}
/* phones: the button sits under the legend's column, so it keeps the same clear right gutter from the fixed buttons */
@media (max-width:640px){.ly .scn-foot{margin-right:calc(78px - var(--gut))}}
html.js .ly:has(.ly-stage:not(.play)) .scn-foot .sq{animation:none!important}

/* ---------- sequence (every delay is scaled by --ts) ---------- */
/* the stage plays on its own trigger (31-home-services.js adds .play; no [data-play], so 12-stage.js leaves it alone): until then
   every .sq inside holds, even though the scene itself already has .play */
html.js .ly-stage:not(.play) .sq{animation:none!important}
@keyframes lyDrop{from{opacity:0;transform:translateY(calc(-60 * var(--u)))}to{opacity:1;transform:none}}
@keyframes lyClick{from{transform:translateY(var(--yo))}to{transform:translateY(var(--ys))}}
@keyframes lyGrow{from{transform:scale(1)}to{transform:scale(var(--sc))}}
@keyframes lySpine{from{transform:translateY(0) scaleY(var(--spo))}to{transform:translateY(calc(var(--lb) * -1px)) scaleY(var(--spz))}}
@keyframes lyShd{from{opacity:1}to{opacity:0}}
@keyframes lyFlash{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
@keyframes lyHalo{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes lyOut{from{opacity:.75}to{opacity:0}}
@keyframes lyRing{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(2.6)}}
/* the one calm loop: the block eases open a little and back */
@keyframes lyBreath{to{transform:translateY(calc(var(--i) * -6 * var(--u)))}}
@keyframes lySpB{to{transform:scaleY(var(--spb))}}
@keyframes lySkew{to{transform:skewY(var(--sk))}}
@keyframes lyGlow{to{opacity:.72}}

/* the ghost: before .play the stack waits exploded at 14% (the slabs keep it until their own drop starts: fill forwards) */
@media (prefers-reduced-motion:no-preference){
  html.js .ly-stage .ly-lay.sq{opacity:.14}
  html.js .ly-stage:not(.play) .ly-z{transform:translateY(var(--yo))}
  html.js .ly-stage:not(.play) .ly-box{transform:none}
  html.js .ly-stage:not(.play) :is(.ly-halo,.ly-floor,.ly-lit){opacity:0}
}
html.js .ly-stage.play .ly-lay.sq{animation-name:lyDrop;animation-duration:var(--tdr);animation-fill-mode:forwards}
html.js .ly-stage.play .ly-z{animation:lyClick var(--tcl) cubic-bezier(.7,0,.2,1.15) calc(var(--d0) + 1.9s * var(--ts)) both}
html.js .ly-stage.play .ly-box{animation:lyGrow var(--tcl) cubic-bezier(.7,0,.2,1.15) calc(var(--d0) + 1.9s * var(--ts)) both}
html.js .ly-stage.play .ly-sp-z{animation:lySpine var(--tcl) cubic-bezier(.7,0,.2,1.15) calc(var(--d0) + 1.9s * var(--ts)) both}
html.js .ly-stage.play .ly-shd{animation:lyShd .5s ease calc(var(--d0) + 1.9s * var(--ts)) both}
html.js .ly-stage.play .ly-over .sq-draw{animation-duration:calc(.8s * var(--ts) + .1s)}
html.js .ly-stage.play .ly-seam{animation:lyFlash .6s ease-out calc(var(--d0) + 2.45s * var(--ts)) both}
html.js .ly-stage.play :is(.ly-floor,.ly-lit){animation:lyHalo 1s var(--ease) calc(var(--d0) + 2.45s * var(--ts)) both}
html.js .ly-stage.play .ly-halo{animation:lyHalo 1s var(--ease) calc(var(--d0) + 2.45s * var(--ts)) both,lyGlow 3.5s ease-in-out calc(var(--d0) + 3.6s * var(--ts)) infinite alternate;
  animation-play-state:running,paused}
html.js .ly-stage.play .ly-bar{animation-delay:calc(var(--d0) + (2.6s + var(--k) * .085s) * var(--ts));animation-duration:.6s}
.ly-ring{opacity:0}
html.js .ly-stage.play .ly-ring{transform-box:fill-box;transform-origin:50% 50%;animation:lyRing 1s ease-out calc(var(--d0) + 1.15s * var(--ts)) both}
/* set A fades as the collapse starts; set B draws from the seam flash on, so the lines hand over inside the click */
html.js .ly-stage.play .ly-la{animation:lyOut .45s ease calc(var(--d0) + 1.85s * var(--ts)) both}
html.js .ly-stage.play .ly-la .sq-draw{animation-duration:.7s}
html.js .ly-stage.play .ly-lb .sq-draw{animation-duration:.6s}

html.js .ly-stage.play .ly-b{animation:lyBreath 3.5s ease-in-out calc(var(--d0) + 3.6s * var(--ts)) infinite alternate both;animation-play-state:paused}
html.js .ly-stage.play .ly-sp-b{animation:lySpB 3.5s ease-in-out calc(var(--d0) + 3.6s * var(--ts)) infinite alternate both;animation-play-state:paused}
html.js .ly-stage.play .ly-sk{animation:lySkew 3.5s ease-in-out calc(var(--d0) + 3.6s * var(--ts)) infinite alternate both;animation-play-state:paused}
html.js .ly.live .ly-stage.play .ly-b,html.js .ly.live .ly-stage.play .ly-sp-b,html.js .ly.live .ly-stage.play .ly-sk{animation-play-state:running}
html.js .ly.live .ly-stage.play .ly-halo{animation-play-state:running}

/* hover / focus on a label (desktop, set by 31-home-services.js): the layers above lift and go see-through,
   the hovered layer rises a little, and every set-B leader but the hovered one dims. The lift is capped so the top slab
   stays clear of the heading: the lift sits inside the 1.55x grown box, so 36u lift + 30u top breath = 102px at 1440, which
   keeps the tip under the heading at 1024-1920 */
.ly-lay.ly-up{translate:0 calc(-36 * var(--u))}
.ly-lay.ly-up .ly-z{opacity:.4}
.ly-lay.ly-hot{translate:0 calc(-8 * var(--u))}
.ly-lay[data-i="5"].ly-hot{translate:0 calc(-18 * var(--u))}
.ly-stage[data-hot] .ly-lb>*{opacity:.35}
.ly-stage[data-hot="0"] .ly-lb>[data-i="0"],.ly-stage[data-hot="1"] .ly-lb>[data-i="1"],.ly-stage[data-hot="2"] .ly-lb>[data-i="2"],
.ly-stage[data-hot="3"] .ly-lb>[data-i="3"],.ly-stage[data-hot="4"] .ly-lb>[data-i="4"],.ly-stage[data-hot="5"] .ly-lb>[data-i="5"]{opacity:1}

/* ---------- tablets: the full-size compact stack; the legend is a centred row of chips (each chip as wide as its words,
   so Сайт and Магазин stay side by side and no chip is stretched), well clear of the FAB column ---------- */
@media (min-width:641px){
  .ly-stage{--u:1px;--hw:460;--ll:-70;--lw:260;--fw:440}
  .ly-leg{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:640px;margin:26px auto 0}
  .ly-li{flex:none}
  .ly-pill{justify-content:flex-start;padding:6px 16px 6px 10px;gap:10px}
}

/* ---------- desktop: the full 78u exploded stack, labels around it, joined by leader lines. The shut block is the poster:
   22u strata pitch, 1.55 scale, centred in the stage ---------- */
@media (min-width:1024px){
  .ly{padding-bottom:clamp(64px,6vw,104px)}
  .ly .scn-head{margin-bottom:clamp(28px,2.8vw,40px)}
  .ly .scn-foot{margin-top:clamp(18px,1.8vw,28px)}
  .ly-stage{--u:calc(100cqw / 1240);--lp:78;--lq:22;--lb:144;--lh:572;--sc:1.55;--ll:-110;--lw:300;--spo:1;--spz:.2821;--spb:1.2727;--hw:560;--ho:150;
    aspect-ratio:1240/620}
  .ly-box{position:absolute;left:calc(450 * var(--u));top:calc(24 * var(--u));margin:0}
  .ly-seam-a{display:none}
  .ly-seam-b{display:inline}
  .ly-leads{display:block}
  .ly-leg{display:block;max-width:none;margin:0}
  .ly-li{position:absolute;top:calc(var(--y) * var(--u) - 24px)}
  .ly-li.l{right:calc(940 * var(--u))}
  .ly-li.r{left:calc(940 * var(--u))}
  .ly-li.c{left:0;right:0;top:calc(552 * var(--u));display:flex;justify-content:center;pointer-events:none}
  .ly-li.c .ly-pill{pointer-events:auto}
  /* glass without backdrop blur: the stage behind is a soft gradient, so a blur adds nothing but a re-blur every frame */
  .ly-pill{height:auto;padding:0 20px 0 12px;border-radius:999px;font-size:17px;white-space:nowrap;background:rgba(255,255,255,.09)}
  .ly-sw{width:26px;height:26px;border-radius:8px}
  .ly-sw .ic{width:16px;height:16px}
  /* Сайт | Магазин: two links drawn as one split pill */
  .ly-li.sb{width:118px}
  .ly-li.sa{right:calc(940 * var(--u) + 118px)}
  .ly-li.sa .ly-pill{border-radius:999px 0 0 999px;padding-right:14px}
  .ly-li.sb .ly-pill{border-radius:0 999px 999px 0;padding-left:16px;box-shadow:inset 0 0 0 1px var(--hair),inset 1px 0 0 rgba(255,255,255,.28)}
  .ly-li.sb .ly-sw{display:none}
  /* labels fade in bottom → top with their leaders; the spine label arrives after the click */
  .ly-li .ly-pill{--s:9}
  .ly-li[data-i="0"] .ly-pill{--s:5}
  .ly-li[data-i="1"] .ly-pill{--s:5.8}
  .ly-li[data-i="2"] .ly-pill{--s:6.6}
  .ly-li[data-i="3"] .ly-pill{--s:7.4}
  .ly-li[data-i="4"] .ly-pill{--s:8.2}
  .ly-li[data-i="sp"] .ly-pill{--s:15.6}
  html.js .ly-stage.play .ly-pill.sq{animation-name:sqFade;animation-duration:.6s}
  /* short desktops (compact timing): the button follows the spine label (.15s + 11 x .16s = 1.9s) */
  .ly .scn-foot .sq{--s:11}
}

/* narrow desktops (1024–1279): „Обаждания | Поръчки“ no longer fits as one split pill left of the stack (the stage clips x),
   so the two pills stack: Обаждания on the slab's leader, Поръчки right under it */
@media (min-width:1024px) and (max-width:1279px){
  .ly-li.sa{right:calc(940 * var(--u))}
  .ly-li.sb{width:auto;top:calc(var(--y) * var(--u) + 32px)}
  .ly-li.sa .ly-pill,.ly-li.sb .ly-pill{border-radius:999px;padding:0 20px 0 12px;box-shadow:inset 0 0 0 1px var(--hair)}
  .ly-li.sb .ly-sw{display:grid}
}

/* tall desktops play the full-length film; short screens keep the compact timing so the click happens in view */
@media (min-width:1024px) and (min-height:821px){
  .ly-stage{--ts:1;--tdr:.8s;--tcl:.7s}
  .ly .scn-foot .sq{--s:17}
}

/* ---------- wide screens: the scene's wrap widens to 1400 and the stage fills it (--u follows the stage width) ---------- */
@media (min-width:1600px){
  .ly>.wrap{width:min(100% - 2 * var(--gut),1400px)}
  .ly-stage{max-width:none}
}

/* ---------- reduced motion: the shut, grown, lit block with its bars; no breathing, no lift ---------- */
@media (prefers-reduced-motion:reduce){
  .ly-box,.ly-z,.ly-b,.ly-sp-z,.ly-sp-b,.ly-sk,.ly-la,.ly-seam,.ly-ring,.ly-halo,.ly-shd,.ly-floor,.ly-lit{animation:none!important}
  html.js .ly-stage .ly-halo{opacity:1}
  .ly-lay{transition:none;translate:none!important}
  .ly-z{transition:none;opacity:1!important}
}

/* ==== 32-home-reel.css ==== */
/* WhiteWays · home #work client reel (2026-10-15, owner: full screen, live sites, no white, nothing behind the section).
   One full-screen card per live client site, stacked: each card pins to the top and the next one slides over it
   (position:sticky, like the GlorySmile product panels). The card IS the site: a real-time recording of the live page fills
   it edge to edge (the desktop clip on wide screens, the phone clip on phones and portrait tablets) and the client's name
   sits on it in big type. On wide screens a phone shows the same site's phone clip.
   32-home-reel.js writes two numbers on each card while the reel is on screen:
     --k  0..1  how far the next card already covers this one (this one sinks: smaller, darker, rounder)
     --e  0..1  how far this card still has to rise before it pins (rounded top, the name and phone trail behind)
   and plays only the clips on screen. Without JS the stack still works with the posters, flat and still.
   The "tall" layout = (max-width:720px), (orientation:portrait) and (max-width:1180px): the same query is in the
   markup's <picture> sources and in the JS, keep all three equal. */

.rl{padding-block:0 clamp(64px,8vw,120px)}
.rl-stack{position:relative;--rl-h:100vh;--rl-dwell:44vh}
@supports (height:100svh){.rl-stack{--rl-h:100svh}}
/* the last card stays pinned for one dwell before the reel scrolls away (in-flow, so the sticky range includes it) */
.rl-stack::after{content:"";display:block;height:var(--rl-dwell)}

.rl-card{position:sticky;top:0;height:var(--rl-h);overflow:hidden;transform-origin:50% 35%;
  transform:scale(calc(1 - var(--k,0) * .075));
  border-radius:max(calc(var(--e,0) * 44px),calc(var(--k,0) * 34px))}
.rl-card + .rl-card{margin-top:var(--rl-dwell)}
.rl-intro + .rl-card{margin-top:14vh}
/* the shade a covered card sinks into */
.rl-card::after{content:"";position:absolute;inset:0;z-index:5;background:#02030F;opacity:calc(var(--k,0) * .78);pointer-events:none}

/* ---- the opening: the heading alone on the stage; the first site slides over it ---- */
.rl-intro{display:grid;place-items:center;padding:var(--hdr) var(--gut) 0;text-align:center;overflow:visible;
  border-radius:0;transform:scale(calc(1 - var(--k,0) * .12));opacity:calc(1 - var(--k,0) * .9)}
.rl-intro::after{display:none}
.hm-main .rl-title{max-width:13ch;font-size:clamp(46px,8.2vw,136px);line-height:.96;letter-spacing:-.055em;font-weight:650;text-wrap:balance}
/* a thin line that runs down: keep scrolling */
.rl-cue{position:absolute;left:50%;bottom:clamp(28px,6vh,64px);width:2px;height:64px;margin-left:-1px;border-radius:2px;overflow:hidden;background:rgba(255,255,255,.14)}
.rl-cue::before{content:"";position:absolute;inset:0;background:linear-gradient(transparent,#fff);transform:translateY(-100%)}
html.js .rl.live .rl-cue::before{animation:rlCue 2.2s cubic-bezier(.6,0,.3,1) infinite}
@keyframes rlCue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ---- a client card ---- */
.rl-p{--c:#2335FF;background:#05081C;color:#fff;box-shadow:0 -40px 90px -30px rgba(0,0,0,.85)}
.rl-m{position:absolute;inset:0}
.rl-m img,.rl-m video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.rl-m video,.rl-ph video{opacity:0;transition:opacity .7s var(--ease)}
.rl-m video.on,.rl-ph video.on{opacity:1}
/* the scrim that carries the name: dark from the bottom-left, tinted with the client's colour, plus a soft top for the header */
.rl-m::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(to top,rgba(3,5,20,.95) 0%,rgba(3,5,20,.8) 22%,rgba(3,5,20,.42) 44%,rgba(3,5,20,0) 64%),
  radial-gradient(64% 62% at 0% 100%,rgba(3,5,20,.6),rgba(3,5,20,0) 72%),
  radial-gradient(80% 70% at 0% 100%,color-mix(in srgb,var(--c) 30%,transparent),transparent 62%),
  linear-gradient(to bottom,rgba(3,5,20,.72),rgba(3,5,20,0) 22%)}

/* the phone's place on wide screens: the name block stops short of it */
.rl-p{--rl-pr:max(132px,calc((100% - 1240px) / 2 + 40px));--rl-pw:clamp(170px,14.5vw,250px)}

.rl-info{position:absolute;z-index:2;left:0;right:0;bottom:clamp(40px,8vh,96px);display:grid;justify-items:start;
  padding-left:max(var(--gut),calc((100% - 1240px) / 2));padding-right:calc(var(--rl-pr) + var(--rl-pw) + 48px);
  transform:translateY(calc(var(--e,0) * 16vh))}
.rl-bd{display:inline-flex;align-items:center;gap:10px;height:36px;padding:0 16px;border-radius:999px;background:#fff;color:var(--ink);
  font:600 16px/1 var(--f);box-shadow:0 10px 26px -12px rgba(0,0,0,.7)}
.rl-bd i{position:relative;width:8px;height:8px;border-radius:50%;background:var(--cobalt)}
.rl-bd i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--cobalt);opacity:0}
html.js .rl-p.on .rl-bd i::after{animation:rlPing 1.8s var(--ease) infinite}
@keyframes rlPing{0%{opacity:.7;transform:scale(.6)}100%{opacity:0;transform:scale(2)}}
.hm-main .rl-n{margin:clamp(14px,2.2vh,24px) 0 0;max-width:100%;font-size:clamp(56px,9vw,168px);line-height:.9;letter-spacing:-.06em;font-weight:750;
  color:#fff;text-shadow:0 10px 50px rgba(0,0,0,.35);text-wrap:balance}
.rl-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:clamp(18px,3vh,32px)}
.rl-k{margin:0;font-size:clamp(18px,1.5vw,22px);line-height:1.3;color:var(--on-2)}
.rl-go{min-height:52px;padding:0 22px;font-size:17px}
.rl-go .ic{width:17px;height:17px;transition:transform .3s var(--ease)}
.rl-go:hover .ic{transform:translate(2px,-2px)}
.rl-p :focus-visible{outline:2px solid #fff;outline-offset:4px}

/* the phone with the same site, wide screens only (kept clear of the fixed back-to-top + AI column on the right) */
.rl-ph{position:absolute;z-index:3;right:var(--rl-pr);bottom:clamp(40px,8vh,96px);
  width:var(--rl-pw);padding:7px;border-radius:36px;background:#0A0E2C;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 50px 90px -30px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.4);
  transform:translateY(calc(var(--e,0) * 30vh)) rotate(calc(var(--e,0) * 4deg))}
.rl-phs{position:relative;aspect-ratio:300/650;border-radius:29px;overflow:hidden;background:#05081C}
.rl-phs img,.rl-phs video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}

/* tall screens: the phone clip IS the card, so the separate phone goes */
@media (max-width:1100px),(max-width:720px),(orientation:portrait) and (max-width:1180px){.rl-ph{display:none}.rl-info{padding-right:max(var(--gut),calc((100% - 1240px) / 2))}}
@media (max-width:720px),(orientation:portrait) and (max-width:1180px){
  .rl-stack{--rl-dwell:34vh}
  .rl-m::after{background:
    linear-gradient(to top,rgba(3,5,20,.96) 0%,rgba(3,5,20,.82) 26%,rgba(3,5,20,.4) 44%,rgba(3,5,20,0) 60%),
    radial-gradient(90% 50% at 0% 100%,color-mix(in srgb,var(--c) 34%,transparent),transparent 70%),
    linear-gradient(to bottom,rgba(3,5,20,.6),rgba(3,5,20,0) 16%)}
  .rl-info{bottom:calc(28px + env(safe-area-inset-bottom));padding-right:84px}
  .hm-main .rl-n{font-size:clamp(48px,15.5vw,104px)}
  .rl-row{flex-direction:column;align-items:flex-start;gap:16px}
  .rl-k{font-size:18px}
}
/* phones: the name and the link stay clear of the fixed AI button in the bottom-right corner */
@media (max-width:720px){.rl-info{padding-right:calc(var(--gut) + 64px)}}

@media (prefers-reduced-motion:reduce){
  .rl-card,.rl-intro,.rl-info,.rl-ph{transform:none}
  .rl-card{border-radius:0}
  .rl-card::after{opacity:0}
  .rl-intro{opacity:1}
  .rl-cue::before,.rl-bd i::after{animation:none!important}
  .rl-m video,.rl-ph video{transition:none}
}

/* ==== 34-home-month.css ==== */
/* WhiteWays · home #month (ocean), HOME-WOW round 2026-09-30 (owner: month team). Prefix hmo-.
   A month of „your business“ (generic: no named example, no „Образец“ tag, owner 2026-09-30) arrives on a phone as toasts
   (P1); a light carries the newest one along a thin road into one poster number (P7). Numbers only from
   src/partials/report.html: 88 (онлайн заявки here), 142 обаждания и съобщения, Сб 22, bars 6·8·9·12·19·22·12.
   No yellow in this scene. One loop (the conveyor, 34-home-month.js), gated by the stage's .live.
   Two triggers: the phone rises with the stage's .play (12-stage.js); the cascade, the bridge and the number wait for .go, which
   34-home-month.js sets once the phone's bottom (where the toasts land) is on screen. */

.hmo{overflow-x:clip} /* the phone halo may reach past a 360px screen: clip it, never scroll */
.hmo .scn-head{margin-bottom:clamp(40px,4.6vw,72px)}
@media (min-width:901px){
  .hmo .scn-head{max-width:1180px;text-align:left}
  .hmo .scn-title{max-width:760px}
}
.hmo-stage{position:relative;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,5.6vw,80px);align-items:center;max-width:1180px;margin-inline:auto}
.hmo-defs{position:absolute;width:0;height:0;overflow:hidden}
/* every .sq in the stage runs on its own time: --t from the stage's .play (plus --d0) */
html.js .hmo-stage.play .sq{animation-delay:calc(var(--d0,0s) + var(--t,0s))}
/* the cascade and the number hold until .go (the landing zone is in view), so nobody misses them below the fold */
html.js .hmo-stage:not(.go) .hmo-feed .sq,html.js .hmo-stage:not(.go) .hmo-num .sq{animation:none!important}
/* the number block is its own [data-play] group: on desktop it enters with the cascade (--ho 0), on phones it sits under the
   phone, so its beat starts when the visitor reaches it (--ho pulls the handover time forward) */
.hmo-num{--ho:0s}
html.js .hmo-stage .hmo-num.play .sq{animation-duration:.7s;animation-delay:calc(var(--d0,0s) + var(--t,0s) - var(--ho))}

/* ---------- the phone ---------- */
.hmo-dev{position:relative;isolation:isolate;justify-self:center}
.hmo-halo{position:absolute;left:-40%;right:-40%;top:-12%;bottom:-12%;z-index:-1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(35,80,255,.8),rgba(21,96,240,.3) 52%,transparent 100%)}
/* a soft pool of light on the floor under the phone */
.hmo-floor{position:absolute;left:-30%;right:-30%;bottom:-78px;height:130px;z-index:-1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(201,210,255,.42),rgba(95,116,255,.2) 45%,transparent 100%)}
/* the trigger line for .go (read by 34-home-month.js): on desktop 40% up the phone, so the number beside it starts as soon as
   it is in view; on phones (max-width:900px) just above the phone's bottom edge */
.hmo-cue{position:absolute;left:50%;bottom:40%;width:1px;height:1px;pointer-events:none;visibility:hidden}
/* desktop: the phone takes its height from the viewport, so its bottom (where the toasts land) stays on a 720px laptop */
.hmo-ph{--phh:clamp(500px,calc(100svh - 300px),610px);position:relative;height:var(--phh);width:clamp(284px,calc(var(--phh) * .49),300px);
  padding:10px;border-radius:46px;background:#0B1233;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 0 0 3px #0B1233,inset 0 0 0 4px rgba(255,255,255,.06),
    0 2px 4px rgba(0,0,0,.3),0 60px 110px -40px rgba(0,2,24,.9),0 0 90px -10px rgba(21,96,240,.45);
  --tilt:perspective(1400px) rotateY(10deg);transform:var(--tilt);transform-origin:50% 50%}
html.js .hmo-stage.play .hmo-ph.sq{animation-name:hmoPh;animation-duration:1.1s}
@keyframes hmoPh{from{opacity:0;transform:var(--tilt) translateY(40px) scale(.94)}to{opacity:1;transform:var(--tilt)}}
/* the handover: as the light reaches the number, the phone steps back for a moment, then comes back live (one shot) */
html.js .hmo-stage.go .hmo-dev{animation:hmoDip 1.2s var(--ease);animation-delay:calc(var(--d0,0s) + 1.15s)}
@keyframes hmoDip{0%{transform:none}25%,55%{transform:scale(.985)}100%{transform:none}}
/* E-03 (WCAG 2.2.2): pause/play for the conveyor, centred under the phone. Quiet glass like .btn-glass, never yellow; 44px target.
   34-home-month.js removes [hidden] once the loop is ready; reduced motion keeps it away (the scene is static there). */
.hmo-pp{position:absolute;left:50%;top:100%;z-index:2;display:grid;place-items:center;width:44px;height:44px;margin:14px 0 0 -22px;padding:0;border:0;
  border-radius:50%;background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer;transition:background-color .25s}
.hmo-pp:hover{background:rgba(255,255,255,.18)}
.hmo-pp[hidden]{display:none}
.hmo-pp .ic{width:18px;height:18px;stroke-width:2.4}
.hmo-i-play{display:none;fill:currentColor}
.hmo-pp[aria-pressed="true"] .hmo-i-pause{display:none}
.hmo-pp[aria-pressed="true"] .hmo-i-play{display:block}
@media (prefers-reduced-motion:no-preference){.hmo-pp:not([hidden]){animation:sqFade .6s var(--ease) both}}
@media (prefers-reduced-motion:reduce){.hmo-pp{display:none!important}}
/* side keys */
.hmo-ph::before,.hmo-ph::after{content:"";position:absolute;width:3px;border-radius:2px;background:#1A2350}
.hmo-ph::before{left:-3px;top:130px;height:56px;box-shadow:0 74px 0 #1A2350}
.hmo-ph::after{right:-3px;top:170px;height:88px}
.hmo-scr{position:relative;display:flex;flex-direction:column;height:100%;border-radius:36px;overflow:hidden;
  background:radial-gradient(120% 60% at 80% 0%,rgba(143,160,255,.35),transparent 60%),linear-gradient(180deg,#2335FF 0%,#1626C8 45%,#0E178F 100%)}
/* glass glare across the screen (static) */
.hmo-scr::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(118deg,rgba(255,255,255,.13) 0 30%,rgba(255,255,255,0) 30.2%)}
.hmo-isl{position:absolute;left:50%;top:10px;width:92px;height:27px;margin-left:-46px;border-radius:20px;background:#03061C}
/* lock-screen header: a generic shop mark and „Вашият бизнес“, centred (fills the top of the screen) */
.hmo-top{display:flex;flex-direction:column;align-items:center;gap:10px;padding:50px 14px 16px;text-align:center}
.hmo-mk{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:50%;background:#fff;color:var(--cobalt);
  box-shadow:0 0 0 5px rgba(255,255,255,.1),0 10px 24px -8px rgba(2,6,40,.8)}
.hmo-mk .ic{width:24px;height:24px;stroke-width:1.9}
.hmo-top p{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 8px;min-width:0;color:#fff}
.hmo-top b{font-size:17px;font-weight:600;line-height:1.2;letter-spacing:-.01em}

/* the cascade: bottom-anchored, newest at the bottom, older ones leave through a soft top fade */
/* the feed starts 16px under the header; a card whose top would sit above that line fades out whole (.gone, set by
   34-home-month.js), so no half card hangs under the name. The short mask only softens a card on its way out. */
.hmo-feed{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;padding:16px 10px 14px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16px);mask-image:linear-gradient(180deg,transparent 0,#000 16px)}
.hmo-list{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.hmo-t{transform-origin:50% 100%}
.hmo-c{position:relative;display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:18px;background:#fff;color:var(--ink);
  box-shadow:0 10px 22px -14px rgba(2,6,40,.6);transition:opacity .45s var(--ease)}
.hmo-t.gone .hmo-c{opacity:0}
/* older cards stay white and step back: a faint cobalt tint under softer content. The newest card is the one live card:
   full contrast and a crisp cobalt-tinted lift (opacity-only layers, so the swaps stay on the compositor) */
.hmo-c::before,.hmo-c::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .6s var(--ease)}
.hmo-c::before{background:#EEF0FF}
.hmo-c::after{box-shadow:0 20px 34px -14px rgba(6,12,110,.9),0 0 0 1.5px #fff,0 0 28px -4px rgba(143,160,255,.55)}
.hmo-c>*{position:relative;transition:opacity .6s var(--ease)}
.hmo-t:last-child .hmo-c::after{opacity:1}
.hmo-c>i{position:relative;display:grid;place-items:center;flex:none;align-self:flex-start;width:40px;height:40px;border-radius:12px;background:#ECEEFF;color:var(--cobalt)}
.hmo-c>i>.ic{width:22px;height:22px;stroke-width:1.9}
/* the source mark (Maps pin, site globe, Google search, phone app) on the icon tile's corner */
.hmo-src{position:absolute;right:-5px;bottom:-5px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--cobalt);box-shadow:0 0 0 2px #fff}
.hmo-src svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
/* title on top; source line and clock time under it; the answered chip on its own row */
.hmo-c p{flex:1;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:8px;align-items:baseline;min-width:0}
.hmo-c b{grid-column:1/-1;display:block;font-size:16px;font-weight:600;line-height:1.25;letter-spacing:-.01em;color:var(--ink)}
.hmo-c p>span{display:block;margin-top:1px;font-size:14px;line-height:1.3;color:#525A78}
.hmo-c time{font-size:13px;line-height:1.3;color:#7A82A3;font-variant-numeric:tabular-nums}
.hmo-c .hmo-stars{display:flex;gap:2px;align-self:center;margin-top:3px}
.hmo-stars .ic{width:14px;height:14px;fill:var(--cobalt);stroke:var(--cobalt);stroke-width:1.2}
.hmo-c .hmo-ok{grid-column:1/-1;justify-self:start;display:inline-flex;align-items:center;gap:5px;margin-top:7px;padding:3px 10px 3px 7px;border-radius:99px;
  background:var(--cobalt);color:#fff;font-size:13px;font-weight:600;line-height:1.3}
.hmo-ok .ic{width:14px;height:14px;stroke-width:2.6}
/* a toast lands: rises 24px with a tiny scale settle; the older ones step back */
html.js .hmo-stage.play .hmo-t.sq{animation-name:hmoIn;animation-duration:.6s;animation-timing-function:cubic-bezier(.2,.8,.25,1.12)}
@keyframes hmoIn{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}
html.js .hmo-stage.go .hmo-old .hmo-c>*,html.js .hmo-stage.go .hmo-old .hmo-c::before{animation:hmoDim .5s var(--ease) forwards;animation-delay:calc(var(--d0,0s) + var(--t,0s) + .2s)}
html.js .hmo-stage.go .hmo-old .hmo-c::before{animation-name:hmoTint}
@keyframes hmoDim{to{opacity:.66}}
@keyframes hmoTint{to{opacity:1}}
/* the tape (JS, .abs): every card sits on the feed's bottom line and is shifted with `translate` (34-home-month.js), so the
   intro climb and the conveyor move layers only; the newest card is .now, the recycled pool cards wait hidden (.hmo-wait) */
.hmo-list.abs{position:relative;display:block;height:0}
.hmo-list.abs>.hmo-t{position:absolute;left:0;right:0;bottom:0}
.hmo-list.abs>.hmo-t.hmo-wait{visibility:hidden}
.hmo-list.abs .hmo-t:not(.now) .hmo-c::after{opacity:0}
.hmo-list.abs .hmo-t.now .hmo-c::after{opacity:1}
.hmo-t.re .hmo-c,.hmo-t.re .hmo-c>*,.hmo-t.re .hmo-c::before,.hmo-t.re .hmo-c::after{transition:none}
/* conveyor (JS): cards that are no longer the newest step back; a new card is solid (.45s) before its slide settles (.8s) */
.hmo-list.run .hmo-t:not(.now) .hmo-c>*{opacity:.66}
.hmo-list.run .hmo-t:not(.now) .hmo-c::before{opacity:1}

/* ---------- the bridge (desktop only): a thin white road from the newest toast to the number, one light runs it once ---------- */
.hmo-link{position:absolute;left:0;top:0;z-index:0;overflow:visible;pointer-events:none;display:none}
.hmo-road{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:.5}
.hmo-link.done .hmo-road{stroke-dashoffset:0;opacity:0;transition:opacity 1.2s var(--ease)}
.hmo-dot{position:absolute;left:0;top:0;z-index:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;pointer-events:none;opacity:0;
  box-shadow:0 0 0 4px rgba(255,255,255,.18),0 0 22px 6px rgba(143,160,255,.85)}
.hmo-stage.bridge .hmo-link{display:block}

/* ---------- the poster number ---------- */
.hmo-num{position:relative;z-index:1;display:grid;justify-items:start;min-width:0;padding:clamp(24px,3vw,44px);border-radius:32px;
  background:linear-gradient(145deg,rgba(117,146,255,.13),rgba(26,49,107,.08) 65%);
  box-shadow:inset 0 1px 0 rgba(211,227,255,.3),inset 0 0 0 1px rgba(154,186,255,.15),0 28px 70px -48px #000}
.hmo-num::before{content:"";position:absolute;top:0;left:12%;width:46%;height:1px;
  background:linear-gradient(90deg,transparent,#CCDFFF,transparent);pointer-events:none}
.hmo-hd{display:flex;align-items:flex-end;flex-wrap:wrap;gap:8px 30px}
.hmo-bw{position:relative;isolation:isolate;display:block}
/* the handover beat: one soft light blooms behind the number as the light lands (one shot, no hard edge) */
.hmo-burst{position:absolute;left:50%;top:50%;z-index:-1;width:130%;aspect-ratio:1;margin:-65% 0 0 -65%;border-radius:50%;opacity:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(143,160,255,.4),rgba(143,160,255,.14) 50%,rgba(143,160,255,.04) 78%,transparent 100%)}
html.js .hmo-stage .hmo-num.play .hmo-burst.sq{animation-name:hmoBurst;animation-duration:1.3s;animation-timing-function:cubic-bezier(.15,.7,.3,1)}
@keyframes hmoBurst{0%{opacity:0;transform:scale(.35)}20%{opacity:1}100%{opacity:0;transform:scale(1.35)}}
.hmo-big{display:block;min-width:2ch;font-size:clamp(150px,18vw,280px);font-weight:700;line-height:.85;letter-spacing:-.06em;color:#fff;
  font-variant-numeric:tabular-nums;text-shadow:0 4px 30px rgba(143,160,255,.22)}
.hmo-cap{padding-bottom:12px}
.hmo-cap b{display:block;font-size:24px;font-weight:600;line-height:1.2;letter-spacing:-.015em;color:#fff}
.hmo-cap span{display:block;margin-top:6px;font-size:18px;line-height:1.3;color:var(--on-3)}

.hmo-week{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:14px;width:min(480px,100%);margin-top:44px}
.hmo-week::before{content:"";position:absolute;z-index:-1;inset:0 0 25px;border-bottom:1px solid rgba(169,195,255,.18);
  background:repeating-linear-gradient(to top,transparent 0 35px,rgba(169,195,255,.09) 35px 36px);pointer-events:none}
.hmo-week span{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:150px}
.hmo-week i{display:block;width:100%;height:calc(var(--h) * 110px);border-radius:6px;background:linear-gradient(180deg,#8FA0FF,#5F74FF);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 1px 0 0 rgba(255,255,255,.18),0 5px 14px -8px rgba(81,112,255,.7)}
.hmo-week small{margin-top:10px;font-size:15px;line-height:1;color:var(--on-2)}
.hmo-week .top i{background:linear-gradient(180deg,#fff,#DDE3FF);box-shadow:0 0 22px rgba(255,255,255,.55)}
.hmo-week em{margin-bottom:8px;font-style:normal;font-size:16px;font-weight:600;line-height:1;color:#fff}
.hmo-glow{position:absolute;left:calc(50% - 70px);bottom:0;z-index:-1;width:140px;height:170px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.3),rgba(143,160,255,.12) 60%,transparent 100%)}

.hmo-2nd{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 16px;width:min(480px,100%);margin-top:30px;padding-top:24px;border-top:1px solid var(--hair)}
.hmo-2nd b{font-size:44px;font-weight:600;line-height:1;letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums}
.hmo-2nd span{font-size:18px;line-height:1.3;color:var(--on-2)}

/* short laptop screens (720–820px tall): tighter head and a shorter number column, so the phone bottom stays in view */
@media (min-width:901px) and (max-height:820px){
  .hmo .scn-head{margin-bottom:28px}
  .hmo-big{font-size:clamp(160px,17vw,230px)}
  .hmo-week{margin-top:30px}
  .hmo-week span{height:124px}
  .hmo-week i{height:calc(var(--h) * 90px)}
  .hmo-2nd{margin-top:22px;padding-top:18px}
}

/* ---------- phones: the phone is the visual, then the number under it ---------- */
@media (max-width:900px){
  .hmo-stage{grid-template-columns:minmax(0,1fr);gap:76px;justify-items:center} /* 76px: room for the pause button under the phone */
  .hmo-ph{width:280px;height:514px;--tilt:rotateY(0deg)}
  html.js .hmo-stage.play .hmo-dev{animation:none}
  .hmo-num{--ho:.5s;justify-items:center;width:100%;max-width:560px;padding:28px 20px;text-align:center;border-radius:26px}
  .hmo-hd{flex-direction:column;align-items:center;gap:14px}
  .hmo-big{font-size:clamp(120px,38vw,170px)}
  .hmo-cap{padding-bottom:0}
  .hmo-week{width:100%;max-width:480px;gap:10px;margin-top:36px}
  .hmo-week span{height:128px}
  .hmo-week i{height:calc(var(--h) * 90px)}
  /* 142 on top, its label under it, centred: nothing reaches the back-to-top / assistant column on the right */
  .hmo-2nd{flex-direction:column;align-items:center;gap:8px;width:100%;max-width:480px}
  .hmo-floor{bottom:-64px;height:110px}
  .hmo-cue{bottom:18px}
}
/* small phones: a tighter header keeps room for the toasts */
@media (max-width:390px){
  .hmo-top{gap:8px;padding:44px 12px 10px}
  .hmo-mk{width:40px;height:40px}
  .hmo-top p{flex-direction:column;gap:6px}
  .hmo-cap b{font-size:22px}
  .hmo-2nd span{font-size:17px}
}
@media (max-width:380px){
  .hmo-ph{width:264px;padding:9px;border-radius:42px}
  .hmo-scr{border-radius:33px}
  .hmo-feed{padding:0 8px 12px}
  .hmo-c{padding:11px 12px;gap:10px}
  .hmo-c>i{width:36px;height:36px}
  .hmo-week{gap:8px}
}

/* reduced motion: the static final state. Four whole toasts, the newest one live, the older ones stepped back, no mask */
@media (prefers-reduced-motion:reduce){
  html.js .hmo-stage .hmo-dev,html.js .hmo-stage .hmo-old .hmo-c>*,html.js .hmo-stage .hmo-old .hmo-c::before{animation:none!important}
  html.js .hmo-stage .hmo-ph.sq{transform:var(--tilt)!important}
  .hmo-list .hmo-t:first-child{display:none}
  .hmo-feed{-webkit-mask-image:none;mask-image:none}
  .hmo-old .hmo-c>*{opacity:.66}
  .hmo-old .hmo-c::before{opacity:1}
  .hmo-burst,.hmo-link,.hmo-dot{display:none}
}
/* a tall desktop phone (viewport 900px+) has room for all five whole toasts */
@media (prefers-reduced-motion:reduce) and (min-width:901px) and (min-height:900px){.hmo-list .hmo-t:first-child{display:list-item}}

/* ==== 35-home-plan.css ==== */
/* WhiteWays · home #plan (violet), HOME-WOW round 2026-09-30 (owner: plan team). Brief: docs/briefs/HOME-WOW-BRIEF.md §5.
   P11 kinetic mega title („Един план.“ wipes up, „Сайтът е включен.“ slides in with the scroll and gets a drawn check),
   P7 price bar (up-front money: Обичайно 900–2 000 € vs При нас 200 €) as the poster of the scene: thick bars drawn to scale on
   one 0–2 000 € axis, each value riding on its own bar. The range is wiped in from the axis (no stretching), shimmers once, then
   dims as the white 200 € nub lands with its glowing cap and the „сайтът е включен“ pin. Then the 3 plans as lit cards, each topped
   by a big layer stack (2 / 4 / 6 layers) on one shared baseline, so the row reads as one growing series. Prefix hp-.
   One loop: the Растеж halo breathes while .hp.live. Yellow: only the Растеж CTA. No backgrounds of our own, no data-fx.
   Round 2 (2026-09-30): --our is exactly 10% (honest scale), --on-3 only at 16px+, no scaleX stretch, 3 columns only ≥1181px,
   tablet = Растеж full width + Старт/Пълен in 2 columns, content kept clear of the fixed FAB column at 901–1300px.
   Pricing round (2026-09-30): 35 / 120 / 230, the title reads „От 35 €/мес. Сайтът е включен.“, plan buttons → checkout.html. */

.hp{overflow-x:clip;padding-bottom:clamp(56px,5.2vw,76px)}

/* ---------- 1 · the mega title ---------- */
.hp .hp-head{max-width:none;margin-bottom:clamp(40px,4.6vw,68px)}
.hm-main .hp-title{font-size:clamp(52px,8.4vw,128px);line-height:.96;letter-spacing:-.045em;font-weight:700;text-align:center;text-wrap:wrap}
.hp-l1{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.hp-l1i{display:block}
.hp-em{display:block;width:fit-content;max-width:100%;margin-inline:auto;padding-bottom:.06em}
.hp-nw{white-space:nowrap}
.hp-chk{display:inline-block;width:.6em;height:.6em;margin-left:.1em;vertical-align:-.02em;overflow:visible}
.hp-chk path{fill:none;stroke:url(#hp-chk-g);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}

@keyframes hpUp{from{opacity:1;transform:translateY(110%)}to{opacity:1;transform:none}}
/* a fixed-length slide (never past the viewport edge at 1440, where 22% of the em would be ≈ 240px) */
@keyframes hpSlide{from{opacity:0;transform:translateX(min(22%,7vw))}to{opacity:1;transform:none}}
/* play-once: line 1 out of its mask, the em from the right, the check after it, all within about 1 s of the title entering.
   (Owner 2026-10-15: „много бавно“. The em used to glide with the scroll over half a screen; now it plays on time.) */
html.js .play .hp-l1i.sq{animation-name:hpUp;animation-duration:.7s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
html.js .play .hp-em.sq{animation-name:hpSlide;animation-duration:.55s;animation-timing-function:cubic-bezier(.2,.8,.2,1);animation-delay:calc(var(--d0,0s) + .22s)}
html.js .play .hp-chk .sq.sq-draw{animation-duration:.4s;animation-delay:calc(var(--d0,0s) + .7s)}

/* ---------- 2 · the price bar: the argument of the scene ---------- */
/* --th bar thickness · --vf value size · --lab label column · --our the 200 € bar = exactly 10% of the 0–2 000 € track
   --ex how far the wipe boxes reach past the bars, so the glow is never cut by the wipe's clip */
.hp-bar{--th:clamp(40px,3.4vw,48px);--vf:clamp(40px,3.5vw,52px);--lab:150px;--cg:28px;--ex:26px;
  max-width:1140px;margin:0 auto clamp(128px,11vw,168px);padding:clamp(28px,3vw,42px) clamp(28px,3.6vw,56px) clamp(24px,2.6vw,34px);border-radius:32px;
  background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.03)),rgba(10,12,48,.34);
  box-shadow:inset 0 1px 0 rgba(218,224,255,.27),inset 0 0 0 1px rgba(166,179,255,.12),0 24px 70px -48px #000}
.hp-cap{font:600 16px/1.2 var(--f);letter-spacing:.08em;text-transform:uppercase;color:var(--on-3)}
.hp-rows{display:grid;margin:0}
.hp-row{display:grid;grid-template-columns:var(--lab) minmax(0,1fr);column-gap:var(--cg);align-items:end}
/* room above each bar: the range's value over its end, the pin over the white nub */
.hp-row-u{padding-top:calc(var(--vf) + 30px)}
.hp-row-w{padding-top:clamp(92px,7.4vw,108px)}
.hp-row dt{font-size:24px;font-weight:600;line-height:var(--th);color:#fff;white-space:nowrap}
.hp-row dd{margin:0}
/* the track: a faint rail from 0 to 2 000 €; the bars start square at the axis; ticks at 0 / 1 000 / 2 000 only outside it */
.hp-trk{--our:10%;position:relative;height:var(--th);border-radius:6px 999px 999px 6px;
  background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.hp-trk::before{content:"";position:absolute;inset:-10px 0;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.3) 0 2px,transparent 2px calc(50% - .5px),rgba(255,255,255,.22) calc(50% - .5px) calc(50% + .5px),transparent calc(50% + .5px) calc(100% - 1px),rgba(255,255,255,.22) calc(100% - 1px));
  -webkit-mask:linear-gradient(#000 0 7px,transparent 7px calc(100% - 7px),#000 calc(100% - 7px));mask:linear-gradient(#000 0 7px,transparent 7px calc(100% - 7px),#000 calc(100% - 7px))}
/* the range's wipe: the outer clips, the inner holds the bars still. Outer and inner have the same width and move by the same
   percentage in opposite directions, so the bars are revealed left to right and never stretch (transform only).
   The nub's box (.hp-ow) does not move: it clips at the axis while the pill slides out of it. */
.hp-u,.hp-ow{position:absolute;top:calc(var(--ex) * -1);bottom:calc(var(--ex) * -1);left:0;display:block;overflow:hidden}
.hp-u{right:calc(var(--ex) * -1)}
.hp-ow{width:calc(var(--our) + var(--ex))}
.hp-ui{position:absolute;inset:0;display:block}
.hp-ghost,.hp-rng{position:absolute;top:var(--ex);bottom:var(--ex);display:block}
/* 0–900 €: hatched ghost; 900–2 000 €: the lavender range, square where it meets the ghost, round at 2 000 € */
.hp-ghost{left:0;width:calc((100% - var(--ex)) * .45);border-radius:6px 0 0 6px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.13) 0 5px,transparent 5px 12px)}
.hp-rng{left:calc((100% - var(--ex)) * .45);right:var(--ex);overflow:hidden;border-radius:0 999px 999px 0;opacity:.5;
  background:linear-gradient(90deg,#8494FF,#A9B6FF);box-shadow:0 0 30px -6px rgba(143,160,255,.7),inset 0 1px 0 rgba(255,255,255,.35)}
.hp-rng::after{content:"";position:absolute;inset:0 auto 0 0;width:40%;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent)}
/* При нас: a real bar from the axis to 200 € (10% of the track, to scale), with a glowing cap and the pin above its tip */
/* .hp-our fills its wipe box (same width, so the wipe is locked); the pill itself is its ::before */
.hp-our{position:absolute;inset:0;display:block}
.hp-our::before{content:"";position:absolute;top:var(--ex);bottom:var(--ex);left:0;right:var(--ex);border-radius:6px 999px 999px 6px;
  background:linear-gradient(90deg,#DCE2FF,#fff);box-shadow:0 0 20px rgba(255,255,255,.55),0 0 46px rgba(201,210,255,.4)}
.hp-tip{--tp:calc(var(--th) * 2.4);position:absolute;top:50%;left:calc(var(--our) - var(--th) * .22);width:var(--tp);height:var(--tp);margin:calc(var(--tp) / -2) 0 0 calc(var(--tp) / -2);
  border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,#fff 0 14%,rgba(236,240,255,.7) 28%,rgba(190,202,255,.3) 54%,rgba(169,184,255,.1) 76%,transparent)}
/* the pin: 1.2× the old chip, its stem lands on the white nub */
.hp-site{position:absolute;bottom:calc(100% + 20px);left:calc(var(--our) - 36px);display:flex;align-items:center;gap:10px;height:48px;padding:0 18px 0 13px;
  border-radius:14px;background:#fff;color:var(--ink);font-size:19px;font-weight:600;line-height:1;white-space:nowrap;transform-origin:27px 100%;
  box-shadow:0 14px 30px -10px rgba(0,0,0,.6),0 0 34px -6px rgba(255,255,255,.5)}
.hp-site::after{content:"";position:absolute;left:26px;top:100%;width:2px;height:20px;border-radius:2px;background:linear-gradient(#fff,rgba(255,255,255,.55))}
.hp-site .ic{width:26px;height:26px;stroke-width:1.9;color:var(--cobalt)}
/* the values ride on their bars: the gap between them is the argument */
.hp-val{position:absolute;font-size:var(--vf);font-weight:600;line-height:1;letter-spacing:-.03em;color:#fff;white-space:nowrap}
.hp-row-u .hp-val{right:0;bottom:calc(100% + 18px);color:var(--on-2)}
.hp-row-w .hp-val{top:50%;left:calc(var(--our) + var(--th) * .95);translate:0 -50%;display:flex;align-items:baseline;gap:12px}
.hp-row-w .hp-val b{font-size:calc(var(--vf) * 1.18);font-weight:700;letter-spacing:-.04em}
.hp-val span{font-size:20px;font-weight:500;letter-spacing:0;color:var(--on-2)}
.hp-axis{position:relative;height:22px;margin:18px 0 0 calc(var(--lab) + var(--cg))}
.hp-axis span{position:absolute;top:0;left:calc(var(--x) * 100%);transform:translateX(calc(var(--x) * -100%));font-size:16px;line-height:22px;color:var(--on-3);white-space:nowrap}

/* sequence (bar group, --d0 .2s, own --sq-gap .07s since 2026-10-15, about twice as fast as before): .29 the range wipes in
   (.65s) · .73 its value · .79 one sheen · .97 the white nub wipes in · 1.08 the range dims · 1.15 the pin · done ≈ 1.7 s */
.hp-bar{--sq-gap:.07s}
html.js .hp-bar.play .sq{animation-duration:.6s}
@keyframes hpWo{from{opacity:1;transform:translateX(-100%)}to{opacity:1;transform:none}}
@keyframes hpWi{from{transform:translateX(100%)}to{transform:none}}
/* the nub: its clip box stays put with its left edge on the axis; the pill slides out of the axis, overshoots 2–3px, settles */
@keyframes hpShow{from{opacity:1}to{opacity:1}}
@keyframes hpNub{0%{transform:translateX(-100%)}72%{transform:translateX(2.5%)}100%{transform:none}}
@keyframes hpSheen{0%{opacity:0;transform:translateX(-100%)}25%{opacity:1}100%{opacity:0;transform:translateX(250%)}}
@keyframes hpDim{from{opacity:1}to{opacity:.5}}
@media (prefers-reduced-motion:no-preference){
  html.js .play .hp-u.sq{animation-name:hpWo;animation-duration:.65s;animation-timing-function:cubic-bezier(.55,0,.2,1)}
  html.js .play .hp-ow.sq{animation-name:hpShow;animation-duration:.4s}
  html.js .play .hp-ui{animation:hpWi .65s cubic-bezier(.55,0,.2,1) both;animation-delay:calc(var(--d0,0s) + var(--s,0) * var(--sq-gap))}
  html.js .play .hp-our{animation:hpNub .45s cubic-bezier(.3,.7,.3,1) both;animation-delay:calc(var(--d0,0s) + var(--s,0) * var(--sq-gap))}
  html.js [data-play]:not(.play) .hp-ui,html.js [data-play]:not(.play) .hp-our{animation:none}
  /* one-shot event: the range shimmers once after it has grown, then dims as the white bar lands (the contrast is the moment) */
  html.js .play .hp-rng{animation:hpDim .4s cubic-bezier(.4,0,.2,1) both;animation-delay:calc(var(--d0,0s) + 12.5 * var(--sq-gap))}
  html.js .play .hp-rng::after{animation:hpSheen .5s cubic-bezier(.4,0,.2,1) both;animation-delay:calc(var(--d0,0s) + 8.4 * var(--sq-gap))}
}

/* ---------- 3 · the plans ---------- */
.hp-grid{--sk:clamp(128px,11vw,156px);position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2vw,28px);
  align-items:stretch;max-width:1140px;margin-inline:auto}
.hp-st{grid-area:1/1}.hp-gr{grid-area:1/2}.hp-fu{grid-area:1/3}
.hp-halo{grid-area:1/2;align-self:stretch;position:relative;z-index:0;pointer-events:none}
.hp-halo i{position:absolute;inset:-26% -46%;display:block;border-radius:50%;opacity:.8;
  background:radial-gradient(closest-side,rgba(255,255,255,.2),rgba(169,74,232,.42) 36%,rgba(120,70,240,.16) 64%,transparent 100%)}
.hp-c{position:relative;z-index:1;display:flex;flex-direction:column;padding:clamp(28px,2.6vw,38px);border-radius:28px}
.hp-c.gcard{background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.03)),rgba(10,12,48,.38)}
.hp-c.hot{translate:0 -18px;padding-block:clamp(40px,3.4vw,52px);color:var(--ink);
  box-shadow:0 2px 6px rgba(0,0,0,.08),0 40px 90px -40px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.6),0 0 80px -20px rgba(190,140,255,.55)}
.hp-c h3{font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
/* the one-liner under the name: kept clear of the layer stack on the right */
.hp-sum{margin-top:8px;max-width:calc(100% - var(--sk) * .62);font-size:17px;line-height:1.35;color:var(--on-2);text-wrap:balance}
.hp-c.hot .hp-sum{color:#4F587D}
.hp-p{display:flex;align-items:baseline;gap:8px;margin-top:18px}
.hp-p b{font-size:clamp(56px,5vw,72px);font-weight:600;line-height:1;letter-spacing:-.04em;font-variant-numeric:proportional-nums}
.hp-p span{font-size:18px;font-weight:500;color:var(--on-2);white-space:nowrap}
/* the layer stack is the hero of each card: big, on the card's top-right, rising out of its top edge. Same box on every card,
   so the bottom layers share one baseline (Растеж's box is lowered by its 18px lift) and 2 → 4 → 6 reads as one series. */
.hp-stk{position:absolute;top:calc(var(--sk) * -.72);right:clamp(16px,1.6vw,24px);z-index:2;display:block;width:var(--sk);height:auto;overflow:visible;pointer-events:none;
  filter:drop-shadow(0 16px 20px rgba(5,6,40,.5))}
.hp-c.hot .hp-stk{top:calc(var(--sk) * -.72 + 18px)}
.hp-stk .hp-f{fill:#fff;stroke:rgba(11,18,51,.1);stroke-width:.8;stroke-linejoin:round}
.hp-stk g{transition:translate .6s var(--ease)}
.hp-c .hp-act{margin-top:10px;font-size:16px;color:var(--on-3)}
.hp-c ul{display:grid;gap:13px;list-style:none;margin:24px 0 30px;padding:24px 0 0;border-top:1px solid var(--hair)}
.hp-c li{display:flex;align-items:flex-start;gap:12px;font-size:17px;line-height:1.4;color:var(--on-2)}
.hp-c li .ic{flex:none;width:20px;height:20px;margin-top:1px;stroke-width:2.3;color:#B4BEFF}
.hp-c .btn{margin-top:auto}
.hp-c.hot .hp-p span{color:#4F587D}
.hp-c.hot .hp-act{color:#5E678C}
.hp-c.hot ul{border-top-color:var(--line)}
.hp-c.hot li{color:var(--ink)}
.hp-c.hot li .ic{color:var(--cobalt)}
.hp-c.hot .hp-stk{filter:drop-shadow(0 16px 18px rgba(35,53,255,.28))}
/* the tag sits on the card's top edge, on the left (the stack owns the right) */
.hp-c .hp-tag{position:absolute;top:0;left:clamp(28px,2.6vw,38px);z-index:3;transform:translateY(-50%);padding:11px 18px;border-radius:999px;background:var(--cobalt);color:#fff;
  font-size:15px;font-weight:600;line-height:1;letter-spacing:0;white-space:nowrap;box-shadow:0 10px 24px -8px rgba(35,53,255,.8),inset 0 1px 0 rgba(255,255,255,.25)}
.hp-foot{margin-top:clamp(36px,3.4vw,48px)}
/* pricing round 2026-09-30: the plan buttons go to the checkout; the yearly gift and the free audit (the lighter path) live here as text */
.hp .hp-alt{flex-basis:100%;margin-top:6px;font-size:17px;line-height:1.5;color:var(--on-2);text-align:center;text-wrap:balance}
.hp-alt a{display:inline-block;padding-block:8px;margin-block:-8px;color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.45);transition:text-decoration-color .2s}
.hp-alt a:hover{text-decoration-color:#fff}

/* the one loop: the Растеж halo breathes while the scene is on screen */
@keyframes hpBreath{from{opacity:.6;transform:scale(.96)}to{opacity:1;transform:scale(1.04)}}
@media (prefers-reduced-motion:no-preference){
  .hp-halo i{animation:hpBreath 6s ease-in-out infinite alternate;animation-play-state:paused}
  .hp.live .hp-halo i{animation-play-state:running}
}

/* hover: the stack opens up layer by layer (the P12 pointer light on the cards lives in 36-home-light.*); fine pointers only */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .hp-c:hover .hp-stk g:nth-child(2){translate:0 -2.5px}
  .hp-c:hover .hp-stk g:nth-child(3){translate:0 -5px}
  .hp-c:hover .hp-stk g:nth-child(4){translate:0 -7.5px}
  .hp-c:hover .hp-stk g:nth-child(5){translate:0 -10px}
  .hp-c:hover .hp-stk g:nth-child(6){translate:0 -12.5px}
}

/* ---------- 901–1300: keep the bar and the plans clear of the fixed back-to-top / AI column (right 24px + 62px orb) ---------- */
@media (min-width:901px) and (max-width:1300px){
  .hp-bar,.hp-grid{max-width:min(1140px,100vw - 200px)}
}
@media (max-width:1100px){.hp-bar{--lab:124px;--cg:24px}}

/* ---------- ≤1180: Растеж full width on top, Старт and Пълен as compact glass rows under it (2 columns, 1 on phones) ---------- */
@media (max-width:1180px){
  .hp-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .hp-gr,.hp-halo{grid-area:1/1/2/3}.hp-st{grid-area:2/1}.hp-fu{grid-area:2/2}
  .hp-halo i{inset:-18% -8% 10%}
  .hp-c.hot{translate:none;margin-bottom:4px}
  .hp-c.gcard{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"h b" "p b" "s s";column-gap:14px;align-items:center;padding:20px 20px 20px 24px;border-radius:24px}
  .hp-c.gcard .hp-hd,.hp-c.gcard .hp-nm{display:contents}
  .hp-c.gcard .hp-stk,.hp-c.gcard .hp-act,.hp-c.gcard ul{display:none}
  .hp-c.gcard h3{grid-area:h;font-size:20px}
  .hp-c.gcard .hp-p{grid-area:p;margin-top:4px;gap:6px}
  .hp-c.gcard .hp-p b{font-size:32px;letter-spacing:-.03em}
  .hp-c.gcard .hp-p span{font-size:16px}
  .hp-c.hot .hp-sum{display:none}
  .hp-c.gcard .hp-sum{display:block;max-width:none;grid-area:s;margin-top:12px;padding-top:12px;border-top:1px solid var(--hair);font-size:16px;line-height:1.4;color:var(--on-2)}
  .hp-c.gcard .btn{grid-area:b;margin:0;width:auto;min-height:48px;padding:0 18px;font-size:16px}
}
/* tablet: the white Растеж card in two columns: name, price, stack and the yellow CTA left; the list right */
@media (min-width:761px) and (max-width:1180px){
  .hp-grid{--sk:clamp(112px,14vw,160px)}
  .hp-c.hot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto 1fr;grid-template-areas:"hd ul" "act ul" "btn ul";
    column-gap:clamp(32px,5vw,56px);padding:44px clamp(28px,4vw,44px) 36px}
  .hp-c.hot .hp-hd{grid-area:hd;position:relative}
  .hp-c.hot .hp-stk{top:auto;bottom:-6px;right:0}
  .hp-c.hot .hp-p b{font-size:clamp(56px,6.4vw,68px)}
  .hp-c.hot .hp-act{grid-area:act}
  .hp-c.hot ul{grid-area:ul;align-content:center;margin:0;padding:4px 0 4px clamp(28px,4vw,48px);border-top:0;border-left:1px solid var(--line)}
  .hp-c.hot .btn{grid-area:btn;align-self:end;margin-top:28px}
}

/* ---------- ≤900: the bar stacks each row: label on top, the bar under it, full width ---------- */
@media (max-width:900px){
  .hp-bar{--lab:0px;--cg:0px;--th:28px;--vf:30px;--ex:20px;padding:24px 22px 20px;margin-bottom:clamp(96px,14vw,120px);border-radius:26px}
  .hp-row{grid-template-columns:minmax(0,1fr);row-gap:14px;align-items:start}
  .hp-row-u{padding-top:22px}
  .hp-row-w{padding-top:34px;row-gap:82px}
  .hp-row dt{font-size:20px;line-height:1.2}
  .hp-row-u .hp-val{bottom:calc(100% + 13px)}
  .hp-row-w .hp-val{left:calc(var(--our) + 26px);gap:8px}
  .hp-row-w .hp-val b{font-size:34px}
  .hp-val span{font-size:16px}
  .hp-tip{--tp:66px}
  .hp-site{bottom:calc(100% + 16px);left:calc(var(--our) - 30px);height:42px;gap:8px;padding:0 15px 0 11px;border-radius:12px;font-size:17px;transform-origin:22px 100%}
  .hp-site::after{left:21px;height:16px}
  .hp-site .ic{width:23px;height:23px}
  .hp-axis{margin:16px 0 0}
  .hp-foot{margin-top:32px}
}
/* ---------- phones: one column; Растеж is the full card, Старт and Пълен compact rows ---------- */
@media (max-width:760px){
  .hp-bar{padding:22px 20px 18px;border-radius:24px}
  .hp-grid{grid-template-columns:1fr;gap:12px}
  .hp-gr,.hp-halo{grid-area:1/1}.hp-st{grid-area:2/1}.hp-fu{grid-area:3/1}
  .hp-halo i{inset:-12% -30% 30%}
  .hp-c.hot{margin-top:30px;padding:36px 24px 26px}
  /* keep the Растеж stack clear of the fixed back-to-top / assistant buttons on the right edge */
  .hp-c.hot .hp-stk{top:-40px;right:64px;width:92px}
  .hp-c.hot .hp-p{margin-top:12px}
  .hp-c.hot ul{gap:10px;margin:18px 0 22px;padding-top:16px}
  .hp-c li{font-size:16px}
  .hp-c.gcard{padding:18px 18px 18px 22px}
  .hp-c.gcard h3{font-size:19px}
  .hp-c.gcard .hp-p b{font-size:30px}
  .hp-c.gcard .btn{padding:0 16px;font-size:15px}
  .hp-c .hp-tag{left:22px}
}
@media (max-width:380px){
  .hp-bar{--vf:27px;padding-inline:18px}
  .hp-row dt{font-size:18px}
  .hp-row-w .hp-val{left:calc(var(--our) + 22px)}
  .hp-row-w .hp-val b{font-size:30px}
  .hp-c.gcard .btn{padding:0 13px}
  .hp-c.gcard{column-gap:10px;padding-left:18px}
}

/* phones: back-to-top steps away while a plan button sits under it (68-totop.js sets html.tt-away, CSS in 68-totop.css) */

/* reduced motion: the final picture, still (04-stage.css already drops every .sq animation) */
@media (prefers-reduced-motion:reduce){
  .hp-halo i{animation:none;opacity:.8}
  html.js .hp-rng,html.js .play .hp-rng{animation:none;opacity:.5}
  .hp-rng::after{display:none}
}

/* ==== 36-home-light.css ==== */
/* WhiteWays · home P12 pointer light (integration round, 2026-09-30; idea: raw/orch/X5-home-inspiration.md P12).
   A soft radial light follows the pointer across the lit surfaces below the hero (.card = white, .gcard = glass), and the
   card's edge catches it. 36-home-light.js sets --lx/--ly (px) on the card under the pointer. Desktop only (hover + fine
   pointer), never with reduced motion. Subtle on purpose: at most 9% white inside, a thin 1px rim, no colour, no yellow.
   Without the JS nothing shows (the light only appears on :hover and sits at the top centre until the first move). */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  /* zero specificity: a card that already has its own position keeps it */
  :where(.hm-main .scene) :where(.card,.gcard){position:relative}
  .hm-main .scene :is(.card,.gcard)::after,
  .hm-main .scene :is(.card,.gcard)::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    opacity:0;transition:opacity .5s var(--ease)}
  /* the pool of light */
  .hm-main .scene .gcard::after{background:radial-gradient(300px circle at var(--lx,50%) var(--ly,0%),rgba(255,255,255,.09),transparent 70%)}
  .hm-main .scene .card::after{background:radial-gradient(300px circle at var(--lx,50%) var(--ly,0%),rgba(35,53,255,.06),transparent 70%)}
  /* the rim: the same light, masked to a 1px ring on the card's edge */
  .hm-main .scene :is(.card,.gcard)::before{padding:1px;
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
  .hm-main .scene .gcard::before{background:radial-gradient(220px circle at var(--lx,50%) var(--ly,0%),rgba(255,255,255,.5),transparent 72%)}
  .hm-main .scene .card::before{background:radial-gradient(220px circle at var(--lx,50%) var(--ly,0%),rgba(35,53,255,.34),transparent 72%)}
  .hm-main .scene :is(.card,.gcard):hover::after,
  .hm-main .scene :is(.card,.gcard):hover::before{opacity:1}
}