/* Components, utilities and hover effects */
/* ---------- utilities ---------- */
.fu { animation: fu .9s cubic-bezier(.2,.8,.2,1) both; }
.bobc { animation: bob 6s ease-in-out infinite; }
.sv { transform-box: fill-box; transform-origin: center; }
.sbob { animation: bob 4s ease-in-out infinite; }
.sbob2 { animation: bob 5s ease-in-out infinite .8s; }
.fl { transform-box: fill-box; transform-origin: center; animation: bob4 3.4s ease-in-out infinite; }
.sspin { animation: spin 16s linear infinite; }
.sdash { stroke-dasharray: 6 8; animation: dash 1.2s linear infinite; }
.sblink { animation: blink 1.4s ease-in-out infinite; }
.sblink2 { animation: blink 1.4s ease-in-out infinite .2s; }
.sblink3 { animation: blink 1.4s ease-in-out infinite .4s; }
.spulse { animation: ping 2.4s ease-out infinite; }
.ssweep { animation: sweep 5s ease-in-out infinite alternate; }
.sgrow { transform-box: fill-box; transform-origin: left center; animation: growx 3s ease-in-out infinite alternate; }
.sgrow2 { transform-box: fill-box; transform-origin: left center; animation: growx 3.6s ease-in-out infinite alternate .6s; }
.growy { transform-box: fill-box; transform-origin: center bottom; animation: growy 3s ease-in-out infinite alternate; }
.sdrag { animation: drag 6s ease-in-out infinite; }
.tl { transform-box: fill-box; transform-origin: left center; animation: tlk 9s ease-in-out var(--d, 0s) infinite backwards; }
.pop { transform-box: fill-box; transform-origin: center; animation: popk 9s ease-out var(--d, 0s) infinite backwards; }
.draw { stroke-dasharray: 1; animation: drawk 7s ease-in-out var(--d, 0s) infinite backwards; }
.chk { stroke-dasharray: 20; animation: chkk 7s ease-out var(--d, 0s) infinite backwards; }
.lit { transform-box: fill-box; transform-origin: center; animation: litk 7s ease-in-out var(--d, 0s) infinite; }
.pdot { width: 8px; height: 8px; border-radius: 999px; background: #85CBA6; animation: pr 2s ease-out infinite; }
.grad { background: linear-gradient(90deg, #3A5CA8 0%, #6A58B0 50%, #C0397F 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.marq { display: flex; width: max-content; animation: marq 48s linear infinite; }
.mi { display: inline-flex; align-items: center; gap: 14px; }
.md { width: 10px; height: 10px; border-radius: 999px; background: var(--k); box-shadow: 0 0 14px var(--k); }
.shp { position: absolute; pointer-events: none; animation: drift 9s ease-in-out infinite alternate; }
.shp.s2 { animation-duration: 12s; animation-delay: -3s; }
.shp.s3 { animation-duration: 15s; animation-delay: -6s; }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #3A5CA8; }
.h2 { margin: 0; font-size: 44px; line-height: 1.1; letter-spacing: -0.03em; font-weight: 800; }

/* ---------- buttons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: inherit; font-weight: 600; border-radius: 999px; overflow: hidden; cursor: pointer; transition: transform .25s ease, box-shadow .3s ease, background-position .6s ease, border-color .25s ease, background-color .25s ease; }
.btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.5) 50%, transparent 65%); transform: translateX(-130%); transition: transform .8s ease; pointer-events: none; }
.btn:hover::after { transform: translateX(130%); }
.btn:active { transform: translateY(0) scale(.98); }
.btn svg { transition: transform .25s ease; }
.btn:hover svg.arr { transform: translateX(4px); }
.btn-primary { color: #fff; background: linear-gradient(115deg, #3A5CA8 0%, #4A6DB8 35%, #6A58B0 70%, #A8468E 100%); background-size: 220% 100%; box-shadow: 0 6px 18px rgba(58,92,168,.35); }
.btn-primary:hover { transform: translateY(-3px); background-position: 100% 0; box-shadow: -8px 10px 28px rgba(91,127,199,.55), 8px 12px 30px rgba(232,74,158,.38), 0 18px 42px rgba(229,147,34,.3); }
.btn-pulse { animation: pglow 3.2s ease-in-out infinite; }
.btn-pulse:hover { animation: none; }
.btn-ghost { color: #1E2433; background: transparent; border: 1.5px solid #CCC5B9; }
.btn-ghost:hover { transform: translateY(-3px); border-color: transparent; background: linear-gradient(#FBF9F6, #FBF9F6) padding-box, linear-gradient(90deg, #5B7FC7, #A99BD6, #E84A9E, #E59322) border-box; box-shadow: -6px 8px 22px rgba(91,127,199,.3), 6px 10px 24px rgba(232,74,158,.22); }
.btn-light { color: #1E2433; background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.14); }
.btn-light:hover { transform: translateY(-3px); box-shadow: -8px 10px 28px rgba(91,127,199,.5), 8px 12px 30px rgba(232,74,158,.35), 0 18px 40px rgba(212,196,48,.3); }
.btn-dark { color: #fff; background: rgba(255,255,255,.07); border: 1.5px solid rgba(255,255,255,.32); }
.btn-dark:hover { transform: translateY(-3px); background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.75); box-shadow: -6px 8px 26px rgba(169,155,214,.45), 6px 10px 26px rgba(133,203,166,.35); }
.btn-outline { color: #1E2433; background: #fff; border: 1.5px solid #CCC5B9; }
.btn-outline:hover { transform: translateY(-3px); border-color: transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #5B7FC7, #85CBA6, #D4C430, #E59322) border-box; box-shadow: -6px 8px 22px rgba(133,203,166,.4), 6px 10px 24px rgba(229,147,34,.28); }

/* ---------- learn more pill ---------- */
.learn { white-space: nowrap; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 12px; padding: 7px 7px 7px 22px; border-radius: 999px; background: var(--t); color: var(--c); font-weight: 600; font-size: 15px; transition: background .3s ease, color .3s ease, box-shadow .3s ease; }
.learn .dot { width: 36px; height: 36px; border-radius: 999px; background: var(--c); color: #fff; display: flex; align-items: center; justify-content: center; transition: transform .3s ease, background .3s ease, color .3s ease; }
.learn:hover { background: linear-gradient(110deg, var(--c), var(--c2, var(--c))); color: #fff; box-shadow: 0 12px 28px -6px var(--g); }
.learn:hover .dot { background: #fff; color: var(--c); transform: translateX(3px); }

/* ---------- cards: calm lift, gradient ring, light sweep ---------- */
.card { position: relative; transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease; }
.card:hover { transform: translateY(-6px); box-shadow: 0 26px 56px -22px var(--g); }
.card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 2px; background: linear-gradient(135deg, var(--c), var(--c2, var(--c))); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .45s ease; pointer-events: none; }
.card:hover::after { opacity: 1; }
.viz { transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.card:hover .viz { transform: scale(1.035); }
.orb { transition: transform .9s ease, opacity .6s ease; }
.card:hover .orb { transform: scale(1.2); opacity: .6; }
.sheen { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.6) 50%, transparent 62%); transform: translateX(-130%); transition: transform 1s ease; }
.card:hover .sheen { transform: translateX(130%); }
.bar { display: none; }
.tag { font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: var(--t); color: var(--c); }
.fchip { position: absolute; display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid #EFE9E0; border-radius: 16px; padding: 9px 14px 9px 9px; font-size: 13px; font-weight: 600; box-shadow: 0 14px 34px -10px rgba(30,36,51,.28); }
.navlink { font-size: 15px; font-weight: 500; color: #3F4657; transition: color .2s ease; }
.navlink:hover { color: #3A5CA8; }
.panel { position: relative; height: 320px; border-radius: 22px; overflow: hidden; }
.dots { position: absolute; inset: 0; background-image: radial-gradient(var(--dc) 1px, transparent 1.3px); background-size: 18px 18px; -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 25%, transparent 75%); mask-image: radial-gradient(circle at 50% 45%, #000 25%, transparent 75%); }
.orbb { position: absolute; border-radius: 999px; filter: blur(46px); }
.chipt { position: absolute; left: 16px; top: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: 999px; padding: 7px 14px 7px 10px; font-size: 12px; font-weight: 600; }
.chipt i { width: 8px; height: 8px; border-radius: 999px; background: var(--c2); }
.vsvg { position: absolute; left: 0; right: 0; bottom: 0; top: 52px; width: 100%; height: calc(100% - 52px); }
.cbody { padding: 0 24px; display: flex; flex-direction: column; gap: 16px; flex: 1; }
.cbody h3 { margin: 0; font-size: 28px; line-height: 1.15; letter-spacing: -0.02em; font-weight: 800; }
.cbody .lead { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--c); }
.cbody .desc { margin: 0; font-size: 15px; line-height: 1.7; color: #565C6B; }
.cat { display: inline-flex; align-items: center; gap: 8px; letter-spacing: .06em; text-transform: uppercase; }
.num { font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: var(--t); }

/* ---------- pricing strip: animated icons on hover ---------- */
.pcell { transition: background .3s ease; }
.pcell:hover { background: var(--t2); }
.ptile { transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.pcell:hover .ptile { transform: translateY(-4px) rotate(-6deg) scale(1.1); animation: ring 1.4s ease-out infinite; }
.hand { transform-origin: 12px 13px; }
.pcell:hover .hand { animation: spin 1.4s linear infinite; }
.pcell:hover .crown { animation: bobs .6s ease-in-out infinite; }
.calrings { transform-origin: 12px 4px; }
.pcell:hover .calrings { animation: bobs .7s ease-in-out infinite; }
.calcheck { stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset .5s ease .1s; }
.pcell:hover .calcheck { stroke-dashoffset: 0; }
.star { transform-origin: 12px 12px; }
.pcell:hover .star { animation: starspin 1.6s ease-in-out infinite; }
.spk { opacity: 0; }
.pcell:hover .spk { animation: blink 1s ease-in-out infinite; }

/* ---------- beyond and above bento ---------- */
.bcard { position: relative; overflow: hidden; border-radius: 30px; border: 1px solid #E9E3DA; padding: 36px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.bico { position: relative; width: 60px; height: 60px; border-radius: 18px; display: flex; align-items: center; justify-content: center; transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.card:hover .bico { transform: rotate(-8deg) scale(1.08); }
.bh { position: relative; margin: 8px 0 0; font-size: 24px; line-height: 1.25; font-weight: 800; letter-spacing: -.02em; }
.bp { position: relative; margin: 0; font-size: 15px; line-height: 1.7; color: #565C6B; }

.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));gap:28px;align-items:stretch}
.pc{background:#fff;border:1px solid #E9E3DA;border-radius:28px;padding:36px 34px;display:flex;flex-direction:column;gap:18px;min-width:0;position:relative;overflow:hidden;box-shadow:0 20px 50px -32px rgba(30,36,51,.3)}
.pc-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px}
.pc-ico{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.pc:hover .pc-ico{transform:rotate(-8deg) scale(1.08)}
.pc-badge{font-size:12px;font-weight:700;padding:6px 14px;border-radius:999px;white-space:nowrap}
.pc-label{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#565C6B}
.pc-price{display:flex;align-items:baseline;gap:8px;min-height:56px}
.pc-num{font-size:52px;font-weight:800;letter-spacing:-.03em;line-height:1}
.pc-unit{font-size:16px;color:#565C6B}
.pc-desc{margin:0;font-size:15px;line-height:1.65;color:#565C6B;min-height:50px;padding-bottom:18px;border-bottom:1px solid #EFE9E0}
.pc-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px;font-size:14.5px;font-weight:500;margin-bottom:12px}
.pc-list li{display:flex;gap:12px;align-items:center}
.pc-list svg{flex:0 0 auto}
.pc-btn{margin-top:auto;font-size:15px;padding:15px 24px;width:100%}
.pc-dark{background:linear-gradient(160deg,#26304A 0%,#1E2433 65%);border-color:#323B55;color:#fff;box-shadow:0 30px 60px -28px rgba(30,36,51,.7)}
.pc-dark .pc-label{color:#C9D6F3}.pc-dark .pc-unit{color:#C9D6F3}.pc-dark .pc-desc{color:#DDE5F6;border-bottom-color:rgba(255,255,255,.14)}
.pc-dark::before{content:'';position:absolute;width:260px;height:260px;border-radius:999px;background:#5B7FC7;opacity:.35;filter:blur(70px);right:-90px;top:-100px;pointer-events:none}
.pc-dark>*{position:relative}
.flist{margin-top:auto;display:flex;flex-direction:column;gap:10px;position:relative}
.frow{position:relative;display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.9);border-radius:18px;padding:10px 14px 10px 10px;box-shadow:0 10px 24px -16px rgba(30,36,51,.35);overflow:hidden;transition:transform .45s cubic-bezier(.2,.8,.2,1) calc(var(--i)*60ms),box-shadow .4s ease calc(var(--i)*60ms),background .4s ease calc(var(--i)*60ms),border-color .4s ease calc(var(--i)*60ms)}
.frow::before{content:'';position:absolute;left:0;top:14%;bottom:14%;width:4px;border-radius:0 4px 4px 0;background:var(--a);transform:scaleY(0);transition:transform .4s ease calc(var(--i)*60ms)}
.fico{flex:0 0 auto;width:40px;height:40px;border-radius:13px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 16px -8px var(--g2);transition:transform .45s cubic-bezier(.2,.8,.2,1) calc(var(--i)*60ms)}
.ftxt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ftxt b{font-size:14.5px;font-weight:700;color:#1E2433;letter-spacing:-.01em}
.ftxt small{font-size:12px;font-weight:500;color:#6B7080}
.farr{flex:0 0 auto;width:28px;height:28px;border-radius:999px;background:var(--t);color:var(--a);display:flex;align-items:center;justify-content:center;transition:transform .4s ease calc(var(--i)*60ms),background .3s ease,color .3s ease}
.card:hover .frow{transform:translateX(6px);background:#fff;border-color:var(--t);box-shadow:0 16px 30px -16px var(--g2)}
.card:hover .frow::before{transform:scaleY(1)}
.card:hover .fico{transform:rotate(-8deg) scale(1.1)}
.card:hover .farr{transform:translateX(3px);background:var(--a);color:#fff}
.caro{overflow:hidden;padding:28px 0 40px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ctrack{display:flex;width:max-content;animation:caro 26s linear infinite}
.cgrp{display:flex;gap:28px;padding-right:28px}
.ucard{flex:0 0 min(430px,86vw);width:min(430px,86vw);background:#fff;border:1px solid #E9E3DA;border-radius:26px;padding:12px 12px 30px;display:flex;flex-direction:column;gap:24px}
.ucard{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--t) 0%,#fff 62%);border:1px solid var(--t);box-shadow:0 22px 44px -28px var(--g)}
.ucard::before{content:'';position:absolute;left:0;right:0;top:0;height:6px;z-index:3;background:linear-gradient(90deg,var(--c),var(--c2),#E84A9E)}
.ucard>div:first-child{margin-top:6px;box-shadow:0 14px 30px -16px var(--g)}
.ucard .tag{background:linear-gradient(100deg,var(--c),var(--c2));color:#fff;box-shadow:0 8px 16px -8px var(--g)}
.ucard h3{color:var(--c)}
.ucard p{color:#4A5060!important}
.beat{animation:beat 1.1s ease-in-out infinite}

/* Safari needs the prefixed form for blurred bars */
.site-header,.pstrip{-webkit-backdrop-filter:blur(14px)}
.pstrip{-webkit-backdrop-filter:blur(12px)}