/* Innov8 site styles. Every value comes from DESIGN.md. */

@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/dm-mono-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/inter-tight-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/inter-tight-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 800; font-display: swap; src: url(fonts/inter-tight-latin-800-normal.woff2) format('woff2'); }
/* Arabic page only. 'optional' means the text never swaps fonts after it appears, so nothing jumps. */
@font-face { font-family: 'Noto Kufi Arabic'; font-style: normal; font-weight: 500; font-display: optional; src: url(fonts/noto-kufi-arabic-arabic-500-normal.woff2) format('woff2'); unicode-range: U+0020, U+00A0, U+0600-06FF, U+200C-200F, U+FD3E-FD3F; }
@font-face { font-family: 'Noto Kufi Arabic'; font-style: normal; font-weight: 700; font-display: optional; src: url(fonts/noto-kufi-arabic-arabic-700-normal.woff2) format('woff2'); unicode-range: U+0020, U+00A0, U+0600-06FF, U+200C-200F, U+FD3E-FD3F; }
@font-face { font-family: 'Noto Kufi Arabic'; font-style: normal; font-weight: 800; font-display: optional; src: url(fonts/noto-kufi-arabic-arabic-800-normal.woff2) format('woff2'); unicode-range: U+0020, U+00A0, U+0600-06FF, U+200C-200F, U+FD3E-FD3F; }

/* Size-matched fallbacks, so text doesn't jump when the brand fonts finish loading */
@font-face { font-family: 'Inter Tight Fallback'; src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo'); ascent-override: 100.5078%; descent-override: 25.0256%; line-gap-override: 0%; size-adjust: 96.3855%; }
@font-face { font-family: 'DM Mono Fallback'; src: local('Courier New'), local('CourierNewPSMT'), local('Liberation Mono'), local('Cousine'); ascent-override: 99.2161%; descent-override: 31.005%; line-gap-override: 0%; size-adjust: 99.9837%; }

:root {
  /* Colour tokens, named by job */
  --bg: #0C1236;
  --ink: #EAF2FF;
  --muted: #9AA6D6;
  --line: #2A3470;
  --search: #00E5FF;
  --cursor: #FF3D9A;
  --search-glow: #00E5FF73;
  --cursor-glow: #FF3D9A99;
  --cursor-soft: #FF3D9A40;

  /* Type */
  --font-typed: 'DM Mono', 'DM Mono Fallback', ui-monospace, monospace;
  --font-text: 'Inter Tight', 'Inter Tight Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fs-headline: 72px;
  --fs-search: 56px;
  --fs-sub: 28px;
  --fs-body: 20px;
  --fs-ui: 16px;
  --fs-fine: 13px;

  /* Spacing: 6 · 18 · 24 · 28 · 48 · 56 · 112 */
  --pad-top: 48px;
  --pad-x: 56px;
  --section: 112px;
  --card-pad: 48px;
}

@media (max-width: 719px) {
  :root {
    --fs-headline: 44px;
    --fs-search: 28px;
    --fs-sub: 22px;
    --fs-body: 18px;
    --pad-x: 24px;
    --section: 56px;
    --card-pad: 24px;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Smooth scrolling only for clicks within a page. A link from another page (like /website-seo-audit#covers) jumps straight to its section. */
html:focus-within { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--cursor); outline-offset: 4px; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }

.wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }

.skip { position: absolute; inset-inline-start: -9999px; top: 18px; padding: 6px 18px; background: var(--bg); color: var(--ink); border: 2px solid var(--cursor); z-index: 10; }
.skip:focus { inset-inline-start: var(--pad-x); }

@keyframes blink { 50% { opacity: 0; } }

/* Header and logo */
.site-header { display: flex; flex-wrap: wrap; align-items: center; gap: 0 28px; padding-top: var(--pad-top); }
.logo { display: inline-flex; align-items: center; min-height: 44px; }
/* The logo is 52px tall on computers and 36px on phones, shrinking a little on phones under 330px wide so it stays on one line with AR */
.logo img { display: block; width: 326px; height: auto; }
@media (max-width: 719px) { .logo img { width: min(226px, calc(100vw - 104px)); } }

.nav { display: flex; align-items: center; gap: 28px; margin-inline-start: auto; font-size: var(--fs-ui); }
.nav-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); text-decoration: none; }
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--ink); }
.lang-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); font-size: var(--fs-ui); font-weight: 700; letter-spacing: 0.12em; text-decoration: none; }
.lang-link:hover { color: var(--ink); }
/* Under 1366px: logo, language link and button on the first row, the links on their own row below.
   Phones: the full logo leaves no room for the button, so the hero button does that job. */
@media (max-width: 1365px) {
  .lang-link { margin-inline-start: auto; }
  .nav { order: 3; flex-basis: 100%; flex-wrap: wrap; margin-inline-start: 0; gap: 0 28px; }
}
@media (max-width: 719px) { .nav { gap: 0 24px; } .site-header .header-cta { display: none; } }

/* Buttons and links */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 26px;
  border: 2px solid var(--cursor); background: transparent; color: var(--ink);
  font-family: var(--font-text); font-weight: 700; font-size: var(--fs-ui); line-height: 1;
  text-decoration: none;
  box-shadow: 0 0 18px var(--cursor-soft), inset 0 0 12px var(--cursor-soft);
  transition: box-shadow 0.2s ease;
}
.btn:hover { box-shadow: 0 0 36px var(--cursor-soft), inset 0 0 24px var(--cursor-soft); }
.btn-sm { min-height: 44px; padding: 0 18px; }
.link { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 700; font-size: var(--fs-ui); text-underline-offset: 4px; }
.card .link, .item .link { align-self: flex-start; }

/* Type roles */
.label { font-size: var(--fs-ui); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.headline { font-size: var(--fs-headline); font-weight: 800; line-height: 1; letter-spacing: -0.035em; max-width: 1100px; text-wrap: balance; }
.sub { font-size: var(--fs-sub); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
.body { font-size: var(--fs-body); line-height: 1.5; color: var(--muted); max-width: 720px; text-wrap: pretty; }
.fine { font-size: var(--fs-fine); color: var(--muted); }

/* Search line */
.search {
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: calc(1.2em + 20px);
  padding-bottom: 18px; border-bottom: 2px solid var(--line);
  font-family: var(--font-typed); font-weight: 500; font-size: var(--fs-search); line-height: 1.2;
  color: var(--search); text-shadow: 0 0 22px var(--search-glow);
}
/* Letters are revealed with visibility and the cursor moves with transform, so typing never shifts the layout. */
.search-line { position: relative; padding-inline-end: 0.6em; white-space: pre-wrap; }
.search-line .ch.is-hidden { visibility: hidden; }
.search-cursor { position: absolute; left: 0; top: 0; width: 0.536em; height: 1em; background: var(--cursor); box-shadow: 0 0 16px var(--cursor-glow), 0 0 44px var(--cursor-soft); opacity: 0; will-change: transform; }
.search-cursor.is-placed { opacity: 1; }
.search-cursor.is-placed.is-idle { animation: blink 1s steps(1) infinite; }
/* Reserve room so the page never jumps while a search types: one line at full width, two on laptops, three on tablets and phones. */
@media (max-width: 1439px) { .search { min-height: calc(2.4em + 20px); } }
@media (max-width: 899px) { .search { min-height: calc(3.6em + 20px); } }

/* Hero */
.hero { display: flex; flex-direction: column; min-height: calc(100vh - 100px); min-height: calc(100svh - 100px); padding-bottom: var(--pad-x); }
@media (max-width: 1365px) { .hero { min-height: calc(100vh - 144px); min-height: calc(100svh - 144px); } }
@media (max-width: 719px) { .hero { min-height: calc(100vh - 180px); min-height: calc(100svh - 180px); } }
.hero-body { margin-top: auto; padding-top: var(--section); display: flex; flex-direction: column; gap: 28px; }
.hero-support { display: flex; flex-direction: column; gap: 24px; max-width: 720px; }
.hero-support .sub { color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 28px; }
.hero--page { min-height: 0; }

/* Sections */
.section { padding-top: var(--section); }
.section-head { display: flex; flex-direction: column; gap: 24px; margin-bottom: 56px; }

/* Service cards: the main service is the big one */
.services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; }
.card { border: 2px solid var(--line); padding: var(--card-pad); display: flex; flex-direction: column; gap: 24px; }
.card--main { grid-row: span 2; }
.card .link { margin-top: auto; }
.card .price { margin-top: auto; }
.card .price ~ .link { margin-top: 0; }
.checklist { display: flex; flex-direction: column; }
.checklist li { padding: 18px 0; border-top: 2px solid var(--line); color: var(--ink); font-size: var(--fs-body); }
@media (max-width: 899px) { .services { grid-template-columns: minmax(0, 1fr); gap: 24px; } .card--main { grid-row: auto; } }

/* Numbered steps */
.steps li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 24px; padding: 28px 0; border-top: 2px solid var(--line); }
.steps li:last-child { border-bottom: 2px solid var(--line); }
.step-num { font-size: var(--fs-sub); font-weight: 700; line-height: 1.2; color: var(--muted); }
.step-text { display: flex; flex-direction: column; gap: 18px; }
@media (max-width: 719px) { .steps li { grid-template-columns: minmax(0, 1fr); gap: 18px; } }

/* Two-column item rows */
.items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; }
.item { padding: 28px 0; border-top: 2px solid var(--line); display: flex; flex-direction: column; gap: 18px; }
@media (max-width: 899px) { .items { grid-template-columns: minmax(0, 1fr); } }

/* Questions */
.faq { max-width: 960px; }
.faq-item { padding: 28px 0; border-top: 2px solid var(--line); display: flex; flex-direction: column; gap: 18px; }
.faq-item:last-child { border-bottom: 2px solid var(--line); }

/* Split text section */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: start; }
.split .body + .body { margin-top: 24px; }
.split .body + .link { margin-top: 18px; }
@media (max-width: 899px) { .split { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

/* Contact */
.contact { display: flex; flex-direction: column; gap: 28px; }

/* Footer */
.site-footer { margin-top: var(--section); border-top: 2px solid var(--line); padding-top: 48px; padding-bottom: var(--pad-x); display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 28px 56px; }
.footer-brand { display: flex; flex-direction: column; gap: 6px; }
.footer-email { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-size: var(--fs-ui); font-weight: 700; text-underline-offset: 4px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 6px 28px; font-size: var(--fs-ui); }
.footer-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); text-decoration: none; }
.footer-nav a:hover { color: var(--ink); }
.footer-meta { flex-basis: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 28px; }

/* Floating WhatsApp button, on every page. Same look as the main button, with a solid background so text behind it never shows through. */
.wa-float { position: fixed; z-index: 20; inset-inline-end: 24px; bottom: 24px; gap: 6px; padding: 0 24px 0 18px; background: var(--bg); }
.wa-float .wa-icon { flex: none; }
.site-footer { padding-bottom: calc(var(--pad-x) + 76px); }
@media (max-width: 719px) { .wa-float { inset-inline-end: 18px; bottom: 18px; } }
/* While it would sit on top of the hero's own buttons (phones, first screen), it steps aside */
.wa-float { transition: opacity 0.2s ease, visibility 0.2s ease, box-shadow 0.2s ease; }
.wa-float.is-tucked { opacity: 0; visibility: hidden; }

/* Arabic page: Noto Kufi Arabic for Arabic letters, the brand fonts for any Latin words. Arabic is never letter-spaced. */
:root:lang(ar) { --font-text: 'Noto Kufi Arabic', 'Inter Tight', 'Inter Tight Fallback', Tahoma, sans-serif; --font-typed: 'Noto Kufi Arabic', 'DM Mono', 'DM Mono Fallback', Tahoma, monospace; }
:lang(ar) .label, :lang(ar) .headline, :lang(ar) .sub { letter-spacing: 0; }
:lang(ar) .headline { line-height: 1.35; }
:lang(ar) .sub { line-height: 1.5; }
:lang(ar) .body, :lang(ar) .checklist li { line-height: 1.8; }
:lang(ar) .search { line-height: 1.6; min-height: calc(1.6em + 20px); }
@media (max-width: 1023px) { :lang(ar) .search { min-height: calc(3.2em + 20px); } }

@media (prefers-reduced-motion: reduce) {
  html, html:focus-within { scroll-behavior: auto; }
  .search-cursor.is-placed.is-idle { animation: none; }
  .btn, .wa-float { transition: none; }
}