/* Dinlipi — Main Stylesheet */
/* All styles extracted from original HTML. */


    :root {
      /* Logo color palette */
      --primary: #1B4653;
      --primary-dark: #13343e;
      --primary-mid: #2a6a7a;
      --primary-light: #e8f2f5;
      --accent: #f29b09;
      --accent-dark: #d4860a;
      --text: #1B4653;
      --text-muted: #5a7a8a;
      --bg: #ffffff;
      --bg-alt: #F2F6F7;
      --border: #d4e4eb;
      --success: #0d9f6e;
      --danger: #dc2626;
      --radius: 12px;
      --shadow: 0 4px 6px -1px rgb(25 59 74 / 0.07), 0 2px 4px -2px rgb(25 59 74 / 0.05);
      --shadow-lg: 0 20px 25px -5px rgb(25 59 74 / 0.1), 0 8px 10px -6px rgb(25 59 74 / 0.06);
    }

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

    body {
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      color: var(--text);
      background: var(--bg);
      line-height: 1.6;
     
      -webkit-font-smoothing: antialiased;
    }

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

    .container {
      width: 100%;
      max-width: none;
      margin: 0 auto;
      padding-left: 1in;
      padding-right: 1in;
      box-sizing: border-box;
    }

    @media (max-width: 900px) {
      .container {
        padding-left: 24px;
        padding-right: 24px;
      }
    }

    @media (max-width: 600px) {
      .container {
        padding-left: 16px;
        padding-right: 16px;
      }
    }

    /* ========== NAV ========== */
    header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      background: rgba(255,255,255,0.92);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border);
    }

    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 72px;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 0;
    }


    .logo-text {
      display: inline-flex;
      align-items: center;
      font-size: 1.55rem;
      font-weight: 700;
      letter-spacing: -0.035em;
      color: var(--primary);
      line-height: 1;
      white-space: nowrap;
    }
    .logo img {
      height: 40px;
      width: auto;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 32px;
    }

    .nav-links a {
      font-size: 0.95rem;
      font-weight: 500;
      color: var(--text-muted);
      transition: color 0.2s;
    }

    .nav-links a:hover { color: var(--primary); }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px 24px;
      border-radius: 10px;
      font-weight: 600;
      font-size: 0.95rem;
      border: none;
      cursor: pointer;
      transition: all 0.2s;
    }

    .btn-primary {
      background: var(--primary);
      color: #ffffff !important;
      box-shadow: 0 4px 14px rgba(25, 59, 74, 0.3);
    }

    .btn-primary:hover {
      background: var(--primary-dark);
      color: #ffffff !important;
      transform: translateY(-1px);
    }

    .btn-primary:visited,
    .btn-primary:active,
    .btn-primary:focus {
      color: #ffffff !important;
    }

    .btn-accent {
      background: var(--accent);
      color: #ffffff !important;
      box-shadow: 0 4px 14px rgba(242, 155, 9, 0.35);
    }

    .btn-accent:hover {
      background: var(--accent-dark);
      color: #ffffff !important;
      transform: translateY(-1px);
    }

    .btn-outline {
      background: transparent;
      color: var(--primary);
      border: 2px solid var(--primary);
    }

    .btn-outline:hover {
      background: var(--primary-light);
    }

    .btn-lg {
      padding: 16px 32px;
      font-size: 1.05rem;
    }

    .mobile-toggle {
      display: none;
      background: none;
      border: none;
      font-size: 1.5rem;
      cursor: pointer;
      color: var(--text);
    }

    /* ========== HERO — Product Showcase ========== */
    .hero {
      padding: 54px 0 80px;
      background: linear-gradient(180deg, #f8fafc 0%, #ffffff 60%);
      overflow: hidden;
      position: relative;
    }

    .hero-inner {
      display: grid;
      grid-template-columns: 0.9fr 1.2fr;
      gap: 40px;
      align-items: center;
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: white;
      color: var(--primary);
      padding: 7px 14px;
      border-radius: 100px;
      font-size: 0.82rem;
      font-weight: 600;
      margin-bottom: 22px;
      border: 1px solid var(--border);
      box-shadow: var(--shadow);
    }

    .hero-badge .dot-accent {
      width: 8px;
      height: 8px;
      background: var(--accent);
      border-radius: 50%;
    }

    .hero h1 {
      font-size: clamp(2.1rem, 4vw, 3rem);
      font-weight: 800;
      line-height: 1.15;
      letter-spacing: -0.03em;
      margin-bottom: 18px;
      color: var(--primary);
    }

    .hero h1 span {
      background: linear-gradient(90deg, var(--primary-mid), var(--accent));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .hero-lead {
      font-size: 1.08rem;
      color: var(--text-muted);
      margin-bottom: 28px;
      line-height: 1.7;
      max-width: 460px;
    }

    .hero-cta {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 28px;
    }

    .hero-trusted {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 0.88rem;
      color: var(--text-muted);
    }

    .hero-trusted .dots {
      display: flex;
      gap: 4px;
    }

    .hero-trusted .dots span {
      width: 12px;
      height: 12px;
      border-radius: 50%;
    }

    .hero-proof-points {
      align-items: center;
      gap: 24px;
      margin-bottom: 28px;
      flex-wrap: wrap;
    }

    .hero-proof-item {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: var(--text-muted);
      font-size: 0.88rem;
      font-weight: 500;
      white-space: nowrap;
    }

    .hero-proof-item b {
      color: var(--success);
      font-size: 1rem;
      font-weight: 800;
      line-height: 1;
    }

    /* Browser frame with real screenshot */
    .browser {
      background: #e8eef3;
      border-radius: 14px;
      box-shadow:
        0 25px 60px -12px rgba(25, 59, 74, 0.28),
        0 0 0 1px rgba(25, 59, 74, 0.08);
      overflow: hidden;
      position: relative;
      animation: heroFloat 5s ease-in-out infinite;
      will-change: transform;
    }

    @keyframes heroFloat {
      0%, 100% {
        transform: translateY(0);
        box-shadow:
          0 25px 60px -12px rgba(25, 59, 74, 0.28),
          0 0 0 1px rgba(25, 59, 74, 0.08);
      }
      50% {
        transform: translateY(-14px);
        box-shadow:
          0 35px 70px -12px rgba(25, 59, 74, 0.22),
          0 0 0 1px rgba(25, 59, 74, 0.08);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .browser {
        animation: none;
      }
    }

    .browser-bar {
      display: none;
      align-items: center;
      gap: 8px;
      padding: 11px 16px;
      background: #0f172a;
    }

    .browser-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .browser-dot.r { background: #ef4444; }
    .browser-dot.y { background: #eab308; }
    .browser-dot.g { background: #22c55e; }

    .browser-url {
      flex: 1;
      margin-left: 8px;
      background: #1e293b;
      border-radius: 6px;
      padding: 5px 12px;
      font-size: 0.72rem;
      color: #94a3b8;
      font-family: ui-monospace, monospace;
    }

    .browser-screen {
      display: block;
      width: 100%;
      height: auto;
      vertical-align: top;
    }

    .browser-screen-wrap {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 10.4;
      background: #e8eef3;
      overflow: hidden;
      border: 1px solid rgba(212,228,235,.95);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
    }
    .browser-screen-wrap::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(105deg, transparent 0%, transparent 42%, rgba(255,255,255,.20) 49%, transparent 56%, transparent 100%);
      transform: translateX(-120%);
      animation: dashboardSweep 8s ease-in-out infinite;
      mix-blend-mode: screen;
    }
    @keyframes dashboardSweep {
      0%, 48% { transform: translateX(-120%); }
      65%, 100% { transform: translateX(120%); }
    }

    /* ===== Mini Dashboard (hero embed) ===== */
    .md {
      display: grid;
      grid-template-columns: 132px 1fr;
      height: 100%;
      width: 100%;
      font-family: Inter, system-ui, sans-serif;
      font-size: 10px;
      color: #0f2740;
      background: #e8eef3;
    }
    .md-side {
      background: #0b2a36;
      color: #b0c2ce;
      padding: 10px 8px;
      display: flex;
      flex-direction: column;
      gap: 2px;
      overflow: hidden;
    }
    .md-brand {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 2px 6px 10px;
      color: #fff;
      font-weight: 700;
      font-size: 11px;
    }
    .md-brand-logo {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: linear-gradient(135deg, #f59e0b, #0ea5e9);
      flex-shrink: 0;
    }
    .md-admin {
      margin: 0 4px 8px;
      background: rgba(255,255,255,0.06);
      border-radius: 6px;
      padding: 5px 8px;
      font-size: 8px;
      font-weight: 700;
      letter-spacing: 0.06em;
      color: #9fb3c1;
      display: flex;
      align-items: center;
      gap: 5px;
    }
    .md-admin i {
      width: 5px;
      height: 5px;
      background: #22c55e;
      border-radius: 50%;
      display: block;
    }
    .md-nav {
      display: flex;
      flex-direction: column;
      gap: 1px;
      overflow: hidden;
    }
    .md-nav span {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 5px 8px;
      border-radius: 6px;
      font-size: 8.5px;
      font-weight: 500;
      white-space: nowrap;
      color: #b0c2ce;
    }
    .md-nav span b {
      width: 11px;
      height: 11px;
      border-radius: 3px;
      background: rgba(255,255,255,0.12);
      flex-shrink: 0;
    }
    .md-nav span.on {
      background: linear-gradient(90deg, #12b981, #0d9f6e);
      color: #fff;
      font-weight: 600;
      box-shadow: 0 2px 8px rgba(16,185,129,0.35);
      animation: mdHomeGlow 2.8s ease-in-out infinite;
    }
    @keyframes mdHomeGlow {
      0%, 100% { box-shadow: 0 2px 8px rgba(16,185,129,0.3); }
      50% { box-shadow: 0 3px 14px rgba(16,185,129,0.55); }
    }
    .md-main {
      display: flex;
      flex-direction: column;
      min-width: 0;
      overflow: hidden;
    }
    .md-top {
      height: 32px;
      background: #fff;
      border-bottom: 1px solid #e4ebf0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
      flex-shrink: 0;
    }
    .md-top .sq {
      width: 20px;
      height: 20px;
      border-radius: 5px;
      border: 1px solid #e4ebf0;
      background: #fff;
    }
    .md-top-r { display: flex; gap: 5px; }
    .md-body {
      padding: 8px;
      display: flex;
      flex-direction: column;
      gap: 7px;
      flex: 1;
      min-height: 0;
      overflow: hidden;
    }
    .md-kpis {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 6px;
      flex-shrink: 0;
    }
    .md-kpi {
      border-radius: 8px;
      padding: 8px 8px 7px;
      color: #fff;
      position: relative;
      overflow: hidden;
      min-height: 62px;
      transform: translateY(14px) scale(.94);
      opacity: 0;
      animation: mdKpiReveal 6.8s cubic-bezier(0.22,1,0.36,1) infinite;
      will-change: transform, opacity;
    }
    .md-kpi:nth-child(1) { animation-delay: 0s; }
    .md-kpi:nth-child(2) { animation-delay: .35s; }
    .md-kpi:nth-child(3) { animation-delay: .70s; }
    .md-kpi:nth-child(4) { animation-delay: 1.05s; }
    .md-kpi.k-green { background: linear-gradient(145deg,#08764b,#10b981); box-shadow: 0 5px 14px rgba(16,185,129,.24); }
    .md-kpi.k-blue { background: linear-gradient(145deg,#1452bd,#3b82f6); box-shadow: 0 5px 14px rgba(37,99,235,.24); }
    .md-kpi.k-red { background: linear-gradient(145deg,#a9151d,#ef4444); box-shadow: 0 5px 14px rgba(239,68,68,.24); }
    .md-kpi.k-purple { background: linear-gradient(145deg,#4c1d95,#7c3aed); box-shadow: 0 5px 14px rgba(124,58,237,.24); }
    @keyframes mdKpiReveal {
      0%, 7% { opacity: 0; transform: translateY(14px) scale(.94); }
      14%, 27% { opacity: 1; transform: translateY(0) scale(1); }
      31% { transform: translateY(-2px) scale(1.012); }
      38%, 100% { opacity: 1; transform: translateY(0) scale(1); }
    }
    .md-kpi::before {
      content: '';
      position: absolute;
      inset: -50% auto -50% -70%;
      width: 45%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
      transform: skewX(-20deg);
      animation: mdShine 3.4s ease-in-out infinite;
      pointer-events: none;
    }
    .md-kpi:nth-child(1)::before { animation-delay: .1s; }
    .md-kpi:nth-child(2)::before { animation-delay: .65s; }
    .md-kpi:nth-child(3)::before { animation-delay: 1.2s; }
    .md-kpi:nth-child(4)::before { animation-delay: 1.75s; }
    .md-kpi .ic {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: rgba(255,255,255,.24);
      margin-bottom: 5px;
      display: grid;
      place-items: center;
      font-size: 8px;
      font-weight: 800;
    }
    .md-kpi .n {
      font-size: 16px;
      font-weight: 800;
      line-height: 1.1;
      letter-spacing: -.03em;
    }
    .md-kpi .t { font-size: 8px; font-weight: 700; margin-top: 1px; }
    .md-kpi .k-title { margin-top: 8px; font-size: 9px; }
    .md-kpi .s { font-size: 7px; opacity: .86; margin-top: 1px; line-height: 1.2; }
    .k-mini-line {
      display: flex;
      gap: 3px;
      position: absolute;
      right: 8px;
      bottom: 8px;
      align-items: end;
    }
    .k-mini-line i {
      display: block;
      width: 3px;
      border-radius: 2px;
      background: rgba(255,255,255,.72);
      transform-origin: bottom;
      animation: miniPulse 1.8s ease-in-out infinite;
    }
    .k-mini-line i:nth-child(1){height:7px;animation-delay:.1s}
    .k-mini-line i:nth-child(2){height:12px;animation-delay:.28s}
    .k-mini-line i:nth-child(3){height:17px;animation-delay:.46s}
    @keyframes miniPulse {
      0%,100%{transform:scaleY(.55);opacity:.55}
      50%{transform:scaleY(1);opacity:1}
    }
    .md-panels {
      display: grid;
      grid-template-columns: 1.35fr 1fr;
      gap: 7px;
      flex: 1;
      min-height: 0;
    }
    .md-panel {
      background: #fff;
      border-radius: 8px;
      border: 1px solid #e4ebf0;
      padding: 8px 9px;
      display: flex;
      flex-direction: column;
      min-height: 0;
      overflow: hidden;
    }
    .md-ph {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 6px;
      flex-shrink: 0;
    }
    .md-ph strong {
      font-size: 9px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .md-ph strong i {
      width: 12px;
      height: 12px;
      border-radius: 3px;
      background: #ede9fe;
      display: inline-block;
    }
    .md-ph em {
      font-style: normal;
      font-size: 7.5px;
      color: #64748b;
      border: 1px solid #e4ebf0;
      border-radius: 20px;
      padding: 2px 6px;
    }
    .md-ph a {
      font-size: 8px;
      color: #2563eb;
      font-weight: 600;
      text-decoration: none;
    }
    .md-chart {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-height: 0;
    }
    .md-bars {
      flex: 1;
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      align-items: end;
      gap: 4px;
      border-bottom: 1px solid #eef2f5;
      border-left: 1px solid #eef2f5;
      padding: 0 2px 0 4px;
      min-height: 70px;
    }
    .md-day {
      display: flex;
      flex-direction: column;
      align-items: center;
      height: 100%;
      justify-content: flex-end;
      gap: 3px;
    }
    .md-stack {
      display: flex;
      align-items: flex-end;
      gap: 2px;
      height: calc(100% - 12px);
      width: 100%;
      justify-content: center;
    }
    .md-bar {
      width: 9px;
      border-radius: 2px 2px 1px 1px;
      transform-origin: bottom;
      transform: scaleY(0);
      animation: mdBarRise 7.2s cubic-bezier(0.22,1,0.36,1) infinite;
      will-change: transform, filter;
    }
    .md-bar.g {
      background: linear-gradient(180deg, #34d399, #10b981);
      animation-name: mdBarRise, mdBarGlowG;
      animation-duration: 7.2s, 2.8s;
      animation-timing-function: cubic-bezier(0.22,1,0.36,1), ease-in-out;
      animation-iteration-count: infinite, infinite;
      animation-fill-mode: both, none;
    }
    .md-bar.r {
      background: linear-gradient(180deg, #f87171, #ef4444);
      animation-name: mdBarRise, mdBarGlowR;
      animation-duration: 7.2s, 2.8s;
      animation-timing-function: cubic-bezier(0.22,1,0.36,1), ease-in-out;
      animation-iteration-count: infinite, infinite;
      animation-fill-mode: both, none;
    }
    @keyframes mdBarRise {
      0%, 6% { transform: scaleY(0); opacity: .15; }
      15%, 24% { transform: scaleY(1); opacity: 1; }
      30% { transform: scaleY(1.035); opacity: 1; }
      39%, 100% { transform: scaleY(1); opacity: 1; }
    }
    @keyframes mdBarGlowG {
      0%, 100% { filter: brightness(1); box-shadow: none; }
      50% { filter: brightness(1.15); box-shadow: 0 0 8px rgba(16,185,129,0.55); }
    }
    @keyframes mdBarGlowR {
      0%, 100% { filter: brightness(1); box-shadow: none; }
      50% { filter: brightness(1.15); box-shadow: 0 0 8px rgba(239,68,68,0.5); }
    }
    .md-day:nth-child(1) .md-bar { animation-delay: 0s, 0.9s; }
    .md-day:nth-child(2) .md-bar { animation-delay: 0.34s, 1.15s; }
    .md-day:nth-child(3) .md-bar { animation-delay: 0.68s, 1.4s; }
    .md-day:nth-child(4) .md-bar { animation-delay: 1.02s, 1.65s; }
    .md-day:nth-child(5) .md-bar { animation-delay: 1.36s, 1.9s; }
    .md-day:nth-child(6) .md-bar { animation-delay: 1.70s, 2.15s; }
    .md-day:nth-child(7) .md-bar { animation-delay: 2.04s, 2.4s; }
    .md-day label {
      font-size: 7px;
      color: #64748b;
      font-weight: 600;
      opacity: 0;
      transform: translateY(5px);
      animation: mdLabelIn 7.2s ease-out infinite;
    }
    .md-day:nth-child(1) label { animation-delay: .08s; }
    .md-day:nth-child(2) label { animation-delay: .42s; }
    .md-day:nth-child(3) label { animation-delay: .76s; }
    .md-day:nth-child(4) label { animation-delay: 1.10s; }
    .md-day:nth-child(5) label { animation-delay: 1.44s; }
    .md-day:nth-child(6) label { animation-delay: 1.78s; }
    .md-day:nth-child(7) label { animation-delay: 2.12s; }
    @keyframes mdLabelIn {
      0%, 8% { opacity: 0; transform: translateY(5px); }
      15%, 40% { opacity: 1; transform: translateY(0); }
      48%, 100% { opacity: 1; transform: translateY(0); }
    }
    .md-leg {
      display: flex;
      justify-content: center;
      gap: 10px;
      margin-top: 4px;
      font-size: 7px;
      color: #64748b;
      flex-shrink: 0;
    }
    .md-leg span::before {
      content: '';
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      margin-right: 3px;
      vertical-align: middle;
    }
    .md-leg .pg::before { background: #10b981; }
    .md-leg .ab::before { background: #ef4444; }
    .md-acts {
      display: flex;
      flex-direction: column;
      gap: 0;
      overflow: hidden;
      flex: 1;
    }
    .md-act {
      display: grid;
      grid-template-columns: 18px 1fr auto;
      gap: 6px;
      align-items: start;
      padding: 5px 0;
      border-bottom: 1px solid #f1f5f8;
      opacity: 0;
      animation: mdActIn 7.2s cubic-bezier(0.22,1,0.36,1) infinite;
      will-change: transform, opacity;
    }
    .md-act:last-child { border-bottom: none; }
    .md-act:nth-child(1) { animation-delay: 0s; }
    .md-act:nth-child(2) { animation-delay: 0.38s; }
    .md-act:nth-child(3) { animation-delay: 0.76s; }
    .md-act:nth-child(4) { animation-delay: 1.14s; }
    .md-act:nth-child(5) { animation-delay: 1.52s; }
    @keyframes mdActIn {
      0%, 5% { opacity: 0; transform: translateX(10px); }
      11%, 35% { opacity: 1; transform: translateX(0); }
      44%, 100% { opacity: 1; transform: translateX(0); }
    }
    .md-act .ai {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      flex-shrink: 0;
      animation: mdIconPulse 0.5s ease both;
    }
    .md-act:nth-child(1) .ai { background: #10b981; animation-delay: 0.7s; }
    .md-act:nth-child(2) .ai { background: #2563eb; animation-delay: 0.85s; }
    .md-act:nth-child(3) .ai { background: #f59e0b; animation-delay: 1.0s; }
    .md-act:nth-child(4) .ai { background: #7c3aed; animation-delay: 1.15s; }
    .md-act:nth-child(5) .ai { background: #0d9488; animation-delay: 1.3s; }
    @keyframes mdIconPulse {
      0% { transform: scale(0.6); opacity: 0.5; }
      50% { transform: scale(1.15); }
      100% { transform: scale(1); opacity: 1; }
    }
    .md-act h5 {
      font-size: 8px;
      font-weight: 700;
      color: #0f2740;
      margin: 0 0 1px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .md-act p {
      font-size: 7px;
      color: #64748b;
      margin: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .md-act time {
      font-size: 7px;
      color: #94a3b8;
      white-space: nowrap;
    }

    @media (prefers-reduced-motion: reduce) {
      .browser-screen-wrap::after, .md-kpi, .md-kpi::before, .md-bar, .md-act, .md-act .ai, .md-nav span.on {
        animation: none !important;
      }
      .md-kpi, .md-act, .md-bar, .md-day label { opacity: 1; transform: none; }
      .md-bar { transform: scaleY(1); }
    }

    @media (max-width: 960px) {
      .hero-inner { grid-template-columns: 1fr; gap: 36px; }
      .md-kpis { grid-template-columns: repeat(2, 1fr); }
      .browser { max-width: 640px; margin: 0 auto; }
    }

    /* ========== TRUSTED / LOGOS ========== */
    .logos-section {
      padding: 40px 1in 56px;
      background: white;
      border-bottom: 1px solid var(--border);
      overflow: hidden;
    }

    @media (max-width: 900px) {
      .logos-section {
        padding-left: 24px;
        padding-right: 24px;
      }
    }

    @media (max-width: 600px) {
      .logos-section {
        padding-left: 16px;
        padding-right: 16px;
      }
    }

    .logos-label {
      text-align: center;
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 28px;
    }

    .logos-marquee {
      position: relative;
      width: 100%;
      overflow: hidden;
      mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
      -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
    }

    .logos-track {
      display: flex;
      align-items: center;
      gap: 48px;
      width: max-content;
      animation: scroll-left 35s linear infinite;
    }

    .logos-marquee:hover .logos-track {
      animation-play-state: paused;
    }

    @keyframes scroll-left {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    .logo-item {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 8px 20px;
      background: #ffffff;
      border: none;
      border-radius: 0;
      min-width: auto;
      height: auto;
      flex-shrink: 0;
      transition: opacity 0.25s, transform 0.25s;
      opacity: 0.92;
      box-shadow: none;
    }

    .logo-item:hover {
      opacity: 1;
      transform: scale(1.06);
      box-shadow: none;
      border: none;
    }

    .logo-item img {
      max-height: 72px;
      max-width: 200px;
      width: auto;
      height: auto;
      object-fit: contain;
      display: block;
    }

    .logo-item .logo-mark {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      font-weight: 800;
      font-size: 0.75rem;
      color: white;
      flex-shrink: 0;
    }

    .logo-item .logo-name {
      font-size: 0.9rem;
      font-weight: 700;
      color: var(--text);
      letter-spacing: -0.01em;
      white-space: nowrap;
    }

    /* ========== OUR PARTNERS ========== */
    .partners-section {
      padding: 48px 1in 56px;
      background: #ffffff;
      border-bottom: 1px solid var(--border);
      overflow: hidden;
    }
    .partners-heading {
      text-align: center;
      font-size: 1.35rem;
      font-weight: 800;
      color: var(--primary);
      text-transform: none;
      letter-spacing: -0.02em;
      margin-bottom: 32px;
    }
    .partners-marquee .logos-track,
    .partners-track {
      animation: scroll-left 40s linear infinite;
      gap: 56px;
    }
    .partners-marquee:hover .partners-track {
      animation-play-state: paused;
    }
    .partner-logo-item {
      background: transparent;
      border: none;
      border-radius: 0;
      padding: 8px 12px;
      min-height: auto;
      box-shadow: none;
    }
    .partner-logo-item img {
      max-height: 67px;
      max-width: 192px;
    }
    @media (max-width: 900px) {
      .partners-section { padding-left: 24px; padding-right: 24px; }
      .partner-logo-item img { max-height: 53px; max-width: 156px; }
    }
    @media (max-width: 600px) {
      .partners-section { padding-left: 16px; padding-right: 16px; padding-top: 36px; padding-bottom: 40px; }
      .partners-heading { font-size: 1.15rem; margin-bottom: 22px; }
      .partner-logo-item { min-height: auto; padding: 6px 8px; }
      .partner-logo-item img { max-height: 48px; max-width: 132px; }
    }


    /* ========== MODULES ========== */
    .section {
      padding: 90px 0;
    }

    .section-alt {
      background: var(--bg-alt);
    }

    .section-header {
      text-align: center;
      max-width: 640px;
      margin: 0 auto 56px;
    }

    .section-header .label {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      font-weight: 800;
      color: var(--primary);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 16px;
      padding: 8px 18px;
      border-radius: 100px;
      background: var(--primary-light);
      border: 1px solid var(--border);
      box-shadow: 0 2px 8px rgba(27, 70, 83, 0.08);
      line-height: 1.2;
    }

    .section-header h2 {
      font-size: clamp(1.8rem, 3.5vw, 2.4rem);
      font-weight: 800;
      letter-spacing: -0.02em;
      margin-bottom: 14px;
    }

    .section-header p {
      color: var(--text-muted);
      font-size: 1.1rem;
    }

    /* Tabbed Features */
    .feat-tabs {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      margin: 0 auto 36px;
    }

    .feat-tab {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 10px 18px;
      border-radius: 100px;
      border: 1px solid var(--border);
      background: #ffffff;
      font-family: inherit;
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--text);
      cursor: pointer;
      transition: all 0.2s;
      white-space: nowrap;
    }

    .feat-tab svg {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .feat-tab:hover {
      border-color: var(--primary-mid);
      color: var(--primary);
      background: var(--primary-light);
    }

    .feat-tab.active {
      background: var(--primary);
      border-color: var(--primary);
      color: white;
      box-shadow: 0 4px 12px rgba(25, 59, 74, 0.25);
    }


    /* Features (modules) — header + wave tabs */
    #modules .section-header .label,
    #modules .section-header h2,
    #modules .section-header p,
    #modules .feat-panel.active {
      opacity: 0;
      transform: translateY(48px);
      transition: opacity 1.15s cubic-bezier(0.22, 1, 0.36, 1), transform 1.15s cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* Wave appear for each feature tab */
    #modules .feat-tabs {
      opacity: 1;
      transform: none;
    }
    #modules .feat-tab {
      opacity: 0;
      transform: translateY(28px) scale(0.92);
      transition:
        opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.55s cubic-bezier(0.34, 1.4, 0.64, 1),
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease;
    }

    #modules.in-view .section-header .label {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0s;
    }
    #modules.in-view .section-header h2 {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.15s;
    }
    #modules.in-view .section-header p {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.3s;
    }

    /* Wave: each tab rises after the previous — dhew effect */
    #modules.in-view .feat-tab {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
    #modules.in-view .feat-tab:nth-child(1)  { transition-delay: 0.42s; }
    #modules.in-view .feat-tab:nth-child(2)  { transition-delay: 0.50s; }
    #modules.in-view .feat-tab:nth-child(3)  { transition-delay: 0.58s; }
    #modules.in-view .feat-tab:nth-child(4)  { transition-delay: 0.66s; }
    #modules.in-view .feat-tab:nth-child(5)  { transition-delay: 0.74s; }
    #modules.in-view .feat-tab:nth-child(6)  { transition-delay: 0.82s; }
    #modules.in-view .feat-tab:nth-child(7)  { transition-delay: 0.90s; }
    #modules.in-view .feat-tab:nth-child(8)  { transition-delay: 0.98s; }
    #modules.in-view .feat-tab:nth-child(9)  { transition-delay: 1.06s; }
    #modules.in-view .feat-tab:nth-child(10) { transition-delay: 1.14s; }

    #modules.in-view .feat-panel.active {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 1.25s;
    }

    #modules.in-view .feat-panel {
      transition: opacity 0.35s ease, transform 0.35s ease;
    }

    @media (prefers-reduced-motion: reduce) {
      #modules .section-header .label,
      #modules .section-header h2,
      #modules .section-header p,
      #modules .feat-tab,
      #modules .feat-panel.active {
        opacity: 1;
        transform: none;
        transition: none;
      }
    }

    .feat-panel {
      display: none;
      background: #ffffff;
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 32px 36px;
      box-shadow: var(--shadow-lg);
      animation: fadeIn 0.3s ease;
    }

    .feat-panel.active {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 28px 32px;
      align-items: center;
      width: 100%;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(6px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* Col 1: icon + description together */
    .feat-panel-left {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 16px;
      text-align: left;
      grid-column: 1;
      min-width: 0;
    }

    .feat-panel-icon {
      width: 80px;
      height: 80px;
      border-radius: 20px;
      background: linear-gradient(145deg, #e8f5f3 0%, #f0f9f7 60%, #e0f2f0 100%);
      display: grid;
      place-items: center;
      font-size: 2.4rem;
      margin: 0;
      flex-shrink: 0;
      box-shadow: 0 8px 22px rgba(13, 159, 110, 0.18), inset 0 1px 0 rgba(255,255,255,0.7);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .feat-panel.active .feat-panel-icon {
      animation: iconPop 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }

    @keyframes iconPop {
      0% { transform: scale(0.85); opacity: 0.6; }
      100% { transform: scale(1); opacity: 1; }
    }

    .feat-panel-text {
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: left;
      min-width: 0;
    }

    .feat-panel-left h3,
    .feat-panel-text h3 {
      font-size: 1.25rem;
      font-weight: 800;
      color: var(--primary);
      margin-bottom: 6px;
      letter-spacing: -0.02em;
    }

    .feat-panel-left p,
    .feat-panel-text p {
      display: block;
      font-size: 0.84rem;
      color: var(--text-muted);
      line-height: 1.45;
      max-width: none;
      margin: 0;
    }

    /* Col 2 + Col 3: points in two equal columns */
    .feat-checks {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px 24px;
      align-content: start;
      list-style: none;
      margin: 0;
      padding: 0;
      grid-column: 2 / 4;
      align-self: center;
      width: 100%;
      min-width: 0;
    }

    .feat-checks li {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 0.92rem;
      color: var(--text);
      font-weight: 500;
      line-height: 1.35;
      opacity: 0;
      transform: translateY(16px) scale(0.92);
      transition: color 0.2s ease;
      cursor: default;
      min-width: 0;
      overflow-wrap: break-word;
      word-break: break-word;
    }

    .feat-panel.active .feat-checks li {
      animation: itemPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }

    /* staggered delays — icon + text together */
    .feat-panel.active .feat-checks li:nth-child(1)  { animation-delay: 0.08s; }
    .feat-panel.active .feat-checks li:nth-child(2)  { animation-delay: 0.15s; }
    .feat-panel.active .feat-checks li:nth-child(3)  { animation-delay: 0.22s; }
    .feat-panel.active .feat-checks li:nth-child(4)  { animation-delay: 0.29s; }
    .feat-panel.active .feat-checks li:nth-child(5)  { animation-delay: 0.36s; }
    .feat-panel.active .feat-checks li:nth-child(6)  { animation-delay: 0.43s; }
    .feat-panel.active .feat-checks li:nth-child(7)  { animation-delay: 0.50s; }
    .feat-panel.active .feat-checks li:nth-child(8)  { animation-delay: 0.57s; }
    .feat-panel.active .feat-checks li:nth-child(9)  { animation-delay: 0.64s; }
    .feat-panel.active .feat-checks li:nth-child(10) { animation-delay: 0.71s; }

    @keyframes itemPop {
      0%   { opacity: 0; transform: translateY(16px) scale(0.88); }
      70%  { opacity: 1; transform: translateY(-2px) scale(1.03); }
      100% { opacity: 1; transform: translateY(0) scale(1); }
    }

    .feat-checks li:hover {
      color: var(--primary);
      transform: translateX(4px) scale(1.02);
      transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease;
    }

    .feat-checks li::before {
      content: '✓';
      flex-shrink: 0;
      width: 22px;
      height: 22px;
      background: #e6f7f0;
      color: var(--success);
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-size: 0.7rem;
      font-weight: 800;
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    .feat-checks li:hover::before {
      transform: scale(1.15);
      box-shadow: 0 2px 8px rgba(13, 159, 110, 0.25);
    }

    @media (prefers-reduced-motion: reduce) {
      .feat-checks li {
        opacity: 1;
        transform: none;
        animation: none !important;
      }
    }

    @media (max-width: 900px) {
      .feat-panel.active {
        grid-template-columns: 1fr;
        padding: 28px 24px;
        gap: 20px;
      }
      .feat-panel-left {
        grid-column: 1;
      }
      .feat-panel-icon {
        width: 72px;
        height: 72px;
        font-size: 2.1rem;
      }
      .feat-checks {
        grid-column: 1;
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width: 600px) {
      .feat-checks {
        grid-template-columns: 1fr;
      }
    }

    /* ========== FEATURES HIGHLIGHT ========== */

    /* Why Dinlipi — dynamic topic visuals */
    .fv-anim {
      position: relative;
      min-height: 240px;
      padding: 8px 4px;
      overflow: hidden;
    }

    .fv-label {
      font-size: 0.85rem;
      font-weight: 700;
      color: var(--primary);
      margin-bottom: 14px;
      letter-spacing: -0.01em;
    }

    /* ===== ATTENDANCE: biometric ring + live status ===== */
    .fv-att {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 18px;
    }

    .fv-bio {
      position: relative;
      width: 120px;
      height: 120px;
    }

    .fv-bio-ring {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 2px solid transparent;
      border-top-color: var(--primary);
      border-right-color: var(--primary-mid);
      animation: fvSpin 2.2s linear infinite;
    }

    .fv-bio-ring.r2 {
      inset: 10px;
      border-top-color: #10b981;
      border-right-color: transparent;
      animation-duration: 1.6s;
      animation-direction: reverse;
    }

    .fv-bio-core {
      position: absolute;
      inset: 24px;
      border-radius: 50%;
      background: linear-gradient(145deg, var(--primary-light), #fff);
      border: 1px solid var(--border);
      display: grid;
      place-items: center;
      box-shadow: inset 0 2px 8px rgba(27,70,83,0.06);
    }

    .fv-bio-core svg {
      width: 36px;
      height: 36px;
      stroke: var(--primary);
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .fv-bio-scan {
      position: absolute;
      left: 28px;
      right: 28px;
      height: 2px;
      background: linear-gradient(90deg, transparent, #10b981, transparent);
      top: 50%;
      animation: fvScan 2s ease-in-out infinite;
      opacity: 0.9;
      border-radius: 2px;
      box-shadow: 0 0 12px rgba(16,185,129,0.5);
    }

    @keyframes fvSpin {
      to { transform: rotate(360deg); }
    }

    @keyframes fvScan {
      0%, 100% { top: 28%; opacity: 0.3; }
      50% { top: 68%; opacity: 1; }
    }

    .fv-live {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      width: 100%;
    }

    .fv-live-card {
      background: var(--bg-alt);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 10px 12px;
      display: flex;
      align-items: center;
      gap: 8px;
      animation: fvFloatY 3s ease-in-out infinite;
    }

    .fv-live-card:nth-child(2) { animation-delay: 0.5s; }
    .fv-live-card:nth-child(3) { animation-delay: 1s; }
    .fv-live-card:nth-child(4) { animation-delay: 1.5s; }

    @keyframes fvFloatY {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-4px); }
    }

    .fv-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
      animation: fvBlink 1.8s ease-in-out infinite;
    }

    .fv-dot.g { background: #10b981; box-shadow: 0 0 0 0 rgba(16,185,129,0.5); }
    .fv-dot.r { background: #ef4444; box-shadow: 0 0 0 0 rgba(239,68,68,0.5); }
    .fv-dot.b { background: #3b82f6; }
    .fv-dot.o { background: #f59e0b; }

    @keyframes fvBlink {
      0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.4); transform: scale(1); }
      50% { box-shadow: 0 0 0 6px rgba(16,185,129,0); transform: scale(1.15); }
    }

    .fv-live-card .txt {
      font-size: 0.72rem;
      font-weight: 600;
      color: var(--text);
      line-height: 1.25;
    }

    .fv-live-card .txt small {
      display: block;
      font-weight: 500;
      color: var(--text-muted);
      font-size: 0.65rem;
    }

    /* ===== PAYROLL: dynamic salary visual ===== */
    .fv-pay {
      display: flex;
      flex-direction: column;
      gap: 12px;
      width: 100%;
      position: relative;
    }

    /* Hero card */
    .fv-pay-hero {
      background: linear-gradient(135deg, #0d3d4c 0%, var(--primary) 45%, var(--primary-mid) 100%);
      border-radius: 16px;
      padding: 18px 20px 16px;
      color: #fff;
      position: relative;
      overflow: hidden;
      box-shadow: 0 18px 44px rgba(13,61,76,.28), 0 0 0 1px rgba(255,255,255,.06) inset;
    }

    /* Mesh / noise pattern overlay */
    .fv-pay-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 80% 20%, rgba(255,255,255,.07) 0%, transparent 38%),
        radial-gradient(circle at 15% 80%, rgba(16,185,129,.12) 0%, transparent 35%);
      pointer-events: none;
    }

    /* Sweeping shine */
    .fv-pay-hero::after {
      content: '';
      position: absolute;
      top: -50%;
      left: -35%;
      width: 55%;
      height: 200%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.13), transparent);
      transform: skewX(-18deg);
      animation: fvPayShine 3.8s ease-in-out infinite;
    }

    @keyframes fvPayShine {
      0%, 15% { left: -45%; opacity: 0; }
      25% { opacity: 1; }
      65% { left: 115%; opacity: .6; }
      75%, 100% { left: 115%; opacity: 0; }
    }

    /* Status badge top-right */
    .fv-pay-badge {
      position: absolute;
      top: 14px;
      right: 16px;
      display: flex;
      align-items: center;
      gap: 5px;
      background: rgba(16,185,129,.18);
      border: 1px solid rgba(16,185,129,.35);
      border-radius: 100px;
      padding: 3px 9px;
      font-size: 0.58rem;
      font-weight: 700;
      color: #6ee7c7;
      letter-spacing: .04em;
      animation: fvBadgePulse 2.4s ease-in-out infinite;
    }

    .fv-pay-badge i {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #10b981;
      box-shadow: 0 0 0 0 rgba(16,185,129,.5);
      animation: fvDotRing 2.4s ease-out infinite;
    }

    @keyframes fvDotRing {
      0% { box-shadow: 0 0 0 0 rgba(16,185,129,.55); }
      70% { box-shadow: 0 0 0 6px rgba(16,185,129,0); }
      100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
    }

    @keyframes fvBadgePulse {
      0%, 100% { opacity: .85; }
      50% { opacity: 1; }
    }

    .fv-pay-hero .lbl {
      font-size: 0.66rem;
      opacity: 0.72;
      font-weight: 600;
      letter-spacing: .03em;
      margin-bottom: 6px;
      text-transform: uppercase;
    }

    /* Animated number counter feel */
    .fv-pay-hero .amt {
      font-size: 1.65rem;
      font-weight: 900;
      letter-spacing: -0.04em;
      font-variant-numeric: tabular-nums;
      line-height: 1;
      margin-bottom: 12px;
      animation: fvAmtReveal 0.9s cubic-bezier(0.22,1,0.36,1) both;
    }

    @keyframes fvAmtReveal {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .fv-pay-hero .amt span {
      font-size: 0.82rem;
      font-weight: 600;
      opacity: 0.65;
      margin-left: 2px;
    }

    /* Progress bar in hero */
    .fv-pay-bar {
      height: 6px;
      border-radius: 100px;
      background: rgba(255,255,255,.15);
      overflow: visible;
      position: relative;
    }

    .fv-pay-bar i {
      display: block;
      height: 100%;
      width: 0;
      border-radius: 100px;
      background: linear-gradient(90deg, rgba(16,185,129,.8), #10b981, #34d399);
      animation: fvBarFill 2.2s cubic-bezier(0.22,1,0.36,1) 0.5s both;
      position: relative;
      box-shadow: 0 0 10px rgba(16,185,129,.55);
    }

    /* Glowing dot at bar tip */
    .fv-pay-bar i::after {
      content: '';
      position: absolute;
      right: -4px;
      top: 50%;
      transform: translateY(-50%);
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #34d399;
      box-shadow: 0 0 0 3px rgba(52,211,153,.3), 0 0 12px rgba(52,211,153,.6);
      opacity: 0;
      animation: fvBarTipAppear 0.4s ease 2.4s both;
    }

    @keyframes fvBarFill { to { width: 88%; } }

    @keyframes fvBarTipAppear {
      to { opacity: 1; }
    }

    /* Bar label row */
    .fv-pay-bar-row {
      display: flex;
      justify-content: space-between;
      font-size: 0.6rem;
      opacity: .6;
      margin-top: 7px;
      font-weight: 600;
    }

    /* Breakdown stack */
    .fv-pay-stack {
      display: flex;
      flex-direction: column;
      gap: 7px;
    }

    .fv-bill {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 14px;
      border-radius: 12px;
      background: rgba(255,255,255,.96);
      border: 1px solid rgba(212,228,235,.8);
      font-size: 0.76rem;
      font-weight: 600;
      color: var(--text);
      box-shadow: 0 3px 10px rgba(27,70,83,.045);
      opacity: 0;
      transform: translateX(18px);
      animation: fvBillIn 0.55s cubic-bezier(0.22,1,0.36,1) forwards, fvBillHover 3.5s ease-in-out infinite;
      transition: background .2s, border-color .2s, transform .2s;
      cursor: default;
    }

    .fv-bill:nth-child(1) { animation-delay: 0.1s, 0s; }
    .fv-bill:nth-child(2) { animation-delay: 0.22s, 0.5s; }
    .fv-bill:nth-child(3) { animation-delay: 0.34s, 1s; }

    .fv-bill:hover {
      background: var(--primary-light);
      border-color: rgba(27,70,83,.18);
      transform: translateX(3px) !important;
    }

    @keyframes fvBillIn {
      to { opacity: 1; transform: translateX(0); }
    }

    @keyframes fvBillHover {
      0%, 100% { box-shadow: 0 3px 10px rgba(27,70,83,.045); }
      50% { box-shadow: 0 6px 18px rgba(27,70,83,.08); }
    }

    /* Left icon dot per bill */
    .fv-bill-icon {
      width: 26px;
      height: 26px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      margin-right: 10px;
      flex-shrink: 0;
    }

    .fv-bill-icon svg {
      width: 13px;
      height: 13px;
      stroke-width: 2;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .fv-bill-icon.gross { background: #e0f2fe; }
    .fv-bill-icon.gross svg { stroke: #0369a1; }
    .fv-bill-icon.deduct { background: #fee2e2; }
    .fv-bill-icon.deduct svg { stroke: #dc2626; }
    .fv-bill-icon.bonus { background: #fef3c7; }
    .fv-bill-icon.bonus svg { stroke: #d97706; }

    .fv-bill-left {
      display: flex;
      align-items: center;
    }

    .fv-bill .val { color: var(--primary); font-weight: 800; font-size: .78rem; }
    .fv-bill .val.neg { color: #ef4444; }
    .fv-bill .val.bonus-val { color: #d97706; }

    /* Floating mini stat chips above/beside hero */
    .fv-pay-chips {
      display: flex;
      gap: 7px;
      margin-bottom: 4px;
    }

    .fv-pay-chip {
      flex: 1;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 10px;
      padding: 7px 10px;
      font-size: .6rem;
      font-weight: 700;
      color: rgba(255,255,255,.75);
      position: relative;
      overflow: hidden;
      animation: fvChipIn .6s cubic-bezier(0.22,1,0.36,1) both;
    }

    .fv-pay-chip:nth-child(1) { animation-delay: .2s; }
    .fv-pay-chip:nth-child(2) { animation-delay: .35s; }
    .fv-pay-chip:nth-child(3) { animation-delay: .5s; }

    @keyframes fvChipIn {
      from { opacity: 0; transform: translateY(6px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .fv-pay-chip strong {
      display: block;
      font-size: .78rem;
      font-weight: 900;
      color: #fff;
      margin-top: 1px;
      letter-spacing: -.01em;
    }

    @keyframes fvShine {
      0%, 100% { left: -40%; }
      50% { left: 110%; }
    }

    /* ===== REPORTS: premium compliance command center ===== */
    .fv-rep {
      position: relative;
      width: 100%;
      min-height: 285px;
      padding: 18px;
      border: 1px solid rgba(212,228,235,.95);
      border-radius: 22px;
      background:
        radial-gradient(circle at 88% 8%, rgba(27,70,83,.07), transparent 30%),
        radial-gradient(circle at 8% 94%, rgba(242,155,9,.055), transparent 24%),
        linear-gradient(145deg, #ffffff 0%, #f7fafb 100%);
      box-shadow: 0 20px 50px rgba(27,70,83,.11), inset 0 1px 0 rgba(255,255,255,.95);
      overflow: hidden;
      isolation: isolate;
    }

    .fv-rep::before {
      content: '';
      position: absolute;
      width: 190px;
      height: 190px;
      right: -95px;
      top: -95px;
      border-radius: 50%;
      border: 1px solid rgba(27,70,83,.08);
      box-shadow: 0 0 0 28px rgba(27,70,83,.018), 0 0 0 56px rgba(27,70,83,.012);
      animation: fvOrbitPulse 5s ease-in-out infinite;
      pointer-events: none;
      z-index: -1;
    }

    .fv-rep::after {
      content: '';
      position: absolute;
      left: -80px;
      bottom: -95px;
      width: 170px;
      height: 170px;
      border-radius: 50%;
      background: rgba(242,155,9,.035);
      filter: blur(1px);
      animation: fvRepFloat 6s ease-in-out infinite reverse;
      pointer-events: none;
      z-index: -1;
    }

    @keyframes fvOrbitPulse {
      0%,100% { transform: scale(.92); opacity: .65; }
      50% { transform: scale(1.08); opacity: 1; }
    }

    @keyframes fvRepFloat {
      0%,100% { transform: translate(0,0); }
      50% { transform: translate(12px,-10px); }
    }

    .fv-rep-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 16px;
    }

    .fv-rep-kicker {
      display: flex;
      align-items: center;
      gap: 7px;
      color: var(--text-muted);
      font-size: .62rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .09em;
    }

    .fv-rep-kicker i {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--success);
      box-shadow: 0 0 0 0 rgba(13,159,110,.35);
      animation: fvRepPulse 1.8s ease-out infinite;
    }

    .fv-rep-status {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 9px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: rgba(255,255,255,.8);
      color: var(--text-muted);
      font-size: .62rem;
      font-weight: 800;
      box-shadow: 0 4px 12px rgba(27,70,83,.055);
    }

    .fv-rep-status::before {
      content: '✓';
      width: 15px;
      height: 15px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: var(--primary-light);
      color: var(--primary);
      font-size: .58rem;
    }

    .fv-rep-layout {
      display: grid;
      grid-template-columns: 132px 1fr;
      gap: 16px;
      align-items: stretch;
    }

    /* Central audit pulse */
    .fv-audit-core {
      min-height: 205px;
      position: relative;
      display: grid;
      place-items: center;
      border-radius: 17px;
      border: 1px solid rgba(212,228,235,.8);
      background: rgba(255,255,255,.56);
      overflow: hidden;
    }

    .fv-audit-core::before {
      content: '';
      position: absolute;
      width: 145px;
      height: 145px;
      border: 1px dashed rgba(42,106,122,.16);
      border-radius: 50%;
      animation: fvCoreRotate 16s linear infinite;
    }

    .fv-audit-core::after {
      content: '';
      position: absolute;
      width: 105px;
      height: 105px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(27,70,83,.07), transparent 68%);
      animation: fvCoreBreath 3.4s ease-in-out infinite;
    }

    @keyframes fvCoreRotate { to { transform: rotate(360deg); } }
    @keyframes fvCoreBreath {
      0%,100% { transform: scale(.86); opacity: .5; }
      50% { transform: scale(1.08); opacity: 1; }
    }

    .fv-audit-ring {
      width: 82px;
      height: 82px;
      position: relative;
      z-index: 2;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: conic-gradient(from -25deg, var(--primary) 0 72%, var(--primary-mid) 72% 86%, #e8eef2 86% 100%);
      box-shadow: 0 12px 28px rgba(27,70,83,.16);
      animation: fvAuditIn 1.2s cubic-bezier(.22,1,.36,1) both, fvAuditPulse 3.4s ease-in-out 1.2s infinite;
    }

    .fv-audit-ring::before {
      content: '';
      position: absolute;
      inset: 7px;
      border-radius: 50%;
      background: #fff;
      box-shadow: inset 0 1px 5px rgba(27,70,83,.07);
    }

    .fv-audit-check {
      position: relative;
      z-index: 2;
      width: 31px;
      height: 31px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: var(--primary-light);
      color: var(--primary);
      font-size: .85rem;
      font-weight: 900;
      box-shadow: 0 4px 12px rgba(27,70,83,.08);
    }

    .fv-audit-label {
      position: absolute;
      bottom: 18px;
      left: 0;
      right: 0;
      text-align: center;
      z-index: 3;
    }

    .fv-audit-label strong {
      display: block;
      font-size: .72rem;
      color: var(--text);
      font-weight: 800;
    }

    .fv-audit-label span {
      display: block;
      margin-top: 2px;
      font-size: .58rem;
      color: var(--text-muted);
      font-weight: 600;
    }

    @keyframes fvAuditIn {
      from { transform: scale(.55) rotate(-90deg); opacity: 0; }
      to { transform: scale(1) rotate(0); opacity: 1; }
    }

    @keyframes fvAuditPulse {
      0%,100% { box-shadow: 0 12px 28px rgba(27,70,83,.16); }
      50% { box-shadow: 0 14px 34px rgba(27,70,83,.22), 0 0 0 8px rgba(27,70,83,.035); }
    }

    /* Report metrics */
    .fv-rep-metrics {
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 10px;
    }

    .fv-rep-row {
      position: relative;
      display: grid;
      grid-template-columns: 76px 1fr 34px;
      align-items: center;
      gap: 8px;
      min-height: 44px;
      padding: 7px 8px;
      border: 1px solid rgba(212,228,235,.72);
      border-radius: 12px;
      background: rgba(255,255,255,.68);
      box-shadow: 0 5px 16px rgba(27,70,83,.045);
      animation: fvMetricIn .7s cubic-bezier(.22,1,.36,1) both;
      transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    }

    .fv-rep-row:hover {
      transform: translateX(4px);
      border-color: rgba(42,106,122,.28);
      box-shadow: 0 8px 20px rgba(27,70,83,.09);
    }

    .fv-rep-row:nth-child(1) { animation-delay: .22s; }
    .fv-rep-row:nth-child(2) { animation-delay: .38s; }
    .fv-rep-row:nth-child(3) { animation-delay: .54s; }

    @keyframes fvMetricIn {
      from { opacity: 0; transform: translateX(18px); }
      to { opacity: 1; transform: translateX(0); }
    }

    .fv-metric-name {
      display: flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
      font-size: .68rem;
      font-weight: 800;
      color: var(--text);
      white-space: nowrap;
    }

    .fv-metric-name i {
      width: 6px;
      height: 6px;
      flex: 0 0 auto;
      border-radius: 50%;
      background: var(--primary-mid);
      box-shadow: 0 0 0 3px rgba(42,106,122,.08);
      animation: fvMetricDot 2.2s ease-in-out infinite;
    }

    .fv-rep-row:nth-child(2) .fv-metric-name i { animation-delay: .35s; }
    .fv-rep-row:nth-child(3) .fv-metric-name i { animation-delay: .7s; }

    @keyframes fvMetricDot {
      0%,100% { transform: scale(1); }
      50% { transform: scale(1.3); }
    }

    .fv-rep-row .bar {
      height: 9px;
      border-radius: 999px;
      background: #e7eef1;
      overflow: hidden;
      position: relative;
      box-shadow: inset 0 1px 2px rgba(27,70,83,.06);
    }

    .fv-rep-row .bar i {
      display: block;
      height: 100%;
      width: 0;
      border-radius: 999px;
      background: linear-gradient(90deg, #8da9b0 0%, var(--primary) 42%, var(--primary-mid) 100%);
      position: relative;
      animation: fvReportBarFill 1.45s cubic-bezier(.22,1,.36,1) both;
    }

    .fv-rep-row:nth-child(1) .bar i { --report-width: 92%; animation-delay: .32s; }
    .fv-rep-row:nth-child(2) .bar i { --report-width: 78%; animation-delay: .48s; }
    .fv-rep-row:nth-child(3) .bar i { --report-width: 85%; animation-delay: .64s; }

    .fv-rep-row .bar i::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: -45%;
      width: 45%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.62), transparent);
      animation: fvReportBarShine 2.8s ease-in-out infinite;
    }

    @keyframes fvReportBarFill {
      from { width: 0; }
      to { width: var(--report-width); }
    }

    @keyframes fvReportBarShine {
      0%,35% { left: -45%; opacity: 0; }
      45% { opacity: 1; }
      75%,100% { left: 120%; opacity: 0; }
    }

    .fv-rep-row .pct {
      font-size: .68rem;
      font-weight: 900;
      color: var(--primary);
      text-align: right;
      font-variant-numeric: tabular-nums;
    }

    /* Floating report chips create depth without turning the visual into a card stack */
    .fv-report-chip {
      position: absolute;
      z-index: 5;
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 7px 9px;
      border: 1px solid rgba(212,228,235,.9);
      border-radius: 10px;
      background: rgba(255,255,255,.88);
      box-shadow: 0 10px 22px rgba(27,70,83,.09);
      color: var(--text);
      font-size: .58rem;
      font-weight: 800;
      backdrop-filter: blur(7px);
      animation: fvChipFloat 4s ease-in-out infinite;
    }

    .fv-report-chip b {
      width: 19px;
      height: 19px;
      display: grid;
      place-items: center;
      border-radius: 6px;
      background: var(--primary-light);
      color: var(--primary);
      font-size: .62rem;
    }

    .fv-report-chip.chip-one { left: 7px; top: 48px; }
    .fv-report-chip.chip-two { right: 8px; bottom: 12px; animation-delay: -1.7s; }

    @keyframes fvChipFloat {
      0%,100% { transform: translateY(0) rotate(0deg); }
      50% { transform: translateY(-6px) rotate(-1deg); }
    }

    .fv-rep-scan {
      position: absolute;
      left: 16px;
      right: 16px;
      top: -12%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(42,106,122,.35), transparent);
      box-shadow: 0 0 12px rgba(42,106,122,.14);
      animation: fvReportScan 5s ease-in-out infinite;
      pointer-events: none;
    }

    @keyframes fvReportScan {
      0%,12% { top: -10%; opacity: 0; }
      22% { opacity: .8; }
      70% { top: 108%; opacity: .5; }
      82%,100% { top: 108%; opacity: 0; }
    }

    @media (max-width: 720px) {
      .fv-rep { padding: 14px; }
      .fv-rep-layout { grid-template-columns: 105px 1fr; gap: 10px; }
      .fv-audit-core { min-height: 195px; }
      .fv-rep-row { grid-template-columns: 62px 1fr 32px; }
      .fv-report-chip.chip-one { left: 2px; }
      .fv-report-chip.chip-two { right: 3px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .fv-rep::before, .fv-rep::after, .fv-rep-kicker i, .fv-audit-core::before,
      .fv-audit-core::after, .fv-audit-ring, .fv-rep-row, .fv-metric-name i,
      .fv-rep-row .bar i, .fv-rep-row .bar i::after, .fv-report-chip, .fv-rep-scan {
        animation: none !important;
      }
      .fv-rep-row .bar i { width: var(--report-width); }
    }

    /* ===== BUYER COMPLIANCE visual ===== */
    .fv-compliance {
      position: relative;
      width: 100%;
      min-height: 310px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px 8px;
    }

    /* Ambient glow behind card */
    .fv-comp-glow {
      position: absolute;
      width: 260px;
      height: 260px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(27,70,83,.09) 0%, transparent 68%);
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      animation: fvCompGlowPulse 4s ease-in-out infinite;
      pointer-events: none;
      z-index: 0;
    }

    @keyframes fvCompGlowPulse {
      0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
      50% { opacity: 1; transform: translate(-50%, -50%) scale(1.18); }
    }

    /* Main card */
    .fv-comp-card {
      width: 100%;
      background:
        radial-gradient(circle at 90% 5%, rgba(27,70,83,.055), transparent 28%),
        linear-gradient(150deg, #ffffff 0%, #f7fafb 100%);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 24px 22px;
      box-shadow: 0 25px 60px rgba(27,70,83,.11), inset 0 1px 0 rgba(255,255,255,.9);
      position: relative;
      z-index: 2;
      animation: fvCompFloat 5s ease-in-out infinite;
      overflow: hidden;
    }

    /* subtle scan line across the card */
    .fv-comp-card::before {
      content: '';
      position: absolute;
      left: 0; right: 0;
      top: -10%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(42,106,122,.3), transparent);
      animation: fvCompScan 5.5s ease-in-out infinite;
      pointer-events: none;
    }

    @keyframes fvCompScan {
      0%, 10% { top: -5%; opacity: 0; }
      20% { opacity: .7; }
      70% { top: 108%; opacity: .4; }
      82%, 100% { top: 108%; opacity: 0; }
    }

    @keyframes fvCompFloat {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
    }

    /* Card top */
    .fv-comp-card-top {
      display: flex;
      align-items: center;
      gap: 13px;
      margin-bottom: 20px;
    }

    .fv-comp-icon {
      width: 46px;
      height: 46px;
      border-radius: 14px;
      background: linear-gradient(145deg, var(--primary-light), #d0e8ef);
      color: var(--primary);
      display: grid;
      place-items: center;
      flex-shrink: 0;
      position: relative;
      overflow: hidden;
      box-shadow: 0 4px 14px rgba(27,70,83,.12);
    }

    .fv-comp-icon svg {
      width: 22px;
      height: 22px;
      position: relative;
      z-index: 1;
      animation: fvIconPulse 2.6s ease-in-out infinite;
    }

    .fv-comp-icon::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at center, rgba(27,70,83,.18), transparent 70%);
      opacity: 0;
      animation: fvIconGlow 2.6s ease-in-out infinite;
    }

    @keyframes fvIconPulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.1); }
    }

    @keyframes fvIconGlow {
      0%, 100% { opacity: 0; }
      50% { opacity: 1; }
    }

    .fv-comp-sub {
      display: block;
      font-size: 0.65rem;
      color: var(--text-muted);
      font-weight: 600;
      letter-spacing: .02em;
      margin-bottom: 2px;
    }

    .fv-comp-title {
      font-size: 0.92rem;
      font-weight: 800;
      color: var(--primary);
      letter-spacing: -.01em;
    }

    /* Progress */
    .fv-comp-progress {
      margin-bottom: 18px;
    }

    .fv-comp-prog-head {
      display: flex;
      justify-content: space-between;
      font-size: 0.65rem;
      color: var(--text-muted);
      font-weight: 600;
      margin-bottom: 8px;
    }

    .fv-comp-prog-head strong {
      color: var(--primary);
      font-weight: 900;
      font-size: .7rem;
    }

    .fv-comp-bar {
      height: 8px;
      border-radius: 100px;
      background: var(--bg-alt);
      overflow: hidden;
      box-shadow: inset 0 1px 3px rgba(27,70,83,.06);
    }

    .fv-comp-bar i {
      display: block;
      height: 100%;
      width: 0;
      border-radius: 100px;
      background: linear-gradient(90deg, #0d4f5c, var(--primary-mid));
      animation: fvCompBarFill 1.8s cubic-bezier(0.22,1,0.36,1) 0.4s both;
      position: relative;
    }

    .fv-comp-bar i::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
      animation: fvBarShine 2.8s ease-in-out infinite 2.2s;
    }

    @keyframes fvCompBarFill { to { width: 92%; } }

    @keyframes fvBarShine {
      0% { transform: translateX(-100%); }
      100% { transform: translateX(200%); }
    }

    /* Checklist items */
    .fv-comp-items {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .fv-comp-item {
      display: flex;
      align-items: center;
      gap: 9px;
      font-size: 0.74rem;
      font-weight: 600;
      color: var(--text-muted);
      padding: 6px 9px;
      border-radius: 10px;
      background: rgba(255,255,255,.7);
      border: 1px solid rgba(212,228,235,.6);
      opacity: 0;
      transform: translateX(-14px);
      animation: fvCompItemIn 0.55s cubic-bezier(0.22,1,0.36,1) forwards;
      animation-delay: calc(0.9s + var(--ci) * 0.14s);
      transition: background .25s, border-color .25s, transform .25s;
    }

    .fv-comp-item:hover {
      background: var(--primary-light);
      border-color: rgba(27,70,83,.2);
      transform: translateX(3px);
    }

    @keyframes fvCompItemIn {
      to { opacity: 1; transform: translateX(0); }
    }

    .fv-comp-check {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: linear-gradient(145deg, var(--primary-light), #d0e8ef);
      display: grid;
      place-items: center;
      flex-shrink: 0;
      box-shadow: 0 2px 6px rgba(27,70,83,.1);
    }

    .fv-comp-check svg {
      width: 10px;
      height: 10px;
      stroke: var(--primary);
      stroke-width: 2.5;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* Floating chips */
    .fv-comp-chip {
      position: absolute;
      background: rgba(255,255,255,.92);
      backdrop-filter: blur(8px);
      border: 1px solid var(--border);
      border-radius: 13px;
      padding: 10px 13px;
      display: flex;
      align-items: center;
      gap: 10px;
      box-shadow: 0 14px 34px rgba(27,70,83,.10);
      z-index: 5;
      min-width: 140px;
      transition: transform .3s ease, box-shadow .3s ease;
    }

    .fv-comp-chip:hover {
      transform: translateY(-3px) scale(1.03);
      box-shadow: 0 18px 40px rgba(27,70,83,.14);
    }

    .chip-buyer {
      top: -16px;
      right: -10px;
      animation: fvChipFloat 4s ease-in-out infinite;
    }

    .chip-evidence {
      bottom: -16px;
      left: -10px;
      animation: fvChipFloat 4.6s ease-in-out infinite 0.8s;
    }

    /* SVG icon box inside chip */
    .fv-comp-chip-iconbox {
      width: 30px;
      height: 30px;
      border-radius: 9px;
      background: var(--primary-light);
      display: grid;
      place-items: center;
      flex-shrink: 0;
    }

    .fv-comp-chip-iconbox svg {
      width: 16px;
      height: 16px;
      stroke: var(--primary);
      stroke-width: 1.8;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .fv-comp-chip-label {
      display: block;
      font-size: 0.6rem;
      color: var(--text-muted);
      font-weight: 600;
      letter-spacing: .01em;
      margin-bottom: 2px;
    }

    .fv-comp-chip strong {
      font-size: 0.74rem;
      font-weight: 800;
      color: var(--primary);
    }

    /* Deco dots */
    .fv-comp-dot {
      position: absolute;
      border-radius: 50%;
      background: var(--primary);
      opacity: 0.12;
      z-index: 1;
      animation: fvDotPulse 3.5s ease-in-out infinite;
    }

    .fv-comp-dot-1 { width: 9px; height: 9px; top: 18px; left: 20px; }
    .fv-comp-dot-2 { width: 6px; height: 6px; top: 28%; right: 18px; animation-delay: .9s; }
    .fv-comp-dot-3 { width: 7px; height: 7px; bottom: 22px; left: 45%; animation-delay: 1.7s; }

    @keyframes fvDotPulse {
      0%, 100% { opacity: .1; transform: scale(1); }
      50% { opacity: .28; transform: scale(1.5); }
    }

    @media (max-width: 720px) {
      .chip-buyer { right: 0; top: -10px; }
      .chip-evidence { left: 0; bottom: -10px; }
    }

    .feature-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
      margin-bottom: 80px;
    }

    .feature-row:last-child { margin-bottom: 0; }
    .feature-row.reverse .feature-content { order: 2; }
    .feature-row.reverse .feature-visual { order: 1; }

    /* Why Dinlipi — left / right / left transitions */
    .feature-row .feature-content,
    .feature-row .feature-visual {
      opacity: 0;
      transition: opacity 1.15s cubic-bezier(0.22, 1, 0.36, 1), transform 1.15s cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* Row 1 & 3: content from left, visual from right */
    .feature-row:not(.reverse) .feature-content {
      transform: translateX(-72px);
    }
    .feature-row:not(.reverse) .feature-visual {
      transform: translateX(72px);
    }

    /* Row 2 (reverse): content from right, visual from left */
    .feature-row.reverse .feature-content {
      transform: translateX(72px);
    }
    .feature-row.reverse .feature-visual {
      transform: translateX(-72px);
    }

    .feature-row.in-view .feature-content,
    .feature-row.in-view .feature-visual {
      opacity: 1;
      transform: translateX(0);
    }

    .feature-row.in-view .feature-visual {
      transition-delay: 0.2s;
    }

    @media (prefers-reduced-motion: reduce) {
      .feature-row .feature-content,
      .feature-row .feature-visual {
        opacity: 1;
        transform: none;
        transition: none;
      }
    }

    .feature-content h3 {
      font-size: 1.7rem;
      font-weight: 800;
      margin-bottom: 14px;
      letter-spacing: -0.02em;
    }

    .feature-content p {
      color: var(--text-muted);
      margin-bottom: 20px;
      font-size: 1.05rem;
    }

    .check-list li {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 12px;
      font-size: 0.98rem;
    }

    .check-list li::before {
      content: '✓';
      flex-shrink: 0;
      width: 22px;
      height: 22px;
      background: #d1fae5;
      color: #065f46;
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-size: 0.75rem;
      font-weight: 700;
      margin-top: 2px;
    }

    .feature-visual {
      background: white;
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 28px;
      box-shadow: var(--shadow);
    }

    .mini-chart {
      display: flex;
      align-items: flex-end;
      gap: 10px;
      height: 140px;
      margin-top: 16px;
    }

    .bar {
      flex: 1;
      background: linear-gradient(180deg, var(--primary), #60a5fa);
      border-radius: 6px 6px 0 0;
      min-height: 20px;
    }

    /* ========== PRICING ========== */
    .pricing-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
      align-items: stretch;
    }

    .pkg {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: 22px 18px 20px;
      display: flex;
      flex-direction: column;
      position: relative;
      transition: box-shadow 0.25s, transform 0.25s;
    }

    .pkg:hover {
      box-shadow: var(--shadow-lg);
      transform: translateY(-3px);
    }

    .pkg.lite {
      border: 2px solid #e6b422;
      background: #fffef8;
    }

    .pkg.enterprise {
      background: linear-gradient(165deg, #0c2a36 0%, #0f3a4a 100%);
      border: none;
      color: #e2eef4;
    }

    .pkg-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 12px;
    }

    .pkg-title-wrap {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .pkg-icon {
      width: 40px;
      height: 40px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      flex-shrink: 0;
      font-size: 1.15rem;
    }

    .pkg.tiny .pkg-icon { background: #e0f2fe; }
    .pkg.starter .pkg-icon { background: #e0e7ff; }
    .pkg.lite .pkg-icon { background: #fef3c7; }
    .pkg.enterprise .pkg-icon { background: rgba(255,255,255,0.12); }

    .pkg-title {
      font-size: 1.15rem;
      font-weight: 800;
      line-height: 1.2;
      color: var(--primary);
      letter-spacing: -0.02em;
    }

    .pkg.lite .pkg-title { color: #b45309; }
    .pkg.enterprise .pkg-title { color: #fff; }

    .pkg-badge {
      width: 56px;
      height: 56px;
      border-radius: 14px;
      background: transparent;
      display: grid;
      place-items: center;
      flex-shrink: 0;
      overflow: hidden;
      box-shadow: none;
    }

    .pkg-badge img {
      width: 56px;
      height: 56px;
      object-fit: contain;
      display: block;
    }

    .pkg.lite .pkg-badge { background: transparent; }

    .pkg-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 12px;
    }

    .pkg-tag {
      font-size: 0.68rem;
      font-weight: 600;
      color: #0d9488;
      background: #ecfdf5;
      border: 1px solid #a7f3d0;
      border-radius: 100px;
      padding: 3px 8px;
      white-space: nowrap;
    }

    .pkg.lite .pkg-tag {
      color: #b45309;
      background: #fffbeb;
      border-color: #fde68a;
    }

    .pkg-emp {
      display: flex;
      align-items: center;
      gap: 8px;
      background: #f0f9ff;
      border-radius: 10px;
      padding: 10px 12px;
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--primary);
      margin-bottom: 14px;
    }

    .pkg.lite .pkg-emp { background: #fffbeb; color: #92400e; }
    .pkg.enterprise .pkg-emp { background: rgba(255,255,255,0.08); color: #e2eef4; }

    .pkg-group {
      margin-bottom: 10px;
    }

    .pkg-group-title {
      display: inline-flex;
      align-items: center;
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--primary);
      background: var(--primary-light);
      border: 1px solid var(--border);
      border-radius: 100px;
      padding: 5px 12px;
      margin-bottom: 8px;
      line-height: 1.2;
      box-shadow: 0 1px 3px rgba(27, 70, 83, 0.06);
    }

    .pkg.lite .pkg-group-title {
      color: #b45309;
      background: #fff7ed;
      border-color: #fed7aa;
    }
    .pkg.enterprise .pkg-group-title {
      color: #ecfdf5;
      background: rgba(125, 211, 192, 0.18);
      border-color: rgba(125, 211, 192, 0.35);
    }

    .pkg-list {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .pkg-list li {
      display: flex;
      align-items: flex-start;
      gap: 7px;
      font-size: 0.78rem;
      font-weight: 500;
      color: var(--text);
      padding: 3px 0;
      line-height: 1.35;
    }

    .pkg.enterprise .pkg-list li { color: #c5d8e2; }

    .pkg-list li::before {
      content: '✓';
      flex-shrink: 0;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background: #d1fae5;
      color: #059669;
      font-size: 0.6rem;
      font-weight: 800;
      display: grid;
      place-items: center;
      margin-top: 1px;
    }

    .pkg-price {
      margin-top: auto;
      padding-top: 14px;
      border-top: 1px solid var(--border);
      font-size: 0.85rem;
      color: var(--text-muted);
      font-weight: 500;
    }

    .pkg.lite .pkg-price { border-color: #fde68a; }
    .pkg.enterprise .pkg-price { border-color: rgba(255,255,255,0.1); color: #94b8c8; }

    .pkg-price strong {
      font-size: 1.65rem;
      font-weight: 800;
      color: var(--primary);
      letter-spacing: -0.03em;
    }

    .pkg.lite .pkg-price strong { color: #b45309; }
    .pkg.enterprise .pkg-price strong { color: #fff; }

    /* Enterprise specific */
    .ent-label {
      font-size: 0.68rem;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #7dd3c0;
      margin-bottom: 8px;
      margin-top: 4px;
    }

    .ent-input {
      width: 100%;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 10px;
      padding: 10px 12px;
      color: #fff;
      font-size: 0.85rem;
      font-family: inherit;
      margin-bottom: 12px;
      outline: none;
    }

    .ent-input::placeholder { color: #7a9aab; }

    .ent-option {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      padding: 9px 11px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.12);
      margin-bottom: 7px;
      cursor: pointer;
      font-size: 0.78rem;
      font-weight: 500;
      color: #d0e4ee;
      transition: border-color 0.2s, background 0.2s;
    }

    .ent-option:hover { border-color: rgba(255,255,255,0.25); }
    .ent-option.active {
      border-color: #2dd4bf;
      background: rgba(45,212,191,0.1);
    }

    .ent-option .radio {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 2px solid rgba(255,255,255,0.35);
      flex-shrink: 0;
      margin-top: 1px;
      display: grid;
      place-items: center;
    }

    .ent-option.active .radio {
      border-color: #2dd4bf;
      background: #2dd4bf;
      box-shadow: inset 0 0 0 3px #0c2a36;
    }

    .ent-option small {
      display: block;
      font-size: 0.7rem;
      color: #7a9aab;
      font-weight: 500;
      margin-top: 2px;
    }

    .ent-total {
      background: rgba(0,0,0,0.22);
      border-radius: 12px;
      padding: 12px 14px;
      margin: 12px 0 10px;
    }

    .ent-total .et-label {
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: #7dd3c0;
      margin-bottom: 6px;
    }

    .ent-total .et-row {
      display: flex;
      justify-content: space-between;
      font-size: 0.75rem;
      color: #a8c5d4;
      margin-bottom: 3px;
    }

    .ent-total .et-price {
      font-size: 1.5rem;
      font-weight: 800;
      color: #fff;
      margin-top: 6px;
      letter-spacing: -0.02em;
    }

    .ent-total .et-price span {
      font-size: 0.85rem;
      font-weight: 500;
      color: #7a9aab;
    }

    .ent-cta {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: #22d3ee;
      color: #0c2a36;
      font-weight: 700;
      font-size: 0.85rem;
      border-radius: 10px;
      padding: 12px 14px;
      text-decoration: none;
      transition: background 0.2s, transform 0.2s;
      margin-top: auto;
    }

    .ent-cta:hover {
      background: #67e8f9;
      transform: translateY(-1px);
    }

    @media (max-width: 1100px) {
      .pricing-grid { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 640px) {
      .pricing-grid { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; }
    }


    /* Pricing — staggered down-to-up transitions */
    #pricing .section-header .label,
    #pricing .section-header h2,
    #pricing .section-header p,
    #pricing .pkg {
      opacity: 0;
      transform: translateY(48px);
      transition: opacity 1.15s cubic-bezier(0.22, 1, 0.36, 1), transform 1.15s cubic-bezier(0.22, 1, 0.36, 1);
    }

    #pricing.in-view .section-header .label {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0s;
    }

    #pricing.in-view .section-header h2 {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.18s;
    }

    #pricing.in-view .section-header p {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.36s;
    }

    #pricing.in-view .pkg:nth-child(1) {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.5s;
    }

    #pricing.in-view .pkg:nth-child(2) {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.65s;
    }

    #pricing.in-view .pkg:nth-child(3) {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.8s;
    }

    #pricing.in-view .pkg:nth-child(4) {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.95s;
    }

    @media (prefers-reduced-motion: reduce) {
      #pricing .section-header .label,
      #pricing .section-header h2,
      #pricing .section-header p,
      #pricing .pkg {
        opacity: 1;
        transform: none;
        transition: none;
      }
    }

    /* ========== FAQ ========== */

    /* FAQ — staggered transitions */
    #faq .section-header .label,
    #faq .section-header h2,
    #faq .section-header p,
    #faq .faq-cat,
    #faq .faq-item:not(.faq-hidden) {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 1.15s cubic-bezier(0.22, 1, 0.36, 1), transform 1.15s cubic-bezier(0.22, 1, 0.36, 1);
    }

    #faq.in-view .section-header .label {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0s;
    }

    #faq.in-view .section-header h2 {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.15s;
    }

    #faq.in-view .section-header p {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.3s;
    }

    #faq.in-view .faq-cat {
      opacity: 1;
      transform: translateY(0);
    }

    #faq.in-view .faq-cat:nth-child(1) { transition-delay: 0.4s; }
    #faq.in-view .faq-cat:nth-child(2) { transition-delay: 0.48s; }
    #faq.in-view .faq-cat:nth-child(3) { transition-delay: 0.56s; }
    #faq.in-view .faq-cat:nth-child(4) { transition-delay: 0.64s; }
    #faq.in-view .faq-cat:nth-child(5) { transition-delay: 0.72s; }
    #faq.in-view .faq-cat:nth-child(6) { transition-delay: 0.8s; }
    #faq.in-view .faq-cat:nth-child(7) { transition-delay: 0.88s; }
    #faq.in-view .faq-cat:nth-child(8) { transition-delay: 0.96s; }

    #faq.in-view .faq-item:not(.faq-hidden) {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.55s;
    }

    #faq.in-view .faq-item:not(.faq-hidden):nth-of-type(1) { transition-delay: 0.55s; }
    #faq.in-view .faq-item:not(.faq-hidden):nth-of-type(2) { transition-delay: 0.65s; }
    #faq.in-view .faq-item:not(.faq-hidden):nth-of-type(3) { transition-delay: 0.75s; }
    #faq.in-view .faq-item:not(.faq-hidden):nth-of-type(4) { transition-delay: 0.85s; }
    #faq.in-view .faq-item:not(.faq-hidden):nth-of-type(5) { transition-delay: 0.95s; }

    @media (prefers-reduced-motion: reduce) {
      #faq .section-header .label,
      #faq .section-header h2,
      #faq .section-header p,
      #faq .faq-cat,
      #faq .faq-item:not(.faq-hidden) {
        opacity: 1;
        transform: none;
        transition: none;
      }
    }

    .faq-layout {
      display: grid;
      grid-template-columns: 220px 1fr;
      gap: 28px;
      align-items: start;
      max-width: 960px;
      margin: 0 auto;
    }

    .faq-cats {
      display: flex;
      flex-direction: column;
      gap: 8px;
      position: sticky;
      top: 90px;
    }

    .faq-cat {
      padding: 12px 16px;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: #fff;
      font-family: inherit;
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--text-muted);
      cursor: pointer;
      transition: all 0.2s;
      text-align: left;
      width: 100%;
    }

    .faq-cat:hover {
      border-color: var(--primary-mid);
      color: var(--primary);
      background: var(--primary-light);
    }

    .faq-cat.active {
      background: var(--primary);
      border-color: var(--primary);
      color: #fff;
      box-shadow: 0 4px 14px rgba(25, 59, 74, 0.22);
    }

    .faq-list {
      max-width: none;
      margin: 0;
    }

    .faq-item.faq-hidden {
      display: none;
    }

    /* FAQ category switch — new smooth transition */
    .faq-item.faq-switch-in {
      display: block;
      opacity: 0;
      transform: translate3d(0, 18px, 0) scale(.985);
      filter: blur(3px);
      will-change: opacity, transform, filter;
    }

    /* Category-switch state must override the FAQ section reveal rule. */
    #faq .faq-item.faq-switch-in.faq-switch-show {
      opacity: 1 !important;
      transform: translate3d(0, 0, 0) scale(1) !important;
      filter: blur(0);
      transition:
        opacity .55s cubic-bezier(.22,1,.36,1),
        transform .55s cubic-bezier(.22,1,.36,1),
        filter .55s ease;
      transition-delay: var(--faq-delay, 0ms);
    }

    #faq .faq-item.faq-switch-in {
      opacity: 0 !important;
      transform: translate3d(0, 18px, 0) scale(.985) !important;
    }

    .faq-cat {
      position: relative;
      overflow: hidden;
      transform: translateZ(0);
    }

    .faq-cat::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 3px;
      background: var(--primary);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .35s cubic-bezier(.22,1,.36,1);
    }

    .faq-cat:hover::after,
    .faq-cat.active::after {
      transform: scaleX(1);
    }

    @media (max-width: 720px) {
  
    /* FAQ — staggered transitions */
    #faq .section-header .label,
    #faq .section-header h2,
    #faq .section-header p,
    #faq .faq-cat,
    #faq .faq-item:not(.faq-hidden) {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 1.15s cubic-bezier(0.22, 1, 0.36, 1), transform 1.15s cubic-bezier(0.22, 1, 0.36, 1);
    }

    #faq.in-view .section-header .label {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0s;
    }

    #faq.in-view .section-header h2 {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.15s;
    }

    #faq.in-view .section-header p {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.3s;
    }

    #faq.in-view .faq-cat {
      opacity: 1;
      transform: translateY(0);
    }

    #faq.in-view .faq-cat:nth-child(1) { transition-delay: 0.4s; }
    #faq.in-view .faq-cat:nth-child(2) { transition-delay: 0.48s; }
    #faq.in-view .faq-cat:nth-child(3) { transition-delay: 0.56s; }
    #faq.in-view .faq-cat:nth-child(4) { transition-delay: 0.64s; }
    #faq.in-view .faq-cat:nth-child(5) { transition-delay: 0.72s; }
    #faq.in-view .faq-cat:nth-child(6) { transition-delay: 0.8s; }
    #faq.in-view .faq-cat:nth-child(7) { transition-delay: 0.88s; }

    #faq.in-view .faq-item:not(.faq-hidden) {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.55s;
    }

    #faq.in-view .faq-item:not(.faq-hidden):nth-of-type(1) { transition-delay: 0.55s; }
    #faq.in-view .faq-item:not(.faq-hidden):nth-of-type(2) { transition-delay: 0.65s; }
    #faq.in-view .faq-item:not(.faq-hidden):nth-of-type(3) { transition-delay: 0.75s; }
    #faq.in-view .faq-item:not(.faq-hidden):nth-of-type(4) { transition-delay: 0.85s; }
    #faq.in-view .faq-item:not(.faq-hidden):nth-of-type(5) { transition-delay: 0.95s; }

    @media (prefers-reduced-motion: reduce) {
      #faq .section-header .label,
      #faq .section-header h2,
      #faq .section-header p,
      #faq .faq-cat,
      #faq .faq-item:not(.faq-hidden) {
        opacity: 1;
        transform: none;
        transition: none;
      }
    }

    .faq-layout {
        grid-template-columns: 1fr;
        gap: 16px;
      }
      .faq-cats {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
      }
      .faq-cat {
        width: auto;
        border-radius: 100px;
        padding: 8px 14px;
        font-size: 0.85rem;
      }
    }

    .faq-list {
      max-width: none;
      margin: 0;
      width: 100%;
    }

    .faq-item {
      background: white;
      border: 1px solid var(--border);
      border-radius: 12px;
      margin-bottom: 12px;
      overflow: hidden;
    }

    .faq-question {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 24px;
      background: none;
      border: none;
      font-family: inherit;
      font-size: 1.05rem;
      font-weight: 600;
      text-align: left;
      cursor: pointer;
      color: var(--text);
      gap: 16px;
    }

    .faq-question:hover { color: var(--primary); }

    .faq-icon {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--bg-alt);
      display: grid;
      place-items: center;
      font-size: 1.1rem;
      flex-shrink: 0;
      transition: transform 0.25s;
    }

    .faq-item.open .faq-icon {
      transform: rotate(45deg);
      background: var(--primary-light);
      color: var(--primary);
    }

    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease, padding 0.3s ease;
    }

    .faq-item.open .faq-answer {
      max-height: 300px;
    }

    .faq-answer p {
      padding: 0 24px 20px;
      color: var(--text-muted);
      font-size: 0.98rem;
      line-height: 1.7;
    }

    /* ========== CTA ========== */
    .cta-section {
      padding: 80px 0;
    }

    .cta-box {
      background: linear-gradient(135deg, #13343e 0%, #1B4653 50%, #1d6d8c 100%);
      border-radius: 24px;
      padding: 64px 48px;
      text-align: center;
      color: white;
      position: relative;
      overflow: hidden;
    }

    .cta-box h2 {
      font-size: clamp(1.8rem, 3.5vw, 2.4rem);
      font-weight: 800;
      margin-bottom: 14px;
    }

    .cta-box p {
      font-size: 1.15rem;
      opacity: 0.9;
      max-width: 500px;
      margin: 0 auto 32px;
    }

    .cta-box .btn {
      background: white;
      color: var(--primary);
      box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    }

    .cta-box .btn:hover {
      transform: translateY(-2px);
      background: #f8fafc;
    }

    /* MODAL DESIGN */

    .contact-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 14px 24px;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 600;
      color: #fff;
      text-decoration: none;
      transition: opacity 0.2s ease, transform 0.15s ease;
      white-space: nowrap;
    }

    .contact-btn:hover {
      color: #fff;
      opacity: 0.88;
      transform: translateY(-1px);
    }

    .contact-btn img {
      width: 22px;
      height: 22px !important;
      object-fit: contain;
    }

    .whatsapp-btn  { background-color: #25D366; }
    .call-btn { background-color: #1C5FA8; }
    .messenger-btn { background-color: #7B2FBE; }

    /* ========== FOOTER ========== */
    footer {
      background: #15213c;
      color: #94a3b8;
      padding: 32px 0 16px;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr 1fr;
      gap: 40px;
      margin-bottom: 28px;
    }

    .footer-brand {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0;
    }

    .footer-brand .logo {
      color: white;
      margin-bottom: 14px;
      display: inline-flex;
      align-items: center;
      line-height: 0;
    }

    .footer-brand .logo img {
      height: 48px;
      width: auto;
      max-width: 200px;
      object-fit: contain;
      object-position: left center;
      filter: brightness(0) invert(1);
      display: block;
    }

    .footer-brand p {
      font-size: 0.92rem;
      line-height: 1.65;
      max-width: 260px;
      margin: 0 0 12px;
      color: #94a3b8;
    }

    .footer-social {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 10px;
      padding-top: 0;
    }
    .footer-social a.fs-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: rgba(148, 163, 184, 0.12);
      border: 1px solid rgba(148, 163, 184, 0.18);
      color: #94a3b8;
      padding: 0;
      margin: 0;
      text-decoration: none;
      transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    }
    .footer-social a.fs-icon svg {
      width: 18px;
      height: 18px;
      display: block;
    }
    .footer-social a.fs-icon:hover {
      color: #fff;
      background: rgba(148, 163, 184, 0.22);
      border-color: rgba(226, 232, 240, 0.28);
      transform: translateY(-2px);
    }
    .footer-social a.fs-fb:hover { color: #60a5fa; border-color: rgba(96,165,250,0.4); }
    .footer-social a.fs-ig:hover { color: #f472b6; border-color: rgba(244,114,182,0.4); }
    .footer-social a.fs-yt:hover { color: #f87171; border-color: rgba(248,113,113,0.4); }


    .footer-col h4 {
      color: white;
      font-size: 0.95rem;
      font-weight: 700;
      margin-bottom: 12px;
    }

    .footer-col a {
      display: block;
      font-size: 0.9rem;
      margin-bottom: 7px;
      transition: color 0.2s;
    }

    .footer-col a:hover { color: white; }

    .footer-col .contact-item {
      display: grid;
      grid-template-columns: 28px minmax(0, 1fr);
      column-gap: 10px;
      align-items: start;
    }
    .footer-col .contact-item .contact-icon {
      width: 28px;
      height: 1.5em;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      line-height: 1.5;
    }
    .footer-col .contact-item .contact-icon-svg {
      color: #94a3b8;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 0;
      height: 1.5em;
    }
    .footer-col .contact-item .contact-icon-svg svg {
      width: 18px;
      height: 18px;
      display: block;
      flex-shrink: 0;
    }
    .footer-col .contact-item:hover .contact-icon-svg {
      color: #e2e8f0;
    }
    .footer-col .contact-item .contact-text {
      min-width: 0;
      display: block;
      line-height: 1.5;
    }

    .footer-bottom {
      border-top: 1px solid #1e293b;
      padding-top: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.9rem;
    }

    /* ========== RESPONSIVE ========== */
    @media (max-width: 960px) {
      .feature-row, .feature-row.reverse { grid-template-columns: 1fr; gap: 32px; }
      .feature-row.reverse .feature-content,
      .feature-row.reverse .feature-visual { order: unset; }
      .pricing-grid { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; }
      .footer-grid { grid-template-columns: 1fr 1fr; }
    }

    @media (max-width: 640px) {
      .nav-links { display: none; }
      .mobile-toggle { display: block; }
      .footer-grid { grid-template-columns: 1fr; }
      .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
      .cta-box { padding: 48px 24px; }
      .hero-metrics { gap: 8px; }
      .metric-pill { padding: 8px 12px; font-size: 0.8rem; }
    }
  
    /* ========== WhatsApp Float — same corner on every screen size ========== */
    a.wa-float {
      position: fixed !important;
      right: 16px !important;
      bottom: 16px !important;
      left: auto !important;
      top: auto !important;
      z-index: 99999 !important;
      width: 56px !important;
      height: 56px !important;
      border-radius: 50% !important;
      background: #25D366 !important;
      color: #fff !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45) !important;
      text-decoration: none !important;
      margin: 0 !important;
      padding: 0 !important;
      border: none !important;
      overflow: visible !important;
      transform: none !important;
      -webkit-transform: none !important;
      transition: none !important;
      /* lock to visual viewport corner; ignore browser chrome jump as much as CSS allows */
      bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
      right: calc(16px + env(safe-area-inset-right, 0px)) !important;
    }
    a.wa-float:hover,
    a.wa-float:active,
    a.wa-float:focus {
      transform: none !important;
      box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45) !important;
    }
    a.wa-float svg {
      width: 28px !important;
      height: 28px !important;
      fill: #fff !important;
      display: block !important;
      flex-shrink: 0 !important;
      pointer-events: none !important;
    }
    a.wa-float::before,
    a.wa-float::after {
      display: none !important;
      content: none !important;
      animation: none !important;
    }



  
    /* ========== BUYER LOGOS MARQUEE (inline) ========== */
    .bm2-wrap {
      padding: 36px 0 8px;
      overflow: hidden;
    }

    .bm2-track-outer {
      position: relative;
      overflow: hidden;
    }

    /* fade masks */
    .bm2-fade-l,
    .bm2-fade-r {
      position: absolute;
      top: 0; bottom: 0;
      width: 90px;
      z-index: 2;
      pointer-events: none;
    }
    .bm2-fade-l { left:  0; background: linear-gradient(90deg,  #ffffff 0%, transparent 100%); }
    .bm2-fade-r { right: 0; background: linear-gradient(270deg, #ffffff 0%, transparent 100%); }

    .bm2-track {
      display: flex;
      width: max-content;
      animation: bm2Scroll 35s linear infinite;
    }

    .bm2-track:hover { animation-play-state: paused; }

    @keyframes bm2Scroll {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    .bm2-row {
      display: flex;
      align-items: center;
    }

    .bm2-item {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px 30px;
      border-right: 1px solid var(--border);
      flex-shrink: 0;
      transition: transform 0.3s ease;
    }

    .bm2-item:hover {
      transform: scale(1.1);
    }

    .bm2-item img {
      height: 64px;
      width: auto;
      max-width: 204px;
      object-fit: contain;
      display: block;
    }

    @media (max-width: 600px) {
      .bm2-item { padding: 8px 20px; }
      .bm2-item img { height: 39px; max-width: 126px; }
      .bm2-fade-l, .bm2-fade-r { width: 50px; }
    }

  
/* ===== Radial Feature Segment ===== */

#radial-feature-section {
  background: var(--bg-alt, #F2F6F7);
  padding: 60px 0 40px;
  overflow: hidden;
}
#radial-feature-section .rs-segment {
  margin: 0 auto;
  max-width: 1280px;
  padding: 0 20px;
}
#radial-feature-section .rs-replay {
  position: relative;
  bottom: auto;
  left: auto;
  transform: none;
  display: block;
  margin: 28px auto 0;
}
@media (max-width: 900px) {
  #radial-feature-section .rs-segment { flex-direction: column; gap: 28px; }
}

    

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

    

    .rs-segment {
      display: flex;
      align-items: center;
      gap: 48px;
      max-width: 1140px;
      width: 100%;
    }

    .rs-radial-wrap {
      position: relative;
      width: 520px;
      height: 520px;
      flex-shrink: 0;
    }

    .rs-orbit {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      transform: translate(-50%, -50%);
    }

    .rs-orbit.spinning {
      animation: rsOrbitSpin 32s linear infinite;
    }

    @keyframes rsOrbitSpin {
      from { transform: translate(-50%, -50%) rotate(0deg); }
      to   { transform: translate(-50%, -50%) rotate(360deg); }
    }

    .rs-center {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 160px;
      z-index: 20;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .rs-center img {
      width: 150px;
      height: auto;
      display: block;
      filter: drop-shadow(0 0 10px rgba(42, 106, 122, 0.5))
              drop-shadow(0 0 22px rgba(27, 70, 83, 0.3))
              drop-shadow(0 4px 12px rgba(27, 70, 83, 0.12));
      animation: rsLogoGlow 3s ease-in-out infinite;
    }

    .rs-center.pulse img {
      animation: rsLogoPulse 0.85s ease, rsLogoGlow 3s ease-in-out infinite;
    }

    @keyframes rsLogoGlow {
      0%, 100% {
        filter: drop-shadow(0 0 8px rgba(42, 106, 122, 0.4))
                drop-shadow(0 0 16px rgba(27, 70, 83, 0.22))
                drop-shadow(0 4px 12px rgba(27, 70, 83, 0.1));
      }
      50% {
        filter: drop-shadow(0 0 14px rgba(42, 106, 122, 0.7))
                drop-shadow(0 0 28px rgba(27, 70, 83, 0.4))
                drop-shadow(0 0 36px rgba(242, 155, 9, 0.2))
                drop-shadow(0 4px 14px rgba(27, 70, 83, 0.12));
      }
    }

    @keyframes rsLogoPulse {
      0%   { transform: scale(1); }
      40%  { transform: scale(1.08); }
      100% { transform: scale(1); }
    }

    /* Feature button — circle shape (palette matched) */
    .rs-node {
      position: absolute;
      top: 0;
      left: 0;
      width: 88px;
      height: 88px;
      margin-left: -44px;
      margin-top: -44px;
      background: linear-gradient(160deg, #ffffff 0%, #eef5f7 100%);
      border: 2px solid #b8d0d8;
      border-radius: 50%;
      cursor: pointer;
      box-shadow: 0 3px 12px rgba(27, 70, 83, 0.1);
      transition: background 0.25s, color 0.25s, box-shadow 0.25s, border-color 0.25s, transform 0.2s;
      z-index: 10;
      user-select: none;
      --angle: 0deg;
      --radius: 0px;
      --scale: 0.2;
      --opacity: 0;
      transform: rotate(var(--angle)) translateY(calc(-1 * var(--radius))) rotate(calc(-1 * var(--angle))) scale(var(--scale));
      opacity: var(--opacity);
    }

    .rs-node-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      width: 100%;
      height: 100%;
      padding: 8px;
      box-sizing: border-box;
      text-align: center;
    }

    .rs-orbit.spinning .rs-node-inner {
      animation: rsCounterSpin 32s linear infinite;
    }

    @keyframes rsCounterSpin {
      from { transform: rotate(0deg); }
      to   { transform: rotate(-360deg); }
    }

    .rs-node-icon {
      width: 28px;
      height: 28px;
      min-width: 28px;
      border-radius: 50%;
      background: linear-gradient(145deg, #d6e8ed, #c5dce3);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      line-height: 1;
      flex-shrink: 0;
    }

    .rs-node-label {
      font-size: 11px;
      font-weight: 600;
      color: var(--primary);
      line-height: 1.15;
      text-align: center;
      max-width: 72px;
    }

    .rs-node:hover {
      border-color: var(--primary-mid);
      box-shadow: 0 5px 18px rgba(27, 70, 83, 0.18);
      background: linear-gradient(160deg, #e8f2f5 0%, #d4e8ee 100%);
    }

    .rs-node.active {
      background: linear-gradient(145deg, var(--primary-mid) 0%, var(--primary) 100%);
      border-color: var(--primary-dark);
      box-shadow: 0 6px 22px rgba(27, 70, 83, 0.35);
    }

    .rs-node.active .rs-node-label {
      color: #fff;
    }

    .rs-node.active .rs-node-icon {
      background: rgba(255, 255, 255, 0.22);
    }

    .rs-node.active::after {
      content: "";
      position: absolute;
      inset: -4px;
      border-radius: 50%;
      border: 2.5px solid var(--accent);
      opacity: 0.95;
      pointer-events: none;
      box-shadow: 0 0 10px rgba(242, 155, 9, 0.45);
    }

    /* Details */
    .rs-details {
      flex: 1;
      min-width: 520px;
      max-width: 640px;
      background: var(--white);
      border-radius: 18px;
      box-shadow:
        0 4px 6px -1px rgba(27, 70, 83, 0.06),
        0 14px 36px -6px rgba(27, 70, 83, 0.12);
      border: 1px solid var(--border);
      overflow: hidden;
      opacity: 0;
      transform: translateX(24px) scale(0.97);
      transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
      pointer-events: none;
    }

    .rs-details.visible {
      opacity: 1;
      transform: translateX(0) scale(1);
      pointer-events: auto;
    }

    .rs-details-header {
      position: relative;
      padding: 21px 23px 18px;
      background: linear-gradient(135deg, var(--primary-light) 0%, #e0eef2 100%);
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: flex-start;
      gap: 16px;
    }

    .rs-details-header::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 5px;
      background: linear-gradient(180deg, var(--accent), var(--primary));
    }

    .rs-details-icon {
      width: 49px;
      height: 49px;
      min-width: 49px;
      border-radius: 13px;
      background: var(--white);
      border: 1.5px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 23px;
      line-height: 1;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    }

    .rs-header-text { flex: 1; min-width: 0; }

    .rs-details h3 {
      font-size: 21px;
      font-weight: 700;
      color: var(--primary);
      letter-spacing: -0.02em;
      margin-bottom: 3px;
      line-height: 1.25;
    }

    .rs-details .desc {
      font-size: 16px;
      color: var(--text-muted);
      line-height: 1.45;
    }

    .rs-details-body { padding: 16px 18px 18px; }

    .rs-details ul {
      list-style: none;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4px 10px;
    }

    .rs-details ul.few { grid-template-columns: 1fr; }

    .rs-details li {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13.5px;
      color: var(--text);
      padding: 7px 8px;
      border-radius: 10px;
      line-height: 1.25;
      white-space: nowrap;
      opacity: 0;
      transform: translateX(-12px) scale(0.96);
      transition:
        background 0.2s ease,
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.35s ease;
    }

    .rs-details.visible li {
      opacity: 1;
      transform: translateX(0) scale(1);
    }

    .rs-details li:hover { background: var(--primary-light); }

    .rs-check-circle {
      width: 16px;
      height: 16px;
      min-width: 16px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--success), #10b981);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 9px;
      font-weight: 700;
      margin-top: 0;
      box-shadow: 0 1px 4px rgba(13, 159, 110, 0.28);
      transform: scale(0);
      transition: transform 0.35s cubic-bezier(0.34, 1.5, 0.64, 1);
    }

    .rs-details.visible li .rs-check-circle {
      transform: scale(1);
    }

    .rs-replay {
      position: fixed;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--primary);
      color: #fff;
      border: none;
      padding: 10px 22px;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 4px 14px rgba(27, 70, 83, 0.3);
      transition: background 0.2s;
      z-index: 50;
    }
    .rs-replay:hover { background: var(--primary-dark); }

    @media (max-width: 768px) {
        .rs-details ul {
          list-style: none;
          display: grid;
          grid-template-columns: 1fr;
          gap: 4px 10px;
        }
      }

    @media (max-width: 960px) {
      .rs-segment { flex-direction: column !important; gap: 28px !important; padding: 0 16px !important; }
      .rs-radial-wrap {
        width: 340px !important;
        height: 340px !important;
        max-width: calc(100vw - 32px) !important;
        margin: 0 auto;
        flex-shrink: 0;
      }
      .rs-node { width: 72px; height: 72px; margin-left: -36px; margin-top: -36px; }
      .rs-node-label { font-size: 9px; max-width: 60px; }
      .rs-node-icon { font-size: 12px; }
      .rs-center img { width: 100px; }
      .rs-details { max-width: 100%; width: 100%; min-width: 0; }

      /* contact modal css */
      .modal-body.px-4.py-5.text-center h2 {
        font-size: 22px !important;
      }
      .modal-body.px-4.py-5.text-center p {
        font-size: 13px !important;
        margin-bottom: 24px !important;
      }
      .contact-btn {
        padding: 8px 15px;
        font-size: 12px;
      }
      
    }

  

/* Audit fixes: focus, reduced motion, a11y */
:focus-visible {
  outline: 3px solid #2a6a7a !important;
  outline-offset: 2px !important;
}
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 3px solid #2a6a7a !important;
  outline-offset: 2px !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}




/* Pricing cards — match provided design (checkmarks, cream price pill, gold CTA) */
.pricing-grid-image-match {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 22px !important;
  align-items: stretch !important;
}
@media (max-width: 1100px) {
  .pricing-grid-image-match { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
  .pricing-grid-image-match {
    grid-template-columns: 1fr !important;
    max-width: 360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

.img-match-card {
  background: #ffffff !important;
  border: 1px solid #e8eef1 !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 28px rgba(15, 47, 58, 0.07) !important;
  padding: 28px 24px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  text-align: left !important;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.img-match-card:hover {
  box-shadow: 0 14px 36px rgba(15, 47, 58, 0.12) !important;
  transform: translateY(-4px);
}

.img-card-header {
  margin-bottom: 18px;
  text-align: center;
}
.img-card-title {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: #1B4653 !important;
  letter-spacing: -0.02em;
  margin: 0 0 6px !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  text-align: center;
}
.img-card-subtitle {
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  color: #7a9aaa !important;
  margin: 0 !important;
  text-align: center;
}

/* Cream / soft beige price pill (as in reference image) */
.img-price-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #f3efe6;
  border-radius: 999px;
  padding: 12px 22px 11px;
  margin: 0 auto 20px;
  width: fit-content;
  min-width: 70%;
  max-width: 100%;
  box-sizing: border-box;
}
.img-price-amount {
  font-size: 1.7rem;
  font-weight: 800;
  color: #1B4653;
  letter-spacing: -0.03em;
  line-height: 1.15;
  text-align: center;
  width: 100%;
}
.img-price-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #9aa8b0;
  margin-top: 3px;
  text-transform: uppercase;
  text-align: center;
  width: 100%;
}

/* Feature list with green checkmarks on the right */
.img-feature-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 18px !important;
  flex: 1;
}
.img-feature-list li {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 9px 2px !important;
  border: none !important;
  background: transparent !important;
  font-size: 0.95rem !important;
  color: #2a4a55 !important;
  font-weight: 500 !important;
}
.img-check {
  color: #1B4653 !important;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1;
  flex-shrink: 0;
}

/* Setup cost block */
.img-setup-box {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 4px 2px 16px;
  margin: 0;
  text-align: center;
}
.img-setup-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #9aa8b0;
  text-transform: uppercase;
  margin-bottom: 4px;
  text-align: center;
}
.img-setup-value {
  display: block;
  font-size: 1.02rem;
  font-weight: 800;
  color: #1B4653;
  letter-spacing: -0.01em;
  text-align: center;
}
.img-setup-value em {
  font-style: normal;
  font-weight: 600;
  font-size: 0.88em;
  color: #5a7a8a;
}

/* Gold / mustard CTA button */
.img-choose-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 0 !important;
  padding: 14px 18px !important;
  border-radius: 12px !important;
  background: #c9a227 !important;
  color: #ffffff !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  border: none !important;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(201, 162, 39, 0.35);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.img-choose-btn:hover {
  background: #b8921f !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(201, 162, 39, 0.45);
}
.img-choose-btn span {
  font-size: 1.1em;
  line-height: 1;
}



/* Keep pricing aligned with the site-wide alternating section background */
#pricing.section-alt { background: var(--bg-alt); }

.pricing-skin{
    --teal: #1a7a8a;
    --teal-light: #e8f4f6;
    --teal-mid: #2a9aad;
    --gold: #e6a817;
    --gold-light: #fdf6e3;
    --dark: #0d2d35;
    --text: #1a2e35;
    --muted: #5a7a82;
    --border: #d0e8ec;
    --white: #ffffff;
    --bg: #f4f9fa;
    --enterprise-bg: #0d2d35;
    --enterprise-accent: #2fc4dc;
    --green: #1a9a6a;
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }


.pricing-skin *, .pricing-skin *::before, .pricing-skin *::after{ box-sizing: inherit; margin: 0; padding: 0; }






/* HERO */


.pricing-skin .hero{
    text-align: center;
    padding: 48px 24px 32px;
    /* Reset the site-wide .hero background so pricing keeps one continuous section color */
    background: transparent;
    overflow: visible;
    position: static;
  }


.pricing-skin .pricing-kicker{
    display: inline-block;
    padding: 8px 22px;
    border: 1px solid #cfe5eb;
    border-radius: 999px;
    background: #edf7f9;
    color: #234f5d;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.12em;
    margin-bottom: 28px;
    box-shadow: 0 3px 10px rgba(20,80,95,0.08);
  }

.pricing-skin .hero h1{ font-size: 46px; font-weight: 800; color: var(--dark); }


.pricing-skin .hero p{ color: var(--muted); margin-top: 18px; font-size: 21px; line-height: 1.55; }


/* GRID */


.pricing-skin .pricing-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px 48px;
    align-items: start;
  }


.pricing-skin .card-highlight-bottom{
    background: #ffffff;
    border: 1.5px solid #2a9aad;
    color: #0d5a6a;
    margin-bottom: -8px;
  }


.pricing-skin .card-highlight{
    background: linear-gradient(135deg, #e6f9f0, #d0f5e4);
    border: 1.5px solid #52c98a;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 700;
    color: #1a7a4a;
    text-align: center;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }


/* CARD BASE */


.pricing-skin .card{
    background: var(--white);
    border-radius: 16px;
    padding: 28px 24px;
    border: 1.5px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    transition: box-shadow 0.2s;
  }


.pricing-skin .card:hover{ box-shadow: 0 8px 32px rgba(26,122,138,0.10); }


.pricing-skin .card-badge{ display: none; }


.pricing-skin .card-header{
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
  }


.pricing-skin .support-badge{
    position: absolute;
    top: -6px;
    right: -6px;
    width: 52px;
    height: 52px;
    transform: rotate(120deg);
    flex-shrink: 0;
  }


.pricing-skin .support-badge svg{
    width: 100%;
    height: 100%;
  }


.pricing-skin .card-icon{
    width: 58px; height: 58px; min-width: 58px;
    border-radius: 14px;
    background: var(--teal-light);
    display: flex; align-items: center; justify-content: center;
    font-size: 30px;
  }


.pricing-skin .card-icon.gold{ background: var(--gold-light); }


.pricing-skin .card-icon.dark{ background: rgba(47,196,220,0.12); }


.pricing-skin .card-title{ font-size: 24px; font-weight: 800; color: var(--dark); line-height: 1.15; }


.pricing-skin .card-title span{ color: var(--teal); display: block; }


.pricing-skin .card-title span.gold{ color: var(--gold); }


.pricing-skin .card-desc{ display: none; }


.pricing-skin .emp-pill{
    background: var(--teal-light);
    border-radius: 8px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 13px;
    color: var(--dark);
  }


.pricing-skin .emp-pill.gold-bg{ background: var(--gold-light); }


.pricing-skin .emp-pill-icon{ font-size: 18px; }


.pricing-skin .features{ list-style: none; display: flex; flex-direction: column; gap: 8px; }


.pricing-skin .features li{
    display: flex; align-items: flex-start; gap: 8px;
    font-size: 12.5px; color: var(--text); line-height: 1.45;
  }


.pricing-skin .features li .chk{
    width: 18px; height: 18px; min-width: 18px;
    background: var(--teal);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin-top: 1px;
  }


.pricing-skin .features li .chk svg{ width: 10px; height: 10px; }


.pricing-skin .feat-group{
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--teal);
    margin-top: 6px;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--border);
  }


.pricing-skin .card.lite .feat-group{ color: var(--gold); border-bottom-color: #f0d898; }


.pricing-skin .price-block{ margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--border); }


.pricing-skin .price-label{ font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }


.pricing-skin .price-value{ font-size: 32px; font-weight: 800; color: var(--dark); }


.pricing-skin .price-value sup{ font-size: 14px; font-weight: 600; vertical-align: super; }


.pricing-skin .price-value span{ font-size: 13px; font-weight: 500; color: var(--muted); }


/* LITE CARD */


.pricing-skin .card.lite{ border-color: var(--gold); background: linear-gradient(160deg, #fffdf5 0%, #fff 60%); }


/* ENTERPRISE CARD */


.pricing-skin .card.enterprise{
    background: var(--enterprise-bg);
    border-color: var(--enterprise-accent);
    color: var(--white);
    grid-column: span 1;
  }


.pricing-skin .card.enterprise .card-badge{ color: var(--enterprise-accent); }


.pricing-skin .card.enterprise .card-title{ color: var(--white); }


.pricing-skin .card.enterprise .card-title span{ color: var(--enterprise-accent); }


.pricing-skin .card.enterprise .card-desc{ color: #8ab4bc; }


.pricing-skin .card.enterprise .emp-pill{ background: rgba(47,196,220,0.12); color: var(--white); border: 1px solid rgba(47,196,220,0.3); }


.pricing-skin .card.enterprise .features li{ color: #c8e6ec; }


.pricing-skin .card.enterprise .features li .chk{ background: var(--enterprise-accent); }


.pricing-skin .card.enterprise .price-block{ border-top-color: rgba(255,255,255,0.1); }


.pricing-skin .card.enterprise .price-label{ color: #8ab4bc; }


.pricing-skin .card.enterprise .price-value{ color: var(--white); }


.pricing-skin .card.enterprise .price-value span{ color: #8ab4bc; }


/* SERVICE-FOCUSED CARDS */


.pricing-skin .emp-limit{
    margin: 16px 0 22px;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--teal-light);
    color: var(--dark);
    font-size: 14px;
    font-weight: 800;
    text-align: center;
    border: 1px solid var(--border);
  }


.pricing-skin .emp-limit.gold-limit{
    background: var(--gold-light);
    border-color: #f1dfae;
  }


.pricing-skin .card.enterprise .emp-limit{
    background: rgba(47,196,220,0.10);
    color: var(--white);
    border-color: rgba(47,196,220,0.25);
  }


.pricing-skin .service-card{ min-height: 0; }


.pricing-skin .service-label{ font-size: 10px; font-weight: 800; letter-spacing: .12em; color: var(--teal); padding-top: 2px; }


.pricing-skin .service-list{ list-style:none; display:flex; flex-direction:column; gap:9px; }


.pricing-skin .service-list li{ display:flex; align-items:center; gap:10px; padding:5px 0; border:none; border-radius:0; background:transparent; }


.pricing-skin .svc-icon{
  width:auto !important; height:auto !important; min-width:0 !important;
  border-radius:0 !important; background:transparent !important;
  display:inline !important; font-size:0.9rem !important; font-weight:400 !important;
  margin:0 4px 0 0 !important; padding:0 !important;
  color:var(--primary,#1B4653) !important; box-shadow:none !important; border:none !important;
}


.pricing-skin .service-list strong{ display:block; font-size:12.5px; color:var(--dark); font-weight:500; }


.pricing-skin .service-list small{ display:block; font-size:10.5px; color:var(--muted); margin-top:2px; }


.pricing-skin .custom-status{ margin-top:auto; display:flex; align-items:center; gap:9px; padding:11px 12px; border-radius:11px; }


.pricing-skin .custom-status > span{ font-size:17px; }


.pricing-skin .custom-status div{ flex:1; }


.pricing-skin .custom-status b{ display:block; font-size:11.5px; color:var(--dark); }


.pricing-skin .custom-status small{ display:block; font-size:9.5px; color:var(--muted); margin-top:2px; }


.pricing-skin .custom-status em{ font-style:normal; font-size:8.5px; font-weight:800; letter-spacing:.08em; padding:4px 6px; border-radius:5px; }


.pricing-skin .custom-status.locked{ background:#f5f8f9; border:1px dashed #b8cdd1; }


.pricing-skin .custom-status.locked em{ background:#e8eef0; color:#668087; }


.pricing-skin .card.enterprise .custom-status{ background:rgba(47,196,220,.08); border:1px solid rgba(47,196,220,.25); }


.pricing-skin .card.enterprise .custom-status b{ color:#fff; }


.pricing-skin .card.enterprise .custom-status small{ color:#8ab4bc; }


.pricing-skin .card.enterprise .custom-status em{ background:rgba(47,196,220,.15); color:var(--enterprise-accent); }


/* ENTERPRISE CALCULATOR */


.pricing-skin .calc-section{ display: flex; flex-direction: column; gap: 12px; }


.pricing-skin .calc-label{
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--enterprise-accent);
    margin-bottom: 4px;
  }


.pricing-skin .emp-input-wrap{
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(47,196,220,0.3);
    border-radius: 8px;
    padding: 8px 12px;
  }


.pricing-skin .emp-input-wrap input{
    background: transparent;
    border: none;
    outline: none;
    color: var(--white);
    font-size: 16px;
    font-weight: 700;
    width: 100%;
    font-family: "Inter", sans-serif;
  }


.pricing-skin .emp-input-wrap input::placeholder{ color: #5a8a96; }


.pricing-skin .emp-input-wrap input::-webkit-outer-spin-button, .pricing-skin .emp-input-wrap input::-webkit-inner-spin-button{
    -webkit-appearance: none;
    margin: 0;
  }


.pricing-skin .emp-input-wrap input[type="number"]{
    -moz-appearance: textfield;
    appearance: textfield;
  }


.pricing-skin .addon-row{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(47,196,220,0.2);
    background: rgba(47,196,220,0.05);
    transition: background 0.15s;
    user-select: none;
  }


.pricing-skin .addon-row:hover{ background: rgba(47,196,220,0.10); }


.pricing-skin .addon-row input[type="checkbox"]{ display: none; }


.pricing-skin .custom-check{
    width: 18px; height: 18px; min-width: 18px;
    border-radius: 5px;
    border: 2px solid var(--enterprise-accent);
    display: flex; align-items: center; justify-content: center;
    margin-top: 1px;
    background: transparent;
    transition: background 0.15s;
  }


.pricing-skin .addon-row.checked .custom-check{
    background: var(--enterprise-accent);
  }


.pricing-skin .custom-check svg{ display: none; width: 10px; height: 10px; }


.pricing-skin .addon-row.checked .custom-check svg{ display: block; }


.pricing-skin .addon-text{ font-size: 12px; color: #c8e6ec; line-height: 1.4; }


.pricing-skin .addon-text strong{ color: var(--white); display: block; font-size: 12.5px; }


.pricing-skin .addon-price-tag{ font-size: 10.5px; color: var(--enterprise-accent); font-weight: 600; margin-top: 1px; }


/* CUSTOMIZATION */


.pricing-skin .custom-section{ display: flex; flex-direction: column; gap: 8px; }


.pricing-skin .custom-options{ display: flex; flex-direction: column; gap: 6px; }


.pricing-skin .custom-opt{
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid rgba(47,196,220,0.2);
    background: rgba(47,196,220,0.04);
    transition: background 0.15s;
    user-select: none;
  }


.pricing-skin .custom-opt:hover{ background: rgba(47,196,220,0.1); }


.pricing-skin .custom-opt.selected{
    border-color: var(--enterprise-accent);
    background: rgba(47,196,220,0.12);
  }


.pricing-skin .radio-dot{
    width: 16px; height: 16px; min-width: 16px;
    border-radius: 50%;
    border: 2px solid var(--enterprise-accent);
    display: flex; align-items: center; justify-content: center;
  }


.pricing-skin .radio-inner{
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--enterprise-accent);
    display: none;
  }


.pricing-skin .custom-opt.selected .radio-inner{ display: block; }


.pricing-skin .custom-opt-label{ font-size: 12px; color: #c8e6ec; }


.pricing-skin .custom-opt-label strong{ color: var(--white); font-size: 12.5px; }


.pricing-skin .custom-opt-label em{ color: var(--enterprise-accent); font-style: normal; font-size: 11px; font-weight: 600; }


/* TOTAL PRICE */


.pricing-skin .total-box{
    background: rgba(47,196,220,0.12);
    border: 1.5px solid var(--enterprise-accent);
    border-radius: 10px;
    padding: 14px 16px;
  }


.pricing-skin .total-label{ font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--enterprise-accent); font-weight: 600; margin-bottom: 8px; }


.pricing-skin .total-breakdown{ font-size: 11.5px; color: #7ab0bc; margin-bottom: 10px; line-height: 1.6; }


.pricing-skin .total-breakdown .bd-row{ display: flex; justify-content: space-between; align-items: baseline; gap: 8px; white-space: nowrap; overflow: hidden; }


.pricing-skin .total-breakdown .bd-row .bd-key{ color: #8ab4bc; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }


.pricing-skin .total-breakdown .bd-row .bd-val{ color: #c8e6ec; font-size: 11px; font-weight: 600; flex-shrink: 0; }


.pricing-skin .total-amount{ font-size: 28px; font-weight: 800; color: var(--white); display: flex; align-items: baseline; gap: 6px; }


.pricing-skin .total-amount span{ font-size: 13px; font-weight: 500; color: #7ab0bc; white-space: nowrap; }


.pricing-skin .cta-btn{
    width: 100%;
    padding: 12px;
    background: var(--enterprise-accent);
    color: var(--dark);
    font-weight: 700;
    font-size: 13px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: opacity 0.15s;
    margin-top: 4px;
  }


.pricing-skin .cta-btn:hover{ opacity: 0.88; }


.pricing-skin .divider{ height: 1px; background: rgba(255,255,255,0.08); margin: 2px 0; }


/* ENTERPRISE PLAN CARDS */


.pricing-skin .enterprise-plan .card-title span{ color: var(--teal-mid); }


.pricing-skin .enterprise-plan .service-label{ color: var(--teal); }


.pricing-skin .enterprise-plan .custom-status.custom-contact{
    border-color: #b8dfe5;
    background: linear-gradient(135deg, #f1fafb, #ffffff);
  }


.pricing-skin .custom-contact{ display:flex; align-items:center; gap:9px; padding:10px 11px; border:1px solid var(--border); border-radius:9px; margin-top:9px; }


.pricing-skin .custom-contact > span{ font-size:16px; }


.pricing-skin .custom-contact > div{ min-width:0; flex:1; }


.pricing-skin .custom-contact b{ display:block; font-size:11px; color:var(--dark); }


.pricing-skin .custom-contact small{ display:block; margin-top:2px; font-size:9px; line-height:1.35; color:var(--muted); }


.pricing-skin .custom-contact em{ font-style:normal; font-size:8px; font-weight:800; letter-spacing:.06em; color:var(--teal); border:1px solid #a9d7df; border-radius:999px; padding:3px 6px; white-space:nowrap; }


.pricing-skin .plan-cta{ width:100%; margin-top:9px; border:0; border-radius:8px; padding:10px 9px; background:var(--teal); color:#fff; font:700 11px Inter,sans-serif; cursor:pointer; transition:opacity .15s, transform .15s; }


.pricing-skin .plan-cta:hover{ opacity:.9; transform:translateY(-1px); }


.pricing-skin .card.enterprise.enterprise-plan .card-title span{ color:var(--enterprise-accent); }


.pricing-skin .card.enterprise.enterprise-plan .service-label{ color:var(--enterprise-accent); }


.pricing-skin .card.enterprise.enterprise-plan .service-list li{ border:none; background:transparent; }


.pricing-skin .card.enterprise.enterprise-plan .service-list strong{ color:#fff; font-weight:500; }


.pricing-skin .card.enterprise.enterprise-plan .service-list small{ color:#8ab4bc; }


.pricing-skin .card.enterprise.enterprise-plan .svc-icon{ background:transparent !important; }


.pricing-skin .card.enterprise.enterprise-plan .billing-box{ background:rgba(255,255,255,.04); border-color:rgba(47,196,220,.28); }


.pricing-skin .card.enterprise.enterprise-plan .billing-head > span{ color:var(--enterprise-accent); }


.pricing-skin .card.enterprise.enterprise-plan .billing-base{ color:#fff; }


.pricing-skin .card.enterprise.enterprise-plan .billing-base span{ color:#8ab4bc; }


.pricing-skin .card.enterprise.enterprise-plan .billing-select-wrap{ background:rgba(255,255,255,.05); border-color:rgba(47,196,220,.3); }


.pricing-skin .card.enterprise.enterprise-plan .billing-months{ color:#fff; }


.pricing-skin .card.enterprise.enterprise-plan .billing-months option{ color:#fff; background:var(--enterprise-bg); }


.pricing-skin .card.enterprise.enterprise-plan .billing-result > div{ background:rgba(255,255,255,.04); border-color:rgba(47,196,220,.18); }


.pricing-skin .card.enterprise.enterprise-plan .billing-result small{ color:#8ab4bc; }


.pricing-skin .card.enterprise.enterprise-plan .billing-result strong{ color:#fff; }


.pricing-skin .card.enterprise.enterprise-plan .billing-saving strong{ color:#66ddb0; }


.pricing-skin .billing-payable{ margin-top:8px; padding:8px 9px; border-radius:8px; background:#eef8fa; border:1px solid #d3e9ed; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:12px; row-gap:5px; }

.pricing-skin .billing-payable > span{ grid-column:1; grid-row:1; font-size:10px; line-height:1.2; color:var(--muted); font-weight:600; }

.pricing-skin .billing-payable > strong{ grid-column:2; grid-row:1; margin:0; font-size:13px; line-height:1.2; color:var(--teal); font-weight:700; white-space:nowrap; text-align:right; }

.pricing-skin .billing-payable > b{ grid-column:1 / -1; grid-row:2; display:flex; align-items:center; justify-content:space-between; width:100%; margin:0; padding-top:5px; border-top:1px dashed #c9e1e5; font-size:10px; line-height:1.2; color:var(--dark); font-weight:700; }

.pricing-skin .billing-payable em{ margin-left:auto; color:var(--teal); font-style:normal; font-size:13px; line-height:1.2; font-weight:700; white-space:nowrap; text-align:right; }


.pricing-skin .card.enterprise.enterprise-plan .billing-payable{ background:rgba(255,255,255,.06); border-color:rgba(47,196,220,.18); }


.pricing-skin .card.enterprise.enterprise-plan .billing-payable span{ color:#8ab4bc; }


.pricing-skin .card.enterprise.enterprise-plan .billing-payable strong, .pricing-skin .card.enterprise.enterprise-plan .billing-payable b{ color:#fff; }


.pricing-skin .card.enterprise.enterprise-plan .billing-payable b{ border-top-color:rgba(255,255,255,.12); }


.pricing-skin .card.enterprise.enterprise-plan .billing-payable em{ color:var(--enterprise-accent); }


.pricing-skin .card.enterprise.enterprise-plan .custom-contact{ border-color:rgba(47,196,220,.25); background:rgba(47,196,220,.05); }


.pricing-skin .card.enterprise.enterprise-plan .custom-contact b{ color:#fff; }


.pricing-skin .card.enterprise.enterprise-plan .custom-contact small{ color:#8ab4bc; }


.pricing-skin .card.enterprise.enterprise-plan .custom-contact em{ color:var(--enterprise-accent); border-color:rgba(47,196,220,.35); }


.pricing-skin .card.enterprise.enterprise-plan .plan-cta{ background:var(--enterprise-accent); color:var(--dark); }



/* Customize Solution — deep standout (palette-matched) */
.img-match-card.customize-plan {
  background: linear-gradient(165deg, #13343e 0%, #1B4653 48%, #0f2a33 100%) !important;
  border: 1px solid rgba(42, 106, 122, 0.65) !important;
  box-shadow: 0 12px 36px rgba(19, 52, 62, 0.35), 0 0 0 1px rgba(242, 155, 9, 0.12) !important;
  position: relative;
  overflow: hidden;
}
.img-match-card.customize-plan::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -30%;
  width: 70%;
  height: 70%;
  background: radial-gradient(circle, rgba(242, 155, 9, 0.12) 0%, transparent 70%);
  pointer-events: none;
}
.img-match-card.customize-plan:hover {
  box-shadow: 0 18px 44px rgba(19, 52, 62, 0.45), 0 0 0 1px rgba(242, 155, 9, 0.22) !important;
  transform: translateY(-4px);
}
.img-match-card.customize-plan .img-card-title {
  color: #ffffff !important;
}
.img-match-card.customize-plan .img-card-subtitle {
  color: #9bb8c4 !important;
}
.img-match-card.customize-plan .img-price-pill {
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6px);
}
.img-match-card.customize-plan .img-price-amount {
  color: #ffffff !important;
}
.img-match-card.customize-plan .img-price-label {
  color: #a8c0cc !important;
}
.img-match-card.customize-plan .img-feature-list li {
  color: #d7e6ec !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.img-match-card.customize-plan .img-feature-list li:last-child {
  border-bottom: none !important;
}
.img-match-card.customize-plan .img-check {
  color: #3dd6a5 !important;
}
.img-match-card.customize-plan .img-setup-box {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 14px !important;
  padding: 12px 14px 14px !important;
  margin-bottom: 14px !important;
}
.img-match-card.customize-plan .img-setup-label {
  color: #9bb8c4 !important;
}
.img-match-card.customize-plan .img-setup-value {
  color: #ffffff !important;
}
.img-match-card.customize-plan .img-setup-value em {
  color: #a8c0cc !important;
}
.img-match-card.customize-plan .img-choose-btn {
  background: linear-gradient(135deg, #f29b09 0%, #e08a08 55%, #d4860a 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(242, 155, 9, 0.38) !important;
}
.img-match-card.customize-plan .img-choose-btn:hover {
  background: linear-gradient(135deg, #e08a08 0%, #d4860a 55%, #c27809 100%) !important;
  box-shadow: 0 12px 26px rgba(242, 155, 9, 0.48) !important;
}

/* ENTERPRISE SOLUTION 4 - LIGHT PALETTE VARIANT */


.pricing-skin .card.solution-four{
    background: linear-gradient(160deg, #eef9fa 0%, #ffffff 68%);
    border-color: #8fcfd8;
    color: var(--text);
  }


.pricing-skin .card.solution-four .card-title{ color: var(--dark); }


.pricing-skin .card.solution-four .card-title span{ color: var(--teal); }


.pricing-skin .card.solution-four .card-icon{ background: #dff1f4; }


.pricing-skin .card.solution-four .emp-limit{ background: #e5f4f6; color: var(--dark); }


.pricing-skin .card.solution-four .service-list li{ border:none; background:transparent; }


.pricing-skin .card.solution-four .service-list strong{ color: var(--dark); font-weight: 500; }


.pricing-skin .card.solution-four .service-list small{ color: var(--muted); }


.pricing-skin .card.solution-four .svc-icon{ background: transparent !important; }


.pricing-skin .card.solution-four .billing-box{ background: #f7fcfd; border-color: #c7e3e7; }


.pricing-skin .card.solution-four .billing-head > span{ color: var(--teal); }


.pricing-skin .card.solution-four .billing-base{ color: var(--dark); }


.pricing-skin .card.solution-four .billing-base span{ color: var(--muted); }


.pricing-skin .card.solution-four .billing-select-wrap{ background: #fff; border-color: #c3e0e5; }


.pricing-skin .card.solution-four .billing-month-trigger{ color: var(--dark); }


.pricing-skin .card.solution-four .billing-month-menu{ background: #fff; border-color: #c3e0e5; box-shadow: 0 12px 28px rgba(26,122,138,.12); }


.pricing-skin .card.solution-four .billing-month-menu button{ color: var(--dark); }


.pricing-skin .card.solution-four .billing-month-menu button:hover, .pricing-skin .card.solution-four .billing-month-menu button.active{ background: var(--teal-light); color: var(--teal); }


.pricing-skin .card.solution-four .billing-result > div{ background: #fff; border-color: #d5eaed; }


.pricing-skin .card.solution-four .billing-result small{ color: var(--muted); }


.pricing-skin .card.solution-four .billing-result strong{ color: var(--dark); }


.pricing-skin .card.solution-four .billing-saving strong{ color: var(--green); }


.pricing-skin .card.solution-four .billing-payable{ background: #eef8fa; border-color: #d3e9ed; }


.pricing-skin .card.solution-four .billing-payable span{ color: var(--muted); }


.pricing-skin .card.solution-four .billing-payable strong, .pricing-skin .card.solution-four .billing-payable b{ color: var(--text); }


.pricing-skin .card.solution-four .billing-payable em{ color: var(--teal); }


.pricing-skin .card.solution-four .custom-contact{ border-color: #b8dfe5; background: linear-gradient(135deg, #f1fafb, #ffffff); }


.pricing-skin .card.solution-four .custom-contact b{ color: var(--dark); }


.pricing-skin .card.solution-four .custom-contact small{ color: var(--muted); }


.pricing-skin .card.solution-four .custom-contact em{ color: var(--teal); border-color: #a9d7df; }


.pricing-skin .card.solution-four .plan-cta{ background: var(--teal); color: #fff; }


.pricing-skin .card.solution-four:hover{ box-shadow: 0 8px 32px rgba(26,122,138,.12); }


@media (max-width: 900px){

.pricing-skin .pricing-grid{ grid-template-columns: 1fr 1fr; }

}


@media (max-width: 560px){

.pricing-skin .pricing-grid{ grid-template-columns: 1fr; }


.pricing-skin .header{ flex-direction: column; gap: 8px; text-align: center; }

}


/* MONTHLY BILLING CALCULATOR */


.pricing-skin .billing-box{
    margin-top: 10px;
    padding: 11px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #f8fcfd;
  }


.pricing-skin .billing-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }


.pricing-skin .billing-head > span{ font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--teal); }


.pricing-skin .discount-badge{ font-size:10px; color:#168050; background:#e6f8ef; border:1px solid #9cdec0; border-radius:999px; padding:3px 7px; white-space:nowrap; }


.pricing-skin .billing-base{ font-size:12px; font-weight:800; color:var(--dark); margin:0 0 8px; }


.pricing-skin .billing-base span{ font-size:10px; font-weight:500; color:var(--muted); }


.pricing-skin .billing-select-wrap{ position:relative; display:flex; align-items:center; gap:8px; background:#fff; border:1px solid #cfe4e8; border-radius:8px; padding:0 10px; min-height:39px; z-index:5; }


.pricing-skin .billing-select-wrap > span:first-child{ font-size:14px; flex:0 0 auto; }


.pricing-skin .billing-month-trigger{ flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--dark); font:700 12px Inter,sans-serif; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 0; text-align:left; }


.pricing-skin .billing-chevron{ font-size:14px; line-height:1; color:var(--muted); transition:transform .15s; }


.pricing-skin .custom-billing-select.open .billing-chevron{ transform:rotate(180deg); }


.pricing-skin .billing-month-menu{ position:absolute; left:0; right:0; top:calc(100% + 5px); display:none; flex-direction:column; gap:2px; padding:5px; background:#fff; border:1px solid #cfe4e8; border-radius:9px; box-shadow:0 12px 28px rgba(13,45,53,.16); max-height:220px; overflow-y:auto; z-index:1000; }


.pricing-skin .custom-billing-select.open .billing-month-menu{ display:flex; }


.pricing-skin .billing-month-menu button{ border:0; background:transparent; border-radius:6px; padding:8px 9px; color:var(--dark); font:600 11.5px Inter,sans-serif; text-align:left; cursor:pointer; }


.pricing-skin .billing-month-menu button:hover, .pricing-skin .billing-month-menu button.active{ background:var(--teal-light); color:var(--teal); }


.pricing-skin .card.enterprise.enterprise-plan .billing-month-menu{ background:#123b44; border-color:rgba(47,196,220,.35); box-shadow:0 12px 28px rgba(0,0,0,.28); }


.pricing-skin .card.enterprise.enterprise-plan .billing-month-menu button{ color:#fff; }


.pricing-skin .card.enterprise.enterprise-plan .billing-month-menu button:hover, .pricing-skin .card.enterprise.enterprise-plan .billing-month-menu button.active{ background:rgba(47,196,220,.16); color:var(--enterprise-accent); }


.pricing-skin .billing-result{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }


.pricing-skin .billing-result > div{ background:#fff; border:1px solid #e0eef0; border-radius:7px; padding:7px 8px; }


.pricing-skin .billing-result small{ display:block; font-size:9px; color:var(--muted); margin-bottom:2px; }


.pricing-skin .billing-result strong{ display:block; font-size:13px; color:var(--dark); }


.pricing-skin .billing-saving strong{ color:#168050; }


.pricing-skin .billing-box.is-discounted{ border-color:#9cdec0; background:linear-gradient(135deg,#f3fcf7,#f8fcfd); }


.pricing-skin .card.lite .billing-box{ border-color:#ead9a8; background:#fffdf7; }


.pricing-skin .card.lite .billing-head > span{ color:#a87400; }


.pricing-skin .card.lite .billing-select-wrap{ border-color:#ead9a8; }


.pricing-skin .card.lite .billing-month-menu{ border-color:#ead9a8; }


.pricing-skin .card.lite .billing-month-menu button:hover, .pricing-skin .card.lite .billing-month-menu button.active{ background:#fff5d9; color:#a87400; }


.pricing-skin .card.lite .billing-box.is-discounted{ border-color:#d9bd72; }


/* Compact pricing cards */


.pricing-skin .card.service-card{
    min-height: 0;
    padding: 18px 18px;
    gap: 10px;
  }


.pricing-skin .card.service-card .card-header{ gap: 10px; }


.pricing-skin .card.service-card .card-icon{ width: 50px; height: 50px; min-width: 50px; font-size: 26px; border-radius: 12px; }


.pricing-skin .card.service-card .card-title{ font-size: 21px; }


.pricing-skin .card.service-card .emp-limit{ margin: 6px 0 8px; padding: 8px 12px; font-size: 12.5px; }


.pricing-skin .card.service-card .service-list{ gap: 6px; }


.pricing-skin .card.service-card .service-list li{ gap: 8px; padding: 4px 0; }


.pricing-skin .card.service-card .svc-icon{ width: auto !important; height: auto !important; min-width: 0 !important; font-size: 0.9rem !important; border-radius: 0 !important; background: transparent !important; }


.pricing-skin .card.service-card .service-list strong{ font-size: 12px; font-weight: 500; }


.pricing-skin .card.service-card .service-list small{ font-size: 10px; margin-top: 1px; }


.pricing-skin .card.service-card .billing-box{ padding: 10px; }


.pricing-skin .card.service-card .billing-head{ margin-bottom: 5px; }


.pricing-skin .card.service-card .billing-base{ margin-bottom: 5px; }


.pricing-skin .card.service-card .billing-result{ gap: 6px; margin-top: 6px; }


.pricing-skin .card.service-card .billing-result > div{ padding: 6px 7px; }


.pricing-skin .card.service-card .billing-payable{ margin-top: 6px; padding: 7px 8px; }


.pricing-skin .card.service-card .custom-status{ margin-top: 0; padding: 8px 10px; gap: 7px; }


.pricing-skin .card.service-card .custom-status > span{ font-size: 15px; }


.pricing-skin .card.service-card .custom-status b{ font-size: 11px; }


.pricing-skin .card.service-card .custom-status small{ font-size: 9px; }



/* Eye-catchy employee limit */
.pricing-skin .emp-limit-catchy{
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-between;
  gap: 0;
  margin: 8px 0 12px;
  padding: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #e8f7f9 0%, #d4eef2 100%);
  border: 1.5px solid #a8d5dc;
  text-align: center;
  overflow: hidden;
}
.pricing-skin .emp-limit-catchy .emp-side,
.pricing-skin .emp-limit-catchy .fee-side{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 12px 10px;
  min-width: 0;
}
.pricing-skin .emp-limit-catchy .emp-side{
  border-right: 1px solid rgba(42,106,122,0.18);
}
.pricing-skin .emp-limit-catchy .emp-num,
.pricing-skin .emp-limit-catchy .fee-num{
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--primary, #1B4653);
  line-height: 1.1;
}
.pricing-skin .emp-limit-catchy .emp-label,
.pricing-skin .emp-limit-catchy .fee-label{
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--teal, #2a6a7a);
}
.pricing-skin .emp-limit-catchy .fee-num{
  color: #0d9f6e;
}
.pricing-skin .emp-limit-catchy.gold-limit{
  background: linear-gradient(135deg, #fff8e6 0%, #fdecc8 100%);
  border-color: #e8c56a;
}
.pricing-skin .emp-limit-catchy.gold-limit .emp-num{ color: #b8860b; }
.pricing-skin .emp-limit-catchy.gold-limit .emp-label,
.pricing-skin .emp-limit-catchy.gold-limit .fee-label{ color: #9a7209; }
.pricing-skin .emp-limit-catchy.gold-limit .fee-num{ color: #b8860b; }
.pricing-skin .emp-limit-catchy.gold-limit .emp-side{
  border-right-color: rgba(184,134,11,0.25);
}

.pricing-skin .service-list li.svc-highlight{ background:transparent; border:none; }
.pricing-skin .service-list li.svc-highlight strong{
  color: #0d7a54 !important;
}
.pricing-skin .service-list li.svc-highlight small{
  color: #0d9f6e !important;
  font-weight: 700;
  font-size: 12px !important;
}
.pricing-skin .service-list li.svc-highlight .svc-icon{
  background: transparent !important;
}

/* Calculator row */


.pricing-custom-row{
  max-width: 1200px;
  margin: 0 auto 20px;
  padding: 0 24px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}
.pricing-custom-card{
  display: flex;
  align-items: center;
  gap: 17px;
  background: #fff;
  border: 1.5px solid var(--border, #d4e4eb);
  border-radius: 17px;
  padding: 17px 24px;
  box-shadow: 0 4px 16px rgba(27,70,83,0.06);
  width: 100%;
  min-width: 0;
}
@media (max-width: 700px){
  .pricing-custom-row{ grid-template-columns: 1fr; }
}
.pricing-custom-btn-alt{
  background: linear-gradient(135deg, #0d9f6e 0%, #12b981 100%) !important;
  box-shadow: 0 4px 12px rgba(13,159,110,0.22) !important;
}
.pricing-custom-icon{
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
}
.pricing-custom-text{
  flex: 1;
  min-width: 0;
}
.pricing-custom-text b{
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: var(--primary, #1B4653);
}
.pricing-custom-text small{
  display: block;
  margin-top: 3px;
  font-size: 14px;
  color: var(--text-muted, #5a7a8a);
  line-height: 1.35;
}
.pricing-custom-btn{
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 19px;
  border-radius: 999px;
  background: linear-gradient(135deg, #1B4653 0%, #2a6a7a 100%);
  color: #fff !important;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-decoration: none !important;
  border: none;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
  box-shadow: 0 4px 12px rgba(27,70,83,0.2);
}
.pricing-custom-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(27,70,83,0.28);
  opacity: 0.95;
}


.pricing-skin .card.service-card .card-icon{ display: none !important; }
.pricing-skin .card.service-card .card-header{ gap: 0; justify-content: center; text-align: center; }

.pricing-skin .card.service-card .card-header{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  width: 100%;
}
.pricing-skin .card.service-card .card-title{
  font-size: 20px !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  text-align: center !important;
  width: 100%;
  margin: 0;
}
.pricing-skin .card.service-card .card-title span{
  display: inline !important;
  color: var(--teal, #2a6a7a) !important;
}

/* Unified pricing card colors — all 4 cards same look */
.pricing-skin .card.service-card.enterprise-plan{
  background: #ffffff !important;
  border: 1.5px solid var(--border, #d4e4eb) !important;
  color: var(--dark, #1B4653) !important;
  box-shadow: 0 4px 20px rgba(27,70,83,0.06) !important;
}
.pricing-skin .card.service-card.enterprise-plan .card-title,
.pricing-skin .card.service-card.enterprise-plan .card-title span{
  color: var(--dark, #1B4653) !important;
}
.pricing-skin .card.service-card.enterprise-plan .card-title span{
  display: inline !important;
  color: var(--teal, #2a6a7a) !important;
}
.pricing-skin .card.service-card.enterprise-plan .card-icon{
  background: var(--teal-light, #e8f2f5) !important;
  color: inherit !important;
  border: none !important;
}
.pricing-skin .card.service-card.enterprise-plan .card-icon.gold{
  background: var(--teal-light, #e8f2f5) !important;
}
.pricing-skin .card.service-card.enterprise-plan .emp-limit-catchy,
.pricing-skin .card.service-card.enterprise-plan .emp-limit-catchy.gold-limit{
  background: linear-gradient(135deg, #e8f7f9 0%, #d4eef2 100%) !important;
  border: 1.5px solid #a8d5dc !important;
}
.pricing-skin .card.service-card.enterprise-plan .emp-limit-catchy .emp-num,
.pricing-skin .card.service-card.enterprise-plan .emp-limit-catchy.gold-limit .emp-num{
  color: var(--primary, #1B4653) !important;
}
.pricing-skin .card.service-card.enterprise-plan .emp-limit-catchy .emp-label,
.pricing-skin .card.service-card.enterprise-plan .emp-limit-catchy .fee-label,
.pricing-skin .card.service-card.enterprise-plan .emp-limit-catchy.gold-limit .emp-label,
.pricing-skin .card.service-card.enterprise-plan .emp-limit-catchy.gold-limit .fee-label{
  color: var(--teal, #2a6a7a) !important;
}
.pricing-skin .card.service-card.enterprise-plan .emp-limit-catchy .fee-num,
.pricing-skin .card.service-card.enterprise-plan .emp-limit-catchy.gold-limit .fee-num{
  color: #0d9f6e !important;
}
.pricing-skin .card.service-card.enterprise-plan .emp-limit-catchy .emp-side,
.pricing-skin .card.service-card.enterprise-plan .emp-limit-catchy.gold-limit .emp-side{
  border-right: 1px solid rgba(42,106,122,0.18) !important;
}
.pricing-skin .card.service-card.enterprise-plan .service-list strong,
.pricing-skin .card.service-card.enterprise-plan .service-list small{
  color: var(--dark, #1B4653) !important;
}
.pricing-skin .card.service-card.enterprise-plan .service-list small{
  color: var(--muted, #5a7a8a) !important;
}
.pricing-skin .card.service-card.enterprise-plan .svc-icon{
  background: transparent !important;
}

.pricing-calc-row{
  max-width: 1200px;
  margin: 0 auto 48px;
  padding: 0 24px;
  box-sizing: border-box;
}
.pricing-calc-row .pricing-calc-card{
  width: 100%;
  box-sizing: border-box;
}
.pricing-calc-card{
  background: #fff;
  border: 1.5px solid var(--border, #d4e4eb);
  border-radius: 18px;
  padding: 22px 24px;
  box-shadow: 0 8px 28px rgba(27,70,83,0.08);
}
.pricing-calc-title{
  font-size: 18px;
  font-weight: 800;
  color: var(--primary, #1B4653);
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}
.pricing-calc-grid{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  align-items: stretch;
}
/* Unified cell shell — same for dropdown fields & value stats */
.calc-field,
.calc-stat{
  background: #f5fafb;
  border: 1.5px solid var(--border, #d4e4eb);
  border-radius: 12px;
  padding: 12px 14px;
  min-height: 78px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
}
.calc-field label,
.calc-stat small{
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #5a7a8a);
  line-height: 1.2;
  margin: 0;
}
.calc-dd{
  position: relative;
  width: 100%;
}
.calc-dd-trigger{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  color: var(--primary, #1B4653);
  cursor: pointer;
  outline: none;
  line-height: 1.3;
  text-align: left;
}
.calc-dd-trigger .calc-dd-value{
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.calc-dd-trigger .calc-dd-chevron{
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(27,70,83,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, background 0.2s;
}
.calc-dd-trigger .calc-dd-chevron svg{
  width: 10px;
  height: 10px;
  stroke: var(--primary, #1B4653);
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.calc-dd.open .calc-dd-chevron{
  transform: rotate(180deg);
  background: rgba(27,70,83,0.14);
}
.calc-dd-menu{
  position: absolute;
  left: -14px;
  right: -14px;
  top: calc(100% + 14px);
  z-index: 40;
  background: #fff;
  border: 1.5px solid var(--border, #d4e4eb);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(27,70,83,0.14), 0 2px 6px rgba(27,70,83,0.06);
  padding: 6px;
  max-height: 260px;
  overflow-y: auto;
  display: none;
  animation: calcDdIn 0.18s ease;
}
.calc-dd.open .calc-dd-menu{ display: block; }
@keyframes calcDdIn{
  from{ opacity: 0; transform: translateY(-6px); }
  to{ opacity: 1; transform: translateY(0); }
}
.calc-dd-menu button{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: none;
  background: transparent;
  padding: 10px 12px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--primary, #1B4653);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, color 0.15s;
}
.calc-dd-menu button:hover{
  background: var(--primary-light, #e8f2f5);
}
.calc-dd-menu button.active{
  background: linear-gradient(135deg, #1B4653 0%, #2a6a7a 100%);
  color: #fff;
}
.calc-dd-menu button .dd-meta{
  font-size: 11px;
  font-weight: 700;
  opacity: 0.65;
}
.calc-dd-menu button.active .dd-meta{ opacity: 0.85; color: #fff; }
.calc-field.calc-field-open{
  border-color: var(--primary-mid, #2a6a7a);
  box-shadow: 0 0 0 3px rgba(42,106,122,0.12);
  z-index: 30;
}
.calc-stat strong{
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: var(--primary, #1B4653);
  line-height: 1.25;
  margin: 0;
}
.calc-stat.calc-save strong{ color: #0d9f6e; }
.calc-stat.calc-total{
  background: linear-gradient(135deg, #1B4653 0%, #2a6a7a 100%);
  border-color: transparent;
}
.calc-stat.calc-total small{ color: rgba(255,255,255,0.8); }
.calc-stat.calc-total strong{ color: #fff; font-size: 15px; }
/* Discount badge sits inline under subscription label area */
.calc-stat .calc-disc-row{
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.calc-stat .calc-disc-row small{
  display: inline;
  margin: 0;
}

.calc-disc{
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  background: #e6f9f0;
  color: #0d9f6e;
  padding: 2px 7px;
  border-radius: 20px;
  text-transform: none;
  letter-spacing: 0;
}
.calc-disc.is-on{
  background: #0d9f6e;
  color: #fff;
}
@media (max-width: 900px){
  .pricing-calc-grid{
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px){
  .pricing-calc-grid{
    grid-template-columns: 1fr;
  }
}
}




/* Compact vertical whitespace for all non-hero sections: 50% reduction. */
.section:not(.hero) { padding-top: 45px; padding-bottom: 45px; }
.section-header { margin-bottom: 28px; }
.logos-section { padding-top: 20px; padding-bottom: 28px; }
.cta-section { padding-top: 40px; padding-bottom: 40px; }
footer { padding-top: 32px; padding-bottom: 16px; }
.footer-grid { margin-bottom: 24px; }
.footer-bottom { padding-top: 14px; }
/* Pricing segment header/footer whitespace */
#pricing .pricing-skin .hero { padding-top: 24px; padding-bottom: 16px; }
#pricing .pricing-skin .pricing-grid { padding-bottom: 20px; }



/* Keep the one-time cost amount consistently black across all pricing cards. */
.pricing-skin .billing-payable > strong {
  color: #162f3a !important;
}



.svc-icon{
  background:transparent!important;background-color:transparent!important;
  width:auto!important;height:auto!important;min-width:0!important;
  border-radius:0!important;display:inline!important;padding:0!important;
  box-shadow:none!important;border:none!important;
  font-size:0.9rem!important;font-weight:400!important;
  color:var(--primary,#1B4653)!important;
}
.setup-cost-item{
  background:linear-gradient(135deg,#fff8eb 0%,#fff3d6 100%)!important;
  border:1px solid #f0d78c!important;
  border-radius:10px!important;
  padding:10px 12px!important;
  margin-top:4px!important;
}
.setup-cost-item strong{color:#9a6b00!important;}
.setup-cost-item small{display:block;margin-top:2px;color:#7a5600!important;font-weight:600;font-size:0.92em;}
.choose-solution-btn{
  display:flex;align-items:center;justify-content:center;
  margin:12px 12px 10px;padding:11px 16px;border-radius:999px;
  background:linear-gradient(135deg,#1B4653 0%,#2a6a7a 100%);
  color:#fff!important;font-size:.88rem;font-weight:700;
  text-decoration:none!important;border:none;cursor:pointer;
  box-shadow:0 4px 12px rgba(27,70,83,.25)
}
.choose-solution-btn:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(27,70,83,.35);color:#fff!important}
.pricing-skin .service-card,.service-card.enterprise-plan{
  display:flex;flex-direction:column;min-height:0!important;padding-bottom:8px!important
}
.pricing-custom-row{
  max-width:672px!important;margin-left:auto!important;margin-right:auto!important;
  grid-template-columns:1fr!important;justify-items:center
}
.pricing-custom-row .pricing-custom-card{width:100%;max-width:672px}



.hero-logos-orbit {
  position: relative;
  width: 100%;
  max-width: 612px;
  aspect-ratio: 1;
  margin: 0 auto;
}
.hl-rings { position: absolute; inset: 0; pointer-events: none; }
.hl-ring {
  position: absolute; top: 50%; left: 50%;
  border: 1.5px solid rgba(42, 106, 122, 0.16);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.hl-ring.r1 { width: 36%; height: 36%; }
.hl-ring.r2 { width: 60%; height: 60%; }
.hl-ring.r3 { width: 84%; height: 84%; border-color: rgba(42, 106, 122, 0.22); }

.hl-orbit {
  position: absolute; top: 50%; left: 50%;
  width: 0; height: 0;
  transform: translate(-50%, -50%);
}
.hl-orbit.spinning { animation: hlOrbitSpin 42s linear infinite; }
@keyframes hlOrbitSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

.hl-node {
  position: absolute; top: 0; left: 0;
  width: 108px; height: 108px;
  margin-left: -54px; margin-top: -54px;
  --angle: 0deg; --radius: 0px; --scale: 0.25; --opacity: 0;
  transform: rotate(var(--angle)) translateY(calc(-1 * var(--radius))) rotate(calc(-1 * var(--angle))) scale(var(--scale));
  opacity: var(--opacity);
  z-index: 4;
  will-change: transform, opacity;
}

.hl-node-inner {
  position: relative;
  z-index: 1;
}

.hl-node-inner {
  position: relative;
  z-index: 1;
  width: 100%; height: 100%;
  background: #fff;
  border: 1px solid var(--border, #d4e4eb);
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(27, 70, 83, 0.1);
  display: flex; align-items: center; justify-content: center;
  padding: 12px;
  transition: box-shadow 0.25s ease;
}
.hl-node-inner:hover { box-shadow: 0 12px 28px rgba(27, 70, 83, 0.16); }
.hl-node-inner img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto; object-fit: contain; display: block;
}
.hl-orbit.spinning .hl-node-inner {
  animation: hlLogoUpright 42s linear infinite;
}
@keyframes hlLogoUpright {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

.hl-center {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 139px; height: 139px;
  z-index: 6;
  background: #fff;
  border-radius: 50%;
  border: 1px solid var(--border, #d4e4eb);
  box-shadow: 0 10px 28px rgba(27, 70, 83, 0.12);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.hl-center:hover {
  box-shadow: 0 14px 32px rgba(27, 70, 83, 0.18);
}
.hl-center:focus-visible {
  outline: 2px solid var(--primary, #1B4653);
  outline-offset: 3px;
}
.hl-center img {
  width: 100%; height: auto; object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(27, 70, 83, 0.1));
}
.hl-center.pulse {
  animation: hlCenterPulse 0.85s cubic-bezier(0.34, 1.4, 0.64, 1);
}
@keyframes hlCenterPulse {
  0% { transform: translate(-50%, -50%) scale(0.82); opacity: 0.5; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

@media (max-width: 960px) {
  .hero-logos-orbit { max-width: 468px; }
  .hl-node { width: 90px; height: 90px; margin-left: -45px; margin-top: -45px; }
  .hl-center { width: 112px; height: 112px; padding: 14px; }
}
@media (max-width: 600px) {
  .hero-logos-orbit { max-width: 378px; }
  .hl-node { width: 76px; height: 76px; margin-left: -38px; margin-top: -38px; }
  .hl-node-inner { padding: 9px; border-radius: 14px; }
  .hl-center { width: 94px; height: 94px; padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .hl-orbit.spinning,
  .hl-orbit.spinning .hl-node-inner { animation: none !important; }
}



/* ==========================================================
   DINLIPI — DYNAMIC PRICING SECTION
   Final visual layer: premium, calm, responsive, no badges/ribbons.
   ========================================================== */
#pricing {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 18%, rgba(242,155,9,.10), transparent 24%),
    radial-gradient(circle at 92% 20%, rgba(42,106,122,.11), transparent 25%),
    linear-gradient(180deg,#f8fbfc 0%,#ffffff 48%,#f4f9fa 100%) !important;
}

#pricing::before,
#pricing::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 999px;
  filter: blur(2px);
}
#pricing::before {
  width: 280px;
  height: 280px;
  left: -150px;
  top: 210px;
  background: radial-gradient(circle, rgba(242,155,9,.13), transparent 68%);
  animation: pricingFloat 8s ease-in-out infinite;
}
#pricing::after {
  width: 340px;
  height: 340px;
  right: -170px;
  bottom: 80px;
  background: radial-gradient(circle, rgba(26,122,138,.12), transparent 68%);
  animation: pricingFloat 10s ease-in-out infinite reverse;
}

#pricing .pricing-skin { position: relative; }

#pricing .pricing-skin .hero {
  padding: 58px 24px 34px !important;
  text-align: center;
}

#pricing .pricing-kicker {
  position: relative;
  border: 1px solid rgba(42,106,122,.18) !important;
  background: rgba(255,255,255,.76) !important;
  color: #1B4653 !important;
  box-shadow: 0 8px 24px rgba(27,70,83,.06) !important;
  backdrop-filter: blur(10px);
  margin-bottom: 20px !important;
}
#pricing .pricing-kicker::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: #f29b09;
  box-shadow: 0 0 0 5px rgba(242,155,9,.12);
  vertical-align: 1px;
}

#pricing .pricing-skin .hero h2 {
  max-width: 850px;
  margin: 0 auto;
  color: #102f39 !important;
  font-size: clamp(2rem, 3.5vw, 3rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -.045em;
}
#pricing .pricing-skin .hero p {
  max-width: 650px;
  margin: 16px auto 0 !important;
  color: #66808a !important;
  font-size: clamp(.98rem, 1.5vw, 1.1rem) !important;
}

#pricing .pricing-grid-image-match {
  position: relative;
  z-index: 2;
  max-width: 1240px !important;
  padding: 8px 24px 52px !important;
  gap: 18px !important;
  display: grid !important;
  align-items: stretch !important;
  align-content: stretch !important;
}

#pricing .img-match-card {
  --card-accent: #1B4653;
  --card-accent-soft: rgba(27,70,83,.09);
  position: relative;
  height: 100%;
  min-height: 100% !important;
  overflow: hidden;
  padding: 30px 24px 22px !important;
  border: 1px solid rgba(27,70,83,.12) !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: 0 12px 34px rgba(16,47,57,.08), 0 2px 5px rgba(16,47,57,.04) !important;
  transform: translateY(0);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

#pricing .img-match-card.enterprise-plan {
  min-height: 100% !important;
  height: 100% !important;
  padding-bottom: 22px !important;
}

#pricing .img-match-card::before {
  content: none !important;
  display: none !important;
}
#pricing .img-match-card::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  top: -80px;
  right: -80px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--card-accent-soft), transparent 68%);
  pointer-events: none;
}
#pricing .img-match-card:hover {
  transform: translateY(-9px);
  border-color: rgba(42,106,122,.26) !important;
  box-shadow: 0 22px 48px rgba(16,47,57,.13), 0 5px 12px rgba(16,47,57,.06) !important;
}

#pricing .img-match-card:nth-child(2) {
  transform: none;
  height: 100% !important;
  min-height: 100% !important;
}
#pricing .img-match-card:nth-child(2):hover {
  transform: translateY(-9px);
}



#pricing .dynamic-plan-mark {
  display: none !important;
}
#pricing .dynamic-plan-mark::after { content: ""; }
#pricing .img-match-card:nth-child(1) .dynamic-plan-mark::after { content: "01"; }
#pricing .img-match-card:nth-child(2) .dynamic-plan-mark::after { content: "02"; }
#pricing .img-match-card:nth-child(3) .dynamic-plan-mark::after { content: "03"; }
#pricing .img-match-card:nth-child(4) .dynamic-plan-mark::after { content: "04"; }

#pricing .img-card-header {
  margin-bottom: 20px !important;
}
#pricing .img-card-title {
  font-size: 1.18rem !important;
  color: #102f39 !important;
  letter-spacing: -.025em;
}
#pricing .img-card-subtitle {
  color: #6e8992 !important;
  font-size: .84rem !important;
}

#pricing .img-price-pill {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 0 18px !important;
  padding: 16px 18px 14px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg,#f5fafb 0%,#eef7f8 100%) !important;
  border: 1px solid #dbecef;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

#pricing .img-price-amount {
  color: #102f39 !important;
  font-size: 2rem !important;
  text-align: center !important;
}

#pricing .img-price-label {
  color: #78909a !important;
  text-align: center !important;
  font-size: .61rem !important;
}

#pricing .img-feature-list {
  margin-bottom: 16px !important;
  flex: 1 1 auto !important;
}
#pricing .img-feature-list li {
  padding: 8px 2px !important;
  color: #294a55 !important;
  border-bottom: 1px solid rgba(27,70,83,.055) !important;
  font-size: .88rem !important;
}
#pricing .img-feature-list li:last-child { border-bottom: 0 !important; }
#pricing .img-check {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #e8f5f2;
  color: #0d9f6e !important;
  font-size: .8rem !important;
}

#pricing .img-setup-box {
  margin-top: auto !important;
  margin-bottom: 14px !important;
  padding: 12px 14px 13px !important;
  border: 1px solid #e5edef !important;
  border-radius: 13px !important;
  background: #fbfcfc !important;
  text-align: center !important;
}
#pricing .img-setup-label { text-align: center !important; font-size: .62rem !important; display: block !important; width: 100% !important; }
#pricing .img-setup-value { text-align: center !important; font-size: .94rem !important; display: block !important; width: 100% !important; }
#pricing .img-setup-value em { font-size: .78em; }

#pricing .img-choose-btn {
  position: relative;
  overflow: hidden;
  border-radius: 12px !important;
  padding: 13px 17px !important;
  background: linear-gradient(135deg,#155468 0%,#1B4653 55%,#2a6a7a 100%) !important;
  box-shadow: 0 7px 18px rgba(27,70,83,.20) !important;
}
#pricing .img-choose-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg,transparent 25%,rgba(255,255,255,.22) 50%,transparent 75%);
  transform: translateX(-120%);
  transition: transform .55s ease;
}
#pricing .img-choose-btn:hover::before { transform: translateX(120%); }
#pricing .img-choose-btn:hover {
  background: linear-gradient(135deg,#123f4f 0%,#1B4653 55%,#245f70 100%) !important;
  box-shadow: 0 11px 24px rgba(27,70,83,.28) !important;
}
#pricing .img-choose-btn span { transition: transform .2s ease; }
#pricing .img-choose-btn:hover span { transform: translateX(4px); }




@keyframes pricingFloat {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(0,-18px,0) scale(1.04); }
}

@media (max-width: 1100px) {
  #pricing .pricing-grid-image-match { gap: 18px !important; }
}
@media (max-width: 760px) {
  #pricing .pricing-skin .hero { padding-top: 44px !important; }
  #pricing .pricing-grid-image-match { padding-left: 18px !important; padding-right: 18px !important; }
  #pricing .img-match-card { padding: 28px 22px 20px !important; }
}
@media (prefers-reduced-motion: reduce) {
  #pricing::before, #pricing::after { animation: none; }
  #pricing .img-match-card, #pricing .img-choose-btn, #pricing .img-choose-btn::before { transition: none; }
}



/* ========== FULL MOBILE RESPONSIVE (keep multi-column where designed) ========== */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { overflow-x: visible; }
img, svg, video { max-width: 100%; height: auto; }

/* Mobile nav drawer */
@media (max-width: 640px) {
  .mobile-toggle {
    display: block !important;
    z-index: 120;
    padding: 8px;
    line-height: 1;
  }
  .nav-links {
    display: none;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border, #d4e4eb);
    box-shadow: 0 12px 28px rgba(16,47,57,0.12);
    padding: 8px 16px 16px;
    z-index: 110;
  }
  .nav-links.open { display: flex !important; }
  .nav-links a {
    padding: 14px 12px;
    font-size: 1rem;
    border-bottom: 1px solid rgba(27,70,83,0.08);
    color: var(--primary, #1B4653);
  }
  .nav-links a:last-child,
  .nav-links .btn {
    border-bottom: none;
    margin-top: 8px;
    text-align: center;
    justify-content: center;
    width: 100%;
  }
  header { position: fixed; }
  .nav { position: relative; height: 64px; }
  .logo img { height: 34px; }
}

/* Tablet — scale, keep columns */
@media (max-width: 960px) {
  .container { padding-left: 20px !important; padding-right: 20px !important; }
  .section { padding: 56px 0; }
  .section-header { margin-bottom: 32px; }
  .section-header h2 { font-size: clamp(1.45rem, 3.5vw, 2rem); }
  .section-header p { font-size: 1rem; }
  .hero { padding: 36px 0 48px; }
  .hero h1 { font-size: clamp(1.7rem, 4vw, 2.4rem) !important; }

  /* Feature rows: keep 2 columns, tighter gap */
  .feature-row, .feature-row.reverse {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
    margin-bottom: 48px;
  }

  .feat-tabs {
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
  }
  .feat-tab { font-size: 0.85rem; padding: 8px 14px; }

  .feat-panel.active {
    grid-template-columns: 1fr !important;
    padding: 22px 18px !important;
  }

  /* Pricing: 2 columns on tablet/mobile (not 1) */
  #pricing .pricing-grid-image-match,
  .pricing-grid-image-match,
  .pricing-skin .pricing-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    max-width: 100% !important;
    gap: 14px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .faq-layout { grid-template-columns: 1fr !important; gap: 16px; }
  #faq .faq-cats {
    position: static !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 auto 8px !important;
  }
  #faq .faq-cat {
    width: auto !important;
    border-radius: 100px !important;
    padding: 8px 14px !important;
    font-size: 0.85rem !important;
    text-align: center !important;
  }
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 24px; }
}

/* Why Dinlipi (#features): text only on mobile — hide visuals/images */
@media (max-width: 960px) {
  #features .feature-visual {
    display: none !important;
  }
  #features .feature-row,
  #features .feature-row.reverse {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  #features .feature-content {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* Phone — still keep 2-col grids, only shrink spacing/type */
@media (max-width: 640px) {
  .container { padding-left: 14px !important; padding-right: 14px !important; }
  .section { padding: 40px 0; }
  .section-header { margin-bottom: 24px; }
  .section-header .label { font-size: 0.75rem; padding: 6px 12px; }
  .section-header h2 { font-size: clamp(1.3rem, 5.5vw, 1.65rem); }
  .section-header p { font-size: 0.92rem; line-height: 1.5; }

  .hero { padding: 24px 0 36px; }
  .hero-inner { gap: 22px; }
  .hero h1 { font-size: clamp(1.45rem, 6.5vw, 1.9rem) !important; }
  .hero-lead { font-size: 0.9rem; max-width: none; }
  .hero-badge { font-size: 0.72rem; }
  .hero-cta { gap: 10px; }
  .btn, .btn-lg { padding: 11px 16px; font-size: 0.9rem; }

  /* Keep 2-col feature rows on phone too */
  .feature-row, .feature-row.reverse {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    margin-bottom: 36px;
  }
  .feature-content h3 { font-size: 1rem !important; }
  .feature-content p { font-size: 0.82rem !important; }

  .feat-tabs { gap: 6px; }
  .feat-tab { font-size: 0.78rem; padding: 7px 11px; }
  .feat-panel.active { padding: 16px 12px !important; gap: 12px !important; }
  .feat-checks { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .feat-checks li { font-size: 0.8rem !important; }
  .feat-panel-icon { width: 48px; height: 48px; font-size: 1.4rem; }

  /* Pricing stays 2 columns */
  #pricing .pricing-grid-image-match,
  .pricing-grid-image-match,
  .pricing-skin .pricing-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    max-width: 100% !important;
  }
  #pricing .img-match-card {
    padding: 16px 12px 14px !important;
    border-radius: 14px !important;
  }
  #pricing .img-card-title { font-size: 0.88rem !important; }
  #pricing .img-card-subtitle { font-size: 0.72rem !important; }
  #pricing .img-price-amount { font-size: 1.25rem !important; }
  #pricing .img-price-label { font-size: 0.55rem !important; }
  #pricing .img-price-pill { padding: 10px 12px 9px !important; margin-bottom: 12px !important; border-radius: 12px !important; }
  #pricing .img-feature-list li { font-size: 0.75rem !important; padding: 6px 0 !important; }
  #pricing .img-setup-box { padding: 8px 10px !important; margin-bottom: 10px !important; }
  #pricing .img-setup-label { font-size: 0.55rem !important; }
  #pricing .img-setup-value { font-size: 0.78rem !important; }
  #pricing .img-choose-btn { padding: 10px 8px !important; font-size: 0.75rem !important; border-radius: 10px !important; }
  .pricing-skin .hero h1,
  .pricing-skin .hero h2,
  #pricing .pricing-skin .hero h2 {
    font-size: clamp(1.25rem, 5vw, 1.6rem) !important;
  }
  .pricing-skin .hero p { font-size: 0.88rem !important; }
  .pricing-custom-row {
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .pricing-custom-row .pricing-custom-card { max-width: 100% !important; }
  .pricing-custom-text b { font-size: 14px !important; }
  .pricing-custom-text small { font-size: 12px !important; }
  .pricing-custom-btn { padding: 8px 14px !important; font-size: 11px !important; }

  /* FAQ: keep side categories if possible, else compact */
  .faq-layout { grid-template-columns: 1fr !important; gap: 12px; }
  #faq .faq-cats {
    position: static !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
  }
  #faq .faq-cat {
    width: auto !important;
    border-radius: 100px !important;
    text-align: center !important;
  }

  /* Footer: 2 columns */
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 20px !important; }
  .footer-bottom { flex-direction: column !important; gap: 8px; text-align: center; font-size: 0.8rem; }

  .logos-section { padding: 24px 12px 28px !important; }
  .logo-item img { max-height: 40px; max-width: 110px; }
.browser, .md, .fv-anim, .hero-logos-orbit { max-width: 100%; }
}

/* Very small phones — still 2-col pricing/features, tighter */
@media (max-width: 400px) {
  .container { padding-left: 10px !important; padding-right: 10px !important; }
  .hero h1 { font-size: 1.3rem !important; }
  #pricing .img-price-amount { font-size: 1.1rem !important; }
  #pricing .img-card-title { font-size: 0.8rem !important; }
  #pricing .img-choose-btn { font-size: 0.7rem !important; padding: 9px 6px !important; }
  .feature-row, .feature-row.reverse { gap: 10px !important; }
  .faq-layout { grid-template-columns: 1fr !important; }
}

@media (hover: none) and (pointer: coarse) {
  .nav-links a, .feat-tab, .faq-question, .btn {
    min-height: 42px;
  }
}





#radial-feature-section .rs-center {
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
}
#radial-feature-section .rs-center:focus-visible {
  outline: 3px solid var(--accent, #f29b09);
  outline-offset: 6px;
  border-radius: 18px;
}



.hero-dash {
  position: relative;
  /* no 3D perspective — white content stays completely flat & untouched */
}
.hero-dash-frame {
  animation: heroDashFloat 5.5s ease-in-out infinite;
  transform-origin: 50% 60%;
  border-radius: 16px;
}
.hero-dash-bar {
  display: flex !important;
}
.hero-dash-screen {
  aspect-ratio: 1400 / 642;
  background: #e8eef3;
}
.hero-dash-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  display: block;
}
.hero-dash::before {
  content: "";
  position: absolute;
  inset: 12% 8% -8% 8%;
  background: radial-gradient(ellipse at center, rgba(27,70,83,0.22), transparent 70%);
  filter: blur(18px);
  z-index: -1;
  pointer-events: none;
}
/* ONLY gentle up-down float. No rotateX / rotateY — white area never tilts or moves sideways */
@keyframes heroDashFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-dash-frame { animation: none; }
  .hero-dash-screen::after { animation: none; }
}
@media (max-width: 900px) {
  .hero-dash-frame { animation: heroDashFloat 5s ease-in-out infinite; }
}



.hero-dash-screen { position: relative; overflow: hidden; }
/* ONLY the blue left sidebar — never touches the white content area */
.hero-side-nav {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 16.05%;         /* slightly over exact edge (223/1400≈15.93%) so blue fully covers, no white gap */
  z-index: 3;
  pointer-events: none;
  overflow: hidden;      /* hard clip — no white strip can appear */
}
.hero-side-mask {
  position: absolute;
  left: 0;
  right: 0;
  top: 18.4%;
  bottom: 0;
  background: #03234B;
  /* exact match to sidebar blue in the screenshot — no seam / white gap */
}
.hero-side-item {
  position: absolute;
  left: 0;
  width: 100%;
  max-width: 100%;
  display: block;
  object-fit: fill;
  object-position: left center;
  opacity: 0;
  transform: translateX(-16px);
  /* stay strictly inside the blue nav */
  right: auto;
  box-sizing: border-box;
}
.hero-side-item.in {
  animation: heroSideIn 0.48s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i) * 0.12s);
}
@keyframes heroSideIn {
  from { opacity: 0; transform: translateX(-16px); }
  to { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-side-item, .hero-side-item.in {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ===== 4 KPI cards — drop from above into original place ===== */
.hero-kpi-card {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-32px) scale(0.96);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(27, 70, 83, 0.12);
  will-change: transform, opacity;
}
.hero-kpi-card.in {
  animation: heroKpiIn 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(0.45s + var(--i) * 0.13s);
}
@keyframes heroKpiIn {
  from {
    opacity: 0;
    transform: translateY(-32px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-kpi-card, .hero-kpi-card.in {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ===== Rest of dashboard content — slide up into place ===== */
.hero-content-panel {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transform: translateY(22px);
  will-change: transform, opacity;
}
.hero-content-panel.in {
  animation: heroContentIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(0.85s + var(--i) * 0.18s);
}
@keyframes heroContentIn {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-content-panel, .hero-content-panel.in {
    animation: none;
    opacity: 1;
    transform: none;
  }
}



/* Force all interactive controls to be clickable */
a.btn, button, .btn, .gs-submit, .mobile-toggle, .faq-cat, .faq-question,
.rs-center, .rs-node, .wa-float, input[type="submit"], .img-choose-btn,
.cta-btn, .nav-links a, .footer-col a, .blog-card a, .contact-item {
  pointer-events: auto !important;
  cursor: pointer !important;
}
button:disabled, .btn:disabled {
  pointer-events: auto !important;
  opacity: 1 !important;
  cursor: pointer !important;
}



/* ============================================================
   COMPREHENSIVE RESPONSIVE FIX — Mobile / Tablet / Desktop
   ============================================================ */

/* === GLOBAL RESETS === */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}
body {
  overflow-x: hidden;
  min-width: 0;
}
*, *::before, *::after {
  box-sizing: border-box;
  min-width: 0;
}
img, video, svg, iframe {
  max-width: 100%;
  height: auto;
}
table {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  display: block;
}

/* === CONTAINER — Safe padding on every viewport === */
.container {
  width: 100%;
  max-width: none;
  padding-left: 1in;
  padding-right: 1in;
  box-sizing: border-box;
}
@media (max-width: 1024px) {
  .container { padding-left: 32px !important; padding-right: 32px !important; }
}
@media (max-width: 768px) {
  .container { padding-left: 20px !important; padding-right: 20px !important; }
}
@media (max-width: 480px) {
  .container { padding-left: 14px !important; padding-right: 14px !important; }
}

/* === NAVIGATION === */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  height: 72px;
  gap: 12px;
}
.logo img {
  height: 40px;
  width: auto;
  max-width: 160px;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: nowrap;
}
.mobile-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text);
  padding: 8px;
  line-height: 1;
  z-index: 120;
  flex-shrink: 0;
}

/* TABLET NAV — compress links */
@media (max-width: 900px) {
  .nav-links { gap: 18px; }
  .nav-links a { font-size: 0.88rem; }
}

/* MOBILE NAV DRAWER */
@media (max-width: 768px) {
  .mobile-toggle { display: block !important; }
  .nav-links {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 8px 32px rgba(27,70,83,0.16);
    padding: 30px 24px 280px;
    z-index: 110;
    overflow-y: hidden;
  }
  .nav-links.open { display: flex !important; }
  .nav-links a {
    padding: 16px 16px;
    font-size: 1.05rem;
    font-weight: 500;
    border-bottom: 1px solid rgba(27,70,83,0.08);
    color: var(--primary, #1B4653);
    display: block;
    width: 100%;
  }
  .nav-links a:last-child { border-bottom: none; }
  .nav-links .btn {
    margin-top: 16px;
    text-align: center;
    justify-content: center;
    width: 100%;
    padding: 14px 20px;
    border-radius: 10px;
    border-bottom: none !important;
  }
  header { position: fixed; z-index: 200; }
  .nav { height: 64px; position: relative; }
  .logo img { height: 34px; }
  .rs-details h3 {
    font-size: 16px;
  }
  .rs-details .desc {
    font-size: 12px;
  }
  .rs-details-header {
    padding: 21px 23px 0px;
  }
  .faq-question {
    font-size: 13px;
  }
  .faq-answer p {
    font-size: 13px;
  }
  .footer-col a {
    margin-bottom: 0px;
    margin-bottom: -11px !important;
  }
  a.contact-item.address {
    margin-bottom: 2px !important;
  }
}

/* === HERO SECTION === */
.hero {
  padding: 54px 0 80px;
  overflow: hidden;
}
.hero-inner {
  display: grid;
  grid-template-columns: 0.9fr 1.2fr;
  gap: 40px;
  align-items: center;
}
@media (max-width: 960px) {
  .hero { padding: 40px 0 60px; }
  .hero-inner {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  .hero h1 { font-size: clamp(1.7rem, 4vw, 2.4rem) !important; }
  .hero-lead { font-size: 1rem; }
  .browser, .hero-dash { max-width: 600px; margin: 0 auto; }
}
@media (max-width: 640px) {
  .hero { padding: 28px 0 44px; }
  .hero-inner { gap: 24px !important; }
  .hero h1 { font-size: clamp(1.45rem, 6.5vw, 1.95rem) !important; line-height: 1.2; }
  .hero-lead { font-size: 0.9rem; max-width: none; }
  .hero-badge { font-size: 0.72rem; padding: 6px 12px; }
  .hero-cta { gap: 10px; flex-wrap: wrap; }
  .btn, .btn-lg { padding: 12px 18px; font-size: 0.9rem; }
  .hero-proof-item { font-size: 0.82rem; }
  .hero-proof-points { gap: 14px; }
}
@media (max-width: 400px) {
  .hero h1 { font-size: 1.3rem !important; }
  .hero-cta .btn-lg { padding: 11px 14px; font-size: 0.85rem; }
}

/* === SECTIONS === */
.section { padding: 80px 0; }
.section-alt { padding: 80px 0; }
@media (max-width: 960px) {
  .section, .section-alt { padding: 60px 0; }
}
@media (max-width: 640px) {
  .section, .section-alt { padding: 44px 0; }
}

/* === SECTION HEADERS === */
.section-header { margin-bottom: 48px; text-align: center; }
.section-header h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); }
.section-header p { font-size: 1.05rem; }
.section-header .label { font-size: 0.82rem; }
@media (max-width: 768px) {
  .section-header { margin-bottom: 32px; }
  .section-header h2 { font-size: clamp(1.35rem, 4.5vw, 1.75rem); }
  .section-header p { font-size: 0.95rem; }
}
@media (max-width: 480px) {
  .section-header { margin-bottom: 24px; }
  .section-header h2 { font-size: clamp(1.2rem, 5.5vw, 1.5rem); }
  .section-header p { font-size: 0.88rem; }
}

/* === FEATURE ROWS === */
.feature-row, .feature-row.reverse {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  margin-bottom: 64px;
}
@media (max-width: 960px) {
  #features .feature-row, #features .feature-row.reverse {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    margin-bottom: 48px;
  }
  #features .feature-visual { display: none !important; }
  #features .feature-content {
    max-width: 100% !important;
    width: 100% !important;
  }
}
@media (max-width: 640px) {
  .feature-content h3 { font-size: 1.1rem !important; }
  .feature-content p { font-size: 0.88rem !important; }
  .feature-content ul li { font-size: 0.85rem !important; }
}

/* === FEATURE TABS === */
.feat-tabs { 
  display: flex; 
  gap: 10px; 
  flex-wrap: wrap; 
  justify-content: center;
  margin-bottom: 24px;
}
@media (max-width: 768px) {
  .feat-tabs { gap: 8px; }
  .feat-tab { font-size: 0.83rem; padding: 8px 14px; }
}
@media (max-width: 480px) {
  .feat-tab { font-size: 0.76rem; padding: 7px 10px; }
}
.feat-panel.active {
  display: grid;
  padding: 28px 24px;
}
@media (max-width: 768px) {
  .feat-panel.active {
    grid-template-columns: 1fr !important;
    padding: 20px 16px !important;
    gap: 14px !important;
  }
  .feat-checks {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .feat-panel-icon { width: 52px; height: 52px; font-size: 1.5rem; }
}
@media (max-width: 480px) {
  .feat-checks { grid-template-columns: 1fr !important; }
  .feat-checks li { font-size: 0.82rem !important; }
}

/* === PRICING GRID === */
#pricing .pricing-grid-image-match,
.pricing-grid-image-match,
.pricing-skin .pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
@media (max-width: 960px) {
  #pricing .pricing-grid-image-match,
  .pricing-grid-image-match,
  .pricing-skin .pricing-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    max-width: 100% !important;
  }
}
@media (max-width: 540px) {
  #pricing .pricing-grid-image-match,
  .pricing-grid-image-match,
  .pricing-skin .pricing-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  #pricing .img-match-card { padding: 16px 12px 14px !important; border-radius: 14px !important; }
  #pricing .img-card-title { font-size: 0.86rem !important; }
  #pricing .img-card-subtitle { font-size: 0.7rem !important; }
  #pricing .img-price-amount { font-size: 1.2rem !important; }
  #pricing .img-price-label { font-size: 0.5rem !important; }
  #pricing .img-price-pill { padding: 10px 10px 9px !important; margin-bottom: 10px !important; }
  #pricing .img-feature-list li { font-size: 0.72rem !important; padding: 5px 0 !important; }
  #pricing .img-setup-box { padding: 7px 9px !important; }
  #pricing .img-setup-label { font-size: 0.52rem !important; }
  #pricing .img-setup-value { font-size: 0.74rem !important; }
  #pricing .img-choose-btn { padding: 10px 8px !important; font-size: 0.72rem !important; }
}

/* === FAQ LAYOUT === */
.faq-layout { display: grid; grid-template-columns: 240px 1fr; gap: 32px; }
@media (max-width: 960px) {
  .faq-layout { grid-template-columns: 1fr !important; gap: 16px; }
  #faq .faq-cats {
    position: static !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 auto 8px !important;
  }
  #faq .faq-cat {
    width: auto !important;
    border-radius: 100px !important;
    padding: 8px 14px !important;
    font-size: 0.85rem !important;
    text-align: center !important;
  }
}

/* === FOOTER === */
.footer-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap: 32px;
}
@media (max-width: 960px) {
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
}
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .footer-bottom { flex-direction: column !important; gap: 8px !important; text-align: center !important; font-size: 0.8rem; }
  .footer-col h4 { font-size: 0.9rem; }
  .footer-col a { font-size: 0.85rem; }
}

/* === CTA BOX === */
.cta-box { padding: 72px 40px; text-align: center; }
@media (max-width: 768px) { .cta-box { padding: 52px 24px; } }
@media (max-width: 480px) { .cta-box { padding: 40px 16px; } }

/* === LOGOS MARQUEE === */
.logos-section { padding: 40px 0 56px; overflow: hidden; }
.bm2-item img { height: 56px; max-width: 180px; object-fit: contain; }
@media (max-width: 768px) {
  .logos-section { padding: 28px 0 32px; }
  .bm2-item { padding: 8px 20px; }
  .bm2-item img { height: 40px; max-width: 130px; }
  .logo-item img { max-height: 36px; max-width: 110px; }
  .bm2-fade-l, .bm2-fade-r { width: 50px; }
}
@media (max-width: 480px) {
  .bm2-item img { height: 32px; max-width: 100px; }
  .logo-item img { max-height: 28px; max-width: 88px; }
}

/* === BLOG GRID === */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 960px) { .blog-grid { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr !important; } }

/* === BLOG CARD === */
.blog-card { border-radius: 12px; overflow: hidden; }
@media (max-width: 640px) {
  .blog-card-title { font-size: 1rem; }
  .blog-card-excerpt { font-size: 0.85rem; }
}

/* === BLOG ARTICLE (single blog post page) === */
.blog-article-layout { display: grid; grid-template-columns: 1fr 320px; gap: 40px; }
.blog-content { max-width: 100%; }
@media (max-width: 960px) {
  .blog-article-layout { grid-template-columns: 1fr !important; }
  .blog-sidebar { display: none; }
}

/* === GET-STARTED / FORMS === */
.gs-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; }
@media (max-width: 960px) { .gs-grid { grid-template-columns: 1fr !important; gap: 36px !important; } }

.gs-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .gs-form-row { grid-template-columns: 1fr !important; } }

.gs-form input, .gs-form textarea, .gs-form select {
  width: 100%;
  font-size: 1rem;
  padding: 12px 14px;
  border-radius: 8px;
}
@media (max-width: 480px) {
  .gs-form input, .gs-form textarea, .gs-form select { font-size: 0.95rem; }
}

.gs-contact-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 800px) { .gs-contact-cards { grid-template-columns: 1fr !important; } }

/* === BUTTONS === */
.btn, .btn-lg, .btn-outline, .btn-primary, .btn-accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
@media (max-width: 480px) {
  .btn-lg { padding: 12px 18px !important; font-size: 0.9rem !important; }
  .btn { padding: 10px 16px !important; font-size: 0.88rem !important; }
}

/* === RADIAL FEATURE SECTION === */
#radial-feature-section { padding: 60px 0 40px; }
.rs-segment {
  display: flex;
  align-items: center;
  gap: 48px;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
}
/* @media (max-width: 960px) {
  .rs-segment { flex-direction: column !important; gap: 28px !important; padding: 0 16px !important; }
  .rs-radial-wrap { max-width: 300px; margin: 0 auto; width: 100%; }
  .rs-detail-wrap { max-width: 100%; }
} */
@media (max-width: 768px) {
  .rs-radial-wrap {
    width: 300px !important;
    height: 300px !important;
    max-width: calc(100vw - 32px) !important;
    max-height: calc(100vw - 32px) !important;
    margin: 0 auto;
    flex-shrink: 0;
  }
  .rs-node {
    width: 64px;
    height: 64px;
    margin-left: -32px;
    margin-top: -32px;
  }
  .rs-node-label { font-size: 8px; max-width: 56px; }
  .rs-node-icon { font-size: 11px; }
  .rs-center img { width: 80px; }
}

/* === MINI DASHBOARD (hero embed) === */
@media (max-width: 960px) {
  .md-kpis { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
  .md { font-size: 8px !important; }
  .md-kpis { grid-template-columns: repeat(2, 1fr) !important; }
  .md-kpi .n { font-size: 12px !important; }
}

/* === STATS / METRICS === */
.hero-metrics { display: flex; gap: 16px; flex-wrap: wrap; }
.metric-pill { padding: 10px 16px; white-space: nowrap; }
@media (max-width: 640px) {
  .hero-metrics { gap: 8px; }
  .metric-pill { padding: 8px 12px; font-size: 0.8rem; }
}

/* === SAFE AREA — iOS bottom bar === */
.wa-float {
  bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  right: calc(16px + env(safe-area-inset-right, 0px)) !important;
}

/* === OVERFLOW PROTECTION — any wide table or code block === */
pre, code, .code-block {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* === PRICING CUSTOM ROW === */
.pricing-custom-row {
  max-width: 100% !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}
@media (max-width: 640px) {
  .pricing-custom-row .pricing-custom-card { max-width: 100% !important; }
  .pricing-custom-text b { font-size: 14px !important; }
  .pricing-custom-text small { font-size: 12px !important; }
  .pricing-custom-btn { padding: 8px 14px !important; font-size: 11px !important; }
}

/* === PRICING HERO TEXT === */
@media (max-width: 640px) {
  .pricing-skin .hero h1,
  .pricing-skin .hero h2,
  #pricing .pricing-skin .hero h2 {
    font-size: clamp(1.2rem, 5vw, 1.6rem) !important;
  }
  .pricing-skin .hero p { font-size: 0.88rem !important; }
}

/* === TOUCH TARGETS — min 44px on coarse touch devices === */
@media (hover: none) and (pointer: coarse) {
  .nav-links a, .feat-tab, .faq-question, .btn, .btn-lg, 
  .btn-outline, .btn-primary, .btn-accent, .mobile-toggle,
  .footer-col a, .gs-submit, .img-choose-btn {
    min-height: 44px;
  }
}

/* === BLOG SINGLE PAGE TYPOGRAPHY === */
.blog-body h2 { font-size: clamp(1.2rem, 3vw, 1.6rem); }
.blog-body h3 { font-size: clamp(1rem, 2.5vw, 1.3rem); }
.blog-body p, .blog-body li { font-size: clamp(0.9rem, 1.8vw, 1rem); line-height: 1.7; }
@media (max-width: 640px) {
  .blog-body { padding: 0; }
  .blog-hero-title { font-size: clamp(1.3rem, 5.5vw, 1.8rem) !important; }
  .blog-hero-subtitle { font-size: 0.92rem !important; }
}

/* === MOBILE CLOSE BUTTON POSITIONING === */
@media (max-width: 768px) {
  .nav-links.open::before {
    content: none;
  }
}

/* === VERY SMALL PHONES (320px) === */
@media (max-width: 360px) {
  body { font-size: 14px; }
  .container { padding-left: 12px !important; padding-right: 12px !important; }
  .hero h1 { font-size: 1.2rem !important; }
  .section-header h2 { font-size: 1.15rem; }
  .btn, .btn-lg { padding: 10px 14px !important; font-size: 0.82rem !important; }
}



.feature-visual:has(.at-wrap) { padding: 0 !important; overflow: hidden; }
.fv-anim:has(.at-wrap) { padding: 0 !important; min-height: auto !important; }
.at-wrap {
  width: 100%;
  min-height: 300px;
  border-radius: 14px;
  background: radial-gradient(circle at 15% 20%, rgba(42,106,122,.22), transparent 30%),
    radial-gradient(circle at 88% 80%, rgba(242,155,9,.16), transparent 28%),
    linear-gradient(145deg, #13343e 0%, #1B4653 52%, #102d36 100%) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  font-family: 'Segoe UI', system-ui, sans-serif;
}
.at-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(45px);
  pointer-events: none;
  animation: atOrb 8s ease-in-out infinite;
}
.at-orb-1 { width: 120px; height: 120px; background: #a855f7; top: -10px; left: -15px; opacity: 0.25; }
.at-orb-2 { width: 100px; height: 100px; background: #f97316; bottom: -8px; right: -12px; opacity: 0.22; animation-delay: 3s; }
.at-orb-3 { width: 70px; height: 70px; background: #ec4899; top: 40%; right: 18%; opacity: 0.15; animation-delay: 5s; }
@keyframes atOrb {
  0%, 100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(10px,-8px) scale(1.08); }
}
.at-timeline {
  position: relative;
  width: 100%;
  max-width: 420px;
  height: 280px;
  z-index: 2;
}
.at-rail {
  position: absolute;
  left: 50%;
  top: 16px;
  bottom: 16px;
  width: 3px;
  margin-left: -1.5px;
  background: linear-gradient(180deg, transparent, rgba(168,85,247,0.35), rgba(249,115,22,0.35), transparent);
  border-radius: 2px;
  overflow: hidden;
}
.at-rail-flow {
  position: absolute;
  left: 0; width: 100%; height: 28%;
  background: linear-gradient(180deg, transparent, #c084fc, #fb923c, transparent);
  animation: atRailDrop 2.2s ease-in-out infinite;
}
@keyframes atRailDrop {
  0% { top: -30%; opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
.at-node {
  position: absolute;
  left: 50%;
  width: 56px; height: 56px;
  margin-left: -28px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.4);
  z-index: 5;
}
.at-node-1 {
  top: 8px;
  background: linear-gradient(145deg, #1B4653, #2a6a7a) !important;
  box-shadow: 0 8px 20px rgba(168,85,247,0.45);
  animation: atPop 0.6s cubic-bezier(0.34,1.4,0.64,1) 0.3s forwards, atBob 3.2s ease-in-out 1.2s infinite;
}
.at-node-2 {
  top: 106px;
  width: 64px; height: 64px;
  margin-left: -32px;
  border-radius: 18px;
  background: linear-gradient(145deg, #d4860a, #f29b09) !important;
  box-shadow: 0 8px 20px rgba(249,115,22,0.45);
  animation: atPop 0.6s cubic-bezier(0.34,1.4,0.64,1) 0.55s forwards, atBob 2.8s ease-in-out 1.5s infinite;
}
.at-node-3 {
  top: 212px;
  background: linear-gradient(145deg, #1B4653, #2a6a7a) !important;
  box-shadow: 0 8px 20px rgba(236,72,153,0.45);
  animation: atPop 0.6s cubic-bezier(0.34,1.4,0.64,1) 0.8s forwards, atBob 3.5s ease-in-out 1.8s infinite;
}
@keyframes atPop {
  0% { opacity: 0; transform: scale(0.3); }
  70% { transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes atBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
.at-node svg {
  width: 24px; height: 24px;
  stroke: #fff; stroke-width: 1.8; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
.at-node-2 svg { width: 28px; height: 28px; }
.at-panel {
  position: absolute;
  max-width: 130px;
  padding: 8px 11px;
  border-radius: 10px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  opacity: 0;
  z-index: 4;
}
.at-panel strong {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  color: #f5f3ff;
  margin-bottom: 2px;
  line-height: 1.25;
}
.at-panel span {
  display: block;
  font-size: 9.5px;
  color: rgba(255,255,255,0.5);
  line-height: 1.3;
}
.at-pl1 { top: 12px; left: 8px; animation: atSlideL 0.5s ease 1.0s forwards, atFloat 4s ease-in-out 1.6s infinite; border-color: rgba(168,85,247,0.3); }
.at-pr1 { top: 12px; right: 8px; animation: atSlideR 0.5s ease 1.1s forwards, atFloat 3.6s ease-in-out 1.8s infinite; border-color: rgba(168,85,247,0.25); }
.at-pl2 { top: 112px; left: 8px; animation: atSlideL 0.5s ease 1.2s forwards, atFloat 4s ease-in-out 2.0s infinite; border-color: rgba(249,115,22,0.3); }
.at-pr2 { top: 112px; right: 8px; animation: atSlideR 0.5s ease 1.3s forwards, atFloat 3.6s ease-in-out 2.1s infinite; border-color: rgba(249,115,22,0.25); }
.at-pl3 { top: 216px; left: 8px; animation: atSlideL 0.5s ease 1.4s forwards, atFloat 4.2s ease-in-out 2.2s infinite; border-color: rgba(236,72,153,0.3); }
.at-pr3 { top: 216px; right: 8px; animation: atSlideR 0.5s ease 1.5s forwards, atFloat 3.8s ease-in-out 2.4s infinite; border-color: rgba(236,72,153,0.25); }
@keyframes atSlideL {
  from { opacity: 0; transform: translateX(-18px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes atSlideR {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes atFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
.at-orbit {
  position: absolute;
  top: 138px;
  left: 50%;
  width: 0; height: 0;
  z-index: 6;
  pointer-events: none;
}
.at-mini {
  position: absolute;
  width: 7px; height: 7px;
  border-radius: 50%;
  margin: -3.5px 0 0 -3.5px;
  opacity: 0;
  animation: atOrbit 4s linear infinite, atMiniIn 0.4s ease 1.5s forwards;
}
.at-mini-1 { background: #c084fc; --r: 48px; animation-delay: 0s, 1.5s; }
.at-mini-2 { background: #fb923c; --r: 48px; animation-delay: -1.33s, 1.5s; }
.at-mini-3 { background: #f472b6; --r: 48px; animation-delay: -2.66s, 1.5s; }
@keyframes atOrbit {
  from { transform: rotate(0deg) translateX(var(--r)) rotate(0deg); }
  to { transform: rotate(360deg) translateX(var(--r)) rotate(-360deg); }
}
@keyframes atMiniIn { to { opacity: 0.85; } }



.feature-visual:has(.pf-wrap) {
  padding: 0 !important;
  overflow: hidden;
}
.fv-anim:has(.pf-wrap) {
  padding: 0 !important;
  min-height: auto !important;
}
.feature-visual:has(.pf-wrap) {
  padding: 0 !important;
  overflow: hidden;
}
.fv-anim:has(.pf-wrap) {
  padding: 0 !important;
  min-height: auto !important;
}
.pf-wrap {
  width: 100%;
  min-height: 280px;
  border-radius: 14px;
  background: linear-gradient(160deg, #071e28 0%, #0c3040 50%, #0a2530 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 0;
}
.pf-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.28;
  pointer-events: none;
  animation: pfGlow 6s ease-in-out infinite;
}
.pf-glow-l { width: 120px; height: 120px; background: #14b8a6; top: 15%; left: 5%; }
.pf-glow-c { width: 140px; height: 140px; background: #0ea5e9; top: 25%; left: 50%; margin-left: -70px; animation-delay: 2s; }
.pf-glow-r { width: 120px; height: 120px; background: #22c55e; bottom: 15%; right: 5%; animation-delay: 4s; }
@keyframes pfGlow {
  0%, 100% { transform: scale(1); opacity: 0.2; }
  50% { transform: scale(1.12); opacity: 0.35; }
}
.pf-stage {
  position: relative;
  width: 100%;
  max-width: 480px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  z-index: 2;
  padding: 20px 12px;
}
.pf-card {
  width: 100px;
  height: 118px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(20,50,65,0.95), rgba(12,35,48,0.98));
  border: 1.5px solid rgba(94,234,212,0.18);
  box-shadow: 0 10px 28px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  opacity: 0;
  position: relative;
  flex-shrink: 0;
}
.pf-card-payslip {
  animation:
    pfCardIn 0.7s cubic-bezier(0.22,1,0.36,1) 0.2s forwards,
    pfFloatL 3.5s ease-in-out 1.2s infinite;
  border-color: rgba(45,212,191,0.3);
}
.pf-card-bank {
  animation:
    pfCardIn 0.7s cubic-bezier(0.22,1,0.36,1) 0.45s forwards,
    pfFloatC 3s ease-in-out 1.4s infinite;
  border-color: rgba(56,189,248,0.4);
  box-shadow: 0 10px 28px rgba(0,0,0,0.35), 0 0 24px rgba(14,165,233,0.18);
  width: 110px;
  height: 128px;
}
.pf-card-money {
  animation:
    pfCardIn 0.7s cubic-bezier(0.22,1,0.36,1) 0.7s forwards,
    pfFloatR 3.8s ease-in-out 1.5s infinite;
  border-color: rgba(74,222,128,0.35);
}
@keyframes pfCardIn {
  from { opacity: 0; transform: scale(0.65) translateY(16px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes pfFloatL {
  0%, 100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(-8px) translateX(3px); }
}
@keyframes pfFloatC {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-10px) scale(1.03); }
}
@keyframes pfFloatR {
  0%, 100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(-8px) translateX(-3px); }
}
.pf-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
  animation: pfIconPulse 2.8s ease-in-out infinite;
}
.pf-card-payslip .pf-icon {
  background: linear-gradient(145deg, #0f766e, #14b8a6);
  box-shadow: 0 6px 14px rgba(20,184,166,0.35);
  animation-delay: 0s;
}
.pf-card-bank .pf-icon {
  width: 58px;
  height: 58px;
  background: linear-gradient(145deg, #0369a1, #0ea5e9);
  box-shadow: 0 6px 16px rgba(14,165,233,0.4);
  animation-delay: 0.4s;
}
.pf-card-money .pf-icon {
  background: linear-gradient(145deg, #15803d, #22c55e);
  box-shadow: 0 6px 14px rgba(34,197,94,0.35);
  animation-delay: 0.8s;
}
@keyframes pfIconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
.pf-icon svg {
  width: 24px;
  height: 24px;
  stroke: #fff;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pf-card-bank .pf-icon svg { width: 28px; height: 28px; }
.pf-dots { display: flex; gap: 4px; }
.pf-dots span {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,0.2);
  animation: pfDotBlink 1.8s ease-in-out infinite;
}
.pf-dots span:nth-child(1) { animation-delay: 0s; }
.pf-dots span:nth-child(2) { animation-delay: 0.25s; }
.pf-dots span:nth-child(3) { animation-delay: 0.5s; }
@keyframes pfDotBlink {
  0%, 100% { opacity: 0.3; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.15); }
}
.pf-card-payslip .pf-dots span:nth-child(1) { background: #2dd4bf; }
.pf-card-bank .pf-dots span:nth-child(2) { background: #38bdf8; }
.pf-card-money .pf-dots span:nth-child(3) { background: #4ade80; }
.pf-card-bank::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 20px;
  border: 2px solid rgba(56,189,248,0.3);
  opacity: 0;
  animation: pfPulse 2.5s ease-out 1.2s infinite;
}
@keyframes pfPulse {
  0% { transform: scale(0.96); opacity: 0.55; }
  100% { transform: scale(1.12); opacity: 0; }
}
.pf-arrow {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 32px;
  min-width: 36px;
  opacity: 0;
}
.pf-arrow-l { animation: pfFade 0.5s ease 1s forwards; }
.pf-arrow-r { animation: pfFade 0.5s ease 1.2s forwards; }
@keyframes pfFade { to { opacity: 1; } }
.pf-track {
  width: 100%;
  max-width: 48px;
  height: 3px;
  background: rgba(94,234,212,0.15);
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}
.pf-flow {
  position: absolute;
  top: 0; left: -40%;
  width: 40%; height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, #5eead4, transparent);
  animation: pfMove 1.4s ease-in-out infinite;
}
.pf-arrow-r .pf-flow {
  background: linear-gradient(90deg, transparent, #4ade80, transparent);
  animation-delay: 0.25s;
}
@keyframes pfMove {
  0% { left: -40%; }
  100% { left: 100%; }
}
.pf-head {
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid #5eead4;
  animation: pfHeadBob 1.4s ease-in-out infinite;
}
.pf-arrow-r .pf-head {
  border-left-color: #4ade80;
  animation-delay: 0.25s;
}
@keyframes pfHeadBob {
  0%, 100% { transform: translateY(-50%) translateX(0); opacity: 0.7; }
  50% { transform: translateY(-50%) translateX(3px); opacity: 1; }
}
/* traveling dots on arrows */
.pf-arrow::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5eead4;
  box-shadow: 0 0 8px #5eead4;
  top: 50%;
  left: 0;
  margin-top: -3px;
  opacity: 0;
  animation: pfTravel 1.8s ease-in-out infinite;
}
.pf-arrow-r::after {
  background: #4ade80;
  box-shadow: 0 0 8px #4ade80;
  animation-delay: 0.35s;
}
@keyframes pfTravel {
  0% { left: 5%; opacity: 0; transform: scale(0.5); }
  20% { opacity: 1; transform: scale(1); }
  80% { opacity: 1; }
  100% { left: 85%; opacity: 0; transform: scale(0.5); }
}
@media (max-width: 480px) {
  .pf-card { width: 80px; height: 100px; }
  .pf-card-bank { width: 88px; height: 108px; }
  .pf-icon { width: 42px; height: 42px; }
  .pf-card-bank .pf-icon { width: 48px; height: 48px; }
  .pf-icon svg { width: 20px; height: 20px; }
  .pf-card-bank .pf-icon svg { width: 22px; height: 22px; }
}



.feature-visual:has(.rp-wrap) { padding: 0 !important; overflow: hidden; }
.fv-anim:has(.rp-wrap) { padding: 0 !important; min-height: auto !important; }
.rp-wrap {
  width: 100%;
  min-height: 300px;
  border-radius: 14px;
  background: linear-gradient(150deg, #0c1929 0%, #132f4c 50%, #0a1628 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  font-family: 'Segoe UI', system-ui, sans-serif;
  padding: 28px 16px 16px;
}
.rp-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
  animation: rpBlob 7s ease-in-out infinite;
}
.rp-blob-1 { width: 110px; height: 110px; background: #3b82f6; top: 5%; left: 5%; opacity: 0.2; }
.rp-blob-2 { width: 90px; height: 90px; background: #06b6d4; bottom: 5%; right: 8%; opacity: 0.18; animation-delay: 2.5s; }
@keyframes rpBlob {
  0%, 100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(8px,-8px) scale(1.08); }
}
.rp-badge {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 100px;
  background: rgba(59,130,246,0.15);
  border: 1px solid rgba(96,165,250,0.25);
  margin-bottom: 14px;
  opacity: 0;
  animation: rpBadgeIn 0.5s ease 0.1s forwards;
  position: relative;
  z-index: 2;
}
.rp-badge i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #3b82f6;
  box-shadow: 0 0 6px #3b82f6;
  animation: rpBlink 1.5s ease-in-out infinite;
}
.rp-badge span {
  font-size: 10px;
  font-weight: 600;
  color: #93c5fd;
}
@keyframes rpBadgeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes rpBlink {
  0%, 100% { opacity: 0.4; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}
.rp-grid {
  position: relative;
  width: 100%;
  max-width: 400px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  z-index: 2;
}
.rp-card {
  background: linear-gradient(160deg, rgba(30,58,95,0.7), rgba(15,35,60,0.85));
  border: 1px solid rgba(96,165,250,0.18);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  opacity: 0;
  transform: translateY(14px) scale(0.94);
  position: relative;
  overflow: hidden;
}
.rp-card:nth-child(1) { animation: rpCardIn 0.5s cubic-bezier(0.22,1,0.36,1) 0.15s forwards; }
.rp-card:nth-child(2) { animation: rpCardIn 0.5s cubic-bezier(0.22,1,0.36,1) 0.28s forwards; }
.rp-card:nth-child(3) { animation: rpCardIn 0.5s cubic-bezier(0.22,1,0.36,1) 0.41s forwards; }
.rp-card:nth-child(4) { animation: rpCardIn 0.5s cubic-bezier(0.22,1,0.36,1) 0.54s forwards; }
.rp-card:nth-child(5) {
  grid-column: 1 / -1;
  max-width: 55%;
  margin: 0 auto;
  justify-content: center;
  animation: rpCardIn 0.5s cubic-bezier(0.22,1,0.36,1) 0.67s forwards;
}
@keyframes rpCardIn {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.rp-card::after {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
  animation: rpShimmer 3.5s ease-in-out infinite;
}
.rp-card:nth-child(1)::after { animation-delay: 0s; }
.rp-card:nth-child(2)::after { animation-delay: 0.5s; }
.rp-card:nth-child(3)::after { animation-delay: 1s; }
.rp-card:nth-child(4)::after { animation-delay: 1.5s; }
.rp-card:nth-child(5)::after { animation-delay: 2s; }
@keyframes rpShimmer {
  0% { left: -60%; }
  50%, 100% { left: 120%; }
}
.rp-icon {
  width: 32px; height: 32px; min-width: 32px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: rpIconBob 3s ease-in-out infinite;
}
.rp-card:nth-child(1) .rp-icon { background: linear-gradient(145deg, #1d4ed8, #3b82f6); box-shadow: 0 3px 10px rgba(59,130,246,0.35); }
.rp-card:nth-child(2) .rp-icon { background: linear-gradient(145deg, #0e7490, #06b6d4); box-shadow: 0 3px 10px rgba(6,182,212,0.35); animation-delay: 0.3s; }
.rp-card:nth-child(3) .rp-icon { background: linear-gradient(145deg, #4338ca, #6366f1); box-shadow: 0 3px 10px rgba(99,102,241,0.35); animation-delay: 0.6s; }
.rp-card:nth-child(4) .rp-icon { background: linear-gradient(145deg, #0369a1, #0ea5e9); box-shadow: 0 3px 10px rgba(14,165,233,0.35); animation-delay: 0.9s; }
.rp-card:nth-child(5) .rp-icon { background: linear-gradient(145deg, #1e40af, #60a5fa); box-shadow: 0 3px 10px rgba(96,165,250,0.35); animation-delay: 1.2s; }
@keyframes rpIconBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
.rp-icon svg {
  width: 16px; height: 16px;
  stroke: #fff; stroke-width: 1.8; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
.rp-txt { flex: 1; min-width: 0; }
.rp-txt strong {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #e0f2fe;
  margin-bottom: 2px;
  line-height: 1.25;
}
.rp-txt span {
  display: block;
  font-size: 9.5px;
  color: rgba(186,230,253,0.5);
  line-height: 1.3;
}
.rp-chip {
  position: absolute;
  top: 8px; right: 8px;
  width: 6px; height: 6px;
  border-radius: 50%;
  animation: rpBlink 2s ease-in-out infinite;
}
.rp-card:nth-child(1) .rp-chip { background: #3b82f6; box-shadow: 0 0 5px #3b82f6; }
.rp-card:nth-child(2) .rp-chip { background: #06b6d4; box-shadow: 0 0 5px #06b6d4; animation-delay: 0.3s; }
.rp-card:nth-child(3) .rp-chip { background: #6366f1; box-shadow: 0 0 5px #6366f1; animation-delay: 0.6s; }
.rp-card:nth-child(4) .rp-chip { background: #0ea5e9; box-shadow: 0 0 5px #0ea5e9; animation-delay: 0.9s; }
.rp-card:nth-child(5) .rp-chip { background: #60a5fa; box-shadow: 0 0 5px #60a5fa; animation-delay: 1.2s; }
.rp-bar {
  height: 3px;
  border-radius: 2px;
  background: rgba(96,165,250,0.15);
  margin-top: 6px;
  overflow: hidden;
  position: relative;
}
.rp-bar i {
  position: absolute;
  left: 0; top: 0; height: 100%;
  border-radius: 2px;
  animation: rpBarFill 1.8s ease forwards;
}
.rp-card:nth-child(1) .rp-bar i { width: 85%; background: linear-gradient(90deg, #3b82f6, #60a5fa); animation-delay: 0.7s; }
.rp-card:nth-child(2) .rp-bar i { width: 70%; background: linear-gradient(90deg, #06b6d4, #22d3ee); animation-delay: 0.9s; }
.rp-card:nth-child(3) .rp-bar i { width: 92%; background: linear-gradient(90deg, #6366f1, #818cf8); animation-delay: 1.1s; }
.rp-card:nth-child(4) .rp-bar i { width: 60%; background: linear-gradient(90deg, #0ea5e9, #38bdf8); animation-delay: 1.3s; }
.rp-card:nth-child(5) .rp-bar i { width: 78%; background: linear-gradient(90deg, #3b82f6, #60a5fa); animation-delay: 1.5s; }
@keyframes rpBarFill {
  from { transform: scaleX(0); transform-origin: left; }
  to { transform: scaleX(1); transform-origin: left; }
}




.buyer-banner-embed         * { box-sizing: border-box; margin: 0; padding: 0; }
        .buyer-banner-embed-host {
            background: #0f1720;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            font-family: Inter, Arial, sans-serif;
        }
.buyer-banner-embed .banner {
            width: 634.4px;
            height: 481.2px;
            background: linear-gradient(145deg, #0d1a24 0%, #12202c 50%, #0d1a24 100%);
            border-radius: 20px;
            overflow: hidden;
            position: relative;
            box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45);
        }
.buyer-banner-embed .banner::before {
            content: '';
            position: absolute;
            width: 280px; height: 280px;
            background: radial-gradient(circle, rgba(14, 107, 106, 0.18) 0%, transparent 70%);
            top: -60px; left: -40px;
            animation: bannerGlowMove 8s ease-in-out infinite alternate;
            pointer-events: none;
        }
.buyer-banner-embed .banner::after {
            content: '';
            position: absolute;
            width: 220px; height: 220px;
            background: radial-gradient(circle, rgba(14, 107, 106, 0.12) 0%, transparent 70%);
            bottom: -50px; right: -30px;
            animation: bannerGlowMove 9s ease-in-out infinite alternate-reverse;
            pointer-events: none;
        }
        @keyframes bannerGlowMove {
            0% { transform: translate(0, 0); }
            100% { transform: translate(30px, 20px); }
        }
.buyer-banner-embed .banner-header {
            position: absolute;
            top: 22px; left: 0; right: 0;
            text-align: center;
            z-index: 5;
        }
.buyer-banner-embed .banner-header span {
            display: inline-block;
            background: rgba(14, 107, 106, 0.18);
            color: #5ec4b0;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 1.5px;
            padding: 6px 14px;
            border-radius: 30px;
            text-transform: uppercase;
        }
.buyer-banner-embed .banner-header h3 {
            margin-top: 12px;
            color: #e8f4f3;
            font-size: 20px;
            font-weight: 700;
            letter-spacing: -0.3px;
        }
.buyer-banner-embed .logos-area {
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            padding: 20px 24px 24px;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(3, 1fr);
            gap: 14px;
            z-index: 2;
        }
.buyer-banner-embed .logo-card {
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 12px;
            position: relative;
            overflow: hidden;
            transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
            animation: bannerCardFloat 5s ease-in-out infinite;
            background: #ffffff;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
.buyer-banner-embed .logo-card:nth-child(1) { animation-delay: 0s; }
.buyer-banner-embed .logo-card:nth-child(2) { animation-delay: 0.4s; }
.buyer-banner-embed .logo-card:nth-child(3) { animation-delay: 0.8s; }
.buyer-banner-embed .logo-card:nth-child(4) { animation-delay: 1.2s; }
.buyer-banner-embed .logo-card:nth-child(5) { animation-delay: 0.2s; }
.buyer-banner-embed .logo-card:nth-child(6) { animation-delay: 0.6s; }
.buyer-banner-embed .logo-card:nth-child(7) { animation-delay: 1.0s; }
.buyer-banner-embed .logo-card:nth-child(8) { animation-delay: 1.4s; }
.buyer-banner-embed .logo-card:nth-child(9) { animation-delay: 0.3s; }
.buyer-banner-embed .logo-card:nth-child(10) { animation-delay: 0.7s; }
.buyer-banner-embed .logo-card:nth-child(11) { animation-delay: 1.1s; }
.buyer-banner-embed .logo-card:nth-child(12) { animation-delay: 1.5s; }
        @keyframes bannerCardFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-5px); }
        }
.buyer-banner-embed .logo-card:hover {
            transform: translateY(-4px) scale(1.04);
            z-index: 10;
            box-shadow: 0 8px 24px rgba(0,0,0,0.3);
            border-color: rgba(94, 196, 176, 0.45);
        }
.buyer-banner-embed .logo-card img {
            max-width: 100%;
            max-height: 64px;
            object-fit: contain;
            transition: transform 0.3s ease;
        }
.buyer-banner-embed .logo-card:hover img { transform: scale(1.08); }
.buyer-banner-embed .bottom-bar {
            position: absolute;
            bottom: 0; left: 0; right: 0;
            height: 3px;
            background: linear-gradient(90deg, transparent, #0e6b6a, #5ec4b0, #0e6b6a, transparent);
            opacity: 0.7;
        }
    

.buyer-banner-embed {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.buyer-banner-embed .banner {
  width: 100% !important;
  height: auto !important;
  min-height: 380px;
  aspect-ratio: 634 / 481;
  border-radius: 16px !important;
  box-shadow: none !important;
}
.buyer-banner-embed .logos-area {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  padding: 18px 16px 18px !important;
  gap: 12px !important;
}
.buyer-banner-embed .banner-header {
  display: none !important;
}
.buyer-banner-embed .banner-header {
  top: 14px !important;
}
.buyer-banner-embed .banner-header h3 {
  font-size: 17px !important;
  margin-top: 8px !important;
}
.buyer-banner-embed .logo-card {
  padding: 8px !important;
  border-radius: 10px !important;
}
.buyer-banner-embed .logo-card img {
  max-height: 58px !important;
  max-width: 95% !important;
}
.buyer-banner-embed .logo-card {
  padding: 10px !important;
}
.feature-visual:has(.buyer-banner-embed) {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: hidden;
}




/* Customize Solution — FINAL override (beats #pricing .img-match-card) */
#pricing .img-match-card.customize-plan {
  background: linear-gradient(165deg, #13343e 0%, #1B4653 48%, #0f2a33 100%) !important;
  border: 1px solid rgba(42, 106, 122, 0.65) !important;
  box-shadow: 0 12px 36px rgba(19, 52, 62, 0.35), 0 0 0 1px rgba(242, 155, 9, 0.12) !important;
  position: relative;
  overflow: hidden;
}
#pricing .img-match-card.customize-plan::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  top: -40%;
  right: -30%;
  width: 70%;
  height: 70%;
  background: radial-gradient(circle, rgba(242, 155, 9, 0.12) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
#pricing .img-match-card.customize-plan::after {
  content: none !important;
  display: none !important;
}
#pricing .img-match-card.customize-plan:hover {
  box-shadow: 0 18px 44px rgba(19, 52, 62, 0.45), 0 0 0 1px rgba(242, 155, 9, 0.22) !important;
  transform: translateY(-4px);
  border-color: rgba(42, 106, 122, 0.85) !important;
}
#pricing .img-match-card.customize-plan .img-card-title {
  color: #ffffff !important;
}
#pricing .img-match-card.customize-plan .img-card-subtitle {
  color: #9bb8c4 !important;
}
#pricing .img-match-card.customize-plan .img-price-pill {
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
}
#pricing .img-match-card.customize-plan .img-price-amount {
  color: #ffffff !important;
}
#pricing .img-match-card.customize-plan .img-price-label {
  color: #a8c0cc !important;
}
#pricing .img-match-card.customize-plan .img-feature-list li {
  color: #d7e6ec !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
#pricing .img-match-card.customize-plan .img-check {
  color: #3dd6a5 !important;
}
#pricing .img-match-card.customize-plan .img-setup-box {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 14px !important;
  padding: 12px 14px 14px !important;
  margin-bottom: 14px !important;
}
#pricing .img-match-card.customize-plan .img-setup-label {
  color: #9bb8c4 !important;
}
#pricing .img-match-card.customize-plan .img-setup-value {
  color: #ffffff !important;
}
#pricing .img-match-card.customize-plan .img-setup-value em {
  color: #a8c0cc !important;
}
#pricing .img-match-card.customize-plan .img-choose-btn {
  background: linear-gradient(135deg, #f29b09 0%, #e08a08 55%, #d4860a 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(242, 155, 9, 0.38) !important;
}
#pricing .img-match-card.customize-plan .img-choose-btn:hover {
  background: linear-gradient(135deg, #e08a08 0%, #d4860a 55%, #c27809 100%) !important;
  box-shadow: 0 12px 26px rgba(242, 155, 9, 0.48) !important;
}



/* WhatsApp float — force visible on all viewports including mobile */
a.wa-float,
.wa-float {
  position: fixed !important;
  right: max(16px, env(safe-area-inset-right, 0px)) !important;
  bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;
  left: auto !important;
  top: auto !important;
  z-index: 99999 !important;
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  min-height: 56px !important;
  border-radius: 50% !important;
  background: #25D366 !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  transform: none !important;
  -webkit-transform: none !important;
}
@media (max-width: 900px) {
  a.wa-float,
  .wa-float {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 99999 !important;
    width: 52px !important;
    height: 52px !important;
    right: max(12px, env(safe-area-inset-right, 0px)) !important;
    bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
  }
}

.body {
    background: red !important;
}