/* ===================== TOKENS ===================== */
:root{
  --brand:#1E72B8; --brand-dark:#145A96; --brand-deep:#27568E; --brand-mid:#3971B3;
  --brand-soft:#2E9BE0; --brand-light:#E8F2FB; --brand-muted:#9DCAF0; --brand-tint:#F5F8FC;
  --ink:#1A2535; --ink-2:#4A5568; --ink-3:#718096;
  --bg:#F4F6F9; --surface:#FFFFFF; --border:#E2E8F0; --border-strong:#CBD5E1;
  --ok:#16A34A; --ok-l:#DCFCE7; --warn:#D97706; --warn-l:#FEF3C7;
  --dang:#DC2626; --dang-l:#FEE2E2; --info:#0284C7; --info-l:#E0F2FE;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-full:9999px;
  --sh-sm:0 1px 2px rgba(16,32,56,.05), 0 1px 3px rgba(16,32,56,.06);
  --sh-md:0 4px 10px rgba(16,32,56,.06), 0 2px 4px rgba(16,32,56,.05);
  --sh-lg:0 14px 30px rgba(16,32,56,.09), 0 4px 8px rgba(16,32,56,.04);
  --sh-xl:0 30px 60px rgba(16,32,56,.13), 0 10px 20px rgba(16,32,56,.05);
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --nav-h:72px;
  --pad:clamp(16px,4vw,32px);
  --maxw:1280px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 16px)}
body{
  margin:0; font-family:var(--font); color:var(--ink); background:var(--surface);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video,canvas{max-width:100%; display:block}
img{height:auto}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; cursor:pointer; border:0; background:none; padding:0}
ul,ol{margin:0; padding:0; list-style:none}
h1,h2,h3,h4{margin:0; line-height:1.15; letter-spacing:-.022em; font-weight:700}
p{margin:0}
:focus-visible{outline:2.5px solid var(--brand); outline-offset:3px; border-radius:6px}
::selection{background:var(--brand-muted); color:var(--brand-deep)}

.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad)}
.wrap-w{width:100%; max-width:1500px; margin-inline:auto; padding-inline:var(--pad)}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed; top:-100px; left:12px; z-index:300; background:var(--brand); color:#fff; padding:10px 16px; border-radius:var(--r-sm); font-weight:600; transition:top .2s}
.skip:focus{top:12px}

/* ===================== TYPE ===================== */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:.72rem; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; color:var(--brand-dark);
  background:var(--brand-light); padding:7px 14px; border-radius:var(--r-full);
  border:1px solid #D5E7F7;
}
.eyebrow .ico{width:14px;height:14px}
.eyebrow.on-dark{background:rgba(255,255,255,.13); color:#DCEBFA; border-color:rgba(255,255,255,.22)}
.h1{font-size:clamp(2.05rem,5.2vw,3.85rem); font-weight:800; letter-spacing:-.036em; line-height:1.07}
.h2{font-size:clamp(1.6rem,3.8vw,2.7rem); font-weight:800; letter-spacing:-.032em; line-height:1.13}
.h3{font-size:clamp(1.12rem,2.1vw,1.45rem); font-weight:700; letter-spacing:-.024em}
.h4{font-size:1.05rem; font-weight:700}
.lead{font-size:clamp(1rem,1.5vw,1.15rem); color:var(--ink-2); line-height:1.68}
.muted{color:var(--ink-3)}
.grad-text{background:linear-gradient(100deg,var(--brand-deep),var(--brand) 42%,var(--brand-soft)); -webkit-background-clip:text; background-clip:text; color:transparent}

/* ===================== BUTTONS ===================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 24px; border-radius:var(--r-full); font-weight:600; font-size:.95rem;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), background .2s, color .2s, border-color .2s;
  white-space:nowrap; border:1.5px solid transparent; cursor:pointer; text-align:center;
}
.btn .ico{width:17px;height:17px}
.btn-p{background:linear-gradient(135deg,var(--brand) 0%,var(--brand-dark) 100%); color:#fff; box-shadow:0 6px 18px rgba(30,114,184,.28)}
.btn-p:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgba(30,114,184,.36)}
.btn-s{background:var(--surface); color:var(--brand-dark); border-color:var(--border-strong)}
.btn-s:hover{border-color:var(--brand); background:var(--brand-light); transform:translateY(-2px)}
.btn-g{background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.38)}
.btn-g:hover{background:rgba(255,255,255,.2); transform:translateY(-2px)}
.btn-w{background:#fff; color:var(--brand-dark); box-shadow:0 8px 22px rgba(8,26,48,.18)}
.btn-w:hover{transform:translateY(-2px); box-shadow:0 14px 32px rgba(8,26,48,.24)}
.btn-t{padding:9px 17px; font-size:.88rem}
.btn-lg{padding:15px 30px; font-size:1rem}
.link-a{display:inline-flex; align-items:center; gap:7px; color:var(--brand); font-weight:600; font-size:.95rem}
.link-a .ico{width:15px;height:15px; transition:transform .2s var(--ease)}
.link-a:hover .ico{transform:translateX(4px)}

/* ===================== SECTION ===================== */
.sect{padding-block:clamp(54px,7.5vw,100px)}
.sect-tight{padding-block:clamp(40px,5vw,64px)}
.sect-alt{background:var(--bg)}
.sect-head{max-width:730px; margin-inline:auto; text-align:center; margin-bottom:clamp(30px,4.5vw,54px)}
.sect-head .h2{margin-block:18px 14px}

/* ===================== ICONS ===================== */
.ico{width:20px;height:20px;flex:none; stroke:currentColor; stroke-width:1.75; fill:none; stroke-linecap:round; stroke-linejoin:round}
.ico-box{
  width:42px;height:42px;border-radius:11px; display:grid; place-items:center; flex:none;
  background:var(--brand-light); color:var(--brand-dark);
  transition:background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.ico-box.lg{width:50px;height:50px;border-radius:14px}
.ico-box.lg .ico{width:24px;height:24px}
.sprite{position:absolute; width:0; height:0; overflow:hidden}

/* ===================== HEADER ===================== */
.hdr{
  position:sticky; top:0; z-index:100; background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent; transition:border-color .25s, box-shadow .25s;
}
.hdr.scrolled{border-bottom-color:var(--border); box-shadow:0 2px 12px rgba(16,32,56,.05)}
.hdr-in{display:flex; align-items:center; gap:14px; height:var(--nav-h); position:relative}
.brand{display:flex; align-items:center; gap:10px; flex:none}
.brand-mark{width:36px;height:36px;border-radius:10px; background:var(--brand-tint); display:grid; place-items:center; box-shadow:inset 0 0 0 1px #E3ECF6; flex:none}
.brand-mark svg{width:23px;height:23px}
.brand-name{font-weight:800; font-size:1.15rem; letter-spacing:-.032em; color:var(--ink); white-space:nowrap}
.brand-name span{color:var(--brand)}

.nav{display:flex; align-items:center; gap:1px; margin-left:10px}
.nav-item{position:relative}
.nav-link{
  display:inline-flex; align-items:center; gap:5px; padding:9px 12px; border-radius:var(--r-sm);
  font-size:.93rem; font-weight:500; color:var(--ink-2); transition:color .18s, background .18s;
}
.nav-link:hover,.nav-item.open>.nav-link{color:var(--brand-dark); background:var(--brand-light)}
.nav-link .cv{width:13px;height:13px; stroke-width:2.4; transition:transform .25s var(--ease)}
.nav-item.open>.nav-link .cv{transform:rotate(180deg)}
.hdr-cta{display:flex; align-items:center; gap:8px; margin-left:auto; flex:none}
.hdr-cta .login{font-size:.93rem; font-weight:600; color:var(--ink-2); padding:9px 12px; border-radius:var(--r-sm)}
.hdr-cta .login:hover{color:var(--brand-dark); background:var(--brand-light)}

.burger{display:none; margin-left:auto; width:42px;height:42px; border-radius:var(--r-sm); place-items:center; color:var(--ink)}
.burger:hover{background:var(--bg)}
.burger .ico{width:24px;height:24px; stroke-width:2}
.burger .x{display:none}
.burger[aria-expanded="true"] .x{display:block}
.burger[aria-expanded="true"] .m{display:none}

/* ===================== MEGA MENU ===================== */
.mega{
  position:absolute; top:calc(100% + 9px); left:50%; transform:translate(-50%,-8px);
  width:min(1180px, calc(100vw - 28px));
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
  box-shadow:var(--sh-xl); padding:24px; z-index:120;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .22s var(--ease), transform .28s var(--ease), visibility .22s;
}
.nav-item.open>.mega{opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0)}
.nav-item-static{position:static}
.mega-full{left:0; right:0; width:auto; max-width:none; transform:translate(0,-8px)}
.nav-item.open>.mega-full{transform:translate(0,0)}
.mega-grid{display:grid; grid-template-columns:246px minmax(0,1fr); gap:24px}
.mega-side{
  background:linear-gradient(165deg,var(--brand-tint),#EAF2FA); border:1px solid #E4EDF7;
  border-radius:var(--r-lg); padding:20px; display:flex; flex-direction:column; gap:12px;
}
.mega-side h3{font-size:1.04rem}
.mega-side p{font-size:.865rem; color:var(--ink-2); line-height:1.55}
.mega-side .cnt{font-size:2.25rem; font-weight:800; letter-spacing:-.045em; color:var(--brand); line-height:1}
.mega-side .cnt small{font-size:.85rem; font-weight:600; color:var(--ink-3); letter-spacing:0; display:block; margin-top:2px}
.mega-cols{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2px 16px; max-height:min(70vh,560px); overflow-y:auto; padding-right:4px}
.mega-cols::-webkit-scrollbar{width:8px}
.mega-cols::-webkit-scrollbar-track{background:transparent}
.mega-cols::-webkit-scrollbar-thumb{background:var(--border-strong); border-radius:99px}
.mega-cat{font-size:.66rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); padding:10px 8px 5px}
.mega-a{display:flex; gap:10px; align-items:flex-start; padding:7px 8px; border-radius:10px; transition:background .18s var(--ease), transform .18s var(--ease)}
.mega-a:hover{background:var(--brand-light); transform:translateX(3px)}
.mega-a .ico-box{width:31px;height:31px;border-radius:9px; background:#fff; box-shadow:var(--sh-sm); color:var(--brand)}
.mega-a:hover .ico-box{background:var(--brand); color:#fff}
.mega-a .ico-box .ico{width:16px;height:16px}
.mega-a b{display:block; font-size:.86rem; font-weight:600; letter-spacing:-.012em}
.mega-a small{display:block; font-size:.75rem; color:var(--ink-3); line-height:1.4; margin-top:1px}
.mega-foot{grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid var(--border); margin-top:4px; padding-top:16px}
.mega-foot p{font-size:.85rem; color:var(--ink-3)}

/* ===================== MOBILE NAV ===================== */
.m-nav{
  position:fixed; inset:var(--nav-h) 0 0; background:var(--surface); z-index:99;
  overflow-y:auto; overscroll-behavior:contain; padding:14px var(--pad) 48px;
  transform:translateY(-8px); opacity:0; visibility:hidden;
  transition:opacity .24s var(--ease), transform .28s var(--ease), visibility .24s;
  -webkit-overflow-scrolling:touch;
}
.m-nav.open{opacity:1; visibility:visible; transform:translateY(0)}
body.locked{overflow:hidden}
.acc{border-bottom:1px solid var(--border)}
.acc-btn{width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:15px 4px; font-size:1.02rem; font-weight:600; text-align:left}
.acc-btn .ico{color:var(--ink-3); stroke-width:2.2; transition:transform .25s var(--ease)}
.acc.open>.acc-btn{color:var(--brand-dark)}
.acc.open>.acc-btn .ico{transform:rotate(180deg); color:var(--brand)}
.acc-body{display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s var(--ease)}
.acc.open>.acc-body{grid-template-rows:1fr}
.acc-inner{overflow:hidden; min-height:0}
.acc-pad{padding:0 0 12px}
.m-sub{font-size:.66rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3); padding:13px 6px 3px}
.m-link{display:flex; gap:10px; align-items:center; padding:9px 6px; border-radius:9px; font-size:.92rem; font-weight:500}
.m-link:active{background:var(--brand-light)}
.m-link .ico-box{width:30px;height:30px;border-radius:8px}
.m-link .ico-box .ico{width:15px;height:15px}
.m-flat{display:block; padding:15px 4px; font-size:1.02rem; font-weight:600; border-bottom:1px solid var(--border)}
.m-cta{display:grid; gap:10px; margin-top:22px}
.m-cta .btn{width:100%; padding:14px 20px}

/* ===================== HERO ===================== */
.hero{position:relative; overflow:hidden; background:linear-gradient(180deg,#FBFDFF 0%,var(--brand-tint) 55%,#EEF5FC 100%); padding-block:clamp(40px,6vw,76px) clamp(56px,8vw,110px)}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(900px 500px at 78% 12%, rgba(46,155,224,.16), transparent 62%),
    radial-gradient(700px 420px at 6% 78%, rgba(39,86,142,.10), transparent 60%);
}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000,transparent 78%);
}
.hero-grid{position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); gap:clamp(32px,4vw,56px); align-items:center}
.hero-copy{max-width:600px}
.hero-copy .h1{margin-block:20px 18px}
.hero-btns{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
.hero-note{display:flex; flex-wrap:wrap; align-items:center; gap:16px 22px; margin-top:26px; font-size:.85rem; color:var(--ink-3); font-weight:500}
.hero-note span{display:inline-flex; align-items:center; gap:7px}
.hero-note .ico{width:15px;height:15px; color:var(--ok); stroke-width:2.4}

/* dashboard mockup */
.mock-stage{position:relative; perspective:1600px; padding-block:34px}
.mock{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
  box-shadow:var(--sh-xl); overflow:hidden; position:relative; z-index:2;
  animation:float 7s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.mock-bar{display:flex; align-items:center; gap:8px; padding:11px 14px; background:var(--brand-tint); border-bottom:1px solid var(--border)}
.dots{display:flex; gap:5px}
.dots i{width:9px;height:9px;border-radius:50%;background:var(--border-strong)}
.dots i:first-child{background:#F0837A}.dots i:nth-child(2){background:#F5C169}.dots i:nth-child(3){background:#7DCB92}
.mock-url{flex:1; background:#fff; border:1px solid var(--border); border-radius:var(--r-full); padding:4px 12px; font-size:.7rem; color:var(--ink-3); font-family:var(--mono); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mock-body{display:grid; grid-template-columns:132px minmax(0,1fr)}
.mock-side{background:#FAFCFE; border-right:1px solid var(--border); padding:12px 9px; display:flex; flex-direction:column; gap:2px}
.mock-side .ms-logo{display:flex; align-items:center; gap:7px; padding:4px 6px 12px; font-weight:800; font-size:.82rem; letter-spacing:-.03em}
.mock-side .ms-logo svg{width:18px;height:18px}
.ms-i{display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:7px; font-size:.72rem; font-weight:500; color:var(--ink-2); white-space:nowrap}
.ms-i .ico{width:14px;height:14px; color:var(--ink-3)}
.ms-i.on{background:var(--brand-light); color:var(--brand-dark); font-weight:600}
.ms-i.on .ico{color:var(--brand)}
.mock-main{padding:14px; display:grid; gap:12px; background:#fff; min-width:0}
.mock-top{display:flex; align-items:center; justify-content:space-between; gap:10px}
.mock-top b{font-size:.86rem}
.pill{font-size:.62rem; font-weight:700; padding:3px 9px; border-radius:var(--r-full); background:var(--ok-l); color:#15803D; white-space:nowrap}
.pill.b{background:var(--brand-light); color:var(--brand-dark)}
.pill.w{background:var(--warn-l); color:#B45309}
.pill.d{background:var(--dang-l); color:#B91C1C}
.kpis{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px}
.kpi{border:1px solid var(--border); border-radius:10px; padding:9px; background:#fff; min-width:0}
.kpi small{display:block; font-size:.6rem; color:var(--ink-3); font-weight:600; text-transform:uppercase; letter-spacing:.05em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.kpi b{display:block; font-size:1.02rem; font-weight:800; letter-spacing:-.03em; margin-top:3px}
.kpi em{font-style:normal; font-size:.6rem; font-weight:700; color:var(--ok)}
.mock-2{display:grid; grid-template-columns:1.15fr 1fr; gap:12px; align-items:stretch}
.mock-2 > .panel{display:flex; flex-direction:column}
.panel{border:1px solid var(--border); border-radius:12px; padding:11px; background:#fff; min-width:0}
.panel-h{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:9px}
.panel-h b{font-size:.74rem}
.panel-h span{font-size:.62rem; color:var(--ink-3)}
.bars{display:flex; align-items:flex-end; gap:6px; height:74px; flex:1 1 auto; min-height:74px}
.bars i{flex:1; border-radius:4px 4px 2px 2px; background:linear-gradient(180deg,var(--brand-soft),var(--brand)); transform-origin:bottom; animation:grow 1.1s var(--ease) backwards}
.bars i:nth-child(1){animation-delay:.05s}.bars i:nth-child(2){animation-delay:.1s}.bars i:nth-child(3){animation-delay:.15s}
.bars i:nth-child(4){animation-delay:.2s}.bars i:nth-child(5){animation-delay:.25s}.bars i:nth-child(6){animation-delay:.3s}
.bars i:nth-child(7){animation-delay:.35s}.bars i:nth-child(8){animation-delay:.4s}
@keyframes grow{from{transform:scaleY(.05); opacity:0}to{transform:scaleY(1); opacity:1}}
.mods{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px}
.mod{display:flex; align-items:center; gap:5px; padding:5px 6px; border:1px solid var(--border); border-radius:8px; font-size:.6rem; font-weight:600; min-width:0}
.mod .ico{width:11px;height:11px; color:var(--brand)}
.mod span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.feed{display:grid; gap:7px}
.feed li{display:flex; align-items:center; gap:7px; font-size:.66rem; color:var(--ink-2)}
.feed li i{width:6px;height:6px;border-radius:50%;background:var(--brand); flex:none}
.feed li b{font-weight:600; color:var(--ink)}
.feed li span{margin-left:auto; font-size:.58rem; color:var(--ink-3); flex:none}

/* floating cards */
.fl{
  position:absolute; z-index:3; display:flex; align-items:center; gap:9px;
  background:rgba(255,255,255,.96); border:1px solid var(--border); border-radius:12px;
  padding:9px 12px; box-shadow:var(--sh-lg); backdrop-filter:blur(8px);
  animation:bob 5.5s ease-in-out infinite;
}
.fl .ico-box{width:28px;height:28px;border-radius:8px}
.fl .ico-box .ico{width:14px;height:14px}
.fl b{display:block; font-size:.73rem; font-weight:700; white-space:nowrap; letter-spacing:-.01em}
.fl small{display:block; font-size:.64rem; color:var(--ink-3); white-space:nowrap}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.fl-1{top:0; left:-4%; animation-delay:.2s}
.fl-2{top:0; right:-4%; animation-delay:1.1s}
.fl-3{bottom:0; left:-4%; animation-delay:1.9s}
.fl-4{bottom:0; right:-4%; animation-delay:.7s}
.fl-2 .ico-box{background:var(--ok-l); color:#15803D}
.fl-3 .ico-box{background:var(--dang-l); color:#B91C1C}
.fl-4 .ico-box{background:var(--warn-l); color:#B45309}

/* ===================== STATS ===================== */
.stats{background:var(--surface); border-block:1px solid var(--border)}
.stats-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(16px,2.5vw,28px)}
.stat{text-align:center; padding:8px}
.stat b{display:block; font-size:clamp(1.9rem,4.2vw,2.85rem); font-weight:800; letter-spacing:-.045em; line-height:1; color:var(--brand-deep)}
.stat span{display:block; margin-top:9px; font-size:.88rem; font-weight:600; color:var(--ink-2)}
.stat p{margin-top:4px; font-size:.78rem; color:var(--ink-3); line-height:1.5}

/* ===================== APP EXPLORER ===================== */
.explorer-tools{display:flex; flex-direction:column; gap:16px; margin-bottom:26px}
.search-box{position:relative; max-width:520px; width:100%; margin-inline:auto}
.search-box .ico{position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--ink-3); pointer-events:none}
.search-box input{
  width:100%; padding:14px 44px 14px 46px; border-radius:var(--r-full);
  border:1.5px solid var(--border-strong); background:var(--surface); font:inherit; font-size:.95rem;
  color:var(--ink); transition:border-color .2s, box-shadow .2s;
}
.search-box input::placeholder{color:var(--ink-3)}
.search-box input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 4px rgba(30,114,184,.13)}
.search-clear{position:absolute; right:8px; top:50%; transform:translateY(-50%); width:30px;height:30px; border-radius:50%; display:none; place-items:center; color:var(--ink-3)}
.search-clear:hover{background:var(--bg); color:var(--ink)}
.search-box.has-val .search-clear{display:grid}
.filters{display:flex; flex-wrap:wrap; gap:8px; justify-content:center}
.chip{
  padding:8px 16px; border-radius:var(--r-full); border:1.5px solid var(--border-strong);
  background:var(--surface); font-size:.85rem; font-weight:600; color:var(--ink-2);
  transition:all .2s var(--ease); white-space:nowrap;
}
.chip:hover{border-color:var(--brand-muted); color:var(--brand-dark)}
.chip[aria-pressed="true"]{background:var(--brand); border-color:var(--brand); color:#fff; box-shadow:0 4px 12px rgba(30,114,184,.24)}
.chip .n{opacity:.65; font-weight:700; margin-left:2px}

.app-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:14px}
.app-card{
  display:flex; flex-direction:column; gap:9px; padding:18px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
  position:relative; overflow:hidden; min-width:0;
}
.app-card::after{content:""; position:absolute; inset:0 0 auto; height:3px; background:linear-gradient(90deg,var(--brand),var(--brand-soft)); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease)}
.app-card:hover{transform:translateY(-5px); box-shadow:var(--sh-lg); border-color:#D3E4F5}
.app-card:hover::after{transform:scaleX(1)}
.app-card:hover .ico-box{background:var(--brand); color:#fff; transform:scale(1.06)}
.app-card .top{display:flex; align-items:center; gap:11px}
.app-card .top .h4{font-size:.98rem; letter-spacing:-.022em}
.app-card .idx{margin-left:auto; font-size:.68rem; font-weight:700; color:var(--border-strong); font-family:var(--mono); flex:none}
.app-card p{font-size:.84rem; color:var(--ink-2); line-height:1.55}
.app-card .cat-tag{margin-top:auto; font-size:.68rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3)}
.app-card.hide{display:none}
.no-res{display:none; text-align:center; padding:44px 20px; color:var(--ink-3)}
.no-res.show{display:block}
.no-res b{display:block; color:var(--ink); font-size:1.05rem; margin-bottom:6px}

/* ===================== CATEGORY SHOWCASE ===================== */
.show{padding-block:clamp(44px,6vw,80px); border-top:1px solid var(--border)}
.show-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(28px,4.5vw,64px); align-items:center}
.show:nth-of-type(even) .show-art{order:-1}
.show-copy .h2{margin-block:16px 14px}
.show-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:8px; margin-top:24px}
.show-list li{display:flex; align-items:center; gap:9px; padding:9px 11px; background:var(--surface); border:1px solid var(--border); border-radius:10px; font-size:.85rem; font-weight:600; min-width:0; transition:border-color .2s, transform .2s var(--ease)}
.show-list li:hover{border-color:var(--brand-muted); transform:translateX(3px)}
.show-list li .ico{width:16px;height:16px; color:var(--brand); flex:none}
.show-list li span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.show-art{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
  box-shadow:var(--sh-lg); overflow:hidden; min-width:0;
}
.art-h{display:flex; align-items:center; gap:9px; padding:12px 15px; border-bottom:1px solid var(--border); background:var(--brand-tint)}
.art-h .ico-box{width:28px;height:28px;border-radius:8px; background:#fff; color:var(--brand)}
.art-h .ico-box .ico{width:15px;height:15px}
.art-h b{font-size:.85rem}
.art-h .pill{margin-left:auto}
.art-b{padding:15px; display:grid; gap:11px}

/* chat art */
.chat-row{display:flex; gap:9px; align-items:flex-end}
.chat-row.me{flex-direction:row-reverse}
.av{width:28px;height:28px;border-radius:50%; background:var(--brand-light); color:var(--brand-dark); display:grid; place-items:center; font-size:.65rem; font-weight:800; flex:none}
.bub{max-width:74%; padding:9px 12px; border-radius:14px; font-size:.79rem; line-height:1.5; background:var(--bg); border:1px solid var(--border)}
.chat-row.me .bub{background:linear-gradient(135deg,var(--brand),var(--brand-dark)); color:#fff; border-color:transparent}
.chat-row .bub time{display:block; font-size:.62rem; opacity:.6; margin-top:3px}

/* pipeline art */
.pipe{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px}
.pipe-col{background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:8px; min-width:0}
.pipe-col > b{display:block; font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); margin-bottom:7px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.deal{background:#fff; border:1px solid var(--border); border-radius:8px; padding:7px; margin-bottom:6px; box-shadow:var(--sh-sm)}
.deal b{display:block; font-size:.66rem; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.deal span{display:block; font-size:.6rem; color:var(--ink-3); margin-top:2px}
.deal.a{border-left:3px solid var(--brand)}
.deal.b{border-left:3px solid var(--ok)}
.deal.c{border-left:3px solid var(--warn)}

/* table art */
.tbl{width:100%; border-collapse:collapse; font-size:.72rem}
.tbl th{text-align:left; font-size:.6rem; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3); font-weight:800; padding:6px 8px; border-bottom:1px solid var(--border)}
.tbl td{padding:8px; border-bottom:1px solid var(--border); color:var(--ink-2)}
.tbl tr:last-child td{border-bottom:0}
.tbl td b{color:var(--ink); font-weight:600}
.tbl-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}

/* iot art */
.gauges{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px}
.gauge{border:1px solid var(--border); border-radius:10px; padding:10px; text-align:center; min-width:0}
.gauge svg{width:100%; max-width:66px; margin-inline:auto; overflow:visible}
.gauge .rin{fill:none; stroke:var(--border); stroke-width:7}
.gauge .arc{fill:none; stroke:var(--brand); stroke-width:7; stroke-linecap:round; stroke-dasharray:126; transform:rotate(-90deg); transform-origin:center}
.gauge .arc.g{stroke:var(--ok)} .gauge .arc.w{stroke:var(--warn)}
.gauge b{display:block; font-size:.86rem; font-weight:800; margin-top:5px}
.gauge small{display:block; font-size:.62rem; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.spark{width:100%; height:56px; overflow:visible}
.spark path{fill:none; stroke:var(--brand); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.spark .fill{fill:url(#sparkGrad); stroke:none}
.sensors{display:grid; gap:7px}
.sensor{display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--border); border-radius:9px; font-size:.72rem; min-width:0}
.sensor .dot{width:7px;height:7px;border-radius:50%;background:var(--ok); flex:none; box-shadow:0 0 0 3px rgba(22,163,74,.14)}
.sensor .dot.w{background:var(--warn); box-shadow:0 0 0 3px rgba(217,119,6,.14)}
.sensor b{font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sensor span{margin-left:auto; font-family:var(--mono); font-size:.68rem; color:var(--ink-2); flex:none}

/* ===================== AI SECTION ===================== */
.ai{position:relative; overflow:hidden; background:linear-gradient(150deg,#0F2A47 0%,#16406B 48%,#1E72B8 100%); color:#fff}
.ai::before{content:""; position:absolute; inset:0; background:radial-gradient(700px 420px at 82% 8%,rgba(120,200,255,.24),transparent 62%),radial-gradient(600px 380px at 8% 92%,rgba(30,114,184,.35),transparent 60%); pointer-events:none}
.ai .h2,.ai .h3{color:#fff}
.ai .lead{color:#C8DFF3}
.ai-grid{position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); gap:clamp(30px,4.5vw,58px); align-items:center}
.ai-copy .h2{margin-block:18px 16px}
.ai-feats{display:grid; gap:12px; margin-top:28px}
.ai-feats li{display:flex; gap:12px; align-items:flex-start}
.ai-feats .ico-box{width:36px;height:36px;border-radius:10px; background:rgba(255,255,255,.13); color:#BFDDF5}
.ai-feats .ico-box .ico{width:18px;height:18px}
.ai-feats b{display:block; font-size:.94rem; font-weight:700}
.ai-feats p{font-size:.85rem; color:#B4D2EA; line-height:1.55}
.ai-disc{margin-top:26px; font-size:.78rem; color:#9CC2DE; line-height:1.6; padding:12px 14px; border-left:3px solid rgba(255,255,255,.22); background:rgba(255,255,255,.05); border-radius:0 10px 10px 0}

.ai-chat{background:rgba(255,255,255,.97); border-radius:var(--r-xl); box-shadow:var(--sh-xl); overflow:hidden; color:var(--ink); min-width:0}
.ai-chat-h{display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--border); background:var(--brand-tint)}
.ai-chat-h .ai-orb{width:32px;height:32px;border-radius:10px; background:linear-gradient(135deg,var(--brand-soft),var(--brand-deep)); display:grid; place-items:center; color:#fff; flex:none}
.ai-chat-h .ai-orb .ico{width:17px;height:17px}
.ai-chat-h b{font-size:.92rem}
.ai-chat-h small{display:block; font-size:.68rem; color:var(--ink-3)}
.ai-chat-h .live{margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:.66rem; font-weight:700; color:#15803D}
.ai-chat-h .live i{width:7px;height:7px;border-radius:50%;background:var(--ok); animation:pulse 2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(22,163,74,.5)}70%{box-shadow:0 0 0 7px rgba(22,163,74,0)}}
.ai-log{padding:16px; display:grid; gap:12px; min-height:330px; align-content:start; background:#fff}
.ai-msg{display:flex; gap:9px; align-items:flex-start; animation:msgIn .4s var(--ease) backwards}
@keyframes msgIn{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
.ai-msg.u{flex-direction:row-reverse}
.ai-msg .who{width:28px;height:28px;border-radius:9px; display:grid; place-items:center; flex:none; font-size:.62rem; font-weight:800}
.ai-msg.u .who{background:var(--brand-light); color:var(--brand-dark)}
.ai-msg.a .who{background:linear-gradient(135deg,var(--brand-soft),var(--brand-deep)); color:#fff}
.ai-msg.a .who .ico{width:15px;height:15px}
.ai-bub{max-width:80%; padding:11px 14px; border-radius:14px; font-size:.85rem; line-height:1.55}
.ai-msg.u .ai-bub{background:linear-gradient(135deg,var(--brand),var(--brand-dark)); color:#fff; border-bottom-right-radius:5px}
.ai-msg.a .ai-bub{background:var(--bg); border:1px solid var(--border); border-bottom-left-radius:5px}
.ai-bub .rc{display:flex; flex-wrap:wrap; gap:7px; margin-top:10px}
.ai-bub .rc span{display:inline-flex; align-items:center; gap:5px; font-size:.68rem; font-weight:700; padding:5px 9px; border-radius:var(--r-full); background:#fff; border:1px solid var(--border)}
.ai-bub .rc span .ico{width:12px;height:12px}
.ai-bub .rc span.hi{background:var(--dang-l); color:#B91C1C; border-color:#FBD5D5}
.ai-bub .rc span.ok{background:var(--ok-l); color:#15803D; border-color:#C6EFD3}
.typing{display:inline-flex; gap:4px; padding:4px 0}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--brand-muted); animation:tp 1.3s infinite}
.typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
@keyframes tp{0%,60%,100%{transform:translateY(0); opacity:.45}30%{transform:translateY(-5px); opacity:1}}
.ai-input{display:flex; align-items:center; gap:9px; padding:12px 14px; border-top:1px solid var(--border); background:var(--brand-tint)}
.ai-input .fake{flex:1; background:#fff; border:1px solid var(--border); border-radius:var(--r-full); padding:9px 14px; font-size:.8rem; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ai-input .snd{width:34px;height:34px;border-radius:50%; background:var(--brand); color:#fff; display:grid; place-items:center; flex:none}
.ai-input .snd .ico{width:16px;height:16px}

/* ===================== AUTOMATION ===================== */
.flows{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(18px,3vw,28px)}
.flow{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); padding:clamp(18px,2.5vw,26px); box-shadow:var(--sh-sm); min-width:0}
.flow-h{display:flex; align-items:center; gap:10px; margin-bottom:20px}
.flow-h .ico-box{width:36px;height:36px;border-radius:10px}
.flow-h .ico-box .ico{width:18px;height:18px}
.flow-h b{font-size:.98rem}
.flow-h small{display:block; font-size:.74rem; color:var(--ink-3)}
.steps{display:grid; gap:0}
.step{display:flex; align-items:center; gap:12px; padding:11px 13px; background:var(--bg); border:1px solid var(--border); border-radius:11px; position:relative; min-width:0;
  opacity:0; transform:translateY(9px); transition:opacity .45s var(--ease), transform .45s var(--ease), border-color .3s, background .3s}
.reveal-in .step{opacity:1; transform:none}
.step .n{width:24px;height:24px;border-radius:50%; background:var(--surface); border:1.5px solid var(--border-strong); display:grid; place-items:center; font-size:.66rem; font-weight:800; color:var(--ink-3); flex:none; transition:all .3s}
.step .ico{width:16px;height:16px; color:var(--brand); flex:none}
.step b{font-size:.85rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.step .tag{margin-left:auto; font-size:.62rem; font-weight:700; color:var(--ink-3); flex:none; white-space:nowrap; background:none; border:0; padding:0}
.reveal-in .step.lit{background:var(--brand-light); border-color:#CFE4F6}
.reveal-in .step.lit .n{background:var(--brand); border-color:var(--brand); color:#fff}
.arrow{height:22px; display:grid; place-items:center; position:relative}
.arrow::before{content:""; width:2px; height:100%; background:var(--border-strong); border-radius:2px}
.arrow::after{content:""; position:absolute; inset:0 auto auto 50%; transform:translateX(-50%); width:2px; height:0; background:linear-gradient(180deg,var(--brand),var(--brand-soft)); border-radius:2px; transition:height .4s var(--ease)}
.reveal-in .arrow::after{height:100%}
.reveal-in .steps > .step{transition-delay:.05s}
.reveal-in .steps > .arrow::after{transition-delay:.22s}

/* ===================== UNIFIED DASHBOARD ===================== */
.uni{background:linear-gradient(180deg,var(--bg) 0%,#EAF1F9 100%)}
.uni-shell{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--sh-xl); overflow:hidden}
.uni-top{display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--border); background:#fff}
.uni-top .brand-name{font-size:1rem}
.uni-search{flex:1; max-width:300px; background:var(--bg); border:1px solid var(--border); border-radius:var(--r-full); padding:7px 13px; font-size:.75rem; color:var(--ink-3); display:flex; align-items:center; gap:7px; overflow:hidden}
.uni-search .ico{width:14px;height:14px; flex:none}
.uni-search span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.uni-top .r{margin-left:auto; display:flex; align-items:center; gap:9px; flex:none}
.uni-top .r .ib{width:32px;height:32px;border-radius:9px; display:grid; place-items:center; color:var(--ink-3); background:var(--bg); position:relative}
.uni-top .r .ib .ico{width:16px;height:16px}
.uni-top .r .ib .bdg{position:absolute; top:4px; right:4px; width:7px;height:7px;border-radius:50%;background:var(--dang)}
.uni-top .r .me{width:32px;height:32px;border-radius:50%; background:linear-gradient(135deg,var(--brand),var(--brand-deep)); color:#fff; display:grid; place-items:center; font-size:.68rem; font-weight:800}
.uni-body{display:grid; grid-template-columns:196px minmax(0,1fr)}
.uni-side{background:#FAFCFE; border-right:1px solid var(--border); padding:14px 10px; display:flex; flex-direction:column; gap:2px}
.uni-side .grp{font-size:.6rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); padding:12px 10px 5px}
.us-i{display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:8px; font-size:.8rem; font-weight:500; color:var(--ink-2); transition:background .2s, color .2s; min-width:0}
.us-i .ico{width:15px;height:15px; color:var(--ink-3); transition:color .2s}
.us-i span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.us-i .n{margin-left:auto; font-size:.6rem; font-weight:800; background:var(--dang-l); color:#B91C1C; padding:1px 6px; border-radius:var(--r-full); flex:none}
.us-i:hover{background:var(--brand-light); color:var(--brand-dark)}
.us-i:hover .ico{color:var(--brand)}
.us-i.on{background:var(--brand); color:#fff; font-weight:600; box-shadow:0 4px 12px rgba(30,114,184,.24)}
.us-i.on .ico{color:#fff}
.uni-main{padding:clamp(14px,2vw,20px); display:grid; gap:14px; background:#FCFDFE; min-width:0}
.uni-hd{display:flex; flex-wrap:wrap; align-items:center; gap:10px}
.uni-hd h3{font-size:1.05rem}
.uni-hd p{font-size:.76rem; color:var(--ink-3)}
.uni-hd .btn{margin-left:auto}
.uni-kpis{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:11px}
.ukpi{background:#fff; border:1px solid var(--border); border-radius:12px; padding:13px; min-width:0; transition:transform .22s var(--ease), box-shadow .22s var(--ease)}
.ukpi:hover{transform:translateY(-3px); box-shadow:var(--sh-md)}
.ukpi .rw{display:flex; align-items:center; gap:8px; margin-bottom:8px}
.ukpi .ico-box{width:28px;height:28px;border-radius:8px}
.ukpi .ico-box .ico{width:14px;height:14px}
.ukpi small{font-size:.66rem; font-weight:700; color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ukpi b{display:block; font-size:1.3rem; font-weight:800; letter-spacing:-.035em}
.ukpi em{font-style:normal; font-size:.68rem; font-weight:700; color:var(--ok); display:inline-flex; align-items:center; gap:3px}
.ukpi em.dn{color:var(--dang)}
.ukpi em .ico{width:11px;height:11px; stroke-width:2.6}
.uni-row{display:grid; grid-template-columns:1.5fr 1fr; gap:14px}
.uni-row-3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.card{background:#fff; border:1px solid var(--border); border-radius:12px; padding:14px; min-width:0}
.card-h{display:flex; align-items:center; gap:8px; margin-bottom:12px}
.card-h b{font-size:.84rem}
.card-h .pill{margin-left:auto}
.area{width:100%; height:150px; overflow:visible}
.area .ln{fill:none; stroke:var(--brand); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.area .ln2{fill:none; stroke:var(--brand-muted); stroke-width:2; stroke-dasharray:5 5; stroke-linecap:round}
.area .fl2{fill:url(#areaGrad); stroke:none}
.area .gl{stroke:var(--border); stroke-width:1}
.area text{font-size:9px; fill:var(--ink-3); font-family:var(--font)}
.donut{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.donut svg{width:104px;height:104px; flex:none; overflow:visible}
.donut .seg{fill:none; stroke-width:15; stroke-linecap:butt; transform:rotate(-90deg); transform-origin:center}
.lgd{display:grid; gap:7px; font-size:.72rem; min-width:0}
.lgd li{display:flex; align-items:center; gap:7px}
.lgd i{width:9px;height:9px;border-radius:3px; flex:none}
.lgd b{margin-left:auto; font-weight:700; font-variant-numeric:tabular-nums}
.act{display:grid; gap:10px}
.act li{display:flex; gap:9px; align-items:flex-start; font-size:.76rem; color:var(--ink-2); line-height:1.45}
.act li .ico-box{width:26px;height:26px;border-radius:8px}
.act li .ico-box .ico{width:13px;height:13px}
.act li b{display:block; color:var(--ink); font-weight:600; font-size:.78rem}
.act li time{display:block; font-size:.65rem; color:var(--ink-3); margin-top:1px}

/* ===================== INTEGRATIONS ===================== */
.int-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(238px,1fr)); gap:14px}
.int{display:flex; gap:12px; align-items:flex-start; padding:17px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); transition:transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s; min-width:0}
.int:hover{transform:translateY(-4px); box-shadow:var(--sh-md); border-color:#D3E4F5}
.int:hover .ico-box{background:var(--brand); color:#fff}
.int b{display:block; font-size:.92rem; font-weight:700}
.int p{font-size:.8rem; color:var(--ink-2); line-height:1.5; margin-top:3px}
.int .st{display:inline-flex; align-items:center; gap:5px; margin-top:9px; font-size:.65rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:3px 9px; border-radius:var(--r-full)}
.int .st.live{background:var(--ok-l); color:#15803D}
.int .st.soon{background:var(--warn-l); color:#B45309}
.int-note{margin-top:20px; text-align:center; font-size:.82rem; color:var(--ink-3)}

/* ===================== SECURITY ===================== */
.sec-grid{display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(28px,4.5vw,60px); align-items:center}
.sec-copy .h2{margin-block:18px 14px}
.sec-cards{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px}
.sec-card{padding:18px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--sh-sm); transition:transform .24s var(--ease), box-shadow .24s var(--ease); min-width:0}
.sec-card:hover{transform:translateY(-4px); box-shadow:var(--sh-md)}
.sec-card .ico-box{margin-bottom:12px}
.sec-card b{display:block; font-size:.94rem; font-weight:700}
.sec-card p{font-size:.82rem; color:var(--ink-2); line-height:1.55; margin-top:5px}
.sec-disc{margin-top:22px; font-size:.78rem; color:var(--ink-3); line-height:1.6; padding-left:13px; border-left:3px solid var(--border-strong)}

/* ===================== PRICING ===================== */
.price-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,2vw,20px); align-items:stretch}
.plan{background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-xl); padding:clamp(20px,2.6vw,28px); display:flex; flex-direction:column; gap:14px; min-width:0; transition:transform .26s var(--ease), box-shadow .26s var(--ease), border-color .26s; position:relative}
.plan:hover{transform:translateY(-5px); box-shadow:var(--sh-lg)}
.plan.hot{border-color:var(--brand); box-shadow:var(--sh-lg)}
.plan.hot::before{content:"Most popular"; position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:linear-gradient(135deg,var(--brand),var(--brand-dark)); color:#fff; font-size:.66rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; padding:5px 14px; border-radius:var(--r-full); white-space:nowrap; box-shadow:0 6px 16px rgba(30,114,184,.3)}
.plan h3{font-size:1.24rem}
.plan .for{font-size:.85rem; color:var(--ink-3); min-height:2.4em}
.plan .amt{display:flex; flex-direction:column; align-items:flex-start; gap:3px; padding-block:4px; border-bottom:1px solid var(--border); padding-bottom:16px}
.plan .amt b{font-size:1.5rem; font-weight:800; letter-spacing:-.035em; color:var(--brand-deep); white-space:nowrap}
.plan .amt span{font-size:.8rem; color:var(--ink-3); line-height:1.4}
.plan ul{display:grid; gap:9px}
.plan li{display:flex; gap:9px; align-items:flex-start; font-size:.86rem; color:var(--ink-2); line-height:1.5}
.plan li .ico{width:16px;height:16px; color:var(--ok); stroke-width:2.6; margin-top:2px}
.plan .acts{display:grid; gap:9px; margin-top:auto; padding-top:6px}
.plan .btn{width:100%}
.price-note{margin-top:22px; text-align:center; font-size:.82rem; color:var(--ink-3)}

/* ===================== FINAL CTA ===================== */
.cta{position:relative; overflow:hidden; background:linear-gradient(140deg,var(--brand-deep) 0%,var(--brand-dark) 50%,var(--brand) 100%); color:#fff; text-align:center}
.cta::before{content:""; position:absolute; inset:0; background:radial-gradient(600px 380px at 50% 0%,rgba(255,255,255,.16),transparent 65%); pointer-events:none}
.cta .h2{color:#fff; margin-block:18px 16px}
.cta .lead{color:#D2E6F7; max-width:640px; margin-inline:auto}
.cta-btns{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:30px}
.cta-note{margin-top:22px; font-size:.8rem; color:#A9CBE6}

/* ===================== FOOTER ===================== */
.ftr{background:#0E2338; color:#B9CADA; padding-block:clamp(44px,6vw,72px) 0; font-size:.88rem}
.ftr-grid{display:grid; grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr)); gap:clamp(24px,3.5vw,44px)}
.ftr-brand .brand-name{color:#fff}
.ftr-brand .brand-mark{background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.ftr-brand p{margin-top:14px; font-size:.85rem; line-height:1.65; max-width:330px; color:#9DB2C6}
.ftr-soc{display:flex; gap:9px; margin-top:20px}
.ftr-soc a{width:36px;height:36px;border-radius:10px; background:rgba(255,255,255,.07); display:grid; place-items:center; color:#B9CADA; transition:background .2s, color .2s, transform .2s var(--ease)}
.ftr-soc a:hover{background:var(--brand); color:#fff; transform:translateY(-3px)}
.ftr-soc .ico{width:17px;height:17px}
.ftr-col h4{color:#fff; font-size:.82rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; margin-bottom:15px}
.ftr-col li{margin-bottom:9px}
.ftr-col a{color:#9DB2C6; font-size:.86rem; transition:color .18s, padding-left .2s var(--ease); display:inline-block}
.ftr-col a:hover{color:#fff; padding-left:4px}
.ftr-bot{margin-top:clamp(32px,4vw,52px); border-top:1px solid rgba(255,255,255,.09); padding-block:20px 88px; display:flex; flex-wrap:wrap; gap:10px 20px; align-items:center; justify-content:space-between}
.ftr-bot p{font-size:.8rem; color:#7F97AD}
.ftr-legal{display:flex; flex-wrap:wrap; gap:8px 18px}
.ftr-legal a{font-size:.8rem; color:#7F97AD}
.ftr-legal a:hover{color:#fff}

/* ===================== FLOAT WA ===================== */
.wa{
  position:fixed; right:16px; bottom:16px; z-index:90; width:54px;height:54px;border-radius:50%;
  background:linear-gradient(135deg,#25D366,#128C7E); color:#fff; display:grid; place-items:center;
  box-shadow:0 10px 26px rgba(18,140,126,.4); transition:transform .24s var(--ease), box-shadow .24s;
}
.wa:hover{transform:scale(1.07); box-shadow:0 14px 34px rgba(18,140,126,.5)}
.wa .ico{width:26px;height:26px; stroke-width:0; fill:currentColor}
.wa::after{content:""; position:absolute; inset:0; border-radius:50%; border:2px solid rgba(37,211,102,.5); animation:ring 2.6s ease-out infinite}
@keyframes ring{0%{transform:scale(1); opacity:.7}100%{transform:scale(1.55); opacity:0}}

/* ===================== REVEAL ===================== */
.rv{opacity:0; transform:translateY(22px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
.rv.in{opacity:1; transform:none}
.rv-s{opacity:0; transform:scale(.965); transition:opacity .6s var(--ease), transform .6s var(--ease)}
.rv-s.in{opacity:1; transform:none}
.rv-d1{transition-delay:.07s}.rv-d2{transition-delay:.14s}.rv-d3{transition-delay:.21s}.rv-d4{transition-delay:.28s}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important}
  .rv,.rv-s,.step{opacity:1!important; transform:none!important}
  .arrow::after{height:100%!important}
}

/* ===================== RESPONSIVE ===================== */
@media (max-width:1340px){
  .fl-1{left:-1%}.fl-2{right:-1%}.fl-3{left:-1%}.fl-4{right:-1%}
}
@media (max-width:1280px){
  .mega{width:min(1080px, calc(100vw - 28px))}
  .mega-cols{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1120px){
  .nav-link{padding:9px 9px; font-size:.9rem}
  .hdr-cta .btn-t{padding:9px 14px}
  .fl-1{left:0}.fl-2{right:0}.fl-3{left:0}.fl-4{right:0}
}
/* 1181-1300px: keep the full desktop bar but tighten it so eight items fit */
@media (max-width:1300px){
  .nav-link{padding:9px 8px; font-size:.9rem}
  .hdr-cta{gap:6px}
  .hdr-cta .login{padding:9px 8px}
  .hdr-cta .btn-t{padding:9px 13px}
}
/* eight primary nav items no longer fit beside the CTAs below ~1240px,
   so the mobile menu takes over earlier than the layout breakpoints */
@media (max-width:1180px){
  .nav{display:none}
  .hdr-cta{display:none}
  .burger{display:grid}
}
@media (max-width:1024px){
  :root{--nav-h:64px}
  .nav{display:none}
  .hdr-cta{display:none}
  .burger{display:grid}
  .hero-grid{grid-template-columns:minmax(0,1fr); gap:38px}
  .hero-copy{max-width:660px; margin-inline:auto; text-align:center}
  .hero-btns,.hero-note{justify-content:center}
  .mock-stage{max-width:720px; margin-inline:auto; width:100%}
  .fl-1{left:0}.fl-2{right:0}.fl-3{left:0}.fl-4{right:0}
  .ai-grid,.sec-grid{grid-template-columns:minmax(0,1fr); gap:36px}
  .ftr-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ftr-brand{grid-column:1/-1}
  .ftr-brand p{max-width:520px}
}
@media (max-width:960px){
  .show-grid{grid-template-columns:minmax(0,1fr); gap:30px}
  .show:nth-of-type(even) .show-art{order:0}
  .show-copy{max-width:660px}
  .flows{grid-template-columns:minmax(0,1fr)}
  .price-grid{grid-template-columns:minmax(0,1fr); max-width:520px; margin-inline:auto}
  .plan.hot{order:-1}
  .uni-row,.uni-row-3{grid-template-columns:minmax(0,1fr)}
  .uni-body{grid-template-columns:minmax(0,1fr)}
  .uni-side{
    border-right:0; border-bottom:1px solid var(--border);
    flex-direction:row; overflow-x:auto; gap:6px; padding:10px 12px;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .uni-side::-webkit-scrollbar{display:none}
  .uni-side .grp{display:none}
  .us-i{flex:none; padding:7px 12px; border:1px solid var(--border); background:#fff; border-radius:var(--r-full); font-size:.76rem}
  .us-i.on{border-color:var(--brand)}
  .sec-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:768px){
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px}
  .uni-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mock-2{grid-template-columns:minmax(0,1fr)}
  .gauges{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ai-log{min-height:0}
  .ai-bub{max-width:86%}
  .fl{padding:7px 10px}
  .fl b{font-size:.68rem}
  .fl small{font-size:.6rem}
  .fl-1{top:0}
  .fl-3{bottom:0}
}
@media (max-width:640px){
  .hero{padding-block:26px 56px}
  .hero-note{gap:10px 16px; font-size:.8rem}
  .mock-body{grid-template-columns:minmax(0,1fr)}
  .mock-side{
    border-right:0; border-bottom:1px solid var(--border); flex-direction:row;
    overflow-x:auto; gap:6px; padding:9px 10px; scrollbar-width:none;
  }
  .mock-side::-webkit-scrollbar{display:none}
  .mock-side .ms-logo{display:none}
  .ms-i{flex:none; padding:6px 11px; border:1px solid var(--border); border-radius:var(--r-full); background:#fff}
  .pipe{grid-template-columns:repeat(2,minmax(0,1fr))}
  .int-grid{grid-template-columns:minmax(0,1fr)}
  .app-grid{grid-template-columns:minmax(0,1fr)}
  .sec-cards{grid-template-columns:minmax(0,1fr)}
  .ftr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ftr-bot{justify-content:flex-start}
  .btn{padding:12px 20px; font-size:.92rem}
  .btn-lg{padding:14px 24px; font-size:.95rem}
  .wa{width:50px;height:50px; right:14px; bottom:14px}
  .wa .ico{width:24px;height:24px}
  .fl-2,.fl-4{display:none}
  .uni-search{display:none}
  .uni-top{gap:8px}
  .uni-top .r{gap:6px}
  .uni-top .r .ib{width:29px;height:29px}
  .uni-top .r .me{width:29px;height:29px}
}
@media (max-width:480px){
  .stat b{font-size:1.75rem}
  .stat span{font-size:.82rem}
  .gauges{grid-template-columns:minmax(0,1fr)}
  .gauge svg{max-width:80px}
  .show-list{grid-template-columns:minmax(0,1fr)}
  .hero-btns{flex-direction:column; align-items:stretch}
  .hero-btns .btn{width:100%}
  .cta-btns{flex-direction:column; align-items:stretch}
  .cta-btns .btn{width:100%}
  .fl-1,.fl-3{display:none}
  .uni-hd .btn{margin-left:0; width:100%}
  .donut{justify-content:center}
}
@media (max-width:400px){
  :root{--pad:14px}
  .brand-name{font-size:1.04rem}
  .brand-mark{width:32px;height:32px}
  .brand-mark svg{width:21px;height:21px}
  .kpis{grid-template-columns:minmax(0,1fr)}
  .uni-kpis{grid-template-columns:minmax(0,1fr)}
  .stats-grid{grid-template-columns:minmax(0,1fr); gap:18px}
  .ftr-grid{grid-template-columns:minmax(0,1fr)}
  .pipe{grid-template-columns:minmax(0,1fr)}
  .uni-top .brand-name{display:none}
  .uni-top .r .ib:nth-of-type(2){display:none}
}

/* ═══════════════════════════════════════════
   PRODUCTS PAGE — extends the shared system
   ═══════════════════════════════════════════ */

/* active nav item */
.nav-link[aria-current="page"]{color:var(--brand-dark); background:var(--brand-light); font-weight:600}
.m-flat[aria-current="page"],.acc-btn[aria-current="page"]{color:var(--brand-dark)}
.m-flat[aria-current="page"]{box-shadow:inset 3px 0 0 var(--brand); padding-left:12px}

/* ── hero ── */
.p-hero{position:relative; overflow:hidden; padding-block:clamp(38px,5.5vw,72px) clamp(52px,7vw,96px);
  background:linear-gradient(178deg,#FCFDFF 0%,var(--brand-tint) 52%,#EDF4FB 100%)}
.p-hero::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:58px 58px;
  mask-image:radial-gradient(ellipse 72% 62% at 50% 28%,#000,transparent 76%);
  -webkit-mask-image:radial-gradient(ellipse 72% 62% at 50% 28%,#000,transparent 76%)}
.p-hero-in{position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(30px,3.8vw,54px); align-items:center}
.p-hero-copy{max-width:560px}
.p-hero-copy .h1{margin-block:20px 18px}
.p-hero-btns{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
.p-hero-note{display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px; margin-top:24px; font-size:.85rem; color:var(--ink-3); font-weight:500}
.p-hero-note span{display:inline-flex; align-items:center; gap:7px}
.p-hero-note .ico{width:15px;height:15px; color:var(--ok); stroke-width:2.4}

/* ── product card additions ── */
.app-card .card-foot{display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:auto; padding-top:13px; border-top:1px solid var(--border)}
.page-products .app-card .cat-tag{margin-top:0}
.app-card .learn{display:inline-flex; align-items:center; gap:6px; font-size:.8rem; font-weight:700;
  color:var(--brand); opacity:.6; white-space:nowrap; transition:opacity .28s var(--ease), gap .28s var(--ease)}
.app-card .learn .ico{width:14px;height:14px; stroke-width:2.2; transition:transform .28s var(--ease)}
.app-card:hover .learn{opacity:1; gap:9px}
.app-card:hover .learn .ico{transform:translateX(3px)}
.app-card.pop{animation:cardPop .4s var(--ease) backwards}
@keyframes cardPop{from{opacity:0; transform:translateY(10px) scale(.985)}to{opacity:1; transform:none}}

/* category filters — scrollable strip on small screens */
.filters{scrollbar-width:thin}
.filters::-webkit-scrollbar{height:6px}
.filters::-webkit-scrollbar-thumb{background:var(--border-strong); border-radius:99px}

/* ── group headings inside the explorer ── */
.grp-head{grid-column:1/-1; display:flex; align-items:center; gap:12px; margin-top:14px; padding-top:6px}
.grp-head:first-child{margin-top:0}
.grp-head h3{font-size:.78rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap}
.grp-head .ln{flex:1; height:1px; background:linear-gradient(90deg,var(--border),transparent)}
.grp-head .cnt{font-size:.72rem; font-weight:700; color:var(--brand); background:var(--brand-light); padding:3px 9px; border-radius:var(--r-full); flex:none}
.grp-head.hide{display:none}

/* ── connected / featured band ── */
.connect{position:relative; overflow:hidden; border-radius:var(--r-xl); border:1px solid var(--border);
  background:linear-gradient(160deg,var(--surface) 0%,var(--brand-tint) 62%,#E9F2FA 100%); box-shadow:var(--sh-md)}
.connect-in{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(26px,3.4vw,46px);
  align-items:center; padding:clamp(22px,3.2vw,40px)}
.connect-copy .h2{margin-block:16px 14px}
.connect-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px}
.connect-tags span{display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:600;
  background:var(--surface); border:1px solid var(--border); color:var(--ink-2);
  padding:7px 13px; border-radius:var(--r-full); box-shadow:var(--sh-sm)}
.connect-tags .ico{width:14px;height:14px; color:var(--brand)}

/* ── why cards ── */
.why-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
.why-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:24px 22px;
  display:flex; flex-direction:column; gap:11px; min-width:0;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s}
.why-card:hover{transform:translateY(-4px); box-shadow:var(--sh-lg); border-color:#D3E4F5}
.why-card:hover .ico-box{background:var(--brand); color:#fff; transform:scale(1.06)}
.why-card b{font-size:1.02rem; font-weight:700; letter-spacing:-.024em; color:var(--ink)}
.why-card p{font-size:.86rem; color:var(--ink-2); line-height:1.58}
.why-card .num{font-size:.7rem; font-weight:800; color:var(--border-strong); font-family:var(--mono)}

/* ── ecosystem ── */
.p-eco{position:relative; width:100%; max-width:600px; margin-inline:auto; aspect-ratio:1}
.p-eco-svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.p-eco-svg line{stroke:var(--brand-muted); stroke-width:1; opacity:.55}
.p-eco-svg circle{fill:none; stroke:var(--border); stroke-width:1; stroke-dasharray:2 7}
.p-eco-core{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:3;
  width:clamp(106px,22%,140px); aspect-ratio:1; border-radius:50%;
  background:linear-gradient(150deg,var(--brand),var(--brand-deep)); color:#fff;
  display:grid; place-items:center; text-align:center;
  box-shadow:0 14px 36px rgba(30,114,184,.3), 0 0 0 9px rgba(30,114,184,.07)}
.p-eco-core svg{width:24px;height:24px; margin-inline:auto}
.p-eco-core b{display:block; font-size:.8rem; font-weight:800; letter-spacing:-.02em; margin-top:3px}
.p-eco-core small{display:block; font-size:.58rem; opacity:.75; letter-spacing:.08em; text-transform:uppercase}
.p-eno{position:absolute; z-index:2; transform:translate(-50%,-50%); display:flex; align-items:center; gap:8px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-full);
  padding:6px 13px 6px 7px; box-shadow:var(--sh-sm); white-space:nowrap;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s}
.p-eno:hover{transform:translate(-50%,-50%) scale(1.05); box-shadow:var(--sh-md); border-color:var(--brand-muted); z-index:4}
.p-eno .ico-box{width:25px;height:25px;border-radius:8px}
.p-eno .ico-box .ico{width:13px;height:13px}
.p-eno b{font-size:.72rem; font-weight:700; color:var(--ink-2)}

/* ── final CTA (soft brand, not flashy) ── */
.p-cta{background:linear-gradient(150deg,var(--brand-deep) 0%,var(--brand-dark) 55%,var(--brand) 100%); color:#fff; text-align:center; position:relative; overflow:hidden}
.p-cta::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(620px 380px at 50% 0%,rgba(255,255,255,.14),transparent 66%)}
.p-cta .in{position:relative}
.p-cta .h2{color:#fff; margin-block:18px 15px}
.p-cta .lead{color:#CFE3F4; max-width:620px; margin-inline:auto}
.p-cta-btns{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:30px}
.p-cta .nt{margin-top:22px; font-size:.81rem; color:#A6C8E2}

/* ── products responsive ── */
@media (max-width:1024px){
  .p-hero-in,.connect-in{grid-template-columns:minmax(0,1fr); gap:32px}
  .p-hero-copy{max-width:620px; margin-inline:auto; text-align:center}
  .p-hero-btns,.p-hero-note{justify-content:center}
  .why-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .page-products .filters{flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start;
    padding-bottom:8px; margin-inline:calc(var(--pad) * -1); padding-inline:var(--pad);
    -webkit-overflow-scrolling:touch}
  .page-products .chip{flex:none}
}
@media (max-width:680px){
  .p-eco{aspect-ratio:auto; display:flex; flex-direction:column; align-items:center; gap:16px; max-width:none}
  .p-eco-svg{display:none}
  .p-eco-core{position:static; transform:none; width:126px; margin:0}
  .p-eco-nodes{display:flex; flex-wrap:wrap; justify-content:center; gap:8px}
  .p-eno{position:static; transform:none}
  .p-eno:hover{transform:scale(1.04)}
}
@media (max-width:640px){
  .why-grid{grid-template-columns:minmax(0,1fr)}
  .connect-in{padding:20px}
  .p-hero-btns{flex-direction:column; align-items:stretch}
  .p-hero-btns .btn{width:100%}
  .p-cta-btns{flex-direction:column; align-items:stretch}
  .p-cta-btns .btn{width:100%}
}

/* the connected-workspace panel reuses the workflow step component outside a
   scroll-animated container, so pin it to its resolved state */
.connect .step{opacity:1; transform:none}
.connect .step .tag{margin-left:auto; font-size:.62rem; font-weight:700; color:var(--ink-3); flex:none; white-space:nowrap; background:none; border:0; padding:0}
.connect .arrow::after{height:100%}
.connect .steps .step b{font-size:.8rem}
@media (max-width:520px){
  .connect .step{padding:9px 10px; gap:8px}
  .connect .step .tag{display:none}
}

/* ═══════════════════════════════════════════
   APPS — the 9 core SpeedoOne applications
   (kept visually distinct from the 27 products/modules)
   ═══════════════════════════════════════════ */

/* section identity chip, used to separate Apps from Products & Modules */
.kind{display:inline-flex; align-items:center; gap:8px; font-size:.68rem; font-weight:800;
  letter-spacing:.11em; text-transform:uppercase; padding:6px 13px; border-radius:var(--r-full);
  border:1px solid var(--border); background:var(--surface); color:var(--ink-3)}
.kind .ico{width:13px;height:13px}
.kind b{font-weight:800; color:var(--brand-dark)}
.kind.apps{background:var(--brand-light); border-color:#D5E7F7; color:var(--brand-dark)}

/* ── app grid ── */
.apps-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
.app-tile{
  position:relative; display:flex; flex-direction:column; gap:13px; min-width:0;
  background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:22px;
  overflow:hidden;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.app-tile::before{
  content:""; position:absolute; inset:0; opacity:0; pointer-events:none;
  background:radial-gradient(340px 160px at 14% 0%, rgba(30,114,184,.07), transparent 70%);
  transition:opacity .32s var(--ease);
}
.app-tile:hover{transform:translateY(-5px); box-shadow:0 14px 34px rgba(16,32,56,.1); border-color:var(--brand-muted)}
.app-tile:hover::before{opacity:1}
.app-tile:hover .ico-box{transform:scale(1.08); background:var(--brand); color:#fff}
.app-tile > *{position:relative; z-index:1}
.app-tile .at-top{display:flex; align-items:center; gap:12px}
.app-tile h3{font-size:1.06rem; font-weight:700; letter-spacing:-.025em; color:var(--ink)}
.app-tile .at-kind{margin-left:auto; font-size:.62rem; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3); flex:none}
.app-tile > p{font-size:.85rem; color:var(--ink-2); line-height:1.58}
.app-tile .at-foot{display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:auto; padding-top:14px; border-top:1px solid var(--border)}
.app-tile .explore{display:inline-flex; align-items:center; gap:7px; font-size:.83rem; font-weight:700;
  color:var(--brand); transition:gap .28s var(--ease)}
.app-tile .explore .ico{width:14px;height:14px; stroke-width:2.2; transition:transform .28s var(--ease)}
.app-tile:hover .explore{gap:10px}
.app-tile:hover .explore .ico{transform:translateX(3px)}
.app-tile.hide{display:none}
.app-tile.pop{animation:cardPop .4s var(--ease) backwards}

/* ── in-card previews ── */
.prev{background:var(--bg); border:1px solid var(--border); border-radius:12px; padding:11px; min-width:0}
.prev-h{display:flex; align-items:center; gap:7px; margin-bottom:9px}
.prev-h b{font-size:.68rem; font-weight:700; color:var(--ink-2)}
.prev-h .rt{margin-left:auto; font-size:.6rem; color:var(--ink-3)}

.ms{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px}
.ms div{background:var(--surface); border:1px solid var(--border); border-radius:9px; padding:7px 9px; min-width:0}
.ms small{display:block; font-size:.58rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ms b{display:block; font-size:.86rem; font-weight:800; letter-spacing:-.03em; color:var(--ink); margin-top:2px}
.ms b.ok{color:#15803D} .ms b.wn{color:#B45309} .ms b.dg{color:#B91C1C}
.ms.three{grid-template-columns:repeat(3,minmax(0,1fr))}

.mlist{display:grid; gap:6px}
.mlist li{display:flex; align-items:center; gap:7px; font-size:.68rem; color:var(--ink-2); min-width:0}
.mlist li i{width:6px;height:6px;border-radius:50%; background:var(--brand); flex:none}
.mlist li i.ok{background:var(--ok)} .mlist li i.wn{background:var(--warn)} .mlist li i.dg{background:var(--dang)}
.mlist li b{font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mlist li span{margin-left:auto; font-size:.62rem; color:var(--ink-3); flex:none; font-family:var(--mono)}

/* GPS map preview */
.mmap{position:relative; height:96px; border-radius:10px; overflow:hidden;
  background:linear-gradient(160deg,#EDF3F9,#E3ECF5); border:1px solid var(--border)}
.mmap .road{position:absolute; background:#fff; opacity:.9}
.mmap .road.h1{left:0; right:0; top:34%; height:5px}
.mmap .road.h2{left:0; right:0; top:70%; height:3px}
.mmap .road.v1{top:0; bottom:0; left:28%; width:4px}
.mmap .road.v2{top:0; bottom:0; left:68%; width:3px}
.mmap .blk{position:absolute; background:rgba(30,114,184,.06); border-radius:3px}
.mmap .trk{position:absolute; width:20px;height:20px; margin:-10px 0 0 -10px; border-radius:50%;
  background:var(--brand); border:3px solid #fff; box-shadow:0 3px 8px rgba(16,32,56,.25); display:grid; place-items:center}
.mmap .trk::after{content:""; position:absolute; inset:-6px; border-radius:50%; border:2px solid rgba(30,114,184,.35); animation:pingp 2.4s ease-out infinite}
@keyframes pingp{0%{transform:scale(.9); opacity:.8}100%{transform:scale(1.6); opacity:0}}
.mmap .trk.b{background:var(--ok)} .mmap .trk.b::after{border-color:rgba(22,163,74,.35)}
.mmap .trk.c{background:var(--warn)} .mmap .trk.c::after{border-color:rgba(217,119,6,.35)}
.mmap .path{position:absolute; height:2px; background:repeating-linear-gradient(90deg,var(--brand) 0 5px,transparent 5px 10px); opacity:.6}

/* energy chart preview */
.mbars{display:flex; align-items:flex-end; gap:5px; height:66px}
.mbars i{flex:1; border-radius:4px 4px 2px 2px; background:linear-gradient(180deg,var(--brand-soft),var(--brand))}
.mbars i.hi{background:linear-gradient(180deg,#7FD3C4,#0E9F6E)}

/* kanban preview */
.mkan{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px}
.mkan .kc{background:var(--surface); border:1px solid var(--border); border-radius:9px; padding:7px 6px; min-width:0}
.mkan .kc > small{display:block; font-size:.55rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:5px; line-height:1.25; min-height:2.5em}
.mkan .kt{height:7px; border-radius:3px; background:var(--brand-light); margin-bottom:4px}
.mkan .kt.w{background:#FDEBC8} .mkan .kt.g{background:#D6F0E2} .mkan .kt.r{background:#FBDDDD}
.mkan .kc b{display:block; font-size:.62rem; font-weight:800; color:var(--ink-2); margin-top:5px}

/* ── featured apps band ── */
.apps-feat{position:relative; overflow:hidden; border-radius:var(--r-xl); border:1px solid var(--border);
  background:linear-gradient(160deg,var(--surface) 0%,var(--brand-tint) 60%,#E9F2FA 100%); box-shadow:var(--sh-md)}
.apps-feat-in{display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(26px,3.4vw,46px); align-items:center; padding:clamp(22px,3.2vw,40px)}
.apps-feat .h2{margin-block:16px 14px}
.apps-feat-list{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:22px}
.apps-feat-list li{display:flex; align-items:center; gap:9px; padding:9px 11px; background:var(--surface);
  border:1px solid var(--border); border-radius:10px; font-size:.83rem; font-weight:600; min-width:0;
  transition:border-color .22s, transform .22s var(--ease)}
.apps-feat-list li:hover{border-color:var(--brand-muted); transform:translateX(3px)}
.apps-feat-list li .ico{width:15px;height:15px; color:var(--brand); flex:none}
.apps-feat-list li span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ── app ecosystem tree ── */
.tree{max-width:820px; margin-inline:auto}
.tree-top{display:flex; justify-content:center; position:relative; padding-bottom:30px}
.tree-top::after{content:""; position:absolute; left:50%; bottom:0; width:2px; height:30px;
  background:var(--border-strong); transform:translateX(-50%)}
.tree-node{display:inline-flex; align-items:center; gap:10px; padding:11px 20px 11px 13px; border-radius:var(--r-full);
  background:linear-gradient(135deg,var(--brand),var(--brand-deep)); color:#fff;
  box-shadow:0 10px 26px rgba(30,114,184,.28)}
.tree-node svg{width:22px;height:22px; flex:none}
.tree-node b{font-size:.95rem; font-weight:800; letter-spacing:.04em}
.tree-cols{position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; padding-top:26px}
.tree-cols::before{content:""; position:absolute; top:0; left:16.666%; right:16.666%; height:2px; background:var(--border-strong)}
.tree-col{position:relative; display:grid; gap:12px}
.tree-col::before{content:""; position:absolute; top:-26px; left:50%; width:2px; height:26px;
  background:var(--border-strong); transform:translateX(-50%)}
.tree-chip{position:relative; display:flex; align-items:center; gap:10px; padding:12px 14px;
  background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--sh-sm); min-width:0;
  transition:transform .26s var(--ease), box-shadow .26s var(--ease), border-color .26s}
.tree-chip + .tree-chip::after{content:""; position:absolute; top:-13px; left:50%; width:2px; height:13px;
  background:var(--border); transform:translateX(-50%)}
.tree-chip:hover{transform:translateY(-3px); box-shadow:var(--sh-md); border-color:var(--brand-muted)}
.tree-chip .ico-box{width:32px;height:32px;border-radius:10px}
.tree-chip .ico-box .ico{width:16px;height:16px}
.tree-chip b{font-size:.85rem; font-weight:700; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tree-chip small{display:block; font-size:.66rem; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tree-note{text-align:center; margin-top:30px; font-size:.9rem; color:var(--ink-2); font-weight:600}

/* ── apps responsive ── */
@media (max-width:1024px){
  .apps-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .apps-feat-in{grid-template-columns:minmax(0,1fr); gap:30px}
}
@media (max-width:860px){
  .tree-cols{grid-template-columns:minmax(0,1fr); gap:12px; padding-top:20px; max-width:420px; margin-inline:auto}
  .tree-cols::before{display:none}
  .tree-col::before{top:-12px; height:12px}
  .tree-col:first-child::before{top:-20px; height:20px}
  .tree-col + .tree-col::before{display:none}
  .tree-col{gap:12px}
  .tree-top{padding-bottom:20px}
  .tree-top::after{height:20px}
}
@media (max-width:640px){
  .apps-grid{grid-template-columns:minmax(0,1fr)}
  .apps-feat-list{grid-template-columns:minmax(0,1fr)}
  .apps-feat-in{padding:20px}
  .mkan{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:400px){
  .ms.three{grid-template-columns:repeat(2,minmax(0,1fr))}
  .app-tile{padding:18px}
}

/* ═══════════════════════════════════════════
   HR PAGE — extends the shared system
   ═══════════════════════════════════════════ */

/* ── breadcrumb ── */
/* breadcrumb: see the shared .crumb rules defined for module pages */

/* ── generic HR grids ── */
.hr-g3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.hr-g4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
.hr-g5{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px}
.hr-split{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(28px,4.4vw,60px); align-items:center}
.hr-split .h2{margin-block:16px 14px}
.hr-flip .hr-art{order:-1}
.hr-art{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--sh-lg); overflow:hidden; min-width:0}
.hr-art-h{display:flex; align-items:center; gap:9px; padding:12px 15px; border-bottom:1px solid var(--border); background:var(--brand-tint)}
.hr-art-h .ico-box{width:28px;height:28px;border-radius:8px; background:#fff; color:var(--brand)}
.hr-art-h .ico-box .ico{width:15px;height:15px}
.hr-art-h b{font-size:.85rem}
.hr-art-h .pill{margin-left:auto}
.hr-art-b{padding:15px; display:grid; gap:12px}

/* ── point list (split sections) ── */
.hr-points{display:grid; grid-template-columns:repeat(auto-fill,minmax(172px,1fr)); gap:8px; margin-top:24px}
.hr-points li{display:flex; align-items:center; gap:9px; padding:9px 11px; background:var(--surface); border:1px solid var(--border); border-radius:10px; font-size:.85rem; font-weight:600; min-width:0; transition:border-color .2s, transform .2s var(--ease)}
.hr-points li:hover{border-color:var(--brand-muted); transform:translateX(3px)}
.hr-points li .ico{width:16px;height:16px; color:var(--brand); flex:none}
.hr-points li span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ── employee profile card ── */
.hr-prof-top{display:flex; align-items:center; gap:13px; padding:16px; border-bottom:1px solid var(--border); background:linear-gradient(150deg,var(--brand-tint),#EAF2FA)}
.hr-av{width:54px;height:54px;border-radius:16px; flex:none; display:grid; place-items:center; font-size:1.05rem; font-weight:800; color:#fff; letter-spacing:-.02em; background:linear-gradient(140deg,var(--brand),var(--brand-deep)); box-shadow:0 8px 20px rgba(30,114,184,.26)}
.hr-av.sm{width:34px;height:34px;border-radius:11px;font-size:.72rem; box-shadow:none}
.hr-av.g2{background:linear-gradient(140deg,#3AA17E,#1F7A5C)}
.hr-av.g3{background:linear-gradient(140deg,#C2782E,#9A5A1E)}
.hr-av.g4{background:linear-gradient(140deg,#6B62C8,#463FA0)}
.hr-prof-top .nm b{display:block; font-size:1rem; letter-spacing:-.024em}
.hr-prof-top .nm small{display:block; font-size:.78rem; color:var(--ink-2); margin-top:1px}
.hr-prof-top .nm .pill{margin-top:6px; display:inline-block}
.hr-fields{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; padding:15px}
.hr-field{border:1px solid var(--border); border-radius:10px; padding:9px 11px; min-width:0; background:#fff}
.hr-field small{display:block; font-size:.62rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hr-field b{display:block; font-size:.8rem; font-weight:600; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hr-tabs{display:flex; gap:4px; padding:0 15px 13px; flex-wrap:wrap}
.hr-tab{font-size:.72rem; font-weight:700; padding:6px 12px; border-radius:var(--r-full); border:1px solid var(--border); background:#fff; color:var(--ink-3); transition:all .2s var(--ease); white-space:nowrap}
.hr-tab:hover{border-color:var(--brand-muted); color:var(--brand-dark)}
.hr-tab[aria-pressed="true"]{background:var(--brand-light); border-color:#D5E7F7; color:var(--brand-dark)}

/* ── stat tiles ── */
.hr-tile{background:#fff; border:1px solid var(--border); border-radius:12px; padding:13px; min-width:0; transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s}
.hr-tile:hover{transform:translateY(-3px); box-shadow:var(--sh-md); border-color:#D3E4F5}
.hr-tile .rw{display:flex; align-items:center; gap:8px; margin-bottom:8px}
.hr-tile .ico-box{width:28px;height:28px;border-radius:8px}
.hr-tile .ico-box .ico{width:14px;height:14px}
.hr-tile small{font-size:.66rem; font-weight:700; color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hr-tile b{display:block; font-size:1.32rem; font-weight:800; letter-spacing:-.035em; line-height:1.15}
.hr-tile em{font-style:normal; font-size:.68rem; font-weight:600; color:var(--ink-3)}
.hr-tile .ico-box.ok{background:var(--ok-l); color:#15803D}
.hr-tile .ico-box.wn{background:var(--warn-l); color:#B45309}
.hr-tile .ico-box.dn{background:var(--dang-l); color:#B91C1C}

/* ── tab panes ── */
[data-pane]{display:none}
[data-pane].on{display:block; animation:paneIn .32s var(--ease)}
@keyframes paneIn{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}

/* ── status text in tables ── */
.hr-st{display:inline-flex; align-items:center; gap:6px; font-size:.68rem; font-weight:700; white-space:nowrap; color:#15803D}
.hr-st i{width:7px;height:7px;border-radius:50%; background:var(--ok); flex:none}
.hr-st.wn i{background:var(--warn)}
.hr-st.dn i{background:var(--dang)}
.hr-st.nu i{background:var(--border-strong)}
.hr-st.wn{color:#B45309}
.hr-st.dn{color:#B91C1C}
.hr-st.nu{color:var(--ink-3)}

/* ── leave request card ── */
.hr-req{background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); padding:16px; box-shadow:var(--sh-sm); min-width:0}
.hr-req + .hr-req{margin-top:11px}
.hr-req-h{display:flex; align-items:center; gap:11px}
.hr-req-h .nm b{display:block; font-size:.9rem}
.hr-req-h .nm small{display:block; font-size:.72rem; color:var(--ink-3)}
.hr-req-h .pill{margin-left:auto}
.hr-req-g{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin-top:13px}
.hr-req-g div{background:var(--bg); border:1px solid var(--border); border-radius:9px; padding:8px 10px; min-width:0}
.hr-req-g small{display:block; font-size:.6rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}
.hr-req-g b{display:block; font-size:.78rem; font-weight:600; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hr-req-n{margin-top:11px; font-size:.78rem; color:var(--ink-2); line-height:1.55; padding:9px 11px; border-left:3px solid var(--brand-muted); background:var(--brand-tint); border-radius:0 9px 9px 0}
.hr-req-acts{display:flex; flex-wrap:wrap; gap:9px; margin-top:14px}
.hr-act{display:inline-flex; align-items:center; justify-content:center; gap:7px; flex:1 1 130px; padding:9px 15px; border-radius:var(--r-full); font-size:.82rem; font-weight:700; border:1.5px solid transparent; transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s, color .2s, border-color .2s}
.hr-act .ico{width:15px;height:15px; stroke-width:2.3}
.hr-act.ap{background:var(--ok); color:#fff; box-shadow:0 5px 14px rgba(22,163,74,.24)}
.hr-act.ap:hover{transform:translateY(-2px); box-shadow:0 9px 20px rgba(22,163,74,.3)}
.hr-act.rj{background:#fff; color:#B91C1C; border-color:#F3C9C9}
.hr-act.rj:hover{background:var(--dang-l); transform:translateY(-2px)}

/* ── self-service portal tiles ── */
.hr-ess{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px}
.hr-ess > *{display:flex; flex-direction:column; gap:7px; padding:14px 13px; background:#fff; border:1px solid var(--border); border-radius:12px; min-width:0; transition:transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s}
.hr-ess > *:hover{transform:translateY(-4px); box-shadow:var(--sh-md); border-color:#D3E4F5}
.hr-ess > *:hover .ico-box{background:var(--brand); color:#fff}
.hr-ess .ico-box{width:34px;height:34px;border-radius:10px}
.hr-ess .ico-box .ico{width:17px;height:17px}
.hr-ess b{font-size:.83rem; font-weight:700; letter-spacing:-.018em}
.hr-ess small{font-size:.72rem; color:var(--ink-3); line-height:1.45}

/* ── document / file manager ── */
.hr-fold{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px}
.hr-fold > div{display:flex; align-items:center; gap:9px; padding:10px 11px; border:1px solid var(--border); border-radius:10px; background:#fff; min-width:0; transition:border-color .2s, transform .2s var(--ease)}
.hr-fold > div:hover{border-color:var(--brand-muted); transform:translateY(-2px)}
.hr-fold .ico-box{width:28px;height:28px;border-radius:8px}
.hr-fold .ico-box .ico{width:14px;height:14px}
.hr-fold b{display:block; font-size:.76rem; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hr-fold small{display:block; font-size:.64rem; color:var(--ink-3)}
.hr-files{display:grid; gap:6px}
.hr-files li{display:flex; align-items:center; gap:10px; padding:9px 11px; border:1px solid var(--border); border-radius:10px; font-size:.76rem; min-width:0; background:#fff}
.hr-files li .ico{width:15px;height:15px; color:var(--brand); flex:none}
.hr-files li b{font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hr-files li span{margin-left:auto; font-size:.66rem; color:var(--ink-3); flex:none}

/* ── announcements ── */
.hr-ann{display:grid; gap:10px}
.hr-ann article{border:1px solid var(--border); border-radius:12px; padding:13px 15px; background:#fff; transition:border-color .2s, transform .2s var(--ease), box-shadow .2s var(--ease)}
.hr-ann article:hover{border-color:#D3E4F5; transform:translateY(-2px); box-shadow:var(--sh-sm)}
.hr-ann .tp{display:flex; align-items:center; gap:9px; margin-bottom:7px}
.hr-ann .tp .ico-box{width:28px;height:28px;border-radius:8px}
.hr-ann .tp .ico-box .ico{width:14px;height:14px}
.hr-ann .tp b{font-size:.85rem}
.hr-ann .tp time{margin-left:auto; font-size:.66rem; color:var(--ink-3); flex:none}
.hr-ann p{font-size:.8rem; color:var(--ink-2); line-height:1.55}
.hr-ann .mt{display:flex; flex-wrap:wrap; gap:7px; margin-top:9px; font-size:.66rem; color:var(--ink-3)}
.hr-ann .mt span{display:inline-flex; align-items:center; gap:5px; background:var(--bg); border:1px solid var(--border); border-radius:var(--r-full); padding:3px 9px; font-weight:600}

/* ── mobile phones ── */
.hr-phones{display:flex; align-items:flex-end; justify-content:center; gap:clamp(10px,2vw,22px); flex-wrap:wrap}
.phone{width:min(214px,44vw); flex:none; border-radius:30px; background:#0F2A47; padding:9px; box-shadow:var(--sh-xl); position:relative}
.phone:nth-child(even){transform:translateY(-16px)}
.phone-scr{background:#fff; border-radius:23px; overflow:hidden; min-height:352px; display:flex; flex-direction:column}
.phone-notch{height:20px; display:grid; place-items:center}
.phone-notch i{width:44px;height:4px;border-radius:99px;background:rgba(255,255,255,.5); display:block}
.ph-top{padding:11px 13px 9px; background:var(--brand-tint); border-bottom:1px solid var(--border)}
.ph-top small{font-size:.6rem; color:var(--ink-3); font-weight:600}
.ph-top b{display:block; font-size:.82rem; letter-spacing:-.02em; margin-top:1px}
.ph-b{padding:11px 12px; display:grid; gap:9px; flex:1; align-content:start}
.ph-b .box{border:1px solid var(--border); border-radius:11px; padding:10px; background:#fff}
.ph-b .box small{display:block; font-size:.58rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3)}
.ph-b .box b{display:block; font-size:.92rem; font-weight:800; letter-spacing:-.03em; margin-top:2px}
.ph-b .row{display:flex; align-items:center; gap:8px; font-size:.68rem; color:var(--ink-2)}
.ph-b .row .ico{width:14px;height:14px; color:var(--brand); flex:none}
.ph-b .row span{margin-left:auto; font-size:.62rem; color:var(--ink-3)}
.ph-btn{margin-top:auto; margin-inline:12px; margin-bottom:12px; display:grid; place-items:center; padding:10px; border-radius:var(--r-full); font-size:.75rem; font-weight:700; color:#fff; background:linear-gradient(135deg,var(--brand),var(--brand-dark)); box-shadow:0 6px 16px rgba(30,114,184,.28)}
.ph-tabbar{display:flex; justify-content:space-around; padding:9px 6px; border-top:1px solid var(--border); background:#FAFCFE}
.ph-tabbar .ico{width:15px;height:15px; color:var(--border-strong)}
.ph-tabbar .ico.on{color:var(--brand)}

/* ── FAQ ── */
.hr-faq{max-width:840px; margin-inline:auto; display:grid; gap:10px}
.hr-faq details{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; transition:border-color .22s, box-shadow .22s}
.hr-faq details[open]{border-color:#D3E4F5; box-shadow:var(--sh-sm)}
.hr-faq summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px; padding:16px 18px; font-size:.96rem; font-weight:600; letter-spacing:-.018em}
.hr-faq summary::-webkit-details-marker{display:none}
.hr-faq summary:hover{color:var(--brand-dark)}
.hr-faq summary .ico{width:17px;height:17px; margin-left:auto; flex:none; color:var(--ink-3); stroke-width:2.2; transition:transform .25s var(--ease), color .2s}
.hr-faq details[open] summary .ico{transform:rotate(180deg); color:var(--brand)}
.hr-faq .ans{padding:0 18px 17px; font-size:.88rem; color:var(--ink-2); line-height:1.65}
.hr-faq details[open] .ans{animation:paneIn .3s var(--ease)}

/* ── availability note ── */
.hr-note{margin-top:20px; font-size:.79rem; color:var(--ink-3); line-height:1.6; padding:11px 14px; border-left:3px solid var(--border-strong); background:var(--bg); border-radius:0 10px 10px 0}
.hr-note.on-dark{color:#A6C8E2; border-left-color:rgba(255,255,255,.24); background:rgba(255,255,255,.06)}

/* ── HR responsive ── */
@media (max-width:1120px){
  .hr-g5{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1024px){
  .hr-split{grid-template-columns:minmax(0,1fr); gap:32px}
  .hr-flip .hr-art{order:0}
  .hr-g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hr-ess{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:860px){
  .hr-g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hr-fold{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:768px){
  .hr-g5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .phone:nth-child(even){transform:none}
}
@media (max-width:640px){
  .hr-g3,.hr-g5{grid-template-columns:minmax(0,1fr)}
  .hr-ess{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hr-fields{grid-template-columns:minmax(0,1fr)}
  .hr-req-g{grid-template-columns:minmax(0,1fr)}
  .hr-act{flex:1 1 100%}
}
@media (max-width:480px){
  .hr-g4{grid-template-columns:minmax(0,1fr)}
  .hr-fold{grid-template-columns:minmax(0,1fr)}
  .hr-ess{grid-template-columns:minmax(0,1fr)}
  .phone{width:min(240px,78vw)}
}

/* ═══════════════════════════════════════════
   WHATSAPP INTEGRATION PAGE
   WhatsApp green is an accent only — SpeedoOne blue stays primary
   ═══════════════════════════════════════════ */
:root{ --wa:#25D366; --wa-dk:#128C7E; --wa-bg:#E7F8EE; --wa-br:#BFEBD2; }

.wa-ico{color:var(--wa-dk)}
.ico-box.wa{background:var(--wa-bg); color:var(--wa-dk)}

/* breadcrumb */
.crumb{display:flex; flex-wrap:wrap; align-items:center; gap:7px; font-size:.82rem; color:var(--ink-3); padding-block:18px 0}
.crumb a{color:var(--ink-3); transition:color .2s}
.crumb a:hover{color:var(--brand)}
.crumb .sep{color:var(--border-strong)}
.crumb .cur{color:var(--ink); font-weight:600}

/* availability marker — used wherever a capability depends on plan or setup */
.avl{display:inline-flex; align-items:center; gap:5px; font-size:.64rem; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; padding:3px 9px; border-radius:var(--r-full); white-space:nowrap;
  background:var(--warn-l); color:#B45309}
.avl.on{background:var(--ok-l); color:#15803D}
.avl .ico{width:11px;height:11px}
.note-box{margin-top:20px; font-size:.82rem; color:var(--ink-3); line-height:1.6;
  padding:13px 15px; border-radius:0 12px 12px 0; border-left:3px solid var(--border-strong); background:var(--bg)}
.note-box strong{color:var(--ink-2)}

/* ── hero ── */
.wa-hero{position:relative; overflow:hidden; padding-block:8px clamp(52px,7vw,92px);
  background:linear-gradient(178deg,#FCFDFF 0%,var(--brand-tint) 54%,#EDF4FB 100%)}
.wa-hero::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:.45;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:58px 58px;
  mask-image:radial-gradient(ellipse 72% 60% at 52% 26%,#000,transparent 76%);
  -webkit-mask-image:radial-gradient(ellipse 72% 60% at 52% 26%,#000,transparent 76%)}
.wa-hero-in{position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  gap:clamp(28px,3.6vw,52px); align-items:center; padding-top:clamp(22px,3vw,40px)}
.wa-hero-copy{max-width:552px}
.wa-hero-copy .h1{margin-block:20px 18px}
.wa-btns{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
.wa-note{display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px; margin-top:24px; font-size:.85rem; color:var(--ink-3); font-weight:500}
.wa-note span{display:inline-flex; align-items:center; gap:7px}
.wa-note .ico{width:15px;height:15px; color:var(--wa-dk); stroke-width:2.4}

/* ── chat mockup ── */
.wa-app{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
  box-shadow:var(--sh-xl); overflow:hidden; position:relative; z-index:2}
.wa-top{display:flex; align-items:center; gap:10px; padding:11px 14px; background:var(--brand-tint); border-bottom:1px solid var(--border)}
.wa-top .mark{width:28px;height:28px;border-radius:9px; background:var(--wa-bg); color:var(--wa-dk); display:grid; place-items:center; flex:none}
.wa-top .mark .ico{width:16px;height:16px; stroke-width:0; fill:currentColor}
.wa-top b{font-size:.84rem; letter-spacing:-.02em}
.wa-top small{display:block; font-size:.65rem; color:var(--ink-3)}
.wa-top .conn{margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:.66rem; font-weight:700;
  color:#15803D; background:var(--ok-l); padding:4px 10px; border-radius:var(--r-full); flex:none; white-space:nowrap}
.wa-top .conn i{width:6px;height:6px;border-radius:50%;background:var(--ok); animation:wapulse 2.2s infinite}
@keyframes wapulse{0%,100%{opacity:1}50%{opacity:.4}}

.wa-body{display:grid; grid-template-columns:216px minmax(0,1fr)}
.wa-list{border-right:1px solid var(--border); background:var(--bg); display:flex; flex-direction:column; min-width:0}
.wa-search{padding:10px; border-bottom:1px solid var(--border)}
.wa-search span{display:flex; align-items:center; gap:7px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-full); padding:7px 12px; font-size:.71rem; color:var(--ink-3)}
.wa-search .ico{width:13px;height:13px; flex:none}
.wa-conv{display:flex; gap:10px; padding:11px 10px; border-bottom:1px solid var(--border); min-width:0; transition:background .2s}
.wa-conv:hover{background:var(--brand-light)}
.wa-conv.on{background:var(--surface); box-shadow:inset 3px 0 0 var(--wa)}
.wa-av{width:32px;height:32px;border-radius:50%; display:grid; place-items:center; font-size:.65rem; font-weight:800;
  color:#fff; flex:none; background:linear-gradient(135deg,var(--brand-soft),var(--brand-dark))}
.wa-av.g{background:linear-gradient(135deg,var(--wa),var(--wa-dk))}
.wa-av.o{background:linear-gradient(135deg,#F0A04B,#D97706)}
.wa-av.p{background:linear-gradient(135deg,#8A7BE0,#5B4BC4)}
.wa-conv .cb{min-width:0; flex:1}
.wa-conv .cr{display:flex; align-items:center; gap:6px}
.wa-conv b{font-size:.75rem; font-weight:700; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.wa-conv time{margin-left:auto; font-size:.6rem; color:var(--ink-3); flex:none}
.wa-conv p{font-size:.69rem; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:2px}
.wa-conv .un{width:17px;height:17px;border-radius:50%; background:var(--wa); color:#fff; font-size:.55rem;
  font-weight:800; display:grid; place-items:center; flex:none}

.wa-main{display:flex; flex-direction:column; min-width:0; background:var(--surface)}
.wa-head{display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--border)}
.wa-head .nm{min-width:0}
.wa-head b{display:block; font-size:.82rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.wa-head small{display:block; font-size:.64rem; color:#15803D; font-weight:600}
.wa-head .rt{margin-left:auto; display:flex; gap:6px; flex:none}
.wa-msgs{padding:14px; display:grid; gap:10px; align-content:start;
  background:linear-gradient(180deg,var(--bg),var(--surface))}
.wa-b{max-width:76%; padding:9px 12px; border-radius:14px; font-size:.78rem; line-height:1.5; box-shadow:var(--sh-sm); position:relative}
.wa-b.in{background:var(--surface); border:1px solid var(--border); border-bottom-left-radius:5px; justify-self:start}
.wa-b.out{background:var(--wa-bg); border:1px solid var(--wa-br); color:#0B4A34; border-bottom-right-radius:5px; justify-self:end}
.wa-b time{display:block; font-size:.6rem; opacity:.6; margin-top:4px}
.wa-b .att{display:flex; align-items:center; gap:8px; margin-top:8px; padding:7px 9px; border-radius:9px;
  background:var(--surface); border:1px solid var(--border)}
.wa-b.out .att{background:rgba(255,255,255,.7); border-color:var(--wa-br)}
.wa-b .att .ico{width:15px;height:15px; color:var(--brand); flex:none}
.wa-b .att span{font-size:.67rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.wa-b .tpl{display:inline-flex; align-items:center; gap:5px; font-size:.6rem; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; color:var(--wa-dk); margin-bottom:5px}
.wa-b .tpl .ico{width:11px;height:11px}
.wa-typing{display:inline-flex; gap:4px; padding:4px 2px}
.wa-typing i{width:6px;height:6px;border-radius:50%;background:var(--brand-muted); animation:watp 1.3s infinite}
.wa-typing i:nth-child(2){animation-delay:.16s} .wa-typing i:nth-child(3){animation-delay:.32s}
@keyframes watp{0%,60%,100%{transform:translateY(0); opacity:.4}30%{transform:translateY(-4px); opacity:1}}
.wa-quick{display:flex; flex-wrap:wrap; gap:6px; padding:0 14px 10px}
.wa-quick span{font-size:.67rem; font-weight:600; color:var(--brand-dark); background:var(--brand-light);
  border:1px solid #D5E7F7; border-radius:var(--r-full); padding:5px 11px; white-space:nowrap}
.wa-bar{display:flex; align-items:center; gap:8px; padding:10px 14px; border-top:1px solid var(--border); background:var(--surface)}
.wa-bar .fk{flex:1; min-width:0; background:var(--bg); border:1px solid var(--border); border-radius:var(--r-full);
  padding:9px 13px; font-size:.74rem; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.wa-bar .tb{display:inline-flex; align-items:center; gap:6px; font-size:.7rem; font-weight:700; color:var(--brand-dark);
  border:1px solid var(--border-strong); border-radius:var(--r-full); padding:8px 12px; flex:none; white-space:nowrap}
.wa-bar .tb .ico{width:13px;height:13px}
.wa-bar .snd{width:34px;height:34px;border-radius:50%; background:linear-gradient(135deg,var(--wa),var(--wa-dk));
  color:#fff; display:grid; place-items:center; flex:none; box-shadow:0 4px 12px rgba(18,140,126,.32)}
.wa-bar .snd .ico{width:16px;height:16px}

/* inbox rail (feature section) */
.rail{display:flex; gap:6px; padding:10px; border-bottom:1px solid var(--border); background:var(--bg); overflow-x:auto; scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail span{font-size:.7rem; font-weight:600; color:var(--ink-2); background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-full); padding:6px 12px; white-space:nowrap; flex:none}
.rail span.on{background:var(--brand); border-color:var(--brand); color:#fff}
.rail span b{font-weight:800; margin-left:4px; opacity:.7}

/* ── templates ── */
.tpl-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
.tpl-card{display:flex; flex-direction:column; gap:11px; padding:20px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-lg); min-width:0;
  transition:transform .26s var(--ease), box-shadow .26s var(--ease), border-color .26s}
.tpl-card:hover{transform:translateY(-4px); box-shadow:var(--sh-lg); border-color:#D3E4F5}
.tpl-card .th{display:flex; align-items:center; gap:9px}
.tpl-card .th b{font-size:.94rem; font-weight:700; letter-spacing:-.02em}
.tpl-card .th .avl{margin-left:auto}
.tpl-msg{background:var(--wa-bg); border:1px solid var(--wa-br); border-radius:12px; border-bottom-left-radius:5px;
  padding:11px 13px; font-size:.8rem; line-height:1.55; color:#0B4A34; flex:1}
.tpl-msg var{font-style:normal; font-weight:700; color:var(--wa-dk); background:rgba(255,255,255,.75);
  border-radius:5px; padding:0 4px}
.tpl-meta{display:flex; align-items:center; gap:8px; font-size:.68rem; color:var(--ink-3)}
.tpl-meta .ico{width:12px;height:12px}

/* ── notifications ── */
.noti-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.noti{display:flex; gap:12px; align-items:flex-start; padding:17px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--sh-sm); min-width:0;
  transition:transform .26s var(--ease), box-shadow .26s var(--ease)}
.noti:hover{transform:translateY(-3px); box-shadow:var(--sh-md)}
.noti b{display:block; font-size:.9rem; font-weight:700}
.noti p{font-size:.82rem; color:var(--ink-2); line-height:1.5; margin-top:3px}
.noti time{display:block; font-size:.68rem; color:var(--ink-3); margin-top:6px}

/* ── media chips ── */
.media-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
.media-chip{display:flex; align-items:center; gap:11px; padding:14px 16px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-md); min-width:0;
  transition:border-color .24s, transform .24s var(--ease)}
.media-chip:hover{border-color:var(--brand-muted); transform:translateX(3px)}
.media-chip b{font-size:.88rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.media-chip small{display:block; font-size:.72rem; color:var(--ink-3)}

/* ── how it works ── */
.steps3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; position:relative}
.step3{position:relative; padding:26px 22px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); display:flex; flex-direction:column; gap:10px;
  transition:transform .26s var(--ease), box-shadow .26s var(--ease), border-color .26s}
.step3:hover{transform:translateY(-4px); box-shadow:var(--sh-lg); border-color:#D3E4F5}
.step3 .no{font-size:.72rem; font-weight:800; letter-spacing:.1em; color:var(--brand); font-family:var(--mono)}
.step3 b{font-size:1.05rem; font-weight:700; letter-spacing:-.024em}
.step3 p{font-size:.86rem; color:var(--ink-2); line-height:1.58}
.step3::after{content:""; position:absolute; top:44px; right:-13px; width:10px; height:10px;
  border-top:2px solid var(--border-strong); border-right:2px solid var(--border-strong);
  transform:rotate(45deg); z-index:1}
.step3:last-child::after{display:none}

/* ── comparison ── */
.cmp{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2.4vw,26px)}
.cmp-col{border:1px solid var(--border); border-radius:var(--r-xl); padding:clamp(20px,2.6vw,28px); background:var(--surface)}
.cmp-col.bad{background:var(--bg)}
.cmp-col.good{border-color:var(--brand-muted); box-shadow:var(--sh-md)}
.cmp-h{display:flex; align-items:center; gap:10px; margin-bottom:18px}
.cmp-h b{font-size:1rem; font-weight:700}
.cmp-h .ico-box{width:36px;height:36px;border-radius:11px}
.cmp-col.bad .ico-box{background:var(--dang-l); color:#B91C1C}
.cmp-col.good .ico-box{background:var(--ok-l); color:#15803D}
.cmp-step{display:flex; align-items:center; gap:10px; padding:11px 13px; border-radius:11px;
  border:1px solid var(--border); background:var(--surface); font-size:.86rem; font-weight:600; min-width:0}
.cmp-col.bad .cmp-step{background:var(--surface); color:var(--ink-2)}
.cmp-col.good .cmp-step{background:var(--brand-light); border-color:#D5E7F7; color:var(--brand-deep)}
.cmp-step .ico{width:16px;height:16px; flex:none}
.cmp-col.bad .cmp-step .ico{color:var(--ink-3)}
.cmp-col.good .cmp-step .ico{color:var(--brand)}
.cmp-step span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cmp-link{height:16px; display:grid; place-items:center}
.cmp-link::before{content:""; width:2px; height:100%; background:var(--border-strong); border-radius:2px}
.cmp-col.good .cmp-link::before{background:var(--brand-muted)}

/* ── FAQ (reuses the shared accordion behaviour) ── */
.faq{max-width:820px; margin-inline:auto}
.faq .acc{border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); margin-bottom:10px; overflow:hidden}
.faq .acc-btn{padding:17px 18px; font-size:.98rem; font-weight:600; gap:14px; min-height:0}
.faq .acc.open{border-color:var(--brand-muted); box-shadow:var(--sh-sm)}
.faq .acc-pad{padding:0 18px 18px; font-size:.89rem; color:var(--ink-2); line-height:1.65}
.faq .acc-pad p + p{margin-top:10px}
.faq .acc-pad .avl{margin-top:10px}

/* ── analytics ── */
.an-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:16px}
.an{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:16px; min-width:0}
.an .rw{display:flex; align-items:center; gap:9px; margin-bottom:9px}
.an .ico-box{width:30px;height:30px;border-radius:9px}
.an .ico-box .ico{width:15px;height:15px}
.an small{font-size:.68rem; font-weight:700; color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.an b{display:block; font-size:1.4rem; font-weight:800; letter-spacing:-.04em; color:var(--ink)}
.an em{font-style:normal; font-size:.7rem; font-weight:700; color:var(--ok)}

/* ── final CTA ── */
.wa-cta{background:linear-gradient(150deg,var(--brand-deep) 0%,var(--brand-dark) 55%,var(--brand) 100%);
  color:#fff; text-align:center; position:relative; overflow:hidden}
.wa-cta::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(620px 380px at 50% 0%,rgba(255,255,255,.14),transparent 66%)}
.wa-cta .in{position:relative}
.wa-cta .h2{color:#fff; margin-block:18px 15px}
.wa-cta .lead{color:#CFE3F4; max-width:640px; margin-inline:auto}
.wa-cta-b{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:30px}
.wa-cta .nt{margin-top:22px; font-size:.81rem; color:#A6C8E2}

/* ── responsive ── */
@media (max-width:1024px){
  .wa-hero-in{grid-template-columns:minmax(0,1fr); gap:32px}
  .wa-hero-copy{max-width:620px; margin-inline:auto; text-align:center}
  .wa-btns,.wa-note{justify-content:center}
  .tpl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .an-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps3{grid-template-columns:minmax(0,1fr); gap:14px}
  .step3::after{top:auto; bottom:-13px; right:50%; transform:translateX(50%) rotate(135deg)}
}
@media (max-width:820px){
  .noti-grid,.media-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cmp{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  .wa-body{grid-template-columns:minmax(0,1fr)}
  .wa-list{border-right:0; border-bottom:1px solid var(--border); flex-direction:row; overflow-x:auto; scrollbar-width:none}
  .wa-list::-webkit-scrollbar{display:none}
  .wa-search{display:none}
  .wa-conv{flex:none; width:186px; border-bottom:0; border-right:1px solid var(--border)}
  .wa-conv.on{box-shadow:inset 0 -3px 0 var(--wa)}
  .wa-b{max-width:88%}
}
@media (max-width:640px){
  .tpl-grid,.noti-grid,.media-grid,.an-grid{grid-template-columns:minmax(0,1fr)}
  .wa-btns{flex-direction:column; align-items:stretch}
  .wa-btns .btn{width:100%}
  .wa-cta-b{flex-direction:column; align-items:stretch}
  .wa-cta-b .btn{width:100%}
  .wa-bar .tb span{display:none}
}
.why-card h3{font-size:1.02rem; font-weight:700; letter-spacing:-.024em; color:var(--ink)}

/* ── HR page refinements ── */
.page-hr .kpi small{white-space:normal; overflow:visible; line-height:1.3}
.page-hr .kpi em,.page-hr .ukpi em{color:var(--ink-3)}
.page-hr .bars{justify-content:space-between}
.page-hr .bars i{max-width:40px}
.hr-points{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.hr-split .hr-phones .phone{width:min(178px,31%)}
@media (max-width:1024px){
  .hr-split .hr-phones .phone{width:min(214px,44vw)}
}
@media (max-width:480px){
  .hr-split .hr-phones .phone{width:min(240px,78vw)}
}

/* ═══════════════════════════════════════════
   ACCOUNTING PAGE — extends the shared system
   ═══════════════════════════════════════════ */

/* ── dashboard greeting ── */
.acc-greet{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.acc-greet b{font-size:.92rem; letter-spacing:-.024em}
.acc-greet small{display:block; font-size:.68rem; color:var(--ink-3)}
.acc-greet .pill{margin-left:auto}

/* ── two-column artwork rows ── */
.acc-two{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start}
.acc-flow-one{grid-template-columns:minmax(0,1fr); max-width:620px; margin:clamp(24px,4vw,40px) auto 0}

/* ── invoice document ── */
.acc-inv{display:grid; gap:0}
.acc-inv-top{display:flex; align-items:center; gap:10px; padding:15px; border-bottom:1px dashed var(--border-strong)}
.acc-inv-brand{display:flex; align-items:center; gap:9px}
.acc-inv-brand b{font-size:.95rem; font-weight:800; letter-spacing:-.03em}
.acc-inv-no{margin-left:auto; text-align:right; min-width:0}
.acc-inv-no small{display:block; font-size:.6rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3)}
.acc-inv-no b{display:block; font-size:.86rem; font-family:var(--mono); letter-spacing:-.01em}
.acc-inv-sum{display:grid; gap:7px; padding:4px 15px 15px}
.acc-inv-sum div{display:flex; align-items:center; gap:10px; font-size:.8rem; color:var(--ink-2)}
.acc-inv-sum div b{margin-left:auto; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums}
.acc-inv-sum .tot{margin-top:4px; padding-top:10px; border-top:1px solid var(--border); font-weight:700; color:var(--ink)}
.acc-inv-sum .tot b{font-size:1.05rem; font-weight:800; letter-spacing:-.03em; color:var(--brand-dark)}

/* ── demo action buttons (illustration, not live controls) ── */
.acc-acts{display:flex; flex-wrap:wrap; gap:8px; padding:0 15px 15px}
.acc-act{display:inline-flex; align-items:center; justify-content:center; gap:7px; flex:1 1 118px;
  padding:9px 14px; border-radius:var(--r-full); font-size:.78rem; font-weight:700;
  background:#fff; color:var(--ink-2); border:1.5px solid var(--border-strong);
  transition:transform .2s var(--ease), border-color .2s, background .2s, color .2s, box-shadow .2s var(--ease)}
.acc-act .ico{width:14px;height:14px; stroke-width:2.3}
.acc-act:hover{border-color:var(--brand-muted); color:var(--brand-dark); background:var(--brand-light); transform:translateY(-2px)}
.acc-act.pr{background:linear-gradient(135deg,var(--brand),var(--brand-dark)); color:#fff; border-color:transparent; box-shadow:0 5px 14px rgba(30,114,184,.26)}
.acc-act.pr:hover{transform:translateY(-2px); box-shadow:0 9px 20px rgba(30,114,184,.32); color:#fff}

/* ── vendor bill card ── */
.acc-bill{border:1px solid var(--border); border-radius:var(--r-lg); background:#fff; padding:14px 0 0; box-shadow:var(--sh-sm)}
.acc-bill-h{display:flex; align-items:center; gap:11px; padding:0 15px}
.acc-bill-h .nm b{display:block; font-size:.9rem}
.acc-bill-h .nm small{display:block; font-size:.72rem; color:var(--ink-3)}
.acc-bill-h .pill{margin-left:auto}
.acc-bill .hr-req-g{padding:0 15px; margin-top:12px}
.acc-bill .acc-acts{margin-top:13px}

/* ── report tab bar ── */
.acc-tabbar{margin-bottom:14px}
.acc-tabbar .chip{padding:7px 14px; font-size:.8rem}

/* ── expense category bars ── */
.acc-cat{display:grid; gap:9px}
.acc-cat li{display:grid; grid-template-columns:minmax(94px,.9fr) minmax(0,2fr) minmax(58px,auto); align-items:center; gap:11px; font-size:.78rem}
.acc-cat b{font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.acc-cat .bar{height:9px; border-radius:99px; background:var(--bg); border:1px solid var(--border); overflow:hidden}
.acc-cat .bar i{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--brand),var(--brand-soft)); transform-origin:left; transition:width .5s var(--ease)}
.acc-cat .v{text-align:right; font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink-2)}

/* ── cash-flow paired bars ── */
.acc-cf{display:flex; align-items:flex-end; justify-content:space-between; gap:8px; height:150px; padding-top:6px}
.acc-cf.lg{height:190px}
.acc-cf.lg .pair i{max-width:30px}
.acc-cf li{flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:7px; height:100%}
.acc-cf .pair{flex:1; display:flex; align-items:flex-end; justify-content:center; gap:5px; width:100%}
.acc-cf .pair i{width:40%; max-width:24px; border-radius:5px 5px 0 0; background:var(--brand); animation:accGrow .8s var(--ease) both}
.acc-cf .pair i.out{background:var(--brand-muted)}
.acc-cf small{font-size:.64rem; font-weight:700; color:var(--ink-3)}
.acc-lgd-row{grid-auto-flow:column; justify-content:start; gap:16px; margin-top:12px; font-size:.72rem}
@keyframes accGrow{from{height:0 !important; opacity:.2}}

/* ── profit & loss rows ── */
.acc-pnl{display:grid; gap:9px}
.acc-pnl li{display:grid; grid-template-columns:minmax(120px,1.15fr) minmax(0,1.6fr) minmax(64px,auto); align-items:center; gap:11px;
  padding:10px 12px; border:1px solid var(--border); border-radius:11px; background:#fff; font-size:.8rem}
.acc-pnl .lb{font-weight:600; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.acc-pnl .bar{height:10px; border-radius:99px; background:var(--bg); border:1px solid var(--border); overflow:hidden}
.acc-pnl .bar i{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--brand),var(--brand-soft))}
.acc-pnl b{text-align:right; font-weight:700; font-variant-numeric:tabular-nums}
.acc-pnl .neg .bar i{background:linear-gradient(90deg,#B9CFE4,#9DCAF0)}
.acc-pnl .neg b{color:var(--ink-2)}
.acc-pnl .tot{background:var(--brand-light); border-color:#D5E7F7}
.acc-pnl .tot .lb{color:var(--brand-dark); font-weight:800}
.acc-pnl .tot .bar i{background:linear-gradient(90deg,var(--brand-deep),var(--brand))}
.acc-pnl .tot b{color:var(--brand-dark); font-size:.95rem; font-weight:800; letter-spacing:-.03em}

/* ── ecosystem chain ── */
.acc-chain{display:grid; gap:16px; justify-items:center}
.acc-chain-core{display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center;
  padding:18px 26px; border-radius:var(--r-xl); color:#fff;
  background:linear-gradient(150deg,var(--brand),var(--brand-deep));
  box-shadow:0 14px 32px rgba(30,114,184,.28)}
.acc-chain-core .ico-box{background:rgba(255,255,255,.16); color:#fff}
.acc-chain-core b{font-size:1rem; font-weight:800; letter-spacing:-.024em}
.acc-chain-core small{font-size:.6rem; letter-spacing:.09em; text-transform:uppercase; opacity:.8}
.acc-chain-grid{position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; width:100%; padding-top:20px}
.acc-chain-grid::before{content:""; position:absolute; top:0; left:50%; width:2px; height:20px; background:var(--border-strong); transform:translateX(-50%)}
.acc-node{position:static; transform:none; justify-content:flex-start; width:100%; min-width:0}
.acc-node:hover{transform:translateY(-3px)}
.acc-node b{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ── chart draw-in ── */
.rv-s.in .acc-draw,.rv.in .acc-draw{animation:accDraw 1.5s var(--ease) both}
.rv-s.in .acc-draw-d,.rv.in .acc-draw-d{animation-delay:.25s}
@keyframes accDraw{from{stroke-dasharray:1400; stroke-dashoffset:1400}to{stroke-dasharray:1400; stroke-dashoffset:0}}

/* ── notes ── */
.acc-shell-note{margin-top:20px; text-align:center; font-size:.82rem; color:var(--ink-3); max-width:720px; margin-inline:auto}

/* ── accounting responsive ── */
@media (max-width:1024px){
  .acc-two{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  .acc-chain-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .acc-cat li{grid-template-columns:minmax(0,1fr) minmax(52px,auto); row-gap:6px}
  .acc-cat .bar{grid-column:1 / -1; order:3}
  .acc-pnl li{grid-template-columns:minmax(0,1fr) minmax(60px,auto); row-gap:8px}
  .acc-pnl .bar{grid-column:1 / -1; order:3}
  .acc-cf{height:132px}
  .acc-cf.lg{height:150px}
  .acc-act{flex:1 1 100%}
}
@media (max-width:420px){
  .acc-chain-grid{grid-template-columns:minmax(0,1fr)}
  .acc-cf{gap:5px}
  .acc-cf small{font-size:.58rem}
}
@media (prefers-reduced-motion:reduce){
  .rv-s.in .acc-draw,.rv.in .acc-draw,.acc-cf .pair i{animation:none}
}
.hr-files li .hr-av{margin-left:0}
.why-card h3{font-size:1.02rem; font-weight:700; letter-spacing:-.024em; color:var(--ink)}

/* ── shared utilities used across pages ── */
.tag{display:inline-flex; align-items:center; gap:5px; font-size:.68rem; font-weight:700;
  padding:4px 10px; border-radius:var(--r-full); background:var(--brand-light); color:var(--brand-dark);
  white-space:nowrap; line-height:1.4}
.tag .ico{width:12px;height:12px}
.tag.nt{background:var(--bg); color:var(--ink-3); box-shadow:inset 0 0 0 1px var(--border)}
.tag.ok{background:var(--ok-l); color:#15803D}
.tag.wn{background:var(--warn-l); color:#B45309}
.tag.dg{background:var(--dang-l); color:#B91C1C}
.sub{font-size:.88rem; color:var(--ink-3); line-height:1.6}
/* the hero column is grid-constrained, so scale the headline to keep
   "Connect WhatsApp." on one line instead of breaking mid-sentence */
.page-whatsapp .wa-hero-copy .h1{font-size:clamp(2rem,4.3vw,3.15rem)}

/* ── accounting: keep stat tiles two-up on small screens ── */
@media (max-width:640px){
  .acc-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-accounting .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}