/* =========================================================================
   sayarhub.com — the product's own site.

   Deliberately the same palette, type and rhythm as the showroom this sells:
   a dealer who opens a demo should not feel they have gone somewhere else.
   Self-contained though — no build step, no framework, one stylesheet.

   Every colour here is checked against the surface it sits on. The showroom's
   --text-muted failed WCAG AA on four surfaces before it was caught; the values
   below are the corrected ones and the same rule applies: nothing under 4.5:1.
   ========================================================================= */

:root {
  --bg:            #0B0C0E;
  --bg-elevated:   #14161A;
  --bg-surface:    #1B1E24;
  --bg-surface-2:  #22262E;
  --hairline:      rgba(255,255,255,.07);
  --hairline-2:    rgba(255,255,255,.13);

  --text:          #F3F4F6;
  --text-2:        #B2BAC6;
  --text-3:        #95A0AF;

  --gold:          #C9A24B;
  --gold-hi:       #DDB460;
  --gold-dim:      rgba(201,162,75,.14);
  --gold-line:     rgba(201,162,75,.36);
  --wa:            #25D366;

  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; --s-20:80px; --s-24:96px;

  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --nav-h: 76px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --t: 260ms;
}

/* ------------------------------------------------------------------ base -- */

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
[hidden] { display: none !important; }

::selection { background: var(--gold); color: #12100A; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--gold); color: #12100A;
  padding: 12px 18px; font-weight: 600; border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }

.wrap { width: min(1220px, calc(100% - 2 * var(--s-6))); margin-inline: auto; }
.wrap--narrow { width: min(820px, calc(100% - 2 * var(--s-6))); }

/* ------------------------------------------------------------------ type -- */

.h2 {
  font-family: var(--display);
  font-size: clamp(30px, 4.4vw, 52px);
  font-weight: 700; letter-spacing: -.03em; line-height: 1.06;
  margin: 0 0 var(--s-4);
}
.h3 {
  font-family: var(--display);
  font-size: clamp(21px, 2.4vw, 27px);
  font-weight: 700; letter-spacing: -.02em; line-height: 1.15;
  margin: 0 0 var(--s-3);
}
.h4 { font-size: 17px; font-weight: 650; letter-spacing: -.01em; margin: 0 0 6px; }

.eyebrow {
  font-size: 11px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 var(--s-4);
}
.lede { font-size: clamp(16.5px, 1.7vw, 19px); color: var(--text-2); margin: 0 0 var(--s-5); max-width: 60ch; }
p { margin: 0 0 var(--s-4); color: var(--text-2); }
p:last-child { margin-bottom: 0; }

.head { max-width: 62ch; margin-bottom: var(--s-12); }
.head--center { margin-inline: auto; text-align: center; }
.sub { color: var(--text-2); margin: 0; }

/* --------------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 14.5px; font-weight: 600; letter-spacing: -.01em;
  cursor: pointer; white-space: nowrap;
  transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease),
              transform var(--t) var(--ease), color var(--t) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 17px; height: 17px; flex: none; }
.btn--sm { padding: 10px 18px; font-size: 13.5px; }

.btn--gold { background: var(--gold); color: #12100A; }
.btn--gold:hover { background: var(--gold-hi); }

.btn--ghost { border-color: var(--hairline-2); color: var(--text); }
.btn--ghost:hover { border-color: var(--gold-line); color: var(--gold); }

.btn--wa { background: var(--wa); color: #06301A; }
.btn--wa:hover { background: #2ee674; }

/* ------------------------------------------------------------------- nav -- */

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  height: var(--nav-h);
  display: flex; align-items: center;
  border-bottom: 1px solid transparent;
  transition: height var(--t) var(--ease), background-color var(--t) var(--ease),
              border-color var(--t) var(--ease), backdrop-filter var(--t) var(--ease);
}
.nav.is-stuck {
  height: 62px;
  background: rgba(11,12,14,.72);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--hairline);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); }

/* Two treatments of one logo, because the supplied lockup is STACKED.
   In a 62-76px nav bar the whole thing can only be about 40px tall, which puts
   "SayarHub" inside it at roughly 10px — present, and unreadable. So the nav
   takes the mark on its own and sets the name in Fraunces beside it, and the
   footer, which has vertical room, uses the real lockup with its Arabic. */
.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand__mark { width: auto; height: 30px; flex: none; transition: height var(--t) var(--ease); }
.brand__text { display: grid; line-height: 1.15; }
.brand__name { font-family: var(--display); font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.brand__sub { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.nav.is-stuck .brand__mark { height: 26px; }

.foot .brand { display: block; }
.foot .brand__logo { width: auto; height: 88px; }

.nav__links { display: none; gap: var(--s-8); }
.nav__links a { font-size: 14px; color: var(--text-2); transition: color var(--t) var(--ease); }
.nav__links a:hover { color: var(--text); }

.nav__right { display: flex; align-items: center; gap: var(--s-3); }
.nav__right .btn { display: none; }

.burger {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--hairline-2); border-radius: 10px;
}
.burger svg { width: 20px; height: 20px; }

@media (min-width: 900px) {
  .nav__links { display: flex; }
  .nav__right .btn { display: inline-flex; }
  .burger { display: none; }
}

.drawer {
  position: fixed; inset: var(--nav-h) 0 auto 0; z-index: 89;
  background: rgba(11,12,14,.96);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--hairline);
}
.drawer__nav { display: grid; padding: var(--s-4) var(--s-6) var(--s-8); }
.drawer__nav a {
  padding: 14px 0; font-size: 17px; font-weight: 500;
  border-bottom: 1px solid var(--hairline);
}
.drawer__nav a:last-child { border-bottom: 0; color: var(--gold); }

/* ------------------------------------------------------------------ hero -- */

.hero { padding: calc(var(--nav-h) + var(--s-16)) 0 var(--s-20); position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; z-index: -1;
  top: -30%; right: -10%; width: 70vw; height: 70vw; max-width: 900px; max-height: 900px;
  background: radial-gradient(circle, rgba(201,162,75,.13), transparent 62%);
  pointer-events: none;
}
.hero__grid { display: grid; gap: var(--s-16); align-items: center; }
@media (min-width: 1000px) {
  .hero { padding-top: calc(var(--nav-h) + var(--s-20)); }
  .hero__grid { grid-template-columns: 1.05fr .95fr; gap: var(--s-12); }
}

.hero__title {
  font-family: var(--display);
  font-size: clamp(40px, 7.2vw, 82px);
  font-weight: 800; line-height: .98; letter-spacing: -.04em;
  margin: 0 0 var(--s-5);
}
.hero__title em { font-style: italic; font-weight: 600; color: var(--gold); display: block; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-5); }
.hero__note { font-size: 13.5px; color: var(--text-3); margin: 0; }

/* The browser frame. Chrome drawn in CSS so there is no screenshot to go stale. */
.frame {
  border-radius: var(--r-lg);
  border: 1px solid var(--hairline-2);
  background: var(--bg-elevated);
  overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.8);
}
.frame__bar {
  display: flex; align-items: center; gap: 6px;
  padding: 11px var(--s-4);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--hairline);
}
.frame__bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--hairline-2); flex: none; }
.frame__url {
  margin: 0 0 0 var(--s-3); font-size: 11.5px; color: var(--text-3);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.frame__body { position: relative; aspect-ratio: 3/2; }
.frame__body img { width: 100%; height: 100%; object-fit: cover; }
.frame__card {
  position: absolute; left: var(--s-5); bottom: var(--s-5); right: var(--s-5);
  max-width: 280px;
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-md);
  background: rgba(11,12,14,.78);
  backdrop-filter: blur(14px);
  border: 1px solid var(--hairline-2);
}
.frame__eyebrow { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin: 0 0 4px; }
.frame__title { font-family: var(--display); font-size: 19px; font-weight: 700; color: var(--text); margin: 0 0 2px; letter-spacing: -.02em; }
/* Year and mileage, not a price. This mockup is shown to Sri Lankan and Omani
   visitors on the same page, so any currency in it is wrong for half of them —
   and a rupee figure in front of an Omani dealer reads as "not for you". */
.frame__meta { font-size: 13px; color: var(--text-2); margin: 0; font-variant-numeric: tabular-nums; }

/* The console, tucked under the browser frame. The hero claims a website AND
   the software to run it, so the art has to show both halves — a WhatsApp
   preview sat here while the headline was about share links, and it now lives
   in its own section further down where it reads as one feature among several. */
.panel { margin: calc(-1 * var(--s-8)) 0 0 auto; width: min(340px, 92%); }
.panel__meta {
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-3); margin: 0 0 8px; text-align: right;
}
.panel__card {
  padding: var(--s-4);
  border-radius: var(--r-md);
  background: var(--bg-surface);
  border: 1px solid var(--hairline-2);
  box-shadow: 0 24px 44px -20px rgba(0,0,0,.9);
}
.panel__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); margin-bottom: var(--s-4); }
.panel__stats div { text-align: center; }
.panel__stats b {
  display: block; font-family: var(--display); font-size: 21px; font-weight: 700;
  color: var(--gold); letter-spacing: -.02em; line-height: 1.1;
}
.panel__stats span { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }

.panel__row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--hairline);
}
.panel__thumb {
  width: 34px; height: 26px; flex: none; border-radius: 5px;
  background: url("/assets/img/share-thumb.jpg") center/cover, var(--bg-surface-2);
}
.panel__thumb--b { filter: grayscale(1) brightness(.7); }
.panel__name { font-size: 12.5px; color: var(--text-2); flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel__pill {
  font-size: 9.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; flex: none;
  color: #4ADE80; background: rgba(74,222,128,.12);
}
.panel__pill--r { color: #FBBF24; background: rgba(251,191,36,.12); }

/* --------------------------------------------------------------- section -- */

.section { padding: var(--s-24) 0; }
.section--alt { background: var(--bg-elevated); border-block: 1px solid var(--hairline); }

/* ----------------------------------------------------------------- demos -- */

.demos { display: grid; gap: var(--s-5); }
@media (min-width: 800px) { .demos { grid-template-columns: 1fr 1fr; } }

.demo {
  position: relative; overflow: hidden;
  display: grid; align-content: end; gap: 4px;
  min-height: 320px;
  padding: var(--s-8);
  border-radius: var(--r-xl);
  border: 1px solid var(--hairline-2);
  isolation: isolate;
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease);
}
.demo::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center;
  transition: transform 600ms var(--ease);
}
.demo::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(11,12,14,.25) 0%, rgba(11,12,14,.82) 62%, rgba(11,12,14,.95) 100%);
}
.demo--lk::before { background-image: url("/assets/img/demo-lk.jpg"); }
.demo--om::before { background-image: url("/assets/img/demo-om.jpg"); }
.demo:hover { transform: translateY(-4px); border-color: var(--gold-line); }
.demo:hover::before { transform: scale(1.05); }

.demo__flagline {
  font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold);
}
.demo__name { font-family: var(--display); font-size: clamp(24px, 3vw, 33px); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.demo__meta { font-size: 13.5px; color: var(--text-2); margin-bottom: var(--s-4); }
.demo__go {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--text);
}
.demo__go svg { width: 16px; height: 16px; transition: transform var(--t) var(--ease); }
.demo:hover .demo__go svg { transform: translate(3px, -3px); }

.demos__note { margin: var(--s-6) 0 0; font-size: 13.5px; color: var(--text-3); text-align: center; }

/* ---------------------------------------------------------------- halves -- */

.halves { display: grid; gap: var(--s-8); }
@media (min-width: 900px) { .halves { grid-template-columns: 1fr 1fr; gap: var(--s-12); } }

.half {
  padding: var(--s-8);
  border-radius: var(--r-lg);
  border: 1px solid var(--hairline);
  background: var(--bg-surface);
}
.half__num {
  font-family: var(--display); font-size: 13px; font-weight: 700;
  letter-spacing: .1em; color: var(--gold); margin: 0 0 var(--s-4);
}

.ticks { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; gap: 11px; }
.ticks li {
  position: relative; padding-left: 26px;
  font-size: 14.5px; color: var(--text-2);
}
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 13px; height: 7px;
  border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg);
}

/* ---------------------------------------------------------------- pillar -- */

.pillar__grid { display: grid; gap: var(--s-12); align-items: center; }
@media (min-width: 950px) { .pillar__grid { grid-template-columns: 1fr 1fr; gap: var(--s-16); } }

.compare { display: grid; gap: var(--s-5); }
.compare__label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); margin: 0 0 8px; }
.compare__box {
  padding: var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  background: var(--bg-surface);
}
.compare__box b { display: block; font-size: 14px; color: var(--text); margin-bottom: 3px; }
.compare__box p { margin: 0; font-size: 12.5px; color: var(--text-3); }
.compare__blank {
  height: 74px; border-radius: var(--r-sm); margin-bottom: 10px;
  background: repeating-linear-gradient(45deg, var(--bg-surface-2), var(--bg-surface-2) 8px, var(--bg-elevated) 8px, var(--bg-elevated) 16px);
}
.compare__img {
  height: 118px; border-radius: var(--r-sm); margin-bottom: 10px;
  background: url("/assets/img/share-thumb.jpg") center/cover, var(--bg-surface-2);
}
.compare__row--good .compare__box { border-color: var(--gold-line); background: var(--gold-dim); }

/* -------------------------------------------------------------- services -- */

.services { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-lg); overflow: hidden; }
@media (min-width: 720px) { .services { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .services { grid-template-columns: repeat(3, 1fr); } }

.service {
  display: flex; gap: var(--s-4);
  padding: var(--s-8);
  background: var(--bg);
  transition: background-color var(--t) var(--ease);
}
.service:hover { background: var(--bg-surface); }
.service__n {
  font-family: var(--display); font-size: 13px; font-weight: 700;
  color: var(--gold); margin: 2px 0 0; flex: none;
}
.service p { font-size: 14px; margin: 0; }

/* ----------------------------------------------------------------- steps -- */

/* Four steps, so two-up before four-up: at 800px four columns would leave each
   step about 170px wide and break every heading onto three lines. */
.steps { display: grid; gap: var(--s-8); }
@media (min-width: 620px)  { .steps { grid-template-columns: repeat(2, 1fr); gap: var(--s-10); } }
@media (min-width: 1040px) { .steps { grid-template-columns: repeat(4, 1fr); gap: var(--s-8); } }

.step { position: relative; padding-top: var(--s-6); border-top: 2px solid var(--hairline-2); }
.step__n {
  font-family: var(--display); font-size: 42px; font-weight: 800;
  color: var(--gold); line-height: 1; margin: 0 0 var(--s-4); letter-spacing: -.04em;
}
.step p { font-size: 14.5px; margin: 0; }

/* ------------------------------------------------------------------- faq -- */

.faq { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-lg); overflow: hidden; }
.faq__item { background: var(--bg); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-6);
  font-size: 16px; font-weight: 600; color: var(--text);
  cursor: pointer; list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; flex: none;
  width: 11px; height: 11px;
  border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--t) var(--ease);
}
.faq__item[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq__item p { margin: 0; padding: 0 var(--s-6) var(--s-6); font-size: 14.5px; max-width: 68ch; }

/* --------------------------------------------------------------- contact -- */

.contact { background: var(--bg-elevated); border-top: 1px solid var(--hairline); }
.cards { display: grid; gap: var(--s-5); }
@media (min-width: 820px) { .cards { grid-template-columns: repeat(3, 1fr); } }

.ccard {
  padding: var(--s-8);
  border-radius: var(--r-lg);
  border: 1px solid var(--hairline-2);
  background: var(--bg-surface);
  text-align: center;
}
.ccard__where { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin: 0 0 var(--s-3); }
.ccard__num {
  font-family: var(--display); font-size: clamp(19px, 2.2vw, 23px); font-weight: 700;
  color: var(--text); letter-spacing: -.02em; margin: 0 0 var(--s-5);
  overflow-wrap: anywhere;
}
.ccard__acts { display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; }

/* ------------------------------------------------------------------ foot -- */

.foot { padding: var(--s-16) 0 var(--s-8); border-top: 1px solid var(--hairline); }
.foot__inner { display: grid; gap: var(--s-10); }
@media (min-width: 860px) { .foot__inner { grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: var(--s-8); } }

.foot__blurb { margin: var(--s-4) 0 0; font-size: 13.5px; color: var(--text-3); max-width: 34ch; }
.foot__col { display: grid; align-content: start; gap: 10px; }
.foot__h { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); margin: 0 0 4px; font-weight: 600; }
.foot__col a { font-size: 14px; color: var(--text-2); transition: color var(--t) var(--ease); }
.foot__col a:hover { color: var(--gold); }

.foot__bottom {
  display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between; align-items: center;
  margin-top: var(--s-12); padding-top: var(--s-6);
  border-top: 1px solid var(--hairline);
  font-size: 12.5px; color: var(--text-3);
}
.powered { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); }
.powered:hover { color: var(--gold); }
.powered svg { color: var(--gold); }

/* ---------------------------------------------------------------- reveal -- */

/* Hidden ONLY where a script can un-hide it.
   `scripting: enabled` is the whole trick: with JavaScript off, or in a browser
   that does not know the feature, the rule never applies and the page is simply
   visible. The usual approach — hide by default, reveal with JS — turns a blocked
   script into a blank page, and the usual fix for that is an inline script, which
   this site's CSP does not allow. */
.reveal { transition: opacity 620ms var(--ease), transform 620ms var(--ease); }
@media (scripting: enabled) {
  .reveal { opacity: 0; transform: translateY(18px); }
}
.reveal.is-in { opacity: 1; transform: none; }
.d1 { transition-delay: 70ms; }
.d2 { transition-delay: 140ms; }
.d3 { transition-delay: 210ms; }
.d4 { transition-delay: 280ms; }

/* Reduced motion: visible at once, no travel. */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------- 404 -- */
/* Classes rather than style attributes: the CSP has no 'unsafe-inline' in
   style-src, so an inline style on this page would simply not apply and the
   error page would arrive unstyled. */
.errpage { min-height: 100vh; display: grid; place-items: center; text-align: center; }
.errpage__lede { margin-inline: auto; }
.errpage__act { margin-top: var(--s-8); }