/* ============================================================
kipko — landing page styles
Brand: Navy #0c1e36 · Grey #82929f · Gradient → #020a11
Display: Universo · Body: Outfit
============================================================ */
/* ---- Fonts ---- */
@font-face{font-family:'Outfit';src:url('../fonts/Outfit-Light.woff2') format('woff2'),url('../fonts/Outfit-Light.ttf') format('truetype');font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:'Outfit';src:url('../fonts/Outfit-Regular.woff2') format('woff2'),url('../fonts/Outfit-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Outfit';src:url('../fonts/Outfit-Medium.woff2') format('woff2'),url('../fonts/Outfit-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Outfit';src:url('../fonts/Outfit-SemiBold.woff2') format('woff2'),url('../fonts/Outfit-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Outfit';src:url('../fonts/Outfit-Bold.woff2') format('woff2'),url('../fonts/Outfit-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Outfit';src:url('../fonts/Outfit-ExtraBold.woff2') format('woff2'),url('../fonts/Outfit-ExtraBold.ttf') format('truetype');font-weight:800;font-style:normal;font-display:swap;}
@font-face{font-family:'Universo';src:url('../fonts/Universo-Light.woff2') format('woff2'),url('../fonts/Universo-Light.ttf') format('truetype');font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:'Universo';src:url('../fonts/Universo-Bold.woff2') format('woff2'),url('../fonts/Universo-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Universo';src:url('../fonts/Universo-Black.woff2') format('woff2'),url('../fonts/Universo-Black.ttf') format('truetype');font-weight:800 900;font-style:normal;font-display:swap;}
/* ---- Tokens ---- */
:root{
--navy:#0c1e36;
--navy-deep:#020a11;
--ink:#0c1e36;
--grey:#82929f;
--text-muted:#5b6671;
--line:#d7dce0;
--bg:#ffffff;
--bg-soft:#f1f3f5;
--bg-card:#eef1f3;
--c-1:#1d3554; --c-2:#3a5170; --c-3:#5b6f88; --c-4:#a7b3bc; --c-5:#c9d1d7;
--maxw:1320px;
--maxw-wide:1440px;
--radius-pill:36px;
}
/* ---- Reset ---- */
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;overflow-x:clip;}
body{font-family:'Outfit',sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:clip;}
h1,h2,h3,h4{font-family:'Universo','Outfit',sans-serif;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--grey);color:#fff;}
/* ---- Layout helpers ---- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:40px;padding-right:40px;}
.wrap-wide{max-width:var(--maxw-wide);margin:0 auto;padding-left:40px;padding-right:40px;}
.section{padding:120px 40px;}
/* ---- Buttons / pills ---- */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:18px;
padding:16px 32px;border-radius:var(--radius-pill);line-height:1;cursor:pointer;white-space:nowrap;
transition:transform .15s ease,opacity .15s ease,background .15s ease;border:none;}
.btn:hover{transform:translateY(-2px);}
.btn-dark{background:var(--navy);color:#fff;}
.btn-dark:hover{background:#13294a;}
.btn-light{background:#fff;color:var(--navy);}
.btn-sm{font-size:15px;padding:12px 22px;}
.link-underline{font-weight:600;font-size:18px;text-decoration:underline;color:var(--ink);}
.link-underline:hover{opacity:.7;}
/* ---- Image slot placeholders (swap for ![]()
when ready) ---- */
.img-slot{display:flex;align-items:center;justify-content:center;text-align:center;
background:linear-gradient(135deg,#eef1f3,#dfe4e8);color:var(--grey);
font-size:14px;font-weight:600;letter-spacing:.3px;padding:20px;border-radius:16px;}
.img-slot.r28{border-radius:28px;}
.img-slot.r22{border-radius:22px;}
.img-slot.r20{border-radius:20px;}
/* ---- Announcement bar ---- */
.announce{background:var(--navy);color:var(--c-5);font-size:14px;text-align:center;
padding:10px 20px;font-weight:500;}
/* ---- Nav ---- */
.nav{display:flex;align-items:center;justify-content:space-between;max-width:min(1680px,94vw);
margin:0 auto;padding:16px 40px;position:sticky;top:0;z-index:50;}
.nav::before{content:"";position:absolute;top:0;bottom:0;left:calc(-50vw + 50%);width:100vw;
background:rgba(255,255,255,.9);backdrop-filter:saturate(160%) blur(12px);box-shadow:0 1px 0 var(--line),0 8px 24px -18px rgba(2,10,17,.4);z-index:-1;}
.nav-left{display:flex;align-items:center;gap:48px;}
.brand{display:flex;align-items:center;gap:11px;font-family:'Universo','Outfit',sans-serif;
font-weight:700;font-size:28px;letter-spacing:2px;text-transform:uppercase;color:var(--ink);}
.brand img{height:44px;width:auto;}
.nav-links{display:flex;gap:30px;font-size:17px;font-weight:500;color:var(--ink);align-items:center;}
.nav-item{position:relative;}
.nav-item.has-sub>a{display:inline-flex;align-items:center;gap:5px;cursor:pointer;}
.nav-caret{width:13px;height:13px;transition:transform .2s;}
.nav-item.has-sub:hover .nav-caret,.nav-item.has-sub:focus-within .nav-caret{transform:rotate(180deg);}
.nav-sub{position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:18px;visibility:hidden;pointer-events:none;z-index:60;}
.nav-item.has-sub:hover .nav-sub,.nav-item.has-sub:focus-within .nav-sub{visibility:visible;pointer-events:auto;}
.nav-sub-inner{display:grid;grid-template-columns:minmax(0,1fr) 252px;min-width:900px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:0 1px 2px rgba(12,30,54,.06),0 44px 96px -44px rgba(12,30,54,.55);overflow:hidden;opacity:0;transform:translateY(10px);transition:opacity .22s ease,transform .28s cubic-bezier(.16,1,.3,1);}
.nav-item.has-sub:hover .nav-sub-inner,.nav-item.has-sub:focus-within .nav-sub-inner{opacity:1;transform:translateY(0);}
.nav-sub-cols{column-count:3;column-gap:34px;padding:28px 32px;}
.nav-sub-col{display:flex;flex-direction:column;gap:2px;break-inside:avoid;margin-bottom:22px;}
.nav-sub-h{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--grey);margin-bottom:9px;}
.nav-sub-h svg{width:15px;height:15px;flex:0 0 auto;}
.nav-sub-col a{font-size:14.5px;font-weight:500;color:var(--ink);padding:6px 10px;margin-left:-10px;border-radius:9px;line-height:1.2;transition:background .15s ease,transform .15s ease;}
.nav-sub-col a:hover{background:var(--bg-soft);transform:translateX(2px);}
.nav-sub-feature{display:flex;flex-direction:column;justify-content:space-between;gap:24px;background:linear-gradient(160deg,#16273f,#020a11);color:#fff;padding:28px 26px;}
.nsf-top{display:flex;flex-direction:column;gap:11px;}
.nsf-point{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:500;color:rgba(255,255,255,.92);line-height:1.25;}
.nsf-point svg{width:15px;height:15px;flex:0 0 auto;color:#fff;opacity:.9;}
.nsf-bottom{display:flex;flex-direction:column;gap:9px;}
.nsf-eyebrow{font-size:11.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--grey);}
.nsf-title{font-family:Universo,Outfit,sans-serif;font-weight:800;font-size:21px;line-height:1.14;color:#fff;}
.nsf-cta{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:14px;color:#fff;margin-top:4px;}
.nsf-cta svg{width:16px;height:16px;transition:transform .25s cubic-bezier(.16,1,.3,1);}
.nav-sub-feature:hover .nsf-cta svg{transform:translateX(5px);}
@media(max-width:1000px){.nav-sub{display:none;}}
.nav-links a:hover,.nav-actions a:hover{opacity:.65;}
.nav-actions{display:flex;align-items:center;gap:22px;font-size:17px;font-weight:500;}
.nav-toggle{display:none;background:none;border:none;font-size:26px;color:var(--ink);cursor:pointer;}
/* ---- Hero ---- */
.hero{max-width:min(1680px,94vw);margin:0 auto;padding:56px 40px 8px;text-align:center;} /* fluid — fills wide screens instead of dead space */
.hero-eyebrow{font-size:clamp(13px,0.95vw,18px);font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--grey);margin-bottom:22px;}
.hero-ratings{display:flex;gap:34px;justify-content:center;align-items:center;
font-size:15px;font-weight:600;color:var(--ink);flex-wrap:wrap;}
.hero-ratings span{display:inline-flex;align-items:center;gap:8px;}
.hero-ratings .pin{width:18px;height:18px;flex:0 0 auto;color:var(--ink);}
.hero-ratings .muted{font-weight:400;color:var(--grey);}
.hero h1{font-weight:800;font-size:clamp(58px,10vw,172px);line-height:.9;
letter-spacing:-0.03em;color:var(--ink);margin-top:40px;} /* 10vw keeps laptop size; cap raised 158->172 so wide screens grow; container widened to 1680 kills the side dead-space */
@media(max-width:900px){.hero h1{font-size:clamp(46px,12vw,104px);letter-spacing:-0.02em;}}
.hero-sub{max-width:min(740px,92vw);margin:clamp(26px,2.4vw,42px) auto 0;font-size:clamp(18px,1.6vw,30px);line-height:1.45;
color:var(--text-muted);font-weight:400;}
.hero-cta{display:flex;gap:18px;justify-content:center;align-items:center;
margin-top:clamp(34px,2.6vw,48px);flex-wrap:wrap;}
.hero-img{max-width:min(1460px,94vw);margin:8px auto 0;padding:0 24px;position:relative;z-index:3;}
.hero-img .img-slot{width:100%;height:640px;}
.hero-device{display:block;width:100%;max-width:1120px;margin:0 auto;
filter:drop-shadow(0 50px 64px rgba(2,10,17,.28));will-change:transform;}
@keyframes heroFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-16px);}}
/* ---- HERO PREMIUM MOTION PACKAGE (2026-06-24) ---- */
/* #1 Headline line-by-line mask reveal */
.hero h1 .hl{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em;}
html.reveal-on .hero h1 .hl-i{display:block;transform:translateY(115%);transition:transform .95s cubic-bezier(.22,1,.36,1);}
html.reveal-on .hero h1 .hl:nth-child(1) .hl-i{transition-delay:.10s;}
html.reveal-on .hero h1 .hl:nth-child(2) .hl-i{transition-delay:.24s;}
html.reveal-on .hero h1.rv-in .hl-i{transform:none;}
html.reveal-on .hero h1{opacity:1 !important;transform:none !important;transition:none;} /* lines move, not the block */
/* #3 Mouse-tilt 3D wrapper (tilt on parent) + float (on child, composes) */
.hero-tilt{transform:perspective(1200px) rotateX(0) rotateY(0);transform-style:preserve-3d;transition:transform .4s cubic-bezier(.22,1,.36,1);will-change:transform;}
.hero-floaty{position:relative;animation:heroFloat 6.5s ease-in-out infinite;will-change:transform;}
/* #5 Terminal approval micro-story chip */
.pay-chip{position:absolute;top:7%;right:5%;display:flex;align-items:center;gap:11px;
background:#fff;border-radius:16px;padding:12px 16px;z-index:4;
box-shadow:0 1px 2px rgba(12,30,54,.06),0 26px 52px -20px rgba(12,30,54,.5);}
.pay-check{width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;
display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.pay-check svg{width:18px;height:18px;stroke-dasharray:26;stroke-dashoffset:26;}
.pay-txt{display:flex;flex-direction:column;line-height:1.12;}
.pay-txt b{font-size:14px;font-weight:700;color:var(--ink);}
.pay-amt{font-size:13px;color:var(--grey);font-weight:600;font-variant-numeric:tabular-nums;}
html.reveal-on .pay-chip{opacity:0;transform:translateY(16px) scale(.88);animation:chipIn .7s cubic-bezier(.34,1.56,.64,1) 1.15s both;}
html.reveal-on .pay-chip .pay-check svg{animation:checkdraw .55s ease 1.55s both;}
@keyframes chipIn{to{opacity:1;transform:none;}}
@keyframes checkdraw{to{stroke-dashoffset:0;}}
@media(max-width:600px){.pay-chip{top:3%;right:2%;padding:9px 12px;gap:8px;}.pay-check{width:28px;height:28px;}.pay-check svg{width:15px;height:15px;}}
/* #8 Magnetic CTA — JS sets transform; this smooths the snap-back */
.hero-cta .btn-dark{transition:transform .25s cubic-bezier(.22,1,.36,1),background .15s ease;}
@media (prefers-reduced-motion:reduce){
.hero-floaty{animation:none;}
html.reveal-on .hero h1 .hl-i{transform:none !important;transition:none;}
html.reveal-on .pay-chip{opacity:1;transform:none;animation:none;}
html.reveal-on .pay-chip .pay-check svg{stroke-dashoffset:0;animation:none;}
.hero-tilt{transition:none;}
}
/* ---- Generic 2-col grid ---- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
/* ---- Grey transfer section ---- */
.transfer{background:var(--grey);}
.transfer h2{font-weight:800;font-size:clamp(40px,5vw,74px);line-height:1.02;
letter-spacing:-2px;color:var(--ink);}
.transfer p{font-size:21px;line-height:1.5;color:var(--ink);margin-top:26px;
max-width:440px;font-weight:400;}
.transfer .sec-eyebrow{font-size:13px;font-weight:700;color:var(--ink);margin:0 0 16px;max-width:none;}
.transfer .center{display:flex;justify-content:center;}
.calc-card{width:420px;max-width:100%;background:linear-gradient(160deg,#0c1e36,#020a11);border:1px solid rgba(255,255,255,.08);border-radius:24px;text-align:center;box-shadow:0 40px 90px rgba(2,10,17,.34);padding:26px;color:#fff;}
.calc-card .calc-eyebrow{margin:0 0 16px;font-size:13px;color:var(--grey);text-transform:uppercase;letter-spacing:1.5px;font-weight:600;line-height:1.4;}
.calc-inset{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.07);border-radius:18px;padding:22px 22px 20px;color:#fff;}
.calc-inset .calc-inset-label{margin:0;font-size:13px;font-weight:600;color:#C9D1D7;text-transform:uppercase;letter-spacing:1.5px;line-height:1.4;}
.calc-amt{margin:8px 0 16px;display:flex;align-items:baseline;justify-content:center;font-family:Universo,Outfit,sans-serif;color:#fff;line-height:1;}
.calc-amt .calc-cur{font-size:34px;font-weight:800;color:#9fb0c0;}
.calc-amt #ayear{font-size:58px;font-weight:800;}
.calc-gauge{height:8px;border-radius:999px;background:rgba(255,255,255,.16);overflow:hidden;}
.calc-gauge #gauge-fill{display:block;height:100%;width:60%;background:#fff;border-radius:999px;transition:width .25s ease;}
.calc-inset-row{display:flex;justify-content:space-between;font-size:13px;color:#9fb0c0;margin-top:12px;}
.calc-inset-row #amonth{color:#fff;font-weight:600;}
.calc-body{padding:22px 4px 4px;}
.calc-row{display:flex;justify-content:space-between;font-size:12px;color:#9fb0c0;text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;}
.calc-row #vol{font-weight:600;color:#fff;}
.calc-body input[type=range]{width:100%;accent-color:#fff;cursor:pointer;}
.calc-card .calc-trust{margin:16px 0 0;font-size:13px;color:#9fb0c0;line-height:1.4;}
.modal-overlay{position:fixed;inset:0;background:rgba(2,10,17,.55);display:none;align-items:center;justify-content:center;z-index:200;padding:24px;}
.modal-overlay.open{display:flex;}
.modal{background:#fff;border-radius:22px;max-width:480px;width:100%;padding:34px 32px;text-align:left;box-shadow:0 40px 90px rgba(2,10,17,.4);position:relative;}
.modal h3{font-size:24px;margin:0 0 14px;color:var(--ink);}
.modal p{font-size:16px;line-height:1.55;color:var(--grey);margin:0 0 12px;}
.modal-close{position:absolute;top:12px;right:16px;background:none;border:0;font-size:28px;line-height:1;color:var(--grey);cursor:pointer;}
.modal-close:hover{color:var(--ink);}
/* ---- Transfer card (calculator mock) ---- */
.tcard{width:380px;max-width:100%;background:#fff;border-radius:28px;overflow:hidden;
box-shadow:0 40px 90px rgba(2,10,17,.22);}
.tcard-head{background:var(--navy);padding:26px 26px 30px;}
.tcard-head .title{font-weight:800;font-size:24px;color:#fff;line-height:1.05;}
.tcard-row{background:#fff;border-radius:16px;padding:14px 16px;display:flex;
align-items:center;justify-content:space-between;margin-top:18px;}
.tcard-country{display:flex;align-items:center;gap:10px;font-weight:600;font-size:16px;color:var(--ink);}
.tcard-body{padding:22px;}
.tcard-label{font-size:14px;color:var(--grey);}
.tcard-amt{display:flex;align-items:center;justify-content:space-between;margin-top:6px;}
.tcard-cur{display:flex;align-items:center;gap:8px;font-weight:600;font-size:16px;}
.tcard-big{font-weight:800;font-size:32px;color:var(--ink);}
.tcard-note{margin-top:14px;background:var(--bg-card);border-radius:12px;padding:12px 14px;
font-size:12px;color:var(--ink);line-height:1.4;}
.tcard-line{display:flex;justify-content:space-between;font-size:14px;}
.tcard-line .muted{color:var(--grey);}
.tcard-line .val{font-weight:600;color:var(--ink);}
.tcard-sep{margin-top:20px;padding-top:16px;border-top:1px solid var(--bg-card);}
.tcard-cta{margin-top:20px;background:var(--navy);color:#fff;text-align:center;
font-weight:600;font-size:16px;padding:15px;border-radius:16px;}
.flag-us{width:26px;height:26px;border-radius:50%;
background:linear-gradient(#3c3b6e,#3c3b6e) top left/42% 54% no-repeat,
repeating-linear-gradient(#b22234 0 7.7%,#fff 7.7% 15.4%);}
.dot-eur{width:24px;height:24px;border-radius:50%;background:var(--navy);}
.dot-usd{width:24px;height:24px;border-radius:50%;
background:linear-gradient(#3c3b6e,#3c3b6e) top left/42% 54% no-repeat,
repeating-linear-gradient(#b22234 0 7.7%,#fff 7.7% 15.4%);}
/* ---- Possibilities ---- */
.possib{background:var(--bg-soft);text-align:center;}
.possib h2{font-family:Outfit,sans-serif;font-weight:800;font-size:clamp(40px,5vw,66px);letter-spacing:-2px;
color:var(--ink);line-height:1.02;}
.possib-grid{margin-top:54px;align-items:start;}
.poss-card{background:#fff;border-radius:24px;padding:36px 30px;text-align:left;
box-shadow:0 1px 2px rgba(12,30,54,.04), 0 10px 28px -16px rgba(12,30,54,.22);
transition:background-color .45s ease,color .45s ease,transform .45s ease,box-shadow .45s ease;}
.diff-carousel{position:relative;margin:54px auto 0;max-width:1100px;}
.diff-carousel::before,.diff-carousel::after{content:"";position:absolute;top:0;bottom:0;width:72px;z-index:3;pointer-events:none;}
.diff-carousel::before{left:0;background:linear-gradient(90deg,#f1f3f5 12%,rgba(241,243,245,0));}
.diff-carousel::after{right:0;background:linear-gradient(270deg,#f1f3f5 12%,rgba(241,243,245,0));}
.diff-viewport{overflow:hidden;padding:20px 4px 28px;cursor:grab;touch-action:pan-y;}
.diff-carousel.dragging .diff-viewport{cursor:grabbing;}
.diff-track{display:flex;gap:24px;align-items:stretch;will-change:transform;user-select:none;}
.diff-track .poss-card{flex:0 0 auto;width:calc((100% - 48px)/3);box-sizing:border-box;display:flex;flex-direction:column;}
.diff-track .poss-card.is-active{background:#0c1e36;color:#fff;transform:translateY(-10px);box-shadow:none;}
.diff-track .poss-card.is-active .poss-ico{background:rgba(255,255,255,.14);color:#fff;}
.diff-track .poss-card.is-active h3{color:#fff;}
.diff-track .poss-card.is-active p{color:#c9d1d7;}
/* ---- Assistant chat widget ---- */
.kchat{position:fixed;right:22px;bottom:22px;z-index:120;font-family:'Outfit',sans-serif;}
.kchat-toggle{width:60px;height:60px;border-radius:50%;border:0;background:var(--navy);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 16px 42px -12px rgba(2,10,17,.55);transition:transform .2s ease;}
.kchat-toggle:hover{transform:scale(1.06);}
.kchat-toggle svg{width:26px;height:26px;}
.kchat-ic-close{display:none;}
.kchat.open .kchat-ic-open{display:none;}
.kchat.open .kchat-ic-close{display:block;}
.kchat-panel{position:absolute;right:0;bottom:74px;width:min(372px,calc(100vw - 28px));background:#fff;border-radius:20px;box-shadow:0 44px 96px -34px rgba(2,10,17,.6);overflow:hidden;display:flex;flex-direction:column;max-height:min(564px,calc(100vh - 120px));opacity:0;visibility:hidden;transform:translateY(14px) scale(.98);transform-origin:bottom right;transition:opacity .2s ease,transform .28s cubic-bezier(.16,1,.3,1),visibility .2s;}
.kchat.open .kchat-panel{opacity:1;visibility:visible;transform:none;}
.kchat-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px;background:linear-gradient(160deg,#16273f,#0a1525);color:#fff;}
.kchat-id{display:flex;align-items:center;gap:11px;}
.kchat-avatar{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;font-family:'Universo','Outfit',sans-serif;font-weight:800;font-size:18px;}
.kchat-id strong{display:block;font-size:15px;line-height:1.2;}
.kchat-id span{font-size:11.5px;color:#aeb9c2;}
.kchat-wa{flex:0 0 auto;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;}
.kchat-wa svg{width:19px;height:19px;}
.kchat-body{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:10px;background:var(--bg-soft);}
.kmsg{max-width:85%;padding:11px 14px;border-radius:14px;font-size:14px;line-height:1.5;}
.kmsg.bot{align-self:flex-start;background:#fff;color:var(--ink);border:1px solid var(--line);border-bottom-left-radius:5px;}
.kmsg.me{align-self:flex-end;background:var(--navy);color:#fff;border-bottom-right-radius:5px;}
.kmsg a{color:inherit;font-weight:600;text-decoration:underline;}
.kwa-wrap{align-self:flex-start;}
.kchat-wabtn{display:inline-flex;align-items:center;gap:8px;background:var(--navy);color:#fff;padding:10px 16px;border-radius:999px;font-weight:600;font-size:13.5px;text-decoration:none;}
.kchat-wabtn svg{width:17px;height:17px;}
.kchat-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 12px;background:var(--bg-soft);}
.kchip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 13px;font-size:12.5px;font-weight:600;color:var(--ink);cursor:pointer;transition:background .15s,color .15s,border-color .15s;}
.kchip:hover{background:var(--navy);color:#fff;border-color:var(--navy);}
.kchat-input{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);background:#fff;}
.kchat-input input{flex:1;min-width:0;border:1px solid var(--line);border-radius:999px;padding:10px 15px;font-size:14px;font-family:inherit;color:var(--ink);outline:none;transition:border-color .15s;}
.kchat-input input:focus{border-color:var(--navy);}
.kchat-input button{flex:0 0 auto;width:42px;height:42px;border-radius:50%;border:0;background:var(--navy);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.kchat-input button svg{width:18px;height:18px;}
@media(max-width:600px){.kchat{right:14px;bottom:14px;}.kchat-toggle{width:54px;height:54px;}}
/* Shared section eyebrow */
.sec-eyebrow{font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--grey);margin:0 0 14px;}
/* Industries — intro + one section per category */
.industries-intro{background:#fff;padding:92px 40px 34px;text-align:center;}
.industries-intro .wrap{max-width:900px;}
.industries-intro h2{font-weight:800;font-size:clamp(32px,4.6vw,58px);letter-spacing:-1.5px;color:var(--ink);line-height:1.03;margin:4px 0 0;}
.ii-lead{max-width:62ch;margin:18px auto 0;font-size:18px;line-height:1.6;color:var(--text-muted);}
.cat-row{background:#fff;padding:74px 40px;}
.cat-row.alt{background:var(--bg-soft);}
.cat-card{max-width:1160px;margin:0 auto;}
.cat-num{display:none;}
.cat-card-inner{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(40px,5.2vw,84px);align-items:center;}
.cat-row.alt .cat-media{order:-1;}
.cat-eyebrow{color:var(--grey);font-weight:700;letter-spacing:1.8px;text-transform:uppercase;font-size:13px;margin:0 0 16px;}
.cat-copy h2{font-family:Universo,Outfit,sans-serif;font-weight:800;font-size:clamp(34px,4vw,56px);color:var(--ink);letter-spacing:-1.5px;line-height:1;margin:0 0 18px;}
.cat-lead{font-size:17px;line-height:1.7;color:var(--text-muted);margin:0 0 26px;max-width:46ch;}
.cat-checks{list-style:none;margin:0 0 32px;padding:0;display:grid;gap:14px;}
.cat-checks li{display:flex;align-items:flex-start;gap:12px;font-size:16px;line-height:1.45;color:var(--ink);font-weight:500;}
.cat-checks .ck{flex:0 0 auto;width:24px;height:24px;border-radius:7px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;margin-top:1px;}
.cat-checks .ck svg{width:13px;height:13px;}
.cat-cta{display:flex;gap:26px;align-items:center;flex-wrap:wrap;}
.cat-link{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:16px;color:var(--ink);}
.cat-link svg{width:17px;height:17px;color:var(--grey);}
.cat-link:hover{color:var(--grey);}
.cat-media{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:4/3;background:var(--bg-card);}
.cat-shot{position:relative;width:100%;height:100%;overflow:hidden;}
.cat-shot img,.cat-shot .img-slot{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.16,1,.3,1);}
.cat-media:hover .cat-shot img{transform:scale(1.04);}
.cat-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:78px;height:78px;border-radius:50%;border:0;background:rgba(255,255,255,.18);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 18px 44px -12px rgba(2,10,17,.6);transition:transform .25s cubic-bezier(.16,1,.3,1),background .25s;z-index:2;}
.cat-play svg{width:27px;height:27px;margin-left:4px;}
.cat-play:hover{transform:translate(-50%,-50%) scale(1.09);background:rgba(255,255,255,.3);}
@media(max-width:860px){.cat-card-inner{grid-template-columns:1fr;gap:30px;}.cat-row.alt .cat-media{order:0;}.cat-row{padding:54px 28px;}}
@media (prefers-reduced-motion:reduce){.cat-shot img{transition:none;}.cat-media:hover .cat-shot img{transform:none;}}
/* ===================== STICKY-STACK INDUSTRIES (2026-06-24) =====================
Sourced from a Framer-style "vertical card stack" reference clip.
Each .cat-row pins at top:64px while the next emerges from below, overlaying it.
Apple AirPods / Framer-template pattern. */
.cat-stack{position:relative;}
.cat-stack .cat-row{
position:sticky;
top:64px; /* clear sticky nav (~60px) + small gap */
/* was calc(100vh - 64px) — that left huge dead space when content was shorter.
Now bound to 620–720px so cards feel intentional, sticky-stack still works. */
min-height:620px;
display:flex;align-items:center;
padding-top:60px;padding-bottom:60px; /* tighter than the original 74px, helps content fill */
z-index:1;
}
@media(min-height:880px){.cat-stack .cat-row{min-height:720px;}}
/* Newer (lower-DOM) rows render ON TOP of older — natural paint order does this,
but be explicit so any layout reorders don't break the stack. */
.cat-stack .cat-row{z-index:calc(1 + var(--ci, 0));}
/* Give the white-on-white stack a subtle separator so the joining edge reads */
.cat-stack .cat-row{box-shadow:0 -1px 0 rgba(12,30,54,.06);}
.cat-stack .cat-row:first-child{box-shadow:none;}
/* Make every card opaque (default .cat-row already has bg, .alt has bg-soft — keep) */
/* On mobile, sticky is overkill (cards taller than viewport, can't read in flow) */
@media(max-width:860px){
.cat-stack .cat-row{position:static;min-height:0;display:block;box-shadow:none;}
}
/* Inside .cat-stack, replace the side-slide reveals with a clean fade-up that
doesn't fight the sticky positioning (transform on a sticky element breaks pinning). */
html.reveal-on .cat-stack .cat-row .cat-copy,
html.reveal-on .cat-stack .cat-row .cat-media{
transform:translateY(20px) !important;
transition-duration:.5s !important;
}
html.reveal-on .cat-stack .cat-row .cat-copy.rv-in,
html.reveal-on .cat-stack .cat-row .cat-media.rv-in{
transform:none !important;
}
/* ---- Sub-page templates (page hero / prose / cta) ---- */
.page-hero{background:linear-gradient(160deg,#0c1e36,#020a11);color:#fff;padding:120px 40px 84px;text-align:center;}
.page-hero .wrap{max-width:860px;}
.page-hero .sec-eyebrow{color:var(--grey);}
.page-hero h1{font-weight:800;font-size:clamp(40px,6vw,78px);line-height:1;letter-spacing:-2px;color:#fff;margin:0 0 18px;}
.page-hero p{font-size:19px;line-height:1.55;color:#c9d1d7;max-width:60ch;margin:0 auto 30px;}
.crumbs{font-size:13px;color:rgba(255,255,255,.55);margin:0 0 18px;}
.crumbs a{color:rgba(255,255,255,.85);text-decoration:none;}
.crumbs a:hover{color:#fff;text-decoration:underline;}
.crumbs span{margin:0 7px;opacity:.5;}
.ind-related{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:8px;}
.ind-related a{font-weight:600;color:var(--ink);}
.ind-related a:hover{opacity:.65;}
.prose{max-width:820px;margin:0 auto;padding:74px 40px;}
.prose h2{font-family:Universo,Outfit,sans-serif;font-weight:800;font-size:clamp(26px,3vw,38px);color:var(--ink);letter-spacing:-1px;margin:46px 0 14px;line-height:1.1;}
.prose h2:first-child{margin-top:0;}
.prose h3{font-weight:700;font-size:20px;color:var(--ink);margin:30px 0 8px;}
.prose p{font-size:17px;line-height:1.7;color:var(--text-muted);margin:0 0 16px;}
.prose ul{margin:0 0 18px;padding-left:22px;}
.prose li{font-size:17px;line-height:1.7;color:var(--text-muted);margin-bottom:8px;}
.prose .btn{margin-top:18px;}
.prose .muted-note{font-size:14px;color:var(--grey);border-left:3px solid var(--line);padding:10px 0 10px 16px;margin:24px 0;}
.page-cta{background:var(--bg-soft);text-align:center;padding:74px 40px;}
.page-cta h2{font-family:Universo,Outfit,sans-serif;font-weight:800;font-size:clamp(28px,3.4vw,46px);color:var(--ink);letter-spacing:-1px;margin:0 0 12px;line-height:1.05;}
.page-cta p{font-size:17px;color:var(--text-muted);margin:0 auto 24px;max-width:52ch;}
.page-cta .hero-cta{display:flex;gap:18px;justify-content:center;align-items:center;flex-wrap:wrap;}
/* Industries hub */
.ind-hub{max-width:1080px;margin:0 auto;padding:74px 40px;display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
.ind-group{background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px;}
.ind-group h2{font-weight:800;font-size:22px;color:var(--ink);margin:0 0 14px;}
.ind-group a{display:inline-block;font-size:15px;color:var(--ink);background:var(--bg-soft);border-radius:999px;padding:7px 14px;margin:0 6px 8px 0;}
.ind-group a:hover{background:var(--navy);color:#fff;}
@media(max-width:760px){.ind-hub{grid-template-columns:1fr;}}
/* The problem */
.problem{background:#fff;padding:88px 40px;text-align:center;}
.problem .wrap{max-width:1080px;}
.problem h2{font-weight:800;font-size:clamp(32px,4.5vw,56px);letter-spacing:-1.5px;color:var(--ink);line-height:1.04;}
.problem-lead{max-width:62ch;margin:18px auto 0;font-size:18px;line-height:1.6;color:var(--text-muted);}
.problem-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px;}
.pstat{background:var(--bg-soft);border-radius:20px;padding:32px 24px;}
.pstat-n{display:block;font-family:Outfit,sans-serif;font-weight:800;font-size:clamp(30px,3.4vw,44px);color:var(--ink);line-height:1;margin-bottom:10px;}
.pstat-l{font-size:14px;line-height:1.5;color:var(--grey);}
.pstat.dark{background:var(--navy);}
.pstat.dark .pstat-n{color:#fff;}
.pstat.dark .pstat-l{color:#aeb9c2;}
@media(max-width:760px){.problem-stats{grid-template-columns:1fr;}}
/* How it works — 3 steps */
.steps{background:var(--bg-soft);padding:88px 40px;text-align:center;}
.steps .wrap{max-width:1040px;}
.steps h2{font-weight:800;font-size:clamp(32px,4.5vw,56px);letter-spacing:-1.5px;color:var(--ink);line-height:1.04;margin:10px 0 0;}
.spine{position:relative;list-style:none;margin:54px 0 0;padding:0;text-align:left;}
.spine::before{content:"";position:absolute;top:26px;bottom:26px;left:50%;width:2px;transform:translateX(-50%);background:var(--line);}
.spine-row{display:grid;grid-template-columns:1fr 64px 1fr;align-items:center;column-gap:16px;margin:0 0 26px;}
.spine-row:last-child{margin-bottom:0;}
.spine-node{grid-column:2;justify-self:center;position:relative;z-index:1;width:52px;height:52px;border-radius:50%;background:var(--navy);color:#fff;font-family:Outfit,sans-serif;font-weight:800;font-size:17px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 7px var(--bg-soft),0 12px 26px -12px rgba(12,30,54,.55);}
.spine-card{grid-column:1;background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px 26px;box-shadow:0 1px 2px rgba(12,30,54,.04),0 18px 34px -26px rgba(12,30,54,.3);}
.spine-row.alt .spine-card{grid-column:3;}
.spine-card h3{font-family:Outfit,sans-serif;font-weight:700;font-size:20px;color:var(--ink);margin:0 0 7px;line-height:1.2;}
.spine-card p{font-size:15px;line-height:1.55;color:var(--text-muted);margin:0;}
.steps .btn{margin-top:46px;}
@media(max-width:720px){
.spine::before{left:26px;}
.spine-row{grid-template-columns:52px 1fr;column-gap:20px;margin-bottom:20px;}
.spine-node{grid-column:1;justify-self:start;}
.spine-card,.spine-row.alt .spine-card{grid-column:2;}
}
/* FAQ */
.faq{background:#fff;padding:88px 40px;text-align:center;}
.faq .wrap{max-width:820px;}
.faq h2{font-weight:800;font-size:clamp(32px,4.5vw,56px);letter-spacing:-1.5px;color:var(--ink);line-height:1.04;}
.faq-list{margin-top:40px;text-align:left;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item summary{cursor:pointer;list-style:none;padding:20px 44px 20px 0;font-family:Outfit,sans-serif;font-weight:700;font-size:18px;color:var(--ink);position:relative;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:26px;line-height:1;color:var(--grey);font-weight:400;}
.faq-item[open] summary::after{content:"\2013";}
.faq-item p{margin:0 0 22px;font-size:16px;line-height:1.65;color:var(--text-muted);max-width:72ch;}
/* Founder letter / About — panel style (brand colors) */
.about{background:#e7edf5;padding:84px 32px;}
.about-inner{position:relative;max-width:1180px;margin:0 auto;background:#fff;border-radius:30px;padding:clamp(34px,4vw,64px);overflow:hidden;}
.about-sigwm{position:absolute;left:2%;top:33%;z-index:0;width:min(900px,86%);height:360px;background:url('../assets/bogdan-signature.png') left center/contain no-repeat;opacity:.06;transform:rotate(-4deg);pointer-events:none;}
.about-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:stretch;}
.about-copy .about-eyebrow{font-size:12px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:#82929f;margin:0 0 12px;max-width:none;}
.about h2{font-family:Outfit,sans-serif;font-weight:800;font-size:clamp(40px,5.2vw,68px);line-height:.98;letter-spacing:-2px;color:var(--ink);margin:0 0 22px;}
.about-copy>p{font-size:16px;line-height:1.7;color:#42505d;margin:0 0 18px;max-width:46ch;}
.about-copy .about-cheer{font-weight:600;color:var(--ink);margin-top:24px;}
.about-sign{margin-top:26px;}
.about-meta{color:var(--grey);font-size:14px;margin:0;line-height:1.6;}
.about-stats{display:grid;grid-template-columns:repeat(3,auto);gap:34px;justify-content:start;margin-top:30px;padding-top:26px;border-top:1px solid var(--line);}
.ab-stat{display:flex;flex-direction:column;}
.ab-n{font-family:Outfit,sans-serif;font-weight:800;font-size:28px;line-height:1;letter-spacing:-.5px;color:var(--ink);}
.ab-l{font-size:12.5px;line-height:1.3;color:var(--grey);margin-top:7px;}
.about-photo{position:relative;}
.about-photo .ph{position:relative;z-index:1;height:100%;min-height:430px;border-radius:20px;overflow:hidden;background:linear-gradient(160deg,#e6e9ed,#d2d8de);}
.about-photo .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%;border-radius:20px;}
.about-photo .ph .img-slot{width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;color:#8a99a8;font-size:14px;background:transparent;border:0;padding:20px;border-radius:20px;}
@media(max-width:880px){
.about-grid{grid-template-columns:1fr;gap:34px;}
.about-photo{order:-1;max-width:360px;}
.about-photo .ph{min-height:360px;}
.about-copy>p{max-width:none;}
.about-stats{gap:20px;}
.about-sigwm{height:200px;width:94%;top:auto;bottom:6%;}
}
/* Simplify Payments & Save Money — light bento (Variant B, refined) */
.bento{background:#e7edf5;padding:84px 32px;}
.bento-inner{position:relative;max-width:1180px;margin:0 auto;background:#f3f6fb;border-radius:30px;padding:clamp(26px,3.4vw,46px);}
.bento-head{display:grid;grid-template-columns:1.5fr 1fr;gap:30px;align-items:center;margin-bottom:30px;}
.bento-eyebrow{font-size:12px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:#82929f;margin:0 0 10px;}
.bento-head h2{font-family:Outfit,sans-serif;font-weight:800;font-size:clamp(30px,3.6vw,46px);line-height:1.04;letter-spacing:-1px;color:var(--ink);margin:0;}
.bento-intro{font-size:16px;line-height:1.55;color:#5a6873;margin:0;}
.bento-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;grid-auto-rows:minmax(142px,auto);}
.bento-tile{position:relative;background:#fff;border-radius:20px;padding:26px;box-shadow:0 1px 2px rgba(12,30,54,.04),0 14px 30px -22px rgba(12,30,54,.22);display:flex;flex-direction:column;}
.bento-ico{width:46px;height:46px;border-radius:50%;background:#0c1e36;color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:18px;flex:0 0 auto;}
.bento-ico svg{width:22px;height:22px;}
.bento-tile h3{font-family:Outfit,sans-serif;font-weight:700;font-size:19px;color:var(--ink);margin:0 0 7px;line-height:1.2;}
.bento-tile p{font-size:14px;line-height:1.5;color:#69757f;margin:0;}
/* hero */
.tile-hero{grid-column:span 5;grid-row:span 2;background:linear-gradient(160deg,#e2e7ee,#eff2f6);overflow:visible;}
.tile-hero>*{position:relative;z-index:1;}
.hero-eyebrow{font-size:12px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:#82929f;margin:0 0 6px;}
.tile-hero .stat{font-family:Outfit,sans-serif;font-weight:800;font-size:clamp(44px,5.6vw,68px);color:#0c1e36;line-height:1;margin:0 0 8px;letter-spacing:-1px;}
.tile-hero h3{font-size:clamp(22px,2.4vw,30px);margin:0 0 10px;color:var(--ink);}
.tile-hero p{font-size:15px;max-width:34ch;color:#41506a;}
.hero-k{position:absolute;right:-6px;bottom:-6px;z-index:0;width:clamp(150px,17vw,240px);height:clamp(150px,17vw,240px);background:url('../assets/kipko-k-black.png') right bottom/contain no-repeat;opacity:.08;pointer-events:none;}
/* cash = solid blue */
.tile-cash{grid-column:span 3;background:linear-gradient(150deg,#13294a,#0a1730);color:#fff;}
.tile-cash .bento-ico{background:rgba(255,255,255,.18);}
.tile-cash h3{color:#fff;}
.tile-cash p{color:rgba(255,255,255,.85);}
.tile-safe{grid-column:span 4;}
/* card = dark navy */
.tile-card{grid-column:span 7;background:#0a1525;padding:0;overflow:hidden;flex-direction:row;align-items:center;}
.tile-card .card-copy{position:relative;z-index:1;max-width:48%;padding:0 0 0 32px;}
.tile-card .card-kicker{font-family:Outfit,sans-serif;font-weight:800;font-size:clamp(18px,2vw,23px);line-height:1.14;letter-spacing:-.3px;color:#fff;margin:0 0 9px;}
.tile-card .card-sub{font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.72);margin:0;max-width:24ch;}
.tile-card .card-art{position:absolute;left:74%;top:50%;transform:translate(-50%,-50%);height:84%;width:auto;max-width:46%;object-fit:contain;object-position:center;filter:drop-shadow(0 16px 30px rgba(0,0,0,.5));}
.tile-flex{grid-column:span 3;}
.tile-fund{grid-column:span 3;}
.tile-monitor{grid-column:span 6;}
@media(max-width:920px){
.bento-head{grid-template-columns:1fr;gap:12px;}
.bento-grid{grid-template-columns:repeat(2,1fr);}
.tile-hero{grid-column:1 / -1;grid-row:auto;}
.tile-cash,.tile-safe,.tile-flex,.tile-fund{grid-column:span 1;}
.tile-card,.tile-monitor{grid-column:1 / -1;}
.tile-card{min-height:200px;}
}
@media(max-width:600px){
.bento-grid{grid-template-columns:1fr;}
.bento-grid>div{grid-column:1 / -1;grid-row:auto;}
.tile-card{flex-direction:column;align-items:stretch;min-height:0;padding:24px 24px 0;}
.tile-card .card-copy{max-width:none;padding:0;}
.tile-card .card-art{position:relative;left:auto;right:auto;top:auto;transform:none;height:auto;width:100%;max-width:none;max-height:190px;margin-top:6px;object-position:center bottom;}
}
.poss-ico{width:54px;height:54px;border-radius:15px;background:#eef1f3;display:flex;align-items:center;justify-content:center;color:var(--ink);margin-bottom:24px;}
.poss-ico svg{width:24px;height:24px;}
.poss-card h3{font-weight:800;font-size:23px;margin:0 0 12px;color:var(--ink);line-height:1.18;}
.poss-card p{font-size:16px;line-height:1.5;color:var(--grey);margin:0;}
/* What makes KIPKO different — static 3-card grid */
.diff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1100px;margin:48px auto 0;align-items:stretch;}
.diff-grid .poss-card{display:flex;flex-direction:column;}
.diff-grid .poss-feature{transform:none;}
@media(max-width:860px){.diff-grid{grid-template-columns:1fr;max-width:520px;}}
.poss-feature{background:#0c1e36;color:#fff;transform:translateY(-22px);
box-shadow:0 44px 74px -26px rgba(2,10,17,.55);position:relative;overflow:hidden;}
.poss-feature::after{content:"";position:absolute;top:-50px;right:-50px;width:180px;height:180px;border-radius:50%;
background:radial-gradient(circle,rgba(255,255,255,.10),transparent 70%);pointer-events:none;}
.poss-feature .poss-ico{background:rgba(255,255,255,.12);color:#fff;}
.poss-feature h3{color:#fff;}
.poss-feature p{color:#c9d1d7;}
@media(max-width:820px){ .poss-feature{transform:none;} }
/* ---- Dark banner (business / money without borders / app) ---- */
.banner{border-radius:32px;padding:90px 40px;text-align:center;
background:linear-gradient(120deg,var(--navy),var(--navy-deep));}
.banner .icon{width:64px;height:64px;border-radius:50%;background:rgba(130,146,159,.22);
display:flex;align-items:center;justify-content:center;margin:0 auto 36px;font-size:26px;}
.banner h2{font-weight:800;font-size:clamp(38px,5.5vw,76px);letter-spacing:-2px;color:#fff;line-height:.98;}
.banner p{max-width:640px;margin:30px auto 0;font-size:20px;color:var(--c-5);line-height:1.45;font-weight:400;}
.banner-cta{display:flex;gap:18px;justify-content:center;align-items:center;margin-top:38px;flex-wrap:wrap;}
.banner .link-underline{color:#fff;}
.band-cta{position:relative;overflow:visible;}
.band-device{position:absolute;top:-180px;left:50%;transform:translateX(-50%);width:340px;height:auto;filter:drop-shadow(0 36px 56px rgba(2,10,17,.5));pointer-events:none;}
@media(max-width:600px){.band-device{width:210px;top:-120px;}}
.banner-pills-label{margin:34px 0 16px;font-size:13px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:#9fb0c0;}
.banner-cats{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:40px;}
.banner-cats a,.banner-cats .cat-pill{display:inline-flex;align-items:center;gap:11px;border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff;padding:16px 30px;border-radius:999px;font-family:inherit;font-size:18px;font-weight:600;cursor:pointer;transition:background .2s,border-color .2s,color .2s;}
.banner-cats svg{width:22px;height:22px;flex:0 0 auto;}
.banner-cats a:hover,.banner-cats .cat-pill:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.45);}
.banner-cats a.active,.banner-cats .cat-pill.active{background:#fff;color:var(--ink);border-color:#fff;box-shadow:0 10px 24px -10px rgba(0,0,0,.5);}
/* industries explorer panels */
.cat-bar{position:sticky;top:90px;z-index:6;display:flex;justify-content:center;margin:22px auto 0;}
.cat-bar > .banner-cats{margin-top:0;background:linear-gradient(160deg,#0c1e36,#020a11);padding:12px 14px;border-radius:999px;box-shadow:0 16px 38px -14px rgba(2,10,17,.55);max-width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;}
.cat-bar > .banner-cats::-webkit-scrollbar{display:none;}
.cat-bar .cat-pill{flex:0 0 auto;}
@media(max-width:820px){.cat-bar{position:static;}}
.cat-panels{max-width:1320px;margin:36px auto 0;}
.cat-panel{display:none;}
.cat-panel.active{display:block;animation:catFade .42s cubic-bezier(.23,1,.32,1) both;}
@keyframes catFade{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
@media(prefers-reduced-motion:reduce){.cat-panel.active{animation:none;}}
/* peek carousel */
.peek{max-width:1180px;margin:40px auto 0;background:#fff;border:1px solid var(--line);border-radius:28px;padding:32px;box-shadow:0 26px 60px -30px rgba(2,10,17,.22);overflow:hidden;}
.peek-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:26px;}
.peek-head h3{font-family:Universo,Outfit,sans-serif;font-weight:800;font-size:clamp(22px,2.6vw,30px);color:var(--ink);line-height:1.1;}
.peek-nav{display:flex;gap:10px;flex:0 0 auto;}
.peek-nav button{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:20px;cursor:pointer;transition:border-color .2s,background .2s;}
.peek-nav button:hover{border-color:var(--ink);background:var(--bg-soft);}
.peek-track{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:2px;}
.peek-track::-webkit-scrollbar{display:none;}
.peek-card{flex:0 0 56%;scroll-snap-align:start;background:var(--bg-soft);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;}
.peek-img{height:220px;}
.peek-img .img-slot,.peek-img img{width:100%;height:100%;border-radius:0;object-fit:cover;}
.peek-body{padding:22px 24px 24px;}
.peek-body h4{font-family:Universo,Outfit,sans-serif;font-weight:800;font-size:22px;color:var(--ink);margin:0 0 8px;line-height:1.15;}
.peek-body p{font-size:15px;line-height:1.55;color:var(--grey);margin:0 0 16px;}
.peek-feats{list-style:none;padding:0;margin:0 0 18px;display:flex;flex-direction:column;gap:8px;}
.peek-feats li{position:relative;padding-left:26px;font-size:14px;color:var(--ink);line-height:1.4;}
.peek-feats li::before{content:"✓";position:absolute;left:0;top:0;width:18px;height:18px;border-radius:50%;background:#e7eef9;color:#1f6fe5;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.peek-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
/* horizontal expanding accordion */
.acc{max-width:1320px;margin:36px auto 0;}
.acc-head{margin-bottom:24px;}
.acc-eyebrow{display:block;font-size:13px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:#82929f;margin-bottom:8px;}
.acc-head h3{font-family:Universo,Outfit,sans-serif;font-weight:800;font-size:clamp(24px,3vw,38px);color:var(--ink);line-height:1.05;}
.acc-row{display:flex;gap:12px;height:500px;}
.acc-slat{position:relative;flex:1;min-width:60px;border-radius:20px;overflow:hidden;cursor:pointer;background:linear-gradient(160deg,#0c1e36,#020a11);transition:flex .55s cubic-bezier(.4,0,.2,1);}
.acc-slat.open{flex:6.5;cursor:default;}
.acc-photo{position:absolute;inset:0;z-index:0;}
.acc-photo img{width:100%;height:100%;object-fit:cover;}
.acc-photo .img-slot{width:100%;height:100%;background:transparent;color:transparent;border:0;}
.acc-slat::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(2,10,17,.32) 0%,rgba(2,10,17,.45) 38%,rgba(2,10,17,.82) 72%,rgba(2,10,17,.95) 100%);}
.acc-spine{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:22px 0;transition:opacity .3s;}
.acc-num{color:rgba(255,255,255,.5);font-size:13px;font-weight:600;}
.acc-vlabel{writing-mode:vertical-rl;transform:rotate(180deg);font-family:Universo,Outfit,sans-serif;font-weight:800;font-size:20px;color:#fff;white-space:nowrap;letter-spacing:1px;}
.acc-content{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:40px;opacity:0;pointer-events:none;transition:opacity .35s;text-shadow:0 1px 14px rgba(2,10,17,.45);}
.acc-slat.open .acc-spine{opacity:0;}
.acc-slat.open .acc-content{opacity:1;pointer-events:auto;transition-delay:.18s;}
.acc-tag{color:rgba(255,255,255,.65);font-size:13px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:12px;white-space:nowrap;}
.acc-content h4{font-family:Universo,Outfit,sans-serif;font-weight:800;font-size:clamp(26px,3vw,42px);color:#fff;margin:0 0 12px;line-height:1.05;}
.acc-content p{color:#c9d1d7;font-size:16px;line-height:1.5;max-width:46ch;margin:0 0 18px;}
.acc-chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px;}
.acc-chips span{border:1px solid rgba(255,255,255,.28);color:#fff;border-radius:999px;padding:8px 15px;font-size:13px;font-weight:600;white-space:nowrap;}
.acc-cta{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;background:#0c1e36;color:#fff;border-radius:999px;padding:14px 26px;font-weight:700;font-size:15px;transition:background .2s,transform .2s;}
.acc-cta:hover{background:#16335a;transform:translateY(-2px);}
@media(max-width:820px){
.acc-row{flex-direction:column;height:auto;gap:14px;}
.acc-slat{flex:none;border-radius:16px;min-height:auto;}
.acc-spine{display:none;}
.acc-content{position:relative;opacity:1;pointer-events:auto;padding:28px;}
.acc-cta{align-self:stretch;justify-content:center;}
}
@media(max-width:820px){.peek{padding:22px;}.peek-card{flex:0 0 82%;}}
/* video reviews */
.reviews .wrap{text-align:left;}
.rv-head{display:grid;grid-template-columns:1.25fr 1fr;gap:40px;align-items:end;margin-bottom:44px;}
.vr-eyebrow{font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#82929f;margin:0 0 14px;}
.reviews h2{margin:0;}
.rv-head-r{display:flex;flex-direction:column;align-items:flex-start;gap:22px;}
.vr-sub{max-width:46ch;margin:0;font-size:17px;line-height:1.6;color:var(--grey);}
.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.video-card{position:relative;aspect-ratio:16/9;border:0;padding:0;width:100%;font:inherit;border-radius:18px;background:linear-gradient(160deg,#16273f,#08111d);display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;box-shadow:0 24px 50px -28px rgba(2,10,17,.45);transition:transform .25s,box-shadow .25s;}
.vthumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
/* Video lightbox */
.vid-modal{position:fixed;inset:0;z-index:200;background:rgba(2,10,17,.88);display:none;align-items:center;justify-content:center;padding:24px;backdrop-filter:blur(3px);}
.vid-modal.open{display:flex;}
.vid-box{position:relative;flex:0 0 auto;width:min(1040px, 92vw, calc((100vh - 132px) * 16 / 9));}
.vid-ratio{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:16px;overflow:hidden;box-shadow:0 50px 110px -30px rgba(0,0,0,.7);}
.vid-ratio iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.vid-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px;}
.vid-title{color:#fff;font-family:Outfit,sans-serif;font-weight:700;font-size:17px;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.vid-close{flex:0 0 auto;width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.16);color:#fff;font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,transform .15s;}
.vid-close:hover{background:rgba(255,255,255,.3);transform:scale(1.08);}
.vid-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.16);color:#fff;font-size:30px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:3;transition:background .2s,transform .2s;}
.vid-nav:hover{background:rgba(255,255,255,.32);transform:translateY(-50%) scale(1.08);}
.vid-prev{left:20px;}
.vid-next{right:20px;}
.vid-nav svg{width:22px;height:22px;}
.vid-close svg{width:18px;height:18px;}
@media(max-width:760px){.vid-nav{width:40px;height:40px;}.vid-nav svg{width:18px;height:18px;}.vid-prev{left:6px;}.vid-next{right:6px;}.vid-title{font-size:15px;}}
.video-card:hover{transform:translateY(-5px);box-shadow:0 34px 62px -28px rgba(2,10,17,.55);}
.video-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(2,10,17,.6),transparent 48%);z-index:1;pointer-events:none;}
.vchip{position:absolute;top:14px;left:14px;z-index:2;background:rgba(255,255,255,.16);color:#fff;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.3px;}
.video-card .vplay{position:relative;z-index:2;width:62px;height:62px;border-radius:50%;background:#0c1e36;color:#fff;display:flex;align-items:center;justify-content:center;transition:transform .2s,background .2s;box-shadow:0 10px 26px -8px rgba(12,30,54,.4);}
.video-card .vplay svg{width:24px;height:24px;margin-left:3px;}
.video-card:hover .vplay{transform:scale(1.09);background:#16335a;}
.video-card .vlabel{position:absolute;bottom:14px;left:16px;right:16px;z-index:2;color:#fff;font-family:Outfit,sans-serif;font-weight:600;font-size:15px;text-align:left;text-shadow:0 1px 8px rgba(2,10,17,.6);}
.video-card .vlabel strong{display:block;font-weight:700;font-size:15px;color:#fff;margin-bottom:1px;}
@media(max-width:820px){.rv-head{grid-template-columns:1fr;gap:18px;align-items:start;}.video-grid{grid-template-columns:1fr;}.video-card{aspect-ratio:16/10;}}
/* ---- Security ---- */
.security h2{font-weight:800;font-size:clamp(44px,5.5vw,80px);letter-spacing:-2px;color:var(--ink);line-height:1;}
.security p{font-size:20px;color:var(--text-muted);line-height:1.5;margin-top:24px;max-width:440px;font-weight:400;}
.security .center{display:flex;justify-content:center;}
.security .img-slot{width:360px;max-width:100%;height:360px;}
.security-points{margin-top:70px;display:grid;grid-template-columns:repeat(3,1fr);gap:40px;}
.security-points .ico{font-size:30px;}
.security-points p{font-size:18px;color:var(--ink);margin-top:16px;line-height:1.45;font-weight:500;max-width:none;}
/* ---- Color strip ---- */
.color-strip{display:flex;height:64px;}
.color-strip span{flex:1;display:block;}
/* ---- Feature blocks ---- */
.features{display:flex;flex-direction:column;gap:140px;}
.feature{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;}
.feature .img-slot{width:100%;aspect-ratio:1/1;}
.feature h3{font-weight:800;font-size:clamp(36px,4.6vw,62px);letter-spacing:-2px;color:var(--ink);line-height:1.02;}
.feature p{font-size:20px;color:var(--text-muted);line-height:1.5;margin-top:24px;max-width:460px;font-weight:400;}
.feature-cta{display:flex;gap:20px;align-items:center;margin-top:32px;flex-wrap:wrap;}
.tag{display:inline-flex;align-items:center;gap:8px;background:var(--bg-card);border-radius:30px;
padding:9px 18px;font-weight:600;font-size:14px;color:var(--ink);margin-bottom:24px;}
/* ---- Testimonials ---- */
.testi-grid{display:grid;grid-template-columns:0.85fr 1fr 1fr;gap:30px;align-items:start;}
.testi-head .rating{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:var(--ink);}
.testi-head .rating .muted{font-weight:400;color:var(--grey);}
.testi-head h2{font-weight:800;font-size:clamp(46px,6.4vw,96px);letter-spacing:-3px;
color:var(--ink);line-height:.94;margin-top:24px;}
.testi-arrows{display:flex;gap:14px;margin-top:40px;}
.testi-arrows span{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;
justify-content:center;font-size:22px;cursor:pointer;}
.arrow-prev{background:var(--bg-card);color:var(--ink);}
.arrow-next{background:var(--navy);color:#fff;}
.testi-card{border-radius:24px;padding:36px;min-height:380px;display:flex;flex-direction:column;justify-content:space-between;}
.testi-card.grey{background:var(--grey);}
.testi-card.navy{background:var(--navy);}
.testi-card .quote{font-size:26px;font-weight:600;line-height:1.25;}
.testi-card.grey .quote{color:var(--ink);}
.testi-card.navy .quote{color:#fff;}
.testi-avatar{width:96px;height:96px;border-radius:50%;}
.testi-avatar.us{background:linear-gradient(#3c3b6e,#3c3b6e) top left/42% 54% no-repeat,
repeating-linear-gradient(#b22234 0 7.7%,#fff 7.7% 15.4%);}
.testi-avatar.uk{background:linear-gradient(90deg,transparent 44%,#fff 44% 56%,transparent 56%),
linear-gradient(0deg,transparent 44%,#fff 44% 56%,transparent 56%),
linear-gradient(90deg,transparent 46.5%,#c8102e 46.5% 53.5%,transparent 53.5%),
linear-gradient(0deg,transparent 46.5%,#c8102e 46.5% 53.5%,transparent 53.5%),#012169;}
.testi-by{align-self:flex-start;font-weight:600;font-size:15px;padding:12px 22px;border-radius:30px;}
.testi-card.grey .testi-by{background:var(--navy);color:#fff;}
.testi-card.navy .testi-by{background:#fff;color:var(--navy);}
/* ---- Money without borders globe ---- */
.globe{width:90px;height:90px;margin:0 auto 30px;border-radius:50%;
background:radial-gradient(circle at 35% 30%,var(--c-4),var(--navy));}
/* ---- App download ---- */
.appdl{border-radius:32px;padding:90px 40px;
background:linear-gradient(120deg,var(--navy-deep),var(--navy) 55%,var(--c-2));
display:flex;justify-content:center;}
.appdl-card{background:#fff;border-radius:24px;padding:56px;max-width:560px;text-align:center;}
.appdl-card h2{font-weight:800;font-size:clamp(34px,4vw,52px);letter-spacing:-1.5px;color:var(--ink);line-height:1.02;}
.appdl-card p{font-size:19px;color:var(--text-muted);margin-top:18px;line-height:1.4;font-weight:400;}
.appdl-badges{display:flex;gap:14px;justify-content:center;margin-top:30px;flex-wrap:wrap;}
.store-badge{background:var(--navy);color:#fff;font-weight:500;font-size:15px;padding:14px 24px;border-radius:12px;}
.qr{margin:30px auto 0;width:110px;height:110px;border-radius:12px;
background:repeating-linear-gradient(45deg,var(--navy),var(--navy) 5px,#fff 5px,#fff 10px);}
/* ---- Footer ---- */
.footer{background:var(--bg-soft);padding:70px 40px 50px;}
.footer .disclaimer{font-size:13px;color:var(--grey);line-height:1.6;max-width:960px;font-weight:400;}
.footer-cols{margin-top:46px;display:grid;grid-template-columns:repeat(4,1fr);gap:34px;}
.footer-cols h4{font-weight:700;font-size:15px;color:var(--ink);margin-bottom:16px;}
.footer-cols .col-links{display:flex;flex-direction:column;gap:11px;font-size:15px;color:var(--text-muted);font-weight:400;}
.footer-cols .col-links a:hover{color:var(--ink);}
.footer-bottom{margin-top:50px;padding-top:26px;border-top:1px solid var(--line);
display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.footer-brand{display:flex;align-items:center;gap:9px;font-family:'Universo','Outfit',sans-serif;
font-weight:700;font-size:24px;color:var(--ink);}
.footer-brand img{height:36px;width:auto;}
.footer-social{display:flex;gap:12px;}
.footer-social a{width:36px;height:36px;border-radius:50%;background:var(--navy);color:#fff;display:inline-flex;align-items:center;justify-content:center;transition:transform .18s ease,background .18s ease;}
.footer-social a:hover{transform:translateY(-2px);background:#16273f;}
.footer-social a svg{width:18px;height:18px;}
/* ============================================================
Responsive
============================================================ */
@media (max-width:1024px){
.feature{gap:48px;}
.testi-grid{grid-template-columns:1fr 1fr;}
.testi-head{grid-column:1 / -1;}
}
@media (max-width:860px){
.section{padding:80px 24px;}
.wrap,.wrap-wide{padding-left:24px;padding-right:24px;}
.nav{padding:16px 18px;gap:10px;}
.nav-links,.nav-actions .desktop-only{display:none;}
.nav-toggle{display:block;}
/* shrink nav so brand + pill + hamburger fit one line without overlap */
.brand{font-size:20px;letter-spacing:1px;gap:8px;}
.brand img{height:34px;}
.nav-actions{gap:10px;}
.nav .btn-sm{font-size:13px;padding:10px 15px;}
.hero{padding:40px 24px 24px;}
.hero-img{padding:0 24px;}
.hero-img .img-slot{height:380px;}
.grid-2,.grid-3,.feature,.security-points{grid-template-columns:minmax(0,1fr);}
.feature{gap:36px;}
/* keep image first on alternating rows when stacked */
.feature.reverse .feat-img{order:-1;}
.features{gap:90px;}
.transfer .center,.security .center{order:2;}
.testi-grid{grid-template-columns:1fr;}
.footer-cols{grid-template-columns:1fr 1fr;gap:28px;}
.appdl-card{padding:36px 24px;}
.banner{padding:64px 26px;}
}
@media (max-width:480px){
.hero-ratings{gap:14px;font-size:13px;}
.footer-cols{grid-template-columns:1fr;}
.testi-card{min-height:auto;}
.testi-card .quote{font-size:22px;}
}
/* Mobile menu — slide-in drawer (toggled via .nav-open on body) */
/* ===================== MOBILE MENU — full-screen navy (redesigned 2026-06-24) ===================== */
.mobile-scrim{display:none;} /* full-screen menu covers everything — no scrim needed */
.mobile-menu{
position:fixed;inset:0;width:100%;height:100vh;height:100dvh;z-index:95;
background:linear-gradient(165deg,#0c1e36 0%,#020a11 100%);color:#fff;
display:flex;flex-direction:column;overflow:hidden;
opacity:0;visibility:hidden;transform:scale(1.05);
transition:opacity .4s ease,transform .55s cubic-bezier(.22,1,.36,1),visibility .55s;
}
body.nav-open .mobile-menu{opacity:1;visibility:visible;transform:none;}
body.nav-open{overflow:hidden;}
.mobile-menu .grain{opacity:.10;z-index:0;}
.mm-head{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;padding:22px 26px;}
.mm-brand{display:flex;align-items:center;gap:11px;font-family:'Universo','Outfit',sans-serif;font-weight:700;letter-spacing:2px;text-transform:uppercase;font-size:20px;color:#fff;}
.mm-brand img{height:34px;width:auto;border-radius:8px;}
.mm-close{background:rgba(255,255,255,.08);border:0;color:#fff;cursor:pointer;width:46px;height:46px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .2s,transform .2s;}
.mm-close:hover{background:rgba(255,255,255,.16);transform:rotate(90deg);}
.mm-close svg{width:22px;height:22px;}
.mm-links{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;justify-content:center;padding:0 26px;gap:2px;overflow-y:auto;}
.mm-links a{
display:flex;align-items:center;justify-content:space-between;gap:16px;
font-family:'Universo','Outfit',sans-serif;font-weight:800;
font-size:clamp(34px,9vw,54px);letter-spacing:-1.5px;line-height:1.08;
color:#fff;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08);
opacity:0;transform:translateY(26px);
transition:opacity .5s ease,transform .6s cubic-bezier(.22,1,.36,1),color .2s ease;
}
body.nav-open .mm-links a{opacity:1;transform:none;transition-delay:calc(.12s + var(--mi,0)*.06s);}
.mm-links a:hover,.mm-links a:active{color:var(--grey);}
.mm-arrow{width:26px;height:26px;flex:0 0 auto;color:rgba(255,255,255,.45);transition:transform .3s cubic-bezier(.22,1,.36,1),color .2s;}
.mm-links a:hover .mm-arrow{transform:translateX(7px);color:#fff;}
.mm-cta{position:relative;z-index:1;padding:24px 26px calc(30px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:14px;
opacity:0;transform:translateY(16px);transition:opacity .5s ease .42s,transform .5s cubic-bezier(.22,1,.36,1) .42s;}
body.nav-open .mm-cta{opacity:1;transform:none;}
.mm-pill{width:100%;justify-content:center;font-size:18px;padding:18px;}
.mm-call{display:flex;align-items:center;justify-content:center;gap:10px;color:rgba(255,255,255,.78);font-weight:600;font-size:17px;}
.mm-call svg{width:18px;height:18px;}
.mm-call:hover{color:#fff;}
@media(prefers-reduced-motion:reduce){
.mobile-menu{transition:opacity .2s,visibility .2s;transform:none;}
.mm-links a,.mm-cta{transition:none;opacity:1;transform:none;}
body.nav-open .mm-links a{transition-delay:0s;}
.mm-close:hover{transform:none;}
}
body.nav-open .kchat{opacity:0;visibility:hidden;pointer-events:none;}
@media(min-width:861px){.mobile-menu,.mobile-scrim{display:none;}}
/* ===================== LEAD FUNNEL ===================== */
.funnel-wrap{background:#e7edf5;padding:84px 24px;}
.funnel{max-width:680px;margin:0 auto;background:#fff;border-radius:28px;padding:clamp(26px,4vw,46px);box-shadow:0 1px 2px rgba(12,30,54,.05),0 40px 90px -50px rgba(12,30,54,.55);}
.funnel [hidden]{display:none !important;}
.fnl-prog{display:flex;gap:8px;margin-bottom:30px;}
.fnl-seg{flex:1;height:6px;border-radius:3px;background:var(--line);transition:background .35s ease;}
.fnl-seg.is-on{background:var(--navy);}
.fnl-step{animation:fnlIn .4s cubic-bezier(.16,1,.3,1);}
@keyframes fnlIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.fnl-eyebrow{font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--grey);margin:0 0 10px;}
.fnl-h{font-family:Outfit,sans-serif;font-weight:800;font-size:clamp(24px,3.4vw,32px);line-height:1.1;letter-spacing:-1px;color:var(--ink);margin:0 0 22px;}
.fnl-back{background:none;border:0;color:var(--grey);font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;padding:0;margin:0 0 14px;transition:color .15s;}
.fnl-back:hover{color:var(--ink);}
.fnl-groups{display:flex;flex-direction:column;gap:12px;}
.fnl-groups{display:flex;flex-direction:column;gap:12px;}
.fnl-group{display:flex;align-items:center;gap:14px;text-align:left;width:100%;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 20px;cursor:pointer;font-family:inherit;
transition:border-color .25s,transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s;}
/* Framer rajib-style hover: row slides right, arrow nudges, icon tile fills navy */
.fnl-group:hover{border-color:var(--navy);transform:translateX(6px);box-shadow:0 18px 38px -22px rgba(12,30,54,.45);}
.fnl-group-ico{width:42px;height:42px;border-radius:12px;background:var(--bg-soft);color:var(--navy);display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:background .25s,color .25s,transform .3s cubic-bezier(.34,1.56,.64,1);}
.fnl-group-ico svg{width:22px;height:22px;}
.fnl-group:hover .fnl-group-ico{background:var(--navy);color:#fff;transform:scale(1.06) rotate(3deg);}
.fnl-group-name{font-weight:700;font-size:18px;color:var(--ink);}
.fnl-group-meta{margin-left:auto;font-size:13px;color:var(--grey);}
.fnl-arrow{color:var(--navy);font-size:18px;flex:0 0 auto;margin-left:auto;transition:transform .3s cubic-bezier(.22,1,.36,1);}
.fnl-group:hover .fnl-arrow{transform:translateX(5px);}
/* Framer agero-style staggered entrance — options fade-up one by one when the step activates */
.fnl-step.is-active .fnl-group,
.fnl-step.is-active .fnl-option,
.fnl-step.is-active .fnl-chip{animation:fnlOptIn .5s cubic-bezier(.22,1,.36,1) both;}
.fnl-step.is-active .fnl-group:nth-child(1),.fnl-step.is-active .fnl-option:nth-child(1),.fnl-step.is-active .fnl-chip:nth-child(1){animation-delay:.04s;}
.fnl-step.is-active .fnl-group:nth-child(2),.fnl-step.is-active .fnl-option:nth-child(2),.fnl-step.is-active .fnl-chip:nth-child(2){animation-delay:.10s;}
.fnl-step.is-active .fnl-group:nth-child(3),.fnl-step.is-active .fnl-option:nth-child(3),.fnl-step.is-active .fnl-chip:nth-child(3){animation-delay:.16s;}
.fnl-step.is-active .fnl-group:nth-child(4),.fnl-step.is-active .fnl-option:nth-child(4),.fnl-step.is-active .fnl-chip:nth-child(4){animation-delay:.22s;}
.fnl-step.is-active .fnl-group:nth-child(5),.fnl-step.is-active .fnl-option:nth-child(5),.fnl-step.is-active .fnl-chip:nth-child(5){animation-delay:.28s;}
.fnl-step.is-active .fnl-group:nth-child(n+6),.fnl-step.is-active .fnl-option:nth-child(n+6),.fnl-step.is-active .fnl-chip:nth-child(n+6){animation-delay:.34s;}
@keyframes fnlOptIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
@media(prefers-reduced-motion:reduce){
.fnl-step.is-active .fnl-group,.fnl-step.is-active .fnl-option,.fnl-step.is-active .fnl-chip{animation:none;}
.fnl-group:hover{transform:none;}
.fnl-group:hover .fnl-group-ico{transform:none;}
.fnl-group:hover .fnl-arrow{transform:none;}
}
.fnl-back-link{background:none;border:0;color:var(--grey);font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;padding:0;margin:0 0 16px;transition:color .15s;}
.fnl-back-link:hover{color:var(--ink);}
.fnl-chips{display:flex;flex-wrap:wrap;gap:10px;}
.fnl-chip{background:#eef2f7;border:1px solid transparent;border-radius:30px;padding:11px 18px;font-family:inherit;font-size:14.5px;font-weight:600;color:var(--ink);cursor:pointer;transition:background .15s,color .15s;}
.fnl-chip:hover{background:var(--navy);color:#fff;}
.fnl-chip-other{background:transparent;border-color:var(--line);color:var(--grey);}
.fnl-chip-other:hover{background:var(--ink);color:#fff;border-color:var(--ink);}
.fnl-options{display:flex;flex-direction:column;gap:12px;}
.fnl-option{display:flex;flex-direction:column;gap:4px;text-align:left;width:100%;background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 20px;cursor:pointer;font-family:inherit;transition:border-color .18s,transform .18s,box-shadow .18s;}
.fnl-option:hover{border-color:var(--navy);transform:translateY(-2px);box-shadow:0 14px 30px -20px rgba(12,30,54,.45);}
.fnl-opt-title{font-weight:700;font-size:18px;color:var(--ink);}
.fnl-opt-desc{font-size:14px;color:var(--text-muted);line-height:1.45;}
.fnl-label{display:block;font-size:14px;font-weight:600;color:var(--ink);margin:18px 0 7px;}
.fnl-label:first-of-type{margin-top:0;}
.fnl-opt{color:var(--grey);font-weight:400;}
.fnl-input{width:100%;font-family:inherit;font-size:16px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 15px;transition:border-color .15s,box-shadow .15s;}
.fnl-input:focus{outline:0;border-color:var(--navy);box-shadow:0 0 0 3px rgba(12,30,54,.12);}
textarea.fnl-input{resize:vertical;min-height:80px;}
select.fnl-input{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230c1e36' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px;cursor:pointer;}
.fnl-cta{width:100%;justify-content:center;margin-top:24px;}
.fnl-cta[disabled]{opacity:.45;cursor:not-allowed;}
.fnl-micro{font-size:13px;line-height:1.5;color:var(--grey);text-align:center;margin:14px 0 0;}
.fnl-success{text-align:center;}
.fnl-check{width:64px;height:64px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;}
.fnl-check svg{width:30px;height:30px;}
.fnl-success .fnl-h{margin-bottom:12px;}
.fnl-sub{font-size:16px;line-height:1.6;color:var(--text-muted);max-width:46ch;margin:0 auto 24px;}
.fnl-recap{text-align:left;background:var(--bg-soft);border:1px solid var(--line);border-radius:16px;padding:18px 20px;margin:0 0 24px;}
.fnl-recap-row{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14.5px;}
.fnl-recap-row:last-child{border-bottom:0;}
.fnl-recap-row span{color:var(--grey);}
.fnl-recap-row b{color:var(--ink);text-align:right;}
.fnl-secondary{margin:18px 0 0;font-size:15px;color:var(--grey);}
.fnl-secondary a{color:var(--ink);font-weight:600;text-decoration:none;}
.fnl-secondary a:hover{text-decoration:underline;}
.fnl-secondary span{margin:0 10px;opacity:.5;}
/* ---- split-panel variant ---- */
.funnel-split{max-width:940px;padding:0;overflow:hidden;display:grid;grid-template-columns:0.84fr 1fr;align-items:stretch;}
.fnl-context{background:linear-gradient(165deg,#16273f,#020a11);color:#fff;padding:clamp(28px,3.2vw,42px);display:flex;flex-direction:column;}
.fnl-context-mid{margin-top:auto;}
.fnl-context .fnl-prog{margin:0 0 auto;}
.fnl-context .fnl-seg{background:rgba(255,255,255,.18);}
.fnl-context .fnl-seg.is-on{background:#fff;}
.fnl-context .fnl-eyebrow{color:#8ea0b5;margin:26px 0 10px;}
.fnl-context .fnl-h{color:#fff;margin:0;}
.fnl-reassure{margin:24px 0 0;font-size:14px;line-height:1.55;color:rgba(255,255,255,.7);}
.fnl-main{background:#fff;padding:clamp(28px,3.2vw,42px);position:relative;display:flex;flex-direction:column;justify-content:center;}
.fnl-main .fnl-back{margin:0 0 18px;align-self:flex-start;}
.fnl-option-row{flex-direction:row;align-items:center;}
@media(max-width:720px){
.funnel-split{grid-template-columns:1fr;}
.fnl-context{padding:26px 24px 22px;}
.fnl-context-mid{margin-top:18px;}
.fnl-context .fnl-prog{margin:0 0 18px;}
.fnl-reassure{display:none;}
.fnl-main{justify-content:flex-start;}
}
/* ===================== SCROLL REVEAL — per-section motion (paper-warm preset, 2026-06-24) =====================
Recipe pulled from ~/Projects/animation-references/framer-paper-warm-motion.md
Default = Tempo B (0.6s, 30px translateY, snappy cubic). Sections get tailored start-states. */
:root{
--mo-punchy: cubic-bezier(.44, 0, .56, 1);
--mo-soft: cubic-bezier(.22, 1, .36, 1);
--mo-dur: .6s;
--mo-dur-lg: .85s;
}
/* BASE — all tracked elements start hidden + transitioning */
html.reveal-on :is(
.hero-eyebrow, .hero-ratings, .hero h1, .hero-sub, .hero-cta, .hero-img,
.transfer .grid-2 > div,
.bento-head, .bento-tile,
.steps h2, .spine-row,
.industries-intro h2, .ii-lead,
.cat-row .cat-copy, .cat-row .cat-media,
.rv-head, .video-card,
.possib h2, .poss-card,
.about-inner,
.faq h2, .faq-item,
.funnel,
.page-hero .sec-eyebrow, .page-hero h1, .page-hero p,
.prose h2, .prose p, .prose ul, .prose ol,
.page-cta h2, .page-cta p, .page-cta .hero-cta,
.ind-hub > div,
.footer-cols > div, .footer-bottom
){opacity:0;transform:translateY(30px);transition:opacity var(--mo-dur) linear,transform var(--mo-dur) var(--mo-punchy),filter var(--mo-dur) var(--mo-soft);transition-delay:var(--rvd,0ms);will-change:transform;}
/* SUBTLE (12px, .45s) — chrome, accents, inline & dense */
html.reveal-on :is(.hero-eyebrow,.hero-ratings,.hero-sub,.faq-item,.footer-cols>div,.footer-bottom,.ii-lead){transform:translateY(12px);transition-duration:.45s;}
/* CINEMATIC (50px, .85s, soft easing) — big editorial moments */
html.reveal-on :is(.hero h1,.page-hero h1,.funnel,.about-inner){transform:translateY(50px);transition-duration:var(--mo-dur-lg);transition-timing-function:var(--mo-soft);}
/* HERO IMAGE — blur-to-sharp reveal (Majd-style) */
html.reveal-on .hero-img{transform:scale(1.04);filter:blur(10px);transition-duration:1.1s;transition-timing-function:var(--mo-soft);will-change:transform,filter;}
/* CARDS — scale-pop entrance (Rajib-style chip pop) */
html.reveal-on :is(.bento-tile,.poss-card,.video-card,.ind-hub>div){transform:translateY(24px) scale(0.94);transition-duration:.55s;}
/* BENTO HERO TILE — bigger pop than the rest */
html.reveal-on .bento-tile.tile-hero{transform:translateY(40px) scale(0.96);transition-duration:.75s;}
/* SAVINGS SPLIT — text from left, calculator drops in */
html.reveal-on .transfer .grid-2>div:first-child{transform:translateX(-30px);}
html.reveal-on .transfer .grid-2>div:nth-child(2){transform:translateY(28px) scale(0.96);transition-duration:.7s;transition-timing-function:var(--mo-soft);}
/* HOW IT WORKS — spine-rows slide in from left like a list being written */
html.reveal-on .spine-row{transform:translateX(-44px) !important;transition-duration:.65s;}
/* INDUSTRIES CAT-ROWS — alternating sides, copy + image enter independently */
html.reveal-on .cat-row .cat-copy{transform:translateX(-40px);}
html.reveal-on .cat-row .cat-media{transform:translateX(40px);transition-duration:.7s;}
html.reveal-on .cat-row.alt .cat-copy{transform:translateX(40px);}
html.reveal-on .cat-row.alt .cat-media{transform:translateX(-40px);}
/* SECTION HEADINGS — small, calm */
html.reveal-on :is(.faq h2,.steps h2,.possib h2,.industries-intro h2,.bento-head){transform:translateY(20px);transition-duration:.55s;}
/* PAGE-HERO + prose — 20px standard */
html.reveal-on :is(.page-hero .sec-eyebrow,.page-hero p,.prose h2,.prose p,.prose ul,.prose ol,.page-cta h2,.page-cta p,.page-cta .hero-cta){transform:translateY(20px);transition-duration:.55s;}
html.reveal-on :is(
.hero-eyebrow, .hero-ratings, .hero h1, .hero-sub, .hero-cta, .hero-img,
.transfer .grid-2 > div,
.bento-head, .bento-tile,
.steps h2, .spine-row,
.industries-intro h2, .ii-lead,
.cat-row .cat-copy, .cat-row .cat-media,
.rv-head, .video-card,
.possib h2, .poss-card,
.about-inner,
.faq h2, .faq-item,
.funnel,
.page-hero .sec-eyebrow, .page-hero h1, .page-hero p,
.prose h2, .prose p, .prose ul, .prose ol,
.page-cta h2, .page-cta p, .page-cta .hero-cta,
.ind-hub > div,
.footer-cols > div, .footer-bottom
).rv-in{opacity:1!important;transform:none!important;filter:none!important;}
@media(prefers-reduced-motion:reduce){
html.reveal-on :is(.hero-eyebrow,.hero-ratings,.hero h1,.hero-sub,.hero-cta,.hero-img,.transfer .grid-2 > div,.bento-head,.bento-tile,.steps h2,.spine-row,.industries-intro h2,.ii-lead,.cat-row .cat-copy,.cat-row .cat-media,.rv-head,.video-card,.possib h2,.poss-card,.about-inner,.faq h2,.faq-item,.funnel,.page-hero .sec-eyebrow,.page-hero h1,.page-hero p,.prose h2,.prose p,.prose ul,.prose ol,.page-cta h2,.page-cta p,.page-cta .hero-cta,.ind-hub > div,.footer-cols > div,.footer-bottom){opacity:1!important;transform:none!important;transition:none!important;}
}
/* ===================== AGERO PATTERNS (2026-06-24) =====================
5 patterns lifted from https://agero.framer.website, adapted from
dark+orange to KIPKO's navy+cream palette. Recipes documented in
~/Projects/animation-references/framer-paper-warm-motion.md sections F–J.
*/
/* --- F. Letter-by-letter scroll-driven text fill --- */
/* .reveal-text is now applied to block headings (h1/h2) directly — keep them block, not inline */
.reveal-text .rt-word { display: inline-block; white-space: nowrap; } /* never break mid-word */
.reveal-text .rt-char {
color: rgba(12, 30, 54, 0.16); /* very light navy = barely visible */
transition: color .22s linear;
display: inline-block;
}
.reveal-text .rt-char.on { color: var(--navy); }
@media (prefers-reduced-motion: reduce) {
.reveal-text .rt-char { color: var(--navy) !important; transition: none; }
}
/* --- G. Dual rotated X-cross ticker band --- */
.ticker-x {
position: relative;
z-index: 5; /* render the crossing stripes ABOVE the funnel + bento sections */
height: 0; /* NO band box — collapse onto the funnel/bento seam */
overflow: visible; /* let the two stripes cross UP into funnel + DOWN into bento */
background: transparent; /* DELETED the navy "middle background" per request */
margin: 0;
}
.ticker-x .grain { display: none; } /* grain was only for the dark band — gone now */
.t-band {
position: absolute; left: -10%; right: -10%; top: 50%; /* 50% of 0-height = the seam */
padding: 16px 0; overflow: hidden;
mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
box-shadow: 0 14px 34px -16px rgba(2,10,17,.42); /* lift the tape off the sections behind */
}
/* Navy + white stripes so they pop on the light funnel + pale bento behind them */
.t-band.t-1 { background: var(--navy); color: #fff; transform: translateY(-50%) rotate(5deg); z-index: 2; }
.t-band.t-2 { background: #fff; color: var(--navy); transform: translateY(-50%) rotate(-5deg); z-index: 1; }
.t-track {
display: flex; gap: 3rem; width: max-content; align-items: center;
font-family: 'Universo','Outfit',sans-serif;
font-weight: 800; font-size: clamp(20px, 2vw, 28px);
letter-spacing: 1px; text-transform: uppercase; line-height: 1;
animation: tx 32s linear infinite;
will-change: transform;
}
.t-track-rev { animation-duration: 38s; animation-direction: reverse; }
.t-track .dot { font-size: 0.6em; opacity: .55; }
@keyframes tx { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .t-track { animation: none; } }
/* --- H. Noise grain overlay --- */
.grain {
position: absolute; inset: 0;
pointer-events: none;
opacity: 0.16;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: overlay;
z-index: 1;
}
/* --- I. Frosted nav (backdrop-filter:blur tier 3) --- */
.nav {
background: rgba(255, 255, 255, 0.78);
backdrop-filter: blur(12px) saturate(1.2);
-webkit-backdrop-filter: blur(12px) saturate(1.2);
}
@supports not ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
.nav { background: #fff; } /* fallback for older browsers */
}
/* --- J. Progressive blur strip (subtle handoff at bottom of cat-rows) --- */
/* NOTE: do NOT re-assert position:sticky here — it would override the mobile
`position:static` reset (line ~355) and break mobile (cards overlap). The base
.cat-stack .cat-row rule already sets sticky on desktop. */
.cat-stack .cat-row::after {
content: "";
position: absolute; left: 0; right: 0; bottom: 0; height: 64px;
pointer-events: none;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
mask-image: linear-gradient(to bottom, transparent 0%, #000 75%, #000 100%);
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 75%, #000 100%);
z-index: 0;
}
@media (max-width: 860px) {
.cat-stack .cat-row::after { display: none; } /* off with sticky on mobile */
}
/* ===================== SECTION EDGES — clean color blocks (2026-06-24) =====================
The gradient section bridges were REMOVED per user request — the dark ticker→bento
fade read as a smear. Sections now meet with crisp edges. Only the positioning that
OTHER features still need is kept (ticker's absolute children, industries-intro's
reveal-text overflow clip). No more ::before gradient overlays. */
.ticker-x{position:relative;} /* keeps .grain + .t-band absolute children anchored */
.industries-intro{position:relative;overflow:hidden;} /* keeps reveal-text clip */
/* ===================== STRONGER SECTION ANIMATIONS (2026-06-24) =====================
Count-up counters, sequential step-node pop, image parallax/zoom on cat-rows.
All progressive enhancement — degrade gracefully without JS / with reduced motion.
*/
/* COUNTER NUMBERS — used by JS counter binder */
.count-up { display: inline-block; font-variant-numeric: tabular-nums; }
/* STEP NODE SEQUENTIAL POP — circles 01/02/03 pop in sequence as section reveals */
html.reveal-on .spine-node{
opacity:0;transform:scale(.4) rotate(-12deg);
transition:opacity .45s linear, transform .55s cubic-bezier(.34,1.56,.64,1);
transition-delay:calc(var(--rvd, 0ms) + 120ms);
}
html.reveal-on .spine-row.rv-in .spine-node{opacity:1;transform:none;}
/* IMAGE PARALLAX/ZOOM on cat-row hover (subtle, doesn't fight sticky) */
.cat-shot{overflow:hidden;}
.cat-shot img{transition:transform 1.1s cubic-bezier(.22,1,.36,1);will-change:transform;}
.cat-row:hover .cat-shot img{transform:scale(1.05);}
/* GAUGE FILL on calculator card — animates from 0 to current value on first reveal */
html.reveal-on .transfer .calc-gauge #gauge-fill{
transform-origin:left center;
transform:scaleX(0);
transition:transform 1.4s cubic-bezier(.22,1,.36,1);
transition-delay:.5s;
}
html.reveal-on .transfer.rv-in .calc-gauge #gauge-fill,
html.reveal-on .transfer .grid-2>div:nth-child(2).rv-in .calc-gauge #gauge-fill{
transform:scaleX(1);
}
@media (prefers-reduced-motion:reduce){
html.reveal-on .spine-node,
html.reveal-on .transfer .calc-gauge #gauge-fill{
opacity:1!important;transform:none!important;transition:none!important;
}
.cat-row:hover .cat-shot img{transform:none;}
}
/* ===================== HOW IT WORKS — supercharged motion (2026-06-24) ===================== */
/* 1. Cards visually alternate left/right via .alt — reveal should match.
The base SCROLL REVEAL gives all spine-rows translateX(-44px); override for .alt. */
html.reveal-on .spine-row.alt{transform:translateX(44px) !important;}
/* 2. Bigger sequential cascade — 280ms between rows instead of the global 90ms.
!important to beat the JS-set --rvd from footer.php sweep. */
.spine .spine-row:nth-child(1){--rvd:0ms !important;}
.spine .spine-row:nth-child(2){--rvd:280ms !important;}
.spine .spine-row:nth-child(3){--rvd:560ms !important;}
html.reveal-on .spine-row{transition-duration:.85s !important;transition-timing-function:var(--mo-soft) !important;}
/* 3. Connector line draws downward as section enters view.
transform-origin top so it grows from top to bottom; triggered by JS adding .line-on. */
.spine::before{
transform:translateX(-50%) scaleY(0);
transform-origin:top center;
transition:transform 1.4s cubic-bezier(.22,1,.36,1);
transition-delay:150ms;
}
.spine.line-on::before{transform:translateX(-50%) scaleY(1);}
@media(prefers-reduced-motion:reduce){
.spine::before{transform:translateX(-50%) scaleY(1) !important;transition:none !important;}
}
/* 4. Card hover lift — subtle, navy-tinted shadow grows */
.spine-card{transition:transform .35s var(--mo-punchy), box-shadow .35s linear;}
.spine-card:hover{
transform:translateY(-4px);
box-shadow:0 2px 4px rgba(12,30,54,.05), 0 28px 56px -24px rgba(12,30,54,.45);
}
/* 5. Node ring pulse — single radial pulse on reveal */
.spine-node::after{
content:"";position:absolute;inset:0;border-radius:50%;
border:2px solid var(--navy);
opacity:0;transform:scale(1);
pointer-events:none;
}
html.reveal-on .spine-row.rv-in .spine-node::after{
animation:nodepulse 1.6s ease-out .25s 1;
}
@keyframes nodepulse{
0%{opacity:.55;transform:scale(1);}
100%{opacity:0;transform:scale(2.4);}
}
@media(prefers-reduced-motion:reduce){
.spine-node::after{animation:none !important;}
.spine-card:hover{transform:none;box-shadow:0 1px 2px rgba(12,30,54,.04),0 18px 34px -26px rgba(12,30,54,.3);}
}
/* ===================== ACCESSIBILITY — visible keyboard focus (2026-06-24) =====================
Added via the ui-ux-pro-max skill pre-delivery checklist ("Focus states visible for keyboard nav").
Audit found only form inputs had focus styling — buttons, links, video cards, play buttons,
the FAQ accordion and the calc slider had NO visible focus ring (WCAG 2.4.7 fail).
:focus-visible shows the ring ONLY for keyboard users — mouse clicks stay visually clean. */
:focus-visible{
outline:3px solid var(--navy);
outline-offset:3px;
border-radius:6px;
}
/* Dark/navy surfaces need a light ring for contrast */
.btn-dark:focus-visible,
.nav-sub-feature:focus-visible,
.spine-node:focus-visible,
.cat-play:focus-visible,
.vplay:focus-visible,
.ticker-x a:focus-visible{
outline-color:#fff;
outline-offset:3px;
}
/* Suppress the legacy outline only where :focus-visible takes over (keeps Safari<15.4 fallback) */
:focus:not(:focus-visible){outline:none;}
/* The range slider thumb gets its own ring (outline doesn't reach the thumb) */
#calc-slider:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(12,30,54,.28);}
/* ===================== PROFESSIONAL SECTION MOTION — Why / About / CTA band (2026-06-24) ===================== */
/* ---------- 1. "What makes KIPKO different" (#why) ---------- */
/* Icon pops in with a springy overshoot, staggered AFTER its card reveals */
html.reveal-on .poss-card .poss-ico{
opacity:0; transform:scale(.5) rotate(-8deg);
transition:opacity .5s linear, transform .6s cubic-bezier(.34,1.56,.64,1);
transition-delay:calc(var(--rvd,0ms) + 200ms);
}
html.reveal-on .poss-card.rv-in .poss-ico{opacity:1; transform:none;}
/* Card hover lift — all three cards rise with a deeper shadow */
.poss-card{transition:transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s linear;}
.poss-card:hover{transform:translateY(-8px); box-shadow:0 2px 6px rgba(12,30,54,.06), 0 34px 64px -28px rgba(12,30,54,.42);}
.poss-feature:hover{transform:translateY(-8px);}
/* Icon tile reacts on card hover */
.poss-card:hover .poss-ico{transform:scale(1.08) rotate(3deg); transition:transform .35s cubic-bezier(.34,1.56,.64,1);}
/* Dark feature card — ambient light blob slowly drifts (premium "alive" feel) */
.poss-feature::after{animation:blobdrift 9s ease-in-out infinite alternate;}
@keyframes blobdrift{
0%{transform:translate(0,0) scale(1); opacity:.85;}
100%{transform:translate(-26px,20px) scale(1.18); opacity:1;}
}
/* ---------- 2. Bogdan founder portrait (#about) ---------- */
/* Blur-to-sharp + scale reveal on the portrait, keyed off the about-inner reveal */
html.reveal-on .about-photo .ph img{
filter:blur(14px); transform:scale(1.07);
transition:filter 1.2s cubic-bezier(.22,1,.36,1), transform 1.2s cubic-bezier(.22,1,.36,1);
transition-delay:.15s;
}
html.reveal-on .about-inner.rv-in .about-photo .ph img{filter:none; transform:none;}
/* Play button — gentle invite pulse ring (says "play me") */
.about-photo .cat-play::before{
content:""; position:absolute; inset:0; border-radius:50%;
border:2px solid rgba(255,255,255,.55);
pointer-events:none;
animation:playpulse 2.6s cubic-bezier(.22,1,.36,1) infinite;
}
@keyframes playpulse{
0%{transform:scale(1); opacity:.6;}
70%,100%{transform:scale(1.85); opacity:0;}
}
/* ---------- 3. "Stop overpaying on fees" CTA band (#contact) ---------- */
/* POS device: continuous gentle float bob — keeps the existing translateX(-50%) centering */
.band-device{animation:devicefloat 5.5s ease-in-out infinite;}
@keyframes devicefloat{
0%,100%{transform:translateX(-50%) translateY(0) rotate(0deg);}
50%{transform:translateX(-50%) translateY(-16px) rotate(-1deg);}
}
/* Band content rises in (added to reveal system via footer.php LIST) */
html.reveal-on .band-cta h2,
html.reveal-on .band-cta p,
html.reveal-on .band-cta .banner-cta{
opacity:0; transform:translateY(28px);
transition:opacity .6s linear, transform .7s cubic-bezier(.22,1,.36,1);
transition-delay:var(--rvd,0ms);
}
html.reveal-on .band-cta h2.rv-in,
html.reveal-on .band-cta p.rv-in,
html.reveal-on .band-cta .banner-cta.rv-in{opacity:1; transform:none;}
/* ---------- Reduced motion: kill all the above ---------- */
@media(prefers-reduced-motion:reduce){
html.reveal-on .poss-card .poss-ico,
html.reveal-on .about-photo .ph img,
html.reveal-on .band-cta h2,
html.reveal-on .band-cta p,
html.reveal-on .band-cta .banner-cta{opacity:1!important; transform:none!important; filter:none!important; transition:none!important;}
.poss-card:hover,.poss-feature:hover{transform:none;}
.poss-feature::after,.about-photo .cat-play::before,.band-device{animation:none!important;}
}
/* ===================== BREATHING ROOM AROUND THE CROSSING TAPE (2026-06-24) =====================
The ticker tape sits at height:0 on a section seam. To give the stripes air WITHOUT
re-adding a background box, push the neighbouring sections' CONTENT away from the seam —
their own bg colours then fill the space. Robust across preview (transfer above) AND
production (funnel-wrap above): pad all three possible neighbours. */
/* The funnel-wrap is the REAL section directly above the tape (transfer is above the funnel).
So the funnel-wrap + bento carry the tape's breathing room; transfer keeps its normal padding. */
.funnel-wrap{ padding-bottom: 180px; } /* pale space above the tape */
.bento{ padding-top: 200px; } /* pale space below the tape */
@media(max-width:860px){
.funnel-wrap{ padding-bottom: 120px; }
.bento{ padding-top: 130px; }
}
/* ===================== PAYMENT SHOWCASE — phone + floating cards (2026-06-25) =====================
Client-liked phone mockup recreated in KIPKO navy/grey/white (ref was lime+black). */
.payshow{background:#fff;padding:84px 40px;overflow:hidden;}
.payshow-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,90px);align-items:center;max-width:1180px;}
.payshow-copy h2{font-family:'Universo','Outfit',sans-serif;font-weight:800;font-size:clamp(34px,4.2vw,58px);letter-spacing:-1.5px;line-height:1.02;color:var(--ink);margin:6px 0 22px;}
.payshow-lead{font-size:18px;line-height:1.65;color:var(--text-muted);max-width:48ch;margin:0 0 28px;}
.payshow-points{list-style:none;margin:0 0 34px;padding:0;display:grid;gap:14px;}
.payshow-points li{display:flex;align-items:flex-start;gap:12px;font-size:16px;font-weight:500;color:var(--ink);line-height:1.45;}
.payshow-points .pk{flex:0 0 auto;width:24px;height:24px;border-radius:7px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;margin-top:1px;}
.payshow-points .pk svg{width:13px;height:13px;}
/* Circular-arrow CTA (echoes the reference's round arrow button) */
.payshow-cta{display:inline-flex;align-items:center;gap:16px;font-weight:700;font-size:18px;color:var(--ink);}
.payshow-arrow{width:60px;height:60px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto;box-shadow:0 18px 38px -16px rgba(12,30,54,.55);transition:transform .35s cubic-bezier(.22,1,.36,1),background .2s;}
.payshow-arrow svg{width:24px;height:24px;transition:transform .35s cubic-bezier(.22,1,.36,1);}
.payshow-cta:hover .payshow-arrow{transform:scale(1.07);background:#13294a;}
.payshow-cta:hover .payshow-arrow svg{transform:translate(2px,-2px);}
/* ---- Phone ---- */
.payshow-stage{display:flex;justify-content:center;perspective:1400px;}
.payshow-phone{position:relative;width:min(262px,66vw);aspect-ratio:9/18;border-radius:42px;
background:linear-gradient(150deg,#1b2b40,#0a1626);padding:12px;
box-shadow:0 50px 90px -40px rgba(2,10,17,.6),0 0 0 2px rgba(12,30,54,.5),inset 0 0 0 2px rgba(255,255,255,.04);}
.payshow-notch{position:absolute;top:18px;left:50%;transform:translateX(-50%);width:118px;height:26px;border-radius:0 0 16px 16px;background:#060d16;z-index:5;}
.payshow-screen{position:relative;width:100%;height:100%;border-radius:34px;overflow:hidden;
background:radial-gradient(120% 90% at 70% 8%,#13243c 0%,#0a1525 55%,#050c15 100%);}
.payshow-screen .grain{opacity:.16;z-index:1;}
/* ---- Cards ---- */
.paycard{position:absolute;border-radius:18px;padding:18px;display:flex;flex-direction:column;
box-shadow:0 26px 50px -18px rgba(2,10,17,.7);will-change:transform;}
.paycard-back{width:74%;top:13%;right:-6%;height:42%;
background:linear-gradient(150deg,#eef1f4,#cdd6de);color:var(--navy);
transform:rotate(7deg);z-index:2;animation:payfloatA 6.5s ease-in-out infinite;}
.paycard-front{width:74%;top:30%;left:-8%;height:44%;
background:linear-gradient(150deg,#26384f,#0d1c30);color:#fff;
transform:rotate(-9deg);z-index:3;animation:payfloatB 7.5s ease-in-out infinite;}
.paycard-mark img{height:26px;width:auto;border-radius:6px;}
.paycard-wave{color:rgba(255,255,255,.8);}
.paycard-wave svg{width:26px;height:26px;}
.paycard-num{margin-top:auto;font-family:'Courier New',monospace;font-weight:700;letter-spacing:1px;font-size:13px;}
.paycard-num.big{font-size:clamp(18px,2vw,24px);letter-spacing:3px;color:#fff;}
.paycard-meta{display:flex;justify-content:space-between;margin-top:8px;font-size:10px;font-weight:700;letter-spacing:1.5px;opacity:.7;text-transform:uppercase;}
.paycard-dots{display:flex;margin-top:10px;}
.paycard-dots i{width:26px;height:26px;border-radius:50%;background:var(--grey);opacity:.85;}
.paycard-dots i:last-child{margin-left:-12px;background:#9fb0bd;mix-blend-mode:screen;}
@keyframes payfloatA{0%,100%{transform:rotate(7deg) translateY(0);}50%{transform:rotate(7deg) translateY(-12px);}}
@keyframes payfloatB{0%,100%{transform:rotate(-9deg) translateY(0);}50%{transform:rotate(-9deg) translateY(10px);}}
/* ---- Scroll reveal ---- */
html.reveal-on .payshow-copy>*{opacity:0;transform:translateY(24px);transition:opacity .6s linear,transform .7s cubic-bezier(.22,1,.36,1);}
html.reveal-on .payshow-copy.rv-in>*{opacity:1;transform:none;}
html.reveal-on .payshow-copy.rv-in>*:nth-child(2){transition-delay:.06s;}
html.reveal-on .payshow-copy.rv-in>*:nth-child(3){transition-delay:.12s;}
html.reveal-on .payshow-copy.rv-in>*:nth-child(4){transition-delay:.18s;}
html.reveal-on .payshow-copy.rv-in>*:nth-child(5){transition-delay:.24s;}
html.reveal-on .payshow-phone{opacity:0;transform:translateY(36px) scale(.96);transition:opacity .7s linear,transform .9s cubic-bezier(.22,1,.36,1);}
html.reveal-on .payshow-stage.rv-in .payshow-phone{opacity:1;transform:none;}
/* ---- Responsive ---- */
@media(max-width:860px){
.payshow{padding:56px 24px;}
.payshow-grid{grid-template-columns:1fr;gap:36px;}
.payshow-stage{order:-1;}
.payshow-phone{width:min(238px,64vw);} /* compact phone on mobile so it isn't a long scroll */
.phone-stat{padding:12px 14px;left:12px;right:12px;bottom:14px;}
.phone-stat-amt{font-size:21px;margin:5px 0 1px;letter-spacing:-.5px;}
.phone-stat-label{font-size:10px;letter-spacing:.2px;}
.pst-today{display:none;} /* trim "· Today" so label + badge fit one line on the small phone */
.phone-stat-badge{font-size:10px;padding:3px 7px;}
.phone-stat-sub{font-size:11.5px;}
}
@media(prefers-reduced-motion:reduce){
.paycard-back,.paycard-front{animation:none;}
html.reveal-on .payshow-copy>*,html.reveal-on .payshow-phone{opacity:1!important;transform:none!important;}
}
/* ---- Payment showcase: in-phone app text (status bar + deposit card) ---- */
.phone-status{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:18px 24px 0;color:rgba(255,255,255,.92);}
.ps-time{font-weight:700;font-size:14px;letter-spacing:.3px;}
.ps-icons{display:flex;align-items:center;gap:6px;}
.ps-icons svg{height:11px;width:auto;color:rgba(255,255,255,.92);}
.phone-stat{position:absolute;left:14px;right:14px;bottom:16px;z-index:4;
background:rgba(255,255,255,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
border-radius:18px;padding:15px 17px;box-shadow:0 22px 44px -18px rgba(2,10,17,.65);}
.phone-stat-top{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.phone-stat-label{font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--grey);}
.phone-stat-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:var(--navy);background:var(--bg-soft);border-radius:999px;padding:4px 9px;white-space:nowrap;}
.phone-stat-badge svg{width:11px;height:11px;}
.phone-stat-amt{display:block;font-family:'Universo','Outfit',sans-serif;font-weight:800;font-size:30px;letter-spacing:-1px;color:var(--ink);margin:7px 0 2px;}
.phone-stat-sub{font-size:12.5px;color:var(--text-muted);}
@media(prefers-reduced-motion:reduce){.phone-stat{backdrop-filter:none;-webkit-backdrop-filter:none;}}
/* Deposit-card mobile sizing — placed AFTER the base .phone-stat rules so it wins source-order */
@media(max-width:860px){
.phone-stat{padding:12px 14px;left:12px;right:12px;bottom:14px;}
.phone-stat-amt{font-size:19px;margin:5px 0 1px;letter-spacing:-.4px;}
.phone-stat-label{font-size:10px;letter-spacing:.2px;}
.pst-today{display:none;}
.phone-stat-badge{font-size:10px;padding:3px 7px;}
.phone-stat-sub{font-size:11.5px;}
}
/* ===== Cookie notice banner + form consent (added 2026-07-20) ===== */
.cookie-banner{position:fixed;left:20px;bottom:20px;z-index:60;max-width:400px;
background:var(--navy,#0c1e36);color:#fff;border-radius:16px;padding:18px 20px;
box-shadow:0 18px 50px rgba(12,30,54,.28);display:flex;flex-direction:column;gap:12px;
transform:translateY(16px);opacity:0;transition:transform .32s cubic-bezier(.22,1,.36,1),opacity .32s;}
.cookie-banner.show{transform:none;opacity:1;}
.cookie-banner .cookie-text{font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.88);margin:0;}
.cookie-banner .cookie-text a{color:#fff;text-decoration:underline;text-underline-offset:2px;}
.cookie-banner .cookie-actions{display:flex;gap:10px;}
.cookie-banner .btn-sm{padding:9px 20px;font-size:14px;}
@media(max-width:600px){.cookie-banner{left:12px;right:12px;bottom:12px;max-width:none;padding:16px;}}
@media(prefers-reduced-motion:reduce){.cookie-banner{transition:none;}}
.fnl-consent{font-size:12px;line-height:1.5;color:#82929f;margin:10px 0 0;}
.fnl-consent a{color:inherit;text-decoration:underline;text-underline-offset:2px;}