/* Safety Computing website
   Colours and typography follow the presentations: light background, black text, yellow accent. */
:root {
  --bg: #F7F6F2;
  --bg-2: #EEECE6;
  --card: #FDFDFB;
  --ink: #1D1D1F;
  --body: #4A4A4F;
  --muted: #6B6B6B;
  --line: #E2DFD6;
  --yellow: #FFBC00;
  --yellow-tint: #FFF4D6;
  --radius: 16px;
  --wrap: 1200px;
  --display: 'Rubik', 'Segoe UI', Arial, sans-serif;
  --text: 'Nunito Sans', 'Segoe UI', Arial, sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--text);
  font-size: 18px;
  line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 { font-family: var(--display); color: var(--ink); margin: 0; text-wrap: balance; }
/* No single word left alone on the last line (site.js also joins the last two words, for browsers
   that do not support this and for the cases the browser does not catch) */
p, li, blockquote, figcaption, summary, td, th, dd, .compare-row > * { text-wrap: pretty; }
h1 { font-size: clamp(40px, 6vw, 68px); font-weight: 700; line-height: 1.05; letter-spacing: -0.01em; }
h2 { font-size: clamp(30px, 4vw, 46px); font-weight: 600; line-height: 1.12; }
h3 { font-size: 22px; font-weight: 600; line-height: 1.25; }
p { margin: 0; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
@media (max-width: 480px) { .wrap { padding-inline: 16px; } }

/* Keeps a hyphenated word together; it must never change how the text looks */
.nw { white-space: nowrap; display: inline !important; font: inherit !important; color: inherit !important; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--card); padding: 10px 16px; z-index: 100; }
.skip:focus { left: 16px; top: 16px; }

/* Eyebrow: black text with a yellow bar */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 14px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink);
}
.eyebrow::before { content: ""; width: 28px; height: 4px; border-radius: 2px; background: var(--yellow); }

.lead { font-size: clamp(18px, 2vw, 21px); color: var(--body); max-width: 76ch; }
/* Lead texts use the width available (up to about 76 characters per line) and are balanced,
   so a two-line lead gets two lines of about equal length instead of a short last line */
.lead { text-wrap: balance; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px; border-radius: 999px;
  font-family: var(--text); font-weight: 800; font-size: 16px; text-decoration: none; cursor: pointer;
  border: 2px solid transparent; transition: transform .15s ease, background-color .15s ease;
}
.btn svg { width: 20px; height: 20px; }
.btn-dark { background: var(--ink); color: var(--card); }
.btn-dark:hover { background: #000; }
.btn-yellow { background: var(--yellow); color: var(--ink); }
.btn-yellow:hover { background: #F2B200; }
.btn-line { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-line:hover { background: var(--card); }
@media (prefers-reduced-motion: no-preference) { .btn:hover { transform: translateY(-1px); } }

/* Icons */
.ico { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico-badge {
  width: 56px; height: 56px; border-radius: 50%; background: var(--yellow); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.ico-badge .ico { width: 28px; height: 28px; }

/* Header */
.topbar { height: 6px; background: var(--yellow); }
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: rgba(247, 246, 242, 0.94); backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: 24px; min-height: 76px; }
.brand img { width: 210px; height: auto; }
.nav { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.nav a { font-weight: 700; font-size: 16px; text-decoration: none; }
.nav a:hover { text-decoration: underline; }
.nav .lang { font-size: 14px; letter-spacing: .08em; border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; }
.header-actions { display: flex; gap: 10px; }
.header-actions .btn { min-height: 36px; padding: 5px 14px; font-size: 14px; gap: 8px; border-width: 1.5px; }
.header-actions .btn svg { width: 17px; height: 17px; }
.menu-toggle { display: none; margin-left: auto; background: none; border: 1px solid var(--line); border-radius: 12px; width: 48px; height: 48px; align-items: center; justify-content: center; cursor: pointer; color: var(--ink); }

@media (max-width: 1200px) {
  .menu-toggle { display: inline-flex; }
  .nav, .header-actions { display: none; }
  .site-header.open .wrap { flex-wrap: wrap; padding-bottom: 16px; }
  .site-header.open .nav { display: flex; flex-direction: column; align-items: flex-start; width: 100%; gap: 14px; margin: 0; padding-top: 8px; border-top: 1px solid var(--line); }
  .site-header.open .header-actions { display: flex; width: 100%; flex-wrap: wrap; }
  .brand img { width: 170px; }
}

/* Sections */
section { padding-block: 88px; }
@media (max-width: 700px) { section { padding-block: 60px; } }
.alt { background: var(--bg-2); }
.section-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 44px; max-width: 920px; }

/* Hero */
.hero { padding-block: 72px 88px; }
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; }
.hero-copy { display: flex; flex-direction: column; gap: 24px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.promise-panel {
  background: var(--yellow); border-radius: 28px; padding: 44px 40px;
  display: flex; flex-direction: column; gap: 26px;
}
.promise { display: flex; align-items: center; gap: 16px; font-family: var(--display); font-size: clamp(20px, 2vw, 25px); line-height: 1.2; }
.promise b { font-weight: 700; }
.promise .tick { width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--yellow); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.promise .tick .ico { width: 24px; height: 24px; stroke-width: 3; }
.panel-note { font-size: 15px; font-weight: 700; border-top: 2px solid rgba(29, 29, 31, 0.18); padding-top: 18px; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }

/* Trust strip */
.trust { border-block: 1px solid var(--line); background: var(--card); padding-block: 28px; }
.trust ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.trust li { display: flex; align-items: flex-start; gap: 14px; font-weight: 800; line-height: 1.3; }
.trust li div > span { display: block; font-weight: 400; font-size: 15px; color: var(--body); }
.trust .ico-badge { width: 44px; height: 44px; }
.trust .ico-badge .ico { width: 22px; height: 22px; }
@media (max-width: 900px) { .trust ul { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .trust ul { grid-template-columns: 1fr; } }

/* Cards */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 960px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.card p { color: var(--body); }
.card .tag { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; background: var(--ink); color: var(--card); border-radius: 999px; padding: 3px 10px; align-self: flex-start; }
.banner { margin-top: 28px; background: var(--yellow); border-radius: var(--radius); padding: 20px 28px; font-weight: 800; font-size: 19px; display: flex; align-items: center; gap: 14px; }

/* Internet section */
.isp { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.isp-facts { display: flex; flex-direction: column; gap: 12px; }
.fact { display: flex; gap: 16px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px; }
.fact .ico-badge { width: 44px; height: 44px; }
.fact .ico-badge .ico { width: 22px; height: 22px; }
.fact h3 { font-size: 18px; }
.fact p { color: var(--body); font-size: 16px; line-height: 1.45; margin-top: 2px; }
@media (max-width: 900px) { .isp { grid-template-columns: 1fr; gap: 32px; } }

/* Packages (not in use) */
.pkg { border-top: 8px solid var(--yellow); padding: 34px; gap: 18px; }
.pkg-head { display: flex; align-items: center; gap: 16px; }
.pkg h3 { font-size: 28px; }
.pkg .pkg-lead { font-size: 19px; color: var(--ink); }
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; color: var(--body); }
.checks li .ico { width: 22px; height: 22px; margin-top: 3px; color: var(--ink); stroke-width: 2.5; }
.more { margin-top: 24px; color: var(--body); }

/* How it fits together */
.flow { display: flex; align-items: stretch; gap: 10px; }
.zone { flex: 1; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.zone-title { background: var(--yellow); padding: 14px 22px; font-size: 14px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.zone ul { list-style: none; margin: 0; padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.zone li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.4; }
.zone li .ico { width: 22px; height: 22px; margin-top: 1px; }
.link { width: 64px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; text-align: center; }
.link .ico { width: 36px; height: 36px; stroke-width: 2.5; }
.flow-note { margin-top: 24px; font-size: 19px; }
@media (max-width: 900px) {
  .flow { flex-direction: column; }
  .link { width: auto; flex-direction: row; padding-block: 4px; }
  .link .ico { transform: rotate(90deg); width: 28px; height: 28px; }
}

/* Security */
.iso { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 48px; align-items: start; }
.iso-badge { background: var(--yellow); border-radius: 24px; padding: 36px; display: flex; flex-direction: column; gap: 12px; }
.iso-badge .big { font-family: var(--display); font-size: clamp(40px, 5vw, 56px); font-weight: 700; line-height: 1; }
.iso-badge > .ico { width: 56px; height: 56px; }
.iso-points { display: flex; flex-direction: column; gap: 24px; }
.point { display: flex; gap: 18px; align-items: flex-start; }
.point p { color: var(--body); margin-top: 4px; }
@media (max-width: 900px) { .iso { grid-template-columns: 1fr; } }

.table-wrap { overflow-x: auto; margin-top: 48px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
table { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 17px; }
th, td { text-align: left; padding: 16px 22px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: var(--yellow); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
tr:last-child td { border-bottom: 0; }
td:first-child { font-weight: 800; }
td:nth-child(2) { color: var(--body); }

/* SLA (not in use) */
.sla .card { border-top: 8px solid var(--yellow); }
.sla .level { font-size: 14px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.sla .pct { font-family: var(--display); font-size: 52px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.sla .hours { font-weight: 800; color: var(--ink); border-top: 1px solid var(--line); padding-top: 14px; }
.note { margin-top: 24px; background: var(--yellow-tint); border-left: 8px solid var(--yellow); border-radius: 12px; padding: 20px 24px; }

/* References */
.refs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.ref { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; }
.ref .logo { height: 64px; width: 100%; display: flex; align-items: center; justify-content: center; }
.ref .logo img { max-height: 64px; width: auto; object-fit: contain; }
.ref b { display: block; }
.ref span { font-size: 15px; color: var(--body); }
@media (max-width: 1080px) { .refs { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .refs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px) { .refs { grid-template-columns: 1fr; } }

/* About us */
.about { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.about-copy { display: flex; flex-direction: column; gap: 18px; }
.about-copy p { color: var(--body); max-width: 60ch; }
.about img { border-radius: 24px; width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
/* Map: the picture is shown until Google Maps is loaded (after consent or a click) */
.map-embed { position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 5 / 4; background: var(--bg-2); }
.map-embed img { display: block; height: 100%; border-radius: 0; }
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-consent { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 18px; border-radius: 16px; background: rgba(255, 255, 255, 0.9); box-shadow: 0 8px 24px rgba(29, 29, 31, 0.15); text-align: center; width: max-content; max-width: calc(100% - 32px); }
.map-consent span { font-size: 13px; color: var(--body); }
.map-consent .btn .ico { width: 18px; height: 18px; }
.map-embed.is-loaded .map-consent, .map-embed.is-loaded img { display: none; }
.about-hl { display: flex; gap: 16px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-left: 6px solid var(--yellow); border-radius: 14px; padding: 18px 20px; }
.about-hl b { font-family: var(--display); font-size: 19px; color: var(--ink); }
.about-hl p { margin-top: 4px; }
@media (max-width: 900px) { .about { grid-template-columns: 1fr; } }

/* Links and remote support */
.help { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.help .card h3 { font-size: 26px; }
.dl { display: flex; flex-wrap: wrap; gap: 12px; }
.linklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.linklist a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 4px; border-bottom: 1px solid var(--line); text-decoration: none; }
.linklist li:last-child a { border-bottom: 0; }
.linklist a b { display: block; }
.linklist a span { color: var(--body); font-size: 15px; }
.linklist a:hover b { text-decoration: underline; }
@media (max-width: 900px) { .help { grid-template-columns: 1fr; } }

/* Contact */
.contact { display: grid; grid-template-columns: 1fr minmax(0, 520px); gap: 48px; align-items: start; }
.contact-info { display: flex; flex-direction: column; gap: 34px; }
.contact-row { display: flex; gap: 16px; align-items: flex-start; }
.contact-row .ico-badge { width: 48px; height: 48px; }
.contact-row .ico-badge .ico { width: 24px; height: 24px; }
.contact-row small { display: block; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.contact-row a, .contact-row p { font-size: 19px; font-weight: 700; }
.form { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
label { font-weight: 800; font-size: 14px; }
input, textarea {
  font: inherit; font-size: 16px; color: var(--ink); background: var(--bg);
  border: 1px solid #CFCBC0; border-radius: 10px; padding: 9px 12px; width: 100%;
}
textarea { min-height: 96px; resize: vertical; }
input:focus-visible, textarea:focus-visible { outline: 3px solid var(--yellow); outline-offset: 0; border-color: var(--ink); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .privacy { grid-column: 1 / -1; font-size: 14px; color: var(--muted); }
.form .btn { grid-column: 1 / -1; justify-self: start; }
.status { grid-column: 1 / -1; border-radius: 12px; padding: 14px 18px; font-weight: 700; }
.status.ok { background: #E4F4E8; color: #14532D; }
.status.err { background: #FDE8E6; color: #8A1C12; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .form { grid-template-columns: 1fr; padding: 22px; } }

/* Footer */
.site-footer { background: var(--card); border-top: 1px solid var(--line); padding-block: 48px; font-size: 16px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
.footer-grid h3 { font-size: 16px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.footer-grid p { color: var(--body); }
.footer-bottom { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--muted); }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; } }

/* Text button (looks like a link) */
.textbtn { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Cookie banner */
.cookie {
  position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 90;
  display: flex; justify-content: center;
}
.cookie[hidden] { display: none; }
.cookie-inner {
  max-width: 880px; width: 100%; background: var(--card); border: 1px solid var(--line); border-top: 6px solid var(--yellow);
  border-radius: 18px; box-shadow: 0 18px 48px rgba(29, 29, 31, 0.18);
  padding: 22px 26px; display: flex; gap: 24px; align-items: center; justify-content: space-between;
}
.cookie h2 { font-size: 20px; margin-bottom: 4px; }
.cookie p { font-size: 16px; color: var(--body); max-width: 60ch; }
.cookie-actions { display: flex; gap: 10px; flex: none; }
.cookie-actions .btn { min-height: 44px; }
@media (max-width: 720px) {
  .cookie-inner { flex-direction: column; align-items: stretch; }
  .cookie-actions { flex-direction: column-reverse; }
}

/* Privacy policy */
.legal { padding-block: 64px 96px; }
.legal-body { max-width: 780px; display: flex; flex-direction: column; gap: 14px; }
.legal-body h1 { font-size: clamp(34px, 5vw, 52px); margin-top: 6px; }
.legal-body h2 { font-size: 24px; margin-top: 26px; }
.legal-body p, .legal-body li { color: var(--body); }
.legal-body ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.legal-body b { color: var(--ink); }
.legal-date { font-size: 15px; color: var(--muted); }

/* Solutions */
.sol { padding: 32px; gap: 16px; border-top: 8px solid var(--yellow); }
.sol-head { display: flex; align-items: center; gap: 16px; }
.sol-head > div { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.sol h3 { font-size: 25px; }
.sol .sol-lead { color: var(--ink); font-size: 18px; }
.pkg-tag { font-style: normal; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; background: var(--yellow); color: var(--ink); border-radius: 999px; padding: 2px 9px; margin-left: 6px; white-space: nowrap; vertical-align: 2px; }
.more a { font-weight: 700; }

/* ISO badge */
.iso-meta { font-size: 15px; }
.iso-badge .btn { align-self: flex-start; margin-top: 8px; }

/* Contact: sub lines */
.contact-row .sub { display: block; font-weight: 400; font-size: 17px; }
.contact-row span.sub a { display: inline; font-weight: 400; font-size: 17px; }
.contact-row div > a { display: block; width: fit-content; }
/* Contact details are links without an underline; hovering shows a yellow line */
.contact-info .contact-row a { text-decoration: none; }
.contact-info .contact-row a:hover { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; }

/* Illustration below "How it fits together" (not in use) */
.illu { margin: 40px 0 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 28px 20px; }
.illu-scroll { overflow-x: auto; }
.illu svg { display: block; width: 100%; min-width: 680px; height: auto; }
.illu-legend { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 15px; font-weight: 700; color: var(--body); }
.illu-legend .swatch { width: 28px; height: 12px; border-radius: 6px; background: var(--yellow); border: 1.5px solid var(--ink); flex: none; }
@media (max-width: 560px) { .illu { padding: 16px; } }

/* Small adjustments */
.isp-cta { margin-top: 28px; }
#contact .section-head { max-width: none; }
#contact .section-head .lead { max-width: none; }
.form .field { gap: 4px; }
.form .btn { min-height: 44px; padding: 10px 20px; }
.form .privacy { font-size: 13px; }

/* Language switcher with flags */
.langs { display: inline-flex; align-items: center; gap: 8px; }
.flag { display: inline-flex; width: 28px; height: 20px; border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 1px rgba(29, 29, 31, 0.25); opacity: 0.55; transition: opacity .15s ease, box-shadow .15s ease; }
.flag svg { width: 100%; height: 100%; display: block; }
.flag:hover, .flag:focus-visible { opacity: 1; }
.flag.current { opacity: 1; box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--yellow); }

.nav a, .header-actions .btn { white-space: nowrap; }
@media (max-width: 1320px) { .nav { gap: 16px; } .site-header .wrap { gap: 18px; } .brand img { width: 180px; } }

/* ================= Chat ================= */
#sc-chat { --led-on: #22C55E; --led-off: #A3A3A3; position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 80; font-family: var(--text); }
#sc-chat[hidden] { display: none; }
#sc-chat svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.scc-led { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--led-off); flex: none; position: relative; }
.is-online .scc-led { background: var(--led-on); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
@media (prefers-reduced-motion: no-preference) {
  .is-online .scc-led { animation: scc-pulse 2.2s ease-out infinite; }
}
@keyframes scc-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.scc-launch { position: relative; width: 60px; height: 60px; border-radius: 50%; border: 0; background: var(--ink); color: var(--yellow); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 10px 28px rgba(29, 29, 31, 0.28); margin-left: auto; }
.scc-launch svg { width: 28px; height: 28px; }
.scc-launch .scc-led { position: absolute; top: 4px; right: 4px; width: 14px; height: 14px; border: 2px solid var(--ink); }
.scc-badge { position: absolute; top: -4px; left: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--yellow); color: var(--ink); font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.scc-badge[hidden] { display: none; }
.is-open .scc-launch { display: none; }

.scc-teaser { position: absolute; right: 0; bottom: 74px; display: flex; align-items: flex-start; gap: 4px; width: max-content; max-width: min(320px, calc(100vw - 40px)); background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 14px 36px rgba(29, 29, 31, 0.16); }
.scc-teaser[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .scc-teaser:not([hidden]) { animation: scc-in .45s cubic-bezier(.2, .9, .3, 1.1); } }
@keyframes scc-in { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
.scc-teaser-btn { display: flex; align-items: center; gap: 12px; text-align: left; background: none; border: 0; padding: 16px 4px 16px 18px; font: inherit; font-weight: 700; font-size: 16px; color: var(--ink); cursor: pointer; line-height: 1.35; }
.scc-teaser-x { background: none; border: 0; color: var(--muted); padding: 10px; cursor: pointer; border-radius: 10px; }
.scc-teaser-x svg { width: 18px; height: 18px; }

.scc-panel { width: 370px; max-width: calc(100vw - 40px); height: min(560px, calc(100vh - 60px)); background: var(--card); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 18px 50px rgba(29, 29, 31, 0.22); display: flex; flex-direction: column; overflow: hidden; }
.scc-panel[hidden] { display: none; }
.scc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; background: var(--yellow); }
.scc-head-text { display: flex; flex-direction: column; gap: 2px; }
.scc-head-text strong { font-family: var(--display); font-size: 18px; }
.scc-state { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; }
.scc-head .scc-led { border: 2px solid var(--ink); width: 12px; height: 12px; }
.scc-icon-btn { background: none; border: 0; color: var(--ink); padding: 6px; border-radius: 10px; cursor: pointer; }
.scc-icon-btn:hover { background: rgba(29, 29, 31, 0.08); }

.scc-msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--bg); }
.scc-m { display: flex; flex-direction: column; max-width: 85%; gap: 3px; }
.scc-bubble { padding: 10px 14px; border-radius: 16px; font-size: 15px; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; }
.scc-visitor { align-self: flex-end; }
.scc-visitor .scc-bubble { background: var(--ink); color: var(--card); border-bottom-right-radius: 4px; }
.scc-agent { align-self: flex-start; }
.scc-agent .scc-bubble { background: var(--card); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.scc-name { font-size: 12px; font-weight: 800; color: var(--muted); padding-left: 4px; }
.scc-system { align-self: center; max-width: 92%; }
.scc-system .scc-bubble { background: transparent; color: var(--body); font-size: 14px; text-align: center; padding: 4px 8px; }

.scc-contact { padding: 14px 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; background: var(--yellow-tint); }
.scc-contact[hidden] { display: none; }
.scc-contact-text { font-size: 14px; font-weight: 700; }
.scc-contact input { font: inherit; font-size: 15px; padding: 9px 12px; border: 1px solid #CFCBC0; border-radius: 10px; background: var(--card); }
.scc-error { color: #8A1C12; font-size: 13px; font-weight: 700; }
.scc-error[hidden] { display: none; }
.scc-btn { align-self: flex-start; background: var(--ink); color: var(--card); border: 0; border-radius: 999px; padding: 9px 18px; font: inherit; font-weight: 800; font-size: 14px; cursor: pointer; }
.scc-btn:disabled { opacity: .6; }

.scc-ended { padding: 14px 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.scc-ended[hidden] { display: none; }

.scc-compose { display: flex; align-items: flex-end; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
.scc-compose[hidden] { display: none; }
.scc-compose textarea { flex: 1; resize: none; font: inherit; font-size: 15px; line-height: 1.4; padding: 10px 12px; border: 1px solid #CFCBC0; border-radius: 12px; background: var(--bg); max-height: 120px; }
.scc-compose textarea:focus-visible, .scc-contact input:focus-visible { outline: 3px solid var(--yellow); outline-offset: 0; border-color: var(--ink); }
.scc-send { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 0; background: var(--yellow); color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.scc-send svg { width: 20px; height: 20px; }
.scc-send:disabled { opacity: .5; }
.scc-foot { padding: 0 16px 10px; text-align: right; }
.scc-link { background: none; border: 0; font: inherit; font-size: 13px; color: var(--muted); text-decoration: underline; cursor: pointer; }
.scc-link[hidden] { display: none; }

@media (max-width: 600px) {
  #sc-chat { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  #sc-chat.is-open { left: 0; right: 0; bottom: 0; }
  .is-open .scc-panel { width: 100%; max-width: none; height: 85vh; border-radius: 20px 20px 0 0; }
}
/* Chat: reset general site styles */
#sc-chat section.scc-panel { padding: 0; }
#sc-chat textarea, #sc-chat input { min-height: 0; width: auto; }
#sc-chat .scc-compose textarea { height: 44px; }
#sc-chat .scc-contact input { width: 100%; }
#sc-chat header { position: static; }

/* ISO box: compact, level with the points next to it */
.iso { align-items: center; }
.iso-badge { padding: 24px 26px; gap: 6px; border-radius: 20px; }
.iso-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.iso-badge > .iso-head .ico { width: 36px; height: 36px; }
.iso-badge .big { font-size: clamp(30px, 3.4vw, 38px); }
.iso-badge b { font-size: 16px; }
.iso-badge > span { font-size: 15px; }
.iso-badge .iso-meta { font-size: 13px; }
.iso-badge .btn { min-height: 38px; padding: 7px 16px; font-size: 14px; margin-top: 8px; }

/* Yellow line at the top that stays when scrolling */
.topbar { display: none; }
.site-header { border-top: 6px solid var(--yellow); }

/* Faint network pattern in the background */
:root { --pattern: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><g fill='none' stroke='%231D1D1F' stroke-opacity='0.05' stroke-width='1'><path d='M0 40L40 20L90 50L140 30L160 40M40 20L55 90L90 50L120 110L140 30M55 90L10 130L0 120M55 90L100 140L120 110L160 120M10 130L30 160M120 110L150 160M40 20L30 0M140 30L150 0'/></g><g fill='%231D1D1F' fill-opacity='0.09'><circle cx='40' cy='20' r='2.2'/><circle cx='90' cy='50' r='2.2'/><circle cx='140' cy='30' r='2.2'/><circle cx='55' cy='90' r='2.2'/><circle cx='120' cy='110' r='2.2'/><circle cx='10' cy='130' r='2.2'/><circle cx='100' cy='140' r='2.2'/></g></svg>"); }
body { background-image: var(--pattern); background-size: 160px 160px; }
.alt { background-image: var(--pattern); background-size: 160px 160px; }
a[href^="tel:"] { white-space: nowrap; }

/* Black header with white logo */
.site-header { background: #000; backdrop-filter: none; border-bottom-color: #000; color: #fff; }
.site-header .nav a { color: #fff; }
.site-header :focus-visible { outline-color: var(--yellow); }
.site-header .btn-line { border-color: #fff; color: #fff; }
.site-header .btn-line:hover { background: rgba(255, 255, 255, 0.12); }
.site-header .menu-toggle { color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.site-header .flag { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35); opacity: 0.7; }
.site-header .flag:hover, .site-header .flag:focus-visible { opacity: 1; }
.site-header .flag.current { opacity: 1; box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--yellow); }
@media (max-width: 1200px) { .site-header.open .nav { border-top-color: rgba(255, 255, 255, 0.18); } }

/* Black footer, matching the header */
.site-footer { background: #000; color: #fff; border-top: 6px solid var(--yellow); }
.site-footer a { color: #fff; }
.site-footer .footer-grid p { color: #C9C9CC; }
.site-footer .footer-grid h3 { color: var(--yellow); }
.site-footer .footer-bottom { border-top-color: rgba(255, 255, 255, 0.18); color: #A8A8AD; }
.site-footer :focus-visible { outline-color: var(--yellow); }
.site-footer .footer-bottom a { color: inherit; }

/* Header layout: menu links centred between the logo and the flags, flags lighter on black */
@media (min-width: 1201px) {
  .site-header .nav { flex: 1; margin-left: 0; }
  .site-header .nav > :first-child { margin-left: auto; }
  .site-header .langs { margin-left: auto; }
}
.site-header .flag { opacity: 0.95; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55); }
.site-header .flag svg { filter: brightness(1.15) saturate(1.1); }
/* Slightly larger menu text */
.site-header .nav a { font-size: 17px; }
.site-header .header-actions .btn { font-size: 15px; }

/* ================= Animations =================
   All motion is skipped when the visitor has asked for reduced motion.
   Content is never hidden without JavaScript: scroll reveal classes are only added by site.js. */
@media (prefers-reduced-motion: no-preference) {

  /* 1. Hero on page load: text slides in, then the three promises tick in one by one */
  @keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  @keyframes tick-in { 0% { transform: scale(0.4); opacity: 0; } 70% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
  .hero-copy > * { animation: fade-up .6s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-copy > :nth-child(1) { animation-delay: .05s; }
  .hero-copy > :nth-child(2) { animation-delay: .12s; }
  .hero-copy > :nth-child(3) { animation-delay: .2s; }
  .hero-copy > :nth-child(4) { animation-delay: .28s; }
  .promise-panel { animation: fade-up .6s cubic-bezier(.2, .7, .2, 1) .15s both; }
  .promise { animation: fade-up .5s ease-out both; }
  .promise .tick { animation: tick-in .45s ease-out both; }
  .promise:nth-child(1), .promise:nth-child(1) .tick { animation-delay: .45s; }
  .promise:nth-child(2), .promise:nth-child(2) .tick { animation-delay: .65s; }
  .promise:nth-child(3), .promise:nth-child(3) .tick { animation-delay: .85s; }
  .panel-note { animation: fade-up .5s ease-out 1.05s both; }
  .trust li { animation: fade-up .5s ease-out both; }
  .trust li:nth-child(1) { animation-delay: .5s; }
  .trust li:nth-child(2) { animation-delay: .58s; }
  .trust li:nth-child(3) { animation-delay: .66s; }
  .trust li:nth-child(4) { animation-delay: .74s; }

  /* 2. "How it fits together": a yellow pulse travels from the office, via our cloud, to Microsoft 365 */
  .link { position: relative; }
  .link::before, .link::after { content: ""; position: absolute; pointer-events: none; }
  .link::before { left: -10px; right: -10px; top: 50%; border-top: 2px dashed rgba(29, 29, 31, 0.25); }
  .link::after { top: 50%; left: 0; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 3px rgba(255, 188, 0, 0.3); opacity: 0; }
  .link .ico { position: relative; z-index: 1; }
  .flow.in-view .link::after { animation: flow-x 3.2s linear infinite; }
  .flow.in-view .link ~ .link::after { animation-delay: 1.6s; }
  /* Each zone lights up as the pulse reaches it: office, our cloud, then Microsoft 365 */
  .zone { transition: box-shadow .3s ease; }
  .flow.in-view .zone { animation: zone-glow 3.2s ease-out infinite; }
  .flow.in-view .zone:nth-child(3) { animation-delay: 1.45s; }
  .flow.in-view .zone:nth-child(5) { animation-delay: 3.05s; }
  @keyframes zone-glow { 0% { box-shadow: 0 0 0 0 rgba(255, 188, 0, 0); } 6% { box-shadow: 0 0 0 4px rgba(255, 188, 0, 0.55); } 30%, 100% { box-shadow: 0 0 0 0 rgba(255, 188, 0, 0); } }
  @keyframes flow-x { 0% { left: 0; opacity: 0; } 10% { opacity: 1; } 45% { left: calc(100% - 12px); opacity: 1; } 55%, 100% { left: calc(100% - 12px); opacity: 0; } }
  @media (max-width: 900px) {
    .link { min-height: 44px; }
    .link::before { left: 50%; right: auto; top: -10px; bottom: -10px; border-top: 0; border-left: 2px dashed rgba(29, 29, 31, 0.25); }
    .link::after { left: 50%; top: 0; margin: 0 0 0 -6px; }
    .flow.in-view .link::after { animation-name: flow-y; }
    @keyframes flow-y { 0% { top: 0; opacity: 0; } 10% { opacity: 1; } 45% { top: calc(100% - 12px); opacity: 1; } 55%, 100% { top: calc(100% - 12px); opacity: 0; } }
  }

  /* 3. Scroll reveal: elements below the fold slide gently up the first time they come into view */
  html .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease-out, transform .6s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--reveal-delay, 0s); }
  html .reveal.in-view { opacity: 1; transform: none; }

  /* 4. Hover: cards lift slightly, arrows on buttons nudge to the right */
  .sol, .ref, .fact, .help .card, .point { transition: transform .2s ease, box-shadow .2s ease; }
  .sol:hover, .ref:hover, .fact:hover, .help .card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(29, 29, 31, 0.08); }
  .btn .ico-arrow { transition: transform .2s ease; }
  .btn:hover .ico-arrow { transform: translateX(4px); }
}

/* Menu links jump to a section with some air below the fixed header */
main section[id] { scroll-margin-top: 44px; }
#remote-support { scroll-margin-top: 120px; }
@media (max-width: 700px) { main section[id] { scroll-margin-top: 64px; } }

/* Active menu item while scrolling */
.site-header .nav a.is-active { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; text-underline-offset: 9px; }
.site-header .nav a:hover { text-decoration-thickness: 2px; text-underline-offset: 9px; }

/* Contact form: error text under the field, and the busy state of the button */
.field-error { font-size: 14px; font-weight: 700; color: #A3261A; }
.form [aria-invalid="true"] { border-color: #A3261A; box-shadow: 0 0 0 1px #A3261A; }
.form button[aria-busy="true"] { opacity: .75; cursor: progress; }

/* Page not found (404) */
.notfound { padding-block: 120px 140px; }
.notfound h1 { font-size: clamp(38px, 5vw, 60px); line-height: 1.05; }
.notfound-links { display: flex; flex-wrap: wrap; gap: 12px; }

/* Chat button and cookie banner arrive calmly: the banner rises from the bottom,
   the chat button slides in from the right and settles with a soft bounce */
@media (prefers-reduced-motion: no-preference) {
  .cookie:not([hidden]) .cookie-inner { animation: cookie-in .5s cubic-bezier(.2, .8, .2, 1) .3s both; }
  @keyframes cookie-in { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
  #sc-chat.scc-enter .scc-launch { animation: scc-launch-in .75s cubic-bezier(.25, 1.35, .45, 1) both; }
  @keyframes scc-launch-in { 0% { opacity: 0; transform: translateX(110px) rotate(20deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
  /* One gentle pulse if the chat has not been opened after a while (only once per visit) */
  .scc-launch.scc-pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--yellow); animation: scc-pulse 1.6s ease-out both; pointer-events: none; }
  @keyframes scc-pulse { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.6); } }
}

/* Text only for screen readers and search engines */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* "Read more" link at the bottom of each solution box: small, outlined */
.btn-more { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 16px; border: 1.5px solid var(--ink); border-radius: 999px; font-size: 15px; font-weight: 700; color: var(--ink); text-decoration: none; transition: background-color .15s ease, color .15s ease; }
.btn-more .ico { width: 16px; height: 16px; }
.btn-more:hover { background: var(--ink); color: var(--card); }
.sol .checks { margin-bottom: 8px; }
/* The fifth solution spans the full width under the other four: title, lead and button on the left,
   the points on the right */
@media (min-width: 901px) {
  .sol-wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); grid-template-rows: auto auto 1fr; column-gap: 48px; row-gap: 16px; }
  .sol-wide > .sol-head, .sol-wide > .sol-lead, .sol-wide > .btn-more { grid-column: 1; }
  .sol-wide > .checks { grid-column: 2; grid-row: 1 / span 3; align-self: center; margin-bottom: 0; }
  .sol-wide > .btn-more { align-self: end; justify-self: start; }
}
@media (min-width: 641px) and (max-width: 900px) { .sol-wide { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: no-preference) {
  .btn-more .ico-arrow { transition: transform .2s ease; }
  .btn-more:hover .ico-arrow { transform: translateX(3px); }
}

/* Service pages */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 15px; color: var(--body); }
.breadcrumb a { color: var(--body); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb [aria-current] { color: var(--ink); font-weight: 700; }
.service-hero .hero-copy h1 { font-size: clamp(40px, 5.2vw, 66px); }
.service-panel { gap: 22px; }
.service-panel .promise { font-size: clamp(19px, 1.8vw, 23px); }
.service-items { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 40px; }
.service-items .point h3 { font-size: 21px; }
.service-why .card h3 { font-size: 21px; }
.service-cta { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; background: var(--ink); color: #fff; border-radius: 24px; border-top: 6px solid var(--yellow); padding: 36px 40px; }
.service-cta h2 { color: #fff; font-size: clamp(26px, 3vw, 34px); }
.service-cta p { color: #C9C9CC; margin-top: 6px; }
.btn-line-light { border-color: #fff; color: #fff; background: transparent; }
.btn-line-light:hover { background: rgba(255, 255, 255, 0.12); }
.service-other-title { font-size: 24px; margin: 48px 0 18px; }
.service-link { flex-direction: row; align-items: center; gap: 16px; padding: 20px 22px; text-decoration: none; color: var(--ink); }
.service-link b { font-family: var(--display); font-size: 19px; line-height: 1.25; flex: 1; }
.service-link .more-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--body); white-space: nowrap; }
.service-link .more-link .ico { width: 16px; height: 16px; }
@media (max-width: 900px) { .service-items { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: no-preference) {
  .service-link { transition: transform .2s ease, box-shadow .2s ease; }
  .service-link:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(29, 29, 31, 0.08); }
  .service-link:hover .ico-arrow { transform: translateX(3px); }
  .service-link .ico-arrow { transition: transform .2s ease; }
}

/* ================= Micro-animations =================
   Small reactions that make the page feel alive. Everything is off when the visitor prefers reduced motion. */
@media (prefers-reduced-motion: no-preference) {

  /* 1. Icons react when the box they belong to is hovered */
  .ico-badge .ico { transition: transform .35s cubic-bezier(.3, 1.5, .5, 1); }
  .ico-badge .ico * { transform-box: view-box; transform-origin: 12px 12px; }
  @media (hover: hover) {
    :is(.sol, .fact, .point, .help .card, .service-why .card, .service-link, .trust li, .contact-row):hover .ico-badge .ico { transform: scale(1.12); }
    /* WiFi: the waves light up from the dot and outwards */
    @keyframes wifi-wave { 0%, 100% { opacity: 1; } 30% { opacity: .15; } }
    :is(.sol, .fact, .point, .card, .trust li):hover .ico-wifi path { animation: wifi-wave .9s ease-in-out; }
    :is(.sol, .fact, .point, .card, .trust li):hover .ico-wifi path:nth-child(3) { animation-delay: .1s; }
    :is(.sol, .fact, .point, .card, .trust li):hover .ico-wifi path:nth-child(1) { animation-delay: .2s; }
    :is(.sol, .fact, .point, .card, .trust li):hover .ico-wifi path:nth-child(2) { animation-delay: .3s; }
    /* Shield: the check mark is drawn */
    @keyframes draw-check { from { stroke-dashoffset: 12; } to { stroke-dashoffset: 0; } }
    :is(.sol, .fact, .point, .card, .trust li):hover .ico-shield path:nth-child(2) { stroke-dasharray: 12; animation: draw-check .5s ease-out; }
    /* Mail and phone: a small wiggle */
    @keyframes wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-9deg); } 75% { transform: rotate(7deg); } }
    :is(.fact, .point, .card, .contact-row):hover :is(.ico-mail, .ico-phone) * { animation: wiggle .45s ease-in-out; }
    /* Lock: the shackle lifts */
    :is(.fact, .point, .card, .trust li):hover .ico-lock path { transform: translateY(-2px); transition: transform .25s ease; }
    /* Clock: the hand turns */
    :is(.fact, .point, .card, .trust li):hover .ico-clock path { transform: rotate(360deg); transition: transform .8s ease-in-out; }
    /* Search: the magnifier moves a little */
    :is(.fact, .point, .card, .trust li):hover .ico-search * { transform: translate(-1.5px, -1.5px); transition: transform .3s ease; }
    /* Database: the layers bounce */
    @keyframes stack { 0%, 100% { transform: none; } 40% { transform: translateY(-2px); } }
    :is(.sol, .fact, .point, .card, .trust li):hover .ico-database > :first-child { animation: stack .5s ease-in-out; }
  }

  /* 2. The check marks in the solution boxes are drawn one by one when the box comes into view */
  .checks.checks-pending li .ico path { stroke-dasharray: 24; stroke-dashoffset: 24; }
  .checks.checks-on li .ico path { stroke-dashoffset: 0; transition: stroke-dashoffset .45s ease-out; transition-delay: calc(var(--i, 0) * .12s + .25s); }

  /* 3. The yellow line under the active menu item glides between items (desktop menu) */
  @media (min-width: 1201px) {
    .site-header .nav { position: relative; }
    .nav-indicator { position: absolute; left: 0; top: 0; height: 3px; width: 0; border-radius: 2px; background: var(--yellow); opacity: 0; pointer-events: none;
      transition: transform .4s cubic-bezier(.3, .9, .3, 1), width .4s cubic-bezier(.3, .9, .3, 1), opacity .25s ease; }
    .site-header .nav.has-indicator a.is-active { text-decoration: none; }
  }

  /* 4. The small yellow bar in front of section labels grows in */
  .eyebrow::before { transform-origin: left center; }
  .hero .eyebrow::before { animation: bar-grow .6s cubic-bezier(.3, .9, .3, 1) .2s both; }
  .eyebrow.bar-pending::before { transform: scaleX(0); }
  .eyebrow.bar-on::before { transform: scaleX(1); transition: transform .6s cubic-bezier(.3, .9, .3, 1) .1s; }
  @keyframes bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

  /* 5. Text links: a yellow underline glides in from the left on hover */
  :is(main, .site-footer, .cookie) a:not([class]), .contact-row a, .breadcrumb a {
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor), linear-gradient(var(--yellow), var(--yellow));
    background-size: 100% 1px, 0 3px;
    background-position: 0 100%, 0 100%;
    background-repeat: no-repeat;
    padding-bottom: 2px;
    transition: background-size .3s ease;
  }
  :is(main, .site-footer, .cookie) a:not([class]):hover, .contact-row a:hover, .breadcrumb a:hover { background-size: 100% 1px, 100% 3px; }
  /* Contact details: no underline at rest, only the yellow line on hover */
  .contact-info .contact-row a { background-size: 0 1px, 0 3px; }
  .contact-info .contact-row a:hover { background-size: 0 1px, 100% 3px; text-decoration: none; }
  .site-header .nav-top {
    background: linear-gradient(var(--yellow), var(--yellow)) 0 100% / 0 2px no-repeat;
    padding-bottom: 8px; margin-bottom: -8px;
    transition: background-size .3s ease;
  }
  .site-header .nav-top:hover { text-decoration: none; background-size: 100% 2px; }
  @media (max-width: 1200px) { .site-header .nav-top { background: none; padding-bottom: 0; margin-bottom: 0; } }

  /* 6. Buttons are pressed in slightly when clicked */
  .btn, .btn-more, .scc-launch, .scc-send, .scc-btn { transition: transform .15s ease, background-color .15s ease, color .15s ease; }
  .btn:active, .btn-more:active, .scc-launch:active, .scc-send:active, .scc-btn:active { transform: scale(.96); }

  /* 7. Smooth change between pages (browsers that support it; others change page as usual) */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-out .22s ease both; }
  ::view-transition-new(root) { animation: vt-in .32s ease both; }
  @keyframes vt-out { to { opacity: 0; } }
  @keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }
  .site-header { view-transition-name: site-header; }
  ::view-transition-group(site-header) { animation: none; }

  /* 9. Contact form: a check mark is drawn when the message has been sent */
  .status-check { width: 30px; height: 30px; flex: none; }
  .status-check circle { stroke-dasharray: 70; stroke-dashoffset: 70; animation: draw-ring .6s ease-out .2s forwards; }
  .status-check path { stroke-dasharray: 16; stroke-dashoffset: 16; animation: draw-tick .35s ease-out .7s forwards; }
  @keyframes draw-ring { to { stroke-dashoffset: 0; } }
  @keyframes draw-tick { to { stroke-dashoffset: 0; } }
}
.status.ok { display: flex; align-items: center; gap: 12px; }
.status-check { width: 30px; height: 30px; flex: none; }
.nav-indicator { position: absolute; display: none; }
@media (min-width: 1201px) { .nav-indicator { display: block; } }

/* ================= New content sections (inspired by modern MSP sites, in our own style) ================= */

/* Small trust points under the hero buttons */
.hero-points { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 15px; font-weight: 700; color: var(--body); }
.hero-points li { display: inline-flex; align-items: center; gap: 8px; }
.hero-points li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 3px rgba(255, 188, 0, 0.25); }

/* Comparison table: an in-house IT person, or us */
.compare { background: var(--card); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.compare-row { display: grid; grid-template-columns: 0.75fr 1fr 1fr; }
.compare-row > span { padding: 18px 24px; border-top: 1px solid var(--line); display: flex; gap: 12px; align-items: flex-start; line-height: 1.45; }
.compare-head > span { border-top: 0; padding-block: 20px 16px; font-family: var(--display); font-size: 19px; font-weight: 700; color: var(--ink); }
.compare-label { font-weight: 800; color: var(--ink); }
.compare-them { color: var(--body); }
.compare-them .ico { width: 20px; height: 20px; flex: none; margin-top: 2px; color: #9A968C; }
.compare-us { background: var(--yellow-tint); border-left: 4px solid var(--yellow); color: var(--ink); font-weight: 700; }
.compare-us .ico { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.compare-head .compare-us { background: var(--yellow); }
@media (max-width: 760px) {
  .compare-head { display: none; }
  .compare-row { grid-template-columns: 1fr; border-top: 1px solid var(--line); }
  .compare-row:first-of-type + .compare-row { border-top: 0; }
  .compare-row > span { border-top: 0; padding: 10px 18px; }
  .compare-label { padding-top: 18px !important; font-size: 18px; }
  .compare-row > .compare-them, .compare-row > .compare-us { display: grid; grid-template-columns: 20px 1fr; column-gap: 10px; row-gap: 4px; }
  .compare-them::before, .compare-us::before { content: attr(data-label); grid-column: 1 / -1; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .compare-us { margin: 0 12px 14px; border-radius: 10px; }
}

/* Getting started: the steps as a staircase. Each step moves one notch to the right, from step 1 at the
   left edge to step 7 at the right edge, joined by a dashed stair line. On narrow screens: a list going down. */
.steps-wrap { position: relative; }
.steps { list-style: none; margin: 0; padding: 0; }
.step { position: relative; display: grid; grid-template-columns: 46px 1fr; column-gap: 16px; row-gap: 2px; align-content: start; padding-bottom: 22px; }
.step-no { grid-row: span 2; width: 46px; height: 46px; border-radius: 50%; background: var(--yellow); color: var(--ink); font-family: var(--display); font-weight: 700; font-size: 19px; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 6px var(--bg); position: relative; }
.alt .step-no { box-shadow: 0 0 0 6px var(--bg-2); }
.step h3 { font-size: 18px; margin-top: 10px; }
.step p { font-size: 15px; color: var(--body); line-height: 1.45; }
.step:not(:last-child)::before { content: ""; position: absolute; left: 22px; top: 52px; bottom: 6px; border-left: 2px dashed rgba(29, 29, 31, 0.22); }
.steps-note { margin: 18px auto 0; width: fit-content; max-width: 100%; display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px 20px; font-weight: 700; }
.steps-note .ico { width: 20px; height: 20px; flex: none; }
@media (min-width: 768px) {
  /* --dx is the notch each step moves to the right, so the last step ends exactly at the right edge */
  .steps { container-type: inline-size; --item: 440px; --row: 88px; --dx: calc((100cqw - var(--item)) / 6); }
  .step { width: var(--item); height: var(--row); padding-bottom: 0; margin-left: calc(var(--dx) * var(--i, 0)); }
  .step h3 { margin-top: 8px; }
  .step:not(:last-child)::before { top: 52px; bottom: auto; width: calc(var(--dx) - 30px); height: calc(var(--row) - 29px);
    border-bottom: 2px dashed rgba(29, 29, 31, 0.22); border-bottom-left-radius: 14px; }
  .steps-note { margin-top: 28px; }
}
@media (min-width: 1101px) {
  /* The note fills the empty corner bottom left, beside the last steps */
  .steps-note { position: absolute; left: 0; bottom: 0; margin: 0; max-width: calc((100% - 440px) / 6 * 4 - 24px); }
}

/* FAQ: questions that open and close */
.faq-wrap { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 48px; align-items: start; }
.faq-wrap .section-head { margin-bottom: 0; position: sticky; top: 120px; }
.faq { display: flex; flex-direction: column; gap: 10px; }
.faq-item { background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; font-family: var(--display); font-weight: 700; font-size: 19px; color: var(--ink); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon { width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--yellow); position: relative; }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: var(--ink); border-radius: 1px; }
.faq-icon::after { transform: rotate(90deg); }
.faq-item[open] .faq-icon::after { transform: rotate(0); }
.faq-item[open] { border-color: #CFC9BA; }
.faq-answer { padding: 0 22px 20px; color: var(--body); max-width: 68ch; }
@media (max-width: 900px) { .faq-wrap { grid-template-columns: 1fr; gap: 28px; } .faq-wrap .section-head { position: static; } }

/* About us: a word from the CEO, and our green profile */
.about-more { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; }
.ceo-card { margin: 0; background: var(--ink); color: #fff; border-radius: 24px; border-top: 6px solid var(--yellow); padding: 32px 34px; display: flex; flex-direction: column; gap: 18px; }
.ceo-card .eyebrow { color: #fff; }
.ceo-card blockquote { margin: 0; }
.ceo-card blockquote p { font-family: var(--display); font-size: clamp(20px, 2vw, 24px); line-height: 1.4; color: #fff; }
.ceo-card blockquote p::before { content: "«"; color: var(--yellow); margin-right: 2px; }
.ceo-card blockquote p::after { content: "»"; color: var(--yellow); margin-left: 2px; }
.ceo-card figcaption { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.ceo-card figcaption b { display: block; font-size: 17px; }
.ceo-card figcaption span span { display: block; font-size: 15px; color: #C9C9CC; }
.ceo-card.has-photo { display: grid; grid-template-columns: 128px 1fr; grid-template-rows: auto 1fr auto; column-gap: 28px; row-gap: 18px; align-items: start; }
.ceo-card.has-photo > .eyebrow { justify-self: start; }
.ceo-card.has-photo figcaption { align-self: end; }
.ceo-card.has-photo > :not(.ceo-photo) { grid-column: 2; }
.ceo-photo { grid-column: 1; grid-row: 1 / span 3; width: 128px; height: 128px; border-radius: 50%; object-fit: cover; border: 4px solid var(--yellow); box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.06); }
@media (max-width: 600px) {
  .ceo-card.has-photo { grid-template-columns: 1fr; grid-template-rows: none; }
  .ceo-card.has-photo > :not(.ceo-photo) { grid-column: 1; }
  .ceo-photo { grid-row: auto; width: 104px; height: 104px; }
}
.ceo-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--yellow); color: var(--ink); font-family: var(--display); font-weight: 700; font-size: 18px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.green-card { background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 32px 34px; display: flex; flex-direction: column; gap: 14px; }
.green-card .eyebrow::before { background: #3FA34D; }
.green-card h3 { font-size: 26px; }
.green-card p { color: var(--body); }
.green-card .checks .ico { color: #2E8B3D; }
@media (max-width: 900px) { .about-more { grid-template-columns: 1fr; } }

/* Contact: small chips under the lead */
.chips { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chips li { display: inline-flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: 15px; font-weight: 700; color: var(--ink); }
.chips .ico { width: 16px; height: 16px; }

/* ================= Main menu with sub menus ================= */
.nav-top { font: inherit; font-weight: 700; font-size: 17px; line-height: 1.5; color: #fff; background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; white-space: nowrap; }
.site-header .nav-top:hover { text-decoration: none; }
.nav-chevron { width: 16px; height: 16px; stroke-width: 2.5; transition: transform .2s ease; }
.nav-item { position: relative; }
.site-header .nav .nav-sub a { color: var(--ink); font-size: 15px; white-space: normal; text-decoration: none; background: none; padding-bottom: 0; margin-bottom: 0; }
.nav-sub ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nav-sub li a { display: flex; gap: 14px; align-items: center; padding: 10px 12px; border-radius: 12px; }
.nav-sub .ico-badge { width: 40px; height: 40px; }
.nav-sub .ico-badge .ico { width: 20px; height: 20px; }
.nav-sub-text b { display: block; font-size: 16px; line-height: 1.3; }
.nav-sub-text span { display: block; font-size: 14px; font-weight: 400; line-height: 1.35; color: var(--body); }
.site-header .nav .nav-sub-all { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; padding: 12px 14px 6px; border-top: 1px solid var(--line); font-size: 15px; font-weight: 800; }
.nav-sub-all .ico { width: 16px; height: 16px; }

@media (min-width: 1201px) {
  .nav-sub { display: none; position: absolute; top: calc(100% + 20px); left: 50%; transform: translateX(-50%); width: 400px; background: var(--card); border-radius: 18px; border-top: 4px solid var(--yellow); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28); padding: 10px; z-index: 60; }
  .nav-sub::before { content: ""; position: absolute; left: 0; right: 0; top: -26px; height: 26px; }
  .nav-item:hover .nav-sub, .nav-item:focus-within .nav-sub, .nav-item.open .nav-sub { display: block; }
  .nav-item.closing .nav-sub { display: none !important; }
  .nav-item:hover .nav-chevron, .nav-item.open .nav-chevron { transform: rotate(180deg); }
  .nav-item.closing .nav-chevron { transform: none; }
  .site-header .nav .nav-sub li a:hover, .site-header .nav .nav-sub li a:focus-visible { background: var(--yellow-tint); }
  .site-header .nav .nav-sub-all:hover { color: var(--ink); }
  @media (prefers-reduced-motion: no-preference) {
    .nav-item:hover .nav-sub, .nav-item:focus-within .nav-sub, .nav-item.open .nav-sub { animation: sub-in .18s ease-out; }
    @keyframes sub-in { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }
  }
}

@media (max-width: 1200px) {
  .site-header.open .nav { gap: 4px; }
  .site-header.open .nav .langs { margin-top: 12px; }
  .nav-item { width: 100%; }
  .nav > .nav-top, .nav-item > .nav-top { width: 100%; justify-content: space-between; font-size: 18px; padding: 8px 0; }
  .nav-sub { padding: 0 0 10px; }
  .nav.js-menu .nav-sub { display: none; }
  .nav.js-menu .nav-item.open .nav-sub { display: block; }
  .nav-item.open .nav-chevron { transform: rotate(180deg); }
  .site-header .nav .nav-sub a { color: #fff; }
  .nav-sub li a { padding: 8px 4px; }
  .nav-sub .ico-badge { width: 34px; height: 34px; }
  .nav-sub .ico-badge .ico { width: 18px; height: 18px; }
  .nav-sub-text span { color: #A8A8AD; }
  .site-header .nav .nav-sub-all { border-top: 0; padding: 6px 4px; color: var(--yellow); }
}

/* Back to top: appears after scrolling down, bottom left (the chat is bottom right) */
.to-top { position: fixed; left: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 70; width: 48px; height: 48px; border-radius: 50%; background: var(--ink); color: var(--yellow); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 22px rgba(29, 29, 31, 0.25); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s; }
.to-top .ico { width: 22px; height: 22px; stroke-width: 2.5; }
.to-top.show { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .25s ease; }
.to-top:hover { background: #000; }
@media (max-width: 600px) { .to-top { left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: 44px; height: 44px; } }
.ceo-card, .green-card { scroll-margin-top: 120px; }