/* ViralDM homepage v4. Layout, menus and scroll behaviour follow razorpay.com (the version served in India, Sep 2026);
   brand, copy and product are ViralDM's own. Single light look by choice, with explicit dark bands. */
:root{
  color-scheme: light;
  --ink:#17132E; --ink-2:#4B4766; --ink-3:#7E7998; --line:#E7E3F2; --line-2:#D9D4EA;
  --bg:#FFFFFF; --mist:#F6F5FB; --grey:#F0EFF6; --lilac:#E8E1FF;
  --v:#7C4EFF; --v-d:#6437F0; --v-l:#B8A2FF; --pink:#FF4D8D; --orange:#FF8A3D;
  --g:#0F9E7A; --g-l:#5BE3B8;
  --night:#14112E; --night-2:#1D1846; --on-night:#ECE9F8; --on-night-2:#ABA5CC;
  --gold:#E9B949;
  --tint-v:#EEE8FF; --tint-m:#E3F4EE; --tint-p:#FFEDE2; --tint-b:#E6ECFF;
  --f-d:'TASA Orbiter','Inter Tight','Noto Sans Devanagari','Noto Sans Bengali','Noto Sans Gujarati','Noto Sans Gurmukhi','Noto Sans Kannada','Noto Sans Tamil','Noto Sans Telugu',system-ui,sans-serif;
  --f-b:'Inter Tight','Noto Sans Devanagari','Noto Sans Bengali','Noto Sans Gujarati','Noto Sans Gurmukhi','Noto Sans Kannada','Noto Sans Tamil','Noto Sans Telugu',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-m:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --navh:72px; --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  --shadow:0 24px 48px -28px rgba(40,22,120,.35); --ease:cubic-bezier(.23,1,.32,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--navh) + 24px)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.55 var(--f-b);-webkit-font-smoothing:antialiased;overflow-x:hidden}
main,footer{overflow-x:clip}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3,h4{font-family:var(--f-d);font-weight:500;margin:0;text-wrap:balance;letter-spacing:-.02em}
p{margin:0}
:focus-visible{outline:2px solid var(--v);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:1296px;margin-inline:auto;padding-inline:24px}
.sel{user-select:all;font-weight:600;color:var(--ink)}
.lbl{font:500 12px/1 var(--f-m);letter-spacing:.08em;text-transform:uppercase;color:var(--v)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border-radius:6px;font:500 15px/1 var(--f-b);border:1px solid transparent;white-space:nowrap;transition:background .2s,color .2s,border-color .2s,box-shadow .2s}
.btn span{transition:transform .2s}
.btn:hover span{transform:translateX(3px)}
.btn-pri{background:var(--v);color:#fff}
.btn-pri:hover{background:var(--v-d)}
.btn-line{border-color:var(--v);color:var(--v)}
.btn-line:hover{background:var(--tint-v)}
.btn-white{background:#fff;color:var(--ink)}
.btn-white:hover{background:var(--lilac)}
.btn-lg{height:54px;padding:0 26px;font-size:17px}
.btn-sm{height:40px;padding:0 16px;font-size:14px}
.btn-xs{height:32px;padding:0 12px;font-size:13px}
.btn-txt{color:var(--v);font-weight:500;font-size:16px;padding:12px 6px}
.btn-txt:hover{text-decoration:underline;text-underline-offset:4px}
.tl-more{color:var(--v);font-size:13.5px;font-weight:500}
.tl-more:hover{text-decoration:underline}

/* ---------- announcement ---------- */
.ann{background:var(--lilac);font-size:15px}
.ann-in{display:flex;align-items:center;gap:16px;min-height:52px;padding-block:6px;flex-wrap:wrap}
.ann-t{font:500 17px var(--f-d)}
.ann-pill{display:inline-flex;align-items:center;gap:8px;background:#fff;border-radius:999px;padding:4px 14px 4px 4px;font-size:14px;min-width:118px}
.ann-g{width:26px;height:26px;border-radius:50%;background:var(--v);color:#fff;display:grid;place-items:center;font-style:normal;font-size:13px}
.ann-s{color:var(--ink-2)}
.ann-btn{background:var(--ink);color:#fff;border-radius:6px;padding:6px 11px;font-size:13px;font-weight:500}
.ann-coins{margin-left:auto;display:flex;gap:6px}
.ann-coins i{width:30px;height:30px;border-radius:50%;background:var(--v);color:#fff;display:grid;place-items:center;font-style:normal;font-size:14px;animation:coin 2.8s ease-in-out infinite}
.ann-coins i:nth-child(2){animation-delay:.12s}.ann-coins i:nth-child(3){animation-delay:.24s}.ann-coins i:nth-child(4){animation-delay:.36s}.ann-coins i:nth-child(5){animation-delay:.48s}.ann-coins i:nth-child(6){animation-delay:.6s}.ann-coins i:nth-child(7){animation-delay:.72s}
@keyframes coin{0%,70%,100%{transform:translateY(0)}78%{transform:translateY(-5px)}86%{transform:translateY(0)}}

/* ---------- nav + menus ---------- */
.nav{position:sticky;top:var(--sat);z-index:50;background:#fff;border-bottom:1px solid transparent;transition:transform .35s var(--ease),border-color .3s}
.nav.is-scrolled{border-color:var(--line)}
.nav.is-hidden{transform:translateY(-110%)}
.nav-in{display:flex;align-items:center;gap:26px;height:var(--navh)}
.brand{display:inline-flex;align-items:center;gap:9px;font:600 21px/1 var(--f-d);letter-spacing:-.02em;flex:none}
.brand img{border-radius:7px}
.menu{display:flex;align-items:center;gap:2px;height:100%}
.mi{position:relative;height:100%;display:flex;align-items:center}
.mi-b,.mi-l{height:100%;display:flex;align-items:center;gap:6px;border:0;background:none;padding:0 10px;font:500 15px var(--f-b);color:var(--ink-2);position:relative;white-space:nowrap}
.mi-b em{font-style:normal;color:var(--g);margin-left:-2px}
.mi-b::after,.mi-l::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:2px;background:var(--v);transform:scaleX(0);transition:transform .25s var(--ease)}
.mi.is-open .mi-b,.mi-b:hover,.mi-l:hover{color:var(--v)}
.mi.is-open .mi-b::after,.mi-l:hover::after{transform:scaleX(1)}
.dd{position:absolute;top:100%;left:0;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s,transform .2s var(--ease),visibility 0s .2s;z-index:60}
.mi.is-open .dd{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .25s var(--ease)}
.dd-sm{min-width:320px;padding-top:6px}
.dd-in{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 30px 60px -30px rgba(20,10,60,.35);padding:18px 10px 10px;display:flex;flex-direction:column}
.dd-h{font:500 11px/1 var(--f-b);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin:0 12px 10px}
.dd-in a{display:flex;flex-direction:column;padding:10px 12px;border-radius:8px;transition:background .15s}
.dd-in a:hover{background:var(--mist)}
.dd a b{font-weight:500;font-size:15px;color:var(--ink);display:flex;align-items:center;gap:8px}
.dd a span{font-size:12.5px;color:var(--ink-3);line-height:1.4}
.new{font-style:normal;font:600 9.5px/1 var(--f-b);letter-spacing:.05em;color:var(--g);background:#DDF5EA;border-radius:4px;padding:3px 5px}
.dd-lg{position:fixed;left:50%;top:auto;width:min(1248px,calc(100vw - 48px));transform:translate(-50%,8px);padding-top:0}
.mi.is-open .dd-lg{transform:translate(-50%,0)}
.dd-lg>.dd-grid{background:#fff;border:1px solid var(--line);border-bottom:0;border-radius:14px 14px 0 0;box-shadow:0 40px 80px -30px rgba(20,10,60,.35);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 28px;padding:26px 28px 18px}
.dd-col{display:flex;flex-direction:column}
.dd-col a{position:relative;display:grid;grid-template-columns:36px 1fr;column-gap:12px;align-items:center;padding:10px 34px 10px 10px;border-radius:10px;transition:background .15s}
.dd-col a:hover{background:var(--mist)}
.dd-col a::after{content:"›";position:absolute;right:12px;top:50%;transform:translate(-4px,-50%);opacity:0;color:var(--ink-3);font-size:20px;transition:opacity .15s,transform .15s}
.dd-col a:hover::after{opacity:1;transform:translate(0,-50%)}
.dd-col .ic{grid-row:span 2;width:36px;height:36px;border-radius:50%;background:var(--v);color:#fff;display:grid;place-items:center;font-style:normal;font-size:15px}
.dd-col b{grid-column:2}
.dd-col span{grid-column:2}
.dd-col .dd-h{margin:0 10px 8px}
.dd-foot{background:#fff;border:1px solid var(--line);border-top:1px solid var(--line);border-radius:0 0 14px 14px;padding:12px;text-align:center;font-size:12px;color:var(--ink-3)}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:12px;flex:none}
.nav-ic{width:38px;height:38px;border-radius:8px;display:grid;place-items:center;color:var(--ink-2)}
.nav-ic:hover{background:var(--mist)}
.nav-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8}
.lang-dd{position:relative}
.lang-dd summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 8px;border-radius:8px;font-size:14px;font-weight:500}
.lang-dd summary::-webkit-details-marker{display:none}
.lang-dd summary i{width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.lang-dd summary:hover{background:var(--mist)}
.lang-menu{position:absolute;right:0;top:44px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 20px 40px -20px rgba(20,10,60,.35);padding:6px;display:flex;flex-direction:column;min-width:150px;z-index:61}
.lang-menu a{padding:9px 10px;border-radius:8px;font-size:14px;display:flex;align-items:center;gap:10px}
/* Indian tricolour beside each language (views/site/_nav.ejs) */
.flag-in{width:20px;height:14px;flex:none;border-radius:2px;box-shadow:0 0 0 1px rgba(20,10,60,.14);display:inline-block;vertical-align:-2px}
.lang-menu a:hover{background:var(--mist)}
.lang-menu a[aria-current="true"]{color:var(--v);font-weight:600}
.lang-menu a[aria-current="true"]::after{content:" ✓"}
.nav-burger{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:8px;background:#fff;position:relative}
.nav-burger i{position:absolute;left:12px;right:12px;height:2px;background:var(--ink);transition:transform .25s}
.nav-burger i:first-child{top:16px}.nav-burger i:last-child{top:23px}
.nav-burger[aria-expanded="true"] i:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav-burger[aria-expanded="true"] i:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* ---------- hero (white, like Razorpay) ---------- */
.hero{position:relative;padding-top:20px}
.hero-in{position:relative;height:clamp(500px,40vw,580px)}
.hs{position:absolute;inset:0 24px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:24px;opacity:0;visibility:hidden;transition:opacity .7s ease,visibility 0s .7s}
.hs.is-on{opacity:1;visibility:visible;transition:opacity .7s ease}
.hs-copy{position:relative;z-index:3}
.hs-copy h1,.hs-copy .h1{font-size:clamp(38px,4.3vw,60px);line-height:1.08;letter-spacing:-.035em}
.hl-a,.hl-b{display:block}
.hl-a{color:var(--v)}
.hs-copy sup{font-size:.45em;vertical-align:top;position:relative;top:.1em}
.hs-sub{margin-top:18px;font-size:17px;color:var(--ink-2)}
.hs-sub i{font-style:normal;color:var(--line-2);margin:0 8px}
.hs-cta{margin-top:30px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.hs.is-on .hs-copy>*{animation:rise .8s var(--ease) both}
.hs.is-on .hs-copy>*:nth-child(2){animation-delay:.07s}.hs.is-on .hs-copy>*:nth-child(3){animation-delay:.14s}
@keyframes rise{from{transform:translateY(24px);opacity:.2}to{transform:none;opacity:1}}
.hs-art{position:relative;height:100%;display:flex;align-items:center;justify-content:center}
.hs-art>img{width:100%;height:100%;object-fit:cover;object-position:74% 20%;border-radius:28px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%);mask-image:linear-gradient(90deg,transparent 0,#000 24%);transform:scale(1.03);transform-origin:80% 40%;transition:transform 6s ease-out}
.hs.is-on .hs-art>img{transform:none}
.hs-tc{position:absolute;left:0;bottom:6px;font-size:12px;color:var(--ink-3);z-index:3}
.badge-offer{position:absolute;z-index:3;left:-2%;top:8%;background:var(--v);color:#fff;padding:20px 40px 22px 34px;clip-path:polygon(12% 0,100% 0,100% 100%,0 100%);display:flex;flex-direction:column;line-height:.9;transform:rotate(-4deg)}
.badge-offer b{font:700 78px/.85 var(--f-d);letter-spacing:-.04em}
.badge-offer span{font:700 24px/1 var(--f-d);margin-top:8px;color:#D8CCFF}
.seal{position:absolute;z-index:3;left:24%;bottom:8%;width:128px;height:128px;display:grid;place-items:center;clip-path:polygon(50% 0,61% 11%,76% 6%,80% 21%,95% 25%,90% 40%,100% 50%,90% 60%,95% 75%,80% 79%,76% 94%,61% 89%,50% 100%,39% 89%,24% 94%,20% 79%,5% 75%,10% 60%,0 50%,10% 40%,5% 25%,20% 21%,24% 6%,39% 11%);background:radial-gradient(circle,#F7DA86,var(--gold) 62%,#C8962B);animation:spin 26s linear infinite}
.seal svg{position:absolute;inset:8px;width:calc(100% - 16px);height:calc(100% - 16px)}
.seal text{font:700 9.5px var(--f-b);letter-spacing:.14em;fill:#5A3D00}
.seal em{font:800 18px/1 var(--f-d);font-style:normal;color:#4A3200;text-align:center;animation:spin 26s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.float-dm{position:absolute;z-index:3;max-width:300px;background:#fff;border:1px solid var(--line);border-radius:16px 16px 16px 4px;padding:12px 14px;font-size:14px;line-height:1.45;box-shadow:var(--shadow);animation:float 8s ease-in-out infinite}
.float-dm small{display:block;font:500 10px/1 var(--f-m);letter-spacing:.05em;text-transform:uppercase;color:var(--v);margin-bottom:6px}
.fd1{left:0;top:12%}.fd2{right:0;bottom:12%;animation-delay:-4s}
.float-pay{position:absolute;z-index:3;left:0;bottom:16%;display:flex;align-items:center;gap:10px;background:#fff;border-radius:14px;padding:10px;box-shadow:var(--shadow);width:290px;animation:float 8s ease-in-out infinite}
.float-pay img{width:48px;height:48px;border-radius:10px;object-fit:cover}
.float-pay div{flex:1;display:flex;flex-direction:column;font-size:14px}
.float-pay small{color:var(--ink-3);font-size:12px}
.float-pay span{background:var(--v);color:#fff;border-radius:8px;padding:8px 10px;font-size:13px;font-weight:600;white-space:nowrap}
.float-ok{position:absolute;z-index:3;right:4%;top:12%;background:var(--g);color:#fff;border-radius:999px;padding:8px 14px;font-size:13px;font-weight:600;box-shadow:var(--shadow);animation:float 8s ease-in-out infinite;animation-delay:-3s}
.float-meter{position:absolute;z-index:3;left:0;top:14%;width:250px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:6px}
.float-meter small{font-size:11px;color:var(--ink-3)}
.float-meter b{font:600 40px/1 var(--f-d);letter-spacing:-.03em}
.float-meter em{font-style:normal;font-size:15px;color:var(--ink-3);margin-left:4px}
.fm-bar{height:8px;border-radius:99px;background:var(--tint-v);overflow:hidden}
.fm-bar i{display:block;height:100%;width:80%;background:linear-gradient(90deg,var(--v),var(--pink));animation:fill 3s ease-in-out infinite alternate}
@keyframes fill{from{width:35%}to{width:80%}}
@keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(0,-10px)}}
.hs-arrow{position:absolute;z-index:4;top:calc(20px + clamp(500px,40vw,580px) / 2);transform:translateY(-50%);width:34px;height:34px;border-radius:50%;border:1px solid var(--line-2);background:#fff;display:grid;place-items:center;transition:border-color .2s}
.hs-arrow:hover{border-color:var(--v)}
.hs-arrow svg{width:16px;height:16px;fill:none;stroke:var(--ink-2);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hs-arrow.prev{left:10px}.hs-arrow.next{right:10px}
.hs-dots{display:flex;justify-content:center;gap:8px;margin-top:6px}
.hs-ctl{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:6px}
.hs-ctl .hs-dots{margin-top:0}
.hs-pp{width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:var(--card,#fff);color:var(--ink-2,#4B4766);font-size:10px;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.hs-pp:hover{border-color:var(--v)}
.hs-pp[aria-pressed="true"]{color:var(--v);border-color:var(--v)}
.hs-dots button{width:34px;height:3px;border:0;padding:0;border-radius:3px;background:var(--line);overflow:hidden;position:relative}
.hs-dots button i{position:absolute;inset:0;background:var(--v);transform:scaleX(0);transform-origin:left}
.hs-dots button.is-done i{transform:scaleX(1)}
.hs-dots button.is-on i{animation:prog var(--dur,6s) linear forwards}
.hero.is-paused .hs-dots button.is-on i{animation-play-state:paused}
@keyframes prog{to{transform:scaleX(1)}}
.help{margin-top:22px;display:flex;align-items:center;gap:18px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 16px;box-shadow:0 16px 36px -24px rgba(20,10,60,.35)}
.help-l{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;white-space:nowrap;flex:none}
.help-l i{font-style:normal;color:var(--v)}
.help-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;flex:1}
.help-chips::-webkit-scrollbar{display:none}
.help-chips a{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:13px;color:var(--v);white-space:nowrap;transition:background .2s,border-color .2s}
.help-chips a i{font-style:normal;font-size:12px}
.help-chips a:hover{background:var(--tint-v);border-color:var(--v-l)}

/* ---------- script marquee (logo-wall slot) ---------- */
.logos{margin-top:40px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.logos-track{display:flex;gap:72px;width:max-content;animation:mq 40s linear infinite}
.logos:hover .logos-track{animation-play-state:paused}
.logos-track span{font:600 30px/1.4 var(--f-d);color:#2A2540;opacity:.5;white-space:nowrap;filter:grayscale(1);transition:opacity .2s,color .2s}
.logos-track span:hover{opacity:1;color:var(--v)}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- dark banner carousel ---------- */
.banner{margin-top:56px;position:relative}
.bn-track{position:relative;height:380px}
.bn{position:absolute;inset:0;border-radius:18px;overflow:hidden;background:radial-gradient(90% 130% at 85% 20%,#3A26A8 0%,#1C1450 45%,var(--night) 100%);color:#fff;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;padding:40px clamp(24px,5vw,60px);opacity:0;visibility:hidden;transition:opacity .6s,visibility 0s .6s}
.bn.is-on{opacity:1;visibility:visible;transition:opacity .6s}
.bn-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(70% 90% at 70% 40%,#000,transparent);mask-image:radial-gradient(70% 90% at 70% 40%,#000,transparent)}
.bn-copy{position:relative;display:flex;flex-direction:column;gap:16px;align-items:flex-start;max-width:520px}
.bn-copy h2{font-size:clamp(28px,3vw,42px);line-height:1.12;letter-spacing:-.025em}
.bn-copy p{color:var(--on-night-2)}
.bn-k{font:500 11px var(--f-m)!important;letter-spacing:.08em;text-transform:uppercase;color:var(--g-l)!important}
.bn.is-on .bn-copy>*{animation:rise .7s var(--ease) both}
.bn-phone{position:relative;justify-self:center;width:200px;aspect-ratio:9/16;border-radius:28px;border:6px solid #251E55;overflow:hidden;background:#000;box-shadow:0 40px 80px -30px rgba(0,0,0,.7)}
.bn-phone video{width:100%;height:100%;object-fit:cover}
.bn-chip{position:absolute;background:rgba(255,255,255,.1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:9px 13px;font-size:13px;animation:float 8s ease-in-out infinite}
.bn-chip b{color:var(--g-l);font-weight:600}
.bn-chip.c1{right:calc(8% + 200px);top:22%}.bn-chip.c2{right:5%;bottom:14%;animation-delay:-4s}
.bn-call{position:relative;justify-self:center;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;max-width:360px}
.bn-call p{font-size:15px}
.bn-call span{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:7px 14px;font-size:12.5px}
.call-ring{position:relative;width:74px;height:74px;display:grid;place-items:center}
.call-ring b{position:relative;z-index:1;width:56px;height:56px;border-radius:50%;background:var(--g);display:grid;place-items:center;font-size:24px}
.call-ring i{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(91,227,184,.6);animation:ringp 2.4s ease-out infinite}
.call-ring i:nth-child(2){animation-delay:.8s}.call-ring i:nth-child(3){animation-delay:1.6s}
@keyframes ringp{from{transform:scale(.7);opacity:1}to{transform:scale(1.9);opacity:0}}
.call-wave{display:flex;gap:3px;align-items:center;height:26px}
.call-wave i{width:3px;height:18px;border-radius:2px;background:var(--g-l);animation:wave .9s ease-in-out infinite}
.call-wave i:nth-child(2n){animation-delay:.2s}.call-wave i:nth-child(3n){animation-delay:.4s;height:24px}
@keyframes wave{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1.4)}}
.bn-term{position:relative;justify-self:center;width:100%;max-width:420px;background:#0E0B24;border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:18px;font:400 13px/1.7 var(--f-m);color:var(--on-night)}
.bn-term .ok{color:var(--g-l);margin-bottom:8px}
.bn-dots{position:absolute;left:0;right:0;bottom:16px;display:flex;justify-content:center;gap:8px;z-index:3}
.bn-dots button{width:8px;height:8px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.35);transition:width .3s,background .3s}
.bn-dots button.is-on{width:22px;border-radius:4px;background:#fff}

/* ---------- try it ---------- */
.try{margin-top:72px}
.try-card{display:grid;grid-template-columns:1.05fr .95fr .8fr;gap:24px;align-items:center;background:var(--mist);border:1px solid var(--line);border-radius:18px;padding:36px}
.try-copy{display:flex;flex-direction:column;gap:14px}
.try-copy h2{font-size:clamp(28px,2.8vw,40px);line-height:1.1;letter-spacing:-.03em}
.try-copy>p{color:var(--ink-2);font-size:15.5px}
.try-form{display:flex;gap:8px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:5px 5px 5px 14px;transition:border-color .2s,box-shadow .2s}
.try-form:focus-within{border-color:var(--v);box-shadow:0 0 0 4px rgba(124,78,255,.12)}
.try-form input{flex:1;min-width:0;border:0;outline:0;font:400 15px var(--f-b);background:transparent;color:var(--ink)}
.try-chips{display:flex;flex-wrap:wrap;gap:8px}
.try-chips button{border:1px solid var(--line-2);background:#fff;border-radius:999px;padding:6px 12px;font-size:13px;color:var(--ink-2);transition:border-color .2s,color .2s}
.try-chips button small{font-size:10px;color:var(--ink-3);margin-left:4px}
.try-chips button:hover{border-color:var(--v);color:var(--v)}
.try-note{font-size:12.5px;color:var(--ink-3)}
.try-post{background:#fff;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);font-size:13px}
.tp-top{display:flex;align-items:center;gap:9px;padding:10px 12px}
.tp-top div{display:flex;flex-direction:column;line-height:1.2}
.tp-top small{font-size:11px;color:var(--ink-3)}
.try-post>img{width:100%;height:190px;object-fit:cover}
.tp-cap{padding:10px 12px 4px;color:var(--ink-2)}
.tp-comments{display:flex;flex-direction:column;gap:8px;padding:8px 12px 14px;min-height:150px}
.tp-c{display:flex;gap:8px;align-items:flex-start;animation:pop .35s ease-out both}
.tp-c i{width:24px;height:24px;flex:none;border-radius:50%;background:var(--tint-v);color:var(--v);display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:600}
.tp-c.me i{background:var(--v);color:#fff}
.tp-c small{display:block;font-size:10.5px;color:var(--ink-3)}
@keyframes pop{from{transform:scale(.85);opacity:0}}
.try-phone{justify-self:center;width:100%;max-width:280px;height:460px;border-radius:32px;border:7px solid var(--ink);background:#fff;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.try-thread{flex:1;background:#FAF9FE;padding:12px;display:flex;flex-direction:column;gap:8px;justify-content:flex-end;overflow:hidden}
.try-empty{margin:auto;text-align:center;font-size:13px;color:var(--ink-3)}
.try-thread .m{animation:pop .35s ease-out both}
.try-thread .m small{display:block;font-size:10px;opacity:.65;margin-bottom:2px}
.try-thread .card{display:flex;justify-content:space-between;gap:8px;margin-top:8px;background:#fff;color:var(--ink);border-radius:10px;padding:8px 10px;font-size:12px}
.try-thread .card span{background:var(--v);color:#fff;border-radius:6px;padding:3px 8px;font-weight:600}
.try-tag{align-self:center;font-size:11px;color:var(--ink-3);background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 10px}
.try-tag b{color:var(--g)}
.try-typing{align-self:flex-end;display:flex;gap:4px;background:var(--v);border-radius:14px;padding:11px 12px}
.try-typing i,.typing i{width:6px;height:6px;border-radius:50%;background:#fff;animation:blink 1.2s infinite}
.try-typing i:nth-child(2),.typing i:nth-child(2){animation-delay:.15s}.try-typing i:nth-child(3),.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-3px)}}

/* phone + chat primitives */
.ph-bar{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid #F0EDF7;font-size:13px}
.ph-bar div{display:flex;flex-direction:column;line-height:1.2}
.ph-bar small{font-size:11px;color:var(--ink-3)}
.ph-av{width:30px;height:30px;flex:none;border-radius:50%;background:linear-gradient(135deg,var(--v),var(--pink));color:#fff;display:grid;place-items:center;font-weight:600;font-size:13px}
.live{margin-left:auto;width:8px;height:8px;border-radius:50%;background:var(--g);box-shadow:0 0 0 4px rgba(15,158,122,.18)}
.m{max-width:86%;padding:9px 12px;border-radius:14px;font-size:13px;line-height:1.45}
.m.in{background:#fff;align-self:flex-start;border-bottom-left-radius:4px;box-shadow:0 2px 6px -4px rgba(20,10,60,.3)}
.m.out{background:var(--v);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.okm{background:var(--g)!important}
.tagc{align-self:center;font-size:11.5px;background:var(--tint-v);color:var(--ink-2);border-radius:999px;padding:5px 11px}

/* ---------- product stack ---------- */
section.stack{padding-top:120px;background:linear-gradient(#fff 0,#fff 420px,var(--mist) 420px)}
.stack-h{font-size:clamp(34px,4vw,56px);line-height:1.08;letter-spacing:-.035em;max-width:900px}
.stack-h span{color:var(--g)}
.stack-links{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:22px;font-size:15px;font-weight:500}
.stack-links span{color:var(--ink-3);font-weight:400;padding-right:22px;border-right:1px solid var(--line-2)}
.stack-links a:hover{color:var(--v)}
.stack-bar{position:fixed;left:0;right:0;top:var(--sat);z-index:55;background:#fff;border-bottom:1px solid var(--line);transform:translateY(-110%);transition:transform .35s var(--ease)}
.stack-bar.is-on{transform:none}
.sb-in{display:flex;align-items:center;gap:24px;height:var(--navh)}
.sb-tabs{display:flex;gap:30px;overflow-x:auto;scrollbar-width:none;flex:1;height:100%}
.sb-tabs::-webkit-scrollbar{display:none}
.sb-tabs a{display:flex;align-items:center;font-size:15px;color:var(--ink-3);border-bottom:2px solid transparent;white-space:nowrap;transition:color .2s,border-color .2s}
.sb-tabs a:hover{color:var(--ink)}
.sb-tabs a.is-on{color:var(--ink);border-color:var(--g);font-weight:500}
.sc-list{padding-block:48px 72px}
.sc{position:sticky;top:calc(var(--sat) + var(--navh) + 20px + var(--k,0) * 20px);background:#fff;border:1px solid var(--line);border-radius:14px;padding:36px 36px 40px;margin-bottom:48px;box-shadow:0 -12px 40px -24px rgba(30,20,80,.28);transform-origin:50% 0;will-change:transform}
.sc:nth-child(2){--k:1}.sc:nth-child(3){--k:2}.sc:nth-child(4){--k:3}.sc:nth-child(5){--k:4}.sc:nth-child(6){--k:5}.sc:nth-child(7){--k:6}.sc:nth-child(8){--k:7}
.sc:last-child{margin-bottom:0}
.sc>h3{font-size:clamp(26px,2.4vw,34px);letter-spacing:-.025em;margin-bottom:26px}
.sc-tabs{display:flex;gap:26px;margin:-8px 0 22px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.sc-tabs button{flex:none;border:0;background:none;padding:10px 0 12px;font-size:15px;color:var(--ink-3);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.sc-tabs button.is-on{color:var(--ink);font-weight:500;border-color:var(--g)}
.sc-pane:not(.is-on){display:none!important}
.tiles-wrap.is-pane-off{display:none}
.sc-pane.is-on{animation:rise .5s var(--ease) both}
.tiles-wrap{position:relative}
.tiles-next{position:absolute;right:-6px;top:28%;width:44px;height:44px;border-radius:50%;border:0;background:rgba(23,19,46,.55);color:#fff;font-size:26px;line-height:1;display:none;place-items:center;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:2}
.tiles-next.is-on{display:grid}
.tiles-next:hover{background:var(--v)}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.tl{min-width:0;display:flex;flex-direction:column}
.tl h4{font-size:19px;margin:16px 0 4px;letter-spacing:-.015em}
.tl p{font-size:14px;color:var(--ink-3);line-height:1.5}
.tl-m{position:relative;aspect-ratio:4/3.3;border-radius:8px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:14px;transition:transform .45s var(--ease)}
.tl:hover .tl-m{transform:scale(1.02)}
.tl-cta{display:flex;align-items:center;gap:14px;margin-top:14px;opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s var(--ease)}
.tl:hover .tl-cta,.tl:focus-within .tl-cta{opacity:1;transform:none}
.tint-v{background:var(--tint-v)}.tint-m{background:var(--tint-m)}.tint-p{background:var(--tint-p)}.tint-b{background:var(--tint-b)}

/* mini UI kit */
.ui-bub{display:inline-block;max-width:88%;padding:8px 12px;border-radius:14px;font-size:13px;line-height:1.35;box-shadow:0 6px 14px -10px rgba(20,10,60,.4)}
.b-in{background:#fff;color:var(--ink);align-self:flex-start;border-bottom-left-radius:4px}
.b-out{background:var(--v);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.typing{display:inline-flex;gap:4px;padding:11px 12px}
.ui-chip{display:inline-flex;align-items:center;gap:6px;background:#fff;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:500;color:var(--ink-2);box-shadow:0 6px 14px -10px rgba(20,10,60,.4)}
.ui-chip.ok{background:var(--g);color:#fff}
.tl-ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tl-m .tl-ph~.ui-bub{position:relative;align-self:flex-start;margin-top:auto}
.tl-m .tl-ph~.ui-chip{position:relative;align-self:flex-end}
.ui-thread{width:100%;background:#fff;border-radius:10px;padding:10px 12px;font-size:12px;display:flex;flex-direction:column;gap:6px;box-shadow:0 8px 18px -12px rgba(20,10,60,.4)}
.ui-thread .rep{padding-left:14px;color:var(--ink-2)}
.ui-thread b{font-weight:600;color:var(--ink);margin-right:4px}
.ui-story{width:42%;aspect-ratio:9/16;max-height:78%;border-radius:12px;background:linear-gradient(160deg,#FFB38A,#FF6F9A 55%,#8A5CFF);display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:6px;padding:10px}
.ui-stack{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.ui-keys{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.ui-keys span{background:#fff;border-radius:8px;padding:7px 11px;font:500 12.5px var(--f-m);color:var(--ink);box-shadow:0 6px 14px -10px rgba(20,10,60,.4)}
.ui-keys span::after{content:" ✓";color:var(--g)}
.ui-card{display:flex;align-items:center;gap:10px;background:#fff;border-radius:12px;padding:8px;width:100%;box-shadow:0 8px 20px -12px rgba(20,10,60,.45);font-size:13px}
.ui-card img{width:42px;height:42px;border-radius:8px;object-fit:cover;flex:none}
.ui-card div{flex:1;display:flex;flex-direction:column;min-width:0}
.ui-card small{color:var(--ink-3);font-size:11.5px}
.ui-card .pay{background:var(--v);color:#fff;border-radius:8px;padding:7px 10px;font-size:12px;font-weight:600;white-space:nowrap}
.ui-card.sm{padding:6px 8px;width:92%}
.ui-receipt{display:flex;align-items:center;gap:10px;background:#fff;border-radius:12px;padding:12px;width:100%;box-shadow:0 8px 20px -12px rgba(20,10,60,.45);font-size:13px}
.ui-receipt span{font-size:22px}
.ui-receipt div{flex:1;display:flex;flex-direction:column;min-width:0}
.ui-receipt small{color:var(--ink-3);font-size:11px}
.ui-receipt em{font-style:normal;background:var(--g);color:#fff;border-radius:999px;padding:4px 9px;font-size:11px;font-weight:600}
.ui-scan{position:relative;width:46%;aspect-ratio:1;border-radius:10px;overflow:hidden}
.ui-scan img{width:100%;height:100%;object-fit:cover}
.ui-scan i{position:absolute;left:0;right:0;height:2px;background:var(--v);box-shadow:0 0 12px 3px rgba(124,78,255,.7);animation:scan 2.4s ease-in-out infinite}
@keyframes scan{0%,100%{top:8%}50%{top:90%}}
.ui-url{width:100%;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 8px 20px -12px rgba(20,10,60,.45)}
.ui-url span{display:block;font:500 11.5px var(--f-m);color:var(--ink-2);background:#F4F2FA;padding:7px 10px}
.ui-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px}
.ui-grid i{aspect-ratio:1.5;border-radius:6px;background:linear-gradient(135deg,var(--tint-v),#DCD2FF)}
.ui-grid i:nth-child(2){background:linear-gradient(135deg,var(--tint-p),#FFD6BF)}.ui-grid i:nth-child(3){background:linear-gradient(135deg,var(--tint-m),#C7EBDD)}
.ui-coupon{background:#fff;border:1.5px dashed var(--v);border-radius:12px;padding:14px 18px;display:flex;flex-direction:column;align-items:center}
.ui-coupon b{font:600 20px var(--f-m);letter-spacing:.06em;color:var(--v)}
.ui-coupon span{font-size:12px;color:var(--ink-3)}
.ui-list{list-style:none;margin:0;padding:6px;width:100%;background:#fff;border-radius:10px;box-shadow:0 8px 20px -12px rgba(20,10,60,.45)}
.ui-list li{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12.5px;padding:6px;border-bottom:1px solid #F0EDF7}
.ui-list li:last-child{border-bottom:0}
.ui-list em{font-style:normal;font-size:11px;color:var(--g);font-weight:600;white-space:nowrap}
.ui-docs{display:flex;flex-wrap:wrap;gap:5px;justify-content:center}
.ui-docs span{background:#fff;border-radius:6px;padding:4px 8px;font-size:11px;box-shadow:0 4px 10px -8px rgba(20,10,60,.4)}
.ui-voice{display:flex;align-items:center;gap:3px;background:var(--v);color:#fff;border-radius:18px;padding:10px 14px}
.ui-voice span{margin-right:6px}
.ui-voice i{width:3px;border-radius:2px;background:#fff;height:10px;animation:wave 1s ease-in-out infinite}
.ui-voice i:nth-child(odd){animation-delay:.15s}.ui-voice i:nth-child(3n){animation-delay:.3s;height:16px}
.ui-voice em{font-style:normal;font-size:11px;margin-left:8px}
.ui-field{width:100%;background:#fff;border-radius:12px;padding:12px;box-shadow:0 8px 20px -12px rgba(20,10,60,.45)}
.ui-field small{font-size:11px;color:var(--ink-3)}
.ui-field div{margin-top:6px;border:1px solid var(--line-2);border-radius:8px;padding:8px 10px;font-size:13px;display:flex;align-items:center;min-height:36px}
.caret{width:2px;height:16px;background:var(--v);margin-left:2px;animation:car 1s steps(1) infinite}
@keyframes car{50%{opacity:0}}
.ui-code{font:600 15px var(--f-m);letter-spacing:.08em;background:#fff;border:1.5px dashed var(--g);border-radius:10px;padding:8px 14px}
.ui-nodes{display:flex;gap:18px;position:relative}
.ui-nodes::before{content:"";position:absolute;left:8px;right:8px;top:50%;height:2px;background:repeating-linear-gradient(90deg,var(--g) 0 6px,transparent 6px 11px)}
.ui-nodes i{width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--g);position:relative}
.ui-circle{position:relative;width:130px;height:130px}
.ui-circle::before{content:"";position:absolute;inset:12px;border-radius:50%;border:2px dashed rgba(124,78,255,.45);animation:spin 14s linear infinite}
.ui-circle i{position:absolute;width:38px;height:38px;border-radius:50%;background:#fff;box-shadow:0 6px 14px -8px rgba(20,10,60,.5);display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:600;color:var(--v)}
.ui-circle i:nth-child(1){left:46px;top:-4px}.ui-circle i:nth-child(2){right:-4px;top:46px}.ui-circle i:nth-child(3){left:46px;bottom:-4px}.ui-circle i:nth-child(4){left:-4px;top:46px;background:var(--v);color:#fff;font-size:10px}
.ui-circle em{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:500 10px var(--f-m);color:var(--ink-3);white-space:nowrap}
.ui-next,.ui-draw,.ui-pause{background:#fff;border-radius:12px;padding:12px 14px;box-shadow:0 8px 20px -12px rgba(20,10,60,.45);display:flex;flex-direction:column;gap:4px;font-size:12.5px;width:92%}
.ui-next small,.ui-draw small{font-size:10.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}
.ui-next b,.ui-draw b,.ui-pause b{font-size:14px}
.ui-next span{color:var(--v);font-weight:500}
.ui-next em,.ui-draw em{font-style:normal;font:500 11px var(--f-m);color:var(--ink-3)}
.ui-draw span{color:var(--g);font-weight:500}
.ui-pause b{color:#C2410C}
.ui-pause small{color:var(--ink-3)}
.ui-pause span{font:500 11px var(--f-m);color:var(--ink-2)}
.ui-rewind{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;width:100%;font:500 10px var(--f-m);text-align:center;color:var(--ink-3)}
.ui-rewind span{background:#fff;border-radius:6px;padding:14px 0 6px;overflow:hidden}
.ui-rewind .now{background:var(--v);color:#fff}
.ui-rewind i{position:absolute;left:0;top:4px;height:4px;border-radius:4px;background:var(--orange);animation:rew 3s ease-in-out infinite}
@keyframes rew{0%{width:14%;left:86%}60%,100%{width:100%;left:0}}
.ui-tags{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.ui-tags span{background:#fff;border-radius:999px;padding:6px 12px;font:500 12px var(--f-m);color:var(--v);box-shadow:0 6px 14px -10px rgba(20,10,60,.4)}
.ui-tags span::before{content:"# ";color:var(--ink-3)}
.ui-kanban{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;width:96%}
.ui-kanban div{background:#fff;border-radius:8px;padding:6px;display:flex;flex-direction:column;gap:4px;min-height:92px;min-width:0}
.ui-kanban small{font-size:9.5px;color:var(--ink-3);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-kanban i{height:12px;border-radius:4px;background:var(--tint-v)}
.ui-kanban i.g{background:#C8EEDF}
.ui-meter{display:flex;flex-direction:column;align-items:center;gap:4px;width:80%}
.ui-meter b{font:600 42px/1 var(--f-d);letter-spacing:-.03em}
.ui-meter small{font-size:12px;color:var(--ink-3)}
.ui-meter div{width:100%;height:8px;border-radius:9px;background:#fff;overflow:hidden;margin-top:6px}
.ui-meter div i{display:block;height:100%;background:linear-gradient(90deg,var(--v),var(--pink));animation:fill 2.6s ease-in-out infinite alternate}
.ui-spark{width:92%}
.ui-spark path{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ui-spark .sp{stroke:#F0A6A0;stroke-dasharray:4 5}
.ui-spark .calm{stroke:var(--g);stroke-dasharray:240;stroke-dashoffset:240;animation:draw 2.6s ease-out infinite}
@keyframes draw{to{stroke-dashoffset:0}}
.ui-flow{display:flex;flex-direction:column;align-items:center;gap:8px}
.ui-flow .fn{background:#fff;border-radius:8px;padding:6px 10px;font-size:11.5px;font-weight:500;box-shadow:0 4px 10px -8px rgba(20,10,60,.5)}
.ui-flow .fn.ai{background:var(--v);color:#fff}
.ui-flow .fb{display:flex;gap:6px}
.ui-form{background:#fff;border-radius:12px;padding:12px;width:88%;box-shadow:0 8px 20px -12px rgba(20,10,60,.45);font-size:12.5px;display:flex;flex-direction:column;gap:6px}
.ui-form p{display:flex;justify-content:space-between;border-bottom:1px solid #F0EDF7;padding-bottom:5px}
.ui-form em{font-style:normal;color:var(--g);font-weight:600}
.ui-form b{color:var(--v)}
.ui-snap{list-style:none;margin:0;padding:6px;width:92%;background:#fff;border-radius:10px;box-shadow:0 8px 20px -12px rgba(20,10,60,.45)}
.ui-snap li{display:flex;justify-content:space-between;gap:8px;font-size:12px;padding:7px 6px;border-bottom:1px solid #F0EDF7}
.ui-snap li:last-child{border:0}
.ui-snap span{color:var(--v);font-weight:600;font-size:11px}
.ui-term{width:100%;background:var(--night);color:var(--on-night);border-radius:10px;padding:12px;font:400 11.5px/1.55 var(--f-m)}
.ui-term .ok{color:var(--g-l);margin-top:6px}
.ui-agents{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.ui-agents span{background:#fff;border-radius:999px;padding:5px 10px;font-size:11.5px}
.ui-agents b{background:var(--v);color:#fff;border-radius:8px;padding:6px 14px;font-size:12px;margin-top:4px}
.ui-clients{list-style:none;margin:0;padding:6px;width:100%;background:#fff;border-radius:10px;box-shadow:0 8px 20px -12px rgba(20,10,60,.45)}
.ui-clients li{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:7px 6px;border-bottom:1px solid #F0EDF7}
.ui-clients li:last-child{border:0}
.ui-clients i{width:20px;height:20px;flex:none;border-radius:50%;background:linear-gradient(135deg,var(--v),var(--pink))}
.ui-clients li:nth-child(2) i{background:linear-gradient(135deg,var(--orange),var(--pink))}
.ui-clients li:nth-child(3) i{background:linear-gradient(135deg,var(--g),var(--g-l))}
.ui-clients em{margin-left:auto;font-style:normal;font-size:11px;color:var(--g)}
.ui-clients.big li{font-size:14px;padding:12px 10px}
.ui-clients.big em{color:var(--v)}
.ui-ab{width:90%;display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;font-size:12px;background:#fff;border-radius:12px;padding:14px;box-shadow:0 8px 20px -12px rgba(20,10,60,.45)}
.ui-ab i{height:10px;border-radius:6px;background:var(--tint-v);position:relative;overflow:hidden}
.ui-ab i::after{content:"";position:absolute;inset:0;width:var(--w);background:var(--v);border-radius:inherit;animation:grow 2.4s ease-out infinite alternate}
@keyframes grow{from{width:10%}}
.ui-signin{background:#fff;border-radius:14px;width:80%;box-shadow:0 12px 30px -16px rgba(20,10,60,.5);display:flex;flex-direction:column;gap:8px;padding:0 0 14px;overflow:hidden;align-items:center}
.ui-signin span{align-self:stretch;font:500 11.5px var(--f-m);background:#F4F2FA;padding:8px 12px;color:var(--ink-2)}
.ui-signin b{font:600 18px var(--f-d);margin-top:6px}
.ui-signin small{font-size:12px;color:var(--ink-3)}
.ui-signin i{width:80%;height:30px;border:1px solid var(--line-2);border-radius:8px}
.ui-signin em{font-style:normal;font-size:11px;color:var(--g)}

/* ---------- industries ---------- */
.ind{padding-block:110px 90px}
.ind-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.ind-head h2{font-size:clamp(34px,4vw,56px);line-height:1.08;letter-spacing:-.035em}
.ind-icons{display:flex;gap:18px}
.ind-icons i{font-style:normal;font-size:26px;filter:grayscale(1);opacity:.75;animation:bob 3s ease-in-out infinite}
.ind-icons i:nth-child(2){animation-delay:.3s}.ind-icons i:nth-child(3){animation-delay:.6s}.ind-icons i:nth-child(4){animation-delay:.9s}.ind-icons i:nth-child(5){animation-delay:1.2s}.ind-icons i:nth-child(6){animation-delay:1.5s}.ind-icons i:nth-child(7){animation-delay:1.8s}
@keyframes bob{0%,100%{transform:none}50%{transform:translateY(-6px)}}
.ind-tabs,.tpl-tabs{display:flex;gap:26px;margin-top:34px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.ind-tabs::-webkit-scrollbar,.tpl-tabs::-webkit-scrollbar{display:none}
.ind-tabs button,.tpl-tabs button{flex:none;position:relative;border:0;background:none;padding:10px 0 12px;font-size:15px;color:var(--ink-3);white-space:nowrap;transition:color .2s}
.ind-tabs button.is-on,.tpl-tabs button.is-on{color:var(--ink);font-weight:500}
.ind-tabs button::after,.tpl-tabs button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--g);transform:scaleX(0);transform-origin:left}
.ind-tabs button.is-on::after,.tpl-tabs button.is-on::after{transform:scaleX(1)}
.is-auto button.is-on::after{animation:prog var(--tabdur,5s) linear forwards;transform:scaleX(0)}
.ind-card{position:relative;margin-top:26px;height:480px;border-radius:14px;overflow:hidden;background:#EDE9F7}
.ind-pics img{position:absolute;right:0;top:0;width:66%;height:100%;object-fit:cover;object-position:50% 26%;opacity:0;transform:scale(1.05);transition:opacity .7s,transform 1.4s var(--ease)}
.ind-pics img.is-on{opacity:1;transform:none}
.ind-box{position:absolute;left:36px;top:36px;bottom:36px;width:min(46%,520px);background:#fff;border-radius:10px;padding:36px;display:flex;flex-direction:column;justify-content:center;gap:16px;box-shadow:var(--shadow)}
.ind-txt{display:none}
.ind-txt.is-on{display:block;animation:rise .6s var(--ease) both}
.ind-txt h3{font-size:clamp(26px,2.6vw,36px);line-height:1.15;letter-spacing:-.025em}
.ind-txt h3 span{color:var(--g)}
.ind-txt p{margin-top:12px;color:var(--ink-2)}
.ind-packs{font-size:12.5px;color:var(--ink-3)}
.ind-box .btn{align-self:flex-start}

/* ---------- the whole sale ---------- */
.sale{padding-block:100px;background:var(--mist)}
.sale-h{font-size:clamp(34px,4vw,56px);letter-spacing:-.035em;margin-top:12px}
.sale-tabs{display:flex;gap:10px;margin-top:28px;overflow-x:auto;scrollbar-width:none}
.sale-tabs::-webkit-scrollbar{display:none}
.sale-tabs button{flex:none;position:relative;display:flex;align-items:center;gap:8px;border:1px solid var(--line-2);background:#fff;border-radius:999px;padding:8px 16px 8px 8px;font-size:14px;color:var(--ink-2);white-space:nowrap;overflow:hidden;transition:border-color .2s,color .2s}
.sale-tabs b{width:24px;height:24px;border-radius:50%;background:var(--grey);display:grid;place-items:center;font-size:12px}
.sale-tabs button.is-on{border-color:var(--v);color:var(--ink)}
.sale-tabs button.is-on b{background:var(--v);color:#fff}
.sale-tabs button::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--v);transform:scaleX(0);transform-origin:left}
.sale-tabs.is-auto button.is-on::after{animation:prog var(--tabdur,3.2s) linear forwards}
.sale-card{position:relative;margin-top:24px;border-radius:18px;overflow:hidden;background:radial-gradient(80% 120% at 80% 20%,#5B3CF0,#3521B5 55%,#1E1470);color:#fff;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;padding:48px clamp(24px,5vw,72px)}
.sale-card::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.18) 1px,transparent 1.4px);background-size:18px 18px;-webkit-mask-image:radial-gradient(70% 80% at 75% 50%,#000,transparent);mask-image:radial-gradient(70% 80% at 75% 50%,#000,transparent)}
.sale-copy{position:relative;display:flex;flex-direction:column;gap:24px;align-items:flex-start;max-width:520px}
.ss{display:none}
.ss.is-on{display:block;animation:rise .55s var(--ease) both}
.ss h3{font-size:clamp(26px,2.6vw,38px);line-height:1.15;letter-spacing:-.025em}
.ss p{margin-top:12px;color:#DCD4FF;font-size:17px}
.phone{position:relative;width:280px;height:520px;border-radius:34px;background:#fff;color:var(--ink);border:7px solid #0E0A22;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 30px 60px -20px rgba(0,0,0,.55)}
.ph-scr{flex:1;overflow:hidden;background:#FAF9FE}
.scr-in{display:flex;flex-direction:column;gap:9px;padding:12px;transition:transform .7s var(--ease)}
.post{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 6px 14px -10px rgba(20,10,60,.4);font-size:12px}
.post img{width:100%;height:120px;object-fit:cover}
.post p{padding:6px 10px}
.post .pr{padding-left:22px;color:var(--ink-2)}
.post small{color:var(--ink-3)}
.scr-in .ui-card{width:88%;align-self:flex-end}
#salePin .s2,#salePin .s3,#salePin .s4,#salePin .s5,#salePin .s6{opacity:0;transform:translateY(10px) scale(.98);transition:opacity .45s,transform .45s}
#salePin[data-step="2"] .s2,#salePin[data-step="3"] :is(.s2,.s3),#salePin[data-step="4"] :is(.s2,.s3,.s4),#salePin[data-step="5"] :is(.s2,.s3,.s4,.s5),#salePin[data-step="6"] :is(.s2,.s3,.s4,.s5,.s6){opacity:1;transform:none}

/* ---------- languages ---------- */
.langs{position:relative;padding-block:110px;overflow:hidden}
.langs .wrap{position:relative}
.langs h2,.viral h2{font-size:clamp(34px,4vw,56px);line-height:1.08;letter-spacing:-.035em;margin-top:12px;max-width:760px}
.sub{margin-top:16px;font:400 clamp(18px,1.7vw,22px)/1.45 var(--f-d);color:var(--ink-3);max-width:680px}
.globe{position:absolute;right:24px;top:-30px;width:380px;height:380px;pointer-events:none}
.cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:44px;position:relative}
.c3{display:flex;flex-direction:column}
.c3-m{position:relative;aspect-ratio:1/1.08;border-radius:12px;overflow:hidden;padding:16px}
.c3 h3{font-size:20px;margin:16px 0 6px;letter-spacing:-.015em}
.c3 p{font-size:14.5px;color:var(--ink-3)}
.lang-demo{display:flex;flex-direction:column;gap:12px}
.lang-chips{display:flex;flex-wrap:wrap;gap:6px}
.lang-chips button{border:1px solid rgba(124,78,255,.25);background:#fff;border-radius:999px;padding:4px 9px;font-size:12px;color:var(--ink-2);transition:all .2s}
.lang-chips button[aria-selected="true"]{background:var(--v);border-color:var(--v);color:#fff}
.lang-thread{display:flex;flex-direction:column;gap:8px;margin-top:auto}
.det{background:#fff;border-radius:12px;padding:12px;height:100%;display:flex;flex-direction:column;box-shadow:0 8px 20px -12px rgba(20,10,60,.4)}
.det-h{display:flex;justify-content:space-between;font-size:13px;font-weight:600;padding:2px 4px 8px}
.det-h span{color:var(--ink-3)}
.det ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;flex:1;justify-content:space-between}
.det li{display:flex;align-items:center;gap:10px;font-size:13px;padding:4px 6px;border-radius:8px;transition:background .3s}
.det li i{width:22px;height:22px;border-radius:6px;background:var(--tint-v);color:var(--v);display:grid;place-items:center;font-style:normal;font-size:11px}
.det li em{margin-left:auto;font-style:normal;color:var(--g);opacity:.25;transition:opacity .3s}
.det li.is-on{background:var(--tint-m)}
.det li.is-on em{opacity:1}
.c3-photo{padding:0}
.c3-photo img{width:100%;height:100%;object-fit:cover}
.c3-photo .ov{position:absolute;left:14px;right:14px;bottom:14px;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:2px;font-size:15px}
.c3-photo .ov small{font-size:11px;color:var(--ink-3)}
.c3-photo .ov b{font-size:12px;color:var(--g);margin-top:4px}

/* ---------- viral ---------- */
.viral{padding-block:100px;background:var(--mist)}
.cnt{color:var(--v);font-variant-numeric:tabular-nums}
.viral-row{display:grid;grid-template-columns:1.3fr 1fr;gap:20px;margin-top:40px}
.viral-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px;display:flex;flex-direction:column;gap:24px}
.lane{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ln{background:var(--mist);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:10px;min-height:150px}
.ln small{font-size:12px;color:var(--ink-3)}
.ln b{font:600 20px var(--f-d)}
.dots{display:flex;flex-wrap:wrap;gap:5px;align-content:flex-start}
.dots i{width:9px;height:9px;border-radius:50%;background:var(--v);animation:pop .4s ease-out both}
.dots.q i{background:var(--orange)}
.meter{height:10px;border-radius:9px;background:#fff;overflow:hidden}
.meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--v),var(--pink));transition:width .6s ease}
.vstats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.vstats li{border-top:1px solid var(--line);padding-top:12px;display:flex;flex-direction:column}
.vstats b{font:600 34px/1 var(--f-d);letter-spacing:-.03em}
.vstats span{font-size:13px;color:var(--ink-3);margin-top:4px}
.ring-card{position:relative;border-radius:14px;overflow:hidden;background:radial-gradient(60% 70% at 50% 50%,#3F2AC4,#1E1470 70%,#150E4F);min-height:360px;color:#fff}
.ring-card canvas{position:absolute;inset:0;width:100%;height:100%}
.ring-name{position:absolute;top:22px;left:50%;transform:translateX(-50%);font:500 15px var(--f-m);letter-spacing:.28em;white-space:nowrap}
.rtag{position:absolute;font:500 10.5px var(--f-m);letter-spacing:.06em;color:#D6CCFF;background:rgba(20,12,70,.6);border:1px solid rgba(255,255,255,.25);padding:5px 8px;border-radius:4px;white-space:nowrap}
.rtag.t1{left:16px;top:42%}.rtag.t2{right:16px;top:30%}
.ring-card p{position:absolute;left:20px;right:20px;bottom:18px;font-size:13.5px;color:#DCD4FF}

/* ---------- innovations (big-text carousel) ---------- */
.inno{padding-block:100px;background:var(--grey);overflow:hidden}
.inno-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.inno-head h2{font-size:clamp(28px,3vw,40px);letter-spacing:-.03em}
.car-nav{display:flex;align-items:center;gap:10px}
.car-nav button,.grow-nav button{width:42px;height:42px;border-radius:50%;border:1px solid var(--line-2);background:#fff;font-size:22px;line-height:1;transition:border-color .2s,opacity .2s,background .2s}
.car-nav button:hover,.grow-nav button:hover{border-color:var(--v)}
.car-nav button:disabled,.grow-nav button:disabled{opacity:.35;cursor:default}
.inno-track,.wn-track,.grow-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px max(24px,calc((100vw - 1248px) / 2)) 10px;scroll-padding-inline:max(24px,calc((100vw - 1248px) / 2))}
.inno-track::-webkit-scrollbar,.wn-track::-webkit-scrollbar,.grow-track::-webkit-scrollbar{display:none}
.inno-track{margin-top:36px}
.ic2{flex:0 0 400px;scroll-snap-align:start;background:#fff;border-radius:10px;padding:32px;display:flex;flex-direction:column;gap:16px;min-height:440px;transition:box-shadow .3s}
.ic2.wide{flex-basis:640px}
.ic2:hover{box-shadow:var(--shadow)}
.ic2-k{font-size:14px;color:var(--ink-3)}
.ic2 h3{font-size:clamp(26px,2.5vw,36px);line-height:1.2;letter-spacing:-.025em;font-weight:500}
.ic2 h3 em{font-style:normal;color:var(--v)}
.ic2-f{margin-top:auto;font-size:14.5px;color:var(--ink-2)}
.ic2-b{display:flex;align-items:center;gap:16px}

/* ---------- what's new ---------- */
.wn{padding-block:100px;overflow:hidden}
.wn-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.wn-head h2{font-size:clamp(30px,3.4vw,48px);letter-spacing:-.03em;margin-top:12px;max-width:720px}
.wn-count{font:500 13px var(--f-m);color:var(--ink-3);margin-right:6px;font-variant-numeric:tabular-nums}
.wn-track{margin-top:32px}
.wc{flex:0 0 330px;scroll-snap-align:start;border:1px solid var(--line);border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:10px;background:#fff;transition:transform .3s,box-shadow .3s,border-color .3s}
.wc:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#DCD2FF}
.wb{align-self:flex-start;font:500 10.5px/1 var(--f-m);letter-spacing:.06em;text-transform:uppercase;font-style:normal;background:var(--tint-v);color:var(--v);border-radius:999px;padding:6px 9px}
.wb-o{background:linear-gradient(90deg,var(--v),var(--pink));color:#fff}
.wb-g{background:#DDF5EA;color:var(--g)}
.wb-s{background:#FFF1DE;color:#A15C00}
.wc h3{font-size:19px;letter-spacing:-.015em}
.wc p{font-size:14px;color:var(--ink-2)}
.wc ul{list-style:none;margin:auto 0 0;padding:12px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--ink-3)}
.wc li{padding-left:16px;position:relative}
.wc li::before{content:"•";position:absolute;left:2px;color:var(--v)}
.wn-bar{height:3px;border-radius:3px;background:var(--line);margin-top:20px;overflow:hidden}
.wn-bar i{display:block;height:100%;width:10%;background:var(--v);border-radius:inherit;transition:width .3s}

/* ---------- developers band ---------- */
.dev{background:var(--night);color:var(--on-night);overflow:hidden}
.dev-mq{background:var(--g);overflow:hidden;padding:12px 0}
.dev-track{display:flex;gap:44px;width:max-content;animation:mq 42s linear infinite;font:600 15px var(--f-b);letter-spacing:.04em;color:#062A20}
.dev-track span::after{content:"•";margin-left:44px}
.dev-in{padding-block:100px}
.dev-in h2{font-size:clamp(34px,4.2vw,60px);line-height:1.1;letter-spacing:-.03em;color:#fff}
.dev-in h2 span{color:var(--g-l)}
.dev-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:56px}
.df-i{display:grid;place-items:center;width:36px;height:36px;border:1px solid rgba(255,255,255,.25);border-radius:8px;color:#fff;margin-bottom:14px}
.dev-cols h3{font-size:19px;color:#fff}
.dev-cols p{margin-top:8px;color:var(--on-night-2);font-size:14.5px}
.dev-cols a{display:inline-block;margin-top:14px;color:#fff;font-weight:500;font-size:14px}
.dev-cols a:hover{color:var(--g-l)}
.dev-try{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:center;margin-top:72px}
.dev-t{font:500 clamp(26px,2.6vw,36px)/1.2 var(--f-d);color:#fff;letter-spacing:-.02em}
.dev-t span{color:var(--g-l)}
.code{background:#1A1640;border:1px solid rgba(255,255,255,.09);border-radius:12px;overflow:hidden}
.code-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.07)}
.code-tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.code-tabs button{border:0;background:transparent;color:var(--on-night-2);font:500 13px var(--f-b);padding:6px 11px;border-radius:7px;white-space:nowrap}
.code-tabs button.is-on{background:rgba(255,255,255,.1);color:#fff}
.code-copy{border:1px solid rgba(255,255,255,.18);background:transparent;color:var(--on-night-2);font-size:12px;border-radius:7px;padding:5px 10px}
.code-copy:hover{color:#fff}
.code-body{margin:0;padding:18px 0;min-height:300px;overflow-x:auto;font:400 13.5px/1.75 var(--f-m);counter-reset:ln}
.code-body .l{display:block;padding-right:18px;white-space:pre}
.code-body .l::before{counter-increment:ln;content:counter(ln);display:inline-block;width:44px;padding-right:14px;text-align:right;color:#57507F}
.tk-k{color:#C9B8FF}.tk-s{color:var(--g-l)}.tk-p{color:#8E88B0}.tk-c{color:#7F79A6}
.cur{display:inline-block;width:8px;height:15px;background:var(--g-l);vertical-align:-2px;animation:car 1s steps(1) infinite}
.df-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:40px;font-size:13px;color:var(--on-night-2)}
.df-chips b{font-weight:500;border:1px solid rgba(91,227,184,.35);color:var(--g-l);border-radius:999px;padding:4px 11px}

/* ---------- templates ---------- */
.tpl{padding-block:100px;background:var(--mist)}
.tpl-k{font:500 14px var(--f-m);color:var(--ink-3)}
.tpl-h{font-size:clamp(32px,3.6vw,50px);line-height:1.1;letter-spacing:-.03em;margin-top:10px;max-width:880px}
.tpl-h span{color:var(--g)}
.steps-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:36px}
.steps-row>div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px;display:flex;flex-direction:column;gap:8px}
.steps-row b{width:30px;height:30px;border-radius:8px;background:var(--v);color:#fff;display:grid;place-items:center;font:600 15px var(--f-d)}
.steps-row h3{font-size:19px}
.steps-row p{font-size:14px;color:var(--ink-3)}
.tpl-tabs button small{display:block;font:500 10.5px var(--f-m);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);margin-top:2px}
.tpl-card{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center;margin-top:24px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:40px}
.tpl-txt{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.tpl-txt>p{display:none;font:400 clamp(22px,2.2vw,30px)/1.35 var(--f-d);letter-spacing:-.015em}
.tpl-txt>p.is-on{display:block;animation:rise .6s var(--ease) both}
.tpl-txt em{font-style:normal;color:var(--v)}
.tpl-stats{list-style:none;margin:0;padding:0;display:flex;gap:28px;font-size:13px;color:var(--ink-3)}
.tpl-stats b{display:block;font:500 26px var(--f-d);color:var(--ink)}
.tpl-phone{justify-self:center;width:280px;height:480px;border-radius:32px;border:7px solid var(--ink);background:#fff;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.tpl-chats{flex:1;position:relative;background:#FAF9FE}
.tc{position:absolute;inset:0;padding:14px 12px;display:flex;flex-direction:column;gap:8px;justify-content:flex-end;opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s}
.tc.is-on{opacity:1;visibility:visible;transition:opacity .4s}
.tc.is-on>*{animation:pop .45s ease-out both}
.tc.is-on>*:nth-child(2){animation-delay:.25s}.tc.is-on>*:nth-child(3){animation-delay:.5s}.tc.is-on>*:nth-child(4){animation-delay:.75s}
.tc .ui-card.sm{align-self:flex-end;width:88%}
.kw{margin-top:28px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.kw-track{display:flex;gap:12px;width:max-content;animation:mq 60s linear infinite reverse}
.kw:hover .kw-track{animation-play-state:paused}
.kw-track span{white-space:nowrap;border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:13px;color:var(--ink-2);background:#fff}
.kw-track b{font:500 12px var(--f-m);color:var(--v);margin-right:6px}

/* ---------- store / agency / everything / before-after ---------- */
.store{padding-block:110px}
.store-in{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.store-l{position:sticky;top:calc(var(--navh) + var(--sat) + 40px);display:flex;flex-direction:column;gap:14px}
.store-l h2,.ag-h,.every-h,.ba-h{font-size:clamp(32px,3.6vw,50px);letter-spacing:-.03em;line-height:1.08}
.store-l>p,.ag-sub,.every-sub{color:var(--ink-3);margin-top:10px;max-width:620px}
.bio{margin-top:10px;max-width:340px;background:linear-gradient(170deg,#F1ECFF,#FFF0E6);border:1px solid var(--line);border-radius:22px;padding:18px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow)}
.bio-top{display:flex;align-items:center;gap:10px;font-size:14px}
.bio-p{display:flex;gap:10px;background:#fff;border-radius:14px;padding:10px;align-items:center}
.bio-p img{width:56px;height:56px;border-radius:10px;object-fit:cover}
.bio-p div{display:flex;flex-direction:column;font-size:14px}
.bio-p small{color:var(--ink-3);font-size:12px}
.bio-pay{background:var(--v);color:#fff;text-align:center;border-radius:10px;padding:10px;font-weight:600;font-size:14px}
.bio-b{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bio-b span{background:#fff;border-radius:10px;padding:9px;text-align:center;font-size:13px}
.store-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.store-grid article,.every-grid article,.ag-small article,.trust-grid article{border:1px solid var(--line);border-radius:12px;padding:22px;display:flex;flex-direction:column;gap:6px;background:#fff;transition:transform .3s var(--ease),box-shadow .3s}
.store-grid article:hover,.every-grid article:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.store-grid span{font-size:22px;margin-bottom:6px}
.store-grid h3,.every-grid h3,.ag-small h3,.trust-grid h3{font-size:18px}
.store-grid p,.every-grid p,.ag-small p,.trust-grid p{font-size:14px;color:var(--ink-3)}
.agency{padding-block:110px;background:var(--mist)}
.ag-h{margin-top:12px}
.ag-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:36px}
.ag-big{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:8px}
.ag-m{height:230px;border-radius:10px;background:var(--tint-v);display:grid;place-items:center;margin-bottom:10px;overflow:hidden}
.ag-big:nth-child(2) .ag-m{background:var(--tint-b)}
.ag-m .ui-clients{width:80%}
.ag-big h3{font-size:20px}
.ag-big p{font-size:14.5px;color:var(--ink-3)}
.ag-small{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:20px}
.ag-cmp{margin-top:20px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 22px}
.ag-cmp>div{display:flex;flex-direction:column;font-size:13px;color:var(--ink-3)}
.ag-cmp b{font:500 17px var(--f-d);color:var(--ink)}
.ag-cmp em{font-style:normal;color:var(--v);font-weight:600}
.ag-cmp i{font-style:normal;color:var(--ink-3);font-size:20px}
.ag-cmp .btn{margin-left:auto}
.every{padding-block:110px}
.every-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:36px}
.every-grid span{width:40px;height:40px;border-radius:10px;background:var(--tint-v);display:grid;place-items:center;font-size:19px;margin-bottom:8px}
.every-more{margin-top:24px;font-size:14px;color:var(--ink-2);line-height:1.7}
.every-more span{font-weight:600;color:var(--v);margin-right:6px}
.ba{padding-block:40px 110px}
.ba-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:36px}
.ba-c{border-radius:14px;padding:30px;display:flex;flex-direction:column;gap:12px}
.ba-c.before{background:#F6F5F9;border:1px solid var(--line)}
.ba-c.after{background:linear-gradient(160deg,#F1ECFF,#E8F6F0);border:1px solid #DCD2FF}
.ba-k{font:500 12px var(--f-m);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.ba-c.after .ba-k{color:var(--v)}
.ba-c h3{font-size:26px}
.ba-c ul{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:15px;color:var(--ink-2)}
.ba-c li{padding-left:28px;position:relative}
.ba-c.before li::before,.ba-c.after li::before{position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:700}
.ba-c.before li::before{content:"✕";background:#FDE2E2;color:#C0362C}
.ba-c.after li::before{content:"✓";background:var(--g);color:#fff;font-size:11px}
.wf{margin-top:20px;border:1px solid var(--line);border-radius:14px;padding:28px;display:flex;align-items:center;flex-wrap:wrap;gap:0}
.wf-n{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;min-width:150px}
.wf-n span{width:56px;height:56px;border-radius:14px;background:var(--tint-v);display:grid;place-items:center;font-size:24px}
.wf-n b{font-size:16px}
.wf-n small{font-size:13px;color:var(--ink-3)}
.wf-l{flex:.6;height:2px;min-width:40px;background:linear-gradient(90deg,var(--v) 0 50%,var(--line) 50%);background-size:200% 100%;animation:flow 2s linear infinite;margin-bottom:44px}
@keyframes flow{from{background-position:100% 0}to{background-position:-100% 0}}
.wf-stats{flex-basis:100%;list-style:none;margin:24px 0 0;padding:18px 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr);gap:12px;font-size:13px;color:var(--ink-3)}
.wf-stats b{display:block;font:500 24px var(--f-d);color:var(--ink)}

/* ---------- grows with you (photo cards) ---------- */
.grow{padding-block:110px 90px;overflow:hidden}
.grow-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.grow-head h2{font-size:clamp(34px,4vw,56px);letter-spacing:-.035em}
.grow-head h2 span{color:var(--v)}
.grow-head p{display:flex;flex-direction:column;text-align:right;color:var(--ink-3);font-size:14px}
.grow-head p b{font:500 22px var(--f-d);color:var(--ink)}
.grow-track{margin-top:44px;align-items:flex-start;padding-bottom:70px}
.gp{flex:0 0 300px;margin:0;position:relative;height:400px;border-radius:12px;overflow:hidden;scroll-snap-align:start}
.gp.low{margin-top:70px}
.gp img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;filter:grayscale(1);transition:filter .5s,transform .8s var(--ease)}
.gp:hover img{filter:none;transform:scale(1.04)}
.gp figcaption{position:absolute;left:0;right:0;bottom:0;padding:60px 18px 18px;background:linear-gradient(transparent,rgba(10,8,25,.8));color:#fff;display:flex;flex-direction:column}
.gp figcaption b{font:500 18px var(--f-d)}
.gp figcaption span{font-size:13px;opacity:.8}
.grow-nav{display:flex;gap:10px;justify-content:center}

/* ---------- pricing ---------- */
.pricing{padding-block:110px}
.pr-head{display:grid;grid-template-columns:1fr auto;gap:12px 40px;align-items:end}
.pr-head .lbl{grid-column:1/-1}
.pr-head h2{font-size:clamp(32px,3.6vw,50px);line-height:1.08;letter-spacing:-.03em}
.pr-head p{grid-column:1;color:var(--ink-3);max-width:560px}
.bill{grid-column:2;grid-row:2/4;display:inline-flex;background:var(--mist);border-radius:999px;padding:4px;align-self:end}
.bill button{border:0;background:transparent;border-radius:999px;padding:9px 16px;font-size:14px;color:var(--ink-2)}
.bill button.is-on{background:#fff;color:var(--ink);box-shadow:0 4px 12px -6px rgba(20,10,60,.3)}
.bill em{font-style:normal;font-size:11px;color:var(--g);font-weight:600;margin-left:4px}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:44px}
.plan{position:relative;border:1px solid var(--line);border-radius:14px;padding:28px;display:flex;flex-direction:column;background:#fff;transition:transform .3s,box-shadow .3s}
.plan:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.plan.pop{border:2px solid var(--v);box-shadow:0 30px 60px -36px rgba(124,78,255,.6)}
.rib{position:absolute;top:-13px;left:28px;background:var(--v);color:#fff;font-size:12px;font-weight:600;border-radius:999px;padding:5px 12px}
.plan h3{font-size:22px}
.pd{font-size:14px;color:var(--ink-3);margin-top:4px}
.pp{margin-top:22px;display:flex;align-items:baseline;gap:4px}
.pp b{font:500 46px/1 var(--f-d);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.pp span{color:var(--ink-3);font-size:15px}
.pn{font-size:13px;color:var(--g);margin:8px 0 20px;min-height:1.4em}
.plan ul{list-style:none;margin:22px 0 0;padding:20px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px;font-size:14px;color:var(--ink-2)}
.plan li{padding-left:24px;position:relative}
.plan li::before{content:"✓";position:absolute;left:0;color:var(--v);font-weight:700}
.plans-ag{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
.pa{display:flex;align-items:center;gap:20px;border:1px solid var(--line);border-radius:14px;padding:20px 24px;background:var(--mist)}
.pa>div{flex:1}
.pa h3{font-size:19px}
.pa .pp{margin:0}
.pa .pp b{font-size:30px}
.pay-note{margin-top:22px;font-size:13px;color:var(--ink-3);text-align:center}
.calc{margin-top:40px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.calc-in{padding:30px;display:flex;flex-direction:column;gap:16px}
.calc-in h3{font-size:24px}
.calc-sub{font-size:14.5px;color:var(--ink-3);margin-top:-6px}
.calc-row{display:flex;flex-direction:column;gap:8px}
.calc-row label,.calc-lb{font-size:14px;color:var(--ink-2);display:flex;justify-content:space-between;gap:10px}
.calc-row output{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.calc-row input[type=range]{width:100%;accent-color:var(--v)}
.calc-seg{display:flex;flex-wrap:wrap;gap:6px}
.calc-seg button{border:1px solid var(--line-2);background:#fff;border-radius:999px;padding:6px 13px;font-size:13px;color:var(--ink-2);transition:all .2s}
.calc-seg button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.calc-out{background:linear-gradient(165deg,#5B3CF0,#3521B5 60%,#221479);color:#fff;padding:30px;display:flex;flex-direction:column;gap:14px}
.calc-k{font:500 11px var(--f-m);letter-spacing:.08em;text-transform:uppercase;color:#D6CCFF}
.calc-plan{display:flex;align-items:baseline;gap:12px}
.calc-plan b{font:500 44px/1 var(--f-d);letter-spacing:-.03em}
.calc-plan span{font-size:16px;color:#D6CCFF}
.calc-why{font-size:14px;color:#E4DEFF}
.calc-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.calc-stats div{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:12px;display:flex;flex-direction:column}
.calc-stats b{font:500 24px var(--f-d);font-variant-numeric:tabular-nums}
.calc-stats span{font-size:12px;color:#D6CCFF}
.calc-out .btn{align-self:flex-start}
.calc-note{font-size:11.5px;color:#C7BEF0}

/* ---------- trust ---------- */
.trust{background:var(--mist);padding-block:100px}
.trust-h{font-size:clamp(28px,3vw,42px);letter-spacing:-.03em}
.trust-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:36px}
.ti{width:36px;height:36px;border-radius:10px;background:var(--tint-v);color:var(--v);display:grid;place-items:center;font-weight:700;margin-bottom:10px}
.feat-on{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.feat-on li{border:1px solid var(--line-2);background:#fff;border-radius:10px;padding:10px 14px;font-size:12.5px;color:var(--ink-3);display:flex;flex-direction:column;min-width:130px}
.feat-on b{font:500 15px var(--f-d);color:var(--ink)}

/* ---------- faq ---------- */
.faq{padding-block:110px}
.faq-in{display:grid;grid-template-columns:1fr 1.6fr;gap:56px}
.faq-l h2{font-size:clamp(32px,3.6vw,48px);line-height:1.1;letter-spacing:-.03em}
.faq-l p{margin-top:18px;color:var(--ink-3);font-size:15px}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 2px;font:400 17px/1.4 var(--f-b);color:var(--ink)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--ink-2);border-bottom:2px solid var(--ink-2);transform:rotate(45deg) translateY(-3px);transition:transform .3s;flex:none}
.faq-list details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.faq-list summary:hover{color:var(--v)}
.fa{overflow:hidden}
.fa p{padding:0 2px 20px;color:var(--ink-2);font-size:15.5px;max-width:64ch}

/* ---------- final CTA ---------- */
.final{background:linear-gradient(120deg,#EDE7FF,#F4F2FB 55%,#E8F4EF);padding-block:90px}
.final-in{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.final-in h2{font-size:clamp(34px,4vw,56px);letter-spacing:-.035em;line-height:1.08;max-width:760px}
.final-in p{font-size:14px;color:var(--ink-3)}

/* ---------- footer ---------- */
.foot{background:#fff;border-top:1px solid var(--line);padding-block:64px 36px;font-size:14px}
.foot-in{display:grid;grid-template-columns:1.4fr repeat(5,minmax(0,1fr));gap:28px}
.fb p{color:var(--ink-3);font-size:13px;margin-top:12px;max-width:320px}
.fcol{display:flex;flex-direction:column;gap:9px}
.fcol h4{font:600 12px var(--f-b);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin-bottom:6px}
.fcol .h4b{margin-top:16px}
.fcol a{color:var(--v)}
.fcol a:hover{text-decoration:underline}
.fcol span{color:var(--ink-3)}
.social,.foot-lang{display:flex;gap:14px;flex-wrap:wrap}
.foot-lang a[aria-current="true"]{font-weight:600}
.gplay{display:inline-flex;align-items:center;gap:10px;margin-top:16px;background:var(--ink);color:#fff;border-radius:10px;padding:8px 14px;font-weight:600;font-size:15px}
.gplay small{display:block;font-size:9px;font-weight:500;letter-spacing:.08em;opacity:.8}
.foot-b{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:48px;padding-top:22px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-3)}

/* ---------- ask panel ---------- */
.askfab{position:fixed;z-index:70;right:20px;bottom:calc(20px + var(--sab));display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:12px 16px;font:500 14px var(--f-b);box-shadow:0 18px 40px -14px rgba(20,10,60,.45);transition:transform .2s}
.askfab:hover{transform:translateY(-2px)}
.askfab span{color:var(--g);font-size:16px}
.askfab-t{font-weight:600}
.askp[hidden]{display:none}
.askp{position:fixed;z-index:71;right:20px;bottom:calc(78px + var(--sab));width:min(380px,calc(100vw - 32px));max-height:min(72vh,580px);background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 40px 80px -30px rgba(20,10,60,.5);display:flex;flex-direction:column;overflow:hidden}
.askp-h{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line)}
.askp-h button{border:0;background:var(--mist);width:30px;height:30px;border-radius:8px;font-size:18px;line-height:1}
.askp-body{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px;font-size:14px;min-height:80px}
.askp-body .q{align-self:flex-end;background:var(--v);color:#fff;border-radius:14px 14px 4px 14px;padding:9px 12px;max-width:85%}
.askp-body .a{align-self:flex-start;background:var(--mist);border-radius:14px 14px 14px 4px;padding:10px 12px;max-width:92%;color:var(--ink-2)}
.askp-body .a a{color:var(--v);font-weight:500;display:inline-block;margin-top:6px}
.askp-f{display:flex;gap:6px;padding:10px 16px;border-top:1px solid var(--line)}
.askp-f input{flex:1;min-width:0;border:1px solid var(--line-2);border-radius:8px;padding:8px 10px;font:400 14px var(--f-b)}
.askp-f input:focus{outline:2px solid var(--v);outline-offset:0}
.askp-f button{border:0;background:var(--v);color:#fff;border-radius:8px;width:38px;font-size:16px}
.askp-qs{display:flex;gap:6px;flex-wrap:wrap;padding:0 16px 14px;max-height:150px;overflow-y:auto}
.askp-qs button{border:1px solid var(--line-2);background:#fff;border-radius:999px;padding:5px 10px;font-size:12.5px;color:var(--ink-2);text-align:left}
.askp-qs button:hover{border-color:var(--v);color:var(--v)}
.mcta{display:none}

/* ---------- responsive ---------- */
@media (max-width:1440px){
  .mi-b,.mi-l{padding:0 7px;font-size:14px}
  .nav-in{gap:16px}
  .nav-ic{display:none}
}
@media (max-width:1180px){
  .tiles{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:14px}
  .tiles::-webkit-scrollbar{display:none}
  .tl{flex:0 0 40%;scroll-snap-align:start}
  .try-card{grid-template-columns:1fr 1fr}
  .try-copy{grid-column:1/-1}
  .ag-small{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sc{padding:28px}
}
/* The menu collapses into the burger at 1240px (was 1080) since API, MCP and Partners joined it on
   2026-10-01 — measured: below ~1245px the twelve items push the buttons off-screen. */
@media (max-width:1240px){
  .nav-burger{display:block}
  .nav-cta .btn-line{display:none}
  .menu{display:none;position:absolute;left:0;right:0;top:var(--navh);height:auto;max-height:calc(100vh - var(--navh) - 40px);overflow-y:auto;background:#fff;flex-direction:column;align-items:stretch;gap:0;padding:6px 24px 20px;border-bottom:1px solid var(--line);box-shadow:0 20px 30px -24px rgba(20,10,60,.4)}
  .menu.is-open{display:flex}
  .mi{height:auto;flex-direction:column;align-items:stretch;border-bottom:1px solid var(--line)}
  .mi-b,.mi-l{height:auto;padding:15px 0;font-size:16px;color:var(--ink);justify-content:space-between;width:100%}
  .mi-b::after,.mi-l::after{display:none}
  .mi-b::before{content:"";order:2;width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .25s}
  .mi.is-open .mi-b::before{transform:rotate(-135deg)}
  .mi-l{border-bottom:0}
  .dd,.dd-lg{position:static;transform:none!important;width:auto;opacity:1;visibility:visible;display:none;transition:none;padding:0 0 12px}
  .mi.is-open .dd{display:block}
  .dd-in{border:0;box-shadow:none;padding:0}
  .dd-lg>.dd-grid{grid-template-columns:1fr;border:0;box-shadow:none;padding:0;gap:0}
  .dd-foot{display:none}
  .dd-col .dd-h{margin-top:12px}
}
@media (max-width:1080px){
  .hs{grid-template-columns:1fr 1fr}
  .cards3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards3 .c3:last-child{grid-column:1/-1}
  .cards3 .c3:last-child .c3-m{aspect-ratio:16/9}
  .viral-row,.tpl-card,.ba-row,.store-in,.ag-row,.calc,.dev-try{grid-template-columns:1fr}
  .store-l{position:static}
  .dev-cols{grid-template-columns:1fr;gap:28px}
  .sale-card{grid-template-columns:1fr;justify-items:center}
  .sale-copy{max-width:none}
  .every-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plans{grid-template-columns:1fr;max-width:520px}
  .plans-ag{grid-template-columns:1fr}
  .trust-grid{grid-template-columns:1fr 1fr}
  .faq-in{grid-template-columns:1fr;gap:28px}
  .foot-in{grid-template-columns:1fr 1fr}
  .fb{grid-column:1/-1}
  .ind-box{width:min(56%,520px)}
}
@media (max-width:760px){
  :root{--navh:60px}
  .wrap{padding-inline:16px}
  .ann-s,.ann-coins,.ann-pill{display:none}
  .ann-in{gap:10px;font-size:13px;min-height:44px}
  .ann-t{font-size:15px}
  .lang-dd{display:none}
  .nav-cta{gap:8px}
  .hero{padding-top:12px}
  .hero-in{height:auto}
  .hs{position:relative;inset:auto;display:none;grid-template-columns:1fr;gap:10px;padding-inline:16px}
  .hs.is-on{display:grid}
  .hs-copy h1,.hs-copy .h1{font-size:36px}
  .hs-sub{font-size:14px;margin-top:12px}
  .hs-cta{margin-top:18px}
  .hs-art{height:380px}
  .hs-art>img{-webkit-mask-image:none;mask-image:none;border-radius:20px}
  .hs-tc{position:static;margin-top:6px}
  .badge-offer{padding:12px 24px 14px 22px;top:4%;left:0}
  .badge-offer b{font-size:48px}.badge-offer span{font-size:15px}
  .seal{width:92px;height:92px;bottom:6%;left:auto;right:6%}
  .seal em{font-size:13px}
  .float-dm{max-width:230px;font-size:13px}
  .fd2{display:none}
  .float-pay{width:250px;bottom:8%}
  .float-meter{width:210px;top:6%}
  .hs-arrow{display:none}
  .help{flex-direction:column;align-items:flex-start;gap:10px;padding:12px}
  .help-chips{width:100%}
  .logos{margin-top:28px}
  .logos-track span{font-size:24px}
  .bn-track{height:560px}
  .bn{grid-template-columns:1fr;gap:26px;padding:30px 20px 50px;align-content:start}
  .bn-chip{display:none}
  .bn-phone{width:170px}
  .try{margin-top:48px}
  .try-card{grid-template-columns:1fr;padding:20px;gap:20px}
  .try-phone{height:420px}
  section.stack{padding-top:80px}
  .stack-links{gap:12px 16px;font-size:14px}
  .stack-links span{border:0;padding:0;width:100%}
  .sb-in .btn{display:none}
  .sc{padding:20px 16px 22px;margin-bottom:18px}
  .tl{flex-basis:78%}
  .tl-m{aspect-ratio:4/3}
  .tiles{gap:14px}
  .tl h4{font-size:16px}
  .tl p{font-size:13px}
  .tl-m{padding:10px}
  .tl-cta{opacity:1;transform:none;flex-wrap:wrap;gap:8px}
  .ind,.sale,.langs,.viral,.inno,.wn,.tpl,.store,.agency,.every,.grow,.pricing,.faq,.trust{padding-block:72px}
  .ind-card{height:auto;display:flex;flex-direction:column}
  .ind-pics{position:relative;height:300px}
  .ind-pics img{width:100%}
  .ind-box{position:relative;left:auto;top:auto;bottom:auto;width:auto;margin:-40px 12px 12px;padding:22px}
  .sale-card{padding:28px 18px}
  .phone{width:260px;height:480px}
  .globe{width:200px;height:200px;right:0;top:-10px;opacity:.5}
  .cards3{grid-template-columns:minmax(0,1fr)}
  .cards3 .c3:last-child .c3-m,.c3-m{aspect-ratio:auto;min-height:380px}
  .lane{grid-template-columns:1fr}
  .ln{min-height:0}
  .vstats b{font-size:26px}
  .ic2,.ic2.wide{flex-basis:86%;min-height:380px;padding:24px}
  .wc{flex-basis:84%}
  .gp{flex-basis:70%;height:340px}
  .gp.low{margin-top:40px}
  .grow-head p{text-align:left}
  .steps-row{grid-template-columns:1fr}
  .tpl-card{padding:20px}
  .tpl-phone{width:100%;max-width:280px}
  .wf{flex-direction:column;gap:14px}
  .wf-l{width:2px;height:28px;flex:none;min-width:0;margin:0;background:linear-gradient(180deg,var(--v) 0 50%,var(--line) 50%);background-size:100% 200%}
  .wf-stats{grid-template-columns:1fr 1fr}
  .store-grid,.every-grid,.ag-small,.trust-grid{grid-template-columns:1fr}
  .ag-cmp .btn{margin-left:0}
  .pr-head{grid-template-columns:1fr}
  .bill{grid-column:1;grid-row:auto;justify-self:start}
  .pa{flex-wrap:wrap}
  .calc-in,.calc-out{padding:20px}
  .feat-on li{min-width:0;flex:1 1 40%}
  .askfab{bottom:calc(76px + var(--sab));right:14px;width:46px;height:46px;padding:0;justify-content:center;border-radius:50%;opacity:0;pointer-events:none;transition:opacity .3s}
  .askfab-t{display:none}
  body.past-hero .askfab{opacity:1;pointer-events:auto}
  .askp{right:16px;bottom:calc(132px + var(--sab))}
  .mcta{display:flex;position:fixed;z-index:65;left:0;right:0;bottom:0;align-items:center;justify-content:space-between;gap:12px;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:10px 16px calc(10px + var(--sab));font-size:13px;color:var(--ink-2);transform:translateY(110%);transition:transform .35s}
  .mcta.is-on{transform:none}
  .foot{padding-bottom:96px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ===================== v4.1: phone layout tuned against razorpay.com's mobile page ===================== */
.sc-n{font:500 12px/1 var(--f-m);letter-spacing:.06em;color:var(--v);margin-bottom:8px}
.menu-cta{display:none}
@media (max-width:1240px){
  .menu-cta{display:flex;flex-direction:column;gap:10px;padding-top:18px}
  .menu-cta .btn{width:100%;height:48px}
  .mi-b{justify-content:flex-start}
  .mi-b::before{margin-left:auto}
  .mi-b em{margin-left:4px}
}
@media (max-width:760px){
  /* rhythm: tighter sections, smaller heads (Razorpay's phone page uses 26-36px heads, 12-16px text) */
  .ind,.sale,.langs,.viral,.inno,.wn,.tpl,.store,.agency,.every,.grow,.pricing,.faq,.trust,.dev-in{padding-block:52px}
  .ba{padding-block:12px 52px}
  .final{padding-block:56px}
  section.stack{padding-top:56px}
  .stack-h,.ind-head h2,.sale-h,.langs h2,.viral h2,.tpl-h,.store-l h2,.ag-h,.every-h,.ba-h,.grow-head h2,.pr-head h2,.final-in h2,.dev-in h2{font-size:30px;line-height:1.14;letter-spacing:-.03em}
  .inno-head h2,.wn-head h2,.trust-h,.faq-l h2{font-size:26px;line-height:1.15}
  .sub,.store-l>p,.ag-sub,.every-sub,.pr-head p{font-size:15px;margin-top:10px}
  .lbl{font-size:11px}
  /* nav like Razorpay's phone bar: logo, Sign in, menu; the start button lives in the bottom bar */
  .nav-cta .btn-pri{display:none}
  .nav-cta .btn-line{display:inline-flex;height:36px;padding:0 14px;font-size:14px}
  .nav-burger{width:38px;height:38px}
  .nav-burger i{left:10px;right:10px}.nav-burger i:first-child{top:14px}.nav-burger i:last-child{top:21px}
  .menu{max-height:calc(100vh - var(--navh) - 20px);padding-bottom:28px}
  .ann-in{min-height:40px;padding-block:4px}
  .ann-t{font-size:14px}
  .ann-btn{padding:5px 9px;font-size:12px}
  /* hero */
  .hs-copy h1,.hs-copy .h1{font-size:34px;line-height:1.1}
  .hs-sub{font-size:13.5px}
  .hs-cta .btn-lg{height:48px;font-size:16px;padding:0 20px}
  .hs-art{height:340px;margin-top:4px}
  .hs-tc{font-size:11px}
  .help{margin-top:16px}
  .help-l{font-size:13px}
  .logos{margin-top:22px}
  .logos-track{gap:44px}
  .logos-track span{font-size:21px}
  /* banner */
  .banner{margin-top:32px}
  .bn-track{height:520px}
  .bn-copy h2{font-size:24px}
  .bn-copy p{font-size:14px}
  .bn-phone{width:150px}
  .bn-term{font-size:11.5px;padding:14px}
  /* try it: shorter post and phone */
  .try{margin-top:36px}
  .try-card{padding:18px;gap:16px;border-radius:14px}
  .try-copy h2{font-size:26px}
  .try-copy>p{font-size:14px}
  .try-post>img{height:130px}
  .tp-comments{min-height:0;padding-bottom:10px}
  .try-phone{height:360px;border-width:6px;border-radius:28px}
  /* product stack: every tile visible in a 2-column grid, as on Razorpay's phone page; the cards still stack */
  .stack-links{display:none}
  .sc{padding:18px 14px 20px;margin-bottom:16px;border-radius:12px}
  .sc>h3{font-size:22px;margin-bottom:14px}
  .sc-tabs{gap:18px;margin:-4px 0 14px}
  .sc-tabs button{font-size:14px;padding:8px 0 10px}
  .tiles{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;overflow:visible}
  .sc-pane:not(.is-on){display:none!important}
  .tl{flex:none}
  .tiles-next{display:none!important}
  .tl-m{aspect-ratio:1/1;padding:8px;gap:5px;border-radius:8px}
  .tl-m .ui-card,.tl-m .ui-receipt,.tl-m .ui-thread,.tl-m .ui-list,.tl-m .ui-field,.tl-m .ui-next,.tl-m .ui-draw,.tl-m .ui-pause,.tl-m .ui-form,.tl-m .ui-snap,.tl-m .ui-clients,.tl-m .ui-ab,.tl-m .ui-url,.tl-m .ui-term{zoom:.72}
  .tl-m .ui-bub,.tl-m .ui-chip,.tl-m .ui-keys,.tl-m .ui-tags,.tl-m .ui-docs,.tl-m .ui-agents,.tl-m .ui-flow,.tl-m .ui-kanban,.tl-m .ui-rewind,.tl-m .ui-meter,.tl-m .ui-voice,.tl-m .ui-code,.tl-m .ui-nodes,.tl-m .ui-coupon{zoom:.78}
  .tl-m .ui-circle{zoom:.7}
  .tl-m .ui-story{max-height:62%}
  .tl h4{font-size:14.5px;margin:10px 0 3px;line-height:1.25}
  .tl p{font-size:12px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .tl-cta{margin-top:8px;gap:10px}
  .tl-cta .btn-xs{height:auto;padding:0;background:none;color:var(--v);font-size:12.5px;font-weight:600}
  .tl-cta .tl-more{display:none}
  /* sideways carousels instead of long stacks */
  .cards3,.trust-grid,.plans{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:12px;margin-inline:-16px;padding:4px 16px 8px;scroll-padding-inline:16px}
  .cards3::-webkit-scrollbar,.trust-grid::-webkit-scrollbar,.plans::-webkit-scrollbar{display:none}
  .cards3>.c3,.trust-grid>article{flex:0 0 84%;scroll-snap-align:start}
  .plans>.plan{flex:0 0 86%;scroll-snap-align:start}
  .plans{max-width:none;margin-top:28px;padding-top:18px}
  .cards3 .c3-m,.cards3 .c3:last-child .c3-m{aspect-ratio:auto;min-height:340px}
  .c3 h3{font-size:17px;margin-top:12px}
  .c3 p{font-size:13.5px}
  .globe{width:150px;height:150px;top:-18px;opacity:.45}
  /* compact 2-column grids */
  .store-grid,.every-grid,.ag-small{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .store-grid article,.every-grid article,.ag-small article,.trust-grid article{padding:14px;gap:4px}
  .store-grid span{font-size:18px;margin-bottom:2px}
  .every-grid span{width:32px;height:32px;font-size:16px;margin-bottom:4px}
  .store-grid h3,.every-grid h3,.ag-small h3,.trust-grid h3{font-size:14.5px;line-height:1.25}
  .store-grid p,.every-grid p,.ag-small p,.trust-grid p{font-size:12px;line-height:1.45}
  .store-in{gap:22px}
  .bio{max-width:none}
  .ag-row{gap:12px;margin-top:22px}
  .ag-m{height:170px}
  .ag-big h3{font-size:17px}
  .ag-big p{font-size:13.5px}
  .ag-cmp{padding:14px;gap:10px}
  .every-more{font-size:13px}
  /* sale */
  .sale-tabs button{padding:6px 12px 6px 6px;font-size:13px}
  .sale-card{padding:24px 16px;gap:22px;border-radius:14px}
  .ss h3{font-size:22px}
  .ss p{font-size:14.5px}
  .phone{width:240px;height:420px;border-width:6px;border-radius:30px}
  /* industries */
  .ind-icons{display:none}
  .ind-tabs{margin-top:20px;gap:20px}
  .ind-pics{height:250px}
  .ind-box{margin:-36px 10px 10px;padding:18px;gap:12px}
  .ind-txt h3{font-size:22px}
  .ind-txt p{font-size:14px;margin-top:8px}
  /* viral: the lane stays three columns */
  .viral-row{gap:12px;margin-top:24px}
  .viral-card{padding:16px;gap:16px}
  .lane{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .ln{min-height:118px;padding:10px;gap:8px}
  .ln small{font-size:10.5px}
  .ln b{font-size:14px}
  .dots i{width:7px;height:7px}
  .vstats b{font-size:24px}
  .vstats span{font-size:11.5px}
  .ring-card{min-height:280px}
  .ring-card p{font-size:12.5px}
  .rtag{font-size:9px}
  /* innovations + what's new */
  .inno-head{align-items:center}
  .inno-track,.wn-track{margin-top:22px}
  .ic2,.ic2.wide{min-height:330px;padding:22px;gap:12px}
  .ic2 h3{font-size:23px}
  .ic2-f{font-size:13.5px}
  .wc{padding:18px}
  .wc h3{font-size:17px}
  .wc p{font-size:13.5px}
  /* developers */
  .dev-mq{padding:9px 0}
  .dev-track{font-size:12px;gap:30px}
  .dev-track span::after{margin-left:30px}
  .dev-cols{margin-top:30px;gap:22px}
  .dev-cols p{font-size:13.5px}
  .dev-try{margin-top:36px;gap:18px}
  .dev-t{font-size:24px}
  .code-body{font-size:12px;min-height:0;padding:14px 0}
  .code-body .l::before{width:32px;padding-right:10px}
  .df-chips{margin-top:24px}
  /* templates: steps as one compact row */
  .tpl-h{font-size:28px}
  .steps-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:22px}
  .steps-row>div{padding:12px 10px;gap:6px}
  .steps-row h3{font-size:13.5px;line-height:1.25}
  .steps-row p{display:none}
  .steps-row b{width:24px;height:24px;font-size:13px}
  .tpl-tabs{margin-top:22px}
  .tpl-card{gap:20px;padding:18px}
  .tpl-txt>p{font-size:19px}
  .tpl-phone{height:380px;max-width:250px}
  /* before / after + workflow */
  .ba-row{gap:12px;margin-top:22px}
  .ba-c{padding:18px;gap:8px}
  .ba-c h3{font-size:20px}
  .ba-c ul{font-size:13.5px;gap:8px}
  .wf{flex-direction:row;flex-wrap:wrap;padding:16px 10px;gap:0}
  .wf-n{min-width:0;gap:4px}
  .wf-n span{width:42px;height:42px;font-size:19px;border-radius:12px}
  .wf-n b{font-size:13px}
  .wf-n small{font-size:10.5px;line-height:1.3}
  .wf-l{width:auto;height:2px;flex:.4;min-width:14px;margin:0 0 40px;background:linear-gradient(90deg,var(--v) 0 50%,var(--line) 50%);background-size:200% 100%}
  .wf-stats{grid-template-columns:repeat(4,1fr);gap:6px;margin-top:14px;padding-top:12px;font-size:10.5px}
  .wf-stats b{font-size:17px}
  /* grow photos */
  .grow-head p{display:none}
  .grow-track{margin-top:24px;padding-bottom:44px}
  .gp{flex-basis:62%;height:300px}
  .gp.low{margin-top:36px}
  /* pricing */
  .plan{padding:22px}
  .pp b{font-size:40px}
  .plan ul{font-size:13.5px;gap:8px;margin-top:16px;padding-top:16px}
  .plans-ag{gap:10px}
  .pa{padding:16px;gap:12px}
  .calc{margin-top:28px}
  .calc-plan b{font-size:36px}
  .calc-stats b{font-size:20px}
  /* trust + faq */
  .trust-grid{margin-top:22px}
  .feat-on{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:18px}
  .feat-on li{min-width:0;padding:8px 10px;font-size:11px}
  .feat-on b{font-size:13px}
  .faq-in{gap:18px}
  .faq-list summary{font-size:15.5px;padding:15px 2px}
  .fa p{font-size:14.5px}
  /* footer */
  .foot{padding-block:40px 110px}
  .foot-in{gap:26px 18px}
  .fcol{gap:7px;font-size:13.5px}
  /* phone CTA bar: one full-width button, always there */
  .mcta{padding:10px 12px calc(10px + var(--sab));background:#fff}
  .mcta .btn{width:100%;height:48px;font-size:16px}
  .askfab{bottom:calc(80px + var(--sab))}
  .askp{bottom:calc(136px + var(--sab))}
}

/* v4.2: gaps, small type and swipe dots */
.grow{padding-bottom:48px}
.grow-track{padding-bottom:40px}
.swipe-dots{display:none;justify-content:center;gap:6px;margin-top:12px}
.swipe-dots i{width:6px;height:6px;border-radius:50%;background:var(--line-2);transition:width .3s,background .3s}
.swipe-dots i.on{width:18px;border-radius:3px;background:var(--v)}
@media (max-width:760px){
  .swipe-dots.is-on{display:flex}
  .pa{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px 12px}
  .pa>div{grid-column:1/-1}
  .pa .pd{font-size:13px}
  .wf-n small{font-size:11px}
  .ln small{font-size:11px}
  .rtag{font-size:9.5px}
  .feat-on li{font-size:11.5px}
  .tl p{font-size:12.5px}
  .hs-tc{font-size:11.5px}
  .grow{padding-bottom:36px}
  .pricing{padding-top:40px}
}

@media (max-width:760px){
  .every-grid article:last-child:nth-child(odd){grid-column:1/-1}
  .every-more{margin-top:20px}
}

/* v4.3: phone hero like Razorpay's: one 16px gutter (no double padding) and an edge-to-edge picture */
@media (max-width:760px){
  .hs{padding-inline:0}
  .hs-art{margin-inline:-16px;height:360px}
  .hs-art>img{border-radius:0;object-position:70% 18%}
  .badge-offer{left:16px}
  .fd1{left:16px}
  .float-pay{left:16px}
  .float-meter{left:16px}
  .float-ok{right:16px}
  .hs-tc{padding-top:4px}
}

/* ===== v5 tiles: each tile is a card like razorpay.com's: an HD photo with the product UI laid over it,
   or a large product panel anchored bottom-right, then a white body. Reveals move position only. ===== */
.tiles{gap:16px}
.tl{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s}
.tl:hover{transform:translateY(-4px);box-shadow:0 30px 50px -32px rgba(40,22,120,.5);border-color:var(--line-2)}
.tl-m{display:block;aspect-ratio:1/.86;border-radius:0;padding:0;gap:0;isolation:isolate}
.tl:hover .tl-m{transform:none}
.tl-ph{z-index:0;transition:transform 1.4s var(--ease)}
.tl:hover .tl-ph{transform:scale(1.07)}
.tl-m:has(.tl-ph)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:58%;background:linear-gradient(to top,rgba(23,19,46,.34),rgba(23,19,46,0));z-index:1;pointer-events:none}
.tl-tag{position:absolute;z-index:3;left:12px;top:12px;background:rgba(255,255,255,.95);color:var(--ink);font:600 10px/1 var(--f-m);letter-spacing:.09em;text-transform:uppercase;padding:6px 8px;border-radius:5px;box-shadow:0 4px 12px -6px rgba(20,10,60,.35)}
.tl h4{padding-inline:18px;margin:16px 0 6px;font-size:18px;line-height:1.25}
.tl p{padding-inline:18px;font-size:13.5px}
.tl-cta{padding:14px 18px 18px;margin-top:auto;opacity:1;transform:none}

/* photo overlays */
.ov{position:absolute;z-index:2;display:flex;flex-direction:column;gap:8px}
.ov-b{left:12px;right:12px;bottom:12px;align-items:flex-start}
.ov .ui-chip{align-self:flex-end}
.ov .ui-bub{max-width:92%}
.ov .ui-bub.b-out{align-self:flex-end}
.ov .ui-card,.ov .ui-receipt,.ov .ui-field,.ov .ui-url,.ov .ui-draw,.ov .ui-clients{width:100%}
.ov .ui-keys{justify-content:flex-start}
.scanline{position:absolute;z-index:1;left:0;right:0;top:8%;height:2px;background:var(--v-l);box-shadow:0 0 16px 4px rgba(124,78,255,.55);animation:scan 3.2s ease-in-out infinite}

/* product panels: a white app window tucked into the bottom-right corner */
.panel{position:absolute;z-index:1;left:12%;top:15%;right:0;bottom:0;background:#fff;border-radius:12px 0 0 0;box-shadow:-14px -14px 34px -22px rgba(40,22,120,.45);padding:32px 16px 14px;display:flex;flex-direction:column;align-items:stretch;gap:8px;overflow:hidden;transition:transform .9s var(--ease)}
.panel::before{content:"";position:absolute;left:14px;top:13px;width:34px;height:8px;background:radial-gradient(circle at 4px 4px,#DCD5EE 3.2px,transparent 3.7px),radial-gradient(circle at 17px 4px,#DCD5EE 3.2px,transparent 3.7px),radial-gradient(circle at 30px 4px,#DCD5EE 3.2px,transparent 3.7px)}
.tl:hover .panel{transform:translate(-6px,-6px)}
.panel.center{left:0;top:0;background:none;box-shadow:none;border-radius:0;padding:44px 18px 18px;align-items:center;justify-content:center}
.panel.center::before{display:none}
.tl:hover .panel.center{transform:scale(1.03)}
.panel.dark{background:var(--night)}
.panel.dark::before{opacity:.35}
.panel .ui-thread,.panel .ui-list,.panel .ui-next,.panel .ui-kanban,.panel .ui-pause,.panel .ui-form,.panel .ui-snap,.panel .ui-term,.panel .ui-ab{box-shadow:none;background:none;padding:0;width:100%;border-radius:0}
.panel .ui-chip:not(.ok),.panel .ui-docs span,.panel .ui-bub.b-in{background:var(--mist);box-shadow:none}
.panel .ui-receipt{box-shadow:none;border:1px solid var(--line)}
.panel .ui-kanban div{background:var(--mist)}
.panel .ui-rewind span{background:var(--mist)}
.panel .ui-rewind .now{background:var(--v)}

.ui-thread.big{font-size:13px;gap:9px}
.ui-toggle{font-style:normal;display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--g);margin-top:8px}
.ui-toggle>i{width:30px;height:18px;border-radius:9px;background:var(--g);position:relative}
.ui-toggle>i::after{content:"";position:absolute;right:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff}
.ui-next.big{gap:6px}
.ui-next.big b{font-size:16px}
.ui-shot{display:flex;flex-direction:column;gap:10px;font-size:12.5px}
.ui-shot>span{font-size:10.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.07em}
.ui-shot p{font:500 11.5px var(--f-m);color:var(--g)}
.ui-list.big li{font-size:13px;padding:7px 2px}
.ui-brain{display:flex;flex-direction:column;gap:8px;align-items:flex-start;font-size:12.5px}
.ui-brain small{font:500 10.5px var(--f-m);color:var(--ink-3)}
.ui-brain .ui-docs{justify-content:flex-start}
.ui-rw .rw-h{font-size:10.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.07em;margin-bottom:8px}
.rw-n{display:flex;align-items:baseline;gap:8px;margin:14px 0 10px}
.rw-n b{font:600 32px/1 var(--f-d);letter-spacing:-.02em}
.rw-n small{font-size:12px;color:var(--ink-3)}
.ui-seg{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;width:100%}
.ui-seg li{display:flex;align-items:center;gap:10px;font-size:13px;padding:7px 2px;border-bottom:1px solid #F0EDF7}
.ui-seg i{width:9px;height:9px;border-radius:50%;background:var(--c);flex:none}
.ui-seg b{margin-left:auto;font:600 13px var(--f-m)}
.panel .ui-seg+.ui-chip{align-self:flex-start;margin-top:4px}
.panel .ex{font-size:10px;color:var(--ink-3);align-self:flex-end;margin-top:auto}
.ui-kanban.big{width:100%}
.ui-kanban.big div{min-height:118px}
.ui-kanban i.mv{background:var(--v);animation:nudge 2.6s ease-in-out infinite}
@keyframes nudge{0%,55%,100%{transform:none}70%{transform:translateX(10px)}}
.panel .ui-kanban+.ui-chip{align-self:flex-start;margin-top:6px}
.ui-meter.big b{font-size:60px}
.ui-meter.big{width:88%}
.ui-spark.big{width:100%}
.spark-k{display:flex;gap:14px;font-size:11px;color:var(--ink-3);margin-top:10px}
.spark-k i{display:inline-block;width:14px;height:3px;border-radius:2px;margin-right:6px;vertical-align:middle}
.spark-k .k1{background:#F0A6A0}.spark-k .k2{background:var(--g)}
.ui-pause.big{gap:6px}
.ui-pause.big b{font-size:15px}
.pz{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 4px}
.pz span{background:var(--mist);border-radius:6px;padding:4px 8px}
.ui-pause .ui-chip{align-self:flex-start}
.ui-flow.big{gap:0}
.ui-flow.big .fn{font-size:13px;padding:8px 12px}
.ui-flow .fl{width:2px;height:20px;background:var(--v-l)}
.ui-flow.big .fb{gap:8px;margin-top:20px;position:relative}
.ui-flow.big .fb::before{content:"";position:absolute;left:18%;right:18%;top:-10px;height:10px;border:2px solid var(--v-l);border-bottom:0;border-radius:8px 8px 0 0}
.ui-form.big{gap:8px;font-size:13px}
.ui-form .fh{display:block;font-weight:600;border:0;padding:0 0 2px;color:var(--ink)}
.ui-snap.big li{font-size:13px;padding:10px 2px;justify-content:flex-start;gap:10px;align-items:center}
.ui-snap.big small{margin-left:auto;color:var(--ink-3);font-size:11px}
.ui-term.big{font-size:12.5px;line-height:1.6}
.panel.dark .ui-term{color:var(--on-night)}
.ui-agents.big{gap:8px;max-width:300px}
.ui-agents.big span{font-size:13px;padding:7px 12px;box-shadow:0 6px 14px -10px rgba(20,10,60,.4)}
.ui-agents.big b{font-size:13px;padding:9px 20px}
.ui-ab.big{font-size:12.5px}
.ui-ab .fh{grid-column:1/-1;font-weight:600;font-size:13px}
.ui-ab.big b{grid-column:1/-1;color:var(--g);font-size:12px;margin-top:4px}
.ui-circle.big{zoom:1.35}
.ui-coupon.big{padding:20px 30px;box-shadow:0 14px 30px -18px rgba(20,10,60,.4)}
.ui-coupon.big b{font-size:28px}
.panel.center .ui-coupon+.ui-chip{margin-top:12px}

/* in-view motion: JS marks tiles that start below the fold with .pre, and drops it when they scroll in */
.tl .ov1,.tl .ov2,.tl .ov3,.tl .ov4,.tl .ov5{transition:transform .8s var(--ease)}
.tl .ov2{transition-delay:.14s}.tl .ov3{transition-delay:.28s}.tl .ov4{transition-delay:.42s}.tl .ov5{transition-delay:.56s}
.tl.pre .ov1,.tl.pre .ov2,.tl.pre .ov3,.tl.pre .ov4,.tl.pre .ov5{transform:translateY(22px) scale(.94)}
.tl.pre .panel{transform:translate(28px,28px)}
.tl.pre .panel.center{transform:scale(.94)}
.tl.pre .tl-ph{transform:scale(1.1)}
@media (prefers-reduced-motion:reduce){
  .tl.pre .ov1,.tl.pre .ov2,.tl.pre .ov3,.tl.pre .ov4,.tl.pre .ov5,.tl.pre .panel,.tl.pre .tl-ph{transform:none}
  .tl:hover,.tl:hover .tl-ph,.tl:hover .panel{transform:none}
}

@media (max-width:760px){
  .tiles{gap:10px}
  .tl{border-radius:12px}
  .tl:hover{transform:none}
  .tl-m{aspect-ratio:1/1;padding:0;border-radius:0}
  .tl-tag{left:8px;top:8px;font-size:8.5px;padding:4px 6px}
  .tl-m [class*="ui-"]{zoom:1}
  .ov-b{left:8px;right:8px;bottom:8px;gap:5px}
  .tl-m .ov>*{zoom:.7}
  .panel{left:9%;top:21%;padding:22px 10px 10px;gap:6px}
  .panel::before{left:10px;top:9px;transform:scale(.8);transform-origin:0 0}
  .tl-m .panel>*{zoom:.64}
  .panel.center{padding:30px 8px 8px}
  .tl-m .panel.center>*{zoom:.7}
  .tl-m .panel>.ui-circle{zoom:.95}
  .tl-m .panel>.ui-meter{zoom:.62}
  .tl h4,.tl p{padding-inline:12px}
  .tl h4{font-size:14.5px;margin:10px 0 3px}
  .tl p{font-size:12px}
  .tl-cta{padding:8px 12px 14px}
}
.panel:not(.center)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:30px;background:linear-gradient(rgba(255,255,255,0),#fff);pointer-events:none}
.panel.dark::after{background:linear-gradient(rgba(20,17,46,0),var(--night))}
.ui-kanban.big{grid-template-columns:repeat(3,minmax(0,1fr))}
.ui-circle.big em{top:auto;bottom:-30px;transform:translateX(-50%);background:#fff;padding:3px 9px;border-radius:999px;box-shadow:0 6px 14px -10px rgba(20,10,60,.45)}
.ui-snap.big small{white-space:nowrap}
.ui-term.big{font-size:12px}
.ui-seg li{padding:6px 2px}

/* v5: the storefront card floats on an HD photo; grow photos in full colour */
.store-ph{position:relative;margin-top:14px;border-radius:20px;overflow:hidden;aspect-ratio:1/1;max-height:calc(100vh - var(--navh) - 330px);min-height:360px}
.store-ph>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 40%;transition:transform 1.4s var(--ease)}
.store-ph:hover>img{transform:scale(1.04)}
.store-ph .bio{position:absolute;left:16px;bottom:16px;margin:0;width:min(290px,62%);padding:14px;gap:9px;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);animation:float 8s ease-in-out infinite}
.gp img{filter:none}
.gp:hover img{transform:scale(1.05)}
@media (max-width:1080px){.store-ph{max-height:none;aspect-ratio:4/4.2}}
@media (max-width:760px){
  .store-ph{aspect-ratio:4/5;border-radius:16px}
  .store-ph>img{object-position:72% 30%}
  .store-ph .bio{left:10px;bottom:10px;width:68%;padding:10px;gap:7px;border-radius:16px;zoom:.9}
}
@media (prefers-reduced-motion:reduce){.store-ph .bio{animation:none}}

/* v5: final band carries a full-colour photo on the right, the pitch stays on the left */
.final{position:relative;overflow:hidden;min-height:540px;display:flex;align-items:center}
.final-in{position:relative;z-index:2;width:100%}
.final-in h2{max-width:520px}
.final-art{position:absolute;right:0;top:0;bottom:0;width:64%;z-index:1}
.final-art img{width:100%;height:100%;object-fit:cover;object-position:78% 30%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);mask-image:linear-gradient(90deg,transparent 0,#000 30%)}
.final-art .ui-chip{position:absolute;font-size:13px;padding:8px 14px;animation:float 7s ease-in-out infinite}
.final-art .fc1{left:30%;top:22%}
.final-art .fc2{right:2%;bottom:24%;animation-delay:-2s}
.final-art .fc3{left:38%;bottom:12%;animation-delay:-4s}
@media (max-width:1080px){.final-art{width:70%;opacity:.95}.final-in h2{max-width:420px}}
@media (max-width:760px){
  .final{flex-direction:column;align-items:stretch;min-height:0;padding-block:0 48px}
  .final-art{position:relative;width:100%;height:300px}
  .final-art img{object-position:70% 30%;-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);mask-image:linear-gradient(180deg,#000 72%,transparent)}
  .final-art .ui-chip{font-size:11px;padding:6px 10px}
  .final-art .fc1{left:16px;top:16px}
  .final-art .fc2{right:16px;top:auto;bottom:70px}
  .final-art .fc3{display:none}
  .final-in{margin-top:-8px}
}
@media (prefers-reduced-motion:reduce){.final-art .ui-chip{animation:none}}

/* v6 hero, per the owner's side-by-side with razorpay.com: the picture melts into the white page (no card edge),
   the arrows sit outside the copy, and the copy column carries a lead line and a Google button like theirs. */
.hs-lead{margin-top:14px;font-size:18px;line-height:1.5;color:var(--ink-2);max-width:520px}
.btn-g{display:inline-flex;align-items:center;gap:10px;margin-top:14px;height:44px;padding:0 18px;border:1px solid var(--line-2);border-radius:6px;background:#fff;font:500 15px/1 var(--f-b);color:var(--ink);transition:border-color .2s,box-shadow .2s}
.btn-g:hover{border-color:var(--ink-3);box-shadow:0 6px 16px -10px rgba(20,10,60,.4)}
.btn-g svg{width:18px;height:18px}
.hs-cta{margin-top:24px}
.hs.is-on .hs-copy>*:nth-child(4){animation-delay:.21s}.hs.is-on .hs-copy>*:nth-child(5){animation-delay:.28s}
.hs-art>img{border-radius:0;-webkit-mask-image:radial-gradient(ellipse 70% 78% at 60% 48%,#000 58%,transparent 100%);mask-image:radial-gradient(ellipse 70% 78% at 60% 48%,#000 58%,transparent 100%)}
@media (min-width:1081px){
  .hs{inset:0 64px}
  .hs-arrow.prev{left:14px}.hs-arrow.next{right:14px}
  .hs-arrow{width:40px;height:40px;box-shadow:0 8px 20px -12px rgba(20,10,60,.35)}
}

/* Meta trust strip (text lockup + our own laurel art, no Meta logo) */
.meta-strip{background:#fff;border-block:1px solid var(--line);padding-block:30px;margin-top:18px}
.ms-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:center}
.ms-lock{display:flex;align-items:center;gap:22px}
.ms-word{flex:none;display:flex;flex-direction:column;align-items:center}
.ms-word b{font:700 50px/1 var(--f-d);letter-spacing:-.03em;color:var(--ink)}
.ms-word span{font-size:16px;font-weight:600;color:var(--ink);margin-top:4px}
.ms-lock p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-2);max-width:330px}
.ms-lock p b{color:var(--ink);font-weight:600}
.ms-award{display:flex;align-items:center;gap:16px}
.ms-wreath{flex:none;position:relative;width:84px;height:68px;color:var(--ink)}
.ms-laurel{width:100%;height:100%}
.ms-tick{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;background:#0866FF;color:#fff;font-weight:800;font-size:15px;display:grid;place-items:center}
.ms-award small{display:block;font-size:14px;font-weight:600;color:var(--ink-3);margin-bottom:3px}
.ms-award b{display:block;font:600 18px/1.3 var(--f-d);color:var(--ink)}
.ms-sub{display:block;font-size:12.5px;color:var(--ink-3);margin-top:3px}
@media (max-width:1080px){.ms-row{grid-template-columns:minmax(0,1fr);gap:20px}.ms-word b{font-size:42px}.ms-award b{font-size:16px}}
@media (max-width:760px){
  .hs-lead{font-size:15.5px;margin-top:10px}
  .btn-g{margin-top:10px;width:100%;justify-content:center}
  .hs-art>img{-webkit-mask-image:linear-gradient(180deg,#000 78%,transparent);mask-image:linear-gradient(180deg,#000 78%,transparent)}
  .meta-strip{padding-block:22px;margin-top:10px}
  .ms-lock{gap:14px}
  .ms-word b{font-size:34px}
  .ms-word span{font-size:13px}
  .ms-lock p{font-size:13.5px}
  .ms-wreath{width:64px;height:52px}
  .ms-tick{width:24px;height:24px;font-size:12px}
}
.hs:nth-child(1) .hs-art>img{object-position:100% 30%}
.hs:nth-child(3) .hs-art>img{object-position:92% 30%}

/* v6: industries card — the text box used to cover most of the photo (owner: "image pura nhi"). The photo now owns
   the right 60% and the box overlaps it by only a strip, so the person in every tab is fully visible. */
.ind-pics img{object-position:50% 18%}
@media (min-width:1081px){
  .ind-card{height:500px}
  .ind-pics img{width:60%}
  .ind-box{left:32px;top:32px;bottom:32px;width:calc(40% + 20px)}
}
@media (max-width:1080px) and (min-width:761px){.ind-pics{height:440px}}

/* optimize.py writes width/height on every <img> (no layout shift while loading). Zero-specificity defaults keep the
   intrinsic size from winning anywhere a rule does not set one; every class rule still overrides these. */
:where(img){max-width:100%;height:auto}

/* v6: tighter rhythm between sections (owner: "gep jyda hai bhut sari jgh par"). Razorpay's desktop sections sit
   ~64-80px apart; ours were 100-110px, which read as empty bands at laptop widths. */
.ind,.langs,.store,.agency,.every,.pricing,.faq{padding-block:76px}
.sale,.viral,.inno,.wn,.tpl,.trust{padding-block:72px}
.dev-in{padding-block:72px}
.grow{padding-block:76px 64px}
.final{padding-block:64px}
@media (max-width:1080px){.ind,.sale,.langs,.viral,.inno,.wn,.tpl,.store,.agency,.every,.grow,.pricing,.faq,.trust{padding-block:56px}.dev-in{padding-block:56px}}

/* v6 hero: the picture runs to the page's right edge (the owner saw it end in a hard vertical line before the arrow)
   and fades softly into the white at its left, top and bottom, like razorpay.com's hero. */
.hs-art>img{border-radius:0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 20%),linear-gradient(180deg,transparent 0,#000 9%,#000 86%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 20%),linear-gradient(180deg,transparent 0,#000 9%,#000 86%,transparent 100%);
  mask-composite:intersect}
@media (min-width:1081px){
  .hs-art{margin-right:calc(-64px - 24px - max(0px, (100vw - 1296px) / 2))}
  .hs-arrow.next{background:rgba(255,255,255,.9)}
}
@media (max-width:760px){.hs-art>img{-webkit-mask-image:linear-gradient(180deg,#000 80%,transparent);mask-image:linear-gradient(180deg,#000 80%,transparent);-webkit-mask-composite:source-over;mask-composite:add}}

/* industries: the photo fills the whole card and the text card floats on it; the niche icons live in the tabs */
.ind-tabs button i{font-style:normal;margin-right:7px;font-size:16px}
.ind-icons{display:none}
@media (min-width:1081px){
  .ind-card{height:520px}
  .ind-pics img{width:100%;object-position:80% 22%}
  .ind-box{left:36px;top:36px;bottom:36px;width:min(44%,520px);background:rgba(255,255,255,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
}

/* tighter joins the section rules above did not cover */
section.stack{padding-top:84px}
.sc-list{padding-block:40px 48px}
.ba{padding-block:32px 72px}
.try{margin-top:56px}

/* v6.1 hero: new photos (hx-*) keep the person and every object inside the frame on pure white, so the picture is
   shown whole (contain) instead of cropped (the owner: "image cut ho rhe the vo white se match hona chahiye"). The
   white of the photo is the white of the page; only a whisper of fade is left on the left, where the copy sits. */
.hs-art>img,.hs:nth-child(n) .hs-art>img{object-fit:contain;object-position:100% 60%;transform:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%);mask-image:linear-gradient(90deg,transparent 0,#000 12%);
  -webkit-mask-composite:source-over;mask-composite:add}
.hs.is-on .hs-art>img{transform:none}
@media (max-width:760px){.hs-art>img,.hs:nth-child(n) .hs-art>img{object-position:70% 100%;-webkit-mask-image:none;mask-image:none}}
@media (max-width:760px){.hs-art>img,.hs:nth-child(n) .hs-art>img{object-fit:cover;object-position:88% 62%}}
@media (max-width:760px){.fd1{top:auto!important;bottom:14px!important;max-width:62%}}

/* v6.2 hero: fill the white gap between the copy and the person (owner: "in gep me kuch or best kro").
   The photo is enlarged to fill its column from the right (its empty left third is what gets trimmed, never the
   person), and each slide gets a soft brand-colour disc behind the person. The photo multiplies onto the disc, so
   its white turns into the disc's colour and the person appears to stand on it. */
@media (min-width:761px){
  .hs-art{isolation:isolate}
  .hs-art::before{content:"";position:absolute;z-index:0;right:4%;top:50%;transform:translateY(-50%);width:min(64%,520px);aspect-ratio:1;border-radius:50%;
    background:radial-gradient(circle at 42% 38%,var(--disc-1,#F3EEFF) 0,var(--disc-2,#E4DAFF) 58%,rgba(255,255,255,0) 71%)}
  .hs-art::after{content:"";position:absolute;z-index:0;right:calc(4% - 26px);top:50%;transform:translateY(-50%);width:calc(min(64%,520px) + 52px);aspect-ratio:1;border-radius:50%;
    border:1.5px dashed var(--disc-2,#E4DAFF);opacity:.9;animation:spin 60s linear infinite}
  .hs-art>img,.hs:nth-child(n) .hs-art>img{position:relative;z-index:1;object-fit:cover;object-position:100% 60%;mix-blend-mode:multiply}
  .hs:nth-child(2) .hs-art{--disc-1:#EAF8F2;--disc-2:#CDEFE2}
  .hs:nth-child(3) .hs-art{--disc-1:#FFF1EA;--disc-2:#FFD9C7}
  .hs:nth-child(4) .hs-art{--disc-1:#EEF2FF;--disc-2:#D8E0FF}
}
@media (prefers-reduced-motion:reduce){.hs-art::after{animation:none}}

/* live offer strip (live site only: shown when routes pass a real, unexhausted offer) */
.offer-strip{background:linear-gradient(90deg,#5B34E6,#7C4EFF);color:#fff;font-size:13.5px}
.offer-strip-in{display:flex;align-items:center;justify-content:center;gap:14px;min-height:38px;flex-wrap:wrap;padding-block:6px;text-align:center}
.offer-strip a{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:3px}
/* phones: one line — drop the "no card · then" and the saving, keep the free month, the code and the button (6aa57ec) */
@media (max-width:720px){
  .offer-strip{font-size:12.5px}
  .offer-strip-in.os-one{flex-wrap:nowrap;gap:10px;white-space:nowrap}
  .offer-strip .os-x{display:none}
  .offer-strip .os-t{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .offer-strip .os-t+a{flex:none}
}
.plan .pinh{font-size:12.5px;color:var(--ink-3);margin-top:14px}
.plan .pmore{margin-top:10px;font-size:13.5px}
.plan .pmore summary{cursor:pointer;color:var(--v);font-weight:500;list-style:none}
.plan .pmore summary::-webkit-details-marker{display:none}
.plan .pmore ul{margin-top:8px}
.pp s{color:var(--ink-3);font-size:.55em;margin-right:4px}

/* Meta strip, option B (2026-09-29, owner picked B, heading on one line): a dark band, one statement,
   three badges. Text only: no Meta logo artwork (needs Meta's approval), never "Meta Verified". */
.meta-strip.mb{background:radial-gradient(900px 320px at 12% 0%,#2A1F6B 0,#14112E 62%);border:0;color:#ECE9F8;padding-block:34px;margin-top:18px}
.mb-row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2.2fr);gap:36px;align-items:center}
.mb-head h2{font:500 clamp(22px,2.1vw,30px)/1.15 var(--f-d);letter-spacing:-.02em;color:#fff;margin:0;white-space:nowrap}
.mb-head h2 em{font-style:normal;background:linear-gradient(90deg,#B8A2FF,#5BE3B8);-webkit-background-clip:text;background-clip:text;color:transparent}
.mb-head p{margin:8px 0 0;color:#ABA5CC;font-size:14px;line-height:1.5;max-width:380px}
.mb-bdg{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mb-bdg li{display:flex;align-items:flex-start;gap:12px;border:1px solid rgba(184,162,255,.22);background:rgba(255,255,255,.045);border-radius:14px;padding:16px;transition:border-color .25s,background .25s}
.mb-bdg li:hover{border-color:rgba(184,162,255,.45);background:rgba(255,255,255,.07)}
.mb-bdg i{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#0866FF;color:#fff;font:800 14px/1 var(--f-b);font-style:normal;box-shadow:0 0 0 5px rgba(8,102,255,.2)}
.mb-bdg small{display:block;font:600 10px/1.2 var(--f-m);letter-spacing:.1em;text-transform:uppercase;color:#ABA5CC}
.mb-bdg b{display:block;font:600 15.5px/1.25 var(--f-d);color:#fff;margin:5px 0 3px}
.mb-bdg span{display:block;font-size:12.5px;line-height:1.4;color:#ABA5CC}
.mb-bdg li>div{min-width:0}
@media (max-width:1180px){.mb-row{grid-template-columns:minmax(0,1fr);gap:22px}.mb-head{text-align:center}.mb-head p{margin-inline:auto}}
@media (max-width:760px){
  .meta-strip.mb{padding-block:26px;margin-top:10px}
  .mb-head h2{white-space:normal;text-wrap:balance;font-size:22px}
  .mb-bdg{grid-template-columns:1fr;gap:8px}
  .mb-bdg li{padding:12px 14px;align-items:center}
  .mb-bdg b{font-size:14.5px;margin:3px 0 1px}
}

/* v6.3 hero (owner, 2026-10-01: "jitni khali jagah sabhi slide me dikh rhi inko bhi best karna"). Every hero photo
   keeps its person in the right two thirds on pure white, so each slide had an empty band between the copy and the
   person, and nothing under the buttons. Desktop only: a trust line under the buttons, one floating card per slide
   in the photo's empty corner (illustrations, like the existing ones), and a quiet dot field behind the copy. */
.hs-trust{display:none}
.float-cm,.float-langs,.float-note{display:none}
@media (min-width:761px){
  .hero::before{content:"";position:absolute;z-index:0;left:0;top:0;width:min(46%,760px);height:100%;pointer-events:none;
    background:radial-gradient(520px 380px at 18% 40%,rgba(124,78,255,.09),transparent 70%),radial-gradient(circle,rgba(91,52,230,.16) 1.2px,transparent 1.6px) 0 0/22px 22px;
    -webkit-mask-image:radial-gradient(70% 70% at 30% 45%,#000 40%,transparent 100%);mask-image:radial-gradient(70% 70% at 30% 45%,#000 40%,transparent 100%)}
  .hero-in{z-index:1}
  .hs-trust{display:flex;flex-wrap:wrap;gap:8px 18px;list-style:none;margin:18px 0 0;padding:0;font-size:13.5px;color:var(--ink-2)}
  .hs-trust li{display:inline-flex;align-items:center;gap:7px}
  .hs-trust li::before{content:"✓";display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--tint-g,#E3F7EF);color:var(--g);font-size:11px;font-weight:700}
  .float-cm,.float-langs,.float-note{display:block;position:absolute;z-index:3;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);animation:float 8s ease-in-out infinite}
  .float-cm{left:-1%;top:46%;width:220px;padding:12px 14px;animation-delay:-2s}
  .float-cm small,.float-langs small{display:block;font:500 10px/1 var(--f-m);letter-spacing:.05em;text-transform:uppercase;color:var(--v);margin-bottom:6px}
  .float-cm p{margin:0;font-size:14px;color:var(--ink)}
  .float-cm p b{font-weight:600}
  .fc-ok{display:block;margin-top:8px;font-size:12.5px;font-weight:600;color:var(--g)}
  .float-langs{left:0;bottom:8%;width:250px;padding:12px 14px;animation-delay:-5s}
  .float-langs span{display:inline-block;margin:0 4px 6px 0;padding:4px 9px;border-radius:999px;background:var(--tint-v);color:var(--v-d,#4B2BC4);font-size:12.5px;font-weight:500}
  .float-note{display:flex;align-items:center;gap:10px;left:0;top:10%;padding:11px 14px;animation-delay:-6s}
  .float-note i{font-style:normal;font-size:20px}
  .float-note b{display:block;font-size:14px}
  .float-note small{display:block;font-size:12px;color:var(--ink-3)}
  .float-note.fn-b{top:auto;bottom:12%}
}
@media (min-width:761px) and (max-width:1180px){.float-cm,.float-langs,.float-note{display:none}}
@media (prefers-reduced-motion:reduce){.float-cm,.float-langs,.float-note{animation:none}}

/* Partner band on the homepage, after pricing (2026-10-01). Rates come from routes/affiliate.js (41-51%). */
.partner-band{padding-block:28px}
.pb-in{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;background:linear-gradient(115deg,#7C4EFF 0%,#5B34E6 55%,#2E2178 100%);color:#fff;border-radius:22px;padding:30px 36px}
.pb-k{margin:0;font:500 12px/1 var(--f-m);letter-spacing:.08em;text-transform:uppercase;color:#D8CCFF}
.pb-in h2{margin-top:10px;font-size:clamp(22px,2.3vw,32px);line-height:1.15;color:#fff;max-width:640px}
.pb-in h2 em{font-style:normal;color:#5BE3B8}
.pb-s{margin:10px 0 0;font-size:14.5px;color:rgba(255,255,255,.82)}
@media (max-width:760px){.pb-in{padding:24px 20px}.pb-cta,.pb-cta .btn{width:100%}}

/* "Featured on & verified" row with logos (2026-10-01): an even grid that fills the width, each a link card. */
.fo-k{margin:34px 0 0;font:500 12px/1 var(--f-m);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.feat-on,.trust .feat-on{list-style:none;margin:0;padding:0;display:flex;gap:12px;flex:none}
.feat-on li{display:block;min-width:0;padding:0;border:0;background:none;font-size:inherit}
.feat-on a{display:flex;flex-direction:column;align-items:flex-start;gap:12px;height:100%;border:1px solid var(--line);background:#fff;border-radius:14px;padding:14px 16px;transition:transform .25s var(--ease),box-shadow .25s,border-color .25s}
.feat-on a:hover{transform:translateY(-2px);border-color:var(--v-l);box-shadow:0 14px 28px -20px rgba(40,22,120,.45)}
.fo-logo{flex:none;width:42px;height:42px;border-radius:11px;background:var(--mist);display:grid;place-items:center}
.fo-logo img,.fo-logo svg{width:26px;height:26px;display:block}
.fo-t{display:flex;flex-direction:column;min-width:0}
.fo-t b{font:600 15px/1.2 var(--f-d);color:var(--ink);white-space:nowrap}
.fo-t small{margin-top:3px;font-size:12.5px;color:var(--ink-3);line-height:1.3}
@media (max-width:760px){.feat-on,.trust .feat-on{gap:8px}.feat-on li{width:170px}.feat-on a{padding:10px 12px;gap:10px}.fo-logo{width:34px;height:34px;border-radius:9px}.fo-logo img,.fo-logo svg{width:22px;height:22px}.fo-t b{font-size:13.5px}.fo-t small{font-size:11.5px}}

/* Featured-on row as a scrolling strip (owner, 2026-10-01: "scroling kro isko"). Two copies of the list in one
   track that moves by half its width; the copy is aria-hidden with links out of the tab order. Pauses on hover and
   keyboard focus; with reduced motion it is a plain sideways-scrolling row and the copy is hidden. */
.fo-mq{margin-top:14px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.fo-track{display:flex;gap:12px;width:max-content;animation:foScroll 38s linear infinite}
.fo-mq:hover .fo-track,.fo-mq:focus-within .fo-track{animation-play-state:paused}
.feat-on li{width:200px;flex:none}
@keyframes foScroll{to{transform:translateX(calc(-50% - 6px))}}
@media (prefers-reduced-motion:reduce){
  .fo-mq{overflow-x:auto;-webkit-mask-image:none;mask-image:none;scrollbar-width:thin}
  .fo-track{animation:none}
  .fo-clone{display:none}
}

/* v6.4 spacing (owner, 2026-10-01: "jgh jgh gep bhut hai"). Desktop only — phones already sit near 52px.
   Sections went 72-76px top and bottom, so two white sections meeting left ~150px of blank; inner heads sat
   40-72px above their content. */
@media (min-width:761px){
  .ind,.langs,.store,.agency,.every,.pricing,.faq,.sale,.viral,.inno,.wn,.tpl,.trust{padding-block:56px}
  .dev-in{padding-block:56px}
  .grow{padding-block:56px 48px}
  .final{padding-block:52px}
  section.stack{padding-top:56px}
  .sc-list{padding-block:32px 44px}
  .banner{margin-top:40px}
  .try{margin-top:44px}
  .cards3,.viral-row{margin-top:32px}
  .dev-cols{margin-top:40px}
  .dev-try{margin-top:48px}
  .ind-tabs,.tpl-tabs{margin-top:26px}
  .inno-track,.wn-track,.steps-row{margin-top:28px}
  .foot{padding-block:52px 30px}
}