/* Nanobyte brand overrides — align new.nanobyte.host layout + palette with nanobyte.host */
:root {
    --sidepar-width: 96px;
    --sidepar-bg-color: linear-gradient(180deg, #0c1b4d 0%, #05102e 100%);
    --nb-accent: #1a3cd6;
    --nb-accent-soft: #e7ecff;
    --nb-navy: #0c1b4d;
    --nb-yellow: #ffc43a;
    --nb-ink: #1a2236;
    --nb-muted: #6b7385;
    --nb-bg: #f6f8fc;
    --top-nav-link-spacing: 16px;
}
body { background: var(--nb-bg); color: var(--nb-ink); }
.app-main { margin-right: var(--sidepar-width) !important; }

/* Right vertical icon sidebar — pinned consistently */
.app-nav {
    position: fixed !important;
    top: 0 !important; right: 0 !important; bottom: 0 !important; left: auto !important;
    width: var(--sidepar-width) !important;
    height: 100vh !important;
    overflow-y: auto;
    background: var(--sidepar-bg-color) !important;
    z-index: 1040;
    display: flex !important; flex-direction: column !important; align-items: stretch !important;
    padding-top: 16px;
}
.app-nav a { color: #cbd3ec !important; transition: background .15s, color .15s; text-decoration: none; }
.app-nav a:hover { color: #fff !important; }
.app-nav .nav-link { padding: .6rem .25rem; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; }
.app-nav .item-text { font-size: .72rem; line-height: 1.25; display: block; margin-top: .35rem; color: inherit; text-align: center; }
/* Brand logo — larger to match nanobyte.host */
.app-nav > a:first-child { width: 64px; height: 64px; margin: 0 auto 24px; padding: 4px !important; display: grid !important; place-items: center; flex: 0 0 auto; }
.app-nav > a:first-child svg { width: 56px !important; height: 56px !important; display: block; }
/* Category icons — larger + crisp white on dark bg */
.app-nav .nav-link svg, .app-nav .menu-item-content svg { width: 44px !important; height: 44px !important; max-width: 44px; }
.app-nav .nav-link .svg-icon-prime   { fill: rgba(255,255,255,0.9) !important; stroke: rgba(255,255,255,0.9) !important; }
.app-nav .nav-link .svg-icon-prime-l { fill: rgba(255,255,255,0.45) !important; stroke: rgba(255,255,255,0.45) !important; }
.app-nav .nav-link .svg-icon-outline-s { fill: none !important; stroke: rgba(255,255,255,0.55) !important; stroke-width: 1.3 !important; }
.app-nav .nav-link:hover .svg-icon-prime   { fill: #fff !important; stroke: #fff !important; }
.app-nav .nav-link:hover .svg-icon-prime-l { fill: rgba(255,255,255,0.7) !important; stroke: rgba(255,255,255,0.7) !important; }
.app-nav svg path, .app-nav svg polygon { transition: fill .15s; }
.app-nav .item-text { font-size: .78rem !important; font-weight: 500; margin-top: .5rem; }
body { padding-right: 0 !important; }
.app-main { margin-right: var(--sidepar-width) !important; margin-left: 0 !important; }

/* Fetched Lagom hero embed wrapper */
.nb-hero-embed { position: relative; overflow: hidden; }
.nb-hero-embed .site-banner { position: relative; margin: 0; max-width: none; width: 100%; }
.nb-hero-embed .container { max-width: 1280px; padding-inline: 2rem; }
.nb-hero-embed .banner-body { padding: 4rem 0 5rem; }
.nb-hero-embed .banner-content { text-align: center; position: relative; z-index: 2; }
.nb-hero-embed .banner-caption { color: #8ab0ff; font-size: 1rem; font-weight: 600; display: inline-block; margin-bottom: .75rem; }
.nb-hero-embed .banner-title { color: #fff; font-weight: 700; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.3; margin: 0; }
.nb-hero-embed .banner-subtitle { color: rgba(255,255,255,.82); font-weight: 300; max-width: 560px; margin: 1.25rem auto 0; font-size: 1.1rem; }
.nb-hero-embed .banner-graphic-background { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.nb-hero-embed .graphic-background { position: absolute; inset: 0; width: 100%; height: 100%; }
.nb-hero-embed .graphic-background svg { width: 100%; height: 100%; display: block; }
/* Make sure Lagom's default full-screen anchoring doesn't break layout */
body .nb-hero-embed .site-banner { left: auto !important; right: auto !important; position: relative !important; }

/* Hero — deep gradient with right-side illustration, like nanobyte.host */
.nb-hero-new { background: linear-gradient(180deg, #0c1b4d 0%, #14287a 60%, #1a3cd6 100%) !important; padding: 4rem 0 5rem !important; position: relative; overflow: hidden; min-height: 540px; }
.nb-hero-new::before { content:''; position:absolute; inset:0; background: radial-gradient(ellipse at 30% 0%, rgba(255,255,255,.1), transparent 60%); pointer-events:none; }
.nb-hero-new .nb-hero-row { position: relative; z-index: 2; display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.nb-hero-new .nb-hero-text { flex: 1 1 420px; text-align: center; padding: 2rem 0; }
.nb-hero-new .nb-hero-illust { flex: 1 1 500px; max-width: 680px; margin: 0 auto; }
.nb-hero-new .nb-hero-illust svg { width: 100%; height: auto; display: block; }
.nb-hero-new .nb-hero-eyebrow { color: #8ab0ff; font-size: 1rem; font-weight: 600; letter-spacing: .02em; margin-bottom: .75rem; display: inline-block; }
.nb-hero-new .nb-hero-title { font-weight: 700; letter-spacing: -0.02em; color: #fff; line-height: 1.3; font-size: clamp(2rem, 4vw, 3rem); margin: 0; }
.nb-hero-new .nb-hero-sub { color: rgba(255,255,255,.82); font-weight: 300; max-width: 560px; margin: 1.25rem auto 0; font-size: 1.1rem; line-height: 1.7; }
/* Floating animation for hero illust */
@keyframes nbFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.nb-hero-new .nb-hero-illust { animation: nbFloat 6s ease-in-out infinite; }
.nb-hero-new .nb-hero-illust svg path { transition: opacity .3s; }
/* Lagom illustration palette reused for hero */
.nb-hero-new { --svg-illustration-primary-1: #ffb900; --svg-illustration-primary-2: #ffc83d; --svg-illustration-gray-w: #ffffff; --svg-illustration-gray-1: rgba(255,255,255,.06); --svg-illustration-gray-2: rgba(255,255,255,.12); --svg-illustration-gray-3: rgba(255,255,255,.18); --svg-illustration-gray-4: rgba(255,255,255,.24); --svg-illustration-gray-5: rgba(255,255,255,.32); --svg-illustration-gray-6: rgba(255,255,255,.44); --svg-illustration-gray-7: rgba(255,255,255,.6); --svg-illustration-gray-8: rgba(255,255,255,.8); }

/* External map */
.nb-external-map { margin: 4rem 0 0; padding: 2rem 0; }
.nb-external-map .container { max-width: 1280px; }
.nb-external-map .section-title { text-align: center; color: var(--nb-navy); font-weight: 700; letter-spacing: -0.02em; margin-bottom: .5rem; font-size: 2rem; }
.nb-external-map .section-subtitle { text-align: center; color: var(--nb-muted); margin-bottom: 2rem; }
.nb-external-map .location-map { max-width: 1240px; margin: 0 auto; position: relative; }
.nb-external-map .svg-map { width: 100%; height: auto; display: block; }
.nb-external-map .svg-map path { fill: #dde3ef !important; }
.nb-external-map .svg-map circle,
.nb-external-map .svg-map ellipse { fill: var(--nb-accent) !important; }
.nb-external-map .svg-location-point { cursor: pointer; }
.nb-external-map .svg-location-point circle { fill: var(--nb-accent) !important; filter: drop-shadow(0 0 6px rgba(26,60,214,.4)); }
.nb-external-map .location-point { cursor: pointer; transition: transform .2s; }
.nb-external-map .location-point:hover { transform: scale(1.15); }
.nb-external-map .popover { font-family: 'Cairo', sans-serif !important; }

/* Testimonial avatar fallback */
.nb-avatar-initial { width: 44px; height: 44px; border-radius: 50%; background: var(--nb-accent-soft); color: var(--nb-accent); display: grid; place-items: center; font-weight: 700; font-size: 1.1rem; flex-shrink: 0; }

/* Top nav — match Lagom 13px style */
.main-top { background: #fff; border-bottom: 1px solid rgba(12,27,77,0.06); padding: 0; }
.main-top .container { max-width: 1280px; }
ul.top-nav { padding: .85rem 0 !important; margin: 0; list-style: none; display: flex; gap: 1.75rem; align-items: center; justify-content: flex-start; font-size: 13px; font-family: 'Cairo', sans-serif; }
ul.top-nav > li { margin: 0 !important; position: relative; }
ul.top-nav > li > a { color: #4a5065 !important; text-decoration: none !important; font-size: 13px !important; font-weight: 500; display: inline-flex; align-items: center; gap: .5rem; padding: 0 !important; cursor: pointer; }
ul.top-nav > li > a:hover { color: var(--nb-accent) !important; }
ul.top-nav > li > a > i { width: 14px; font-size: 14px; color: #8b92a8; }
ul.top-nav > li > a .item-text { font-size: 13px; }
ul.top-nav .dropdown-menu { font-size: 13px; min-width: 180px; }
ul.top-nav .ls-caret { width: 0; height: 0; border-inline-start: 4px solid transparent; border-inline-end: 4px solid transparent; border-top: 4px solid currentColor; display: inline-block; margin-inline-start: 4px; }

/* Hero */
.site-banner { background: linear-gradient(135deg, var(--nb-navy) 0%, #14287a 100%) !important; color: #fff; position: relative; overflow: hidden; padding: 4rem 0 6rem; }
.site-banner::before { content:''; position:absolute; inset:0; background: radial-gradient(ellipse at 30% 0%, rgba(255,255,255,0.08), transparent 60%); pointer-events:none; }
.site-banner .main-panner { margin: 6% 0 !important; text-shadow: none !important; position: relative; }
.site-banner .main-panner p.fs-1 { font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.site-banner .main-panner p.fs-5 { color: rgba(255,255,255,.75); font-weight: 300; }

/* Composite package illustration (3 stacked triptych slices) */
.nb-package-illust {
    position: relative;
    width: 100%;
    aspect-ratio: 596 / 514;
    max-width: 320px;
    margin: 0 auto 1rem;
    overflow: visible;
}
.nb-package-illust svg { display:block !important; width:100% !important; height:100% !important; position:absolute !important; inset:0 !important; top:0 !important; left:0 !important; }
:root {
    --svg-illustration-gray-w:  #ffffff;
    --svg-illustration-gray-1:  #f4f6fb;
    --svg-illustration-gray-2:  #e5e9f2;
    --svg-illustration-gray-3:  #cbd3e3;
    --svg-illustration-gray-4:  #a9b2c7;
    --svg-illustration-gray-5:  #8792ad;
    --svg-illustration-gray-6:  #5d6887;
    --svg-illustration-gray-7:  #414a66;
    --svg-illustration-gray-8:  #2a3148;
    --svg-illustration-primary-1: #1a3cd6;
    --svg-illustration-primary-2: #0c1b4d;
    --svg-illustration-yellow-1: #ffd770;
    --svg-illustration-yellow-2: #ffc43a;
    --svg-illustration-yellow-3: #e6a900;
}

/* Product cards */
.main-prodact-cards { margin-top: -80px; position: relative; z-index: 2; }
.main-prodact-cards .container { max-width: 1280px; }
.main-prodact-cards .card.main-card {
    border-radius: 16px;
    transition: transform .2s ease, box-shadow .2s ease;
    min-height: 360px;
    background: #fff;
    overflow: hidden;
}
.main-prodact-cards .card.main-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px -10px rgba(12,27,77,.25) !important; }
.main-prodact-cards .card.main-card .card-body { padding: 2rem 1.25rem 1.5rem; }
.main-prodact-cards .card.main-card img,
.main-prodact-cards .card.main-card svg { max-width: 160px; max-height: 160px; width: auto; height: auto; display: block; margin: 0 auto 1rem; }
.main-prodact-cards .card.main-card p.fs-4 { color: var(--nb-navy); font-weight: 700; font-size: 1.1rem !important; margin-top: .5rem; }
.main-prodact-cards .card.main-card p.fs-6 { color: var(--nb-muted); font-size: .85rem !important; line-height: 1.65; }
.main-prodact-cards a.col-md-3, .main-prodact-cards .col-md-3 > a { text-decoration: none; }

/* Section headings */
section > .container > .row > .col-12 > p.fs-1 { color: var(--nb-navy); font-weight: 700; letter-spacing: -0.02em; }
section > .container > .row > .col-12 > p.fs-4.fw-lighter,
section > .container > .row > .col-12 > p.fs-5.fw-lighter { color: var(--nb-muted); }

/* World map section */
.locations-map svg { max-width: 100%; height: auto; }
.locations-map .svg-location-point circle { fill: var(--nb-accent); }

/* Why us section (2nd site-banner) */
section.site-banner .feature-icon { width:70px; height:70px; margin: 0 auto; }
section.site-banner .feature-icon svg { width:100%; height:100%; }
section.site-banner .feature-icon svg path, section.site-banner .feature-icon svg polygon { fill: var(--nb-yellow); }

/* Feature cards (last section) */
section.mt-5.text-center .card.rounded-3 { border-radius: 16px !important; transition: transform .2s ease, box-shadow .2s ease; }
section.mt-5.text-center .card.rounded-3:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(12,27,77,.12) !important; }
section.mt-5.text-center .card.rounded-3 img { max-width: 140px; height: auto; }
section.mt-5.text-center .card.rounded-3 p.fs-5 { color: var(--nb-navy); font-weight: 700; }
section.mt-5.text-center .card.rounded-3 p.fs-6 { color: var(--nb-muted); }

/* Footer */
.footer { background: #fff; }
.footer img { max-width: 140px; }
.footer p.fs-4 { color: var(--nb-navy); font-weight: 700; font-size: 1.05rem !important; }
.footer .footer-list a { color: var(--nb-muted); font-size: .9rem; transition: color .15s; }
.footer .footer-list a:hover { color: var(--nb-accent); }

/* Buttons */
.btn-primary { background: var(--nb-accent) !important; border-color: var(--nb-accent) !important; color: #fff !important; font-weight: 600; border-radius: 8px; }
.btn-primary:hover { background: #142ea8 !important; border-color: #142ea8 !important; color: #fff !important; }
.btn-outline-primary { color: var(--nb-accent); border-color: var(--nb-accent); border-radius: 8px; font-weight: 600; }
.btn-outline-primary:hover { background: var(--nb-accent); color: #fff; }
.nano-bg { background: linear-gradient(135deg, var(--nb-navy) 0%, var(--nb-accent) 100%) !important; }

/* Container widths — prevent edge-to-edge on large screens, keep comfortable reading width */
.app-main .container { max-width: 1280px; padding-inline: 1rem; }
@media (min-width: 1440px) { .app-main .container { max-width: 1320px; } }

/* Site content area */
.site { min-height: 60vh; }

/* Cards generally */
.card { border: 1px solid rgba(12,27,77,0.06); box-shadow: 0 1px 2px rgba(12,27,77,.04), 0 2px 8px rgba(12,27,77,.04); }
.shadow { box-shadow: 0 4px 16px rgba(12,27,77,.08) !important; }

/* Inputs */
.form-control, .form-select { border-radius: 8px; border: 1px solid #e5e9f2; font-family: inherit; }
.form-control:focus, .form-select:focus { border-color: var(--nb-accent); box-shadow: 0 0 0 3px rgba(26,60,214,.15); }

/* Mobile — collapse sidebar */
@media (max-width: 768px) {
    .app-nav { position: fixed; bottom: 0; top: auto; width: 100%; height: 68px; flex-direction: row; padding: 0; z-index: 1040; }
    .app-nav > a[href='#'] { display:none !important; }
    .app-nav nav, .app-nav .nav { flex-direction: row !important; width: 100%; }
    .app-nav ul { flex-direction: row !important; justify-content: space-around; margin:0; padding:0; list-style:none; display:flex; width:100%; }
    .app-main { margin-right: 0 !important; padding-bottom: 72px; }
}