/* ═══════════════════════════════════════════════════════════════════════════
   /en/ — the English home page.  MODERN TECHNICAL.  Prefix: homeen-

   The SAME system as /pt/pv-mda-ht (css/pvmdahtpt.css): the token block below
   is copied from it verbatim — same 32 names, same 32 values — as are the two
   faces, the button, the plate, the hairline rules, the disclosure/register
   rows and the whole motion layer, re-prefixed.

   SELF-CONTAINED. This page no longer loads /styles.css, /sections.css,
   /css/promo-banner.css or /css/community.css — they are shared with 115 other
   pages (94 of them legal pages that must stay pixel-identical) and are not
   touched. Everything this page needs, INCLUDING the promo banner, the site
   header and the footer, lives here. The one shared sheet still linked is
   /css/tcb-form.css, the capture-form skin, whose markup contract is intact.

   A home page keeps its chrome: the banner (it forwards UTM params) and the
   header with the sign-in link both stay, restyled to the system.

   1. Tone steps, not black. Five neutral surfaces from #08090B to #191D22,
      separated by hairlines. No glow, no drop shadows on chrome.
   2. Green is a rule, a tick, a mark and a small mono label — never a fill,
      never a word inside a headline. The ONE flat-green thing on the page is
      the primary button.
   3. ONE grid: 12 columns, 1180px, a single gutter.
   4. Two families. Inter carries the argument; IBM Plex Mono carries the data
      — eyebrows, roles, labels, the footer line. Both are self-hosted from
      /assets/fonts (Inter OFL, IBM Plex Mono OFL 1.1).
   5. Artwork is plated, never dropped in loose — and never dimmed: every tech
      and company mark renders in its own colours, on a neutral plate.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── faces ────────────────────────────────────────────────────────────────── */
@font-face{font-family:Inter;src:url(/assets/fonts/Inter-Regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(/assets/fonts/Inter-Medium.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(/assets/fonts/Inter-SemiBold.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(/assets/fonts/Inter-Bold.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}

@font-face{font-family:'IBM Plex Mono';src:url(/assets/fonts/ibm-plex-mono-latin-400.woff2) format('woff2');font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';src:url(/assets/fonts/ibm-plex-mono-latin-500.woff2) format('woff2');font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';src:url(/assets/fonts/ibm-plex-mono-latin-600.woff2) format('woff2');font-weight:600;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';src:url(/assets/fonts/ibm-plex-mono-latin-ext-400.woff2) format('woff2');font-weight:400;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';src:url(/assets/fonts/ibm-plex-mono-latin-ext-500.woff2) format('woff2');font-weight:500;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';src:url(/assets/fonts/ibm-plex-mono-latin-ext-600.woff2) format('woff2');font-weight:600;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ── tokens ── copied verbatim from css/pvmdahtpt.css (32) ────────────────── */
:root{
  --ink:#08090B;          /* page ground                                   */
  --ink-2:#0B0D10;        /* recessed band                                 */
  --surface:#101317;      /* raised panel                                  */
  --surface-2:#161A1F;    /* nested cell / hover                           */
  --surface-3:#191D22;    /* top layer                                     */
  --rule:rgba(255,255,255,.075);
  --rule-2:rgba(255,255,255,.145);
  --fg:#EEF1F4;
  --fg-2:#A6AEB6;
  --fg-3:#767E86;
  --acc:#3BE39C;          /* fine accent only: rules, ticks, marks, labels  */
  --acc-soft:rgba(59,227,156,.34);

  /* the brand green. ONE job on this page: the primary button. It is never a
     headline word, never a panel, never a field of colour. */
  --brand:#00FF95;
  --brand-hi:#5BFFBC;     /* hover — lighter, never a glow                  */
  --brand-lo:#00DD81;     /* pressed                                        */
  --brand-ink:#04231A;    /* the type that sits on it                       */

  --ease:cubic-bezier(.22,.61,.36,1);

  --sans:Inter,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  --pad:clamp(20px,5vw,48px);
  --gap:clamp(16px,2.2vw,32px);
  --sec:clamp(56px,6.3vw,96px);
  --radius:6px;
}

/* NO-JS FALLBACK ONLY. promo-banner.js measures the rendered bar and
   overwrites scroll-padding-top with the true value — the constant and the
   real height drift as the copy wraps. Do not trust the constant. */
:root{ --promo-h:60px; }
html{ scroll-padding-top:var(--promo-h); }

/* ── base ─────────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
.homeen-page{
  margin:0;background:var(--ink);color:var(--fg-2);
  font-family:var(--sans);font-size:16px;line-height:1.68;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
/* zero specificity: a component's own max-width must win over this floor */
:where(.homeen-page) :where(img,svg){max-width:100%}
.homeen-page p{margin:0}
.homeen-page ul,.homeen-page ol{margin:0;padding:0;list-style:none}
.homeen-page figure{margin:0}
.homeen-page blockquote{margin:0}
.homeen-page h1,.homeen-page h2,.homeen-page h3,.homeen-page h4{margin:0;font-weight:600}
.homeen-page b,.homeen-page strong{font-weight:500;color:var(--fg)}
.homeen-page em{font-style:normal;color:var(--fg)}
.homeen-page a{color:inherit}
.homeen-page button{font:inherit}

:where(a,button,summary,input,select,textarea):focus-visible{
  outline:2px solid var(--acc);outline-offset:3px;border-radius:2px;
}

/* ── the grid ─────────────────────────────────────────────────────────────── */
.homeen-wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:var(--pad)}
.homeen-sec > .homeen-wrap,
.homeen-hero__grid,
.homeen-founder__grid,
.homeen-head2,
.homeen-community__grid,
.homeen-results__head{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);
}
/* Zero-specificity reset so a single-class placement rule below always wins —
   at equal weight the full-span default would silently flatten every
   composition on the page. */
:where(
  .homeen-sec > .homeen-wrap,
  .homeen-hero__grid,
  .homeen-founder__grid,
  .homeen-head2,
  .homeen-community__grid,
  .homeen-results__head
) > *{grid-column:1/-1;min-width:0}

.homeen-sec{padding-block:var(--sec) calc(var(--sec) * .8);border-top:1px solid var(--rule)}
.homeen-sec--tight{padding-block:calc(var(--sec) * .68) calc(var(--sec) * .56)}
.homeen-sec > .homeen-wrap{row-gap:var(--s7)}
.homeen-stack--md{display:grid;grid-template-columns:minmax(0,1fr);row-gap:var(--s4);align-content:start}

[id]{scroll-margin-top:var(--s5)}

/* ── type ─────────────────────────────────────────────────────────────────── */
/* the h1 here is a full sentence, not a three-word product name, so it is set
   one step below the reference display size and keeps the same ratios. */
.homeen-h1{
  font-size:clamp(1.9rem,1.18rem + 2.3vw,2.7rem);
  line-height:1.1;letter-spacing:-.03em;font-weight:700;
  color:#C9D1D8;text-wrap:balance;
}
.homeen-h1 b{color:var(--fg);font-weight:700}
.homeen-h2{
  font-size:clamp(1.45rem,1.12rem + 1.1vw,2rem);
  line-height:1.18;letter-spacing:-.021em;font-weight:600;color:#C9D1D8;
}
.homeen-h2 b{color:var(--fg);font-weight:600}
.homeen-h3{
  font-size:clamp(1.05rem,.98rem + .3vw,1.2rem);
  line-height:1.3;letter-spacing:-.012em;font-weight:600;color:#C9D1D8;
}

.homeen-lede{font-size:clamp(1rem,.95rem + .25vw,1.14rem);line-height:1.62;color:var(--fg-2);max-width:62ch}
.homeen-lede b{color:var(--fg)}

.homeen-eyebrow{
  font-family:var(--mono);font-size:.75rem;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:var(--acc);
}

/* ── buttons ──────────────────────────────────────────────────────────────── */
.homeen-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 24px;border-radius:var(--radius);
  border:1px solid transparent;background:none;cursor:pointer;
  font-size:.8125rem;font-weight:600;letter-spacing:.015em;line-height:1.2;
  text-align:center;text-decoration:none;
  transition:background-color .16s var(--ease),border-color .16s var(--ease),
             color .16s var(--ease),transform .13s var(--ease);
}
/* THE brand button. Flat green, dark ink, no glow, no offset stamp shadow —
   the weight comes from the colour and the type, not from an effect. */
.homeen-cta--primary{
  background:var(--brand);color:var(--brand-ink);border-color:var(--brand);
  font-weight:700;letter-spacing:.055em;padding:0 28px;
}
.homeen-cta--primary:hover{background:var(--brand-hi);border-color:var(--brand-hi)}
.homeen-cta--primary:active{background:var(--brand-lo);border-color:var(--brand-lo)}
.homeen-cta--primary:focus-visible{outline-color:var(--fg)}
.homeen-anim .homeen-cta--primary:hover{transform:translateY(-1px)}
.homeen-anim .homeen-cta--primary:active{transform:translateY(0)}
.homeen-cta--ghost{border-color:var(--rule-2);color:var(--fg);letter-spacing:.05em}
.homeen-cta--ghost:hover{border-color:#5A636B;background:rgba(255,255,255,.05)}
.homeen-cta--ghost:active{background:rgba(255,255,255,.02)}

/* ── plated artwork ───────────────────────────────────────────────────────── */
/* NOTHING here desaturates or dims: no grayscale(), no saturate(), no reduced
   opacity on any mark. Light or white artwork gets a NEUTRAL DARK plate — a
   light chip would erase the white lock-ups (AWS, IBM, Deloitte, Red Hat …). */
.homeen-plate{
  position:relative;overflow:hidden;border-radius:var(--radius);
  border:1px solid var(--rule);background:#050608;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

/* ── the ACDI announcement bar ────────────────────────────────────────────────
   IDENTICAL ON /pt/ AND /en/ — same ground, same steps, same heights, same
   breakpoints; only the words differ. It is the page's one LIVE signal and it
   has to read that way in the first frame, so nothing about it is set in the
   page's quiet grey: a raised ground with an accent wash running off the left
   edge, a green hairline under it instead of the usual white 7.5%, a LIVE chip
   with a pulsing dot, full-strength type, and the system's flat brand button.
   It is announcement, not decoration — no glow, no gradient text, no second
   colour.

   The href, the .promo-banner class and the data- attributes are untouched:
   promo-banner.js forwards every acquisition parameter through this element and
   measures it to set scroll-padding. */
.homeen-banner{
  position:sticky;top:0;z-index:1000;
  display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;
  gap:8px var(--s4);min-height:var(--promo-h);padding:11px var(--pad);
  /* the wash runs the FULL width and lifts again under the button — the two
     ends are where the eye lands, and a tint that dies at 74% left the right
     two-thirds of the bar reading as page ground, which is exactly the
     "faded" the client saw */
  background-color:var(--surface-3);
  background-image:linear-gradient(90deg,
      rgba(59,227,156,.16) 0%,rgba(59,227,156,.055) 46%,rgba(59,227,156,.095) 100%);
  border-bottom:1px solid rgba(59,227,156,.55);
  color:var(--fg);text-decoration:none;
  font-size:.875rem;line-height:1.4;
  transition:background-color .16s var(--ease);
}
.homeen-banner:hover{background-color:#1D2228}
.homeen-banner:focus-visible{outline:2px solid var(--fg);outline-offset:-3px}
/* the chip carries a live dot, so "Live" is a state rather than a label */
.homeen-banner__tag{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;
  padding:3px 10px 3px 8px;border:1px solid rgba(59,227,156,.5);border-radius:3px;
  background:rgba(59,227,156,.18);
  font-family:var(--mono);font-size:.75rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--acc);line-height:1.35;
}
.homeen-banner__tag::before{
  content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--acc);
}
/* armed by the motion controller only — JS-off and reduced-motion both get a
   still dot, and the chip's geometry never changes either way */
.homeen-anim .homeen-banner__tag::before{animation:homeen-live 2.2s var(--ease) infinite}
@keyframes homeen-live{
  0%,100%{box-shadow:0 0 0 0 rgba(59,227,156,.5)}
  70%{box-shadow:0 0 0 5px rgba(59,227,156,0)}
}
/* the argument is carried by weight, not by a second colour */
.homeen-banner__text{min-width:0}
.homeen-banner__text b{color:var(--fg);font-weight:600}
/* THE brand button, and the only field of brand green above the fold. Flat,
   dark ink, no glow — the primary button from the reference sheet, sized for
   the bar. The whole banner is the link, so this takes its states from the
   anchor and the anchor keeps the focus ring. */
.homeen-banner__cta{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;
  min-height:36px;padding:0 16px;border-radius:var(--radius);
  background:var(--brand);color:var(--brand-ink);
  font-family:var(--mono);font-size:.75rem;font-weight:700;
  letter-spacing:.055em;text-transform:uppercase;line-height:1.2;white-space:nowrap;
  transition:background-color .16s var(--ease),transform .13s var(--ease);
}
.homeen-banner:hover .homeen-banner__cta{background:var(--brand-hi)}
.homeen-banner:active .homeen-banner__cta{background:var(--brand-lo)}
.homeen-banner__cta span{transition:transform .16s var(--ease)}
.homeen-anim .homeen-banner:hover .homeen-banner__cta{transform:translateY(-1px)}
.homeen-anim .homeen-banner:active .homeen-banner__cta{transform:translateY(0)}
.homeen-anim .homeen-banner:hover .homeen-banner__cta span{transform:translateX(3px)}

/* ── site header ──────────────────────────────────────────────────────────── */
.homeen-head{border-bottom:1px solid var(--rule);background:var(--ink)}
.homeen-head__inner{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
  padding-block:var(--s5);
}
.homeen-head__logo{display:block;line-height:0}
.homeen-head__logo img{width:132px;height:auto}
.homeen-head__nav{display:flex;align-items:center;gap:var(--s3)}

/* ── hero ─────────────────────────────────────────────────────────────────── */
.homeen-hero{border-top:0;padding-block:clamp(40px,5vw,72px) calc(var(--sec) * .5)}
.homeen-hero__grid{row-gap:var(--s7);align-items:center}
.homeen-hero__copy{grid-column:1/span 6;display:grid;row-gap:var(--s5);align-content:center}
.homeen-hero__art{grid-column:7/-1;aspect-ratio:4/3;display:grid;place-items:center;padding:var(--s5)}
/* the mockup is a cut-out on transparency: it is CONTAINED on the plate, never
   cropped, and never filtered. */
.homeen-hero__art img{display:block;width:100%;height:100%;object-fit:contain}

/* ── the vendor marquee ───────────────────────────────────────────────────── */
.homeen-marq{
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  background:var(--ink-2);padding-block:var(--s5);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.homeen-marq__track{display:flex;width:max-content;gap:var(--s5)}
.homeen-marq:hover .homeen-marq__track{animation-play-state:paused}
.homeen-marq__row{display:flex;align-items:center;gap:var(--s5)}
/* These lock-ups are DRAWN as chips: each SVG already carries its own dark
   plate and rounded edge, so a second plate around them double-frames. The
   cell only sets the measure — the artwork is its own plate, in full colour. */
.homeen-marq__row li{flex:0 0 auto;display:grid;place-items:center;height:52px}
.homeen-marq__row img{display:block;width:auto;height:42px}
.homeen-anim .homeen-marq__track{animation:homeen-marq 46s linear infinite}
@keyframes homeen-marq{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-50% - (var(--s5) / 2)),0,0)}}

/* ── founder quote ────────────────────────────────────────────────────────── */
.homeen-founder__grid{row-gap:var(--s6);align-items:center}
.homeen-founder__photo{grid-column:1/span 5;aspect-ratio:1/1;display:grid;place-items:end center}
.homeen-founder__photo img{display:block;width:100%;height:100%;object-fit:contain;object-position:50% 100%}
.homeen-founder__quote{
  grid-column:7/-1;display:grid;row-gap:var(--s5);align-content:center;
  padding-left:var(--s5);border-left:1px solid var(--acc-soft);max-width:54ch;
}
.homeen-founder__mark img{display:block;width:150px;height:auto}
.homeen-founder__text{
  font-size:clamp(1.02rem,.95rem + .35vw,1.2rem);line-height:1.6;
  color:var(--fg-2);letter-spacing:-.004em;
}
.homeen-founder__text b{color:var(--fg);font-weight:500}

/* ── the two head shapes ──────────────────────────────────────────────────── */
/* A head with prose behind it opens across the grid: the heading holds columns
   1-4, the argument runs in 5-12. A head that only labels a grid stays on one
   line. Those are the only two head shapes on the page. */
.homeen-head2{row-gap:var(--s4);align-items:start}
.homeen-head2 > .homeen-h2{grid-column:1/span 5}
.homeen-head2 > .homeen-lede{grid-column:6/-1}

/* ── the six-cell register ────────────────────────────────────────────────── */
.homeen-grid6{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;
}
.homeen-card{background:var(--ink);display:flex;flex-direction:column}
.homeen-card__media{
  border-bottom:1px solid var(--rule);background:#050608;
  aspect-ratio:382/160;overflow:hidden;
}
.homeen-card__media img{display:block;width:100%;height:100%;object-fit:cover}
.homeen-card__title{
  padding:var(--s5) var(--s5) 0;
  font-size:1rem;font-weight:600;line-height:1.3;letter-spacing:-.012em;color:var(--fg);
}
/* EACH CARD KEEPS ITS OWN COLOUR — the six live values, in the live order, and
   the first three again on the IPT pillars exactly as the source repeats them.
   This is not new colour: every card's artwork is already drawn as a glowing
   line-icon in precisely this hue, and the rebuild greyed the titles off the
   artwork they belong to. It stays a MARK, never a fill. Same call as /pt/. */
.homeen-grid6 > :nth-child(1) .homeen-card__title{color:#00FF95}
.homeen-grid6 > :nth-child(2) .homeen-card__title{color:#00FFE0}
.homeen-grid6 > :nth-child(3) .homeen-card__title{color:#E5C430}
.homeen-grid6 > :nth-child(4) .homeen-card__title{color:#8439FF}
.homeen-grid6 > :nth-child(5) .homeen-card__title{color:#FF8A00}
.homeen-grid6 > :nth-child(6) .homeen-card__title{color:#00EB84}
.homeen-pillars > :nth-child(1) .homeen-pillar__title{color:#00FF95}
.homeen-pillars > :nth-child(2) .homeen-pillar__title{color:#00FFE0}
.homeen-pillars > :nth-child(3) .homeen-pillar__title{color:#E5C430}
.homeen-card__desc{
  padding:10px var(--s5) var(--s5);
  font-size:.875rem;line-height:1.55;color:var(--fg-2);
}

/* ── hiring companies ─────────────────────────────────────────────────────── */
.homeen-hiring > .homeen-wrap{row-gap:var(--s5)}
.homeen-logos{
  margin-top:var(--s5);overflow:hidden;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  background:var(--ink-2);padding-block:var(--s5);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.homeen-logos__track{display:flex;width:max-content;gap:var(--s4)}
.homeen-logos:hover .homeen-logos__track{animation-play-state:paused}
.homeen-logos__row{display:flex;align-items:center;gap:var(--s4)}
/* Light cell. The old note here said dark, because the old marks were a grey
   family drawn for a dark ground. They are official colour lock-ups now —
   Apple, Deloitte, Walt Disney World and Nokia are black wordmarks — so a dark
   chip would erase them. Same #F2F2F2 the v2 pages use. */
.homeen-logos__row li{
  flex:0 0 auto;display:grid;place-items:center;width:152px;height:72px;
  border:1px solid rgba(0,0,0,.08);border-radius:var(--radius);background:#F2F2F2;
  padding:0 var(--s4);
}
.homeen-logos__row img{display:block;width:auto;max-height:44px}
.homeen-anim .homeen-logos__track{animation:homeen-logos 52s linear infinite}
/* The hiring belt now sits directly under the hero, and the two paddings
   stacked to about 200px of empty black between the lede and this heading.
   Tightened here rather than on the hero, which still needs its own breathing
   room where it appears elsewhere. */
.homeen-hiring{padding-top:var(--s5)}
@keyframes homeen-logos{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-50% - (var(--s4) / 2)),0,0)}}

/* ── mission stage ────────────────────────────────────────────────────────── */
/* The screenshot keeps its own plate and the two marks sit BESIDE it, not on
   top: floated over the art they landed on the platform's own quality menu and
   read as a duplicate of it. */
.homeen-stage{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s6);
  padding:var(--s6);border:1px solid var(--rule);border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,0)),var(--surface);
}
.homeen-stage__shot{display:block}
.homeen-stage__shot img{display:block;width:100%;height:auto}
.homeen-stage__marks{
  display:grid;justify-items:center;row-gap:var(--s4);justify-self:end;
}
.homeen-stage__panel{height:150px;width:auto;border-radius:4px}
.homeen-stage__badge{height:30px;width:auto}

/* ── the three IPT pillars ────────────────────────────────────────────────── */
/* 2024_07_H3-copiar.avif — the blue particle-mesh wave — is pinned to the
   BOTTOM of this section at its native 1920x1263, which is where the live page
   puts it. It is the ground the pillars stand on, and the rebuild left this
   section flat black on /en/ while /pt/ had it. */
.homeen-mission{background:url("/assets/2024_07_H3-copiar.avif") bottom center / auto no-repeat}
.homeen-pillars{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;
}
.homeen-pillar{background:var(--ink);display:flex;flex-direction:column}
.homeen-pillar__media{
  border-bottom:1px solid var(--rule);background:#050608;
  aspect-ratio:382/160;overflow:hidden;
}
.homeen-pillar__media img{display:block;width:100%;height:100%;object-fit:cover}
.homeen-pillar__title{
  padding:var(--s5) var(--s5) 0;
  font-size:1rem;font-weight:600;line-height:1.3;letter-spacing:-.012em;color:var(--fg);
}
.homeen-pillar__text{
  padding:10px var(--s5) var(--s5);
  font-size:.875rem;line-height:1.55;color:var(--fg-2);
}

/* ── HIDDEN 2026-08-09 AT JEAN'S REQUEST — programs copy + bootcamp CTA ─────
   Hidden at every breakpoint, NOT deleted: the ask was explicitly temporary.
   Nothing below reveals it. */
.homeen-programs{display:none}

/* ── the free-community capture ───────────────────────────────────────────── */
.homeen-community__grid{row-gap:var(--s6);align-items:start}
.homeen-community__copy{grid-column:1/span 6;display:grid;row-gap:var(--s5);align-content:start}
.homeen-perks{display:grid;font-size:.9375rem;line-height:1.5;color:var(--fg-2);max-width:52ch}
.homeen-perks li{position:relative;padding:11px 0 11px 20px;border-top:1px solid var(--rule)}
.homeen-perks li:first-child{border-top:0}
.homeen-perks li::before{
  content:"";position:absolute;left:0;top:20px;width:9px;height:1px;background:var(--acc);opacity:.62;
}
.homeen-perks li:first-child::before{top:11px}

.homeen-formcard{
  grid-column:8/-1;padding:var(--s6) var(--s5) var(--s5);
  border:1px solid var(--rule);border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,0)),var(--surface);
}
.homeen-formcard__title{font-size:1.0625rem;font-weight:600;letter-spacing:-.012em;color:var(--fg)}
.homeen-formcard__sub{
  margin-top:6px;padding-bottom:var(--s5);margin-bottom:var(--s5);
  border-bottom:1px solid var(--rule);
  font-family:var(--mono);font-size:.75rem;letter-spacing:.03em;color:var(--fg-3);
}
/* The capture form itself is /css/tcb-form.css — untouched, and its markup
   contract (field names, ids, data-attributes, community-form.js and
   phone-input.js) is intact. Only the surround is restyled: the submit is THE
   conversion on this page, so it wears the system's one brand button, and the
   11.5px field labels come up to the 12px floor. Class doubled so this always
   lands after the skin regardless of link order. */
.homeen-form.homeen-form .tcb-label{font-size:12px}
/* the 11px ISO2 chip and the 10px caret in the phone widget come up to the
   same 12px floor — geometry is untouched, only the size floor moves. */
.homeen-form .tel__flag{font-size:12px}
.homeen-form .tel__caret{font-size:12px}
.homeen-form.homeen-form .tcb-cta{
  min-height:52px;border-radius:var(--radius);
  background-color:var(--brand);background-image:none;box-shadow:none;
  color:var(--brand-ink);font-size:.8125rem;font-weight:700;letter-spacing:.055em;
  transition:background-color .16s var(--ease),transform .13s var(--ease);
}
.homeen-form.homeen-form .tcb-cta:hover{background-color:var(--brand-hi);filter:none}
.homeen-form.homeen-form .tcb-cta:active{background-color:var(--brand-lo);transform:none}
.homeen-form.homeen-form .tcb-cta:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.homeen-anim .homeen-form.homeen-form .tcb-cta:hover{transform:translateY(-1px)}
.homeen-anim .homeen-form.homeen-form .tcb-cta:active{transform:translateY(0)}
.homeen-form.homeen-form .tcb-consent{text-align:left;color:var(--fg-3)}
.homeen-form .tcb-input,.homeen-form .tcb-select{
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease);
}

/* ── results ──────────────────────────────────────────────────────────────── */
.homeen-results__head{row-gap:var(--s5);align-items:center}
/* This lock-up is drawn for a LIGHT ground — sixteen of its paths are black,
   so on the page's own ink it disappears. It gets the paper plate the system
   uses for light-ground artwork: full colour, nothing dimmed, nothing recut. */
.homeen-results__logo{
  grid-column:1/span 3;justify-self:start;
  padding:var(--s4) var(--s5);background:#fff;border-radius:var(--radius);
  box-shadow:0 28px 70px -34px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.06);
}
.homeen-results__logo img{display:block;width:100%;max-width:180px;height:auto}
.homeen-results__intro{grid-column:5/-1;display:grid;row-gap:var(--s4)}

.homeen-quotes{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;
}
.homeen-quote{
  background:var(--ink);padding:var(--s5);
  display:flex;flex-direction:column;gap:var(--s4);
}
.homeen-quote__mark img{display:block;width:20px;height:auto}
.homeen-quote__text{
  font-size:.9375rem;line-height:1.6;color:var(--fg-2);
}
.homeen-quote__who{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s3);align-items:center;
  margin-top:auto;padding-top:var(--s4);border-top:1px solid var(--rule);
}
.homeen-quote__avatar{
  width:40px;height:40px;overflow:hidden;border-radius:50%;
  border:1px solid var(--rule);background:var(--surface-2);
}
.homeen-quote__avatar img{display:block;width:100%;height:100%;object-fit:cover}
.homeen-quote__name{font-size:.9375rem;font-weight:600;line-height:1.3;color:var(--fg)}
.homeen-quote__role{
  font-family:var(--mono);font-size:.75rem;letter-spacing:.03em;color:var(--fg-3);
  line-height:1.5;
}

/* ── the technology register ──────────────────────────────────────────────────
   21 marks, in the chip language of /pt/pv-starter/: every mark in ITS OWN
   COLOURS on a neutral plate with a hairline, under a mono uppercase label.
   Most of this artwork is drawn for a dark ground — AWS, ChatGPT, Ansible and
   Anthropic are white-on-transparent — so the plate is dark and the mark is
   left completely untouched: no grayscale, no saturate, no reduced opacity, no
   filter of any kind.
   Seven columns divide 21 exactly. Below that the chip turns on its side, so a
   wide cell still reads dense instead of stranding a 52px plate in the middle
   of it, and the odd last cell takes the whole row rather than leaving a hole
   in the matrix. */
.homeen-pills{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;
  background:var(--ink);
}
.homeen-pill{
  border-top:1px solid var(--rule);border-left:1px solid var(--rule);
  padding:var(--s5) var(--s3);
  display:grid;justify-items:center;align-content:start;row-gap:10px;text-align:center;
  font-family:var(--mono);font-size:.75rem;font-weight:500;line-height:1.4;
  letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3);
  transition:background-color .16s var(--ease),color .16s var(--ease);
}
.homeen-pill:nth-child(-n+7){border-top:0}
.homeen-pill:nth-child(7n+1){border-left:0}
.homeen-pill:hover{background:var(--surface-2);color:var(--fg-2)}
.homeen-pill__plate{
  width:52px;height:52px;display:grid;place-items:center;
  border:1px solid var(--rule);border-radius:8px;background:var(--surface-2);
  transition:border-color .16s var(--ease),background-color .16s var(--ease);
}
.homeen-pill:hover .homeen-pill__plate{border-color:var(--rule-2);background:var(--surface-3)}
.homeen-pill__logo{display:block;width:auto;height:26px;max-width:34px}
.homeen-pill__label{display:block;min-width:0;overflow-wrap:anywhere}

/* ── footer ───────────────────────────────────────────────────────────────── */
.homeen-foot{border-top:1px solid var(--rule);padding-block:var(--s7);background:var(--ink-2)}
.homeen-foot__inner{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s5);justify-content:space-between}
.homeen-foot__logo{width:132px;height:auto}
.homeen-foot__copy{font-family:var(--mono);font-size:.75rem;letter-spacing:.04em;color:var(--fg-3)}
.homeen-foot__top{
  display:inline-flex;align-items:center;gap:9px;min-height:40px;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--fg-3);text-decoration:none;transition:color .16s;
}
.homeen-foot__top:hover{color:var(--fg)}
.homeen-foot__top svg{width:9px;height:11px;fill:currentColor}

/* Narrow: the bar is STICKY, so its height is viewport the visitor never gets
   back. Three wrapped flex lines cost 135px against the 73px it used to be, so
   below 900 it becomes an explicit two-row grid — chip and copy on one line,
   the button under them — and lands at ~90px. Measured at 1440/900/768/430/
   390/360, not assumed. */
@media (max-width:900px){
  .homeen-banner{
    display:grid;grid-template-columns:auto minmax(0,1fr);
    gap:8px var(--s3);padding-block:10px;
    justify-content:start;align-items:center;text-align:left;font-size:.8125rem;
  }
  .homeen-banner__tag{grid-column:1;grid-row:1;padding:2px 8px;letter-spacing:.1em}
  .homeen-banner__text{grid-column:2;grid-row:1;line-height:1.35}
  .homeen-banner__cta{grid-column:1/-1;grid-row:2;justify-self:start;min-height:34px;padding:0 14px}
}
@media (max-width:430px){
  .homeen-banner{font-size:.75rem;gap:7px 10px;padding-block:9px}
}

/* ── ≤1023px: the grid collapses, the compositions stack ──────────────────── */
@media (max-width:1023px){
  .homeen-hero__copy,.homeen-hero__art,
  .homeen-founder__photo,.homeen-founder__quote,
  .homeen-community__copy,.homeen-formcard,
  .homeen-results__logo,.homeen-results__intro,
  .homeen-head2 > .homeen-h2,.homeen-head2 > .homeen-lede{grid-column:1/-1}
  .homeen-founder__photo{aspect-ratio:4/3;max-width:520px}
  .homeen-founder__quote{max-width:none}
  .homeen-results__logo img{max-width:168px}
  .homeen-grid6,.homeen-quotes{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* three cards in a two-column matrix leave a hole that reads as a missing
     cell: the pillars keep three narrow columns, and the odd testimonial takes
     the whole last row. */
  .homeen-pillars{grid-template-columns:repeat(auto-fit,minmax(196px,1fr))}
  .homeen-quotes > .homeen-quote:last-child{grid-column:1/-1}
  /* 21 chips: three across divides exactly, so no cell is ever stranded and no
     label is ever squeezed into a mid-word break. The chip keeps ONE shape. */
  .homeen-pills{grid-template-columns:repeat(3,minmax(0,1fr))}
  .homeen-pill:nth-child(-n+7){border-top:1px solid var(--rule)}
  .homeen-pill:nth-child(7n+1){border-left:1px solid var(--rule)}
  .homeen-pill:nth-child(-n+3){border-top:0}
  .homeen-pill:nth-child(3n+1){border-left:0}
  .homeen-stage{padding:var(--s5);gap:var(--s5)}
  .homeen-stage__panel{height:112px}
  .homeen-stage__badge{height:24px}
}

/* ── ≤767px ───────────────────────────────────────────────────────────────── */
@media (max-width:767px){
  .homeen-sec > .homeen-wrap{row-gap:var(--s6)}
  .homeen-head__inner{padding-block:var(--s4)}
  .homeen-founder__photo{aspect-ratio:1/1;max-width:none}
  .homeen-founder__quote{padding-left:var(--s4)}
  .homeen-grid6,.homeen-pillars,.homeen-quotes{grid-template-columns:minmax(0,1fr)}
  .homeen-quotes > .homeen-quote:last-child{grid-column:auto}
  .homeen-pill{padding:var(--s4) var(--s2);letter-spacing:.04em}
  .homeen-pill__plate{width:46px;height:46px}
  .homeen-stage{grid-template-columns:minmax(0,1fr);padding:var(--s4);row-gap:var(--s5)}
  .homeen-stage__marks{
    grid-auto-flow:column;justify-items:start;justify-self:start;
    align-items:center;column-gap:var(--s5);row-gap:0;
  }
  .homeen-stage__panel{height:96px}
  .homeen-formcard{padding:var(--s5) var(--s4) var(--s4)}
  .homeen-foot__inner{gap:var(--s4)}
  .homeen-marq__row li{height:44px}
  .homeen-marq__row img{height:36px}
  .homeen-logos__row li{width:124px;height:56px}
  /* elementor-hidden-mobile — the footer lockup is hidden below 768 on the
     live site, on both languages. */
  .homeen-foot__logo{display:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   ARTWORK
   Everything below is the pre-redesign page's own artwork, put back: the
   tech-tile wall, the two decorative glows, the founder card and its chevrons,
   and the full-bleed platform screenshot with its two floating marks. Every
   file is one the page already shipped — nothing here is new or substituted.

   The redesign is untouched otherwise: same tokens, same two faces, same
   hairline sections, same one brand button, same motion controller. What the
   redesign got wrong was treating artwork as decoration and dropping it; the
   plates it put in its place turned two bleeding compositions into boxes.

   Re-declared here rather than re-linked: /sections.css carries these rules for
   96 other pages, 94 of them legal pages that must stay pixel-identical, so it
   is neither loaded nor edited. Placed after the layout blocks above and before
   MOTION, so it wins on order and the reduced-motion switch still wins on it.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. the tech-tile wall ────────────────────────────────────────────────── */
/* 1920×742, top-centre, natural size, no repeat — the page's opening texture.
   The section is already viewport-wide, so the layer needs no vw arithmetic to
   bleed. The original cut it off dead straight wherever the artwork ended; on a
   page whose whole structure is hairlines, a stray horizontal seam reads as a
   mistake, so the last eighth dissolves instead. */
/* clip sideways only: the mockup overhangs its column, and the wall is meant to
   keep spilling DOWN past the hero into the sections below it */
.homeen-hero{position:relative;overflow-x:clip}
.homeen-hero::before{
  content:"";position:absolute;left:0;right:0;top:0;height:742px;z-index:0;
  pointer-events:none;
  background:url("/assets/2024_07_H2.avif") top center / auto no-repeat;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 86%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0,#000 86%,transparent 100%);
}
/* on a phone the wall is scaled down rather than centre-cropped: at natural
   size a 390px window lands on two tiles and the pattern stops reading as one */
@media (max-width:767px){
  .homeen-hero::before{background-size:1000px auto;height:387px}
}
.homeen-hero__grid{position:relative;z-index:1}
/* the wall runs on behind the marquee, as it did before: the band keeps its
   tone and its two hairlines, but stops being an opaque lid over the artwork */
.homeen-marq{background:rgba(11,13,16,.62)}

/* the mockup is a cut-out on transparency and the wall is now behind it, so the
   plate has nothing left to do but box it in. It comes off, and the laptop goes
   back to overhanging its column the way it used to. */
.homeen-hero__art.homeen-plate{
  border:0;background:none;box-shadow:none;border-radius:0;overflow:visible;
}
.homeen-hero__art{
  aspect-ratio:auto;padding:0;display:block;
  justify-self:end;width:682px;max-width:none;margin-right:calc(var(--pad) * -1);
}
.homeen-hero__art img{
  display:block;width:682px;max-width:none;height:auto;
  filter:drop-shadow(0 38px 64px rgba(0,0,0,.62));
}
/* once the grid collapses the mockup still runs at its own size and still bleeds
   right; it just has no column left to bleed out of, so it is clamped to the
   rail plus the gutter and the document never grows sideways */
@media (max-width:1023px){
  .homeen-hero__art{justify-self:start;width:auto;max-width:calc(100% + var(--pad));margin-right:0}
  .homeen-hero__art img{width:682px;max-width:100%}
}

/* ── 2. the decorative glows ──────────────────────────────────────────────── */
/* Both are floated free: they occupy no flow space and take no pointer events,
   and each sits behind its section's content. Sideways clip only — the glows
   are meant to spill vertically past their section, which is the whole reason
   they read as light rather than as a shape. */
.homeen-glow{position:absolute;z-index:0;line-height:0;pointer-events:none}
.homeen-glow img{display:block;width:100%;height:auto}
/* the green one breaks over the mockup's base, where it always did — high
   enough that the marquee crosses it rather than capping it */
.homeen-glow--green{width:921px;top:-620px;right:-40px;filter:blur(10px)}
.homeen-glow--blue{width:1779px;top:-300px;left:50%;transform:translateX(-50%)}

.homeen-unique{position:relative;overflow:clip}
/* the matrix sits ON the blue bloom, so its cells are translucent — the live
   cards are rgba(28,28,29,.6) for the same reason */
.homeen-unique .homeen-grid6{background:rgba(255,255,255,.06)}
.homeen-unique .homeen-card{background:rgba(9,11,14,.72)}
.homeen-unique .homeen-card__media{background:rgba(5,6,8,.72)}
.homeen-unique > .homeen-wrap{position:relative;z-index:1}

/* ── 3. the founder quote card ────────────────────────────────────────────── */
/* Not a row of text on the page ground — a 1518px panel that bleeds past the
   viewport, on a green hairline, carrying the chevron artwork drawn for it.
   2024_07_F1.svg is 1518×600 and bakes in its own #141414 ground, so it is both
   the fill and the figure at its natural size. */
.homeen-founder{position:relative;overflow-x:clip}

@media (min-width:1024px){
  .homeen-founder > .homeen-wrap{max-width:none;padding-inline:0}
  .homeen-founder__grid{
    /* 1518 is the artwork's own width. Below that the card keeps a symmetric
       39px bleed on each side rather than letting auto margins collapse it all
       onto one edge — the chevrons are drawn from the centre out. */
    width:min(1518px,calc(100vw + 78px));
    margin-inline:calc((100% - min(1518px,100vw + 78px)) / 2);
    min-height:600px;
    padding:21px clamp(24px,13.9vw,200px) 0;
    align-items:end;
  }
  .homeen-founder__quote{align-self:center}
}

.homeen-founder__grid{
  position:relative;z-index:1;overflow:hidden;
  border:1px solid rgba(104,218,165,.9);border-radius:24px;
  background-color:#141414;
  background-image:url("/assets/2024_07_F1.svg");
  background-position:top center;background-repeat:no-repeat;background-size:auto;
}
/* the photo is a cut-out that stands ON the card floor and is cropped by it —
   plating it turned a figure into a thumbnail. */
.homeen-founder__photo.homeen-plate{
  border:0;background:none;box-shadow:none;border-radius:0;overflow:visible;
}
.homeen-founder__photo{aspect-ratio:auto;align-self:end;place-items:end center}
.homeen-founder__photo img{
  width:464px;max-width:100%;height:auto;object-fit:contain;margin-bottom:-1px;
}
/* the quote already has the card's own edge around it; a second rule inside it
   is one accessory too many */
.homeen-founder__quote{border-left:0;padding-left:0}

@media (max-width:1023px){
  /* the panel stops bleeding and takes the page gutter, exactly as live does —
     never the viewport edge, which would cut its own rounded ring in half */
  .homeen-founder__grid{
    width:auto;max-width:none;min-height:0;
    margin-inline:var(--pad);padding:var(--s6) var(--s5) 0;
    border-radius:20px;background-size:cover;
  }
  /* stacked, the card leads with what it says and closes on the portrait — the
     order the page had before, and the right one on a phone: a full-height face
     ahead of the quote pushes the argument off the first screen */
  .homeen-founder__quote{order:1}
  .homeen-founder__photo{order:2}
  .homeen-founder__photo img{width:100%;max-width:420px}
}
@media (max-width:767px){
  .homeen-founder__grid{padding:var(--s5) var(--s4) 0}
}

/* ── 4. the platform screenshot ───────────────────────────────────────────── */
/* 1906px wide, bled past both edges, with the quality panel and the HD badge
   floating ON it — that is the composition. The redesign shrank the screenshot
   into a padded card and stood the two marks beside it in a column, which is
   why the section reads flat. Offsets are the original's. */
.homeen-mission{overflow-x:clip}
.homeen-stage{
  position:relative;display:block;
  padding:0;border:0;border-radius:0;background:none;
}
.homeen-stage__shot.homeen-plate{
  border:0;background:none;box-shadow:none;border-radius:0;overflow:visible;
}
.homeen-stage__shot{margin-inline:-600px}
.homeen-stage__shot img{width:1906px;max-width:100%;height:auto;margin-inline:auto}
/* the wrapper stops being a box so its two marks can be placed individually
   against the stage; the marks themselves are untouched artwork */
.homeen-stage__marks{display:contents}
.homeen-stage__panel,
.homeen-stage__badge{position:absolute;z-index:2;height:auto}
.homeen-stage__panel{
  top:138px;left:calc(70% + 240px);width:180px;
  border-radius:10px;box-shadow:-16px 6px 32px rgba(0,0,0,.85);
}
/* The replacement montage fills nearly the whole stage — the centre window runs
   from its top edge to 92% of its height — so the badge no longer has the empty
   left margin the previous screenshot gave it. It sits on the one clear band the
   new artwork leaves, along the bottom, still on the reading rail's left edge.
   Measured against the montage at 1440 / 768 / 390, not assumed. */
.homeen-stage__badge{
  top:auto;bottom:4px;left:28px;width:263px;
  box-shadow:0 4px 4px rgba(0,0,0,.25);
}
/* the two marks drift, as they did before — armed only by the motion
   controller, so JS-off and reduced-motion both get them still */
@keyframes homeen-float{0%,100%{transform:translateY(0)}65%{transform:translateY(15px)}}
.homeen-anim .homeen-stage__panel,
.homeen-anim .homeen-stage__badge{animation:homeen-float 3s ease-in-out infinite}

@media (max-width:1023px){
  .homeen-stage__shot{margin-inline:-300px}
  .homeen-stage__panel{top:103px;left:calc(70% + 120px);width:124px}
  .homeen-stage__badge{top:auto;bottom:4px;left:63px;width:158px}
}
@media (max-width:767px){
  .homeen-stage__shot{margin-inline:-226px}
  .homeen-stage__panel{top:57px;left:calc(70% + 91px);width:56px}
  .homeen-stage__badge{top:auto;bottom:3px;left:16px;width:101px}
}

/* ── 5. the paper panel ───────────────────────────────────────────────────── */
/* The testimonials were the one place the page went light: an 1800px painted
   panel bleeding past both edges, cards a shade lighter again, everything on it
   set in ink. The rebuild put them on the page ground with the rest, and that
   single change is most of why the page reads flat — there was no longer a
   brightest point anywhere on it. The panel comes back at the same widths and
   the same two greys, built out of the system's own parts: the 1px matrix, the
   hairline, the mono role line, the plated marks.

   The ink ladder is declared HERE, on the panel, not in :root — the 32-token
   block is the shared contract and stays byte-identical. */
.homeen-results{overflow-x:clip}
.homeen-paper{
  --pink:#14171A;         /* paper ink        */
  --pink-2:#3E464D;       /* paper ink, muted */
  --pink-3:#6B737B;       /* paper ink, faint */
  --prule:rgba(0,0,0,.11);

  display:grid;row-gap:var(--s7);
  width:min(1800px,calc(100vw + 78px));
  margin-inline:calc((100% - min(1800px,100vw + 78px)) / 2);
  padding:clamp(40px,5vw,80px) clamp(24px,6.6vw,120px);
  border-radius:40px;
  background:#DCDCDC;
  color:var(--pink-2);
}
/* the head sits centred on paper, the way it did before: the lock-up over the
   line, not beside it */
.homeen-paper .homeen-results__head{
  display:grid;grid-template-columns:minmax(0,1fr);
  justify-items:center;text-align:center;row-gap:var(--s4);
}
/* it is already on paper — the dark page's white plate has nothing to do here */
.homeen-paper .homeen-results__logo{
  grid-column:auto;justify-self:center;
  padding:0;background:none;box-shadow:none;border-radius:0;
}
.homeen-paper .homeen-results__logo img{max-width:200px}
.homeen-paper .homeen-results__intro{grid-column:auto;justify-items:center}
.homeen-paper .homeen-h2{color:var(--pink)}
.homeen-paper .homeen-h2 b{color:var(--pink)}
.homeen-paper .homeen-lede{color:var(--pink-2);max-width:74ch}

/* the 1px matrix becomes three cards with air between them, as on the original
   panel — a hairline grid drawn on paper reads as a table, not as testimony */
.homeen-paper .homeen-quotes{
  gap:var(--s5);background:none;border:0;border-radius:0;overflow:visible;
}
.homeen-paper .homeen-quote{
  background:#F2F2F2;border-radius:20px;padding:var(--s6) var(--s5);
}
.homeen-paper .homeen-quote__text{color:var(--pink-2)}
.homeen-paper .homeen-quote__who{border-top-color:var(--prule)}
.homeen-paper .homeen-quote__avatar{border-color:var(--prule);background:#E4E4E4}
.homeen-paper .homeen-quote__name{color:var(--pink)}
.homeen-paper .homeen-quote__role{color:var(--pink-3)}
/* the section rule that opens every band would draw itself across the paper */
.homeen-anim .homeen-results.is-ruled::before{opacity:.34}

/* Once the rail is narrow the panel stops bleeding and sits ON it, corners
   showing — the same thing the page did before. A bleed here costs more than it
   buys: the panel's own padding is all that keeps the heading and the cards off
   the screen edge, and past the edge it was cutting them. */
@media (max-width:1023px){
  .homeen-paper{
    width:100%;margin-inline:0;
    padding:var(--s7) var(--s5);border-radius:28px;row-gap:var(--s6);
  }
  .homeen-paper .homeen-quote{padding:var(--s5)}
}
@media (max-width:767px){
  .homeen-paper{padding:var(--s6) var(--s4);border-radius:20px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOTION
   Nothing here is a resting state. The controller adds .homeen-anim to <html>
   and sets [data-rv] on the elements it will move — with JavaScript off, or
   with prefers-reduced-motion, neither exists and the page is simply the page.
   Only transform and opacity are animated, so nothing reflows and cumulative
   layout shift stays at zero.
   ═══════════════════════════════════════════════════════════════════════════ */
.homeen-anim{scroll-behavior:smooth}

/* scroll entrance — 320ms, one direction, once */
.homeen-anim [data-rv]{opacity:0;transform:translate3d(0,12px,0)}
.homeen-anim [data-rv].is-in{
  opacity:1;transform:none;
  transition:opacity .32s var(--ease) var(--rv-d,0ms),transform .32s var(--ease) var(--rv-d,0ms);
}
/* the hero arrives on load, a little shorter and a little tighter */
.homeen-anim [data-rv="hero"]{transform:translate3d(0,10px,0)}
.homeen-anim [data-rv="hero"].is-in{
  transition:opacity .3s var(--ease) var(--rv-d,0ms),transform .3s var(--ease) var(--rv-d,0ms);
}

/* THE signature: the hairline that opens each section draws itself in from the
   left as the section arrives. One gesture, used once per section, in accent —
   it is the page's own rule, not a new decoration. */
.homeen-anim .homeen-sec:not(.homeen-hero){position:relative}
.homeen-anim .homeen-sec:not(.homeen-hero)::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,var(--acc-soft),rgba(59,227,156,0) 58%);
  transform:scaleX(0);transform-origin:0 50%;
}
.homeen-anim .is-ruled::before{transform:scaleX(1);transition:transform .4s var(--ease)}

/* ── OFF. Every reveal resolved, every transition dropped, no smooth scroll. ── */
@media (prefers-reduced-motion:reduce){
  html,.homeen-anim{scroll-behavior:auto !important}
  .homeen-page *,.homeen-page *::before,.homeen-page *::after{
    transition:none !important;animation:none !important;
  }
  [data-rv]{opacity:1 !important;transform:none !important}
  .homeen-anim .homeen-sec::before{transform:scaleX(1) !important}
  .homeen-anim .homeen-cta--primary:hover{transform:none}
  .homeen-anim .homeen-marq__track,
  .homeen-anim .homeen-logos__track{animation:none !important}
}


/* ── Belt items ──────────────────────────────────────────────────────────────
   The belt used to be eleven pre-made 214x42 lockup SVGs; only eleven of those
   exist, so it could never show the full stack. It is now built from the same
   marks as the technology register below it, which covers all 21 — one source
   of truth for the artwork, and the two can no longer drift apart.
   Laid out inline here rather than as register cells: no borders, no grid, just
   mark + label riding the track. */
/* the row rule `.homeen-marq__row li` is more specific, so the belt item
   must match at least as strongly or it inherits display:grid */
.homeen-marq__row li.homeen-pill--belt,
.homeen-marquee__row li.homeen-pill--belt,
.homeen-pill--belt{
  display:flex;align-items:center;gap:var(--s3);
  border:0;background:none;padding:0;height:auto;
  white-space:nowrap;
}
.homeen-pill--belt:hover{background:none}
/* Belt marks sit on a transparent ground — the tile's fill and hairline are
   dropped here and ONLY here, scoped to --belt, because .homeen-pill__plate is
   also used outside the belt and must keep its tile there. */
.homeen-pill--belt .homeen-pill__plate{
  width:42px;height:42px;flex:0 0 42px;border:0;background:none;border-radius:0;
}
.homeen-pill--belt .homeen-pill__logo{height:28px;max-width:34px}
.homeen-pill--belt .homeen-pill__label{
  font-size:.75rem;letter-spacing:.09em;overflow-wrap:normal;
}
@media (max-width:767px){
  .homeen-pill--belt .homeen-pill__plate{width:36px;height:36px;flex:0 0 36px}
  .homeen-pill--belt .homeen-pill__logo{height:19px;max-width:22px}
  .homeen-pill--belt .homeen-pill__label{font-size:.6875rem}
}


/* ── Three-pillar grid: never leave a dead cell ──────────────────────────────
   The block holds exactly THREE items, so `auto-fit` is the wrong tool: it
   packs as many 196px tracks as fit and produced a 2-up at 480-640 (PT) and a
   4-up at 920-1023 (both languages), each leaving an empty cell with the
   section's background showing through it.
   Three items want three states and nothing in between: 1 up to 767, 3 above.
   Declared with the section in the selector so it beats the generic
   `.homeen-cards` / `.homeen-pillars` rules, which is what let auto-fit through on PT
   below 767 in the first place. */
@media (max-width:767px){
  .homeen-mission .homeen-pillars, .homeen-pillars{grid-template-columns:minmax(0,1fr)}
}
@media (min-width:768px){
  .homeen-mission .homeen-pillars, .homeen-pillars{grid-template-columns:repeat(3,minmax(0,1fr))}
}