:root {
      --ink: #273653;
      --ink-2: #34425f;
      --muted: #66718a;
      --soft: #f6f8ff;
      --line: rgba(52, 66, 95, .13);
      --white: #ffffff;
      --mint: #8be8c4;
      --mint-2: #dffbec;
      --violet: #9f8cff;
      --violet-2: #efeaff;
      --blue: #91d2ff;
      --yellow: #ffd46a;
      --danger: #ff6b6b;
      --radius: 28px;
      --shadow: 0 24px 80px rgba(39, 54, 83, .16);
      --shadow-soft: 0 14px 44px rgba(39, 54, 83, .10);
      --container: 1180px;
      --grad: linear-gradient(135deg, var(--mint) 0%, #b8f0d8 34%, #d8d0ff 100%);
      --grad-2: linear-gradient(135deg, #354260 0%, #263550 52%, #18243a 100%);
    }

    @font-face {
        font-family: "Nunito Sans";
        src: url("../fonts/NunitoSans-Variable.ttf") format("truetype");
        font-weight: 300 900;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: "Nunito Sans";
        src: url("../fonts/NunitoSans-Italic-Variable.ttf") format("truetype");
        font-weight: 300 900;
        font-style: italic;
        font-display: swap;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: "Nunito Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
      color: var(--ink);
      background:
        radial-gradient(circle at 10% 4%, rgba(139, 232, 196, .52), transparent 34rem),
        radial-gradient(circle at 90% 2%, rgba(159, 140, 255, .34), transparent 31rem),
        linear-gradient(180deg, #fbfdff 0%, #f7f9ff 45%, #ffffff 100%);
      line-height: 1.55;
      min-width: 320px;
    }

    html[lang^="ar"] body {
        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Arial, sans-serif;
    }

    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }
    button, input { font: inherit; }
    .page {
      overflow-x: hidden;
      overflow-y: visible;
    }
    .container { width: min(100% - 40px, var(--container)); margin: 0 auto; }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 50;
      backdrop-filter: blur(18px);
      background: rgba(255, 255, 255, .72);
      border-bottom: 1px solid rgba(52, 66, 95, .08);
    }
    .nav {
      min-height: 76px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 22px;
    }
    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 180px;
    }
    .brand-icon {
      width: 44px;
      height: 44px;
      border-radius: 14px;
      box-shadow: 0 10px 24px rgba(52, 66, 95, .18);
    }
    .brand-text { display: grid; line-height: 1.05; }
    .brand-name { font-weight: 900; letter-spacing: -.03em; font-size: 18px; }
    .brand-sub { color: var(--muted); font-size: 12px; font-weight: 700; }
    .nav-links {
      display: flex;
      align-items: center;
      gap: 8px;
      color: rgba(39, 54, 83, .77);
      font-size: 14px;
      font-weight: 750;
    }
    .nav-links a { padding: 10px 12px; border-radius: 999px; }
    .nav-links a:hover { background: rgba(159, 140, 255, .12); color: var(--ink); }
	
	.nav-menu {
	  flex: 1;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  gap: 10px;
	  min-width: 0;
	}

	.nav-menu .nav-links {
	  margin-inline: auto;
	}
	
	.nav-menu > .lang-switch {
	  margin-left: auto;
	}

	.nav-menu > .download-nav-btn {
	  flex: 0 0 auto;
	}

	.lang-switch {
	  display: inline-grid;
	  grid-template-columns: auto minmax(92px, 1fr);
	  align-items: center;
	  gap: 8px;
	  min-height: 44px;
	  padding: 7px 9px 7px 13px;
	  border-radius: 16px;
	  background: rgba(255,255,255,.74);
	  border: 1px solid rgba(52,66,95,.12);
	  box-shadow: 0 12px 30px rgba(52,66,95,.08);
	  color: var(--ink-2);
	  font-size: 18px;
	  font-weight: 900;
	}

	.lang-switch select {
	  width: 100%;
	  min-width: 0;
	  border: 0;
	  outline: 0;
	  background: transparent;
	  color: var(--ink);
	  font-weight: 900;
	  cursor: pointer;
	  text-align: left;
	  direction: ltr;
	}

	.lang-switch option {
	  direction: ltr;
	  text-align: left;
	}

	.menu-toggle {
	  display: none;
	  place-items: center;
	  width: 44px;
	  height: 24px;
	  padding: 0;
	  border: 0;
	  border-radius: 0;
	  background: transparent;
	  box-shadow: none;
	  cursor: pointer;
	}

	.menu-toggle span {
	  display: block;
	  width: 30px;
	  height: 3px;
	  margin: 2.5px 0;
	  border-radius: 99px;
	  background: var(--ink-2);
	  transition: transform .18s ease, opacity .18s ease;
	}

	.menu-open .menu-toggle span:nth-child(1) {
	  transform: translateY(8px) rotate(45deg);
	}

	.menu-open .menu-toggle span:nth-child(2) {
	  opacity: 0;
	}

	.menu-open .menu-toggle span:nth-child(3) {
	  transform: translateY(-8px) rotate(-45deg);
	}

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 52px;
      padding: 14px 22px;
      border: 0;
      border-radius: 18px;
      font-weight: 900;
      letter-spacing: -.01em;
      cursor: pointer;
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
      white-space: nowrap;
    }
    .btn:hover { transform: translateY(-2px); }
    .btn-primary {
      color: #18243a;
      background: linear-gradient(135deg, var(--mint) 0%, #d9ffd7 100%);
      box-shadow: 0 18px 40px rgba(80, 198, 151, .35);
    }
    .btn-dark {
      color: #fff;
      background: var(--ink-2);
      box-shadow: 0 18px 46px rgba(52, 66, 95, .28);
    }
    .btn-ghost {
      color: var(--ink);
      background: rgba(255, 255, 255, .74);
      border: 1px solid rgba(52, 66, 95, .13);
      box-shadow: 0 12px 34px rgba(52, 66, 95, .08);
    }
    .store-buttons { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
    .store-button {
      min-width: 184px;
      justify-content: flex-start;
      padding: 12px 17px;
      gap: 12px;
      background: #101827;
      color: #fff;
      box-shadow: 0 18px 46px rgba(16, 24, 39, .22);
    }
	.store-button .store-icon {
	  display: grid;
	  place-items: center;
	  width: 30px;
	  height: 30px;
	  flex: 0 0 30px;
	  border-radius: 10px;
	  background: rgba(255,255,255,.12);
	}

	.store-button .store-icon img {
	  width: 18px;
	  height: 18px;
	  object-fit: contain;
	  display: block;
	}
    .store-button small {
      display: block;
      color: rgba(255, 255, 255, .66);
      font-size: 11px;
      font-weight: 800;
      line-height: 1.1;
    }
    .store-button b { display: block; font-size: 15px; line-height: 1.1; }

    .hero {
      position: relative;
      padding: 74px 0 82px;
    }
    .hero-bg {
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: .45;
      background-image: url('../images/bg-w-1.webp');
      background-size: 760px auto;
      background-repeat: no-repeat;
      background-position: right -150px top -60px;
    }
    .hero-grid {
      position: relative;
      display: grid;
      grid-template-columns: 1.02fr .98fr;
      align-items: center;
      gap: 54px;
    }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid rgba(52,66,95,.10);
      background: rgba(255,255,255,.72);
      color: var(--ink-2);
      font-size: 13px;
      font-weight: 900;
      box-shadow: var(--shadow-soft);
    }
    .eyebrow-dot {
      width: 9px;
      height: 9px;
      border-radius: 99px;
      background: var(--mint);
      box-shadow: 0 0 0 5px rgba(139,232,196,.24);
    }
    h1, h2, h3, p { margin-top: 0; }
    h1 {
      margin: 22px 0 22px;
      font-size: clamp(44px, 7vw, 82px);
      line-height: .96;
      letter-spacing: -.075em;
      font-weight: 950;
      color: #23304b;
    }
    .accent-text {
      background: linear-gradient(135deg, #34425f 0%, #785ff1 52%, #30ad82 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .lead {
      max-width: 660px;
      font-size: clamp(18px, 2vw, 23px);
      line-height: 1.46;
      color: #536079;
      margin-bottom: 30px;
    }
    .hero-proof {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin: 26px 0 0;
      padding: 0;
      list-style: none;
      color: rgba(39,54,83,.78);
      font-size: 14px;
      font-weight: 800;
    }
    .hero-proof li {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border-radius: 999px;
      padding: 9px 12px;
      background: rgba(255,255,255,.72);
      border: 1px solid rgba(52,66,95,.08);
    }
    .check {
      display: inline-grid;
      place-items: center;
      flex: 0 0 auto;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: rgba(139,232,196,.45);
      color: #1f8b69;
      font-size: 12px;
      font-weight: 1000;
    }

    .hero-visual {
      position: relative;
      min-height: 610px;
      display: grid;
      place-items: center;
    }
    .orb {
      position: absolute;
      border-radius: 999px;
      filter: blur(.2px);
      opacity: .9;
    }
    .orb.one { width: 420px; height: 420px; background: var(--grad); right: 50px; top: 34px; }
    .orb.two { width: 220px; height: 220px; background: linear-gradient(135deg, #fff1a8, #ffd46a); left: 10px; bottom: 70px; opacity: .48; }
    .phone-frame {
      position: relative;
      width: min(350px, 82vw);
      border-radius: 46px;
      padding: 13px;
      background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(241,244,255,.62));
      box-shadow: 0 34px 90px rgba(39,54,83,.28), inset 0 0 0 1px rgba(255,255,255,.72);
      transform: rotate(2deg);
      z-index: 3;
    }
    .phone-screen {
      overflow: hidden;
      min-height: 670px;
      border-radius: 36px;
      background: linear-gradient(180deg, #fbfdff 0%, #eef4ff 100%);
      border: 1px solid rgba(52, 66, 95, .10);
      position: relative;
    }
    .phone-screen::before {
      content: "";
      position: absolute;
      width: 132px;
      height: 26px;
      border-radius: 0 0 18px 18px;
      background: #f9fbff;
      top: 0;
      left: calc(50% - 66px);
      box-shadow: 0 1px 0 rgba(52,66,95,.07);
      z-index: 2;
    }
    .app-ui { padding: 32px 18px 20px; }
    .app-status { display: flex; justify-content: space-between; align-items: center; color: #48546d; font-weight: 900; font-size: 12px; padding: 0 6px 18px; }
    .app-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 18px;
    }
    .app-head h3 { margin: 0; font-size: 26px; letter-spacing: -.04em; }
    .app-avatar {
      width: 42px;
      height: 42px;
      border-radius: 15px;
      background: var(--ink-2) url('../images/app-icon.webp') center/cover no-repeat;
      box-shadow: 0 10px 22px rgba(52,66,95,.20);
    }
    .app-search {
      height: 44px;
      border-radius: 15px;
      background: #fff;
      border: 1px solid rgba(52,66,95,.09);
      color: #8b95a9;
      display: flex;
      align-items: center;
      padding: 0 14px;
      font-size: 13px;
      font-weight: 800;
      margin-bottom: 14px;
    }
    .tabs {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 7px;
      margin-bottom: 16px;
    }
    .tab {
      padding: 9px 5px;
      text-align: center;
      border-radius: 13px;
      background: #fff;
      color: #6d7890;
      font-size: 11px;
      font-weight: 900;
      border: 1px solid rgba(52,66,95,.08);
    }
    .tab.active { background: var(--ink-2); color: #fff; box-shadow: 0 10px 20px rgba(52,66,95,.18); }
    .task-card {
      position: relative;
      display: grid;
      gap: 8px;
      padding: 14px;
      margin: 10px 0;
      border-radius: 20px;
      background: rgba(255,255,255,.92);
      border: 1px solid rgba(52,66,95,.08);
      box-shadow: 0 12px 28px rgba(52,66,95,.08);
    }
    .task-card.featured { background: linear-gradient(135deg, rgba(139,232,196,.72), rgba(255,255,255,.96)); }
    .task-title { display: flex; gap: 9px; align-items: flex-start; font-size: 15px; font-weight: 950; letter-spacing: -.02em; color: var(--ink); }
    .task-dot { width: 18px; height: 18px; flex: 0 0 auto; border-radius: 50%; border: 4px solid var(--violet); background: #fff; margin-top: 2px; }
    .task-meta { display: flex; flex-wrap: wrap; gap: 7px; padding-left: 27px; }
    .pill { display: inline-flex; align-items: center; gap: 6px; min-height: 25px; padding: 5px 8px; border-radius: 999px; background: rgba(52,66,95,.07); color: #59647c; font-size: 11px; font-weight: 900; }
    .mini-panel {
      position: absolute;
      z-index: 5;
      width: 214px;
      padding: 14px;
      border-radius: 24px;
      background: rgba(255,255,255,.92);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(52,66,95,.10);
      box-shadow: 0 24px 70px rgba(39,54,83,.17);
    }
    .mini-panel.one { left: -24px; top: 68px; transform: rotate(-8deg); }
    .mini-panel.two { right: -22px; bottom: 118px; transform: rotate(8deg); }
    .mini-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 950; margin-bottom: 8px; }
    .mini-title b { font-size: 14px; }
    .mini-title span { color: var(--muted); font-size: 12px; font-weight: 850; }
    .mini-bars { display: grid; gap: 7px; }
    .bar { height: 9px; border-radius: 99px; background: rgba(52,66,95,.08); overflow: hidden; }
    .bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--violet), var(--mint)); }

    section { padding: 80px 0; }
    .section-head { max-width: 760px; margin-bottom: 34px; }
    .section-kicker { color: #785ff1; font-weight: 950; text-transform: uppercase; letter-spacing: .13em; font-size: 12px; margin-bottom: 12px; }
    h2 { font-size: clamp(34px, 5vw, 58px); line-height: 1.04; letter-spacing: -.065em; margin-bottom: 18px; }
    .section-head p { font-size: 19px; color: var(--muted); margin-bottom: 0; }

    .problem {
      margin-top: -18px;
      padding-top: 52px;
    }
    .problem-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }
    .problem-card, .feature-card, .audience-card, .faq details, .pricing-card, .step-card {
      position: relative;
      border-radius: var(--radius);
      background: rgba(255,255,255,.82);
      border: 1px solid rgba(52,66,95,.10);
      box-shadow: var(--shadow-soft);
    }
    .problem-card { padding: 26px; min-height: 220px; overflow: hidden; }
    .problem-card::after {
      content: "";
      position: absolute;
      width: 130px;
      height: 130px;
      right: -46px;
      bottom: -52px;
      border-radius: 999px;
      background: var(--grad);
      opacity: .48;
    }
	.icon-bubble {
	  display: grid;
	  place-items: center;
	  width: 56px;
	  height: 56px;
	  border-radius: 18px;
	  background: transparent;
	  margin-bottom: 22px;
	}

	.icon-bubble img {
	  width: 56px;
	  height: 56px;
	  object-fit: contain;
	  display: block;
	}
    .problem-card h3, .feature-card h3, .audience-card h3, .step-card h3 { font-size: 22px; line-height: 1.14; letter-spacing: -.035em; margin-bottom: 10px; }
    .problem-card p, .feature-card p, .audience-card p, .step-card p { color: var(--muted); margin-bottom: 0; }

    .wide-band {
      padding: 0;
      margin: 52px 0 0;
    }
    .band-card {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 30px;
      align-items: center;
      padding: clamp(28px, 5vw, 54px);
      border-radius: 42px;
      color: #fff;
      background: var(--grad-2);
      box-shadow: 0 34px 90px rgba(39,54,83,.26);
      overflow: hidden;
      position: relative;
    }
    .band-card::before {
      content: "";
      position: absolute;
      inset: -35% auto auto 54%;
      width: 520px;
      height: 520px;
      border-radius: 999px;
      background: radial-gradient(circle, rgba(139,232,196,.58), transparent 64%);
    }
    .band-card > * { position: relative; }
	.band-logo {
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  min-height: 0;
  flex: 0 0 112px;
  border-radius: 28px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}

.band-logo img {
  width: 76px;
  height: 76px;
  object-fit: contain;
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.22));
}
    .band-card h2 { color: #fff; margin-bottom: 18px; }
    .band-card p { color: rgba(255,255,255,.76); font-size: 19px; margin-bottom: 24px; }
    .band-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 0; margin: 0; list-style: none; }
    .band-list li { display: flex; align-items: flex-start; gap: 9px; color: rgba(255,255,255,.86); font-weight: 750; }
    .band-list .check { background: rgba(139,232,196,.26); color: #baffdc; }

    .feature-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
    }
    .feature-card {
      aspect-ratio: 1 / 1;
      padding: 22px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }
    .feature-card img {
      width: 70px;
      height: 70px;
      object-fit: contain;
      flex: 0 0 auto;
      margin-bottom: 18px;
      filter: drop-shadow(0 12px 18px rgba(52,66,95,.14));
    }
    .feature-card h3 { margin-top: auto; }
    .feature-card p { font-size: 14px; line-height: 1.45; }
    .feature-label { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; padding: 7px 10px; border-radius: 99px; background: rgba(139,232,196,.28); color: #248461; font-size: 12px; font-weight: 950; margin-bottom: 14px; }

    .steps {
      background: linear-gradient(180deg, rgba(239,234,255,.58), rgba(255,255,255,0));
    }
    .steps-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      counter-reset: step;
    }
    .step-card { padding: 24px; }
    .step-card::before {
      counter-increment: step;
      content: counter(step);
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border-radius: 15px;
      background: var(--ink-2);
      color: #fff;
      font-weight: 950;
      margin-bottom: 18px;
      box-shadow: 0 12px 28px rgba(52,66,95,.22);
    }

    .split-section {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 34px;
      align-items: center;
    }
    .visual-stack {
      position: relative;
      min-height: 500px;
    }
    .floating-card {
      position: absolute;
      width: min(355px, 90%);
      padding: 22px;
      border-radius: 30px;
      background: rgba(255,255,255,.92);
      border: 1px solid rgba(52,66,95,.10);
      box-shadow: var(--shadow);
    }
    .floating-card:nth-child(1) { top: 20px; left: 0; transform: rotate(-4deg); }
    .floating-card:nth-child(2) { top: 165px; right: 0; transform: rotate(3deg); }
    .floating-card:nth-child(3) { bottom: 22px; left: 48px; transform: rotate(-1deg); }
    .floating-card h3 { margin-bottom: 8px; font-size: 20px; letter-spacing: -.035em; }
    .floating-card p { margin-bottom: 0; color: var(--muted); }
    .period-dot { display: inline-flex; align-items: center; gap: 8px; color: #785ff1; font-size: 13px; font-weight: 950; margin-bottom: 12px; }
    .period-dot i { width: 10px; height: 10px; border-radius: 999px; background: var(--violet); box-shadow: 0 0 0 6px rgba(159,140,255,.16); }

    .audience-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }
    .audience-card { padding: 28px; }
    .audience-card ul { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; color: var(--muted); font-weight: 750; }
    .audience-card li { display: flex; gap: 9px; align-items: flex-start; }

    .pricing {
      padding-top: 20px;
    }
    .pricing-card {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 22px;
      padding: 20px;
      background: linear-gradient(135deg, rgba(255,255,255,.88), rgba(239,234,255,.58));
    }
    .plan {
      border-radius: 24px;
      padding: 28px;
      background: rgba(255,255,255,.86);
      border: 1px solid rgba(52,66,95,.09);
    }
    .plan.highlight {
      color: #fff;
      background: var(--grad-2);
      box-shadow: 0 20px 60px rgba(39,54,83,.22);
    }
    .plan h3 { margin-bottom: 8px; font-size: 26px; letter-spacing: -.04em; }
    .plan p { color: var(--muted); }
    .plan.highlight p { color: rgba(255,255,255,.74); }
    .plan ul { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 11px; }
    .plan li { display: flex; gap: 9px; align-items: flex-start; font-weight: 760; }
    .plan.highlight .check { color: #baffdc; background: rgba(139,232,196,.18); }

    .faq-grid {
      display: grid;
      grid-template-columns: .78fr 1.22fr;
      gap: 30px;
      align-items: start;
    }
    .faq-list { display: grid; gap: 12px; }
    .faq details { padding: 0; overflow: hidden; }
    .faq summary {
      list-style: none;
      cursor: pointer;
      padding: 21px 24px;
      font-size: 18px;
      font-weight: 950;
      display: flex;
      justify-content: space-between;
      gap: 20px;
    }
    .faq summary::-webkit-details-marker { display: none; }
    .faq summary::after {
      content: "+";
      display: grid;
      place-items: center;
      width: 28px;
      height: 28px;
      border-radius: 10px;
      background: var(--violet-2);
      flex: 0 0 auto;
      color: #785ff1;
    }
    .faq details[open] summary::after { content: "−"; }
    .faq details p { color: var(--muted); padding: 0 24px 22px; margin: 0; }

    .cta-final {
      padding: 0 0 70px;
    }
    .cta-card {
      position: relative;
      overflow: hidden;
      border-radius: 46px;
      padding: clamp(34px, 7vw, 72px);
      background:
        radial-gradient(circle at 90% 15%, rgba(255,255,255,.55), transparent 18rem),
        var(--grad);
      box-shadow: 0 34px 90px rgba(52,66,95,.18);
      display: grid;
      grid-template-columns: 1fr .7fr;
      gap: 34px;
      align-items: center;
    }
    .cta-card h2 { margin-bottom: 16px; }
    .cta-card p { color: #405069; font-size: 20px; margin-bottom: 26px; }
   .cta-preview {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 18px;
  justify-self: center;
  width: min(500px, 100%);
}

.cta-phone-shot {
  position: relative;
  width: min(210px, 38vw);
  padding: 10px;
  border-radius: 34px;
  background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(241,244,255,.62));
  box-shadow:
    0 24px 62px rgba(39,54,83,.24),
    inset 0 0 0 1px rgba(255,255,255,.70);
  overflow: hidden;
}

.cta-phone-shot img {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: top center;
  border-radius: 26px;
  display: block;
}

    .footer {
      padding: 34px 0 104px;
      border-top: 1px solid rgba(52,66,95,.09);
      color: #66718a;
      font-size: 14px;
    }
    .footer-grid {
        display: flex;
        justify-content: space-between;
        gap: 24px;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .footer-copy {
        max-width: 360px;
    }

    .footer-links {
        max-width: 720px;
        text-align: right;
    }

    .footer-links-list {
        display: flex;
        justify-content: flex-end;
        gap: 10px 18px;
        align-items: center;
        flex-wrap: wrap;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .footer-links-item {
        margin: 0;
        padding: 0;
    }

    .footer a {
        font-weight: 850;
        color: var(--ink);
        text-decoration: none;
    }

    .footer a:hover {
        text-decoration: underline;
    }
	
	.back-to-top {
	  position: fixed;
	  right: 18px;
	  bottom: 18px;
	  z-index: 80;
	  display: grid;
	  place-items: center;
	  width: 52px;
	  height: 52px;
	  border: 0;
	  border-radius: 18px;
	  background: var(--ink-2);
	  color: #fff;
	  box-shadow: 0 18px 46px rgba(52,66,95,.28);
	  cursor: pointer;
	  font-size: 24px;
	  font-weight: 900;
	  opacity: 0;
	  transform: translateY(12px);
	  pointer-events: none;
	  transition: opacity .18s ease, transform .18s ease;
	}

	.back-to-top.is-visible {
	  opacity: 1;
	  transform: translateY(0);
	  pointer-events: auto;
	}

	.back-to-top:hover {
	  transform: translateY(-2px);
	}

    @keyframes floaty {
      0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
      50% { transform: translateY(-12px) rotate(var(--r, 0deg)); }
    }
    .phone-frame { --r: 2deg; animation: floaty 7s ease-in-out infinite; }
    .mini-panel.one { --r: -8deg; animation: floaty 6s ease-in-out infinite; }
    .mini-panel.two { --r: 8deg; animation: floaty 6.8s ease-in-out infinite; }

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

	@media (max-width: 1060px) {
	  body.menu-open {
		overflow: hidden;
	  }

	  body.menu-open::before {
		content: "";
		position: fixed;
		inset: 76px 0 0;
		z-index: 48;
		background: rgba(24,36,58,.26);
		backdrop-filter: blur(8px);
	  }

	  .menu-toggle {
		display: grid;
	  }

.nav-menu {
  position: fixed;
  top: 76px;
  left: 14px;
  right: 14px;
  z-index: 49;
  margin: 12px auto 0;
  border-radius: 28px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(52,66,95,.10);
  box-shadow: 0 24px 80px rgba(39,54,83,.20);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
}

	  .menu-open .nav-menu {
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
		transform: translateY(0);
	  }

	
      .hero-grid, .split-section, .faq-grid, .band-card, .cta-card { grid-template-columns: 1fr; }
      .hero-visual { min-height: 610px; }
      .problem-grid, .audience-grid { grid-template-columns: 1fr; }
      .feature-grid { grid-template-columns: repeat(2, 1fr); }
      .steps-grid { grid-template-columns: repeat(2, 1fr); }
.band-logo {
  width: 96px;
  height: 96px;
  min-height: 0;
}

.band-logo img {
  width: 64px;
  height: 64px;
}
    }

    @media (max-width: 720px) {
      .container { width: min(100% - 28px, var(--container)); }
		.topbar { position: sticky; }

		.nav {
		  min-height: 68px;
		  gap: 12px;
		}

		.brand {
		  min-width: 0;
		}

		.brand-sub {
		  display: none;
		}

		body.menu-open::before {
		  inset: 68px 0 0;
		}

		.nav-menu {
		  top: 68px;
		}

        .footer-grid {
            flex-direction: column;
            align-items: flex-start;
        }

        .footer-links {
            text-align: left;
        }

        .footer-links-list {
            justify-content: flex-start;
        }

        [dir="rtl"] .footer-links {
            text-align: right;
        }

        [dir="rtl"] .footer-links-list {
            justify-content: flex-start;
        }

      .hero { padding: 38px 0 50px; }
      h1 { font-size: clamp(42px, 14vw, 62px); }
      .lead { font-size: 17px; }
        .store-buttons {
          width: 100%;
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 10px;
        }

        .store-button {
          min-width: 0;
          width: 100%;
          padding: 12px 10px;
          gap: 8px;
        }

        .store-button .store-icon {
          width: 28px;
          height: 28px;
          flex: 0 0 28px;
        }

        .store-button b {
          font-size: 14px;
        }

        .store-button small {
          font-size: 10px;
        }

        .cta-card .store-buttons {
          width: 100%;
          display: grid;
          grid-template-columns: 1fr;
          gap: 12px;
          margin-bottom: 24px;
        }

        .cta-card .store-button {
          width: 100%;
          min-width: 0;
          justify-content: flex-start;
          padding: 14px 18px;
        }

        .cta-card .store-button .store-icon {
          width: 34px;
          height: 34px;
          flex: 0 0 34px;
        }

        .cta-card .store-button b {
          font-size: 18px;
        }

        .cta-card .store-button small {
          font-size: 12px;
        }
      .hero-proof { display: grid; grid-template-columns: 1fr; }
      .hero-visual { min-height: 550px; margin-top: 18px; }
      .phone-frame { width: min(314px, 86vw); }
      .phone-screen { min-height: 602px; }
      .mini-panel { display: none; }
      .orb.one { width: 330px; height: 330px; right: 0; }
      section { padding: 56px 0; }
      .steps-grid, .pricing-card { grid-template-columns: 1fr; }

		#features .feature-grid {
		  grid-template-columns: repeat(2, minmax(0, 1fr));
		  gap: 12px;
		}

		#features .feature-card {
		  aspect-ratio: auto;
		  min-height: 0;
		  padding: 14px;
		  border-radius: 22px;
		}

		#features .feature-card img {
		  width: 52px;
		  height: 52px;
		  margin-bottom: 12px;
		}

		#features .feature-card h3 {
		  margin-top: 0;
		  margin-bottom: 7px;
		  font-size: 16px;
		  line-height: 1.18;
		}

		#features .feature-card p {
		  font-size: 14px;
		  line-height: 1.35;
		}
      .band-list { grid-template-columns: 1fr; }
      .visual-stack { min-height: 620px; }
      .floating-card { position: relative; width: 100%; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; transform: none !important; margin-bottom: 14px; }
      .footer { padding-bottom: 104px; }
	  
.band-card {
  justify-items: start;
}

.band-logo {
  width: 86px;
  height: 86px;
  border-radius: 24px;
  justify-self: center;
}

.band-logo img {
  width: 58px;
  height: 58px;
}


.cta-preview {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 0;
  border-radius: 0;
  align-items: start;
}

.cta-phone-shot {
  width: 100%;
  min-width: 0;
  padding: 6px;
  border-radius: 26px;
}

.cta-phone-shot img {
  width: 100%;
  height: auto;
  border-radius: 20px;
}

.cta-card {
  overflow: hidden;
}

.cta-card .store-buttons {
  margin-bottom: 22px;
}

    }
	
	
	@media (max-width: 1060px) {
  .nav-menu {
    width: min(100% - 28px, 560px) !important;
    max-width: 560px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: stretch !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 22px !important;
	margin: 12px auto 0 !important;
  }

  .nav-menu > .nav-links {
    width: 100% !important;
    max-width: none !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: stretch !important;
    align-items: stretch !important;
    gap: 12px !important;
    margin: 0 !important;
  }

  .nav-menu > .nav-links > a {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 62px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 14px 28px !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,.94) !important;
    border: 1px solid rgba(52,66,95,.07) !important;
    box-shadow: 0 8px 20px rgba(39,54,83,.045) !important;
    color: var(--ink) !important;
    text-align: right !important;
    font-size: 18px !important;
    font-weight: 900 !important;
  }

.nav-menu > .lang-switch {
  width: 100% !important;
  max-width: none !important;
  min-height: 58px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 14px !important;
  padding: 12px 28px !important;
  border-radius: 20px !important;
}

.nav-menu > .lang-switch span {
  flex: 0 0 auto !important;
  text-align: right !important;
}

.nav-menu > .lang-switch select {
  width: auto !important;
  min-width: 90px !important;
  flex: 0 0 auto !important;
  text-align: right !important;
  text-align-last: right !important;
          font-size: 18px;
}

  .nav-menu > .download-nav-btn {
    width: 100% !important;
    max-width: none !important;
    min-height: 62px !important;
    margin: 0 !important;
    border-radius: 22px !important;
  }
}



/* WordPress content pages can be much longer than the landing sections. */
body.mtm-page:not(.menu-open) {
  overflow-y: auto;
}

body.mtm-page .page,
body.mtm-page .site-page {
  height: auto;
  min-height: 0;
  overflow-y: visible;
}

/* ================= WORDPRESS PAGES ================= */
.site-page {
  min-height: 68vh;
}

.page-section {
  padding: 78px 0 92px;
}

.page-container {
  width: min(100% - 40px, 960px);
}

.page-card {
  overflow-wrap: anywhere;
  padding: clamp(24px, 5vw, 56px);
  border: 1px solid rgba(52, 66, 95, .10);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .86);
  box-shadow: var(--shadow-soft);
}

.page-header {
  margin-bottom: 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(52, 66, 95, .10);
}

.page-title {
  margin: 0;
  color: var(--ink);
  font-size: clamp(34px, 5vw, 58px);
  line-height: .98;
  letter-spacing: -.055em;
}

.page-content {
  color: rgba(39, 54, 83, .88);
  font-size: 17px;
  line-height: 1.75;
}

.page-content > *:first-child {
  margin-top: 0;
}

.page-content > *:last-child {
  margin-bottom: 0;
}

.page-content h2,
.page-content h3,
.page-content h4 {
  margin: 1.75em 0 .65em;
  color: var(--ink);
  line-height: 1.16;
  letter-spacing: -.025em;
}

.page-content h2 {
  font-size: clamp(26px, 3vw, 36px);
}

.page-content h3 {
  font-size: clamp(22px, 2.4vw, 28px);
}

.page-content p,
.page-content ul,
.page-content ol,
.page-content table,
.page-content blockquote {
  margin: 0 0 1.05em;
}

.page-content ul,
.page-content ol {
  padding-inline-start: 1.35em;
}

.page-content li + li {
  margin-top: .35em;
}

.page-content a {
  color: var(--ink-2);
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.page-content table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
}

.page-content th,
.page-content td {
  padding: 12px 14px;
  border: 1px solid rgba(52, 66, 95, .12);
  vertical-align: top;
}

.page-content th {
  color: var(--ink);
  background: rgba(159, 140, 255, .10);
  text-align: start;
}

.legal-container {
  width: min(100% - 40px, 1040px);
}

.legal-card {
  background: rgba(255, 255, 255, .94);
}

.legal-content {
  font-size: calc(17px * var(--mtm-policy-font-scale, 1));
}

@media (max-width: 720px) {
  .page-section {
    padding: 46px 0 72px;
  }

  .page-container,
  .legal-container {
    width: min(100% - 28px, 960px);
  }

  .page-card {
    padding: 22px 18px;
    border-radius: 24px;
  }

  .page-header {
    margin-bottom: 22px;
    padding-bottom: 18px;
  }

  .page-content {
    font-size: 16px;
    line-height: 1.68;
  }
}