:root {
    --nc-primary: #0d6efd;
    --nc-primary-deep: #064da8;
    --nc-primary-dark: #073b7a;
    --nc-ink: #10233f;
    --nc-muted: #607086;
    --nc-surface: #ffffff;
    --nc-soft: #f3f7fc;
    --nc-border: #dce7f4;
    --nc-success: #20b486;
    --nc-shadow: 0 22px 60px rgba(21, 71, 132, .14);
    --nc-radius: 24px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--nc-ink);
    background:
        radial-gradient(circle at 7% 8%, rgba(13, 110, 253, .08), transparent 24rem),
        linear-gradient(180deg, #f8fbff 0%, #ffffff 42%, #f7faff 100%);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    overflow-x: hidden;
}

a { color: inherit; }
img { max-width: 100%; }

.skip-link {
    position: fixed;
    left: 1rem;
    top: -4rem;
    z-index: 9999;
    background: #fff;
    color: var(--nc-primary-dark);
    padding: .7rem 1rem;
    border-radius: 10px;
    box-shadow: var(--nc-shadow);
}
.skip-link:focus { top: 1rem; }

.nc-navbar {
    position: sticky;
    top: 0;
    z-index: 1200;
    padding: .65rem 0;
    background: linear-gradient(110deg, #0d6efd 0%, #0755bd 62%, #063f8c 100%);
    box-shadow: 0 12px 30px rgba(5, 61, 134, .18);
}
.nc-navbar .navbar-brand,
.nc-navbar .nav-link { color: #fff; }
.nc-navbar .nav-link {
    opacity: .88;
    font-weight: 600;
    border-radius: 999px;
    padding: .6rem .85rem !important;
    transition: background .2s ease, opacity .2s ease, transform .2s ease;
}
.nc-navbar .nav-link:hover,
.nc-navbar .nav-link:focus-visible {
    opacity: 1;
    background: rgba(255, 255, 255, .12);
    transform: translateY(-1px);
}
.nc-navbar .navbar-toggler { border-color: rgba(255,255,255,.35); }

.nc-brand {
    display: inline-flex;
    align-items: center;
    gap: .72rem;
    text-decoration: none;
}
.nc-brand-logo {
    width: 52px;
    height: 52px;
    object-fit: contain;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,.2));
}
.nc-brand-copy { display: flex; flex-direction: column; line-height: 1.05; }
.nc-brand-name { font-size: 1.18rem; font-weight: 800; letter-spacing: -.02em; }
.nc-brand-tag { margin-top: .22rem; font-size: .68rem; font-weight: 650; opacity: .72; letter-spacing: .05em; text-transform: uppercase; }

.nc-main { position: relative; }

.nc-hero {
    position: relative;
    padding: clamp(3.8rem, 8vw, 7.2rem) 0 clamp(5rem, 9vw, 8rem);
    overflow: visible;
}
.nc-hero::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    top: -210px;
    right: -180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(13,110,253,.17), rgba(13,110,253,0) 68%);
    pointer-events: none;
}
.nc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: 1.2rem;
    padding: .5rem .8rem;
    border: 1px solid rgba(13,110,253,.16);
    border-radius: 999px;
    background: rgba(255,255,255,.86);
    color: var(--nc-primary-deep);
    font-size: .82rem;
    font-weight: 750;
    box-shadow: 0 8px 24px rgba(13,110,253,.08);
}
.nc-eyebrow-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--nc-success);
    box-shadow: 0 0 0 5px rgba(32,180,134,.12);
}
.nc-hero h1 {
    max-width: 760px;
    margin: 0;
    font-size: clamp(2.35rem, 5.5vw, 4.7rem);
    line-height: .98;
    font-weight: 850;
    letter-spacing: -.055em;
    color: #0b2345;
}
.nc-hero h1 .accent {
    display: block;
    color: var(--nc-primary);
}
.nc-hero-copy {
    max-width: 650px;
    margin: 1.5rem 0 0;
    font-size: clamp(1rem, 2vw, 1.2rem);
    line-height: 1.68;
    color: var(--nc-muted);
}
.nc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: 1.7rem;
}
.nc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: .74rem 1.15rem;
    border-radius: 14px;
    font-weight: 750;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.nc-btn:hover { transform: translateY(-2px); }
.nc-btn-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--nc-primary), var(--nc-primary-deep));
    box-shadow: 0 12px 28px rgba(13,110,253,.25);
}
.nc-btn-primary:hover { color: #fff; box-shadow: 0 16px 34px rgba(13,110,253,.32); }
.nc-btn-soft {
    background: #fff;
    border: 1px solid var(--nc-border);
    color: var(--nc-primary-deep);
}

.nc-visual-wrap {
    position: relative;
    min-height: 470px;
}
.nc-dashboard {
    position: relative;
    height: 100%;
    min-height: 440px;
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 32px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(236,245,255,.9)),
        #fff;
    box-shadow: var(--nc-shadow);
    overflow: hidden;
    isolation: isolate;
}
.nc-dashboard::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(13,110,253,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(13,110,253,.055) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
    z-index: -1;
}
.nc-dashboard-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.3rem 1.4rem 1rem;
    border-bottom: 1px solid rgba(13,110,253,.09);
}
.nc-dashboard-title { font-weight: 800; letter-spacing: -.02em; }
.nc-live {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .78rem;
    font-weight: 750;
    color: #13835f;
}
.nc-live i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--nc-success);
    box-shadow: 0 0 0 5px rgba(32,180,134,.13);
}
.nc-dashboard-body { padding: 1.25rem 1.4rem 1.5rem; }
.nc-status-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
}
.nc-status-card {
    min-height: 104px;
    padding: 1rem;
    border-radius: 18px;
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(13,110,253,.1);
    box-shadow: 0 9px 24px rgba(36,79,135,.07);
}
.nc-status-label { font-size: .76rem; color: var(--nc-muted); font-weight: 700; }
.nc-status-value { margin-top: .32rem; font-size: 1.35rem; font-weight: 850; letter-spacing: -.035em; }
.nc-status-meta { margin-top: .2rem; font-size: .72rem; color: #7b8ba1; }
.nc-flow {
    position: relative;
    margin-top: .85rem;
    min-height: 155px;
    border-radius: 20px;
    background: linear-gradient(135deg, #0b4ea9, #0d6efd);
    overflow: hidden;
    color: #fff;
    padding: 1rem 1.05rem;
}
.nc-flow-title { font-size: .78rem; font-weight: 700; opacity: .78; }
.nc-flow strong { display: block; margin-top: .18rem; font-size: 1.2rem; }
.nc-flow-line {
    position: absolute;
    left: -5%;
    right: -5%;
    bottom: 14px;
    height: 78px;
    opacity: .9;
}
.nc-flow-line svg { width: 100%; height: 100%; }
.nc-dashboard-watermark {
    position: absolute;
    right: 1.1rem;
    bottom: 1rem;
    width: 82px;
    height: 82px;
    object-fit: contain;
    opacity: .11;
}

.nc-poty-access {
    position: absolute;
    top: -115px;
    right: -22px;
    z-index: 12;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 18px 42px rgba(32,41,96,.24);
    display: grid;
    place-items: center;
    transition: transform .2s ease, box-shadow .2s ease;
}
.nc-poty-access:hover,
.nc-poty-access:focus-visible {
    transform: translateY(-4px) scale(1.025);
    box-shadow: 0 24px 48px rgba(32,41,96,.31);
}
.nc-poty-access img {
    width: 112px;
    height: 112px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
}

.nc-qr-zone {
    position: relative;
    z-index: 20;
    margin-top: -58px;
    margin-bottom: 2.5rem;
}
.nc-qr-card {
    width: min(100%, 285px);
    margin-left: clamp(0rem, 4vw, 3.5rem);
    padding: 1rem;
    border: 1px solid rgba(13,110,253,.12);
    border-radius: 22px;
    background: rgba(255,255,255,.97);
    box-shadow: 0 18px 42px rgba(24,70,128,.16);
    transform: rotate(-2.4deg);
    transform-origin: center;
    transition: transform .2s ease;
}
.nc-qr-card:hover { transform: rotate(-.7deg) translateY(-3px); }
.nc-qr-row { display: flex; gap: .9rem; align-items: center; }
.nc-qr-box { width: 92px; height: 92px; flex: 0 0 92px; }
.nc-qr-box img, .nc-qr-box canvas { width: 92px !important; height: 92px !important; }
.nc-qr-title { margin: 0 0 .25rem; font-size: .98rem; font-weight: 850; color: var(--nc-ink); }
.nc-qr-text { margin: 0 0 .55rem; font-size: .77rem; line-height: 1.35; color: var(--nc-muted); }
.nc-qr-link { font-size: .78rem; font-weight: 800; color: var(--nc-primary-deep); text-decoration: none; }

.nc-instagram {
    position: fixed;
    top: 35vh;
    right: 14px;
    z-index: 1300;
    width: 96px;
    height: 144px;
    padding: 0;
    border-radius: 20px;
    border: 2px solid rgba(255,255,255,.96);
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(44,42,93,.25);
    background: #fff;
    cursor: pointer;
    animation: ncFloat 4s ease-in-out infinite;
    transition: transform .18s ease, box-shadow .18s ease;
}
.nc-instagram:hover {
    transform: scale(1.04);
    box-shadow: 0 16px 38px rgba(44,42,93,.30);
}
.nc-instagram img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transform: none;
}
@keyframes ncFloat {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -10px; }
}

.nc-cta {
    margin: 2.2rem 0 4.2rem;
    border-radius: var(--nc-radius);
    padding: clamp(1.8rem, 4vw, 3rem);
    color: #fff;
    background:
        radial-gradient(circle at 80% 10%, rgba(255,255,255,.14), transparent 16rem),
        linear-gradient(115deg, #09295a, #074ea7 58%, #0d6efd 100%);
    box-shadow: var(--nc-shadow);
}
.nc-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; }
.nc-cta h2 { margin: 0; font-size: clamp(1.55rem, 3.5vw, 2.35rem); font-weight: 850; letter-spacing: -.035em; }
.nc-cta p { margin: .55rem 0 0; color: rgba(255,255,255,.74); }
.nc-cta .nc-btn-soft { border-color: rgba(255,255,255,.4); }

.nc-services { padding: .4rem 0 4.5rem; }
.nc-section-head { max-width: 700px; margin-bottom: 1.8rem; }
.nc-section-kicker { font-size: .75rem; font-weight: 850; color: var(--nc-primary); text-transform: uppercase; letter-spacing: .12em; }
.nc-section-head h2 { margin: .35rem 0 .55rem; font-size: clamp(1.75rem, 4vw, 2.7rem); font-weight: 850; letter-spacing: -.04em; }
.nc-section-head p { margin: 0; color: var(--nc-muted); }
.nc-service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.15rem; }
.nc-service-card {
    position: relative;
    min-height: 360px;
    padding: 1.35rem 1.35rem 1.1rem;
    border: 1px solid var(--nc-border);
    border-radius: 24px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 14px 38px rgba(38,77,127,.09);
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.nc-service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 44px rgba(38,77,127,.14);
    border-color: rgba(13,110,253,.24);
}
.nc-service-index { font-size: .72rem; font-weight: 850; color: rgba(13,110,253,.55); letter-spacing: .12em; }
.nc-service-card h3 { margin: .65rem 0 .7rem; font-size: 1.4rem; font-weight: 850; letter-spacing: -.03em; color: var(--nc-primary-deep); }
.nc-service-card p { color: var(--nc-muted); line-height: 1.65; }
.nc-service-media {
    position: absolute;
    left: 1.25rem;
    right: 1.25rem;
    bottom: 1rem;
    height: 120px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: linear-gradient(160deg, #eff6ff, #f8fbff);
}
.nc-service-media img { max-height: 104px; max-width: 92%; object-fit: contain; }

.nc-footer {
    padding: 2.4rem 0;
    background: #07366f;
    color: rgba(255,255,255,.82);
}
.nc-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.nc-footer strong { color: #fff; }
.nc-footer a { color: #fff; text-decoration: none; }

.modal-content { border: 0; border-radius: 20px; overflow: hidden; box-shadow: var(--nc-shadow); }
.modal-header { border-bottom: 0; }

:focus-visible {
    outline: 3px solid #ffca4b;
    outline-offset: 3px;
}

@media (max-width: 991.98px) {
    .nc-brand-tag { display: none; }
    .nc-hero { padding-top: 3rem; }
    .nc-visual-wrap { margin-top: 3.7rem; min-height: 420px; }
    .nc-poty-access { right: 12px; top: -115px; width: 106px; height: 106px; }
    .nc-poty-access img { width: 98px; height: 98px; }
    .nc-dashboard { min-height: 410px; }
    .nc-service-grid { grid-template-columns: 1fr; }
    .nc-service-card { min-height: 305px; }
    .nc-cta-inner { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 767.98px) {
    html, body {
        max-width: 100%;
        overflow-x: hidden;
    }
    .nc-brand-logo { width: 44px; height: 44px; }
    .nc-brand-name { font-size: 1.05rem; }
    .nc-hero { padding-bottom: 6.2rem; }
    .nc-dashboard-body { padding: 1rem; }
    .nc-dashboard-top { padding: 1rem; }
    .nc-status-card { padding: .85rem; min-height: 96px; }
    .nc-status-value { font-size: 1.12rem; }
    .nc-qr-zone { margin-top: -48px; }
    .nc-qr-card { margin-left: 0; }
    .nc-instagram { width: 76px; height: 114px; right: max(9px, env(safe-area-inset-right)); left: auto; top: auto; bottom: 16px; border-radius: 16px; }
    .nc-footer-inner { flex-direction: column; text-align: center; }
}

@media (max-width: 420px) {
    .nc-status-grid { gap: .55rem; }
    .nc-status-label { font-size: .68rem; }
    .nc-status-meta { font-size: .65rem; }
    .nc-visual-wrap { min-height: 400px; }
    .nc-dashboard { min-height: 385px; }
    .nc-poty-access { width: 94px; height: 94px; right: 8px; }
    .nc-poty-access img { width: 87px; height: 87px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}