/* ===== Self-hosted fonts (GDPR: no Google Fonts CDN) ===== */
@font-face{font-family:'Caveat';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/caveat-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Caveat';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/caveat-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Caveat';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/caveat-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Caveat';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/caveat-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/ibmplexsans-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/ibmplexsans-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/ibmplexsans-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/ibmplexsans-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/ibmplexsans-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/ibmplexsans-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/inter-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/inter-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/inter-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/inter-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/inter-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/inter-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/inter-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/inter-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ==========================================================================
   IXXO Hub — ENTERPRISE variation. Self-contained (does not use app.css).
   Professional: structured, left-aligned, navy + restrained orange,
   hairline borders, 4px corners, IBM Plex Sans / Inter. No playful elements.
   Reuses app.js class hooks: .has-mega .mega .nav-list .nav-toggle .reveal
   ========================================================================== */

:root {
  /* Brand / navy (slightly lightened) */
  --navy-900: #16273f;
  --navy-800: #1f3252;
  --navy-700: #294064;
  --navy-600: #344e74;
  --ink:      #1b2c46;
  --slate-700:#33425a;
  --slate-500:#5b6b85;
  --slate-400:#7d8aa1;

  /* Surfaces */
  --bg:       #ffffff;
  --bg-alt:   #f6f8fc;
  --bg-soft:  #eef2f8;
  --white:    #ffffff;

  /* Accent (restrained, deeper orange) */
  --accent:        #d8690f;
  --accent-dark:   #b6550a;
  --accent-soft:   #fcefe2;
  --accent-tint:   #fbf6f0;

  /* Lines */
  --border:        #e4e9f2;
  --border-strong: #cfd7e6;

  --success: #2f855a;

  /* Accent tones (slight, professional color for icons & mockups) */
  --c-blue:   #2563c9;  --c-blue-bg:   #e8f0fe;  --c-blue-bd:   #d6e4fd;
  --c-teal:   #0f9488;  --c-teal-bg:   #e1f5f1;  --c-teal-bd:   #ccede6;
  --c-violet: #6d4bd0;  --c-violet-bg: #eee9fb;  --c-violet-bd: #e1d9f6;
  --c-amber:  #b9750c;  --c-amber-bg:  #fcf0d8;  --c-amber-bd:  #f5e3c0;
  --c-green:  #2f855a;  --c-green-bg:  #e6f4ec;  --c-green-bd:  #d2ebdd;
  --c-rose:   #c2415c;  --c-rose-bg:   #fce7ec;  --c-rose-bd:   #f7d5dc;

  /* Type */
  --display: "IBM Plex Sans", "Inter", system-ui, sans-serif;
  --body:    "Inter", system-ui, -apple-system, sans-serif;

  --fs-eyebrow: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.0625rem;
  --fs-h3: clamp(1.3rem, 1.1rem + 0.7vw, 1.65rem);
  --fs-h2: clamp(1.95rem, 1.45rem + 1.8vw, 2.8rem);
  --fs-h1: clamp(2.35rem, 1.6rem + 3vw, 3.9rem);

  --tracking-label: 0.14em;

  /* Spacing / shape */
  --container: 1200px;
  --container-narrow: 820px;
  --radius: 4px;
  --radius-lg: 6px;

  --shadow-xs: 0 1px 2px rgba(16,24,40,0.06);
  --shadow-sm: 0 1px 3px rgba(16,24,40,0.08), 0 1px 2px rgba(16,24,40,0.04);
  --shadow-md: 0 10px 24px -12px rgba(16,24,40,0.20);
  --shadow-lg: 0 24px 50px -24px rgba(12,23,41,0.30);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 200ms;

  --topbar-h: 38px;
  --nav-h: 66px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* overflow-x: clip (not hidden) prevents horizontal scroll WITHOUT turning
   html/body into a scroll container, which would silently break position: sticky */
html, body { overflow-x: clip; max-width: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--slate-700);
  font-family: var(--body); font-size: var(--fs-base); line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--display); color: var(--ink); margin: 0; line-height: 1.18; letter-spacing: -0.012em; font-weight: 600; text-wrap: balance; }
/* keep short accented phrases on one line so headings break cleanly */
.ink-accent, .hl, .hl-teal, .ul-draw { white-space: nowrap; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 28px; }
.section { padding-block: 84px; position: relative; }
.section > .container { position: relative; z-index: 1; }
/* soft colour shapes on white sections (decorative, behind content) — hues cycle by
   section position so consecutive white sections alternate (blue/orange ↔ teal/violet). */
.section:not(.alt)::before, .section:not(.alt)::after { content: ""; position: absolute; z-index: 0; pointer-events: none; border-radius: 50%; }
.section:not(.alt)::before { width: 580px; height: 580px; top: 10px; left: -80px; }
.section:not(.alt)::after { width: 640px; height: 640px; bottom: -40px; right: -100px; }

.section:nth-of-type(4n+1):not(.alt)::before { background: radial-gradient(closest-side, rgba(37,99,201,0.15), transparent 70%); }   /* blue */
.section:nth-of-type(4n+1):not(.alt)::after  { background: radial-gradient(closest-side, rgba(216,105,15,0.14), transparent 70%); }  /* orange */
.section:nth-of-type(4n+3):not(.alt)::before { background: radial-gradient(closest-side, rgba(15,148,136,0.15), transparent 70%); }   /* teal */
.section:nth-of-type(4n+3):not(.alt)::after  { background: radial-gradient(closest-side, rgba(109,75,208,0.14), transparent 70%); }  /* violet */
.section:nth-of-type(4n+2):not(.alt)::before { background: radial-gradient(closest-side, rgba(109,75,208,0.14), transparent 70%); }  /* violet */
.section:nth-of-type(4n+2):not(.alt)::after  { background: radial-gradient(closest-side, rgba(15,148,136,0.15), transparent 70%); }   /* teal */
.section:nth-of-type(4n):not(.alt)::before   { background: radial-gradient(closest-side, rgba(216,105,15,0.14), transparent 70%); }  /* orange */
.section:nth-of-type(4n):not(.alt)::after    { background: radial-gradient(closest-side, rgba(37,99,201,0.15), transparent 70%); }   /* blue */

/* explicit hue overrides (apply to a .section to pin its blobs) */
.section.shape-blue::before   { background: radial-gradient(closest-side, rgba(37,99,201,0.15), transparent 70%) !important; }
.section.shape-blue::after    { background: radial-gradient(closest-side, rgba(216,105,15,0.14), transparent 70%) !important; }
.section.shape-teal::before   { background: radial-gradient(closest-side, rgba(15,148,136,0.16), transparent 70%) !important; }
.section.shape-teal::after    { background: radial-gradient(closest-side, rgba(37,99,201,0.14), transparent 70%) !important; }
.section.shape-violet::before { background: radial-gradient(closest-side, rgba(109,75,208,0.15), transparent 70%) !important; }
.section.shape-violet::after  { background: radial-gradient(closest-side, rgba(216,105,15,0.13), transparent 70%) !important; }
.section.shape-green::before  { background: radial-gradient(closest-side, rgba(47,133,90,0.15), transparent 70%) !important; }
.section.shape-green::after   { background: radial-gradient(closest-side, rgba(15,148,136,0.15), transparent 70%) !important; }
.section.shape-rose::before   { background: radial-gradient(closest-side, rgba(194,65,92,0.14), transparent 70%) !important; }
.section.shape-rose::after    { background: radial-gradient(closest-side, rgba(109,75,208,0.14), transparent 70%) !important; }

/* hero gets a couple too */
.hero { position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; z-index: 0; pointer-events: none; border-radius: 50%; width: 640px; height: 640px; top: -160px; right: -120px; background: radial-gradient(closest-side, rgba(37,99,201,0.15), transparent 70%); }
.hero::after { content: ""; position: absolute; z-index: 0; pointer-events: none; border-radius: 50%; width: 540px; height: 540px; bottom: -180px; left: -120px; background: radial-gradient(closest-side, rgba(216,105,15,0.13), transparent 70%); }
.hero > .container { position: relative; z-index: 1; }
.section-sm { padding-block: 56px; }
.alt { background: var(--bg-alt); }
.bordered { border-top: 1px solid var(--border); }
.muted { color: var(--slate-500); }
.lead { font-size: var(--fs-lg); color: var(--slate-500); line-height: 1.65; }
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); }
.stack > * + * { margin-top: 18px; }

/* Eyebrow / labels */
.label {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--body); font-size: var(--fs-eyebrow); font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-dark);
}
.label::before { content: ""; width: 18px; height: 2px; background: var(--accent); }
.label.plain::before { display: none; }
.section-head { max-width: 720px; margin-bottom: 44px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .label { justify-content: center; }
.section-head h2 { margin-top: 14px; }
.section-head p { margin-top: 14px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--body); font-weight: 600; font-size: var(--fs-sm);
  padding: 12px 20px; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer;
  background: var(--accent); color: #fff; transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn:hover { background: var(--accent-dark); }
.btn:active { transform: translateY(1px); }
.btn .lucide { width: 17px; height: 17px; }
.btn-navy { background: var(--navy-800); color: #fff; }
.btn-navy:hover { background: var(--navy-700); }
.btn-outline { background: #fff; color: var(--ink); border-color: var(--border-strong); }
.btn-outline:hover { background: var(--bg-alt); border-color: var(--slate-400); }
.btn-lg { padding: 14px 24px; font-size: var(--fs-base); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-link { color: var(--accent-dark); font-weight: 600; font-size: var(--fs-sm); display: inline-flex; align-items: center; gap: 6px; }
.btn-link .lucide { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.btn-link:hover .lucide { transform: translateX(3px); }

/* ---------- Top utility bar ---------- */
.utilitybar { background: var(--navy-900); color: #c8d2e4; font-size: 0.78rem; }
.utilitybar .container { display: flex; align-items: center; justify-content: space-between; min-height: var(--topbar-h); gap: 16px; }
.utilitybar .u-right { flex: none; white-space: nowrap; }
.utilitybar .u-right a { white-space: nowrap; }
.utilitybar .u-left { display: flex; align-items: center; gap: 20px; min-width: 0; }
.utilitybar .u-item { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.utilitybar .u-item .lucide { width: 14px; height: 14px; color: var(--accent); }
.utilitybar .u-right { display: flex; align-items: center; gap: 18px; }
.utilitybar a:hover { color: #fff; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 60; background: #fff; border-bottom: 1px solid var(--border); }
.nav { display: flex; align-items: center; gap: 28px; height: var(--nav-h); }
.brand { display: inline-flex; align-items: center; gap: 9px; }
.brand img { height: 40px; }
.brand .tag { font-family: var(--display); font-weight: 700; font-size: 1.06rem; color: var(--ink); letter-spacing: -0.01em; }
.nav-spacer { flex: 1; }
.nav-list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-link { position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 9px 12px; border-radius: var(--radius); font-size: var(--fs-sm); font-weight: 500; color: var(--slate-700); transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.nav-link:hover { color: var(--ink); background: var(--bg-alt); }
.nav-link[aria-current="page"], .nav-link.is-current { color: var(--accent-dark); }
.nav-link.is-current::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 1px; height: 2px; background: var(--accent); border-radius: 2px; }
.nav-link .chev { width: 15px; height: 15px; transition: transform var(--dur) var(--ease); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-actions .signin { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); padding: 8px 6px; }
.nav-actions .signin:hover { color: var(--accent-dark); }
.nav-toggle { display: none; background: #fff; border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 8px; cursor: pointer; color: var(--ink); }
.nav-toggle .lucide { width: 20px; height: 20px; }

/* Mega menu */
.has-mega { position: relative; }
.mega { position: absolute; top: calc(100% + 8px); left: 0; min-width: 560px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 14px; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(6px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur); }
/* invisible bridge so moving the cursor from the trigger into the panel keeps hover */
.mega::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.has-mega:hover .mega, .has-mega:focus-within .mega, .mega.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.has-mega:hover .chev, .has-mega:focus-within .chev { transform: rotate(180deg); }
.mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.mega-item { display: flex; gap: 12px; padding: 12px; border-radius: var(--radius); transition: background-color var(--dur) var(--ease); }
.mega-item:hover { background: var(--bg-alt); }
.mega-ico { flex: none; width: 34px; height: 34px; border-radius: var(--radius); display: grid; place-items: center; background: var(--bg-soft); color: var(--navy-700); border: 1px solid var(--border); }
.mega-ico .lucide { width: 18px; height: 18px; }
.mega-item h4 { font-family: var(--body); font-size: var(--fs-sm); font-weight: 600; color: var(--ink); margin: 0 0 2px; }
.mega-item p { font-size: 0.8rem; color: var(--slate-500); line-height: 1.4; }
.mega-foot { margin-top: 10px; padding: 12px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.mega-foot span { font-size: var(--fs-sm); color: var(--slate-500); }

/* ---------- Hero (left-aligned, two columns) ---------- */
.hero { border-bottom: 1px solid var(--border); background: linear-gradient(180deg, var(--bg-alt), #fff 70%); }
.hero .container { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; padding-block: 76px; }
.hero h1 { margin-top: 18px; }
.hero .lead { margin-top: 20px; max-width: 52ch; }
.hero .btn-row { margin-top: 28px; }
.hero-trust { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--border); }
.hero-trust span { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--slate-400); }
.hero-trust .logos { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 12px; }
.hero-trust .logos b { font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--slate-400); }

/* ---------- Dashboard mockup ---------- */
.dash { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.dash-top { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--border); background: var(--bg-alt); }
.dash-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.dash-top .dash-title { margin-left: 8px; font-size: 0.78rem; color: var(--slate-500); font-weight: 600; }
.dash-body { display: grid; grid-template-columns: 132px 1fr; min-height: 320px; }
.dash-side { border-right: 1px solid var(--border); padding: 14px 10px; background: #fff; display: grid; gap: 4px; align-content: start; }
.dash-navi { display: flex; align-items: center; gap: 8px; padding: 8px 9px; border-radius: var(--radius); font-size: 0.8rem; color: var(--slate-500); font-weight: 500; }
.dash-navi .lucide { width: 15px; height: 15px; }
.dash-navi.active { background: var(--accent-soft); color: var(--accent-dark); font-weight: 600; }
.dash-main { padding: 16px; display: grid; gap: 14px; align-content: start; }
.dash-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kpi { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; background: #fff; }
.kpi .k-l { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--slate-400); font-weight: 700; }
.kpi .k-v { font-family: var(--display); font-weight: 700; font-size: 1.15rem; color: var(--ink); margin-top: 3px; }
.kpi .k-d { font-size: 0.68rem; color: var(--success); font-weight: 600; }
.dash-table { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.dash-row { display: grid; grid-template-columns: 1.6fr 1fr 0.8fr; gap: 8px; padding: 9px 12px; font-size: 0.78rem; border-top: 1px solid var(--border); align-items: center; }
.dash-row:first-child { border-top: none; background: var(--bg-alt); font-weight: 700; color: var(--slate-500); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; }
.dash-row .cust { color: var(--ink); font-weight: 600; }
.pill { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 20px; font-size: 0.68rem; font-weight: 700; }
.pill.green { background: #e6f4ec; color: var(--success); }
.pill.orange { background: var(--accent-soft); color: var(--accent-dark); }
.pill.blue { background: #e7eefb; color: #2452a6; }

/* ---------- Stat band ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: #fff; }
.stat { padding: 26px 28px; border-left: 1px solid var(--border); }
.stat:first-child { border-left: none; }
.stat .s-v { font-family: var(--display); font-weight: 700; font-size: 2rem; color: var(--ink); letter-spacing: -0.02em; }
.stat .s-l { font-size: var(--fs-sm); color: var(--slate-500); margin-top: 4px; }

/* ---------- Feature rows ---------- */
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.frow + .frow { margin-top: 72px; }
.frow.flip .f-media { order: -1; }
.f-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; }
.f-list li { display: flex; gap: 11px; align-items: flex-start; }
.f-list .lucide { width: 19px; height: 19px; color: var(--accent); flex: none; margin-top: 2px; }
.f-list b { color: var(--ink); font-weight: 600; }
.f-list span { color: var(--slate-500); }

/* media panels for feature rows */
.panel { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 22px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.panel-head .label { margin: 0; }
.flowline { display: grid; gap: 10px; }
.flowline .step { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--radius); }
.flowline .step .si { width: 32px; height: 32px; border-radius: var(--radius); display: grid; place-items: center; background: var(--bg-soft); color: var(--navy-700); }
.flowline .step .si .lucide { width: 17px; height: 17px; }
.flowline .step b { color: var(--ink); font-size: var(--fs-sm); }
.flowline .step small { display: block; color: var(--slate-400); font-size: 0.72rem; }
.flowline .conn { width: 1px; height: 12px; background: var(--border-strong); margin-left: 29px; }

/* node grid (system) */
.nodes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.node { display: flex; align-items: center; gap: 9px; padding: 12px 13px; border: 1px solid var(--border); border-radius: var(--radius); font-family: var(--display); font-weight: 600; font-size: var(--fs-sm); color: var(--ink); }
.node .lucide { width: 17px; height: 17px; color: var(--navy-700); }
.node.full { grid-column: 1 / -1; background: var(--navy-800); color: #fff; border-color: var(--navy-800); justify-content: center; }
.node.full .lucide { color: var(--accent); }

/* ---------- App catalog cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ecard { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.ecard:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.ecard .ic { width: 40px; height: 40px; border-radius: var(--radius); display: grid; place-items: center; background: var(--bg-soft); color: var(--navy-700); border: 1px solid var(--border); margin-bottom: 14px; }
.ecard .ic .lucide { width: 21px; height: 21px; }
.ecard h3 { font-size: var(--fs-lg); margin-bottom: 6px; }
.ecard p { font-size: var(--fs-sm); color: var(--slate-500); }
/* Product cards ("Two products, one platform partner"): equal-height cards with
   the CTA pinned to the bottom so both align, and stacked on small screens
   (the old inline grid-template-columns forced 2 cramped columns on phones). */
.cards.pcards { grid-template-columns: repeat(2, 1fr); max-width: 960px; margin-inline: auto; }
.cards.pcards .ecard { display: flex; flex-direction: column; }
.cards.pcards .ecard .btn { margin-top: auto; align-self: flex-start; }
@media (max-width: 640px) { .cards.pcards { grid-template-columns: 1fr; } }

/* Icon tones — utility overrides for icon chips (.ic / .mega-ico / .si / .ts-ic) */
.tone-blue   { background: var(--c-blue-bg) !important;   color: var(--c-blue) !important;   border-color: var(--c-blue-bd) !important; }
.tone-teal   { background: var(--c-teal-bg) !important;   color: var(--c-teal) !important;   border-color: var(--c-teal-bd) !important; }
.tone-violet { background: var(--c-violet-bg) !important; color: var(--c-violet) !important; border-color: var(--c-violet-bd) !important; }
.tone-amber  { background: var(--c-amber-bg) !important;  color: var(--c-amber) !important;  border-color: var(--c-amber-bd) !important; }
.tone-green  { background: var(--c-green-bg) !important;  color: var(--c-green) !important;  border-color: var(--c-green-bd) !important; }
.tone-rose   { background: var(--c-rose-bg) !important;   color: var(--c-rose) !important;   border-color: var(--c-rose-bd) !important; }
.tone-orange { background: var(--accent-soft) !important; color: var(--accent-dark) !important; border-color: #f4ddc6 !important; }

/* Dashboard mini bar-chart (adds colour to the mockup) */
.dash-chart { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 13px; display: grid; gap: 9px; }
.dash-chart .dc-title { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--slate-400); font-weight: 700; margin-bottom: 2px; }
.dc-row { display: grid; grid-template-columns: 62px 1fr 34px; gap: 9px; align-items: center; }
.dc-row .dc-l { font-size: 0.72rem; color: var(--slate-500); font-weight: 600; }
.dc-row .dc-track { height: 8px; border-radius: 6px; background: var(--bg-soft); overflow: hidden; }
.dc-row .dc-track i { display: block; height: 100%; border-radius: 6px; }
.dc-row .dc-v { font-size: 0.7rem; color: var(--slate-500); font-weight: 600; text-align: right; }

/* Compliance / trust strip */
.trust-band { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
.trust-statements { display: grid; gap: 16px; margin-top: 22px; }
.trust-statements.two { grid-template-columns: 1fr 1fr; max-width: 900px; margin-inline: auto; }
@media (max-width: 720px) { .trust-statements.two { grid-template-columns: 1fr; } }
.trust-statement { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); }
.trust-statement .ts-ic { flex: none; width: 38px; height: 38px; border-radius: var(--radius); display: grid; place-items: center; }
.trust-statement .ts-ic .lucide { width: 20px; height: 20px; }
.trust-statement p { color: var(--slate-700); font-size: var(--fs-sm); }
/* single compliance strip (one cohesive group instead of statements + badges) */
.compliance { margin-top: 28px; display: grid; grid-template-columns: 1.45fr 1fr; gap: 30px; align-items: center;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 22px 26px; }
.compliance-text { display: flex; gap: 14px; align-items: flex-start; }
.compliance-text .ic { margin: 0; flex: none; align-self: flex-start; width: 42px; height: 42px; border-radius: var(--radius); display: grid; place-items: center; }
.compliance-text .ic .lucide { width: 20px; height: 20px; }
.compliance-text p { color: var(--slate-700); font-size: var(--fs-sm); line-height: 1.6; }
.compliance-text b { color: var(--ink); }
.compliance-badges { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
@media (max-width: 760px) { .compliance { grid-template-columns: 1fr; gap: 18px; } .compliance-badges { justify-content: flex-start; } }

.badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.badge { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border: 1px solid var(--border-strong); border-radius: 40px; font-size: 0.8rem; font-weight: 600; color: var(--ink); background: #fff; }
.badge .lucide { width: 15px; height: 15px; color: var(--accent); }

/* logo strip */
.logostrip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 38px; }
.logostrip b { font-family: var(--display); font-weight: 700; font-size: 1.25rem; color: var(--slate-400); }

/* replaces row */
.repl { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.repl span { font-family: var(--display); font-weight: 600; font-size: 0.95rem; color: var(--slate-500); padding: 7px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; position: relative; }
.repl span::after { content: ""; position: absolute; left: 10%; right: 10%; top: 52%; height: 1.5px; background: var(--accent); }

/* ---------- CTA band (light, premium — separates from the navy footer) ---------- */
.cta { background: linear-gradient(135deg, #eaf1fb 0%, #ffffff 56%, #fdf1e6 100%); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 60px 48px; position: relative; overflow: hidden; }
.cta::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(46% 95% at 93% 0%, rgba(216,105,15,0.10), transparent 60%),
              radial-gradient(42% 95% at 2% 100%, rgba(37,99,201,0.09), transparent 60%); }
.cta::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--c-blue), var(--accent)); }
.cta > * { position: relative; }
.cta .label { color: var(--accent-dark); }
.cta h2 { color: var(--ink); margin-top: 14px; max-width: 22ch; }
.cta p { color: var(--slate-500); margin-top: 14px; max-width: 56ch; }
.cta .btn-row { margin-top: 26px; }
.cta .btn-outline { background: #fff; color: var(--ink); border-color: var(--border-strong); }
.cta .btn-outline:hover { background: var(--bg-alt); border-color: var(--slate-400); }

/* ---------- Footer (navy) ---------- */
.site-footer { background: var(--navy-900); color: #aeb9cd; padding-block: 56px 30px; margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 32px; }
.footer-grid .tag { color: #fff; }
.site-footer .brand img { filter: brightness(0) invert(1); opacity: 0.92; }
.footer-grid h5 { font-family: var(--display); font-size: var(--fs-sm); color: #fff; margin: 0 0 14px; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer-links a { font-size: var(--fs-sm); color: #aeb9cd; transition: color var(--dur) var(--ease); }
.footer-links a:hover { color: #fff; }
.footer-about { font-size: var(--fs-sm); color: #93a0b8; margin-top: 14px; max-width: 32ch; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.10); font-size: var(--fs-sm); color: #8190aa; }

/* ---------- Feature spotlights (colourful mockups) ---------- */
.spotlight { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.spotlight + .spotlight { margin-top: 76px; }
.spotlight.flip .spot-media { order: -1; }
.spot-text .label { margin-bottom: 16px; }
.spot-text h2 { margin-bottom: 16px; }
.spot-text .lead { margin-bottom: 24px; }

.spot-stage { position: relative; border-radius: var(--radius-lg); padding: 44px; min-height: 340px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--border); }
.stage-blue { background: linear-gradient(155deg, #eaf1fd, #f6f9ff); }
.stage-mint { background: linear-gradient(155deg, #e9f6ef, #f5fcf8); }
.stage-grey { background: linear-gradient(155deg, #eef2f8, #f8fafc); }
.spot-stage::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(var(--border-strong) 1px, transparent 1.4px); background-size: 18px 18px; opacity: .35;
  -webkit-mask-image: radial-gradient(closest-side, #000, transparent 78%); mask-image: radial-gradient(closest-side, #000, transparent 78%); }
.spot-stage > * { position: relative; z-index: 1; }

/* avatars (initials) */
.avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: .8rem; color: #fff; flex: none; box-shadow: var(--shadow-sm); }
.av-blue { background: var(--c-blue); } .av-teal { background: var(--c-teal); } .av-violet { background: var(--c-violet); }
.av-orange { background: var(--accent); } .av-rose { background: var(--c-rose); } .av-green { background: var(--c-green); }

/* booking — browser window mockup */
.browser { width: 100%; max-width: 380px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); position: relative; min-height: 250px; }
.bw-top { display: flex; align-items: center; gap: 6px; padding: 11px 13px; border-bottom: 1px solid var(--border); }
.bw-top .bd { width: 9px; height: 9px; border-radius: 50%; }
.bd.r { background: #f87171; } .bd.y { background: #fbbf24; } .bd.g { background: #34d399; }
.bw-url { margin-left: 10px; font-size: .68rem; color: var(--slate-400); background: var(--bg-soft); padding: 3px 12px; border-radius: 20px; }
.bw-body { padding: 16px; display: grid; gap: 11px; }
.sk { background: var(--bg-soft); border-radius: 6px; }
.sk-lg { height: 13px; width: 55%; }
.sk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.sk-box { height: 70px; border-radius: 8px; }
.float-icons { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); display: grid; gap: 14px; z-index: 3; }
.fic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: #fff; box-shadow: var(--shadow-md); border: 1px solid var(--border); }
.fic .lucide { width: 21px; height: 21px; }
.book-card { position: absolute; left: 50%; top: 56%; transform: translate(-50%, -50%); width: 84%; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 16px; z-index: 2; }
.bc-head { display: flex; gap: 11px; align-items: center; margin-bottom: 13px; }
.bc-head b { display: block; font-family: var(--display); color: var(--ink); font-size: .95rem; }
.bc-pill { display: inline-flex; align-items: center; gap: 5px; font-size: .68rem; color: var(--slate-500); border: 1px solid var(--border); border-radius: 20px; padding: 2px 9px; margin-top: 4px; }
.bc-pill .lucide { width: 12px; height: 12px; }
.bc-url { font-family: var(--display); font-weight: 600; color: var(--ink); font-size: .9rem; padding: 11px 12px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius); text-align: center; margin-bottom: 13px; word-break: break-all; }
.bc-actions { display: flex; gap: 8px; justify-content: flex-end; }
.bc-btn { font-family: var(--body); font-size: .8rem; font-weight: 600; border-radius: var(--radius); padding: 8px 15px; border: 1px solid var(--border-strong); background: #fff; color: var(--ink); cursor: pointer; }
.bc-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }

/* feedback — avatar cluster */
.cluster { position: relative; width: 100%; max-width: 420px; height: 320px; margin-inline: auto; }
.ring { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; }
.ring.r1 { width: 150px; height: 150px; background: rgba(216,105,15,0.07); border: 1px solid rgba(216,105,15,0.16); }
.ring.r2 { width: 232px; height: 232px; background: rgba(216,105,15,0.035); border: 1px solid rgba(216,105,15,0.10); }
.ring-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 92px; height: 92px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; box-shadow: 0 12px 30px -8px rgba(216,105,15,0.55); z-index: 2; }
.ring-core .lucide { width: 42px; height: 42px; color: #fff; }
.fb-chip { position: absolute; display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--border); border-radius: 13px; box-shadow: var(--shadow-md); padding: 9px 12px; z-index: 3; }
.fb-chip .stars { color: var(--c-amber); font-size: .82rem; letter-spacing: 1.5px; }
.fb-chip .react { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; }
.fb-chip .react .lucide { width: 15px; height: 15px; }
.pos-tl { top: 2%; left: 0; } .pos-r { top: 40%; right: -2%; } .pos-bl { bottom: 4%; left: 10%; }

/* recurring — payment card */
.pay-card { width: 100%; max-width: 384px; margin-inline: auto; background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 22px; }
.pay-banner { display: flex; align-items: center; gap: 11px; background: var(--c-green-bg); border: 1px solid var(--c-green-bd); border-radius: 10px; padding: 12px 14px; }
.pay-check { width: 34px; height: 34px; border-radius: 50%; background: var(--c-green); display: grid; place-items: center; color: #fff; flex: none; }
.pay-check .lucide { width: 18px; height: 18px; }
.pay-banner b { color: #1c5239; font-family: var(--display); font-size: .92rem; display: block; }
.pay-banner small { color: #2f855a; font-size: .74rem; }
.pay-amt { font-family: var(--display); font-weight: 700; font-size: 2.7rem; color: var(--ink); text-align: center; margin-top: 18px; letter-spacing: -.03em; }
.pay-date { text-align: center; color: var(--slate-400); font-size: .82rem; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.pay-row { display: flex; justify-content: space-between; padding: 7px 0; font-size: .86rem; }
.pay-row span { color: var(--slate-500); } .pay-row b { color: var(--ink); }
.pay-next { display: flex; align-items: center; gap: 8px; justify-content: center; background: var(--c-blue-bg); color: var(--c-blue); font-weight: 600; font-size: .82rem; border-radius: 8px; padding: 11px; margin-top: 14px; }
.pay-next .lucide { width: 15px; height: 15px; }

/* ==========================================================================
   Home: interactive client workspace (tabbed)
   ========================================================================== */
.ws { width: 100%; max-width: 460px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.ws-top { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--border); background: var(--bg-alt); }
.ws-top .dash-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.ws-top .ws-title { margin-left: 8px; font-size: .78rem; color: var(--slate-500); font-weight: 600; }
.ws-tabbar { display: flex; gap: 2px; padding: 8px 10px 0; border-bottom: 1px solid var(--border); }
.ws-tab { font-family: var(--body); font-size: .8rem; font-weight: 600; color: var(--slate-500); background: transparent; border: none; border-bottom: 2px solid transparent; padding: 8px 12px; cursor: pointer; border-radius: var(--radius) var(--radius) 0 0; transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.ws-tab:hover { color: var(--ink); background: var(--bg-alt); }
.ws-tab.is-active { color: var(--accent-dark); border-bottom-color: var(--accent); }
.ws-body { padding: 16px; min-height: 226px; }
.ws-panel { display: none; }
.ws-panel.is-active { display: block; }
.ws-client { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ws-client .avatar { width: 44px; height: 44px; }
.ws-client b { font-family: var(--display); color: var(--ink); font-size: .98rem; display: block; }
.ws-client small { color: var(--slate-500); font-size: .78rem; }
.ws-meta { display: grid; gap: 8px; }
.ws-meta .row { display: flex; justify-content: space-between; font-size: .82rem; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-alt); }
.ws-meta .row span { color: var(--slate-500); }
.ws-meta .row b { color: var(--ink); font-weight: 600; }
.ws-list { display: grid; gap: 9px; }
.ws-item { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--radius); font-size: .82rem; }
.ws-item .lucide { width: 17px; height: 17px; flex: none; }
.ws-item .grow { flex: 1; color: var(--ink); }
.ws-item small { color: var(--slate-400); }
.ws-check { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--border-strong); display: grid; place-items: center; flex: none; }
.ws-check.done { background: var(--c-green); border-color: var(--c-green); color: #fff; }
.ws-check.done .lucide { width: 12px; height: 12px; }

/* ==========================================================================
   Home: interactive workflow stepper
   ========================================================================== */
.stepper { width: 100%; }
.step-track { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.step-chip { display: inline-flex; align-items: center; gap: 9px; font-family: var(--body); font-size: var(--fs-sm); font-weight: 600; color: var(--slate-600, var(--slate-500)); background: #fff; border: 1px solid var(--border); border-radius: 40px; padding: 9px 15px 9px 9px; cursor: pointer; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.step-chip:hover { border-color: var(--border-strong); color: var(--ink); }
.step-chip .sc-n { width: 24px; height: 24px; border-radius: 50%; background: var(--bg-soft); color: var(--slate-500); display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: .78rem; }
.step-chip.is-active { border-color: var(--accent); color: var(--ink); background: var(--accent-tint); }
.step-chip.is-active .sc-n { background: var(--accent); color: #fff; }
.step-detail { position: relative; }
.sd-card { display: none; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: center; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 28px; }
.sd-card.is-active { display: grid; }
.sd-card .sd-step { font-family: var(--body); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-dark); }
.sd-card h3 { font-size: var(--fs-h3); margin: 10px 0 12px; }
.sd-card p { color: var(--slate-500); }
.sd-visual { background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-md, var(--radius)); padding: 16px; display: grid; gap: 9px; }
.sd-visual .vrow { display: flex; align-items: center; gap: 10px; font-size: .8rem; color: var(--ink); background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 9px 11px; }
.sd-visual .vrow .lucide { width: 16px; height: 16px; }
@media (max-width: 760px) { .sd-card { grid-template-columns: 1fr; gap: 18px; } }

/* ==========================================================================
   Home: client portal preview
   ========================================================================== */
.portal { width: 100%; max-width: 440px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.portal-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); background: var(--navy-800); color: #fff; }
.portal-top b { font-family: var(--display); font-size: .92rem; }
.portal-top .badge { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); color: #fff; }
.portal-body { padding: 14px; display: grid; gap: 10px; }
.portal-row { display: flex; align-items: center; gap: 12px; padding: 12px 13px; border: 1px solid var(--border); border-radius: var(--radius); transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.portal-row:hover { border-color: var(--border-strong); transform: translateX(2px); }
.portal-row .pic { width: 36px; height: 36px; border-radius: var(--radius); display: grid; place-items: center; flex: none; }
.portal-row .pic .lucide { width: 18px; height: 18px; }
.portal-row .grow b { display: block; font-size: .88rem; color: var(--ink); font-family: var(--display); }
.portal-row .grow small { font-size: .76rem; color: var(--slate-500); }
.portal-row .chev { color: var(--slate-400); width: 16px; height: 16px; }

/* ==========================================================================
   Per-page mockups
   ========================================================================== */

/* Apps: interactive catalogue */
.cat { display: grid; grid-template-columns: 270px 1fr; border: 1px solid var(--border); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-md); overflow: hidden; position: relative; }
.cat-list { border-right: 1px solid var(--border); padding: 10px; display: grid; gap: 4px; background: var(--bg-alt); align-content: start; }
.cat-item { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: var(--radius); cursor: pointer; background: transparent; border: 1px solid transparent; text-align: left; font-family: var(--body); color: var(--slate-700); }
.cat-item:hover { background: #fff; }
.cat-item.is-active { background: #fff; border-color: var(--border); box-shadow: var(--shadow-xs); }
.cat-item .ci { width: 30px; height: 30px; border-radius: var(--radius); display: grid; place-items: center; flex: none; }
.cat-item .ci .lucide { width: 17px; height: 17px; }
.cat-item b { font-family: var(--display); font-size: .86rem; color: var(--ink); }
.cat-preview { padding: 34px 40px; min-height: 360px; display: flex; align-items: center; }
.cat-panel { display: none; width: 100%; }
.cat-panel.is-active { display: grid; grid-template-columns: minmax(220px, 0.9fr) auto; gap: 44px; align-items: center; }
.cat-copy { text-align: left; }
.cat-panel .label { margin-bottom: 12px; }
.cat-panel h4 { font-family: var(--display); font-size: var(--fs-h3); color: var(--ink); margin: 0; line-height: 1.25; }
.cat-points { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; }
.cat-points li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-sm); color: var(--slate-600, var(--slate-500)); line-height: 1.45; }
.cat-points li .lucide { width: 16px; height: 16px; color: var(--accent); flex: none; margin-top: 2px; }
.cat-media { display: flex; justify-content: center; align-items: center; }
.cat-media > * { margin: 0; }
.cat-media .mini-kanban { max-width: 520px; }
.cat-media .mini-flow2, .cat-media .mini-portal { max-width: 480px; }
@media (max-width: 820px) { .cat-panel.is-active { grid-template-columns: 1fr; gap: 26px; } .cat-media { justify-self: center; } .cat-copy { text-align: center; } .cat-points { max-width: 340px; margin-inline: auto; } }
.cat-rows { display: grid; gap: 9px; max-width: 420px; }
.cat-rows .vrow { display: flex; align-items: center; gap: 10px; font-size: .82rem; color: var(--ink); background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; }
.cat-rows .vrow .lucide { width: 16px; height: 16px; }
.cat-rows .vrow .pill { margin-left: auto; }
@media (max-width: 760px) { .cat { grid-template-columns: 1fr; } .cat-list { border-right: none; border-bottom: 1px solid var(--border); grid-template-columns: 1fr 1fr; } }

/* Full applications grid (apps page) */
.apps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.apptile { display: flex; align-items: center; gap: 12px; padding: 13px 14px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.apptile:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.apptile .ic { margin: 0; flex: none; width: 38px; height: 38px; border-radius: var(--radius); display: grid; place-items: center; }
.apptile .ic .lucide { width: 19px; height: 19px; }
.apptile b { font-family: var(--display); font-size: .85rem; color: var(--ink); display: block; line-height: 1.2; }
.apptile small { color: var(--slate-500); font-size: .73rem; }
@media (max-width: 980px) { .apps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .apps-grid { grid-template-columns: 1fr; } }

/* Catalogue mini mockups */
.cat-preview .mini { max-width: 660px; }
/* CRM kanban */
.mini-kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mk-col { background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; }
.mk-col h5 { font-family: var(--display); font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--slate-500); margin: 0 0 9px; display: flex; justify-content: space-between; }
.mk-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 9px 10px; margin-bottom: 8px; box-shadow: var(--shadow-xs); }
.mk-card:last-child { margin-bottom: 0; }
.mk-card b { display: block; color: var(--ink); font-size: .78rem; }
.mk-card .row2 { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.mk-card small { color: var(--slate-400); font-size: .68rem; }
.mk-card .amt { color: var(--accent-dark); font-weight: 700; font-size: .72rem; }
/* Projects: task list + progress */
.mini-tasks { max-width: 480px; }
.mt-prog { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; }
.mt-bar { flex: 1; height: 8px; border-radius: 6px; background: var(--bg-soft); overflow: hidden; }
.mt-bar i { display: block; height: 100%; width: 66%; background: var(--c-violet); border-radius: 6px; }
.mt-prog small { color: var(--slate-500); font-size: .75rem; font-weight: 600; white-space: nowrap; }
.mt-list { display: grid; gap: 8px; }
.mt-item { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--radius); font-size: .8rem; background: #fff; }
.mt-check { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--border-strong); display: grid; place-items: center; flex: none; }
.mt-check.done { background: var(--c-green); border-color: var(--c-green); color: #fff; }
.mt-check.done .lucide { width: 12px; height: 12px; }
.mt-item .grow { flex: 1; color: var(--ink); }
.mt-item.done .grow { color: var(--slate-400); text-decoration: line-through; }
.mt-item small { color: var(--slate-400); }

/* DocuFlow: document + signature */
.mini-doc { max-width: 420px; }
.doc-sheet { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 18px; }
.doc-sheet .dh { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.doc-sheet .dh b { font-family: var(--display); color: var(--ink); font-size: .85rem; }
.doc-sheet .ln { height: 8px; border-radius: 4px; background: var(--bg-soft); margin-bottom: 8px; opacity: .7; }
.doc-sheet .ln.s { width: 55%; } .doc-sheet .ln.m { width: 80%; }
.doc-sign { margin-top: 14px; padding: 12px 14px; border: 1px dashed var(--c-green); border-radius: var(--radius); background: var(--c-green-bg); display: flex; align-items: center; gap: 12px; }
.doc-sign .sig { font-family: "Caveat", cursive; font-size: 1.5rem; line-height: 1; color: var(--ink); }
.doc-sign .done { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; color: #1c5239; font-weight: 700; font-size: .72rem; }
.doc-sign .done .lucide { width: 14px; height: 14px; }

/* Sales Flow: invoice */
.mini-invoice { max-width: 400px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.inv-top { padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.inv-top b { font-family: var(--display); color: var(--ink); font-size: .9rem; }
.inv-rows { padding: 13px 16px; display: grid; gap: 9px; }
.inv-row { display: flex; justify-content: space-between; gap: 14px; font-size: .8rem; color: var(--slate-500); }
.inv-row b { color: var(--ink); }
.inv-total { display: flex; justify-content: space-between; align-items: baseline; padding: 13px 16px; border-top: 1px solid var(--border); }
.inv-total span { color: var(--slate-500); font-size: .8rem; }
.inv-total b { color: var(--ink); font-family: var(--display); font-size: 1.2rem; }

/* Schedule calendar */
.mini-cal { max-width: 380px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 16px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cal-head b { font-family: var(--display); color: var(--ink); font-size: .9rem; }
.cal-head .lucide { width: 16px; height: 16px; color: var(--slate-400); }
.cal-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cal-slot { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 0; text-align: center; font-size: .78rem; color: var(--slate-700); background: #fff; }
.cal-slot.taken { color: var(--slate-300); background: var(--bg-alt); text-decoration: line-through; }
.cal-slot.sel { background: var(--accent); color: #fff; border-color: var(--accent); }
.cal-confirm { margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--accent-tint); color: var(--accent-dark); border: 1px solid var(--accent-soft); border-radius: var(--radius); padding: 9px; font-size: .8rem; font-weight: 600; }
.cal-confirm .lucide { width: 15px; height: 15px; }
/* Form -> profile */
.mini-flow2 { display: grid; grid-template-columns: 1fr 30px 1fr; gap: 12px; align-items: center; }
.mf-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 14px; }
.mf-card .ttl { font-family: var(--display); font-size: .78rem; color: var(--slate-500); margin-bottom: 11px; display: flex; align-items: center; gap: 7px; }
.mf-card .ttl .lucide { width: 15px; height: 15px; }
.mf-field { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; margin-bottom: 8px; font-size: .76rem; color: var(--ink); }
.mf-field:last-child { margin-bottom: 0; }
.mf-field span { color: var(--slate-400); }
.mf-arrow2 { display: grid; place-items: center; color: var(--accent); }
.mf-arrow2 .lucide { width: 22px; height: 22px; }
.mf-profile .pf-top { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.mf-profile .pf-top b { font-family: var(--display); color: var(--ink); font-size: .85rem; display: block; }
.mf-profile .pf-top small { color: var(--c-green); font-size: .7rem; }
/* Portal login -> dashboard */
.mini-portal { display: grid; grid-template-columns: 0.82fr 1fr; gap: 14px; align-items: stretch; }
.mp-login { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 16px; }
.mp-login .lh { display: flex; align-items: center; gap: 8px; font-family: var(--display); color: var(--ink); font-size: .82rem; margin-bottom: 12px; }
.mp-login .lh .lucide { width: 16px; height: 16px; color: var(--accent); }
.mp-input { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 6px; padding: 9px 10px; margin-bottom: 8px; font-size: .76rem; color: var(--slate-500); }
.mp-btn { background: var(--accent); color: #fff; border-radius: var(--radius); padding: 9px; text-align: center; font-size: .78rem; font-weight: 600; margin-top: 2px; }
.mp-dash { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.mp-dash .dh { background: var(--navy-800); color: #fff; padding: 10px 13px; font-family: var(--display); font-size: .8rem; display: flex; justify-content: space-between; align-items: center; }
.mp-dash .dr { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-top: 1px solid var(--border); font-size: .78rem; }
.mp-dash .dr .lucide { width: 16px; height: 16px; }
.mp-dash .dr .grow { flex: 1; color: var(--ink); }
.mp-dash .dr small { color: var(--slate-400); }
@media (max-width: 760px) { .mini-portal, .mini-flow2 { grid-template-columns: 1fr; } .mf-arrow2 { transform: rotate(90deg); } }

/* Accountants: obligation board */
.board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.board-col { background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px; }
.board-col h4 { font-family: var(--display); font-size: .72rem; color: var(--slate-500); text-transform: uppercase; letter-spacing: .07em; margin: 0 0 10px; display: flex; justify-content: space-between; }
.board-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 11px 12px; margin-bottom: 9px; box-shadow: var(--shadow-xs); }
.board-card:last-child { margin-bottom: 0; }
.board-card b { font-size: .85rem; color: var(--ink); display: block; }
.board-card small { font-size: .73rem; color: var(--slate-400); }
.board-card .tag { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; font-size: .68rem; font-weight: 700; padding: 2px 8px; border-radius: 20px; }
@media (max-width: 760px) { .board { grid-template-columns: 1fr; } }

/* Accountants: OCR invoice scan */
.ocr { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 20px; }
.ocr-doc { position: relative; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-alt); padding: 16px; overflow: hidden; display: flex; flex-direction: column; gap: 9px; justify-content: center; }
.ocr-doc .ln { height: 8px; border-radius: 4px; background: var(--border-strong); opacity: .6; }
.ocr-doc .ln.s { width: 55%; } .ocr-doc .ln.m { width: 82%; } .ocr-doc .ln.l { width: 100%; }
.ocr-scan { position: absolute; left: 0; right: 0; height: 30px; top: 0; background: linear-gradient(var(--c-blue-bg), rgba(37,99,201,0)); border-bottom: 2px solid var(--c-blue); z-index: 1; animation: ocrscan 2.8s ease-in-out infinite; }
@keyframes ocrscan { 0% { top: -30px; } 55%, 100% { top: 100%; } }
@media (prefers-reduced-motion: reduce) { .ocr-scan { animation: none; opacity: 0; } }
.ocr-fields { display: grid; gap: 9px; align-content: center; }
.ocr-fields .label { margin-bottom: 2px; }
.ocr-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .82rem; padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.ocr-field .k { display: inline-flex; align-items: center; gap: 7px; color: var(--slate-500); }
.ocr-field b { color: var(--ink); }
.ocr-field .lucide { width: 16px; height: 16px; color: var(--c-green); }
.ocr-field.ready { background: var(--c-green-bg); border-color: var(--c-green-bd); }
.ocr-field.ready b { color: #1c5239; }
@media (max-width: 640px) { .ocr { grid-template-columns: 1fr; } }

/* Logo carousel (marquee) */
.logo-band { padding-block: 40px; }
.logo-carousel { position: relative; overflow: hidden; margin-top: 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.logo-track { display: flex; align-items: center; gap: 64px; width: max-content; animation: marquee 28s linear infinite; }
.logo-carousel:hover .logo-track { animation-play-state: paused; }
.logo-track b { font-family: var(--display); font-weight: 700; font-size: 1.35rem; color: var(--slate-400); white-space: nowrap; }
.logo-track img { height: 34px; width: auto; object-fit: contain; flex: none; filter: grayscale(1); opacity: .58; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .logo-track { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; } }

/* Architects: phases timeline + approval */
.phases { display: flex; align-items: stretch; gap: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-sm); overflow: hidden; }
.phase { flex: 1; padding: 16px; border-left: 1px solid var(--border); position: relative; }
.phase:first-child { border-left: none; }
.phase .pn { width: 26px; height: 26px; border-radius: 50%; background: var(--bg-soft); color: var(--slate-500); display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: .76rem; margin-bottom: 10px; }
.phase b { font-size: .82rem; color: var(--ink); display: block; }
.phase small { font-size: .72rem; color: var(--slate-400); }
.phase.done .pn { background: var(--c-green); color: #fff; }
.phase.current .pn { background: var(--accent); color: #fff; }
.phase.current { background: var(--accent-tint); }
@media (max-width: 760px) { .phases { flex-direction: column; } .phase { border-left: none; border-top: 1px solid var(--border); } .phase:first-child { border-top: none; } }
.approval { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.approval .grow { flex: 1; font-size: .85rem; color: var(--ink); }
.seg-toggle { display: inline-flex; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 30px; padding: 3px; }
.seg-toggle button { font-family: var(--body); font-size: .78rem; font-weight: 600; border: none; background: transparent; color: var(--slate-500); padding: 6px 14px; border-radius: 30px; cursor: pointer; }
.seg-toggle button.is-active { background: var(--c-green); color: #fff; }

/* Lawyers / matter e-sign status */
.esign { display: grid; gap: 10px; }
.esign-step { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.esign-step .dot { width: 24px; height: 24px; border-radius: 50%; background: var(--bg-soft); color: var(--slate-400); display: grid; place-items: center; flex: none; }
.esign-step .dot .lucide { width: 14px; height: 14px; }
.esign-step b { font-size: .85rem; color: var(--ink); }
.esign-step.done .dot { background: var(--c-green); color: #fff; }
.esign-step .grow { flex: 1; }
.esign-step small { color: var(--slate-400); font-size: .74rem; }

/* ----- Accountants hero: practice dashboard (progress ring + deadlines) ----- */
.acct-card { width: 100%; max-width: 440px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.acct-top { padding: 14px 16px; border-bottom: 1px solid var(--border); background: var(--bg-alt); display: flex; align-items: center; justify-content: space-between; }
.acct-top b { font-family: var(--display); color: var(--ink); font-size: .9rem; }
.acct-top small { color: var(--slate-500); font-size: .75rem; }
.acct-ring-row { display: flex; align-items: center; gap: 18px; padding: 18px 16px; border-bottom: 1px solid var(--border); }
.ring-stat { width: 92px; height: 92px; border-radius: 50%; flex: none; display: grid; place-items: center; position: relative; background: conic-gradient(var(--c-green) 0 75%, var(--c-green-bg) 75% 100%); }
.ring-stat::after { content: ""; position: absolute; inset: 11px; background: #fff; border-radius: 50%; }
.ring-stat span { position: relative; z-index: 1; font-family: var(--display); font-weight: 700; font-size: 1.2rem; color: var(--ink); }
.acct-ring-row .meta b { display: block; font-family: var(--display); color: var(--ink); font-size: 1rem; }
.acct-ring-row .meta p { color: var(--slate-500); font-size: .82rem; margin-top: 3px; }
.acct-deadlines { padding: 13px 16px; display: grid; gap: 11px; }
.dl-row { display: flex; align-items: center; gap: 10px; font-size: .82rem; }
.dl-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dl-row .grow { flex: 1; color: var(--ink); }
.dl-row small { color: var(--slate-400); }

/* ----- Architects hero: blueprint floor plan ----- */
.blue-card { width: 100%; max-width: 440px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.blue-top { padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.blue-top b { font-family: var(--display); color: var(--ink); font-size: .9rem; display: block; }
.blue-top .bt-title small { display: block; color: var(--slate-500); font-size: .72rem; margin-top: 1px; }
.blue-plan { background: linear-gradient(160deg, #eef4fd, #f8fbff); padding: 14px 16px; border-bottom: 1px solid var(--border); }
.blue-plan svg { width: 100%; height: auto; display: block; }
.blue-plan svg text { font-family: var(--body); }
.blue-plan .t-room { font-size: 10px; font-weight: 700; letter-spacing: .1em; fill: #34517c; }
.blue-plan .t-area { font-size: 8px; fill: #8298bd; }
.blue-plan .t-dim { font-size: 8px; fill: #6a83ac; }
.blue-plan .t-n { font-size: 9px; font-weight: 700; fill: #34517c; }
.blue-foot { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; }
.blue-foot .st { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--slate-500); }
.blue-foot .st .lucide { width: 16px; height: 16px; color: var(--c-amber); }
.blue-foot .ok { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 700; color: var(--c-green); background: var(--c-green-bg); border: 1px solid var(--c-green-bd); border-radius: 20px; padding: 5px 11px; }
.blue-foot .ok .lucide { width: 14px; height: 14px; }

/* Project tracking mockup (property development) */
.proj-body { padding: 15px 15px 13px; display: grid; gap: 13px; background: linear-gradient(160deg, #f4f8fe, #ffffff); border-bottom: 1px solid var(--border); }
.pp-head { display: flex; justify-content: space-between; align-items: baseline; font-size: .76rem; color: var(--slate-500); margin-bottom: 7px; }
.pp-head b { font-family: var(--display); color: var(--ink); font-size: 1.05rem; }
.pp-bar { height: 8px; border-radius: 6px; background: #e5edf8; overflow: hidden; }
.pp-bar i { display: block; height: 100%; width: 62%; background: linear-gradient(90deg, var(--c-blue), #4384db); border-radius: 6px; }
.proj-phases { display: grid; grid-template-columns: repeat(5, 1fr); position: relative; }
.proj-phases::before { content: ""; position: absolute; left: 10%; right: 10%; top: 11px; height: 2px; background: #dbe5f3; }
.pph { display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; z-index: 1; }
.pph .dot { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid #cdd9ec; display: grid; place-items: center; }
.pph .dot .lucide { width: 12px; height: 12px; color: #fff; }
.pph.done .dot { background: var(--c-green); border-color: var(--c-green); }
.pph.now .dot { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.pph small { font-size: .64rem; font-weight: 600; color: var(--slate-500); }
.pph.done small, .pph.now small { color: var(--ink); }
.proj-rows { display: grid; gap: 8px; }
.pr { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); }
.pr .pic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none; }
.pr .pic .lucide { width: 16px; height: 16px; }
.pr-t { flex: 1; min-width: 0; }
.pr-t b { display: block; font-size: .8rem; color: var(--ink); line-height: 1.2; }
.pr-t small { font-size: .69rem; color: var(--slate-500); }
.pr .pill { margin-left: auto; flex: none; }
.pill.grey { background: var(--bg-soft); color: var(--slate-500); }

/* ---------- Infrastructure page ---------- */
/* utility-bar items become links */
a.u-item { color: inherit; text-decoration: none; transition: opacity .15s ease; }
a.u-item:hover { opacity: .82; text-decoration: underline; text-underline-offset: 2px; }

/* green uptime bar variant (reuses .pp-bar) */
.pp-bar.green i { background: linear-gradient(90deg, var(--c-green), #3fa972); }

/* hero system-status panel */
.statuspanel { width: 100%; max-width: 420px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.sp-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.sp-top b { font-family: var(--display); color: var(--ink); font-size: .9rem; }
.sp-live { display: inline-flex; align-items: center; gap: 7px; font-size: .72rem; font-weight: 700; color: var(--c-green); }
.sp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-green); box-shadow: 0 0 0 3px var(--c-green-bg); flex: none; }
.sp-body { padding: 14px 16px; display: grid; gap: 13px; background: linear-gradient(160deg, #f4f8fe, #ffffff); }
.sp-uptime .row { display: flex; justify-content: space-between; align-items: baseline; font-size: .76rem; color: var(--slate-500); margin-bottom: 7px; }
.sp-uptime .row b { font-family: var(--display); color: var(--ink); font-size: 1.05rem; }
.sp-regions { display: grid; gap: 8px; }
.sp-region { display: flex; align-items: center; gap: 10px; padding: 8px 11px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); font-size: .8rem; color: var(--ink); }
.sp-region .grow { flex: 1; }
.sp-region .st-ok { display: inline-flex; align-items: center; gap: 6px; color: var(--c-green); font-weight: 700; font-size: .7rem; }
.sp-region .st-ok .sp-dot { width: 7px; height: 7px; box-shadow: 0 0 0 2px var(--c-green-bg); }
.sp-cert { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px dashed var(--c-blue-bd); background: var(--c-blue-bg); border-radius: var(--radius); }
.sp-cert .lucide { width: 18px; height: 18px; color: var(--c-blue); flex: none; }
.sp-cert b { font-size: .78rem; color: var(--ink); }
.sp-cert small { margin-left: auto; font-size: .68rem; color: var(--slate-500); }

/* ISO certificate banner (single clean card) */
.certbanner { display: flex; align-items: center; gap: 20px; max-width: 720px; margin: 0 auto 26px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px 24px; box-shadow: var(--shadow-sm); }
.certseal { width: 64px; height: 64px; flex: none; }
.certbanner .cb-t b { display: block; font-family: var(--display); color: var(--ink); font-size: 1.05rem; margin-bottom: 4px; }
.certbanner .cb-t p { margin: 0; color: var(--slate-500); font-size: var(--fs-sm); line-height: 1.55; }
.certbanner .cb-badge { margin-left: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; font-size: .68rem; font-weight: 700; color: var(--c-green); background: var(--c-green-bg); border: 1px solid var(--c-green-bd); border-radius: 20px; padding: 4px 10px; white-space: nowrap; }
.certbanner .cb-badge .lucide { width: 13px; height: 13px; }
@media (max-width: 620px) { .certbanner { flex-direction: column; text-align: center; } .certbanner .cb-badge { margin: 0; align-self: center; } }

/* 6-item security grid */
.secgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.secitem { display: flex; align-items: center; gap: 11px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 13px 14px; }
.secitem .ic { margin: 0; width: 34px; height: 34px; flex: none; display: grid; place-items: center; }
.secitem .ic .lucide { width: 17px; height: 17px; }
.secitem b { font-size: .85rem; color: var(--ink); line-height: 1.25; }
@media (max-width: 820px) { .secgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .secgrid { grid-template-columns: 1fr; } }

/* sustainability stat card */
.greenstat { text-align: center; background: linear-gradient(160deg, #eaf7ef, #ffffff); border: 1px solid var(--c-green-bd); border-radius: var(--radius-lg); padding: 30px 26px; box-shadow: var(--shadow-sm); }
.greenstat .gs-num { font-family: var(--display); font-weight: 700; color: var(--c-green); font-size: 2.7rem; line-height: 1; display: inline-flex; align-items: center; gap: 10px; }
.greenstat .gs-num .lucide { width: 30px; height: 30px; }
.greenstat p { margin: 12px 0 0; color: var(--slate-500); font-size: .85rem; }
.greenstat .emas { margin-top: 16px; display: inline-flex; align-items: center; gap: 7px; font-size: .72rem; font-weight: 700; color: var(--c-green); background: #fff; border: 1px solid var(--c-green-bd); border-radius: 20px; padding: 6px 12px; }

/* tech card with bullet list */
.ecard .feature-list { margin-top: 14px; }

/* awards row */
.awards { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.award { display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px 16px; box-shadow: var(--shadow-xs); }
.award .lucide { width: 20px; height: 20px; color: var(--accent); flex: none; }
.award b { display: block; font-size: .82rem; color: var(--ink); }
.award small { font-size: .7rem; color: var(--slate-500); }

/* Stat icon (infrastructure quick facts) */
.stat .s-ic { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius); margin-bottom: 12px; }
.stat .s-ic .lucide { width: 20px; height: 20px; }
.stat .s-badge { display: block; width: 54px; height: 54px; margin-bottom: 12px; }

/* Hero right-side background photo (faded into the section) */
.hero.has-bg .container { grid-template-columns: 1fr; position: relative; z-index: 1; }
.hero.has-bg .container > div { max-width: 560px; position: relative; z-index: 1; }
.hero-bg { position: absolute; top: 0; right: 0; width: 54%; height: 100%; z-index: 0; pointer-events: none; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 42%); mask-image: linear-gradient(to right, transparent 0%, #000 42%); }
@media (max-width: 900px) { .hero-bg { display: none; } .hero.has-bg .container > div { max-width: none; } }

/* Compact recognition strip */
.reco-strip { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 30px; }
.reco-chip { display: inline-flex; align-items: center; gap: 9px; font-size: var(--fs-sm); color: var(--slate-500); }
.reco-chip .lucide { width: 20px; height: 20px; color: var(--accent); flex: none; }
.reco-chip b { color: var(--ink); font-weight: 600; }

/* Compact page rhythm (infrastructure) */
.page-infra .section { padding-block: 58px; }
.page-infra .section-head { margin-bottom: 34px; }
.page-infra .hero .container { padding-block: 60px; }

/* Vertical auto-slideshow (data centre technology): icon menu left, content right */
.vslides { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 42px; align-items: center; max-width: 1000px; margin-inline: auto; }
.vslides-nav { display: flex; flex-direction: column; }
.vs-item { display: flex; align-items: center; gap: 14px; padding: 15px 4px; border-top: 1px solid var(--border); cursor: pointer; outline: none; }
.vs-item:first-child { border-top: none; }
.vs-item:focus-visible { box-shadow: 0 0 0 3px var(--accent-soft); border-radius: 6px; }
.vs-rail { width: 3px; align-self: stretch; min-height: 40px; border-radius: 3px; background: var(--border); position: relative; flex: none; overflow: hidden; }
.vs-rail i { position: absolute; inset: 0 0 auto 0; height: 0; background: var(--accent); border-radius: 3px; }
.vs-item.is-active .vs-rail i { animation: vsfill var(--vs-dur, 6s) linear forwards; }
.vslides:hover .vs-item.is-active .vs-rail i { animation-play-state: paused; }
.vs-ic { width: 40px; height: 40px; border-radius: var(--radius); display: grid; place-items: center; flex: none; filter: grayscale(.4); opacity: .65; transition: filter .2s ease, opacity .2s ease; }
.vs-ic .lucide { width: 20px; height: 20px; }
.vs-item.is-active .vs-ic { filter: none; opacity: 1; }
.vs-title { font-family: var(--display); font-size: var(--fs-lg); color: var(--slate-500); transition: color .2s ease; }
.vs-item.is-active .vs-title { color: var(--ink); }
.vslides-stage { position: relative; min-height: 320px; }
.vs-panel { position: absolute; inset: 0; opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; pointer-events: none; }
.vs-panel.is-active { opacity: 1; transform: none; pointer-events: auto; }
.vs-content { position: relative; overflow: hidden; height: 100%; min-height: 320px; border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow-sm); padding: 34px 38px; display: flex; flex-direction: column; justify-content: center; }
.vs-content h3 { font-family: var(--display); font-size: var(--fs-h3); color: var(--ink); margin: 0 0 6px; position: relative; z-index: 1; }
.vs-content > p { color: var(--slate-500); margin: 0 0 20px; position: relative; z-index: 1; }
.vs-content .feature-list { position: relative; z-index: 1; gap: 13px; }
.vs-content .feature-list li { font-size: var(--fs-base); }
.vs-content .feature-list li .lucide { color: var(--c-green); }
.vs-watermark { position: absolute; right: -14px; top: -14px; width: 150px; height: 150px; opacity: .1; z-index: 0; }
.viz-amber { background: linear-gradient(150deg, var(--c-amber-bg), #ffffff); color: var(--c-amber); }
.viz-blue  { background: linear-gradient(150deg, var(--c-blue-bg), #ffffff);  color: var(--c-blue); }
.viz-green { background: linear-gradient(150deg, var(--c-green-bg), #ffffff); color: var(--c-green); }
.viz-rose  { background: linear-gradient(150deg, var(--c-rose-bg), #ffffff);  color: var(--c-rose); }
@keyframes vsfill { from { height: 0; } to { height: 100%; } }
@media (max-width: 820px) { .vslides { grid-template-columns: 1fr; gap: 22px; } .vslides-stage, .vs-content { min-height: 240px; } }
@media (prefers-reduced-motion: reduce) { .vs-item.is-active .vs-rail i { animation: none; height: 100%; } .vs-panel { transition: none; } }

/* Partners grid */
.partners-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.partner-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px 24px; box-shadow: var(--shadow-xs); transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
.partner-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.pc-logo { height: 64px; display: grid; place-items: center; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.pc-logo img { max-height: 50px; max-width: 80%; width: auto; object-fit: contain; }
.pc-word { font-family: var(--display); font-weight: 700; font-size: 1.3rem; color: var(--ink); letter-spacing: -.01em; text-align: center; }
.partner-card h3 { font-size: var(--fs-lg); color: var(--ink); margin: 0 0 5px; }
.partner-card p { margin: 0; color: var(--slate-500); font-size: var(--fs-sm); line-height: 1.5; }
@media (max-width: 900px) { .partners-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .partners-grid { grid-template-columns: 1fr; } }

/* ----- Lawyers hero: matter timeline ----- */
.case-card { width: 100%; max-width: 440px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.case-top { padding: 14px 16px; border-bottom: 1px solid var(--border); background: var(--bg-alt); display: flex; align-items: center; justify-content: space-between; }
.case-top b { font-family: var(--display); color: var(--ink); font-size: .9rem; }
.case-top small { color: var(--slate-500); font-size: .75rem; }
.case-tl { padding: 18px 18px 12px; }
.tl-item { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: start; position: relative; padding-bottom: 18px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: -2px; width: 2px; background: var(--border); }
.tl-item:last-child::before { display: none; }
.tl-mark { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; z-index: 1; }
.tl-mark .lucide { width: 15px; height: 15px; }
.tl-mark.done { background: var(--c-green); color: #fff; }
.tl-mark.now { background: var(--accent); color: #fff; }
.tl-mark.up { background: var(--bg-soft); color: var(--slate-400); border: 1px solid var(--border); }
.tl-body b { font-size: .88rem; color: var(--ink); }
.tl-body small { display: block; color: var(--slate-500); font-size: .76rem; margin-top: 1px; }
.tl-date { color: var(--slate-400); font-size: .74rem; white-space: nowrap; padding-top: 4px; }

/* Platform: record rail */
.rail { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 22px; position: relative; }
.rail-track { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.rail-node { display: flex; align-items: center; gap: 9px; font-family: var(--body); font-weight: 600; font-size: .82rem; color: var(--slate-700); background: var(--bg-alt); border: 1px solid var(--border); border-radius: 30px; padding: 7px 14px 7px 7px; cursor: pointer; }
.rail-node.is-active { border-color: var(--accent); background: var(--accent-tint); color: var(--ink); }
.rail-node .rn-ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.rail-node .rn-ic .lucide { width: 16px; height: 16px; }
.rail-arrow { color: var(--border-strong); width: 18px; height: 18px; flex: none; }
.rail-detail { border-top: 1px solid var(--border); padding-top: 16px; }
.rail-panel { display: none; }
.rail-panel.is-active { display: block; }
.rail-panel b { font-family: var(--display); color: var(--ink); font-size: 1rem; display: block; margin-bottom: 6px; }
.rail-panel p { color: var(--slate-500); font-size: .88rem; }

/* Contact time-slot picker */
.slots { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 20px; }
.slots-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.slots-head b { font-family: var(--display); color: var(--ink); }
.slots-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.slot { font-family: var(--body); font-size: .82rem; font-weight: 600; color: var(--slate-700); background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 11px 0; cursor: pointer; transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.slot:hover { border-color: var(--border-strong); }
.slot.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ======================================================================
   HEADING & EXPRESSIVE-ACCENT SYSTEM  (orange only, headings only)
   ----------------------------------------------------------------------
   Accents go ONLY on hero h1 and section h2. Never on eyebrows, leads,
   subtitles, body copy, or card h3. One treatment per heading; wrap only
   the 1-3 key words. Max 3 accents per page (hero + <=2 sections); never
   two accented headings adjacent.

   ROLES (when to use which):
     .hand-mark  hand-drawn SVG underline  -> HERO h1 signature (1 / page)
     .ul-draw    animated drawn underline  -> the pivotal/demo section h2
     .ink-accent coloured word             -> the closing/outcomes h2
     .hl         highlight                 -> rare, loud punchline only
   Handwritten annotation (.hand-anno = .hand-arrow + .hand-note): exactly
   one per page, near a mockup/stat. Hidden on small screens.
   ====================================================================== */
.hl { background-image: linear-gradient(transparent 58%, var(--accent-soft) 58%); padding: 0 .1em; }
.hl-teal { background-image: linear-gradient(transparent 58%, var(--c-teal-bg) 58%); padding: 0 .1em; }
.ink-accent { color: var(--accent-dark); }
.ul-accent { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
/* animated heading underline: draws in when scrolled into view */
.ul-draw { position: relative; white-space: nowrap; }
.ul-draw::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: -0.24em; height: 0.36em; min-height: 10px;
  background: center/100% 100% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M4 15 C 70 6 150 6 210 12 S 290 19 296 13' fill='none' stroke='%23d8690f' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E");
  transform: scaleX(0); transform-origin: left; }
.ul-draw.in::after { animation: uldraw 0.6s var(--ease) forwards; }
@keyframes uldraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Gentle floating motion (apply only where it suits) ---------- */
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes floaty-sm { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.floaty { animation: floaty 5.5s ease-in-out infinite; will-change: transform; }
.floaty-sm { animation: floaty-sm 4.5s ease-in-out infinite; will-change: transform; }
.floaty-d { animation-delay: 1.4s; }
@media (prefers-reduced-motion: reduce) { .floaty, .floaty-sm { animation: none; } .ul-draw::after { transform: scaleX(1); } }

/* ---------- Self-playing demo cursor ---------- */
.demo-cursor { position: absolute; top: 0; left: 0; width: 26px; height: 26px; z-index: 6; pointer-events: none; opacity: 0; filter: drop-shadow(0 2px 5px rgba(16,24,40,0.35)); will-change: transform; }
.demo-cursor svg { width: 100%; height: 100%; }
.demo-pressed { box-shadow: 0 0 0 4px var(--accent-soft) !important; }

/* ---------- Handwritten accents ---------- */
.hand { font-family: "Caveat", "Comic Sans MS", cursive; color: var(--accent-dark); font-weight: 700; }
/* Hero h1 signature underline. Pre-JS state is hidden (dash); the draw is
   driven from enterprise.js (getTotalLength -> strokeDashoffset). */
.hand-mark { position: relative; display: inline-block; }
.hand-mark svg { position: absolute; left: -4%; right: -4%; bottom: -0.32em; width: 108%; height: 0.46em;
  stroke: var(--accent); fill: none; stroke-width: 3; stroke-linecap: round; pointer-events: none;
  stroke-dasharray: 300; stroke-dashoffset: 300; }
/* if JS never runs, still show the underline (graceful, static) */
.no-js .hand-mark svg, .hand-mark.is-drawn svg { stroke-dasharray: none; stroke-dashoffset: 0; }

/* One handwritten annotation per page: arrow + Caveat note, anchored to a
   positioned hero/mockup container. Corner modifiers set placement. */
.hand-anno { position: absolute; z-index: 6; display: inline-flex; align-items: center; gap: 6px; pointer-events: none; }
.hand-note { display: inline-flex; align-items: center; gap: 8px; font-family: "Caveat", cursive; font-weight: 700;
  font-size: 1.45rem; line-height: 1; color: var(--accent-dark); transform: rotate(-3deg); white-space: nowrap; }
.hand-arrow { width: 46px; height: 30px; stroke: var(--accent); fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.hand-anno.flip .hand-note { transform: rotate(3deg); }
.hand-anno.stack { flex-direction: column; align-items: flex-start; gap: 2px; }
/* annotation anchors */
.hero .container, .anno-anchor { position: relative; }

@media (prefers-reduced-motion: reduce) { .hand-mark svg { stroke-dasharray: none; stroke-dashoffset: 0; } }
/* hand annotations are decorative; drop them on small screens to avoid overlap */
@media (max-width: 768px) { .hand-anno { display: none; } }

/* quiet icon (pain points) */
.ic.quiet, .mega-ico.quiet { background: var(--bg-soft) !important; color: var(--slate-500) !important; border-color: var(--border) !important; }

/* feature checklist */
.feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.feature-list li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-sm); color: var(--slate-600, var(--slate-500)); }
.feature-list .lucide { width: 18px; height: 18px; color: var(--success); flex: none; margin-top: 1px; }

/* FAQ */
.faq { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 960px; margin-inline: auto; align-content: start; }
/* Odd number of items would leave a lonely box in the 2-col grid: stack instead.
   Even counts (2, 4, 6) keep two columns. Applies to every FAQ automatically. */
.faq:has(> details:nth-child(odd):last-child) { grid-template-columns: 1fr; max-width: 780px; }
@media (max-width: 760px) { .faq { grid-template-columns: 1fr; } }
.faq details { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 20px; }
.faq summary { cursor: pointer; font-weight: 600; font-family: var(--display); color: var(--ink); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent-dark); font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq p { margin-top: 12px; color: var(--slate-500); font-size: var(--fs-sm); }

/* Testimonial */
.quote-card { text-align: left; padding: 38px 44px 30px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); max-width: 760px; margin-inline: auto; position: relative; overflow: hidden; }
.quote-card::before { content: "\201C"; position: absolute; top: -26px; right: 26px; font-family: var(--display); font-size: 140px; line-height: 1; color: var(--accent); opacity: .12; pointer-events: none; }
.quote-stars { color: var(--c-amber); letter-spacing: 2px; font-size: .95rem; margin-bottom: 14px; }
.quote-card blockquote { font-family: var(--display); font-weight: 500; font-size: var(--fs-h3); color: var(--ink); line-height: 1.45; margin: 0; position: relative; }
.quote-foot { display: flex; align-items: center; gap: 14px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.quote-foot .avatar { width: 46px; height: 46px; }
.quote-foot .who b { display: block; font-family: var(--display); color: var(--ink); font-size: .92rem; }
.quote-foot .who span { color: var(--slate-500); font-size: .82rem; }

/* ---------- Pricing calculator ---------- */
.calc { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 24px; align-items: start; }
.calc-panel { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 28px; }
.calc-block + .calc-block { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border); }
.calc-label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.calc-users { font-family: var(--display); font-weight: 700; font-size: 1.4rem; color: var(--accent-dark); }
.calc-users small { font-family: var(--body); font-weight: 500; font-size: var(--fs-sm); color: var(--slate-500); }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 6px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent) var(--fill,0%), var(--bg-soft) var(--fill,0%)); cursor: pointer; outline-offset: 4px; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 6px; background: #fff; border: 2px solid var(--accent); box-shadow: var(--shadow-md); cursor: grab; }
input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 6px; background: #fff; border: 2px solid var(--accent); box-shadow: var(--shadow-md); }
.calc-scale { display: flex; justify-content: space-between; font-size: 0.74rem; color: var(--slate-400); margin-top: 8px; }
.seg { display: inline-flex; background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 4px; gap: 4px; }
.seg button { font-family: var(--body); font-weight: 600; font-size: var(--fs-sm); border: none; background: transparent; color: var(--slate-500); padding: 8px 16px; border-radius: var(--radius); cursor: pointer; }
.seg button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: var(--shadow-xs); }
.seg .save { color: var(--success); font-weight: 700; }
.addons { display: grid; gap: 12px; }
.addon { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; cursor: pointer; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.addon:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); }
.addon input { width: 19px; height: 19px; accent-color: var(--accent); }
.addon .addon-name { font-weight: 600; color: var(--ink); }
.addon .addon-desc { font-size: 0.8rem; color: var(--slate-500); }
.addon .addon-price { font-family: var(--display); font-weight: 700; white-space: nowrap; color: var(--ink); }
.calc-summary { position: sticky; top: calc(var(--nav-h) + 16px); background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; }
.sum-row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 7px 0; font-size: var(--fs-sm); }
.sum-row .muted { color: var(--slate-500); }
.sum-strike { text-decoration: line-through; color: var(--slate-400); }
.sum-mo { font-family: var(--display); font-weight: 700; color: var(--accent-dark); }
.sum-div { height: 1px; background: var(--border); margin: 12px 0; }
.sum-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 12px; }
.sum-total .sum-amt { font-family: var(--display); font-weight: 700; font-size: 1.9rem; color: var(--ink); letter-spacing: -0.03em; }
.sum-note { font-size: 0.78rem; color: var(--slate-400); margin-top: 14px; }

/* ---------- Forms / contact ---------- */
.form-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 28px; }
.field { display: grid; gap: 6px; }
.field + .field { margin-top: 16px; }
.field label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.field input, .field textarea, .field select { font-family: var(--body); font-size: var(--fs-base); color: var(--ink); background: #fff; border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 11px 13px; width: 100%; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field textarea { resize: vertical; min-height: 120px; }
.contact-points { display: grid; gap: 18px; margin-top: 8px; }
.contact-point { display: flex; gap: 14px; align-items: center; }
.contact-point .ic { margin: 0; flex: none; width: 42px; height: 42px; border-radius: var(--radius); display: grid; place-items: center; }
.contact-point .ic .lucide { width: 20px; height: 20px; }
.contact-point h3 { font-size: var(--fs-lg); margin-bottom: 2px; }
.contact-point p { color: var(--slate-500); font-size: var(--fs-sm); }

@media (max-width: 860px) {
  .calc { grid-template-columns: 1fr; }
  .calc-summary { position: static; }
}

/* reveal (legacy fallback if app.js is ever used; enterprise.js uses GSAP) */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero .container { grid-template-columns: 1fr; gap: 40px; padding-block: 56px; }
  .frow, .frow.flip { grid-template-columns: 1fr; gap: 32px; }
  .frow.flip .f-media { order: 0; }
  .spotlight, .spotlight.flip { grid-template-columns: 1fr; gap: 36px; }
  .spotlight.flip .spot-media { order: 0; }
  .spotlight + .spotlight { margin-top: 52px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { border-left: none; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .cards { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .section { padding-block: 60px; }
  .cta { padding: 48px 26px; }
}
/* Mobile navigation: hamburger + simple menu / submenu (no mega icons or descriptions) */
@media (max-width: 860px) {
  .nav-list { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-list.mobile-open { display: flex; position: absolute; top: var(--nav-h); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: #fff; border-bottom: 1px solid var(--border); box-shadow: var(--shadow-md); padding: 4px 16px 12px; max-height: calc(100dvh - var(--nav-h)); overflow-y: auto; }
  .nav-list.mobile-open > li { border-top: 1px solid var(--border); }
  .nav-list.mobile-open > li:first-child { border-top: none; }
  .nav-list.mobile-open .nav-link { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 2px; font-size: 1rem; font-weight: 600; }
  .nav-list.mobile-open .nav-link .chev { margin-left: auto; width: 18px; height: 18px; color: var(--slate-500); transition: transform var(--dur) var(--ease); }
  .nav-list.mobile-open .has-mega:has(.mega.open) .chev { transform: rotate(180deg); }
  .nav-list.mobile-open .mega { position: static; min-width: 0; box-shadow: none; border: none; opacity: 1; visibility: visible; pointer-events: auto; transform: none; padding: 0 0 8px; display: none; }
  .nav-list.mobile-open .mega.open { display: block; }
  .nav-list.mobile-open .mega::before { display: none; }
  .nav-list.mobile-open .mega-grid { grid-template-columns: 1fr; gap: 0; }
  .nav-list.mobile-open .mega-item { padding: 11px 2px 11px 14px; gap: 0; }
  .nav-list.mobile-open .mega-item:hover { background: none; }
  .nav-list.mobile-open .mega-ico { display: none; }
  .nav-list.mobile-open .mega-item p { display: none; }
  .nav-list.mobile-open .mega-item h4 { font-size: .95rem; font-weight: 500; color: var(--slate-600); margin: 0; }
  .nav-list.mobile-open .mega-foot { display: none; }
}
@media (max-width: 460px) { .footer-grid { grid-template-columns: 1fr; } .dash-body { grid-template-columns: 1fr; } .dash-side { display: none; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } .js .reveal { opacity: 1; transform: none; } }

/* Language selector */
.lang-switch { display: inline-flex; align-items: center; gap: 1px; margin-right: 8px; font-size: .8rem; font-weight: 600; }
.lang-switch a { color: var(--slate-400); padding: 4px 7px; border-radius: 5px; text-decoration: none; transition: color .15s ease, background .15s ease; }
.lang-switch a[aria-current="page"] { color: var(--ink); background: var(--bg-soft); }
.lang-switch a:hover { color: var(--ink); }
@media (max-width: 720px) { .lang-switch { margin-right: 4px; } }

/* Language selector in the top utility bar (dark) */
.utilitybar .lang-switch { margin: 0; gap: 1px; }
.utilitybar .lang-switch a { color: #c8d2e4; padding: 2px 6px; border-radius: 5px; }
.utilitybar .lang-switch a:hover { color: #fff; background: rgba(255,255,255,0.10); }
.utilitybar .lang-switch a[aria-current="page"] { color: #fff; background: rgba(255,255,255,0.14); }

/* Top bar: drop the trust items before the longer German labels can collide/wrap */
@media (max-width: 1024px) { .utilitybar .u-left { display: none; } }

/* Header sign-in button hides on mobile (available in the footer / members portal) */
@media (max-width: 860px) { .nav-actions .nav-signin { display: none; } }

/* Header sign-in: accent (orange) outline, the inverse of the solid primary CTA */
.nav-actions .nav-signin { background: #fff; color: var(--accent-dark); border-color: var(--accent); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.nav-actions .nav-signin:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Logo-strip eyebrow: neutral (no accent color) */
.label.label-neutral { color: var(--slate-500); }

/* ixxo.com one-pager: offset in-page anchors below the sticky header */
:where(#products, #services, #about, #contact, #who) { scroll-margin-top: 84px; }


/* Flag language switch (replaces EN|DE text) */
.lang-switch a { padding: 3px 5px; display: inline-flex; align-items: center; }
.lang-switch .flag { width: 24px; height: 15px; border-radius: 3px; display: block; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28); opacity: .5; transition: opacity .15s ease; }
.lang-switch a:hover .flag { opacity: .9; }
.lang-switch a[aria-current="page"] .flag { opacity: 1; }

/* Hero: particles absorbed by the IXXO logo (ixxo.com) */
.ix-globe { width: 100%; max-width: 480px; margin-inline: auto; }
.ix-globe svg { width: 100%; height: auto; display: block; overflow: visible; }
.ix-globe .pcl { transform-box: fill-box; transform-origin: center; animation: absorb var(--dur) cubic-bezier(.55,.06,.68,.19) infinite; animation-delay: var(--del); }
@keyframes absorb {
  0%   { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 0; }
  14%  { opacity: .95; }
  82%  { opacity: .85; }
  100% { transform: translate(0,0) scale(.1); opacity: 0; }
}
.ix-globe .core-glow { transform-box: fill-box; transform-origin: center; animation: corepulse 2.8s ease-in-out infinite; }
@keyframes corepulse { 0%,100% { opacity: .5; transform: scale(.88); } 50% { opacity: .9; transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) {
  .ix-globe .pcl { animation: none; opacity: .55; transform: translate(var(--dx), var(--dy)); }
  .ix-globe .core-glow { animation: none; }
}

/* Contact form: success + error states (handled by contact.js) */
.q-msg { color: var(--c-rose); font-size: var(--fs-sm); margin: 4px 0 12px; }
.q-success { text-align: center; padding: 26px 10px; }
.q-success .ic { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 16px; }
.q-success .ic .lucide { width: 24px; height: 24px; }
.q-success h3 { font-size: var(--fs-h3); margin-bottom: 8px; }
.q-success p { color: var(--slate-500); max-width: 460px; margin-inline: auto; }

/* About: stacked stat rows (label left, big value right, accent bar) */
.stat-rows { display: flex; flex-direction: column; gap: 14px; }
.stat-row { display: flex; align-items: center; justify-content: space-between; gap: 18px;
  background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--accent);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 18px 26px; }
.stat-row .sr-label { color: var(--slate-500); font-size: 1rem; }
.stat-row .sr-value { font-family: var(--display); font-weight: 700; font-size: 1.9rem; color: var(--ink); letter-spacing: -0.02em; }
@media (max-width: 480px) { .stat-row { padding: 15px 18px; } .stat-row .sr-value { font-size: 1.55rem; } }

/* Scroll to top button (injected by enterprise.js) */
.to-top { position:fixed; right:22px; bottom:22px; width:44px; height:44px; display:grid; place-items:center; border-radius:50%; background:var(--accent); color:#fff; border:none; box-shadow:var(--shadow-lg); cursor:pointer; opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .25s ease, transform .25s ease, background .2s ease; z-index:70; }
.to-top.show { opacity:1; visibility:visible; transform:translateY(0); }
.to-top:hover { background:var(--accent-dark, #b6550a); }
@media (max-width:600px){ .to-top{ right:16px; bottom:16px; } }

/* Hero assurance stack (swapping trust cards) */
.assure-stack { position:relative; align-self:center; justify-self:center; width:100%; max-width:430px; height:250px; margin-inline:auto; }
.assure-card { position:absolute; left:0; right:0; top:0; display:flex; align-items:flex-start; gap:14px; min-height:150px; background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:22px; transition:transform .6s cubic-bezier(.22,.61,.36,1), opacity .55s ease; will-change:transform,opacity; }
.assure-card .ic { width:46px; height:46px; flex:none; }
.assure-card .ac-body { flex:1; }
.assure-card h3 { font-size:1.06rem; line-height:1.25; }
.assure-card p { margin-top:7px; color:var(--slate-500); font-size:.9rem; line-height:1.5; }
.assure-card .ac-badge { display:inline-block; margin-top:13px; font-size:.68rem; font-weight:700; color:var(--accent-dark,#b6550a); background:var(--accent-soft,#fdf0e4); border:1px solid #f4ddc6; border-radius:20px; padding:3px 11px; }
.assure-card.p0 { transform:translateY(0) scale(1); opacity:1; z-index:4; }
.assure-card.p1 { transform:translateY(20px) scale(.955); opacity:.72; z-index:3; }
.assure-card.p2 { transform:translateY(40px) scale(.91); opacity:.4; z-index:2; }
.assure-card.px { transform:translateY(58px) scale(.87); opacity:0; z-index:1; pointer-events:none; }

/* fix: center the glyph + rounded tone background on assurance-card icons */
.assure-card .ic { display:grid; place-items:center; border-radius:var(--radius); }
.assure-card .ic .lucide { width:22px; height:22px; }

/* Hero bento: center IXXO tile + benefit tiles, animated */
.ixbento { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; align-self:center; justify-self:center; width:100%; max-width:500px; margin-inline:auto; }
.ibx { display:flex; flex-direction:column; gap:9px; background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:15px 14px; opacity:0; animation:ibxin .5s ease forwards, ibxfloat 5s ease-in-out infinite; animation-delay:calc(var(--d)*0.08s), calc(1s + var(--d)*0.13s); }
.ibx .ic { width:38px; height:38px; display:grid; place-items:center; border-radius:var(--radius); }
.ibx .ic .lucide { width:19px; height:19px; }
.ibx b { font-size:.8rem; color:var(--ink); line-height:1.3; }
.ixcore { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; text-align:center; border-radius:var(--radius-lg); background:linear-gradient(135deg,#16273f 0%,#24487a 100%); color:#fff; box-shadow:var(--shadow-lg); padding:16px 12px; animation:corepulse 3.6s ease-in-out infinite; }
.ixcore img { height:24px; filter:brightness(0) invert(1); }
.ixcore span { font-size:.7rem; opacity:.85; line-height:1.35; }
@keyframes ibxin { from { opacity:0; transform:translateY(12px) scale(.92); } to { opacity:1; transform:none; } }
@keyframes ibxfloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-4px); } }
@keyframes corepulse { 0%,100% { box-shadow:var(--shadow-lg); } 50% { box-shadow:var(--shadow-lg), 0 0 0 7px rgba(216,105,15,.07); } }
@media (prefers-reduced-motion: reduce) { .ibx { animation:none; opacity:1; } .ixcore { animation:none; } }

/* Legal / policy pages */
.legal { max-width:800px; margin:0 auto; }
.legal-meta { color:var(--slate-400); font-size:var(--fs-sm); margin-bottom:10px; }
.legal h2 { font-size:var(--fs-h3); line-height:1.3; margin:34px 0 12px; }
.legal h2:first-of-type { margin-top:6px; }
.legal h3 { font-size:1.05rem; margin:24px 0 8px; color:var(--ink); }
.legal p { color:var(--slate-500); line-height:1.72; margin-bottom:14px; }
.legal ul, .legal ol { margin:0 0 16px 22px; }
.legal li { color:var(--slate-500); line-height:1.72; margin-bottom:7px; }
.legal a { color:var(--accent-dark); text-decoration:underline; }
.legal strong { color:var(--ink); }

/* ============================================================
   Mobile responsiveness fixes — 2026-07-04
   Real clipping/crowding only. Decorative off-edge bleed
   (.hero::before/::after gradient blobs, .vs-watermark icon at
   right:-14px) is intentional and is deliberately left clipped.
   ============================================================ */

/* Header CTA: on phones the solid "Book a walkthrough" button was
   shrunk by the flex row and wrapped onto two lines, growing tall
   and crowding the menu toggle. Keep it to one compact line. */
@media (max-width: 860px) {
  .nav-actions .btn { white-space: nowrap; }
}
@media (max-width: 600px) {
  .nav-actions .btn { padding: 10px 15px; font-size: .85rem; }
}

/* Apps explorer (.cat): the 3-column pipeline mock forced the whole
   panel wider than the screen, so the app tiles, heading and the
   "Won" lane were clipped by the panel's overflow:hidden. Stack the
   lanes/tiles and tighten padding on small screens. */
@media (max-width: 600px) {
  .cat-preview { padding: 24px 18px; }
}
@media (max-width: 560px) {
  .cat-media .mini-kanban,
  .cat-media .mini-flow2,
  .cat-media .mini-portal { max-width: 100%; }
  .mini-kanban { grid-template-columns: 1fr; gap: 10px; }
  .ws-tabbar { padding: 8px 8px 0; gap: 0; }
  .ws-tab { padding: 8px 8px; font-size: .72rem; }
}
@media (max-width: 460px) {
  .cat-list { grid-template-columns: 1fr; }
}
/* Smallest phones: shrink the mock tab labels a touch more so the
   four longer German tabs ("Rechnungen") still all fit unclipped. */
@media (max-width: 400px) {
  .ws-tab { padding: 7px 6px; font-size: .66rem; }
}

/* Card grids must never orphan a lone card on its own row. The base .cards is
   3 columns, so 4 items render as 3 + 1 and 2 items leave a gap. Balance those
   counts to two columns. Plain .cards only; .pcards and .trio set their own. */
.cards:not(.pcards):has(> :last-child:nth-child(4)) { grid-template-columns: repeat(2, 1fr); max-width: 900px; margin-inline: auto; }
.cards:not(.pcards):has(> :last-child:nth-child(2)) { grid-template-columns: repeat(2, 1fr); max-width: 720px; margin-inline: auto; }
@media (max-width: 640px) {
  .cards:not(.pcards):has(> :last-child:nth-child(4)),
  .cards:not(.pcards):has(> :last-child:nth-child(2)) { grid-template-columns: 1fr; }
}

/* Footer with the Compare column: six link columns fit one row on wide
   screens, then step down cleanly. Overrides the earlier .footer-grid rules
   (also fixes the lone "Legal" that used to wrap to its own row). */
.footer-grid { grid-template-columns: 1.6fr repeat(6, 1fr); }
@media (max-width: 1120px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px)  { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px)  { .footer-grid { grid-template-columns: 1fr; } }

/* Footer "Made in Germany" trust badge, stacked under the logo and slogan.
   The badge art is light grey, designed for dark backgrounds, so it sits
   directly on the navy footer (a white chip would hide its text). */
.footer-mig { display: block; margin-top: 20px; width: 158px; height: auto; }

/* Wider 65/35 hero text column for pages with long headings (.hero-wide) */
@media (min-width: 981px) { .hero-wide .container { grid-template-columns: 65fr 35fr; } }