/* Dreamztrack — Powder Glass brand (light) */
:root{
  --ink:#22314d;--muted:#566784;--faint:#8996ad;
  --brand:#5f87c4;--deep:#3f68a8;--soft:#eef4fc;--mist:#dbe7f6;
  --line:rgba(95,135,196,.2);
  --grad:linear-gradient(135deg,#7fa3da 0%,#5a84c1 55%,#3f68a8 100%);
  --wa:#25d366;--r:26px;
  --shadow:0 24px 50px -28px rgba(63,104,168,.45);
  --head:"Sora","Noto Sans SC",system-ui,sans-serif;--body:"Inter","Noto Sans SC",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:#fff;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5,h6{font-family:var(--head);line-height:1.2;letter-spacing:-.02em;color:var(--ink)}
.wrap{width:min(1180px,100% - 40px);margin-inline:auto}
section{position:relative;padding:96px 0}
p a,li a,.ans a{color:var(--deep);border-bottom:1px dashed rgba(63,104,168,.5)}
p a:hover,.ans a:hover{color:var(--ink)}

/* ---------- backdrop ---------- */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:
  radial-gradient(760px 640px at -4% 46%,rgba(170,195,230,.5),transparent 68%),
  radial-gradient(900px 620px at 104% 2%,rgba(176,199,232,.55),transparent 66%),
  radial-gradient(820px 640px at 102% 100%,rgba(176,199,232,.5),transparent 66%),#fff}
.bg::before,.bg::after{content:"";position:absolute;inset:0;background-repeat:no-repeat;pointer-events:none}
.bg::before{background-image:url(img/net-a.svg),url(img/net-c.svg);background-position:left -40px top -30px,left -50px bottom -40px;background-size:min(34vw,420px),min(30vw,380px)}
.bg::after{background-image:url(img/net-b.svg),url(img/brand-ring.svg);background-position:right -40px top -30px,right 3vw bottom 4vh;background-size:min(34vw,430px),min(24vw,320px)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border-radius:999px;font-weight:600;font-size:15px;border:0;cursor:pointer;font-family:var(--body);transition:transform .25s,box-shadow .25s,background .25s}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 14px 28px -12px rgba(63,104,168,.75)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 34px -12px rgba(63,104,168,.85)}
.btn-ghost{background:rgba(255,255,255,.85);border:1px solid var(--line);color:var(--ink)}
.btn-ghost:hover{background:#fff;border-color:var(--brand);transform:translateY(-2px)}
.btn svg{width:18px;height:18px}

/* ---------- header ---------- */
.hdr{position:fixed;top:14px;left:0;right:0;z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:10px 12px 10px 24px;border-radius:999px;background:rgba(255,255,255,.82);border:1px solid var(--line);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 14px 34px -20px rgba(63,104,168,.5)}
.nav .logo img{height:30px;width:auto}
.nav ul{display:flex;gap:2px;list-style:none}
.nav ul>li>a{display:block;padding:9px 16px;border-radius:999px;font-size:14.5px;font-weight:500;color:var(--muted);transition:.2s}
.nav ul>li>a:hover,.nav ul>li>a.on{background:rgba(95,135,196,.12);color:var(--deep)}
.has-drop{position:relative}
.drop{position:absolute;top:calc(100% + 10px);left:0;min-width:210px;padding:8px;border-radius:20px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(-6px);transition:.2s}
.has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:none}
.drop a{display:block;padding:10px 14px;border-radius:14px;font-size:14.5px;color:var(--muted);white-space:nowrap}
.drop a:hover{background:var(--soft);color:var(--deep)}
.nav-r{display:flex;align-items:center;gap:10px}
.lang{display:flex;padding:3px;border-radius:999px;background:rgba(95,135,196,.1);font-size:12px;font-weight:700}
.lang a{padding:5px 11px;border-radius:999px;color:var(--faint)}
.lang a.on{background:#fff;color:var(--deep);box-shadow:0 2px 6px rgba(63,104,168,.2)}
.nav .btn{padding:10px 20px;font-size:14px}
.burger{display:none;width:42px;height:42px;border-radius:50%;border:0;background:rgba(95,135,196,.12);color:var(--ink);cursor:pointer}
.burger svg{width:22px;height:22px;margin:auto}
.mm{display:none;position:fixed;top:84px;left:16px;right:16px;padding:14px;border-radius:26px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);flex-direction:column;gap:2px;z-index:49;max-height:calc(100vh - 100px);overflow:auto}
.mm.open{display:flex}
.mm a{padding:12px 16px;border-radius:14px;color:var(--muted);font-weight:500}
.mm a:hover{background:var(--soft);color:var(--deep)}
.mm .lbl{padding:12px 16px 2px;font-size:12px;color:var(--faint);font-weight:700}
.mm .sub{padding-left:32px;font-size:14.5px}
.mm .ct{display:flex;flex-wrap:wrap;gap:6px 16px;padding:10px 16px 4px;border-top:1px solid var(--line);margin-top:8px;font-size:14px}
.mm .ct a{padding:4px 0;color:var(--deep)}

/* ---------- hero ---------- */
.hero{padding:190px 0 70px;text-align:center;overflow:hidden}
.hero::before{content:"";position:absolute;left:50%;top:-44%;width:1700px;height:1700px;margin-left:-850px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,transparent 0 40%,rgba(143,176,222,.22) 40.2%,transparent 41% 52%,rgba(143,176,222,.17) 52.2%,transparent 53% 64%,rgba(143,176,222,.12) 64.2%,transparent 65%),radial-gradient(circle,rgba(190,210,240,.55) 0,rgba(190,210,240,.16) 45%,transparent 62%);animation:breathe 9s ease-in-out infinite}
.hero::after{content:"";position:absolute;left:50%;top:-30%;width:1300px;height:1300px;margin-left:-650px;border-radius:50%;pointer-events:none;filter:blur(40px);opacity:.5;
  background:conic-gradient(from 0deg,transparent 0,rgba(125,161,216,.5) 18%,transparent 36%,rgba(176,199,232,.55) 62%,transparent 80%);animation:spin 26s linear infinite}
@keyframes breathe{50%{transform:scale(1.05)}}
@keyframes spin{to{transform:rotate(360deg)}}
.hero .wrap{position:relative;z-index:2}
.hero h1{font-size:clamp(36px,6vw,72px);font-weight:700;max-width:960px;margin:0 auto 24px}
.hero h1 .w{display:inline-block;opacity:0;transform:translateY(24px);filter:blur(8px);animation:wordin .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i) * 70ms + 150ms)}
@keyframes wordin{to{opacity:1;transform:none;filter:none}}
.hero .lead{max-width:760px;margin:0 auto 34px;font-size:18px;color:var(--muted)}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.orbit{position:absolute;inset:0;z-index:1;pointer-events:none}
.od{position:absolute;width:var(--s,110px);height:var(--s,110px);display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.94);border:1px solid var(--line);
  box-shadow:0 24px 44px -20px rgba(63,104,168,.6),inset 0 0 0 7px rgba(255,255,255,.7),0 0 0 10px rgba(255,255,255,.35);animation:float var(--t,7s) ease-in-out infinite;animation-delay:var(--dl,0s);transition:translate .35s cubic-bezier(.2,.8,.2,1)}
.od img{width:60%;height:60%;object-fit:contain}
.od.g{background:var(--grad)}.od.g img{width:46%;height:46%}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-16px) rotate(3deg)}}
.od1{--s:120px;--t:7s;left:5%;top:19%}.od2{--s:150px;--t:8.5s;--dl:-2s;left:11%;top:46%}.od3{--s:84px;--t:6s;--dl:-1s;left:2%;top:62%}.od4{--s:104px;--t:7.5s;--dl:-3s;left:17%;top:78%}
.od5{--s:104px;--t:6.5s;--dl:-1.5s;right:14%;top:13%}.od6{--s:150px;--t:8s;--dl:-4s;right:6%;top:38%}.od7{--s:96px;--t:7s;--dl:-2.5s;right:17%;top:70%}.od8{--s:76px;--t:5.5s;--dl:-.5s;right:2%;top:72%}

.strip{overflow:hidden;padding:24px 0 8px;mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.strip .track{display:flex;gap:18px;width:max-content;animation:marq 60s linear infinite}
.strip:hover .track{animation-play-state:paused}
.strip figure{flex:none;width:250px;height:300px;border-radius:28px;display:grid;place-items:center;padding:20px;background:var(--grad);box-shadow:0 22px 40px -22px rgba(63,104,168,.75),inset 0 1px 0 rgba(255,255,255,.4);transition:transform .4s}
.strip figure:nth-child(even){margin-top:28px;background:linear-gradient(135deg,#a2bde6,#6f95d1)}
.strip figure:hover{transform:translateY(-8px)}
.strip img{max-height:100%;object-fit:contain}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- headings ---------- */
.sec-h{max-width:820px;margin:0 auto 46px;text-align:center}
.sec-h h2,.h2{font-size:clamp(28px,4vw,46px);font-weight:700}
.sec-h p{margin-top:16px;color:var(--muted);font-size:17px}
.grad{background:linear-gradient(100deg,#22314d,#3f68a8 40%,#7fa3da 70%,#3f68a8);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- 3-in-1 ---------- */
.three{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:46px}
.three h2{font-size:clamp(28px,4vw,46px);font-weight:700}
.three p{color:var(--muted);font-size:17px;margin-bottom:24px}
.three .acts{display:flex;gap:12px;flex-wrap:wrap}
.vis{max-width:1040px;margin:0 auto 50px;position:relative}
.vis img{width:100%;filter:drop-shadow(0 30px 50px rgba(63,104,168,.3))}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{display:flex;flex-direction:column;padding:34px 30px;border-radius:var(--r);background:rgba(255,255,255,.9);border:1px solid var(--line);box-shadow:var(--shadow);transition:transform .35s}
.card:hover{transform:translateY(-8px)}
.card .ic{width:104px;height:104px;border-radius:30px;display:grid;place-items:center;background:linear-gradient(135deg,#fff,var(--soft));border:1px solid var(--line);margin-bottom:24px}
.card .ic img{width:80px;height:80px;object-fit:contain}
.card h3{font-size:24px;margin-bottom:10px}
.card p{color:var(--muted);flex:1}
.card .more{margin-top:24px;font-weight:600;color:var(--deep);display:inline-flex;gap:8px;align-items:center}
.card .more svg{width:16px;transition:transform .2s}.card:hover .more svg{transform:translateX(4px)}

/* ---------- coming soon tabs ---------- */
.tabs{display:inline-flex;padding:6px;gap:4px;border-radius:999px;background:rgba(255,255,255,.9);border:1px solid var(--line);margin:34px 0 46px}
.tab{border:0;background:none;font:inherit;font-weight:600;font-size:15px;padding:12px 26px;border-radius:999px;cursor:pointer;color:var(--muted);transition:.25s}
.tab.on{background:var(--grad);color:#fff;box-shadow:0 10px 22px -10px rgba(63,104,168,.8)}
.panel{display:none;text-align:left}.panel.on{display:grid;grid-template-columns:1fr 1.1fr;gap:30px;align-items:start;animation:pop .5s}
@keyframes pop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.panel-h{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.panel-h .ic{flex:none;width:56px;height:56px;border-radius:18px;background:var(--grad);display:grid;place-items:center}
.panel-h .ic img{width:30px}
.panel-h h3{font-size:clamp(24px,3vw,34px)}
.panel-h p{color:var(--muted);margin-top:4px}
.feats{display:flex;flex-direction:column;gap:10px}
.feat{display:flex;gap:16px;align-items:flex-start;width:100%;text-align:left;padding:16px 18px;border-radius:20px;border:1px solid transparent;background:none;font:inherit;color:inherit;cursor:pointer;transition:.25s}
.feat:hover{background:rgba(255,255,255,.7)}
.feat.on{background:#fff;border-color:var(--line);box-shadow:var(--shadow)}
.feat .fi{flex:none;width:46px;height:46px;border-radius:14px;background:var(--grad);display:grid;place-items:center}
.feat .fi img{width:26px;height:26px;object-fit:contain}
.feat h4{font-size:17px;margin-bottom:2px}
.feat p{font-size:14.5px;color:var(--muted)}
.stage{position:sticky;top:110px;min-height:440px;padding:22px;border-radius:var(--r);background:var(--grad);display:grid;place-items:center;box-shadow:var(--shadow);overflow:hidden}
.stage img{max-height:520px;width:auto;transition:opacity .3s}
.stage::before{content:"";position:absolute;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.35),transparent 65%)}
.stage img{position:relative}

/* ---------- trust ---------- */
.trust{display:grid;grid-template-columns:1fr 1.2fr;gap:50px;align-items:center;padding:52px;border-radius:32px;background:rgba(255,255,255,.9);border:1px solid var(--line);box-shadow:var(--shadow)}
.trust .cert{display:flex;flex-direction:column;align-items:center;gap:8px}
.trust .md-logo{width:56%;max-width:230px}
.md-vis{position:relative;width:100%;padding-bottom:26px}
.md-vis .col{width:100%;filter:drop-shadow(0 20px 36px rgba(63,104,168,.3))}
.md-vis .crt{position:absolute;right:-3%;bottom:0;width:34%;border-radius:10px;transform:rotate(5deg);box-shadow:0 18px 36px -10px rgba(34,49,77,.5);transition:transform .4s}
.md-vis:hover .crt{transform:rotate(0) scale(1.3) translate(-12%,-10%)}
.trust h2{font-size:clamp(26px,3.4vw,40px);margin-bottom:18px}
.trust h3{font-size:clamp(20px,2.4vw,28px);font-weight:600;color:var(--deep);margin-bottom:14px}
.trust p{color:var(--muted);font-size:16.5px}
.clients{margin-top:30px;padding:36px;border-radius:30px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);text-align:center}
.clients .win{height:520px;overflow:hidden;mask-image:linear-gradient(transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 10%,#000 90%,transparent)}
.clients img{margin:0 auto;max-width:900px;width:100%;animation:scrl 45s ease-in-out infinite alternate;filter:invert(1) grayscale(1) contrast(1.1);opacity:.62}
.clients img.m{display:none}
.clients .win:hover img{animation-play-state:paused}
@keyframes scrl{to{transform:translateY(calc(-100% + 520px))}}

/* ---------- faq ---------- */
.faq{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq details{border-radius:22px;background:rgba(255,255,255,.92);border:1px solid var(--line);box-shadow:0 10px 26px -20px rgba(63,104,168,.5);transition:background .25s,border-color .25s}
.faq details[open]{background:linear-gradient(135deg,#f1f6ff,#fff);border-color:rgba(95,135,196,.4)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:20px 24px;font-weight:600;font-size:16.5px;font-family:var(--head)}
.faq summary::-webkit-details-marker{display:none}
.faq .pm{margin-left:auto;flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:20px;line-height:1;transition:.3s;font-family:var(--body)}
.faq details[open] .pm{transform:rotate(45deg);background:var(--deep);color:#fff;border-color:transparent}
.faq .ans{padding:0 24px 22px;color:var(--muted);font-size:15.5px}
.faq .ans p+p{margin-top:10px}
.faq .ptr{display:block;margin-top:10px}
.faq .ask{margin-left:auto;font-family:var(--body);font-size:12.5px;font-weight:700;color:var(--deep);padding:5px 12px;border-radius:999px;background:rgba(95,135,196,.12);border:0;white-space:nowrap}
.faq .ask+.pm{margin-left:0}

/* ---------- cta ---------- */
.cta{text-align:center;padding:76px 40px;border-radius:36px;background:radial-gradient(700px 260px at 50% -40%,rgba(95,135,196,.2),transparent 70%),rgba(255,255,255,.92);border:1px solid rgba(95,135,196,.3);box-shadow:0 30px 60px -34px rgba(63,104,168,.55)}
.cta h2{font-size:clamp(28px,4.2vw,48px);margin-bottom:16px}
.cta p{max-width:760px;margin:0 auto 32px;color:var(--muted);font-size:17px}

/* ---------- footer ---------- */
footer{padding:50px 0 34px;margin-top:30px;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.85));border-top:1px solid var(--line)}
.foot{display:grid;grid-template-columns:1.4fr 1.4fr 1fr 1fr 1fr;gap:34px}
.foot img.fl{height:34px;width:auto;margin-bottom:16px}
.foot p,.foot address{color:var(--muted);font-size:14.5px;font-style:normal}
.foot h5{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:12px;font-family:var(--body);font-weight:700}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.foot a{color:var(--muted);transition:color .2s}.foot a:hover{color:var(--deep)}
.foot .ci{display:flex;flex-direction:column;gap:16px}
.social{display:flex;gap:10px;margin-top:16px}
.social a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid var(--line)}
.social a:hover{background:var(--grad);color:#fff}
.social svg{width:18px;height:18px}
.copy{text-align:center;margin-top:30px;font-size:13px;color:var(--faint)}
.wa-float{position:fixed;right:22px;bottom:22px;z-index:60;width:60px;height:60px;border-radius:50%;background:var(--wa);display:grid;place-items:center;box-shadow:0 12px 30px -6px rgba(37,211,102,.7);transition:transform .2s}
.wa-float:hover{transform:scale(1.08)}.wa-float svg{width:30px;height:30px;color:#fff}
.wa-float::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--wa);animation:ring 2.2s infinite}
@keyframes ring{from{transform:scale(1);opacity:.8}to{transform:scale(1.6);opacity:0}}

/* ---------- inner pages ---------- */
.ph{padding:180px 0 50px;text-align:center;overflow:hidden}
.ph::before{content:"";position:absolute;left:50%;top:-60%;width:1500px;height:1500px;margin-left:-750px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,transparent 0 40%,rgba(143,176,222,.2) 40.2%,transparent 41% 54%,rgba(143,176,222,.14) 54.2%,transparent 55%),radial-gradient(circle,rgba(190,210,240,.5),transparent 62%);animation:breathe 9s ease-in-out infinite}
.ph .wrap{position:relative;z-index:2}
.ph h1{font-size:clamp(34px,5.4vw,64px);font-weight:700;max-width:960px;margin:0 auto 22px}
.ph h1 .w{display:inline-block;opacity:0;transform:translateY(22px);filter:blur(8px);animation:wordin .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i) * 70ms + 120ms)}
.ph .lead{max-width:780px;margin:0 auto;color:var(--muted);font-size:18px}
.ph .od{opacity:.95}
.sp{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.sp.rev>:first-child{order:2}
.sp h2{font-size:clamp(26px,3.4vw,40px);margin-bottom:18px}
.sp p{color:var(--muted);font-size:16.5px}.sp p+p{margin-top:14px}
.sp .btn{margin-top:26px}
.media{padding:12px;border-radius:30px;background:rgba(255,255,255,.92);border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden}
.media img{width:100%;border-radius:20px}
.media.dark{background:var(--grad)}
.txt{max-width:860px;margin:0 auto;text-align:center}
.txt h2{font-size:clamp(26px,3.6vw,42px);margin-bottom:18px}
.txt p{color:var(--muted);font-size:17px}.txt p+p{margin-top:14px}
.txt ul{list-style:none;display:inline-flex;flex-direction:column;gap:8px;margin-top:16px;text-align:left;color:var(--muted)}
.txt li::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--brand);margin-right:12px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.gc{padding:32px 28px;border-radius:var(--r);background:rgba(255,255,255,.92);border:1px solid var(--line);box-shadow:var(--shadow);transition:transform .35s;overflow:hidden}
.gc:hover{transform:translateY(-6px)}
.gc .gi{width:68px;height:68px;border-radius:20px;background:var(--grad);display:grid;place-items:center;margin-bottom:20px;box-shadow:0 12px 24px -12px rgba(63,104,168,.8)}
.gc .gi img{width:38px;height:38px;object-fit:contain}
.gc .gm{margin:-10px -6px 18px;border-radius:20px;overflow:hidden;background:var(--soft)}
.gc .gm img{width:100%;aspect-ratio:4/3;object-fit:cover}
.gc h3{font-size:20px;margin-bottom:8px}
.gc p{color:var(--muted);font-size:15.5px}
.gal{display:flex;gap:16px;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);margin-top:34px}
.gal .track{display:flex;gap:16px;animation:marq 50s linear infinite;width:max-content}
.gal img{height:230px;width:auto;border-radius:20px;box-shadow:0 14px 28px -16px rgba(63,104,168,.6)}
.news{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.post{display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;background:rgba(255,255,255,.94);border:1px solid var(--line);box-shadow:var(--shadow);transition:transform .35s}
.post:hover{transform:translateY(-8px)}
.post .th{aspect-ratio:16/10;overflow:hidden;background:var(--mist)}
.post .th img{width:100%;height:100%;object-fit:cover;transition:transform .6s}.post:hover .th img{transform:scale(1.06)}
.post .bd{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.post h2{font-size:18px;line-height:1.45;flex:1;margin-bottom:16px}
.post .rm{font-weight:600;color:var(--deep);font-size:14.5px}
.legal{max-width:880px;margin:0 auto;padding:50px;border-radius:32px;background:rgba(255,255,255,.94);border:1px solid var(--line);box-shadow:var(--shadow)}
.legal h2{font-size:21px;margin:34px 0 10px;display:flex;align-items:center;gap:12px}
.legal h2::before{content:"";width:4px;height:22px;border-radius:4px;background:var(--grad)}
.legal p,.legal li{color:var(--muted);margin-bottom:10px}
.legal ul{margin:6px 0 10px 22px}
.legal>p:first-child{color:var(--ink);font-size:17px;padding-bottom:24px;margin-bottom:10px;border-bottom:1px solid var(--line)}

/* ---------- pricing ---------- */
.pt{display:flex;gap:18px;align-items:center;justify-content:center;flex-wrap:wrap;margin:6px 0 40px}
.pt .lb{font-weight:600;color:var(--faint);transition:color .2s}
body:not(.yr) .pt .m,body.yr .pt .y{color:var(--ink)}
.sw{position:relative;width:54px;height:30px}
.sw input{opacity:0;position:absolute;inset:0;width:100%;height:100%;cursor:pointer;z-index:2}
.sw span{position:absolute;inset:0;border-radius:999px;background:rgba(95,135,196,.25);transition:.25s}
.sw span::before{content:"";position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(34,49,77,.3);transition:.25s}
.sw input:checked+span{background:var(--grad)}.sw input:checked+span::before{transform:translateX(24px)}
.save{font-size:12.5px;font-weight:700;padding:5px 12px;border-radius:999px;background:rgba(95,135,196,.14);color:var(--deep)}
.tw{overflow-x:auto;border-radius:30px;background:rgba(255,255,255,.94);border:1px solid var(--line);box-shadow:var(--shadow)}
.pt-t{width:100%;min-width:760px;border-collapse:separate;border-spacing:0}
.pt-t th,.pt-t td{padding:16px 18px;text-align:center;border-bottom:1px solid rgba(95,135,196,.12)}
.pt-t td:first-child,.pt-t th:first-child{text-align:left;font-weight:600;min-width:210px}
.pt-t thead th{vertical-align:top;padding:34px 18px 28px;border-bottom:1px solid var(--line)}
.pt-t thead h3{font-size:22px;margin-bottom:6px}
.pt-t thead .d{font-size:13.5px;color:var(--muted);font-weight:400;min-height:60px}
.pt-t .price{font-family:var(--head);font-size:26px;font-weight:700;margin-top:12px;color:var(--ink)}
.pt-t .price small{font-size:13px;color:var(--muted);font-weight:500}
.pt-t .fee{font-size:13px;font-weight:600;color:var(--deep);margin-top:6px}
.pt-t .tax{font-size:12px;color:var(--faint);font-weight:400}
.pt-t thead .btn{margin-top:14px;padding:11px 22px;font-size:14px}
.pt-t col.hl,.pt-t .hl{background:linear-gradient(180deg,rgba(95,135,196,.1),rgba(95,135,196,.03))}
.y{color:var(--deep);font-weight:800}.n{color:rgba(34,49,77,.25)}
.price .mo,.price .yr{display:none}
body:not(.yr) .price .mo,body.yr .price .yr{display:block}
.addons{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.ad{display:flex;flex-direction:column;padding:28px;border-radius:var(--r);background:rgba(255,255,255,.94);border:1px solid var(--line);box-shadow:var(--shadow)}
.ad h3{font-size:18px;margin-bottom:8px}.ad p{color:var(--muted);font-size:15px;flex:1}
.ad .am{margin-top:18px;font-family:var(--head);font-size:26px;font-weight:700}
.ad .am small{display:block;font-family:var(--body);font-size:13px;color:var(--faint);font-weight:500}
.cust{margin-top:60px;text-align:center}
.cust h2{font-size:clamp(26px,3.6vw,40px);margin-bottom:14px}.cust p{max-width:700px;margin:0 auto 24px;color:var(--muted)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}.rv.in{opacity:1;transform:none}

@media (max-width:1100px){.od3,.od4,.od7,.od8{display:none}.od1{--s:96px;left:3%}.od2{--s:116px;left:4%}.od5{--s:88px;right:4%}.od6{--s:116px;right:3%}
  .foot{grid-template-columns:1fr 1fr 1fr}.foot>:nth-child(1),.foot>:nth-child(2){grid-column:span 3}.cards,.grid,.news,.addons{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){.nav ul,.nav .btn,.nav .lang{display:none}.burger{display:grid}
  .three,.panel.on,.trust,.sp{grid-template-columns:1fr}.sp.rev>:first-child{order:0}.stage{position:relative;top:0;min-height:0;order:-1}.stage img{max-height:360px}
  section{padding:70px 0}.hero{padding-top:150px}.ph{padding-top:140px}.trust{padding:28px}.legal{padding:28px 22px}.clients img{animation:none}.clients .win{height:auto}}
@media (max-width:640px){.cards,.grid,.news,.addons{grid-template-columns:1fr}.foot{grid-template-columns:1fr 1fr}.foot>:nth-child(1),.foot>:nth-child(2){grid-column:span 2}
  .od{--s:62px!important;opacity:.55}.od2,.od6{top:7%!important}.strip figure{width:190px;height:240px}.hero::before{width:1100px;height:1100px;margin-left:-550px}
  .clients img.d{display:none}.clients img.m{display:block}.cta{padding:52px 22px}.bg::before{background-size:60vw,50vw}.bg::after{background-size:60vw,46vw}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv,.hero h1 .w,.ph h1 .w{opacity:1;transform:none;filter:none}}

/* logo is a white PNG: tint to brand ink on light surfaces */
.nav .logo img,.foot img.fl{filter:brightness(0) saturate(100%) invert(24%) sepia(25%) saturate(1400%) hue-rotate(185deg) brightness(95%)}
.nav .logo img{height:28px}
.trust .md-logo{width:auto;max-width:280px;padding:16px 26px;border-radius:22px;background:var(--grad);box-shadow:0 14px 28px -14px rgba(63,104,168,.8)}

/* ================= HERO: hand + phone auto-reply ================= */
.hero.hs{text-align:left;padding:150px 0 50px}
.hs-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:20px;align-items:center}
.hs .hl h1{margin:0 0 24px;max-width:none;font-size:clamp(38px,5.2vw,68px)}
.hs .hl .lead{margin:0;max-width:560px}
.scene{position:relative;width:400px;height:600px;margin:0 auto;justify-self:center}
.halo{position:absolute;left:50%;top:48%;width:440px;height:440px;margin:-220px 0 0 -220px;border-radius:50%;background:radial-gradient(circle,rgba(143,176,222,.55),rgba(143,176,222,.16) 55%,transparent 70%);animation:breathe 7s ease-in-out infinite}
.hand-wrap{position:absolute;inset:0;animation:handin 1.5s cubic-bezier(.2,.9,.25,1) both,idle 6s ease-in-out 1.6s infinite}
@keyframes handin{0%{transform:translate(150px,520px) rotate(16deg);opacity:0}25%{opacity:1}100%{transform:none;opacity:1}}
@keyframes idle{50%{transform:translateY(-10px) rotate(-1deg)}}
.hand-back,.hand-front{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 14px 18px rgba(34,49,77,.22))}
.hand-front{pointer-events:none}
.phone{position:absolute;left:72px;top:14px;width:238px;height:480px;padding:9px;border-radius:40px;background:linear-gradient(160deg,#2a3a5c,#16213a);box-shadow:0 30px 50px -20px rgba(34,49,77,.6),inset 0 0 0 2px rgba(255,255,255,.12);transform:rotate(-5deg);transform-origin:50% 100%}
.phone::before{content:"";position:absolute;top:14px;left:50%;width:70px;height:18px;margin-left:-35px;border-radius:12px;background:#0d1426;z-index:3}
.screen{position:relative;height:100%;border-radius:32px;background:linear-gradient(180deg,#f4f8ff,#fff 40%);overflow:hidden;display:flex;flex-direction:column;font-family:var(--body)}
.sb{display:flex;justify-content:space-between;align-items:center;padding:12px 20px 4px;font-size:11px;font-weight:700;color:var(--ink)}
.sb i{width:18px;height:8px;border-radius:3px;border:1.5px solid var(--ink);position:relative}
.chd{display:flex;align-items:center;gap:9px;padding:20px 12px 10px;margin-top:6px;border-bottom:1px solid var(--line);background:#fff}
.chd .av{flex:none;width:32px;height:32px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px}
.chd .who{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.chd b{font-size:12.5px;font-family:var(--head)}
.chd small{font-size:10px;color:var(--muted);display:flex;align-items:center;gap:5px}
.chd small em{width:6px;height:6px;border-radius:50%;background:var(--wa)}
.chd .badge{margin-left:auto;width:26px;height:26px;flex:none;transition:transform .4s}
.chd .badge svg{width:100%;height:100%}
.msgs{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:7px;padding:10px 10px 8px;overflow:hidden}
.msgs .m{max-width:86%;padding:8px 11px;border-radius:14px;font-size:11.5px;line-height:1.45;animation:mpop .35s cubic-bezier(.2,.9,.3,1.2) both}
.msgs .m.in{align-self:flex-start;background:var(--soft);color:var(--ink);border-bottom-left-radius:4px;border:1px solid var(--line)}
.msgs .m.out{align-self:flex-end;background:var(--grad);color:#fff;border-bottom-right-radius:4px}
.msgs .m.ty{display:flex;gap:4px;padding:11px 13px}
.msgs .m.ty i{width:6px;height:6px;border-radius:50%;background:var(--brand);animation:blink 1.1s infinite}
.msgs .m.ty i:nth-child(2){animation-delay:.18s}.msgs .m.ty i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
@keyframes mpop{from{opacity:0;transform:translateY(10px) scale(.92)}to{opacity:1;transform:none}}
.inp{display:flex;align-items:center;justify-content:space-between;margin:0 10px 12px;padding:6px 6px 6px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:11px;color:var(--faint)}
.inp i{width:26px;height:26px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center}
.inp svg{width:13px;height:13px}
/* channel logos */
.ch{position:absolute;z-index:4;width:62px;height:62px;border-radius:20px;background:#fff;padding:8px;box-shadow:0 18px 30px -14px rgba(63,104,168,.6);opacity:0;animation:chin .7s cubic-bezier(.2,.9,.3,1.3) forwards,float 7s ease-in-out infinite;transition:scale .4s,box-shadow .4s}
.ch svg{width:100%;height:100%}
.c-whatsapp{left:-6px;top:90px;animation-delay:1.7s,1.7s}
.c-telegram{right:-4px;top:40px;width:56px;height:56px;animation-delay:1.9s,2.3s}
.c-messenger{left:6px;top:380px;width:58px;height:58px;animation-delay:2.1s,1s}
.c-instagram{right:6px;top:470px;animation-delay:2.3s,3s}
.ch.live{scale:1.22;box-shadow:0 0 0 6px rgba(95,135,196,.22),0 22px 36px -12px rgba(63,104,168,.8)}
@keyframes chin{from{opacity:0;transform:scale(.3) translateY(20px)}to{opacity:1;transform:none}}
@media (max-width:1000px){.hs-grid{grid-template-columns:1fr}.hs .hl{text-align:center}.hs .hl .lead{margin:0 auto}.scene{margin-top:10px}}
@media (max-width:480px){.scene{transform:scale(.82);transform-origin:top center;height:500px;width:100%;max-width:400px}.hs .hl h1{font-size:36px}}
@media (prefers-reduced-motion:reduce){.hand-wrap,.halo{animation:none}.ch{opacity:1}}

/* phone only (no hand) */
.phone{left:81px;top:60px;transform:rotate(-4deg);transform-origin:50% 60%}
.hand-wrap{animation:phonein 1.3s cubic-bezier(.2,.9,.25,1) both,idle 6s ease-in-out 1.4s infinite}
@keyframes phonein{0%{transform:translateY(120px) rotate(6deg);opacity:0}100%{transform:none;opacity:1}}
.c-whatsapp{top:120px}.c-telegram{top:70px}.c-messenger{top:400px}.c-instagram{top:455px}

/* bigger phone */
.scene{zoom:1.3}
.hs-grid{grid-template-columns:1fr 1fr}
@media (max-width:1180px){.scene{zoom:1.12}}
@media (max-width:1000px){.scene{zoom:1.2}}
@media (max-width:480px){.scene{zoom:.85;transform:none;height:600px;width:400px}}

/* =====================================================================
   BENTO LAYOUT — rounded tiles on a pale canvas (Nordea-style, brand colours)
   ===================================================================== */
:root{--canvas:#eef3fa;--tile:#fff;--chip:#f3f7fd;--tr:44px}
body{background:var(--canvas)}
.bg{background:var(--canvas)}.bg::before,.bg::after{display:none}
main{padding:0 14px}
main>section:not(.hero):not(.ph){padding:7px 0}
main>section:not(.hero):not(.ph)>.wrap{width:100%;max-width:1480px;background:var(--tile);border-radius:var(--tr);padding:72px 64px;box-shadow:0 1px 0 rgba(95,135,196,.08)}
main>section>.wrap:has(>.cta){background:none;padding:0;box-shadow:none}
main>section:not(.hero):not(.ph)>.wrap>.sec-h,main>section>.wrap>.txt{margin-top:0}
.strip{margin:7px -14px;padding:14px 0}

/* inner cards turn into soft chips inside tiles */
.card,.gc,.post,.ad,.faq details,.feat.on,.panel .tabs,.clients{background:var(--chip);border-color:transparent;box-shadow:none}
.card:hover,.gc:hover,.post:hover{box-shadow:0 26px 44px -26px rgba(63,104,168,.55);background:#fff}
.faq details[open]{background:linear-gradient(135deg,#e8f0fc,#f6f9fe)}
.tabs{background:var(--chip);border-color:transparent}
.tab.on{box-shadow:0 10px 22px -10px rgba(63,104,168,.8)}
.trust{background:none;border:0;box-shadow:none;padding:0}
.clients{margin-top:44px}
.media{background:var(--chip);border-color:transparent;box-shadow:none}
.cta{background:radial-gradient(900px 340px at 50% -30%,rgba(255,255,255,.8),transparent 70%),linear-gradient(160deg,#dfeafa,#b7cff0);border:0;box-shadow:none;border-radius:var(--tr);padding:96px 40px}
.tw{background:var(--chip);border-color:transparent;box-shadow:none}
.legal{background:none;border:0;box-shadow:none;padding:0}
footer{background:none;border:0;padding:7px 14px 28px;margin:0}
footer .wrap{width:100%;max-width:1480px;background:var(--tile);border-radius:var(--tr);padding:56px 64px 30px}

/* inner-page hero card */
.ph{margin:14px 14px 7px;padding:150px 20px 80px;border-radius:var(--tr);background:radial-gradient(900px 500px at 50% 120%,rgba(255,255,255,.7),transparent 70%),linear-gradient(165deg,#e6effb 0%,#c9dcf3 60%,#adc7ec 100%)}
.ph::before{display:none}
.ph::after{content:"DREAMZTRACK";position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);font:700 clamp(50px,12.4vw,210px)/1 var(--head);letter-spacing:-.05em;color:rgba(255,255,255,.5);white-space:nowrap;pointer-events:none}
.ph .orbit{display:none}
.ph .wrap{z-index:2}

/* home hero card */
.hero.hc{padding:14px 14px 7px;text-align:center;overflow:visible}
.hero.hc::before,.hero.hc::after{display:none}
.hc-card{position:relative;overflow:hidden;border-radius:var(--tr);min-height:940px;padding:150px 24px 0;display:flex;flex-direction:column;align-items:center;
  background:radial-gradient(1000px 560px at 50% 105%,rgba(255,255,255,.8),transparent 70%),radial-gradient(700px 500px at 0% 20%,rgba(255,255,255,.55),transparent 70%),linear-gradient(165deg,#e8f0fc 0%,#c8dbf3 55%,#a6c2ea 100%)}
.hc-card::before{content:"DREAMZTRACK";position:absolute;left:50%;top:6%;transform:translateX(-50%);font:700 clamp(60px,12.4vw,210px)/1 var(--head);letter-spacing:-.05em;color:rgba(255,255,255,.5);white-space:nowrap;pointer-events:none}
.hc-in{position:relative;z-index:3;max-width:920px}
.hc-in h1{font-size:clamp(34px,5vw,66px);margin:0 auto 18px;max-width:none}
.hc-in .lead{font-size:17px;max-width:720px;margin:0 auto;color:var(--muted)}
.hc .scene{zoom:1.12;margin-top:38px;margin-bottom:-300px;z-index:2;flex:none}
.hc .halo{display:none}
.hc-lbl{position:absolute;bottom:30px;z-index:4;font-weight:600;font-size:18px;color:var(--ink);opacity:.8}
.hc-lbl.l{left:38px}.hc-lbl.r{right:38px}
/* glass widgets */
.gw{position:absolute;z-index:3;padding:18px 20px;border-radius:24px;background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.8);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 24px 40px -24px rgba(63,104,168,.6);animation:float 8s ease-in-out infinite;min-width:200px;text-align:left}
.gw small{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:12px}
.gw1{left:9%;top:52%}.gw2{left:15%;top:72%;animation-delay:-2.5s}.gw3{right:9%;top:56%;animation-delay:-4s}
.tyd{display:flex;gap:6px;margin-bottom:12px}.tyd i{width:9px;height:9px;border-radius:50%;background:var(--brand);animation:blink 1.1s infinite}.tyd i:nth-child(2){animation-delay:.18s}.tyd i:nth-child(3){animation-delay:.36s}
.sk b{display:block;height:8px;border-radius:6px;background:rgba(95,135,196,.28);margin-top:7px}.sk b:last-child{width:62%}
.mb{display:flex;align-items:flex-end;gap:7px;height:62px}
.mb i{flex:1;height:var(--h);border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#7fa3da,rgba(95,135,196,.35));transform-origin:bottom;animation:bar 3.2s ease-in-out infinite}
.mb i:nth-child(2n){animation-delay:-.8s}.mb i:nth-child(3n){animation-delay:-1.6s}
@keyframes bar{50%{transform:scaleY(.62)}}
.pg{height:10px;border-radius:8px;background:rgba(95,135,196,.22);overflow:hidden}
.pg i{display:block;height:100%;width:0;border-radius:8px;background:linear-gradient(90deg,#7fa3da,#3f68a8);animation:fill 4s ease-in-out infinite}
@keyframes fill{0%{width:0}70%,100%{width:100%}}
.ck{margin-top:10px;font-size:15px;font-weight:700;color:var(--wa);text-align:right;letter-spacing:-2px}

/* big faint stats */
.stats-s{padding:7px 0}
.stats-s>.wrap{width:100%;max-width:1480px;background:var(--tile);border-radius:var(--tr);padding:56px 64px 48px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:center}
.stats b{display:block;font:700 clamp(56px,8.2vw,140px)/1 var(--head);letter-spacing:-.05em;color:rgba(95,135,196,.2)}
.stats span{display:block;margin-top:6px;font-size:18px;color:var(--muted)}

@media (max-width:1100px){.gw1{left:3%}.gw2{display:none}.gw3{right:3%}.gw{min-width:170px}}
@media (max-width:900px){main>section:not(.hero):not(.ph)>.wrap,footer .wrap,.stats-s>.wrap{padding:44px 24px;border-radius:32px}.hc-card{min-height:0;padding-top:130px;border-radius:32px}.gw{display:none}.hc-lbl{display:none}.hc .scene{margin-bottom:-240px}.stats{grid-template-columns:1fr}.stats b{font-size:90px}.cta{padding:60px 22px}}
@media (max-width:480px){.hc .scene{zoom:.8;margin-bottom:-200px}.ph{padding-top:130px;border-radius:32px}}

/* =====================================================================
   CLEAN v5 — calm white layout, neat header, one highlight per heading
   (overrides the earlier bento / wordmark / widget styling)
   ===================================================================== */
:root{--blue:#2f5fb3}
body{background:#fff}
.bg{background:radial-gradient(900px 520px at 100% 0,rgba(176,199,232,.28),transparent 70%),radial-gradient(800px 520px at 0 60%,rgba(176,199,232,.16),transparent 70%),#fff}
.hl2{color:var(--blue)}
.nav li a,.mm a,.drop a,.foot li a,.card a{border-bottom:0}

/* header: one neat bar */
.hdr{top:0;background:rgba(255,255,255,.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.hdr .wrap{width:min(1240px,100% - 40px)}
.nav{padding:12px 0;background:none;border:0;box-shadow:none;border-radius:0;backdrop-filter:none}
.nav .logo img{height:26px}
.nav ul{gap:6px}
.nav ul>li>a{padding:8px 14px;font-size:14.5px;border-bottom:0}
.nav ul>li>a.on{background:rgba(95,135,196,.12);color:var(--deep)}
.nav .btn{padding:10px 22px}
.mm{top:70px}

/* sections: plain, centred, generous space */
main{padding:0}
main>section:not(.hero):not(.ph){padding:88px 0}
main>section:not(.hero):not(.ph)>.wrap,.stats-s>.wrap{background:none;border-radius:0;box-shadow:none;padding:0;width:min(1180px,100% - 40px);max-width:1180px}
.stats-s{padding:30px 0 10px}
.sec-h h2,.three h2,.sp h2,.txt h2,.trust h2,.cta h2,.cust h2{font-weight:600;letter-spacing:-.025em}

/* hero: text left, whole phone right */
.hero.hr2{padding:128px 0 56px;text-align:left;overflow:visible}
.hero.hr2::before{display:block;content:"";position:absolute;right:-6%;top:50%;left:auto;width:820px;height:820px;margin:-410px 0 0;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(143,176,222,.5),rgba(143,176,222,.14) 52%,transparent 70%);animation:none;transform:none}
.hero.hr2::after{display:none}
.hr2-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:center}
.hr2 .hl h1{font-size:clamp(38px,4.8vw,64px);font-weight:600;margin:0 0 22px;max-width:none;letter-spacing:-.03em;line-height:1.12}
.hr2 .hl .lead{font-size:17.5px;margin:0;max-width:540px;color:var(--muted)}
.hr2 .scene{zoom:1.05;margin:0 auto;z-index:2}
.hr2 .halo{display:none}
@media (max-height:820px){.hr2 .scene{zoom:.9}}

/* soft white cards */
.card,.gc,.post,.ad,.faq details,.clients,.tw,.media{background:#fff;border:1px solid var(--line);box-shadow:0 22px 44px -30px rgba(63,104,168,.4)}
.card:hover,.gc:hover,.post:hover{box-shadow:0 30px 54px -28px rgba(63,104,168,.5);background:#fff}
.faq details[open]{background:linear-gradient(135deg,#f3f8ff,#fff);border-color:rgba(95,135,196,.4)}
.tabs{background:#fff;border:1px solid var(--line);box-shadow:0 12px 26px -20px rgba(63,104,168,.5)}
.feat.on{background:#fff;border-color:var(--line);box-shadow:0 18px 36px -24px rgba(63,104,168,.5)}
.trust{background:linear-gradient(135deg,#f3f8ff,#fff 60%);border:1px solid var(--line);box-shadow:0 26px 54px -34px rgba(63,104,168,.4);padding:56px}
.clients{margin-top:30px}
.cta{background:radial-gradient(800px 300px at 50% -30%,rgba(143,176,222,.45),transparent 70%),linear-gradient(180deg,#f3f8ff,#fff);border:1px solid var(--line);box-shadow:0 30px 60px -40px rgba(63,104,168,.5);padding:84px 40px}

/* stats: tidy row */
.stats{max-width:1000px;margin:0 auto}
.stats b{font-size:clamp(48px,6vw,92px);letter-spacing:-.04em;background:linear-gradient(180deg,#5f87c4,#2f5fb3);-webkit-background-clip:text;background-clip:text;color:transparent}
.stats span{font-size:16px}

/* inner page hero: simple centred title */
.ph{margin:0;border-radius:0;padding:140px 20px 40px;background:radial-gradient(700px 320px at 50% 0,rgba(176,199,232,.45),transparent 70%)}
.ph::after{display:none}
.ph .wrap{width:min(960px,100% - 40px)}
.ph h1{font-weight:600;letter-spacing:-.03em;font-size:clamp(34px,4.8vw,58px)}

/* footer */
footer{background:none;border-top:1px solid var(--line);padding:56px 0 30px;margin:0}
footer .wrap{background:none;border-radius:0;padding:0;max-width:1180px;width:min(1180px,100% - 40px)}

@media (max-width:1000px){.hr2-grid{grid-template-columns:1fr}.hero.hr2{text-align:center;padding-top:112px}.hr2 .hl .lead{margin:0 auto}.hero.hr2::before{right:50%;margin-right:-410px}.hr2 .scene{zoom:1}}
@media (max-width:900px){.nav .btn,.nav ul,.nav .lang{display:none}main>section:not(.hero):not(.ph){padding:60px 0}.trust{padding:28px}}
@media (max-width:480px){.hr2 .scene{zoom:.85}.hr2 .hl h1{font-size:36px}}

/* hero: phone in the middle, headline left, intro right */
@media (min-width:1001px){
  .hero.hr2 .wrap{width:min(1320px,100% - 40px)}
  .hr2-grid{grid-template-columns:1fr 440px 1fr;gap:36px;align-items:center}
  .hr2 .hl{display:contents}
  .hr2 .hl h1{grid-column:1;grid-row:1;font-size:clamp(36px,3.9vw,56px);margin:0}
  .hr2 .scene{grid-column:2;grid-row:1}
  .hr2 .hl .lead{grid-column:3;grid-row:1;font-size:17px;max-width:none;margin:0}
  .hero.hr2::before{right:50%;left:auto;margin-right:-410px}
}

/* hero: text left, big phone right */
@media (min-width:1001px){
  .hero.hr2{padding:104px 0 40px}
  .hero.hr2 .wrap{width:min(1240px,100% - 40px)}
  .hr2-grid{grid-template-columns:1fr 1fr;gap:20px;align-items:center}
  .hr2 .hl{display:block}
  .hr2 .hl h1{font-size:clamp(40px,4.6vw,64px);margin:0 0 24px}
  .hr2 .hl .lead{font-size:17.5px;max-width:540px}
  .hr2 .scene{zoom:1.28;justify-self:center}
  .hero.hr2::before{left:auto;right:-4%;margin:-410px 0 0}
}
@media (min-width:1001px) and (max-height:860px){.hr2 .scene{zoom:1.08}}

/* keep phrases together */
.hl2,.nw{white-space:nowrap}
h1,h2,h3{text-wrap:balance}
p,.ans,.lead{text-wrap:pretty}
.hr2 .hl h1{text-wrap:balance}
@media (max-width:520px){.hl2{white-space:normal}}

/* glass boxes around the phone */
.gb{position:absolute;z-index:5;min-width:170px;padding:14px 18px 15px;border-radius:22px;overflow:hidden;text-align:left;
  background:linear-gradient(135deg,rgba(255,255,255,.78),rgba(255,255,255,.34));border:1px solid rgba(255,255,255,.95);
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
  box-shadow:0 24px 44px -22px rgba(63,104,168,.6),inset 0 1px 0 #fff,inset 0 0 0 1px rgba(95,135,196,.08);
  opacity:0;animation:gbin .8s cubic-bezier(.2,.9,.3,1.2) forwards,float 8s ease-in-out infinite}
.gb::after{content:"";position:absolute;top:-60%;left:-70%;width:45%;height:220%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);transform:rotate(18deg);animation:sheen 5.5s ease-in-out infinite;pointer-events:none}
@keyframes sheen{0%,55%{left:-70%}100%{left:140%}}
@keyframes gbin{from{opacity:0;transform:scale(.85) translateY(16px)}to{opacity:1;transform:none}}
.gb b{display:block;font:600 26px/1.1 var(--head);letter-spacing:-.03em;color:var(--ink)}
.gb span{display:block;margin-top:3px;font-size:12.5px;color:var(--muted)}
.gb .gi{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:var(--grad);color:#fff;margin-bottom:10px;box-shadow:0 10px 18px -8px rgba(63,104,168,.8)}
.gb .gi svg{width:19px;height:19px}
.gb1{left:318px;top:150px;animation-delay:2.6s,2.6s}
.gb2{left:-132px;top:470px;animation-delay:2.9s,1s}
.gb3{left:312px;top:545px;animation-delay:3.2s,4s}
.pgb{height:7px;border-radius:6px;background:rgba(95,135,196,.22);margin-top:11px;overflow:hidden}
.pgb i{display:block;height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,#7fa3da,#3f68a8);animation:fill 4s ease-in-out infinite}
.avs{display:flex;margin-top:11px}
.avs i{width:22px;height:22px;border-radius:50%;border:2px solid #fff;margin-left:-6px;background:linear-gradient(135deg,#9fbbe4,#5a84c1)}
.avs i:first-child{margin-left:0}.avs i:nth-child(2){background:linear-gradient(135deg,#c4d8f2,#7fa3da)}.avs i:nth-child(3){background:linear-gradient(135deg,#8fb0de,#3f68a8)}.avs i:nth-child(4){background:linear-gradient(135deg,#dbe7f6,#9fbbe4)}
/* highlighter on key links in the hero intro */
.hr2 .lead a{border-bottom:0;color:var(--ink);padding:0 2px;border-radius:4px;background:linear-gradient(transparent 58%,rgba(127,163,218,.38) 0)}
.hr2 .lead a:hover{background:linear-gradient(transparent 20%,rgba(127,163,218,.5) 0)}
@media (max-width:1000px){.gb{display:none}}

/* bigger phone + tidier glass-box spacing */
@media (min-width:1001px){
  .hr2 .scene{zoom:1.42}
  .hero.hr2{padding-bottom:30px}
}
@media (min-width:1001px) and (max-height:960px){.hr2 .scene{zoom:1.3}}
@media (min-width:1001px) and (max-height:860px){.hr2 .scene{zoom:1.1}}
.c-instagram{top:395px}
.gb1{top:130px}.gb2{top:445px}.gb3{top:485px}
.gb2{left:-56px;top:478px}
.gb1{left:296px}.gb3{left:292px}

/* appointment summary bubble */
.msgs .m.sum{max-width:94%;background:linear-gradient(160deg,#f1f7ff,#fff);border:1px solid rgba(95,135,196,.35);box-shadow:0 10px 22px -14px rgba(63,104,168,.6);line-height:1.55}
.msgs .m.sum b{display:block;margin-bottom:3px;color:var(--deep);font-family:var(--head);font-size:12px}
.msgs{gap:6px}

/* hero background: brand clouds + network lines + glass ring */
.hero.hr2{background:
  url(img/net-a.svg) no-repeat left -30px top 20px/min(30vw,400px),
  url(img/net-c.svg) no-repeat left -40px bottom -60px/min(26vw,340px),
  url(img/net-b.svg) no-repeat right -30px top 10px/min(30vw,420px),
  url(img/brand-ring.svg) no-repeat right 2vw bottom -40px/min(22vw,300px),
  radial-gradient(720px 600px at -4% 50%,rgba(170,195,230,.5),transparent 70%),
  radial-gradient(900px 640px at 104% 0,rgba(176,199,232,.6),transparent 68%),
  radial-gradient(800px 620px at 100% 100%,rgba(176,199,232,.5),transparent 68%)}
@media (max-width:700px){.hero.hr2{background-size:55vw,50vw,55vw,40vw,auto,auto,auto}}

/* hero background v2: smaller network lines, bigger real glass logo */
.hero.hr2{background:
  url(img/net-a.svg) no-repeat left 10px top 70px/min(15vw,210px),
  url(img/net-c.svg) no-repeat left 10px bottom 20px/min(13vw,180px),
  url(img/net-b.svg) no-repeat right 10px top 70px/min(15vw,210px),
  radial-gradient(720px 600px at -4% 50%,rgba(170,195,230,.5),transparent 70%),
  radial-gradient(900px 640px at 104% 0,rgba(176,199,232,.6),transparent 68%),
  radial-gradient(800px 620px at 100% 100%,rgba(176,199,232,.5),transparent 68%)}
.hero.hr2::after{display:block;content:"";position:absolute;left:auto;top:auto;right:-60px;bottom:-150px;width:620px;height:620px;margin:0;border-radius:0;
  filter:none;opacity:.95;animation:none;transform:none;pointer-events:none;z-index:0;
  background:url(img/brand-bg.webp) 99.5% 91.7%/250% auto no-repeat;mix-blend-mode:multiply;
  -webkit-mask-image:radial-gradient(circle,#000 52%,transparent 70%);mask-image:radial-gradient(circle,#000 52%,transparent 70%)}
.hr2-grid{position:relative;z-index:1}
@media (max-width:1000px){.hero.hr2::after{width:380px;height:380px;right:-80px;bottom:-60px}}
@media (max-width:700px){.hero.hr2{background-size:28vw,24vw,28vw,auto,auto,auto}}

/* logo: large halo centred behind the phone */
@media (min-width:1001px){
  .hero.hr2::after{width:820px;height:820px;bottom:auto;top:50%;margin-top:-400px;
    right:calc((100vw - min(1240px,100vw - 40px))/2 + min(1240px,100vw - 40px)*.25 - 410px);
    -webkit-mask-image:radial-gradient(circle closest-side,#000 88%,transparent 100%);mask-image:radial-gradient(circle closest-side,#000 88%,transparent 100%);opacity:1}
}

/* logo: smaller, bottom-right corner */
@media (min-width:1001px){
  .hero.hr2::after{width:470px;height:470px;top:auto;margin-top:0;bottom:-70px;right:-50px;
    -webkit-mask-image:radial-gradient(circle closest-side,#000 88%,transparent 100%);mask-image:radial-gradient(circle closest-side,#000 88%,transparent 100%)}
}

/* new logo (navy, transparent PNG): no tint needed */
.nav .logo img,.foot img.fl{filter:none}
.nav .logo img{height:34px;width:auto}
.foot img.fl{height:40px;width:auto}

/* hero background on its own layer so it can fade out smoothly at the bottom */
.hero.hr2{background:none}
.hbg{position:absolute;left:0;right:0;top:0;bottom:-140px;z-index:0;pointer-events:none;
  background:
    url(img/net-a.svg) no-repeat left 10px top 70px/min(15vw,210px),
    url(img/net-c.svg) no-repeat left 10px bottom 190px/min(13vw,180px),
    url(img/net-b.svg) no-repeat right 10px top 70px/min(15vw,210px),
    radial-gradient(720px 600px at -4% 45%,rgba(170,195,230,.5),transparent 70%),
    radial-gradient(900px 640px at 104% 0,rgba(176,199,232,.6),transparent 68%),
    radial-gradient(800px 620px at 100% 85%,rgba(176,199,232,.5),transparent 68%);
  -webkit-mask-image:linear-gradient(#000 0,#000 58%,transparent 100%);mask-image:linear-gradient(#000 0,#000 58%,transparent 100%)}
.hero.hr2::before{-webkit-mask-image:linear-gradient(#000 0,#000 55%,transparent 100%);mask-image:linear-gradient(#000 0,#000 55%,transparent 100%)}
.hero.hr2::after{-webkit-mask-image:radial-gradient(circle closest-side,#000 88%,transparent 100%),linear-gradient(#000 0,#000 70%,transparent 100%);-webkit-mask-composite:source-in;mask-image:radial-gradient(circle closest-side,#000 88%,transparent 100%),linear-gradient(#000 0,#000 70%,transparent 100%);mask-composite:intersect}
@media (max-width:700px){.hbg{background-size:28vw,24vw,28vw,auto,auto,auto}}

/* industry buttons (the four logos) */
.ch{cursor:pointer;pointer-events:auto;transition:scale .35s,box-shadow .35s}
.ch:hover{scale:1.1}
.ch:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.ch .cap{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);white-space:nowrap;font:600 11.5px/1 var(--body);letter-spacing:.01em;
  padding:6px 11px;border-radius:999px;color:var(--muted);background:rgba(255,255,255,.88);border:1px solid var(--line);box-shadow:0 8px 16px -10px rgba(63,104,168,.6);transition:.3s}
.ch.live .cap{background:var(--grad);color:#fff;border-color:transparent}

/* industry chip + pop-up sheet (inside the phone) */
.indbar{padding:7px 10px 0;display:flex;justify-content:center;position:relative;z-index:2}
.indbtn{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:999px;border:1px solid rgba(95,135,196,.4);background:linear-gradient(180deg,#fff,#eef4fc);color:var(--ink);font:600 11.5px/1 var(--body);cursor:pointer;box-shadow:0 8px 16px -10px rgba(63,104,168,.7);animation:chipglow 2.6s ease-in-out infinite}
.indbtn .ie{font-size:13px}.indbtn i{font-style:normal;color:var(--deep);font-size:10px}
.indbtn[aria-expanded="true"]{animation:none;background:var(--grad);color:#fff}.indbtn[aria-expanded="true"] i{color:#fff}
@keyframes chipglow{0%,100%{box-shadow:0 8px 16px -10px rgba(63,104,168,.7),0 0 0 0 rgba(95,135,196,.45)}50%{box-shadow:0 8px 16px -10px rgba(63,104,168,.7),0 0 0 7px rgba(95,135,196,0)}}
.sheet{position:absolute;inset:0;z-index:6;display:flex;align-items:flex-end;background:rgba(34,49,77,0);backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);transition:background .25s,backdrop-filter .25s}
.sheet[hidden]{display:none}
.sheet.show{background:rgba(34,49,77,.32);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.sh-card{width:100%;padding:14px 14px 18px;border-radius:24px 24px 0 0;background:#fff;box-shadow:0 -20px 40px -20px rgba(34,49,77,.5);transform:translateY(100%);transition:transform .32s cubic-bezier(.2,.9,.3,1.1)}
.sheet.show .sh-card{transform:none}
.sh-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.sh-h b{font:600 13px/1 var(--head);color:var(--ink)}
.sh-x{width:24px;height:24px;border-radius:50%;border:0;background:var(--soft);color:var(--muted);font-size:16px;line-height:1;cursor:pointer}
.sh-list{display:flex;flex-direction:column;gap:7px}
.sh-opt{display:flex;align-items:center;gap:11px;width:100%;padding:10px 12px;border-radius:14px;border:1px solid var(--line);background:#fff;font:600 12.5px/1 var(--body);color:var(--ink);cursor:pointer;text-align:left;transition:.2s}
.sh-opt:hover{border-color:var(--brand);background:var(--soft)}
.sh-opt .so-i{width:30px;height:30px;border-radius:10px;background:var(--soft);display:grid;place-items:center;font-size:16px}
.sh-opt .so-r{margin-left:auto;width:16px;height:16px;border-radius:50%;border:2px solid #c7d6ec}
.sh-opt.on{border-color:var(--brand);background:linear-gradient(135deg,#eef4fc,#fff)}
.sh-opt.on .so-r{border-color:var(--deep);background:radial-gradient(circle,var(--deep) 45%,transparent 50%)}
.sh-card{padding:12px 12px 26px}
.sh-h{margin-bottom:8px}
.sh-list{gap:5px}
.sh-opt{padding:7px 11px}
.sh-opt .so-i{width:26px;height:26px;font-size:14px}

/* 16 industries: 2-column scrollable grid */
.sh-list{display:grid;grid-template-columns:1fr 1fr;gap:6px;max-height:208px;overflow-y:auto;padding:2px 3px 2px 0;scrollbar-width:thin;scrollbar-color:rgba(95,135,196,.4) transparent;overscroll-behavior:contain}
.sh-list::-webkit-scrollbar{width:4px}.sh-list::-webkit-scrollbar-thumb{background:rgba(95,135,196,.4);border-radius:4px}
.sh-opt{padding:7px 8px;gap:7px;font-size:11px;min-width:0}
.sh-opt .so-i{width:24px;height:24px;font-size:13px;flex:none}
.sh-opt .so-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.sh-opt .so-r{display:none}
.sh-opt.on{border-color:var(--deep);background:linear-gradient(135deg,#e6effb,#fff);box-shadow:inset 0 0 0 1px var(--deep)}
.sh-opt{padding:6px 7px;gap:6px;align-items:center}
.sh-opt .so-i{width:22px;height:22px;font-size:12px;border-radius:8px}
.sh-opt .so-t{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.15;font-size:10.5px;flex:1}
.sh-list{gap:5px}

/* photo + package-details card in the chat */
.msgs .m.pkg{padding:0;overflow:hidden;max-width:92%;background:#fff;border:1px solid rgba(95,135,196,.3);box-shadow:0 14px 26px -16px rgba(63,104,168,.7);border-bottom-left-radius:5px}
.pkg-img{position:relative;height:92px;background:var(--soft)}
.pkg-img img{width:100%;height:100%;object-fit:cover;display:block}
.pkg-tag{position:absolute;top:7px;left:7px;padding:3px 8px;border-radius:999px;background:var(--grad);color:#fff;font:700 9.5px/1.2 var(--body);letter-spacing:.02em}
.pkg-b{padding:8px 10px 9px}
.pkg-b b{display:block;font:600 11.5px/1.25 var(--head);color:var(--ink)}
.pkg-p{display:flex;align-items:baseline;gap:6px;margin:3px 0 5px}
.pkg-p em{font:700 15px/1 var(--head);font-style:normal;color:var(--deep)}
.pkg-p s{font-size:10px;color:var(--faint)}
.pkg-b ul{list-style:none;display:grid;gap:2px}
.pkg-b li{font-size:10.5px;color:var(--muted);line-height:1.35;padding-left:14px;position:relative}
.pkg-b li::before{content:"✓";position:absolute;left:0;color:var(--deep);font-weight:700}
.msgs .m{flex:none}
.msgs .m.pkg{flex:none;min-height:min-content}

/* bigger phone (device itself is larger inside the same scene) */
.phone{left:62px;top:16px;width:276px;height:566px;padding:10px;border-radius:46px}
.phone::before{top:16px;width:78px;height:20px;margin-left:-39px}
.screen{border-radius:37px}
.sb{padding:14px 22px 4px;font-size:12px}
.chd{padding:22px 14px 11px}
.chd .av{width:36px;height:36px;font-size:15px}
.chd b{font-size:13.5px}.chd small{font-size:10.5px}
.msgs{padding:8px 12px 10px;gap:7px}
.msgs .m{font-size:12.5px;padding:9px 12px;border-radius:15px}
.indbtn{font-size:12.5px;padding:7px 14px}
.inp{margin:0 12px 14px;font-size:12px}
.pkg-img{height:112px}
.msgs .m.pkg{padding:0}
.pkg-b b{font-size:12.5px}.pkg-p em{font-size:16px}.pkg-b li{font-size:11.5px}.pkg-tag{font-size:10px}
.c-whatsapp{left:-14px}.c-instagram{right:-6px}

/* scene scale: keep the whole (bigger) phone inside the window */
@media (min-width:1001px){
  .hero.hr2{padding-top:92px}
  .hr2 .scene{zoom:1.3}
}
@media (min-width:1001px) and (max-height:960px){.hr2 .scene{zoom:1.2}}
@media (min-width:1001px) and (max-height:860px){.hr2 .scene{zoom:1.02}}

/* car loan: document checklist + uploaded file chips */
.msgs .m.doc{padding:9px 12px 10px;max-width:92%;background:#fff;border:1px solid rgba(95,135,196,.3);box-shadow:0 12px 24px -16px rgba(63,104,168,.7)}
.msgs .m.doc b{display:block;margin-bottom:5px;font:600 12px/1.2 var(--head);color:var(--deep)}
.msgs .m.doc ul{list-style:none;display:grid;gap:4px}
.msgs .m.doc li{position:relative;padding-left:20px;font-size:12px;color:var(--ink)}
.msgs .m.doc li::before{content:"";position:absolute;left:1px;top:2px;width:12px;height:12px;border-radius:4px;border:2px solid var(--brand)}
.msgs .m.out.files{display:flex;flex-direction:column;gap:5px;padding:6px;max-width:80%}
.fchip{display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:11px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.35);animation:mpop .35s both}
.fchip:nth-child(2){animation-delay:.25s}.fchip:nth-child(3){animation-delay:.5s}
.fchip i{font-style:normal;font-size:16px;line-height:1}
.fchip span{display:flex;flex-direction:column;line-height:1.2}
.fchip b{font:600 11.5px/1.2 var(--body);color:#fff}.fchip small{font-size:9.5px;color:rgba(255,255,255,.8)}

/* breathing room: summary title and bottom of the chat */
.msgs{padding-bottom:16px}
.msgs .m.sum b{margin-bottom:6px;letter-spacing:.02em}
.msgs .m.sum{line-height:1.6}

/* property: three matching units, each with a photo */
.msgs .m.units{padding:0;overflow:hidden;max-width:94%;width:94%;background:#fff;border:1px solid rgba(95,135,196,.3);box-shadow:0 14px 26px -16px rgba(63,104,168,.7);border-bottom-left-radius:5px}
.u-h{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 11px;background:linear-gradient(135deg,#eef4fc,#fff);border-bottom:1px solid var(--line)}
.u-h b{font:600 12px/1.2 var(--head);color:var(--ink)}
.u-h span{font:700 9.5px/1 var(--body);padding:4px 8px;border-radius:999px;background:var(--grad);color:#fff;white-space:nowrap}
.u{display:flex;align-items:center;gap:9px;padding:7px 10px}
.u+.u{border-top:1px solid rgba(95,135,196,.14)}
.u img{flex:none;width:66px;height:52px;border-radius:9px;object-fit:cover;box-shadow:0 6px 12px -8px rgba(63,104,168,.8)}
.u div{min-width:0;display:flex;flex-direction:column;gap:1px}
.u b{font:600 11.5px/1.2 var(--head);color:var(--ink)}
.u small{font-size:10px;line-height:1.3;color:var(--muted)}
.u em{font:700 11.5px/1.2 var(--head);font-style:normal;color:var(--deep);margin-top:1px}

/* industry button at the top (under the notch); name header sits higher */
.screen{display:flex;flex-direction:column}
.sb{order:0}
.indbar{order:1;padding:2px 10px 7px;margin-top:2px}
.chd{order:2;margin-top:0;padding:8px 14px 10px;border-top:1px solid var(--line)}
.msgs{order:3}
.inp{order:4}

/* compact top of the phone */
.sb{padding:9px 22px 0;height:30px;align-items:center;font-size:11.5px}
.indbar{padding:0 10px 4px;margin-top:0}
.indbtn{padding:4px 12px;font-size:11.5px;gap:6px}
.indbtn .ie{font-size:12px}
.chd{padding:5px 12px 6px;gap:8px}
.chd .av{width:30px;height:30px;font-size:13px}
.chd b{font-size:12.5px;line-height:1.2}
.chd small{font-size:10px;line-height:1.2}
.chd .badge{width:22px;height:22px}
.msgs{padding-top:6px}

/* glass boxes: stay outside the phone so they never cover chat text */
@media (min-width:1001px){
  .gb{min-width:132px;padding:11px 15px 12px}
  .gb b{font-size:22px}
  .gb span{font-size:11.5px}
  .gb .gi{width:30px;height:30px;margin-bottom:8px}
  .gb1{left:344px;top:120px}
  .gb2{left:-84px;top:250px}
  .gb3{left:344px;top:480px}
}
@media (min-width:1001px){ .gb2{left:-86px;top:462px} }

/* =====================================================================
   GLASS v6 — everything below the hero: frosted glass over soft blue glows
   ===================================================================== */
:root{
  --glass:linear-gradient(135deg,rgba(255,255,255,.66),rgba(255,255,255,.28));
  --glass-bd:1px solid rgba(255,255,255,.9);
  --glass-sh:0 26px 50px -30px rgba(63,104,168,.5),inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(95,135,196,.07);
  --blur:blur(18px) saturate(165%);
}
main{overflow-x:clip}
main>section:not(.hero):not(.ph){position:relative;isolation:isolate}
/* glowing blobs sit behind the glass so the blur is visible */
main>section:not(.hero):not(.ph)::before,main>section:not(.hero):not(.ph)::after{content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none}
main>section:not(.hero):not(.ph)::before{width:min(46vw,640px);height:min(46vw,640px);left:-8%;top:6%;background:radial-gradient(closest-side,rgba(110,152,214,.55),rgba(127,163,218,.2) 62%,transparent)}
main>section:not(.hero):not(.ph)::after{width:min(42vw,580px);height:min(42vw,580px);right:-8%;bottom:4%;background:radial-gradient(closest-side,rgba(150,182,228,.6),rgba(159,187,228,.18) 62%,transparent)}
main>section:nth-of-type(even):not(.hero):not(.ph)::before{left:auto;right:-8%;top:auto;bottom:8%}
main>section:nth-of-type(even):not(.hero):not(.ph)::after{right:auto;left:-6%;bottom:auto;top:6%}

/* the glass surface */
.card,.gc,.post,.ad,.faq details,.clients,.tw,.media,.trust,.legal,.tabs,.feat.on,.stats,.cust,.upd,footer .wrap{
  background:var(--glass);border:var(--glass-bd);box-shadow:var(--glass-sh);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.card:hover,.gc:hover,.post:hover{background:linear-gradient(135deg,rgba(255,255,255,.8),rgba(255,255,255,.4));box-shadow:0 34px 60px -30px rgba(63,104,168,.6),inset 0 1px 0 #fff,inset 0 0 0 1px rgba(95,135,196,.12)}
.faq details[open]{background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(223,234,250,.5));border-color:#fff}
.stage{border:1px solid rgba(255,255,255,.7);box-shadow:0 30px 60px -30px rgba(63,104,168,.7),inset 0 1px 0 rgba(255,255,255,.6);
  background:linear-gradient(145deg,rgba(127,163,218,.92),rgba(63,104,168,.88))}

/* stats: one glass bar */
.stats{max-width:1080px;margin:0 auto;padding:34px 12px;border-radius:32px;display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.stats>div{padding:4px 14px}
.stats>div+div{border-left:1px solid rgba(95,135,196,.22)}
.stats b{font-size:clamp(44px,5.4vw,84px)}
@media (max-width:900px){.stats{grid-template-columns:1fr;gap:14px}.stats>div+div{border-left:0;border-top:1px solid rgba(95,135,196,.22);padding-top:16px}}

/* glass icon chips */
.card .ic{background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(223,234,250,.7));border:1px solid #fff;box-shadow:0 14px 26px -14px rgba(63,104,168,.7),inset 0 1px 0 #fff}
.feat .fi,.icard .ic,.gc .gi{box-shadow:0 12px 24px -12px rgba(63,104,168,.75),inset 0 1px 0 rgba(255,255,255,.5)}
.tab.on{box-shadow:0 12px 24px -12px rgba(63,104,168,.8),inset 0 1px 0 rgba(255,255,255,.4)}
.tabs{padding:6px;border-radius:999px}
.feat{border-radius:20px}
.feat:hover{background:rgba(255,255,255,.5)}

/* trust + clients: roomy glass panels */
.trust{padding:56px;border-radius:36px}
.clients{border-radius:32px;margin-top:26px}
.clients .win{border-radius:16px}

/* call to action: glass panel in front of a big blue glow */
main>section:has(.cta){padding-top:40px}
main>section:has(.cta)::before{width:min(90vw,1100px);height:420px;left:50%;right:auto;top:auto;bottom:0;margin-left:calc(min(90vw,1100px)/-2);border-radius:50%;
  background:radial-gradient(closest-side,rgba(95,140,208,.75),rgba(127,163,218,.35) 55%,transparent)}
main>section:has(.cta)::after{display:none}
.cta{background:linear-gradient(135deg,rgba(255,255,255,.6),rgba(255,255,255,.26));border:var(--glass-bd);box-shadow:0 40px 70px -34px rgba(63,104,168,.65),inset 0 1px 0 #fff;
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border-radius:40px}

/* footer */
footer{border-top:0;background:none;padding-top:30px}
footer .wrap{padding:44px;border-radius:36px}
@media (max-width:900px){footer .wrap{padding:28px 22px}.trust{padding:28px}}

/* tables / pricing */
.tw{border-radius:32px}
.pt-t thead th,.pt-t td{border-color:rgba(95,135,196,.14)}
.pt-t .hl{background:linear-gradient(180deg,rgba(95,135,196,.16),rgba(95,135,196,.04))}
.plan,.ad{overflow:hidden}

/* stronger glow behind each card group so the frosted glass reads */
main>section:not(.hero):not(.ph)::before{width:min(54vw,780px);height:min(54vw,780px);background:radial-gradient(closest-side,rgba(92,138,208,.62),rgba(120,160,222,.24) 62%,transparent)}
main>section:not(.hero):not(.ph)::after{width:min(50vw,720px);height:min(50vw,720px);background:radial-gradient(closest-side,rgba(110,152,216,.62),rgba(150,182,228,.2) 62%,transparent)}
.cards,.grid,.news,.addons,.faq,.panel,.trust,.clients{position:relative}
.cards::before,.grid::before,.news::before,.addons::before{content:"";position:absolute;left:-4%;right:-4%;top:-12%;bottom:-12%;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 55% at 50% 52%,rgba(98,142,210,.5),rgba(130,168,224,.2) 58%,transparent 78%)}
.faq::before{content:"";position:absolute;left:-10%;right:-10%;top:0;bottom:0;z-index:-1;pointer-events:none;background:radial-gradient(55% 60% at 50% 45%,rgba(98,142,210,.4),transparent 75%)}
/* every feature row is a light glass chip; the active one is brighter */
.feat{background:linear-gradient(135deg,rgba(255,255,255,.5),rgba(255,255,255,.2));border:1px solid rgba(255,255,255,.8);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.feat:hover{background:linear-gradient(135deg,rgba(255,255,255,.7),rgba(255,255,255,.34))}
.feats{gap:9px}
.trust::before,.clients::before{content:"";position:absolute;z-index:-1;pointer-events:none;left:-6%;right:-6%;top:-16%;bottom:-16%;
  background:radial-gradient(55% 60% at 30% 45%,rgba(98,142,210,.5),transparent 72%),radial-gradient(45% 55% at 80% 60%,rgba(130,168,224,.45),transparent 72%)}
.trust{background:linear-gradient(135deg,rgba(255,255,255,.6),rgba(255,255,255,.26))}
main>section:has(.cta):not(.hero):not(.ph)::before{width:min(94vw,1200px);height:560px;left:50%;right:auto;top:50%;bottom:auto;margin:-280px 0 0 calc(min(94vw,1200px)/-2);border-radius:50%;
  background:radial-gradient(closest-side,rgba(84,132,206,.85),rgba(110,152,216,.45) 55%,transparent)}
main>section:has(.cta):not(.hero):not(.ph)::after{display:none}

/* =====================================================================
   LIGHT BLUE BACKGROUND — flat pale blue instead of the stronger gradients
   ===================================================================== */
:root{--sky:#eaf2fc}
body{background:var(--sky)}
.bg{background:var(--sky)}
/* hero */
.hbg{background:
    url(img/net-a.svg) no-repeat left 10px top 70px/min(15vw,210px),
    url(img/net-c.svg) no-repeat left 10px bottom 190px/min(13vw,180px),
    url(img/net-b.svg) no-repeat right 10px top 70px/min(15vw,210px),
    radial-gradient(720px 600px at -4% 45%,rgba(214,228,248,.8),transparent 70%),
    radial-gradient(900px 640px at 104% 0,rgba(214,228,248,.85),transparent 68%),
    radial-gradient(800px 620px at 100% 85%,rgba(214,228,248,.7),transparent 68%)}
@media (max-width:700px){.hbg{background-size:28vw,24vw,28vw,auto,auto,auto}}
.hero.hr2::before{background:radial-gradient(circle,rgba(206,223,247,.75),rgba(206,223,247,.25) 52%,transparent 70%)}
/* section glows: pale tints */
main>section:not(.hero):not(.ph)::before{background:radial-gradient(closest-side,rgba(214,228,248,.95),rgba(214,228,248,.4) 62%,transparent)}
main>section:not(.hero):not(.ph)::after{background:radial-gradient(closest-side,rgba(205,222,246,.95),rgba(205,222,246,.38) 62%,transparent)}
.cards::before,.grid::before,.news::before,.addons::before{background:radial-gradient(60% 55% at 50% 52%,rgba(200,219,245,.85),rgba(214,228,248,.35) 58%,transparent 78%)}
.faq::before{background:radial-gradient(55% 60% at 50% 45%,rgba(205,222,246,.75),transparent 75%)}
.trust::before,.clients::before{background:radial-gradient(55% 60% at 30% 45%,rgba(200,219,245,.8),transparent 72%),radial-gradient(45% 55% at 80% 60%,rgba(214,228,248,.75),transparent 72%)}
main>section:has(.cta):not(.hero):not(.ph)::before{background:radial-gradient(closest-side,rgba(190,212,242,.95),rgba(205,222,246,.5) 55%,transparent)}
/* inner-page header glow + footer */
.ph{background:radial-gradient(700px 320px at 50% 0,rgba(214,228,248,.9),transparent 70%)}

/* phone: keep the floating WhatsApp button off the footer's last line */
@media (max-width:900px){footer{padding-bottom:96px}.copy{padding-right:70px;text-align:left}}

/* =====================================================================
   WHITE BACKGROUND — plain white page; cards stay soft white glass
   ===================================================================== */
:root{--sky:#ffffff;
  --glass:linear-gradient(135deg,#ffffff 0%,#f6f9fe 100%);
  --glass-bd:1px solid rgba(95,135,196,.16);
  --glass-sh:0 22px 44px -30px rgba(63,104,168,.38),inset 0 1px 0 #fff}
body,.bg{background:#fff}
/* hero: keep the network lines, drop the blue clouds */
.hbg{background:
    url(img/net-a.svg) no-repeat left 10px top 70px/min(15vw,210px),
    url(img/net-c.svg) no-repeat left 10px bottom 190px/min(13vw,180px),
    url(img/net-b.svg) no-repeat right 10px top 70px/min(15vw,210px)}
@media (max-width:700px){.hbg{background-size:28vw,24vw,28vw}}
.hero.hr2::before{background:radial-gradient(circle,rgba(228,237,249,.7),rgba(228,237,249,.2) 55%,transparent 72%)}
/* no coloured glows behind sections or card groups */
main>section:not(.hero):not(.ph)::before,main>section:not(.hero):not(.ph)::after,
.cards::before,.grid::before,.news::before,.addons::before,.faq::before,.trust::before,.clients::before,
main>section:has(.cta):not(.hero):not(.ph)::before{display:none!important}
.ph{background:none}
/* cards: white with a faint blue-grey tint, soft border and shadow */
.card,.gc,.post,.ad,.faq details,.clients,.tw,.media,.trust,.legal,.tabs,.stats,.cust,.upd,footer .wrap,.cta{
  background:var(--glass);border:var(--glass-bd);box-shadow:var(--glass-sh);backdrop-filter:none;-webkit-backdrop-filter:none}
.card:hover,.gc:hover,.post:hover{background:#fff;box-shadow:0 30px 56px -30px rgba(63,104,168,.5),inset 0 1px 0 #fff}
.faq details[open]{background:linear-gradient(135deg,#f3f8ff,#fff);border-color:rgba(95,135,196,.34)}
.feat{background:#fff;border:1px solid rgba(95,135,196,.14);backdrop-filter:none;-webkit-backdrop-filter:none}
.feat.on{box-shadow:0 18px 36px -24px rgba(63,104,168,.5);border-color:rgba(95,135,196,.3)}
.cta{background:linear-gradient(135deg,#f3f8ff,#fff)}
.trust{background:#fff}
footer{background:#fff;border-top:1px solid rgba(95,135,196,.14)}
footer .wrap{box-shadow:none;border:0;background:transparent}

/* =====================================================================
   COMING SOON — boxed (bento) layout: big feature card + grid of boxes
   cards with a screenshot are blue (the art is white line-work), the rest are white
   ===================================================================== */
.panel.on{display:block;animation:pop .5s}
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px;text-align:left;grid-auto-flow:dense}
.bt{grid-column:span 3;position:relative;overflow:hidden;display:flex;flex-direction:column;padding:26px 24px 24px;border-radius:28px;
  background:linear-gradient(135deg,#fff 0%,#f6f9fe 100%);border:1px solid rgba(95,135,196,.16);
  box-shadow:0 24px 44px -32px rgba(63,104,168,.45),inset 0 1px 0 #fff;transition:transform .35s,box-shadow .35s}
.bt:hover{transform:translateY(-5px);box-shadow:0 34px 56px -30px rgba(63,104,168,.55),inset 0 1px 0 #fff}
.bt-ic{width:46px;height:46px;border-radius:14px;background:var(--grad);display:grid;place-items:center;margin-bottom:18px;flex:none;
  box-shadow:0 12px 24px -12px rgba(63,104,168,.75),inset 0 1px 0 rgba(255,255,255,.45)}
.bt-ic img{width:26px;height:26px;object-fit:contain}
.bt h4{font:600 20px/1.25 var(--head);color:var(--ink);margin-bottom:8px}
.bt p{color:var(--muted);font-size:15.5px;line-height:1.6;margin:0}
.bt-art{display:block;width:auto;max-width:100%;max-height:150px;object-fit:contain;margin:20px auto 0}
/* the big card */
.bt-main{grid-column:span 6;grid-row:span 2;padding:34px}
.bt-main h3{font-size:clamp(26px,2.7vw,38px);margin:0 0 10px;line-height:1.15}
.bt-main p{font-size:17px}
.bt-main .bt-art{max-height:360px;margin:auto;padding-top:26px}
.bt-main,.bt.has-art{background:linear-gradient(150deg,#86a8dc 0%,#5f87c4 55%,#3f68a8 100%);border-color:rgba(255,255,255,.65);
  box-shadow:0 34px 60px -34px rgba(63,104,168,.75),inset 0 1px 0 rgba(255,255,255,.55)}
.bt-main h3,.bt.has-art h4{color:#fff}
.bt-main p,.bt.has-art p{color:rgba(255,255,255,.9)}
.bt-main .bt-ic,.bt.has-art .bt-ic{background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
/* 6-item tab: last two boxes are wide */
.bento.n6 .bt:nth-child(n+6){grid-column:span 6}
.bento.n6 .bt:nth-child(n+6) .bt-art{max-height:180px}
@media (max-width:1100px){.bt{grid-column:span 6}.bt-main{grid-column:1/-1;grid-row:auto}.bento.n6 .bt:nth-child(n+6){grid-column:span 6}}
@media (max-width:640px){.bento{gap:14px}.bt,.bt-main,.bento.n6 .bt:nth-child(n+6){grid-column:1/-1;padding:22px 20px}.bt-main .bt-art{max-height:240px}}

/* no screenshots in the boxes: every box is icon + title + text; the big card stays blue */
.bt{padding:26px 24px 28px;min-height:150px}
.bt-main{justify-content:center;padding:40px}
.bt-main h3{font-size:clamp(28px,3vw,42px)}
.bt-main p{font-size:18px;max-width:30ch}
.bt-main .bt-ic{width:56px;height:56px;border-radius:16px;margin-bottom:24px}
.bt-main .bt-ic img{width:30px;height:30px}
.bento.n6 .bt:nth-child(n+6){grid-column:span 6}

/* Coming Soon: navy #141e3e instead of blue */
#soon{--navy:#141e3e}
#soon .bt-main{background:#141e3e;border-color:rgba(20,30,62,.9);box-shadow:0 34px 60px -34px rgba(20,30,62,.65),inset 0 1px 0 rgba(255,255,255,.12)}
#soon .bt-main .bt-ic{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28)}
#soon .bt-ic{background:#141e3e;box-shadow:0 12px 24px -12px rgba(20,30,62,.7),inset 0 1px 0 rgba(255,255,255,.18)}
#soon .bt-main .bt-ic{box-shadow:none}
#soon .tab.on{background:#141e3e;box-shadow:0 12px 24px -12px rgba(20,30,62,.7)}
#soon .sec-h .hl2{color:#141e3e}
#soon .bt:hover{box-shadow:0 34px 56px -30px rgba(20,30,62,.4),inset 0 1px 0 #fff}

/* navy gradient (#141e3e -> deeper blue-navy) for the Coming Soon section */
#soon{--navy-grad:linear-gradient(135deg,#141e3e 0%,#1f2f66 55%,#2e448c 100%)}
#soon .bt-main{background:radial-gradient(520px 320px at 100% 0%,rgba(120,150,235,.35),transparent 65%),var(--navy-grad)}
#soon .bt-ic{background:var(--navy-grad)}
#soon .bt-main .bt-ic{background:rgba(255,255,255,.14)}
#soon .tab.on{background:var(--navy-grad)}
#soon .sec-h .hl2{background:linear-gradient(100deg,#141e3e,#2e448c);-webkit-background-clip:text;background-clip:text;color:transparent}

/* =====================================================================
   TRUST + CLIENTS — two cards side by side
   left: Malaysia Digital (badge, heading, text, photos); right: navy card with a
   continuous scroll of client logos (all logos drawn as white silhouettes)
   ===================================================================== */
#trust>.wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:22px;align-items:stretch}
/* left card: badge -> text -> photos, stacked */
.trust{display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:42px 44px 36px;border-radius:34px}
.trust .cert{display:contents}
.trust .md-logo{order:-2;width:auto;max-width:150px;padding:12px 18px;border-radius:18px;margin-bottom:22px;align-self:flex-start}
.trust>div:nth-child(2){order:-1}
.trust h2{font-size:clamp(28px,3vw,42px);margin-bottom:12px}
.trust h3{font-size:clamp(18px,1.8vw,24px);margin-bottom:12px}
.trust p{font-size:16px;max-width:52ch}
.trust .md-vis{order:0;width:100%;max-width:560px;margin:22px auto 0;padding-bottom:30px}
/* right card: navy gradient, white logos */
.clients{margin:0;padding:34px 26px;border-radius:34px;display:flex;border:0;
  background:radial-gradient(420px 300px at 100% 0%,rgba(120,150,235,.32),transparent 65%),linear-gradient(145deg,#141e3e 0%,#1f2f66 55%,#2e448c 100%);
  box-shadow:0 36px 64px -36px rgba(20,30,62,.7),inset 0 1px 0 rgba(255,255,255,.14)}
.clients .win{flex:1;height:auto;min-height:560px;position:relative;overflow:hidden;border-radius:0;
  -webkit-mask-image:linear-gradient(transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(transparent,#000 9%,#000 91%,transparent)}
.clients .win img.d,.clients .win img.m{position:absolute;top:0;left:0;right:0;margin:0 auto;display:block;width:100%;max-width:none;
  filter:brightness(0) invert(1);opacity:.88;animation:logoloop 90s linear infinite}
.clients .win img.m{display:none!important}
.clients .win:hover img.d{animation-play-state:paused}
@keyframes logoloop{to{transform:translateY(-50%)}}
@media (max-width:1000px){
  #trust>.wrap{grid-template-columns:1fr}
  .trust{padding:30px 24px}
  .clients{padding:26px 18px}.clients .win{min-height:440px}
}
@media (max-width:640px){.clients img.d{display:block!important}}
@media (prefers-reduced-motion:reduce){.clients .win img.d{animation:none}}

/* trust + clients: no blue box, navy (#141e3e) logos on white */
:root{--navy-f:brightness(0) saturate(100%) invert(9%) sepia(34%) saturate(2600%) hue-rotate(205deg) brightness(94%)}
.trust .md-logo{background:none;box-shadow:none;border-radius:0;padding:0;max-width:170px;width:170px;filter:var(--navy-f);margin-bottom:24px}
.clients{background:linear-gradient(145deg,#ffffff 0%,#f4f7fc 100%);border:1px solid rgba(20,30,62,.1);
  box-shadow:0 30px 56px -36px rgba(20,30,62,.35),inset 0 1px 0 #fff}
.clients .win img.d,.clients .win img.m{filter:var(--navy-f);opacity:.82}

/* =====================================================================
   TRUST + CLIENTS — horizontal layout
   card 1: text left / photos right.  card 2: logo ticker rows moving sideways
   ===================================================================== */
#trust>.wrap{grid-template-columns:1fr;gap:22px}
.trust{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);grid-template-rows:auto 1fr;column-gap:48px;align-items:start;padding:48px 52px;border-radius:36px}
.trust .md-logo{grid-column:1;grid-row:1;order:0;justify-self:start;margin-bottom:22px;width:150px}
.trust>div:nth-child(2){grid-column:1;grid-row:2;order:0;align-self:start}
.trust .md-vis{grid-column:2;grid-row:1/span 2;order:0;align-self:center;max-width:none;width:100%;margin:0;padding-bottom:30px}
.trust p{max-width:56ch}
/* the logo ticker */
.clients{display:block;padding:30px 0;min-height:0}
.clients.ticker .win{display:none}
.lrows{display:flex;flex-direction:column;gap:14px;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)}
.lstrip{overflow:hidden;filter:var(--navy-f);opacity:.82}
.ltrack{display:flex;width:max-content;height:100%;animation:tick 80s linear infinite}
.ls{flex:none;display:block}
@keyframes tick{to{transform:translateX(-50%)}}
.lrows:hover .ltrack{animation-play-state:paused}
@media (max-width:1000px){
  .trust{grid-template-columns:1fr;grid-template-rows:auto;padding:30px 24px}
  .trust .md-logo,.trust>div:nth-child(2),.trust .md-vis{grid-column:1;grid-row:auto}
  .trust .md-vis{margin-top:22px}
  .clients{padding:22px 0}
}
@media (prefers-reduced-motion:reduce){.ltrack{animation:none}}
#trust>.wrap{grid-template-columns:minmax(0,1fr)}
#trust .trust,#trust .clients{min-width:0;max-width:100%}
.clients{overflow:hidden}
.ltrack{align-items:center}.lstrip{margin:2px 0}

/* tech waves backdrop */
.wavefx{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none}

/* lighter hero: no corner network dots, softer glows */
.hbg{background:
  radial-gradient(720px 600px at -4% 45%,rgba(170,195,230,.28),transparent 70%),
  radial-gradient(900px 640px at 104% 0,rgba(176,199,232,.34),transparent 68%),
  radial-gradient(800px 620px at 100% 85%,rgba(176,199,232,.28),transparent 68%)}
@media (max-width:700px){.hbg{background-size:auto}}

/* nav: functions mega menu + 6-column footer */
.drop.mg{display:grid;grid-template-columns:repeat(3,minmax(190px,1fr));gap:6px 22px;min-width:660px;padding:22px 24px;left:-120px}
.mg .mgc{display:flex;flex-direction:column}
.mg h6{font:600 12px var(--head);text-transform:uppercase;letter-spacing:.07em;color:var(--faint);margin:2px 0 6px 12px}
.mg .mgall{grid-column:1/-1;border-top:1px solid var(--line);margin-top:6px;padding-top:12px;font-weight:600;color:var(--deep)}
.foot{grid-template-columns:1.3fr 1.3fr 1fr 1fr 1fr 1fr}
.lang a{white-space:nowrap}

/* imported content, rendered with the site's own components */
.ph .kick{display:inline-block;padding:7px 16px;margin-bottom:18px;border-radius:999px;background:rgba(255,255,255,.85);border:1px solid var(--line);color:var(--deep);font-size:13px;font-weight:600}
.ph .hbtns,.cta .hbtns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:26px}
.btn-ghost{background:rgba(255,255,255,.9);color:var(--deep);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--brand)}
.ph .himg{margin:34px auto 0;max-width:420px}
.ph .himg img{margin:0 auto;max-height:340px;width:auto;border-radius:0;filter:drop-shadow(0 30px 40px rgba(63,104,168,.3));animation:bob 5s ease-in-out infinite}
.ph .himg:has(img[src*="about/"],img[src*="uploads/dreamztrack"]){max-width:820px}
.ph .himg:has(img[src*="about/"]) img,.ph .himg:has(img[src*="uploads/dreamztrack"]) img{max-height:none;width:100%;border-radius:28px;box-shadow:var(--shadow);filter:none;animation:none}
@keyframes bob{50%{transform:translateY(-12px)}}
.sec-h.sec-l{text-align:left;margin-left:0}
.grid.two{grid-template-columns:repeat(2,1fr)}
.gc .gi.gl{color:#fff;font-weight:700;font-size:26px}
.gc .gi.gl i{width:30px;height:30px}
.gc .gi.bad{background:linear-gradient(135deg,#f58a8a,#d64545)}
.gc .more{display:inline-block;margin-top:14px;font-weight:600;font-size:14.5px;color:var(--deep);border:0}
.gc h3 a{border:0;color:inherit}
a.gc{display:block;color:inherit;border-bottom:0}
.media.vid{padding:0;max-width:900px;margin:0 auto;background:#0e1730;border-color:transparent}
.media.vid video{display:block;width:100%;height:auto;border-radius:30px}
.faqm{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px;align-items:start}
.faqm .fm{position:sticky;top:110px;display:grid;place-items:center}
.faqm .fm img{width:min(360px,100%);filter:drop-shadow(0 30px 40px rgba(63,104,168,.3));animation:bob 5s ease-in-out infinite}
.prose2{max-width:820px;margin:0 auto;padding:44px 48px;border-radius:30px;background:rgba(255,255,255,.94);border:1px solid var(--line);box-shadow:var(--shadow)}
.prose2 h2{font-size:clamp(22px,2.6vw,30px);margin:28px 0 12px}.prose2 h2:first-child{margin-top:0}
.prose2 h3{font-size:19px;margin:22px 0 8px}
.prose2 p{color:var(--muted);font-size:16.5px;line-height:1.85;margin-bottom:14px}
.prose2 ul,.prose2 ol{margin:0 0 16px 22px;color:var(--muted);font-size:16px;line-height:1.8}
.prose2 li{margin-bottom:6px}
.prose2 img{border-radius:18px;margin:14px 0}
.ans2{max-width:860px;margin:0 auto;padding:26px 30px;border-radius:26px;background:linear-gradient(135deg,#eef4fc,#fff);border:1px solid var(--line);box-shadow:var(--shadow)}
.ans2 b{display:block;font:600 13px var(--head);text-transform:uppercase;letter-spacing:.07em;color:var(--deep);margin-bottom:8px}
.ans2 p{color:var(--ink);font-size:17px}
.spec{--x:0}
@media (max-width:900px){.faqm,.grid.two{grid-template-columns:1fr}.faqm .fm{position:static;order:-1}.prose2{padding:28px 22px}}
.spec h1{font-size:clamp(30px,4vw,48px);margin-bottom:10px}
.spec h2{font-size:clamp(26px,3.2vw,40px);font-weight:600;letter-spacing:-.025em;text-align:center;margin-bottom:8px}
.spec h3{font-size:19px}
.spec>p,.spec .lead{color:var(--muted)}
.spec .lead.center{text-align:center}
.spec section.blk{padding:30px 0}

/* function directory links + search */
.imp .dz-search-form{display:flex;gap:12px;max-width:760px;margin:0 auto 38px}
.imp .dz-search-form input[type=text]{flex:1;min-width:0;padding:15px 22px;border-radius:999px;border:1px solid var(--line);background:#fff;font:15px var(--body);color:var(--ink);box-shadow:0 14px 30px -22px rgba(63,104,168,.6)}
.imp .dz-search-form input:focus{outline:2px solid rgba(95,135,196,.45);outline-offset:2px}
.imp .dz-fnlinks-grid{align-items:start}
.imp .dz-fnlinks-col h3{font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);margin:0 0 4px 4px}
.imp .dz-fnlinks-col a{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:20px;background:rgba(255,255,255,.92);border:1px solid var(--line);box-shadow:0 16px 32px -26px rgba(63,104,168,.55);transition:transform .25s,border-color .25s}
.imp .dz-fnlinks-col a:hover{transform:translateY(-3px);border-color:var(--brand)}
.imp .mi{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--soft);border:1px solid var(--line);color:var(--deep)}
.imp .mi i{width:20px;height:20px}
.imp .mt{display:flex;flex-direction:column;gap:2px;min-width:0}
.imp .mt b{font:600 15.5px var(--head);color:var(--ink)}
.imp .mt small{font-size:13.5px;line-height:1.5;color:var(--muted)}
.imp .dz-fnlinks-more{text-align:center;margin-top:34px}
.imp .dz-fnlinks-more .btn{margin:0 5px}
.imp .dz-latest .dai-guide{display:block;border-bottom:0}
.imp .dai-guide .dai-benefit-body{padding:26px}
.imp .dai-guide h3{font-size:18px;text-transform:none}
.imp .dai-guide h3::first-letter{text-transform:uppercase}
.imp .dai-cta{padding-top:30px}
.imp .dai-cta-box h2{margin-bottom:12px}
.imp .dai-cta-box p{max-width:620px;margin:0 auto}
@media (max-width:900px){.imp .dz-search-form{flex-direction:column}}

/* ---- dz-b "blk" pages: plans, guides, tools ---- */
[hidden]{display:none!important}
.imp.dz-theme{padding-top:112px}
.imp .dz-bc{width:min(1180px,100% - 40px);margin:0 auto;font-size:14px;color:var(--faint)}
.imp .dz-bc a{color:var(--deep);border:0}
.imp .dz-bc .sep{margin:0 8px}
.imp .dz-b{width:min(1180px,100% - 40px);margin:0 auto}
.imp .dz-b>.blk{padding:44px 0;text-align:left}
.imp .blk.hero{padding-top:30px;text-align:center}
.imp .blk.hero .eyebrow{margin-bottom:14px}
.imp .blk .lead{font-size:18px;max-width:62ch;margin:14px auto 0}
.imp .blk .lead.center,.imp .blk>h2{text-align:center}
.imp .blk>h2{margin-bottom:6px}
.imp .heroimg{width:min(900px,100%);margin:34px auto 0;border-radius:28px;box-shadow:var(--shadow)}
.imp .blk.image{text-align:center}
.imp .blk.image img{width:min(860px,100%);margin:0 auto;border-radius:24px;box-shadow:var(--shadow)}
.imp .blk.answer .answerbox{max-width:860px;margin:0 auto;padding:26px 30px;border-radius:24px;background:linear-gradient(135deg,#eef4fc,#fff);border:1px solid var(--line);box-shadow:var(--shadow)}
.imp .answerbox b{display:block;font:600 13px var(--head);text-transform:uppercase;letter-spacing:.07em;color:var(--deep);margin-bottom:8px}
.imp .answerbox p{color:var(--ink);font-size:17px}
.imp .prose{max-width:780px;margin:0 auto}
.imp .prose h2{margin:30px 0 14px;font-size:clamp(24px,2.6vw,32px)}
.imp .prose h3{margin:24px 0 10px}
.imp .prose p{margin-bottom:16px;font-size:17px;line-height:1.85}
.imp .prose ul,.imp .prose ol{margin:0 0 18px 22px;color:var(--muted);font-size:16.5px;line-height:1.8}
.imp .prose li{margin-bottom:8px}
.imp .toolteaser{max-width:760px;margin:0 auto;text-align:center;padding:36px!important;border-radius:28px;background:linear-gradient(135deg,#f3f8ff,#fff);border:1px solid var(--line)}
.imp .pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border-radius:999px;font:600 15px var(--body);border:1px solid var(--line);background:#fff;color:var(--deep);cursor:pointer;transition:transform .25s}
.imp .pill:hover{transform:translateY(-2px)}
.imp .pill.white{background:var(--grad);color:#fff;border:0;box-shadow:0 14px 28px -12px rgba(63,104,168,.7)}
.imp .pill.wa{background:#22b35a;color:#fff;border:0}
.imp .pill.big{padding:15px 30px;font-size:16px}
.imp .more{font-weight:600;color:var(--deep);font-size:14.5px}

/* plans */
.imp .plantoggle{display:flex;gap:6px;width:max-content;margin:26px auto 36px;padding:5px;border-radius:999px;background:var(--soft);border:1px solid var(--line)}
.imp .plantoggle button{padding:10px 26px;border-radius:999px;border:0;background:none;font:600 15px var(--body);color:var(--muted);cursor:pointer}
.imp .plantoggle button.on{background:#fff;color:var(--deep);box-shadow:0 8px 18px -10px rgba(63,104,168,.6)}
.imp .plangrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.imp .plan{position:relative;display:flex;flex-direction:column;padding:34px 30px;border-radius:30px;background:rgba(255,255,255,.94);border:1px solid var(--line);box-shadow:var(--shadow)}
.imp .plan.star{background:linear-gradient(150deg,#141e3e,#1f2f66 60%,#2e448c);border:0;box-shadow:0 40px 70px -36px rgba(20,30,62,.8)}
.imp .plan.star *{color:#fff}
.imp .plan.star .plantier{color:#9fc0f0}
.imp .plantier{font:600 13px var(--head);letter-spacing:.08em;text-transform:uppercase;color:var(--deep)}
.imp .plan h3{margin:8px 0 4px;font-size:19px}
.imp .planname{font-weight:600;color:var(--ink);font-size:16px}
.imp .planprice{margin:18px 0 6px;font:700 34px var(--head);color:var(--ink)}
.imp .planprice small{font:500 14px var(--body);color:var(--muted)}
.imp .plansave{font-size:13.5px;color:#1d8a4b;margin-bottom:12px}
.imp .plan.star .plansave{color:#8fe0b0}
.imp .planper .pill{width:100%;margin:10px 0 4px}
.imp .plan.star .pill.white{background:#fff;color:#141e3e}
.imp .planbest{margin-top:16px;font-size:14.5px;color:var(--muted);line-height:1.65}
.imp .plan.star .planbest{color:#cfdcf5}
.imp .planbadge{position:absolute;top:18px;right:18px;padding:5px 12px;border-radius:999px;font:600 12px var(--head);background:#f4c95d;color:#4a3300!important}
.imp .planalt{margin-top:30px;text-align:center;display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap}

/* lead / demo form */
.imp .leadbox{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:44px;border-radius:34px;background:linear-gradient(135deg,#f3f8ff,#fff 60%);border:1px solid var(--line);box-shadow:var(--shadow)}
.imp .leadgift{font-size:38px}
.imp .leadoffer h2{margin:8px 0 10px}
.imp .leadpoints{list-style:none;margin:18px 0}
.imp .leadpoints li{padding-left:28px;position:relative;margin-bottom:8px;color:var(--ink)}
.imp .leadpoints li::before{content:"✓";position:absolute;left:0;color:#1d8a4b;font-weight:700}
.imp .leadalt{display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:var(--muted)}
.imp .dzlead,.imp .toolbox form{display:flex;flex-direction:column;gap:14px}
.imp .dzlead label,.imp .toolinputs label{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--muted);font-weight:500}
.imp .dzlead input:not([type=hidden]):not([type=checkbox]),.imp .toolinputs input,.imp .dz-form input:not([type=hidden]):not([type=checkbox]),.imp .dz-form textarea,.imp .dz-form select{padding:14px 18px;border-radius:16px;border:1px solid var(--line);background:#fff;font:16px var(--body);color:var(--ink);width:100%}
.imp input:focus,.imp textarea:focus{outline:2px solid rgba(95,135,196,.45);outline-offset:1px}
.imp .consent{flex-direction:row!important;align-items:flex-start;gap:10px!important;font-size:13px!important}
.imp .consent input{margin-top:4px;flex:none;width:auto!important}
.imp .hp{position:absolute;left:-9999px}
.imp .formmsg{font-size:14px;color:#1d8a4b;min-height:20px}

/* tools */
.imp .toolbox{max-width:760px;margin:0 auto;padding:36px;border-radius:30px;background:rgba(255,255,255,.94);border:1px solid var(--line);box-shadow:var(--shadow)}
.imp .toolinputs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
.imp .toolresult{margin:16px 0;padding:18px 22px;border-radius:20px;background:var(--soft);font-weight:600;color:var(--deep)}

/* news */
.imp .dz-news-head{text-align:center;padding-top:130px!important}
.imp .dz-news-main{display:grid;gap:24px}
.imp .dz-news-card.big{display:grid;grid-template-columns:1.2fr 1fr}
.imp .dz-news-card.big .dz-news-img{aspect-ratio:auto;min-height:320px}
.imp .dz-news-card.big .dz-news-body{align-self:center;padding:36px}
.imp .dz-news-card h3{margin:6px 0 8px}
.imp .dz-news-card p{font-size:15px}
.imp .dz-news-card .more{display:inline-block;margin-top:12px}
.imp .dz-news-grid{margin-top:0}
.imp .dz-news{display:block}
.imp .dz-news-ask,.imp .dz-news-side{margin-top:26px}

@media (max-width:900px){
  .imp .plangrid,.imp .leadbox,.imp .toolinputs,.imp .dz-news-card.big{grid-template-columns:1fr}
  .imp .leadbox{padding:28px 22px}
  .imp.dz-theme{padding-top:96px}
}

/* looping clips that replaced animated gifs */
.gifv{display:block;width:100%;max-width:100%;height:auto;border-radius:20px;background:#eef3fb}

.spec .dai-section-header{text-align:center;max-width:760px;margin:0 auto 34px}
.spec .dai-section-header p{margin-top:12px;font-size:17px;color:var(--muted)}
.spec .dz-fnlinks-more{text-align:center;margin-top:34px}

/* function directory: tabs + cards */
.fnl-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 auto 34px;max-width:900px}
.fnl-tabs button{padding:10px 20px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.9);font:600 14.5px var(--body);color:var(--muted);cursor:pointer;transition:all .25s}
.fnl-tabs button:hover{color:var(--deep);border-color:var(--brand)}
.fnl-tabs button.on{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 12px 24px -12px rgba(63,104,168,.75)}
.fnl-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.fnl-cards a{position:relative;display:flex;flex-direction:column;gap:14px;padding:28px 26px 30px;border-radius:26px;background:rgba(255,255,255,.92);border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden;transition:transform .35s,border-color .3s}
.fnl-cards a:hover{transform:translateY(-6px);border-color:var(--brand)}
.fnl-cards a::after{content:"→";position:absolute;right:22px;top:24px;font-size:20px;color:var(--brand);opacity:0;transform:translateX(-6px);transition:all .3s}
.fnl-cards a:hover::after{opacity:1;transform:none}
.fnl-cards .mi{width:58px;height:58px;border-radius:18px;background:var(--grad);border:0;box-shadow:0 12px 24px -12px rgba(63,104,168,.8);color:#fff}
.fnl-cards .mi i,.fnl-cards .mi svg{width:26px;height:26px}
.fnl-cards .mt b{font-size:18px}
.fnl-cards .mt small{font-size:14.5px;line-height:1.6}
.fnl-cards a[hidden]{display:none!important}
@media (max-width:980px){.fnl-cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.fnl-cards{grid-template-columns:1fr}.fnl-tabs button{padding:9px 16px;font-size:14px}}
/* function tabs on a single row */
.fnl-tabs{flex-wrap:nowrap;max-width:none;justify-content:center;gap:8px;overflow-x:auto;scrollbar-width:none;padding:4px 2px 10px}
.fnl-tabs::-webkit-scrollbar{display:none}
.fnl-tabs button{flex:none;white-space:nowrap;padding:10px 18px;font-size:14px}
@media (max-width:1100px){.fnl-tabs{justify-content:flex-start}}

/* footer: soft glass panel on a pale gradient, with the glass logo ring and network lines (as on the workspace page) */
footer{position:relative;overflow:hidden;margin-top:70px;padding:80px 0 46px;border-top:0;
  background:radial-gradient(900px 420px at 80% 100%,rgba(176,199,232,.55),transparent 70%),radial-gradient(700px 380px at 0% 100%,rgba(190,208,236,.5),transparent 70%),linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(228,237,250,.7) 45%,rgba(214,227,246,.85) 100%)}
footer::before{content:"";position:absolute;right:-5vw;bottom:-16vw;width:min(44vw,620px);aspect-ratio:1;background:url(img/brand-ring.svg) center/contain no-repeat;opacity:.6;pointer-events:none}
footer::after{content:"";position:absolute;left:-2vw;bottom:-24px;width:min(28vw,400px);aspect-ratio:1;background:url(img/net-c.svg) left bottom/contain no-repeat;opacity:.85;pointer-events:none}
footer .wrap{position:relative;z-index:1;padding:46px 50px 30px;border-radius:36px;background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(255,255,255,.46));border:1px solid rgba(255,255,255,.9);
  box-shadow:0 40px 70px -40px rgba(63,104,168,.45),inset 0 1px 0 #fff;-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3)}
footer .foot{gap:30px}
footer h5{font:600 12px var(--head);letter-spacing:.09em;text-transform:uppercase;color:var(--deep);margin-bottom:14px}
footer li a,footer .ci a{color:var(--muted);border:0;transition:color .2s,transform .2s;display:inline-block}
footer li a:hover,footer .ci a:hover{color:var(--deep);transform:translateX(3px)}
footer .social a{background:rgba(255,255,255,.9);border:1px solid var(--line);box-shadow:0 10px 22px -14px rgba(63,104,168,.6);color:var(--deep);transition:transform .25s}
footer .social a:hover{transform:translateY(-3px)}
footer .copy{margin-top:34px;padding-top:22px;border-top:1px solid rgba(95,135,196,.18);text-align:center;color:var(--faint)}
@media (max-width:700px){footer .wrap{padding:30px 22px 22px;border-radius:28px}footer{padding:50px 0 30px}}
footer{padding-bottom:150px;border-top:0!important}
footer::before{bottom:-8vw}
@media (max-width:700px){footer{padding-bottom:90px}}

/* footer, tidied: calmer panel, smaller type, aligned columns, quieter decoration */
footer{padding:70px 0 110px;background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(234,241,252,.8) 60%,rgba(222,233,248,.95) 100%)}
footer::before{right:-4vw;bottom:-9vw;width:min(36vw,520px);opacity:.38}
footer::after{left:-3vw;bottom:-40px;width:min(24vw,340px);opacity:.4}
footer .wrap{width:min(1180px,100% - 40px);padding:44px 48px 26px;background:rgba(255,255,255,.93);-webkit-backdrop-filter:none;backdrop-filter:none;border:1px solid rgba(95,135,196,.16);box-shadow:0 30px 60px -40px rgba(63,104,168,.4)}
footer .foot{display:grid;grid-template-columns:1.25fr 1.45fr 1.1fr .8fr .8fr .95fr;gap:26px;align-items:start;font-size:14.5px;line-height:1.55}
footer .foot p,footer .ci,footer .ci a,footer li a{font-size:14.5px;line-height:1.55}
footer .fl{height:34px;width:auto;margin-bottom:14px}
footer .foot>div:first-child p{margin-bottom:16px;max-width:22ch}
footer h5{font-size:11.5px;margin-bottom:12px}
footer ul{list-style:none}
footer li{margin-bottom:9px}
footer li a{white-space:nowrap}
footer .ci{display:contents}
footer .ci>div{grid-column:2;margin-bottom:16px}
footer .ci>div:last-child{margin-bottom:0}
footer .foot>div:nth-child(3){grid-column:3;grid-row:1/span 3}
footer .social{display:flex;gap:10px}
footer .social a{width:36px;height:36px}
footer .copy{margin-top:28px;padding-top:20px;font-size:13px}
@media (max-width:1000px){footer .foot{grid-template-columns:1fr 1fr 1fr}footer .ci>div,footer .foot>div:nth-child(3){grid-column:auto;grid-row:auto}footer .foot>div:first-child{grid-column:1/-1}footer li a{white-space:normal}}
@media (max-width:640px){footer .foot{grid-template-columns:1fr 1fr}}

/* footer: no box, content sits straight on the gradient */
footer .wrap{background:none!important;border:0!important;box-shadow:none!important;border-radius:0;-webkit-backdrop-filter:none;backdrop-filter:none;padding:10px 0 20px}
footer{padding-top:60px}
footer .copy{border-top:1px solid rgba(95,135,196,.2)}
@media (max-width:700px){footer .wrap{padding:0}}

/* footer: your own background image (brand-bg.webp), bottom part, instead of the drawn ring + lines */
footer{background:url(img/brand-bg.webp) center bottom/100% auto no-repeat,linear-gradient(180deg,rgba(255,255,255,0),#fff 14%);padding:70px 0 120px}
footer::before,footer::after{content:none!important;display:none}
@media (max-width:900px){footer{background-size:auto 100%;background-position:78% bottom}}
footer{background:linear-gradient(180deg,#fff 0,rgba(255,255,255,.85) 18%,rgba(255,255,255,0) 42%),url(img/brand-bg.webp) center bottom/100% auto no-repeat;padding:70px 0 250px}
@media (max-width:900px){footer{background:linear-gradient(180deg,#fff 0,rgba(255,255,255,.85) 18%,rgba(255,255,255,0) 42%),url(img/brand-bg.webp) 78% bottom/auto 100% no-repeat;padding:50px 0 160px}}
/* footer logo keeps its proportions */
.foot img.fl,footer .fl{width:220px;max-width:100%;height:auto!important;aspect-ratio:1535/232;object-fit:contain}

/* =====================================================================
   GLASS UI — frosted-glass / soft-ui skin (cool light grey-blue, raised glass surfaces,
   glossy blue accents, pill controls with inset wells). Overrides earlier component styles.
   ===================================================================== */
:root{
  --gl-bg:#e8eef5;
  --gl-ink:#2a3850;
  --gl-surface:linear-gradient(150deg,rgba(255,255,255,.8),rgba(255,255,255,.42));
  --gl-edge:1px solid rgba(255,255,255,.92);
  --gl-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(150,172,200,.3),0 28px 48px -30px rgba(58,84,122,.42),0 2px 8px rgba(120,140,170,.1);
  --gl-well:inset 0 2px 7px rgba(110,132,165,.28),inset 0 -1px 0 rgba(255,255,255,.9);
  --gl-blue:linear-gradient(180deg,#86abdb 0%,#5686bd 52%,#3f6ba3 100%);
  --gl-blue-sh:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -3px 8px rgba(20,50,100,.28),0 14px 26px -12px rgba(63,104,168,.75),0 0 0 4px rgba(120,170,235,.14);
}
body{background:var(--gl-bg);color:var(--gl-ink)}
.bg{background:radial-gradient(900px 620px at 8% -4%,rgba(255,255,255,.95),transparent 62%),radial-gradient(1000px 700px at 100% 6%,rgba(196,212,234,.6),transparent 66%),radial-gradient(900px 700px at 100% 100%,rgba(184,203,230,.55),transparent 66%),linear-gradient(165deg,#eef2f8 0%,#e3eaf3 100%)!important}
.bg::before,.bg::after{opacity:.5}

/* ---- raised frosted surfaces ---- */
body :is(.card,.gc,.post,.ad,.faq details,.tw,.media,.legal,.stats-s>.wrap,.cust,.upd,.cta,.prose2,.ans2,.fnl-cards a,.leadbox,.toolbox,.dz-news-card,.imp .plan:not(.star),.imp .toolteaser,.hc-card,.gw,.trust,.clients,.tabs){
  background:var(--gl-surface)!important;border:var(--gl-edge)!important;box-shadow:var(--gl-shadow)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.25);backdrop-filter:blur(18px) saturate(1.25)}
body :is(.faq details[open]){background:linear-gradient(150deg,rgba(255,255,255,.92),rgba(255,255,255,.6))!important}
.gc:hover,.card:hover,.post:hover,.fnl-cards a:hover{box-shadow:var(--gl-shadow),0 34px 54px -30px rgba(58,84,122,.5)!important}
.imp .plan.star{background:linear-gradient(160deg,#5a86bd,#35598f 70%,#2b4a7a)!important;border:1px solid rgba(255,255,255,.35)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 40px 60px -34px rgba(30,58,104,.8)!important}

/* icon tiles: raised glass squares instead of flat gradients */
.gc .gi,.fnl-cards .mi,.mi,.dz-fn-icon{background:var(--gl-surface)!important;border:var(--gl-edge)!important;box-shadow:var(--gl-shadow)!important;color:var(--deep)}
.fnl-cards .mi{color:var(--deep)}
.gc .gi.gl,.gc .gi.bad{color:var(--deep)}

/* ---- buttons: glossy blue primary, frosted secondary ---- */
.btn,.pill{border-radius:999px;letter-spacing:.005em}
.btn-primary,.imp .pill.white,.pill.white{background:var(--gl-blue)!important;color:#fff!important;border:1px solid rgba(255,255,255,.55)!important;box-shadow:var(--gl-blue-sh)!important;text-shadow:0 1px 2px rgba(20,45,95,.35)}
.btn-primary:hover,.pill.white:hover{filter:brightness(1.06);transform:translateY(-2px)}
.btn-ghost,.btn-secondary,.imp .pill:not(.white):not(.wa){background:var(--gl-surface)!important;color:var(--deep)!important;border:var(--gl-edge)!important;box-shadow:var(--gl-well),0 6px 14px -8px rgba(60,85,125,.35)!important}
.btn-ghost:hover{border-color:#fff}

/* ---- nav: frosted bar, segmented menu ---- */
.hdr{background:linear-gradient(180deg,rgba(244,247,251,.82),rgba(236,242,249,.7))!important;border-bottom:1px solid rgba(255,255,255,.9)!important;box-shadow:0 10px 30px -22px rgba(58,84,122,.5)}
.nav ul{padding:4px;border-radius:999px;background:rgba(255,255,255,.35);box-shadow:var(--gl-well)}
.nav ul>li>a{color:var(--muted)}
.nav ul>li>a:hover{background:rgba(255,255,255,.7);color:var(--deep)}
.nav ul>li>a.on{background:var(--gl-blue)!important;color:#fff!important;box-shadow:var(--gl-blue-sh);text-shadow:0 1px 2px rgba(20,45,95,.35)}
.lang{background:rgba(255,255,255,.4);box-shadow:var(--gl-well);padding:3px}
.lang a.on{background:var(--gl-blue);color:#fff;box-shadow:var(--gl-blue-sh)}
.drop{background:var(--gl-surface);border:var(--gl-edge);box-shadow:var(--gl-shadow);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.drop a:hover{background:rgba(255,255,255,.7)}

/* ---- segmented controls (tabs, plan toggle) ---- */
.fnl-tabs{padding:5px;border-radius:999px;background:rgba(255,255,255,.4);box-shadow:var(--gl-well);width:max-content;max-width:100%;margin-left:auto;margin-right:auto;gap:4px}
.fnl-tabs button{background:transparent!important;border:0!important;box-shadow:none!important;color:var(--muted)}
.fnl-tabs button.on{background:var(--gl-blue)!important;color:#fff!important;box-shadow:var(--gl-blue-sh)!important;text-shadow:0 1px 2px rgba(20,45,95,.35)}
.imp .plantoggle{background:rgba(255,255,255,.4);box-shadow:var(--gl-well);border:0}
.imp .plantoggle button.on{background:var(--gl-blue);color:#fff;box-shadow:var(--gl-blue-sh);text-shadow:0 1px 2px rgba(20,45,95,.35)}

/* ---- inputs: inset wells ---- */
input[type=text],input[type=tel],input[type=email],input[type=number],textarea,select,.imp .dz-search-form input[type=text],.imp .dzlead input:not([type=hidden]):not([type=checkbox]),.imp .toolinputs input{
  background:rgba(255,255,255,.55)!important;border:1px solid rgba(255,255,255,.9)!important;box-shadow:var(--gl-well)!important;border-radius:999px}
textarea{border-radius:22px}

/* ---- chips / kickers ---- */
.ph .kick,.badge,.imp .dz-chip,.rm,.faq .ask{background:var(--gl-surface)!important;border:var(--gl-edge)!important;box-shadow:var(--gl-well)!important;color:var(--deep)}
.faq .pm{background:rgba(255,255,255,.6);box-shadow:var(--gl-well);border:0}
.faq details[open] .pm{background:var(--gl-blue);box-shadow:var(--gl-blue-sh)}

/* ---- footer on the grey base (your background image multiplied onto it) ---- */
footer{background-color:#e8eef5;background-image:linear-gradient(180deg,#e8eef5 0,rgba(232,238,245,.85) 18%,rgba(232,238,245,0) 42%),url(img/brand-bg.webp);background-position:0 0,center bottom;background-size:100% 100%,100% auto;background-repeat:no-repeat;background-blend-mode:normal,multiply}
footer .social a{background:var(--gl-surface)!important;box-shadow:var(--gl-shadow)!important;border:var(--gl-edge)!important}

/* =====================================================================
   DREAMY GLASS — airy pastel mesh gradient (blue, ice-aqua, a touch of blush), whiter see-through
   panels, softer shadows, lighter blue accents. Overrides the glass-ui layer above.
   ===================================================================== */
:root{
  --gl-bg:#f1f5fb;
  --gl-surface:linear-gradient(150deg,rgba(255,255,255,.66),rgba(255,255,255,.28));
  --gl-edge:1px solid rgba(255,255,255,.8);
  --gl-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(170,190,225,.18),0 30px 60px -36px rgba(100,130,190,.38),0 2px 10px rgba(130,155,205,.08);
  --gl-well:inset 0 2px 6px rgba(120,145,195,.2),inset 0 -1px 0 rgba(255,255,255,.85);
  --gl-blue:linear-gradient(135deg,#93bcf0 0%,#6f9be0 55%,#5f88d2 100%);
  --gl-blue-sh:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -2px 6px rgba(50,80,160,.18),0 14px 28px -14px rgba(80,120,205,.65),0 0 0 4px rgba(150,190,245,.16);
}
.bg{background:
  radial-gradient(760px 600px at 14% 8%,rgba(147,188,240,.62),transparent 66%),
  radial-gradient(820px 640px at 88% 14%,rgba(196,208,248,.62),transparent 68%),
  radial-gradient(760px 620px at 74% 78%,rgba(160,226,236,.5),transparent 68%),
  radial-gradient(700px 560px at 6% 88%,rgba(255,216,226,.5),transparent 68%),
  linear-gradient(170deg,#f7f9fd 0%,#edf2fa 100%)!important;
  background-size:140% 140%,140% 140%,140% 140%,140% 140%,100% 100%;
  animation:meshdrift 26s ease-in-out infinite alternate}
@keyframes meshdrift{0%{background-position:0% 0%,100% 0%,100% 100%,0% 100%,0 0}100%{background-position:18% 14%,84% 12%,82% 88%,12% 82%,0 0}}
@media (prefers-reduced-motion:reduce){.bg{animation:none}}
.bg::before,.bg::after{opacity:.28}

/* whiter, more transparent panels with a stronger blur */
body :is(.card,.gc,.post,.ad,.faq details,.tw,.media,.legal,.stats-s>.wrap,.cust,.upd,.cta,.prose2,.ans2,.fnl-cards a,.leadbox,.toolbox,.dz-news-card,.imp .plan:not(.star),.imp .toolteaser,.hc-card,.gw,.trust,.clients,.tabs){
  -webkit-backdrop-filter:blur(26px) saturate(1.4);backdrop-filter:blur(26px) saturate(1.4)}
.hdr{background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.4))!important;-webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4)}
.nav ul,.lang,.fnl-tabs,.imp .plantoggle{background:rgba(255,255,255,.42)}
.imp .plan.star{background:linear-gradient(160deg,#7aa6e6,#5a86d2 70%,#4a74c0)!important}

/* soft text shadow only where needed; calmer labels */
.btn-primary,.pill.white,.nav ul>li>a.on,.lang a.on,.fnl-tabs button.on,.imp .plantoggle button.on{text-shadow:0 1px 2px rgba(40,70,140,.28)}

/* footer follows the lighter base */
footer{background-color:#f1f5fb;background-image:linear-gradient(180deg,#f1f5fb 0,rgba(241,245,251,.85) 18%,rgba(241,245,251,0) 42%),url(img/brand-bg.webp)}
/* wrappers that are not the visible card: no glass of their own */
.stats-s>.wrap{background:none!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

/* news cards + tool page: layout (the glass skin only styles surfaces) */
.imp .dz-news{display:block}
.imp .dz-news-main{display:grid;gap:24px}
.imp .dz-news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.imp .dz-news-card{display:flex;flex-direction:column;overflow:hidden;border-radius:26px;color:inherit}
.imp .dz-news-card.big{display:grid;grid-template-columns:1.15fr 1fr}
.imp .dz-news-img{display:block;aspect-ratio:16/10;overflow:hidden;border-radius:0;box-shadow:none;background:#e3ebf6}
.imp .dz-news-card.big .dz-news-img{aspect-ratio:auto;min-height:300px}
.imp .dz-news-img img{display:block;width:100%;height:100%;object-fit:cover}
.imp .dz-news-body{padding:22px 24px 26px}
.imp .dz-news-body h3{font-size:18px;margin:6px 0 8px}
.imp .dz-news-card.big .dz-news-body{align-self:center;padding:36px}
.imp .dz-news-card.big h3{font-size:clamp(22px,2.4vw,30px)}
.imp .dz-news-body p{font-size:15px;color:var(--muted)}
.imp .dz-news-date{font-size:13px;color:var(--faint)}
.imp .dz-news-card .more{display:inline-block;margin-top:12px;font-weight:600;color:var(--deep);font-size:14.5px}
@media (max-width:900px){.imp .dz-news-grid{grid-template-columns:1fr}.imp .dz-news-card.big{grid-template-columns:1fr}}
.spec .toolbox,.spec .toolsend,.spec .leadcard{max-width:760px;margin-left:auto;margin-right:auto}
.spec .toolsend{margin-top:26px;padding:30px;border-radius:30px}
.spec .tool{text-align:center}
.spec .tool .toolinputs,.spec .tool form{text-align:left}

/* footer blends into the page: no solid band, your image multiplied over the page background and faded in from the top */
footer{background:none!important;border-top:0!important}
footer::before{content:""!important;display:block!important;position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url(img/brand-bg.webp) center bottom/100% auto no-repeat;mix-blend-mode:multiply;opacity:.9;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.55) 30%,#000 60%);mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.55) 30%,#000 60%)}
footer::after{content:none!important;display:none!important}
@media (max-width:900px){footer::before{background-size:auto 100%;background-position:78% bottom}}
footer::before{left:0!important;right:0!important;top:0!important;bottom:0!important;width:auto!important;height:auto!important;aspect-ratio:auto!important}

/* text selection: dark */
::selection{background:#141e3e;color:#fff;text-shadow:none}
::-moz-selection{background:#141e3e;color:#fff;text-shadow:none}

/* custom cursor (fine pointers only) */
.cur-dot,.cur-ring{position:fixed;left:0;top:0;z-index:99999;pointer-events:none;opacity:0;transition:opacity .25s}
.cur-on .cur-dot,.cur-on .cur-ring{opacity:1}
.cur-dot{width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#141e3e;box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 12px rgba(95,135,196,.7)}
.cur-ring{width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;border:1.5px solid rgba(20,30,62,.55);background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  box-shadow:0 0 0 1px rgba(255,255,255,.7),0 8px 20px -10px rgba(40,70,130,.6);transition:opacity .25s,width .22s,height .22s,margin .22s,background .22s,border-color .22s}
.cur-ring.hot{width:60px;height:60px;margin:-30px 0 0 -30px;background:rgba(120,165,235,.22);border-color:rgba(20,30,62,.35)}
.cur-ring.down{width:26px;height:26px;margin:-13px 0 0 -13px;background:rgba(20,30,62,.18)}
.has-cur.cur-on,.has-cur.cur-on *{cursor:none!important}
.has-cur.cur-on.cur-text,.has-cur.cur-on.cur-text *,.has-cur.cur-on input,.has-cur.cur-on textarea,.has-cur.cur-on select,.has-cur.cur-on video{cursor:auto!important}
.cur-text .cur-ring,.cur-text .cur-dot{opacity:0}
@media (hover:none),(pointer:coarse){.cur-dot,.cur-ring{display:none}}
/* stats strip: only the inner rounded card is glass (the wrapper must stay invisible) */
html body main .stats-s>.wrap{background:none!important;background-image:none!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-radius:0!important}
html body main section.stats-s>.wrap.wrap.wrap{background:none!important;background-image:none!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-radius:0!important}
/* stats strip: real frosted glass (see-through, blurred) */
html body main section.stats-s .stats{background:linear-gradient(150deg,rgba(255,255,255,.5),rgba(255,255,255,.18))!important;border:1px solid rgba(255,255,255,.8)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(170,190,225,.2),0 30px 60px -36px rgba(100,130,190,.4)!important;
  -webkit-backdrop-filter:blur(26px) saturate(1.5);backdrop-filter:blur(26px) saturate(1.5)}

/* header background only after scrolling */
.hdr{background:transparent!important;border-bottom:1px solid transparent!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;transition:background .3s,border-color .3s,box-shadow .3s,backdrop-filter .3s}
.hdr.scrolled{background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.42))!important;border-bottom-color:rgba(255,255,255,.9)!important;box-shadow:0 10px 30px -22px rgba(58,84,122,.5)!important;-webkit-backdrop-filter:blur(22px) saturate(1.4)!important;backdrop-filter:blur(22px) saturate(1.4)!important}

/* smooth scrolling: drop the expensive effects that repaint on every scroll frame.
   (the background behind the cards is a soft gradient, so the blur was barely visible anyway) */
html body :is(.card,.gc,.post,.ad,.faq details,.tw,.media,.legal,.cust,.upd,.cta,.prose2,.ans2,.fnl-cards a,.leadbox,.toolbox,.dz-news-card,.imp .plan,.imp .toolteaser,.hc-card,.gw,.trust,.clients,.tabs,.stats-s .stats,.drop,.nav ul,.lang){
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.bg{animation:none!important}
.cur-ring{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.gc,.card,.post,.fnl-cards a,.faq details,.cta{will-change:auto}

/* dropdown menus: solid frosted panel (nothing shows through), compact mega menu centred under the bar */
html body .drop{background:linear-gradient(160deg,rgba(255,255,255,.98),rgba(244,248,253,.96))!important;border:1px solid rgba(255,255,255,.95)!important;
  box-shadow:inset 0 1px 0 #fff,0 30px 60px -24px rgba(58,84,122,.5)!important;-webkit-backdrop-filter:blur(18px)!important;backdrop-filter:blur(18px)!important;z-index:60}
.hdr .wrap{position:relative}
.has-drop.mega{position:static}
html body .drop.mg{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px 18px;width:min(1040px,calc(100vw - 40px));min-width:0;padding:22px 24px 16px;left:50%;right:auto;top:calc(100% + 4px);transform:translate(-50%,8px)}
html body .has-drop:hover .drop.mg,html body .has-drop:focus-within .drop.mg{transform:translate(-50%,0)}
.drop.mg .mgc{display:flex;flex-direction:column;gap:2px}
.drop.mg h6{margin:0 0 8px 12px;font-size:11.5px}
.drop.mg a{padding:7px 12px;font-size:14px;line-height:1.35;border-radius:12px;white-space:normal}
.drop.mg .mgall{grid-column:1/-1;margin-top:8px;padding:12px 12px 4px;border-top:1px solid rgba(95,135,196,.18);border-radius:0}
@media (max-width:1100px){html body .drop.mg{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* tool pages: centred heading, breathing room under the header, glass form card */
.imp>section:first-child>.wrap>.spec:has(>.eyebrow){padding-top:110px}
.spec>.eyebrow{display:block;width:max-content;margin:0 auto 12px}
.spec>h1,.spec>p{text-align:center;margin-left:auto;margin-right:auto}
.spec>p{max-width:60ch;margin-bottom:30px}
html body .spec .leadcard{background:var(--gl-surface)!important;border:var(--gl-edge)!important;box-shadow:var(--gl-shadow)!important;padding:30px;border-radius:30px;display:flex;flex-direction:column;gap:14px}
.spec .leadcard h3{margin:0}
.spec .leadcard .small{font-size:14px;color:var(--muted)}

/* article / guide pages: every block (hero image, answer box, text, images, tool teaser) shares one width */
.imp>section>.wrap>.prose2,.imp>section>.wrap>.ans2,.imp>section>.wrap>.media:only-child,.imp>section>.wrap>.spec .toolteaser,.imp>section>.wrap>.cta{width:min(960px,100%);max-width:960px;margin-left:auto;margin-right:auto}
.imp>section>.wrap>.media:only-child img{width:100%}
.ph .himg:has(img[src*="about/"]),.ph .himg:has(img[src*="uploads/dreamztrack"]){width:min(960px,100%);max-width:960px}

/* long headings wrap (Chinese titles), list pages clear the header */
.ph h1 .hl2,.ph h1 .w{white-space:normal}
.imp>section:first-child>.wrap>.spec:not(:has(>.eyebrow)){padding-top:110px}
.spec>h2{margin-bottom:34px}
.spec>.grid{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.spec>.grid{grid-template-columns:1fr}}

/* article lists: one glass card per point, with an icon */
.prose2 .steps{display:grid;gap:12px;margin:18px 0 22px}
.prose2 .step{display:flex;align-items:flex-start;gap:16px;padding:16px 18px;border-radius:20px;background:var(--gl-surface);border:var(--gl-edge);box-shadow:var(--gl-shadow);transition:transform .3s}
.prose2 .step:hover{transform:translateY(-2px)}
.prose2 .step .ic{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:var(--gl-blue);color:#fff;font:700 17px var(--head);box-shadow:var(--gl-blue-sh);text-shadow:0 1px 2px rgba(40,70,140,.3)}
.prose2 .step .ic i,.prose2 .step .ic svg{width:20px;height:20px}
.prose2 .step .tx{min-width:0;padding-top:1px}
.prose2 .step b{display:block;font:600 16.5px var(--head);color:var(--ink);margin-bottom:3px}
.prose2 .step p{margin:0;font-size:15.5px;line-height:1.65;color:var(--muted)}

/* chat demo */
.chatbox{width:min(560px,100%);margin:0 auto;padding:22px;border-radius:32px;background:var(--gl-surface);border:var(--gl-edge);box-shadow:var(--gl-shadow);display:flex;flex-direction:column;gap:16px}
.chead{display:flex;align-items:center;gap:12px;padding:6px 6px 14px;border-bottom:1px solid rgba(95,135,196,.16)}
.chead .av{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--gl-blue);color:#fff;font:700 14px var(--head);box-shadow:var(--gl-blue-sh)}
.chead b{display:block;font:600 16px var(--head);color:var(--ink)}
.chead small{color:var(--muted);font-size:13px}
.clog{display:flex;flex-direction:column;gap:10px;min-height:300px}
.cm{max-width:82%;padding:12px 16px;border-radius:20px;font-size:15.5px;line-height:1.55;opacity:0;transform:translateY(8px) scale(.98);transition:opacity .35s,transform .35s;display:none}
.cm.on{display:block;opacity:1;transform:none}
.cm.ai{align-self:flex-start;background:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.95);box-shadow:0 8px 18px -12px rgba(60,85,125,.35);color:var(--ink);border-bottom-left-radius:6px}
.cm.me{align-self:flex-end;background:var(--gl-blue);color:#fff;border-bottom-right-radius:6px;box-shadow:var(--gl-blue-sh);text-shadow:0 1px 2px rgba(40,70,140,.25)}
.cm.typing{display:flex;gap:5px;opacity:1;transform:none;padding:14px 18px}
.cm.typing i{width:7px;height:7px;border-radius:50%;background:var(--faint);animation:blink 1s infinite}
.cm.typing i:nth-child(2){animation-delay:.15s}.cm.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{50%{opacity:.25;transform:translateY(-2px)}}
.chat-replay{align-self:center}

/* article pages: tighter rhythm between blocks */
.imp>section:has(>.wrap>:is(.prose2,.ans2,.chatbox,.media:only-child,.cta,.spec .toolteaser)){padding-top:12px;padding-bottom:18px}
.imp>section:has(>.wrap>.chatbox){padding-top:36px;padding-bottom:36px}
.imp>section:has(>.wrap>.chatbox) .sec-h{margin-bottom:26px}
.prose2{padding:36px 40px}

/* "Sound familiar?" and "How it fixes it": heading on one side, cards stacked on the other */
.lr{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:60px;align-items:center}
.lr.rev{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.lr.rev .sec-h{order:2}
.lr .sec-h{margin:0;max-width:none;text-align:left}
.lr .sec-h h2{font-size:clamp(28px,3.4vw,44px)}
.lr .stack{display:grid;gap:16px}
.lr .stack .gc{display:flex;align-items:center;gap:18px;padding:20px 24px}
.lr .stack .gc .gi{flex:none;margin:0;width:54px;height:54px;border-radius:16px}
.lr .stack .gc h3{font-size:18px;margin:0 0 2px}
.lr .stack .gc p{margin:0;font-size:15.5px}
.lr .stack .gc:not(:has(h3)) p{font-size:17px;font-weight:500;color:var(--ink)}
.lr .stack .gc>*:not(.gi){min-width:0}
@media (max-width:900px){.lr,.lr.rev{grid-template-columns:1fr;gap:28px}.lr.rev .sec-h{order:0}}
.lr .stack .gc{display:grid!important;grid-template-columns:54px minmax(0,1fr);column-gap:18px;row-gap:2px;align-items:center}
.lr .stack .gc .gi{grid-row:1/span 2;grid-column:1;align-self:center}
.lr .stack .gc h3,.lr .stack .gc p{grid-column:2}
.lr .stack .gc:not(:has(h3)) p{grid-row:1/span 2;align-self:center}

/* "How it fixes it": two rows - heading on top, the three boxes side by side underneath */
.lr.rev{grid-template-columns:1fr!important;gap:36px}
.lr.rev .sec-h{order:0;text-align:center;margin:0 auto;max-width:780px}
.lr.rev .stack{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
html body .lr.rev .stack .gc{display:flex!important;flex-direction:column;align-items:flex-start;gap:12px;padding:28px 26px}
.lr.rev .stack .gc .gi{width:58px;height:58px;margin:0 0 6px}
.lr.rev .stack .gc h3{font-size:19px}
@media (max-width:900px){.lr.rev .stack{grid-template-columns:1fr}.lr.rev .sec-h{text-align:left;margin:0}}

/* chat: picture / video / listing / product tiles instead of [bracket] text */
.cm.mmedia{display:none;flex-wrap:wrap;gap:10px;max-width:86%;padding:8px;background:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.95);border-radius:20px;border-bottom-left-radius:6px;box-shadow:0 8px 18px -12px rgba(60,85,125,.35)}
.cm.mmedia.on{display:flex}
.cm.mmedia .tile{margin:0;flex:1 1 150px;max-width:230px}
.cm.mmedia .tile .img{position:relative;aspect-ratio:3/2;border-radius:14px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(95,135,196,.15)}
.cm.mmedia .tile .img svg{display:block;width:100%;height:100%}
.cm.mmedia .tile figcaption{padding:6px 4px 2px;font-size:13px;line-height:1.35;color:var(--muted)}
.cm.mmedia .tile.video .play{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:rgba(255,255,255,.88);box-shadow:0 8px 18px -8px rgba(30,50,100,.55)}
.cm.mmedia .tile.video .play::after{content:"";position:absolute;left:18px;top:14px;border-style:solid;border-width:9px 0 9px 14px;border-color:transparent transparent transparent #4f7dc0}
.cm.mmedia .tile.video em{position:absolute;right:8px;bottom:6px;padding:2px 7px;border-radius:999px;background:rgba(20,30,62,.55);color:#fff;font:600 11px var(--body);font-style:normal}
.cm.mmedia .tile.voice{display:flex;align-items:center;gap:10px;padding:6px 10px 6px 6px;max-width:none;flex:1 1 220px}
.cm.mmedia .tile.voice .pl{width:34px;height:34px;border-radius:50%;background:var(--gl-blue);position:relative;flex:none}
.cm.mmedia .tile.voice .pl::after{content:"";position:absolute;left:13px;top:10px;border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent #fff}
.cm.mmedia .tile.voice .wf{display:flex;align-items:center;gap:3px;flex:1;height:26px}
.cm.mmedia .tile.voice .wf i{flex:1;max-width:5px;border-radius:3px;background:#9ab9e6;height:40%}
.cm.mmedia .tile.voice .wf i:nth-child(3n){height:90%}.cm.mmedia .tile.voice .wf i:nth-child(3n+1){height:65%}.cm.mmedia .tile.voice .wf i:nth-child(5n){height:30%}
.cm.mmedia .tile.voice small{color:var(--faint);font-size:12px}

/* related guide cards */
.gc.gcard{display:flex;flex-direction:column;color:inherit}
.gc.gcard .gm{margin:-8px -6px 16px}
.gc.gcard h3{font-size:19px;line-height:1.3}
.gc.gcard p{flex:1}
.gc.gcard .more{margin-top:14px;font-weight:600;font-size:14.5px;color:var(--deep)}

/* company pages (Who we are, Culture, Career, Partners...): text boxes match the width of the card grids and photos around them */
html body .imp:has(.grid)>section>.wrap>.prose2{width:100%;max-width:none}
html body .imp:has(.grid)>section>.wrap>:is(.cta,.media:only-child){width:100%;max-width:none}

/* photo + text rows (Culture, Career...): alternating sides, text-only rows centred */
.rows{display:grid;gap:70px}
.rows .sp{gap:56px}
.rows .rowh{font-size:clamp(24px,2.6vw,32px);margin-bottom:12px}
.rows .sp p,.rows .rowtxt p{font-size:17px;line-height:1.75;color:var(--muted)}
.rows .rowtxt{max-width:820px;margin:0 auto;text-align:center}
.rows .media img{aspect-ratio:4/3;object-fit:cover;width:100%}

/* partner cards: logo tile on top, name and description below */
.pcard{display:flex;flex-direction:column;gap:6px}
.pcard .plogo{display:grid;place-items:center;height:130px;margin:-6px -4px 16px;padding:20px 28px;border-radius:20px;background:rgba(255,255,255,.92);border:1px solid rgba(95,135,196,.14);box-shadow:inset 0 1px 0 #fff}
.pcard .plogo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.pcard h3{font-size:20px;margin:0}
.pcard p{margin:0;font-size:15.5px;line-height:1.65;color:var(--muted)}
/* partner logos: smaller, with more air around them */
.pcard .plogo{height:96px;padding:18px 30px}
.pcard .plogo img{max-width:62%;max-height:58px}

/* contact / application form */
.dz-form{max-width:860px;margin:0 auto;padding:38px 42px;border-radius:32px;background:var(--gl-surface);border:var(--gl-edge);box-shadow:var(--gl-shadow)}
.dz-form-head{text-align:center;margin-bottom:24px}
.dz-form-head p{color:var(--muted);font-size:16.5px}
.dz-form form{display:flex;flex-direction:column;gap:18px}
.dz-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.dz-form-grid .wide{grid-column:1/-1}
.dz-form label{display:flex;flex-direction:column;gap:7px;font-size:14px;font-weight:600;color:var(--muted)}
.dz-form label span{padding-left:6px}
.dz-form input:not([type=checkbox]):not([type=hidden]),.dz-form select{height:50px}
.dz-form textarea{min-height:120px;resize:vertical}
.dz-form .consent{flex-direction:row;align-items:flex-start;gap:12px;font-weight:400;font-size:13.5px;line-height:1.55}
.dz-form .consent input{flex:none;margin-top:3px;width:18px;height:18px}
.dz-form .hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.dz-form .btn{align-self:center;margin-top:4px}
.dz-form .formmsg{text-align:center;min-height:20px}
@media (max-width:700px){.dz-form{padding:26px 20px}.dz-form-grid{grid-template-columns:1fr}}
/* company pages: hero photo, text boxes, grids and the form all share the full 1180px width */
html body .imp:has(.grid) .ph .himg:has(img){width:min(1180px,100%);max-width:1180px}
html body .imp:has(.grid) .dz-form{max-width:none}
html body .imp:has(.grid) .ph>.wrap{width:min(1180px,100% - 40px);max-width:none}

/* news article system */
.nws{display:flex;flex-wrap:wrap;gap:16px 20px;align-items:center;justify-content:space-between;padding:18px 20px;border-radius:28px;background:var(--gl-surface);border:var(--gl-edge);box-shadow:var(--gl-shadow);margin-bottom:18px}
.nsearch{flex:1 1 320px}
.nsearch input{width:100%;height:52px;padding:0 24px 0 50px;border-radius:999px;font:16px var(--body);color:var(--ink);background:rgba(255,255,255,.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f87c4' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 20px 50%/20px}
.nfilters{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.ntabs{margin:0!important}
#ntopic{height:46px;padding:0 40px 0 20px;border-radius:999px;font:600 14.5px var(--body);color:var(--deep);cursor:pointer;appearance:none;-webkit-appearance:none;background:rgba(255,255,255,.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f87c4' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center/16px}
.ncount{margin:0 6px 20px;font-size:14px;color:var(--faint)}
.ngrid{grid-template-columns:repeat(3,1fr)}
.ncard{display:flex!important;flex-direction:column;color:inherit}
.ncard[hidden]{display:none!important}
.ncard .gm{margin:-8px -6px 16px}
.ncard .nmeta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:10px}
.ncard .ntag{padding:4px 12px;border-radius:999px;font:600 12px var(--head);letter-spacing:.02em;color:var(--deep);background:rgba(255,255,255,.7);border:var(--gl-edge);box-shadow:var(--gl-well)}
.ncard .ndate{font-size:13px;color:var(--faint)}
.ncard h3{font-size:19px;line-height:1.3;margin-bottom:8px}
.ncard p{flex:1;font-size:15px}
.ncard .more{margin-top:14px;font-weight:600;font-size:14.5px;color:var(--deep)}
.nmore{text-align:center;margin-top:36px}
.nnone{text-align:center;padding:50px 0;color:var(--muted);font-size:17px}
@media (max-width:980px){.ngrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.ngrid{grid-template-columns:1fr}.nws{padding:16px}}
.nsearch input{border:1px solid rgba(255,255,255,.95)!important;box-shadow:var(--gl-well)!important;outline:0}
.nsearch input:focus{box-shadow:var(--gl-well),0 0 0 3px rgba(120,170,235,.28)!important}

/* news pagination */
.npager{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:40px}
.npager[hidden]{display:none!important}
.npager button{min-width:46px;height:46px;padding:0 14px;border-radius:999px;border:var(--gl-edge);background:var(--gl-surface);box-shadow:var(--gl-well),0 6px 14px -8px rgba(60,85,125,.35);font:600 15px var(--body);color:var(--deep);cursor:pointer;transition:transform .2s}
.npager button:hover:not(:disabled){transform:translateY(-2px)}
.npager button.on{background:var(--gl-blue);color:#fff;border-color:transparent;box-shadow:var(--gl-blue-sh);text-shadow:0 1px 2px rgba(40,70,140,.3)}
.npager button:disabled{opacity:.4;cursor:default}
.npager span{color:var(--faint);padding:0 4px}

/* every page header gets the glass logo ring in the corner, like the home hero */
.ph{position:relative;isolation:isolate}
.ph::after{content:"";position:absolute;right:-90px;top:50%;margin-top:-300px;width:640px;height:640px;z-index:0;pointer-events:none;
  background:url(img/brand-bg.webp) 99.5% 91.7%/250% auto no-repeat;mix-blend-mode:multiply;opacity:.95;
  -webkit-mask-image:radial-gradient(circle,#000 52%,transparent 70%);mask-image:radial-gradient(circle,#000 52%,transparent 70%)}
@media (max-width:1000px){.ph::after{width:420px;height:420px;right:-120px;margin-top:-210px}}
.ph::after{display:block;left:auto;transform:none;font-size:0;letter-spacing:0;color:transparent;white-space:normal}
.ph{overflow:visible}
.ph::after{margin-top:-260px;width:600px;height:600px}
/* header ring: smaller; the topic chips are replaced by the filter tabs below, so they are hidden */
.ph::after{width:400px;height:400px;right:-40px;margin-top:-190px}
@media (max-width:1000px){.ph::after{width:280px;height:280px;right:-80px;margin-top:-140px}}
.dz-chips{display:none}
/* header ring: a bit lower, clear of the menu bar */
.ph::after{margin-top:-100px}
@media (max-width:1000px){.ph::after{margin-top:-70px}}
/* header ring: more see-through */
.ph::after{opacity:.55}

/* Chinese / Malay: heading sizes that suit the longer text */
html[lang=zh] .hr2 h1{font-size:clamp(34px,4.3vw,62px);line-height:1.2;letter-spacing:0}
html[lang=zh] .hr2 h1 .hl2{white-space:normal}
html[lang=ms] .hr2 h1{font-size:clamp(34px,4.6vw,66px)}
html[lang=zh] .ph h1{font-size:clamp(32px,4.6vw,56px);line-height:1.25}
html[lang=zh] .hr2 h1{font-size:clamp(30px,3.5vw,54px)}
html[lang=ms] .hr2 h1{font-size:clamp(32px,4.1vw,60px)}

/* system updates timeline */
.ustats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:760px;margin:0 auto 30px}
.ustat{padding:18px 20px;border-radius:22px;text-align:center;background:var(--gl-surface);border:var(--gl-edge);box-shadow:var(--gl-shadow)}
.ustat b{display:block;font:700 clamp(20px,2.4vw,28px) var(--head);color:var(--deep)}.ustat span{font-size:13.5px;color:var(--muted)}
.utools{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;max-width:980px;margin:0 auto 34px}
.uchips{margin:0;flex-wrap:wrap}.uchips i{font-style:normal;opacity:.65;font-size:.85em;margin-left:2px}
.usearch{display:flex;align-items:center;gap:8px;flex:1;min-width:220px;max-width:340px;padding:0 16px;border-radius:999px;background:rgba(255,255,255,.55);box-shadow:var(--gl-well);border:1px solid rgba(255,255,255,.9);color:var(--muted)}
.usearch i{width:18px;height:18px;flex:none}.usearch input{flex:1;border:0!important;box-shadow:none!important;background:transparent!important;padding:12px 0;font:inherit;outline:0;min-width:0}
.utl{position:relative;max-width:980px;margin:0 auto;padding-left:34px}
.utl::before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:2px;border-radius:2px;background:linear-gradient(180deg,rgba(63,107,163,.55),rgba(63,107,163,.08))}
.uday{margin-bottom:34px;position:relative}
.udate{position:relative;margin-bottom:14px}.udate::before{content:"";position:absolute;left:-34px;top:50%;width:20px;height:20px;margin-top:-10px;border-radius:50%;background:var(--gl-blue);box-shadow:var(--gl-blue-sh)}
.udate span{display:inline-block;padding:7px 16px;border-radius:999px;font:600 14px var(--head);color:var(--deep);background:var(--gl-surface);border:var(--gl-edge);box-shadow:var(--gl-well)}
.ulist{display:grid;gap:14px}
.uitem{padding:22px 26px;border-radius:24px;background:var(--gl-surface)!important;border:var(--gl-edge)!important;box-shadow:var(--gl-shadow)!important;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.uitem h3{font-size:19px;margin:10px 0 6px}.uitem p{color:var(--muted);line-height:1.7;margin:0 0 8px}
.uitem ul{margin:6px 0 0 20px;color:var(--ink);line-height:1.7}.uitem li{margin-bottom:3px}
.umeta{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--faint)}.umeta time{margin-left:auto;font-variant-numeric:tabular-nums}
.ubadge{padding:3px 11px;border-radius:999px;font-weight:600;font-size:12.5px;background:rgba(86,134,189,.14);color:var(--deep)}
.ubadge.automation{background:rgba(70,160,130,.15);color:#1d6b55}.ubadge.channels{background:rgba(214,150,60,.17);color:#8a5a14}
.unew{padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:700;color:#fff;background:var(--gl-blue)}
.unone,.ufoot{text-align:center;color:var(--muted);margin-top:10px;font-size:14px}
@media (max-width:640px){.ustats{grid-template-columns:1fr}.utl{padding-left:28px}.udate::before{left:-28px}.usearch{max-width:none}}
.ulist{grid-template-columns:minmax(0,1fr)}.uitem{width:auto;max-width:none;margin:0;justify-self:stretch}
.nav ul>li>a,.hdr .btn{white-space:nowrap}@media (max-width:1180px){.nav ul>li>a{padding-left:11px;padding-right:11px;font-size:14px}}

/* core values: mascot art, centred (5 = 3 + 2) */
.grid.cvs{display:flex;flex-wrap:wrap;justify-content:center;gap:22px}
.grid.cvs>.gc{flex:0 1 calc((100% - 44px)/3);text-align:center;display:flex;flex-direction:column;align-items:center}
.cvm{height:170px;display:grid;place-items:center;margin-bottom:12px}
.cvm img{max-height:170px;max-width:78%;width:auto;height:auto;filter:drop-shadow(0 14px 18px rgba(40,70,120,.22));transition:transform .4s}
.gc:hover .cvm img{transform:translateY(-6px) scale(1.04)}
@media (max-width:900px){.grid.cvs>.gc{flex-basis:calc((100% - 22px)/2)}}
@media (max-width:560px){.grid.cvs>.gc{flex-basis:100%}}
body .grid.cvs>.gc{margin:0!important;width:auto;max-width:none}

/* career: vacancies by department */
.jobs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:start;max-width:1040px;margin:0 auto}
.jgroup{padding:24px 26px 14px;border-radius:28px;background:var(--gl-surface)!important;border:var(--gl-edge)!important;box-shadow:var(--gl-shadow)!important;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.jgroup h3{display:flex;align-items:center;gap:10px;font-size:18px;margin:0 0 10px;color:var(--deep)}
.jgroup h3 i{font-style:normal;font-size:12.5px;font-weight:700;padding:2px 10px;border-radius:999px;background:var(--gl-blue);color:#fff}
.job{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0;border-top:1px solid rgba(120,150,190,.22)}
.job .jt{display:flex;flex-direction:column;gap:5px;min-width:0}
.job b{font:600 16px/1.35 var(--head);color:var(--ink)}
.jtype{align-self:flex-start;font-size:12.5px;font-weight:600;color:var(--deep);padding:3px 11px;border-radius:999px;background:rgba(86,134,189,.14)}
.job .btn{flex:none;padding:10px 18px;font-size:14px;white-space:nowrap}
.job .btn svg{width:15px;height:15px;margin-left:6px}
@media (max-width:820px){.jobs{grid-template-columns:1fr}}
.sec-h:has(+.jobs) p{max-width:720px;margin:10px auto 0}.sec-h:has(+.jobs){margin-bottom:30px}
.fvid{padding:118px 0 0}.fvid .media.vid{max-width:960px}.fvid video{border-radius:26px}@media (max-width:700px){.fvid{padding-top:96px}}.fvid+.imp .ph{padding-top:50px}
.fvid{padding:0!important;margin-top:-10px}.fvid+*{margin-top:0}
.fvid .media{position:relative;cursor:pointer}
.fvbtn{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;border:1px solid rgba(255,255,255,.7);color:#fff;background:var(--gl-blue);box-shadow:var(--gl-blue-sh);display:grid;place-items:center;opacity:0;transform:scale(.85);transition:.25s;pointer-events:none}
.fvbtn svg{width:34px;height:34px;margin-left:4px}
.fvid .media.paused .fvbtn{opacity:1;transform:none}

/* career */
.cr-sp{grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.cr-txt{padding:36px 40px;border-radius:30px;background:var(--gl-surface)!important;border:var(--gl-edge)!important;box-shadow:var(--gl-shadow)!important;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.cr-txt p{color:var(--muted);font-size:16.5px;line-height:1.85;margin:0 0 14px}.cr-txt p:last-child{margin:0}
.cr-img img{display:block;width:100%;max-width:520px;margin:0 auto;height:auto;filter:drop-shadow(0 26px 34px rgba(50,80,130,.22))}
.grid.bfs{grid-template-columns:repeat(3,minmax(0,1fr))}
.gc.bf{text-align:center;display:flex;flex-direction:column;align-items:center;padding:28px 24px}
.gc.bf .gi{margin:0 0 16px}.gc.bf h3{font-size:17.5px;line-height:1.45;margin:0}
@media (max-width:900px){.cr-sp{grid-template-columns:1fr;gap:30px}.grid.bfs{grid-template-columns:repeat(2,minmax(0,1fr))}.cr-txt{padding:26px 24px}}
@media (max-width:560px){.grid.bfs{grid-template-columns:1fr}}
body .grid.bfs>.gc{margin:0!important;width:auto;max-width:none;min-width:0}.grid.bfs{gap:22px}.cr-sp>*{min-width:0}
body .jobs>.jgroup{margin:0!important;width:auto;max-width:none;min-width:0}

/* career vacancies v2: department tabs + one list */
.jtabs{margin:0 auto 26px;flex-wrap:wrap;justify-content:center}.jtabs i{font-style:normal;opacity:.7;font-size:.85em}
body .jobs{display:flex;flex-direction:column;gap:12px;max-width:880px;margin:0 auto;grid-template-columns:none}
body .jobs>.job{display:grid;grid-template-columns:52px minmax(0,1fr) auto auto;align-items:center;gap:16px;padding:14px 18px 14px 14px;border:var(--gl-edge)!important;border-radius:22px;background:var(--gl-surface)!important;box-shadow:var(--gl-shadow)!important;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);transition:transform .25s,box-shadow .25s;margin:0!important}
body .jobs>.job:hover{transform:translateY(-2px)}
.job[hidden]{display:none!important}
.jic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;color:var(--deep);background:var(--gl-surface);border:var(--gl-edge);box-shadow:var(--gl-well)}
.jic i,.jic svg{width:24px;height:24px}
.job .jt{display:flex;flex-direction:column;gap:3px;min-width:0}
.job .jt b{font:600 17px/1.35 var(--head);color:var(--ink)}
.jdept{font-size:13px;color:var(--faint,#7b8aa3)}
.job .jtype{align-self:center;white-space:nowrap}
.jgo{display:inline-flex;align-items:center;gap:7px;padding:10px 18px;border-radius:999px;font-weight:600;font-size:14.5px;color:var(--deep);background:var(--gl-surface);border:var(--gl-edge);box-shadow:var(--gl-well),0 6px 14px -8px rgba(60,85,125,.35);white-space:nowrap;transition:.25s}
.jgo svg{width:15px;height:15px;transition:transform .25s}
.job:hover .jgo{background:var(--gl-blue);color:#fff;box-shadow:var(--gl-blue-sh);border-color:rgba(255,255,255,.55)}
.job:hover .jgo svg{transform:translateX(3px)}
@media (max-width:640px){body .jobs>.job{grid-template-columns:48px minmax(0,1fr);row-gap:10px}.job .jtype{grid-column:2;justify-self:start}.jgo{grid-column:1/-1;justify-content:center}}
body .jobs{align-items:stretch}body .jobs>.job{width:100%!important;max-width:none!important;box-sizing:border-box}
.media img[src*="culture-new-3"]{aspect-ratio:auto!important;height:auto!important;object-fit:contain!important}

/* free-demo box v2: offer on the left, frosted form panel on the right */
body .imp .leadbox{grid-template-columns:1.05fr .95fr;gap:0;padding:0;overflow:hidden;align-items:stretch;border-radius:36px}
.leadoffer{padding:46px 44px;display:flex;flex-direction:column;align-items:flex-start;text-align:left;position:relative}
.leadgift{display:grid!important;place-items:center;width:62px;height:62px;border-radius:20px;font-size:30px!important;margin-bottom:18px;background:var(--gl-surface);border:var(--gl-edge);box-shadow:var(--gl-shadow)}
body .imp .leadoffer h2{font-size:clamp(28px,3.2vw,40px);line-height:1.12;margin:0 0 12px;text-align:left}
.leadlede{color:var(--muted);font-size:16.5px;line-height:1.7;margin:0;max-width:440px}
body .imp .leadpoints{margin:22px 0 26px;display:flex;flex-direction:column;gap:12px}
body .imp .leadpoints li{margin:0;padding-left:36px;font-weight:500;min-height:26px;display:flex;align-items:center}
body .imp .leadpoints li::before{content:"";width:24px;height:24px;border-radius:50%;top:50%;margin-top:-12px;background:var(--gl-blue) center/13px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E");box-shadow:var(--gl-blue-sh)}
body .imp .leadalt{margin-top:auto;padding-top:22px;border-top:1px solid rgba(120,150,190,.25);width:100%;font-size:14.5px}
.leadsend{padding:30px;display:flex;align-items:center;background:linear-gradient(160deg,rgba(255,255,255,.7),rgba(255,255,255,.35));border-left:1px solid rgba(255,255,255,.9)}
.leadsend form{width:100%;gap:16px!important}
.leadsend label>span:first-child{font:600 13px var(--head);letter-spacing:.03em;color:var(--deep)}
.leadsend input:not([type=hidden]):not([type=checkbox]){height:54px;padding:0 22px!important;font-size:16.5px}
.leadsend .bigphone input{height:62px;font-size:18px;font-weight:500}
.leadsend .consent{padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.5);box-shadow:var(--gl-well);line-height:1.55;color:var(--muted)}
.leadsend .consent a{color:var(--deep);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.leadsend .consent input{accent-color:#3f6ba3;margin-top:3px}
.leadsend .pill.big{width:100%;height:58px;justify-content:center;font-size:17px;margin-top:2px}
@media (max-width:900px){body .imp .leadbox{grid-template-columns:1fr}.leadoffer{padding:32px 26px 24px}.leadsend{padding:22px 20px 26px;border-left:0;border-top:1px solid rgba(255,255,255,.9)}}
body .imp .leadpoints li::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") center/13px no-repeat,var(--gl-blue)}
.leadsend input:not([type=hidden]):not([type=checkbox]){border:1px solid rgba(110,140,185,.38)!important;background:rgba(255,255,255,.75)!important}
body .leadsend .consent{padding:2px 2px!important;background:none!important;box-shadow:none!important;border:0!important;border-radius:0!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

/* ================= Motion layer: gentle animation + hover effects on every page ================= */
@keyframes dz-pagein{from{opacity:0}to{opacity:1}}
body{animation:dz-pagein .5s ease both}
html{scroll-behavior:smooth}

/* reading progress bar + back to top */
.dz-progress{position:fixed;left:0;top:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#7fa3da,#4a78b4 60%,#9b8cf0);z-index:200;pointer-events:none;transition:transform .1s linear}
.dz-top{position:fixed;right:30px;bottom:96px;z-index:59;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.92);backdrop-filter:blur(8px);color:var(--deep);display:grid;place-items:center;cursor:pointer;box-shadow:0 12px 24px -12px rgba(63,104,168,.55);opacity:0;visibility:hidden;transform:translateY(12px) scale(.9);transition:opacity .3s,visibility .3s,transform .3s,box-shadow .3s,background .3s,color .3s}
.dz-top.show{opacity:1;visibility:visible;transform:none}
.dz-top:hover{background:var(--brand,#4a78b4);color:#fff;transform:translateY(-4px);box-shadow:0 18px 30px -12px rgba(63,104,168,.7)}
.dz-top svg{width:20px;height:20px}

/* staggered reveal (delay is set per item by the script, then removed so hovering stays instant) */
.rv.in{transition-delay:var(--d,0ms)}
.rv{transition-timing-function:cubic-bezier(.2,.7,.2,1)}
.sec-h.rv{transform:translateY(18px) scale(.985)}.sec-h.rv.in{transform:none}

/* buttons: press feedback + soft light sweep */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;top:0;bottom:0;left:-80%;width:50%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .7s ease;z-index:-1;pointer-events:none}
.btn:hover::after{left:140%}
.btn:active{transform:translateY(0) scale(.97)!important;transition-duration:.1s}
.btn svg{transition:transform .25s}.btn:hover svg{transform:translateX(4px)}

/* menu */
.nav ul>li>a{position:relative}
.nav ul>li>a:hover{transform:translateY(-1px)}
.drop a{transition:background .2s,padding-left .2s,color .2s}.drop a:hover{padding-left:20px}
.mm a{transition:background .2s,padding-left .2s,color .2s}.mm a:hover{padding-left:24px}
.nav img,.logo img{transition:transform .4s}.logo:hover img{transform:scale(1.04)}

/* cards, icons, images */
.gc,.card,.post,.ncard,.bt{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,background .35s,border-color .35s}
.gc:hover,.card:hover,.ncard:hover{border-color:rgba(95,135,196,.45)}
.gc .gi,.card .gi,.bt .gi{transition:transform .4s cubic-bezier(.3,1.5,.5,1),background .3s,box-shadow .3s}
.gc:hover .gi,.card:hover .gi,.bt:hover .gi{transform:translateY(-4px) rotate(-7deg) scale(1.1);box-shadow:0 16px 28px -14px rgba(63,104,168,.7)}
.gm,.post .th,.ncard .th{overflow:hidden}
.gm img,.ncard img,.media img,.sp img{transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .4s}
.gc:hover .gm img,.ncard:hover img{transform:scale(1.06)}
.sp .media:hover img,.sp img:hover{transform:scale(1.03)}
.gc .more,.ncard .more,.card .more{transition:gap .25s,color .2s}.gc:hover .more,.ncard:hover .more{gap:12px}
.gc:hover .more svg,.ncard:hover .more svg{transform:translateX(5px)}
.gc .more svg,.ncard .more svg{transition:transform .25s}

/* tabs, chips, filters */
.uchips button,.jtabs button,.fnl-tabs button,.tab,.pill{transition:background .25s,color .25s,transform .2s,box-shadow .25s}
.uchips button:hover,.jtabs button:hover,.fnl-tabs button:hover,.tab:hover,.pill:hover{transform:translateY(-2px)}
.uchips button:active,.jtabs button:active,.fnl-tabs button:active{transform:scale(.95)}
.uchips button.on,.jtabs button.on,.fnl-tabs button.on{box-shadow:0 10px 20px -12px rgba(63,104,168,.8)}

/* system updates timeline */
.uitem{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,background .35s,border-color .35s;position:relative}
.uitem:hover{transform:translateX(6px) translateY(-3px);background:#fff;border-color:rgba(95,135,196,.5);box-shadow:0 26px 44px -26px rgba(63,104,168,.55)}
.uitem::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:3px;background:linear-gradient(#7fa3da,#4a78b4);transform:scaleY(0);transform-origin:50% 0;transition:transform .35s}
.uitem:hover::before{transform:scaleY(1)}
.ubadge{transition:transform .25s}.uitem:hover .ubadge{transform:scale(1.06)}
@keyframes dz-pulse{0%,100%{box-shadow:0 0 0 0 rgba(95,135,196,.5)}50%{box-shadow:0 0 0 7px rgba(95,135,196,0)}}
.unew{animation:dz-pulse 2.4s ease-in-out infinite}
.ustat{transition:transform .3s,box-shadow .3s,background .3s}.ustat:hover{transform:translateY(-5px);background:#fff;box-shadow:0 24px 40px -24px rgba(63,104,168,.55)}
.ustat b,.stats b,.stat b{display:block;transition:transform .3s}.ustat:hover b,.stats>*:hover b,.stat:hover b{transform:scale(1.07)}
.udate span{transition:transform .3s,box-shadow .3s}.uday:hover .udate span{transform:scale(1.04)}

/* careers, tools, forms, tables */
.job{transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,background .3s,border-color .3s}
.job:hover{transform:translateX(5px)}
.job .jgo svg,.job a svg{transition:transform .25s}.job:hover .jgo svg,.job:hover a svg{transform:translateX(5px)}
.job .jic,.job .jgo{transition:transform .3s}.job:hover .jic{transform:rotate(-8deg) scale(1.08)}
.leadcard,.toolbox,.spec,.prose2,.cta{transition:box-shadow .4s,transform .4s,border-color .4s}
.leadcard:hover,.toolbox:hover{box-shadow:0 30px 54px -30px rgba(63,104,168,.5);transform:translateY(-3px)}
input,textarea,select{transition:border-color .2s,box-shadow .25s,background .2s}
input:focus,textarea:focus,select:focus{outline:0;border-color:var(--brand,#4a78b4)!important;box-shadow:0 0 0 4px rgba(95,135,196,.22)}
.toolresult b{transition:transform .3s,color .3s}.toolbox:focus-within .toolresult b{transform:scale(1.04)}
table tbody tr{transition:background .2s}table tbody tr:hover{background:rgba(95,135,196,.07)}
.pt,.plan{transition:transform .35s,box-shadow .35s}.plan:hover{transform:translateY(-6px)}

/* FAQ + text links + footer */
.faq details{transition:background .3s,box-shadow .3s,transform .3s}.faq details:hover{transform:translateY(-2px);box-shadow:0 18px 34px -22px rgba(63,104,168,.55)}
.faq details[open] .ans{animation:dz-open .4s ease both}
@keyframes dz-open{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.faq .pm{transition:transform .35s,background .3s,color .3s}.faq details:hover .pm{background:var(--soft)}
.prose2 a,.ans a,p a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .3s,color .2s}
.prose2 a:hover,.ans a:hover,p a:hover{background-size:100% 1.5px}
.foot a{display:inline-block;transition:color .2s,transform .2s}.foot a:hover{transform:translateX(4px)}
.social a{transition:background .25s,color .25s,transform .25s}.social a:hover{transform:translateY(-4px) rotate(-6deg)}
.wa-float{transition:transform .25s,box-shadow .25s}.wa-float:hover{transform:scale(1.1) rotate(-6deg)}

/* awards / partners / clients logos */
.aw,.partner,.logos img,.clients img{transition:transform .35s,filter .35s,box-shadow .35s}
.aw:hover,.partner:hover{transform:translateY(-6px)}
.logos img,.who img{transition:transform .4s}.logos img:hover{transform:scale(1.06)}

@media (max-width:760px){.dz-top{right:22px;bottom:92px}.uitem:hover{transform:translateY(-2px)}.job:hover{transform:none}}
@media (hover:none){.gc:hover,.card:hover,.post:hover,.ncard:hover,.uitem:hover,.ustat:hover,.leadcard:hover,.toolbox:hover,.plan:hover{transform:none}}
@media (prefers-reduced-motion:reduce){body{animation:none}html{scroll-behavior:auto}.unew{animation:none}.dz-progress,.dz-top{transition:none}}

/* ================= Shop ================= */
.pgrid{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.pcard .gm{aspect-ratio:16/10;border-radius:14px;overflow:hidden;margin:-4px -4px 14px;background:var(--soft)}
.pcard .gm img{width:100%;height:100%;object-fit:cover;display:block}
.pcard h3{margin:0 0 6px}.pcard p{margin:0 0 10px;color:var(--mute,#5b6b82);font-size:.95rem}
.pmeta{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:6px 0 10px}
.pprice{font-family:Sora,Inter,sans-serif;font-size:1.35rem;color:var(--deep)}
.psub{color:var(--mute,#5b6b82);font-size:.9rem}
.ptag{display:inline-block;font-size:.72rem;font-weight:600;letter-spacing:.02em;padding:3px 9px;border-radius:999px;background:var(--soft);color:var(--deep)}
.ptag.soldout{background:#fde8e8;color:#a42323}.ptag.warn{background:#fff4d6;color:#8a5a00}
.pcats{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:22px}
.pcats a{padding:8px 16px;border-radius:999px;background:#fff;border:1px solid var(--line);font-weight:500;transition:background .25s,color .25s,transform .2s}
.pcats a:hover{transform:translateY(-2px)}.pcats a.on{background:var(--brand,#4a78b4);color:#fff;border-color:transparent}
.pd-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px;align-items:start}
.pd-img img{width:100%;border-radius:20px;border:1px solid var(--line);background:#fff}
.pd-info h1{font-size:clamp(1.6rem,3vw,2.3rem);margin:0 0 12px}
.pd-price{font-family:Sora,Inter,sans-serif;font-size:1.9rem;color:var(--deep);margin:6px 0 10px}.pd-price span{font-size:1rem;color:var(--mute,#5b6b82)}.pd-price s{font-size:1.05rem;color:#99a3b3;margin-left:8px}
.pd-buy{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-top:18px}.pd-buy label{display:grid;gap:4px;font-size:.85rem;color:var(--mute,#5b6b82)}
.pd-desc{margin-top:40px}.crumb{font-size:.9rem;color:var(--mute,#5b6b82);margin:0}.crumb a{color:var(--brand,#4a78b4)}
.qty{width:76px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;font:inherit}
.btn-ghost{background:#fff;border:1px solid var(--line);color:var(--deep)}.btn-ghost:hover{border-color:var(--brand,#4a78b4)}
.cart-wrap{display:grid;gap:22px}
.cart-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.cart-table th,.cart-table td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line)}.cart-table th{background:var(--soft);font-size:.85rem}
.cart-table td a{font-weight:600;color:var(--deep)}
.lnk{background:none;border:0;color:#b13a3a;cursor:pointer;font:inherit;text-decoration:underline}
.cart-tot{margin-left:auto;min-width:min(340px,100%);display:grid;gap:8px}.cart-tot div{display:flex;justify-content:space-between;gap:20px}
.cart-tot .grand,.co-line.grand{font-size:1.15rem;border-top:1px solid var(--line);padding-top:10px;margin-top:4px}
.cart-actions{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap;margin-top:22px}
.co-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px;align-items:start}
.co-form{display:grid;gap:14px;position:relative}.co-form label{display:grid;gap:6px;font-weight:500;font-size:.92rem}
.co-form input{padding:12px 14px;border:1px solid var(--line);border-radius:12px;font:inherit;background:#fff}
.co-line{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px dashed var(--line)}
.small-note{font-size:.85rem;color:var(--mute,#5b6b82);margin:0}
.shop-msg{padding:12px 16px;border-radius:12px;margin:0 0 14px;font-size:.95rem}.shop-ok{background:#e6f6ec;color:#17673a}.shop-warn{background:#fff4d6;color:#7a5200}.shop-err{background:#fde8e8;color:#a42323}
@media (max-width:820px){.pd-grid,.co-grid{grid-template-columns:1fr}
.cart-table thead{display:none}.cart-table,.cart-table tbody,.cart-table tr,.cart-table td{display:block;width:100%}.cart-table tr{border-bottom:1px solid var(--line);padding:8px 0}.cart-table td{border:0;padding:6px 16px;display:flex;justify-content:space-between;gap:14px}.cart-table td::before{content:attr(data-l);color:var(--mute,#5b6b82);font-size:.85rem}}