/*
 * ALFIDAONE public website: one style sheet for English (LTR) and Arabic (RTL).
 * - Logical properties everywhere (inline/block), so RTL mirrors without a second sheet; the few direction-specific rules are under [dir="rtl"].
 * - Light theme with dark navy bands. Colours come from the brand (navy, gold, primary blue). Cairo is self-hosted (OFL).
 * - Motion is CSS only and switched off under prefers-reduced-motion.
 * Contrast notes: text colours were chosen for >= 4.5:1 on their backgrounds (ink on white 15:1, muted on white 6.8:1,
 * gold-ink on white 6.2:1, light-muted on navy 9.7:1). The brand blue #1677ff is used only for large text, decoration and on dark.
 */

@font-face { font-family: "Cairo"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/cairo-regular-400.eb4d2d85a0.woff") format("woff"); }
@font-face { font-family: "Cairo"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/cairo-semibold-600.7fd1d19063.woff") format("woff"); }
@font-face { font-family: "Cairo"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/cairo-bold-700.d299e8bf80.woff") format("woff"); }

:root {
  --navy-950: #07142a; --navy-900: #0b1d3a; --navy-800: #13294f; --navy-700: #1f3d70;
  --blue: #1677ff; --blue-600: #0f62d9; --blue-700: #0b4fb3; --sky: #8fc2ff;
  --gold: #c9a349; --gold-ink: #7a5c0c; --gold-soft: #f7f0de;
  --ink: #0b1f44; --muted: #4b5b78; --line: #dfe7f3; --line-strong: #b4c1d8; --bg: #f5f8fd; --surface: #ffffff;
  --on-dark: #eaf1ff; --on-dark-muted: #aebdd6; --danger: #b42318; --ok: #12805c;
  --radius: 16px; --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(11, 31, 68, .06), 0 4px 14px rgba(11, 31, 68, .06);
  --shadow: 0 2px 4px rgba(11, 31, 68, .05), 0 18px 44px rgba(11, 31, 68, .12);
  --shadow-lg: 0 30px 80px rgba(3, 10, 26, .45);
  --font: "Cairo", system-ui, "Segoe UI", Tahoma, "Noto Sans Arabic", Arial, sans-serif;
  --gutter: 20px; --max: 1200px; --header-h: 72px; --focus: #0f62d9;
  --hero-bg: #071a35; --hero-bg-2: #0b1d3a; --hero-bg-3: #050f22; --hero-bg-rgb: 7 26 53; --hero-accent-rgb: 56 189 248; --hero-line-rgb: 56 189 248; --hero-spark-rgb: 224 242 254;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-block-start: calc(var(--header-h) + 16px); }
body { margin: 0; font-family: var(--font); font-size: 1rem; line-height: 1.7; color: var(--ink); background: var(--surface); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-wrap: break-word; }
[lang="ar"] body { line-height: 1.85; }
img, svg { max-inline-size: 100%; }
img { display: block; block-size: auto; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.2; color: var(--ink); text-wrap: balance; }
[lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3 { line-height: 1.4; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--blue-600); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--blue-700); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.hero, .page-head, .section--dark, .band, .site-footer { --focus: var(--sky); }
mark.tbc { background: #fff1b8; color: #4a3500; padding: 0 .25em; border-radius: 4px; font-weight: 600; }
[hidden] { display: none !important; }

.sr-only { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: absolute; inset-inline-start: 12px; inset-block-start: -80px; z-index: 100; background: var(--navy-950); color: #fff; padding: 12px 18px; border-radius: 0 0 10px 10px; font-weight: 600; text-decoration: none; }
.skip-link:focus { inset-block-start: 0; }
main:focus { outline: none; }

.container { inline-size: 100%; max-inline-size: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-inline-size: 820px; }
.centered { text-align: center; }
.muted { color: var(--muted); }
.fine { font-size: .875rem; color: var(--muted); }
.h-sm { font-size: 1.25rem; margin-block-end: .75em; }
.ico { inline-size: 1.25em; block-size: 1.25em; flex: none; }
[dir="rtl"] .ico-flip { transform: scaleX(-1); }

/* ---------------------------------------------------------------------------- Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-block-size: 46px; padding: .55em 1.25em; border-radius: 12px; border: 2px solid transparent; font: inherit; font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s; }
.btn-lg { min-block-size: 54px; padding-inline: 1.7em; font-size: 1.05rem; }
.btn-sm { min-block-size: 44px; padding-inline: 1.1em; font-size: .95rem; }
.btn-block { inline-size: 100%; }
.btn-primary { background: var(--blue-600); color: #fff; box-shadow: 0 8px 20px rgba(15, 98, 217, .28); }
.btn-primary:hover { background: var(--blue-700); color: #fff; transform: translateY(-1px); }
.btn-outline { background: transparent; color: var(--blue-600); border-color: var(--blue-600); }
.btn-outline:hover { background: var(--blue-600); color: #fff; }
.btn-light { background: #fff; color: var(--navy-950); }
.btn-light:hover { background: var(--gold-soft); color: var(--navy-950); transform: translateY(-1px); }
.btn-ghost-light { background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(255, 255, 255, .38); }
.btn-ghost-light:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.link-arrow { display: inline-flex; align-items: center; gap: .45em; font-weight: 700; text-decoration: none; min-block-size: 44px; }
.link-arrow .ico { transition: transform .2s; }
.link-arrow:hover .ico { transform: translateX(3px); }
[dir="rtl"] .link-arrow:hover .ico { transform: scaleX(-1) translateX(3px); }
.actions { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; margin-block-start: 1.5rem; }

/* ---------------------------------------------------------------------------- Header */
.site-header { position: sticky; inset-block-start: 0; z-index: 50; background: rgba(255, 255, 255, .94); backdrop-filter: saturate(1.4) blur(10px); border-block-end: 1px solid var(--line); }
.hdr { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-block-size: var(--header-h); }
.brand { display: block; flex: none; line-height: 0; }
.brand img { inline-size: 168px; block-size: auto; aspect-ratio: 520 / 119; }
.brand img.is-custom { inline-size: auto; block-size: 40px; max-inline-size: 220px; aspect-ratio: auto; object-fit: contain; }
.menu-btn { display: none; align-items: center; justify-content: center; inline-size: 48px; block-size: 48px; background: transparent; border: 1px solid var(--line-strong); border-radius: 12px; color: var(--ink); cursor: pointer; }
.menu-btn .i-close { display: none; }
.menu-btn[aria-expanded="true"] .i-open { display: none; }
.menu-btn[aria-expanded="true"] .i-close { display: block; }
.nav-wrap { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 16px; }
.nav ul { display: flex; flex-wrap: nowrap; gap: 2px; }
.site-header .hdr { max-inline-size: calc(1400px + var(--gutter) * 2); }
.nav a, .hdr-actions .btn, .hdr-link, .lang, .dd summary { white-space: nowrap; }
.nav a { display: inline-flex; align-items: center; min-block-size: 44px; padding: 0 .8em; border-radius: 10px; color: var(--ink); font-weight: 600; font-size: .95rem; text-decoration: none; position: relative; }
.nav a:hover { background: var(--bg); color: var(--blue-700); }
.nav a[aria-current="page"] { color: var(--blue-700); }
.nav a[aria-current="page"]::after { content: ""; position: absolute; inset-inline: .8em; inset-block-end: 6px; block-size: 2px; border-radius: 2px; background: var(--gold); }
.hdr-actions { display: flex; align-items: center; gap: 8px; }
.lang { display: inline-flex; align-items: center; min-block-size: 44px; padding: 0 .9em; border-radius: 10px; font-weight: 700; font-size: .95rem; color: var(--ink); text-decoration: none; border: 1px solid var(--line-strong); }
.lang:hover { background: var(--bg); color: var(--blue-700); }
.dd { position: relative; }
.dd summary { display: inline-flex; align-items: center; gap: .35em; min-block-size: 44px; padding: 0 .9em; border-radius: 10px; font-weight: 600; font-size: .95rem; cursor: pointer; list-style: none; color: var(--ink); }
.dd summary::-webkit-details-marker { display: none; }
.dd summary:hover, .dd[open] summary { background: var(--bg); }
.dd .i-chev { inline-size: 1em; block-size: 1em; transition: transform .2s; }
.dd[open] .i-chev { transform: rotate(180deg); }
.dd-menu { position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 8px); min-inline-size: 290px; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); z-index: 60; }
.dd-menu a { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 10px; text-decoration: none; color: var(--ink); min-block-size: 44px; }
.dd-menu a:hover { background: var(--bg); }
.dd-menu strong { font-size: .98rem; }
.dd-menu span { font-size: .85rem; color: var(--muted); }

@media (min-width: 1280px) and (max-width: 1599px) {
  /* Above the menu breakpoint the one-row header (menu, language, Register, Login, two request buttons) must still fit, in Arabic too. */
  .hdr { gap: 10px; }
  .brand img { inline-size: 136px; }
  .nav-wrap, .hdr-actions { gap: 6px; }
  .nav ul { flex-wrap: nowrap; gap: 0; }
  .nav a { padding: 0 .5em; font-size: .88rem; white-space: nowrap; }
  .nav a[aria-current="page"]::after { inset-inline: .5em; }
  .lang, .dd summary, .hdr-link { padding: 0 .6em; font-size: .88rem; white-space: nowrap; }
  .hdr-actions .btn { padding-inline: .9em; font-size: .88rem; white-space: nowrap; }
}
@media (max-width: 1279px) {
  :root { --header-h: 64px; }
  .brand img { inline-size: 148px; }
  .menu-btn { display: inline-flex; }
  .nav-wrap { display: none; position: absolute; inset-inline: 0; inset-block-start: 100%; flex-direction: column; align-items: stretch; gap: 16px; padding: 14px var(--gutter) 24px; background: #fff; border-block-end: 1px solid var(--line); box-shadow: 0 24px 40px rgba(11, 31, 68, .15); max-block-size: calc(100vh - var(--header-h)); max-block-size: calc(100dvh - var(--header-h)); overflow-y: auto; }
  .site-header.is-open .nav-wrap { display: flex; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav a { inline-size: 100%; min-block-size: 52px; font-size: 1.05rem; border-block-end: 1px solid var(--line); border-radius: 0; padding-inline: 4px; }
  .nav a[aria-current="page"]::after { inset-inline: 4px; inset-block-end: 8px; }
  .hdr-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .hdr-actions .btn, .lang { inline-size: 100%; justify-content: center; min-block-size: 50px; }
  .dd summary { inline-size: 100%; justify-content: space-between; min-block-size: 50px; border: 1px solid var(--line-strong); }
  .dd-menu { position: static; box-shadow: none; border: 0; padding: 6px 0 0; min-inline-size: 0; }
}

/* ---------------------------------------------------------------------------- Sections */
.section { padding-block: clamp(56px, 8vw, 104px); }
.section--tight { padding-block: clamp(36px, 5vw, 64px); }
.section--soft { background: var(--bg); }
.section--dark { background: linear-gradient(180deg, var(--navy-950), var(--navy-900)); color: var(--on-dark); position: relative; overflow: hidden; }
.section--dark h2, .section--dark h3 { color: #fff; }
.section-head { max-inline-size: 720px; margin-block-end: clamp(28px, 4vw, 52px); }
.section-head.is-centered { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.6rem); letter-spacing: -.015em; }
[lang="ar"] .section-head h2 { letter-spacing: 0; }
.lead { font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); color: var(--muted); margin-block-start: .8em; }
.section--dark .lead, .hero .lead, .page-head .lead, .band .lead { color: var(--on-dark-muted); }
.eyebrow { margin: 0 0 .9em; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); }
[lang="ar"] .eyebrow { letter-spacing: 0; font-size: .95rem; text-transform: none; }
.eyebrow--gold, .page-head .eyebrow, .section--dark .eyebrow { color: var(--gold); }
.head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.head-row .section-head { margin-block-end: clamp(20px, 3vw, 32px); }

/* ---------------------------------------------------------------------------- Hero */
/* Colours come from the generated theme sheet (--hero-*); the three palettes below only tune the glows. The animated network is a canvas behind the
   content (js/network.js); without it the CSS pattern on .hero-bg::before is the static network. */
.hero { position: relative; overflow: hidden; color: var(--on-dark); background: var(--hero-bg); isolation: isolate; --hero-glow-a: rgba(22, 119, 255, .4); --hero-glow-b: rgba(201, 163, 73, .16); }
.hero--ink { --hero-glow-a: rgba(110, 130, 190, .24); --hero-glow-b: rgba(201, 163, 73, .1); }
.hero--blue { --hero-glow-a: rgba(40, 130, 255, .58); --hero-glow-b: rgba(34, 211, 238, .16); }
.hero-bg { position: absolute; inset: 0; z-index: 0; background: radial-gradient(900px 520px at 88% -8%, var(--hero-glow-a), transparent 62%), radial-gradient(640px 420px at 4% 108%, var(--hero-glow-b), transparent 62%), linear-gradient(180deg, var(--hero-bg), var(--hero-bg-2)); }
[dir="rtl"] .hero-bg { background: radial-gradient(900px 520px at 12% -8%, var(--hero-glow-a), transparent 62%), radial-gradient(640px 420px at 96% 108%, var(--hero-glow-b), transparent 62%), linear-gradient(180deg, var(--hero-bg), var(--hero-bg-2)); }
.hero-bg::before { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 640'%3E%3Cg fill='none' stroke='%235cc8ff'%3E%3Cpath stroke-opacity='0.12' d='M436 338L306 283M1029 613L1087 478M1029 613L1149 600M1029 613L927 484M21 562L158 476M158 476L228 359M158 476L194 617M158 476L26 462M336 568L194 617M498 126L604 225M498 126L627 27M498 126L361 130M498 126L653 139M662 571L513 540M662 571L642 455M662 571L770 596M1018 402L933 328M1018 402L927 484M933 328L860 224M933 328L927 484M860 224L975 157M860 224L865 76M860 224L758 296M1098 331L1087 478M1098 331L1186 464M788 455L642 455M788 455L927 484M788 455L770 596M788 455L758 296M513 540L642 455M513 540L420 618M513 540L499 418M1087 478L1149 600M1087 478L927 484M642 455L602 321M642 455L499 418M89 115L205 205M228 359L132 287M228 359L205 205M228 359L343 378M18 272L132 287M768 72L627 27M768 72L653 139M1091 135L975 157M1091 135L1026 15M1149 600L1186 464M349 9L361 130M349 9L481 17M627 27L481 17M627 27L653 139M361 130L481 17M361 130L306 283M602 321L499 418M602 321L758 296M602 321L708 381M975 157L865 76M975 157L1026 15M205 205L191 81M205 205L306 283M499 418L343 378'/%3E%3Cpath stroke-opacity='0.22' d='M436 338L499 418M436 338L343 378M21 562L26 462M336 568L420 618M498 126L481 17M604 225L602 321M604 225L653 139M1018 402L1098 331M1018 402L1087 478M788 455L708 381M1087 478L1186 464M642 455L708 381M89 115L191 81M89 115L28 30M228 359L306 283M768 72L865 76M132 287L205 205M758 296L708 381M343 378L306 283'/%3E%3Cpath stroke-opacity='0.38' d=''/%3E%3C/g%3E%3Cg fill='none' stroke='%237dd3fc' stroke-opacity='.7' stroke-linecap='round'%3E%3Cpath stroke-width='2' d='M1029 613h0M604 225h0M933 328h0M860 224h0M788 455h0M513 540h0M768 72h0M602 321h0M481 17h0M499 418h0M1026 15h0M26 462h0M28 30h0'/%3E%3Cpath stroke-width='3' d='M436 338h0M158 476h0M336 568h0M498 126h0M228 359h0M1149 600h0M420 618h0M627 27h0M361 130h0M927 484h0M205 205h0M770 596h0M191 81h0M758 296h0M1186 464h0M708 381h0M306 283h0'/%3E%3Cpath stroke-width='4' d='M21 562h0M662 571h0M1018 402h0M1098 331h0M1087 478h0M642 455h0M89 115h0M18 272h0M194 617h0M1091 135h0M349 9h0M132 287h0M975 157h0M865 76h0M653 139h0M343 378h0'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat; opacity: .55; transition: opacity .9s ease; }
.hero.is-net-live .hero-bg::before { opacity: 0; }
.hero-net { position: absolute; inset: 0; z-index: 1; inline-size: 100%; block-size: 100%; pointer-events: none; opacity: 0; transition: opacity .9s ease; }
.hero-net.is-on { opacity: 1; }
.hero-shade { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(ellipse 54% 82% at 24% 52%, rgb(var(--hero-bg-rgb) / .62), rgb(var(--hero-bg-rgb) / .3) 48%, transparent 74%); }
[dir="rtl"] .hero-shade { background: radial-gradient(ellipse 54% 82% at 76% 52%, rgb(var(--hero-bg-rgb) / .62), rgb(var(--hero-bg-rgb) / .3) 48%, transparent 74%); }
.hero-grid { position: relative; z-index: 3; display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; padding-block: clamp(32px, 4.5vw, 60px) clamp(40px, 5vw, 64px); }
.hero h1 { color: #fff; font-size: clamp(2.2rem, 1.3rem + 2.6vw, 3.45rem); line-height: 1.08; letter-spacing: -.025em; }
[lang="ar"] .hero h1 { line-height: 1.32; letter-spacing: 0; font-size: clamp(2rem, 1.2rem + 2.7vw, 3.3rem); }
.hero .lead { max-inline-size: 34em; margin-block: 1.05em 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 1.8rem; }
.chips { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-block-start: 1.8rem; font-size: .95rem; color: var(--on-dark-muted); }
.chips li { display: inline-flex; align-items: center; gap: .45em; }
.chips .ico { color: var(--gold); inline-size: 1.1em; block-size: 1.1em; }
.hero-visual { position: relative; min-inline-size: 0; }
/* The hero screenshot: a real button (it opens the software gallery) in a browser frame with a soft shadow and a faint blue edge light. No tilt, no scaling of the file. */
.hero-frame { display: block; position: relative; inline-size: 100%; margin: 0; padding: 0; font: inherit; color: inherit; text-align: start; cursor: pointer; overflow: hidden; background: #0d2142; border: 1px solid rgb(var(--hero-accent-rgb) / .3); border-radius: 16px; box-shadow: 0 48px 90px -28px rgba(1, 6, 18, .9), 0 20px 44px -22px rgba(1, 6, 18, .75), 0 0 0 1px rgb(var(--hero-accent-rgb) / .07), 0 0 64px -8px rgb(var(--hero-accent-rgb) / .24); transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease, border-color .35s ease; -webkit-tap-highlight-color: transparent; }
.hero-frame--static { cursor: default; }
.hero-frame::after { content: ""; position: absolute; inset-inline: 8%; inset-block-start: 0; block-size: 1px; background: linear-gradient(90deg, transparent, rgb(var(--hero-accent-rgb) / .9), transparent); pointer-events: none; }
.hero-frame img { display: block; inline-size: 100%; block-size: auto; background: #fff; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.hf-bar { display: flex; align-items: center; gap: 6px; padding: 9px 13px; background: linear-gradient(180deg, #17315c, #122850); border-block-end: 1px solid rgba(255, 255, 255, .08); }
.hf-bar i { inline-size: 9px; block-size: 9px; border-radius: 50%; background: rgba(255, 255, 255, .3); }
.hf-chip { position: absolute; inset-inline: 0; inset-block-end: 16px; margin-inline: auto; inline-size: max-content; max-inline-size: calc(100% - 24px); display: inline-flex; align-items: center; gap: .55em; padding: .6em 1.15em; border-radius: 99px; background: rgba(6, 18, 40, .82); -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4); border: 1px solid rgb(var(--hero-accent-rgb) / .55); color: #fff; font-weight: 700; font-size: .95rem; line-height: 1.25; box-shadow: 0 12px 30px rgba(0, 0, 0, .45), 0 0 26px rgb(var(--hero-accent-rgb) / .28); opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; pointer-events: none; }
.hf-chip .ico { inline-size: 1.15em; block-size: 1.15em; color: rgb(var(--hero-accent-rgb)); }
.hero-frame:hover .hf-chip, .hero-frame:focus-visible .hf-chip { opacity: 1; transform: none; }
.hero-frame:focus-visible { outline: 3px solid var(--sky); outline-offset: 4px; border-radius: 16px; }
@media (hover: hover) and (pointer: fine) {
  .hero-frame:hover { transform: translateY(-4px); border-color: rgb(var(--hero-accent-rgb) / .6); box-shadow: 0 56px 100px -28px rgba(1, 6, 18, .95), 0 24px 50px -22px rgba(1, 6, 18, .8), 0 0 0 1px rgb(var(--hero-accent-rgb) / .22), 0 0 84px -4px rgb(var(--hero-accent-rgb) / .4); }
  .hero-frame:hover img { transform: scale(1.014); }
}
@media (hover: none), (pointer: coarse) { .hf-chip { opacity: 1; transform: none; } }
@media (min-width: 1021px) {
  /* The copy stays on the page grid; the screenshot may reach past it toward the window edge (at most 260px) so it can be large. */
  .hero-grid { grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); min-block-size: 540px; --bleed: clamp(0px, calc((100vw - 1200px) / 2 - 24px), 260px); }
  .hero-visual { margin-inline-end: calc(var(--bleed) * -1); }
}
@media (max-width: 1020px) {
  .hero-shade, [dir="rtl"] .hero-shade { background: radial-gradient(ellipse 96% 56% at 50% 26%, rgb(var(--hero-bg-rgb) / .66), rgb(var(--hero-bg-rgb) / .32) 56%, transparent 80%); }
  .hero-visual { max-inline-size: 820px; inline-size: 100%; margin-inline: auto; }
}
@media (max-width: 560px) { .hero-actions .btn { inline-size: 100%; } .hf-chip { inset-block-end: 10px; font-size: .86rem; padding: .5em .95em; } }
@media (prefers-reduced-motion: reduce) { .hero-frame:hover, .hero-frame:hover img { transform: none; } .hero-net, .hero-bg::before { transition: none; } }

/* ---------------------------------------------------------------------------- Screenshot frames */
.shot { margin: 0; background: var(--navy-900); border: 1px solid rgba(255, 255, 255, .14); box-shadow: var(--shadow-lg); overflow: hidden; }
.shot img { inline-size: 100%; block-size: auto; }
.shot--desktop { border-radius: 14px; }
.shot--desktop img { background: #fff; }
.shot-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: var(--navy-800); }
.shot-bar i { inline-size: 9px; block-size: 9px; border-radius: 50%; background: rgba(255, 255, 255, .28); }
.section:not(.section--dark) .shot, .tab-shot .shot { border-color: var(--line-strong); box-shadow: var(--shadow); }

/* ---------------------------------------------------------------------------- Page head (inner pages) */
.page-head { position: relative; color: var(--on-dark); background: radial-gradient(700px 260px at 90% 0%, rgba(22, 119, 255, .32), transparent 65%), linear-gradient(180deg, var(--navy-950), var(--navy-900)); border-block-end: 1px solid rgba(201, 163, 73, .4); padding-block: clamp(28px, 4vw, 48px) clamp(36px, 5vw, 64px); }
.page-head h1 { color: #fff; font-size: clamp(2rem, 1.3rem + 2.8vw, 3.2rem); letter-spacing: -.02em; max-inline-size: 18em; }
[lang="ar"] .page-head h1 { letter-spacing: 0; }
.page-head .lead { max-inline-size: 44em; }
.page-head .actions { margin-block-start: 1.5rem; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; font-size: .875rem; color: var(--on-dark-muted); margin-block-end: 1.6rem; }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before { content: "/"; margin-inline: .6em; opacity: .55; }
[dir="rtl"] .crumbs li + li::before { content: "\\"; }
.crumbs a { color: var(--on-dark); text-decoration: none; display: inline-flex; min-block-size: 24px; align-items: center; }
.crumbs a:hover { color: #fff; text-decoration: underline; }
.crumbs [aria-current] { color: var(--on-dark-muted); }

/* ---------------------------------------------------------------------------- Home: benefits, tabs, steps */
.split { display: grid; gap: 32px 72px; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } .split-head { position: sticky; inset-block-start: calc(var(--header-h) + 32px); align-self: start; } }
.benefit-list { display: grid; gap: 0; counter-reset: b; }
.benefit { display: grid; grid-template-columns: auto auto 1fr; gap: 6px 18px; align-items: start; padding-block: 26px; border-block-start: 1px solid var(--line); }
.benefit:last-child { border-block-end: 1px solid var(--line); }
.benefit-num { font-size: 1.1rem; font-weight: 700; color: var(--gold-ink); font-variant-numeric: tabular-nums; padding-block-start: .2em; min-inline-size: 2ch; }
.benefit-ico { display: grid; place-items: center; inline-size: 48px; block-size: 48px; border-radius: 14px; background: var(--bg); color: var(--blue-600); border: 1px solid var(--line); }
.benefit h3 { font-size: 1.3rem; margin-block-end: .3em; }
.benefit p { margin: 0; color: var(--muted); }
@media (max-width: 560px) { .benefit { grid-template-columns: auto 1fr; } .benefit-num { grid-column: 1 / -1; padding: 0; } }

.tabs-nav { display: none; justify-content: center; flex-wrap: wrap; gap: 6px; padding: 6px; margin: 0 auto clamp(24px, 3vw, 40px); inline-size: fit-content; max-inline-size: 100%; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-sm); }
.tabs.is-ready .tabs-nav { display: flex; }
.tab { min-block-size: 46px; padding: 0 1.3em; border: 0; border-radius: 11px; background: transparent; color: var(--muted); font: inherit; font-weight: 700; cursor: pointer; transition: background-color .2s, color .2s; }
.tab:hover { color: var(--ink); background: var(--bg); }
.tab[aria-selected="true"] { background: var(--navy-900); color: #fff; }
.tab-panel { display: grid; gap: 28px 56px; align-items: center; padding-block: 12px; }
.tabs:not(.is-ready) .tab-panel + .tab-panel { margin-block-start: 56px; padding-block-start: 56px; border-block-start: 1px solid var(--line); }
.tab-panel h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); margin-block-end: .5em; }
.tab-copy p { color: var(--muted); font-size: 1.08rem; }
@media (min-width: 940px) { .tab-panel { grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); } }
.tab-panel:focus-visible { outline-offset: 8px; }

.steps { display: grid; gap: 28px; counter-reset: s; position: relative; }
.step { position: relative; padding: 28px; border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--radius); background: rgba(255, 255, 255, .04); }
.step-num { display: grid; place-items: center; inline-size: 44px; block-size: 44px; margin-block-end: 18px; border-radius: 50%; background: var(--gold); color: var(--navy-950); font-weight: 700; font-size: 1.1rem; }
.step h3 { font-size: 1.3rem; margin-block-end: .4em; }
.step p { margin: 0; color: var(--on-dark-muted); }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); } .step:not(:last-child)::after { content: ""; position: absolute; inset-block-start: 50px; inset-inline-start: calc(100% + 2px); inline-size: 24px; border-block-start: 2px dashed rgba(201, 163, 73, .6); } }

.gal-link { margin-inline-start: .6em; font-weight: 600; }
.quotes { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.quote { margin: 0; padding: 28px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); border-block-start: 3px solid var(--gold); box-shadow: var(--shadow-sm); block-size: 100%; display: flex; flex-direction: column; gap: 18px; }
.quote blockquote { margin: 0; flex: 1; font-size: 1.1rem; line-height: 1.7; color: #22345a; }
.quote blockquote p { margin: 0; }
.quote figcaption { display: grid; gap: 2px; }
.quote figcaption span { color: var(--muted); font-size: .92rem; }

/* ---------------------------------------------------------------------------- Tiles, cards */
.tiles { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.tiles--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.tile { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s, border-color .2s; }
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--blue); color: var(--ink); }
.tile-ico { display: grid; place-items: center; inline-size: 52px; block-size: 52px; border-radius: 14px; background: linear-gradient(135deg, #e8f2ff, #f1f6ff); color: var(--blue-600); }
.tile-body { display: grid; gap: 2px; min-inline-size: 0; }
.tile-body strong { font-size: 1.05rem; line-height: 1.35; }
.tile-body span { font-size: .9rem; color: var(--muted); line-height: 1.5; }
.tile-go { display: inline-flex; color: var(--gold-ink); transition: transform .2s; }
.tile:hover .tile-go { transform: translateX(3px); }
[dir="rtl"] .tile:hover .tile-go { transform: translateX(-3px); }

.fcards { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.fcard { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 26px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s, border-color .2s; overflow: hidden; }
.fcard::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 4px; background: linear-gradient(var(--blue), var(--gold)); opacity: 0; transition: opacity .2s; }
.fcard:hover { transform: translateY(-3px); box-shadow: var(--shadow); color: var(--ink); }
.fcard:hover::before { opacity: 1; }
.fcard-ico { display: grid; place-items: center; inline-size: 48px; block-size: 48px; border-radius: 14px; background: var(--navy-900); color: var(--gold); margin-block-end: 6px; }
.fcard h3 { font-size: 1.2rem; }
.fcard p { margin: 0; color: var(--muted); font-size: .98rem; flex: 1; }
.fcard-more { display: inline-flex; align-items: center; gap: .4em; margin-block-start: 8px; font-weight: 700; color: var(--blue-600); }
.fcard-more .ico { inline-size: 1.1em; transition: transform .2s; }
.fcard:hover .fcard-more .ico { transform: translateX(3px); }
[dir="rtl"] .fcard-more .ico { transform: scaleX(-1); }
[dir="rtl"] .fcard:hover .fcard-more .ico { transform: scaleX(-1) translateX(3px); }

.plans-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; padding: clamp(28px, 4vw, 48px); border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(135deg, #fff, var(--gold-soft)); }
.plans-band h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); }
.plans-band .lead { max-inline-size: 38em; margin-block-end: 0; }
.plan-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 16px; }
.plan-chips li { padding: .25em .9em; border-radius: 99px; background: #fff; border: 1px solid var(--line-strong); font-weight: 600; font-size: .9rem; }

.band { position: relative; overflow: hidden; background: radial-gradient(700px 300px at 85% 0%, rgba(22, 119, 255, .4), transparent 65%), radial-gradient(500px 260px at 5% 110%, rgba(201, 163, 73, .22), transparent 65%), var(--navy-950); color: var(--on-dark); padding-block: clamp(48px, 6vw, 80px); }
.band-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 48px; }
.band h2 { color: #fff; font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.6rem); max-inline-size: 20em; }
.band p { color: var(--on-dark-muted); margin: .6em 0 0; max-inline-size: 38em; font-size: 1.1rem; }
.band-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------------------------------------------------------------------------- Product / feature / solution pages */
.product-grid { display: grid; gap: 36px 64px; align-items: center; }
@media (min-width: 940px) { .product-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } .product.is-flip .product-copy { order: 2; } }
.product + .product { border-block-start: 1px solid var(--line); }
.product h2 { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.5rem); }
.tagline { font-size: 1.2rem; font-weight: 600; color: var(--blue-700); margin: .3em 0 .8em; }
.checks { display: grid; gap: 10px; margin-block: 1.2em; }
.checks li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.checks .ico { color: var(--ok); margin-block-start: .3em; inline-size: 1.15em; block-size: 1.15em; }

.detail-grid { display: grid; gap: 40px 64px; align-items: start; }
@media (min-width: 980px) { .detail-grid.has-shot { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } .detail-visual { position: sticky; inset-block-start: calc(var(--header-h) + 24px); } }
.detail-copy .lead { margin-block-start: 0; color: var(--ink); font-weight: 500; }
.benefit-cards { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.benefit-cards li { padding: 26px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); border-block-start: 3px solid var(--gold); }
.benefit-cards h3 { font-size: 1.15rem; margin-block-end: .4em; }
.benefit-cards p { margin: 0; color: var(--muted); }
.hl-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); counter-reset: h; }
.hl { padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); }
.hl-num { display: block; font-weight: 700; color: var(--gold-ink); font-size: 1.05rem; margin-block-end: .6em; }
.hl h3 { font-size: 1.25rem; margin-block-end: .4em; }
.hl p { margin: 0; color: var(--muted); }
.note-wrap { margin-block-start: 28px; }
.callout, .draft-notice { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; padding: 18px 20px; border-radius: 14px; background: var(--gold-soft); border: 1px solid #e7d6a2; color: #3b2d05; margin-block: 1.5rem; }
.callout .ico, .draft-notice .ico { color: var(--gold-ink); margin-block-start: .25em; }
.callout p, .draft-notice p { margin: 0; }
.callout-title { font-weight: 700; margin-block-end: .2em !important; }
.pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pills a { display: inline-flex; align-items: center; gap: .5em; min-block-size: 44px; padding: 0 1.1em; border: 1px solid var(--line-strong); border-radius: 99px; text-decoration: none; color: var(--ink); font-weight: 600; background: #fff; }
.pills a:hover { border-color: var(--blue); color: var(--blue-700); }
.pills .ico { color: var(--blue-600); }

/* ---------------------------------------------------------------------------- Pricing */
.plans { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 30px 26px; background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-sm); }
.plan h3 { font-size: 1.4rem; }
.plan-tag { color: var(--muted); margin: 0; }
.plan-price { margin: 14px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .3em .5em; }
.plan-price .amt { font-size: 2.6rem; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.plan-price .amt--text { font-size: 1.4rem; }
.plan-price .cur { font-weight: 700; color: var(--muted); }
.plan-price .per { color: var(--muted); }
.plan-vat { font-size: .9rem; color: var(--muted); margin: 0; }
.plan .checks { margin-block: 14px 8px; flex: 1; }
.plan-limits { font-size: .92rem; color: var(--muted); margin-block-end: 14px; display: grid; gap: 2px; padding-block-start: 12px; border-block-start: 1px dashed var(--line-strong); }
.plan--hl { border: 2px solid var(--blue-600); box-shadow: var(--shadow); }
.plan-badge { position: absolute; inset-block-start: -14px; inset-inline-start: 22px; margin: 0; padding: .2em 1em; border-radius: 99px; background: var(--gold); color: var(--navy-950); font-size: .85rem; font-weight: 700; }
.fine-list { margin-block-start: 28px; display: grid; gap: 6px; font-size: .92rem; color: var(--muted); }
.upgrades { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.upgrades li { padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.upgrades h3 { font-size: 1.15rem; margin-block-end: .4em; }
.upgrades p { margin: 0; color: var(--muted); }
.empty-state { max-inline-size: 680px; margin-inline: auto; padding: clamp(32px, 5vw, 56px); text-align: center; border: 1px dashed var(--line-strong); border-radius: 24px; background: var(--bg); }
.empty-ico { display: inline-grid; place-items: center; inline-size: 64px; block-size: 64px; border-radius: 20px; background: var(--navy-900); color: var(--gold); margin-block-end: 18px; }
.empty-ico .ico { inline-size: 30px; block-size: 30px; }
.empty-state h2 { font-size: 1.8rem; margin-block-end: .4em; }
.empty-state p { color: var(--muted); font-size: 1.08rem; }
.empty-state .actions { justify-content: center; }

/* ---------------------------------------------------------------------------- Forms */
.demo-grid, .contact-grid { display: grid; gap: 36px 56px; align-items: start; }
@media (min-width: 960px) { .demo-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr); } .contact-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.form-card { padding: clamp(22px, 3.5vw, 40px); background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); }
.form-card .muted { margin-block-start: -.4em; }
.form-grid { display: grid; gap: 18px 20px; }
@media (min-width: 640px) { .form--full .form-grid { grid-template-columns: 1fr 1fr; } }
.field--wide { grid-column: 1 / -1; }
.field label { display: block; font-weight: 600; margin-block-end: 6px; font-size: .95rem; }
.field .req { color: var(--danger); }
.field .opt { color: var(--muted); font-weight: 400; font-size: .85rem; }
.field input:not([type="checkbox"]), .field select, .field textarea { display: block; inline-size: 100%; min-block-size: 48px; padding: .6em .9em; font: inherit; color: var(--ink); background: #fff; border: 1px solid #7b8aa6; border-radius: 12px; transition: border-color .2s, box-shadow .2s; }
.field textarea { min-block-size: 120px; resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5b78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8em center; background-size: 1.1em; padding-inline-end: 2.6em; }
[dir="rtl"] .field select { background-position: left .8em center; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--blue-600); }
.field .hint { margin: 6px 0 0; font-size: .85rem; color: var(--muted); }
.field-error { margin: 6px 0 0; font-size: .9rem; font-weight: 600; color: var(--danger); }
.field.is-invalid input:not([type="checkbox"]), .field.is-invalid select, .field.is-invalid textarea { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.field--check { display: grid; grid-template-columns: 24px 1fr; gap: 12px; margin-block-start: 22px; align-items: start; }
.field--check input { inline-size: 24px; block-size: 24px; margin: 2px 0 0; accent-color: var(--blue-600); }
.field--check label { font-weight: 400; margin: 0; }
.field--check .field-error { grid-column: 2; }
.hp { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 0; pointer-events: none; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-block-start: 24px; }
.preview-note { margin: 0; padding: .4em .9em; border-radius: 8px; background: var(--gold-soft); color: #3b2d05; font-weight: 600; }
.form-status { margin-block-start: 18px; }
.form-status:empty { display: none; }
.form-status .msg { padding: 14px 16px; border-radius: 12px; font-weight: 600; border: 1px solid; }
.form-status .msg--ok { background: #e6f6ef; border-color: #9fd8bf; color: #0b5a40; }
.form-status .msg--err { background: #fdecea; border-color: #f2b8b2; color: #8a1a10; }
.form-status .ref { display: block; margin-block-start: 6px; font-weight: 400; }
.form-status .ref code { font-family: ui-monospace, Consolas, monospace; direction: ltr; unicode-bidi: isolate; background: rgba(0, 0, 0, .06); padding: .1em .45em; border-radius: 6px; }
.demo-side { padding: 8px 4px; }
.next { display: grid; gap: 14px; margin-block-end: 20px; }
.next li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; }
.next li span { display: grid; place-items: center; inline-size: 34px; block-size: 34px; border-radius: 50%; background: var(--navy-900); color: var(--gold); font-weight: 700; }
.side-mail { display: flex; align-items: center; gap: .5em; margin-block-start: 18px; }
.contact-cards { display: grid; gap: 14px; }
.contact-cards li { display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: center; padding: 16px 18px; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.contact-cards .ico { inline-size: 48px; block-size: 48px; padding: 12px; border-radius: 14px; background: var(--navy-900); color: var(--gold); }
.contact-cards .k { display: block; font-size: .82rem; color: var(--muted); }
.contact-cards a { font-weight: 700; }
.support-text { margin-block-start: 22px; color: var(--muted); }

/* ---------------------------------------------------------------------------- About, help, legal */
.about-grid { display: grid; gap: 40px 72px; align-items: start; }
@media (min-width: 940px) { .about-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } }
.prose { max-inline-size: 70ch; }
.prose h2 { font-size: 1.6rem; margin-block: 1.6em .5em; }
.prose h2:first-child { margin-block-start: 0; }
.prose h3 { font-size: 1.2rem; margin-block: 1.4em .4em; }
.prose p, .prose li { color: #22345a; }
.prose ul, .prose ol { margin-block: 0 1.1em; padding-inline-start: 1.4em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-block-end: .4em; padding-inline-start: .2em; }
.values { display: grid; gap: 16px; }
.values li { padding: 24px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg); border-inline-start: 4px solid var(--gold); }
.values h3 { font-size: 1.15rem; margin-block-end: .3em; }
.values p { margin: 0; color: var(--muted); }
.help-grid { display: grid; gap: 28px 48px; align-items: start; }
@media (min-width: 900px) { .help-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, .7fr); } }
.help-actions { display: grid; gap: 12px; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--bg); }
.acc-list { display: grid; gap: 10px; }
.acc { border: 1px solid var(--line); border-radius: 14px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.acc[open] { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.acc summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-block-size: 56px; padding: 10px 20px; font-weight: 700; cursor: pointer; list-style: none; border-radius: 14px; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary .ico { transition: transform .2s; color: var(--blue-600); }
.acc[open] summary .ico { transform: rotate(180deg); }
.acc-body { padding: 0 20px 18px; color: #22345a; }
.acc-body p:last-child { margin-block-end: 0; }
.support-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; }
.support-band h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); }
.support-band .lead { max-inline-size: 40em; margin-block-end: 0; }
.legal-grid { display: grid; gap: 40px 64px; align-items: start; grid-template-columns: minmax(0, 1fr); }
.legal-body { min-inline-size: 0; overflow-wrap: anywhere; }
@media (min-width: 940px) { .legal-grid { grid-template-columns: minmax(0, 1fr) 280px; } .legal-nav { position: sticky; inset-block-start: calc(var(--header-h) + 24px); } }
.legal-meta { display: grid; gap: 10px 32px; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); margin: 1.4rem 0 2rem; padding: 18px 20px; background: var(--bg); border-radius: 14px; border: 1px solid var(--line); }
.legal-meta dt { font-size: .82rem; color: var(--muted); }
.legal-meta dd { margin: 0; font-weight: 600; }
.legal-nav ul { display: grid; gap: 2px; }
.legal-toc { margin: 0 0 2rem; padding: 14px 20px; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; }
.legal-toc summary { cursor: pointer; font-weight: 700; min-block-size: 44px; display: flex; align-items: center; }
.legal-toc ol { display: grid; gap: 0 32px; padding-inline-start: 0; margin: 4px 0 8px; list-style: none; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.legal-toc a { display: flex; align-items: center; min-block-size: 40px; text-decoration: none; color: var(--ink); }
.legal-toc a:hover { color: var(--blue-700); text-decoration: underline; }
.legal-body h2[id] { scroll-margin-block-start: calc(var(--header-h, 72px) + 16px); }
.legal-nav a { display: flex; align-items: center; min-block-size: 44px; text-decoration: none; padding: 0 12px; margin-inline: -12px; border-radius: 10px; color: var(--ink); }
.legal-nav a:hover { background: var(--bg); color: var(--blue-700); }
.notfound { text-align: start; }
.notfound .lead { margin-block-end: 1.5rem; }
.nf-ar { margin-block-start: 48px; padding-block-start: 32px; border-block-start: 1px solid var(--line); }
.nf-ar h2 { font-size: 1.6rem; margin-block-end: .3em; }

/* ---------------------------------------------------------------------------- Footer */
.site-footer { background: var(--navy-950); color: var(--on-dark-muted); padding-block: clamp(44px, 6vw, 72px) 28px; border-block-start: 1px solid rgba(201, 163, 73, .4); }
.site-footer a { color: var(--on-dark); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.foot-grid { display: grid; gap: 36px 40px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
@media (min-width: 900px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1.2fr 1.2fr; } }
.foot-logo img { inline-size: 190px; block-size: auto; aspect-ratio: 520 / 119; }
.foot-logo.is-custom img { inline-size: auto; block-size: 44px; max-inline-size: 240px; aspect-ratio: auto; object-fit: contain; background: #fff; padding: 6px 10px; border-radius: 10px; }
.foot-brand p { margin-block: 16px; max-inline-size: 30em; }
.socials { display: flex; flex-wrap: wrap; gap: 8px; }
.socials a { display: inline-flex; align-items: center; min-block-size: 44px; padding: 0 1em; border: 1px solid rgba(255, 255, 255, .25); border-radius: 99px; }
.foot-col h2 { font-size: .95rem; color: #fff; margin-block-end: .9em; letter-spacing: .02em; }
.foot-col h2:not(:first-child) { margin-block-start: 1.6em; }
.foot-col ul { display: grid; gap: 0; }
.foot-col li a { display: inline-flex; align-items: center; min-block-size: 36px; }
.contact-list li { display: flex; align-items: flex-start; gap: .6em; padding-block: 6px; }
.contact-list .ico { color: var(--gold); margin-block-start: .35em; inline-size: 1.1em; block-size: 1.1em; }
.foot-legal { margin-block-start: 44px; padding-block-start: 22px; border-block-start: 1px solid rgba(255, 255, 255, .14); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; font-size: .9rem; }
.foot-legal ul { display: flex; flex-wrap: wrap; gap: 0 18px; }
.foot-legal a { display: inline-flex; align-items: center; min-block-size: 40px; }
.copy { margin: 0; }

/* ---------------------------------------------------------------------------- Motion (CSS only, off for reduced motion) */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes lift { from { transform: translateY(22px); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-copy > :nth-child(2) { animation-delay: .06s; }
  .hero-copy > :nth-child(3) { animation-delay: .12s; }
  .hero-copy > :nth-child(4) { animation-delay: .18s; }
  .hero-copy > :nth-child(5) { animation-delay: .24s; }
  .hero-visual { animation: lift .9s .1s cubic-bezier(.2, .7, .2, 1) both; }
  @supports (animation-timeline: view()) {
    .benefit, .tile, .fcard, .step, .plan, .hl, .upgrades li, .benefit-cards li, .values li { animation: lift linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .001ms !important; animation: none !important; }
}
@media print { .site-header, .site-footer, .band, .skip-link { display: none; } .page-head { background: none; color: #000; } .page-head h1 { color: #000; } }

/* ---- quotation-first release: pricing actions, header links, draft markers ---- */
.cta-grid { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; margin-block-start: 20px; }
.cta-grid .btn { flex: 1 1 200px; justify-content: center; text-align: center; }
.start-band { display: grid; gap: 24px; align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1021px) { .start-band { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .start-band .cta-grid { margin-block-start: 0; } }
.empty-state .cta-grid { justify-content: center; }
.hdr-link { text-decoration: none; font-weight: 600; font-size: .92rem; color: var(--ink); padding: 8px 10px; border-radius: 8px; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }
.hdr-link:hover { background: rgba(7, 20, 42, .06); }
.tag-draft { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .02em; padding: 1px 7px; border-radius: 999px; background: #fff4d6; color: #7a5200; border: 1px solid #f0d58a; vertical-align: middle; }
.site-footer .tag-draft { background: rgba(255, 244, 214, .14); color: #ffe3a1; border-color: rgba(255, 227, 161, .4); }
.draft-notice .draft-other { margin-block-start: 10px; padding-block-start: 10px; border-block-start: 1px dashed rgba(122, 82, 0, .35); }
.callout-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-block-start: 8px; font-weight: 600; }
.steps--light .step { background: #fff; border-color: var(--line); }
.steps--light .step p { color: var(--muted); }
.steps--light .step h3 { color: var(--ink); }
.plan-vat { color: var(--muted); font-size: .9rem; margin: 6px 0 0; }
@media (max-width: 1279px) { .hdr-link { inline-size: 100%; justify-content: center; border: 1px solid var(--line-strong); min-block-size: 50px; } }
.plan { display: flex; flex-direction: column; }
.plan > .btn { margin-block-start: auto; }
.plan > .checks, .plan > .plan-limits { margin-block-end: 18px; }

/* ---- Legal & Compliance pages: complaint and privacy-request forms, tracking result, registers, business details ---- */
.demo-side > * + * { margin-block-start: 22px; }
.lg-links { display: flex; flex-wrap: wrap; gap: 6px 18px; font-weight: 600; }
.lg-track-card { padding: clamp(18px, 3vw, 26px); border-radius: 18px; box-shadow: var(--shadow-sm); }
.lg-track-card .h-sm { margin-block-end: .4em; }
.lg-form .form-foot { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; margin-block-start: 22px; }
.lg-form .form-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .form--full.lg-form .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lg-track-card .lg-form .form-grid { grid-template-columns: minmax(0, 1fr); } }
.lg-result { margin-block-start: 18px; }
.lg-result:empty { display: none; }
.lg-result:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 12px; }
.lg-case { display: grid; gap: 14px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); }
.lg-case h3 { font-size: 1.05rem; margin: 0; }
.lg-case dl { display: grid; gap: 8px 18px; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); margin: 0; }
.lg-case dt { font-size: .8rem; color: var(--muted); }
.lg-case dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.lg-case code, .form-status code { font-family: ui-monospace, Consolas, monospace; direction: ltr; unicode-bidi: isolate; background: rgba(0, 0, 0, .06); padding: .1em .45em; border-radius: 6px; overflow-wrap: anywhere; }
.lg-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .82rem; font-weight: 700; background: #e7f0ff; color: #0b3f8f; border: 1px solid #b9d2fb; }
.lg-badge--done { background: #e6f6ef; color: #0b5a40; border-color: #9fd8bf; }
.lg-badge--wait { background: #fff4d6; color: #7a5200; border-color: #f0d58a; }
.lg-note { font-size: .88rem; color: var(--muted); margin: 0; }
.lg-secret { padding: 12px 14px; border-radius: 12px; background: #fff4d6; border: 1px solid #f0d58a; color: #5c3f00; font-weight: 600; }
.lg-secret code { background: rgba(255, 255, 255, .7); font-size: 1.05em; }
.lg-thread { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.lg-msg { padding: 10px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--line); max-inline-size: 100%; }
.lg-msg--staff { background: #eef5ff; border-color: #c9dcf8; }
.lg-msg__who { font-size: .8rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 10px; }
.lg-msg__body { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.lg-subform { display: grid; gap: 10px; padding-block-start: 12px; border-block-start: 1px dashed var(--line-strong); }
.lg-subform label { font-weight: 600; }
.lg-subform textarea { inline-size: 100%; min-block-size: 96px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 10px; font: inherit; background: #fff; color: var(--ink); }
.lg-subform .btn { justify-self: start; }
.lg-subform .field-error { color: var(--danger); margin: 0; font-size: .88rem; }
.lg-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.lg-table { border-collapse: collapse; inline-size: 100%; min-inline-size: 560px; font-size: .94rem; }
.lg-table th, .lg-table td { padding: 10px 14px; text-align: start; vertical-align: top; border-block-end: 1px solid var(--line); }
.lg-table thead th { background: var(--bg); font-size: .82rem; color: var(--muted); font-weight: 700; }
.lg-table tbody th { font-weight: 700; }
.lg-table tbody tr:last-child th, .lg-table tbody tr:last-child td { border-block-end: 0; }
.lg-register { margin-block-start: 2.4rem; }
.lg-register h2 { margin-block-end: .6em; }
.lg-entity { margin-block-start: 28px; padding-block-start: 22px; border-block-start: 1px solid var(--line); }
.lg-entity .legal-meta { margin-block: .6rem 1rem; }
.lg-plan-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); margin-block-start: 22px; }
.lg-plan-terms { padding: 18px 20px; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.lg-plan-terms h3 { font-size: 1.1rem; margin-block-end: .4em; }
.lg-plan-terms .legal-meta { margin: .4rem 0 0; padding: 0; background: none; border: 0; grid-template-columns: minmax(0, 1fr); }
.lg-before .checks { margin-block-end: 1.4em; }
@media print { .lg-form, .lg-track-card { display: none; } }