/* ==========================================================================
   VV Techsol — engagement model pages
   (it-staff-augmentation, fixed-price-software-development,
    software-development-as-a-service)
   --------------------------------------------------------------------------
   These three pages carry bespoke sections — a 30-day blueprint timeline, a
   consultation panel, a pricing table, a delivery-week loop — that do not
   reduce to the shared components without losing their shape. So the markup
   is left exactly as written and restyled here on the same tokens as the rest
   of the site, rather than being re-rendered into something flatter.

   Loaded after css/home.css and css/inner.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section rhythm — every bespoke section adopts the shared spacing, and the
   backgrounds alternate so long pages keep a readable cadence.
   -------------------------------------------------------------------------- */
.guardrails-section, .plug-in-section, .talent-matrix-section, .blueprint-section,
.vetting-section, .proof-points, .strategic-takeaway, .consultation-section,
.service-faq, .core-engagements, .ai-development-section, .risk-matrix,
.pricing-section, .value-matrix-section, .velocity-loop-section {
    padding: 108px 0; position: relative; background: var(--bg); color: var(--ink);
}
.plug-in-section, .proof-points, .core-engagements, .risk-matrix, .value-matrix-section {
    background: var(--bg-soft);
}
.blueprint-section, .consultation-section {
    background: linear-gradient(180deg, #faf7ff 0%, #ffffff 100%);
}

/* --------------------------------------------------------------------------
   Section headers
   -------------------------------------------------------------------------- */
.section-header {
    max-width: 720px; margin: 0 auto 56px; text-align: center;
}
.section-badge {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px;
    font-family: var(--font-body); font-size: .78rem; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase; color: var(--brand);
    background: none; border: 0; padding: 0;
}
.section-header .section-title {
    font-family: var(--font-display); color: var(--ink);
    font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.14;
}
.section-desc {
    margin: 18px auto 0; color: var(--ink-soft);
    font-size: 1.08rem; line-height: 1.7; max-width: 580px;
}

/* --------------------------------------------------------------------------
   Hero — the same dark violet band the rest of the site opens with
   -------------------------------------------------------------------------- */
.service-hero {
    position: relative; overflow: hidden; color: #fff;
    background: radial-gradient(120% 130% at 50% -20%, #2a1250 0%, #160d28 52%, #0c0812 90%);
    padding: 150px 0 92px; text-align: center;
}
.service-hero .stars-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .45; }
.service-hero-content, .service-hero-text { position: relative; z-index: 2; max-width: 860px; margin: 0 auto; }
.service-hero .hero-badge {
    display: inline-flex; align-items: center; gap: 9px; margin-bottom: 22px;
    padding: 8px 18px; border-radius: var(--r-full);
    background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16);
    font-size: .82rem; font-weight: 600; color: #d8b4fe;
}
.service-hero .hero-badge .badge-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; }
.service-hero-title {
    font-family: var(--font-display); color: #fff;
    font-size: clamp(2.3rem, 4.8vw, 3.7rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.06;
}
.service-hero-title .gradient-text {
    background: linear-gradient(120deg, #c4b5fd, #f0abfc);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
/* Sized absolutely, not as an em of the h1 — the heading is fluid, and a
   relative subtitle shrank to near-unreadable at the small end of the clamp. */
.service-hero-subtitle {
    display: block; margin-top: 16px; font-family: var(--font-body);
    font-size: 1.08rem; font-weight: 500; color: rgba(255, 255, 255, .68); letter-spacing: 0;
}
.service-hero-desc {
    margin: 22px auto 0; max-width: 620px;
    color: var(--on-dark-soft); font-size: 1.12rem; line-height: 1.7;
}
.service-hero-buttons { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 36px; }
.service-hero-buttons .btn-outline { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.28); }
.service-hero-buttons .btn-outline:hover { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.4); }

/* --------------------------------------------------------------------------
   Icon card families — every "icon + heading + copy" grid on these pages
   -------------------------------------------------------------------------- */
.plug-in-grid, .talent-grid, .vetting-grid, .engagements-grid,
.ai-development-grid, .takeaway-grid, .risk-grid, .value-stacks-grid, .proof-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px;
}
@media (min-width: 1080px) {
    .plug-in-grid, .talent-grid, .vetting-grid, .engagements-grid,
    .takeaway-grid, .value-stacks-grid, .proof-grid { grid-template-columns: repeat(3, 1fr); }
    .ai-development-grid, .risk-grid { grid-template-columns: repeat(2, 1fr); }
}

.plug-in-card, .talent-card, .vetting-card, .engagement-type-card,
.ai-feature-card, .takeaway-card, .risk-card, .value-stack, .proof-card {
    display: block; background: #fff; border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: 34px 32px; text-decoration: none;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.plug-in-card:hover, .talent-card:hover, .vetting-card:hover, .engagement-type-card:hover,
.ai-feature-card:hover, .takeaway-card:hover, .risk-card:hover, .value-stack:hover, .proof-card:hover {
    transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--line-strong);
}
.risk-card-wide { grid-column: 1 / -1; }

.plug-in-icon, .talent-icon, .vetting-icon, .engagement-type-icon,
.takeaway-icon, .risk-icon, .value-stack-icon {
    width: 54px; height: 54px; border-radius: 15px; margin-bottom: 22px;
    display: flex; align-items: center; justify-content: center;
    background: var(--grad); color: #fff; font-size: 1.35rem;
    box-shadow: 0 10px 24px rgba(109, 40, 217, .26);
}

.plug-in-card h3, .talent-card h3, .vetting-card h3, .engagement-type-card h3,
.ai-feature-card h3, .takeaway-card h3, .risk-card h3, .value-stack h3, .proof-card h3 {
    font-family: var(--font-display); font-size: 1.18rem; font-weight: 700;
    color: var(--ink); margin-bottom: 10px; letter-spacing: -.015em;
}
.plug-in-card p, .talent-card p, .vetting-card p, .engagement-type-card p,
.ai-feature-card p, .takeaway-card p, .risk-card p, .value-stack p, .proof-card p {
    color: var(--ink-soft); font-size: .97rem; line-height: 1.68;
}
.plug-in-card ul, .talent-card ul, .vetting-card ul, .engagement-type-card ul,
.ai-feature-card ul, .risk-card ul, .value-stack ul {
    margin-top: 16px; display: flex; flex-direction: column; gap: 10px;
}
.plug-in-card li, .talent-card li, .vetting-card li, .engagement-type-card li,
.ai-feature-card li, .risk-card li, .value-stack li {
    position: relative; padding-left: 26px; color: var(--ink-soft); font-size: .95rem; line-height: 1.6;
}
.plug-in-card li::before, .talent-card li::before, .vetting-card li::before,
.engagement-type-card li::before, .ai-feature-card li::before, .risk-card li::before,
.value-stack li::before {
    content: '\f058'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    position: absolute; left: 0; top: 1px; color: var(--brand); font-size: .88rem;
}

/* Case-study proof cards carry a category tag instead of an icon. */
.proof-tag {
    display: inline-block; margin-bottom: 16px; padding: 7px 15px; border-radius: var(--r-full);
    background: var(--bg-lav); border: 1px solid var(--line);
    font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand);
}
.proof-card { position: relative; }
.proof-card::after {
    content: '\f061'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    position: absolute; right: 30px; bottom: 30px; color: var(--brand);
    opacity: 0; transform: translateX(-6px); transition: all var(--dur) var(--ease);
}
.proof-card:hover::after { opacity: 1; transform: translateX(0); }

/* --------------------------------------------------------------------------
   Numbered cards
   -------------------------------------------------------------------------- */
.guardrails-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
@media (min-width: 1080px) { .guardrails-grid { grid-template-columns: repeat(3, 1fr); } }
.guardrail-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px 30px;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.guardrail-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.guardrail-number {
    display: block; margin-bottom: 14px;
    font-family: var(--font-display); font-size: 2.4rem; font-weight: 800; letter-spacing: -.03em; line-height: 1;
    background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.guardrail-card h3 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--ink); margin-bottom: 9px; }
.guardrail-card p { color: var(--ink-soft); font-size: .95rem; line-height: 1.65; }

/* --------------------------------------------------------------------------
   30-day integration blueprint
   -------------------------------------------------------------------------- */
.blueprint-timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 26px; }
.blueprint-day {
    position: relative; background: #fff; border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: 32px 30px; box-shadow: var(--shadow-sm);
}
.blueprint-day::before {
    content: ''; position: absolute; left: 30px; right: 30px; top: 0; height: 3px;
    border-radius: 0 0 3px 3px; background: var(--grad);
}
.blueprint-day-marker { margin-bottom: 18px; }
.blueprint-day-marker span {
    display: inline-block; padding: 8px 18px; border-radius: var(--r-full);
    background: var(--bg-lav); border: 1px solid var(--line-strong);
    font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand);
}
.blueprint-day h3 { font-family: var(--font-display); font-size: 1.14rem; font-weight: 700; color: var(--ink); margin-bottom: 16px; }
.blueprint-day ul { display: flex; flex-direction: column; gap: 11px; }
.blueprint-day li { position: relative; padding-left: 26px; color: var(--ink-soft); font-size: .95rem; line-height: 1.6; }
.blueprint-day li::before {
    content: '\f058'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    position: absolute; left: 0; top: 1px; color: var(--brand); font-size: .88rem;
}

/* --------------------------------------------------------------------------
   Delivery-week loop
   -------------------------------------------------------------------------- */
.velocity-loop { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.velocity-week {
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 32px 28px; box-shadow: var(--shadow-sm);
}
.velocity-week-label {
    display: inline-block; margin-bottom: 16px; padding: 7px 16px; border-radius: var(--r-full);
    background: var(--grad); color: #fff;
    font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.velocity-week h3 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.velocity-week p { color: var(--ink-soft); font-size: .95rem; line-height: 1.65; }

/* --------------------------------------------------------------------------
   Strategic takeaway panel
   -------------------------------------------------------------------------- */
.takeaway-box {
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl);
    padding: 56px 48px; box-shadow: var(--shadow-md);
}
.takeaway-box .takeaway-card { border-color: var(--line-strong); box-shadow: none; }

/* --------------------------------------------------------------------------
   AI development split layout
   -------------------------------------------------------------------------- */
.ai-development-layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: center; }
.ai-development-text p { color: var(--ink-soft); font-size: 1.04rem; line-height: 1.78; }
.ai-development-text p + p { margin-top: 16px; }
.ai-development-text ul { margin-top: 20px; display: flex; flex-direction: column; gap: 11px; }
.ai-development-text li { position: relative; padding-left: 28px; color: var(--ink-soft); line-height: 1.6; }
.ai-development-text li::before {
    content: '\f058'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    position: absolute; left: 0; top: 2px; color: var(--brand); font-size: .9rem;
}
@media (max-width: 980px) { .ai-development-layout { grid-template-columns: 1fr; gap: 40px; } }

/* --------------------------------------------------------------------------
   Pricing table
   -------------------------------------------------------------------------- */
.pricing-table-wrapper {
    overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg);
    background: #fff; box-shadow: var(--shadow-sm);
}
.pricing-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.pricing-table th, .pricing-table td { padding: 17px 24px; text-align: left; border-bottom: 1px solid var(--line); }
.pricing-table thead th {
    background: #faf7ff; font-family: var(--font-display);
    font-size: .98rem; font-weight: 700; color: var(--ink);
}
.pricing-table td { color: var(--ink-soft); font-size: .95rem; }
.pricing-table td:first-child { font-weight: 600; color: var(--ink); }
.pricing-table tbody tr:last-child td { border-bottom: 0; }
.pricing-table tbody tr:hover { background: #faf9fd; }

/* --------------------------------------------------------------------------
   Consultation panel
   -------------------------------------------------------------------------- */
.consultation-box {
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl);
    padding: 56px 48px; box-shadow: var(--shadow-lg);
}
.consultation-header { text-align: center; max-width: 720px; margin: 0 auto 46px; }
.consultation-header .section-badge { margin-bottom: 14px; }
.consultation-header .btn { margin-top: 28px; }
.consultation-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding-top: 42px; border-top: 1px solid var(--line); }
.consultation-benefits h3, .consultation-steps h3 {
    font-family: var(--font-display); font-size: 1.16rem; font-weight: 700; color: var(--ink); margin-bottom: 22px;
}
.consultation-benefits ul { display: flex; flex-direction: column; gap: 13px; }
.consultation-benefits li { display: flex; align-items: flex-start; gap: 12px; color: var(--ink-soft); line-height: 1.6; }
.consultation-benefits li i { color: var(--brand); margin-top: 3px; }
.consultation-steps .step-item { display: flex; align-items: flex-start; gap: 16px; }
.consultation-steps .step-item + .step-item { margin-top: 18px; }
.consultation-steps .step-number {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-lav); border: 1px solid var(--line-strong);
    font-family: var(--font-display); font-weight: 700; font-size: .92rem; color: var(--brand);
}
.consultation-steps .step-item p { color: var(--ink-soft); line-height: 1.6; padding-top: 9px; }
@media (max-width: 860px) {
    .consultation-columns { grid-template-columns: 1fr; gap: 38px; }
    .consultation-box, .takeaway-box { padding: 38px 26px; }
}

/* --------------------------------------------------------------------------
   FAQ — matches the accordion used everywhere else
   -------------------------------------------------------------------------- */
.service-faq .faq-list { max-width: 820px; margin: 0 auto; }

@media (max-width: 640px) {
    .guardrails-section, .plug-in-section, .talent-matrix-section, .blueprint-section,
    .vetting-section, .proof-points, .strategic-takeaway, .consultation-section,
    .service-faq, .core-engagements, .ai-development-section, .risk-matrix,
    .pricing-section, .value-matrix-section, .velocity-loop-section { padding: 72px 0; }
    .service-hero { padding: 118px 0 62px; }
    .plug-in-card, .talent-card, .vetting-card, .engagement-type-card, .ai-feature-card,
    .takeaway-card, .risk-card, .value-stack, .proof-card, .guardrail-card,
    .blueprint-day, .velocity-week { padding: 26px 22px; }
}