:root{
  --cc-max: 1200px;
  --cc-pad: 18px;

  --cc-radius: 18px;
  --cc-radius-sm: 12px;

  --cc-border: 1px solid rgba(0,0,0,.08);
  --cc-soft: rgba(0,0,0,.03);
  --cc-soft-2: rgba(0,0,0,.02);

  --cc-shadow: 0 18px 50px rgba(0,0,0,.12);
  --cc-shadow-sm: 0 10px 24px rgba(0,0,0,.06);

  --cc-text: #111;
  --cc-muted: rgba(0,0,0,.75);
  --cc-bg: #fff;
  --cc-bg-page: #fafafa;
}

/* Base */
*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--cc-bg-page);
  color: var(--cc-text);
}

/* Keep your HTML sections but make them consistent */
section{
  padding: 56px 0;
}

.cc-container{
  max-width: var(--cc-max);
  margin: 0 auto;
  padding: 0 var(--cc-pad);
}

/* Intro / hero-ish section (your .intro exists in HTML) */
.intro{
  position: relative;
  overflow: hidden;
}
.intro::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(1200px 420px at 20% 20%, rgba(10, 160, 255, .18), transparent 55%),
    radial-gradient(900px 380px at 80% 20%, rgba(0, 255, 170, .12), transparent 55%),
    radial-gradient(1000px 420px at 50% 95%, rgba(255, 180, 0, .10), transparent 55%);
  pointer-events:none;
}
.intro > *{
  position: relative;
}

/* Headings and text */
h2{
  font-size: clamp(24px, 2.5vw, 34px);
  line-height: 1.15;
  margin: 0 0 14px;
  letter-spacing: -0.2px;
}
p{
  line-height: 1.85;
  margin: 0 0 14px;
  color: var(--cc-muted);
}

/* Make text blocks look like a premium card */
.intro,
.about-Work,
.our-products,
.why-choose-us,
.seo-keywords{
  background: transparent;
}

/* .intro .cc-container,
.about-Work .cc-container,
.our-products .cc-container,
.why-choose-us .cc-container,
.seo-keywords .cc-container{
} */
.intro{
  padding: 70px 0 54px;
}
.intro h2{
  max-width: 980px;
}
.intro p{
  max-width: 980px;
}
.about-Work,
.why-choose-us,
.seo-keywords{
  background: var(--cc-bg);
}
.about-Work,
.our-products,
.why-choose-us,
.seo-keywords{
  border-top: var(--cc-border);
}
.about-Work,
.our-products,
.why-choose-us,
.seo-keywords{
  border-bottom: var(--cc-border);
}

/* Lists */
.about-Work ul,
.our-products ul{
  margin: 18px 0 18px;
  padding-left: 18px;
}
.about-Work li,
.our-products li{
  margin: 10px 0;
  line-height: 1.75;
  color: var(--cc-muted);
}
.about-Work strong,
.our-products strong{
  color: #111;
}

/* WHY CHOOSE (cards) */
.features-grid{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.feature-box{
  background: #fff;
  border: var(--cc-border);
  border-radius: var(--cc-radius);
  padding: 18px;
  box-shadow: var(--cc-shadow-sm);
}
.feature-box h3{
  margin: 0 0 10px;
  font-size: 1.05rem;
  letter-spacing: -0.2px;
}
.feature-box p{
  margin: 0;
}

/* Image-text split section (you used Tailwind classes on that section - CSS will still win) */
.image-text,
.cc-media-split{
  background: var(--cc-bg-page);
}
.cc-split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}

.cc-split__media{
  border-radius: var(--cc-radius);
  overflow:hidden;
  box-shadow: var(--cc-shadow);
  border: var(--cc-border);
  background: #fff;
}
.cc-split__media img{
  width:100%;
  height: auto;
  display:block;
  object-fit: cover;
}
.cc-split__content h2{
  margin-top: 0;
}
.cc-split__content p{
  color: var(--cc-muted);
}

/* CTA */
.cta{
  background: #111;
  color: #fff;
  text-align: center;
  padding: 60px 0;
}
.cta h2{ color:#fff; }
.cta p{ color: rgba(255,255,255,.88); max-width: 920px; margin: 0 auto 14px; }
.cta a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 16px;
  border-radius: 999px;
  background: #fff;
  color: #111;
  font-weight: 800;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.25);
  transition: transform .15s ease, box-shadow .15s ease;
  margin-top: 6px;
}
.cta a:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(0,0,0,.22);
}

/* SEO keywords section (chips + modal) */
.seo-keywords{
  text-align: center;
  background: var(--cc-bg);
}
.keyword-tags{
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}
.tag-box{ position: relative; }
.tag-label{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  background: var(--cc-soft);
  border: var(--cc-border);
  font-weight: 800;
  cursor:pointer;
  transition: transform .15s ease, background .15s ease;
  color: #111;
}
.tag-label:hover{
  transform: translateY(-1px);
  background: rgba(0,0,0,.05);
}

/* Modal */
.modal-popup{
  display:none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0,0,0,.72);
  overflow:auto;
  padding: 24px 12px;
}

.modal-content{
  background:#fff;
  color:#111;
  margin: 4% auto;
  width: min(900px, 94vw);
  padding: 22px 22px 20px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: var(--cc-shadow);
  position: relative;
  animation: ccFade .22s ease-in-out;
}
@keyframes ccFade{
  from{ opacity:0; transform: translateY(10px) scale(.98); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}
.close-btn{
  position:absolute;
  top: 10px;
  right: 16px;
  font-size: 28px;
  font-weight: 900;
  cursor:pointer;
  color:#111;
}
.modal-content p{
  color: rgba(0,0,0,.78);
  line-height: 1.85;
  margin: 0;
}

/* Responsive */
@media (max-width: 980px){
  section{ padding: 44px 0; }
  .features-grid{ grid-template-columns: 1fr; }
  .cc-split{ grid-template-columns: 1fr; }
  .intro{ padding: 58px 0 44px; }
}

@media (max-width: 520px){
  .tag-label{ font-size: 14px; padding: 10px 12px; }
  .modal-content{ padding: 18px; }
}