/* AYLAROX / Mobile UX refinement | 2026-11 | authored for existing markup. */
/* Shared guardrails across all six Arabic/English pages. */
html { scroll-padding-top: 82px; }
body { min-width: 0; }
.container, .section, .section-heading, .card, .product-explorer, .product-detail,
.ai-report-copy, .ai-preview, .cta-panel, .contact-form, .contact-details { min-width:0; }
img, video { max-width:100%; height:auto; }
button, a, input, select { touch-action:manipulation; }
.btn { max-width:100%; }
.btn span, .product-detail h3, .integration-row strong, .card h3,
.footer-links a, .contact-method, .section-heading h2, .subhero h1 { overflow-wrap:break-word; }
/* Clickable authentic system screenshots: tap a screen to view it at native resolution. */
.hero-shot-link { display:block;position:relative;min-width:0;color:inherit;text-decoration:none; }
.hero-shot-link img { width:100%;height:auto; }
.hero-shot-link::after { content:'↗'; position:absolute;inset-inline-end:10px;bottom:10px;
 width:29px;height:29px;display:grid;place-items:center;border-radius:9px;
 background:rgba(6,14,27,.84);border:1px solid rgba(173,207,255,.4);
 color:#eef6ff;font:700 19px Inter,system-ui,sans-serif;line-height:1; opacity:.8; }
.hero-shot-link:focus-visible { outline:3px solid #8bbdff;outline-offset:3px; }
/* Tablets and narrow laptop browsers. */
@media (max-width: 980px) {
  .nav { max-height:calc(100dvh - 84px);overflow-y:auto;overscroll-behavior:contain; }
  .nav a { min-height:48px;display:flex;align-items:center; }
  .site-header { isolation:isolate; }
  .integration-layout, .services-layout, .about-grid,.contact-grid { min-width:0; }
  .hero-media { transform:none; }
  .product-explorer { grid-template-columns:minmax(0,1fr); }
  .integration-art { width:100%; }
  .footer-identity { max-width:100%; }
}
@media (min-width: 601px) and (max-width: 980px) {
 .hero { padding-block:130px 105px; }
 .hero-grid { gap:45px; }
 .hero-actions { gap:12px; }
 .hero-media { width:min(100%,780px); }
 .floating-kds { width:42%;inset-inline-start:12px;bottom:-38px; }
 .product-tabs { gap:8px; }
 .product-tab { padding:11px 15px; }
 .integration-orbit { width:min(350px,64vw);height:min(350px,64vw); }
}
@media (max-width: 600px) {
 :root { --radius:17px; }
 html { scroll-padding-top:76px; }
 .container { width:calc(100% - 36px);max-width:100%; }
 .section { padding:64px 0; }
 .section-heading { margin-bottom:26px; }
 .section-heading.center { margin-bottom:28px; }
 .section-heading h2 { font-size:clamp(27px,7.7vw,36px);line-height:1.28;letter-spacing:-.018em;margin:12px 0 12px; }
 html[lang=ar] .section-heading h2 { letter-spacing:0; }
 .section-heading p { font-size:14.5px;line-height:1.85; }
 .kicker { font-size:10px;letter-spacing:.1em;line-height:1.5;flex-wrap:wrap; }
 .btn { min-height:50px;padding:12px 14px;line-height:1.42;white-space:normal;text-align:center;gap:9px;font-size:13.5px; }
 .btn svg { flex:0 0 17px; }
 .site-header { height:70px; }
 .header-inner { gap:8px; }
 .brand { gap:7px;min-width:0; }
 .brand .brand-mark { flex:0 0 24px;width:24px;height:24px; }
 .brand img:not(.brand-mark) { display:block;width:clamp(113px,32vw,143px);height:auto;max-height:28px;object-fit:contain; }
 .header-actions { gap:7px; }
 .header-actions .lang-btn { min-width:48px;height:44px;padding:0 8px; }
 .header-actions .lang-btn .ico { width:15px;height:15px; }
 .menu-btn { flex:0 0 44px;min-width:44px;height:44px;padding:0; }
 .nav { top:70px;max-height:calc(100dvh - 70px);padding:12px 18px 21px;background:rgba(8,14,23,.99);backdrop-filter:blur(20px); }
 .nav a { min-height:50px;padding:13px 8px;font-size:15px; }
 .hero { min-height:0;padding:112px 0 62px;display:block;overflow:hidden; }
 .hero-grid { display:flex;flex-direction:column;gap:26px; }
 .hero-copy { width:100%;min-width:0; }
 .hero-pill { max-width:100%;font-size:11.5px;line-height:1.5;margin-bottom:18px;padding:7px 10px; }
 .hero-pill .pulse-dot { flex:0 0 7px; }
 .hero h1 { font-size:clamp(34px,9vw,48px);line-height:1.22;margin-bottom:16px;letter-spacing:-.035em;max-width:100%; }
 html[lang=ar] .hero h1 { letter-spacing:0; }
 .hero h1 .line { display:block;overflow-wrap:normal; }
 .hero-sub { font-size:15px;line-height:1.82; }
 .hero-actions { display:flex;flex-direction:column;align-items:stretch;gap:10px;margin-top:24px; }
 .hero-actions .btn { flex:none;width:100%;min-width:0;min-height:51px;font-size:14px;padding:12px 13px; }
 .hero-footnote { margin-top:16px;gap:7px;font-size:11px;line-height:1.7; }
 .hero-footnote span:last-child { display:block;flex-basis:100%;font-size:10px;letter-spacing:.03em; }
 .hero-footnote span[style] { display:none; }
 .hero-media { width:100%;margin:3px auto 0;transform:none;padding-bottom:0; }
 .media-glow { inset:0;filter:blur(40px); }
 .window { border-radius:13px;box-shadow:0 17px 36px rgba(0,0,0,.35); }
 .window-chrome { height:31px;padding:0 9px;gap:6px; }
 .window-dots { gap:4px; }
 .window-dots span { width:5px;height:5px; }
 .window-chrome .window-label { font-size:clamp(7px,2.05vw,9px);letter-spacing:.03em; }
 .window-chrome [style] { font-size:8px !important;white-space:nowrap; }
 .floating-kds { position:relative;inset:auto;bottom:auto;top:auto;right:auto;left:auto;
   width:100%;padding:6px;margin:22px 0 0;animation:none;border-radius:13px;
   box-shadow:0 16px 35px rgba(0,0,0,.35); }
 .floating-kds .float-label { top:-13px;inset-inline-start:11px;font-size:9px;padding:4px 9px; }
 .floating-kds img { border-radius:9px; }
 .floating-chip, .scroll-indicator { display:none !important; }
 .hero-orbit { width:90vw;height:90vw;inset-inline-end:-52vw;top:20%;opacity:.65; }
 .hero-ghost { width:65vw;inset-inline-end:-12vw;top:15%;opacity:.045; }
 .platform-strip .container { display:flex;flex-direction:column;align-items:center;gap:11px;padding-block:19px; }
 .platform-strip p { font-size:11px;white-space:normal;text-align:center;line-height:1.5; }
 .capabilities { display:flex;justify-content:center;gap:7px 11px; }
 .capabilities span { font-size:10px;letter-spacing:.03em; }
 .capabilities i { width:3px;height:3px; }
 .solutions-grid { display:grid;grid-template-columns:minmax(0,1fr);gap:12px; }
 .solution-card { min-height:0;padding:22px 20px 24px; }
 .solution-card .icon-wrap { width:43px;height:43px;margin-bottom:16px;border-radius:12px; }
 .solution-card h3 { font-size:18px;margin-bottom:8px; }
 .solution-card p { font-size:13.5px;line-height:1.85; }
 .solution-card .card-arrow { display:none; }
 .product-tabs { display:flex;justify-content:flex-start;flex-wrap:nowrap;
  width:calc(100% + 36px);max-width:calc(100% + 36px);margin-inline:-18px;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
  scroll-padding-inline:18px;padding:2px 18px 14px;gap:8px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none; }
 .product-tabs::-webkit-scrollbar { display:none; }
 .product-tab { flex:0 0 auto;scroll-snap-align:start;border-radius:10px;min-height:46px;
  font-size:12.5px;padding:10px 14px;white-space:nowrap; }
 .product-explorer { grid-template-columns:minmax(0,1fr);border-radius:17px; }
 .product-visual { padding:13px;min-width:0; }
 .visual-toolbar { gap:5px;font-size:9px;letter-spacing:.02em;margin-bottom:10px; }
 .visual-toolbar > span:last-child { white-space:nowrap;font-size:8px; }
 .video-shell { aspect-ratio:16/10;border-radius:11px; }
 .video-shell video { object-fit:contain; }
 .play-icon { height:56px;width:56px;box-shadow:0 0 0 8px rgba(67,132,237,.13); }
 .play-icon svg { width:21px;height:21px; }
 .play-caption { font-size:11px;padding:5px 11px; }
 .visual-footer { align-items:flex-start;flex-direction:column;gap:5px;margin-top:12px;line-height:1.6;font-size:11px; }
 .text-link { min-height:36px;font-size:12px; }
 .product-detail { padding:24px 20px 26px; }
 .product-detail h3 { font-size:clamp(23px,6.9vw,30px);line-height:1.35;margin:12px 0; }
 .product-detail p { font-size:14px;line-height:1.85;margin-bottom:17px; }
 .detail-points { gap:10px;margin-bottom:20px; }
 .detail-points div { font-size:13px;line-height:1.6; }
 .product-detail .btn { width:100%; }
 .process-grid { grid-template-columns:1fr;gap:10px; }
 .process-step { padding:18px 18px 20px; }
 .step-num { font-size:27px;margin-bottom:8px; }
 .process-step h3 { font-size:17px;margin-bottom:5px; }
 .process-step p { font-size:13.5px; }
 .ai-report-layout { grid-template-columns:minmax(0,1fr);gap:23px; }
 .ai-report-copy .section-heading { margin:15px 0 17px; }
 .ai-report-copy > p, .ai-report-copy .section-heading p { font-size:14px;line-height:1.85; }
 .ai-status-pill { font-size:11px;padding:6px 10px; }
 .ai-capabilities { gap:13px;margin:17px 0 23px; }
 .ai-capabilities li { font-size:13.5px;line-height:1.65; }
 .ai-report-copy > .btn { width:100%; }
 .ai-preview { width:100%;padding:15px;border-radius:16px; }
 .ai-preview-top { flex-wrap:wrap;gap:7px; }
 .ai-preview-title { font-size:12.5px;gap:7px; }
 .ai-preview-icon { width:33px;height:33px; }
 .ai-preview-label { font-size:10px;padding:4px 7px; }
 .ai-question { gap:8px;padding:13px 0; }
 .ai-question .ai-avatar { width:31px;min-width:31px;height:31px; }
 .ai-question p { font-size:12.5px;line-height:1.65;padding:10px 11px; }
 .ai-reply { padding:13px; }
 .ai-reply-head { font-size:13px;margin-bottom:11px; }
 .ai-report-metrics { gap:8px; }
 .ai-report-metric { padding:12px 10px; }
 .ai-report-metric strong { font-size:12px;line-height:1.5; }
 .ai-report-metric small { font-size:10.5px;line-height:1.5; }
 .integration-layout { display:grid;grid-template-columns:minmax(0,1fr);gap:22px; }
 .integration-art { width:100%;min-height:315px;transform:none;overflow:hidden;order:2; }
 .integration-orbit { height:min(70vw,300px);width:min(70vw,300px); }
 .integration-orbit:before { inset:18%; }
 .integration-core { width:105px;height:105px;border-radius:23px; }
 .integration-core img { width:78px;max-height:78px; }
 .orbit-node { font-size:10px;gap:5px;text-align:center; }
 .orbit-node svg { width:36px;height:36px;padding:8px; }
 .orbit-node.n1 { top:-21px; }
 .orbit-node.n2 { right:-20px;top:44%; }
 .orbit-node.n3 { left:-20px;top:44%; }
 .orbit-node.n4 { bottom:-21px; }
 .integration-row { padding:13px 12px;gap:10px;flex-wrap:wrap; }
 .integration-row div:nth-child(2) { flex:1 1 155px; }
 .integration-row .status { margin-inline-start:auto; }
 .integration-row strong { font-size:13.5px; }
 .integration-row small { font-size:11px; }
 .services-main { min-height:0;padding:25px 21px; }
 .service-mini-grid { grid-template-columns:minmax(0,1fr);gap:11px; }
 .service-mini { min-height:0;padding:22px 20px; }
 .industries-list { grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; }
 .industry { padding:13px 9px;min-height:128px;gap:13px; }
 .industry strong { font-size:12px;line-height:1.55; }
 .about-grid { grid-template-columns:minmax(0,1fr);gap:14px; }
 .about-visual { min-height:220px; }
 .about-visual:before { width:min(70vw,290px);height:min(70vw,290px);box-shadow:0 0 0 35px rgba(77,119,189,.04),0 0 0 70px rgba(58,100,171,.028); }
 .about-visual img { width:min(64vw,240px); }
 .about-quote { font-size:20px; }
 .cta-section { padding:59px 0 66px; }
 .cta-panel { padding:29px 21px;border-radius:20px; }
 .cta-panel h2 { font-size:clamp(27px,7.7vw,37px);line-height:1.33; }
 .cta-panel > p { font-size:14.5px;line-height:1.8; }
 .booking-options { display:flex;flex-direction:column;align-items:stretch;gap:10px; }
 .booking-options .btn { width:100%;min-width:0; }
 .contact-section { padding-top:18px; }
 .contact-grid { grid-template-columns:minmax(0,1fr);gap:14px; }
 .contact-details,.contact-form { padding:23px 18px; }
 .contact-details h3,.contact-form h3 { font-size:22px; }
 .form-grid { grid-template-columns:minmax(0,1fr);gap:13px; }
 .field { min-width:0; }
 .field input,.field select,.field textarea { width:100%;max-width:100%;font-size:16px; }
 .form-submit { display:flex;flex-direction:column;align-items:stretch;gap:10px; }
 .form-submit .btn { width:100%; }
 .footer { margin-top:44px;padding:37px 0 22px; }
 .footer-inner { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 16px; }
 .footer-brand { grid-column:1 / -1;max-width:100%;justify-self:start; }
 .footer-identity { justify-content:flex-start;gap:10px;min-height:52px;max-width:100%; }
 .footer-identity .footer-symbol { width:43px;height:42px;flex:0 0 43px; }
 .footer-identity .footer-wordmark { width:clamp(145px,44vw,182px); }
 .footer-identity .footer-tagline { font-size:8px;letter-spacing:.045em;white-space:normal; }
 .footer-brand p { max-width:100%;font-size:12.5px;line-height:1.8;margin-top:11px; }
 .footer h4 { font-size:13px;margin-bottom:10px; }
 .footer-links { gap:8px; }
 .footer-links a,.footer-links span { font-size:12.5px;line-height:1.55; }
 .footer-bottom { margin-top:27px;padding-top:17px;align-items:flex-start;flex-direction:column;gap:9px;font-size:11px; }
 .subhero { min-height:0;padding:120px 0 55px; }
 .subhero h1 { font-size:clamp(31px,8.3vw,43px);line-height:1.25;letter-spacing:0;max-width:100%; }
 .subhero p { font-size:15px;line-height:1.8;margin-bottom:16px; }
 .subhero .hero-actions { margin-top:19px; }
 .subhero .subhero-symbol { width:65vw;inset-inline-end:-10%;top:25px;opacity:.055; }
}
@media (max-width: 370px) {
  .container { width:calc(100% - 28px); }
  .site-header .container { width:calc(100% - 24px); }
  .brand img:not(.brand-mark) { width:clamp(102px,31vw,118px); }
  .brand .brand-mark { width:21px;height:21px;flex-basis:21px; }
  .header-actions { gap:5px; }
  .lang-btn { min-width:44px;padding:0 6px; }
  .hero { padding-top:104px; }
  .hero h1 { font-size:clamp(32px,9.2vw,36px); }
  .hero-sub { font-size:14.4px; }
  .product-tabs { width:calc(100% + 28px);max-width:calc(100% + 28px);margin-inline:-14px;padding-inline:14px; }
  .ai-report-metrics { grid-template-columns:1fr; }
  .ai-report-metric strong { font-size:13px; }
  .integration-orbit { height:70vw;width:70vw; }
  .footer-inner { gap:20px 12px; }
  .footer-identity .footer-symbol { width:40px;flex-basis:40px; }
  .footer-identity .footer-wordmark { width:152px; }
}
@media (min-width:371px) and (max-width:600px) {
 .process-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .process-step { padding:18px 14px; }
 .process-step h3 { font-size:15px; }
}
@media (prefers-reduced-motion:reduce) {
 .floating-kds { animation:none !important; }
 .product-tabs { scroll-snap-type:none; }
}