

:root {
  
  --ink:#0A1F44;          
  --body:#2E4060;         
  --muted:#55618C;        
  --quiet:#6B7699;        
  --blue:#1C5FCC;         
  --blue-d:#1550B0;       
  --blue-wash:#EAEEF8;    
  --blue-pale:#C0D8F8;    
  --line:#DCE3F2;         
  --line-hover:#C7D7F2;   
  --line-soft:#EEF2F8;    
  --dot:#D3DCEC;          
  --bg:#FFFFFF;
  --bg-alt:#F5F7FC;       

  
  --on-dark:#FFFFFF;
  --on-dark-soft:#C3D0E8;
  --on-dark-line:#2E4874;
  --on-dark-line-hover:#5B7CB5;

  
  --flag:#8A5A00;
  --flag-line:#E8DCB8;
  --flag-bg:#FFFBF0;
  --flag-rule:#C9A227;

  
  --typed:#12A06A;

  
  --rail:1120px;          
  --rail-prose:720px;     
  --rail-intro:860px;     
  --gutter:24px;
  --gutter-sm:18px;

  
  --h1:clamp(34px,4.4vw,56px);
  --h2:clamp(26px,2.9vw,38px);
  --h3:21px;              
  --h4:17px;
  --lead:clamp(17px,1.6vw,20px);   
  --text:17px;
  --small:14.5px;
  --micro:12px;           

  --lh-tight:1.15;
  --lh-head:1.25;
  --lh-body:1.62;    

  
  --band:72px;
  --band-sm:44px;
  --stack:28px;           
  --stack-sm:18px;

  
  --radius:14px;
  --radius-sm:10px;
  --shadow:0 10px 26px -14px rgba(10,31,68,.22);
  --focus:0 0 0 3px rgba(28,95,204,.18);

  
  --t:.16s;
  --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--body);
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-size:var(--text);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;
}

.band{padding:var(--band) 0}
.band-alt{padding:var(--band) 0;background:var(--bg-alt)}
.wrap{max-width:var(--rail);margin:0 auto;padding:0 var(--gutter)}
.prose{max-width:var(--rail-prose)}
.intro{max-width:var(--rail-intro)}

h1,h2,h3,h4{color:var(--ink);margin:0 0 var(--stack-sm);letter-spacing:-.02em;font-weight:800}
h1{font-size:var(--h1);line-height:var(--lh-tight);letter-spacing:-.03em}
h2{font-size:var(--h2);line-height:var(--lh-head)}
h3{font-size:var(--h3);line-height:1.3;letter-spacing:-.01em}
h4{font-size:var(--h4);line-height:1.35}
p{margin:0 0 var(--stack-sm)}
.lead{font-size:var(--lead);color:var(--body);line-height:1.65}
.sec-intro{font-size:var(--lead);color:var(--muted);max-width:var(--rail-intro);margin-bottom:var(--stack)}

.eyebrow{font-size:14px;font-weight:600;color:var(--muted);margin:0 0 10px}

.grid{display:grid;gap:16px;grid-auto-rows:1fr}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{
  display:flex;flex-direction:column;background:var(--bg);
  border:1px solid var(--line);border-radius:var(--radius);padding:22px 20px;
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease),transform var(--t) var(--ease);
}
.card:hover{border-color:var(--line-hover);box-shadow:var(--shadow);transform:translateY(-2px)}
.card:focus-within{border-color:var(--blue);box-shadow:var(--focus)}
.card p{color:var(--muted);font-size:var(--small)}
.card-sm{padding:17px 18px}
.card-sm h3{font-size:var(--h4)}

.chip{
  width:38px;height:38px;border-radius:11px;background:var(--blue-wash);color:var(--blue);
  display:flex;align-items:center;justify-content:center;margin-bottom:13px;flex:0 0 auto;
}
.chip svg{width:19px;height:19px}

.ticks{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:7px}
.ticks li{position:relative;padding-left:18px;font-size:var(--small);color:var(--body);line-height:1.45}
.ticks li::before{content:'';position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:2px;background:var(--blue);opacity:.5}

.link{
  margin-top:auto;display:inline-flex;align-items:center;gap:6px;
  font-size:var(--small);font-weight:700;color:var(--blue);text-decoration:none;
  padding:7px 0;min-height:24px;border-radius:5px;transition:color var(--t) var(--ease);
}
.link span{transition:transform var(--t) var(--ease)}
.link:hover{color:var(--blue-d)}
.card:hover .link span{transform:translateX(3px)}
.link:focus-visible,.btn:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

.btn{
  display:inline-flex;align-items:center;gap:8px;border-radius:11px;
  font-size:14px;font-weight:700;text-decoration:none;padding:12px 24px;min-height:24px;
  transition:background var(--t) var(--ease),border-color var(--t) var(--ease),color var(--t) var(--ease);
}
.btn-p{background:var(--blue);color:#fff;border:1px solid var(--blue)}
.btn-p:hover{background:var(--blue-d);border-color:var(--blue-d)}
.btn-s{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn-s:hover{border-color:#C7D7F2}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:var(--stack-sm)}

.note{font-size:var(--small);color:var(--muted);margin-top:var(--stack-sm)}

.faq{display:flex;flex-direction:column;gap:8px;max-width:var(--rail-prose)}
.faq details{border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 16px;background:#fff}
.faq summary{
  display:flex;justify-content:space-between;gap:12px;cursor:pointer;list-style:none;
  font-weight:700;color:var(--ink);font-size:14.5px;padding:3px 0;min-height:24px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-weight:800;color:var(--muted)}
.faq details[open] summary::after{content:'\2212'}
.faq summary:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}
.faq details[open]{border-color:#C0D8F8;background:var(--bg-alt)}
.faq p{font-size:var(--small);color:var(--body);margin:10px 0 2px}

@media(max-width:1000px){
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:720px){
  .band,.band-alt{padding:var(--band-sm) 0}
  .wrap{padding:0 var(--gutter-sm)}
  .grid-3,.grid-2{grid-template-columns:1fr;grid-auto-rows:auto}
  .card{padding:18px 16px}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .card:hover{transform:none}
  .card:hover .link span{transform:none}
}

:root{
  --btn-h:46px;
  --btn-h-sm:38px;
  --btn-r:10px;

  
  --client-slot-w:176px;  --client-slot-h:56px;
  --client-max-w:168px;
  --tool-slot-w:136px;    --tool-slot-h:44px;
  --tool-max-w:126px;
  --logo-s:1;             
}

.btn{min-height:var(--btn-h);padding:0 26px;border-radius:var(--btn-r);
  font-size:15px;font-weight:700;letter-spacing:-.005em}
.btn-sm{min-height:var(--btn-h-sm);padding:0 18px;font-size:14px}
.btn-t{background:none;border:0;color:var(--blue);padding:0 2px;min-height:var(--btn-h-sm);
  font-weight:700;font-size:14.5px;text-decoration:none;display:inline-flex;
  align-items:center;gap:6px}
.btn-t:hover{color:var(--blue-d);text-decoration:underline}

.svc5{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.svc5>.card{grid-column:span 2}
.svc5>.card:nth-child(4){grid-column:2/4}
.svc5>.card:nth-child(5){grid-column:4/6}

@supports(grid-template-rows:subgrid){
  
  
  .svc5{grid-template-rows:repeat(5,auto)}
  .svc5>.card{display:grid;grid-row:span 5;grid-template-rows:subgrid;gap:0}
  .svc5>.card:nth-child(4),.svc5>.card:nth-child(5){grid-row:6/span 5}
}
@supports not (grid-template-rows:subgrid){
  .svc5{grid-auto-rows:1fr}
}
.svc5 .card{padding:24px 22px}

.svc-art{display:block;width:96px;height:64px;margin:0 0 12px}
.svc5 h3{margin:0 0 12px}
.svc-trigger{font-size:var(--small);color:var(--muted);margin:0 0 16px;line-height:1.5}
.svc-row{border-top:1px solid var(--line-soft);padding:13px 0 0;margin:0 0 14px}
.svc-lbl{display:block;font-size:11px;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--quiet);margin-bottom:6px}
.svc-out{font-size:var(--text);font-weight:600;color:var(--ink);line-height:1.45;margin:0}
.svc-own{margin:0;padding:0;list-style:none;font-size:var(--small);color:var(--body)}
.svc-own li{position:relative;padding-left:16px;margin-bottom:5px;line-height:1.45}
.svc-own li::before{content:'';position:absolute;left:0;top:8px;width:6px;height:6px;
  border-radius:50%;background:var(--blue-pale)}
.svc-own li:last-child{margin-bottom:0}

.svc5 .link{align-self:end;padding-top:14px}

@media(max-width:1000px){
  
  .svc5{grid-template-columns:repeat(4,1fr)}
  .svc5>.card:nth-child(4){grid-column:auto/span 2;grid-row:auto/span 5}
  .svc5>.card:nth-child(5){grid-column:2/4;grid-row:11/span 5}
}
@media(max-width:720px){
  
  .svc5{grid-template-columns:1fr;grid-auto-rows:auto}
  .svc5>.card,
  .svc5>.card:nth-child(4),
  .svc5>.card:nth-child(5){grid-column:1/-1;grid-row:auto/span 5}
}
.sub-lbl{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--quiet);margin:26px 0 12px}

.logorow{display:grid;grid-template-columns:repeat(5,1fr);align-items:center;
  justify-items:center;gap:10px 18px}
.logoslot{width:100%;min-width:0;max-width:var(--client-slot-w);height:var(--client-slot-h);
  display:flex;align-items:center;justify-content:center}

.logoslot img{height:calc(var(--ch) * var(--logo-s));width:auto;
  
  max-width:min(var(--client-max-w),100%);object-fit:contain;opacity:1}

.logoslot.wide{width:208px}
.logoslot.wide img{max-width:200px}

.toolrow{display:grid;grid-template-columns:repeat(8,1fr);align-items:center;
  justify-items:center;gap:6px 16px}

.toolslot{width:100%;min-width:0;max-width:var(--tool-slot-w);
  height:var(--tool-slot-h);display:flex;align-items:center;justify-content:center;
  
  padding:0 5px}

.toolslot img{height:calc(var(--th) * var(--tool-s));width:auto;
  
  max-width:min(var(--tool-max-w),100%);object-fit:contain;
  
  filter:grayscale(1) contrast(.72) brightness(.82);opacity:.78}
.toolrow{--tool-s:1.45}

.toolrow-8 .toolslot.x8{display:none}

@media(max-width:900px){ .toolrow{grid-template-columns:repeat(4,1fr)} }

@media(max-width:720px){
  :root{
    --client-slot-w:140px; --client-slot-h:46px; --client-max-w:132px;
    --tool-slot-w:104px;   --tool-slot-h:38px;   --tool-max-w:98px;
    --logo-s:.82;
  }
  .toolrow{--tool-s:1.1;gap:4px 10px}
  .logoslot.wide{width:164px}
  .logoslot.wide img{max-width:158px}
  .logorow{grid-template-columns:repeat(2,1fr);gap:6px 14px}
}
