/* =========================================================================
   ParcelLoop — Homepage Styles
   Pulled from Figma "For Subusers" file, node 5721:18910 (Home)
   Tokens marked "(Figma variable)" come from get_variable_defs.
   Tokens marked "(inferred)" are repeated raw values in the file that
   aren't backed by a Figma variable/style — named to match the existing
   "category-name" convention (e.g. color/violet/26 -> --color-violet-26).
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Design tokens
   ------------------------------------------------------------------------- */
:root {
  /* ---- Color: neutrals (Figma variables) ---- */
  --color-white: #ffffff;                 /* Base/White */
  --color-neutral-04: #0d0100;            /* Neutral/Neutral 04 */
  --color-neutral-outline: #1e293b;       /* Neutral Outline — nav/body text on light bg */
  --color-violet-26: #3e1e65;             /* color/violet/26 (aka "Meteorite") */
  --color-grey-100: #f5f5f6;              /* (inferred) light logo-tile bg, e.g. partner carousel */

  /* ---- Color: ink & plum scale (inferred, reused across dark sections) ---- */
  --color-ink: #150e2b;                   /* primary dark navy: buttons, headings, card bg */
  --color-plum-700: #221432;              /* CTA / "Use Parcelloop" section bg; About "What we stand for" bg */
  --color-plum-800: #241634;              /* Booking-steps section bg */
  --color-plum-900: #1c1338;              /* Stats + footer section bg (darkest) */
  --color-hero-dark: #1c0934;             /* (inferred) About hero section bg, behind the skyline illustration */
  --color-lavender-100: #e7e1f7;          /* (inferred) About "Why we started" story section bg */
  --color-neutral-02: #908c8c;            /* Neutral/Neutral 02 (Figma variable) — muted meta text, e.g. testimonial role */

  /* ---- Color: violet scale (inferred) ---- */
  --color-violet-400: #7c4dff;            /* accent purple: pills, bars, tiles */
  --color-violet-500: #7244d1;            /* "Why choose us" (visibility) section bg */
  --color-violet-600: #45358a;            /* compare-col bg, ribbon backdrop, monitor stand */
  --color-violet-ring: #884efe;           /* step-1 icon ring border / checked checkbox */
  --color-violet-50: #d9d1ff;             /* light purple mockup panel bg */
  --color-violet-100: #ece6f9;            /* faint violet: track lines, dashboard borders */
  --color-lavender-50: #f9f6ff;           /* hero section bg */
  --color-lavender-card-bg: #c0b3ff;      /* "Real-Time Tracking" floating card bg */
  --color-lavender-card-border: #b399f9;

  /* ---- Color: teal / mint scale (inferred) ---- */
  --color-teal-500: #12a48f;              /* teal accent: badges, tiles, play button */
  --color-teal-600: #0d7f6e;              /* price text in courier list */
  --color-teal-100: #e3f7f2;              /* "Delivered" badge bg */
  --color-teal-ring: #00ab8f;             /* step-2 icon ring border */
  --color-mint-300: #3ecf8e;              /* "reliable" pill / underline accent */
  --color-mint-card-bg: #74cec1;          /* "Affordable Rates" floating card bg */
  --color-mint-card-border: #55bdac;

  /* ---- Color: coral / red scale (inferred) ---- */
  --color-coral-500: #f0526b;             /* red/pink accent: dots, ribbon 2, tiles */
  --color-coral-400: #ff5e6f;             /* step-3 icon ring border */
  --color-red-500: #f04759;               /* ribbon (row 2) bg */

  /* ---- Color: gold scale (inferred) ---- */
  --color-gold-500: #f4c430;              /* stats ring, tiles, ribbon (row 1) bg */
  --color-gold-600: #e0a402;              /* ribbon (row 1) text */
  --color-gold-card-bg: #ffd669;          /* "Fast Delivery" floating card bg */
  --color-gold-card-border: #ffc93c;

  /* ---- Color: status / utility (inferred) ---- */
  --color-in-transit-bg: rgba(110, 78, 249, 0.2);
  --color-in-transit-text: var(--color-violet-600);
  --color-checkbox-border: #767676;

  /* ---- Typography ---- */
  --font-heading: 'Zalando Sans', 'Zalando Sans Fallback', system-ui, sans-serif;      /* font family/Font 1 */
  --font-heading-expanded: 'Zalando Sans Expanded', 'Zalando Sans', system-ui, sans-serif;
  --font-ui: 'Inter', system-ui, sans-serif;             /* buttons / mockup UI text */
  --font-label: 'Space Grotesk', system-ui, sans-serif;  /* footer eyebrow labels */
  /* Body Font in Figma is "Google Sans Flex", a private Google font with no public
     web-embeddable version — falls back to a comparable system/geometric sans. */
  --font-body: 'Google Sans Flex', 'Inter', system-ui, sans-serif;

  --font-weight-500: 500;                 /* font weight/500 */
  --font-weight-800: 800;                 /* font weight/800 */
  --letter-spacing-tight: -0.28px;        /* letter spacing/-0_28 */
  --font-size-17: 17px;                   /* font size/17 */

  /* ---- Spacing scale (inferred from repeated Figma spacing values) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-25: 100px;
  --space-26: 104px;
  --space-30: 120px;
  --space-40: 160px;

  /* ---- Radii & misc ---- */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-card: 0px 18px 20px rgba(21, 14, 43, 0.35);
  --shadow-float: 0px 18px 40px -18px rgba(21, 14, 43, 0.35);
  --container-max: 1120px;
  --container-max-narrow: 720px;
}

/* -------------------------------------------------------------------------
   2. Reset & base
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
section { position: relative; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* -------------------------------------------------------------------------
   3. Buttons (shared component — Figma "Component 4/5" instances)
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 16px;
  line-height: normal;
  border-radius: var(--radius-pill);
  padding: 15px var(--space-7);
  white-space: nowrap;
}
.btn--primary {
  background: var(--color-ink);
  color: var(--color-white);
}
.btn--primary:hover { background: #2a1f47; }
/* "Get started now!" (services section) gets its own hover treatment instead of the
   default .btn--primary:hover above. */
.btn--primary:hover {
  background-color: var(--color-violet-26); /* #3e1e65 */
  box-shadow: 0 10px 14px rgba(62, 30, 101, 0.15);
}
.btn--outline {
  background: transparent;
  color: var(--color-ink);
  border: 2px solid var(--color-ink);
}
.btn--outline:hover { background: var(--color-ink); color: var(--color-white); }
.btn--sm {
  padding: 10px var(--space-5);
  font-size: 14.4px;
}
/* Mint pill variant — About hero's "Get started now!" (source: dark hero bg, so the
   default .btn--primary's near-black fill would disappear into it). */
.btn--mint { background: var(--color-mint-300); color: var(--color-ink); }
.btn--mint:hover { background: var(--color-mint-card-border); }
.btn-text {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 6px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 15.2px;
  color: var(--color-ink);
}
/* Inverted variant for dark backgrounds (About hero) — pair with icon-*-white.svg assets. */
.btn-text--invert { color: var(--color-white); }
.btn-text__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}
.btn-text__icon img { width: 100%; height: 100%; }

/* -------------------------------------------------------------------------
   4. Header / Nav
   ------------------------------------------------------------------------- */
.site-header {
  background: var(--color-lavender-50);
  padding: var(--space-5) var(--space-25);
}
.nav {
  max-width: var(--container-max);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}
.nav__brand-group {
  display: flex;
  align-items: center;
  gap: var(--space-7);
}
.nav__logo {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-800);
  font-size: 28px;
  color: var(--color-violet-26);
  letter-spacing: var(--letter-spacing-tight);
  background: none;
  padding: 0;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.nav__link {
  padding: var(--space-2);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-neutral-outline);
}
.nav__actions { display: flex; align-items: center; gap: 12px; }
/* Duplicate Sign up/Login pair rendered inside the mobile dropdown (.nav__links).
   Hidden by default (including on desktop, where .nav__actions' own pair is used instead);
   only shown once both the viewport is mobile-width and the dropdown is open — see the
   max-width: 900px media query below. */
.nav__link-actions {
  display: none;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(21, 14, 43, 0.1);
}
.nav__link-actions .btn { flex: 1; }
.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--space-2);
}
.nav__toggle span {
  width: 22px;
  height: 2px;
  background: var(--color-ink);
  border-radius: 2px;
}

/* -------------------------------------------------------------------------
   5. Hero
   ------------------------------------------------------------------------- */
.hero {
  background: var(--color-lavender-50);
  padding: var(--space-16) var(--space-20) var(--space-16);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-20);
  overflow: clip;
  position: relative;
}
.hero__clouds { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero__clouds img { position: absolute; opacity: 0.7; width: auto; }
/* Gentle cloud drift: each cluster (--a/--b/--c/--d) gets its own keyframes so amplitude,
   direction and timing differ slightly per cloud — reads as wind-blown drift rather than
   everything sliding in lockstep. Images within the same cluster share identical timing
   (duration + delay) so they move together as one cloud instead of separating. */
.hero__cloud { animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
@keyframes cloud-drift-a { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(28px, -10px); } }
@keyframes cloud-drift-b { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-26px, -8px); } }
@keyframes cloud-drift-c { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(18px, -6px); } }
@keyframes cloud-drift-d { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-20px, -7px); } }
@keyframes cloud-drift-e { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(16px, -5px); } }
@keyframes cloud-drift-f { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-14px, -9px); } }
.hero__cloud--a { animation-name: cloud-drift-a; animation-duration: 26s; }
.hero__cloud--b { animation-name: cloud-drift-b; animation-duration: 32s; animation-delay: -14s; }
.hero__cloud--c { animation-name: cloud-drift-c; animation-duration: 20s; animation-delay: -6s; }
.hero__cloud--d { animation-name: cloud-drift-d; animation-duration: 23s; animation-delay: -11s; }
.hero__cloud--e { animation-name: cloud-drift-e; animation-duration: 29s; animation-delay: -19s; }
.hero__cloud--f { animation-name: cloud-drift-f; animation-duration: 35s; animation-delay: -8s; }
/* Soft focus so clouds read as hazy/distant rather than flat cut-out shapes. Smaller,
   further-back clouds get a touch more blur than the big foreground ones for a little depth. */
.hero__cloud--a, .hero__cloud--b { filter: blur(2px); }
.hero__cloud--c, .hero__cloud--d, .hero__cloud--e { filter: blur(3px); }
.hero__cloud--f { filter: blur(4px); }
/* Dark-purple sub-section owned by hero itself: a fixed strip along hero's own bottom edge
   (same color as the cta-banner section right after it, so the two read as one continuous
   dark zone) that the floating cards sit on top of/into, like a shelf. */
.hero__dark-band {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 25VH;
  background: var(--color-plum-700);
  z-index: 0;
}
.hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  max-width: 720px;
  text-align: center;
  position: relative;
  z-index: 1;
}
.hero__copy { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); }
.hero__title {
  position: relative;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 64px;
  line-height: normal;
  letter-spacing: -1.28px;
  color: var(--color-ink);
}
.hero__title .highlight { position: relative; display: inline-block; }
.hero__title .highlight img {
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 100%;
  height: auto;
  z-index: -1;
}
.hero__subtitle {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-500);
  font-size: var(--font-size-17);
  opacity: 0.9;
  color: var(--color-ink);
  max-width: 560px;
}
.hero__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Floating feature cards (Figma "Component 3") */
.floating-cards {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  max-width: 1026px;
  position: relative;
  z-index: 1;
  margin-top: var(--space-2);
}
.feature-card {
  /* Wobbly rounded-rect outline (357x260, r20) — a normal 20px-radius card edge with a subtle,
     tight hand-drawn wobble riding on top, matching the Figma source (which is a plain
     rounded-rect + 8px border under the hood; the roughness is a fine ripple, not a deep tear). */
  --wobble-edge: polygon(
    20.00px 1.55px, 27.50px 2.73px, 35.00px 1.52px, 42.49px 0.73px, 49.99px 2.50px, 57.49px 2.11px, 64.99px 0.20px, 72.49px 1.70px,
    79.98px 2.78px, 87.48px 1.32px, 94.98px 0.42px, 102.48px 2.34px, 109.97px 1.53px, 117.47px 0.81px, 124.97px 1.97px, 132.47px 2.16px,
    139.97px 1.44px, 147.46px 1.35px, 154.96px 2.73px, 162.46px 1.97px, 169.96px 0.16px, 177.46px 1.37px, 184.95px 2.61px, 192.45px 0.45px,
    199.95px 0.64px, 207.45px 2.36px, 214.95px 1.30px, 222.44px 0.47px, 229.94px 1.88px, 237.44px 2.88px, 244.94px 0.84px, 252.43px 1.17px,
    259.93px 2.65px, 267.43px 1.85px, 274.93px 0.47px, 282.43px 1.80px, 289.92px 2.99px, 297.42px 1.26px, 304.92px 1.44px, 312.42px 2.88px,
    319.92px 1.42px, 327.41px 0.26px, 334.91px 1.89px, 341.81px 2.66px, 348.44px 4.80px, 353.13px 10.10px, 353.71px 17.04px, 355.60px 23.99px,
    355.99px 31.48px, 354.48px 38.98px, 355.12px 46.48px, 356.63px 53.98px, 355.33px 61.47px, 354.33px 68.97px, 355.09px 76.47px, 356.52px 83.97px,
    355.18px 91.47px, 354.56px 98.96px, 356.10px 106.46px, 355.89px 113.96px, 354.71px 121.46px, 355.82px 128.96px, 355.92px 136.45px, 354.43px 143.95px,
    355.14px 151.45px, 356.67px 158.95px, 355.97px 166.45px, 354.74px 173.94px, 355.44px 181.44px, 356.66px 188.94px, 354.56px 196.44px, 354.88px 203.93px,
    356.76px 211.43px, 355.25px 218.93px, 354.68px 226.43px, 355.68px 233.93px, 356.62px 241.40px, 352.92px 247.61px, 349.39px 253.31px, 344.21px 258.33px,
    337.00px 257.93px, 329.50px 257.03px, 322.00px 259.10px, 314.51px 258.85px, 307.01px 257.80px, 299.51px 258.08px, 292.01px 259.13px, 284.51px 258.17px,
    277.02px 257.75px, 269.52px 258.49px, 262.02px 259.46px, 254.52px 257.70px, 247.03px 257.79px, 239.53px 259.67px, 232.03px 258.43px, 224.53px 257.81px,
    217.03px 259.46px, 209.54px 259.03px, 202.04px 257.68px, 194.54px 258.04px, 187.04px 259.63px, 179.54px 258.19px, 172.05px 256.96px, 164.55px 259.13px,
    157.05px 258.97px, 149.55px 257.02px, 142.05px 258.55px, 134.56px 259.84px, 127.06px 257.65px, 119.56px 257.14px, 112.06px 259.43px, 104.57px 259.28px,
    97.07px 257.11px, 89.57px 257.87px, 82.07px 259.79px, 74.57px 257.53px, 67.08px 257.13px, 59.58px 259.13px, 52.08px 258.98px, 44.58px 257.73px,
    37.08px 258.86px, 29.59px 259.01px, 22.09px 258.16px, 15.36px 256.73px, 8.25px 255.60px, 4.24px 249.68px, 3.05px 243.01px, 1.31px 236.01px,
    0.23px 228.52px, 2.40px 221.02px, 1.95px 213.52px, 0.39px 206.02px, 1.32px 198.53px, 3.05px 191.03px, 1.54px 183.53px, 0.36px 176.03px,
    2.66px 168.53px, 2.02px 161.04px, 0.14px 153.54px, 1.11px 146.04px, 2.65px 138.54px, 0.90px 131.04px, 0.30px 123.55px, 2.18px 116.05px,
    2.32px 108.55px, 0.22px 101.05px, 1.29px 93.55px, 3.09px 86.06px, 1.74px 78.56px, 0.82px 71.06px, 2.57px 63.56px, 2.26px 56.07px,
    0.19px 48.57px, 1.05px 41.07px, 2.20px 33.57px, 1.59px 26.07px, 0.96px 18.64px, 4.57px 12.62px, 7.47px 6.55px, 12.92px 2.01px
  );
  position: relative;
  width: 357px;
  min-height: 260px;
  padding: var(--space-10) var(--space-6) var(--space-16);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  transition: transform 0.35s ease, filter 0.35s ease;
  filter: drop-shadow(0 0 0 rgba(20, 16, 39, 0));
  cursor: default;
  /* No clip-path or background here: the card itself stays a plain, unclipped box so its
     ::before/::after layers (below) are free to paint their own shapes without being cropped
     to whatever this element's own clip region would be — clip-path on a parent clips its
     whole subtree, which would otherwise crush the border ring down to the fill's exact outline. */
}
/* Fill layer: sits on top of the border layer, clipped to the small inner wobble so only an
   8px-ish ragged strip of the border color (below) shows around it. */
.feature-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: var(--wobble-edge);
}
/* Border layer: a slightly larger box (inset -8px, matching the source's 8px border) clipped to
   the same wobble scaled up to its own box (373x277, r28), painted behind the fill layer above. */
.feature-card::before {
  content: "";
  position: absolute;
  inset: -8px;
  z-index: -2;
  clip-path: polygon(
    28.00px 1.55px, 35.81px 2.73px, 43.62px 1.52px, 51.44px 0.73px, 59.25px 2.50px, 67.06px 2.11px, 74.87px 0.20px, 82.68px 1.70px,
    90.50px 2.78px, 98.31px 1.32px, 106.12px 0.42px, 113.93px 2.34px, 121.74px 1.53px, 129.56px 0.81px, 137.37px 1.97px, 145.18px 2.16px,
    152.99px 1.44px, 160.80px 1.35px, 168.62px 2.73px, 176.43px 1.97px, 184.24px 0.16px, 192.05px 1.37px, 199.87px 2.61px, 207.68px 0.45px,
    215.49px 0.64px, 223.30px 2.36px, 231.11px 1.30px, 238.93px 0.47px, 246.74px 1.88px, 254.55px 2.88px, 262.36px 0.84px, 270.17px 1.17px,
    277.99px 2.65px, 285.80px 1.85px, 293.61px 0.47px, 301.42px 1.80px, 309.23px 2.99px, 317.05px 1.26px, 324.86px 1.44px, 332.67px 2.88px,
    340.48px 1.42px, 348.26px 0.45px, 355.09px 3.92px, 361.26px 7.72px, 367.05px 12.38px, 370.41px 19.10px, 369.92px 26.55px, 371.60px 34.18px,
    371.99px 42.00px, 370.48px 49.81px, 371.12px 57.62px, 372.63px 65.43px, 371.33px 73.24px, 370.33px 81.06px, 371.09px 88.87px, 372.52px 96.68px,
    371.18px 104.49px, 370.56px 112.30px, 372.10px 120.12px, 371.89px 127.93px, 370.71px 135.74px, 371.82px 143.55px, 371.92px 151.37px, 370.43px 159.18px,
    371.14px 166.99px, 372.67px 174.80px, 371.97px 182.61px, 370.74px 190.43px, 371.44px 198.24px, 372.66px 206.05px, 370.56px 213.86px, 370.88px 221.67px,
    372.76px 229.49px, 371.25px 237.30px, 370.68px 245.11px, 371.27px 252.67px, 369.86px 260.16px, 364.04px 265.17px, 358.87px 270.22px, 352.63px 274.63px,
    345.00px 273.93px, 337.19px 273.03px, 329.38px 275.10px, 321.56px 274.85px, 313.75px 273.80px, 305.94px 274.08px, 298.13px 275.13px, 290.32px 274.17px,
    282.50px 273.75px, 274.69px 274.49px, 266.88px 275.46px, 259.07px 273.70px, 251.26px 273.79px, 243.44px 275.67px, 235.63px 274.43px, 227.82px 273.81px,
    220.01px 275.46px, 212.20px 275.03px, 204.38px 273.68px, 196.57px 274.04px, 188.76px 275.63px, 180.95px 274.19px, 173.13px 272.96px, 165.32px 275.13px,
    157.51px 274.97px, 149.70px 273.02px, 141.89px 274.55px, 134.07px 275.84px, 126.26px 273.65px, 118.45px 273.14px, 110.64px 275.43px, 102.83px 275.28px,
    95.01px 273.11px, 87.20px 273.87px, 79.39px 275.79px, 71.58px 273.53px, 63.77px 273.13px, 55.95px 275.13px, 48.14px 274.98px, 40.33px 273.73px,
    32.52px 274.86px, 24.83px 274.82px, 17.89px 272.13px, 12.14px 267.79px, 5.53px 263.91px, 2.99px 256.76px, 2.83px 249.47px, 1.31px 241.82px,
    0.23px 234.00px, 2.40px 226.19px, 1.95px 218.38px, 0.39px 210.57px, 1.32px 202.76px, 3.05px 194.94px, 1.54px 187.13px, 0.36px 179.32px,
    2.66px 171.51px, 2.02px 163.70px, 0.14px 155.88px, 1.11px 148.07px, 2.65px 140.26px, 0.90px 132.45px, 0.30px 124.63px, 2.18px 116.82px,
    2.32px 109.01px, 0.22px 101.20px, 1.29px 93.39px, 3.09px 85.57px, 1.74px 77.76px, 0.82px 69.95px, 2.57px 62.14px, 2.26px 54.33px,
    0.19px 46.51px, 1.05px 38.70px, 2.20px 30.89px, 2.00px 23.38px, 3.66px 16.10px, 9.36px 11.19px, 14.03px 5.62px, 20.47px 1.72px
  );
}
.feature-card--yellow {
  transform: rotate(-8deg); margin-right: -40px; z-index: 1;
}
.feature-card--yellow::after  { background: var(--color-gold-card-bg); }
.feature-card--yellow::before { background: var(--color-gold-card-border); }
.feature-card--teal {
  z-index: 1; margin-bottom: 40px;
}
.feature-card--teal::after  { background: var(--color-mint-card-bg); }
.feature-card--teal::before { background: var(--color-mint-card-border); }
.feature-card--violet {
  transform: rotate(8deg); margin-left: -40px; z-index: 2;
}
.feature-card--violet::after  { background: var(--color-lavender-card-bg); }
.feature-card--violet::before { background: var(--color-lavender-card-border); }

.feature-card:hover {
  z-index: 10;
  filter: drop-shadow(0 20px 28px rgba(20, 16, 39, 0.22));
}
.feature-card--yellow:hover { transform: rotate(-3deg) translateY(-12px) scale(1.05); }
.feature-card--teal:hover   { transform: translateY(-12px) scale(1.05); }
.feature-card--violet:hover { transform: rotate(3deg) translateY(-12px) scale(1.05); }
.feature-card__icon { height: 52px; }
.feature-card__icon img { width: 100%; height: 100%; object-fit: cover; }
/* Per-card icon sizes (source illustrations are all square 1:1, so width matches height —
   this keeps each icon's aspect ratio intact with no stretching or cropping). */
.feature-card--yellow .feature-card__icon { width: 100%; max-width: 120px; }
.feature-card--teal   .feature-card__icon { width: 100%; max-width: 120px; }
.feature-card--violet .feature-card__icon { width: 100%; max-width: 120px; }
.feature-card h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.05px;
  color: var(--color-ink);
}
.feature-card p {
  font-family: var(--font-heading);
  font-size: 17px;
  color: var(--color-ink);
  max-width: 256px;
}

/* -------------------------------------------------------------------------
   6. CTA banner ("Use Parcelloop to get...")
   ------------------------------------------------------------------------- */
.cta-banner {
  background: var(--color-plum-700);
  padding: var(--space-12) var(--space-12) var(--space-25);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
}
.cta-banner__pill {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-white);
  border-radius: var(--radius-pill);
  padding: 10px 22px 10px 10px;
  box-shadow: var(--shadow-float);
}
.cta-banner__play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  background: var(--color-teal-500);
  color: var(--color-white);
  font-size: 11px;
}
.cta-banner__pill-text { font-family: var(--font-heading); font-size: 13.6px; color: var(--color-ink); line-height: 1.3; }
.cta-banner__pill-text strong { display: block; font-weight: 700; }
.cta-banner__heading {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-500);
  font-size: 40px;
  line-height: 1.3;
  color: var(--color-white);
  text-align: center;
  max-width: 720px;
}
.cta-banner__heading .pill-outline {
  display: inline-flex;
  border: 2px solid var(--color-mint-300);
  color: var(--color-mint-300);
  border-radius: var(--radius-pill);
  padding: 2px 16px;
}
.cta-banner__heading .pill-solid {
  display: inline-flex;
  background: var(--color-violet-400);
  color: var(--color-white);
  border-radius: var(--radius-sm);
  padding: 4px 16px;
}
.cta-banner__heading .underline-accent { text-decoration: underline; text-decoration-color: var(--color-coral-500); text-underline-offset: 4px; }
.cta-banner__heading .struck { text-decoration: line-through; }

/* -------------------------------------------------------------------------
   7. Partners / testimonial strip
   ------------------------------------------------------------------------- */
.partners {
  background: var(--color-white);
  padding: var(--space-25) var(--space-20);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
}
.partners__heading {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-500);
  font-size: 40px;
  letter-spacing: -0.8px;
  text-align: center;
  max-width: 629px;
  color: var(--color-ink);
}
.partners__carousel { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); width: 100%; }
.partners__slides { width: 100%; max-width: 680px; }
.partners__slide {
  display: none;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-6);
  width: 100%;
}
.partners__slide.is-active { display: grid; }
.partners__logo-box {
  background: var(--color-grey-100);
  border-radius: var(--radius-sm);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1);
}
.partners__logo-box img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-sm); }
.partners__dots { display: flex; gap: 8px; }
.partners__dots button {
  width: 20px; height: 8px; border-radius: 35%;
  background: var(--color-violet-100);
  padding: 0;
}
.partners__dots button[aria-current="true"] { background: var(--color-ink); }

/* -------------------------------------------------------------------------
   8. "Value" section — shared 2-column feature layout
   (Figma component reused for both "Why Choose Us" and "Opening Hours/Locations")
   ------------------------------------------------------------------------- */
.value-section {
  padding: var(--space-25) var(--space-26);
  display: flex;
  justify-content: center;
}
.value-section--violet { background: var(--color-violet-500); }
.value-section--teal { background: var(--color-teal-500); }
/* Dark accent strip along the bottom of the section — same idea as .hero__dark-band. */
.value-section__dark-band {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 180px;
  background: #45358a;
  z-index: 0;
}
.value-section__darker-band {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50%;
  background: #241634;
  z-index: 0;
}
.value-grid {
  position: relative;
  z-index: 1;
  display: flex;
  gap: var(--space-30);
  max-width: var(--container-max);
  width: 100%;
}
.value-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  justify-content: flex-start;
  width: 100%;
}
.feature-copy { display: flex; flex-direction: column; gap: var(--space-3); }
.feature-copy h2 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-500);
  font-size: 40px;
  letter-spacing: -0.416px;
  color: var(--color-white);
}
.feature-copy p {
  font-family: var(--font-heading);
  font-size: 18px;
  color: rgba(255, 255, 255, 0.92);
  max-width: 440px;
  line-height: 1.44;
}
/* Modifiers reused by About page sections that sit on a light background or need
   center-aligned copy (this class started life homepage-only, always white/left). */
.feature-copy--dark h2 { color: var(--color-ink); }
.feature-copy--dark p { color: rgba(34, 20, 50, 0.92); }
.feature-copy--center { align-items: center; text-align: center; }
.value-mockup {
  background: var(--color-violet-50);
  border-radius: var(--radius-md);
  width: 100%;
  max-width: 560px;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-16) var(--space-8);
}
.value-section--teal .value-mockup { background: #d3f3ec; }

/* Mockup: shipment monitor card (tracking bars / select courier list) */
.monitor { display: flex; flex-direction: column; align-items: center; }
.monitor-screen {
  background: var(--color-white);
  border-radius: 14px;
  padding: 20px;
  max-width: 376px;
  width: 100%;
  box-shadow: var(--shadow-float);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.monitor-row { display: flex; align-items: center; gap: 5px; width: 100%; }
.monitor-row .track-line { flex: 1; height: 5px; border-radius: 4px; background: var(--color-violet-100); }
.monitor-row .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-coral-500); flex-shrink: 0; }
.monitor-card {
  background: var(--color-violet-100);
  border-radius: 9px;
  padding: 11px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.monitor-card span { font-family: var(--font-ui); font-weight: 700; font-size: 14px; color: var(--color-ink); }
.monitor-card span.badge { color: var(--color-white); } /* .badge sets white, but loses to the rule above on specificity */
/* "Book Shipment" mockup (step 2): label stacks above the button rather than beside it */
.monitor-card--stacked {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
}
.monitor-card--stacked .badge { align-self: center; }
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-teal-500);
  color: var(--color-white);
  border-radius: var(--radius-pill);
  padding: 7px 14px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
}
.monitor-bars { display: flex; align-items: flex-end; justify-content: center; gap: 7px; height: 54px; width: 100%; }
.monitor-bars i { display: block; width: 100%; border-radius: 4px 4px 0 0; background: var(--color-violet-400); }
.monitor-stand { width: 82px; height: 59px; background: var(--color-ink); border-radius: 0 0 9px 9px; }

/* Playful hover: mockup cards bounce + rotate a little */
@keyframes mockup-bounce-rotate {
  0%   { transform: translateY(0) rotate(0deg); }
  30%  { transform: translateY(-10px) rotate(-3deg); }
  55%  { transform: translateY(0) rotate(2.5deg); }
  75%  { transform: translateY(-4px) rotate(-1.5deg); }
  100% { transform: translateY(0) rotate(0deg); }
}
.monitor:hover, .courier-panel:hover {
  animation: mockup-bounce-rotate 0.6s ease;
}

/* Mockup: Select Courier list */
.courier-panel {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  max-width: 380px;
  width: 100%;
  box-shadow: var(--shadow-card);
}
.courier-panel h4 { font-family: var(--font-heading); font-weight: 600; font-size: 16px; color: var(--color-ink); padding-bottom: var(--space-4); }
.courier-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-violet-100);
}
.courier-row__logo { width: 28px; height: 28px; border-radius: 4px; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--color-white); }
.courier-row__logo img { width: 100%; height: 100%; object-fit: cover; }
.courier-row__name { flex: 1; font-family: var(--font-heading); font-size: 14.7px; color: var(--color-ink); }
.courier-row__price { font-family: var(--font-heading); font-weight: 600; font-size: 12.5px; color: var(--color-teal-600); white-space: nowrap; }

/* Mockup: opening hours widget */
.hours-widget {
  background: var(--color-white);
  border-radius: 14px;
  padding: var(--space-4);
  max-width: 320px;
  width: 100%;
  box-shadow: var(--shadow-card);
}
.hours-widget__days { display: flex; gap: 6px; margin-bottom: var(--space-4); }
.hours-widget__day { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: 11px; font-weight: 700; color: var(--color-violet-600); }
.hours-widget__day span { width: 100%; height: 6px; border-radius: 4px; background: var(--color-teal-500); }
.hours-widget__day--off span { background: var(--color-violet-100); }
.hours-widget__row { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; font-family: var(--font-heading); font-size: 14px; color: var(--color-violet-600); font-weight: 600; }
.hours-widget__time { display: flex; gap: 6px; }
.hours-widget__time b { background: var(--color-violet-100); border-radius: 6px; padding: 3px 8px; font-size: 14px; color: var(--color-ink); }

/* Mockup: locations illustration (decorative boxes) */
.locations-illustration { display: flex; align-items: center; justify-content: center; width: 100%; }
.locations-illustration img { max-width: 100%; }

/* -------------------------------------------------------------------------
   9. "How it works" ribbon marquee
   ------------------------------------------------------------------------- */
.ribbon-wrap {
  background: var(--color-violet-600);
  overflow: hidden;
  padding: 32px 0;
  position: relative;
}
.ribbon-tape {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-4) 0;
  box-shadow: 0px 8px 11px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  width: 100%;
}
.ribbon-tape--gold { background: var(--color-gold-500); transform: rotate(2.3deg); margin-bottom: -60px; }
.ribbon-tape--red { background: var(--color-red-500); transform: rotate(-2.3deg); }
.ribbon-track {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: max-content;
  animation: marquee 30s linear infinite;
}
.ribbon-tape--red .ribbon-track { animation-direction: reverse; }
.ribbon-track span {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  white-space: nowrap;
  color: var(--color-gold-600);
}
.ribbon-tape--red .ribbon-track span { color: var(--color-white); }
.ribbon-track .ribbon-headline { font-size: 28px; text-transform: uppercase; }
.ribbon-track .ribbon-sub { text-transform: uppercase; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ribbon-track { animation: none; }
  .hero__cloud { animation: none; }
  .sticker { animation: none; }
}

/* -------------------------------------------------------------------------
   10. Booking steps (numbered, offset cards)
   ------------------------------------------------------------------------- */
.how-it-works {
  background: var(--color-plum-800);
  padding: var(--space-40) var(--space-20) var(--space-40) var(--space-20);
  display: flex;
  justify-content: center;
}
.steps {
  max-width: var(--container-max);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-25);
}
.step-row { display: flex; }
.step-row--end { justify-content: flex-end; }
.step-card {
  position: relative;
  width: 357px;
  max-width: 100%;
  min-height: 444px;
  border-radius: var(--radius-lg);
  padding: 56px var(--space-7) var(--space-20);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  color: var(--color-white);
  text-align: center;
  overflow: visible;
}
.step-card--purple { background: var(--color-violet-400); }
.step-card--teal { background: var(--color-teal-500); }
.step-card--coral { background: var(--color-coral-500); }

/* Bell/notification jingle: swings side to side from the top, decaying over ~2-3 swings
   then settling. Desktop plays it on :hover (and stops the instant the pointer leaves,
   since the animation only applies while :hover matches). Mobile has no real hover, so
   main.js triggers the same animation via a `.step-card--jingle` class when each card
   scrolls into view instead. */
@keyframes bell-jingle {
  0%   { transform: rotate(0deg); }
  8%   { transform: rotate(-9deg); }
  17%  { transform: rotate(8deg); }
  26%  { transform: rotate(-6.5deg); }
  35%  { transform: rotate(5deg); }
  45%  { transform: rotate(-3.5deg); }
  55%  { transform: rotate(2.5deg); }
  65%  { transform: rotate(-1.5deg); }
  75%  { transform: rotate(1deg); }
  87%  { transform: rotate(-0.5deg); }
  100% { transform: rotate(0deg); }
}
.step-card { transform-origin: top center; }
@media (hover: hover) {
  .step-card:hover { animation: bell-jingle 1s ease-in-out; }
}
.step-card--jingle { animation: bell-jingle 1s ease-in-out; }
.step-num {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 16px solid;
  background: var(--color-plum-800);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading-expanded);
  font-weight: 700;
  font-size: 56px;
  color: var(--color-white);
}
.step-card--purple .step-num { border-color: var(--color-violet-ring); }
.step-card--teal .step-num { border-color: var(--color-teal-ring); }
.step-card--coral .step-num { border-color: var(--color-coral-400); }
.step-card h3 { font-family: var(--font-heading); font-weight: 600; font-size: 22px; }
.step-card p { font-family: var(--font-heading); font-size: 18px; }
.step-card__art { margin-top: auto; display: flex; justify-content: center; }
.step-card__art--phone {
  position: absolute;
  left: 14px;
  top: 239px; /* clears the heading/paragraph above; matches Figma's rotated bounding box */
  width: 100%;
  max-width: 150px;
  /* height: 234px; */
  display: flex;
  align-items: center;
  justify-content: center;
}
.step-card__art-rotate {
  flex-shrink: 0;
  transform: rotate(-12deg);
}
.step-card__art-rotate svg { display: block; }
.step-card__art--boxes { position: absolute; bottom: -18px; left: 50%; transform: translateX(-58%); width: 237px; }
.step-card__monitor {
  position: absolute;
  left: -40px;
  bottom: 20px;
  width: 100%;
  max-width: 300px;
}
.step-card__monitor .monitor-screen { width: 244px; padding: 15px; gap: 11px; }
.step-card__monitor .monitor-card { padding: 20px 16px; }
.step-card__monitor .monitor-stand { width: 64px; height: 46px; background: var(--color-violet-600); }

/* -------------------------------------------------------------------------
   11. Services split ("Skip the hassle" / "What We Do Best")
   ------------------------------------------------------------------------- */
.services {
  display: flex;
  flex-wrap: wrap;
}
.services__col {
  flex: 1 1 480px;
  padding: var(--space-25) var(--space-1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
}
.services__col--dark { background: var(--color-violet-600); }
.services__col--light { background: var(--color-white); }
.services__inner { max-width: 560px; width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--space-6); }

.sticker-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.sticker {
  padding: 12px 20px;
  border-radius: 14px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 18px;
}
.sticker--a { background: var(--color-mint-300); color: var(--color-ink); animation: sticker-swirl-a 3.5s ease-in-out infinite; }
.sticker--b { background: var(--color-teal-500); color: var(--color-white); animation: sticker-swirl-b 5.2s ease-in-out infinite; animation-delay: -1.5s; }
.sticker--c { background: var(--color-coral-500); color: var(--color-white); animation: sticker-swirl-c 4.8s ease-in-out infinite; animation-delay: -3s; }
/* Minimal swirl: a gentle rocking rotation around each sticker's own resting tilt —
   just enough to feel alive, not distracting. */
@keyframes sticker-swirl-a { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(-1deg); } }
@keyframes sticker-swirl-b { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(4deg); } }
@keyframes sticker-swirl-c { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(0deg); } }

.services__inner .feature-copy { align-items: center; text-align: center; }
.services__inner .feature-copy h2 { color: var(--color-white); }
.services__col--light .feature-copy h2 { color: var(--color-plum-800); }
.services__col--light .feature-copy p { color: rgba(36, 22, 52, 0.92); }

.dash-panel {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  max-width: 440px;
  width: 100%;
  box-shadow: var(--shadow-card);
}
.dash-panel h4 { font-family: var(--font-heading); font-weight: 600; font-size: 16px; padding-bottom: var(--space-4); color: var(--color-ink); }
.dash-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-violet-100);
}
.dash-row input[type="checkbox"] {
  width: 13px; height: 13px; margin: 0; accent-color: var(--color-violet-ring);
}
.dash-row span { flex: 1; font-family: var(--font-heading); font-size: 14.7px; color: var(--color-ink); }
.dash-row em {
  font-style: normal;
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12.5px;
}
.dash-row em.delivered { background: var(--color-teal-100); color: var(--color-teal-600); }
.dash-row em.pending { background: var(--color-in-transit-bg); color: var(--color-in-transit-text); }

.tag-tag { background: var(--color-violet-100); color: var(--color-plum-800); border-radius: var(--radius-pill); padding: var(--space-1) var(--space-4); font-family: var(--font-heading); font-weight: 700; font-size: 16px; }

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-4) 0;
}
.service-tile {
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-500);
  font-size: 16px;
  color: var(--color-white);
  min-height: 70px;
}
.service-tile--dark-text { color: var(--color-plum-800); }
.service-tile--teal { background: var(--color-teal-500); }
.service-tile--coral { background: var(--color-coral-500); }
.service-tile--violet { background: var(--color-violet-400); }
.service-tile--gold { background: var(--color-gold-500); }

/* -------------------------------------------------------------------------
   12. Stats + Footer
   ------------------------------------------------------------------------- */
.stats-footer { background: var(--color-plum-900); padding: var(--space-25) var(--space-30); }
.stats-footer__inner { max-width: var(--container-max); margin-inline: auto; display: flex; flex-direction: column; gap: 92px; }
.stats-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-8); }
.stats-row h2 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-500);
  font-size: 40px;
  color: var(--color-white);
  max-width: 560px;
  line-height: 1.32;
}
.stats-row .highlight-underline { text-decoration: underline; text-decoration-color: var(--color-gold-500); }
.stats-row .highlight-green { color: var(--color-mint-300); }
.stats-rings { display: flex; gap: 30px; flex-wrap: wrap; }
.stat-ring {
  width: 168px; height: 168px; border-radius: 50%;
  border: 16px solid;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  color: var(--color-white);
}
.stat-ring--gold { border-color: var(--color-gold-500); }
.stat-ring--coral { border-color: var(--color-coral-500); }
.stat-ring strong { font-family: var(--font-heading-expanded); font-weight: 700; font-size: 48px; line-height: 1; }
.stat-ring strong sup { font-family: var(--font-label); font-size: 27px; }
.stat-ring span { font-family: var(--font-ui); font-size: 11.5px; }

.footer-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-10); }
.footer-brand { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.footer-brand__mark { background: var(--color-white); color: var(--color-plum-900); border-radius: var(--radius-sm); padding: 6px 9px; font-family: var(--font-ui); font-weight: 700; font-size: 12px; letter-spacing: 0.48px; }
.footer-brand p { font-family: var(--font-ui); font-size: 16px; color: var(--color-white); line-height: 1.55; max-width: 260px; margin-top: var(--space-2); }
.footer-socials { display: flex; gap: var(--space-3); margin-top: var(--space-3); }
.footer-socials a {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-white); font-family: var(--font-ui); font-weight: 700; font-size: 13.6px;
}
.footer-col h4 { font-family: var(--font-label); font-weight: 700; font-size: 13.6px; letter-spacing: 0.816px; text-transform: uppercase; color: var(--color-white); margin-bottom: var(--space-3); }
.footer-col ul { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-col a { font-family: var(--font-ui); font-size: 15.2px; color: var(--color-white); }
.footer-col a:hover { text-decoration: underline; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--font-ui);
  font-size: 13.6px;
  color: var(--color-white);
}
.footer-bottom a { text-decoration: underline; }

/* -------------------------------------------------------------------------
   13. Responsive (judgment call — no mobile frames were provided in Figma)
   ------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .step-row, .step-row--end { flex-direction: column; align-items: center; }
  .step-row--end { justify-content: center; }
  /* flex-wrap: wrap (base rule) + flex-direction: column here would otherwise let the
     browser lay the two .services__col out as separate wrapped lines sized to their own
     content instead of one clean full-width stack — nowrap forces a single column. */
  .services { flex-direction: column; flex-wrap: nowrap; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .hero {
  padding: var(--space-12) var(--space-8) var(--space-16);
}
  .site-header { padding: var(--space-4) var(--space-5); }
  .nav__links { display: none; }
  .nav.is-open .nav__links {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--color-lavender-50);
    padding: var(--space-4);
    box-shadow: 0 8px 16px rgba(0,0,0,0.08);
    z-index: 20;
  }
  .nav__toggle { display: flex; }
  .nav { position: relative; }
  .nav__actions .btn { display: none; } /* Sign up / Login move into the dropdown below */
  .nav.is-open .nav__link-actions { display: flex; }
  .hero__title { font-size: 40px; }
  .hero__actions { flex-direction: column; }
  .cta-banner__heading, .stats-row h2, .feature-copy h2, .partners__heading { font-size: 28px; }
  .partners__slides {max-width: 680px; }
  .floating-cards { flex-direction: column; align-items: center; }
  .feature-card { margin: 0 0 -40px 0 !important; transform: none !important; }
  .value-section, .how-it-works, .stats-footer, .services__col, .partners { padding-inline: var(--space-12); }
  /* "To be delivered by Tuesday" / "In Transit" no longer fit on one line at this width —
     stack the badge below the label and center the whole card instead of wrapping awkwardly. */
  .monitor-card { flex-direction: column; text-align: center; gap: 10px; }
  .value-grid { gap: var(--space-16); }
  .value-mockup { height: auto; min-height: 320px; padding: var(--space-8) var(--space-5); max-width: 560px; }
  .service-grid { grid-template-columns: 1fr 1fr; }
  .services__col { padding: var(--space-16) var(--space-8); }
  .footer-cols { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .partners__slide { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
  .partners__slides { max-width: 440px; }
  .value-section, .how-it-works, .stats-footer, .services__col, .partners { padding-inline: var(--space-5); }
  .value-grid { flex-direction: column; align-items: start; gap: var(--space-20); }
  .value-col { align-items: center; text-align: center; gap: var(--space-8);}
  .partners__logo-box img { max-width: 60px; max-height: 60px; }
}

/* =========================================================================
   14. About page
   Pulled from Figma "For Subusers" file, node 5803:23864 (About). Sections
   already shared with the homepage (nav, "How it works" ribbon, Opening
   Hours/Locations, Stats + Footer) are lifted as-is — same markup/classes —
   rather than re-declared here; only genuinely new About-only sections get
   new classes below.
   ========================================================================= */

/* ---- Hero ("We're making shipping feel effortless") -------------------- */
/* The Figma hero is one flattened illustration (dark bg + city/parcels
   skyline) with text laid over it. No mobile frame was provided (same
   judgment call as section 13), so it's coded as a normal background image
   + padding rather than a fixed aspect-ratio box, which would crush the
   text at narrow widths. */
.about-hero {
  position: relative;
  background: var(--color-hero-dark) url('../assets/img/illustration-about-hero-skyline.svg') bottom center / cover no-repeat;
  padding: var(--space-25) var(--space-8) 420px;
  display: flex;
  justify-content: center;
}
.about-hero__content {
  position: relative;
  z-index: 1;
  max-width: 1040px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
}
.about-hero__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 52px;
  line-height: normal;
  letter-spacing: -1.04px;
  color: var(--color-white);
  max-width: 548px;
}
.about-hero__title .highlight { position: relative; display: inline-block; }
.about-hero__title .highlight img {
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 100%;
  height: auto;
  z-index: -1;
}
.about-hero__subtitle {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--font-size-17);
  line-height: 25px;
  opacity: 0.92;
  color: var(--color-white);
  max-width: 604px;
}
.about-hero__actions { display: flex; align-items: center; gap: var(--space-2); }

/* ---- "Why we started Parcelloop" — origin story + timeline ------------- */
.story-section {
  background: var(--color-lavender-100);
  padding: 132px var(--space-26) 124px;
  display: flex;
  justify-content: center;
}
.story-grid {
  display: flex;
  gap: 80px;
  align-items: center;
  max-width: 1120px;
  width: 100%;
}
.story-copy { flex: 1 1 0; min-width: 0; }
.timeline { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.timeline-item { display: flex; align-items: flex-start; gap: 16px; }
.timeline-item__dot { flex-shrink: 0; width: 20px; height: 20px; margin-top: 20px; }
.timeline-item__card {
  flex: 1 1 0;
  min-width: 0;
  background: var(--color-white);
  border-radius: 12px;
  padding: 20px 16px;
  box-shadow: 0px 18px 20px rgba(152, 147, 169, 0.35);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.timeline-item__year { font-family: var(--font-heading); font-weight: 600; font-size: 16px; color: var(--color-ink); }
.timeline-item__text { font-family: var(--font-heading); font-size: 14.7px; color: var(--color-ink); }

/* ---- "What we stand for" — values cards --------------------------------- */
.values-section {
  background: var(--color-plum-700);
  padding: 100px var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
.values-section__intro { display: flex; flex-direction: column; align-items: center; gap: 48px; width: 100%; }
.values-section .feature-copy h2 { text-align: center; }
.values-grid {
  display: flex;
  gap: 40px;
  max-width: 1120px;
  width: 100%;
  align-items: stretch;
}
.value-card {
  flex: 1 1 0;
  min-width: 0;
  border-radius: var(--radius-lg);
  padding: 48px 28px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  color: var(--color-white);
}
.value-card--violet { background: var(--color-violet-400); }
.value-card--teal { background: var(--color-teal-ring); }
.value-card--coral { background: var(--color-coral-500); }
.value-card__icon { font-size: 44px; line-height: 1; }
.value-card__title { font-family: var(--font-heading); font-weight: 600; font-size: 22px; letter-spacing: -0.05px; }
.value-card__text { font-family: var(--font-heading); font-size: 18px; line-height: 1.33; }

/* ---- "Customer Satisfaction is Our Priority" — testimonials ------------- */
.testimonials-section {
  background: var(--color-violet-600);
  padding: 80px var(--space-10);
  display: flex;
  justify-content: center;
}
.testimonials-inner { display: flex; flex-direction: column; align-items: center; gap: 30px; max-width: 1120px; width: 100%; }
.testimonial-list { display: flex; flex-direction: column; align-items: center; gap: 32px; width: 100%; padding: 24px 0; }
.testimonial-grid { display: flex; gap: 24px; align-items: stretch; max-width: 960px; width: 100%; }
.testimonial-card {
  flex: 1 1 0;
  min-width: 0;
  background: var(--color-white);
  border-radius: 16px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.testimonial-card__quote-mark { width: 53px; height: 40px; }
.testimonial-card__title { font-family: var(--font-heading); font-weight: 600; font-size: 20px; color: var(--color-neutral-04); }
.testimonial-card__text { font-family: var(--font-heading); font-size: 18px; line-height: 26px; color: rgba(36, 22, 52, 0.92); }
.testimonial-card__person { display: flex; align-items: center; gap: 16px; }
.testimonial-card__avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.testimonial-card__name { font-family: var(--font-heading); font-weight: 600; font-size: 16px; color: var(--color-neutral-04); }
.testimonial-card__role { font-family: var(--font-heading); font-weight: 300; font-size: 12px; color: var(--color-neutral-02); }
/* Static for now — only one slide's worth of testimonial content exists in the source
   design (see about.html comment above this section); dots are decorative until more
   slides are supplied. */
.testimonial-dots { display: flex; }

@media (max-width: 1080px) {
  .story-grid { flex-direction: column; align-items: stretch; }
  .values-grid, .testimonial-grid { flex-direction: column; }
}

@media (max-width: 900px) {
  .about-hero { padding: var(--space-12) var(--space-5) 280px; }
  .about-hero__title { font-size: 36px; }
  .about-hero__actions { flex-direction: column; }
  .story-section { padding: var(--space-16) var(--space-5); }
  .values-section, .testimonials-section { padding: var(--space-16) var(--space-5); }
}