/* ================================================================= */
/*  CUSTOM SOFTWARE PAGE                                               */
/* ================================================================= */

/* ── Hero ──────────────────────────────────────────────────────────── */
.cs-hero {
  max-width: 1280px;
  margin: 0 auto;
  padding: 50px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.cs-hero.animate-in {
  opacity: 1;
  transform: translateY(0);
}

.cs-hero__image img {
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.cs-hero__icon {
  width: 50px;
  height: auto;
  margin-bottom: 16px;
}

.cs-hero__title {
  font-size: 2rem;
  font-weight: 700;
  color: #222;
  margin-bottom: 12px;
}

.cs-hero__subtitle {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--pepla-orange);
  text-transform: uppercase;
  margin-bottom: 20px;
}

.cs-hero__content p {
  font-size: 1rem;
  line-height: 1.8;
  color: #444;
  margin-bottom: 16px;
}

/* ── Success Process ───────────────────────────────────────────────── */
.cs-process {
  max-width: 1280px;
  margin: 0 auto;
  padding: 50px;
}



.cs-process__heading {
  font-size: 2rem;
  font-weight: 700;
  color: #222;
  margin-bottom: 40px;
}

.cs-process__highlight {
  color: var(--pepla-green);
}

.cs-process__grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
}

.cs-process__steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cs-process__pattern {
  position: relative;
  width: 200px;
  min-height: 400px;
  border-radius: 12px;
  overflow: hidden;
}

.cs-process__pattern canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.cs-process__pattern::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.55);
  pointer-events: none;
  border-radius: 12px;
}

/* ── Step ──────────────────────────────────────────────────────────── */
.cs-step {
  display: flex;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid #eee;
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.cs-step.animate-in {
  opacity: 1;
  transform: translateX(0);
}

.cs-step:last-child {
  border-bottom: none;
}

.cs-step__icon {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cs-step__icon img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.cs-icon {
  width: 56px;
  height: 56px;
}

/* ── SVG Icon Animations ───────────────────────────────────────────── */

/* Idea — sparks pulse */
.cs-icon--idea .cs-icon__spark1 { animation: sparkPulse 2s ease infinite; }
.cs-icon--idea .cs-icon__spark2 { animation: sparkPulse 2s ease 0.4s infinite; }
.cs-icon--idea .cs-icon__spark3 { animation: sparkPulse 2s ease 0.8s infinite; }
.cs-icon--idea .cs-icon__filament { animation: filamentGlow 1.5s ease infinite; }

@keyframes sparkPulse {
  0%, 100% { opacity: 0.2; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.3); }
}
@keyframes filamentGlow {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* Design — blocks fade in/out */
.cs-icon--design .cs-icon__block1 { animation: blockFade 3s ease infinite; }
.cs-icon--design .cs-icon__block2 { animation: blockFade 3s ease 0.5s infinite; }
.cs-icon--design .cs-icon__block3 { animation: blockFade 3s ease 1s infinite; }
.cs-icon--design .cs-icon__block4 { animation: blockFade 3s ease 1.5s infinite; }

@keyframes blockFade {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 0.6; }
}

/* Back and forth — arrows slide */
.cs-icon--backforth .cs-icon__arrow-r { animation: slideRight 2.5s ease infinite; }
.cs-icon--backforth .cs-icon__arrow-l { animation: slideLeft 2.5s ease infinite; }
.cs-icon--backforth .cs-icon__dot1 { animation: dotPulse 2.5s ease infinite; }
.cs-icon--backforth .cs-icon__dot2 { animation: dotPulse 2.5s ease 1.25s infinite; }

@keyframes slideRight {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}
@keyframes slideLeft {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-4px); }
}
@keyframes dotPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* Code — brackets pulse, slash blinks */
.cs-icon--code .cs-icon__bracket-l { animation: bracketLeft 2s ease infinite; }
.cs-icon--code .cs-icon__bracket-r { animation: bracketRight 2s ease infinite; }
.cs-icon--code .cs-icon__slash { animation: slashBlink 2s ease infinite; }

@keyframes bracketLeft {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-2px); }
}
@keyframes bracketRight {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(2px); }
}
@keyframes slashBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* Testing — checks draw in */
.cs-icon--testing .cs-icon__check1 {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: checkDraw 2s ease infinite;
}
.cs-icon--testing .cs-icon__check2 {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: checkDraw 2s ease 0.5s infinite;
}

@keyframes checkDraw {
  0% { stroke-dashoffset: 30; }
  50%, 100% { stroke-dashoffset: 0; }
}

/* Launch — flame flickers */
.cs-icon--launch .cs-icon__flame1 { animation: flameFlicker 0.8s ease infinite; }
.cs-icon--launch .cs-icon__flame2 { animation: flameFlicker 0.6s ease 0.2s infinite; }
.cs-icon--launch .cs-icon__rocket { animation: rocketHover 2s ease infinite; }

@keyframes flameFlicker {
  0%, 100% { opacity: 1; transform: scaleY(1); }
  50% { opacity: 0.5; transform: scaleY(0.85); }
}
@keyframes rocketHover {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

/* Success — rings pulse outward */
.cs-icon--success .cs-icon__target-outer { animation: ringPulse 3s ease infinite; }
.cs-icon--success .cs-icon__target-mid { animation: ringPulse 3s ease 0.5s infinite; }
.cs-icon--success .cs-icon__target-inner { animation: ringPulse 3s ease 1s infinite; }
.cs-icon--success .cs-icon__bullseye { animation: bullseyePulse 2s ease infinite; }

@keyframes ringPulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}
@keyframes bullseyePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}

.cs-step__content h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #222;
  margin-bottom: 8px;
}

.cs-step__content p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #555;
}

/* Analysis — scan lines */
.cs-icon--analysis .cs-icon__scan1 { animation: scanFade 2s ease infinite; }
.cs-icon--analysis .cs-icon__scan2 { animation: scanFade 2s ease 0.3s infinite; }
.cs-icon--analysis .cs-icon__scan3 { animation: scanFade 2s ease 0.6s infinite; }

@keyframes scanFade {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.8; }
}

/* Estimation — clock hand rotates */
.cs-icon--estimation .cs-icon__hand {
  transform-origin: 30px 30px;
  animation: clockSweep 4s linear infinite;
}

@keyframes clockSweep {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Check-in — calendar pulses */
.cs-icon--checkin .cs-icon__calendar { animation: calendarPulse 2.5s ease infinite; }

@keyframes calendarPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* Monitor — heartbeat pulses */
.cs-icon--monitor .cs-icon__heartbeat {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: heartbeatDraw 2.5s ease infinite;
}

@keyframes heartbeatDraw {
  0% { stroke-dashoffset: 120; }
  60%, 100% { stroke-dashoffset: 0; }
}

/* ── Methodology Section ───────────────────────────────────────────── */
.cs-methodology {
  max-width: 1280px;
  margin: 0 auto;
  padding: 50px;
}



.cs-methodology__heading {
  font-size: 2rem;
  font-weight: 700;
  color: #222;
  margin-bottom: 40px;
}

.cs-methodology__layout {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 50px;
  align-items: start;
}

.cs-methodology__text p {
  font-size: 1.05rem;
  line-height: 1.8;
  color: #444;
  margin-bottom: 20px;
}

.cs-methodology__cycle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* Agile cycle ring */
.cs-methodology__ring {
  width: 300px;
  height: 300px;
}

.cs-cycle { width: 100%; height: 100%; }

.cs-arc--green  { animation: arcReveal 1s ease 0.2s both; }
.cs-arc--orange { animation: arcReveal 1s ease 0.4s both; }
.cs-arc--blue   { animation: arcReveal 1s ease 0.6s both; }
.cs-arc--purple { animation: arcReveal 1s ease 0.8s both; }
.cs-arc--teal   { animation: arcReveal 1s ease 1.0s both; }

@keyframes arcReveal {
  from { opacity: 0; stroke-width: 0; }
  to   { opacity: 1; stroke-width: 8; }
}

.cs-cycle-arrow {
  transform-origin: 150px 150px;
  animation: arrowSpin 8s linear infinite;
}

@keyframes arrowSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.cs-methodology__principles {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cs-methodology__principle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #333;
}

.cs-methodology__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Technology Section ─────────────────────────────────────────────── */
.cs-tech {
  max-width: 1280px;
  margin: 0 auto;
  padding: 50px;
}


.cs-tech__heading {
  font-size: 2rem;
  font-weight: 700;
  color: #222;
  margin-bottom: 16px;
}

.cs-tech__intro {
  font-size: 1.05rem;
  line-height: 1.8;
  color: #444;
  margin-bottom: 40px;
  max-width: 800px;
}

.cs-tech__group-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #222;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 24px;
  padding-bottom: 8px;
  border-bottom: 3px solid #ccc;
  display: inline-block;
}

.cs-tech__group-title--green  { border-bottom-color: var(--pepla-green); }
.cs-tech__group-title--orange { border-bottom-color: var(--pepla-orange); }
.cs-tech__group-title--blue   { border-bottom-color: var(--pepla-blue); }

.cs-tech__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 50px;
}

.cs-tech__card {
  background: #fff;
  border-radius: 12px;
  padding: 28px 20px;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.2s ease;
}

.cs-tech__card.animate-in {
  opacity: 1;
  transform: translateY(0);
}

.cs-tech__card:nth-child(1) { transition-delay: 0s; }
.cs-tech__card:nth-child(2) { transition-delay: 0.1s; }
.cs-tech__card:nth-child(3) { transition-delay: 0.2s; }
.cs-tech__card:nth-child(4) { transition-delay: 0.3s; }

.cs-tech__card:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}

.cs-tech__icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 16px;
}

.cs-tech-icon {
  width: 100%;
  height: 100%;
}

.cs-tech__card h4 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #222;
  margin-bottom: 10px;
}

.cs-tech__card p {
  font-size: 0.85rem;
  line-height: 1.6;
  color: #555;
}

.cs-tech__grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

/* ── Tech Icon Animations ──────────────────────────────────────────── */

/* React — orbits rotate */
.cs-tech-icon--react ellipse:nth-child(1) { animation: orbitSpin 8s linear infinite; transform-origin: 30px 30px; }
.cs-tech-icon--react ellipse:nth-child(2) { animation: orbitSpin 8s linear 0.5s infinite; transform-origin: 30px 30px; }
.cs-tech-icon--react ellipse:nth-child(3) { animation: orbitSpin 8s linear 1s infinite; transform-origin: 30px 30px; }
.cs-tech-icon--react .cs-tech__core { animation: corePulse 2s ease infinite; }

@keyframes orbitSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes corePulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* Flutter — blades shimmer */
.cs-tech-icon--flutter .cs-tech__flutter1 { animation: flutterShimmer 2.5s ease infinite; }
.cs-tech-icon--flutter .cs-tech__flutter2 { animation: flutterShimmer 2.5s ease 0.3s infinite; }
.cs-tech-icon--flutter .cs-tech__flutter3 { animation: flutterShimmer 2.5s ease 0.6s infinite; }

@keyframes flutterShimmer {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* Angular — shield breathes */
.cs-tech-icon--angular .cs-tech__shield {
  animation: shieldPulse 3s ease infinite;
}

@keyframes shieldPulse {
  0%, 100% { opacity: 0.08; }
  50% { opacity: 0.18; }
}

/* Vue — outer breathes */
.cs-tech-icon--vue .cs-tech__vue-outer { animation: vueBreathe 3s ease infinite; }
.cs-tech-icon--vue .cs-tech__vue-inner { animation: vueBreathe 3s ease 0.5s infinite; }

@keyframes vueBreathe {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* C# — C draws in */
.cs-tech-icon--csharp .cs-tech__csharp-c {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: csharpDraw 3s ease infinite;
}

@keyframes csharpDraw {
  0% { stroke-dashoffset: 120; }
  40%, 100% { stroke-dashoffset: 0; }
}

/* Java — steam rises */
.cs-tech-icon--java .cs-tech__steam1 { animation: steamRise 2s ease infinite; }
.cs-tech-icon--java .cs-tech__steam2 { animation: steamRise 2s ease 0.5s infinite; }

@keyframes steamRise {
  0% { opacity: 0.8; transform: translateY(0); }
  50% { opacity: 0.3; transform: translateY(-4px); }
  100% { opacity: 0.8; transform: translateY(0); }
}

/* PHP — rack lights blink */
.cs-tech-icon--php .cs-tech__php-rack1 { animation: rackSlide 2.5s ease infinite; }
.cs-tech-icon--php .cs-tech__php-rack2 { animation: rackSlide 2.5s ease 0.3s infinite; }
.cs-tech-icon--php .cs-tech__php-rack3 { animation: rackSlide 2.5s ease 0.6s infinite; }
.cs-tech-icon--php .cs-tech__php-blink { animation: indicatorBlink 1.2s ease infinite; }

@keyframes rackSlide {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.7; }
}
@keyframes indicatorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}

/* Python — snakes alternate */
.cs-tech-icon--python .cs-tech__snake1 { animation: snakeFade 3s ease infinite; }
.cs-tech-icon--python .cs-tech__snake2 { animation: snakeFade 3s ease 1.5s infinite; }

@keyframes snakeFade {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* Sitecore — diamond rotates, blocks cascade */
.cs-tech-icon--sitecore .cs-tech__sc-diamond { animation: scDiamondPulse 4s ease infinite; }
.cs-tech-icon--sitecore .cs-tech__sc-block1 { animation: scBlockFade 2.5s ease infinite; }
.cs-tech-icon--sitecore .cs-tech__sc-block2 { animation: scBlockFade 2.5s ease 0.3s infinite; }
.cs-tech-icon--sitecore .cs-tech__sc-block3 { animation: scBlockFade 2.5s ease 0.6s infinite; }

@keyframes scDiamondPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
@keyframes scBlockFade {
  0%, 100% { opacity: 0.2; transform: translateY(0); }
  50% { opacity: 0.8; transform: translateY(-2px); }
}

/* Strapi — rocket hovers with flickering exhaust */
.cs-tech-icon--strapi .cs-tech__strapi-rocket { animation: strapiHover 2.5s ease infinite; }
.cs-tech-icon--strapi .cs-tech__strapi-flame1 { animation: strapiFlame 0.8s ease infinite; }
.cs-tech-icon--strapi .cs-tech__strapi-flame2 { animation: strapiFlame 0.6s ease 0.15s infinite; }
.cs-tech-icon--strapi .cs-tech__strapi-flame3 { animation: strapiFlame 0.8s ease 0.3s infinite; }

@keyframes strapiHover {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes strapiFlame {
  0%, 100% { opacity: 0.6; transform: scaleY(1); }
  50% { opacity: 0.2; transform: scaleY(0.7); }
}

/* Drupal — droplet ripple */
.cs-tech-icon--drupal .cs-tech__drop { animation: dropBreathe 3s ease infinite; }
.cs-tech-icon--drupal .cs-tech__droplet1 { animation: dropletRipple 2.5s ease infinite; }
.cs-tech-icon--drupal .cs-tech__droplet2 { animation: dropletRipple 2.5s ease 0.5s infinite; }
@keyframes dropBreathe {
  0%, 100% { stroke-width: 2.5; }
  50% { stroke-width: 3; }
}
@keyframes dropletRipple {
  0%, 100% { opacity: 0.15; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.2); }
}

/* SQL Server / MariaDB — middle ring pulses */
.cs-tech-icon--sqlserver .cs-tech__db-mid,
.cs-tech-icon--mariadb .cs-tech__db-mid { animation: dbMidPulse 2.5s ease infinite; }
.cs-tech-icon--mariadb .cs-tech__maria-seal { animation: corePulse 2s ease infinite; }

@keyframes dbMidPulse {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.7; }
}

/* Elasticsearch — bars slide in */
.cs-tech-icon--elastic .cs-tech__elastic-bar1 { animation: elasticSlide 2.5s ease infinite; }
.cs-tech-icon--elastic .cs-tech__elastic-bar2 { animation: elasticSlide 2.5s ease 0.2s infinite; }
.cs-tech-icon--elastic .cs-tech__elastic-bar3 { animation: elasticSlide 2.5s ease 0.4s infinite; }
.cs-tech-icon--elastic .cs-tech__elastic-dot { animation: indicatorBlink 1.2s ease infinite; }

@keyframes elasticSlide {
  0%, 100% { opacity: 0.4; transform: translateX(0); }
  50% { opacity: 0.9; transform: translateX(2px); }
}

/* MongoDB — leaf breathes */
.cs-tech-icon--mongo .cs-tech__mongo-leaf { animation: mongoBreathe 3s ease infinite; }
.cs-tech-icon--mongo .cs-tech__mongo-stem { animation: filamentGlow 2s ease infinite; }

@keyframes mongoBreathe {
  0%, 100% { stroke-width: 2.5; }
  50% { stroke-width: 3; }
}

/* RabbitMQ — messages bounce */
.cs-tech-icon--rabbitmq .cs-tech__rabbit-msg1 { animation: rabbitBounce 2s ease infinite; }
.cs-tech-icon--rabbitmq .cs-tech__rabbit-msg2 { animation: rabbitBounce 2s ease 0.5s infinite; }

@keyframes rabbitBounce {
  0%, 100% { opacity: 0.2; transform: translateY(0); }
  50% { opacity: 0.7; transform: translateY(4px); }
}

/* Redis — hexagon pulses */
.cs-tech-icon--redis .cs-tech__redis-shape { animation: redisPulse 3s ease infinite; }
.cs-tech-icon--redis .cs-tech__redis-dot { animation: corePulse 2s ease infinite; }

@keyframes redisPulse {
  0%, 100% { stroke-width: 2.5; opacity: 0.7; }
  50% { stroke-width: 3; opacity: 1; }
}

/* Kafka — links flash */
.cs-tech-icon--kafka .cs-tech__kafka-l1 { animation: kafkaFlash 2s ease infinite; }
.cs-tech-icon--kafka .cs-tech__kafka-l2 { animation: kafkaFlash 2s ease 0.3s infinite; }
.cs-tech-icon--kafka .cs-tech__kafka-l3 { animation: kafkaFlash 2s ease 0.6s infinite; }
.cs-tech-icon--kafka .cs-tech__kafka-l4 { animation: kafkaFlash 2s ease 0.9s infinite; }
.cs-tech-icon--kafka .cs-tech__kafka-hub { animation: corePulse 2.5s ease infinite; }

@keyframes kafkaFlash {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .cs-hero {
    grid-template-columns: 1fr;
  }
  .cs-process__grid {
    grid-template-columns: 1fr;
  }
  .cs-process__pattern {
    display: none;
  }
  .cs-methodology__layout {
    grid-template-columns: 1fr;
  }
  .cs-methodology__cycle {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  .cs-tech__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .cs-tech__grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .cs-hero, .cs-process, .cs-methodology, .cs-tech {
    padding: 50px 20px;
  }
  .cs-tech__grid {
    grid-template-columns: 1fr;
  }
  .cs-hero__title {
    font-size: 1.5rem;
  }
  .cs-step {
    flex-direction: column;
    gap: 12px;
  }
}