/* ==========================================================================
   Vellox · /despre/ (Despre noi) · page-only layout, scoped to .page-despre, tokens only.
   1. Hero: the two products rise out of the gradient band together: Vellox in the
      browser frame (a phone frame below 760px), StoreIQ on a phone in front of its
      right edge. Frame windows end on clean UI edges (full app 1.633 = y 882, under
      the chart axis; app-crop 1.544, COMPONENTS §8.5).
   2. Two products: white cards on lavender (app icon, name, one line); the whole
      card is the link's hit area.
   3. Three principles: lavender cards with a colour-keyed icon (data sun, email
      violet, approval mint, as the „Aprobat” pill in the app).
   4. Figures on the violet band: the tick grows while the number wipes in
      (despre.js drives --wipe; without it the tick is simply full).
   ========================================================================== */

/* 1. Hero ------------------------------------------------------------------- */
.page-despre .duo { position: relative; }
.page-despre .duo__web { position: relative; z-index: 1; width: 84%; }
.page-despre .duo__web .frame__view { --ar: 1.633; }
.page-despre .duo__phone {
  position: absolute; z-index: 3;
  top: 12%; right: 0;
  width: 24%;
}
.page-despre .duo__phone .phone { width: 100%; }
.page-despre .duo__phone .phone__view { --ar: 600 / 823; }

@media (max-width: 1099.98px) {
  .page-despre .duo__web { width: 86%; }
  .page-despre .duo__web .frame__view { --ar: 1.544; }
  .page-despre .duo__phone { top: 14%; width: 26%; }
  .page-despre .duo__phone .phone { padding: 6px; border-radius: 32px; }
  .page-despre .duo__phone .phone__view { border-radius: 26px; }
}
/* Phones: two phones, Vellox on the left, StoreIQ in front of it on the right */
@media (max-width: 759.98px) {
  .page-despre .duo { width: min(100%, 340px); margin-inline: auto; }
  .page-despre .duo__web { width: auto; }
  .page-despre .duo__web .frame--adapt { --phone-w: 70%; margin-inline: 0 auto; }
  .page-despre .duo__phone { top: 27%; width: 46%; }
  .page-despre .duo__phone .phone { padding: 5px; border-radius: 26px; }
  .page-despre .duo__phone .phone__view { border-radius: 21px; }
}

/* 2. Two products ----------------------------------------------------------- */
.page-despre .products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s5);
}
.page-despre .product {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: clamp(28px, 3vw, 44px);
  border-radius: var(--r-xl);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.page-despre .product__icon {
  display: grid; place-items: center; flex: none;
  width: 64px; height: 64px; overflow: hidden;
  border-radius: 18px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-2);
}
.page-despre .product__icon--full img { width: 100%; height: 100%; }
.page-despre .product__name {
  margin-top: var(--s5);
  font-size: clamp(1.75rem, 1.15rem + 1.5vw, 2.625rem);
  font-weight: 760; font-stretch: var(--wd-h2);
  letter-spacing: -.024em; line-height: 1.08;
}
.page-despre .product__text { max-width: 30em; margin-top: var(--s3); color: var(--slate); }
.page-despre .product__more { margin-top: auto; padding-top: var(--s5); }
.page-despre .product__more .link::after { content: ""; position: absolute; inset: 0; }
.page-despre .product:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--line), var(--sh-3); }
.page-despre .product:has(.link:focus-visible) { box-shadow: inset 0 0 0 1px var(--line), var(--sh-3), 0 0 0 2.5px var(--violet); }
@media (prefers-reduced-motion: reduce) {
  .page-despre .product { transition: none; }
  .page-despre .product:hover { transform: none; }
}
@media (max-width: 759.98px) {
  .page-despre .products { grid-template-columns: minmax(0, 1fr); }
  .page-despre .product__icon { width: 56px; height: 56px; border-radius: 16px; }
}

/* 3. Three principles ------------------------------------------------------- */
.page-despre .principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s5);
}
.page-despre .principle { padding: clamp(26px, 2.6vw, 40px); border-radius: var(--r-xl); }
/* Solid key colours: sun and mint carry ink, violet carries white (all >= 4.5:1) */
.page-despre .principle > .ico {
  width: 56px; height: 56px; margin-bottom: clamp(28px, 3vw, 44px);
  border-radius: 16px;
  box-shadow: 0 10px 22px -12px var(--ico-sh, color-mix(in srgb, var(--deep) 50%, transparent));
}
.page-despre .principle > .ico svg { width: 28px; height: 28px; stroke-width: 2; }
.page-despre .principle > .ico--data { --ico-bg: var(--sun); --ico-fg: var(--ink); --ico-sh: color-mix(in srgb, var(--sun-ink) 55%, transparent); }
.page-despre .principle > .ico--email { --ico-bg: var(--violet); --ico-fg: var(--on-dark); }
.page-despre .principle > .ico--mint { --ico-bg: var(--mint); --ico-fg: var(--ink); --ico-sh: color-mix(in srgb, var(--ok) 50%, transparent); }
.page-despre .principle__title {
  font-size: clamp(1.25rem, 1rem + .75vw, 1.75rem);
  font-weight: 720; font-stretch: var(--wd-h3);
  letter-spacing: -.018em; line-height: 1.16;
}
.page-despre .principle__text { max-width: 26em; margin-top: var(--s3); color: var(--slate); }
@media (min-width: 900px) {
  /* two lines, bottom-aligned, so a one-line title hugs its sentence and the sentences line up */
  .page-despre .principle__title { display: flex; flex-direction: column; justify-content: flex-end; min-height: 2.32em; }
}
@media (max-width: 899.98px) {
  .page-despre .principles { grid-template-columns: minmax(0, 1fr); }
  .page-despre .principle > .ico { margin-bottom: var(--s5); }
}

/* 4. Figures on the violet band --------------------------------------------- */
.page-despre .figure::before { width: calc(44px * var(--wipe, 1)); }