/* Oriel product stranica (/mac-remote-desktop-server). Ucitava se samo na njoj, ne kroz master.css.
   Hero i tamna sekcija su TW v4 tamnoplavi, u svijetloj temi nijansu svjetlije, kao na Alcedo stranicama
   (alcedo.css). Ostatak stranice prati temu sitea preko --tw-* varijabli iz master.css. */

.or, .or-hero {
    --or-top: #174485;
    --or-mid: #11366d;
    --or-deep: #0d2a58;
    --or-beam: #9dc8ff;
    --or-on-dark: #b9cfee;
    --or-on-dark-strong: #e8f0fc;
    --or-panel: rgba(12, 38, 80, .86);
    --or-panel-bd: rgba(185, 207, 238, .22);
    --or-panel-rule: rgba(185, 207, 238, .16);
    --or-accent: #4c8dff;
    --or-tint: rgba(76, 141, 255, .08);
    --or-shadow: rgba(10, 46, 86, .35);
    --or-muted: var(--tw-text-muted);
    --or-btn: -apple-system, "Nunito", sans-serif;
    --or-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

[data-theme="dark"] .or, [data-theme="dark"] .or-hero {
    --or-top: #10305e;
    --or-mid: #0b2245;
    --or-deep: #071730;
    --or-beam: #7fb4ff;
    --or-panel: rgba(8, 24, 52, .86);
    --or-tint: rgba(76, 141, 255, .12);
    --or-shadow: rgba(0, 0, 0, .8);
}

.or, .or-hero { font-size: 16px; line-height: 1.7; }
.or *, .or *::before, .or *::after, .or-hero *, .or-hero *::before, .or-hero *::after { box-sizing: border-box; }
.or :where(h1, h2, h3, p, ul, ol, dl, dt, dd, figure), .or-hero :where(h1, h2, h3, p, ul, ol) { margin: 0; padding: 0; }
.or :where(ul, ol), .or-hero :where(ul, ol) { list-style: none; }
/* flow-root: negativna margina prozora (.or-stagewrap) inace prode kroz .or, pa bijela pozadina prekrije dno heroja. */
.or { display: flow-root; background-color: var(--tw-bg-body); color: var(--tw-text-body); }
.or a, .or-hero a { color: var(--tw-text-link); }
.or a:focus, .or-hero a:focus, .or button:focus, .or-hero button:focus { outline: 0; }
.or a:focus-visible, .or button:focus-visible, .or-hero a:focus-visible, .or-hero button:focus-visible { outline: 2px solid var(--or-beam); outline-offset: 4px; }
.or-vh { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.or-ln-a { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.or-ln-w { fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.or-chk { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Hero: tekst lijevo, panel s ikonom i prijavom desno ---------- */

/* Koliko prozor (.or-stagewrap) ulazi u hero. Na desktopu raste s visinom ekrana, da donji rub heroja padne
   ispod ruba ekrana (bez bijele crte na otvaranju), ali najvise 400 px, da dno prozora ostane na bijelom. */
.or-hero, .or-stagewrap { --or-overlap: 176px; }
@media (min-width: 992px) {
    .or-hero, .or-stagewrap { --or-overlap: clamp(176px, calc(100vh - 670px), 400px); }
}
.or-hero { padding-bottom: var(--or-overlap); background: linear-gradient(180deg, var(--or-top) 0%, var(--or-mid) 55%, var(--or-deep) 100%); color: #fff; }
.or-hero__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 64px; max-width: 1380px; margin: 0 auto; padding: 96px 40px 72px; }
.or-hero__copy { display: flex; flex: 999 1 560px; flex-direction: column; gap: 24px; min-width: 0; max-width: 780px; }
.or-hero__tagrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.or-tag { padding: 6px 12px; border-radius: 999px; background: rgba(76, 141, 255, .2); color: var(--or-beam); font-size: 11px; font-weight: 700; letter-spacing: .05em; line-height: 1.2; text-transform: uppercase; white-space: nowrap; }
.or-soon { padding: 5px 11px; border: 1px solid rgba(185, 207, 238, .45); border-radius: 999px; color: var(--or-on-dark-strong); font-size: 11px; font-weight: 700; letter-spacing: .05em; line-height: 1.2; white-space: nowrap; }
.or-h1 { color: #fff; font-size: clamp(28px, 1.2vw + 18px, 34px); font-weight: 700; letter-spacing: -.01em; line-height: 1.25; text-wrap: balance; }
.or-hero__lede { max-width: 680px; color: var(--or-on-dark-strong); font-size: clamp(17px, .5vw + 13px, 20px); line-height: 1.6; }
.or-hero__text { max-width: 680px; color: var(--or-on-dark); line-height: 2; }
.or-works { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.or-works > span { font-size: 14px; font-weight: 700; line-height: 1.5; }
.or-works ul { display: flex; flex-wrap: wrap; gap: 8px; color: var(--or-on-dark-strong); font-size: 14px; line-height: 1.4; }
.or-works li { padding: 6px 12px; border: 1px solid var(--or-panel-bd); border-radius: 999px; }
/* Alcedo RDP: nas klijent, s pticom, jacim rubom i linkom na stranicu proizvoda */
.or-works li.or-works__alc { padding: 0; border-color: rgba(157, 200, 255, .55); background: rgba(76, 141, 255, .16); }
.or-works__alc a { display: flex; align-items: center; gap: 7px; height: 100%; padding: 4px 13px 4px 7px; color: #fff !important; font-weight: 700; text-decoration: none; }
.or-works__alc a:hover { text-decoration: underline; text-underline-offset: 2px; }
.or-works__alc img { display: block; flex: 0 0 auto; width: 24px; height: 24px; }
.or-hero__aside { position: relative; flex: 0 0 400px; max-width: 100%; padding-top: 44px; }
/* Kvadratici iza panela, kao u heroju ostalih proizvoda (illustration.png, tek od 1200px). */
@media (min-width: 1200px) {
    .or-hero { overflow: hidden; }
    .or-hero__aside::before { content: ""; position: absolute; top: -72px; left: 46px; width: 421px; height: 425px; background: url('/assets/img/illustration.png') no-repeat; pointer-events: none; }
}
.or-panel { position: relative; display: flex; flex-direction: column; padding: 60px 32px 28px; border: 1px solid var(--or-panel-bd); border-radius: 12px; background: var(--or-panel); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); text-align: center; }
.or-panel__icon { position: absolute; top: -54px; left: 50%; width: 108px; height: 108px; margin-left: -54px; }
.or-panel__rows p { padding: 12px 0 13px; border-top: 1px solid var(--or-panel-rule); color: var(--or-on-dark-strong); line-height: 1.5; }
.or-panel__rows p:first-child { border-top: 0; }
.or-panel__rows strong { color: #fff; }

/* ---------- Prijava na obavijest o izlasku (twForm, api/contact/oriel-notify) ---------- */

.or-form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; text-align: left; }
.or-form[hidden] { display: none; }
.or-form .alert { margin: 0; font-size: 14px; text-align: left; }
.or-form .tw-turnstile--visible { margin: 0; }
.or-input { width: 100%; height: 52px; padding: 0 16px; border: 2px solid rgba(255, 255, 255, .22); border-radius: 4px; background: transparent; color: #fff; font-family: inherit; font-size: 16px; outline: 0; }
.or-input::placeholder { color: #a9bfdd; }
.or-input:focus { border-color: var(--or-beam); }
.or-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 65px; padding: 0 20px 0 14px; border: 0; border-radius: 4px; background: var(--tw-btn-primary-gradient); color: #fff; font-family: var(--or-btn); text-align: left; text-shadow: 0 1px 1px rgba(0, 0, 0, .1); cursor: pointer; }
.or-btn:hover { background: var(--tw-btn-primary-hover); }
.or-btn.disabled { opacity: .75; pointer-events: none; }
.or-btn__t { display: flex; flex-direction: column; font-size: 15px; line-height: 1.3; }
.or-btn__t span { font-size: 13px; font-weight: 500; opacity: .85; }
.or-btn__t .spinner-border { margin-right: 6px; }
.or-btn svg { flex: none; }
.or-ok { display: flex; align-items: center; gap: 16px; margin-top: 10px; padding: 14px 0 4px; border-top: 1px solid var(--or-panel-rule); text-align: left; }
.or-ok[hidden] { display: none; }
.or-ok strong { display: block; color: #fff; font-size: 20px; line-height: 1.4; }
.or-ok span { display: block; color: var(--or-on-dark); font-size: 14px; line-height: 1.5; }
.or-erk { display: block; flex: none; overflow: visible; }
.or-erk__p { fill: rgba(255, 255, 255, .05); stroke: #b9cfee; stroke-width: 2.6; stroke-linejoin: round; }
.or-erk__t { fill: none; stroke: #b9cfee; stroke-width: 2.6; stroke-linecap: round; }
.or-erk.is-lit .or-erk__p--a { animation: or-lit-side .5s ease .1s both; }
.or-erk.is-lit .or-erk__p--b { animation: or-lit-mid .5s ease .28s both; }
.or-erk.is-lit .or-erk__p--c { animation: or-lit-side .5s ease .46s both; }
.or-erk.is-lit .or-erk__t { animation: or-lit-bar .4s ease .6s both; }
@keyframes or-lit-side { to { fill: #7fb4ff; stroke: #e8f0fc; } }
@keyframes or-lit-mid { to { fill: #e8f0fc; stroke: #fff; } }
@keyframes or-lit-bar { to { stroke: #0b2245; } }

/* ---------- Mac u Remote Desktop prozoru, preko donjeg ruba heroja ---------- */

.or-stagewrap { position: relative; max-width: 1180px; margin: calc(-1 * var(--or-overlap)) auto 0; padding: 0 40px; }

/* ---------- Sekcije ---------- */

.or-wrap { max-width: 1180px; margin: 0 auto; padding: 0 40px; }
.or-sec { padding: 96px 0; }
.or-sec--alt { background-color: var(--tw-bg-secondary); --or-muted: rgba(0, 0, 0, .6); }
[data-theme="dark"] .or-sec--alt { --or-muted: rgba(255, 255, 255, .58); }
.or-h2 { color: var(--tw-text-body); font-size: clamp(25.6px, 1.2vw + 17px, 35.2px); font-weight: 700; line-height: 1.2; text-wrap: balance; }
.or-lede { max-width: 760px; margin-top: 20px; color: var(--or-muted); font-size: clamp(17px, .5vw + 13px, 20px); line-height: 1.6; }

.or-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 72px; align-items: start; padding-top: 72px; padding-bottom: 96px; }
.or-story p { color: var(--or-muted); font-size: clamp(17px, .5vw + 13px, 20px); line-height: 1.6; }

/* H.264 put od Maca do PC-a: cetiri koraka, drugi istaknut */
.or-pipe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 48px; }
.or-pipe li { position: relative; display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--tw-border-card); border-radius: 12px; background-color: var(--tw-bg-card); }
.or-pipe li:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -24px; width: 11px; height: 11px; margin-top: -6px; border: solid var(--or-accent); border-width: 2.5px 2.5px 0 0; transform: rotate(45deg); }
.or-pipe i { margin-bottom: 14px; color: var(--or-accent); font-size: 40px; font-style: normal; line-height: 1; }
.or-pipe h3 { color: var(--tw-text-body); font-size: 16px; font-weight: 700; line-height: 1.35; }
.or-pipe code { align-self: flex-start; margin-top: 8px; padding: 2px 7px; border-radius: 5px; background: var(--or-tint); color: var(--tw-text-primary); font-family: var(--or-mono); font-size: 13px; line-height: 1.5; }
.or-pipe p { margin-top: 12px; color: var(--or-muted); line-height: 1.6; }
.or-pipe li.is-hw { border-color: transparent; box-shadow: inset 0 0 0 2px var(--or-accent); }
.or-pipe__rib { position: absolute; top: 24px; right: 20px; padding: 4px 10px; border-radius: 999px; background: var(--or-accent); color: #06193a; font-size: 12px; font-weight: 700; line-height: 1.2; }
.or-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; margin-top: 20px; padding: 24px; border: 1px solid var(--tw-border-card); border-radius: 12px; background-color: var(--tw-bg-card); }
.or-fact strong { display: block; margin-bottom: 6px; color: var(--tw-text-primary); font-size: 22px; font-weight: 700; line-height: 1.25; }
.or-fact span { display: block; color: var(--or-muted); line-height: 1.6; }
.or-facts__note { grid-column: 1 / -1; padding-top: 16px; border-top: 1px solid var(--tw-border-light); color: var(--or-muted); font-size: 14px; line-height: 1.6; }

/* Kartice s malim prikazima iz aplikacije */
.or-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 48px; }
.or-card { display: flex; flex-direction: column; gap: 20px; min-width: 0; padding: 24px; border: 1px solid var(--tw-border-card); border-radius: 12px; background-color: var(--tw-bg-card); }
.or-card h3 { margin-bottom: 7px; color: var(--tw-text-body); font-size: 16px; font-weight: 700; line-height: 1.45; }
.or-card p { color: var(--or-muted); line-height: 1.65; }
.or-card--wide { grid-column: span 2; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 28px; align-items: center; }
.or-vg { display: flex; flex-direction: column; justify-content: center; min-height: 172px; padding: 16px; border-radius: 8px; background: var(--or-tint); color: var(--tw-text-body); font-size: 14px; line-height: 1.45; }
.or-vg strong { color: var(--tw-text-body); }
.or-vg--center { align-items: center; text-align: center; }
.or-vg--flush { padding: 8px; }
.or-seg { display: flex; gap: 6px; margin-bottom: 16px; }
.or-seg button { flex: 1 1 auto; min-height: 44px; padding: 4px 8px; border: 1px solid var(--tw-border-card); border-radius: 6px; background-color: var(--tw-bg-card); color: var(--or-muted); font-family: inherit; font-size: 14px; line-height: 1.2; white-space: nowrap; cursor: pointer; }
.or-seg button[aria-pressed="true"] { border-color: transparent; background: rgba(76, 141, 255, .16); box-shadow: inset 0 0 0 2px var(--or-accent); color: var(--tw-text-primary); font-weight: 700; }
.or-kb[hidden] { display: none; }
.or-kb__rows { display: flex; flex-direction: column; gap: 10px; }
.or-kb__row { display: flex; align-items: center; gap: 12px; }
.or-kb__from { display: flex; flex: 1; justify-content: flex-end; gap: 6px; }
.or-kb__to { display: flex; flex: 1; }
.or-key { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 38px; padding: 0 11px; border: 1px solid var(--tw-border-card); border-radius: 7px; background-color: var(--tw-bg-card); box-shadow: 0 2px 0 var(--tw-border-card); color: var(--tw-text-body); font-family: inherit; font-size: 14px; font-weight: 700; white-space: nowrap; }
.or-key--to { border-color: rgba(76, 141, 255, .6); background: rgba(76, 141, 255, .14); box-shadow: 0 2px 0 rgba(76, 141, 255, .5); color: var(--tw-text-primary); }
.or-kb__arrow { flex: none; color: var(--or-accent); }
.or-kb__note { min-height: 40px; margin-top: 12px; color: var(--tw-text-body); font-size: 14px; line-height: 1.45; text-align: center; }
.or-li { display: flex; align-items: center; gap: 12px; padding: 7px 4px; color: var(--or-accent); }
.or-li svg { flex: none; display: block; }
.or-li span { display: block; color: var(--or-muted); font-size: 14px; line-height: 1.4; }
.or-li strong { color: var(--tw-text-body); }
.or-curtain { position: relative; display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 140px; padding: 12px; border-radius: 6px; background: repeating-linear-gradient(90deg, #0b2245 0, #0b2245 14px, #0f2b55 14px, #0f2b55 28px); color: #e8f0fc; font-size: 14px; line-height: 1.35; text-align: center; }
.or-curtain span { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.or-menu { width: 100%; max-width: 400px; margin: 0 auto; padding: 6px; border-radius: 9px; background-color: var(--tw-bg-card); box-shadow: 0 12px 26px -14px var(--or-shadow), 0 0 0 1px var(--tw-border-card); color: var(--tw-text-body); font-size: 14px; line-height: 1.35; }
.or-menu p { position: relative; padding: 6px 10px 6px 28px; line-height: 1.35; }
.or-menu p.is-head { padding-left: 10px; color: var(--or-muted); font-size: 13px; font-weight: 700; }
.or-menu p.is-sel { border-radius: 5px; background: rgba(76, 141, 255, .14); }
.or-menu p.is-dim { color: var(--or-muted); }
.or-menu svg { position: absolute; left: 11px; top: 50%; margin-top: -6px; color: var(--tw-text-primary); }
.or-spin { display: block; width: 30px; height: 30px; margin: 0 auto 12px; border: 3px solid rgba(76, 141, 255, .25); border-top-color: var(--or-accent); border-radius: 50%; animation: or-spin 1s linear infinite; }
@keyframes or-spin { to { transform: rotate(360deg); } }
.or-mb { display: flex; align-items: center; justify-content: flex-end; gap: 10px; height: 30px; margin: -16px -16px 14px; padding: 0 12px; border-radius: 8px 8px 0 0; background: rgba(76, 141, 255, .16); font-size: 13px; }
.or-mb b { display: flex; align-items: center; justify-content: center; width: 26px; height: 22px; border-radius: 4px; background: rgba(76, 141, 255, .3); }
.or-mb path, .or-mb rect { fill: var(--tw-text-primary); }
.or-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; }
.or-row span { color: var(--or-muted); white-space: nowrap; }
.or-pill { padding: 3px 9px; border: 1px solid var(--tw-border-card); border-radius: 6px; background-color: var(--tw-bg-card); color: var(--tw-text-body); font-size: 13px; line-height: 1.35; text-align: right; }
.or-sw { flex: none; position: relative; width: 34px; height: 20px; border-radius: 999px; background: var(--or-accent); }
.or-sw::after { content: ""; position: absolute; right: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.or-thumb { display: flex; flex-direction: column; gap: 3px; }
.or-thumb small { color: var(--or-muted); font-size: 13px; }
.or-thumb code { padding: 5px 8px; overflow: hidden; border-radius: 5px; background-color: var(--tw-bg-card); box-shadow: 0 0 0 1px var(--tw-border-card); color: var(--tw-text-body); font-family: var(--or-mono); font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
.or-thumb__eq { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin: 7px auto; border-radius: 50%; background: var(--or-accent); color: #fff; }

/* Postavljanje: tamna sekcija s koracima i nacrtanim setup asistentom */
.or-stage { padding: 104px 0; background-color: var(--or-mid); color: #fff; }
.or-stage .or-h2 { color: #fff; }
.or-setup { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: 64px; align-items: center; }
.or-steps { display: flex; flex-direction: column; gap: 30px; margin-top: 40px; }
.or-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 8px; }
.or-steps i { grid-row: span 2; color: var(--or-beam); font-size: 40px; font-style: normal; line-height: 1; }
.or-steps h3 { margin-bottom: 6px; color: #fff; font-size: 22px; font-weight: 700; line-height: 1.25; }
.or-steps p { color: var(--or-on-dark); }
.or-mock { overflow: hidden; border: 1px solid rgba(185, 207, 238, .24); border-radius: 10px; background: #fff; box-shadow: 0 34px 60px -30px rgba(2, 10, 26, .9); color: #16243d; font-size: 12px; line-height: 1.4; }
.or-mock__bar { position: relative; display: flex; align-items: center; justify-content: center; height: 30px; background: #f1f3f7; box-shadow: inset 0 -1px 0 #dfe3ea; font-weight: 700; }
.or-mock__dots { position: absolute; left: 12px; top: 50%; display: flex; gap: 6px; margin-top: -5px; }
.or-mock__dots b { width: 10px; height: 10px; border-radius: 50%; background: #ef6a5e; }
.or-mock__dots b:nth-child(2) { background: #f4bd50; }
.or-mock__dots b:nth-child(3) { background: #61c454; }
.or-mock__body { display: grid; grid-template-columns: 186px minmax(0, 1fr); min-height: 400px; }
.or-mock__side { display: flex; flex-direction: column; gap: 14px; padding: 16px; background: #f0f3f8; box-shadow: inset -1px 0 0 #e1e6ee; }
.or-mock__brand { display: flex; align-items: center; gap: 6px; }
.or-mock__brand img { width: 44px; height: 44px; margin: -3px; }
.or-mock__brand strong { display: block; font-size: 17px; line-height: 1.1; }
.or-mock__brand span { display: block; margin-top: 2px; color: #5a6b85; font-size: 9px; font-weight: 700; letter-spacing: .12em; }
.or-mock__prog small { display: block; margin-bottom: 6px; color: #5a6b85; font-size: 11px; }
.or-mock__prog b { display: block; height: 5px; border-radius: 5px; background: #2c6ae0; }
.or-mock__list { display: flex; flex-direction: column; gap: 2px; }
.or-mock__list li { display: flex; align-items: center; gap: 8px; padding: 6.5px 8px; border-radius: 8px; }
.or-mock__list li.is-on { background: rgba(44, 106, 224, .13); font-weight: 700; }
.or-mock__list span { display: flex; flex: none; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: #2c6ae0; color: #fff; }
.or-mock__foot { margin-top: auto; color: #5a6b85; font-size: 11px; }
.or-mock__main { display: flex; flex-direction: column; min-width: 0; }
.or-mock__in { display: flex; flex: 1; flex-direction: column; gap: 12px; padding: 22px 24px; }
.or-mock__in h3 { color: #16243d; font-size: 22px; font-weight: 700; line-height: 1.2; }
.or-mock__in p { color: #47566e; font-size: 13px; line-height: 1.5; }
.or-mock__addr { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 8px; background: #f0f3f8; }
.or-mock__addr small { display: block; color: #5a6b85; font-size: 9px; font-weight: 700; letter-spacing: .08em; }
.or-mock__addr strong { display: block; font-size: 17px; line-height: 1.3; }
.or-mock__b { flex: none; padding: 3px 11px; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px #d5dbe5, 0 1px 1px rgba(10, 30, 60, .1); font-size: 12px; white-space: nowrap; }
.or-mock__b--on { background: #2c6ae0; box-shadow: none; color: #fff; font-weight: 700; }
.or-mock__thumb { padding: 6px 8px; overflow: hidden; border-radius: 6px; background: #f0f3f8; font-family: var(--or-mono); font-size: 10.5px; white-space: nowrap; text-overflow: ellipsis; }
.or-mock__act { display: flex; justify-content: space-between; padding: 12px 16px; box-shadow: inset 0 1px 0 #e1e6ee; }

/* Zahtjevi i ogranicenja */
.or-spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 48px; }
.or-spec h3 { margin-bottom: 12px; color: var(--tw-text-body); font-size: 22px; font-weight: 700; line-height: 1.25; }
.or-spec dl > div { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 0 16px; padding: 12px 0; border-top: 1px solid var(--tw-border-light); }
.or-spec dt { color: var(--tw-text-body); font-size: 14px; font-weight: 700; line-height: 1.7; }
.or-spec dd { color: var(--or-muted); line-height: 1.6; }

/* Zavrsna prijava i Alcedo za suprotni smjer */
.or-end { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; padding-bottom: 96px; }
.or-cta { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 32px; align-items: center; overflow: hidden; padding: 44px 40px; border-radius: 12px; background: linear-gradient(180deg, var(--or-top) 0%, var(--or-mid) 55%, var(--or-deep) 100%); color: #fff; }
.or-cta::before { content: ""; position: absolute; right: -96px; top: -108px; width: 421px; height: 425px; background: url('/assets/img/illustration.png') no-repeat; pointer-events: none; }
.or-cta > * { position: relative; }
.or-cta .or-h2 { color: #fff; }
.or-cta__p { margin-top: 12px; color: var(--or-on-dark); }
.or-form--row { flex-direction: row; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.or-form--row .or-input { flex: 1 1 200px; width: auto; min-width: 0; height: 65px; }
.or-form--row .or-btn { flex: 0 0 216px; width: auto; }
.or-form--row .alert, .or-form--row .tw-turnstile { flex: 1 1 100%; }
.or-cta .or-ok { margin-top: 24px; padding: 0; border-top: 0; }
.or-alc { align-items: flex-start; justify-content: center; }
.or-alc img { display: block; width: 64px; height: 64px; }
.or-alc__link { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; color: var(--tw-text-primary) !important; font-size: 14px; font-weight: 700; text-decoration: none; }
.or-alc__link:hover { text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 1199.98px) {
    .or-cta::before { display: none; }
}

@media (max-width: 991.98px) {
    .or-hero__aside { display: flex; flex: 1 1 100%; justify-content: center; }
    .or-panel { width: 400px; max-width: 100%; }
    .or-pipe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .or-pipe li:nth-child(2)::after { display: none; }
    .or-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .or-setup { grid-template-columns: minmax(0, 1fr); }
    .or-end { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767.98px) {
    .or-hero, .or-stagewrap { --or-overlap: 128px; }
    .or-hero__in { gap: 72px; padding: 48px 15px 40px; }
    .or-stagewrap { padding: 0 15px; }
    .or-wrap { padding: 0 15px; }
    .or-sec { padding: 64px 0; }
    .or-story { grid-template-columns: minmax(0, 1fr); padding-top: 48px; padding-bottom: 64px; }
    .or-pipe { grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
    .or-pipe li:not(:last-child)::after, .or-pipe li:nth-child(2)::after { display: block; top: auto; right: auto; bottom: -23px; left: 50%; margin: 0 0 0 -6px; transform: rotate(135deg); }
    .or-facts { grid-template-columns: minmax(0, 1fr); }
    .or-bento { grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
    .or-card--wide { grid-column: auto; grid-template-columns: minmax(0, 1fr); }
    .or-stage { padding: 64px 0; }
    .or-mock__body { grid-template-columns: minmax(0, 1fr); }
    .or-mock__side { display: none; }
    .or-spec { grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
    .or-spec dl > div { grid-template-columns: 96px minmax(0, 1fr); }
    .or-end { padding-bottom: 64px; }
    .or-cta { grid-template-columns: minmax(0, 1fr); padding: 32px 20px; }
    .or-cta__erk { display: none; }
    .or-form--row .or-input, .or-form--row .or-btn { flex: 1 1 100%; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .or-erk.is-lit .or-erk__p, .or-erk.is-lit .or-erk__t, .or-spin { animation-duration: .01ms; animation-delay: 0s; }
}

/* ---------- Prozor: Windows desktop, a u njemu Mac u Remote Desktop prozoru (_OrielWindow) ---------- */

.pz { container: pz / inline-size; width: 100%; color: #16243d; font-size: 12px; line-height: 1.4; --pz-bar-bg: #f3f5f9; --pz-bar-text: #1b2230; }
[data-theme="dark"] .pz { --pz-bar-bg: #222c3d; --pz-bar-text: #e2e8f0; }
.pz *, .pz *::before, .pz *::after { box-sizing: border-box; }
.pz p { margin: 0; }
.pz-desk { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid rgba(185, 207, 238, .24); border-radius: 12px; background: linear-gradient(180deg, #0f2d5a 0%, #0b2245 55%, #071730 100%); box-shadow: 0 44px 80px -44px rgba(4, 16, 38, .8), 0 18px 40px -28px rgba(10, 46, 86, .4); }
.pz-wall { position: absolute; top: -60px; right: -40px; width: 760px; height: auto; opacity: .75; pointer-events: none; }
.pz-tag { position: absolute; z-index: 3; padding: 3px 9px; border: 1px solid rgba(185, 207, 238, .45); border-radius: 999px; background: #0b2245; color: #e8f0fc; font-size: 11px; font-weight: 700; letter-spacing: .05em; line-height: 1.2; white-space: nowrap; }
.pz-tag--pc { left: 14px; bottom: 10px; }
.pz-tag--mac { left: 12px; bottom: 12px; }
.pz-area { position: absolute; top: 0; right: 0; bottom: 40px; left: 0; display: flex; align-items: center; justify-content: center; }
.pz-win { position: relative; display: flex; flex: none; flex-direction: column; width: 75%; height: 82.6%; border-radius: 8px; box-shadow: 0 26px 50px -18px rgba(2, 10, 26, .75), 0 0 0 1px rgba(255, 255, 255, .14); }
.pz-title { display: flex; flex: none; align-items: center; gap: 8px; height: 30px; padding-left: 12px; border-radius: 8px 8px 0 0; background: var(--pz-bar-bg); color: var(--pz-bar-text); font-size: 12px; }
.pz-title__t { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pz-title svg { display: block; flex: none; }
.pz-ln { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.pz-ctl { display: flex; flex: none; height: 100%; }
.pz-ctl span { display: flex; align-items: center; justify-content: center; width: 42px; height: 100%; }
.pz-mac { position: relative; flex: 1; min-height: 0; overflow: hidden; border-radius: 0 0 8px 8px; background: linear-gradient(112deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .08) 30%, rgba(255, 255, 255, .08) 46%, rgba(255, 255, 255, 0) 46%), linear-gradient(112deg, rgba(255, 255, 255, 0) 51%, rgba(255, 255, 255, .05) 51%, rgba(255, 255, 255, .05) 57%, rgba(255, 255, 255, 0) 57%), linear-gradient(180deg, #4c8dff 0%, #2c63c0 48%, #143a7c 100%); }
.pz-bar { position: absolute; top: 0; right: 0; left: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; height: 24px; padding: 0 10px; background: rgba(8, 24, 52, .42); color: #fff; font-size: 12px; white-space: nowrap; }
.pz-bar__l, .pz-bar__r { display: flex; align-items: center; gap: 13px; }
.pz-bar__ori { display: flex; align-items: center; justify-content: center; width: 26px; height: 20px; border-radius: 4px; background: rgba(255, 255, 255, .24); }
.pz-erk { fill: #fff; }
.pz-app { position: absolute; display: flex; flex-direction: column; overflow: hidden; border-radius: 9px; background: #fff; box-shadow: 0 18px 36px -14px rgba(3, 14, 36, .65), 0 0 0 1px rgba(8, 24, 52, .18); }
.pz-app__bar { display: flex; flex: none; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-bottom: 1px solid #e7ebf1; background: #f7f8fb; color: #16243d; font-size: 11px; font-weight: 700; white-space: nowrap; }
.pz-app__bar b { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #ef6a5e; }
.pz-app__bar b:nth-child(2) { background: #f4bd50; }
.pz-app__bar b:nth-child(3) { background: #61c454; }
.pz-app__bar span { margin-left: 8px; overflow: hidden; text-overflow: ellipsis; }
.pz-app--files { top: 13%; left: 4%; width: 44%; height: 52%; min-width: 300px; }
.pz-app--doc { top: 30%; left: 25%; width: 36%; height: 60%; min-width: 260px; }
.pz-files { display: flex; flex: 1; min-height: 0; }
.pz-side { flex: none; width: 34%; padding: 9px 8px; background: #eef1f6; color: #3d4a60; font-size: 11px; line-height: 1.3; }
.pz-side p { padding: 4px 7px; overflow: hidden; border-radius: 5px; white-space: nowrap; text-overflow: ellipsis; }
.pz-side p:nth-child(2) { background: rgba(76, 141, 255, .2); color: #16243d; font-weight: 700; }
.pz-rows { flex: 1; min-width: 0; padding: 6px 10px; color: #16243d; font-size: 11px; }
.pz-rows p { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid #eef1f6; white-space: nowrap; }
.pz-rows p:last-child { border-bottom: 0; }
.pz-rows span { overflow: hidden; text-overflow: ellipsis; }
.pz-rows i { flex: none; color: #67758b; font-style: normal; }
.pz-page { display: flex; flex: 1; flex-direction: column; gap: 7px; min-height: 0; padding: 16px 20px; overflow: hidden; background: #fff; }
.pz-page strong { color: #10305e; font-size: 13px; }
.pz-page u { display: block; height: 5px; border-radius: 3px; background: #dfe5ee; text-decoration: none; }
.pz-chart { display: flex; flex: 1; align-items: flex-end; gap: 7px; min-height: 30px; margin-top: 6px; padding-bottom: 1px; border-bottom: 1px solid #dfe5ee; }
.pz-chart i { flex: 1; max-width: 30px; border-radius: 3px 3px 0 0; background: #4c8dff; }
.pz-chart i:nth-child(2n) { background: #a9c9ff; }
.pz-menu { position: absolute; top: 26px; right: 40px; z-index: 3; width: 306px; padding: 5px; border-radius: 9px; background: rgba(245, 248, 252, .96); box-shadow: 0 22px 44px -16px rgba(3, 14, 36, .7), 0 0 0 1px rgba(8, 24, 52, .14); color: #16243d; font-size: 12px; line-height: 1.3; }
.pz-menu p { position: relative; display: flex; align-items: center; gap: 7px; padding: 3.5px 8px 3.5px 25px; border-radius: 5px; white-space: nowrap; }
.pz-menu p span { overflow: hidden; text-overflow: ellipsis; }
.pz-menu p.is-dim { color: #68758a; }
.pz-menu p.is-head { padding-top: 7px; padding-left: 8px; color: #5a6b85; font-size: 11px; font-weight: 700; }
.pz-menu p em { margin-left: auto; color: #68758a; font-style: normal; }
.pz-menu p svg { position: absolute; left: 9px; top: 50%; margin-top: -5px; }
.pz-menu hr { height: 1px; margin: 4px 8px; border: 0; background: rgba(22, 36, 61, .12); }
.pz-chk { fill: none; stroke: #16243d; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pz-dock { position: absolute; bottom: 8px; left: 50%; z-index: 1; display: flex; align-items: center; gap: 6px; padding: 5px 7px; border-radius: 12px; background: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); transform: translateX(-50%); }
.pz-dock b { display: block; width: 26px; height: 26px; border-radius: 7px; background: linear-gradient(180deg, #e8f0fc, #a9c9ff); }
.pz-dock b:nth-child(2) { background: linear-gradient(180deg, #7fb4ff, #2f74ef); }
.pz-dock b:nth-child(3) { background: linear-gradient(180deg, #fff, #d3e5ff); }
.pz-dock b:nth-child(4) { background: linear-gradient(180deg, #1e4075, #0b2245); }
.pz-dock b:nth-child(5) { background: linear-gradient(180deg, #b9cfee, #5284bd); }
.pz-dock b:nth-child(6) { background: linear-gradient(180deg, #4c8dff, #1e4075); }
.pz-task { position: absolute; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; height: 40px; background: rgba(6, 18, 40, .82); box-shadow: inset 0 1px 0 rgba(185, 207, 238, .14); color: #e8f0fc; }
.pz-task__c { display: flex; align-items: center; gap: 7px; }
.pz-task__c > span { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 5px; }
.pz-task__c > span > b { display: block; width: 17px; height: 17px; border-radius: 4px; background: rgba(185, 207, 238, .34); }
.pz-task__on { position: relative; background: rgba(185, 207, 238, .16); }
.pz-task__on::after { content: ""; position: absolute; right: 9px; bottom: 1px; left: 9px; height: 2px; border-radius: 2px; background: #7fb4ff; }
.pz-task__st { display: grid; grid-template-columns: repeat(2, 6.5px); gap: 1.5px; }
.pz-task__st i { display: block; width: 6.5px; height: 6.5px; border-radius: 1px; background: #7fb4ff; }
.pz-task__t { position: absolute; top: 50%; right: 14px; font-size: 11px; line-height: 1.25; text-align: right; transform: translateY(-50%); }
@container pz (max-width: 900px) {
    .pz-bar__l span:nth-child(n+5) { display: none; }
    .pz-app--files { left: 3%; width: 50%; }
    .pz-app--doc { left: 12%; width: 46%; }
}
@container pz (max-width: 640px) {
    .pz-desk { aspect-ratio: 1 / 1.16; }
    .pz-area { bottom: 34px; }
    .pz-task { height: 34px; }
    .pz-task__t, .pz-wall, .pz-app--files, .pz-app--doc, .pz-tag--mac, .pz-task__c > span:nth-child(-n+2) { display: none; }
    .pz-tag--pc { left: 10px; bottom: 7px; }
    .pz-win { min-width: 74%; min-height: 70%; }
    .pz-title { height: 26px; font-size: 11px; }
    .pz-ctl span { width: 28px; }
    .pz-bar { height: 22px; }
    .pz-bar__l span { display: none; }
    .pz-menu { top: 24px; right: 6px; width: calc(100% - 12px); max-width: 262px; }
    .pz-menu > :first-child, .pz-menu > :nth-child(n+9) { display: none; }
    .pz-dock { bottom: 6px; }
    .pz-dock b:nth-child(n+6) { display: none; }
}