/* v3: deal tombstones, illustrated advantages, comparison table, richer motion */

/* ---------- deal tombstones (hero) ---------- */
.deals{position:relative;perspective:1400px}
.deals .stack{position:relative;height:430px}
.deal{position:absolute;inset:0 0 auto 0;height:400px;background:#fff;border-radius:22px;border:1px solid #E6E1D3;
  box-shadow:0 1px 0 #fff inset,0 30px 70px rgba(10,22,48,.18),0 4px 14px rgba(10,22,48,.06);
  padding:30px 32px;display:flex;flex-direction:column;align-items:center;text-align:center;
  transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .9s,filter .9s;transform-origin:50% 100%;
  background-image:radial-gradient(800px 300px at 50% -20%,#FBF8EF,transparent 60%)}
.deal::before{content:"";position:absolute;inset:10px;border:1px solid #EFE9D9;border-radius:15px;pointer-events:none}
.deal[data-pos="0"]{transform:none;z-index:3;opacity:1}
.deal[data-pos="1"]{transform:translateY(16px) scale(.95);z-index:2;opacity:.9;filter:brightness(.97)}
.deal[data-pos="2"]{transform:translateY(32px) scale(.9);z-index:1;opacity:.75;filter:brightness(.94)}
.deal.out{transform:translateY(-40px) rotateX(18deg) scale(1.02);opacity:0;z-index:4}
.deal .lbl{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#9A8B5F}
.deal .logo{height:40px;width:auto;max-width:180px;object-fit:contain;margin:22px auto 0}
.deal .logo.sq{height:54px}
.deal .wm{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-.02em;color:var(--ink);margin-top:24px;height:40px;display:flex;align-items:center}
.deal .by{font-size:13px;font-weight:600;color:var(--muted);margin:10px 0 6px;font-style:italic}
.deal .atl{font-family:var(--display);font-weight:800;font-size:24px;letter-spacing:.06em;color:#0052CC}
.deal .amt{font-family:'Fraunces',Georgia,serif;font-weight:800;font-size:clamp(36px,4.2vw,50px);letter-spacing:-.02em;color:var(--ink);margin:14px 0 4px;font-variant-numeric:tabular-nums;line-height:1.05}
.deal .amt small{font-size:.5em;font-weight:600;color:var(--muted);margin-left:6px}
.deal .what{font-size:15px;color:var(--ink-2);font-weight:600;max-width:330px}
.deal .rule{width:60%;height:1px;background:linear-gradient(90deg,transparent,#D9CFAF,transparent);margin:auto 0 14px}
.deal .foot{font-size:12.5px;color:#8C7E57;font-weight:700;letter-spacing:.04em}
.deal .seal{position:absolute;right:22px;top:22px;width:58px;height:58px;border-radius:50%;
  background:conic-gradient(from 0deg,#E9C46A,#B8892B,#F4D98B,#B8892B,#E9C46A);display:grid;place-items:center;
  box-shadow:0 4px 12px rgba(184,137,43,.4);animation:spin 18s linear infinite}
.deal .seal span{width:44px;height:44px;border-radius:50%;background:#C99A3A;color:#FFF7E0;display:grid;place-items:center;font-size:10px;font-weight:900;letter-spacing:.06em;border:1px dashed rgba(255,247,224,.6);animation:spin 18s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.deals .dots{display:flex;gap:8px;justify-content:center;margin-top:6px}
.deals .dots button{width:46px;height:4px;border:0;border-radius:4px;background:#D9DEE8;cursor:pointer;padding:0;overflow:hidden;position:relative}
.deals .dots button.on::after{content:"";position:absolute;inset:0 auto 0 0;background:var(--accent);animation:bar 5s linear both}
@media(max-width:640px){.deals .stack{height:400px}.deal{height:372px;padding:26px 20px}.deal .seal{width:46px;height:46px;right:16px;top:16px}.deal .seal span{width:34px;height:34px;font-size:8px}}

/* ---------- logos in color ---------- */
.marquee img{filter:none;opacity:.92}
.marquee img:hover{opacity:1;transform:scale(1.06)}

/* ---------- illustrated advantages ---------- */
.adv .a{padding:0;overflow:hidden;display:flex;flex-direction:column}
.adv .a h3{padding:22px 26px 28px}
.ill{height:200px;background:linear-gradient(180deg,var(--bg-2),#fff);border-bottom:1px solid var(--line);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:18px}
/* code window */
.code{width:100%;max-width:290px;background:#0B1220;border-radius:12px;box-shadow:0 14px 30px rgba(11,18,32,.25);padding:12px 14px 14px;font:12.5px/1.75 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#C9D3E6;position:relative}
.code .bar{display:flex;gap:5px;margin-bottom:8px}.code .bar i{width:8px;height:8px;border-radius:50%;background:#FF5F57}.code .bar i:nth-child(2){background:#FEBC2E}.code .bar i:nth-child(3){background:#28C840}
.code .ln{white-space:nowrap;overflow:hidden;width:0;animation:type 7s steps(26) infinite}
.code .ln:nth-child(3){animation-delay:.8s}.code .ln:nth-child(4){animation-delay:1.6s}
.code .k{color:#C792EA}.code .f{color:#82AAFF}.code .s{color:#C3E88D}
@keyframes type{0%{width:0}12%,88%{width:100%}100%{width:0}}
.code .ok{position:absolute;right:-10px;bottom:-14px;background:#fff;color:var(--ink);font:700 12.5px var(--font);border-radius:999px;padding:7px 12px 7px 8px;display:flex;gap:7px;align-items:center;box-shadow:0 10px 24px rgba(11,18,32,.18);animation:pop 7s infinite}
.code .ok b{width:20px;height:20px;border-radius:50%;background:#16A34A;color:#fff;display:grid;place-items:center;font-size:12px}
@keyframes pop{0%,28%{opacity:0;transform:scale(.6) translateY(6px)}34%,88%{opacity:1;transform:none}100%{opacity:0}}
/* timeline race */
.race{width:100%;max-width:300px;display:grid;gap:16px}
.race .row{display:grid;gap:6px}
.race .nm{display:flex;justify-content:space-between;font:700 12.5px var(--font);color:var(--ink-2)}
.race .nm span{color:var(--muted);font-weight:600}
.race .row.fast .nm span{color:var(--accent);font-weight:800}
.race .trk{height:12px;border-radius:999px;background:#E6EAF1;overflow:hidden}
.race .fill{height:100%;border-radius:999px;width:0}
.race .slow .fill{background:repeating-linear-gradient(45deg,#AEB6C4 0 6px,#BCC3CF 6px 12px);animation:slowfill 6s ease-in-out infinite}
.race .fast .fill{background:var(--accent);animation:fastfill 6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes slowfill{0%{width:0}85%{width:38%}100%{width:38%}}
@keyframes fastfill{0%{width:0}22%,100%{width:100%}}
.race .flag{justify-self:end;font:800 12px var(--font);color:#fff;background:#16A34A;border-radius:999px;padding:5px 10px;animation:pop2 6s infinite}
@keyframes pop2{0%,20%{opacity:0;transform:translateY(6px)}26%,95%{opacity:1;transform:none}100%{opacity:0}}
/* bilingual chat */
.chat{width:100%;max-width:290px;display:grid;gap:8px;position:relative;height:150px}
.chat .pair{position:absolute;inset:0;display:grid;gap:8px;align-content:center;animation:swapA 8s infinite}
.chat .pair.b{animation-name:swapB}
@keyframes swapA{0%,45%{opacity:1;transform:none}50%,95%{opacity:0;transform:translateY(-8px)}100%{opacity:1}}
@keyframes swapB{0%,45%{opacity:0;transform:translateY(8px)}50%,95%{opacity:1;transform:none}100%{opacity:0}}
.chat .m{max-width:82%;padding:10px 14px;border-radius:16px;font:600 14px/1.35 var(--font)}
.chat .m.in{background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px;justify-self:start;color:var(--ink)}
.chat .m.out{background:var(--accent);color:#fff;border-bottom-right-radius:4px;justify-self:end}
.chat .lang{position:absolute;top:-4px;left:50%;transform:translateX(-50%);display:flex;background:#fff;border:1px solid var(--line);border-radius:999px;padding:3px;font:800 11px var(--font);z-index:2}
.chat .lang span{padding:4px 10px;border-radius:999px;color:var(--muted)}
.chat .lang span:first-child{animation:langA 8s infinite}.chat .lang span:last-child{animation:langB 8s infinite}
@keyframes langA{0%,45%{background:var(--ink);color:#fff}50%,95%{background:transparent;color:var(--muted)}100%{background:var(--ink);color:#fff}}
@keyframes langB{0%,45%{background:transparent;color:var(--muted)}50%,95%{background:var(--ink);color:#fff}100%{background:transparent}}
/* due-diligence checklist */
.dd{width:100%;max-width:280px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:0 12px 26px rgba(11,18,32,.08);position:relative}
.dd .h{font:800 11px var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.dd .it{display:flex;justify-content:space-between;font:600 14px/2 var(--font);color:var(--ink-2)}
.dd .it b{color:#16A34A;opacity:0;animation:tick 6s infinite}
.dd .it:nth-child(3) b{animation-delay:.5s}.dd .it:nth-child(4) b{animation-delay:1s}
@keyframes tick{0%,10%{opacity:0;transform:scale(.4)}16%,90%{opacity:1;transform:none}100%{opacity:0}}
.dd .stamp{position:absolute;right:8px;top:-12px;border:3px solid #16A34A;color:#16A34A;font:900 15px var(--display);letter-spacing:.1em;padding:4px 10px;border-radius:8px;background:#fff;transform:rotate(8deg);animation:stamp 6s infinite}
@keyframes stamp{0%,30%{opacity:0;transform:rotate(8deg) scale(1.8)}36%,90%{opacity:1;transform:rotate(8deg) scale(1)}100%{opacity:0}}

/* ---------- comparison table ---------- */
.cmp{border:1px solid var(--line);border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 20px 50px rgba(11,18,32,.06)}
.cmp .r{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.1fr;align-items:center;border-top:1px solid var(--line)}
.cmp .r:first-child{border-top:0}
.cmp .r>div{padding:18px 20px;font-size:15.5px}
.cmp .r>div:first-child{font-weight:700;color:var(--ink)}
.cmp .r>div:not(:first-child){text-align:center}
.cmp .hd>div{font:800 13px var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-top:22px;padding-bottom:22px}
.cmp .r>div:last-child{background:color-mix(in srgb,var(--accent) 7%,#fff);border-left:2px solid var(--accent);border-right:2px solid var(--accent)}
.cmp .hd>div:last-child{background:var(--accent);color:#fff;font-size:14px;border-color:var(--accent)}
.cmp .r:last-child>div:last-child{border-bottom:2px solid var(--accent)}
.y,.n,.v{display:inline-grid;place-items:center;font-weight:900}
.y{width:30px;height:30px;border-radius:50%;background:#16A34A;color:#fff;font-size:15px;box-shadow:0 4px 12px rgba(22,163,74,.35)}
.n{width:26px;height:26px;border-radius:50%;background:#FEE2E2;color:#DC2626;font-size:13px}
.v{font-size:13px;font-weight:700;color:#9AA3B2}
.cmp .r:not(.hd){transition:background .2s}
.cmp .r:not(.hd):hover{background:#FAFBFD}
@media(max-width:760px){
  .cmp .r{grid-template-columns:1.5fr .8fr .8fr .9fr}
  .cmp .r>div{padding:13px 8px;font-size:13.5px}
  .cmp .hd>div{font-size:10.5px;letter-spacing:.02em;padding:14px 6px}
  .cmp .hd>div:last-child{font-size:11px}
  .y{width:26px;height:26px}.n{width:22px;height:22px}.v{font-size:11px}
}

/* ---------- richer motion ---------- */
.hero h1 .w{display:inline-block;opacity:0;transform:translateY(.45em) rotate(2deg);animation:wordIn .8s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes wordIn{to{opacity:1;transform:none}}
.hero .wrap>div>h1{animation:none}
.tilt{transform-style:preserve-3d;will-change:transform}
.kicker{position:relative;display:inline-block}
.anim .section-head.rv .kicker::after{content:"";position:absolute;left:0;bottom:-4px;height:2px;width:0;background:var(--accent);transition:width 1s .3s cubic-bezier(.2,.8,.2,1)}
.anim .section-head.rv.in .kicker::after{width:100%}
.anim .cmp.rv .r{opacity:0;transform:translateX(-14px);transition:opacity .6s,transform .6s}
.anim .cmp.rv.in .r{opacity:1;transform:none}
.anim .cmp.rv.in .r:nth-child(2){transition-delay:.08s}.anim .cmp.rv.in .r:nth-child(3){transition-delay:.16s}.anim .cmp.rv.in .r:nth-child(4){transition-delay:.24s}.anim .cmp.rv.in .r:nth-child(5){transition-delay:.32s}.anim .cmp.rv.in .r:nth-child(6){transition-delay:.4s}
.anim .cmp.rv .y{transform:scale(0);transition:transform .5s cubic-bezier(.3,1.6,.5,1) .5s}
.anim .cmp.rv.in .y{transform:none}
@media(prefers-reduced-motion:reduce){.hero h1 .w{opacity:1;transform:none}.code .ln{width:100%}}

/* brand chip */
.brand img{display:block}
.prchip{font:800 12px var(--font);letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--accent);border-radius:999px;padding:6px 11px;margin-left:10px;white-space:nowrap}
.brand{display:flex;align-items:center}

/* ---------- responsive across devices ---------- */
@media(min-width:1600px){:root{--max:1320px}body{font-size:18px}.deals .stack{height:460px}.deal{height:430px}}
@media(min-width:2200px){:root{--max:1500px}html{font-size:112%}body{font-size:19px}h1,.h1{font-size:76px}h2{font-size:52px}}
@media(max-width:1180px) and (min-width:961px){.hero .wrap{gap:36px}h1,.h1{font-size:54px}.cmp .r>div{padding:16px 14px}}
@media(max-width:960px){.hero .wrap>aside{max-width:520px;width:100%;margin:0 auto}.adv{grid-template-columns:1fr 1fr}.adv .a:last-child{grid-column:1/-1}}
@media(max-width:700px){.adv{grid-template-columns:1fr}.adv .a:last-child{grid-column:auto}}
@media(max-width:420px){.prchip{font-size:10px;padding:5px 8px;margin-left:6px}.brand img{height:32px!important}.nav .wrap{height:60px}
  h1,.h1{font-size:36px}.deal .amt{font-size:32px}.deal .what{font-size:14px}.ill{height:180px}}
@media(max-width:360px){h1,.h1{font-size:32px}.cmp .r{grid-template-columns:1.3fr .8fr .8fr .9fr}.cmp .r>div{padding:11px 5px;font-size:12.5px}}
.cmp .r>div:last-child{border-left:0;border-right:0;border-bottom:0;background:color-mix(in srgb,var(--accent) 9%,#fff)}
.cmp .r:last-child>div:last-child{border-bottom:0}
.cmp{position:relative}
.cmp::after{content:"";position:absolute;top:0;bottom:0;right:0;width:calc(100% * 1.1 / 4.7);border:2px solid var(--accent);border-radius:0 22px 22px 0;pointer-events:none}
@media(max-width:760px){.cmp::after{width:calc(100% * .9 / 4)}}
@media(max-width:360px){.cmp::after{width:calc(100% * .9 / 3.8)}}
@media(max-width:640px){.filterbar{font-size:12px;padding:7px 12px;line-height:1.4}}
.cmp .r{align-items:stretch}
.cmp .r>div{display:flex;align-items:center}
.cmp .r>div:not(:first-child){justify-content:center}
.cmp .hd>div:last-child{background:var(--accent);color:#fff}
@media(min-width:2200px){:root{--max:1700px}}