@import url("tokens.css");
/* arabic */
@font-face {
  font-family: 'Aref Ruqaa';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/arefruqaa-WwkbxPW1E165rajQKDulIIIoVfg61NfCHA.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-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-10EC4, U+10EFC-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;
}
/* latin-ext */
@font-face {
  font-family: 'Aref Ruqaa';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/arefruqaa-WwkbxPW1E165rajQKDulIIkoVfg61NfCHA.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Aref Ruqaa';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/arefruqaa-WwkbxPW1E165rajQKDulIIcoVfg61Nc.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;
}
/* arabic */
@font-face {
  font-family: 'Aref Ruqaa';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/arefruqaa-WwkYxPW1E165rajQKDulKDwNQNAY2f34Fdj3cQ.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-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-10EC4, U+10EFC-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;
}
/* latin-ext */
@font-face {
  font-family: 'Aref Ruqaa';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/arefruqaa-WwkYxPW1E165rajQKDulKDwNQNsY2f34Fdj3cQ.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Aref Ruqaa';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/arefruqaa-WwkYxPW1E165rajQKDulKDwNQNUY2f34Fdg.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;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/poppins-pxiByp8kv8JHgFVrLGT9Z11lFd2JQEl8qw.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/poppins-pxiByp8kv8JHgFVrLGT9Z1JlFd2JQEl8qw.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/poppins-pxiByp8kv8JHgFVrLGT9Z1xlFd2JQEk.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;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/poppins-pxiByp8kv8JHgFVrLEj6Z11lFd2JQEl8qw.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/poppins-pxiByp8kv8JHgFVrLEj6Z1JlFd2JQEl8qw.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/poppins-pxiByp8kv8JHgFVrLEj6Z1xlFd2JQEk.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;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/poppins-pxiByp8kv8JHgFVrLCz7Z11lFd2JQEl8qw.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/poppins-pxiByp8kv8JHgFVrLCz7Z1JlFd2JQEl8qw.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/poppins-pxiByp8kv8JHgFVrLCz7Z1xlFd2JQEk.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;
}
/* arabic */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/tajawal-Iura6YBj_oCad4k1nzSBC5xLhLFw4Q.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-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-10EC4, U+10EFC-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;
}
/* latin */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/tajawal-Iura6YBj_oCad4k1nzGBC5xLhLE.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;
}
/* arabic */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/tajawal-Iurf6YBj_oCad4k1l8KiHrRpiZtK6GwN9w.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-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-10EC4, U+10EFC-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;
}
/* latin */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/tajawal-Iurf6YBj_oCad4k1l8KiHrFpiZtK6Gw.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;
}
/* arabic */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/tajawal-Iurf6YBj_oCad4k1l4qkHrRpiZtK6GwN9w.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-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-10EC4, U+10EFC-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;
}
/* latin */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/tajawal-Iurf6YBj_oCad4k1l4qkHrFpiZtK6Gw.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;
}
/* arabic */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/tajawal-Iurf6YBj_oCad4k1l5anHrRpiZtK6GwN9w.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-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-10EC4, U+10EFC-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;
}
/* latin */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/tajawal-Iurf6YBj_oCad4k1l5anHrFpiZtK6Gw.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;
}
/* arabic */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(fonts/tajawal-Iurf6YBj_oCad4k1l7KmHrRpiZtK6GwN9w.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-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-10EC4, U+10EFC-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;
}
/* latin */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(fonts/tajawal-Iurf6YBj_oCad4k1l7KmHrFpiZtK6Gw.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;
}


/* ==========================================================
   WEB ACADEMY — LANDING  ·  canvas design system (VI colors)
   mobile-first · RTL · single file
   ========================================================== */
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; scroll-padding-top:96px;}
html,body{max-width:100%;}
body{
  font-family:'Tajawal',sans-serif; background:var(--paper); color:var(--ink);
  line-height:1.7; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,svg{display:block; max-width:100%; height:auto;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
h1,h2,h3,h4{font-weight:800; color:var(--ink); letter-spacing:-.01em; text-wrap:balance;}
.en{font-family:'Poppins','Tajawal',sans-serif; direction:ltr; unicode-bidi:isolate;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 20px; min-width:0;}
::selection{background:var(--steel); color:#fff;}
:focus-visible{outline:2.5px solid var(--steel); outline-offset:3px; border-radius:6px;}

/* dotted canvas texture */
.canvas{position:relative;}
.canvas::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(circle, #d5dff0 1.15px, transparent 1.15px);
  background-size:24px 24px;
  -webkit-mask-image:radial-gradient(85% 80% at 50% 40%, #000 30%, transparent 100%);
          mask-image:radial-gradient(85% 80% at 50% 40%, #000 30%, transparent 100%);
}
.canvas > *{position:relative;}

/* eyebrow = the client's question */
.q{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13.5px; font-weight:700; color:var(--steel-deep);
  background:var(--sky-2); border:1px solid var(--sky);
  padding:7px 16px; border-radius:100px; margin-bottom:16px;
}
.q::before{content:"؟"; display:inline-flex; width:20px; height:20px; border-radius:50%;
  background:var(--steel); color:#fff; font-size:12px; align-items:center; justify-content:center; font-weight:800;}

/* script accent (the Xmind handwritten move, in Arabic) */
.script{
  font-family:'Aref Ruqaa',serif; font-weight:700; color:var(--steel);
  position:relative; display:inline-block; padding:0 .12em; line-height:1.25;
}
.script::before{
  content:""; position:absolute; inset:8% -2% 4%; z-index:-1;
  background:var(--sky); border-radius:6px; transform:rotate(-1.6deg);
}

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 26px; border-radius:13px; font-weight:800; font-size:15.5px;
  border:1.5px solid transparent; transition:transform .2s var(--ease), box-shadow .2s, background .2s, border-color .2s;
  white-space:nowrap;
}
.btn-primary{background:linear-gradient(180deg,#1d3a66,var(--ink-2)); color:#fff;
  box-shadow:0 14px 30px -14px rgba(18,41,79,.65), inset 0 1px 0 rgba(255,255,255,.16);}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 20px 38px -14px rgba(18,41,79,.75), inset 0 1px 0 rgba(255,255,255,.16);}
.btn-primary img{width:22px; height:22px;}
.btn-ghost{background:#fff; color:var(--ink-2); border-color:var(--line-2);}
.btn-ghost:hover{border-color:var(--steel); background:var(--sky-2); transform:translateY(-2px);}
.micro{font-size:12.5px; color:var(--faint); font-weight:500;}

/* card + node primitives */
.card{background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--card-sh);}
.chip{
  display:inline-flex; align-items:center; gap:7px; background:#fff; border:1px solid var(--line);
  border-radius:100px; padding:8px 14px; font-size:12.5px; font-weight:700; color:var(--soft);
  box-shadow:var(--card-sh); white-space:nowrap;
}
.chip b{color:var(--ink-2);}
.chip .ok{color:var(--green);}
.chip .live{width:7px; height:7px; border-radius:50%; background:#e25c4a; box-shadow:0 0 0 0 rgba(226,92,74,.5); animation:pulse 2s infinite; flex:none;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(226,92,74,.45);} 50%{box-shadow:0 0 0 6px rgba(226,92,74,0);}}

/* role cursors (Figma-style) */
.cursor{position:absolute; display:flex; align-items:flex-start; gap:2px; pointer-events:none; filter:drop-shadow(0 4px 10px rgba(14,28,54,.25));}
.cursor svg{width:17px; height:17px; flex:none;}
.cursor span{font-size:11.5px; font-weight:800; color:#fff; padding:4px 10px; border-radius:100px; margin-top:11px; white-space:nowrap;}
.cur-steel svg{fill:var(--steel);} .cur-steel span{background:var(--steel);}
.cur-brass svg{fill:var(--brass);} .cur-brass span{background:var(--brass);}
.cur-green svg{fill:var(--green);} .cur-green span{background:var(--green);}

/* reveal */
.rv{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.rv.in{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important;}
  .rv,.ha{opacity:1; transform:none;}
}

/* ---------- NAV ---------- */
header{position:fixed; top:12px; inset-inline:0; z-index:300; display:flex; justify-content:center; padding:0 12px; pointer-events:none;}
.nav{
  pointer-events:all; width:100%; max-width:1120px;
  background:rgba(255,255,255,.72); backdrop-filter:blur(18px) saturate(170%); -webkit-backdrop-filter:blur(18px) saturate(170%);
  border:1px solid rgba(220,230,246,.95); border-radius:16px;
  box-shadow:0 14px 40px -20px rgba(14,28,54,.28);
  padding:10px 14px; display:flex; align-items:center; justify-content:space-between; gap:14px;
  transition:background .3s, box-shadow .3s;
  position:relative;
}
header.scrolled .nav{background:rgba(255,255,255,.95); box-shadow:0 18px 44px -18px rgba(14,28,54,.38);}
.nav-logo img{height:34px; width:auto;}
.nav-links{display:none; gap:18px; align-items:center;}
.nav-links a{font-size:14px; font-weight:700; color:var(--soft); position:relative; padding:4px 0;}
.nav-links a::after{content:""; position:absolute; bottom:-2px; inset-inline:0; height:2.5px; border-radius:2px; background:var(--steel); transform:scaleX(0); transition:transform .2s var(--ease);}
.nav-links a:hover{color:var(--ink-2);} .nav-links a:hover::after{transform:scaleX(1);}
.nav-cta{display:none;}
.nav-cta .btn{padding:11px 20px; font-size:13.5px;}
.burger{display:flex; flex-direction:column; gap:4.5px; align-items:center; justify-content:center; width:44px; height:44px; border-radius:12px; border:1.5px solid var(--line-2); background:#fff;}
.burger span{width:17px; height:2.2px; background:var(--ink-2); border-radius:2px; transition:all .25s var(--ease);}
.burger.on span:nth-child(1){transform:translateY(6.7px) rotate(45deg);}
.burger.on span:nth-child(2){opacity:0;}
.burger.on span:nth-child(3){transform:translateY(-6.7px) rotate(-45deg);}
/* floating app-style menu — sections pop out as circles over a blurred canvas */
.fm{
  position:fixed; inset:0; z-index:420; display:flex; align-items:center; justify-content:center;
  padding:92px 22px 30px; overflow-y:auto;
  background:rgba(14,25,48,.42);
  backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%);
  opacity:0; pointer-events:none; transition:opacity .35s var(--ease);
}
.fm.on{opacity:1; pointer-events:all;}
.fm-inner{width:100%; max-width:430px; text-align:center; margin:auto;}
.fm-head{color:#fff; margin-bottom:26px; opacity:0; transform:translateY(14px);
  transition:opacity .4s var(--ease) .05s, transform .4s var(--ease) .05s;}
.fm.on .fm-head{opacity:1; transform:none;}
.fm-head b{display:block; font-size:20px; font-weight:900;}
.fm-head b .script{color:#8fb4e4;}
.fm-head b .script::before{background:rgba(95,159,230,.2);}
.fm-head small{font-size:12.5px; color:#c4d2ea; font-weight:600;}
.fm-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px 12px;}
.fm-item{
  display:flex; flex-direction:column; align-items:center; gap:9px;
  opacity:0; transform:translateY(38px) scale(.3);
  transition:opacity .18s ease, transform .18s ease;
}
.fm.on .fm-item{
  opacity:1; transform:none;
  transition:opacity .5s var(--ease) calc(var(--i)*.045s),
             transform .6s cubic-bezier(.34,1.56,.64,1) calc(var(--i)*.045s);
}
.fm-item .bub{
  width:64px; height:64px; border-radius:50%;
  background:rgba(255,255,255,.96); border:1px solid rgba(255,255,255,.65);
  color:var(--steel-deep); display:flex; align-items:center; justify-content:center;
  box-shadow:0 18px 40px -14px rgba(5,12,28,.6);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), background .2s;
}
.fm-item .bub svg{width:26px; height:26px;}
.fm-item:hover .bub, .fm-item:active .bub{transform:scale(1.12) translateY(-3px); background:#fff;}
.fm-item .lbl{font-size:12.5px; font-weight:800; color:#fff; text-shadow:0 2px 10px rgba(5,12,28,.5);}
.fm-cta{margin-top:28px; opacity:0; transform:translateY(20px);
  transition:opacity .45s var(--ease) .44s, transform .5s cubic-bezier(.34,1.56,.64,1) .44s;}
.fm.on .fm-cta{opacity:1; transform:none;}
.fm-cta .btn{width:100%; box-shadow:0 20px 46px -16px rgba(5,12,28,.7);}
header.menu-open{z-index:430; transform:none !important;}
header.menu-open .nav{background:rgba(255,255,255,.92);}
@media(min-width:1000px){ .fm{display:none;} }
@media(min-width:1000px){ .nav-links{display:flex;} .nav-cta{display:flex;} .burger{display:none;} }

/* ---------- HERO ---------- */
.hero{padding:118px 0 46px; text-align:center; overflow:clip;}
.hero .wrap{max-width:1240px;}
.hero-center{max-width:790px; margin:0 auto; position:relative; z-index:3;}
@property --hea{syntax:'<angle>'; initial-value:0deg; inherits:false;}
.hero-eyebrow{
  position:relative; display:inline-flex; align-items:center; gap:12px;
  font-size:13.5px; font-weight:800;
  border:1.5px solid transparent; border-radius:100px; padding:9px 20px; margin-bottom:22px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.68)) padding-box,
    conic-gradient(from var(--hea,40deg),
      rgba(205,217,236,.55) 0turn, rgba(44,100,173,.95) .12turn, rgba(192,149,71,.85) .2turn,
      rgba(205,217,236,.55) .34turn, rgba(205,217,236,.55) .62turn,
      rgba(44,100,173,.5) .74turn, rgba(205,217,236,.55) .88turn) border-box;
  -webkit-backdrop-filter:blur(10px) saturate(1.3); backdrop-filter:blur(10px) saturate(1.3);
  box-shadow:0 14px 34px -18px rgba(18,41,79,.5), inset 0 1px 0 rgba(255,255,255,.85);
  animation:heSpin 6s linear infinite;
}
.hero-eyebrow::after{
  content:""; position:absolute; inset:-7px; border-radius:inherit; pointer-events:none;
  border:1px solid rgba(44,100,173,.22); opacity:0; animation:heHalo 6s var(--ease) infinite;
}
.hero-eyebrow .he-pulse{display:flex; color:var(--steel); position:relative;}
.hero-eyebrow .he-pulse svg{width:38px; height:13px; overflow:visible;}
.hero-eyebrow .he-pulse .base{fill:none; stroke:var(--line-2); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
.hero-eyebrow .he-pulse .beat{
  fill:none; stroke:url(#heGrad); stroke:var(--steel); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:16 68; stroke-dashoffset:16; animation:heTrace 2.6s linear infinite;
  filter:drop-shadow(0 0 3px rgba(44,100,173,.55));
}
.hero-eyebrow .he-txt{
  background:linear-gradient(105deg,var(--ink-2) 20%,var(--steel) 42%,#5d87c0 50%,var(--steel) 58%,var(--ink-2) 80%);
  background-size:230% 100%; -webkit-background-clip:text; background-clip:text;
  color:transparent; animation:heSheen 7s ease-in-out infinite;
}
@keyframes heSpin{to{--hea:400deg;}}
/* the .ha entrance sets `animation`, so the eyebrow needs both declared together */
.hero-eyebrow.ha{animation:haIn .75s var(--ease) forwards, heSpin 6s linear infinite;}
@keyframes heTrace{to{stroke-dashoffset:-68;}}
@keyframes heSheen{0%,100%{background-position:120% 0;} 50%{background-position:-20% 0;}}
@keyframes heHalo{0%,58%,100%{opacity:0; transform:scale(.92);} 72%{opacity:1; transform:scale(1);} 86%{opacity:0; transform:scale(1.08);}}
@supports not (background:conic-gradient(from var(--hea,0deg),#fff,#fff)){
  .hero-eyebrow{animation:none;}
}
@media (prefers-reduced-motion:reduce){
  .hero-eyebrow, .hero-eyebrow::after, .hero-eyebrow .he-pulse .beat, .hero-eyebrow .he-txt{animation:none;}
  .hero-eyebrow .he-txt{background-position:50% 0;}
}
.hero h1{font-size:clamp(46px,11vw,96px); line-height:1.22; font-weight:900; letter-spacing:-.02em;}
.hero h1 .row{display:block;}
.hero h1 .script{font-size:.94em;}
.hero-sub{
  font-size:clamp(15.5px,2vw,19px); color:var(--soft); max-width:640px; margin:22px auto 30px; font-weight:500;
}
.hero-sub b{color:var(--ink-2);}
.hero-actions{display:flex; flex-direction:column; gap:11px; align-items:center; margin-bottom:14px;}
.hero-actions .btn{width:100%; max-width:420px;}
@media(min-width:640px){ .hero-actions{flex-direction:row; justify-content:center;} .hero-actions .btn{width:auto;} }
.hero-micro{display:flex; flex-wrap:wrap; justify-content:center; gap:6px 18px;}

/* hero floating nodes (desktop) */
.node{position:absolute; z-index:2;}
.node .card{padding:14px 16px; text-align:right;}
.node .t{font-size:11px; font-weight:800; color:var(--steel); letter-spacing:.02em; margin-bottom:4px; display:block;}
.node .n{font-size:14.5px; font-weight:800; color:var(--ink-2); line-height:1.4;}
.node .s{font-size:12px; color:var(--faint); font-weight:500;}
.tile{ /* periodic-table style tile */
  width:120px; padding:12px 14px; text-align:right; border-top:3px solid var(--steel);
}
.tile .no{font-size:11px; color:var(--faint); font-weight:700;}
.tile .sym{font-size:30px; font-weight:900; color:var(--ink-2); line-height:1.15; font-family:'Poppins','Tajawal',sans-serif; direction:ltr;}
.tile .lbl{font-size:11.5px; color:var(--soft); font-weight:700;}
.tile.gold{border-top-color:var(--brass);}
.tile.green{border-top-color:var(--green);}
.cert-node{width:190px; padding:16px; text-align:center; border:1px solid var(--line); position:relative;}
.cert-node::before{content:""; position:absolute; inset:6px; border:1.5px solid var(--brass); border-radius:9px; opacity:.55;}
.cert-node img{width:40px; height:40px; margin:0 auto 8px;}
.cert-node .cn{font-size:12.5px; font-weight:800; color:var(--ink-2); position:relative;}
.cert-node .cs{font-size:10.5px; color:var(--faint); position:relative;}
.hero-lines{position:absolute; inset:0; z-index:1; pointer-events:none;}
.hero-lines path{fill:none; stroke:var(--line-2); stroke-width:1.6;}
.hero-lines .dash{stroke-dasharray:5 6;}
.hero-lines .arr{fill:var(--line-2); stroke:none;}
.hero-nodes{display:none;}
@media(min-width:1020px){
  .hero{padding:150px 0 70px;}
  .hero-nodes{display:block; position:absolute; inset:0;}
  .hn1{top:96px; inset-inline-start:2%;}
  .hn2{top:262px; inset-inline-start:6.5%;}
  .hn3{top:390px; inset-inline-start:1.5%;}
  .hn4{top:88px; inset-inline-end:3%;}
  .hn5{top:236px; inset-inline-end:1%;}
  .hn6{top:335px; inset-inline-end:9%;}
  .hn7{bottom:-8px; inset-inline-end:4%;}
  .cursor-1{top:212px; inset-inline-start:14.5%;}
  .cursor-2{top:436px; inset-inline-end:6.5%;}
  .cursor-3{bottom:34px; inset-inline-start:9%;}
  .float-a{animation:floaty 7s ease-in-out infinite;}
  .float-b{animation:floaty 9s ease-in-out 1.2s infinite;}
  @keyframes floaty{0%,100%{transform:translateY(0);} 50%{transform:translateY(-9px);}}
}

/* hero mobile mini-canvas */
.m-canvas{
  margin:30px auto 0; max-width:520px; border:1.5px dashed var(--line-2); border-radius:18px;
  padding:18px 14px 16px; position:relative; background:rgba(255,255,255,.55);
}
.m-canvas .rowc{display:flex; flex-wrap:wrap; gap:8px; justify-content:center;}
.m-canvas .rowc + .rowc{margin-top:9px;}
.m-canvas .cursor{position:absolute; top:-13px; inset-inline-end:16px;}
@media(min-width:1020px){ .m-canvas{display:none;} }

/* hero background slider — real product views, faint & modern */
.hero-bg{position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;}
.hero-bg .hb{
  position:absolute; left:50%; top:56%; width:min(1240px,96vw); height:auto;
  transform:translate(-50%,-50%) scale(1.01); border-radius:20px;
  opacity:0; transition:opacity 1.8s var(--ease); filter:saturate(.85);
  box-shadow:0 40px 90px -40px rgba(14,28,54,.35);
}
.hero-bg .hb.on{opacity:.27; animation:kburns 14s linear forwards;}
@keyframes kburns{from{transform:translate(-50%,-50%) scale(1.01);} to{transform:translate(-50%,-50%) scale(1.055);}}
.hb-veil{position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(251,252,254,.68) 0%, rgba(251,252,254,.28) 46%, var(--paper) 97%);}
@media(max-width:1019px){
  .hero-bg .hb{top:46%; width:150vw; max-width:none;}
  .hero-bg .hb.on{opacity:.16;}
}
/* slide indicator: tells the visitor the backdrop is the real product */
.hb-tag{
  margin:26px auto 0; width:fit-content; display:flex; align-items:center; gap:10px;
  background:#fff; border:1px solid var(--line); border-radius:100px; padding:8px 16px;
  box-shadow:var(--card-sh); font-size:12px; font-weight:800; color:var(--soft);
}
.hb-tag .dots{display:flex; gap:5px;}
.hb-tag .dots i{width:6px; height:6px; border-radius:50%; background:var(--line-2); transition:all .3s var(--ease);}
.hb-tag .dots i.on{background:var(--steel); width:16px; border-radius:4px;}
.hb-tag b{color:var(--steel-deep); min-width:88px; text-align:center;}

/* ---------- GALLERY (inside the product) ---------- */
.g-tabs{
  display:flex; gap:4px; width:fit-content; max-width:100%; margin:0 auto 30px;
  background:#fff; border:1px solid var(--line); border-radius:100px; padding:5px;
  box-shadow:var(--card-sh); overflow-x:auto; scrollbar-width:none;
}
.g-tabs::-webkit-scrollbar{display:none;}
.g-tab{
  border:none; background:transparent; border-radius:100px; padding:10px 20px;
  font-size:13.5px; font-weight:800; color:var(--soft); white-space:nowrap;
  transition:background .2s, color .2s;
}
.g-tab .n{font-size:10.5px; font-weight:700; opacity:.65; margin-inline-start:4px;}
.g-tab.on{background:linear-gradient(180deg,#1d3a66,var(--ink-2)); color:#fff;}
.g-tab:not(.on):hover{background:var(--sky-2); color:var(--ink-2);}
.g-panel[hidden]{display:none;}
.g-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
.shot{overflow:hidden; padding:0; cursor:zoom-in; transition:transform .25s var(--ease), box-shadow .25s; text-align:right;}
.shot:hover{transform:translateY(-5px); box-shadow:var(--card-sh-lg);}
.shot-bar{display:flex; align-items:center; gap:9px; padding:9px 14px; background:var(--paper-2); border-bottom:1px solid var(--line);}
.shot-bar .b-dots span{width:8px; height:8px;}
.shot-bar .t{font-size:10.5px; font-weight:800; color:var(--faint); margin-inline-start:auto;}
.shot img{width:100%; height:auto; display:block;}
.shot-cap{padding:16px 18px 18px; border-top:1px solid var(--line);}
.shot-cap h4{font-size:15.5px; margin-bottom:5px;}
.shot-cap p{font-size:13px; color:var(--soft); font-weight:500; line-height:1.65;}
.g-anim{animation:gIn .45s var(--ease) both;}
@keyframes gIn{from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;}}
.g-note{margin-top:26px; text-align:center;}
@media(min-width:901px){ .g-grid:not(.phones) .shot:first-child{grid-column:1/-1;} }
@media(max-width:900px){
  .g-grid{display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    margin:0 -20px; padding:4px 20px 10px;}
  .g-grid::-webkit-scrollbar{display:none;}
  .g-grid .shot{flex:0 0 84%; scroll-snap-align:center;}
}

/* lightbox */
.lb{position:fixed; inset:0; z-index:500; display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(14,24,46,.5); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease);}
.lb.on{opacity:1; pointer-events:all;}
.lb-box{max-width:min(1060px,96vw); max-height:92svh; overflow:auto; background:#fff; border-radius:18px;
  box-shadow:0 60px 120px -40px rgba(0,0,0,.6); transform:scale(.96); transition:transform .3s var(--ease);}
.lb.on .lb-box{transform:none;}
.lb-box img{width:100%; height:auto; display:block;}
.lb-cap{padding:16px 20px 20px; display:flex; gap:14px; align-items:flex-start; justify-content:space-between;}
.lb-cap h4{font-size:16px; margin-bottom:4px;}
.lb-cap p{font-size:13.5px; color:var(--soft); font-weight:500; max-width:640px;}
.lb-x{flex:none; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:#fff; cursor:pointer;
  font-size:17px; font-weight:800; color:var(--soft); display:flex; align-items:center; justify-content:center;}
.lb-x:hover{background:var(--sky-2); color:var(--ink-2);}


/* phone-format gallery cards */
.g-grid.phones{grid-template-columns:repeat(5,1fr); gap:16px;}
.g-grid.phones .shot img{border-radius:0;}
.g-grid.phones .shot-cap{padding:13px 14px 15px;}
.g-grid.phones .shot-cap h4{font-size:14px;}
.g-grid.phones .shot-cap p{font-size:11.8px; line-height:1.6;}
.g-grid.phones .shot-bar{padding:7px 12px;}
@media(max-width:900px){
  .g-grid.phones{display:flex;}
  .g-grid.phones .shot{flex:0 0 58%;}
}
@media(min-width:901px) and (max-width:1150px){ .g-grid.phones{grid-template-columns:repeat(4,1fr);} }
#lbImg{max-height:74svh; width:auto; max-width:100%; margin:0 auto; object-fit:contain; display:block;}

/* minimal auto-hiding mobile nav + bottom-sheet menu */
header{transition:transform .35s var(--ease);}
header.slide-up{transform:translateY(-130%);}
@media(max-width:999px){
  header{top:8px; padding:0 10px;}
  .nav{padding:7px 11px; border-radius:14px;}
  .nav-logo img{height:29px;}
  .burger{width:40px; height:40px; border-radius:11px;}
}

/* ---------- REPORTS ---------- */
.rep-visual{position:relative; padding-block:8px;}
.rep-card{padding:20px; max-width:430px; margin-inline-start:auto;}
.rep-head{display:flex; align-items:center; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--line); margin-bottom:6px;}
.rep-head .ri{width:42px; height:42px; border-radius:12px; background:var(--sky-2); border:1px solid var(--sky); color:var(--steel-deep); display:flex; align-items:center; justify-content:center; flex:none;}
.rep-head .ri svg{width:20px; height:20px;}
.rep-head b{font-size:15px; color:var(--ink-2); display:block;}
.rep-head small{font-size:11px; color:var(--faint); font-weight:700;}
.rep-row{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:11px 0; border-bottom:1px dashed var(--line); font-size:13px; font-weight:700;}
.rep-row span:first-child{color:var(--soft);}
.rep-row .v{font-family:'Poppins','Tajawal',sans-serif; color:var(--ink-2); direction:ltr;}
.rep-row .up{color:var(--green); font-size:11px;}
.rep-foot{display:flex; gap:7px; margin-top:14px; flex-wrap:wrap;}
.rep-foot span{font-size:11px; font-weight:800; color:var(--steel-deep); background:var(--sky-2); border:1px solid var(--sky); border-radius:100px; padding:5px 12px;}
.rep-sched{margin-top:14px; max-width:430px; margin-inline-start:auto; padding:14px 18px; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;}
.rep-sched .lbl{font-size:12.5px; font-weight:800; color:var(--soft);}
.rep-seg{display:flex; background:var(--paper-2); border:1px solid var(--line); border-radius:100px; padding:3px;}
.rep-seg span{font-size:11.5px; font-weight:800; color:var(--faint); padding:6px 14px; border-radius:100px;}
.rep-seg span.on{background:linear-gradient(180deg,#1d3a66,var(--ink-2)); color:#fff;}
.rep-float{position:absolute; top:-14px; inset-inline-end:6%;}

/* hero entrance */
.ha{opacity:0; transform:translateY(16px); animation:haIn .75s var(--ease) forwards;}
.d1{animation-delay:.05s;}.d2{animation-delay:.14s;}.d3{animation-delay:.24s;}.d4{animation-delay:.34s;}.d5{animation-delay:.46s;}.d6{animation-delay:.6s;}
@keyframes haIn{to{opacity:1; transform:none;}}

/* ---------- STATS STRIP ---------- */
.stats{border-block:1px solid var(--line); background:#fff;}
.stats .wrap{display:grid; grid-template-columns:repeat(2,1fr); gap:0;}
.stat{padding:22px 10px; text-align:center; border-inline-start:1px solid var(--line);}
.stat:nth-child(odd){border-inline-start:0;}
.stat .v{font-family:'Poppins','Tajawal',sans-serif; font-size:clamp(24px,4vw,34px); font-weight:700; color:var(--ink-2); direction:ltr;}
.stat .v i{font-style:normal; color:var(--steel);}
.stat .l{font-size:12.5px; color:var(--faint); font-weight:700;}
@media(min-width:900px){
  .stats .wrap{grid-template-columns:repeat(5,1fr);}
  .stat{border-inline-start:1px solid var(--line) !important; padding:28px 10px;}
  .stat:first-child{border-inline-start:0 !important;}
}

/* ---------- SECTION SHELL ---------- */
.sec{padding:64px 0;}
.sec-head{max-width:720px; margin-bottom:38px;}
.sec-head.center{margin-inline:auto; text-align:center;}
.sec-head h2{font-size:clamp(27px,6.4vw,46px); line-height:1.3; margin-bottom:14px;}
.sec-head h2 .script{font-size:.95em;}
.sec-head p{font-size:15.5px; color:var(--soft); font-weight:500;}

/* ---------- inline contextual links ----------
   The global reset sets `a{color:inherit; text-decoration:none}`, so a link
   dropped into body copy is completely invisible — unusable for both readers
   and crawlers. This class is purely additive (nothing existing carries it)
   and gives section prose a real, visible link treatment so the landing page
   can pass relevance down to the matching blog article. */
.inline-link{
  color:var(--steel); font-weight:700;
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1.5px; text-decoration-color:rgba(44,100,173,.38);
  transition:text-decoration-color .18s ease, color .18s ease;
}
.inline-link:hover{text-decoration-color:var(--steel);}
/* the dark bento sections need a lighter tone to keep AA contrast */
.bento-dark .inline-link,.app-sec .inline-link{color:#9dc0ee; text-decoration-color:rgba(157,192,238,.42);}
.bento-dark .inline-link:hover,.app-sec .inline-link:hover{text-decoration-color:#9dc0ee;}
.alt{background:var(--paper-2);}
@media(min-width:900px){ .sec{padding:104px 0;} .sec-head{margin-bottom:56px;} .sec-head p{font-size:17px;} }

/* ---------- STORY (3 moves) ---------- */
.story{display:grid; grid-template-columns:1fr; gap:16px; position:relative;}
.story-step{padding:26px 22px; position:relative; overflow:hidden;}
.story-step .num{
  font-family:'Aref Ruqaa',serif; font-size:44px; color:var(--sky); font-weight:700;
  position:absolute; top:2px; inset-inline-end:18px; line-height:1;
}
.story-step .ic{width:46px; height:46px; border-radius:13px; background:var(--sky-2); border:1px solid var(--sky);
  display:flex; align-items:center; justify-content:center; color:var(--steel-deep); margin-bottom:14px;}
.story-step .ic svg{width:22px; height:22px;}
.story-step h3{font-size:20px; margin-bottom:8px;}
.story-step h3 .script{font-size:1.05em;}
.story-step p{font-size:14px; color:var(--soft); font-weight:500;}
.story-arrow{display:none;}
@media(min-width:900px){
  .story{grid-template-columns:repeat(3,1fr); gap:38px;}
  .story-arrow{display:block; position:absolute; top:38%; width:46px; z-index:2;}
  .story-arrow svg{width:100%;}
  .story-arrow path{fill:none; stroke:var(--line-2); stroke-width:2; stroke-dasharray:4 5;}
  .story-arrow .head{fill:var(--line-2); stroke:none;}
  .sa1{inset-inline-start:calc(33.33% - 30px);}
  .sa2{inset-inline-start:calc(66.66% - 30px);}
}

/* ---------- MAP (journey spine) ---------- */
.map-center{
  width:fit-content; margin:0 auto 8px; display:flex; align-items:center; gap:12px;
  background:linear-gradient(180deg,#1d3a66,var(--ink-2)); color:#fff; border-radius:16px; padding:14px 22px;
  box-shadow:var(--card-sh-lg);
}
.map-center img{width:38px; height:38px;}
.map-center .mt{font-weight:900; font-size:17px;}
.map-center .ms{font-size:11px; color:#b9c9e4; font-weight:500;}
.map-spine{width:2px; height:34px; background:var(--line-2); margin:0 auto;}
.map-grid{display:grid; grid-template-columns:1fr; gap:12px; counter-reset:mapn;}
.map-item{display:grid; grid-template-columns:44px 1fr; gap:14px; padding:18px; align-items:start; transition:transform .2s var(--ease), box-shadow .2s, border-color .2s;}
.map-item:hover{transform:translateY(-4px); box-shadow:var(--card-sh-lg); border-color:var(--line-2);}
.map-item .mi{width:44px; height:44px; border-radius:12px; background:var(--sky-2); border:1px solid var(--sky);
  display:flex; align-items:center; justify-content:center; color:var(--steel-deep); position:relative;}
.map-item .mi::after{counter-increment:mapn; content:counter(mapn); position:absolute; top:-7px; inset-inline-end:-7px;
  width:19px; height:19px; border-radius:50%; background:var(--steel); color:#fff; font-size:11px; font-weight:800;
  display:flex; align-items:center; justify-content:center;}
.map-item .mi svg{width:21px; height:21px;}
.map-item h3{font-size:16.5px; margin-bottom:3px;}
.map-item p{font-size:13px; color:var(--soft); font-weight:500;}
.map-item .go{font-size:12.5px; font-weight:800; color:var(--steel); margin-top:7px; display:inline-block;}
@media(min-width:900px){
  .map-grid{grid-template-columns:repeat(3,1fr); gap:22px;}
  .map-spine{height:44px;}
}

/* ---------- FEATURE SECTIONS ---------- */
.duo{display:grid; grid-template-columns:1fr; gap:34px; align-items:center;}
@media(min-width:960px){ .duo{grid-template-columns:1fr 1fr; gap:64px;} .duo.flip .visual{order:2;} }
.flist{display:flex; flex-direction:column;}
.fitem{display:grid; grid-template-columns:42px 1fr; gap:14px; padding:17px 0; border-top:1px solid var(--line); align-items:start;}
.fitem:last-child{border-bottom:1px solid var(--line);}
.fitem .fi{width:42px; height:42px; border-radius:12px; background:#fff; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--steel-deep); box-shadow:var(--card-sh);}
.fitem .fi svg{width:19px; height:19px;}
.fitem h4{font-size:15.5px; margin-bottom:4px;}
.fitem p{font-size:13.5px; color:var(--soft); font-weight:500;}

/* browser mockup */
.browser{border-radius:16px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--card-sh-lg); background:#fff;}
.b-bar{display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--paper-2); border-bottom:1px solid var(--line);}
.b-dots{display:flex; gap:6px;}
.b-dots span{width:9px; height:9px; border-radius:50%; background:var(--line-2);}
.b-dots span:nth-child(1){background:#e88;} .b-dots span:nth-child(2){background:#e7c46a;} .b-dots span:nth-child(3){background:#7cbf8e;}
.b-url{flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  background:#fff; border:1px solid var(--line); border-radius:8px; padding:6px 12px;
  font-family:'Poppins',monospace; font-size:11px; color:var(--faint); direction:ltr; text-align:center;}
.b-url .b-lock{width:11px; height:11px; color:var(--green); flex:none;}
.b-url .b-path{color:var(--steel); font-weight:600;}

/* real screenshot inside the browser frame */
.browser-shot{margin:0; background:var(--paper-2);}
/* fixed aspect keeps layout stable whatever the screenshot's real dimensions are */
.b-shot-wrap{position:relative; aspect-ratio:16/12; overflow:hidden; background:#eef2f9;}
.b-shot-wrap::after{content:""; position:absolute; inset-inline:0; bottom:0; height:90px; pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.92));}
.b-shot{display:block; width:100%; height:100%; object-fit:cover; object-position:top center;}
.b-cap{display:flex; align-items:center; gap:8px; padding:11px 14px; border-top:1px solid var(--line);
  background:#fff; font-size:11.5px; font-weight:600; color:var(--soft); line-height:1.6;}
.b-live{width:7px; height:7px; border-radius:50%; background:var(--green); flex:none;
  box-shadow:0 0 0 3px rgba(101,192,127,.18);}
@media(max-width:700px){ .b-shot-wrap{max-height:380px;} }

/* teach visual — module tree + quiz */
.teach-visual{position:relative; padding-inline-start:8px;}
.mod-card{padding:18px; max-width:400px;}
.mod-row{display:flex; align-items:center; gap:10px; padding:10px 4px; border-top:1px solid var(--line); font-size:13px; font-weight:700; color:var(--ink-2);}
.mod-row:first-of-type{border-top:0;}
.mod-row .mr-ic{width:28px; height:28px; border-radius:8px; background:var(--sky-2); color:var(--steel-deep);
  display:flex; align-items:center; justify-content:center; flex:none;}
.mod-row .mr-ic svg{width:14px; height:14px;}
.mod-row .len{margin-inline-start:auto; font-size:11px; color:var(--faint); font-weight:600;}
.mod-row .badge{font-size:10px; background:var(--sky-2); color:var(--steel-deep); border-radius:6px; padding:2px 8px; font-weight:800;}
.quiz-pop{position:absolute; bottom:-18px; inset-inline-end:0; width:210px; padding:14px 16px; text-align:center;}
.quiz-pop .qp-t{font-size:11px; font-weight:800; color:var(--steel); margin-bottom:4px;}
.quiz-pop .qp-v{font-size:26px; font-weight:900; color:var(--ink-2); font-family:'Poppins','Tajawal',sans-serif;}
.quiz-pop .qp-s{font-size:11px; color:var(--green); font-weight:700;}

/* AI cards */
.ai-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.ai-card{padding:20px 17px; transition:transform .2s var(--ease), box-shadow .2s;}
.ai-card:hover{transform:translateY(-5px); box-shadow:var(--card-sh-lg);}
.ai-card .ai-ic{width:40px; height:40px; border-radius:12px; background:var(--sky-2); border:1px solid var(--sky);
  color:var(--steel-deep); display:flex; align-items:center; justify-content:center; margin-bottom:13px;}
.ai-card .ai-ic svg{width:19px; height:19px;}
.ai-card h4{font-size:15px; margin-bottom:6px;}
.ai-card p{font-size:12.5px; color:var(--soft); font-weight:500;}
@media(min-width:900px){ .ai-grid{grid-template-columns:repeat(4,1fr); gap:18px;} .ai-card{padding:24px 20px;} }

/* payments */
.pay-marquee{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); margin:26px 0 34px;}
.pay-track{display:flex; gap:12px; width:max-content; animation:scrollX 30s linear infinite;}
.pay-marquee:hover .pay-track{animation-play-state:paused;}
@keyframes scrollX{from{transform:translateX(0);} to{transform:translateX(50%);}} /* RTL: moves right */
.pay-chip{display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:11px 18px; font-weight:800; font-size:14px; color:var(--ink-2); box-shadow:var(--card-sh); white-space:nowrap;}
.pay-chip .en{font-size:13.5px;}
.pay-chip em{font-style:normal; width:8px; height:8px; border-radius:50%; background:var(--steel); opacity:.5;}
.fin-grid{display:grid; grid-template-columns:1fr; gap:14px;}
@media(min-width:900px){ .fin-grid{grid-template-columns:repeat(3,1fr); gap:20px;} }
.fin-card{padding:22px 20px;}
.fin-card .fc-ic{width:42px; height:42px; border-radius:12px; background:var(--sky-2); border:1px solid var(--sky); color:var(--steel-deep);
  display:flex; align-items:center; justify-content:center; margin-bottom:14px;}
.fin-card .fc-ic svg{width:19px; height:19px;}
.fin-card h4{font-size:16px; margin-bottom:6px;}
.fin-card p{font-size:13px; color:var(--soft); font-weight:500;}
.fin-dash{margin-top:26px; padding:20px; display:grid; grid-template-columns:1fr; gap:14px;}
.fin-dash .fd-head{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;}
.fin-dash .fd-head .t{font-size:13px; font-weight:800; color:var(--soft);}
.fin-dash .fd-num{font-family:'Poppins','Tajawal',sans-serif; font-size:30px; font-weight:700; color:var(--ink-2); direction:ltr;}
.fin-dash .delta{font-size:12px; font-weight:700; color:var(--green); background:#e9f4ee; padding:5px 11px; border-radius:8px; direction:ltr;}
.fd-bars{display:flex; align-items:flex-end; gap:7px; height:110px;}
.fd-bars i{flex:1; border-radius:5px 5px 0 0; background:linear-gradient(180deg,#5a86c4,var(--steel-deep)); opacity:.9; transform-origin:bottom; animation:grow 1s var(--ease) both;}
.fd-bars i.pk{background:linear-gradient(180deg,var(--brass),#a37a2e); opacity:1;}
@keyframes grow{from{transform:scaleY(0);} to{transform:scaleY(1);}}
.fd-rows{display:flex; flex-direction:column;}
.fd-row{display:flex; justify-content:space-between; gap:10px; padding:10px 0; border-top:1px dashed var(--line); font-size:12.5px; font-weight:700;}
.fd-row span:first-child{color:var(--soft);}
.fd-row span:last-child{color:var(--ink-2); font-family:'Poppins','Tajawal',sans-serif; direction:ltr;}
.fd-row .ok{color:var(--green) !important; font-family:'Tajawal',sans-serif !important;}
@media(min-width:900px){ .fin-dash{grid-template-columns:1.2fr 1fr; gap:26px; padding:26px;} }

/* security */
.sec-visual{padding:22px; position:relative;}
.sec-visual .sv-head{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.sec-visual .sv-head .dot{width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 10px var(--green);}
.sec-visual .sv-head b{font-size:13.5px; color:var(--ink-2);}
.sv-row{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:11px 0; border-top:1px solid var(--line); font-size:12.5px;}
.sv-row .f{font-family:'Poppins',monospace; direction:ltr; color:var(--soft); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sv-row .st{color:var(--green); font-weight:800; white-space:nowrap; display:flex; align-items:center; gap:6px;}
.sv-row .st::before{content:"●"; font-size:8px;}
.wm-tag{position:absolute; top:-13px; inset-inline-start:18px; background:var(--ink-2); color:#fff; font-size:11px; font-weight:800; padding:6px 14px; border-radius:100px; box-shadow:var(--card-sh);}

/* ---------- APP SECTION (dark canvas) ---------- */
.app-sec{background:linear-gradient(175deg,#101f3d 0%,#0b1730 100%); color:#fff; overflow:clip;}
.app-sec.canvas::before{background-image:radial-gradient(circle, rgba(255,255,255,.09) 1.15px, transparent 1.15px);}
.app-sec .sec-head h2{color:#fff;}
.app-sec .sec-head p{color:#aebdd8;}
.app-sec .q{background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.14); color:#cfdcf1;}
.app-sec .script{color:#8fb4e4;}
.app-sec .script::before{background:rgba(95,159,230,.16);}
.app-duo{display:grid; grid-template-columns:1fr; gap:40px; align-items:center;}
@media(min-width:960px){ .app-duo{grid-template-columns:1fr 1.1fr; gap:60px;} }
.app-flist .fitem{border-color:rgba(255,255,255,.1);}
.app-flist .fitem .fi{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); color:#8fb4e4; box-shadow:none;}
.app-flist h4{color:#fff;}
.app-flist p{color:#a3b4d1;}
.app-badges{display:flex; gap:10px; margin-top:20px; flex-wrap:wrap;}
/* Anchors now, not <span>s — they used to look tappable and do nothing.
   The interactive affordances (cursor, hover lift, focus ring) exist because
   the element is genuinely a link; a badge that reads as a button has to
   behave like one. */
.store-badge{display:inline-flex; align-items:center; gap:9px; border:1px solid rgba(255,255,255,.2);
  border-radius:12px; padding:10px 18px; background:rgba(255,255,255,.05); cursor:pointer;
  transition:transform .2s var(--ease), background .2s, border-color .2s;}
.store-badge:hover{transform:translateY(-2px); background:rgba(255,255,255,.11); border-color:rgba(255,255,255,.38);}
.store-badge:focus-visible{outline:2.5px solid #8fb4e4; outline-offset:3px;}
/* Not published yet. Dimmed and outlined rather than filled, so the two
   badges are distinguishable at a glance and the live one is the one that
   draws the eye. Still a link — it goes to #contact, which is where someone
   who wants the iOS build should land. */
.store-badge.is-soon{background:transparent; border-style:dashed; border-color:rgba(255,255,255,.28);}
.store-badge.is-soon .lg{color:#cdd9ec;}
.store-badge.is-soon svg{fill:#cdd9ec;}
.store-badge.is-soon:hover{background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.45);}
.store-badge svg{width:20px; height:20px; fill:#fff; flex:none;}
/* The store name is a Latin proper noun inside an RTL page. `text-align:start`
   keeps the two lines aligned to the reading edge in both directions, where
   the old hardcoded `right` left the EN page's badges ragged. */
.store-badge div{text-align:start; line-height:1.25;}
.store-badge .sm{font-size:9.5px; color:#94a7c8; font-weight:500; display:block;}
.store-badge .lg{font-size:13.5px; color:#fff; font-weight:800; display:block;
  font-family:'Poppins','Tajawal',sans-serif; direction:ltr; unicode-bidi:isolate;}
/* phone mockup */
.phone-wrap{display:flex; justify-content:center; position:relative;}
.phone{
  width:min(300px,80vw); border-radius:42px; background:#0a1226; border:1.5px solid rgba(255,255,255,.15);
  box-shadow:0 50px 100px -40px rgba(0,0,0,.7), inset 0 0 0 7px #060c1c;
  padding:14px; position:relative;
}
.phone::before{content:""; position:absolute; top:14px; left:50%; transform:translateX(-50%);
  width:96px; height:24px; background:#060c1c; border-radius:0 0 14px 14px; z-index:3;}
.p-screen{border-radius:30px; background:#eef2f9; overflow:hidden; position:relative;}
.p-shot{display:block; width:100%; height:auto;}
.p-float{position:absolute; z-index:4;}
.pf1{top:12%; inset-inline-start:-34px;}
.pf2{bottom:20%; inset-inline-end:-30px;}
@media(max-width:520px){ .pf1{inset-inline-start:-6px;} .pf2{inset-inline-end:-4px;} }

/* ---------- PERFORMANCE ---------- */
.perf-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media(min-width:900px){ .perf-grid{grid-template-columns:repeat(4,1fr); gap:18px;} }
.perf-card{padding:22px 18px; text-align:center;}
.perf-card .pv{font-family:'Poppins','Tajawal',sans-serif; font-size:clamp(26px,5vw,38px); font-weight:700; color:var(--ink-2); direction:ltr;}
.perf-card .pv i{font-style:normal; color:var(--steel); font-size:.6em; font-weight:600;}
.perf-card .pl{font-size:12.5px; color:var(--soft); font-weight:700; margin-top:4px;}
.perf-note{
  margin-top:26px; display:flex; gap:14px; align-items:flex-start; padding:20px 22px;
  border-inline-start:3px solid var(--brass); background:#fff; border-radius:0 var(--r) var(--r) 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); border-inline-end:1px solid var(--line);
  box-shadow:var(--card-sh);
}
.perf-note svg{width:22px; height:22px; color:var(--brass); flex:none; margin-top:2px;}
.perf-note p{font-size:14px; color:var(--soft); font-weight:500;}
.perf-note b{color:var(--ink-2);}

/* ---------- PERSONAS ---------- */
.per-grid{display:grid; grid-template-columns:1fr; gap:16px;}
@media(min-width:900px){ .per-grid{grid-template-columns:repeat(3,1fr); gap:22px;} }
.per-card{padding:26px 22px; border-top:3px solid var(--steel); display:flex; flex-direction:column;}
.per-card:nth-child(2){border-top-color:var(--brass);}
.per-card:nth-child(3){border-top-color:var(--green);}
.per-card .pt{font-size:12px; font-weight:800; color:var(--steel);}
.per-card:nth-child(2) .pt{color:var(--brass);}
.per-card:nth-child(3) .pt{color:var(--green);}
.per-card h3{font-size:19px; margin:4px 0 14px;}
.per-card ul{list-style:none; display:flex; flex-direction:column; gap:11px;}
.per-card li{display:grid; grid-template-columns:20px 1fr; gap:9px; font-size:13.5px; color:var(--soft); font-weight:500;}
.per-card li svg{width:17px; height:17px; color:var(--green); margin-top:3px;}
.per-card li b{color:var(--ink-2);}

/* ---------- STEPS ---------- */
.steps{display:grid; grid-template-columns:1fr; gap:14px; position:relative;}
@media(min-width:900px){ .steps{grid-template-columns:repeat(3,1fr); gap:36px;} }
.step{padding:26px 22px; text-align:center; position:relative;}
.step .sn{
  width:52px; height:52px; margin:0 auto 14px; border-radius:50%;
  background:linear-gradient(180deg,#1d3a66,var(--ink-2)); color:#fff;
  font-family:'Aref Ruqaa',serif; font-size:24px; font-weight:700;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--card-sh);
}
.step h3{font-size:17.5px; margin-bottom:7px;}
.step p{font-size:13.5px; color:var(--soft); font-weight:500;}
.step .dur{display:inline-block; margin-top:12px; font-size:11.5px; font-weight:800; color:var(--steel-deep); background:var(--sky-2); border:1px solid var(--sky); padding:5px 13px; border-radius:100px;}

/* ---------- PRICING ---------- */
.price-grid{display:grid; grid-template-columns:1fr; gap:18px; max-width:440px; margin:0 auto;}
@media(min-width:940px){ .price-grid{grid-template-columns:repeat(3,1fr); max-width:none; align-items:stretch;} }
.price{padding:30px 26px; display:flex; flex-direction:column; position:relative;}
.price .pn{font-size:12px; font-weight:800; color:var(--steel); margin-bottom:10px;}
.price h3{font-size:22px; margin-bottom:8px;}
.price .pd{font-size:13px; color:var(--soft); font-weight:500; margin-bottom:18px; min-height:40px;}
.price ul{list-style:none; display:flex; flex-direction:column; gap:11px; margin-bottom:26px; flex:1;}
.price li{display:grid; grid-template-columns:19px 1fr; gap:9px; font-size:13.5px; color:var(--soft); font-weight:500;}
.price li svg{width:16px; height:16px; color:var(--steel); margin-top:3px;}
/* one span holds the whole label, so mixing <b> with text cannot spill
   into extra anonymous grid items and wrap a word per line. */
.price li > span{line-height:1.65;}
.price .btn{width:100%;}
.price.hot{background:linear-gradient(180deg,#16294d,#0e1c36); border-color:#16294d;}
.price.hot .pn{color:#8fb4e4;}
.price.hot h3, .price.hot li b{color:#fff;}
.price.hot .pd{color:#b6c5df;}
.price.hot li{color:#cfdaec;}
.price.hot li svg{color:#8fb4e4;}
.hot-badge{position:absolute; top:-13px; inset-inline-start:50%; transform:translateX(50%);
  background:linear-gradient(90deg,var(--brass),#dab86e); color:#3c2c0d; font-size:11.5px; font-weight:900;
  padding:6px 18px; border-radius:100px; white-space:nowrap; box-shadow:var(--card-sh);}
@media(min-width:940px){ .price.hot{transform:translateY(-12px); box-shadow:var(--card-sh-lg);} }

/* ---------- currency switch ----------
   USD is the default view. The number a visitor in Cairo or Riyadh reads first
   is "500", not "25,000" — same money, far less resistance before the value has
   even been read. The pound is never hidden: it sits under every figure, and
   this switch promotes it back to the headline for anyone who wants it there. */
.cur-sw{display:inline-flex; gap:4px; margin-top:22px; padding:4px;
  background:var(--sky-2); border:1px solid var(--sky); border-radius:var(--r-pill);}
.cs-b{font-size:13px; font-weight:800; color:var(--soft); padding:8px 18px;
  border-radius:var(--r-pill); transition:background .2s var(--ease), color .2s, box-shadow .2s;}
.cs-b .en{font-size:11.5px; opacity:.72;}
.cs-b:hover{color:var(--steel-deep);}
.cs-b.on{background:#fff; color:var(--ink-2); box-shadow:var(--card-sh);}

#pricing[data-cur="usd"] .c-egp,
#pricing[data-cur="egp"] .c-usd{display:none;}

/* ---------- anchor strip: compare the model, not the number ---------- */
.pcmp{margin-bottom:34px;}
.pcmp-h{font-size:13px; font-weight:900; color:var(--faint); text-align:center;
  letter-spacing:.02em; margin-bottom:16px;}
.pcmp-g{display:grid; grid-template-columns:1fr; gap:12px;}
@media(min-width:860px){ .pcmp-g{grid-template-columns:repeat(3,1fr);} }
.pcmp-i{background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:20px 20px 18px; display:flex; flex-direction:column;}
.pcmp-i .ic{width:34px; height:34px; border-radius:10px; background:#fff; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--faint); margin-bottom:12px;}
.pcmp-i .ic svg{width:18px; height:18px;}
.pcmp-i h4{font-size:15px; font-weight:800; color:var(--soft); margin-bottom:7px;}
.pcmp-i p{font-size:13px; line-height:1.75; color:var(--faint); font-weight:500; flex:1; margin-bottom:14px;}
.pcmp-v{display:block; font-size:14.5px; font-weight:900; color:var(--soft);
  padding-top:12px; border-top:1px dashed var(--line-2);}
.pcmp-v i{display:block; font-style:normal; font-size:11.5px; font-weight:600;
  color:var(--faint); margin-top:4px;}
/* the winning column carries the brass accent the rest of the page reserves
   for the founding offer — it reads as "this is the one" without a badge. */
.pcmp-i.own{background:#fff; border-color:var(--accent-line); box-shadow:var(--card-sh);}
.pcmp-i.own .ic{background:var(--accent-bg); border-color:var(--accent-line); color:var(--accent-ink);}
.pcmp-i.own h4{color:var(--ink-2);}
.pcmp-i.own p{color:var(--soft);}
.pcmp-i.own .pcmp-v{color:var(--accent-ink); border-top-color:var(--accent-line);}
.pcmp-i.own .pcmp-v i{color:var(--soft);}
.pcmp-note{font-size:11.5px; line-height:1.7; color:var(--faint); font-weight:500;
  text-align:center; margin-top:14px; max-width:720px; margin-inline:auto;}

/* ---------- price amount ---------- */
.price-amt{display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; margin-bottom:6px;}
.price-amt > span{display:inline-flex; align-items:baseline; gap:7px;}
.price-amt b{font-size:44px; font-weight:900; letter-spacing:-.02em; color:var(--ink-2); line-height:1;}
.price-amt .cur{font-size:15px; font-weight:800; color:var(--soft);}
.price-amt .from{font-size:12.5px; font-weight:800; color:var(--faint); align-self:center;}
.price.hot .price-amt b{color:#fff;}
.price.hot .price-amt .cur{color:#8fb4e4;}
.price.hot .price-amt .from{color:#8b9dbd;}

/* the other currency, always present and always quiet — the conversion is
   shown rather than hidden, which is what keeps the USD headline honest. */
.palt{font-size:12.5px; font-weight:700; color:var(--faint); margin-bottom:10px;}
.price.hot .palt{color:#8b9dbd;}

/* cost of ownership. 25,000 EGP once is 700 EGP a month across three years —
   the same money, expressed at the scale the buyer already budgets in. */
.pown{font-size:12px; line-height:1.7; font-weight:600; color:var(--soft);
  background:var(--sky-2); border:1px solid var(--sky); border-radius:var(--r-sm);
  padding:9px 12px; margin-bottom:18px;}
.pown b{font-weight:900; color:var(--steel-deep);}
.price.hot .pown{background:rgba(255,255,255,.06); border-color:rgba(143,180,228,.22); color:#b6c5df;}
.price.hot .pown b{color:#fff;}

.price-reassure{text-align:center; font-size:13.5px; font-weight:600; color:var(--faint);
  max-width:680px; margin:22px auto 0; line-height:1.8;}

/* ---------- capacity chips (instructors / moderators) ---------- */
.cap{display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:20px;}
.cap-i{background:var(--sky-2); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:10px 12px; text-align:center;}
.cap-i b{display:block; font-size:20px; font-weight:900; color:var(--steel); line-height:1.15;}
.cap-i span{font-size:11.5px; font-weight:700; color:var(--soft);}
.price.hot .cap-i{background:rgba(255,255,255,.07); border-color:rgba(143,180,228,.24);}
.price.hot .cap-i b{color:#fff;}
.price.hot .cap-i span{color:#b6c5df;}

/* ---------- installment offer — a compact strip at the foot of the plan ----
   Deliberately two lines. It sits between the feature list and the CTA so it
   is the last thing read before the decision, without inflating card height. */
.inst{position:relative; margin:0 0 16px; padding:14px 0 0;
  border-top:1px solid rgba(218,184,110,.32);}
.inst-tag{display:inline-block; margin-bottom:8px;
  background:linear-gradient(90deg,var(--brass),#dab86e); color:#3c2c0d;
  font-size:10px; font-weight:900; padding:3px 11px; border-radius:var(--r-pill);
  letter-spacing:.04em;}
.inst-l1{margin:0 0 5px; font-size:13.5px; font-weight:700; color:#e8dcc2; line-height:1.55;}
.inst-l1 b{font-size:20px; font-weight:900; color:#f6e7c6; letter-spacing:-.01em;}
.inst-l1 i{font-style:normal; font-size:12px; font-weight:600; color:#c9b78a;}
.inst-l2{margin:0; font-size:11.5px; font-weight:600; color:#a8977a; line-height:1.6;}

/* ---------- offer countdown ----------
   Scarcity has to be legible in a glance and honest under inspection: the
   deadline is the server's, not the browser's, and the strip removes itself
   when it passes rather than freezing at zero. */
.cdn{margin-top:13px; padding-top:12px; border-top:1px solid rgba(218,184,110,.28);}
.cdn-h{display:block; font-size:11px; font-weight:800; color:#c9b78a;
  margin-bottom:8px; letter-spacing:.03em;}
.cdn-g{display:grid; grid-template-columns:repeat(4,1fr); gap:6px;}
.cdn-i{background:rgba(255,255,255,.06); border:1px solid rgba(218,184,110,.24);
  border-radius:var(--r-sm); padding:8px 3px; text-align:center;}
.cdn-i b{display:block; font-size:21px; font-weight:900; color:#f6e7c6; line-height:1.1;
  font-variant-numeric:tabular-nums;}
.cdn-i small{display:block; font-size:9.5px; font-weight:700; color:#a8977a; margin-top:3px;}
/* The visible tiles retick every second; announcing that would make the page
   unusable with a screen reader. One quiet sentence carries the same fact. */
.cdn-sr{position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}
/* Under the last hour the offer earns a heartbeat — and only then. */
@media (prefers-reduced-motion: no-preference){
  .cdn.urgent .cdn-i b{animation:cdnPulse 2s var(--ease) infinite;}
}
@keyframes cdnPulse{ 0%,100%{opacity:1;} 50%{opacity:.55;} }

/* ---------- payback calculator ----------
   The one block on the page that argues with the visitor's own numbers instead
   of ours. Two sliders, and the price stops being a sum of money and becomes a
   single-digit percentage of the revenue they already believe they can make. */
.pbk{margin-top:34px; overflow:hidden;}
.pbk-head{padding:26px 24px 0; text-align:center;}
.pbk-tag{display:inline-block; background:var(--accent-bg); border:1px solid var(--accent-line);
  color:var(--accent-ink); font-size:11px; font-weight:900; letter-spacing:.03em;
  padding:5px 14px; border-radius:var(--r-pill); margin-bottom:12px;}
.pbk-head h3{font-size:clamp(19px,4.4vw,25px); margin-bottom:8px;}
.pbk-head p{font-size:13.5px; color:var(--soft); font-weight:500; max-width:520px; margin-inline:auto; line-height:1.75;}

.pbk-body{display:grid; grid-template-columns:1fr; gap:22px; padding:24px;}
@media(min-width:900px){ .pbk-body{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:34px; padding:28px 26px;} }

/* ----- inputs ----- */
.pbk-plan{display:grid; grid-template-columns:repeat(3,1fr); gap:5px; padding:4px;
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-sm); margin-bottom:20px;}
.pbk-plan button{font-size:12.5px; font-weight:800; color:var(--soft); padding:9px 6px;
  border-radius:6px; transition:background .2s var(--ease), color .2s, box-shadow .2s;}
.pbk-plan button:hover{color:var(--steel-deep);}
.pbk-plan button.on{background:#fff; color:var(--ink-2); box-shadow:var(--card-sh);}

.pbk-f{margin-bottom:18px;}
.pbk-f:last-child{margin-bottom:0;}
.pbk-f label{display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  font-size:13px; font-weight:700; color:var(--soft); margin-bottom:10px;}
.pbk-f label b{font-size:15px; font-weight:900; color:var(--steel-deep); white-space:nowrap;}
.pbk-scale{display:flex; justify-content:space-between; font-size:11px; font-weight:700;
  color:var(--faint); margin-top:7px;}

.pbk input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:100px;
  background:var(--sky); outline:none; cursor:pointer;
}
.pbk input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:24px; height:24px; border-radius:50%;
  background:linear-gradient(180deg,#2f6cb8,var(--steel)); border:3px solid #fff;
  box-shadow:0 4px 12px -3px rgba(28,66,111,.55); cursor:grab;
  transition:transform .15s var(--ease);
}
.pbk input[type=range]::-webkit-slider-thumb:active{cursor:grabbing; transform:scale(1.12);}
.pbk input[type=range]::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%;
  background:linear-gradient(180deg,#2f6cb8,var(--steel)); border:3px solid #fff;
  box-shadow:0 4px 12px -3px rgba(28,66,111,.55); cursor:grab;
}
.pbk input[type=range]:focus-visible{box-shadow:0 0 0 3px var(--sky-2), 0 0 0 5px var(--steel);}

/* ----- outputs ----- */
.pbk-out{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r); padding:20px 18px;}
.pbk-kpis{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:20px;}
.pbk-k{background:#fff; border:1px solid var(--line); border-radius:var(--r-sm);
  padding:14px 12px; text-align:center;}
.pbk-k b{display:block; font-size:34px; font-weight:900; line-height:1.05;
  color:var(--steel-deep); letter-spacing:-.02em; font-variant-numeric:tabular-nums;}
.pbk-k span{display:block; font-size:11.5px; font-weight:700; color:var(--soft);
  line-height:1.6; margin-top:5px;}

.pbk-bars{display:flex; flex-direction:column; gap:14px;}
.pbk-bar .bl{display:block; font-size:12px; font-weight:700; color:var(--soft); margin-bottom:7px;}
.pbk-bar .bt{height:14px; border-radius:100px; background:var(--sky-2);
  border:1px solid var(--line); overflow:hidden;}
.pbk-bar .bt i{display:block; height:100%; border-radius:100px;
  background:linear-gradient(90deg,#3f7fc9,var(--steel));
  transition:width .45s var(--ease);}
.pbk-bar .bv{display:block; font-size:13px; font-weight:900; color:var(--ink-2); margin-top:7px;
  font-variant-numeric:tabular-nums;}
/* the cost bar shares the revenue bar's scale, so its length *is* the argument:
   a sliver next to the year it pays for. */
.pbk-bar.cost .bt i{background:linear-gradient(90deg,var(--brass),#dab86e); min-width:5px;}
.pbk-bar.cost .bv em{display:inline-block; font-style:normal; font-size:11.5px; font-weight:800;
  color:var(--accent-ink); background:var(--accent-bg); border:1px solid var(--accent-line);
  border-radius:var(--r-pill); padding:2px 10px; margin-inline-start:7px;}
.pbk-note{font-size:11px; line-height:1.7; color:var(--faint); font-weight:500; margin-top:16px;}

/* ----- calculator CTA ----- */
.pbk-cta{background:linear-gradient(180deg,#16294d,#0e1c36); padding:20px 24px;
  display:flex; flex-direction:column; gap:14px; align-items:center; text-align:center;}
@media(min-width:820px){ .pbk-cta{flex-direction:row; justify-content:space-between; text-align:start; gap:24px; padding:20px 26px;} }
.pbk-cta b{display:block; font-size:16px; font-weight:800; color:#fff; margin-bottom:4px;}
.pbk-cta span{display:block; font-size:12.5px; line-height:1.7; color:#b6c5df; font-weight:500;}
.pbk-cta .btn{flex:none; background:#fff; color:var(--ink-2);
  box-shadow:0 16px 34px -16px rgba(0,0,0,.55);}
.pbk-cta .btn:hover{background:#fff; box-shadow:0 20px 40px -16px rgba(0,0,0,.6);}

/* ---------- transparency footer ---------- */
.price-foot{margin-top:34px; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:24px 22px; box-shadow:var(--card-sh);}
.pf-h{font-size:13px; font-weight:900; color:var(--ink-2); margin-bottom:16px; text-align:center;}
.pf-grid{display:grid; grid-template-columns:1fr; gap:16px;}
@media(min-width:760px){ .pf-grid{grid-template-columns:repeat(2,1fr); gap:18px 26px;} }
@media(min-width:1100px){ .pf-grid{grid-template-columns:repeat(4,1fr);} }
.pf-i b{display:block; font-size:13px; font-weight:800; color:var(--steel-deep); margin-bottom:5px;}
.pf-i span{display:block; font-size:12.5px; line-height:1.7; color:var(--soft); font-weight:500;}

/* ---------- FAQ ---------- */
.faq{max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:10px;}
.faq details{background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--card-sh); overflow:hidden;}
.faq summary{
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding:18px 20px; font-weight:800; font-size:15px; color:var(--ink-2); cursor:pointer;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary .pm{flex:none; width:26px; height:26px; border-radius:8px; background:var(--sky-2); color:var(--steel-deep);
  display:flex; align-items:center; justify-content:center; font-size:17px; font-weight:800; transition:transform .25s var(--ease);}
.faq details[open] summary .pm{transform:rotate(45deg);}
.faq .ans{padding:0 20px 20px; font-size:14px; color:var(--soft); font-weight:500;}
.faq .ans b{color:var(--ink-2);}

/* ---------- FINAL CTA ---------- */
.final{background:linear-gradient(175deg,#14294e,#0b1730); color:#fff; text-align:center; overflow:clip;}
.final.canvas::before{background-image:radial-gradient(circle, rgba(255,255,255,.08) 1.15px, transparent 1.15px);}
.final img.fl{height:150px; width:auto; margin:0 auto 22px;}
.final h2{color:#fff; font-size:clamp(28px,6.6vw,50px); margin-bottom:12px;}
.final h2 .script{color:#8fb4e4;}
.final h2 .script::before{background:rgba(95,159,230,.16);}
.final p{color:#aebdd8; font-size:15.5px; max-width:520px; margin:0 auto 28px; font-weight:500;}
.final .btn-ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.3);}
.final .btn-ghost:hover{background:rgba(255,255,255,.08); border-color:#fff;}
.final .hero-actions{margin-bottom:0;}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid; grid-template-columns:1fr; gap:36px;}
@media(min-width:920px){ .contact-grid{grid-template-columns:1fr 1.1fr; gap:64px;} }
.c-info{display:flex; flex-direction:column; gap:0;}
.c-row{display:flex; gap:14px; align-items:flex-start; padding:18px 0; border-bottom:1px solid var(--line);}
.c-row .ci{width:42px; height:42px; border-radius:12px; background:#fff; border:1px solid var(--line); box-shadow:var(--card-sh);
  color:var(--steel-deep); display:flex; align-items:center; justify-content:center; flex:none;}
.c-row .ci svg{width:18px; height:18px;}
.c-row h4{font-size:14.5px; margin-bottom:2px;}
.c-row p{font-size:13.5px; color:var(--soft); font-weight:500;}
/* single-route contact card — the wizard is the only way in */
.route-cta{margin-top:22px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background:linear-gradient(150deg,#14294e,#0b1730); border-radius:var(--r); padding:20px;}
.route-cta .wt{display:flex; gap:12px; align-items:flex-start; flex:1; min-width:240px;}
.route-cta .wi{width:44px; height:44px; border-radius:12px; background:rgba(122,160,214,.16); color:#9fc0f0;
  display:flex; align-items:center; justify-content:center; flex:none;}
.route-cta .wi svg{width:21px; height:21px;}
.route-cta h4{color:#fff; font-size:14.5px; margin-bottom:3px;}
.route-cta p{color:#9fb3d4; font-size:12px; line-height:1.75;}
.route-cta .btn{background:#fff; color:var(--ink-2); padding:12px 22px; font-size:13.5px; flex:none;}
form{display:flex; flex-direction:column; gap:15px;}
.f-row{display:grid; grid-template-columns:1fr; gap:15px;}
@media(min-width:560px){ .f-row{grid-template-columns:1fr 1fr;} }
label{font-size:12.5px; font-weight:800; color:var(--soft); margin-bottom:6px; display:block;}
input,select,textarea{
  width:100%; border:1.5px solid var(--line); border-radius:11px; padding:13px 15px;
  font-family:'Tajawal',sans-serif; font-size:16px; color:var(--ink); background:#fff;
  transition:border-color .15s, box-shadow .15s;
}
input:focus,select:focus,textarea:focus{border-color:var(--steel); outline:none; box-shadow:0 0 0 4px rgba(44,100,173,.12);}
textarea{resize:vertical; min-height:104px;}
form .btn{margin-top:2px; width:100%;}
@media(min-width:920px){ form .btn{width:auto; align-self:flex-start;} }

/* ---------- FOOTER ---------- */
footer{background:#0b1730; color:#93a5c6; padding:56px 0 28px;}
.f-top{display:grid; grid-template-columns:1fr; gap:34px; padding-bottom:38px; border-bottom:1px solid rgba(255,255,255,.1); text-align:center;}
.f-brand{display:flex; flex-direction:column; align-items:center;}
.footer-logo{height:150px; width:auto; margin:0 auto 10px;}
.f-brand p{font-size:13px; max-width:320px; margin:0 auto; font-weight:500;}
.f-col h5{font-size:12px; font-weight:800; color:#6c81a8; margin-bottom:14px; letter-spacing:.04em;}
.f-col a{display:block; font-size:13.5px; color:#c2d0e8; margin-bottom:10px; font-weight:600;}
.f-col a:hover{color:#fff;}
.f-bottom{display:flex; flex-direction:column; gap:8px; align-items:center; text-align:center; padding-top:22px; font-size:12px; font-weight:500;}
@media(min-width:860px){
  .f-top{grid-template-columns:1.6fr 1fr 1fr 1fr; text-align:right;}
  .f-brand{align-items:flex-start;}
  .footer-logo{height:110px; margin:0 0 10px;}
  .f-brand p{margin:0;}
  .f-bottom{flex-direction:row; justify-content:space-between;}
}

/* ---------- FLOATING CONTACT (FAB) ---------- */
.fab{
  position:fixed; bottom:18px; left:18px; z-index:400;
  width:58px; height:58px; border-radius:50%; border:none;
  background:linear-gradient(180deg,#1d3a66,var(--ink-2));
  box-shadow:0 16px 36px -12px rgba(11,23,48,.6);
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s var(--ease);
}
.fab:hover{transform:translateY(-3px) scale(1.04);}
.fab img{width:32px; height:32px;}
.fab::after{content:""; position:absolute; inset:-4px; border-radius:50%; border:2px solid rgba(44,100,173,.4); animation:fabPulse 2.6s infinite;}
@keyframes fabPulse{0%{transform:scale(.9); opacity:1;} 70%{transform:scale(1.25); opacity:0;} 100%{opacity:0;}}
.overlay{
  position:fixed; inset:0; z-index:390; background:rgba(20,32,58,.32);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
}
.overlay.on{opacity:1; pointer-events:all;}
.c-sheet{
  position:fixed; z-index:395; bottom:88px; left:18px; width:min(330px, calc(100vw - 36px));
  background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:var(--card-sh-lg);
  padding:18px; opacity:0; transform:translateY(14px) scale(.97); pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.c-sheet.on{opacity:1; transform:none; pointer-events:all;}
.c-sheet .cs-head{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.c-sheet .cs-head img{width:34px; height:34px;}
.c-sheet .cs-head b{font-size:15px; color:var(--ink-2);}
.c-sheet .cs-head small{display:block; font-size:11px; color:var(--faint); font-weight:600;}
.c-opt{display:flex; align-items:center; gap:12px; padding:12px; border-radius:13px; border:1px solid var(--line); margin-bottom:9px; transition:background .15s, border-color .15s, transform .15s;}
.c-opt:hover{background:var(--sky-2); border-color:var(--sky); transform:translateX(-3px);}
.c-opt .co-i{width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex:none;}
.c-opt .co-i svg{width:18px; height:18px;}
.co-fm .co-i{background:var(--sky-2); color:var(--steel-deep);}
.co-ch .co-i{background:#e7f6ec; color:#2c9457;}
.co-em .co-i{background:#f7efdd; color:#9c7530;}
.c-opt b{font-size:13.5px; color:var(--ink-2); display:block;}
.c-opt small{font-size:11px; color:var(--faint); font-weight:600;}

/* ==========================================================
   BENTO PANELS — Xmind-style rounded color blocks per topic
   ========================================================== */
.stats-cap{text-align:center; font-size:13px; font-weight:700; color:var(--faint); padding:26px 20px 0;}
.stats{border-bottom:0; background:transparent;}
.stats .wrap{border:1px solid var(--line); border-radius:20px; background:#fff; box-shadow:var(--card-sh); overflow:hidden; margin-bottom:8px;}

.sec-bento{padding:14px 0;}
.sec-bento > .wrap{
  border-radius:28px; padding:38px 20px; overflow:clip; position:relative;
}
@media(min-width:900px){
  .sec-bento > .wrap{padding:60px 54px;}
}
@media(max-width:899px){
  .sec-bento > .wrap{width:calc(100% - 24px);}
}
.sec-bento .sec-head{margin-bottom:30px;}
.sec-bento .duo{gap:30px;}

/* tint variants */
#builder > .wrap{background:linear-gradient(165deg,#eaf2fc,#d8e7f8);}
#teach   > .wrap{background:linear-gradient(165deg,#e7edf7,#f2f6fc);}
#ai      > .wrap{background:linear-gradient(165deg,#faf3e2,#f2e7cd);}
#ai .q{background:#fff; border-color:#ead9b0;}
#ai .q::before{background:var(--brass);}
#ai .script{color:#9c7530;}
#ai .script::before{background:#f0e2bd;}
#ai .ai-card{border-color:#ecdfc0; box-shadow:0 12px 30px -20px rgba(120,90,30,.35);}
#ai .ai-card .ai-ic{background:#faf4e6; border-color:#ecdfc0; color:#9c7530;}

/* care panel — after-sales / ticketing */
#care > .wrap{background:linear-gradient(165deg,#eaf4ee,#dbece2);}
#care .q{background:#fff; border-color:#cfe5d8;}
#care .q::before{background:var(--green);}
#care .script{color:#3d7f5b;}
#care .script::before{background:#d7ecdf;}
#care .fitem .fi{color:#3d7f5b;}
.tk-visual{position:relative; padding-block:8px; max-width:440px; margin-inline:auto;}
.tk-card{padding:20px;}
.tk-head{display:flex; align-items:center; gap:11px; padding-bottom:14px; border-bottom:1px solid var(--line); margin-bottom:16px;}
.tk-head .ti{width:42px; height:42px; border-radius:12px; background:#e7f6ec; border:1px solid #cfe5d8; color:#2f7a4f; display:flex; align-items:center; justify-content:center; flex:none;}
.tk-head .ti svg{width:20px; height:20px;}
.tk-head b{font-size:14px; color:var(--ink-2); display:block; line-height:1.4;}
.tk-head small{font-size:11px; color:var(--faint); font-weight:700;}
.tk-status{margin-inline-start:auto; flex:none; font-size:10.5px; font-weight:800; color:var(--steel-deep); background:var(--sky-2); border:1px solid var(--sky); padding:5px 11px; border-radius:100px; white-space:nowrap;}
.tk-step{display:grid; grid-template-columns:22px 1fr; gap:11px; padding-bottom:18px; position:relative;}
.tk-step::before{content:""; position:absolute; top:23px; bottom:3px; inset-inline-start:10px; width:2px; border-radius:2px; background:var(--line-2);}
.tk-step:last-child{padding-bottom:0;}
.tk-step:last-child::before{display:none;}
.tk-dot{width:21px; height:21px; border-radius:50%; border:2px solid var(--line-2); background:#fff; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:900; color:#fff;}
.tk-step.done .tk-dot{background:var(--green); border-color:var(--green);}
.tk-step.now .tk-dot{border-color:var(--steel);}
.tk-step.now .tk-dot::after{content:""; width:9px; height:9px; border-radius:50%; background:var(--steel); animation:pulse 2s infinite;}
.tk-step b{font-size:13px; color:var(--ink-2); display:block;}
.tk-step small{font-size:11.5px; color:var(--faint); font-weight:600; line-height:1.55; display:block;}
.tk-step.dim b{color:var(--faint);}
.tk-float{position:absolute; top:-14px; inset-inline-end:-6px; z-index:2;}
.tk-mini{margin-top:14px; padding:15px 18px; display:flex; align-items:center; gap:12px;}
.tk-mini .ti{width:38px; height:38px; border-radius:11px; background:#f7efdd; border:1px solid #ead9b0; color:#9c7530; display:flex; align-items:center; justify-content:center; flex:none;}
.tk-mini .ti svg{width:18px; height:18px;}
.tk-mini b{font-size:12.5px; color:var(--ink-2); display:block; line-height:1.5;}
.tk-mini small{font-size:11px; color:var(--faint); font-weight:600;}
.tk-mini .tk-status{background:#f2e9d4; border-color:#ead9b0; color:#9c7530;}

/* dark panels */
.bento-dark > .wrap{color:#fff;}
.bento-dark > .wrap::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(circle, rgba(255,255,255,.08) 1.15px, transparent 1.15px);
  background-size:24px 24px;
  -webkit-mask-image:radial-gradient(90% 85% at 50% 40%, #000 30%, transparent 100%);
          mask-image:radial-gradient(90% 85% at 50% 40%, #000 30%, transparent 100%);
}
.bento-dark > .wrap > *{position:relative;}
.bento-dark .sec-head h2{color:#fff;}
.bento-dark .sec-head p{color:#aebdd8;}
.bento-dark .q{background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.14); color:#cfdcf1;}
.bento-dark .script{color:#8fb4e4;}
.bento-dark .script::before{background:rgba(95,159,230,.16);}
#security > .wrap{background:linear-gradient(170deg,#152a50,#0c1b38);}
#security .fitem{border-color:rgba(255,255,255,.1);}
#security .fitem .fi{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); color:#8fb4e4; box-shadow:none;}
#security .fitem h4{color:#fff;}
#security .fitem p{color:#a3b4d1;}
.app-sec{background:transparent; color:inherit;}
.app-sec.canvas::before{display:none;}
.app-sec > .wrap{background:linear-gradient(170deg,#182f57 0%,#0b1730 100%);}

/* mid-page CTA repeat */
.mid-cta{text-align:center; padding:56px 0 30px;}
.mid-cta .hero-actions{margin-bottom:12px;}

/* ==========================================================
   LEAD JOURNEY WIZARD — multi-step qualifying form
   ========================================================== */
.wizard{background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:var(--card-sh);
  padding:24px 22px 22px; display:block;}
@media(min-width:920px){ .wizard{padding:30px 30px 26px;} }
.wz-progress{margin-bottom:22px;}
.wz-steps{display:flex; justify-content:space-between; margin-bottom:10px;}
.wz-st{display:flex; flex-direction:column; align-items:center; gap:5px; flex:1; position:relative;}
.wz-st .dot{width:30px; height:30px; border-radius:50%; background:var(--paper-2); border:2px solid var(--line-2);
  color:var(--faint); font-size:12.5px; font-weight:900; display:flex; align-items:center; justify-content:center;
  transition:all .3s var(--ease); position:relative; z-index:1;}
.wz-st .lb{font-size:10.5px; font-weight:800; color:var(--faint); transition:color .3s;}
.wz-st.on .dot{background:linear-gradient(180deg,#1d3a66,var(--ink-2)); border-color:var(--ink-2); color:#fff;
  box-shadow:0 8px 18px -8px rgba(18,41,79,.6);}
.wz-st.on .lb{color:var(--ink-2);}
.wz-st.done .dot{background:var(--green); border-color:var(--green); color:#fff;}
.wz-st.done .lb{color:var(--green);}
.wz-bar{height:5px; border-radius:4px; background:var(--paper-2); overflow:hidden;}
.wz-bar i{display:block; height:100%; width:25%; border-radius:4px;
  background:linear-gradient(90deg,var(--steel),#5a86c4); transition:width .45s var(--ease);}
.wz-step{border:none; display:none;}
.wz-step.on{display:block; animation:wzIn .4s var(--ease);}
@keyframes wzIn{from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;}}
.wz-q{font-size:20px; font-weight:900; color:var(--ink); margin-bottom:4px; display:block;}
.wz-hint{font-size:13px; color:var(--faint); font-weight:600; margin-bottom:16px;}
.wz-lbl{font-size:12.5px; font-weight:800; color:var(--soft); margin:16px 0 8px; display:block;}
.wz-lbl:first-of-type{margin-top:0;}
/* role cards */
.wz-cards{display:grid; grid-template-columns:1fr; gap:10px;}
@media(min-width:560px){ .wz-cards{grid-template-columns:1fr 1fr;} }
.wz-card{display:flex; align-items:center; gap:12px; text-align:start; background:#fff;
  border:1.5px solid var(--line-2); border-radius:14px; padding:14px 15px; cursor:pointer;
  transition:border-color .15s, background .15s, transform .15s var(--ease), box-shadow .15s;}
.wz-card .ic{width:40px; height:40px; border-radius:11px; background:var(--sky-2); border:1px solid var(--sky);
  color:var(--steel-deep); display:flex; align-items:center; justify-content:center; flex:none; transition:all .15s;}
.wz-card .ic svg{width:19px; height:19px;}
.wz-card b{font-size:14px; color:var(--ink-2); display:block; line-height:1.4;}
.wz-card small{font-size:11.5px; color:var(--faint); font-weight:600; display:block;}
.wz-card:hover{border-color:var(--steel); transform:translateY(-2px); box-shadow:var(--card-sh);}
.wz-card.on{border-color:var(--steel); background:var(--sky-2); box-shadow:inset 0 0 0 1px var(--steel), var(--card-sh);}
.wz-card.on .ic{background:linear-gradient(180deg,#1d3a66,var(--ink-2)); border-color:var(--ink-2); color:#fff;}
/* chips */
.wz-chips{display:flex; flex-wrap:wrap; gap:8px;}
.wz-chip{border:1.5px solid var(--line-2); background:#fff; border-radius:100px; padding:9px 16px;
  font-size:13px; font-weight:700; color:var(--soft); cursor:pointer;
  transition:all .15s var(--ease);}
.wz-chip:hover{border-color:var(--steel); color:var(--ink-2);}
.wz-chip.on{background:linear-gradient(180deg,#1d3a66,var(--ink-2)); border-color:var(--ink-2); color:#fff;
  box-shadow:0 8px 18px -8px rgba(18,41,79,.55);}
/* inputs reuse global input styles */
.wz-nav{display:flex; gap:10px; margin-top:22px; align-items:center;}
.wz-nav .btn{width:auto; margin-top:0;}
.wz-nav .wz-next{flex:1; min-width:0;}
.wz-nav .wz-back{flex:none; padding-inline:20px;}
@media(max-width:380px){ .wz-nav .btn{padding-inline:16px; font-size:14.5px;} }
.wz-err{margin-top:12px; font-size:13px; font-weight:800; color:#c0392b; background:#fdeeec;
  border:1px solid #f5cbc4; border-radius:10px; padding:10px 14px;}
.wz-priv{margin-top:12px; text-align:center;}
/* success */
.wz-done{text-align:center; padding:14px 4px 6px; animation:wzIn .45s var(--ease);}
.wz-done .ok-ic{width:64px; height:64px; margin:0 auto 14px; border-radius:50%;
  background:#e7f6ec; border:1.5px solid #cfe5d8; color:#2f9457; display:flex; align-items:center; justify-content:center;
  animation:wzPop .5s cubic-bezier(.34,1.56,.64,1);}
.wz-done .ok-ic svg{width:30px; height:30px;}
@keyframes wzPop{from{transform:scale(.3); opacity:0;} to{transform:scale(1); opacity:1;}}
.wz-done h3{font-size:21px; margin-bottom:6px;}
.wz-done p{font-size:14px; color:var(--soft); font-weight:500; max-width:420px; margin:0 auto 16px;}
.wz-sum{display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin-bottom:18px;}
.wz-sum span{font-size:11.5px; font-weight:800; color:var(--steel-deep); background:var(--sky-2);
  border:1px solid var(--sky); border-radius:100px; padding:5px 12px;}
.wz-done .btn{width:100%; max-width:340px;}
.wz-done .wz-after{margin-top:14px; color:var(--faint);}
/* ---- COUPON FIELD (contact wizard, step 4) ----
   Raised as its own callout — same sky tint as the .q markers elsewhere — so
   an optional discount code reads as a distinct feature rather than another
   plain text field.

   The verify button used to inherit `form .btn{width:100%}` (written for the
   Next/Back buttons below) and stretched to fill the whole row, squeezing the
   input down to a few pixels. .wz-cpn-row .btn overrides it exactly the way
   .wz-nav .btn already overrides the same rule for the nav buttons — same
   fix, same pattern, applied where it was missing. */
.wz-cpn{
  margin-bottom:14px; padding:14px 14px 12px; border-radius:var(--r);
  background:var(--sky-2); border:1px solid var(--sky);
}
.wz-cpn > label{margin-bottom:8px;}
.wz-cpn-row{display:flex; gap:8px;}
.wz-cpn-row input{
  flex:1; min-width:0; background:#fff;
  direction:ltr; text-transform:uppercase; letter-spacing:.03em;
  font-family:'Poppins','Tajawal',sans-serif;
}
.wz-cpn-row .btn{
  width:auto; flex:none; margin-top:0; padding:0 20px; font-size:14.5px;
  /* form .btn also sets align-self:flex-start at >=920px (for the Next/Back
     buttons, which want to hug their own height). That rule reaches this
     button too and collapses it to its text line-height instead of matching
     the input beside it — stretch is what keeps the two the same height at
     every width. */
  align-self:stretch;
}
.wz-cpn-row .btn:disabled{opacity:.6; cursor:progress;}
@media(max-width:360px){
  .wz-cpn-row{flex-wrap:wrap;}
  .wz-cpn-row input{flex-basis:100%;}
  .wz-cpn-row .btn{flex:1;}
}
.cpn-status{
  display:flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:700; margin-top:8px; min-height:18px;
  transition:color .2s, opacity .2s;
}
.cpn-status.ok{color:var(--green);}
.cpn-status.err{color:#c0392b;}

/* ===== language toggle ===== */
.lang-pill{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-width:40px; height:40px; padding:0 12px; border-radius:11px;
  border:1.5px solid var(--line-2); background:#fff;
  font-family:'Poppins','Tajawal',sans-serif; font-size:12.5px; font-weight:700;
  color:var(--steel-deep); white-space:nowrap;
  transition:border-color .15s, background .15s, transform .15s var(--ease);
}
.lang-pill:hover{border-color:var(--steel); background:var(--sky-2); transform:translateY(-1px);}
@media(max-width:999px){ .lang-pill{padding:0 10px; height:40px; font-size:11.5px;} }
.fm-cta .btn-lang{
  margin-top:10px; width:100%; background:rgba(255,255,255,.08); color:#fff;
  border:1.5px solid rgba(255,255,255,.35);
}
.fm-cta .btn-lang:hover{background:rgba(255,255,255,.16); border-color:#fff;}

/* ==========================================================
   PGX — floating page index / section navigator
   Collapsed: a hairline tick rail on the inline-start edge
   (opposite the scrollbar in both RTL and LTR). Hover/focus
   expands a glass panel; on touch, an edge tab with a live
   reading-progress ring opens the same panel.
   ========================================================== */
.pgx-rail{
  position:fixed; inset-inline-start:8px; top:50%; transform:translateY(-50%);
  z-index:398; display:flex; flex-direction:column; align-items:flex-start;
  gap:7px; padding:12px 8px; border-radius:14px;
}
.pgx-tick{
  display:block; width:15px; height:3px; border-radius:3px;
  background:var(--line-2); opacity:.85;
  transition:width .28s var(--ease), background .28s, box-shadow .28s;
}
.pgx-rail:hover .pgx-tick{opacity:1;}
.pgx-tick:hover{background:var(--steel); width:22px;}
.pgx-tick:focus-visible{outline:2px solid var(--steel); outline-offset:3px;}
.pgx-tick.done{background:rgba(44,100,173,.5);}
.pgx-tick.on{
  width:26px; background:linear-gradient(90deg,var(--steel),var(--brass));
  box-shadow:0 0 12px rgba(44,100,173,.55);
}

.pgx-tab{
  position:fixed; inset-inline-start:10px; top:56%; z-index:408;
  width:46px; height:46px; border-radius:50%; border:1px solid var(--line-2);
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(12px) saturate(1.3); backdrop-filter:blur(12px) saturate(1.3);
  box-shadow:var(--card-sh); color:var(--steel-deep); cursor:pointer;
  display:none; align-items:center; justify-content:center;
}
.pgx-tab .ic{width:19px; height:19px;}
.pgx-tab .ring{position:absolute; inset:-1px; width:auto; height:auto; transform:rotate(-90deg); pointer-events:none;}
.pgx-tab .ring circle{fill:none; stroke-width:2.4;}
.pgx-tab .ring .bg{stroke:var(--line);}
.pgx-tab .ring .pr{stroke:var(--steel); stroke-linecap:round; transition:stroke-dashoffset .2s linear;}

.pgx-panel{
  position:fixed; inset-inline-start:34px; top:50%; transform:translateY(-50%);
  z-index:406; width:264px; max-height:min(84vh,660px); max-height:min(84svh,660px);
  display:flex; flex-direction:column;
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(20px) saturate(1.45); backdrop-filter:blur(20px) saturate(1.45);
  border:1px solid rgba(205,217,236,.75); border-radius:18px;
  box-shadow:var(--card-sh-lg), inset 0 1px 0 rgba(255,255,255,.9);
  opacity:0; visibility:hidden;
  transition:opacity .22s var(--ease), visibility 0s .5s;
}
.pgx:hover .pgx-panel, .pgx:focus-within .pgx-panel, .pgx.open .pgx-panel{
  opacity:1; visibility:visible; transition:opacity .22s var(--ease);
}
.pgx-head{
  display:flex; align-items:center; gap:11px; padding:15px 16px 12px;
  border-bottom:1px solid var(--line);
}
.pgx-head img{width:30px; height:30px;}
.pgx-head b{display:block; font-size:13.5px; color:var(--ink-2); line-height:1.35;}
.pgx-head small{font-size:10.8px; color:var(--faint); font-weight:600;}
.pgx-pct{
  margin-inline-start:auto; font-size:11px; font-weight:600; color:var(--steel);
  background:var(--sky-2); border:1px solid var(--sky); border-radius:100px; padding:3px 9px;
}
.pgx-body{overflow-y:auto; overscroll-behavior:contain; padding:10px 10px 12px; scrollbar-width:thin;}
.pgx-body::-webkit-scrollbar{width:4px;}
.pgx-body::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:4px;}
.pgx-gt{
  display:flex; align-items:center; gap:8px; margin:12px 6px 5px;
  font-size:10.2px; font-weight:800; color:var(--faint);
}
.pgx-grp:first-child .pgx-gt{margin-top:2px;}
.pgx-gt::after{content:""; flex:1; height:1px; background:var(--line);}
.pgx-a{
  position:relative; display:flex; align-items:center; gap:9px;
  padding:6.5px 9px; border-radius:10px; border:1px solid transparent;
  font-size:12.6px; font-weight:700; color:var(--soft);
  transition:background .15s, color .15s, border-color .15s;
}
.pgx-a i{
  font-style:normal; font-family:'Poppins','Tajawal',sans-serif; direction:ltr;
  font-size:9.5px; font-weight:600; color:var(--faint); width:18px; flex:none;
  transition:color .15s;
}
.pgx-a:hover{background:var(--sky-2); color:var(--ink-2);}
.pgx-a.on{
  background:linear-gradient(var(--sky-2),var(--sky-2)) padding-box; border-color:var(--sky);
  color:var(--steel-deep);
}
.pgx-a.on i{color:var(--steel); font-weight:700;}
.pgx-a.on::before{
  content:""; position:absolute; inset-inline-start:-1px; top:50%; transform:translateY(-50%);
  width:3px; height:16px; border-radius:3px;
  background:linear-gradient(180deg,var(--steel),var(--brass));
}
.pgx-foot{padding:9px 10px 11px; border-top:1px solid var(--line);}
.pgx-a.hot{
  background:linear-gradient(180deg,#1d3a66,var(--ink-2)); color:#fff;
  box-shadow:0 10px 24px -12px rgba(18,41,79,.65);
}
.pgx-a.hot i{color:rgba(255,255,255,.6);}
.pgx-a.hot:hover{background:linear-gradient(180deg,#24457a,var(--ink-2)); color:#fff;}
.pgx-a.hot.on::before{background:var(--brass);}
.pgx-veil{position:fixed; inset:0; z-index:402; background:rgba(20,32,58,.32);}

@media(max-width:999px){
  .pgx-rail{display:none;}
  /* the index docks bottom-left as a twin of the contact fab (which moves
     bottom-right on mobile) — physical sides on purpose, same in RTL and LTR */
  .pgx-tab{
    display:flex; inset-inline-start:auto; left:18px; top:auto; bottom:18px;
    width:58px; height:58px;
  }
  .pgx-tab .ic{width:22px; height:22px;}
  .pgx-panel{
    inset-inline-start:auto; left:14px; top:auto; bottom:88px; transform:none;
    width:min(300px, calc(100vw - 28px));
    max-height:min(70vh, calc(100vh - 110px));
    max-height:min(70svh, calc(100svh - 110px));
  }
  .fab{left:auto; right:18px;}
  .c-sheet{left:auto; right:18px;}
  /* touch: hover must not open the panel — only the explicit .open state */
  .pgx:hover:not(.open) .pgx-panel, .pgx:focus-within:not(.open) .pgx-panel{
    opacity:0; visibility:hidden;
  }
}
@media (prefers-reduced-motion:reduce){
  .pgx-panel, .pgx-tick, .pgx-a{transition:none;}
}

/* ==========================================================================
   FROM THE BLOG — the five cluster pillars on the homepage.

   Grid children are element-only (<a> cards), never bare text: the blog
   stylesheet carries the same rule and the reason for it, and the two files
   should not disagree about it. Prose inside each card stays in normal
   block flow.
   ========================================================================== */
.pillar-grid{display:grid; grid-template-columns:1fr; gap:16px;}
@media(min-width:680px){ .pillar-grid{grid-template-columns:1fr 1fr;} }
@media(min-width:1020px){ .pillar-grid{grid-template-columns:repeat(3,1fr); gap:20px;} }

.pillar-card{padding:22px 22px 20px; position:relative; overflow:hidden;
  transition:transform .25s var(--ease), box-shadow .25s, border-color .25s;}
.pillar-card:hover{transform:translateY(-5px); box-shadow:var(--card-sh-lg); border-color:var(--line-2);}
.pillar-card::before{content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,var(--steel),var(--brass)); opacity:0; transition:opacity .25s;}
.pillar-card:hover::before{opacity:1;}

.pillar-card .pc-tag{display:inline-block; font-size:11px; font-weight:800; color:var(--steel-deep);
  background:var(--sky-2); border:1px solid var(--sky); border-radius:100px;
  padding:4px 12px; margin-bottom:12px;}
.pillar-card h3{font-size:17px; line-height:1.55; margin-bottom:9px; color:var(--ink);}
.pillar-card p{font-size:13.5px; line-height:1.75; color:var(--soft); font-weight:500; margin-bottom:14px;}
.pillar-card .pc-go{display:block; font-size:12.5px; font-weight:800; color:var(--steel);}

/* the "all posts" card reads as a destination, not another article */
.pillar-card.pc-all{background:linear-gradient(170deg,#14294e,#0b1730); border-color:transparent;}
.pillar-card.pc-all h3{color:#fff;}
.pillar-card.pc-all p{color:#aebdd8;}
.pillar-card.pc-all .pc-tag{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.2); color:#8fb4e4;}
.pillar-card.pc-all .pc-go{color:#8fb4e4;}