/* PelviCore Institut Zagreb — landing v1
   ============================================================================
   VISUAL REFRESH 2026-08-06 (Maja): "more luxurious, more modern, easier to
   read/use", referenced against theoriginway.com. NOT ONE WORD OF COPY CHANGED —
   this is purely type, colour, spacing, shape and section rhythm.

   WHAT THE REFERENCE ACTUALLY DOES (theoriginway.com), and what we took:
     1. No stark white anywhere. The page is a sequence of warm TONAL BANDS in one
        family; contrast comes from tone, not from borders. We dropped nearly every
        1px hairline card border — they were what made the old page read "template".
     2. Rounded geometric sans (Gopher) for display, at size, medium weight. Their
        headings are a SANS. Ours were a Didone at 600 with line-height 1.08, which
        is where "not modern / hard to read" came from: čćžšđ stack accents on top of
        hairline serifs and the whole thing closes up.
     3. Organic curves between sections instead of hard band edges.
     4. Big radii, generous padding, short measures, lots of air.

   WHAT WE DID *NOT* TAKE: their terracotta/wine palette. Maja's brief keeps blue as
   the accent, so the cobalt stays and the warm family becomes the ENVIRONMENT it
   sits in.

   Brand palette — resampled from the clinic's own photos, not invented:
     --blue      #1E3AAE  deep cobalt (unchanged — the accent)
     --blue-el   #2B35D0  electric klein blue = the armchair + the bench
     --sand/-2   #F4EDE4 / #EBE0D2  the textured greige reception wall
     --clay      #E0D0BD  the floor tile
     --olive     #6E7A5A  the velvet stools + chair
     --ink       #0D1533  deep navy, still in the blue family, never black

   Type system — REVISED 2026-08-06.
     The 2026-08-05 note below was right that the logo is the only specimen, and it
     is still honoured: the wordmark IS a Didone and the descriptor IS a geometric
     sans. What changed is WHICH of the two carries the page.
       --display  Outfit — geometric sans, the free face closest to the reference's
                  Gopher AND to the logo's "I N S T I T U T   Z A G R E B" lockup.
                  Carries every heading. Reads clean at 3rem with full diacritics.
       --serif    Bodoni Moda — DEMOTED from "everything" to an accent voice:
                  italic emphasis in the hero, pull-quotes, and the big numerals.
                  That is where a Didone is a luxury signal instead of a legibility
                  tax. It is still the logo's own letterform, just used sparingly.
       --sans     DM Sans — body. Replaces Jost, whose small x-height the old file
                  itself flagged ("the same px reads ~6% smaller") and then worked
                  around by shrinking everything else. DM Sans is also exactly what
                  the reference uses for body, and it is a big readability win.
     All three verified for čćžšđ ČĆŽŠĐ „" from the webfont:
       node shared/brand/font_from_logo.mjs verify --fonts "Outfit,DM Sans,Bodoni Moda"

   Signature shape — THE ARCH. The clinic's reception desk is a run of arches and
   the furniture is all soft domes. Every photo on this page is now arch-topped
   (--arch). It is the one motif that makes the page unmistakably theirs, and it is
   the reason the layout reads "designed" rather than "bootstrapped".

   Mobile-first. Every mobile override lives inside @media.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300..700&family=DM+Sans:ital,opsz,wght@0,9..40,300..700;1,9..40,300..700&family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..700;1,6..96,400..700&display=swap');

:root {
  /* Accent — blue stays the accent, per brief. */
  --blue: #1E3AAE;
  --blue-dk: #16297F;
  --blue-el: #2B35D0;
  --blue-soft: #EDF0FB;
  --blue-line: #DCE2F5;

  /* Warm environment — sampled from the clinic interior. */
  --cream: #FBF8F4;
  --sand: #F4EDE4;
  --sand-2: #EBE0D2;
  --clay: #E0D0BD;
  --olive: #6E7A5A;

  --ink: #0D1533;
  --ink-soft: #4C5470;
  --muted: #858CA3;
  --bg: var(--cream);
  --line: #E7DFD3;

  --radius: 20px;
  --radius-lg: 28px;
  --radius-xl: 36px;
  /* The arch. A SHALLOW dome — horizontal radius is half the width so the two top
     corners meet, vertical radius stays low so they meet in a soft curve instead of
     a gothic point. (First pass used 46%/30% and produced a pointed leaf shape.) */
  --arch: 50% 50% var(--radius-lg) var(--radius-lg) / 17% 17% var(--radius-lg) var(--radius-lg);
  --maxw: 1200px;

  --shadow: 0 40px 80px -44px rgba(13, 21, 51, .34);
  --shadow-sm: 0 18px 40px -26px rgba(13, 21, 51, .26);
  --shadow-card: 0 2px 4px -2px rgba(13,21,51,.05), 0 24px 48px -32px rgba(13,21,51,.22);

  --display: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Bodoni Moda", ui-serif, Georgia, "Times New Roman", serif;
  /* Logo descriptor lockup ("I N S T I T U T  Z A G R E B") — every eyebrow/label. */
  --track-lockup: .2em;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.7;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  overflow-x: clip;
  font-optical-sizing: auto;
}
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -.015em;
  color: var(--ink);
}
/* height:auto is REQUIRED, not cosmetic. The width/height attributes on <img> are a
   presentational hint that sets a used height in px, and `aspect-ratio` only computes
   a height when height is `auto` — without this the arch photos rendered at their full
   2133px intrinsic height. (.fade-slide sets height:100% and still wins on specificity.) */
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 26px; }

/* Shared eyebrow — the logo's tracked-caps descriptor, used page-wide. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--sans); font-weight: 500;
  font-size: .74rem; letter-spacing: var(--track-lockup);
  text-transform: uppercase; color: var(--blue); line-height: 1.5;
}
.eyebrow::before { content: ""; width: 24px; height: 1.5px; background: var(--blue); flex-shrink: 0; }

/* ===== Topbar ===== */
.topbar {
  background: rgba(251, 248, 244, .88);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(13, 21, 51, .07);
  position: sticky; top: 0; z-index: 50;
}
.topbar .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 78px; padding-top: 10px; padding-bottom: 10px;
}
.brand { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 0; color: var(--blue); }
/* logo-transparent.png: the supplied logo.png is black-on-OPAQUE-white, which drew a
   visible white box on the warm topbar. Regenerated with alpha = 255 - luminance so
   the anti-aliased edges survive. Original logo.png left in place untouched. */
.brand-logo { display: block; height: 44px; width: auto; max-width: 270px; }
.topbar-ctas { display: flex; align-items: center; gap: 10px; }
.tel {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-weight: 600; color: #fff; background: var(--blue);
  padding: 13px 22px; border-radius: 999px;
  font-size: .8rem; line-height: 1; letter-spacing: .03em;
  transition: background .18s, transform .12s, box-shadow .18s;
  min-height: 46px; white-space: nowrap;
  box-shadow: 0 10px 22px -12px rgba(30, 58, 174, .6);
}
.tel:hover { background: var(--blue-dk); transform: translateY(-1px); box-shadow: 0 14px 26px -12px rgba(30,58,174,.7); }
.tel svg { width: 16px; height: 16px; flex-shrink: 0; }
.tel-alt {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-weight: 600; color: var(--blue);
  background: transparent; border: 1.5px solid var(--blue-line);
  padding: 11px 18px; border-radius: 999px; font-size: .84rem; line-height: 1;
  transition: background .18s, border-color .18s;
  min-height: 46px; white-space: nowrap;
}
.tel-alt:hover { background: var(--blue-soft); border-color: var(--blue); }
.tel-alt svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ===== Hero =====
   Was: copy left, form right, and a large empty rectangle under the copy where the
   page just stopped. Now the left column carries an arch-framed brand photo in that
   dead space, and a soft cobalt brush-blob (their storefront artwork) sits behind. */
.hero {
  background:
    radial-gradient(1100px 620px at 88% -8%, rgba(43, 53, 208, .09), transparent 62%),
    radial-gradient(760px 520px at 4% 8%, rgba(224, 208, 189, .5), transparent 66%),
    linear-gradient(180deg, var(--sand) 0%, var(--cream) 78%);
  padding: 56px 0 96px;
  position: relative; overflow: hidden;
}
/* Organic brush swoosh — the same gesture as the blue artwork on their storefront glass. */
.hero::before {
  content: ""; position: absolute; pointer-events: none;
  width: 780px; height: 780px; right: -230px; top: -240px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'><path d='M60 210c-10-70 40-140 120-150 70-9 130 30 148 92 15 52-9 106-60 128-44 19-96 8-124-28' fill='none' stroke='%231E3AAE' stroke-width='34' stroke-linecap='round' opacity='.09'/><path d='M120 300c50 34 118 30 160-12 36-36 42-96 14-140' fill='none' stroke='%232B35D0' stroke-width='18' stroke-linecap='round' opacity='.08'/></svg>") center/contain no-repeat;
}
.hero .wrap {
  display: grid; grid-template-columns: 1.02fr .98fr; gap: 60px; align-items: start;
  position: relative; z-index: 1;
}
.hero-copy { padding-top: 10px; }
.hero h1 {
  font-family: var(--display); font-size: clamp(2.2rem, 4.4vw, 3.3rem);
  font-weight: 500; margin: 20px 0 22px; text-wrap: balance; line-height: 1.1;
  letter-spacing: -.022em; color: var(--ink);
}
/* The one place a Didone earns its keep: the client's own phrase, in their own letterform. */
.hero h1 em {
  font-family: var(--serif); font-style: italic; color: var(--blue);
  font-weight: 500; letter-spacing: 0;
}
.hero .lede {
  font-size: 1.09rem; color: var(--ink-soft); max-width: 48ch; margin-bottom: 30px;
  text-wrap: pretty; font-weight: 400; line-height: 1.72;
}
.hero-cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--blue); color: #fff; padding: 19px 34px; border-radius: 999px;
  font-family: var(--sans); font-weight: 600; font-size: .95rem; letter-spacing: .01em;
  box-shadow: 0 20px 40px -18px rgba(30, 58, 174, .62);
  transition: background .18s, transform .12s, box-shadow .18s;
}
.hero-cta:hover { background: var(--blue-dk); transform: translateY(-2px); box-shadow: 0 26px 48px -18px rgba(30,58,174,.7); }

/* Brand photos filling the old dead space under the hero copy.
   CROP RULE: both source photos are 1600x2133 (3:4 PORTRAIT). The first pass forced
   them into a 16/11 landscape box and a narrow .68fr column, which threw away most of
   each frame — the second one showed little more than blank wall. Both boxes are now
   PORTRAIT (4/5 ≈ 0.80 vs the source 0.75), so barely anything is cropped, and the
   columns are near-equal so neither photo is squeezed into a slot. object-position
   pulls each frame to where its subject actually sits. */
.hero-figure {
  margin-top: 40px; display: grid; grid-template-columns: 1.06fr .94fr;
  gap: 16px; align-items: end;
}
/* NO CROP (Maja, 2026-08-07). The box ratio EXACTLY matches the two source files
   (1125x1500 = 3:4 = 0.750), so object-fit:cover discards zero pixels and both people
   stay fully in frame. If either photo is ever swapped, match the new file's ratio here
   or the crop comes back. The arch only rounds the top corners; it never reaches a subject. */
.hero-figure img {
  width: 100%; aspect-ratio: 3/4; object-fit: cover;
  border-radius: var(--arch); box-shadow: var(--shadow);
}

/* ===== Form card (multi-step) ===== */
.hero-form-slot { position: sticky; top: 100px; }
.form-card {
  background: #fff; border: none; border-radius: var(--radius-xl);
  box-shadow: var(--shadow); overflow: hidden; position: relative;
}
.form-head {
  background: linear-gradient(140deg, var(--blue) 0%, var(--blue-el) 118%);
  color: #fff; padding: 28px 30px 24px; position: relative; overflow: hidden;
}
.form-head::after {
  content: ""; position: absolute; right: -70px; top: -90px; width: 240px; height: 240px;
  border-radius: 50%; background: rgba(255,255,255,.07);
}
.form-head .kicker {
  font-family: var(--sans); font-weight: 500; font-size: .68rem; letter-spacing: var(--track-lockup);
  text-transform: uppercase; color: rgba(255,255,255,.72); margin-bottom: 9px; position: relative;
}
.form-head h2 {
  font-family: var(--display); font-size: 1.5rem; font-weight: 500;
  color: #fff; line-height: 1.22; letter-spacing: -.018em; position: relative;
}
.form-head .sub {
  color: rgba(255,255,255,.8); font-size: .92rem; margin-top: 7px; font-weight: 400;
  line-height: 1.55; position: relative;
}
.progress { height: 3px; background: rgba(255,255,255,.16); position: relative; overflow: hidden; }
.progress .bar {
  position: absolute; inset: 0 auto 0 0; width: 25%; background: var(--sand-2);
  transition: width .45s cubic-bezier(.4,0,.2,1);
}
.form-body { padding: 28px 30px 30px; }

.step { display: none; }
.step.active { display: block; animation: stepIn .3s ease; }
@keyframes stepIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.step-q {
  font-family: var(--display); font-size: 1.2rem; font-weight: 500; color: var(--ink);
  line-height: 1.35; letter-spacing: -.012em; margin-bottom: 18px; text-wrap: balance;
}
.choices { display: grid; gap: 10px; }
.choices .choice {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--cream); border: 1.5px solid transparent; color: var(--ink);
  padding: 16px 18px; border-radius: 14px;
  font: inherit; font-family: var(--sans); font-weight: 500; font-size: .96rem; text-align: left;
  cursor: pointer; transition: border-color .18s, background .18s, transform .08s;
  width: 100%; min-height: 56px; line-height: 1.4;
}
.choices .choice:hover { border-color: var(--blue); background: var(--blue-soft); }
.choices .choice:active { transform: scale(.99); }
.choices .choice .arrow { color: var(--blue); font-weight: 600; font-size: 1.05rem; flex-shrink: 0; transition: transform .18s; }
.choices .choice:hover .arrow { transform: translateX(4px); }

.field { margin-bottom: 14px; }
.field label {
  display: block; font-size: .78rem; font-weight: 600; margin-bottom: 7px;
  color: var(--ink); letter-spacing: .01em;
}
.field label .opt { color: var(--muted); font-weight: 400; margin-left: 4px; }
.field input {
  width: 100%; padding: 15px 17px;
  border: 1.5px solid var(--blue-line); border-radius: 13px;
  font: inherit; font-family: var(--sans); background: #fff; color: var(--ink); font-weight: 400;
  transition: border-color .18s, box-shadow .18s;
}
.field input::placeholder { color: #A7AEC1; font-weight: 400; }
.field input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(30, 58, 174, .12); }

.consent-text { font-size: .78rem; color: var(--muted); line-height: 1.55; margin: 8px 0 14px; }
.consent {
  display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: flex-start;
  padding: 14px 16px; margin: 8px 0 16px;
  border: 1.5px solid var(--blue-line); border-radius: 13px; background: var(--cream);
  cursor: pointer; transition: border-color .18s, background .18s, box-shadow .18s;
}
.consent input[type=checkbox] { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--blue); cursor: pointer; }
.consent .consent-copy { font-size: .82rem; line-height: 1.55; color: var(--ink-soft); font-weight: 400; }
.consent .consent-copy a { color: var(--blue); font-weight: 600; border-bottom: 1px solid var(--blue-line); }
.consent .consent-copy a:hover { border-bottom-color: var(--blue); }
.consent:hover { border-color: var(--blue); }
.consent.attention {
  border-color: var(--blue-el); background: var(--blue-soft);
  box-shadow: 0 0 0 4px rgba(43, 53, 208, .16);
  animation: consent-shake .45s cubic-bezier(.36,.07,.19,.97) both;
}
.consent.attention .consent-copy { color: var(--blue-dk); }
.consent.attention .consent-copy a { color: var(--blue-dk); border-bottom-color: var(--blue-dk); }
@keyframes consent-shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}

.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; background: var(--blue); color: #fff; border: none;
  padding: 18px 24px; border-radius: 999px;
  font-family: var(--sans); font-weight: 600; font-size: .95rem; letter-spacing: .01em;
  cursor: pointer; transition: background .18s, transform .12s, box-shadow .18s;
  box-shadow: 0 18px 36px -16px rgba(30, 58, 174, .6);
}
.btn-primary:hover { background: var(--blue-dk); transform: translateY(-2px); }
.btn-primary[disabled] { opacity: .6; cursor: not-allowed; transform: none; }
.step-back {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; color: var(--muted); font: inherit; font-family: var(--sans);
  font-size: .84rem; font-weight: 500; cursor: pointer; margin-top: 14px; padding: 6px 0;
}
.step-back:hover { color: var(--blue); }

/* ===== Privacy modal ===== */
.privacy-modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 22px; }
.privacy-modal[aria-hidden="false"] { display: flex; }
.privacy-backdrop {
  position: absolute; inset: 0; background: rgba(13, 21, 51, .66);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  animation: privacy-fadein .18s ease-out;
}
.privacy-dialog {
  position: relative; z-index: 1; background: var(--cream); border-radius: var(--radius-xl);
  max-width: 720px; width: 100%; max-height: 90vh;
  display: flex; flex-direction: column;
  box-shadow: 0 50px 110px -24px rgba(13, 21, 51, .5);
  overflow: hidden; animation: privacy-slidein .24s ease-out;
}
.privacy-close {
  position: absolute; top: 14px; right: 16px; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%;
  border: none; background: var(--blue-soft); color: var(--blue);
  font-size: 1.4rem; line-height: 1; cursor: pointer; display: grid; place-items: center;
  transition: background .18s, color .18s;
}
.privacy-close:hover { background: var(--blue); color: #fff; }
.privacy-body { padding: 42px 44px 22px; overflow-y: auto; flex: 1; }
.privacy-body h2 {
  font-family: var(--display); font-size: 1.7rem; font-weight: 500;
  color: var(--ink); margin-bottom: 5px; letter-spacing: -.02em;
}
.privacy-updated { font-size: .78rem; color: var(--muted); font-weight: 400; margin-bottom: 22px; }
.privacy-body h3 {
  font-family: var(--display); font-size: 1.04rem; font-weight: 600;
  color: var(--blue); margin: 24px 0 8px; letter-spacing: -.008em;
}
.privacy-body p, .privacy-body li { font-size: .93rem; line-height: 1.68; color: var(--ink-soft); font-weight: 400; }
.privacy-body p { margin-bottom: 9px; }
.privacy-body ul { margin: 0 0 10px 20px; padding: 0; }
.privacy-body ul li { list-style: disc; padding-left: 4px; margin-bottom: 4px; }
.privacy-body a { color: var(--blue); font-weight: 600; border-bottom: 1px solid var(--blue-line); }
.privacy-body a:hover { border-bottom-color: var(--blue); }
.privacy-actions {
  border-top: 1px solid var(--line); padding: 18px 26px;
  display: flex; justify-content: flex-end; background: var(--sand);
}
.privacy-actions .btn-primary { width: auto; padding: 15px 26px; }
body.privacy-open { overflow: hidden; }
@keyframes privacy-fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes privacy-slidein { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

/* ===== Section shells =====
   Bands are tonal, and each one lifts onto the previous with a large top radius —
   the "stacked panels" flow that replaced the old hard white/sand edges. */
section.block { padding: 88px 0; position: relative; }
section.block.soft {
  background: var(--sand);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  margin-top: -1px;
}
section.block.soft + section.block:not(.soft) {
  background: var(--cream);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  margin-top: -32px; padding-top: 98px;
}
.sec-head { max-width: 800px; margin: 0 auto 52px; text-align: center; }
.sec-head .eyebrow { justify-content: center; display: inline-flex; margin-bottom: 18px; }
.block h2 {
  font-family: var(--display); font-size: clamp(1.85rem, 3.3vw, 2.7rem);
  font-weight: 500; text-align: center; margin-bottom: 18px;
  text-wrap: balance; line-height: 1.18; letter-spacing: -.022em;
}
.block .intro {
  text-align: center; color: var(--ink-soft); max-width: 64ch; margin: 0 auto;
  font-size: 1.05rem; text-wrap: pretty; font-weight: 400; line-height: 1.72;
}

/* ===== Pain cards ===== */
.pain-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  max-width: var(--maxw); margin: 0 auto; min-width: 0;
}
.pain-cards > * { min-width: 0; }
.pain-card {
  background: #fff; border: none; border-top: 4px solid var(--blue);
  border-radius: var(--radius-lg);
  padding: 34px 30px 32px; display: flex; flex-direction: column; gap: 14px;
  box-shadow: var(--shadow-card);
  position: relative; overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
/* The accent cap is a BORDER, not a pseudo-element. Both earlier attempts (a 44px stub,
   then a full-width absolutely-positioned bar) rendered with square ends detached from
   the card's 28px corner. A border-top is laid out inside the border-box and follows
   border-radius by definition, so it cannot desync from the corner. */
.pain-card:hover { transform: translateY(-4px); box-shadow: 0 4px 6px -3px rgba(13,21,51,.06), 0 34px 60px -34px rgba(13,21,51,.3); }
.pain-title {
  font-family: var(--display); font-size: 1.24rem; font-weight: 500;
  color: var(--ink); line-height: 1.3; letter-spacing: -.016em;
  text-wrap: balance; padding-bottom: 0; border-bottom: none;
}
.pain-body { color: var(--ink-soft); font-size: .97rem; line-height: 1.7; font-weight: 400; text-wrap: pretty; }
.pain-list {
  list-style: none; display: grid; gap: 10px; margin: 0;
  padding: 20px 0 0; border-top: 1px solid var(--line);
}
.pain-list li {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: .92rem; color: var(--ink); font-weight: 400; line-height: 1.5;
}
.pain-list li::before {
  content: ""; min-width: 7px; height: 7px; border-radius: 50%;
  background: var(--blue); flex-shrink: 0; margin-top: 9px;
}
/* Legacy tag/quote elements kept styled in case markup reuses them. */
.pain-tag {
  align-self: flex-start; background: var(--blue-soft); color: var(--blue);
  font-family: var(--sans); font-weight: 600; font-size: .7rem;
  letter-spacing: var(--track-lockup); text-transform: uppercase;
  padding: 7px 13px; border-radius: 999px; line-height: 1.3;
}
.pain-quote {
  font-family: var(--serif); font-size: 1.06rem; font-weight: 500; color: var(--blue);
  line-height: 1.45; font-style: italic; border-left: 2px solid var(--blue); padding-left: 16px;
}

/* ===== Proof (quotes + arch photo) ===== */
.proof-grid {
  display: grid; grid-template-columns: 1.08fr .92fr; gap: 60px;
  align-items: center; max-width: var(--maxw); margin: 0 auto; min-width: 0;
}
.proof-grid > * { min-width: 0; }
.proof-quotes { display: grid; gap: 18px; }
.proof-quote {
  background: #fff; border: none; border-left: 4px solid var(--blue);
  border-radius: var(--radius-lg); padding: 30px 32px 30px 34px;
  box-shadow: var(--shadow-card); position: relative;
}
/* Accent rule, not a glyph, and a BORDER not a pseudo-element (same corner-sync reason
   as .pain-card). A Bodoni "”" at 3.4rem/16% opacity rendered as two tiny specks that
   read as a bug, and the copy already carries its own „ " marks. */
.proof-quote p {
  font-family: var(--display); font-size: 1.09rem; font-weight: 400;
  color: var(--ink); font-style: normal; line-height: 1.62; text-wrap: pretty;
  letter-spacing: -.008em; position: relative;
}
.proof-visual img {
  width: 100%; aspect-ratio: 5/6; object-fit: cover;
  border-radius: var(--arch); box-shadow: var(--shadow);
}

/* ===== Benefits ===== */
.benefits {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 22px;
  max-width: var(--maxw); margin: 0 auto;
}
.bcard {
  background: transparent; border: none; border-radius: var(--radius-lg);
  box-shadow: none; padding: 22px 26px 22px 0; display: flex; flex-direction: column; gap: 10px;
}
.bcard .bicon {
  width: 54px; height: 54px; border-radius: 16px;
  background: var(--blue-soft); display: grid; place-items: center; color: var(--blue);
  border: none; margin-bottom: 8px;
}
.bcard .bicon svg { width: 26px; height: 26px; stroke-width: 1.5; }
.bcard h3 {
  font-family: var(--display); font-size: 1.14rem; font-weight: 500;
  color: var(--ink); letter-spacing: -.014em; line-height: 1.32;
}
.bcard p { color: var(--ink-soft); font-size: .96rem; font-weight: 400; line-height: 1.68; }

/* ===== Differentiators (split: copy + arch slideshow) ===== */
.diff-split {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 68px;
  align-items: center; max-width: var(--maxw); margin: 0 auto; min-width: 0;
}
.diff-split > * { min-width: 0; }
.diff-copy h2 { text-align: left; margin-bottom: 14px; font-size: clamp(1.8rem, 3.1vw, 2.5rem); }
.diff-intro {
  color: var(--ink-soft); font-size: 1.05rem; line-height: 1.7; font-weight: 400;
  margin-bottom: 34px; text-wrap: pretty;
}
.diffs { display: grid; grid-template-columns: 1fr; gap: 4px; max-width: none; }
.diff {
  display: flex; gap: 20px; align-items: flex-start;
  padding: 22px 0; background: transparent; border: none;
  border-bottom: 1px solid var(--line); border-radius: 0;
}
.diff:last-child { border-bottom: none; }
/* Big Didone numerals — the luxury signal, in the logo's own letterform. */
.diff .num {
  min-width: 42px; height: auto; border-radius: 0; background: none;
  color: var(--blue); display: block; text-align: left;
  font-family: var(--serif); font-weight: 500; font-size: 1.9rem; line-height: 1.05;
  flex-shrink: 0; letter-spacing: 0;
}
.diff h4 {
  font-family: var(--display); font-weight: 500; font-size: 1.06rem;
  color: var(--ink); margin-bottom: 6px; letter-spacing: -.014em; line-height: 1.35;
}
.diff p { color: var(--ink-soft); font-size: .95rem; line-height: 1.65; font-weight: 400; }

.diff-media { position: relative; }
.fade-slideshow {
  position: relative; width: 100%; aspect-ratio: 5/6;
  border-radius: var(--arch); overflow: hidden;
  box-shadow: var(--shadow); background: var(--sand-2); min-width: 0;
}
.fade-slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .7s ease-in-out; will-change: opacity;
}
.fade-slide.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .fade-slide { transition: none; } }

/* ===== Offer — full-bleed cobalt panel, the page's one dark moment ===== */
section.block.soft#ponuda { background: var(--sand); }
.offer-card {
  max-width: var(--maxw); margin: 0 auto;
  background: linear-gradient(142deg, var(--blue) 0%, var(--blue-el) 128%);
  border: none; border-top: none; border-radius: var(--radius-xl);
  padding: 60px 64px 58px; box-shadow: 0 50px 90px -46px rgba(30, 58, 174, .58);
  text-align: left; position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 60px; align-items: center;
}
.offer-card::before {
  content: ""; position: absolute; right: -140px; bottom: -180px;
  width: 460px; height: 460px; border-radius: 50%;
  background: rgba(255, 255, 255, .06); pointer-events: none;
}
.offer-body { position: relative; z-index: 1; }
.offer-card h2 { color: #fff; text-align: left; margin-bottom: 16px; }
.offer-card .offer-lede {
  color: rgba(255, 255, 255, .85); font-size: 1.03rem; line-height: 1.72;
  max-width: 58ch; margin: 0 0 28px; font-weight: 400;
}
.offer-card ul {
  list-style: none; display: grid; gap: 13px; text-align: left; max-width: none; margin: 0 0 34px;
}
.offer-card ul li {
  display: flex; gap: 13px; align-items: flex-start;
  font-size: .99rem; color: #fff; font-weight: 400; line-height: 1.55;
}
.offer-card ul li::before {
  content: ""; min-width: 23px; height: 23px; border-radius: 50%;
  background-color: rgba(255, 255, 255, .16); flex-shrink: 0; margin-top: 3px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 9' fill='none'><path d='M1 4.5 4.2 7.6 10 1.4' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-position: center; background-repeat: no-repeat; background-size: 11px 9px;
}
/* On cobalt the blue CTA would vanish — invert to white with blue type. */
.offer-card .offer-cta {
  margin-top: 0; background: #fff; color: var(--blue);
  box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .35);
}
.offer-card .offer-cta:hover { background: var(--sand); color: var(--blue-dk); }
.offer-card .offer-friction {
  color: rgba(255, 255, 255, .68); font-size: .89rem; margin-top: 18px; font-weight: 400;
}
.offer-visual { position: relative; z-index: 1; }
.offer-visual img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover;
  border-radius: var(--arch);
  box-shadow: 0 40px 70px -34px rgba(0, 0, 0, .5);
}

/* ===== FAQ — borderless, hairline-separated, bigger tap targets ===== */
.faq { max-width: 860px; margin: 0 auto; display: grid; gap: 0; }
.faq details {
  background: transparent; border: none; border-bottom: 1px solid var(--line);
  border-radius: 0; padding: 0; box-shadow: none;
}
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary {
  cursor: pointer; font-weight: 500; padding: 26px 0; list-style: none;
  font-size: 1.12rem; color: var(--ink);
  display: flex; justify-content: space-between; gap: 20px; align-items: center;
  font-family: var(--display); letter-spacing: -.014em; line-height: 1.35;
  transition: color .18s;
}
.faq summary:hover { color: var(--blue); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  background: var(--blue-soft) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M6 1v10M1 6h10' stroke='%231E3AAE' stroke-width='1.8' stroke-linecap='round'/></svg>") center/12px no-repeat;
  transition: transform .25s ease, background-color .18s;
}
.faq details[open] summary::after {
  transform: rotate(135deg); background-color: var(--blue);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M6 1v10M1 6h10' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round'/></svg>");
}
.faq details p {
  color: var(--ink-soft); padding: 0 60px 28px 0; text-wrap: pretty;
  font-weight: 400; line-height: 1.75; font-size: 1rem;
}

/* ===== Full-stop CTA band ===== */
.ctaband {
  background: linear-gradient(140deg, var(--ink) 0%, #16225C 55%, var(--blue-dk) 100%);
  color: #fff; text-align: center; position: relative; overflow: hidden;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0; margin-top: -1px;
}
.ctaband::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(820px 380px at 50% -10%, rgba(43, 53, 208, .32), transparent 68%);
}
.ctaband .wrap { padding: 86px 26px 90px; position: relative; }
.ctaband h2 { color: #fff; font-size: clamp(1.9rem, 3.4vw, 2.8rem); margin-bottom: 26px; max-width: 20ch; margin-inline: auto; }
.ctaband ul {
  list-style: none; display: grid; gap: 14px; max-width: 660px; margin: 0 auto 40px; text-align: left;
}
.ctaband ul li {
  display: flex; gap: 14px; align-items: flex-start;
  color: rgba(255,255,255,.86); font-size: 1.02rem; font-weight: 400; line-height: 1.68;
}
.ctaband ul li::before {
  content: ""; min-width: 23px; height: 23px; border-radius: 50%;
  background-color: rgba(255,255,255,.14); flex-shrink: 0; margin-top: 5px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 9' fill='none'><path d='M1 4.5 4.2 7.6 10 1.4' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-position: center; background-repeat: no-repeat; background-size: 11px 9px;
}
.ctaband .final-cta {
  display: inline-flex; align-items: center; gap: 10px; background: #fff; color: var(--blue);
  padding: 20px 40px; border-radius: 999px;
  font-family: var(--sans); font-weight: 600; font-size: .98rem; letter-spacing: .01em;
  box-shadow: 0 24px 48px -18px rgba(0, 0, 0, .5);
  transition: background .18s, transform .12s;
}
.ctaband .final-cta:hover { background: var(--sand); transform: translateY(-2px); }

/* ===== Footer ===== */
footer { background: #070B1E; color: #99A0BA; font-size: .92rem; }
footer .wrap {
  padding: 74px 26px 34px;
  display: grid; grid-template-columns: 1.3fr .9fr .9fr; gap: 44px;
}
footer a { color: #fff; }
footer .ft-head {
  font-weight: 500; color: #fff; margin-bottom: 16px; display: block;
  font-size: .72rem; letter-spacing: var(--track-lockup); text-transform: uppercase; font-family: var(--sans);
}
footer .contact-line { display: block; line-height: 2; color: #C9CFE4; }
footer .contact-line a { color: #fff; border-bottom: 1px solid rgba(201,207,228,.22); transition: border-color .18s; }
footer .contact-line a:hover { border-bottom-color: var(--blue-el); }
footer .ft-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
footer .ft-brand .mark {
  width: 44px; height: 44px; border-radius: 13px;
  background: var(--blue); color: #fff; font-weight: 500;
  display: grid; place-items: center; font-family: var(--serif); font-size: 1.2rem;
}
footer .ft-brand b { color: #fff; font-size: 1.14rem; font-weight: 500; font-family: var(--display); letter-spacing: -.014em; }
footer p.ft-desc { color: #99A0BA; line-height: 1.7; font-weight: 400; margin-top: 6px; max-width: 42ch; }
footer .legal {
  grid-column: 1 / -1; border-top: 1px solid #161C36; padding-top: 26px;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: .82rem; color: #6B7290; margin-top: 12px;
}

/* ===== Sticky mobile call button ===== */
.sticky-call {
  display: none; position: fixed; bottom: 16px; left: 16px; right: 16px; z-index: 60;
  background: var(--blue); color: #fff; font-weight: 600; padding: 17px 20px;
  border-radius: 999px; text-align: center;
  box-shadow: 0 18px 38px -12px rgba(30, 58, 174, .62);
  font-size: .95rem; letter-spacing: .01em;
}
.sticky-call:hover { background: var(--blue-dk); }

/* ===== Trust strip (kept for markup compatibility) ===== */
.trust-strip { background: var(--blue); color: #fff; }
.trust-strip .wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 34px 26px; text-align: center; }
.trust-item { padding: 6px 22px; position: relative; }
.trust-item + .trust-item::before { content: ""; position: absolute; left: 0; top: 14%; bottom: 14%; width: 1px; background: rgba(255,255,255,.16); }
.trust-item .n { font-family: var(--serif); font-weight: 500; font-size: 2rem; color: var(--sand); line-height: 1; margin-bottom: 6px; }
.trust-item .l { font-size: .9rem; color: #D6DBEE; font-weight: 400; line-height: 1.5; }

/* ===== Mobile ===== */
@media (max-width: 1024px) {
  .offer-card { grid-template-columns: 1fr; gap: 40px; padding: 52px 44px 48px; }
  .offer-visual img { aspect-ratio: 16/10; }
  .benefits { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 960px) {
  .hero { padding: 40px 0 72px; }
  .hero .wrap { grid-template-columns: 1fr; gap: 34px; }
  .hero .lede { max-width: none; }
  /* Forma iznad copyja na mobitelu */
  .hero-form-slot { order: -1; position: static; }
  .hero::before { width: 460px; height: 460px; right: -180px; top: -150px; }
  /* Two columns are KEPT on mobile. Stacking them one-per-row at 16/11 was forcing a
     landscape crop on 3:4 portrait photos (box 1.455 vs natural 0.750) and cutting the
     people out — the exact thing the no-crop rule above exists to prevent. */
  .hero-figure { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 30px; }

  .trust-strip .wrap { grid-template-columns: 1fr; gap: 20px; padding: 28px 22px; }
  .trust-item + .trust-item::before { display: none; }
  .trust-item { padding: 12px 0; border-top: 1px solid rgba(255,255,255,.14); }
  .trust-item:first-child { border-top: 0; }

  .pain-cards { grid-template-columns: 1fr; gap: 18px; }
  .proof-grid { grid-template-columns: 1fr; gap: 34px; }
  .proof-visual img { aspect-ratio: 16/11; }
  .benefits { grid-template-columns: 1fr; gap: 4px; }
  .bcard { padding: 22px 0; border-bottom: 1px solid var(--line); }
  .bcard:last-child { border-bottom: none; }
  .diff-split { grid-template-columns: 1fr; gap: 38px; }
  .diff-copy h2 { text-align: center; }
  .diff-intro { text-align: center; }
  .fade-slideshow { aspect-ratio: 16/11; max-height: 460px; }

  footer .wrap { grid-template-columns: 1fr; gap: 30px; padding: 56px 26px 30px; }

  .brand-logo { height: 38px; }
  .tel { padding: 12px 18px; font-size: .78rem; }
  .tel-alt { padding: 0; width: 46px; height: 46px; justify-content: center; gap: 0; }
  .tel-alt span { display: none; }
  .topbar-ctas { gap: 8px; }
  .topbar .wrap { min-height: 68px; }

  .sticky-call { display: block; }
  body { padding-bottom: 88px; }
  section.block { padding: 66px 0; }
  section.block.soft + section.block:not(.soft) { margin-top: -28px; padding-top: 76px; }
  .sec-head { margin-bottom: 40px; }
  .ctaband .wrap { padding: 72px 26px 76px; }
}

@media (max-width: 640px) {
  .wrap { padding: 0 20px; }
  /* The "Zakažite konzultacije" pill cannot fit next to the logo at 390px — it was
     running off the right edge (hidden only by overflow-x:clip, so it read as a broken
     nav). It is also redundant here: the form is ordered ABOVE the hero copy on mobile
     and the sticky call bar is always on screen. Keep the phone icon, drop the pill. */
  .tel { display: none; }
  .tel-alt { border-color: var(--blue); }
  .brand-logo { height: 34px; }
  .hero h1 { font-size: 2rem; line-height: 1.14; }
  .hero .lede { font-size: 1.02rem; }
  /* "Zakažite besplatne konzultacije →" is ~31 chars; at 390px inside the offer card's
     padding it broke with the arrow orphaned on line 2. Trim the box, not the words. */
  .hero-cta { width: 100%; justify-content: center; padding: 17px 18px; font-size: .89rem; }
  .hero-cta, .ctaband .final-cta, .offer-card .offer-cta { white-space: nowrap; }
  .form-body { padding: 22px 22px 24px; }
  .form-head { padding: 24px 22px 20px; }
  .form-head h2 { font-size: 1.3rem; }
  .step-q { font-size: 1.1rem; }
  .choices .choice { padding: 15px 16px; font-size: .94rem; min-height: 54px; }
  .pain-card { padding: 30px 24px 28px; }
  .pain-card::before { left: 24px; }
  .offer-card { padding: 40px 26px 38px; border-radius: var(--radius-lg); }
  .offer-card .offer-cta { width: 100%; justify-content: center; }
  .proof-quote { padding: 26px 24px 26px 26px; }
  .proof-quote::before { left: 18px; font-size: 2.8rem; }
  .faq summary { font-size: 1.02rem; padding: 22px 0; gap: 14px; }
  .faq details p { padding-right: 34px; }
  .privacy-modal { padding: 12px; }
  .privacy-body { padding: 30px 24px 16px; }
  .privacy-body h2 { font-size: 1.4rem; }
  .privacy-actions { padding: 14px 20px; }
  .ctaband ul li { font-size: .98rem; }
  .ctaband .final-cta { width: 100%; justify-content: center; padding: 18px 26px; }
}