.solutions-hero{position:relative;padding:120px 4%;background:var(--bg-color);overflow:hidden;min-height:80vh;display:flex;align-items:center}.solutions-hero-container{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}.hero-text h1{font-size:3.5rem;line-height:1.1;font-weight:800;margin-bottom:24px;color:var(--text-color)}.hero-text h1 .highlight{background:linear-gradient(135deg,#3b82f6 0,#2563eb 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.hero-text p{font-size:1.25rem;color:var(--text-muted);margin-bottom:32px;max-width:500px;line-height:1.6}.hero-visual{position:relative;perspective:1000px}.hero-visual img{width:100%;height:auto;border-radius:20px;transform:rotateY(-10deg) rotateX(5deg);box-shadow:20px 30px 50px rgba(0,0,0,.1);transition:transform .5s}.hero-visual:hover img{transform:rotateY(0) rotateX(0)}.cta-btn-white{color:#fff;background:#111;padding:16px 40px;border-radius:30px;font-weight:700;text-decoration:none;transition:transform .2s,background .2s}.comparison-section{padding:100px 4%;background:var(--surface-color)}.comparison-container{max-width:1200px;margin:0 auto;display:block}.comparison-container::before{content:none}.section-header{text-align:center;margin-bottom:60px;align-items:center;max-width:900px}.section-header h2{font-size:2.5rem;font-weight:800;color:var(--text-color)}.section-header p{font-size:1.25rem;color:var(--text-muted);margin-top:10px;line-height:1.6}.comparison-wrapper{position:relative;display:flex;border-radius:30px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.15);height:500px;border:4px solid #fff}.comparison-side{flex:1;position:relative;overflow:hidden;transition:.5s}.comparison-side img{width:100%;height:100%;object-fit:cover;transition:transform .5s}.comparison-side:hover{flex:1.5}.comparison-side:hover img{transform:scale(1.05)}.vs-divider{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60px;height:60px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--text-color);box-shadow:0 4px 15px rgba(0,0,0,.1);z-index:10;border:4px solid var(--surface-color)}.comparison-tag{position:absolute;top:20px;left:50%;transform:translateX(-50%);padding:8px 16px;border-radius:20px;font-size:.9rem;font-weight:700;z-index:2;backdrop-filter:blur(10px)}.tag-chaos{background:rgba(255,255,255,.9);color:#4b5563}.tag-clarity{background:rgba(59,130,246,.9);color:#fff}.side-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,rgba(0,0,0,.8),transparent);padding:40px 30px 30px;color:#fff;transform:translateY(20px);opacity:0;transition:.3s}.comparison-side:hover .side-overlay{transform:translateY(0);opacity:1}.side-overlay h3{font-size:1.5rem;margin-bottom:5px}.side-overlay p{font-size:.95rem;opacity:.9}.solutions-grid-section{padding:100px 4%;background:var(--bg-color)}.solutions-wrapper{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:30px}.solution-card{background:var(--surface-color);padding:40px;border-radius:24px;border:1px solid var(--border-color);transition:.3s}.solution-card:hover{border-color:var(--primary-color);box-shadow:0 10px 40px rgba(59,130,246,.1)}.solution-icon{width:60px;height:60px;background:#fff;border-radius:16px;display:flex;align-items:center;justify-content:center;margin-bottom:24px;color:var(--primary-color);box-shadow:0 4px 10px rgba(0,0,0,.05)}.solution-card h3{font-size:1.5rem;margin-bottom:15px;font-weight:700}.solution-card p{color:var(--text-muted);line-height:1.6}.how-it-works{padding:100px 4%;text-align:center;background:var(--hero-bg)}.steps-container{max-width:1000px;margin:60px auto 0;display:flex;justify-content:space-between;position:relative;gap:30px}.steps-line{position:absolute;top:40px;left:10%;width:80%;height:2px;background:var(--border-color);z-index:0}.step-item{position:relative;z-index:1;flex:1}.step-icon{width:80px;height:80px;background:var(--bg-color);border:2px solid var(--border-color);border-radius:50%;margin:0 auto 20px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;color:var(--primary-color);transition:.3s}.step-item:hover .step-icon{border-color:var(--primary-color);background:var(--primary-color);color:#fff}@media (max-width:968px){.solutions-hero-container{grid-template-columns:1fr;text-align:center}.hero-text p{margin:0 auto 32px}.comparison-grid{grid-template-columns:1fr}.steps-container{flex-direction:column;gap:50px}.steps-line{width:2px;height:80%;left:50%;top:0}}

/* ============================================================
   SOLUTIONS.CSS — RESPONSIVE ADDITIONS
   Breakpoints: 968px (extended) | 768px | 480px
   Append-only — no existing rules were modified.
   ============================================================ */

/* ── 968px: extend the existing breakpoint ── */
@media (max-width: 968px) {
  /* Hero: reduce tall padding, release fixed min-height */
  .solutions-hero { padding: 80px 4%; min-height: auto; }
  .solutions-hero-container { gap: 36px; }
  .hero-text h1 { font-size: 2.5rem; }

  /* Comparison: release the hardcoded 500px height, stack sides */
  .comparison-wrapper { flex-direction: column; height: auto; align-items: center; }
  .comparison-side { width: 100%; flex: none; min-height: 280px; }
  /* Disable expand-on-hover — meaningless in stacked layout */
  .comparison-side:hover { flex: none; }
  /* VS divider: switch from absolute (desktop centre) to relative so it
     sits between the two stacked sides without overlapping their content */
  .vs-divider {
    position: relative;
    z-index: 10;
    margin: -28px auto;
    left: auto;
    top: auto;
    transform: none;
    align-self: center;
  }

  /* Solutions grid: minmax(350px,1fr) can still force 2 cols at 750-968px */
  .solutions-wrapper { grid-template-columns: 1fr; width: 100%; }

  /* Section paddings */
  .comparison-section { padding: 70px 4%; }
  .solutions-grid-section { padding: 70px 4%; }
  .how-it-works { padding: 70px 4%; }

  /* Hardcoded max-widths → ensure containers fill available width */
  .section-header { max-width: 100%; width: 100%; }
  .comparison-container { width: 100%; }
}

/* ── 768px: tablet ── */
@media (max-width: 768px) {
  /* Hero */
  .solutions-hero { padding: 64px 5%; }
  .solutions-hero-container { gap: 28px; }
  .hero-text h1 { font-size: 2rem; }
  .hero-text p { font-size: 1.1rem; max-width: 100%; }
  /* 3-D transform clips on narrow viewports — reset it */
  .hero-visual img { transform: none; max-width: 100%; height: auto; }
  .hero-visual:hover img { transform: none; }
  .cta-btn-white { padding: 14px 28px; }

  /* Comparison */
  .comparison-section { padding: 60px 5%; }
  .comparison-wrapper { height: auto; border-radius: 20px; }
  .vs-divider {
    position: relative;
    z-index: 10;
    margin: -28px auto;
    left: auto;
    top: auto;
    transform: none;
    align-self: center;
  }
  .comparison-side { min-height: 240px; width: 100%; }
  .comparison-side img { width: 100%; max-width: 100%; height: 100%; object-fit: cover; }
  .side-overlay { padding: 24px 20px 20px; }
  .side-overlay h3 { font-size: 1.2rem; }
  .side-overlay p { font-size: .9rem; }

  /* Solutions grid */
  .solutions-grid-section { padding: 60px 5%; }
  .solutions-wrapper { grid-template-columns: 1fr; gap: 20px; max-width: 100%; width: 100%; }
  .solution-card { padding: 28px; }

  /* Section header */
  .section-header { margin-bottom: 40px; max-width: 100%; width: 100%; }
  .section-header h2 { font-size: 2rem; }
  .section-header p { font-size: 1.05rem; }

  /* How-it-works */
  .how-it-works { padding: 60px 5%; }
  .steps-container { max-width: 100%; width: 100%; }
  .step-icon { width: 64px; height: 64px; font-size: 1.2rem; }
}

/* ── 480px: mobile ── */
@media (max-width: 480px) {
  /* Hero */
  .solutions-hero { padding: 50px 5%; }
  .solutions-hero-container { gap: 24px; }
  .hero-text h1 { font-size: 1.75rem; line-height: 1.2; }
  .hero-text p { font-size: 1rem; max-width: 100%; }
  .hero-visual img { transform: none; max-width: 100%; height: auto; border-radius: 12px; }
  .hero-visual:hover img { transform: none; }
  .cta-btn-white { padding: 12px 22px; font-size: .95rem; }

  /* Comparison: fully stacked */
  .comparison-section { padding: 50px 5%; }
  .comparison-wrapper {
    flex-direction: column;
    height: auto;
    border-radius: 14px;
    border-width: 2px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
  }
  .comparison-side { min-height: 200px; width: 100%; flex: none; }
  .comparison-side:hover { flex: none; }
  .comparison-side img { width: 100%; max-width: 100%; height: 100%; object-fit: cover; }
  .vs-divider {
    display: none;
  }
  .comparison-tag { font-size: .8rem; padding: 5px 10px; }
  /* Always show overlay — hover is unreliable on touch devices */
  .side-overlay { opacity: 1; transform: translateY(0); padding: 16px 14px 14px; }
  .side-overlay h3 { font-size: 1rem; }
  .side-overlay p { font-size: .82rem; }

  /* Solutions grid */
  .solutions-grid-section { padding: 50px 5%; }
  .solutions-wrapper { grid-template-columns: 1fr; gap: 14px; max-width: 100%; width: 100%; }
  .solution-card { padding: 22px 18px; border-radius: 16px; }
  .solution-icon { width: 48px; height: 48px; border-radius: 12px; margin-bottom: 16px; }
  .solution-card h3 { font-size: 1.2rem; }
  .solution-card p { font-size: .95rem; }

  /* Section header */
  .section-header { margin-bottom: 28px; max-width: 100%; width: 100%; }
  .section-header h2 { font-size: 1.6rem; }
  .section-header p { font-size: .95rem; }

  /* How-it-works */
  .how-it-works { padding: 50px 5%; }
  .steps-container { gap: 28px; max-width: 100%; width: 100%; }
  .step-icon { width: 56px; height: 56px; font-size: 1rem; }
  .step-item p { font-size: .9rem; }
}