/* ==========================================================================
   Node Netcad Enterprise — site stylesheet
   Sections: tokens · base · layout · buttons · header · hero · sections ·
   cards · product mock-ups · forms · footer · admin
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --red-50:#FFF1F1; --red-100:#FFDFDF; --red-200:#FFC5C5; --red-300:#FF9D9D; --red-400:#FF6464; --red-500:#FF2E2E;
  --red-600:#E30613; --red-700:#BF0A12; --red-800:#9D0E14; --red-900:#820F15;
  --ink-950:#0A0F1C; --ink-900:#0F172A; --ink-800:#1E293B;
  --slate-700:#334155; --slate-500:#64748B; --slate-400:#94A3B8; --slate-300:#CBD5E1; --slate-200:#E2E8F0; --slate-100:#F1F5F9; --slate-50:#F8FAFC; --white:#fff;
  --grad-coral:#FF5A4E; --grad-amber:#FFB224; --grad-plum:#7A1E5C; --grad-rose:#FF3D7F;
  --p-medicare:#E30613; --p-lablis:#0EA5A4; --p-crm:#2563EB; --p-nodesms:#7C3AED; --p-testa:#F59E0B; --p-dialnode:#10B981;
  --success:#16A34A; --warning:#D97706; --danger:#DC2626; --focus:#2563EB;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow-md:0 6px 12px -2px rgba(50,50,93,.15), 0 3px 7px -3px rgba(0,0,0,.2);
  --shadow-lg:0 30px 60px -12px rgba(50,50,93,.25), 0 18px 36px -18px rgba(0,0,0,.3);
  --r-sm:6px; --r-md:12px; --r-lg:20px;
  --header-h:72px;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-head:'Montserrat','Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --accent:var(--red-600);
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 64px)}
body{margin:0;font:400 16px/1.65 var(--font-body);color:var(--slate-700);background:var(--white);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%;display:block}
img{height:auto}
a{color:var(--red-600);text-decoration:none}
a:hover{color:var(--red-700)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
h1,h2,h3,h4{font-family:var(--font-head);color:var(--ink-900);margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(2.25rem,5vw,4rem);line-height:1.05;font-weight:800;letter-spacing:-.02em}
h2{font-size:clamp(1.875rem,3.4vw,2.75rem);line-height:1.12;font-weight:700}
h3{font-size:clamp(1.15rem,1.6vw,1.5rem);line-height:1.25;font-weight:700}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0}
code{font-family:var(--font-mono);font-size:.9em;background:var(--slate-100);padding:.1em .4em;border-radius:4px}
button{font:inherit;cursor:pointer}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.skip-link{position:absolute;left:12px;top:-60px;background:var(--ink-900);color:#fff;padding:10px 16px;border-radius:var(--r-sm);z-index:200}
.skip-link:focus{top:12px;color:#fff}
.icon{width:24px;height:24px;flex:none}
.icon--sm{width:18px;height:18px}.icon--xs{width:16px;height:16px}
.icon--ok{color:var(--success)}
.linklike{background:none;border:0;padding:0;color:inherit;text-decoration:underline;cursor:pointer}
.muted{color:var(--slate-500)}
.center{text-align:center}
.hl{color:var(--red-600)}
.hero .hl{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.55);text-decoration-thickness:.07em;text-underline-offset:.12em}
.section-dark .hl,.section--dark .hl{color:var(--red-400)}

/* ---------- 3. Layout ---------- */
.container{width:100%;max-width:1180px;margin:0 auto;padding:0 24px}
.container--narrow{max-width:820px}
.section{padding:128px 0}
.section--tight{padding:56px 0}
.section--alt{background:var(--slate-50)}
.section--dark{background:var(--ink-950);color:var(--slate-300);position:relative;overflow:hidden}
.section--dark h2,.section--dark h3{color:#fff}
.section-head{max-width:720px;margin-bottom:56px}
.section-head.is-center{margin-inline:auto;text-align:center}
.section-head--row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;max-width:none}
.section-head h2{margin-bottom:.35em}
.section-head .lead{margin:0}
.eyebrow{display:inline-block;margin:0 0 14px;font:600 13px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--red-600)}
.eyebrow--light{color:rgba(255,255,255,.9)}
.section--dark .eyebrow{color:var(--red-400)}
.lead{font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.6;color:var(--slate-500)}
.section--dark .lead{color:var(--slate-300)}
.grid{display:grid;gap:24px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:center}
.split--flip .split__copy{order:2}
.split__media{min-width:0}
.center-cta{text-align:center;margin-top:40px}
.subhead{margin:56px 0 24px}
.section-gap{margin-top:48px}
.photo{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.photo img{width:100%;aspect-ratio:3/2;object-fit:cover}

/* ---------- 4. Buttons & links ---------- */
.btn .icon{flex:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 24px;border-radius:999px;border:1px solid transparent;font:600 15px/1 var(--font-body);cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s,box-shadow .2s;white-space:nowrap}
.btn--sm{padding:10px 18px;font-size:14px}
.btn--block{display:flex;width:100%}
.btn--primary{background:var(--red-600);color:#fff}
.btn--primary:hover{background:var(--red-700);color:#fff;box-shadow:0 8px 20px -6px rgba(227,6,19,.55)}
.btn--ghost{background:#fff;color:var(--ink-900);border-color:var(--slate-200)}
.btn--ghost:hover{border-color:var(--slate-300);background:var(--slate-50);color:var(--ink-900)}
.btn--light,.btn--primary-light{background:#fff;color:var(--ink-900)}
.btn--light:hover,.btn--primary-light:hover{background:var(--ink-900);color:#fff}
.btn--outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn--outline-light:hover{background:rgba(255,255,255,.14);color:#fff;border-color:#fff}
.btn__arrow{transition:transform .2s}
.btn:hover .btn__arrow{transform:translateX(3px)}
.link-arrow{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--ink-900)}
.link-arrow .icon{transition:transform .2s;color:var(--red-600)}
.link-arrow:hover{color:var(--red-600)}
.link-arrow:hover .icon{transform:translateX(3px)}

/* ---------- 5. Header & navigation ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--header-h);transition:background .25s,box-shadow .25s,border-color .25s;border-bottom:1px solid transparent}
.site-header__inner{position:relative;height:100%;display:flex;align-items:center;gap:24px}
.site-header__logo{display:flex;align-items:center;flex:none}
.site-header__actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.logo{display:inline-flex;align-items:center;gap:10px;color:var(--red-600)}
.logo-mark{display:inline-block;flex:none;height:30px;aspect-ratio:1184/754;background:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
.logo-text{display:flex;flex-direction:column;line-height:1;font-family:var(--font-head);color:var(--ink-900)}
.logo-text small{font-size:11px;font-weight:500;letter-spacing:.02em}
.logo-text strong{font-size:19px;font-weight:800;color:var(--red-600);margin:1px 0}
.logo-text em{font-style:normal;font-size:8.5px;font-weight:600;letter-spacing:.3em;text-transform:uppercase}
.logo--white,.site-header--dark:not(.is-scrolled):not(.is-open) .logo{color:#fff}
.logo--white .logo-text,.logo--white .logo-text strong,.site-header--dark:not(.is-scrolled):not(.is-open) .logo-text,.site-header--dark:not(.is-scrolled):not(.is-open) .logo-text strong{color:#fff}
.site-header--light,.site-header.is-scrolled,.site-header.is-open{background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom-color:var(--slate-200)}
.site-header.is-scrolled{box-shadow:var(--shadow-sm)}
.nav{display:block}
.nav__list{list-style:none;display:flex;align-items:center;gap:2px}
.nav__trigger,.nav__link{white-space:nowrap;display:inline-flex;align-items:center;gap:4px;padding:10px 12px;background:none;border:0;border-radius:8px;font:500 15px/1 var(--font-body);color:var(--ink-900);transition:color .2s,background .2s}
.nav__trigger .icon{transition:transform .2s}
.nav__trigger[aria-expanded="true"] .icon{transform:rotate(180deg)}
.site-header--dark:not(.is-scrolled):not(.is-open) .nav__trigger,.site-header--dark:not(.is-scrolled):not(.is-open) .nav__link{color:#fff}
.nav__trigger:hover,.nav__link:hover,.nav__link.is-active{color:var(--red-600)}
.site-header--dark:not(.is-scrolled):not(.is-open) .nav__trigger:hover,.site-header--dark:not(.is-scrolled):not(.is-open) .nav__link:hover{color:#fff;background:rgba(255,255,255,.14)}
.mega{position:absolute;top:calc(100% - 6px);left:50%;transform:translate(-50%,8px);width:min(940px,calc(100vw - 48px));background:#fff;border:1px solid var(--slate-200);border-radius:var(--r-md);box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;overflow:hidden}
.mega::before{content:"";position:absolute;inset:-16px 0 auto;height:16px}
.mega.is-open{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.mega--sm{width:min(640px,calc(100vw - 48px))}
.mega__inner{padding:24px;display:grid;gap:8px 28px}
.mega__inner--products{grid-template-columns:repeat(3,1fr)}
.mega__inner--list{grid-template-columns:1fr}
.mega__inner--list.is-two{grid-template-columns:1fr 1fr}
.mega__label{font:600 12px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--slate-500);margin:0 0 10px}
.mega__link{display:flex;gap:12px;align-items:flex-start;padding:10px;border-radius:10px;color:var(--slate-700);transition:background .15s}
.mega__link:hover{background:var(--slate-50);color:var(--slate-700)}
.mega__link strong{display:block;font:600 15px/1.3 var(--font-body);color:var(--ink-900)}
.mega__link small{display:block;font-size:13px;line-height:1.4;color:var(--slate-500);margin-top:2px}
.mega__icon{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;flex:none;background:color-mix(in srgb,var(--accent,var(--red-600)) 12%,#fff);color:var(--accent,var(--red-600))}
.mega__icon .icon{width:20px;height:20px}
.mega__foot{display:flex;align-items:center;gap:8px;padding:14px 24px;background:var(--slate-50);border-top:1px solid var(--slate-200);font-weight:600;font-size:14px;color:var(--ink-900)}
.mega__foot:hover{color:var(--red-600)}
.mega__plain{display:block;padding:9px 8px;border-radius:8px;font-weight:500;color:var(--ink-900)}
.mega__plain:hover{background:var(--slate-50);color:var(--red-600)}
.site-header__actions .nav__trigger{padding-inline:10px}
.nav-toggle{display:none;width:44px;height:44px;border-radius:10px;border:0;background:none;color:var(--ink-900);align-items:center;justify-content:center}
.site-header--dark:not(.is-scrolled):not(.is-open) .nav-toggle{color:#fff}
.sheet{position:fixed;inset:var(--header-h) 0 0 0;background:#fff;display:flex;flex-direction:column;z-index:99;opacity:0;transform:translateY(-8px);transition:opacity .2s,transform .2s}
.sheet.is-open{opacity:1;transform:none}
.sheet[hidden]{display:none}
.sheet__scroll{flex:1;overflow:auto;padding:8px 24px}
.sheet__group summary,.sheet__link{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid var(--slate-200);font:600 17px/1.2 var(--font-body);color:var(--ink-900);cursor:pointer;list-style:none}
.sheet__group summary::-webkit-details-marker{display:none}
.sheet__group[open] summary .icon{transform:rotate(180deg)}
.sheet__group a{display:block;padding:11px 12px;color:var(--slate-700);font-weight:500}
.sheet__group a small{display:block;color:var(--slate-500);font-weight:400}
.sheet__foot{padding:16px 24px 24px;display:grid;gap:10px;border-top:1px solid var(--slate-200);background:#fff}

/* ---------- 6. Hero ---------- */
.hero{position:relative;isolation:isolate;padding:calc(var(--header-h) + 88px) 0 132px;color:#fff;overflow:hidden}
.hero--compact{padding:calc(var(--header-h) + 56px) 0 88px}
.hero__bg{position:absolute;inset:0;z-index:-1;background:var(--ink-950);overflow:hidden}
.hero--product .hero__bg{background:var(--ink-900)}
/* abstract motion layer (flat colours only) */
.motion{position:absolute;inset:0;pointer-events:none}
.motion svg{width:100%;height:100%;color:#fff}
.motion [class*="m-"]{transform-box:fill-box;transform-origin:center}
.m-ring{stroke:currentColor;stroke-width:2;opacity:.2;animation:ringpulse 9s ease-in-out infinite}
.m-r2{opacity:.12;animation-duration:12s;animation-delay:-3s}.m-r3{opacity:.16;animation-duration:10s;animation-delay:-5s}
.m-frame{stroke:currentColor;stroke-width:7;opacity:.16;animation:spin 48s linear infinite}
.m-f2{opacity:.12;animation-duration:64s;animation-direction:reverse}
.m-link{stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-dasharray:14 16;opacity:.4;animation:flow 3.4s linear infinite}
.m-link.l2{animation-duration:4.4s;animation-direction:reverse}.m-link.l3{animation-duration:5.2s}.m-link.l4{animation-duration:3.8s;animation-direction:reverse}
.m-node{fill:currentColor;opacity:.85;animation:bob 6s ease-in-out infinite}
.m-node.n2{animation-delay:-1s}.m-node.n3{animation-delay:-2s}.m-node.n4{animation-delay:-3s}.m-node.n5{animation-delay:-4s}.m-node.n6{animation-delay:-1.5s}.m-node.n7{animation-delay:-2.5s}.m-node.n8{animation-delay:-3.5s}
.hero--product .motion svg{color:var(--accent)}
.hero--product .m-ring,.hero--product .m-frame{opacity:.35}.hero--product .m-link{opacity:.6}
@keyframes ringpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes flow{to{stroke-dashoffset:-60}}
@keyframes bob{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(10px,-14px) scale(1.25)}}
.hero__inner{position:relative}
.hero__inner--split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center}
.hero h1{color:#fff;margin-bottom:.4em;max-width:16ch}
.hero--compact h1{font-size:clamp(2rem,4.2vw,3.25rem);max-width:20ch}
.hero__inner--split h1{max-width:none}
.hero .lead{color:rgba(255,255,255,.92);max-width:56ch;margin-bottom:32px}
.hero__ctas{display:flex;flex-wrap:wrap;gap:12px}
.hero__crumbs{margin-bottom:20px}
.hero-single{max-width:640px;margin-inline:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.25))}
.hero-photo img{width:100%;border-radius:var(--r-lg);box-shadow:var(--shadow-lg);aspect-ratio:3/2;object-fit:cover}
.hero-stack{position:relative;padding:0 0 70px 0}
.hero-stack__main{width:100%;filter:drop-shadow(0 40px 50px rgba(0,0,0,.28));transform:perspective(1400px) rotateY(-6deg) rotateX(2deg);transform-origin:right center}
.hero-stack__phone{position:absolute;right:-12px;bottom:0;width:36%;max-width:190px;filter:drop-shadow(0 30px 36px rgba(0,0,0,.35));animation:floaty 7s ease-in-out infinite}
.hero-stack__call{position:absolute;left:-18px;bottom:6px;display:flex;align-items:center;gap:12px;background:#fff;color:var(--ink-900);padding:12px 16px;border-radius:14px;box-shadow:var(--shadow-lg);font-size:13px;animation:floaty 8s ease-in-out infinite reverse}
.hero-stack__call b{display:block;font-family:var(--font-head)}
.hero-stack__call small{color:var(--slate-500);font-size:12px}
.pulse{width:38px;height:38px;border-radius:50%;background:var(--p-dialnode);color:#fff;display:grid;place-items:center;position:relative}
.pulse::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--p-dialnode);animation:ring 2s ease-out infinite}
@keyframes ring{from{transform:scale(1);opacity:.8}to{transform:scale(1.7);opacity:0}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px 8px;font-size:13px;color:var(--slate-500)}
.crumbs li+li::before{content:"/";margin-right:8px;opacity:.5}
.crumbs a{color:inherit}.crumbs a:hover{color:var(--red-600)}
.hero .crumbs ol{color:rgba(255,255,255,.75)}.hero .crumbs a:hover{color:#fff}
.page-head{padding:calc(var(--header-h) + 40px) 0 40px;background:var(--slate-50)}
.page-head h1{font-size:clamp(2rem,4vw,3rem);max-width:24ch}
.page-head .lead{max-width:60ch;margin:0}
.page-head .crumbs{margin-bottom:16px}
.page-head--post h1{max-width:none}
.page-head .meta{color:var(--slate-500);font-size:14px}

/* ---------- 7. Sections & components ---------- */
.trust-strip{position:relative;z-index:3;margin-top:-52px;padding-bottom:8px}
.trust-strip__inner{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 36px;padding:20px 32px;font-weight:500;font-size:14px;color:var(--ink-800);background:#fff;border:1px solid var(--slate-200);border-radius:18px;box-shadow:0 18px 40px -16px rgba(15,23,42,.35)}
.trust-strip__inner span{display:inline-flex;align-items:center;gap:8px}
.trust-strip__inner .icon{color:var(--red-600)}
.marquee-title{text-align:center;color:var(--slate-500);font-weight:500;margin-bottom:24px}
.marquee{overflow:hidden}.marquee__track{display:flex;gap:64px;width:max-content;animation:scroll 40s linear infinite;align-items:center}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee img{height:36px;width:auto;filter:grayscale(1);opacity:.7;transition:.2s}.marquee img:hover{filter:none;opacity:1}
@keyframes scroll{to{transform:translateX(-50%)}}

.card,.tile,.scard,.pcard{background:#fff;border:1px solid var(--slate-200);border-radius:var(--r-md);padding:28px;transition:transform .25s,box-shadow .25s,border-color .25s}
.tile{padding:24px;background:#fff}
.section--alt .tile,.section--alt .card{background:#fff}
a.card:hover,.scard:hover,.pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--slate-300)}
.card h3,.tile h3,.scard h3{margin:14px 0 8px}
.card p,.tile p,.scard p{color:var(--slate-500);margin:0 0 12px;font-size:15px}
.tile p{margin:0}
.scard{display:block;color:var(--slate-700)}
.scard:hover{color:var(--slate-700)}
.scard--lg{padding:0;overflow:hidden}
.scard--lg img{width:100%;aspect-ratio:16/8;object-fit:cover}
.scard__body{display:block;padding:24px 28px 28px}
.tile__icon{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:11px;background:color-mix(in srgb,var(--accent,var(--red-600)) 10%,#fff);color:var(--accent,var(--red-600))}
.pcard{position:relative;display:flex;flex-direction:column;gap:6px;overflow:hidden;color:var(--slate-700)}
.pcard:hover{color:var(--slate-700)}
.pcard__top{position:absolute;inset:0 0 auto;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.pcard:hover .pcard__top{transform:scaleX(1)}
.pcard__icon{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:12px;background:color-mix(in srgb,var(--accent) 12%,#fff);color:var(--accent);margin-bottom:8px}
.pcard__cat{font:600 12px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--slate-500)}
.pcard h3{margin:4px 0 0}
.pcard p{color:var(--slate-500);font-size:15px}
.pcard ul{list-style:none;display:grid;gap:6px;margin:4px 0 16px;font-size:14px}
.pcard li{display:flex;gap:8px;align-items:center}.pcard li .icon{color:var(--accent)}
.pcard .link-arrow{margin-top:auto}
.checklist{list-style:none;display:grid;gap:12px;margin:24px 0 32px}
.checklist li{display:flex;gap:12px;align-items:flex-start}
.checklist .icon{color:var(--red-600);margin-top:2px;width:22px;height:22px}
.section--dark .checklist .icon{color:var(--red-400)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;border-top:1px solid var(--slate-200);border-bottom:1px solid var(--slate-200);padding-block:40px}
.stat{text-align:center}
.stat__value,.stat__suffix{font:800 clamp(2.2rem,4vw,3.4rem)/1 var(--font-head);color:var(--ink-900)}
.stat__suffix{color:var(--red-600)}
.stat span{display:block;margin-top:8px;color:var(--slate-500);font-size:14px}
.quote{margin:0;background:#fff;border:1px solid var(--slate-200);border-radius:var(--r-md);padding:28px}
.quote blockquote{margin:0 0 20px;font-size:17px;color:var(--ink-900)}
.quote figcaption b{display:block;color:var(--ink-900)}.quote figcaption span{color:var(--slate-500);font-size:14px}
.metric{font:700 1.3rem/1.2 var(--font-head);color:var(--red-600)}

/* tabs */
.tabs__list{display:flex;gap:6px;padding:6px;background:var(--slate-100);border-radius:999px;width:max-content;max-width:100%;margin-bottom:32px}
.tabs__list--scroll{overflow-x:auto}
.tabs__list button{padding:10px 20px;border:0;border-radius:999px;background:none;font-weight:600;color:var(--slate-500);white-space:nowrap;transition:.2s}
.tabs__list button[aria-selected="true"]{background:#fff;color:var(--ink-900);box-shadow:var(--shadow-sm)}
.tabs__panel{animation:fadein .35s}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.industry{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center}
.industry img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-lg);box-shadow:var(--shadow-lg)}
.industry p{color:var(--slate-500);font-size:18px}

/* ecosystem diagram */
.eco{max-width:900px;margin-inline:auto}
.eco svg{width:100%;height:auto}
.eco-line path{stroke:var(--slate-300);stroke-width:2;stroke-dasharray:6 8;fill:none;animation:dash 1.6s linear infinite}
.eco-line--spine path{stroke:var(--red-300);stroke-dasharray:3 9}
@keyframes dash{to{stroke-dashoffset:-28}}
.eco-node rect{fill:#fff;stroke:var(--slate-200);stroke-width:1.5;filter:drop-shadow(0 6px 10px rgba(15,23,42,.08))}
.eco-dot{fill:var(--accent)}
.eco-name{font:700 17px var(--font-head);fill:var(--ink-900)}
.eco-label text{font:500 13px var(--font-body);fill:var(--slate-500)}
.eco-hub rect{fill:var(--ink-900)}.eco-hub text{font:600 15px var(--font-body);fill:#fff}

/* code window */
.code-window{background:#0B1220;border:1px solid rgba(255,255,255,.1);border-radius:var(--r-md);box-shadow:var(--shadow-lg);overflow:hidden;color:#CBD5E1}
.code-window__bar{display:flex;align-items:center;gap:16px;padding:10px 14px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.08)}
.dots{display:flex;gap:6px}.dots i{width:11px;height:11px;border-radius:50%;background:#334155}
.dots i:nth-child(1){background:#FF5F57}.dots i:nth-child(2){background:#FEBC2E}.dots i:nth-child(3){background:#28C840}
.code-tabs{display:flex;gap:4px;margin-right:auto}
.code-tabs button{background:none;border:0;color:#94A3B8;font:500 13px var(--font-body);padding:6px 10px;border-radius:6px}
.code-tabs button[aria-selected="true"]{background:rgba(255,255,255,.1);color:#fff}
.code-copy{display:inline-flex;gap:6px;align-items:center;background:none;border:0;color:#94A3B8;font-size:13px}
.code-copy:hover{color:#fff}
.code{margin:0;padding:20px 22px;font:400 13.5px/1.7 var(--font-mono);overflow:auto;color:#CBD5E1;white-space:pre}
.code[hidden]{display:none}
.code--standalone{background:#0B1220;border-radius:var(--r-md);box-shadow:var(--shadow-md)}
.code code{background:none;padding:0;color:inherit;font-size:inherit}
.c-c{color:#64748B}.c-s{color:#7DD3A8}.c-k{color:#FF9D9D}

/* product row, chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:48px}
.chip{padding:9px 18px;border:1px solid var(--slate-200);border-radius:999px;background:#fff;color:var(--slate-700);font-weight:500;font-size:14px;transition:.2s}
.chip:hover{border-color:var(--slate-300);color:var(--ink-900)}
.chip.is-on{background:var(--ink-900);border-color:var(--ink-900);color:#fff}
.prow{display:grid;grid-template-columns:1fr 1.15fr;gap:64px;align-items:center;padding-block:56px;border-top:1px solid var(--slate-200)}
.prow:first-of-type{border-top:0}
.prow--flip .prow__copy{order:2}
.prow[hidden]{display:none}
.prow__ctas{display:flex;flex-wrap:wrap;gap:12px}
.prow__media{min-width:0}
.price-teaser{display:flex;justify-content:space-between;align-items:center;gap:32px;padding:40px;border-radius:var(--r-lg);background:var(--slate-50);border:1px solid var(--slate-200)}
.price-teaser h2{font-size:1.9rem}.price-teaser p{margin:0;color:var(--slate-500)}
.price-teaser__ctas{display:flex;gap:12px;flex-wrap:wrap}

/* matrix, callout, tables */
.matrix{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.matrix__cell{background:#fff;border:1px solid var(--slate-200);border-radius:var(--r-md);padding:28px}
.matrix__cell h3{margin:14px 0 12px}
.matrix__cell ul{list-style:none;display:grid;gap:10px}
.matrix__cell li{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.matrix__cell li .icon{color:var(--accent);margin-top:3px}
.callout{display:flex;gap:20px;align-items:flex-start;padding:28px;margin-top:40px;border-radius:var(--r-md);background:var(--slate-50);border:1px solid var(--slate-200)}
.callout>.icon{color:var(--red-600);width:32px;height:32px}
.callout h3{margin-bottom:6px}.callout p{margin:0;color:var(--slate-500)}
.table-wrap{overflow-x:auto;border:1px solid var(--slate-200);border-radius:var(--r-md);background:#fff}
.table{width:100%;border-collapse:collapse;font-size:15px}
.table th,.table td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--slate-200);vertical-align:top}
.table thead th{background:var(--slate-50);font:600 13px var(--font-body);color:var(--slate-500);text-transform:uppercase;letter-spacing:.05em}
.table tbody tr:last-child th,.table tbody tr:last-child td{border-bottom:0}
.table tbody th{font-weight:600;color:var(--ink-900)}
.table td:has(.icon--ok){text-align:center}
.timeline{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:24px;counter-reset:s}
.timeline li{position:relative;padding-top:20px;border-top:2px solid var(--slate-200)}
.timeline li::before{content:"";position:absolute;top:-6px;left:0;width:10px;height:10px;border-radius:50%;background:var(--red-600)}
.timeline__n{display:block;font:700 13px var(--font-head);color:var(--red-600);margin-bottom:8px}
.timeline h3{font-size:1.1rem;margin:10px 0 6px}.timeline p{color:var(--slate-500);font-size:14px;margin:0}
.steps{list-style:none;display:grid;gap:32px}
.steps__item,.steps--compact li{display:flex;gap:20px;align-items:flex-start}
.steps__n{flex:none;width:44px;height:44px;border-radius:50%;background:var(--red-600);color:#fff;display:grid;place-items:center;font:700 16px var(--font-head)}
.steps h3{display:flex;gap:10px;align-items:center;margin:0 0 6px}
.steps p{margin:0;color:var(--slate-500)}
.steps--compact{gap:20px}.steps--compact h3{font-size:1.05rem}
.tech{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.tech span{padding:9px 18px;border-radius:999px;background:#fff;border:1px solid var(--slate-200);font-weight:500;font-size:14px;color:var(--ink-900)}
.tabs+.tabs{margin-top:0}

/* pricing */
.pricing__toggles{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-bottom:32px}
.seg{display:inline-flex;padding:4px;background:var(--slate-100);border-radius:999px}
.seg button{padding:8px 18px;border:0;background:none;border-radius:999px;font-weight:600;font-size:14px;color:var(--slate-500)}
.seg button.is-on{background:#fff;color:var(--ink-900);box-shadow:var(--shadow-sm)}
.seg em{font-style:normal;color:var(--success);font-size:12px;margin-left:4px}
.pricing__lead{font-size:18px;margin-bottom:32px}
.pricing__note{text-align:center;color:var(--slate-500);margin-top:32px;font-size:14px}
.price-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--slate-200);border-radius:var(--r-lg);padding:32px}
.price-card.is-featured{border-color:var(--red-600);box-shadow:var(--shadow-md)}
.price-card__badge{position:absolute;top:-13px;left:32px;background:var(--red-600);color:#fff;font:600 12px/1 var(--font-body);padding:7px 12px;border-radius:999px}
.price-card__blurb{color:var(--slate-500);font-size:15px;min-height:4.8em}
.price-card__price{margin:8px 0 20px}
.price-card__price strong{display:block;font:800 1.9rem/1.2 var(--font-head);color:var(--ink-900)}
.price-card__price span{color:var(--slate-500);font-size:14px}
.price-card ul{list-style:none;display:grid;gap:10px;margin:0 0 28px;flex:1}
.price-card li{display:flex;gap:10px;font-size:15px}.price-card li .icon{color:var(--success);margin-top:4px}

/* FAQ */
.faq{border-top:1px solid var(--slate-200)}
.faq__item{border-bottom:1px solid var(--slate-200)}
.faq__item h3{margin:0;font:inherit}
.faq__q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;background:none;border:0;text-align:left;font:600 17px/1.4 var(--font-body);color:var(--ink-900)}
.faq__q:hover{color:var(--red-600)}
.faq__icon{transition:transform .25s;color:var(--red-600)}
.faq__q[aria-expanded="true"] .faq__icon{transform:rotate(45deg)}
.faq__a{overflow:hidden}
.faq__a p{padding:0 0 22px;margin:0;color:var(--slate-500);max-width:64ch}

/* CTA band */
.cta-band{position:relative;isolation:isolate;overflow:hidden;color:#fff;padding:96px 0;background:var(--red-800)}
.cta-band__bg{position:absolute;inset:0;z-index:-1}
.cta-band__inner{display:flex;justify-content:space-between;align-items:center;gap:40px}
.cta-band h2{color:#fff;margin-bottom:8px}.cta-band p{margin:0;color:rgba(255,255,255,.9);font-size:18px}
.cta-band__actions{display:flex;flex-wrap:wrap;gap:12px}

/* blog */
.post-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--slate-200);border-radius:var(--r-md);overflow:hidden;color:var(--slate-700);transition:.25s}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);color:var(--slate-700)}
.post-card img{width:100%;aspect-ratio:5/3;object-fit:cover}
.post-card__body{display:block;padding:22px 24px 26px}
.post-card h3{font-size:1.15rem;margin:0 0 8px}.post-card p{color:var(--slate-500);font-size:15px;margin:0 0 12px}
.post-card small{color:var(--slate-500)}
.feature-post{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;margin-bottom:48px;color:var(--slate-700)}
.feature-post img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-lg);box-shadow:var(--shadow-md)}
.feature-post:hover{color:var(--slate-700)}.feature-post p{color:var(--slate-500)}
.pager{display:flex;gap:8px;justify-content:center;margin-top:48px}
.pager a{min-width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--slate-200);border-radius:10px;font-weight:600;color:var(--ink-900)}
.pager a.is-on{background:var(--ink-900);color:#fff;border-color:var(--ink-900)}
.post-cover{width:100%;border-radius:var(--r-lg);margin:0 0 40px;box-shadow:var(--shadow-md);aspect-ratio:2/1;object-fit:cover}
.post-layout{display:grid;grid-template-columns:220px minmax(0,720px);gap:56px;justify-content:center;padding-bottom:80px}
.post-layout:not(:has(.toc)){grid-template-columns:minmax(0,720px)}
.toc{position:sticky;top:calc(var(--header-h) + 24px);align-self:start;font-size:14px}
.toc ul{list-style:none;display:grid;gap:10px;border-left:2px solid var(--slate-200);padding-left:16px}
.toc a{color:var(--slate-500)}.toc a:hover,.toc a.is-active{color:var(--red-600)}
.prose{font-size:17px;line-height:1.75}
.prose h2{font-size:1.65rem;margin:2em 0 .6em}
.prose ul,.prose ol{padding-left:1.4em;margin-bottom:1.2em}.prose li{margin-bottom:.4em}
.prose blockquote{margin:2em 0;padding:8px 0 8px 24px;border-left:3px solid var(--red-600);font:600 1.2rem/1.5 var(--font-head);color:var(--ink-900)}
.share{display:flex;gap:16px;align-items:center;margin-top:40px;padding-top:24px;border-top:1px solid var(--slate-200);font-size:14px}
.share a{display:inline-flex;gap:6px;align-items:center;font-weight:600}
.author-box{display:flex;gap:16px;margin-top:32px;padding:24px;border-radius:var(--r-md);background:var(--slate-50)}
.author-box p{margin:0;color:var(--slate-500);font-size:15px}
.avatar{width:48px;height:48px;border-radius:50%;background:var(--red-100);color:var(--red-600);display:grid;place-items:center;flex:none}
.newsletter-box{text-align:center;padding:48px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--slate-200)}
.newsletter-box p{color:var(--slate-500)}

/* misc */
.empty{text-align:center;max-width:560px;margin:0 auto;padding:56px 24px}
.empty .tile__icon{width:56px;height:56px;margin-bottom:12px}
.empty p{color:var(--slate-500)}
.job{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 24px;margin-bottom:12px;border:1px solid var(--slate-200);border-radius:var(--r-md);background:#fff;color:var(--ink-900);transition:.2s}
.job:hover{border-color:var(--slate-300);box-shadow:var(--shadow-md);color:var(--ink-900)}
.job small{display:block;color:var(--slate-500)}
.facts{display:grid;gap:0;border:1px solid var(--slate-200);border-radius:var(--r-md);background:#fff}
.facts div{display:flex;justify-content:space-between;gap:16px;padding:16px 24px;border-bottom:1px solid var(--slate-200)}
.facts div:last-child{border-bottom:0}.facts span{color:var(--slate-500)}
.thanks{padding-top:calc(var(--header-h) + 72px)}
.thanks__icon{display:inline-grid;color:var(--success)}.thanks__icon .icon{width:72px;height:72px}
.thanks__links{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px}
.error-page{padding-top:calc(var(--header-h) + 80px)}
.error-code{font:800 clamp(5rem,14vw,9rem)/1 var(--font-head);color:var(--red-600);margin:0}
.search{display:flex;gap:8px;max-width:420px;margin:24px auto}
.search input{flex:1}
.cookie{position:fixed;left:16px;right:16px;bottom:16px;max-width:760px;margin-inline:auto;display:flex;gap:16px;align-items:center;justify-content:space-between;background:var(--ink-900);color:#E2E8F0;padding:16px 20px;border-radius:var(--r-md);box-shadow:var(--shadow-lg);z-index:150;font-size:14px}
.cookie[hidden]{display:none}.cookie p{margin:0}.cookie a{color:#fff;text-decoration:underline}
.cookie__actions{display:flex;gap:8px;flex:none}
.cookie .btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.wa{position:fixed;right:20px;bottom:20px;z-index:90;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.wa__panel{background:#fff;border:1px solid var(--slate-200);border-radius:var(--r-md);box-shadow:var(--shadow-lg);padding:10px;min-width:250px;animation:fadein .2s}
.wa__panel[hidden]{display:none}
.wa__title{margin:6px 8px 8px;font:600 13px var(--font-body);color:var(--slate-500)}
.wa__item{display:flex;gap:12px;align-items:center;padding:10px;border-radius:10px;color:var(--ink-900)}
.wa__item:hover{background:var(--slate-50);color:var(--ink-900)}
.wa__item .icon{color:#25D366;width:28px;height:28px}
.wa__item b{display:block;font-size:15px}.wa__item small{color:var(--slate-500)}
.whatsapp-float{border:0;cursor:pointer;width:54px;height:54px;border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center;box-shadow:var(--shadow-md);transition:transform .2s}
.whatsapp-float:hover{transform:scale(1.08);color:#fff}
.whatsapp-float .icon{width:28px;height:28px}
.subnav{position:sticky;top:var(--header-h);z-index:50;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--slate-200);margin-top:-1px}
.subnav__inner{display:flex;align-items:center;gap:24px;min-height:56px}
.subnav__name{display:flex;align-items:center;gap:10px;font:700 16px var(--font-head);color:var(--ink-900);flex:none}
.subnav__icon{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:color-mix(in srgb,var(--accent) 14%,#fff);color:var(--accent)}
.subnav__links{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;flex:1}
.subnav__links::-webkit-scrollbar{display:none}
.subnav__links a{padding:16px 12px;font-weight:500;font-size:14px;color:var(--slate-500);white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px}
.subnav__links a:hover{color:var(--ink-900)}
.subnav__links a.is-active{color:var(--ink-900);border-bottom-color:var(--accent)}
.product-page .tile__icon,.product-page .checklist .icon{--accent:var(--accent)}
.product-page .eyebrow,.product-page .link-arrow .icon{color:var(--accent)}
.product-page .eyebrow--light{color:rgba(255,255,255,.9)}

/* reveal on scroll */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}.motion *,.hero-stack__phone,.hero-stack__call,.pulse::after,.eco-line path,.marquee__track{animation:none}html{scroll-behavior:auto}}

/* ---------- 8. Device frames & product mock-ups ---------- */
.device{border-radius:var(--r-md);background:#fff;overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid rgba(15,23,42,.1);color:var(--slate-700);text-align:left}
.device--browser .device__bar{display:flex;align-items:center;gap:12px;padding:9px 14px;background:var(--slate-100);border-bottom:1px solid var(--slate-200)}
.device__url{display:flex;align-items:center;gap:6px;flex:1;max-width:340px;padding:4px 12px;border-radius:999px;background:#fff;color:var(--slate-500);font-size:11px;overflow:hidden;white-space:nowrap}
.device--phone{width:100%;max-width:230px;margin-inline:auto;border-radius:30px;border:7px solid #0F172A;background:#fff;position:relative}
.device__notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:44%;height:16px;background:#0F172A;border-radius:0 0 12px 12px;z-index:2}
.mk{display:flex;min-height:300px;font-size:11px;line-height:1.35;background:#F8FAFC}
.mk--phone{display:block;padding:28px 12px 14px;min-height:0;font-size:10.5px}
.mk-side{width:44px;background:var(--ink-900);display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 0;flex:none}
.mk-side span{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:#94A3B8}
.mk-side span .icon{width:15px;height:15px}
.mk-side span.is-on{background:var(--red-600);color:#fff}
.mk-main{flex:1;min-width:0;padding:12px;display:grid;gap:10px;align-content:start}
.mk-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.mk-top b{font:700 13px var(--font-head);color:var(--ink-900)}
.mk-search{display:flex;gap:5px;align-items:center;background:#fff;border:1px solid var(--slate-200);border-radius:7px;padding:4px 9px;color:var(--slate-400)}
.mk-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mk-kpi{background:#fff;border:1px solid var(--slate-200);border-radius:9px;padding:8px 10px}
.mk-kpi small{display:block;color:var(--slate-500);font-size:9.5px}
.mk-kpi b{display:block;font:800 16px/1.2 var(--font-head);color:var(--ink-900)}
.mk-kpi em{font-style:normal;color:var(--success);font-size:9.5px;font-weight:600}
.mk-split{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mk-panel{background:#fff;border:1px solid var(--slate-200);border-radius:9px;padding:9px 10px;min-width:0}
.mk-panel>small{display:block;color:var(--slate-500);font-weight:600;margin-bottom:6px;font-size:10px}
.mk-bars{display:flex;align-items:flex-end;gap:5px;height:70px}
.mk-bars i{flex:1;background:var(--red-500);border-radius:3px 3px 0 0}
.mk-bars--wide i{background:#8B5CF6}
.mk-row{display:flex;align-items:center;gap:7px;padding:5px 0}
.mk-row+.mk-row{border-top:1px solid var(--slate-100)}
.mk-av{width:22px;height:22px;border-radius:50%;background:var(--red-100);color:var(--red-700);display:grid;place-items:center;font-weight:700;font-size:8.5px;flex:none}
.mk-row__t{flex:1;min-width:0}.mk-row__t b{display:block;color:var(--ink-900);font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-row__t small{color:var(--slate-500);font-size:9.5px}
.mk-pill{padding:2px 7px;border-radius:999px;font-weight:600;font-size:9px;white-space:nowrap}
.mk-pill--green{background:#DCFCE7;color:#166534}.mk-pill--blue{background:#DBEAFE;color:#1D4ED8}.mk-pill--amber{background:#FEF3C7;color:#92400E}.mk-pill--red{background:#FEE2E2;color:#B91C1C}
.mk-table{background:#fff;border:1px solid var(--slate-200);border-radius:9px;overflow:hidden}
.mk-tr{display:grid;grid-template-columns:1.2fr 1.4fr 1fr;gap:6px;padding:6px 10px;align-items:center;border-top:1px solid var(--slate-100)}
.mk-tr:first-child{border-top:0}.mk-th{background:var(--slate-50);color:var(--slate-500);font-weight:600;font-size:9.5px}
.mk-panel .mk-tr{padding:5px 0;grid-template-columns:1.4fr .6fr .6fr}
.mk-line{width:100%;height:56px;color:var(--p-lablis)}
.mk-kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mk-kanban>div{background:var(--slate-100);border-radius:9px;padding:8px;display:grid;gap:6px;align-content:start}
.mk-kanban small{font-weight:700;color:var(--slate-500);font-size:9.5px}
.mk-k{display:block;background:#fff;border-radius:7px;padding:7px 8px;border:1px solid var(--slate-200);font-weight:600;color:var(--ink-900);box-shadow:var(--shadow-sm)}
.mk-k em{display:block;font-style:normal;color:var(--p-crm);font-weight:700}.mk-k.is-won{border-left:3px solid var(--success)}
.mk-chips{display:flex;gap:4px}.mk-chips i{font-style:normal;padding:3px 9px;border-radius:999px;background:var(--slate-100);color:var(--slate-500);font-weight:600;font-size:9.5px}
.mk-chips i.on{background:var(--p-nodesms);color:#fff}
.mk-timer{display:inline-flex;gap:5px;align-items:center;background:var(--ink-900);color:#fff;padding:4px 10px;border-radius:999px;font-weight:700}
.mk--exam .mk-main{padding:14px}
.mk-exam{display:grid;grid-template-columns:1.5fr 1fr;gap:10px}
.mk-q{background:#fff;border:1px solid var(--slate-200);border-radius:9px;padding:12px;display:grid;gap:7px}
.mk-q small{color:var(--p-testa);font-weight:700}.mk-q b{font:700 13px/1.4 var(--font-head);color:var(--ink-900);margin-bottom:4px}
.mk-opt{display:flex;gap:8px;align-items:center;padding:7px 9px;border:1px solid var(--slate-200);border-radius:8px;font-weight:500}
.mk-opt i{width:11px;height:11px;border-radius:50%;border:2px solid var(--slate-300)}
.mk-opt.is-on{border-color:var(--p-testa);background:#FFFBEB}.mk-opt.is-on i{border-color:var(--p-testa);background:var(--p-testa)}
.mk-nav{background:#fff;border:1px solid var(--slate-200);border-radius:9px;padding:10px}
.mk-nav small{display:block;font-weight:700;color:var(--slate-500);margin-bottom:6px}
.mk-nav div{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.mk-nav span{aspect-ratio:1;display:grid;place-items:center;border-radius:5px;background:var(--slate-100);font-weight:600;font-size:9.5px}
.mk-nav .done{background:#DCFCE7;color:#166534}.mk-nav .now{background:var(--p-testa);color:#fff}
.mk-call{background:var(--ink-900);color:#fff;border-radius:9px;padding:12px;display:grid;gap:3px;text-align:center}
.mk-call small{color:#6EE7B7;font-weight:600}.mk-call b{font:700 14px var(--font-head)}.mk-call span{color:#94A3B8}
.mk-wave{display:flex;align-items:center;justify-content:center;gap:3px;height:34px;margin:6px 0}
.mk-wave i{width:3px;border-radius:2px;background:var(--p-dialnode);animation:wave 1.2s ease-in-out infinite}
.mk-wave i:nth-child(odd){animation-delay:.3s}
@keyframes wave{50%{transform:scaleY(.45)}}
.mk-callbtns{display:flex;justify-content:center;gap:8px}
.mk-callbtns span{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.14);display:grid;place-items:center;color:#fff}
.mk-callbtns .end{background:var(--danger)}
.mk-appbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-family:var(--font-head);color:var(--ink-900)}
.mk-card-hero{background:var(--red-600);color:#fff;border-radius:12px;padding:12px;display:grid;gap:2px;margin-bottom:10px}
.mk-card-hero small{opacity:.85}.mk-card-hero b{font:700 12px var(--font-head)}.mk-card-hero em{font-style:normal;opacity:.9}
.mk-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:10px;text-align:center}
.mk-quick span{display:grid;gap:3px;justify-items:center;font-size:9px;font-weight:600;color:var(--slate-500)}
.mk-quick .icon{width:30px;height:30px;padding:7px;background:var(--red-50);color:var(--red-600);border-radius:9px}

/* ---------- 9. Forms ---------- */
.form{display:grid;gap:18px}
.form.card{padding:36px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:grid;gap:6px;min-width:0}
.field label{font-weight:600;font-size:14px;color:var(--ink-900)}
.req{color:var(--red-600)}
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=search],input[type=password],input[type=file],select,textarea{width:100%;padding:12px 14px;border:1px solid var(--slate-300);border-radius:var(--r-sm);background:#fff;font:400 16px/1.4 var(--font-body);color:var(--ink-900);transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--red-600);box-shadow:0 0 0 3px rgba(227,6,19,.15)}
textarea{resize:vertical}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:var(--danger)}
.field-error{margin:0;color:var(--danger);font-size:13px}
.field-hint{margin:0;color:var(--slate-500);font-size:13px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--slate-500)}
.check input{margin-top:4px;accent-color:var(--red-600)}
.form-status{margin:0;font-weight:500;min-height:1.2em}
.form-status.is-err{color:var(--danger)}.form-status.is-ok{color:var(--success)}
.contact-layout{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:start}
.contact-list{list-style:none;display:grid;gap:20px;margin:24px 0}
.contact-list li{display:flex;gap:14px}.contact-list .icon{color:var(--red-600);margin-top:2px}
.contact-list b{display:block;color:var(--ink-900)}
.stepper{list-style:none;display:flex;gap:8px;margin-bottom:8px}
.stepper li{flex:1;padding-top:10px;border-top:3px solid var(--slate-200);font-weight:600;font-size:13px;color:var(--slate-500)}
.stepper li.is-on{border-color:var(--red-600);color:var(--ink-900)}
.js .quote-form .step{display:none}.js .quote-form .step.is-on{display:grid;animation:fadein .3s}
.step{display:grid;gap:18px;border:0;padding:0;margin:0}
.step legend{font:700 1.3rem var(--font-head);color:var(--ink-900);margin-bottom:16px;padding:0}
.step-nav{display:none;justify-content:space-between}
.js .step-nav{display:flex}
.newsletter{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.newsletter input[type=email]{flex:1;min-width:200px;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff}
.newsletter input::placeholder{color:var(--slate-400)}
.newsletter__msg{flex-basis:100%;margin:0;font-size:13px;min-height:1.2em}
.newsletter--lg{max-width:480px;margin-inline:auto;justify-content:center}
.newsletter--lg input[type=email]{background:#fff;color:var(--ink-900);border-color:var(--slate-300)}
.newsletter--lg input::placeholder{color:var(--slate-500)}

/* ---------- 10. Footer ---------- */
.site-footer{background:var(--ink-950);color:var(--slate-300);padding:80px 0 32px;font-size:15px}
.site-footer a{color:var(--slate-300)}.site-footer a:hover{color:#fff}
.footer-top{display:grid;grid-template-columns:1fr 2.2fr;gap:56px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.1)}
.footer-brand p{margin:20px 0 0;max-width:34ch;color:var(--slate-400)}
.footer-cols{display:grid;grid-template-columns:repeat(5,1fr);gap:24px}
.footer-cols h3{font:600 13px var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:#fff;margin-bottom:16px}
.footer-cols ul{list-style:none;display:grid;gap:10px}
.footer-contact{display:flex;flex-wrap:wrap;gap:12px 32px;padding:28px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:14px}
.footer-contact>*{display:inline-flex;align-items:center;gap:8px}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding-top:28px;font-size:14px;color:var(--slate-400)}
.footer-bottom p{margin:0}
.footer-legal,.footer-social{list-style:none;display:flex;gap:20px;align-items:center}
.footer-social a{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08)}
.footer-social a:hover{background:var(--red-600)}
.footer-legal .linklike{color:var(--slate-300)}

/* ---------- 11. Admin ---------- */
.admin,.blank-page{background:var(--slate-50)}
.admin-bar{display:flex;align-items:center;gap:24px;padding:12px 24px;background:#fff;border-bottom:1px solid var(--slate-200);position:sticky;top:0;z-index:20;flex-wrap:wrap}
.admin-bar__brand{display:flex;align-items:center;gap:10px;font:700 15px var(--font-head);color:var(--ink-900)}
.admin-bar__brand .logo-mark{height:24px;color:var(--red-600)}
.admin-bar__nav{display:flex;gap:4px;margin-right:auto}
.admin-bar__nav a{padding:8px 14px;border-radius:8px;font-weight:500;color:var(--slate-700);display:inline-flex;gap:6px;align-items:center}
.admin-bar__nav a:hover,.admin-bar__nav a.is-active{background:var(--slate-100);color:var(--ink-900)}
.admin-main{max-width:1180px;margin:0 auto;padding:32px 24px 80px;display:grid;gap:24px}
.admin-head{display:flex;justify-content:space-between;align-items:center;gap:16px}
.admin-head h1{font-size:1.8rem;margin:0}.admin-head small{color:var(--slate-500);font-weight:500}
.admin-head h2{margin:0}
.admin-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.kpi{background:#fff;border:1px solid var(--slate-200);border-radius:var(--r-md);padding:20px 24px}
.kpi small{display:block;color:var(--slate-500)}.kpi b{font:800 2.2rem/1.2 var(--font-head);color:var(--ink-900)}
.admin-grid{display:grid;grid-template-columns:2fr 1fr;gap:24px;align-items:start}
.admin .card{padding:24px}
.admin .card h2{font-size:1.15rem;margin-bottom:16px}
.bar{display:grid;grid-template-columns:110px 1fr 28px;gap:12px;align-items:center;margin:0 0 10px;font-size:14px}
.bar i{position:relative;display:block;height:8px;border-radius:99px;background:var(--slate-100);overflow:hidden}.bar i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--red-600);border-radius:inherit}
.bar b{text-align:right;color:var(--ink-900)}
.alert{padding:14px 18px;border-radius:var(--r-sm);font-weight:500}
.alert--ok{background:#DCFCE7;color:#166534}.alert--err{background:#FEE2E2;color:#991B1B}
.filters{display:flex;flex-wrap:wrap;gap:10px}
.filters input,.filters select{width:auto;min-width:160px;padding:9px 12px;font-size:14px}
.tag{display:inline-block;padding:2px 10px;border-radius:999px;background:var(--slate-100);color:var(--slate-700);font:600 12px var(--font-body);text-transform:capitalize}
.status{padding:2px 10px;border-radius:999px;font:600 12px var(--font-body);text-transform:capitalize;background:var(--slate-100)}
.status--new{background:#DBEAFE;color:#1D4ED8}.status--contacted{background:#FEF3C7;color:#92400E}.status--qualified{background:#E0E7FF;color:#4338CA}
.status--won{background:#DCFCE7;color:#166534}.status--lost,.status--spam{background:#FEE2E2;color:#991B1B}
.table--admin td,.table--admin th{padding:12px 14px;font-size:14px}
.dl{display:grid;grid-template-columns:140px 1fr;gap:10px 16px;margin:0 0 24px}
.dl dt{color:var(--slate-500)}.dl dd{margin:0;color:var(--ink-900);word-break:break-word}
.message{background:var(--slate-50);border-radius:var(--r-sm);padding:16px;margin-bottom:16px}
.login{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--ink-900)}
.login__card{width:100%;max-width:400px;background:#fff;border-radius:var(--r-lg);padding:36px;display:grid;gap:18px;box-shadow:var(--shadow-lg)}
.login__brand{display:flex;gap:12px;align-items:center;font:800 1.3rem/1.1 var(--font-head);color:var(--ink-900)}
.login__brand .logo-mark{height:40px;color:var(--red-600)}.login__brand small{font-weight:500;color:var(--slate-500);font-size:.8rem}

/* ---------- 12. Responsive ---------- */
@media (max-width:1100px){
  .footer-top{grid-template-columns:1fr}
  .footer-cols{grid-template-columns:repeat(3,1fr)}
  .mega__inner--products{grid-template-columns:1fr 1fr}
}
@media (max-width:1080px){
  .nav,.site-header__cta{display:none}
  .nav-toggle{display:inline-flex}
}
@media (max-width:960px){
  .section{padding:72px 0}
  .hero{padding-bottom:140px}
  .hero__inner--split,.split,.industry,.prow,.feature-post,.contact-layout,.admin-grid{grid-template-columns:1fr}
  .hero__inner--split{gap:40px}
  .split--flip .split__copy,.prow--flip .prow__copy{order:0}
  .grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .cta-band__inner,.price-teaser{flex-direction:column;align-items:flex-start}
  .post-layout{grid-template-columns:1fr}.toc{position:static}
  .hero-stack{max-width:560px;margin-inline:auto}
  .hero-stack__main{transform:none}
}
@media (max-width:640px){
  .container{padding:0 16px}
  .grid--2,.grid--3,.grid--4,.matrix,.form-grid,.admin-kpis{grid-template-columns:1fr}
  .footer-cols{grid-template-columns:1fr 1fr}
  .hero{padding-top:calc(var(--header-h) + 48px)}
  .hero-stack__phone{width:34%;right:-4px}
  .hero-stack__call{display:none}
  .section-head{margin-bottom:36px}
  .section-head--row{flex-direction:column;align-items:flex-start}
  .form.card{padding:24px}
  .cookie{flex-direction:column;align-items:flex-start}
  .subnav__name span:last-child{display:none}
  .mk{min-height:240px}
  .mk-side{width:34px}
  .dl{grid-template-columns:1fr}
  .stat__value,.stat__suffix{font-size:2.2rem}
  .tabs__list{width:100%;overflow-x:auto}
  .callout{flex-direction:column}
}

/* admin: blog editor */
.post-form{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
.post-form__main,.post-form__side .card{display:grid;gap:18px}
.post-form__side{display:grid;gap:16px}
.post-form .card h2{margin:0}
.editor{border:1px solid var(--slate-300);border-radius:var(--r-sm);background:#fff;overflow:hidden}
.editor__bar{display:flex;flex-wrap:wrap;gap:4px;padding:8px;border-bottom:1px solid var(--slate-200);background:var(--slate-50)}
.editor__bar button{padding:6px 10px;border:1px solid transparent;border-radius:6px;background:none;font:500 13px var(--font-body);color:var(--ink-900)}
.editor__bar button:hover{background:#fff;border-color:var(--slate-300)}
.editor__area{min-height:380px;padding:18px 20px;outline:none;font-size:16px;line-height:1.7}
.editor__area:focus{box-shadow:inset 0 0 0 2px rgba(227,6,19,.15)}
.editor__area img{max-width:100%;height:auto;border-radius:8px}
.cover-preview{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px}
.row-actions{white-space:nowrap}.row-actions>*{display:inline-block;margin-right:10px;vertical-align:middle}
.row-actions form{margin:0}.danger{color:var(--danger)}
@media (max-width:960px){.post-form{grid-template-columns:1fr}}

/* header CTA on the red hero: white pill so it stays visible */
.site-header--dark:not(.is-scrolled):not(.is-open) .site-header__cta{background:#fff;color:var(--ink-900)}
.site-header--dark:not(.is-scrolled):not(.is-open) .site-header__cta:hover{background:var(--ink-900);color:#fff;box-shadow:none}
.site-header--dark:not(.is-scrolled):not(.is-open) .site-header__cta .icon{color:var(--red-600)}
.site-header.is-open{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}

/* sub-menu links land on the sticky bar, skipping the hero */
.subnav{scroll-margin-top:-64px}

/* hero photo: sits under a solid colour wash, behind the moving shapes */
.hero__bg::before{content:"";position:absolute;inset:0;background:var(--hero-img) center/cover no-repeat;opacity:.5}
.hero--product .hero__bg::before{opacity:.5}

/* home hero: technology pillars */
.tech-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:520px;margin-inline:auto}
.tech-card{display:flex;flex-direction:column;gap:6px;padding:22px;border-radius:var(--r-md);background:#fff;color:var(--slate-700);box-shadow:var(--shadow-lg);transition:transform .25s}
.tech-card:hover{transform:translateY(-4px);color:var(--slate-700)}
.tech-card b{font:700 1.05rem/1.25 var(--font-head);color:var(--ink-900);margin-top:8px}
.tech-card small{font-size:13.5px;line-height:1.45;color:var(--slate-500)}
.tech-card--2,.tech-card--4{transform:translateY(28px)}
.tech-card--2:hover,.tech-card--4:hover{transform:translateY(24px)}
.tech-cards{padding-bottom:28px}
@media (max-width:640px){.tech-cards{grid-template-columns:1fr}.tech-card--2,.tech-card--4{transform:none}}
.code-tabs{flex-wrap:wrap}

/* NDPC badge */
.ndpc{display:inline-flex;align-items:center;gap:14px;padding:12px 18px 12px 14px;border-radius:14px;background:#fff;border:1px solid var(--slate-200);box-shadow:var(--shadow-sm);text-align:left}
.ndpc img{height:52px;width:auto}
.ndpc__seal{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#E8F5EC;color:#15803D;flex:none}
.ndpc__seal .icon{width:26px;height:26px}
.ndpc__text{display:flex;flex-direction:column;line-height:1.3}
.ndpc__text b{font:800 15px var(--font-head);color:var(--ink-900)}
.ndpc__text small{font-size:12px;color:var(--slate-500)}
.ndpc--dark{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);box-shadow:none}
.ndpc--dark .ndpc__text b{color:#fff}.ndpc--dark .ndpc__text small{color:var(--slate-400)}
.ndpc--dark .ndpc__seal{background:rgba(34,197,94,.16);color:#4ADE80}
.footer-ndpc{padding:24px 0 0}
.prose .ndpc{margin-bottom:20px}

.ndpc--img{padding:0;background:none;border:0;box-shadow:none}
.ndpc--img img{height:96px;width:96px;object-fit:contain}
.footer-ndpc{padding:16px 0 0}
.center-cta .ndpc--img img{height:110px;width:110px}

/* NDPC badge: smaller, inside the security card and in the footer with text */
.ndpc--img img{height:56px;width:56px}
.ndpc--img{gap:12px}
.footer-ndpc .ndpc--img img{height:40px;width:40px}
.footer-ndpc .ndpc__text b{font-size:14px}
.footer-ndpc .ndpc__text small{font-size:11.5px}
.tile__badge{width:52px;height:52px;object-fit:contain;display:block;margin-left:-4px}

/* admin: passwords */
.pw-field{display:flex;gap:8px;align-items:center}.pw-field input{flex:1;font-family:var(--font-mono);font-size:13px}
.pw-reveal code{display:block;word-break:break-all;font-size:13px;background:#fff;border:1px solid #BBF7D0;border-radius:6px;padding:10px 12px;flex:1}
.pw-reveal__row{display:flex;gap:10px;align-items:center;margin-top:10px}

/* show/hide password */
.pw-wrap{position:relative;display:block;flex:1;min-width:0}
.pw-wrap input{padding-right:64px}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--red-600);font:600 13px var(--font-body);padding:6px 10px;cursor:pointer;border-radius:6px}
.pw-toggle:hover{background:var(--slate-100)}

.mail-status{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}.mail-status form{margin:0}

/* client logos */
.clients{padding:72px 0 16px}
.clients .marquee-title{margin-bottom:28px;font-weight:600;color:var(--slate-500);letter-spacing:.02em}
.marquee{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{gap:64px;align-items:center;animation-duration:45s}
.client-logo{height:76px;width:auto;max-width:none;flex:none;filter:none;opacity:1;border-radius:8px}
.marquee img.client-logo,.marquee img.client-logo:hover{height:76px;width:auto;filter:none;opacity:1}

.clients--after{padding:0 0 88px}