/* ==========================================================================
   Future Career Days — fcd.hr
   Design source: Figma "FCD — Web"  desktop 1:2 / mobile 31:6116
   Values below are taken from the Figma file, not eyeballed from a render.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------
   ITC Avant Garde Gothic Pro is served from Adobe Fonts (licence does not
   permit self-hosting). TeX Gyre Adventor is self-hosted as an automatic
   fallback: same Avant Garde lineage, so a CDN failure costs letterform
   fidelity rather than breaking the page. DM Sans is self-hosted as before.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "TeX Gyre Adventor";
  src: url("/fonts/texgyreadventor-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  /* Avant Garde Demi and this face are near metric-identical already
     (avg advance 591.9 vs 591.5, cap 740 vs 739) so no size-adjust is
     needed — but their line boxes differ, so match those and the swap
     from fallback to Adobe costs no layout shift. */
  ascent-override: 103.4%;
  descent-override: 28%;
}

@font-face {
  font-family: "DM Sans";
  src: url("/fonts/dmsans-latin-ext.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "DM Sans";
  src: url("/fonts/dmsans-latin.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
  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;
}

/* --- Tokens --------------------------------------------------------------- */

:root {
  /* Brand — the only variable defined in the Figma file */
  --yellow: #eff400;

  /* Ink / neutrals */
  --ink: #000217;          /* dark section ground, headings on light */
  --ink-card: #161d28;     /* card heading on light ground */
  --slate: #374c6d;        /* body copy on light ground */
  --slate-label: #2a445e;  /* section eyebrow on light ground */
  --mist: #c5cddd;         /* body copy on dark ground */
  --white: #fff;

  /* Surfaces */
  --card-light-bg: rgba(55, 76, 109, 0.03);
  --card-light-border: rgba(55, 76, 109, 0.1);
  --rule: rgba(255, 255, 255, 0.12);

  /* The dark sections are #000217 with a soft blue lift towards the bottom */
  --dark-ground: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 42, 76, 0.2) 100%),
                 linear-gradient(90deg, #000217 0%, #000217 100%);

  /* Type */
  --font-display: "itc-avant-garde-gothic-pro", "TeX Gyre Adventor",
                  "Century Gothic", "URW Gothic", sans-serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Type scale — desktop values are the Figma values; they shrink fluidly.
     The lower bound of each clamp is the mobile value from node 31:6116. */
  --fs-h2:    clamp(2rem,    1.17rem + 2.59vw,  3.5rem);   /* 32 → 56 */
  --fs-h2-alt:clamp(1.75rem, 1.17rem + 1.81vw,  2.75rem);  /* 28 → 44 */
  --fs-h3:    clamp(1.25rem, 1.11rem + 0.43vw,  1.5rem);   /* 20 → 24 */
  --fs-stat:  clamp(2.25rem, 1.49rem + 2.37vw,  3.375rem); /* 36 → 54 */
  --fs-lead:  clamp(1rem,    0.93rem + 0.22vw,  1.25rem);  /* 16 → 20 */
  --fs-body:  clamp(1rem,    0.96rem + 0.11vw,  1.125rem); /* 16 → 18 */
  --fs-label: clamp(0.875rem,0.84rem + 0.11vw,  1.125rem); /* 14 → 18 */

  /* Rhythm */
  --gutter: clamp(1.5rem, 0.54rem + 3.0vw, 5rem);  /* 24 → 80 */
  --content: 1280px;

  /* Shape */
  --r-card: 18px;
  --r-pill: 75px;
  --r-section: 48px;
}

/* --- Reset / base --------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;          /* Demi; TeX Gyre Adventor resolves this to Bold */
  line-height: 1.2;
}

p { margin: 0; }

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

a { color: inherit; }

ul { margin: 0; padding: 0; list-style: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Visible only to screen readers */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--gutter);
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--yellow);
  color: var(--ink);
  font-weight: 600;
  border-radius: 0 0 12px 12px;
}
.skip-link:focus { top: 0; }

/* --- Layout primitives ---------------------------------------------------- */

.section {
  position: relative;
  padding-block: clamp(3.5rem, 2.3rem + 3.7vw, 7.5rem);
  overflow: hidden;   /* clips the oversized decorative blobs */
}

.section--dark {
  background: var(--dark-ground);
  color: var(--white);
  border-radius: var(--r-section);
}

.section__inner {
  position: relative;
  z-index: 1;
  max-width: var(--content);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Decorative brand shapes sit behind content and are never announced */
.decor {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

/* --- Type helpers --------------------------------------------------------- */

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--slate-label);
}
.section--dark .eyebrow { color: var(--yellow); }

.h2 { font-size: var(--fs-h2); color: var(--ink); }
.section--dark .h2 { color: var(--white); }

.h2--alt { font-size: var(--fs-h2-alt); }

.lead {
  font-size: var(--fs-lead);
  color: var(--slate);
  text-wrap: pretty;
}
.section--dark .lead { color: var(--mist); }

/* --- Button --------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 44px;
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  border-radius: var(--r-pill);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(239, 244, 0, 0.28);
}

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

/* ==========================================================================
   Sections
   ========================================================================== */

.centered { text-align: center; }
.centered .lead { margin-inline: auto; }

/* --- Shared: icon sizing -------------------------------------------------- */

.pcard__icon, .tile__icon, .panel__icon { width: 30px; height: 30px; }

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

.hero { border-radius: 0 0 var(--r-section) var(--r-section); }

.hero__inner { text-align: center; }

.hero__motif { color: var(--yellow); opacity: 0.55; }
.hero__motif--a { top: -8%;  left: -14%; width: min(64vw, 930px); transform: rotate(180deg); }
.hero__motif--b { bottom: -22%; right: -10%; width: min(52vw, 760px); }

.hero__lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 0.5rem + 3vw, 3.25rem);
  margin-bottom: clamp(2rem, 1.3rem + 2.2vw, 3.25rem);
}

.hero__logo { margin: 0; }
.hero__logo img { width: clamp(220px, 28vw, 409px); height: auto; }

.hero__where {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: clamp(1.5rem, 0.5rem + 3vw, 3.25rem);
  border-left: 1px solid rgba(255, 255, 255, 0.35);
  font-family: var(--font-display);
  font-weight: 600;
  text-align: left;
  text-transform: uppercase;
  line-height: 1.25;
}
.hero__city  { font-size: clamp(1rem, 0.9rem + 0.45vw, 1.5rem); color: var(--white); }
.hero__venue { font-size: clamp(1.1rem, 0.86rem + 0.74vw, 1.75rem); color: var(--white); }
.hero__date  { font-size: clamp(1.1rem, 0.86rem + 0.74vw, 1.75rem); color: var(--yellow); }

.hero__lead { max-width: 42rem; margin-inline: auto; color: var(--white); }

.hero__cta { margin-top: clamp(1.75rem, 1.2rem + 1.7vw, 2.75rem); }

.hero__stats { margin-top: clamp(3rem, 1.6rem + 4.4vw, 7rem); text-align: left; }

.hero__stats-title {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--white);
  margin-bottom: 1.5rem;
}

.stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.25rem, 0.3rem + 3vw, 2.9rem);
}

.stat {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* The hairline rules between stats, drawn rather than shipped as images */
.stat + .stat::before {
  content: "";
  align-self: center;
  width: 1px;
  height: 50px;
  margin-right: clamp(1.25rem, 0.3rem + 3vw, 2.9rem);
  background: rgba(255, 255, 255, 0.35);
}

.stat__n {
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  font-weight: 600;
  line-height: 1;
  color: var(--yellow);
}

.stat__l { font-size: 1rem; line-height: 1.3; color: var(--white); }

/* --- 02 O događaju -------------------------------------------------------- */

.about__inner { display: grid; gap: clamp(2.5rem, 1rem + 4.5vw, 4rem); }

.about__intro .lead { margin-top: 1.5rem; max-width: 34rem; }
.about__intro .h2 { margin-top: 0.5rem; }

.about__cards { display: grid; gap: 1.5rem; }

/* Dark card floating on the light ground */
.pcard {
  padding: 28px 32px;
  background: var(--dark-ground);
  color: var(--white);
  border-radius: var(--r-card);
}
.pcard__icon { color: var(--yellow); margin-bottom: 14px; }
.pcard__t { font-size: var(--fs-h3); }
.pcard__d { margin-top: 10px; color: var(--mist); }

/* --- 03 / 07 Checklist ---------------------------------------------------- */

.students__inner > .checklist { margin-block: clamp(2.5rem, 1.5rem + 3vw, 4.25rem); }

.checklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: clamp(1.75rem, 1.2rem + 1.7vw, 2.4rem) clamp(2rem, 0.5rem + 4.5vw, 5.5rem);
}

.checklist li {
  position: relative;
  padding-left: 60px;
}

/* The check mark is one shape repeated 10 times — drawn in CSS, not shipped */
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 26px;
  height: 26px;
  background: var(--yellow);
  -webkit-mask: var(--check) center / contain no-repeat;
          mask: var(--check) center / contain no-repeat;
}

:root {
  --check: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>');
}

.checklist h3 { font-size: var(--fs-h3); color: var(--white); }
.checklist p { margin-top: 8px; color: var(--mist); }

.community__lead, .vision__lead, .program__lead, .participants__lead { max-width: 56rem; margin-top: 1.5rem; }
.community .checklist, .vision .panel { margin-top: clamp(2.5rem, 1.5rem + 3vw, 3.5rem); }

/* --- 04 / 08 Tiles -------------------------------------------------------- */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1.25rem;
  margin-top: clamp(2rem, 1.3rem + 2.2vw, 3.25rem);
}

.tiles--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); }

.tile {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 18px;
  align-items: start;
  padding: 26px 28px;
  background: var(--card-light-bg);
  border: 1px solid var(--card-light-border);
  border-radius: var(--r-card);
}

.tile__icon { grid-row: 1 / span 2; color: var(--slate-label); margin-top: 2px; }
.tile__t { font-size: var(--fs-h3); color: var(--ink-card); }
.tile__d { color: var(--slate); }

/* --- 06 / 09 Panel -------------------------------------------------------- */

.panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1.75rem, 1rem + 2.2vw, 2.75rem);
  padding: clamp(2rem, 1.3rem + 2.2vw, 3rem);
  background: var(--dark-ground);
  border-radius: var(--r-card);
  margin-top: clamp(2rem, 1.3rem + 2.2vw, 3.25rem);
}

.section--dark .panel { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); }

.panel li { position: relative; }
.panel li + li { border-left: 1px solid var(--rule); padding-left: clamp(1.75rem, 1rem + 2.2vw, 2.75rem); }
.panel__icon { color: var(--yellow); margin-bottom: 14px; }
.panel h3 { font-size: var(--fs-h3); color: var(--white); }
.panel p { margin-top: 10px; color: var(--mist); }

/* --- 05 Prvi izbor -------------------------------------------------------- */

.break { overflow: hidden; }
/* .break is display:grid at >=900px, and auto inline margins on a grid item
   turn off stretch — the box collapses to fit-content and centres. Width
   100% keeps it on the same page grid as every other section. */
.break__inner { width: 100%; }
.break__h { max-width: 46rem; }
.break__h b { color: var(--yellow); font-weight: inherit; }
.break .lead { margin-top: 1.75rem; max-width: 24rem; }
.break .eyebrow { margin-bottom: 0.75rem; }

.break__ladder {
  right: clamp(0px, 2vw, 108px);
  bottom: 0;
  width: clamp(240px, 33vw, 475px);
  height: auto;
}

/* --- 10 FAQ --------------------------------------------------------------- */

.faq__list { margin-top: clamp(2rem, 1.3rem + 2.2vw, 3rem); display: grid; gap: 10px; }

.qa {
  background: var(--card-light-bg);
  border: 1px solid var(--card-light-border);
  border-radius: var(--r-card);
}

.qa__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 30px clamp(1.5rem, 1rem + 1.5vw, 2rem);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--ink-card);
  cursor: pointer;
  list-style: none;
}
.qa__q::-webkit-details-marker { display: none; }

/* Plus that becomes a minus — two bars, one of which collapses when open */
.qa__mark {
  position: relative;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
}
.qa__mark::before, .qa__mark::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  margin-top: -1px;
  background: var(--slate);
  transition: transform 0.22s ease;
}
.qa__mark::after { transform: rotate(90deg); }
.qa[open] .qa__mark::after { transform: rotate(0deg); }

.qa__a {
  padding: 0 clamp(1.5rem, 1rem + 1.5vw, 2rem) 30px;
  color: var(--slate);
  max-width: 60rem;
}
.qa__a p + p { margin-top: 0.85rem; }
.qa__a a { text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* --- 11 Prva godina ------------------------------------------------------- */

.firstyear__lead { max-width: 52rem; margin-block: 1.5rem 2.25rem; }

/* --- 12 Uskoro ------------------------------------------------------------ */

.soon__box {
  display: grid;
  place-items: center;
  min-height: clamp(200px, 12vw + 140px, 290px);
  padding: 2rem;
  background: #f1f2f4;
  border-radius: var(--r-card);
  color: #8b93a1;
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}

/* --- 13 Podnožje ---------------------------------------------------------- */

.foot { border-radius: var(--r-section) var(--r-section) 0 0; }
.foot__motif { left: -10%; bottom: -30%; width: min(42vw, 560px); color: var(--white); opacity: 0.35; }

.foot__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 3vw, 3.5rem) clamp(2rem, 0.5rem + 4.5vw, 5rem);
}

.foot__logo { width: clamp(180px, 20vw, 232px); height: auto; }

.foot__where {
  margin-top: 1.25rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  line-height: 1.5;
}
.foot__where span  { display: block; color: var(--white); }
.foot__where time  { display: block; color: var(--yellow); }

.foot__tag  { margin-top: 1.5rem; color: var(--white); }
.foot__mail { margin-top: 0.75rem; color: var(--mist); }

.foot__org { color: var(--mist); border-left: 1px solid var(--rule); padding-left: clamp(1.5rem, 0.5rem + 3vw, 3.5rem); }
.foot__org p + p { margin-top: 1rem; }
.foot__org b { color: var(--white); font-weight: 400; }

.foot__end {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap-reverse;
  padding-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}

.foot__copy { color: var(--mist); font-size: 0.9rem; }

.social { display: flex; gap: 1rem; }
.social a { display: grid; place-items: center; width: 36px; height: 36px; color: var(--mist); transition: color 0.18s ease; }
.social a:hover { color: var(--yellow); }
.social svg { width: 22px; height: 22px; }

/* ==========================================================================
   Ambient light on the dark sections
   Figma draws these as oversized blurred ellipses; as gradients they stay
   resolution-independent and cost nothing to ship.
   ========================================================================== */

.section--dark { isolation: isolate; }

.students::before, .community::before, .vision::before, .firstyear::before {
  content: "";
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle,
    rgba(206, 214, 0, 0.55) 0%,
    rgba(120, 128, 0, 0.26) 38%,
    rgba(0, 2, 23, 0) 70%);
}

.students::before  { inset: auto -14% -34% auto; width: 58%; aspect-ratio: 1; }
.community::before { inset: -18% auto auto -16%; width: 52%; aspect-ratio: 1; }
.vision::before    { inset: -22% -12% auto auto; width: 50%; aspect-ratio: 1; }
.firstyear::before { inset: -40% -8% auto auto; width: 46%; aspect-ratio: 1; }

/* ==========================================================================
   Desktop layout — the design is drawn at 1440; below 900 it becomes the
   mobile stack from node 31:6116.
   ========================================================================== */

@media (min-width: 900px) {

  /* About: text left, three cards stepping diagonally down the right.
     Column spans come from the card x-positions in the Figma frame. */
  .about__inner {
    grid-template-columns: repeat(12, 1fr);
    align-items: start;
  }
  .about__intro { grid-column: 1 / span 5; grid-row: 1; padding-top: 7.5rem; }
  .about__cards { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: repeat(12, 1fr); gap: 54px 0; }
  .about__cards > :nth-child(1) { grid-column: 6 / span 6; }
  .about__cards > :nth-child(2) { grid-column: 7 / span 6; }
  .about__cards > :nth-child(3) { grid-column: 5 / span 6; }

  .stats { flex-wrap: nowrap; }

  .faq__list { max-width: none; }
}

@media (max-width: 899px) {
  /* Panels stop being columns and become a divided stack */
  .panel li + li {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--rule);
    padding-top: clamp(1.5rem, 1rem + 1.5vw, 2rem);
  }

  .foot__inner { grid-template-columns: 1fr; }
  .foot__org { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 1.75rem; }

  .hero__lockup { flex-direction: column; gap: 1.25rem; }
  .hero__where {
    padding-left: 0;
    border-left: 0;
    text-align: center;
    align-items: center;
  }

  .break__ladder { position: relative; right: auto; margin: 2.5rem auto 0; display: block; }
  .break__inner { max-width: none; }
  .break .lead { max-width: none; }
}

@media (max-width: 639px) {
  .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem 1rem; }
  .stat { flex-direction: column; align-items: flex-start; gap: 6px; }
  .stat + .stat::before { display: none; }
  .checklist li { padding-left: 44px; }
  .section--dark { border-radius: 28px; }
  .hero { border-radius: 0 0 28px 28px; }
  .foot { border-radius: 28px 28px 0 0; }
}

/* ==========================================================================
   Corrections against the Figma render
   ========================================================================== */

/* Croatian carons (Š, Č, Ž) sit high; headings need room above or they
   collide with the eyebrow on the line before. */
.eyebrow { display: block; margin-bottom: 0.7rem; }
.h2 { padding-top: 0.08em; }

/* Hero is a full 1080 band in the design — it was collapsing to its content */
.hero { display: grid; align-items: center; min-height: min(100svh, 1080px); }
.hero__inner { width: 100%; padding-block: clamp(3rem, 1rem + 6vw, 5rem); }

/* Stat labels carry explicit <br>; stop them wrapping a second time */
.stat__l { white-space: nowrap; }

/* Decorative motifs: Figma places one large shape centre-right bleeding out
   of the band, with a mirrored one off the top-left corner. */
.hero__motif { opacity: 1; }
.hero__motif--a { top: auto; bottom: -46%; left: 34%; width: min(65vw, 930px); transform: none; }
.hero__motif--b { top: -30%; right: auto; left: -18%; bottom: auto; width: min(46vw, 660px); transform: rotate(180deg); }

.foot__motif { left: auto; right: -6%; bottom: -46%; width: min(34vw, 460px); opacity: 0.5; }

/* About: the intro needs six columns or the heading breaks to three lines */
@media (min-width: 900px) {
  .about__intro { grid-column: 1 / span 6; padding-top: 8.5rem; }
  .about__cards > :nth-child(1) { grid-column: 6 / span 7; }
  .about__cards > :nth-child(2) { grid-column: 7 / span 6; }
  .about__cards > :nth-child(3) { grid-column: 5 / span 6; }
}

/* Break: heading is 44px here, not the 56px used elsewhere, and the ladder
   bleeds off the bottom edge of the band. */
.break { padding-block: clamp(3.5rem, 2.3rem + 3.7vw, 5rem); }
.break__h { font-size: var(--fs-h2-alt); max-width: 40rem; }

@media (min-width: 900px) {
  .break { display: grid; align-items: center; min-height: 464px; }
  .break__ladder { bottom: 0; right: clamp(24px, 7vw, 108px); }
}

/* Participants tiles: three up, titles on one line */
.participants .tiles { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }

/* Footer needs the full 492px band and breathing room at the bottom */
.foot { padding-block: clamp(3rem, 2rem + 3vw, 4.5rem); }
.foot__end { border-top: 1px solid var(--rule); margin-top: clamp(1rem, 0.5rem + 1.5vw, 2rem); }

/* The flex gap already separates the stats; the rule must not add its own
   margin on top of it or the row overflows 1280. */
.stat + .stat::before { margin-right: 0; }
.stats { gap: clamp(1rem, 0.2rem + 2.4vw, 2.2rem); }

/* Motif placement taken from node 37:78 (x 489.8, y 485.7, 929.8 square
   inside the 1440x1080 hero band), plus a mirrored one off the top-left. */
.hero__motif--a { left: 34%; top: 45%; bottom: auto; width: 64.6%; transform: none; }
.hero__motif--b { left: -16%; top: -8%; bottom: auto; right: auto; width: 48%; transform: rotate(180deg); }

/* Figma's hero motif reads as the 180° rotation of the raw path */
.hero__motif--a { transform: rotate(180deg); }
.hero__motif--b { transform: none; left: -20%; top: -12%; }

/* Hero vertical rhythm: the lockup group sits centred in the band and the
   stats row is pinned near the bottom, as in the 1080 frame. */
.hero { align-items: stretch; }
.hero__inner { display: flex; flex-direction: column; }
.hero__lockup { margin-top: auto; }
.hero__stats { margin-top: auto; padding-top: clamp(2rem, 1rem + 3vw, 4rem); }

/* The rule between the logo and the venue block runs the full lockup height */
.hero__lockup { align-items: stretch; }
.hero__where { justify-content: center; }

/* All three venue lines are set at the same size in Figma (cap height 24.4px
   on each outlined Z); ZAGREB is simply a lighter weight. */
.hero__city, .hero__venue, .hero__date { font-size: clamp(1.05rem, 0.72rem + 1.03vw, 2rem); }
.hero__city { font-weight: 400; }
.hero__where { gap: 0; line-height: 1.18; }

/* ==========================================================================
   Mobile corrections (node 31:6116)
   ========================================================================== */

@media (max-width: 899px) {
  /* The hero is a compact 786 band on mobile, not a full viewport with the
     stats pushed to the floor. Drop the desktop auto-margins. */
  .hero { min-height: 0; display: block; }
  .hero__inner { display: block; }
  .hero__lockup { margin-top: 0; }
  .hero__stats { margin-top: clamp(2.5rem, 1.5rem + 4vw, 4rem); padding-top: 0; }

  /* Figma puts the heading first and the illustration under it; the image is
     first in source order so it reads correctly to screen readers either way. */
  .break__inner { display: flex; flex-direction: column; }
  .break__ladder { order: 2; margin-top: 2rem; }
  .break { display: flex; flex-direction: column; }
  .break > .break__ladder { order: 2; }

  /* Decor is quieter on a small screen */
  .hero__motif--a { width: 92%; left: 26%; top: 52%; }
  .hero__motif--b { width: 76%; left: -34%; top: -4%; }
  .foot__motif { width: 60%; }
}

/* Figma sets this placeholder at #8b93a1, which is 2.76:1 on its own box —
   below WCAG AA. Darkened along the same hue to the first passing value. */
.soon__box { color: #686e79; }

/* The ambient glow was lifting the ground under body copy to 3.0:1 in the
   Community and Partnership bands (needs 4.5:1 at 18px). Peak alpha pulled
   down until the worst ground under any text clears AA; the glow still reads
   at full strength in the margins where no text sits. */
.students::before, .community::before, .vision::before, .firstyear::before {
  background: radial-gradient(circle,
    rgba(206, 214, 0, 0.38) 0%,
    rgba(120, 128, 0, 0.18) 38%,
    rgba(0, 2, 23, 0) 70%);
}

/* About cards: Figma puts the icon in its own column beside the title
   (icon x=655, title x=708, body x=709 — body aligns under the title),
   and the card is 541 wide inside the 1280 content column. */
.pcard {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 16px;
  align-items: center;
}
.pcard__icon { margin-bottom: 0; }
.pcard__t { margin: 0; }
.pcard__d { grid-column: 2; margin-top: 0; }

@media (min-width: 900px) {
  .about__cards > :nth-child(1) { grid-column: 6 / span 5; }
  .about__cards > :nth-child(2) { grid-column: 8 / span 5; }
  .about__cards > :nth-child(3) { grid-column: 5 / span 5; }
}

/* The content column is 1280 wide sitting inside 80px gutters — a 1440 box,
   not a 1280 box that then gets padded (which was squeezing it to 1176 and
   shifting its left edge from x=80 to x=132).
   Gutter is re-fitted so it lands exactly on 24 at 390 and 80 at 1440. */
:root { --gutter: clamp(1.5rem, 0.2rem + 5.333vw, 5rem); }
.section__inner { max-width: calc(var(--content) + 10rem); }

/* Figma tracks the display face slightly tight; at matched cap height the
   headings measured 7.7% wider than the board without this. */
h1, h2, h3, .h2, .eyebrow { letter-spacing: -0.03em; }
.eyebrow { letter-spacing: 0.04em; }

/* ==========================================================================
   Type scale refit
   The original clamps were hand-guessed and three of them never reached
   their design value at 1440 — body was landing at 16.9px instead of 18,
   labels at 15 instead of 18, the lead at 18 instead of 20. Each formula
   below is solved so it hits the mobile value at 390 and the Figma desktop
   value at 1440 exactly.
   ========================================================================== */

:root {
  --fs-lead:  clamp(1rem,     0.9071rem + 0.381vw,  1.25rem);   /* 16 -> 20 */
  --fs-body:  clamp(1rem,     0.9536rem + 0.190vw,  1.125rem);  /* 16 -> 18 */
  --fs-label: clamp(0.875rem, 0.7821rem + 0.381vw,  1.125rem);  /* 14 -> 18 */
}

/* Venue block: Figma outlines it at cap height 24.4px, and ITC Avant Garde
   Demi has a 0.74em cap, so 33px at 1440. Mobile measures ~20px. */
.hero__city, .hero__venue, .hero__date {
  font-size: clamp(1.25rem, 0.948rem + 1.238vw, 2.0625rem);
}

/* The rule beside the logo runs 195px in Figma against a 116px text block —
   it overshoots the type by ~39px top and bottom. */
.hero__where { padding-block: clamp(0.75rem, 0.2rem + 1.4vw, 2.44rem); }

/* Figma gives every section 120px of top and bottom padding at 1440 (eyebrow
   at y=120 in Participants, Universities and Program; ~56px on mobile).
   The original clamp topped out at 90px, which is most of the gap between
   this page's height and the board's. */
.section { padding-block: clamp(3.5rem, 2.014rem + 6.095vw, 7.5rem); }

/* Divider overshoot: 39px at 1440, not the 23px the old curve reached */
.hero__where { padding-block: clamp(0.75rem, 0.123rem + 2.571vw, 2.4375rem); }

/* ==========================================================================
   Decoration rebuilt from the Figma nodes
   ========================================================================== */

/* --- Hero lockup: one supplied SVG carrying mark, wordmark, rule and venue -- */

.hero__lockup {
  display: block;
  margin: auto auto 0;
  padding: 0;
  text-align: center;
}
.hero__lockup img {
  width: min(62.92%, 906px);   /* 906.05 of 1440 in the Figma hero */
  height: auto;
  margin-inline: auto;
}
.hero__where, .hero__logo { display: none; }

.foot__logo { width: min(100%, 379px); height: auto; }   /* 378.86 in Figma */

/* --- Hero motifs ---------------------------------------------------------
   Two shapes: a double step (735.985 square) and a single step (367.92).
   left/top/width are each node's Figma box over the 1440x1080 hero.
   -------------------------------------------------------------------------- */

.motif {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  aspect-ratio: 1;
}
.motif--h1 { background-image: url("/img/motif-step2.svg"); left: 34.02%; top: 44.97%; width: 64.57%; }
.motif--h2 { background-image: url("/img/motif-step1.svg"); left: -6.62%; top: 36.65%; width: 33.50%; }
.motif--h3 { background-image: url("/img/motif-step2.svg"); left: 78.00%; top: 37.31%; width: 65.31%; }

/* The hand-rolled CSS glows these replace */
.students::before, .community::before, .vision::before, .firstyear::before { content: none; }

/* ==========================================================================
   Feedback fixes
   ========================================================================== */

/* 4 — About: the third card was crowding the body copy. Figma leaves 40px
   between the end of the lead and the top of that card, and keeps the lead
   to a 515px measure so the two columns do not collide. */
.about__intro .lead { max-width: 32rem; }
@media (min-width: 900px) {
  .about__cards { gap: 54px 0; }
  .about__cards > :nth-child(3) { margin-top: 2.5rem; }
  .about__intro { padding-bottom: 2.5rem; }
}

/* 5 — "Prije nego zaključaš": the inner box was capped at 56rem and pinned
   left, so above 1440 it drifted off the page grid that every other section
   sits on. It now uses the standard centred box; only the copy is capped. */
.break__inner > * { max-width: 46rem; }
.break .lead { max-width: 24rem; }

/* 6 — FAQ opens and closes smoothly instead of snapping */
:root { interpolate-size: allow-keywords; }

.qa::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 0.34s cubic-bezier(0.22, 0.61, 0.36, 1),
              content-visibility 0.34s allow-discrete;
}
.qa[open]::details-content { block-size: auto; }

.qa { transition: background-color 0.2s ease, border-color 0.2s ease; }
.qa:hover { background: rgba(55, 76, 109, 0.055); }
.qa__mark::before, .qa__mark::after { transition: transform 0.34s cubic-bezier(0.22,0.61,0.36,1); }

/* 8 — closing line reuses the v1 shimmer and blinking dots */
.soon__t {
  background: linear-gradient(100deg,
    #686e79 0%, #686e79 36%, #b9a400 50%, #686e79 64%, #686e79 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: shimmer 4.2s linear infinite;
}
@keyframes shimmer { from { background-position: 130% 0 } to { background-position: -130% 0 } }

.dots { margin-left: 0.15em; display: inline-block; -webkit-text-fill-color: currentColor; color: #686e79; }
.dots i { font-style: normal; opacity: 0.22; animation: blink 1.5s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: 0.22s; }
.dots i:nth-child(3) { animation-delay: 0.44s; }
@keyframes blink { 0%,58%,100% { opacity: 0.22 } 26% { opacity: 1; color: #8a7a00 } }

/* 9 — the v1 aurora, carried over as a slow-moving layer behind the hero */
.aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.orb { position: absolute; border-radius: 50%; mix-blend-mode: screen; will-change: transform, opacity; }

.orb--y1 { left: 58%;  top: -56%; width: 88%;  height: 100%;
  background: radial-gradient(closest-side, rgba(239,244,0,.30) 0%, rgba(239,244,0,0) 70%);
  animation: orbA 14s ease-in-out infinite; }
.orb--y2 { left: -62%; top: 28%;  width: 110%; height: 146%;
  background: radial-gradient(closest-side, rgba(239,244,0,.34) 0%, rgba(239,244,0,0) 72%);
  animation: orbB 19s ease-in-out infinite; }
.orb--y3 { left: -18%; top: 62%;  width: 66%;  height: 80%;
  background: radial-gradient(closest-side, rgba(239,244,0,.22) 0%, rgba(239,244,0,0) 70%);
  animation: orbC 17s ease-in-out infinite; }
.orb--b1 { left: 52%;  top: 40%;  width: 92%;  height: 104%;
  background: radial-gradient(closest-side, rgba(10,58,110,.42) 0%, rgba(10,58,110,0) 72%);
  animation: orbE 12s ease-in-out infinite; }

@keyframes orbA { 0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.8}
  30%{transform:translate3d(-19%,19%,0) scale(1.34);opacity:1}
  62%{transform:translate3d(-4%,26%,0) scale(.92);opacity:.66} }
@keyframes orbB { 0%,100%{transform:translate3d(0,0,0) scale(1.06);opacity:1}
  35%{transform:translate3d(19%,-17%,0) scale(.8);opacity:.7}
  70%{transform:translate3d(4%,-22%,0) scale(1.2);opacity:.9} }
@keyframes orbC { 0%,100%{transform:translate3d(0,0,0) scale(1) rotate(0deg);opacity:.45}
  33%{transform:translate3d(28%,-22%,0) scale(1.42) rotate(120deg);opacity:1}
  66%{transform:translate3d(-10%,-6%,0) scale(.78) rotate(240deg);opacity:.6} }
@keyframes orbE { 0%,100%{transform:translate3d(0,0,0) scale(.9);opacity:.5}
  40%{transform:translate3d(-24%,16%,0) scale(1.34);opacity:1}
  75%{transform:translate3d(12%,20%,0) scale(1.04);opacity:.68} }

@media (prefers-reduced-motion: reduce) {
  .orb, .soon__t, .dots i { animation: none !important; transform: none !important; }
  .soon__t { -webkit-text-fill-color: #686e79; color: #686e79; }
}

/* margin-inline:auto on a column flex item makes it shrink-to-fit, which
   collapsed the lockup. Keep it full width and only push it down. */
.hero__lockup { width: 100%; margin: auto 0 0; }
/* 906.05 of the 1280 content column, not of the full 1440 band */
.hero__lockup img { width: min(70.8%, 906px); }

/* 9 — the v1 aurora is off unless the hero opts in, because it lifts the
   whole band brighter than the Figma design. Add class "hero--aurora" to
   the <header> to switch it on. */
.aurora { display: none; }
.hero--aurora .aurora { display: block; }

/* Footer motif now uses the exported step shape like the hero ones */
.foot__motif {
  background-image: url("/img/motif-step2.svg");
  left: auto; right: -6%; bottom: -46%; width: min(34vw, 460px);
  opacity: 1;
}

/* The Figma gradient circles are much brighter than the glows they replaced,
   and body copy over them lands around 2:1. Rather than dim the artwork, do
   what the v1 page did and lay a scrim between the decoration and the text:
   the glow keeps its full strength out at the edges, the copy sits on a
   ground dark enough to read. */
.section--dark::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(92% 74% at 50% 50%,
    rgba(0, 2, 23, 0.46) 0%,
    rgba(0, 2, 23, 0.34) 50%,
    rgba(0, 2, 23, 0.14) 74%,
    rgba(0, 2, 23, 0) 94%);
}

/* The supplied lockup is the wide one-line lockup; below 900 it would be
   unreadable, so narrow screens get the stacked mark plus live venue text,
   which is also how the Figma mobile board sets it. */
.lk--stack { display: none; }

@media (max-width: 899px) {
  .lk--wide  { display: none; }
  .lk--stack { display: block; }
  .hero__lockup img { width: min(84%, 320px); }
  .hero__where { display: flex; }
  .foot__where { display: block; }
  .foot__logo.lk--stack { width: min(62%, 232px); }
}
@media (min-width: 900px) {
  .hero__where, .foot__where { display: none; }
}

/* ==========================================================================
   Gradient circles — the artwork exported from Figma (gradient-circle.svg),
   one file reused for every instance. Each is a square scaled uniformly,
   rotated about its own origin and placed on its Figma coordinates. The
   exported file is the unrotated base: its baked gradient sits at 42deg,
   which is node 37:212, so every other instance is that node's rotation.
   ========================================================================== */

.blob {
  aspect-ratio: 1;
  background: url("/img/gradient-circle.svg") center / 100% 100% no-repeat;
  transform-origin: 0 0;
}

.blob--students-a   { left:  -15.210%; top:   42.070%; width:  60.160%; transform: rotate(0.0deg); }
.blob--students-b   { left:  110.670%; top:   70.451%; width:  60.150%; transform: rotate(-165.0deg); }
.blob--break        { left:   -6.720%; top:  -17.239%; width:  60.150%; transform: rotate(12.28deg); }
.blob--community-a  { left:   53.538%; top:  151.641%; width:  60.160%; transform: rotate(-89.37deg); }
.blob--community-b  { left:  -24.385%; top:  -24.690%; width:  63.031%; transform: rotate(84.37deg); }
.blob--vision       { left:  117.400%; top:   77.150%; width:  61.490%; transform: rotate(168.5deg); }
.blob--firstyear    { left:   12.624%; top:  143.267%; width:  60.150%; transform: rotate(-76.58deg); }

/* Narrow sections are far taller than they are wide, so the scrim's radial
   never reaches the top and bottom of the text column. Stretch it there. */
@media (max-width: 899px) {
  .section--dark::after {
    background: radial-gradient(150% 92% at 50% 50%,
      rgba(0, 2, 23, 0.72) 0%,
      rgba(0, 2, 23, 0.62) 46%,
      rgba(0, 2, 23, 0.34) 74%,
      rgba(0, 2, 23, 0) 98%);
  }
}

/* ==========================================================================
   Round two of feedback
   ========================================================================== */

/* Overscroll at either end shows the page canvas, which was white. The page
   opens and closes on a dark band, so paint the canvas in the brand ink and
   let <body> keep painting white behind the light sections. */
html { background: var(--ink); }

/* The hero now carries the v1 moving gradient instead of the step shapes */
.aurora { display: block; }
.hero .motif { display: none; }

/* The section scrim was painting over the career-ladder artwork and dulling
   it — the ladder is illustration, not background, so it belongs above the
   scrim. No text overlaps it at any width. */
.break__ladder { z-index: 1; }

/* The aurora orbs are sized as a percentage of the hero box. On a narrow,
   very tall hero that turns them into off-canvas slivers, so the glow all
   but vanished. Give them circular, width-based geometry below 900 so the
   band reads the same as it does on desktop. */
@media (max-width: 899px) {
  .orb { height: auto; aspect-ratio: 1; }
  .orb--y1 { left:  28%; top:  -8%; width: 115%; }
  .orb--y2 { left: -58%; top:  26%; width: 125%; }
  .orb--y3 { left:  -6%; top:  64%; width:  90%; }
  .orb--b1 { left:  36%; top:  44%; width: 115%; }
}

/* The scrim exists to keep copy legible over the gradient circles. The hero
   has none — its only decoration is the soft aurora — so the scrim there was
   just flattening the glow, most visibly on mobile where it is stretched. */
.hero::after { background: none; }

/* On mobile the venue block sits between the lockup and the lead, and only
   its 12px bottom padding separated the date from "Događaj…". The Figma
   mobile board leaves 33px there; this goes a little wider again. */
@media (max-width: 899px) {
  .hero__lead { margin-top: 2.5rem; }
}

/* `.hero__lockup { margin: auto 0 0 }` above is a shorthand, so it zeroed the
   margin-bottom the base rule set — leaving only 16px between the mark and
   ZAGREB on mobile, where Figma has 39px. Put a gap back for narrow screens. */
@media (max-width: 899px) {
  .hero__lockup { margin-bottom: 1.25rem; }
}

/* ZAGREB was the only thing on the page asking for weight 400, and Adobe
   serves one ~47KB woff2 per weight — so that single word doubled the
   webfont payload on mobile, which is the only place it is live text.
   Keep the hierarchy with colour instead of a second weight. */
.hero__city { font-weight: 600; color: var(--mist); }

/* Compact button for use inside a FAQ panel, where the full-size pill would
   dominate the answer it belongs to. */
.btn--sm { padding: 13px 26px; font-size: 1rem; }
.qa__cta { margin-top: 1.25rem; }

/* ==========================================================================
   Partner dialog
   Native <dialog>, so focus trapping, Esc and background inerting come free.
   ========================================================================== */

.pm {
  width: min(92vw, 34rem);
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-card);
  background: var(--dark-ground);
  color: var(--white);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}
.pm::backdrop { background: rgba(0, 2, 23, 0.72); backdrop-filter: blur(3px); }

.pm__box { position: relative; padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); }

.pm__x {
  position: absolute;
  top: 0.75rem; right: 0.9rem;
  width: 40px; height: 40px;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--mist);
  border-radius: 50%;
  transition: color 0.18s ease, background-color 0.18s ease;
}
.pm__x:hover { color: var(--white); background: rgba(255, 255, 255, 0.08); }

.pm__title { font-size: var(--fs-h2-alt); padding-right: 2rem; }
.pm__lead  { margin-top: 0.85rem; color: var(--mist); font-size: var(--fs-body); }

.pm__form  { margin-top: 1.5rem; }
.pm__label {
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-label);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--yellow);
}

.pm__row { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.pm__input {
  flex: 1 1 14rem;
  min-width: 0;
  padding: 16px 18px;
  font: inherit;
  color: var(--white);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
}
.pm__input::placeholder { color: rgba(197, 205, 221, 0.55); }
.pm__input:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.pm__input[aria-invalid="true"] { border-color: #ff8a8a; }

.pm__send { flex: 0 0 auto; padding-inline: 30px; }
.pm__send[disabled] { opacity: 0.6; cursor: progress; }

.pm__err { margin-top: 0.65rem; color: #ff9b9b; font-size: 0.95rem; }
.pm__alt { margin-top: 1.25rem; color: var(--mist); font-size: 0.95rem; }
.pm__alt a { text-underline-offset: 2px; }

@media (prefers-reduced-motion: no-preference) {
  .pm[open] { animation: pm-in 0.22s cubic-bezier(0.22, 0.61, 0.36, 1); }
  @keyframes pm-in { from { opacity: 0; transform: translateY(8px) scale(0.985); } }
}

/* The field label was set at the section-eyebrow size, which is too loud
   for a form inside a dialog. */
.pm__label { font-size: 0.8125rem; letter-spacing: 0.06em; }

/* Copy-to-clipboard beside the address */
.pm__copy {
  display: inline-grid;
  place-items: center;
  width: 28px; height: 28px;
  margin-left: 0.35rem;
  vertical-align: -0.45em;
  color: var(--mist);
  border-radius: 7px;
  transition: color 0.18s ease, background-color 0.18s ease;
}
.pm__copy:hover { color: var(--yellow); background: rgba(255, 255, 255, 0.08); }
.pm__copy svg { grid-area: 1 / 1; width: 16px; height: 16px; }
.pm__copy-ok  { opacity: 0; transform: scale(0.7); transition: opacity 0.16s ease, transform 0.16s ease; }
.pm__copy[data-copied] { color: var(--yellow); }
.pm__copy[data-copied] .pm__copy-i  { opacity: 0; }
.pm__copy[data-copied] .pm__copy-ok { opacity: 1; transform: none; }
.pm__copy-i { transition: opacity 0.16s ease; }