:root {
            --brand-a: #d582df;
            --brand-b: #d6d264;
            --brand-c: #f29d5d;
            --brand-d: #38a169;
            --grad-main: linear-gradient(135deg, #d582df, #d6d264);
            --grad-warm: linear-gradient(135deg, #f29d5d, #ea2b16);
            --grad-cool: linear-gradient(135deg, #38a169, #2f855a);
            --surface: #f8f9fc;
            --card-bg: #ffffff;
            --border: #e9ecef;
            --text-dark: #1a202c;
            --text-mid: #4a5568;
            --text-light: #94a3b8;
            --radius-card: 20px;
            --radius-sm: 12px;
            --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.06);
            --shadow-hover: 0 20px 40px -10px rgba(213, 130, 223, 0.22);
        }

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

        body {
            font-family: 'DM Sans', sans-serif;
            background: var(--surface);
            color: var(--text-dark);
        }

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

        /* ── SECTION ── */
        .solutions-section {
            padding: 80px 0;
        }

        /* ── SOLUTION CARDS ── */
        .solutions-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 16px;
            margin-bottom: 32px;
        }

        @media (max-width: 1200px) {
            .solutions-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }

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

        .solution-card {
            background: var(--card-bg);
            border: 2px solid var(--border);
            border-radius: var(--radius-card);
            padding: 28px 16px 20px;
            cursor: pointer;
            text-align: center;
            transition: all .3s cubic-bezier(.4, 0, .2, 1);
            position: relative;
            overflow: hidden;
            box-shadow: var(--shadow-card);
        }

        .solution-card::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--grad-main);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform .3s ease;
        }

        .solution-card:hover,
        .solution-card.active {
            border-color: transparent;
            box-shadow: var(--shadow-hover);
            transform: translateY(-6px);
        }

        .solution-card:hover::after,
        .solution-card.active::after {
            transform: scaleX(1);
        }

        .card-icon-wrap {
            width: 68px;
            height: 68px;
            margin: 0 auto 16px;
            background: linear-gradient(135deg, rgba(213, 130, 223, .12), rgba(214, 210, 100, .12));
            border-radius: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all .3s ease;
        }

        .solution-card:hover .card-icon-wrap,
        .solution-card.active .card-icon-wrap {
            background: var(--grad-main);
            transform: scale(1.08) rotate(6deg);
            box-shadow: 0 10px 20px -5px rgba(213, 130, 223, .35);
        }

        .card-icon-wrap i {
            font-size: 26px;
            background: var(--grad-main);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            transition: all .3s;
        }

        .solution-card:hover .card-icon-wrap i,
        .solution-card.active .card-icon-wrap i {
            -webkit-text-fill-color: #fff;
        }

        .card-title {
            font-family: 'Syne', sans-serif;
            font-size: .92rem;
            font-weight: 700;
            color: var(--text-dark);
            margin-bottom: 10px;
            line-height: 1.35;
        }

        .card-chevron {
            color: var(--text-light);
            font-size: 18px;
            transition: all .3s;
        }

        .solution-card.active .card-chevron {
            transform: rotate(180deg);
            color: var(--brand-d);
        }

        /* ── PANEL ── */
        .solution-panel {
            display: none;
            background: var(--card-bg);
            border-radius: 24px;
            overflow: hidden;
            box-shadow: 0 18px 6px -12px rgba(0, 0, 0, .14);
            border: 1px solid rgba(213, 130, 223, .12);
            margin-bottom: 32px;
            animation: panelIn .4s ease;
        }

        .solution-panel.active {
            display: block;
        }

        @keyframes panelIn {
            from {
                opacity: 0;
                transform: translateY(-12px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Panel Header */
        .panel-header {
            background: var(--grad-main);
            padding: 36px 40px 28px;
            position: relative;
            overflow: hidden;
        }

        .panel-header::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(45deg, rgba(255, 255, 255, .12) 0%, transparent 65%);
            pointer-events: none;
        }

        .panel-header::after {
            content: '';
            position: absolute;
            top: -80px;
            right: -80px;
            width: 280px;
            height: 280px;
            border-radius: 50%;
            background: rgba(255, 255, 255, .07);
            pointer-events: none;
        }

        .panel-badge {
            display: inline-block;
            background: rgba(255, 255, 255, .22);
            backdrop-filter: blur(6px);
            color: #fff;
            font-size: .68rem;
            font-weight: 700;
            letter-spacing: .1em;
            text-transform: uppercase;
            padding: 5px 14px;
            border-radius: 50px;
            margin-bottom: 14px;
            border: 1px solid rgba(255, 255, 255, .2);
        }

        .panel-title {
            font-family: 'Syne', sans-serif;
            font-size: 1.6rem;
            font-weight: 800;
            color: #fff;
            line-height: 1.2;
            margin: 0;
            max-width: 75%;
        }

        .panel-close {
            position: absolute;
            top: 28px;
            right: 28px;
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, .2);
            border: 1px solid rgba(255, 255, 255, .3);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 18px;
            cursor: pointer;
            transition: all .3s;
            z-index: 10;
        }

        .panel-close:hover {
            background: rgba(255, 255, 255, .35);
            transform: rotate(90deg);
        }

        /* Panel Body */
        .panel-body {
            padding: 40px;
        }

        .panel-intro {
            font-size: 1rem;
            color: var(--text-mid);
            line-height: 1.75;
            border-bottom: 1px solid var(--border);
            padding-bottom: 24px;
            margin-bottom: 28px;
        }

        /* Alert / Callout highlight */
        .alert-highlight {
            background: linear-gradient(135deg, rgba(213, 130, 223, .08), rgba(214, 210, 100, .08));
            border-left: 4px solid;
            border-image: var(--grad-main) 1;
            border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
            padding: 14px 18px;
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 32px;
            font-size: .9rem;
            font-weight: 600;
            color: var(--text-dark);
        }

        .alert-highlight i {
            color: var(--brand-a);
            font-size: 1.1rem;
        }

        /* Feature Section */
        .feature-section {
            margin-bottom: 20px;
            padding-bottom: 20px;
            border-bottom: 1px solid var(--border);
        }

        .feature-section:last-child {
            border-bottom: none;
            margin-bottom: 0;
        }

        .section-title {
            display: flex;
            align-items: center;
            gap: 10px;
            font-family: 'Syne', sans-serif;
            font-size: 1rem;
            font-weight: 800;
            color: var(--text-dark);
            margin-bottom: 18px;
        }

        .section-number {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            background: var(--grad-main);
            border-radius: 8px;
            color: #fff;
            font-size: .8rem;
            font-weight: 800;
            flex-shrink: 0;
        }

        .feature-subtitle {
            font-size: .85rem;
            font-weight: 700;
            color: var(--text-dark);
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 7px;
        }

        .feature-subtitle i {
            color: var(--brand-d);
        }

        /* Bullet list */
        .bullet-list {
            list-style: none;
            padding: 0;
            margin: 0 0 20px;
        }

        .bullet-list.two-col {
            columns: 2;
            column-gap: 16px;
        }

        .bullet-list li {
            font-size: .88rem;
            color: var(--text-mid);
            padding-left: 18px;
            position: relative;
            margin-bottom: 8px;
            line-height: 1.5;
            break-inside: avoid;
        }

        .bullet-list li::before {
            content: '';
            position: absolute;
            left: 0;
            top: 7px;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--grad-main);
        }

        /* Note box */
        .note-box {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(234, 43, 22, .06);
            border: 1px solid rgba(234, 43, 22, .15);
            border-radius: var(--radius-sm);
            padding: 10px 16px;
            font-size: .83rem;
            font-weight: 600;
            color: #c0392b;
            margin-bottom: 20px;
        }

        .note-text {
            font-size: .83rem;
            color: var(--text-light);
            font-style: italic;
            margin: 4px 0 0;
        }

        /* Two-col grid within panel */
        .two-col-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
        }

        @media (max-width: 768px) {
            .two-col-grid {
                grid-template-columns: 1fr;
            }
        }

        /* Integration tags */
        .integration-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 12px;
        }

        .integration-tag {
            font-size: .75rem;
            font-weight: 600;
            padding: 5px 14px;
            background: linear-gradient(135deg, rgba(213, 130, 223, .1), rgba(214, 210, 100, .1));
            border: 1px solid rgba(213, 130, 223, .2);
            border-radius: 50px;
            color: #7b3fa0;
        }

        /* KPI grid */
        .kpi-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
        }

        @media (max-width: 768px) {
            .kpi-grid {
                grid-template-columns: 1fr;
            }
        }

        /* Impact section */
        .impact-section {
            background: linear-gradient(135deg, rgba(213, 130, 223, .05), rgba(214, 210, 100, .05));
            border-radius: var(--radius-card);
            padding: 28px;
            margin-bottom: 28px;
        }

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

        @media (max-width: 768px) {
            .impact-grid {
                grid-template-columns: 1fr 1fr;
            }
        }

        .impact-item {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: .88rem;
            font-weight: 600;
            color: var(--text-dark);
        }

        .impact-item i {
            color: var(--brand-d);
            font-size: 1rem;
        }

        /* Comparison box */
        .comparison-box {
            background: var(--surface);
            border-radius: var(--radius-card);
            padding: 28px;
        }

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

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

        .comparison-col {
            border-radius: var(--radius-sm);
            padding: 20px;
        }

        .comparison-col.bad {
            background: rgba(203, 213, 224, .25);
            border: 1px solid #e2e8f0;
        }

        .comparison-col.good {
            background: linear-gradient(135deg, rgba(213, 130, 223, .08), rgba(214, 210, 100, .08));
            border: 1px solid rgba(213, 130, 223, .2);
        }

        .comparison-col h5 {
            font-family: 'Syne', sans-serif;
            font-size: .9rem;
            font-weight: 800;
            margin-bottom: 14px;
            color: var(--text-dark);
        }

        .bullet-list.muted li {
            color: #94a3b8;
        }

        .bullet-list.muted li::before {
            background: #cbd5e0;
        }

        .bullet-list.highlight li {
            color: var(--text-dark);
            font-weight: 600;
        }

        /* ── SIDEBAR ── */
        .panel-sidebar {}

        .feature-box {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-card);
            padding: 22px;
            margin-bottom: 18px;
        }

        .feature-box-title {
            display: flex;
            align-items: center;
            gap: 8px;
            font-family: 'Syne', sans-serif;
            font-size: .9rem;
            font-weight: 800;
            color: var(--text-dark);
            margin-bottom: 16px;
        }

        .feature-box-title i {
            color: var(--brand-d);
        }

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

        .feature-list li {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: .85rem;
            color: var(--text-mid);
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border);
        }

        .feature-list li:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;
        }

        .feature-list li i.fa-check-circle {
            color: var(--brand-d);
        }

        .feature-list li i.fa-arrow-right {
            color: var(--brand-c);
        }

        /* ── Feature Grid ── */
        .feature-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
        }

        @media (max-width: 768px) {
            .feature-grid {
                grid-template-columns: 1fr;
            }
        }

        /* Responsive panel layout */
        .panel-two-col {
            display: grid;
            grid-template-columns: 1fr 300px;
            gap: 40px;
        }

        @media (max-width: 992px) {
            .panel-two-col {
                grid-template-columns: 1fr;
            }
        }

        /* ── SIDEBAR: Business Impact Box ── */
        .sb-impact-box {
            background: linear-gradient(145deg, #1a202c, #2d3748);
            border-radius: var(--radius-card);
            padding: 22px;
            margin-bottom: 18px;
            overflow: hidden;
            position: relative;
        }

        .sb-impact-box::before {
            content: '';
            position: absolute;
            top: -40px;
            right: -40px;
            width: 130px;
            height: 130px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(213, 130, 223, .25), transparent 70%);
            pointer-events: none;
        }

        .sb-impact-header {
            display: flex;
            align-items: center;
            gap: 9px;
            font-family: 'Syne', sans-serif;
            font-size: .9rem;
            font-weight: 800;
            color: #fff;
            margin-bottom: 16px;
            position: relative;
            z-index: 1;
        }

        .sb-impact-header i {
            font-size: 1rem;
            background: var(--grad-main);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .sb-impact-list {
            list-style: none;
            padding: 0;
            margin: 0;
            position: relative;
            z-index: 1;
        }

        .sb-impact-list li {
            display: flex;
            align-items: center;
            gap: 9px;
            font-size: .82rem;
            color: rgba(255, 255, 255, .82);
            padding: 7px 0;
            border-bottom: 1px solid rgba(255, 255, 255, .07);
            font-weight: 500;
        }

        .sb-impact-list li:last-child {
            border-bottom: none;
        }

        .sb-impact-list li i {
            color: #68d391;
            font-size: .85rem;
            flex-shrink: 0;
        }

        /* ── SIDEBAR: Comparison Box ── */
        .sb-compare-box {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-card);
            padding: 22px;
            margin-bottom: 18px;
        }

        .sb-compare-header {
            display: flex;
            align-items: center;
            gap: 9px;
            font-family: 'Syne', sans-serif;
            font-size: .9rem;
            font-weight: 800;
            color: var(--text-dark);
            margin-bottom: 16px;
        }

        .sb-compare-header i {
            background: var(--grad-main);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .sb-compare-col {
            border-radius: var(--radius-sm);
            padding: 14px 16px;
        }

        .sb-compare-col.bad {
            background: rgba(203, 213, 224, .2);
            border: 1px solid #e2e8f0;
            margin-bottom: 0;
        }

        .sb-compare-col.good {
            background: linear-gradient(135deg, rgba(213, 130, 223, .08), rgba(214, 210, 100, .1));
            border: 1px solid rgba(213, 130, 223, .22);
        }

        .sb-compare-label {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: .75rem;
            font-weight: 800;
            font-family: 'Syne', sans-serif;
            margin-bottom: 10px;
            text-transform: uppercase;
            letter-spacing: .06em;
        }

        .sb-compare-col.bad .sb-compare-label {
            color: #94a3b8;
        }

        .sb-compare-col.bad .sb-compare-label i {
            color: #e53e3e;
        }

        .sb-compare-col.good .sb-compare-label {
            color: #7b3fa0;
        }

        .sb-compare-col.good .sb-compare-label i {
            color: var(--brand-d);
        }

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

        .sb-compare-list li {
            font-size: .8rem;
            padding: 4px 0;
            border-bottom: 1px solid rgba(0, 0, 0, .05);
        }

        .sb-compare-list li:last-child {
            border-bottom: none;
        }

        .sb-compare-list.muted li {
            color: #94a3b8;
            text-decoration: line-through;
        }

        .sb-compare-list.highlight li {
            color: var(--text-dark);
            font-weight: 600;
        }

        .sb-compare-divider {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 10px 0;
            position: relative;
        }

        .sb-compare-divider::before {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            top: 50%;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(213, 130, 223, .3), transparent);
        }

        .sb-compare-divider span {
            background: #fff;
            border: 1px solid rgba(213, 130, 223, .25);
            border-radius: 50px;
            padding: 2px 10px;
            font-size: .68rem;
            font-weight: 800;
            letter-spacing: .06em;
            color: var(--brand-a);
            position: relative;
            z-index: 1;
        }

        /* Divider utility */
        .grad-divider {
            height: 3px;
            border-radius: 99px;
            background: var(--grad-main);
            margin: 32px 0;
            opacity: .3;
        }
  .page-head {
    text-align: center;
    padding: 64px 20px 48px;
  }

  .page-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Syne', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--orange);
    background: var(--orange-light);
    border: 1px solid var(--orange-border);
    border-radius: 50px;
    padding: 5px 14px;
    margin-bottom: 18px;
  }

  .page-title {
    font-family: 'Syne', sans-serif;
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 800;
    color: var(--slate-900);
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin-bottom: 14px;
  }

  .page-title em {
    font-style: normal;
    color: var(--green-dark);
  }

  .page-sub {
    font-size: 0.925rem;
    color: var(--slate-600);
    max-width: 480px;
    margin: 0 auto 32px;
    line-height: 1.7;
  }

  /* ── Trial button ── */
  .trial-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Syne', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    color: #fff;
    background: var(--slate-900);
    border: none;
    border-radius: 50px;
    padding: 10px 20px 10px 22px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 6px 20px -4px rgba(15,23,42,0.3);
  }

  .trial-arrow {
    width: 28px; height: 28px;
    background: var(--orange);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem;
    transition: transform 0.22s ease;
    flex-shrink: 0;
  }

  .trial-btn:hover { background: #1e293b; transform: translateY(-1px); }
  .trial-btn:hover .trial-arrow { transform: rotate(45deg); }

  /* ═══════════════════════ GRID ═══════════════════════ */
  .pkg-wrap {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px 80px;
  }

  .pkg-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    align-items: start;
  }

  /* ═══════════════════════ BASE CARD ═══════════════════════ */
  .pkg-card {
    background: #fff;
    border-radius: 20px;
    border: 1.5px solid var(--slate-200);
    overflow: visible;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: box-shadow 0.22s ease, transform 0.22s ease;
    animation: cardIn 0.5s ease both;
  }

  .pkg-card:hover {
    box-shadow: 0 20px 60px -10px rgba(0,0,0,0.13);
    transform: translateY(-4px);
  }

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

  .pkg-card:nth-child(1) { animation-delay: 0.05s; }
  .pkg-card:nth-child(2) { animation-delay: 0.12s; }
  .pkg-card:nth-child(3) { animation-delay: 0.19s; }
  .pkg-card:nth-child(4) { animation-delay: 0.26s; }
  .pkg-card:nth-child(5) { animation-delay: 0.33s; }

  /* ── Color themes ── */
  .card-basic      { background: #fff8f6; border-color: #fcd5bb; }
  .card-silver     { background: #fff;    border-color: var(--slate-200); }
  .card-platinum   {
    background: var(--indigo-light);
    border-color: var(--indigo-border);
    transform: translateY(-10px);
    box-shadow: 0 24px 64px -12px rgba(99,102,241,0.22);
  }
  .card-enterprise { background: var(--green-light); border-color: var(--green-border); }

  .card-platinum:hover { transform: translateY(-14px); }

  /* ── Popular ribbon ── */
  .popular-badge {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--orange);
    color: #fff;
    font-family: 'Syne', sans-serif;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 4px 14px;
    border-radius: 50px;
    white-space: nowrap;
    box-shadow: 0 3px 10px -2px rgba(249,115,22,0.5);
  }

  /* ── Card head ── */
  .card-head {
    padding: 1.5rem 1.4rem 1.1rem;
  }

  .tier-badge {
    display: inline-block;
    font-family: 'Syne', sans-serif;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    border-radius: 6px;
    padding: 5px 12px;
    margin-bottom: 1rem;
  }

  .card-basic    .tier-badge { background: var(--orange); }
  .card-silver   .tier-badge { background: var(--indigo); }
  .card-platinum .tier-badge { background: var(--indigo-dark); }
  .card-enterprise .tier-badge { background: var(--green-dark); }

  .card-price-label {
    font-size: 0.7rem;
    font-weight: 500;
    color: #94a3b8;
    margin-bottom: 3px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .card-price {
    font-family: 'Syne', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--slate-900);
    line-height: 1.1;
    margin-bottom: 3px;
  }

  .card-price-note {
    font-size: 0.72rem;
    color: #94a3b8;
  }

  /* ── Divider ── */
  .card-divider {
    height: 1px;
    margin: 0 1.4rem 1.1rem;
  }

  .card-basic    .card-divider { background: #fcd5bb; }
  .card-silver   .card-divider { background: var(--slate-100); }
  .card-platinum .card-divider { background: var(--indigo-border); }
  .card-enterprise .card-divider { background: var(--green-border); }

  /* ── Features ── */
  .feat-list {
    list-style: none;
    padding: 0 1.4rem;
    margin: 0 0 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.48rem;
    flex: 1;
  }

  .feat-item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 0.775rem;
    color: var(--slate-700);
    line-height: 1.45;
  }

  /* Icon dots */
  .fi-dot {
    width: 18px; height: 18px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.65rem;
    flex-shrink: 0;
    margin-top: 1px;
  }

  .fi-yes  { background: #dcfce7; color: var(--green-dark); }
  .fi-no   { background: #fee2e2; color: #ef4444; }
  .fi-info { background: #fef9c3; color: #ca8a04; }
  .fi-org  { background: var(--orange-light); color: var(--orange); }

  /* Optional tag */
  .feat-optional {
    font-size: 0.6rem;
    background: rgba(249,115,22,0.1);
    color: var(--orange);
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }

  /* ── CTA button ── */
  .card-foot {
    padding: 0 1.4rem 1.4rem;
    margin-top: auto;
  }

  .card-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-family: 'Syne', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 11px 14px 11px 20px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
  }

  .cta-arrow {
    width: 28px; height: 28px;
    background: rgba(255,255,255,0.22);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.78rem;
    transition: transform 0.2s ease, background 0.2s ease;
    flex-shrink: 0;
  }

  .card-cta:hover .cta-arrow {
    transform: rotate(45deg);
    background: rgba(255,255,255,0.38);
  }

  /* Per-tier CTA colors */
  .card-basic    .card-cta { background: var(--orange); box-shadow: 0 4px 14px -4px rgba(249,115,22,0.42); }
  .card-silver   .card-cta { background: var(--orange); box-shadow: 0 4px 14px -4px rgba(249,115,22,0.42); }
  .card-platinum .card-cta { background: var(--indigo-dark); box-shadow: 0 4px 14px -4px rgba(99,102,241,0.42); }
  .card-enterprise .card-cta { background: var(--green-dark); box-shadow: 0 4px 14px -4px rgba(22,163,74,0.42); }

  .card-basic    .card-cta:hover { background: var(--orange-dark); transform: translateY(-1px); }
  .card-silver   .card-cta:hover { background: var(--orange-dark); transform: translateY(-1px); }
  .card-platinum .card-cta:hover { background: #4338ca; transform: translateY(-1px); }
  .card-enterprise .card-cta:hover { background: #15803d; transform: translateY(-1px); }

  /* ── Footer note ── */
  .pkg-footnote {
    text-align: center;
    font-size: 0.78rem;
    color: #94a3b8;
    margin-top: 2rem;
    padding-bottom: 20px;
  }

  .pkg-footnote a {
    color: var(--orange);
    text-decoration: none;
    font-weight: 600;
  }

  /* ═══════════════════════ RESPONSIVE ═══════════════════════ */
  @media (max-width: 1080px) {
    .pkg-grid { grid-template-columns: repeat(2, 1fr); }
    .card-platinum { transform: none; }
    .card-platinum:hover { transform: translateY(-4px); }
  }

  @media (max-width: 600px) {
    .pkg-grid { grid-template-columns: 1fr; }
  }
  /* Stack column for Basic and Audit */
.pkg-stack-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
  height: 100%;
}

.pkg-stack-col .pkg-card {
  width: 100%;
  margin: 0;
}
.pkg-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr; /* 4 columns */
  gap: 18px;
  align-items: start;
}
@media (max-width: 1080px) {
  .pkg-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pkg-stack-col {
    grid-column: span 1;
  }
}

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

  .pkg-stack-col {
    grid-column: span 1;
  }
}
          .colored-img {
              filter: brightness(0) saturate(100%) invert(1);
          }
.title1.fw-semibold {
    font-weight: 900 !important;
    font-size: 2.2rem;
    line-height: 1.2;
    word-break: break-word;
    display: inline-block;
    max-width: 100%;
}

/* Extra large devices (large desktops, 1400px and up) */
@media (min-width: 1400px) {
    .title1.fw-semibold {
        font-size: 3rem;
    }
}

/* Large devices (desktops, 1200px to 1399px) */
@media (min-width: 1200px) and (max-width: 1399px) {
    .title1.fw-semibold {
        font-size: 2.8rem;
    }
}

/* Medium devices (desktops, 992px to 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .title1.fw-semibold {
        font-size: 2.5rem;
    }
}

/* Small devices (tablets, 768px to 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .title1.fw-semibold {
        font-size: 2.2rem;
    }
}

/* Extra small devices (phones, 576px to 767px) */
@media (min-width: 576px) and (max-width: 767px) {
    .title1.fw-semibold {
        font-size: 2rem;
    }
}

/* Extra extra small devices (small phones, 480px to 575px) */
@media (min-width: 480px) and (max-width: 575px) {
    .title1.fw-semibold {
        font-size: 1.8rem;
    }
}

/* Very small devices (small phones, 380px to 479px) */
@media (min-width: 380px) and (max-width: 479px) {
    .title1.fw-semibold {
        font-size: 1.6rem;
    }
}

/* Tiny devices (very small phones, up to 379px) */
@media (max-width: 379px) {
    .title1.fw-semibold {
        font-size: 1.4rem;
    }
}

/* Landscape mode for mobile */
@media (max-width: 767px) and (orientation: landscape) {
    .title1.fw-semibold {
        font-size: 1.9rem;
    }
}

/* Tablet landscape */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .title1.fw-semibold {
        font-size: 2.4rem;
    }
}