/* Premium layer for spletne-strani.html only — kept out of style.css so every
   other page on the site stays exactly as light as it was. Self-contained:
   no external request, no webfont, reuses the colour variables defined in
   style.css (loaded first). Honours prefers-reduced-motion throughout: every
   transform transition and the hero-phone cross-fade are disabled under it,
   and premium.js never starts a timer or a listener when the media query
   matches or the device looks low-end — see that file's banner comment. */

/* Defensive only — the real fix is the hero-premium rule below (it no longer
   uses vw at all, so it can no longer disagree with the scrollbar-excluded
   % width that caused the overflow). This just stops any future px-level
   drift on this one page from ever producing a visible horizontal scrollbar. */
html { overflow-x: clip; }

/* Tap targets: style.css's nav links are fine on a page with no finger-sized
   interactive elements nearby, but this page adds several (dots, cards), so
   it raises its own nav links to the same >=44px minimum here rather than
   changing style.css for every other page. */
header.site nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.25rem 0;
}

.kicker-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.9rem;
}

/* ---------------------------------------------------------------- hero --- */

/* Full-bleed background, edge to edge: this section is a direct child of
   body (not nested inside .wrap), so it is already 100% of the document
   width without any breakout trick. The previous version reached for the
   classic "margin: 0 calc(50% - 50vw)" technique anyway — a technique meant
   for an element nested INSIDE a max-width wrapper — and that is what broke
   it: Chrome computes vw as the viewport width INCLUDING the vertical
   scrollbar, while % is resolved against the scrollbar-excluded content box,
   so on any page tall enough to scroll, 50vw and 50% silently disagree by
   half the scrollbar's width. That mismatch bled the section a few pixels
   past both edges and, combined with the nested .wrap's own gutter, is what
   clipped the hero copy, the package cards and the dots on the right at
   phone widths. Fixed by removing vw from this rule entirely: no breakout
   margin is needed, and the horizontal gutter for the hero's content is the
   nested `.wrap.hero-inner` below, exactly like every other section on the
   page. Only vertical padding belongs here. */
.hero-premium {
  position: relative;
  padding: 2.4rem 0 2.8rem;
  overflow: clip;
  background: var(--bg);
}
@media (max-width: 640px) {
  .hero-premium { padding: 1.8rem 0 2.2rem; }
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 50%;
  display: block;
}
.hero-bg-veil {
  position: absolute;
  inset: 0;
  /* Fallback for browsers without color-mix(): a flat, fully-opaque scrim
     (hides the photo but guarantees text contrast). A browser that
     understands the next declaration overrides it with the real gradient. */
  background: var(--bg);
  background: linear-gradient(100deg, var(--bg) 0%, var(--bg) 28%, color-mix(in srgb, var(--bg) 55%, transparent) 55%, color-mix(in srgb, var(--bg) 18%, transparent) 100%);
}
@media (max-width: 760px) {
  .hero-bg-veil { background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 35%, transparent) 0%, var(--bg) 72%); }
}

.hero-detail-layer { display: none; }
@media (min-width: 900px) {
  .hero-detail-layer {
    display: block;
    position: absolute;
    right: -2%;
    bottom: -6%;
    width: 30%;
    max-width: 320px;
    aspect-ratio: 4 / 5;
    background-image: url(assets/img/hero-detail-600.webp);
    background-size: cover;
    background-position: center;
    border-radius: 18px;
    box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.35);
    opacity: 0.94;
    transform: translateY(var(--parallax-y, 0px));
    z-index: 1;
  }
}
@media (min-width: 1300px) {
  .hero-detail-layer { background-image: url(assets/img/hero-detail-900.webp); }
}

.hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column-reverse;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 760px) {
  .hero-inner { flex-direction: row; align-items: center; gap: 3rem; }
  .hero-copy { flex: 1 1 56%; }
  .phone-stage { flex: 0 0 38%; }
}

.hero-copy {
  background: var(--bg-panel);
  background: color-mix(in srgb, var(--bg-panel) 92%, transparent);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 1.5rem 1.4rem 1.3rem;
}
/* The panel stays on every breakpoint, including desktop: the hero photo is
   busy enough (window, plant, daylight) that text set directly over it with
   only the veil gradient for contrast could not be guaranteed to pass AA at
   every viewport width. A near-opaque card is the safer, verifiable choice. */
.hero-copy h1 { margin-bottom: 1rem; }

/* ---------------------------------------------------------- 3D phone --- */

.phone-stage {
  perspective: 1200px;
  display: flex;
  justify-content: center;
}
.phone-3d {
  --tiltx: 0deg;
  --tilty: 0deg;
  position: relative;
  width: clamp(168px, 54vw, 232px);
  aspect-ratio: 9 / 19.3;
  border-radius: 32px;
  background: linear-gradient(155deg, #3a3d42, #121316 65%);
  box-shadow:
    0 2px 2px rgba(0, 0, 0, 0.2),
    0 36px 70px -28px rgba(0, 0, 0, 0.5),
    inset 0 0 0 2px rgba(255, 255, 255, 0.07);
  transform-style: preserve-3d;
  transform: rotateX(calc(6deg + var(--tiltx))) rotateY(calc(-16deg + var(--tilty)));
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.phone-3d::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 50%;
  translate: -50% 0;
  width: 32%;
  height: 6.5%;
  background: #121316;
  border-radius: 10px;
  z-index: 3;
}
.phone-screen {
  position: absolute;
  inset: 3.4%;
  border-radius: 24px;
  overflow: hidden;
  background: #000;
}
.screen-img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
}
.screen-img.active { opacity: 1; }
.screen-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.phone-dots {
  display: flex;
  gap: 0.2rem;
  justify-content: center;
  margin-top: 0.9rem;
}
.phone-dots button {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.phone-dots button::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rule);
  transition: background 0.3s, transform 0.3s;
}
.phone-dots button[aria-current="true"]::after {
  background: var(--accent);
  transform: scale(1.3);
}
.phone-dots button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 50%; }

/* No JS, reduced motion, or a low-end device: keep the phone's fixed tilt
   (still looks like a 3D object) but remove every transition so nothing
   animates, and show the first screenshot only — see premium.js. */
.no-motion .phone-3d { transition: none; }
.no-motion .screen-img { transition: none; }
.no-motion .hero-detail-layer,
.no-motion .process-bg-layer,
.no-motion .examples-bg-layer { transform: none !important; }
.no-motion .package-card { transition: box-shadow 0.2s; }

/* -------------------------------------------------------- how-it-works --- */

.process-wrap {
  position: relative;
  border-radius: 18px;
  overflow: clip;
}
.process-bg-layer { display: none; }
@media (min-width: 900px) {
  .process-wrap { padding: 0.5rem; }
  .process-bg-layer {
    display: block;
    position: absolute;
    inset: 0;
    background-image: url(assets/img/process-studio-800.webp);
    background-size: cover;
    background-position: 30% 50%;
    opacity: 0.16;
    transform: translateY(var(--parallax-y2, 0px));
    z-index: 0;
  }
}
@media (min-width: 1300px) {
  .process-bg-layer { background-image: url(assets/img/process-studio-1200.webp); }
}
.process-wrap .panel { position: relative; z-index: 1; }

/* ------------------------------------------------------------ packages --- */

.packages-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  margin: 1.5rem 0 1.75rem;
}
@media (min-width: 760px) {
  .packages-grid { grid-template-columns: repeat(3, 1fr); }
}
.package-card {
  --rx: 0deg;
  --ry: 0deg;
  position: relative;
  background: var(--bg-panel);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 1.4rem 1.35rem 1.5rem;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.45s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.package-card:hover, .package-card:focus-within {
  box-shadow: 0 24px 44px -18px rgba(0, 0, 0, 0.28);
}
.package-card h3 { margin: 0 0 0.15rem; font-size: 1.12rem; }
.package-card .price {
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0.1rem 0 1rem;
  letter-spacing: -0.01em;
}
.package-card .price small { font-size: 0.6em; font-weight: 500; color: var(--ink-faint); }
.package-card dl { margin: 0; font-size: 0.91rem; color: var(--ink-soft); }
.package-card dt { font-weight: 650; color: var(--ink); margin-top: 0.75rem; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.03em; }
.package-card dt:first-child { margin-top: 0; }
.package-card dd { margin: 0.2rem 0 0; }

/* -------------------------------------------------------------- examples --- */

.examples-wrap { position: relative; }
.examples-bg-layer { display: none; }
@media (min-width: 900px) {
  .examples-bg-layer {
    display: block;
    position: absolute;
    left: -6%;
    top: -8%;
    width: 220px;
    aspect-ratio: 1 / 1;
    background-image: url(assets/img/desk-devices-600.webp);
    background-size: cover;
    border-radius: 16px;
    opacity: 0.85;
    box-shadow: 0 24px 50px -22px rgba(0, 0, 0, 0.3);
    z-index: 0;
  }
}
.examples-list {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.examples-list li {
  display: flex;
  gap: 1rem;
  align-items: center;
  background: var(--bg-panel);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 0.8rem 1rem;
}
.examples-list .thumb {
  flex: 0 0 auto;
  width: 54px;
  aspect-ratio: 9 / 19.3;
  border-radius: 7px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  background: #000;
}
.examples-list .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.examples-list .ex-text { flex: 1; min-width: 0; font-size: 0.93rem; color: var(--ink-soft); }
.examples-list .ex-text a { font-weight: 650; font-size: 1rem; }
.examples-list .ex-text p { margin: 0.15rem 0 0; }

/* ------------------------------------------------------------- mood strip --- */

.mood-strip {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  margin: 1.6rem 0 2rem;
}
.mood-strip img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 679; object-fit: cover; }
.mood-strip .mood-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.9rem 1.1rem;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.6), transparent);
  color: #fff;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
}

/* --------------------------------------------------------- reduced motion --- */

@media (prefers-reduced-motion: reduce) {
  .phone-3d, .screen-img, .package-card,
  .hero-detail-layer, .process-bg-layer { transition: none !important; }
}

/* Under the hero phone: the screens are demos for invented businesses (audit 2026-10-04, P0). */
.phone-note {
  margin: 0.5rem 0 0;
  text-align: center;
  font-size: 0.78rem;
  opacity: 0.8;
}