/* ==========================================================================
   BVD Software — landing page
   Plain CSS, no build step. Sections follow the order of the markup.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */

:root {
  /* Brand */
  --brand: #4353f0;
  --brand-dark: #3341d6;
  --brand-soft: #eef0ff;

  /* Per-app accents. Every .app section overrides these inline. */
  --accent: var(--brand);
  --accent-dark: var(--brand-dark);
  --accent-soft: var(--brand-soft);
  --accent-text: #ffffff;
  /* A version of the accent dark enough to read as text on a white
     background. Light accents (Competitie's yellow) are unreadable otherwise. */
  --accent-ink: var(--brand-dark);

  /* Ink */
  --ink: #0d1b3e;
  --ink-soft: #5c6780;
  --ink-faint: #8a93a8;

  /* Surfaces */
  --surface: #ffffff;
  --surface-alt: #fafbfd;
  --hairline: #e6e9f0;

  /* Type */
  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
    'Liberation Mono', monospace;

  /* Layout */
  --page: 1140px;
  --gutter: 24px;

  /* Phone mockup width. A phone is ~2.09x as tall as it is wide, so tying the
     width to viewport height is what keeps a whole app section on screen.
     Overridden below 900px, where the layout stacks and vh stops being the
     constraint. */
  --phone-w: clamp(200px, 30vh, 310px);

  color-scheme: light;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  /* keep anchored sections clear of the sticky header */
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 800;
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   3. Shared helpers
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.lede {
  color: var(--ink-soft);
  font-size: 17px;
  max-width: 46ch;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-text, #fff);
  font-weight: 700;
  font-size: 16px;
  box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--accent) 70%, transparent);
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.btn:hover {
  background: var(--accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -12px color-mix(in srgb, var(--accent) 75%, transparent);
}

.btn:active {
  transform: translateY(0);
}

.btn svg {
  flex: none;
}

/* Visible keyboard focus everywhere, without a ring on mouse clicks. */
:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 3px;
  border-radius: 6px;
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 74px;
}

.nav__logo {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.nav__logo span {
  color: var(--ink-faint);
  font-weight: 600;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 34px;
}

.nav__link {
  position: relative;
  padding: 6px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-soft);
  transition: color 0.18s ease;
}

.nav__link:hover {
  color: var(--ink);
}

.nav__link.is-active {
  color: var(--brand);
}

.nav__link.is-active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--brand);
}

@media (max-width: 720px) {
  .nav__inner {
    flex-direction: column;
    gap: 6px;
    padding-block: 14px;
    min-height: 0;
  }

  .nav__links {
    gap: 22px;
  }

  .nav__link {
    font-size: 14px;
  }

  /* The stacked header is taller than the desktop one, so anchor links need
     a bigger offset or they land underneath it. */
  html {
    scroll-padding-top: 116px;
  }
}

/* --------------------------------------------------------------------------
   6. App section — one per application
   -------------------------------------------------------------------------- */

/* Each app fills the screen, so only one is visible at a time.
   `align-content: center` centres the content block inside that full height —
   which also keeps it clear of the sticky header overlaying the top ~74px. */
.app {
  display: grid;
  align-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(40px, 5vh, 80px) 0;
  background: var(--surface);
}

.app--alt {
  background: var(--surface-alt);
}

/* Top-aligned, not centred: the copy starts level with the top of the
   phone/laptop rather than floating in the middle of the section. */
.app__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 56px;
}

.app__head {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Tile for an inline SVG glyph */
.app__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 62px;
  height: 62px;
  border-radius: 17px;
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--accent) 88%, #fff),
    var(--accent-dark));
  color: #fff;
  box-shadow: 0 12px 22px -12px color-mix(in srgb, var(--accent) 85%, transparent);
}

/* A real app icon brings its own artwork and background.
   `display: block` (not the grid above) so the image's `height: 100%`
   resolves against the tile instead of falling back to its attribute. */
.app__icon--img {
  display: block;
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(13, 27, 62, 0.07),
    0 12px 22px -12px rgba(13, 27, 62, 0.45);
}

.app__icon--img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* For a logo rather than a full-bleed app icon: inset it so it has room to
   breathe inside the tile, and keep its aspect ratio. */
.app__icon--pad img {
  padding: 16%;
  object-fit: contain;
}

/* A lighter inset, for an app icon whose artwork runs up to its edges. */
.app__icon--inset img {
  padding: 11%;
  object-fit: contain;
}

.app__name {
  font-size: clamp(30px, 3.4vw, 40px);
}

.app__tagline {
  margin-top: 6px;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-soft);
}

.app__desc {
  margin-top: 26px;
}

.app__cta {
  margin-top: 32px;
}

.app__url {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  font-size: 15px;
  color: var(--ink-soft);
  transition: color 0.18s ease;
}

.app__url:hover {
  color: var(--accent-ink);
}

.app__url svg {
  color: var(--ink-faint);
}

.app__badge {
  display: inline-block;
  margin-top: 32px;
  padding: 11px 22px;
  border: 1.5px dashed color-mix(in srgb, var(--accent) 45%, #fff);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 15px;
  font-weight: 700;
}

/* The placeholder section reads as a draft, not a shipped product. */
.app--soon .app__icon {
  opacity: 0.9;
}

.app--soon .app__device {
  opacity: 0.85;
}

@media (max-width: 900px) {
  .app {
    padding: 56px 0;
  }

  .app__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* min-width:0 so a wide code block can't push the section past the
     viewport; .code__body scrolls on its own instead. */
  .app__device {
    order: 2;
    min-width: 0;
  }
}

/* --------------------------------------------------------------------------
   7. Devices
   The screen of each device is a CSS container, and the canvas inside sets a
   font size derived from the frame's width. Anything drawn inside a screen is
   sized in `em`, so it stays proportional at every breakpoint.
   -------------------------------------------------------------------------- */

/* --- Laptop --- */

.laptop {
  width: 100%;
  filter: drop-shadow(0 26px 40px rgba(13, 27, 62, 0.16));
}

.laptop__lid {
  padding: 1.6%;
  border-radius: 14px 14px 4px 4px;
  background: linear-gradient(160deg, #2c3242, #171b26);
}

.laptop__screen {
  container-type: inline-size;
  overflow: hidden;
  border-radius: 7px 7px 0 0;
  background: #fff;
  aspect-ratio: 16 / 10;
}

.laptop__canvas {
  /* ~14px of screen type at a 1280px design width */
  font-size: 1.28cqw;
  width: 100%;
  height: 100%;
}

/* Base: a shallow trapezoid, wider than the lid, with the thumb notch. */
.laptop__base {
  position: relative;
  width: 106%;
  margin-left: -3%;
  height: 14px;
  border-radius: 0 0 11px 11px;
  background: linear-gradient(180deg, #d5d9e2 0%, #b7bdca 62%, #9aa1b1 100%);
  clip-path: polygon(0 0, 100% 0, 98.4% 100%, 1.6% 100%);
}

.laptop__notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 15%;
  height: 5px;
  border-radius: 0 0 6px 6px;
  background: #9aa1b1;
}

@media (max-width: 640px) {
  .laptop__base {
    height: 10px;
  }

  .laptop__notch {
    height: 4px;
  }
}

/* --- Phone --- */

.phone {
  position: relative;
  width: 100%;
  max-width: var(--phone-w);
  margin-inline: auto;
  filter: drop-shadow(0 26px 40px rgba(13, 27, 62, 0.18));
}

.phone__frame {
  position: relative;
  padding: 3.2%;
  border-radius: 13% / 6.2%;
  background: linear-gradient(155deg, #3a4152, #191d28 46%, #2b3140);
}

.phone__screen {
  container-type: inline-size;
  position: relative;
  overflow: hidden;
  border-radius: 10.5% / 5.4%;
  background: #fff;
  aspect-ratio: 9 / 19.5;
}

.phone__canvas {
  /* ~16px of screen type at a 390px design width */
  font-size: 4.1cqw;
  width: 100%;
  height: 100%;
}

/* Dynamic island. Leave it out when the screen is a real screenshot — those
   have no status bar, so it would sit on the app's own header. */
.phone__island {
  position: absolute;
  top: 4.6%;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
  width: 27%;
  height: 3.1%;
  border-radius: 999px;
  background: #10131b;
}

.phone__key {
  position: absolute;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, #2f3545, #454c5e);
}

.phone__key--mute {
  left: -2px;
  top: 15%;
  height: 3.4%;
}

.phone__key--up {
  left: -2px;
  top: 22%;
  height: 6.4%;
}

.phone__key--down {
  left: -2px;
  top: 30.5%;
  height: 6.4%;
}

.phone__key--power {
  right: -2px;
  top: 25%;
  height: 9.2%;
}

/* A phone turned on its side, for an app that is played in landscape. It is
   the same frame given a quarter turn clockwise: the screen's two sides swap,
   the corner radii swap with them, and the keys that ran down the left edge
   now run along the top, measured from the right instead of from the top.
   A phone is ~2.09x as long as it is wide, so every percentage that used to
   resolve against the short side is divided by that to stay the same
   thickness on screen. */
.phone--landscape {
  max-width: calc(var(--phone-w) * 2.09);
}

.phone--landscape .phone__frame {
  padding: 1.53%;
  border-radius: 6.2% / 13%;
}

.phone--landscape .phone__screen {
  aspect-ratio: 19.5 / 9;
  border-radius: 5.4% / 10.5%;
}

.phone--landscape .phone__canvas {
  /* ~16px of screen type at an 845px design width */
  font-size: 1.9cqw;
}

.phone--landscape .phone__key {
  height: 2px;
  width: auto;
}

.phone--landscape .phone__key--mute {
  left: auto;
  right: 15%;
  top: -2px;
  width: 3.4%;
}

.phone--landscape .phone__key--up {
  left: auto;
  right: 22%;
  top: -2px;
  width: 6.4%;
}

.phone--landscape .phone__key--down {
  left: auto;
  right: 30.5%;
  top: -2px;
  width: 6.4%;
}

.phone--landscape .phone__key--power {
  right: 25%;
  top: auto;
  bottom: -2px;
  width: 9.2%;
}

/* --- Tablet ---
   An 11" tablet held in landscape, for apps made for a bigger screen. The
   bezel is padding, and padding percentages all resolve against the width, so
   it is equally thick on every side. With a 1180 × 820 screen inside that
   bezel, the frame is ~0.71x as tall as it is wide; the vertical radii and
   the camera's offset are the horizontal ones divided by that. */

.tablet {
  position: relative;
  width: 100%;
  /* As tall as a phone would be, where the viewport height is the limit */
  max-width: calc(var(--phone-w) * 2.9);
  margin-inline: auto;
  filter: drop-shadow(0 26px 40px rgba(13, 27, 62, 0.18));
}

.tablet__frame {
  position: relative;
  padding: 2.4%;
  border-radius: 4.6% / 6.5%;
  background: linear-gradient(155deg, #3a4152, #191d28 46%, #2b3140);
}

.tablet__screen {
  container-type: inline-size;
  position: relative;
  overflow: hidden;
  border-radius: 2.3% / 3.3%;
  background: #fff;
  aspect-ratio: 1180 / 820;
}

.tablet__canvas {
  /* ~16px of screen type at a 1180px design width */
  font-size: 1.36cqw;
  width: 100%;
  height: 100%;
}

/* Front camera, centred in the top bezel */
.tablet__camera {
  position: absolute;
  top: 1.69%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.7%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #10131b;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.tablet__key {
  position: absolute;
  border-radius: 2px;
  background: linear-gradient(180deg, #2f3545, #454c5e);
}

.tablet__key--power {
  top: -2px;
  left: 6%;
  width: 6%;
  height: 2px;
}

.tablet__key--up,
.tablet__key--down {
  right: -2px;
  width: 2px;
  height: 7%;
}

.tablet__key--up {
  top: 9%;
}

.tablet__key--down {
  top: 18%;
}

/* --------------------------------------------------------------------------
   8. Screenshot carousel
   The track is a native scroll-snap strip, so swiping and trackpad scrolling
   work with no JavaScript. script.js only adds the dots, arrows and caption.
   -------------------------------------------------------------------------- */

.carousel {
  width: 100%;
}

.carousel__track {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}

.carousel__track::-webkit-scrollbar {
  display: none;
}

.carousel__slide {
  flex: 0 0 100%;
  height: 100%;
  margin: 0;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.carousel__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.carousel__ui {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 16px;
}

.carousel__arrow {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}

.carousel__arrow svg {
  width: 17px;
  height: 17px;
}

.carousel__arrow:hover:not(:disabled) {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

.carousel__arrow:disabled {
  opacity: 0.32;
  cursor: default;
}

.carousel__dots {
  display: flex;
  align-items: center;
  gap: 9px;
}

.carousel__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ccd3e0;
  cursor: pointer;
  transition: width 0.22s ease, background 0.22s ease;
}

.carousel__dot[aria-current='true'] {
  width: 24px;
  border-radius: 999px;
  background: var(--accent);
}

.carousel__caption {
  margin-top: 8px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-faint);
}

@media (max-width: 900px) {
  :root {
    --phone-w: min(290px, 68vw);
  }

  .carousel__ui {
    margin-top: 18px;
  }
}

/* A single screenshot filling a device screen, with no carousel around it. */
.shot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* --------------------------------------------------------------------------
   8b. Libraries — a code card instead of a device
   -------------------------------------------------------------------------- */

.code {
  /* Grid/flex items default to min-width:auto, which would let the code's
     widest line push the whole section wider than the viewport. Shrinking is
     fine here: .code__body scrolls horizontally on its own. */
  min-width: 0;
  overflow: hidden;
  border-radius: 14px;
  background: #131a2b;
  box-shadow:
    0 0 0 1px rgba(13, 27, 62, 0.06),
    0 26px 40px -20px rgba(13, 27, 62, 0.45);
}

.code__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  background: #0e1422;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.code__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}

.code__file {
  margin-left: 8px;
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.42);
}

.code__body {
  margin: 0;
  padding: 20px 22px 22px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.75;
  color: #cdd6ea;
  tab-size: 2;
}

.code__install {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: #0e1422;
  font-family: var(--mono);
  font-size: 13.5px;
  color: #cdd6ea;
}

.code__prompt {
  color: var(--accent);
  font-weight: 700;
}

/* Syntax colours, tuned for the dark card */
.tok-key { color: #c792ea; }
.tok-str { color: #9bde7a; }
.tok-tag { color: #7fd3f7; }
.tok-attr { color: #ffcb8b; }
.tok-fn { color: #82aaff; }
.tok-id { color: #e6edf8; }
.tok-com { color: #7a869f; }

@media (max-width: 900px) {
  .code__body {
    font-size: 12.5px;
    padding: 16px 18px 18px;
  }

  .code__install {
    padding: 12px 18px;
    font-size: 12.5px;
  }
}

/* On a phone the deepest nested route is a few pixels wider than the card, so
   drop a size rather than leave the sample scrolling sideways. */
@media (max-width: 430px) {
  .code__body {
    font-size: 11px;
    padding: 14px 16px 16px;
  }

  .code__install {
    padding: 11px 16px;
    font-size: 11px;
  }
}

/* --------------------------------------------------------------------------
   9. Wallpaper shown on the laptop screen (about.html)
   -------------------------------------------------------------------------- */

.wall {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #b9c6f8 0%, #a3b3f5 45%, #93a5f2 100%);
}

.wall__hills {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.wall__glyph {
  position: relative;
  width: 21%;
  height: auto;
  opacity: 0.95;
  filter: drop-shadow(0 0.15em 0.4em rgba(20, 30, 90, 0.25));
}

/* --------------------------------------------------------------------------
   10. Placeholder desktop screen (section #3)
   Neutral skeleton. It picks up the section's --accent, so changing the accent
   restyles it. Replace the whole block when a real app goes in.
   -------------------------------------------------------------------------- */

.scr {
  display: grid;
  grid-template-columns: 15.5em 1fr;
  height: 100%;
  background: #fff;
  font-size: 1em;
}

.scr__side {
  display: flex;
  flex-direction: column;
  gap: 0.85em;
  padding: 1.4em 1.1em;
  background: #1d2433;
}

.scr__brand {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-bottom: 1em;
}

.scr__logo {
  width: 1.5em;
  height: 1.5em;
  border-radius: 0.4em;
  background: var(--accent, #4353f0);
}

.scr__bar {
  display: block;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
}

.scr__bar--brand {
  width: 5.5em;
  height: 0.6em;
}

.scr__nav {
  width: 100%;
  height: 1.9em;
  border-radius: 0.45em;
  background: rgba(255, 255, 255, 0.07);
}

.scr__nav.is-active {
  background: var(--accent, #4353f0);
  opacity: 0.85;
}

.scr__main {
  display: flex;
  flex-direction: column;
  gap: 1.4em;
  padding: 1.6em 1.8em;
  background: #f7f8fb;
}

.scr__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.scr__bar--title {
  width: 12em;
  height: 0.9em;
  background: #c9cfdb;
}

.scr__btn {
  width: 7em;
  height: 2.2em;
  border-radius: 0.5em;
  background: var(--accent, #4353f0);
  opacity: 0.85;
}

.scr__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1em;
}

.scr__card {
  height: 5.2em;
  border: 1px solid #e6e9f0;
  border-radius: 0.7em;
  background: #fff;
}

.scr__table {
  flex: 1;
  border: 1px solid #e6e9f0;
  border-radius: 0.7em;
  background: #fff;
  overflow: hidden;
}

.scr__row {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 0.8fr;
  gap: 1.4em;
  align-items: center;
  padding: 1em 1.3em;
  border-bottom: 1px solid #eef0f5;
}

.scr__row:last-child {
  border-bottom: 0;
}

.scr__row span {
  height: 0.65em;
  border-radius: 999px;
  background: #e3e7ef;
}

.scr__row--head {
  background: #fbfcfe;
}

.scr__row--head span {
  background: #ccd3e0;
  height: 0.55em;
}

.scr__row span:last-child {
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #4353f0) 22%, #fff);
  height: 1.3em;
}

/* --------------------------------------------------------------------------
   11. About / contact / footer
   -------------------------------------------------------------------------- */

.about {
  padding: 96px 0;
  background: var(--surface-alt);
  border-top: 1px solid var(--hairline);
}

/* Laptop on the left, copy on the right. */
.about__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 56px;
}

/* The laptop's base is 106% wide with a -3% margin (that is what gives it the
   trapezoid shape), so it bleeds past its column and ends up almost touching
   the page edge once the container stops growing. Inset it. */
.about__device {
  padding-inline: 32px;
}

.about__title {
  font-size: clamp(28px, 3.2vw, 38px);
}

.about__text {
  margin-top: 22px;
  max-width: 62ch;
}

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

  /* text first, laptop under it — same order as the app sections */
  .about__device {
    order: 2;
    width: 100%;
    max-width: 520px;
    margin-inline: auto;
    padding-inline: 12px;
  }
}

.contact {
  padding: 92px 0;
  background:
    radial-gradient(circle at 50% 0%, #eef0ff 0%, rgba(255, 255, 255, 0) 65%),
    var(--surface);
}

.contact__inner {
  text-align: center;
}

.contact__title {
  font-size: clamp(27px, 3.1vw, 36px);
}

.contact__text {
  margin-top: 14px;
  color: var(--ink-soft);
}

.contact__cta {
  margin-top: 30px;
}

.footer {
  padding: 30px 0 38px;
  border-top: 1px solid var(--hairline);
  background: var(--surface);
}

.footer__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px 26px;
  flex-wrap: wrap;
  font-size: 15px;
  color: var(--ink-soft);
}

.footer__inner p {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer__inner svg {
  color: #e0534e;
}

.footer__legal {
  color: var(--ink-faint);
}