/* How DigiFixer.in Works – extracted from style.css */

/* Section padding and background */
.how-it-works {
    padding: 3.5rem 0 2.5rem 0;
    background: var(--light-bg, #f9fafb);
}

/* Shared row layout */
.how-it-works .steps-row {
    display: flex;
    gap: 2.5rem;
    justify-content: center;
    align-items: stretch;
    margin-top: 2.5rem;
    position: relative;
}

/* Step badge (number circle) */
.how-it-works .step-badge {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color, #4f46e5) 60%, var(--primary-light, #818cf8) 100%);
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    box-shadow: 0 3px 12px rgba(79, 70, 229, 0.16);
    border: 3px solid #fff;
    z-index: 2;
    letter-spacing: 0.01em;
}

/* Icon circle */
.how-it-works .step-icon {
    margin-top: 0.2rem;
    margin-bottom: 1.1rem;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-light, #818cf8) 60%, var(--primary-color, #4f46e5) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.3rem;
    box-shadow: 0 2px 16px rgba(79, 70, 229, 0.11), 0 0 0 10px rgba(79, 70, 229, 0.08);
    position: relative;
    z-index: 1;
    transition: box-shadow 0.24s, transform 0.24s;
}

/* Step link */
.how-it-works .step-link {
    text-decoration: underline;
    color: var(--primary-color, #4f46e5);
    font-weight: 500;
    transition: color 0.18s;
}
.how-it-works .step-link:hover,
.how-it-works .step-link:focus {
    color: var(--primary-dark, #3730a3);
    text-decoration: underline wavy;
    outline: none;
}

/* Step card */
.how-it-works .step-card {
    overflow: visible !important;
    word-break: break-word !important;
    white-space: normal !important;
    max-width: 100vw !important;

    background: linear-gradient(135deg, #fff 85%, #f3f4f6 100%);
    border-radius: var(--border-radius-lg, 18px);
    border-left: 5px solid var(--primary-light, #818cf8);
    border: 1.5px solid var(--border-color, #e5e7eb);
    box-shadow: 0 2px 8px rgba(60, 72, 88, 0.10), 0 8px 32px rgba(79, 70, 229, 0.07), 0 1.5px 0 0 #fff inset;
    padding: 2.3rem 1.7rem 1.8rem 1.5rem;
    min-width: 210px;
    flex: 1 1 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    opacity: 0;
    transform: translateY(36px) scale(0.98);
    animation: fadeUpBlueShadow 0.65s cubic-bezier(0.4,0,0.2,1) forwards;
    margin-bottom: 0;
    transition: box-shadow 0.24s, transform 0.24s, background 0.24s, border-color 0.24s;
}
.how-it-works .step-card:hover,
.how-it-works .step-card:focus-within {
    box-shadow: 0 8px 32px rgba(79, 70, 229, 0.16), 0 2px 12px rgba(60, 72, 88, 0.12);
    border-left: 5px solid var(--primary-color, #4f46e5);
    background: linear-gradient(135deg, #f5f7ff 70%, #fff 100%);
    transform: translateY(-10px) scale(1.017);
}

/* Blue glow behind icon */
.how-it-works .step-card::after {
    content: '';
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    width: 74px;
    height: 38px;
    background: radial-gradient(ellipse at center, rgba(79,70,229,0.13) 0%, rgba(79,70,229,0) 80%);
    z-index: 0;
    filter: blur(5px);
    pointer-events: none;
}

/* Title / text */
.how-it-works .step-title {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 0.7rem;
    color: var(--primary-color, #4f46e5);
    text-align: center;
}
.how-it-works .step-options {
    list-style: none;
    padding: 0;
    margin: 0 0 0.2rem 0;
    color: var(--text-light, #6b7280);
    font-size: 1rem;
}
.how-it-works .step-options li {
    margin-bottom: 0.55em;
    line-height: 1.6;
}

/* Connectors between cards (desktop) */
@media (min-width: 992px) {
    .how-it-works .step-card:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 50%;
        right: -1.25rem;
        width: 2.5rem;
        height: 3px;
        background: linear-gradient(90deg, var(--primary-light, #818cf8) 0%, var(--primary-color, #4f46e5) 100%);
        opacity: 0.25;
        border-radius: 3px;
        transform: translateY(-50%);
        z-index: 0;
    }
}

/* Mobile adjustments */
@media (max-width: 991px) {
    .how-it-works .steps-row {
        flex-direction: column;
        gap: 1.3rem;
    }
    .how-it-works .step-card {
        width: 100%;
        margin-bottom: 1.2rem;
        padding: 1.4rem 0.7rem 1.1rem 0.7rem;
        min-width: 0;
    }
    .how-it-works .step-card:not(:last-child)::after { display: none; }
}

/* Buttons inside steps – match hero buttons */
.how-it-works .btn:not(.btn-sm),
.how-it-works .animate-on-click:not(.btn-sm),
.how-it-works a.btn:not(.btn-sm),
.how-it-works a.animate-on-click:not(.btn-sm) {
    padding: 13px 38px !important;
    font-size: 1.13rem !important;
    min-height: 48px;
    line-height: 1.2;
    border-radius: 8px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@keyframes fadeUpBlueShadow {
    0%   { opacity: 0; transform: translateY(36px) scale(0.98); box-shadow: 0 2px 8px rgba(79,70,229,0.03); }
    80%  { box-shadow: 0 8px 32px rgba(79,70,229,0.10); }
    100% { opacity: 1; transform: translateY(0) scale(1); box-shadow: 0 4px 18px rgba(60,72,88,0.12); }
}

/* --- New Tailwind-Inspired How It Works styles (2025-07-14) --- */

/* CSS Reset similar to Tailwind Preflight */
*,*::before,*::after{box-sizing:border-box;}
html{line-height:1.5;-webkit-text-size-adjust:100%;}
body{margin:0;font-family:'Inter',sans-serif;background-color:#f8fafc;}
h1,h2,h3,h4,h5,h6,p{margin:0;}

/* Hide legacy section */
.how-it-works{display:none!important;}

/* Container */
.how-it-works-section .container{max-width:1280px;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem;}
/* Section Styling */
.how-it-works-section{padding-top:4rem;padding-bottom:4rem;}
/* Section Title */
.how-it-works-section .section-title{text-align:center;}
.how-it-works-section .section-title h2{font-size:2.25rem;font-weight:800;letter-spacing:-0.025em;color:#111827;}
.how-it-works-section .section-title p{margin-top:1rem;font-size:1.125rem;line-height:1.75rem;color:#4b5563;}
/* Steps Grid */
.how-it-works-section .steps-grid{margin-top:4rem;display:grid;grid-template-columns:1fr;gap:3rem 2rem;}
/* Step Card */
.how-it-works-section .step-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: visible;
  word-break: break-word;
  white-space: normal;
  background: linear-gradient(135deg, #fff 82%, #f3f4f6 100%);
  border-radius: 18px;
  border-left: 5px solid #818cf8;
  border: 1.5px solid #e5e7eb;
  box-shadow: 0 2px 8px rgba(60,72,88,.10), 0 8px 32px rgba(79,70,229,.07), 0 1.5px 0 0 #fff inset;
  padding: 2.3rem 1.7rem 1.8rem 1.5rem;
  min-width: 210px;
  min-height: 480px;
  flex: 1 1 220px;
  text-align: center;
  z-index: 1;
  opacity: 0;
  transform: translateY(36px) scale(.98);
  animation: fadeUpBlueShadow .65s cubic-bezier(.4,0,.2,1) forwards;
  transition: box-shadow .24s, transform .24s, background .24s, border-color .24s;
}
/* Elevate hovered card above others */
.how-it-works-section .step-card:hover {z-index: 15;}
.how-it-works-section .step-card:hover,
.how-it-works-section .step-card:focus-within {
  box-shadow: 0 8px 32px rgba(79,70,229,.16), 0 2px 12px rgba(60,72,88,.12);
  border-left: 5px solid #4f46e5;
  background: linear-gradient(135deg, #f5f7ff 70%, #fff 100%);
  transform: scale(1.03);
}

.how-it-works-section .step-card:hover{z-index:15;}
.how-it-works-section .step-card:hover,
.how-it-works-section .step-card:focus-within{box-shadow:0 8px 32px rgba(79,70,229,.16),0 2px 12px rgba(60,72,88,.12);border-left:5px solid #4f46e5;background:linear-gradient(135deg,#f5f7ff 70%,#fff 100%);transform:scale(1.03);}
.how-it-works-section .icon-container {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  height: 4.2rem;
  width: 4.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: #e0e7ff;
  box-shadow: 0 2px 8px 0 rgb(129 140 248 / 0.10);
  margin-bottom: 0.7rem;
}

.how-it-works-section .icon-container svg{height:2.5rem;width:2.5rem;color:#4f46e5;}
.how-it-works-section .step-badge {
  position: absolute;
  top: -0.4rem;
  left: -0.4rem;
  height: 2rem;
  width: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: linear-gradient(135deg,#4f46e5 60%,#818cf8 100%);
  color: #fff;
  font-size: .95rem;
  font-weight: 700;
  box-shadow: 0 0 0 4px #fff;
  border: 3px solid #fff;
}

.how-it-works-section .step-card h3{margin-top:1.25rem;font-size:1.125rem;font-weight:600;color:#111827;}
.how-it-works-section .step-card .subtitle{margin-top:.25rem;font-size:.875rem;color:#6b7280;}
.how-it-works-section .step-card ul {
  margin-top: 1.1rem;
  padding-left: 0;
  list-style: none;
  text-align: left;
  font-size: .98rem;
  color: #4b5563;
  flex-grow: 1;
  margin-bottom: 0.5rem;
}

.how-it-works-section .step-card li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin-bottom: .62rem;
  line-height: 1.7;
}

.how-it-works-section .step-card li a{font-weight:600;color:#4f46e5;text-decoration:none;}
.how-it-works-section .step-card li a:hover{color:#6366f1;}
/* Buttons */
.how-it-works-section .btn-container{margin-top:1.5rem;}
.how-it-works-section .btn{
  transform:none;display:inline-flex;justify-content:center;align-items:center;gap:.4rem;text-align:center;cursor:pointer;width:100%;border:1px solid transparent;border-radius:.5rem;padding:.65rem 1.4rem;font-size:.9rem;font-weight:600;text-decoration:none;box-shadow:0 1px 2px 0 rgb(0 0 0 / .05);transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s;}
.how-it-works-section .btn-primary{background-color:#4f46e5;color:#fff;}
.how-it-works-section .btn-primary:hover{background-color:#4338ca;transform:none;}
.how-it-works-section .btn-secondary{background-color:#ffffff;color:#4f46e5;border:1px solid #c7d2fe;}
.how-it-works-section .btn-secondary:hover{background-color:#f3f4f6;transform:none;}
.how-it-works-section .btn-dark{background-color:#1f2937;color:#fff;}
.how-it-works-section .btn-dark:hover{background-color:#111827;transform:none;}
/* neutralize generic hover translate for any button in section */
.how-it-works-section .btn:hover,
.how-it-works-section .btn:focus{transform:none;}
.how-it-works-section .btn-container.multi-btn {
  display: flex !important;
  flex-direction: column !important;
  gap: .75rem !important;
  align-items: stretch !important;
}
/* Always stack multi-btn vertically, even on desktop */
/* Remove row layout on desktop for multi-btn */
.how-it-works-section .btn {
  min-height: 46px;
  font-size: 1rem;
  font-family: inherit;
  letter-spacing: 0.01em;
  padding: 0.7rem 1.7rem;
  box-sizing: border-box;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / .07);
  outline: none;
}
.how-it-works-section .btn:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}
.how-it-works-section .btn-primary,
.how-it-works-section .btn-secondary,
.how-it-works-section .btn-dark {
  transition: background-color .22s, color .18s, border-color .22s, box-shadow .22s, outline .18s;
}
.how-it-works-section .btn-primary {background-color: #4f46e5; color: #fff; border: none;}
.how-it-works-section .btn-primary:hover, .how-it-works-section .btn-primary:focus-visible {background-color: #4338ca;}
.how-it-works-section .btn-secondary {background-color: #fff; color: #4f46e5; border: 1.5px solid #c7d2fe;}
.how-it-works-section .btn-secondary:hover, .how-it-works-section .btn-secondary:focus-visible {background-color: #f3f4f6; border-color: #818cf8;}
.how-it-works-section .btn-dark {background-color: #1f2937; color: #fff; border: none;}
.how-it-works-section .btn-dark:hover, .how-it-works-section .btn-dark:focus-visible {background-color: #111827;}
.how-it-works-section .btn:active {box-shadow: 0 2px 8px 0 rgb(60 72 88 / 0.13);}
/* Remove transform for all button states */
.how-it-works-section .btn:hover,
.how-it-works-section .btn:focus,
.how-it-works-section .btn:active {transform: none;}

/* Connecting Line for Desktop */
@media (min-width:1024px){
.how-it-works-section .step-card::after{content:'';position:absolute;top:4rem;right:-1rem;width:2rem;height:2px;background-image:linear-gradient(90deg,#818cf8 0%,#4f46e5 100%);opacity:.25;border-radius:3px;background-size:16px 2px;background-repeat:repeat-x;z-index:0;}
.how-it-works-section .steps-grid>.step-card:last-child::after{display:none;}
}
/* Responsive Grid */
@media (min-width:640px){
.how-it-works-section .steps-grid{grid-template-columns:repeat(2,1fr);}
.how-it-works-section .btn-container.multi-btn{flex-direction:row;}
}
@media (min-width:1024px){
.how-it-works-section .steps-grid{grid-template-columns:repeat(4,1fr);}
}