/* Katakeet landing page. Tokens from the Organic design system. */
:root {
  --color-bg: #f5ead8;
  --color-text: #201e1d;
  --color-accent: #c67139;
  --color-neutral-100: #f9f4ed;
  --color-neutral-700: #645c50;
  --color-neutral-800: #474238;
  --color-neutral-900: #2e2b25;
  --color-accent-100: #fff2eb;
  --color-accent-200: #ffe1d0;
  --color-accent-600: #b2622d;
  --color-accent-700: #8c491a;
  --color-accent-800: #643312;
  --color-accent-2-200: #e1eecc;
  --color-accent-2-800: #3d472b;
  --shadow-sm: 0 1px 2px rgb(46 43 37 / .14);
  --shadow-md: 0 3px 10px rgb(46 43 37 / .16);
  --shadow-lg: 0 12px 32px rgb(46 43 37 / .22);
  --font-heading: "Caprasimo", system-ui, sans-serif;
  --font-body: "Figtree", system-ui, sans-serif;
  --font-ar: "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-alt: var(--font-ar); /* font for the label in the *other* language */
}
html[lang="ar"] {
  --font-heading: var(--font-ar);
  --font-body: var(--font-ar);
  --font-alt: "Figtree", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
}
img { display: block; max-width: 100%; }
a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-accent-600); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--font-heading); font-weight: 400; margin: 0; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] .brand span { font-weight: 700; }

.page { overflow: hidden; }
.wrap { max-width: 1180px; margin-inline: auto; padding-inline: 24px; }
.icon { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Header */
.header { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 20px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--color-text); }
.brand:hover { color: var(--color-text); }
.brand img { width: 44px; height: 44px; border-radius: 50%; box-shadow: var(--shadow-sm); }
.brand span { font-family: var(--font-heading); font-size: 24px; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.lang-toggle {
  display: flex; align-items: center; gap: 6px;
  border: 0; cursor: pointer; padding: 9px 14px; border-radius: 999px;
  background: var(--color-neutral-100); color: var(--color-text); box-shadow: var(--shadow-sm);
  font: 700 14px/1.2 var(--font-alt);
}
.lang-toggle:hover { background: var(--color-accent-100); }
.btn-cta {
  padding: 10px 18px; border-radius: 999px; background: var(--color-accent); color: var(--color-neutral-100);
  font-weight: 700; font-size: 14px; line-height: 1.2; box-shadow: var(--shadow-sm); white-space: nowrap;
}
.btn-cta:hover { background: var(--color-accent-600); color: var(--color-neutral-100); }

/* Hero */
.hero {
  position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 48px; align-items: center; padding-block: 32px 72px;
}
.hero-circle { position: absolute; top: -80px; inset-inline-end: -180px; width: 560px; height: 560px; border-radius: 50%; background: var(--color-accent-200); z-index: 0; }
.hero-text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 22px; }
.badge { align-self: flex-start; padding: 5px 14px; border-radius: 999px; background: var(--color-accent-2-200); color: var(--color-accent-2-800); font-size: 13px; font-weight: 700; }
h1 { font-size: clamp(40px, 6vw, 66px); line-height: 1.1; text-wrap: balance; }
.lede { margin: 0; max-width: 500px; font-size: 18px; line-height: 1.6; color: var(--color-neutral-800); text-wrap: pretty; }
.audiences { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.audiences li {
  display: flex; align-items: center; gap: 8px; padding-block: 5px; padding-inline: 5px 14px;
  border-radius: 999px; background: var(--color-neutral-100); box-shadow: var(--shadow-sm); font-size: 14px; font-weight: 700;
}
.aud-icon { width: 30px; height: 30px; border-radius: 50%; background: var(--color-accent-100); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.aud-icon img { height: 26px; width: auto; }
.stores { display: flex; flex-wrap: wrap; gap: 12px; scroll-margin-top: 24px; }
.store {
  display: flex; align-items: center; gap: 12px; padding-block: 10px; padding-inline: 16px 22px; border-radius: 999px;
  background: var(--color-neutral-900); color: var(--color-neutral-100); box-shadow: var(--shadow-md);
}
.store:hover { background: var(--color-neutral-800); color: var(--color-neutral-100); }
.store-icon { font-size: 26px; }
.store-text { display: flex; flex-direction: column; line-height: 1.15; }
.store-top { font-size: 11px; }
.store-name { font-size: 18px; font-weight: 700; font-family: "Figtree", system-ui, sans-serif; }
.store.is-primary { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.hero-phone { position: relative; z-index: 1; display: flex; justify-content: center; }

/* Phones */
.phone {
  width: 250px; height: 510px; flex: none; border: 9px solid var(--color-neutral-900); border-radius: 42px;
  background: var(--color-neutral-100); box-shadow: var(--shadow-lg); overflow: hidden;
}
.phone-lg { width: 290px; height: 590px; border-width: 10px; border-radius: 48px; }
.phone > img { width: 100%; height: 100%; object-fit: cover; }
.shot {
  height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 24px; text-align: center; background: linear-gradient(180deg, var(--color-accent-100), var(--color-neutral-100));
}
.shot img { width: 64px; height: 64px; border-radius: 50%; box-shadow: var(--shadow-sm); }
.shot span { font-family: var(--font-heading); font-size: 20px; }
.shot small { font-size: 13px; color: var(--color-neutral-700); }

/* Sections */
.section { display: flex; flex-direction: column; gap: 28px; padding-block: 56px; }
.section h2 { font-size: clamp(30px, 4vw, 42px); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; }
.step { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 32px; background: var(--color-neutral-100); box-shadow: var(--shadow-sm); }
.step-n { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 22px; }
.tone-a { background: var(--color-accent-200); color: var(--color-accent-800); }
.tone-b { background: var(--color-accent-2-200); color: var(--color-accent-2-800); }
.step h3 { font-size: 21px; }
.step p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--color-neutral-800); text-wrap: pretty; }
.section-shots { padding-block-end: 88px; }
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 28px; justify-items: center; }
.shots figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.shots figcaption { font-size: 15px; font-weight: 700; }

/* Footer */
.footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block-end: 40px; font-size: 14px; color: var(--color-neutral-700); }
.footer-links { display: flex; gap: 20px; }

@media (max-width: 420px) {
  .header { padding-inline: 16px; }
  .wrap { padding-inline: 16px; }
  .brand span { display: none; }
  .phone-lg { width: 260px; height: 530px; }
}