/* =====================================================================
   web3.s0sta.com — home, audits and findings pages
   Loaded after style.css and portal.css, so the theme, header, buttons,
   split headlines, terminal, form and footer are the same everywhere.
   This file only has the parts that are new on web3.s0sta.com.
   ===================================================================== */

/* ---------- Tokens ---------- */
.page-w3 {
  /* severity colours of a finding */
  --sev-critical: #fb7185;
  --sev-high: #fb923c;
  --sev-medium: #f2c14e;
  --sev-low: #22c3e6;
  --sev-info: #a78bfa;
  --sev-gas: #94a3b8;
}

/* ---------- Small helpers ---------- */
.btn-line { background: transparent; color: var(--ink); border-color: rgba(22, 18, 58, .24); }
.btn-line:hover { border-color: var(--ink); background: rgba(22, 18, 58, .04); }
.w3-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: clamp(28px, 3.4vw, 40px); }
.w3-note { flex: 1 1 100%; font-size: 14px; color: var(--muted-d); }
.light .w3-note { color: var(--muted-l); }

/* ---------- Home: hero ---------- */
.w3-hero .hero-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
.w3-hero .hero-title { font-size: clamp(42px, 5.4vw, 80px); }
:lang(ar) .w3-hero .hero-title { font-size: clamp(36px, 4.6vw, 66px); }
.w3-visual { aspect-ratio: auto; display: grid; align-items: start; justify-items: start; max-width: 520px; }
.w3-visual .hero-static { position: relative; inset: auto; justify-self: stretch; width: 100%; height: auto; aspect-ratio: 1; }
/* the terminal sits under the S and only covers the empty bottom of the picture */
.w3-term { position: relative; z-index: 1; width: min(100%, 470px); margin: -15% 0 0; }
.w3-term .term-body { padding: 14px 18px 16px; font-size: 12.5px; line-height: 1.8; }
.w3-term .term-body .tl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w3-term-note { padding: 10px 18px 13px; border-top: 1px solid var(--line-d); font-size: 12.5px; line-height: 1.5; color: #8e88bd; }
.w3-term-note:dir(rtl) { text-align: right; }
.w3-hero .hero-stats div, .au-stats div { justify-content: flex-end; }

@media (max-width: 900px) {
  .w3-hero .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .w3-hero .hero-visual { order: 0; width: 100%; max-width: 460px; margin: 22px auto 0; }
  .w3-visual .hero-static { width: 74%; justify-self: center; }
  .w3-term { width: 100%; margin-top: -12%; }
}

/* ---------- Home: what I do ---------- */
.w3-offers { padding-bottom: clamp(56px, 7vw, 100px); }
.w3-cards { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.w3-card {
  grid-column: span 6; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr;
  gap: 14px 18px; min-width: 0; min-height: 280px; overflow: hidden; padding: clamp(24px, 2.8vw, 34px); border-radius: var(--r-l);
  background: var(--night-2); border: 1px solid var(--line-d); color: var(--text-d); text-decoration: none;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.w3-card:hover { transform: translateY(-3px); border-color: var(--line-d2); box-shadow: 0 28px 54px -30px rgba(0, 0, 0, .75); }
.w3-card-audits {
  grid-column: span 7; color: #fff; border-color: transparent;
  background: radial-gradient(90% 120% at 100% 0%, rgba(34, 195, 230, .26), transparent 58%), linear-gradient(150deg, #7c3aed 0%, #5b21b6 55%, #36198a 100%);
}
.w3-card-audits:hover { border-color: transparent; box-shadow: 0 28px 54px -28px rgba(124, 58, 237, .7); }
.w3-card-findings { grid-column: span 5; }
.w3-card-projects { grid-column: span 5; background: linear-gradient(155deg, #221a5c 0%, #0c3a4e 100%); }
.w3-card-research { grid-column: span 7; background: var(--paper); color: var(--ink); border-color: transparent; }
.w3-card-research:hover { border-color: transparent; box-shadow: 0 28px 54px -30px rgba(196, 181, 253, .45); }
.w3-card-art {
  grid-column: 2; grid-row: 1 / span 2; align-self: start; width: clamp(88px, 10vw, 136px); height: auto;
  margin-block: -8px 0; margin-inline-end: -8px; filter: drop-shadow(0 18px 24px rgba(5, 3, 25, .45));
  pointer-events: none; user-select: none; transition: transform .35s ease;
}
.w3-card-research .w3-card-art { filter: drop-shadow(0 16px 22px rgba(10, 6, 40, .22)); }
.w3-card:hover .w3-card-art { transform: translateY(-4px) rotate(-3deg); }
.w3-card-title { grid-column: 1; align-self: center; font: 400 clamp(24px, 2.3vw, 32px)/1.15 var(--display); letter-spacing: -.025em; text-wrap: balance; }
.w3-card-text { grid-column: 1; font-size: 15.5px; line-height: 1.6; max-width: 46ch; opacity: .86; }
.w3-go { grid-column: 1 / -1; align-self: end; justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding-block: 6px 2px; font-weight: 600; font-size: 14.5px; border-bottom: 1.5px solid currentColor; }
.w3-go .ic { width: 15px; height: 15px; transition: transform .2s ease; }
.w3-card:hover .w3-go .ic { transform: translateX(3px); }
[dir="rtl"] .w3-card:hover .w3-go .ic { transform: scaleX(-1) translateX(3px); }
:lang(ar) .w3-card-title { letter-spacing: 0; line-height: 1.45; }
@media (max-width: 980px) {
  .w3-cards > .w3-card { grid-column: span 6; }
}
@media (max-width: 680px) {
  .w3-cards > .w3-card { grid-column: 1 / -1; min-height: 0; }
}

/* ---------- Home: projects ---------- */
.w3-series { list-style: none; padding: 0; display: grid; border-top: 1px solid var(--line-l); }
.w3-ser {
  --c: var(--s1);
  display: grid; grid-template-columns: 56px minmax(0, 1.1fr) minmax(0, .9fr) minmax(0, 1.6fr); align-items: center;
  gap: 6px 22px; padding-block: 15px; border-bottom: 1px solid var(--line-l);
}
:is(.w3-ser, .w3-app)[data-series="II"] { --c: var(--s2); }
:is(.w3-ser, .w3-app)[data-series="III"] { --c: var(--s3); }
:is(.w3-ser, .w3-app)[data-series="IV"] { --c: var(--s4); }
:is(.w3-ser, .w3-app)[data-series="V"] { --c: var(--s5); }
.w3-ser-k { font: 300 30px/1 var(--display); letter-spacing: -.04em; color: var(--c); }
.w3-ser-name { font: 500 17px/1.3 var(--display); letter-spacing: -.01em; }
.w3-ser-n { font: 500 13.5px/1.4 var(--mono); color: var(--muted-l); font-variant-numeric: tabular-nums; }
:lang(ar) .w3-ser-n { font-family: var(--body); }
[dir="rtl"] :is(.w3-ser-k, .w3-ser-name) { text-align: right; }
.w3-ser-bar { display: block; width: 100%; height: 8px; }
.w3-ser-bg { fill: rgba(22, 18, 58, .08); }
.w3-ser-fill { fill: var(--c); }
[dir="rtl"] :is(.w3-ser-bar, .w3-rc-bar) { transform: scaleX(-1); }
@media (max-width: 760px) {
  .w3-ser { grid-template-columns: 46px minmax(0, 1fr); gap: 2px 14px; }
  .w3-ser-k { grid-row: 1 / span 2; font-size: 26px; }
  .w3-ser-bar { grid-column: 1 / -1; margin-top: 8px; }
}

.w3-sub { margin-block: clamp(40px, 5vw, 60px) 18px; }
.w3-apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 206px), 1fr)); gap: 12px; }
.w3-app {
  --c: var(--s1);
  display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 18px 18px 16px; border-radius: 20px;
  background: #fff; border: 1px solid var(--line-l); color: var(--ink); text-decoration: none;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.w3-app::before { content: ""; width: 34px; height: 4px; margin-bottom: 6px; border-radius: 99px; background: var(--c); }
.w3-app:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c) 50%, transparent); box-shadow: 0 18px 36px -26px rgba(46, 26, 120, .45); }
.w3-app-no { font: 500 12px/1.3 var(--mono); color: var(--muted-l); overflow-wrap: anywhere; }
.w3-app-title { font: 500 18px/1.25 var(--display); letter-spacing: -.01em; text-wrap: balance; }
.w3-app-text { font-size: 14px; line-height: 1.5; color: var(--muted-l); display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.w3-app-tests { margin-top: auto; padding-top: 10px; display: inline-flex; align-items: center; gap: 7px; font: 500 12.5px var(--mono); color: color-mix(in srgb, var(--c) 70%, #16123a); }
.w3-app-tests::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }

/* ---------- Home: research ---------- */
.w3-res-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center;
  padding: clamp(24px, 4vw, 56px); border-radius: var(--r-l); color: var(--text-d);
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(34, 195, 230, .16), transparent 60%),
    radial-gradient(60% 80% at 0% 100%, rgba(124, 58, 237, .26), transparent 62%),
    var(--night);
}
.w3-res-grid .eyebrow, .w3-res-grid .lead, .w3-res-grid .w3-note { color: var(--muted-d); }
.w3-res-grid :focus-visible { outline-color: var(--lilac); }
.w3-res-copy { min-width: 0; }
.w3-research { padding-bottom: clamp(64px, 8vw, 110px); }
.w3-res-stats { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 18px clamp(28px, 4vw, 56px); margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line-d); }
.w3-res-stats div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; min-width: 0; }
.w3-res-stats dd { font: 300 clamp(28px, 2.8vw, 38px)/1 var(--display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.w3-res-stats dt { font-size: 13.5px; color: var(--muted-d); max-width: 20ch; }
.w3-res-chart { min-width: 0; padding: clamp(16px, 2.2vw, 26px); border-radius: 22px; background: rgba(255, 255, 255, .035); border: 1px solid var(--line-d); }
.w3-res-chart figcaption { margin: 4px 12px 12px; }
.w3-res-chart ol { list-style: none; padding: 0; display: grid; gap: 2px; }
.w3-res-chart li { --c: var(--s1); }
.w3-res-chart li:nth-child(1) { --c: var(--s5); }
.w3-res-chart li:nth-child(2) { --c: var(--s4); }
.w3-res-chart li:nth-child(3) { --c: var(--s3); }
.w3-res-chart li:nth-child(4) { --c: var(--s2); }
.w3-res-chart a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 6px 14px; padding: 10px 12px; border-radius: 12px; text-decoration: none; transition: background-color .2s; }
.w3-res-chart a:hover { background: rgba(196, 181, 253, .08); }
.w3-rc-name { font: 500 15px/1.35 var(--body); overflow-wrap: anywhere; }
[dir="rtl"] .w3-rc-name { text-align: right; }
.w3-rc-n { font: 500 13px var(--mono); color: var(--muted-d); white-space: nowrap; font-variant-numeric: tabular-nums; }
:lang(ar) .w3-rc-n { font-family: var(--body); }
.w3-rc-bar { grid-column: 1 / -1; display: block; width: 100%; height: 10px; }
.w3-res-chart .w3-ser-bg { fill: rgba(196, 181, 253, .14); }
.w3-rc-fill { fill: var(--c); }
@media (max-width: 900px) { .w3-res-grid { grid-template-columns: 1fr; } }

/* ---------- Severity and fix status ---------- */
.sev {
  --sc: var(--sev-medium);
  display: inline-flex; align-items: center; gap: 7px; padding-block: 4px; padding-inline: 9px 11px; border-radius: 999px;
  font: 600 12px/1.3 var(--mono); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
  color: color-mix(in srgb, var(--sc) 80%, #fff);
  background: color-mix(in srgb, var(--sc) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--sc) 42%, transparent);
}
.sev::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sc); }
:lang(ar) .sev { font: 600 12.5px/1.4 var(--body); letter-spacing: 0; }
.light .sev {
  color: color-mix(in srgb, var(--sc) 52%, #16123a);
  background: color-mix(in srgb, var(--sc) 16%, #fff);
  border-color: color-mix(in srgb, var(--sc) 48%, transparent);
}
.sev-critical, .f-card[data-sev="critical"] { --sc: var(--sev-critical); }
.sev-high, .f-card[data-sev="high"] { --sc: var(--sev-high); }
.sev-medium, .f-card[data-sev="medium"] { --sc: var(--sev-medium); }
.sev-low, .f-card[data-sev="low"] { --sc: var(--sev-low); }
.sev-info, .f-card[data-sev="info"] { --sc: var(--sev-info); }
.sev-gas, .f-card[data-sev="gas"] { --sc: var(--sev-gas); }
.sev-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sc, var(--muted-d)); }
.f-fix { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 500; color: var(--muted-d); }
.f-fix::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--fc, #8e88bd); }
.f-fix-fixed { --fc: var(--ok); }
.f-fix-acknowledged { --fc: var(--lilac); }
.f-fix-disputed { --fc: var(--warn); }
.f-fix-open { --fc: var(--down); }

/* ---------- Finding cards (home and findings page) ---------- */
.f-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.f-card {
  --sc: var(--sev-medium);
  position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 22px 22px 18px; border-radius: 24px;
  background: var(--night-2); border: 1px solid var(--line-d);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.f-card::before { content: ""; position: absolute; inset-block: 24px; inset-inline-start: -1px; width: 3px; border-radius: 3px; background: var(--sc); }
.f-card:hover { transform: translateY(-2px); border-color: var(--line-d2); box-shadow: 0 24px 48px -30px rgba(0, 0, 0, .75); }
.f-card-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.f-meta { font-size: 13px; color: var(--muted-d); }
.f-title { font: 400 21px/1.3 var(--display); letter-spacing: -.015em; text-wrap: balance; overflow-wrap: anywhere; }
.f-title:lang(ar) { letter-spacing: 0; line-height: 1.55; }
.f-title a { text-decoration: none; }
.f-title a:hover { color: var(--lilac); }
.f-sum { font-size: 15px; line-height: 1.6; color: var(--muted-d); display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.f-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-d); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.f-foot .chip-btn { white-space: nowrap; }

/* no findings yet */
.f-empty {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px 24px;
  padding: clamp(22px, 3vw, 34px); border-radius: var(--r-l); border: 1px dashed var(--line-d2); background: rgba(255, 255, 255, .025);
}
.f-empty-ic { width: 56px; height: 56px; padding: 14px; border-radius: 16px; color: var(--lilac); background: rgba(167, 139, 250, .14); }
.f-empty .h3 { margin-bottom: 6px; }
.f-empty p { color: var(--muted-d); max-width: 62ch; }
.f-empty .btn { white-space: nowrap; }
@media (max-width: 760px) { .f-empty { grid-template-columns: 1fr; justify-items: start; } }

/* ---------- Findings page ---------- */
.f-hero { isolation: isolate; overflow: hidden; padding-block: clamp(128px, 14vw, 176px) clamp(34px, 5vw, 56px); }
.f-hero::before {
  content: ""; position: absolute; z-index: -1; width: min(70vw, 820px); aspect-ratio: 1; border-radius: 50%; inset-inline-end: -18vw; top: -34vw;
  background: radial-gradient(circle, rgba(109, 40, 217, .55) 0%, transparent 66%); filter: blur(70px); pointer-events: none;
}
.f-hero .h2 { font-size: clamp(42px, 5.6vw, 78px); }
.f-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 22px; }
.f-seg { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line-d); }
.f-seg button {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border: 0; border-radius: 12px; background: transparent;
  font-size: 14px; font-weight: 500; color: var(--muted-d); cursor: pointer; transition: background-color .2s, color .2s;
}
.f-seg button:hover { color: var(--text-d); }
.f-seg button[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
.f-seg b { font: 600 11.5px/1 var(--mono); padding: 4px 6px; border-radius: 999px; background: rgba(255, 255, 255, .08); }
.f-seg button[aria-pressed="true"] b { background: var(--ink); color: #fff; }
.f-count { font-size: 14px; color: var(--muted-d); }
.f-none { margin-top: 4px; padding: 34px 20px; border-radius: 22px; border: 1px dashed var(--line-d2); text-align: center; color: var(--muted-d); }

/* ---------- One finding ---------- */
.f-preview { margin-bottom: 22px; padding: 10px 14px; border-radius: 12px; font-size: 14px; color: #fde68a; background: rgba(251, 191, 36, .12); border: 1px solid rgba(251, 191, 36, .4); }
.f-detail { padding-top: clamp(124px, 13vw, 160px); }
.f-detail-in { max-width: 880px; }
.f-crumbs a { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 500; color: var(--muted-d); text-decoration: none; }
.f-crumbs a:hover { color: var(--text-d); }
.f-back { width: 16px; height: 16px; transform: scaleX(-1); }
[dir="rtl"] .f-back { transform: none; }
.f-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 28px; }
.f-detail-title { margin-top: 18px; font-size: clamp(32px, 4.4vw, 56px); line-height: 1.08; overflow-wrap: anywhere; }
.f-detail-title:lang(ar) { line-height: 1.4; letter-spacing: 0; }
.f-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px 28px; margin-top: 30px; padding-block: 18px; border-block: 1px solid var(--line-d); }
.f-facts dt { font-size: 13px; color: var(--muted-d); }
.f-facts dd { margin-top: 2px; font-size: 15.5px; overflow-wrap: anywhere; }
.f-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.f-lang-note { display: inline-flex; margin-top: 24px; padding: 8px 12px; border-radius: 12px; font-size: 14px; color: var(--muted-d); background: rgba(255, 255, 255, .04); border: 1px solid var(--line-d); }
.f-lead { margin-top: 28px; font: 300 clamp(20px, 2vw, 25px)/1.5 var(--display); letter-spacing: -.01em; color: var(--text-d); }
.f-lead:lang(ar) { letter-spacing: 0; line-height: 1.8; }

.f-body { margin-top: 30px; display: grid; gap: 16px; font-size: 17px; line-height: 1.75; color: #d9d5f3; }
.f-body:lang(ar) { line-height: 1.95; }
.f-body > * { min-width: 0; }
.f-body h2 { margin-top: 22px; font: 400 clamp(24px, 2.4vw, 30px)/1.25 var(--display); letter-spacing: -.02em; color: var(--text-d); }
.f-body h3 { margin-top: 12px; font: 500 20px/1.35 var(--display); color: var(--text-d); }
.f-body :is(h2, h3):lang(ar) { letter-spacing: 0; line-height: 1.5; }
.f-body :is(p, li) { overflow-wrap: anywhere; }
.f-body :is(ul, ol) { padding-inline-start: 24px; display: grid; gap: 8px; }
.f-body li::marker { color: var(--lilac); }
.f-body blockquote {
  margin: 0; padding: 12px 18px; color: var(--text-d); background: rgba(124, 58, 237, .1);
  border-inline-start: 3px solid var(--violet); border-start-end-radius: 14px; border-end-end-radius: 14px;
}
.f-body a { color: var(--lilac); text-underline-offset: 3px; }
.f-body a:hover { color: #fff; }
.f-body strong { color: var(--text-d); font-weight: 600; }
.f-body :not(pre) > code { padding: 1px 6px; border-radius: 6px; background: rgba(167, 139, 250, .14); font-size: .88em; overflow-wrap: anywhere; }

.code-box { min-width: 0; border-radius: 16px; overflow: hidden; background: #0b0920; border: 1px solid var(--line-d2); }
.code-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 7px; padding-inline: 16px 8px; background: #15123a; font: 500 12px var(--mono); color: #8e88bd; }
.code-copy {
  padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line-d2); background: transparent; color: var(--text-d);
  font: 500 12.5px/1.2 var(--body); cursor: pointer; transition: border-color .2s, background-color .2s;
}
.code-copy:hover { border-color: var(--lilac); background: rgba(196, 181, 253, .08); }
.code-copy.is-done { border-color: var(--ok); color: #a7f3d0; }
.code-box pre { margin: 0; padding: 16px 18px 18px; overflow-x: auto; font: 13.5px/1.7 var(--mono); color: #d8d4f5; tab-size: 4; text-align: left; }
.code-box code { font: inherit; color: inherit; background: none; padding: 0; }

.f-tags { margin-top: 34px; }
.f-ask {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 48px;
  padding: clamp(22px, 3vw, 30px); border-radius: 24px; border: 1px solid var(--line-d2);
  background:
    radial-gradient(100% 140% at 0% 0%, rgba(124, 58, 237, .3), transparent 60%),
    radial-gradient(80% 120% at 100% 100%, rgba(8, 145, 178, .22), transparent 60%),
    var(--night-2);
}
.f-ask p { font: 400 clamp(19px, 1.8vw, 23px)/1.35 var(--display); max-width: 30ch; text-wrap: balance; }
:lang(ar) .f-ask p { line-height: 1.6; }

/* ---------- Audits page ---------- */
.au-hero { padding-block: clamp(128px, 14vw, 180px) clamp(64px, 8vw, 104px); }
.au-hero-in { position: relative; }
.au-hero .hero-title { max-width: min(100%, 860px); font-size: clamp(40px, 5vw, 74px); }
.au-hero .hero-lede { max-width: min(100%, 720px); }
:lang(ar) .au-hero .hero-title { font-size: clamp(36px, 4.6vw, 66px); }
.au-art {
  position: absolute; z-index: -1; inset-inline-end: var(--gutter); top: 50%; width: clamp(200px, 25vw, 330px); height: auto;
  transform: translateY(-52%); filter: drop-shadow(0 30px 40px rgba(5, 3, 25, .55)); pointer-events: none; user-select: none;
}
.au-stats { grid-template-columns: repeat(3, minmax(0, auto)); }
@media (max-width: 1020px) { .au-art { width: clamp(170px, 22vw, 230px); opacity: .55; } }
@media (max-width: 760px) { .au-art { display: none; } }
@media (max-width: 560px) {
  .au-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .au-stats div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.au-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.au-item {
  display: grid; align-content: start; gap: 8px; min-width: 0; padding: 22px 20px; border-radius: 22px; background: #fff; border: 1px solid var(--line-l);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.au-item:hover { transform: translateY(-2px); border-color: rgba(124, 58, 237, .35); box-shadow: 0 18px 36px -26px rgba(46, 26, 120, .45); }
.au-n { font: 500 13px var(--mono); color: var(--violet-2); }
.au-item h3 { font: 500 18px/1.3 var(--display); letter-spacing: -.01em; }
.au-item p { font-size: 14.5px; line-height: 1.55; color: var(--muted-l); }
:lang(ar) .au-item h3 { line-height: 1.5; letter-spacing: 0; }
:lang(ar) .au-item p { line-height: 1.8; }
@media (max-width: 1080px) { .au-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .au-grid { grid-template-columns: 1fr; } }

.au-steps { list-style: none; padding: 0; counter-reset: st; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.au-steps li {
  counter-increment: st; display: grid; align-content: start; gap: 8px; min-width: 0; padding: 24px 22px 22px; border-radius: 22px;
  background: rgba(255, 255, 255, .03); border: 1px solid var(--line-d);
}
.au-steps li::before {
  content: counter(st, decimal-leading-zero); display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 8px; border-radius: 14px;
  font: 500 14px var(--mono); color: #ddd2ff; background: rgba(167, 139, 250, .14); box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .25);
}
.au-steps li:last-child::before { background: linear-gradient(135deg, #6d28d9, #0891b2); color: #fff; box-shadow: none; }
.au-steps h3 { font: 400 20px/1.3 var(--display); letter-spacing: -.01em; }
.au-steps p { font-size: 15px; color: var(--muted-d); }
:lang(ar) .au-steps h3 { line-height: 1.5; letter-spacing: 0; }
@media (max-width: 980px) { .au-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .au-steps { grid-template-columns: 1fr; } }

.au-get-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.au-list { list-style: none; padding: 0; margin-top: 30px; display: grid; }
.au-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 14px; padding-block: 16px; border-top: 1px solid var(--line-l); }
.au-check { width: 22px; height: 22px; margin-top: 3px; color: #10b981; }
.au-list h3 { font: 500 18px/1.35 var(--display); }
.au-list p { margin-top: 2px; font-size: 15px; color: var(--muted-l); }
.au-sev { min-width: 0; padding: clamp(22px, 3vw, 32px); border-radius: var(--r-l); background: #fff; border: 1px solid var(--line-l); box-shadow: 0 30px 60px -44px rgba(46, 26, 120, .45); }
.au-sev-list { margin-top: 22px; display: grid; }
.au-sev-list div { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 6px 16px; align-items: start; padding-block: 13px; border-top: 1px solid var(--line-l); }
.au-sev-list dd { font-size: 14.5px; line-height: 1.55; color: var(--muted-l); }
:lang(ar) .au-sev-list dd { line-height: 1.8; }
@media (max-width: 900px) { .au-get-grid { grid-template-columns: 1fr; } }
@media (max-width: 460px) { .au-sev-list div { grid-template-columns: 1fr; } }

.au-faq-list { margin-top: 18px; max-width: 900px; border-bottom: 1px solid var(--line-l); }
.au-faq-list details { border-top: 1px solid var(--line-l); }
.au-faq-list summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 18px; cursor: pointer; list-style: none;
  font: 400 clamp(18px, 1.7vw, 21px)/1.35 var(--display); letter-spacing: -.01em;
}
.au-faq-list summary::-webkit-details-marker { display: none; }
.au-faq-list summary::after {
  content: ""; flex: none; width: 10px; height: 10px; margin-inline-end: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-3px) rotate(45deg); transition: transform .2s ease;
}
.au-faq-list details[open] summary::after { transform: translateY(2px) rotate(225deg); }
.au-faq-list summary:hover { color: var(--violet-2); }
.au-faq-list p { padding-bottom: 20px; max-width: 70ch; color: var(--muted-l); }
:lang(ar) .au-faq-list summary { letter-spacing: 0; line-height: 1.6; }

/* ---------- Request form parts ---------- */
.au-next-title { margin-top: 34px; font: 500 18px/1.3 var(--display); }
.au-next { list-style: none; padding: 0; margin-top: 14px; display: grid; counter-reset: nx; }
.au-next li {
  counter-increment: nx; position: relative; display: grid; gap: 2px; padding-block: 14px; padding-inline-start: 48px;
  border-top: 1px solid var(--line-d);
}
.au-next li::before {
  content: counter(nx); position: absolute; inset-inline-start: 0; top: 14px; display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 50%; font: 600 13px var(--mono); color: #ddd2ff; background: rgba(167, 139, 250, .14); box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .3);
}
.au-next b { font-weight: 600; }
.au-next span { font-size: 15px; color: var(--muted-d); }
.au-next + .work-note { margin-top: 22px; }
.w3-contact {
  background:
    radial-gradient(80% 60% at 0% 0%, rgba(124, 58, 237, .22), transparent 60%),
    radial-gradient(60% 50% at 100% 100%, rgba(8, 145, 178, .2), transparent 60%),
    var(--night);
}
.w3-contact .form-card { scroll-margin-top: 100px; }

/* ---------- Home: about ---------- */
.w3-about-grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.w3-photo { display: grid; gap: 12px; max-width: 360px; }
.w3-photo img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 30px; border: 2px solid transparent;
  background: linear-gradient(var(--night-2), var(--night-2)) padding-box, linear-gradient(145deg, rgba(167, 139, 250, .95), rgba(34, 195, 230, .6) 55%, rgba(255, 255, 255, .08)) border-box;
  box-shadow: 0 34px 80px -34px rgba(124, 58, 237, .7);
}
.w3-photo figcaption { font-size: 13.5px; color: var(--muted-d); }
.w3-photo figcaption .brand-word { font-size: 14px; color: var(--text-d); }
.w3-about-copy { min-width: 0; }
.w3-about-text { margin-top: 22px; font-size: 17.5px; color: var(--muted-d); max-width: 60ch; }
.w3-facts { margin-top: 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.w3-facts div { padding-block: 14px; border-top: 1px solid var(--line-d); }
.w3-facts dt { font-size: 13.5px; color: var(--muted-d); }
.w3-facts dd { margin-top: 2px; font-size: 16px; }
@media (max-width: 860px) {
  .w3-about-grid { grid-template-columns: 1fr; }
  .w3-photo { max-width: 280px; }
}
@media (max-width: 560px) { .w3-facts { grid-template-columns: 1fr; } }

/* ---------- Dutch: long compound words must not make a line too wide ---------- */
:lang(nl) :is(.h2, .h3, .hero-title, .w3-card-title, .f-title, .f-detail-title, .au-item h3, .au-steps h3, .au-list h3, .f-ask p) {
  -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word;
}

/* ---------- Footer ---------- */
.site-footer .brand-tag { background: rgba(196, 181, 253, .14); color: var(--lilac); }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  .w3-card:hover, .w3-app:hover, .f-card:hover, .au-item:hover { transform: none; }
}