/* Reset & Base */
:root {
  --black: #121915;
  --text-color: #241e1e;
  --dark-green: #062f16;
  --medium-blue: #05829e;
  --white: #ffffff;
  --light-blue: #dbf2ff;
  --black-80: rgba(18, 25, 21, 0.8);
  --grey: #f8f8f8;
  
  /* Area Card Colors */
  --bg-rent: #ffdddc;
  --text-rent: #51180d;
  --bg-job: #d6f8d7;
  --text-job: #062f16;
  --bg-booking: #e2f4ff;
  --text-booking: #06222f;
  --bg-events: #e9dafa;
  --text-events: #220b3c;
  --bg-shopping: #fef1d4;
  --text-shopping: #2f2606;
  --bg-food: #d4f7ee;
  --text-food: #0d352b;

  --font-primary: 'Inter', Arial, sans-serif;
  --font-display: 'Clash Grotesk', Arial, sans-serif;
  --font-ui: 'Inter', var(--font-primary);
}

html {
  overscroll-behavior-y: none; /* Prevent scroll bouncing at the top */
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--black);
  font-family: var(--font-primary);
  font-size: 14px;
  line-height: 1.43;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #ffffff;
  /* Inter stylistic alternates: single-story a (cv11),
     open digits (ss01), square punctuation (ss03) */
  font-feature-settings: 'cv11', 'ss01', 'ss03';
}

/* Form controls reset their font in user-agent stylesheets,
   so font-family / font-feature-settings don't inherit from body
   without an explicit override. */
button, input, select, textarea, optgroup {
  font-family: inherit;
  font-feature-settings: inherit;
}

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

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

/* Typography */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0;
}

h1 {
  font-size: 56px;
  line-height: 1em;
}

h2 {
  font-size: 44px;
  line-height: 1.09;
}

h3 {
  font-size: 20px;
  line-height: 1.2;
}

/* Fonts */
@font-face {
  font-family: 'Clash Grotesk';
  src: url('fonts/681c06055006adb5af55b1e9_ClashGrotesk-Semibold.ttf') format('truetype');
  font-weight: 600;
  font-display: block;
}

@font-face {
  font-family: 'Inter';
  src: url('fonts/68d3ad285e0ffe3939fc50d5_Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: block;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/68d3ad3ebd00d09501cd13a9_Inter-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: block;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/68d3ad54976698dce04a7073_Inter-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: block;
}

/* Layout Utilities — content max-width 960, with a 48px gutter so the
   container reserves 1056px on desktop. Tablet drops the gutter to 40,
   mobile to 24 via the breakpoint blocks below. */
.container {
  width: 100%;
  max-width: 1056px;
  padding: 0 48px;
  margin: 0 auto;
  position: relative;
  box-sizing: border-box;
}

.nav-container {
  /* Per spec: 960 content + 20px padding on each side = 1000 total.
     The pill itself is 1000px; the content INSIDE the pill (logo,
     links, install button) is exactly the 960px content frame.
     Override the .container's 48px gutter — the pill provides its own
     20px breathing room via .top-nav's padding instead. */
  max-width: 1000px;
  padding: 0;
}

.section {
  padding-bottom: 0;
}

/* Hero Section */
.hero-section {
  background-color: #dbf2ff;
  background-image: linear-gradient(180deg, #dbf2ff 52.39%, #FFF 100%);
  background-image: linear-gradient(180deg, #74c0fc 52.39%, color(display-p3 1 1 1) 100%);
  overflow-x: clip;
  overflow-y: visible;
  position: relative;
}

.top-nav-wrapper {
  position: fixed;
  top: 8px;
  left: 0;
  width: 100%;
  z-index: 10;
  pointer-events: none; /* let inert background pass clicks through */
}
.top-nav-wrapper > .nav-container {
  pointer-events: auto; /* but the nav itself is interactive */
}

/* Nav has three states:
   1. default (no scroll)  — fully transparent, blends with the page
   2. .scrolled            — white surface, light-blue border + soft shadow
   3. .expanded            — white surface with the Use Cases dropdown
                              panel revealed below the bar
   The corner radius is fixed at 28px in every state — no morph. */
.top-nav {
  display: flex;
  flex-direction: column;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 29px; /* half of the 58px bar height for a perfect cap */
  /* The outer pill is 1000px wide (nav-container max-width) and reserves
     20px of horizontal padding so the white .scrolled background extends
     past the inner top-nav-bar — top-nav-bar itself stays at 960, matching
     the page content width. */
  padding: 0 20px;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}
.top-nav.scrolled {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 12px 15px rgba(0, 0, 0, 0.075);
}
.top-nav.expanded {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 32px 32px rgba(0, 0, 0, 0.15);
}

.top-nav-bar {
  display: flex;
  align-items: center;
  height: 58px;
  /* Outer 20px horizontal padding moved up to .top-nav so the pill's
     white background extends past this bar. The bar itself fills the
     960px content area — its left/right edges line up with the page
     content below. */
  padding: 12px 0;
}
.nav-logo,
.nav-download-desktop,
.nav-hamburger,
.nav-actions {
  flex-shrink: 0;
}
/* Right-side group: Install pill + hamburger with 6px gap */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
/* Default: hamburger hidden on desktop, mobile-only download variant
   hidden everywhere (the bar's .nav-download-desktop is the visible one).
   Mobile media queries below override the hamburger to display: flex. */
.nav-hamburger { display: none; }

/* Use Cases dropdown panel — hidden by default. On .expanded the
   panel grows in with a smooth ease-out (height + opacity, no
   overshoot). */
.nav-dropdown-panel {
  /* Cancel 12px of .top-nav's 20px horizontal padding so the cards
     stop 8px from the pill edge (instead of 20px), while the top
     nav-bar above keeps its content-aligned 20px inset. */
  margin: 0 -12px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.2s ease-out;
}
.top-nav.expanded .nav-dropdown-panel {
  /* Slightly above the actual rendered grid height (~200px) so the
     transition's visible range matches its full duration in both
     directions — opening feels as smooth as closing. */
  max-height: 220px;
  opacity: 1;
}

.nav-dropdown-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Match the 8px column-gap as bottom padding so the cards have the
     same breathing room from the pill's bottom edge as from its sides. */
  padding: 0 0 8px;
  column-gap: 8px;
  row-gap: 0;
  position: relative; /* anchor for the moving hover pill */
}

/* Moving hover pill — translated/sized via JS to track the currently
   hovered card. Replaces the per-card background hover so the
   highlight visibly slides between cards instead of crossfading. */
.nav-dropdown-hover-pill {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-radius: 16px;
  background: transparent;
  pointer-events: none;
  opacity: 0;
  z-index: 0;
  transition:
    transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    height 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.2s ease,
    opacity 0.15s ease;
  will-change: transform, width, height;
}
.nav-dropdown-hover-pill.is-active { opacity: 1; }

.nav-dropdown-card {
  position: relative;
  z-index: 1; /* sit above the pill so text/icon stay legible */
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px 12px 12px;
  border-radius: 16px;
  text-decoration: none;
  color: var(--black);
  --card-color: #46a0f4; /* default fallback */
}
.nav-dropdown-card[data-color="personal"]    { --card-color: #2323b1; }
.nav-dropdown-card[data-color="rent"]        { --card-color: #ff6058; }
.nav-dropdown-card[data-color="job"]         { --card-color: #b6de5e; }
.nav-dropdown-card[data-color="booking"]     { --card-color: #46a0f4; }
.nav-dropdown-card[data-color="shopping"]    { --card-color: #ffc130; }
.nav-dropdown-card[data-color="restaurants"] { --card-color: #35c698; }

.nav-dropdown-icon {
  width: 40px;
  height: 40px;
  border-radius: 72px;
  background: var(--card-color);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nav-dropdown-icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: block;
}
.nav-dropdown-text {
  display: flex;
  flex-direction: column;
  gap: 6px; /* per Figma 4530:209 (was 4px) */
  min-width: 0;
  flex: 1;
}
.nav-dropdown-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.4px;
  color: var(--black);
}
.nav-dropdown-subtitle {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 14px;        /* per Figma 4530:209 (was 16px) */
  line-height: 20px;       /* per Figma 4530:209 (was 24px) */
  color: var(--black);
}

/* Mobile-only menu structure (hidden on desktop where the layout is a
   3-col hover dropdown rather than a full stacked menu). */
.nav-mobile-label,
.nav-mobile-meta { display: none; }

/* Use Cases trigger when the panel is open: dimmed label + flipped chevron */
.top-nav.expanded #use-cases-trigger {
  opacity: 0.6;
}
.top-nav.expanded #use-cases-trigger .nav-chevron {
  transform: rotate(180deg);
}
.nav-chevron {
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

.nav-logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.nav-logo img {
  width: 105.833px;
  height: 20px;
}

/* Nav-links sit right next to the logo (40px gap) per Figma; the
   margin-right: auto consumes the empty middle of the bar so the
   Install button hugs the right edge. */
.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: 40px;
  margin-right: auto;
}

.nav-link {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 20px;
  color: #000;
  background: transparent;
  border: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  position: relative;
}

/* Coming Soon Tooltip - Header (bottom) */
.nav-link[data-tooltip] {
  position: relative;
}
/* Disabled-style: 30% opacity on the link's own content only.
   Applied to the inner span/svg (not the button itself) so the
   ::after tooltip stays fully opaque on hover. */
.nav-link[data-tooltip] > span,
.nav-link[data-tooltip] > svg {
  opacity: 0.3;
}
.nav-link[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  margin-top: 8px;
  padding: 6px 10px;
  background: var(--black);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 9999;
}
.nav-link[data-tooltip]:hover::after {
  opacity: 1;
}

/* Coming Soon Tooltip - Footer (side) */
.footer-v2-link[data-tooltip] {
  position: relative;
  /* Disabled-style: dim the link text via color (rgba) instead of
     `opacity` so the ::after "Coming Soon" tooltip renders at full
     opacity on hover. */
  color: rgba(18, 25, 21, 0.3);
}
.footer-v2-link[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 8px;
  padding: 6px 10px;
  background: var(--black);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 9999;
}
.footer-v2-link[data-tooltip]:hover::after {
  opacity: 1;
}

.nav-link:focus-visible {
  outline: 2px solid rgba(18, 25, 21, 0.3);
  outline-offset: 6px;
  border-radius: 8px;
}

.nav-dropdown img {
  width: 16px;
  height: 16px;
}

/* Card-style install buttons (hero, CTA, footer) — share surface,
   sizing differs per context. Header pill is styled separately
   below since the Figma navbar uses a solid blue accent there. */
.btn-install,
.footer-v2-download {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.3s ease;
}
.btn-install:hover,
.footer-v2-download:hover {
  transform: translateY(-3px);
  border-color: transparent;
  box-shadow:
    0 2px 4px rgba(18, 25, 21, 0.04),
    0 8px 16px rgba(18, 25, 21, 0.06),
    0 24px 40px rgba(18, 25, 21, 0.10);
}

/* Header install pill.
   Default (transparent nav): white outlined pill so it stays
     legible against any page background.
   Scrolled / Expanded (white nav surface): solid blue accent
     for primary-CTA contrast (per Figma 4530:212). */
.nav-download {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 96px;
  height: 34px;
  padding: 7px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  color: var(--black);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.2s ease,
              border-color 0.2s ease,
              color 0.2s ease;
}
.nav-download:hover {
  transform: translateY(-2px);
  border-color: transparent;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}
.top-nav.scrolled .nav-download,
.top-nav.expanded .nav-download {
  background: #46a0f4;
  border-color: transparent;
  color: #fff;
}
.top-nav.scrolled .nav-download:hover,
.top-nav.expanded .nav-download:hover {
  background: #2f8fe6;
  box-shadow: 0 8px 18px rgba(70, 160, 244, 0.35);
}

.hero-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  /* Widget illustration (.hero-image) sits at Y: 182px from page top
     because .hero-right has no padding-top of its own. */
  padding-top: 182px;
  padding-bottom: 177px;
  position: relative;
  z-index: 2;
  perspective: 900px;
}

.hero-left {
  /* Text stack starts at Y: 255 = 182 (.hero-wrapper) + 73 (this) */
  width: 390px;
  padding-top: 73px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  perspective: 900px;
  align-items: flex-start;
  position: relative;
  z-index: 2;
}

.hero-text h1 {
  margin-bottom: 15px;
}

.hero-subtitle {
  font-size: 18px;
  line-height: 1.66;
}

.btn-install {
  height: 55px;
  border-radius: 10px;
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  width: 220px;
  flex: none;
  text-align: left;
  justify-content: space-between;
}

/* Shared text block for install/download buttons (hero, CTA, footer) */
.btn-content,
.footer-v2-download-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  color: var(--black);
}
.btn-title,
.footer-v2-download-title {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--black);
}
.btn-subtitle,
.footer-v2-download-subtitle {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: var(--black);
  opacity: 0.7;
}

.btn-icon {
  width: 36px;
  height: 36px;
  margin-left: auto;
}

.hero-gossiping {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 40px;
}

.hero-gossiping-label {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 24px;
  color: var(--black);
  opacity: 0.8;
}

.hero-gossiping-logos {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 39px;
  opacity: 0.33;
}

.gossip-logo {
  display: inline-flex;
  align-items: center;
  filter: grayscale(100%);
}

/* Logos scaled so the tallest (Wembley) is 40px high.
   All other logos scaled by the same 0.8 factor to keep proportions. */
.gossip-logo-wembley {
  width: 75px;
  height: 40px;
}

.gossip-logo-silverstone {
  width: 146px;
  height: 23px;
}

.gossip-logo-o2 {
  width: 96px;
  height: auto;
}

.gossip-logo-dua {
  width: 81.66px;
  height: 21.6px;
}

.hero-right {
  /* Container-edge padding mirrors .hero-left's left padding (0) so the
     image sits flush against the container's right edge — same distance
     from the page's right that the text has from the page's left. */
  width: 380px;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
  display: flex;
  justify-content: flex-end;
  position: relative;
  z-index: 2;
}

.hero-image {
  width: 100%;
  height: auto;
  display: block;
  /* 27.282px at the 380×627 desktop render — expressed as a percentage of
     width and height so the corner stays the same shape when the image
     scales (image keeps a fixed 380:627 aspect ratio). */
  border-radius: 7.180% / 4.351%;
  box-shadow: 0 35.077px 97.436px 0 rgba(0, 0, 0, 0.40), 0 0 2.923px 0 rgba(0, 0, 0, 0.25);
  box-shadow: 0 35.077px 97.436px 0 color(display-p3 0 0 0 / 0.40), 0 0 2.923px 0 color(display-p3 0 0 0 / 0.25);
}

.hero-bg-img {
  position: absolute;
  top: 78px; /* per Figma — sits 12px below the fixed nav (8 + 58 + 12) */
  left: 50%;
  transform: translateX(-50%);
  width: 126.25%;
  max-width: none;
  z-index: 1;
}

/* Areas Grid */
.areas-section {
  margin-top: -89px;
  position: relative;
  z-index: 3;
}

.section-title {
  margin-bottom: 40px;
}

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

.area-card {
  height: 309px;
  border-radius: 20px;
  padding: 28px 32px;
  border: 2px solid rgba(0,0,0,0.05);
  position: relative;
  overflow: hidden;
  font-size: 16px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.area-card h3 {
  margin-bottom: 0;
}

.area-card.rent { background-color: var(--bg-rent); color: var(--text-rent); grid-column: span 2; }
.area-card.job { background-color: var(--bg-job); color: var(--text-job); }
.area-card.booking { background-color: var(--bg-booking); color: var(--text-booking); perspective: 900px; }
.area-card.events { background-color: var(--bg-events); color: var(--text-events); grid-column: span 2; }
.area-card.shopping { background-color: var(--bg-shopping); color: var(--text-shopping); grid-column: span 2; }
.area-card.food { background-color: var(--bg-food); color: var(--text-food); }

/* Card Specific Images/Content */
.card-content {
  position: absolute;
}

/* Rent Card */
.rent-img-photos {
  top: 119px; left: 29px; width: 292px; z-index: 1;
  transition: transform 0.3s;
}
.rent-group {
  position: absolute; top: 97px; right: 32px; width: 374px; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-end;
  transition: transform 0.3s;
}
.rent-emoji { width: 73px; margin-bottom: -10px; margin-right: 90px; position: relative; z-index: 3; }
.rent-card-ui { width: 100%; border-radius: 16px; box-shadow: 0 41px 114px rgba(0,0,0,0.4); }

.area-card.rent:hover .rent-img-photos { transform: rotate(-12deg) translateY(-30px); }
.area-card.rent:hover .rent-group { transform: rotate(8deg) translateY(-40px); }

/* Job Card */
.job-card-1 {
  top: 191px; left: 29px; width: 305px; z-index: 3;
  border-radius: 13px; box-shadow: 0 33px 93px rgba(0,0,0,0.4);
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.job-card-2 {
  top: 153px; right: 83px; width: 278px; z-index: 2;
  border-radius: 12px; transform: rotate(-8.77deg);
  box-shadow: 0 30px 85px rgba(0,0,0,0.4);
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.job-card-2 img { position: absolute; top: 0; left: 0; width: 100%; }

/* Job Card Hover Interaction */
.area-card.job:hover .job-card-1 {
  transform: translateY(10px) rotate(8deg); z-index: 1;
}
.area-card.job:hover .job-card-2 {
  transform: translate(70px, 0) rotate(3deg); z-index: 3;
}

/* Booking Card */
.booking-img {
  top: 145px; left: 35px; width: 340px;
  border-radius: 16px; transform: rotate(-10.32deg);
  box-shadow: 0 40px 111px rgba(0,0,0,0.4);
  transition: all 0.3s;
  transform-style: preserve-3d;
}
.area-card.booking:hover .booking-img {
  transform: scale(0.95) rotateX(30deg) rotate(-10.32deg);
}

/* Events Card */
.events-rows {
  position: absolute; top: 133px; left: 0; width: 100%;
  display: flex; flex-direction: column; gap: 10px;
}
.event-row { 
  display: flex; gap: 10px; perspective: 900px;
}
.event-row.r1 { padding-left: 15px; }
.event-row.r2 { margin-left: -37px; }
.event-row.r3 { padding-left: 15px; }
.event-img {
  width: 366px; border-radius: 26px;
  box-shadow: 0 20px 44px rgba(0,0,0,0.1);
  transition: transform 0.3s, opacity 0.3s, z-index 0s;
  transform: perspective(500px);
}

/* World Events Dimming Interaction */
.events-rows:hover .event-img { opacity: 0.3; }
.events-rows .event-img:hover { 
  opacity: 1; 
  transform: scale(1.05); 
  z-index: 2; 
  box-shadow: 0 0 40px rgba(0,0,0,0.2); 
}

/* Shopping Card */
.shop-img-1 {
  bottom: 16px; right: 20px; width: 350px; z-index: 4;
  border-radius: 15px; box-shadow: 0 38px 107px rgba(0,0,0,0.4);
  transition: transform 0.4s;
}
.shop-img-2 {
  bottom: 88px; right: 35px; width: 314px; z-index: 3;
  border-radius: 15px; transform: rotate(3.5deg);
  box-shadow: 0 38px 107px rgba(0,0,0,0.4);
  transition: transform 0.4s;
}
.shop-bg {
  bottom: -24px; left: 28px; width: 336px; z-index: 1;
  border-radius: 15px;
}
.shop-emoji-group {
  position: absolute; bottom: 10px; left: 13px; width: 73px; z-index: 4;
}
.shop-emoji-group img:nth-child(1) {
  position: relative;
  z-index: 1;
}
.shop-emoji-group img:nth-child(2) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
}

/* Hover States for Shopping */
.area-card.shopping:hover .shop-img-1 { transform: translateY(30px) rotate(8deg); z-index: 2; }
.area-card.shopping:hover .shop-img-2 { transform: scale(1.1) rotate(-7deg); }

/* Food Card */
.food-content {
  top: 128px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: 277px;
  transition: transform 0.3s ease;
}
.food-card-img { width: 100%; border-radius: 15px; transform: rotate(-6deg); box-shadow: 0 22px 83px rgba(0,0,0,0.25); }
.food-emoji { width: 59px; margin-top: 4px; margin-left: 109px; }

/* Food Card Interaction */
.area-card.food:hover .food-content {
  transform: translateY(-10px) rotate(2deg) scale(1.05);
}

/* Access Section */
.access-section {
  padding-bottom: 150px;
  padding-top: 150px; 
}

.access-wrapper {
  display: flex;
  flex-direction: column;
  gap: 60px;
  margin-top: 120px;
}
.access-left { width: 100%; padding-right: 0; }
.access-right {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.access-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.access-card > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.icon-40 { width: 40px; height: 40px; }

/* "Access to real commentaries" cards — script.js mounts a lottie
   <span class="access-icon-lottie"> in place of the static SVG so the
   icon never blinks. The lottie is loaded paused at frame 0 and plays
   once on hover. Until the lottie's DOMLoaded fires, the static SVG
   remains as a fallback. */
.access-card .access-icon-lottie {
  width: 40px;
  height: 40px;
  display: none;
}
.access-card.is-lottie-ready .icon-40 { display: none; }
.access-card.is-lottie-ready .access-icon-lottie { display: block; }

/* CTA Section */
.cta-section { padding-top: 96px; padding-bottom: 0; }
.cta-box {
  background-color: var(--light-blue);
  border: 2px solid rgba(0,0,0,0.05);
  border-radius: 20px;
  padding: 83px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px; /* title↔button — overridden to 12 on mobile/tablet */
  position: relative;
  overflow: hidden;
}
.cta-box h2, .cta-box .btn-install { 
  position: relative; z-index: 2;
}
.cta-box h2 { max-width: 440px; }

/* Balls Animation Container */
.balls-wrapper {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  box-sizing: border-box;
  pointer-events: none;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  contain: paint;
}
.balls-container {
  /* Square at full wrapper width. The outermost dot path sits at ~40%
     of the container (inner-ring SVG scaled to 84.5% of an SVG whose
     dots are at 47% of its viewBox), so on desktop's 960px cta-box the
     ring lands ~100px inside each side — tighter padding than 80% gave
     while still leaving the title untouched and the top/bottom of the
     circle clipped by .balls-wrapper. */
  width: 90%;
  aspect-ratio: 1;
  position: relative;
  transform: translateZ(0);
  will-change: transform, opacity;
}
.ball-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.ball-circle > svg {
  width: 100%;
  height: 100%;
  display: block;
  transform-origin: 50% 50%;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.ball-circle-outer { width: 100%; }
.ball-circle-outer > svg { animation: ballSpin 112.5s linear infinite; }
.ball-circle-inner { width: 84.5%; }
.ball-circle-inner > svg { animation: ballSpin 81.25s linear infinite; }

@keyframes ballSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .ball-circle > svg { animation: none; }
}

/* Footer v2 */
.footer-v2 {
  padding-top: 88px;
  padding-bottom: 40px;
  background: #FFF;
  overflow: hidden;
}

.footer-v2-cols {
  display: grid;
  grid-template-columns: 90px 94px minmax(240px, 288px) 193px;
  justify-content: space-between;
  column-gap: 80px;
  row-gap: 48px;
  align-items: start;
}

.footer-v2-heading {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--black);
  opacity: 0.4;
  margin: 0 0 14px;
}
.footer-v2-heading-strong {
  opacity: 1;
}
.footer-v2-signup .footer-v2-heading,
.footer-v2-contact .footer-v2-heading {
  margin-bottom: 5px;
}

.footer-v2-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-v2-link {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--black);
  text-decoration: none;
  transition: opacity 0.25s ease;
}
.footer-v2-link:hover { opacity: 0.6; }

.footer-v2-muted {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--black);
  opacity: 0.4;
}

.footer-v2-form {
  margin-top: 18px;
  height: 34px;
  width: 100%;
  background: rgba(18, 25, 21, 0.1);
  border-radius: 30.83px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0 8px 12px;
}
.footer-v2-form input {
  border: none;
  background: transparent;
  outline: none;
  flex: 1;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--black);
  min-width: 0;
}
.footer-v2-form input::placeholder { opacity: 0.3; color: var(--black); }
.footer-v2-form button {
  border: none;
  background: var(--black);
  color: #fff;
  height: 34px;
  padding: 7px 14px;
  border-radius: 96px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
}

.footer-v2-cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.footer-v2-download,
.footer-v2-mobile {
  width: 193px;
  height: 55px;
  border-radius: 10px;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.footer-v2-mobile {
  justify-content: flex-start;
  cursor: default;
  background: rgba(18, 25, 21, 0.05);
  border: none;
  box-shadow: none;
  transition: none;
}
.footer-v2-mobile:hover {
  transform: none;
  box-shadow: none;
  border-color: transparent;
}
.footer-v2-mobile .footer-v2-download-text {
  opacity: 0.4;
}

/* Footer text block keeps its fixed width so the icon aligns to
   the right edge of the 193px card; typography is shared with
   .btn-content / .btn-title / .btn-subtitle above. */
.footer-v2-download-text {
  width: 132px;
}
.footer-v2-download-icon {
  width: 36px;
  height: 31.261px;
}

.footer-v2-contact-row {
  margin-top: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
}

.footer-v2-socials {
  display: flex;
  gap: 8px;
  width: 112px;
}
.footer-v2-social {
  width: 32px;
  height: 32px;
  border-radius: 25px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-v2-social img {
  width: 18px;
  height: 18px;
  opacity: 0.3;
}

.footer-v2-contact {
  width: 288px;
}
.footer-v2-email {
  margin-top: 20px;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--black);
}

.footer-v2-divider {
  margin-top: 52px;
  height: 1px;
  width: 100%;
  background: rgba(18,25,21,0.1);
}

.footer-v2-watermark {
  margin-top: 52px;
  display: flex;
  justify-content: center;
}

.footer-v2-marks {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  max-width: 960px;
  position: relative;
}

.footer-v2-mark {
  pointer-events: none;
  user-select: none;
  flex-shrink: 0;
  align-self: flex-start;
}
/* Pin aspect-ratio so the SVGs (which declare width/height 100% in
   their inner attrs) don't stretch when used as <img>. Values come
   from each SVG's own viewBox. */
.footer-v2-mark-go {
  width: 35.5%;
  aspect-ratio: 340.497 / 170.607;
  height: auto;
}
.footer-v2-mark-sip {
  width: 37.8%;
  aspect-ratio: 363.225 / 170.607;
  height: auto;
}
.footer-v2-mark-dash {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  margin: 0 12px;
}

.dash-shape {
  width: 100%;
  aspect-ratio: 10 / 1;
  background: rgba(18, 25, 21, 0.08);
  border-radius: 4px;
}

.footer-v2-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 4px 16px;
  text-align: left;
  margin-top: 24px;
  padding-top: 16px;
  padding-bottom: 0;
}
/* "All rights reserved © 2026 Super Clear LTD" reads as one phrase
   separated only by space-width gaps; the rest of the legal items
   keep the larger 16px gap from the parent. */
.footer-v2-legal-credit {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 0.25em;
}
.footer-v2-muted-small {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  opacity: 0.3;
}
.footer-v2-companyline {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--black);
}
.footer-v2-company {
  font-family: var(--font-ui);
  font-weight: 500;
  color: var(--black);
  text-decoration: none;
  transition: opacity 0.2s ease;
}
a.footer-v2-company:hover {
  opacity: 0.7;
}

/* Wrap Terms + Privacy together as a single flex group so they always
   wrap as a unit alongside the credit (instead of breaking apart one
   at a time). */
.footer-v2-legal-policies {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 16px;
}

.footer-v2-policy {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--black);
  opacity: 0.8;
  transition: opacity 0.25s ease;
}
.footer-v2-policy:hover { opacity: 0.5; }

/* Footer */
.footer {
  padding-bottom: 40px;
}

/* Why We've Built This section (within footer-v2) */
.footer-v2 .footer-top {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 52px 0;
}

.footer-top {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding-bottom: 91px;
  border-bottom: 1px solid rgba(18,25,21,0.1);
}
.opacity-20 { opacity: 0.2; }
.video-thumbnail {
  width: 98px; height: 64px;
  position: relative;
  transition: transform 0.2s;
}
.video-thumbnail:hover { 
  transform: scale(1.2); 
  animation: wiggle 0.6s ease-in-out;
}
@keyframes wiggle {
  0% { transform: scale(1.2) rotate(0deg); }
  15% { transform: scale(1.2) rotate(-10deg); }
  30% { transform: scale(1.2) rotate(10deg); }
  45% { transform: scale(1.2) rotate(-10deg); }
  60% { transform: scale(1.2) rotate(10deg); }
  75% { transform: scale(1.2) rotate(-5deg); }
  100% { transform: scale(1.2) rotate(0deg); }
}
.video-img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; transform: rotate(6deg); }
.play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 28px; }

.footer-bottom {
  padding-top: 74px;
  position: relative;
}
.footer-image-wrapper {
  position: relative;
  width: 100%;
}
.footer-logo-img { width: 100%; display: block; }

.footer-nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.footer-copyright-wrapper {
  position: absolute;
  top: 24px;
  left: 372px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  pointer-events: auto;
}

.footer-links-wrapper {
  position: absolute;
  top: 128px;
  left: 371px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  pointer-events: auto;
}

.footer-text {
  font-size: 14px;
  line-height: 1.43;
  color: var(--black);
}

.footer-link {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.43;
  color: var(--black-80);
  text-decoration: none;
  transition: opacity 0.3s;
}
.footer-link:hover { opacity: 0.4; }

.opacity-30 { opacity: 0.3; }

/* ─── Cookies Banner (Figma 4541:10084) ────────────────────────────── */
.cookie-banner {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 50;
  width: 280px;
  background: #ffc130;
  border: 0.5px solid rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: cookieBannerIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.cookie-banner[hidden] { display: none; }

@keyframes cookieBannerIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cookie-banner-head {
  padding: 12px 12px 0;
  text-align: center;
  color: #121915;
}
.cookie-banner-title {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 15px;
  line-height: 20px;
}
.cookie-banner-policy {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 13px;
  line-height: 19px;
}
.cookie-banner-policy-link {
  color: inherit;
  text-decoration: underline;
}
.cookie-banner-policy-link:hover { opacity: 0.7; }

/* Preferences panel — animates in via max-height + opacity. Stays in
   the layout always; the transitions can run on hover/state changes. */
.cookie-banner-prefs {
  max-height: 0;
  opacity: 0;
  padding: 0 8px;
  overflow: hidden;
  transition:
    max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.2s ease,
    margin-top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.cookie-banner[data-state="expanded"] .cookie-banner-prefs {
  max-height: 200px;
  opacity: 1;
  margin-top: 8px;
}
.cookie-prefs-panel {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
}
.cookie-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 36px;
  padding: 10px 8px 10px 10px;
}
.cookie-toggle-label {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 13px;
  line-height: 17px;
  color: #121915;
}
.cookie-toggle-divider {
  margin: 0;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* Toggle switch — 34×20 track, 17px knob slides on translateX */
.cookie-toggle {
  position: relative;
  width: 34px;
  height: 20px;
  padding: 0;
  border: none;
  background: rgba(18, 25, 21, 0.2);
  border-radius: 11px;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-block;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}
.cookie-toggle.is-on {
  background: #46BA58;
}
.cookie-toggle.is-required.is-on {
  opacity: 0.34;
  cursor: not-allowed;
}
.cookie-toggle-knob {
  position: absolute;
  top: 1.5px;
  left: 1.5px;
  width: 17px;
  height: 17px;
  background: #fff;
  border: 0.5px solid rgba(0, 0, 0, 0.12);
  border-radius: 50%;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.cookie-toggle.is-on .cookie-toggle-knob {
  /* track 34px - knob 17px - 2 × 1.5px padding = 14px slide distance */
  transform: translateX(14px);
}

/* Down-pointing arrow under the panel (only in expanded state) */
.cookie-prefs-arrow {
  display: block;
  width: 0;
  height: 0;
  margin: 0 0 0 24px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 8px solid #fff;
}

/* Action row — buttons differ between collapsed/expanded but layout shared */
.cookie-banner-actions {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 8px;
}
.cookie-btn {
  height: 34px;
  padding: 7px 14px;
  border-radius: 96px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.cookie-btn:hover { opacity: 0.85; }
.cookie-btn:active { transform: translateY(1px); }
.cookie-btn-secondary {
  background: transparent;
  border: 1px solid rgba(18, 25, 21, 0.2);
  color: #121915;
  width: 148px; /* matches Figma collapsed-state width */
}
.cookie-btn-primary {
  background: #121915;
  border: none;
  color: #fff;
  flex: 1;
}
/* Toggle which label is visible based on banner state */
.cookie-btn-label-collapsed,
.cookie-btn-label-expanded { display: inline; }
.cookie-banner[data-state="collapsed"] .cookie-btn-label-expanded,
.cookie-banner[data-state="expanded"]  .cookie-btn-label-collapsed { display: none; }

/* In expanded state the secondary button shrinks (no fixed width) so
   "Confirm Selected" sits next to "Accept All" */
.cookie-banner[data-state="expanded"] .cookie-btn-secondary {
  width: auto;
  flex: 1;
}
.cookie-banner[data-state="expanded"] .cookie-btn-primary {
  flex: 0 0 auto;
}

@media (max-width: 479px) {
  /* Keep the desktop size; just center the banner horizontally on mobile. */
  .cookie-banner {
    left: 50%;
    right: auto;
    bottom: 12px;
    width: 280px;
    transform: translateX(-50%);
  }
  /* Preserve the slide-in animation without clobbering the centering transform. */
  @keyframes cookieBannerInMobile {
    from { opacity: 0; transform: translate(-50%, 12px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
  }
  .cookie-banner { animation-name: cookieBannerInMobile; }
}

/* Responsive Media Queries */
@media (max-width: 1055px) {
  h1 { font-size: 7vw; }

  /* Hero */
  /* Hero mobile layout — exact spacing per latest direction:
     - Title "Comment any website" starts at y=142 (page top)
     - text → button = 28px (subtitle gap)
     - button → image = 32px
     - image → logos = 32px
     - logos → next section = 64px
     - Order: text → button → image → gossip */
  .hero-wrapper {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-top: 160px;
    padding-bottom: 0;
    position: relative;
  }
  .hero-left {
    display: contents;
  }
  .hero-text {
    order: 1;
    width: 245px; /* Figma 4566:32346 — narrower than container so the chat
                     phone has room to the right */
    margin: 0;
    text-align: left;
    align-items: stretch;
    padding-top: 0;
    position: relative;
    z-index: 2;
  }
  .hero-text h1 {
    margin-bottom: 15px;
    /* `<br>` in the markup creates the break; nowrap stops the second
       line ("any website") from ever wrapping when the column shrinks. */
    white-space: nowrap;
  }
  .hero-section .btn-install {
    order: 2;
    width: 220px;
    min-width: 0;
    flex: none;
    margin: 24px 0 0 0;
    position: relative;
    z-index: 2;
  }
  /* Chat-phone image anchored per Figma 4566:32787 — top 100, viewport-x
     270, width 240. Left-anchored (fixed pixel offset from the container's
     left edge) so the phone keeps the same starting position and more of
     it becomes visible as the viewport widens. */
  .hero-right {
    order: 3;
    position: absolute;
    top: 100px;
    left: 246px; /* 270 from viewport - 24px container padding */
    right: auto;
    width: 240px;
    margin: 0;
    overflow: visible;
    z-index: 1;
    pointer-events: none;
  }
  .hero-image {
    width: 100%;
    margin-left: 0;
  }
  .hero-gossiping {
    order: 4;
    align-items: flex-start;
    margin: 40px 0 0 0;
  }

  /* Decorative bg PNG: top 70, right 8 from viewport edge,
     height 580, width by aspect (overflows to the left). */
  .hero-bg-img {
    display: block;
    position: absolute;
    top: 70px;
    right: 8px;
    left: auto;
    height: 580px;
    width: auto;
    max-width: none;
    transform: none;
  }

  /* Gossiping logos: row height 36, Wembley scales to 36 tall.
     The Wembley SVG uses preserveAspectRatio="none", so it has no
     intrinsic ratio — give it an explicit width that matches the
     viewBox aspect (93.96 / 49.61 ≈ 1.894) instead of width:auto. */
  .gossip-logo-wembley { width: 68px; height: 36px; }

  /* Cancel desktop's negative margin into hero — sections sit naturally */
  .areas-section { margin-top: 0; }

  /* Top Nav — let .top-nav-bar handle all padding internally.
     Removing the old 12px sides on .top-nav so the only horizontal
     padding is the 8px wrapper + 16/12 inside the bar. */
  .nav-links { flex-wrap: wrap; justify-content: center; }

  /* Gossiping row */
  .hero-gossiping { align-items: flex-start; }
  .hero-gossiping-label { font-size: 14px; text-align: left; }
  .hero-gossiping-logos { flex-wrap: wrap; gap: 18px; justify-content: flex-start; }

  /* Footer v2 */
  .footer-v2 { padding-top: 110px; }
  .footer-v2-cols { grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .footer-v2-download, .footer-v2-mobile { width: 100%; max-width: 240px; }
  .footer-v2-contact-row { margin-top: 60px; flex-direction: column; align-items: flex-start; }
  .footer-v2-watermark { margin-top: 36px; }
  .footer-v2-legal { margin-top: 16px; }
  
  /* Disable hover interaction on mobile */
  
  /* Buttons */
  .btn-install { text-align: left; }
  .btn-content { align-items: flex-start; }

  /* Areas */
  .areas-grid { grid-template-columns: 1fr; }
  .area-card { height: auto; aspect-ratio: 634/400; padding: 24px; }
  .area-card.rent, .area-card.events, .area-card.shopping { grid-column: span 1; }
  .rent-img-photos { width: 46%; bottom: -19%; top: auto; }
  .rent-group { width: 59%; bottom: -13%; top: auto; right: 5%; }
  .events-rows { top: auto; bottom: -3%; }
  .shop-img-1 { width: 55%; bottom: 5%; right: 3%; }
  .shop-img-2 { width: 50%; bottom: 23%; right: 5.5%; }
  .shop-bg { width: 53%; bottom: -8%; left: 4%; }

  /* Access */
  .access-wrapper { gap: 40px; margin-top: 120px; }
  .access-right { grid-template-columns: repeat(2, 1fr); }
  .access-section { padding-top: 80px; padding-bottom: 120px; }

  /* Footer */
  /* (removed .footer-top { flex-direction: column } — mobile keeps
     it as a horizontal row per the Figma 4520:8924 layout.) */
  .footer-nav { position: relative; height: auto; margin-top: 20px; }
  .footer-copyright-wrapper { position: static; margin-bottom: 20px; }
  .footer-links-wrapper { position: static; }
  .footer-bottom { padding-bottom: 60px; }
}

/* ─── Tablet (600 – 1055) ─────────────────────────────────────────
   Container gets a 40px gutter, areas grid splits into two columns,
   and typography sits halfway between mobile (h1 42/h2 28) and desktop
   (h1 56/h2 44) so the same scale can be reused on subpages. */
@media (min-width: 701px) and (max-width: 1055px) {
  .container { padding: 0 64px; }

  /* Nav width tracks the 64px content gutter — pill sits 44px from
     viewport, the inner bar starts at 64px (aligned with content). */
  .top-nav-wrapper {
    padding: 0 44px;
    box-sizing: border-box;
  }

  /* Cancel the tablet container's 80px gutter on the nav — sizing
     is driven by .top-nav-wrapper's 60px padding + .top-nav's 20px
     padding, so the bar items end up at the 80px content edge. */
  .nav-container {
    max-width: 100%;
    padding: 0;
    box-sizing: border-box;
  }

  /* Typography midway between mobile and desktop */
  h1 { font-size: 48px; line-height: 48px; letter-spacing: -0.48px; }
  h2 { font-size: 36px; line-height: 40px; letter-spacing: -0.72px; }
  h3 { font-size: 20px; line-height: 24px; letter-spacing: -0.4px; }
  .hero-subtitle { font-size: 16px; line-height: 24px; }

  /* Hero background image — full viewport width minus 20px of gutter
     on each side (sits inside the 40px content gutter so it can bleed
     wider than the section content). */
  .hero-bg-img {
    position: absolute;
    top: 70px;
    left: 20px;
    right: auto;
    width: calc(100% - 40px);
    height: auto;
    max-width: none;
    transform: none;
  }
  /* Tablet: let the hero text column expand to fill the area left of
     the absolutely-positioned chat phone, but never exceed half the
     viewport so the title doesn't crowd the chat image on wider screens. */
  .hero-text { width: min(calc(100% - 280px), 50vw); }
  /* Shift the chat-phone image down 32px and the hero text column down
     16px from their default tablet/mobile positions so both clear the
     widened background image without overlapping the browser frame. */
  .hero-right { top: 132px; }
  .hero-wrapper { padding-top: 176px; }

  /* Areas section spacing — same scheme as mobile but a touch larger
     so the title clears the hero's gossip logos cleanly. */
  .areas-section {
    margin-top: 0;
    padding-top: 96px;
    padding-bottom: 96px;
  }
  /* Tighter title↔button gap inside the CTA block */
  .cta-box { gap: 20px; }
  .areas-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  /* Cards: same fixed-height treatment as mobile so the inline images
     (chat widgets, photo stacks) always have a predictable canvas to
     paint into. */
  .area-card {
    height: 309px;
    aspect-ratio: auto;
    padding: 24px;
  }
  /* Cards that span 2 cols on desktop's 3-col grid drop back to a single
     column here so the 2-col grid stays even. */
  .area-card.rent,
  .area-card.events,
  .area-card.shopping {
    grid-column: span 1;
  }

  /* (Removed — Terms and Privacy now share a single .footer-v2-legal-
     policies flex group that wraps as a unit. No per-link flex-basis
     hack needed.) */

}

@media (max-width: 700px) {
  .hero-section { overflow-x: clip; overflow-y: visible; }

  /* CTA balls on mobile — wrapper 127% of the cta-box, balls fill it
     100%. With the SVG's ~33% dot-path radius, the ring lands ~26px
     inside the box edge. */
  .balls-wrapper {
    width: 127%;
    height: 127%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .balls-container { width: 100%; }

  /* Mobile typography — exact values from Figma 4545:10280 */
  h1 { font-size: 42px; line-height: 42px; letter-spacing: -0.42px; }
  h2 { font-size: 28px; line-height: 28px; letter-spacing: -0.56px; }
  h3 { font-size: 20px; line-height: 24px; letter-spacing: -0.4px; }
  .hero-subtitle { font-size: 16px; line-height: 24px; }
  .container { padding: 0 24px; }

  /* Nav mobile per Figma 4545:10281:
     - Wrapper: top 6, full width, 8px left/right
     - Bar: full width, height 50, padding pl-16 pr-12 py-8, radius 88
     - Logo (left) — space-between — Actions group (Install pill + 6px + hamburger)
     - Hamburger 34×34 with 2 bars (18×2, 6px between) */
  /* Wrapper at 4px from viewport so the pill is 8px narrower than the
     viewport overall — combined with .top-nav's 20px padding, the
     inner bar lines up with the 24px content gutter and the pill shows
     just 20px of visible white on each side of the content. */
  .top-nav-wrapper {
    top: 6px;
    padding: 0 4px;
    box-sizing: border-box;
  }
  .top-nav-wrapper > .nav-container {
    max-width: 100%;
    padding: 0;
  }
  /* Mobile: trim the pill's right padding from 20px to 16px so the
     hamburger sits closer to the viewport edge. Corner radius is half
     the closed bar height (50/2 = 25) so the pill is a true semicircle
     cap when closed, and the same value when expanded keeps the bottom
     rows from being clipped by a deep curve. */
  .top-nav { border-radius: 25px; padding-right: 16px; }
  /* Mobile bar: no extra horizontal padding — items align with the
     content frame (left/right edges match the page below). */
  .top-nav-bar {
    height: 50px;
    padding: 8px 0;
    justify-content: space-between;
  }
  .nav-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    gap: 6px;
    align-items: center;
    margin-left: 0;
    background: transparent;
    border: none;
    cursor: pointer;
  }
  .nav-hamburger span {
    width: 18px;
    height: 2px;
    background: #000;
    border-radius: 14px;
    transition: transform 0.25s ease, opacity 0.2s ease;
    transform-origin: center;
  }
  .nav-hamburger span:nth-child(2) { display: none; }

  /* (.hero-bg-img mobile rules now live in the 991 breakpoint above
     — top:70 right:8 height:580 — so they cascade down to all
     mobile widths.) */

  /* Areas section per Figma 4545:14168:
       root flex-col gap-32, heading + cards container
       cards container flex-col gap-8 (cards stacked tight)
       each card: h-309 p-24 rounded-20 gap-6 internal */
  .areas-section { margin-top: 0; padding-top: 64px; padding-bottom: 80px; }
  .cta-section { padding-top: 64px; }
  .cta-box { gap: 20px; }
  .section-title { margin-bottom: 32px; }
  .areas-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .area-card {
    height: 309px;
    aspect-ratio: auto;
    padding: 24px;
    border-radius: 20px;
    overflow: hidden;
  }
  .area-card > h3 {
    margin-bottom: 6px; /* title→description gap */
  }
  .area-card.rent, .area-card.events, .area-card.shopping {
    grid-column: span 1;
  }

  /* Access section per Figma 4545:14170:
       root flex-col gap-32 (heading + cards block)
       cards block 2-col grid with column-gap 24, row-gap 32 */
  .access-wrapper {
    gap: 32px;
    margin-top: 0;
  }
  .access-right {
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    row-gap: 32px;
  }
  /* Cards: icon→text gap 20, title→description gap 6 (already matches),
     text color #062f16 per Figma 4545:14180 */
  .access-card { gap: 20px; }
  .access-card > div { gap: 6px; color: #062f16; }
  .access-card h3 { color: #062f16; letter-spacing: -0.4px; }

  /* (.hero-wrapper padding-top: 142 lives in the 991 breakpoint
     above — title lands at y:142 per direction.) */

  /* Mobile hamburger menu */
  /* (Older 32×32 hamburger styles removed — the 34×34 Figma-spec
     rules earlier in this media query now apply unimpeded.) */
  /* 2 visible bars (span 2 is display:none) sit 4px above/below center
     with the 6px gap. Translate to the centerline, then rotate into X. */
  .nav-hamburger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(4px) rotate(45deg);
  }
  .nav-hamburger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-4px) rotate(-45deg);
  }
  
  /* Mobile menu (Figma 4603:535) — the 3 nav-links in the top bar are
     hidden on mobile; the menu content lives inside the dropdown panel
     instead and is revealed when the hamburger toggles .expanded. */
  .nav-links { display: none; }
  .top-nav { position: relative; }
  /* Hide header tooltips on mobile (the menu shows "Coming soon" inline) */
  .nav-link[data-tooltip]::after { display: none; }

  /* When the pill is expanded on mobile, reveal the mobile-only label
     and meta rows, and expand the panel to fit everything. */
  .top-nav.expanded .nav-dropdown-panel { max-height: 720px; }
  .top-nav.expanded .nav-mobile-label,
  .top-nav.expanded .nav-mobile-meta { display: block; }

  /* Lock body scroll while the menu is open, and dim the page behind
     the pill with a 15% black overlay. Tapping the overlay falls
     through to the document-level outside-click handler in script.js
     which closes the menu. */
  body.nav-open { overflow: hidden; }
  body.nav-open::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.15);
    z-index: 9;
    pointer-events: auto;
  }

  /* Panel content has no horizontal padding of its own — the .top-nav's
     20px-left / 16px-right padding provides the gutter (matches Figma
     4603:535: pl-[20px] pr-[16px] on the outer pill). */
  .nav-dropdown-panel {
    margin: 0;
    padding: 0;
  }

  /* "Use Cases" header above the cards */
  .nav-mobile-label {
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.14px;
    color: #121915;
    padding: 10px 0;
  }

  /* Cards: single column, 32px icon, no hover pill, tighter padding */
  .nav-dropdown-grid {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 0;
    padding: 0 0 4px;
  }
  .nav-dropdown-card {
    padding: 8px 0;
    gap: 12px;
  }
  .nav-dropdown-icon { width: 32px; height: 32px; border-radius: 16px; }
  .nav-dropdown-icon img { width: 16px; height: 16px; }
  .nav-dropdown-hover-pill { display: none; }

  /* Meta rows below the cards */
  .nav-mobile-divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.08);
    margin: 0 0 4px;
  }
  .nav-mobile-row {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.14px;
    color: #121915;
  }
  .nav-mobile-row-label { opacity: 0.3; }

  /* 2-column card grid when the viewport has room (480–700 wide). */
  @media (min-width: 480px) {
    .nav-dropdown-grid {
      grid-template-columns: 1fr 1fr;
      column-gap: 12px;
    }
  }

  /* ─── Footer mobile — Figma 4520:8924, 1:1 ─────────────────────
     Root: bg-white, flex-col, gap-24, items-start, px-24 py-34. */
  .footer-v2 { padding: 64px 0 34px; }
  .footer-v2 .container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .footer-v2 .container > * { margin: 0; }

  /* Hide the empty contact-row */
  .footer-v2-contact-row { display: none; }

  /* Nav cols subgrid: Use Cases | Events row, then CTA row, then Sign up.
     All inner gaps unified to 24px per direction. */
  .footer-v2-cols {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "usecases events"
      "cta cta"
      "signup signup";
    column-gap: 24px;
    row-gap: 24px;
    width: 100%;
  }
  .footer-v2-cols > .footer-v2-col:nth-child(1) { grid-area: usecases; }
  .footer-v2-cols > .footer-v2-col:nth-child(2) { grid-area: events; }
  /* Heading-to-first-link gap matches link-to-link gap (12px) */
  .footer-v2-cols .footer-v2-heading { margin-bottom: 12px; }
  .footer-v2-signup { grid-area: signup; max-width: none; width: 100%; }
  .footer-v2-cta {
    grid-area: cta;
    flex-direction: row;
    gap: 12px;
    width: 100%;
    align-items: stretch;
  }
  /* Download card flexes; Mobile card is fixed 157.5px per Figma */
  .footer-v2-cta .footer-v2-download {
    flex: 1 0 0;
    width: auto;
    max-width: none;
    height: auto;
    padding: 8px 14px;
    position: relative;
    justify-content: flex-start;
  }
  .footer-v2-cta .footer-v2-mobile {
    flex: 1 0 0;
    width: auto;
    max-width: none;
    height: auto;
    padding: 8px 14px;
  }
  /* Download icon — mobile size 18.425×16 per Figma 4521:108 */
  .footer-v2-download-icon {
    width: 18.5px;
    height: 16px;
    margin-left: auto;
  }

  /* Sign up section per Figma 4521:95:
       outer gap-18 between .footer-v2-signup-text and the form
       inner gap-5 between title and description */
  .footer-v2-signup {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: flex-start;
  }
  .footer-v2-signup-text {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  .footer-v2-signup .footer-v2-heading,
  .footer-v2-signup .footer-v2-heading-strong {
    margin: 0;
  }
  .footer-v2-signup .footer-v2-muted {
    max-width: 288px;
    opacity: 0.4;
  }
  .footer-v2-form { margin-top: 0; }

  /* Why We've Built This? — single horizontal row, 24/48 type.
     align-self: stretch overrides the mobile container's
     align-items: flex-start so the row spans the full content width
     and justify-content: center actually centers the cluster. */
  .footer-v2 .footer-top {
    align-self: stretch;
    padding: 0 0 24px;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }
  /* Same for the bottom divider — without stretch it shrinks to 0 in
     the flex-column with align-items: flex-start. */
  .footer-v2 .footer-v2-divider { align-self: stretch; }
  .footer-v2 .footer-top h2 {
    font-size: 24px;
    line-height: 48px;
    white-space: nowrap;
  }
  .footer-v2 .footer-top .video-thumbnail { flex-shrink: 0; }

  /* Legal — single wrapping row, left-aligned. Credit phrase keeps its
     inline flow; Terms + Privacy stay together as a single flex group
     so they always wrap as a unit. */
  .footer-v2-legal {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 4px 32px;
    text-align: left;
    width: 100%;
    margin: 0;
  }
}

/* From 531px upward the hero phone fully clears the title column, so
   swap the anchor: image sits flush against the container's right edge
   instead of being pinned to a fixed left offset. Placed after the
   mobile (max-width:599) block so it wins in the 531–599 overlap. */
@media (min-width: 531px) and (max-width: 1055px) {
  .hero-right {
    left: auto;
    right: 0;
  }
}

/* ─── Nav layout: mobile-style up to 759 ─────────────────────────
   Under 760 the inline links collapse into the hamburger menu — at
   760+ the full desktop nav kicks in. Duplicates the styling already
   present in the 599 mobile block so it also applies at 600–759. */
@media (max-width: 479px) {
  /* Hold the 767px mobile typography per Figma — h1 stays 40, h2 28,
     h3 20, subtitle 16. Don't shrink further. */

  /* (.hero-wrapper padding-top: 142 and .hero-bg-img top: 70 are
     set in the 991 media query above and apply through to all
     mobile widths.) */

  /* Mobile hamburger menu */
  /* (Older 32×32 hamburger styles removed — the 34×34 Figma-spec
     rules earlier in this media query now apply unimpeded.) */
  /* 2 visible bars (span 2 is display:none) sit 4px above/below center
     with the 6px gap. Translate to the centerline, then rotate into X. */
  .nav-hamburger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(4px) rotate(45deg);
  }
  .nav-hamburger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-4px) rotate(-45deg);
  }
  
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    flex-direction: column;
    padding: 20px;
    gap: 16px;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    z-index: 100;
  }
  .nav-links.open {
    display: flex;
  }
  .nav-link {
    font-size: 16px;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
  }
  .nav-link:last-of-type { border-bottom: none; }

  .top-nav { position: relative; }

  /* Gossiping: smaller/compact */
  .hero-gossiping-logos { gap: 14px; }
  .gossip-logo-wembley { width: 72px; height: 38px; }
  .gossip-logo-silverstone { width: 120px; height: 19px; }
  .gossip-logo-o2 { width: 80px; }
  .gossip-logo-dua { width: 82px; height: 22px; }

  /* Area cards: remove subtitle, fix height, clip illustrations */
  .area-card { 
    min-height: 260px; 
    height: auto; 
    aspect-ratio: auto;
    overflow: hidden;
  }
  /* Show area card descriptions on mobile per Figma 4545:14168 */
  .area-card > h3 + div:not(.card-content) { display: block; }
  
  /* Access section: keep 2 columns on mobile per Figma 4545:10280 */
  .access-right { grid-template-columns: 1fr 1fr; }

  /* Footer keeps the 24px-gap flex-column layout from 767px down.
     Tighten the "Why We've Built This?" gap on tiny screens but
     keep the single-row arrangement. */
  .footer-v2 .footer-top {
    gap: 8px;
  }

  /* (Balls-wrapper scaling moved out — it now lives in the mobile/tablet
     blocks below so the spinning circles stay inside the cta-box at every
     size and never cross the title.) */
}