:root {
      /* Dark theme: lifted from near-black for softer default (body / bands / cards stay stepped) */
      --brand-dark:    #141920;
      --brand-surface: #1a212e;
      --brand-card:    #232b3a;
      --brand-border:  rgba(255,255,255,0.09);
      --coral:   #E05062;
      --teal:    #44ABB6;
      --amber:   #FDC446;
      --charcoal:#3E464C;
      --text-primary: #F0F2F7;
      --text-muted:   rgba(240,242,247,0.58);
    }

    * { box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
      background: var(--brand-dark);
      color: var(--text-primary);
      font-family: 'DM Sans', sans-serif;
      -webkit-font-smoothing: antialiased;
    }

    h1, h2, h3, h4, .display {
      font-family: 'Bricolage Grotesque', sans-serif;
    }

    /* ---- NOISE OVERLAY ---- */
    body::before {
      content: '';
      position: fixed; inset: 0; z-index: 0; pointer-events: none;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
      opacity: 0.028;
    }

    /* ---- NAV ---- */
    #navbar {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      background: rgba(20,25,32,0.72);
      backdrop-filter: blur(18px) saturate(1.6);
      border-bottom: 1px solid var(--brand-border);
      transition: background 0.3s;
    }
    #navbar.scrolled { background: rgba(20,25,32,0.96); }

    .nav-pill {
      font-size: 0.8rem; font-weight: 500;
      color: var(--text-muted);
      padding: 6px 14px; border-radius: 100px;
      transition: color 0.2s, background 0.2s;
    }
    .nav-pill:hover { color: var(--text-primary); background: rgba(255,255,255,0.07); }

    /* Index: Sectors dropdown (desktop) */
    .nav-sectors-wrap {
      position: relative;
    }
    button.nav-sectors-trigger {
      border: none;
      background: transparent;
      cursor: pointer;
      font-family: inherit;
      font-size: 0.8rem;
      font-weight: 500;
      line-height: 1.2;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .nav-sectors-caret {
      flex-shrink: 0;
      font-size: 1.05rem;
      line-height: 1;
      opacity: 0.88;
      transform: translateY(2px);
    }
    .nav-sectors-panel {
      position: absolute;
      top: calc(100% + 10px);
      left: 0;
      min-width: 248px;
      padding: 8px;
      background: var(--brand-card);
      border: 1px solid var(--brand-border);
      border-radius: 16px;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
      z-index: 200;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-6px);
      transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
      pointer-events: none;
    }
    .nav-sectors-wrap:hover .nav-sectors-panel,
    .nav-sectors-wrap:focus-within .nav-sectors-panel,
    .nav-sectors-wrap.is-open .nav-sectors-panel {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      pointer-events: auto;
    }
    .nav-sectors-link {
      display: block;
      padding: 10px 12px;
      border-radius: 10px;
      font-size: 0.78rem;
      font-weight: 500;
      color: var(--text-muted);
      text-decoration: none;
      transition: background 0.15s, color 0.15s;
    }
    .nav-sectors-link:hover {
      color: var(--text-primary);
      background: rgba(255, 255, 255, 0.07);
    }
    [data-theme="light"] .nav-sectors-link:hover {
      background: rgba(0, 0, 0, 0.06);
    }
    .nav-sectors-link--overview {
      font-size: 0.74rem;
      opacity: 0.9;
    }
    .nav-sectors-link--agro { color: #4AC864 !important; }
    .nav-sectors-link--health { color: var(--coral) !important; }
    .nav-sectors-link--legal { color: var(--amber) !important; }
    .nav-sectors-link--edu { color: var(--teal) !important; }

    .nav-cta {
      background: var(--coral); color: #fff;
      font-size: 0.8rem; font-weight: 600;
      padding: 8px 20px; border-radius: 100px;
      transition: opacity 0.2s, transform 0.2s;
    }
    .nav-cta:hover { opacity: 0.88; transform: translateY(-1px); }

    /* ---- NAV BRAND: mark + legal name (horizontal) ---- */
    .nav-brand-link {
      display: flex;
      align-items: center;
      gap: 12px;
      flex: 1;
      min-width: 0;
      text-decoration: none;
      line-height: 1.2;
      padding-right: 8px;
    }
    .nav-brand-mark {
      width: 72px;
      height: 72px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
    }
    .nav-brand-mark .zf-logo { width: 100%; height: 100%; }
    .nav-brand-name {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 700;
      font-size: clamp(0.52rem, 1.85vw, 0.72rem);
      letter-spacing: 0.06em;
      color: var(--text-primary);
      text-transform: uppercase;
      text-align: left;
      /* Hidden in “mid” widths where inline nav + long name collide */
      display: none;
    }
    /* Desktop: full nav + room for legal name */
    @media (min-width: 1280px) {
      .nav-brand-name {
        display: block;
      }
    }
    /* Mobile (hamburger): show beside logo; pills are in the drawer */
    @media (max-width: 767px) {
      .nav-brand-name {
        display: block;
        flex: 1;
        min-width: 0;
        font-size: clamp(0.42rem, 2.5vw, 0.62rem);
        line-height: 1.15;
        letter-spacing: 0.04em;
        overflow-wrap: anywhere;
      }
    }
    [data-theme="light"] .nav-brand-name { color: #0D0F14; }
    .nav-toolbar-right { flex-shrink: 0; }

    .footer-brand-mark {
      width: 56px;
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      border-radius: 8px;
    }
    .footer-brand-mark .logo-wordmark { display: none !important; }
    .footer-brand-row {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 16px;
      flex-wrap: nowrap;
      min-width: 0;
      max-width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
    }
    .footer-brand-name {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 700;
      font-size: clamp(0.52rem, 2.85vw, 0.92rem);
      letter-spacing: 0.04em;
      line-height: 1.2;
      color: var(--text-primary);
      text-transform: uppercase;
      white-space: nowrap;
      flex-shrink: 0;
    }
    [data-theme="light"] .footer-brand-name { color: #0D0F14; }

    /* About card: logo + legal name one row; location below */
    .about-card-brand-head {
      width: 100%;
      margin-bottom: 24px;
    }
    .about-card-brand-row1 {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
      min-width: 0;
      margin-bottom: 10px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
    }
    .about-card-brand-mark {
      width: 56px;
      height: 56px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
    }
    .about-card-brand-mark .logo-wordmark { display: none !important; }
    .about-card-brand-title {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 700;
      color: var(--text-primary);
      font-size: clamp(0.52rem, 2.35vw, 1.15rem);
      line-height: 1.2;
      white-space: nowrap;
      text-align: left;
      flex-shrink: 0;
    }
    .about-card-brand-sub {
      font-size: 0.82rem;
      color: var(--text-muted);
      line-height: 1.4;
      text-align: center;
    }

    .about-mvg-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-top: 4px;
    }
    .about-mvg-card {
      background: var(--brand-card);
      border: 1px solid var(--brand-border);
      border-radius: 14px;
      padding: 20px;
      height: 100%;
    }
    .about-mvg-label {
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      margin-bottom: 10px;
    }
    .about-mvg-text {
      margin: 0;
      color: var(--text-muted);
      font-size: 0.88rem;
      line-height: 1.65;
    }

    .about-section-inner {
      width: 100%;
      max-width: 100%;
    }

    @media (max-width: 420px) {
      .nav-brand-mark { width: 56px; height: 56px; }
      .nav-brand-link { gap: 8px; padding-right: 4px; }
      .nav-brand-name { letter-spacing: 0.04em; }
    }

    /* ---- HERO ---- */
    #hero {
      min-height: 100vh;
      display: flex; align-items: center;
      position: relative; overflow: hidden;
      padding: 120px 0 80px;
    }

    .hero-glow {
      position: absolute; border-radius: 50%; filter: blur(120px);
      pointer-events: none;
    }
    .glow-coral { width: 600px; height: 600px; background: rgba(224,80,98,0.13); top: -100px; right: -100px; }
    .glow-teal  { width: 500px; height: 500px; background: rgba(68,171,182,0.10); bottom: -100px; left: -100px; }
    .glow-amber { width: 300px; height: 300px; background: rgba(253,196,70,0.07); top: 40%; left: 35%; }

    .hero-grid-line {
      position: absolute; opacity: 0.04;
      background: linear-gradient(to bottom, transparent, #fff 40%, transparent);
      width: 1px; top: 0; bottom: 0;
    }

    .eyebrow {
      display: inline-flex; align-items: center; gap: 8px;
      background: rgba(68,171,182,0.12);
      border: 1px solid rgba(68,171,182,0.3);
      color: var(--teal);
      font-size: 0.7rem; font-weight: 600;
      letter-spacing: 0.12em; text-transform: uppercase;
      padding: 6px 14px; border-radius: 100px;
    }
    .eyebrow-dot { width: 6px; height: 6px; background: var(--teal); border-radius: 50%; animation: pulse 2s infinite; }
    @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(0.8)} }

    .hero-title {
      font-size: clamp(2.6rem, 6vw, 5rem);
      font-weight: 800;
      line-height: 1.05;
      letter-spacing: -0.02em;
    }
    .hero-title .accent-coral { color: var(--coral); }
    .hero-title .accent-teal  { color: var(--teal); }

    /* ---- PILL TAGS (hero sector chips — dark: visible surface vs page bg) ---- */
    .sector-tag {
      display: inline-flex; align-items: center; gap: 6px;
      background: rgba(255, 255, 255, 0.07);
      border: 1px solid rgba(255, 255, 255, 0.14);
      color: var(--text-muted);
      font-size: 0.75rem; font-weight: 500;
      padding: 6px 14px; border-radius: 100px;
      transition: border-color 0.2s, color 0.2s, background 0.2s, box-shadow 0.2s;
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 2px 10px rgba(0, 0, 0, 0.28);
    }
    a.sector-tag {
      color: var(--text-muted);
      text-decoration: none;
    }
    .sector-tag:hover {
      background: rgba(255, 255, 255, 0.1);
      border-color: rgba(68, 171, 182, 0.42);
      color: var(--teal);
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 4px 14px rgba(0, 0, 0, 0.35);
    }
    .sector-icon { font-size: 0.9rem; }

    /* ---- STAT STRIP ---- */
    .stat-strip {
      background: var(--brand-card);
      border: 1px solid var(--brand-border);
      border-radius: 16px;
    }
    .stat-divider { width: 1px; background: var(--brand-border); align-self: stretch; margin: 8px 0; }

    /* ---- SECTION TITLES ---- */
    .section-label {
      font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em;
      text-transform: uppercase; color: var(--teal);
    }
    .section-title {
      font-size: clamp(1.8rem, 3.5vw, 2.8rem);
      font-weight: 800; letter-spacing: -0.02em;
      color: var(--text-primary);
    }

    /* ---- SECTOR CARDS ---- */
    .sector-card {
      background: var(--brand-card);
      border: 1px solid var(--brand-border);
      border-radius: 20px;
      padding: 32px;
      transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
      position: relative; overflow: hidden;
    }
    .sector-card::before {
      content: ''; position: absolute; inset: 0; border-radius: 20px;
      background: radial-gradient(circle at 20% 20%, rgba(68,171,182,0.05) 0%, transparent 60%);
      opacity: 0; transition: opacity 0.4s;
    }
    .sector-card:hover { border-color: rgba(68,171,182,0.35); transform: translateY(-4px); box-shadow: 0 24px 60px rgba(0,0,0,0.4); }
    .sector-card:hover::before { opacity: 1; }

    .sector-card.coral:hover { border-color: rgba(224,80,98,0.35); }
    .sector-card.coral::before { background: radial-gradient(circle at 20% 20%, rgba(224,80,98,0.06) 0%, transparent 60%); }
    .sector-card.amber:hover { border-color: rgba(253,196,70,0.35); }
    .sector-card.amber::before { background: radial-gradient(circle at 20% 20%, rgba(253,196,70,0.05) 0%, transparent 60%); }
    /* Legal sector overview (index) — distinct from generic amber manufacturing card */
    .sector-card.zflegal:hover { border-color: rgba(253,196,70,0.4); }
    .sector-card.zflegal::before { background: radial-gradient(circle at 20% 20%, rgba(253,196,70,0.08) 0%, transparent 60%); }
    /* Agro sector overview (index) */
    .sector-card.zfagro:hover { border-color: rgba(74,200,100,0.45); }
    .sector-card.zfagro::before { background: radial-gradient(circle at 20% 20%, rgba(74,200,100,0.1) 0%, transparent 60%); }

    .sector-icon-box {
      width: 52px; height: 52px; border-radius: 14px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.4rem; margin-bottom: 20px;
      flex-shrink: 0;
    }
    .icon-teal  { background: rgba(68,171,182,0.15); }
    .icon-coral { background: rgba(224,80,98,0.15); }
    .icon-amber { background: rgba(253,196,70,0.12); }
    .icon-green { background: rgba(74,200,100,0.12); }

    .chip {
      display: inline-block;
      font-size: 0.68rem; font-weight: 600;
      padding: 3px 10px; border-radius: 100px;
      margin: 3px 2px;
    }
    .chip-teal  { background: rgba(68,171,182,0.15); color: var(--teal); }
    .chip-coral { background: rgba(224,80,98,0.15);  color: var(--coral); }
    .chip-amber { background: rgba(253,196,70,0.12); color: var(--amber); }
    .chip-green { background: rgba(74,200,100,0.12); color: #4AC864; }

    /* ---- TECH CAPABILITIES ---- */
    .tech-row {
      display: flex; align-items: flex-start; gap: 20px;
      background: var(--brand-card);
      border: 1px solid var(--brand-border);
      border-radius: 16px; padding: 24px 28px;
      transition: border-color 0.25s, transform 0.25s;
    }
    .tech-row:hover { border-color: rgba(253,196,70,0.3); transform: translateX(4px); }

    .tech-num {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 0.7rem; font-weight: 700; color: var(--text-muted);
      min-width: 28px; margin-top: 2px;
    }

    /* ---- HOW WE WORK ---- */
    .step-card {
      position: relative;
      background: var(--brand-card);
      border: 1px solid var(--brand-border);
      border-radius: 20px; padding: 32px;
    }
    .step-number {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-size: 3.5rem; font-weight: 800;
      line-height: 1; opacity: 0.08;
      position: absolute; top: 20px; right: 24px;
      color: var(--text-primary);
    }

    /* ---- REVEAL ANIMATION ---- */
    .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.65s ease, transform 0.65s ease; }
    .reveal.visible { opacity: 1; transform: translateY(0); }
    .reveal-left { opacity: 0; transform: translateX(-30px); transition: opacity 0.65s ease, transform 0.65s ease; }
    .reveal-left.visible { opacity: 1; transform: translateX(0); }

    /* Platform intro: sticky on wide screens only (sticky + transform breaks mobile scroll) */
    .platform-intro-col {
      position: sticky;
      top: 100px;
      align-self: start;
    }
    @media (max-width: 768px) {
      #platform .platform-intro-col {
        position: static;
        top: auto;
      }
      #platform .reveal-left {
        transform: none;
        transition: opacity 0.65s ease;
      }
      #platform .reveal-left.visible {
        transform: none;
      }
    }

    /* ---- MOBILE MENU ---- */
    #mobile-menu { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.4s ease, opacity 0.3s ease; }
    #mobile-menu.open { max-height: 500px; opacity: 1; }

    /* ---- CONTACT FORM ---- */
    .form-input {
      width: 100%;
      background: var(--brand-card);
      border: 1px solid var(--brand-border);
      border-radius: 10px; padding: 12px 16px;
      font-size: 0.875rem; color: var(--text-primary);
      font-family: 'DM Sans', sans-serif;
      transition: border-color 0.2s;
      outline: none;
    }
    .form-input:focus { border-color: rgba(68,171,182,0.5); }
    .form-input::placeholder { color: var(--text-muted); }
    .form-input option { background: var(--brand-card); }
    .form-label { font-size: 0.8rem; font-weight: 500; color: var(--text-muted); margin-bottom: 6px; display: block; }

    .zf-honeypot {
      position: absolute;
      left: -9999px;
      width: 1px;
      height: 1px;
      overflow: hidden;
      pointer-events: none;
    }
    .zf-recaptcha-host {
      min-height: 78px;
      display: flex;
      align-items: flex-start;
      flex-wrap: wrap;
    }
    .zf-recaptcha-host iframe {
      max-width: 100%;
    }
    .zf-enquiry-privacy {
      font-size: 0.75rem;
      color: var(--text-muted);
      line-height: 1.55;
      margin: 0 0 12px;
    }
    .zf-enquiry-status {
      font-size: 0.85rem;
      margin-top: 12px;
      line-height: 1.5;
      min-height: 1.2em;
    }
    .zf-enquiry-status--success { color: var(--teal); }
    .zf-enquiry-status--error { color: var(--coral); }
    .zf-enquiry-status--info { color: var(--text-muted); }
    .btn-primary:disabled {
      opacity: 0.65;
      cursor: not-allowed;
      transform: none;
    }
    .btn-primary:disabled:hover { opacity: 0.65; transform: none; }

    /* ---- CTA BUTTON ---- */
    .btn-primary {
      background: var(--coral); color: #fff;
      font-weight: 600; font-size: 0.875rem;
      padding: 13px 28px; border-radius: 100px;
      border: none; cursor: pointer;
      transition: opacity 0.2s, transform 0.2s;
      display: inline-flex; align-items: center; gap: 8px;
    }
    .btn-primary:hover { opacity: 0.88; transform: translateY(-2px); }

    /* Ghost CTA: same frosted chip treatment as .sector-tag (Pharma badge) on dark */
    .btn-ghost {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: rgba(255, 255, 255, 0.07);
      color: var(--text-primary);
      font-weight: 500; font-size: 0.875rem;
      padding: 13px 28px; border-radius: 100px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      cursor: pointer;
      text-decoration: none;
      transition: border-color 0.2s, color 0.2s, background 0.2s, box-shadow 0.2s;
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 2px 10px rgba(0, 0, 0, 0.28);
    }
    .btn-ghost:hover {
      background: rgba(255, 255, 255, 0.1);
      border-color: rgba(68, 171, 182, 0.42);
      color: var(--teal);
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 4px 14px rgba(0, 0, 0, 0.35);
    }

    /* ---- DIVIDER LINE ---- */
    .section-divider { height: 1px; background: var(--brand-border); }

    /* ---- LOGO BOX ---- */
    .logo-box { width: 200px; height: 64px; background: transparent; border: none !important; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: visible; }

    /* ---- LIGHT MODE ---- */
    [data-theme="light"] {
      --brand-dark:    #F4F6FA;
      --brand-surface: #EAECF3;
      --brand-card:    #FFFFFF;
      --brand-border:  rgba(0,0,0,0.08);
      --text-primary: #0D0F14;
      --text-muted:   rgba(13,15,20,0.52);
    }

    [data-theme="light"] body::before { opacity: 0.012; }

    [data-theme="light"] #navbar {
      background: rgba(244,246,250,0.85);
      border-bottom: 1px solid rgba(0,0,0,0.08);
    }
    [data-theme="light"] #navbar.scrolled {
      background: rgba(244,246,250,0.97);
    }

    [data-theme="light"] .nav-pill { color: rgba(13,15,20,0.55); }
    [data-theme="light"] .nav-pill:hover { color: #0D0F14; background: rgba(0,0,0,0.06); }

    [data-theme="light"] .hero-glow.glow-coral { background: rgba(224,80,98,0.10); }
    [data-theme="light"] .hero-glow.glow-teal  { background: rgba(68,171,182,0.09); }
    [data-theme="light"] .hero-glow.glow-amber { background: rgba(253,196,70,0.08); }
    [data-theme="light"] .hero-grid-line { background: linear-gradient(to bottom, transparent, #000 40%, transparent); opacity: 0.04; }

    [data-theme="light"] .stat-strip {
      background: #FFFFFF;
      border: 1px solid rgba(0,0,0,0.08);
      box-shadow: 0 2px 16px rgba(0,0,0,0.06);
    }
    [data-theme="light"] .stat-divider { background: rgba(0,0,0,0.08); }

    [data-theme="light"] .sector-card {
      background: #FFFFFF;
      border: 1px solid rgba(0,0,0,0.08);
      box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    }
    [data-theme="light"] .sector-card:hover {
      box-shadow: 0 16px 48px rgba(0,0,0,0.12);
    }

    [data-theme="light"] .tech-row {
      background: #FFFFFF;
      border: 1px solid rgba(0,0,0,0.08);
      box-shadow: 0 1px 8px rgba(0,0,0,0.04);
    }
    [data-theme="light"] .tech-row:hover {
      border-color: rgba(253,196,70,0.5);
      box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    }

    [data-theme="light"] .step-card {
      background: #FFFFFF;
      border: 1px solid rgba(0,0,0,0.08);
      box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    }
    [data-theme="light"] .step-number { color: #0D0F14; opacity: 0.06; }

    [data-theme="light"] .form-input {
      background: #F8F9FC;
      border: 1px solid rgba(0,0,0,0.12);
      color: #0D0F14;
    }
    [data-theme="light"] .form-input:focus { border-color: rgba(68,171,182,0.6); background: #fff; }
    [data-theme="light"] .form-input::placeholder { color: rgba(13,15,20,0.38); }
    [data-theme="light"] .form-input option { background: #fff; color: #0D0F14; }

    [data-theme="light"] .zf-enquiry-status--error { color: #c43d50; }

    [data-theme="light"] .btn-ghost {
      background: #eef1f6;
      border: 1px solid rgba(0, 0, 0, 0.1);
      color: #0D0F14;
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 1px 3px rgba(0, 0, 0, 0.06);
    }
    [data-theme="light"] .btn-ghost:hover {
      background: #e8ecf4;
      border-color: rgba(68, 171, 182, 0.35);
      color: var(--teal);
    }

    [data-theme="light"] .section-divider { background: rgba(0,0,0,0.07); }

    [data-theme="light"] .eyebrow {
      background: rgba(68,171,182,0.10);
      border: 1px solid rgba(68,171,182,0.25);
    }

    [data-theme="light"] .sector-tag {
      background: #eef1f6;
      border: 1px solid rgba(0, 0, 0, 0.1);
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 1px 3px rgba(0, 0, 0, 0.06);
    }
    [data-theme="light"] .sector-tag:hover {
      background: #e8ecf4;
      border-color: rgba(68, 171, 182, 0.35);
    }
    [data-theme="light"] a.sector-tag {
      color: rgba(13, 15, 20, 0.55);
    }
    [data-theme="light"] a.sector-tag:hover {
      color: var(--teal);
    }

    [data-theme="light"] .logo-box { border: none; }

    [data-theme="light"] #mobile-menu {
      background: #F4F6FA;
      border-top: 1px solid rgba(0,0,0,0.08);
    }

    /* ---- THEME TOGGLE ---- */
    .theme-toggle {
      width: 40px; height: 40px; border-radius: 10px;
      border: 1px solid var(--brand-border);
      background: var(--brand-card);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; transition: border-color 0.2s, background 0.2s, transform 0.15s;
      flex-shrink: 0;
    }
    .theme-toggle:hover { border-color: rgba(68,171,182,0.4); transform: scale(1.05); }
    .theme-toggle svg { transition: opacity 0.2s, transform 0.3s; }

    /* ---- SMOOTH THEME TRANSITIONS ---- */
    body, #navbar, .sector-card, .tech-row, .step-card, .stat-strip, .form-input, .btn-ghost, .sector-tag, .theme-toggle {
      transition-property: background, border-color, color, box-shadow;
      transition-duration: 0.3s;
      transition-timing-function: ease;
    }

    /* ---- NEW LOGO ADAPTIVE FILLS ---- */
    /* Inline fill on SVG paths beats normal CSS — use !important */
    /* Default (dark mode) — primary shapes and wordmark go white */
    .zf-logo .logo-primary   { fill: #ffffff !important; }
    /* Wordmark paths: stroke + fill = heavier “bold” look (not real text) */
    .zf-logo .logo-wordmark {
      fill: #ffffff !important;
      stroke: #ffffff !important;
      stroke-width: 1.35;
      paint-order: stroke fill;
      stroke-linejoin: round;
      stroke-linecap: round;
    }
    .zf-logo .logo-accent-red    { fill: #e05062 !important; }
    .zf-logo .logo-accent-teal   { fill: #44abb6 !important; }
    .zf-logo .logo-accent-yellow { fill: #fdc446 !important; }

    /* Light mode — primary shapes and wordmark go dark charcoal */
    [data-theme="light"] .zf-logo .logo-primary  { fill: #3e464c !important; }
    [data-theme="light"] .zf-logo .logo-wordmark {
      fill: #3e464c !important;
      stroke: #3e464c !important;
    }
    /* accents stay the same in both modes */

    /* Education / Healthcare / Legal / Agro / Real world assets landing heroes */
    #edu-hero,
    #health-hero,
    #legal-hero,
    #agro-hero,
    #ra-hero {
      position: relative;
      overflow: hidden;
      min-height: auto !important;
      padding: 120px 0 72px !important;
    }
    .edu-grid-3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
    @media (max-width: 900px) {
      .edu-grid-3 { grid-template-columns: 1fr !important; }
    }

    /* ZepFusion Skill Exchange brand */
    .zfsx-mark {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 800;
      letter-spacing: -0.03em;
      line-height: 1.08;
      margin-bottom: 12px;
    }
    .zfsx-mark .zfsx-line1 {
      font-size: clamp(2rem, 5vw, 3.25rem);
      margin-bottom: 4px;
    }
    .zfsx-mark .zfsx-zep {
      color: var(--text-primary);
    }
    .zfsx-mark .zfsx-fusion {
      color: var(--teal);
      text-shadow: 0 0 40px rgba(68, 171, 182, 0.25);
    }
    [data-theme="light"] .zfsx-mark .zfsx-fusion {
      text-shadow: none;
    }
    .zfsx-mark .zfsx-line2 {
      font-size: clamp(1.15rem, 2.8vw, 1.65rem);
      font-weight: 700;
      letter-spacing: 0.02em;
      color: var(--text-primary);
      opacity: 0.92;
    }
    .sf-tagline {
      font-size: clamp(1rem, 2.2vw, 1.2rem);
      font-weight: 500;
      color: var(--text-muted);
      max-width: 520px;
      line-height: 1.55;
      margin-bottom: 20px;
    }
    .sf-byline {
      display: inline-flex;
      align-items: center;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--coral);
      margin-bottom: 16px;
      padding: 6px 14px;
      border-radius: 100px;
      background: rgba(224, 80, 98, 0.12);
      border: 1px solid rgba(224, 80, 98, 0.32);
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 2px 10px rgba(0, 0, 0, 0.22);
    }
    .sf-global-note,
    .sf-india-note {
      font-size: 0.82rem;
      color: var(--text-muted);
      line-height: 1.65;
      max-width: 700px;
      padding: 16px 20px;
      border-left: 3px solid rgba(68, 171, 182, 0.45);
      background: rgba(68, 171, 182, 0.06);
      border-radius: 0 12px 12px 0;
    }
    [data-theme="light"] .sf-global-note,
    [data-theme="light"] .sf-india-note {
      background: rgba(68, 171, 182, 0.08);
    }
    [data-theme="light"] .sf-byline {
      background: rgba(224, 80, 98, 0.08);
      border-color: rgba(224, 80, 98, 0.22);
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset, 0 1px 3px rgba(0, 0, 0, 0.05);
    }
    [data-theme="light"] .sf-catchphrase {
      background: rgba(253, 196, 70, 0.14);
      border-color: rgba(253, 196, 70, 0.4);
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset, 0 1px 3px rgba(0, 0, 0, 0.05);
    }
    .sf-catchphrase {
      display: inline-flex;
      align-items: center;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--amber);
      margin-bottom: 18px;
      opacity: 0.92;
      padding: 6px 14px;
      border-radius: 100px;
      background: rgba(253, 196, 70, 0.1);
      border: 1px solid rgba(253, 196, 70, 0.35);
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 2px 10px rgba(0, 0, 0, 0.22);
    }

    /* Education: Programme updates card — prevent horizontal overflow on narrow viewports */
    .edu-updates-grid {
      display: grid;
      gap: 28px;
      align-items: center;
      min-width: 0;
      box-sizing: border-box;
    }
    .edu-updates-grid > * {
      min-width: 0;
    }
    @media (min-width: 769px) {
      .edu-updates-grid {
        grid-template-columns: 1fr auto;
      }
    }
    @media (max-width: 768px) {
      .edu-updates-grid {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 20px;
        padding: 22px 16px !important;
      }
    }
    .edu-updates-form {
      display: flex;
      flex-direction: column;
      gap: 10px;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      box-sizing: border-box;
    }
    .edu-updates-form .form-input {
      min-width: 0;
      max-width: 100%;
      box-sizing: border-box;
    }
    @media (max-width: 768px) {
      .edu-updates-form .btn-primary {
        width: 100%;
        max-width: 100%;
        justify-content: center;
        box-sizing: border-box;
        white-space: normal;
        text-align: center;
      }
    }