/* SUN INVEST — base styles. Design: Claude Design "SUN INVEST Sajt v3" (navy #101850, gold #CDB13D, cream #F6F4EF; Unbounded + Onest). */
:root { --serif: "Times New Roman", Times, "Tinos", "Liberation Serif", "Nimbus Roman", "Noto Serif", serif; }
html, body { margin: 0; font-family: var(--serif); font-kerning: normal; text-rendering: optimizeLegibility; font-feature-settings: "kern", "liga", "onum" 0; background: #F6F4EF; color: #101850; -webkit-font-smoothing: antialiased; }
html { scroll-padding-top: 92px; }
html.mo { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }
img, svg { max-width: 100%; }
a { color: #101850; }
a:hover { color: #26307A; }
::selection { background: #CDB13D; color: #101850; }
:focus-visible { outline: 2px solid #CDB13D; outline-offset: 3px; }
[hidden] { display: none !important; }
body.menu-open { overflow: hidden; }
button, input, select, textarea { font-family: inherit; }
input, select, textarea { font-size: 18px; }

.skip { position: absolute; left: 12px; top: -64px; z-index: 100; background: #101850; color: #fff; padding: 12px 18px; border-radius: 999px; text-decoration: none; font-weight: 500; }
.skip:focus { top: 12px; color: #fff; }

/* v3 used JS width checks; these are the same breakpoints as media queries */
.wf { display: none; }
.nf { display: inline-flex; }
.wb { display: none; }
.cb { display: none; }
@media (min-width: 1000px) { .wf { display: flex; } .nf { display: none; } .wb { display: block; } }
@media (max-width: 719px) { .cb { display: block; } }

header { transition: box-shadow .25s ease; }
header.sc { box-shadow: 0 10px 30px rgba(16, 24, 80, .07); }
header .hlogo { height: clamp(32px, 2.9vw, 40px) !important; }
footer img[alt="SUN INVEST"] { height: 40px !important; }
header nav a[aria-current="page"] { font-weight: 600; }

/* menu button label swap */
.ml-c { display: none; }
[aria-expanded="true"] .ml-o { display: none; }
[aria-expanded="true"] .ml-c { display: inline; }

/* language switch */
[data-lang] { background: transparent; color: #101850; transition: background .2s ease, color .2s ease; }
[data-lang][aria-pressed="true"] { background: #101850; color: #fff; }

/* services accordion */
.acc-tile { background: #F6F4EF; color: #101850; }
.acc-btn[aria-expanded="true"] .acc-tile { background: #101850; color: #DCC45E; }
.acc-pm { background: transparent; }
.acc-btn[aria-expanded="true"] .acc-pm { background: #101850; }
.acc-bar { background: #101850; }
.acc-btn[aria-expanded="true"] .acc-bar { background: #fff; }
.acc-bar2 { transform: rotate(90deg); transition: transform .3s ease; }
.acc-btn[aria-expanded="true"] .acc-bar2 { transform: rotate(0); }

.kb { transform: scale(1.06); will-change: transform; }
.ai-badge { position: absolute; left: 12px; top: 12px; background: rgba(16, 24, 80, .78); color: #fff; font-size: 12px; font-weight: 500; letter-spacing: .02em; padding: 5px 11px; border-radius: 999px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

@keyframes kb { from { transform: scale(1.18); } to { transform: scale(1.06); } }
@keyframes up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
html.mo .kb { animation: kb 2.8s cubic-bezier(.2, .7, .2, 1) both; }
html.mo main h1 { animation: up .9s cubic-bezier(.2, .7, .2, 1) .1s both; }
html.mo main h1 + p { animation: up .9s cubic-bezier(.2, .7, .2, 1) .25s both; }
html.mo main h1 + p + div { animation: up .9s cubic-bezier(.2, .7, .2, 1) .4s both; }
html.mo #mobile-menu:not([hidden]) { animation: fade .25s ease both; }
html.mo [data-acc]:not([hidden]) { animation: drop .5s cubic-bezier(.2, .7, .2, 1) both; }
html.mo [data-acc-vis]:not([hidden]) { animation: zoomin .7s cubic-bezier(.2, .7, .2, 1) both; }


@media (hover: hover) {
html.mo main figure img { transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
html.mo main figure:hover img { transform: scale(1.04); }
}


/* compact header on phones so logo + language + menu fit in 375px */
@media (max-width: 560px) {
  header > div { gap: 10px !important; }
  header .hlogo { height: 26px !important; }
  header [role="group"] { padding: 3px !important; }
  header [role="group"] button { padding: 6px 9px !important; font-size: 12px !important; }
  header [data-menu-toggle] { padding: 0 14px !important; min-height: 44px !important; gap: 8px !important; font-size: 14px !important; }
  header > div > div { gap: 8px !important; }
}

/* mobile call bar slides in after the first screen (hero already carries the same CTAs) */
.cb > div:last-child { transform: translateY(150%); transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
body.cbv .cb > div:last-child { transform: none; }
@media (max-width: 360px) {
  header .hlogo { height: 22px !important; }
  header [role="group"] button { padding: 6px 7px !important; }
  header [data-menu-toggle] { padding: 0 11px !important; gap: 6px !important; }
  header > div > div { gap: 6px !important; }
}

/* ---------- animation layer ---------- */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: #CDB13D; transform: scaleX(0); transform-origin: 0 50%; z-index: 70; pointer-events: none; }
.ilu * { transform-box: fill-box; transform-origin: center; }
@keyframes down { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: none; } }
@keyframes drop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes zoomin { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { transform: scale(1.08); } }
@keyframes drift { from { transform: translateX(-5px); } to { transform: translateX(5px); } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-1.6deg); } 50% { transform: translateY(-3px) rotate(1.6deg); } }
@keyframes glint { 0%, 100% { fill-opacity: .12; } 50% { fill-opacity: .42; } }
@keyframes sway { 0%, 100% { transform: rotate(-1.4deg); } 50% { transform: rotate(1.4deg); } }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
html.mo header { animation: down .8s cubic-bezier(.2, .7, .2, 1) both; }
html.mo main section:first-of-type div:has(> h1) + p { animation: up .9s cubic-bezier(.2, .7, .2, 1) .3s both; }
html.mo main nav[aria-label="Usluge"] a { animation: up .8s cubic-bezier(.2, .7, .2, 1) both; }
html.mo main nav[aria-label="Usluge"] a:nth-child(1) { animation-delay: .65s; }
html.mo main nav[aria-label="Usluge"] a:nth-child(2) { animation-delay: .75s; }
html.mo main nav[aria-label="Usluge"] a:nth-child(3) { animation-delay: .85s; }
html.mo main nav[aria-label="Usluge"] a:nth-child(4) { animation-delay: .95s; }
html.mo #mobile-menu:not([hidden]) nav a { animation: up .6s cubic-bezier(.2, .7, .2, 1) both; }
html.mo #mobile-menu:not([hidden]) nav a:nth-child(1) { animation-delay: .04s; }
html.mo #mobile-menu:not([hidden]) nav a:nth-child(2) { animation-delay: .1s; }
html.mo #mobile-menu:not([hidden]) nav a:nth-child(3) { animation-delay: .16s; }
html.mo #mobile-menu:not([hidden]) nav a:nth-child(4) { animation-delay: .22s; }
html.mo #mobile-menu:not([hidden]) nav a:nth-child(5) { animation-delay: .28s; }
html.js.mo .rv { opacity: 0; transform: translateY(30px); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0s); }
html.js.mo .rv.in { opacity: 1; transform: none; }
html.js.mo .rv-pop { transform: translateY(22px) scale(.84); }
html.js.mo .rv-img { opacity: 0; clip-path: inset(9% 4% 9% 4%); transition: opacity 1s ease, clip-path 1.3s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0s); }
html.js.mo .rv-img.in { opacity: 1; clip-path: inset(0); }
html.js.mo .rv-img > img { transform: scale(1.2); transition: transform 1.8s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0s); }
html.js.mo .rv-img.in > img { transform: scale(1); }
html.mo .i-rays { animation: spin 50s linear infinite; }
html.mo .i-core { animation: pulse 5s ease-in-out infinite; }
html.mo .i-wave { animation: drift 6s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -1.1s); }
html.mo .i-boat { animation: bob 5s ease-in-out infinite; transform-origin: 50% 100%; }
html.mo .i-panel { animation: glint 4s ease-in-out infinite; animation-delay: calc(var(--i) * .5s); }
html.mo .i-tree { animation: sway 6s ease-in-out infinite; transform-origin: 50% 100%; }
html.mo img[src*="ilu-sunce"] { animation: spin 220s linear infinite; }
html.mo main ul[style*="repeat(3, html.mo 1fr)"] li img { animation: float 7s ease-in-out infinite; }
html.mo main ul[style*="repeat(3, html.mo 1fr)"] li:nth-child(2) img { animation-delay: -2.3s; }
html.mo main ul[style*="repeat(3, html.mo 1fr)"] li:nth-child(3) img { animation-delay: -4.6s; }
@media (prefers-reduced-motion: no-preference) {
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .38s; }
}


@media (hover: hover) {
html.mo main ol > li { transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s ease; }
html.mo main ol > li:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(16, 24, 80, .12); }
html.mo a[style*="min-height:180px"] { transition: border-color .2s ease, transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s ease !important; }
html.mo a[style*="min-height:180px"]:hover { transform: translateY(-5px); box-shadow: 0 22px 44px rgba(16, 24, 80, .1); }
html.mo a[style*="border-radius:999px"], html.mo button[style*="border-radius:999px"] { transition: background .2s ease, color .2s ease, border-color .2s ease, transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease !important; }
html.mo a[style*="border-radius:999px"]:hover { transform: translateY(-2px); }
html.mo a > svg:last-child { transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
html.mo a:hover > svg:last-child { transform: translateX(5px); }
html.mo .acc-btn { transition: padding .35s cubic-bezier(.2, .7, .2, 1); }
html.mo .acc-btn:hover { padding-left: 8px; }
html.mo .acc-btn:hover .acc-pm { background: #CDB13D; }
html.mo .acc-btn[aria-expanded="true"]:hover .acc-pm { background: #26307A; }
html.mo main ul[style*="repeat(3, html.mo 1fr)"] li img { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
html.mo main ul[style*="repeat(3, html.mo 1fr)"] li:hover img { transform: scale(1.08) rotate(-2deg); animation-play-state: paused; }
html.mo footer a { transition: color .2s ease, transform .3s ease; }
html.mo footer a:hover { transform: translateX(3px); }
html.mo header nav a > span { transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
html.mo header nav a:hover > span { transform: scale(1.8); background: #CDB13D !important; }
}


/* without the .mo flag (system asks for reduced motion and the visitor has not opted in) nothing moves */
html:not(.mo) *, html:not(.mo) *::before, html:not(.mo) *::after { transition: none !important; animation: none !important; }
.motion-toggle { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; opacity: .85; }

/* services bento */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(14px, 1.6vw, 22px); }
.b7 { grid-column: span 7; }
.b5 { grid-column: span 5; }
.b12 { grid-column: 1 / -1; }
@media (max-width: 960px) { .b7, .b5 { grid-column: 1 / -1; } }
html.mo .ride { animation: ride 4.5s ease-in-out infinite alternate; }
@keyframes ride { to { left: calc(100% - 16px); } }
@media (hover: hover) {
  html.mo .bento > article { transition: transform .55s cubic-bezier(.2, .7, .2, 1), box-shadow .55s ease; }
  html.mo .bento > article:hover { transform: translateY(-5px); box-shadow: 0 24px 48px rgba(16, 24, 80, .12); }
}
/* generated from style-hover / style-focus in the v3 design */
.hv0:hover{background:#26307A !important;color:#FFFFFF !important}
.hv1:hover{background:#DCC45E !important;color:#101850 !important}
.hv2:hover{background:#FFFFFF !important;color:#101850 !important}
.hv3:hover{color:#DCC45E !important}
.hv4:hover{background:#101850 !important;color:#FFFFFF !important}
.hv5:hover{color:#101850 !important}
.hv6:hover{border-color:#101850 !important;color:#101850 !important}
.hv7:hover{opacity:1 !important}
.hv8:hover{background:#26307A !important}
.hv9:hover{border-color:#101850 !important}
.fc0:focus{border-color:#101850 !important;background:#FFFFFF !important}