:root {
      --bg: #07070F;
      --bg2: #0C0B1A;
      --light: #F6F5FF;
      --white: #fff;
      --ink: #0D0C1D;
      --ink2: #2D2B45;
      --muted: #6E6D8A;
      --bdl: rgba(99, 102, 241, .13);
      --p1: #6366F1;
      --p2: #8B5CF6;
      --p3: #06B6D4;
      --g: linear-gradient(135deg, #6366F1, #8B5CF6, #06B6D4);
      --g2: linear-gradient(135deg, #A78BFA, #60A5FA, #34D399);
      --r: 16px;
      --r2: 22px;
    }

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

    html {
      scroll-behavior: smooth
    }

    body {
      font-family: 'Outfit', -apple-system, sans-serif;
      background: var(--bg);
      color: #fff;
      overflow-x: hidden;
      line-height: 1.6
    }

    /* CURSOR */
    #cg,
    #cd {
      display: none
    }

    @media(hover:hover) {
      body {
        cursor: none
      }

      a,
      button {
        cursor: none
      }

      #cg {
        display: block;
        position: fixed;
        width: 360px;
        height: 360px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(99, 102, 241, .13), transparent 65%);
        pointer-events: none;
        z-index: 9998;
        transform: translate(-50%, -50%);
        left: -999px;
        top: -999px;
        will-change: left, top;
        transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), background .3s
      }

      #cd {
        display: block;
        position: fixed;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--g);
        pointer-events: none;
        z-index: 9999;
        transform: translate(-50%, -50%);
        left: -999px;
        top: -999px;
        box-shadow: 0 0 12px rgba(99, 102, 241, .9);
        transition: transform .25s cubic-bezier(.34, 1.56, .64, 1)
      }
    }

    /* ═══════════════════════
   NAV — LINKS VISIBLE
═══════════════════════ */
    .nav {
      position: fixed !important;
      top: 0;
      left: 0;
      right: 0;
      z-index: 400;
      display: flex !important;
      flex-direction: row !important;
      flex-wrap: nowrap !important;
      align-items: center !important;
      justify-content: space-between !important;
      padding: 0 40px;
      height: 68px;
      min-height: 68px;
      max-height: 68px;
      background: transparent;
      border-bottom: 1px solid transparent;
      transition: background .4s, border-color .4s;
      overflow: hidden;
    }

    nav.scrolled {
      background: rgba(7, 7, 15, .92) !important;
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border-color: rgba(255, 255, 255, .07) !important;
    }

    /* Logo — fixed left, no shrink */
    .nl {
      display: flex !important;
      flex-direction: column;
      flex: 0 0 auto !important;
      flex-shrink: 0 !important;
      cursor: pointer;
      user-select: none;
      text-decoration: none;
      margin-right: auto;
    }

    .nl-name {
      font-size: 24px;
      font-weight: 700;
      letter-spacing: -.04em;
      background: var(--g);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      line-height: 1.2;
      white-space: nowrap
    }

    .nl-sub {
      font-size: 10px;
      font-weight: 500;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .65);
      white-space: nowrap
    }

    /* Center links — absolutely centered */
    .nav-links {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      display: flex !important;
      align-items: center;
      gap: 2px;
      white-space: nowrap;
    }

    .nav-links a {
      display: inline-block;
      font-size: 14px;
      font-weight: 500;
      color: rgba(255, 255, 255, .6);
      text-decoration: none;
      padding: 7px 14px;
      border-radius: 10px;
      transition: color .2s, background .2s;
      white-space: nowrap;
    }

    .nav-links a:hover {
      color: #fff;
      background: rgba(255, 255, 255, .08)
    }

    /* Right side — fixed right, no shrink */
    .nr {
      display: flex !important;
      align-items: center;
      gap: 10px;
      flex: 0 0 auto !important;
      flex-shrink: 0 !important;
      margin-left: auto;
    }

    .lt {
      display: flex;
      background: rgba(255, 255, 255, .07);
      border: 1px solid rgba(255, 255, 255, .11);
      border-radius: 999px;
      padding: 3px;
      gap: 2px
    }

    .lb {
      padding: 5px 13px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .08em;
      border: none;
      cursor: pointer;
      transition: background .2s, color .2s;
      background: transparent;
      color: rgba(255, 255, 255, .38)
    }

    .lb.active {
      background: #fff;
      color: var(--ink)
    }

    .nc {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 22px;
      background: var(--g);
      color: #fff;
      font-size: 13px;
      font-weight: 600;
      border: none;
      border-radius: 999px;
      cursor: pointer;
      box-shadow: 0 0 22px rgba(99, 102, 241, .5);
      transition: box-shadow .3s, transform .2s;
      white-space: nowrap
    }

    .nc:hover {
      box-shadow: 0 0 36px rgba(99, 102, 241, .75);
      transform: scale(1.04) translateY(-1px)
    }

    .nc::after {
      content: '';
      position: absolute;
      inset: -5px;
      border-radius: 999px;
      border: 1.5px solid rgba(139, 92, 246, .5);
      animation: ring 2.5s ease-in-out infinite;
      pointer-events: none
    }

    @keyframes ring {

      0%,
      100% {
        opacity: .7;
        transform: scale(1)
      }

      50% {
        opacity: 0;
        transform: scale(1.13)
      }
    }

    .nci {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .2);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      transition: transform .25s
    }

    .nc:hover .nci {
      transform: translateX(3px)
    }

    /* Hamburger — mobile ONLY */
    .ham {
      display: none;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 5px;
      width: 40px;
      height: 40px;
      background: rgba(255, 255, 255, .07);
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 10px;
      cursor: pointer
    }

    .hb {
      width: 18px;
      height: 2px;
      background: rgba(255, 255, 255, .7);
      border-radius: 2px;
      transition: transform .3s, opacity .3s
    }

    .ham.open .hb:nth-child(1) {
      transform: translateY(7px) rotate(45deg)
    }

    .ham.open .hb:nth-child(2) {
      opacity: 0
    }

    .ham.open .hb:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg)
    }

    /* Full-screen mobile menu */
    .fmenu {
      position: fixed;
      inset: 0;
      z-index: 350;
      background: rgba(7, 7, 15, .97);
      backdrop-filter: blur(32px);
      -webkit-backdrop-filter: blur(32px);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      opacity: 0;
      pointer-events: none;
      transition: opacity .35s
    }

    .fmenu.open {
      opacity: 1;
      pointer-events: all
    }

    .fm-a {
      font-size: clamp(26px, 5vw, 44px);
      font-weight: 700;
      letter-spacing: -.04em;
      color: rgba(255, 255, 255, .45);
      text-decoration: none;
      padding: 10px 28px;
      border-radius: var(--r2);
      transition: color .2s, background .2s;
      display: flex;
      align-items: center;
      gap: 14px
    }

    .fm-a:hover {
      color: #fff;
      background: rgba(255, 255, 255, .05)
    }

    .fm-n {
      font-size: 11px;
      font-weight: 500;
      color: rgba(255, 255, 255, .18);
      letter-spacing: .1em
    }

    .fm-cta {
      margin-top: 20px;
      padding: 15px 44px;
      background: var(--g);
      color: #fff;
      font-size: 15px;
      font-weight: 600;
      border: none;
      border-radius: 999px;
      cursor: pointer;
      box-shadow: 0 8px 32px rgba(99, 102, 241, .5)
    }

    .fm-bot {
      position: absolute;
      bottom: 36px;
      display: flex;
      gap: 28px
    }

    .fm-bot a {
      font-size: 13px;
      color: rgba(255, 255, 255, .28);
      text-decoration: none;
      transition: color .2s
    }

    .fm-bot a:hover {
      color: #fff
    }

    /* AURORA */
    .blob {
      position: absolute;
      border-radius: 50%;
      pointer-events: none
    }

    .b1 {
      width: 700px;
      height: 700px;
      background: radial-gradient(circle, rgba(99, 102, 241, .48), transparent 65%);
      top: -200px;
      left: -200px;
      animation: b1 14s ease-in-out infinite
    }

    .b2 {
      width: 550px;
      height: 550px;
      background: radial-gradient(circle, rgba(139, 92, 246, .38), transparent 65%);
      top: -80px;
      right: -120px;
      animation: b2 16s ease-in-out infinite
    }

    .b3 {
      width: 480px;
      height: 480px;
      background: radial-gradient(circle, rgba(6, 182, 212, .32), transparent 65%);
      bottom: -80px;
      left: 42%;
      animation: b3 12s ease-in-out infinite
    }

    .b4 {
      width: 360px;
      height: 360px;
      background: radial-gradient(circle, rgba(244, 114, 182, .22), transparent 65%);
      bottom: 60px;
      right: -60px;
      animation: b4 18s ease-in-out infinite
    }

    @keyframes b1 {

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

      40% {
        transform: translate(80px, 60px)
      }

      70% {
        transform: translate(-40px, 80px)
      }
    }

    @keyframes b2 {

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

      35% {
        transform: translate(-70px, 40px)
      }

      75% {
        transform: translate(30px, -50px)
      }
    }

    @keyframes b3 {

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

      50% {
        transform: translateX(-40px) translateY(-30px)
      }
    }

    @keyframes b4 {

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

      60% {
        transform: translate(-60px, -70px)
      }
    }

    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(28px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    @keyframes shimmer {
      0% {
        background-position: 0% 50%
      }

      50% {
        background-position: 100% 50%
      }

      100% {
        background-position: 0% 50%
      }
    }

    @keyframes glow {

      0%,
      100% {
        opacity: 1;
        box-shadow: 0 0 6px rgba(99, 102, 241, .9)
      }

      50% {
        opacity: .5;
        box-shadow: 0 0 14px rgba(99, 102, 241, .4)
      }
    }

    /* HERO */
    .hero {
      position: relative;
      min-height: 100vh;
      display: grid;
      grid-template-columns: minmax(0, 574px) minmax(0, 574px);
      justify-content: center;
      align-items: center;
      gap: 52px;
      padding: 120px 52px 80px;
      overflow: hidden;
    }

    .hdots {
      position: absolute;
      inset: 0;
      background-image: radial-gradient(rgba(255, 255, 255, .1) 1px, transparent 1px);
      background-size: 36px 36px;
      opacity: .5
    }

    .hl {
      position: relative;
      z-index: 2
    }

    .hbg {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(255, 255, 255, .06);
      border: 1px solid rgba(255, 255, 255, .11);
      border-radius: 999px;
      padding: 6px 18px;
      font-size: 13px;
      font-weight: 500;
      color: rgba(255, 255, 255, .6);
      margin-bottom: 28px;
      animation: fadeUp .7s ease both
    }

    .bp {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--g);
      animation: glow 2s infinite
    }

    .hero h1 {
      font-size: clamp(38px, 5.5vw, 66px);
      font-weight: 700;
      line-height: 1.02;
      letter-spacing: -.04em;
      margin-bottom: 22px;
      animation: fadeUp .8s .1s ease both
    }

    .hw {
      color: #fff;
      display: block
    }

    .hg {
      display: block;
      background: var(--g2);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      background-size: 200%;
      animation: shimmer 4s linear infinite
    }

    .hsub {
      font-size: 16px;
      color: rgba(255, 255, 255, .48);
      line-height: 1.75;
      max-width: 440px;
      margin-bottom: 36px;
      animation: fadeUp .9s .2s ease both
    }

    .hbtns {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 52px;
      animation: fadeUp 1s .3s ease both
    }

    .bg {
      padding: 15px 30px;
      background: var(--g);
      color: #fff;
      font-size: 14px;
      font-weight: 600;
      border: none;
      border-radius: 999px;
      cursor: pointer;
      box-shadow: 0 8px 28px rgba(99, 102, 241, .45);
      transition: transform .25s, box-shadow .3s;
      display: inline-flex;
      align-items: center;
      gap: 8px
    }

    .bg:hover {
      box-shadow: 0 12px 40px rgba(99, 102, 241, .65);
      transform: translateY(-2px)
    }

    .bo {
      padding: 15px 30px;
      background: rgba(255, 255, 255, .05);
      color: #fff;
      font-size: 14px;
      font-weight: 600;
      border: 1px solid rgba(255, 255, 255, .14);
      border-radius: 999px;
      cursor: pointer;
      transition: background .2s, transform .25s
    }

    .bo:hover {
      background: rgba(255, 255, 255, .1);
      transform: translateY(-2px)
    }

    .hstats {
      display: flex;
      gap: 36px;
      flex-wrap: wrap;
      padding-top: 36px;
      border-top: 1px solid rgba(255, 255, 255, .07);
      animation: fadeUp 1s .45s ease both
    }

    .hs-v {
      font-size: 28px;
      font-weight: 700;
      letter-spacing: -.03em;
      line-height: 1;
      background: var(--g2);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text
    }

    .hs-l {
      font-size: 11px;
      color: rgba(255, 255, 255, .32);
      font-weight: 500;
      margin-top: 5px;
      letter-spacing: .04em
    }

    /* DASHBOARD */
    .hr {
      position: relative;
      z-index: 2;
      animation: fadeUp 1s .5s ease both
    }

    .db {
      background: rgba(12, 11, 26, .9);
      border: 1px solid rgba(255, 255, 255, .09);
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 40px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(99, 102, 241, .12), inset 0 1px 0 rgba(255, 255, 255, .06)
    }

    .dbc {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 13px 18px;
      border-bottom: 1px solid rgba(255, 255, 255, .05);
      background: rgba(255, 255, 255, .02)
    }

    .dc {
      width: 10px;
      height: 10px;
      border-radius: 50%
    }

    .dr {
      background: #FF5F56
    }

    .dy {
      background: #FFBD2E
    }

    .dg_ {
      background: #27C93F
    }

    .dbt {
      font-size: 11px;
      font-weight: 600;
      color: rgba(255, 255, 255, .25);
      letter-spacing: .1em;
      text-transform: uppercase;
      margin: 0 auto
    }

    .dbb {
      padding: 18px
    }

    .dbs {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-bottom: 14px
    }

    .ds {
      background: rgba(99, 102, 241, .08);
      border: 1px solid rgba(99, 102, 241, .14);
      border-radius: 12px;
      padding: 12px;
      text-align: center
    }

    .dsv {
      font-size: 20px;
      font-weight: 700;
      color: #fff;
      letter-spacing: -.02em;
      line-height: 1
    }

    .dsl {
      font-size: 10px;
      color: rgba(255, 255, 255, .33);
      font-weight: 500;
      margin-top: 3px
    }

    .dsd {
      font-size: 9px;
      font-weight: 600;
      color: #34D399;
      margin-top: 2px
    }

    .dch {
      background: rgba(255, 255, 255, .02);
      border-radius: 12px;
      padding: 14px;
      margin-bottom: 12px;
      border: 1px solid rgba(255, 255, 255, .04)
    }

    .dcl {
      font-size: 10px;
      color: rgba(255, 255, 255, .28);
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
      margin-bottom: 10px
    }

    .cbars {
      display: flex;
      align-items: flex-end;
      gap: 5px;
      height: 56px
    }

    .cb {
      flex: 1;
      border-radius: 4px 4px 0 0;
      position: relative;
      overflow: hidden;
      background: rgba(99, 102, 241, .15)
    }

    .cb::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: var(--g);
      border-radius: 4px 4px 0 0;
      animation: bUp .9s ease both
    }

    @keyframes bUp {
      from {
        height: 0
      }

      to {
        height: 100%
      }
    }

    .cb:nth-child(1) {
      height: 32%
    }

    .cb:nth-child(1)::after {
      animation-delay: .1s
    }

    .cb:nth-child(2) {
      height: 50%
    }

    .cb:nth-child(2)::after {
      animation-delay: .2s
    }

    .cb:nth-child(3) {
      height: 43%
    }

    .cb:nth-child(3)::after {
      animation-delay: .3s
    }

    .cb:nth-child(4) {
      height: 68%
    }

    .cb:nth-child(4)::after {
      animation-delay: .4s
    }

    .cb:nth-child(5) {
      height: 58%
    }

    .cb:nth-child(5)::after {
      animation-delay: .5s
    }

    .cb:nth-child(6) {
      height: 82%
    }

    .cb:nth-child(6)::after {
      animation-delay: .6s
    }

    .cb:nth-child(7) {
      height: 96%
    }

    .cb:nth-child(7)::after {
      animation-delay: .7s;
      background: linear-gradient(180deg, #A78BFA, #6366F1)
    }

    .dfd {
      display: flex;
      flex-direction: column;
      gap: 6px
    }

    .fi {
      display: flex;
      align-items: center;
      gap: 9px;
      background: rgba(255, 255, 255, .03);
      border: 1px solid rgba(255, 255, 255, .05);
      border-radius: 10px;
      padding: 9px 12px;
      opacity: 0;
      animation: sR .5s ease both
    }

    .fi:nth-child(1) {
      animation-delay: .9s
    }

    .fi:nth-child(2) {
      animation-delay: 1.5s
    }

    .fi:nth-child(3) {
      animation-delay: 2.1s
    }

    @keyframes sR {
      from {
        opacity: 0;
        transform: translateX(14px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    .fic {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      flex-shrink: 0
    }

    .fg_ {
      background: rgba(52, 211, 153, .14)
    }

    .fb_ {
      background: rgba(96, 165, 250, .14)
    }

    .fp_ {
      background: rgba(167, 139, 250, .14)
    }

    .fit {
      flex: 1;
      min-width: 0
    }

    .fiti {
      font-size: 12px;
      font-weight: 600;
      color: #fff;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .fis {
      font-size: 10px;
      color: rgba(255, 255, 255, .32);
      margin-top: 1px
    }

    .fitm {
      font-size: 10px;
      color: rgba(255, 255, 255, .22);
      white-space: nowrap
    }

    /* TICKERS */
    .tkr {
      background: rgba(99, 102, 241, .05);
      border-top: 1px solid rgba(99, 102, 241, .12);
      border-bottom: 1px solid rgba(99, 102, 241, .12);
      padding: 12px 0;
      overflow: hidden
    }

    .tkt {
      display: flex;
      animation: tm 22s linear infinite;
      width: max-content
    }

    .tkt:hover {
      animation-play-state: paused;
    }

    .ti {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0 36px;
      white-space: nowrap;
      font-size: 13px;
      font-weight: 500;
      color: rgba(255, 255, 255, .38);
      border-right: 1px solid rgba(255, 255, 255, .06)
    }

    .td {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--g);
      flex-shrink: 0
    }

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

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

    /* ═══════════════════════════════
   TRUSTED LOGOS SECTION
═══════════════════════════════ */
    .logos-section {
      background: var(--bg2);
      padding: 64px 52px;
      border-top: 1px solid rgba(255, 255, 255, .04);
      border-bottom: 1px solid rgba(255, 255, 255, .04);
    }

    .logos-label {
      text-align: center;
      font-size: 14px;
      font-weight: 600;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .38);
      margin-bottom: 36px;
    }

    .logos-label::before,
    .logos-label::after {
      content: '';
      display: inline-block;
      width: 80px;
      height: 1px;
      background: rgba(255, 255, 255, .12);
      vertical-align: middle;
      margin: 0 16px
    }

    .logos-grid {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap
    }

    .logo-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 22px 28px;
      min-width: 165px;
      min-height: 155px;
      background: rgba(255, 255, 255, .04);
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 14px;
      position: relative;
      transition: background .3s, border-color .3s, transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
      cursor: default;
    }

    .logo-card:hover {
      background: rgba(255, 255, 255, .08);
      border-color: rgba(255, 255, 255, .22);
      transform: scale(1.22);
      box-shadow: 0 12px 40px rgba(99, 102, 241, .18);
      z-index: 10;
    }

    .logo-text {
      font-size: 14px;
      font-weight: 700;
      color: rgba(255, 255, 255, .45);
      letter-spacing: .06em;
      text-transform: uppercase;
      text-align: center;
      line-height: 1.2
    }

    .logo-card.featured .logo-text {
      color: rgba(255, 255, 255, .65)
    }

    /* Logo ticker — icon wrapper (consistent height) */
    .lc-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 78px;
      transition: transform .35s cubic-bezier(.34,1.56,.64,1);
    }

    .logo-card:hover .lc-icon {
      transform: scale(1.14);
    }

    /* Logo ticker — real client images */
    .logo-img {
      max-height: 72px;
      max-width: 150px;
      width: auto;
      object-fit: contain;
      filter: grayscale(1) brightness(1.4);
      opacity: 0.5;
      transition: opacity .35s, filter .35s;
    }

    .logo-card:hover .logo-img {
      filter: none;
      opacity: 0.92;
    }

    /* For dark/black logos on dark background — invert to white */
    .logo-img-invert {
      filter: invert(1) grayscale(1) brightness(1.1);
      opacity: 0.55;
    }

    .logo-card:hover .logo-img-invert {
      filter: invert(1);
      opacity: 0.92;
    }

    /* Logo ticker — company name label */
    .lc-name {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .28);
      text-align: center;
      line-height: 1.3;
      white-space: nowrap;
      transition: color .3s;
    }

    .logo-card:hover .lc-name {
      color: rgba(255, 255, 255, .72);
    }

    /* SVG icons — muted by default, accent on hover */
    .logo-card svg {
      color: rgba(255, 255, 255, .28);
      transition: color .35s;
    }

    .logo-card:hover .lc-teal   { color: #06B6D4; }
    .logo-card:hover .lc-indigo { color: #6366F1; }
    .logo-card:hover .lc-purple { color: #A78BFA; }
    .logo-card:hover .lc-green  { color: #10B981; }

    /* ═══════════════════════════
   STATS SECTION (like image 1)
═══════════════════════════ */
    .stats-section {
      background: var(--bg2);
      padding: 88px 52px;
    }

    .stats-label {
      text-align: center;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--p1);
      margin-bottom: 20px;
    }

    .stats-headline {
      font-size: clamp(32px, 5vw, 56px);
      font-weight: 700;
      letter-spacing: -.04em;
      color: #fff;
      text-align: center;
      margin-bottom: 52px;
      line-height: 1.05;
    }

    .stats-headline em {
      font-style: normal;
      background: var(--g2);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px
    }

    .stat-card {
      background: rgba(255, 255, 255, .04);
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: var(--r2);
      padding: 32px 24px;
      text-align: center;
      transition: background .25s, transform .3s;
    }

    .stat-card:hover {
      background: rgba(255, 255, 255, .07);
      transform: translateY(-4px)
    }

    .stat-num {
      font-size: clamp(36px, 5vw, 52px);
      font-weight: 700;
      letter-spacing: -.04em;
      background: var(--g2);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      line-height: 1;
      margin-bottom: 14px;
    }

    .stat-text {
      font-size: 15px;
      color: rgba(255, 255, 255, .45);
      line-height: 1.6
    }

    /* SHARED */
    .sd {
      background: var(--bg2);
      border-top: 1px solid rgba(255, 255, 255, .04)
    }

    .sl {
      background: var(--light)
    }

    .sw {
      background: var(--white);
      border-top: 1px solid rgba(0, 0, 0, .05)
    }

    section {
      padding: 88px 52px
    }

    .sbg {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 999px;
      padding: 5px 16px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .07em;
      text-transform: uppercase;
      margin-bottom: 18px
    }

    .sbgd {
      background: rgba(99, 102, 241, .1);
      border: 1px solid rgba(99, 102, 241, .22);
      color: var(--p1)
    }

    .sbgl {
      background: rgba(99, 102, 241, .07);
      border: 1px solid rgba(99, 102, 241, .18);
      color: var(--p1)
    }

    .sh2 {
      font-size: clamp(34px, 5vw, 52px);
      font-weight: 700;
      letter-spacing: -.04em;
      line-height: 1.04;
      margin-bottom: 14px
    }

    .sh2d {
      color: #fff
    }

    .sh2l {
      color: var(--ink)
    }

    .sh2 em {
      font-style: normal;
      background: var(--g2);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text
    }

    .sh2l em {
      background: linear-gradient(135deg, #6366F1, #06B6D4);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text
    }

    .ssub {
      font-size: 16px;
      line-height: 1.75;
      max-width: 520px;
      margin-bottom: 52px
    }

    .ssubd {
      color: rgba(255, 255, 255, .42)
    }

    .ssubl {
      color: var(--muted)
    }

    /* PAIN */
    .pg {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px
    }

    .pc {
      background: var(--white);
      border: 1px solid var(--bdl);
      border-radius: var(--r2);
      padding: 30px;
      transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s;
      cursor: default
    }

    .pc:hover {
      transform: translateY(-6px);
      box-shadow: 0 20px 52px rgba(99, 102, 241, .1)
    }

    .pci {
      width: 50px;
      height: 50px;
      border-radius: 16px;
      background: var(--g);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      margin-bottom: 18px;
      box-shadow: 0 8px 20px rgba(99, 102, 241, .3);
      transition: transform .3s cubic-bezier(.34, 1.56, .64, 1)
    }

    .pc:hover .pci {
      transform: scale(1.15) rotate(-8deg)
    }

    .pct {
      font-size: 17px;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 8px;
      letter-spacing: -.02em
    }

    .pcp {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.75
    }

    .pcb {
      height: 3px;
      background: #EEE;
      border-radius: 999px;
      margin-top: 18px;
      overflow: hidden
    }

    .pcf {
      height: 100%;
      border-radius: 999px;
      background: var(--g);
      width: 0;
      transition: width 1.3s cubic-bezier(.4, 0, .2, 1)
    }

    /* SERVICES */
    .svgg {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px
    }

    .svc {
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.01) 100%);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-top: 1px solid rgba(255, 255, 255, 0.15);
      border-left: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
      border-radius: var(--r2);
      padding: 32px;
      position: relative;
      overflow: hidden;
      cursor: default;
      transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), box-shadow .4s
    }

    .svc::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 1.5px;
      background: var(--cg, var(--g));
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: destination-out;
      mask-composite: exclude;
      opacity: 0;
      transition: opacity .35s;
      pointer-events: none
    }

    .svc::before {
      content: '';
      position: absolute;
      top: -20px;
      left: -20px;
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background: var(--cgl, rgba(99, 102, 241, .1));
      filter: blur(24px);
      opacity: 0;
      transition: opacity .35s
    }

    .svc:hover {
      transform: translateY(-8px);
      box-shadow: 0 24px 50px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    }

    .svc:hover::after,
    .svc:hover::before {
      opacity: 1
    }

    .svc:nth-child(1) {
      --cg: linear-gradient(135deg, #6366F1, #8B5CF6);
      --cgl: rgba(99, 102, 241, .15)
    }

    .svc:nth-child(2) {
      --cg: linear-gradient(135deg, #8B5CF6, #A78BFA);
      --cgl: rgba(139, 92, 246, .15)
    }

    .svc:nth-child(3) {
      --cg: linear-gradient(135deg, #06B6D4, #38BDF8);
      --cgl: rgba(6, 182, 212, .12)
    }

    .svc:nth-child(4) {
      --cg: linear-gradient(135deg, #14B8A6, #34D399);
      --cgl: rgba(20, 184, 166, .12)
    }

    .svc:nth-child(5) {
      --cg: linear-gradient(135deg, #10B981, #34D399);
      --cgl: rgba(16, 185, 129, .12)
    }

    .svc:nth-child(6) {
      --cg: linear-gradient(135deg, #A78BFA, #6366F1);
      --cgl: rgba(167, 139, 250, .15)
    }

    .svi {
      width: 52px;
      height: 52px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      margin-bottom: 20px;
      transition: transform .35s cubic-bezier(.34, 1.56, .64, 1)
    }

    .svc:nth-child(1) .svi {
      background: rgba(99, 102, 241, .12);
      box-shadow: 0 4px 14px rgba(99, 102, 241, .2)
    }

    .svc:nth-child(2) .svi {
      background: rgba(139, 92, 246, .12);
      box-shadow: 0 4px 14px rgba(139, 92, 246, .2)
    }

    .svc:nth-child(3) .svi {
      background: rgba(6, 182, 212, .12);
      box-shadow: 0 4px 14px rgba(6, 182, 212, .2)
    }

    .svc:nth-child(4) .svi {
      background: rgba(20, 184, 166, .12);
      box-shadow: 0 4px 14px rgba(20, 184, 166, .2)
    }

    .svc:nth-child(5) .svi {
      background: rgba(16, 185, 129, .12);
      box-shadow: 0 4px 14px rgba(16, 185, 129, .2)
    }

    .svc:nth-child(6) .svi {
      background: rgba(167, 139, 250, .12);
      box-shadow: 0 4px 14px rgba(167, 139, 250, .2)
    }

    .svc:hover .svi {
      transform: scale(1.18) rotate(-8deg)
    }

    .svn {
      font-size: 11px;
      font-weight: 700;
      color: rgba(255, 255, 255, .4);
      letter-spacing: .1em;
      text-transform: uppercase;
      margin-bottom: 8px
    }

    .svt {
      font-size: 18px;
      font-weight: 700;
      color: #fff;
      letter-spacing: -.025em;
      margin-bottom: 10px;
      line-height: 1.2
    }

    .svp {
      font-size: 15px;
      color: rgba(255, 255, 255, .55);
      line-height: 1.8
    }

    .svtg {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-top: 18px
    }

    .st {
      font-size: 11px;
      font-weight: 500;
      padding: 3px 10px;
      border-radius: 999px;
      background: rgba(99, 102, 241, .1);
      border: 1px solid rgba(99, 102, 241, .2);
      color: #fff
    }

    /* TECH TICKER */
    .ttkr {
      background: var(--light);
      border-top: 1px solid var(--bdl);
      border-bottom: 1px solid var(--bdl);
      padding: 14px 0;
      overflow: hidden
    }

    .ttkt {
      display: flex;
      animation: tm 28s linear infinite reverse;
      width: max-content
    }

    .tti {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 32px;
      white-space: nowrap;
      font-size: 13px;
      font-weight: 600;
      color: var(--muted);
      border-right: 1px solid var(--bdl)
    }

    .ttd {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      flex-shrink: 0
    }

    /* RESULTS */
    .rg {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px
    }

    .rc {
      background: var(--white);
      border: 1px solid var(--bdl);
      border-radius: var(--r2);
      padding: 30px;
      position: relative;
      overflow: hidden;
      transition: transform .3s, box-shadow .3s
    }

    .rc:hover {
      transform: translateY(-5px);
      box-shadow: 0 20px 52px rgba(99, 102, 241, .09)
    }

    .rct {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: var(--g)
    }

    .rcl {
      font-size: 11px;
      font-weight: 700;
      color: var(--p1);
      letter-spacing: .08em;
      text-transform: uppercase;
      margin-bottom: 22px
    }

    .rcm {
      display: flex;
      align-items: baseline;
      flex-wrap: wrap;
      margin-bottom: 8px
    }

    .rcb {
      font-size: 20px;
      font-weight: 600;
      color: rgba(0, 0, 0, .2);
      text-decoration: line-through
    }

    .rca {
      font-size: 18px;
      color: var(--p3);
      margin: 0 8px
    }

    .rcaf {
      font-size: 38px;
      font-weight: 700;
      color: var(--ink);
      letter-spacing: -.04em
    }

    .rcla {
      font-size: 13px;
      color: var(--muted);
      margin-bottom: 16px;
      line-height: 1.5
    }

    .rcbw {
      margin-bottom: 14px
    }

    .rcbl {
      display: flex;
      justify-content: space-between;
      font-size: 11px;
      color: var(--muted);
      margin-bottom: 5px;
      font-weight: 500
    }

    .rcbt {
      height: 6px;
      background: #F0EDFF;
      border-radius: 999px;
      overflow: hidden
    }

    .rcbf {
      height: 100%;
      background: var(--g);
      border-radius: 999px;
      width: 0;
      transition: width 1.4s cubic-bezier(.4, 0, .2, 1)
    }

    .rcd {
      height: 1px;
      background: var(--bdl);
      margin: 14px 0
    }

    .rcq {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.7;
      font-style: italic;
      margin-bottom: 8px
    }

    .rcau {
      font-size: 11px;
      color: rgba(0, 0, 0, .32);
      font-weight: 500
    }

    /* ═══════════════════════════════
   PROJECTS — VIDEO STYLE
═══════════════════════════════ */
    .proj-section {
      background: var(--bg);
      padding: 88px 52px
    }

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

    .proj-card {
      position: relative;
      overflow: hidden;
      border-radius: 20px;
      cursor: pointer;
      text-decoration: none;
      display: block;
      transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
    }

    .proj-card:hover {
      transform: scale(1.02)
    }

    .proj-card.large {
      min-height: 400px
    }

    .proj-card.small {
      min-height: 260px
    }

    .proj-card.full {
      min-height: 260px;
      grid-column: 1/-1
    }

    .proj-bg {
      position: absolute;
      inset: 0;
      transition: transform .6s cubic-bezier(.4, 0, .2, 1)
    }

    .proj-card:hover .proj-bg {
      transform: scale(1.06)
    }

    /* Project gradient backgrounds */
    .pee .proj-bg {
      background: linear-gradient(135deg, #1a1063 0%, #2d2891 40%, #0891b2 100%)
    }

    .pbk .proj-bg {
      background: linear-gradient(135deg, #4a0e2e 0%, #9d174d 50%, #f472b6 100%)
    }

    .peb .proj-bg {
      background: linear-gradient(135deg, #0c1a2e 0%, #1e3a5f 50%, #2563eb 100%)
    }

    .pgx .proj-bg {
      background: linear-gradient(135deg, #1a0f00 0%, #78350f 50%, #d97706 100%)
    }

    .piw .proj-bg {
      background: linear-gradient(135deg, #0a0a0a 0%, #111827 40%, #374151 100%)
    }

    .pav .proj-bg {
      background: linear-gradient(135deg, #0f1c2e 0%, #1e40af 50%, #0ea5e9 100%)
    }

    /* Browser mockup inside card */
    .proj-browser {
      position: absolute;
      top: 24px;
      left: 50%;
      transform: translateX(-50%);
      width: calc(100% - 48px);
      background: rgba(0, 0, 0, .3);
      border-radius: 10px;
      border: 1px solid rgba(255, 255, 255, .15);
      overflow: hidden;
    }

    .pb-bar {
      height: 28px;
      background: rgba(0, 0, 0, .3);
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 0 12px;
      border-bottom: 1px solid rgba(255, 255, 255, .08)
    }

    .pb-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%
    }

    .pb-d1 {
      background: #FF5F56
    }

    .pb-d2 {
      background: #FFBD2E
    }

    .pb-d3 {
      background: #27C93F
    }

    .pb-url {
      flex: 1;
      height: 14px;
      background: rgba(255, 255, 255, .08);
      border-radius: 4px;
      margin: 0 10px
    }

    .pb-body {
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 7px
    }

    .pb-h {
      height: 12px;
      border-radius: 4px;
      background: rgba(255, 255, 255, .25)
    }

    .pb-t {
      height: 7px;
      border-radius: 3px;
      background: rgba(255, 255, 255, .15)
    }

    .pb-t2 {
      height: 7px;
      border-radius: 3px;
      background: rgba(255, 255, 255, .1);
      width: 70%
    }

    .pb-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
      margin-top: 4px
    }

    .pb-card {
      height: 36px;
      border-radius: 6px;
      background: rgba(255, 255, 255, .12)
    }

    /* Overlay info */
    .proj-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .2) 50%, transparent 100%);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 28px;
    }

    .proj-num {
      font-size: 11px;
      font-weight: 700;
      color: rgba(255, 255, 255, .4);
      letter-spacing: .14em;
      text-transform: uppercase;
      margin-bottom: 8px
    }

    .proj-cat {
      display: inline-block;
      background: rgba(255, 255, 255, .12);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255, 255, 255, .18);
      border-radius: 999px;
      padding: 4px 12px;
      font-size: 11px;
      font-weight: 600;
      color: rgba(255, 255, 255, .85);
      letter-spacing: .06em;
      margin-bottom: 10px
    }

    .proj-name {
      font-size: 22px;
      font-weight: 700;
      color: #fff;
      letter-spacing: -.03em;
      margin-bottom: 6px;
      line-height: 1.15
    }

    .proj-card.large .proj-name {
      font-size: 28px
    }

    .proj-desc {
      font-size: 14px;
      color: rgba(255, 255, 255, .55);
      line-height: 1.6;
      margin-bottom: 14px
    }

    .proj-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      font-weight: 600;
      color: #fff;
      letter-spacing: .08em;
      text-transform: uppercase;
      background: rgba(255, 255, 255, .12);
      border: 1px solid rgba(255, 255, 255, .2);
      border-radius: 999px;
      padding: 7px 16px;
      backdrop-filter: blur(8px);
      transition: background .2s, gap .2s
    }

    .proj-card:hover .proj-link {
      background: rgba(255, 255, 255, .2);
      gap: 12px
    }

    /* Second row */
    .proj-row2 {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 20px
    }

    /* PROCESS */
    .pw {
      position: relative
    }

    .pbg_ {
      position: absolute;
      top: 42px;
      left: calc(12.5% + 20px);
      right: calc(12.5% + 20px);
      height: 2px;
      background: rgba(99, 102, 241, .1)
    }

    .pfl {
      position: absolute;
      top: 42px;
      left: calc(12.5% + 20px);
      width: 0;
      height: 2px;
      background: linear-gradient(90deg, var(--p1), var(--p3));
      transition: width 1.6s ease
    }

    .pgg {
      display: grid;
      grid-template-columns: repeat(4, 1fr)
    }

    .ps {
      padding: 0 24px;
      text-align: center;
      position: relative;
      z-index: 2
    }

    .psiw {
      width: 84px;
      height: 84px;
      border-radius: 50%;
      background: var(--white);
      border: 2px solid rgba(99, 102, 241, .15);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30px;
      margin: 0 auto 22px;
      transition: border-color .4s, box-shadow .4s, transform .4s cubic-bezier(.34, 1.56, .64, 1)
    }

    .ps.on .psiw {
      border-color: var(--p1);
      box-shadow: 0 0 0 8px rgba(99, 102, 241, .07), 0 8px 24px rgba(99, 102, 241, .2);
      transform: scale(1.08)
    }

    .psn {
      font-size: 11px;
      font-weight: 700;
      color: var(--p1);
      letter-spacing: .1em;
      text-transform: uppercase;
      margin-bottom: 10px
    }

    .psti {
      font-size: 17px;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 8px;
      letter-spacing: -.02em
    }

    .pstx {
      font-size: 15px;
      color: var(--muted);
      line-height: 1.7
    }

    /* TESTIMONIALS */
    .tg {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin-top: 48px
    }

    .tc {
      background: var(--white);
      border: 1px solid var(--bdl);
      border-radius: var(--r2);
      padding: 30px;
      transition: transform .3s, box-shadow .3s
    }

    .tc:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 40px rgba(99, 102, 241, .09)
    }

    .tcs {
      display: flex;
      gap: 3px;
      margin-bottom: 18px
    }

    .ts {
      width: 13px;
      height: 13px;
      border-radius: 50%;
      background: var(--g)
    }

    .tcq {
      font-size: 15px;
      color: var(--ink2);
      line-height: 1.75;
      margin-bottom: 22px
    }

    .tcq::before {
      content: '"';
      font-size: 50px;
      font-weight: 700;
      line-height: .5;
      color: var(--p1);
      opacity: .14;
      display: block;
      margin-bottom: 12px
    }

    .tcf {
      display: flex;
      align-items: center;
      gap: 12px
    }

    .tcav {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: var(--g);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 700;
      color: #fff;
      flex-shrink: 0
    }

    .tcn {
      font-size: 14px;
      font-weight: 600;
      color: var(--ink)
    }

    .tcr {
      font-size: 11px;
      color: var(--muted)
    }

    /* CTA */
    .ctas {
      position: relative;
      padding: 100px 52px;
      text-align: center;
      background: var(--bg);
      overflow: hidden
    }

    .ctag1 {
      position: absolute;
      width: 600px;
      height: 600px;
      background: radial-gradient(circle, rgba(99, 102, 241, .35), transparent 65%);
      top: -150px;
      left: -100px;
      animation: b1 14s ease-in-out infinite
    }

    .ctag2 {
      position: absolute;
      width: 500px;
      height: 500px;
      background: radial-gradient(circle, rgba(6, 182, 212, .28), transparent 65%);
      bottom: -100px;
      right: -80px;
      animation: b2 16s ease-in-out infinite
    }

    .ctac {
      position: relative;
      z-index: 1
    }

    .ctabg {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(255, 255, 255, .06);
      border: 1px solid rgba(255, 255, 255, .11);
      border-radius: 999px;
      padding: 6px 18px;
      font-size: 13px;
      font-weight: 500;
      color: rgba(255, 255, 255, .55);
      margin-bottom: 26px
    }

    .ctah2 {
      font-size: clamp(44px, 6vw, 76px);
      font-weight: 700;
      letter-spacing: -.05em;
      color: #fff;
      line-height: .95;
      margin-bottom: 22px
    }

    .ctah2 span {
      background: var(--g2);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      background-size: 200%;
      animation: shimmer 4s linear infinite
    }

    .ctasub {
      font-size: 17px;
      color: rgba(255, 255, 255, .42);
      max-width: 480px;
      margin: 0 auto 40px;
      line-height: 1.75
    }

    .ctabtns {
      display: flex;
      gap: 12px;
      justify-content: center;
      margin-bottom: 36px;
      flex-wrap: wrap
    }

    .ctags {
      display: flex;
      gap: 24px;
      justify-content: center;
      flex-wrap: wrap
    }

    .cg {
      font-size: 12px;
      color: rgba(255, 255, 255, .32);
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 7px
    }

    .cg::before {
      content: '✓';
      color: var(--p3);
      font-weight: 700;
      font-size: 13px
    }

    /* FOOTER */
    .ft {
      background: var(--bg2);
      border-top: 1px solid rgba(255, 255, 255, .04);
      padding: 52px;
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 40px
    }

    .flog {
      font-size: 20px;
      font-weight: 700;
      background: var(--g);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-bottom: 3px;
      letter-spacing: -.02em
    }

    .fsub {
      font-size: 10px;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .25);
      margin-bottom: 10px
    }

    .fdesc {
      font-size: 13px;
      color: rgba(255, 255, 255, .28);
      line-height: 1.7;
      max-width: 220px
    }

    .ftit {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .22);
      margin-bottom: 16px
    }

    .fls {
      list-style: none
    }

    .fls li {
      margin-bottom: 10px
    }

    .fls a {
      font-size: 13px;
      color: rgba(255, 255, 255, .32);
      text-decoration: none;
      transition: color .2s
    }

    .fls a:hover {
      color: #fff
    }

    .ftbot {
      background: var(--bg2);
      border-top: 1px solid rgba(255, 255, 255, .04);
      padding: 18px 52px;
      display: flex;
      justify-content: space-between
    }

    .fcp {
      font-size: 11px;
      color: rgba(255, 255, 255, .16);
      letter-spacing: .05em
    }

    /* FLOW */
    .flbox {
      background: rgba(255, 255, 255, .025);
      border: 1px solid rgba(255, 255, 255, .07);
      border-radius: var(--r2);
      padding: 36px 28px;
      overflow-x: auto
    }

    .flsvg {
      min-width: 660px
    }

    .flt {
      font-family: 'Outfit', sans-serif;
      fill: rgba(255, 255, 255, .88);
      font-weight: 600;
      font-size: 13px
    }

    .fls_ {
      font-family: 'Outfit', sans-serif;
      fill: rgba(255, 255, 255, .38);
      font-size: 11px
    }

    .fll {
      stroke-dasharray: 7 4;
      animation: fla .9s linear infinite
    }

    @keyframes fla {
      from {
        stroke-dashoffset: 0
      }

      to {
        stroke-dashoffset: -11
      }
    }

    .fpp circle {
      animation: fpp 2s ease-in-out infinite
    }

    .fp1 {
      animation-delay: 0s
    }

    .fp2 {
      animation-delay: .5s
    }

    .fp3 {
      animation-delay: 1s
    }

    .fp4 {
      animation-delay: 1.5s
    }

    @keyframes fpp {

      0%,
      100% {
        r: 5;
        opacity: .8
      }

      50% {
        r: 8;
        opacity: .35
      }
    }

    .flrow {
      display: flex;
      gap: 24px;
      margin-top: 20px;
      padding: 18px 20px;
      background: rgba(99, 102, 241, .05);
      border: 1px solid rgba(99, 102, 241, .1);
      border-radius: var(--r)
    }

    .fri {
      text-align: center;
      flex: 1
    }

    .frv {
      font-size: 26px;
      font-weight: 700;
      color: #fff;
      letter-spacing: -.03em
    }

    .frl {
      font-size: 11px;
      color: rgba(255, 255, 255, .32);
      font-weight: 500;
      letter-spacing: .06em;
      margin-top: 3px
    }

    /* REVEAL */
    .r {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity .8s ease, transform .8s ease
    }

    .r.on {
      opacity: 1;
      transform: none
    }

    .r1 {
      transition-delay: .1s
    }

    .r2 {
      transition-delay: .18s
    }

    .r3 {
      transition-delay: .26s
    }

    .r4 {
      transition-delay: .34s
    }

    .r5 {
      transition-delay: .42s
    }

    .r6 {
      transition-delay: .5s
    }

    /* ═══════════════════
   RESPONSIVE
═══════════════════ */
    @media(max-width:1024px) {
      .nav {
        padding: 0 32px;
        gap: 12px
      }

      .nav-links a {
        font-size: 13px;
        padding: 6px 11px
      }

      .logos-grid {
        gap: 8px
      }

      .logo-card {
        min-width: 120px;
        min-height: 90px;
        padding: 16px 18px;
        gap: 8px
      }
    }

    @media(max-width:800px) {

      /* Collapse nav links on tablet, show hamburger */
      .nav-links,
      .nc {
        display: none !important
      }

      .ham {
        display: flex !important
      }

      .nav {
        padding: 0 24px;
        gap: 0
      }

      .proj-featured {
        grid-template-columns: 1fr
      }

      .proj-row2 {
        grid-template-columns: 1fr 1fr
      }

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

      .logos-grid {
        gap: 8px
      }

      section {
        padding: 64px 32px
      }

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

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

      .pw {
        display: block
      }

      .pbg_,
      .pfl {
        display: none
      }

      .pgg {
        grid-template-columns: 1fr 1fr;
        gap: 20px
      }

      .ps {
        padding: 0
      }

      .ft {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
        padding: 40px 32px
      }

      .ftbot {
        padding: 16px 32px
      }
    }

    @media(max-width:580px) {
      .nav {
        padding: 0 20px;
        height: 62px
      }

      .hero {
        grid-template-columns: 1fr;
        padding: 100px 20px 52px;
        min-height: auto;
        text-align: center
      }

      .hl {
        display: flex;
        flex-direction: column;
        align-items: center
      }

      .hsub {
        max-width: 100%
      }

      .hbtns {
        justify-content: center;
        flex-direction: column;
        align-items: stretch
      }

      .bg,
      .bo {
        justify-content: center
      }

      .hstats {
        justify-content: center;
        gap: 20px
      }

      .hr {
        display: none
      }

      section {
        padding: 52px 20px
      }

      .sh2 {
        font-size: clamp(28px, 8vw, 40px)
      }

      .ssub {
        font-size: 14px;
        margin-bottom: 36px
      }

      .pg,
      .svgg,
      .tg,
      .rg {
        grid-template-columns: 1fr
      }

      .proj-featured,
      .proj-row2 {
        grid-template-columns: 1fr
      }

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

      .logos-section {
        padding: 48px 20px
      }

      .logos-grid {
        gap: 8px
      }

      .logo-card {
        min-width: 110px;
        min-height: 84px;
        padding: 14px 14px;
        gap: 7px
      }

      .lc-name {
        font-size: 9px
      }

      .lc-icon {
        height: 36px
      }

      .logo-img {
        max-height: 36px
      }

      .svc {
        padding: 24px
      }

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

      .ps {
        text-align: left;
        display: flex;
        gap: 16px;
        align-items: flex-start
      }

      .psiw {
        width: 56px;
        height: 56px;
        font-size: 22px;
        flex-shrink: 0;
        margin: 0
      }

      .ft {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 40px 20px
      }

      .ftbot {
        padding: 16px 20px;
        flex-direction: column;
        gap: 6px;
        text-align: center
      }

      .ctas {
        padding: 56px 20px
      }

      .ctah2 {
        font-size: clamp(32px, 9vw, 48px)
      }

      .ctabtns {
        flex-direction: column;
        align-items: center
      }

      .ctags {
        flex-direction: column;
        align-items: center;
        gap: 12px
      }

      .proj-section {
        padding: 52px 20px
      }

      .stats-section {
        padding: 52px 20px
      }
    }

/* HOW IT WORKS CAROUSEL */
.hw-carousel-wrap {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 52px;
}
.hw-carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 24px;
  padding: 24px 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.hw-carousel::-webkit-scrollbar {
  display: none;
}
.hw-slide {
  flex: 0 0 calc(33.333% - 16px);
  scroll-snap-align: start;
}
@media (max-width: 1024px) {
  .hw-slide { flex: 0 0 calc(50% - 12px); }
}
@media (max-width: 680px) {
  .hw-slide { flex: 0 0 100%; }
  .hw-carousel-wrap { padding: 0 20px; }
}

.hw-slide-inner {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r2);
  padding: 40px 32px;
  height: 100%;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s, background 0.3s;
}
.hw-slide-inner:hover {
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-5px);
}

.hw-icon-anim {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  background: rgba(99, 102, 241, 0.05);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}

.hw-slide h3 {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 20px;
  letter-spacing: -0.02em;
}

.hw-steps {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hw-steps li {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  gap: 12px;
}

.hw-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: rgba(99, 102, 241, 0.15);
  color: var(--p3);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.hw-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  backdrop-filter: blur(8px);
  transition: background 0.2s, transform 0.2s;
}
.hw-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-50%) scale(1.05);
}
.hw-prev { left: 12px; }
.hw-next { right: 12px; }

@media (max-width: 680px) {
  .hw-btn { display: none; }
}

.hw-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}
.hw-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: background 0.3s, width 0.3s;
}
.hw-dot.active {
  background: var(--p3);
  width: 24px;
  border-radius: 4px;
}

/* Animations */
.hw-browser {
  width: 80px;
  height: 60px;
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}
.hw-b-top {
  height: 14px;
  border-bottom: 2px solid rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  padding: 0 6px;
  gap: 4px;
}
.hw-b-top span {
  width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,0.2);
}
.hw-b-body {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hw-line {
  height: 4px; border-radius: 2px; background: var(--g); width: 0%;
  animation: hwLoad 3s infinite;
}
.l2 { animation-delay: 0.2s; background: rgba(255,255,255,0.2); }
.l3 { animation-delay: 0.4s; background: rgba(255,255,255,0.2); width: 50%; animation: none;}

@keyframes hwLoad {
  0% { width: 0%; }
  50%, 100% { width: 100%; }
}

.hw-ai-node {
  width: 16px; height: 16px; border-radius: 50%; background: var(--g);
  position: absolute;
  animation: hwPulse 2s infinite alternate;
}
.hw-ai-node:nth-child(1) { top: 30%; left: 30%; }
.hw-ai-node:nth-child(2) { top: 60%; left: 60%; animation-delay: 0.5s; }
.hw-ai-node:nth-child(3) { top: 30%; left: 60%; animation-delay: 1s; }
.hw-ai-line {
  position: absolute;
  width: 40px; height: 2px; background: rgba(255,255,255,0.1);
  top: 40%; left: 40%; transform: rotate(45deg);
}

@keyframes hwPulse {
  0% { transform: scale(0.8); box-shadow: 0 0 0 0 rgba(99,102,241,0.4); }
  100% { transform: scale(1.2); box-shadow: 0 0 20px 10px rgba(99,102,241,0); }
}

.hw-cart {
  width: 40px; height: 30px; border: 2px solid rgba(255,255,255,0.3);
  border-top: none; border-radius: 0 0 8px 8px;
  position: relative;
}
.hw-cart::before {
  content: ''; position: absolute; top: -10px; left: -10px; width: 10px; height: 2px; background: rgba(255,255,255,0.3); transform: rotate(45deg);
}
.hw-item {
  width: 12px; height: 12px; background: var(--p3); border-radius: 2px;
  position: absolute; top: -30px; left: 12px;
  animation: hwDrop 2s infinite cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes hwDrop {
  0% { transform: translateY(0) scale(0.5); opacity: 0; }
  20% { opacity: 1; }
  50%, 100% { transform: translateY(35px) scale(1); opacity: 1; }
}

.hw-crm {
  display: flex; gap: 8px; align-items: flex-end; height: 40px;
}
.hw-bar {
  width: 12px; background: rgba(255,255,255,0.2); border-radius: 4px 4px 0 0;
  animation: hwGrow 2s infinite alternate;
}
.hw-bar:nth-child(1) { height: 10px; animation-delay: 0s; }
.hw-bar:nth-child(2) { height: 20px; animation-delay: 0.2s; }
.hw-bar:nth-child(3) { height: 30px; background: var(--g); animation-delay: 0.4s; }

@keyframes hwGrow {
  0% { transform: scaleY(0.5); }
  100% { transform: scaleY(1.2); }
}

.hw-seo {
  font-size: 32px; font-weight: 800; color: rgba(255,255,255,0.1);
  position: relative;
}
.hw-seo::after {
  content: '#1'; position: absolute; left: 0; top: 0;
  background: var(--g); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  clip-path: inset(100% 0 0 0);
  animation: hwReveal 3s infinite;
}
@keyframes hwReveal {
  0%, 20% { clip-path: inset(100% 0 0 0); }
  50%, 80% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(100% 0 0 0); }
}

.hw-api-box {
  width: 32px; height: 32px; border-radius: 8px; border: 2px solid rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
}
.hw-api-box.g { border-color: var(--p2); }
.hw-api-sync {
  width: 24px; height: 2px; background: rgba(255,255,255,0.1); position: relative;
}
.hw-api-sync::after {
  content: ''; position: absolute; width: 6px; height: 6px; background: var(--p3); border-radius: 50%;
  top: -2px; animation: hwSync 1.5s infinite linear;
}
@keyframes hwSync {
  0% { left: 0; }
  100% { left: 100%; }
}

/* HERO FLOATING CARDS */
.hero-float-card {
  position: absolute;
  background: rgba(17, 17, 17, 0.6);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255,255,255,0.1);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: floatAnim 6s ease-in-out infinite alternate;
  z-index: 2;
}

@keyframes floatAnim {
  0% { transform: translateY(0px) rotateX(2deg) rotateY(-2deg); }
  100% { transform: translateY(-15px) rotateX(-2deg) rotateY(2deg); }
}

.card-web {
  width: 280px;
  top: 8%;
  left: 0;
  z-index: 3;
  animation-delay: 0s;
  background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01));
}
.card-ai {
  width: 260px;
  top: 38%;
  right: 0;
  z-index: 4;
  animation-delay: -2s;
  background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(0,0,0,0.4));
}
.card-auto {
  width: 320px;
  bottom: 8%;
  left: 8%;
  z-index: 2;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  animation-delay: -4s;
  background: linear-gradient(135deg, rgba(16,185,129,0.1), rgba(0,0,0,0.4));
}

/* Card Web specific */
.hf-icon {
  width: 40px; height: 40px; border-radius: 10px; background: rgba(99,102,241,0.2);
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  margin-bottom: 4px;
}
.hf-title { font-size: 13px; color: rgba(255,255,255,0.6); }
.hf-metric { font-size: 24px; font-weight: 700; color: #fff; display: flex; align-items: baseline; }
.hf-bar { width: 100%; height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden; margin-top: 8px;}
.hf-bar-fill { width: 0%; height: 100%; background: var(--g); border-radius: 3px; animation: loadBar 3s ease-out forwards infinite; }
@keyframes loadBar { 0% {width:0%;} 50%,100% {width:100%;} }

/* Card AI specific */
.hf-header { font-size: 13px; font-weight: 600; color: #fff; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 12px; margin-bottom: 4px;}
.hf-dot { width: 8px; height: 8px; border-radius: 50%; background: #34D399; box-shadow: 0 0 8px #34D399; }
.hf-body { display: flex; flex-direction: column; gap: 8px; }
.hf-bubble { padding: 10px 14px; border-radius: 12px; font-size: 13px; max-width: 90%; }
.hf-bubble.left { align-self: flex-start; background: rgba(255,255,255,0.1); color: #fff; border-bottom-left-radius: 4px; }
.hf-bubble.right { align-self: flex-end; background: var(--g); color: #fff; border-bottom-right-radius: 4px; }
.hf-typing { display: flex; gap: 4px; padding: 4px 0; }
.hf-typing span { width: 6px; height: 6px; background: #fff; border-radius: 50%; animation: typeDot 1.4s infinite; opacity: 0.4;}
.hf-typing span:nth-child(2) { animation-delay: 0.2s; }
.hf-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typeDot { 0%, 100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 1; transform: scale(1.2); } }

/* Card Auto specific */
.hf-sync-node { padding: 8px 12px; background: rgba(255,255,255,0.1); border-radius: 8px; font-size: 12px; font-weight: 600; color: #fff; border: 1px solid rgba(255,255,255,0.05);}
.hf-sync-path { flex-grow: 1; height: 2px; background: rgba(255,255,255,0.1); margin: 0 12px; position: relative; }
.hf-sync-dot { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; background: #06B6D4; border-radius: 50%; box-shadow: 0 0 10px #06B6D4; animation: travelDot 2s linear infinite; }
@keyframes travelDot { 0% { left: 0; opacity: 0;} 10% { opacity: 1;} 90% { opacity: 1;} 100% { left: 100%; opacity: 0;} }

@media(max-width:1024px) {
  .hero-float-card { position: relative; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; margin-bottom: 16px; animation: none; transform: none !important;}
  .hr { display: flex !important; flex-direction: column !important; perspective: none !important; min-height: auto !important; }
}

/* CONTACT FORM */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 500px;
  margin: 0 auto 32px;
  text-align: left;
}

.cf-row {
  display: flex;
  gap: 16px;
}

.cf-row input {
  flex: 1;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  transition: all 0.3s ease;
  outline: none;
}

.contact-form input:focus,
.contact-form textarea:focus {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(99, 102, 241, 0.5);
  box-shadow: 0 0 16px rgba(99, 102, 241, 0.2);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

@media(max-width: 600px) {
  .cf-row {
    flex-direction: column;
  }
}