/* Comparison Section Styles - Modern Design */
html{ line-height:1.15; }
body{ margin:0; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial; background:#ffffff; color:#0d1117; }

:root{
  --cc-bg:#ffffff;
  --cc-text:#0d1117;
  --cc-muted:#4b5563;
  --cc-border:#e5e7eb;
  --cc-accent:#191818;
  --cc-highlight:#DF1824;
  --cc-gradient: linear-gradient(135deg, #DF1824 0%, #DF1824 100%);
  --cc-card-bg: #fef7f7;
  --cc-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --cc-radius:16px;
  --cc-maxw:1200px;
  --cc-pad: clamp(40px,6vw,80px);
}

.cc-section{ background:var(--cc-bg); padding: var(--cc-pad) 20px 120px; color:var(--cc-text); }
.cc-container{ max-width:var(--cc-maxw); margin:0 auto; }
.cc-head{ max-width:900px; margin:0 auto 60px; text-align:center; display:flex; flex-direction:column; align-items:center; }
.cc-badge{ display:inline-block; background:var(--cc-gradient); color:white; padding:8px 16px; border-radius:20px; font-size:.75rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; margin-bottom:20px; }
.cc-title{ font-size: clamp(2rem,4vw,3rem); line-height:1.1; margin:0 0 20px; font-weight:700; background: var(--cc-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-align:center; }
.cc-intro{ font-size:1.1rem; line-height:1.6; color:var(--cc-muted); margin:0; max-width:700px; text-align:center; }

/* Hero Stats */
.cc-hero-stats{ display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap:30px; margin:60px 0 80px; text-align:center; }
.cc-stat{ padding:30px 20px; background:linear-gradient(135deg, #fef7f7 0%, #fceaea 100%); border-radius:var(--cc-radius); border:1px solid var(--cc-border); display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:140px; }
.cc-stat-number{ font-size:2.5rem; font-weight:700; color:var(--cc-highlight); margin-bottom:8px; }
.cc-stat-label{ font-size:1.1rem; font-weight:600; color:var(--cc-text); margin-bottom:4px; text-align:center; }
.cc-stat-desc{ font-size:.9rem; color:var(--cc-muted); text-align:center; }

/* Core Benefits */
.cc-core-benefits{ margin:80px 0; }
.cc-benefit-primary{ display:flex; align-items:center; gap:30px; margin-bottom:60px; padding:40px; background:linear-gradient(135deg, #fef7f7 0%, #fceaea 100%); border-radius:var(--cc-radius); border:1px solid var(--cc-border); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.cc-benefit-primary:hover{ transform:translateY(-4px); box-shadow: var(--cc-shadow); }
.cc-benefit-icon{ font-size:3rem; flex-shrink:0; }
.cc-benefit-content h3{ font-size:1.4rem; font-weight:600; margin:0 0 12px; color:var(--cc-text); }
.cc-benefit-content p{ margin:0; font-size:1rem; line-height:1.6; color:var(--cc-muted); }

/* Features Grid */
.cc-features-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap:30px; margin:80px 0; }
.cc-feature-card{ padding:30px; background:white; border-radius:var(--cc-radius); border:1px solid var(--cc-border); text-align:center; transition: all 0.3s ease; position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:200px; }
.cc-feature-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--cc-gradient); transform:scaleX(0); transition:transform 0.3s ease; }
.cc-feature-card:hover{ transform:translateY(-4px); box-shadow: var(--cc-shadow); }
.cc-feature-card:hover::before{ transform:scaleX(1); }
.cc-feature-icon{ font-size:2.5rem; margin-bottom:20px; transition:color 0.3s ease; }
.cc-feature-card:hover .cc-feature-icon{ color:var(--cc-highlight); }
.cc-feature-card h4{ font-size:1.2rem; font-weight:600; margin:0 0 12px; color:var(--cc-text); }
.cc-feature-card p{ margin:0; font-size:.95rem; line-height:1.6; color:var(--cc-muted); }

/* Advantages Section */
.cc-advantages{ margin-top:80px; background:linear-gradient(135deg, #fef7f7 0%, #fceaea 100%); border-radius:var(--cc-radius); padding:50px 40px; border:1px solid var(--cc-border); }
.cc-subhead{ text-align:center; font-size:1.8rem; font-weight:700; margin:0 0 40px; color:var(--cc-text); }
.cc-adv-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  max-width: 800px;
  margin: 0 auto;
}
.cc-adv-item{
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background: white;
  border-radius: 12px;
  border: 1px solid var(--cc-border);
  min-height: 120px;
  justify-content: flex-start;
}
.cc-adv-item:nth-child(5){
  grid-column: 1 / -1;
  max-width: 400px;
  margin: 0 auto;
}
.cc-adv-item{ display:flex; align-items:center; gap:20px; padding:20px; background:white; border-radius:12px; border:1px solid var(--cc-border); min-height:120px; justify-content:flex-start; }
.cc-adv-number{ background:var(--cc-gradient); color:white; width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.1rem; flex-shrink:0; }
.cc-adv-content{ font-size:.95rem; line-height:1.6; color:var(--cc-muted); flex:1; }
.cc-adv-content strong{ color:var(--cc-text); }

/* Responsive Design */
@media (max-width: 1024px){
  .cc-features-grid{ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
  .cc-adv-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 768px){
  .cc-section{ padding: var(--cc-pad) 20px 80px; }
  .cc-hero-stats{ grid-template-columns: 1fr; gap:20px; margin:40px 0 60px; }
  .cc-benefit-primary{ flex-direction:column; text-align:center; gap:20px; padding:30px 20px; }
  .cc-benefit-icon{ font-size:2.5rem; }
  .cc-features-grid{ grid-template-columns: 1fr; }
  .cc-advantages{ padding:40px 20px; }
  .cc-title{ font-size: clamp(1.8rem,6vw,2.5rem); }
  .cc-stat{ min-height:120px; }
  .cc-feature-card{ min-height:180px; }
}

@media (max-width: 600px){
  .cc-title{ font-size: clamp(1.6rem,7vw,2.2rem); }
  .cc-intro{ font-size:1rem; }
  .cc-stat-number{ font-size:2rem; }
  .cc-benefit-content h3{ font-size:1.2rem; }
  .cc-feature-card{ padding:25px 20px; }
  .cc-adv-item{ flex-direction:column; text-align:center; gap:15px; }
  .cc-adv-number{ margin:0 auto; }
}