:root {
    --bg: #000D1A;
    --panel: #0F172A;
    --card: #111827cc;
    --blue: #00A4EF;
    --blue2: #0078D4;
    --text: #F8FAFC;
    --muted: #CBD5E1;
    --muted2: #94A3B8;
    --border: #94a3b838;
    --shadow: 0 28px 80px #0008;
    --r: 24px;
    --w: 1180px
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html {
    scroll-behavior: smooth
}

body {
    font-family: "Segoe UI", Arial, sans-serif;
    background: radial-gradient(circle at 8% 0, #00a4ef25, transparent 32rem), radial-gradient(circle at 90% 4%, #0078d420, transparent 28rem), var(--bg);
    color: var(--text);
    line-height: 1.65
}

a {
    text-decoration: none;
    color: inherit
}

.container {
    width: min(100% - 32px, var(--w));
    margin: auto
}

.section {
    padding: 92px 0;
    border-top: 1px solid #94a3b821
}

.grid {
    display: grid;
    gap: 28px
}

.two {
    grid-template-columns: 1.02fr .98fr;
    align-items: center;
    gap: 56px
}

.three {
    grid-template-columns: repeat(3, 1fr)
}

h1, h2, h3 {
    line-height: 1.12;
    letter-spacing: -.035em
}

h1 {
    font-size: clamp(42px, 6vw, 74px);
    margin-bottom: 22px
}

h2 {
    font-size: clamp(32px, 4vw, 50px);
    margin-bottom: 18px
}

h3 {
    font-size: 24px;
    margin-bottom: 12px
}

p, li {
    color: var(--muted);
    font-size: 17px
}

ul {
    padding-left: 1.1rem
}

.lead {
    font-size: 20px;
    max-width: 790px
}

.grad {
    background: linear-gradient(90deg, var(--blue), #8AE8FF);
    -webkit-background-clip: text;
    color: transparent
}

.eyebrow {
    display: inline-flex;
    gap: 9px;
    align-items: center;
    color: #b9ecff;
    background: #00a4ef21;
    border: 1px solid #00a4ef47;
    font-weight: 800;
    font-size: 14px;
    padding: 8px 14px;
    border-radius: 999px;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: .04em
}

.eyebrow:before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 0 20px var(--blue)
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 22px;
    border-radius: 999px;
    font-weight: 800;
    border: 1px solid transparent;
    transition: .22s
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow)
}

.btn-primary {
    background: linear-gradient(135deg, var(--blue), var(--blue2));
    color: white
}

.btn-ghost {
    background: #ffffff0a;
    border-color: var(--border)
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #000d1ad9;
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--border)
}

.nav {
    position: relative;
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-weight: 900
}

.brand-logo {
    height: 34px !important;
    width: auto !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    display: block !important
}

.brand-name {
    display: none;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid #94a3b824;
    background: #ffffff09;
    border-radius: 999px
}

.nav-links>a, .nav-dropdown-trigger {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    border-radius: 999px;
    color: var(--muted);
    font-weight: 750;
    font-size: 13px;
    white-space: nowrap;
    transition: .22s;
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    border: 0;
    background: transparent;
    cursor: pointer
}

.nav-links>a:hover, .nav-dropdown:hover .nav-dropdown-trigger, .nav-dropdown.is-open .nav-dropdown-trigger, .nav-dropdown-trigger.active {
    color: var(--text);
    background: #00a4ef24
}

.nav-links>a.active {
    color: var(--text);
    background: transparent
}

.nav-links>a.active:hover {
    background: #00a4ef24
}

.nav-dropdown {
    position: static;
    display: inline-flex
}

.dropdown-arrow {
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #00a4ef29;
    color: var(--blue);
    font-size: 10px;
    transition: .26s
}

.nav-dropdown:hover .dropdown-arrow, .nav-dropdown.is-open .dropdown-arrow {
    transform: rotate(180deg);
    background: #00a4ef42
}

.menu-button {
    display: none;
    width: 45px;
    height: 45px;
    border-radius: 14px;
    background: #ffffff0a;
    border: 1px solid var(--border)
}

.menu-button span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--text);
    margin: 5px auto
}

.lang-picker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border: 1px solid #94a3b824;
    background: #ffffff09;
    border-radius: 999px;
    font-size: 13px;
    white-space: nowrap
}

.lang-picker span {
    color: var(--muted2);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em
}

.lang-picker a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 10px;
    border-radius: 999px;
    color: var(--muted2);
    font-size: 13px;
    font-weight: 700;
    background: transparent;
    transition: .22s
}

.lang-picker a:hover {
    background: #00a4ef14;
    color: var(--text)
}

.lang-picker a.active {
    color: var(--text)
}

.mega-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    width: min(920px, calc(100vw - 32px));
    z-index: 1100;
    padding: 16px;
    border-radius: 28px;
    border: 1px solid #00a4ef38;
    background: linear-gradient(135deg, #0f172afb, #020617fb);
    box-shadow: 0 30px 90px #0009;
    backdrop-filter: blur(22px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(18px) scale(.975);
    filter: blur(6px);
    transition: opacity .32s cubic-bezier(.2, .7, .2, 1), transform .32s cubic-bezier(.2, .7, .2, 1), filter .32s ease, visibility .32s
}

.nav-dropdown:hover .mega-menu, .nav-dropdown:focus-within .mega-menu, .nav-dropdown.is-open .mega-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0) scale(1);
    filter: blur(0)
}

.mega-inner {
    display: grid;
    grid-template-columns: 1fr 1fr .82fr;
    gap: 12px
}

.mega-link, .mega-cta {
    min-height: 148px;
    padding: 20px;
    border-radius: 22px;
    border: 1px solid #94a3b82c;
    background: #ffffff09;
    opacity: 0;
    transform: translateY(14px);
    transition: .34s
}

.nav-dropdown:hover .mega-link, .nav-dropdown:hover .mega-cta, .nav-dropdown.is-open .mega-link, .nav-dropdown.is-open .mega-cta, .nav-dropdown:focus-within .mega-link, .nav-dropdown:focus-within .mega-cta {
    opacity: 1;
    transform: translateY(0)
}

.mega-link:nth-child(1) {
    transition-delay: .05s
}

.mega-link:nth-child(2) {
    transition-delay: .11s
}

.mega-cta {
    transition-delay: .17s
}

.mega-link {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 16px
}

.mega-link:hover, .mega-link.active {
    transform: translateY(-5px) !important;
    border-color: #00a4ef80;
    background: linear-gradient(135deg, #00a4ef26, #0078d412)
}

.mega-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    color: white;
    font-weight: 900;
    background: linear-gradient(135deg, var(--blue), var(--blue2));
    box-shadow: 0 14px 28px #00a4ef38
}

.mega-kicker {
    display: block;
    margin-bottom: 8px;
    color: #93E4FF;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em
}

.mega-title {
    display: block;
    color: var(--text);
    font-size: 17px;
    font-weight: 900;
    line-height: 1.2
}

.mega-text {
    display: block;
    color: var(--muted2);
    font-size: 13px;
    margin-top: 8px;
    line-height: 1.45
}

.mega-cta {
    background: radial-gradient(circle at top right, #00a4ef47, transparent 55%), #ffffff09
}

.mega-cta strong {
    display: block;
    font-size: 18px;
    margin-bottom: 10px
}

.mega-cta p {
    font-size: 13px;
    color: var(--muted2)
}

.mini-btn {
    display: inline-flex;
    margin-top: 18px;
    color: var(--blue);
    font-weight: 900;
    font-size: 13px
}

.footer {
    border-top: 1px solid var(--border);
    background: #020617b8;
    padding: 42px 0
}

.footer-logo {
    height: 34px !important;
    width: auto !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    display: block !important;
    margin-bottom: 12px
}

.footer-inner {
    display: grid;
    grid-template-columns: 1.2fr .8fr .8fr;
    gap: 25px
}

.footer a, .footer p {
    color: var(--muted2);
    font-size: 14px
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-weight: 700
}

.footer-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    color: var(--muted2);
    font-size: 13px;
    background: #ffffff08;
    transition: .22s
}

.footer-links a:hover {
    background: #00a4ef14;
    color: var(--text)
}

.footer-links a.active {
    color: var(--text)
}

.contact-line {
    display: block;
    color: var(--muted2);
    font-size: 14px;
    margin-top: 7px
}

/* Shared desktop refinements */
@media (min-width: 761px) {
    .brand-logo { height: 41px !important }
    .footer-logo { height: 41px !important }
}

.footer-links {
    display: grid;
    align-content: start;
    justify-items: start;
    gap: 10px
}

.footer-links a {
    justify-content: flex-start;
    padding: 0;
    min-height: 0;
    border-radius: 0;
    background: transparent
}

.footer-links a:hover {
    background: transparent;
    color: #8AE8FF;
    transform: translateX(3px)
}

.footer-menu-heading {
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
    margin-top: 5px
}

.footer-links .footer-submenu-link {
    padding-left: 16px;
    color: var(--muted2);
    position: relative
}

.footer-links .footer-submenu-link:before {
    content: "";
    position: absolute;
    left: 4px;
    top: 50%;
    width: 6px;
    height: 1px;
    background: var(--blue)
}

.footer-inner > div:first-child .contact-line {
    max-width: 170px;
    line-height: 1.55
}

.footer-socials {
    display: flex;
    gap: 10px;
    margin-top: 16px
}

.footer-socials a {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid #00a4ef47;
    border-radius: 10px;
    color: #8AE8FF;
    background: #00a4ef14;
    transition: .22s
}

.footer-socials a:hover {
    color: var(--text);
    background: #00a4ef35;
    border-color: #00a4ef90;
    transform: translateY(-3px)
}

.footer-socials svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 1.8
}

.footer-socials svg rect,
.footer-socials svg circle {
    fill: none
}

.footer-socials svg .social-dot { fill: currentColor; stroke: none }

.back-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1200;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid #00a4ef70;
    border-radius: 14px;
    color: var(--text);
    background: linear-gradient(135deg, #00a4ef, #0078D4);
    box-shadow: 0 14px 30px #0007;
    cursor: pointer;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .24s ease, visibility .24s ease, transform .24s ease, box-shadow .22s ease
}

.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0) }
.back-to-top:hover { box-shadow: 0 18px 36px #00a4ef45; transform: translateY(-3px) }
.back-to-top span { font-size: 24px; line-height: 1; font-weight: 800 }

.nav-dropdown.is-open .nav-dropdown-trigger {
    color: var(--text);
    background: #00a4ef24
}

@media (min-width: 761px) {
    .nav-links > a:hover,
    .nav-links > a.active,
    .nav-dropdown-trigger:hover,
    .nav-dropdown-trigger.active,
    .nav-dropdown.is-open > .nav-dropdown-trigger {
        appearance: none;
        -webkit-appearance: none;
        color: var(--text) !important;
        background: #00a4ef24 !important;
        border: 0;
        box-shadow: none !important;
        transform: none !important;
    }
}

.contact-map {
    overflow: hidden;
    margin-top: 28px;
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: #061424;
    box-shadow: 0 18px 54px #0004
}

.contact-map iframe {
    display: block;
    width: 100%;
    min-height: 390px;
    border: 0;
    filter: saturate(.85) contrast(1.05)
}

/* Ensure each contact item and any link inside contact-line sits on its own row */
.footer .contact-line,
.footer .contact-line a {
    display: block;
    width: 100%;
    white-space: normal;
}

.footer .contact-line a { margin-top: 6px; color: var(--muted2); }
.footer .contact-line a:hover { color: var(--text); }

[data-animate] {
    opacity: 0;
    transition: opacity .75s ease, transform .75s ease
}

[data-animate].is-visible {
    opacity: 1;
    transform: none
}

[data-animate=slide-up] {
    transform: translateY(56px)
}

[data-animate=slide-left] {
    transform: translateX(-64px)
}

[data-animate=slide-right] {
    transform: translateX(64px)
}

[data-animate=fade] {
    transform: translateY(20px)
}

[data-animate=zoom] {
    transform: scale(.88)
}

[data-animate=flip-left] {
    transform: perspective(900px) rotateY(-18deg) translateY(18px)
}

[data-animate=flip-right] {
    transform: perspective(900px) rotateY(18deg) translateY(18px)
}

/* shared cards */
.page-title {
    padding: 76px 0 52px;
    border-bottom: 1px solid var(--border);
    background: radial-gradient(circle at 20% 0, #00a4ef2e, transparent 28rem)
}

.breadcrumb {
    color: var(--muted2);
    font-weight: 750;
    margin-bottom: 14px
}

.card, .split-panel, .contact-card, .doc-item {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: 0 18px 54px #0004;
    backdrop-filter: blur(14px);
    padding: 30px
}

.card:hover {
    transform: translateY(-6px);
    border-color: #00a4ef70;
    transition: .25s
}

.icon, .doc-badge {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: #00a4ef21;
    color: var(--blue);
    font-size: 24px;
    font-weight: 900;
    margin-bottom: 22px
}

.service-link-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px
}

.service-link-card {
    display: block;
    padding: 28px;
    border-radius: var(--r);
    border: 1px solid var(--border);
    background: #111827bd;
    box-shadow: 0 18px 54px #0004;
    transition: .24s
}

.service-link-card:hover {
    transform: translateY(-6px);
    border-color: #00a4ef7a;
    box-shadow: var(--shadow)
}

.service-link-card span {
    display: inline-flex;
    color: var(--blue);
    font-weight: 900;
    margin-top: 18px
}

.doc-link-grid {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.doc-link-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px;
    align-items: stretch;
    padding: 26px;
    border-radius: var(--r);
    border: 1px solid var(--border);
    background: #111827dd;
    box-shadow: 0 20px 56px rgba(0, 0, 0, 0.2);
    color: inherit;
    transition: .24s;
    text-decoration: none;
}

.doc-link-card:hover {
    transform: translateY(-4px);
    border-color: #00a4ef7a;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.28);
}

.doc-link-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 100%;
}

.doc-link-card h3 {
    margin-bottom: 0;
}

.doc-link-card p {
    color: var(--muted);
    margin: 0;
}

.doc-link-card .btn {
    margin-top: auto;
    width: max-content;
}

.service-link-card img {
    width: 64px;
    display: block;
    margin-bottom: 18px;
}

.service-link-card .microsoft-product-logo {
    width: 64px;
    height: 64px !important;
    padding: 12px;
    border-radius: 16px;
    background: #ffffff;
    object-fit: contain;
}


.doc-list {
    display: grid;
    gap: 18px
}

.doc-item {
    display: flex;
    gap: 18px
}

.doc-badge {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    margin-bottom: 0
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px
}

.form-group {
    display: grid;
    gap: 8px
}

label {
    font-weight: 800
}

input, textarea, select {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 14px 15px;
    background: #0f172ad6;
    color: var(--text);
    font: inherit
}

textarea {
    min-height: 142px
}

.form-message {
    display: none;
    padding: 14px 16px;
    border-radius: 16px;
    font-weight: 800;
    margin-top: 12px
}

.success {
    display: block;
    color: #DCFCE7;
    background: #22c55e29;
    border: 1px solid #22c55e4d
}

.error {
    display: block;
    color: #FEE2E2;
    background: #ef444429;
    border: 1px solid #ef44444d
}

/* BC page like uploaded image */
.bc-hero {
    position: relative;
    overflow: hidden;
    padding: 88px 0 74px;
    background: radial-gradient(circle at 84% 45%, #0078d44a, transparent 30rem), linear-gradient(120deg, #000d1a 0%, #061424 55%, #000d1a 100%);
    border-bottom: 1px solid #94a3b829
}

.bc-hero:after {
    content: "";
    position: absolute;
    right: -160px;
    bottom: -120px;
    width: 620px;
    height: 360px;
    background: repeating-linear-gradient(115deg, #00a4ef36 0 2px, transparent 2px 13px);
    transform: skewY(-12deg);
    opacity: .55
}

.bc-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 60px;
    align-items: center
}

.bc-hero h1 {
    font-size: clamp(42px, 5.4vw, 68px)
}

.bc-hero .lead {
    font-size: 21px;
    font-weight: 700;
    color: #fff;
    margin: 14px 0 18px
}

.bc-actions {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 34px
}

.laptop-wrap {
    position: relative;
    min-height: 410px
}

.bc-screen-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
    margin: 0 auto;
}

.bc-dashboard {
    height: 100%;
    background: #fff;
    border-radius: 8px;
    padding: 12px;
    color: #0f172a;
    font-size: 10px
}

.dash-top {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 8px
}

.dash-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 12px
}

.dash-card {
    background: #f1f5f9;
    border-radius: 6px;
    padding: 8px
}

.dash-card strong {
    display: block;
    color: #00a4ef;
    font-size: 16px
}

.dash-area {
    display: grid;
    grid-template-columns: 1fr 120px;
    gap: 12px;
    margin-top: 12px
}

.dash-bar {
    height: 86px;
    background: linear-gradient(90deg, #14b8a6 20%, #e2e8f0 20% 35%, #14b8a6 35% 60%, #e2e8f0 60%);
    border-radius: 8px
}

.dash-ring {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    background: conic-gradient(#0ea5e9 0 35%, #94a3b8 35% 63%, #14b8a6 63% 100%);
    margin: auto
}

.laptop-base {
    height: 28px;
    width: 85%;
    margin: 0 auto;
    background: linear-gradient(180deg, #e5e7eb, #6b7280);
    border-radius: 0 0 34px 34px
}

/* Replace interactive laptop markup with a static screenshot on the Business Central page */
body[data-page="business-central"] .laptop {
    background: url("../images/BC.png") center/cover no-repeat;
    padding: 18px;
    min-height: 360px;
    border-radius: 22px 22px 12px 12px;
    box-shadow: 0 30px 80px #000c;
}

body[data-page="business-central"] .laptop-screen,
body[data-page="business-central"] .laptop-base {
    display: none;
}

.section-title {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 45px
}

.home-hero-visual {
    position: relative;
    min-height: 410px;
    display: grid;
    place-items: center
}

.home-hero-visual img {
    width: 100%;
    max-width: 650px;
    border-radius: 26px;
    box-shadow: 0 30px 80px #000b;
    border: 1px solid #94a3b84a;
    object-fit: cover
}
.home-hero-visual .laptop { display: none }
body[data-page="home"] .laptop-wrap { min-height: 410px; border-radius: 26px; background: url("../images/BC.png") center/cover no-repeat; box-shadow: 0 30px 80px #000b; border: 1px solid #94a3b84a }
body[data-page="home"] .laptop-wrap > * { display: none }

.home-services { background: linear-gradient(180deg, #061424, #000d1a) }
.home-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px }
.home-card { display: flex; flex-direction: column; min-height: 285px; padding: 28px; border: 1px solid var(--border); border-radius: var(--r); background: linear-gradient(145deg, #111f33, #0b1422); transition: .25s }
.home-card:hover { transform: translateY(-7px); border-color: #00a4ef80; box-shadow: var(--shadow) }
.home-card-number { color: var(--blue); font-weight: 900; font-size: 14px; margin-bottom: 34px }
.home-card h3 { font-size: 25px }
.home-card p { font-size: 16px }
.home-card-link { margin-top: auto; padding-top: 20px; color: #8AE8FF; font-weight: 800 }
.home-approach { background: radial-gradient(circle at 90% 40%, #00a4ef18, transparent 30rem) }
.process-list { display: grid; gap: 12px }
.process-list > div { display: grid; grid-template-columns: 58px 1fr; gap: 16px; align-items: center; padding: 17px 20px; border: 1px solid var(--border); border-radius: 18px; background: #ffffff08 }
.process-list strong { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: #00a4ef21; color: var(--blue); font-size: 14px }
.process-list span { display: grid; color: var(--muted); font-size: 15px }
.process-list b { color: var(--text); font-size: 17px }
.home-hr { background: #061424 }
.home-hr-image img { width: 100%; border-radius: var(--r); border: 1px solid var(--border); object-fit: cover }
.home-check-list { display: grid; gap: 10px; margin: 24px 0 28px; padding: 0; list-style: none }
.home-check-list li { display: flex; gap: 12px; align-items: center; font-size: 16px }
.home-check-list li:before { content: "✓"; display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: #00a4ef2e; color: #8AE8FF; font-weight: 900 }
.home-cta { padding-top: 44px }
.home-cta-inner { display: flex; justify-content: space-between; align-items: center; gap: 28px; padding: 34px 38px; border: 1px solid #00a4ef47; border-radius: var(--r); background: linear-gradient(115deg, #00a4ef1c, #ffffff08) }
.home-cta-inner h2 { margin-bottom: 8px }
.home-cta-inner p { font-size: 16px }

.hrproxr-hero {
    position: relative;
    overflow: hidden;
    padding: 88px 0 74px;
    background: radial-gradient(circle at 84% 45%, #00a4ef36, transparent 30rem), linear-gradient(120deg, #000d1a, #071a2c 55%, #000d1a);
    border-bottom: 1px solid #94a3b829
}

.hrproxr-hero-grid { display: grid; grid-template-columns: 1fr .8fr; gap: 60px; align-items: center }
.hrproxr-brand-visual { min-height: 300px; display: grid; place-items: center; align-content: center; gap: 14px; padding: 42px; border: 1px solid #00a4ef47; border-radius: 28px; background: #ffffff09; box-shadow: 0 28px 70px #0007 }
.hrproxr-brand-visual img { width: min(190px, 70%); max-height: 72px; object-fit: contain; filter: brightness(0) invert(1) }
.hrproxr-brand-visual strong { font-size: clamp(30px, 4vw, 50px); letter-spacing: .02em }
.hrproxr-brand-visual span { color: #8AE8FF; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 12px }
.hrproxr-module-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px }
.hrproxr-module-grid > div { display: grid; gap: 8px; min-height: 145px; padding: 22px; border: 1px solid var(--border); border-radius: 18px; background: linear-gradient(145deg, #111f33, #0b1422) }
.hrproxr-module-grid b { color: var(--text); font-size: 18px }
.hrproxr-module-grid span { color: var(--muted); font-size: 15px }

.bc-brand-logo { width: 94px !important; height: auto !important; margin: 0 0 18px; object-fit: contain !important }
.info-only-list { width: min(100%, 760px); margin: 22px auto 0; padding-left: 22px; text-align: left }
.info-only-list li { margin: 8px 0; padding-left: 6px }
body[data-page="licensing"] .section-title > ul { width: min(100%, 760px); margin: 22px auto 0; padding-left: 28px; text-align: left }
body[data-page="licensing"] .section-title > ul li { margin: 8px 0; padding-left: 6px }

.bc-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px
}

.bc-card {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 18px;
    align-items: center;
    background: linear-gradient(135deg, #111827cc, #0b1628cc);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 28px;
    min-height: 150px;
    transition: .25s
}

.bc-card:hover {
    transform: translateY(-6px);
    border-color: #00a4ef74;
    box-shadow: var(--shadow)
}

.bc-icon {
    width: 54px;
    height: 54px;
    border: 2px solid #1687ff;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #1687ff;
    font-size: 23px
}

.bc-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 55px;
    align-items: center
}

.device-stack {
    position: relative;
    min-height: 330px
}

.tablet {
    height: 280px;
    background: #e2e8f0;
    border: 12px solid #111827;
    border-radius: 18px;
    box-shadow: 0 28px 70px #0009;
    padding: 14px;
}

.mini-dash {
    display: none;
}

.check-list {
    display: grid;
    gap: 15px;
    margin-top: 25px
}

.check-list li {
    list-style: none;
    display: flex;
    gap: 12px
}

.check-list li:before {
    content: ;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue), var(--blue2));
    display: grid;
    place-items: center;
    color: white;
    font-weight: 900;
    flex: 0 0 24px
}

.module-grid, .integration-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 14px
}

.module, .integration {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #11182799;
    padding: 22px 12px;
    text-align: center;
    transition: .2s
}

.module:hover, .integration:hover {
    transform: translateY(-4px);
    border-color: #00a4ef74
}

.module span, .integration span {
    display: block;
    font-size: 32px;
    color: var(--blue);
    margin-bottom: 10px
}

.timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
    margin-top: 45px
}

.timeline:before {
    content: "";
    position: absolute;
    left: 6%;
    right: 6%;
    top: 23px;
    height: 3px;
    background: linear-gradient(90deg, var(--blue), var(--blue2));
    opacity: .8
}

.step {
    text-align: center;
    position: relative
}

.step-num {
    position: relative;
    z-index: 1;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue), var(--blue2));
    display: grid;
    place-items: center;
    margin: 0 auto 18px;
    font-weight: 900
}

.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    text-align: center
}

.stat {
    border-right: 1px solid var(--border);
    padding: 18px
}

.stat:last-child {
    border-right: 0
}

.stat strong {
    font-size: 52px;
    color: #268cff;
    display: block;
    line-height: 1
}

.faq {
    display: grid;
    gap: 10px
}

.faq-item {
    border: 1px solid var(--border);
    background: #081320cc;
    border-radius: 8px;
    overflow: hidden
}

.faq-button {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent;
    color: var(--text);
    border: 0;
    text-align: left;
    font: inherit;
    font-weight: 800;
    padding: 18px 22px;
    cursor: pointer
}

.faq-answer {
    display: none;
    padding: 0 22px 18px;
    color: var(--muted)
}

.faq-item.open .faq-answer {
    display: block
}

.cta-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    background: linear-gradient(135deg, #0f172acc, #111827);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 28px
}

.cta-icon {
    width: 75px;
    height: 41px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 34px;
    color: white;
    flex: 0 0 70px
}

/* Mobile menu visibility fix for Services, Business Central and Cloud */
@media(max-width:760px) {
    .menu-button {
        display: block
    }

    .brand-logo {
        height: 38px !important
    }

    .brand-name {
        display: none
    }

    .nav-links {
        position: absolute;
        left: 16px;
        right: 16px;
        top: 88px;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
       /* border-radius: 22px;*/
        padding: 12px;
        background: #020b16f7;
        /*border: 1px solid #00a4ef36;
        box-shadow: 0 28px 80px #000c*/
    }

    .nav-links.open {
        display: flex
    }

    .nav-links>a, .nav-dropdown-trigger {
        width: 100%;
        min-height: 46px;
        justify-content: space-between;
        padding: 13px 14px;
        border-radius: 14px;
        font-size: 15px;
        color: #fff;
        background: #0f172a;
        border: 1px solid #1e3a5f
    }

    .nav-links>a.active, .nav-links>a:hover, .nav-dropdown-trigger.active, .nav-dropdown-trigger:hover {
        background: #02325a;
        color: #fff;
        border-color: #00a4ef80
    }

    .nav-dropdown {
        display: block;
        width: 100%
    }

    .dropdown-arrow {
        transform: rotate(180deg);
        background: #00a4ef42;
        color: #fff
    }

    .mega-menu {
        position: static !important;
        width: 100% !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
        filter: none !important;
        box-shadow: none !important;
        border: 0 !important;
        background: #071426 !important;
        padding: 10px !important;
        margin-top: 8px !important;
        border-radius: 18px !important
    }

    .mega-inner {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important
    }

    .mega-link {
        opacity: 1 !important;
        transform: none !important;
        display: flex !important;
        align-items: flex-start !important;
        gap: 12px !important;
        min-height: auto !important;
        padding: 14px !important;
        border-radius: 14px !important;
        background: #111827 !important;
        border: 1px solid #00a4ef30 !important;
        color: #fff !important
    }

    .mega-link.active, .mega-link:hover {
        background: #082544 !important;
        border-color: #00a4ef90 !important
    }

    .mega-icon {
        width: 42px !important;
        height: 42px !important;
        border-radius: 12px !important;
        flex: 0 0 42px !important;
        font-size: 13px !important
    }

    .mega-kicker {
        display: none !important
    }

    .mega-title {
        display: block !important;
        font-size: 16px !important;
        line-height: 1.35 !important;
        color: #fff !important;
        font-weight: 900 !important
    }

    .mega-text {
        display: block !important;
        font-size: 13px !important;
        line-height: 1.45 !important;
        color: #cbd5e1 !important;
        margin-top: 4px !important
    }

    .mega-cta {
        display: none !important
    }

    .section {
        padding: 72px 0
    }

    .bc-hero-grid, .bc-split, .two, .three {
        grid-template-columns: 1fr
    }

    .home-card-grid { grid-template-columns: 1fr }
    .hrproxr-hero-grid, .hrproxr-module-grid { grid-template-columns: 1fr }
    .home-hero-visual { min-height: auto; margin-top: 12px }
    .home-cta-inner { align-items: stretch; flex-direction: column; padding: 28px }

    .bc-actions, .hero-actions, .cta-band {
        flex-direction: column;
        align-items: stretch
    }

    .btn {
        width: 100%
    }

    .bc-card-grid, .module-grid, .integration-grid, .timeline, .stats, .form-grid, .service-link-grid {
        grid-template-columns: 1fr
    }

    .timeline:before {
        display: none
    }

    .stat {
        border-right: 0;
        border-bottom: 1px solid var(--border)
    }

    .laptop-screen {
        height: 260px
    }

    .laptop-wrap {
        min-height: auto
    }

    .dash-area {
        grid-template-columns: 1fr
    }

    .phone {
        display: none
    }

    .footer-inner {
        grid-template-columns: 1fr
    }

    .footer-links { justify-items: start }

    .contact-map iframe { min-height: 300px }
}


/* =========================================================
   V8 CORRECTION ONLY: responsive images + click menu opening
   ========================================================= */

/* 1) Global responsive media */
img,
picture,
video,
svg {
    max-width: 100%;
    height: auto;
    display: block;
}

body {
    overflow-x: hidden;
}

.about-photo img,
.hero-image img,
.hero-visual img,
.image-card img,
.section img,
.card img,
.service-card img,
.service-link-card img,
.contact-card img,
.laptop-wrap img,
.device-stack img,
.tablet img,
.phone img {
    max-width: 100%;
    height: auto !important;
    object-fit: contain;
}

.about-photo {
    border-radius: 18px;
    border: 1px;
}

/* 2) Make Usluge behave like a button, not a navigation link */
.nav-dropdown-trigger {
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    cursor: pointer;
}

/* 3) Disable hover/focus auto-open. Menu opens only when JS adds .is-open */
.nav-dropdown:not(.is-open):hover .mega-menu,
.nav-dropdown:not(.is-open):focus-within .mega-menu {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(-50%) translateY(18px) scale(.975) !important;
    filter: blur(6px) !important;
}

.nav-dropdown:not(.is-open):hover .mega-link,
.nav-dropdown:not(.is-open):hover .mega-cta,
.nav-dropdown:not(.is-open):focus-within .mega-link,
.nav-dropdown:not(.is-open):focus-within .mega-cta {
    opacity: 0 !important;
    transform: translateY(14px) !important;
}

/* 4) Desktop/tablet click-open animation */
.nav-dropdown.is-open .mega-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0) scale(1) !important;
    filter: blur(0) !important;
}

.nav-dropdown.is-open .mega-link,
.nav-dropdown.is-open .mega-cta {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.nav-dropdown .dropdown-arrow {
    transition: transform .32s ease, background .25s ease !important;
}

.nav-dropdown.is-open .dropdown-arrow {
    transform: rotate(180deg) !important;
}

.nav-dropdown:not(.is-open) .dropdown-arrow {
    transform: rotate(0deg) !important;
}

/* 5) Mobile: menu is closed by default and opens with smooth slide/fade */
@media (max-width: 760px) {

    html, body { width: 100%; max-width: 100%; overflow-x: hidden }
    main, main > section { max-width: 100%; overflow-x: clip }
    [data-animate] { opacity: 1 !important; transform: none !important; transition: none !important }
    .container { width: min(100% - 24px, var(--w)) }
    .section { padding: 56px 0 }
    .page-title { padding: 54px 0 38px }
    h1 { font-size: clamp(34px, 10vw, 52px); overflow-wrap: anywhere }
    h2 { font-size: clamp(28px, 8vw, 42px); overflow-wrap: anywhere }
    h3, p, li { overflow-wrap: anywhere }
    .grid, .two, .three, .bc-split, .bc-hero-grid, .hrproxr-hero-grid { min-width: 0 }
    .split-panel, .contact-card, .card, .service-link-card, .bc-card, .doc-item, .doc-link-card { min-width: 0; width: 100% }
    .form-grid { grid-template-columns: minmax(0, 1fr) }
    input, textarea, select, button { max-width: 100% }
    .bc-card-grid, .service-link-grid, .doc-link-grid, .home-card-grid, .hrproxr-module-grid { min-width: 0 }
    .module-grid, .integration-grid, .stats { grid-template-columns: repeat(2, minmax(0, 1fr)) }
    .timeline { grid-template-columns: 1fr 1fr; min-width: 0 }
    .timeline:before { display: none }
    .stat { min-width: 0; border-right: 0; border-bottom: 1px solid var(--border) }
    .stat strong { font-size: 38px }
    .cta-band, .home-cta-inner { width: 100%; min-width: 0; padding: 24px; align-items: stretch; flex-direction: column }
    .cta-band .btn, .home-cta-inner .btn { width: 100% }
    .footer-inner { gap: 32px; min-width: 0 }
    .footer-inner > div { min-width: 0 }
    .footer-links { width: 100%; overflow-wrap: anywhere }
    .footer-menu-heading { margin-top: 10px }
    .contact-map iframe { min-height: 280px }
    .hrproxr-brand-visual { min-height: 240px; padding: 28px 18px }
    .hrproxr-brand-visual strong { font-size: 34px }
    .bc-brand-logo { width: 76px !important; max-width: 76px !important }
    .footer { padding: 30px 0 }
    .footer-inner { gap: 22px }
    .footer-inner > div { padding-bottom: 2px }
    .footer-inner > div:first-child p { margin: 4px 0 0; font-size: 13px }
    .footer-inner > div:first-child .contact-line { margin-top: 4px; font-size: 13px; line-height: 1.4 }
    .footer-inner > div:last-child > p { margin-bottom: 3px }
    .footer-inner > div:last-child .contact-line { margin-top: 3px; font-size: 13px; line-height: 1.35 }
    .footer-socials { margin-top: 10px; gap: 8px }
    .footer-socials a { width: 32px; height: 32px }
    .back-to-top { display: none }

    img,
    .about-photo img,
    .hero-image img,
    .hero-visual img,
    .image-card img,
    .section img,
    .bc-hero img,
    .card img,
    .service-link-card img,
    .contact-card img {
        width: 100%;
        max-width: 100%;
        height: auto !important;
        object-fit: contain !important;
    }

    .laptop,
    .laptop-wrap,
    .device-stack,
    .tablet,
    .phone {
        max-width: 100% !important;
    }

    .laptop {
        width: 100% !important;
        transform: none !important;
        padding: 12px !important;
    }

    .laptop-screen {
        width: 100% !important;
        height: auto !important;
        min-height: 230px;
    }

    .tablet {
        width: 100% !important;
        height: auto !important;
        min-height: 220px;
    }

    .phone {
        display: none !important;
    }

    .nav-dropdown .mega-menu,
    .nav-dropdown:not(.is-open):hover .mega-menu,
    .nav-dropdown:not(.is-open):focus-within .mega-menu {
        position: static !important;
        width: 100% !important;
        display: block !important;
        max-height: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        overflow: hidden !important;
        pointer-events: none !important;
        transform: translateY(-10px) !important;
        filter: none !important;
        box-shadow: none !important;
        border: 0 !important;
        background: #071426 !important;
        padding: 0 !important;
        margin-top: 0 !important;
        border-radius: 18px !important;
        transition:
            max-height .38s ease,
            opacity .28s ease,
            transform .28s ease,
            padding .28s ease,
            margin .28s ease,
            visibility .28s ease !important;
    }

    .nav-dropdown.is-open .mega-menu {
        max-height: 520px !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
        padding: 10px !important;
        margin-top: 8px !important;
    }

    .nav-dropdown .mega-inner {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .nav-dropdown .mega-link,
    .nav-dropdown:not(.is-open):hover .mega-link,
    .nav-dropdown:not(.is-open):focus-within .mega-link {
        opacity: 0 !important;
        transform: translateY(-8px) !important;
        display: flex !important;
        align-items: flex-start !important;
        gap: 12px !important;
        min-height: auto !important;
        padding: 14px !important;
        border-radius: 14px !important;
        background: #111827 !important;
        border: 1px solid #00a4ef30 !important;
        color: #fff !important;
        transition:
            opacity .28s ease,
            transform .28s ease,
            background .22s ease,
            border-color .22s ease !important;
    }

    /* Overrides: align lang-picker with main nav sizing and active-text behavior */
    .lang-picker {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 10px;
        border: 1px solid #94a3b824;
        background: #ffffff09;
        border-radius: 999px;
        font-size: 13px;
        white-space: nowrap
    }

    .lang-picker span {
        color: var(--muted2);
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        margin-right: 6px
    }

    .lang-picker a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 34px;
        padding: 0 14px;
        border-radius: 999px;
        color: var(--muted);
        font-size: 13px;
        font-weight: 750;
        background: transparent;
        transition: .22s
    }

    .lang-picker a:hover {
        background: #00a4ef24;
        color: var(--text)
    }

    .lang-picker a.active {
        color: var(--text);
        background: transparent
    }

    .lang-picker a.active:hover {
        background: #00a4ef24
    }

    @media (max-width:760px) {
        .lang-picker {
            padding: 4px 8px;
            font-size: 12px
        }

        .lang-picker span {
            display: none
        }

        .lang-picker a {
            min-height: 42px;
            padding: 0 12px;
            font-size: 15px
        }
    }

    .nav-dropdown.is-open .mega-link {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    .nav-dropdown.is-open .mega-link:nth-child(1) {
        transition-delay: .06s !important;
    }

    .nav-dropdown.is-open .mega-link:nth-child(2) {
        transition-delay: .12s !important;
    }

    .nav-dropdown .mega-cta {
        display: none !important;
    }

    .nav-dropdown:not(.is-open) .dropdown-arrow {
        transform: rotate(0deg) !important;
    }

    .nav-dropdown.is-open .dropdown-arrow {
        transform: rotate(180deg) !important;
    }
}