/* BhoomiTrack — bhoomitrack.com
 *
 * This is not a separate visual language. Every token below is lifted from the
 * shipped Android app so the site and the product are the same thing:
 *   ui/theme/Color.kt   — palette
 *   ui/theme/Dimens.kt  — BtRadius, BtSpacing, BtChipTintAlpha
 *   ui/theme/Type.kt    — weights, sizes, tracking
 * If a value here disagrees with those files, those files are right.
 */

:root {
  /* Color.kt */
  --bg:          #0B0E14;   /* BtBlack     — screen background */
  --surface:     #161B22;   /* BtSurface   — the one card surface */
  --surface-2:   #1C2229;   /* BtSurface2  — sheets, menus */
  --surface-3:   #232A33;   /* BtSurface3  — fields, icon chips */

  --gold:        #F5B800;   /* BtGold      — primary accent */
  --gold-light:  #FFD54F;   /* BtGoldLight */
  --gold-dim:    #7A5F35;   /* BtGoldDim */
  --gold-cont:   #2A1F0E;   /* BtGoldContainer */

  --green:       #34C759;   /* BtGreen     — success / in stock */
  --green-dim:   #1A3D26;
  --red:         #FF453A;   /* BtRed       — error / low stock */
  --red-dim:     #3D1A1A;
  --blue:        #64B5F6;   /* BtBlue      — inventory / neutral metric */
  --blue-dim:    #16283A;
  --purple:      #CF9FFF;   /* BtPurple    — chat */
  --purple-dim:  #2A1F3D;

  --white:       #F2F2F7;   /* BtWhite     — primary text */
  --gray1:       #AEAEB2;   /* BtGray1     — emphasised secondary */
  --gray2:       #8B93A1;   /* BtGray2     — secondary, 5.85:1 on surface */
  --divider:     #252B36;   /* BtDivider   — the hairline */

  /* Dimens.kt — BtRadius */
  --r-tag:   8px;
  --r-chip: 14px;
  --r-card: 16px;
  --r-hero: 18px;

  /* Dimens.kt — BtSpacing, 4dp base */
  --s-xs: 4px;  --s-sm: 8px;   --s-md: 12px;  --s-base: 16px;
  --s-lg: 20px; --s-xl: 24px;  --s-xxl: 32px; --s-xxxl: 40px;

  --chip-tint: .09;         /* BtChipTintAlpha */

  --font: "Roboto", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --gut: clamp(20px, 5vw, 48px);
  --maxw: 1140px;
  --sec-y: clamp(56px, 9vw, 112px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--white);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* height:auto is load-bearing — the width and height attributes on every image
   element are presentational hints, and without this they fix the height and
   stretch the screenshots vertically. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
::selection { background: var(--gold); color: var(--bg); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); }
.section { padding-block: var(--sec-y); }
.rule { border-top: 1px solid var(--divider); }

/* ── Type — Type.kt weights, sizes and tracking ──────────────────────── */

h1, h2, h3, h4 { margin: 0; font-weight: 700; text-wrap: balance; }

.display {                       /* displayLarge, scaled for the web */
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1.1;
  letter-spacing: -.028em;
  font-weight: 700;
}
.h2 {                            /* headlineLarge */
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.18;
  letter-spacing: -.02em;
}
.h3 {                            /* headlineSmall / titleLarge */
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: -.005em;
  font-weight: 600;
}

.body-lg { font-size: 17px; line-height: 1.6; color: var(--gray1); }
.body    { font-size: 15px; line-height: 1.6; color: var(--gray1); }
.small   { font-size: 13px; line-height: 1.5; color: var(--gray2); }

.label {                         /* labelMedium */
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--gray2);
}

.measure { max-width: 60ch; }
.num { font-variant-numeric: tabular-nums; }
.gold { color: var(--gold); }

/* ── Buttons — primary = BtGold on BtBlack ───────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-sm);
  padding: 14px 22px;
  font: inherit; font-size: 15px; font-weight: 600; letter-spacing: .01em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--r-chip);
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .1s ease;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 17px; height: 17px; }

.btn--gold { background: var(--gold); color: var(--bg); }
.btn--gold:hover { background: var(--gold-light); }

.btn--quiet { background: var(--surface); color: var(--white); border-color: var(--divider); }
.btn--quiet:hover { border-color: var(--gray2); background: var(--surface-2); }

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px; border-radius: var(--r-tag);
}

/* ── Card — one surface, hairline border; meaning rides on the chip ──── */

.card {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--r-card);
  padding: var(--s-lg);
}

/* the icon chip: a tinted recess, never a coloured block (BtChipTintAlpha) */
.chip {
  width: 40px; height: 40px;
  border-radius: var(--r-chip);
  display: grid; place-items: center;
  flex: none;
  color: var(--c, var(--gold));
  background: color-mix(in srgb, var(--c, var(--gold)) 9%, transparent);
}
.chip svg { width: 20px; height: 20px; }
.chip--blue { --c: var(--blue); }
.chip--gold { --c: var(--gold); }
.chip--red { --c: var(--red); }
.chip--green { --c: var(--green); }
.chip--purple { --c: var(--purple); }

/* the app's gold notice banner, as it appears on the owner dashboard */
.banner {
  display: flex; align-items: center; gap: var(--s-md);
  background: var(--gold-cont);
  border: 1px solid var(--gold-dim);
  border-radius: var(--r-chip);
  padding: 13px var(--s-base);
  color: var(--gold);
  font-size: 15px; font-weight: 600;
}
.banner svg { width: 20px; height: 20px; flex: none; }

/* status pill — tinted ground, coloured text (BtRadius.Tag) */
.pill {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  border-radius: var(--r-tag);
  font-size: 12px; font-weight: 600; letter-spacing: .01em;
}
.pill--approved { background: var(--green-dim); color: var(--green); }
.pill--pending  { background: var(--gold-cont); color: var(--gold); }
.pill--low      { background: var(--red-dim);   color: var(--red); }

/* ── Header ──────────────────────────────────────────────────────────── */

.site-head {
  position: sticky; top: 0; z-index: 20;
  background: rgba(11,14,20,.85);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--divider);
}
.site-head .wrap { display: flex; align-items: center; gap: var(--s-xl); height: 64px; }
/* The app icon's lower half is #0D0D0D, within a couple of points of the page
   ground, so on this background the mark loses its own edge. A hairline ring
   restores the boundary without touching the artwork. */
.brand-mark { border-radius: 22%; box-shadow: 0 0 0 1px rgba(242,242,247,.14); }

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 17px; letter-spacing: -.02em; }
.site-head nav { margin-left: auto; display: flex; gap: var(--s-xl); font-size: 14px; font-weight: 500; }
.site-head nav a { color: var(--gray1); text-decoration: none; }
.site-head nav a:hover { color: var(--white); }
.site-head .btn { padding: 9px 16px; font-size: 14px; }
@media (max-width: 760px) { .site-head nav { display: none; } .site-head .btn { margin-left: auto; } }

/* ── Hero ────────────────────────────────────────────────────────────── */

.hero { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,330px); gap: clamp(32px,5vw,72px); align-items: center; }
.hero .display { max-width: 16ch; }
@media (max-width: 940px) { .hero { grid-template-columns: 1fr; } .hero-shot { max-width: 320px; } }

/* the phone: the app's own card treatment, not a chrome mockup */
.phone {
  border: 1px solid var(--divider);
  border-radius: 24px;
  padding: 6px;
  background: var(--surface);
}
.phone img { border-radius: 19px; width: 100%; }

/* ── Tiles — the dashboard's own vocabulary, no invented figures ─────── */

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,210px),1fr)); gap: var(--s-md); }
.tile { display: flex; align-items: center; gap: var(--s-md); }
.tile h3 { font-size: 15px; font-weight: 600; }
.tile p { margin: 2px 0 0; }

/* ── Steps — a ruled list, the way the app rules its own rows ───────── */

.steps { list-style: none; margin: 36px 0 0; padding: 0; }
.steps li {
  display: grid;
  grid-template-columns: 44px minmax(0,15rem) minmax(0,1fr);
  gap: 0 clamp(16px,3vw,40px);
  align-items: start;
  padding: var(--s-xl) 0;
  border-top: 1px solid var(--divider);
}
.steps li:last-child { border-bottom: 1px solid var(--divider); }
.step-n { color: var(--gold); font-weight: 700; font-size: 13px; letter-spacing: .06em; padding-top: 3px; font-variant-numeric: tabular-nums; }
.steps .body { margin: 0; }
.step-pills { grid-column: 3; display: flex; flex-wrap: wrap; gap: var(--s-sm); margin-top: var(--s-md); }
@media (max-width: 780px) {
  .steps li { grid-template-columns: 36px minmax(0,1fr); row-gap: var(--s-sm); }
  .steps .body, .step-pills { grid-column: 2; }
}

/* ── Screenshot strip — reads like a store listing, scrolls on narrow ── */

.shots {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(178px, 1fr);
  gap: var(--s-base);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding-bottom: var(--s-md);
}
.shots figure { margin: 0; scroll-snap-align: start; }
.shots figcaption { margin-top: var(--s-md); font-size: 13px; color: var(--gray2); }
@media (max-width: 760px) { .shots { grid-auto-columns: 200px; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); } }

/* ── Roles ───────────────────────────────────────────────────────────── */

.roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,300px),1fr)); gap: var(--s-base); }
.role-head { display: flex; align-items: center; gap: var(--s-md); padding-bottom: var(--s-base); border-bottom: 1px solid var(--divider); margin-bottom: var(--s-sm); }
.role-list { margin: 0; padding: 0; list-style: none; }
.role-list li { display: flex; gap: var(--s-md); padding: 11px 0; font-size: 15px; color: var(--gray1); }
.role-list li + li { border-top: 1px solid var(--divider); }
.role-list svg { width: 17px; height: 17px; flex: none; margin-top: 4px; color: var(--gold); }

/* ── Founders ────────────────────────────────────────────────────────── */

.founders { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,330px),1fr)); gap: var(--s-base); }
.founder { display: grid; grid-template-columns: 112px minmax(0,1fr); gap: var(--s-lg); align-items: start; }
@media (max-width: 420px) { .founder { grid-template-columns: 1fr; } .founder-photo { max-width: 140px; } }

.founder-photo { border-radius: var(--r-chip); overflow: hidden; border: 1px solid var(--divider); }
.founder-photo img { aspect-ratio: 4/5; object-fit: cover; width: 100%; height: auto; }
.founder-role { color: var(--gold); font-size: 13px; font-weight: 600; margin: 3px 0 0; }
.founder-bio { margin: var(--s-md) 0 0; font-size: 14px; line-height: 1.6; color: var(--gray1); }
.founder-links { margin-top: var(--s-md); display: flex; flex-direction: column; gap: 7px; font-size: 13px; }
.founder-links a { color: var(--gray1); text-decoration: none; display: inline-flex; align-items: center; gap: 7px; width: fit-content; }
.founder-links a:hover { color: var(--gold); }
.founder-links svg { width: 14px; height: 14px; flex: none; color: var(--gray2); }

/* ── Contact ─────────────────────────────────────────────────────────── */

.contact { text-align: center; }
.tels { display: flex; flex-wrap: wrap; gap: var(--s-md); justify-content: center; margin-top: var(--s-xl); }
.tel-card { display: flex; align-items: center; gap: var(--s-md); text-decoration: none; min-width: 265px; text-align: left; }
.tel-card:hover { border-color: var(--gold-dim); }
.tel-card .tel-num { font-size: 17px; font-weight: 600; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.tel-card .small { margin: 1px 0 0; }

/* ── Footer ──────────────────────────────────────────────────────────── */

.site-foot { border-top: 1px solid var(--divider); padding-block: var(--s-xxl); }
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: var(--s-lg) var(--s-xxl); justify-content: space-between; align-items: center; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: var(--s-lg); font-size: 14px; }
.site-foot a { color: var(--gray1); text-decoration: none; }
.site-foot a:hover { color: var(--gold); }

/* ── Legal documents ─────────────────────────────────────────────────── */

.doc { max-width: 760px; margin: 0 auto; padding: clamp(32px,6vw,60px) var(--gut) 80px; }
.doc h1 { font-size: clamp(28px,4vw,40px); line-height: 1.12; letter-spacing: -.025em; }
.doc h2 { font-size: 20px; line-height: 1.3; letter-spacing: -.01em; margin: 40px 0 12px; font-weight: 600; }
.doc h3 { font-size: 16px; margin: 26px 0 8px; font-weight: 600; }
.doc p, .doc li { color: var(--gray1); font-size: 15.5px; line-height: 1.65; }
.doc strong { color: var(--white); font-weight: 600; }
.doc ul, .doc ol { padding-left: 20px; }
.doc li { margin: 6px 0; }
.doc a { color: var(--gold); text-underline-offset: .18em; }
.doc .updated { font-size: 13px; color: var(--gray2); }
.doc code { background: var(--surface-3); padding: 2px 6px; border-radius: 6px; font-size: .9em; color: var(--white); }
.doc hr { border: 0; border-top: 1px solid var(--divider); margin: 40px 0; }

.doc table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14.5px; min-width: 460px; }
.doc th, .doc td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--divider); vertical-align: top; color: var(--gray1); }
.doc thead th { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; font-weight: 500; color: var(--gray2); }
.doc tbody td:first-child { color: var(--white); }
.doc-scroll { overflow-x: auto; overscroll-behavior-x: contain; }

.callout { background: var(--surface); border: 1px solid var(--divider); border-radius: var(--r-card); padding: var(--s-lg); margin: 24px 0; }
.callout > :first-child { margin-top: 0; }
.callout > :last-child { margin-bottom: 0; }

.backlink { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-size: 14px; font-weight: 500; color: var(--gray2); margin-bottom: 28px; }
.backlink:hover { color: var(--gold); }
.backlink svg { width: 14px; height: 14px; }

@media (prefers-reduced-motion: reduce) { * { transition-duration: .01ms !important; } }

/* Owner console link (WEB-APP-PLAN §3). Quiet by design: the gold `Call us`
   button stays the only hot action in this header. */
.site-head .nav-login { color: var(--gold); font-weight: 600; }
.site-head .nav-login:hover { text-decoration: underline; }