/* ==========================================================================
   Platforma (/platforma/) · page-only styles · system "Violet in motion"
   Shared components (phero, chips, tabs, frames, crops, lifts, phone row, tags,
   violet band) come from site.css; see docs/site-v3/COMPONENTS.md. Everything
   here is scoped to .page-platforma and uses the shared tokens.
    0. Channel tones of the modules
    1. Hero: two cards of the overview lifted straight off their places
    2. Module explorer: head, index, viewer (one frame on a channel plate), swap,
       tablets and phones, no-JS
    3. Phones on the violet band (depth that follows the swipe, platforma.js)
    4. Integrations
   ========================================================================== */


/* 0. Channel tones: the site's colour key (Email violet · SMS & WhatsApp coral ·
   Agenți AI pink · Analiză & date sun). Each module carries the tone of its page. */
.page-platforma .ex--email { --tone: var(--violet); --tone-ink: var(--violet-700); --tint: var(--violet-tint); }
.page-platforma .ex--sms   { --tone: var(--coral);  --tone-ink: var(--coral-ink);  --tint: var(--coral-tint); }
.page-platforma .ex--ai    { --tone: var(--pink);   --tone-ink: var(--pink-ink);   --tint: var(--pink-tint); }
.page-platforma .ex--data  { --tone: var(--sun);    --tone-ink: var(--sun-ink);    --tint: var(--sun-tint); }


/* 1. Hero ---------------------------------------------------------------------- */
/* The overview window per width; both bottom edges land in a text-free band */
.page-platforma .pf-hero__view { --ar: 1.66; }                                    /* 760–1099: app-crop (the cut through the mix legend sits under its lift) */
@media (min-width: 1100px) { .page-platforma .pf-hero__view { --ar: 1.722; } }   /* full app, with the module menu */

/* The lifts sit on their own cards in the screen (template-matched: KPI at 278,171 and the
   channel mix at 1050,503 in the 1440 px capture; 30,107 and 802,439 in the 1192 px crop),
   slightly larger so the card below never shows. margin-top in % reads the stage's width,
   so they track the screen at any size. Hidden on phones (.lift--wide). */
.page-platforma .pf-lifts { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.page-platforma .pf-lift { --ly: var(--bar-h); }
.page-platforma .pf-lift--kpi { --lx: .93%; --lw: 25.92%; margin-top: 8.09%; }        /* 1.14 × the card */
.page-platforma .pf-lift--mix { --lx: 65.77%; --lw: 33.22%; margin-top: 35.02%; }      /* 1.1 × the card */
@media (min-width: 1100px) {
  .page-platforma .pf-lift--kpi { --lx: 17.99%; --lw: 21.45%; margin-top: 11.14%; }
  .page-platforma .pf-lift--mix { --lx: 71.67%; --lw: 27.5%; margin-top: 33.43%; }
}
/* The channel mix hangs below the screen: keep the caption clear of it */
@media (min-width: 760px) { .page-platforma .phero__cap { max-width: min(52em, 62%); } }


/* 2. Module explorer ---------------------------------------------------------- */
.page-platforma .explorer__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s5) var(--s7);
}
.page-platforma .explorer__chips { justify-content: flex-end; }

/* Index on the left, the viewer on the right. --pf-ar is the one window ratio of every
   screen; --pf-head the copy row's height, so the frame never moves between modules. */
.page-platforma .explorer {
  --pf-ar: 1.6;
  --pf-head: 168px;
  --pf-plate: 22px;
  display: grid;
  grid-template-columns: minmax(0, 15.5rem) minmax(0, 1fr);
  align-items: start;
  gap: var(--s5) clamp(32px, 3.4vw, 60px);
  margin-top: clamp(32px, 3vw, 48px);
}

/* Index: grouped by pillar; every module with the dot of its channel */
.page-platforma .explorer__list { gap: 2px; margin-inline: -6px; padding: 6px; scroll-padding-inline: 6px; }
.page-platforma .explorer__group {
  display: block;
  padding: 0 12px 6px;
  color: var(--slate);
  font-size: .8125rem;
  font-weight: 650;
  font-stretch: var(--wd-ui);
  line-height: 1.3;
  letter-spacing: .01em;
}
.page-platforma .explorer__group ~ .explorer__group { margin-top: 14px; }
.page-platforma .explorer__list .ruler-tab {
  --tab-dot: var(--tone);
  padding: 8px 12px;
  border-radius: 12px;
  color: var(--ink-2);
  scroll-margin-block: var(--s6);
}
.page-platforma .explorer__list .ruler-tab__label { padding-left: 20px; font-size: 1rem; font-weight: 580; line-height: 1.3; }
.page-platforma .explorer__list .ruler-tab__label::before { top: .4em; width: 9px; height: 9px; box-shadow: inset 0 0 0 2px var(--tone); }
.page-platforma .explorer__list .ruler-tab:hover { background: rgb(255 255 255 / .72); color: var(--ink); }
.page-platforma .explorer__list .ruler-tab[aria-selected="true"] {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 0 0 1px rgb(22 18 31 / .05), 0 12px 26px -14px rgb(42 27 110 / .42);
}

/* Viewer: the module's name, sentence and points over its real screen */
.page-platforma .explorer__viewer, .page-platforma .explorer__panels { min-width: 0; }
.page-platforma .explorer__info {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 15rem);
  align-items: start;
  gap: var(--s4) clamp(24px, 3vw, 48px);
  min-height: var(--pf-head);
}
.page-platforma .explorer__name {
  font-size: clamp(1.625rem, 1.05rem + 1vw, 2.125rem);
  font-weight: 740;
  font-stretch: 110%;
  letter-spacing: -.024em;
  line-height: 1.1;
}
.page-platforma .explorer__text { max-width: 34em; margin-top: 10px; color: var(--ink-2); line-height: 1.5; }
.page-platforma .explorer__extra { max-width: 40em; margin-top: 8px; color: var(--slate); font-size: .9375rem; line-height: 1.5; }
.page-platforma .explorer__extra strong { color: var(--ink); font-weight: 680; }
.page-platforma .explorer__links { display: flex; flex-wrap: wrap; gap: 2px 22px; margin-top: 12px; font-size: .9375rem; }
.page-platforma .explorer__points > li { padding-block: 9px; font-size: .9375rem; font-weight: 560; line-height: 1.4; }
.page-platforma .explorer__points > li::before { top: 8px; }

/* The screen: the same frame for every module, on a plate in the module's colour. On wide
   screens its width follows the viewport height, so the whole viewer fits under the header. */
.page-platforma .explorer__figure {
  --fw: 100%;
  position: relative;
  isolation: isolate;
  width: var(--fw);
  margin-top: var(--s5);
}
.page-platforma .explorer__figure::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--r-lg);
  background: var(--tone);
  transform: translate(var(--pf-plate), var(--pf-plate));
}
.page-platforma .explorer__figure .crop { --ar: var(--pf-ar); }
.page-platforma .explorer__figure--narrow { width: calc(var(--fw) * .6767 / var(--pf-ar)); margin-inline: auto; }   /* Product Studio: the portrait generator panel, same height, centred */
@media (min-width: 1100px) and (max-width: 1279.98px) { .page-platforma .explorer { --pf-head: 190px; } }   /* narrower copy column */
@media (min-width: 1100px) {
  .page-platforma .explorer__viewer { position: sticky; top: calc(var(--header-h) + 24px); }
  .page-platforma .explorer__figure { --fw: clamp(560px, (100vh - var(--header-h) - var(--pf-head) - 128px) * var(--pf-ar), 100%); }
}

/* The swap. The new module is laid over the old one: its screen fades in over the old frame
   (platforma.js holds the old panel with .is-leaving, so the frame never blinks), its plate
   slides out from under it and the copy settles. Instant with reduced motion. */
.page-platforma .explorer__panels > .tab-panel.is-active { z-index: 1; }
.page-platforma .explorer__panels > .tab-panel.is-leaving { content-visibility: visible; visibility: visible; opacity: 1; transition: none; }
.page-platforma .explorer__panels > .tab-panel.is-leaving.is-fading { opacity: 0; transition: opacity .25s ease; }
.page-platforma .explorer__panels > .tab-panel:not(.is-active) .explorer__info { opacity: 0; }
@keyframes pf-copy-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pf-plate-out { from { transform: none; } to { transform: translate(var(--pf-plate), var(--pf-plate)); } }
@keyframes pf-settle { from { transform: scale(1.03); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.rm) .page-platforma .explorer.is-interacted .explorer__panels > .tab-panel.is-active { transition: opacity .38s var(--ease-out); }
  html.js:not(.rm) .page-platforma .explorer.is-interacted .is-active .explorer__info { animation: pf-copy-in .5s var(--ease-out) .04s both; }
  html.js:not(.rm) .page-platforma .explorer.is-interacted .is-active .explorer__points { animation: pf-copy-in .5s var(--ease-out) .1s both; }
  html.js:not(.rm) .page-platforma .explorer.is-interacted .is-active .explorer__figure::before { animation: pf-plate-out .65s var(--ease-out) .08s both; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 760px) {
  html.js:not(.rm) .page-platforma .explorer.is-interacted .is-active .crop { transform-origin: 50% 0; animation: pf-settle .8s var(--ease-out) both; }
}

/* Below 1100px: the index is one row of pills above the full-width viewer */
@media (max-width: 1099.98px) {
  .page-platforma .explorer { grid-template-columns: minmax(0, 1fr); }
  html.js .page-platforma .explorer__panels > .tab-panel:not(.is-active) { display: none; }
  .page-platforma .explorer__list {
    flex-direction: row;
    gap: 8px;
    overflow-x: auto;
    margin: -7px;
    padding: 7px;
    scroll-padding-inline: 7px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .page-platforma .explorer__list::-webkit-scrollbar { display: none; }
  .page-platforma .explorer__list .explorer__group { display: none; }
  .page-platforma .explorer__list .ruler-tab {
    flex: none;
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 999px;
    background: #fff;
    box-shadow: inset 0 0 0 1.5px var(--line-2);
    scroll-snap-align: start;
  }
  .page-platforma .explorer__list .ruler-tab__label { white-space: nowrap; }
  .page-platforma .explorer__list .ruler-tab[aria-selected="true"] { background: var(--tint); box-shadow: inset 0 0 0 1.5px var(--tone-ink); }
  .page-platforma .explorer__info { min-height: 0; }
  .page-platforma .explorer__figure--narrow { width: min(100%, 380px); }
}

@media (max-width: 759.98px) {
  .page-platforma .explorer__head { gap: var(--s4); }
  /* Filters and modules: two swipeable rows that bleed to the screen edges (edge fades from site.js) */
  .page-platforma .explorer__chips,
  .page-platforma .explorer__list {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    width: calc(100% + 2 * var(--gutter));
    margin: -6px calc(-1 * var(--gutter));
    padding: 6px var(--gutter);
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .page-platforma .explorer__chips::-webkit-scrollbar { display: none; }
  .page-platforma .explorer__chips .chip { flex: none; }
  .page-platforma .explorer { margin-top: var(--s5); }
  .page-platforma .explorer__info { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .page-platforma .explorer__figure { margin-top: var(--s5); }
  .page-platforma .explorer__figure::before { display: none; }
  .page-platforma .explorer__figure--narrow { width: min(100%, 300px); margin-inline: auto; }
}

/* No JavaScript: every module with its screen, one under the other (no index, no filters) */
html:not(.js) .page-platforma .explorer__list,
html:not(.js) .page-platforma .explorer__chips { display: none; }
html:not(.js) .page-platforma .explorer { grid-template-columns: minmax(0, 1fr); }
html:not(.js) .page-platforma .explorer__viewer { position: static; }
html:not(.js) .page-platforma .explorer__figure { --fw: 100%; }
html:not(.js) .page-platforma .explorer__panels { row-gap: var(--s9); }
html:not(.js) .page-platforma .explorer__panels > .tab-panel { grid-area: auto; opacity: 1; visibility: visible; content-visibility: visible; }
html:not(.js) .page-platforma .explorer__panels > .tab-panel .explorer__info { opacity: 1; }


/* 3. Phones on the violet band ------------------------------------------------- */
/* Phones and tablets: a swipeable row that snaps each phone to the centre; platforma.js turns
   the phones with the swipe (--ry, --sc). Wide screens: the five phones fit, as a fan. */
.page-platforma .pf-phones .section-head { margin-bottom: clamp(36px, 3.2vw, 56px); }
.page-platforma .pf-phones__row { --pw: 236px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.page-platforma .pf-phones__row::-webkit-scrollbar { display: none; }
.page-platforma .pf-phones__row .phone { --phone-w: var(--pw); }
.page-platforma .pf-phones__item { position: relative; z-index: var(--z, 1); scroll-snap-align: center; }
.page-platforma .pf-phones__item .caption { max-width: var(--pw); margin-inline: auto; text-align: center; text-wrap: balance; }
.page-platforma .pf-phones__item .phone {
  transform: perspective(1100px) translateX(var(--tx, 0)) rotateY(var(--ry, 0deg)) scale(var(--sc, 1));
  transform-origin: 50% 55%;
}
@media (max-width: 1099.98px) {
  .page-platforma .pf-phones__row { padding-inline: calc(50% + var(--gutter) - var(--pw) / 2); scroll-padding-inline: 0; }
  .page-platforma .pf-phones__row[data-fade] { -webkit-mask-image: none; mask-image: none; }
}
@media (min-width: 760px) and (max-width: 1099.98px) { .page-platforma .pf-phones__row { --pw: 248px; } }
@media (min-width: 1100px) {
  .page-platforma .pf-phones__row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 32px);
    overflow: visible;
    margin-inline: 0;
    padding: var(--s2) 0 var(--s4);
  }
  .page-platforma .pf-phones__row .phone { --phone-w: 100%; }
  .page-platforma .pf-phones__item .caption { max-width: 15em; }
  /* The fan opens once (platforma.js sets .is-fan-ready, then .is-fanned); a phone under the
     pointer turns to face the visitor */
  .page-platforma .pf-phones__row.is-fan-ready .phone { transition: transform 1.1s var(--ease-out) var(--delay, 0s); }
  .page-platforma .pf-phones__row.is-fanned .pf-phones__item:hover { z-index: 20; }
  .page-platforma .pf-phones__row.is-fanned .pf-phones__item:hover .phone {
    transform: perspective(1100px) translateY(-10px) scale(1.04);
    transition: transform .45s var(--ease-out);
  }
}


/* 4. Integrations: a quiet list on a lavender card, no logos ---------------------- */
.page-platforma .connect {
  padding: 6px clamp(20px, 2.6vw, 36px);
  border-radius: var(--r-xl);
  background: var(--violet-50);
}
.page-platforma .connect__row {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 5fr);
  align-items: center;
  gap: 12px clamp(20px, 3vw, 40px);
  padding-block: clamp(20px, 2vw, 28px);
}
.page-platforma .connect__row + .connect__row { border-top: 1px solid var(--line-2); }
.page-platforma .connect__title { font-size: 1.1875rem; font-weight: 700; font-stretch: var(--wd-h3); }
.page-platforma .connect__text { color: var(--slate); }
.page-platforma .connect .tag { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
@media (max-width: 759.98px) {
  .page-platforma .connect__row { grid-template-columns: minmax(0, 1fr); }
}