/* OptiBull v7: index.html, projekti.html and kalkulator.html.
   Loaded after style.css on these three pages only. Colours come from the style.css tokens, never hard-coded.
   Contents: 1 hero, 2 laptop and example site, 3 project gallery and device frames, 4 flyer (dog park),
   5 homepage details, 6 projekti.html, 7 kalkulator.html, 8 motion start states. */

/* ==========================================================================
   1. Hero
   ========================================================================== */
.v7-hero { padding-block: clamp(1.25rem, .6rem + 2.4vw, 3rem) clamp(3.5rem, 2rem + 5vw, 6.5rem); }
.v7-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "visual" "body" "trust";
  row-gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.v7-hero__head { grid-area: head; container-type: inline-size; }
.v7-hero__head .eyebrow { margin-bottom: clamp(.9rem, .6rem + 1vw, 1.5rem); }
.v7-hero__title { font-size: min(var(--fs-h1), 13.2cqi); line-height: .94; letter-spacing: -.036em; max-width: none; text-wrap: balance; }
.v7-hero__title .display__second { margin-top: .08em; font-size: 1.06em; letter-spacing: -.02em; }
.v7-mark { position: relative; display: inline-block; white-space: nowrap; }
.v7-mark__line { position: absolute; left: -2%; right: -4%; bottom: -.12em; width: 106%; height: .28em; overflow: visible; pointer-events: none; }
.v7-mark__line path { fill: none; stroke: var(--red); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.v7-hero__body { grid-area: body; }
.v7-hero__body .lead { max-width: 34rem; }
.v7-hero__body .lead strong { font-weight: 650; }
.v7-hero__body .actions { margin-top: clamp(1.4rem, 1rem + 1vw, 2rem); }
.v7-hero__note { margin-top: .9rem; color: var(--fg-2); font-size: var(--fs-small); }
.v7-hero__visual { grid-area: visual; position: relative; margin: 0; min-width: 0; }

/* Trust row: three facts with hairline separators */
ul.v7-trust { grid-area: trust; display: flex; flex-wrap: wrap; gap: .65rem 0; margin: 0; padding: 1.1rem 0 0; border-top: 1px solid var(--line); list-style: none; }
.v7-trust li { display: inline-flex; align-items: center; gap: .55rem; padding-right: 1.1rem; margin-right: 1.1rem; border-right: 1px solid var(--line); font: 650 .9875rem/1.25 var(--f-sans); color: var(--fg); }
.v7-trust li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.v7-trust svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--red-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

@media (min-width: 1100px) {
  .v7-hero__grid {
    grid-template-columns: minmax(0, 5.3fr) minmax(0, 6.7fr);
    grid-template-areas: "head head" "body visual" "trust visual";
    grid-template-rows: auto auto 1fr;
    column-gap: clamp(2rem, 1rem + 3vw, 4rem);
    row-gap: 0;
  }
  .v7-hero__head { margin-bottom: clamp(1.75rem, 1rem + 2vw, 2.75rem); }
  .v7-hero__title { font-size: min(6.9rem, 7.15cqi); }
  .v7-hero__title .display__second { display: block; }
  .v7-hero__body { align-self: start; padding-top: .4rem; }
  ul.v7-trust { align-self: start; margin-top: 1.6rem; display: grid; gap: .55rem; padding-top: 1.25rem; }
  .v7-trust li { border-right: 0; margin: 0; padding: 0; }
}
@media (max-width: 420px) {
  ul.v7-trust { display: grid; gap: .6rem; }
  .v7-trust li { border-right: 0; margin: 0; padding: 0; }
}

/* The navy stage behind the laptop or the video. Bleeds to the right edge of the window on desktop. */
.v7-stage {
  --bleed: 0px;
  position: relative;
  isolation: isolate;
  padding: clamp(2.6rem, 1.6rem + 3vw, 3.6rem) clamp(.9rem, .2rem + 3vw, 2.75rem) clamp(1.4rem, 1rem + 2vw, 2.4rem);
  border-radius: clamp(18px, 1rem + 1vw, 30px);
  background: var(--ink);
}
.v7-stage::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: radial-gradient(circle, var(--dark-line) 1.1px, transparent 1.6px) 0 0 / 15px 15px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 62% 40%, var(--ink) 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 70% at 62% 40%, var(--ink) 20%, transparent 78%);
}
.v7-stage__tag { position: absolute; top: clamp(.8rem, .5rem + 1vw, 1.25rem); left: clamp(.9rem, .2rem + 3vw, 2.75rem); z-index: 3; }
@media (min-width: 1100px) {
  .v7-stage {
    --bleed: max(0px, (100vw - var(--wrap)) / 2);
    margin-right: calc(-1 * max(var(--gutter), var(--bleed)));
    padding-right: calc(max(var(--gutter), var(--bleed)) + clamp(1rem, 2vw, 2rem));
    border-top-right-radius: 0; border-bottom-right-radius: 0;
  }
}

/* Video from the motion team. Shown only when JS confirms it plays (see index.js). */
.v7-video { position: relative; margin: 0; }
.v7-video video { display: block; width: 100%; height: auto; aspect-ratio: var(--video-ratio, 16 / 10); object-fit: cover; border-radius: clamp(10px, .5rem + .6vw, 16px); background: var(--ink-2); }
.v7-video__toggle {
  position: absolute; left: .85rem; bottom: .85rem; z-index: 2;
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid color-mix(in srgb, var(--paper) 35%, transparent); border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 72%, transparent); color: var(--paper);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: .8; transition: opacity .2s, background-color .2s;
}
.v7-video__toggle:hover, .v7-video__toggle:focus-visible { opacity: 1; background: var(--ink); }
.v7-video__toggle:focus-visible { outline: 3px solid var(--paper); outline-offset: 2px; border-radius: 50%; }
.v7-video__toggle svg { width: 14px; height: 14px; fill: currentColor; }
.v7-video__toggle span { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-hero-visual][data-visual="video"] .v7-laptop { display: none; }
[data-hero-visual]:not([data-visual="video"]) .v7-video { display: none; }
[data-hero-visual][data-visual="video"] .v7-stage__tag { display: none; }
[data-hero-visual][data-visual="video"] .v7-stage { padding: 0; background: transparent; }
[data-hero-visual][data-visual="video"] .v7-stage::before { display: none; }
[data-hero-visual][data-visual="video"] .v7-video video { border-radius: inherit; }
[data-hero-visual][data-visual="video"] .v7-video { border-radius: inherit; overflow: hidden; }

/* ==========================================================================
   2. Laptop and the example site (Prej / Potem)
   ========================================================================== */
.v7-laptop { position: relative; width: min(100%, 780px); margin-inline: auto; }
.v7-laptop__lid {
  position: relative;
  padding: 2.1% 2.1% 2.6%;
  border-radius: 18px 18px 4px 4px;
  background: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--dark-3), 0 0 0 1px var(--dark-line);
}
.v7-laptop__cam { position: absolute; top: .9%; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--dark-3); }
.v7-laptop__screen {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 6px;
  background: var(--white);
  container-type: inline-size;
}
.v7-laptop__screen.demo__screen { grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); }
.v7-laptop__screen.demo__screen > * { min-height: 0; overflow: hidden; }
.v7-laptop__base {
  position: relative;
  height: clamp(9px, 1.9vw, 17px);
  margin-inline: -5.5%;
  border-radius: 2px 2px 18px 18px / 2px 2px 100% 100%;
  background: linear-gradient(var(--white), var(--line-2, var(--line)) 70%, var(--muted-lg));
}
.v7-laptop__base::before { content: ""; position: absolute; top: 0; left: 50%; width: 15%; height: 42%; transform: translateX(-50%); border-radius: 0 0 10px 10px; background: var(--line-2, var(--line)); }
.v7-laptop__shadow { height: 18px; margin: -4px 4% 0; border-radius: 50%; background: radial-gradient(ellipse at center, var(--ink-2), transparent 70%); opacity: .9; }
@media (max-width: 640px) { .v7-laptop { width: 92%; } .v7-laptop__lid { border-radius: 12px 12px 3px 3px; } }

/* The demo controls under the laptop */
.v7-laptop .demo__toggle { margin-top: 1.1rem; }
.v7-demo-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-top: 1.1rem; }
.v7-demo-foot .demo__toggle { margin-top: 0; }
.v7-demo-foot__hint { display: none; color: var(--dark-2); font-size: .875rem; }
.js .v7-demo-foot__hint { display: block; }

/* Notification over the laptop */
.v7-laptop .demo__toast { right: auto; left: -8%; top: auto; bottom: 4%; width: min(19rem, 52%); box-shadow: 0 22px 44px -16px var(--ink), 0 0 0 1px var(--dark-line); }
@media (max-width: 1099px) {
  .v7-laptop .demo__toast { left: 50%; bottom: -3.3rem; width: min(19.5rem, 94%); translate: -50% 0; font-size: .875rem; }
  .v7-demo-foot { margin-top: 3.5rem; }
}

/* The new site (Potem). Everything sized in cqi so the miniature scales with the screen. */
.v7m { --fg: var(--ink); --fg-2: var(--muted); --red-ink: var(--orange-ink-light); --orange-ink: var(--orange-ink-light); display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%; min-height: 0; background: var(--paper); color: var(--ink); font-family: var(--f-sans); overflow: hidden; }
.v7m__nav { display: flex; align-items: center; gap: 3cqi; padding: 2.3cqi 4cqi; background: var(--paper); border-bottom: 1px solid var(--line); }
.v7m__logo { display: flex; align-items: center; gap: 1.1cqi; font: 750 2.5cqi/1 var(--f-display); letter-spacing: -.02em; white-space: nowrap; }
.v7m__logo svg { width: 3.1cqi; height: 3.1cqi; fill: none; stroke: var(--red-ink); stroke-width: 2.2; stroke-linecap: round; }
.v7m__links { display: flex; gap: 2.6cqi; margin-left: auto; font: 500 1.55cqi/1 var(--f-sans); color: var(--muted); white-space: nowrap; }
.v7m__cta { padding: 1.05cqi 1.9cqi; border-radius: var(--pill); background: var(--ink); color: var(--paper); font: 600 1.5cqi/1 var(--f-sans); white-space: nowrap; }
.v7m__hero { position: relative; display: grid; grid-template-columns: minmax(0, 52fr) minmax(0, 48fr); min-height: 0; }
.v7m__copy { display: flex; flex-direction: column; justify-content: flex-start; min-height: 0; padding: 6.2cqi 3.6cqi 2cqi 4.4cqi; }
.v7m__chip { align-self: flex-start; display: inline-flex; align-items: center; gap: .9cqi; padding: .8cqi 1.5cqi; border-radius: var(--pill); background: var(--white); border: 1px solid var(--line); font: 600 1.45cqi/1 var(--f-sans); color: var(--muted); white-space: nowrap; }
.v7m__chip::before { content: ""; width: 1cqi; height: 1cqi; border-radius: 50%; background: var(--green); }
.v7m__h { margin-top: 2cqi; font: 800 4.7cqi/.97 var(--f-display); letter-spacing: -.035em; }
.v7m__h em { display: block; }
.v7m__h em { font-style: normal; color: var(--red-ink); }
.v7m__sub { margin-top: 1.5cqi; font: 450 1.6cqi/1.4 var(--f-sans); color: var(--muted); max-width: 34ch; }
.v7m__btns { display: flex; align-items: center; gap: 1.6cqi; margin-top: 2.2cqi; }
.v7m__btn { display: inline-flex; align-items: center; gap: .9cqi; padding: 1.55cqi 2.6cqi; border-radius: var(--pill); background: var(--red); color: var(--on-accent); font: 650 1.75cqi/1 var(--f-sans); white-space: nowrap; box-shadow: 0 1.2cqi 2.4cqi -1.4cqi var(--red); }
.v7m__btn svg { width: 1.9cqi; height: 1.9cqi; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.v7m__call { font: 600 1.6cqi/1 var(--f-sans); color: var(--ink); text-decoration: underline; text-underline-offset: .3em; text-decoration-color: var(--line-2, var(--line)); white-space: nowrap; }
ul.v7m__ticks { display: flex; flex-wrap: nowrap; gap: 2.4cqi; margin-top: 2.4cqi; padding-top: 1.8cqi; border-top: 1px solid var(--line); }
.v7m__ticks li { display: grid; gap: .5cqi; font: 500 1.3cqi/1.1 var(--f-sans); color: var(--muted); white-space: nowrap; }
.v7m__ticks b { font: 800 2.5cqi/1 var(--f-display); letter-spacing: -.03em; color: var(--ink); }
.v7m__media { position: relative; min-height: 0; }
.v7m__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.v7m__media::after { content: ""; position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(transparent, var(--ink)); opacity: .55; }
.v7m__badge { position: absolute; top: 3cqi; right: 3cqi; z-index: 2; display: grid; gap: .3cqi; padding: 1.4cqi 1.8cqi; border-radius: 1.6cqi; background: var(--paper); box-shadow: 0 1.2cqi 3cqi -1.5cqi var(--ink); }
.v7m__badge b { font: 800 2.6cqi/1 var(--f-display); letter-spacing: -.02em; }
.v7m__badge span { font: 500 1.3cqi/1.2 var(--f-sans); color: var(--muted); white-space: nowrap; }
.v7m__form {
  position: absolute; right: 2.6cqi; bottom: 2.6cqi; z-index: 2;
  display: grid; gap: .9cqi;
  width: 24cqi; padding: 1.7cqi;
  border-radius: 1.8cqi;
  background: var(--white);
  box-shadow: 0 2cqi 5cqi -2cqi var(--ink);
}
.v7m__form-title { font: 750 1.8cqi/1.1 var(--f-display); letter-spacing: -.015em; }
.v7m__form-sub { margin-top: -.4cqi; font: 500 1.25cqi/1.3 var(--f-sans); color: var(--muted); }
.v7m__field { display: block; padding: 1cqi 1.3cqi; border: 1px solid var(--line-2, var(--line)); border-radius: 1cqi; background: var(--paper); font: 500 1.35cqi/1 var(--f-sans); color: var(--muted); }
.v7m__field--typed { color: var(--ink); border-color: var(--input-line, var(--line-2)); }
.v7m__send { display: flex; align-items: center; justify-content: center; padding: 1.2cqi; border-radius: 1cqi; background: var(--red); color: var(--on-accent); font: 650 1.45cqi/1 var(--f-sans); }

/* Typing caret and the button press in the example form (index.js types the enquiry) */
.v7m__field.is-typing { border-color: var(--ink); }
.v7m__field.is-typing > span::after { content: ""; display: inline-block; width: 1px; height: 1.05em; margin-left: 1px; vertical-align: -.15em; background: var(--ink); animation: v7-blink .9s steps(1) infinite; }
@keyframes v7-blink { 50% { opacity: 0; } }
.v7m__field > span:empty::before { content: "\00a0"; }
.v7m__send { transition: transform .25s var(--ease-out), background-color .25s; }
.v7m__send.is-pressed { transform: scale(.95); background: var(--red-hover, var(--red)); }

/* ==========================================================================
   3. Project showcase (homepage) and device frames (shared with projekti.html)
   Nothing in here scrolls on its own: screens use overflow: clip and show the top of each site.
   Hovering a project (mouse only) scrolls the screenshots slowly down inside their frames.
   ========================================================================== */
.v7-show { --pan: 0; position: relative; }
.v7-show__stage {
  --plate: var(--paper-2);
  position: relative;
  padding: 6.5% 13% 9% 5.5%;
  border-radius: clamp(16px, .8rem + 1vw, 26px);
  background: var(--plate);
}
.section--paper-2 .v7-show__stage { --plate: var(--paper); }

/* Browser frame */
.v7-frame {
  position: relative;
  overflow: clip;
  border-radius: clamp(8px, .35rem + .4vw, 12px);
  background: var(--white);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--ink) 9%, transparent),
    0 2px 6px -2px color-mix(in srgb, var(--ink) 10%, transparent),
    0 30px 60px -28px color-mix(in srgb, var(--ink) 38%, transparent);
}
.v7-frame__bar { display: flex; align-items: center; gap: 5px; height: clamp(1.35rem, 1rem + .7vw, 1.85rem); padding: 0 clamp(.55rem, .4rem + .4vw, .85rem); border-bottom: 1px solid var(--line); background: var(--paper); }
.v7-frame__bar i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--line-2, var(--line)); }
.v7-frame__url { margin-left: auto; margin-right: auto; padding: .12rem .75rem; border-radius: var(--pill); background: var(--paper-2); color: var(--muted); font: 500 clamp(.625rem, .58rem + .15vw, .75rem)/1.3 var(--f-sans); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; }
.v7-frame__screen { position: relative; aspect-ratio: 16 / 10; overflow: clip; background: var(--paper-2); }
.v7-frame__img, .v7-phone__img {
  position: absolute; top: 0; left: 0;
  display: block; width: 100%; height: auto; max-width: none;
  transform: translate3d(0, calc(var(--pan) * var(--travel, 0) * -100%), 0);
  transition: transform 1.2s cubic-bezier(.3, .7, .2, 1);
}
/* Hover a project (mouse only): the site scrolls slowly down inside the frames, and back up on leave. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .v7-show:hover, .v7-show:focus-within { --pan: 1; }
  .v7-show:hover .v7-frame__img, .v7-show:hover .v7-phone__img,
  .v7-show:focus-within .v7-frame__img, .v7-show:focus-within .v7-phone__img { transition: transform 9s cubic-bezier(.42, 0, .32, 1); }
}

/* Phone frame. Sizes inside use cqi of the phone itself, so the bezel scales with it. */
.v7-phone { position: absolute; right: 4.5%; bottom: 6%; z-index: 2; width: 21%; container-type: inline-size; }
.v7-phone__body {
  position: relative;
  padding: 3.4cqi;
  border-radius: 15cqi;
  background: var(--ink);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--paper) 14%, transparent) inset,
    0 24px 44px -18px color-mix(in srgb, var(--ink) 55%, transparent);
}
.v7-phone__body::before { content: ""; position: absolute; top: 6.6cqi; left: 50%; z-index: 1; width: 26cqi; height: 6.4cqi; transform: translateX(-50%); border-radius: var(--pill); background: var(--ink); }
.v7-phone__screen { position: relative; aspect-ratio: 390 / 844; overflow: clip; border-radius: 12cqi; background: var(--paper-2); }

/* Homepage: two calm columns, the second one set lower */
.v7-gallery__head { display: grid; gap: 1.25rem 3rem; margin-bottom: clamp(2.75rem, 1.75rem + 3vw, 4.5rem); }
.v7-gallery__head .display { max-width: 18ch; }
@media (min-width: 960px) { .v7-gallery__head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; } }
ul.v7-showcase { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(3.5rem, 2.25rem + 4vw, 6.5rem) clamp(2rem, 1rem + 3vw, 4.5rem); margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) {
  ul.v7-showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  ul.v7-showcase > li.is-low { margin-top: clamp(4rem, 1rem + 5vw, 8rem); }
  ul.v7-showcase > li.is-wide { grid-column: 1 / -1; }
  ul.v7-showcase > li.is-wide .v7-show { display: grid; grid-template-columns: minmax(0, 8.4fr) minmax(0, 3.6fr); align-items: end; column-gap: clamp(2rem, 1rem + 3vw, 4.5rem); }
  ul.v7-showcase > li.is-wide .v7-show__meta { display: grid; gap: 1rem; margin: 0; padding-top: 1.1rem; border-top: 1px solid var(--hair); }
  ul.v7-showcase > li.is-wide .v7-show__name { font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.6rem); letter-spacing: -.03em; }
  ul.v7-showcase > li.is-wide .v7-show__link, ul.v7-showcase > li.is-wide .v7-show__soon { justify-self: start; }
  ul.v7-showcase > li.is-wide .v7-phone { width: 19%; }
}
.v7-show__meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .35rem 1.25rem; margin-top: clamp(1.1rem, .8rem + .8vw, 1.6rem); }
.v7-show__name { font: 700 clamp(1.35rem, 1.15rem + .7vw, 1.75rem)/1.1 var(--f-display); letter-spacing: -.02em; }
.v7-show__cat { margin-top: .3rem; color: var(--fg-2); font-size: 1rem; line-height: 1.4; }
.v7-show__link { display: inline-flex; align-items: center; gap: .4rem; color: var(--fg); font: 600 .9375rem/1.3 var(--f-sans); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .25em; text-decoration-color: var(--red); transition: text-decoration-color .2s; }
.v7-show__link:hover { text-decoration-color: currentColor; }
.v7-show__link svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease-out); }
.v7-show__link:hover svg { transform: translate(2px, -2px); }
.v7-show__soon { color: var(--fg-2); font-size: .9375rem; }
.v7-gallery__more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; margin-top: clamp(4rem, 2.5rem + 4vw, 6.5rem); padding-top: 1.75rem; border-top: 1px solid var(--hair); }
.v7-gallery__more p { max-width: 46ch; color: var(--fg-2); }

/* ==========================================================================
   4. Flyer comparison: the dog park
   ========================================================================== */
.v7-flyer__head { max-width: 60rem; margin-bottom: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem); }
.v7-flyer__head .lead { margin-top: 1.4rem; max-width: 44rem; }
.v7-flyer__given { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }
.v7-flyer__given li { display: inline-flex; align-items: baseline; gap: .45rem; padding: .5rem .9rem; border: 1px solid var(--line-2, var(--line)); border-radius: var(--pill); background: var(--paper); font-size: .9375rem; }
.v7-flyer__given b { font: 750 1.05rem/1 var(--f-display); }
.v7-flyer__stage { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.v7-flyer__panels { display: grid; gap: var(--gap); }
@media (min-width: 900px) { .v7-flyer__panels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.v7-fp { display: flex; flex-direction: column; gap: 1rem; padding: clamp(1rem, .8rem + 1vw, 1.5rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.v7-fp--good { border-color: var(--line-2, var(--line)); box-shadow: inset 0 3px 0 var(--red); }
.v7-fp__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1rem; }
.v7-fp__title { font: 700 clamp(1.3rem, 1.1rem + .6vw, 1.65rem)/1.1 var(--f-display); letter-spacing: -.018em; }
.v7-fp__sub { color: var(--fg-2); font-size: .9375rem; }
.v7-fp__field { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius-sm); background: var(--paper-2); }
@media (min-width: 900px) { .v7-fp__field { aspect-ratio: 16 / 9; } }
.v7-fp__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* CSS fallback when canvas is missing: dot pattern plus the 15 buyers */
.v7-fp__field--street { background: radial-gradient(circle, var(--line-2, var(--line)) .8px, transparent 1.2px) 0 0 / 4.4px 4.4px, var(--paper-2); }
.v7-fp__mark { position: absolute; left: var(--x); top: var(--y); width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 22%, transparent); }
.v7-fp__park { position: absolute; top: 9%; left: 50%; height: 82%; aspect-ratio: 1; transform: translateX(-50%); border: 1.5px dashed var(--line-2, var(--line)); border-radius: 18px; background: radial-gradient(circle, var(--line-2, var(--line)) 22%, transparent 24%) 0 0 / 10% 10%; }
.v7-fp__cell { position: absolute; left: calc(var(--c) * 10%); top: calc(var(--r) * 10%); width: 10%; height: 10%; background: radial-gradient(circle, var(--red) 30%, transparent 32%); }
.v7-fp__field.has-canvas { background: var(--paper-2); }
.v7-fp__field.has-canvas .v7-fp__mark, .v7-fp__field.has-canvas .v7-fp__park { display: none; }
.v7-fp__label { position: absolute; left: .75rem; bottom: .7rem; z-index: 1; padding: .3rem .65rem; border-radius: var(--pill); background: var(--paper); color: var(--fg-2); font: 600 .8125rem/1.2 var(--f-sans); }

.v7-fp__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; border-top: 1px solid var(--line); }
@media (min-width: 520px) { .v7-fp__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.v7-fp__stat { display: grid; gap: .3rem; padding: .85rem .2rem .2rem 0; }
.v7-fp__stat dt { color: var(--fg-2); font-size: .8125rem; line-height: 1.2; }
.v7-fp__stat dd { margin: 0; font: 750 clamp(1.35rem, 1.1rem + .8vw, 1.85rem)/1 var(--f-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.v7-fp__stat--key dd { color: var(--red-ink); }
.v7-fp__stat--key { position: relative; }
.v7-fp__calc { display: grid; gap: .25rem; margin: 0; padding: .9rem 1rem; border-radius: var(--radius-sm); background: var(--paper-2); font-size: .9375rem; line-height: 1.45; font-variant-numeric: tabular-nums; }
.v7-fp__calc div { display: flex; justify-content: space-between; gap: 1rem; }
.v7-fp__calc dt { color: var(--fg-2); }
.v7-fp__calc dd { margin: 0; font-weight: 600; text-align: right; white-space: nowrap; }
.v7-fp__calc .is-total { margin-top: .25rem; padding-top: .45rem; border-top: 1px solid var(--line-2, var(--line)); }
.v7-fp__calc .is-total dt, .v7-fp__calc .is-total dd { color: var(--fg); font-weight: 700; }
.v7-fp__text { color: var(--fg-2); font-size: 1rem; line-height: 1.5; max-width: 54ch; }

.v7-flyer__result { display: grid; gap: 1.5rem; padding-top: clamp(.5rem, 2vw, 1.5rem); }
@media (min-width: 900px) { .v7-flyer__result { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; column-gap: var(--gap); } }
.v7-flyer__verdict { font-size: clamp(2rem, 1.35rem + 2.5vw, 3.6rem); line-height: 1; }
.v7-flyer__explain { display: grid; gap: .9rem; font-size: 1.0625rem; line-height: 1.55; max-width: 56ch; }
.v7-flyer__rule { font: 650 1.15rem/1.35 var(--f-display); letter-spacing: -.01em; }

/* The bridge: 500 € becomes 1.500 € */
.v7-bridge { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); margin-top: clamp(3rem, 2rem + 4vw, 5rem); padding: clamp(1.5rem, 1rem + 2.5vw, 3rem); border-radius: clamp(16px, .8rem + 1vw, 24px); background: var(--paper); border: 1px solid var(--line); }
@media (min-width: 1000px) { .v7-bridge { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; column-gap: clamp(2rem, 4vw, 4rem); } }
.v7-bridge__title { font: 700 clamp(1.6rem, 1.25rem + 1.3vw, 2.4rem)/1.05 var(--f-display); letter-spacing: -.025em; text-wrap: balance; }
.v7-bridge__text { display: grid; gap: .8rem; margin-top: 1rem; color: var(--fg); font-size: 1.0625rem; line-height: 1.55; }
.v7-bridge__text .link { font-weight: 600; }
.v7-swap { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 620px) { .v7-swap { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1.15fr); align-items: stretch; gap: .5rem; } }
.v7-swap__box { display: grid; align-content: space-between; gap: .9rem; padding: 1.1rem 1.1rem 1rem; border-radius: var(--radius); background: var(--paper-2); }
.v7-swap__box--out { background: var(--ink); color: var(--paper); }
.v7-swap__label { font-size: .875rem; line-height: 1.3; color: var(--fg-2); }
.v7-swap__box--out .v7-swap__label { color: var(--dark-2); }
.v7-swap__num { font: 800 clamp(1.8rem, 1.3rem + 1.4vw, 2.5rem)/1 var(--f-display); letter-spacing: -.035em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.v7-swap__box--out .v7-swap__num { color: var(--paper); }
.v7-swap__unit { font-size: .55em; letter-spacing: -.01em; }
.v7-swap__box--out .v7-swap__num::after { content: ""; display: inline-block; width: .28em; height: .28em; margin-left: .12em; border-radius: 50%; background: var(--red); vertical-align: .08em; }
.v7-swap__arrow { display: grid; place-items: center; color: var(--fg-2); }
.v7-swap__arrow svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 619px) { .v7-swap__arrow svg { transform: rotate(90deg); width: 22px; height: 22px; } }

/* ==========================================================================
   5. Homepage details
   ========================================================================== */
.v7-solutions-note { margin-top: 1.75rem; max-width: 64ch; }
.v7-pricing-foot { display: grid; gap: 1.75rem; margin-top: clamp(2.5rem, 4vw, 3.5rem); }
@media (min-width: 900px) { .v7-pricing-foot { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 3rem; } }
.v7-pricing-notes { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; max-width: 64ch; }
.v7-pricing-notes li { position: relative; padding-left: 1.2rem; color: var(--fg-2); font-size: var(--fs-small); line-height: 1.55; }
.v7-pricing-notes li::before { content: ""; position: absolute; left: 0; top: .6em; width: .45rem; height: .45rem; border-radius: 50%; background: var(--line-2, var(--line)); }
.v7-pricing-notes li:first-child { color: var(--fg); font-weight: 600; }
.v7-pricing-notes li:first-child::before { background: var(--red); }
.v7-quotes-more { margin-top: clamp(2.5rem, 4vw, 3.5rem); }

/* ==========================================================================
   6. projekti.html
   ========================================================================== */
.v7-pj-hero { padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.v7-pj-hero__grid { display: grid; gap: 1.5rem 3rem; }
@media (min-width: 960px) { .v7-pj-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; } }
.v7-pj-title { font-size: clamp(2.6rem, 1.4rem + 4.4vw, 5.4rem); line-height: .95; letter-spacing: -.035em; }
.v7-pj-title__num { display: inline-block; min-width: 2.2ch; color: var(--fg); font-variant-numeric: tabular-nums; }
.v7-pj-hero__body .actions { margin-top: 1.5rem; }
.v7-pj-list { display: grid; gap: clamp(4.5rem, 2.5rem + 6vw, 9.5rem); margin: 0; padding: 0; list-style: none; }
.v7-pj { display: grid; gap: clamp(1.25rem, 1rem + 1vw, 2rem); }
@media (min-width: 960px) {
  .v7-pj { grid-template-columns: minmax(0, 8.6fr) minmax(0, 3.4fr); align-items: end; column-gap: clamp(2rem, 1rem + 3vw, 4.5rem); }
  .v7-pj:nth-child(even) { grid-template-columns: minmax(0, 3.4fr) minmax(0, 8.6fr); }
  .v7-pj:nth-child(even) .v7-show__stage { order: 2; }
  .v7-pj .v7-phone { width: 19%; }
}
.v7-pj__body { display: grid; gap: .5rem; padding-top: 1.1rem; border-top: 1px solid var(--hair); }
.v7-pj__num { font: 600 .875rem/1 var(--f-sans); color: var(--fg-2); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.v7-pj__name { font: 750 clamp(1.75rem, 1.3rem + 1.7vw, 2.75rem)/1.02 var(--f-display); letter-spacing: -.03em; }
.v7-pj__cat { color: var(--fg-2); font-size: 1.0625rem; line-height: 1.4; max-width: 26ch; }
.v7-pj__body .v7-show__link, .v7-pj__body .v7-show__soon { justify-self: start; margin-top: .5rem; }
.v7-pj-includes .feature-grid { margin-top: 0; }
.v7-pj-more { margin-top: 1.75rem; }
.v7-pj-final { padding-block: clamp(5rem, 3rem + 7vw, 9rem); }
.v7-pj-final__grid { display: grid; gap: 2rem; }
@media (min-width: 900px) { .v7-pj-final__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; column-gap: var(--gap); } }
.v7-pj-final .display { max-width: 15ch; }
.v7-pj-final__lead { color: var(--fg-2); margin-bottom: 1.75rem; }
.v7-glyph { width: min(100%, 240px); height: 24px; margin-bottom: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); overflow: visible; }
.v7-glyph line { stroke: var(--hair); stroke-width: 1.5; }
.v7-glyph .n { fill: var(--bg); stroke: var(--fg-2); stroke-width: 1.5; }
.v7-glyph .d { fill: var(--red); }

/* ==========================================================================
   7. kalkulator.html
   ========================================================================== */
.v7-calc-hero { padding-block: clamp(1.25rem, .6rem + 2.4vw, 3rem) clamp(3rem, 2rem + 4vw, 6rem); }
.v7-calc-hero__head { display: grid; gap: 1rem 3rem; margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.75rem); }
@media (min-width: 960px) { .v7-calc-hero__head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; } }
.v7-calc-title { font-size: clamp(2.3rem, 1.5rem + 2.9vw, 4.1rem); line-height: .98; max-width: 17ch; }
.v7-calc-hero__head .lead { font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); }
.v7-calc { display: grid; gap: var(--gap); align-items: start; }
@media (min-width: 980px) { .v7-calc { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); } }
.v7-calc__inputs { display: grid; gap: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem); padding: clamp(1.25rem, .8rem + 2vw, 2.5rem); border: 1px solid var(--line); border-radius: clamp(16px, .8rem + 1vw, 22px); background: var(--white); }
.v7-calc__inputs-title { font: 700 1.35rem/1.1 var(--f-display); letter-spacing: -.015em; }
/* Phones: the live result travels with the sliders, so the change is visible while sliding */
.v7-calc__live { display: none; }
@media (max-width: 979.98px) {
  .v7-calc__live {
    position: sticky; top: calc(var(--header-h) + .5rem); z-index: 5;
    display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
    margin: -.25rem -.25rem 0; padding: .7rem 1rem;
    border-radius: 12px; background: var(--ink); color: var(--paper);
    box-shadow: 0 10px 24px -14px var(--ink);
    font-size: .875rem; line-height: 1.2;
  }
  .v7-calc__live b { font: 800 1.35rem/1 var(--f-display); letter-spacing: -.03em; white-space: nowrap; font-variant-numeric: tabular-nums; }
}
.v7-calc__inputs-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; }
.v7-calc__reset { min-height: 40px; padding: 0 1rem; border: 1px solid var(--line-2, var(--line)); border-radius: var(--pill); background: transparent; color: var(--fg); font: 600 .9375rem/1 var(--f-sans); }
.v7-calc__reset:hover { border-color: var(--fg); }

/* Slider */
.v7-slider { display: grid; gap: .55rem; }
.v7-slider__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.v7-slider__label { font: 650 1.0625rem/1.3 var(--f-sans); color: var(--fg); max-width: 26ch; }
.v7-slider__value { position: relative; display: inline-flex; align-items: baseline; gap: .2rem; flex: none; }
.v7-slider__num {
  width: var(--w, 4.2ch);
  min-width: 2.2ch;
  padding: .12rem .35rem;
  border: 1.5px solid transparent;
  border-bottom-color: var(--line-2, var(--line));
  border-radius: 6px 6px 0 0;
  background: transparent;
  color: var(--fg);
  font: 800 clamp(1.9rem, 1.5rem + 1.3vw, 2.5rem)/1 var(--f-display);
  letter-spacing: -.035em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  transition: border-color .2s, background-color .2s;
}
.v7-slider__num:hover { border-bottom-color: var(--fg-2); }
.v7-slider__num:focus { outline: none; border-color: var(--ink); border-radius: 8px; background: var(--paper); }
.v7-slider__num:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.v7-slider__unit { font: 700 1.25rem/1 var(--f-display); color: var(--fg-2); }
.v7-slider__hint { color: var(--fg-2); font-size: .9375rem; line-height: 1.45; }
.v7-slider__aside { display: block; margin-top: .15rem; color: var(--fg-2); font-size: .875rem; text-align: right; }

.v7-range {
  --fill: 50%;
  -webkit-appearance: none; appearance: none;
  display: block;
  width: 100%;
  height: 48px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}
.v7-range:focus { outline: none; }
.v7-range::-webkit-slider-runnable-track { height: 10px; border-radius: var(--pill); background: linear-gradient(to right, var(--red) 0 var(--fill), var(--line) var(--fill) 100%); }
.v7-range::-moz-range-track { height: 10px; border-radius: var(--pill); background: var(--line); }
.v7-range::-moz-range-progress { height: 10px; border-radius: var(--pill); background: var(--red); }
.v7-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 34px; height: 34px;
  margin-top: -12px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 4px 12px -4px var(--ink);
  transition: transform .2s var(--ease-out), box-shadow .2s;
}
.v7-range::-moz-range-thumb { width: 28px; height: 28px; border: 3px solid var(--ink); border-radius: 50%; background: var(--white); box-shadow: 0 4px 12px -4px var(--ink); }
.v7-range:hover::-webkit-slider-thumb { transform: scale(1.06); }
.v7-range:active::-webkit-slider-thumb { transform: scale(1.12); box-shadow: 0 0 0 10px color-mix(in srgb, var(--red) 25%, transparent), 0 4px 12px -4px var(--ink); }
.v7-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--paper), 0 0 0 7px var(--ink); }
.v7-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--paper), 0 0 0 7px var(--ink); }
.v7-slider__scale { display: flex; justify-content: space-between; margin-top: -.35rem; color: var(--fg-2); font-size: .8125rem; font-variant-numeric: tabular-nums; }

/* Result panel */
.v7-calc__out { position: relative; display: grid; gap: 1.5rem; padding: clamp(1.25rem, .8rem + 2vw, 2.5rem); border-radius: clamp(16px, .8rem + 1vw, 22px); background: var(--ink); color: var(--paper); --fg: var(--paper); --fg-2: var(--dark-2); --hair: var(--dark-line); --focus: var(--paper); --red-ink: var(--orange-ink-dark); }
@media (min-width: 980px) { .v7-calc__out { position: sticky; top: calc(var(--header-h) + 1.25rem); } }
.v7-calc__out-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.v7-calc__out-title { font: 700 1.35rem/1.1 var(--f-display); letter-spacing: -.015em; }
.v7-calc__badge { display: inline-flex; align-items: center; gap: .5em; padding: .42em .85em; border: 1px solid var(--dark-line); border-radius: var(--pill); color: var(--dark-2); font: 600 .8125rem/1 var(--f-sans); }
.v7-calc__badge::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: var(--red); }
.v7-calc__badge.is-own::before { background: var(--green-light, var(--green)); }
.v7-calc__big { display: grid; gap: .4rem; }
.v7-calc__big-label { color: var(--dark-2); font-size: 1rem; }
.v7-calc__big-num { font: 800 clamp(2.8rem, 2rem + 3.4vw, 4.6rem)/.95 var(--f-display); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.v7-calc__big-sub { color: var(--dark-2); font-size: 1rem; }
.v7-calc__big-sub b { color: var(--paper); font-weight: 650; }

.v7-dots { display: grid; gap: .55rem; }
.v7-dots__row { display: flex; flex-wrap: wrap; gap: 6px; }
.v7-dots__row i { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--dark-3); transition: background-color .3s, border-color .3s, transform .35s var(--ease-out); }
.v7-dots__row i.is-won { background: var(--red); border-color: var(--red); }
.v7-dots__row i.is-extra { background: var(--green-light, var(--green)); border-color: var(--green-light, var(--green)); }
.v7-dots__legend { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; color: var(--dark-2); font-size: .875rem; }
.v7-dots__legend span { display: inline-flex; align-items: center; gap: .4rem; }
.v7-dots__legend i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--dark-3); }
.v7-dots__legend i.is-won { background: var(--red); border-color: var(--red); }
.v7-dots__legend i.is-extra { background: var(--green-light, var(--green)); border-color: var(--green-light, var(--green)); }
.v7-dots__note { color: var(--dark-2); font-size: .8125rem; }

.v7-calc__rows { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--dark-line); }
.v7-calc__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--dark-line); }
.v7-calc__row dt { color: var(--dark-2); font-size: .9875rem; line-height: 1.35; }
.v7-calc__row dd { margin: 0; font: 700 1.2rem/1.1 var(--f-display); letter-spacing: -.015em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.v7-calc__whatif { display: grid; gap: .9rem; padding: 1.1rem 1.15rem 1.2rem; border-radius: var(--radius); background: var(--ink-2); }
.v7-calc__whatif-q { font: 650 1.0625rem/1.4 var(--f-sans); }
.v7-calc__whatif-a { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.v7-calc__whatif-a div { display: grid; gap: .25rem; }
.v7-calc__whatif-a div > span { color: var(--dark-2); font-size: .8125rem; line-height: 1.25; }
.v7-calc__whatif-a b { font: 800 clamp(1.25rem, 1rem + 1vw, 1.7rem)/1 var(--f-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--paper); }
.v7-calc__whatif-a div:last-child b { color: var(--red-ink); }
.v7-calc__honest { color: var(--dark-2); font-size: .875rem; line-height: 1.5; }
.v7-calc__honest strong { color: var(--paper); }
.v7-calc__out.is-fresh .v7-calc__big-num { animation: v7-tick .5s var(--ease-out); }
@keyframes v7-tick { from { opacity: .55; transform: translateY(4px); } }

.v7-calc-send__grid { display: grid; gap: 2rem; }
@media (min-width: 960px) { .v7-calc-send__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: start; column-gap: var(--gap); } }
.v7-calc-send__lead { margin: 1.25rem 0 .75rem; color: var(--fg); }
.v7-calc-send__pair { display: grid; gap: 1rem; }
@media (min-width: 560px) { .v7-calc-send__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.v7-calc-final { padding-block: clamp(5rem, 3rem + 7vw, 9rem); }
.v7-calc-final__grid { display: grid; gap: 2rem; }
@media (min-width: 900px) { .v7-calc-final__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: start; column-gap: var(--gap); } }
.v7-calc-final .checks { margin: 1rem 0 2rem; }
.v7-calc-final__lead { color: var(--fg-2); }
.v7-calc-final__checks-title { margin-top: 1.5rem; font-weight: 650; }

/* ==========================================================================
   8. Motion start states (only under .js, removed by .is-static)
   ========================================================================== */
.js:not(.is-static) .v7-hero__title:not(.is-done) .v7-mark__line path { stroke-dashoffset: 1; }
.v7-mark__line path { transition: stroke-dashoffset 1.1s var(--ease-out); }
.js:not(.is-static) [data-show] .v7-show__stage { opacity: 0; translate: 0 44px; }
.js:not(.is-static) [data-show].is-in .v7-show__stage { opacity: 1; translate: 0 0; transition: opacity .9s var(--ease-soft), translate 1.3s var(--ease-out); }
.js:not(.is-static) [data-show] .v7-frame__screen { clip-path: inset(0 0 100% 0); }
.js:not(.is-static) [data-show].is-in .v7-frame__screen { clip-path: inset(0 0 0 0); transition: clip-path 1.2s var(--ease-io) .2s; }
.js:not(.is-static) [data-show] .v7-phone__body { opacity: 0; translate: 0 56px; }
.js:not(.is-static) [data-show].is-in .v7-phone__body { opacity: 1; translate: 0 0; transition: opacity .8s var(--ease-soft) .55s, translate 1.3s var(--ease-out) .55s; }
.is-static [data-show] .v7-show__stage, .is-static [data-show] .v7-phone__body { opacity: 1 !important; translate: none !important; }
.is-static [data-show] .v7-frame__screen { clip-path: none !important; }
.is-static .v7-show { --pan: 0 !important; }

/* ---------- Results (7. 11. 2026): numbers from real projects ----------
   .v7-res: the results of one project, on its card (homepage and projekti.html).
   .v7-pj__did: one plain sentence of what we built. */
.v7-res { display: grid; gap: .55rem; margin: .4rem 0 0; padding: 0; list-style: none; }
.v7-res li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: .6rem; line-height: 1.35; }
.v7-res b { font: 750 1.25rem/1.1 var(--f-display); letter-spacing: -.02em; color: var(--red-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.v7-res span { color: var(--fg); font-size: .9688rem; }
.v7-pj__did { color: var(--fg-2); font-size: 1rem; line-height: 1.5; max-width: 40ch; }
.v7-show__meta .v7-res, .v7-show__meta .v7-pj__did { flex-basis: 100%; }
.v7-show__meta .v7-pj__did { margin: .2rem 0 0; }

/* ---------- Več projektov (projekti.html, 7. 11. 2026) ----------
   A grid of smaller cards under the ten featured projects: screenshot, name, what it is, link. */
.v7-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .v7-more { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.75rem 1.5rem; } }
.v7-more__link { display: grid; gap: .2rem; color: var(--fg); text-decoration: none; }
.v7-more__shot { display: block; margin-bottom: .65rem; overflow: clip; border-radius: clamp(7px, .3rem + .3vw, 10px); background: var(--white);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 9%, transparent), 0 2px 6px -2px color-mix(in srgb, var(--ink) 10%, transparent), 0 18px 36px -22px color-mix(in srgb, var(--ink) 34%, transparent);
  transition: box-shadow .3s ease, translate .3s ease; }
.v7-more__bar { display: flex; align-items: center; gap: 4px; height: clamp(.9rem, .7rem + .5vw, 1.2rem); padding: 0 .55rem; border-bottom: 1px solid var(--line); background: var(--paper); }
.v7-more__bar i { flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--line-2, var(--line)); }
.v7-more__shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; background: var(--paper-2); }
.v7-more__name { font: 700 clamp(1rem, .92rem + .35vw, 1.2rem)/1.2 var(--f-display); letter-spacing: -.015em; }
.v7-more__cat { color: var(--fg-2); font-size: .9375rem; line-height: 1.4; }
.v7-more__url { display: inline-flex; align-items: center; gap: .35rem; justify-self: start; margin-top: .3rem; font: 600 .875rem/1.3 var(--f-sans); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .25em; text-decoration-color: var(--red); overflow-wrap: anywhere; }
.v7-more__url svg { flex: none; width: .7em; height: .7em; fill: none; stroke: currentColor; stroke-width: 1.6; }
@media (hover: hover) {
  .v7-more__link:hover .v7-more__shot { translate: 0 -3px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent), 0 4px 10px -3px color-mix(in srgb, var(--ink) 14%, transparent), 0 26px 44px -22px color-mix(in srgb, var(--ink) 42%, transparent); }
  .v7-more__link:hover .v7-more__url { text-decoration-color: currentColor; }
}
.v7-more__link:focus-visible { outline: 3px solid var(--red); outline-offset: 6px; border-radius: 10px; }
@media (prefers-reduced-motion: reduce) { .v7-more__shot { transition: none; } .v7-more__link:hover .v7-more__shot { translate: none; } }
@media (max-width: 420px) { .v7-more__cat { font-size: .875rem; } .v7-more__url { font-size: .8125rem; } }
.v7-more-note { margin: clamp(2.25rem, 1.8rem + 1.5vw, 3.25rem) 0 0; color: var(--fg-2); font-size: .9375rem; line-height: 1.5; }