:root {
    --ink: #08283F;
    --primary: #0284C7;
    --primary-strong: #0369A1;
    --cyan: #0EA5E9;
    --cyan-soft: #E0F4FF;
    --solar: #FBBF24;
    --mist: #F1FAFF;
    --muted: #567389;
    --border: #D6E8F1;
}

html { scroll-behavior: smooth; }
body { font-family: "Inter", sans-serif; color: var(--ink); background: #fff; }
.display-font { font-family: "Space Grotesk", sans-serif; letter-spacing: -0.02em; }
.solar-grid {
    background-color: #F5FBFF;
    background-image:
        linear-gradient(rgba(2,132,199,.075) 1px, transparent 1px),
        linear-gradient(90deg, rgba(2,132,199,.075) 1px, transparent 1px);
    background-size: 28px 28px;
}
.hero-shade {
    background:
        linear-gradient(90deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.48) 40%, rgba(255,255,255,.10) 72%, rgba(255,255,255,0) 100%),
        radial-gradient(circle at 72% 30%, rgba(224,244,255,.18), transparent 35%);
}
.site-header {
    background: linear-gradient(135deg, #FFFFFF 0%, #F7FCFF 58%, #EDF9FF 100%);
    border-bottom: 1px solid #D6E8F1;
}
 .naza-logo {
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(8,40,63,.06));
}
.brand-copy { min-width: 0; }
.brand-copy-title { color: var(--ink); }
.brand-copy-tagline { color: var(--primary); }
.tech-accent { color: var(--cyan); }
.product-card { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 35px rgba(8,40,63,.12);
    border-color: rgba(14,165,233,.28);
}
.focus-ring:focus-visible {
    outline: 3px solid #38BDF8;
    outline-offset: 3px;
}
.filter-control {
    border: 1px solid #CEE4EF;
    background: #fff;
}

.language-switcher {
    min-width: 124px;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.language-switcher:hover {
    border-color: #38BDF8;
    box-shadow: 0 8px 20px rgba(8,40,63,.08);
}
.language-switcher:focus-visible {
    transform: translateY(-1px);
}

.site-footer {
    background: linear-gradient(135deg, #F8FDFF 0%, #F0FAFF 55%, #E6F7FF 100%);
}
.footer-accent {
    height: 3px;
    background: linear-gradient(90deg, #0EA5E9 0%, #38BDF8 55%, #7DD3FC 100%);
}
.footer-title {
    color: #0369A1;
    font-size: .86rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.footer-link {
    display: block;
    color: #567389;
    transition: color .2s ease, transform .2s ease;
}
.footer-link:hover {
    color: #0284C7;
    transform: translateX(2px);
}
.footer-social {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border: 1px solid #CFE4EF;
    border-radius: 999px;
    background: rgba(255,255,255,.82);
    color: #0284C7;
    box-shadow: 0 8px 18px rgba(8,40,63,.05);
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.footer-social:hover {
    transform: translateY(-2px);
    border-color: #7DD3FC;
    background: #FFFFFF;
}


/* Responsive foundation */
*,*::before,*::after{box-sizing:border-box}.display-font{overflow-wrap:anywhere}img{max-width:100%}body.mobile-menu-open{overflow:hidden}@media(max-width:640px){.canva-banner{line-height:1.35}.canva-banner .mx-auto{min-height:38px}.site-header{position:relative}.site-header .mx-auto{min-height:64px}.product-card:hover{transform:none}.focus-ring:focus-visible{outline-offset:2px}}

@media (max-width: 640px) {
    .home-hero, .home-hero .relative.mx-auto { min-height: 500px !important; }
    .home-hero .relative.mx-auto { align-items: flex-end; padding-top: 48px; padding-bottom: 44px; }
    .home-hero h1 { font-size: 2.2rem !important; }
    .home-hero p { font-size: .96rem; }
    .home-hero .hero-shade { background: linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.78) 45%, rgba(255,255,255,.96) 100%); }
    .home-hero .mt-9 { margin-top: 1.4rem; }
    .home-hero .mt-9 > a { flex: 1 1 100%; text-align: center; }
    .site-footer .grid { gap: 28px; }
}

@media (max-width: 640px) {
    body > div > main section { scroll-margin-top: 80px; }
    form.rounded-3xl { padding: 20px !important; border-radius: 22px !important; }
}


/* Section rhythm: the old custom py-18 / py-22 utilities are not part of Tailwind CDN.
   Give all long-form sections a consistent visual pause and Lao a native-friendly font. */
.page-section + .page-section { border-top: 1px solid rgba(214,232,241,.72); }
html[lang="lo"] body { font-family: "Noto Sans Lao", Inter, sans-serif; }
html[lang="lo"] .display-font { font-family: "Noto Sans Lao", "Space Grotesk", sans-serif; letter-spacing: 0; }
@media (max-width: 640px) {
  .page-section { padding-top: 3.75rem !important; padding-bottom: 3.75rem !important; }
  .solutions-hero h1, .about-hero h1 { font-size: clamp(2rem, 9vw, 2.65rem) !important; }
  .solutions-hero .grid.max-w-xl { grid-template-columns: 1fr; }
  .solutions-hero .grid.max-w-xl > div { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:10px; text-align:left; }
}

/* v3 visual rhythm: the gap between consecutive sections is intentionally shared,
   not doubled by stacking large top/bottom paddings. */
main > section.page-section {
    padding-block: clamp(3rem, 5.3vw, 5rem) !important;
}
main > section.page-section + section.page-section {
    border-top: 1px solid rgba(214,232,241,.72);
}
.section-kicker {
    color:#0284C7;
    font-size:.72rem;
    font-weight:900;
    letter-spacing:.19em;
    text-transform:uppercase;
}
.section-heading-row{display:flex;align-items:flex-end;justify-content:space-between;gap:28px}
.section-link{display:inline-flex;align-items:center;gap:7px;color:#0284C7;font-size:.9rem;font-weight:800;white-space:nowrap}
.home-hero-v3{min-height:610px;background:#F5FBFF}
.home-trust-chip{box-shadow:0 10px 28px rgba(8,40,63,.06);transition:transform .2s ease,box-shadow .2s ease}
.home-trust-chip:hover{transform:translateY(-2px);box-shadow:0 18px 35px rgba(8,40,63,.09)}
.home-flow-item{min-height:92px}
.home-product-card{overflow:hidden;border:1px solid #DCEAF1;border-radius:24px;background:#fff;box-shadow:0 12px 35px rgba(8,40,63,.055);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.home-product-card:hover{transform:translateY(-5px);box-shadow:0 22px 44px rgba(8,40,63,.10);border-color:#B9DCEC}
.home-product-card img{background:linear-gradient(135deg,#F7FCFF,#EDF8FC)}
.home-solution-card{overflow:hidden;border:1px solid #D6E8F1;border-radius:26px;background:#fff;box-shadow:0 12px 35px rgba(8,40,63,.055);transition:transform .25s ease,box-shadow .25s ease}
.home-solution-card:hover{transform:translateY(-5px);box-shadow:0 22px 44px rgba(8,40,63,.10)}
.home-commitment-section{background:#F7FBFD}
.home-commitment{box-shadow:0 24px 60px rgba(8,40,63,.14)}
.home-commitment-card{transition:background .2s ease,border-color .2s ease,transform .2s ease}
.home-commitment-card:hover{background:rgba(255,255,255,.09);border-color:rgba(125,211,252,.24);transform:translateY(-2px)}
.home-final-cta{background:#F8FCFE}
@media(max-width:900px){.section-heading-row{align-items:flex-start;flex-direction:column;gap:16px}.home-hero-v3{min-height:0}.home-flow-item:nth-child(2n){border-right:0}.home-flow-item{padding-inline:0 16px}.home-flow-item:nth-child(n+3){border-bottom:0}}
@media(max-width:640px){
  main > section.page-section{padding-block:2.65rem !important}
  .home-hero-v3{padding-bottom:0}
  .home-hero-v3 .relative.mx-auto{padding-top:3.25rem;padding-bottom:2.8rem}
  .home-hero-v3 h1{font-size:clamp(2.35rem,11vw,3.15rem);line-height:1.03}
  .home-trust-chip{padding:12px}
  .home-trust-chip strong{font-size:.78rem}
  .home-trust-chip span{font-size:.66rem}
  .home-flow-item{min-height:86px;padding-top:16px;padding-bottom:16px}
  .home-product-card:hover,.home-solution-card:hover{transform:none}
  .home-commitment{border-radius:26px;padding:26px 20px}
  .home-about-split img{height:290px}
}

/* When two content sections touch, the boundary is shared: keep only a modest
   leading pause so vertical whitespace never becomes the sum of two large pads. */
main > section + section.page-section {
    padding-top: clamp(2rem, 3.2vw, 3rem) !important;
}
main > section.page-section + section {
    padding-bottom: clamp(2.5rem, 4vw, 4rem) !important;
}
@media(max-width:640px){
  main > section + section.page-section{padding-top:2rem!important}
}