:root {
  /* ... (existing color, font, and space variables are good) ... */
  --clr-primary: #4036a7;
  --clr-primary-light: #695ef5;
  --clr-primary-dark: #5046b7;
  --clr-accent: #028cff;
  --clr-white: #fff;
  --clr-black: #000;
  --clr-text-light: #fffc;
  --clr-text-light-hover: #e5e5e5;
  --clr-text-dark: #222;
  --clr-text-heading: #363853;
  --clr-text-body: #666;
  --clr-text-muted: #676767;
  --clr-white-10: #ffffff1a;
  --clr-white-30: #ffffff4d;
  --clr-white-60: #ffffff9a;
  --clr-black-02: #00000005;
  --clr-black-10: #0000001a;
  --clr-black-25: #00000040;
  --clr-primary-light-05: #695ef50d;
  --clr-accent-05: #028cff0d;
  --clr-primary-light-20: #695ef533;
  --clr-accent-40: #028cff66;

  --font-primary: Roboto, sans-serif;
  --font-heading: Rubik, sans-serif;
  --font-ui: Quicksand, sans-serif;
  --font-secondary: "Nunito Sans", sans-serif;

  --fs-nav-mobile: 1.5rem;
  --fs-nav-desktop: 1rem;
  --fs-btn-mobile: 1.13rem;
  --fs-btn-desktop: 1rem;
  --fs-h1: clamp(1.5rem, 0.785rem + 3.5714vw, 3rem);
  --fs-h2: clamp(1.5rem, 0.32rem + 5.57vw, 2.8125rem);
  --fs-h2-alt: clamp(1.13rem, 0.75rem + 1.8vw, 1.625rem);
  --fs-h2-faq: clamp(1.56rem, 0.38rem + 5.57vw, 2.8125rem);
  --fs-p: clamp(0.81rem, 0.6rem + 0.98vw, 1rem);
  --fs-p-lg: clamp(0.76rem, -0.2rem + 4.57vw, 1.125rem);
  --fs-card-title: clamp(0.75rem, 0.6rem + 0.71vw, 1rem);
  --fs-card-body: clamp(0.63rem, 0.55rem + 0.38vw, 0.75rem);

  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-xxl: 3rem;

  /* NEW: Standardized timing and easing for all transitions */
  --duration-fast: 0.15s;
  --duration-medium: 0.3s;
  --duration-slow: 0.5s;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
}

/* ... (existing reset is good) ... */
* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  text-decoration: none;
  list-style: none;
  -webkit-tap-highlight-color: transparent !important;
}

html,
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
video,
audio,
canvas,
embed,
iframe,
object {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
textarea,
select,
button {
  font: inherit;
  color: inherit;
}

button {
  all: unset;
  cursor: pointer;
  text-align: center;
}

a {
  color: inherit;
  text-decoration: none;
  background-color: transparent;
}

/* NEW: Global, accessible focus style. Removed redundant button/a focus styles later. */
*:focus-visible {
  outline: 3px solid var(--clr-accent);
  outline-offset: 3px;
  border-radius: 4px;
  transition: outline-offset var(--duration-fast) var(--ease-standard),
    outline var(--duration-fast) var(--ease-standard);
}

.humburger-container {
  display: flex;
  justify-content: flex-end;
}

.outer-menu {
  position: relative;
  width: 45px;
  height: 45px;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 18px;
  color: var(--clr-text-light);
}

.outer-menu div {
  z-index: 1;
}

.outer-menu .checkbox-toggle {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  width: 45px;
  height: 45px;
  opacity: 0;
  cursor: pointer;
}

.outer-menu .checkbox-toggle:checked+.hamburger>div {
  transform: rotate(135deg);
}

.outer-menu .checkbox-toggle:checked+.hamburger>div::before,
.outer-menu .checkbox-toggle:checked+.hamburger>div::after {
  top: 0;
  transform: rotate(90deg);
}

.outer-menu .checkbox-toggle:checked+.hamburger>div::after {
  opacity: 0;
}

.outer-menu .checkbox-toggle:checked~.menu {
  pointer-events: auto;
  visibility: visible;
  transition: visibility 0s 0s;
}

.outer-menu .checkbox-toggle:checked~.menu>div {
  transform: scale(1);
  /* MODIFICATION: Standardized duration */
  transition-duration: var(--duration-slow);
}

.outer-menu .checkbox-toggle:checked~.menu>div>div {
  opacity: 1;
  /* MODIFICATION: Standardized transition */
  transition: opacity var(--duration-medium) var(--ease-standard) var(--duration-medium);
}

/* MODIFICATION: Standardized transition */
.outer-menu .checkbox-toggle:focus-visible~.hamburger {
  box-shadow: 0 0 0 3px var(--clr-accent-40);
  border-radius: 4px;
}

.outer-menu .hamburger {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 45px;
  height: 45px;
  padding: 0.5em 0.75em;
  border-radius: 0 0.12em 0.12em 0;
  /* MODIFICATION: Standardized transition */
  transition: box-shadow var(--duration-medium) var(--ease-standard);
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.outer-menu .hamburger>div {
  position: relative;
  flex: none;
  width: 100%;
  height: 2px;
  background: var(--clr-white);
  /* MODIFICATION: Removed 'all' and specified transform. Added will-change. */
  transition: transform var(--duration-medium) var(--ease-standard);
  will-change: transform;
  display: flex;
  align-items: center;
  justify-content: center;
}

.outer-menu .hamburger>div::before,
.outer-menu .hamburger>div::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: -7.5px;
  left: 0;
  width: 100%;
  height: 2px;
  background: inherit;
  /* MODIFICATION: Removed 'all' and specified properties. Added will-change. */
  transition: top var(--duration-medium) var(--ease-standard),
    transform var(--duration-medium) var(--ease-standard),
    opacity var(--duration-medium) var(--ease-standard);
  will-change: top, transform, opacity;
}

.outer-menu .hamburger>div::after {
  top: 7.5px;
}

.outer-menu .menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  visibility: hidden;
  overflow: hidden;
  backface-visibility: hidden;
  outline: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: visibility 0s var(--duration-medium);
}

.outer-menu .menu>div {
  width: 300vw;
  height: 300vw;
  background: var(--clr-primary);
  border-radius: 50%;
  /* MODIFICATION: Removed 'all' and specified transform. Added will-change. */
  transition: transform var(--duration-medium) var(--ease-standard);
  will-change: transform;
  flex: none;
  transform: scale(0);
  backface-visibility: hidden;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.outer-menu .menu>div>div {
  text-align: center;
  max-width: 90vw;
  max-height: 100vh;
  opacity: 0;
  /* MODIFICATION: Standardized transition. Added will-change. */
  transition: opacity var(--duration-medium) var(--ease-standard);
  will-change: opacity;
  overflow-y: auto;
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 5vh;
  padding-bottom: 5vh;
}

.outer-menu .menu>div>div>ul {
  list-style: none;
  padding: 0 1em;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.outer-menu .menu>div>div>ul>li {
  padding: 0;
  margin: var(--space-md);
  font-size: var(--fs-nav-mobile);
  display: block;
}

.outer-menu .menu>div>div>ul>li>a {
  position: relative;
  display: inline;
  cursor: pointer;
  /* MODIFICATION: Standardized transition */
  transition: color var(--duration-medium) var(--ease-standard);
}

.outer-menu .menu>div>div>ul>li>a:active {
  color: var(--clr-text-light-hover);
  outline: none;
  /* Handled by global :focus-visible */
}

.outer-menu .menu>div>div>ul>li>a:active::after {
  width: 100%;
}

.outer-menu .menu>div>div>ul>li>a::after {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: -0.15em;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--clr-text-light-hover);
  /* MODIFICATION: Standardized transition */
  transition: width var(--duration-medium) var(--ease-standard);
}

.outer-menu .menu>div>div>ul>li:last-child>a::after {
  display: none;
}

.rahati-logo-hamburger {
  margin-bottom: 1rem;
}

.menu button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0.63rem 1rem;
  gap: 0.63rem;
  background: var(--clr-white-10);
  color: var(--clr-white-60);
  border: 1px solid var(--clr-white-30);
  border-radius: 16px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 4px 30px var(--clr-black-10);
}

.menu img {
  align-self: center;
  min-width: 45px;
  min-height: 45px;
}

/* ... (header, navbar, hero content structure) ... */
header {
  background: linear-gradient(169.4deg,
      var(--clr-primary-light-05) -6.01%,
      var(--clr-accent-05) 36.87%,
      var(--clr-primary-light-05) 78.04%,
      var(--clr-primary-light-05) 103.77%);
  padding-top: var(--space-md);
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  background: var(--clr-primary);
  box-shadow: 0 4px 15px var(--clr-black-25);
  border-radius: 30px;
  height: 4.5rem;
  margin: 0 var(--space-sm) var(--space-xl);
  max-width: 914px;
}

.navbar img {
  max-height: 32px;
}

.menu-toggle {
  color: var(--clr-white);
  font-size: larger;
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-content h1 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--fs-h1);
  text-align: center;
  color: var(--clr-text-dark);
  margin: 0 var(--space-lg) var(--space-md);
  max-width: 600px;
}

.hero-content span {
  color: var(--clr-accent);
}

.hero-content p {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fs-p);
  text-align: center;
  color: var(--clr-text-body);
  margin: calc(var(--space-lg));
  max-width: 450px;
}

.rahatipay-hero-mobile {
  align-self: center;
  max-height: clamp(300px, 60vh, 500px);
  width: auto;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.cta {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-xxl);
}

.cta button {
  min-width: 170px;
}

/* MODIFICATION: Standardized button transitions and interactions */
.button-download {
  padding: var(--space-sm) var(--space-xxl);
  background: var(--clr-primary);
  border-radius: 15px;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: var(--fs-btn-mobile);
  color: var(--clr-white);
  transition: background-color var(--duration-medium) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
  will-change: transform, background-color;
}

/* MODIFICATION: Removed redundant focus style */

.join-waiting-list {
  padding: var(--space-sm) var(--space-lg);
  border: 1px solid var(--clr-primary);
  border-radius: 15px;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: var(--fs-btn-mobile);
  color: var(--clr-primary);
  max-height: 40px;
  transition: background-color var(--duration-medium) var(--ease-standard),
    color var(--duration-medium) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
  will-change: transform, background-color, color;
}

/* MODIFICATION: Removed redundant focus style */

.service {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.service-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-items: center;
  padding: 30px clamp(20px, 9vw, 150px);
  padding-left: 0;
  padding-right: 0;
  gap: 1.25rem;
  width: fit-content;
}

/* NEW: Added micro-interaction to cards */
.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.25rem;
  gap: 0.31rem;
  background: var(--clr-white);
  border-right: 0.5px solid var(--clr-black-25);
  box-shadow: 0 4px 12px var(--clr-primary-light-20);
  border-radius: 20px;
  flex: 1 1 clamp(136px, 40%, 182px);
  width: 35vw;
  min-width: 140px;
  max-width: 220px;
  min-height: 150px;
  /* NEW: Transition for hover/focus */
  transition: transform var(--duration-medium) var(--ease-standard),
    box-shadow var(--duration-medium) var(--ease-standard);
  will-change: transform, box-shadow;
}

.card img {
  height: 40px;
}

.card h3 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--fs-card-title);
  color: var(--clr-primary);
  text-align: center;
}

.card p {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: var(--fs-card-body);
  color: var(--clr-text-muted);
  text-align: center;
}

.security-content {
  display: flex;
  flex-direction: column;
}

.security-content h2 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--fs-h2-alt);
  text-align: center;
  color: var(--clr-black);
  margin: 0 var(--space-xs);
}

.security-content img {
  max-height: clamp(300px, 55vh, 480px);
  width: auto;
  margin: 1.25rem 0 6.19rem;
  align-self: center;
}

.collapsible-card-container {
  display: flex;
  flex-direction: column;
  align-self: center;
  gap: 1rem;
  max-width: 500px;
  margin: 0 7.2vw 10vh;
}

.collapsible-card {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem;
  gap: 1rem;
  background: var(--clr-white);
  box-shadow: 3.35422px 3.35422px 20.1253px #0003;
  border-radius: 16.7711px;
}

.collapsible-card div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
}

.collapsible-card h4 {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.81rem;
  color: var(--clr-text-heading);
  line-height: 1.5rem;
  position: relative;
  z-index: 1;
  margin-bottom: 0;
}

.collapsible-card ul {
  display: grid;
  gap: 1rem;
  list-style: none;
  cursor: default;
  max-height: 0;
  overflow: hidden;
  /* MODIFICATION: Standardized transition */
  transition: max-height var(--duration-medium) var(--ease-standard),
    padding var(--duration-medium) var(--ease-standard);
  padding: 0;
}

.collapsible-card.active ul {
  max-height: 50vh;
  padding: 1rem 0;
}

.collapsible-card li {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 12px;
  color: var(--clr-accent);
  position: relative;
  padding-left: 0.5rem;
}

.collapsible-card li::before {
  content: "•";
  position: absolute;
  left: 0;
}

.collapsible-card svg {
  min-width: 20px;
  max-width: 20px;
  margin: 0;
}

.arrow {
  /* MODIFICATION: Standardized transition. Added will-change. */
  transition: transform var(--duration-medium) var(--ease-standard);
  will-change: transform;
  transform-origin: 10.0627px 9.85292px;
}

.collapsible-card.active .arrow {
  transform: rotate(180deg);
  transform-origin: 10.0627px 9.85292px;
}

/* ... (download section structure) ... */
.download {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 7vh;
  position: relative;
  overflow: hidden;
}

.download-description {
  margin: 0 2vw;
  max-width: 650px;
}

.download::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: -200px;
  background-image: url(../assets/download-bg.png);
  background-size: cover;
  background-position: left;
  background-repeat: no-repeat;
  z-index: -1;
}

.download-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0 3.69rem;
}

.download-container h2 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--fs-h2);
  color: var(--clr-white);
  text-align: center;
  line-height: 125%;
  margin-bottom: 0.7rem;
}

.download-container p {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--fs-p-lg);
  text-align: center;
  color: var(--clr-white);
  line-height: 175%;
}

.download-container img {
  margin: 1.88rem 0 1rem;
  max-height: clamp(320px, 70vh, 600px);
  width: auto;
  max-width: 250px;
}

.download-buttons {
  display: flex;
  justify-content: space-between;
  gap: 0.81rem;
}

.download-buttons button {
  display: flex;
  padding: 0.81rem;
  gap: 6.44px;
  background: var(--clr-white);
  box-shadow: 1.29px 7.09px 19.33px #33333314;
  border-radius: 6.44px;
  /* MODIFICATION: Standardized transition */
  transition: transform var(--duration-medium) var(--ease-standard);
  will-change: transform;
}

.download-buttons button:active {
  /* MODIFICATION: Standardized active state */
  transform: scale(0.98) !important;
}

.download-buttons img {
  margin: 0;
}

.store-text {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 0.73rem;
  color: var(--clr-black);
  text-align: left;
}

.store-text span {
  font-weight: 500;
  font-size: 0.97rem;
  color: #1a1919;
}

/* ... (faq section structure) ... */
.faq-description {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-self: center;
  max-width: 80vw;
}

.faq-description h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.13rem;
  text-align: center;
  color: var(--clr-black);
  margin: 4.38rem 0 0.7rem;
}

.faq-description h2 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--fs-h2-faq);
  text-align: center;
  color: var(--clr-text-dark);
}

.faq-description p {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 0.79rem;
  text-align: center;
  color: var(--clr-text-muted);
  line-height: 1.3rem;
  margin: 0.63rem 0.5rem 1.25rem;
}

.faq-description img {
  max-height: clamp(300px, 57vh, 500px);
  width: auto;
  max-width: 250px;
}

/* MODIFICATION: Standardized FAQ button */
.faq-description button {
  padding: var(--space-sm) var(--space-lg);
  background: var(--clr-primary-light);
  border-radius: 15px;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: var(--fs-btn-mobile);
  color: var(--clr-white);
  margin: 1.25rem 0 3.75rem;
  transition: background-color var(--duration-medium) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
  will-change: transform, background-color;
}

/* MODIFICATION: Removed redundant focus style */

.faq-cards {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-self: center;
  max-width: 600px;
  gap: 0.75rem;
  margin: 0 4.53vw 10vh;
}

.faq-collapsible-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0.7rem 2.5rem;
  max-width: none;
  background: var(--clr-white);
  box-shadow: 3.35422px 3.35422px 20.1253px var(--clr-black-10);
  border-radius: 16.7711px;
  align-self: normal;
  border: 1px solid var(--clr-white);
  /* MODIFICATION: Standardized transition */
  transition: border-color var(--duration-medium) var(--ease-standard),
    padding-top var(--duration-medium) var(--ease-standard),
    background-color var(--duration-medium) var(--ease-standard);
  cursor: pointer;
}

.faq-collapsible-card h4 {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.81rem;
  color: var(--clr-text-heading);
  min-height: 1.5rem;
  padding: 0.5rem 0;
}

.faq-collapsible-card h4 span {
  font-weight: 700;
}

.faq-collapsible-card ul {
  display: grid;
  gap: 0.1rem;
  list-style: none;
  cursor: default;
  max-height: 0;
  overflow: hidden;
  /* MODIFICATION: Standardized transition */
  transition: max-height var(--duration-medium) var(--ease-standard),
    padding var(--duration-medium) var(--ease-standard);
  padding: 0;
}

.faq-collapsible-card.active {
  border-color: var(--clr-primary);
  padding-top: 1.5rem;
  background: var(--clr-black-02);
}

.faq-collapsible-card.active ul {
  max-height: 50vh;
  padding: 1rem 0;
}

.faq-collapsible-card li {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.75rem;
  color: var(--clr-text-heading);
  position: relative;
  padding-left: 0.5rem;
}

.faq-collapsible-card li::before {
  content: "•";
  position: absolute;
  left: 0;
}

/* ... (footer structure) ... */
.footer-mobile {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: url(../assets/footer-bg.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.rahatipay-logo-footer {
  width: 230px;
  margin-top: 2.81rem;
}

.footer-download {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 0.81rem;
  text-align: center;
  color: var(--clr-text-body);
  margin: 0.63rem 0 1.5rem;
}

.download-buttons {
  margin-bottom: 1rem;
}

.download-buttons.footer button {
  border: 1px solid var(--clr-text-body);
  filter: drop-shadow(1.29px 7.09px 19.33px #33333314);
  border-radius: 6.44px;
  background: none;
  box-shadow: none;
  gap: 10px;
  padding: 8px;
  width: 131px;
}

.download-buttons.footer .store-text,
.download-buttons.footer .store-text span {
  color: var(--clr-text-body);
}

.download-buttons.footer .store-text span {
  font-weight: 700;
  font-size: 1rem;
}

.anchor {
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 1.25rem;
  text-align: center;
  color: var(--clr-text-body);
  margin: 0.4rem 0;
}

.social {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  gap: 1.88rem;
  margin: 1.88rem 0;
}

.copyrights {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 0.88rem;
  text-align: center;
  color: var(--clr-text-body);
  margin-bottom: 1.69rem;
}

@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;
  }
}


  .desktop-download-button:active {
    transform: scale(0.98) translateY(0);
  }
    .security-content button:active {
    transform: scale(0.98) translateY(0);
  }
    .download-buttons button:active {
    transform: scale(0.98) translateY(0) !important;
  }
    .button-download:active {
  transform: scale(0.98) translateY(0) !important;
}
.join-waiting-list:active {
  transform: scale(0.98) translateY(0);
}
.faq-description button:active {
  transform: scale(0.98) translateY(0);
}


/* MODIFICATION: Removed redundant focus styles, as they are now global */

.desktop-nav-items,
.desktop-download-button,
.rahatipay-hero-desktop,
.rahatipay-secure-desktop,
.security-description-desktop,
.rahatipay-download-desktop,
.rahatipay-faq-desktop,
.faq-answers-img-container,
.footer-desktop,
.bottom-cta {
  display: none;
}

/* --- Desktop Styles --- */
@media (min-width: 992px) {
  header {
    display: flex;
    flex-direction: column;
    height: 110vh;
  }

  .navbar {
    align-self: center;
    min-width: 914px;
    margin-bottom: 8%;
    z-index: 1;
  }

  .desktop-nav-items {
    display: flex;
    justify-content: space-between;
    width: 353px;
  }

  /* NEW: Added hover state for desktop nav links */
  .desktop-nav-items a {
    font-family: var(--font-primary);
    font-style: normal;
    font-weight: 400;
    font-size: var(--fs-nav-desktop);
    color: var(--clr-text-light);
    transition: color var(--duration-medium) var(--ease-standard);
  }

  .desktop-nav-items a:hover {
    color: var(--clr-text-light-hover);
  }

  .desktop-download-button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: var(--fs-btn-desktop);
    padding: 10px 30px;
    gap: 10px;
    background: var(--clr-white-10);
    border: 1px solid var(--clr-white-30);
    border-radius: 15px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 4px 30px var(--clr-black-10);
    font-family: var(--font-primary);
    font-style: normal;
    font-weight: 400;
    color: var(--clr-white-60);
    /* NEW: Added transitions for desktop button */
    transition: background-color var(--duration-medium) var(--ease-standard),
      color var(--duration-medium) var(--ease-standard),
      transform var(--duration-fast) var(--ease-standard);
  }

  .desktop-download-button:hover {
    background: var(--clr-white-30);
    color: var(--clr-white);
    transform: translateY(-2px);
  }

  .desktop-download-button:active {
    transform: scale(0.98) translateY(0);
  }

  .hero {
    display: flex;
    justify-content: center;
    padding: 0 8.5rem;
  }

  .hero-content {
    align-items: flex-start;
    gap: 1rem;
    justify-content: center;
    margin-top: -18%;
    max-width: 600px;
  }

  .hero-content h1 {
    font-family: var(--font-primary);
    font-style: normal;
    font-weight: 900;
    text-align: left;
    margin: 0;
  }

  .hero-content p {
    font-family: var(--font-primary);
    font-style: normal;
    text-align: left;
    font-weight: 400;
    width: 450px;
    margin: 0;
  }

  .cta {
    flex-direction: row;
    gap: 0.75rem;
    margin: 0;
    margin-top: 0.5rem;
  }

  .cta button {
    font-size: var(--fs-btn-desktop);
    font-weight: 400;
    padding: 0.75rem 2.5rem;
    border-radius: 10px;
    min-width: 0;
  }

  /* MODIFICATION: Desktop hover states already covered by base class definitions */

  .cta .join-waiting-list {
    padding: 0.5rem 1.5rem;
  }

  .join-waiting-list:hover {
    background: var(--clr-primary);
    color: var(--clr-white);
    /* transform is already applied by base class */
  }

  .rahatipay-hero-desktop {
    display: block;
    max-height: 85vh;
    margin-top: -7%;
  }

  .service-cards {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    margin-top: 5rem;
    margin-bottom: 6rem;
  }

  .card {
    padding: 2rem;
    gap: 0.75rem;
    background: var(--clr-white);
    box-shadow: -2px -11px 15px #60269e26 2px 11px 15px #33333326;
    border-radius: 20px;
    width: 22vw;
    height: 22vw;
    max-height: 220px;
  }

  .card img {
    min-height: 60px;
  }

  .card h3 {
    font-weight: 500;
    min-width: 153px;
  }

  .card p {
    font-weight: 300;
  }

  .rahatipay-secure-desktop,
  .security-description-desktop {
    display: block;
  }

  .security {
    display: flex;
    justify-content: center;
  }

  .security-content {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    justify-content: flex-end;
  }

  .security-content .collapsible-card,
  .security-content h2 {
    margin: 0;
  }

  .collapsible-card-container {
    align-self: unset;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 45%;
    min-height: 58%;
    gap: 1rem;
    padding: 2rem 0 1rem;
    margin: 0;
  }

  .collapsible-card {
    width: 320px;
    padding: 1rem 1.25rem;
  }

  .collapsible-card.active ul {
    padding: 0.5rem 0;
  }

  .security {
    margin-bottom: 15vh;
  }

  .security-content h2 {
    font-family: var(--font-primary);
    font-style: normal;
    font-weight: 900;
    text-align: left;
    color: var(--clr-black);
    margin-bottom: 1rem;
  }

  .security-content p {
    font-family: var(--font-primary);
    font-style: normal;
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 150%;
    color: var(--clr-text-muted);
    margin-bottom: 1rem;
  }

  /* MODIFICATION: Standardized desktop button */
  .security-content button {
    padding: 12px 26px;
    background: var(--clr-primary-light);
    border-radius: 10px;
    font-family: var(--font-primary);
    font-style: normal;
    font-weight: 400;
    font-size: var(--fs-btn-desktop);
    margin-top: 0.5rem;
    color: var(--clr-white);
    transition: background-color var(--duration-medium) var(--ease-standard),
      transform var(--duration-fast) var(--ease-standard);
  }

  .security-content button:hover {
    background: var(--clr-primary-dark);
    transform: translateY(-2px);
  }

  .security-content button:active {
    transform: scale(0.98) translateY(0);
  }

  .rahatipay-secure-desktop {
    max-height: 93vh;
  }

  .download {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 120vh;
    gap: 10vw;
  }

  .download::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    background-image: url(../assets/download-bg.png);
    background-repeat: no-repeat;
    background-position: center left;
    background-size: cover;
    z-index: -1;
  }

  .download-container {
    gap: 1rem;
    width: 450px;
  }

  .download-description {
    margin: 0;
  }

  .download-container h2 {
    font-family: var(--font-primary);
    font-style: normal;
    font-weight: 700;
    line-height: 53px;
    text-align: left;
    margin: 0;
    width: unset;
  }

  .download-container p {
    font-family: var(--font-primary);
    font-style: normal;
    font-weight: 300;
    line-height: 174.69%;
    text-align: left;
    margin: 0;
    width: unset;
  }

  .download-container .download-buttons {
    align-self: flex-start;
    margin: 1rem 0 0;
  }

  /* NEW: Added desktop hover for download buttons */
  .download-buttons button:hover {
    transform: translateY(-3px);
  }

  .download-buttons button:active {
    transform: scale(0.98) translateY(0) !important;
  }

  .rahatipay-download-desktop {
    display: block;
    max-height: 93vh;
  }

  .faq {
    display: flex;
    flex-direction: column;
    margin-top: 20vh;
  }

  .faq-content {
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: center;
    gap: 5vw;
    margin: 0 3rem;
    max-width: 1200px;
  }

  .faq-description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
    gap: 1.5rem;
    width: 600px;
  }

  .faq-description h3 {
    font-family: var(--font-primary);
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 118.69%;
    text-align: left;
    margin: 0;
  }

  .faq-description h2 {
    font-family: var(--font-primary);
    font-style: normal;
    font-weight: 900;
    line-height: 121.69%;
    text-align: left;
    margin: 0;
  }

  .faq-description p {
    font-family: var(--font-primary);
    font-style: normal;
    font-weight: 300;
    font-size: var(--fs-p-lg);
    line-height: 151.19%;
    text-align: left;
    margin: 0;
  }

  /* MODIFICATION: Standardized desktop button */
  .faq-description button {
    align-self: flex-start;
    padding: 15px 30px;
    background: var(--clr-primary-light);
    border-radius: 15px;
    font-family: var(--font-primary);
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 21px;
    margin: 0;
    color: var(--clr-white);
  }

  .faq-description button:hover {
    background: var(--clr-primary-dark);
  }

  .line {
    align-self: center;
    width: 85vw;
    height: 0;
    border: 0.25px solid #738999;
    margin: 4rem 0;
  }

  .rahatipay-faq-desktop {
    display: block;
    flex: 1;
  }

  .rahatipay-faq-desktop img {
    max-height: 92vh;
  }

  .faq-answers {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-bottom: 20vh;
    min-height: 0;
  }

  .faq-answers-img-container {
    display: flex;
    justify-content: center;
  }

  .faq-answers img {
    max-height: 100vh;
    object-fit: contain;
  }

  .bottom-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 15vh;
  }

  .bottom-cta-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3vh;
    background: var(--clr-accent-05);
    border-bottom: 7px solid #2d2d2d59;
    border-radius: 50px;
    padding: 10vh 5vw 5vh;
    width: 75vw;
    max-width: 1200px;
  }

  .bottom-cta-container h1 {
    font-family: var(--font-primary);
    font-style: normal;
    font-weight: 900;
    font-size: 2rem;
    color: var(--clr-primary);
    text-align: center;
  }

  .bottom-cta-container p {
    font-family: var(--font-primary);
    font-style: normal;
    font-weight: 400;
    font-size: 1.05rem;
    line-height: 160%;
    text-align: center;
    color: var(--clr-text-muted);
  }

  .bottom-cta-container .download-buttons button {
    border: 1px solid var(--clr-primary);
    border-radius: 6.44px;
    padding: 8px;
    gap: 10px;
    margin: 0;
  }

  .bottom-cta-container .download-buttons button .store-text span {
    font-weight: 700;
    font-size: 1rem;
  }

  .footer-desktop {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10vh 10vw 5vh 15vw;
    background-image: url(../assets/footer-bg-desktop.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .footer-top-container,
  .footer-bottom-container {
    display: flex;
    gap: 10vw;
  }

  .footer-top-container {
    gap: 10vw;
    margin-bottom: 10vh;
  }

  .footer-top-container h3 {
    font-family: var(--font-primary);
    font-style: normal;
    font-weight: 900;
    font-size: 1.5rem;
    color: var(--clr-primary);
  }

  .footer-top-container div {
    display: flex;
    flex-direction: column;
    gap: 4vh;
  }

  .footer-top-container div ul {
    display: flex;
    flex-direction: column;
    gap: 2vh;
  }

  .footer-top-container h4 {
    font-family: var(--font-primary);
    font-style: normal;
    font-weight: 700;
    font-size: 1rem;
    color: var(--clr-text-body);
    white-space: nowrap;
  }

  /* NEW: Added hover state for footer links */
  .footer-top-container li {
    font-family: var(--font-secondary);
    font-style: normal;
    font-weight: 400;
    font-size: 0.75rem;
    color: var(--clr-text-body);
    transition: color var(--duration-medium) var(--ease-standard);
  }

  .footer-top-container li:hover {
    color: var(--clr-primary);
  }

  .footer-bottom-container {
    justify-content: space-between;
    align-items: center;
  }

  .footer-bottom-container .social,
  .footer-bottom-container .copyrights {
    margin: 0;
  }

  .copyrights {
    font-family: var(--font-primary);
    font-style: normal;
    font-weight: 400;
    font-size: 0.75rem;
    white-space: nowrap;
  }

  .legal {
    font-family: var(--font-primary);
    font-style: normal;
    font-weight: 400;
    font-size: 0.75rem;
    color: var(--clr-text-body);
    white-space: nowrap;
  }

  .social {
    gap: 2.75rem;
  }

  /* NEW: Added hover state for social icons */
  .social img {
    min-width: fit-content;
    transition: transform var(--duration-medium) var(--ease-standard);
  }

  .social a:hover img {
    transform: scale(1.1) translateY(-2px);
  }

  /* MODIFICATION: Kept original desktop-specific hovers */

  .button-download:hover {
    background: var(--clr-primary-dark);
    /* transform is already applied by base class */
  }

  .button-download:active {
    transform: scale(0.98) translateY(0) !important;
  }

  .join-waiting-list:hover {
    background: var(--clr-primary);
    color: var(--clr-white);
    transform: translateY(-2px);
  }

  .join-waiting-list:active {
    transform: scale(0.98) translateY(0);
  }

  /* NEW: Hover/focus state for cards. Add tabindex="0" to card in HTML if it's not a link. */
  .card:hover,
  .card:focus-visible {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px var(--clr-primary-light-20),
      0 2px 6px var(--clr-primary-light-20);
  }

  .faq-description button:hover {
    background: var(--clr-primary-dark);
    transform: translateY(-2px);
  }

  .faq-description button:active {
    transform: scale(0.98) translateY(0);
  }

  .button-download:hover {
    background: var(--clr-primary-dark);
    transform: translateY(-2px);
  }

  .download-buttons button:hover {
    transform: translateY(-2px);
  }

  .download-buttons button:active {
    transform: translateY(0) !important;
  }

  .faq-description button:hover {
    background: #7968f5;
  }

  .humburger-container,
  .rahatipay-hero-mobile,
  .rahatipay-secure-mobile,
  .rahatipay-download-mobile,
  .rahatipay-faq-mobile,
  .footer-mobile {
    display: none;
  }
}