* { box-sizing: border-box; }
      html, body { font-family: 'Inter', sans-serif; background: #f5f7fa; color: #1a2d4a; }

      /* Scrollbar */
      ::-webkit-scrollbar { width: 6px; }
      ::-webkit-scrollbar-track { background: #f5f7fa; }
      ::-webkit-scrollbar-thumb { background: #cbd5e8; border-radius: 3px; }

      /* Animations */
      @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(28px); }
        to   { opacity: 1; transform: translateY(0); }
      }
      @keyframes fadeInRight {
        from { opacity: 0; transform: translateX(-28px); }
        to   { opacity: 1; transform: translateX(0); }
      }
      @keyframes fadeInLeft {
        from { opacity: 0; transform: translateX(28px); }
        to   { opacity: 1; transform: translateX(0); }
      }
      @keyframes scaleIn {
        from { opacity: 0; transform: scale(0.92); }
        to   { opacity: 1; transform: scale(1); }
      }
      @keyframes float {
        0%, 100% { transform: translateY(0px); }
        50%       { transform: translateY(-8px); }
      }
      @keyframes shimmer {
        0%   { background-position: -200% center; }
        100% { background-position: 200% center; }
      }
      @keyframes pulse-ring {
        0%   { transform: scale(0.85); opacity: 0.6; }
        100% { transform: scale(1.4);  opacity: 0; }
      }
      @keyframes countUp {
        from { opacity: 0; transform: translateY(10px); }
        to   { opacity: 1; transform: translateY(0); }
      }
      @keyframes drawLine {
        from { stroke-dashoffset: 400; }
        to   { stroke-dashoffset: 0; }
      }
      @keyframes slideDown {
        from { opacity: 0; transform: translateY(-8px); }
        to   { opacity: 1; transform: translateY(0); }
      }

      .animate-fadeInUp     { animation: fadeInUp 0.65s ease both; }
      .animate-fadeInRight  { animation: fadeInRight 0.65s ease both; }
      .animate-fadeInLeft   { animation: fadeInLeft 0.65s ease both; }
      .animate-scaleIn      { animation: scaleIn 0.55s ease both; }
      .animate-float        { animation: float 4s ease-in-out infinite; }
      .animate-slideDown    { animation: slideDown 0.3s ease both; }

      .delay-100 { animation-delay: 0.1s; }
      .delay-200 { animation-delay: 0.2s; }
      .delay-300 { animation-delay: 0.3s; }
      .delay-400 { animation-delay: 0.4s; }
      .delay-500 { animation-delay: 0.5s; }
      .delay-600 { animation-delay: 0.6s; }

      /* Glass card */
      .glass {
        background: rgba(255,255,255,0.7);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid rgba(255,255,255,0.85);
      }
      .glass-dark {
        background: rgba(26,45,74,0.7);
        backdrop-filter: blur(16px);
        border: 1px solid rgba(255,255,255,0.1);
      }

      /* Gradient text */
      .gradient-text {
        background: linear-gradient(135deg, #2b0815 0%, #d81437 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }
      .gradient-text-teal {
        background: linear-gradient(135deg, #d81437 0%, #ff4f67 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }

#flow-chain > * {
  opacity: 0;
  transform: translateX(-24px);
  animation: flowAppear 0.4s ease forwards;
  animation-delay: calc(var(--flow-order, 0) * 0.035s);
}

#flow-chain > *:nth-child(1)  { --flow-order: 0; }
#flow-chain > *:nth-child(2)  { --flow-order: 1; }
#flow-chain > *:nth-child(3)  { --flow-order: 2; }
#flow-chain > *:nth-child(4)  { --flow-order: 3; }
#flow-chain > *:nth-child(5)  { --flow-order: 4; }
#flow-chain > *:nth-child(6)  { --flow-order: 5; }
#flow-chain > *:nth-child(7)  { --flow-order: 6; }
#flow-chain > *:nth-child(8)  { --flow-order: 7; }
#flow-chain > *:nth-child(9)  { --flow-order: 8; }
#flow-chain > *:nth-child(10) { --flow-order: 9; }
#flow-chain > *:nth-child(11) { --flow-order:10; }
#flow-chain > *:nth-child(12) { --flow-order:11; }
#flow-chain > *:nth-child(13) { --flow-order:12; }
#flow-chain > *:nth-child(14) { --flow-order:13; }
#flow-chain > *:nth-child(15) { --flow-order:14; }
#flow-chain > *:nth-child(16) { --flow-order:15; }
#flow-chain > *:nth-child(17) { --flow-order:16; }
#flow-chain > *:nth-child(18) { --flow-order:17; }

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

      /* Hero bg */
      .hero-bg {
        background: linear-gradient(155deg, #f0f4fb 0%, #e8f0f7 35%, #dff0eb 70%, #f0f4fb 100%);
        position: relative;
        overflow: hidden;
      }
      .hero-bg::before {
        content: '';
        position: absolute;
        top: -200px; right: -200px;
        width: 600px; height: 600px;
        background: radial-gradient(circle, rgba(216,20,55,0.12) 0%, transparent 70%);
        pointer-events: none;
      }
.hero-bg::after {
  content: '';
  position: absolute;
  bottom: -150px; left: -150px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(26,45,74,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.hero-base-badge {
  transition: transform 0.3s ease;
}

.flow-highlight {
  box-shadow: 0 4px 20px rgba(216,20,55,0.35);
}

.strategic-card--dark {
  background: linear-gradient(135deg, #1a2d4a 0%, #24406b 100%);
}
.strategic-card--dark h4,
.strategic-card--dark p {
  color: rgba(255,255,255,0.85);
}
.text-red-accent {
  color: #e85d4a;
}
.sinergo-card {
  box-shadow: 0 8px 48px rgba(26,45,74,0.10);
}

      @media (max-width: 768px) {
        .hero-base-badge {
          position: static !important;
          left: auto;
          bottom: auto;
          transform: none !important;
          margin: 1.25rem auto 0;
        }
        #hero .order-2 .animate-float {
          display: block;
        }
      }

      /* Grid pattern */
      .grid-pattern {
        background-image:
          linear-gradient(rgba(26,45,74,0.04) 1px, transparent 1px),
          linear-gradient(90deg, rgba(26,45,74,0.04) 1px, transparent 1px);
        background-size: 40px 40px;
      }

      /* Cards hover */
      .card-hover {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
      }
      .card-hover:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 40px rgba(26,45,74,0.12);
      }

      /* Nav active */
      .nav-link { position: relative; }
      .nav-link::after {
        content: '';
        position: absolute;
        bottom: -2px; left: 50%;
        width: 0; height: 2px;
        background: #d81437;
        border-radius: 1px;
        transition: width 0.2s ease, left 0.2s ease;
      }
      .nav-link:hover::after, .nav-link.active::after {
        width: 100%; left: 0;
      }
      .nav-link.active { color: #d81437 !important; }

      /* Timeline */
      .timeline-line { stroke-dasharray: 400; stroke-dashoffset: 400; }
      .timeline-line.animated { animation: drawLine 1.5s ease forwards; }

      /* Badge shimmer */
      .badge-shimmer {
        background: linear-gradient(90deg, #d81437 0%, #ff4f67 50%, #d81437 100%);
        background-size: 200% auto;
        animation: shimmer 2.5s linear infinite;
      }

      /* Stat counter */
      .stat-box {
        position: relative;
        overflow: hidden;
      }
      .stat-box::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 3px;
        background: linear-gradient(90deg, #d81437, #ff4f67);
      }

      /* CTA glow */
      .cta-btn {
        position: relative;
        overflow: hidden;
        background: linear-gradient(135deg, #d81437 0%, #ff4f67 100%);
        transition: all 0.2s ease;
      }
      .cta-btn::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, #8e0b26 0%, #d81437 100%);
        opacity: 0;
        transition: opacity 0.2s ease;
      }
      .cta-btn:hover::before { opacity: 1; }
      .cta-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(216,20,55,0.35); }
      .cta-btn:active { transform: translateY(0); }
      .cta-btn span { position: relative; z-index: 1; }

      /* Secondary btn */
      .btn-outline {
        border: 1.5px solid #1a2d4a;
        transition: all 0.2s ease;
      }
      .btn-outline:hover {
        background: #1a2d4a;
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(26,45,74,0.2);
      }

      /* Check icon */
      .check-wrap {
        background: linear-gradient(135deg, #d81437, #ff4f67);
        box-shadow: 0 4px 12px rgba(216,20,55,0.3);
      }

      /* Dark section */
      .dark-section {
        background: linear-gradient(155deg, #1a2d4a 0%, #9d9d9d 60%, #1a3a56 100%);
      }
      .dark-section .text-teal {
        --tw-text-opacity: 1;
        color: rgb(249 232 108);
      }

      /* Process step */
      .process-step { position: relative; }
      .process-step:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 28px; left: calc(100% + 8px);
        width: calc(100% - 16px); height: 2px;
        background: linear-gradient(90deg, #d81437, rgba(216,20,55,0.2));
        z-index: 0;
      }

      /* Input focus */
      input:focus, textarea:focus, select:focus {
        outline: none;
        border-color: #d81437;
        box-shadow: 0 0 0 3px rgba(216,20,55,0.15);
      }

      /* Scroll reveal (JS adds class) */
      .reveal { opacity: 0; transform: translateY(24px); transition: all 0.6s ease; }
      .reveal.visible { opacity: 1; transform: translateY(0); }
      .reveal-left { opacity: 0; transform: translateX(-24px); transition: all 0.6s ease; }
      .reveal-left.visible { opacity: 1; transform: translateX(0); }
      .reveal-right { opacity: 0; transform: translateX(24px); transition: all 0.6s ease; }
      .reveal-right.visible { opacity: 1; transform: translateX(0); }

      /* Tooltip */
      .tooltip { position: relative; }
      .tooltip-text {
        position: absolute;
        bottom: calc(100% + 8px);
        left: 50%; transform: translateX(-50%);
        background: #1a2d4a;
        color: white;
        font-size: 12px;
        padding: 6px 12px;
        border-radius: 6px;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
        z-index: 10;
      }
      .tooltip-text::after {
        content: '';
        position: absolute;
        top: 100%; left: 50%; transform: translateX(-50%);
        border: 5px solid transparent;
        border-top-color: #1a2d4a;
      }
      .tooltip:hover .tooltip-text { opacity: 1; }

      /* Accordion */
      .accordion-body { max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.3s ease; }
      .accordion-body.open { max-height: 300px; }
#faq .accordion-item {
  opacity: 0;
  transform: translateY(18px);
  animation: faqAppear 0.33s ease forwards;
  animation-delay: calc(var(--faq-order, 0) * 0.28s);
}
#faq .accordion-item:nth-child(1) { --faq-order:0; }
#faq .accordion-item:nth-child(2) { --faq-order:1; }
#faq .accordion-item:nth-child(3) { --faq-order:2; }
#faq .accordion-item:nth-child(4) { --faq-order:3; }
#faq .accordion-item:nth-child(5) { --faq-order:4; }
#faq .accordion-item:first-child .accordion-icon {
  transform: rotate(180deg);
}
      @keyframes faqAppear {
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      /* Mobile menu */
      #mobile-menu { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
      #mobile-menu.open { max-height: 400px; }

      /* Steps connector */
      .step-connector { flex: 1; height: 2px; background: linear-gradient(90deg, #d8143733, #d81437); margin: 0 12px; margin-top: 28px; }

      /* Tag */
      .tag {
        display: inline-flex; align-items: center; gap: 6px;
        background: rgba(216,20,55,0.1); color: #d81437;
        border: 1px solid rgba(216,20,55,0.25);
        padding: 4px 12px; border-radius: 20px;
        font-size: 12px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
      }

      /* Pain card accent */
      .pain-card { border-left: 4px solid transparent; transition: all 0.2s ease; }
      .pain-card:hover { border-left-color: #e85d4a; }
      .pain-card:hover .pain-num { background: #e85d4a; color: white; }

      /* Solution card accent */
      .sol-card { border-left: 4px solid transparent; transition: all 0.2s ease; }
      .sol-card:hover { border-left-color: #d81437; }