/* Shaaf, Software Engineer: one stylesheet for every language (logical properties, so Arabic reads right to left).
   13 Nov 2026 redesign: one accent colour, IBM Plex type (Latin and Arabic from one family), thin rules instead of glows,
   buttons and cards with motion, sections that fade in, and nothing that moves for a visitor who asked for reduced motion. */
:root {
  --bg: #0d0f12; --bg2: #111419; --card: #15181e; --card2: #1a1e25;
  --text: #eceef1; --soft: #c5cad3; --muted: #9aa2ae; --a2: #f0b44c; --a1: #f0b44c;
  --btn-bg: #f0b44c; --btn-fg: #17120a; --btn-hover: #f5c66f;
  --line: rgba(255, 255, 255, .08); --line2: rgba(255, 255, 255, .17);
  --radius: 12px; --ease: cubic-bezier(.2, .7, .2, 1);
  --font: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", "IBM Plex Sans Arabic", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;   /* Arabic falls to Plex Arabic, not a mono fallback */
  color-scheme: dark;
}
/* dark by default (the owner's choice, 5 Nov 2026), light on the visitor's click */
:root[data-theme="light"] {
  --bg: #f6f5f1; --bg2: #efede7; --card: #ffffff; --card2: #fbfaf7;
  --text: #15171b; --soft: #2e333b; --muted: #5a616c; --a2: #8a5300; --a1: #8a5300;
  --btn-bg: #15171b; --btn-fg: #ffffff; --btn-hover: #2b3038;
  --line: rgba(20, 22, 26, .10); --line2: rgba(20, 22, 26, .22);
  color-scheme: light;
}
[dir="rtl"] { --font: "IBM Plex Sans Arabic", "IBM Plex Sans", -apple-system, "Segoe UI", Tahoma, Arial, sans-serif; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 17px/1.65 var(--font); -webkit-font-smoothing: antialiased;
       transition: background-color .3s, color .3s; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
::selection { background: color-mix(in srgb, var(--a2) 35%, transparent); }
.wrap { width: min(1160px, 100% - 40px); margin-inline: auto; }
.skip { position: absolute; inset-inline-start: -999px; top: 8px; background: var(--btn-bg); color: var(--btn-fg); padding: 8px 14px; border-radius: 8px; z-index: 50; }
.skip:focus { inset-inline-start: 12px; }
:focus-visible { outline: 2px solid var(--a2); outline-offset: 3px; border-radius: 6px; }

/* header */
.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.bar { display: flex; align-items: center; gap: 22px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; font-weight: 600; }
.who { display: flex; flex-direction: column; line-height: 1.15; font-size: 16px; }
.who small { font: 500 10.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.mark { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font: 600 16px var(--mono); color: var(--btn-fg); background: var(--btn-bg);
        transition: transform .35s var(--ease); }
.brand:hover .mark { transform: rotate(-8deg) scale(1.05); }
.links { display: flex; gap: 20px; margin-inline-start: auto; font-size: 14.5px; }
.links a { color: var(--muted); text-decoration: none; padding-block: 4px; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
           transition: color .2s, background-size .3s var(--ease); }
[dir="rtl"] .links a { background-position: 100% 100%; }
.links a:hover { color: var(--text); background-size: 100% 1px; }
.theme { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line2); background: transparent; color: var(--soft); border-radius: 9px;
         padding: 7px 11px; font: 500 13px var(--font); cursor: pointer; transition: border-color .2s, color .2s, transform .18s var(--ease); }
.theme:hover { color: var(--text); border-color: var(--text); }
.theme:active { transform: scale(.96); }
.theme .i { width: 15px; height: 15px; transition: transform .5s var(--ease); }
.theme:hover .i { transform: rotate(25deg); }
.theme .i-moon, :root[data-theme="light"] .theme .i-sun { display: none; }
:root[data-theme="light"] .theme .i-moon { display: inline; }
.langs { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: flex-end; padding-block: 0 9px; font-size: 12.5px; }
.langs a { color: var(--muted); text-decoration: none; transition: color .2s; }
.langs a:hover { color: var(--text); }
.langs a[aria-current] { color: var(--text); font-weight: 600; box-shadow: inset 0 -1.5px 0 var(--a2); }

/* buttons: lift on hover, press on click, icons that move with the intent */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 12px 20px; border-radius: 10px;
       border: 1px solid transparent; font: 600 15px/1.1 var(--font); text-decoration: none; cursor: pointer; white-space: nowrap;
       transition: transform .18s var(--ease), background-color .2s, border-color .2s, color .2s, box-shadow .25s var(--ease); }
.btn .i { width: 16px; height: 16px; flex: none; transition: transform .25s var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.97); transition-duration: .08s; }
.btn-primary { background: var(--btn-bg); color: var(--btn-fg); box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 10px 22px -12px var(--btn-bg); }
.btn-primary:hover { background: var(--btn-hover); box-shadow: 0 1px 0 rgba(255, 255, 255, .24) inset, 0 16px 30px -14px var(--btn-bg); }
.btn-secondary { background: transparent; color: var(--text); border-color: var(--line2); }
.btn-secondary:hover { border-color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
.btn-quiet { background: transparent; color: var(--soft); padding-inline: 6px; }
.btn-quiet:hover { color: var(--text); }
.btn-quiet span { padding-bottom: 2px; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px; transition: background-size .3s var(--ease); }
[dir="rtl"] .btn-quiet span { background-position: 100% 100%; }
.btn-quiet:hover span { background-size: 100% 1px; }
.btn:hover .i-arrow { transform: translateX(4px); }
[dir="rtl"] .i-arrow { transform: scaleX(-1); }
[dir="rtl"] .btn:hover .i-arrow { transform: scaleX(-1) translateX(4px); }
.btn:hover .i-down { animation: nudge .65s var(--ease); }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(3px); } }
.btn-sm { padding: 8px 13px; font-size: 13.5px; border-radius: 9px; gap: 7px; }
.btn-sm .i { width: 14px; height: 14px; }

/* hero */
.hero { padding-block: 88px 80px; border-bottom: 1px solid var(--line); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: 64px; align-items: center; }
.eyebrow { margin: 0 0 18px; font: 500 13px/1.5 var(--mono); color: var(--muted); }
.eyebrow::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--a2); margin-inline-end: 10px; vertical-align: 1px;
                   box-shadow: 0 0 0 4px color-mix(in srgb, var(--a2) 18%, transparent); }
h1 { margin: 0; font-size: clamp(34px, 4.6vw, 58px); line-height: 1.06; letter-spacing: -.025em; font-weight: 600; max-width: 17ch; text-wrap: balance; }
.lead { margin: 22px 0 0; font-size: clamp(17px, 1.5vw, 19px); line-height: 1.6; color: var(--soft); max-width: 60ch; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 30px; }
.stack { margin: 26px 0 0; font: 400 13px/1.7 var(--mono); color: var(--muted); max-width: 62ch; }
.stats { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); padding: 20px 24px 8px; }
.stats-h { margin: 0 0 4px; font: 500 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.stats dl { margin: 0; }
.stats dl > div { padding-block: 14px 13px; border-top: 1px solid var(--line); }
.stats dl > div:first-child { border-top: 0; }
.stats dt { font: 500 28px/1 var(--mono); letter-spacing: -.02em; color: var(--text); white-space: nowrap; }
.stats dd { margin: 7px 0 0; color: var(--soft); font-size: 14.5px; line-height: 1.4; }

/* sections */
.section { padding-block: 96px; }
.section.alt { background: var(--bg2); border-block: 1px solid var(--line); }
.sec-head { max-width: 760px; margin-bottom: 40px; }
.label { margin: 0 0 10px; font: 500 12.5px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--a2); }
h2 { margin: 0; font-size: clamp(28px, 3.1vw, 40px); line-height: 1.12; letter-spacing: -.02em; font-weight: 600; text-wrap: balance; }
.sub { margin: 16px 0 0; color: var(--soft); font-size: 18px; line-height: 1.6; }
.sub-h { margin: 56px 0 18px; font-size: 20px; }
h3 { margin: 0 0 8px; font-size: 19px; line-height: 1.3; font-weight: 600; }
h4 { margin: 0 0 6px; font-size: 17px; line-height: 1.35; font-weight: 600; transition: color .2s; }
[dir="rtl"] h1, [dir="rtl"] h2 { letter-spacing: 0; line-height: 1.3; }
[dir="rtl"] .label, [dir="rtl"] .stats-h, [dir="rtl"] .case dt, [dir="rtl"] .who small { letter-spacing: 0; }

/* the platform */
.results { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); overflow: hidden; }
.results > div { padding: 22px 22px 20px; border-inline-start: 1px solid var(--line); }
.results > div:first-child { border-inline-start: 0; }
.results dt { font: 500 30px/1 var(--mono); letter-spacing: -.02em; white-space: nowrap; }
.results dd { margin: 10px 0 0; color: var(--soft); font-size: 14.5px; line-height: 1.45; }
.parts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; }
.part { padding-block: 24px 26px; border-top: 1px solid var(--line); }
.part .num { display: block; margin-bottom: 12px; font: 500 12.5px var(--mono); color: var(--a2); }
.part p { margin: 0; color: var(--soft); font-size: 15.5px; line-height: 1.6; }
.part:hover h4 { color: var(--a2); }
.tags { margin: 12px 0 0 !important; font: 400 12.5px/1.6 var(--mono) !important; color: var(--muted) !important; }
.note { margin: 30px 0 0; color: var(--muted); font-size: 14.5px; }

/* projects */
.features { display: grid; gap: 22px; }
.feature { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 28px 40px; padding: 32px; border: 1px solid var(--line); border-radius: var(--radius);
           background: var(--card); transition: border-color .25s; }
.feature:hover { border-color: var(--line2); }
.kicker { margin: 0 0 10px; font: 500 12.5px/1.5 var(--mono); color: var(--muted); }
.feature h3 { font-size: 23px; }
.feature p { margin: 0 0 14px; color: var(--soft); }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ticks li { position: relative; padding-inline-start: 22px; color: var(--soft); font-size: 15.5px; line-height: 1.55; }
.ticks li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .55em; width: 9px; height: 5px; border-inline-start: 1.6px solid var(--a2);
                    border-bottom: 1.6px solid var(--a2); transform: rotate(-45deg); }
[dir="rtl"] .ticks li::before { transform: rotate(45deg); }
.highlight { align-self: start; padding: 22px 24px; border-radius: 10px; border: 1px solid var(--line); background: var(--card2); }
.highlight strong { display: block; font: 500 clamp(34px, 3.4vw, 46px)/1 var(--mono); letter-spacing: -.03em; white-space: nowrap; }
.highlight span { display: block; margin-top: 10px; color: var(--soft); font-size: 15px; }
.shots { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.shots img { width: 100%; height: 210px; object-fit: cover; object-position: top center; border-radius: 9px; border: 1px solid var(--line); background: #fff;
             transition: translate .35s var(--ease); }
.feature:hover .shots img { translate: 0 -3px; }
.grid { display: grid; gap: 20px; }
.more-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card, .skill, .case { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); transition: border-color .25s, translate .25s var(--ease); }
.card { padding: 24px; }
.card:hover, .skill:hover { border-color: var(--line2); translate: 0 -3px; }
.card p { margin: 0 0 12px; color: var(--soft); font-size: 15.5px; }
.card .ticks li { font-size: 14.5px; }
.card .kicker, .feature .kicker { font-size: 12.5px; color: var(--muted); margin-bottom: 10px; }

/* problem solving */
.cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.case { padding: 24px 26px; }
.case:hover { border-color: var(--line2); }
.case h3 { font-size: 18.5px; margin-bottom: 14px; }
.case dl { margin: 0; display: grid; gap: 12px; }
.case dt { margin-bottom: 5px; font: 500 11.5px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.case dd { margin: 0; color: var(--soft); font-size: 15px; line-height: 1.6; }
.case .res { padding-inline-start: 12px; border-inline-start: 2px solid var(--a2); }
.case .res dd { color: var(--text); font-weight: 500; }
.more-cases { margin-top: 20px; }
.more-cases summary { list-style: none; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; padding: 11px 18px; border: 1px solid var(--line2);
                      border-radius: 10px; font-weight: 600; font-size: 15px; transition: border-color .2s, transform .18s var(--ease), background-color .2s; }
.more-cases summary::-webkit-details-marker { display: none; }
.more-cases summary:hover { border-color: var(--text); transform: translateY(-2px); background: color-mix(in srgb, var(--text) 5%, transparent); }
.more-cases summary:active { transform: scale(.97); }
.more-cases summary .i { width: 16px; height: 16px; transition: transform .35s var(--ease); }
.more-cases[open] summary .i { transform: rotate(45deg); }
.more-cases[open] .cases { margin-top: 20px; animation: open .45s var(--ease); }
@keyframes open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* skills, international, about, principles */
.skills-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.skill { padding: 22px; }
.skill h3 { font-size: 17px; }
.skill p { margin: 0; color: var(--soft); font-size: 14.5px; line-height: 1.6; }
.two { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; align-items: start; }
.intl { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.intl li { display: grid; grid-template-columns: 11rem 1fr; gap: 18px; padding-block: 16px; border-bottom: 1px solid var(--line); }
.intl strong { font-weight: 600; font-size: 15.5px; }
.intl span { color: var(--soft); font-size: 15.5px; }
#about p { color: var(--soft); }
#about .label { color: var(--a2); }
#about .meta { color: var(--muted); }
.facts { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.facts li { padding: 7px 12px; border: 1px solid var(--line2); border-radius: 8px; font-size: 13.5px; color: var(--soft); }
.job h3 { font-size: 26px; margin-bottom: 18px; }
.job h4 { font-size: 18px; }
.meta { margin: 0 0 14px; font: 400 13px/1.5 var(--mono); color: var(--muted); }
.how-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.principle { padding-top: 18px; border-top: 2px solid var(--a2); }
.principle p { margin: 0; color: var(--soft); font-size: 15.5px; }

/* contact and footer */
.mail { margin: 8px 0 26px; font: 500 clamp(22px, 3.4vw, 42px)/1.15 var(--mono); letter-spacing: -.02em; }
.mail a { display: inline-flex; align-items: center; gap: 14px; padding-bottom: 6px; text-decoration: none; background: linear-gradient(var(--a2), var(--a2)) no-repeat 0 100% / 0 2px;
          transition: background-size .4s var(--ease); }
.mail a:hover { background-size: 100% 2px; }
.mail .i { width: .7em; height: .7em; transition: transform .3s var(--ease); }
.mail a:hover .i { transform: translateX(6px); }
.facts.inline { margin-top: 26px; }
.foot { padding-block: 32px 40px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13.5px; }
.foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; }
.foot p { margin: 0; }
.foot .langs { padding: 0; }

/* sections fade in as they arrive (only when JavaScript runs and motion is welcome) */
.motion [data-reveal] { opacity: 0; }
.motion [data-reveal].in { animation: rise .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .motion [data-reveal] { opacity: 1; }
}

/* narrower screens */
@media (max-width: 1080px) {
  .links { display: none; } .bar .theme { margin-inline-start: auto; }
  .skills-grid, .how-grid, .more-grid, .parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .results > div:nth-child(3) { border-inline-start: 0; }
  .results > div:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 860px) {
  .hero-grid, .two, .feature, .cases { grid-template-columns: 1fr; }
  .hero { padding-block: 56px 52px; } .section { padding-block: 72px; } .feature { padding: 24px; }
  .intl li { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 600px) {
  .parts, .more-grid, .skills-grid, .how-grid, .results { grid-template-columns: 1fr; }
  .results > div { border-inline-start: 0; border-top: 1px solid var(--line); }
  .results > div:first-child { border-top: 0; }
  .bar { gap: 12px; } .who small { display: none; }
  .cta .btn { flex: 1 1 auto; }
}