/* eKAP light design system. Shared by every mockup — only the navigation differs. */
:root{
  --bg:#f2f5f9; --surf:#fff; --surf2:#f7f9fc;
  --ink:#0f1729; --ink2:#5a6580; --ink3:#8b95aa;
  --line:#e3e8f0; --line2:#d3dae6;
  --navy:#12315f; --navy2:#0d2547;
  --acc:#1f5fd0; --acc-s:#eaf1fd;
  --amber:#e8890b; --amber-s:#fdf3e3;
  --red:#d92d20; --red-s:#fdecea;
  --green:#0f9d58; --green-s:#e8f6ee;
  --violet:#7048c8; --violet-s:#f1ecfb;
  --teal:#0e8f9e; --teal-s:#e5f5f7;
  --sh:0 1px 2px rgba(15,23,41,.05), 0 1px 3px rgba(15,23,41,.04);
  --sh2:0 10px 30px rgba(15,23,41,.12);
  --r:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",sans-serif;
  -webkit-font-smoothing:antialiased}
button{font-family:inherit}
svg.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}

/* logo */
.logo{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.logo .lm{width:30px;height:30px;border-radius:50%;border:2px solid var(--amber);position:relative;flex:0 0 auto}
.logo .lm::after{content:"";position:absolute;inset:5px;border-radius:50%;border:2px solid currentColor;
  border-right-color:transparent;transform:rotate(35deg)}
.logo .lt{line-height:1.05}
.logo .lt b{display:block;font-size:14px;letter-spacing:.13em;font-weight:700}
.logo .lt i{display:block;font-size:7.5px;letter-spacing:.19em;opacity:.6;font-style:normal;margin-top:2px}
.av{width:32px;height:32px;border-radius:50%;background:linear-gradient(140deg,#3d7ae0,#7048c8);display:grid;
  place-items:center;color:#fff;font-size:12px;font-weight:700;flex:0 0 auto}

/* content */
.main{flex:1;min-width:0;padding:24px 28px 44px;max-width:1500px;margin:0 auto;width:100%}
.hrow{display:flex;align-items:flex-end;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.hrow h1{font-size:24px;letter-spacing:-.025em;font-weight:700;line-height:1.2}
.hrow h1 em{font-style:normal;color:var(--acc)}
.hrow p{color:var(--ink2);font-size:14px;margin-top:4px}
.hrow .sp{flex:1}
.date{font-size:13px;color:var(--ink3);text-align:right;white-space:nowrap}

/* search */
.search{position:relative;margin-bottom:22px}
.sbox{display:flex;align-items:center;gap:13px;background:var(--surf);border:1.5px solid var(--line2);
  border-radius:var(--r);padding:0 16px;height:58px;box-shadow:var(--sh);transition:.16s}
.sbox:focus-within{border-color:var(--acc);box-shadow:0 0 0 4px var(--acc-s)}
.sbox>svg{color:var(--ink3);width:21px;height:21px}
.sbox:focus-within>svg{color:var(--acc)}
.sbox input{flex:1;border:0;outline:0;background:none;font-size:16px;color:var(--ink);font-family:inherit;min-width:0}
.sbox input::placeholder{color:var(--ink3)}
.kbd{font:11px/1 ui-monospace,Menlo,monospace;color:var(--ink3);border:1px solid var(--line2);border-radius:6px;
  padding:5px 7px;background:var(--surf2);white-space:nowrap}
.res{position:absolute;left:0;right:0;top:calc(100% + 8px);background:var(--surf);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh2);z-index:70;display:none;overflow:hidden auto;max-height:62vh}
.res.open{display:block}
.res .cap{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);padding:13px 16px 6px}
.ri{display:flex;align-items:center;gap:12px;padding:10px 16px;cursor:pointer}
.ri.sel{background:var(--acc-s)}
.ri .ric{width:32px;height:32px;border-radius:9px;background:var(--surf2);display:grid;place-items:center;color:var(--ink2)}
.ri.sel .ric{background:#fff;color:var(--acc)}
.ri .rn{flex:1;font-size:14.5px;font-weight:500}
.ri .rk{font-size:12px;color:var(--ink3)}
.ri .rh{font:11px/1 ui-monospace,Menlo,monospace;color:var(--ink3);border:1px solid var(--line2);border-radius:5px;padding:4px 6px}
.ri mark{background:#fdf0c8;color:inherit;border-radius:3px;padding:0 1px}
.rz{padding:24px 16px;color:var(--ink2);font-size:14px}
.rz b{color:var(--ink)}

/* cards */
.cols{display:grid;grid-template-columns:minmax(0,1fr) 366px;gap:20px;align-items:start}
.card{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.ch{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--line)}
.ch h2{font-size:15px;font-weight:650;letter-spacing:-.01em}
.ch .sp{flex:1}
.cnt{background:var(--red);color:#fff;font-size:11.5px;font-weight:800;border-radius:20px;padding:3px 8px}
.cnt.zero{background:var(--green)}
.lnk{font-size:13px;color:var(--acc);cursor:pointer;font-weight:500;display:inline-flex;align-items:center;gap:5px}
.lnk:hover{text-decoration:underline}

/* tasks */
.task{display:flex;gap:14px;padding:16px 18px;border-bottom:1px solid var(--line);transition:.2s}
.task:last-child{border-bottom:0}
.task:hover{background:var(--surf2)}
.task.done{opacity:.5}
.task.done .tt{text-decoration:line-through}
.tic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex:0 0 40px}
.u-late .tic{background:var(--red-s);color:var(--red)}
.u-today .tic{background:var(--amber-s);color:var(--amber)}
.u-soon .tic{background:var(--acc-s);color:var(--acc)}
.done .tic{background:var(--green-s)!important;color:var(--green)!important}
.tb{flex:1;min-width:0}
.tmeta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11.5px}
.tkind{letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);font-weight:600}
.tdue{font-weight:700;padding:2px 7px;border-radius:20px}
.u-late .tdue{background:var(--red-s);color:var(--red)}
.u-today .tdue{background:var(--amber-s);color:#a3620a}
.u-soon .tdue{background:var(--acc-s);color:var(--acc)}
.tt{font-size:15.5px;font-weight:600;line-height:1.35;margin:7px 0 4px}
.tsub{font-size:12.5px;color:var(--ink3)}
.tact{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.b{border:1px solid var(--line2);background:var(--surf);color:var(--ink);border-radius:9px;padding:8px 15px;
  font-size:13.5px;cursor:pointer;font-weight:500;transition:.14s}
.b:hover{background:var(--surf2);border-color:var(--ink3)}
.b.p{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:600}
.b.p:hover{background:#1a52b8}
.b.g{border:0;background:none;color:var(--ink3);padding:8px}
.b.g:hover{color:var(--ink);background:var(--surf2)}
.zero-s{padding:34px 18px;text-align:center;display:none}
.zero-s.on{display:block}
.zero-s .zi{width:46px;height:46px;border-radius:50%;background:var(--green-s);color:var(--green);
  display:grid;place-items:center;margin:0 auto 12px}
.zero-s p{font-size:14px;color:var(--ink2)}

/* stop card */
.stop{background:linear-gradient(150deg,#e8483b,#c62317 62%,#a81b11);border-radius:var(--r);padding:20px;color:#fff;
  position:relative;overflow:hidden;box-shadow:0 10px 26px rgba(201,35,23,.28)}
.stop::after{content:"";position:absolute;right:-56px;top:-56px;width:186px;height:186px;border-radius:50%;
  background:rgba(255,255,255,.1)}
.stop .sl{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;opacity:.9;position:relative}
.pulse{width:9px;height:9px;border-radius:50%;background:#fff;animation:pl 2s infinite}
@keyframes pl{70%{box-shadow:0 0 0 11px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.stop h3{font-size:23px;letter-spacing:-.02em;margin:12px 0 8px;position:relative;font-weight:700}
.stop p{font-size:13.5px;line-height:1.5;opacity:.93;position:relative}
.stopbtn{width:100%;margin-top:16px;background:#fff;color:#c62317;border:0;border-radius:11px;padding:13px;
  font-size:14.5px;font-weight:700;cursor:pointer;position:relative;transition:.15s;display:flex;
  align-items:center;justify-content:center;gap:8px}
.stopbtn:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(0,0,0,.18)}
.stopf{margin-top:11px;font-size:11.5px;opacity:.85;text-align:center;position:relative}
.stopf b{background:rgba(255,255,255,.22);border-radius:5px;padding:2px 6px}

/* create */
.cr{display:flex;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid var(--line);cursor:pointer;transition:.15s}
.cr:last-child{border-bottom:0}
.cr:hover{background:var(--surf2)}
.cri{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:0 0 36px}
.t-red{background:var(--red-s);color:var(--red)} .t-blue{background:var(--acc-s);color:var(--acc)}
.t-green{background:var(--green-s);color:var(--green)} .t-amber{background:var(--amber-s);color:var(--amber)}
.t-violet{background:var(--violet-s);color:var(--violet)} .t-teal{background:var(--teal-s);color:var(--teal)}
.crb{flex:1;min-width:0}
.crb .n{font-size:14px;font-weight:600;line-height:1.3}
.crb .h{font-size:12px;color:var(--ink3);margin-top:2px}
.cr .go{color:var(--ink3);flex:0 0 auto}
.cr:hover .go{color:var(--acc)}

/* news */
.news{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:20px}
.banner{border-radius:var(--r);overflow:hidden;position:relative;min-height:250px;display:flex;flex-direction:column;
  justify-content:flex-end;padding:26px;color:#fff;cursor:pointer;
  background:linear-gradient(135deg,#12315f,#1f5fd0 58%,#2f83c4);box-shadow:var(--sh)}
.banner::before{content:"";position:absolute;inset:0;
  background:radial-gradient(560px 320px at 88% 8%,rgba(232,137,11,.55),transparent 62%),
             radial-gradient(420px 300px at 6% 96%,rgba(15,157,88,.36),transparent 60%)}
.banner::after{content:"";position:absolute;inset:0;opacity:.13;
  background-image:linear-gradient(rgba(255,255,255,.9) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.9) 1px,transparent 1px);
  background-size:34px 34px;mask-image:radial-gradient(circle at 78% 22%,#000,transparent 68%)}
.banner .tg{position:relative;align-self:flex-start;background:rgba(255,255,255,.2);backdrop-filter:blur(6px);
  font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;padding:6px 11px;border-radius:20px;margin-bottom:14px}
.banner h3{position:relative;font-size:25px;line-height:1.24;letter-spacing:-.025em;font-weight:700}
.banner p{position:relative;font-size:14px;line-height:1.55;opacity:.9;margin-top:10px;max-width:52ch}
.banner .m{position:relative;font-size:12.5px;opacity:.78;margin-top:14px}
.nrow{display:flex;align-items:flex-start;gap:12px;padding:13px 18px;border-bottom:1px solid var(--line);cursor:pointer}
.nrow:last-child{border-bottom:0}
.nrow:hover{background:var(--surf2)}
.nrow .ntg{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink2);
  background:var(--surf2);border:1px solid var(--line);border-radius:6px;padding:3px 7px;flex:0 0 auto;margin-top:1px}
.nrow .nt{flex:1;font-size:14px;line-height:1.4;font-weight:500}
.nrow:hover .nt{color:var(--acc)}
.nrow .nd{font-size:11.5px;color:var(--ink3);flex:0 0 auto;margin-top:2px}

/* section headers */
.sh{display:flex;align-items:center;gap:14px;margin:26px 0 14px;flex-wrap:wrap}
.sh h2{font-size:19px;font-weight:700;letter-spacing:-.02em}
.sh .sp{flex:1}
.sh .sub{font-size:13px;color:var(--ink3)}
.ghost{border:1px solid var(--line2);background:var(--surf);color:var(--ink2);border-radius:9px;padding:8px 13px;
  font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.ghost:hover{color:var(--ink);border-color:var(--ink3)}
.ghost.on{background:var(--acc);border-color:var(--acc);color:#fff}

/* services */
.tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}
.tab{border:1px solid var(--line2);background:var(--surf);color:var(--ink2);border-radius:100px;padding:8px 15px;
  font-size:13.5px;cursor:pointer;transition:.15s;display:inline-flex;align-items:center;gap:7px}
.tab:hover{border-color:var(--ink3);color:var(--ink)}
.tab.on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600}
.tab .c{font-size:11px;opacity:.6}
.gsec{margin-bottom:22px}
.gt{display:flex;align-items:center;gap:11px;margin-bottom:11px}
.gt .gd{width:8px;height:8px;border-radius:3px}
.gt b{font-size:12px;letter-spacing:.11em;text-transform:uppercase;font-weight:700;color:var(--ink2)}
.gt span{font-size:12.5px;color:var(--ink3)}
.gt .rule{flex:1;height:1px;background:var(--line)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:12px}
.tile{background:var(--surf);border:1px solid var(--line);border-radius:13px;padding:15px;cursor:pointer;
  transition:.18s;position:relative;display:flex;gap:12px;align-items:flex-start;box-shadow:var(--sh)}
.tile:hover{border-color:var(--acc);box-shadow:0 8px 20px rgba(31,95,208,.13);transform:translateY(-2px)}
.tile .ti{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:0 0 38px;transition:.18s}
.tile:hover .ti{transform:scale(1.06)}
.tb2{flex:1;min-width:0}
.tb2 .n{font-size:14px;font-weight:600;line-height:1.3;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tb2 .d{font-size:12px;color:var(--ink3);margin-top:4px;line-height:1.4}
.tile .bg{background:var(--red);color:#fff;font-size:10.5px;font-weight:800;border-radius:20px;padding:1px 6px}
.pin{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:8px;border:0;background:transparent;
  color:var(--ink3);display:none;place-items:center;cursor:pointer}
.tile:hover .pin,.tile.pinned .pin,body.editing .pin{display:grid}
.pin:hover{background:var(--surf2);color:var(--amber)}
.tile.pinned .pin{color:var(--amber)}
.tile.pinned .pin svg{fill:currentColor}
.star{color:var(--amber);font-size:11px}
.pinbar{background:linear-gradient(120deg,var(--acc-s),#fff 70%);border:1px dashed var(--line2);border-radius:13px;
  padding:14px;margin-bottom:20px}
.pinbar .ph{display:flex;align-items:center;gap:9px;margin-bottom:11px;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:700;color:var(--acc)}
.pinbar .ph .sp{flex:1}
.pinbar .ph em{font-style:normal;font-size:11.5px;letter-spacing:0;text-transform:none;color:var(--ink3);font-weight:400}
.pinrow{display:flex;gap:9px;flex-wrap:wrap}
.pchip{display:inline-flex;align-items:center;gap:9px;background:var(--surf);border:1px solid var(--line);border-radius:11px;
  padding:9px 13px 9px 10px;font-size:13.5px;font-weight:500;cursor:pointer;box-shadow:var(--sh)}
.pchip:hover{border-color:var(--acc);color:var(--acc)}
.pchip svg{width:18px;height:18px}
.pchip .x{color:var(--ink3);margin-left:2px}
.pchip .x:hover{color:var(--red)}
.pempty{font-size:13px;color:var(--ink3)}

/* footer */
.fb{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:20px;margin-top:26px}
.fcard{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--sh);
  display:flex;flex-direction:column}
.fic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;margin-bottom:13px}
.fcard h3{font-size:16px;font-weight:650;letter-spacing:-.01em}
.fcard p{font-size:13.5px;color:var(--ink2);margin-top:7px;line-height:1.55}
.grow{flex:1;min-height:8px}
.phones{margin:13px 0 4px}
.phones a{display:block;font-size:15px;font-weight:650;color:var(--acc);text-decoration:none;margin-bottom:4px}
.phones a:hover{text-decoration:underline}
.inner{font-size:13px;color:var(--ink2);margin-top:8px}
.inner b{color:var(--ink);font-size:15px}
.fbtn{margin-top:15px;width:100%;background:var(--navy);border:0;color:#fff;border-radius:10px;padding:12px;
  font-size:14px;font-weight:600;cursor:pointer;transition:.15s}
.fbtn:hover{background:var(--navy2)}
.fbtn.alt{background:var(--acc)}
.fbtn.alt:hover{background:#1a52b8}
.qrs{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:12px;margin-top:14px}
.qr{text-align:center;cursor:pointer}
.qr canvas{width:100%;max-width:104px;aspect-ratio:1;border:1px solid var(--line);border-radius:9px;background:#fff;
  transition:.18s;image-rendering:pixelated}
.qr:hover canvas{border-color:var(--acc);transform:scale(1.04)}
.qr span{display:block;font-size:11px;color:var(--ink3);margin-top:7px;line-height:1.35}
.copy{margin-top:26px;padding-top:16px;border-top:1px solid var(--line);display:flex;gap:18px;flex-wrap:wrap;
  font-size:12.5px;color:var(--ink3)}
.copy .sp{flex:1}
.copy span{cursor:pointer}
.copy span:hover{color:var(--ink2)}

/* toast */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,16px);background:var(--ink);color:#fff;
  border-radius:11px;padding:13px 19px;font-size:13.5px;opacity:0;transition:.24s;z-index:200;pointer-events:none;
  box-shadow:0 12px 30px rgba(15,23,41,.3);display:flex;align-items:center;gap:9px;max-width:88vw}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast svg{width:17px;height:17px;color:#7ee3b0}

/* responsive */
@media(max-width:1240px){ .cols{grid-template-columns:1fr} .news{grid-template-columns:1fr} }
@media(max-width:680px){
  .main{padding:16px 14px 34px}
  .sbox{height:52px;padding:0 13px}
  .sbox input{font-size:15px}
  .kbd{display:none}
  .hrow h1{font-size:20px}
  .banner{min-height:200px;padding:20px}
  .banner h3{font-size:20px}
  .grid{grid-template-columns:1fr}
}