/* ========================
   Variables (re-used values)
   ======================== */
:root{
    /* Colors */
    --iq-white: #ffffff;
    --iq-border: #E4E4E4;
    --iq-muted: #6E6E79;
    --iq-text: #1A1A1A;
    --iq-text-strong: #15131E;
    --iq-primary: #007AFF;
    --iq-accent-green: #48B853;
    --iq-accent-blue-bg: #EBF4FF;
    --iq-accent-green-bg: #E2F4E4;
    --iq-accent-orange-bg: #F9ECDC;
    --iq-accent-red-bg: #FFEBEB;
    --iq-accent-sky-bg: #F0F9FF;
    --iq-note-bg: #FFFAEB;
    --iq-light-bg: #F5F9FF;
    --iq-light-green-bg: #F3FFF4;
    --iq-light-red-bg: #FFF3F3;
    --iq-icon-border: #C9E3FF;
    --iq-divider: #D8D8D8;
    --iq-muted-2: #565E64;
    /* Radii & spacing */
    --iq-radius-pill: 9999px;
    --iq-radius-lg: 20px;
    --iq-radius-md: 16px;
    --iq-gap-lg: 30px;
    --iq-gap-md: 20px;
    --iq-gap-sm: 10px;
    /* Font sizes (kept numeric values you used) */
    --iq-fs-14: 14px;
    --iq-fs-16: 16px;
    --iq-fs-18: 18px;
    --iq-fs-20: 20px;
    --iq-fs-22: 22px;
    --iq-fs-24: 24px;
    --iq-fs-26: 26px;
    --iq-fs-30: 30px;
    --iq-fs-36: 36px;
    --iq-fs-42: 42px;
    --iq-fs-48: 48px;
}

/* ========================
   Base & Utility
   ======================== */
.border-none{
    border: none !important;
}

/* ========================
   Executive Summary Card
   ======================== */
.executive-summary-card {
    background: var(--iq-white);
    border-bottom: 1px solid var(--iq-border);
    margin-bottom: 50px;
    position: relative;
}

/* Centered text wrapper used in a few places */
.text-center-wrapper {
    text-align: center;
    margin-bottom: 50px;
}

/* ========================
   Badges
   ======================== */
.badge {
    display: inline-block;
    padding: 6px 18px;
    border-radius: var(--iq-radius-pill);
    margin-bottom: 16px;
}

/* Badge backgrounds */
.badge-green { background: var(--iq-accent-green-bg); }
.badge-blue  { background: var(--iq-accent-blue-bg); }
.badge-orange{ background: var(--iq-accent-orange-bg); }
.badge-red   { background: var(--iq-accent-red-bg); }
.badge-sky   { background: var(--iq-accent-sky-bg); }

.badge-text {
    font-size: var(--iq-fs-14);
    font-weight: 600;
    line-height: 18px;
}

/* Badge text colors */
.badge-text-green { color: var(--iq-accent-green); }
.badge-text-blue  { color: var(--iq-primary); }
.badge-text-orange{ color: #FF9A1E; }
.badge-text-red   { color: #FF5353; }
.badge-text-sky   { color: #0EA5E9; }

/* ========================
   Typography
   ======================== */
.main-title {
    color: var(--iq-text);
    font-size: var(--iq-fs-48);
    font-weight: 700;
    margin: 0;
    text-align: center;
}

.section-title {
    color: var(--iq-text);
    font-size: var(--iq-fs-24);
    font-weight: 600;
    margin-bottom: 16px;
}

.subsection-title {
    color: var(--iq-text);
    font-size: var(--iq-fs-20);
    font-weight: 600;
    margin-bottom: 16px;
}

.section-description,
.content-text {
    color: var(--iq-muted);
    font-size: var(--iq-fs-18);
    font-weight: 400;
    line-height: 30px;
}

.content-text {
    line-height: 28px;
    margin-bottom: 20px;
}

.content-section {
    margin-bottom: 20px;
}

/* ========================
   Stats Grid
   ======================== */
.stats-grid {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 30px;
    margin-bottom: 40px;
    flex-wrap: wrap;
    width: 100%;
}

.stat-item {
    flex: 1 1 200px;
    min-width: 150px;
    max-width: 240px;
    text-align: center;
    padding: 10px;
}

.stat-value {
    color: var(--iq-text);
    font-size: var(--iq-fs-26);
    font-weight: 700;
    margin-bottom: 10px;
    /* fixed invalid property from original */
    white-space: nowrap;
}

.stat-label {
    color: var(--iq-muted);
    font-size: var(--iq-fs-20);
    font-weight: 500;
    line-height: 30px;
}

.stat-divider {
    width: 1px;
    height: 60px;
    background: var(--iq-border);
}

/* ========================
   Section Divider & Note
   ======================== */
.section-divider {
    border: none;
    border-top: 1px solid var(--iq-border);
    margin: 40px 0;
}

.note-box {
    background: var(--iq-note-bg);
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.note-text {
    color: var(--iq-text);
    font-size: var(--iq-fs-18);
    line-height: 30px;
    margin: 0;
}

/* ========================
   Section Card
   ======================== */
.section-card {
    background: var(--iq-white);
    border-bottom: 1px solid var(--iq-border);
    margin-bottom: 50px;
    padding: 30px 0;
}

/* ========================
   Feature List
   ======================== */
.feature-item {
    border-bottom: 1px solid var(--iq-border);
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.feature-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
}

.feature-title {
    color: var(--iq-text);
    font-size: var(--iq-fs-20);
    font-weight: 600;
    line-height: 30px;
    margin: 0;
    flex: 1;
}

.feature-hours-wrapper {
    display: flex;
    align-items: center;
    gap: 30px;
}

.feature-hours-container {
    text-align: right;
}

.feature-hours-label {
    color: var(--iq-muted);
    font-size: var(--iq-fs-16);
    font-weight: 500;
}

.feature-hours-value {
    color: var(--iq-text);
    font-size: var(--iq-fs-22);
    font-weight: 600;
}

.feature-details {
    padding-left: 20px;
}

.feature-role {
    color: var(--iq-text);
    font-size: var(--iq-fs-18);
    font-weight: 500;
    line-height: 28px;
    margin-bottom: 4px;
}

.feature-acceptance {
    color: var(--iq-muted);
    font-size: var(--iq-fs-18);
    font-weight: 400;
    line-height: 28px;
    margin: 4px 0;
}

/* ========================
   Advanced Features
   ======================== */
.advanced-features-section {
    margin-top: 20px;
    padding-top: 20px;
}

.advanced-features-title {
    color: var(--iq-text);
    font-size: 22px;
    font-weight: 600;
    line-height: 30px;
    margin: 0 0 16px 0;
}

/* ========================
   Tech & Team Grid
   ======================== */
.tech-team-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 30px;
}

.tech-stack-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.tech-item {
    border: 1px solid var(--iq-border);
    border-radius: 8px;
    padding: 16px;
}
.tech-item:hover{ background-color: #fafafa; } /* preserved hover behavior */

.tech-category {
    color: var(--iq-text);
    font-size: var(--iq-fs-16);
    font-weight: 600;
    margin-bottom: 4px;
}

.tech-list {
    color: var(--iq-muted);
    font-size: var(--iq-fs-14);
    font-weight: 400;
}

.team-role {
    color: var(--iq-text);
    font-size: var(--iq-fs-16);
    font-weight: 600;
    margin-bottom: 4px;
}

/* ========================
   Timeline
   ======================== */
.timeline-phase {
    border-bottom: 1px solid var(--iq-border);
    padding-bottom: 16px;
    margin-bottom: 30px;
}

.timeline-phase-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
    gap: 20px;
}

.timeline-phase-content { flex: 1; }

.timeline-phase-title {
    color: var(--iq-text);
    font-size: var(--iq-fs-20);
    font-weight: 600;
    line-height: 30px;
    margin: 0 0 8px 0;
}

.timeline-phase-description {
    color: var(--iq-muted);
    font-size: var(--iq-fs-18);
    font-weight: 400;
    line-height: 28px;
    margin: 0;
}

.timeline-phase-days { text-align: right; }

.timeline-days-value {
    color: var(--iq-text);
    font-size: var(--iq-fs-36);
    font-weight: 600;
}

/* ========================
   Timeline Cards Section
   ======================== */
.timeline-cards-section {
    background: var(--iq-white);
    margin-bottom: 50px;
}

.timeline-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: 20px;
    margin-bottom: 30px;
    width: 100%;
}

.timeline-card {
    border-radius: 18px;
    padding: 30px;
    text-align: center;
}

.timeline-card-icon {
    width: 54px;
    height: 54px;
    background: var(--iq-white);
    border-radius: 14px;
    margin: 0 auto 18px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.timeline-card-title {
    color: var(--iq-text);
    font-size: var(--iq-fs-18);
    font-weight: 500;
    line-height: 28px;
    margin-bottom: 7px;
}

.timeline-card-duration {
    color: var(--iq-muted);
    font-size: var(--iq-fs-18);
    font-weight: 500;
    line-height: 24px;
    margin: 0;
}

/* Total duration block */
.total-duration-box {
    background: var(--iq-light-bg);
    padding: 20px;
    border-radius: var(--iq-radius-lg);
    text-align: center;
}

.total-duration-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 29px;
}

.total-duration-icon {
    width: 60px;
    height: 60px;
    background: var(--iq-white);
    border-radius: 16px;
    border: 1px solid var(--iq-icon-border);
    display: flex;
    align-items: center;
    justify-content: center;
}

.total-duration-text {
    display: flex;
    align-items: center;
    gap: 10px;
}

.total-duration-label {
    color: var(--iq-text);
    font-size: var(--iq-fs-24);
    font-weight: 500;
}

.total-duration-divider {
    color: var(--iq-divider);
    font-size: var(--iq-fs-24);
}

.total-duration-value {
    color: var(--iq-primary);
    font-size: var(--iq-fs-24);
    font-weight: 700;
}

/* ========================
   Backend Logic & Risks
   ======================== */
.logic-risks-grid {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.logic-risk-card {
    flex: 1;
    min-width: 300px;
    border-radius: var(--iq-radius-lg);
    padding: 30px;
}

/* logic & risk card backgrounds and hover borders */
.logic-card {
    background: var(--iq-light-bg);
    border: 1px solid transparent;
}
.logic-card:hover{ border: 1px solid var(--iq-primary); }

.risk-card {
    border: 1px solid transparent;
    background: var(--iq-light-red-bg);
}
.risk-card:hover{ border: 1px solid #FF5353; }

/* card header & icon */
.card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.card-icon {
    width: 32px;
    height: 32px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logic-icon { background: var(--iq-accent-blue-bg); }
.risk-icon  { background: var(--iq-accent-red-bg); }

/* card body text */
.card-title {
    color: var(--iq-text);
    font-size: var(--iq-fs-18);
    font-weight: 500;
    line-height: 28px;
    margin: 0;
}

/* small consolidation: both logic-card .card-title and risk-card .card-title had margin:0 in original */
.logic-card .card-title,
.risk-card .card-title { margin: 0; }

.card-content {
    color: var(--iq-muted);
    font-size: var(--iq-fs-18);
    font-weight: 400;
    line-height: 36px;
}

/* ========================
   Delivery Process
   ======================== */
.delivery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 21px;
    width: 100%;
    margin: 0 auto;
}

.delivery-card {
    border-radius: 18px;
    padding: 30px;
    text-align: center;
    border: 1px solid transparent;
    transition: transform 0.3s ease;
}

.delivery-card-blue  { background: var(--iq-light-bg); }
.delivery-card-blue:hover  { border: 1px solid var(--iq-primary); }

.delivery-card-red   { background: var(--iq-light-red-bg); }
.delivery-card-red:hover   { border: 1px solid #FF5353; }

.delivery-card-green { background: var(--iq-light-green-bg); }
.delivery-card-green:hover { border: 1px solid var(--iq-accent-green); }

.delivery-icon {
    width: 60px;
    height: 60px;
    background: var(--iq-white);
    border-radius: 16px;
    margin: 0 auto 20px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.delivery-card-title {
    color: var(--iq-text);
    font-size: var(--iq-fs-20);
    font-weight: 500;
    line-height: 28px;
    margin-bottom: 12px;
}

.delivery-card-text {
    color: var(--iq-muted);
    font-size: var(--iq-fs-16);
    font-weight: 400;
    line-height: 24px;
    margin: 0;
}

/* ========================
   Pricing
   ======================== */
.pricing-grid {
    display: flex;
    gap: 20px;
    width: 100%;
}

.budget-card {
    flex: 1 1 100%;
    background: var(--iq-light-bg);
    border-radius: var(--iq-radius-lg);
    padding: 25px 15px;
    text-align: center;
}

.pricing-explanation-card {
    flex: 1 1 100%;
    background: var(--iq-white);
    border: 1px solid var(--iq-border);
    border-radius: var(--iq-radius-lg);
    padding: 20px 15px;
}

.budget-icon {
    width: 75px;
    height: 75px;
    background: var(--iq-accent-blue-bg);
    border-radius: 20px;
    margin: 0 auto 25px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.budget-title {
    color: var(--iq-text);
    font-size: var(--iq-fs-24);
    font-weight: 500;
    margin-bottom: 10px;
}

.budget-value {
    color: var(--iq-primary);
    font-size: var(--iq-fs-30);
    font-weight: 700;
    margin: 0;
}

.pricing-explanation-title {
    color: var(--iq-text);
    font-size: var(--iq-fs-18);
    font-weight: 600;
    margin-bottom: 15px;
}

.pricing-explanation-text {
    color: var(--iq-muted);
    font-size: var(--iq-fs-16);
    font-weight: 400;
    line-height: 26px;
    margin: 0;
}

/* ========================
   Call to Action
   ======================== */
.cta-section {
    background: #E3F4E2;
    border-radius: 300px;
    padding: 80px 30px;
    text-align: center;
    margin-bottom: 50px;
    position: relative;
    overflow: hidden;
}

.cta-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.07;
    background: radial-gradient(ellipse 47.55% 42.01% at 50% 70%, #3A8635 0%, white 100%);
}

.cta-content { position: relative; z-index: 2; }

.cta-badge {
    display: inline-block;
    padding: 3px 20px;
    background: var(--iq-white);
    border-radius: 30px;
    margin-bottom: 10px;
}

.cta-badge-text {
    color: #3A8635;
    font-size: var(--iq-fs-14);
    font-weight: 500;
    line-height: 28px;
}

.cta-title {
    color: var(--iq-text-strong);
    font-size: var(--iq-fs-42);
    font-weight: 500;
    line-height: 60px;
    margin: 22px auto;
    max-width: 800px;
}

.cta-description {
    color: var(--iq-muted-2);
    font-size: var(--iq-fs-16);
    font-weight: 400;
    line-height: 26px;
    margin-bottom: 40px;
}

.cta-button {
    padding: 26px 40px;
    background: var(--iq-text);
    color: var(--iq-white);
    border: none;
    border-radius: 100px;
    font-size: var(--iq-fs-20);
    font-weight: 600;
    letter-spacing: 0.2px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cta-note {
    color: var(--iq-muted);
    font-size: var(--iq-fs-18);
    font-weight: 400;
    line-height: 30px;
    margin: 10px 0 0 0;
}

/* ========================
   Footer
   ======================== */
.footer {
    text-align: center;
    padding: 30px;
    color: #666;
    font-size: var(--iq-fs-14);
}

.footer p { margin: 0; }
.footer p + p { margin-top: 10px; }

/* ========================
   Estimates & misc
   ======================== */
.estimate-container ul { padding-left: 20px; }

/* ========================
   Responsive Breakpoints
   ======================== */

/* <= 377px adjustments */
@media screen and (max-width: 377px) {
    .budget-value { font-size: 24px; }
}

/* <= 545px */
@media screen and (max-width: 545px) {
    .tech-team-grid { grid-template-columns: 1fr; }

    .section-card{ margin-bottom: 25px; }
    
    .total-duration-content { flex-direction: column; gap: 10px; }
    .total-duration-text{ flex-direction: column; gap: 0; align-items: center; }
    .total-duration-divider { display: none; }
    .total-duration-box{ padding: 40px 20px; }
    .total-duration-label{ margin-bottom: 15px; }

    .feature-details{ padding-left: 10px; }
}

/* <= 768px */
@media screen and (max-width: 768px) {

  .cta-section{ padding: 40px 20px; border-radius: 30px; }
  .cta-title { font-size: 24px; line-height: 32px; }
  .cta-button{ font-size: 16px; padding: 16px 24px; }

  .stats-grid { gap: 20px; }
  .stat-item { min-width: 120px; }

  .pricing-grid { flex-direction: column; gap: 25px; }

  .budget-card { flex: 1 1 300px; padding: 30px; }
  .pricing-explanation-card { flex: 1 1 300px; padding: 20px; }

}

/* <= 1200px */
@media screen and (max-width: 1200px) {
  .stat-divider{ display: none; }
}