:root{--ink:#0b1f3a;--muted:#60708a;--line:#dce5ef;--soft:#f5f8fc;--blue:#1769e0;--cyan:#0aa7c7;--blue2:#edf5ff;--shadow:0 22px 70px rgba(17,48,85,.12);--shadow-sm:0 12px 34px rgba(17,48,85,.09);--radius:26px;--shell:1180px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}.shell{width:min(calc(100% - 40px),var(--shell));margin:auto}.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:blur(18px);border-bottom:1px solid rgba(220,229,239,.8)}.nav-wrap{height:78px;display:flex;align-items:center;justify-content:space-between;gap:30px}.brand{display:flex;align-items:baseline;font-size:25px;font-weight:700;letter-spacing:-1.2px}.brand b{color:var(--blue);font-weight:900}.desktop-nav{display:flex;gap:30px;margin-left:auto}.desktop-nav a{font-size:14px;font-weight:650;color:#43546d}.desktop-nav a:hover{color:var(--blue)}.nav-actions{display:flex;align-items:center;gap:12px}.language-switch{display:flex;padding:3px;border:1px solid var(--line);border-radius:999px;background:#fff}.lang-btn{border:0;background:transparent;color:#6a7890;font-weight:800;font-size:11px;padding:8px 10px;border-radius:999px;cursor:pointer}.lang-btn.active{background:var(--ink);color:#fff}.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:12px;padding:12px 18px;font-weight:800;font-size:14px;cursor:pointer;transition:.2s ease}.btn-primary{background:var(--blue);color:#fff;box-shadow:0 10px 25px rgba(23,105,224,.2)}.btn-primary:hover{transform:translateY(-1px);background:#115fcf}.btn-light{background:#fff;border:1px solid var(--line);color:var(--ink)}.btn-large{min-height:52px;padding:0 22px}.menu-btn{display:none;border:0;background:none;width:38px;height:38px}.menu-btn span{display:block;height:2px;background:var(--ink);margin:6px}.mobile-nav{display:none}.hero{position:relative;overflow:hidden;padding:88px 0 92px;background:linear-gradient(180deg,#fff 0%,#f8fbff 100%)}.hero-glow{position:absolute;border-radius:999px;filter:blur(1px);pointer-events:none}.hero-glow-one{width:420px;height:420px;background:radial-gradient(circle,rgba(69,154,255,.12),transparent 68%);right:8%;top:4%}.hero-glow-two{width:320px;height:320px;background:radial-gradient(circle,rgba(10,167,199,.09),transparent 68%);left:-7%;bottom:-15%}.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:72px;align-items:center}.availability{display:inline-flex;align-items:center;gap:10px;border:1px solid #cfe0f4;background:#fff;border-radius:999px;padding:9px 13px;box-shadow:var(--shadow-sm);font-size:12px;color:#40536e}.availability span{width:8px;height:8px;background:#13a66a;border-radius:50%;box-shadow:0 0 0 5px rgba(19,166,106,.1)}.eyebrow,.section-kicker{font-size:11px;letter-spacing:.18em;font-weight:900;color:var(--blue);margin:24px 0 13px}.hero h1{font-size:clamp(48px,6vw,78px);line-height:.99;letter-spacing:-.055em;margin:0;max-width:680px}.hero h1 em,.acquisition h2 em{font-style:normal;color:var(--blue)}.hero-lead{max-width:620px;font-size:19px;line-height:1.7;color:var(--muted);margin:27px 0}.hero-actions{display:flex;flex-wrap:wrap;gap:12px}.hero-proof{display:flex;gap:34px;margin-top:36px;padding-top:28px;border-top:1px solid var(--line)}.hero-proof div{display:flex;flex-direction:column;gap:2px}.hero-proof strong{font-size:22px}.hero-proof span{font-size:12px;color:var(--muted)}.hero-showcase{position:relative;min-height:490px;display:flex;align-items:center}.browser-card{width:100%;background:#fff;border:1px solid #d7e1ee;border-radius:24px;box-shadow:var(--shadow);overflow:hidden;transform:rotate(1deg)}.browser-top{height:48px;background:#f4f7fb;border-bottom:1px solid #e1e8f0;display:flex;align-items:center;gap:6px;padding:0 14px}.browser-top>i{width:8px;height:8px;border-radius:50%;background:#cbd5e1}.address{margin-left:10px;flex:1;background:#fff;border:1px solid #e0e7ef;border-radius:8px;padding:7px 10px;font-size:11px;color:#60708a}.browser-body{min-height:340px;padding:58px 46px;background:linear-gradient(135deg,#fff,#f4f9ff);position:relative}.mini-label{font-size:10px;font-weight:900;letter-spacing:.18em;color:#6b7b91}.giant-domain{font-size:clamp(58px,7vw,92px);font-weight:900;letter-spacing:-.07em;margin:20px 0 8px}.giant-domain span{color:var(--blue)}.browser-body p{color:var(--muted);font-size:15px}.mock-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}.mock-chips span,.example-line span{border:1px solid #d9e4f0;background:#fff;border-radius:999px;padding:8px 11px;font-size:11px;font-weight:750;color:#45607f}.floating-card{position:absolute;background:#fff;border:1px solid #d9e3ef;border-radius:16px;box-shadow:var(--shadow-sm);padding:14px 16px}.floating-card small{display:block;color:#7b899c;font-size:10px;margin-bottom:4px}.floating-card b{font-size:13px}.email-card{left:-35px;bottom:30px}.app-card{right:-24px;top:38px;display:flex;gap:10px;align-items:center}.app-icon{width:46px;height:46px;border-radius:13px;background:linear-gradient(145deg,#0b1f3a,#1769e0);color:#fff;display:grid;place-items:center;font-weight:900;font-size:14px}.section{padding:105px 0}.section-heading{margin-bottom:48px}.section-heading.center{text-align:center;margin-left:auto;margin-right:auto}.section-heading.narrow{max-width:760px}.section-heading h2,.ecosystem-copy h2,.acquisition h2{font-size:clamp(36px,4.2vw,54px);line-height:1.06;letter-spacing:-.045em;margin:0}.section-heading p,.ecosystem-copy>p,.acquisition-copy>p{font-size:17px;line-height:1.7;color:var(--muted)}.value-story{display:grid;grid-template-columns:.9fr 1.1fr;gap:26px}.value-main{border-radius:var(--radius);background:linear-gradient(135deg,#0d2b4f,#1769e0);color:#fff;padding:44px;min-height:450px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden}.value-main:after{content:".MY";position:absolute;right:-20px;top:-38px;font-weight:900;font-size:170px;color:rgba(255,255,255,.06);letter-spacing:-.08em}.number-mark{position:absolute;top:38px;left:42px;width:86px;height:86px;border:1px solid rgba(255,255,255,.25);border-radius:24px;display:grid;place-items:center;font-size:30px;font-weight:900}.value-main h3{font-size:34px;letter-spacing:-.04em;margin:0 0 12px}.value-main p{color:rgba(255,255,255,.76);line-height:1.7;margin:0;max-width:470px}.benefit-stack{display:grid;grid-template-columns:1fr 1fr;gap:18px}.benefit-stack article{border:1px solid var(--line);border-radius:22px;padding:27px;background:#fff;display:flex;gap:18px;box-shadow:0 10px 28px rgba(17,48,85,.04)}.benefit-icon{width:42px;height:42px;border-radius:12px;background:var(--blue2);color:var(--blue);display:grid;place-items:center;font-size:11px;font-weight:900;flex:0 0 auto}.benefit-stack h3{font-size:17px;margin:2px 0 8px}.benefit-stack p{margin:0;color:var(--muted);font-size:13px;line-height:1.6}.ideas-section{background:#f7faff}.split-heading{display:grid;grid-template-columns:1fr .8fr;gap:70px;align-items:end}.split-heading p{margin:0}.idea-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.idea-card{background:#fff;border:1px solid #dfe7f1;border-radius:24px;padding:25px;min-height:390px;display:flex;flex-direction:column;box-shadow:0 10px 26px rgba(17,48,85,.04)}.idea-card.featured{grid-column:span 2;background:linear-gradient(135deg,#ffffff,#f1f7ff)}.idea-card.master{background:#0d2b4f;color:#fff}.idea-top{display:flex;align-items:center;justify-content:space-between}.idea-num{font-size:11px;color:#9aa8ba;font-weight:800}.idea-tag{font-size:9px;letter-spacing:.16em;font-weight:900;color:var(--blue)}.master .idea-tag{color:#8dc3ff}.idea-card h3{font-size:22px;letter-spacing:-.025em;margin:22px 0 8px}.idea-card p{font-size:14px;color:var(--muted);line-height:1.65;margin:0 0 22px}.master p{color:rgba(255,255,255,.7)}.example-line{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto}.master .example-line span{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.15);color:#fff}.identity-flow{height:120px;margin-top:28px;border-radius:18px;background:#f5f9ff;display:flex;align-items:center;justify-content:center;gap:18px}.person-dot,.identity-core{border-radius:50%;display:grid;place-items:center;font-weight:900}.person-dot{width:54px;height:54px;background:#fff;border:1px solid var(--line);font-size:10px}.identity-core{width:72px;height:72px;background:var(--blue);color:#fff;font-size:18px}.identity-core small{font-size:8px;letter-spacing:.14em}.apps{display:flex;gap:5px}.apps i{font-style:normal;background:#fff;border:1px solid var(--line);padding:8px 7px;border-radius:7px;font-size:8px;font-weight:900}.mini-dashboard{height:118px;background:#f5f9ff;border-radius:18px;margin-top:28px;padding:19px}.property{display:flex;align-items:end;gap:20px}.tower{width:70px;height:80px;background:linear-gradient(180deg,#1769e0,#0d2b4f);border-radius:9px 9px 3px 3px;box-shadow:inset 0 0 0 8px rgba(255,255,255,.12)}.dash-lines{flex:1}.dash-lines i{display:block;height:9px;background:#d7e5f5;border-radius:9px;margin:9px 0}.project-row{display:grid;grid-template-columns:20px 1fr 54px;gap:10px;align-items:center;margin:9px 0}.project-row i{height:20px;border-radius:6px;background:#d6e8ff}.project-row b{height:8px;border-radius:6px;background:#cfdaea}.project-row em{height:7px;border-radius:6px;background:#72a9eb}.finance{display:flex;align-items:end;gap:20px}.money{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:#e7f5ef;color:#087a51;font-weight:900}.finance-bars{display:flex;align-items:end;gap:7px;height:70px}.finance-bars i{width:12px;background:#72a9eb;border-radius:5px 5px 0 0}.finance-bars i:nth-child(1){height:28%}.finance-bars i:nth-child(2){height:52%}.finance-bars i:nth-child(3){height:77%}.finance-bars i:nth-child(4){height:100%;background:var(--blue)}.marketing{display:flex;align-items:center;justify-content:center;gap:22px}.chart-line{font-size:58px;color:var(--blue);font-weight:200}.marketing strong{display:block;font-size:25px}.marketing small{color:var(--muted)}.master-logo{height:118px;margin-top:28px;display:flex;align-items:center;font-size:54px;font-weight:900;letter-spacing:-.06em}.master-logo span{color:#79b6ff}.examples-section{background:#fff}.comparison-card{border:1px solid var(--line);border-radius:28px;display:grid;grid-template-columns:1fr 70px 1fr;overflow:hidden;box-shadow:var(--shadow-sm)}.comparison-side{padding:38px}.comparison-side>span{font-size:10px;font-weight:900;letter-spacing:.15em;color:#8796a9}.comparison-side.new{background:#eef6ff}.url-demo{margin:20px 0 26px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;font-size:15px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.comparison-side.new .url-demo{font-size:27px;color:var(--blue)}.comparison-side ul{list-style:none;padding:0;margin:0}.comparison-side li{padding:8px 0;color:var(--muted);font-size:13px}.comparison-side li:before{content:"✓";margin-right:9px;color:var(--blue);font-weight:900}.comparison-side.old li:before{content:"–";color:#9aa8ba}.vs{display:grid;place-items:center;background:#fff;font-size:11px;font-weight:900;color:#8a98aa}.touchpoint-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}.touchpoint{border:1px solid var(--line);border-radius:18px;padding:20px;background:#fff;min-height:100px;display:flex;flex-direction:column;justify-content:center}.touchpoint small{color:var(--muted);margin-bottom:5px}.touchpoint strong{font-size:18px}.app-touch{flex-direction:row;gap:12px;align-items:center;justify-content:flex-start}.app-icon.small{width:42px;height:42px}.sso-touch button{border:1px solid var(--line);background:#fff;border-radius:10px;padding:9px 11px;text-align:left;font-weight:900}.sso-touch button span{font-size:10px;font-weight:700;margin-left:8px}.ecosystem-section{background:#0d2b4f;color:#fff;overflow:hidden}.ecosystem-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center}.ecosystem-copy>p{color:rgba(255,255,255,.7)}.ecosystem-copy .section-kicker{color:#7ec0ff}.ecosystem-copy .note{font-size:11px;color:rgba(255,255,255,.46);margin-top:24px}.ecosystem-map{height:430px;position:relative}.eco-core{position:absolute;width:150px;height:150px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--ink);font-size:29px;font-weight:900;box-shadow:0 0 0 32px rgba(255,255,255,.04),0 0 0 75px rgba(255,255,255,.025)}.eco-core span{color:var(--blue)}.eco-node{position:absolute;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.17);padding:10px 13px;border-radius:999px;font-size:11px;font-weight:800;backdrop-filter:blur(8px)}.n1{left:5%;top:11%}.n2{right:7%;top:15%}.n3{right:1%;top:47%}.n4{right:12%;bottom:12%}.n5{left:7%;bottom:13%}.n6{left:0;top:48%}.process-section{background:#f7faff}.process-line{display:grid;grid-template-columns:1fr 50px 1fr 50px 1fr;align-items:start;gap:12px;max-width:980px;margin:0 auto}.process-line>div{text-align:center}.process-line>b{}.process-line div>b{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:#fff;margin:0 auto 16px}.process-line h3{font-size:17px;margin:0 0 7px}.process-line p{font-size:13px;line-height:1.6;color:var(--muted);margin:0}.process-line>span{text-align:center;padding-top:12px;color:#98a7b9}.acquisition{padding:110px 0;background:linear-gradient(180deg,#fff,#f5f9ff)}.acquisition-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:start}.acquisition-copy{position:sticky;top:120px}.acquisition-copy>p{max-width:500px}.contact-card{margin-top:30px;border-left:3px solid var(--blue);padding-left:16px;display:flex;flex-direction:column;gap:4px}.contact-card span{font-size:11px;color:var(--muted)}.contact-card a{font-weight:850}.enquiry-form{background:#fff;border:1px solid var(--line);border-radius:26px;padding:30px;box-shadow:var(--shadow-sm)}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.enquiry-form label{display:block;font-size:11px;font-weight:850;color:#43546d;margin-bottom:14px}.enquiry-form input,.enquiry-form textarea,.enquiry-form select{width:100%;margin-top:7px;border:1px solid #d5dfeb;background:#fbfdff;border-radius:11px;padding:13px 14px;color:var(--ink);font:inherit;font-size:13px;outline:none}.enquiry-form input:focus,.enquiry-form textarea:focus,.enquiry-form select:focus{border-color:#7eb0ee;box-shadow:0 0 0 4px rgba(23,105,224,.08);background:#fff}.check{display:flex!important;align-items:flex-start;gap:10px;font-weight:600!important;line-height:1.5!important}.check input{width:auto;margin:2px 0 0}.form-action-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:4px}.submit-btn{width:100%;margin-top:0}.btn-whatsapp{width:100%;background:#0f9f63;color:#fff;box-shadow:0 10px 25px rgba(15,159,99,.18)}.btn-whatsapp:hover{transform:translateY(-1px);background:#0b8b56}.hp{position:absolute!important;left:-9999px!important}.form-status{margin-top:12px;font-size:12px;line-height:1.5}.form-status.success{color:#087a51}.form-status.error{color:#b42318}footer{border-top:1px solid var(--line);padding:38px 0 26px;background:#fff}.footer-wrap{display:flex;justify-content:space-between;gap:30px;align-items:flex-start}.footer-brand{margin-bottom:8px}.footer-wrap p{margin:0;color:var(--muted);font-size:12px}.footer-right{display:flex;gap:18px;color:var(--muted);font-size:12px}.disclaimer{border-top:1px solid #edf1f5;margin-top:25px;padding-top:20px;color:#8996a8;font-size:10px;line-height:1.5}@media(max-width:980px){.desktop-nav{display:none}.menu-btn{display:block}.nav-cta{display:none}.mobile-nav{display:none;padding:10px 20px 22px;background:#fff;border-top:1px solid var(--line)}.mobile-nav.open{display:grid;gap:3px}.mobile-nav a{padding:12px;border-bottom:1px solid #eef2f6;font-weight:700;font-size:14px}.hero{padding-top:65px}.hero-grid,.value-story,.ecosystem-wrap,.acquisition-grid{grid-template-columns:1fr}.hero-showcase{min-height:430px;max-width:660px}.value-main{min-height:350px}.idea-grid{grid-template-columns:1fr 1fr}.idea-card.featured{grid-column:span 2}.touchpoint-grid{grid-template-columns:1fr 1fr}.acquisition-copy{position:static}.split-heading{grid-template-columns:1fr;gap:10px}.ecosystem-copy{max-width:720px}}@media(max-width:680px){.form-action-grid{grid-template-columns:1fr}html,body{max-width:100%;overflow-x:hidden}.shell{width:calc(100% - 28px);max-width:var(--shell)}.nav-wrap{height:68px;gap:10px}.brand{font-size:21px;flex:0 0 auto}.nav-actions{gap:7px;min-width:0}.language-switch{flex:0 0 auto}.lang-btn{padding:7px 8px}.menu-btn{flex:0 0 38px;padding:0}.hero{padding:44px 0 66px}.hero-grid{gap:38px}.hero h1{font-size:clamp(42px,13vw,49px);overflow-wrap:anywhere}.hero-lead{font-size:16px}.hero-actions{display:grid}.hero-proof{gap:12px;justify-content:space-between}.hero-proof div{min-width:0}.hero-proof strong{font-size:18px}.hero-proof span{font-size:10px}.hero-showcase{min-height:auto;display:block;padding:8px 0 88px;overflow:visible}.browser-card{width:100%;max-width:100%;transform:none;border-radius:20px}.browser-top{padding:0 10px}.address{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.browser-body{min-height:250px;padding:38px 20px}.giant-domain{font-size:clamp(52px,18vw,68px);overflow-wrap:anywhere}.mock-chips{gap:6px}.mock-chips span,.example-line span{max-width:100%;overflow-wrap:anywhere}.floating-card{max-width:calc(100% - 20px)}.email-card{left:10px;bottom:18px}.app-card{right:10px;top:auto;bottom:18px}.section{padding:76px 0}.section-heading h2,.ecosystem-copy h2,.acquisition h2{font-size:clamp(33px,10vw,37px);overflow-wrap:anywhere}.section-heading p,.ecosystem-copy>p,.acquisition-copy>p{font-size:15px}.benefit-stack,.idea-grid,.touchpoint-grid,.form-row{grid-template-columns:1fr}.benefit-stack article,.idea-card,.touchpoint,.enquiry-form{min-width:0;max-width:100%}.idea-card.featured{grid-column:span 1}.identity-flow{gap:10px;padding:0 10px;overflow:hidden}.apps{gap:3px;min-width:0}.apps i{padding:7px 5px;font-size:7px}.comparison-card{grid-template-columns:1fr;max-width:100%;overflow:hidden}.vs{height:42px}.comparison-side{padding:25px;min-width:0}.url-demo{max-width:100%;font-size:13px}.comparison-side.new .url-demo{font-size:24px}.process-line{grid-template-columns:1fr;gap:24px}.process-line>span{transform:rotate(90deg);padding:0}.ecosystem-map{height:390px;width:100%;max-width:100%;overflow:hidden}.eco-core{width:112px;height:112px;font-size:24px}.eco-node{font-size:8.5px;padding:8px 10px;white-space:nowrap}.n1{left:4%;top:8%}.n2{right:4%;top:11%}.n3{right:3%;top:44%}.n4{right:5%;bottom:9%}.n5{left:5%;bottom:10%}.n6{left:3%;top:45%}.acquisition{padding:80px 0}.enquiry-form{padding:20px}.enquiry-form input,.enquiry-form textarea,.enquiry-form select{min-width:0;max-width:100%}.footer-wrap{flex-direction:column}.footer-right{flex-wrap:wrap}}@media(max-width:390px){.shell{width:calc(100% - 22px)}.nav-wrap{gap:6px}.brand{font-size:19px}.lang-btn{padding:6px 7px;font-size:10px}.hero h1{font-size:40px}.hero-proof{display:grid;grid-template-columns:repeat(3,1fr)}.hero-proof strong{font-size:16px}.hero-showcase{padding-bottom:118px}.browser-body{padding:34px 16px}.giant-domain{font-size:52px}.floating-card{padding:11px 12px}.email-card{left:8px;bottom:62px}.app-card{right:8px;bottom:10px}.ecosystem-map{height:420px}.eco-node{font-size:7.5px;padding:7px 8px}.n1{left:2%;top:5%}.n2{right:2%;top:15%}.n3{right:2%;top:42%}.n4{right:3%;bottom:8%}.n5{left:3%;bottom:16%}.n6{left:2%;top:52%}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}


/* Floating WhatsApp concierge */
.whatsapp-float{position:fixed;right:24px;bottom:24px;z-index:1200;display:flex;align-items:center;gap:10px;text-decoration:none;color:#0b2436;filter:drop-shadow(0 14px 30px rgba(15,23,42,.18));transition:transform .2s ease,filter .2s ease}
.whatsapp-float:hover{transform:translateY(-3px);filter:drop-shadow(0 18px 36px rgba(15,23,42,.24))}
.whatsapp-float-label{display:flex;align-items:center;min-height:46px;padding:0 16px;border:1px solid rgba(15,23,42,.10);border-radius:16px;background:rgba(255,255,255,.96);font-size:.84rem;font-weight:750;letter-spacing:-.01em;box-shadow:0 10px 28px rgba(15,23,42,.10);backdrop-filter:blur(12px)}
.whatsapp-float-icon{width:58px;height:58px;border-radius:20px;display:grid;place-items:center;background:#25D366;box-shadow:0 12px 26px rgba(37,211,102,.28);border:4px solid rgba(255,255,255,.95)}
.whatsapp-float-icon svg{width:31px;height:31px;fill:#fff;display:block}
.whatsapp-float:focus-visible{outline:3px solid rgba(37,99,235,.35);outline-offset:5px;border-radius:22px}
@media(max-width:640px){.whatsapp-float{right:14px;bottom:14px;gap:8px}.whatsapp-float-label{min-height:42px;padding:0 12px;border-radius:14px;font-size:.75rem}.whatsapp-float-icon{width:54px;height:54px;border-radius:18px}.whatsapp-float-icon svg{width:29px;height:29px}}
@media(max-width:390px){.whatsapp-float-label{display:none}.whatsapp-float{right:12px;bottom:12px}}
@media(prefers-reduced-motion:reduce){.whatsapp-float{transition:none}}

/* v6 — Mobile value panel: prevent PM badge/title collision in BM/EN */
@media (max-width: 680px) {
  .value-main {
    min-height: 0;
    padding: 28px 24px 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
  }

  .value-main::after {
    right: -18px;
    top: -22px;
    font-size: 122px;
    line-height: 1;
  }

  .number-mark {
    position: relative;
    top: auto;
    left: auto;
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    margin: 0 0 34px;
    border-radius: 20px;
    font-size: 25px;
    z-index: 2;
  }

  .value-main h3 {
    position: relative;
    z-index: 2;
    margin: 0 0 14px;
    max-width: 100%;
    font-size: clamp(29px, 8.6vw, 36px);
    line-height: 1.08;
    letter-spacing: -.035em;
    overflow-wrap: normal;
    word-break: normal;
  }

  .value-main p {
    position: relative;
    z-index: 2;
    max-width: 100%;
    font-size: 15px;
    line-height: 1.75;
  }
}

@media (max-width: 390px) {
  .value-main {
    padding: 24px 20px 27px;
  }

  .number-mark {
    width: 66px;
    height: 66px;
    flex-basis: 66px;
    margin-bottom: 30px;
    border-radius: 18px;
    font-size: 23px;
  }

  .value-main h3 {
    font-size: 29px;
  }

  .value-main p {
    font-size: 14.5px;
    line-height: 1.72;
  }
}


/* v7.1 — structural fix for PM badge/title + forced mobile-safe flow */
.value-main-heading {
  margin-top: auto;
  position: relative;
  z-index: 2;
}

@media (max-width: 680px) {
  .value-main {
    min-height: 0 !important;
    height: auto !important;
    padding: 28px 24px 30px !important;
    display: block !important;
  }

  .value-main-heading {
    margin: 0 0 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 22px !important;
    width: 100% !important;
  }

  .value-main-heading .number-mark {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    min-height: 72px !important;
    margin: 0 !important;
    flex: none !important;
    display: grid !important;
    place-items: center !important;
  }

  .value-main-heading h3 {
    position: static !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    clear: both !important;
    font-size: clamp(28px, 8.5vw, 36px) !important;
    line-height: 1.08 !important;
  }

  .value-main > p {
    position: static !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 390px) {
  .value-main {
    padding: 24px 20px 27px !important;
  }
  .value-main-heading {
    gap: 18px !important;
  }
  .value-main-heading .number-mark {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
  }
  .value-main-heading h3 {
    font-size: 28px !important;
  }
}

/* v8 — authoritative responsive layout for PM badge + value heading
   Desktop / tablet: side-by-side in normal flow.
   Mobile: stacked. No absolute positioning at any breakpoint. */
.value-main-heading {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 28px;
  width: 100%;
  margin-top: auto;
  margin-bottom: 18px;
}

.value-main-heading .number-mark {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  width: 86px;
  height: 86px;
  min-width: 86px;
  min-height: 86px;
  margin: 0;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 24px;
  font-size: 30px;
  font-weight: 900;
}

.value-main-heading h3 {
  position: static !important;
  min-width: 0;
  width: auto;
  max-width: 100%;
  margin: 0 !important;
  font-size: 34px;
  line-height: 1.08;
  letter-spacing: -.04em;
  overflow-wrap: normal;
  word-break: normal;
}

.value-main > p {
  position: relative;
  z-index: 2;
  margin: 0;
  max-width: 100%;
}

/* Tablet — preserve horizontal relationship but reduce scale safely. */
@media (min-width: 681px) and (max-width: 980px) {
  .value-main {
    min-height: 330px;
    padding: 38px 40px;
  }

  .value-main-heading {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 24px;
    margin-bottom: 16px;
  }

  .value-main-heading .number-mark {
    width: 76px;
    height: 76px;
    min-width: 76px;
    min-height: 76px;
    border-radius: 21px;
    font-size: 27px;
  }

  .value-main-heading h3 {
    font-size: clamp(30px, 4.5vw, 34px);
    line-height: 1.1;
  }
}

/* Mobile — stack badge above title. */
@media (max-width: 680px) {
  .value-main-heading {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 22px !important;
    margin: 0 0 14px !important;
  }

  .value-main-heading .number-mark {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    min-height: 72px !important;
    border-radius: 20px !important;
    font-size: 25px !important;
  }

  .value-main-heading h3 {
    width: 100% !important;
    font-size: clamp(28px, 8.5vw, 36px) !important;
    line-height: 1.08 !important;
  }
}

@media (max-width: 390px) {
  .value-main-heading {
    gap: 18px !important;
  }

  .value-main-heading .number-mark {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
    font-size: 23px !important;
  }

  .value-main-heading h3 {
    font-size: 28px !important;
  }
}


/* ==========================================================================
   PM.MY v10 Animated Premium
   Base: v10 only. No new sections or content.
   ========================================================================== */
:root {
    --pm-motion-ease: cubic-bezier(.22, 1, .36, 1);
    --pm-motion-fast: 260ms;
    --pm-motion-normal: 520ms;
    --pm-motion-slow: 760ms;
}

/* Scroll reveal is activated only after JS initializes. */
.pm-motion-ready .pm-animate {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition:
        opacity var(--pm-motion-slow) var(--pm-motion-ease),
        transform var(--pm-motion-slow) var(--pm-motion-ease);
    will-change: opacity, transform;
}

.pm-motion-ready .pm-animate.pm-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.pm-motion-ready .pm-animate[data-pm-delay="1"] {
    transition-delay: 70ms;
}

.pm-motion-ready .pm-animate[data-pm-delay="2"] {
    transition-delay: 140ms;
}

.pm-motion-ready .pm-animate[data-pm-delay="3"] {
    transition-delay: 210ms;
}

/* Hero entrance. */
.pm-motion-ready .hero h1,
.pm-motion-ready .hero-title {
    animation: pmHeroTitleIn .9s var(--pm-motion-ease) both;
}

.pm-motion-ready .hero p,
.pm-motion-ready .hero-subtitle {
    animation: pmHeroTextIn .9s .08s var(--pm-motion-ease) both;
}

@keyframes pmHeroTitleIn {
    from {
        opacity: 0;
        transform: translate3d(0, 18px, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes pmHeroTextIn {
    from {
        opacity: 0;
        transform: translate3d(0, 14px, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* Premium card hover — desktop pointer only. */
@media (hover: hover) and (pointer: fine) {
    .card,
    .use-case-card,
    .value-card,
    .benefit-card,
    .comparison-card,
    .ecosystem-card,
    .process-card {
        transition:
            transform var(--pm-motion-normal) var(--pm-motion-ease),
            box-shadow var(--pm-motion-normal) var(--pm-motion-ease),
            border-color var(--pm-motion-fast) ease;
        transform: translateZ(0);
    }

    .card:hover,
    .use-case-card:hover,
    .value-card:hover,
    .benefit-card:hover,
    .comparison-card:hover,
    .ecosystem-card:hover,
    .process-card:hover {
        transform: translate3d(0, -5px, 0);
    }

    .btn,
    .cta-button,
    button,
    .lang-btn {
        transition:
            transform var(--pm-motion-fast) var(--pm-motion-ease),
            box-shadow var(--pm-motion-fast) var(--pm-motion-ease),
            background-color var(--pm-motion-fast) ease,
            color var(--pm-motion-fast) ease,
            border-color var(--pm-motion-fast) ease;
    }

    .btn:hover,
    .cta-button:hover {
        transform: translate3d(0, -2px, 0);
    }
}

/* Browser / product mockups get subtle premium depth. */
.browser-mockup,
.email-mockup,
.app-mockup,
.hero-visual {
    transition:
        transform 650ms var(--pm-motion-ease),
        box-shadow 650ms var(--pm-motion-ease);
}

@media (hover: hover) and (pointer: fine) {
    .browser-mockup:hover,
    .email-mockup:hover,
    .app-mockup:hover,
    .hero-visual:hover {
        transform: translate3d(0, -6px, 0);
    }
}

/* CTA emphasis — one-time soft pulse, not continuous. */
.pm-motion-ready .hero .btn-primary,
.pm-motion-ready .hero .cta-primary {
    animation: pmCtaSettle 1s .45s var(--pm-motion-ease) both;
}

@keyframes pmCtaSettle {
    0% {
        opacity: 0;
        transform: translate3d(0, 10px, 0) scale(.985);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

/* Floating WhatsApp entrance without moving its resting position. */
.pm-motion-ready .whatsapp-float {
    animation: pmWhatsAppIn .65s .55s var(--pm-motion-ease) both;
}

@keyframes pmWhatsAppIn {
    from {
        opacity: 0;
        transform: translate3d(0, 12px, 0) scale(.94);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* Form focus transitions. */
input,
select,
textarea {
    transition:
        border-color var(--pm-motion-fast) ease,
        box-shadow var(--pm-motion-fast) ease,
        background-color var(--pm-motion-fast) ease;
}

/* Accessibility: fully disable nonessential motion. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }

    .pm-motion-ready .pm-animate {
        opacity: 1 !important;
        transform: none !important;
    }
}


/* ==========================================================================
   PM.MY v10 — Flying + Bounce Premium Motion
   Base remains v10. Adds controlled floating/flying/bounce effects only.
   ========================================================================== */

/* Soft flying effect for hero visual / browser mockup */
.hero-visual,
.browser-mockup,
.email-mockup,
.app-mockup {
    animation: pmFly 5.5s ease-in-out infinite;
    transform-origin: center center;
}

@keyframes pmFly {
    0% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
    25% {
        transform: translate3d(0, -7px, 0) rotate(-0.25deg);
    }
    50% {
        transform: translate3d(0, -12px, 0) rotate(0deg);
    }
    75% {
        transform: translate3d(0, -6px, 0) rotate(0.25deg);
    }
    100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
}

/* PM badge / visual emblem bounce */
.number-mark,
.pm-badge,
.domain-badge,
.hero-badge {
    animation: pmBadgeBounce 3.8s ease-in-out infinite;
    transform-origin: center bottom;
}

@keyframes pmBadgeBounce {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    45% {
        transform: translate3d(0, -6px, 0) scale(1.015);
    }
    55% {
        transform: translate3d(0, -6px, 0) scale(1.015);
    }
    72% {
        transform: translate3d(0, 1px, 0) scale(.995);
    }
}

/* Primary CTA: subtle attention bounce every few seconds */
.hero .btn-primary,
.hero .cta-primary,
.hero a[href*="#acquisition"] {
    animation: pmCtaBounce 4.8s ease-in-out infinite;
    transform-origin: center bottom;
}

@keyframes pmCtaBounce {
    0%, 72%, 100% {
        transform: translate3d(0, 0, 0);
    }
    78% {
        transform: translate3d(0, -5px, 0);
    }
    83% {
        transform: translate3d(0, 1px, 0);
    }
    88% {
        transform: translate3d(0, -2px, 0);
    }
    93% {
        transform: translate3d(0, 0, 0);
    }
}

/* Floating WhatsApp: gentle hover in the air, not aggressive shaking */
.whatsapp-float {
    animation:
        pmWhatsAppIn .65s .25s var(--pm-motion-ease, ease) both,
        pmWhatsAppFloat 3.6s 1s ease-in-out infinite;
}

@keyframes pmWhatsAppFloat {
    0%, 100% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(0, -8px, 0);
    }
}

/* Selected/premium cards can gently breathe when visible */
.pm-visible .value-card,
.pm-visible .benefit-card {
    animation: pmCardBreathe 6s ease-in-out infinite;
}

@keyframes pmCardBreathe {
    0%, 100% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(0, -3px, 0);
    }
}

/* Small decorative elements fly at different timing if present */
.hero-shape,
.hero-ring,
.hero-orbit,
.decorative-ring,
.decorative-shape {
    animation: pmOrbitFloat 7s ease-in-out infinite;
}

@keyframes pmOrbitFloat {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
    33% {
        transform: translate3d(5px, -8px, 0) rotate(2deg);
    }
    66% {
        transform: translate3d(-4px, -4px, 0) rotate(-2deg);
    }
}

/* Pointer interaction can amplify the flying feel slightly */
@media (hover: hover) and (pointer: fine) {
    .hero-visual:hover,
    .browser-mockup:hover,
    .email-mockup:hover,
    .app-mockup:hover {
        animation-play-state: paused;
        transform: translate3d(0, -8px, 0) scale(1.01);
    }

    .whatsapp-float:hover {
        animation-play-state: paused;
        transform: translate3d(0, -5px, 0) scale(1.04);
    }
}

/* Mobile: reduce travel distance so it stays premium and stable */
@media (max-width: 680px) {
    @keyframes pmFly {
        0%, 100% {
            transform: translate3d(0, 0, 0);
        }
        50% {
            transform: translate3d(0, -7px, 0);
        }
    }

    @keyframes pmWhatsAppFloat {
        0%, 100% {
            transform: translate3d(0, 0, 0);
        }
        50% {
            transform: translate3d(0, -5px, 0);
        }
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .hero-visual,
    .browser-mockup,
    .email-mockup,
    .app-mockup,
    .number-mark,
    .pm-badge,
    .domain-badge,
    .hero-badge,
    .hero .btn-primary,
    .hero .cta-primary,
    .hero a[href*="#acquisition"],
    .whatsapp-float,
    .pm-visible .value-card,
    .pm-visible .benefit-card,
    .hero-shape,
    .hero-ring,
    .hero-orbit,
    .decorative-ring,
    .decorative-shape {
        animation: none !important;
        transform: none !important;
    }
}