/* RASM — jasa pembuatan website, styles */

/* Self-hosted fonts (Google Fonts, OFL), arabic + latin subsets */
/* Fraunces latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/fraunces-63f1654d.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Fraunces latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/fraunces-63f1654d.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Fraunces latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/fraunces-63f1654d.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Mono latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-d7731959.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Mono latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-8d0aead6.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Sans latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-118b756c.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Sans latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-118b756c.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Sans latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-118b756c.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Sans latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-118b756c.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Sans Arabic arabic */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-arabic-fb7c61ac.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* IBM Plex Sans Arabic latin */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-arabic-69c9bb5d.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Sans Arabic arabic */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-arabic-6fbb1d0f.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* IBM Plex Sans Arabic latin */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-arabic-eda81446.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Sans Arabic arabic */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-arabic-2bea59b9.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* IBM Plex Sans Arabic latin */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-arabic-88a0f109.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Sans Arabic arabic */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-arabic-dbd75799.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* IBM Plex Sans Arabic latin */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-arabic-a2f8e395.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Sans Arabic arabic */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-arabic-d381fdf4.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* IBM Plex Sans Arabic latin */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-arabic-d6eeedda.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Noto Kufi Arabic arabic */
@font-face {
  font-family: 'Noto Kufi Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/noto-kufi-arabic-e71fcafa.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* Noto Kufi Arabic latin */
@font-face {
  font-family: 'Noto Kufi Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/noto-kufi-arabic-778c8c90.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Noto Kufi Arabic arabic */
@font-face {
  font-family: 'Noto Kufi Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/noto-kufi-arabic-e71fcafa.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* Noto Kufi Arabic latin */
@font-face {
  font-family: 'Noto Kufi Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/noto-kufi-arabic-778c8c90.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Noto Kufi Arabic arabic */
@font-face {
  font-family: 'Noto Kufi Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/noto-kufi-arabic-e71fcafa.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* Noto Kufi Arabic latin */
@font-face {
  font-family: 'Noto Kufi Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/noto-kufi-arabic-778c8c90.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root{
  --canvas:#14100b;
  --canvas-2:#1a140d;
  --panel:#1f1811;
  --panel-2:#241c13;
  --accent:#c9a24b;
  --accent-hover:#e0bc63;
  --accent-muted:rgba(201,162,75,.35);
  --accent-dim:rgba(201,162,75,.14);
  --text-primary:#f3ecdf;
  --text-secondary:#b9ae9c;
  --text-tertiary:#8a7f6d;
  --line:rgba(201,162,75,.18);
  --line-strong:rgba(201,162,75,.4);

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --t-fast: .3s;
  --t-med: .6s;
  --t-slow: 1.1s;

  --tshadow: 0 1px 2px rgba(5,5,10,.9), 0 3px 14px rgba(5,5,10,.7), 0 10px 40px rgba(5,5,10,.7);

  --display-ar: 'Noto Kufi Arabic', 'Fraunces', sans-serif;
  --display-en: 'Fraunces', Georgia, serif;
  --body-ar: 'IBM Plex Sans Arabic', 'IBM Plex Sans', sans-serif;
  --body-en: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Sans', system-ui, sans-serif;

  color-scheme: dark;
}

/* ---------- reset & base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;overflow-x:hidden}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--canvas);
  color:var(--text-primary);
  font-family:var(--body-ar);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
html[lang="en"] body{ font-family:var(--body-en); }

h1,h2,h3,h4{
  font-family:var(--display-ar);
  font-weight:700;
  line-height:1.25;
  margin:0 0 .5em;
  letter-spacing:.005em;
}
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3, html[lang="en"] h4{
  font-family:var(--display-en);
  font-weight:600;
  letter-spacing:-0.01em;
}

p{ margin:0 0 1em; color:var(--text-secondary); max-width:60ch }
a{ color:inherit; text-decoration:none }
img{ max-width:100%; display:block }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
ul{ margin:0; padding:0; list-style:none }
label,.label{ font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-tertiary) }

/* language toggle visibility */
[data-lang]{ }
html:not([lang="en"]) [data-lang="en"]{ display:none !important }
html[lang="en"] [data-lang="ar"]{ display:none !important }

.skip-link{
  position:absolute; inset-inline-start:1rem; top:-4rem;
  background:var(--accent); color:#14100b; padding:.75rem 1.25rem;
  border-radius:.4rem; z-index:200; transition:top var(--t-fast) var(--ease-out);
  font-family:var(--mono); font-size:.85rem;
}
.skip-link:focus{ top:1rem }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px }

.wrap{ max-width:1180px; margin-inline:auto; padding-inline:1.5rem }
@media (min-width:820px){ .wrap{ padding-inline:2.5rem } }

section{ position:relative; padding-block:5.5rem }
@media (min-width:820px){ section{ padding-block:8rem } }

.kicker{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); margin-bottom:1.1em;
}
.kicker::before{ content:""; width:1.6em; height:1px; background:var(--accent) }

.section-head{ max-width:44rem; margin-bottom:3rem }
.section-head h1, .section-head h2{ font-size:clamp(1.9rem,3.6vw,2.7rem) }
.section-head p{ font-size:1.05rem }

/* ---------- background environment (whole-page world) ---------- */
.env{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 50% at 20% -10%, rgba(201,162,75,.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 110%, rgba(201,162,75,.08) 0%, transparent 60%),
    var(--canvas);
}
.env::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(1px 1px at 20% 30%, rgba(201,162,75,.5) 0, transparent 60%),
    radial-gradient(1px 1px at 70% 60%, rgba(201,162,75,.35) 0, transparent 60%),
    radial-gradient(1.5px 1.5px at 40% 80%, rgba(201,162,75,.3) 0, transparent 60%),
    radial-gradient(1px 1px at 90% 20%, rgba(201,162,75,.4) 0, transparent 60%),
    radial-gradient(1px 1px at 55% 15%, rgba(201,162,75,.3) 0, transparent 60%);
  animation: driftGlow 70s linear infinite;
  opacity:.5;
}
@keyframes driftGlow{ from{ transform:translateY(0) } to{ transform:translateY(-60px) } }
body.paused .env::before{ animation-play-state:paused }

/* ---------- cursor glow (desktop, fine pointer only) ---------- */
.cursor-glow{
  position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:0; transition:opacity .5s ease;
  background:
    radial-gradient(circle 260px at var(--cx,50%) var(--cy,50%), rgba(201,162,75,.20), transparent 60%),
    radial-gradient(circle 60px at var(--cx,50%) var(--cy,50%), rgba(224,188,99,.30), transparent 70%);
  mix-blend-mode:screen;
}
.cursor-glow.is-active{ opacity:1 }
@media (hover:none), (pointer:coarse){ .cursor-glow{ display:none } }
@media (prefers-reduced-motion:reduce){ .cursor-glow{ display:none } }

/* ---------- nav ---------- */
.nav{
  position:fixed; inset-inline:0; top:0; z-index:250;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 1.5rem;
  background:linear-gradient(rgba(20,16,11,.97), rgba(20,16,11,.94) 80%, rgba(20,16,11,.86));
  backdrop-filter:blur(6px);
  transition:background var(--t-fast) var(--ease-out);
}
@media (min-width:820px){ .nav{ padding:1.4rem 2.5rem } }

.brand{ display:flex; align-items:center; gap:.6em; font-family:var(--display-ar); font-size:1.4rem; color:var(--text-primary) }
html[lang="en"] .brand{ font-family:var(--display-en) }
.brand svg{ width:1.6em; height:1.6em; flex:none }

.nav-right{ display:flex; align-items:center; gap:.9rem }

.lang-toggle{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.06em;
  border:1px solid var(--line-strong); border-radius:2em; padding:.45em 1em;
  color:var(--text-secondary); transition:all var(--t-fast) var(--ease-out);
}
.lang-toggle:hover{ color:var(--accent); border-color:var(--accent) }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--mono); font-size:.82rem; letter-spacing:.04em;
  padding:.85em 1.6em; border-radius:2em; white-space:nowrap;
}
html[lang="en"] .btn{ font-family:var(--body-en); font-weight:600; font-size:.9rem; letter-spacing:.01em }
.btn{
  transition:transform var(--t-fast) var(--ease-out), background var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
  text-shadow:none;
}
.btn-primary{ background:var(--accent); color:#17130c; box-shadow:0 8px 30px -10px rgba(201,162,75,.6) }
.btn-primary:hover{ background:var(--accent-hover); transform:translateY(-2px); box-shadow:0 12px 36px -8px rgba(201,162,75,.75) }
.btn-ghost{ border:1px solid var(--line-strong); color:var(--text-primary) }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px) }
.btn-whatsapp svg{ width:1.1em; height:1.1em; flex:none }
@media (pointer:coarse){ .btn{ min-height:44px } }

@media (max-width:560px){
  .nav .nav-right > .btn-primary{ display:none }
}

/* ---------- kinetic menu button ---------- */
.nav-menu-btn{
  display:flex; align-items:center; gap:.6em;
  padding:.55em 1em .55em 1.3em; border:1px solid var(--line-strong); border-radius:2em;
  color:var(--text-primary); transition:border-color var(--t-fast), background var(--t-fast);
}
[dir="ltr"] .nav-menu-btn{ padding:.55em 1.3em .55em 1em }
.nav-menu-btn:hover{ border-color:var(--accent) }
.menu-btn-text{ position:relative; display:inline-grid; height:1.1em; overflow:hidden; font-family:var(--mono); font-size:.82rem; letter-spacing:.04em; white-space:nowrap }
.menu-btn-open, .menu-btn-close{
  grid-area:1/1; display:block; line-height:1.1em; transition:transform .5s var(--ease-out);
}
.menu-btn-close{ transform:translateY(100%) }
.nav-menu-btn[aria-expanded="true"] .menu-btn-open{ transform:translateY(-100%) }
.nav-menu-btn[aria-expanded="true"] .menu-btn-close{ transform:translateY(0) }
.menu-btn-icon{ display:flex; width:.9rem; height:.9rem; transition:transform .5s var(--ease-out) }
.menu-btn-icon svg{ width:100%; height:100% }
.nav-menu-btn[aria-expanded="true"] .menu-btn-icon{ transform:rotate(225deg) }
@media (prefers-reduced-motion:reduce){ .menu-btn-open,.menu-btn-close,.menu-btn-icon{ transition:none } }

/* ---------- fullscreen kinetic menu ---------- */
.site-menu{
  position:fixed; inset:0; z-index:200;
  visibility:hidden;
}
.site-menu[data-menu="open"]{ visibility:visible }

.site-menu-overlay{
  position:absolute; inset:0; background:rgba(8,6,4,.55);
  opacity:0; transition:opacity .5s var(--ease-out);
}
.site-menu[data-menu="open"] .site-menu-overlay{ opacity:1 }

.site-menu-panel{
  position:absolute; inset-block:0; inset-inline-end:0; width:min(100%,560px);
  overflow:hidden;
  transform:translateX(110%);
  transition:transform .6s var(--ease-out);
}
[dir="rtl"] .site-menu-panel{ transform:translateX(-110%) }
.site-menu[data-menu="open"] .site-menu-panel{ transform:translateX(0) }

.menu-bg{ position:absolute; inset:0; z-index:0 }
.backdrop-layer{
  position:absolute; inset:0; transform:translateX(101%);
  transition:transform .6s var(--ease-out);
}
[dir="rtl"] .backdrop-layer{ transform:translateX(-101%) }
.site-menu[data-menu="open"] .backdrop-layer{ transform:translateX(0) }
.backdrop-layer.l1{ background:#1c150c; transition-delay:0s }
.backdrop-layer.l2{ background:#191309; transition-delay:.08s }
.backdrop-layer.l3{ background:linear-gradient(160deg,#17110a,#0d0a06); transition-delay:.16s; box-shadow:inset 0 0 0 1px rgba(255,255,255,.04) }

.ambient-shapes{ position:absolute; inset:0; overflow:hidden; opacity:.9 }
.bg-shape{ position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity .3s }
.bg-shape.active{ opacity:1 }
.bg-shape .shape-el{ opacity:0; transform:scale(.5); transform-origin:center; transition:transform .5s var(--ease-out), opacity .5s var(--ease-out) }
.bg-shape.active .shape-el{ opacity:1; transform:scale(1) }
.bg-shape .shape-el:nth-child(1){ transition-delay:0s }
.bg-shape .shape-el:nth-child(2){ transition-delay:.06s }
.bg-shape .shape-el:nth-child(3){ transition-delay:.12s }
.bg-shape .shape-el:nth-child(4){ transition-delay:.18s }

.site-menu-list{
  position:relative; z-index:1; min-height:100%;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-content:safe center;
  gap:.7rem; padding-inline:2.4rem; padding-block:5rem;
  overflow-y:auto; list-style:none; margin:0;
}
.site-menu-item{ overflow:hidden }
.site-menu-item a{
  display:flex; align-items:flex-start; gap:.85rem; height:100%;
  padding:1rem 1.05rem; border-radius:1rem;
  border:1px solid var(--line); background:rgba(255,255,255,.02);
  color:var(--text-primary);
  opacity:0; transform:translateY(18px);
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out),
    border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
  transition-delay:calc(var(--mi,0) * 60ms + .1s), calc(var(--mi,0) * 60ms + .1s), 0s, 0s;
}
.site-menu[data-menu="open"] .site-menu-item a{ opacity:1; transform:translateY(0) }
.site-menu-item a:hover{ border-color:var(--line-strong); background:var(--accent-dim) }
.site-menu-icon{
  flex:none; width:2.5rem; height:2.5rem; border-radius:.7rem;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-dim); color:var(--accent);
  transition:transform var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.site-menu-icon svg{ width:1.25rem; height:1.25rem }
.site-menu-item a:hover .site-menu-icon{ transform:rotate(-8deg) scale(1.08); background:var(--accent-muted) }
.site-menu-text{ display:flex; flex-direction:column; gap:.25rem; min-width:0 }
.site-menu-title{
  font-family:var(--display-ar); font-weight:700; font-size:1.05rem; line-height:1.25;
  transition:color var(--t-fast);
}
html[lang="en"] .site-menu-title{ font-family:var(--display-en); font-weight:600 }
.site-menu-item a:hover .site-menu-title{ color:var(--accent) }
.site-menu-tagline{ font-size:.78rem; line-height:1.45; color:var(--text-secondary) }
@media (prefers-reduced-motion:reduce){
  .site-menu-overlay,.site-menu-panel,.backdrop-layer,.bg-shape,.bg-shape .shape-el,
  .site-menu-item a,.site-menu-icon{ transition:none }
}
@media (min-width:640px){
  .site-menu-panel{ width:min(94%,680px) }
}
.site-menu-panel{ display:flex; flex-direction:column }
.site-menu-list{ flex:1 1 auto; min-height:0 }
.site-menu-foot{
  position:relative; z-index:1; flex:none;
  display:flex; flex-direction:column; align-items:center; gap:.9rem;
  padding:0 2.4rem 2.4rem;
  opacity:0; transform:translateY(14px);
  transition:opacity .6s var(--ease-out) .55s, transform .6s var(--ease-out) .55s;
}
.site-menu[data-menu="open"] .site-menu-foot{ opacity:1; transform:none }
.site-menu-cta{
  width:100%; display:flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.95rem 1.2rem; border-radius:999px;
  background:var(--accent); color:#14100b; font-weight:700; font-size:1rem; text-decoration:none;
  box-shadow:0 10px 30px -10px rgba(201,162,75,.6);
  transition:transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.site-menu-cta:hover{ transform:translateY(-2px); box-shadow:0 14px 34px -10px rgba(201,162,75,.75) }
.site-menu-meta{ display:flex; align-items:center; gap:.7rem; margin:0; font-size:.85rem; color:var(--text-secondary) }
.site-menu-meta a{ color:var(--text-secondary); text-decoration:none }
.site-menu-meta a:hover{ color:var(--accent) }
@media (max-width:560px){
  .site-menu-panel{ width:100%; overflow-y:auto; -webkit-overflow-scrolling:touch }
  .site-menu-list{
    grid-template-columns:repeat(2,minmax(0,1fr)); align-content:start;
    padding-inline:1.1rem; padding-block:5.6rem 1.1rem; gap:.6rem; min-height:auto; overflow:visible;
  }
  .site-menu-item a{
    flex-direction:column; align-items:flex-start; justify-content:space-between; gap:.7rem;
    padding:.95rem .95rem 1rem; min-height:6.4rem; border-radius:1.1rem;
  }
  .site-menu-icon{ width:2.3rem; height:2.3rem; border-radius:.65rem }
  .site-menu-icon svg{ width:1.15rem; height:1.15rem }
  .site-menu-title{ font-size:1.08rem }
  .site-menu-tagline{ display:none }
  .site-menu-foot{ padding:.4rem 1.1rem 1.8rem }
}
@media (max-width:560px) and (max-height:640px){
  .site-menu-list{ padding-top:4.8rem }
  .site-menu-item a{ min-height:5.4rem; padding:.8rem .85rem }
}

/* ---------- hero ---------- */
.hero{
  min-height:100svh; display:flex; align-items:center; justify-content:center;
  position:relative; padding-block:7rem 4rem; overflow:hidden;
  background:var(--canvas);
}
.hero-canvas{ position:absolute; inset:0; z-index:0; width:100%; height:100% }

.hero-scrim{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 50% 42%, rgba(10,8,5,0) 40%, rgba(10,8,5,.55) 100%);
}

.hero-inner{ position:relative; z-index:1; width:100%; will-change:transform,opacity }
.hero-canvas{ will-change:transform }
.hero-inner--centered{ text-align:center; display:flex; flex-direction:column; align-items:center }
.hero-inner--centered .lede{ margin-inline:auto }
.hero-inner--centered .hero-cta{ justify-content:center }

.hero-badge{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--mono); font-size:.76rem; letter-spacing:.06em;
  color:var(--text-primary); background:rgba(201,162,75,.08);
  border:1px solid var(--accent-muted); border-radius:2em; padding:.5em 1.1em;
  margin-bottom:1.6em; backdrop-filter:blur(6px);
  opacity:0; transform:translateY(14px); animation:riseIn .9s var(--ease-out) .1s forwards;
}
.hero-badge svg{ width:1em; height:1em; color:var(--accent) }

.hero .hero-title{
  font-size:clamp(2.4rem,6vw,4.6rem); max-width:16em; text-shadow:var(--tshadow);
  animation:riseInY 1s var(--ease-out) .1s both;
}
.hero .lede{
  color:var(--text-secondary); font-size:clamp(1rem,1.6vw,1.2rem); max-width:38em; margin-top:.4em;
  text-shadow:0 2px 16px rgba(5,5,10,.7);
  opacity:0; transform:translateY(18px); animation:riseIn 1s var(--ease-out) .45s forwards;
}
.hero-cta{
  display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.2rem;
  opacity:0; transform:translateY(16px); animation:riseIn 1s var(--ease-out) .65s forwards;
}
@keyframes riseIn{ to{ opacity:1; transform:none } }
@keyframes riseInY{ from{ transform:translateY(22px) } to{ transform:none } }
@media (prefers-reduced-motion: reduce){
  .hero-badge,.hero .hero-title,.hero .lede,.hero-cta{ animation:none; opacity:1; transform:none }
}

.scroll-cue{
  position:absolute; bottom:1.8rem; inset-inline-start:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.5em;
  color:var(--text-tertiary); font-family:var(--mono); font-size:.7rem; letter-spacing:.1em;
  z-index:1;
}
[dir="rtl"] .scroll-cue{ transform:translateX(50%) }
.scroll-cue .chevron{ width:1px; height:2.2rem; background:linear-gradient(var(--accent), transparent); animation:cueMove 2.2s ease-in-out infinite; animation-delay:-1.1s }
@keyframes cueMove{ 0%,100%{ opacity:.2 } 50%{ opacity:1 } }
body.paused .scroll-cue .chevron{ animation-play-state:paused }
@media (prefers-reduced-motion:reduce){ .scroll-cue .chevron{ animation:none; opacity:.6 } }

/* ---------- reveal-on-scroll ---------- */
.reveal{ opacity:0; transform:translateY(28px) scale(.96); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out) }
.reveal.in{ opacity:1; transform:none }
.reveal-stagger > *{ transition-delay:calc(var(--i,0) * 90ms) }
.reveal-stagger.in > *{ transition-delay:calc(var(--i,0) * 90ms) }
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-stagger > *{ opacity:1 !important; transform:none !important; filter:none !important; transition:none !important }
}

/* ---------- divider ---------- */
.divider{ height:1px; background:linear-gradient(to var(--edge,right), transparent, var(--line-strong) 50%, transparent) }

/* ---------- services (interactive tabs) ---------- */
.services-head{
  display:flex; flex-direction:column; gap:1.6rem; margin-bottom:3rem;
}
@media (min-width:980px){ .services-head{ flex-direction:row; align-items:flex-end; justify-content:space-between; gap:3rem } }

.services-tag{ display:flex; align-items:center; gap:.8em; flex:none }
.services-tag-num{
  width:2.4rem; height:2.4rem; border-radius:50%; flex:none;
  background:var(--accent); color:#17130c; font-family:var(--mono); font-weight:700; font-size:.85rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 16px rgba(201,162,75,.35);
}
.services-tag-line{ width:2.6rem; height:1px; background:var(--line-strong) }
.services-tag-label{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.08em; color:var(--text-secondary);
  border:1px solid var(--line-strong); border-radius:2em; padding:.4em 1em;
}
.services-head-text{ max-width:34rem }
.services-head-text h1, .services-head-text h2{ font-size:clamp(1.9rem,3.4vw,2.6rem) }

.services-tabs{ display:grid; gap:1.5rem; grid-template-columns:1fr }
@media (min-width:980px){ .services-tabs{ grid-template-columns:1.3fr 1fr; align-items:stretch } }

.services-tab-list{ display:flex; flex-direction:column; gap:.9rem }

.service-tab{
  border-radius:1.1rem; border:1px solid var(--line); background:rgba(255,255,255,.015);
  transition:border-color var(--t-fast) var(--ease-out), background var(--t-fast);
}
.service-tab.is-active{ background:var(--panel); border-color:var(--accent-muted); box-shadow:0 18px 40px -22px rgba(0,0,0,.7) }
.service-tab:not(.is-active):hover{ border-color:var(--line-strong); background:rgba(255,255,255,.03) }

.service-tab-head{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.3rem 1.5rem; text-align:start;
}
.service-tab-left{ display:flex; align-items:center; gap:1em }
.service-tab-num{
  font-family:var(--mono); font-size:.76rem; font-weight:700; padding:.3em .6em; border-radius:.4em;
  background:rgba(255,255,255,.05); color:var(--text-tertiary); transition:all var(--t-fast);
}
.service-tab.is-active .service-tab-num{ background:var(--accent); color:#17130c }
.service-tab-title{ font-size:1.08rem; font-weight:600; color:var(--text-secondary) }
.service-tab.is-active .service-tab-title{ color:var(--text-primary) }
.service-tab-plus{
  flex:none; width:1.7rem; height:1.7rem; border-radius:50%; position:relative;
  background:rgba(255,255,255,.05); transition:all var(--t-fast) var(--ease-out);
}
.service-tab-plus::before,.service-tab-plus::after{
  content:""; position:absolute; background:var(--text-tertiary); border-radius:2px; transition:all var(--t-fast);
}
.service-tab-plus::before{ inset-inline:.45rem; top:.82rem; height:2px }
.service-tab-plus::after{ inset-block:.45rem; inset-inline-start:.82rem; width:2px }
.service-tab.is-active .service-tab-plus{ background:var(--accent); transform:rotate(45deg) }
.service-tab.is-active .service-tab-plus::before,.service-tab.is-active .service-tab-plus::after{ background:#17130c }

.service-tab-body{
  display:grid; grid-template-rows:0fr; opacity:0;
  transition:grid-template-rows .45s var(--ease-out), opacity .35s var(--ease-out);
}
.service-tab.is-active .service-tab-body{ grid-template-rows:1fr; opacity:1 }
.service-tab-body-inner{ overflow:hidden }
.service-tab-tagline{
  margin:0 1.5rem 0; padding-top:0; font-family:var(--mono); font-size:.76rem;
  color:var(--accent); letter-spacing:.02em;
}
.service-tab.is-active .service-tab-tagline{ padding-top:.2rem }
.service-tab-desc{ margin:.6em 1.5rem 0; font-size:.9rem; color:var(--text-secondary) }
.service-tab-deliverables{
  display:grid; grid-template-columns:1fr; gap:.6em;
  margin:1.1rem 1.5rem 1.5rem; padding-top:1rem; border-top:1px solid var(--line);
}
@media (min-width:480px){ .service-tab-deliverables{ grid-template-columns:1fr 1fr } }
.service-tab-deliverables span{ display:flex; align-items:center; gap:.6em; font-size:.82rem; color:var(--text-secondary) }
.service-tab-deliverables span::before{ content:""; width:.4rem; height:.4rem; border-radius:50%; background:var(--accent); flex:none }

.service-preview{
  position:relative; overflow:hidden; border-radius:1.25rem; padding:2rem;
  background:linear-gradient(165deg,#211809,#130e08); border:1px solid var(--line);
  display:flex; flex-direction:column;
}
.service-preview-glow{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(120% 80% at 20% 0%, rgba(201,162,75,.12) 0%, transparent 60%);
}
.service-preview-top{ position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; margin-bottom:1.6rem }
.service-preview-kicker{ font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent) }
.service-preview-count{ font-family:var(--mono); font-size:.68rem; color:var(--text-tertiary); background:rgba(255,255,255,.06); padding:.3em .7em; border-radius:.4em }

.service-preview-canvas{
  position:relative; z-index:1; height:11rem; border-radius:1rem; margin-bottom:1.6rem;
  background:rgba(0,0,0,.28); border:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:22px 22px;
}
.service-preview-icon{
  width:3.4rem; height:3.4rem; border-radius:1rem; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,var(--accent-muted),rgba(255,255,255,.04)); border:1px solid var(--accent-muted);
  color:var(--accent); box-shadow:0 0 24px rgba(201,162,75,.18);
}
.service-preview-icon svg{ width:1.6rem; height:1.6rem }
.service-preview-name{ font-size:.94rem; font-weight:700; color:var(--text-primary) }
.service-preview-ready{ font-family:var(--mono); font-size:.66rem; color:var(--text-tertiary) }

.service-preview-tagline{ position:relative; z-index:1; font-size:1.15rem; font-weight:700; color:var(--text-primary); margin:0 0 .5em }
.service-preview-desc{ position:relative; z-index:1; font-size:.86rem; color:var(--text-secondary); margin:0 0 1.6rem }

.service-preview-bottom{
  position:relative; z-index:1; margin-top:auto; padding-top:1.2rem; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.service-preview-cta{ font-family:var(--mono); font-size:.8rem; font-weight:700; color:var(--accent); display:inline-flex; align-items:center; gap:.4em; transition:gap var(--t-fast) }
.service-preview-cta:hover{ gap:.65em }
.service-preview-brand{ font-family:var(--mono); font-size:.68rem; color:var(--text-tertiary) }

/* ---------- process: pinboard ---------- */
.pinboard{ position:relative; margin-top:1rem }
@media (min-width:980px){ .pinboard{ height:850px; margin-top:2.5rem } }
@media (max-width:979px){ .pinboard{ display:flex; flex-direction:column; gap:1.6rem } }

.pinboard-path{ display:none }
@media (min-width:980px){
  .pinboard-path{ display:block; position:absolute; inset:0; width:100%; height:100%; z-index:0 }
  .pinboard-path path{
    stroke:var(--accent-muted); stroke-width:2; fill:none;
    stroke-dasharray:8 6; stroke-linecap:round; vector-effect:non-scaling-stroke;
    animation:pinDash 3s linear infinite;
  }
}
@keyframes pinDash{ to{ stroke-dashoffset:-140 } }
body.paused .pinboard-path path{ animation-play-state:paused }
@media (prefers-reduced-motion:reduce){ .pinboard-path path{ animation:none } }

.pin-card{
  position:relative; z-index:1; opacity:0; transform:translateY(28px);
  background:#ece2ce; border-radius:1.4rem; padding:1.8rem 1.6rem 1.7rem; text-align:center;
  box-shadow:0 18px 36px -14px rgba(0,0,0,.6);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out), box-shadow var(--t-fast);
}
@media (min-width:980px){ .pin-card{ position:absolute; width:280px } }
.pin-card--1{ top:0; left:15% }
.pin-card--2{ top:120px; right:15% }
.pin-card--3{ top:450px; left:15% }
.pin-card--4{ top:570px; right:10% }

@media (min-width:980px){
  .pinboard .pin-card--1.reveal.in{ transform:rotate(1.5deg) }
  .pinboard .pin-card--2.reveal.in{ transform:rotate(-1.5deg) }
  .pinboard .pin-card--3.reveal.in{ transform:rotate(1.5deg) }
  .pinboard .pin-card--4.reveal.in{ transform:rotate(-1.5deg) }
  .pinboard .pin-card--1.reveal.in:hover{ transform:rotate(1.5deg) scale(1.04); box-shadow:0 26px 48px -16px rgba(0,0,0,.65) }
  .pinboard .pin-card--2.reveal.in:hover{ transform:rotate(-1.5deg) scale(1.04); box-shadow:0 26px 48px -16px rgba(0,0,0,.65) }
  .pinboard .pin-card--3.reveal.in:hover{ transform:rotate(1.5deg) scale(1.04); box-shadow:0 26px 48px -16px rgba(0,0,0,.65) }
  .pinboard .pin-card--4.reveal.in:hover{ transform:rotate(-1.5deg) scale(1.04); box-shadow:0 26px 48px -16px rgba(0,0,0,.65) }
}
@media (max-width:979px){ .pin-card{ position:static !important; width:100% } }

.pin-dot{ display:block; width:1.7rem; height:1.7rem; margin:0 auto .9rem; color:var(--accent) }
.pin-dot svg{ width:100%; height:100% }
.pin-num{ display:block; font-family:var(--mono); font-size:1.7rem; font-weight:700; color:var(--accent); margin-bottom:.35em }
.pin-card h3{ font-size:1.2rem; color:#1c160e; margin-bottom:.4em }
.pin-card p{ font-size:.86rem; color:#5f563f; margin:0; max-width:none }

/* ---------- why choose us: flow scroll ---------- */
.flow-wrap{ position:relative }

.flow-page{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:flex; align-items:stretch;
}
.flow-page--a{ background:linear-gradient(155deg,#241a10,#150f08) }
.flow-page--b{ background:var(--canvas-2) }
.flow-page--c{ background:var(--canvas) }

.flow-inner{
  width:100%; display:flex; flex-direction:column; justify-content:center; gap:1.5rem;
  padding:6rem 6vw 4rem;
  transform-origin:bottom left; will-change:transform;
}
[dir="rtl"] .flow-inner{ transform-origin:bottom right }

.flow-hr{ border:none; border-top:1px solid var(--line); margin:0; width:100% }

.flow-kicker{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin:0;
}

.flow-headline{
  margin:0; font-family:var(--display-en); font-weight:700; text-transform:uppercase;
  font-size:clamp(2.6rem,8vw,6.5rem); line-height:.95; letter-spacing:-0.01em; color:var(--text-primary);
}
html[lang="ar"] .flow-headline{ font-family:var(--display-ar); font-weight:700; text-transform:none; line-height:1.2 }

.flow-lede{ margin:0; max-width:52ch; font-size:clamp(1rem,1.6vw,1.35rem); color:var(--text-secondary) }

.flow-pair{ display:flex; flex-direction:column; gap:2.4rem }
@media (min-width:820px){
  .flow-pair{ flex-direction:row; gap:0 }
  .flow-pair-item{ flex:1; padding-inline-end:4vw }
  .flow-pair-item + .flow-pair-item{ border-inline-start:1px solid var(--line); padding-inline-start:4vw }
}
.flow-pair-item .flow-lede{ max-width:none }
.flow-pair-title{
  margin:0 0 .5em; font-family:var(--display-en); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.8rem,4vw,3.4rem); line-height:1; letter-spacing:-0.01em; color:var(--text-primary);
}
html[lang="ar"] .flow-pair-title{ font-family:var(--display-ar); font-weight:700; text-transform:none; line-height:1.25 }

.flow-quote{
  margin:0 0 0 auto; max-width:44ch; font-family:var(--display-ar); font-size:clamp(1.1rem,1.8vw,1.5rem);
  color:var(--text-primary); text-align:end;
}
html[lang="en"] .flow-quote{ font-family:var(--display-en) }

@media (prefers-reduced-motion:reduce){
  .flow-inner{ transform:none !important }
}

/* ---------- stats ---------- */
.stats-grid{ display:grid; gap:1.5rem; grid-template-columns:1fr }
@media (min-width:700px){ .stats-grid{ grid-template-columns:1fr 1fr } }
.stat{
  background:var(--panel); border:1px solid var(--line); border-radius:1rem; padding:2.4rem 2rem;
}
.stat .num{
  font-family:var(--display-en); font-size:clamp(2.6rem,6vw,4rem); color:var(--accent); line-height:1;
  display:block; margin-bottom:.35em;
}
.stat p{ margin:0; font-size:.98rem }

.gallery-lede{ margin-top:2.5rem; font-size:1rem; color:var(--text-secondary); max-width:44ch }

.tilt-grid{
  display:grid; gap:1.4rem; grid-template-columns:1fr; margin-top:1.6rem;
}
@media (min-width:700px){ .tilt-grid{ grid-template-columns:repeat(3,1fr) } }

.tilt-card{ perspective:1200px }
.tilt-card-inner{
  position:relative; border-radius:1.25rem; overflow:hidden; aspect-ratio:4/5;
  border:1px solid var(--line); transform-style:preserve-3d; will-change:transform;
  transition:transform .15s var(--ease-out), box-shadow var(--t-fast);
  box-shadow:0 20px 45px -22px rgba(0,0,0,.6);
}
.tilt-card:hover .tilt-card-inner{ box-shadow:0 30px 60px -20px rgba(0,0,0,.75) }
.tilt-card-inner img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:translateZ(0) scale(1.02); transition:transform .6s var(--ease-out);
}
.tilt-card:hover .tilt-card-inner img{ transform:translateZ(0) scale(1.08) }
.tilt-card-scrim{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(8,6,4,.92) 0%, rgba(8,6,4,.35) 55%, rgba(8,6,4,.1) 100%);
}
.tilt-card-sheen{
  position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s;
  background:radial-gradient(500px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.16) 0%, transparent 55%);
  mix-blend-mode:screen;
}
.tilt-card:hover .tilt-card-sheen{ opacity:1 }
.tilt-card-body{
  position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; justify-content:flex-end;
  padding:1.5rem; transform:translateZ(30px);
}
.tilt-card-icon{
  width:2.4rem; height:2.4rem; border-radius:.7rem; margin-bottom:1rem;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08); backdrop-filter:blur(6px); color:var(--accent);
  border:1px solid rgba(255,255,255,.12);
}
.tilt-card-icon svg{ width:1.2rem; height:1.2rem }
.tilt-card-body h2{ font-size:1.3rem; color:#fff; margin-bottom:.3em; text-shadow:var(--tshadow) }
.tilt-card-body p{ font-size:.86rem; color:rgba(255,255,255,.78); margin:0; text-shadow:0 2px 10px rgba(0,0,0,.6) }
@media (prefers-reduced-motion:reduce){
  .tilt-card-inner{ transition:none !important; transform:none !important }
  .tilt-card-inner img{ transition:none }
}


/* ---------- founding offer ---------- */
.offer{
  display:grid; gap:2rem; align-items:center;
  grid-template-columns:1fr; text-align:center;
}
@media (min-width:820px){ .offer{ grid-template-columns:1.2fr auto; text-align:start } }
.offer-box{
  background:linear-gradient(135deg, var(--panel), var(--panel-2));
  border:1px solid var(--accent-muted); border-radius:1.25rem; padding:3rem 2rem;
  display:grid; gap:2rem; grid-template-columns:1fr; align-items:center; text-align:center;
}
@media (min-width:820px){ .offer-box{ grid-template-columns:1.4fr auto; text-align:start } }
.offer-box h2{ font-size:clamp(1.7rem,3vw,2.3rem) }

/* ---------- pricing ---------- */
.pricing-grid{ display:grid; gap:1.5rem; grid-template-columns:1fr }
@media (min-width:900px){ .pricing-grid{ grid-template-columns:repeat(3,1fr); align-items:start } }

.price-card{
  background:var(--panel); border:1px solid var(--line); border-radius:1.25rem;
  padding:2.4rem 2rem; display:flex; flex-direction:column; position:relative;
  transition:transform var(--t-fast) var(--ease-out), border-color var(--t-fast), box-shadow var(--t-fast) var(--ease-out);
}
.price-card:hover{ transform:translateY(-6px); border-color:var(--line-strong); box-shadow:0 30px 60px -30px rgba(0,0,0,.7) }
.price-card h2{ font-size:1.3rem; margin-bottom:.3em }
.price-for{ font-size:.86rem; color:var(--text-tertiary); min-height:2.6em }
.price-amount{
  margin:1.2rem 0 1.6rem; font-family:var(--display-en); font-size:2.2rem; color:var(--text-primary);
  display:flex; align-items:baseline; gap:.4em; flex-wrap:wrap;
}
.price-amount span:not(.price-num){ font-family:var(--mono); font-size:.62rem; letter-spacing:.04em; color:var(--text-tertiary) }
html[lang="ar"] .price-amount span:not(.price-num){ font-size:.78rem; letter-spacing:0 }
.price-features{ display:flex; flex-direction:column; gap:.9rem; margin-bottom:2rem; flex:1 }
.price-features li{
  display:flex; align-items:flex-start; gap:.7em; font-size:.92rem; color:var(--text-secondary);
}
.price-features li::before{
  content:"✓"; flex:none; width:1.3rem; height:1.3rem; border-radius:50%;
  background:var(--accent-dim); color:var(--accent); font-size:.72rem;
  display:flex; align-items:center; justify-content:center; margin-top:.1em;
}
.price-cta{ width:100%; margin-top:auto }

.price-card--featured{
  background:linear-gradient(165deg,#241a10,#120d07); border-color:var(--accent-muted);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.85);
}
@media (min-width:900px){ .price-card--featured{ transform:translateY(-1rem) } .price-card--featured:hover{ transform:translateY(-1.4rem) } }
.price-badge{
  position:absolute; top:-.9rem; inset-inline-start:2rem;
  background:var(--accent); color:#17130c; font-family:var(--mono); font-size:.68rem; letter-spacing:.06em;
  padding:.35em .9em; border-radius:2em; margin:0;
}

.price-note{ text-align:center; margin-top:2.5rem; font-size:.92rem }
.price-note a{ color:var(--accent); text-decoration:underline; text-underline-offset:.2em }

/* ---------- showcase card ---------- */
.showcase-card{
  position:relative; overflow:hidden; border-radius:1.75rem;
  background:linear-gradient(150deg, #241a10 0%, #100c07 100%);
  border:1px solid rgba(255,255,255,.05);
  box-shadow:
    0 40px 90px -30px rgba(0,0,0,.85),
    inset 0 1px 1px rgba(255,255,255,.08),
    inset 0 -2px 6px rgba(0,0,0,.6);
  padding:3rem 1.6rem;
}
@media (min-width:820px){ .showcase-card{ padding:4.5rem 3.5rem } }

.showcase-sheen{
  position:absolute; inset:0; z-index:5; pointer-events:none; border-radius:inherit;
  background:radial-gradient(700px circle at var(--sx,50%) var(--sy,50%), rgba(255,255,255,.07) 0%, transparent 45%);
  mix-blend-mode:screen; opacity:0; transition:opacity .4s var(--ease-out);
}
.showcase-card:hover .showcase-sheen{ opacity:1 }

.showcase-grid{
  position:relative; z-index:1; display:grid; gap:2.5rem;
  grid-template-columns:1fr; align-items:center; text-align:center;
}
@media (min-width:1020px){
  .showcase-grid{ grid-template-columns:.85fr 1.3fr .5fr; text-align:start; gap:2rem }
}

.showcase-text h3{ font-size:clamp(1.5rem,2.6vw,2rem); color:var(--text-primary) }
.showcase-text p{ margin-inline:auto; font-size:.98rem }
@media (min-width:1020px){ .showcase-text p{ margin-inline:0 } }

.showcase-mockup-wrap{ position:relative; display:flex; justify-content:center; perspective:1400px }

.laptop-mockup{
  width:min(100%,480px); transform-style:preserve-3d; will-change:transform;
  transition:transform .15s var(--ease-out);
}
.laptop-screen{
  position:relative; aspect-ratio:16/10.4; border-radius:.9rem .9rem .3rem .3rem; overflow:hidden;
  background:#0c0906; border:1px solid rgba(255,255,255,.08);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.8), inset 0 0 0 6px #17110a;
}
.browser-chrome{
  position:absolute; top:0; inset-inline:0; height:1.8rem; z-index:2;
  display:flex; align-items:center; gap:.35em; padding-inline:.8em;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  border-bottom:1px solid rgba(255,255,255,.06);
}
.browser-chrome .dot{ width:.45rem; height:.45rem; border-radius:50%; background:var(--accent-muted) }
.browser-chrome .addr{
  margin-inline-start:.6em; font-family:var(--mono); font-size:.62rem; color:var(--text-tertiary);
  background:rgba(255,255,255,.04); border-radius:1em; padding:.2em .8em;
}
.mock-page{ width:100%; height:100%; object-fit:cover; object-position:center 25%; margin-top:1.8rem; opacity:.92 }
.laptop-base{
  height:.7rem; margin-inline:2%; border-radius:0 0 .6rem .6rem;
  background:linear-gradient(180deg, #2a1f13, #120d08);
  box-shadow:0 10px 24px -6px rgba(0,0,0,.7);
}
.laptop-base::after{
  content:""; display:block; width:18%; height:100%; margin-inline:auto;
  background:rgba(0,0,0,.4); border-radius:0 0 .4rem .4rem;
}

.float-badge{
  position:absolute; display:flex; align-items:center; gap:.6em;
  padding:.7em 1.1em; border-radius:1rem; z-index:3;
  background:linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.01));
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 20px 40px -12px rgba(0,0,0,.7);
  font-size:.82rem; color:var(--text-primary); white-space:nowrap;
  animation:badgeFloat 5s ease-in-out infinite;
}
.float-badge .emoji{ font-size:1.1em }
.badge-1{ top:-8%; inset-inline-start:-6%; animation-delay:-1.5s }
.badge-2{ bottom:-6%; inset-inline-end:-6%; animation-delay:-3.6s }
@keyframes badgeFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-8px) } }
body.paused .float-badge{ animation-play-state:paused }
@media (prefers-reduced-motion:reduce){ .float-badge{ animation:none } }
@media (max-width:560px){
  .badge-1{ top:-1.6rem; inset-inline-start:0; font-size:.68rem; padding:.5em .75em }
  .badge-2{ bottom:-1.6rem; inset-inline-end:0; font-size:.68rem; padding:.5em .75em }
}

.showcase-brand{ display:none }
@media (min-width:1020px){
  .showcase-brand{
    display:flex; align-items:center; justify-content:center;
    writing-mode:vertical-rl; text-orientation:mixed; justify-self:end;
  }
  .showcase-brand span{
    font-family:var(--display-en); font-weight:600; font-size:2.4rem; letter-spacing:.04em;
    background:linear-gradient(180deg, #f3d998 0%, #c9a24b 55%, #8a5a2b 100%);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
    transform:translateZ(0);
  }
}

/* ---------- FAQ ---------- */
.faq{ border-top:1px solid var(--line) }
.faq-item{ border-bottom:1px solid var(--line) }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.6rem 0; text-align:start; font-size:1.05rem; color:var(--text-primary);
}
.faq-q .plus{ flex:none; width:1.4rem; height:1.4rem; position:relative }
.faq-q .plus::before,.faq-q .plus::after{
  content:""; position:absolute; background:var(--accent); border-radius:2px;
  transition:transform var(--t-fast) var(--ease-out);
}
.faq-q .plus::before{ inset-inline:.1rem; top:.65rem; height:2px }
.faq-q .plus::after{ inset-block:.1rem; inset-inline-start:.65rem; width:2px }
.faq-item[open] .plus::after{ transform:rotate(90deg); opacity:0 }
.faq-a{ padding-bottom:1.6rem; margin:0; max-width:56ch }
.faq-item summary{ cursor:pointer; list-style:none }
.faq-item summary::-webkit-details-marker{ display:none }

/* ---------- contact ---------- */
.contact-grid{ display:grid; gap:3rem; grid-template-columns:1fr }
@media (min-width:920px){ .contact-grid{ grid-template-columns:.85fr 1.15fr } }
.contact-info h1, .contact-info h2{ font-size:clamp(1.9rem,3.4vw,2.6rem) }
.contact-detail{ display:flex; align-items:center; gap:.8em; margin-block:1.2em; color:var(--text-secondary) }
.contact-detail svg{ width:1.2rem; height:1.2rem; color:var(--accent); flex:none }
.contact-detail a{ transition:color var(--t-fast) }
.contact-detail a:hover{ color:var(--accent) }

form{ display:grid; gap:1.3rem }
.field{ display:grid; gap:.5em }
.field input, .field select, .field textarea{
  background:var(--panel); border:1px solid var(--line-strong); border-radius:.6rem;
  padding:.9em 1em; color:var(--text-primary); font-family:var(--body-ar); font-size:.98rem;
  transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
html[lang="en"] .field input, html[lang="en"] .field select, html[lang="en"] .field textarea{ font-family:var(--body-en) }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim);
}
.field textarea{ resize:vertical; min-height:7rem }
.form-row{ display:grid; gap:1.3rem; grid-template-columns:1fr }
@media (min-width:600px){ .form-row{ grid-template-columns:1fr 1fr } }
.form-msg{
  font-family:var(--mono); font-size:.82rem; color:var(--accent); min-height:1.4em;
  opacity:0; transform:translateY(6px); transition:all var(--t-fast) var(--ease-out);
}
.form-msg.show{ opacity:1; transform:none }

/* ---------- footer ---------- */
.hover-footer{
  position:relative; overflow:hidden; margin:1.5rem;
  border-radius:1.5rem; border:1px solid var(--line);
  background:var(--canvas-2);
}
@media (min-width:820px){ .hover-footer{ margin:2rem } }

.footer-glow{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(125% 125% at 50% 0%, rgba(201,162,75,.16) 0%, transparent 55%);
}

.footer-top{ position:relative; z-index:1; padding-block:4rem 2.5rem }

.footer-grid{
  display:grid; gap:2.5rem; grid-template-columns:1fr; padding-bottom:2.5rem;
}
@media (min-width:640px){ .footer-grid{ grid-template-columns:1fr 1fr } }
@media (min-width:1020px){ .footer-grid{ grid-template-columns:1.4fr .8fr .8fr 1fr } }

.footer-about .footer-brand{
  display:flex; align-items:center; gap:.5em;
  font-family:var(--display-ar); font-size:1.6rem; margin:0 0 .7em; color:var(--text-primary);
}
html[lang="en"] .footer-about .footer-brand{ font-family:var(--display-en) }
.footer-about .footer-brand svg{ width:1.5em; height:1.5em }
.footer-disclosure{ max-width:28rem; font-size:.9rem; color:var(--text-secondary); margin:0 }

.footer-col h4{
  font-family:var(--mono); font-size:.76rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-primary); font-weight:400; margin-bottom:1.2em;
}
.footer-links{ display:flex; flex-direction:column; gap:.85em }
.footer-links a{ color:var(--text-secondary); font-size:.94rem; transition:color var(--t-fast) }
.footer-links a:hover{ color:var(--accent) }
.pulse-item{ position:relative; display:inline-flex; align-items:center; gap:.5em }
.pulse-dot{
  width:.4rem; height:.4rem; border-radius:50%; background:var(--accent);
  animation:pulseDot 1.8s ease-in-out infinite;
}
@keyframes pulseDot{ 0%,100%{ opacity:.35; transform:scale(1) } 50%{ opacity:1; transform:scale(1.3) } }
body.paused .pulse-dot{ animation-play-state:paused }
@media (prefers-reduced-motion:reduce){ .pulse-dot{ animation:none; opacity:.8 } }

.footer-contact{ display:flex; flex-direction:column; gap:1em }
.footer-contact li{ display:flex; align-items:center; gap:.7em; color:var(--text-secondary); font-size:.94rem }
.footer-contact svg{ width:1.1rem; height:1.1rem; color:var(--accent); flex:none }
.footer-contact a{ color:inherit; transition:color var(--t-fast) }
.footer-contact a:hover{ color:var(--accent) }

.footer-bottom{
  position:relative; z-index:1;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem 2rem;
  padding-top:2rem;
}
.footer-social{ display:flex; gap:1rem; order:1 }
.footer-social a{
  display:flex; align-items:center; justify-content:center; width:2.4rem; height:2.4rem;
  border:1px solid var(--line-strong); border-radius:50%; color:var(--text-secondary);
  transition:all var(--t-fast) var(--ease-out);
}
.footer-social a:hover{ color:var(--accent); border-color:var(--accent); transform:translateY(-2px) }
.footer-social svg{ width:1rem; height:1rem }
.footer-copyright{
  order:3; width:100%; font-family:var(--mono); font-size:.74rem; color:var(--text-tertiary); margin:0;
}
@media (min-width:820px){ .footer-copyright{ order:2; width:auto } }
/* big mouse-reactive wordmark */
.footer-hero-text{
  position:relative; z-index:1; height:clamp(7rem,22vw,14rem);
  margin-top:-1rem;
}
#footer-hover-svg{ width:100%; height:100%; display:block; -webkit-user-select:none; user-select:none }
.fht-base, .fht-draw, .fht-reveal{
  font-family:var(--display-en); font-weight:600; font-size:9.5rem;
  fill:none; stroke-width:1;
}
.fht-base{ stroke:var(--line-strong); opacity:.5 }
.fht-draw{
  stroke:var(--accent-muted);
  stroke-dasharray:2400; stroke-dashoffset:2400;
  animation:fhtDraw 2.6s var(--ease-out) .2s forwards;
}
@keyframes fhtDraw{ to{ stroke-dashoffset:0 } }
.fht-reveal{ stroke:url(#footerTextGradient); opacity:0; transition:opacity .3s var(--ease-out) }
.footer-hero-text.hovering .fht-reveal{ opacity:1 }
@media (prefers-reduced-motion:reduce){
  .fht-draw{ animation:none; stroke-dashoffset:0 }
}
@media (max-width:640px){ .footer-hero-text{ display:none } }

/* touch targets */
@media (pointer:coarse){
  a, button, summary{ min-height:auto }
  .footer-links a{ padding-block:.3em }
}

/* utility: baseline alignment for icon rows */
.row-baseline{ display:flex; align-items:baseline; gap:.6em }

/* ---------- selected work list ---------- */
#projects{ padding-block:clamp(2.5rem,6vw,4rem) }
.project-head{ max-width:40rem; margin:0 auto 1.6rem; padding-bottom:1.1rem; position:relative }
.project-head::after{
  content:""; display:block; width:3rem; height:2px; margin-top:.9rem; background:var(--accent);
}
.project-head h2{
  margin:0; font-family:var(--display-en); font-weight:600; font-size:clamp(2.1rem,4.6vw,3rem);
  line-height:1.05; letter-spacing:-.01em; color:var(--text-primary);
}
html[lang="ar"] .project-head h2{ font-family:var(--display-ar); font-weight:700; font-size:clamp(2rem,4.4vw,2.8rem); line-height:1.25; letter-spacing:0 }
.project-list{ max-width:40rem; margin-inline:auto }
.project-row{
  position:relative; display:flex; align-items:flex-start; gap:1rem;
  padding:.95rem 0; border-top:1px solid var(--line); color:inherit;
}
.project-list .project-row:last-child{ border-bottom:1px solid var(--line) }
.project-row.reveal{ transform:translateX(24px) scale(.98) }
.project-row.reveal:nth-child(even){ transform:translateX(-24px) scale(.98) }
.project-row.reveal.in{ transform:none }
.project-row::before{
  content:""; position:absolute; inset:.35rem -.8rem; border-radius:.7rem;
  background:var(--accent-dim); opacity:0; transform:scale(.97);
  transition:opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.project-row > *{ position:relative }
.project-thumb{
  flex:none; width:4.2rem; height:auto; aspect-ratio:16/10; object-fit:cover; border-radius:.4rem;
  border:1px solid var(--line);
}
.project-main{ flex:1; min-width:0 }
.project-title{
  display:inline-flex; align-items:center; gap:.4rem; margin:0;
  font-family:var(--body-en); font-weight:500; font-size:1.05rem; line-height:1.2; letter-spacing:-.01em;
  color:var(--text-primary);
}
html[lang="ar"] .project-title{ font-family:var(--body-ar); font-weight:700; font-size:1.05rem; letter-spacing:0 }
.project-title > span{ position:relative }
.project-title > span::after{
  content:""; position:absolute; inset-inline-start:0; bottom:-.15em; height:1px; width:0; background:var(--accent);
  transition:width var(--t-med, .4s) var(--ease-out);
}
.project-arrow{
  width:.9rem; height:.9rem; color:var(--accent); opacity:0; transform:translate(-.3rem,.3rem);
  transition:opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
html[dir="rtl"] .project-arrow{ transform:translate(.3rem,.3rem) }
.project-desc{ margin:.25rem 0 0; font-size:.82rem; line-height:1.55; color:var(--text-secondary); max-width:30rem }
.project-year{ font-family:var(--mono); font-size:.7rem; color:var(--text-tertiary); flex:none }
.project-row:hover::before, .project-row:focus-visible::before{ opacity:1; transform:none }
.project-row:hover .project-title > span::after, .project-row:focus-visible .project-title > span::after{ width:100% }
.project-row:hover .project-arrow, .project-row:focus-visible .project-arrow{ opacity:1; transform:none }

.project-preview{
  position:fixed; left:0; top:0; z-index:70; pointer-events:none;
  width:280px; height:180px; border-radius:.75rem; overflow:hidden;
  border:1px solid var(--line-strong); box-shadow:0 24px 50px -18px rgba(0,0,0,.8);
  background:var(--panel); opacity:0; scale:.85;
  transition:opacity .3s var(--ease-out), scale .3s var(--ease-out);
  display:none;
}
.project-preview.is-ready{ display:block }
.project-preview.is-on{ opacity:1; scale:1 }
.project-preview img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; filter:blur(10px); scale:1.1;
  transition:opacity .45s var(--ease-out), filter .45s var(--ease-out), scale .45s var(--ease-out);
}
.project-preview img.is-active{ opacity:1; filter:none; scale:1 }
#projects.has-float .project-thumb{ display:none }
@media (max-width:520px){
  .project-row{ gap:.8rem }
  .project-thumb{ width:3.6rem }
}

/* ---------- scroll progress bar ---------- */
.scroll-progress{
  position:absolute; inset-inline-start:0; bottom:0; height:2px; width:0%;
  background:var(--accent); pointer-events:none; transition:width .12s linear;
}
@media (prefers-reduced-motion:reduce){ .scroll-progress{ transition:none } }

/* ---------- back to top ---------- */
.back-to-top{
  position:fixed; inset-inline-end:1.5rem; bottom:1.5rem; z-index:90;
  width:2.75rem; height:2.75rem; border-radius:50%; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--panel); border:1px solid var(--line-strong); color:var(--accent);
  cursor:pointer; opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out), visibility 0s linear var(--t-fast);
}
.back-to-top.is-visible{
  opacity:1; visibility:visible; transform:none;
  transition:opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.back-to-top:hover{ border-color:var(--accent) }
.back-to-top svg{ width:1.15rem; height:1.15rem }
@media (prefers-reduced-motion:reduce){ .back-to-top{ transition:opacity .2s, visibility 0s; transform:none } }

/* ---------- services grid (card style) ---------- */
.services-grid{
  display:grid; grid-template-columns:1fr; gap:1.4rem;
}
@media (min-width:700px){ .services-grid{ grid-template-columns:1fr 1fr } }
.service-card{
  padding:1.8rem 1.6rem; border-radius:1rem; background:var(--panel);
  border:1px solid var(--line);
  transition:border-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.service-card:hover{
  border-color:var(--line-strong); transform:translateY(-6px);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.7);
}
.service-card-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.8rem; height:2.8rem; border-radius:.7rem; margin-bottom:1.1rem;
  background:var(--accent-dim); color:var(--accent);
}
.service-card-icon svg{ width:1.4rem; height:1.4rem }
.service-card h3{
  margin:0 0 .5em; font-family:var(--display-en); font-weight:600; font-size:1.3rem; color:var(--text-primary);
}
html[lang="ar"] .service-card h3{ font-family:var(--display-ar); font-weight:700 }
.service-card-tagline{ margin:0 0 .4em; font-size:.9rem; color:var(--accent) }
.service-card-desc{ margin:0 0 1.1em; font-size:.92rem; line-height:1.65; color:var(--text-secondary) }
.service-card-tags{ display:flex; flex-wrap:wrap; gap:.5rem }
.service-card-tags span{
  font-family:var(--mono); font-size:.7rem; color:var(--text-tertiary);
  border:1px solid var(--line); border-radius:2em; padding:.35em .8em;
  transition:color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.service-card-tags span.is-active{ color:var(--accent); border-color:var(--accent-muted); background:var(--accent-dim) }

/* ---------- services stack (sticky scroll cards) ---------- */
.svc-stack{ display:flex; flex-direction:column; gap:1.6rem; margin-top:1rem }
.svc-card{
  position:relative; overflow:hidden; padding:2.2rem 1.6rem 2rem; border-radius:1.25rem;
  background:var(--panel); border:1px solid var(--line);
  box-shadow:0 40px 80px -55px rgba(0,0,0,.85);
}
.svc-card-num{
  position:absolute; inset-inline-end:1.3rem; top:-.4rem; font-family:var(--display-en); font-weight:600;
  font-size:5.4rem; line-height:1; color:var(--text-primary); opacity:.05; pointer-events:none; user-select:none;
}
.svc-card-top{ display:flex; flex-direction:column; gap:1.8rem }
@media (min-width:700px){ .svc-card-top{ flex-direction:row; align-items:center; gap:2.4rem } }
.svc-card-anim{ flex:none; width:100%; max-width:14rem; margin-inline:auto }
@media (min-width:700px){ .svc-card-anim{ width:12.5rem; margin-inline:0 } }
.svc-card-anim svg{ display:block; width:100%; height:auto; overflow:visible; color:var(--accent) }
.svc-draw-path{
  fill:none; stroke:var(--accent); stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset .12s linear;
}
.svc-baseline{ stroke:var(--line-strong); stroke-width:1; stroke-dasharray:2 4; fill:none }
.svc-beat{
  fill:var(--panel-2); stroke:var(--line-strong); stroke-width:1.4;
  transition:fill var(--t-fast) var(--ease-out), stroke var(--t-fast) var(--ease-out), r var(--t-fast) var(--ease-out);
}
.svc-beat.is-on{ fill:var(--accent); stroke:var(--accent); r:6.5 }
.svc-card-body{ min-width:0 }
.svc-card-body h2{ margin:0 0 .5em; font-family:var(--display-en); font-weight:600; font-size:1.5rem; color:var(--text-primary) }
html[lang="ar"] .svc-card-body h2{ font-family:var(--display-ar); font-weight:700 }
.svc-card-body .service-card-tagline{ margin:0 0 .6em; font-size:.95rem }
.svc-card-body .service-card-desc{ margin-bottom:1.5rem; max-width:34rem }
@media (prefers-reduced-motion:reduce){
  .svc-draw-path{ transition:none; stroke-dashoffset:0 !important }
  .svc-beat{ transition:none }
}
@media (min-width:820px){
  .svc-stack.is-stacking{ display:block }
  .svc-stack.is-stacking .svc-panel{ position:relative; min-height:136vh; margin-bottom:0 }
  .svc-stack.is-stacking .svc-panel:last-child{ min-height:auto }
  .svc-stack.is-stacking .svc-panel .svc-card{ position:sticky; top:7.5rem; will-change:transform,opacity; transition:opacity .18s linear }
  .svc-stack.is-stacking{ gap:0 }
}

/* ---------- process timeline ---------- */
.process-timeline{ position:relative; margin:3rem 0 0; max-width:38rem }
.process-timeline-line, .process-timeline-fill{
  position:absolute; inset-inline-start:1.2rem; width:2px; top:1.2rem; bottom:1.2rem;
}
.process-timeline-line{ background:var(--line) }
.process-timeline-fill{ background:var(--accent); height:0; bottom:auto; transition:height .1s linear }
@media (prefers-reduced-motion:reduce){ .process-timeline-fill{ transition:none } }
.process-step{ position:relative; display:flex; gap:1.4rem; align-items:flex-start; padding-block:1.3rem }
.process-step-num{
  flex:none; width:2.4rem; height:2.4rem; border-radius:50%; position:relative; z-index:1;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:.85rem; color:var(--text-secondary);
  background:var(--panel); border:1px solid var(--line-strong);
}
.process-step-body h2{
  margin:0 0 .4em; font-family:var(--display-en); font-weight:600; font-size:1.25rem; color:var(--text-primary);
}
html[lang="ar"] .process-step-body h2{ font-family:var(--display-ar); font-weight:700 }
.process-step-body p{ margin:0; font-size:.95rem; line-height:1.75; color:var(--text-secondary); max-width:32rem }

/* ---------- build log terminal ---------- */
.build-log{
  margin:3rem 0 0; padding:1.6rem 1.8rem; border-radius:1rem; max-width:34rem;
  background:var(--panel); border:1px solid var(--line);
}
.build-log-title{
  margin:0 0 1rem; padding-bottom:.8rem; border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:.75rem; color:var(--text-tertiary);
}
.build-log-lines{ display:flex; flex-direction:column; gap:.85rem }
.build-log-line{
  display:flex; align-items:center; gap:.7rem; margin:0;
  font-family:var(--mono); font-size:.82rem; color:var(--text-secondary);
  opacity:0; transform:translateY(8px);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
  transition-delay:calc(var(--i,0) * 180ms);
}
.build-log.in .build-log-line{ opacity:1; transform:none }
.build-log-tag{
  flex:none; font-size:.68rem; font-weight:700; padding:.15em .55em; border-radius:.3em;
  background:var(--accent-dim); color:var(--accent);
}
.build-log-ok{ margin-inline-start:auto; color:#7ec98f }
@media (prefers-reduced-motion:reduce){ .build-log-line{ transition:none; opacity:1; transform:none } }

/* ---------- why: marquee + cards ---------- */
#why{ padding-bottom:clamp(2.5rem,6vw,4rem) }
.marquee{
  position:relative; overflow:hidden; display:flex;
  padding-block:1.3rem; margin:2.6rem 0; border-block:1px solid var(--line);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track{
  display:flex; align-items:center; gap:1rem; flex:none; white-space:nowrap;
  padding-inline-end:1rem;
  font-family:var(--display-en); font-style:italic; font-size:1.3rem; color:var(--text-secondary);
  animation:marqueeScroll 34s linear infinite;
}
html[lang="ar"] .marquee-track{ font-family:var(--display-ar); font-style:normal; font-weight:700 }
html[dir="rtl"] .marquee-track{ animation-name:marqueeScrollRtl }
.marquee-dot{ width:.35rem; height:.35rem; border-radius:50%; background:var(--accent); flex:none }
@keyframes marqueeScroll{ from{ transform:translateX(0) } to{ transform:translateX(-100%) } }
@keyframes marqueeScrollRtl{ from{ transform:translateX(0) } to{ transform:translateX(100%) } }
@media (prefers-reduced-motion:reduce){
  .marquee{ overflow-x:auto }
  .marquee-track{ animation:none }
}
.why-grid{ display:grid; grid-template-columns:1fr; gap:1.3rem; margin-top:2.6rem }
@media (min-width:700px){ .why-grid{ grid-template-columns:1fr 1fr } }
.why-card{
  padding:1.6rem 1.7rem; border-radius:1rem; background:var(--panel); border:1px solid var(--line);
  transition:border-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.why-card:hover{ border-color:var(--line-strong); transform:translateY(-4px) }
.why-card h2{ margin:0 0 .5em; font-family:var(--display-en); font-weight:600; font-size:1.15rem; color:var(--text-primary) }
html[lang="ar"] .why-card h2{ font-family:var(--display-ar); font-weight:700 }
.why-card p{ margin:0; font-size:.9rem; line-height:1.65; color:var(--text-secondary) }

/* ---------- faq stagger ---------- */
.faq-item.reveal{ transition-delay:calc(var(--i,0) * 90ms) }
@media (prefers-reduced-motion:reduce){ .faq-item.reveal{ transition-delay:0s } }

/* ---------- contact detail stagger ---------- */
.contact-detail.reveal{ transition-delay:calc(var(--i,0) * 100ms) }

/* ---------- inner-page top spacing (clears the fixed header) ---------- */
main > section:first-child:not(.hero){ padding-top:7rem }
@media (min-width:820px){ main > section:first-child:not(.hero){ padding-top:8.5rem } }

/* ---------- nav entrance + extra hover movement ---------- */
.nav{ animation:navDropIn .7s var(--ease-out) both }
@keyframes navDropIn{ from{ opacity:0; transform:translateY(-100%) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce){ .nav{ animation:none } }

.service-card-icon{ transition:transform var(--t-fast) var(--ease-out), background var(--t-fast) } 
.service-card:hover .service-card-icon{ transform:rotate(-8deg) scale(1.08); background:var(--accent-muted) }

.why-card{ border-inline-start:2px solid transparent; transition:border-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out) }
.why-card:hover{ border-inline-start-color:var(--accent) }

.process-step-num{ transition:transform var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), color var(--t-fast) }
.process-step:hover .process-step-num{ transform:scale(1.12); border-color:var(--accent); color:var(--accent) }

/* ---------- preloader ---------- */
.preloader{
  position:fixed; inset:0; z-index:400; background:var(--canvas);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .5s var(--ease-out), visibility 0s linear .5s;
}
.preloader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none }
.pl-skip .preloader{ display:none }
.preloader-inner{ display:flex; flex-direction:column; align-items:center; gap:1.1rem }
.preloader-logo{ width:2.6rem; height:2.6rem; color:var(--text-primary); animation:preloaderPulse 1.4s ease-in-out infinite }
.preloader-word{
  margin:0; font-family:var(--display-en); font-size:1rem; font-weight:600; letter-spacing:.32em;
  color:var(--text-primary); padding-inline-start:.32em;
}
html[lang="ar"] .preloader-word{ font-family:var(--display-ar); letter-spacing:.08em; padding-inline-start:0 }
.preloader-bar{ width:7rem; height:2px; background:var(--line); border-radius:2px; overflow:hidden }
.preloader-bar span{ display:block; height:100%; width:0%; background:var(--accent); animation:preloaderFill 1s var(--ease-out) forwards }
@keyframes preloaderPulse{ 0%,100%{ opacity:1 } 50%{ opacity:.45 } }
@keyframes preloaderFill{ from{ width:0% } to{ width:100% } }
@media (prefers-reduced-motion:reduce){
  .preloader{ transition:opacity .2s linear, visibility 0s }
  .preloader-logo{ animation:none }
  .preloader-bar span{ animation:none; width:100% }
}

/* ---------- homepage teasers ---------- */
.home-more{ text-align:center; margin-top:2.4rem }
.mini-steps{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem;
}
@media (min-width:700px){ .mini-steps{ grid-template-columns:repeat(4,1fr) } }
.mini-step{
  padding:1.4rem 1.2rem; border-radius:.9rem; background:var(--panel); border:1px solid var(--line);
  text-align:center; transition:border-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.mini-step:hover{ border-color:var(--line-strong); transform:translateY(-4px) }
.mini-step-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.2rem; height:2.2rem; border-radius:50%; margin-bottom:.7rem;
  font-family:var(--mono); font-size:.8rem; color:var(--accent);
  background:var(--accent-dim);
}
.mini-step h3{
  margin:0; font-family:var(--body-en); font-weight:500; font-size:.92rem; color:var(--text-primary);
}
html[lang="ar"] .mini-step h3{ font-family:var(--body-ar); font-weight:700 }

/* ---------- page transition ---------- */
.page-transition{
  position:fixed; inset:0; z-index:410; background:var(--canvas);
  opacity:1; visibility:visible; pointer-events:none;
  transition:opacity .3s var(--ease-out), visibility 0s linear .3s;
}
.page-transition.is-hidden{
  opacity:0; visibility:hidden;
  transition:opacity .3s var(--ease-out), visibility 0s linear .3s;
}
.page-transition.is-leaving{
  opacity:1; visibility:visible;
  transition:opacity .26s var(--ease-out), visibility 0s linear 0s;
}
@media (prefers-reduced-motion:reduce){
  .page-transition{ transition:none !important }
}

/* ================= SEO landing pages (madinah, ecommerce) ================= */
.seo-page{ padding-block:clamp(7.5rem,13vw,10rem) 5rem }
.seo-page .section-head{ max-width:48rem; margin-bottom:1rem }
.seo-lede{ font-size:1.12rem; line-height:1.9; color:var(--text-secondary); margin-top:1rem }
.seo-cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.8rem }
.seo-block{ margin-top:4rem; max-width:62rem }
.seo-block h2{ font-size:clamp(1.45rem,2.6vw,2rem); margin-bottom:1rem; color:var(--text-primary) }
.seo-block > p{ line-height:1.95; color:var(--text-secondary); max-width:52rem }
.seo-grid{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr)); margin-top:1.6rem }
.seo-card{ border:1px solid var(--line); border-radius:16px; padding:1.4rem 1.4rem 1.5rem; background:linear-gradient(180deg,var(--panel),var(--canvas-2)); transition:border-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out) }
.seo-card:hover{ border-color:var(--line-strong); transform:translateY(-2px) }
.seo-card h3{ font-size:1.08rem; margin-bottom:.55rem; color:var(--accent) }
.seo-card p{ font-size:.96rem; line-height:1.8; color:var(--text-secondary); margin:0 }
.seo-list{ margin:1rem 0 0; padding-inline-start:1.3rem; line-height:2.1; color:var(--text-secondary) }
.seo-list li::marker{ color:var(--accent) }
.seo-link{ color:var(--accent); text-decoration:underline; text-underline-offset:4px }
.seo-link:hover{ color:var(--accent-hover) }
.seo-page .faq{ margin-top:1.2rem }
.seo-final{ border:1px solid var(--line-strong); border-radius:20px; padding:2rem; background:var(--accent-dim) }

/* Blog */
.post-body{ max-width:46rem }
.crumbs{ font-size:.88rem; color:var(--text-secondary); margin-bottom:1.6rem }
.crumbs a{ color:var(--text-secondary); text-decoration:none }
.crumbs a:hover{ color:var(--accent) }
.crumbs .sep{ margin-inline:.45rem; opacity:.5 }
.post-meta{ font-size:.9rem; color:var(--text-secondary); margin-top:.8rem }
.post-body h1{ font-size:clamp(1.9rem,4.2vw,2.9rem); line-height:1.35 }
.post-body h2{ font-size:clamp(1.35rem,2.4vw,1.75rem); margin:3rem 0 .9rem; color:var(--text-primary) }
.post-body h3{ font-size:1.12rem; margin:1.8rem 0 .5rem; color:var(--accent) }
.post-body p{ line-height:2; color:var(--text-secondary); margin:0 0 1rem }
.post-body .seo-list{ margin-bottom:1rem }
.post-body .seo-final{ margin-top:3.5rem }
.post-related{ margin-top:4rem; max-width:62rem }
.post-card{ display:block; text-decoration:none; color:inherit }
.post-card .post-meta{ margin:.9rem 0 0 }
.post-card h3{ line-height:1.55 }

/* About */
.about-hero{ display:grid; gap:clamp(2rem,5vw,4rem); grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:center }
.about-photo{ margin:0; border-radius:22px; overflow:hidden; border:1px solid var(--line-strong); aspect-ratio:4/5; background:var(--panel) }
.about-photo img{ width:100%; height:100%; object-fit:cover; display:block }
.about-photo.small{ aspect-ratio:3/4; max-width:22rem }
.about-sign{ margin-top:1.4rem; color:var(--accent); font-size:1.05rem }
.about-split{ display:grid; gap:clamp(2rem,5vw,4rem); grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); align-items:center; margin-top:4.5rem }
@media (max-width:820px){ .about-hero,.about-split{ grid-template-columns:1fr } .about-photo{ max-width:26rem } .about-split .about-photo{ order:2 } }

/* Blog: cover, byline, author box */
.post-byline{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; margin-top:1.4rem }
.post-author{ display:flex; align-items:center; gap:.75rem; text-decoration:none; color:var(--text-primary) }
.post-author img{ width:44px; height:44px; border-radius:50%; object-fit:cover; object-position:50% 30%; border:1px solid var(--line-strong) }
.post-author > span{ display:flex; flex-direction:column; gap:.1rem }
.post-author .post-meta{ margin:0 }
.post-share{ display:inline-flex; align-items:center; gap:.5rem; padding:.55rem 1rem; border:1px solid var(--line-strong); border-radius:999px; color:var(--text-primary); text-decoration:none; font-size:.9rem; transition:border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out) }
.post-share:hover{ border-color:var(--accent); color:var(--accent) }
.post-share svg{ color:#25d366 }
.post-cover{ margin:2rem 0 1.6rem; border-radius:18px; overflow:hidden; border:1px solid var(--line) }
.post-cover img,.post-figure img{ width:100%; height:auto; display:block }
.post-figure{ margin:2rem 0; }
.post-figure img{ border-radius:14px; border:1px solid var(--line) }
.post-figure figcaption{ font-size:.88rem; color:var(--text-secondary); margin-top:.6rem; line-height:1.8 }
.author-box{ display:flex; gap:1.2rem; align-items:center; margin-top:3rem; padding:1.4rem; border:1px solid var(--line); border-radius:18px; background:var(--panel) }
.author-box img{ width:96px; height:96px; border-radius:50%; object-fit:cover; object-position:50% 30%; flex:none }
.author-box p{ margin:0; line-height:1.9; color:var(--text-secondary) }
.author-box .author-name{ color:var(--text-primary); font-weight:600; margin-bottom:.2rem }
.post-thumb{ width:100%; height:auto; border-radius:12px; margin-bottom:1rem; border:1px solid var(--line); display:block }
@media (max-width:560px){ .author-box{ flex-direction:column; align-items:flex-start } }
.site-menu-meta bdi{ direction:ltr; unicode-bidi:isolate }

/* Arabic typography: never letter-space or set Arabic in the Latin mono face */
html[lang="ar"]{ --mono:'IBM Plex Sans Arabic','IBM Plex Mono',sans-serif }
html[lang="ar"] [data-lang="ar"],
html[lang="ar"] .post-body, html[lang="ar"] .crumbs, html[lang="ar"] .kicker,
html[lang="ar"] .hero-badge, html[lang="ar"] .btn, html[lang="ar"] .menu-btn-text,
html[lang="ar"] .site-menu-title, html[lang="ar"] .preloader-word{ letter-spacing:0 }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4{ line-height:1.5; letter-spacing:0 }
html[lang="ar"] .hero .hero-title{ font-size:clamp(2.1rem,5.2vw,4rem); line-height:1.45 }
.brand, .footer-brand, .preloader-word{ font-family:var(--display-en) }

/* Blog: live demo cards */
.demo-block{ margin-top:3rem; padding:1.6rem; border:1px solid var(--line-strong); border-radius:20px; background:linear-gradient(180deg,var(--panel),var(--canvas-2)) }
.demo-block h2{ margin-top:0 }
.demo-grid{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); margin-top:1rem }
.demo-card{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:14px; overflow:hidden; text-decoration:none; color:var(--text-primary); background:var(--canvas); transition:border-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out) }
.demo-card:hover{ border-color:var(--accent); transform:translateY(-2px) }
.demo-card img{ width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; display:block; border-bottom:1px solid var(--line) }
.demo-body{ display:flex; flex-direction:column; gap:.3rem; padding:.9rem 1rem 1rem }
.demo-body strong{ font-size:1.02rem }
.demo-body > span{ font-size:.88rem; line-height:1.7; color:var(--text-secondary) }
.demo-body .demo-open{ color:var(--accent); font-size:.86rem; margin-top:.2rem }
@media (max-width:560px){
  .demo-block{ padding:1.2rem }
  .demo-card{ flex-direction:row; align-items:stretch }
  .demo-card img{ width:42%; aspect-ratio:auto; height:auto; min-height:100%; border-bottom:0; border-inline-end:1px solid var(--line) }
  .demo-body{ padding:.75rem .85rem; justify-content:center }
  .demo-body strong{ font-size:.98rem }
  .demo-body > span{ font-size:.82rem; line-height:1.6 }
}

/* Guide callout (internal link to pricing guide) */
.guide-callout{ display:flex; align-items:center; gap:1.1rem; max-width:52rem; margin:2.4rem auto 0; padding:1.1rem 1.3rem; border:1px solid var(--line-strong); border-radius:18px; background:linear-gradient(135deg,var(--accent-dim),transparent 70%), var(--panel); color:var(--text-primary); text-decoration:none; transition:border-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out) }
.guide-callout:hover{ border-color:var(--accent); transform:translateY(-2px) }
.guide-icon{ flex:none; width:3rem; height:3rem; border-radius:.9rem; display:flex; align-items:center; justify-content:center; background:var(--accent-dim); color:var(--accent) }
.guide-icon svg{ width:1.5rem; height:1.5rem }
.guide-text{ display:flex; flex-direction:column; gap:.2rem; flex:1; min-width:0 }
.guide-kicker{ font-size:.78rem; color:var(--accent) }
.guide-text strong{ font-family:var(--display-ar); font-size:1.12rem; line-height:1.5 }
html[lang="en"] .guide-text strong{ font-family:var(--display-en) }
.guide-desc{ font-size:.88rem; line-height:1.7; color:var(--text-secondary) }
.guide-arrow{ flex:none; color:var(--accent); font-size:1.3rem }
html[lang="en"] .guide-arrow{ transform:scaleX(-1) }
@media (max-width:560px){ .guide-callout{ align-items:flex-start; padding:1rem } .guide-icon{ width:2.6rem; height:2.6rem } .guide-arrow{ display:none } }

/* Hero: the small badge is the SEO h1; the big slogan is .hero-title */
.hero .hero-title{ font-family:var(--display-ar); font-weight:700; line-height:1.25; margin:0 0 .5em; color:var(--text-primary) }
html[lang="en"] .hero .hero-title{ font-family:var(--display-en); font-weight:600; letter-spacing:-0.01em }
html[lang] h1.hero-badge{ font-family:var(--mono); font-weight:500; font-size:.76rem; line-height:1.5 }
html[lang="en"] h1.hero-badge{ letter-spacing:.06em }

/* Blog tables */
.post-table-wrap{ overflow-x:auto; margin:1.2rem 0 .6rem; border:1px solid var(--line); border-radius:14px }
.post-table{ width:100%; border-collapse:collapse; font-size:.92rem; min-width:34rem }
.post-table th,.post-table td{ padding:.75rem .9rem; text-align:start; border-bottom:1px solid var(--line); vertical-align:top; line-height:1.7 }
.post-table th{ background:var(--accent-dim); color:var(--accent); font-weight:600 }
.post-table td{ color:var(--text-secondary) }
.post-table td:first-child{ color:var(--text-primary); font-weight:600 }
.post-table tr:last-child td{ border-bottom:0 }
.post-table-note{ font-size:.85rem !important; color:var(--text-tertiary) !important }
@media (max-width:560px){
  .post-table{ min-width:0; font-size:.86rem }
  .post-table th:nth-child(2),.post-table td:nth-child(2){ display:none }
  .post-table th,.post-table td{ padding:.65rem .6rem }
}