/* BYS Responsive Compatibility Layer v1.0
   Purpose: normalize the whole BYS public site, portals and admin pages across
   desktop, laptop, tablet, iPhone/Android and very small screens. */

:root{
  --bys-safe-x: clamp(12px, 3vw, 28px);
  --bys-header-h: 82px;
}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  overflow-x:hidden;
}
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}
img,svg,video,canvas,iframe{
  max-width:100%;
  height:auto;
}
button,input,select,textarea{
  max-width:100%;
  font:inherit;
}
button,a,input,select,textarea{
  -webkit-tap-highlight-color:transparent;
}
input,select,textarea{min-width:0}
pre,code{overflow-wrap:anywhere}

/* ---------- Main BYS header ---------- */
.bys-header .nav__inner{
  width:min(96%, 1440px);
  max-width:1440px;
  gap:clamp(10px,1.25vw,22px);
  min-width:0;
}
.bys-header .brand{
  flex:0 1 auto;
  min-width:0;
  gap:10px;
}
.bys-header .brand__text{min-width:0}
.bys-header .brand__name{
  white-space:nowrap;
  font-size:clamp(.88rem,1.05vw,1.1rem);
}
.bys-header .brand__sub{
  white-space:nowrap;
  font-size:clamp(.52rem,.62vw,.68rem);
  letter-spacing:clamp(.6px,.1vw,1.2px);
}
.bys-header .menu--clean{
  display:flex;
  flex:1 1 auto;
  min-width:0;
  justify-content:center;
  gap:clamp(8px,1vw,17px);
}
.bys-header .menu--clean .nav-item{
  white-space:nowrap;
  font-size:clamp(.76rem,.82vw,.93rem);
  line-height:1.3;
}
.bys-header .menu--clean .nav-item--ai{color:#aefbff}
.bys-header .header-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex:0 0 auto;
  gap:10px;
}
.lang-switch{
  display:inline-flex;
  align-items:center;
  direction:ltr;
  gap:3px;
  padding:4px;
  border:1px solid rgba(0,243,255,.24);
  border-radius:999px;
  background:rgba(0,8,14,.68);
  min-height:40px;
  white-space:nowrap;
}
.lang-btn{
  appearance:none;
  border:0;
  background:transparent;
  color:rgba(255,255,255,.62);
  min-height:32px;
  padding:6px 10px;
  border-radius:999px;
  cursor:pointer;
  font-family:'Cairo',sans-serif;
  font-size:.76rem;
  font-weight:800;
  line-height:1;
}
.lang-btn.active{
  color:#001014;
  background:#00f3ff;
  box-shadow:0 0 14px rgba(0,243,255,.3);
}
.lang-divider{width:1px;height:18px;background:rgba(255,255,255,.12)}
.header-contact{
  width:auto!important;
  min-height:42px;
  padding:9px 15px!important;
  font-size:.78rem!important;
  white-space:nowrap;
}
.bys-header .burger{
  width:46px;
  height:46px;
  min-width:46px;
  align-items:center;
  justify-content:center;
  padding:8px;
  border:1px solid rgba(0,243,255,.22);
  border-radius:12px;
  background:rgba(0,243,255,.05);
}
.bys-header .burger span{width:25px;height:2px}

/* Main mobile drawer. Keeping it in normal viewport bounds is critical on iOS. */
.bys-header .mobile--clean{
  max-height:calc(100dvh - 96px);
  overflow-y:auto!important;
  overscroll-behavior:contain;
  scrollbar-width:thin;
}
.bys-header .mobile--clean a{
  min-height:46px;
  display:flex!important;
  align-items:center;
  justify-content:center;
}

/* ---------- Main content missing/new component styles ---------- */
.product-showcase{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);
  align-items:center;
  gap:clamp(28px,5vw,72px);
  padding:clamp(28px,4vw,58px);
  overflow:hidden;
  position:relative;
}
.product-showcase--reverse .product-copy{order:2}
.product-showcase--reverse .product-visual{order:1}
.product-copy,.product-visual{min-width:0}
.product-copy h2{font-size:clamp(2rem,4vw,3.6rem);line-height:1.2;margin:8px 0 18px}
.product-copy h2 span{color:#fff}
.product-kicker{
  display:inline-block;
  font-family:'Share Tech Mono',monospace;
  color:#00f3ff;
  font-size:.75rem;
  letter-spacing:2.2px;
  margin-bottom:10px;
  direction:ltr;
}
.product-kicker--green{color:#00ff88}
.product-lead{
  color:rgba(255,255,255,.78);
  font-size:clamp(.95rem,1.2vw,1.08rem);
  line-height:2;
  max-width:760px;
}
.product-note{
  color:rgba(255,255,255,.55);
  line-height:1.9;
  margin-top:18px;
  font-size:.92rem;
}
.product-features{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin:22px 0 8px;
}
.product-features span,.founder-tags span{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:7px 13px;
  border-radius:999px;
  border:1px solid rgba(0,243,255,.18);
  background:rgba(0,243,255,.055);
  color:#dffcff;
  font-size:.82rem;
}
.hakarino-trial-badge,.coming-badge{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:34px;
  padding:5px 12px;
  margin:8px 0 2px;
  border:1px solid rgba(0,243,255,.22);
  border-radius:999px;
  background:rgba(0,243,255,.055);
  color:#bffcff;
  font-size:.78rem;
  font-weight:800;
}
.hakarino-trial-badge .dot,.coming-badge .dot{
  width:8px;height:8px;border-radius:50%;background:#00ff88;box-shadow:0 0 12px #00ff88;
}
.ai-page-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:48px;
  margin-top:24px;
  padding:11px 20px;
  border-radius:12px;
  background:linear-gradient(135deg,#00f3ff,#0066ff);
  color:#001014;
  font-weight:900;
  box-shadow:0 0 22px rgba(0,243,255,.24);
}
.product-visual{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:320px;
}
.ai-orb{
  width:min(300px,70vw);
  aspect-ratio:1;
  position:relative;
  display:grid;
  place-items:center;
}
.ai-orb__core{
  width:116px;height:116px;border-radius:50%;
  display:grid;place-items:center;
  font-family:'Rajdhani',sans-serif;
  font-size:4.2rem;font-weight:900;
  color:#041014;
  background:radial-gradient(circle at 35% 30%,#fff,#00f3ff 38%,#0066ff 100%);
  box-shadow:0 0 55px rgba(0,243,255,.55);
  z-index:3;
}
.ai-orb__ring{position:absolute;border-radius:50%;border:1px solid rgba(0,243,255,.35)}
.ai-orb__ring--1{inset:18%;animation:spin 9s linear infinite}
.ai-orb__ring--2{inset:5%;border-style:dashed;animation:spin 18s linear infinite reverse}
.ai-orb__label{
  position:absolute;bottom:0;text-align:center;direction:ltr;
  color:#fff;font-family:'Rajdhani',sans-serif;font-weight:800;letter-spacing:2px;
}
.ai-orb__label small{color:#00f3ff;font-size:.65rem}
.ai-terminal{
  width:min(100%,420px);
  border:1px solid rgba(0,243,255,.26);
  border-radius:18px;
  overflow:hidden;
  background:rgba(1,8,14,.88);
  box-shadow:0 0 38px rgba(0,243,255,.12);
  direction:ltr;
}
.terminal-head{
  min-height:44px;display:flex;align-items:center;gap:7px;padding:0 14px;
  background:rgba(255,255,255,.035);border-bottom:1px solid rgba(0,243,255,.13);
  font-family:'Share Tech Mono',monospace;color:#7edee5;font-size:.78rem;
}
.terminal-head span{width:8px;height:8px;border-radius:50%;background:#1d6a70}
.terminal-head b{margin-left:auto}
.terminal-body{
  padding:22px;display:grid;gap:15px;
  font-family:'Share Tech Mono',monospace;font-size:clamp(.72rem,2vw,.88rem);
  color:#9cc8cd;overflow-wrap:anywhere;
}
.terminal-body i{color:#00f3ff;font-style:normal}
.terminal-ok{color:#00ff88!important}

.founder-card{
  display:grid;
  grid-template-columns:minmax(220px,330px) minmax(0,1fr);
  gap:clamp(26px,5vw,64px);
  align-items:center;
  padding:clamp(26px,4vw,52px);
  overflow:hidden;
}
.founder-photo-wrap{
  position:relative;
  width:min(100%,320px);
  margin:auto;
  border-radius:24px;
  overflow:hidden;
  border:1px solid rgba(0,243,255,.25);
  background:#071015;
}
.founder-photo{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 20%}
.founder-scan{
  position:absolute;inset-inline:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,#00f3ff,transparent);
  animation:card-scan 4s linear infinite;
}
.founder-copy{min-width:0}
.founder-copy h2{font-size:clamp(2rem,4vw,3.35rem);line-height:1.2;margin:5px 0}
.founder-copy h3{color:#fff;font-size:clamp(1rem,1.5vw,1.25rem);margin-bottom:18px}
.founder-copy p{color:rgba(255,255,255,.68);line-height:2;margin:0 0 13px}
.founder-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}

.clients-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(220px,1fr));
  gap:22px;
  max-width:800px;
  margin:0 auto;
}
.client-logo{
  min-height:170px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
  overflow:hidden;
}
.client-logo-img{max-width:160px;max-height:86px;width:auto;height:auto;object-fit:contain}
.client-fallback{display:none;font-size:2rem;font-weight:900;color:#fff}
.client-mark--naqdh{font-family:'Cairo',sans-serif}

/* ---------- Better LTR behavior ---------- */
html[dir="ltr"] body{font-family:'Cairo',Arial,sans-serif}
html[dir="ltr"] .menu a:not(.btn)::after{left:0;right:auto}
html[dir="ltr"] .check-list li::before{margin-left:0;margin-right:15px}
html[dir="ltr"] select.input{background-position:right 20px center}
html[dir="ltr"] .courses-arrow{transform:scaleX(-1)}
html[dir="ltr"] .founder-card,html[dir="ltr"] .product-showcase{text-align:left}

/* ---------- Laptop/tablet breakpoint: switch to burger before collision ---------- */
@media (max-width:1180px){
  .bys-header .menu--clean{gap:8px}
  .bys-header .brand__sub{display:none}
  .header-contact{display:none!important}
}
@media (max-width:1050px){
  :root{--bys-header-h:76px}
  .bys-header{padding:10px 0!important}
  .bys-header .menu--clean{display:none!important}
  .bys-header .burger{display:flex!important}
  .bys-header .nav__inner{width:calc(100% - 24px)}
  .bys-header .brand__sub{display:block}
  .hero{padding-top:calc(var(--bys-header-h) + 54px)!important}
  .product-showcase,.founder-card{grid-template-columns:1fr}
  .product-showcase--reverse .product-copy,.product-showcase--reverse .product-visual{order:initial}
  .product-visual{min-height:260px}
}

/* ---------- Phone ---------- */
@media (max-width:700px){
  :root{--section-gap:66px;--bys-header-h:72px}
  body{line-height:1.75}
  .container{width:calc(100% - 28px)!important;max-width:none!important}
  .section{padding:66px 0!important}

  .bys-header{padding:8px 0!important;border-radius:0 0 14px 14px!important}
  .bys-header .nav__inner{width:calc(100% - 20px)!important;gap:7px}
  .bys-header .brand{gap:7px!important;min-width:0;flex:1 1 auto}
  .bys-header .brand__logo{width:39px!important;height:39px!important;flex:0 0 39px}
  .bys-header .brand__text{overflow:hidden}
  .bys-header .brand__name{font-size:.82rem!important;overflow:hidden;text-overflow:ellipsis}
  .bys-header .brand__sub{font-size:.48rem!important;letter-spacing:.6px!important;overflow:hidden;text-overflow:ellipsis}
  .bys-header .header-actions{gap:6px;flex:0 0 auto}
  .lang-switch{padding:3px;min-height:38px}
  .lang-btn{min-height:30px;padding:5px 8px;font-size:0;min-width:36px}
  .lang-btn[data-lang="ar"]::after{content:'AR';font-size:.7rem}
  .lang-btn[data-lang="en"]::after{content:'EN';font-size:.7rem}
  .lang-divider{display:none}
  .bys-header .burger{width:40px;height:40px;min-width:40px;padding:7px;border-radius:10px}
  .bys-header .burger span{width:22px}
  .bys-header .mobile--clean{
    top:72px!important;
    left:10px!important;right:10px!important;
    padding:12px!important;
    gap:8px!important;
    max-height:calc(100dvh - 84px);
  }
  .bys-header .mobile--clean a{
    min-height:44px!important;
    padding:10px 12px!important;
    font-size:.92rem!important;
    border-radius:11px!important;
  }

  .hero{padding-top:104px!important;padding-bottom:58px!important}
  .hero__inner{gap:32px!important}
  .hero__left{min-width:0;width:100%}
  .pill{max-width:100%;font-size:.76rem!important;white-space:normal;text-align:center}
  .title{font-size:clamp(1.7rem,8.2vw,2.25rem)!important;line-height:1.42!important;overflow-wrap:anywhere}
  .subtitle{font-size:.94rem!important;line-height:1.9!important}
  .cta{width:100%}
  .cta .btn{min-height:48px;width:100%!important;padding:12px 16px!important;font-size:.9rem!important}
  .stats{display:grid!important;grid-template-columns:1fr!important;width:100%;gap:10px!important}
  .stat{width:100%;min-height:74px;padding:12px 16px!important}
  .hero__right{display:flex;flex-direction:column;align-items:center;min-width:0}
  .orb{width:min(210px,66vw)!important;height:auto!important;aspect-ratio:1}

  .section__head{margin-bottom:28px!important}
  .section__head h2{font-size:clamp(1.7rem,7vw,2.1rem)!important}
  .section__head p{font-size:.92rem;line-height:1.8}
  .grid,.grid--team,.two{grid-template-columns:1fr!important;gap:16px!important}
  .card,.pad,.member,.courses-card{padding:22px 16px!important;border-radius:15px!important}
  .card h3{font-size:1.1rem!important;line-height:1.55}
  .card li,.check-list li{font-size:.93rem!important;line-height:1.8}
  .lead{font-size:1rem!important;line-height:1.9}
  .chips{gap:8px!important}.chip{padding:7px 12px!important;font-size:.78rem!important}

  #courses{padding:66px 0!important}
  .courses-card{max-width:100%!important}
  .courses-card h3{font-size:1.42rem!important}
  .courses-card>p{font-size:.88rem!important}
  .courses-stats{display:grid!important;grid-template-columns:repeat(3,1fr);gap:8px!important}
  .courses-stat{min-width:0}
  .courses-stat .num{font-size:1.55rem!important}
  .courses-stat .lbl{font-size:.65rem!important;letter-spacing:0!important}
  .courses-btn{width:100%!important;justify-content:center!important;padding:12px 14px!important;font-size:.85rem!important}

  .product-showcase,.founder-card{padding:22px 16px!important;gap:26px!important;border-radius:18px!important}
  .product-copy{text-align:start}
  .product-copy h2,.founder-copy h2{font-size:clamp(1.85rem,9vw,2.55rem)!important}
  .product-lead,.product-note,.founder-copy p{font-size:.9rem!important;line-height:1.9!important}
  .product-features,.founder-tags{gap:7px!important}
  .product-features span,.founder-tags span{font-size:.73rem!important;min-height:34px!important;padding:6px 10px!important}
  .ai-page-cta{width:100%;min-height:48px;margin-top:18px}
  .product-visual{min-height:220px!important}
  .ai-orb{width:min(230px,72vw)}
  .ai-orb__core{width:92px;height:92px;font-size:3.4rem}
  .ai-terminal{width:100%}
  .terminal-body{padding:16px;gap:12px}
  .founder-photo-wrap{width:min(240px,78vw)}
  .founder-copy{text-align:start}

  .clients-grid{grid-template-columns:1fr!important;gap:12px!important}
  .client-logo{min-height:130px;padding:22px!important}
  .client-logo-img{max-width:145px;max-height:72px}

  .member{flex-direction:row!important;text-align:start!important;align-items:flex-start!important;gap:14px!important}
  .avatar{width:58px!important;height:58px!important;min-width:58px!important;font-size:1.55rem!important}
  .member__name{font-size:1.05rem!important}
  .member__role{font-size:.82rem!important;line-height:1.7}

  .row{flex-direction:column!important;gap:12px!important}
  .form{gap:12px!important}
  .input{min-height:48px!important;padding:12px 14px!important;font-size:16px!important}
  textarea.input{min-height:130px}
  .info{gap:14px!important;margin-bottom:24px!important}
  .info__item{gap:12px!important;font-size:.9rem!important;overflow-wrap:anywhere}
  .info__icon{width:42px!important;height:42px!important;min-width:42px!important;font-size:1.15rem!important}

  /* Loader fits 320px phones */
  #bys-loader{gap:20px!important;padding:20px}
  .ldr-logo{gap:10px!important;max-width:100%}
  .ldr-img{width:52px!important;height:52px!important}
  .ldr-divider{height:46px!important}
  .ldr-name{font-size:clamp(23px,9vw,30px)!important;letter-spacing:2px!important}
  .ldr-prompt,.ldr-sub{font-size:9px!important}
  .ldr-bar-wrap{width:min(240px,76vw)!important}
}

@media (max-width:390px){
  .bys-header .brand__name{font-size:.75rem!important}
  .bys-header .brand__sub{display:none!important}
  .lang-btn{min-width:32px!important;padding:4px 6px!important}
  .bys-header .burger{width:38px;height:38px;min-width:38px}
  .title{font-size:1.62rem!important}
  .courses-stats{grid-template-columns:1fr!important;gap:12px!important}
  .courses-stat{padding:5px 0}
  .member{flex-direction:column!important;text-align:center!important;align-items:center!important}
  .product-kicker{font-size:.66rem;letter-spacing:1.5px}
}

/* ---------- Generic portal/admin responsiveness ---------- */
@media (max-width:900px){
  body>.wrap,.wrap{max-width:100%!important;width:100%!important;padding-left:14px!important;padding-right:14px!important}
  .top{gap:12px;flex-wrap:wrap!important;padding:14px!important}
  .top h1{font-size:clamp(1.05rem,5vw,1.35rem)!important}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .grid{grid-template-columns:1fr!important}
  .scroll,.tbl{overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  .tbl table,.scroll table,table{min-width:680px}
  .modal{padding:14px!important}
  .mbox{padding:20px 16px!important;max-width:100%!important}
  .rrow{gap:12px;flex-wrap:wrap}
}
@media (max-width:600px){
  .login{padding:14px!important;min-height:100dvh!important}
  .lbox{padding:28px 18px!important;border-radius:14px!important}
  .stats{grid-template-columns:1fr!important}
  .stat{padding:16px!important}
  .stat .n{font-size:28px!important}
  .card{max-width:100%;overflow-wrap:anywhere}
  .tabs{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important}
  .btn{min-height:44px!important;padding:10px 12px!important}
  .form,.grid{min-width:0}
  .form input,.form select,.form textarea,.input,.fg input{font-size:16px!important;min-height:46px}
  .dash-head{flex-wrap:wrap!important;gap:10px!important}
  .orders,.panel,.pay,.order{max-width:100%;overflow-wrap:anywhere}
}

/* ---------- Maintenance / digital card / stand-alone pages ---------- */
@media (max-width:600px){
  .page{padding-left:10px!important;padding-right:10px!important}
  .cyber-frame{border-radius:20px!important}
  .brand-row{gap:8px!important;flex-wrap:wrap!important}
  .actions{grid-template-columns:1fr!important}
  .action{min-height:72px!important}
  .logo-wrap img{width:64px!important}
  .icon-gear{font-size:50px!important}
  .info-card{padding:16px!important}
  .home-btn{width:100%;padding:13px 18px!important}
}

/* Respect accessibility settings and reduce expensive animations on phones. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
}
@media (max-width:700px) and (prefers-reduced-data:reduce){
  .bg-particles{display:none!important}
}