/* ==========================================================================
   Tamenna — landing page
   Tokens and components follow "Tamenna Web Design System" v1.
   Latin sets in Nunito, Arabic in Tajawal at one step larger line-height.
   ========================================================================== */

:root {
  /* Brand ---------------------------------------------------------------- */
  --t-green:        #0B7A58;
  --t-green-dark:   #095F45;
  --t-sage:         #7CC8A3;
  --t-coral:        #FF7D79;
  --t-yellow:       #FFD48A;
  --t-yellow-dark:  #FFC873;
  --t-ink:          #1F2937;
  --t-cream:        #FFF9F2;
  --t-mint:         #E6F4EE;
  --t-mint-dark:    #D4EBE0;
  --t-mint-border:  #D2E9DF;
  --t-alert:        #E84545;
  --t-success:      #16A34A;

  /* Text ----------------------------------------------------------------- */
  --t-body:         #41544C;
  --t-muted:        #4B5563;
  --t-subtle:       #6B7280;
  --t-on-green:     #DCF0E7;
  --t-field-border: #D8E7DF;

  /* Layout --------------------------------------------------------------- */
  --t-max:          1160px;
  --t-gutter:       clamp(20px, 4vw, 32px);
  --t-band-y:       clamp(56px, 9vw, 88px);

  /* Elevation ------------------------------------------------------------ */
  --t-shadow-phone:       0 20px 48px rgba(11, 122, 88, .14);
  --t-shadow-phone-hover: 0 30px 60px rgba(11, 122, 88, .2);
  --t-shadow-watch:       0 14px 32px rgba(31, 41, 55, .2);

  /* Motion --------------------------------------------------------------- */
  --t-ease: cubic-bezier(.2, .7, .3, 1);

  /* Type — Latin (default) ----------------------------------------------- */
  --font-ui:  Nunito, system-ui, -apple-system, sans-serif;
  --font-alt: Tajawal, sans-serif;           /* the *other* language's face */

  --brand-size:      20px;
  --brand-lh:        1.1;
  --brand-ls:        -.01em;

  --eyebrow-size:    13px;
  --eyebrow-ls:      .16em;
  --eyebrow-tt:      uppercase;

  --h1-size:         clamp(36px, 7.4vw, 58px);
  --h1-lh:           1.05;
  --h1-ls:           -.03em;
  --h1-mt:           16px;

  --lede-size:       19px;
  --lede-lh:         1.65;
  --lede-mt:         22px;
  --lede-max:        480px;

  --h2-ls:           -.02em;
  --sub-size:        18px;
  --sub-lh:          normal;

  --form-mt:         32px;
  --field-py:        17px;
  --helper-size:     14px;

  --success-title:   19px;
  --success-body:    15.5px;
  --success-body-lh: 1.6;

  --step-title:      22px;
  --step-body:       16.5px;
  --step-body-lh:    1.65;

  --caption-size:    17px;

  --cta-title-lh:    1.15;
  --cta-body-size:   19px;
  --cta-body-lh:     1.6;
  --thanks-size:     19px;

  --footer-brand:    16px;
  --footer-brand-lh: 1.1;
  --footer-tagline:  16px;
}

/* Type — Arabic. Never letterspaced, one step more leading. ---------------- */
html[lang="ar"] {
  --font-ui:  Tajawal, sans-serif;
  --font-alt: Nunito, system-ui, sans-serif;

  --brand-size:      22px;
  --brand-lh:        1.2;
  --brand-ls:        normal;

  --eyebrow-size:    15px;
  --eyebrow-ls:      normal;
  --eyebrow-tt:      none;

  --h1-size:         clamp(34px, 6.8vw, 54px);
  --h1-lh:           1.25;
  --h1-ls:           normal;
  --h1-mt:           14px;

  --lede-size:       20px;
  --lede-lh:         1.9;
  --lede-mt:         20px;
  --lede-max:        500px;

  --h2-ls:           normal;
  --sub-size:        19px;
  --sub-lh:          1.9;

  --form-mt:         30px;
  --field-py:        16px;
  --helper-size:     15px;

  --success-title:   20px;
  --success-body:    16px;
  --success-body-lh: 1.8;

  --step-title:      23px;
  --step-body:       17px;
  --step-body-lh:    1.9;

  --caption-size:    18px;

  --cta-title-lh:    1.35;
  --cta-body-size:   20px;
  --cta-body-lh:     1.9;
  --thanks-size:     20px;

  --footer-brand:    18px;
  --footer-brand-lh: 1.2;
  --footer-tagline:  18px;
}

/* ==========================================================================
   Base
   ========================================================================== */

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

body {
  margin: 0;
  background: var(--t-cream);
}

.page {
  font-family: var(--font-ui);
  color: var(--t-ink);
  background: var(--t-cream);
}

.page.is-switching { animation: t-fade .25s ease both; }

a { color: var(--t-green); text-decoration: none; }
a:hover { color: var(--t-green-dark); }

h1, h2, h3, p { margin: 0; }

img { max-width: 100%; }

::placeholder { color: #9AA8A1; opacity: 1; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

:where(button, input, a):focus-visible {
  outline: 3px solid var(--t-green);
  outline-offset: 3px;
}

.wrap {
  max-width: var(--t-max);
  margin-inline: auto;
}

/* ==========================================================================
   Nav
   ========================================================================== */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: var(--t-max);
  margin-inline: auto;
  padding: 18px var(--t-gutter);
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.brand__mark {
  width: 38px;
  height: auto;
  display: block;
}

.brand__name {
  font-size: var(--brand-size);
  font-weight: 800;
  color: var(--t-green);
  letter-spacing: var(--brand-ls);
  line-height: var(--brand-lh);
}

.lang-switch {
  font-family: var(--font-alt);
  font-size: 16px;
  font-weight: 700;
  color: var(--t-green);
  background: var(--t-mint);
  border: none;
  border-radius: 999px;
  padding: 11px 20px;
  cursor: pointer;
  transition: background .2s ease;
}
.lang-switch:hover { background: var(--t-mint-dark); }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  max-width: var(--t-max);
  margin-inline: auto;
  padding: clamp(20px, 3vw, 36px) var(--t-gutter) clamp(48px, 7vw, 72px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 48px;
  align-items: center;
}

.eyebrow {
  font-size: var(--eyebrow-size);
  letter-spacing: var(--eyebrow-ls);
  text-transform: var(--eyebrow-tt);
  font-weight: 700;
  color: var(--t-green);
}

.hero__title {
  margin-top: var(--h1-mt);
  font-size: var(--h1-size);
  line-height: var(--h1-lh);
  font-weight: 800;
  letter-spacing: var(--h1-ls);
  text-wrap: pretty;
}

.lede {
  margin-top: var(--lede-mt);
  font-size: var(--lede-size);
  line-height: var(--lede-lh);
  color: var(--t-body);
  max-width: var(--lede-max);
  text-wrap: pretty;
}

.hero__art {
  min-width: 0;
  width: 100%;
}

.hero__art picture { display: block; }

.hero__img {
  animation: t-drift 11s ease-in-out infinite;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1.35;
  object-fit: cover;
  object-position: 50% 22%;
  border-radius: 32px;
}

/* Below 760px the hero collapses to one column and the art slides between
   the copy and the sign-up form. */
@media (max-width: 760px) {
  .hero__text { display: contents; }
  .hero__copy { order: 1; }
  .hero__art  { order: 2; }
  .hero__form { order: 3; }
}

/* ==========================================================================
   Waitlist form
   ========================================================================== */

.waitlist {
  margin-top: var(--form-mt);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 520px;
}

.waitlist[hidden] { display: none; }

.field {
  font-family: inherit;
  flex: 1;
  min-width: 200px;
  font-size: 17px;
  padding: var(--field-py) 24px;
  border: 2px solid var(--t-field-border);
  border-radius: 999px;
  background: #fff;
  color: var(--t-ink);
  outline: none;
}
.field:focus { border-color: var(--t-green); }

.btn {
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  border: none;
  border-radius: 999px;
  padding: var(--field-py) 30px;
  cursor: pointer;
  transition: transform .12s ease, background .2s ease;
}
.btn:active { transform: scale(.97); }

.btn--primary { color: #fff; background: var(--t-green); }
.btn--primary:hover { background: var(--t-green-dark); }

.btn--yellow { color: var(--t-green); background: var(--t-yellow); }
.btn--yellow:hover { background: var(--t-yellow-dark); }

/* Helper text sits below, never inside the field. */
.helper {
  margin-top: 14px;
  font-size: var(--helper-size);
  color: var(--t-subtle);
}

.field-error {
  margin-top: 14px;
  font-size: var(--helper-size);
  font-weight: 700;
  color: var(--t-alert);
}
.field-error--on-green { color: var(--t-yellow); }

.success {
  margin-top: var(--form-mt);
  max-width: 520px;
  animation: t-rise .45s var(--t-ease) both;
  background: var(--t-mint);
  border: 1px solid var(--t-mint-border);
  border-radius: 28px;
  padding: 24px 26px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.success[hidden] { display: none; }

.success__dot {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--t-success);
  flex: none;
}

.success__title {
  font-size: var(--success-title);
  font-weight: 800;
}

.success__body {
  font-size: var(--success-body);
  line-height: var(--success-body-lh);
  color: var(--t-body);
  margin-top: 4px;
}

/* ==========================================================================
   Bands & section headings
   ========================================================================== */

.band { padding: var(--t-band-y) var(--t-gutter); }
.band--mint  { background: var(--t-mint); }
.band--green { background: var(--t-green); color: #fff; }

.section__title {
  font-size: clamp(27px, 4.6vw, 38px);
  font-weight: 800;
  letter-spacing: var(--h2-ls);
}

.section__sub {
  margin-top: 12px;
  font-size: var(--sub-size);
  line-height: var(--sub-lh);
  color: var(--t-body);
  max-width: 520px;
}
.section__sub--wide { max-width: 560px; }

/* ==========================================================================
   How it works — steps are numbered, never icon-only
   ========================================================================== */

.steps {
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 22px;
}

.step {
  background: #fff;
  border-radius: 28px;
  padding: clamp(24px, 4vw, 32px);
}

.step__num {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--t-yellow);
  font-weight: 800;
  font-size: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step__title {
  font-size: var(--step-title);
  font-weight: 800;
  margin-top: 20px;
}

.step__body {
  margin-top: 8px;
  font-size: var(--step-body);
  line-height: var(--step-body-lh);
  color: var(--t-muted);
}

/* ==========================================================================
   App screens
   ========================================================================== */

.screens {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 28px;
  justify-items: center;
}

.screen {
  margin: 0;
  text-align: center;
}

.screen__stack {
  position: relative;
  width: 246px;
  max-width: 100%;
  margin-inline: auto;
}

.phone {
  width: 246px;
  max-width: 100%;
  margin-inline: auto;
  aspect-ratio: .462;
  background: var(--t-ink);
  border-radius: 38px;
  padding: 9px;
  box-shadow: var(--t-shadow-phone);
  transition: transform .45s var(--t-ease), box-shadow .45s ease;
}
.screen__stack .phone { width: 100%; }

.phone:hover {
  transform: translateY(-8px) rotate(-1.2deg);
  box-shadow: var(--t-shadow-phone-hover);
}

.phone picture,
.phone img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 30px;
}

.watch {
  position: absolute;
  inset-inline-end: -26px;
  bottom: 24px;
  width: 108px;
  background: var(--t-ink);
  border-radius: 26px;
  padding: 7px;
  box-shadow: var(--t-shadow-watch);
  animation: t-pulse 3.2s ease-in-out infinite;
}

.watch picture { display: block; }

.watch img {
  display: block;
  width: 100%;
  /* height must be reset: the img's height attribute lands as a
     presentational hint, and an explicit height beats aspect-ratio. */
  height: auto;
  aspect-ratio: .84;
  object-fit: cover;
  border-radius: 20px;
  background: #000;
}

.screen__cap {
  margin-top: 18px;
  font-size: var(--caption-size);
  font-weight: 700;
}

/* ==========================================================================
   Closing call to action
   ========================================================================== */

.cta {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

.cta__title {
  font-size: clamp(29px, 5.2vw, 42px);
  line-height: var(--cta-title-lh);
  font-weight: 800;
  letter-spacing: var(--h2-ls);
}

.cta__body {
  margin-top: 16px;
  font-size: var(--cta-body-size);
  line-height: var(--cta-body-lh);
  color: var(--t-on-green);
}

.waitlist--green { margin-inline: auto; }

.field--on-green {
  border-color: rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .12);
  color: #fff;
}
.field--on-green:focus { border-color: var(--t-yellow); }
.field--on-green::placeholder { color: rgba(255, 255, 255, .86); }

.thanks {
  margin: var(--form-mt) auto 0;
  max-width: 520px;
  animation: t-rise .45s var(--t-ease) both;
  background: rgba(255, 255, 255, .14);
  border-radius: 28px;
  padding: 22px;
  font-size: var(--thanks-size);
  font-weight: 700;
}
.thanks[hidden] { display: none; }

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  padding: 40px var(--t-gutter);
  max-width: var(--t-max);
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.brand--footer .brand__mark { width: 32px; }

.brand--footer .brand__name {
  font-size: var(--footer-brand);
  line-height: var(--footer-brand-lh);
}

.footer__tagline {
  font-size: var(--footer-tagline);
  color: var(--t-body);
}

.footer__legal {
  font-size: 14px;
  color: var(--t-subtle);
}
html[lang="ar"] .footer__legal { font-family: Nunito, system-ui, sans-serif; }

/* ==========================================================================
   Scroll reveal — applied by JS so the page is complete without it
   ========================================================================== */

.js-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s var(--t-ease);
}
.js-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   Keyframes
   ========================================================================== */

@keyframes t-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes t-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes t-drift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

@keyframes t-pulse {
  0%, 100% { box-shadow: var(--t-shadow-watch); }
  50%      { box-shadow: var(--t-shadow-watch), 0 0 0 10px rgba(255, 125, 121, .16); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .js-reveal { opacity: 1; transform: none; }
}