.realExpAccentBar {
  width: 100%;
  height: 7px;
  background: var(--gradient-vivid);
  border-radius: 10px 10px 0 0;
  margin-bottom: 20px;
  box-shadow: var(--shadow-cta-cyan);
  background-size: 200% 100%;
  animation: rainbowShift 10s linear infinite;
}

@keyframes rainbowShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
/* Consolidated Real Experiences helpers: animation, shimmer, modal */
.realExperiencesWrap { 
  overflow-x: hidden; 
  overflow-y: visible;
  touch-action: pan-y;
  pointer-events: auto;
}
.realExperiencesWrap::-webkit-scrollbar { display: none; }
.realExperiencesWrap { -ms-overflow-style: none; scrollbar-width: none; }

/* entry animation */
.realExperiencesWrap .realExpCard { opacity: 0; transform: translateY(8px); }
.realExperiencesWrap.loaded .realExpCard { animation: fadeUp .48s cubic-bezier(.2,.9,.2,1) forwards; }
.realExperiencesWrap.loaded .realExpCard:nth-child(1) { animation-delay: 0s; }
.realExperiencesWrap.loaded .realExpCard:nth-child(2) { animation-delay: 0.08s; }
.realExperiencesWrap.loaded .realExpCard:nth-child(3) { animation-delay: 0.16s; }
.realExperiencesWrap.loaded .realExpCard:nth-child(4) { animation-delay: 0.24s; }
.realExperiencesWrap.loaded .realExpCard:nth-child(5) { animation-delay: 0.32s; }

@keyframes fadeUp {
  to { 
    opacity: 1; 
    transform: translateY(0);
  }
}

/* GPU-accelerated hint for smooth 60fps */
.realExpCard,
.btn,
.tab,
.slide {
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/* hover enhancement & small helpers */
.realExpCard:hover img { transform: scale(1.04); filter: brightness(1) saturate(1.08); }
.realExpName { display: flex; align-items: center; justify-content: center; gap: 8px; }
.expIcon { 
  display:inline-flex; 
  width:20px; 
  height:20px; 
  align-items:center; 
  justify-content:center; 
  font-size:1.05rem; 
  opacity:0.95;
  animation: iconPulse 2s ease-in-out infinite;
}
@keyframes iconPulse{
  0%, 100% { transform: scale(1); opacity: 0.95; }
  50% { transform: scale(1.15); opacity: 1; }
}

/* RTL: icon after text when Arabic is active */
html[dir="rtl"] .realExpName, .rtl .realExpName { flex-direction: row-reverse; }

/* shimmer overlay */
.realExpCard::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  border-radius: 22px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0) 100%);
  transform: translateX(-110%);
  opacity: 0.0;
}
.realExperiencesWrap.loaded .realExpCard::after { animation: shimmer 1.2s ease 0.2s forwards; }
.realExpCard:hover::after { opacity: 0.9; transform: translateX(0%); transition: transform .9s ease; }
@keyframes shimmer { to { transform: translateX(110%); opacity: 0.85; } }

/* Modal for experience details - Small & Smooth */
.expModal { 
  position: fixed; 
  inset: 0; 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  z-index:1200; 
  pointer-events:none; 
  opacity:0; 
  transition: opacity .4s ease;
  padding: 20px;
}
.expModal.open { 
  pointer-events:auto; 
  opacity:1;
}
.expModalBg { 
  position:absolute; 
  inset:0; 
  background: rgba(0,0,0,0.85); 
  backdrop-filter: blur(24px) saturate(150%);
  transition: all .4s ease;
}
.expModalCard { 
  position:relative; 
  z-index:2; 
  width:min(920px, 95%);
  max-width:920px;
  height: auto;
  max-height: 85vh;
  background: linear-gradient(135deg, rgba(8,8,10,0.98), rgba(15,10,20,0.98)); 
  border-radius:28px; 
  box-shadow: 0 40px 100px rgba(0,0,0,0.9),
              0 0 80px rgba(6, 182, 212, 0.25),
              inset 0 1px 0 rgba(255,255,255,0.15); 
  overflow: hidden;
  display:grid;
  grid-template-columns: 340px 1fr;
  transform: scale(0.85) translateY(50px) rotateX(12deg);
  transition: transform .65s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: 1px solid rgba(6, 182, 212, 0.4);
}
.expModal.open .expModalCard {
  transform: scale(1) translateY(0) rotateX(0);
}

.expModalLeft {
  display: flex;
  flex-direction: column;
  background: linear-gradient(165deg, rgba(6, 182, 212, 0.08), rgba(139, 92, 246, 0.08));
  border-right: 1px solid rgba(6, 182, 212, 0.2);
}

.expModalRight {
  display: flex;
  flex-direction: column;
  padding: 22px;
  gap: 14px;
}

.expModalImageSection {
  width: 100% !important;
  min-height: 200px !important;
  height: auto !important;
  max-height: 300px !important;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(6, 182, 212, 0.15), rgba(139, 92, 246, 0.15));
  position: relative;
  display: block !important;
  visibility: visible !important;
  flex-shrink: 0;
  aspect-ratio: 16/9;
}
.expModalImageSection::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(8,8,10,0.3) 60%, rgba(8,8,10,0.9) 100%);
  z-index: 1;
  pointer-events: none;
}
.expModalImageSection::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #06B6D4, #8B5CF6, #06B6D4);
  z-index: 2;
  box-shadow: 0 0 15px rgba(6, 182, 212, 0.6);
}
.expModalImageSection img { 
  width:100% !important; 
  height:100% !important; 
  object-fit:cover; 
  display:block !important;
  visibility: visible !important;
  opacity: 1 !important;
  border: none;
  transition: transform 0.6s ease;
}
.expModal.open .expModalImageSection img {
  transform: scale(1.05);
}

.expModalHeader {
  padding: 18px 20px;
  border-bottom: 1px solid rgba(6, 182, 212, 0.15);
}

.expModalBody {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.expModalContent { 
  display:flex; 
  flex-direction:column; 
  gap:12px; 
  padding:20px; 
  flex:1;
  background: linear-gradient(175deg, rgba(10,10,12,0.95), rgba(12,8,16,0.98));
}

.expModalName { 
  font-weight:800; 
  font-size:20px; 
  color:#fff; 
  letter-spacing:-0.03em; 
  position:relative; 
  line-height: 1.15;
  background: linear-gradient(125deg, #FFFFFF 0%, #06B6D4 50%, #8B5CF6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 6px;
}
.expModalName::after { 
  content:""; 
  position:absolute; 
  left:0; 
  bottom:-3px; 
  width: 45px; 
  height:2px; 
  border-radius:999px; 
  background: linear-gradient(90deg, #06B6D4, #8B5CF6); 
  opacity:.9;
  box-shadow: 0 0 8px rgba(6, 182, 212, 0.5);
}
.expModalDesc { 
  color:rgba(255,255,255,0.85); 
  font-size:13px; 
  line-height:1.65; 
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.04), rgba(139, 92, 246, 0.04)); 
  border:1px solid rgba(6, 182, 212, 0.15); 
  padding:14px 16px; 
  border-radius:10px; 
  box-shadow: inset 0 1px 3px rgba(6, 182, 212, 0.06); 
}

/* New organized layout styles */
.expModalHeader {
  margin-bottom: 20px;
}

.expModalTagline {
  color: rgba(6, 182, 212, 0.95);
  font-size: 12px;
  font-weight: 700;
  margin-top: 4px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.expModalInfoGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 0;
  background: transparent;
  border: none;
}

.expInfoItem {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px;
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.05), rgba(139, 92, 246, 0.05));
  border: 1px solid rgba(6, 182, 212, 0.15);
  border-radius: 10px;
  transition: all .3s ease;
}

.expInfoItem:hover {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(139, 92, 246, 0.1));
  border-color: rgba(6, 182, 212, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.1);
}

.expInfoIcon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  filter: drop-shadow(0 2px 4px rgba(6, 182, 212, 0.3));
}

.expInfoContent {
  flex: 1;
  min-width: 0;
}

.expInfoLabel {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(6, 182, 212, 0.6);
  margin-bottom: 3px;
}

.expInfoValue {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.3;
}

.expModalSection {
  margin-bottom: 14px;
}

.expModalSection:last-child {
  margin-bottom: 0;
}

.expSectionTitle {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: rgba(6, 182, 212, 0.8);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.expSectionTitle::before {
  content: '';
  width: 3px;
  height: 12px;
  background: linear-gradient(180deg, #06B6D4, #8B5CF6);
  border-radius: 2px;
}

.expModalPurpose {
  color: rgba(255, 255, 255, 0.88);
  font-size: 13px;
  line-height: 1.6;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(6, 182, 212, 0.08));
  border: 1px solid rgba(139, 92, 246, 0.2);
  padding: 12px 14px;
  border-radius: 10px;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.expModalPurpose::before {
  content: '💫';
  font-size: 14px;
  opacity: 0.7;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 2px;
}

.expModalPurpose::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #8B5CF6, #06B6D4);
  border-radius: 10px 0 0 10px;
}

.expModalClose { 
  position:absolute; 
  top:12px; 
  right:12px; 
  z-index:10; 
  width:34px; 
  height:34px; 
  border-radius:8px; 
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(139, 92, 246, 0.1)); 
  border:1px solid rgba(6, 182, 212, 0.3); 
  color:#06B6D4; 
  font-size:22px; 
  cursor:pointer; 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  transition: all .3s cubic-bezier(0.34, 1.56, 0.64, 1); 
  font-weight:600;
  line-height:1;
}
.expModalClose:hover { 
  transform: scale(1.1) rotate(90deg); 
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(139, 92, 246, 0.2)); 
  border-color: rgba(139, 92, 246, 0.5); 
  color: #8B5CF6;
}

/* RTL Support */
html[dir="rtl"] .expModalName, .rtl .expModalName { text-align: right; }
html[dir="rtl"] .expModalTagline, .rtl .expModalTagline { text-align: right; }
html[dir="rtl"] .expModalDesc, .rtl .expModalDesc { text-align: right; }
html[dir="rtl"] .expModalPurpose, .rtl .expModalPurpose { text-align: right; flex-direction: row-reverse; }
html[dir="rtl"] .expInfoLabel, .rtl .expInfoLabel { text-align: right; }
html[dir="rtl"] .expInfoValue, .rtl .expInfoValue { text-align: right; }
html[dir="rtl"] .expSectionTitle, .rtl .expSectionTitle { text-align: right; }
html[dir="rtl"] .expModalClose, .rtl .expModalClose { left:14px; right:auto; }

@media (max-width: 820px) { 
  .expModal { padding: 10px; }
  .expModalCard { 
    width: 100%; 
    grid-template-columns: 1fr;
    border-radius:20px; 
    max-height: 92vh; 
    overflow-y: auto;
  }
  .expModalLeft { border-right: none; border-bottom: 1px solid rgba(6, 182, 212, 0.2); }
  .expModalRight { padding: 18px; gap: 12px; }
  .expModalImageSection { min-height: 160px !important; height: auto !important; max-height: 240px !important; aspect-ratio: 16/9; }
  .expModalHeader { padding: 16px 18px; }
  .expModalName { font-size:18px; }
  .expModalTagline { font-size: 10px; }
  .expModalInfoGrid { grid-template-columns: 1fr; gap: 8px; }
  .expInfoItem { padding: 9px; }
  .expInfoIcon { font-size: 16px; }
  .expInfoLabel { font-size: 8px; }
  .expInfoValue { font-size: 10.5px; }
  .expModalDesc { font-size:11.5px; padding:12px 14px; line-height:1.6; }
  .expModalPurpose { font-size: 11px; padding:10px 12px; }
  html[dir="rtl"] .expModalClose, .rtl .expModalClose { left:12px; right:auto; }
  html[dir="rtl"] .expModalLeft, .rtl .expModalLeft { border-left: none; border-bottom: 1px solid rgba(6, 182, 212, 0.2); }
}
/* ===== Real Experiences: modern centered grid ===== */
.realExperiencesWrap {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 6px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  justify-items: center;
  perspective: 1000px;
  overflow-y: visible;
  pointer-events: auto;
}
.realExpCard {
  width: 100%;
  max-width: 220px;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  background: rgba(18, 18, 18, 0.6);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  transition: all 0.4s var(--ease-smooth);
  display: flex;
  flex-direction: column;
  position: relative;
}
.realExpCard::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #06B6D4 0%, #8B5CF6 100%);
  opacity: 0;
  transition: opacity .3s ease;
  z-index: 10;
}
.realExpCard:focus-visible { 
  outline: 3px solid var(--cta-primary);
  outline-offset: 4px;
}
.realExpCard:hover::before {
  opacity: 1;
}

/* Active state for mobile touch */
.realExpCard:active::before,
.realExpCard:focus::before {
  opacity: 1;
}

/* Desktop hover enhancements (pointer devices only) */
@media (hover: hover) and (pointer: fine) {
  .realExpCard:hover { 
    transform: translateY(-12px);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.3);
  }
  
  .realExpCard:hover img { 
    transform: scale(1.04); 
    filter: brightness(1) saturate(1.08); 
  }
  
  .realExpCard:hover::after { 
    opacity: 0.9; 
    transform: translateX(0%); 
    transition: transform .9s ease; 
  }
}

/* Touch feedback for mobile */
.realExpCard:active {
  transform: translateY(-6px);
  transition: transform 0.1s ease;
}

.realExpCard:focus, .realExpCard:hover { 
  transform: translateY(-12px);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.3);
  border-color: rgba(6, 182, 212, 0.3);
}

/* Image wrapper */
.realExpImageWrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  position: relative;
  background: rgba(0, 0, 0, 0.4);
}
/* Full Image Background */
.realExpImage { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  object-position: center center;
  display: block;
  transition: transform .5s cubic-bezier(0.34, 1.56, 0.64, 1), filter .3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .realExpCard:hover .realExpImage {
    transform: scale(1.1) rotate(1deg);
    filter: brightness(1.15) saturate(1.2);
  }
}
.realExpCard.retreat .realExpImage { object-position: center 30%; }
.realExpCard.hikes .realExpImage { object-position: center 40%; }
.realExpCard.camping .realExpImage { object-position: center 50%; }

/* Info section below image */
.realExpInfo { 
  padding: 12px 10px;
  display: flex; 
  flex-direction: column; 
  gap: 6px;
  background: linear-gradient(135deg, rgba(18, 18, 18, 0.95) 0%, rgba(24, 24, 24, 0.98) 100%);
  position: relative;
}
.realExpInfo::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10px;
  right: 10px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(6, 182, 212, 0.3) 50%, transparent 100%);
}
.realExpName { 
  display: flex; 
  align-items: center; 
  justify-content: center;
  gap: 5px; 
  font-size: 13px;
  font-weight: 600; 
  color: #FAFAFA;
  letter-spacing: 0.3px;
  text-align: center;
  transition: all .3s ease;
}
.realExpCard:hover .realExpName {
  color: #06B6D4;
  transform: translateX(2px);
}
.realExpName svg.expIcon { 
  width: 16px; 
  height: 16px;
  color: #06B6D4;
  transition: all .3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.realExpCard:hover .realExpName svg.expIcon {
  color: #8B5CF6;
  transform: rotate(5deg) scale(1.1);
}
.realExpName span { 
  display: inline-block;
  background: linear-gradient(135deg, #FAFAFA 0%, #E0E0E0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: all .3s ease;
}
.realExpCard:hover .realExpName span {
  background: linear-gradient(135deg, #06B6D4 0%, #8B5CF6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.realExpDesc {
  text-align: center;
  font-size: 11px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
  margin: 8px 0;
  padding: 0 8px;
  font-weight: 400;
  letter-spacing: 0.2px;
}

.realExpPrice { 
  text-align: center; 
  font-size: 11px; 
  font-weight: 600; 
  padding: 5px 10px;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
  border: 1px solid rgba(6, 182, 212, 0.2);
  color: #06B6D4;
  letter-spacing: 0.5px;
  transition: all .3s ease;
  align-self: center;
}
.realExpCard:hover .realExpPrice {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);
  border-color: rgba(139, 92, 246, 0.4);
  color: #8B5CF6;
  transform: scale(1.05);
}

/* Cards auto-arrange in responsive grid - no need for manual positioning */

@media (max-width: 980px){
  .realExperiencesWrap { 
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
}
@media (max-width: 820px){
  .realExperiencesWrap{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    gap:14px;
    padding-bottom:8px;
  }
  .realExperiencesWrap .realExpCard{
    flex: 0 0 78%;
    max-width: 78%;
    scroll-snap-align: center;
  }
  .realExpImageWrap {
    aspect-ratio: 16 / 10;
  }
}
@media (max-width:600px){
  .realExperiencesWrap{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:12px;
    padding-bottom:8px;
  }
  .realExperiencesWrap .realExpCard{ 
    max-width: 88%; 
    flex: 0 0 88%;
  }
  .realExpImageWrap {
    aspect-ratio: 16 / 11;
  }
  .realExpInfo {
    padding: 14px 12px;
    gap: 8px;
  }
  .realExpName {
    font-size: 14px;
    gap: 6px;
  }
  .realExpName svg.expIcon {
    width: 18px;
    height: 18px;
  }
  .realExpPrice {
    font-size: 12px;
    padding: 6px 12px;
  }
}

/* Follow Our Experiences - Compact */
.followCompact {
  margin-top: var(--space-md);
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.06), rgba(42, 157, 143, 0.06));
  border-radius: 12px;
  border: 1px solid rgba(255, 107, 53, 0.15);
  text-align: center;
  backdrop-filter: blur(4px);
}
.followCompact p {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(244, 241, 234, 0.85);
  letter-spacing: 0.2px;
  text-transform: uppercase;
  font-family: var(--font-heading);
}
.followCompact .followActions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.followCompact .followActions .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 10px;
  font-weight: 600;
  transition: all 0.2s ease;
}
.followCompact .followActions .btn:hover {
  transform: translateY(-2px);
}
.followCompact .followActions .btn svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

@media (max-width: 640px) {
  .followCompact {
    padding: 12px 14px;
  }
  .followCompact p {
    font-size: 12px;
    margin-bottom: 8px;
  }
  .followCompact .followActions {
    gap: 8px;
  }
  .followCompact .followActions .btn {
    font-size: 12px;
    padding: 7px 12px;
  }
  .followCompact .followActions .btn svg {
    width: 14px;
    height: 14px;
  }
}

:root{
  /* === 2026 ULTRA-MODERN COLOR SYSTEM === */
  /* Inspired by Linear, Vercel, Framer design systems */
  
  /* === Backgrounds - Sophisticated Depth === */
  --bg-primary: #090B10;
  --bg-secondary: #0F1115;
  --bg-tertiary: #16181D;
  --bg-elevated: #1D1F24;
  --bg-card: #1A1C21;
  --bg-glass: rgba(255, 255, 255, 0.02);
  --bg-glass-hover: rgba(255, 255, 255, 0.04);
  --bg-glass-strong: rgba(255, 255, 255, 0.08);
  
  /* === Text colors - Ultra Crisp === */
  --text-primary: #FAFAFA;
  --text-secondary: rgba(250,250,250,.88);
  --text-tertiary: rgba(250,250,250,.65);
  --text-muted: rgba(250,250,250,.45);
  --text-inverse: #0A0C12;
  
  /* === Brand Colors - Refined Palette === */
  --brand-teal: #06B6D4;
  --brand-teal-light: #22D3EE;
  --brand-teal-dark: #0891B2;
  --brand-purple: #8B5CF6;
  --brand-purple-light: #A78BFA;
  --brand-purple-dark: #7C3AED;
  --brand-amber: #F59E0B;
  --brand-amber-light: #FBBF24;
  --brand-amber-dark: #D97706;
  
  /* === CTA colors - Maximum Conversion === */
  --cta-primary: #06B6D4;
  --cta-primary-hover: #22D3EE;
  --cta-primary-active: #0891B2;
  --cta-secondary: #8B5CF6;
  --cta-secondary-hover: #A78BFA;
  --cta-secondary-active: #7C3AED;
  --cta-tertiary: #F59E0B;
  --cta-tertiary-hover: #FBBF24;
  
  /* === Accent colors - Modern Palette === */
  --accent-pink: #F472B6;
  --accent-rose: #FB7185;
  --accent-emerald: #34D399;
  --accent-sky: #38BDF8;
  --accent-violet: #A78BFA;
  --accent-orange: #FB923C;
  
  /* === Semantic colors === */
  --color-success: #10B981;
  --color-error: #F87171;
  --color-warning: #FBBF24;
  --color-info: #60A5FA;
  
  /* === Advanced Gradient System === */
  --gradient-primary: linear-gradient(135deg, #06B6D4 0%, #0891B2 50%, #0E7490 100%);
  --gradient-secondary: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 50%, #6D28D9 100%);
  --gradient-tertiary: linear-gradient(135deg, #F59E0B 0%, #D97706 50%, #B45309 100%);
  --gradient-vivid: linear-gradient(135deg, #06B6D4 0%, #8B5CF6 33%, #F472B6 66%, #FB923C 100%);
  --gradient-hero: linear-gradient(180deg, rgba(9,11,16,0) 0%, rgba(9,11,16,.3) 30%, rgba(9,11,16,.7) 70%, rgba(9,11,16,.95) 100%);
  
  /* Mesh Background - Vercel-inspired */
  --gradient-mesh: 
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(6,182,212,.15), transparent),
    radial-gradient(ellipse 60% 50% at 0% 50%, rgba(139,92,246,.10), transparent),
    radial-gradient(ellipse 60% 50% at 100% 50%, rgba(245,158,11,.08), transparent),
    radial-gradient(ellipse 80% 80% at 50% 100%, rgba(244,114,182,.06), transparent);
  
  /* Typography - Variable Font Ready */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-heading: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
  --font-arabic-body: 'Almarai', 'Tajawal', 'IBM Plex Sans Arabic', sans-serif;
  --font-arabic-heading: 'Almarai', 'Tajawal', 'Cairo', sans-serif;
  
/* === ULTRA-MODERN BUTTON SYSTEM === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  min-height: 48px; /* WCAG 2.1 AAA touch target minimum */
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  text-decoration: none;
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  will-change: transform;
  isolation: isolate;
  /* Prevent accidental double-tap */
  touch-action: manipulation;
}

/* Primary Button - Cyan Gradient with Glow */
.btn.primary {
  background: var(--gradient-primary);
  color: white;
  box-shadow: var(--shadow-cta-cyan);
  transform: translateY(0) scale(1);
}

.btn.primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.25) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--transition-base);
  z-index: -1;
}

/* Touch-friendly active state (works on all devices) */
.btn.primary:active {
  transform: translateY(-1px) scale(0.98);
  transition: all 0.1s var(--ease-snappy);
}

/* Hover enhancements for pointer devices only */
@media (hover: hover) and (pointer: fine) {
  .btn.primary:hover {
    box-shadow: var(--shadow-cta-cyan-hover), var(--glow-cyan);
    transform: translateY(-3px) scale(1.02);
    transition: all 0.3s var(--ease-snappy);
  }

  .btn.primary:hover::before {
    opacity: 1;
  }
}

/* Secondary Button - Purple Gradient */
.btn.secondary,
.btn:not(.primary):not(.small):not(.ghost) {
  background: var(--gradient-secondary);
  color: white;
  box-shadow: var(--shadow-cta-purple);
}

.btn.secondary::before,
.btn:not(.primary):not(.small):not(.ghost)::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.25) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--transition-base);
  z-index: -1;
}

.btn.secondary:hover,
.btn:not(.primary):not(.small):not(.ghost):hover {
  box-shadow: var(--shadow-cta-purple-hover), var(--glow-purple);
  transform: translateY(-3px) scale(1.02);
}

.btn.secondary:hover::before,
.btn:not(.primary):not(.small):not(.ghost):hover::before {
  opacity: 1;
}

.btn.secondary:active,
.btn:not(.primary):not(.small):not(.ghost):active {
  transform: translateY(-1px) scale(0.99);
}

/* Ghost Button - Outlined with Fill Animation */
.btn.ghost {
  background: transparent;
  color: var(--cta-primary);
  border: 2px solid var(--cta-primary);
  box-shadow: inset 0 0 0 0 var(--cta-primary);
  transition: all var(--transition-slow);
}

.btn.ghost:hover {
  box-shadow: inset 0 0 0 200px var(--cta-primary), var(--glow-cyan);
  border-color: var(--cta-primary-hover);
  color: white;
  transform: translateY(-3px);
}

/* Small Buttons - Pill Style */
.btn.small {
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-full);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
}

.btn.small:hover {
  background: var(--bg-glass-strong);
  border-color: var(--cta-primary);
  color: var(--cta-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow), 0 0 20px rgba(6,182,212,.15);
}

.btn.small[aria-pressed="true"] {
  background: var(--gradient-primary);
  color: white;
  border-color: transparent;
  box-shadow: var(--shadow-cta-cyan);
  transform: translateY(0);
}

.btn.small[aria-pressed="true"]:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-cta-cyan-hover);
}
  --text-xs: clamp(0.75rem, 0.7vw + 0.6rem, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8vw + 0.7rem, 1rem);
  --text-base: clamp(1rem, 0.9vw + 0.8rem, 1.125rem);
  --text-lg: clamp(1.125rem, 1vw + 0.9rem, 1.25rem);
  --text-xl: clamp(1.25rem, 1.2vw + 1rem, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.5vw + 1.2rem, 1.875rem);
  --text-3xl: clamp(1.875rem, 2vw + 1.5rem, 2.25rem);
  --text-4xl: clamp(2.25rem, 2.5vw + 1.8rem, 3rem);
  --text-5xl: clamp(3rem, 3.5vw + 2.4rem, 4rem);
  --text-hero: clamp(3.5rem, 5vw + 2.5rem, 5.5rem);
  
  /* Spacing - consistent rhythm */
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  
  /* Radius - modern & soft */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  
  /* Shadows - Ultra-Modern with Colored Glows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
  --shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(0,0,0,.23);
  --shadow-md: 0 10px 20px rgba(0,0,0,.19), 0 6px 6px rgba(0,0,0,.23);
  --shadow-lg: 0 14px 28px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.22);
  --shadow-xl: 0 19px 38px rgba(0,0,0,.30), 0 15px 12px rgba(0,0,0,.22);
  --shadow-2xl: 0 24px 48px rgba(0,0,0,.35), 0 20px 16px rgba(0,0,0,.25);
  
  /* Brand-colored shadows for CTAs */
  --shadow-cta-cyan: 0 8px 24px rgba(6,182,212,.35), 0 4px 12px rgba(6,182,212,.20), inset 0 1px 0 rgba(255,255,255,.15);
  --shadow-cta-cyan-hover: 0 12px 32px rgba(6,182,212,.50), 0 6px 16px rgba(6,182,212,.30), inset 0 1px 0 rgba(255,255,255,.2);
  --shadow-cta-purple: 0 8px 24px rgba(139,92,246,.35), 0 4px 12px rgba(139,92,246,.20), inset 0 1px 0 rgba(255,255,255,.15);
  --shadow-cta-purple-hover: 0 12px 32px rgba(139,92,246,.50), 0 6px 16px rgba(139,92,246,.30), inset 0 1px 0 rgba(255,255,255,.2);
  --shadow-cta-amber: 0 8px 24px rgba(245,158,11,.35), 0 4px 12px rgba(245,158,11,.20), inset 0 1px 0 rgba(255,255,255,.15);
  
  /* Ambient glows */
  --glow-cyan: 0 0 40px rgba(6,182,212,.25), 0 0 80px rgba(6,182,212,.12);
  --glow-purple: 0 0 40px rgba(139,92,246,.25), 0 0 80px rgba(139,92,246,.12);
  --glow-pink: 0 0 40px rgba(244,114,182,.25), 0 0 80px rgba(244,114,182,.12);
  
  /* Transitions - Smooth & Natural */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --transition-spring: 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
  
  /* Z-index layers */
  --z-base: 1;
  --z-dropdown: 1000;
  --z-sticky: 1100;
  --z-modal: 1200;
  --z-toast: 1300;
  
  /* === PREMIUM EASING CURVES === */
  --ease-smooth: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-snappy: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* === ULTRA-SMOOTH 60FPS ANIMATIONS === */
@media (prefers-reduced-motion: no-preference) {
  * {
    scroll-behavior: smooth;
  }
}

/* === MODERN FOUNDATION - Ultra-smooth & Clean === */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  width: 100%;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  /* Prevent double-tap zoom on mobile */
  touch-action: manipulation;
  /* Support notch/safe areas */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--text-primary);
  background: var(--bg-primary);
  background-image: var(--gradient-mesh);
  background-attachment: fixed;
  min-height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;
  -webkit-overflow-scrolling: touch;
  font-weight: 400;
  letter-spacing: -0.012em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  font-feature-settings: "kern" 1, "liga" 1;
  font-kerning: normal;
  -webkit-overflow-scrolling: touch; /* Smooth momentum scrolling on iOS */
  position: relative;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Headings - Bold & Modern */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.035em;
  color: var(--text-primary);
  margin: 0 0 var(--space-md);
}

h1 {
  font-size: var(--text-hero);
  font-weight: 900;
  letter-spacing: -0.045em;
}

h2 {
  font-size: var(--text-4xl);
  letter-spacing: -0.035em;
}

h3 {
  font-size: var(--text-3xl);
  letter-spacing: -0.03em;
}

h4 {
  font-size: var(--text-2xl);
  letter-spacing: -0.025em;
}

h5 {
  font-size: var(--text-xl);
}

h6 {
  font-size: var(--text-lg);
}

/* Links & Images */
a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-base);
}

a:hover {
  color: var(--cta-primary);
}

img, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  border: none;
  background: none;
  font-family: inherit;
  cursor: pointer;
}

/* === RTL/ARABIC LANGUAGE OPTIMIZATIONS === */

html[dir="rtl"], .rtl {
  font-family: var(--font-arabic-body);
  direction: rtl;
  letter-spacing: 0;
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
.rtl h1, .rtl h2, .rtl h3, .rtl h4, .rtl h5, .rtl h6 {
  font-family: var(--font-arabic-heading);
  font-weight: 700;
  letter-spacing: 0;
}

html[dir="rtl"] .btn,
.rtl .btn {
  font-family: var(--font-arabic-heading);
  letter-spacing: 0;
  font-weight: 700;
}

html[dir="rtl"] body,
.rtl body {
  font-family: var(--font-arabic-body);
  letter-spacing: 0;
  line-height: 1.75; /* Better for Arabic script */
}

/* === HERO - Immersive & Cinematic === */
.hero{
  position: relative;
  width: 100%;
  min-height: 88vh;
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 0 auto var(--space-xl);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  visibility: visible !important;
  opacity: 1 !important;
}

.hero img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.7) saturate(1.1) contrast(1.05);
  transition: transform 0.3s ease-out;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.hero::before{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, 
    rgba(9,11,16,0.05) 0%, 
    rgba(9,11,16,0.25) 25%,
    rgba(9,11,16,0.65) 60%,
    rgba(9,11,16,0.92) 100%);
  z-index: 1;
  pointer-events: none; /* Don't block touch events */
}

.hero::after{
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse 900px 700px at 35% 45%, rgba(6,182,212,.14) 0%, transparent 65%),
    radial-gradient(ellipse 700px 600px at 65% 55%, rgba(139,92,246,.10) 0%, transparent 65%),
    radial-gradient(ellipse 500px 400px at 50% 80%, rgba(244,114,182,.06) 0%, transparent 60%);
  z-index: 1;
  animation: meshPulse 10s ease-in-out infinite alternate;
  will-change: opacity;
  pointer-events: none; /* Don't block touch events */
}

@keyframes meshPulse {
  0% { opacity: 0.6; }
  100% { opacity: 1; }
}

.heroInner{
  position: relative;
  z-index: 2;
  max-width: 920px;
  width: 100%;
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-xl);
  text-align: center;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: heroFadeIn 1s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
  visibility: visible !important;
  opacity: 1 !important;
}

@keyframes heroFadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.kicker{
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  padding: 12px 24px;
  margin: 0 auto var(--space-lg);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  background: var(--gradient-primary);
  color: white;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-cta-cyan), inset 0 1px 0 rgba(255,255,255,.2);
  animation: kickerSlide 1s cubic-bezier(0.2, 0.9, 0.3, 1) 0.2s backwards;
  will-change: transform;
}

@keyframes kickerSlide {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.headline{
  font-size: clamp(36px, 7vw, 64px) !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.045em !important;
  margin: 0 auto var(--space-lg) !important;
  background: linear-gradient(135deg, #FFFFFF 0%, #06B6D4 50%, #8B5CF6 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,.6)) drop-shadow(0 4px 20px rgba(6,182,212,.4)) !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 10 !important;
  text-align: center !important;
}

@keyframes headlineSlide {
  from {
    opacity: 0;
    transform: translateY(25px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.lead{
  font-size: 18px;
  line-height: 1.65;
  color: rgba(250,250,250,.88);
  margin: 0 auto var(--space-xl);
  max-width: 620px;
  font-weight: 400;
  letter-spacing: -0.012em;
  text-shadow: 0 2px 12px rgba(0,0,0,.4);
  text-align: center;
  animation: leadSlide 1s cubic-bezier(0.2, 0.9, 0.3, 1) 0.6s backwards;
  will-change: transform, opacity;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

@keyframes leadSlide {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.heroActions{
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 0 var(--space-2xl);
  animation: ctaSlide 1s cubic-bezier(0.2, 0.9, 0.3, 1) 0.8s backwards;
}

@keyframes ctaSlide {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.heroActions .btn{
  padding: 18px 36px;
  font-size: 16px;
  font-weight: 700;
  min-width: 180px;
}

.quickPoints{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: 600px;
  margin: 0 auto;
  animation: pointsSlide 1s cubic-bezier(0.2, 0.9, 0.3, 1) 1s backwards;
}

@keyframes pointsSlide {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.quickPoints li{
  padding-left: 32px;
  position: relative;
  font-size: 16px;
  color: rgba(255,255,255,.75);
  line-height: 1.6;
  text-align: center;
}

.quickPoints li::before{
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-primary);
  border-radius: 50%;
  color: white;
  font-weight: 900;
  font-size: 14px;
  box-shadow: var(--shadow-cta-cyan);
}

/* === HEADER - Premium Glassmorphism === */
header{
  position:sticky; top:0; z-index:900;
  backdrop-filter: blur(32px) saturate(200%);
  background: rgba(15,20,25,.85);
  border-bottom: 1px solid rgba(20,184,166,.15);
  box-shadow: 0 4px 32px rgba(0,0,0,.3), var(--glow-cyan);
  transition: all .4s cubic-bezier(0.4, 0, 0.2, 1);
}
header.hidden{
  transform: translateY(-100%);
}
header.scrolled{
  box-shadow: 0 8px 48px rgba(0,0,0,.5), var(--glow-cyan);
  background: rgba(15,20,25,.95);
  border-bottom-color: rgba(20,184,166,.3);
  backdrop-filter: blur(40px) saturate(250%);
}
.topbar{
  max-width: var(--max);
  margin: 0 auto;
  padding: 10px var(--space-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}
.brand{
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-width: 0;
  flex: 1;
}
.logo{
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px;
  object-fit: cover;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  border: 2px solid rgba(20,184,166,.4);
  box-shadow: 0 8px 24px rgba(20,184,166,.25), inset 0 1px 0 rgba(255,255,255,.08);
  transition: all .35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  flex-shrink: 0;
}
.logo:hover{
  transform: scale(1.08) rotate(-3deg);
  border-color: var(--cta-primary);
  box-shadow: var(--shadow-cta-cyan), inset 0 1px 0 rgba(255,255,255,.15);
}
.brandText{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.brandTitle{
  font-family: var(--font-heading);
  font-weight: 900;
  letter-spacing: -.8px;
  font-size: 18px;
  line-height: 1;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 8px rgba(20,184,166,.3));
}
.brandSub{
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: .3px;
}

.controls{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.pill{
  display:inline-flex; gap:4px; align-items:center;
  padding:4px;
  border-radius:999px;
  border:1px solid rgba(20,184,166,.25);
  background: rgba(20,184,166,.08);
  backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  box-shadow: 0 4px 16px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.1);
}

/* Hide controls on desktop - only show in mobile */
@media (min-width: 769px) {
  .controls {
    position: static !important;
    top: auto !important;
    left: auto !important;
    z-index: auto !important;
    flex-direction: row !important;
    width: auto !important;
  }
}

.btn{
  cursor: pointer;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  padding: 14px 28px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--cta-primary) 0%, var(--cta-primary-hover) 100%);
  background-size: 200% 100%;
  border: 2px solid rgba(255,107,53,.3);
  box-shadow: var(--shadow-cta);
  letter-spacing: 0.3px;
  transition: all .25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  color: #fff;
  font-family: var(--font-body);
  font-size: 15px;
}
.btn::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, var(--cta-primary-hover), #FFB347);
  opacity: 0;
  transition: opacity .3s ease;
  border-radius: var(--radius);
}
.btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(255,107,53,.45);
  background-position: 100% 0;
}
.btn:hover::before{
  opacity: 1;
}
.btn:active{
  transform: translateY(0);
}
/* Primary button inherits base .btn styles */

.btn.secondary{
  background: linear-gradient(135deg, var(--cta-secondary) 0%, var(--cta-secondary-hover) 100%);
  border: 2px solid rgba(39,174,96,.3);
  box-shadow: 0 8px 32px rgba(39,174,96,.25);
  color: #fff;
}
.btn.secondary::before{
  background: linear-gradient(135deg, rgba(240,168,80,.2), rgba(230,126,34,.15));
}
.btn.small{ 
  padding:8px 16px; 
  font-size:12px;
  font-weight: 700;
}
.btn.primary{
  border-color: rgba(255,179,71,.85);
  background: linear-gradient(135deg, rgba(255,179,71,.30), rgba(96,165,250,.06));
  box-shadow:0 18px 48px rgba(0,0,0,.36);
}

.pill .btn[aria-pressed="true"]{
  background: linear-gradient(135deg, rgba(255,179,71,.25), rgba(110,231,183,.2));
  border-color: rgba(255,179,71,.4);
  box-shadow: 0 2px 8px rgba(255,179,71,.2), inset 0 1px 2px rgba(255,255,255,.2);
  font-weight: 800;
}
.pill .btn[aria-pressed="true"]::before{
  opacity: 0;
}

/* Floating hero image */
.hero img{
  animation: heroFloat 20s ease-in-out infinite;
}
@keyframes heroFloat{
  0%, 100% { transform: scale(1.02) translateY(0); }
  50% { transform: scale(1.04) translateY(-5px); }
}

/* Social icons - Modern Design */
.social{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.social a{
  width:42px; height:42px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.15);
  background: linear-gradient(135deg, rgba(6,182,212,0.15), rgba(139,92,246,0.15));
  backdrop-filter: blur(8px);
  cursor:pointer;
  transition: all .3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.social a:hover{
  transform: translateY(-3px) scale(1.08);
  border-color: rgba(255,255,255,.35);
  background: linear-gradient(135deg, rgba(6,182,212,0.3), rgba(139,92,246,0.3));
  box-shadow: 0 8px 20px rgba(6,182,212,.3), 0 4px 12px rgba(139,92,246,.2);
}
.social svg{ width:20px; height:20px; fill: #ffffff; }

/* Hero */
.hero{
  margin-top: var(--space-lg);
  border-radius: var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--surface-border);
  box-shadow: var(--shadow-lg);
  position:relative;
  min-height: 680px;
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
}
.hero img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  filter: saturate(1.1) brightness(0.75) contrast(1.05);
}
html[dir="rtl"] .hero img, .rtl .hero img { transform: scaleX(-1); }
.hero::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(10,14,20,.88) 0%, rgba(10,14,20,.75) 50%, rgba(10,14,20,.90) 100%);
  pointer-events:none;
}
.heroInner{
  position:relative;
  z-index:2;
  padding: var(--space-xl) var(--space-lg);
  max-width: 720px;
  animation: heroFadeIn .8s cubic-bezier(0.2, 0.9, 0.2, 1) both;
}
@keyframes heroFadeIn{
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
.kicker{
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent-nature);
  margin-bottom: var(--space-sm);
  display: inline-block;
  padding: 8px 16px;
  background: rgba(82,183,136,.15);
  border-radius: 24px;
  border: 1px solid rgba(82,183,136,.3);
}
.headline{
  font-family: var(--font-heading);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: var(--space-md) 0;
  background: linear-gradient(135deg, #FFFFFF 0%, var(--accent-warm) 60%, var(--cta-primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
}
.lead{
  font-size: 18px;
  line-height: 1.75;
  color: var(--text-secondary);
  margin: var(--space-md) 0 var(--space-lg);
  max-width: 580px;
  font-weight: 400;
}
.heroActions{
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}

.quickPoints{
  list-style: none;
  padding: 0;
  margin: var(--space-lg) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.quickPoints li{
  padding-left: 32px;
  position: relative;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
  font-weight: 500;
}
.quickPoints li::before{
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--accent-trust);
  font-weight: 900;
  font-size: 16px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(149,225,211,.15);
  border-radius: 50%;
  border: 2px solid rgba(149,225,211,.3);
}

/* Blocks */
.block{
  margin-bottom: var(--space-xl);
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: visible; /* Allow scrolling past content */
  position: relative;
  touch-action: pan-y; /* Enable vertical scrolling on mobile */
  pointer-events: auto; /* Allow interactions */
}
.blockHead{
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--surface-border);
  background: rgba(255,255,255,.02);
}
.blockHead h2{
  margin: 0;
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 800;
  color: var(--text-primary);
}
.blockBody{
  padding: var(--space-lg);
}
.blockHead::after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:0;
  height:3px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(255,179,71,.9), rgba(110,231,183,.8), rgba(96,165,250,.95));
  opacity:.75;
}
.blockBody{ padding:18px; }

/* Gallery slider */
.galleryWrap{ position:relative; }
.galleryCarousel{
  display:flex;
  gap:12px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding: 2px 2px 10px;
  scroll-padding: 12px;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}
.galleryCarousel::-webkit-scrollbar{ 
  display: none; /* Chrome, Safari, Opera */
}
.slide{
  flex: 0 0 34%;
  scroll-snap-align:center;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(244,241,234,.12);
  background: rgba(0,0,0,.22);
  min-height: 220px;
  cursor: zoom-in;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.slide:hover{
  transform: translateY(-2px) scale(1.02);
  border-color: rgba(240,138,60,.35);
  box-shadow: 0 16px 34px rgba(0,0,0,.44);
}
.slide img{ width:100%; height:100%; object-fit:cover; }

.galArrow{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:44px; height:44px;
  border-radius:999px;
  border:1px solid rgba(244,241,234,.18);
  background: rgba(0,0,0,.42);
  color: rgba(244,241,234,.95);
  font-size:28px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:5;
  backdrop-filter: blur(8px);
}
.galArrow.left{ left:8px; }
.galArrow.right{ right:8px; }
.galArrow:hover{
  border-color: rgba(240,138,60,.55);
  background: rgba(240,138,60,.14);
  transform: translateY(-50%) scale(1.04);
}

.galleryFade{
  position:absolute;
  top:0; bottom:0;
  width:60px;
  pointer-events:none;
  z-index:4;
}
.galleryFade.left{
  left:0;
  background: linear-gradient(90deg, rgba(21,21,21,.95), rgba(21,21,21,0));
}
.galleryFade.right{
  right:0;
  background: linear-gradient(270deg, rgba(21,21,21,.95), rgba(21,21,21,0));
}

/* === TABS - Premium Segmented Control === */
.tabList{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:12px;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(20,184,166,.12);
  backdrop-filter: blur(20px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), var(--shadow-md);
}
.tab{
  appearance:none;
  border:none;
  background: transparent;
  color: var(--text-tertiary);
  padding:12px 24px;
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  font-family: var(--font-heading);
  letter-spacing: -0.01em;
}
.tab::before{
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-primary);
  opacity: 0;
  transition: opacity .3s ease;
  border-radius: var(--radius-md);
  z-index: -1;
}
.tab:hover{
  color: var(--text-primary);
  transform: translateY(-1px);
}
.tab:hover::before{
  opacity: 0.15;
}
.tab[aria-selected="true"]{
  color: white;
  background: var(--gradient-primary);
  box-shadow: var(--shadow-cta-cyan);
  transform: translateY(0);
}
.tab[aria-selected="true"]::after{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.15) 0%, transparent 100%);
  border-radius: var(--radius-md);
  pointer-events: none;
}

/* Panels */
.panel{ 
  display:none; 
  padding:18px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s ease, transform .3s ease;
}
.panel.active{ 
  display:block;
  animation: panelFadeIn .4s ease forwards;
}
@keyframes panelFadeIn{
  to { opacity: 1; transform: translateY(0); }
}
.panel h3{
  margin:0 0 10px;
  font-size:18px;
  font-weight:950;
  letter-spacing:-.2px;
}
.panel p{ margin:0; color: var(--muted); font-size:15px; }

/* Lists */
.list{ margin:12px 0 0; padding:0; list-style:none; display:grid; gap:10px; }
.li{
  border: 1px solid rgba(244,241,234,.12);
  background: rgba(0,0,0,.18);
  border-radius:16px;
  padding:12px;
}
.li .t{ font-weight:950; }
.li .d{ color: var(--muted); font-size:14px; margin-top:4px; }

/* === FORMS - Premium Floating Labels === */
form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:24px;
}

form > div{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

label{
  font-size: 13px;
  font-weight: 600;
  color: var(--text-tertiary);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  transition: color .2s ease;
}

input, select, textarea{
  appearance: none;
  width:100%;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  border: 2px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 15px;
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
}

input::placeholder,
select::placeholder,
textarea::placeholder{
  color: var(--text-muted);
  opacity: 1;
}

input:focus,
select:focus,
textarea:focus{
  border-color: var(--cta-primary);
  background: rgba(20,184,166,.06);
  box-shadow: 0 0 0 4px rgba(20,184,166,.12), 
              inset 0 1px 2px rgba(0,0,0,.1),
              var(--shadow-cta-cyan);
  transform: translateY(-1px);
}

input:focus + label,
select:focus + label,
textarea:focus + label{
  color: var(--cta-primary);
}

input:valid,
select:valid,
textarea:valid{
  border-color: rgba(16,185,129,.3);
}

input:invalid:not(:placeholder-shown),
select:invalid:not(:placeholder-shown),
textarea:invalid:not(:placeholder-shown){
  border-color: rgba(239,68,68,.4);
}

textarea{
  min-height: 140px;
  resize: vertical;
  line-height: 1.6;
}

label{ display:block; font-size:13px; color: rgba(244,241,234,.92); margin-bottom:6px; font-weight:900; }
.opt{ color: rgba(244,241,234,.60); font-weight:800; }

input, select, textarea{
  width:100%;
  padding:14px;
  border-radius:14px;
  border:2px solid rgba(244,241,234,.18);
  background: rgba(0,0,0,.35);
  color: var(--text-primary);
  outline:none;
  font-size:16px;
  font-family: var(--font-body);
  transition: all .25s cubic-bezier(0.4, 0, 0.2, 1);
}
input::placeholder, textarea::placeholder{ 
  color: rgba(244,241,234,.50); 
  opacity: 1;
}
textarea{ min-height:120px; resize:vertical; }

input:focus, select:focus, textarea:focus{
  border-color: var(--cta-primary);
  box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.15), 0 6px 24px rgba(6, 182, 212, 0.1), 0 2px 8px rgba(0,0,0,.2);
  background: rgba(0,0,0,.45);
  transform: translateY(-1px);
  transition: all 0.3s var(--ease-snappy);
}

/* Form validation states */
input:valid:not(:placeholder-shown),
select:valid,
textarea:valid:not(:placeholder-shown){
  border-color: rgba(39, 174, 96, .5);
}

input:invalid:not(:placeholder-shown):not(:focus),
select:invalid:not(:focus),
textarea:invalid:not(:placeholder-shown):not(:focus){
  border-color: rgba(244, 63, 94, .5);
}

input:required:invalid:not(:placeholder-shown):not(:focus),
textarea:required:invalid:not(:placeholder-shown):not(:focus){
  background: rgba(244, 63, 94, .08);
}

/* Mobile keyboard optimization */
input[type="email"],
input[type="tel"],
input[type="number"]{
  font-size: 16px; /* Prevents iOS zoom */
}

/* Premium Select Dropdown */
select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  color-scheme: dark;
  cursor:pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--cta-primary) 50%),
    linear-gradient(135deg, var(--cta-primary) 50%, transparent 50%);
  background-position:
    calc(100% - 24px) 50%,
    calc(100% - 16px) 50%;
  background-size:8px 8px, 8px 8px;
  background-repeat:no-repeat;
  padding-right:56px;
}
select option{
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}

/* Checkbox Group Styling */
.checkboxGroup {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.checkboxList {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.checkboxItem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.04), rgba(139, 92, 246, 0.04));
  border: 1.5px solid rgba(6, 182, 212, 0.15);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
}

.checkboxItem::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(139, 92, 246, 0.1));
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.checkboxItem:hover {
  border-color: rgba(6, 182, 212, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.15);
}

.checkboxItem:hover::before {
  opacity: 1;
}

.checkboxItem input[type="checkbox"] {
  width: 22px;
  height: 22px;
  min-width: 22px;
  margin: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background: rgba(0, 0, 0, 0.4);
  border: 2px solid rgba(6, 182, 212, 0.3);
  border-radius: 7px;
  position: relative;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  flex-shrink: 0;
}

.checkboxItem input[type="checkbox"]:hover {
  border-color: rgba(6, 182, 212, 0.6);
  transform: scale(1.05);
}

.checkboxItem input[type="checkbox"]:checked {
  background: linear-gradient(135deg, #06B6D4 0%, #0EA5E9 100%);
  border-color: #06B6D4;
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.25), inset 0 1px 3px rgba(0, 0, 0, 0.3);
  transform: scale(1.08);
}

.checkboxItem input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 3px;
  width: 6px;
  height: 11px;
  border: solid white;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

.checkboxItem span {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  flex: 1;
  line-height: 1.3;
}

.checkboxItem:has(input:checked) {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.15), rgba(139, 92, 246, 0.12));
  border-color: rgba(6, 182, 212, 0.5);
  box-shadow: 0 2px 8px rgba(6, 182, 212, 0.2);
}

.checkboxItem:has(input:checked)::before {
  opacity: 0.5;
}

.checkboxItem:has(input:checked) span {
  color: rgba(6, 182, 212, 1);
  font-weight: 600;
}

@media (max-width: 768px) {
  /* Make form single column on mobile */
  form {
    grid-template-columns: 1fr;
    gap: 24px;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  
  /* Improve input sizing on mobile */
  input, select, textarea {
    padding: 16px 18px;
    font-size: 16px;
    border-radius: 14px;
    border: 2px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.04);
    box-shadow: 0 2px 10px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.03);
    min-height: 52px;
    width: 100%;
    margin: 0;
  }
  
  input:focus, select:focus, textarea:focus {
    border-color: var(--cta-primary);
    background: rgba(255,255,255,.08);
    box-shadow: 0 0 0 4px rgba(230,126,34,.15), 
                0 6px 24px rgba(0,0,0,.12),
                inset 0 1px 0 rgba(255,255,255,.06);
    transform: translateY(-1px);
  }
  
  label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.4px;
    margin: 0 0 8px 0;
    padding: 0;
    display: block;
    line-height: 1.3;
  }
  
  .checkboxList {
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .checkboxItem {
    padding: 14px 16px;
    border-radius: 12px;
    border: 1.5px solid rgba(6,182,212,.15);
    background: rgba(6,182,212,.03);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
  }
  .checkboxItem:has(input:checked) {
    border-color: rgba(6,182,212,.4);
    background: rgba(6,182,212,.08);
    box-shadow: 0 4px 12px rgba(6,182,212,.15);
  }
  .checkboxItem span {
    font-size: 14px;
    line-height: 1.4;
    flex: 1;
    min-width: 0;
  }
}

select option{
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  padding: 14px;
  border-radius: var(--radius-sm);
}
select option:hover,
select option:checked{
  background: var(--gradient-primary);
}

.span2{ grid-column:1 / -1; }
.formActions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.contactActions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }

/* Multi-step Form Progress - Enhanced UX */
.formProgress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 40px auto 48px;
  padding: 0 20px;
  max-width: 100%;
  width: 100%;
}
.progressStep {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  position: relative;
}
.progressCircle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 3px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 18px;
  color: rgba(244, 241, 234, 0.45);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
  position: relative;
  z-index: 2;
}
.progressCircle::before{
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: var(--gradient-primary);
  opacity: 0;
  transition: opacity .4s ease;
  z-index: -1;
}
.progressStep.active .progressCircle {
  background: var(--gradient-primary);
  border-color: var(--cta-primary);
  color: #FFFFFF;
  box-shadow: var(--shadow-cta-cyan);
  transform: scale(1.1);
}
.progressStep.active .progressCircle::before{
  opacity: 0.4;
  animation: progressPulse 2.5s ease-in-out infinite;
}
@keyframes progressPulse{
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(1.25); opacity: 0; }
}
.progressStep.completed .progressCircle {
  background: var(--gradient-secondary);
  border-color: var(--cta-secondary);
  color: #FFFFFF;
  box-shadow: var(--shadow-cta-orange);
}
.progressStep.completed .progressCircle::after{
  content: '✓';
  position: absolute;
  font-size: 20px;
  font-weight: 900;
}
.progressLabel {
  font-size: 13px;
  font-weight: 700;
  color: rgba(244, 241, 234, 0.5);
  white-space: nowrap;
  transition: all 0.3s ease;
  text-align: center;
  letter-spacing: 0.3px;
}
.progressStep.active .progressLabel {
  color: var(--accent-warm);
  transform: scale(1.05);
}
.progressStep.completed .progressLabel {
  color: var(--accent-nature);
}

/* Progress connector lines */
.progressStep:not(:last-child)::after{
  content: '';
  position: absolute;
  top: 24px;
  left: calc(100% + 6px);
  width: 12px;
  height: 3px;
  background: rgba(255,255,255,.12);
  border-radius: 2px;
  transition: background .4s ease;
}
.progressStep.completed:not(:last-child)::after{
  background: linear-gradient(90deg, var(--accent-nature), rgba(82, 183, 136, 0.3));
}

@media (max-width: 640px){
  .formProgress{
    gap: 8px;
    margin: 0;
    padding: 20px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start;
    padding-inline-start: 8px;
  }
  .formProgress::-webkit-scrollbar {
    display: none;
  }
  .progressCircle{
    width: 42px;
    height: 42px;
    font-size: 16px;
  }
  .progressLabel{
    font-size: 11px;
  }
  .progressStep:not(:last-child)::after{
    width: 8px;
  }
  
  /* Improve panel padding on small screens */
  .panel.active {
    padding: 32px 24px;
    max-width: 100%;
    overflow-x: hidden;
    animation: panelSlideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  
  @keyframes panelSlideIn {
    from {
      opacity: 0;
      transform: translateY(24px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .panel h3 {
    font-size: 26px;
    margin: 0;
    padding: 0;
    font-weight: 800;
    line-height: 1.2;
  }
  
  .panel p {
    font-size: 15px;
    line-height: 1.65;
    color: rgba(255,255,255,.88);
    margin: 0;
    padding: 0;
  }
  
  html[dir="rtl"] .panel p {
    font-size: 16px;
    line-height: 1.75;
  }
  
  /* RTL form field improvements */
  html[dir="rtl"] label {
    text-align: right;
  }
  
  html[dir="rtl"] input,
  html[dir="rtl"] select,
  html[dir="rtl"] textarea {
    text-align: right;
  }
  
  html[dir="rtl"] .formStepActions {
    flex-direction: row-reverse;
  }
  
  html[dir="rtl"] .formStepActions .btnNextStep {
    margin-inline-start: 0;
    margin-inline-end: auto;
  }
  
  /* Better form field spacing */
  form > div {
    gap: 6px;
  }
  
  /* Ensure buttons are full width on very small screens */
  .formActions .btn,
  .contactActions .btn {
    width: 100%;
    justify-content: center;
  }
}

.progressStep.completed .progressLabel {
  color: var(--cta-secondary);
}
.progressLine {
  flex: 1;
  max-width: 80px;
  height: 2px;
  background: rgba(255, 255, 255, 0.15);
  position: relative;
  overflow: hidden;
}
.progressLine::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #FF6B35, #95E1D3);
  transition: width 0.4s ease;
}
.progressStep.completed + .progressLine::after {
  width: 100%;
}

/* Multi-step Form Steps */
.formStep {
  display: none;
  gap: 20px;
  grid-template-columns: 1fr;
  animation: fadeInUp 0.4s ease;
  width: 100%;
  margin: 0;
  padding: 0;
}
.formStep.active {
  display: grid;
}
.formStep > div {
  grid-column: span 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.formStep .span2 {
  grid-column: 1 / -1;
}
.formStepActions {
  grid-column: 1 / -1;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin: 16px 0 0;
  padding: 0;
  width: 100%;
  flex-wrap: nowrap;
}
.formStepActions .btnNextStep {
  margin-inline-start: auto;
}
.formStepActions .btn {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 14px 20px;
  font-size: 15px;
  white-space: nowrap;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.error{
  display:none;
  margin-top:10px;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(255,122,122,.35);
  background: rgba(255,122,122,.12);
  color: rgba(255,230,230,.98);
  font-weight:900;
}
.success{
  display:none;
  margin-top:10px;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(100,255,180,.22);
  background: rgba(100,255,180,.10);
  color: rgba(244,241,234,.98);
  font-weight:900;
}

/* Lightbox */
.lb{
  position:fixed; inset:0;
  background: rgba(0,0,0,.72);
  display:none;
  align-items:center; justify-content:center;
  z-index:200;
  padding:18px;
  backdrop-filter: blur(10px);
}
.lb.open{ display:flex; }
.lbCard{
  width: auto;
  max-width: min(1100px, 90vw);
  min-height: 300px;
  border-radius:20px;
  border:1px solid rgba(244,241,234,.14);
  background: rgba(20,20,20,.55);
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lbTop{ position:absolute; top:10px; right:10px; z-index:2; }
[dir="rtl"] .lbTop{ right:auto; left:10px; }
.lbBtn{
  width:42px; height:42px;
  border-radius:999px;
  border:1px solid rgba(244,241,234,.16);
  background: rgba(0,0,0,.35);
  color: rgba(244,241,234,.95);
  cursor:pointer;
}
.lbBtn:hover{ border-color: rgba(240,138,60,.45); background: rgba(240,138,60,.12); }
.lbImg{
  width:100%;
  max-height:78vh;
  min-height: 200px;
  object-fit:contain;
  display: block;
  margin: 0 auto;
  opacity: 1;
  position: relative;
  z-index: 1;
}

/* Footer - Professional Design */
footer{
  margin-top: 80px;
  background: linear-gradient(135deg, rgba(18, 18, 18, 0.95) 0%, rgba(12, 12, 12, 0.98) 100%);
  border-top: 1px solid rgba(6, 182, 212, 0.15);
  position: relative;
}
footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #06B6D4 50%, transparent 100%);
  opacity: 0.3;
}
.footerContainer {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 40px 30px;
}
.footerGrid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 50px;
  margin-bottom: 40px;
}

/* Brand Section */
.footerBrand {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.footerLogo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.footerLogoImg {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 1px solid rgba(6, 182, 212, 0.2);
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.15);
}
.footerTitle {
  font-size: 20px;
  font-weight: 700;
  color: #FAFAFA;
  margin: 0;
  background: linear-gradient(135deg, #FAFAFA 0%, #06B6D4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.footerTagline {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}
.footerDesc {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
  max-width: 320px;
}

/* Footer Sections */
.footerSection {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.footerHeading {
  font-size: 14px;
  font-weight: 700;
  color: #06B6D4;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
}
.footerLinks,
.footerContact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footerLinks li a,
.footerContact li a {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: all .3s ease;
  display: inline-block;
}
.footerLinks li a:hover,
.footerContact li a:hover {
  color: #06B6D4;
  transform: translateX(4px);
}
.footerContact li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.7);
}
.footerContact li svg {
  flex-shrink: 0;
  opacity: 0.7;
}

/* Social Media in Footer */
.footerSocial { 
  display: flex; 
  gap: 12px; 
  align-items: center;
  flex-wrap: wrap;
}
.footerSocial a{ 
  width: 42px; 
  height: 42px; 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(139, 92, 246, 0.1));
  border: 1px solid rgba(6, 182, 212, 0.2);
  transition: all .3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
}
.footerSocial a::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(139, 92, 246, 0.3));
  opacity: 0;
  transition: opacity .3s ease;
}
.footerSocial a:hover{
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 8px 24px rgba(6, 182, 212, 0.4);
  border-color: rgba(139, 92, 246, 0.5);
}
.footerSocial a:hover::before {
  opacity: 1;
}
.footerSocial svg{ 
  width: 20px; 
  height: 20px; 
  fill: #06B6D4;
  position: relative;
  z-index: 1;
  transition: all .3s ease;
}
.footerSocial a:hover svg {
  fill: #8B5CF6;
  transform: scale(1.15) rotate(5deg);
}

/* Footer Bottom */
.footerBottom {
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
}
.footerCopyright {
  text-align: center;
}
.footerCopyright p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}
.footerGradientLine {
  margin-top: 20px;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(6, 182, 212, 0.5) 50%, transparent 100%);
  opacity: 0.3;
}

/* Responsive Footer */
@media (max-width: 980px) {
  .footerGrid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}

@media (max-width: 640px) {
  .footerContainer {
    padding: 40px 20px 20px;
  }
  .footerGrid {
    grid-template-columns: 1fr;
    gap: 30px;
    text-align: center;
  }
  .footerBrand {
    text-align: center;
    align-items: center;
  }
  .footerLogo {
    justify-content: center;
  }
  .footerTitle,
  .footerTagline {
    text-align: center !important;
  }
  .footerDesc {
    text-align: center;
  }
  .footerSection {
    text-align: center;
    align-items: center;
  }
  .footerLinks,
  .footerContact {
    align-items: center;
  }
  .footerSocial {
    justify-content: center;
  }
  .footerLinks li a:hover,
  .footerContact li a:hover {
    transform: translateX(0) scale(1.05);
  }
  .footerSocial {
    justify-content: center;
  }
  
  /* Override RTL/LTR rules for mobile */
  html[dir="rtl"] .footerTitle,
  html[dir="rtl"] .footerTagline,
  html[dir="rtl"] .footerDesc,
  html[dir="ltr"] .footerTitle,
  html[dir="ltr"] .footerTagline,
  html[dir="ltr"] .footerDesc {
    text-align: center !important;
  }
}

/* Responsive */
@media (max-width: 980px){
  .slide{ flex-basis: 86%; }
}
@media (max-width: 900px){
  .headline{ font-size:34px; }
  form{ grid-template-columns:1fr; }
  .hero{ min-height: 54vh; }
}
@media (max-width: 640px){
  /* === PREMIUM MOBILE HEADER - HIGH-TECH DESIGN === */
  body {
    min-width: 320px;
    overflow-x: hidden;
  }
  
  .topbar{ 
    position: sticky;
    top: 0;
    padding: 20px 20px 16px;
    background: rgba(10,14,18,.96);
    backdrop-filter: blur(44px) saturate(210%);
    border-bottom: 1px solid rgba(20,184,166,.28);
    box-shadow: 0 5px 32px rgba(0,0,0,.3), 0 0 52px rgba(6,182,212,.15), inset 0 1px 0 rgba(255,255,255,.06);
    z-index: 250;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, background-color, box-shadow;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
  }
  
  .topbar.scrolled{
    padding: 10px 22px 9px;
    background: rgba(8,12,18,1);
    box-shadow: 0 5px 40px rgba(0,0,0,.5), 0 0 68px rgba(6,182,212,.2), inset 0 1px 0 rgba(255,255,255,.07);
    border-bottom-color: rgba(20,184,166,.45);
    gap: 10px;
  }
  
  /* Mobile controls - sleek minimal design in separate row */
  .controls{
    position: relative;
    top: auto;
    left: auto;
    z-index: auto;
    flex-direction: row;
    gap: 8px;
    width: 100%;
    max-width: 300px;
    flex-wrap: nowrap;
    justify-content: center;
  }
  
  .pill{
    padding: 4px;
    border-radius: 24px;
    gap: 4px;
    min-width: 0;
    width: auto;
    background: linear-gradient(135deg, rgba(6,182,212,.18), rgba(14,165,233,.12));
    border: 1.5px solid rgba(6,182,212,.4);
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 16px rgba(6,182,212,.22), inset 0 1px 0 rgba(255,255,255,.1);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
  }
  
  .pill::before{
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(6,182,212,.2), transparent);
    transition: left 0.6s ease;
  }
  
  .pill:hover::before{
    left: 100%;
  }
  
  .pill .btn.small{
    padding: 9px 16px;
    font-size: 11.5px;
    font-weight: 800;
    min-height: 34px;
    border-radius: 20px;
    background: transparent;
    border: none;
    box-shadow: none;
    color: rgba(255,255,255,0.68);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
  }
  
  .pill .btn.small::before{
    display: none;
  }
  
  .pill .btn.small[aria-pressed="true"]{
    background: linear-gradient(135deg, #06B6D4 0%, #0EA5E9 100%);
    color: #fff;
    box-shadow: 0 5px 18px rgba(6,182,212,0.45), 0 0 28px rgba(6,182,212,.35), inset 0 1px 0 rgba(255,255,255,.32);
    transform: translateY(-1.5px);
  }
  
  .pill .btn.small:active{
    transform: scale(0.95);
  }
  
  .pill .btn.small:hover{
    background: rgba(255,255,255,0.1);
    color: #fff;
    transform: scale(1.02);
  }
  
  .pill .btn.small[aria-pressed="true"]:hover{
    background: linear-gradient(135deg, #06B6D4 0%, #0EA5E9 100%);
  }
  
  /* RTL Header Adjustments */
  html[dir="rtl"] .topbar{
    flex-direction: row-reverse;
  }
  
  html[dir="rtl"] .controls{
    flex-direction: row-reverse;
  }
  
  /* Natural mobile scrolling */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    min-width: 0;
  }
  
  html,
  body {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    height: auto;
    min-height: 100vh;
    max-width: 100vw;
    position: relative;
  }
  
  /* Ensure main content is scrollable */
  .wrap {
    min-height: 100vh;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    overflow-y: auto;
  }
  
  /* Global text wrapping for mobile */
  p, span, div, h1, h2, h3, h4, h5, h6, label, button, a {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
  }
  
  /* Ensure all major sections allow scrolling */
  main,
  section,
  .block,
  .blockBody,
  .panel,
  footer,
  .footerContainer {
    -webkit-overflow-scrolling: touch;
    max-width: 100vw;
    overflow-x: hidden;
  }
  
  /* Improve touch scrolling on all containers */
  .panel,
  .modal,
  .realExperiencesWrap,
  .block,
  .blockBody {
    -webkit-overflow-scrolling: touch;
    min-width: 0;
  }
  
  /* Prevent flex children from overflowing */
  .heroInner,
  .blockHead,
  .expModalContent,
  .realExpCard,
  .slide {
    min-width: 0;
    max-width: 100%;
  }
  
  /* Horizontal carousels need specific touch-action */
  .galleryCarousel,
  .realExpWrap,
  .tabList {
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
  }
  
  /* Cards and slides should not block scrolling */
  .slide,
  .realExpCard,
  .tab {
    pointer-events: auto;
  }
  
  /* RTL Header Adjustments */
  html[dir="rtl"] .topbar{
    flex-direction: column;
    align-items: center;
  }
  
  html[dir="rtl"] .controls{
    flex-direction: row;
  }
  
  html[dir="rtl"] .brand{
    flex-direction: row-reverse;
  }
  
  /* LTR Header Adjustments */
  html[dir="ltr"] .topbar{
    flex-direction: column;
    align-items: center;
  }
  
  html[dir="ltr"] .controls{
    flex-direction: row;
  }
  
  html[dir="ltr"] .brand{
    flex-direction: row;
  }
  
  /* === MOBILE LOGO === */
  .logo{
    width: 52px;
    height: 52px;
    border-width: 2.5px;
    box-shadow: 0 6px 22px rgba(6,182,212,.45), inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 1px rgba(255,255,255,.08);
    border-radius: 14px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .brand{
    flex: 0 0 auto;
    min-width: 0;
    justify-content: center;
    width: 100%;
  }
  
  .brandTitle{
    font-size: 17px;
  }
  
  /* Mobile brand styling for both languages */
  html[dir="rtl"] .brandTitle,
  html[dir="ltr"] .brandTitle {
    font-size: 23px;
    font-weight: 900;
    text-align: center;
    letter-spacing: -0.6px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.4), 0 4px 16px rgba(6,182,212,0.2);
  }
  
  .brandSub{
    font-size: 10px;
    display: none; /* Hide tagline on mobile for cleaner header */
  }
  
  /* === CINEMATIC MOBILE HERO === */
  .hero{
    min-height: 100vh;
    max-height: none;
    margin-top: 0;
    border-radius: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    position: relative;
    -webkit-overflow-scrolling: touch;
    padding: 0;
  }
  
  .hero img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.68) contrast(1.12) saturate(1.18);
    transition: transform 0.3s ease-out;
    will-change: transform;
    object-position: center 35%;
    z-index: 0;
    pointer-events: none;
  }
  
  .hero::before{
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, 
      transparent 0%,
      rgba(15,20,25,.08) 8%,
      rgba(15,20,25,.25) 25%,
      rgba(15,20,25,.5) 50%,
      rgba(15,20,25,.75) 70%,
      rgba(15,20,25,.92) 88%,
      rgba(15,20,25,1) 100%);
    z-index: 1;
    pointer-events: none;
  }
  
  .hero::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 60%;
    background: linear-gradient(to bottom, 
      transparent 0%,
      rgba(15,20,25,.3) 20%,
      rgba(15,20,25,.7) 50%,
      rgba(15,20,25,.95) 80%,
      rgba(15,20,25,1) 100%);
    z-index: 1;
    pointer-events: none;
  }
  
  .heroInner{ 
    padding: calc(env(safe-area-inset-top) + 32px) 24px calc(env(safe-area-inset-bottom) + 56px);
    text-align: left;
    max-width: 100%;
    width: 100%;
    position: relative;
    z-index: 2;
    animation: heroMobileSlideUp 0.9s cubic-bezier(0.4, 0, 0.2, 1) both;
    pointer-events: auto;
    min-height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 20px;
  }
  
  /* Explicit English hero alignment for mobile */
  html[dir="ltr"] .heroInner {
    text-align: left;
  }
  
  html[dir="ltr"] .hero {
    text-align: left;
  }
  
  html[dir="ltr"] .lead {
    text-align: left;
    max-width: 92%;
  }
  
  @keyframes heroMobileSlideUp{
    from{
      opacity: 0;
      transform: translateY(30px);
    }
    to{
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .headline{ 
    font-size: clamp(36px, 9vw, 48px);
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin-bottom: 16px;
    font-weight: 900;
    text-shadow: 0 2px 12px rgba(0,0,0,0.5), 0 6px 24px rgba(0,0,0,0.3);
    background: linear-gradient(135deg, #FFFFFF 0%, #F4F1EA 50%, #06B6D4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: mobileFadeInUp 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both;
  }
  
  html[dir="rtl"] .headline {
    font-size: clamp(38px, 9vw, 50px);
    line-height: 1.25;
    letter-spacing: 0;
    text-shadow: 0 2px 16px rgba(0,0,0,0.6), 0 6px 28px rgba(0,0,0,0.4);
  }
  
  .lead{
    font-size: 17px;
    line-height: 1.65;
    margin-bottom: 30px;
    font-weight: 400;
    color: rgba(255,255,255,.96);
    max-width: 95%;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
    animation: mobileFadeInUp 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.4s both;
  }
  
  html[dir="rtl"] .lead {
    font-size: 18px;
    line-height: 1.7;
  }
  
  .kicker{
    font-size: 13.5px;
    padding: 11px 22px;
    margin-bottom: 16px;
    font-weight: 800;
    letter-spacing: 1.4px;
    background: linear-gradient(135deg, var(--cta-primary), var(--cta-primary-hover));
    border-radius: 26px;
    display: inline-block;
    box-shadow: 0 4px 16px rgba(6,182,212,0.4), 0 2px 6px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.2);
    animation: mobileFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
    text-transform: uppercase;
    border: 1px solid rgba(255,255,255,0.15);
  }
  
  html[dir="rtl"] .kicker {
    letter-spacing: 0;
  }
  
  @keyframes mobileFadeInUp{
    from{
      opacity: 0;
      transform: translateY(20px);
    }
    to{
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes mobileFadeIn{
    from{ opacity: 0; }
    to{ opacity: 1; }
  }
  
  .heroActions{ 
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 0;
    width: 100%;
    animation: mobileFadeInUp 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.5s both;
  }
  
  .heroActions .btn{
    width: 100%;
    justify-content: center;
    font-size: 16px;
    font-weight: 800;
    padding: 18px 32px;
    min-height: 56px;
    border-radius: 16px;
    letter-spacing: -0.01em;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(230,126,34,0.35), 0 2px 8px rgba(0,0,0,0.18);
    margin: 0;
  }
  
  .heroActions .btn:active{
    transform: scale(0.96);
    box-shadow: 0 3px 12px rgba(230,126,34,0.25), 0 1px 4px rgba(0,0,0,0.15);
  }
  
  html[dir="rtl"] .heroActions {
    align-items: center;
    justify-content: center;
  }
  
  html[dir="ltr"] .heroActions {
    align-items: stretch;
    flex-direction: column;
  }
  
  .quickPoints{
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  .quickPoints li{
    font-size: 14.5px;
    line-height: 1.6;
    padding-inline-start: 36px;
    color: rgba(255,255,255,0.92);
    min-height: 28px;
    display: flex;
    align-items: center;
    position: relative;
    padding-inline-end: 0;
  }
  
  .quickPoints li::before{
    width: 22px;
    height: 22px;
    font-size: 12px;
    box-shadow: 0 4px 10px rgba(6,182,212,0.45);
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  
  /* English quick points alignment on mobile */
  html[dir="ltr"] .quickPoints li {
    text-align: left;
  }
  
  html[dir="rtl"] .quickPoints li {
    text-align: right;
    font-size: 15.5px;
  }
  
  .tabList{
    padding: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start;
    background: rgba(20,20,20,.6);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    scroll-snap-type: x mandatory;
    position: relative;
    box-shadow: 0 4px 16px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.04);
    touch-action: pan-x;
    scroll-padding: 6px;
    backdrop-filter: blur(12px);
    gap: 6px;
  }
  
  .tabList::-webkit-scrollbar{
    display: none;
  }
  
  .tab{
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    min-height: 44px;
    min-width: 72px;
    border-radius: 12px;
    background: transparent;
    border: none;
    scroll-snap-align: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    letter-spacing: 0.3px;
    color: rgba(255,255,255,.65);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 140px;
  }
  
  .tab:active{
    transform: scale(0.96);
  }
  
  .tab[aria-selected="true"]{
    background: linear-gradient(135deg, #E67E22, #D35400);
    color: #fff;
    box-shadow: 0 4px 12px rgba(230,126,34,.4), 
                inset 0 1px 0 rgba(255,255,255,.2);
    transform: scale(1);
    font-weight: 700;
  }
  
  /* === PREMIUM SECTIONS - Glassmorphism === */
  .wrap{
    padding: 0;
    max-width: 100%;
    background: linear-gradient(180deg, 
      var(--bg-primary) 0%,
      var(--bg-secondary) 50%,
      var(--bg-primary) 100%);
  }
  
  .block{
    margin: 0 0 36px 0;
    border-radius: 0;
    border: none;
    border-top: 1px solid rgba(255,255,255,.08);
    background: transparent;
    box-shadow: none;
    position: relative;
    overflow: visible;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    padding-top: 8px;
  }
  
  .block::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
      transparent,
      rgba(230,126,34,.4) 50%,
      transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
  }
  
  .block:hover::before{
    opacity: 1;
  }
  
  .blockHead{
    padding: 40px 24px 28px;
    background: transparent;
    border-bottom: none;
  }
  
  .blockHead h2{
    font-size: 34px;
    font-weight: 900;
    letter-spacing: -1.2px;
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent-warm) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 10px;
    line-height: 1.15;
  }
  
  html[dir="rtl"] .blockHead h2 {
    letter-spacing: 0;
  }
  
  .blockBody{
    padding: 0 24px 40px;
  }
  
  /* === PREMIUM GALLERY - 3D Cards === */
  .galleryCarousel{
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0 0 28px 24px;
    gap: 28px;
    scroll-padding: 24px;
    touch-action: pan-x;
  }
  
  .slide{ 
    flex-basis: 94%;
    min-height: 320px;
    max-height: 450px;
    aspect-ratio: 4/3;
    scroll-snap-align: center;
    border-radius: 28px;
    box-shadow: 0 18px 52px rgba(0,0,0,.45), 0 6px 16px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.1);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    border: 1.5px solid rgba(255,255,255,.08);
    overflow: hidden;
    position: relative;
  }
  
  .slide:active{
    transform: scale(0.96);
  }
  
  .realExpWrap{
    gap: 24px;
    padding: 0 0 28px 24px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding: 24px;
    touch-action: pan-x;
  }
  
  .realExpCard{
    min-width: 300px;
    max-width: 360px;
    scroll-snap-align: center;
    border-radius: 30px;
    box-shadow: 0 18px 52px rgba(0,0,0,.4), 0 8px 18px rgba(0,0,0,.25), 0 0 0 1px rgba(6,182,212,.2);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1.5px solid rgba(255,255,255,.14);
    overflow: hidden;
    position: relative;
    background: linear-gradient(135deg, rgba(18,18,18,.78), rgba(12,12,12,.88));
    backdrop-filter: blur(26px);
    min-height: 280px;
    display: flex;
    flex-direction: column;
  }
  
  .realExpCard::before{
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(6,182,212,.12), rgba(230,126,34,.08));
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 1;
  }
  
  .realExpCard:active{
    transform: scale(0.95);
    box-shadow: 0 10px 28px rgba(0,0,0,.4), 0 0 0 1px rgba(6,182,212,.2);
  }
  
  .realExpCard:active::before{
    opacity: 1;
  }
  
  /* === PREMIUM FORMS - Floating Labels === */
  form{
    gap: 26px;
  }
  
  input,
  select,
  textarea{
    padding: 18px 20px;
    font-size: 16px;
    border-radius: 18px;
    border: 2px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.05);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.05);
    min-height: 52px;
    width: 100%;
  }
  
  input:focus,
  select:focus,
  textarea:focus{
    border-color: var(--cta-primary);
    background: rgba(255,255,255,.09);
    box-shadow: 0 0 0 5px rgba(230,126,34,.18), 
                0 10px 28px rgba(0,0,0,.15),
                inset 0 1px 0 rgba(255,255,255,.08);
    transform: translateY(-3px);
  }
  
  input:valid:not(:placeholder-shown),
  textarea:valid:not(:placeholder-shown){
    border-color: rgba(82,183,136,.45);
    background: rgba(82,183,136,.05);
  }
  
  label{
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 10px;
    color: var(--text-secondary);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display: block;
    line-height: 1.3;
  }
  
  /* === MOBILE UTILITIES === */
  .btn::after{ display: none; }
  
  /* Hide social in header on mobile */
  .social{ display: none; }
  
  /* Premium sticky bottom bar */
  .mobileCta{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 18px 26px calc(18px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, 
      rgba(10,14,13,.94), 
      rgba(10,14,13,.99));
    backdrop-filter: blur(44px) saturate(210%);
    border-top: 2px solid rgba(230,126,34,.35);
    box-shadow: 0 -8px 36px rgba(0,0,0,.45), 
                0 -3px 14px rgba(0,0,0,.25),
                inset 0 1px 0 rgba(255,255,255,.07);
    z-index: 100;
    display: flex;
    gap: 14px;
    animation: slideUpBottom 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
  }
  
  @keyframes slideUpBottom{
    from{
      opacity: 0;
      transform: translateY(100%);
    }
    to{
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .btn{
    padding: 18px 32px;
    min-height: 58px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 6px 18px rgba(230,126,34,.35), 0 2px 6px rgba(0,0,0,.15);
  }
  
  .btn:active{
    transform: translateY(1px) scale(0.98);
    box-shadow: 0 3px 10px rgba(230,126,34,.25), 0 1px 3px rgba(0,0,0,.12);
  }
  
  .mobileCta .btn{
    flex: 1;
    font-size: 17px;
    font-weight: 900;
    padding: 19px 26px;
    min-height: 60px;
    border-radius: 15px;
    box-shadow: 0 8px 28px rgba(230,126,34,.5),
                0 3px 10px rgba(0,0,0,.18),
                inset 0 1px 0 rgba(255,255,255,.18);
    position: relative;
    overflow: hidden;
  }
  
  .mobileCta .btn::after{
    content: '';
    position: absolute;
    inset: -50%;
    background: linear-gradient(135deg, 
      transparent,
      rgba(255,255,255,.15),
      transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
  }
  
  .mobileCta .btn:active::after{
    transform: translateX(100%);
  }
  
  /* Breathing room for fixed elements */
  main{
    padding-bottom: 120px;
  }
  
  footer{
    margin-bottom: 0;
    padding-bottom: calc(110px + env(safe-area-inset-bottom));
  }
}
.mobileCta{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: none;
  gap: 10px;
  z-index: 80;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid rgba(244,241,234,.14);
  background: rgba(20,20,20,.72);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 55px rgba(0,0,0,.55);
}
.mobileCta .btn{ flex: 1; justify-content: center; }

@media (max-width: 640px){
  .mobileCta{ display: flex; }
  .wrap{ padding-bottom: 110px; } /* so footer isn’t hidden behind the bar */
}
.nextSteps{
  margin: 14px 0 10px;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, 1fr);
}
.step{
  border:1px solid rgba(244,241,234,.12);
  background: rgba(0,0,0,.18);
  border-radius:16px;
  padding:12px;
  display:flex;
  gap:10px;
  align-items:center;
}
.stepN{
  width:34px; height:34px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:950;
  border:1px solid rgba(240,138,60,.55);
  background: rgba(240,138,60,.14);
}
.stepT{ font-weight:850; color: rgba(244,241,234,.90); font-size:14px; }

@media (max-width: 900px){
  .nextSteps{ grid-template-columns: 1fr; }
}

/* Polish for intermediate mobile sizes (414px - 480px) */
@media (max-width: 480px) {
  .heroInner {
    padding: calc(env(safe-area-inset-top) + 28px) 20px calc(env(safe-area-inset-bottom) + 48px);
    gap: 18px;
  }
  
  .headline {
    font-size: clamp(30px, 8vw, 42px);
    line-height: 1.12;
  }
  
  .lead {
    font-size: 15.5px;
    max-width: 96%;
  }
  
  .heroActions .btn {
    padding: 16px 28px;
    font-size: 15px;
    min-height: 52px;
  }
  
  .panel {
    padding: 28px 20px;
    gap: 20px;
  }
  
  .panel h3 {
    font-size: 24px;
  }
  
  .formProgress {
    padding: 16px 0;
  }
  
  .formStepActions .btn {
    padding: 12px 18px;
    font-size: 14px;
    min-height: 46px;
  }
}

/* Polish for small mobile screens (320px - 375px) */
@media (max-width: 375px) {
  .heroInner {
    padding: calc(env(safe-area-inset-top) + 24px) 18px calc(env(safe-area-inset-bottom) + 44px);
    gap: 16px;
  }
  
  .headline {
    font-size: clamp(28px, 7.5vw, 38px);
  }
  
  .lead {
    font-size: 14.5px;
  }
  
  .kicker {
    font-size: 12px;
    padding: 9px 18px;
  }
  
  .heroActions .btn {
    padding: 15px 24px;
    font-size: 15px;
    min-height: 50px;
  }
  
  .quickPoints li {
    font-size: 13.5px;
    padding-inline-start: 32px;
  }
  
  .quickPoints li::before {
    width: 20px;
    height: 20px;
    font-size: 11px;
  }
  
  .panel {
    padding: 24px 18px;
    gap: 18px;
  }
  
  .panel h3 {
    font-size: 22px;
  }
  
  .panel p {
    font-size: 14px;
  }
  
  .progressCircle {
    width: 38px;
    height: 38px;
    font-size: 15px;
  }
  
  .progressLabel {
    font-size: 10px;
  }
  
  input, select, textarea {
    padding: 14px 16px;
    font-size: 16px;
    min-height: 50px;
  }
  
  label {
    font-size: 12px;
  }
}

/* Extreme polish for 320px screens (iPhone SE 1st gen, small Androids) */
@media (max-width: 320px) {
  .heroInner {
    padding: calc(env(safe-area-inset-top) + 20px) 16px calc(env(safe-area-inset-bottom) + 40px);
    gap: 14px;
  }
  
  .headline {
    font-size: clamp(26px, 7vw, 34px);
  }
  
  .lead {
    font-size: 13.5px;
    max-width: 100%;
  }
  
  .kicker {
    font-size: 11px;
    padding: 8px 16px;
  }
  
  .heroActions {
    gap: 12px;
  }
  
  .heroActions .btn {
    padding: 14px 20px;
    font-size: 14px;
    min-height: 48px;
  }
  
  .quickPoints li {
    font-size: 13px;
    padding-inline-start: 30px;
  }
  
  .quickPoints li::before {
    width: 18px;
    height: 18px;
    font-size: 10px;
  }
  
  .panel {
    padding: 20px 16px;
    gap: 16px;
  }
  
  .panel h3 {
    font-size: 20px;
  }
  
  .panel p {
    font-size: 13px;
  }
  
  .formProgress {
    gap: 6px;
    padding: 14px 0;
  }
  
  .progressCircle {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }
  
  .progressLabel {
    font-size: 9px;
  }
  
  .progressStep:not(:last-child)::after {
    width: 6px;
  }
  
  form {
    gap: 20px;
  }
  
  input, select, textarea {
    padding: 13px 15px;
    font-size: 16px;
    min-height: 48px;
  }
  
  .formStepActions .btn {
    padding: 11px 16px;
    font-size: 14px;
    min-height: 44px;
  }
  
  .checkboxItem {
    padding: 12px 14px;
    min-height: 46px;
  }
  
  .checkboxItem span {
    font-size: 13px;
  }
}

/* Glass morphism effect on blocks */
.block{
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border:1px solid rgba(244,241,234,.13);
  box-shadow: 0 8px 32px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.05);
}

/* lighten blocks a touch */
.block{
  background: var(--panel);
  border:1px solid rgba(244,241,234,.13);
}
.blockHead{
  background: var(--panel2);
}

/* hero image more alive */
.hero img{
  filter: saturate(1.18) contrast(1.06) brightness(1.04);
}

/* buttons & tabs - more contrast + clickable */
.btn, .tab{
  border-color: rgba(244,241,234,.30);
}
.tab{
  background: rgba(0,0,0,.42);
  color: rgba(244,241,234,.98);
}
.tab:hover{
  border-color: rgba(240,138,60,.70);
  background: rgba(240,138,60,.18);
  cursor:pointer;
}
.btn:hover{ cursor:pointer; }

/* small muted helper text */
.muted{ color: var(--muted); }
.small{ font-size: 12.5px; }

/* ===== Real Experiences section ===== */
.realGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
  margin-top:12px;
}
.realCard{
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(244,241,234,.12);
  background: rgba(0,0,0,.18);
  cursor: zoom-in;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.realCard:hover{
  transform: translateY(-2px);
  border-color: rgba(240,138,60,.40);
  box-shadow: 0 16px 34px rgba(0,0,0,.44);
}
.realCard img{ width:100%; height:220px; object-fit:cover; display:block; }
.realMeta{ padding:12px; }
.realName{ font-weight:950; }
.realDesc{ color: rgba(244,241,234,.72); font-size:14px; margin-top:4px; }

.realVideo{
  margin-top:14px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(244,241,234,.12);
  background: rgba(0,0,0,.18);
}
.realVid{ width:100%; display:block; max-height: 420px; object-fit:cover; }

/* responsive */

/* ===== Slide effects & image zoom ===== */
.slide{
  flex: 0 0 34%;
  scroll-snap-align:center;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(244,241,234,.12);
  background: rgba(0,0,0,.22);
  min-height: 220px;
  cursor: zoom-in;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
  position: relative;
}
.slide img{
  width:100%; 
  height:100%; 
  object-fit:cover;
  transition: transform .4s ease;
}
.slide:hover img{
  transform: scale(1.15);
}

/* ===== Print-friendly stylesheet ===== */
@media print{
  header, footer, .mobileCta, .social{
    display: none !important;
  }
  body{
    background: white;
    color: black;
  }
  .panel{
    display: block !important;
    page-break-inside: avoid;
  }
}

/* ===== Accessibility: Skip to content link ===== */
.skipLink{
  position: absolute;
  top: -40px;
  left: 0;
  background: rgba(255,179,71,.95);
  color: #000;
  padding: 8px 16px;
  border-radius: 0 0 8px 0;
  font-weight: 900;
  font-size: 14px;
  z-index: 9999;
  text-decoration: none;
}
.skipLink:focus {
  top: 0;
  outline: 3px solid rgba(96,165,250,.85);
}

@keyframes skeletonLoad{
  0%{ background-position: 200% 0; }
  100%{ background-position: -200% 0; }
}
img[loading="lazy"]{
  transition: opacity .3s ease;
}
img[loading="lazy"].skeleton{
  opacity: 0.6;
}

@media (max-width: 640px){
  /* Mobile-specific styles */
}

/* Scroll-triggered animations */
.animate-on-scroll{
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .6s cubic-bezier(0.4, 0, 0.2, 1), transform .6s cubic-bezier(0.4, 0, 0.2, 1);
}
.animate-on-scroll.visible{
  opacity: 1;
  transform: translateY(0);
}
.animate-on-scroll.delay-1{ transition-delay: .1s; }
.animate-on-scroll.delay-2{ transition-delay: .2s; }
.animate-on-scroll.delay-3{ transition-delay: .3s; }

/* Performance optimization */
.realExpCard,
.btn,
.tab,
.slide{
  will-change: transform;
}
.realExpCard:not(:hover),
.btn:not(:hover),
.tab:not(:hover),
.slide:not(:hover){
  will-change: auto;
}

/* Enhanced tab ripple effect */
.tab{
  position: relative;
  overflow: visible;
}

/* ===== Loading skeleton effect ===== */
.skeleton{
  background: linear-gradient(90deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.12) 50%, rgba(255,255,255,.05) 100%);
  background-size: 200% 100%;
  animation: skeletonLoad 1.8s ease-in-out infinite;
}
@keyframes skeletonLoad{
  0%{ background-position: 200% 0; }
  100%{ background-position: -200% 0; }
}

/* ===== Enhanced micro-interactions ===== */
.btn:not(.small){
  position: relative;
  overflow: hidden;
}
.btn::before{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.15);
  transform: translate(-50%, -50%);
  transition: width .5s, height .5s;
  pointer-events: none;
}
.btn:active::before{
  width: 300px;
  height: 300px;
}

/* ===== Mobile touch target improvements ===== */
.btn,
.tab,
.social a,
.galArrow,
.realExpCard{
  min-height: 44px;
  min-width: 44px;
}

/* ===== Form input enhancements ===== */
input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea{
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease, transform .15s ease;
}
input:focus,
select:focus,
textarea:focus{
  background-color: rgba(0,0,0,.35);
  border-color: rgba(240,180,100,.9);
  box-shadow: 0 0 0 3px rgba(240,180,100,.16), inset 0 0 0 1px rgba(240,180,100,.3);
  transform: translateY(-1px);
}
input:invalid:not(:placeholder-shown),
textarea:invalid:not(:placeholder-shown){
  border-color: rgba(255,122,122,.55);
  box-shadow: inset 0 0 0 1px rgba(255,122,122,.2);
  animation: shake .3s ease;
}
@keyframes shake{
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* ===== Loading skeleton effect ===== */
.skeleton{
  background: linear-gradient(90deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.12) 50%, rgba(255,255,255,.05) 100%);
  background-size: 200% 100%;
  animation: skeletonLoad 1.8s ease-in-out infinite;
  pointer-events: none;
}
input:focus,
select:focus,
textarea:focus{
  background-color: rgba(0,0,0,.35);
  border-color: rgba(240,180,100,.9);
  box-shadow: 0 0 0 3px rgba(240,180,100,.16), inset 0 0 0 1px rgba(240,180,100,.3);
}
input:invalid:not(:placeholder-shown),
textarea:invalid:not(:placeholder-shown){
  border-color: rgba(255,122,122,.55);
  box-shadow: inset 0 0 0 1px rgba(255,122,122,.2);
}

/* ===== FAQ Section ===== */
.faqList{
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
.faqItem{
  border: 1px solid rgba(244,241,234,.12);
  background: rgba(0,0,0,.18);
  border-radius: 14px;
  overflow: hidden;
  transition: all .2s ease;
}
.faqItem:hover{
  border-color: rgba(240,138,60,.25);
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
}
.faqItem summary{
  padding: 14px 16px;
  cursor: pointer;
  font-weight: 850;
  color: rgba(244,241,234,.92);
  user-select: none;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: color .2s ease;
}
.faqItem summary:hover{
  color: rgba(255,179,71,.9);
}
.faqItem summary::marker{
  color: rgba(255,179,71,.75);
  font-size: 18px;
}
.faqItem[open] summary{
  color: rgba(255,179,71,.9);
  background: rgba(255,179,71,.08);
  border-bottom: 1px solid rgba(255,179,71,.15);
}
.faqItem p{
  padding: 0 16px 14px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
  animation: slideDown .2s ease;
}
@keyframes slideDown{
  from{
    opacity: 0;
    transform: translateY(-8px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== Mobile Sticky CTA - Conversion Optimized ===== */
.mobileStickyCTA{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(10,14,13,.90), rgba(10,14,13,.98));
  border-top: 1px solid rgba(230,126,34,.35);
  backdrop-filter: blur(40px) saturate(200%);
  box-shadow: 0 -8px 48px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.08);
  display: none;
  animation: slideUpBounce .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
@keyframes slideUpBounce{
  0% { transform: translateY(120%); opacity: 0; }
  70% { transform: translateY(-5px); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}
.mobileStickyCTA .btn{
  width: 100%;
  min-height: 54px;
  font-size: 17px;
  font-weight: 800;
  justify-content: center;
  box-shadow: 0 8px 40px rgba(230,126,34,.6);
  border: 2px solid rgba(230,126,34,.7);
  letter-spacing: 0.5px;
}
@media (max-width: 768px){
  .mobileStickyCTA{
    display: block;
  }
}

/* ===== Arabic-Specific Enhancements ===== */
html[dir="rtl"] {
  font-feature-settings: "liga" 1, "calt" 1;
}

/* Arabic typography improvements */
html[dir="rtl"] body{
  font-family: var(--font-arabic-body);
  letter-spacing: normal;
  word-spacing: 0.05em;
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6{
  font-family: var(--font-arabic-heading);
  font-weight: 800;
  letter-spacing: normal;
}

html[dir="rtl"] .headline{
  font-family: var(--font-arabic-heading);
  font-weight: 900;
  letter-spacing: normal;
  line-height: 1.3;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

html[dir="rtl"] .lead{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

html[dir="rtl"] .btn{
  font-family: var(--font-arabic-body);
  font-weight: 700;
  letter-spacing: normal;
}

html[dir="rtl"] .kicker{
  font-family: var(--font-arabic-body);
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* RTL layout adjustments */
html[dir="rtl"] .quickPoints {
  margin: 0 auto; /* Center the quick points */
  max-width: 600px;
}

html[dir="rtl"] .quickPoints li{
  padding-left: 0;
  padding-right: 32px; /* Icon on right */
  text-align: right;
  direction: rtl;
}

html[dir="rtl"] .quickPoints li::before{
  left: auto;
  right: 0; /* Checkmark on RIGHT side */
}

/* ===== RTL DESIGN PATTERNS (Based on Top Arabic Websites) ===== */

/* HERO SECTION - RTL */
html[dir="rtl"] .hero {
  text-align: center;
}

html[dir="rtl"] .heroInner {
  text-align: center;
  align-items: center;
}

html[dir="rtl"] .kicker {
  letter-spacing: 0;
}

html[dir="rtl"] .headline {
  letter-spacing: 0 !important;
}

html[dir="rtl"] .lead {
  text-align: center;
  letter-spacing: 0;
}

html[dir="rtl"] .heroCTA {
  justify-content: center;
  flex-direction: row-reverse;
}

html[dir="rtl"] .heroActions {
  justify-content: center;
  align-items: center;
}

html[dir="rtl"] .btn {
  flex-direction: row-reverse;
}

html[dir="rtl"] .btn svg,
html[dir="rtl"] .btn .icon {
  margin-left: 8px;
  margin-right: 0;
}

/* Quick Points - RTL alignment */
html[dir="rtl"] .quickPoints {
  text-align: right;
}

/* FOOTER - RTL (Brand on Right, Social on Left) */
html[dir="rtl"] footer {
  text-align: right;
}

html[dir="rtl"] .footerGrid {
  direction: ltr; /* Keep LTR so grid columns stay in place */
}

html[dir="rtl"] .footerBrand {
  order: 2; /* Move to right column */
  text-align: right;
  align-items: flex-end;
}

html[dir="rtl"] .footerSection {
  order: 1; /* Move to left column */
}

html[dir="rtl"] .footerLogo {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

html[dir="rtl"] .footerTitle,
html[dir="rtl"] .footerHeading,
html[dir="rtl"] .footerDesc,
html[dir="rtl"] .footerTagline,
html[dir="rtl"] .footerCopyright {
  font-family: var(--font-arabic-body);
  text-align: right;
}

/* Make Madaar brand text bigger and bolder in Arabic */
html[dir="rtl"] .brandTitle {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 0;
  filter: drop-shadow(0 2px 12px rgba(6,182,212,.6)) drop-shadow(0 0 20px rgba(6,182,212,.4));
  background: linear-gradient(135deg, #FFFFFF 0%, #06B6D4 40%, #0EA5E9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
}

/* Make Madaar brand text bigger and bolder in English - same as Arabic */
html[dir="ltr"] .brandTitle {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.8px;
  filter: drop-shadow(0 2px 12px rgba(6,182,212,.6)) drop-shadow(0 0 20px rgba(6,182,212,.4));
  background: linear-gradient(135deg, #FFFFFF 0%, #06B6D4 40%, #0EA5E9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
}

html[dir="rtl"] .footerTitle {
  font-size: 26px;
  font-weight: 800;
}

html[dir="rtl"] .footerSection {
  order: 1; /* Move to left column */
  text-align: left; /* Align to left since it's in left column */
}

html[dir="rtl"] .footerHeading {
  text-align: left;
  padding-left: 168px; /* Double the space again */
}

html[dir="rtl"] .footerSocial {
  justify-content: flex-start; /* Align icons to left */
  flex-direction: row; /* Keep normal order */
}

html[dir="rtl"] .footerLinks,
html[dir="rtl"] .footerContact {
  align-items: flex-end;
}

html[dir="rtl"] .footerLinks li a:hover,
html[dir="rtl"] .footerContact li a:hover {
  transform: translateX(-4px);
}

/* FAQ/ACCORDION - RTL (Plus icon on left) */
html[dir="rtl"] .faqItem {
  text-align: right;
}

html[dir="rtl"] .faqItem summary {
  text-align: right;
  padding-right: 16px;
  padding-left: 40px;
}

html[dir="rtl"] .faqItem p {
  text-align: right;
  padding-right: 16px;
  padding-left: 40px;
}

/* TABS - RTL */
html[dir="rtl"] .tabList {
  flex-direction: row;
}

html[dir="rtl"] .tab {
  letter-spacing: 0;
}

/* FORMS - RTL */
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
  text-align: right;
  direction: rtl;
}

html[dir="rtl"] ::placeholder {
  text-align: right;
}

html[dir="rtl"] label {
  text-align: right;
}

html[dir="rtl"] .formStepActions {
  flex-direction: row-reverse;
}

/* GENERAL RTL - Lists, Navigation */
html[dir="rtl"] ul,
html[dir="rtl"] ol {
  padding-right: 20px;
  padding-left: 0;
}

html[dir="rtl"] .contactActions {
  justify-content: flex-end;
}

html[dir="rtl"] .galleryFade.left{
  left: auto;
  right: 0;
  background: linear-gradient(270deg, rgba(21,21,21,.95), rgba(21,21,21,0));
}

html[dir="rtl"] .galleryFade.right{
  right: auto;
  left: 0;
  background: linear-gradient(90deg, rgba(21,21,21,.95), rgba(21,21,21,0));
}

/* ===== Accessibility Enhancements ===== */
/* Focus visible for keyboard navigation */
.btn:focus-visible,
.tab:focus-visible,
button:focus-visible,
a:focus-visible{
  outline: 2px solid var(--cta-primary);
  outline-offset: 4px;
  border-radius: var(--radius);
  box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.2);
  transition: all 0.2s var(--ease-snappy);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high){
  .btn{
    border-width: 3px;
  }
  .realExpCard{
    border-width: 2px;
  }
}

/* ===== Mobile Optimizations ===== */
@media (max-width: 768px){
  /* Adjust header for fixed mobile controls */
  .topbar{
    padding-top: 12px;
  }
  
  .brand{
    margin-left: auto;
    margin-right: auto;
  }
  
  /* Ensure touch targets are 48x48px minimum */
  .btn,
  .tab,
  .social a,
  .galArrow{
    min-height: 48px;
    min-width: 48px;
  }
  
  /* Larger hero headline on mobile */
  .headline{
    font-size: clamp(32px, 8vw, 44px);
    line-height: 1.2;
  }
  
  /* Optimize spacing for smaller screens */
  .heroInner{
    padding: var(--space-lg) var(--space-md);
  }
  
  /* Stack hero actions vertically */
  .heroActions{
    flex-direction: column;
    width: 100%;
  }
  
  .heroActions .btn{
    width: 100%;
  }
  
  /* Improve form mobile UX */
  form{
    grid-template-columns: 1fr;
  }
  
  input,
  select,
  textarea{
    font-size: 16px; /* Prevents zoom on iOS */
    padding: 14px;
  }
  
  /* Better tab spacing on mobile */
  .tabList{
    gap: 8px;
    padding: 10px;
  }
  
  .tab{
    padding: 10px 16px;
    font-size: 14px;
  }
  
  /* Optimize gallery for mobile */
  .realExpWrap{
    gap: 12px;
  }
  
  .realExpCard{
    min-width: 280px;
  }
  
  /* Better mobile header */
  .topbar{
    padding: var(--space-sm) var(--space-md);
  }
  
  .logo{
    width: 48px;
    height: 48px;
  }
  
  .brandTitle{
    font-size: 18px;
  }
  
  .brandSub{
    font-size: 11px;
  }
}

/* ===== Small Mobile Devices - Premium ===== */
@media (max-width: 480px){
  /* Prevent any horizontal overflow on smallest devices */
  body,
  html,
  .wrap,
  main,
  section,
  .block {
    max-width: 100vw;
    overflow-x: hidden;
  }
  
  .headline{
    font-size: clamp(28px, 8vw, 38px);
    letter-spacing: -0.8px;
    line-height: 1.15;
    max-width: 100%;
  }
  
  .lead{
    font-size: 15px;
    line-height: 1.55;
    max-width: 100%;
  }
  
  .quickPoints li{
    font-size: 13px;
    padding-left: 36px;
    min-height: 30px;
  }
  
  html[dir="rtl"] .quickPoints li{
    padding-right: 36px;
    padding-left: 0;
  }
  
  .realExpCard{
    min-width: 280px;
    max-width: calc(100vw - 40px);
  }
  
  .heroInner{
    padding: 28px 18px 36px;
  }
  
  .heroActions .btn{
    font-size: 15px;
    padding: 16px 24px;
    min-height: 52px;
    width: 100%;
  }
  
  .blockHead{
    padding: 32px 18px 24px;
  }
  
  .blockHead h2{
    font-size: 26px;
    line-height: 1.2;
  }
  
  .blockBody{
    padding: 0 18px 32px;
  }
  
  .tab{
    font-size: 13px;
    padding: 10px 14px;
    min-width: 68px;
  }
  
  /* Tighter controls on very small screens */
  .controls{
    gap: 6px;
    max-width: 280px;
  }
  
  .pill .btn.small{
    padding: 7px 12px;
    font-size: 10.5px;
    min-height: 32px;
  }
  
  /* Ensure slides don't overflow */
  .slide{
    flex-basis: 92%;
    min-width: 280px;
    max-width: calc(100vw - 40px);
  }
  
  /* Mobile CTA adjustments */
  .mobileCta{
    padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
  }
  
  .mobileCta .btn{
    font-size: 15px;
    min-height: 54px;
    padding: 16px 20px;
  }
}

/* ===== Mobile Landscape Optimization ===== */
@media (max-width: 900px) and (orientation: landscape){
  .hero{
    min-height: 85vh;
  }
  
  .heroInner{
    padding: 20px;
  }
  
  .headline{
    font-size: 32px;
    margin-bottom: 12px;
  }
  
  .lead{
    font-size: 14px;
    margin-bottom: 16px;
  }
  
  .quickPoints{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  
  .heroActions{
    flex-direction: row;
    gap: 12px;
  }
  
  .heroActions .btn{
    width: auto;
    flex: 1;
    padding: 12px 20px;
    min-height: 44px;
  }
}

/* ===== Print Styles ===== */
@media print{
  header,
  .mobileStickyCTA,
  .social,
  .controls{
    display: none !important;
  }
  
  .hero,
  .realExpCard,
  .faqItem{
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* ========================================
   MOBILE UX ENHANCEMENTS - TOP TIER 2026
   Based on Instagram, Airbnb, Linear, Telegram, Notion
======================================== */

/* === PREMIUM MOBILE DESIGN SYSTEM === */
@media (max-width: 768px) {
  /* Updated CSS Variables for Mobile */
  :root {
    /* Border Radius - 2026 Trends */
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    
    /* Shadows - Layered (Apple/Linear style) */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.06), 0 4px 8px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.08), 0 12px 24px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.12), 0 20px 40px rgba(0, 0, 0, 0.16);
    --shadow-primary: 0 8px 20px rgba(6, 182, 212, 0.25);
    
    /* Spacing - 8pt Grid */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    
    /* Transitions */
    --duration-fast: 150ms;
    --duration-medium: 250ms;
    --duration-slow: 350ms;
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  }
}

/* === 1. PREMIUM BUTTONS (Instagram/Telegram Style) === */
@media (max-width: 768px) {
  .btn:not(.small) {
    padding: 14px 24px;
    border-radius: var(--radius-lg);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    min-height: 52px;
    transition: all var(--duration-medium) var(--ease-standard);
    box-shadow: var(--shadow-md);
  }
  
  .btn.primary {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08),
                0 8px 16px rgba(6, 182, 212, 0.2);
  }
  
  .btn:active {
    transform: scale(0.98);
    transition-duration: var(--duration-fast);
  }
  
  .btn.secondary {
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
  }
  
  .btn.secondary:active {
    background: rgba(255, 255, 255, 0.08);
  }
  
  .btn.small {
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    min-height: 36px;
  }
}

/* === 2. PREMIUM CARDS (Airbnb/Notion Style) === */
@media (max-width: 768px) {
  .realExpCard {
    border-radius: var(--radius-xl);
    padding: 0;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04),
                0 4px 8px rgba(0, 0, 0, 0.06),
                0 12px 20px rgba(0, 0, 0, 0.08);
    transition: all var(--duration-slow) var(--ease-spring);
    overflow: hidden;
  }
  
  .realExpCard:active {
    transform: scale(0.97);
    transition-duration: var(--duration-fast);
  }
  
  .realExpImageWrap {
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    overflow: hidden;
  }
  
  .realExpInfo {
    padding: 14px;
    gap: 10px;
    background: linear-gradient(
      135deg,
      rgba(18, 18, 18, 0.95) 0%,
      rgba(24, 24, 24, 0.98) 100%
    );
  }
  
  .realExpName {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
  }
  
  .realExpPrice {
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    background: rgba(6, 182, 212, 0.12);
    border: 1px solid rgba(6, 182, 212, 0.2);
    color: #06B6D4;
  }
}

/* === 3. MODERN INPUT FIELDS (Linear/Telegram Style) === */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="url"],
  input[type="search"],
  select,
  textarea {
    padding: 12px 16px;
    border-radius: var(--radius-md);
    font-size: 15px !important;
    min-height: 52px;
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    transition: all var(--duration-medium) var(--ease-standard);
  }
  
  input:focus,
  select:focus,
  textarea:focus {
    border-color: rgba(6, 182, 212, 0.5);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.1);
    outline: none;
    transform: translateY(-1px);
  }
  
  textarea {
    min-height: 120px;
    resize: vertical;
  }
  
  label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.8);
  }
}

/* === 4. PREMIUM TABS (Instagram/Spotify Style) === */
@media (max-width: 768px) {
  .tabList {
    display: flex;
    gap: 6px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  
  .tabList::-webkit-scrollbar {
    display: none;
  }
  
  .tab {
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    min-height: 40px;
    white-space: nowrap;
    transition: all var(--duration-medium) var(--ease-standard);
    color: rgba(255, 255, 255, 0.6);
    background: transparent;
  }
  
  .tab[aria-selected="true"],
  .tab.active {
    background: rgba(6, 182, 212, 0.15);
    color: #06B6D4;
    box-shadow: 0 2px 8px rgba(6, 182, 212, 0.2);
  }
}

/* === 5. MODAL/SHEET (WhatsApp/iOS Style) === */
@media (max-width: 768px) {
  .modal {
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    background: rgba(18, 18, 18, 0.98);
    backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12),
                0 -2px 6px rgba(0, 0, 0, 0.08);
    max-width: 100%;
    max-height: 90vh;
  }
  
  .modalContent {
    padding: 20px;
  }
  
  /* Handle bar for bottom sheets */
  .modal::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.3);
  }
  
  .modalClose {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.08);
    transition: all var(--duration-fast) var(--ease-standard);
  }
  
  .modalClose:active {
    transform: scale(0.9);
    background: rgba(255, 255, 255, 0.12);
  }
}

/* === 6. HERO SECTION (Apple/Linear Style) === */
@media (max-width: 768px) {
  .hero {
    min-height: 75vh;
    border-radius: 0;
  }
  
  .heroInner {
    padding: 24px 20px 40px;
  }
  
  .kicker {
    padding: 8px 16px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(6, 182, 212, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
  
  .headline {
    font-size: clamp(32px, 8vw, 42px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
    background: linear-gradient(135deg, #FFFFFF 0%, #06B6D4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  
  .lead {
    font-size: 15px;
    line-height: 1.6;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.85);
    max-width: 95%;
  }
  
  .quickPoints li {
    font-size: 14px;
    line-height: 1.5;
    padding-left: 28px;
  }
  
  .quickPoints li::before {
    width: 20px;
    height: 20px;
    font-size: 12px;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(6, 182, 212, 0.3);
  }
}

/* === 7. FOOTER (Material Design 3) === */
@media (max-width: 768px) {
  footer {
    padding: 40px 20px calc(40px + env(safe-area-inset-bottom));
    background: linear-gradient(
      135deg,
      rgba(15, 15, 15, 0.95) 0%,
      rgba(20, 20, 20, 0.98) 100%
    );
  }
  
  .footerBrand {
    gap: 16px;
    text-align: center;
  }
  
  .footerLogoImg {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(6, 182, 212, 0.2);
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.15);
  }
  
  .footerTitle {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
  }
  
  .footerDesc {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
  }
  
  .footerSocial a {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all var(--duration-medium) var(--ease-spring);
  }
  
  .footerSocial a:active {
    transform: scale(0.95);
    background: rgba(6, 182, 212, 0.1);
    border-color: rgba(6, 182, 212, 0.3);
  }
}

/* === 8. FAQ ACCORDION (Notion Style) === */
@media (max-width: 768px) {
  .faqItem {
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    margin-bottom: 12px;
    overflow: hidden;
    transition: all var(--duration-medium) var(--ease-standard);
  }
  
  .faqItem summary {
    padding: 16px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    min-height: 60px;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-standard);
  }
  
  .faqItem summary:active {
    background: rgba(255, 255, 255, 0.05);
  }
  
  .faqItem[open] {
    border-color: rgba(6, 182, 212, 0.2);
    box-shadow: var(--shadow-md);
  }
  
  .faqItem[open] summary {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(6, 182, 212, 0.05);
  }
  
  .faqItem p {
    padding: 16px;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
  }
}

/* === 9. MOBILE STICKY CTA (Airbnb/Instagram Style) === */
@media (max-width: 768px) {
  .mobileCta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 16px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2),
                0 -1px 3px rgba(0, 0, 0, 0.12);
    z-index: 999;
  }
  
  .mobileCta .btn {
    border-radius: var(--radius-lg);
    font-size: 15px;
    font-weight: 700;
    min-height: 52px;
    box-shadow: 0 2px 8px rgba(6, 182, 212, 0.25);
  }
}

/* === 10. FORM PROGRESS (Linear Style) === */
@media (max-width: 768px) {
  .formProgress {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
  }
  
  .progressStep {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    transition: all var(--duration-medium) var(--ease-standard);
  }
  
  .progressStep.active,
  .progressStep.complete {
    background: linear-gradient(90deg, #06B6D4 0%, #8B5CF6 100%);
    box-shadow: 0 2px 8px rgba(6, 182, 212, 0.3);
  }
}

/* === 11. BADGES & PILLS (Linear/Notion Style) === */
@media (max-width: 768px) {
  .badge,
  .pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-xs);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    background: rgba(6, 182, 212, 0.15);
    color: #06B6D4;
    border: 1px solid rgba(6, 182, 212, 0.2);
  }
}

/* === 12. SAFE AREA & SPACING === */
@media (max-width: 768px) {
  /* iOS Safe Area Support */
  header {
    padding-top: max(12px, env(safe-area-inset-top));
  }
  
  main {
    padding-bottom: calc(100px + env(safe-area-inset-bottom));
  }
  
  /* Container Padding */
  .container,
  section {
    padding-inline: 20px;
  }
  
  /* Section Spacing */
  section + section {
    margin-top: 48px;
  }
}

/* === 13. TYPOGRAPHY POLISH === */
@media (max-width: 768px) {
  h1, .h1 {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
  }
  
  h2, .h2 {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
  }
  
  h3, .h3 {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.01em;
  }
  
  p, .body {
    font-size: 15px;
    line-height: 1.6;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.85);
  }
  
  small, .small {
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.7);
  }
}

/* === 14. ARABIC MOBILE POLISH === */
@media (max-width: 768px) {
  html[dir="rtl"] body {
    font-size: 16px;
    line-height: 1.7;
  }
  
  html[dir="rtl"] .headline {
    font-size: clamp(34px, 8.5vw, 44px);
    line-height: 1.35;
    letter-spacing: 0;
  }
  
  html[dir="rtl"] h1,
  html[dir="rtl"] h2,
  html[dir="rtl"] h3 {
    letter-spacing: 0;
  }
  
  html[dir="rtl"] .footerBrand,
  html[dir="rtl"] .footerDesc {
    text-align: center;
  }
  
  html[dir="rtl"] .footerHeading {
    text-align: center;
    padding-left: 0;
  }
  
  /* === 14b. ENGLISH MOBILE POLISH === */
  html[dir="ltr"] body {
    font-size: 15px;
    line-height: 1.6;
  }
  
  html[dir="ltr"] .headline {
    font-size: clamp(32px, 8vw, 44px);
    line-height: 1.12;
    letter-spacing: -0.02em;
  }
  
  html[dir="ltr"] .lead {
    font-size: 16px;
    line-height: 1.5;
    text-align: left;
  }
  
  html[dir="ltr"] .footerBrand,
  html[dir="ltr"] .footerDesc {
    text-align: center;
  }
  
  html[dir="ltr"] .footerHeading {
    text-align: center;
  }
}

/* === PREVIOUS MOBILE ENHANCEMENTS === */
@media (max-width: 768px) {
  /* Ensure ALL interactive elements meet 48x48px minimum */
  button:not(.small),
  .btn:not(.small),
  a.btn,
  input[type="submit"],
  [role="button"] {
    min-height: 48px;
    min-width: 48px;
  }
  
  /* Form inputs - prevent iOS auto-zoom */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="url"],
  input[type="search"],
  select,
  textarea {
    font-size: 16px !important; /* CRITICAL: prevents zoom on focus */
    min-height: 52px;
    padding: 14px 16px;
  }
  
  textarea {
    min-height: 120px;
  }
  
  /* Labels - clear and tappable */
  label {
    font-size: 14px;
    margin-bottom: 8px;
    display: block;
    font-weight: 600;
  }
  
  /* Spacing between interactive elements */
  .heroActions,
  .formStepActions {
    gap: 14px;
  }
  
  /* Tab navigation - wider touch targets */
  .tab {
    min-height: 48px;
    padding: 12px 24px;
    font-size: 15px;
  }
}

/* === 2. ENHANCED MOBILE FORMS === */
@media (max-width: 768px) {
  form {
    gap: 20px;
  }
  
  /* Multi-step form - better mobile UX */
  .formStep {
    gap: 18px;
    padding-bottom: 12px;
    min-height: 60px;
  }
  
  .formProgress {
    margin-bottom: 24px;
  }
  
  .progressStep {
    min-height: 8px;
    border-radius: 4px;
  }
  
  .progressCircle {
    width: 40px;
    height: 40px;
    font-size: 16px;
    font-weight: 700;
  }
  
  .progressLabel {
    font-size: 12px;
    margin-top: 6px;
  }
  
  /* Form buttons - thumb-friendly */
  .formStepActions .btn {
    flex: 1;
    min-height: 52px;
    font-size: 16px;
    font-weight: 700;
  }
  
  .formStepActions .btnNextStep {
    order: 2;
  }
  
  .formStepActions .btnPrevStep {
    order: 1;
  }
}

/* === 3. OPTIMIZED CARD SCROLLING === */
@media (max-width: 768px) {
  /* Horizontal scroll with snap */
  .realExperiencesWrap {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    gap: 16px;
    padding: 12px 20px 24px;
    margin: 0 -20px;
  }
  
  /* Hide scrollbar but keep functionality */
  .realExperiencesWrap::-webkit-scrollbar {
    display: none;
  }
  
  .realExperiencesWrap {
    scrollbar-width: none;
  }
  
  /* Cards sized for preview of next */
  .realExpCard {
    flex: 0 0 85%;
    max-width: 320px;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
  
  /* Smooth scroll hint */
  .realExperiencesWrap {
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 4%,
      black 96%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 4%,
      black 96%,
      transparent 100%
    );
  }
}

/* === 4. MOBILE HERO OPTIMIZATION === */
@media (max-width: 768px) {
  .hero {
    min-height: 75vh; /* Not 100vh - encourages scroll */
    max-height: 700px;
  }
  
  .hero img {
    object-position: center 40%;
  }
  
  /* Stronger gradient for text readability */
  .hero::before {
    background: linear-gradient(
      180deg,
      rgba(9,11,16,0.2) 0%,
      rgba(9,11,16,0.5) 40%,
      rgba(9,11,16,0.9) 80%,
      rgba(9,11,16,0.98) 100%
    );
  }
  
  .heroInner {
    padding: 24px 20px 40px;
  }
  
  .headline {
    font-size: clamp(32px, 8vw, 42px);
    line-height: 1.15;
    margin-bottom: 16px;
  }
  
  .lead {
    font-size: 16px;
    line-height: 1.6;
    max-width: 95%;
    margin-bottom: 28px;
  }
  
  .quickPoints li {
    font-size: 15px;
    line-height: 1.5;
  }
}

/* === 5. MOBILE FOOTER OPTIMIZATION === */
@media (max-width: 768px) {
  footer {
    padding: 40px 20px calc(40px + env(safe-area-inset-bottom));
  }
  
  .footerGrid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  
  .footerBrand {
    text-align: center;
  }
  
  .footerLogo {
    justify-content: center;
  }
  
  .footerDesc {
    text-align: center;
    max-width: 100%;
  }
  
  .footerSection {
    text-align: center;
  }
  
  .footerSocial {
    justify-content: center;
    gap: 16px;
  }
  
  .footerSocial a {
    width: 48px;
    height: 48px;
  }
  
  .footerCopyright {
    text-align: center;
    font-size: 13px;
    line-height: 1.6;
  }
}

/* === 6. ARABIC MOBILE OPTIMIZATION === */
@media (max-width: 768px) {
  html[dir="rtl"] body {
    font-size: 17px; /* Larger for Arabic readability */
    line-height: 1.7;
  }
  
  html[dir="rtl"] .headline {
    font-size: clamp(34px, 8.5vw, 44px);
    line-height: 1.35;
    letter-spacing: 0;
  }
  
  html[dir="rtl"] .lead {
    font-size: 17px;
    line-height: 1.75;
  }
  
  html[dir="rtl"] input,
  html[dir="rtl"] textarea,
  html[dir="rtl"] select {
    text-align: right;
    direction: rtl;
  }
  
  html[dir="rtl"] .formStepActions {
    flex-direction: row-reverse;
  }
  
  html[dir="rtl"] .realExperiencesWrap {
    direction: rtl;
  }
  
  html[dir="rtl"] .footerBrand,
  html[dir="rtl"] .footerSection {
    text-align: center; /* Center on mobile for both languages */
  }
  
  html[dir="rtl"] .footerHeading {
    text-align: center;
    padding-left: 0;
  }
  
  html[dir="rtl"] .footerSocial {
    justify-content: center;
  }
}

/* === 6b. ENGLISH MOBILE OPTIMIZATION === */
@media (max-width: 768px) {
  html[dir="ltr"] body {
    font-size: 15px;
    line-height: 1.6;
  }
  
  html[dir="ltr"] .headline {
    font-size: clamp(32px, 8vw, 44px);
    line-height: 1.12;
    letter-spacing: -0.02em;
  }
  
  html[dir="ltr"] .lead {
    font-size: 16px;
    line-height: 1.5;
  }
  
  html[dir="ltr"] input,
  html[dir="ltr"] textarea,
  html[dir="ltr"] select {
    text-align: left;
    direction: ltr;
  }
  
  html[dir="ltr"] .formStepActions {
    flex-direction: row;
  }
  
  html[dir="ltr"] .realExperiencesWrap {
    direction: ltr;
  }
  
  html[dir="ltr"] .footerBrand,
  html[dir="ltr"] .footerSection {
    text-align: center; /* Center on mobile for both languages */
  }
  
  html[dir="ltr"] .footerHeading {
    text-align: center;
  }
  
  html[dir="ltr"] .footerSocial {
    justify-content: center;
  }
}

/* === 7. PERFORMANCE & SMOOTH SCROLLING === */
@media (max-width: 768px) {
  /* Smooth scrolling */
  html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Optimize scrolling performance */
  .hero,
  .realExperiencesWrap,
  .tabList {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  
  /* GPU acceleration for animations */
  .btn,
  .realExpCard,
  .tab,
  .mobileCta {
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }
  
  /* Reduce motion for accessibility */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}

/* === 8. SAFE AREA SUPPORT (Notch/Dynamic Island) === */
@media (max-width: 768px) {
  /* iOS safe areas */
  header {
    padding-top: env(safe-area-inset-top);
  }
  
  .mobileCta {
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }
  
  footer {
    padding-bottom: calc(40px + env(safe-area-inset-bottom));
  }
  
  /* Account for bottom bar in scroll */
  main {
    padding-bottom: calc(90px + env(safe-area-inset-bottom));
  }
}

/* === 9. SMALL PHONE OPTIMIZATION (iPhone SE, Mini) === */
@media (max-width: 390px) {
  .headline {
    font-size: clamp(28px, 7.5vw, 36px);
  }
  
  .lead {
    font-size: 15px;
  }
  
  .heroActions .btn {
    min-height: 54px;
    font-size: 15px;
    padding: 16px 20px;
  }
  
  .realExpCard {
    flex: 0 0 90%;
  }
  
  .mobileCta .btn {
    font-size: 15px;
    padding: 16px 18px;
  }
}

/* === 10. LANDSCAPE MOBILE OPTIMIZATION === */
@media (max-width: 768px) and (orientation: landscape) {
  .hero {
    min-height: 90vh;
  }
  
  .heroInner {
    padding: 20px;
  }
  
  .headline {
    font-size: clamp(24px, 5vw, 32px);
    margin-bottom: 12px;
  }
  
  .lead {
    font-size: 14px;
    margin-bottom: 20px;
  }
  
  .quickPoints {
    display: none; /* Save space in landscape */
  }
  
  .heroActions {
    flex-direction: row;
    gap: 12px;
  }
  
  .heroActions .btn {
    flex: 1;
  }
}

/* === 11. MODAL & POPUP MOBILE OPTIMIZATION === */
@media (max-width: 768px) {
  .modal {
    max-width: 95%;
    max-height: 90vh;
    overflow-y: auto;
  }
  
  .modalContent {
    padding: 24px 20px;
  }
  
  .modalClose {
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    font-size: 24px;
  }
  
  html[dir="rtl"] .modalClose {
    right: auto;
    left: 16px;
  }
}