/* Shared chrome for tinnacity-www — reset, :root, navbar, buttons,
   .section helpers, footer. Single-sourced from index.html via
   scripts/extract-shared-css.py. Page-specific CSS stays inline. */

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

      :root {
        --green: #62b533;
        --green-dark: #4e9129;
        --green-light: #edf7e4;
        --green-mid: #7dcb51;
        --text: #111827;
        --text-muted: #6b7280;
        --text-light: #9ca3af;
        --bg: #ffffff;
        --bg-soft: #f9fafb;
        --bg-muted: #f3f4f6;
        --border: #e5e7eb;
        --border-light: #f0f0f0;
        --nav-height: 72px;
        --font: "Inter", "DM Sans", sans-serif;
      }

      html {
        scroll-behavior: smooth;
      }

      body {
        font-family: var(--font);
        color: var(--text);
        background: var(--bg);
        line-height: 1.6;
        -webkit-font-smoothing: antialiased;
      }

      a {
        color: inherit;
        text-decoration: none;
      }
      img {
        max-width: 100%;
        display: block;
      }

      
/* ─── NAVBAR ─── */
      .nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: var(--nav-height);
        background: rgba(255, 255, 255, 0.97);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--border-light);
        z-index: 1000;
        display: flex;
        align-items: center;
      }

      .nav-inner {
        max-width: 1280px;
        margin: 0 auto;
        padding: 0 32px;
        width: 100%;
        display: flex;
        align-items: center;
        gap: 0;
      }

      .nav-logo {
        display: flex;
        align-items: center;
        flex: 0 0 auto;
        width: auto;
        padding-right: 32px;
        margin-right: 32px;
        border-right: 1.5px solid var(--border);
      }

      .nav-logo svg {
        height: 32px;
        width: auto;
      }

      .brand-logo .logo__text {
        fill: #464646;
      }
      .brand-logo .logo__dot {
        fill: #62b533;
      }
      .brand-logo--dark .logo__text {
        fill: #ffffff;
      }
      .footer-brand-name svg {
        height: 26px;
        width: auto;
      }

      .nav-logo-text {
        font-size: 22px;
        font-weight: 700;
        letter-spacing: -0.5px;
        color: var(--text);
      }

      .nav-logo-text span {
        color: var(--green);
      }

      .nav-links {
        display: flex;
        align-items: center;
        gap: 2px;
        flex: 1;
        list-style: none;
      }

      .nav-item {
        position: relative;
      }

      .nav-link {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 8px 14px;
        font-size: 14px;
        font-weight: 500;
        color: var(--text-muted);
        border-radius: 8px;
        transition:
          color 0.15s,
          background 0.15s;
        cursor: pointer;
        white-space: nowrap;
      }

      .nav-link:hover {
        color: var(--text);
        background: var(--bg-muted);
      }

      .nav-link svg {
        width: 14px;
        height: 14px;
        transition: transform 0.2s;
      }
      .nav-item:hover .nav-link svg {
        transform: rotate(180deg);
      }

      /* Dropdowns */
      .nav-dropdown {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        background: white;
        border: 1px solid var(--border);
        border-radius: 12px;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
        padding: 8px;
        min-width: 240px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: all 0.18s ease;
        pointer-events: none;
      }

      /* invisible bridge so hover survives the 8px gap between link and dropdown */
      .nav-dropdown::before {
        content: "";
        position: absolute;
        top: -8px;
        left: 0;
        right: 0;
        height: 8px;
      }

      .nav-dropdown.wide {
        min-width: 720px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 0;
      }

      .nav-item:hover .nav-dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
      }

      .nav-dropdown-item {
        display: flex;
        flex-direction: column;
        padding: 10px 12px;
        border-radius: 8px;
        transition: background 0.12s;
        cursor: pointer;
      }

      .nav-dropdown-item:hover {
        background: var(--bg-soft);
      }

      .nav-dropdown-item strong {
        font-size: 13.5px;
        font-weight: 600;
        color: var(--text);
      }

      .nav-dropdown-item span {
        font-size: 12px;
        color: var(--text-muted);
        margin-top: 2px;
      }

      /* Icon-tile dropdown items (Ramp-style) */
      .nav-dropdown-item {
        flex-direction: row;
        gap: 12px;
        align-items: flex-start;
      }
      .ndi-icon {
        width: 38px;
        height: 38px;
        background: var(--green-light);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }
      .ndi-icon svg {
        width: 18px;
        height: 18px;
        stroke: var(--green);
        fill: none;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .ndi-icon svg.brand {
        fill: var(--green);
        stroke: none;
      }
      .ndi-thumb {
        width: 40px;
        height: 40px;
        border-radius: 9px;
        object-fit: cover;
        flex-shrink: 0;
        background: var(--bg-muted);
      }
      .ndi-text .ext {
        color: var(--text-light);
        font-weight: 400;
        margin-left: 2px;
      }
      .ndi-text {
        display: flex;
        flex-direction: column;
        min-width: 0;
      }
      .nav-dropdown.wide > div {
        padding: 0 16px;
      }
      .nav-dropdown.wide > div + div {
        border-left: 1px solid var(--border-light);
      }
      .nav-dropdown.cols-2 {
        min-width: 480px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 16px;
      }
      .nav-dropdown.cols-2::after {
        content: "";
        position: absolute;
        top: 12px;
        bottom: 12px;
        left: 50%;
        width: 1px;
        background: var(--border-light);
      }
      .nav-dropdown-item--compact {
        align-items: center;
      }
      .nav-dropdown-item--compact .ndi-icon {
        width: 34px;
        height: 34px;
      }
      .nav-dropdown.align-right {
        left: auto;
        right: 0;
      }
      .nav-dropdown.platform {
        min-width: 600px;
        padding: 8px;
      }
      .platform .plat-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }
      .platform .plat-row > div {
        padding: 0 16px;
      }
      .platform .plat-row > div + div {
        border-left: 1px solid var(--border-light);
      }
      .platform .plat-foundation {
        border-top: 1px solid var(--border-light);
        margin: 8px 16px 0;
        padding-top: 10px;
      }
      .platform .plat-foundation-items {
        display: block;
      }
      .nav-dropdown-item--iq {
        background:
          radial-gradient(
            ellipse 120% 100% at 18% 0%,
            rgba(98, 181, 51, 0.22) 0%,
            transparent 60%
          ),
          linear-gradient(rgba(98, 181, 51, 0.1) 1px, transparent 1px),
          linear-gradient(90deg, rgba(98, 181, 51, 0.1) 1px, transparent 1px),
          #0a1510;
        background-size: auto, 24px 24px, 24px 24px, auto;
        border: 1px solid rgba(98, 181, 51, 0.25);
        border-radius: 10px;
        padding: 12px;
        margin-right: 16px;
      }
      .nav-dropdown-item--iq:hover {
        background:
          radial-gradient(
            ellipse 120% 100% at 18% 0%,
            rgba(98, 181, 51, 0.32) 0%,
            transparent 60%
          ),
          linear-gradient(rgba(98, 181, 51, 0.14) 1px, transparent 1px),
          linear-gradient(90deg, rgba(98, 181, 51, 0.14) 1px, transparent 1px),
          #0d1f16;
        background-size: auto, 24px 24px, 24px 24px, auto;
        border-color: rgba(98, 181, 51, 0.45);
      }
      .nav-dropdown-item--iq .ndi-icon {
        background: rgba(98, 181, 51, 0.2);
        border: 1px solid rgba(98, 181, 51, 0.4);
      }
      .nav-dropdown-item--iq .ndi-icon svg {
        stroke: var(--green-mid);
      }
      .nav-dropdown-item--iq .ndi-text strong {
        background: linear-gradient(135deg, #7dcb51, #62b533);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }
      .nav-dropdown-item--iq .ndi-text span {
        color: rgba(255, 255, 255, 0.85);
      }
      .ndi-social {
        display: flex;
        gap: 8px;
        padding: 10px 12px;
      }
      .ndi-social .ndi-icon {
        transition: background 0.15s;
      }
      .ndi-social .ndi-icon:hover {
        background: var(--green);
      }
      .ndi-social .ndi-icon:hover svg {
        fill: #fff;
      }
      .nav-link-plain {
        display: block;
        padding: 9px 12px;
        font-size: 13.5px;
        font-weight: 600;
        color: var(--text);
        border-radius: 8px;
        transition: background 0.12s;
      }
      .nav-link-plain:hover {
        background: var(--bg-soft);
      }
      .nav-link-plain .ext {
        color: var(--text-light);
        font-weight: 400;
        margin-left: 4px;
      }

      .nav-dropdown-section {
        padding: 6px 12px 4px;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--text-light);
      }

      .nav-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-left: auto;
        flex-shrink: 0;
      }

      .btn-ghost {
        padding: 8px 16px;
        font-size: 14px;
        font-weight: 500;
        color: var(--text-muted);
        border-radius: 8px;
        transition:
          color 0.15s,
          background 0.15s;
      }

      .btn-ghost:hover {
        color: var(--text);
        background: var(--bg-muted);
      }

      .btn-primary {
        padding: 9px 20px;
        background: var(--green);
        color: white;
        font-size: 14px;
        font-weight: 600;
        border-radius: 8px;
        border: none;
        cursor: pointer;
        transition:
          background 0.15s,
          transform 0.1s;
        white-space: nowrap;
      }

      .btn-primary:hover {
        background: var(--green-dark);
        transform: translateY(-1px);
      }

      
/* ─── SHARED SECTION STYLES ─── */
      .section {
        padding: 96px 32px;
      }

      .section-inner {
        max-width: 1280px;
        margin: 0 auto;
      }
/* ─── FOOTER ─── */
      footer {
        background: #0f1a14;
        color: white;
        padding: 64px 32px 32px;
      }

      .footer-inner {
        max-width: 1280px;
        margin: 0 auto;
      }

      .footer-top {
        display: grid;
        grid-template-columns: 280px 1fr;
        gap: 80px;
        padding-bottom: 48px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        margin-bottom: 32px;
      }

      .footer-brand-name {
        font-size: 22px;
        font-weight: 700;
        letter-spacing: -0.5px;
        margin-bottom: 12px;
      }

      .footer-brand-name span {
        color: var(--green-mid);
      }

      .footer-tagline {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.5);
        line-height: 1.6;
        margin-bottom: 24px;
      }

      .footer-social {
        display: flex;
        gap: 8px;
      }

      .footer-social a {
        width: 34px;
        height: 34px;
        background: rgba(255, 255, 255, 0.08);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.15s;
      }

      .footer-social a:hover {
        background: var(--green);
      }
      .footer-social a[href*="linkedin.com"]:hover {
        background: #0a66c2;
      }
      .footer-social a[href*="youtube.com"]:hover {
        background: #ff0000;
      }
      .footer-social a[href*="youtube.com"]:hover svg polygon {
        fill: #ff0000;
      }
      .footer-social a[href*="facebook.com"]:hover {
        background: #1877f2;
      }
      .footer-social a[href*="//x.com"]:hover {
        background: #fff;
      }
      .footer-social a[href*="//x.com"]:hover svg {
        color: #000;
      }
      .footer-social a[href*="instagram.com"]:hover {
        background: radial-gradient(
          circle at 30% 107%,
          #fdf497 0%,
          #fdf497 5%,
          #fd5949 45%,
          #d6249f 60%,
          #285aeb 90%
        );
      }
      .footer-social svg {
        width: 15px;
        height: 15px;
        color: white;
        transition: color 0.15s;
      }

      .footer-links-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 32px;
      }

      .footer-col-title {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.4);
        margin-bottom: 16px;
      }

      .footer-col ul {
        list-style: none;
      }
      .footer-col ul li {
        margin-bottom: 10px;
      }
      .footer-col ul li a {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.65);
        transition: color 0.15s;
      }
      .footer-col ul li a:hover {
        color: white;
      }

      .footer-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 13px;
        color: rgba(255, 255, 255, 0.35);
        flex-wrap: wrap;
        gap: 12px;
      }

      .footer-bottom a {
        color: rgba(255, 255, 255, 0.35);
        transition: color 0.15s;
      }
      .footer-bottom a:hover {
        color: rgba(255, 255, 255, 0.7);
      }

      .footer-contact {
        margin-top: 16px;
        font-size: 13px;
        color: rgba(255, 255, 255, 0.45);
        line-height: 1.8;
      }

      .footer-contact a {
        color: rgba(255, 255, 255, 0.45);
      }
      .footer-contact a:hover {
        color: var(--green-mid);
      }

      
/* ─── UTILITY ─── */
      .text-green {
        color: var(--green);
      }
      .mt-8 {
        margin-top: 8px;
      }

      
/* Full-width mega menu (Ramp-style) */
      .nav-inner {
        position: relative;
        height: 100%;
      }
      .nav-links {
        height: 100%;
      }
      .nav-item {
        position: static;
        height: 100%;
        display: flex;
        align-items: center;
      }
      .nav-dropdown {
        left: 0;
        right: 0;
        top: 100%;
        min-width: 0;
        padding: 24px 16px;
        border-radius: 0 0 14px 14px;
        border-top: none;
        box-shadow: 0 16px 30px rgba(0, 0, 0, 0.1);
      }
      .nav-dropdown::before {
        display: none;
      }
      .nav-dropdown.align-right {
        left: 0;
        right: 0;
      }
      .nav-dropdown.wide {
        min-width: 0;
        grid-template-columns: repeat(3, 1fr);
      }
      .nav-dropdown.cols-2 {
        min-width: 0;
        grid-template-columns: repeat(4, 1fr);
      }
      .nav-dropdown.cols-2::after {
        display: none;
      }
      .nav-dropdown.platform {
        min-width: 0;
        padding: 24px 16px;
      }
      .platform .plat-row {
        grid-template-columns: repeat(2, 1fr);
      }
      .platform .plat-foundation {
        margin: 16px 16px 0;
      }
      .platform .plat-foundation-items {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
      }
    

/* Shared chrome responsive */
@media(max-width:1024px){.footer-top{grid-template-columns:1fr;gap:40px}.footer-links-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.nav-links{display:none}}

/* Footer social — per-network hover colors (merged from inner pages) */
.footer-social a[href*="linkedin.com"]:hover{background:#0a66c2}
.footer-social a[href*="youtube.com"]:hover{background:#ff0000}
.footer-social a[href*="youtube.com"]:hover svg polygon{fill:#ff0000}
.footer-social a[href*="facebook.com"]:hover{background:#1877f2}
.footer-social a[href*="//x.com"]:hover{background:#fff}
.footer-social a[href*="//x.com"]:hover svg{color:#000}
.footer-social a[href*="instagram.com"]:hover{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%)}

/* Active top-level nav item, set via <body data-page="..."> */
body[data-page="platform"] .nav-link[data-nav="platform"],
body[data-page="industries"] .nav-link[data-nav="industries"],
body[data-page="resources"] .nav-link[data-nav="resources"],
body[data-page="clients"] .nav-link[data-nav="clients"]{color:var(--green);background:var(--green-light)}