:root{
  --bg:#f7f9fc; --text:#0f1a2b; --muted:#54627a;
  --surface:#ffffff; --card:#ffffff; --border:rgba(0,0,0,.08);
  --primary:#1f8fe8; --accent:#12cf85; --btnText:#ffffff;
  --link:#0d63b8; --shadow:0 10px 22px rgba(0,0,0,.08);
  --veilTop:rgba(6,10,14,.06); --veilBottom:rgba(6,10,14,.18);
  --focus:#ffd166;
}
html[data-theme="dark"]{
  --bg:#0c1016; --text:#e7ebf2; --muted:#a8b3c6;
  --surface:#0f1319; --card:#11161d; --border:rgba(255,255,255,.08);
  --primary:#7fc2ff; --accent:#39dea0; --btnText:#06121a;
  --link:#c7e4ff; --shadow:0 16px 36px rgba(0,0,0,.45);
  --veilTop:rgba(0,0,0,.08); --veilBottom:rgba(0,0,0,.16);
  --focus:#ffd166;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Open Sans',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);transition:background .25s,color .25s}
a{color:var(--link);text-decoration:none}
a:visited{color:var(--link)}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.section,[id]{scroll-margin-top:86px}

/* header */
header{position:sticky;top:0;z-index:1000;background:linear-gradient(135deg, rgba(31,143,232,.85), rgba(18,207,133,.85));backdrop-filter:blur(8px);box-shadow:0 4px 14px rgba(0,0,0,.12)}
header .bar{display:flex;align-items:center;justify-content:space-between;padding:.7rem 0}
.logo{display:flex;gap:12px;align-items:center}
.logo .badge{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(from 180deg,var(--accent), #0aa86b);color:#022;box-shadow:0 6px 18px rgba(0,0,0,.2)}
.logo h1{font-size:1.22rem;margin:0;color:#fff}
.logo p{margin:0;font-size:.78rem;color:#f9fdff;opacity:.9;margin-top:-2px}
.nav>ul{list-style:none;display:flex;gap:1rem;margin:0;padding:0;align-items:center}
.nav a{color:#fff;position:relative;padding:.25rem 0;font-weight:700}
.nav a::after{content:'';position:absolute;left:0;bottom:-6px;height:2px;width:0;background:#fff;transition:width .25s}
.nav a:hover::after,.nav a.active::after{width:100%}
.nav li{position:relative}
.nav .submenu{position:absolute;top:110%;left:0;min-width:220px;background:rgba(6,12,22,.98);backdrop-filter:blur(10px);padding:10px;border-radius:12px;display:none}
.nav .submenu a{display:block;padding:10px 12px;border-radius:8px;color:#fff}
.nav li:hover>.submenu{display:block}

/* header actions + iOS switch */
.header-actions{margin-left:auto;display:flex;align-items:center;gap:12px}
.ios-switch{position:relative; width:56px; height:28px; border-radius:999px; border:2px solid rgba(255,255,255,.55); background:rgba(255,255,255,.15); cursor:pointer; outline:none; display:inline-block; vertical-align:middle}
.ios-switch .thumb{position:absolute; top:50%; left:3px; width:24px; height:24px; border-radius:50%; background:#fff; transform:translateY(-50%); transition:left .22s ease, background .22s}
.ios-switch[aria-pressed="true"]{background:rgba(255,255,255,.25)}
.ios-switch[aria-pressed="true"] .thumb{left: calc(100% - 3px - 24px); background:#ffe082}
.ios-switch .sun,.ios-switch .moon{position:absolute; top:50%; transform:translateY(-50%); font-size:12px; color:#fff; pointer-events:none; user-select:none}
.ios-switch .sun{left:8px}
.ios-switch .moon{right:8px}

/* inline search */
.search-wrap{position:relative}
#searchBtn{background:transparent;border:2px solid rgba(255,255,255,.65);color:#fff;border-radius:999px;padding:.35rem .65rem;font-weight:800;cursor:pointer}
#searchPanel{position:absolute;right:0;top:130%;min-width:340px;display:none;background:rgba(6,12,22,.98);backdrop-filter:blur(8px);padding:12px;border-radius:12px;box-shadow:0 10px 24px rgba(0,0,0,.3)}
#searchPanel.show{display:block}
#q{width:100%;padding:.7rem;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff}
#results{display:grid;grid-template-columns:1fr;gap:10px;margin-top:10px}
#results a.card{color:#fff;border:1px solid rgba(255,255,255,.08)}

/* burger/mobile */
.burger{display:none;background:none;border:0;color:#fff;font-size:1.4rem}
.mobile-nav{display:none;position:absolute;top:100%;left:0;right:0;background:rgba(6,12,22,.98);backdrop-filter:blur(10px)}
.mobile-nav ul{list-style:none;margin:0;padding:10px 16px;display:flex;flex-direction:column}
.mobile-nav a{display:block;color:#fff;padding:12px 10px;border-bottom:1px solid rgba(255,255,255,.08)}
.mobile-nav .submenu{display:none}.mobile-nav .submenu.show{display:block}
@media (max-width:980px){.nav>ul{display:none}.burger{display:block}.mobile-nav.show{display:block}}

/* Buttons — unified */
.btn,.btn:link,.btn:visited{display:inline-flex;align-items:center;gap:.6rem;background:var(--primary);color:var(--btnText)!important;text-decoration:none;padding:.78rem 1rem;border-radius:12px;border:1px solid rgba(0,0,0,.06);box-shadow:0 6px 14px rgba(0,0,0,.12);font-weight:800;letter-spacing:.1px;transition:transform .12s ease, box-shadow .12s ease, background .12s ease;will-change:transform}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(0,0,0,.18)}
.btn:active{transform:translateY(0);box-shadow:0 4px 10px rgba(0,0,0,.14)}
.btn-ghost{background:transparent;color:var(--primary)!important;border:1px solid var(--primary)}
.btn-ghost:hover{background:rgba(31,143,232,.08)}
.btn-green{background:var(--accent);color:var(--btnText)!important;border-color:rgba(0,0,0,.05)}

/* Cards */
.card{background:var(--card); border:1px solid var(--border); padding:16px; border-radius:14px; transition:transform .18s, box-shadow .18s; color:inherit}
.card:hover{transform:translateY(-2px); box-shadow:0 14px 26px rgba(0,0,0,.14)}
.card h3{margin:0 0 .35rem}
.card p{margin:.1rem 0 0;color:var(--muted)}

/* Card-line layout with arrow on the right */
.card-line{display:flex; align-items:center; gap:12px; justify-content:space-between}
.card-info{display:grid; gap:6px; min-width:0} /* allow text ellipsis if needed */
.card-info h3{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.card-info p{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.cta-arrow{min-width:44px; height:44px; display:grid; place-items:center; border-radius:12px;
  background:var(--primary); color:var(--btnText)!important; border:1px solid rgba(0,0,0,.06);
  box-shadow:0 8px 18px rgba(0,0,0,.16); text-decoration:none; transition:transform .12s ease, box-shadow .12s ease, background .12s ease}
.cta-arrow:hover{transform:translateX(2px); box-shadow:0 12px 24px rgba(0,0,0,.2)}
.cta-arrow:active{transform:translateX(0); box-shadow:0 6px 14px rgba(0,0,0,.16)}

.card-line .cta-arrow i{font-size:1rem}
.card-line .cta-arrow[aria-disabled="true"]{pointer-events:none; opacity:.6}

/* hero + veil minimal */
.hero{position:relative;min-height:42vh;display:grid;place-items:center;color:#fff;text-align:center;overflow:hidden}
.hero .bg{position:absolute;inset:0;overflow:hidden}
.hero .bg img{width:100%;height:100%;object-fit:cover;filter:contrast(1.02) brightness(.95)}
.hero .veil{position:absolute;inset:0;background:linear-gradient(180deg,var(--veilTop),var(--veilBottom))}
.hero .inner{position:relative;z-index:1;max-width:900px;padding:0 16px}
.hero .inner h2{margin:0 0 .45rem}

/* sections */
.section{margin:32px 0;background:var(--card);border-radius:16px;padding:24px 16px;box-shadow:var(--shadow);transform:translateY(10px);opacity:0;transition:transform .6s cubic-bezier(.2,.65,.2,1), opacity .6s}
.section.visible{transform:none;opacity:1}
.section .head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.section h2{margin:0;color:var(--primary);border-bottom:3px solid var(--accent);display:inline-block;padding-bottom:6px}

/* forms */
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:8px}
label{display:block;margin-bottom:.5rem;color:var(--muted);font-weight:600}
input,textarea{font-family:'Open Sans',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:10px;padding:.7rem;width:100%}
textarea{resize:vertical}

/* footer */
footer{background:linear-gradient(135deg, rgba(31,143,232,.2), rgba(0,0,0,.85));color:#e7f2ff;margin-top:36px}
.wrap{padding:24px 0 14px;text-align:center}
.footer-links{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin:10px 0}
.footer-links a{color:inherit}.footer-links a:hover{color:#fff}
.copyright{opacity:.85;margin-top:8px;border-top:1px solid rgba(255,255,255,.15);padding-top:10px}
#toTop{position:fixed;right:18px;bottom:18px;z-index:1001;display:none;align-items:center;gap:8px;padding:.5rem .8rem;border-radius:12px;background:var(--primary);color:#fff;border:0;box-shadow:0 10px 22px rgba(0,0,0,.25);cursor:pointer}
#toTop.show{display:inline-flex}


/* global Svetogor background */
body::before{
  content:'';
  position:fixed;
  inset:0;
  background:url('../img/svetogor-bg.jpg') center center / cover no-repeat fixed;
  filter:blur(8px);
  opacity:.35;
  z-index:-1;
  pointer-events:none;
}