/* ══════════════════════════════════════════════════════════════════════
   NOYYAL SOLAR — DESIGN SYSTEM v2 ("Solar Grid")
   Brand tokens below are UNCHANGED in value (tool pages depend on them).
   New tokens are additive only, so back-office tools never regress.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  /* Brand (unchanged) */
  --primary:   #009139;
  --primary-d: #00722D;
  --dark:      #0C1B3D;
  --navy:      #122A55;
  --accent:    #FFC700;
  --success:   #27ae60;
  --info:      #2980b9;
  --danger:    #c0392b;
  --bg:        #f4f6f9;
  --card-bg:   #ffffff;
  --border:    #e0e0e0;
  --text:      #2c3e50;
  --muted:     #6c757d;
  --radius:    8px;
  --shadow:    0 2px 12px rgba(0,0,0,.08);
  --shadow-lg: 0 8px 30px rgba(0,0,0,.14);

  /* New: brand extensions */
  --primary-l:  #E7F6EC;
  --primary-l2: #F3FAF5;
  --accent-l:   #FFF6D9;
  --gold-d:     #C99400;
  --brand-blue: #26499C; /* sampled from the NOYYAL wordmark in the logo artwork */

  /* New: brand wordmark font -- rounded/bold to match the logo's lettering */
  --font-brand: 'Baloo 2', var(--font-display, sans-serif);

  /* New: neutral scale for the marketing surface */
  --ink-900: #0A1428;
  --ink-700: #33405c;
  --ink-500: #64708a;
  --ink-300: #d7dce5;
  --ink-150: #eaeef3;
  --ink-100: #f4f6fa;
  --paper:   #ffffff;

  /* New: type */
  --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* New: spacing scale */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* New: radius scale -- crisper/less bubbly than a typical "glass" UI */
  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-full: 999px;

  /* New: elevation scale */
  --e-xs: 0 1px 2px rgba(10,20,40,.05);
  --e-sm: 0 4px 16px rgba(10,20,40,.07);
  --e-md: 0 14px 34px rgba(10,20,40,.10);
  --e-lg: 0 26px 60px rgba(10,20,40,.14);

  --ease: cubic-bezier(.19,1,.22,1);
}

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

html { scroll-behavior: smooth; overflow-x: hidden; }

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

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
  min-height: 100vh;
  /* The mobile slide-in menu (.noy-menu) sits off-canvas via
     `transform: translateX(100%)` while closed. Some browsers still count
     that transformed, off-screen box toward the page's scrollable width
     (even though it's position:fixed), which opens up a phantom horizontal
     scrollbar and a blank strip roughly the menu's own width wide. Clipping
     it here is the standard guard against that. */
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); }

.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

img, svg { max-width: 100%; height: auto; }
.noy-ic { width: 18px; height: 18px; flex-shrink: 0; display: inline-block; vertical-align: -3px; }

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-d); }

:focus-visible { outline: 2px solid var(--gold-d); outline-offset: 2px; border-radius: 4px; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--dark); color: #fff;
  padding: 12px 20px; border-radius: 0 0 8px 0;
  font-weight: 600; z-index: 10000;
}
.skip-link:focus { left: 0; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .65s var(--ease), transform .65s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-stagger > * { transition-delay: calc(var(--i, 0) * 70ms); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ── HEADER / NAV -- light, frosted, colour-accented (not dark glass) ── */
.noy-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border-bottom: 1px solid var(--ink-150);
  transition: box-shadow .3s var(--ease), background .3s var(--ease);
}
.noy-header.is-scrolled { background: rgba(255,255,255,.97); box-shadow: 0 8px 24px rgba(10,20,40,.08); }

.noy-nav { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 20px; }

.noy-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }

.noy-mark { display: inline-flex; flex-shrink: 0; animation: noy-mark-float 4.5s ease-in-out infinite; }
.noy-mark-img { height: 40px; width: auto; display: block; filter: drop-shadow(0 2px 6px rgba(10,20,40,.12)); transition: transform .35s var(--ease); }
.noy-brand:hover .noy-mark-img { transform: rotate(-6deg) scale(1.06); }
@keyframes noy-mark-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

.noy-brand-text { display: flex; flex-direction: column; gap: 0; line-height: 1.15; }
.noy-brand-name { font-family: var(--font-brand); font-size: 18px; font-weight: 700; color: var(--brand-blue); letter-spacing: .2px; }
.noy-brand-name em { font-style: normal; color: var(--primary); }
.noy-brand-tag { font-size: 9.5px; font-weight: 600; color: var(--ink-500); letter-spacing: 1.2px; text-transform: uppercase; display: none; margin-top: 3px; }
@media (min-width: 900px) { .noy-brand-tag { display: block; } }

@media (max-width: 400px) {
  .noy-mark-img { height: 32px; }
  .noy-brand-name { font-size: 15px; }
}

.noy-menu { display: flex; align-items: center; list-style: none; gap: 4px; margin: 0; }

.noy-menu a {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 15px;
  color: var(--ink-700);
  font-size: 13.5px; font-weight: 600;
  border-radius: var(--r-full);
  transition: all .2s;
  white-space: nowrap;
  position: relative;
}
.noy-menu a svg { width: 15px; height: 15px; flex-shrink: 0; }
.noy-menu a:hover, .noy-menu a.active { color: var(--primary); background: var(--primary-l2); }

.noy-menu a.noy-cta-link { background: var(--ink-900); color: #fff; margin-left: 6px; }
.noy-menu a.noy-cta-link:hover { background: var(--primary); color: #fff; }
.noy-menu a.noy-cta-link.active { background: var(--primary); color: #fff; }

.noy-menu a.noy-wa-link { background: #25D366; color: #fff; }
.noy-menu a.noy-wa-link:hover { background: #1da851; color: #fff; }

.noy-hamburger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px;
  background: var(--ink-100); border: 1px solid var(--ink-150);
  border-radius: var(--r-sm); cursor: pointer; padding: 0;
}
.noy-hamburger span { display: block; width: 18px; height: 2px; margin: 0 auto; background: var(--ink-900); border-radius: 2px; transition: transform .3s var(--ease), opacity .3s var(--ease); }
.noy-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.noy-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.noy-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.noy-menu-backdrop {
  /* Must stay BELOW .noy-header's own z-index (1000): .noy-header creates its
     own stacking context, so the slide-in .noy-menu's z-index (1050) only
     ranks against its header siblings, never against this backdrop directly.
     A backdrop z-index above 1000 used to paint on top of the whole header
     -- menu included -- blurring it and swallowing taps meant for nav links. */
  position: fixed; inset: 0;
  background: rgba(10,20,40,.55); backdrop-filter: blur(2px);
  z-index: 990;
  /* visibility/opacity (not display:none<->block) so the fade-in always
     actually transitions -- toggling display and opacity in the same class
     change gives the browser no rendered "before" state to animate from,
     which can leave the backdrop failing to visibly appear at all. Also
     lets pointer-events do the "don't block clicks while closed" job that
     display:none used to, without losing the transition. */
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s var(--ease), visibility 0s linear .3s;
}
.noy-menu-backdrop.open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity .3s var(--ease), visibility 0s linear 0s;
}

/* Switches to the slide-in menu well before the desktop nav bar would ever
   run out of room -- 9 items (7 links + the Get Quotation and WhatsApp pill
   buttons) in one non-wrapping row need more space than a typical laptop
   viewport gives a sticky header, and white-space:nowrap on each link means
   they don't shrink to fit -- they silently push the last items (the two
   colored CTA pills) off-screen instead of wrapping, so the safest fix is
   to never let that row run that tight. Matches .container's own max-width
   so the single-row nav only ever appears once there's guaranteed room. */
@media (max-width: 1180px) {
  .noy-hamburger { display: flex; }
  .noy-menu {
    position: fixed; top: 0; right: 0; height: 100vh; width: min(320px, 84vw);
    background: #fff;
    flex-direction: column; align-items: stretch; gap: 4px;
    padding: 88px 20px 32px;
    box-shadow: -20px 0 50px rgba(10,20,40,.18);
    z-index: 1050;
    transform: translateX(100%);
    /* Belt-and-suspenders alongside the transform: guarantees the closed
       menu is truly hidden and unclickable (not just shifted off-screen),
       so it can never appear "already open" next to the hamburger icon at
       any viewport width. */
    visibility: hidden; pointer-events: none;
    transition: transform .35s var(--ease), visibility 0s linear .35s;
    overflow-y: auto;
  }
  .noy-menu.open {
    transform: translateX(0);
    visibility: visible; pointer-events: auto;
    transition: transform .35s var(--ease), visibility 0s linear 0s;
  }
  .noy-menu a { padding: 14px 16px; border-radius: var(--r-sm); }
  .noy-menu a.noy-cta-link, .noy-menu a.noy-wa-link { margin-left: 0; margin-top: 8px; justify-content: center; }
}

/* ── MAIN / FOOTER ─────────────────────────────────────────────────── */
.noy-main { flex: 1; }

.noy-footer {
  background: var(--dark);
  background-image: radial-gradient(560px 280px at 15% 0%, rgba(0,145,57,.16), transparent 70%);
  color: rgba(255,255,255,.76);
  padding: var(--sp-9) 0 0;
  position: relative;
}
.noy-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--primary), var(--accent)); }

.noy-footer-top {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  justify-content: space-between; align-items: center;
  padding-bottom: var(--sp-7);
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: var(--sp-7);
}
.noy-footer-quick { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.noy-footer-quick a { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.82); font-size: 13.5px; font-weight: 500; }
.noy-footer-quick a svg { width: 16px; height: 16px; color: var(--accent); }
.noy-footer-quick a:hover { color: #fff; }
.noy-footer-social { display: flex; gap: 8px; }
.noy-footer-social a {
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-full); color: rgba(255,255,255,.8); transition: all .2s;
}
.noy-footer-social a:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.noy-footer-social a svg { width: 15px; height: 15px; }

.noy-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-6); padding-bottom: var(--sp-7); }

.noy-footer-logo { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-brand); font-size: 18px; font-weight: 700; color: #fff; margin-bottom: var(--sp-3); }
.noy-footer-logo-img { height: 30px; width: auto; display: block; }
.noy-footer-logo em { font-style: normal; color: var(--primary-d); }
.noy-footer-brand p { font-size: 13px; opacity: .68; line-height: 1.8; max-width: 320px; }

.noy-footer-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-top: var(--sp-4); }
.noy-footer-badges span {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  padding: 5px 12px; border-radius: var(--r-full); font-size: 11px; font-weight: 500; color: rgba(255,255,255,.75);
}
.noy-footer-badges svg { width: 12px; height: 12px; color: var(--accent); }

.noy-footer-links h4, .noy-footer-info h4 {
  font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--accent);
  margin-bottom: var(--sp-4);
}
.noy-footer-links ul, .noy-footer-info ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.noy-footer-links li, .noy-footer-info li { font-size: 13px; opacity: .78; display: flex; align-items: center; gap: 8px; }
.noy-footer-links li svg, .noy-footer-info li svg { width: 14px; height: 14px; flex-shrink: 0; opacity: .8; }
.noy-footer-links a { color: rgba(255,255,255,.8); text-decoration: none; transition: color .2s; display: inline-flex; align-items: center; gap: 8px; }
.noy-footer-links a:hover { color: #fff; }

.noy-footer-copy {
  border-top: 1px solid rgba(255,255,255,.08); padding: var(--sp-5) 0;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; opacity: .55; flex-wrap: wrap; gap: 8px;
}

@media (max-width: 860px) {
  .noy-footer-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .noy-footer-top { flex-direction: column; align-items: flex-start; }
}

/* ══════════════════════════════════════════════════════════════════════
   HOMEPAGE — "Solar Grid" marketing surface   (prefix: nx-)
   ══════════════════════════════════════════════════════════════════════ */

.nx-section { padding: var(--sp-9) 0; }
.nx-section--tint { background: var(--primary-l2); }
.nx-section--white { background: var(--paper); }

.nx-kicker {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--primary-l); color: var(--primary-d);
  border: 1px solid rgba(0,145,57,.2);
  padding: 6px 16px; border-radius: var(--r-full);
  font-size: 11.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  margin-bottom: var(--sp-4);
}
.nx-kicker svg { width: 13px; height: 13px; }

.nx-head { max-width: 620px; margin: 0 0 var(--sp-7); }
.nx-head--center { margin-inline: auto; text-align: center; }
.nx-title { font-size: clamp(27px, 3.2vw, 40px); font-weight: 700; line-height: 1.2; letter-spacing: -.4px; color: var(--ink-900); margin-bottom: var(--sp-3); }
.nx-title em { font-style: normal; color: var(--primary); }
.nx-desc { font-size: 16px; line-height: 1.75; color: var(--ink-500); }

.nx-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 26px; border-radius: var(--r-sm);
  font-family: var(--font-display); font-size: 14.5px; font-weight: 700;
  border: 1.5px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.nx-btn svg { width: 17px; height: 17px; }
.nx-btn:active { transform: translateY(1px); }
.nx-btn--primary { background: var(--primary); color: #fff; box-shadow: 0 10px 24px rgba(0,145,57,.28); }
.nx-btn--primary:hover { background: var(--primary-d); color: #fff; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,145,57,.36); }
.nx-btn--outline { background: #fff; border-color: var(--ink-300); color: var(--ink-900); }
.nx-btn--outline:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-2px); }
.nx-btn--dark { background: var(--ink-900); color: #fff; }
.nx-btn--dark:hover { background: #000; color: #fff; transform: translateY(-2px); }
.nx-btn--white { background: #fff; color: var(--primary-d); }
.nx-btn--white:hover { transform: translateY(-2px); box-shadow: var(--e-md); }
.nx-btn--wa { background: #25D366; color: #fff; box-shadow: 0 10px 24px rgba(37,211,102,.28); }
.nx-btn--wa:hover { background: #1da851; color: #fff; transform: translateY(-2px); }

/* ── HERO — light, geometric collage (not dark/glass) ─────────────────── */
.nx-hero { position: relative; background: var(--paper); overflow: hidden; }
.nx-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--sp-8); align-items: center; padding: 72px 0 var(--sp-8); position: relative; z-index: 1; }

.nx-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--primary-l); border: 1px solid rgba(0,145,57,.18);
  padding: 7px 16px 7px 10px; border-radius: var(--r-full);
  font-size: 12.5px; font-weight: 700; color: var(--primary-d);
  margin-bottom: var(--sp-5);
}
.nx-hero-eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-d); animation: nx-pulse 1.8s ease-in-out infinite; }
@keyframes nx-pulse { 0% { box-shadow: 0 0 0 0 rgba(201,148,0,.5); } 70% { box-shadow: 0 0 0 8px rgba(201,148,0,0); } 100% { box-shadow: 0 0 0 0 rgba(201,148,0,0); } }

.nx-hero-title { font-size: clamp(32px, 4.6vw, 56px); font-weight: 800; line-height: 1.1; letter-spacing: -1px; color: var(--ink-900); margin-bottom: var(--sp-5); }
.nx-hero-title .grad { background: linear-gradient(100deg, var(--primary) 15%, var(--gold-d) 90%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.nx-hero-sub { font-size: 17px; line-height: 1.8; color: var(--ink-500); max-width: 500px; margin-bottom: var(--sp-6); }
.nx-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: var(--sp-6); }

.nx-hero-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.nx-hero-chips span {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--ink-100); border: 1px solid var(--ink-150); color: var(--ink-700);
  padding: 6px 13px; border-radius: var(--r-full); font-size: 12px; font-weight: 600;
  transition: all .2s;
}
.nx-hero-chips span:hover { background: var(--primary-l); border-color: rgba(0,145,57,.25); color: var(--primary-d); }
.nx-hero-chips svg { width: 13px; height: 13px; }

/* Collage visual */
.nx-collage { position: relative; height: 420px; }
.nx-collage-shape { position: absolute; border-radius: 36px; box-shadow: var(--e-lg); }
.nx-collage-shape--green { width: 270px; height: 330px; top: 10px; right: 30px; background: linear-gradient(155deg, var(--primary), #00b34a); transform: rotate(-7deg); }
.nx-collage-shape--gold { width: 180px; height: 180px; bottom: 10px; left: 0; background: linear-gradient(155deg, var(--accent), #ffe27a); transform: rotate(10deg); border-radius: 32px; }
.nx-collage-dashring { position: absolute; width: 250px; height: 250px; border: 2px dashed var(--ink-300); border-radius: 50%; top: -6px; left: 20px; animation: nx-spin 44s linear infinite; }
@keyframes nx-spin { to { transform: rotate(360deg); } }

.nx-collage-card {
  position: absolute; z-index: 2;
  background: #fff; border-radius: var(--r-md); box-shadow: var(--e-md);
  padding: 16px 20px; display: flex; align-items: center; gap: 12px;
  animation: nx-float 5s ease-in-out infinite;
}
.nx-collage-card .ic { width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--primary-l); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nx-collage-card .v { font-family: var(--font-display); font-size: 21px; font-weight: 800; color: var(--ink-900); line-height: 1; }
.nx-collage-card .l { font-size: 11px; color: var(--ink-500); margin-top: 3px; }
.nx-collage-card--main { bottom: 30px; left: -10px; }
.nx-collage-card--small { top: 20px; right: 0; animation-delay: -2.4s; }
@keyframes nx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

.nx-scroll-cue {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--ink-500); font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase; z-index: 1;
}
.nx-scroll-cue svg { width: 16px; height: 16px; animation: nx-bounce 1.8s ease-in-out infinite; }
@keyframes nx-bounce { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(6px); opacity: 1; } }

@media (max-width: 960px) {
  .nx-hero-grid { grid-template-columns: 1fr; padding: 40px 0 var(--sp-7); text-align: center; }
  .nx-hero-sub { margin-inline: auto; }
  .nx-hero-ctas, .nx-hero-chips { justify-content: center; }
  .nx-collage { display: none; }
}

/* ── TRUST STRIP ───────────────────────────────────────────────────── */
.nx-trust { background: #fff; border-top: 1px solid var(--ink-150); border-bottom: 1px solid var(--ink-150); padding: var(--sp-6) 0; }
.nx-trust-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-5); }
.nx-stat { text-align: left; }
.nx-stat .n { font-family: var(--font-display); font-size: 30px; font-weight: 800; color: var(--primary); line-height: 1; }
.nx-stat .n sup { font-size: 15px; }
.nx-stat:nth-child(3n+2) .n, .nx-stat.gold .n { color: var(--gold-d); }
.nx-stat .l { font-size: 12px; color: var(--ink-500); margin-top: 5px; }
.nx-trust-sep { width: 1px; height: 36px; background: var(--ink-150); }
.nx-badges { display: flex; flex-wrap: wrap; gap: 10px; }
.nx-badges span { display: inline-flex; align-items: center; gap: 7px; background: var(--ink-100); border: 1px solid var(--ink-150); padding: 8px 15px; border-radius: var(--r-full); font-size: 12.5px; font-weight: 600; color: var(--ink-700); }
.nx-badges svg { width: 15px; height: 15px; color: var(--primary); }
@media (max-width: 900px) { .nx-trust-row { justify-content: center; text-align: center; } .nx-stat { text-align: center; } .nx-trust-sep { display: none; } }

/* ── SERVICES — accent-bar grid (not bento) ───────────────────────── */
.nx-svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.nx-svc-card {
  position: relative; background: #fff; border: 1px solid var(--ink-150); border-radius: var(--r-md);
  padding: var(--sp-5) var(--sp-5) var(--sp-5) 30px; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--sp-3);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.nx-svc-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--ink-150); transition: width .3s var(--ease), background .3s var(--ease); }
.nx-svc-card:hover { transform: translateY(-5px); box-shadow: var(--e-md); }
.nx-svc-card:hover::before { width: 6px; background: linear-gradient(180deg, var(--primary), var(--accent)); }
.nx-svc-icon { width: 48px; height: 48px; border-radius: var(--r-sm); background: var(--primary-l); color: var(--primary); display: flex; align-items: center; justify-content: center; }
.nx-svc-icon svg { width: 24px; height: 24px; }
.nx-svc-title { font-size: 17px; font-weight: 700; color: var(--ink-900); }
.nx-svc-desc { font-size: 13.5px; color: var(--ink-500); line-height: 1.75; flex: 1; }
.nx-svc-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.nx-svc-tags span { background: var(--ink-100); color: var(--ink-700); padding: 3px 10px; border-radius: var(--r-full); font-size: 11px; font-weight: 500; }
.nx-svc-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--primary); }
.nx-svc-link svg { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.nx-svc-card:hover .nx-svc-link svg { transform: translateX(4px); }
@media (max-width: 980px) { .nx-svc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .nx-svc-grid { grid-template-columns: 1fr; } }

/* ── PROCESS — horizontal stepper ─────────────────────────────────── */
.nx-stepper { position: relative; display: flex; align-items: flex-start; gap: var(--sp-4); }
.nx-stepper::before { content: ''; position: absolute; top: 27px; left: 8%; right: 8%; height: 2px; background: var(--ink-150); z-index: 0; }
.nx-step { flex: 1; text-align: center; position: relative; z-index: 1; }
.nx-step-circle {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto var(--sp-4);
  background: #fff; border: 2px solid var(--primary); color: var(--primary);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 6px var(--paper);
}
.nx-step-circle svg { width: 22px; height: 22px; }
.nx-step-n { font-family: var(--font-display); font-size: 11px; font-weight: 700; color: var(--gold-d); letter-spacing: 1px; margin-bottom: 6px; }
.nx-step h3 { font-size: 15.5px; font-weight: 700; color: var(--ink-900); margin-bottom: 8px; }
.nx-step p { font-size: 13px; color: var(--ink-500); line-height: 1.7; max-width: 220px; margin: 0 auto; }
@media (max-width: 860px) {
  .nx-stepper { flex-direction: column; gap: var(--sp-6); }
  .nx-stepper::before { top: 0; bottom: 0; left: 27px; right: auto; width: 2px; height: auto; }
  .nx-step { text-align: left; display: flex; gap: var(--sp-4); align-items: flex-start; }
  .nx-step-circle { margin: 0; flex-shrink: 0; }
  .nx-step p { margin: 0; }
}

/* ── WHY US — dark banner with overlapping cards ──────────────────── */
.nx-whybanner {
  background: linear-gradient(135deg, var(--dark), var(--navy));
  padding: var(--sp-8) 0 calc(var(--sp-8) + 96px);
  color: #fff; text-align: center; position: relative; overflow: hidden;
}

/* On-dark variants of the shared kicker/title (avoids inline styles) */
.nx-whybanner .nx-kicker--dark { background: rgba(255,199,0,.14); border-color: rgba(255,199,0,.3); color: var(--accent); }
.nx-whybanner .nx-title { color: #fff; }
.nx-whybanner .nx-title em { color: var(--accent); }

/* Soft drifting glow, same aurora technique used on the CTA banner */
.nx-whybanner-aurora { position: absolute; inset: 0; overflow: hidden; filter: blur(70px); opacity: .4; pointer-events: none; }
.nx-whybanner-blob { position: absolute; border-radius: 50%; }
.nx-whybanner-blob--1 { width: 380px; height: 380px; top: -140px; left: -90px; background: radial-gradient(circle, var(--primary), transparent 70%); animation: nx-why-drift 16s ease-in-out infinite; }
.nx-whybanner-blob--2 { width: 320px; height: 320px; top: 20%; right: -80px; background: radial-gradient(circle, var(--accent), transparent 70%); animation: nx-why-drift 20s ease-in-out infinite reverse; animation-delay: -5s; }
@keyframes nx-why-drift { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px, 30px) scale(1.15); } }

.nx-whybanner-rays {
  position: absolute; top: -30%; left: 50%; width: 900px; height: 900px; margin-left: -450px;
  background: repeating-conic-gradient(from 0deg, rgba(255,199,0,.05) 0deg 6deg, transparent 6deg 18deg);
  animation: nx-spin 70s linear infinite; pointer-events: none;
}
.nx-whybanner-inner { position: relative; z-index: 1; }

.nx-why-overlap {
  margin-top: calc(-1 * (var(--sp-8) + 40px));
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5);
  position: relative; z-index: 2;
}
.nx-why-card {
  background: #fff; border-radius: var(--r-md); padding: var(--sp-6) var(--sp-5); box-shadow: var(--e-lg);
  text-align: left; border-top: 3px solid var(--accent);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.nx-why-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px rgba(0,0,0,.22); }
.nx-why-ic { width: 48px; height: 48px; border-radius: var(--r-sm); background: var(--primary-l); color: var(--primary); display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-4); }
.nx-why-ic svg { width: 24px; height: 24px; }
.nx-why-card h3 { font-size: 16px; font-weight: 700; color: var(--ink-900); margin-bottom: 8px; }
.nx-why-card p { font-size: 13px; color: var(--ink-500); line-height: 1.75; }

/* Glassy chips -- readable on the dark banner (previous version used dark
   ink colors here, making this strip nearly invisible against the banner) */
.nx-why-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-5); margin-top: var(--sp-7); position: relative; z-index: 1; }
.nx-why-strip-item {
  display: flex; align-items: center; gap: 14px; max-width: 280px; text-align: left;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-md); padding: 14px 18px; backdrop-filter: blur(6px);
  transition: background .25s, border-color .25s, transform .25s var(--ease);
}
.nx-why-strip-item:hover { background: rgba(255,255,255,.12); border-color: rgba(255,199,0,.4); transform: translateY(-3px); }
.nx-why-strip-item .ic { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,199,0,.16); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nx-why-strip-item .ic svg { width: 19px; height: 19px; }
.nx-why-strip-item strong { display: block; font-size: 13.5px; font-weight: 700; color: #fff; }
.nx-why-strip-item span { font-size: 12px; color: rgba(255,255,255,.65); }

@media (max-width: 900px) {
  .nx-why-overlap { grid-template-columns: 1fr; margin-top: var(--sp-6); }
  .nx-whybanner { padding-bottom: var(--sp-7); }
  .nx-whybanner-blob { display: none; }
}

/* ── ABOUT — donut stat visual ─────────────────────────────────────── */
.nx-about-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--sp-8); align-items: center; }
.nx-about-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin: var(--sp-6) 0; }
.nx-about-stat { border-left: 3px solid var(--primary); padding: 4px 0 4px 14px; }
.nx-about-stat .n { font-family: var(--font-display); font-size: 23px; font-weight: 800; color: var(--primary); line-height: 1; }
.nx-about-stat .l { font-size: 11.5px; color: var(--ink-500); margin-top: 4px; }

.nx-donut-card { background: #fff; border: 1px solid var(--ink-150); border-radius: var(--r-lg); padding: var(--sp-7); text-align: center; box-shadow: var(--e-sm); }
.nx-donut { width: 210px; height: 210px; border-radius: 50%; margin: 0 auto var(--sp-5); background: conic-gradient(var(--primary) 0% 90%, var(--ink-150) 90% 100%); display: flex; align-items: center; justify-content: center; }
.nx-donut-inner { width: 165px; height: 165px; border-radius: 50%; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px var(--ink-150); }
.nx-donut-inner .v { font-family: var(--font-display); font-size: 34px; font-weight: 800; color: var(--ink-900); }
.nx-donut-inner .l { font-size: 11.5px; color: var(--ink-500); max-width: 110px; }
.nx-donut-card h3 { font-size: 17px; font-weight: 700; color: var(--ink-900); margin-bottom: 6px; }
.nx-donut-card p { font-size: 13px; color: var(--ink-500); }

@media (max-width: 900px) { .nx-about-grid { grid-template-columns: 1fr; } .nx-about-stats { grid-template-columns: 1fr 1fr; } }

/* ── TESTIMONIALS — infinite marquee ──────────────────────────────── */
.nx-t-section { overflow: hidden; }

.nx-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.nx-marquee-track {
  display: flex;
  gap: var(--sp-5);
  width: max-content;
  animation: nx-marquee-scroll 46s linear infinite;
}
.nx-marquee:hover .nx-marquee-track,
.nx-marquee:focus-within .nx-marquee-track { animation-play-state: paused; }

@keyframes nx-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.nx-t-card {
  flex: 0 0 auto;
  width: min(380px, 84vw);
  background: #fff;
  border: 1px solid var(--ink-150);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  box-shadow: var(--e-sm);
}
.nx-t-stars { display: flex; gap: 3px; color: var(--gold-d); margin-bottom: var(--sp-4); }
.nx-t-stars svg { width: 14px; height: 14px; }
.nx-t-text { font-size: 15px; line-height: 1.75; color: var(--ink-900); font-weight: 500; margin-bottom: var(--sp-5); min-height: 132px; }
.nx-t-author { display: flex; align-items: center; gap: 12px; }
.nx-t-av { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--accent)); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; color: #fff; font-size: 13px; }
.nx-t-author strong { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink-900); }
.nx-t-author span { display: block; font-size: 12px; color: var(--ink-500); margin-top: 2px; }

@media (max-width: 640px) { .nx-t-text { min-height: 0; } }

/* ── FAQ — two-column accordion ───────────────────────────────────── */
.nx-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-5); max-width: 980px; margin: 0 auto; }
.nx-faq-item { align-self: start; background: #fff; border: 1px solid var(--ink-150); border-radius: var(--r-md); overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.nx-faq-item.open { border-color: rgba(0,145,57,.3); box-shadow: var(--e-sm); }
.nx-faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); background: none; border: none; cursor: pointer; padding: 17px 20px; font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--ink-900); text-align: left; }
.nx-faq-q svg { width: 18px; height: 18px; color: var(--primary); flex-shrink: 0; transition: transform .3s var(--ease); }
.nx-faq-item.open .nx-faq-q svg { transform: rotate(180deg); }
.nx-faq-a { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.nx-faq-a p { padding: 0 20px 18px; font-size: 13.5px; line-height: 1.8; color: var(--ink-500); }
@media (max-width: 800px) { .nx-faq-grid { grid-template-columns: 1fr; } }

/* ── CTA BANNER — aurora-mesh background, orbiting icons, glow CTA ── */
.nx-cta {
  position: relative; overflow: hidden; text-align: center; color: #fff;
  padding: var(--sp-8) 0;
  background: linear-gradient(160deg, #00622c 0%, var(--primary) 45%, #00944a 75%, var(--gold-d) 135%);
}

/* Faint drifting dot-grid -- nods to the "Solar Grid" design system + solar-cell texture */
.nx-cta::before {
  content: ''; position: absolute; inset: -30px;
  background-image: radial-gradient(rgba(255,255,255,.16) 1.4px, transparent 1.4px);
  background-size: 30px 30px;
  animation: nx-cta-grid-pan 34s linear infinite;
  pointer-events: none;
}
@keyframes nx-cta-grid-pan { to { background-position: 300px 300px; } }

/* Aurora blobs -- soft blurred glows that slowly drift + breathe, layered over the grid */
.nx-cta-aurora { position: absolute; inset: 0; overflow: hidden; filter: blur(70px); opacity: .6; pointer-events: none; }
.nx-cta-blob { position: absolute; border-radius: 50%; will-change: transform; }
.nx-cta-blob--1 {
  width: 440px; height: 440px; top: -160px; left: -100px;
  background: radial-gradient(circle at 35% 35%, #ffffff, transparent 72%);
  animation: nx-cta-blob-a 19s ease-in-out infinite;
}
.nx-cta-blob--2 {
  width: 380px; height: 380px; bottom: -170px; right: -70px;
  background: radial-gradient(circle at 60% 40%, var(--accent), transparent 72%);
  animation: nx-cta-blob-b 23s ease-in-out infinite;
}
.nx-cta-blob--3 {
  width: 320px; height: 320px; top: 10%; right: 18%;
  background: radial-gradient(circle at 50% 50%, #00ffa3, transparent 72%);
  animation: nx-cta-blob-c 27s ease-in-out infinite;
}
@keyframes nx-cta-blob-a { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(70px, 50px) scale(1.18); } }
@keyframes nx-cta-blob-b { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-60px, -35px) scale(1.12); } }
@keyframes nx-cta-blob-c { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(35px, -55px) scale(.88); } }

/* Orbiting rings + floating icon bubbles -- purely decorative depth */
.nx-cta-orbit { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.nx-cta-ring {
  position: absolute; border: 1.5px dashed rgba(255,255,255,.22); border-radius: 50%;
}
.nx-cta-ring--1 { width: 340px; height: 340px; top: -120px; left: 4%; animation: nx-spin 50s linear infinite; }
.nx-cta-ring--2 { width: 220px; height: 220px; bottom: -90px; right: 8%; animation: nx-spin 40s linear infinite reverse; }

.nx-cta-float {
  position: absolute; display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(3px);
  animation: nx-float 5s ease-in-out infinite;
}
.nx-cta-float svg { width: 20px; height: 20px; color: #fff; }
.nx-cta-float--1 { top: 14%;  left: 10%; animation-delay: 0s; }
.nx-cta-float--2 { top: 62%;  left: 6%;  width: 38px; height: 38px; animation-delay: -1.6s; }
.nx-cta-float--3 { top: 20%;  right: 9%; width: 38px; height: 38px; animation-delay: -3.2s; }
.nx-cta-float--4 { bottom: 16%; right: 13%; animation-delay: -2.4s; }
@media (max-width: 860px) { .nx-cta-float, .nx-cta-ring { display: none; } }

.nx-cta-inner { position: relative; z-index: 1; }

.nx-cta-badge {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3);
  padding: 7px 18px 7px 12px; border-radius: var(--r-full);
  font-size: 12.5px; font-weight: 700; letter-spacing: .2px;
  margin-bottom: var(--sp-5);
}
.nx-cta-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: nx-pulse-white 1.8s ease-in-out infinite; }
@keyframes nx-pulse-white { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.55); } 70% { box-shadow: 0 0 0 8px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }

.nx-cta-title { font-size: clamp(26px, 4vw, 42px); font-weight: 800; margin-bottom: var(--sp-3); }
.nx-cta-title .grad { background: linear-gradient(100deg, #fff 20%, var(--dark) 55%, #fff 80%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: nx-cta-shine 3.5s linear infinite; }
@keyframes nx-cta-shine { to { background-position: -200% center; } }

.nx-cta-desc { font-size: 15.5px; color: rgba(255,255,255,.92); max-width: 540px; margin: 0 auto var(--sp-6); line-height: 1.8; }
.nx-cta-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: var(--sp-5); }

.nx-cta-glow { position: relative; }
.nx-cta-glow::before {
  content: ''; position: absolute; inset: -4px; border-radius: inherit; z-index: -1;
  box-shadow: 0 0 0 0 rgba(255,255,255,.45);
  animation: nx-cta-glow-pulse 2.4s ease-out infinite;
}
@keyframes nx-cta-glow-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.4); }
  70%  { box-shadow: 0 0 0 12px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

.nx-cta-checks { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; }
.nx-cta-checks span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: rgba(255,255,255,.92); font-weight: 600; }
.nx-cta-checks svg { width: 14px; height: 14px; }

/* ── CONTACT — light form card ─────────────────────────────────────── */
.nx-contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--sp-7); align-items: flex-start; }
.nx-contact-info { display: flex; flex-direction: column; gap: var(--sp-4); }
.nx-contact-card { display: flex; align-items: flex-start; gap: 15px; background: #fff; border: 1px solid var(--ink-150); border-radius: var(--r-md); padding: 18px 20px; transition: all .25s var(--ease); }
.nx-contact-card:hover { transform: translateX(4px); border-color: rgba(0,145,57,.25); box-shadow: var(--e-sm); }
.nx-contact-ic { flex-shrink: 0; width: 42px; height: 42px; border-radius: var(--r-sm); background: var(--primary-l); color: var(--primary); display: flex; align-items: center; justify-content: center; }
.nx-contact-ic svg { width: 20px; height: 20px; }
.nx-contact-card h4 { font-size: 12px; font-weight: 700; color: var(--ink-500); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.nx-contact-card p, .nx-contact-card a { font-size: 14px; color: var(--ink-900); line-height: 1.6; }
.nx-contact-card a:hover { color: var(--primary); }

.nx-form-card { background: #fff; border: 1px solid var(--ink-150); border-top: 4px solid var(--primary); border-radius: var(--r-lg); padding: var(--sp-7); box-shadow: var(--e-sm); }
.nx-form-card h3 { font-size: 19px; font-weight: 700; color: var(--ink-900); margin-bottom: var(--sp-5); }
.nx-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }

.nx-field { position: relative; margin-bottom: var(--sp-4); }
.nx-field input, .nx-field select, .nx-field textarea {
  width: 100%; background: var(--ink-100); border: 1px solid var(--ink-150); border-radius: var(--r-sm);
  padding: 16px 14px 8px; font-size: 14px; font-family: inherit; color: var(--ink-900);
  transition: border-color .2s, background .2s;
}
.nx-field textarea { resize: vertical; min-height: 90px; }
.nx-field input:focus, .nx-field select:focus, .nx-field textarea:focus { outline: none; border-color: var(--primary); background: #fff; }
.nx-field label { position: absolute; left: 14px; top: 14px; font-size: 13px; color: var(--ink-500); pointer-events: none; transition: all .18s var(--ease); }
.nx-field input:focus ~ label, .nx-field input:not(:placeholder-shown) ~ label,
.nx-field textarea:focus ~ label, .nx-field textarea:not(:placeholder-shown) ~ label,
.nx-field select ~ label { top: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--primary); }

@media (max-width: 900px) { .nx-contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .nx-form-row { grid-template-columns: 1fr; } }

@media (max-width: 768px) { .nx-section { padding: var(--sp-8) 0; } }

@media print { .noy-header, .noy-footer, .nx-hero, .nx-trust, .nx-cta { display: none !important; } }

/* ── QUOTATION LOGIN GATE ─────────────────────────── */
.noy-login {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
}

.noy-login-box {
  width: 100%;
  max-width: 360px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 36px 32px;
  text-align: center;
}

.noy-login-icon {
  display: flex; align-items: center; justify-content: center;
  color: var(--primary);
  margin: 0 auto 12px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--primary-l);
}
.noy-login-icon .noy-ic { width: 28px; height: 28px; }

.noy-login-logo { height: 84px; width: auto; margin: 0 auto 16px; display: block; animation: noy-login-logo-in .6s var(--ease); }
@keyframes noy-login-logo-in { from { opacity: 0; transform: translateY(-10px) scale(.94); } to { opacity: 1; transform: none; } }

.noy-login-title { font-size: 20px; font-weight: 800; color: var(--text); margin-bottom: 6px; }
.noy-login-sub { font-size: 13px; color: var(--muted); margin-bottom: 20px; }

.noy-login-error {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: var(--danger);
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 16px;
}

.noy-login-form { text-align: left; display: flex; flex-direction: column; gap: 14px; }
.noy-login-btn { width: 100%; justify-content: center; margin-top: 4px; }

.noy-logout-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,.85);
  text-decoration: underline;
}
.noy-logout-link:hover { color: #fff; }

/* ── QUOTATION PAGE ──────────────────────────────── */
.sq { padding: 24px 0; }

.sq-header {
  background: linear-gradient(135deg, var(--primary), #FFC700);
  color: #fff;
  padding: 22px 26px;
  border-radius: var(--radius) var(--radius) 0 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  box-shadow: var(--shadow);
}

.sq-logo { font-size: 26px; font-weight: 900; letter-spacing: 3px; }
.sq-tagline { font-size: 12px; opacity: .85; margin-top: 3px; }

.sq-header-right { text-align: right; }

.sq-meta-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 13px;
}

.sq-meta-row label { opacity: .8; white-space: nowrap; }

.sq-meta-row input {
  background: rgba(255,255,255,.2);
  border: 1px solid rgba(255,255,255,.4);
  color: #fff;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
  width: 160px;
}

.sq-meta-row input::placeholder { color: rgba(255,255,255,.6); }
.sq-meta-row input[type=number] { width: 70px; }

.sq-from-to {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 16px 0;
}

.sq-panel {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.sq-panel-title {
  background: #f5f5f5;
  padding: 10px 14px;
  font-weight: 700;
  font-size: 13px;
  color: #555;
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: .4px;
}

.sq-field {
  padding: 10px 14px;
  border-bottom: 1px solid #f5f5f5;
}

.sq-field label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .3px;
  margin-bottom: 4px;
}

.sq-field input,
.sq-field select,
.sq-field textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 7px 10px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  background: #fff;
  transition: border-color .2s;
  box-sizing: border-box;
}

.sq-field input:focus,
.sq-field select:focus,
.sq-field textarea:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,145,57,.08);
}

.sq-field textarea { resize: vertical; }

.sq-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.sq-req { color: var(--danger); }
.sq-readonly { background: #f8f8f8 !important; color: var(--muted) !important; cursor: default; }

.sq-section {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: 14px 0;
  overflow: hidden;
}

.sq-section-title {
  background: #f5f5f5;
  padding: 10px 14px;
  font-weight: 700;
  font-size: 13px;
  color: #555;
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: .4px;
}

.sq-spec-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.sq-spec-grid .sq-field { border-right: 1px solid #f0f0f0; }

.sq-preset-bar {
  padding: 12px 14px;
  background: #fafafa;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sq-preset-label { font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }

.sq-preset-btn {
  padding: 5px 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s;
  font-family: inherit;
  color: var(--text);
}
.sq-preset-btn:hover { border-color: var(--primary); color: var(--primary); background: #fff9f5; }

.sq-table-wrap { overflow-x: auto; }

.sq-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.sq-tbl thead th {
  background: #2c3e50;
  color: #fff;
  padding: 10px 8px;
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .3px;
  white-space: nowrap;
}

.sq-th-num { text-align: center; }

.sq-tbl tbody td {
  padding: 7px 8px;
  border-bottom: 1px solid #f5f5f5;
  vertical-align: middle;
}

.sq-tbl tbody tr:hover td { background: #fff9f5; }

.sq-tbl td input,
.sq-tbl td select {
  width: 100%;
  border: 1px solid #e8e8e8;
  border-radius: 3px;
  padding: 5px 7px;
  font-size: 12px;
  font-family: inherit;
  box-sizing: border-box;
}

.sq-tbl td input:focus,
.sq-tbl td select:focus {
  border-color: var(--primary);
  outline: none;
}

.sq-tbl .sq-td-num { text-align: center; color: var(--muted); font-size: 12px; }
.sq-tbl .sq-td-amt { text-align: right; font-weight: 700; color: var(--primary); white-space: nowrap; background: #fff9f5; }
.sq-del-btn { background: #fef2f2; border: 1px solid #fca5a5; color: var(--danger); cursor: pointer; padding: 4px 8px; border-radius: 3px; font-size: 11px; }
.sq-del-btn:hover { background: #fee2e2; }

.sq-add-row { padding: 12px 14px; }

.sq-summary-wrap {
  display: flex;
  gap: 20px;
  padding: 16px 14px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.sq-summary-left { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 12px; }

.sq-summary-table-wrap { min-width: 340px; }

.sq-stbl { width: 100%; border-collapse: collapse; }

.sq-stbl td {
  padding: 10px 12px;
  font-size: 14px;
  border-bottom: 1px solid #f5f5f5;
}

.sq-stbl td:last-child { text-align: right; font-weight: 700; white-space: nowrap; }

.sq-stbl-gst { background: #fff8e1; }
.sq-stbl-gst select { border: none; background: transparent; font-weight: 700; font-size: 14px; font-family: inherit; cursor: pointer; }
.sq-stbl-sub td { color: var(--success); font-weight: 600; }

.sq-stbl-total td {
  background: var(--primary);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  padding: 14px 12px;
}

.sq-words { font-style: italic; font-size: 12px !important; color: var(--muted) !important; }

.sq-terms-wrap { padding: 14px; }
.sq-terms-wrap textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 12px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  line-height: 1.7;
  box-sizing: border-box;
}

.sq-sig-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 14px 0;
  padding: 20px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.sq-sig-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); margin-bottom: 8px; }
.sq-sig-line { border-bottom: 1px solid #aaa; height: 50px; margin-bottom: 6px; }
.sq-sig-hint { font-size: 11px; color: var(--muted); }
.sq-sig-box input { width: 100%; border: 1px solid var(--border); padding: 7px 10px; border-radius: 4px; font-size: 13px; margin-top: 8px; box-sizing: border-box; }
.sq-sig-box--right { text-align: right; }
.sq-sig-box--right input { text-align: right; }

.sq-actions {
  display: flex;
  gap: 10px;
  padding: 16px;
  background: #f8f9fa;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
  border-radius: 0 0 var(--radius) var(--radius);
}

.sq-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  font-family: inherit;
  transition: all .2s;
}
.sq-btn-primary  { background: var(--primary); color: #fff; }
.sq-btn-primary:hover  { background: var(--primary-d); }
.sq-btn-success  { background: var(--success); color: #fff; }
.sq-btn-success:hover  { background: #219a52; }
.sq-btn-info     { background: var(--info); color: #fff; }
.sq-btn-info:hover     { background: #2172a4; }
.sq-btn-outline  { background: #fff; color: var(--primary); border: 2px solid var(--primary); }
.sq-btn-outline:hover  { background: var(--primary); color: #fff; }
.sq-btn-dark     { background: #2c3e50; color: #fff; }
.sq-btn-dark:hover     { background: #1a252f; }

/* ── COMPANY DETAILS PAGE ────────────────────────── */
.cd { padding: 24px 0; }

.cd-header {
  background: linear-gradient(135deg, #2c3e50, #3498db);
  color: #fff;
  padding: 22px 26px;
  border-radius: var(--radius) var(--radius) 0 0;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: var(--shadow);
}

.cd-header-icon { font-size: 38px; }
.cd-header-title { font-size: 22px; font-weight: 800; margin-bottom: 4px; }
.cd-header-sub { font-size: 13px; opacity: .8; }

.cd-notice {
  background: #e8f4fd;
  border: 1px solid #bee5eb;
  color: #0c5460;
  padding: 12px 16px;
  border-radius: 0 0 4px 4px;
  font-size: 13px;
  margin-bottom: 4px;
}

.cd-body {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 20px;
}

.cd-section { margin-bottom: 22px; }

.cd-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.cd-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.cd-field { display: flex; flex-direction: column; gap: 5px; }
.cd-field--full { grid-column: 1 / -1; }

.cd-field label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .3px;
}

.cd-field input,
.cd-field select,
.cd-field textarea {
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 9px 12px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  transition: border-color .2s;
  box-sizing: border-box;
}

.cd-field input:focus,
.cd-field select:focus,
.cd-field textarea:focus {
  border-color: #3498db;
  outline: none;
  box-shadow: 0 0 0 3px rgba(52,152,219,.1);
}

.cd-field textarea { resize: vertical; }

.cd-actions { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }

.cd-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  font-family: inherit;
  transition: all .2s;
}
.cd-btn-primary   { background: var(--primary); color: #fff; }
.cd-btn-primary:hover   { background: var(--primary-d); }
.cd-btn-secondary { background: #f0f0f0; color: var(--text); }
.cd-btn-secondary:hover { background: #e0e0e0; }
.cd-btn-danger    { background: #fef2f2; color: var(--danger); border: 1px solid #fca5a5; }
.cd-btn-danger:hover    { background: #fee2e2; }

.cd-saved {
  display: none;
  background: #d4edda;
  border: 1px solid #c3e6cb;
  color: #155724;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 14px;
  margin-top: 14px;
}

/* ── CUSTOMERS PAGE ──────────────────────────────── */
.cu { padding: 24px 0; }

.cu-header {
  background: linear-gradient(135deg, #6c3483, #a569bd);
  color: #fff;
  padding: 22px 26px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}

.cu-header-icon { font-size: 36px; }
.cu-header-title { font-size: 22px; font-weight: 800; margin-bottom: 4px; }
.cu-header-sub { font-size: 13px; opacity: .8; }

.cu-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}

.cu-stat {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  text-align: center;
  box-shadow: var(--shadow);
}

.cu-stat-num { font-size: 30px; font-weight: 800; color: #6c3483; }
.cu-stat-lbl { font-size: 12px; color: var(--muted); margin-top: 3px; }

.cu-toolbar {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.cu-search {
  flex: 1;
  min-width: 200px;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
}
.cu-search:focus { border-color: #6c3483; outline: none; }

.cu-toolbar-actions { display: flex; gap: 8px; }

.cu-btn {
  padding: 9px 18px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  font-family: inherit;
  transition: all .2s;
}
.cu-btn-primary   { background: #6c3483; color: #fff; }
.cu-btn-primary:hover   { background: #5b2c6f; }
.cu-btn-secondary { background: #f0f0f0; color: var(--text); }
.cu-btn-secondary:hover { background: #e0e0e0; }

.cu-table-wrap { overflow-x: auto; margin-bottom: 20px; }

.cu-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: var(--card-bg);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.cu-tbl th {
  background: #2c3e50;
  color: #fff;
  padding: 11px 12px;
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  white-space: nowrap;
}

.cu-tbl td {
  padding: 10px 12px;
  border-bottom: 1px solid #f5f5f5;
}

.cu-tbl tr:hover td { background: #fdf0ff; }

.cu-td-num { text-align: center; color: var(--muted); font-size: 12px; }
.cu-td-name { font-weight: 600; }
.cu-td-kw { text-align: center; font-weight: 700; color: #6c3483; }
.cu-td-loc { font-size: 12px; color: var(--muted); }
.cu-td-actions { white-space: nowrap; }

.cu-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}

.cu-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  margin-right: 4px;
}
.cu-btn-edit  { background: #e8f4fd; color: var(--info); }
.cu-btn-quote { background: #e9f7ef; color: var(--success); }
.cu-btn-del   { background: #fef2f2; color: var(--danger); }

.cu-empty { text-align: center; color: var(--muted); padding: 40px 20px; font-size: 14px; }

.cu-form {
  background: #f8f9fa;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-top: 20px;
  box-shadow: var(--shadow);
}

.cu-form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.cu-form-header h3 { font-size: 16px; font-weight: 700; color: var(--text); }

.cu-form-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--muted);
  padding: 4px 8px;
  border-radius: 4px;
}
.cu-form-close:hover { background: #e0e0e0; }

.cu-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 0;
}

.cu-form-actions { display: flex; gap: 10px; margin-top: 16px; }

/* ── PRODUCTS PAGE ───────────────────────────────── */
.pr { padding: 24px 0; }

.pr-cats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.pr-cat-btn {
  padding: 7px 16px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s;
  color: var(--text);
}
.pr-cat-btn:hover { border-color: var(--primary); color: var(--primary); }
.pr-cat-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }

.pr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.pr-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform .2s, box-shadow .2s;
  box-shadow: var(--shadow);
}
.pr-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.pr-card-cat { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; }
.pr-card-name { font-size: 14px; font-weight: 700; color: var(--text); }
.pr-card-brand { font-size: 12px; color: var(--muted); }
.pr-card-desc { font-size: 12px; color: var(--muted); flex: 1; line-height: 1.5; }

.pr-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid #f0f0f0;
}

.pr-card-rate { font-size: 15px; font-weight: 800; color: var(--primary); }
.pr-card-actions { display: flex; gap: 6px; }

/* ── SUBSIDY CALCULATOR PAGE ─────────────────────── */
.ssc { padding: 24px 0 40px; }

.ssc-header {
  background: linear-gradient(135deg, var(--dark), var(--navy));
  color: #fff;
  padding: 22px 26px;
  border-radius: var(--radius) var(--radius) 0 0;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: var(--shadow);
}
.ssc-header-icon { color: var(--accent); flex-shrink: 0; }
.ssc-header-icon .noy-ic { width: 34px; height: 34px; }
.ssc-header-title { font-size: 22px; font-weight: 800; margin-bottom: 4px; }
.ssc-header-sub { font-size: 13px; opacity: .8; }

.ssc-body {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 24px;
}

.ssc-tabs { display: flex; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; }
.ssc-tab {
  padding: 9px 18px;
  background: #f0f3f8;
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  color: var(--text);
  transition: all .2s;
}
.ssc-tab:hover { border-color: var(--primary); color: var(--primary); }
.ssc-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }

.ssc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: start;
}

.ssc-inputs { display: flex; flex-direction: column; gap: 4px; }

.ssc-results {
  background: #f8f9fa;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}

.ssc-res-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 4px;
  border-bottom: 1px solid #eaeaea;
  font-size: 13.5px;
}
.ssc-res-row span { color: var(--muted); }
.ssc-res-row strong { color: var(--text); font-size: 14.5px; }

.ssc-res-highlight { background: rgba(0,145,57,.07); border-radius: 6px; padding-left: 10px; padding-right: 10px; }
.ssc-res-highlight strong { color: var(--primary); }

.ssc-res-total {
  border-bottom: none;
  margin-top: 6px;
  padding: 14px 10px;
  background: var(--dark);
  border-radius: 8px;
}
.ssc-res-total span { color: rgba(255,255,255,.7); }
.ssc-res-total strong { color: var(--accent); font-size: 18px; font-weight: 800; }

.ssc-cta {
  width: 100%;
  justify-content: center;
  margin-top: 18px;
  background: #25D366;
  box-shadow: 0 4px 14px rgba(37,211,102,.35);
}
.ssc-cta:hover { background: #1da851; }

.ssc-disclaimer {
  margin-top: 26px;
  padding: 14px 16px;
  background: #fff8e1;
  border: 1px solid #ffe082;
  border-radius: 8px;
  font-size: 12.5px;
  color: #6c5a00;
  line-height: 1.7;
}
.ssc-disclaimer a { color: var(--primary-d); font-weight: 600; }

@media (max-width: 768px) {
  .ssc-grid { grid-template-columns: 1fr; }
}

/* ── PRINT STYLES ────────────────────────────────── */
@media print {
  .noy-header, .noy-footer, .sq-actions, .sq-add-row, .sq-preset-bar,
  .sq-del-btn, .cu-toolbar, .cu-form, .cd-actions, .noy-hero, .noy-dashboard,
  .noy-features { display: none !important; }

  body { background: #fff; }
  .noy-main { padding: 0; }
  .container { max-width: 100%; padding: 0; }

  .sq-header { -webkit-print-color-adjust: exact; print-color-adjust: exact; border-radius: 0; }
  .sq-stbl-total td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  .sq-tbl td input, .sq-tbl td select,
  .sq-field input, .sq-field select, .sq-field textarea,
  .sq-meta-row input {
    border: none !important;
    padding: 2px !important;
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
  }

  @page { margin: 15mm; }
}

/* ── RESPONSIVE ──────────────────────────────────── */
@media (max-width: 768px) {
  .sq-from-to { grid-template-columns: 1fr; }
  .sq-spec-grid { grid-template-columns: 1fr 1fr; }
  .sq-summary-wrap { flex-direction: column; }
  .sq-sig-row { grid-template-columns: 1fr; }
  .cd-grid, .cu-form-grid { grid-template-columns: 1fr; }
  .cd-field--full { grid-column: 1; }
  .cu-stats { grid-template-columns: repeat(2, 1fr); }
  .sq-preset-bar { flex-wrap: wrap; }
}

@media (max-width: 480px) {
  .sq-spec-grid { grid-template-columns: 1fr; }
  .cu-stats { grid-template-columns: 1fr 1fr; }
  .noy-hero-stats { grid-template-columns: repeat(2,1fr); }
}

/* ══════════════════════════════════════════════════════════════════════
   PROJECT MANAGEMENT SYSTEM  (prefix: pms-)
   ══════════════════════════════════════════════════════════════════════ */
.pms { padding: 24px 0 60px; }

.pms-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}
.pms-header-icon {
  width: 54px; height: 54px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,145,57,.3);
  flex-shrink: 0;
}
.pms-header-title { font-size: 24px; font-weight: 800; color: var(--dark); line-height: 1.2; }
.pms-header-sub   { font-size: 13px; color: var(--muted); }
.pms-header-actions { margin-left: auto; display: flex; gap: 10px; }

.pms-btn {
  border: none; cursor: pointer; font-family: inherit;
  font-size: 13.5px; font-weight: 700;
  padding: 10px 18px; border-radius: 8px;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all .2s;
}
.pms-btn-primary { background: linear-gradient(135deg, var(--primary), #3DAE49); color: #fff; box-shadow: 0 4px 14px rgba(0,145,57,.3); }
.pms-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 7px 20px rgba(0,145,57,.4); }
.pms-btn-secondary { background: #fff; color: var(--text); border: 1px solid var(--border); }
.pms-btn-secondary:hover { background: #f4f6f9; }
.pms-btn-danger { background: var(--danger); color: #fff; }
.pms-btn-ghost  { background: transparent; color: var(--muted); border: 1px solid var(--border); }

/* Stats strip */
.pms-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
.pms-stat {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: var(--shadow);
}
.pms-stat-num { font-size: 22px; font-weight: 800; color: var(--dark); line-height: 1; }
.pms-stat-num.is-paid { color: var(--success); }
.pms-stat-num.is-due  { color: var(--danger); }
.pms-stat-lbl { font-size: 12px; color: var(--muted); margin-top: 6px; }

/* Board */
.pms-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.pms-col {
  background: #eceff4;
  border: 1px solid #e2e6ec;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  min-height: 200px;
}
.pms-col.is-drop { outline: 2px dashed var(--primary); outline-offset: -4px; background: #fff4ec; }

.pms-col-head {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 14px 10px;
  font-size: 13px; font-weight: 800;
  color: var(--dark);
  border-top: 4px solid var(--col-color, var(--primary));
  border-radius: 14px 14px 0 0;
}
.pms-col-head .pms-col-count {
  margin-left: auto;
  background: var(--col-color, var(--primary));
  color: #fff;
  font-size: 11px; font-weight: 700;
  min-width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 7px; border-radius: 20px;
}
.pms-col-body {
  padding: 10px;
  display: flex; flex-direction: column; gap: 10px;
  flex: 1;
}
.pms-col-empty { font-size: 12px; color: #9aa3af; text-align: center; padding: 18px 8px; }

/* Card */
.pms-card {
  background: #fff;
  border: 1px solid #e3e7ee;
  border-left: 4px solid var(--col-color, var(--primary));
  border-radius: 10px;
  padding: 12px 12px 10px;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
  transition: box-shadow .2s, transform .12s;
}
.pms-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.pms-card.is-dragging { opacity: .5; }

.pms-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pms-card-name { font-size: 14px; font-weight: 700; color: var(--dark); }
.pms-card-quote { font-size: 11px; color: var(--muted); font-weight: 600; }
.pms-card-meta { font-size: 11.5px; color: var(--muted); margin: 3px 0 8px; }

.pms-card-amts { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 6px; }
.pms-card-amts .pms-paid { color: var(--success); font-weight: 700; }
.pms-card-amts .pms-due  { color: var(--danger);  font-weight: 700; }

.pms-bar { height: 6px; background: #eceff4; border-radius: 6px; overflow: hidden; }
.pms-bar-fill { height: 100%; background: linear-gradient(90deg, var(--success), #2ecc71); border-radius: 6px; transition: width .3s; }

.pms-card-foot { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.pms-card-total { font-size: 13px; font-weight: 800; color: var(--dark); }
.pms-move { margin-left: auto; display: flex; gap: 4px; }
.pms-move button {
  border: 1px solid var(--border); background: #fff; color: var(--muted);
  width: 26px; height: 26px; border-radius: 6px; cursor: pointer;
  font-size: 13px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
.pms-move button:hover:not(:disabled) { background: var(--primary); color: #fff; border-color: var(--primary); }
.pms-move button:disabled { opacity: .3; cursor: not-allowed; }
.pms-paid-badge { font-size: 10px; font-weight: 700; color: var(--success); background: #e7f7ee; padding: 2px 7px; border-radius: 10px; }

/* Modal */
.pms-modal {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(10,12,25,.55);
  display: none; align-items: center; justify-content: center;
  padding: 20px;
}
.pms-modal.open { display: flex; }
.pms-modal-box {
  background: #fff; border-radius: 16px;
  width: 100%; max-width: 480px;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.pms-modal-head {
  background: linear-gradient(135deg, var(--dark), var(--navy));
  color: #fff; padding: 18px 20px;
  border-radius: 16px 16px 0 0;
  display: flex; align-items: flex-start; gap: 10px;
}
.pms-modal-head h3 { font-size: 17px; font-weight: 800; }
.pms-modal-head .pms-modal-quote { font-size: 12px; color: rgba(255,255,255,.7); margin-top: 2px; }
.pms-modal-close { margin-left: auto; background: rgba(255,255,255,.12); color: #fff; border: none; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 16px; }
.pms-modal-close:hover { background: rgba(255,255,255,.25); }
.pms-modal-body { padding: 20px; }

.pms-fin {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 10px;
  margin-bottom: 16px;
}
.pms-fin-box { background: #f4f6f9; border-radius: 10px; padding: 12px; text-align: center; }
.pms-fin-box .v { font-size: 17px; font-weight: 800; color: var(--dark); }
.pms-fin-box.paid .v { color: var(--success); }
.pms-fin-box.due  .v { color: var(--danger); }
.pms-fin-box .l { font-size: 11px; color: var(--muted); margin-top: 3px; }

.pms-field { margin-bottom: 12px; }
.pms-field label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.pms-field input, .pms-field select, .pms-field textarea {
  width: 100%; padding: 10px 12px; font-size: 14px; font-family: inherit;
  border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--text);
}
.pms-field input:focus, .pms-field select:focus, .pms-field textarea:focus { outline: none; border-color: var(--primary); }
.pms-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.pms-sec-title { font-size: 13px; font-weight: 800; color: var(--dark); margin: 16px 0 8px; }
.pms-pay-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.pms-pay-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; background: #f4f6f9; padding: 8px 10px; border-radius: 8px; }
.pms-pay-row .amt { font-weight: 700; color: var(--success); }
.pms-pay-row .note { color: var(--muted); flex: 1; }
.pms-pay-row .date { color: var(--muted); font-size: 11px; }
.pms-pay-row .del { background: none; border: none; color: var(--danger); cursor: pointer; font-size: 13px; }
.pms-pay-empty { font-size: 12px; color: var(--muted); }

.pms-add-pay { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end; }
.pms-modal-foot { display: flex; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid #eee; }

@media (max-width: 1024px) { .pms-board { grid-template-columns: repeat(2, minmax(0,1fr)); } .pms-stats { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px)  { .pms-board { grid-template-columns: 1fr; } .pms-add-pay { grid-template-columns: 1fr; } .pms-fin { grid-template-columns: 1fr; } }

@media print { .pms { display: none !important; } }

/* ══════════════════════════════════════════════════════════════════════
   ABOUT US PAGE   (prefix: ab-)
   ══════════════════════════════════════════════════════════════════════ */

.ab-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--sp-8); align-items: center; padding: 24px 0 var(--sp-6); }

/* ── Hand-built "solar rooftop" illustration -- no stock photos, matches
   the site's existing shape/icon visual language (see .nx-collage). ── */
.ab-illustration { position: relative; height: 440px; }
.ab-illu-card {
  position: absolute; inset: 0; border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--e-lg);
  transform: perspective(1000px) rotateY(-6deg) rotateX(2deg);
}
.ab-illu-sky { position: absolute; inset: 0; background: linear-gradient(165deg, var(--navy) 0%, var(--primary-d) 55%, var(--gold-d) 135%); }
.ab-illu-sun {
  position: absolute; top: 13%; right: 15%; width: 84px; height: 84px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, var(--accent) 60%, transparent 72%);
  animation: ab-sun-glow 4s ease-in-out infinite;
}
@keyframes ab-sun-glow {
  0%, 100% { box-shadow: 0 0 40px 8px rgba(255,199,0,.4); }
  50%      { box-shadow: 0 0 62px 16px rgba(255,199,0,.62); }
}

.ab-illu-panel-array {
  position: absolute; left: 9%; right: 9%; bottom: 16%;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
  transform: rotateX(50deg) rotateZ(-3deg); transform-origin: bottom center;
}
.ab-illu-cell {
  aspect-ratio: 1 / .62; border-radius: 3px; position: relative; overflow: hidden;
  background: linear-gradient(155deg, #1b2a4a, var(--dark));
  border: 1px solid rgba(255,255,255,.16);
}
.ab-illu-cell::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.22) 48%, transparent 62%);
  background-size: 240% 240%;
  animation: ab-cell-glint 5.5s linear infinite;
  animation-delay: calc(var(--d, 0) * .35s);
}
@keyframes ab-cell-glint { from { background-position: -130% -130%; } to { background-position: 130% 130%; } }

.ab-illu-roofline { position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: linear-gradient(180deg, transparent, rgba(10,20,40,.9)); }

.ab-illu-logo { position: absolute; z-index: 2; width: 46px; height: auto; bottom: 16px; left: 16px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.4)); }

.ab-illu-badge {
  position: absolute; z-index: 2;
  background: #fff; border-radius: var(--r-md); box-shadow: var(--e-md);
  padding: 14px 18px; display: flex; align-items: center; gap: 10px;
  animation: nx-float 5s ease-in-out infinite;
}
.ab-illu-badge .ic { width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--primary-l); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ab-illu-badge .ic svg { width: 18px; height: 18px; }
.ab-illu-badge .v { font-family: var(--font-display); font-size: 19px; font-weight: 800; color: var(--ink-900); line-height: 1; }
.ab-illu-badge .l { font-size: 10.5px; color: var(--ink-500); margin-top: 3px; }
.ab-illu-badge--years    { top: -16px; left: -14px; }
.ab-illu-badge--projects { bottom: -16px; right: -12px; animation-delay: -2.4s; }

@media (max-width: 960px) {
  .ab-hero-grid { grid-template-columns: 1fr; }
  .ab-illustration { max-width: 480px; margin: 0 auto; }
}
@media (max-width: 560px) {
  .ab-illu-card { transform: none; }
  .ab-illu-panel-array { transform: rotateX(38deg); }
  .ab-illu-badge { padding: 10px 14px; }
  .ab-illu-badge .v { font-size: 16px; }
}

/* ── Mission & Vision -- bold gradient panels with icon watermark ─── */
.ab-mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); max-width: 980px; margin: 0 auto; }
.ab-mv-card {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  padding: var(--sp-7) var(--sp-6) var(--sp-6);
  min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end;
  color: #fff; box-shadow: var(--e-md);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.ab-mv-card:hover { transform: translateY(-6px); box-shadow: var(--e-lg); }

.ab-mv-card--vision  { background: linear-gradient(150deg, var(--dark) 0%, var(--navy) 60%, #1c3f7a 130%); }
.ab-mv-card--mission { background: linear-gradient(150deg, var(--primary-d) 0%, var(--primary) 55%, #00c853 130%); }

/* Soft drifting glow -- echoes the CTA banner's aurora treatment */
.ab-mv-card::after {
  content: ''; position: absolute; width: 240px; height: 240px; border-radius: 50%;
  top: -80px; right: -60px; filter: blur(50px); opacity: .5; pointer-events: none;
  animation: ab-mv-drift 9s ease-in-out infinite;
}
.ab-mv-card--vision::after  { background: radial-gradient(circle, #3a6fd8, transparent 70%); }
.ab-mv-card--mission::after { background: radial-gradient(circle, var(--accent), transparent 70%); animation-delay: -3.5s; }
@keyframes ab-mv-drift { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-24px, 18px) scale(1.15); } }

.ab-mv-watermark {
  position: absolute; top: -22px; right: -18px; width: 190px; height: 190px;
  opacity: .1; pointer-events: none;
}
.ab-mv-watermark svg { width: 100%; height: 100%; }

.ab-mv-ic {
  position: relative; z-index: 1; width: 52px; height: 52px; border-radius: var(--r-sm);
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.26); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-5);
}
.ab-mv-ic svg { width: 26px; height: 26px; }

.ab-mv-eyebrow { position: relative; z-index: 1; font-family: var(--font-display); font-size: 11px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; opacity: .78; margin-bottom: 8px; }
.ab-mv-card h3 { position: relative; z-index: 1; font-size: 23px; font-weight: 800; margin-bottom: 10px; }
.ab-mv-card p { position: relative; z-index: 1; font-size: 13.5px; line-height: 1.8; opacity: .92; max-width: 380px; }

@media (max-width: 760px) {
  .ab-mv-grid { grid-template-columns: 1fr; }
  .ab-mv-card { min-height: 0; }
}

/* ── Core values -- staggered "wall" of cards ─────────────────────── */
.ab-values-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.ab-value-card {
  background: #fff; border: 1px solid var(--ink-150); border-radius: var(--r-md);
  padding: var(--sp-5); transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.ab-values-wall > .ab-value-card:nth-child(2n) { margin-top: var(--sp-6); }
.ab-value-card:hover { transform: translateY(-5px); box-shadow: var(--e-md); }
.ab-value-num { font-family: var(--font-display); font-size: 12px; font-weight: 800; color: var(--ink-300); letter-spacing: 1px; margin-bottom: 10px; }
.ab-value-ic { width: 44px; height: 44px; border-radius: 50%; background: var(--primary-l); color: var(--primary); display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-4); }
.ab-value-ic svg { width: 21px; height: 21px; }
.ab-value-card h3 { font-size: 15.5px; font-weight: 700; color: var(--ink-900); margin-bottom: 6px; }
.ab-value-card p { font-size: 12.5px; color: var(--ink-500); line-height: 1.75; }

@media (max-width: 900px) {
  .ab-values-wall { grid-template-columns: 1fr 1fr; }
  .ab-values-wall > .ab-value-card:nth-child(2n) { margin-top: 0; }
  .ab-values-wall > .ab-value-card:nth-child(odd) { margin-top: var(--sp-6); }
}
@media (max-width: 600px) {
  .ab-values-wall { grid-template-columns: 1fr; }
  .ab-values-wall > .ab-value-card { margin-top: 0 !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   OUR PRODUCTS — public catalog page   (prefix: pd-)
   ══════════════════════════════════════════════════════════════════════ */

.pd-hero-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5);
  max-width: 760px; margin: var(--sp-7) auto 0;
  padding-top: var(--sp-6); border-top: 1px solid var(--ink-150);
}
.pd-hero-stat { text-align: center; }
.pd-hero-stat .n { font-family: var(--font-display); font-size: 26px; font-weight: 800; color: var(--primary); line-height: 1; }
.pd-hero-stat .l { font-size: 11.5px; color: var(--ink-500); margin-top: 6px; }

/* ── Filter tabs ─────────────────────────────────────────────────── */
.pd-tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: var(--sp-6); }
.pd-tab {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; border: 1px solid var(--ink-300); color: var(--ink-700);
  padding: 9px 17px; border-radius: var(--r-full);
  font-family: var(--font-display); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all .2s;
}
.pd-tab svg { width: 15px; height: 15px; }
.pd-tab:hover { border-color: var(--primary); color: var(--primary); }
.pd-tab.active { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 6px 16px rgba(0,145,57,.25); }

/* ── Product grid & cards ───────────────────────────────────────── */
.pd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-5); }

.pd-card {
  background: #fff; border: 1px solid var(--ink-150); border-radius: var(--r-md);
  padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.pd-card:hover { transform: translateY(-4px); box-shadow: var(--e-md); }

.pd-card-top { display: flex; align-items: center; gap: 8px; }
.pd-card-icon {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: var(--r-sm);
  background: var(--primary-l); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
}
.pd-card-icon svg { width: 18px; height: 18px; }
.pd-card-cat { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-500); flex: 1; }
.pd-card-tag {
  background: var(--accent-l); color: var(--gold-d); border: 1px solid rgba(201,148,0,.25);
  font-size: 10.5px; font-weight: 700; padding: 3px 10px; border-radius: var(--r-full); white-space: nowrap;
}

.pd-card-title { font-size: 16.5px; font-weight: 700; color: var(--ink-900); line-height: 1.3; }
.pd-card-desc { font-size: 13px; color: var(--ink-500); line-height: 1.7; flex: 1; }

.pd-card-brands { display: flex; flex-direction: column; gap: 6px; }
.pd-card-brands-lbl { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-500); }
.pd-card-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pd-card-chips span { background: var(--ink-100); color: var(--ink-700); font-size: 11px; font-weight: 500; padding: 4px 10px; border-radius: var(--r-full); }

.pd-card-actions { display: flex; gap: 8px; margin-top: 4px; padding-top: var(--sp-3); border-top: 1px solid var(--ink-150); }
.pd-card-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 12px; border-radius: var(--r-sm);
  font-family: var(--font-display); font-size: 12.5px; font-weight: 700;
  text-decoration: none; transition: all .2s; border: 1.5px solid transparent;
}
.pd-card-btn svg { width: 14px; height: 14px; }
.pd-card-btn--wa { background: #25D366; color: #fff; }
.pd-card-btn--wa:hover { background: #1da851; color: #fff; }
.pd-card-btn--outline { background: #fff; border-color: var(--ink-300); color: var(--ink-900); }
.pd-card-btn--outline:hover { border-color: var(--primary); color: var(--primary); }

.pd-empty { text-align: center; color: var(--ink-500); font-size: 14px; padding: var(--sp-6) 0 0; }

/* ── Brand strip ─────────────────────────────────────────────────── */
.pd-brandstrip { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 900px; margin: 0 auto; }
.pd-brandstrip span {
  background: var(--ink-100); border: 1px solid var(--ink-150); color: var(--ink-700);
  font-family: var(--font-display); font-size: 12.5px; font-weight: 700;
  padding: 9px 18px; border-radius: var(--r-full); transition: all .2s;
}
.pd-brandstrip span:hover { background: var(--primary-l); border-color: rgba(0,145,57,.25); color: var(--primary-d); }

@media (max-width: 700px) {
  .pd-hero-stats { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5) var(--sp-4); }
  .pd-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════
   GET QUOTATION — public instant-quote page   (prefix: gq-)
   Reuses .ssc-* (subsidy calculator chrome) wholesale -- it's the same
   "type a number, see an estimate, contact us" shape as the Subsidy
   Calculator, just driven by system size instead of a bill amount.
   ══════════════════════════════════════════════════════════════════════ */