/* ---------------------------------------------------------------------------
   The Barber Hub — landing page
   Dark theme in the spirit of hyperfoundation.org, branded with
   Barber Hub purple (#ad00ff) and Oswald / Inter type.
--------------------------------------------------------------------------- */

:root {
  /* Brand palette: #e3dedb / #adaba8 / #474646 / #1b1b1b / #ad00ff.
     No pure black or white — darks and off-whites come from this set. */
  /* Page darks sit a step below the app's #1b1b1b, so the launch wipe
     (which uses the app colour) reads against them and text has more
     contrast against the background. */
  --bg: #131313;
  --bg-raised: #191818;
  --ink: #e3dedb;
  --ink-dim: #adaba8;
  --ink-faint: #8a8885;      /* midpoint of #adaba8 and #474646 */
  --dark: #1b1b1b;
  --grey-mid: #474646;
  --purple: #ad00ff;
  --purple-soft: #c9a6ff;
  --line: rgba(201, 166, 255, 0.14);
  --nav-h: 64px;
  /* Top clearance for snapped panels: floating bar (top offset + height)
     plus breathing room, on any device size. */
  --panel-top: calc(var(--nav-h) + 14px + clamp(32px, 6vh, 64px));
  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Inter", "Helvetica Neue", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  /* Explicit root colour: iOS 26 Safari samples this as the fallback tint
     for its Liquid Glass chrome, so it must match the dark theme. */
  background: var(--bg);
  scroll-behavior: smooth;
  /* Panel snapping is done in script.js rather than CSS scroll-snap:
     native `mandatory` snap flicks to the next panel on the slightest
     overshoot at a tall panel's bottom edge. The JS settle gives play —
     you must scroll ~35% into the gap before it advances, otherwise it
     bounces back to the boundary. Panels carry their own top padding for
     the floating nav, so a panel top at the viewport top is already clear. */
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* --- Nav ------------------------------------------------------------- */

/* Floating light bar, hyperfoundation-style: a rounded strip lifted off
   the page, light grey with the black logo. */
.nav {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1120px, calc(100% - 28px));
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Right inset = the CTA's vertical centring gap (≈ (62 − 44) / 2 = 9px),
     so the Launch App button has equal margin on top, bottom and right. */
  padding: 0 9px 0 clamp(16px, 2.5vw, 26px);
  z-index: 10;
  background: rgba(227, 222, 219, 0.94);
  border: 1px solid rgba(227, 222, 219, 0.6);
  border-radius: 999px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.nav__brand {
  display: flex;
  align-items: center;
}

.nav__logo {
  height: 48px;
  width: auto;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 34px);
}

.nav__link {
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: #474646;
  transition: color 0.2s ease;
}

.nav__link:hover { color: #1b1b1b; }

.nav__cta {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 26px;
  border-radius: 999px;
  background: var(--purple);
  color: #e3dedb;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.nav__cta:hover {
  background: #8f00d4;
  box-shadow: 0 4px 18px rgba(173, 0, 255, 0.45);
}

/* Hamburger — hidden on desktop, shown when the bar collapses. */
.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0 9px;
  border: none;
  background: transparent;
  cursor: pointer;
}

.nav__toggle span {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: #1b1b1b;
  transition: transform 0.28s ease, opacity 0.2s ease;
}

/* --- Hero ------------------------------------------------------------ */

.hero {
  position: relative;
  /* Large viewport height: with Safari's bottom bar expanded the hero must
     still reach under the translucent bar, or the light .product panel
     shows through it. */
  min-height: 100vh;
  min-height: 100lvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* iOS 26 Safari's floating Liquid Glass bar overlays and tints from page
   content below even 100lvh, so a 100lvh hero still lets the light product
   panel bleed through the bar at the top of the page. On touch devices,
   overdraw the hero 120px past the viewport bottom: the extra dark strip
   sits under the bar / below the fold so it is invisible, and touch
   scrolling is native (no snap JS) so nothing else is affected. The inner
   bottom padding grows by the same amount, which pulls the flex-centred
   content back up to where it sat before the overdraw. */
@media (pointer: coarse) {
  .hero {
    min-height: calc(100vh + 120px);
    min-height: calc(100lvh + 120px);
  }

  .hero__inner {
    padding-bottom: calc(96px + 120px);
  }
}

.hero__dots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Soften the matrix so dots bleed into each other rather than reading
     as crisp points; the slight scale hides the blur's faded edges. */
  filter: blur(4.1px);
  transform: scale(1.04);
}

.hero__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: calc(var(--nav-h) + 24px) 24px 96px;
  max-width: 820px;
}

.hero__logo {
  display: block;
  width: clamp(180px, 24vw, 270px);
  aspect-ratio: 760 / 603;
  height: auto;
  margin: 0 auto 32px;
  filter: drop-shadow(0 0 32px rgba(173, 0, 255, 0.35));
  /* Let the intro ball roll in from outside the logo's own box */
  overflow: visible;
}

.hero__heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(44px, 8vw, 92px);
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-wrap: balance;
}

.hero__sub {
  margin: 24px auto 0;
  max-width: 560px;
  font-size: clamp(16px, 2vw, 19px);
  color: var(--ink-dim);
  text-wrap: pretty;
}

/* "completely free" pops in the same pale grey as the heading */
.hero__sub-em {
  color: var(--ink);
  font-weight: 600;
  font-style: italic;
}

.hero__actions {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.btn {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 15px 34px;
  border-radius: 999px;
  transition: transform 0.15s ease, box-shadow 0.2s ease,
    background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn--primary {
  background: var(--purple);
  color: #e3dedb;
  box-shadow: 0 0 28px rgba(173, 0, 255, 0.35);
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 44px rgba(173, 0, 255, 0.55);
}

.btn--ghost {
  border: 1px solid var(--line);
  color: var(--ink-dim);
}

.btn--ghost:hover {
  border-color: var(--purple-soft);
  color: var(--ink);
}

/* Staged hero reveal: content is fully visible in plain HTML (crawlers and
   no-JS agents see everything). An inline <head> script adds .intro-pending
   to <html> before the first paint — so nothing flashes visible-then-hidden —
   and script.js adds .intro-done to stage the pieces in once the logo
   animation finishes. Only the background + logo animation show until then. */
.intro-pending .nav,
.intro-pending .hero__heading,
.intro-pending .hero__sub,
.intro-pending .hero__actions {
  opacity: 0;
}

.intro-pending .hero__heading,
.intro-pending .hero__sub,
.intro-pending .hero__actions {
  transform: translateY(16px);
}

.intro-pending .nav {
  transform: translateX(-50%) translateY(-18px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.intro-pending .hero__heading { transition: opacity 0.55s ease, transform 0.55s ease; }
.intro-pending .hero__sub { transition: opacity 0.55s ease 0.2s, transform 0.55s ease 0.2s; }
.intro-pending .hero__actions { transition: opacity 0.55s ease 0.4s, transform 0.55s ease 0.4s; }

.intro-pending.intro-done .nav {
  opacity: 1;
  transform: translateX(-50%);
}
.intro-pending.intro-done .hero__heading,
.intro-pending.intro-done .hero__sub,
.intro-pending.intro-done .hero__actions {
  opacity: 1;
  transform: none;
}

/* --- Product ---------------------------------------------------------- */

/* Light off-white panel with a faint purple tint + soft purple glows,
   in the spirit of hyperfoundation's light "Decentralized" screen. */
.product {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--panel-top) clamp(20px, 4vw, 24px) clamp(56px, 8vh, 96px);
  color: #1b1b1b;
  background: #e1cff0;
}

.product__inner {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  text-align: center;
}

.product__kicker {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--purple);
}

.product__heading {
  margin-top: 14px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 4.6vw, 52px);
  line-height: 1.12;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #1b1b1b;
  text-wrap: balance;
}

.product__lead {
  margin: 22px auto 0;
  max-width: 640px;
  font-size: clamp(16px, 2vw, 19px);
  color: #474646;
  text-wrap: pretty;
}

.product__grid {
  margin-top: clamp(46px, 6vw, 72px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 84px);
  justify-items: center;
}

.phone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* Purple glow pooled behind each phone. */
.phone__frame {
  position: relative;
  width: clamp(212px, 27vw, 300px);
  aspect-ratio: 111 / 200;
  border-radius: 30px;
  overflow: hidden;
  /* seam colour: the 1% gap between the two clips shows this diagonal line */
  background: var(--purple);
  border: 1px solid rgba(173, 0, 255, 0.3);
  box-shadow:
    0 34px 70px rgba(76, 20, 120, 0.28),
    0 0 0 6px rgba(173, 0, 255, 0.06);
}

.phone__frame::after {
  content: "";
  position: absolute;
  inset: -22%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(173, 0, 255, 0.35), transparent 70%);
}

/* Two screenshots sharing one phone frame, split by a diagonal seam.
   Each fills the frame; the clips keep the top of the upper shot and the
   lower diagonal of the bottom shot, so together they read as one phone. */
.phone__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.phone__img--top {
  clip-path: polygon(0 0, 100% 0, 100% 38%, 0 62%);
}

.phone__img--bottom {
  clip-path: polygon(0 63%, 100% 39%, 100% 100%, 0 100%);
}

.phone figcaption {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--purple);
}

@media (max-width: 700px) {
  .product__grid { grid-template-columns: 1fr; gap: 48px; }
  /* Phones get a comfortable size in the single column without touching edges */
  .phone__frame { width: min(68vw, 300px); }
}

/* --- About ----------------------------------------------------------- */

.about {
  position: relative;
  border-top: 1px solid var(--line);
  background:
    radial-gradient(1200px 500px at 50% -200px, rgba(173, 0, 255, 0.07), transparent 70%),
    var(--bg-raised);
  min-height: 100svh;
  padding: var(--panel-top) clamp(20px, 4vw, 24px) clamp(72px, 10vh, 120px);
  display: flex;
  align-items: center;
}

.about__inner {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  text-align: center;
}

.about__kicker {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--purple-soft);
}

.about__heading {
  margin-top: 14px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 4.6vw, 52px);
  line-height: 1.12;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-wrap: balance;
}

.about__lead {
  margin: 22px auto 0;
  max-width: 640px;
  color: var(--ink-dim);
  font-size: clamp(16px, 2vw, 19px);
}

.about__grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  text-align: left;
}

.about__card {
  border: 1px solid rgba(201, 166, 255, 0.38);
  border-radius: 16px;
  padding: 28px 26px;
  background: none;
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.about__card:hover {
  border-color: rgba(173, 0, 255, 0.7);
  transform: translateY(-3px);
}

.about__card h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--purple-soft);
}

.about__card p {
  margin-top: 12px;
  font-size: 15.5px;
  color: var(--ink-dim);
}

.about__lead--mission { margin-top: 14px; }

/* Small caps label introducing the values cards */
.about__values-label {
  margin-top: 48px;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--purple-soft);
}

.about__cta { margin-top: 48px; }

.about__closing {
  margin-bottom: 18px;
  font-family: var(--font-display);
  font-size: clamp(18px, 2.4vw, 24px);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}

/* --- Footer ----------------------------------------------------------- */

.footer {
  border-top: 1px solid var(--line);
  background: var(--bg);
  padding: var(--panel-top) clamp(20px, 4vw, 48px) 32px;
}

.footer__inner {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 3.4fr;
  gap: 40px;
}

.footer__logo {
  width: clamp(96px, 10vw, 126px);
  height: auto;
  margin-bottom: 10px;
}

.footer__tag {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
}

.footer__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.footer__col h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 12px;
}

.footer__list { list-style: none; }

.footer__list li {
  margin-bottom: 5px;
  font-size: 13px;
  color: var(--ink-faint);
}

.footer__list a {
  color: var(--ink-dim);
  transition: color 0.2s ease;
}

.footer__list a:hover { color: var(--purple-soft); }

/* Disclaimer distinguishing the SEO example lists from real links */
.footer__note {
  max-width: 1120px;
  margin: 32px auto 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-faint);
}

.footer__legal {
  max-width: 1120px;
  margin: 20px auto 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-faint);
}

.footer__legal a { color: var(--ink-dim); }
.footer__legal a:hover { color: var(--purple-soft); }

/* --- Legal pages (terms.html / privacy.html) ---------------------------- */

.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--panel-top) clamp(20px, 4vw, 24px) 80px;
}

.legal h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 5vw, 48px);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.1;
}

.legal__updated {
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--ink-faint);
}

.legal h2 {
  margin: 40px 0 12px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--purple-soft);
}

.legal p,
.legal li {
  margin-bottom: 12px;
  font-size: 15.5px;
  color: var(--ink-dim);
}

.legal ul {
  padding-left: 22px;
  margin-bottom: 12px;
}

.legal a {
  color: var(--purple-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal__footer {
  border-top: 1px solid var(--line);
  padding: 24px clamp(20px, 4vw, 48px) 32px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-faint);
}

.legal__footer a { color: var(--ink-dim); }
.legal__footer a:hover { color: var(--purple-soft); }

/* --- Launch transition -------------------------------------------------- */

/* Stand-in pill for the clicked button: fixed-position so the vanishing act
   (narrow to a circle, shrink to nothing) never reflows neighbouring layout.
   The real button keeps its space, merely hidden. */
.launch-pill {
  position: fixed;
  border-radius: 999px;
  z-index: 998;
  pointer-events: none;
}

/* …then a circle of the app's background colour erupts from that point and
   engulfs the screen before navigation (sized/animated in script.js). */
.launch-wipe {
  position: fixed;
  border-radius: 50%;
  background: #1b1b1b;
  transform: scale(0);
  z-index: 999;
  pointer-events: none;
}

/* --- Responsive -------------------------------------------------------- */

@media (max-width: 860px) {
  .about__grid { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr; gap: 40px; }
}

/* Collapse the bar to a hamburger, hyperfoundation-style: the icon + name
   stay, the links drop into a rounded panel below the pill. */
@media (max-width: 680px) {
  .nav__toggle { display: flex; }

  .nav__links {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    left: auto;
    min-width: 210px;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 12px;
    background: rgba(227, 222, 219, 0.97);
    border: 1px solid rgba(227, 222, 219, 0.6);
    border-radius: 20px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
  }

  .nav--open .nav__links {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
  }

  .nav__link {
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 16px;
  }

  .nav__cta {
    display: flex;
    justify-content: center;
    height: auto;
    padding: 12px;
  }

  /* Hamburger morphs to an X when open */
  .nav--open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav--open .nav__toggle span:nth-child(2) { opacity: 0; }
  .nav--open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

@media (max-width: 560px) {
  .footer__cols { grid-template-columns: 1fr 1fr; gap: 24px; }
  .hero__inner { padding: calc(var(--nav-h) + 32px) 20px 72px; }
  .hero__sub { padding: 0 4px; }
  .product__lead,
  .about__lead { padding: 0 4px; }
  .about__card { padding: 24px 20px; }
  .footer__inner { gap: 36px; }
}

@media (max-width: 420px) {
  .nav__logo { height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}