/* SmartOffer: papir, črnilo, rumena (barve aplikacije). Pisava Geist je na strežniku (brez Google Fonts). */
@font-face { font-family: "Geist"; src: url("../fonts/geist-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; src: url("../fonts/geist-latin-ext-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

html { background: #111213; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

.so {
  --paper: #f5f5f2; --paper-2: #ebeae4; --ink: #111213; --ink-2: #1c1d1f;
  --y: #f6c21c; --y-text: #7a5900; --mute: #5d5e62; --line: rgba(17,18,19,.12);
  font-family: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink); background: var(--paper);
  font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip;
}
.so * { box-sizing: border-box; }
.so img { display: block; max-width: 100%; height: auto; }
.so h1, .so h2, .so h3 { margin: 0; letter-spacing: -.03em; line-height: 1.05; font-weight: 700; }
.so h2 { font-size: clamp(2rem, 5vw, 3.6rem); max-width: 18ch; margin: .4rem 0 1.4rem; text-wrap: balance; }
.so h3 { font-size: 1.2rem; letter-spacing: -.01em; line-height: 1.2; font-weight: 600; }
.so p { margin: 0; }
.so a { color: inherit; }
.so main > section[id] { scroll-margin-top: 72px; }
.so-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.so-sec { padding: clamp(72px, 11vw, 140px) 0; }
.so-dark { background: var(--ink); color: var(--paper); }
.so-paper { background: var(--paper-2); }
.so-eyebrow { display: inline-block; font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--y-text); }
.so-dark .so-eyebrow, .so-final .so-eyebrow, .so-404 .so-eyebrow { color: var(--y); }
.so-lead { font-size: 1.15rem; max-width: 56ch; color: var(--mute); margin-bottom: 2.4rem; }
.so-dark .so-lead { color: #b6b6b2; }
.so-muted { color: var(--mute); }
.so-muted.small { font-size: .85rem; }

.so-skip { position: absolute; left: 16px; top: -60px; z-index: 50; padding: .6rem 1rem; border-radius: 10px; background: var(--y); color: var(--ink); font-weight: 600; text-decoration: none; }
.so-skip:focus { top: 16px; }

.so-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .9rem 1.5rem; border-radius: 999px; background: var(--y); color: var(--ink) !important; font-weight: 600; text-decoration: none; border: 1.5px solid var(--y); transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s; }
.so-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(0,0,0,.45); }
.so-btn:active { transform: translateY(0) scale(.98); }
.so-btn.ghost { background: transparent; border-color: var(--ink); }
.so-btn.ghost.light { border-color: rgba(245,245,242,.5); color: var(--paper) !important; }
.so-btn.sm { padding: .55rem 1.1rem; font-size: .9rem; }
.so a:focus-visible, .so button:focus-visible, .so input:focus-visible { outline: 3px solid var(--y); outline-offset: 3px; }
@media (hover: none) { .so-btn:hover { transform: none; box-shadow: none; } }

/* meni */
.so-nav { position: fixed; inset: 14px 14px auto; z-index: 20; display: flex; align-items: center; gap: 24px; padding: 10px 10px 10px 20px; border-radius: 999px; background: rgba(17,18,19,.9); color: var(--paper); max-width: 1180px; margin: 0 auto; }
@media (min-width: 861px) { .so-nav { background: rgba(17,18,19,.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } }
.so-logo { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -.02em; text-decoration: none; }
.so-logo i { width: 14px; height: 14px; border-radius: 4px; background: var(--y); transform: rotate(45deg); }
.so-nav nav { display: flex; gap: 22px; margin-left: auto; font-size: .92rem; }
.so-nav nav a { text-decoration: none; opacity: .75; transition: opacity .2s; }
.so-nav nav a:hover { opacity: 1; }

/* film: drsenje vodi čas od 22:10 do 19:38 */
.so-film { position: relative; background: var(--ink); color: var(--paper); }
.so-film-stage { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; background: var(--ink); }
.so-film-layer, .so-film-layer picture, .so-film-poster, .so-film-video { position: absolute; inset: 0; width: 100%; height: 100%; }
.so-film .so-film-poster, .so-film-video { display: block; max-width: none; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.so-film-end { opacity: 0; }
.so-film-video { z-index: 1; }
.so-film-layer[data-painted="true"] .so-film-poster { visibility: hidden; }
.so-film-shade { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, rgba(17,18,19,.88) 0%, rgba(17,18,19,.55) 38%, rgba(17,18,19,0) 68%), linear-gradient(0deg, rgba(17,18,19,.55), transparent 30%); }
.so-film-clock { position: absolute; z-index: 3; right: clamp(16px, 4vw, 56px); bottom: clamp(20px, 5vh, 48px); text-align: right; font-variant-numeric: tabular-nums; pointer-events: none; }
.so-film-clock span { display: block; font-size: clamp(2.8rem, 7vw, 6rem); font-weight: 800; letter-spacing: -.05em; line-height: 1; color: var(--paper); text-shadow: 0 4px 30px rgba(0,0,0,.45); }
.so-film-clock i { display: block; height: 3px; margin-top: 10px; border-radius: 3px; background: var(--y); transform-origin: right; transform: scaleX(calc(1 - var(--film-p, 0))); }
.so-film-progress { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(245,245,242,.12); }
.so-film-progress span { display: block; height: 100%; background: var(--y); transform-origin: left; transform: scaleX(var(--film-p, 0)); }
.so-film-story { position: relative; z-index: 5; margin-top: -100vh; margin-top: -100dvh; pointer-events: none; }
.so-film-chapter { min-height: 135vh; min-height: 135dvh; }
.so-film-chapter:last-child { min-height: 150vh; min-height: 150dvh; }
.so-film-pin { position: sticky; top: 0; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; max-width: 1180px; margin: 0 auto; padding: 110px 24px 80px; }
.so-film-copy { max-width: 36rem; pointer-events: auto; }
.so-film h1, .so-film h2 { font-size: clamp(2.6rem, 6.2vw, 5.4rem); max-width: 13ch; margin: .7rem 0 1.2rem; line-height: .98; letter-spacing: -.045em; text-wrap: balance; }
.so-film .so-eyebrow { color: var(--y); }
.so-film-body { font-size: clamp(1.05rem, 1.4vw, 1.25rem); max-width: 42ch; color: #d6d6d2; }
.so-film-tags { list-style: none; padding: 0; margin: 1.6rem 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
/* brez backdrop-filter: zamegljevanje nad videom bi se računalo ob vsaki sličici */
.so-film-tags li { padding: .45rem .85rem; border-radius: 999px; font-size: .88rem; font-weight: 500; border: 1px solid rgba(245,245,242,.28); background: rgba(17,18,19,.62); }
.so-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2rem; }

/* številke */
.so-stats-band { background: var(--ink); color: var(--paper); padding: 56px 0; border-top: 1px solid rgba(245,245,242,.08); }
.so-stats { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.so-stats b { display: block; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.04em; color: var(--y); line-height: 1.05; }
.so-stats span { font-size: .95rem; color: #b6b6b2; }

/* kalkulator */
.so-calc { display: grid; grid-template-columns: 1.1fr 1fr; border-radius: 28px; overflow: hidden; background: #fff; border: 1px solid var(--line); }
.so-calc-in { padding: 40px; display: grid; gap: 28px; align-content: center; }
.so-calc label > span { display: flex; justify-content: space-between; gap: 12px; font-weight: 500; margin-bottom: 10px; }
.so-calc label b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.so-calc input[type=range] { width: 100%; accent-color: var(--y-text); height: 28px; margin: 0; }
.so-calc-out { background: var(--ink); color: var(--paper); padding: 40px; display: grid; gap: 14px; align-content: center; }
.so-calc-out .so-eyebrow { color: var(--y); }
.so-big { font-size: clamp(4rem, 10vw, 7rem); font-weight: 800; letter-spacing: -.05em; line-height: .9; color: var(--y); font-variant-numeric: tabular-nums; }
.so-big small { font-size: .35em; letter-spacing: -.02em; color: var(--paper); }
.so-calc-out p { color: #cfcfcb; }
.so-calc-out b { color: var(--paper); }
.so-calc-out .so-btn { justify-self: start; margin-top: 8px; }

/* teren */
.so-split { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; }
.so-split > img { border-radius: 24px; aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.so-split h2 { margin: .4rem 0 1rem; }
.so-split p { color: var(--mute); margin-bottom: 1.6rem; }
.so-phone { width: 210px; border-radius: 26px; border: 6px solid var(--ink); box-shadow: 0 24px 50px -20px rgba(0,0,0,.45); }

/* posnetki zaslona */
.so-shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.so-shots figure { margin: 0; }
.so-shots img { border-radius: 16px; border: 1px solid rgba(245,245,242,.12); box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
@media (hover: hover) { .so-shots figure:hover img { transform: translateY(-6px); } }
.so-shots figcaption { margin-top: 12px; color: #b6b6b2; font-size: .95rem; }

/* funkcije */
.so-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; }
.so-feats article { background: var(--paper); padding: 30px 26px; display: flex; flex-direction: column; gap: 10px; transition: background .25s; }
@media (hover: hover) { .so-feats article:hover { background: #fff; } }
.so-feats p { color: var(--mute); font-size: .95rem; flex: 1; }
.so-save { align-self: flex-start; font-size: .8rem; font-weight: 600; padding: .25rem .65rem; border-radius: 999px; background: rgba(246,194,28,.22); color: var(--y-text); }

/* paketi */
.so-toggle { display: inline-flex; padding: 5px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); margin-bottom: 28px; }
.so-toggle button { font: inherit; font-weight: 600; border: 0; background: none; padding: .6rem 1.2rem; border-radius: 999px; cursor: pointer; color: var(--mute); transition: background .2s, color .2s; }
.so-toggle button.on { background: var(--ink); color: var(--paper); }
.so-toggle em { font-style: normal; font-size: .75rem; margin-left: .4rem; padding: .1rem .5rem; border-radius: 999px; background: var(--y); color: var(--ink); }
.so-plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 900px; }
.so-plan { background: var(--paper); border: 1px solid var(--line); border-radius: 28px; padding: 34px; display: flex; flex-direction: column; gap: 6px; }
.so-plan.hot { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.so-plan.hot .so-muted { color: #b6b6b2; }
.so-plan h3 { font-size: 1.6rem; display: flex; align-items: center; gap: 10px; }
.so-pill { font-size: .75rem; font-weight: 600; padding: .25rem .6rem; border-radius: 999px; background: var(--y); color: var(--ink); letter-spacing: 0; }
.so-price { font-size: 3.4rem; font-weight: 800; letter-spacing: -.05em; margin-top: 14px; font-variant-numeric: tabular-nums; }
.so-price small { font-size: 1rem; font-weight: 500; letter-spacing: 0; opacity: .7; }
.so-plan ul { list-style: none; padding: 0; margin: 20px 0 26px; display: grid; gap: 10px; flex: 1; }
.so-plan li { padding-left: 28px; position: relative; }
.so-plan li::before { content: ""; position: absolute; left: 0; top: .35em; width: 16px; height: 16px; border-radius: 50%; background: var(--y) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23111213' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain; }
.so-plan .so-btn { justify-content: center; }

/* vprašanja */
.so-faq-wrap { display: grid; grid-template-columns: 1fr 1.4fr; gap: 48px; align-items: start; }
.so-faq details { border-bottom: 1px solid var(--line); padding: 20px 0; }
.so-faq summary { cursor: pointer; list-style: none; font-weight: 600; font-size: 1.1rem; display: flex; justify-content: space-between; gap: 16px; }
.so-faq summary::-webkit-details-marker { display: none; }
.so-faq summary::after { content: "+"; flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--paper-2); transition: transform .3s cubic-bezier(.2,.8,.2,1), background .2s; }
.so-faq details[open] summary::after { transform: rotate(45deg); background: var(--y); }
.so-faq p { margin-top: 12px; color: var(--mute); max-width: 60ch; }
.so-faq summary:focus-visible { outline: 3px solid var(--y); outline-offset: 4px; border-radius: 6px; }

/* zaključek */
.so-final { position: relative; padding: clamp(110px, 16vw, 200px) 0; color: var(--paper); overflow: hidden; background: var(--ink); }
.so-final > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.so-final::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(17,18,19,.85), rgba(17,18,19,.2)); }
.so-final .so-wrap { position: relative; z-index: 1; }
.so-final h2 { max-width: 14ch; margin-bottom: 2rem; }
.so-foot { display: flex; flex-wrap: wrap; gap: 12px 28px; padding: 28px 24px calc(28px + env(safe-area-inset-bottom)); justify-content: center; background: var(--ink); color: #9a9a96; font-size: .9rem; border-top: 1px solid rgba(245,245,242,.08); }
.so-foot a { text-decoration: none; } .so-foot a:hover { color: var(--paper); }

/* pojavljanje ob drsenju: brez JS je vsebina vidna */
.so-js .so [data-r] { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); }
.so-js .so [data-r].in { opacity: 1; transform: none; }

/* stran 404 */
.so-404 { min-height: 100vh; display: grid; place-items: center; text-align: center; background: var(--ink); color: var(--paper); padding: 24px; }
.so-404 h1 { font-size: clamp(2.4rem, 7vw, 4.5rem); margin: .6rem 0 1rem; }
.so-404 p { color: #b6b6b2; margin-bottom: 2rem; }

@media (max-width: 900px) {
  .so-nav nav { display: none; }
  .so-nav .so-btn { margin-left: auto; }
  .so-calc, .so-split, .so-plans, .so-faq-wrap { grid-template-columns: 1fr; }
  .so-feats { grid-template-columns: 1fr 1fr; }
  .so-stats { grid-template-columns: 1fr 1fr; }
  .so-calc-in, .so-calc-out { padding: 28px; }
  .so-faq-wrap { gap: 8px; }
}
@media (max-width: 860px) {
  .so-film .so-film-poster, .so-film-video { object-position: 70% 50%; }
  .so-film-shade { background: linear-gradient(0deg, rgba(17,18,19,.95) 0%, rgba(17,18,19,.75) 45%, rgba(17,18,19,.1) 75%); }
  .so-film-pin { align-items: flex-end; padding: 96px 16px calc(64px + env(safe-area-inset-bottom)); }
  .so-film-clock { top: 84px; bottom: auto; }
  .so-film-clock span { font-size: 2.4rem; }
}
@media (max-width: 600px) {
  .so { font-size: 16px; }
  .so-wrap { padding-left: 16px; padding-right: 16px; }
  .so-feats, .so-shots { grid-template-columns: 1fr; }
  .so-plan { padding: 26px; }
  .so-film h1, .so-film h2 { font-size: clamp(2.2rem, 10.5vw, 3rem); }
  .so-toggle button { padding: .6rem .9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .so *, .so *::before, .so *::after { animation: none !important; transition: none !important; }
  .so-js .so [data-r] { opacity: 1; transform: none; }
}