/* Kруголет v10 — transparent interactive composition in the existing hero. */
.hero-visual .krugolet-preview {
  position:relative;
  isolation:isolate;
  width:min(100%, clamp(315px, 36vw, 510px));
  aspect-ratio:1310 / 1200;
  flex:0 1 auto;
}
.hero-visual .krugolet-preview img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-height:none;
  object-fit:contain;
  mix-blend-mode:normal;
  mask-image:none;
  -webkit-mask-image:none;
  animation:none;
  filter:none;
}
.krugolet-hotspot {
  position:absolute;
  z-index:2;
  left:49.8%;
  top:54.2%;
  width:27.5%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border:1px solid transparent;
  border-radius:50%;
  background:transparent;
  color:transparent;
  cursor:pointer;
  touch-action:manipulation;
  transition:box-shadow .2s ease,background .2s ease,border-color .2s ease;
}
.krugolet-hotspot:hover,
.krugolet-hotspot:focus-visible {
  border-color:rgba(190,255,237,.95);
  outline:2px solid rgba(92,255,218,.7);
  outline-offset:2px;
  box-shadow:0 0 22px 4px rgba(38,242,201,.45),0 0 58px rgba(84,255,227,.38),inset 0 0 22px rgba(64,231,209,.18);
}
.krugolet-hotspot:active {background:rgba(97,232,210,.13)}
.krugolet-fallback{color:var(--mint);text-decoration:underline}
.krugolet-dialog {
  position:fixed;
  inset:0;
  width:100vw;
  max-width:none;
  height:100dvh;
  max-height:none;
  padding:0;
  margin:0;
  border:0;
  color:#e8fffb;
  background:#081725;
  overflow:hidden;
}
.krugolet-dialog::backdrop{background:rgba(0,7,14,.94)}
.krugolet-dialog-head{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:8px 16px;
  min-height:58px;
  padding:9px clamp(10px,2vw,24px);
  background:#071925;
  border-bottom:1px solid rgba(83,223,181,.6);
  font-family:Arial, sans-serif;
}
.krugolet-dialog-head strong{font-size:clamp(12px,1.1vw,17px);letter-spacing:.03em}
.krugolet-controls{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.krugolet-controls button,.krugolet-controls a {
  display:inline-flex;align-items:center;justify-content:center;
  min-height:36px;
  padding:5px 10px;
  border:1px solid #367b76;
  border-radius:7px;
  background:#113443;
  color:#ebfffa;
  font-family:Arial,sans-serif !important;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
}
.krugolet-controls button:hover,.krugolet-controls a:hover{background:#225c60}
.krugolet-controls output{min-width:44px;text-align:center;font:12px Arial,sans-serif}
.krugolet-controls .krugolet-close{border-color:#7bd2c2;background:#0c5149}
.krugolet-viewport {
  width:100%;
  height:calc(100dvh - var(--krugolet-toolbar, 58px));
  overflow:auto;
  overscroll-behavior:contain;
  display:flex;
  justify-content:flex-start;
  align-items:flex-start;
  background:linear-gradient(180deg,#fafafa,#e9f3f1);
}
.krugolet-stage {position:relative;flex:none;margin:0 auto;overflow:visible}
.krugolet-stage iframe {
  display:block;position:absolute;inset:0;
  border:0;background:#fafafa;
  transform-origin:top left;
}
body.krugolet-open{overflow:hidden}
@media(min-width:1000px){
  .hero{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}
  .hero-visual .krugolet-preview{max-height:min(43dvh,395px);width:min(100%,490px)}
}
@media(min-width:1000px) and (max-height:770px){
  .hero-visual .krugolet-preview{max-height:min(39dvh,308px);width:min(100%,395px)}
}
@media(min-width:601px) and (max-width:999px){
  .hero-visual .krugolet-preview{width:min(100%,350px)}
}
@media(max-width:600px){
  .hero-visual .krugolet-preview{width:min(88vw,350px)}
  .krugolet-dialog-head{padding:8px}
  .krugolet-dialog-head strong{font-size:12px}
  .krugolet-controls{width:100%}
  .krugolet-controls button,.krugolet-controls a{min-height:40px;padding:5px 8px;font-size:11px}
}
@media(prefers-reduced-motion:reduce){
  .krugolet-hotspot{transition:none}
}