/* ========================================================
   DESIGN TOKENS
   Primary blue matches Solidus 3D logo (#2563eb)
   Replacing old neon cyan throughout
======================================================== */
    :root {
      --blue: #2563eb;
      --blue2: #3b82f6;
      --blue-dk: #1d4ed8;
      --blue-lt: #dbeafe;

      --ink: #111827;
      /* Dark navy — headings only */
      --body: #4b5563;
      /* Grey — body text (NOT pure black, easier to read) */
      --mid: #6b7280;
      /* Mid grey — labels, captions */
      --light: #9ca3af;
      /* Light grey — placeholder, hints */
      --line: #e5e7eb;
      /* Dividers, borders */

      --paper: #ffffff;
      /* Pure white sections */
      --bg2: #f8fafc;
      /* Off-white alternate sections */
      --bg3: #f1f5f9;
      /* Light grey section */
      --dark: #0f172a;
      /* Dark sections (testimonials, contact, footer) */
      --dark2: #1e293b;
      /* Cards in dark sections */

      --white: #ffffff;

      --B: 'Plus Jakarta Sans', system-ui, sans-serif;
      /* Body — modern, Apple-like */
      --D: 'Bebas Neue', sans-serif;
      /* Display headlines */
      --M: 'DM Mono', monospace;
      /* Labels, mono text */

      --radius: 12px;
      --radius-sm: 6px;
      --ease: cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* ========================================================
   BASE RESET
======================================================== */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0
    }

    html {
      scroll-behavior: smooth;
      font-size: 16px;
      overflow-x: hidden
    }

    body {
      background: var(--paper);
      color: var(--body);
      font-family: var(--B);
      font-weight: 400;
      line-height: 1.7;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }

    /* ============================================================
   CURSOR -- standard system cursors (no custom cursor overlay)
   This ensures all interactive elements respond to pointer
============================================================ */
    a,
    button,
    [role="button"],
    .svr,
    .bc,
    .prce,
    .pfb,
    .htg,
    .b2bcard,
    .pc,
    .fqq,
    .ctap,
    .ctag,
    .nbtn,
    .sbtn,
    .ham,
    .logo-link,
    input[type="submit"],
    select,
    footer a,
    footer button,
    .fc5 a {
      cursor: pointer !important;
    }

    input,
    textarea {
      cursor: text !important;
    }

    /* Custom cursor -- shown only on desktop non-touch */
    ::selection {
      background: var(--blue);
      color: #fff
    }

    /* ========================================================
   CUSTOM CURSOR — Blue dot
======================================================== */

    /* ========================================================
   SCROLL REVEAL ANIMATIONS
======================================================== */
    .rv {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity .7s var(--ease), transform .7s var(--ease)
    }

    .rv.on {
      opacity: 1;
      transform: translateY(0)
    }

    .rl {
      opacity: 0;
      transform: translateX(-28px);
      transition: opacity .7s var(--ease), transform .7s var(--ease)
    }

    .rr {
      opacity: 0;
      transform: translateX(28px);
      transition: opacity .7s var(--ease), transform .7s var(--ease)
    }

    .rl.on,
    .rr.on {
      opacity: 1;
      transform: translateX(0)
    }

    /* ========================================================
   NAV — Sticky white glass nav
======================================================== */
    nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 800;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 48px;
      height: 72px;
      background: rgba(255, 255, 255, .97);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(37, 99, 235, .08);
      transition: box-shadow .3s, border-color .3s;
    }

    nav.sc {
      box-shadow: 0 4px 32px rgba(37, 99, 235, .25);
      border-color: rgba(37, 99, 235, .4);
      background: #2563eb !important;
    }

    nav.sc .nl>li>a {
      color: rgba(255, 255, 255, .75) !important;
    }

    nav.sc .nl>li>a:hover {
      color: white !important;
      background: rgba(255, 255, 255, .15) !important;
    }

    nav.sc .nbtn {
      background: white !important;
      color: #2563eb !important;
    }

    nav.sc .nbtn:hover {
      background: #dbeafe !important;
    }

    nav.sc .ham span {
      background: white !important;
    }

    /* Logo image in nav */
    .logo-link {
      text-decoration: none;
      display: flex;
      align-items: center;
      flex-shrink: 0
    }

    /* logo is now inline PNG img */
    .logo-link img {
      display: block;
    }

    /* Nav links */
    .nl {
      display: flex;
      gap: 2px;
      list-style: none;
      margin: 0;
      align-items: center
    }

    .nl>li {
      position: relative
    }

    .nl>li>a {
      font-family: var(--M);
      font-size: 12px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--mid);
      text-decoration: none;
      padding: 8px 14px;
      display: flex;
      align-items: center;
      gap: 5px;
      transition: color .2s;
      border-radius: var(--radius-sm);
      font-weight: 500;
    }

    .nl>li>a:hover {
      color: var(--blue);
      background: var(--blue-lt)
    }

    .nav-arr {
      font-size: 8px;
      transition: transform .2s;
      opacity: .5
    }

    /* ====================================================
       MEGA-MENU DROPDOWN
    ==================================================== */
    .dd {
      position: absolute;
      top: calc(100% + 14px);
      left: 50%;
      transform: translateX(-50%) translateY(10px);
      background: var(--white);
      border: 1px solid var(--line);
      box-shadow: 0 32px 80px rgba(15,23,42,.18), 0 4px 16px rgba(37,99,235,.07);
      width: 820px;
      max-width: 95vw;
      padding: 0;
      opacity: 0;
      visibility: hidden;
      transition: opacity .28s cubic-bezier(.4,0,.2,1),
                  transform .28s cubic-bezier(.4,0,.2,1),
                  visibility .28s;
      z-index: 700;
      border-radius: 18px;
      overflow: hidden;
    }

    .nl > li:hover .dd {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(0)
    }

    .nl > li:hover .nav-arr {
      transform: rotate(180deg)
    }

    /* Mega-menu inner grid */
    .dd-inner {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 0;
    }

    /* Each column */
    .dd-col {
      padding: 22px 18px 20px;
      border-right: 1px solid var(--line);
    }
    .dd-col:last-child { border-right: none; }

    /* Column header */
    .dd-col-head {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 4px 12px;
      margin-bottom: 4px;
      border-bottom: 1px solid var(--blue-lt);
      font-family: var(--M);
      font-size: 9.5px;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--blue);
      font-weight: 600;
    }
    .dd-col-head svg {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
    }

    /* Links inside menu */
    .dd a {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 10px;
      font-size: 13.5px;
      color: var(--ink);
      text-decoration: none;
      transition: background .15s, color .15s, transform .15s, border-color .15s;
      font-weight: 500;
      border-radius: 10px;
      border: 1px solid transparent;
    }

    .dd a:hover {
      background: var(--blue-lt);
      color: var(--blue);
      border-color: rgba(37,99,235,.14);
      transform: translateX(3px);
    }

    .dd svg {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
    }

    /* Bottom bar */
    .dd-footer {
      background: linear-gradient(90deg, #eff6ff 0%, #e0edff 100%);
      border-top: 1px solid var(--blue-lt);
      padding: 11px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .dd-footer a {
      font-family: var(--M);
      font-size: 10.5px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--blue);
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 6px;
      font-weight: 600;
      transition: gap .15s, opacity .15s;
    }
    .dd-footer a:hover { gap: 10px; opacity: .85; }
    .dd-footer span { font-size: 11px; color: var(--mid); font-weight: 400; letter-spacing: 0; text-transform: none; }

    .dd-group, .dd-div, .dd-copy, .dd-copy strong, .dd-copy small, .dd-more { display: none; }

    /* Nav CTA button */
    .nbtn {
      background: var(--blue);
      color: var(--white);
      font-family: var(--M);
      font-size: 12px;
      letter-spacing: .12em;
      text-transform: uppercase;
      padding: 12px 24px;
      border: none;
      cursor: pointer;
      text-decoration: none;
      border-radius: var(--radius-sm);
      font-weight: 500;
      transition: background .2s, transform .15s;
      display: inline-block;
    }

    .nbtn:hover {
      background: var(--blue-dk);
      color: var(--white);
      transform: translateY(-1px)
    }

    /* Hamburger */
    .ham {
      display: none;
      flex-direction: column;
      gap: 5px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 4px
    }

    .ham span {
      display: block;
      width: 24px;
      height: 2px;
      background: var(--ink);
      transition: all .3s
    }

    /* Mobile drawer */
    .mob {
      position: fixed;
      top: 72px;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--white);
      z-index: 750;
      display: flex;
      flex-direction: column;
      padding: 40px 32px;
      gap: 20px;
      transform: translateX(100%);
      transition: transform .35s var(--ease);
    }

    .mob.open {
      transform: translateX(0)
    }

    .mob a {
      font-family: var(--D);
      font-size: 2.4rem;
      letter-spacing: .04em;
      text-transform: uppercase;
      color: var(--ink);
      text-decoration: none;
    }

    .mob a:hover {
      color: var(--blue)
    }

    /* ========================================================
   HERO — Clean white/light hero with floating parts
======================================================== */
    #hero {
      padding-top: 72px;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: hidden;
    }

    /* Hero background */
    .hbg {
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      background: linear-gradient(135deg, #f0f7ff 0%, #e8f0fe 50%, #dbeafe 100%);
    }

    .hbg::before {
      content: '';
      position: absolute;
      left: -80px;
      top: 50%;
      transform: translateY(-50%);
      width: 500px;
      height: 500px;
      background: radial-gradient(ellipse, rgba(37, 99, 235, .07), transparent 70%);
      border-radius: 50%;
    }

    .hbg::after {
      content: '';
      position: absolute;
      right: -60px;
      top: 40%;
      transform: translateY(-50%);
      width: 450px;
      height: 450px;
      background: radial-gradient(ellipse, rgba(37, 99, 235, .05), transparent 70%);
      border-radius: 50%;
    }

    /* Floating part images - hero1.png left, hero2.png right */
    .hpart {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      pointer-events: none;
      z-index: 5;
      width: 340px;
      height: 340px;
      object-fit: contain;
      opacity: .85;
      filter: drop-shadow(0 20px 40px rgba(37, 99, 235, .15));
    }

    .hpl {
      left: -20px;
      animation: fl 7s ease-in-out infinite
    }

    .hpr {
      right: -20px;
      transform: translateY(-50%);
      animation: fr 7s ease-in-out infinite .9s
    }

    @keyframes fl {

      0%,
      100% {
        transform: translateY(-50%) rotate(-2deg)
      }

      50% {
        transform: translateY(calc(-50% - 16px)) rotate(1.5deg)
      }
    }

    @keyframes fr {

      0%,
      100% {
        transform: translateY(-50%) rotate(2deg)
      }

      50% {
        transform: translateY(calc(-50% - 14px)) rotate(-1.5deg)
      }
    }

    /* Hero center content */
    .hc {
      position: relative;
      z-index: 10;
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 60px 48px;
    }

    /* Badge pill */
    .hpill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(37, 99, 235, .1);
      border: 1px solid rgba(37, 99, 235, .25);
      border-radius: 980px;
      padding: 7px 20px;
      font-family: var(--M);
      font-size: 12px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--blue);
      margin-bottom: 28px;
      font-weight: 500;
    }

    .hpill::before {
      content: '';
      width: 7px;
      height: 7px;
      background: var(--blue);
      border-radius: 50%;
      animation: bk 1.6s ease-in-out infinite;
    }

    @keyframes bk {

      0%,
      100% {
        opacity: 1
      }

      50% {
        opacity: .25
      }
    }

    /* Hero H1 — Large bold Apple-style headline */
    h1 {
      font-family: var(--B);
      font-size: clamp(2rem, 3.8vw, 3.8rem);
      font-weight: 800;
      letter-spacing: -.03em;
      line-height: 1.1;
      color: var(--ink);
      margin-bottom: 20px;
    }

    h1 span {
      color: var(--blue)
    }

    /* Hero subtitle */
    .htag {
      font-size: clamp(1.05rem, 1.8vw, 1.3rem);
      color: var(--mid);
      font-weight: 400;
      max-width: 600px;
      margin: 0 auto 36px;
      line-height: 1.75;
    }

    .htag b {
      color: var(--ink);
      font-weight: 600
    }

    /* Hero action buttons */
    .hact {
      display: flex;
      gap: 14px;
      justify-content: center;
      flex-wrap: wrap;
      margin-bottom: 44px
    }

    .ctap {
      background: var(--blue);
      color: var(--white);
      font-family: var(--B);
      font-size: 16px;
      font-weight: 600;
      padding: 16px 36px;
      border-radius: var(--radius-sm);
      text-decoration: none;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      transition: background .2s, transform .15s;
      box-shadow: 0 4px 20px rgba(37, 99, 235, .3);
    }

    .ctap:hover {
      background: var(--blue-dk);
      color: var(--white);
      transform: translateY(-2px)
    }

    .ctap:active {
      transform: translateY(0)
    }

    .ctag {
      background: transparent;
      color: var(--ink);
      font-family: var(--B);
      font-size: 16px;
      font-weight: 600;
      padding: 15px 32px;
      border-radius: var(--radius-sm);
      border: 2px solid var(--line);
      text-decoration: none;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: border-color .2s, background .2s, color .2s;
    }

    .ctag:hover {
      border-color: var(--blue);
      color: var(--blue);
      background: var(--blue-lt)
    }

    /* Service badges row */
    .hbadges {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      margin-bottom: 20px
    }

    .hb {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-family: var(--M);
      font-size: 11px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--mid);
      padding: 6px 14px;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      background: var(--white);
      transition: all .2s;
      font-weight: 500;
    }

    .hb:hover {
      border-color: var(--blue);
      color: var(--blue);
      background: var(--blue-lt)
    }

    .bdot {
      width: 6px;
      height: 6px;
      background: var(--blue);
      border-radius: 50%;
      flex-shrink: 0
    }

    .hnote {
      font-size: 13px;
      color: var(--light);
      font-family: var(--M);
      letter-spacing: .06em;
      font-weight: 500;
    }

    /* ========================================================
   MARQUEE — Blue ticker
======================================================== */
    .mq {
      background: var(--blue);
      overflow: hidden;
      padding: 14px 0
    }

    .mqt {
      display: flex;
      white-space: nowrap;
      animation: mq 28s linear infinite
    }

    .mqi {
      flex-shrink: 0;
      padding: 0 44px;
      font-family: var(--B);
      font-size: 1.05rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .9);
    }

    .mqs {
      color: rgba(255, 255, 255, .35);
      margin: 0 10px
    }

    @keyframes mq {
      from {
        transform: translateX(0)
      }

      to {
        transform: translateX(-50%)
      }
    }

    @media(max-width:640px) {
      .mqt {
        animation-duration: 40s !important;
      }
    }

    /* ========================================================
   STATS BAR — White section
======================================================== */
    #sb {
      background: var(--white);
      border-bottom: 1px solid var(--line)
    }

    .sg {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      max-width: 1200px;
      margin: 0 auto;
    }

    .sc2 {
      padding: 44px 28px;
      text-align: center;
      border-right: 1px solid var(--line);
    }

    .sc2:last-child {
      border-right: none
    }

    .sn {
      font-family: var(--D);
      font-size: clamp(2.8rem, 4.5vw, 4.2rem);
      color: var(--blue);
      letter-spacing: .02em;
      display: block;
      line-height: 1;
    }

    .sl {
      display: block;
      font-family: var(--M);
      font-size: 12px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--mid);
      margin-top: 8px;
      font-weight: 500;
    }

    .ss {
      display: block;
      font-size: .9rem;
      color: var(--mid);
      font-weight: 500;
      margin-top: 6px;
      line-height: 1.4
    }

    /* ========================================================
   SHARED SECTION WRAPPER
======================================================== */
    .sw {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 48px
    }

    /* Section keyword label */
    .sk {
      font-family: var(--M);
      font-size: 12px;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--blue);
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 14px;
      font-weight: 500;
    }

    .sk::before {
      content: '';
      display: inline-block;
      width: 24px;
      height: 2px;
      background: var(--blue);
      border-radius: 2px
    }

    /* H2 section headings — Large, Bold, Apple-style */
    h2 {
      font-family: var(--B);
      font-size: clamp(2.2rem, 4vw, 3.8rem);
      font-weight: 800;
      line-height: 1.05;
      letter-spacing: -.03em;
      color: var(--ink);
    }

    h2 em {
      font-style: normal;
      color: var(--blue)
    }

    /* Section description paragraph */
    .sdesc {
      font-size: 1.1rem;
      color: var(--mid);
      font-weight: 400;
      line-height: 1.75;
      max-width: 500px;
    }

    /* ========================================================
   SERVICES SECTION
======================================================== */
    #services {
      padding: 100px 0;
      background: var(--bg2)
    }

    .sh {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      align-items: end;
      margin-bottom: 64px;
    }

    .svl {
      display: flex;
      flex-direction: column;
      gap: 0
    }

    /* Service row */
    .svr {
      display: grid;
      grid-template-columns: 80px 1fr 28px;
      gap: 24px;
      align-items: center;
      padding: 32px 24px;
      border-top: 1px solid var(--line);
      position: relative;
      cursor: pointer;
      transition: all .25s;
      border-radius: 0;
      padding-left: 16px;
    }

    .svr::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 0;
      background: var(--blue);
      opacity: 1;
      transition: width .35s var(--ease);
      z-index: 0;
    }

    .svr:hover::before {
      width: 100%
    }

    .svic {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding-top: 4px;
      padding-left: 16px;
    }

    .svn {
      font-family: var(--D);
      font-size: 3.2rem;
      color: #1d4ed8;
      opacity: 1;
      line-height: 1;
      transition: color .3s, opacity .3s;
      margin-bottom: 8px;
    }

    .svr:hover .svn {
      color: white;
      opacity: 1
    }

    .svr:hover h3 {
      color: white
    }

    .svr:hover [style*="color:var(--mid)"] {
      color: rgba(255, 255, 255, 0.7) !important
    }

    .svr:hover [style*="Output Files"] {
      color: rgba(255, 255, 255, 0.6) !important
    }

    .svr:hover .svb p {
      color: rgba(255, 255, 255, .8)
    }

    .svr:hover .svt {
      color: rgba(255, 255, 255, .85);
      border-color: rgba(255, 255, 255, .35)
    }

    .svr:hover .sva {
      color: white
    }

    .svr:hover .svi svg * {
      stroke: white !important;
      fill: none !important
    }

    .svr>* {
      position: relative;
      z-index: 1
    }

    .svi {
      width: 48px;
      height: 48px;
      display: block
    }

    .svi svg {
      width: 100%;
      height: 100%
    }

    /* H3 — Service names */
    h3 {
      font-family: var(--B);
      font-size: clamp(1.3rem, 2vw, 1.7rem);
      font-weight: 700;
      letter-spacing: -.015em;
      color: var(--ink);
      margin-bottom: 10px;
      line-height: 1.15;
    }

    .svb p {
      font-size: 1rem;
      color: var(--mid);
      font-weight: 400;
      line-height: 1.75;
      max-width: 540px
    }

    .svts {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin-top: 14px
    }

    .output-files-label {
      transition: color .2s
    }

    .svr:hover .output-files-label {
      color: rgba(255, 255, 255, .65) !important
    }

    .svt {
      font-family: var(--M);
      font-size: 10px;
      letter-spacing: .1em;
      border: 1px solid var(--line);
      padding: 4px 10px;
      color: var(--mid);
      text-transform: uppercase;
      border-radius: var(--radius-sm);
      font-weight: 500;
    }

    .sva {
      font-size: 24px;
      color: var(--light);
      padding-top: 12px;
      transition: color .25s, transform .25s;
      font-style: normal;
      text-decoration: none;
    }

    .svr:hover .sva {
      color: var(--blue);
      transform: translate(4px, -4px)
    }

    /* ========================================================
   PORTFOLIO SECTION
======================================================== */
    #portfolio {
      padding: 48px 0 80px;
      background: var(--white)
    }

    .ph {
      text-align: center;
      margin-bottom: 48px
    }

    /* Portfolio filter buttons */
    .pf {
      display: flex;
      gap: 8px;
      justify-content: center;
      flex-wrap: wrap;
      margin-bottom: 48px
    }

    .pfb {
      font-family: var(--M);
      font-size: 11px;
      letter-spacing: .12em;
      text-transform: uppercase;
      padding: 9px 20px;
      border: 1px solid var(--line);
      background: transparent;
      color: var(--mid);
      cursor: pointer;
      transition: all .2s;
      border-radius: var(--radius-sm);
      font-weight: 500;
    }

    .pfb.ac,
    .pfb:hover {
      background: var(--blue);
      color: var(--white);
      border-color: var(--blue)
    }

    /* Portfolio grid */
    .pg {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2px;
      background: var(--line)
    }

    .pc {
      background: var(--white);
      position: relative;
      overflow: hidden;
      cursor: pointer;
      transition: background .2s;
    }

    .pc:hover {
      background: var(--bg2)
    }

    .pci {
      padding: 36px 32px
    }

    .pci-svg {
      width: 44px;
      height: 44px;
      margin-bottom: 16px;
      display: block
    }

    .pci-svg svg {
      width: 100%;
      height: 100%
    }

    .pm {
      font-family: var(--M);
      font-size: 10px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--blue);
      margin-bottom: 10px;
      display: block;
      font-weight: 500;
    }

    /* H4 — Portfolio card title */
    h4 {
      font-family: var(--B);
      font-size: 1.25rem;
      font-weight: 700;
      letter-spacing: -.01em;
      color: var(--ink);
      margin-bottom: 8px;
      line-height: 1.2;
    }

    .pc p {
      font-size: .95rem;
      color: var(--mid);
      font-weight: 400;
      line-height: 1.65
    }

    .pl {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 16px;
      font-family: var(--M);
      font-size: 10px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--ink);
      text-decoration: none;
      border-bottom: 1px solid var(--line);
      padding-bottom: 2px;
      transition: color .2s, border-color .2s;
      font-weight: 500;
    }

    .pc:hover .pl {
      color: var(--blue);
      border-color: var(--blue)
    }

    /* ========================================================
   PROOF / STATS FULL-WIDTH BAND
======================================================== */
    #proof {
      background: var(--dark);
      padding: 72px 48px;
      display: grid;
      grid-template-columns: 1fr 2px 1fr 2px 1fr;
      align-items: center;
    }

    .pdiv {
      background: rgba(255, 255, 255, .08);
      height: 72px
    }

    .pcel {
      padding: 0 56px;
      text-align: center
    }

    .pcel h3 {
      font-family: var(--D);
      font-size: clamp(2.5rem, 4.5vw, 5rem);
      color: var(--white);
      letter-spacing: .04em;
      margin-bottom: 6px;
      font-weight: 400;
    }

    .pcel h3 sup {
      font-size: .4em;
      color: var(--blue2)
    }

    .pcel p {
      font-family: var(--M);
      font-size: 11px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .35);
      font-weight: 500
    }

    /* ========================================================
   B2B SECTION
======================================================== */
    #b2b {
      background: var(--white);
      padding: 80px 0;
      border-top: 1px solid var(--line)
    }

    .b2bi {
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: 80px;
      align-items: center
    }

    .b2bt h2 {
      margin-bottom: 20px
    }

    .b2bt p {
      font-size: 1.05rem;
      color: var(--mid);
      font-weight: 400;
      line-height: 1.8
    }

    .b2bc {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2px;
      background: var(--line)
    }

    .b2bcard {
      background: var(--bg2);
      padding: 28px 24px;
      text-align: center;
      transition: background .2s;
      cursor: pointer;
    }

    .b2bcard:hover {
      background: var(--white)
    }

    .b2bsvg {
      width: 36px;
      height: 36px;
      margin: 0 auto 12px;
      display: block
    }

    .b2bsvg svg {
      width: 100%;
      height: 100%
    }

    .b2bcard h4 {
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 6px
    }

    .b2bcard p {
      font-size: .85rem;
      color: var(--mid);
      font-weight: 400;
      line-height: 1.55
    }

    /* ========================================================
   WHY US SECTION
======================================================== */
    #why {
      background: var(--bg3);
      padding: 100px 0
    }

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

    .bcs {
      display: flex;
      flex-direction: column;
      gap: 1px;
      background: var(--line);
      margin-top: 40px
    }

    .bc {
      background: var(--bg3);
      padding: 28px 32px;
      display: flex;
      gap: 22px;
      align-items: flex-start;
      transition: background .2s;
      cursor: pointer;
    }

    .bc:hover {
      background: var(--white)
    }

    .bcn {
      font-family: var(--D);
      font-size: 2.8rem;
      color: #1d4ed8;
      opacity: 1;
      line-height: 1;
      min-width: 44px;
      transition: opacity .3s, color .3s;
    }

    .bc:hover .bcn {
      color: var(--blue);
      opacity: 1
    }

    .bcb h4 {
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 6px
    }

    .bcb p {
      font-size: .95rem;
      color: var(--mid);
      font-weight: 400;
      line-height: 1.7
    }

    /* NDA block */
    .nda {
      background: var(--dark);
      padding: 44px;
      position: relative;
      overflow: hidden;
      border-radius: var(--radius);
      margin-bottom: 14px;
    }

    .nda::after {
      content: 'NDA';
      position: absolute;
      bottom: -20px;
      right: -10px;
      font-family: var(--D);
      font-size: 9rem;
      color: rgba(255, 255, 255, .03);
      line-height: 1;
      pointer-events: none;
    }

    .qiw {
      width: 64px;
      height: 64px;
      margin-bottom: 22px;
      position: relative
    }

    .qsvg {
      width: 64px;
      height: 64px;
      animation: sf 3s ease-in-out infinite
    }

    @keyframes sf {

      0%,
      100% {
        transform: translateY(0)
      }

      50% {
        transform: translateY(-6px)
      }
    }

    .scp {
      stroke-dasharray: 34;
      stroke-dashoffset: 34;
      animation: dc 1.2s ease forwards .8s
    }

    @keyframes dc {
      to {
        stroke-dashoffset: 0
      }
    }

    .sgl {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 84px;
      height: 84px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(37, 99, 235, .18), transparent 70%);
      animation: gp 2.5s ease-in-out infinite;
    }

    @keyframes gp {

      0%,
      100% {
        opacity: .4;
        transform: translate(-50%, -50%) scale(1)
      }

      50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.3)
      }
    }

    .nda h3 {
      font-family: var(--B);
      font-size: 1.8rem;
      font-weight: 700;
      letter-spacing: -.02em;
      text-transform: none;
      color: var(--blue2);
      margin-bottom: 14px;
    }

    .nda p {
      font-size: 1rem;
      color: rgba(255, 255, 255, .55);
      font-weight: 400;
      line-height: 1.75;
      margin-bottom: 24px
    }

    .ncl {
      display: flex;
      flex-direction: column;
      gap: 10px
    }

    .nc {
      font-family: var(--M);
      font-size: 12px;
      letter-spacing: .08em;
      color: rgba(255, 255, 255, .5);
      display: flex;
      align-items: center;
      gap: 10px;
      transition: color .2s;
      font-weight: 500;
    }

    .nc:hover {
      color: rgba(255, 255, 255, .85)
    }

    .nc::before {
      content: '';
      display: inline-block;
      width: 18px;
      height: 18px;
      flex-shrink: 0;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='none' stroke='%232563eb' stroke-width='1.5'/%3E%3Cpath d='M6 10l3 3 5-5' fill='none' stroke='%232563eb' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
    }

    /* Tags cloud */
    .ht {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      padding: 28px;
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: var(--radius)
    }

    .htg {
      background: var(--bg2);
      font-family: var(--M);
      font-size: 10px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--mid);
      padding: 7px 14px;
      border: 1px solid var(--line);
      transition: all .2s;
      cursor: pointer;
      border-radius: var(--radius-sm);
      font-weight: 500;
    }

    .htg:hover {
      background: var(--blue);
      color: var(--white);
      border-color: var(--blue)
    }

    /* ========================================================
   PROCESS SECTION
======================================================== */
    #process {
      padding: 100px 0;
      background: var(--white)
    }

    .prgd {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
      margin-top: 56px;
    }

    .prce {
      padding: 44px 32px;
      border-right: 1px solid var(--line);
      position: relative;
      overflow: hidden;
      transition: background .25s;
      cursor: pointer;
    }

    .prce:last-child {
      border-right: none
    }

    .prce:hover {
      background: var(--dark)
    }

    .prce:hover .prct {
      color: var(--white)
    }

    .prce:hover .prcd {
      color: rgba(255, 255, 255, .5)
    }

    .prce:hover .prcl {
      background: var(--blue2);
      width: 56px
    }

    .prcn {
      font-family: var(--D);
      font-size: 4rem;
      color: #1d4ed8;
      opacity: 1;
      line-height: 1;
      margin-bottom: 22px;
      font-weight: 400;
      transition: opacity .25s, color .25s
    }

    .prce:hover .prcn {
      color: rgba(37, 99, 235, .15);
      opacity: 1
    }

    .prci {
      width: 40px;
      height: 40px;
      margin-bottom: 18px;
      opacity: .55;
      transition: opacity .25s
    }

    .prce:hover .prci {
      opacity: 1
    }

    .prci svg {
      width: 100%;
      height: 100%
    }

    .prcl {
      width: 28px;
      height: 2px;
      background: var(--blue);
      margin-bottom: 18px;
      transition: width .3s, background .25s;
      border-radius: 2px
    }

    .prct {
      font-family: var(--B);
      font-size: 1.2rem;
      font-weight: 700;
      letter-spacing: -.01em;
      margin-bottom: 12px;
      color: var(--ink);
      transition: color .25s
    }

    .prcd {
      font-size: .93rem;
      color: var(--mid);
      font-weight: 400;
      line-height: 1.75;
      transition: color .25s
    }

    /* ========================================================
   TESTIMONIALS — Looping slider
======================================================== */
    #testi {
      padding: 100px 0;
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(circle at top left, rgba(37, 99, 235, .18), transparent 28%),
        linear-gradient(180deg, #0f172a 0%, #111827 100%);
    }

    #testi::before,
    #testi::after {
      content: '';
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
      filter: blur(12px);
      opacity: .5;
    }

    #testi::before {
      width: 260px;
      height: 260px;
      top: -90px;
      right: -80px;
      background: radial-gradient(circle, rgba(37, 99, 235, .18), transparent 70%);
    }

    #testi::after {
      width: 220px;
      height: 220px;
      bottom: -90px;
      left: -70px;
      background: radial-gradient(circle, rgba(59, 130, 246, .12), transparent 72%);
    }

    .teh {
      text-align: center;
      margin-bottom: 46px
    }

    .teh h2 {
      color: var(--white)
    }

    .teh .sk {
      justify-content: center;
      color: var(--blue2)
    }

    .teh .sk::before {
      background: var(--blue2)
    }

    .teh p {
      color: rgba(255, 255, 255, .48);
      margin: 0 auto;
      max-width: 560px
    }

    .tes {
      position: relative;
    }

    .teviewport {
      position: relative;
      overflow: hidden;
      padding: 8px 0 10px;
    }

    .teviewport::before,
    .teviewport::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      width: 88px;
      z-index: 2;
      pointer-events: none;
    }

    .teviewport::before {
      left: 0;
      background: linear-gradient(90deg, rgba(15, 23, 42, 1), rgba(15, 23, 42, 0));
    }

    .teviewport::after {
      right: 0;
      background: linear-gradient(270deg, rgba(15, 23, 42, 1), rgba(15, 23, 42, 0));
    }

    .terail {
      display: flex;
      gap: 24px;
      will-change: transform;
    }

    .tec {
      flex: 0 0 calc((100% - 48px) / 3);
      min-width: 0;
      position: relative;
      padding: 34px 30px 28px;
      border-radius: 24px;
      background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .05));
      border: 1px solid rgba(255, 255, 255, .08);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      box-shadow: 0 18px 50px rgba(0, 0, 0, .2);
      transition: transform .25s, border-color .25s, box-shadow .25s, background .25s;
    }

    .tec::before {
      content: '';
      position: absolute;
      inset: 0 auto auto 0;
      width: 100%;
      height: 1px;
      background: linear-gradient(90deg, rgba(59, 130, 246, 0), rgba(59, 130, 246, .8), rgba(59, 130, 246, 0));
      opacity: .55;
    }

    .tec:hover {
      transform: translateY(-6px);
      border-color: rgba(96, 165, 250, .28);
      background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .07));
      box-shadow: 0 24px 60px rgba(0, 0, 0, .26);
    }

    .tst {
      display: flex;
      gap: 4px;
      margin-bottom: 18px
    }

    .tst svg {
      width: 14px;
      height: 14px
    }

    .tq {
      font-size: .96rem;
      color: rgba(255, 255, 255, .78);
      font-weight: 400;
      line-height: 1.85;
      margin-bottom: 26px;
      position: relative;
      padding-left: 24px;
      font-style: normal;
    }

    .tq::before {
      content: '\201C';
      font-family: var(--D);
      font-size: 4.2rem;
      color: var(--blue2);
      opacity: .22;
      position: absolute;
      top: -12px;
      left: 0;
      line-height: 1;
    }

    .tau {
      display: flex;
      align-items: center;
      gap: 14px;
      padding-top: 18px;
      border-top: 1px solid rgba(255, 255, 255, .08)
    }

    .tai {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      color: white;
      font-family: var(--B);
      font-weight: 700;
      font-size: 1.06rem;
      letter-spacing: -.02em;
      background: linear-gradient(135deg, var(--g1, #2563eb), var(--g2, #1d4ed8));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
    }

    .tan {
      font-family: var(--M);
      font-size: 12px;
      letter-spacing: .1em;
      color: var(--white);
      display: block;
      font-weight: 500
    }

    .tar {
      font-size: .82rem;
      color: rgba(255, 255, 255, .38);
      display: block;
      margin-top: 3px;
      line-height: 1.6
    }

    .tef {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
      margin-top: 28px;
    }

    .teinfo {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .teprog {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .teprog span {
      display: block;
      width: 24px;
      height: 4px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .14);
      transition: width .25s, background .25s, opacity .25s;
      opacity: .7;
    }

    .teprog span.on {
      width: 56px;
      background: var(--blue2);
      opacity: 1;
    }

    .temeta {
      font-family: var(--M);
      font-size: 11px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .42);
    }

    .tectrl {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .tenum {
      min-width: 70px;
      text-align: right;
      font-family: var(--M);
      font-size: 11px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .62);
    }

    .tebtn {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, .1);
      background: rgba(255, 255, 255, .05);
      color: var(--white);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background .2s, border-color .2s, transform .15s, color .2s;
    }

    .tebtn:hover {
      background: var(--blue);
      border-color: var(--blue);
      transform: translateY(-1px);
    }

    .tebtn svg {
      width: 18px;
      height: 18px
    }

    @media(max-width:1100px) {
      .tec {
        flex-basis: calc((100% - 24px) / 2);
      }
    }

    @media(max-width:640px) {
      .teh {
        margin-bottom: 38px;
      }

      .teviewport::before,
      .teviewport::after {
        width: 28px;
      }

      .tec {
        flex-basis: 100%;
        padding: 30px 22px 24px;
      }

      .tef {
        justify-content: center;
      }

      .teinfo {
        align-items: center;
        text-align: center;
      }

      .tectrl {
        width: 100%;
        justify-content: center;
      }

      .tenum {
        min-width: auto;
        text-align: center;
      }
    }

    /* ========================================================
   FAQ SECTION
======================================================== */
    #faq {
      padding: 100px 0;
      background: var(--bg2)
    }

    .fqi {
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      gap: 80px;
      align-items: start
    }

    .fql {
      display: flex;
      flex-direction: column;
      gap: 0
    }

    .fqit {
      border-bottom: 1px solid var(--line)
    }

    .fqit:first-child {
      border-top: 1px solid var(--line)
    }

    .fqq {
      width: 100%;
      background: none;
      border: none;
      text-align: left;
      cursor: pointer;
      padding: 22px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-family: var(--B);
      font-size: 1.05rem;
      font-weight: 600;
      letter-spacing: -.01em;
      color: var(--ink);
      transition: color .2s;
      gap: 16px;
    }

    .fqq:hover {
      color: var(--blue)
    }

    .fqib {
      width: 28px;
      height: 28px;
      border: 1.5px solid var(--line);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all .3s;
    }

    .fqib svg {
      width: 12px;
      height: 12px;
      transition: transform .3s
    }

    .fqit.op .fqib {
      background: var(--blue);
      border-color: var(--blue)
    }

    .fqit.op .fqib svg {
      transform: rotate(45deg)
    }

    .fqit.op .fqib svg path {
      stroke: var(--white)
    }

    .fqa {
      max-height: 0;
      overflow: hidden;
      transition: max-height .4s, padding .3s;
      font-size: .98rem;
      color: var(--mid);
      font-weight: 400;
      line-height: 1.75;
    }

    .fqit.op .fqa {
      max-height: 300px;
      padding-bottom: 22px
    }

    /* ========================================================
   CONTACT SECTION
======================================================== */
    #contact {
      background: var(--dark);
      padding: 100px 0;
      position: relative;
      overflow: hidden
    }

    /* contact watermark removed */
    .coi {
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      gap: 80px
    }

    .col h2 {
      font-size: clamp(2.8rem, 5vw, 5rem);
      font-weight: 800;
      color: var(--white);
      margin-bottom: 28px;
      letter-spacing: -.03em;
    }

    .col h2 em {
      font-style: normal;
      color: var(--blue2)
    }

    .col>p {
      font-size: 1rem;
      color: rgba(255, 255, 255, .45);
      font-weight: 400;
      line-height: 1.8;
      margin-bottom: 36px
    }

    .cdt {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      padding: 18px 0;
      border-bottom: 1px solid rgba(255, 255, 255, .06)
    }

    .cdl {
      font-family: var(--M);
      font-size: 10px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--blue2);
      min-width: 72px;
      padding-top: 2px;
      font-weight: 500
    }

    .cdv {
      font-size: .95rem;
      color: rgba(255, 255, 255, .5);
      font-weight: 400;
      line-height: 1.6
    }

    .cdv a {
      color: rgba(255, 255, 255, .5);
      text-decoration: none;
      transition: color .2s
    }

    .cdv a:hover {
      color: var(--blue2)
    }

    .cf {
      display: flex;
      flex-direction: column;
      gap: 0
    }

    .cfr {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1px;
      margin-bottom: 1px
    }

    .cfr.cff {
      grid-template-columns: 1fr
    }

    .cff2 {
      display: flex;
      flex-direction: column;
      background: rgba(255, 255, 255, .05);
      padding: 18px 22px;
      transition: background .2s
    }

    .cff2:focus-within {
      background: rgba(255, 255, 255, .09)
    }

    .cff2 label {
      font-family: var(--M);
      font-size: 10px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .35);
      margin-bottom: 7px;
      font-weight: 500
    }

    .cff2 input,
    .cff2 select,
    .cff2 textarea {
      background: transparent;
      border: none;
      outline: none;
      color: var(--white);
      font-family: var(--B);
      font-size: 1rem;
      font-weight: 400;
      width: 100%;
    }

    .cff2 textarea {
      min-height: 90px;
      resize: none
    }

    .cff2 input::placeholder,
    .cff2 textarea::placeholder {
      color: rgba(255, 255, 255, .2)
    }

    .cff2 select {
      color: var(--white);
      cursor: pointer
    }

    .cff2 select option {
      background: #1a1a2e
    }

    .cfs {
      margin-top: 1px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: rgba(255, 255, 255, .05);
      padding: 22px;
      gap: 16px;
      flex-wrap: wrap;
    }

    .cfn {
      font-family: var(--M);
      font-size: 11px;
      color: rgba(255, 255, 255, .25);
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 500
    }

    .cfn svg {
      width: 14px;
      height: 14px;
      flex-shrink: 0
    }

    .sbtn {
      background: var(--blue);
      color: var(--white);
      border: none;
      cursor: pointer;
      font-family: var(--M);
      font-size: 12px;
      letter-spacing: .14em;
      text-transform: uppercase;
      font-weight: 600;
      padding: 14px 32px;
      border-radius: var(--radius-sm);
      transition: background .2s;
      flex-shrink: 0;
    }

    .sbtn:hover {
      background: var(--blue-dk)
    }

    #fmsg {
      display: none;
      padding: 14px 22px;
      margin-top: 1px;
      font-family: var(--M);
      font-size: 11px;
      letter-spacing: .1em;
      font-weight: 500
    }

    /* ========================================================
   FOOTER — Dark navy footer
   FIX: All footer links have explicit pointer-events + cursor
======================================================== */
    footer {
      background: var(--dark);
      padding: 56px 48px 28px;
      position: relative;
      z-index: 1;
    }

    .fti {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
    }

    .fti {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 16px;
    }

    .ftt {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      min-width: 0;
      overflow: hidden;
      gap: 40px;
      padding-bottom: 44px;
      border-bottom: 1px solid rgba(255, 255, 255, .07)
    }

    .fbp {
      font-size: .9rem;
      color: rgba(255, 255, 255, .35);
      font-weight: 400;
      line-height: 1.7;
      max-width: 280px;
      margin-top: 14px
    }

    .fc5 h5 {
      font-family: var(--M);
      font-size: 11px;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--blue2);
      margin-bottom: 18px;
      font-weight: 500
    }

    .fc5 ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 10px
    }

    /* FOOTER LINK FIX: explicit pointer events & cursor */
    .fc5 a,
    footer a,
    footer button {
      pointer-events: auto !important;
      cursor: pointer !important;
      font-size: .9rem;
      color: rgba(255, 255, 255, .35);
      text-decoration: none;
      transition: color .2s;
      font-weight: 400;
      display: inline-block;
    }

    .fc5 a:hover,
    footer a:hover {
      color: var(--white)
    }

    .ftb {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 24px;
      flex-wrap: wrap;
      gap: 12px
    }

    .ftb p {
      font-family: var(--M);
      font-size: 11px;
      color: rgba(255, 255, 255, .2);
      font-weight: 500
    }

    /* ========================================================
   RESPONSIVE — Bootstrap breakpoints
======================================================== */
    @media(max-width:1100px) {

      /* Hide 3D cube canvas and floating parts on tablet/mobile - performance */
      #hero canvas {
        display: none !important;
      }

      .hpart {
        display: none !important;
      }

      .sh,
      .wi,
      .b2bi,
      .coi,
      .fqi {
        grid-template-columns: 1fr
      }

      #proof {
        grid-template-columns: 1fr;
        gap: 36px;
        padding: 56px 24px
      }

      .pdiv {
        display: none
      }

      nav {
        padding: 0 24px
      }

      .nl,
      .nbtn {
        display: none
      }

      .ham {
        display: flex
      }

      .sw {
        padding: 0 24px
      }

      .prgd {
        grid-template-columns: 1fr 1fr
      }

      .prce:nth-child(2) {
        border-right: none
      }

      .ftt {
        grid-template-columns: 1fr 1fr
      }

      .pg {
        grid-template-columns: 1fr
      }

      .sg {
        grid-template-columns: 1fr 1fr
      }

      .hpart {
        display: none
      }

      #services,
      #portfolio,
      #why,
      #process,
      #testi,
      #faq,
      #contact,
      #b2b,
      footer {
        padding-left: 0;
        padding-right: 0
      }
    }

    @media(max-width:640px) {
      #hero canvas {
        display: none !important;
      }

      .hpart {
        display: none !important;
      }

      h1 {
        font-size: 2.6rem
      }

      h2 {
        font-size: 2rem
      }

      .hc {
        padding: 48px 20px
      }

      .svr {
        grid-template-columns: 80px 1fr;
        gap: 14px
      }

      .sva {
        display: none
      }

      .prgd {
        grid-template-columns: 1fr
      }

      .prce {
        border-right: none;
        border-bottom: 1px solid var(--line)
      }

      .cfr {
        grid-template-columns: 1fr
      }

      .ftt {
        grid-template-columns: 1fr
      }

      .b2bc {
        grid-template-columns: 1fr
      }

      .hbadges {
        gap: 6px
      }

      footer {
        padding: 40px 20px 20px
      }

      .pcel h3 {
        font-size: 2.5rem
      }
    }

/* ========================================================
   CONTACT SECTION (Copied from index.html)
======================================================== */
#contact {
  background: var(--dark);
  padding: 100px 0;
  position: relative;
  overflow: hidden
}
.coi {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px
}
.col h2 {
  font-size: clamp(2.8rem, 5vw, 5rem);
  font-weight: 800;
  color: var(--white);
  margin-bottom: 28px;
  letter-spacing: -.03em;
}
.col h2 em {
  font-style: normal;
  color: var(--blue2)
}
.col>p {
  font-size: 1rem;
  color: rgba(255, 255, 255, .45);
  font-weight: 400;
  line-height: 1.8;
  margin-bottom: 36px
}
.cdt {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .06)
}
.cdl {
  font-family: var(--M);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue2);
  min-width: 72px;
  padding-top: 2px;
  font-weight: 500
}
.cdv {
  font-size: .95rem;
  color: rgba(255, 255, 255, .5);
  font-weight: 400;
  line-height: 1.6
}
.cdv a {
  color: rgba(255, 255, 255, .5);
  text-decoration: none;
  transition: color .2s
}
.cdv a:hover {
  color: var(--blue2)
}
.cf {
  display: flex;
  flex-direction: column;
  gap: 0
}
.cfr {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-bottom: 1px
}
.cfr.cff {
  grid-template-columns: 1fr
}
.cff2 {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, .05);
  padding: 18px 22px;
  transition: background .2s
}
.cff2:focus-within {
  background: rgba(255, 255, 255, .09)
}
.cff2 label {
  font-family: var(--M);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .35);
  margin-bottom: 7px;
  font-weight: 500
}
.cff2 input,
.cff2 select,
.cff2 textarea {
  background: transparent;
  border: none;
  outline: none;
  color: var(--white);
  font-family: var(--B);
  font-size: 1rem;
  font-weight: 400;
  width: 100%;
}
.cff2 textarea {
  min-height: 90px;
  resize: none
}
.cff2 input::placeholder,
.cff2 textarea::placeholder {
  color: rgba(255, 255, 255, .2)
}
.cff2 select {
  color: var(--white);
  cursor: pointer
}
.cff2 select option {
  background: #1a1a2e
}
.cfs {
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, .05);
  padding: 22px;
  gap: 16px;
  flex-wrap: wrap;
}
.cfn {
  font-family: var(--M);
  font-size: 11px;
  color: rgba(255, 255, 255, .25);
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500
}
.cfn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0
}
.sbtn {
  background: var(--blue);
  color: var(--white);
  border: none;
  cursor: pointer;
  font-family: var(--M);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 14px 32px;
  border-radius: var(--radius-sm);
  transition: background .2s;
  flex-shrink: 0;
}
.sbtn:hover {
  background: var(--blue-dk)
}
#fmsg {
  display: none;
  padding: 14px 22px;
  margin-top: 1px;
  font-family: var(--M);
  font-size: 11px;
  letter-spacing: .1em;
  font-weight: 500
}
@media(max-width:960px) {
  .coi { grid-template-columns: 1fr; gap: 40px }
}
@media(max-width:640px) {
  .cfr { grid-template-columns: 1fr }
}

/* ========================================================
   SHARED RESOURCE SYSTEM
======================================================== */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--blue);
  font-family: var(--M);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 600;
}
.text-link:hover { color: var(--blue-dk) }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  padding: 13px 22px;
  text-decoration: none;
  font-family: var(--M);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  transition: transform .2s, background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.button:hover { transform: translateY(-2px) }
.button-primary {
  background: var(--blue);
  color: var(--white);
  box-shadow: 0 16px 40px rgba(37, 99, 235, .18);
}
.button-primary:hover { background: var(--blue-dk); color: var(--white) }
.button-secondary {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid rgba(17, 24, 39, .12);
}
.button-secondary:hover { border-color: rgba(37, 99, 235, .25); color: var(--blue) }

.site-shell {
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
}

.page-section {
  padding: 96px 0;
}

.hero,
.resources-hero,
.resource-post-hero {
  padding-top: 132px;
}

.split-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  gap: 28px;
  align-items: stretch;
}

.hero-copy h1,
.section-heading h2,
.resources-hero-copy h1,
.resource-post-copy h1 {
  font-family: var(--B);
  font-size: clamp(2.8rem, 5vw, 5rem);
  line-height: .98;
  letter-spacing: -.05em;
  color: var(--ink);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-family: var(--M);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--blue);
}
.eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--blue);
}

.lead,
.section-copy {
  font-size: 1.08rem;
  line-height: 1.9;
  color: var(--mid);
  max-width: 760px;
}

.card {
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 28px;
  padding: 28px;
  box-shadow: 0 22px 60px rgba(15, 23, 42, .08);
}

.card-dark {
  background: linear-gradient(180deg, #0f172a, #172554);
  color: rgba(255, 255, 255, .78);
  border-color: rgba(96, 165, 250, .12);
}
.card-dark h2,
.card-dark h3,
.card-dark .eyebrow,
.card-dark strong { color: var(--white) }

.meta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  font-family: var(--M);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mid);
}

.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(37, 99, 235, .09);
  color: var(--blue);
  border: 1px solid rgba(37, 99, 235, .14);
}

.list-clean {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: inherit;
}

.grid-3,
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.portfolio-card p,
.card p { color: var(--mid) }

.empty-state {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.dd-resources {
  width: 860px;
}

.resource-menu-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
}

.resource-menu-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 240px;
  padding: 28px 24px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  overflow: hidden;
}

.resource-menu-card::after,
.resource-card::after {
  content: '';
  position: absolute;
  inset: -30% auto auto -40%;
  width: 60%;
  height: 180%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.65), rgba(255,255,255,0));
  transform: rotate(18deg) translateX(-220%);
  transition: transform .7s var(--ease);
  pointer-events: none;
}

.resource-menu-card:hover::after,
.resource-card:hover::after {
  transform: rotate(18deg) translateX(320%);
}

.resource-menu-card:hover {
  transform: none;
  border-color: transparent;
}

.resource-menu-kicker {
  font-family: var(--M);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue);
}

.resource-menu-card strong {
  font-size: 1.35rem;
  line-height: 1.25;
  letter-spacing: -.03em;
  color: var(--ink);
}

.resource-menu-card small {
  font-size: .95rem;
  line-height: 1.7;
  color: var(--mid);
}

.resources-hero {
  padding-bottom: 38px;
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, .14), transparent 24%),
    linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

.resources-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);
  gap: 32px;
  align-items: center;
}

.resource-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.resource-hero-badges span,
.resource-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border-radius: 999px;
  background: rgba(37, 99, 235, .06);
  border: 1px solid rgba(37, 99, 235, .1);
  font-family: var(--M);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mid);
}

.resource-feature-card {
  display: grid;
  grid-template-columns: minmax(220px, .95fr) minmax(0, 1.05fr);
  gap: 18px;
  align-items: stretch;
  background: linear-gradient(145deg, #0f172a 0%, #1d4ed8 100%);
  color: rgba(255, 255, 255, .82);
  border-radius: 30px;
  padding: 18px;
  box-shadow: 0 28px 80px rgba(29, 78, 216, .18);
}

.resource-feature-card.is-empty {
  min-height: 320px;
  display: flex;
}

.resource-feature-media {
  min-height: 320px;
  border-radius: 24px;
  overflow: hidden;
  background: rgba(255,255,255,.1);
}

.resource-feature-media img,
.resource-card-media img,
.resource-post-visual-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.resource-feature-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 22px;
}

.resource-feature-body h2 {
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.05;
  letter-spacing: -.05em;
  color: var(--white);
  margin-bottom: 16px;
}

.resource-feature-body p { color: rgba(255,255,255,.72); margin-bottom: 24px; font-size: 1rem; line-height: 1.8 }

.resources-index {
  padding-top: 34px;
}

.resources-toolbar {
  margin-bottom: 28px;
}

.resources-toolbar-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.resource-type-tabs,
.resource-category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.resource-tab,
.resource-category-chip {
  border: 1px solid rgba(148, 163, 184, .18);
  background: var(--paper);
  border-radius: 999px;
  color: var(--ink);
  cursor: pointer;
  transition: transform .2s, border-color .2s, background .2s, color .2s;
}

.resource-tab {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
}

.resource-tab span,
.resource-tab strong {
  font-family: var(--M);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.resource-tab strong {
  color: var(--blue);
}

.resource-tab:hover,
.resource-category-chip:hover,
.resource-tab.is-active,
.resource-category-chip.is-active {
  background: var(--blue);
  color: var(--white);
  border-color: var(--blue);
  transform: translateY(-1px);
}

.resource-tab.is-active strong { color: var(--white) }

.resource-category-chip {
  padding: 10px 16px;
  font-family: var(--M);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.resource-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.resource-card {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  border: 1px solid rgba(148, 163, 184, .16);
  box-shadow: 0 18px 50px rgba(15, 23, 42, .06);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}

.resource-card:hover {
  transform: translateY(-8px);
  border-color: rgba(37, 99, 235, .22);
  box-shadow: 0 24px 70px rgba(15, 23, 42, .12);
}

.resource-card.is-hidden,
.resource-empty-state.is-hidden {
  display: none;
}

.resource-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
}

.resource-card-media {
  height: 240px;
  background: linear-gradient(135deg, #dbeafe, #eff6ff);
}

.resource-card-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
}

.resource-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.resource-card h3 {
  font-size: 1.55rem;
  line-height: 1.18;
  letter-spacing: -.04em;
  color: var(--ink);
}

.resource-card p {
  font-size: .98rem;
  line-height: 1.8;
  color: var(--mid);
}

.resource-card-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--M);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
}

.resource-post-hero {
  padding-bottom: 46px;
  background:
    radial-gradient(circle at 15% 20%, rgba(37, 99, 235, .1), transparent 22%),
    linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

.resource-post-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
  gap: 36px;
  align-items: center;
}

.resource-post-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-size: .95rem;
  color: var(--mid);
}

.resource-post-breadcrumb a {
  color: var(--ink);
  text-decoration: none;
}

.resource-post-breadcrumb a:hover { color: var(--blue) }

.resource-post-copy .lead {
  margin-top: 22px;
  font-size: 1.2rem;
  max-width: 780px;
}

.resource-identity-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}

.resource-person-card,
.resource-identity-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 22px;
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(148,163,184,.16);
  box-shadow: 0 12px 32px rgba(15, 23, 42, .06);
}

.resource-identity-card {
  display: block;
}

.resource-person-avatar {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  background: linear-gradient(135deg, #1d4ed8, #60a5fa);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--D);
  font-size: 1.8rem;
  flex-shrink: 0;
}

.resource-person-card small,
.resource-identity-card small {
  display: block;
  margin-bottom: 6px;
  font-family: var(--M);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mid);
}

.resource-person-card strong,
.resource-identity-card strong {
  display: block;
  font-size: 1.02rem;
  color: var(--ink);
}

.resource-person-card span {
  display: block;
  margin-top: 4px;
  color: var(--mid);
  font-size: .92rem;
}

.resource-post-visual-frame {
  position: relative;
  overflow: hidden;
  min-height: 520px;
  border-radius: 30px;
  background: linear-gradient(135deg, #dbeafe, #eff6ff);
  box-shadow: 0 28px 80px rgba(37, 99, 235, .14);
}

.resource-visual-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(148,163,184,.18);
  font-family: var(--M);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  box-shadow: 0 12px 32px rgba(15, 23, 42, .12);
}

.chip-top { top: 20px; left: 20px }
.chip-bottom { right: 20px; bottom: 20px }

.resource-case-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.resource-case-card h3 {
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -.04em;
  color: var(--ink);
  margin-bottom: 10px;
}

.resource-post-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .46fr);
  gap: 32px;
  align-items: start;
}

.resource-copy {
  max-width: 820px;
  padding-right: 16px;
}

.resource-copy > * + * {
  margin-top: 16px;
}

.resource-copy p {
  max-width: 72ch;
  font-size: 1.08rem;
  line-height: 1.88;
  color: var(--body);
}

.resource-copy h2 {
  margin-top: 34px;
  font-size: clamp(1.9rem, 2.8vw, 2.65rem);
  line-height: 1.1;
  letter-spacing: -.05em;
  color: var(--ink);
}

.resource-copy h3 {
  margin-top: 24px;
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  line-height: 1.24;
  letter-spacing: -.04em;
  color: var(--ink);
}

.resource-copy ul,
.resource-copy ol {
  padding-left: 22px;
  margin: 0 0 18px;
}

.resource-copy li {
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--body);
  margin-bottom: 0;
}

.resource-copy li + li {
  margin-top: 8px;
}

.resource-sidebar {
  position: sticky;
  top: 110px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.resource-side-card {
  border-radius: 24px;
}

.resource-side-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.resource-side-link {
  display: block;
  padding: 14px 16px;
  border-radius: 18px;
  text-decoration: none;
  background: rgba(37, 99, 235, .04);
  border: 1px solid rgba(37, 99, 235, .08);
  transition: transform .2s, border-color .2s, background .2s;
}

.resource-side-link span {
  display: block;
  margin-bottom: 8px;
  font-family: var(--M);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
}

.resource-side-link strong {
  display: block;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--ink);
}

.resource-side-link:hover {
  transform: translateY(-2px);
  background: rgba(37, 99, 235, .08);
  border-color: rgba(37, 99, 235, .16);
}

.resource-comments-section {
  padding-top: 0;
}

.resource-comments-shell {
  display: grid;
  gap: 24px;
}

.resource-comments-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.resource-comments-head h2 {
  margin-bottom: 10px;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: .98;
  letter-spacing: -.05em;
  color: var(--ink);
}

.resource-comments-head p {
  max-width: 680px;
  color: var(--mid);
}

.resource-comments-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(37, 99, 235, .12);
  background: rgba(37, 99, 235, .05);
  color: var(--blue);
  font-family: var(--M);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.resource-comments-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 24px;
  align-items: start;
}

.resource-comment-form-card,
.resource-comment-card,
.resource-comment-empty {
  border-radius: 28px;
}

.resource-comment-form-card h3,
.resource-comment-empty h3 {
  margin-bottom: 12px;
  font-size: 1.7rem;
  line-height: 1.08;
  letter-spacing: -.04em;
  color: var(--ink);
}

.resource-comment-form-card > p:not(.eyebrow),
.resource-comment-empty p:not(.eyebrow) {
  color: var(--mid);
}

.resource-comment-flash {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid transparent;
  line-height: 1.7;
}

.resource-comment-flash.success {
  background: #dcfce7;
  border-color: #bbf7d0;
  color: #166534;
}

.resource-comment-flash.error {
  background: #fee2e2;
  border-color: #fecaca;
  color: #991b1b;
}

.resource-comment-account {
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(37, 99, 235, .05);
  border: 1px solid rgba(37, 99, 235, .12);
  color: var(--body);
}

.resource-comment-account strong {
  color: var(--ink);
}

.resource-comment-form {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.resource-comment-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.resource-comment-form .field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.resource-comment-form label {
  font-family: var(--M);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mid);
}

.resource-comment-form input,
.resource-comment-form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 18px;
  background: #fff;
  color: var(--ink);
  font-family: var(--B);
  outline: none;
}

.resource-comment-form textarea {
  resize: vertical;
  min-height: 160px;
}

.resource-comment-form input:focus,
.resource-comment-form textarea:focus {
  border-color: rgba(37, 99, 235, .42);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .08);
}

.resource-comment-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.resource-comment-note {
  font-family: var(--M);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mid);
}

.resource-comment-list {
  display: grid;
  gap: 16px;
}

.resource-comment-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.resource-comment-avatar {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--blue), var(--blue2));
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--M);
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.resource-comment-top strong {
  display: block;
  color: var(--ink);
  font-size: 1rem;
}

.resource-comment-top span {
  display: block;
  margin-top: 4px;
  color: var(--mid);
  font-size: .92rem;
}

.resource-comment-card p {
  margin: 0;
  line-height: 1.82;
  color: var(--body);
}

.resource-comment-empty {
  text-align: center;
}

@media(max-width:1100px) {
  .resources-hero-grid,
  .resource-post-grid,
  .resource-post-shell,
  .split-panel {
    grid-template-columns: 1fr;
  }

  .resource-grid,
  .resource-case-grid,
  .grid-3,
  .portfolio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .resource-identity-grid {
    grid-template-columns: 1fr;
  }

  .resource-sidebar {
    position: static;
    top: auto;
  }

  .resource-comments-grid {
    grid-template-columns: 1fr;
  }
}

@media(max-width:820px) {
  .resource-menu-grid,
  .resource-feature-card {
    grid-template-columns: 1fr;
  }

  .resource-feature-media,
  .resource-post-visual-frame {
    min-height: 300px;
  }

  .resources-toolbar-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .resource-comment-fields {
    grid-template-columns: 1fr;
  }
}

@media(max-width:640px) {
  .site-shell {
    width: min(100%, calc(100% - 28px));
  }

  .page-section {
    padding: 72px 0;
  }

  .hero,
  .resources-hero,
  .resource-post-hero {
    padding-top: 112px;
  }

  .resource-grid,
  .resource-case-grid,
  .grid-3,
  .portfolio-grid {
    grid-template-columns: 1fr;
  }

  .resource-card-media {
    height: 220px;
  }

  .resource-copy p {
    font-size: 1.04rem;
  }

  .resource-post-copy h1,
  .resources-hero-copy h1 {
    font-size: clamp(2.4rem, 11vw, 3.4rem);
  }

  .resource-comments-head h2 {
    font-size: clamp(2rem, 11vw, 2.8rem);
  }

  .resource-comment-actions .button {
    width: 100%;
  }
}