:root {
  --forest: #1b4332;
  --forest-light: #2d6a4f;
  --gold: #e9b44c;
  --gold-deep: #c98a1f;
  --cream: #f7f6f1;
  --surface: #ffffff;
  --surface-alt: #efede4;
  --outline: #d8d5c7;
  --text: #1b1e1a;
  --text-soft: #5b6058;
  --on-trail: #2d9d6f;
  --radius: 18px;
  --shadow: 0 20px 50px -25px rgba(27, 67, 50, 0.35);
  --container: 1080px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Tajawal", "Segoe UI", Tahoma, sans-serif;
  background: var(--cream);
  color: var(--text);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

/* ---------- Nav ---------- */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(247, 246, 241, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--outline);
}

.site-nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  color: var(--forest);
}

.brand img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
}

.nav-links {
  display: flex;
  gap: 28px;
  font-size: 0.95rem;
  color: var(--text-soft);
}

.nav-links a {
  text-decoration: none;
  transition: color 0.2s ease;
}

.nav-links a:hover {
  color: var(--forest);
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: 88px 64px;
  background:
    radial-gradient(1100px 420px at 85% -10%, rgba(233, 180, 76, 0.16), transparent 60%),
    radial-gradient(900px 500px at 15% 110%, rgba(27, 67, 50, 0.12), transparent 60%);
}

.hero .container {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}

.trail-line {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.5;
  pointer-events: none;
}

.hero-copy {
  position: relative;
  z-index: 1;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--forest);
  background: rgba(45, 157, 111, 0.12);
  border: 1px solid rgba(45, 157, 111, 0.28);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 22px;
}

.eyebrow .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--on-trail);
}

.hero h1 {
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  line-height: 1.15;
  margin: 0 0 18px;
  color: var(--forest);
  font-weight: 800;
}

.hero .subtitle {
  font-size: 1.25rem;
  color: var(--text-soft);
  margin: 0 0 34px;
  max-width: 46ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-bottom: 30px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 700;
  text-decoration: none;
  padding: 16px 30px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.btn-primary {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%);
  color: #241a05;
  box-shadow: 0 14px 30px -12px rgba(201, 138, 31, 0.65);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -12px rgba(201, 138, 31, 0.75);
}

.btn-secondary {
  background: var(--forest);
  color: var(--cream);
}

.btn-secondary:hover {
  background: var(--forest-light);
}

.btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.meta-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip {
  font-size: 0.85rem;
  color: var(--text-soft);
  background: var(--surface);
  border: 1px solid var(--outline);
  padding: 8px 14px;
  border-radius: 999px;
}

.chip strong {
  color: var(--forest);
}

.hero-art {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
}

.phone-frame {
  width: min(280px, 70vw);
  aspect-ratio: 9 / 18;
  background: linear-gradient(160deg, var(--forest) 0%, #0e1512 100%);
  border-radius: 44px;
  padding: 14px;
  box-shadow: var(--shadow);
  position: relative;
}

.phone-frame::before {
  content: "";
  position: absolute;
  top: 26px;
  right: 50%;
  transform: translateX(50%);
  width: 46px;
  height: 5px;
  border-radius: 3px;
  background: rgba(247, 246, 241, 0.25);
}

.phone-screen {
  width: 100%;
  height: 100%;
  border-radius: 30px;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.phone-screen img {
  width: 58%;
  filter: drop-shadow(0 10px 24px rgba(27, 67, 50, 0.35));
}

/* ---------- Sections ---------- */

section {
  padding-block: 84px;
}

.section-head {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: 48px;
}

.section-head .kicker {
  color: var(--gold-deep);
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  display: block;
  margin-bottom: 10px;
}

.section-head h2 {
  font-size: clamp(1.8rem, 3vw, 2.3rem);
  color: var(--forest);
  margin: 0 0 12px;
  font-weight: 800;
}

.section-head p {
  color: var(--text-soft);
  margin: 0;
}

/* ---------- Features ---------- */

.features {
  background: var(--surface);
  border-block: 1px solid var(--outline);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
}

.feature-card {
  background: var(--cream);
  border: 1px solid var(--outline);
  border-radius: var(--radius);
  padding: 26px 22px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease, border-color 0.2s ease;
}

.feature-card.in-view {
  opacity: 1;
  transform: translateY(0);
}

.feature-card:hover {
  border-color: var(--gold);
}

.feature-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(27, 67, 50, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--forest);
}

.feature-icon svg {
  width: 22px;
  height: 22px;
}

.feature-card h3 {
  font-size: 1.05rem;
  margin: 0 0 8px;
  color: var(--text);
}

.feature-card p {
  font-size: 0.92rem;
  color: var(--text-soft);
  margin: 0;
}

/* ---------- Download ---------- */

.download {
  background: linear-gradient(150deg, var(--forest) 0%, #0e1512 100%);
  color: var(--cream);
  border-radius: 28px;
  margin-inline: 24px;
  max-width: calc(var(--container) - 48px);
  margin-inline-start: auto;
  margin-inline-end: auto;
  padding: 56px 40px;
  position: relative;
  overflow: hidden;
}

.download::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 300px at 90% 0%, rgba(233, 180, 76, 0.18), transparent 60%);
  pointer-events: none;
}

.download-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: center;
}

.download h2 {
  font-size: 1.9rem;
  margin: 0 0 12px;
  font-weight: 800;
}

.download p {
  color: rgba(247, 246, 241, 0.78);
  margin: 0 0 26px;
  max-width: 46ch;
}

.download-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}

.fact {
  background: rgba(247, 246, 241, 0.08);
  border: 1px solid rgba(247, 246, 241, 0.16);
  border-radius: 14px;
  padding: 14px 16px;
}

.fact span {
  display: block;
  font-size: 0.78rem;
  color: rgba(247, 246, 241, 0.6);
  margin-bottom: 4px;
}

.fact strong {
  font-size: 0.98rem;
  word-break: break-all;
  color: var(--gold);
}

.install-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: rgba(247, 246, 241, 0.08);
  border: 1px solid rgba(247, 246, 241, 0.16);
  border-radius: 16px;
  padding: 18px 20px;
  font-size: 0.9rem;
  color: rgba(247, 246, 241, 0.85);
}

.install-note svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--gold);
}

.download-panel {
  background: rgba(247, 246, 241, 0.06);
  border: 1px solid rgba(247, 246, 241, 0.18);
  border-radius: 20px;
  padding: 32px 26px;
  text-align: center;
}

.download-panel img {
  width: 84px;
  margin-inline: auto;
  margin-bottom: 18px;
  border-radius: 20px;
}

.download-panel .btn-primary {
  width: 100%;
  justify-content: center;
  margin-bottom: 12px;
}

.download-panel .hint {
  font-size: 0.8rem;
  color: rgba(247, 246, 241, 0.6);
}

/* ---------- Showcase ---------- */

.showcase-section {
  padding-block: 64px 76px;
}

/* Mobile-first: a horizontal swipe carousel, one full poster centered at a
   time — the previous raw-screenshot gallery broke on mobile by cramming
   several images side by side, so this section deliberately never does
   that below the desktop breakpoint. The negative margin cancels
   .container's own inline padding so the carousel can bleed edge-to-edge
   and its own padding-inline (computed from the viewport, not a percentage
   of itself) centers the first/last card the same way scroll-snap centers
   every card in between. */
.showcase-carousel {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  margin-inline: -24px;
  padding-inline: calc((100vw - min(92vw, 420px)) / 2);
  padding-block: 4px 10px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.showcase-carousel::-webkit-scrollbar {
  display: none;
}

.showcase-card {
  flex: 0 0 auto;
  width: min(92vw, 420px);
  scroll-snap-align: center;
  text-align: center;
}

/* No object-fit: fill and no fixed height anywhere here — every poster
   keeps its own native proportions, full width, height auto. The images
   already contain their own finished visual composition (frame, glow,
   captions baked in), so no extra decorative border/frame is layered on
   top — just rounding + the same soft shadow the rest of the site uses. */
.showcase-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 20px;
  box-shadow: var(--shadow);
  background: var(--forest);
}

.showcase-card h3 {
  margin: 16px 4px 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--forest);
}

.showcase-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
}

.showcase-dots {
  display: flex;
  gap: 8px;
}

.showcase-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--outline);
  transition: background 0.25s ease, transform 0.25s ease;
}

.showcase-dot.is-active {
  background: var(--gold-deep);
  transform: scale(1.3);
}

.showcase-swipe-text {
  font-size: 0.85rem;
  color: var(--text-soft);
}

/* Desktop/tablet-wide: a tasteful 2x2 grid — each poster stays large
   enough to read, never shrunk into a thin strip. Scroll-snap and the
   swipe hint are meaningless once every image is visible at once. */
@media (min-width: 861px) {
  .showcase-carousel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
    overflow: visible;
    scroll-snap-type: none;
    margin-inline: 0;
    padding-inline: 0;
    padding-block: 0;
  }

  .showcase-card {
    width: 100%;
  }

  .showcase-hint {
    display: none;
  }
}

/* ---------- Developer ---------- */

#developer {
  padding-block: 28px 64px;
}

.developer-card {
  position: relative;
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: 26px;
  box-shadow: var(--shadow);
  padding: 48px 40px 40px;
  overflow: hidden;
}

.developer-accent {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--gold) 25%, var(--gold-deep) 50%, var(--gold) 75%, transparent);
}

.developer-kicker {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--gold-deep);
  letter-spacing: 0.02em;
  margin-bottom: 14px;
}

.developer-name {
  margin: 0 0 6px;
  font-size: clamp(1.6rem, 3.4vw, 2.1rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--forest);
}

.developer-role {
  margin: 0 0 18px;
  font-size: 0.9rem;
  color: var(--text-soft);
}

.developer-text {
  margin: 0 auto 30px;
  max-width: 42ch;
  color: var(--text-soft);
  font-size: 0.98rem;
}

/* Mobile-first: each contact is always its own full row (never two
   side by side) — a fixed pill-row that only becomes an inline pill once
   there's genuinely enough width for two of them side by side (see the
   min-width:640px override below). */
.developer-contacts {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.developer-contact {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 360px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--cream);
  border: 1px solid var(--outline);
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

/* Icon size is locked down at three levels (wrapper span, its width/
   height/min/max, and flex-basis) so it can never inherit or stretch to
   fill the row, regardless of the contact value's length. */
.developer-contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  min-width: 21px;
  max-width: 21px;
  min-height: 21px;
  max-height: 21px;
  flex: 0 0 21px;
  color: var(--forest);
  transition: color 0.2s ease, transform 0.2s ease;
}

.developer-contact-icon svg {
  width: 21px;
  height: 21px;
  min-width: 21px;
  max-width: 21px;
  min-height: 21px;
  max-height: 21px;
  flex-shrink: 0;
  display: block;
}

.developer-contact:hover {
  border-color: var(--gold);
  background: var(--surface);
  transform: translateY(-2px);
  color: var(--forest);
}

.developer-contact:hover .developer-contact-icon {
  color: var(--gold-deep);
  transform: scale(1.08);
}

.developer-contact-value {
  unicode-bidi: plaintext;
  overflow-wrap: break-word;
  min-width: 0;
}

@media (min-width: 640px) {
  .developer-contacts {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
  }

  .developer-contact {
    width: auto;
    max-width: none;
    padding: 12px 20px;
    border-radius: 999px;
  }
}

/* ---------- Footer ---------- */

footer {
  padding-block: 40px 36px;
  border-top: 1px solid var(--outline);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: var(--forest);
}

.footer-brand img {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}

.footer-links {
  display: flex;
  gap: 22px;
  font-size: 0.9rem;
  color: var(--text-soft);
}

.footer-links a {
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--forest);
}

.footer-copyright {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 14px;
  font-size: 0.82rem;
  color: var(--text-soft);
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--outline);
  text-align: center;
}

.footer-copyright-dev {
  font-weight: 600;
  color: var(--text-soft);
}

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
  .hero .container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-copy .subtitle {
    margin-inline: auto;
  }

  .hero-actions,
  .meta-chips {
    justify-content: center;
  }

  .hero-art {
    order: -1;
  }

  .download-inner {
    grid-template-columns: 1fr;
  }

  .nav-links {
    display: none;
  }
}

@media (max-width: 520px) {
  .download {
    margin-inline: 12px;
    padding: 36px 22px;
  }

  .download-facts {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  #developer {
    padding-block: 16px 40px;
  }

  #developer .container {
    padding-inline: 20px;
  }

  .developer-card {
    width: calc(100% - 32px);
    max-width: 430px;
    margin-inline: auto;
    padding: 24px 20px;
  }

  .developer-kicker {
    margin-bottom: 12px;
  }

  .developer-name {
    margin-bottom: 8px;
  }

  .developer-role {
    margin-bottom: 14px;
  }

  .developer-text {
    margin-bottom: 22px;
  }

  .developer-contact-value {
    font-size: 0.9rem;
  }

  .footer-inner {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 14px;
  }

  .footer-links {
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 10px;
  }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Legal page ---------- */

.legal {
  max-width: 760px;
  margin-inline: auto;
  padding-block: 64px 96px;
}

.legal h1 {
  color: var(--forest);
  font-size: 2rem;
  margin-bottom: 6px;
}

.legal .updated {
  color: var(--text-soft);
  font-size: 0.88rem;
  margin-bottom: 40px;
}

.legal h2 {
  color: var(--forest);
  font-size: 1.25rem;
  margin-top: 40px;
}

.legal p,
.legal li {
  color: var(--text-soft);
}

.legal ul {
  padding-inline-start: 22px;
}

.legal a {
  color: var(--forest-light);
}