:root { --ink:#191919; --muted:#626262; --line:#e9e9e7; --paper:#fff; --soft:#f7f7f5; --green:#2558c8; --green-dark:#2558c8; --green-soft:#edf3ff; --yellow:#ffd34f; }
.brand img,.footer-brand img { border-radius:8px; }
.nav-links a:hover,.footer-links a:hover { color:#2558c8; }
.hero::before { background:radial-gradient(circle,#edf3ff,rgba(237,243,255,0) 70%); }
.eyebrow { color:#2558c8; }
.eyebrow-dot { background:#ffc843; box-shadow:0 0 0 4px #fff4cb; }
.audience-number,.service-icon { background:#edf3ff; color:#2558c8; }
.note,.cta-band { background:#fff4d4; }
.status { background:#edf3ff; }
.workflow-step { border-color:#82a2e3; }
:focus-visible { outline-color:#2558c8; }
.button:hover { background:#ffd34f; border-color:#e5b928; color:#191919; box-shadow:0 9px 22px rgba(37,88,200,.15); }
.button-light:hover { background:#191919; border-color:#191919; color:#fff; }
.service-hero-grid { grid-template-columns:1.05fr .95fr; gap:42px; }
.service-hero-copy { position:relative; z-index:1; }
.service-hero-copy h1 { max-width:620px; }
.service-hero-art { position:relative; min-height:390px; display:grid; place-items:center; isolation:isolate; }
.showcase-sun { position:absolute; z-index:-1; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle at 44% 42%,#fff7d9 0,#fff0b4 48%,rgba(255,240,180,0) 72%); }
.showcase-note { position:absolute; top:24px; right:13px; color:#2558c8; font-size:11px; font-weight:750; letter-spacing:.12em; transform:rotate(4deg); }
.showcase-window { position:relative; width:min(100%,390px); padding:12px; border:1px solid #e4e7ed; border-radius:17px; background:#fff; box-shadow:0 28px 70px rgba(25,38,66,.14); transform:rotate(-3deg); }
.showcase-top { display:flex; align-items:center; gap:5px; padding:3px 2px 11px; border-bottom:1px solid #eff0f2; }
.showcase-top>span { width:7px; height:7px; border-radius:50%; background:#d8dbe0; }
.showcase-top div { width:55%; margin:auto; padding:4px 9px; border-radius:5px; background:#f5f6f8; color:#7b8088; text-align:center; font-size:10px; }
.showcase-content { min-height:231px; margin-top:11px; padding:25px 22px; border-radius:10px; background:linear-gradient(135deg,#edf3ff,#f8faff 62%,#fff4d4); }
.showcase-label { margin-bottom:12px; color:#2558c8; font-size:9px; font-weight:800; letter-spacing:.13em; }
.showcase-content strong { display:block; max-width:240px; color:#202430; font-size:27px; line-height:1.05; letter-spacing:-.065em; }
.showcase-lines { display:grid; gap:6px; width:65%; margin:15px 0; }
.showcase-lines i { height:5px; border-radius:4px; background:#d8deea; }.showcase-lines i:last-child { width:70%; }
.showcase-content>b { display:inline-flex; gap:10px; align-items:center; padding:8px 11px; border-radius:5px; background:#2558c8; color:#fff; font-size:9px; }
.showcase-chip { position:absolute; display:flex; align-items:center; gap:10px; min-width:164px; padding:12px 14px; border:1px solid rgba(226,228,233,.9); border-radius:12px; background:#fff; box-shadow:0 14px 35px rgba(30,39,59,.1); }
.showcase-chip>span { display:grid; width:35px; height:35px; place-items:center; border-radius:9px; background:#edf3ff; color:#2558c8; font-size:20px; font-weight:700; }
.showcase-chip b,.showcase-chip small { display:block; }.showcase-chip b { font-size:12px; }.showcase-chip small { margin-top:1px; color:#747982; font-size:10px; }
.chip-catalog { top:96px; left:-7px; transform:rotate(-5deg); }.chip-profile { right:-9px; bottom:40px; transform:rotate(4deg); }.chip-profile>span { background:#fff2c8; color:#222; }
.service-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; }
.service-card { position:relative; display:flex; min-height:310px; flex-direction:column; align-items:flex-start; overflow:hidden; padding:23px 21px 20px; border:1px solid #e8e9ed; border-top:3px solid var(--card-accent,#2558c8); border-radius:14px; background:var(--card-surface,#fff); transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; }
.service-card::after { position:absolute; right:-31px; bottom:-42px; width:106px; height:106px; border:1px solid var(--card-wash,#e7edff); border-radius:50%; content:""; }
.service-card:hover { transform:translateY(-5px); border-color:#cdd8f2; box-shadow:0 16px 35px rgba(32,54,107,.09); }
.service-index { position:absolute; top:19px; right:19px; color:#969aa4; font-size:11px; font-weight:700; font-variant-numeric:tabular-nums; }
.service-icon { display:grid; width:54px; height:54px; margin-bottom:22px; place-items:center; border-radius:14px; background:var(--icon-wash,#edf3ff); color:var(--card-accent,#2558c8); }
.service-icon svg { width:31px; height:31px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.service-card h3 { max-width:220px; margin:0 0 9px; font-size:17px; line-height:1.25; letter-spacing:-.04em; }
.service-card p { margin:0 0 19px; color:#646770; font-size:14px; line-height:1.6; }
.service-type { margin-top:auto; color:var(--card-accent,#2558c8); font-size:10px; font-weight:750; letter-spacing:.085em; }
.service-card:nth-child(2),.service-card:nth-child(6) { --card-accent:#9b6b00; --icon-wash:#fff2c9; --card-wash:#f7e8b6; --card-surface:#fffefa; }
.service-card:nth-child(3),.service-card:nth-child(7) { --card-accent:#4b55b4; --icon-wash:#efefff; --card-wash:#e5e4fc; --card-surface:#fdfdff; }
.service-card:nth-child(4),.service-card:nth-child(8) { --card-accent:#176e82; --icon-wash:#e3f6f8; --card-wash:#d5eef1; --card-surface:#fbffff; }
.benefit-list { gap:12px; }
.benefit { min-height:142px; border-color:#e8e9ed; border-radius:14px; background:linear-gradient(145deg,#fff,#fbfcff); }
.benefit:nth-child(2n) { background:linear-gradient(145deg,#fff,#fffdf6); }
.benefit-icon { display:grid; width:33px; height:33px; margin-bottom:12px; place-items:center; border-radius:9px; background:#edf3ff; color:#2558c8; font-size:17px; }
.benefit:nth-child(2n) .benefit-icon { background:#fff2c9; color:#262626; }
.benefit p { font-size:13px; line-height:1.55; }
.step { border-color:#2558c8; border-radius:0 0 11px 11px; background:linear-gradient(180deg,#f5f8ff,#fff 72%); }
.step:nth-child(2) { border-color:#e8b928; background:linear-gradient(180deg,#fff9e6,#fff 72%); }
.step:nth-child(3) { border-color:#6966bd; background:linear-gradient(180deg,#f5f4ff,#fff 72%); }
.cta-band { border:1px solid #f3df9b; background:linear-gradient(110deg,#fff4ce,#fffaf0 57%,#edf3ff); }
.cta-copy .kicker { color:#2558c8; }
.cta-copy p { color:#555963; }
@media (max-width:900px) { .service-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.service-hero-grid { gap:24px; }.showcase-chip { min-width:145px; }.chip-catalog { left:-12px; }.chip-profile { right:-5px; } }
@media (max-width:640px) { .service-hero-grid { grid-template-columns:1fr; gap:4px; }.service-hero-art { min-height:320px; margin:0 -8px; }.showcase-window { max-width:340px; }.showcase-content { min-height:200px; padding:21px 18px; }.showcase-content strong { font-size:24px; }.showcase-note { top:15px; right:17px; font-size:9px; }.showcase-chip { min-width:132px; padding:9px; }.showcase-chip>span { width:30px; height:30px; }.chip-catalog { top:63px; left:0; }.chip-profile { bottom:27px; right:0; }.service-grid { gap:11px; }.service-card { min-height:290px; padding:19px 16px 17px; }.service-icon { width:48px; height:48px; margin-bottom:18px; }.service-card h3 { font-size:16px; }.service-card p { font-size:13px; }.service-type { font-size:9px; } }
@media (prefers-reduced-motion:reduce) { .service-card,.button { transition:none; } }