/* ==========================================================================
   DynamicSoft Solutions — Design System
   Signature motif: the "clearance chain" — a line of linked nodes that light
   up in sequence, echoing the ZATCA Previous-Invoice-Hash chain at the heart
   of the product. Used sparingly: hero, section dividers, ZATCA timeline.
   ========================================================================== */

:root{
  /* ---- Color: derived from the DynamicSoft mark (#0098DA / #727579) ---- */
  --ink:        #0B1F2E;   /* deep navy-black — dark sections */
  --ink-soft:   #142B3D;
  --paper:      #F6F8FA;   /* light background */
  --white:      #FFFFFF;
  --blue:       #0098DA;   /* brand blue */
  --blue-dark:  #0072A8;
  --blue-pale:  #E4F4FC;
  --gray:       #727579;   /* brand gray */
  --gray-line:  #DEE2E6;
  --gray-soft:  #6B7684;
  --teal:       #17C3A3;   /* "cleared" success accent */
  --amber:      #F2A93B;   /* pitfall / warning accent */
  --text:       #16232C;
  --text-mute:  #5B6672;

  --font-display: 'Space Grotesk', sans-serif;
  --font-body:    'IBM Plex Sans', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;

  --container: 1180px;
  --radius: 10px;
  --radius-sm: 6px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; margin:0 0 .5em; letter-spacing:-0.01em; }
p{ margin:0 0 1em; }
.mono{ font-family:var(--font-mono); }

.container{ max-width:var(--container); margin:0 auto; padding:0 28px; }
.section{ padding:96px 0; }
.section-tight{ padding:64px 0; }
.section-alt{ background:var(--white); }
.section-ink{ background:var(--ink); color:#DCE6EC; }
.section-ink h2, .section-ink h3{ color:var(--white); }
.section-ink .text-mute{ color:#93A4B2; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue-dark); margin-bottom:14px;
}
.section-ink .eyebrow{ color:var(--teal); }
.eyebrow::before{ content:""; width:16px; height:1.5px; background:currentColor; display:inline-block; }

h1{ font-size:clamp(36px,5vw,58px); line-height:1.05; }
h2{ font-size:clamp(28px,3.4vw,40px); line-height:1.12; }
h3{ font-size:22px; }
.lede{ font-size:19px; color:var(--text-mute); max-width:640px; }
.section-ink .lede{ color:#B7C4CE; }

/* ---------------------------------- Buttons ---------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 24px; border-radius:999px; font-weight:600; font-size:15px;
  border:1.5px solid transparent; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--blue); color:#fff; box-shadow:0 6px 20px -8px rgba(0,152,218,.6); }
.btn-primary:hover{ background:var(--blue-dark); }
.btn-ghost{ background:transparent; border-color:var(--gray-line); color:var(--text); }
.btn-ghost:hover{ border-color:var(--blue); color:var(--blue-dark); }
.btn-ghost-light{ background:transparent; border-color:rgba(255,255,255,.28); color:#fff; }
.btn-ghost-light:hover{ border-color:var(--teal); color:var(--teal); }
.btn-row{ display:flex; gap:14px; flex-wrap:wrap; }

/* ---------------------------------- Header ------------------------------ */
.site-header{
  position:sticky; top:0; z-index:100;
  transition:background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
  background:rgba(246,248,250,.86); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--gray-line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; height:76px; }
.brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.brand img{ height:36px; width:auto; flex-shrink:0; }
.nav-links{ display:flex; align-items:center; gap:0; min-width:0; }
.nav-links > li{ position:relative; flex-shrink:0; }
.nav-links > li > a, .nav-links > li > button.nav-top{
  display:flex; align-items:center; gap:5px; white-space:nowrap;
  font-family:var(--font-body); font-weight:500; font-size:14px;
  padding:9px 10px; border-radius:8px; color:var(--text);
  background:none; border:none; cursor:pointer;
}
.nav-links > li > a:hover, .nav-links > li > button.nav-top:hover{ color:var(--blue-dark); }
.caret{ width:9px; height:9px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:rotate(45deg); margin-top:-3px; opacity:.7; }
.dropdown{
  position:absolute; top:calc(100% + 6px); left:0; min-width:260px;
  background:var(--white); border:1px solid var(--gray-line); border-radius:12px;
  box-shadow:0 20px 40px -16px rgba(11,31,46,.22);
  padding:10px; opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
.nav-links > li:hover .dropdown, .nav-links > li.open .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown a{ display:block; padding:10px 12px; border-radius:8px; font-size:14.5px; }
.dropdown a:hover{ background:var(--blue-pale); color:var(--blue-dark); }
.dropdown .dd-desc{ display:block; font-size:12.5px; color:var(--text-mute); margin-top:1px; }
.dropdown-wide{ min-width:460px; column-count:2; column-gap:4px; }
.dropdown-wide a{ break-inside:avoid; }
.dropdown-foot{ grid-column:1/-1; border-top:1px solid var(--gray-line); margin-top:6px; padding-top:8px; }
.dropdown-foot a{ font-weight:600; color:var(--blue-dark); }
@media (max-width:980px){ .dropdown-wide{ column-count:1; min-width:0; } }
.nav-cta{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.nav-toggle{ display:none; background:none; border:none; cursor:pointer; }

@media (max-width: 1240px){
  .nav-cta .btn-ghost{ display:none; }
}
@media (max-width: 980px){
  .nav-links{ display:none; }
  .nav-toggle{ display:block; }
  .nav-cta .btn-ghost{ display:none; }
}

/* ---------------------------------- Hero -------------------------------- */
.hero{ padding:76px 0 60px; overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
@media (max-width:980px){ .hero-grid{ grid-template-columns:1fr; } }

/* Clearance chain — signature element */
.chain-wrap{
  position:relative; background:var(--ink); border-radius:20px; padding:38px 28px;
  box-shadow:0 30px 60px -24px rgba(11,31,46,.45);
}
.chain-endpoints{ display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; }
.chain-endpoint{ display:flex; flex-direction:column; align-items:center; gap:8px; width:84px; }
.chain-endpoint .badge{
  width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  font-family:var(--font-mono); font-size:11px; color:#B7C4CE;
}
.chain-endpoint span.lbl{ font-size:11.5px; color:#93A4B2; text-align:center; }

.chain{ position:relative; height:64px; margin:8px 4px 30px; }
.chain-line{
  position:absolute; top:50%; left:0; right:0; height:2px; transform:translateY(-50%);
  background:linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,.10));
  border-radius:2px; overflow:hidden;
}
.chain-line-fill{ position:absolute; inset:0; width:0%; background:linear-gradient(90deg, var(--blue), var(--teal)); transition:width 1.1s ease; }
.chain-nodes{ position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; }
.chain-node{
  width:14px; height:14px; border-radius:50%; background:var(--ink-soft);
  border:2px solid rgba(255,255,255,.28); position:relative; transition:all .35s ease;
  box-shadow:0 0 0 0 rgba(23,195,163,0);
}
.chain-node.lit{ background:var(--teal); border-color:var(--teal); box-shadow:0 0 0 6px rgba(23,195,163,.16); }
.chain-node em{
  position:absolute; top:20px; left:50%; transform:translateX(-50%); font-style:normal;
  font-family:var(--font-mono); font-size:10.5px; color:#7C8B98; white-space:nowrap;
}
.chain-node.lit em{ color:var(--teal); }
.chain-caption{ font-family:var(--font-mono); font-size:12px; color:#7C8B98; text-align:center; }
.chain-caption b{ color:#DCE6EC; font-weight:500; }

/* ---------------------------------- Marquee trust bar -------------------- */
.trust{ border-top:1px solid var(--gray-line); border-bottom:1px solid var(--gray-line); background:var(--white); padding:18px 0; overflow:hidden; }
.trust-track{ display:flex; gap:56px; width:max-content; animation:scroll-left 28s linear infinite; align-items:center; }
.trust-track span{ font-family:var(--font-mono); font-size:13px; color:var(--gray-soft); white-space:nowrap; letter-spacing:.02em; }
.trust-track span b{ color:var(--text); font-weight:600; }
@keyframes scroll-left{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ---------------------------------- Stat band ---------------------------- */
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--gray-line); border:1px solid var(--gray-line); border-radius:16px; overflow:hidden; }
.stat{ background:var(--white); padding:34px 24px; text-align:center; }
.stat-number{ font-family:var(--font-display); font-size:38px; font-weight:600; color:var(--blue-dark); }
.stat-label{ font-size:13.5px; color:var(--text-mute); margin-top:6px; }
@media (max-width:760px){ .stat-grid{ grid-template-columns:1fr 1fr; } }

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

.card{
  background:var(--white); border:1px solid var(--gray-line); border-radius:14px; padding:28px;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.card:hover{ border-color:var(--blue); transform:translateY(-3px); box-shadow:0 20px 40px -24px rgba(11,31,46,.25); }
.card .tag{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--blue-dark); }
.card h3{ margin-top:8px; }
.card p{ color:var(--text-mute); font-size:14.5px; margin-bottom:0;}
.card-link{ display:inline-flex; align-items:center; gap:6px; margin-top:16px; font-weight:600; font-size:14px; color:var(--blue-dark); }
.card-link .arrow{ transition:transform .15s ease; }
.card:hover .card-link .arrow{ transform:translateX(3px); }

.card.card-featured{ border-color:var(--blue); background:linear-gradient(180deg,var(--blue-pale),var(--white) 60%); }
.card.card-featured .tag{ color:var(--blue-dark); }

/* pill list */
.pill-grid{ display:flex; flex-wrap:wrap; gap:10px; }
.pill{
  display:flex; align-items:center; gap:8px; padding:10px 16px; border-radius:999px;
  background:var(--white); border:1px solid var(--gray-line); font-size:14px;
}
.pill .flag{ font-size:16px; }

/* ---------------------------------- Table -------------------------------- */
.table-wrap{ overflow-x:auto; border:1px solid var(--gray-line); border-radius:14px; background:var(--white); }
table.cmp{ border-collapse:collapse; width:100%; min-width:760px; }
table.cmp th, table.cmp td{ text-align:left; padding:16px 20px; vertical-align:top; font-size:14.5px; border-bottom:1px solid var(--gray-line); }
table.cmp th{ font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-mute); background:var(--paper); }
table.cmp tr:last-child td{ border-bottom:none; }
table.cmp td:first-child, table.cmp th:first-child{ font-weight:600; color:var(--text); white-space:nowrap; }
table.cmp td.recommended{ background:var(--blue-pale); }

/* ---------------------------------- Timeline / process ------------------- */
.rail{ position:relative; padding-left:42px; }
.rail::before{ content:""; position:absolute; left:14px; top:6px; bottom:6px; width:2px; background:var(--gray-line); }
.rail-item{ position:relative; padding-bottom:38px; }
.rail-item:last-child{ padding-bottom:0; }
.rail-dot{
  position:absolute; left:-42px; top:2px; width:30px; height:30px; border-radius:50%;
  background:var(--white); border:2px solid var(--blue); color:var(--blue-dark);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:12px; font-weight:600;
}
.rail-item.done .rail-dot{ background:var(--teal); border-color:var(--teal); color:#fff; }
.rail-body{ background:var(--white); border:1px solid var(--gray-line); border-radius:12px; padding:18px 22px; }
.rail-body h4{ margin-bottom:4px; font-size:17px; }
.pitfall{
  margin-top:12px; padding:11px 14px; border-radius:8px; background:#FFF6E9; border:1px solid #F3D9A2;
  font-size:13.5px; color:#7A5209; display:flex; gap:8px;
}
.pitfall b{ color:#8A5A00; }

/* ---------------------------------- Callout / quote ----------------------- */
.callout{ border-left:3px solid var(--blue); background:var(--blue-pale); padding:18px 22px; border-radius:0 10px 10px 0; font-size:15px; }
.pull-quote{ font-family:var(--font-display); font-size:24px; line-height:1.4; color:var(--white); }
.pull-quote span{ color:var(--teal); }

/* ---------------------------------- Diagram boxes -------------------------- */
.flow{ display:flex; align-items:center; gap:0; flex-wrap:wrap; justify-content:center; }
.flow-node{
  background:var(--white); border:1.5px solid var(--gray-line); border-radius:12px; padding:16px 18px;
  min-width:150px; text-align:center; font-size:13.5px; font-weight:600;
}
.flow-node small{ display:block; font-weight:400; color:var(--text-mute); margin-top:4px; font-size:12px; }
.flow-node.accent{ border-color:var(--blue); background:var(--blue-pale); }
.flow-arrow{ padding:0 10px; color:var(--gray-soft); font-size:18px; }
@media (max-width:760px){ .flow{ flex-direction:column; } .flow-arrow{ transform:rotate(90deg); } }

/* ---------------------------------- Forms -------------------------------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field.full{ grid-column:1/-1; }
.field label{ font-size:13px; font-weight:600; color:var(--text-mute); }
.field input, .field select, .field textarea{
  font-family:var(--font-body); font-size:15px; padding:12px 14px; border-radius:8px;
  border:1.5px solid var(--gray-line); background:var(--white); color:var(--text);
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--blue); outline-offset:1px; border-color:var(--blue); }
@media (max-width:700px){ .form-grid{ grid-template-columns:1fr; } }

/* ---------------------------------- Footer -------------------------------- */
.site-footer{ background:var(--ink); color:#B7C4CE; padding:64px 0 28px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:32px; }
.footer-grid h4{ color:#fff; font-size:13px; letter-spacing:.04em; text-transform:uppercase; font-family:var(--font-mono); margin-bottom:14px; }
.footer-grid a{ display:block; padding:5px 0; font-size:14px; color:#9FB0BC; }
.footer-grid a:hover{ color:var(--teal); }
.footer-bottom{ margin-top:48px; padding-top:24px; border-top:1px solid rgba(255,255,255,.1); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:13px; color:#7C8B98; }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }

/* ---------------------------------- Reveal on scroll ----------------------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-stagger > *{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal-stagger.in > *{ opacity:1; transform:translateY(0); }
.reveal-stagger.in > *:nth-child(1){ transition-delay:.02s; }
.reveal-stagger.in > *:nth-child(2){ transition-delay:.08s; }
.reveal-stagger.in > *:nth-child(3){ transition-delay:.14s; }
.reveal-stagger.in > *:nth-child(4){ transition-delay:.2s; }
.reveal-stagger.in > *:nth-child(5){ transition-delay:.26s; }
.reveal-stagger.in > *:nth-child(6){ transition-delay:.32s; }
.reveal-stagger.in > *:nth-child(7){ transition-delay:.38s; }

@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-stagger > *{ opacity:1 !important; transform:none !important; transition:none !important; }
  .trust-track{ animation:none; }
  .chain-line-fill{ transition:none; }
}

/* ---------------------------------- Page header (inner pages) -------------- */
.page-hero{ padding:64px 0 48px; border-bottom:1px solid var(--gray-line); }
.breadcrumb{ font-family:var(--font-mono); font-size:12.5px; color:var(--gray-soft); margin-bottom:18px; }
.breadcrumb a:hover{ color:var(--blue-dark); }

.two-col{ display:grid; grid-template-columns:2fr 1fr; gap:48px; }
/* Grid items stretch to the row height by default, which made the sticky
   side-card as tall as the whole article and stopped it sticking. */
.two-col > .side-card{ align-self:start; }
@media (max-width:900px){ .two-col{ grid-template-columns:1fr; } }
.side-card{ background:var(--white); border:1px solid var(--gray-line); border-radius:14px; padding:22px; position:sticky; top:96px; }
.side-card h4{ font-size:14px; }
.side-card ul li{ padding:6px 0; font-size:14px; border-bottom:1px dashed var(--gray-line); }
.side-card ul li:last-child{ border-bottom:none; }

.divider-chain{ display:flex; align-items:center; gap:8px; justify-content:center; padding:8px 0; opacity:.5; }
.divider-chain i{ width:6px; height:6px; border-radius:50%; background:var(--blue); }

/* ==========================================================================
   Glassmorphism layer — premium SaaS surface treatment
   Layered on top of the design system above without removing it: solid
   surfaces (.card, .side-card, .rail-body, .stat, .dropdown, .pill,
   .table-wrap, form fields, the header) become translucent, blurred glass
   panes over soft multi-tone gradient backgrounds. New utility classes
   (.glass, .glass-panel, .shine, .glow-ring, .gradient-mesh-*, .badge-chip,
   counters) are additive for new sections/pages.
   ========================================================================== */
:root{
  --glass-bg: rgba(255,255,255,.62);
  --glass-bg-strong: rgba(255,255,255,.78);
  --glass-border: rgba(255,255,255,.55);
  --glass-shadow: 0 20px 50px -20px rgba(11,31,46,.28), 0 2px 8px -2px rgba(11,31,46,.08);
  --glass-ink-bg: rgba(20,43,61,.55);
  --glass-ink-border: rgba(255,255,255,.14);
  --radius-lg: 22px;
  --violet: #7B7FE8;
  --pink: #E8A0C4;
  --mint: #9BE8D8;
}

/* Soft mesh gradient backdrop — sits behind every page so glass panels have
   something to refract. Fixed so it doesn't repeat/scroll oddly. */
body{
  background-color: var(--paper);
  background-image:
    radial-gradient(880px 520px at 8% -6%, rgba(0,152,218,.10), transparent 60%),
    radial-gradient(760px 520px at 96% 8%, rgba(23,195,163,.10), transparent 60%),
    radial-gradient(700px 480px at 50% 45%, rgba(123,127,232,.06), transparent 65%),
    radial-gradient(900px 600px at 90% 92%, rgba(232,160,196,.08), transparent 60%);
  background-attachment: fixed, fixed, fixed, fixed;
  background-repeat: no-repeat;
}

/* Alternate section washes — "different modern light colour combinations
   across sections", applied by adding one of these classes to <section>. */
.section-wash-blue{ background:linear-gradient(180deg, rgba(0,152,218,.07), rgba(255,255,255,0) 70%); }
.section-wash-teal{ background:linear-gradient(180deg, rgba(23,195,163,.08), rgba(255,255,255,0) 70%); }
.section-wash-violet{ background:linear-gradient(180deg, rgba(123,127,232,.07), rgba(255,255,255,0) 70%); }
.section-wash-amber{ background:linear-gradient(180deg, rgba(242,169,59,.08), rgba(255,255,255,0) 70%); }
.section-wash-pink{ background:linear-gradient(180deg, rgba(232,160,196,.08), rgba(255,255,255,0) 70%); }

/* ---- Header: frosted glass ---- */
.site-header{
  background: rgba(246,248,250,.66);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid rgba(255,255,255,.5);
  box-shadow: 0 8px 30px -20px rgba(11,31,46,.25);
}
.brand img{ filter: drop-shadow(0 2px 6px rgba(11,31,46,.12)); }

/* ---- Generic glass surface utilities ---- */
.glass{
  background: var(--glass-bg);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
}
.glass-panel{ padding:32px; }
.glass-strong{ background: var(--glass-bg-strong); }
.section-ink .glass, .glass-ink{
  background: var(--glass-ink-bg);
  border-color: var(--glass-ink-border);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

/* ---- Existing surfaces upgraded to glass ---- */
.dropdown{
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 16px;
  box-shadow: 0 24px 48px -18px rgba(11,31,46,.28);
}
.card{
  background: var(--glass-bg);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  box-shadow: 0 16px 36px -22px rgba(11,31,46,.22);
}
.card:hover{ box-shadow: 0 26px 54px -22px rgba(0,152,218,.32); border-color: rgba(0,152,218,.45); }
.card.card-featured{ background:linear-gradient(180deg, rgba(228,244,252,.85), rgba(255,255,255,.55) 60%); }

.side-card{
  background: var(--glass-bg);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
}
.rail-body{
  background: var(--glass-bg);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
}
.rail-dot{ box-shadow: 0 6px 16px -6px rgba(0,152,218,.5); }
.stat{
  background: var(--glass-bg);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}
.stat-grid{ background: rgba(255,255,255,.35); border-color: rgba(255,255,255,.5); box-shadow: var(--glass-shadow); }
.pill{
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255,255,255,.6);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pill:hover{ transform:translateY(-2px); box-shadow:0 12px 24px -14px rgba(11,31,46,.3); border-color:rgba(0,152,218,.4); }
.table-wrap{
  background: var(--glass-bg);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
}
table.cmp th{ background: rgba(255,255,255,.3); }
.field input, .field select, .field textarea{
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(8px);
  border-color: rgba(255,255,255,.7);
}
.chain-wrap{ box-shadow: 0 30px 70px -24px rgba(11,31,46,.5), inset 0 0 0 1px rgba(255,255,255,.06); }
.flow-node{
  background: var(--glass-bg);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1.5px solid var(--glass-border);
  transition: transform .18s ease, box-shadow .18s ease;
}
.flow-node.accent{ background:linear-gradient(160deg, rgba(228,244,252,.85), rgba(255,255,255,.5)); border-color:rgba(0,152,218,.5); }
.flow-node:hover{ transform:translateY(-3px); box-shadow:0 14px 28px -16px rgba(11,31,46,.28); }

/* ---- Buttons: glass ghost + glow on primary ---- */
.btn-ghost{
  background: rgba(255,255,255,.5);
  backdrop-filter: blur(8px);
  border-color: rgba(255,255,255,.7);
}
.btn-primary{ box-shadow:0 10px 26px -10px rgba(0,152,218,.55), 0 0 0 0 rgba(0,152,218,.4); }
.btn-primary:hover{ box-shadow:0 14px 32px -10px rgba(0,152,218,.65); }

/* ---- Rounded corners bump for a softer, premium feel ---- */
.card, .side-card, .rail-body, .table-wrap, .glass{ border-radius: var(--radius-lg); }
.pill, .flow-node{ border-radius: 14px; }

/* ---- Icon tiles used on new glass pages ---- */
.icon-tile{
  width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg, rgba(0,152,218,.16), rgba(23,195,163,.14));
  border:1px solid rgba(255,255,255,.6); margin-bottom:14px; font-size:22px;
}

/* ---- Badge chip (used in rotating feature banner, tags) ---- */
.badge-chip{
  display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px;
  background: rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28); color:#fff;
  font-size:13.5px; font-weight:600; backdrop-filter: blur(10px);
  white-space:nowrap;
}
.badge-chip .dot{ width:6px; height:6px; border-radius:50%; background:var(--teal); box-shadow:0 0 8px var(--teal); }

/* ==========================================================================
   Shine / glow-edge sweep — subtle animated highlight travelling along the
   top edge of a card/button/section. Opt-in via class="shine". Uses a thin
   pseudo-element so it never obscures content; disabled under
   prefers-reduced-motion.
   ========================================================================== */
.shine{ position:relative; overflow:hidden; }
.shine::before{
  content:"";
  position:absolute; top:0; left:-40%; width:40%; height:2px;
  background:linear-gradient(90deg, transparent, rgba(0,152,218,.9), rgba(23,195,163,.9), transparent);
  filter: drop-shadow(0 0 6px rgba(0,152,218,.7));
  animation: shine-sweep 4.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes shine-sweep{
  0%{ left:-40%; }
  55%{ left:100%; }
  100%{ left:100%; }
}
/* full-border variant: sweep travels the whole rectangle outline */
.shine-border{ position:relative; }
.shine-border::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px;
  background: conic-gradient(from var(--shine-angle,0deg), transparent 0 82%, rgba(0,152,218,.95) 90%, rgba(23,195,163,.95) 94%, transparent 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: shine-rotate 5s linear infinite;
  pointer-events:none;
}
@keyframes shine-rotate{ to{ --shine-angle:360deg; } }
@property --shine-angle{ syntax:'<angle>'; inherits:false; initial-value:0deg; }

/* ---- Glow ring — soft pulsing halo behind a hero visual/icon ---- */
.glow-ring{ position:relative; }
.glow-ring::before{
  content:""; position:absolute; inset:-18px; z-index:-1; border-radius:inherit;
  background:radial-gradient(closest-side, rgba(0,152,218,.28), transparent 70%);
  filter:blur(18px); animation: glow-pulse 3.6s ease-in-out infinite;
}
@keyframes glow-pulse{ 0%,100%{ opacity:.55; transform:scale(1); } 50%{ opacity:.9; transform:scale(1.06); } }

/* ---- Media frame: glass container for screenshots / diagrams ---- */
.media-frame{
  padding:14px; border-radius: var(--radius-lg);
  background: var(--glass-bg);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.media-frame:hover{ transform:translateY(-4px); box-shadow:0 30px 60px -24px rgba(11,31,46,.35); }
.media-frame img{ border-radius:14px; display:block; width:100%; }
.media-frame figcaption{ margin:12px 4px 2px; font-size:13px; color:var(--text-mute); }

@media (prefers-reduced-motion: reduce){
  .shine::before, .shine-border::after, .glow-ring::before{ animation:none !important; }
}

/* ==========================================================================
   Rotating feature banner — modern SaaS-style single-phrase crossfade,
   deliberately NOT a scrolling marquee. Used on the landing-page UAE FTA
   banner. Markup: [data-rotator] > .rotator-window > .rotator-item*
   ========================================================================== */
.rotator{ width:100%; }
.rotator-eyebrow{
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal); margin-bottom:10px; display:flex; align-items:center; gap:8px;
}
.rotator-eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--teal); box-shadow:0 0 8px var(--teal); }
.rotator-window{ position:relative; min-height:104px; }
@media (max-width:640px){ .rotator-window{ min-height:132px; } }
.rotator-item{
  position:absolute; top:0; left:0; right:0;
  display:flex; align-items:center;
  font-family:var(--font-display); font-weight:600; font-size:clamp(22px,2.7vw,32px); line-height:1.2;
  background:linear-gradient(90deg,#fff,#BFE9FF 60%,#9BE8D8);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  opacity:0; transform:translateY(16px) scale(.98);
  transition:opacity .55s cubic-bezier(.2,.7,.3,1), transform .55s cubic-bezier(.2,.7,.3,1);
  pointer-events:none;
}
.rotator-item.active{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.rotator-item.leaving{ opacity:0; transform:translateY(-14px) scale(.98); }
@media (prefers-reduced-motion: reduce){
  .rotator-item{ transition:none; }
}

/* ==========================================================================
   Glass hero — index.html only.
   Dark, dimensional banner: iridescent liquid-chrome form behind a floating
   glass invoice card. The iridescence sweeps hue around the brand blue at
   fixed lightness/chroma (cyan 200deg -> blue 233deg -> blue-violet 268deg),
   so it shimmers without introducing a colour outside the palette.
   ========================================================================== */

.hero-glass{
  position:relative; overflow:hidden;
  background:#050A11;
  padding:76px 0 60px;
}
.hero-glass::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 72% 42%, #10243A 0%, #081422 38%, #050A11 72%);
}
.hero-glass::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 220px 60px rgba(0,0,0,.7);
}
.hero-glass > .container{ position:relative; z-index:1; }

.hero-glass .eyebrow{ color:var(--teal); }
.hero-glass h1{ color:var(--white); font-size:clamp(34px,3.6vw,50px); }
.hero-glass .lede{ color:#94A9BC; max-width:560px; }
.hero-glass .lede b{ color:var(--white); font-weight:600; }
.hero-glass .btn-primary{ box-shadow:0 6px 24px -6px rgba(0,152,218,.75); }
.hero-glass-grid{ display:grid; grid-template-columns:1.02fr .98fr; gap:48px; align-items:center; }

.hero-proof{ display:flex; align-items:center; gap:18px; margin-top:28px; flex-wrap:wrap; }
.hero-proof span{ font-family:var(--font-mono); font-size:12px; color:#6E8397; }
.hero-proof span b{ color:#C6D8E6; font-weight:600; }
.hero-proof i{ width:1px; height:12px; background:rgba(255,255,255,.16); display:block; }

/* --- the liquid-chrome object --- */
.scene{ position:relative; width:100%; height:540px; }
.scene .glow{
  position:absolute; left:50%; top:50%; width:760px; height:760px; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(70,175,239,.20), rgba(70,175,239,.06) 42%, rgba(5,10,17,0) 68%);
  pointer-events:none; animation:glowpulse 14s ease-in-out infinite alternate;
}
@keyframes glowpulse{ 0%{ opacity:.75; } 100%{ opacity:1; } }

.scene .blob{
  position:absolute; left:50%; top:44%; width:580px; height:580px;
  transform:translate(-50%,-50%);
  animation:blobdrift 22s ease-in-out infinite alternate;
}
@keyframes blobdrift{
  0%  { transform:translate(-50%,-50%) rotate(-6deg) scale(1); }
  100%{ transform:translate(-50%,-53%) rotate(7deg) scale(1.05); }
}

/* --- the glass invoice card (distinct from .card) --- */
.hero-card{
  position:absolute; left:50%; top:50%; width:364px; height:230px;
  margin-left:-206px; margin-top:-56px;
  border-radius:18px; padding:22px 24px;
  display:flex; flex-direction:column; justify-content:space-between;
  background:linear-gradient(145deg, rgba(18,32,48,.62), rgba(8,16,26,.78));
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.18);
  animation:cardfloat 11s ease-in-out infinite alternate;
}
@keyframes cardfloat{
  0%  { transform:rotate(-6.5deg) translateY(0); }
  100%{ transform:rotate(-4.5deg) translateY(-14px); }
}
.hero-card::after{
  content:""; position:absolute; inset:0; border-radius:18px; pointer-events:none;
  background:linear-gradient(120deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 38%);
}
.hero-card > *{ position:relative; z-index:1; }

/* Business-card face: identity block on top, contact rows beneath. Sized so
   all three rows clear the 364x230 card at its 22/24 padding. */
.hero-card{ justify-content:space-between; }
.hero-card-top{ display:flex; align-items:center; gap:12px; }
.hero-card-mark{ width:34px; height:34px; flex-shrink:0; object-fit:contain; }
.hero-card-name{
  font-family:var(--font-display); font-size:16px; font-weight:600;
  letter-spacing:.01em; color:#F2F8FC; line-height:1.2;
}
.hero-card-role{
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.11em;
  text-transform:uppercase; color:#8AA0B4; margin-top:5px; line-height:1.4;
}
.hero-card-contact{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:9px;
}
.hero-card-contact li{
  display:flex; align-items:center; gap:9px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.02em;
  color:#C6D8E6; line-height:1.35; min-width:0;
}
.hero-card-contact svg{ width:14px; height:14px; flex-shrink:0; color:#5FBEF5; }
.hero-card-contact a{ color:inherit; text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hero-card-contact a:hover{ color:var(--white); text-decoration:underline; }

/* --- dark trust bar + the seam back to the light page --- */
.trust-dark{ background:#050A11; border-top:1px solid rgba(255,255,255,.07); border-bottom:none; }
.trust-dark .trust-track span{ color:#8DA2B5; }
.trust-dark .trust-track span b{ color:#DDE9F2; }
.hero-seam{ height:104px; background:linear-gradient(180deg, #050A11 0%, #0B1A28 30%, var(--blue-pale) 100%); }

/* --- sticky header while it sits over the dark hero --- */
/* Overlay mode (homepage): the header is pulled out of the flow so the hero
   starts at y=0 and runs behind it; the hero pads its content clear of the bar. */
.site-header.is-overlay{ margin-bottom:-77px; }
.site-header.is-overlay + .hero-glass{ padding-top:120px; }

/* Over the hero the bar disappears entirely and the hero shows through;
   main.js drops .is-dark once you scroll past, restoring the solid light bar. */
.site-header.is-dark{ background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom-color:transparent; }
.site-header.is-dark .brand img{ filter:brightness(0) invert(1); }
.site-header.is-dark .nav-links > li > a,
.site-header.is-dark .nav-links > li > button.nav-top{ color:#C3D3E0; }
.site-header.is-dark .nav-links > li > a:hover,
.site-header.is-dark .nav-links > li > button.nav-top:hover{ color:var(--white); }
.site-header.is-dark .btn-ghost{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.28); color:var(--white); }
.site-header.is-dark .btn-ghost:hover{ border-color:var(--teal); color:var(--teal); }
.site-header.is-dark .nav-toggle svg path{ stroke:#DCE6EC; }

@media (max-width:980px){
  .hero-glass-grid{ grid-template-columns:1fr; gap:48px; }
  .scene{ height:360px; }
  .scene .blob{ width:330px; height:330px; }
  .scene .glow{ width:520px; height:520px; }
  .hero-card{ width:296px; height:187px; margin-left:-154px; margin-top:-78px; border-radius:16px; padding:18px 20px; }
  .hero-card-mark{ width:28px; height:28px; }
  .hero-card-name{ font-size:14px; }
  .hero-card-role{ font-size:8.5px; letter-spacing:.09em; }
  .hero-card-contact{ gap:7px; }
  .hero-card-contact li{ font-size:10px; gap:7px; }
  .hero-card-contact svg{ width:12px; height:12px; }
  .hero-card::after{ border-radius:16px; }
  .hero-glass .btn-row .btn{ flex:1 1 100%; justify-content:center; }
}

@media (prefers-reduced-motion: reduce){
  .scene .blob, .scene .glow, .hero-card{ animation:none; }
  .hero-card{ transform:rotate(-5.5deg); }
}

@media (max-width:640px){
  .hero-proof{ gap:8px 16px; }
  .hero-proof i{ display:none; }
}

/* ==========================================================================
   ERP strip — the scrolling row of supported systems under the hero.
   Sits on a light --blue-pale band ON PURPOSE: vendor logos are drawn for
   white backgrounds, so a light strip reads far better than fighting them
   with pixel correction. The hero-seam above fades the dark hero into this
   band, so the order in the markup is hero -> seam -> strip.
   Logos live in assets/img/erp/web/ (backgrounds flood-filled out, trimmed,
   120px tall); the untouched originals stay in assets/img/erp/.
   Keep BOTH copies of each item in the track identical; the marquee loops by
   translating -50%, so the two halves must match exactly.
   ========================================================================== */
.erp-strip{
  position:relative;
  background:var(--blue-pale);
  border-top:none;
  border-bottom:1px solid #CBE4F3;
}
.erp-strip::before,
.erp-strip::after{
  content:""; position:absolute; top:0; bottom:0; width:90px; z-index:2; pointer-events:none;
}
.erp-strip::before{ left:0;  background:linear-gradient(90deg,  var(--blue-pale), rgba(228,244,252,0)); }
.erp-strip::after{  right:0; background:linear-gradient(270deg, var(--blue-pale), rgba(228,244,252,0)); }
/* Spacing lives on the items, not as container gap: the track holds 24 items
   and 24 margins, so translating -50% lands exactly on item 13 and the loop is
   seamless. With container gap there are only 23 gaps and the seam jumps. */
.erp-track{ gap:0; animation-duration:44s; }
.erp-mark{
  font-family:var(--font-display); font-weight:600; font-size:17px; letter-spacing:.005em;
  color:var(--text); white-space:nowrap; text-decoration:none;
  display:inline-flex; align-items:center; height:40px; margin-right:60px;
  transition:color .18s ease;
}
.erp-mark:hover{ color:var(--blue-dark); }
/* No CSS filter: the logos are real brand colour on a light band, which is
   the whole point. max-width stops wide wordmarks dwarfing square icons. */
.erp-logo{
  height:32px; width:auto; max-width:130px; object-fit:contain;
  opacity:1; transition:transform .18s ease;
}
.erp-mark:hover .erp-logo{ transform:translateY(-2px); }
.erp-strip:hover .erp-track{ animation-play-state:paused; }

@media (max-width:640px){
  .erp-track{ gap:0; animation-duration:34s; }
  .erp-mark{ margin-right:40px; font-size:15.5px; }
  .erp-logo{ height:26px; max-width:104px; }
}
@media (prefers-reduced-motion: reduce){
  .erp-track{ animation:none; }
}

/* ==========================================================================
   Hero product carousel — five slides in the hero copy column.
   Slides are stacked in ONE grid cell (grid-area:1/1) rather than absolutely
   positioned, so the column sizes itself to the tallest slide and nothing
   below it shifts when the slide changes.
   ========================================================================== */
.hero-copy{ display:grid; }
.hslide{
  grid-area:1/1;
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .38s ease, transform .38s ease, visibility .38s;
}
.hslide.is-active{ opacity:1; visibility:visible; transform:none; }
.hslide{ display:flex; flex-direction:column; }
.hslide .btn-row{ margin-top:auto; padding-top:4px; }

.hero-copy h1{
  font-size:clamp(30px,3.1vw,44px); line-height:1.12; color:var(--white);
  margin:0 0 18px; text-wrap:pretty;
}
.hero-copy .hl{
  background:linear-gradient(135deg, var(--teal), var(--blue));
  color:#fff; padding:1px 12px; border-radius:10px;
  display:inline-block; box-decoration-break:clone; -webkit-box-decoration-break:clone;
}
.hero-copy .lede{ font-size:17.5px; color:#94A9BC; max-width:560px; margin:0 0 22px; }
.hero-copy .lede b{ color:var(--white); font-weight:600; }

.hslide-points{ list-style:none; margin:0 0 26px; padding:0; display:flex; flex-direction:column; gap:11px; }
.hslide-points li{
  position:relative; padding-left:30px;
  font-size:15.5px; line-height:1.55; color:#A8BCCE; text-wrap:pretty;
}
.hslide-points li::before{
  content:""; position:absolute; left:0; top:4px; width:16px; height:16px;
  border-radius:50%; border:1.5px solid rgba(0,152,218,.85);
}
.hslide-points li::after{
  content:""; position:absolute; left:5.5px; top:9.5px; width:5px; height:5px;
  border-radius:50%; background:#46AFEF;
}

/* --- product switcher --- */
.hero-switch{
  display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
  margin-top:22px; padding-top:20px; border-top:1px solid rgba(255,255,255,.08);
}
.hero-tabs{ display:flex; gap:6px; flex-wrap:wrap; }
.hero-tab{
  position:relative; appearance:none; cursor:pointer;
  background:transparent; border:none; padding:9px 2px 13px;
  margin-right:22px;
  font-family:var(--font-body); font-size:14.5px; font-weight:500;
  color:#7A8FA3; white-space:nowrap;
  transition:color .18s ease;
}
.hero-tab:last-child{ margin-right:0; }
.hero-tab:hover{ color:#C6D8E6; }
.hero-tab.is-active{ color:var(--white); font-weight:600; }
.hero-tab:focus-visible{ outline:2px solid var(--blue); outline-offset:4px; border-radius:4px; }
.hero-tab-bar{
  position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:2px;
  background:rgba(255,255,255,.10); overflow:hidden; display:block;
}
.hero-tab-bar::after{
  content:""; position:absolute; inset:0; transform-origin:left center; transform:scaleX(0);
  background:linear-gradient(90deg, var(--blue), var(--teal));
}
.hero-tab.is-active .hero-tab-bar::after{ transform:scaleX(1); transition:transform .3s ease; }
/* while autoplay is running the active bar fills over the dwell time */
.hero-tabs.is-playing .hero-tab.is-active .hero-tab-bar::after{
  animation:tabfill var(--hero-dwell, 5s) linear forwards;
}
@keyframes tabfill{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

@media (max-width:980px){
  .hero-switch{ margin-top:36px; }
  .hero-tabs{ gap:0 4px; }
  .hero-tab{ margin-right:16px; font-size:13.5px; }
}
@media (max-width:640px){
  .hero-copy .lede{ font-size:16.5px; }
  .hslide-points li{ font-size:15px; }
  .hero-switch{ gap:20px; }
}
@media (prefers-reduced-motion: reduce){
  .hslide{ transition:none; }
  .hero-tabs.is-playing .hero-tab.is-active .hero-tab-bar::after{ animation:none; transform:scaleX(1); }
}

/* Footer contact block — sits under the office list in the first column.
   Uses the footer's own link treatment so it reads as part of the column. */
.footer-contact{ margin-top:14px; }
.footer-contact a{
  display:block; padding:4px 0; font-size:14px; color:#C6D8E6;
  font-family:var(--font-mono); letter-spacing:.01em;
}
.footer-contact a:hover{ color:var(--teal); }

/* ==========================================================================
   Footer contact + country flags.
   Flags are one inline <symbol> sprite per page referenced by <use>, so the
   eight designs are defined once no matter how many times they appear, and
   there is no extra request. Deliberately NOT emoji flags: Windows has no
   regional-indicator glyphs and renders those as bare letter pairs (AE, QA).
   ========================================================================== */
.flag-sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.flag-ico{
  width:18px; height:12px; flex-shrink:0; border-radius:2px; display:block;
  box-shadow:0 0 0 1px rgba(255,255,255,.18);
}
.footer-offices{ list-style:none; margin:14px 0 0; padding:0; }
.footer-offices li{
  display:flex; align-items:center; gap:9px;
  color:#7C8B98; font-size:13px; padding:3.5px 0;
}
.footer-grid a.has-flag{ display:flex; align-items:center; gap:9px; }
.footer-contact a{ display:flex; align-items:center; gap:9px; }
.footer-contact a svg{ width:15px; height:15px; flex-shrink:0; color:var(--teal); }

/* Regulatory-coverage pills: SVG flags from the footer sprite (emoji flags
   render as bare letter pairs on Windows). Dark hairline, since the pill is light. */
.pill .flag-ico{ width:21px; height:14px; box-shadow:0 0 0 1px rgba(11,31,46,.14); }

/* E-Invoice dropdown: country rows with a flag from the footer sprite */
.dropdown a.dd-flag{ display:flex; align-items:flex-start; gap:10px; }
.dropdown a.dd-flag .flag-ico{ width:21px; height:14px; margin-top:4px; box-shadow:0 0 0 1px rgba(11,31,46,.14); }

/* ==========================================================================
   Case studies — mega dropdown, hub page, article pages.
   ========================================================================== */
/* Mega dropdown: three grouped columns. Case Studies is the last nav item,
   so it opens right-aligned to stay inside the viewport. */
.dropdown-mega{
  left:auto; right:-40px; min-width:760px;
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:4px 14px; padding:14px;
}
.dropdown-mega .dd-col{ display:flex; flex-direction:column; min-width:0; }
.dropdown-mega .dd-head{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--blue-dark); padding:8px 12px 6px;
}
.dropdown-mega .dd-head-gap{ margin-top:10px; border-top:1px solid var(--gray-line); padding-top:14px; }
.dropdown-mega a{ padding:7px 12px; font-size:14px; line-height:1.35; }
.dropdown-mega .dropdown-foot{ grid-column:1 / -1; }
@media (max-width:980px){
  .dropdown-mega{ min-width:0; grid-template-columns:1fr; right:auto; }
}

/* Hub page */
.cs-group-title{ font-size:24px; display:flex; align-items:center; gap:12px; margin-bottom:24px; }
.cs-group-title span{
  font-family:var(--font-mono); font-size:12px; font-weight:500; color:var(--blue-dark);
  background:var(--blue-pale); border-radius:999px; padding:3px 10px;
}
.cs-card{ display:flex; flex-direction:column; color:inherit; }
.cs-card h3{ font-size:18px; line-height:1.3; }
.cs-card .card-link{ margin-top:auto; padding-top:16px; }

/* Article pages */
.cs-article .container{ display:flex; flex-direction:column; gap:40px; }
.cs-block{ max-width:760px; }
.cs-block.cs-wide{ max-width:none; }
.cs-block h2{ font-size:26px; margin-bottom:14px; }
.cs-block p{ font-size:17px; line-height:1.75; color:var(--text-mute); max-width:760px; text-wrap:pretty; }
.cs-figure{ margin:18px 0 0; }
.cs-figure a{ display:block; }
.cs-figure img{
  width:100%; height:auto; border-radius:14px; background:var(--white);
  border:1px solid var(--gray-line); box-shadow:0 20px 40px -28px rgba(11,31,46,.3);
}
.cs-figure figcaption{ font-size:13px; color:var(--gray-soft); margin-top:10px; }
.cs-outcome{
  max-width:none; background:var(--blue-pale); border:1px solid #CBE4F3;
  border-radius:18px; padding:30px 34px;
}
.cs-outcome h2{ color:var(--blue-dark); }
.cs-outcome p{ color:var(--text); }

.cs-pager{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px;
  border-top:1px solid var(--gray-line); padding-top:28px;
}
.cs-pager-link{ display:flex; flex-direction:column; gap:4px; font-weight:600; color:var(--text); font-size:15px; }
.cs-pager-link span{ font-family:var(--font-mono); font-size:12px; font-weight:500; color:var(--blue-dark); }
.cs-pager-link:hover{ color:var(--blue-dark); }
.cs-next{ text-align:right; align-items:flex-end; }
.cs-pager-all{ font-size:14px; font-weight:600; color:var(--blue-dark); white-space:nowrap; }
.cs-cta{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  background:var(--ink); color:#DCE6EC; border-radius:18px; padding:30px 34px;
}
.cs-cta h3{ color:var(--white); margin-bottom:6px; }
.cs-cta p{ margin:0; color:#B7C4CE; }
@media (max-width:640px){
  .cs-pager{ grid-template-columns:1fr 1fr; }
  .cs-pager-all{ grid-column:1 / -1; grid-row:2; text-align:center; }
  .cs-outcome, .cs-cta{ padding:22px; }
}

/* Dropdowns: near-opaque so dense menus stay readable over page headings
   (the .72 glass let large type show through, badly so in the 20-link mega menu). */
.dropdown{ background:rgba(255,255,255,.97); }

/* ==========================================================================
   Hero per-slide visuals (replaced the business card).
   All slots are stacked over the liquid-chrome backdrop; the one matching the
   active slide fades in. An empty slot just leaves the backdrop showing.
   To give a slide an image, put <img> inside its <figure data-slide="N">.
   ========================================================================== */
.hero-visuals{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.hero-visual{
  position:absolute; inset:0; margin:0;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(14px) scale(.98);
  transition:opacity .45s ease, transform .45s ease;
}
.hero-visual.is-active{ opacity:1; transform:none; }
.hero-visual > img{
  max-width:88%; max-height:100%; width:auto; height:auto; object-fit:contain;
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.55));
}

/* Drawn device frame for plain app screenshots */
.phone-frame{
  width:250px; aspect-ratio:463 / 829; box-sizing:content-box;
  padding:11px; border-radius:38px;
  background:linear-gradient(145deg, #2A3642, #0E151C);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.14), 0 40px 70px -24px rgba(0,0,0,.85), inset 0 0 0 2px rgba(0,0,0,.6);
  animation:phonefloat 11s ease-in-out infinite alternate;
}
.phone-frame img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:28px; }
@keyframes phonefloat{
  0%  { transform:rotate(-4deg) translateY(0); }
  100%{ transform:rotate(-2deg) translateY(-12px); }
}

@media (max-width:980px){
  .phone-frame{ width:170px; padding:8px; border-radius:28px; }
  .phone-frame img{ border-radius:21px; }
}
@media (prefers-reduced-motion: reduce){
  .hero-visual{ transition:none; }
  .phone-frame{ animation:none; transform:rotate(-3deg); }
}

/* Backdrop steps aside when the active slide shows its own product image */
.scene .blob, .scene .glow{ transition:opacity .45s ease; }
.scene.has-visual .blob, .scene.has-visual .glow{ opacity:0; }

/* Drawn browser window for desktop app screenshots */
.browser-frame{
  width:94%; max-width:560px; border-radius:12px; overflow:hidden; background:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 44px 80px -30px rgba(0,0,0,.9);
  transform:perspective(1400px) rotateY(-9deg) rotateX(3deg);
  animation:browserfloat 12s ease-in-out infinite alternate;
}
.browser-bar{ display:flex; gap:6px; align-items:center; height:26px; padding:0 12px; background:#E7ECF1; border-bottom:1px solid #D5DDE5; }
.browser-bar i{ width:9px; height:9px; border-radius:50%; background:#C5CFD9; display:block; }
.browser-bar i:nth-child(1){ background:#F2665E; } .browser-bar i:nth-child(2){ background:#F6BE4F; } .browser-bar i:nth-child(3){ background:#5BC467; }
.browser-frame img{ display:block; width:100%; height:auto; }
@keyframes browserfloat{
  0%  { transform:perspective(1400px) rotateY(-9deg) rotateX(3deg) translateY(0); }
  100%{ transform:perspective(1400px) rotateY(-6deg) rotateX(2deg) translateY(-12px); }
}
@media (max-width:980px){ .browser-frame{ width:100%; } .browser-bar{ height:20px; } .browser-bar i{ width:7px; height:7px; } }
@media (prefers-reduced-motion: reduce){ .browser-frame{ animation:none; } }

/* Desktop screenshots read too small at column width: let the window grow and
   bleed toward the right edge (the hero clips overflow, so it reads as intentional). */
@media (min-width:981px){
  .hero-visual:has(.browser-frame){ justify-content:flex-start; }
  .browser-frame{ width:128%; max-width:720px; flex-shrink:0; margin-left:2%; }
}

/* ==========================================================================
   Clearance pipeline infographic (homepage, dark section).
   Pure SVG + CSS — no animation library, so it costs nothing to load.
   Stops light up in sequence once the section scrolls into view (.lit added
   by main.js); packets ride the rail continuously.
   ========================================================================== */
.pipe-wrap{ overflow-x:auto; overflow-y:hidden; margin-bottom:28px; -webkit-overflow-scrolling:touch; }
.pipe{ display:block; width:100%; min-width:900px; height:auto; }

.pipe-src rect{ fill:rgba(255,255,255,.05); stroke:rgba(255,255,255,.16); stroke-width:1; }
.pipe-src text{ fill:#B7C4CE; font-family:var(--font-body); font-size:14px; text-anchor:middle; }
.pipe-feed{ stroke:rgba(255,255,255,.22); stroke-width:1.5; fill:none; stroke-dasharray:4 5; }
.pipe-hub{ stroke:rgba(255,255,255,.12); stroke-width:1; }
.pipe-hub-label{
  fill:#7C8B98; font-family:var(--font-mono); font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; text-anchor:middle;
}

.pipe-rail-bed{ stroke:rgba(255,255,255,.12); stroke-width:3; stroke-linecap:round; }
.pipe-rail{
  stroke:url(#pipeRail); stroke-width:3; stroke-linecap:round;
  stroke-dasharray:14 12; animation:pipeflow 1.4s linear infinite;
}
@keyframes pipeflow{ to{ stroke-dashoffset:-26; } }

.pipe-packets .pk{ fill:#7FE9D5; opacity:0; }
.pipe-packets .pk{ animation:pkride 4.2s linear infinite; }
.pk1{ animation-delay:0s; } .pk2{ animation-delay:1.4s; } .pk3{ animation-delay:2.8s; }
@keyframes pkride{
  0%   { transform:translateX(252px); opacity:0; }
  8%   { opacity:1; }
  88%  { opacity:1; }
  100% { transform:translateX(906px); opacity:0; }
}

.pipe-stop .ring{ fill:#0B1F2E; stroke:rgba(255,255,255,.3); stroke-width:2; transition:stroke .45s ease; }
.pipe-stop .dot{ fill:rgba(255,255,255,.35); transition:fill .45s ease, filter .45s ease; }
.pipe-stop .num{
  fill:#DCE6EC; font-family:var(--font-display); font-weight:600; font-size:19px; text-anchor:middle;
  transition:fill .45s ease;
}
.pipe-stop .cap{ fill:#7C8B98; font-family:var(--font-body); font-size:12.5px; text-anchor:middle; }
.pipe-stop.lit .ring{ stroke:var(--teal); }
.pipe-stop.lit .dot{ fill:var(--teal); filter:drop-shadow(0 0 6px rgba(23,195,163,.9)); }
.pipe-stop.lit .num{ fill:#fff; }

.pipe-cleared rect{ fill:rgba(255,255,255,.04); stroke:rgba(255,255,255,.16); stroke-width:1; transition:stroke .45s ease, fill .45s ease; }
.pipe-cleared text{ fill:#DCE6EC; font-family:var(--font-display); font-weight:600; font-size:17px; text-anchor:middle; }
.pipe-cleared .sub{ fill:#7C8B98; font-family:var(--font-mono); font-size:11px; font-weight:400; letter-spacing:.08em; }
.pipe-cleared .tick{ stroke:rgba(255,255,255,.35); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; transition:stroke .45s ease; }
.pipe-cleared.lit rect{ stroke:rgba(23,195,163,.55); fill:rgba(23,195,163,.08); }
.pipe-cleared.lit .tick{ stroke:var(--teal); }

/* ---- Depth: pointer-driven tilt on cards and hero art (fine pointers only) ---- */
@media (hover:hover) and (pointer:fine){
  .tilt{ transform-style:preserve-3d; will-change:transform; transition:transform .5s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease; }
  .tilt.is-tilting{ transition:transform .08s linear; }
  .tilt::after{
    content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%), rgba(0,152,218,.16), transparent 70%);
    opacity:0; transition:opacity .3s ease;
  }
  .tilt.is-tilting::after{ opacity:1; }
  .section-ink .tilt::after{ background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%), rgba(23,195,163,.18), transparent 70%); }
  .hero-parallax{ transition:transform .6s cubic-bezier(.2,.7,.3,1); will-change:transform; }
}

@media (prefers-reduced-motion: reduce){
  .pipe-rail{ animation:none; stroke-dasharray:none; }
  .pipe-packets{ display:none; }
  .pipe-stop, .pipe-cleared{ }
  .tilt, .hero-parallax{ transform:none !important; }
}

/* ERP coverage cards: vendor logo (or a drawn icon where there is no vendor) */
.erp-card-logo{ display:flex; align-items:center; height:50px; margin-bottom:14px; }
.erp-card-logo img{ max-height:46px; max-width:150px; width:auto; height:auto; object-fit:contain; }
.erp-card-icon{ color:var(--blue-dark); }
.erp-card h3{ margin-top:0; }

/* E-Invoice mega menu sits under the second nav item, so it opens leftwards */
.dropdown-mega-left{ left:0; right:auto; }
.dropdown-mega .dd-head{ display:flex; align-items:center; gap:8px; }
.dropdown-mega .dd-head .flag-ico{ box-shadow:0 0 0 1px rgba(11,31,46,.14); }

/* Grid items default to min-width:auto, so a wide child (the 760px comparison
   table) pushes the whole column past the viewport instead of scrolling inside
   its own .table-wrap. min-width:0 lets the column shrink as intended. */
.two-col > *, .grid-2 > *, .grid-3 > *, .grid-4 > *{ min-width:0; }