/* ——— Swiss / Awwwards minimal ——— */
:root{
--ink:#0a0b0f;
--muted:#6b7280;
--rule:#e7e7ea;
--rule-strong:#dcdde2;
--accent:#1e3c9c; /* ваш фирменный */
}
.svc-section{
font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
color:var(--ink);
}
.svc-head{
display:flex; flex-direction:column; gap:6px;
border-bottom:1px solid var(--rule);
padding-bottom:18px;
}
.svc-head h2{
margin:0; letter-spacing:-.015em;
font-weight:700; font-size:clamp(22px,3vw,32px); line-height:1.1;
}
.svc-head p{
margin:0; color:var(--muted); font-size:14px;
}
.svc-grid{
display:grid; gap:0; counter-reset: svc;
border-top:1px solid var(--rule);
}
/* One column mobile, two+ columns from 820px, but rows keep the "Swiss" rules */
@media (min-width:820px){
.svc-grid{
grid-template-columns:1fr 1fr;
border-left:1px solid var(--rule);
}
}
.svc{
position:relative; display:grid; align-items:center;
grid-template-columns:auto 1fr auto; column-gap:18px;
padding:18px 16px;
text-decoration:none; color:var(--ink);
border-bottom:1px solid var(--rule);
}
@media (min-width:820px){
.svc{
border-right:1px solid var(--rule);
}
}
/* Numeric index (01, 02…) — typographic cue */
.svc::before{
counter-increment: svc;
content: counter(svc, decimal-leading-zero);
font-size:12px; letter-spacing:.12em;
color:var(--muted);
text-transform:uppercase;
align-self:center;
}
/* Title column */
.svc__kicker{
grid-column:2; align-self:end;
font-size:11px; letter-spacing:.16em; text-transform:uppercase;
color:var(--muted);
}
.svc__title{
grid-column:2; align-self:start;
font-size:clamp(18px,2.2vw,22px);
line-height:1.15; letter-spacing:-.01em; font-weight:600;
margin-top:2px;
}
/* Arrow column */
.svc__arrow{
grid-column:3; align-self:center;
font-style:normal; font-size:14px;
opacity:.6; transform:translateX(0); transition:transform .18s ease, opacity .18s ease;
}
/* Hover: crisp underline + arrow nudge + rule emphasis */
.svc:hover .svc__title{
text-decoration:underline;
text-underline-offset:3px;
text-decoration-thickness:1px;
text-decoration-color:var(--accent);
}
.svc:hover .svc__arrow{ transform:translateX(3px); opacity:.95; }
.svc:hover{ border-bottom-color:var(--rule-strong); }
/* Tiny accent chip in corner — restrained, “expensive” detail */
.svc::after{
content:"";
position:absolute; top:-1px; right:-1px;
width:10px; height:10px;
background: radial-gradient(circle at 70% 30%, var(--accent) 0, rgba(30,60,156,.6) 40%, transparent 70%);
opacity:.0; transition:opacity .2s ease;
}
.svc:hover::after{ opacity:.9; }
/* Compact tap targets on very narrow screens */
@media (max-width:360px){
.svc{ padding:16px 14px; column-gap:14px; }
.svc__title{ font-size:17px; }
}