/*
  Global styling for the کرسی landing page.  
  This stylesheet utilises the provided colour palette and design system to
  create a luxurious, modern and fully responsive experience.  
  All text is right‑aligned for Persian (RTL) languages.
*/

@font-face {
  font-family: 'Kalameh';
  src: url('Kalameh-Medium.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* CSS variables for the colour palette */
:root {
  --primary-bg: #082b27;
  --primary-bg-gradient-start: #0b3a33;
  --primary-bg-gradient-end: #082b27;
  --primary-accent: #d4af37;
  --primary-accent-light: #e6c667;
  --primary-accent-dark: #b38f2f;
  --secondary-accent-red: #943a2d;
  --secondary-accent-red-dark: #7a1f1f;
  --neutral-brown: #5a3c2c;
  --text-heading: #d4af37;
  --text-body: #e9e5d8;
  --text-secondary: #9aa79a;
  /*
    Tunable variables for the glass effect.  The sample design shows a soft,
    translucent surface with a subtle golden outline.  To achieve a closer
    match we use a very low‑opacity light overlay and reduce the border
    visibility.  Adjust these values to fine tune the level of translucency
    and border visibility.
  */
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(212, 175, 55, 0.25);
  /* Height of fixed header; used to offset sections so content isn't hidden behind it */
  --header-height: 80px;
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: 'Kalameh', sans-serif;
  background-color: var(--primary-bg);
  color: var(--text-body);
  direction: rtl;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 700;
}

img {
  max-width: 100%;
  display: block;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Header and Navigation */
.header {
  position: fixed;
  top: 0;
  width: 100%;
  /* Apply a semi‑transparent background and blur to improve readability of
     navigation items over the hero image.  This utilises the same
     glassmorphism language used throughout the site. */
  /* Increase the glassiness by making the header slightly more transparent
     and maintaining a blur.  Removing the golden bottom line creates a
     cleaner integration with the page. */
  background: rgba(8, 43, 39, 0.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 1000;
  border-bottom: none;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
}

.logo-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: inherit;
}

.logo-group:link,
.logo-group:visited,
.logo-group:hover,
.logo-group:active {
  text-decoration: none;
  color: inherit;
}

.logo {
  height: 40px;
  width: 40px;
}

.brand-name {
  /* Use the off‑white body colour for the logo text to improve contrast
     against the semi‑transparent header. */
  color: var(--text-body);
  font-size: 1.25rem;
  font-weight: 600;
}

.nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 2rem;
  margin: 0;
  padding: 0;
}

/* Mobile menu toggle button (hamburger) */
.menu-toggle {
  display: none;
  background: rgba(8, 43, 39, 0.45);
  border: 1px solid var(--glass-border);
  color: var(--primary-accent);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.menu-icon { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.menu-icon .bar { width: 22px; height: 2px; background: var(--primary-accent); transition: transform 0.25s ease, opacity 0.25s ease; }
.menu-toggle.is-open .menu-icon .bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle.is-open .menu-icon .bar:nth-child(2) { opacity: 0; }
.menu-toggle.is-open .menu-icon .bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav-links a {
  /* Use a lighter colour for navigation links to mimic the example header.
     The golden tone ties the menu into the overall palette without
     competing with the logo. */
  color: var(--primary-accent-light);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s;
  position: relative;
}

.nav-links a:hover {
  color: var(--primary-accent-light);
}

/* Provide subtle underline on hover */
.nav-links a::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: var(--primary-accent);
  transition: width 0.3s;
}

.nav-links a:hover::after {
  width: 100%;
  left: 0;
  right: auto;
}

/* Responsive nav behavior */
@media (max-width: 768px) {
  .nav { gap: 0.5rem; }
  .menu-toggle { display: inline-flex; }
  .nav-links {
    position: absolute;
    top: calc(var(--header-height));
    right: 0;
    left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem;
    background: rgba(8, 43, 39, 0.75);
    border-top: 1px solid var(--glass-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.35);
    display: none;
  }
  .nav-links.is-open { display: flex; }
  .nav-links li { width: 100%; }
  .nav-links a { display: block; padding: 0.9rem 1rem; }
}

/* Sections */
.section {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Offset top padding by header height so content isn't hidden behind the fixed header */
  padding-top: calc(var(--header-height) + 2rem);
  padding-bottom: 4rem;
  position: relative;
}

/* Customisation for the problems gallery wrapper.  Unlike other sections,
   this wrapper contains multiple internal pages (triggers) and a sticky
   album card that persists while scrolling.  It therefore does not use
   the fixed full‑screen height and flex centring from .section. */
.problem-gallery-wrapper {
  height: auto;
  display: block;
  padding-top: calc(var(--header-height) + 2rem);
  padding-bottom: 0;
}

/* Container that holds the heading and album card.  It becomes sticky
   so that the header and album remain in place while the user scrolls
   through the invisible triggers. */
.problem-gallery-container {
  position: sticky;
  top: calc(var(--header-height) + 2rem);
  z-index: 2;
}

/* Header for the problem gallery.  Centre align the text and provide
   spacing similar to other sections. */
.problem-gallery-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

/* Wrapper around the album card to centre it and control its width. */
.album-wrapper {
  width: 70%;
  max-width: 800px;
  margin: 3rem auto 0 auto;
}

/* Modify the album card to be relative and maintain an aspect ratio.
   This card will show one image at a time via absolute positioning. */
.album-card {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 aspect ratio */
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* Stack all gallery images on top of each other and animate them in/out. */
/* Base styling for images in the gallery deck.  Each image is absolutely
   positioned and initially hidden below the card with a slight rotation.
   The --rotate custom property allows each image to have a unique tilt.
   As images become visible, they slide up into place while retaining
   their rotation. */
.album-card .gallery-img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  /* Start slightly below the card and with the assigned rotation */
  transform: translateY(60px) rotate(var(--rotate, 0deg));
  transition: opacity 0.7s ease, transform 0.7s ease;
  z-index: 0;
}

/* When an image becomes visible it moves into place and fades in.  The
   rotation remains the same because it is set via the --rotate variable. */
.album-card .gallery-img.visible {
  opacity: 1;
  transform: translateY(0) rotate(var(--rotate, 0deg));
}

/* Invisible triggers that provide scroll height and act as snapping points.
   Each trigger fills one viewport height and signals when to switch images. */
.gallery-trigger {
  height: 100vh;
  /* Use the primary page background colour to avoid visible gaps between
     images when scrolling through the triggers. */
  background: var(--primary-bg);
}

/* When a gallery trigger also carries the .section class, override the
   flexbox and padding behaviour inherited from .section so that the
   triggers do not center their contents or apply extra padding.  This
   allows the custom scroll handler to treat each trigger as its own
   snap‑able page without altering the layout. */
.gallery-trigger.section {
  display: block;
  padding: 0;
  align-items: initial;
  justify-content: initial;
}

/* Customisation for the problems gallery wrapper.  Unlike other sections,
   this wrapper contains multiple internal pages (triggers) and a sticky
   album card that persists while scrolling.  It therefore does not use
   the fixed full‑screen height and flex centring from .section. */
.problem-gallery-wrapper {
  height: auto;
  display: block;
  padding-top: calc(var(--header-height) + 2rem);
  padding-bottom: 0;
}

/* Container that holds the heading and album card.  It becomes sticky
   so that the header and album remain in place while the user scrolls
   through the invisible triggers. */
.problem-gallery-container {
  position: sticky;
  top: calc(var(--header-height) + 2rem);
  z-index: 2;
}

/* Header for the problem gallery.  Centre align the text and provide
   spacing similar to other sections. */
.problem-gallery-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

/* Wrapper around the album card to centre it and control its width. */
.album-wrapper {
  width: 70%;
  max-width: 800px;
  margin: 3rem auto 0 auto;
}


/* Customisation for the problems gallery wrapper.  Unlike other sections,
   this wrapper contains multiple internal pages (triggers) and a sticky
   album card that persists while scrolling.  It therefore does not use
   the fixed full‑screen height and flex centring from .section. */
.problem-gallery-wrapper {
  height: auto;
  display: block;
  padding-top: calc(var(--header-height) + 2rem);
  padding-bottom: 0;
}

/* Container that holds the heading and album card.  It becomes sticky
   so that the header and album remain in place while the user scrolls
   through the invisible triggers. */
.problem-gallery-container {
  position: sticky;
  top: calc(var(--header-height) + 2rem);
  z-index: 2;
}

/* Header for the problem gallery.  Centre align the text and provide
   spacing similar to other sections. */
.problem-gallery-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

/* Wrapper around the album card to centre it and control its width. */
.album-wrapper {
  width: 70%;
  max-width: 800px;
  margin: 3rem auto 0 auto;
}

/* Modify the album card to be relative and maintain an aspect ratio.
   This card will show one image at a time via absolute positioning. */
.album-card {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 aspect ratio */
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* Stack all gallery images on top of each other and animate them in/out. */
.album-card .gallery-img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.album-card .gallery-img.active {
  opacity: 1;
  transform: translateY(0);
}

/* Invisible triggers that provide scroll height and act as snapping points.
   Each trigger fills one viewport height and signals when to switch images. */
.gallery-trigger {
  height: 100vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* hero section specifics */
.hero-section {
  position: relative;
  color: var(--text-body);
  overflow: hidden;
  /* Override the default centre alignment from .section so that content
     anchors closer to the top of the hero.  This keeps the title and
     button visible without requiring the user to scroll. */
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.hero-background {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-position: center right;
  background-size: cover;
  filter: brightness(0.6);
  z-index: -2;
}

/* Blend the hero image into the rest of the page using a gradient overlay. */
.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* Fade from transparent at the top to dark at the bottom to seamlessly
     transition the hero background into the page's dark green base. */
  /* Reduce the spread and intensity of the darkening gradient over the hero
     image to let more of the underlying photo show through. */
  background: linear-gradient(to bottom,
      rgba(8, 43, 39, 0) 25%,
      rgba(8, 43, 39, 0.4) 60%,
      rgba(8, 43, 39, 0.7) 100%);
  z-index: -1;
}

.hero-content {
  text-align: right;
  max-width: 600px;
  /* Align the hero copy to the right edge and add vertical spacing so that
     the title and button sit comfortably in the upper half of the section. */
  margin-left: auto;
  margin-right: 0;
  margin-top: 10vh;
  /* Add generous padding around the hero title and button.  This larger
     padding aligns the content vertically with the logo in the header and
     creates more breathing space. */
  padding: 6rem 2rem;
}

.hero-title {
  color: var(--primary-accent);
  font-size: clamp(2rem, 6vw, 4rem);
  margin-bottom: 2rem;
  line-height: 1.2;
  /* Add shadow to improve readability on busy backgrounds */
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.hero-subtitle {
  font-size: 1.25rem;
  margin-bottom: 2rem;
  color: var(--text-body);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.btn {
  border: none;
  cursor: pointer;
  font-size: 1rem;
  font-family: inherit;
  padding: 0.75rem 2rem;
  border-radius: 12px;
  font-weight: 600;
  transition: all 0.3s ease;
}

/* Special styling for the download button in the hero section */
.hero-download {
  font-size: 1.1rem;
  padding: 1rem 2.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  /* Apply a glassmorphism effect to the download button using a translucent
     background, golden border and backdrop blur.  The text and icon are
     coloured gold to tie into the brand palette. */
  background: var(--glass-bg);
  color: var(--primary-accent);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.hero-download svg {
  width: 20px;
  height: 20px;
  /* Colour the download icon gold to match the text in the glass button. */
  fill: var(--primary-accent);
}

.hero-download:hover {
  /* On hover, slightly brighten the background and border to indicate
     interactivity without losing the glass effect. */
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(212, 175, 55, 0.35);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

/* Shiny animated style for the hero download button using site palette */
.hero-download {
  position: relative;
  margin: 0.25rem 0;
  padding: 1rem 2.75rem;
  color: var(--text-body);
  border: 3px solid transparent;
  border-radius: 999px;
  background-color: var(--primary-bg);
  background-image:
    linear-gradient(to bottom right, var(--primary-bg-gradient-start), var(--primary-bg-gradient-end)),
    linear-gradient(125deg, rgba(255,255,255,0) 45%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0) 53%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-size: 100%, 200%;
  background-position: 0 0, -250px;
  animation: 4s border-glint linear infinite;
  animation-delay: 0.6s;
  box-shadow: rgba(0, 0, 0, 0.6) 8px 8px 8px;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
  transition: box-shadow 0.25s ease, text-shadow 0.25s ease, color 0.2s ease;
  overflow: hidden;
}

.hero-download:hover {
  cursor: pointer;
  background-image:
    linear-gradient(to bottom right, #0f544a, #0a3a34),
    linear-gradient(125deg, rgba(255,255,255,0) 45%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 53%);
  color: #ffffff;
  box-shadow: rgba(0, 0, 0, 0.7) 5px 5px 5px;
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.35);
}

.hero-download::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -120%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  background-image: linear-gradient(125deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0) 52%);
  animation: 4s glint linear infinite;
  animation-delay: -2.5s;
}

/* Ensure the icon follows the button text colour */
.hero-download svg { fill: currentColor; }

@keyframes glint {
  0% { right: -120%; }
  8% { right: 50%; }
  100% { right: 50%; }
}

@keyframes border-glint {
  0% { background-position: 0 0, -250px; }
  25% { background-position: 0 0, -200px; }
  75% { background-position: 0 0, 50px; }
  100% { background-position: 0 0, 50px; }
}

/* Eyes inside hero button */
.hero-download .eyes-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-right: 0.5rem;
}

/* sensors positioned around the button center; scoped to button */
/* remove sensor-based hover tracking; use CSS variables set by JS */

.hero-download .eye {
  background: #ffffff;
  border: 3px solid #ffffff;
  border-radius: 999px;
  padding: 0.4rem;
  position: relative;
  width: 24px;
  height: 24px;
  z-index: 2;
}

.hero-download .btn-lid {
  border-radius: 999px;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 3;
}

.hero-download .btn-pupil {
  background: var(--primary-bg);
  border: 0.25rem solid var(--primary-accent);
  border-radius: 999px;
  width: 100%;
  height: 100%;
  display: block;
  transition: transform 120ms ease-out;
  /* dx, dy in range [-1, 1]; scale movement to 35% of radius */
  transform: translate(calc(var(--eye-dx, 0) * 35%), calc(var(--eye-dy, 0) * 35%));
}

.hero-download:hover .btn-lid {
  animation: eye-lid 100ms forwards;
}

.hero-download:active .btn-pupil {
  animation: pupil 100ms infinite 500ms;
}

/* Pupil movement is now driven by CSS variables --eye-dx/--eye-dy set in JS */

@keyframes pupil {
  0% { transform: scale(1.05) translate(0%, -10%); }
  25% { transform: scale(1.05) translate(-10%, 10%); }
  50% { transform: scale(1.05) translate(10%, -5%); }
  75% { transform: scale(1.05) translate(-10%, -5%); }
  100% { transform: scale(1.05) translate(10%, 10%); }
}

@keyframes eye-lid {
  0% { background: rgba(0,0,0,0.9); }
  25% { background: linear-gradient(0deg, rgba(0,0,0,0.9) 0% 9%, transparent 10% 90%, rgba(0,0,0,0.9) 91% 100%); }
  50% { background: linear-gradient(0deg, rgba(0,0,0,0.9) 0% 18%, transparent 19% 81%, rgba(0,0,0,0.9) 82% 100%); }
  75% { background: linear-gradient(0deg, rgba(0,0,0,0.9) 0% 27%, transparent 28% 72%, rgba(0,0,0,0.9) 73% 100%); }
  100% { background: linear-gradient(0deg, rgba(0,0,0,0.9) 0% 35%, transparent 36% 64%, rgba(0,0,0,0.9) 65% 100%); }
}

.primary-btn {
  background: var(--primary-accent);
  color: var(--primary-bg);
}

.primary-btn:hover {
  background: var(--primary-accent-light);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Problem, Solution, How sections */
.section-title {
  color: var(--primary-accent);
  font-size: 2rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

.section-text {
  max-width: 700px;
  margin: 0 auto;
  font-size: 1.2rem;
  line-height: 1.7;
  text-align: center;
  color: var(--text-body);
}

/* Emphasis words inside section text to match title style */
.section-text .section-emphasis {
  color: var(--primary-accent);
  font-weight: 800;
  font-size: 1.25em;
}

.solution-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 600px;
}

.solution-list li {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  padding-right: 1.5rem;
  position: relative;
  color: var(--text-body);
}

.solution-list li::before {
  content: '•';
  position: absolute;
  right: 0;
  top: 0;
  color: var(--primary-accent);
  font-size: 1.5rem;
  line-height: 1;
}

/* How It Works Process */
.process-wrapper {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  max-width: 900px;
  margin: 0 auto;
}

.process-step {
  flex: 1;
  min-width: 200px;
  text-align: center;
  padding: 1rem;
  color: var(--text-body);
}

.step-number {
  background: var(--primary-accent);
  color: var(--primary-bg);
  width: 48px;
  height: 48px;
  line-height: 48px;
  border-radius: 50%;
  margin: 0 auto 1rem auto;
  font-weight: bold;
  font-size: 1.25rem;
}

/* Features grid */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.feature-card {
  padding: 1.5rem;
  border-radius: 40px;
  text-align: right;
  background-image: url('card_background.png');
  background-size: cover;
  background-position: center;
  padding-bottom: 15vh; /* reserved empty space at bottom */
}

.feature-card h3 {
  margin-bottom: 1rem;
  color: var(--primary-accent);
  font-size: 1.4rem;
}

.feature-card p {
  color: var(--text-body);
  line-height: 1.6;
}

/* Feature card header row: number + title */
.feature-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.feature-number {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--primary-accent);
  line-height: 1;
}

/* Glass effect reusable class */
.glass {
  /*
    Apply the glass effect using a translucent fill, a subtle golden border
    and a mild backdrop blur.  A lighter blur (10px) keeps the underlying
    imagery visible while maintaining legibility of the card content.  A
    softened shadow ties the card to the background without making it float
    too far above the page surface.
  */
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* Ensure feature-card background image remains visible despite .glass shorthand */
.feature-card.glass {
  background-image: url('card_background.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: none;
  box-shadow: none;
}

/* Community section */
.community-slider {
  display: flex;
  overflow-x: auto;
  gap: 1.5rem;
  margin-top: 2rem;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
}

.community-slider::-webkit-scrollbar {
  height: 6px;
}

.community-slider::-webkit-scrollbar-thumb {
  background: var(--primary-accent-dark);
  border-radius: 3px;
}

.community-card {
  flex: 0 0 auto;
  min-width: 280px;
  padding: 1.5rem;
  border-radius: 20px;
  scroll-snap-align: start;
}

/* Full‑screen sections that showcase images one after another as the user scrolls.
   They use scroll snapping like the other sections and centre the image with
   object‑fit to fill the viewport. */
.scroll-image-section {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.scroll-image-section img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Additional hero‑style section (after the image scroll) using s4 as the
   background. It resembles the original hero section but with its own
   content container and a lighter gradient overlay. */
.hero2-section {
  position: relative;
  height: 100vh;
  color: var(--text-body);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-position: center;
  background-size: cover;
}

/* overlay that will fade in via scroll morph */
/* removed hero2-overlay-bg */

.hero2-section::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* Apply a soft gradient overlay so the white text remains readable over
     the photograph. */
  background: linear-gradient(to bottom, rgba(8, 43, 39, 0) 30%, rgba(8, 43, 39, 0.5) 70%, rgba(8, 43, 39, 0.8) 100%);
  z-index: -1;
}

.hero2-content {
  text-align: center;
  max-width: 800px;
  padding: 4rem 2rem;
}

.hero2-title {
  color: var(--text-body);
  font-size: clamp(2rem, 6vw, 4rem);
  line-height: 1.2;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  text-align: right;
}

/* Emphasised words inside hero2 titles use the golden title colour */
.hero2-title .section-emphasis {
  color: var(--primary-accent);
}

/* Alternating alignment for Section3 blocks */
.hero2-section.hero2-left .hero2-content {
  margin-right: auto;
  margin-left: 0;
  text-align: left;
}

.hero2-section.hero2-right .hero2-content {
  margin-left: auto;
  margin-right: 0;
  text-align: right;
}

/* In RTL context, ensure left/right meanings are visual sides */
html[dir="rtl"] .hero2-section.hero2-left .hero2-content {
  text-align: left;
}

html[dir="rtl"] .hero2-section.hero2-right .hero2-content {
  text-align: right;
}

/* Move the content block to the visual sides */
.hero2-section.hero2-left { justify-content: flex-start; }
.hero2-section.hero2-right { justify-content: flex-end; }

.community-card .category {
  font-weight: 600;
  color: var(--primary-accent);
  margin-bottom: 0.5rem;
}

.community-card .note {
  line-height: 1.6;
  color: var(--text-body);
}

/* Orbit gallery (Section2): three cards forming a curved fan near the bottom */
.gallery-orbit-section {
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  gap: 1rem;
  padding-bottom: 0;
}

/* A big circular container whose center sits below the viewport, so we see
   only the top arc at the bottom of the section */
/* Flex expanding gallery below header text */
.gallery-wrap {
  display: flex;
  flex-direction: row;
  width: 100%;
  max-width: 1200px;
  height: 60vh;
  margin: 1.25rem auto 0 auto;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.gallery-item {
  flex: 1 1 0;
  height: 100%;
  border-radius: 20px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: flex 0.6s ease, box-shadow 0.3s ease;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.gallery-item.default-expanded {
  flex: 6;
}

.gallery-item:hover {
  flex: 6;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.5);
}

/* When the gallery is being interacted with, collapse all to base size,
   then let only the hovered item expand. This also collapses the
   .default-expanded item unless it's the one hovered. */
.gallery-wrap:hover .gallery-item {
  flex: 1;
}

.gallery-wrap:hover .gallery-item:hover {
  flex: 6;
}

/* place the three cards across the bottom arc */
/* individual items using local images */
.gallery-item.item-1 { background-image: url('s1.png'); }
.gallery-item.item-2 { background-image: url('s2.png'); }
.gallery-item.item-3 { background-image: url('s3.png'); }
.gallery-item.item-4 { background-image: url('s4.png'); }

.orbit-item:hover,
.orbit-item.is-active {
  box-shadow: 0 18px 40px rgba(0,0,0,0.5);
}

/* subtle idle shadow breathing */
/* remove legacy orbit animations */

/* keep keyframes unused to avoid conflicts */

@media (max-width: 992px) {
  .orbit-gallery { --radius: 42vh; }
  .orbit-item:nth-child(1) { --angle: -32.5deg; }
  .orbit-item:nth-child(3) { --angle: 32.5deg; }
}

@media (max-width: 600px) {
  .orbit-item { width: clamp(225px, 77.5vw, 425px); border-radius: 18px; } /* 25% larger */
  .orbit-gallery { --radius: 38vh; }
}

/* Removed obsolete .problem-gallery-section placeholder to avoid empty ruleset */

/*
  The `.album-card` styles for the problems gallery are defined earlier
  in this file.  Duplicate definitions have been removed to prevent
  conflicting sizes or margins.  See earlier `.album-wrapper` and
  `.album-card` rules for the authoritative values.
*/

/* Screen reader only class to hide duplicate headings and paragraphs in
   subsequent gallery sections while maintaining semantic structure. */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Download section */
.download-section {
  text-align: center;
  /* Align content to top of viewport within the full-height section */
  align-items: flex-start;
}

/* Download tabs (اندروید / iOS / وب اپ) */
.download-tabs {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--glass-bg);
  color: #ffffff;
  padding: 0.5rem;
  border-radius: 999px;
  margin-top: 1.25rem;
  overflow: hidden;
  border: none;
}

.download-tabs input[type="radio"] {
  display: none;
}

.download-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  width: 140px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s ease-in;
  color: #ffffff;
}

.download-glider {
  position: absolute;
  width: 140px;
  background-color: var(--primary-accent);
  border-radius: 999px;
  transition: transform 0.25s ease-out;
  z-index: 0;
  top: 0;
  left: 0;
  bottom: 0;
}
.download-tabs input[type="radio"]:checked + label.download-tab { color: #ffffff; }


.download-tabs > *:not(.download-glider) { z-index: 1; }

.download-panels {
  margin-top: 1.25rem;
}

.panel { display: none; }
.panel.active { display: flex; }

.download-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}

.download-btn {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.8rem;
  border-radius: 12px;
  background: var(--glass-bg);
  color: #ffffff;
  font-weight: 600;
  font-size: 1.2rem;
  text-decoration: none;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.download-btn .icon {
  width: 29px;
  height: 29px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.download-btn svg {
  width: 100%;
  height: 100%;
  fill: var(--primary-bg);
}

.download-btn .icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.download-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Ensure tab panels visibility overrides the generic .download-buttons rule */
.download-panels .download-buttons { display: none; }
.download-panels .download-buttons.active { display: flex; }

/* Contact section */
.contact-text {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  line-height: 1.8;
  font-size: 1.1rem;
  color: var(--text-body);
}

.contact-text a {
  color: var(--primary-accent);
  text-decoration: none;
  transition: color 0.3s;
}

.contact-text a:hover {
  color: var(--primary-accent-light);
  text-decoration: underline;
}

/* Placeholder sections for future pages (FAQ & Privacy) */
.placeholder-section {
  min-height: 60vh;
  padding: 8rem 0;
  background: var(--primary-bg);
  color: var(--text-body);
}

/* FAQ page styles (template-adapted) */
.faq-section {
  background: var(--primary-bg);
  min-height: 100vh;
  padding: calc(var(--header-height) + 6vh) 0 8vh;
}
.faq-title h2 {
  position: relative;
  margin-bottom: 45px;
  display: inline-block;
  font-weight: 700;
  line-height: 1;
  color: var(--primary-accent);
}
.faq-title h2::before {
  content: "";
  position: absolute;
  right: 50%;
  width: 60px;
  height: 2px;
  background: var(--primary-accent);
  bottom: -25px;
  margin-right: -30px;
}

.faq {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.faq .card {
  border: none;
  background: transparent;
  border-bottom: 1px dashed rgba(212, 175, 55, 0.25);
}

.faq .card:last-child { border-bottom: none; }

.faq .card .card-header {
  padding: 0;
  border: none;
  background: none;
  transition: all 0.3s ease;
}

.faq .card .card-header:hover {
  background: rgba(212, 175, 55, 0.08);
  padding-right: 10px;
}

.faq .card .card-header .faq-title {
  width: 100%;
  text-align: right;
  padding: 20px 30px;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.2px;
  color: var(--text-body);
  text-decoration: none !important;
  transition: all 0.3s ease;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
}

.faq .card .card-header .faq-title .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 100px;
  background: var(--primary-accent);
  color: var(--primary-bg);
  font-size: 12px;
}

.faq .card .card-body {
  padding: 0 35px 16px 35px;
  font-weight: 400;
  font-size: 16px;
  color: var(--text-body);
  line-height: 28px;
  letter-spacing: 0.2px;
  border-top: 1px solid rgba(212, 175, 55, 0.15);
}

.faq .card .card-body p { margin-bottom: 14px; }

/* Accordion animation (no Bootstrap) */
.faq .collapse {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.faq .collapse.show { max-height: 800px; }

@media (max-width: 991px) {
  .faq { margin-bottom: 30px; }
  .faq .card .card-header .faq-title { line-height: 26px; }
}

/* Privacy page */
.privacy-section {
  background: var(--primary-bg);
  padding: calc(var(--header-height) + 6vh) 0 10vh;
  min-height: 100vh;
}

.privacy-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 40px 28px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.privacy-card h1 {
  font-size: 2rem;
  margin-bottom: 20px;
  color: var(--primary-accent);
}

.privacy-card h2 {
  margin-top: 32px;
  font-size: 1.5rem;
  color: var(--text-body);
}

.privacy-card h3 {
  margin-top: 18px;
  font-size: 1.1rem;
  color: var(--text-body);
}

.privacy-card p, .privacy-card li {
  color: var(--text-body);
  line-height: 1.8;
}

.privacy-card ul { padding-right: 1.2rem; }
.privacy-card ul li { margin-bottom: 6px; }

.privacy-toc {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 18px 20px;
  margin: 18px 0 26px 0;
}

.privacy-toc h4 { margin: 0 0 10px 0; color: var(--text-body); }
.privacy-toc ul { list-style: none; margin: 0; padding: 0; }
.privacy-toc li { margin-bottom: 8px; }
.privacy-toc a { color: var(--primary-accent); text-decoration: none; }
.privacy-toc a:hover { color: var(--primary-accent-light); text-decoration: underline; }

/* Animation helpers */
.animate {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, transform;
}

.animate.show {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .nav-links {
    gap: 1rem;
  }
  .process-wrapper {
    flex-direction: column;
    align-items: center;
  }
  .process-step {
    margin-bottom: 2rem;
  }
  .feature-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

@media (max-width: 768px) {
  .hero-title {
    font-size: clamp(1.5rem, 8vw, 3rem);
  }
  .hero-subtitle {
    font-size: 1rem;
  }
  .nav-links a {
    font-size: 0.875rem;
  }
  .download-buttons {
    flex-direction: column;
    align-items: center;
  }
  .download-btn {
    width: 100%;
    justify-content: center;
  }
  .community-slider {
    flex-direction: column;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
  }
  .community-card {
    min-width: auto;
    width: 100%;
    margin-bottom: 1.5rem;
    scroll-snap-align: start;
  }
}

/* Mobile: keep features horizontal and scrollable with no visible scrollbar */
@media (max-width: 768px) {
  .features-section {
    align-items: flex-start;
  }
  .feature-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 1rem;
    padding: 0.5rem 2rem 1rem 2rem; /* breathing room and avoid edge clipping */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none; /* IE/Edge */
    scrollbar-width: none; /* Firefox */
    /* Keep scroll gestures inside the carousel and hint horizontal panning */
    overscroll-behavior-x: contain;
    overscroll-behavior-y: none;
    touch-action: pan-x;
    mask-image: linear-gradient(to left, transparent, black 20px),
                linear-gradient(to right, transparent, black 20px);
    -webkit-mask-image: linear-gradient(to left, transparent, black 20px),
                        linear-gradient(to right, transparent, black 20px);
    mask-composite: intersect;
    -webkit-mask-composite: source-in; /* Safari fallback for nice edge fade */
  }
  .feature-grid::-webkit-scrollbar { display: none; }
  .feature-card {
    flex: 0 0 auto;
    min-width: 80vw; /* show one card prominently */
    max-width: 90vw;
    scroll-snap-align: center;
  }
}

/* Carousel controls for Features (mobile only) */
/* Hide by default (desktop and larger) */
.feature-nav,
.feature-indicators { display: none; }

@media (max-width: 768px) {
  .feature-carousel {
    position: relative;
    width: 100%;
  }
  .feature-nav {
    display: inline-flex;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    color: var(--primary-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
  }
  .feature-nav svg { width: 18px; height: 18px; fill: var(--primary-accent); }
  .feature-nav.prev { right: 8px; }
  .feature-nav.next { left: 8px; }

  .feature-indicators {
    display: inline-flex;
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    gap: 6px;
    padding: 8px 10px; /* add a bit more top/bottom padding */
    border-radius: 999px;
    background: rgba(8,43,39,0.35);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 4;
  }
  .feature-indicator {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(212, 175, 55, 0.4);
    transition: width 0.2s ease, background 0.2s ease;
  }
  .feature-indicator.active {
    width: 18px;
    border-radius: 999px;
    background: var(--primary-accent);
  }
}

/* Soon badge positioning wrapper */
.download-btn.has-badge {
  position: relative;
  overflow: visible;
}

/* Anchor the badge to the top-left corner of the button */
.soon-badge {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 2;
}

/* Compact badge */
.badges {
  position: relative;
  width: 56px;
  height: 56px;
  background: #552F87;
  border-radius: 100%;
  color: #FFF;
  text-align: center;
  font-family: "Kalameh", sans-serif;
  -webkit-animation: 3s ease-in-out 0s normal none infinite running swing;
  -moz-animation: 3s ease-in-out 0s normal none infinite running swing;
  -o-animation: 3s ease-in-out 0s normal none infinite running swing;
  animation: 3s ease-in-out 0s normal none infinite running swing;
  -webkit-transform-origin: 28px -24px;
  -moz-transform-origin: 28px -24px;
  -o-transform-origin: 28px -24px;
  transform-origin: 28px -24px;
}

.badges p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
}

.firstLine { font-size: 10px; font-weight: 300; }
.secondLine { font-size: 12px; line-height: 1.1; font-weight: 800; }
.thirdLine { font-size: 11px; line-height: 1.1; font-weight: 300; }
.fourthLine { font-size: 8px; font-weight: 300; position: relative; top: -2px; }

/* Hide decorative ring/rope at small size to keep it clean */
.badges:before{ display: none; }
.badges:after{ display: none; }

@-webkit-keyframes swing{ 0%{-webkit-transform:rotate(5deg);} 50%{-webkit-transform:rotate(-5deg);} 100%{-webkit-transform:rotate(5deg);} }
@-moz-keyframes swing{ 0%{-moz-transform:rotate(5deg);} 50%{-moz-transform:rotate(-5deg);} 100%{-moz-transform:rotate(5deg);} }
@-o-keyframes swing{ 0%{-o-transform:rotate(5deg);} 50%{-o-transform:rotate(-5deg);} 100%{-o-transform:rotate(5deg);} }
@keyframes swing{ 0%{transform:rotate(5deg);} 50%{transform:rotate(-5deg);} 100%{transform:rotate(5deg);} }

/* Even smaller on mobile */
@media (max-width: 768px) {
  .soon-badge { top: -10px; right: -10px; }
  .badges { width: 48px; height: 48px; -webkit-transform-origin: 24px -20px; transform-origin: 24px -20px; }
  .secondLine { font-size: 11px; }
}

/* Snackbar */
.snackbar {
  position: fixed;
  left: 50%;
  top: 24px;
  bottom: auto;
  transform: translateX(-50%) translateY(-20px);
  background: var(--glass-bg);
  color: #ffffff;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 0.9rem 1.2rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
  z-index: 2000;
}
.snackbar.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}