/* genframe: «Жидкий свет» restyle of the homepage sections (from the design thread, 13 Nov). Pure CSS, no HTML or JS changes.
   Loaded after site.css and howto.css on the homepage. The big genframe wordmark and the model-name strip are NOT restyled (Emil).
   13 Nov 20:20, Emil: no rainbow gradients and no hover effects. Plain colours only; the background glows and the liquid hero/final stay. */
:root{
  --lq-glass:rgba(255,255,255,.045); --lq-glass-2:rgba(255,255,255,.08); --lq-line:rgba(255,255,255,.1);
  --lq-glow:.26; --lq-pri:#fff; --lq-pri-t:#000; --lq-ring:rgba(255,255,255,.22);
}
html[data-theme=light]{
  --lq-glass:rgba(255,255,255,.6); --lq-glass-2:rgba(255,255,255,.85); --lq-line:rgba(0,0,0,.08);
  --lq-glow:.34; --lq-pri:#1d1d1f; --lq-pri-t:#fff; --lq-ring:rgba(0,0,0,.18);
}
main .sec{position:relative;isolation:isolate;padding-block:clamp(72px,8.5vw,150px)}
main .sec.t0{padding-top:0}
main .sec-h{margin-bottom:clamp(26px,3.2vw,52px)}
main .sec-h h2,main .grid2 h2{font-size:clamp(32px,4.5vw,80px);line-height:1;letter-spacing:-.045em;text-wrap:balance}
main .eyebrow{display:inline-flex;align-items:center;gap:8px;letter-spacing:.1em}
main .eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.7;flex:none}
@media (min-width:1700px){main .wrap,.ftr .wrap{max-width:1560px}}
main .sec::before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:-30% 0;opacity:var(--lq-glow)}
main .sec:nth-of-type(2)::before{background:radial-gradient(40% 24% at 90% 38%,#7a4dff,transparent 100%),radial-gradient(34% 22% at 4% 64%,#00b3ff,transparent 100%)}
main .sec.made::before{background:radial-gradient(42% 26% at 2% 42%,#ff3d9a,transparent 100%),radial-gradient(36% 22% at 98% 62%,#ff9a3d,transparent 100%)}
main .sec:nth-of-type(4)::before{background:radial-gradient(42% 24% at 96% 36%,#19d3a2,transparent 100%),radial-gradient(38% 22% at 4% 66%,#3d7bff,transparent 100%)}
main .sec:nth-of-type(5)::before{background:radial-gradient(46% 26% at 76% 52%,#8a5cff,transparent 100%)}
main .sec:nth-of-type(6)::before{background:radial-gradient(40% 24% at 2% 44%,#ff7a3d,transparent 100%),radial-gradient(36% 22% at 99% 60%,#ff3d9a,transparent 100%)}
main .sec:nth-of-type(7)::before{background:radial-gradient(42% 26% at 94% 48%,#00b3ff,transparent 100%)}
main .sec:nth-of-type(8)::before{background:radial-gradient(40% 24% at 20% 44%,#7a4dff,transparent 100%),radial-gradient(40% 24% at 80% 56%,#ff3d9a,transparent 100%)}
main .tool,main .made-t,main .pcard,main .acard{box-shadow:inset 0 0 0 1px var(--lq-line)}
main .tool,main .acard{border-radius:32px}
main .made-t{border-radius:28px}
main .pcard{border-radius:24px}
/* no hover effects on the cards: no ring, no zoom, no lift */
main .tool:hover,main .made-t:hover,main .pcard:hover,main .acard:hover,main .tool:hover img,main .pcard:hover img,main .acard:hover img{transform:none}
main .tool .go{background:rgba(12,12,18,.5);border:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
main .tool:first-child h3{font-size:clamp(28px,3.6cqi,56px);letter-spacing:-.04em}
main .acard h3{letter-spacing:-.03em}
@media (min-width:981px){.tools{grid-template-rows:clamp(260px,19vw,360px) clamp(260px,19vw,360px)}}
main .link{color:var(--fg)}
main .sec .tabs .chip.on{background:var(--lq-pri);color:var(--lq-pri-t);border-color:var(--lq-pri)}
main .sec .btn.pri:not(.ht-go),.final .btn.pri{background:var(--lq-pri);color:var(--lq-pri-t);border-radius:999px;box-shadow:0 0 0 1px var(--lq-ring),0 0 34px rgba(160,140,255,.38),0 0 70px rgba(60,200,255,.18)}
main .sec .btn.ghost{border-color:var(--lq-line);background:var(--lq-glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:999px}
main .sec .btn.ghost:hover{border-color:var(--lq-line)}
main .ht-stage{border-radius:32px;box-shadow:inset 0 0 0 1px var(--lq-line),0 40px 120px rgba(90,70,255,.18)}
main .howto.on .ht-step.cur{background:var(--lq-glass-2);box-shadow:inset 0 0 0 1px var(--lq-line)}
main .ht-step h3{letter-spacing:-.02em}
main .lessons{border:0;gap:10px}
main .lesson{border:1px solid var(--lq-line);border-radius:24px;padding:12px 16px 12px 12px;background:var(--lq-glass);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);}
main .lesson img{border-radius:16px}
main .grid2{align-items:center;gap:clamp(28px,5vw,88px)}
main .gp{--gp-acc:var(--fg);--gp-card:var(--lq-glass);--gp-line:var(--lq-line)}
main .gp-toggle{background:var(--lq-glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
main .gp-plan{border-radius:28px;padding:28px 24px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:linear-gradient(165deg,var(--lq-glass-2),var(--lq-glass))}
main .gp-plan.pop{border-color:var(--lq-ring);box-shadow:none}
main .gp-badge{background:var(--lq-pri);color:var(--lq-pri-t)}
main .gp-price b{font-size:clamp(40px,3.2cqi,54px);letter-spacing:-.045em}
main .gp-cr{background:var(--lq-glass-2);border-radius:14px}
main .gp-feat li.y .gi{background:var(--lq-glass-2)}
main .gp-dots i.on{background:var(--fg)}
main .gp a.link,main .gp-note a{color:var(--fg)}
.final>img{display:none}
.final{background:#000 url(../img/lq-d.webp) center/cover no-repeat}
html[data-theme=light] .final{background:#fff url(../img/lq-l.webp) center/cover no-repeat}
.final::after{background:linear-gradient(180deg,var(--bg) 0%,transparent 34%,transparent 62%,var(--bg) 100%)}
.final .wrap{padding-block:clamp(110px,15vw,260px)}
.final h2{font-size:clamp(42px,8.6cqi,150px);letter-spacing:-.05em;line-height:.96;text-wrap:balance;text-shadow:0 2px 50px rgba(0,0,0,.45)}
html[data-theme=light] .final h2{text-shadow:none}
.final .eyebrow{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--fg);opacity:.8}
.final .btn.pri{min-height:58px;padding:0 30px;font-size:17px}
@media (max-width:980px){
  main .tool,main .acard{border-radius:26px}
  main .made-t,main .pcard{border-radius:20px}
  main .sec::before{inset:-18% 0}
}
@media (max-width:600px){
  .final{background-image:url(../img/lq-d-m.webp)}
  html[data-theme=light] .final{background-image:url(../img/lq-l-m.webp)}
  main .sec{padding-block:64px}
  main .sec.t0{padding-top:0}
  main .gp-plan{padding:24px 20px}
  main .lesson{padding:10px 14px 10px 10px;border-radius:20px}
}
/* closing block moves like the hero (same shader on a canvas); the still stays underneath as the fallback */
.final>canvas.lq{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.2s ease}
.final>canvas.lq.on{opacity:1}
/* «Сделано в genframe» with five clips: bottle | samurai, griffin, street | surfer; on phones the griffin sits full width under the samurai */
.made .made-grid{grid-template-columns:.75fr .533fr .5625fr;grid-template-rows:9fr 9fr 12fr;aspect-ratio:1.86/1}
.made .made-bottle{grid-column:1;grid-row:1 / 4}.made .made-samurai-2{grid-column:2;grid-row:1}.made .made-griffin{grid-column:2;grid-row:2}.made .made-street{grid-column:2;grid-row:3}.made .made-surfer{grid-column:3;grid-row:1 / 4}
@container site (max-width:760px){
 .made .made-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;aspect-ratio:auto}
 .made .made-street{order:1;grid-column:1 / -1;grid-row:auto;aspect-ratio:4 / 3}
 .made .made-samurai-2{order:2;grid-column:1 / -1;grid-row:auto;aspect-ratio:16 / 9}
 .made .made-griffin{order:3;grid-column:1 / -1;grid-row:auto;aspect-ratio:16 / 9}
 .made .made-bottle{order:4;grid-column:auto;grid-row:auto;aspect-ratio:3 / 4}
 .made .made-surfer{order:5;grid-column:auto;grid-row:auto;aspect-ratio:3 / 4}
}