/* Serviciing — serviciing.com
   Design system + components. Edit here, rebuild with: python3 build.py
*/

/* ============ tokens ============ */
:root{
  --brand:#26597C; --brand-600:#1F4B69; --brand-700:#17384F;
  --brand-50:#EFF4F8; --brand-100:#DCE7EF; --brand-200:#B9CFDF;
  --ink:#1C1F22; --ink-2:#33373B; --body:#444142; --muted:#6D6D6D;
  --line:#E9E9EC; --line-2:#F1F1F3;
  --bg:#FFFFFF; --bg-soft:#FAFBFC; --bg-warm:#F3F7FA;
  --green:#16A34A; --amber:#D97706; --blue:#2563EB;
  --r-s:10px; --r:14px; --r-l:20px; --r-xl:28px;
  --sh-1:0 1px 2px rgba(28, 31, 34,.05), 0 1px 3px rgba(28, 31, 34,.04);
  --sh-2:0 2px 4px rgba(28, 31, 34,.04), 0 8px 24px rgba(28, 31, 34,.06);
  --sh-3:0 4px 8px rgba(28, 31, 34,.04), 0 24px 56px rgba(28, 31, 34,.10);
  --sh-brand:0 10px 30px rgba(38, 89, 124,.28);
  --maxw:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:88px}
body{
  margin:0; background:var(--bg); color:var(--body);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:16.5px; line-height:1.65; letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
h1,h2,h3,h4{color:var(--ink); margin:0; font-weight:700; letter-spacing:-.032em; line-height:1.1}
p{margin:0}
::selection{background:var(--brand-200); color:var(--ink)}
:focus-visible{outline:2.5px solid var(--brand); outline-offset:3px; border-radius:6px}

/* ============ layout ============ */
.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px}
.section{padding:104px 0; position:relative}
.section--soft{background:var(--bg-soft); border-block:1px solid var(--line-2)}
.section--warm{background:linear-gradient(180deg,#FFFFFF 0%,var(--bg-warm) 42%,var(--bg-warm) 70%,#FFFFFF 100%)}
.center{text-align:center}
.grid{display:grid; gap:20px}

/* ============ type ============ */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:600; letter-spacing:.10em; text-transform:uppercase;
  color:var(--brand-700); background:var(--brand-50); border:1px solid var(--brand-100);
  padding:7px 14px; border-radius:999px;
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--brand);
  box-shadow:0 0 0 0 rgba(38, 89, 124,.6); animation:ping 2.2s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(38, 89, 124,.5)}70%{box-shadow:0 0 0 7px rgba(38, 89, 124,0)}100%{box-shadow:0 0 0 0 rgba(38, 89, 124,0)}}
h1,.h1{font-size:clamp(2.35rem,5.4vw,4.05rem); font-weight:800; letter-spacing:-.042em; line-height:1.03}
h2,.h2{font-size:clamp(1.85rem,3.6vw,2.85rem); letter-spacing:-.038em; line-height:1.1}
h3,.h3{font-size:1.14rem; letter-spacing:-.022em; line-height:1.35}
.lead{font-size:clamp(1.02rem,1.55vw,1.19rem); line-height:1.62; color:var(--body)}
.sec-head{max-width:660px; margin-inline:auto; margin-bottom:56px}
.sec-head p{margin-top:16px}
.sec-head h2{margin-top:20px}
.small{font-size:14px}
.tiny{font-size:12.5px}
em.hl{font-style:normal; color:var(--brand); }
.strike{position:relative; white-space:nowrap}
.strike::after{content:""; position:absolute; left:-2px; right:-2px; top:56%; height:2px;
  background:var(--brand); transform:scaleX(0); transform-origin:left; border-radius:2px;
  transition:transform .7s var(--ease) .3s}
.reveal.in .strike::after{transform:scaleX(1)}

/* ============ buttons ============ */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-weight:600; font-size:15.2px; letter-spacing:-.012em; border-radius:11px;
  padding:13px 22px; border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform .18s var(--ease), box-shadow .22s var(--ease), background .18s, border-color .18s, color .18s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--brand); color:#fff; box-shadow:var(--sh-brand)}
.btn-primary:hover{background:var(--brand-600); box-shadow:0 14px 34px rgba(38, 89, 124,.34); transform:translateY(-1.5px)}
.btn-ghost{background:#fff; color:var(--ink); border-color:var(--line); box-shadow:var(--sh-1)}
.btn-ghost:hover{border-color:#D7D7DC; box-shadow:var(--sh-2); transform:translateY(-1.5px)}
.btn-lg{padding:15.5px 28px; font-size:16px; border-radius:12px}
.btn-sm{padding:10px 17px; font-size:14.2px; border-radius:9px}
.btn svg{width:17px;height:17px; flex:none}
.btn-primary .arrow{transition:transform .22s var(--ease)}
.btn-primary:hover .arrow{transform:translateX(3px)}

/* ============ header ============ */
.header{position:fixed; inset:0 0 auto 0; z-index:80; background:rgba(255,255,255,.72);
  backdrop-filter:saturate(1.6) blur(14px); -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid transparent; transition:border-color .25s, box-shadow .25s, background .25s}
.header.scrolled{border-bottom-color:var(--line); box-shadow:0 1px 20px rgba(28, 31, 34,.05); background:rgba(255,255,255,.9)}
.nav{display:flex; align-items:center; gap:14px; height:70px}
.nav .brand{display:flex; align-items:center; flex:none; margin-right:8px}
.nav .brand img{height:34px; width:auto}
.nav-links{display:flex; align-items:center; gap:2px; margin-left:14px}
.nav-links a{font-size:14.8px; font-weight:500; color:var(--ink-2); padding:8px 13px; border-radius:8px;
  transition:background .16s, color .16s}
.nav-links a:hover{background:var(--line-2); color:var(--ink)}
.nav-cta{margin-left:auto; display:flex; align-items:center; gap:10px}
.nav-cta .link{font-size:14.8px; font-weight:500; color:var(--ink-2); padding:8px 12px}
.nav-cta .link:hover{color:var(--brand)}
.burger{display:none; margin-left:auto; width:42px;height:42px; border-radius:10px; border:1px solid var(--line);
  background:#fff; align-items:center; justify-content:center; cursor:pointer}
.burger span{display:block; width:17px; height:1.8px; background:var(--ink); border-radius:2px; position:relative; transition:.25s var(--ease)}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:17px; height:1.8px; background:var(--ink); border-radius:2px; transition:.25s var(--ease)}
.burger span::before{top:-5.5px} .burger span::after{top:5.5px}
.burger.open span{background:transparent}
.burger.open span::before{top:0; transform:rotate(45deg)}
.burger.open span::after{top:0; transform:rotate(-45deg)}
.mobile-menu{display:none; border-top:1px solid var(--line); background:#fff; padding:12px 24px 22px}
.mobile-menu a{display:block; padding:13px 4px; font-weight:500; color:var(--ink-2); border-bottom:1px solid var(--line-2)}
.mobile-menu .btn{width:100%; margin-top:16px}
.mobile-menu.show{display:block}

/* ============ hero ============ */
.hero{padding:150px 0 88px; position:relative; overflow:hidden}
.hero::before{content:""; position:absolute; z-index:-2; top:-320px; left:50%; transform:translateX(-50%);
  width:1250px; height:840px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(38, 89, 124,.115), rgba(38, 89, 124,.03) 55%, transparent 72%)}
.hero::after{content:""; position:absolute; inset:0; z-index:-3;
  background-image:linear-gradient(var(--line-2) 1px, transparent 1px), linear-gradient(90deg, var(--line-2) 1px, transparent 1px);
  background-size:56px 56px; opacity:.55;
  -webkit-mask-image:radial-gradient(ellipse 78% 62% at 50% 32%, #000 30%, transparent 76%);
  mask-image:radial-gradient(ellipse 78% 62% at 50% 32%, #000 30%, transparent 76%)}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); gap:56px; align-items:center}
.hero h1{margin:22px 0 0}
.hero .lead{margin-top:22px; max-width:545px}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.hero-note{display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:26px; color:var(--muted); font-size:14px}
.hero-note span{display:inline-flex; align-items:center; gap:7px}
.hero-note svg{width:15px;height:15px; color:var(--green); flex:none}
/* ============ phone mockup ============ */
.hero-visual{position:relative; display:flex; justify-content:center; align-items:center; min-height:560px}
.phone{position:relative; width:290px; height:588px; border-radius:42px; background:#1C1F22; padding:9px;
  box-shadow:0 40px 90px rgba(28, 31, 34,.24), 0 8px 24px rgba(28, 31, 34,.10), inset 0 0 0 1.5px #2A2C30;
  z-index:2; animation:floaty 7s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
.phone::before{content:""; position:absolute; top:9px; left:50%; transform:translateX(-50%);
  width:96px; height:23px; background:#1C1F22; border-radius:0 0 14px 14px; z-index:5}
.screen{width:100%; height:100%; border-radius:34px; background:#fff; overflow:hidden; position:relative;
  display:flex; flex-direction:column}
.ph-top{padding:34px 18px 12px; display:flex; align-items:center; justify-content:space-between}
.ph-top .who{display:flex; align-items:center; gap:9px}
.ph-av{width:31px;height:31px;border-radius:50%;background:linear-gradient(135deg,var(--brand),#4A87B0);
  display:grid;place-items:center;color:#fff;font-size:12px;font-weight:700}
.ph-top .nm{font-size:12.5px; font-weight:700; color:var(--ink); line-height:1.25}
.ph-top .rl{font-size:10.5px; color:var(--muted); line-height:1.25}
.ph-bell{width:29px;height:29px;border-radius:9px;background:var(--bg-soft);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--ink-2)}
.ph-bell svg{width:14px;height:14px}
.ph-body{padding:6px 18px 18px; flex:1; display:flex; flex-direction:column; gap:11px}
.ph-card{border:1px solid var(--line); border-radius:15px; padding:13px; background:#fff}
.ph-job{background:linear-gradient(140deg,#1F2427,#1C1F22); border:none; color:#fff; position:relative; overflow:hidden}
.ph-job::after{content:""; position:absolute; right:-32px; top:-32px; width:110px;height:110px;border-radius:50%;
  background:radial-gradient(closest-side, rgba(38, 89, 124,.42), transparent)}
.ph-job .tag{font-size:9.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#9EC3DC}
.ph-job .cl{font-size:14.5px; font-weight:700; margin-top:5px; letter-spacing:-.02em}
.ph-job .ad{font-size:11px; color:#9AA0A6; margin-top:3px; line-height:1.45}
.selfie{position:relative; height:154px; border-radius:15px; overflow:hidden;
  background:linear-gradient(160deg,#EDEAE7,#DCD6D1)}
.selfie .figure{position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:112px; height:118px}
.selfie .head{position:absolute; left:50%; top:6px; transform:translateX(-50%); width:46px;height:46px;
  border-radius:50%; background:#C9BFB6}
.selfie .torso{position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:104px;height:62px;
  border-radius:52px 52px 0 0; background:#B9AFA6}
.frame{position:absolute; inset:15px; border-radius:11px}
.frame i{position:absolute; width:20px;height:20px; border:2.2px solid rgba(255,255,255,.95); border-radius:3px}
.frame i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0;border-top-left-radius:7px}
.frame i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0;border-top-right-radius:7px}
.frame i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0;border-bottom-left-radius:7px}
.frame i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0;border-bottom-right-radius:7px}
.scanline{position:absolute; left:15px; right:15px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--brand),transparent);
  box-shadow:0 0 14px rgba(38, 89, 124,.75); animation:scan 3.1s ease-in-out infinite}
@keyframes scan{0%,100%{top:20px;opacity:.25}50%{top:126px;opacity:1}}
.selfie .badge{position:absolute; left:11px; bottom:11px; display:inline-flex; align-items:center; gap:5px;
  background:rgba(28, 31, 34,.72); backdrop-filter:blur(6px); color:#fff; font-size:9.5px; font-weight:600;
  padding:5px 9px; border-radius:999px}
.selfie .badge i{width:5px;height:5px;border-radius:50%;background:#4ADE80;animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.25}}
.ph-rows{display:flex; flex-direction:column; gap:7px}
.ph-row{display:flex; align-items:center; gap:9px; font-size:11.5px; color:var(--ink-2)}
.ph-row .ic{width:25px;height:25px;border-radius:8px;background:var(--brand-50);color:var(--brand-700);
  display:grid;place-items:center;flex:none}
.ph-row .ic svg{width:13px;height:13px}
.ph-row b{color:var(--ink); font-weight:600}
.ph-row .ok{margin-left:auto; color:var(--green)}
.ph-row .ok svg{width:14px;height:14px}
.ph-cta{margin-top:auto; background:var(--brand); color:#fff; border-radius:14px; padding:14px;
  text-align:center; font-weight:700; font-size:14.5px; letter-spacing:-.015em;
  box-shadow:0 10px 24px rgba(38, 89, 124,.34); position:relative; overflow:hidden}
.ph-cta::after{content:""; position:absolute; inset:0; background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.32) 48%,transparent 66%);
  transform:translateX(-100%); animation:sheen 3.6s infinite}
@keyframes sheen{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}
/* floating chips */
.chip-f{position:absolute; z-index:3; background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:11px 13px; box-shadow:var(--sh-3); display:flex; align-items:center; gap:10px}
.chip-f .ic{width:32px;height:32px;border-radius:10px; display:grid;place-items:center; flex:none}
.chip-f .ic svg{width:16px;height:16px}
.chip-f .t{font-size:12.5px; font-weight:700; color:var(--ink); line-height:1.25; letter-spacing:-.015em}
.chip-f .s{font-size:11px; color:var(--muted); line-height:1.3; margin-top:1px}
.chip-a{top:60px; left:-14px; animation:floaty 6s ease-in-out infinite .5s}
.chip-b{bottom:128px; right:-24px; animation:floaty 6.6s ease-in-out infinite 1.2s}
.chip-c{bottom:24px; left:-4px; animation:floaty 7.4s ease-in-out infinite .2s}
.ic-green{background:#ECFDF3;color:var(--green)} .ic-blue{background:#EFF6FF;color:var(--blue)}
.ic-brand{background:var(--brand-50);color:var(--brand-700)}

/* ============ logos / industries ============ */
.tbar{padding:34px 0 40px; border-top:1px solid var(--line-2)}
.tbar p{text-align:center; font-size:12.5px; font-weight:600; letter-spacing:.10em; text-transform:uppercase; color:var(--muted)}
.chips{display:flex; flex-wrap:wrap; justify-content:center; gap:9px; margin-top:20px}
.chips span{font-size:13.8px; font-weight:500; color:var(--ink-2); background:var(--bg-soft);
  border:1px solid var(--line); border-radius:999px; padding:8px 15px; transition:.18s var(--ease)}
.chips span:hover{border-color:var(--brand-200); background:var(--brand-50); color:var(--brand-700); transform:translateY(-2px)}

/* ============ problem ============ */
.prob-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:8px}
.prob{border:1px solid var(--line); border-radius:var(--r-l); padding:28px; background:#fff; box-shadow:var(--sh-1)}
.prob .n{font-size:2.5rem; font-weight:800; letter-spacing:-.045em; color:var(--brand); line-height:1}
.prob h3{margin:14px 0 8px}
.prob p{font-size:14.8px; line-height:1.6}
.prob .src{margin-top:14px; font-size:11.5px; color:var(--muted)}

/* ============ features ============ */
.feat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.feat{position:relative; border:1px solid var(--line); border-radius:var(--r-l); padding:26px 24px 24px;
  background:#fff; transition:transform .26s var(--ease), box-shadow .26s var(--ease), border-color .26s}
.feat:hover{transform:translateY(-4px); box-shadow:var(--sh-3); border-color:#DFDFE4}
.feat .ic{width:42px;height:42px; border-radius:12px; background:var(--brand-50); color:var(--brand);
  display:grid; place-items:center; margin-bottom:18px; border:1px solid var(--brand-100);
  transition:background .26s, color .26s}
.feat:hover .ic{background:var(--brand); color:#fff; border-color:var(--brand)}
.feat .ic svg{width:20px;height:20px}
.feat h3{margin-bottom:9px}
.feat p{font-size:14.6px; line-height:1.6}
.feat ul{list-style:none; margin:15px 0 0; padding:0; display:flex; flex-direction:column; gap:7px}
.feat li{position:relative; padding-left:19px; font-size:13.9px; color:var(--body); line-height:1.5}
.feat li::before{content:""; position:absolute; left:0; top:8px; width:6px;height:6px;border-radius:50%;
  background:var(--brand-200)}
.feat.wide{grid-column:span 2}
/* ============ how it works ============ */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; margin-top:8px}
.steps::before{content:""; position:absolute; top:26px; left:11%; right:11%; height:1.5px;
  background:repeating-linear-gradient(90deg,var(--line) 0 8px, transparent 8px 16px)}
.step{position:relative; padding:0 18px; text-align:center}
.step .num{width:52px;height:52px;border-radius:50%; margin:0 auto 20px; background:#fff;
  border:1.5px solid var(--line); display:grid; place-items:center; font-weight:800; font-size:17px;
  color:var(--ink); position:relative; z-index:2; box-shadow:var(--sh-1); transition:.3s var(--ease)}
.step:hover .num{background:var(--brand); border-color:var(--brand); color:#fff; box-shadow:var(--sh-brand); transform:scale(1.06)}
.step h3{margin-bottom:8px}
.step p{font-size:14.6px; line-height:1.6}

/* ============ dashboard mockup ============ */
.dash-split{display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:56px; align-items:center}
.dash{border:1px solid var(--line); border-radius:var(--r-xl); background:#fff; box-shadow:var(--sh-3); overflow:hidden}
.dash-bar{display:flex; align-items:center; gap:7px; padding:13px 16px; background:var(--bg-soft); border-bottom:1px solid var(--line)}
.dash-bar i{width:10px;height:10px;border-radius:50%;background:#E1E1E5}
.dash-bar i:first-child{background:#FF5F57} .dash-bar i:nth-child(2){background:#FEBC2E} .dash-bar i:nth-child(3){background:#28C840}
.dash-bar .url{margin-left:12px; font-size:11.5px; color:var(--muted); background:#fff; border:1px solid var(--line);
  border-radius:7px; padding:4px 12px}
.dash-in{padding:22px}
.dash-head{display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap}
.dash-head h4{margin:0; font-size:15.5px; font-weight:700; color:var(--ink); letter-spacing:-.02em}
.dash-head .sub{font-size:11.5px; color:var(--muted); margin-top:2px}
.pill-live{display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; color:var(--green);
  background:#ECFDF3; border:1px solid #C7F0D6; padding:4px 10px; border-radius:999px}
.pill-live i{width:5px;height:5px;border-radius:50%;background:var(--green); animation:blink 1.5s infinite}
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:11px; margin-top:16px}
.kpi{border:1px solid var(--line); border-radius:13px; padding:13px}
.kpi .l{font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.kpi .v{font-size:1.42rem; font-weight:800; color:var(--ink); letter-spacing:-.035em; margin-top:5px; line-height:1}
.kpi .d{font-size:10.5px; margin-top:5px; font-weight:600}
.up{color:var(--green)} .dn{color:var(--brand)}
.bars{display:flex; align-items:flex-end; gap:8px; height:96px; margin-top:20px; padding:0 2px}
.bars .b{flex:1; border-radius:6px 6px 3px 3px; background:var(--brand-100); position:relative;
  transform-origin:bottom; animation:grow .9s var(--ease) both}
.bars .b.on{background:linear-gradient(180deg,var(--brand),#4A87B0)}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.bar-l{display:flex; gap:8px; margin-top:8px}
.bar-l span{flex:1; text-align:center; font-size:10px; color:var(--muted)}
.tbl{margin-top:20px; border:1px solid var(--line); border-radius:13px; overflow:hidden}
.tr{display:grid; grid-template-columns:1.6fr 1fr .9fr .8fr; gap:10px; padding:11px 14px; align-items:center;
  border-bottom:1px solid var(--line-2); font-size:12.5px}
.tr:last-child{border-bottom:0}
.tr>span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tr.head{background:var(--bg-soft); font-size:10.5px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--muted)}
.emp{display:flex; align-items:center; gap:9px; min-width:0}
.emp .av{width:26px;height:26px;border-radius:50%; display:grid;place-items:center; color:#fff;
  font-size:10px; font-weight:700; flex:none}
.emp .nm{font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.st{display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:600; padding:3px 9px; border-radius:999px}
.st-on{background:#ECFDF3;color:#15803D} .st-tr{background:#EFF6FF;color:#1D4ED8} .st-off{background:#F4F4F6;color:#6B7280}
.st i{width:4.5px;height:4.5px;border-radius:50%;background:currentColor}
.chk{display:flex; flex-direction:column; gap:14px; margin-top:30px}
.chk .item{display:flex; gap:13px}
.chk .tick{width:23px;height:23px;border-radius:7px;background:var(--brand-50);color:var(--brand);
  display:grid;place-items:center;flex:none;margin-top:2px; border:1px solid var(--brand-100)}
.chk .tick svg{width:13px;height:13px}
.chk b{display:block; color:var(--ink); font-weight:650; font-size:15px; letter-spacing:-.018em}
.chk p{font-size:14.4px; margin-top:3px; line-height:1.55}

/* ============ fraud band ============ */
.band{background:var(--brand-50); border:1px solid var(--brand-100); border-radius:var(--r-xl); padding:44px}
.band-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:26px; margin-top:32px}
.band-i .ic{width:38px;height:38px;border-radius:11px;background:#fff;border:1px solid var(--brand-100);
  color:var(--brand); display:grid;place-items:center; margin-bottom:14px}
.band-i .ic svg{width:18px;height:18px}
.band-i b{display:block; color:var(--ink); font-size:15px; letter-spacing:-.02em; margin-bottom:6px}
.band-i p{font-size:14px; line-height:1.55}

/* ============ pricing ============ */
.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:start}
.plan{border:1px solid var(--line); border-radius:var(--r-xl); background:#fff; padding:30px 26px;
  transition:transform .26s var(--ease), box-shadow .26s var(--ease)}
.plan:hover{transform:translateY(-4px); box-shadow:var(--sh-3)}
.plan.pop{border:1.6px solid var(--brand); box-shadow:0 20px 50px rgba(38, 89, 124,.14); position:relative; padding-top:34px}
.plan.pop::before{content:"Most popular"; position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:var(--brand); color:#fff; font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  padding:5px 14px; border-radius:999px; box-shadow:var(--sh-brand); white-space:nowrap}
.plan .pn{font-size:16px; font-weight:700; color:var(--ink); letter-spacing:-.02em}
.plan .pd{font-size:13.6px; margin-top:6px; min-height:40px; line-height:1.5}
.plan .amt{display:flex; align-items:baseline; gap:5px; margin:16px 0 4px}
.plan .amt .c{font-size:1.5rem; font-weight:700; color:var(--ink); letter-spacing:-.03em}
.plan .amt .v{font-size:2.75rem; font-weight:800; color:var(--ink); letter-spacing:-.05em; line-height:1}
.plan .amt .p{font-size:13.5px; color:var(--muted); font-weight:500}
.plan .bill{font-size:12.5px; color:var(--muted)}
.plan .btn{width:100%; margin:22px 0 22px}
.plan ul{list-style:none; margin:0; padding:22px 0 0; border-top:1px solid var(--line-2);
  display:flex; flex-direction:column; gap:11px}
.plan li{display:flex; gap:10px; font-size:14.2px; line-height:1.5; color:var(--body)}
.plan li svg{width:16px;height:16px;color:var(--brand); flex:none; margin-top:3px}
.plan li b{color:var(--ink); font-weight:600}
.price-note{text-align:center; margin-top:28px; font-size:13.5px; color:var(--muted)}
/* ============ trust / security ============ */
.sec-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.sec-i{display:flex; gap:14px; padding:22px; border:1px solid var(--line); border-radius:var(--r-l); background:#fff}
.sec-i .ic{width:36px;height:36px;border-radius:10px;background:var(--bg-soft);border:1px solid var(--line);
  color:var(--ink-2); display:grid;place-items:center;flex:none}
.sec-i .ic svg{width:17px;height:17px}
.sec-i b{display:block;color:var(--ink); font-size:14.8px; letter-spacing:-.018em}
.sec-i p{font-size:13.8px; margin-top:4px; line-height:1.55}

/* ============ FAQ ============ */
.faq{max-width:820px; margin-inline:auto; border-top:1px solid var(--line)}
.q{border-bottom:1px solid var(--line)}
.q button{width:100%; display:flex; align-items:center; gap:18px; text-align:left; background:none;
  border:0; padding:22px 4px; cursor:pointer; font-size:16.2px; font-weight:600; color:var(--ink);
  letter-spacing:-.022em; transition:color .18s}
.q button:hover{color:var(--brand)}
.q .pm{margin-left:auto; width:26px;height:26px; border-radius:50%; border:1px solid var(--line);
  display:grid; place-items:center; flex:none; position:relative; transition:.26s var(--ease)}
.q .pm::before,.q .pm::after{content:""; position:absolute; background:var(--ink-2); border-radius:2px; transition:.26s var(--ease)}
.q .pm::before{width:11px;height:1.7px} .q .pm::after{width:1.7px;height:11px}
.q.open .pm{background:var(--brand); border-color:var(--brand); transform:rotate(90deg)}
.q.open .pm::before,.q.open .pm::after{background:#fff}
.q.open .pm::after{opacity:0}
.q .a{max-height:0; overflow:hidden; transition:max-height .38s var(--ease)}
.q .a p{padding:0 56px 24px 4px; font-size:15.2px; line-height:1.68}

/* ============ CTA + form ============ */
.cta{background:linear-gradient(160deg,#F6FAFC 0%,#E4EEF5 100%); border:1px solid var(--brand-100);
  border-radius:var(--r-xl); padding:52px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,440px);
  gap:52px; align-items:start; position:relative; overflow:hidden}
.cta::before{content:""; position:absolute; right:-120px; top:-120px; width:420px;height:420px;border-radius:50%;
  background:radial-gradient(closest-side, rgba(38, 89, 124,.14), transparent)}
.cta-l{position:relative; z-index:1}
.cta-l h2{margin:18px 0 16px}
.cta-list{list-style:none; margin:26px 0 0; padding:0; display:flex; flex-direction:column; gap:12px}
.cta-list li{display:flex; gap:11px; font-size:15px; color:var(--ink-2); align-items:flex-start}
.cta-list svg{width:18px;height:18px;color:var(--brand);flex:none;margin-top:3px}
.form{background:#fff; border:1px solid var(--line); border-radius:var(--r-l); padding:26px; box-shadow:var(--sh-2);
  position:relative; z-index:1}
.form h3{font-size:17px; margin-bottom:4px}
.form .fsub{font-size:13.5px; color:var(--muted); margin-bottom:20px}
.fld{margin-bottom:14px}
.fld label{display:block; font-size:12.8px; font-weight:600; color:var(--ink-2); margin-bottom:6px}
.fld input,.fld select,.fld textarea{width:100%; padding:11px 13px; border:1px solid var(--line);
  border-radius:10px; background:#fff; font-size:16px; color:var(--ink); transition:border-color .18s, box-shadow .18s}
.fld input::placeholder,.fld textarea::placeholder{color:#AAAFB6}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:0; border-color:var(--brand);
  box-shadow:0 0 0 3.5px rgba(38, 89, 124,.13)}
.fld textarea{resize:vertical; min-height:76px}
.frow{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.form .btn{width:100%; margin-top:6px}
.form .legal{font-size:11.8px; color:var(--muted); margin-top:13px; text-align:center; line-height:1.5}
.done{display:none; text-align:center; padding:34px 10px}
.done .ok{width:54px;height:54px;border-radius:50%;background:#ECFDF3;color:var(--green);
  display:grid;place-items:center; margin:0 auto 18px}
.done .ok svg{width:26px;height:26px}
.done h3{margin-bottom:8px}
.done p{font-size:14.5px}
.form.sent .fbody{display:none} .form.sent .done{display:block}

/* ============ footer ============ */
.footer{background:#1C1F22; color:#9AA0A6; padding:66px 0 30px; margin-top:0}
.f-grid{display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:40px}
.footer img{height:34px; width:auto}
.footer .fp{font-size:14px; line-height:1.65; margin-top:18px; max-width:290px; color:#8A9096}
.f-col h5{color:#fff; font-size:12.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; margin:0 0 16px}
.f-col a{display:block; font-size:14.2px; padding:6px 0; color:#9AA0A6; transition:color .16s}
.f-col a:hover{color:var(--brand)}
.f-bot{margin-top:48px; padding-top:24px; border-top:1px solid #33373B; display:flex; flex-wrap:wrap;
  gap:12px; justify-content:space-between; font-size:13.2px; color:#8A9096}
.f-bot .l{display:flex; gap:22px; flex-wrap:wrap}
.f-bot a:hover{color:#fff}

/* ============ reveal ============ */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition-duration:.01ms !important}
  .reveal{opacity:1; transform:none}
}

/* ============ responsive ============ */
@media (max-width:1040px){
  .hero-grid{grid-template-columns:1fr; gap:56px}
  .hero .lead{max-width:640px}
  .hero-visual{min-height:auto}
  .dash-split{grid-template-columns:1fr; gap:40px}
  .cta{grid-template-columns:1fr; gap:36px; padding:40px}
  .band-grid{grid-template-columns:repeat(2,1fr); gap:28px}
  .feat-grid{grid-template-columns:repeat(2,1fr)}
  .feat.wide{grid-column:span 2}
  .sec-grid{grid-template-columns:repeat(2,1fr)}
}
/* Header has brand + 5 links + phone + Login + Book a demo. Below ~1120px that
   overflows, so the phone number drops out first — it is still in the mobile
   menu and the footer. Login and Book a demo are the ones that must survive. */
@media (max-width:1120px){
  .nav-cta .link{display:none}
}
@media (max-width:980px){
  .nav-links a{padding:8px 10px; font-size:14.2px}
}
@media (max-width:900px){
  .nav-links{display:none} .nav-cta{display:none} .burger{display:flex}
  .steps{grid-template-columns:repeat(2,1fr); gap:38px 0} .steps::before{display:none}
  .price-grid{grid-template-columns:1fr; max-width:460px; margin-inline:auto}
  .plan.pop{order:-1}
  .prob-grid{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr 1fr; gap:34px}
}
@media (max-width:680px){
  body{font-size:16px}
  .section{padding:74px 0}
  .hero{padding:118px 0 64px}
  .wrap{padding-inline:18px}
  .feat-grid{grid-template-columns:1fr} .feat.wide{grid-column:span 1}
  .sec-grid{grid-template-columns:1fr}
  .band{padding:28px} .band-grid{grid-template-columns:1fr; gap:24px}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .tr{grid-template-columns:1.4fr .9fr .8fr; font-size:11.5px} .tr .hide-m{display:none}
  .cta{padding:26px 20px} .form{padding:20px}
  .frow{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr; gap:30px} .step{padding:0; text-align:left; display:grid;
    grid-template-columns:52px 1fr; gap:0 16px; align-items:start}
  .step .num{margin:0} .step h3{grid-column:2; margin-top:12px} .step p{grid-column:2}
  .chip-a{left:-6px; top:30px; transform:scale(.9)} .chip-b{right:-8px; transform:scale(.9)}
  .chip-c{left:-6px; transform:scale(.9)}
  .hero-actions .btn{width:100%}
  .q .a p{padding-right:12px}
}
@media (max-width:400px){ .chip-b,.chip-c{display:none} }

/* ============================================================
   MULTI-PAGE COMPONENTS
   ============================================================ */

/* --- inner page hero --- */
.phero{padding:132px 0 60px; position:relative; overflow:hidden;
  background:linear-gradient(180deg,#FFF 0%,var(--bg-warm) 100%); border-bottom:1px solid var(--line)}
.phero::after{content:""; position:absolute; inset:0; z-index:-1;
  background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
  background-size:56px 56px; opacity:.5;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 0%, #000 20%, transparent 72%);
  mask-image:radial-gradient(ellipse 70% 70% at 50% 0%, #000 20%, transparent 72%)}
.phero h1{margin:18px 0 0; font-size:clamp(2.05rem,4.4vw,3.25rem)}
.phero .lead{margin-top:18px; max-width:660px}
.phero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
.phero.center{text-align:center}
.phero.center .lead{margin-inline:auto}
.phero.center .phero-actions{justify-content:center}
.phero.center .crumbs{justify-content:center}

/* --- breadcrumbs --- */
.crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:7px; font-size:13.2px; color:var(--muted); margin-bottom:6px}
.crumbs a{color:var(--muted); transition:color .16s}
.crumbs a:hover{color:var(--brand)}
.crumbs .sep{opacity:.5}
.crumbs [aria-current]{color:var(--ink-2); font-weight:500}

/* --- answer box (AEO: front-loaded direct answer) --- */
.answer{border:1px solid var(--brand-100); background:var(--brand-50); border-radius:var(--r-l);
  padding:24px 26px; margin:0 0 34px; position:relative}
.answer .lbl{display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--brand-700); margin-bottom:10px}
.answer .lbl svg{width:14px;height:14px}
.answer p{font-size:16.4px; line-height:1.62; color:var(--ink-2)}
.answer p+p{margin-top:12px}
.answer p strong{color:var(--ink); font-weight:650}

/* --- prose --- */
.prose{max-width:760px}
.prose>*+*{margin-top:20px}
.prose h2{font-size:clamp(1.5rem,2.6vw,1.95rem); margin-top:52px}
.prose h3{font-size:1.22rem; margin-top:34px}
.prose p{font-size:16.4px; line-height:1.72}
.prose ul,.prose ol{padding-left:0; margin-left:0; list-style:none; display:flex; flex-direction:column; gap:11px}
.prose ul li{position:relative; padding-left:26px; font-size:16px; line-height:1.65}
.prose ul li::before{content:""; position:absolute; left:7px; top:11px; width:7px;height:7px;border-radius:50%;background:var(--brand-200)}
.prose ol{counter-reset:n}
.prose ol li{position:relative; padding-left:38px; font-size:16px; line-height:1.65; counter-increment:n}
.prose ol li::before{content:counter(n); position:absolute; left:0; top:1px; width:25px;height:25px;border-radius:50%;
  background:var(--brand-50); border:1px solid var(--brand-100); color:var(--brand-700);
  font-size:12.5px; font-weight:700; display:grid; place-items:center}
.prose strong{color:var(--ink); font-weight:650}
.prose a:not(.btn){color:var(--brand-700); text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1.5px; text-decoration-color:var(--brand-200); transition:text-decoration-color .18s}
.prose a:not(.btn):hover{text-decoration-color:var(--brand)}
.prose blockquote{margin:0; padding:20px 24px; border-left:3px solid var(--brand);
  background:var(--bg-soft); border-radius:0 var(--r) var(--r) 0; font-size:16.4px; color:var(--ink-2)}
.prose blockquote cite{display:block; margin-top:10px; font-size:13.5px; font-style:normal; color:var(--muted)}

/* --- stat callout --- */
.statline{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:36px 0}
.statline .s{border:1px solid var(--line); border-radius:var(--r-l); padding:22px; background:#fff}
.statline .s .n{font-size:2.05rem; font-weight:800; letter-spacing:-.045em; color:var(--brand); line-height:1}
.statline .s .t{font-size:14.2px; margin-top:9px; line-height:1.5; color:var(--ink-2)}
.statline .s .src{font-size:11.5px; color:var(--muted); margin-top:9px}

/* --- comparison table --- */
.cmp{width:100%; border-collapse:separate; border-spacing:0; border:1px solid var(--line);
  border-radius:var(--r-l); overflow:hidden; font-size:14.8px; margin:30px 0}
.cmp th,.cmp td{padding:14px 16px; text-align:left; border-bottom:1px solid var(--line-2); vertical-align:top}
.cmp thead th{background:var(--bg-soft); font-size:12px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--muted)}
.cmp tbody tr:last-child td{border-bottom:0}
.cmp td:first-child{font-weight:600; color:var(--ink)}
.cmp .yes{color:var(--green); font-weight:600}
.cmp .no{color:var(--muted)}
.cmp-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}

/* --- two column with sticky aside --- */
.split{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:60px; align-items:start}
.aside{position:sticky; top:96px; display:flex; flex-direction:column; gap:16px}
.aside-card{border:1px solid var(--line); border-radius:var(--r-l); padding:22px; background:#fff; box-shadow:var(--sh-1)}
.aside-card h4{font-size:15px; margin:0 0 12px; letter-spacing:-.02em}
.aside-card p{font-size:14px; line-height:1.6}
.aside-card .btn{width:100%; margin-top:16px}
.aside-card.accent{background:var(--brand-50); border-color:var(--brand-100)}
.toc{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px}
.toc a{display:block; font-size:14px; padding:7px 11px; border-radius:8px; color:var(--body); transition:.16s}
.toc a:hover{background:var(--brand-50); color:var(--brand-700)}

/* --- use case grid --- */
.uc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.uc{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r-l);
  padding:26px 24px; background:#fff; transition:transform .26s var(--ease), box-shadow .26s var(--ease), border-color .26s}
.uc:hover{transform:translateY(-4px); box-shadow:var(--sh-3); border-color:#DFDFE4}
.uc .ic{width:42px;height:42px;border-radius:12px;background:var(--brand-50);color:var(--brand);
  display:grid;place-items:center;margin-bottom:18px;border:1px solid var(--brand-100); transition:.26s}
.uc:hover .ic{background:var(--brand); color:#fff; border-color:var(--brand)}
.uc .ic svg{width:20px;height:20px}
.uc h3{margin-bottom:9px}
.uc p{font-size:14.6px; line-height:1.6; flex:1}
.uc .go{display:inline-flex; align-items:center; gap:7px; margin-top:18px; font-size:14.2px;
  font-weight:600; color:var(--brand-700)}
.uc .go svg{width:15px;height:15px; transition:transform .22s var(--ease)}
.uc:hover .go svg{transform:translateX(3px)}

/* --- CTA strip --- */
.strip{background:linear-gradient(150deg,#F6FAFC,#FFEDE5); border:1px solid var(--brand-100);
  border-radius:var(--r-xl); padding:44px 48px; display:flex; flex-wrap:wrap; gap:26px;
  align-items:center; justify-content:space-between; position:relative; overflow:hidden}
.strip::before{content:""; position:absolute; right:-140px; top:-140px; width:420px;height:420px;border-radius:50%;
  background:radial-gradient(closest-side, rgba(38, 89, 124,.13), transparent)}
.strip .t{position:relative; z-index:1; max-width:560px}
.strip h2{font-size:clamp(1.5rem,2.7vw,2rem); margin-bottom:10px}
.strip p{font-size:15.6px}
.strip .a{position:relative; z-index:1; display:flex; gap:11px; flex-wrap:wrap}

/* --- contact --- */
.contact-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,460px); gap:56px; align-items:start}
.cinfo{display:flex; flex-direction:column; gap:14px; margin-top:30px}
.cinfo a,.cinfo div{display:flex; gap:14px; align-items:flex-start; padding:18px; border:1px solid var(--line);
  border-radius:var(--r); background:#fff; transition:.2s var(--ease)}
.cinfo a:hover{border-color:var(--brand-200); box-shadow:var(--sh-2); transform:translateY(-2px)}
.cinfo .ic{width:38px;height:38px;border-radius:11px;background:var(--brand-50);color:var(--brand);
  display:grid;place-items:center;flex:none;border:1px solid var(--brand-100)}
.cinfo .ic svg{width:17px;height:17px}
.cinfo b{display:block; color:var(--ink); font-size:15px; letter-spacing:-.018em}
.cinfo span{font-size:14.2px; color:var(--body)}

/* --- team / about --- */
.vals{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.val{border:1px solid var(--line); border-radius:var(--r-l); padding:26px; background:#fff}
.val .ic{width:40px;height:40px;border-radius:11px;background:var(--brand-50);color:var(--brand);
  display:grid;place-items:center;margin-bottom:16px;border:1px solid var(--brand-100)}
.val .ic svg{width:19px;height:19px}
.val h3{margin-bottom:8px}
.val p{font-size:14.6px; line-height:1.6}

/* --- misc --- */
.updated{font-size:13px; color:var(--muted); margin-top:14px}
.updated time{font-weight:500; color:var(--ink-2)}
.nav-links a.active{background:var(--brand-50); color:var(--brand-700)}
.mobile-menu a.active{color:var(--brand)}
.notice{border:1px solid var(--line); border-left:3px solid var(--brand); background:var(--bg-soft);
  border-radius:0 var(--r) var(--r) 0; padding:18px 22px; font-size:15.2px; line-height:1.62}
.err-wrap{padding:170px 0 120px; text-align:center}
.err-wrap .code{font-size:clamp(4rem,13vw,8rem); font-weight:800; letter-spacing:-.06em; color:var(--brand); line-height:1}
.err-wrap h1{margin:12px 0 16px}
.err-wrap .lead{max-width:520px; margin-inline:auto}
.err-links{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:30px}

@media (max-width:1040px){
  .split{grid-template-columns:1fr; gap:44px}
  .aside{position:static; flex-direction:row; flex-wrap:wrap}
  .aside-card{flex:1; min-width:260px}
  .uc-grid{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr; gap:40px}
  .vals{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  .phero{padding:108px 0 48px}
  .uc-grid{grid-template-columns:1fr}
  .statline{grid-template-columns:1fr}
  .vals{grid-template-columns:1fr}
  .strip{padding:28px 22px}
  .strip .a .btn{width:100%}
  .answer{padding:20px}
  .prose h2{margin-top:40px}
  .aside{flex-direction:column}
}


/* ============ Serviciing additions ============ */
/* owl-eye motif: paired circles, used as a quiet structural mark */
.eyes{display:inline-flex; gap:5px; align-items:center; flex:none}
.eyes i{width:9px;height:9px;border-radius:50%;border:1.8px solid var(--brand);display:block}
.eyes i:last-child{background:var(--brand)}

/* the retention-gap calculator (home + pricing) */
.calc{border:1px solid var(--line); border-radius:var(--r-xl); background:#fff; box-shadow:var(--sh-3); overflow:hidden}
.calc-h{display:flex; align-items:center; gap:11px; padding:18px 24px; border-bottom:1px solid var(--line); background:var(--bg-soft)}
.calc-h b{font-size:15px; color:var(--ink); letter-spacing:-.02em}
.calc-b{padding:22px 24px 24px}
.cf{margin-bottom:18px}
.cf label{display:flex; justify-content:space-between; align-items:baseline; font-size:13px; font-weight:600; color:var(--ink-2); margin-bottom:9px}
.cf output{font-weight:700; color:var(--brand); font-variant-numeric:tabular-nums}
.cf input[type=range]{width:100%; -webkit-appearance:none; appearance:none; height:5px; border-radius:4px; background:var(--brand-100); outline:none}
.cf input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:22px;height:22px;border-radius:50%;
  background:var(--brand); border:4px solid #fff; box-shadow:0 1px 6px rgba(28,31,34,.3); cursor:pointer}
.cf input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--brand);
  border:4px solid #fff; box-shadow:0 1px 6px rgba(28,31,34,.3); cursor:pointer; box-sizing:border-box}
.calc-out{margin-top:20px; padding:20px; border-radius:var(--r); background:#FDF6E9; border:1px solid #EFDDBF}
.calc-out .l{font-size:11px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:#8A5A12}
.calc-out .n{font-size:2.5rem; font-weight:800; color:#B8791C; letter-spacing:-.045em; line-height:1.04; margin-top:6px; font-variant-numeric:tabular-nums}
.calc-out .s{font-size:13.4px; color:#8A5A12; margin-top:7px}
.calc-f{border-top:1px solid var(--line); padding:14px 24px; background:var(--bg-soft); font-size:13px; color:var(--muted)}
.calc-f b{color:var(--ink-2)}

/* WhatsApp-style conversation mockup */
.chatwrap{position:relative; display:flex; justify-content:center; align-items:center}
.chat{width:300px; border-radius:34px; background:#1C1F22; padding:9px;
  box-shadow:0 40px 90px rgba(28,31,34,.24), inset 0 0 0 1.5px #33373B; z-index:2;
  animation:floaty 7s ease-in-out infinite}
.chat-s{border-radius:27px; background:#EAE4DC; overflow:hidden}
.chat-t{background:var(--brand-700); color:#fff; padding:26px 15px 11px; display:flex; align-items:center; gap:9px}
.chat-t .av{width:32px;height:32px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:none}
.chat-t .av img{width:21px;height:auto}
.chat-t .nm{font-size:13px;font-weight:700;line-height:1.2}
.chat-t .on{font-size:10.5px;color:#BFD6E5;line-height:1.2;margin-top:1px}
.chat-b{padding:14px 12px 16px; display:flex; flex-direction:column; gap:9px; min-height:330px}
.bub{max-width:86%; padding:9px 12px; border-radius:12px; font-size:12.4px; line-height:1.5; color:var(--ink);
  background:#fff; box-shadow:0 1px 1px rgba(28,31,34,.08); position:relative}
.bub.me{align-self:flex-end; background:#DCF8C6}
.bub .tm{display:block; font-size:9.5px; color:var(--muted); text-align:right; margin-top:3px}
.bub b{font-weight:700}
.bub .btns{margin-top:8px; border-top:1px solid var(--line-2); padding-top:7px; display:flex; flex-direction:column; gap:5px}
.bub .btns span{color:var(--brand); font-weight:600; font-size:11.8px; text-align:center; padding:4px}
.chat-day{align-self:center; background:rgba(28,31,34,.07); color:var(--ink-2); font-size:10px;
  padding:3px 10px; border-radius:999px; font-weight:600}

/* comparison table (manual vs Serviciing) */
.vs{display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden; background:#fff}
.vs-c{padding:30px 28px 34px}
.vs-c:first-child{background:var(--bg-soft); border-right:1px solid var(--line)}
.vs-c h4{font-size:12px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; margin-bottom:20px}
.vs-c:first-child h4{color:var(--muted)}
.vs-c:last-child h4{color:var(--brand)}
.vs ul{list-style:none; margin:0; padding:0}
.vs li{padding:12px 0 12px 28px; border-bottom:1px dashed var(--line); font-size:14.6px; position:relative; line-height:1.55}
.vs li:last-child{border-bottom:0}
.vs-c:first-child li::before{content:"\00d7"; position:absolute; left:5px; top:11px; color:var(--muted); font-size:16px}
.vs-c:last-child li::before{content:""; position:absolute; left:4px; top:19px; width:12px;height:6px;
  border-left:2px solid var(--brand); border-bottom:2px solid var(--brand); transform:rotate(-45deg)}

/* branch performance list */
.branches{border:1px solid var(--line); border-radius:var(--r-l); background:#fff; padding:10px 24px; box-shadow:var(--sh-2)}
.branch{display:flex; align-items:center; gap:14px; padding:15px 0; border-bottom:1px dashed var(--line)}
.branch:last-child{border-bottom:0}
.branch .pin{width:38px;height:38px;border-radius:11px;background:var(--brand-50); border:1px solid var(--brand-100);
  color:var(--brand-700); display:grid;place-items:center; font-size:11px; font-weight:700; flex:none}
.branch .nm{flex:1; font-size:14.6px; font-weight:600; color:var(--ink)}
.branch .v{font-size:13.6px; font-weight:700; color:var(--brand)}
.branch .v.warn{color:#B8791C}

/* contact page */
.contact-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,470px); gap:52px; align-items:start}
.cinfo{display:flex; flex-direction:column; gap:12px; margin-top:26px}
.cinfo a{display:flex; align-items:center; gap:14px; padding:16px 18px; border:1px solid var(--line);
  border-radius:var(--r); background:#fff; transition:.2s var(--ease)}
.cinfo a:hover{border-color:var(--brand-200); background:var(--brand-50); transform:translateY(-2px)}
.cinfo .ic{width:40px;height:40px;border-radius:11px;background:var(--brand-50);border:1px solid var(--brand-100);
  color:var(--brand); display:grid;place-items:center;flex:none}
.cinfo .ic svg{width:18px;height:18px}
.cinfo b{display:block; color:var(--ink); font-size:15.2px; letter-spacing:-.018em}
.cinfo span{display:block; font-size:13px; color:var(--muted); margin-top:2px}
.aside-card{border:1px solid var(--line); border-radius:var(--r-l); background:#fff; box-shadow:var(--sh-2)}
.aside-card.accent{background:var(--brand-50); border-color:var(--brand-100); box-shadow:none}

/* form: honeypot must be invisible to people and reachable to nobody */
.hp-field{position:absolute !important; left:-9999px !important; top:auto; width:1px; height:1px;
  overflow:hidden; opacity:0; pointer-events:none}
.form .err{background:#FEF2F2; border:1px solid #FECACA; color:#991B1B; border-radius:10px;
  padding:12px 14px; font-size:13.6px; margin-bottom:16px; line-height:1.55}
.form .err ul{margin:6px 0 0; padding-left:18px}
.fld .req{color:var(--brand)}
.cf-turnstile{margin:4px 0 12px}
.form .fld.bad input,.form .fld.bad select,.form .fld.bad textarea{border-color:#DC2626}

/* answer box */
.answer{background:var(--brand-50); border:1px solid var(--brand-100); border-left:3px solid var(--brand);
  border-radius:0 var(--r-l) var(--r-l) 0; padding:26px 28px; margin:26px 0}
.answer .lbl{display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--brand-700); margin-bottom:12px}
.answer .lbl svg{width:14px;height:14px}
.answer p{font-size:15.4px; line-height:1.68}
.answer p + p{margin-top:12px}

/* breadcrumbs + inner hero */
.crumbs{font-size:13px; color:var(--muted); margin-bottom:18px}
.crumbs a:hover{color:var(--brand)}
.crumbs .sep{margin:0 8px; opacity:.6}
.phero{padding:132px 0 54px; background:linear-gradient(180deg,#fff 0%,var(--bg-warm) 100%); border-bottom:1px solid var(--line-2)}
.phero.center{text-align:center}
.phero.center .lead{margin-inline:auto}
.phero h1{margin:20px 0 0; font-size:clamp(2.1rem,4.4vw,3.35rem)}
.phero .lead{margin-top:20px; max-width:680px}
.phero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.phero.center .phero-actions{justify-content:center}

/* prose for legal pages */
.prose{max-width:760px}
.prose h2{font-size:1.5rem; margin:38px 0 14px}
.prose h3{margin:26px 0 10px}
.prose p{margin-bottom:14px; font-size:15.6px; line-height:1.72}
.prose ul{margin:0 0 16px; padding-left:22px}
.prose li{margin-bottom:8px; font-size:15.4px; line-height:1.65}

/* statline + uc grid (carried from the shared system) */
.statline{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:40px}
.statline .s{padding:26px; border:1px solid var(--line); border-radius:var(--r-l); background:#fff}
.statline .n{font-size:2.4rem; font-weight:800; color:var(--brand); letter-spacing:-.045em; line-height:1}
.statline .t{margin-top:10px; font-size:14.8px; color:var(--ink-2); font-weight:600}
.statline .src{margin-top:8px; font-size:11.5px; color:var(--muted)}
.uc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.uc{border:1px solid var(--line); border-radius:var(--r-l); padding:26px 24px; background:#fff;
  transition:transform .26s var(--ease), box-shadow .26s var(--ease), border-color .26s;
  display:flex; flex-direction:column}
.uc:hover{transform:translateY(-4px); box-shadow:var(--sh-3); border-color:#DFDFE4}
.uc .ic{width:42px;height:42px;border-radius:12px;background:var(--brand-50);border:1px solid var(--brand-100);
  color:var(--brand); display:grid;place-items:center; margin-bottom:16px}
.uc .ic svg{width:20px;height:20px}
.uc h3{margin-bottom:9px}
.uc p{font-size:14.4px; line-height:1.6; flex:1}
.uc .go{display:inline-flex; align-items:center; gap:7px; margin-top:16px; font-size:14px;
  font-weight:600; color:var(--brand)}
.uc .go svg{width:15px;height:15px; transition:transform .2s var(--ease)}
.uc:hover .go svg{transform:translateX(3px)}

/* cta strip */
.strip{display:flex; align-items:center; justify-content:space-between; gap:34px; flex-wrap:wrap;
  background:var(--brand-700); border-radius:var(--r-xl); padding:44px 46px; position:relative; overflow:hidden}
.strip::after{content:""; position:absolute; right:-70px; top:-70px; width:300px;height:300px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.13)}
.strip::before{content:""; position:absolute; right:40px; top:70px; width:150px;height:150px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.1)}
.strip .t{position:relative; z-index:1; max-width:600px}
.strip h2{color:#fff}
.strip p{color:#BFD6E5; margin-top:12px; font-size:15.6px}
.strip .a{display:flex; gap:12px; flex-wrap:wrap; position:relative; z-index:1}
.strip .btn-primary{background:#fff; color:var(--brand-700); box-shadow:0 10px 30px rgba(0,0,0,.22)}
.strip .btn-primary:hover{background:#fff; color:var(--brand-700)}
.strip .btn-ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.4); box-shadow:none}
.strip .btn-ghost:hover{background:rgba(255,255,255,.1); border-color:#fff}

@media (max-width:1040px){
  .contact-grid{grid-template-columns:1fr; gap:40px}
  .statline{grid-template-columns:1fr}
  .uc-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){ .phero{padding:110px 0 44px} }
@media (max-width:680px){
  .vs{grid-template-columns:1fr}
  .vs-c:first-child{border-right:0; border-bottom:1px solid var(--line)}
  .uc-grid{grid-template-columns:1fr}
  .strip{padding:28px 24px}
  .calc-out .n{font-size:2rem}
}