/* ====== tokens aligned with your new platform ====== */
:root{
    --ink:#0b1220; --muted:#6b7280;
    --surface:#f6f8ff;          /* soft blue canvas */
    --card:#ffffff; --line:rgba(15,23,42,.10);
    --radius-lg:22px; --radius:18px; --radius-sm:14px;
    --shadow:0 12px 40px rgba(2,6,23,.10);
    --primary:#f97316; --primary-700:#ea580c; /* orange CTA */
    --outline:#2563eb;                               /* blue outline */
}

/* ====== section wrapper ====== */
.sec.hiw{ background:linear-gradient(180deg,#eef2ff 0%, #f7f9ff 100%); padding:40px 0 56px }
.wrap{ width:min(1200px,92vw); margin:auto }

/* Intro band */
.hiw-hero{
    display:grid; grid-template-columns:1.1fr .9fr; gap:22px;
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
    padding:22px; box-shadow:var(--shadow); margin-bottom:22px;
}
.hiw-hero .copy h2{ margin:0 0 6px; font-size:clamp(28px,4vw,44px); color:var(--ink); font-weight:900; letter-spacing:-.02em }
.hiw-hero .copy p{ margin:0 0 12px; color:var(--muted) }
.hiw-hero .art{ display:grid; place-items:center }
.hiw-hero img{ max-width:100%; height:auto; border-radius:var(--radius) }

.actions{ display:flex; gap:12px; flex-wrap:wrap }
.btn{ display:inline-flex; align-items:center; justify-content:center; border-radius:999px; font-weight:800; text-decoration:none; white-space:nowrap; transition:.25s }
.btn-primary{ background:var(--primary); color:#fff; padding:12px 18px; box-shadow:0 14px 28px rgba(249,115,22,.28) }
.btn-primary:hover{ background:var(--primary-700); transform:translateY(-2px) }
.btn-outline{ color:var(--outline); border:2px solid var(--outline); background:#fff; padding:10px 16px }
.btn-outline:hover{ background:#eef2ff; transform:translateY(-2px) }

/* Section heads */
.sec-head{ text-align:center; margin:24px 0 14px }
.sec-head h3{ margin:0; font-size:clamp(22px,2.6vw,32px); color:var(--ink); font-weight:900 }

/* 4-step grid */
.hiw-grid{ display:grid; gap:18px; grid-template-columns:repeat(4,1fr) }
@media (max-width:992px){ .hiw-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:600px){ .hiw-grid{ grid-template-columns:1fr } }

.hiw-card{
    position:relative; background:var(--card); border:1px solid var(--line);
    border-radius:var(--radius); padding:20px; box-shadow:var(--shadow);
    display:flex; flex-direction:column; gap:8px; min-height:180px;
    transition:transform .25s, box-shadow .25s, border-color .25s;
}
.hiw-card:hover{ transform:translateY(-6px); box-shadow:0 18px 48px rgba(2,6,23,.12); border-color:rgba(37,99,235,.22) }
.hiw-card h4{ margin:6px 0 0; font-size:18px; color:var(--ink) }
.hiw-card p{ margin:0; color:var(--muted) }

/* number pill */
.hiw-card .num{
    position:absolute; top:12px; right:14px;
    width:34px; height:34px; border-radius:999px; font-weight:900; color:#0b1220;
    display:grid; place-items:center; background:#fff;
    box-shadow:0 8px 22px rgba(2,6,23,.10), inset 0 1px 0 rgba(255,255,255,.9);
    outline:3px solid #c7d2fe;
}

/* gradient icon tiles */
.tile{
    width:56px; height:56px; border-radius:var(--radius-sm); display:grid; place-items:center; color:#fff;
    box-shadow:0 12px 22px rgba(2,6,23,.12);
}
.tile svg{ width:24px; height:24px }
.tile-blue{ background:linear-gradient(135deg,#3b82f6,#6366f1) }
.tile-green{ background:linear-gradient(135deg,#22c55e,#16a34a) }
.tile-purple{ background:linear-gradient(135deg,#8b5cf6,#6366f1) }
.tile-amber{ background:linear-gradient(135deg,#f59e0b,#f97316) }

/* Detailed flow (left rail) */
.flow{ list-style:none; margin:8px 0 0; padding:0 0 0 24px; position:relative }
.flow::before{
    content:""; position:absolute; left:20px; top:0; bottom:0; width:3px;
    background:linear-gradient(#c7d2fe,#e5e7eb);
    border-radius:2px;
}
.flow li{ display:flex; gap:14px; padding:14px 0 14px 0; align-items:flex-start }
.flow .dot{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center; color:#fff; flex:0 0 auto }
.flow .dot svg{ width:20px; height:20px }
.flow-body h5{ margin:2px 0 4px; font-size:18px; color:var(--ink) }
.flow-body p{ margin:0; color:var(--muted) }

/* Why choose row */
.why{ display:grid; gap:18px; grid-template-columns:repeat(3,1fr); margin-top:10px }
@media (max-width:992px){ .why{ grid-template-columns:1fr 1fr } }
@media (max-width:600px){ .why{ grid-template-columns:1fr } }

.why-card{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    padding:20px; box-shadow:var(--shadow); display:flex; gap:14px; align-items:flex-start;
    transition:transform .25s, box-shadow .25s;
}
.why-card:hover{ transform:translateY(-4px); box-shadow:0 16px 44px rgba(2,6,23,.12) }
.why-card h4{ margin:2px 0 6px; font-size:18px; color:var(--ink) }
.why-card p{ margin:0; color:var(--muted) }
.why-card.highlight{ outline:2px solid #c7d2fe }


/* ===== tokens aligned to your new platform ===== */
:root{
    --ink:#0b1220;
    --muted:#667085;
    --rail1:#60a5fa;        /* blue gradient rail */
    --rail2:#6366f1;
    --card:#ffffff;
    --line:rgba(15,23,42,.10);
    --radius:18px;
    --shadow:0 14px 40px rgba(2,6,23,.10);
    --ring:#16a34a;         /* green ring */
    --ring-dark:#0c6a38;
    --bg1:#eef2ff;          /* soft page gradient like the new design */
    --bg2:#f7f9ff;
}

/* section wrapper */
.timeline-pro{
    background:linear-gradient(180deg,var(--bg1),var(--bg2));
    padding:42px 0 56px;
}
.timeline-pro .wrap{
    width:min(1100px,92vw); margin:auto;
}

.tp-head{ text-align:center; margin-bottom:14px }
.tp-head h2{
    margin:0 0 6px;
    font-size:clamp(28px,4vw,44px);
    font-weight:900; color:var(--ink); letter-spacing:-.02em;
}
.tp-head p{ margin:0; color:var(--muted) }

/* center rail */
.tp-rail{
    list-style:none; margin:22px 0 0; padding:0; position:relative;
}
.tp-rail::before{
    content:"";
    position:absolute; left:50%; top:0; bottom:0;
    width:4px; transform:translateX(-50%);
    background:linear-gradient(var(--rail2),var(--rail1));
    border-radius:4px;
    box-shadow:0 0 22px rgba(99,102,241,.35);
}

/* steps */
.tp-step{
    position:relative;
    width:50%; padding:0 26px 40px;
}
.tp-step.is-left{ left:0; text-align:right; }
.tp-step.is-right{ left:50%; text-align:left; }

/* node (double ring + number) */
.tp-node{
    position:absolute; top:6px; z-index:2;
    width:60px; height:60px; border-radius:50%;
    display:grid; place-items:center;
    background: radial-gradient(circle at 50% 50%, #fff 0 58%, transparent 60%),
    conic-gradient(from 180deg, var(--ring), var(--ring-dark), var(--ring));
    box-shadow:
        0 12px 28px rgba(2,6,23,.16),
        inset 0 1px 0 rgba(255,255,255,.9);
}
.tp-step.is-left .tp-node{ right:-30px }
.tp-step.is-right .tp-node{ left:-30px }

.tp-num{
    width:42px; height:42px; border-radius:999px;
    display:grid; place-items:center;
    background:#fff; color:var(--ring-dark); font-weight:900;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}

/* cards */
.tp-card{
    display:inline-block;
    max-width:460px; background:var(--card);
    border:1px solid var(--line); border-radius:var(--radius);
    padding:18px 20px; text-align:left;
    box-shadow:var(--shadow);
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.tp-card h3{ margin:0 0 6px; font-size:1.15rem; color:var(--ink) }
.tp-card p{ margin:0; color:var(--muted) }

.tp-card:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 48px rgba(2,6,23,.12);
    border-color:rgba(99,102,241,.25);
}

/* subtle dotted connector accent (like ref image) */
.tp-step::after{
    content:"";
    position:absolute; top:50%; width:8px; height:8px; border-radius:50%;
    background:rgba(22,163,74,.35); transform:translateY(-50%);
    filter:blur(.2px);
}
.tp-step.is-left::after{ right:6px }
.tp-step.is-right::after{ left:6px }

/* ===== mobile: collapse to left rail ===== */
@media (max-width: 820px){
    .tp-rail::before{ left:22px; transform:none }
    .tp-step{ width:100%; left:0; text-align:left; padding:0 0 18px 62px }
    .tp-step.is-left .tp-node,
    .tp-step.is-right .tp-node{ left:-8px; right:auto; }
    .tp-step::after{ left:56px; right:auto }
    .tp-card{ max-width:unset }
}


/* ===== tokens (align with your new platform) ===== */
:root{
    --ink:#0b1220; --muted:#6b7280;
    --card:#fff; --line:rgba(15,23,42,.10);
    --radius-lg:22px; --radius:18px;
    --shadow:0 14px 40px rgba(2,6,23,.10);
    --blue-1:#3b82f6; --blue-2:#6366f1;
    --green-1:#22c55e; --green-2:#16a34a;
    --amber-1:#f59e0b; --amber-2:#f97316;
    --band-top:#0f2b46; --band-bot:#0b1c2a;
}

/* wrapper */
.why-strip{ padding:36px 0 56px; background:linear-gradient(180deg,#eef2ff 0%,#f7f9ff 100%) }
.why-strip .wrap{ width:min(1200px,92vw); margin:auto }

/* title */
.ws-title{
    text-align:center; margin:0 0 16px;
    font-size:clamp(28px,4vw,44px); font-weight:900; color:var(--ink); letter-spacing:-.02em;
}

/* dark band */
.ws-band{
    background:linear-gradient(180deg,var(--band-top),var(--band-bot));
    border-radius:18px;
    padding:26px min(2.2vw,24px);
    display:grid; gap:18px; grid-template-columns:repeat(3,1fr);
    box-shadow:0 24px 60px rgba(2,6,23,.18) inset, 0 10px 24px rgba(2,6,23,.06);
}

/* pill cards */
.ws-card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:28px;               /* pill look */
    padding:16px 18px;
    display:grid; grid-template-columns:56px 1fr; gap:16px; align-items:center;
    box-shadow:var(--shadow);
    position:relative;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ws-card::after{                    /* subtle outer ring like screenshot */
    content:""; position:absolute; inset:-2px;
    border-radius:inherit; pointer-events:none;
    box-shadow:0 0 0 2px rgba(99,102,241,.16);
    opacity:.7;
}
.ws-card:hover{
    transform:translateY(-4px);
    box-shadow:0 20px 56px rgba(2,6,23,.14);
    border-color:rgba(99,102,241,.24);
}

/* icon tiles */
.ws-tile{
    width:56px; height:56px; border-radius:16px; display:grid; place-items:center;
    color:#fff; font-weight:800; font-size:22px; line-height:1;
    box-shadow:0 14px 28px rgba(2,6,23,.14);
}
.ws-blue{  background:linear-gradient(135deg,var(--blue-1),var(--blue-2)) }
.ws-green{ background:linear-gradient(135deg,var(--green-1),var(--green-2)) }
.ws-amber{ background:linear-gradient(135deg,var(--amber-1),var(--amber-2)) }

/* text */
.ws-body h3{ margin:0 0 4px; font-size:20px; color:var(--ink) }
.ws-body p{ margin:0; color:var(--muted) }

/* responsive */
@media (max-width: 980px){
    .ws-band{ grid-template-columns:1fr; padding:22px; }
    .ws-card{ border-radius:22px }
}