/* ===== Design Tokens (match existing site) ===== */
:root {
    --primary-600: #2563eb;
    --primary-700: #1e47d7;
    --accent-500: #ff7a45;
    --ink: #0f172a;
    --muted: #64748b;
    --card: #ffffff;
    --bg: #f6f9ff;
    --radius: 18px;
    --shadow: 0 18px 34px rgba(2, 6, 23, .10);
    --wrap: min(94vw, 1200px);
}

/* ===== Utilities ===== */
.wrap {
    max-width: var(--wrap);
    margin: auto;
    padding: 0 12px
}

.section {
    padding: clamp(48px, 6vw, 84px) 0
}

.title-xl {
    font-size: clamp(34px, 5.2vw, 58px);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ink)
}

.title-lg {
    font-size: clamp(26px, 4vw, 38px);
    font-weight: 800;
    margin: 0 0 10px;
    color: var(--ink)
}

.title-lg--light {
    color: #fff
}

.sub {
    color: var(--muted);
    margin: 0 0 24px
}

.lead {
    color: #334155;
    max-width: 60ch;
    font-size: clamp(16px, 2vw, 18px)
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-radius: 999px;
    font-weight: 700;
    border: 2px solid transparent;
    transition: .18s
}

.btn:hover {
    transform: translateY(-1px)
}

.btn-accent {
    background: var(--accent-500);
    color: #fff;
    box-shadow: 0 14px 28px rgba(255, 122, 69, .32)
}

.btn-outline {
    border-color: var(--primary-600);
    color: var(--primary-600);
    background: #fff
}

.btn-lg {
    padding: 14px 22px
}

/* ===== Hero ===== */
.sec-hero {
    margin-top: 50px !important;
    background: radial-gradient(1000px 520px at 80% 20%, rgba(37, 99, 235, .10), transparent 60%),
    linear-gradient(180deg, #f3f6ff 0%, #eef2ff 55%, #edf1ff 100%);
    isolation: isolate;
}

.sec-hero .wrap {
    display: grid;
    grid-template-columns:1.05fr .95fr;
    gap: 40px;
    align-items: center
}

.hero-copy .title-xl {
    background: linear-gradient(90deg, #0f172a, #0b176b 60%, #0f172a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-stats {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 16px
}

.hero-stats li {
    background: #fff;
    border-radius: 14px;
    padding: 10px 14px;
    box-shadow: var(--shadow)
}

.hero-stats .num {
    font-weight: 800
}

.hero-art {
    margin-top: 20px !important;
    border-radius: 22px;
    background: rgba(255, 255, 255, .75);
    backdrop-filter: blur(8px);
    box-shadow: 0 35px 60px rgba(2, 6, 23, .12), 0 2px 0 rgba(255, 255, 255, .9) inset, 0 0 0 1px rgba(226, 232, 240, .7) inset;
    overflow: hidden
}

.hero-art img {
    display: block;
    width: 100%;
    height: auto
}

/* ===== Cards & grids ===== */
.grid {
    display: grid;
    gap: 18px
}

.cards-3 {
    grid-template-columns:repeat(3, 1fr)
}

@media (max-width: 1000px) {
    .sec-hero .wrap {
        grid-template-columns:1fr
    }

    .cards-3 {
        grid-template-columns:1fr 1fr
    }
}

@media (max-width: 640px) {
    .cards-3 {
        grid-template-columns:1fr
    }
}

.card {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 22px;
    transition: transform .14s ease, box-shadow .14s ease;
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 26px 50px rgba(2, 6, 23, .14)
}

.card--service .card-ico {
    font-size: 28px;
    line-height: 1;
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, #22d3ee, #2563eb);
    color: #fff;
    margin-bottom: 10px
}

.card-title {
    font-size: 20px;
    font-weight: 800;
    margin: 6px 0 10px
}

.list-ticks {
    margin: 0 0 14px;
    padding-left: 0;
    list-style: none
}

.list-ticks li {
    position: relative;
    padding-left: 24px;
    margin: 8px 0;
    color: #334155
}

.list-ticks li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #10b981;
    font-weight: 800
}

/* Pill cards for "Why Choose" */
.section--tint {
    background: linear-gradient(180deg, #f8fbff 0, #f4f7ff 100%)
}

.card--pill {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start
}

.pill-ico {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, #a78bfa, #6366f1);
    color: #fff;
    font-size: 20px
}

/* ===== Timeline (How it works) ===== */
.timeline {
    position: relative;
    margin: 26px 0 0;
    padding-left: 0;
    list-style: none
}

.timeline::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(#dbeafe, #93c5fd);
    transform: translateX(-50%)
}

.step {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 20px;
    align-items: center;
    margin: 18px 0
}

.step:nth-child(odd) .step-card {
    grid-column: 1
}

.step:nth-child(odd) .dot {
    grid-column: 2;
    justify-self: center
}

.step:nth-child(even) .step-card {
    grid-column: 2
}

.step:nth-child(even) .dot {
    grid-column: 1;
    justify-self: center
}

.dot {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: #fff;
    box-shadow: var(--shadow);
    display: grid;
    place-items: center;
    font-weight: 800;
    color: var(--primary-600);
    border: 2px solid #c7d8ff
}

.step-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 16px
}

.step-card h4 {
    margin: 0 0 6px;
    font-weight: 800
}

@media (max-width: 820px) {
    .timeline::before {
        left: 22px;
        transform: none
    }

    .step {
        grid-template-columns:1fr;
        gap: 10px;
        padding-left: 50px
    }

    .dot {
        grid-column: auto;
        justify-self: flex-start
    }
}

/* ===== Quotes ===== */
.section--dark {
    background: radial-gradient(800px 500px at 80% 20%, rgba(59, 130, 246, .12), transparent 60%), linear-gradient(180deg, #0b1224, #0b1533)
}

.card--quote {
    background: rgba(255, 255, 255, .06);
    color: #e6ecff;
    border: 1px solid rgba(255, 255, 255, .08)
}

.card--quote p {
    font-size: 18px;
    margin: 0 0 10px
}

.card--quote footer {
    color: #b8c2ff;
    font-weight: 700
}

/* ===== FAQ ===== */
.faq {
    background: #fff;
    border-radius: 16px;
    box-shadow: var(--shadow);
    margin: 10px 0;
    overflow: hidden
}

.faq summary {
    cursor: pointer;
    padding: 16px 18px;
    font-weight: 700;
    list-style: none
}

.faq[open] summary {
    border-bottom: 1px solid #e8ecf7
}

.faq .faq-a {
    padding: 14px 18px;
    color: #334155
}

/* ===== CTA ===== */
.section--cta {
    background: linear-gradient(135deg, #1e3a8a, #2563eb);
    color: #fff
}

.section--cta .cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px
}

.section--cta .sub {
    color: #dbeafe
}

@media (max-width: 700px) {
    .section--cta .cta {
        flex-direction: column;
        align-items: flex-start
    }
}


/* ====== How It Works – polished timeline ====== */
.hw-timeline{
    position:relative;
    list-style:none;
    margin:28px 0 0;
    padding:0;
}

/* Vertical connector (with subtle animated sheen) */
.hw-timeline::before{
    content:"";
    position:absolute;
    left:50%;
    top:0; bottom:0;
    width:2px;
    background:
        linear-gradient(#cfe2ff,#93c5fd,#cfe2ff);
    transform:translateX(-50%);
    border-radius:2px;
    overflow:hidden;
}
.hw-timeline::after{
    /* moving highlight */
    content:"";
    position:absolute;
    left:50%;
    width:4px; height:120px;
    background:linear-gradient(180deg,transparent,rgba(147,197,253,.55),transparent);
    filter:blur(1px);
    transform:translateX(-50%);
    animation: hw-sheen 4.5s linear infinite;
    pointer-events:none;
}
@keyframes hw-sheen{
    0%{ top:-120px }
    100%{ top:100% }
}

.hw-step{
    display:grid;
    grid-template-columns: 1fr 64px 1fr; /* card | node | card */
    align-items:center;
    gap:18px;
    margin:18px 0 26px;
}

/* Left/right alternation */
.hw-step.is-left  .hw-card{ grid-column:1 }
.hw-step.is-left  .hw-node{ grid-column:2; justify-self:center }

.hw-step.is-right .hw-card{ grid-column:3 }
.hw-step.is-right .hw-node{ grid-column:2; justify-self:center }

/* Node (numbered dot) */
.hw-node{
    width:46px;height:46px;border-radius:999px;
    background:#fff;
    border:2px solid #cfe2ff;
    box-shadow:0 10px 24px rgba(2,6,23,.10),
    0 0 0 8px rgba(147,197,253,.15); /* halo */
    display:grid;place-items:center;
}
.hw-node span{
    font-weight:800;color:#2563eb;
}

/* Card */
.hw-card{
    background:#fff;
    border-radius:18px;
    box-shadow:0 18px 34px rgba(2,6,23,.10);
    padding:18px 22px;
    border:1px solid #eaf0ff;
    transition:transform .16s ease, box-shadow .16s ease;
}
.hw-card:hover{
    transform:translateY(-3px);
    box-shadow:0 26px 50px rgba(2,6,23,.14);
}
.hw-card h3{
    margin:0 0 6px;font-weight:800;color:#0f172a;
}
.hw-card p{
    margin:0;color:#334155;
}

/* Better rhythm on large screens */
@media (min-width:1100px){
    .hw-card{ padding:22px 26px }
}

/* Mobile/tablet: stack left-to-right into one column */
@media (max-width:900px){
    .hw-timeline::before,
    .hw-timeline::after{ left:30px; transform:none }
    .hw-step{
        grid-template-columns: 60px 1fr; /* node | card */
        gap:12px;
    }
    .hw-step .hw-node{ grid-column:1; justify-self:flex-start }
    .hw-step .hw-card{ grid-column:2 }
}

/* Very small screens: reduce shadows/size a bit */
@media (max-width:520px){
    .hw-node{ width:42px;height:42px; box-shadow:0 8px 18px rgba(2,6,23,.10),0 0 0 6px rgba(147,197,253,.15)}
    .hw-card{ border-radius:16px; padding:16px 18px }
}


/* ---------- Mobile fixes (≤480px) ---------- */
@media (max-width: 480px){
    /* general rhythm */
    .section-tight{ padding-block: 28px; }

    /* protect content from bottom dock / safe areas */
    :root{ --dock-h: 84px; }
    .ux-wrap{ padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px) + 18px); }

    /* typography: keep headings readable + avoid orphans */
    h1,h2,h3{ word-break: break-word; hyphens: auto; }
    .lead{ font-size: 1rem; }
    .h6{ font-size: .95rem; }

    /* What We Offer cards */
    .cards-3{ grid-template-columns: 1fr; gap: 14px; }
    .card-ghost,.card-lite,.testi{
        padding: 16px;
        border-radius: 14px;
        box-shadow: 0 8px 22px rgba(2,6,23,.06);
        transform: none !important;  /* remove hover jump on touch */
    }
    .icon-badge{ width:42px;height:42px;border-radius:12px;margin-bottom:8px; }

    /* ---------- How It Works → vertical timeline ---------- */
    .steps-4{
        position: relative;
        grid-template-columns: 1fr;   /* stack */
        gap: 12px;
    }
    /* timeline rail */
    .steps-4::before{
        content:"";
        position:absolute; left:20px; top:0; bottom:0;
        width:2px; border-radius:2px;
        background: linear-gradient(180deg, rgba(16,138,73,.35), rgba(16,138,73,.12));
    }
    /* each step becomes a left-rail item */
    .step{
        display:block;
        text-align:left;
        padding:14px 14px 14px 56px;    /* room for rail + badge */
        border:1px solid rgba(16,138,73,.22);
        border-style: solid;            /* not dashed on mobile */
        background: #fff;
    }
    /* number badge pinned to rail */
    .step-num{
        position:absolute;
        left:8px;                       /* centers over the rail */
        width:32px; height:32px; line-height:32px;
        font-size:16px;
        background:#e7f5ec;
        color:#108a49; font-weight:700;
        border-radius:50%;
        box-shadow: 0 2px 8px rgba(2,6,23,.08);
    }
    /* ensure each step creates a containing block for its badge */
    .step{ position: relative; }

    /* spacing of headings & copy inside steps */
    .step h3{ margin: 0 0 4px; }
    .step p{ margin: 0; color: #334155; }

    /* Testimonials grid */
    .testi p{ margin-bottom:10px; }
}

/* ---------- Extra: avoid chat/dock overlap on any screen ---------- */
.has-bottom-dock .ux-wrap{
    padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px) + 24px);
}


/* ========== How It Works Timeline ========== */
.hw-timeline{
    position:relative;
    margin:40px 0;
    padding:0;
    list-style:none;
}
.hw-timeline::before{
    content:"";
    position:absolute; left:50%; top:0; bottom:0;
    width:3px;
    background:linear-gradient(var(--brand-600),var(--brand-500));
    transform:translateX(-50%);
}

.hw-step{
    position:relative;
    width:50%;
    padding:0 28px 40px;
}
.hw-step.is-left{ left:0; text-align:right; }
.hw-step.is-right{ left:50%; text-align:left; }

/* node (number circle) */
.hw-node{
    position:absolute; top:0;
    width:42px; height:42px; border-radius:50%;
    background:#fff; border:3px solid var(--brand-600);
    display:flex; align-items:center; justify-content:center;
    font-weight:700; color:var(--brand-600);
    box-shadow:0 4px 10px rgba(2,6,23,.12);
    z-index:2;
}
.hw-step.is-left .hw-node{ right:-21px; }
.hw-step.is-right .hw-node{ left:-21px; }

/* card */
.hw-card{
    background:#fff;
    border-radius:16px;
    padding:18px 20px;
    box-shadow:0 8px 20px rgba(2,6,23,.08);
    display:inline-block;
    max-width:280px;
}
.hw-card h3{margin:0 0 6px;font-size:1.05rem;color:#0f172a}
.hw-card p{margin:0;color:#475569;font-size:.95rem;}

/* ========== Mobile adjustments ========== */
@media (max-width:768px){
    .hw-timeline::before{ left:20px; }
    .hw-step{ width:100%; padding-left:60px; padding-right:0; text-align:left; }
    .hw-step.is-left,.hw-step.is-right{ left:0; }
    .hw-node{ left:0; right:auto; }
    .hw-card{ max-width:100%; }
    .hw-step.is-left .hw-node{ right:0 !important; }
    .hw-step.is-left .hw-node {
        grid-column: 0 !important;
        justify-self: left !important;
    }
}


/* ---- tune these to your palette ---- */
:root{
    --brand-600:#108a49;      /* primary accent */
    --brand-700:#0c6a38;      /* darker accent */
    --ink:#0f172a;            /* headings */
    --muted:#475569;          /* body text */
    --card:#ffffff;
    --line:rgba(15,23,42,.10);
    --radius:18px;
    --shadow:0 10px 30px rgba(2,6,23,.08);
}

/* wrapper rhythm (reuse your existing .section/.wrap if you have them) */
.hiw .wrap{max-width:1200px;margin:auto;padding:clamp(28px,5vw,56px) 0}
.hiw .title-lg{text-align:center;margin:0 0 24px}

/* ===== timeline ===== */
.hiw-timeline{
    position:relative; list-style:none; margin:26px 0 0; padding:0;
}
.hiw-timeline::before{
    content:""; position:absolute; left:50%; top:0; bottom:0;
    width:2px; background:linear-gradient(var(--brand-600), rgba(16,138,73,.2));
    transform:translateX(-50%);
}

.hiw-item{
    position:relative; width:50%;
    padding:0 28px 42px;
}
.hiw-item.is-left{ left:0; text-align:right; }
.hiw-item.is-right{ left:50%; text-align:left; }

/* number pin */
.hiw-pin{
    position:absolute; top:4px; z-index:2;
    width:46px; height:46px; border-radius:999px;
    background:#fff; box-shadow:0 8px 22px rgba(2,6,23,.10);
    display:grid; place-items:center;
    outline:3px solid var(--brand-600);
}
.hiw-item.is-left .hiw-pin{ right:-23px; }
.hiw-item.is-right .hiw-pin{ left:-23px; }
.hiw-pin span{ font-weight:800; color:var(--brand-700) }

/* cards */
.hiw-card{
    display:inline-block; max-width:360px; text-align:left;
    background:var(--card); border:1px solid var(--line);
    border-radius:var(--radius); padding:18px 20px;
    box-shadow:var(--shadow);
    transition:transform .25s cubic-bezier(.2,.6,.2,1), box-shadow .25s;
}
.hiw-card:hover{ transform:translateY(-4px); box-shadow:0 16px 40px rgba(2,6,23,.10) }
.hiw-card h3{ margin:0 0 6px; color:var(--ink); font-size:1.1rem }
.hiw-card p{ margin:0; color:var(--muted) }

/* ===== mobile: stack into left-rail timeline ===== */
@media (max-width: 768px){
    .hiw-timeline::before{ left:22px; transform:none; }
    .hiw-item{ width:100%; left:0; text-align:left; padding:0 0 18px 62px; }
    .hiw-item.is-left,.hiw-item.is-right{ left:0; }
    .hiw-pin{ left:0; right:auto; width:36px; height:36px; outline-width:2px; }
    .hiw-pin span{ font-size:.95rem }
    .hiw-card{ max-width:unset; padding:16px; border-radius:14px; }
}
/* remove the default OL numbers */
.hiw-timeline{ list-style:none; margin-left:0; }

/* --- Number Badge: glossy ring + glow --- */
.hiw-pin{
    position:absolute; top:8px; z-index:2;
    width:48px; height:48px;
    display:grid; place-items:center;
    border-radius:999px;
    /* outer glow */
    box-shadow:
        0 10px 24px rgba(16,138,73,.20),
        0 2px 8px rgba(2,6,23,.10);
    /* ring */
    background:
        radial-gradient(circle at 50% 50%, #fff 0 54%, transparent 55%),
        conic-gradient(from 180deg, #12a150, #0c6a38, #12a150);
}

/* inner pill (the number) */
.hiw-pin span{
    width:34px; height:34px; display:grid; place-items:center;
    background:#ffffff;
    border-radius:999px;
    font: 800 16px/1 Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    color:#0c6a38;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

/* position relative to center rail (desktop) */
.hiw-item.is-left .hiw-pin{ right:-24px; }
.hiw-item.is-right .hiw-pin{ left:-24px; }

/* subtle connector dot to the card edge */
.hiw-item.is-left .hiw-pin::after,
.hiw-item.is-right .hiw-pin::after{
    content:""; position:absolute; top:50%; transform:translateY(-50%);
    width:8px; height:8px; border-radius:50%;
    background:#12a150; opacity:.35;
}
.hiw-item.is-left .hiw-pin::after{ right:-14px; }
.hiw-item.is-right .hiw-pin::after{ left:-14px; }

/* hover: slight lift + brighter ring */
.hiw-item:hover .hiw-pin{
    transform:translateY(-2px);
    background:
        radial-gradient(circle at 50% 50%, #fff 0 54%, transparent 55%),
        conic-gradient(from 180deg, #18be6b, #0c6a38, #18be6b);
}

/* --- Mobile left-rail adjustments --- */
@media (max-width:768px){
    .hiw-pin{ left:0; right:auto; width:40px; height:40px; }
    .hiw-pin span{ width:30px; height:30px; font-weight:800; }
    .hiw-item.is-left .hiw-pin::after,
    .hiw-item.is-right .hiw-pin::after{
        left:46px; right:auto; width:6px; height:6px;
    }
}

/* === CTA Section === */
.cta{
    background:#f8fafc;  /* neutral page background */
    padding:40px 0;
    text-align:center;
}

.cta-card{
    background:#f1f5f9; /* light card bg */
    border-radius:18px;
    padding:28px 32px;
    max-width:880px;
    margin:0 auto;
    display:flex; align-items:center; justify-content:space-between;
    gap:22px;
    box-shadow:0 10px 30px rgba(2,6,23,.08);
}

.cta-text h2{
    margin:0 0 6px;
    font-size:1.6rem;
    font-weight:800;
    color:#0f172a;
}
.cta-text p{
    margin:0;
    color:#475569;
    font-size:1rem;
}

/* button */
.btn-cta{
    display:inline-block;
    padding:.85rem 1.6rem;
    border-radius:999px;
    font-weight:600;
    text-decoration:none;
    color:#fff;
    background:linear-gradient(135deg,#2563eb,#7c3aed);
    box-shadow:0 8px 18px rgba(37,99,235,.3);
    transition:transform .25s ease, box-shadow .25s ease;
}
.btn-cta:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 26px rgba(37,99,235,.35);
}

/* responsive stack */
@media(max-width:768px){
    .cta-card{ flex-direction:column; text-align:center; padding:24px; }
    .cta-text h2{ font-size:1.3rem; }


    .hiw-item.is-right {
        left: 7% !important;
        text-align: left;
    }
}