/*
Theme Name: Keystone Hotel Consulting
Theme URI: https://keystonehotelconsulting.com
Author: Vladimir Goranović
Description: Tema za Keystone Hotel Consulting. Pet strana po jeziku (SR/EN): početna, plan, sistem, cene i Keystone. Sadrži kalkulator plana predotvaranja.
Version: 2.6
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: keystone
*/

/* ============================================================
   KEYSTONE HOTEL CONSULTING
   Tokens
   ============================================================ */
:root{
  color-scheme: dark;

  /* base — deep warm charcoal, brown cast (hotel at night) */
  --void:      #100E0B;
  --stone:     #17130F;
  --ash:       #1E1913;
  --rule:      #2B2419;
  --rule-soft: #201A13;

  /* brass — restrained, antique, never neon */
  --brass:     #C2A05C;
  --brass-lo:  #8A7340;
  --brass-fog: rgba(194,160,92,.13);

  /* paper — operational documents read as the light in a dark room */
  --paper:     #F7F5F1;
  --paper-2:   #EBE7E0;
  --ink:       #1A1714;
  --ink-2:     #56504A;

  /* type on dark */
  --fg:        #F1EDE6;
  --fg-2:      #B6AFA6;
  --fg-3:      #8C857C;

  /* operational status */
  --ok:        #6E8B63;
  --wip:       #B08D4A;
  --block:     #A4563F;

  --f-display: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --f-ui: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --gutter: clamp(20px, 5vw, 64px);
  --maxw: 1280px;
  --ref-col: 128px;

  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-sizing: border-box;
}
html{ scroll-padding-top: calc(72px + env(safe-area-inset-top, 0px)); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

*,*::before,*::after{ box-sizing: border-box; }
body{
  margin:0;
  background: var(--void);
  color: var(--fg);
  font-family: var(--f-ui);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img,svg{ max-width:100%; }
a{ color: inherit; }
button{ font: inherit; color: inherit; }

:focus-visible{ outline: 2px solid var(--brass); outline-offset: 3px; }

/* ============================================================
   Type scale
   ============================================================ */
.display{
  font-family: var(--f-display);
  font-weight: 600;
  text-transform: uppercase;
  line-height: .94;
  letter-spacing: .005em;
  margin: 0;
  color: var(--fg);
}
h1.display{ font-size: clamp(2.6rem, 8.4vw, 6.1rem); }
h2.display{ font-size: clamp(2rem, 5.2vw, 3.6rem); }
h3.display{ font-size: clamp(1.35rem, 2.6vw, 1.85rem); line-height:1.02; }

.lede{
  font-family: var(--f-display);
  text-transform: none;
  font-weight: 400;
  font-size: clamp(1.12rem, 2.1vw, 1.45rem);
  line-height: 1.52;
  color: var(--fg-2);
  max-width: 34em;
  margin: 0;
}
p{ margin: 0 0 1.05em; max-width: 68ch; }
p:last-child{ margin-bottom:0; }
.muted{ color: var(--fg-2); }
.small{ font-size: .875rem; line-height:1.55; }
.tiny{ font-size: .75rem; letter-spacing:.06em; }

/* ============================================================
   Shell / section grid — the dossier margin
   ============================================================ */
.wrap{ width:100%; max-width: var(--maxw); margin:0 auto; padding-inline: var(--gutter); }

.sec{ padding-block: clamp(64px, 9vw, 132px); border-top: 1px solid var(--rule-soft); position: relative; }
.sec--plain{ border-top: 0; }

.grid{ display:grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: 1fr; }
.grid > *, .hero__in > *, .sop > *, .tpl > *, .cred > *, .price > *,
.keyline > *, .foot__grid > *, .tpl__forms > *, .device, .device__screen{ min-width: 0; }
.xl__scroll{ max-width: 100%; }
@media (min-width: 900px){
  .grid{ grid-template-columns: var(--ref-col) minmax(0,1fr); gap: 56px; }
}
.ref{
  font-family: var(--f-ui);
  font-size:.7rem;
  letter-spacing:.14em;
  color: var(--fg-3);
  text-transform: uppercase;
  border-top: 1px solid var(--brass-lo);
  padding-top: 10px;
  align-self: start;
}
.ref b{ display:block; color: var(--brass); font-weight:500; font-size:.92rem; letter-spacing:.06em; margin-bottom:2px; }
@media (min-width:900px){ .ref{ position: sticky; top: 104px; } }

.sec-head{ max-width: 46rem; }
.sec-head .lede{ margin-top: 22px; }

/* ============================================================
   Navigation
   ============================================================ */
.nav{
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 60;
  background: rgba(16,14,11,.82);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-bottom: 1px solid var(--rule-soft);
}
.nav__in{ display:flex; align-items:center; gap: 28px; height: 68px; }
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; flex:0 0 auto; }
.brand svg{ width:19px; height:22px; display:block; flex:0 0 auto; }
.brand__t{ line-height:1.2; }
.brand__t b{
  display:block; font-family: var(--f-display); font-weight:600;
  text-transform: uppercase; letter-spacing:.12em; font-size:.84rem; color: var(--fg);
}
.brand__t span{ display:block; font-size:.58rem; letter-spacing:.17em; text-transform:uppercase; color: var(--fg-2); margin-top:3px; }

.nav__links{ display:none; gap: 26px; margin-left:auto; }
@media (min-width: 1040px){ .nav__links{ display:flex; } }
.nav__links a{
  text-decoration:none; font-size:.76rem; letter-spacing:.11em; text-transform:uppercase;
  color: var(--fg-2); padding: 6px 0; border-bottom:1px solid transparent; transition: color .2s, border-color .2s;
}
.nav__links a:hover{ color: var(--fg); border-bottom-color: var(--brass); }
.nav__cta{ margin-left:auto; }
@media (min-width:1040px){ .nav__cta{ margin-left: 8px; } }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-size:.78rem; letter-spacing:.13em; text-transform:uppercase; font-weight:500;
  padding: 14px 24px; border-radius: 0; text-decoration:none; cursor:pointer;
  border: 1px solid var(--brass); background: var(--brass); color: #171205;
  transition: background .22s ease, color .22s ease, border-color .22s ease;
}
.btn:hover{ background: #D6B46D; border-color:#D6B46D; }
.btn--ghost{ background: transparent; color: var(--fg); border-color: var(--rule); }
.btn--ghost:hover{ background: transparent; color: var(--brass); border-color: var(--brass); }
.btn--sm{ padding: 10px 18px; font-size:.7rem; white-space:nowrap; }
@media (max-width: 479px){ .nav__cta{ padding: 9px 12px; font-size:.63rem; letter-spacing:.09em; } .nav__in{ gap:12px; } }
.btn--wide{ width:100%; }
.btn--lg{ padding: 18px 34px; font-size:.82rem; }

/* ============================================================
   Hero
   ============================================================ */
.hero{ position: relative; overflow: hidden; padding-block: clamp(52px, 8vw, 108px) clamp(48px, 7vw, 96px); }
.hero__plan{
  position:absolute; inset:-10% -5% auto -5%; height: 120%; width:110%;
  opacity:.5; pointer-events:none; z-index:0;
  -webkit-mask-image: radial-gradient(120% 85% at 78% 22%, #000 8%, transparent 72%);
  mask-image: radial-gradient(120% 85% at 78% 22%, #000 8%, transparent 72%);
}
.hero__glow{
  position:absolute; top:-28%; right:-14%; width: 78vw; height: 78vw; max-width:1000px; max-height:1000px;
  background: radial-gradient(circle, rgba(194,160,92,.15) 0%, rgba(194,160,92,.05) 34%, transparent 66%);
  pointer-events:none; z-index:0;
}
.hero__in{ position:relative; z-index:2; display:grid; gap: clamp(40px,6vw,64px); grid-template-columns:1fr; align-items:center; }
@media (min-width: 1040px){ .hero__in{ grid-template-columns: minmax(0,1.02fr) minmax(0,1fr); gap: 60px; } }

.eyebrow{
  display:flex; align-items:center; gap:12px;
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color: var(--brass);
  margin-bottom: 26px;
}
.eyebrow::after{ content:""; height:1px; flex:1 1 40px; max-width:88px; background: linear-gradient(90deg, var(--brass-lo), transparent); }

h1.display .ln{ display:block; }
.hero__rule{ height:1px; background: linear-gradient(90deg, var(--brass) 0%, var(--brass-lo) 18%, var(--rule) 58%, transparent 100%); margin: 30px 0 26px; }
.hero__product{
  font-family: var(--f-display); font-weight:400; text-transform: uppercase;
  font-size: clamp(.98rem, 2vw, 1.28rem); letter-spacing:.07em; line-height:1.3; color: var(--fg);
  margin:0 0 16px;
}
.hero__sub{ max-width: 33em; color: var(--fg-2); font-size: 1.02rem; }
.hero__acts{ display:flex; flex-wrap:wrap; gap: 12px; margin-top: 32px; }
.hero__acts .btn{ flex: 1 1 auto; min-width: 190px; }
@media (min-width:560px){ .hero__acts .btn{ flex:0 0 auto; } }
.hero__meta{ display:flex; flex-wrap:wrap; gap: 8px 22px; margin-top: 28px; font-size:.76rem; letter-spacing:.04em; color: var(--fg-3); }
.hero__meta span{ display:inline-flex; align-items:center; gap:8px; }
.hero__meta span::before{ content:""; width:4px; height:4px; background: var(--brass-lo); flex:0 0 auto; }

/* Hero artifact stack: the operational documents, lit */
.stack{ position:relative; perspective: 1600px; }
.stack__inner{
  position:relative; transform-style: preserve-3d;
  transform: rotateX(7deg) rotateY(-13deg) rotateZ(1deg);
  padding: 15px 0 15px 15%;
}
@media (max-width: 1039px){ .stack__inner{ transform: rotateX(4deg) rotateY(-7deg); padding-left: 13%; } }

.sheet{
  background: var(--paper); color: var(--ink);
  box-shadow: 0 34px 70px -28px rgba(0,0,0,.92), 0 2px 0 rgba(255,255,255,.05) inset;
  border: 1px solid rgba(0,0,0,.35);
}
.sheet--dash{ position: relative; transform: translateZ(70px); }
.sheet--sop{
  position:absolute; width: 44%; left: 0; bottom: -17%;
  transform: translateZ(34px) rotate(-3.4deg);
}
.sheet--chk{
  position:absolute; width: 34%; right: -2%; top: -16%;
  transform: translateZ(4px) rotate(2.8deg);
}
/* On small screens the dashboard stands alone — readability over composition */
@media (max-width: 767px){
  .stack__inner{ transform: rotate(-1.2deg); padding: 0; }
  .sheet--sop, .sheet--chk{ display:none; }
  .stack{ margin-top: 8px; }
}

/* mini excel inside hero */
.mini{ font-size: clamp(.5rem,1.35vw,.66rem); line-height:1.35; }
.mini__bar{ display:flex; align-items:center; gap:7px; padding:8px 10px; background:#E6E2DA; border-bottom:1px solid #CFC9BF; }
.mini__dot{ width:7px;height:7px;border-radius:50%;background:#C3BCB1; }
.mini__title{ margin-left:6px; color:#5A544C; letter-spacing:.05em; font-size:.62em; text-transform:uppercase; }
.mini__kpis{ display:grid; grid-template-columns: repeat(4,1fr); border-bottom:1px solid #DBD5CB; }
.mini__kpi{ padding:9px 10px; border-right:1px solid #E4DFD6; }
.mini__kpi:last-child{ border-right:0; }
.mini__kpi i{ display:block; font-style:normal; font-size:.62em; letter-spacing:.11em; text-transform:uppercase; color:#8A8378; }
.mini__kpi b{ display:block; font-size:1.55em; font-weight:500; color:var(--ink); font-variant-numeric: tabular-nums; margin-top:2px; }
.mini table{ width:100%; border-collapse:collapse; }
.mini th{ background:#EFEBE4; color:#6B655C; font-weight:500; font-size:.94em; letter-spacing:.06em; text-transform:uppercase; text-align:left; padding:6px 8px; border-bottom:1px solid #D6D0C6; }
.mini td{ padding:5px 8px; border-bottom:1px solid #E8E3DB; color:#3B3630; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini tr:nth-child(even) td{ background:#FBFAF7; }

/* sop sheet + checklist sheet */
.doc{ padding: 16px 16px 18px; font-size: clamp(.5rem,1.25vw,.64rem); line-height:1.5; }
.doc__hd{ border-bottom:1.5px solid var(--ink); padding-bottom:7px; margin-bottom:9px; }
.doc__hd b{ display:block; font-family: var(--f-display); font-size:1.32em; text-transform:uppercase; letter-spacing:.05em; line-height:1.15; }
.doc__hd span{ display:block; font-size:.9em; color: var(--ink-2); letter-spacing:.09em; text-transform:uppercase; margin-top:3px; }
.doc__row{ display:flex; justify-content:space-between; gap:8px; color:var(--ink-2); border-bottom:1px dotted #C9C3B9; padding:3px 0; }
.doc__step{ display:flex; gap:7px; padding:3px 0; color:#3B3630; }
.doc__step i{ font-style:normal; color: var(--brass-lo); font-variant-numeric:tabular-nums; }
.doc__sig{ display:flex; gap:10px; margin-top:11px; }
.doc__sig div{ flex:1; border-top:1px solid #9F998F; padding-top:4px; font-size:.86em; color:#8A8378; letter-spacing:.06em; text-transform:uppercase; }
.doc__ck{ display:flex; align-items:center; gap:7px; padding:4px 0; border-bottom:1px solid #E8E3DB; color:#3B3630; }
.doc__box{ width:9px;height:9px;border:1px solid #6E675E; flex:0 0 auto; }
.doc__box--on{ background: var(--ink); border-color: var(--ink); }

/* entrance: one orchestrated moment */
@media (prefers-reduced-motion: no-preference){
  .rise{ opacity:0; transform: translateY(16px); animation: rise .9s cubic-bezier(.22,.7,.3,1) forwards; }
  .d1{ animation-delay:.05s } .d2{ animation-delay:.16s } .d3{ animation-delay:.27s } .d4{ animation-delay:.38s } .d5{ animation-delay:.5s }
  @keyframes rise{ to{ opacity:1; transform:none; } }
  .stack{ opacity:0; animation: rise 1.25s .34s cubic-bezier(.22,.7,.3,1) forwards; }
}

/* ============================================================
   Marquee
   ============================================================ */
.marq{ border-block:1px solid var(--rule-soft); background: var(--stone); overflow:hidden; padding: 15px 0; }
.marq__track{ display:flex; width:max-content; animation: slide 46s linear infinite; }
.marq__track span{
  font-size:.74rem; letter-spacing:.24em; text-transform:uppercase; color: var(--fg-3);
  padding-inline: 20px; white-space:nowrap; display:inline-flex; align-items:center; gap:20px;
}
.marq__track span::after{ content:""; width:4px; height:4px; background: var(--brass-lo); display:inline-block; }
@keyframes slide{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marq__track{ animation:none; flex-wrap:wrap; width:100%; justify-content:center; } }

/* ============================================================
   Problem / solves
   ============================================================ */
.solves{ display:grid; gap: 0; margin-top: 44px; border-top:1px solid var(--rule-soft); }
.solve{ display:grid; gap: 4px 28px; padding: 20px 0; border-bottom:1px solid var(--rule-soft); align-items:baseline; }
@media (min-width: 720px){ .solve{ grid-template-columns: 1.1fr 1.5fr; } }
.solve b{ font-family: var(--f-display); font-weight:500; text-transform:uppercase; letter-spacing:.06em; font-size:1.02rem; color: var(--fg); }
.solve p{ color: var(--fg-2); font-size:.94rem; margin:0; }

.pull{
  font-family: var(--f-display); font-weight:400; font-size: clamp(1.3rem,3.1vw,2.05rem);
  line-height:1.34; color: var(--fg); max-width: 22em; margin: 0;
  border-left: 1px solid var(--brass); padding-left: clamp(18px,3vw,32px);
}
.pull em{ font-style: italic; color: var(--brass); }

/* ============================================================
   Audience
   ============================================================ */
.aud{ display:grid; gap:0; margin-top: 8px; }
.aud__row{
  display:grid; grid-template-columns: 48px 1fr; gap: 6px 20px; align-items:baseline;
  padding: 22px 0; border-bottom:1px solid var(--rule-soft);
}
@media (min-width: 760px){ .aud__row{ grid-template-columns: 56px 1.15fr 1.4fr; gap: 28px; } }
.aud__n{ font-family: var(--f-display); font-size:.98rem; color: var(--brass-lo); font-variant-numeric: tabular-nums; }
.aud__t{ font-family: var(--f-display); text-transform:uppercase; font-weight:500; letter-spacing:.05em; font-size: clamp(1.05rem,2vw,1.3rem); line-height:1.15; }
.aud__d{ color: var(--fg-2); font-size:.92rem; grid-column: 2 / -1; }
@media (min-width:760px){ .aud__d{ grid-column: auto; } }

/* ============================================================
   Timeline
   ============================================================ */
.tl{ margin-top: 48px; display:grid; gap:0; }
.tl__ph{ border-top:1px solid var(--rule); padding: 26px 0 30px; display:grid; gap:18px; }
@media (min-width: 860px){ .tl__ph{ grid-template-columns: 250px minmax(0,1fr); gap: 44px; } }
.tl__ph:last-child{ border-bottom:1px solid var(--rule); }
.tl__mark{ display:flex; align-items:baseline; gap:12px; }
.tl__num{ font-family: var(--f-display); font-size: clamp(1.9rem,4vw,2.7rem); line-height:.9; color: var(--brass); font-variant-numeric: tabular-nums; }
.tl__name{ font-family: var(--f-display); text-transform:uppercase; font-weight:500; letter-spacing:.07em; font-size:1.02rem; }
.tl__when{ font-size:.73rem; letter-spacing:.13em; text-transform:uppercase; color: var(--fg-3); margin-top:6px; }
.tl__acts{ list-style:none; margin:0; padding:0; columns: 1; }
@media (min-width: 620px){ .tl__acts{ columns:2; column-gap: 34px; } }
.tl__acts li{ break-inside: avoid; padding: 7px 0 7px 18px; position:relative; font-size:.9rem; color: var(--fg-2); border-bottom:1px solid var(--rule-soft); }
.tl__acts li::before{ content:""; position:absolute; left:0; top:15px; width:7px; height:1px; background: var(--brass-lo); }

/* ============================================================
   Departments
   ============================================================ */
.dept{ margin-top: 44px; border-top:1px solid var(--rule); }
.dept__r{
  display:grid; grid-template-columns: 44px 1fr; gap: 4px 16px; align-items:baseline;
  padding: 18px 0; border-bottom:1px solid var(--rule-soft); transition: background .2s;
}
@media (min-width: 820px){ .dept__r{ grid-template-columns: 56px 260px minmax(0,1fr); gap: 24px; padding: 20px 0; } }
.dept__r:hover{ background: rgba(194,160,92,.035); }
.dept__n{ font-family: var(--f-display); color: var(--brass-lo); font-size:.98rem; font-variant-numeric:tabular-nums; }
.dept__t{ font-family: var(--f-display); text-transform:uppercase; letter-spacing:.06em; font-weight:500; font-size: clamp(1rem,1.9vw,1.2rem); }
.dept__s{ color: var(--fg-2); font-size:.88rem; grid-column: 2/-1; }
@media (min-width:820px){ .dept__s{ grid-column:auto; } }

/* ============================================================
   SOP system
   ============================================================ */
.sop{ display:grid; gap: clamp(32px,4vw,52px); margin-top: 44px; }
@media (min-width: 980px){ .sop{ grid-template-columns: minmax(0,1fr) minmax(0,.86fr); align-items:start; } }
.sopgrid{ display:grid; gap:0; border-top:1px solid var(--rule); }
.sopgrid__g{ padding: 16px 0; border-bottom:1px solid var(--rule-soft); display:grid; gap:6px 24px; }
@media (min-width:600px){ .sopgrid__g{ grid-template-columns: 180px minmax(0,1fr); } }
.sopgrid__g b{ font-size:.73rem; letter-spacing:.14em; text-transform:uppercase; color: var(--brass); font-weight:500; padding-top:3px; }
.sopgrid__l{ display:flex; flex-wrap:wrap; gap: 7px; }
.chip{
  font-size:.79rem; color: var(--fg-2); border:1px solid var(--rule);
  padding: 5px 11px; background: var(--stone);
}
/* full-size SOP document specimen */
.spec{ background: var(--paper); color: var(--ink); padding: clamp(22px,3vw,34px); box-shadow: 0 30px 64px -30px rgba(0,0,0,.9); }
.spec__hd{ border-bottom: 2px solid var(--ink); padding-bottom: 12px; margin-bottom: 14px; }
.spec__hd b{ display:block; font-family:var(--f-display); text-transform:uppercase; font-size: clamp(1.05rem,2.2vw,1.35rem); letter-spacing:.04em; line-height:1.15; }
.spec__hd span{ display:block; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color: var(--ink-2); margin-top:6px; }
.spec__meta{ display:grid; gap:0; margin-bottom:16px; font-size:.78rem; }
.spec__meta div{ display:flex; justify-content:space-between; gap:14px; padding:6px 0; border-bottom:1px dotted #C7C1B7; }
.spec__meta i{ font-style:normal; color: var(--ink-2); letter-spacing:.08em; text-transform:uppercase; font-size:.92em; }
.spec__meta b{ font-weight:500; color:#2E2A25; text-align:right; }
.spec h4{ font-family:var(--f-ui); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); margin:16px 0 8px; font-weight:500; }
.spec ol{ margin:0; padding-left: 1.25em; font-size:.84rem; color:#37322C; line-height:1.62; }
.spec ol li{ padding: 2px 0; }
.spec ol li::marker{ color: var(--brass-lo); }
.spec__sig{ display:grid; grid-template-columns:1fr 1fr; gap: 18px; margin-top: 22px; }
.spec__sig div{ border-top:1px solid #8E887E; padding-top:6px; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:#8A8378; }
.spec__note{ font-size:.74rem; color: var(--ink-2); margin-top:14px; border-left:2px solid var(--brass); padding-left:11px; line-height:1.5; }

/* ============================================================
   Dashboard / device
   ============================================================ */
.device{ margin-top: 46px; }
/* the spreadsheet earns the full measure — break out of the dossier column */
@media (min-width: 900px){
  .device{ margin-left: calc(-1 * (var(--ref-col) + 56px)); position:relative; z-index:1; }
  .sec--wide .ref{ position: static; }
}
.device__screen{
  background: var(--paper); border: 1px solid var(--rule);
  box-shadow: 0 46px 90px -40px rgba(0,0,0,.95);
  overflow: hidden;
}
.xl__bar{ display:flex; align-items:center; gap:8px; padding: 10px 14px; background:#E6E2DA; border-bottom:1px solid #CFC9BF; }
.xl__dots{ display:flex; gap:5px; }
.xl__dots i{ width:9px; height:9px; border-radius:50%; background:#C3BCB1; display:block; }
.xl__file{ font-size:.72rem; color:#5A544C; letter-spacing:.04em; margin-left:8px; }
.xl__tabs{ display:flex; gap:0; background:#EFEBE4; border-bottom:1px solid #D6D0C6; overflow-x:auto; }
.xl__tab{ font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:#7A736A; padding: 9px 15px; border-right:1px solid #DDD7CD; white-space:nowrap; }
.xl__tab[aria-current="true"]{ background: var(--paper); color: var(--ink); box-shadow: inset 0 -2px 0 var(--brass); }
.xl__kpis{ display:grid; grid-template-columns: repeat(2,1fr); border-bottom:1px solid #D6D0C6; }
@media (min-width: 720px){ .xl__kpis{ grid-template-columns: repeat(5,1fr); } }
.xl__kpi{ padding: 14px 16px; border-right:1px solid #E4DFD6; border-bottom:1px solid #E4DFD6; }
@media (min-width:720px){ .xl__kpi{ border-bottom:0; } }
.xl__kpi i{ display:block; font-style:normal; font-size:.62rem; letter-spacing:.13em; text-transform:uppercase; color:#8A8378; }
.xl__kpi b{ display:block; font-family: var(--f-display); font-size: clamp(1.5rem,3.4vw,2.1rem); font-weight:500; color: var(--ink); font-variant-numeric: tabular-nums; line-height:1.1; margin-top:3px; }
.xl__kpi--wip b{ color:#8C6F2E; } .xl__kpi--blk b{ color:#8C4530; } .xl__kpi--ok b{ color:#4F6B46; }
.xl__bararea{ padding: 0 16px 14px; background: var(--paper); }
.xl__prog{ height:5px; background:#DFD9CF; overflow:hidden; }
.xl__prog i{ display:block; height:100%; width:37%; background: var(--brass-lo); }

.xl__scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; background: var(--paper); position:relative; }
.device__hint{ display:none; }
@media (max-width: 899px){
  .device__hint{ display:block; font-size:.68rem; letter-spacing:.11em; text-transform:uppercase; color: var(--fg-3); margin-top:10px; }
}
table.xl{ width:100%; min-width: 900px; border-collapse:collapse; font-size:.76rem; font-variant-numeric: tabular-nums; }
table.xl thead th{
  position:sticky; top:0; background:#EFEBE4; color:#5F5951; font-weight:500;
  font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; text-align:left;
  padding: 9px 10px; border-bottom:1px solid #C9C3B9; border-right:1px solid #E2DDD4; white-space:nowrap;
}
table.xl td{ padding: 8px 10px; border-bottom:1px solid #E8E3DB; border-right:1px solid #F0ECE5; color:#38332D; white-space:nowrap; }
table.xl tbody tr:nth-child(even) td{ background:#FBFAF7; }
table.xl td.rown{ background:#EFEBE4; color:#948D83; font-size:.66rem; text-align:center; width:34px; border-right:1px solid #D6D0C6; }
table.xl td.task{ white-space:normal; min-width: 300px; color:#26221E; }
.st{ display:inline-flex; align-items:center; gap:6px; font-size:.7rem; letter-spacing:.05em; }
.st::before{ content:""; width:7px; height:7px; flex:0 0 auto; }
.st--done{ color:#4F6B46; } .st--done::before{ background:#6E8B63; }
.st--wip{ color:#8C6F2E; } .st--wip::before{ background:#C79A3D; }
.st--blk{ color:#8C4530; } .st--blk::before{ background:#B0563C; }
.st--ns{ color:#8A8378; } .st--ns::before{ background:#C3BCB1; }
.pr--high{ color:#8C4530; } .pr--med{ color:#7A736A; }
.device__cap{ display:flex; flex-wrap:wrap; gap: 6px 18px; justify-content:space-between; margin-top: 14px; font-size:.72rem; color: var(--fg-3); letter-spacing:.05em; }

.keyline{ display:grid; gap:22px; margin-top: 46px; }
@media (min-width: 760px){ .keyline{ grid-template-columns: repeat(4,1fr); gap: 0; border-top:1px solid var(--rule); } }
.keyline div{ padding: 18px 0; border-bottom:1px solid var(--rule-soft); }
@media (min-width:760px){ .keyline div{ padding: 20px 24px 20px 0; border-bottom:0; border-right:1px solid var(--rule-soft); } .keyline div:last-child{ border-right:0; padding-right:0; } }
.keyline b{ display:block; font-family:var(--f-display); text-transform:uppercase; letter-spacing:.06em; font-size:.94rem; color: var(--brass); margin-bottom:5px; font-weight:500; }
.keyline p{ font-size:.88rem; color: var(--fg-2); margin:0; }

/* ============================================================
   Templates
   ============================================================ */
.tpl{ display:grid; gap: clamp(30px,4vw,48px); margin-top: 44px; }
@media (min-width: 1000px){ .tpl{ grid-template-columns: minmax(0,.92fr) minmax(0,1fr); } }
.tpl__list{ border-top:1px solid var(--rule); }
.tpl__i{ display:grid; grid-template-columns: 34px 1fr auto; gap: 14px; align-items:center; padding: 12px 0; border-bottom:1px solid var(--rule-soft); }
.tpl__i i{ font-style:normal; font-family:var(--f-display); color: var(--brass-lo); font-size:.86rem; font-variant-numeric:tabular-nums; }
.tpl__i b{ font-weight:400; font-size:.95rem; color: var(--fg); }
.tpl__i span{ font-size:.62rem; letter-spacing:.13em; text-transform:uppercase; color: var(--fg-3); border:1px solid var(--rule); padding: 3px 8px; }
.tpl__forms{ display:grid; gap: 20px; }
@media (min-width: 560px){ .tpl__forms{ grid-template-columns: 1fr 1fr; } }
.tpl__forms .form{ background: var(--paper); color: var(--ink); padding: 16px 16px 18px; box-shadow: 0 24px 52px -28px rgba(0,0,0,.9); font-size:.72rem; }
.form--tall{ grid-column: 1 / -1; }
.form__hd{ border-bottom:1.5px solid var(--ink); padding-bottom:8px; margin-bottom:10px; display:flex; justify-content:space-between; align-items:flex-end; gap:10px; }
.form__hd b{ font-family: var(--f-display); text-transform:uppercase; font-size:.92rem; letter-spacing:.04em; line-height:1.15; }
.form__hd span{ font-size:.58rem; letter-spacing:.1em; color:var(--ink-2); text-transform:uppercase; white-space:nowrap; }
.tpl__forms .form__f{ display:flex; flex-direction:row; justify-content:space-between; gap:10px; padding:5px 0; border-bottom:1px dotted #C7C1B7; color:var(--ink-2); }
.tpl__forms .form__f b{ color:#2E2A25; font-weight:500; }
.form__ck{ display:flex; align-items:center; gap:9px; padding:6px 0; border-bottom:1px solid #E8E3DB; color:#37322C; }
.form__ck em{ margin-left:auto; font-style:normal; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:#8A8378; }
.form__box{ width:11px;height:11px;border:1px solid #6E675E; flex:0 0 auto; position:relative; }
.form__box--on{ background:#37322C; border-color:#37322C; }
.form__sig{ display:flex; gap:12px; margin-top:12px; }
.form__sig div{ flex:1; border-top:1px solid #8E887E; padding-top:5px; font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:#8A8378; }
.form__grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

/* ============================================================
   Deliverables
   ============================================================ */
.del{ margin-top: 44px; border-top:1px solid var(--rule); }
.del__r{ display:grid; grid-template-columns: 1fr auto; gap: 4px 20px; padding: 20px 0; border-bottom:1px solid var(--rule-soft); align-items:baseline; }
@media (min-width: 780px){ .del__r{ grid-template-columns: 300px minmax(0,1fr) 92px; } }
.del__t{ font-family: var(--f-display); text-transform:uppercase; letter-spacing:.05em; font-weight:500; font-size:1.02rem; }
.del__d{ color: var(--fg-2); font-size:.9rem; grid-column: 1/-1; }
@media (min-width:780px){ .del__d{ grid-column:auto; } }
.del__f{ font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color: var(--brass); border:1px solid var(--brass-lo); padding:3px 8px; justify-self:end; white-space:nowrap; }

/* ============================================================
   Pricing
   ============================================================ */
.price{ display:grid; gap: 0; margin-top: 46px; border-top:1px solid var(--rule); }
@media (min-width: 900px){ .price{ grid-template-columns: repeat(3, 1fr); } }
.tier{ padding: 30px 0; border-bottom:1px solid var(--rule-soft); display:flex; flex-direction:column; }
@media (min-width: 900px){
  .tier{ padding: 34px 30px; border-bottom:0; border-right:1px solid var(--rule-soft); }
  .tier:first-child{ padding-left:0; }
  .tier:last-child{ border-right:0; padding-right:0; }
}
.tier--best{ background: linear-gradient(180deg, rgba(194,160,92,.07), rgba(194,160,92,0) 62%); position:relative; }
.tier--best::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px; background: var(--brass); }
@media (min-width:900px){ .tier--best{ margin-top:-1px; } }
.tier__tag{ font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color: var(--brass); margin-bottom: 12px; min-height: 1em; }
.tier__n{ font-family: var(--f-display); text-transform:uppercase; letter-spacing:.07em; font-size:1.25rem; font-weight:500; }
.tier__p{ font-family: var(--f-display); font-size: clamp(2.5rem,6vw,3.3rem); font-weight:500; line-height:1; margin: 14px 0 4px; color: var(--fg); }
.tier--best .tier__p{ color: var(--brass); }
.tier__for{ font-size:.82rem; color: var(--fg-3); margin-bottom: 22px; }
.tier ul{ list-style:none; margin:0 0 26px; padding:0; flex:1; }
.tier li{ font-size:.9rem; color: var(--fg-2); padding: 9px 0 9px 20px; border-bottom:1px solid var(--rule-soft); position:relative; }
.tier li::before{ content:""; position:absolute; left:0; top:17px; width:8px; height:1px; background: var(--brass-lo); }
.price__note{ margin-top: 26px; font-size:.82rem; color: var(--fg-3); display:flex; flex-wrap:wrap; gap:6px 22px; }

/* ============================================================
   Value statement
   ============================================================ */
.value{ text-align:left; }
.value__rule{ height:1px; background: linear-gradient(90deg, var(--brass), var(--rule) 46%, transparent); margin: 22px 0; max-width: 620px; }
.value__big{ font-family:var(--f-display); text-transform:uppercase; font-weight:600; line-height:.95; font-size: clamp(2.1rem,6.4vw,4.6rem); margin:0; }
.value__big span{ color: var(--fg); }
.eq{ display:flex; flex-wrap:wrap; align-items:center; gap: 10px 14px; margin-top: 38px; }
.eq b{ font-family:var(--f-display); text-transform:uppercase; letter-spacing:.07em; font-size: clamp(.86rem,1.7vw,1.05rem); font-weight:500; border:1px solid var(--rule); padding: 9px 15px; color: var(--fg); background: var(--stone); }
.eq i{ font-style:normal; color: var(--brass); font-size:1.1rem; }

/* ============================================================
   FAQ
   ============================================================ */
.faq{ margin-top: 40px; border-top:1px solid var(--rule); }
.faq details{ border-bottom:1px solid var(--rule-soft); }
.faq summary{
  list-style:none; cursor:pointer; padding: 20px 40px 20px 0; position:relative;
  font-family: var(--f-display); font-size: clamp(1rem,2vw,1.15rem); letter-spacing:.01em; color: var(--fg);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:6px; top:50%; width:11px; height:1px; background: var(--brass);
  box-shadow: 0 0 0 0 transparent; transition: transform .25s ease;
}
.faq summary::before{
  content:""; position:absolute; right:11px; top:calc(50% - 5px); width:1px; height:11px; background: var(--brass);
  transition: opacity .2s ease, transform .25s ease;
}
.faq details[open] summary::before{ opacity:0; transform: rotate(90deg); }
.faq summary:hover{ color: var(--brass); }
.faq__a{ padding: 0 0 22px; color: var(--fg-2); font-size:.94rem; max-width: 62ch; }
@media (prefers-reduced-motion: no-preference){
  .faq details[open] .faq__a{ animation: fadeIn .3s ease both; }
  @keyframes fadeIn{ from{ opacity:0; transform: translateY(-4px);} to{opacity:1;transform:none;} }
}

/* ============================================================
   Credibility / consulting
   ============================================================ */
.cred{ display:grid; gap: clamp(30px,4vw,52px); margin-top: 8px; }
@media (min-width: 940px){ .cred{ grid-template-columns: minmax(0,1.25fr) minmax(0,.85fr); } }
.facts{ border-top:1px solid var(--rule); }
.facts div{ display:flex; align-items:baseline; gap:18px; padding: 18px 0; border-bottom:1px solid var(--rule-soft); }
.facts b{ font-family:var(--f-display); font-size: clamp(1.7rem,3.6vw,2.3rem); color: var(--brass); font-weight:500; line-height:1; min-width: 96px; font-variant-numeric:tabular-nums; }
.facts span{ font-size:.9rem; color: var(--fg-2); }

.svc{ display:grid; gap:0; margin-top: 40px; border-top:1px solid var(--rule); }
@media (min-width: 820px){ .svc{ grid-template-columns: repeat(2,1fr); } }
.svc__i{ padding: 22px 0; border-bottom:1px solid var(--rule-soft); }
@media (min-width:820px){
  .svc__i{ padding: 24px 32px 24px 0; }
  .svc__i:nth-child(odd){ border-right:1px solid var(--rule-soft); }
  .svc__i:nth-child(even){ padding-left: 32px; padding-right:0; }
}
.svc__i b{ display:block; font-family:var(--f-display); text-transform:uppercase; letter-spacing:.06em; font-size:1rem; font-weight:500; margin-bottom:6px; }
.svc__i p{ font-size:.9rem; color: var(--fg-2); margin:0; }

/* ============================================================
   Final CTA
   ============================================================ */
.final{ position:relative; overflow:hidden; border-top:1px solid var(--rule); background: var(--stone); }
.final__glow{ position:absolute; inset:auto -10% -60% 20%; height: 90%; background: radial-gradient(ellipse at 50% 100%, rgba(194,160,92,.17), transparent 62%); pointer-events:none; }
.final__in{ position:relative; z-index:2; padding-block: clamp(72px,11vw,150px); }
.final h2{ font-size: clamp(2.2rem,7vw,5rem); }
.final .lede{ margin-top: 28px; }
.final .hero__acts{ margin-top: 36px; }

/* ============================================================
   Footer
   ============================================================ */
.foot{ border-top:1px solid var(--rule-soft); padding-block: 54px 40px; font-size:.88rem; }
.foot__grid{ display:grid; gap: 34px; }
@media (min-width: 820px){ .foot__grid{ grid-template-columns: 1.4fr 1fr 1fr; gap: 44px; } }
.foot h5{ font-size:.66rem; letter-spacing:.17em; text-transform:uppercase; color: var(--fg-3); margin:0 0 14px; font-weight:500; }
.foot a{ color: var(--fg-2); text-decoration:none; }
.foot a:hover{ color: var(--brass); }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.foot__bot{ margin-top: 42px; padding-top: 20px; border-top:1px solid var(--rule-soft); display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between; color: var(--fg-3); font-size:.78rem; }

/* ============================================================
   Modal
   ============================================================ */
.modal{ position:fixed; inset:0; z-index:200; display:none; }
.modal[data-open="true"]{ display:block; }
.modal__bd{ position:absolute; inset:0; background: rgba(8,7,5,.82); backdrop-filter: blur(5px); }
.modal__pn{
  position:absolute; inset: auto 0 0 0; max-height: 92dvh; overflow-y:auto;
  background: var(--void); border-top:2px solid var(--brass);
  padding: 28px var(--gutter) calc(30px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 760px){
  .modal__pn{ inset: 50% auto auto 50%; transform: translate(-50%,-50%); width: min(640px, 92vw); max-height: 88dvh;
    border: 1px solid var(--rule); border-top:2px solid var(--brass); padding: 34px 38px 34px; }
}
@media (prefers-reduced-motion: no-preference){
  .modal[data-open="true"] .modal__pn{ animation: up .32s cubic-bezier(.2,.7,.3,1) both; }
  @keyframes up{ from{ opacity:0; transform: translateY(22px); } to{ opacity:1; transform:none; } }
  @media (min-width:760px){ @keyframes up{ from{ opacity:0; transform: translate(-50%,-46%);} to{opacity:1; transform:translate(-50%,-50%);} } }
}
.modal__x{ position:absolute; top:14px; right:14px; background:none; border:1px solid var(--rule); width:36px; height:36px; cursor:pointer; color: var(--fg-2); }
.modal__x:hover{ color: var(--brass); border-color: var(--brass); }
.fields{ display:grid; gap: 14px; margin-top: 22px; }
@media (min-width: 560px){ .fields--2{ grid-template-columns:1fr 1fr; } }
label{ display:block; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color: var(--fg-3); margin-bottom:6px; }
input,select,textarea{
  width:100%; background: var(--stone); border:1px solid var(--rule); color: var(--fg);
  padding: 12px 13px; font-family: var(--f-ui); font-size:.95rem; border-radius:0;
}
input:focus,select:focus,textarea:focus{ border-color: var(--brass); outline:none; }
textarea{ min-height: 92px; resize: vertical; }
.modal__alt{ margin-top: 18px; font-size:.8rem; color: var(--fg-3); display:grid; gap:5px; }
.modal__alt a{ color: var(--brass); text-decoration:none; }

.sr{ position:absolute; width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap; }
/* ==========================================================
   ATMOSFERA — cinematic sloj preko postojećeg identiteta
   ========================================================== */
:root{ --void: #0C0B08; --stone: #141109; }

/* film grain — jedva vidljiv, daje dubinu tamnoj podlozi */
.grain{
  position: fixed; inset: -50%; z-index: 3; pointer-events: none;
  opacity: .055; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: no-preference){
  .grain{ animation: grainshift 7s steps(6) infinite; }
  @keyframes grainshift{
    0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)}
    60%{transform:translate(-2%,-2%)} 80%{transform:translate(3%,1%)} 100%{transform:translate(0,0)}
  }
}

/* vinjeta — svetlo pada ka centru, ivice tonu */
.hero::after, .final::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background: radial-gradient(130% 100% at 50% 40%, transparent 42%, rgba(0,0,0,.62) 100%);
}
/* ambijentalno kretanje svetla u herou */
@media (prefers-reduced-motion: no-preference){
  .hero__glow{ animation: drift 22s ease-in-out infinite alternate; }
  @keyframes drift{
    from{ transform: translate3d(0,0,0) scale(1); opacity:.85 }
    to{ transform: translate3d(-5%,4%,0) scale(1.12); opacity:1 }
  }
}

/* ==========================================================
   KALKULATOR
   ========================================================== */
.calc{ margin-top: 44px; }
.calc__panel{
  background: linear-gradient(180deg, rgba(255,252,245,.045), rgba(255,252,245,.012));
  border: 1px solid var(--rule);
  border-top: 1px solid rgba(194,160,92,.42);
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  padding: clamp(22px, 3.4vw, 38px);
}
.calc__form{ display:grid; gap: 18px; }
@media (min-width: 720px){ .calc__form{ grid-template-columns: 1.1fr 1fr 1fr; align-items:end; } }
.calc__f label{ margin-bottom: 8px; }
.calc__seg{ display:flex; border:1px solid var(--rule); }
.calc__seg button{
  flex:1; background: transparent; border:0; cursor:pointer; padding: 12px 8px;
  font-size:.78rem; letter-spacing:.09em; text-transform:uppercase; color: var(--fg-3);
  transition: background .2s, color .2s;
}
.calc__seg button[aria-pressed="true"]{ background: rgba(194,160,92,.15); color: var(--brass); }
.calc__go{ margin-top: 22px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.calc__err{ color:#C9785E; font-size:.85rem; margin-top:12px; min-height:1px; }

/* rezultat */
.calc__out[hidden]{ display:none; }
.calc__out{ margin-top: 34px; }
.calc__sum{ display:grid; grid-template-columns: repeat(2,1fr); border-top:1px solid var(--rule); }
@media (min-width: 720px){ .calc__sum{ grid-template-columns: repeat(4,1fr); } }
.calc__sum div{ padding: 18px 20px 18px 0; border-bottom:1px solid var(--rule-soft); }
@media (min-width:720px){ .calc__sum div{ border-bottom:0; border-right:1px solid var(--rule-soft); padding-left:20px; } .calc__sum div:first-child{ padding-left:0; } .calc__sum div:last-child{ border-right:0; } }
.calc__sum b{ display:block; font-family: var(--f-display); font-size: clamp(1.7rem,4.2vw,2.5rem); font-weight:500; line-height:1; color: var(--fg); font-variant-numeric: tabular-nums; }
.calc__sum b.warn{ color:#C9785E; }
.calc__sum b.good{ color: var(--brass); }
.calc__sum i{ display:block; font-style:normal; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color: var(--fg-3); margin-top:8px; }

.cph{ margin-top: 34px; border-top:1px solid var(--rule); }
.cph__hd{ display:flex; flex-wrap:wrap; align-items:baseline; gap: 6px 14px; padding: 18px 0 10px; }
.cph__n{ font-family: var(--f-display); font-size:1.55rem; color: var(--brass); line-height:1; font-variant-numeric:tabular-nums; }
.cph__t{ font-family: var(--f-display); text-transform:uppercase; letter-spacing:.07em; font-weight:500; font-size:1.02rem; }
.cph__d{ margin-left:auto; font-size:.74rem; letter-spacing:.09em; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.ctask{
  display:grid; grid-template-columns: 1fr auto; gap: 3px 14px; align-items:baseline;
  padding: 13px 0; border-bottom:1px solid var(--rule-soft);
}
.ctask__d{ font-size:.8rem; color: var(--brass-lo); font-variant-numeric: tabular-nums; white-space:nowrap; }
.ctask__s{ font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color: var(--fg-3); justify-self:end; white-space:nowrap; order:1; }
.ctask__t{ font-size:.93rem; color: var(--fg); grid-column: 1/-1; order:2; }
.ctask__m{ font-size:.8rem; color: var(--fg-3); grid-column: 1/-1; order:3; }
@media (min-width: 860px){
  .ctask{ grid-template-columns: 104px minmax(0,1fr) 216px 96px; gap: 20px; padding: 11px 0; }
  .ctask__t, .ctask__m, .ctask__s{ grid-column: auto; order: 0; }
  .ctask__s{ text-align:right; }
}
.ctask--late .ctask__d{ color:#C9785E; }
.ctask--late .ctask__s{ color:#C9785E; }
.ctask--now{ background: rgba(194,160,92,.05); }
.ctask--now .ctask__s{ color: var(--brass); }

.calc__note{ margin-top: 26px; font-size:.82rem; color: var(--fg-3); border-left:1px solid var(--brass-lo); padding-left:14px; max-width: 62ch; }
.calc__cta{ margin-top: 30px; display:flex; flex-wrap:wrap; gap:12px; }

/* štampa: samo plan, na beloj podlozi */
@media print{
  body{ background:#fff; color:#000; }
  .nav, .marq, .hero, .sec:not(.sec--calc), .final, .foot, .modal, .grain, .calc__form, .calc__go, .calc__cta, .device__hint{ display:none !important; }
  .sec--calc{ border:0; padding:0; }
  .calc__panel{ border:0; background:none; backdrop-filter:none; padding:0; }
  .ref, .sec-head .lede{ display:none; }
  .calc__sum b, .cph__n, .cph__t, .ctask__t, h2.display{ color:#000 !important; }
  .calc__sum i, .ctask__m, .ctask__s, .ctask__d, .calc__note{ color:#444 !important; }
  .ctask, .cph, .calc__sum div{ border-color:#ccc !important; }
  .ctask--now{ background:none; }
}

/* --- most od plana ka paketu --- */
.calc__bridge{
  margin-top: 34px; padding: clamp(22px,3vw,30px);
  border: 1px solid var(--rule); border-top: 1px solid var(--brass);
  background: linear-gradient(180deg, rgba(194,160,92,.07), rgba(194,160,92,0) 70%);
}
.calc__bridge__t{
  font-family: var(--f-display); text-transform:uppercase; font-weight:600;
  font-size: clamp(1.3rem,3vw,1.9rem); line-height:1; margin:0; letter-spacing:.02em;
}
.calc__bridge__n{
  margin: 12px 0 0; font-size:.82rem; letter-spacing:.11em; text-transform:uppercase;
  color: var(--brass); font-variant-numeric: tabular-nums;
}
.calc__bridge__q{ margin: 16px 0 0; color: var(--fg-2); max-width: 52ch; font-size:.95rem; }
.calc__bridge .calc__cta{ margin-top: 24px; }
@media print{ .calc__bridge{ display:none !important; } }

/* --- oblasti svakodnevnog rada --- */
.areas{ margin-bottom: 30px; }
.areas__h{
  margin:0 0 12px; font-size:.68rem; letter-spacing:.15em; text-transform:uppercase;
  color: var(--fg-3);
}
.areas__l{ display:flex; flex-wrap:wrap; gap:7px; }

/* --- mejl kapija pred štampanje --- */
.gate{ margin-top: 20px; padding: 20px; border:1px solid var(--rule); border-left:2px solid var(--brass); background: rgba(255,252,245,.03); }
.gate[hidden]{ display:none; }
.gate__t{ margin:0 0 14px; font-family: var(--f-display); text-transform:uppercase; letter-spacing:.05em; font-size:1rem; font-weight:500; }
.gate__row{ display:flex; flex-wrap:wrap; gap:10px; }
.gate__row input{ flex:1 1 240px; min-width:0; }
.gate__row .btn{ flex:0 0 auto; }
.gate__n{ margin:14px 0 0; font-size:.78rem; color: var(--fg-3); max-width:56ch; }
.gate__err{ margin:10px 0 0; font-size:.84rem; color:#C9785E; min-height:1px; }
@media print{ .gate{ display:none !important; } }

/* --- cenovnik konsaltinga --- */
.rates{ margin-top: 44px; border-top:1px solid var(--rule); }
.rate{
  display:grid; grid-template-columns: 1fr auto; gap: 8px 24px;
  padding: 22px 0; border-bottom:1px solid var(--rule-soft); align-items:baseline;
}
@media (min-width: 820px){ .rate{ grid-template-columns: 240px minmax(0,1fr) 168px; gap: 28px; } }
.rate__t{ font-family: var(--f-display); text-transform:uppercase; letter-spacing:.05em; font-weight:500; font-size: 1.02rem; }
.rate__d{ color: var(--fg-2); font-size:.9rem; grid-column: 1/-1; }
@media (min-width: 820px){ .rate__d{ grid-column:auto; } }
.rate__p{ font-family: var(--f-display); font-size: 1.5rem; color: var(--brass); white-space:nowrap; line-height:1.05; }
.rate__p i{ display:block; font-style:normal; font-family: var(--f-ui); font-size:.64rem;
  letter-spacing:.11em; text-transform:uppercase; color: var(--fg-3); margin-top:6px; }
@media (min-width: 820px){ .rate__p{ text-align:right; justify-self:end; } }
/* ==========================================================
   IZVOR FOTOGRAFIJA  —  jedino mesto koje menjate
   ----------------------------------------------------------
   Sada se koriste besplatne fotografije sa Unsplash-a
   (Unsplash License: slobodno za komercijalnu upotrebu,
   bez obaveze navođenja autora).

   Kada budete imali svoje fotografije objekta, skinite ih u
   /assets/ i zamenite pet linija ispod, na primer:
       --ph-hero: url('/assets/hero.jpg');
   ========================================================== */
:root{
  /* recepcija, crni mermer sa mesinganim detaljem — Dylan Calluy */
  --ph-hero:  url('https://images.unsplash.com/photo-1660557989695-14fac79c086d?auto=format&fit=crop&w=1920&q=70');
  /* lobi luksuznog hotela sa stepeništem — Haripriya K */
  --ph-band1: url('https://images.unsplash.com/photo-1723516908282-b3c795e9416a?auto=format&fit=crop&w=1920&q=70');
  /* sedenje uz stakleni zid, tamni tonovi — Trac Vu */
  --ph-band2: url('https://images.unsplash.com/photo-1628630468464-4168a51129f1?auto=format&fit=crop&w=1920&q=70');
  /* osvetljena fasada hotela noću — Nicolas Spehler */
  --ph-final: url('https://images.unsplash.com/photo-1699166877362-73cba7e56867?auto=format&fit=crop&w=1920&q=70');
  /* lobi luksuznog hotela — Haripriya K (ista, proverena adresa kao traka 1) */
  --ph-shot:  url('https://images.unsplash.com/photo-1723516908282-b3c795e9416a?auto=format&fit=crop&w=1000&q=70');
  /* luster u hotelskom baru — Sarah Götze */
  --ph-band3: url('https://images.unsplash.com/photo-1434569842867-4d6d1d4d1ef0?auto=format&fit=crop&w=1920&q=70');
  /* restoran sa kožnim sedištima — Nick Karvounis */
  --ph-band4: url('https://images.unsplash.com/photo-1552566626-52f8b828add9?auto=format&fit=crop&w=1920&q=70');
}
.photo--hero{  --img: var(--ph-hero); }
.photo--band1{ --img: var(--ph-band1); }
.photo--band2{ --img: var(--ph-band2); }
.photo--final{ --img: var(--ph-final); }
.photo--band3{ --img: var(--ph-band3); }
.photo--band4{ --img: var(--ph-band4); }
.photo--band5{ --img: var(--ph-hero); }
.photo--band6{ --img: var(--ph-band4); }
.shot{ --img: var(--ph-shot); }

/* ==========================================================
   FOTOGRAFIJA — pozadinski slojevi
   Slike se ubacuju u /assets/. Ako fajl ne postoji, sekcija
   ostaje tamna i čitljiva — ništa se ne lomi.
   ========================================================== */

/* zajednički tretman: prigušeno, toplo, filmski — nikad sirova fotografija */
.photo{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image: var(--img); background-size: cover; background-position: center;
  filter: grayscale(.2) contrast(1.04) brightness(.92) sepia(.18) saturate(.9);
}

/* --- hero --- */
.hero__photo{
  opacity:.42;
  -webkit-mask-image: linear-gradient(to bottom, #000 25%, rgba(0,0,0,.5) 70%, transparent 97%);
  mask-image: linear-gradient(to bottom, #000 25%, rgba(0,0,0,.5) 70%, transparent 97%);
}

/* --- pune trake između sekcija: vizuelna pauza u ritmu strane --- */
.band{
  position:relative; overflow:hidden; display:flex; align-items:center;
  min-height: clamp(340px, 56vh, 580px);
  border-block: 1px solid var(--rule-soft);
  background: var(--stone);
}
.band .photo{ opacity:.9; }
.band::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(12,11,8,.96) 0%, rgba(12,11,8,.88) 34%, rgba(12,11,8,.52) 66%, rgba(12,11,8,.34) 100%),
    linear-gradient(0deg, rgba(12,11,8,.55), transparent 55%);
}
.band__in{ position:relative; z-index:2; padding-block: clamp(48px, 7vw, 84px); }
.band__t{
  font-family: var(--f-display); text-transform:uppercase; font-weight:600;
  line-height:.98; letter-spacing:.005em; margin:0;
  font-size: clamp(1.85rem, 5.2vw, 3.5rem); max-width: 16em;
}
.band__s{
  margin: 20px 0 0; max-width: 34em; color: var(--fg-2);
  font-family: var(--f-display); font-weight:300; text-transform:none;
  font-size: clamp(1rem, 1.9vw, 1.22rem); line-height:1.5;
}
.band__r{ height:1px; width:150px; margin: 24px 0 0;
  background: linear-gradient(90deg, var(--brass), transparent); }

/* --- završni CTA --- */
.final .photo{ opacity:.45;
  -webkit-mask-image: linear-gradient(to top, #000 18%, transparent 88%);
  mask-image: linear-gradient(to top, #000 18%, transparent 88%); }

/* --- sekcija o iskustvu: uspravna fotografija objekta --- */
.shot{
  position:relative; aspect-ratio: 4 / 5; margin-top: 26px;
  background-image: var(--img); background-size:cover; background-position:center;
  background-color: var(--ash);
  filter: grayscale(.2) contrast(1.04) brightness(.95) sepia(.16);
  border: 1px solid var(--rule);
}
.shot::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 52%, rgba(12,11,8,.72));
}
.shot__cap{
  position:absolute; z-index:2; left:0; right:0; bottom:0; padding: 16px 18px;
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color: var(--fg-2);
}
@media (min-width: 940px){ .cred .shot{ margin-top:0; } }

@media print{ .band, .photo, .shot{ display:none !important; } }

/* ---- Serbian headlines run longer; give them room ---- */
html[lang="sr"] h1.display{ font-size: clamp(2.35rem, 7.1vw, 5.2rem); }
html[lang="sr"] .hero__product{ font-size: clamp(.95rem, 1.85vw, 1.18rem); }

/* ---- language switch ---- */
.lang{ display:flex; align-items:center; gap:7px; margin:0 0 0 auto; padding:0;
       font-size:.72rem; letter-spacing:.1em; font-weight:500; }
.lang [aria-current]{ color: var(--brass); }
.lang a{ color: var(--fg-3); text-decoration:none; transition: color .2s; }
.lang a:hover{ color: var(--fg); }
.lang i{ color: var(--rule); font-style:normal; }
.nav__cta{ margin-left: 14px; }
@media (min-width: 1040px){ .lang{ margin-left: 26px; } }
@media (max-width: 479px){ .lang{ font-size:.66rem; gap:5px; } .nav__cta{ margin-left:10px; } }

/* --- tri kolone --- */
.trio{ display:grid; margin-top:44px; border-top:1px solid var(--rule); }
@media (min-width: 900px){ .trio{ grid-template-columns: repeat(3, 1fr); } }
.trio__i{ padding: 28px 0; border-bottom:1px solid var(--rule-soft); }
@media (min-width: 900px){
  .trio__i{ padding: 32px 28px 30px 0; border-bottom:0; border-right:1px solid var(--rule-soft); }
  .trio__i + .trio__i{ padding-left: 28px; }
  .trio__i:last-child{ border-right:0; padding-right:0; }
}
.trio__n{ display:block; font-family: var(--f-display); color: var(--brass); font-size: 1.5rem; margin-bottom: 12px; }
.trio__t{ display:block; font-family: var(--f-display); text-transform:uppercase; letter-spacing:.06em; font-weight:500; font-size: 1.12rem; line-height:1.2; margin-bottom: 12px; }
.trio__d{ color: var(--fg-2); font-size:.92rem; line-height:1.62; margin: 0 0 16px; }
.trio__l{ list-style:none; margin:0; padding:0; }
.trio__l li{ position:relative; padding: 8px 0 8px 18px; border-top:1px solid var(--rule-soft); font-size:.86rem; color: var(--fg-2); }
.trio__l li::before{ content:""; position:absolute; left:0; top:17px; width:8px; height:1px; background: var(--brass-lo); }
.trio__a{ display:inline-block; margin-top: 18px; font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color: var(--brass); text-decoration:none; }
.trio__a:hover{ color:#D6B46D; }

/* --- pokret pri skrolovanju --- */
.reveal{ opacity:0; transform: translateY(20px);
  transition: opacity .75s cubic-bezier(.22,.7,.3,1), transform .75s cubic-bezier(.22,.7,.3,1); }
.reveal.in{ opacity:1; transform:none; }
.progress{
  position:fixed; top:0; left:0; height:2px; width:0; z-index:80;
  background: linear-gradient(90deg, var(--brass-lo), var(--brass));
  pointer-events:none; transition: width .12s linear;
}
.band .photo{ will-change: transform; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .progress{ display:none; }
  .band .photo{ transform:none !important; }
}
@media print{ .progress{ display:none !important; } .reveal{ opacity:1 !important; transform:none !important; } }

/* --- meni na telefonu i tabletu --- */
.burger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:42px; height:38px; padding:0 9px; margin-left:12px; flex:0 0 auto;
  background:none; border:1px solid var(--rule); cursor:pointer;
}
.burger span{ display:block; height:1px; background: var(--fg); transition: transform .26s ease, opacity .2s ease; }
.burger[aria-expanded="true"] span:first-child{ transform: translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform: translateY(-3px) rotate(-45deg); }
@media (max-width: 1039px){ .burger{ display:flex; margin-left:auto; } }

.menu{
  position:absolute; left:0; right:0; top:100%;
  background: var(--void); border-bottom:1px solid var(--rule);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.95);
  max-height: calc(100dvh - 68px); overflow-y:auto;
}
.menu[hidden]{ display:none; }
.menu__in{ padding-block: 12px 26px; }
.menu a.menu__l{
  display:block; padding: 19px 0;
  border-bottom:1px solid var(--rule-soft); text-decoration:none;
  font-family: var(--f-display); text-transform:uppercase; letter-spacing:.05em;
  font-size: 1.15rem; color: var(--fg);
}
.menu a.menu__l[aria-current="page"]{ color: var(--brass); }
.menu a.menu__l[aria-current="page"]::before{
  content:""; display:inline-block; width:14px; height:1px; background: var(--brass);
  vertical-align: middle; margin-right:12px;
}
.menu__lang{ display:flex; gap:10px; align-items:center; margin-top: 22px;
  font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color: var(--fg-3); }
.menu__lang a, .menu__lang span{ text-decoration:none; }
.menu__lang [aria-current]{ color: var(--brass); }
.menu__lang a{ color: var(--fg-2); }
.menu .btn{ margin-top: 24px; padding-block: 17px; }
/* na uskim ekranima dugme živi u meniju, ne u traci */
@media (max-width: 620px){ .nav__cta{ display:none; } }
@media (max-width: 420px){ .lang{ display:none; } }
@media print{ .burger, .menu{ display:none !important; } }

/* --- kartice ka podstranama --- */
.cards{ margin-top: 44px; border-top:1px solid var(--rule); }
.card{
  display:grid; grid-template-columns: 44px 1fr; gap: 6px 16px; align-items:baseline;
  padding: 22px 0; border-bottom:1px solid var(--rule-soft);
  text-decoration:none; color:inherit; transition: background .2s;
}
@media (min-width: 820px){ .card{ grid-template-columns: 56px 290px minmax(0,1fr) 170px; gap:24px; padding:24px 0; } }
.card:hover{ background: rgba(194,160,92,.05); }
.card__n{ font-family: var(--f-display); color: var(--brass-lo); font-size:.98rem; font-variant-numeric:tabular-nums; }
.card__t{ font-family: var(--f-display); text-transform:uppercase; letter-spacing:.06em; font-weight:500; font-size: clamp(1.02rem,2vw,1.22rem); line-height:1.15; }
.card__d{ color: var(--fg-2); font-size:.9rem; grid-column: 2/-1; }
.card__l{ font-size:.7rem; letter-spacing:.13em; text-transform:uppercase; color: var(--brass); grid-column: 2/-1; }
@media (min-width:820px){ .card__d, .card__l{ grid-column:auto; } .card__l{ justify-self:end; text-align:right; } }
.card:hover .card__l{ color: #D6B46D; }

/* duge adrese u podnožju se lome umesto da prelivaju */
.foot li, .foot a{ overflow-wrap:anywhere; }

/* keystone v4 */
/* --- paketi sa standardnim opisom --- */
.pkgs{ display:grid; gap:18px; margin-top:16px; }
@media (min-width: 900px){ .pkgs{ grid-template-columns: 1fr 1fr; } }
.pkg{ border:1px solid var(--rule); padding: 24px 24px 20px; background: rgba(255,255,255,.012); }
.pkg__h{ display:flex; justify-content:space-between; align-items:flex-start; gap:18px; padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid var(--rule-soft); }
.pkg__t{ margin:0; font-family: var(--f-display); font-weight:500; text-transform:uppercase; letter-spacing:.05em; font-size:1rem; line-height:1.28; color: var(--fg); }
.pkg__p{ margin:0; font-family: var(--f-display); color: var(--brass); font-size:1.4rem; line-height:1.1; text-align:right; white-space:nowrap; }
.pkg__p i{ display:block; margin-top:5px; font-style:normal; font-family: var(--f-ui); font-size:.6rem; letter-spacing:.15em; text-transform:uppercase; color: var(--fg-3); }
.pkg dl{ margin:0; }
.pkg dt{ margin-top:12px; font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color: var(--brass); }
.pkg dt:first-child{ margin-top:0; }
.pkg dd{ margin:4px 0 0; font-size:.88rem; line-height:1.58; color: var(--fg-2); }
.calc__note a{ color: var(--brass); }

/* --- istaknut stub ili paket --- */
.trio__i--best{ position:relative; }
.trio__i--best::before{ content:""; position:absolute; top:-1px; left:0; right:0; height:2px; background: var(--brass); }
.trio__i--best .trio__t{ color: var(--brass); }

/* --- poređenje paketa --- */
.cmp-wrap{ margin-top:30px; }
.cmp{ width:100%; border-collapse:collapse; font-size:.88rem; }
.cmp th, .cmp td{ padding:12px 8px; border-bottom:1px solid var(--rule-soft); text-align:center; vertical-align:top; }
.cmp th:first-child, .cmp td:first-child{ text-align:left; padding-left:0; width:46%; }
.cmp thead th{ font-family: var(--f-display); font-weight:500; text-transform:uppercase; letter-spacing:.05em; font-size:.9rem; color: var(--fg); border-bottom:1px solid var(--rule); }
.cmp thead th.is-best{ color: var(--brass); }
.cmp td{ color: var(--fg-2); line-height:1.45; }
.cmp .y{ color: var(--brass); }
.cmp .n{ color: var(--fg-3); }
@media (max-width: 600px){ .cmp{ font-size:.78rem; } .cmp th, .cmp td{ padding:10px 3px; } .cmp thead th{ font-size:.7rem; letter-spacing:.02em; } }

/* --- forma za upit --- */
.form{ margin-top:30px; max-width:780px; position:relative; }
.form__g{ display:grid; gap:16px; }
@media (min-width: 760px){ .form__g{ grid-template-columns: 1fr 1fr; } .form__f--w{ grid-column: 1 / -1; } }
.form__f{ display:flex; flex-direction:column; gap:7px; }
.form__f > span{ font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color: var(--fg-3); }
.form__f input, .form__f select, .form__f textarea{ width:100%; background:transparent; border:1px solid var(--rule); border-radius:0; color: var(--fg); font: inherit; font-size:.95rem; padding:12px 14px; }
.form__f select option{ background:#0C0B08; color:#F1EDE6; }
.form__f input:focus, .form__f select:focus, .form__f textarea:focus{ outline:none; border-color: var(--brass); }
.form__hp{ position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form__note{ margin:18px 0 22px; font-size:.8rem; line-height:1.55; color: var(--fg-3); }
.form__msg{ margin-top:24px; padding:14px 18px; border:1px solid var(--rule); font-size:.92rem; line-height:1.5; }
.form__msg--ok{ border-color: var(--brass); color: var(--fg); }
.form__msg--err{ border-color:#A5533F; color: var(--fg); }

/* --- meni sa šest stavki: zbijeniji samo na užim ekranima računara --- */
@media (min-width: 1040px) and (max-width: 1319px){
  .nav__in{ gap:16px; }
  .nav__links{ gap:16px; }
  .nav__links a{ font-size:.7rem; letter-spacing:.06em; }
  .lang{ margin-left:14px; }
  .nav__cta{ margin-left:8px; padding:9px 12px; font-size:.62rem; letter-spacing:.08em; }
}
.nav__links{ flex-shrink:0; }
.nav__links a{ white-space:nowrap; }

/* dve kolone kada je u nizu samo dve stavke */
@media (min-width: 900px){ .trio--2{ grid-template-columns: repeat(2, 1fr); } }

/* paketi sajta: druga cena (jednokratno) ispod mesečne */
.pkg__p small{ display:block; margin-top:7px; font-family: var(--f-ui); font-size:.74rem; letter-spacing:.02em; color: var(--fg-2); white-space:nowrap; }

/* forma za upit (Kontakt): uvek čitljiva — svetla slova na tamnoj pozadini polja, i kod automatskog popunjavanja */
form.form .form__f input, form.form .form__f select, form.form .form__f textarea{ background:#14110B; color:#F1EDE6; -webkit-text-fill-color:#F1EDE6; caret-color: var(--brass); }
form.form .form__f input::placeholder, form.form .form__f textarea::placeholder{ color:#8C857A; -webkit-text-fill-color:#8C857A; }
form.form .form__f input:-webkit-autofill, form.form .form__f input:-webkit-autofill:hover, form.form .form__f input:-webkit-autofill:focus{ -webkit-text-fill-color:#F1EDE6; -webkit-box-shadow:0 0 0 1000px #14110B inset; box-shadow:0 0 0 1000px #14110B inset; transition: background-color 9999s; }