/* ============================================================
       INDEX PAGE REVAMP — INLINE STYLES
       Modern scroll animations, rolling effects, fresh visuals
    ============================================================ */

    :root {
      --revamp-black: #110B20;
      --revamp-blue: #0057FF;
      --revamp-white: #FFFFFF;
      --revamp-cyan: #4CC9F0;
      --revamp-purple: #7B61FF;
      --revamp-pink: #FF6B9D;
      --revamp-yellow: #FFD166;
      --revamp-green: #06D6A0;
      --revamp-cream: #FFF8F0;
      --revamp-lavender: #F3E8FF;
      --revamp-mint: #E0F7FA;
      --revamp-peach: #FFF0E6;
      --revamp-sky: #E0F2FE;
      --revamp-transition: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
      --revamp-radius: 20px;
    }

    /* ──── SCROLL ANIMATION BASE ──── */
    .reveal {
      opacity: 0;
      transform: translateY(50px);
      transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .reveal.visible { opacity: 1; transform: translateY(0); }

    .reveal-left {
      opacity: 0;
      transform: translateX(-60px);
      transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .reveal-left.visible { opacity: 1; transform: translateX(0); }

    .reveal-right {
      opacity: 0;
      transform: translateX(60px);
      transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .reveal-right.visible { opacity: 1; transform: translateX(0); }

    .reveal-scale {
      opacity: 0;
      transform: scale(0.85);
      transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .reveal-scale.visible { opacity: 1; transform: scale(1); }

    .reveal-blur {
      opacity: 0;
      filter: blur(10px);
      transition: all 1.1s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .reveal-blur.visible { opacity: 1; filter: blur(0); }

    .reveal-rotate {
      opacity: 0;
      transform: rotateX(15deg) translateY(40px);
      transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
      transform-origin: center bottom;
    }
    .reveal-rotate.visible { opacity: 1; transform: rotateX(0) translateY(0); }

    .delay-1 { transition-delay: 0.1s; }
    .delay-2 { transition-delay: 0.2s; }
    .delay-3 { transition-delay: 0.3s; }
    .delay-4 { transition-delay: 0.4s; }
    .delay-5 { transition-delay: 0.5s; }

    /* ──── ROLLING TEXT RIBBON ──── */
    .rolling-ribbon {
      background: var(--revamp-black);
      border-top: 1px solid rgba(255,255,255,0.08);
      border-bottom: 1px solid rgba(255,255,255,0.08);
      padding: 24px 0;
      overflow: hidden;
      position: relative;
    }
    .rolling-track {
      display: flex;
      width: max-content;
      animation: rollLeft 30s linear infinite;
    }
    .rolling-track:hover { animation-play-state: paused; }
    .rolling-item {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 0 40px;
      white-space: nowrap;
      font-family: 'Space Grotesk', sans-serif;
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--c-text-muted);
    }
    .rolling-item .dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--revamp-blue);
      animation: pulse-dot 2s ease-in-out infinite;
    }
    .rolling-item:nth-child(3n) .dot { background: var(--revamp-cyan); }
    .rolling-item:nth-child(3n+1) .dot { background: var(--revamp-purple); }
    .rolling-item:nth-child(3n+2) .dot { background: var(--revamp-pink); }
    .rolling-item span { color: var(--revamp-white); }

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

    /* ──── SECTION HEADER ──── */
    .section-header-revamp {
      margin-bottom: 60px;
      text-align: center;
    }
    .section-header-revamp .eyebrow {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--revamp-blue);
      margin-bottom: 16px;
      font-family: 'Space Grotesk', sans-serif;
    }
    .section-header-revamp .eyebrow::before {
      content: '';
      width: 24px; height: 2px;
      background: var(--revamp-blue);
    }
    .section-header-revamp h2 {
      font-family: 'Space Grotesk', sans-serif;
      font-size: clamp(32px, 4.5vw, 56px);
      font-weight: 700;
      line-height: 1.1;
      letter-spacing: -0.03em;
      color: var(--c-text-primary);
      margin-bottom: 16px;
    }
    .section-header-revamp p {
      font-size: 17px;
      line-height: 1.7;
      color: var(--c-text-muted);
      max-width: 600px;
      margin: 0 auto;
    }

    /* ──── SERVICES BENTO GRID ──── */
    .services-bento {
      padding: 40px 1cm;
      background: var(--c-bg-deep);
      position: relative;
      overflow: hidden;
    }
    .services-bento::before {
      content: '';
      position: absolute;
      top: -50%; left: -50%;
      width: 200%; height: 200%;
      background: radial-gradient(circle at 20% 30%, rgba(0,87,255,0.06) 0%, transparent 50%),
                  radial-gradient(circle at 80% 70%, rgba(123,97,255,0.05) 0%, transparent 50%);
      pointer-events: none;
    }
    .services-bento-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr); /* Changed to 4 columns */
      gap: 24px;
      position: relative;
      z-index: 1;
    }
    .bento-card {
      background: var(--c-bg-card);
      border: 3px solid var(--c-text-primary);
      border-radius: var(--revamp-radius);
      padding: 36px 32px;
      transition: var(--revamp-transition);
      position: relative;
      overflow: hidden;
      box-shadow: 8px 8px 0 rgba(0,0,0,0.15);
    }
    .bento-card:hover {
      transform: translateY(-8px) rotate(0.5deg);
      box-shadow: 12px 12px 0 rgba(0,87,255,0.2);
    }
    .bento-card:nth-child(1) { background: linear-gradient(135deg, #FFF8F0 0%, #FFE4D6 100%); }
    .bento-card:nth-child(2) { background: linear-gradient(135deg, #E0F7FA 0%, #B2EBF2 100%); }
    .bento-card:nth-child(3) { background: linear-gradient(135deg, #F3E8FF 0%, #E9D5FF 100%); }
    .bento-card:nth-child(4) { background: linear-gradient(135deg, #E0F2FE 0%, #BAE6FD 100%); }
    .bento-card:nth-child(5) { background: linear-gradient(135deg, #FFF0E6 0%, #FFD6B2 100%); }
    .bento-card:nth-child(6) { background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%); }
    .bento-card:nth-child(7) { background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%); }
    .bento-card:nth-child(8) { background: linear-gradient(135deg, #FCE4EC 0%, #F8BBD0 100%); } /* Added 8th card bg */

    .bento-card .bc-icon {
      width: 56px; height: 56px;
      border-radius: 14px;
      background: var(--revamp-black);
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 20px;
      transition: var(--revamp-transition);
    }
    .bento-card:hover .bc-icon {
      transform: scale(1.1) rotate(-5deg);
    }
    .bento-card .bc-icon svg { color: white; }
    .bento-card h3 {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 22px;
      font-weight: 700;
      color: var(--revamp-black);
      margin-bottom: 12px;
      line-height: 1.2;
    }
    .bento-card p {
      font-size: 14px;
      line-height: 1.65;
      color: #334155;
      margin-bottom: 20px;
    }
    .bento-card .bc-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 20px;
    }
    .bento-card .bc-tags span {
      font-size: 11px;
      font-weight: 600;
      padding: 5px 12px;
      border-radius: 100px;
      border: 2px solid var(--revamp-black);
      background: rgba(255,255,255,0.6);
      color: var(--revamp-black);
    }
    .bento-card .bc-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 700;
      color: var(--revamp-black);
      text-decoration: none;
      transition: gap 0.3s ease;
    }
    .bento-card .bc-link:hover { gap: 14px; }
    .bento-card .bc-link svg { transition: transform 0.3s ease; }
    .bento-card .bc-link:hover svg { transform: translateX(4px); }

    @media (max-width: 900px) {
      .services-bento-grid { grid-template-columns: 1fr; }
      .bento-card:nth-child(4),
      .bento-card:nth-child(5),
      .bento-card:nth-child(6),
      .bento-card:nth-child(7) { grid-column: span 1; }
    }

    /* ──── STATS BAR ──── */
    .stats-bar {
      padding: 40px 1cm;
      background: var(--c-bg-card);
      border-top: 1px solid var(--c-border);
      border-bottom: 1px solid var(--c-border);
    }
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      max-width: 1600px; padding: 0 40px;
      margin: 0 auto;
    }
    .stat-block {
      text-align: center;
      padding: 32px 24px;
      position: relative;
    }
    .stat-block:not(:last-child)::after {
      content: '';
      position: absolute;
      right: 0; top: 20%; bottom: 20%;
      width: 1px;
      background: linear-gradient(to bottom, transparent, var(--c-border), transparent);
    }
    .stat-block .stat-num {
      font-family: 'Space Grotesk', sans-serif;
      font-size: clamp(36px, 4vw, 56px);
      font-weight: 800;
      line-height: 1;
      background: linear-gradient(135deg, var(--c-cyan) 0%, var(--c-blue) 50%, var(--c-purple) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-bottom: 8px;
    }
    .stat-block .stat-label {
      font-size: 13px;
      font-weight: 600;
      color: var(--c-text-muted);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }
    @media (max-width: 700px) {
      .stats-grid { grid-template-columns: repeat(2, 1fr); }
      .stat-block:not(:last-child)::after { display: none; }
    }

    /* ──── WHY CHOOSE ──── */
    .why-revamp {
      padding: 40px 1cm;
      background: var(--c-bg-deep);
      position: relative;
    }
    .why-grid-revamp {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
      max-width: 1600px; padding: 0 40px;
      margin: 0 auto;
    }
    .why-card-revamp {
      background: var(--c-bg-card);
      border: 3px solid var(--c-text-primary);
      border-radius: var(--revamp-radius);
      padding: 40px 36px;
      transition: var(--revamp-transition);
      box-shadow: 8px 8px 0 rgba(0,0,0,0.15);
      position: relative;
      overflow: hidden;
    }
    .why-card-revamp:hover {
      transform: translateY(-6px);
      box-shadow: 12px 12px 0 rgba(0,87,255,0.15);
    }
    .why-card-revamp::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--c-cyan), var(--c-blue), var(--c-purple));
      opacity: 0;
      transition: opacity 0.4s ease;
    }
    .why-card-revamp:hover::before { opacity: 1; }
    .why-card-revamp .why-num {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 48px;
      font-weight: 800;
      color: transparent;
      -webkit-text-stroke: 1.5px var(--c-text-muted);
      line-height: 1;
      margin-bottom: 16px;
      transition: var(--revamp-transition);
    }
    .why-card-revamp:hover .why-num {
      -webkit-text-stroke: 1.5px var(--c-blue);
      color: rgba(37,91,189,0.1);
    }
    .why-card-revamp h3 {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 20px;
      font-weight: 700;
      color: var(--c-text-primary);
      margin-bottom: 12px;
    }
    .why-card-revamp p {
      font-size: 14px;
      line-height: 1.7;
      color: var(--c-text-muted);
    }
    @media (max-width: 700px) {
      .why-grid-revamp { grid-template-columns: 1fr; }
    }

    /* ──── TECH ECOSYSTEM BENTO GRID ──── */
    .tech-ecosystem-section {
      padding: 40px 1cm;
      background: var(--c-bg-deep);
      position: relative;
      overflow: hidden;
    }
    .tech-ecosystem-section::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: radial-gradient(circle at 10% 20%, rgba(76,201,240,0.06) 0%, transparent 40%),
                  radial-gradient(circle at 90% 80%, rgba(123,97,255,0.06) 0%, transparent 40%),
                  radial-gradient(circle at 50% 50%, rgba(0,87,255,0.04) 0%, transparent 50%);
      pointer-events: none;
    }
    .tech-ecosystem-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      max-width: 1600px; padding: 0 40px;
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }
    .tech-ecosystem-grid .tech-card {
      background: var(--c-bg-card);
      border: 3px solid var(--c-text-primary);
      border-radius: 20px;
      padding: 32px 28px;
      transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
      box-shadow: 8px 8px 0 rgba(0,0,0,0.15);
      position: relative;
      overflow: hidden;
    }
    .tech-ecosystem-grid .tech-card:hover {
      transform: translateY(-8px) rotate(0.5deg);
      box-shadow: 12px 12px 0 rgba(0,87,255,0.2);
    }
    .tech-card .tech-card-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 20px;
      padding-bottom: 16px;
      border-bottom: 2px solid var(--c-border);
    }
    .tech-card .tech-card-icon {
      width: 48px; height: 48px;
      border-radius: 14px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      transition: transform 0.4s ease;
    }
    .tech-card:hover .tech-card-icon {
      transform: scale(1.15) rotate(-5deg);
    }
    .tech-card .tech-card-icon svg { color: white; }
    .tech-card .tech-card-title {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 18px;
      font-weight: 700;
      color: var(--c-text-primary);
    }
    .tech-card .tech-card-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .tech-card .tech-chip {
      font-size: 13px;
      font-weight: 600;
      padding: 8px 14px;
      border-radius: 100px;
      border: 2px solid var(--c-text-primary);
      background: rgba(255,255,255,0.5);
      color: var(--c-text-primary);
      transition: all 0.3s ease;
      cursor: default;
    }
    .tech-card:hover .tech-chip {
      background: rgba(255,255,255,0.9);
      transform: translateY(-2px);
    }

    /* Card accent colors */
    .tech-card-frontend { background: linear-gradient(135deg, #E0F7FA 0%, #B2EBF2 100%) !important; }
    .tech-card-frontend .tech-card-icon { background: linear-gradient(135deg, #00BCD4, #0097A7); }
    .tech-card-backend { background: linear-gradient(135deg, #FFF8E1 0%, #FFECB3 100%) !important; }
    .tech-card-backend .tech-card-icon { background: linear-gradient(135deg, #FFC107, #FF9800); }
    .tech-card-mobile { background: linear-gradient(135deg, #F3E5F5 0%, #E1BEE7 100%) !important; }
    .tech-card-mobile .tech-card-icon { background: linear-gradient(135deg, #AB47BC, #8E24AA); }
    .tech-card-cloud { background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%) !important; }
    .tech-card-cloud .tech-card-icon { background: linear-gradient(135deg, #2196F3, #1976D2); }
    .tech-card-ai { background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%) !important; }
    .tech-card-ai .tech-card-icon { background: linear-gradient(135deg, #66BB6A, #43A047); }
    .tech-card-db { background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%) !important; }
    .tech-card-db .tech-card-icon { background: linear-gradient(135deg, #FF7043, #E64A19); }
    .tech-card-devops { background: linear-gradient(135deg, #ECEFF1 0%, #CFD8DC 100%) !important; }
    .tech-card-devops .tech-card-icon { background: linear-gradient(135deg, #607D8B, #455A64); }
    .tech-card-cms { background: linear-gradient(135deg, #E0F2F1 0%, #B2DFDB 100%) !important; }
    .tech-card-cms .tech-card-icon { background: linear-gradient(135deg, #009688, #00796B); }

    .tech-ecosystem-wide {
      grid-column: span 1; /* Changed to span 1 to fit the 2x4 grid (4 above, 4 below) */
    }
    @media (max-width: 900px) {
      .tech-ecosystem-grid { grid-template-columns: repeat(2, 1fr); }
      .tech-ecosystem-wide { grid-column: span 1; }
    }
    @media (max-width: 500px) {
      .tech-ecosystem-grid { grid-template-columns: 1fr; }
    }

    /* ──── INDUSTRIES CASCADE ANIMATION ──── */
    .ind-cascade {
      opacity: 0;
      transform: translateY(60px) rotateX(15deg) scale(0.9);
      transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
      transform-origin: center bottom;
      perspective: 1000px;
    }
    .ind-cascade.visible {
      opacity: 1;
      transform: translateY(0) rotateX(0) scale(1);
    }
    .ind-cascade-d1 { transition-delay: 0.05s; }
    .ind-cascade-d2 { transition-delay: 0.15s; }
    .ind-cascade-d3 { transition-delay: 0.25s; }
    .ind-cascade-d4 { transition-delay: 0.35s; }
    .ind-cascade-d5 { transition-delay: 0.45s; }
    .ind-cascade-d6 { transition-delay: 0.55s; }
    .ind-cascade-d7 { transition-delay: 0.65s; }
    .ind-cascade-d8 { transition-delay: 0.75s; }

    /* ──── INDUSTRIES ──── */
    .industries-revamp {
      padding: 40px 1cm;
      background: var(--c-bg-deep);
      position: relative;
    }
    .industries-grid-revamp {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      max-width: 1600px; padding: 0 40px;
      margin: 0 auto;
    }
    .ind-card {
      background: var(--c-bg-card);
      border: 3px solid var(--c-text-primary);
      border-radius: var(--revamp-radius);
      padding: 32px;
      transition: var(--revamp-transition);
      box-shadow: 8px 8px 0 rgba(0,0,0,0.15);
      cursor: default;
    }
    .ind-card:hover {
      transform: translateY(-8px) rotate(1deg);
      box-shadow: 12px 12px 0 rgba(0,87,255,0.2);
    }
    .ind-card .ind-icon {
      width: 52px; height: 52px;
      border-radius: 14px;
      background: linear-gradient(135deg, var(--c-cyan), var(--c-blue));
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 20px;
      transition: transform 0.4s ease;
    }
    .ind-card:hover .ind-icon { transform: scale(1.15) rotate(-8deg); }
    .ind-card .ind-icon svg { color: var(--revamp-blue); }
    .ind-card h3 {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 18px;
      font-weight: 700;
      color: var(--c-text-primary);
      margin-bottom: 8px;
    }
    .ind-card p {
      font-size: 13px;
      line-height: 1.6;
      color: var(--c-text-muted);
    }
    @media (max-width: 900px) {
      .industries-grid-revamp { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 500px) {
      .industries-grid-revamp { grid-template-columns: 1fr; }
    }

    /* ──── TESTIMONIALS ──── */
    .testimonials-revamp {
      padding: 40px 1cm;
      background: var(--c-bg-card2);
      position: relative;
      overflow: hidden;
    }
    .testimonials-revamp::before {
      content: '';
      position: absolute;
      top: 0; left: 50%;
      transform: translateX(-50%);
      width: 600px; height: 400px;
      background: radial-gradient(ellipse, rgba(0,87,255,0.08) 0%, transparent 70%);
      pointer-events: none;
    }
    .testimonials-grid-revamp {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      max-width: 1600px; padding: 0 40px;
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }
    .testi-card-revamp {
      background: var(--c-bg-card);
      border: 3px solid var(--c-text-primary);
      border-radius: var(--revamp-radius);
      padding: 40px 32px;
      transition: var(--revamp-transition);
      box-shadow: 8px 8px 0 rgba(0,0,0,0.15);
      position: relative;
    }
    .testi-card-revamp:hover {
      transform: translateY(-6px);
      box-shadow: 12px 12px 0 rgba(0,87,255,0.15);
    }
    .testi-card-revamp .quote-mark {
      font-size: 64px;
      line-height: 1;
      color: var(--c-blue);
      opacity: 0.2;
      font-family: Georgia, serif;
      position: absolute;
      top: 16px; left: 24px;
    }
    .testi-card-revamp .testi-rating {
      color: var(--revamp-yellow);
      font-size: 16px;
      letter-spacing: 4px;
      margin-bottom: 16px;
      position: relative;
      z-index: 1;
    }
    .testi-card-revamp .testi-text {
      font-size: 14px;
      line-height: 1.75;
      color: var(--c-text-secondary);
      margin-bottom: 24px;
      position: relative;
      z-index: 1;
    }
    .testi-card-revamp .testi-author strong {
      display: block;
      font-family: 'Space Grotesk', sans-serif;
      font-size: 15px;
      font-weight: 700;
      color: var(--c-text-primary);
    }
    .testi-card-revamp .testi-author span {
      font-size: 12px;
      color: var(--c-text-muted);
    }
    @media (max-width: 900px) {
      .testimonials-grid-revamp { grid-template-columns: 1fr; }
    }

    /* ──── CTA REVAMP ──── */
    .cta-revamp {
      padding: 70px 1cm;
      background: var(--c-bg-deep);
      position: relative;
      overflow: hidden;
    }
    .cta-revamp::before {
      content: '';
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 800px; height: 800px;
      background: radial-gradient(circle, rgba(0,87,255,0.1) 0%, transparent 60%);
      pointer-events: none;
    }
    .cta-revamp-content {
      max-width: 800px;
      margin: 0 auto;
      text-align: center;
      position: relative;
      z-index: 1;
    }
    .cta-revamp h2 {
      font-family: 'Space Grotesk', sans-serif;
      font-size: clamp(32px, 4.5vw, 52px);
      font-weight: 700;
      line-height: 1.1;
      color: var(--c-text-primary);
      margin-bottom: 20px;
    }
    .cta-revamp p {
      font-size: 17px;
      line-height: 1.7;
      color: var(--c-text-muted);
      margin-bottom: 40px;
    }
    .cta-btn-group {
      display: flex;
      justify-content: center;
      gap: 16px;
      flex-wrap: wrap;
    }
    .cta-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 14px 32px;
      border-radius: 100px;
      font-size: 14px;
      font-weight: 700;
      text-decoration: none;
      transition: all 0.3s ease;
      font-family: 'Space Grotesk', sans-serif;
    }
    .cta-btn-primary {
      background: var(--c-text-primary);
      color: var(--c-bg-deep);
      border: 2px solid var(--c-text-primary);
    }
    .cta-btn-primary:hover {
      background: transparent;
      color: var(--c-text-primary);
      transform: translateY(-2px);
    }
    .cta-btn-secondary {
      background: transparent;
      color: var(--c-text-primary);
      border: 2px solid var(--c-border);
    }
    .cta-btn-secondary:hover {
      border-color: var(--c-text-primary);
      transform: translateY(-2px);
    }
    .cta-btn svg { transition: transform 0.3s ease; }
    .cta-btn:hover svg { transform: translateX(4px); }

    /* ──── TRUST BAND ROLLING ──── */
    .trust-band-revamp {
      padding: 15px 1cm 40px;
      background: var(--c-bg-card);
      overflow: hidden;
      border-bottom: 1px solid var(--c-border);
    }
    .trust-label-revamp {
      text-align: center;
      font-size: 2rem !important;
      font-weight: 700 !important;
      letter-spacing: 0.05em !important;
      text-transform: capitalize !important;
      color: #1e293b !important;
      margin-bottom: 32px;
    }
    .trust-rolling-track {
      display: flex;
      width: max-content;
      animation: trustRoll 25s linear infinite;
    }
    .trust-rolling-track:hover { animation-play-state: paused; }
    .trust-roll-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 0 48px;
      white-space: nowrap;
      font-family: 'Space Grotesk', sans-serif;
      font-size: 15px;
      font-weight: 600;
      color: var(--c-text-primary);
      opacity: 0.6;
      transition: opacity 0.3s;
    }
    .trust-roll-item:hover { opacity: 1; }
    .trust-roll-item svg {
      color: var(--c-text-muted);
    }
    @keyframes trustRoll {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    /* ──── COMPARISON SECTION ──── */
    .compare-section {
      padding: 40px 1cm;
      background: var(--c-bg-deep);
      position: relative;
    }
    .compare-table {
      max-width: 1100px;
      margin: 0 auto;
      border: 3px solid var(--c-text-primary);
      border-radius: var(--revamp-radius);
      overflow: hidden;
      box-shadow: 8px 8px 0 rgba(0,0,0,0.15);
      background: var(--c-bg-card);
    }
    .compare-header {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      background: var(--c-bg-card2);
      border-bottom: 3px solid var(--c-text-primary);
    }
    .compare-header .ch-cell {
      padding: 20px 16px;
      font-family: 'Space Grotesk', sans-serif;
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--c-text-primary);
      text-align: center;
      border-right: 1px solid var(--c-border);
    }
    .compare-header .ch-cell:first-child { text-align: left; }
    .compare-header .ch-cell:last-child { border-right: none; }
    .compare-header .ch-cell.ch-bc {
      background: linear-gradient(135deg, var(--c-cyan), var(--c-blue));
      color: white;
      border-right: 3px solid var(--c-text-primary);
    }
    .compare-row {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      border-bottom: 1px solid var(--c-border);
      transition: background 0.3s;
    }
    .compare-row:hover { background: rgba(0,87,255,0.03); }
    .compare-row:last-child { border-bottom: none; }
    .compare-row .cr-cell {
      padding: 16px;
      font-size: 14px;
      color: var(--c-text-secondary);
      text-align: center;
      border-right: 1px solid var(--c-border);
      display: flex; align-items: center; justify-content: center;
    }
    .compare-row .cr-cell:first-child {
      text-align: left;
      justify-content: flex-start;
      font-weight: 600;
      color: var(--c-text-primary);
    }
    .compare-row .cr-cell:last-child { border-right: none; }
    .compare-row .cr-cell.cr-bc {
      background: rgba(37,91,189,0.05);
      border-right: 3px solid var(--c-text-primary);
    }
    .cr-check { color: var(--revamp-green); font-weight: 700; }
    .cr-cross { color: var(--revamp-pink); font-weight: 700; }
    .cr-partial { color: var(--revamp-yellow); font-weight: 700; font-size: 12px; }
    @media (max-width: 700px) {
      .compare-header, .compare-row { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
      .compare-header .ch-cell, .compare-row .cr-cell { font-size: 11px; padding: 12px 8px; }
    }

    /* ──── FLOATING DECORATIONS ──── */
    .float-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(60px);
      pointer-events: none;
      opacity: 0.4;
      animation: orbFloat 8s ease-in-out infinite;
    }
    .float-orb-1 { width: 300px; height: 300px; background: var(--c-blue); top: 10%; right: -5%; animation-delay: 0s; }
    .float-orb-2 { width: 250px; height: 250px; background: var(--c-purple); bottom: 10%; left: -5%; animation-delay: -2s; }
    .float-orb-3 { width: 200px; height: 200px; background: var(--c-cyan); top: 50%; left: 40%; animation-delay: -4s; opacity: 0.2; }

    @keyframes orbFloat {
      0%, 100% { transform: translate(0, 0); }
      33% { transform: translate(20px, -30px); }
      66% { transform: translate(-15px, 15px); }
    }

    /* ──── RESPONSIVE ──── */
    @media (max-width: 768px) {
      .section-header-revamp h2 { font-size: 28px; }
    }
  

    .blog-grid-revamp {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      max-width: 1600px; padding: 0 40px;
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }
    .blog-card-revamp {
      background: var(--c-bg-card);
      border: 3px solid var(--c-text-primary);
      border-radius: var(--revamp-radius);
      padding: 32px;
      transition: var(--revamp-transition);
      box-shadow: 8px 8px 0 rgba(0,0,0,0.15);
      position: relative;
      display: flex;
      flex-direction: column;
    }
    .blog-card-revamp:hover {
      transform: translateY(-6px);
      box-shadow: 12px 12px 0 rgba(0,87,255,0.15);
    }
    .blog-tag {
      font-size: 12px;
      font-weight: 700;
      color: var(--revamp-blue);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      margin-bottom: 12px;
      font-family: 'Space Grotesk', sans-serif;
    }
    .blog-card-revamp h3 {
      font-size: 24px;
      font-weight: 700;
      margin-bottom: 16px;
      color: var(--c-text-primary);
      font-family: 'Space Grotesk', sans-serif;
    }
    .blog-card-revamp p {
      color: var(--c-text-muted);
      font-size: 16px;
      line-height: 1.6;
      margin-bottom: 24px;
      flex-grow: 1;
    }
    @media (max-width: 900px) {
      .blog-grid-revamp { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 600px) {
      .blog-grid-revamp { grid-template-columns: 1fr; }
    }
  
/* --- GLOBAL MOBILE OPTIMIZATION PATCH --- */
@media (max-width: 768px) {
  /* Fix container paddings */
  section, .container, .container-balanced, .container-expanded, .main-content, .hero-container, .content-wrapper {
    padding-left: 15px !important;
    padding-right: 15px !important;
    min-width: 0 !important;
  }
  
  /* Reset rigid min-widths causing overflow or squishing */
  [style*="min-width"], .bento-card, .glass-card, .r-card, .step-card, .folder-box, .glass-box {
    min-width: 0 !important;
    width: 100% !important;
  }
  
  /* Force inline flex containers to wrap */
  [style*="display: flex"] {
    flex-wrap: wrap !important;
  }
  
  /* Force common grid/flex layouts to stack vertically */
  .hero-bubble-layout, .bento-container, .glass-grid, .retail-grid, .hero-container, .zig-zag-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 30px !important;
  }
  
  /* Reduce massive padding inside cards and CTA sections */
  .bento-card, .glass-card, .r-card, .step-card, .folder-box, .bento-glass, .glass-box, .massive-cta, .cta-glass-panel, .retail-cta, .r-cta-content {
    padding: 25px 20px !important;
  }
  
  /* Fix overlapping absolute elements in hero sections (e.g., Shopify page) */
  section > div > div[style*="position: relative; width: 100%; display: flex"] {
    flex-direction: column !important;
    gap: 30px !important;
  }
  
  /* Avoid giant box shadows pushing width */
  .folder-box, .glass-card, .step-card, .bento-card {
    box-shadow: 5px 5px 15px rgba(0,0,0,0.05) !important;
  }
}