/* Home: "2 weeks" story timeline (scroll-driven motion graphic) and the T0 -> T1 quality-path schematic. */

/* ---------- 2-week story ---------- */
.tw{--tw-top:72px;--p:0;position:relative;height:330vh;background:
  linear-gradient(#016fc00d 1px,transparent 1px) 0 0/32px 32px,
  linear-gradient(90deg,#016fc00d 1px,transparent 1px) 0 0/32px 32px,
  linear-gradient(180deg,#fff 0%,#f3f8fd 50%,#fff 100%)}
.tw-pin{position:sticky;top:var(--tw-top);height:calc(100svh - var(--tw-top));display:grid;align-content:center;overflow:hidden}
.tw-stage{min-width:0}
.tw .sec-head{margin-bottom:clamp(20px,3vh,36px)}
.tw-board{position:relative;display:grid;grid-template-columns:150px 1fr;grid-template-areas:"clock axis" "cards cards" "foot foot";gap:clamp(18px,3vh,30px) 34px;align-items:center}
.tw-clock{grid-area:clock;display:flex;flex-direction:column;align-items:flex-start;padding:16px 18px;border-radius:20px;background:#0B1622;color:#fff;box-shadow:0 24px 50px -24px #0b1622b3}
.tw-pre{font:700 12px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#E5B85C}
.tw-num{font:800 64px/1 Inter,sans-serif;letter-spacing:-.04em;font-variant-numeric:tabular-nums;margin:6px 0 2px}
.tw-clock small{font-size:13px;color:#b6c4d3;font-weight:600}
.tw-axis{grid-area:axis;position:relative;padding:26px 0 64px}
.tw-weeks{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.tw-weeks span{position:relative;padding-bottom:8px;text-align:center;font:700 12px/1 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#016FC0}
.tw-weeks span::after{content:"";position:absolute;left:6px;right:6px;bottom:0;height:8px;border:1.5px solid #016fc066;border-bottom:0;border-radius:6px 6px 0 0}
.tw-days{display:grid;grid-template-columns:repeat(14,1fr);gap:6px;margin:0;padding:0;list-style:none}
.tw-days li{display:grid;place-items:center;aspect-ratio:1;max-height:54px;border-radius:10px;background:#fff;border:1px solid #dbe6f1;font:700 13px/1 Inter,sans-serif;color:#94a3b8;transition:background .35s,color .35s,border-color .35s,transform .35s}
.tw-days li.is-on{background:#016FC0;border-color:#016FC0;color:#fff}
.tw-days li.is-now{transform:translateY(-4px) scale(1.08);box-shadow:0 12px 24px -10px #016fc0aa}
.tw-rail{position:absolute;left:calc(100% / 28);right:calc(100% / 28);bottom:44px;height:4px;border-radius:4px;background:#016fc022}
.tw-fill{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#016FC0,#4EAEFC);transform-origin:left;transform:scaleX(var(--p))}
.tw-token{position:absolute;bottom:46px;left:calc(100% / 28 + var(--p) * (100% - 100% / 14));width:46px;height:46px;margin-left:-23px;transform:translateY(50%);display:grid;place-items:center;border-radius:50%;background:#fff;box-shadow:0 0 0 4px #016fc033,0 14px 28px -10px #016fc0b3;z-index:2}
.tw-token img{width:32px;height:32px;object-fit:contain;border-radius:8px}
.tw-token::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid #016fc055;animation:twPulse 1.8s ease-out infinite}
@keyframes twPulse{from{transform:scale(.7);opacity:1}to{transform:scale(1.3);opacity:0}}
.tw-pins{position:absolute;left:calc(100% / 28);right:calc(100% / 28);bottom:0;height:36px;margin:0;padding:0;list-style:none}
.tw-pins li{position:absolute;left:calc(var(--at) * 100%);top:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;white-space:nowrap}
.tw-pins li:first-child{transform:none;align-items:flex-start}
.tw-pins li:last-child{transform:translateX(-100%);align-items:flex-end}
.tw-pins i{width:10px;height:10px;border-radius:50%;background:#cfdceb;transition:background .3s,box-shadow .3s}
.tw-pins b{font:700 11.5px/1 Inter,sans-serif;letter-spacing:.04em;color:#94a3b8;transition:color .3s}
.tw-pins li.is-done i{background:#016FC0}
.tw-pins li.is-done b{color:#0B1622}
.tw-pins li.is-now i{background:#E5B85C;box-shadow:0 0 0 5px #e5b85c40}
.tw-cards{grid-area:cards;display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.tw-card{display:flex;flex-direction:column;gap:12px;padding:18px;border-radius:18px;background:#fff;border:1px solid #e3ebf3;opacity:.45;transform:translateY(8px) scale(.98);transition:opacity .45s,transform .45s cubic-bezier(.22,.8,.24,1),box-shadow .45s,border-color .45s}
.tw-card.is-done{opacity:.8;transform:none}
.tw-card.is-on{opacity:1;transform:translateY(-6px);border-color:#016fc055;box-shadow:0 24px 48px -22px #016fc080}
.tw-ic{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#eef6fd;color:#016FC0;transition:background .4s,color .4s}
.tw-card.is-on .tw-ic{background:#016FC0;color:#fff}
.tw-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tw-when{display:block;font:700 11.5px/1.2 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#016FC0;margin-bottom:6px}
.tw-card h3{margin:0 0 6px;font-size:17px;line-height:1.25;color:#0B1622}
.tw-card p{margin:0;font-size:13.5px;line-height:1.5;color:#4b5563}
.tw-foot{grid-area:foot;display:flex;justify-content:center}

/* short desktop screens: tighten */
@media (min-width:761px) and (max-height:820px){
  .tw .sec-head p{display:none}
  .tw-card p{font-size:13px}
  .tw-num{font-size:52px}
}

/* phones: axis on top, one card at a time */
@media (max-width:760px){
  .tw{height:300vh}
  .tw-board{grid-template-columns:1fr;grid-template-areas:"axis" "clock" "cards" "foot";gap:14px}
  .tw .sec-head{margin-bottom:12px}
  .tw .sec-head p{font-size:14.5px}
  .tw-axis{padding:0 0 56px}
  .tw-days{gap:3px}
  .tw-days li{border-radius:6px;font-size:10px}
  .tw-weeks span{font-size:10.5px}
  .tw-pins b{display:none}
  .tw-pins li.is-now b{display:block;position:absolute;top:16px;font-size:11px;color:#0B1622}
  .tw-token{width:38px;height:38px;margin-left:-19px}
  .tw-token img{width:26px;height:26px}
  .tw-clock{flex-direction:row;align-items:baseline;gap:8px;padding:10px 16px;justify-self:start}
  .tw-num{font-size:34px;margin:0}
  .tw-cards{display:grid;grid-template-columns:1fr;grid-template-areas:"c"}
  .tw-card{grid-area:c;flex-direction:row;align-items:flex-start;opacity:0;transform:translateY(14px);pointer-events:none}
  .tw-card.is-done{opacity:0;transform:translateY(-14px)}
  .tw-card.is-on{opacity:1;transform:none;pointer-events:auto}
  .tw-card h3{font-size:18px}
  .tw-card p{font-size:14.5px}
  .tw-foot .button{width:100%;justify-content:center}
}

/* no JS or reduced motion: a static, complete story */
html:not(.js) .tw,.tw.is-static{height:auto}
html:not(.js) .tw-pin,.tw.is-static .tw-pin{position:relative;top:0;height:auto;padding:72px 0}
.tw.is-static .tw-card{opacity:1;transform:none;position:relative;pointer-events:auto}
.tw.is-static .tw-days li{background:#016FC0;border-color:#016FC0;color:#fff}
.tw.is-static .tw-token::after{animation:none}
@media (max-width:760px){.tw.is-static .tw-cards{grid-template-areas:none}.tw.is-static .tw-card{grid-area:auto}}

/* ---------- T0 -> T1 quality path schematic ---------- */
.qp{margin-top:clamp(40px,6vw,72px);padding:clamp(24px,3vw,40px);border-radius:24px;border:1px solid #dbe6f1;background:
  linear-gradient(#016fc00f 1px,transparent 1px) 0 0/24px 24px,
  linear-gradient(90deg,#016fc00f 1px,transparent 1px) 0 0/24px 24px,#fbfdff}
.qp-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;margin-bottom:34px}
.qp-head h3{margin:0;font-size:clamp(20px,2vw,26px);color:#0B1622}
.qp-board{position:relative;padding-top:44px}
.qp-line{position:relative;z-index:1;display:grid;grid-template-columns:repeat(5,1fr);margin:0;padding:0;list-style:none}
.qp-rail{position:absolute;left:10%;right:10%;top:calc(44px + 22px);height:2px;background:repeating-linear-gradient(90deg,#016FC0 0 10px,transparent 10px 16px);transform-origin:left;transform:scaleX(0);transition:transform 1.4s cubic-bezier(.22,.8,.24,1) .2s}
.qp-rail::after{content:"";position:absolute;right:-2px;top:-5px;border:6px solid transparent;border-left:9px solid #016FC0;border-right:0}
.qp-n{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 10px;opacity:0;transform:translateY(14px);transition:opacity .6s,transform .6s cubic-bezier(.22,.8,.24,1);transition-delay:calc(.35s + var(--k) * .22s)}
.qp-dot{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;border:2px solid #016FC0;color:#016FC0;font:800 13px/1 Inter,sans-serif;letter-spacing:.02em}
.qp-n.is-t .qp-dot{background:#0B1622;border-color:#E5B85C;color:#E5B85C;border-radius:12px;font-size:15px;box-shadow:0 10px 22px -10px #0b1622b3}
.qp-stage{margin:14px 0 10px;font:700 11.5px/1.2 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#016FC0}
.qp-fig{display:flex;align-items:baseline;justify-content:center;gap:3px;font:800 clamp(34px,3.4vw,48px)/1 Inter,sans-serif;letter-spacing:-.035em;color:#0B1622;white-space:nowrap}
.qp-fig small{font-size:.45em;letter-spacing:0;color:#016FC0}
.qp-cap{margin-top:10px;font-size:13px;line-height:1.45;color:#4b5563;max-width:200px}
.qp-span{position:absolute;left:40%;width:40%;top:0;height:30px;border:2px solid #E5B85C;border-bottom:0;border-radius:12px 12px 0 0;opacity:0;transition:opacity .6s 1.3s}
.qp-span b{position:absolute;left:50%;top:-13px;transform:translateX(-50%);padding:4px 12px;border-radius:999px;background:#E5B85C;color:#0B1622;font:800 12px/1.2 Inter,sans-serif;letter-spacing:.06em;white-space:nowrap}
.qp.is-in .qp-rail{transform:scaleX(1)}
.qp.is-in .qp-n{opacity:1;transform:none}
.qp.is-in .qp-span{opacity:1}
@media (max-width:760px){
  .qp-head{margin-bottom:20px}
  .qp-board{padding-top:0;padding-left:0}
  .qp-line{grid-template-columns:1fr;gap:0}
  .qp-rail{left:21px;right:auto;top:22px;bottom:40px;width:2px;height:auto;background:repeating-linear-gradient(180deg,#016FC0 0 10px,transparent 10px 16px);transform-origin:top;transform:scaleY(0)}
  .qp.is-in .qp-rail{transform:scaleY(1)}
  .qp-rail::after{display:none}
  .qp-n{display:grid;grid-template-columns:44px 1fr;grid-template-areas:"dot stage" "dot fig" "dot cap";column-gap:16px;align-items:start;text-align:left;padding:0 0 22px}
  .qp-dot{grid-area:dot}
  .qp-stage{grid-area:stage;margin:2px 0 4px}
  .qp-fig{grid-area:fig;justify-content:flex-start;font-size:34px}
  .qp-cap{grid-area:cap;max-width:none;margin-top:4px}
  .qp-span{left:auto;right:0;top:calc(2 * (100% / 5) + 4px);height:calc(2 * (100% / 5) - 18px);width:16px;border:2px solid #E5B85C;border-left:0;border-radius:0 10px 10px 0}
  .qp-span b{left:auto;right:6px;top:50%;transform:translateY(-50%) rotate(90deg);transform-origin:right center;}
}
@media (prefers-reduced-motion:reduce){
  .qp-rail,.qp-n,.qp-span{transition:none}
  .tw-token::after{animation:none}
}

/* ---------- Quality path, pinned motion (#quality) ---------- */
.qx{--qx-top:72px;--q:0;position:relative;height:280vh;color:#e6eef6;background:
  radial-gradient(1000px 520px at 80% 10%,#016fc04d,transparent 70%),
  linear-gradient(#ffffff09 1px,transparent 1px) 0 0/36px 36px,
  linear-gradient(90deg,#ffffff09 1px,transparent 1px) 0 0/36px 36px,#0B1622}
.qx-pin{position:sticky;top:var(--qx-top);height:calc(100svh - var(--qx-top));display:grid;align-content:center;overflow:hidden}
.qx-stage-wrap{min-width:0}
.qx .sec-head .label{color:#E5B85C}
.qx .sec-head h2{color:#fff}
.qx .sec-head h2 .accent{color:#4EAEFC}
.qx .sec-head p{color:#b6c4d3}
.qx-board{display:grid;grid-template-columns:170px 1fr;gap:32px;align-items:center;margin-top:clamp(10px,3vh,34px)}
.qx-meter{display:flex;flex-direction:column;padding:18px;border-radius:20px;background:#ffffff0d;border:1px solid #ffffff24}
.qx-pre{font:700 12px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#E5B85C}
.qx-k{font:800 60px/1 Inter,sans-serif;letter-spacing:-.04em;margin:8px 0 0;color:#fff;font-variant-numeric:tabular-nums}
.qx-meter small{color:#8fa3b8;font-weight:600}
.qx-name{margin-top:12px;padding-top:12px;border-top:1px solid #ffffff1f;font-weight:700;color:#9BD3FF}
.qx-track{position:relative;padding-top:52px}
.qx-line{position:relative;z-index:1;display:grid;grid-template-columns:repeat(5,1fr);margin:0;padding:0;list-style:none}
.qx-rail{position:absolute;left:10%;right:10%;top:calc(52px + 23px);height:2px;background:repeating-linear-gradient(90deg,#ffffff38 0 10px,transparent 10px 16px)}
.qx-rail i{position:absolute;inset:0;background:linear-gradient(90deg,#016FC0,#4EAEFC);transform-origin:left;transform:scaleX(var(--q));box-shadow:0 0 14px #4eaefc99}
.qx-token{position:absolute;z-index:2;top:calc(52px + 24px);left:calc(10% + var(--q) * 80%);width:40px;height:40px;margin:-20px 0 0 -20px;display:grid;place-items:center;border-radius:12px;background:#E5B85C;color:#0B1622;box-shadow:0 0 0 6px #e5b85c33,0 0 30px #e5b85c88;transform:rotate(calc(var(--q) * 360deg))}
.qx-token svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.qx-n{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 8px}
.qx-dot{position:relative;z-index:1;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#0B1622;border:2px solid #ffffff40;color:#8fa3b8;font:800 13px/1 Inter,sans-serif;transition:background .4s,border-color .4s,color .4s,transform .4s,box-shadow .4s}
.qx-n.is-t .qx-dot{border-radius:12px}
.qx-stage{margin:16px 0 10px;font:700 11.5px/1.2 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#8fa3b8;transition:color .4s}
.qx-fig{display:flex;align-items:baseline;justify-content:center;gap:4px;font:800 clamp(32px,3.3vw,50px)/1 Inter,sans-serif;letter-spacing:-.035em;color:#ffffff33;white-space:nowrap;font-variant-numeric:tabular-nums;transition:color .5s}
.qx-fig small{font-size:.42em;letter-spacing:0;color:inherit}
.qx-cap{margin-top:10px;max-width:200px;font-size:13px;line-height:1.45;color:#b6c4d3;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s}
.qx-n.is-on .qx-dot{background:#016FC0;border-color:#4EAEFC;color:#fff;box-shadow:0 0 0 6px #016fc040}
.qx-n.is-on.is-t .qx-dot{background:#E5B85C;border-color:#E5B85C;color:#0B1622;box-shadow:0 0 0 6px #e5b85c40}
.qx-n.is-on .qx-stage{color:#9BD3FF}
.qx-n.is-on .qx-fig{color:#fff}
.qx-n.is-on .qx-fig small{color:#4EAEFC}
.qx-n.is-on .qx-cap{opacity:1;transform:none}
.qx-n.is-now .qx-dot{transform:scale(1.15)}
.qx-span{position:absolute;left:40%;width:40%;top:0;height:34px}
.qx-span::before{content:"";position:absolute;inset:0;border:2px solid #E5B85C;border-bottom:0;border-radius:12px 12px 0 0;clip-path:inset(0 calc(100% - var(--qs,0) * 100%) 0 0)}
.qx-span b{position:absolute;left:50%;top:-14px;transform:translateX(-50%) scale(calc(.6 + var(--qs,0) * .4));opacity:min(1,calc(var(--qs,0) * 3));padding:4px 12px;border-radius:999px;background:#E5B85C;color:#0B1622;font:800 12px/1.2 Inter,sans-serif;letter-spacing:.06em;white-space:nowrap}
@media (min-width:761px) and (max-height:820px){.qx .sec-head p{display:none}}
@media (max-width:760px){
  .qx{height:260vh}
  .qx .sec-head{margin-bottom:6px}
  .qx .sec-head p{font-size:14px}
  .qx-board{grid-template-columns:1fr;gap:12px}
  .qx-meter{flex-direction:row;align-items:baseline;gap:8px;padding:10px 14px;justify-self:start}
  .qx-k{font-size:30px;margin:0}
  .qx-name{margin:0 0 0 6px;padding:0 0 0 10px;border-top:0;border-left:1px solid #ffffff2a}
  .qx-track{padding-top:0;padding-right:28px}
  .qx-line{grid-template-columns:1fr}
  .qx-n{display:grid;grid-template-columns:40px 1fr auto;grid-template-areas:"dot stage fig" "dot cap cap";column-gap:12px;align-items:center;text-align:left;padding:7px 0}
  .qx-dot{grid-area:dot;width:40px;height:40px}
  .qx-stage{grid-area:stage;margin:0}
  .qx-fig{grid-area:fig;font-size:28px;justify-content:flex-end}
  .qx-cap{grid-area:cap;max-width:none;margin-top:2px;font-size:12.5px}
  .qx-rail{left:19px;right:auto;top:27px;bottom:27px;width:2px;height:auto;background:repeating-linear-gradient(180deg,#ffffff38 0 8px,transparent 8px 13px)}
  .qx-rail i{transform-origin:top;transform:scaleY(var(--q))}
  .qx-token{left:19px;top:calc(27px + var(--q) * (100% - 54px));width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:9px}
  .qx-token svg{width:16px;height:16px}
  .qx-span{left:auto;right:0;width:14px;top:calc(40% + 10px);height:calc(20% + 0px)}
  .qx-span::before{border:2px solid #E5B85C;border-left:0;border-radius:0 10px 10px 0;clip-path:inset(0 0 calc(100% - var(--qs,0) * 100%) 0)}
  .qx-span b{display:none}
}
.qx.is-static{height:auto}
.qx.is-static .qx-pin{position:relative;top:0;height:auto;padding:80px 0}
.qx.is-static{--q:1;--qs:1}
.qx.is-static .qx-n{}

/* ---------- Blue "why" section: cards dealt from a stack (desktop), spotlight follows the pointer ---------- */
.home .go-why{position:relative;overflow:hidden}
.home .go-why::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(520px 360px at var(--mx,50%) var(--my,40%),#ffffff26,transparent 70%);transition:background .1s}
.home .go-why::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(#ffffff0b 1px,transparent 1px) 0 0/40px 40px,linear-gradient(90deg,#ffffff0b 1px,transparent 1px) 0 0/40px 40px;-webkit-mask:radial-gradient(70% 80% at 50% 50%,#000,transparent);mask:radial-gradient(70% 80% at 50% 50%,#000,transparent)}
.home .go-why .go-wrap{position:relative;z-index:1}
@media (min-width:1001px){
  .home .go-why .why-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;perspective:1400px}
  .home .go-why .why-card{transform-origin:50% 100%}
  .home .go-why.is-deal .why-card{opacity:var(--o,1);transform:translate3d(var(--dx,0),var(--dy,0),0) rotate(var(--rot,0deg)) scale(var(--sc,1));transition:none!important}
  .home .go-why .why-card h3{font-size:18px}
  .home .go-why .why-card:hover{transform:translateY(-8px)!important;box-shadow:0 30px 60px -24px #0b1622b3;transition:transform .35s,box-shadow .35s!important}
}
.home .go-why .why-ic{transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.home .go-why .why-card.is-landed .why-ic{animation:whyPop .7s cubic-bezier(.34,1.56,.64,1)}
@keyframes whyPop{0%{transform:scale(.6) rotate(-12deg)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.home .go-why::before{display:none}.home .go-why .why-card.is-landed .why-ic{animation:none}}