/* ==========================================================================
   Layer Web — base, header and hero
   Tokens come from the Figma file (Cinza / Glass / Typography styles).
   ========================================================================== */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../assets/fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../assets/fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --gray-50: #f7f7f7;
  --gray-300: #b2b2b2;
  --gray-400: #9b9b9b;
  --gray-500: #848484;
  --gray-600: #6d6d6d;
  --gray-800: #3e3e3e;
  --gray-900: #151515;
  --gray-950: #0a0a0a;
  --blue-950: #0b0b15;
  --glass-5: rgba(247, 247, 247, 0.05);
  --glass-10: rgba(247, 247, 247, 0.1);

  --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --page-gutter: 40px;
  --header-height: 80px;
  --promo-height: 34px;                                            /* Black November bar */
  --top-offset: calc(var(--promo-height) + var(--header-height));  /* bar + header: the space fixed at the top of the window */
  --radius: 12px;

  /* Framed column (Figma "Limit Width" 1600): dashed guide lines on its sides, content 40px inside them.
     --frame-gutter is the space between the screen edge and the lines. */
  --frame-max: 1600px;
  --frame-gutter: var(--page-gutter);
  --frame-pad: 40px;
  --line: var(--glass-10);   /* dashed lines: 1px, 2px dash / 2px gap (Figma dash 2,2) */
  --line-dot: #555555;       /* 4px dots where two lines cross */
  --dash-y: linear-gradient(180deg, var(--line) 50%, transparent 50%);
  --dash-x: linear-gradient(90deg, var(--line) 50%, transparent 50%);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--top-offset);
}

body {
  margin: 0;
  background: var(--gray-950);
  color: var(--gray-50);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--gray-50);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 200;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--gray-50);
  color: var(--gray-950);
  font-size: 14px;
  font-weight: 600;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* --------------------------------------------------------------------------
   Guide lines (Figma: dashed 1px Glass 10% lines and #555 dots at the crossings)
   .frame          the 1600px column with a dashed line on each side
   .line-top/-bottom  a dashed line on the top/bottom edge of any block (full width of that block)
   .frame-dots     4 dots on the corners of a block that sits between the side lines
                   (move them with --dot-top / --dot-bottom when the crossing line is just outside)
   -------------------------------------------------------------------------- */
.frame {
  width: 100%;
  max-width: var(--frame-max);
  margin-inline: auto;
  background-image: var(--dash-y), var(--dash-y);
  background-size: 1px 4px, 1px 4px;
  background-position: left top, right top;
  background-repeat: repeat-y;
}

.line-top,
.line-bottom { position: relative; }
.line-top::before,
.line-bottom::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  height: 1px;
  background: var(--dash-x) left top / 4px 1px repeat-x;
  pointer-events: none;
}
.line-top::before { top: 0; }
.line-bottom::after { bottom: 0; }

.frame-dots { position: relative; }
.frame-dots::before,
.frame-dots::after {
  content: "";
  position: absolute;
  left: -1.5px;
  right: -1.5px;
  z-index: 3;
  height: 4px;
  background:
    radial-gradient(circle closest-side, var(--line-dot) 85%, transparent) left center / 4px 4px no-repeat,
    radial-gradient(circle closest-side, var(--line-dot) 85%, transparent) right center / 4px 4px no-repeat;
  pointer-events: none;
}
.frame-dots::before { top: var(--dot-top, -1.5px); }
.frame-dots::after { bottom: var(--dot-bottom, -1.5px); }
/* A framed section that starts with a dashed line across the column (Figma Wrapper stroke 1,1,0,1). Its dots go on
   that top line only: the next section (or the footer) puts the dots on the line below. */
.frame--top {
  background-image: var(--dash-y), var(--dash-y), var(--dash-x);
  background-size: 1px 4px, 1px 4px, 4px 1px;
  background-position: left top, right top, left top;
  background-repeat: repeat-y, repeat-y, repeat-x;
}
.frame-dots--top::after { display: none; }

/* --------------------------------------------------------------------------
   Page hero (Home 109:145, Pricing 443:3240, Contact 523:3319): full-width Figma gradient, content in the framed
   column. Badge, title (Manrope Light + Instrument Serif Italic, white fading to the right), subtitle, optional button.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/instrument-serif-italic.ttf") format("truetype");
}

.page-hero {
  position: relative;
  isolation: isolate;
  padding-inline: var(--frame-gutter);
}
/* The gradient stretches with the section like the Figma frame; its last part fades into the page (no hard line) */
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../assets/img/hero-home-bg.svg") center / 100% 100% no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
  pointer-events: none;
}
/* 140px on top (the fixed header sits over it), 60px below */
.page-hero__frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  padding: 140px 0 60px;
}

.headline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 100%;
  padding-inline: var(--frame-pad);
  text-align: center;
}
.headline-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 7px 13px; /* 6px 12px + the 1px line (Figma counts it in the size): 35px tall */
  border-radius: 100px;
  background: var(--glass-5);
  box-shadow: inset 0 0 0 1px var(--glass-10);
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray-50);
}
.headline-badge img { flex-shrink: 0; margin: 0.4375px; } /* 13.125px star centred in its 14px icon box */
.headline__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 100%;
}
/* White fading to 5% from left to right over the Figma text box (solid until 28.9%, 5% at 130%). The box width is
   --title-w (in em, so it follows the font size on small screens). */
.headline__title {
  width: var(--title-w, 7.4643em);
  max-width: 100%;
  margin: 0;
  font-size: 56px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  background: linear-gradient(90deg, #f7f7f7 28.86%, rgba(247, 247, 247, 0.05) 130.1%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.headline__title em {
  font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
}
.headline__title--stacked em { display: block; } /* the serif part on its own line, like the Figma */
.headline__subtitle {
  width: var(--subtitle-w, 330px);
  max-width: 100%;
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--gray-500);
}
.headline__subtitle span { color: var(--gray-50); }

/* Small silver button (Figma Upgrade Button 422:4222): dark text and arrow */
.cta-silver {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 17px; /* 14px 16px + the 1px line: 110 x 44 like the Figma */
  border-radius: 9px;
  background: linear-gradient(90deg, #aec5d7 0%, #f7f7f7 49.038%, #aec5d7 100%);
  box-shadow: inset 0 0 0 1px var(--glass-10);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: var(--blue-950);
  white-space: nowrap;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.cta-silver:hover { filter: brightness(1.06); }
.cta-silver:active { transform: scale(0.98); }
.cta-silver:focus-visible { outline-offset: 3px; }
.cta-silver__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
}

@media (max-width: 768px) {
  .page-hero__frame { gap: 48px; padding-top: 120px; padding-bottom: 48px; }
  .headline__title { font-size: 44px; }
}
@media (max-width: 480px) {
  .headline__title { font-size: 40px; }
}
/* Fine dot texture (like the footer's static grid: 2px dots every 12px, 16%), instead of the Figma's big dot pattern.
   Used on the Pricing guarantee panel and the Contact form section. */
:root { --dot-texture: radial-gradient(circle at center, rgba(247, 247, 247, 0.16) 0 1px, transparent 1.5px); }

/* --------------------------------------------------------------------------
   Black November bar (Figma 555:3299): 34px, above the Header, fixed at the top of the window together with it
   (sticky: it takes its place in the page flow at the top, and holds there when the page scrolls).
   Gradient: dark with an orange glow 69% across (the Figma stops, run right to left). The whole bar is a link.
   -------------------------------------------------------------------------- */
.promo-bar {
  position: sticky;
  top: 0;
  z-index: 101; /* above the header */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: var(--promo-height);
  padding-inline: var(--page-gutter);
  overflow: hidden;
  background: linear-gradient(to left, rgba(10, 10, 10, 0.25) 0%, #be4828 31%, rgba(10, 10, 10, 0.25) 83%), var(--gray-950);
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray-50);
  white-space: nowrap;
}
.promo-bar__label { font-weight: 600; line-height: 1; }
.promo-bar__dot {
  flex-shrink: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--gray-50);
}
/* The old price: struck through, at 50% */
.promo-bar s {
  color: rgba(247, 247, 247, 0.5);
  text-decoration-thickness: 1px;
}
/* Round arrow button: Glass 10% with a Glass 10% line, 23px */
.promo-bar__go {
  display: grid;
  flex-shrink: 0;
  width: 23px;
  height: 23px;
  place-items: center;
  border-radius: 50%;
  background: var(--glass-10);
  box-shadow: inset 0 0 0 1px var(--glass-10);
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.promo-bar:hover .promo-bar__go { background: rgba(247, 247, 247, 0.2); transform: translateX(2px); }
.promo-bar:focus-visible { outline-offset: -3px; }

/* Smaller screens: the same bar with less text (the Figma only has the desktop one) */
@media (max-width: 900px) {
  .promo-bar__dot--prime,
  .promo-bar__text--prime { display: none; }
}
@media (max-width: 560px) {
  .promo-bar { gap: 8px; padding-inline: 12px; }
  .promo-bar__was { display: none; }
  .promo-bar__dot { display: none; }
  .promo-bar__label { letter-spacing: 0.02em; }
}
@media (max-width: 340px) {
  .promo-bar__text { display: none; }
}

/* --------------------------------------------------------------------------
   Header: sticky, right under the Black November bar, and holds there (bar + header = --top-offset, 114px, always
   visible). The negative margin lets the page start under it (it floats over the hero), as the fixed header did.
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: var(--promo-height);
  z-index: 100;
  height: var(--header-height);
  margin-bottom: calc(-1 * var(--header-height));
  padding-inline: var(--frame-gutter);
  border-bottom: 1px solid transparent;
  transition: background-color 0.25s ease, border-color 0.25s ease, backdrop-filter 0.25s ease;
}
.header.is-scrolled {
  background: rgba(10, 10, 10, 0.72);
  border-bottom-color: var(--glass-5);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

/* Figma Header 170:59: the same 1600px column as the guide lines, content 80px inside them
   (40px below 1280px, where the nav and the profile card no longer fit) */
.header__wrapper {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  max-width: var(--frame-max);
  height: 100%;
  margin-inline: auto;
  padding: 12px 80px;
}
@media (max-width: 1280px) {
  .header__wrapper { padding-inline: var(--frame-pad); }
}

.header__logo-area { display: flex; align-items: center; }
.header__logo { display: block; width: 89px; height: 27.06px; }
.header__logo img { width: 100%; height: 100%; }

.header__end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* Nav menu: search + links */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px;
  border: 1px solid var(--glass-5);
  border-radius: 14px;
}

.search-field {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0;
}
.search-field__icon {
  position: absolute;
  left: 10px;
  width: 16px;
  height: 16px;
  pointer-events: none;
}
.search-field__input {
  width: 133px;
  padding: 10px 10px 10px 36px;
  border: 0;
  border-radius: var(--radius);
  background: var(--glass-5);
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray-50);
  outline: none;
  /* 1px inner stroke like Figma: it must not change the box size */
  box-shadow: inset 0 0 0 1px transparent;
  transition: box-shadow 0.2s ease, width 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.search-field__input::placeholder { color: var(--gray-500); opacity: 1; }
.search-field__input::-webkit-search-cancel-button { display: none; }
.search-field__input:focus { box-shadow: inset 0 0 0 1px var(--glass-10); }

.nav-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border-radius: var(--radius);
  color: var(--gray-500);
  font-size: 14px;
  line-height: 1.5;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px transparent;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.nav-item:hover { background: var(--glass-5); color: var(--gray-50); }
.nav-item.is-active {
  background: var(--glass-5);
  box-shadow: inset 0 0 0 1px var(--glass-10);
  color: var(--gray-50);
}

/* Profile card */
.profile-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border: 1px solid var(--glass-10);
  border-radius: var(--radius);
  background: var(--glass-5);
  transition: background-color 0.2s ease;
}
.profile-card:hover { background: var(--glass-10); }
.profile-card__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50px;
  object-fit: cover;
}
.profile-card__initial {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-800);
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-50);
}
/* Signed out: the card becomes a "Sign in" link (no avatar, no plan pill) */
.profile-card--signed-out { padding: 10px 16px; }
.profile-card--signed-out .profile-card__avatar,
.profile-card--signed-out .profile-card__plan { display: none; }
.profile-card--signed-out .profile-card__name { margin-left: 0; }
.profile-card__name {
  margin-left: -4px; /* 8px gap between avatar and name, 12px before the plan pill */
  font-size: 14px;
  line-height: 1.5;
  color: #fff;
  white-space: nowrap;
}
.profile-card__plan {
  padding: 6px 10px;
  border: 1px solid var(--glass-10);
  border-radius: 17px;
  background: var(--glass-5);
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray-50);
}

/* Any paid plan: white gradient pill with a crown, the same look as the "Pro" pill of the cards */
.profile-card__plan--pro {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-color: #0b0b15;
  background: linear-gradient(90deg, #aec5d7 0%, #f7f7f7 49.038%, #aec5d7 100%);
  color: var(--gray-950);
  white-space: nowrap;
}
.profile-card__plan--pro img { width: 15px; height: 15px; }

/* Menu button (small screens only) */
.menu-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--glass-10);
  border-radius: var(--radius);
  background: var(--glass-5);
}
.menu-toggle__bar {
  position: absolute;
  left: 13px;
  right: 13px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--gray-50);
  transition: transform 0.25s ease, top 0.25s ease;
}
.menu-toggle__bar:nth-child(1) { top: 17px; }
.menu-toggle__bar:nth-child(2) { top: 25px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) { top: 21px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) { top: 21px; transform: rotate(-45deg); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  justify-content: center;
  padding: 160px var(--page-gutter) 20px;
}
/* The Figma gradient lives on its own layer so its bottom edge can fade into the next
   section instead of ending in a hard line. The content above is not affected. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(
    201.304deg,
    rgb(10, 10, 10) 12.876%,
    rgb(18, 27, 32) 20.301%,
    rgb(10, 10, 10) 26.161%,
    rgb(18, 27, 32) 33.69%,
    rgb(10, 10, 10) 44.234%
  );
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%);
  pointer-events: none;
}

.hero__wrapper {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 40px;
  min-width: 0;
}

.hero-headline {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 760px; /* was 473px for the English line; the Portuguese slogan is longer */
  max-width: 100%;
  word-break: break-word;
}
.hero-headline__title {
  margin: 0;
  font-size: 56px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -1.12px;
  color: var(--gray-50);
}
.hero-headline__subtitle {
  width: 340px;
  max-width: 100%;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--gray-500);
}
.hero-headline__subtitle span { color: var(--gray-50); }

/* Filters */
.filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}

.categories {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.categories::-webkit-scrollbar { display: none; }

.chip {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  border: 0;
  border-radius: var(--radius);
  background: var(--glass-5);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: var(--gray-500);
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.chip:hover { background: var(--glass-10); color: var(--gray-50); }
.chip.is-active,
.chip.is-active:hover { background: var(--gray-50); color: var(--gray-950); }

.chip__icon {
  position: relative;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}
.chip__icon img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: filter 0.2s ease;
}
/* The icon files are grey (#848484): lighten on hover, darken when active. */
.chip:hover .chip__icon img { filter: brightness(0) invert(0.97); }
.chip.is-active .chip__icon img,
.chip.is-active:hover .chip__icon img { filter: brightness(0); }

/* These two icons are exported as inner groups and need their Figma offsets. */
.chip__icon--api img {
  inset: auto;
  top: 4.1667%;
  left: 4.1667%;
  width: 91.6667%;
  height: 91.6667%;
}
.chip__icon--trending img {
  inset: auto;
  top: 21.4286%;
  left: 0;
  width: 100%;
  height: 57.1429%;
}

/* --------------------------------------------------------------------------
   Library grid (Figma 109:284)
   -------------------------------------------------------------------------- */
.library {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 20px var(--page-gutter) 40px;
}

/* Sort filters */
.sort-filters[hidden] { display: none; }
.sort-filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
}

.time-filter {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray-500);
  white-space: nowrap;
  transition: color 0.2s ease;
}
.tab::after {
  content: "";
  width: 100%;
  height: 1px;
  background: var(--gray-500);
  opacity: 0;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}
.tab:hover { color: var(--gray-50); }
.tab.is-active { color: var(--gray-50); }
.tab.is-active::after { background: var(--gray-50); opacity: 1; }

/* Pricing dropdown */
.dropdown { position: relative; }
.dropdown__trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--glass-5);
  border-radius: var(--radius);
  background: transparent;
  font-size: 14px;
  line-height: 1.5;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.dropdown__trigger:hover,
.dropdown.is-open .dropdown__trigger {
  background: var(--glass-5);
  border-color: var(--glass-10);
}
.dropdown__label { color: var(--gray-500); }
.dropdown__value { color: var(--gray-50); }
.dropdown__icon {
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease;
}
.dropdown.is-open .dropdown__icon { transform: rotate(180deg); }

.dropdown__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  min-width: 100%;
  margin: 0;
  padding: 4px;
  list-style: none;
  border-radius: var(--radius);
  background: rgba(16, 16, 16, 0.96);
  box-shadow: inset 0 0 0 1px var(--glass-10), 0 12px 32px rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.dropdown.is-open .dropdown__menu { opacity: 1; visibility: visible; transform: none; }
.dropdown__menu button {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray-500);
  text-align: left;
}
.dropdown__menu button:hover,
.dropdown__menu button:focus-visible { background: var(--glass-5); color: var(--gray-50); outline: none; }
.dropdown__menu button[aria-checked="true"] { color: var(--gray-50); }

/* Grid */
/* Grid of cards (Home, Backgrounds, Account favorites): 3 per row like the Figma (Wrapper 109:285,
   40px gaps); 2 below 1040px, 1 below 640px. */
.library__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}

.library__empty {
  margin: 0;
  padding: 80px 0;
  font-size: 16px;
  color: var(--gray-500);
  text-align: center;
}
.library__empty[hidden] { display: none; }
/* Error state (js/library.js): the message and a "Try again" button */
.library__empty[role="alert"] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.library__retry:disabled { cursor: default; opacity: 0.6; }

/* "Coming soon" block of the Backgrounds page (no background published yet) */
.library__soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 80px 24px;
  border: 1px solid var(--glass-10);
  border-radius: 30px;
  background: var(--glass-5);
  text-align: center;
}
.library__soon[hidden] { display: none; }
.library__soon-badge {
  padding: 6px 10px;
  border: 1px solid var(--glass-10);
  border-radius: 17px;
  background: var(--glass-5);
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray-50);
}
.library__soon-title {
  margin: 0;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.64px;
  color: var(--gray-50);
  text-wrap: balance;
}
.library__soon-text {
  max-width: 440px;
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--gray-400);
  text-wrap: balance;
}

/* Library card (Figma 159:320: Default / Hover / Favorite / Backgrounds). No outer box any more: the
   video preview is the card (12px corners), with the "New" tag and the favorite button over it, and
   the name, category and plan below. */
.library-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.library-card__frame {
  position: relative;
  border-radius: 12px;
  background: var(--gray-900); /* shows only while the preview loads, or when there is none */
}

/* Hover: bright white beams running around the card in a loop (no blue stroke, per the client) */
@property --beam-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.library-card__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 1px;
  border-radius: inherit;
  /* Only the bright white beams; the frame keeps its regular subtle border underneath */
  background: conic-gradient(
    from var(--beam-angle),
    transparent 0deg,
    transparent 40deg,
    rgba(229, 238, 244, 0.35) 70deg,
    #f4f9fc 95deg,
    rgba(229, 238, 244, 0.35) 120deg,
    transparent 150deg,
    transparent 220deg,
    rgba(229, 238, 244, 0.3) 250deg,
    #e5eef4 275deg,
    rgba(229, 238, 244, 0.3) 300deg,
    transparent 330deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  animation: card-beam 3.2s linear infinite paused;
}
.library-card:hover .library-card__frame::before,
.library-card:focus-within .library-card__frame::before {
  opacity: 1;
  animation-play-state: running;
}
@keyframes card-beam {
  to { --beam-angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .library-card__frame::before { animation: none; display: none; }
  .library-card:hover .library-card__frame,
  .library-card:focus-within .library-card__frame { box-shadow: inset 0 0 0 1px rgba(229, 238, 244, 0.45); }
}

/* Over the preview, 16px from its edges: "New" tag on the left, favorite button on the right */
.library-card__top {
  position: absolute;
  inset: 16px 16px auto;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  pointer-events: none;
}
.library-card__top .favorite-button { pointer-events: auto; } /* the tag and pill let clicks open the card */

/* "New" toggle of the card (Figma 159:291) */
.library-card__tag {
  padding: 2px 10px;
  border-radius: 16px;
  background: var(--gray-900);
  box-shadow: inset 0 0 0 1px var(--glass-10);
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  color: #fff;
  white-space: nowrap;
}

/* Favorite on a card: the same box as the "Novo" tag (24px tall, dark fill, 1px line), heart first and then the
   number, always visible so it reads over any preview. The whole box is the button. */
.library-card .favorite-button {
  flex-direction: row-reverse;
  gap: 6px;
  height: 24px;
  padding: 0 10px 0 8px;
  border-radius: 16px;
  background: var(--gray-900);
  box-shadow: inset 0 0 0 1px var(--glass-10);
  transition: background-color 0.2s ease;
}
.library-card .favorite-button:hover { background: #1f1f1f; }
.library-card .favorite-button__count {
  font-size: 12px;
  line-height: 20px;
  color: #fff;
  pointer-events: none;
}
.library-card .favorite-button__btn {
  position: static;
  width: 14px;
  height: 14px;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.library-card .favorite-button__btn:hover { background: none; }
.library-card .favorite-button__btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.library-card .favorite-button__btn img { width: 14px; height: 14px; }

.tag-new {
  padding: 6px 10px;
  border-radius: 16px;
  background: var(--glass-5);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
}

/* Favorite button (Figma 159:302): Default = favorited, Variant2 = not favorited */
.favorite-button {
  position: relative;
  z-index: 2; /* above the card's stretched link */
  display: flex;
  align-items: center;
  gap: 6px;
}
.favorite-button__count {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--gray-500);
  font-variant-numeric: tabular-nums;
}
.favorite-button.is-on .favorite-button__count { color: var(--gray-50); }
.favorite-button__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 10px;
  border: 0;
  border-radius: 10px;
  background: var(--glass-5);
  box-shadow: inset 0 0 0 1px transparent;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.favorite-button.is-on .favorite-button__btn { box-shadow: inset 0 0 0 1px var(--glass-10); }
.favorite-button__btn:hover { background: var(--glass-10); }
.favorite-button__btn img { width: 16px; height: 16px; }
.favorite-button__btn:active img { transform: scale(0.88); }

.library-card__preview {
  position: relative;
  width: 100%;
  aspect-ratio: 479.33 / 253; /* Video Preview: 253px tall on a 479px card */
  overflow: hidden;
  border-radius: 12px;
}
/* Many previews were recorded in a browser window with its scrollbar visible, so a grey bar runs down the right edge
   of the picture (and of the poster, which is its first frame). Measured on the 960px card videos: the bar is exactly
   the last 8 pixels = 0.83% of the width, the same in every video. The video is made 1.5% wider than its box and
   anchored to the left, so the box (overflow: hidden) cuts off the rightmost 1.5% of the picture (14px of 960): the
   bar goes with a little margin (the margin keeps the scaling blur from leaving a faint edge). Videos recorded
   without a scrollbar just lose 1.5% on the right edge, which nobody sees. */
.library-card__preview .preview-video {
  position: absolute;
  inset: 0 auto 0 0;
  width: 101.5%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  border-radius: 12px;
}

/* Main text (Figma 159:231): name and category on the left, plan mark on the right, centred */
.library-card__text {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.library-card__names {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.library-card__title {
  min-width: 0;
  margin: 0;
  font-size: 24px;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.24px;
  color: var(--gray-50);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Stretched link: the whole card opens the item page */
.library-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 12px;
}
.library-card__title a:focus-visible { outline: none; }
.library-card__title a:focus-visible::after { outline: 2px solid var(--gray-50); outline-offset: 4px; }

.library-card__category {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray-500);
}

/* Glass button: the "Continue with Google" style, now the standard dark button of the site
   (login, plan buttons, account). Add .btn-glass--full for a full-width button. */
.btn-glass {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 22px;
  border: 1.5px solid var(--glass-10);
  border-radius: 14px;
  background: var(--gray-900);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  color: var(--gray-50);
  white-space: nowrap;
  transition: background-color 0.2s ease;
}
.btn-glass--full { display: flex; width: 100%; }
.btn-glass:hover { background: #1c1c1c; }
.btn-glass img { width: 16px; height: 16px; }

/* "Em breve": tiny tag after a benefit that is not available yet (Pricing and Account, so the card is not misleading) */
.soon-tag {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 7px;
  border: 1px solid var(--glass-10);
  border-radius: 999px;
  background: var(--glass-5);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--gray-400);
  white-space: nowrap;
  vertical-align: 1px;
}

/* Plan pill (Figma 159:268) */
.plan-pill {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--glass-10);
  border-radius: 17px;
  background: var(--glass-5);
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray-50);
  white-space: nowrap;
}
.plan-pill--pro {
  border-color: #0b0b15;
  background: linear-gradient(90deg, #aec5d7 0%, #f7f7f7 49.038%, #aec5d7 100%);
  color: var(--gray-950);
}
.plan-pill--pro img { width: 15px; height: 15px; }

/* Library cards mark a Pro item with the crown alone (no box, so it is not mistaken for the Pro plan). The crown is
   filled with the same white-to-pale-blue gradient the Pro pill used; the soft shadow keeps it readable over light previews.
   The shadow sits on the wrapper because a filter on the masked layer itself would be cut by the mask. */
.plan-crown {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
}
/* On the library card the crown is 26px (Figma Icon "Crown" in Main text) */
.library-card__text .plan-crown { width: 26px; height: 26px; }
.plan-crown::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #aec5d7 0%, #f7f7f7 49.038%, #aec5d7 100%);
  -webkit-mask: url("../assets/icons/crown.svg") center / contain no-repeat;
  mask: url("../assets/icons/crown.svg") center / contain no-repeat;
}

/* --------------------------------------------------------------------------
   Footer (Figma 178:274)
   -------------------------------------------------------------------------- */
/* Lines (Figma 178:721): dashed line on top of the footer (.line-top), the links sit in the 1600px framed
   column with a dot on each corner (on the footer's top line and on the wordmark band's top line), and the
   wordmark band has dashed lines above and below (.line-top .line-bottom). */
.footer {
  background: var(--gray-950);
}

.footer__top { padding-inline: var(--frame-gutter); }
.footer__wrapper {
  --dot-bottom: -2.5px; /* the band's top line is just below this block */
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px 60px;
  padding: 80px var(--frame-pad);
}

.footer__brand {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 16px;
  width: 248px;
  max-width: 100%;
}
.footer__logo { display: block; width: 116px; height: 35.269px; }
.footer__logo img { width: 100%; height: 100%; }
.footer__tagline {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--gray-500);
}
.footer__divider {
  width: 100%;
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--gray-900);
}
.footer__copyright {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray-500);
}
.footer__copyright span { color: var(--gray-50); }

.footer__options {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 40px 60px;
}

.footer-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.footer-column__title {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--gray-500);
  white-space: nowrap;
}

.footer-link,
.social-link {
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray-50);
  white-space: nowrap;
  transition: color 0.2s ease;
}
.footer-link:hover,
.social-link:hover { color: var(--gray-300); }

.social-link {
  display: flex;
  align-items: center;
  gap: 6px;
}
.social-link__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--gray-900);
  transition: background-color 0.2s ease;
}
.social-link:hover .social-link__button { background: var(--gray-800); }
.social-link__button img { width: 14px; height: 14px; }

/* Big "Layer" wordmark over a dot grid. Everything scales with --art-w so the art keeps
   the Figma proportions at any width (1056.8px wordmark in a 269px band at 1440px). */
.footer__art {
  --art-w: 73.389vw;
  position: relative;
  height: calc(var(--art-w) * 0.2545);
  overflow: hidden;
}
.footer__dots {
  position: absolute;
  inset: 0;
  opacity: 0.16;
  background-image: radial-gradient(circle at center, var(--gray-50) 0 1px, transparent 1.5px);
  background-size: 12px 12px;
  background-position: center;
}
/* When js/footer.js runs, the canvas replaces the static CSS dots */
.footer__art.is-live .footer__dots { display: none; }
.footer__grid {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.footer__logo-wrap {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: var(--art-w);
  aspect-ratio: 1056.8 / 438.8;
  transform: translate(-50%, 24.12%);
}
.footer__wordmark {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Liquid light: soft blobs in the wordmark's own gradient colours (#0A0A0A to #253137),
   clipped to the letters by the wordmark itself. No filter touches the mask, so the
   letter outlines stay exactly as designed. */
.footer__liquid {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask: url("../assets/img/layer-wordmark.svg") center / 100% 100% no-repeat;
  mask: url("../assets/img/layer-wordmark.svg") center / 100% 100% no-repeat;
  opacity: 0;
  transition: opacity 0.7s ease;
  pointer-events: none;
}
.footer__art.is-hover .footer__liquid { opacity: 1; }

.footer__blob {
  position: absolute;
  top: 0;
  left: 0;
  width: 30%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(112, 140, 154, 0.95) 0%,
    rgba(72, 94, 105, 0.8) 18%,
    rgba(37, 49, 55, 0.7) 40%,
    rgba(37, 49, 55, 0.25) 62%,
    rgba(37, 49, 55, 0) 78%
  );
  will-change: transform;
}
.footer__blob:nth-child(2) { width: 24%; opacity: 0.85; }
.footer__blob:nth-child(3) { width: 18%; opacity: 0.7; }
.footer__blob:nth-child(4) { width: 13%; opacity: 0.55; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .footer__wrapper { flex-direction: column; }
  .footer__options { justify-content: flex-start; }
}

@media (max-width: 1180px) {
  .search-field__input { width: 110px; }
}

@media (max-width: 1040px) {
  .header__wrapper { grid-template-columns: 1fr auto; }

  .menu-toggle { display: block; }

  .nav-menu {
    position: fixed;
    top: calc(var(--top-offset) - 4px); /* hangs from the header, which sits under the bar */
    left: var(--page-gutter);
    right: var(--page-gutter);
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 8px;
    border-color: var(--glass-10);
    background: rgba(10, 10, 10, 0.92);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  }
  .nav-menu.is-open { opacity: 1; visibility: visible; transform: none; }
  .search-field__input { width: 100%; }
  .nav-item { justify-content: flex-start; }

  .library__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  :root { --page-gutter: 20px; --frame-pad: 20px; }

  .hero { padding-top: 128px; }
  .hero-headline__title { font-size: 44px; letter-spacing: -0.88px; }

  .filters { flex-direction: column; align-items: stretch; }
  .chip--favorites { align-self: flex-start; }

  .library { gap: 28px; }
  .library__grid { gap: 32px 16px; }
  .library__grid .library-card__title { font-size: 22px; letter-spacing: -0.22px; }
}

@media (max-width: 640px) {
  /* Phones: the guide lines move closer to the edge so the content keeps its width */
  :root { --frame-gutter: 12px; --frame-pad: 12px; }
  .library__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

@media (max-width: 768px) {
  .footer__wrapper { padding-top: 56px; padding-bottom: 56px; }
  .footer__options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .footer__art { --art-w: 120vw; }
  .footer-column:last-child { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
  .footer-column { min-width: 0; }
  .profile-card__name { display: none; }
  .profile-card--signed-out .profile-card__name { display: inline; }
  .profile-card { gap: 8px; }
  .profile-card__plan { padding: 4px 8px; }
  .hero-headline__title { font-size: 36px; letter-spacing: -0.72px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* ==========================================================================
   Forms (all pages): quiet fields. A filled field uses Glass 10% (like the filled code
   boxes), never the browser's autofill blue/white, and a correct value gets a small check.
   ========================================================================== */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--gray-50);
  caret-color: var(--gray-50);
  /* Glass 10% (#f7f7f7 at 10%) over #0a0a0a, as an opaque colour: autofill cannot be transparent */
  -webkit-box-shadow: 0 0 0 1000px #222222 inset;
  box-shadow: 0 0 0 1000px #222222 inset;
  transition: background-color 600000s 0s, color 600000s 0s;
}
input:autofill {
  color: var(--gray-50);
  box-shadow: 0 0 0 1000px #222222 inset;
}

.field-wrap {
  position: relative;
  display: block;
}
.field-check {
  position: absolute;
  top: 50%;
  right: 16px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.is-valid > .field-check { opacity: 1; transform: none; }
/* Password fields: the check sits to the left of the show/hide eye */
.field__toggle ~ .field-check { right: 48px; }
.is-valid > input { padding-right: 44px; }
.field__control.is-valid > .field__input { padding-right: 80px; }
@media (prefers-reduced-motion: reduce) {
  .field-check { transition: none; }
}

/* Preview video: it is the preview itself (its poster is the first frame); it plays on demand */
.preview-video { background: var(--gray-900); }

/* --------------------------------------------------------------------------
   Headline entrance (every page): the texts of the page's headline come in with a light blur, once.
   Badge, title and subtitle, one after the other (0.08s apart). Reduced motion: no animation.
   -------------------------------------------------------------------------- */
@keyframes headline-in {
  from { opacity: 0; filter: blur(10px); transform: translateY(10px); }
  to { opacity: 1; filter: blur(0); transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .headline-badge, .not-found__badge, .payment__badge, .legal-hero__updated,
  .headline__title, .backgrounds-headline__title, .not-found__title, .payment__title,
  .legal-hero__title, .auth__title, .auth__caption-title,
  .headline__subtitle, .backgrounds-headline__subtitle, .not-found__text, .payment__text,
  .legal-hero__intro, .auth__sub, .auth__caption-sub,
  .headline .cta-silver, .account-tabs, .not-found__actions {
    animation: headline-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .headline-badge, .not-found__badge, .payment__badge, .legal-hero__updated { animation-delay: 0s; }
  .headline__title, .backgrounds-headline__title, .not-found__title, .payment__title,
  .legal-hero__title, .auth__title, .auth__caption-title { animation-delay: 0.08s; }
  .headline__subtitle, .backgrounds-headline__subtitle, .not-found__text, .payment__text,
  .legal-hero__intro, .auth__sub, .auth__caption-sub { animation-delay: 0.16s; }
  .headline .cta-silver, .account-tabs, .not-found__actions { animation-delay: 0.24s; }
}