:root{
  --blue:#0B4F9C; --blue-2:#0A3D7A; --navy:#0A2747; --navy-2:#11325A; --navy-line:#2A4870;
  --red:#C3161C; --red-soft:#FDECEC;
  --ground:#F3F5F9; --paper:#FFFFFF; --paper-2:#FAFBFD;
  --ink:#121826; --muted:#4B5565; --line:#DFE4EC; --on-navy:#C5D1E0; --blue-soft:#E8F0FA;
  --ok:#1E8E5A; --ok-soft:#E6F5ED; --warn:#B7791F; --warn-soft:#FDF3E1;
  --display:'Alexandria','IBM Plex Sans Arabic',system-ui,sans-serif;
  --body:'IBM Plex Sans Arabic','IBM Plex Sans',system-ui,sans-serif;
  --gutter:clamp(16px,6vw,120px);
  color-scheme:light;
}
html[lang="en"]{--body:'IBM Plex Sans','IBM Plex Sans Arabic',system-ui,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.75;overflow-x:hidden}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:6px}
.wrap{padding-inline:var(--gutter)}
.eyebrow{font-size:14px;font-weight:600;color:var(--red);letter-spacing:.03em}
html[lang="en"] .eyebrow{text-transform:uppercase;letter-spacing:.08em;font-size:13px}
.h2{font-size:clamp(27px,3.3vw,42px);line-height:1.35;font-weight:700}

/* buttons */
.btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:14px;font-weight:600;font-size:17px;border:1.5px solid transparent;cursor:pointer;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background .25s,color .25s}
.btn-sm{min-height:44px;padding:0 20px;font-size:15px;border-radius:12px}
.btn-dark{background:var(--blue);color:#fff}
.btn-dark:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(11,79,156,.28)}
.btn-line{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-line:hover{background:var(--ink);color:#fff}
.btn-accent{background:var(--red);color:#fff;font-weight:700}
.btn-accent:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(195,22,28,.3)}
.btn-block{width:100%}
.btn .arr{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.btn:hover .arr{transform:translateX(-5px)}
html[dir="ltr"] .btn .arr{transform:scaleX(-1)}
html[dir="ltr"] .btn:hover .arr{transform:scaleX(-1) translateX(-5px)}

/* header */
header#hdr{position:sticky;top:0;z-index:60;background:rgba(243,245,249,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
header#hdr.scrolled{border-color:var(--line);box-shadow:0 6px 24px rgba(10,39,71,.06)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;height:76px}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand img{width:auto;height:38px}
.brand-txt{display:flex;flex-direction:column;line-height:1.2}
.brand-txt b{font-family:var(--display);font-weight:700;font-size:15.5px;color:var(--blue)}
.brand-txt small{font-size:13px;color:var(--red);font-weight:600}
.links{display:flex;gap:26px;font-size:15.5px;font-weight:500}
.links a{position:relative;padding:4px 0;color:var(--ink)}
.links a::after{content:"";position:absolute;inset-inline:0;bottom:-2px;height:2px;background:var(--red);transform:scaleX(0);transition:transform .25s}
.links a:hover::after{transform:scaleX(1)}
.nav-end{display:flex;align-items:center;gap:10px}
.lang{min-width:46px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--paper);font-weight:700;font-size:14px;cursor:pointer}
.lang:hover{border-color:var(--blue);color:var(--blue)}
.burger{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:var(--paper);cursor:pointer;padding:0 11px}
.burger span{display:block;height:2px;background:var(--ink);margin:5px 0;border-radius:2px;transition:transform .25s,opacity .25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* hero */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding-top:72px;padding-bottom:88px}
.hero h1{margin:16px 0 22px}
.h1-pre{display:block;font-size:clamp(22px,2.6vw,34px);font-weight:500;color:var(--muted);margin-bottom:10px}
.h1-main{display:block;font-size:clamp(38px,5.4vw,70px);line-height:1.3;font-weight:800;color:var(--navy)}
.h1-main mark{background:none;color:var(--blue);position:relative;white-space:nowrap}
.h1-main mark::after{content:"";position:absolute;inset-inline:-4px;bottom:.08em;height:.16em;background:var(--red);border-radius:4px;z-index:-1;transform-origin:right;animation:mark 1s .5s cubic-bezier(.2,.8,.2,1) both}
html[dir="ltr"] .h1-main mark::after{transform-origin:left}
@keyframes mark{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.lead{font-size:18px;color:var(--muted);max-width:560px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.checks{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-wrap:wrap;gap:10px 22px;font-size:14.5px;color:var(--muted)}
.checks li{display:flex;align-items:center;gap:7px}
.checks li::before{content:"";width:16px;height:16px;flex-shrink:0;background:var(--blue);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}

.hero-visual{position:relative}
.dash{background:var(--paper);border:1px solid var(--line);border-radius:22px;box-shadow:0 30px 60px rgba(10,39,71,.12);overflow:hidden}
.dash-top{display:flex;align-items:center;gap:12px;padding:12px 18px;background:#EEF2F7;border-bottom:1px solid var(--line)}
.dots{display:flex;gap:6px}
.dots i{width:9px;height:9px;border-radius:50%;background:#CBD3DE}
.dash-title{font-size:13px;color:var(--muted);font-weight:500}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:18px 18px 6px}
.kpi{background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;min-width:0}
.kpi small{font-size:12px;color:var(--muted)}
.kpi b{font-family:var(--display);font-size:clamp(15px,1.5vw,20px);color:var(--navy);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi em{font-style:normal;font-size:12px;font-weight:600}
.up{color:var(--ok)}
.chart{padding:10px 18px 4px}
.bars{display:flex;align-items:flex-end;gap:8px;height:130px;border-bottom:1px solid var(--line)}
.bar-g{flex:1;display:flex;align-items:flex-end;gap:3px;height:100%}
.bar-g span{flex:1;border-radius:5px 5px 0 0;height:0;transition:height 1s cubic-bezier(.2,.8,.2,1)}
.bar-g .b{background:var(--blue)}
.bar-g .r{background:#F2B8BA}
.legend{display:flex;gap:16px;font-size:12px;color:var(--muted);padding:8px 0 0}
.legend>span{display:flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:3px}
.lg-b{background:var(--blue)}.lg-r{background:#F2B8BA}
.status{list-style:none;margin:0;padding:12px 18px 18px;display:grid;gap:8px}
.status li{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px;border:1px solid var(--line);border-radius:12px;padding:9px 12px}
.status em{font-style:normal;font-size:12px;font-weight:600;padding:2px 10px;border-radius:99px;white-space:nowrap}
.status .ok{background:#F7FCF9;border-color:#CDEBD9}
.status .ok em{background:var(--ok-soft);color:var(--ok)}
.status .wait em{background:var(--warn-soft);color:var(--warn)}
.float-card{position:absolute;display:flex;align-items:center;gap:8px;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:10px 14px;font-size:13.5px;font-weight:600;box-shadow:0 16px 32px rgba(10,39,71,.14);animation:bob 5s ease-in-out infinite}
.fc1{top:-22px;inset-inline-end:-18px}
.fc1 b{font-family:var(--display);font-size:22px;color:var(--red)}
.fc2{bottom:-20px;inset-inline-start:-14px;animation-delay:-2.5s}
.fc2 svg{fill:none;stroke:#fff;stroke-width:3;background:var(--ok);border-radius:50%;padding:3px;width:22px;height:22px}
@keyframes bob{50%{transform:translateY(-8px)}}

/* marquee */
.marquee{background:var(--navy);color:#fff;overflow:hidden;padding:20px 0;direction:ltr}
.track{display:flex;align-items:center;gap:42px;width:max-content;animation:scroll 38s linear infinite}
.track span{font-family:var(--display);font-weight:600;font-size:clamp(18px,2vw,24px);white-space:nowrap}
.track i{width:9px;height:9px;border-radius:50%;background:var(--red);flex-shrink:0}
@keyframes scroll{to{transform:translateX(-50%)}}

/* sections */
.sec{padding:96px 0}
.white{background:var(--paper)}
.sec-head{text-align:center;max-width:760px;margin:0 auto 52px}
.sec-head .h2{margin-top:10px}
.sub{color:var(--muted);margin-top:12px}

/* services */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.svc{background:var(--paper-2);border:1px solid var(--line);border-radius:18px;padding:24px;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s}
.svc:hover{transform:translateY(-5px);box-shadow:0 18px 36px rgba(10,39,71,.09);border-color:var(--blue)}
.svc h3{font-size:18px;line-height:1.5;margin:16px 0 6px;color:var(--navy)}
.svc p{font-size:15px;color:var(--muted)}
.svc-wide{grid-column:span 2}
.ic{width:52px;height:52px;border-radius:14px;background:var(--navy);display:grid;place-items:center}
.ic svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.svc:nth-child(3n+2) .ic{background:var(--blue)}
.svc:nth-child(3n) .ic{background:var(--red)}

/* live demos */
.live-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.lcard{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:20px;display:flex;flex-direction:column}
.lcard-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:4px 6px 16px}
.lcard-head h3{font-size:20px;color:var(--navy)}
.lcard-head p{font-size:14.5px;color:var(--muted)}
.pill{font-size:12.5px;font-weight:600;padding:4px 12px;border-radius:99px;background:var(--blue-soft);color:var(--blue);white-space:nowrap}
.live-pill{background:var(--ok-soft);color:var(--ok);display:inline-flex;align-items:center;gap:6px}
.live-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.3}}
.lcard-body{background:var(--ground);border-radius:16px;padding:18px;flex:1;display:flex;flex-direction:column;gap:12px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:14px;font-weight:500;color:var(--muted)}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);background:var(--paper);border-radius:12px;padding:11px 14px;font-size:16px;outline:none;transition:border-color .2s,box-shadow .2s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(11,79,156,.15)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.seg{display:flex;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:4px;gap:4px}
.seg button{flex:1;border:0;background:none;border-radius:9px;padding:8px 10px;font-size:14px;font-weight:600;cursor:pointer;color:var(--muted);transition:background .2s,color .2s}
.seg button.on{background:var(--navy);color:#fff}
.results,.rep-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.results>div,.rep-sum>div{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;min-width:0}
.results small,.rep-sum small{font-size:12.5px;color:var(--muted)}
.results b,.rep-sum b{font-family:var(--display);font-size:clamp(14px,1.4vw,18px);color:var(--navy);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.results .hl,.rep-sum .hl{background:var(--navy);border-color:var(--navy)}
.results .hl small,.rep-sum .hl small{color:var(--on-navy)}
.results .hl b,.rep-sum .hl b{color:#fff}
.meter{height:8px;background:var(--paper);border-radius:99px;overflow:hidden;border:1px solid var(--line)}
.meter span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--red));border-radius:99px;transition:width .6s cubic-bezier(.2,.8,.2,1)}
html[dir="rtl"] .meter span{background:linear-gradient(270deg,var(--blue),var(--red));margin-inline-start:0}
.note{font-size:13.5px;color:var(--muted)}
.rep-chart{display:flex;align-items:flex-end;gap:10px;height:170px;padding:10px 6px 0;background:var(--paper);border:1px solid var(--line);border-radius:12px}
.rep-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.rep-col .pair{display:flex;align-items:flex-end;gap:3px;width:100%;height:100%;max-width:46px}
.rep-col .pair span{flex:1;border-radius:5px 5px 0 0;transition:height .7s cubic-bezier(.2,.8,.2,1);height:0}
.rep-col .pair .b{background:var(--blue)}
.rep-col .pair .r{background:#F2B8BA}
.rep-col small{font-size:11.5px;color:var(--muted);padding-bottom:6px;white-space:nowrap}
.todo{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.todo li{display:flex;align-items:center;gap:10px;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:14.5px;transition:background .3s,border-color .3s}
.todo li span{flex:1}
.todo li em{font-style:normal;font-size:12px;color:var(--muted);white-space:nowrap}
.todo li i{width:22px;height:22px;border-radius:7px;border:2px solid var(--line);flex-shrink:0;display:grid;place-items:center;transition:background .3s,border-color .3s}
.todo li.done{background:#F7FCF9;border-color:#CDEBD9}
.todo li.done i{background:var(--ok);border-color:var(--ok)}
.todo li.done i::after{content:"";width:10px;height:6px;border:2.5px solid #fff;border-top:0;border-inline-end:0;transform:translateY(-1px) rotate(-45deg)}
html[dir="rtl"] .todo li.done i::after{border-inline-end:2.5px solid #fff;border-inline-start:0;transform:translateY(-1px) rotate(-45deg)}
.todo li.done span{color:var(--muted)}
.todo-foot{display:flex;justify-content:space-between;font-size:14px;color:var(--muted)}
.todo-foot b{color:var(--ok);font-family:var(--display)}

/* process */
.dark{background:var(--navy);color:#fff}
.dark .eyebrow{color:#FF8A8E}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;position:relative}
.steps::before{content:"";position:absolute;top:24px;inset-inline:24px;height:1px;background:var(--navy-line)}
.steps li{position:relative}
.num{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--navy);border:1.5px solid var(--navy-line);font-family:var(--display);font-weight:700;margin-bottom:22px;position:relative;transition:background .3s,border-color .3s}
.steps li:hover .num{background:var(--red);border-color:var(--red)}
.steps h3{font-size:21px;margin-bottom:8px}
.steps p{color:var(--on-navy);font-size:15.5px}

/* builder */
.builder{display:grid;grid-template-columns:1fr 340px;gap:40px;align-items:start}
.presets{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:24px}
.presets>span{font-size:14px;color:var(--muted)}
.presets button{border:1px solid var(--line);background:var(--paper);border-radius:99px;padding:7px 16px;font-size:14px;font-weight:600;cursor:pointer;transition:border-color .2s,color .2s}
.presets button:hover{border-color:var(--blue);color:var(--blue)}
.b-group{margin-bottom:22px}
.b-group h4{margin:0 0 10px;font-size:15px;font-family:var(--display);font-weight:600;display:flex;align-items:center;gap:8px}
.b-group h4::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red)}
.opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.opt{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;min-height:96px;padding:14px 10px;border:1px solid var(--line);border-radius:14px;background:var(--paper);cursor:pointer;font-size:14px;font-weight:500;line-height:1.45;transition:background .2s,border-color .2s,color .2s,transform .2s}
.opt:hover{border-color:var(--blue);transform:translateY(-2px)}
.opt .oi{width:34px;height:34px;border-radius:10px;background:var(--blue-soft);display:grid;place-items:center}
.opt .oi svg{width:18px;height:18px;fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.opt::after{content:"";position:absolute;top:9px;inset-inline-start:9px;width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line)}
.opt.on{background:var(--navy);border-color:var(--navy);color:#fff}
.opt.on .oi{background:rgba(255,255,255,.12)}
.opt.on .oi svg{stroke:#fff}
.opt.on::after{background:var(--red);border-color:var(--red);box-shadow:inset 0 0 0 3px var(--navy)}
.opt .freq{font-size:11.5px;font-weight:600;color:var(--muted)}
.opt.on .freq{color:var(--on-navy)}
.b-sum{position:sticky;top:100px;background:var(--navy);color:#fff;border-radius:22px;padding:24px;box-shadow:0 30px 60px rgba(10,39,71,.22)}
.b-sum-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.b-sum-head h3{font-size:22px}
.badge{min-width:30px;height:30px;padding:0 8px;border-radius:99px;background:var(--red);display:grid;place-items:center;font-weight:700;font-size:14px}
#bList{list-style:none;margin:0;padding:0 0 14px;display:grid;gap:6px;font-size:14.5px;color:var(--on-navy);border-bottom:1px solid var(--navy-line);max-height:260px;overflow:auto}
#bList li{display:flex;gap:8px;align-items:center}
#bList li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red);flex-shrink:0}
#bList .empty{color:#8899AE}
#bList .empty::before{display:none}
.b-type{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}
.b-type>div{background:var(--navy-2);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column}
.b-type small{font-size:12.5px;color:var(--on-navy)}
.b-type b{font-family:var(--display);font-size:22px}
.b-note{text-align:center;font-size:13px;color:var(--on-navy);margin-top:12px}

/* sectors */
.sectors{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.sector{display:flex;align-items:center;gap:14px;border:1px solid var(--line);background:var(--paper-2);border-radius:16px;padding:18px;font-weight:600;font-size:15.5px;transition:border-color .2s,transform .2s}
.sector:hover{border-color:var(--red);transform:translateY(-3px)}
.sector svg{width:40px;height:40px;padding:9px;border-radius:12px;background:var(--red-soft);fill:none;stroke:var(--red);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

/* about */
.about{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center}
.about-logo{background:var(--paper);border:1px solid var(--line);border-radius:28px;padding:40px 30px;box-shadow:0 24px 48px rgba(10,39,71,.08)}
.about-txt .h2{margin:10px 0 24px}
.vmo{display:grid;gap:14px}
.vm{background:var(--paper);border:1px solid var(--line);border-inline-start:4px solid var(--blue);border-radius:16px;padding:18px 22px}
.vm:nth-child(2){border-inline-start-color:var(--red)}
.vm:nth-child(3){border-inline-start-color:var(--navy)}
.vm .tag{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.vm h3{font-size:20px;color:var(--navy);margin:2px 0 6px}
.vm p{color:var(--muted);font-size:16px}
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:64px}
.why-i{text-align:center;padding:10px}
.why-i .ic{margin:0 auto 14px;background:var(--blue-soft)}
.why-i .ic svg{stroke:var(--blue)}
.why-i h3{font-size:18px;color:var(--navy);margin-bottom:4px}
.why-i p{color:var(--muted);font-size:15px}

/* contact */
#contact{padding-top:16px}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:48px;background:var(--navy);color:#fff;border-radius:28px;padding:clamp(28px,5vw,64px);position:relative;overflow:hidden}
.contact::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(195,22,28,.28),transparent 70%);top:-160px;inset-inline-end:-120px;pointer-events:none}
.contact::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(11,79,156,.45),transparent 70%);bottom:-260px;inset-inline-start:-160px;pointer-events:none}
.c-info,.c-form{position:relative;z-index:1}
.c-info .h2{margin-bottom:14px}
.c-info>p{color:var(--on-navy)}
.c-list{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:12px;font-size:15.5px}
.c-list span{color:var(--on-navy)}
.c-form{display:grid;gap:12px}
.c-form label{color:var(--on-navy)}
.c-form .field input,.c-form .field select,.c-form .field textarea{background:var(--navy-2);border-color:var(--navy-line);color:#fff}
.c-form .field input::placeholder{color:#7F91A8}
.c-form .field select option{color:var(--ink);background:#fff}
.c-form textarea{resize:vertical}
.form-err{color:#FFB3B5;font-size:14px}

/* footer */
.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;padding-top:36px;padding-bottom:36px;border-top:1px solid var(--line);margin-top:24px}
.social{display:flex;gap:22px;font-size:14.5px;color:var(--muted)}
.social a:hover{color:var(--blue)}
.copy{font-size:14px;color:var(--muted)}

/* whatsapp float */
.wa{position:fixed;bottom:24px;inset-inline-end:24px;z-index:70;width:60px;height:60px;border-radius:50%;background:#25A160;color:#fff;display:grid;place-items:center;box-shadow:0 14px 30px rgba(37,161,96,.4);transition:transform .25s}
.wa:hover{transform:scale(1.08)}
.wa::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(37,161,96,.35);animation:ring 2.4s infinite}
@keyframes ring{0%{transform:scale(.9);opacity:1}100%{transform:scale(1.3);opacity:0}}

/* reveal */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* responsive */
@media (max-width:1180px){
  .links{gap:18px;font-size:14.5px}
  .brand-txt{display:none}
}
@media (max-width:1024px){
  .links{display:none;position:absolute;top:76px;inset-inline:0;flex-direction:column;gap:0;background:var(--paper);border-bottom:1px solid var(--line);padding:8px var(--gutter) 16px;box-shadow:0 20px 30px rgba(10,39,71,.08)}
  .links.open{display:flex}
  .links a{padding:12px 0;border-bottom:1px solid var(--line)}
  .links a:last-child{border-bottom:0}
  .links a::after{display:none}
  .burger{display:block}
  .brand-txt{display:flex}
  .hero{grid-template-columns:1fr;gap:56px;padding-top:48px}
  .hero-visual{max-width:560px;margin-inline:auto;width:100%}
  .live-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr;row-gap:40px}
  .steps::before,.steps::after{display:none}
  .builder{grid-template-columns:1fr}
  .b-sum{position:static}
  .sectors{grid-template-columns:repeat(2,1fr)}
  .about{grid-template-columns:1fr;gap:36px}
  .about-logo{max-width:440px;margin-inline:auto}
  .why{grid-template-columns:repeat(2,1fr)}
  .contact{grid-template-columns:1fr;gap:32px}
}
@media (max-width:640px){
  body{font-size:16px}
  .nav{height:68px}
  .links{top:68px}
  .brand img{height:32px}
  .brand-txt b{font-size:14px}
  .brand-txt small{font-size:12px}
  .nav-end .btn-sm{display:none}
  .sec{padding:72px 0}
  .svc-wide{grid-column:auto}
  .steps{grid-template-columns:1fr}
  .kpis{gap:6px;padding:14px 12px 4px}
  .kpi{padding:8px}
  .chart{padding:8px 12px 2px}
  .status{padding:10px 12px 14px}
  .fc1{inset-inline-end:-4px;top:-26px}
  .fc2{inset-inline-start:-4px}
  .results,.rep-sum{grid-template-columns:1fr 1fr}
  .results .hl,.rep-sum .hl{grid-column:span 2}
  .two{grid-template-columns:1fr}
  .opts{grid-template-columns:1fr 1fr}
  .sectors{grid-template-columns:1fr 1fr;gap:10px}
  .sector{flex-direction:column;text-align:center;gap:10px;padding:16px 10px;font-size:14.5px}
  .why{grid-template-columns:1fr 1fr;gap:10px}
  .foot{flex-direction:column;text-align:center}
  .wa{width:54px;height:54px;bottom:16px;inset-inline-end:16px}
}

/* =========================================================
   MOTION
   ========================================================= */
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* scroll progress */
.progress{position:fixed;top:env(safe-area-inset-top,0px);inset-inline:0;height:3px;z-index:90;background:linear-gradient(90deg,var(--blue),var(--red));transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
html[dir="rtl"] .progress{transform-origin:100% 50%;background:linear-gradient(270deg,var(--blue),var(--red))}

/* header */
header#hdr{animation:hdrIn .8s cubic-bezier(.2,.8,.2,1) both}
@keyframes hdrIn{from{transform:translateY(-100%);opacity:0}}
.nav{transition:height .35s cubic-bezier(.2,.8,.2,1)}
header#hdr.scrolled .nav{height:64px}
.brand img{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.brand:hover img{transform:rotate(-6deg) scale(1.06)}

/* hero entrance */
.hero{position:relative;overflow:clip;isolation:isolate}
.hero>.hero-text,.hero>.hero-visual{position:relative;z-index:1}
.intro{animation:rise 1s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0s)}
@keyframes rise{from{opacity:0;transform:translateY(30px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
.intro-pop{animation:popIn 1.2s .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes popIn{from{opacity:0;transform:translateY(50px) scale(.94) rotate(-1.5deg)}to{opacity:1;transform:none}}
.hero-visual .kpi{animation:rise .8s cubic-bezier(.2,.8,.2,1) both}
.hero-visual .kpi:nth-child(1){animation-delay:.9s}
.hero-visual .kpi:nth-child(2){animation-delay:1s}
.hero-visual .kpi:nth-child(3){animation-delay:1.1s}
.status li{animation:slideIn .7s cubic-bezier(.2,.8,.2,1) both}
.status li:nth-child(1){animation-delay:1.5s}
.status li:nth-child(2){animation-delay:1.65s}
.status li:nth-child(3){animation-delay:1.8s}
@keyframes slideIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
html[dir="ltr"] .status li{animation-name:slideInL}
@keyframes slideInL{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:none}}
.float-card{animation:fcIn .8s cubic-bezier(.2,.8,.2,1) both,bob 5s 2s ease-in-out infinite}
.fc1{animation-delay:1.9s,2s}
.fc2{animation-delay:2.1s,4.5s}
@keyframes fcIn{from{opacity:0;transform:scale(.6) translateY(20px)}}
.dash{transition:transform .6s cubic-bezier(.2,.8,.2,1)}

/* live status flip */
.status .s-ok{display:none}
.status li.ok .s-ok{display:inline-block;animation:badge .5s cubic-bezier(.3,1.6,.5,1) both}
.status li.ok .s-wait{display:none}
.status li.wait .s-wait{display:inline-block;animation:badge .5s cubic-bezier(.3,1.6,.5,1) both}
.status li{transition:background .5s,border-color .5s}
@keyframes badge{from{transform:scale(.4);opacity:0}}

/* rotating phrase */
.rot{display:inline-block}
.rot mark{display:inline-block}
.rot.out mark{animation:rotOut .45s cubic-bezier(.6,0,.8,.4) forwards}
.rot.in mark{animation:rotIn .7s cubic-bezier(.2,.8,.2,1) both}
.rot.in mark::after{animation:mark2 .9s .25s cubic-bezier(.2,.8,.2,1) both}
@keyframes rotOut{to{opacity:0;transform:translateY(-35%);filter:blur(8px)}}
@keyframes rotIn{from{opacity:0;transform:translateY(35%);filter:blur(8px)}}
@keyframes mark2{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* hero background */
.waves{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(70px);z-index:0;pointer-events:none;opacity:.55}
.b1{width:440px;height:440px;background:rgba(11,79,156,.22);top:-120px;inset-inline-start:-80px;animation:drift1 16s ease-in-out infinite alternate}
.b2{width:360px;height:360px;background:rgba(195,22,28,.14);bottom:-140px;inset-inline-end:10%;animation:drift2 19s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(-120px,90px) scale(1.15)}}
@keyframes drift2{to{transform:translate(140px,-80px) scale(.9)}}

/* buttons: shine sweep */
.btn-dark,.btn-accent{position:relative;overflow:hidden;isolation:isolate}
.btn-dark::after,.btn-accent::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s cubic-bezier(.2,.8,.2,1);z-index:-1;pointer-events:none}
.btn-dark:hover::after,.btn-accent:hover::after{transform:translateX(120%)}
.btn:active{transform:scale(.97)}

/* marquee */
.marquee:hover .track{animation-play-state:paused}
.track.rev{animation-direction:reverse;animation-duration:46s}
.marquee.m2{background:var(--blue);padding:12px 0}
.marquee.m2 .track span{font-size:clamp(15px,1.5vw,18px);font-weight:500;opacity:.9}
.marquee.m2 .track i{background:#fff;opacity:.6;width:6px;height:6px}

/* reveal (only for content below the first screen) */
.rv{transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1),filter .9s}
.rv.pre{opacity:0;transform:translateY(40px) scale(.97);filter:blur(4px)}
.rv.pre.from-s{transform:translateX(50px)}
html[dir="ltr"] .rv.pre.from-s{transform:translateX(-50px)}
.rv.pre.from-e{transform:translateX(-50px)}
html[dir="ltr"] .rv.pre.from-e{transform:translateX(50px)}
.rv.pre.zoom{transform:scale(.88)}

/* word-by-word headings */
.split .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-block:.08em;margin-block:-.08em}
.split .w>span{display:inline-block;transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .9s;transition-delay:calc(var(--i)*60ms)}
.split.pre .w>span{transform:translateY(110%);opacity:0}

/* cards: tilt + spotlight */
.svc{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s,opacity .9s,filter .9s;position:relative;overflow:hidden}
.svc:hover{--ty:-6px;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty))}
.svc.rv.pre{transform:translateY(40px) scale(.97)}
.svc::before,.lcard::before,.sector::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(11,79,156,.12),transparent 65%);opacity:0;transition:opacity .35s;pointer-events:none}
.svc:hover::before,.lcard:hover::before,.sector:hover::before{opacity:1}
.lcard,.sector{position:relative}
.lcard>*{position:relative}
.ic{transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.svc:hover .ic,.why-i:hover .ic{transform:rotate(-8deg) scale(1.12)}
.sector svg{transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.sector:hover svg{transform:scale(1.15) rotate(6deg)}

/* number flash on change */
.flash{animation:flash .6s ease}
@keyframes flash{30%{color:var(--red)}}
.results .hl b.flash,.rep-sum .hl b.flash{animation:flashW .6s ease}
@keyframes flashW{30%{color:#FFB3B5}}

/* process line */
.steps::after{content:"";position:absolute;top:24px;inset-inline:24px;height:2px;background:linear-gradient(90deg,var(--red),#FF8A8E);transform-origin:right;transform:scaleX(var(--p,0));transition:transform .2s linear}
html[dir="rtl"] .steps::after{background:linear-gradient(270deg,var(--red),#FF8A8E)}
html[dir="ltr"] .steps::after{transform-origin:left}
.num{z-index:1;transition:background .5s,border-color .5s,transform .5s cubic-bezier(.3,1.6,.5,1),box-shadow .5s}
.steps li.lit .num{background:var(--red);border-color:var(--red);transform:scale(1.12);box-shadow:0 0 0 8px rgba(195,22,28,.18)}

/* builder */
.opt{transition:background .25s,border-color .25s,color .25s,transform .35s cubic-bezier(.3,1.6,.5,1),box-shadow .25s}
.opt.pop{animation:optPop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes optPop{40%{transform:scale(.94)}100%{transform:scale(1)}}
.opt.on{box-shadow:0 12px 24px rgba(10,39,71,.22)}
.badge.bump{animation:bump .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes bump{40%{transform:scale(1.4)}}
#bList li{animation:slideIn .4s cubic-bezier(.2,.8,.2,1) both}
html[dir="ltr"] #bList li{animation-name:slideInL}

/* about logo: rotating gradient border + float */
.about-logo{position:relative;isolation:isolate;border-color:transparent}
.about-logo::before{content:"";position:absolute;inset:-2px;border-radius:30px;background:conic-gradient(from var(--ang),var(--blue),var(--red),#fff,var(--blue));z-index:-2;animation:spin 6s linear infinite}
.about-logo::after{content:"";position:absolute;inset:0;border-radius:28px;background:var(--paper);z-index:-1}
.about-logo img{animation:floatY 6s ease-in-out infinite}
@keyframes spin{to{--ang:360deg}}
@keyframes floatY{50%{transform:translateY(-10px)}}

/* contact glow drift */
.contact::before{animation:drift2 14s ease-in-out infinite alternate}
.contact::after{animation:drift1 18s ease-in-out infinite alternate}
.c-form .field input,.c-form .field select,.c-form .field textarea{transition:border-color .25s,box-shadow .25s,transform .25s}
.c-form .field input:focus,.c-form .field textarea:focus{transform:translateY(-2px)}

/* whatsapp float entrance */
.wa{animation:waIn .7s 2.4s cubic-bezier(.3,1.6,.5,1) both}
@keyframes waIn{from{transform:scale(0) rotate(-90deg)}}

@media (max-width:640px){
  .h1-main mark{white-space:normal}
  .blob{filter:blur(50px)}
  .b1{width:280px;height:280px}
  .b2{width:240px;height:240px}
}
@media (hover:none){.svc{--rx:0deg!important;--ry:0deg!important}}
@media (prefers-reduced-motion:reduce){
  .rv.pre,.split.pre .w>span{opacity:1!important;transform:none!important;filter:none!important}
  .waves,.blob{display:none}
}
html,body{overflow-x:clip}
@media (max-width:1024px){
  .rv.pre.from-s,.rv.pre.from-e,html[dir="ltr"] .rv.pre.from-s,html[dir="ltr"] .rv.pre.from-e{transform:translateY(40px) scale(.97)}
}

/* ===== readability: keep text, lines and badges from overlapping ===== */
.h1-main{line-height:1.55}
.h1-pre{line-height:1.6}
.h2{line-height:1.6}
.h1-main mark{padding-bottom:.12em}
.h1-main mark::after{bottom:-.02em;height:.11em}
.split .w{padding-block:.25em;margin-block:-.25em}
.brand-txt{line-height:1.45}
.lead{line-height:1.9}
.hero-text{position:relative;z-index:2}
/* background waves stay low, under the content, never behind text */
.waves{-webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 72%,#000 92%);mask-image:linear-gradient(to bottom,transparent 0,transparent 72%,#000 92%);opacity:.9}
/* floating badges sit outside the dashboard instead of covering it */
.fc1{top:-58px;inset-inline-end:18px}
.fc2{bottom:-56px;inset-inline-start:18px}
.hero{padding-bottom:110px}
@media (max-width:1024px){.hero{gap:84px}}
@media (max-width:640px){
  .fc1{top:-58px;inset-inline-end:auto;inset-inline-start:8px}
  .fc2{inset-inline-start:auto!important;inset-inline-end:8px}
  .fc2{bottom:-56px}
  .h1-main{line-height:1.5}
}

/* ===== stable layout: columns can't be pushed by text ===== */
.hero{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1024px){.hero{grid-template-columns:minmax(0,1fr)}}

/* ===== rotating headline: all phrases share one grid cell ===== */
.rot{display:grid;justify-items:start}
.rot .ph{grid-area:1/1;opacity:0;transform:translateY(35%);filter:blur(8px);transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1),filter .6s;pointer-events:none}
.rot .ph.on{opacity:1;transform:none;filter:none;transition-delay:.3s;pointer-events:auto}
.rot .ph.leave{opacity:0;transform:translateY(-35%);filter:blur(8px);transition-duration:.45s;transition-delay:0s}
.rot mark,.h1-main .rot mark{display:inline;white-space:normal;background:linear-gradient(var(--red),var(--red)) no-repeat;background-position:100% 100%;background-size:0% .1em;padding-bottom:.16em;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .8s cubic-bezier(.2,.8,.2,1) .55s;animation:none}
html[dir="ltr"] .rot mark{background-position:0 100%}
.rot.ready .ph.on mark{background-size:100% .1em}
.rot mark::after,.h1-main .rot mark::after{content:none;display:none}

/* ===== reports chart ===== */
.rep-chart{display:block;height:auto;padding:14px 12px 10px;align-items:initial;gap:0}
.rep-plot{position:relative;height:150px}
.rep-grid{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
.rep-grid i{display:block;height:1px;background:var(--line)}
.rep-grid i:last-child{background:#C9D2DE}
.rep-bars{position:absolute;inset:0;display:flex;align-items:flex-end}
.rep-col{flex:1;height:100%;display:flex;justify-content:center;align-items:flex-end;padding-inline:5px}
.rep-col .pair{display:flex;align-items:flex-end;gap:3px;width:100%;max-width:44px;height:100%}
.rep-col .pair span{flex:1;height:0;border-radius:5px 5px 0 0;transition:height .9s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i)*90ms)}
.rep-col .pair .b{background:var(--blue)}
.rep-col .pair .r{background:#F2B8BA}
.rep-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.rep-line path{fill:none;stroke:var(--red);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s cubic-bezier(.4,0,.2,1) .7s}
.rep-chart.drawn .rep-line path{stroke-dashoffset:0}
.rep-dot{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--paper);border:2.5px solid var(--red);transform:scale(0);transition:transform .45s cubic-bezier(.3,1.6,.5,1);transition-delay:calc(.9s + var(--i)*.18s)}
.rep-chart.drawn .rep-dot{transform:scale(1)}
.rep-labels{display:flex;padding-top:6px}
.rep-labels small{flex:1;text-align:center;font-size:11.5px;color:var(--muted);white-space:nowrap}
.rep-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--muted);padding-top:6px}
.rep-legend span{display:flex;align-items:center;gap:6px}
.rep-legend i{width:10px;height:10px;border-radius:3px}
.lg-n{background:var(--red);height:3px!important;border-radius:2px!important;width:14px!important}
@media (prefers-reduced-motion:reduce){.rep-line path{stroke-dashoffset:0}.rep-dot{transform:scale(1)}}
html[lang="en"] .h1-main{font-size:clamp(32px,4.1vw,54px);line-height:1.25}
html[lang="en"] .rot mark{padding-bottom:.1em}

/* ===== calmer, smaller, consistent hero headline ===== */
.hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;padding-top:64px}
.h1-pre{font-size:clamp(18px,1.7vw,24px);margin-bottom:6px}
.h1-main,html[lang="en"] .h1-main{font-size:clamp(30px,3.5vw,48px);line-height:1.45}
.rot .ph{white-space:nowrap}
.rot mark,.h1-main .rot mark{white-space:nowrap}
.lead{font-size:17px}
@media (max-width:640px){
  .h1-main,html[lang="en"] .h1-main{font-size:clamp(26px,7.4vw,32px)}
  .rot .ph,.rot mark,.h1-main .rot mark{white-space:normal}
}

/* ===== text shimmer on the key word ===== */
.shine{background:linear-gradient(100deg,var(--navy) 0%,var(--navy) 40%,#7FA6D6 50%,var(--navy) 60%,var(--navy) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 4.5s 1.6s ease-in-out infinite;background-position:100% 0}
@keyframes shine{0%{background-position:100% 0}45%,100%{background-position:-50% 0}}
html[dir="rtl"] .shine{animation-name:shineR}
@keyframes shineR{0%{background-position:-50% 0}45%,100%{background-position:100% 0}}

/* ===== soft mouse glow in hero ===== */
.glow{position:absolute;left:var(--gx,50%);top:var(--gy,50%);width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;background:radial-gradient(circle,rgba(11,79,156,.13),transparent 65%);pointer-events:none;z-index:0;opacity:0;transition:opacity .5s}
.hero.glowing .glow{opacity:1}

/* ===== pulsing booking button ===== */
.btn.pulse{box-shadow:0 0 0 0 rgba(11,79,156,.45);animation:btnPulse 2.4s 2.2s infinite}
@keyframes btnPulse{0%{box-shadow:0 0 0 0 rgba(11,79,156,.45)}70%{box-shadow:0 0 0 14px rgba(11,79,156,0)}100%{box-shadow:0 0 0 0 rgba(11,79,156,0)}}
.btn.pulse:hover{animation:none}

/* ===== animated SVG icons (stroke draw) ===== */
svg.draw *{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.1s cubic-bezier(.4,0,.2,1) .35s}
.pre svg.draw *{stroke-dashoffset:1}
.svc:hover svg.draw *,.why-i:hover svg.draw *,.sector:hover svg.draw *{animation:iconDraw 1s cubic-bezier(.4,0,.2,1)}
@keyframes iconDraw{0%{stroke-dashoffset:1}100%{stroke-dashoffset:0}}

@media (prefers-reduced-motion:reduce){
  .shine{animation:none;background:none;color:inherit}
  .btn.pulse{animation:none}
  .glow{display:none}
  svg.draw *{stroke-dashoffset:0!important}
}
@media (max-width:1024px){.hero{grid-template-columns:minmax(0,1fr);gap:84px;padding-top:48px}}

/* =========================================================
   BENTO LIVE SCENES
   ========================================================= */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.bcard{background:var(--paper);border:1px solid var(--line);border-radius:24px;padding:20px;display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden;min-width:0}
.bcard::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(11,79,156,.10),transparent 65%);opacity:0;transition:opacity .35s;pointer-events:none}
.bcard:hover::before{opacity:1}
.bcard>*{position:relative}
.bc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding-inline:4px}
.bc-head h3{font-size:19px;color:var(--navy);line-height:1.5}
.bc-head p{font-size:14px;color:var(--muted);line-height:1.6}
.scene{flex:1;min-height:250px;background:var(--ground);border-radius:16px;position:relative;overflow:hidden;font-size:13.5px;padding:16px;display:flex;flex-direction:column}
.b-tax{grid-column:span 2;grid-row:span 2}
.b-ledger{grid-column:span 2}
.b-be,.b-alerts{grid-column:span 1}
.b-audit,.b-setup{grid-column:span 2}
.b-tax .scene{min-height:420px}

/* --- shared mini-window --- */
.mw{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 30px rgba(10,39,71,.08);flex:1;display:flex;flex-direction:column;overflow:hidden}
.mw-bar{display:flex;align-items:center;gap:10px;padding:9px 14px;background:#EEF2F7;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.mw-bar b{font-weight:600}
.mw-body{padding:14px;display:flex;flex-direction:column;gap:10px;flex:1;position:relative}

/* --- tax return scene --- */
.f-row{display:flex;flex-direction:column;gap:4px}
.f-row label{font-size:12px;color:var(--muted)}
.f-in{height:38px;border:1px solid var(--line);border-radius:10px;padding:0 12px;display:flex;align-items:center;font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums;transition:border-color .25s,box-shadow .25s;background:var(--paper);white-space:nowrap;overflow:hidden}
.f-in.focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(11,79,156,.15)}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.f-row.hl .f-in{background:var(--navy);color:#fff;border-color:var(--navy)}
.typing::after{content:"";width:2px;height:16px;background:var(--blue);margin-inline-start:2px;animation:caret .8s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.f-btn{position:relative;margin-top:auto;height:44px;border:0;border-radius:12px;background:var(--blue);color:#fff;font-weight:700;overflow:hidden;transition:transform .15s}
.f-btn.press{transform:scale(.96)}
.f-prog{position:absolute;inset-block:0;inset-inline-start:0;width:0;background:rgba(255,255,255,.25)}
.f-btn.loading .f-prog{width:100%;transition:width 1.5s cubic-bezier(.4,0,.2,1)}
.f-done{position:absolute;inset:0;background:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;opacity:0;pointer-events:none;transition:opacity .4s}
.f-done svg{width:72px;height:72px;fill:none;stroke:var(--ok);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.f-done svg *{stroke-dasharray:1;stroke-dashoffset:1}
.f-done b{display:block;font-family:var(--display);font-size:17px;color:var(--navy)}
.f-done small{color:var(--muted);font-variant-numeric:tabular-nums}
.mw.done .f-done{opacity:1}
.mw.done .f-done circle{stroke-dashoffset:0;transition:stroke-dashoffset .7s .2s}
.mw.done .f-done path{stroke-dashoffset:0;transition:stroke-dashoffset .45s .8s}
.cursor{position:absolute;left:0;top:0;width:22px;height:22px;z-index:5;fill:var(--navy);stroke:#fff;stroke-width:1.5;filter:drop-shadow(0 3px 4px rgba(0,0,0,.25));transform:translate(60%,80%);transition:transform .8s cubic-bezier(.5,0,.2,1);pointer-events:none}
.mw.done .cursor{opacity:0}

/* --- ledger scene --- */
.ledger{background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;flex:1}
.ld-h,.ld-r,.ld-f{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:8px;padding:9px 14px;align-items:center}
.ld-h{background:#EEF2F7;font-size:12px;color:var(--muted);font-weight:600}
.ld-r{border-top:1px solid var(--line);opacity:0;transform:translateY(-8px);transition:opacity .4s,transform .4s,background 1s}
.ld-r.in{opacity:1;transform:none;background:var(--blue-soft)}
.ld-r.in.old{background:transparent}
.ld-r span:not(:first-child),.ld-f span:not(:first-child),.ld-h span:not(:first-child){text-align:end;font-variant-numeric:tabular-nums}
.ld-f{border-top:2px solid var(--navy);font-weight:700;color:var(--navy);margin-top:auto}
.ld-ok{align-self:center;margin:10px 0 12px;padding:5px 14px;border-radius:99px;background:var(--ok-soft);color:var(--ok);font-weight:700;font-size:13px;opacity:0;transform:scale(.6);transition:opacity .3s,transform .45s cubic-bezier(.3,1.6,.5,1)}
.ledger.ok .ld-ok{opacity:1;transform:none}

/* --- break-even scene --- */
.be{position:relative;flex:1;display:flex;flex-direction:column;direction:ltr}
.be-svg{width:100%;flex:1;min-height:150px;overflow:visible}
.be-zero{stroke:#B7C2D0;stroke-width:1.2;stroke-dasharray:4 4}
.be-z{font-size:10px;fill:var(--muted)}
.be-line{fill:none;stroke:var(--blue);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.be.draw .be-line{stroke-dashoffset:0;transition:stroke-dashoffset 1.8s cubic-bezier(.4,0,.2,1)}
.be-area{fill:rgba(30,142,90,.14);opacity:0;transition:opacity .6s}
.be.hit .be-area{opacity:1}
.be-dot{fill:var(--paper);stroke:var(--red);stroke-width:3;transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.be.hit .be-dot{transform:scale(1)}
.be-tag{position:absolute;top:6px;transform:translateX(-50%) translateY(6px);background:var(--navy);color:#fff;font-size:12px;font-weight:600;padding:4px 10px;border-radius:8px;white-space:nowrap;opacity:0;transition:opacity .35s,transform .35s}
.be.hit .be-tag{opacity:1;transform:translateX(-50%)}
.be-ax{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);padding-top:4px}
html[dir="rtl"] .be-ax{direction:rtl}

/* --- alerts scene --- */
.nt-stack{display:flex;flex-direction:column;flex:1}
.nt{display:flex;align-items:center;gap:10px;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:0 12px;max-height:0;opacity:0;margin-bottom:0;overflow:hidden;transform:translateY(-10px) scale(.96);transition:max-height .5s cubic-bezier(.2,.8,.2,1),padding .5s,margin .5s,opacity .45s,transform .5s cubic-bezier(.2,.8,.2,1);box-shadow:0 8px 18px rgba(10,39,71,.06)}
.nt.in{max-height:80px;padding:10px 12px;margin-bottom:8px;opacity:1;transform:none}
.nt div{flex:1;min-width:0;line-height:1.45}
.nt b{display:block;font-size:13px;color:var(--ink)}
.nt small{font-size:12px;color:var(--muted)}
.nt em{font-style:normal;font-size:11px;color:var(--muted);align-self:flex-start}
.nt-ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex-shrink:0}
.nt-ic svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nt.warn .nt-ic{background:var(--warn-soft);color:var(--warn)}
.nt.info .nt-ic{background:var(--blue-soft);color:var(--blue)}
.nt.ok .nt-ic{background:var(--ok-soft);color:var(--ok)}
.nt.warn .nt-ic svg{animation:ring2 1s 2 ease-in-out}
@keyframes ring2{20%{transform:rotate(14deg)}40%{transform:rotate(-12deg)}60%{transform:rotate(8deg)}80%{transform:rotate(-4deg)}}

/* --- audit scene --- */
.au{flex:1;display:flex;flex-direction:column;gap:10px}
.au-doc{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:6px 0;overflow:hidden}
.au-r{display:flex;align-items:center;gap:10px;padding:8px 14px;transition:background .4s}
.au-r span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.au-r b{font-variant-numeric:tabular-nums;color:var(--navy)}
.au-tag{font-style:normal;font-size:11px;font-weight:700;padding:2px 9px;border-radius:99px;opacity:0;transform:scale(.6);transition:opacity .3s,transform .4s cubic-bezier(.3,1.6,.5,1);white-space:nowrap}
.au-r.flag{background:var(--red-soft)}
.au-r.flag .au-tag{opacity:1;transform:none;background:var(--red);color:#fff}
.au-r.fixed{background:#F2FAF5}
.au-r.fixed .au-tag{opacity:1;transform:none;background:var(--ok-soft);color:var(--ok)}
.au-r.chk b::after{content:" ✓";color:var(--ok);font-size:12px}
.au-scan{position:absolute;inset-inline:0;top:0;height:38px;background:linear-gradient(180deg,transparent,rgba(11,79,156,.12) 45%,rgba(11,79,156,.12) 55%,transparent);border-bottom:2px solid rgba(11,79,156,.5);transform:translateY(-40px);transition:transform .5s cubic-bezier(.4,0,.2,1),opacity .4s;pointer-events:none}
.au-foot{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:600;color:var(--muted)}
.au-foot .au-n{font-variant-numeric:tabular-nums}
.au-st.warn{color:var(--red)}
.au-st.ok{color:var(--ok)}

/* --- company setup scene --- */
.tl{position:relative;flex:1;display:flex;flex-direction:column;gap:10px;padding-inline-start:4px}
.tl-line{position:absolute;inset-inline-start:19px;top:16px;bottom:56px;width:2px;background:var(--line)}
.tl-line i{display:block;width:100%;height:0;background:var(--ok);transition:height .6s cubic-bezier(.4,0,.2,1)}
.tl-s{position:relative;display:flex;align-items:center;gap:12px}
.tl-n{width:32px;height:32px;border-radius:50%;background:var(--paper);border:2px solid var(--line);display:grid;place-items:center;font-weight:700;font-size:13px;color:var(--muted);flex-shrink:0;transition:background .3s,border-color .3s,color .3s,transform .4s cubic-bezier(.3,1.6,.5,1)}
.tl-t{flex:1;font-weight:500;color:var(--muted);transition:color .3s}
.tl-s em{font-style:normal;font-size:11.5px;font-weight:700;color:var(--ok);background:var(--ok-soft);padding:2px 10px;border-radius:99px;opacity:0;transform:scale(.6);transition:opacity .3s,transform .4s cubic-bezier(.3,1.6,.5,1)}
.tl-s.act .tl-n{border-color:var(--blue);color:var(--blue);transform:scale(1.12);box-shadow:0 0 0 6px rgba(11,79,156,.12)}
.tl-s.act .tl-t{color:var(--ink)}
.tl-s.done .tl-n{background:var(--ok);border-color:var(--ok);color:#fff;transform:none;box-shadow:none}
.tl-s.done .tl-t{color:var(--ink)}
.tl-s.done em{opacity:1;transform:none}
.tl-end{margin-top:auto;align-self:center;background:var(--navy);color:#fff;font-weight:700;padding:8px 18px;border-radius:12px;opacity:0;transform:translateY(10px);transition:opacity .4s,transform .5s cubic-bezier(.3,1.6,.5,1)}
.tl.fin .tl-end{opacity:1;transform:none}

@media (max-width:1024px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .b-tax,.b-ledger,.b-audit,.b-setup{grid-column:span 2}
  .b-tax{grid-row:auto}
}
@media (max-width:640px){
  .bento{grid-template-columns:minmax(0,1fr);gap:14px}
  .b-tax,.b-ledger,.b-audit,.b-setup,.b-be,.b-alerts{grid-column:auto}
  .bcard{padding:16px;border-radius:20px}
  .scene{padding:12px;font-size:13px}
  .b-tax .scene{min-height:400px}
  .ld-h,.ld-r,.ld-f{padding:8px 10px;grid-template-columns:1.4fr 1fr 1fr}
}

/* tax scene: stepper + attachments */
.stp{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:2px}
.stp span{display:flex;align-items:center;gap:6px;transition:color .3s}
.stp span::before{content:"";width:10px;height:10px;border-radius:50%;border:2px solid var(--line);transition:background .3s,border-color .3s}
.stp span.on{color:var(--blue)}
.stp span.on::before{background:var(--blue);border-color:var(--blue)}
.stp i{flex:1;height:2px;background:var(--line);border-radius:2px}
.att{display:flex;flex-wrap:wrap;gap:8px}
.att-f{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:6px 10px;border-radius:10px;background:var(--blue-soft);color:var(--blue);opacity:0;transform:translateY(8px) scale(.95);transition:opacity .35s,transform .45s cubic-bezier(.3,1.6,.5,1)}
.att-f::before{content:"";width:12px;height:14px;border-radius:2px;background:var(--blue);opacity:.85}
.att-f::after{content:"✓";color:var(--ok)}
.att-f.in{opacity:1;transform:none}

.hist{margin-top:auto;border:1px dashed var(--line);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;font-size:12.5px}
.hist b{font-size:12px;color:var(--muted);font-weight:600}
.hist div{display:flex;justify-content:space-between;align-items:center;gap:8px}
.hist em{font-style:normal;font-size:11.5px;font-weight:600;color:var(--ok);background:var(--ok-soft);padding:2px 9px;border-radius:99px;white-space:nowrap}
.hist em::before{content:"✓ "}
.hist+.f-btn{margin-top:0}
@media (max-width:640px){.hist{display:none}}

/* =========================================================
   HERO DASHBOARD v2 — the visitor's own dashboard
   ========================================================= */
.dash-top{gap:10px}
.dash-title{font-weight:600;color:var(--ink);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-note{font-size:11px;color:var(--muted);background:var(--paper);border:1px solid var(--line);padding:1px 8px;border-radius:99px;white-space:nowrap}
.dash-hello{display:flex;align-items:center;gap:12px;padding:16px 18px 4px}
.dash-hello b{display:block;font-family:var(--display);font-size:15px;color:var(--navy);line-height:1.5}
.dash-hello small{font-size:12px;color:var(--muted)}
.av{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--blue),var(--navy));display:grid;place-items:center;flex-shrink:0;box-shadow:0 8px 16px rgba(11,79,156,.25)}
.av svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.av.pop{animation:avPop .55s cubic-bezier(.3,1.6,.5,1)}
@keyframes avPop{0%{transform:scale(.6) rotate(-12deg)}100%{transform:none}}
.sect{display:flex;align-items:center;gap:10px;padding:12px 18px 2px}
.sect-lbl{font-size:12px;color:var(--muted);white-space:nowrap}
.sect-tabs{position:relative;display:flex;gap:2px;background:var(--ground);border:1px solid var(--line);border-radius:11px;padding:3px;flex:1;min-width:0}
.sect-tabs button{position:relative;z-index:1;flex:1;border:0;background:none;border-radius:8px;padding:6px 4px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap;transition:color .3s}
.sect-tabs button.on{color:#fff}
.sect-tabs button:not(.on):hover{color:var(--ink)}
.sect-ind{position:absolute;top:3px;bottom:3px;left:0;border-radius:8px;background:var(--navy);box-shadow:0 6px 14px rgba(10,39,71,.25);transition:transform .5s cubic-bezier(.2,.8,.2,1),width .5s cubic-bezier(.2,.8,.2,1)}
.kpis{padding:14px 18px 4px}
.kpi{position:relative;overflow:hidden}
.kpi .spark{position:absolute;bottom:6px;inset-inline-end:8px;width:60px;height:22px;overflow:visible}
.kpi .spark path{fill:none;stroke:var(--blue);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:.75}
.kpi .spark.on path{stroke-dashoffset:0;transition:stroke-dashoffset 1.1s cubic-bezier(.4,0,.2,1) .2s}
.kpi:nth-child(2) .spark path{stroke:var(--ok)}
.kpi:nth-child(3) .spark path{stroke:var(--red)}
.dchart{padding:10px 18px 4px}
.dchart-plot{position:relative;height:150px}
#dSvg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.dgrid line{stroke:var(--line);stroke-width:1;stroke-dasharray:3 4}
.d-rev{fill:none;stroke:var(--blue);stroke-width:2.6;stroke-linecap:round}
.d-exp{fill:none;stroke:#E58E92;stroke-width:2;stroke-dasharray:5 5;stroke-linecap:round}
.d-guide{stroke:var(--blue);stroke-width:1;stroke-dasharray:3 3;opacity:.35;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.d-dot{fill:var(--paper);stroke:var(--blue);stroke-width:3;transition:cx .5s cubic-bezier(.2,.8,.2,1),cy .5s cubic-bezier(.2,.8,.2,1)}
.d-tip{position:absolute;transform:translate(-50%,calc(-100% - 14px));background:var(--navy);color:#fff;border-radius:9px;padding:4px 10px;display:flex;flex-direction:column;align-items:center;line-height:1.3;pointer-events:none;white-space:nowrap;box-shadow:0 8px 18px rgba(10,39,71,.25);transition:left .5s cubic-bezier(.2,.8,.2,1),top .5s cubic-bezier(.2,.8,.2,1)}
.d-tip::after{content:"";position:absolute;bottom:-5px;left:50%;margin-left:-5px;border:5px solid transparent;border-bottom:0;border-top-color:var(--navy)}
.d-tip small{font-size:10.5px;color:var(--on-navy)}
.d-tip b{font-size:13px;font-variant-numeric:tabular-nums}
.d-tip.bump{animation:tipBump .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes tipBump{0%{scale:.85}100%{scale:1}}
.d-months{display:flex;justify-content:space-between;padding:6px 4px 0;font-size:11px;color:var(--muted)}
.lg-x{background:#E58E92}
.dchart .legend{padding-top:6px}
@media (max-width:640px){
  .dash-hello{padding:14px 12px 2px}
  .dash-hello b{font-size:14px}
  .sect{padding:10px 12px 0;flex-direction:column;align-items:stretch;gap:6px}
  .sect-tabs button{font-size:12px;padding:6px 2px}
  .kpis{padding:12px 12px 4px}
  .kpi .spark{display:none}
  .dchart{padding:8px 12px 2px}
  .dchart-plot{height:130px}
  .dash-note{display:none}
}

/* ===== smaller headline ===== */
.h1-pre{font-size:clamp(17px,1.5vw,21px)}
.h1-main,html[lang="en"] .h1-main{font-size:clamp(26px,2.9vw,40px);line-height:1.5}
@media (max-width:640px){
  .h1-pre{font-size:16px}
  .h1-main,html[lang="en"] .h1-main{font-size:clamp(23px,6.2vw,26px)}
}

.d-months{direction:ltr}
.kpi em,.status em,.results b,.rep-sum b{unicode-bidi:isolate}
.kpi em{direction:ltr;align-self:flex-start}

/* ===== dashboard v3: quarters, six businesses, quarterly work ===== */
.sect-tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.sect-tabs button{padding:6px 2px}
.sect-ind{top:0;left:0;bottom:auto}
.d-months{padding:6px 12px 0}
.qtasks{gap:6px;padding:10px 18px 18px}
.qtasks li{display:flex;align-items:center;gap:10px;padding:7px 12px;transition:background .4s,border-color .4s,box-shadow .4s,opacity .4s}
.q-n{font-size:11px;font-weight:700;color:var(--muted);background:var(--ground);border-radius:6px;padding:1px 7px;white-space:nowrap;transition:background .4s,color .4s}
.q-t{flex:1;min-width:0;font-size:13.5px}
.qtasks .q-s{font-style:normal;font-size:11.5px;font-weight:600;padding:2px 10px;border-radius:99px;white-space:nowrap}
.qtasks li.done{background:#F7FCF9;border-color:#CDEBD9}
.qtasks li.done .q-n,.qtasks li.done .q-s{background:var(--ok-soft);color:var(--ok)}
.qtasks li.act{border-color:rgba(11,79,156,.45);box-shadow:0 0 0 3px rgba(11,79,156,.08)}
.qtasks li.act .q-n{background:var(--blue);color:#fff}
.qtasks li.act .q-s{background:var(--blue-soft);color:var(--blue);display:inline-flex;align-items:center;gap:6px}
.qtasks li.act .q-s::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue);animation:pulse 1.2s infinite}
.qtasks li.next{opacity:.55}
.qtasks li.next .q-s{background:var(--ground);color:var(--muted)}
@media (max-width:640px){
  .sect-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .qtasks{padding:10px 12px 14px}
  .q-t{font-size:12.5px}
}

/* ===== hero background: quiet grid instead of wave lines ===== */
.waves{display:none}
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(10,39,71,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(10,39,71,.06) 1px,transparent 1px);
  background-size:56px 56px;background-position:center top;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 20%,transparent 75%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 20%,transparent 75%)}

/* ===== scenes v2: context bar, payback chips, review progress ===== */
.ctx{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ctx-av{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--blue),var(--navy));display:grid;place-items:center;flex-shrink:0}
.ctx-av svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ctx b{display:inline-block;font-size:13.5px;color:var(--navy);white-space:nowrap}
.ctx b::first-letter{text-transform:uppercase}
.ctx small{font-size:12px;color:var(--muted);margin-inline-start:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.be-top{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.be-top span{font-size:11.5px;color:var(--muted);background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:3px 8px}
.be-top b{color:var(--navy);font-variant-numeric:tabular-nums}
.au-n{color:var(--muted)}
.au-c{color:var(--navy);font-variant-numeric:tabular-nums}
.au-bar{height:6px;border-radius:99px;background:var(--paper);border:1px solid var(--line);overflow:hidden}
.au-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--ok));transition:width .7s cubic-bezier(.4,0,.2,1)}
html[dir="rtl"] .au-bar i{background:linear-gradient(270deg,var(--blue),var(--ok))}
.mw-bar b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:640px){.ctx small{display:none}}

/* =========================================================
   GLOBAL POLISH — centered content width, calmer rhythm
   ========================================================= */
.wrap{padding-inline:max(16px,calc((100% - 1200px) / 2))}
@media (max-width:1300px){.wrap{padding-inline:var(--gutter)}}
.marquee.m2{display:none}
.sec{padding:104px 0}
.sec-head{margin-bottom:56px}
.h2{font-size:clamp(25px,2.7vw,38px);line-height:1.55;letter-spacing:-.005em}
.eyebrow{display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:currentColor;opacity:.7}
.sec-head .eyebrow{justify-content:center}
.sub{max-width:560px;margin-inline:auto}

/* standards strip */
.std{background:var(--paper);border-bottom:1px solid var(--line)}
.std-in{display:flex;align-items:center;gap:28px;padding-block:22px}
.std-t{font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap;flex-shrink:0}
.std-l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));flex:1}
.std-l li{display:flex;flex-direction:column;gap:2px;padding-inline:20px;border-inline-start:1px solid var(--line);min-width:0}
.std-l b{font-family:'IBM Plex Sans',var(--display);font-size:19px;font-weight:600;letter-spacing:.04em;color:var(--navy);direction:ltr;text-align:start}
html[dir="rtl"] .std-l b{text-align:right}
.std-l span{font-size:12.5px;color:var(--muted);line-height:1.5}
@media (max-width:1024px){
  .std-in{flex-direction:column;align-items:stretch;gap:14px}
  .std-t{text-align:center}
  .std-l{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:14px}
}
@media (max-width:640px){
  .sec{padding:76px 0}
  .sec-head{margin-bottom:40px}
  .std-l li{padding-inline:12px}
  .std-l b{font-size:16px}
}

/* ===== standards strip: icons + motion ===== */
.std-l li{flex-direction:row;align-items:center;gap:14px;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.std-l li>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.std-ic{position:relative;width:46px;height:46px;border-radius:14px;background:var(--blue-soft);display:grid;place-items:center;flex-shrink:0;transition:background .45s,box-shadow .45s,transform .45s cubic-bezier(.3,1.6,.5,1)}
.std-ic svg{width:24px;height:24px;fill:none;stroke:var(--blue);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;overflow:visible;transition:stroke .45s}
.std-ic::after{content:"";position:absolute;inset:-5px;border-radius:18px;border:1.5px solid var(--blue);opacity:0;transform:scale(.85)}
.std-l li.on .std-ic,.std-l li:hover .std-ic{background:var(--navy);box-shadow:0 10px 22px rgba(10,39,71,.22);transform:translateY(-3px)}
.std-l li.on .std-ic svg,.std-l li:hover .std-ic svg{stroke:#fff}
.std-l li.on .std-ic::after{animation:stdRing 1.6s ease-out}
@keyframes stdRing{0%{opacity:.55;transform:scale(.85)}100%{opacity:0;transform:scale(1.35)}}
.std-l li.on b{color:var(--blue)}
.std-l b{transition:color .45s}
/* per-icon micro-motion while highlighted */
.i-globe .mer{transform-origin:12px 12px;transform-box:view-box}
.std-l li.on .i-globe .mer,.std-l li:hover .i-globe .mer{animation:globeTurn 1.8s ease-in-out}
@keyframes globeTurn{0%{transform:scaleX(1)}50%{transform:scaleX(-1)}100%{transform:scaleX(1)}}
.i-shield .ck{stroke-dasharray:1;stroke-dashoffset:0}
.std-l li.on .i-shield .ck,.std-l li:hover .i-shield .ck{animation:ckDraw 1s .15s cubic-bezier(.4,0,.2,1) both}
@keyframes ckDraw{0%{stroke-dashoffset:1}100%{stroke-dashoffset:0}}
.i-gov .cols path{transform-box:fill-box;transform-origin:bottom}
.std-l li.on .i-gov .cols path,.std-l li:hover .i-gov .cols path{animation:colUp .6s cubic-bezier(.3,1.6,.5,1) both}
.i-gov .cols path:nth-child(2){animation-delay:.08s!important}
.i-gov .cols path:nth-child(3){animation-delay:.16s!important}
.i-gov .cols path:nth-child(4){animation-delay:.24s!important}
@keyframes colUp{0%{transform:scaleY(0)}100%{transform:scaleY(1)}}
.i-inv .scan{fill:#7FB2EE;stroke:none;opacity:0}
.std-l li.on .i-inv .scan,.std-l li:hover .i-inv .scan{animation:invScan 1.4s ease-in-out}
@keyframes invScan{0%{opacity:0;transform:translateY(0)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateY(12px)}}
@media (max-width:640px){
  .std-l li{gap:10px}
  .std-ic{width:38px;height:38px;border-radius:11px}
  .std-ic svg{width:20px;height:20px}
}
@media (prefers-reduced-motion:reduce){
  .std-ic::after{display:none}
}

/* ===== standards in their own colours ===== */
.std-l li{--c:var(--blue);--cs:var(--blue-soft)}
.std-l b{color:var(--c)}
.std-l li.on b{color:var(--c)}
.std-ic{background:var(--cs)}
.std-ic svg{stroke:var(--c)}
.std-ic::after{border-color:var(--c)}
.std-l li.on .std-ic,.std-l li:hover .std-ic{background:var(--c);box-shadow:0 10px 22px var(--cs),0 8px 18px rgba(10,39,71,.16)}
.std-l li::after{content:"";display:block;position:absolute}
.std-l li{position:relative}
.std-l li>div{position:relative}
.std-l li>div::after{content:"";position:absolute;inset-inline-start:0;bottom:-6px;height:2px;width:0;border-radius:2px;background:var(--c);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.std-l li.on>div::after{width:36px}
.i-gov svg path:first-child{fill:var(--c2,transparent);fill-opacity:.25}
.std-l li.on .i-gov svg path:first-child,.std-l li:hover .i-gov svg path:first-child{fill:var(--c2,#fff);fill-opacity:.9}
.i-inv .scan{fill:var(--c)}
.std-l li.on .i-inv .scan,.std-l li:hover .i-inv .scan{fill:#BFF0D6}

/* ===== mobile: compact service cards (icon beside text) ===== */
@media (max-width:640px){
  .svc-grid{gap:10px}
  .svc{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;align-items:center;padding:14px 16px;border-radius:16px}
  .svc .ic{width:44px;height:44px;border-radius:12px;grid-row:span 2;align-self:start}
  .svc .ic svg{width:22px;height:22px}
  .svc h3{margin:0 0 2px;font-size:16px;line-height:1.45}
  .svc p{font-size:13.5px;line-height:1.6}
}

/* =========================================================
   MOBILE: swipe carousels + compact sections
   ========================================================= */
.cdots{display:none}
@media (max-width:640px){
  .bento,.live-grid{display:flex;align-items:flex-start;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);padding-bottom:4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .bento::-webkit-scrollbar,.live-grid::-webkit-scrollbar{display:none}
  .bento>*,.live-grid>*{flex:0 0 86%;scroll-snap-align:center;max-width:none}
  .b-tax .scene{min-height:0}
  .cdots{display:flex;justify-content:center;gap:7px;margin-top:16px}
  .cdots button{width:8px;height:8px;border-radius:99px;border:0;padding:0;background:var(--line);cursor:pointer;transition:width .35s cubic-bezier(.2,.8,.2,1),background .35s}
  .cdots button.on{width:24px;background:var(--navy)}
  .swipe-hint{display:block;text-align:center;font-size:12.5px;color:var(--muted);margin-top:-30px;margin-bottom:20px}

  /* process: number beside the text */
  .steps{gap:20px}
  .steps li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;align-items:start}
  .num{width:44px;height:44px;margin:0;grid-row:span 2}
  .steps h3{font-size:18px;margin:8px 0 2px}
  .steps p{font-size:14.5px}

  /* about: smaller logo card */
  .about-logo{max-width:240px;padding:20px 18px;border-radius:22px}
  .about-logo::before{border-radius:24px}
  .about-logo::after{border-radius:22px}
  .vm{padding:14px 16px}
  .why{margin-top:40px}
}
.swipe-hint{display:none}
@media (max-width:640px){
  .swipe-hint{display:block}
  .seg button{font-size:12.5px;padding:8px 6px;white-space:nowrap}
  .opt{min-height:0;padding:12px 8px 10px;gap:6px;font-size:13px}
  .opt .oi{width:30px;height:30px;border-radius:9px}
  .opt .oi svg{width:16px;height:16px}
  .b-group{margin-bottom:18px}
}

/* ===== service cards: tap to expand ===== */
.svc-grid{align-items:start}
.svc{cursor:pointer;-webkit-tap-highlight-color:transparent}
.svc-chev{position:absolute;top:22px;inset-inline-end:20px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--paper);border:1px solid var(--line);transition:transform .45s cubic-bezier(.2,.8,.2,1),background .3s,border-color .3s}
.svc-chev svg{width:15px;height:15px;fill:none;stroke:var(--muted);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}
.svc-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.2,.8,.2,1)}
.svc-more>div{overflow:hidden;min-height:0}
.svc-more p{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line);font-size:14.5px;line-height:1.85;color:var(--ink);opacity:0;transform:translateY(-8px);transition:opacity .4s,transform .5s cubic-bezier(.2,.8,.2,1)}
.svc-cta{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:14px;font-weight:700;color:var(--blue);opacity:0;transform:translateY(-6px);transition:opacity .4s .08s,transform .5s .08s cubic-bezier(.2,.8,.2,1),gap .25s}
.svc-cta svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
html[dir="ltr"] .svc-cta svg{transform:scaleX(-1)}
.svc-cta:hover{gap:10px}
.svc.open{--ty:-4px;border-color:var(--blue);box-shadow:0 18px 40px rgba(11,79,156,.14);background:var(--paper)}
.svc.open .svc-more{grid-template-rows:1fr}
.svc.open .svc-more p,.svc.open .svc-cta{opacity:1;transform:none}
.svc.open .svc-more p{transition-delay:.12s}
.svc.open .svc-cta{transition-delay:.2s}
.svc.open .svc-chev{transform:rotate(180deg);background:var(--navy);border-color:var(--navy)}
.svc.open .svc-chev svg{stroke:#fff}
.svc.open .ic{transform:rotate(-8deg) scale(1.1)}
.svc.open svg.draw *{animation:iconDraw 1s cubic-bezier(.4,0,.2,1)}
.svc.open::before{opacity:1}
.svc.tap{animation:svcTap .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes svcTap{0%{scale:1}30%{scale:.97}100%{scale:1}}
@media (max-width:640px){
  .svc{padding-inline-end:52px}
  .svc-chev{top:50%;margin-top:-14px;inset-inline-end:14px;width:26px;height:26px}
  .svc.open .svc-chev{top:22px;margin-top:0}
  .svc-more{grid-column:1 / -1}
  .svc-more p{font-size:14px;margin-top:12px;padding-top:12px}
}
@media (prefers-reduced-motion:reduce){.svc-more{transition:none}}
@media (max-width:640px){
  .svc{padding-inline-end:40px}
  .svc-chev{inset-inline-end:10px;width:24px;height:24px;margin-top:-12px}
  .svc-chev svg{width:13px;height:13px}
  .svc h3{font-size:15.5px}
}

/* =========================================================
   BUSINESS DEVELOPMENT MODELS
   ========================================================= */
.mdl-filter{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:36px}
.mdl-filter button{border:1px solid var(--line);background:var(--paper);border-radius:99px;padding:9px 20px;font-size:14.5px;font-weight:600;cursor:pointer;color:var(--ink);transition:background .3s,color .3s,border-color .3s,transform .3s cubic-bezier(.3,1.6,.5,1)}
.mdl-filter button:hover{border-color:var(--blue);color:var(--blue)}
.mdl-filter button.on{background:var(--navy);border-color:var(--navy);color:#fff;transform:translateY(-1px)}
.mdl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 22px}
.mdl{display:flex;flex-direction:column;gap:14px;min-width:0}
.mdl.hide{display:none}
.mdl.pop{animation:mdlPop .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes mdlPop{from{opacity:0;transform:translateY(18px) scale(.97)}}
.mdl-frame{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--paper);box-shadow:0 10px 26px rgba(10,39,71,.07);transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.mdl:hover .mdl-frame{transform:translateY(-5px);box-shadow:0 22px 44px rgba(10,39,71,.14)}
.fbar{display:flex;align-items:center;gap:5px;padding:9px 12px;background:#EEF2F7;border-bottom:1px solid var(--line)}
.fbar i{width:8px;height:8px;border-radius:50%;background:#CBD3DE}
.fbar span{margin-inline-start:auto;font-size:11px;color:var(--muted)}
.mdl-img{position:relative;aspect-ratio:16/10.5;overflow:hidden;cursor:pointer;max-width:100%}
.mdl-img img{width:100%;height:100%;object-fit:cover;transform-origin:60% 40%;animation:kb 16s ease-in-out infinite alternate;animation-play-state:paused}
.mdl.inview .mdl-img img{animation-play-state:running}
@keyframes kb{0%{transform:scale(1.04) translate(0,0)}100%{transform:scale(1.16) translate(-2%,-1.5%)}}
.mdl-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(10,39,71,.55));pointer-events:none}
.mdl-glass{position:absolute;inset-inline-start:12px;bottom:12px;z-index:1;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.7);border-radius:12px;padding:8px 12px;display:flex;flex-direction:column;box-shadow:0 10px 20px rgba(10,39,71,.18);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.mdl:hover .mdl-glass{transform:translateY(-4px)}
.mdl-glass small{font-size:11.5px;color:var(--muted)}
.kv{display:inline-flex;align-items:baseline;gap:6px;direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
html[dir="rtl"] .kv{flex-direction:row-reverse}
html[dir="rtl"] .kv .ka{transform:scaleX(-1)}
.kv s{font-size:13px;color:var(--muted);text-decoration-color:rgba(195,22,28,.6)}
.kv .ka{font-style:normal;color:var(--muted);font-size:13px}
.kv b{font-family:var(--display);font-size:20px;color:var(--ok);font-weight:700}
.mdl-dur{position:absolute;top:12px;inset-inline-end:12px;z-index:1;background:rgba(10,39,71,.78);color:#fff;font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:99px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.mdl-meta{display:flex;flex-direction:column;gap:4px;padding-inline:4px}
.mdl-meta .tag{font-size:12.5px;font-weight:700;color:var(--red)}
.mdl-meta h3{font-size:19px;color:var(--navy);line-height:1.5}
.mdl-meta p{font-size:14px;color:var(--muted);line-height:1.75}
.chips2{display:flex;flex-wrap:wrap;gap:6px;padding-inline:4px}
.chips2 span{font-size:12px;font-weight:500;padding:4px 10px;border-radius:99px;background:var(--ground);border:1px solid var(--line);color:var(--muted)}
.mdl-btns{display:flex;flex-wrap:wrap;gap:8px;padding-inline:4px;margin-top:auto}
.mdl-btns .btn{min-height:42px;padding:0 16px;font-size:14px;border-radius:11px}
.mdl-btns svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* preview dialog */
.mdl-dlg{width:min(880px,calc(100% - 32px));max-height:calc(100% - 40px);padding:0;border:0;border-radius:24px;background:var(--paper);color:var(--ink);box-shadow:0 40px 90px rgba(10,39,71,.35);overflow:auto;opacity:0;transform:translateY(24px) scale(.97);transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1)}
.mdl-dlg.in{opacity:1;transform:none}
.mdl-dlg::backdrop{background:rgba(10,24,44,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.dlg-hero{position:relative;height:250px;overflow:hidden}
.dlg-hero img{width:100%;height:100%;object-fit:cover;animation:kb 14s ease-in-out infinite alternate}
.dlg-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,39,71,.1),rgba(10,39,71,.82))}
.dlg-hero-txt{position:absolute;inset-inline:28px;bottom:22px;z-index:1;color:#fff}
.dlg-hero-txt .tag{display:inline-block;font-size:12.5px;font-weight:700;background:var(--red);padding:2px 10px;border-radius:99px;margin-bottom:8px}
.dlg-hero-txt h3{font-size:clamp(22px,2.6vw,30px);line-height:1.4}
.dlg-x{position:absolute;top:14px;inset-inline-end:14px;z-index:2;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.9);display:grid;place-items:center;cursor:pointer;transition:transform .3s}
.dlg-x:hover{transform:rotate(90deg)}
.dlg-x svg{width:18px;height:18px;fill:none;stroke:var(--navy);stroke-width:2.4;stroke-linecap:round}
.dlg-body{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;padding:26px 28px 30px}
.dlg-col{min-width:0}
.dlg-col h4{font-family:var(--display);font-size:15px;color:var(--navy);margin:0 0 10px}
.dlg-col h4:not(:first-child){margin-top:20px}
.dlg-ch{color:var(--muted);font-size:15px;line-height:1.85}
.dlg-steps{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.dlg-steps li{display:flex;align-items:center;gap:10px;background:var(--ground);border-radius:12px;padding:10px 12px;font-size:14.5px;opacity:0;transform:translateX(16px);transition:opacity .45s,transform .55s cubic-bezier(.2,.8,.2,1);transition-delay:calc(.25s + var(--i) * .12s)}
html[dir="ltr"] .dlg-steps li{transform:translateX(-16px)}
.mdl-dlg.in .dlg-steps li{opacity:1;transform:none}
.dlg-steps i{width:22px;height:22px;border-radius:50%;background:var(--ok);flex-shrink:0;display:grid;place-items:center;transform:scale(0);transition:transform .45s cubic-bezier(.3,1.6,.5,1);transition-delay:calc(.45s + var(--i) * .12s)}
.dlg-steps i::after{content:"";width:9px;height:5px;border:2.4px solid #fff;border-top:0;border-inline-end:0;transform:translateY(-1px) rotate(-45deg)}
html[dir="rtl"] .dlg-steps i::after{border-inline-end:2.4px solid #fff;border-inline-start:0}
.mdl-dlg.in .dlg-steps i{transform:none}
.dlg-kpis{display:grid;gap:10px}
.dlg-k{border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.dlg-k small{font-size:12.5px;color:var(--muted)}
.dlg-k .kv b{font-size:26px}
.dlg-dur{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:14px;color:var(--muted)}
.dlg-dur svg{width:18px;height:18px;fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round}
.dlg-dur b{color:var(--navy)}
.dlg-note{font-size:12.5px;color:var(--muted);margin:10px 0 14px}

@media (max-width:1024px){.mdl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .mdl-filter{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);scrollbar-width:none;margin-bottom:22px}
  .mdl-filter::-webkit-scrollbar{display:none}
  .mdl-filter button{flex-shrink:0;padding:8px 16px;font-size:13.5px}
  .mdl-grid{display:flex;align-items:flex-start;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);scrollbar-width:none}
  .mdl-grid::-webkit-scrollbar{display:none}
  .mdl{flex:0 0 86%;scroll-snap-align:center}
  .mdl-meta h3{font-size:17px}
  .mdl-btns .btn{flex:1;padding:0 10px;font-size:13px}
  .mdl-dlg{width:100%;max-width:100%;max-height:92%;margin:auto 0 0;border-radius:22px 22px 0 0;transform:translateY(60px)}
  .dlg-hero{height:190px}
  .dlg-hero-txt{inset-inline:18px;bottom:16px}
  .dlg-body{grid-template-columns:1fr;gap:6px;padding:18px 18px 24px}
}
@media (prefers-reduced-motion:reduce){
  .mdl-img img,.dlg-hero img{animation:none}
  .dlg-steps li,.dlg-steps i{opacity:1;transform:none;transition:none}
}
.kv s,.kv b{direction:ltr;unicode-bidi:isolate}
#models .swipe-hint{margin-top:-6px;margin-bottom:14px}
.mdl-dlg{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y}

/* =========================================================
   WEBSITE MODELS — scoped mini-site mockups (from the template kit)
   ========================================================= */
.mdl.is-web .mdl-img::after{display:none}
.ws{position:absolute;top:0;left:0;right:0;height:225%;background:var(--bg);color:var(--fg);direction:ltr;transform:translateY(0);will-change:transform}
.mdl.is-web.inview .ws{animation:wsPeek 9s cubic-bezier(.45,0,.2,1) infinite}
.mdl.is-web:hover .ws{animation-duration:6s}
@keyframes wsPeek{0%,22%{transform:translateY(0)}48%,72%{transform:translateY(-54%)}100%{transform:translateY(0)}}
.ws *{box-sizing:border-box}
.ws .ln{display:block;height:5px;border-radius:3px;background:currentColor;opacity:.25;margin-top:5px}
.ws .ln.b{height:9px;opacity:.9;margin-top:0}
.ws .pill{display:inline-block;width:30%;height:12px;border-radius:12px;background:var(--ac);margin-top:10px}
.ws-nav,.ws-foot{height:28px;display:flex;align-items:center;justify-content:space-between;padding:0 7%}
.ws-logo{width:14%;height:9px;border-radius:4px;background:var(--ac)}
.ws-links{display:flex;gap:5px}.ws-links i{width:14px;height:3px;border-radius:2px;background:currentColor;opacity:.35}
.ws-btn{width:16%;height:11px;border-radius:20px;background:var(--ac)}
.ws-hero{min-height:30%;padding:7%;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;background:var(--card) center/cover no-repeat}
.ws-hero .ln{background:#fff;opacity:.6}.ws-hero .ln.b{opacity:1}
.ws-hero .pill{box-shadow:0 4px 10px rgba(0,0,0,.25)}
.ws-sec{padding:7%;display:flex;flex-direction:column;gap:6px}
.ws-foot{margin-top:6%;border-top:1px solid rgba(127,127,127,.2);height:40px}
.ws-bars{display:flex;align-items:flex-end;gap:5px;height:62px;margin:6% 7% 0;padding:8px;border-radius:10px;background:var(--card)}
.ws-bars i{flex:1;border-radius:3px 3px 0 0;background:var(--ac);opacity:.85}
.ws-list{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:6% 7% 0}
.ws-list div{border-radius:8px;background:var(--card);overflow:hidden;padding-bottom:6px}
.ws-list div::before{content:"";display:block;height:44px;background:linear-gradient(135deg,color-mix(in srgb,var(--ac) 35%,#fff),var(--ac))}
.ws-list span{display:block;height:5px;margin:6px 6px 0;border-radius:3px;background:currentColor;opacity:.25}
.ws-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:6% 7% 0}
.ws-cards div{height:46px;border-radius:8px;background:var(--card);border:1px solid rgba(127,127,127,.18);position:relative}
.ws-cards div::before{content:"";position:absolute;top:8px;inset-inline-start:8px;width:14px;height:14px;border-radius:4px;background:var(--ac);opacity:.85}
.ws-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:6% 7% 0}
.ws-cols div{padding:8px 4px;border-top:2px solid var(--ac)}
.ws-menu{padding:6% 7% 0;display:flex;flex-direction:column;gap:8px}
.ws-menu div{display:flex;align-items:center;gap:8px;padding:8px;border-radius:8px;background:var(--card)}
.ws-menu b{width:26px;height:26px;border-radius:50%;background:var(--ac);opacity:.85;flex-shrink:0}
.ws-menu div>span{flex:1}
.ws-menu em{width:30px;height:9px;border-radius:5px;background:var(--ac)}
.ws-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:6% 7% 0}
.ws-grid div{aspect-ratio:1/1.25;border-radius:8px;background:var(--card);position:relative}
.ws-grid div::after{content:"";position:absolute;left:22%;right:22%;top:16%;bottom:30%;border-radius:40% 40% 8px 8px;background:var(--ac);opacity:.35}
.ws-gauges{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:6% 7% 0}
.ws-gauges i{aspect-ratio:1;border-radius:50%;background:conic-gradient(var(--ac) calc(var(--v) * 360deg),var(--card) 0);-webkit-mask:radial-gradient(circle,transparent 52%,#000 53%);mask:radial-gradient(circle,transparent 52%,#000 53%)}
.ws-route{position:relative;height:64px;margin:6% 7% 0;border-radius:10px;background:var(--card);display:flex;align-items:center;justify-content:space-between;padding:0 10%}
.ws-route::before{content:"";position:absolute;left:12%;right:12%;top:50%;border-top:2px dashed var(--ac);opacity:.5}
.ws-route i{position:relative;width:12px;height:12px;border-radius:50%;background:var(--ac);box-shadow:0 0 0 4px color-mix(in srgb,var(--ac) 25%,transparent)}
.ws-route b{position:absolute;top:50%;left:12%;width:18px;height:10px;margin-top:-5px;border-radius:3px;background:var(--fg);animation:wsTruck 4s ease-in-out infinite alternate}
@keyframes wsTruck{to{left:calc(88% - 18px)}}
.ws-courses{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:6% 7% 0}
.ws-courses i{height:60px;border-radius:8px;background:linear-gradient(160deg,color-mix(in srgb,var(--ac) 30%,#fff),var(--ac))}
/* dialog: live site preview header */
.dlg-hero.is-web{height:320px;background:linear-gradient(135deg,#0A2747,#163a66);display:flex;align-items:flex-end;justify-content:center;padding:26px 26px 0}
.dlg-hero.is-web::after{display:none}
.dlg-site{position:relative;width:min(560px,100%);height:100%;border-radius:14px 14px 0 0;overflow:hidden;background:#fff;box-shadow:0 -10px 40px rgba(0,0,0,.35)}
.dlg-site .fbar{position:relative;z-index:2}
.dlg-site-in{position:absolute;inset:34px 0 0;overflow:hidden}
.dlg-site-in .ws{height:190%;animation:wsTour 12s cubic-bezier(.45,0,.2,1) infinite}
@keyframes wsTour{0%,15%{transform:translateY(0)}45%,60%{transform:translateY(-47%)}90%,100%{transform:translateY(0)}}
.dlg-hero.is-web .dlg-hero-txt{display:none}
.dlg-hero.is-web+.dlg-body::before{content:none}
.mdl-more-wrap{display:flex;justify-content:center;margin-top:34px}
.mdl-more-wrap[hidden]{display:none}
@media (max-width:640px){
  .mdl-more-wrap{display:none}
  .dlg-hero.is-web{height:240px;padding:16px 16px 0}
}
@media (prefers-reduced-motion:reduce){.ws,.dlg-site-in .ws,.ws-route b{animation:none!important}}

.dlg-title{grid-column:1 / -1;display:flex;flex-direction:column;gap:6px}
.dlg-title .tag{align-self:flex-start;font-size:12.5px;font-weight:700;color:#fff;background:var(--red);padding:2px 10px;border-radius:99px}
.dlg-title h3{font-size:clamp(21px,2.4vw,28px);color:var(--navy);line-height:1.4}
.mdl.is-web.inview .ws{animation:wsPeek2 11s cubic-bezier(.45,0,.2,1) infinite}
@keyframes wsPeek2{0%,40%{transform:translateY(0)}55%,75%{transform:translateY(-54%)}90%,100%{transform:translateY(0)}}

/* =========================================================
   REALISTIC WEBSITE PREVIEW (dialog)
   ========================================================= */
.mdl-dlg.is-web{width:min(1060px,calc(100% - 32px))}
.rs-wrap{position:relative;background:linear-gradient(135deg,#0A2747,#163a66);padding:18px 18px 0}
.rs-bar{display:flex;align-items:center;gap:12px;background:#EEF2F7;border-radius:14px 14px 0 0;padding:9px 12px;border-bottom:1px solid var(--line)}
.rs-bar .dots{display:flex;gap:6px}
.rs-bar .dots i{width:10px;height:10px;border-radius:50%;background:#CBD3DE}
.rs-bar .dots i:nth-child(1){background:#FF6159}.rs-bar .dots i:nth-child(2){background:#FFBD2E}.rs-bar .dots i:nth-child(3){background:#28C941}
.rs-url{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:9px;padding:5px 12px;font:500 13px 'IBM Plex Sans',sans-serif;color:var(--muted);direction:ltr;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs-url svg{width:13px;height:13px;fill:none;stroke:var(--ok);stroke-width:2.2;flex-shrink:0}
.rs-dev{display:flex;gap:2px;background:#fff;border:1px solid var(--line);border-radius:9px;padding:2px}
.rs-dev button{width:32px;height:28px;border:0;border-radius:7px;background:none;display:grid;place-items:center;cursor:pointer;color:var(--muted)}
.rs-dev button.on{background:var(--navy);color:#fff}
.rs-dev svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.rs-x{position:static!important;width:34px!important;height:34px!important;background:#fff!important;border:1px solid var(--line)!important;flex-shrink:0}
.rs-view{height:min(470px,58vh);overflow-y:auto;overscroll-behavior:contain;background:#d9dee6;scrollbar-width:thin;transition:background .3s}
.rs-view.mob{background:#d9dee6;padding:16px 0}
.rs-view.mob .rs{width:375px;max-width:100%;margin:0 auto;border-radius:22px;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.25)}
.rs-hint{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);background:rgba(10,24,44,.82);color:#fff;font-size:12.5px;font-weight:600;padding:6px 14px;border-radius:99px;pointer-events:none;transition:opacity .4s;white-space:nowrap}
.rs-view.user+.rs-hint{opacity:0}
/* the mini site itself */
.rs{background:var(--rb);color:var(--rf);font-family:var(--body);line-height:1.6}
.rs-nav{display:flex;align-items:center;gap:18px;padding:14px 28px;border-bottom:1px solid color-mix(in srgb,var(--rf) 10%,transparent)}
.rs-brand{display:flex;align-items:center;gap:8px;font:700 16px var(--display);white-space:nowrap}
.rs-brand i{width:30px;height:30px;border-radius:9px;background:var(--ra2);display:grid;place-items:center}
.rs-brand.small i{width:24px;height:24px;border-radius:7px}
.rs-brand svg,.rs-float svg,.rs-ci svg{width:60%;height:60%;fill:none;stroke:var(--ron);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rs-nav nav{display:flex;gap:16px;flex:1;justify-content:center;font-size:13.5px;opacity:.8}
.rs-btn{display:inline-flex;align-items:center;justify-content:center;background:var(--ra2);color:var(--ron);font-weight:700;font-size:13px;padding:8px 16px;border-radius:10px;white-space:nowrap}
.rs-btn.big{font-size:14.5px;padding:11px 22px}
.rs-btn.ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.7)}
.rs-hero{position:relative;min-height:330px;padding:48px 28px 40px;background-size:cover;background-position:center;color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:10px}
.rs-k{font-size:12.5px;font-weight:700;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);padding:3px 12px;border-radius:99px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.rs-hero h4{font:800 clamp(24px,3.2vw,36px)/1.3 var(--display);max-width:560px;margin:0}
.rs-hero p{font-size:15.5px;max-width:480px;opacity:.92;margin:0}
.rs-ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.rs-float{position:absolute;bottom:22px;inset-inline-end:24px;display:flex;align-items:center;gap:10px;background:#fff;color:#14181f;border-radius:14px;padding:10px 14px;box-shadow:0 14px 30px rgba(0,0,0,.3);animation:bob 5s ease-in-out infinite}
.rs-float i{width:34px;height:34px;border-radius:10px;background:var(--ra2);display:grid;place-items:center;flex-shrink:0}
.rs-float b{display:block;font-size:13px}
.rs-float small{font-size:12px;color:#5b6472}
.rs-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:24px 28px;margin-top:-1px;background:var(--rc);border-bottom:1px solid color-mix(in srgb,var(--rf) 8%,transparent)}
.rs-stats div{text-align:center;display:flex;flex-direction:column}
.rs-stats b{font:800 26px var(--display);color:var(--ra2);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.rs-stats small{font-size:13px;opacity:.75}
.rs-sec{padding:30px 28px}
.rs-sec h5{font:700 20px var(--display);margin:0 0 16px}
.rs-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rs-card{background:var(--rc);border:1px solid color-mix(in srgb,var(--rf) 10%,transparent);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:6px}
.rs-ci{width:38px;height:38px;border-radius:11px;background:var(--ra2);display:grid;place-items:center;margin-bottom:4px}
.rs-card b{font-size:15px}
.rs-card small{font-size:13px;opacity:.75;line-height:1.6}
.rs-card em{font-style:normal;font-size:12.5px;font-weight:700;color:var(--ra2);margin-top:4px}
.rs-cta{margin:0 28px 28px;padding:22px 24px;border-radius:16px;background:var(--ra2);color:var(--ron);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.rs-cta b{font:700 18px var(--display)}
.rs-cta .rs-btn{background:var(--ron);color:var(--ra2)}
.rs-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 28px;font-size:12.5px;opacity:.85;border-top:1px solid color-mix(in srgb,var(--rf) 10%,transparent);flex-wrap:wrap}
.rs-foot span:nth-child(2){direction:ltr}
/* narrow viewport (mobile toggle or a phone) */
.rs-view.mob .rs-nav nav,.rs-view.mob .rs-nav .rs-btn{display:none}
.rs-view.mob .rs-nav{justify-content:space-between}
.rs-view.mob .rs-nav::after{content:"";width:22px;height:14px;border-top:2px solid currentColor;border-bottom:2px solid currentColor;background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat;opacity:.8}
.rs-view.mob .rs-hero{min-height:420px;padding:36px 20px 96px}
.rs-view.mob .rs-hero h4{font-size:26px}
.rs-view.mob .rs-float{inset-inline-end:auto;inset-inline-start:20px;bottom:20px}
.rs-view.mob .rs-stats{padding:20px 14px}
.rs-view.mob .rs-stats b{font-size:21px}
.rs-view.mob .rs-sec{padding:24px 20px}
.rs-view.mob .rs-cards{grid-template-columns:1fr}
.rs-view.mob .rs-cta{margin:0 20px 24px}
@media (max-width:640px){
  .rs-wrap{padding:10px 10px 0}
  .rs-bar{gap:8px;padding:8px}
  .rs-bar .dots{display:none}
  .rs-dev{display:none}
  .rs-view{height:56vh}
  .rs-nav{padding:12px 16px}
  .rs-nav nav,.rs-nav .rs-btn{display:none}
  .rs-nav{justify-content:space-between}
  .rs-hero{min-height:360px;padding:30px 18px 90px}
  .rs-hero h4{font-size:24px}
  .rs-hero p{font-size:14px}
  .rs-float{inset-inline-end:auto;inset-inline-start:18px;bottom:18px}
  .rs-stats{padding:18px 10px}
  .rs-stats b{font-size:20px}
  .rs-stats small{font-size:11.5px}
  .rs-sec{padding:22px 18px}
  .rs-cards{grid-template-columns:1fr}
  .rs-cta{margin:0 18px 22px}
  .rs-foot{padding:14px 18px}
}
@media (prefers-reduced-motion:reduce){.rs-float{animation:none}}

/* ===== website preview on phones ===== */
.rs-hint{animation:hintOut .5s 3.2s forwards}
@keyframes hintOut{to{opacity:0;transform:translateX(-50%) translateY(6px)}}
@media (max-width:640px){
  .mdl-dlg,.mdl-dlg.is-web{width:100%;max-width:100%;margin:auto 0 0;left:0;right:0;border-radius:22px 22px 0 0;max-height:94%}
  .mdl-dlg.is-web .rs-wrap{padding:22px 10px 0;border-radius:22px 22px 0 0}
  .mdl-dlg.is-web .rs-wrap::before{content:"";position:absolute;top:8px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:4px;background:rgba(255,255,255,.45)}
  .rs-view{height:52vh}
  .rs-hint{bottom:10px;font-size:12px;padding:5px 12px}
  .rs-url{font-size:12.5px}
  .rs-float{padding:8px 12px}
  .rs-float b{font-size:12.5px}
  .rs-float small{font-size:11.5px}
  .mdl-dlg.is-web .dlg-body{padding:18px 16px 26px}
}

/* ===== website model cards: the real site, scaled down and scrolling ===== */
.ws2{position:absolute;inset:0;overflow:hidden;background:#d9dee6;pointer-events:none}
.ws2-in{position:absolute;top:0;inset-inline-start:0;width:var(--w,900px);transform:scale(var(--s,.4));transform-origin:top left;will-change:transform}
html[dir="rtl"] .ws2-in{transform-origin:top right}
.mdl.is-web.inview .ws2-in{animation:ws2Tour 12s cubic-bezier(.45,0,.2,1) infinite}
.mdl.is-web:hover .ws2-in{animation-duration:8s}
@keyframes ws2Tour{
  0%,28%{transform:scale(var(--s)) translateY(0)}
  58%,74%{transform:scale(var(--s)) translateY(var(--ty,0px))}
  96%,100%{transform:scale(var(--s)) translateY(0)}
}
.ws2 .rs{min-height:100%}
.ws2 .rs-hero{background-size:cover;background-position:center}
.mdl.is-web .mdl-glass{z-index:2}
.mdl.is-web .mdl-dur{z-index:2}
@media (prefers-reduced-motion:reduce){.mdl.is-web .ws2-in{animation:none}}
.mdl.is-web .mdl-dur{top:auto;bottom:12px;inset-inline-end:12px}
@media (max-width:640px){
  .mdl.is-web .mdl-glass{padding:6px 10px;border-radius:10px;inset-inline-start:10px;bottom:10px}
  .mdl.is-web .mdl-glass small{font-size:10.5px}
  .mdl.is-web .kv b{font-size:16px}
  .mdl.is-web .kv s,.mdl.is-web .kv .ka{font-size:11px}
  .mdl.is-web .mdl-dur{font-size:10.5px;padding:2px 8px;bottom:10px;inset-inline-end:10px}
}

/* website cards are animated from JS (Web Animations API); keep the static scale here */
.mdl.is-web.inview .ws2-in,.mdl.is-web:hover .ws2-in{animation:none}

/* =========================================================
   MOTION INSIDE THE MINI WEBSITES (cards + preview)
   ========================================================= */
.rs-hero{overflow:hidden;isolation:isolate}
.rs-bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;transform-origin:65% 40%;animation:rsKB 18s ease-in-out infinite alternate}
@keyframes rsKB{0%{transform:scale(1.04)}100%{transform:scale(1.2) translate(-2%,-2%)}}
.rs-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(270deg,rgba(0,0,0,.74),rgba(0,0,0,.16))}
html[dir="ltr"] .rs-hero::before{background:linear-gradient(90deg,rgba(0,0,0,.74),rgba(0,0,0,.16))}
/* headline: words rise from behind a mask, on a loop */
.rs-hero h4 .rw{display:inline-block;overflow:hidden;vertical-align:bottom;padding-block:.08em;margin-block:-.08em}
.rs-hero h4 .rw>span{display:inline-block;animation:rsWord 9s cubic-bezier(.2,.8,.2,1) infinite;animation-delay:calc(var(--i) * .12s)}
@keyframes rsWord{0%{transform:translateY(110%);opacity:0}9%,92%{transform:none;opacity:1}100%{transform:none;opacity:1}}
.rs-k{animation:rsFade 9s ease infinite}
.rs-hero p{animation:rsFade 9s ease infinite;animation-delay:.5s}
.rs-ctas{animation:rsFade 9s ease infinite;animation-delay:.7s}
@keyframes rsFade{0%{opacity:0;transform:translateY(12px)}10%,92%{opacity:1;transform:none}100%{opacity:1;transform:none}}
/* buttons: shimmer + soft pulse */
.rs-btn{position:relative;overflow:hidden}
.rs-btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-130%);animation:rsShine 3.6s ease-in-out infinite}
.rs-btn.ghost::after{display:none}
@keyframes rsShine{0%,55%{transform:translateX(-130%)}85%,100%{transform:translateX(130%)}}
.rs-btn.big{animation:rsPulse 2.6s ease-out infinite}
@keyframes rsPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ra2) 55%,transparent)}70%{box-shadow:0 0 0 12px transparent}100%{box-shadow:0 0 0 0 transparent}}
/* floating notification: pops in, then floats */
.rs-float{animation:rsPop 9s cubic-bezier(.3,1.6,.5,1) infinite,bob 4.5s ease-in-out infinite}
@keyframes rsPop{0%,12%{opacity:0;scale:.6}20%,92%{opacity:1;scale:1}100%{opacity:1;scale:1}}
/* service cards float gently, icons pulse */
.rs-card{animation:rsFloat 5s ease-in-out infinite;animation-delay:calc(var(--d,0) * .6s)}
.rs-card:nth-child(2){--d:1}.rs-card:nth-child(3){--d:2}
@keyframes rsFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.rs-ci{animation:rsIcon 2.8s ease-in-out infinite;animation-delay:calc(var(--i) * .4s)}
@keyframes rsIcon{0%,100%{transform:scale(1)}50%{transform:scale(1.1) rotate(-6deg)}}
/* CTA band: light sweep */
.rs-cta{position:relative;overflow:hidden}
.rs-cta::before{content:"";position:absolute;top:0;bottom:0;width:40%;left:-40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);animation:rsSweep 4s ease-in-out infinite}
@keyframes rsSweep{0%{left:-40%}60%,100%{left:110%}}
/* stats: subtle underline grows */
.rs-stats div{position:relative}
.rs-stats div::after{content:"";display:block;width:0;height:3px;border-radius:3px;margin:6px auto 0;background:var(--ra2);opacity:.6;animation:rsBar 9s ease infinite}
@keyframes rsBar{0%,8%{width:0}25%,100%{width:28px}}
/* nav brand mark breathes */
.rs-brand i{animation:rsIcon 3.2s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  .rs-bg,.rs-hero h4 .rw>span,.rs-k,.rs-hero p,.rs-ctas,.rs-btn::after,.rs-btn.big,.rs-float,.rs-card,.rs-ci,.rs-cta::before,.rs-stats div::after,.rs-brand i{animation:none!important}
  .rs-stats div::after{width:28px}
}

/* ===== mobile polish pass ===== */
@media (max-width:640px){
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{width:100%}
  .d-months small,.rep-labels small{font-size:11px}
  .d-tip small{font-size:11px}
  .stp{gap:5px;font-size:10.5px}
  .stp span{white-space:nowrap;gap:4px}
  .stp span::before{width:8px;height:8px}
  .f-btn{margin-top:12px}
  .opts .opt:last-child:nth-child(odd){grid-column:span 2}
  .svc-cta{padding:8px 0;margin-top:4px}
  .social{gap:6px;flex-wrap:wrap;justify-content:center}
  .social a{padding:8px 10px}
  .cdots.count{gap:0;font-size:13px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
  .cdots.count b{color:var(--navy)}
  .wa{width:52px;height:52px}
  .wa svg{width:25px;height:25px}
}
.cdots.count span{direction:ltr;unicode-bidi:isolate}