/* Presentation-only layer aligned with the approved landing-page target. */
#demonstration {
  background:
    url("yloria-site-demo-screen-by-screen.png?v=20260727-demo-image2") center center / cover no-repeat,
    #020b1d;
}
#ressources {
  background:
    url("yloria-site-resources-premium.png?v=20260727-resources2") center center / cover no-repeat,
    #020b1d;
}
#ressources::before {
  background:
    linear-gradient(90deg, rgba(3, 13, 30, .96) 0%, rgba(3, 13, 30, .72) 40%, rgba(3, 13, 30, .18) 78%),
    linear-gradient(180deg, rgba(3, 13, 30, .06) 20%, rgba(3, 13, 30, .76) 72%, rgba(3, 13, 30, .96) 100%);
}
#tarifs {
  background:
    url("yloria-site-pricing-aerial.png?v=20260727-pricing-aerial1") center center / cover no-repeat,
    #020b1d;
}
#origine {
  background:
    url("../images/yloria-login-premium.webp?v=20260727-origin-contemplative1") center center / cover no-repeat,
    #020b1d;
}

@media (min-width: 761px) {
  .site-header {
    min-height: 74px;
    padding: 8px clamp(54px, 3.2vw, 64px);
  }
  .site-header .brand img { width: 49px; height: 49px; }
  .site-header .brand strong { font-size: 0; }
  .site-header nav { gap: clamp(28px, 3.1vw, 54px); }
  .site-header nav a { font-size: 14px; }
  .landing-site { gap: 0; padding-top: 0; }

  .landing-screen {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    align-content: start;
    gap: 0;
    min-height: 100vh;
    padding: 99px 54px 18px;
    background: #020b1d;
  }
  .landing-screen::before {
    background: #020b1d url("../images/yloria-landing-laptop-interface-v4.png") right top / 96% auto no-repeat;
    filter: saturate(1.05) contrast(1.02);
  }
  .landing-screen::after {
    background:
      radial-gradient(ellipse at 76% 39%, rgba(155,242,255,.12) 0%, rgba(100,220,235,.055) 24%, transparent 43%),
      linear-gradient(90deg, rgba(2,11,29,.92) 0%, rgba(2,11,29,.74) 30%, rgba(2,11,29,.18) 52%, rgba(2,11,29,.02) 100%),
      linear-gradient(180deg, rgba(2,11,29,.04) 0%, rgba(2,11,29,.12) 55%, rgba(2,11,29,.96) 77%, #020b1d 100%);
  }
  .landing-screen .hero-panel { width: min(780px, 49vw); align-items: start; }
  .hero-copy {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 1px;
  }
  .hero-copy .eyebrow {
    min-height: 32px;
    margin: 0 0 10px;
    padding: 6px 15px;
    color: #71e9fa;
    font-size: 12px;
  }
  .hero-ai-badge {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 380px;
    min-height: 32px;
    margin: 0;
    padding: 6px 11px;
    border: 1px solid rgba(155,242,255,.24);
    border-radius: 999px;
    background: rgba(5,18,42,.62);
    color: #dffcff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    backdrop-filter: blur(10px);
  }
  .hero-ai-badge svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #71e9fa;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .hero-ai-badge span { display: flex; align-items: baseline; gap: 6px; }
  .hero-ai-badge b {
    color: #8fefff;
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
  }
  .hero-ai-badge small {
    color: rgba(255,255,255,.72);
    font-size: 9.5px;
    line-height: 1.15;
  }
  .hero-copy h1 {
    max-width: 770px;
    font-size: clamp(48px, 3.8vw, 65px);
    line-height: .98;
    letter-spacing: -.035em;
  }
  .hero-copy h1 span { display: inline; }
  .hero-copy h1 span:first-child::after,
  .hero-copy h1 span:nth-child(3)::after { content: "\A"; white-space: pre; }
  .hero-emotion { display: none; }
  .hero-proof-line {
    order: 3;
    width: fit-content;
    max-width: 640px;
    margin-top: 10px;
    padding: 8px 16px 8px 50px;
    border-radius: 12px;
    font-size: 17px;
  }
  .hero-proof-line::before { left: 15px; width: 25px; }
  .hero-evidence-flow {
    order: 3;
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    width: min(100%, 650px);
    margin-top: 10px;
    padding: 6px 8px 5px;
    border: 1px solid rgba(155,242,255,.22);
    border-radius: 13px;
    background:
      linear-gradient(135deg, rgba(255,200,87,.09), rgba(56,213,232,.07)),
      rgba(5,18,42,.58);
    box-shadow:
      0 14px 34px rgba(0,0,0,.18),
      inset 0 1px 0 rgba(255,255,255,.05);
    backdrop-filter: blur(10px);
  }
  .hero-evidence-flow span {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: 28px auto;
    justify-items: center;
    gap: 4px;
    padding: 0 5px;
    color: rgba(255,255,255,.75);
    font-size: 9.5px;
    line-height: 1.15;
    text-align: center;
  }
  .hero-evidence-flow span:not(.is-result)::after {
    content: "→";
    position: absolute;
    top: 5px;
    right: -8px;
    color: rgba(155,242,255,.68);
    font-size: 17px;
    line-height: 1;
  }
  .hero-evidence-flow svg {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    padding: 5px;
    border: 1px solid rgba(155,242,255,.42);
    border-radius: 50%;
    background: #0a264b;
    color: #9bf2ff;
    box-shadow: 0 0 14px rgba(56,213,232,.15);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .hero-evidence-flow span:first-child svg {
    border-color: rgba(255,200,87,.48);
    color: #ffc857;
  }
  .hero-evidence-flow .is-result b { color: #fff0a8; }
  .hero-evidence-flow .is-result svg {
    border-color: rgba(255,200,87,.58);
    color: #ffc857;
    box-shadow: 0 0 16px rgba(255,200,87,.18);
  }
  .hero-evidence-tagline {
    grid-column: 1 / -1;
    margin: 5px 3px 0;
    padding-top: 6px;
    border-top: 1px solid rgba(155,242,255,.12);
    color: rgba(255,255,255,.9);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    letter-spacing: .01em;
  }
  .hero-text {
    order: 4;
    max-width: 650px;
    margin-top: 12px;
    font-size: 17px;
    line-height: 1.35;
  }
  .hero-actions {
    order: 5;
    grid-template-columns: 352px 244px;
    gap: 14px;
    margin-top: 12px;
  }
  .hero-actions .btn {
    min-height: 58px;
    border-radius: 13px;
    font-size: 16px;
  }
  .hero-actions .btn.primary {
    border: 1px solid rgba(255,236,164,.76);
    background: linear-gradient(135deg, #ffd466 0%, #ffe8a4 34%, #79eadc 72%, #38d5e8 100%);
    color: #06152b;
    box-shadow:
      0 12px 28px rgba(0,0,0,.22),
      0 0 22px rgba(255,200,87,.22),
      0 0 20px rgba(56,213,232,.16),
      inset 0 1px 0 rgba(255,255,255,.48);
  }
  .hero-actions .btn.secondary {
    border: 1px solid rgba(155,242,255,.30);
    background: rgba(5,18,42,.48);
    color: #e9fbff;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.045),
      0 10px 24px rgba(0,0,0,.16);
  }
  .hero-actions .btn.secondary:hover,
  .hero-actions .btn.secondary:focus-visible {
    border-color: rgba(155,242,255,.52);
    background: rgba(10,38,75,.64);
  }
  .hero-quick-benefits {
    order: 6;
    display: flex;
    gap: 28px;
    margin-top: 12px;
    color: #8fefff;
    font-size: 13px;
    font-weight: 750;
  }
  .hero-quick-benefits span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
  }
  .hero-quick-benefits span::before {
    content: "✓";
    display: grid;
    place-items: center;
    width: 17px;
    height: 17px;
    border: 1px solid rgba(90,241,220,.55);
    border-radius: 50%;
    color: #58f1dc;
    font-size: 10px;
  }
  .hero-trust-line { display: none; }

  .proof-row.action-preview-row {
    position: relative;
    z-index: 2;
    display: grid;
    width: 100%;
    max-width: none;
    justify-self: stretch;
    grid-template-columns: repeat(6, minmax(0,1fr));
    gap: 0;
    opacity: 1;
    min-height: 104px;
    margin-top: 16px;
    border: 1px solid rgba(142,206,238,.25);
    border-radius: 18px;
    background:
      linear-gradient(145deg, rgba(9,34,69,.82), rgba(4,17,38,.86)),
      rgba(5,22,48,.78);
    box-shadow:
      0 22px 56px rgba(0,0,0,.30),
      inset 0 1px 0 rgba(255,255,255,.05);
    backdrop-filter: blur(12px);
  }
  .proof-row.action-preview-row div {
    position: relative;
    display: grid;
    align-content: center;
    gap: 3px;
    padding: 16px 18px 16px 72px;
    border-right: 1px solid rgba(142,206,238,.18);
  }
  .proof-row.action-preview-row div:last-child { border-right: 0; }
  .proof-row.action-preview-row div::before {
    content: "◇";
    position: absolute;
    left: 20px;
    top: calc(50% - 20px);
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(54,224,237,.36);
    border-radius: 50%;
    color: #42e3ee;
    font-size: 23px;
    box-shadow: 0 0 20px rgba(54,224,237,.12);
  }
  .proof-row.action-preview-row div:nth-child(2)::before,
  .proof-row.action-preview-row div:nth-child(5)::before { color: #9b79ff; border-color: rgba(155,121,255,.45); }
  .proof-row.action-preview-row div:nth-child(3)::before,
  .proof-row.action-preview-row div:nth-child(6)::before { color: #ffc857; border-color: rgba(255,200,87,.45); }
  .proof-row.action-preview-row b { color: #63e8f6; font-size: 21px; }
  .proof-row.action-preview-row div:nth-child(2) b,
  .proof-row.action-preview-row div:nth-child(3) b { color: #ffc857; }
  .proof-row.action-preview-row div:nth-child(2) b,
  .proof-row.action-preview-row div:nth-child(3) b {
    font-size: 16px;
    line-height: 1.12;
  }
  .proof-row.action-preview-row div:last-child b {
    font-size: 15px;
    line-height: 1.15;
  }
  .proof-row.action-preview-row span { color: rgba(255,255,255,.76); font-size: 12px; line-height: 1.25; }

  .value-row-title {
    position: relative;
    z-index: 2;
    margin: 16px 0 10px;
    color: #f7fbff;
    font-size: 22px;
    font-weight: 900;
    text-align: center;
  }
  .value-row-title strong { color: #ffc857; }
  .value-row-title::after {
    content: "";
    display: block;
    width: 58px;
    height: 2px;
    margin: 8px auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #ffc857, #46e6f2);
    box-shadow: 0 0 16px rgba(70,230,242,.28);
  }
  .value-row {
    position: relative;
    z-index: 2;
    grid-row: 4;
    grid-template-columns: repeat(6, minmax(0,1fr));
    gap: 16px;
  }
  .value-row article {
    display: grid;
    grid-template-columns: 48px 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 12px;
    min-height: 128px;
    padding: 16px 16px;
    border-radius: 16px;
    background:
      linear-gradient(145deg, rgba(10,38,77,.68), rgba(3,15,34,.76)),
      rgba(5,18,42,.58);
    box-shadow:
      0 18px 42px rgba(0,0,0,.22),
      inset 0 1px 0 rgba(255,255,255,.05);
  }
  .value-row .module-symbol {
    grid-row: 1 / 4;
    width: 46px;
    height: 46px;
    margin: 4px 0 0;
  }
  .value-row h2 { font-size: 14px; line-height: 1.2; }
  .value-row h2 span { color: inherit; }
  .value-row p { margin-top: 6px; font-size: 11px; line-height: 1.4; }
  .value-row a { margin-top: 8px; font-size: 11px; }

  #interet {
    isolation: isolate;
    background: #020b1d;
  }
  #interet::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: -6px;
    background: url("yloria-site-interest-natural.png?v=20260727-interest-natural1") center / cover no-repeat;
    filter: none;
    transform: none;
    pointer-events: none;
  }
  #interet::before {
    z-index: 1;
    background:
      radial-gradient(ellipse 66% 48% at 0% 0%, rgba(2,11,29,.76) 0%, rgba(2,11,29,.48) 38%, transparent 72%),
      linear-gradient(90deg, rgba(2,11,29,.30) 0%, rgba(2,11,29,.08) 48%, transparent 100%),
      linear-gradient(180deg, transparent 0%, transparent 58%, rgba(2,11,29,.22) 100%);
  }
  #interet > * { z-index: 2; }
  #interet .landing-page-head { max-width: 980px; }
  #interet .landing-page-head .eyebrow {
    width: fit-content;
    padding: 6px 13px;
    border: 1px solid rgba(113,233,250,.25);
    border-radius: 999px;
    background: rgba(5,18,42,.56);
    color: #71e9fa;
    font-size: 11px;
    letter-spacing: .02em;
  }
  #interet .landing-page-head > p:last-child {
    max-width: 820px;
    color: rgba(255,255,255,.82);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
  }
  #interet .landing-voice-button {
    gap: 7px;
    min-height: 34px;
    margin: 4px 0 8px;
    padding: 7px 11px;
    border-color: rgba(155,242,255,.20);
    background: rgba(5,18,42,.44);
    color: rgba(143,239,255,.82);
    font-size: 12px;
    font-weight: 750;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
  }
  #interet .landing-voice-button::before {
    content: "";
    width: 17px;
    height: 17px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' d='M5 10v4m4-7v10m4-13v16m4-13v10m4-7v4'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' d='M5 10v4m4-7v10m4-13v16m4-13v10m4-7v4'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .persona-intro {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-top: clamp(50px, 6.5vh, 68px);
  }
  .persona-intro p { margin: 0; }
  .persona-prompt {
    display: grid;
    gap: 4px;
  }
  .persona-prompt strong {
    color: #f7fbff;
    font-size: 22px;
    line-height: 1.05;
  }
  .persona-prompt span {
    color: rgba(255,255,255,.68);
    font-size: 13px;
  }
  .shared-proof {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 13px;
    border: 1px solid rgba(255,200,87,.28);
    border-radius: 999px;
    background: rgba(5,18,42,.64);
    color: #fff0a8;
    font-size: 12px;
    font-weight: 750;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  }
  .shared-proof .yl-icon {
    width: 24px;
    height: 24px;
    border: 0;
    background: transparent;
    color: #ffc857;
    box-shadow: none;
  }
  #interet .persona-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
    margin-top: 14px;
  }
  #interet .persona-card {
    position: relative;
    min-height: 170px;
    padding: 17px 19px;
    border-color: rgba(142,206,238,.28);
    border-radius: 16px;
    background:
      linear-gradient(145deg, rgba(10,38,77,.88), rgba(3,15,34,.91)),
      rgba(5,18,42,.88);
    box-shadow:
      0 18px 44px rgba(0,0,0,.28),
      inset 0 1px 0 rgba(255,255,255,.055);
    backdrop-filter: blur(12px);
    cursor: default;
    transition:
      transform .28s cubic-bezier(.2,.78,.28,1),
      opacity .24s ease,
      filter .24s ease,
      border-color .24s ease,
      box-shadow .28s ease,
      background .24s ease;
  }
  #interet .persona-card:is(:hover, :focus, :focus-visible, .is-active) {
    z-index: 3;
    outline: none;
    transform: translateY(-5px) scale(1.018);
    border-color: rgba(113,233,250,.58);
    background:
      linear-gradient(145deg, rgba(13,51,96,.95), rgba(4,19,43,.96)),
      rgba(5,18,42,.94);
    box-shadow:
      0 24px 56px rgba(0,0,0,.36),
      0 0 0 1px rgba(113,233,250,.10),
      0 0 30px rgba(56,213,232,.18),
      inset 0 1px 0 rgba(255,255,255,.08);
  }
  #interet .persona-card:focus-visible {
    outline: 2px solid rgba(255,200,87,.82);
    outline-offset: 3px;
  }
  #interet .persona-grid:has(.persona-card:is(:hover, :focus, :focus-visible, .is-active)) .persona-card:not(:is(:hover, :focus, :focus-visible, .is-active)) {
    opacity: .74;
    filter: saturate(.76);
  }
  .persona-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 11px;
  }
  #interet .persona-card-head .persona-avatar {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    margin: 0;
    border-color: rgba(113,233,250,.42);
    background: linear-gradient(145deg, rgba(24,83,123,.82), rgba(5,24,52,.94));
    box-shadow:
      0 0 22px rgba(56,213,232,.13),
      inset 0 1px 0 rgba(255,255,255,.08);
  }
  #interet .persona-card-head > span {
    margin: 0;
    padding: 5px 10px;
    font-size: 10px;
    letter-spacing: .05em;
  }
  .persona-manager {
    --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='1.8' d='M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm-7 10v-2a7 7 0 0 1 14 0v2M10 15l2 2 2-2m-2 2v4'/%3E%3C/svg%3E");
  }
  #interet .persona-card h2 {
    margin: 0;
    color: #8fefff;
    font-size: clamp(17px, 1.18vw, 20px);
    line-height: 1.15;
  }
  #interet .persona-card p {
    margin: 10px 0 0;
    color: rgba(255,255,255,.72);
    font-size: 13px;
    line-height: 1.38;
  }
  #interet .flow-strip {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    margin-top: 16px;
    border-color: rgba(142,206,238,.24);
    border-radius: 16px;
    background: rgba(4,17,38,.82);
    box-shadow:
      0 18px 44px rgba(0,0,0,.26),
      inset 0 1px 0 rgba(255,255,255,.05);
    backdrop-filter: blur(12px);
  }
  #interet .flow-strip span {
    transition: opacity .24s ease, filter .24s ease, transform .24s ease;
  }
  #interet .flow-strip .stage-decision :is(.yl-icon, b) {
    color: #fff0a8;
    border-color: rgba(255,200,87,.62);
  }
  #interet .flow-strip .stage-decision .yl-icon {
    box-shadow:
      0 0 22px rgba(255,200,87,.18),
      inset 0 1px 0 rgba(255,255,255,.08);
  }
  #interet:has(.persona-card:is(:hover, :focus, :focus-visible, .is-active)) .flow-strip span {
    opacity: .26;
    filter: saturate(.62);
  }
  #interet:has(.persona-card[data-persona="recruitment"]:is(:hover, :focus, :focus-visible, .is-active)) .flow-strip :is(.stage-poste, .stage-collaborateur, .stage-competences, .stage-ecart, .stage-progression, .stage-decision),
  #interet:has(.persona-card[data-persona="rh"]:is(:hover, :focus, :focus-visible, .is-active)) .flow-strip :is(.stage-poste, .stage-collaborateur, .stage-competences, .stage-ecart, .stage-progression, .stage-decision),
  #interet:has(.persona-card[data-persona="manager"]:is(:hover, :focus, :focus-visible, .is-active)) .flow-strip :is(.stage-competences, .stage-ecart, .stage-plan, .stage-progression, .stage-decision),
  #interet:has(.persona-card[data-persona="employee"]:is(:hover, :focus, :focus-visible, .is-active)) .flow-strip :is(.stage-collaborateur, .stage-competences, .stage-plan, .stage-progression, .stage-decision),
  #interet:has(.persona-card[data-persona="direction"]:is(:hover, :focus, :focus-visible, .is-active)) .flow-strip :is(.stage-competences, .stage-ecart, .stage-plan, .stage-progression, .stage-decision) {
    opacity: 1;
    filter: none;
    transform: translateY(-3px);
  }
  #interet:has(.persona-card:is(:hover, :focus, :focus-visible, .is-active)) .flow-strip :is(.gold, .stage-decision) {
    transition-delay: .03s;
  }

  /* Proof page: turn the promise into a compact, visual product story. */
  #preuve .proof-story {
    gap: 18px;
    margin-top: clamp(76px, 8.6vh, 88px);
  }
  #preuve .proof-story-step {
    min-width: 0;
    height: clamp(146px, 16.7vh, 160px);
    padding: 14px 16px;
    overflow: visible;
    border-color: rgba(142,206,238,.30);
    border-radius: 16px;
    background:
      linear-gradient(145deg, rgba(10,38,77,.90), rgba(3,15,34,.93)),
      rgba(5,18,42,.88);
    box-shadow:
      0 18px 44px rgba(0,0,0,.28),
      inset 0 1px 0 rgba(255,255,255,.055);
    backdrop-filter: blur(12px);
    opacity: 0;
    transform: translateY(18px);
  }
  #preuve .proof-story-step:not(:last-child)::after {
    content: "→";
    top: 62px;
    right: -18px;
    z-index: 3;
    color: rgba(113,233,250,.78);
    font-size: 21px;
    text-shadow: 0 0 18px rgba(56,213,232,.48);
  }
  #preuve.is-proof-visible .proof-story-step {
    animation: proof-step-reveal .62s cubic-bezier(.2,.78,.28,1) both;
  }
  #preuve.is-proof-visible .proof-story-step:nth-child(2) { animation-delay: .14s; }
  #preuve.is-proof-visible .proof-story-step:nth-child(3) { animation-delay: .28s; }
  #preuve.is-proof-visible .proof-story-step:nth-child(4) { animation-delay: .42s; }
  #preuve.is-proof-visible .proof-compare { animation: proof-step-reveal .62s .56s cubic-bezier(.2,.78,.28,1) both; }
  #preuve.is-proof-visible .proof-demo { animation: proof-step-reveal .62s .70s cubic-bezier(.2,.78,.28,1) both; }
  @keyframes proof-step-reveal {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .proof-step-heading {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    margin-bottom: 10px;
  }
  #preuve .proof-step-heading > span,
  #preuve .proof-step-heading .yl-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin: 0;
    border: 1px solid rgba(113,233,250,.42);
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(24,83,123,.72), rgba(5,24,52,.94));
    color: #8fefff;
    font-size: 13px;
    font-weight: 950;
    box-shadow: 0 0 18px rgba(56,213,232,.12), inset 0 1px 0 rgba(255,255,255,.08);
  }
  #preuve .proof-story-step:first-child .proof-step-heading > span,
  #preuve .proof-story-step.result .proof-step-heading .yl-icon {
    border-color: rgba(255,200,87,.52);
    color: #ffc857;
    box-shadow: 0 0 18px rgba(255,200,87,.13), inset 0 1px 0 rgba(255,255,255,.08);
  }
  #preuve .proof-step-heading h2 {
    min-width: 0;
    margin: 0;
    color: #8fefff;
    font-size: clamp(15px, 1.02vw, 18px);
    line-height: 1.12;
  }
  .proof-mini-gauge {
    position: relative;
    display: grid;
    grid-template-columns: 66px 1fr;
    grid-template-rows: 1fr 1fr;
    align-items: center;
    column-gap: 12px;
    min-height: 67px;
  }
  .proof-mini-gauge::before {
    content: "";
    grid-row: 1 / 3;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background:
      radial-gradient(circle, #07172f 55%, transparent 57%),
      conic-gradient(#ffc857 calc(var(--score) * 1%), rgba(142,206,238,.14) 0);
    box-shadow: 0 0 20px rgba(255,200,87,.12);
  }
  .proof-mini-gauge strong {
    align-self: end;
    color: #fff0a8;
    font-size: 24px;
    line-height: 1;
  }
  .proof-mini-gauge small {
    align-self: start;
    margin-top: 5px;
    color: rgba(255,255,255,.65);
    font-size: 10px;
    line-height: 1.25;
  }
  .proof-mini-bars {
    display: grid;
    gap: 7px;
    padding-top: 2px;
  }
  .proof-mini-bars > span {
    display: grid;
    grid-template-columns: 54px 1fr 34px;
    align-items: center;
    gap: 8px;
  }
  .proof-mini-bars small {
    color: rgba(255,255,255,.67);
    font-size: 9.5px;
  }
  .proof-mini-bars i {
    position: relative;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(142,206,238,.13);
  }
  .proof-mini-bars i::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(var(--score) * 1%);
    border-radius: inherit;
    background: linear-gradient(90deg, #36d5e8, #8fefff);
    box-shadow: 0 0 12px rgba(56,213,232,.30);
    transition: width .45s ease;
  }
  .proof-mini-bars > span:nth-child(2) i::after { background: linear-gradient(90deg, #725cf2, #a48dff); }
  .proof-mini-bars > span:last-child i::after { background: linear-gradient(90deg, #ffc857, #ffe59a); }
  .proof-mini-bars b {
    color: #dffcff;
    font-size: 10px;
    text-align: right;
  }
  .proof-action-stack {
    display: grid;
    gap: 6px;
  }
  .proof-action-stack span {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 22px;
    padding: 4px 8px 4px 29px;
    border: 1px solid rgba(113,233,250,.18);
    border-radius: 7px;
    background: rgba(10,38,75,.60);
    color: rgba(255,255,255,.82);
    font-size: 10px;
    font-weight: 700;
  }
  .proof-action-stack span::before {
    content: "✓";
    position: absolute;
    left: 8px;
    display: grid;
    place-items: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(54,213,232,.16);
    color: #71e9fa;
    font-size: 8px;
  }
  .proof-mini-result {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    grid-template-rows: auto 1fr auto;
    align-items: end;
    column-gap: 10px;
  }
  .proof-mini-result svg {
    grid-row: 1 / 4;
    width: 100%;
    height: 64px;
    overflow: visible;
    filter: drop-shadow(0 0 7px rgba(56,213,232,.22));
  }
  .proof-mini-result svg path {
    fill: none;
    stroke: #63e8f6;
    stroke-width: 3;
    stroke-linecap: round;
  }
  .proof-mini-result svg circle:first-of-type { fill: #63e8f6; }
  .proof-mini-result svg circle:last-of-type { fill: #ffc857; }
  .proof-mini-result strong {
    color: #fff0a8;
    font-size: 24px;
    line-height: 1;
  }
  .proof-mini-result .proof-result-status {
    align-self: end;
    margin-bottom: 3px;
    color: #fff0a8;
    font-size: 9.5px;
    font-weight: 850;
    line-height: 1.05;
    letter-spacing: .01em;
  }
  .proof-mini-result .proof-result-delta {
    color: #71e9fa;
    font-size: 9.5px;
    font-weight: 800;
  }

  #preuve .proof-compare {
    gap: 10px;
    margin-top: 10px;
    opacity: 0;
  }
  #preuve .proof-compare .glass-card {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 13px;
    min-height: 60px;
    padding: 9px 14px;
    border-radius: 14px;
    background: rgba(4,17,38,.84);
    box-shadow: 0 14px 34px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.045);
  }
  #preuve .proof-compare .glass-card > span {
    margin: 0;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 9px;
    line-height: 1;
    white-space: nowrap;
  }
  #preuve .proof-compare .muted > span {
    border: 1px solid rgba(255,120,120,.30);
    background: rgba(255,90,90,.08);
    color: #ffb0b0;
  }
  #preuve .proof-compare .highlight > span {
    border: 1px solid rgba(255,200,87,.42);
    background: rgba(255,200,87,.09);
    color: #fff0a8;
  }
  .proof-compare ul {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .proof-compare li {
    position: relative;
    min-width: 0;
    padding-left: 18px;
    color: rgba(255,255,255,.70);
    font-size: 9.5px;
    line-height: 1.15;
  }
  .proof-compare li::before {
    position: absolute;
    left: 0;
    top: -1px;
    display: grid;
    place-items: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    font-size: 8px;
    font-weight: 900;
  }
  .proof-compare .muted li::before {
    content: "×";
    background: rgba(255,90,90,.11);
    color: #ff9c9c;
  }
  .proof-compare .highlight li::before {
    content: "✓";
    background: rgba(90,241,220,.12);
    color: #58f1dc;
  }

  #preuve .proof-demo {
    display: grid;
    grid-template-columns: minmax(260px, 19%) 1fr;
    gap: 10px;
    margin-top: 10px;
    opacity: 0;
  }
  .proof-skill-tabs {
    display: grid;
    gap: 6px;
    min-width: 0;
  }
  .proof-skill {
    display: grid;
    grid-template-columns: 34px minmax(0,1fr) auto;
    align-items: center;
    gap: 9px;
    min-width: 0;
    min-height: 43px;
    padding: 6px 10px;
    border: 1px solid rgba(142,206,238,.24);
    border-radius: 11px;
    background: rgba(4,17,38,.82);
    color: rgba(255,255,255,.74);
    font: inherit;
    text-align: left;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
    cursor: pointer;
    transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
  }
  .proof-skill:hover,
  .proof-skill:focus-visible,
  .proof-skill.is-active {
    outline: none;
    transform: translateX(4px);
    border-color: rgba(113,233,250,.55);
    background: linear-gradient(120deg, rgba(12,54,96,.94), rgba(6,25,52,.94));
    color: #f7fbff;
    box-shadow: 0 0 22px rgba(56,213,232,.12), inset 0 1px 0 rgba(255,255,255,.07);
  }
  .proof-skill:focus-visible {
    outline: 2px solid rgba(255,200,87,.78);
    outline-offset: 2px;
  }
  .proof-skill .yl-icon {
    width: 32px;
    height: 32px;
    margin: 0;
    border-color: rgba(113,233,250,.34);
    color: #8fefff;
  }
  .proof-skill.is-active .yl-icon {
    border-color: rgba(255,200,87,.54);
    color: #ffc857;
    box-shadow: 0 0 16px rgba(255,200,87,.13);
  }
  .proof-skill span {
    min-width: 0;
    font-size: 11px;
    font-weight: 850;
    line-height: 1.1;
  }
  .proof-skill small {
    color: #8fefff;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
  }
  .proof-case {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 8px;
    min-width: 0;
    min-height: 141px;
    padding: 10px 14px;
    border: 1px solid rgba(142,206,238,.30);
    border-radius: 15px;
    background:
      radial-gradient(circle at 92% 8%, rgba(255,200,87,.08), transparent 22%),
      linear-gradient(145deg, rgba(10,38,77,.90), rgba(3,15,34,.94));
    box-shadow:
      0 18px 44px rgba(0,0,0,.28),
      inset 0 1px 0 rgba(255,255,255,.055);
    backdrop-filter: blur(12px);
  }
  .proof-case header {
    display: flex;
    align-items: center;
    gap: 9px;
  }
  .proof-avatar {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255,200,87,.48);
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(255,200,87,.18), rgba(10,38,75,.88));
    color: #fff0a8;
    font-size: 12px;
    font-weight: 950;
  }
  .proof-case header p {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
  }
  .proof-case header small {
    color: rgba(255,255,255,.54);
    font-size: 8.5px;
    font-weight: 750;
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  .proof-case header strong {
    color: #8fefff;
    font-size: 14px;
  }
  .proof-case-flow {
    display: grid;
    grid-template-columns: 72px 26px minmax(120px,.8fr) 26px minmax(130px,.9fr) 26px 76px 26px minmax(140px,.9fr);
    align-items: center;
    gap: 12px;
    min-width: 0;
  }
  .proof-case-flow > span {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 2px;
    min-width: 0;
    min-height: 54px;
    padding: 5px 7px;
    text-align: center;
  }
  .proof-case-flow b {
    overflow-wrap: anywhere;
    color: #ecfbff;
    font-size: 11px;
    line-height: 1.22;
  }
  .proof-case-label {
    color: rgba(143,239,255,.64);
    font-size: 8px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: .055em;
    text-transform: uppercase;
  }
  .proof-case-value .proof-case-label,
  .proof-case-result .proof-case-label { color: rgba(255,224,135,.76); }
  .proof-flow-arrow {
    position: relative;
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(113,233,250,.28), rgba(113,233,250,.88));
    box-shadow: 0 0 10px rgba(56,213,232,.22);
    animation: proof-arrow-travel 1.8s ease-in-out infinite;
    will-change: transform;
  }
  .proof-flow-arrow:nth-of-type(2) { animation-delay: .12s; }
  .proof-flow-arrow:nth-of-type(3) { animation-delay: .24s; }
  .proof-flow-arrow:nth-of-type(4) { animation-delay: .36s; }
  .proof-flow-arrow::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -1px;
    width: 7px;
    height: 7px;
    border-top: 2px solid #8fefff;
    border-right: 2px solid #8fefff;
    transform: translateY(-50%) rotate(45deg);
  }
  @keyframes proof-arrow-travel {
    0%, 100% { transform: translateX(-2px); opacity: .68; }
    50% { transform: translateX(3px); opacity: 1; }
  }
  .proof-case-value b,
  .proof-case-result b {
    color: #fff0a8;
    font-size: 22px;
    line-height: 1;
  }
  .proof-case-value,
  .proof-case-result {
    border: 1px solid rgba(255,200,87,.28);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(255,200,87,.10), rgba(5,18,42,.30));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  }
  .proof-case-result em {
    color: #58f1dc;
    font-size: 8.5px;
    font-style: normal;
    font-weight: 850;
  }
  .proof-case-decision {
    grid-template-columns: 25px 1fr;
    align-items: center;
    justify-items: start !important;
    column-gap: 7px !important;
    padding-inline: 8px !important;
    border: 1px solid rgba(90,241,220,.25);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(90,241,220,.09), rgba(5,18,42,.30));
    color: #eafffb;
    text-align: left !important;
  }
  .proof-case-decision .yl-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin: 0;
    border: 0;
    background: rgba(90,241,220,.10);
    color: #58f1dc;
    box-shadow: none;
  }
  .proof-case-decision > span {
    display: grid;
    gap: 3px;
    min-width: 0;
  }
  .proof-case-decision b {
    color: #eafffb;
    font-size: 10px;
    font-weight: 850;
  }

  /* Product page: an interactive, screen-by-screen mini demo. */
  #demonstration .landing-page-head {
    max-width: min(840px, 46vw);
  }
  #demonstration .demo-route {
    top: clamp(88px, 9.5vh, 104px);
    right: 54px;
    z-index: 3;
    grid-template-columns: repeat(5, minmax(84px, 1fr));
    gap: 14px;
    width: min(700px, 47vw);
    padding-top: 10px;
    opacity: 1;
  }
  #demonstration .demo-route::before { display: none; }
  .demo-route-step {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 6px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: center;
    cursor: pointer;
    opacity: .72;
    transition: opacity .24s ease, transform .28s ease, filter .24s ease;
  }
  .demo-route-step:not(:last-child)::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 25px;
    left: calc(50% + 36px);
    width: calc(100% - 54px);
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(113,233,250,.70), rgba(113,233,250,.14));
    box-shadow: 0 0 12px rgba(56,213,232,.20);
  }
  #demonstration .demo-route-step .yl-icon {
    width: 50px;
    height: 50px;
    margin: 0;
    border-color: rgba(113,233,250,.34);
    background: linear-gradient(145deg, rgba(20,75,112,.70), rgba(6,28,55,.84));
    color: #8fefff;
    box-shadow: 0 0 18px rgba(56,213,232,.13), inset 0 1px 0 rgba(255,255,255,.08);
    transition: border-color .24s ease, color .24s ease, box-shadow .28s ease, transform .28s ease;
  }
  #demonstration .demo-route-step b {
    color: #8fefff;
    font-size: 12px;
    line-height: 1;
    text-transform: uppercase;
    transition: color .24s ease;
  }
  #demonstration .demo-route-step em {
    min-height: 28px;
    color: rgba(255,255,255,.67);
    font-size: 10px;
    font-style: normal;
    line-height: 1.25;
  }
  .demo-route-step:is(:hover, :focus-visible, .is-active) {
    outline: none;
    opacity: 1;
    transform: translateY(-3px);
    filter: saturate(1.08);
  }
  .demo-route-step:focus-visible .yl-icon {
    outline: 2px solid rgba(255,200,87,.78);
    outline-offset: 3px;
  }
  #demonstration .demo-route-step.is-active .yl-icon {
    border-color: rgba(255,200,87,.62);
    color: #ffc857;
    transform: scale(1.06);
    box-shadow:
      0 0 0 3px rgba(255,200,87,.07),
      0 0 26px rgba(255,200,87,.24),
      inset 0 1px 0 rgba(255,255,255,.10);
  }
  #demonstration .demo-route-step.is-active b { color: #fff0a8; }
  #demonstration .demo-route-step.is-active::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 50%;
    width: 58px;
    height: 58px;
    border: 1px solid rgba(255,200,87,.20);
    border-radius: 50%;
    transform: translateX(-50%);
    animation: demo-route-ring 2.4s ease-in-out infinite;
    pointer-events: none;
  }
  @keyframes demo-route-ring {
    0%, 100% { opacity: .22; transform: translateX(-50%) scale(.94); }
    50% { opacity: .72; transform: translateX(-50%) scale(1.08); }
  }

  #demonstration .demo-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(270px, .72fr);
    grid-template-rows: repeat(3, minmax(0, 1fr));
    grid-auto-flow: row;
    gap: 10px 12px;
    height: clamp(330px, 38vh, 360px);
    margin-top: clamp(132px, 15vh, 154px);
  }
  #demonstration .screen-card {
    position: relative;
    grid-column: 2;
    min-height: 0;
    height: auto;
    padding: 10px 13px;
    overflow: hidden;
    border-color: rgba(142,206,238,.24);
    border-radius: 14px;
    background:
      linear-gradient(145deg, rgba(8,35,69,.76), rgba(3,15,34,.84)),
      rgba(5,18,42,.72);
    box-shadow: 0 12px 28px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.04);
    opacity: .72;
    cursor: pointer;
    transform: translateX(0);
    transition:
      opacity .28s ease,
      transform .32s cubic-bezier(.2,.78,.28,1),
      border-color .28s ease,
      box-shadow .32s ease,
      background .28s ease;
  }
  #demonstration .screen-card::after {
    content: "↗";
    position: absolute;
    top: 10px;
    right: 12px;
    color: rgba(143,239,255,.58);
    font-size: 13px;
  }
  #demonstration .screen-card:not(.is-active):is(:hover, :focus-visible) {
    outline: none;
    opacity: .96;
    transform: translateX(-5px);
    border-color: rgba(113,233,250,.50);
    box-shadow: 0 16px 34px rgba(0,0,0,.28), 0 0 20px rgba(56,213,232,.12);
  }
  #demonstration .screen-card:focus-visible {
    outline: 2px solid rgba(255,200,87,.78);
    outline-offset: 2px;
  }
  #demonstration .screen-card.is-active {
    grid-column: 1;
    grid-row: 1 / 4;
    padding: 18px 21px;
    border-color: rgba(113,233,250,.58);
    background:
      radial-gradient(circle at 90% 10%, rgba(255,200,87,.09), transparent 23%),
      linear-gradient(145deg, rgba(10,43,82,.94), rgba(3,16,36,.95));
    box-shadow:
      0 24px 58px rgba(0,0,0,.34),
      0 0 0 1px rgba(113,233,250,.08),
      0 0 32px rgba(56,213,232,.14),
      inset 0 1px 0 rgba(255,255,255,.07);
    opacity: 1;
    transform: none;
    animation: demo-screen-enter .46s cubic-bezier(.2,.78,.28,1) both;
  }
  #demonstration .screen-card.is-active::after { display: none; }
  @keyframes demo-screen-enter {
    from { opacity: .45; transform: translateY(8px) scale(.992); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  #demonstration .screen-card > span {
    margin-bottom: 5px;
    padding: 3px 8px;
    font-size: 9px;
  }
  #demonstration .screen-card h2 {
    margin-bottom: 5px;
    padding-right: 22px;
    font-size: 14px;
    line-height: 1.05;
  }
  #demonstration .screen-card:not(.is-active) p { display: none; }
  #demonstration .screen-card:not(.is-active) :is(.fake-table, .bar-set, .mini-steps, .kpi-row, mark) {
    width: 128%;
    max-height: 55px;
    margin: 4px 0 0;
    overflow: hidden;
    opacity: .62;
    transform: scale(.78);
    transform-origin: top left;
    pointer-events: none;
  }
  #demonstration .screen-card.is-active > span {
    margin-bottom: 8px;
    padding: 4px 10px;
    font-size: 10px;
  }
  #demonstration .screen-card.is-active h2 {
    margin-bottom: 13px;
    padding-right: 0;
    font-size: clamp(23px, 1.55vw, 28px);
  }
  #demonstration .screen-card.is-active p {
    margin-top: 13px;
    color: rgba(255,255,255,.78);
    font-size: 13px;
    line-height: 1.35;
  }
  #demonstration .screen-card.is-active .fake-table {
    gap: 4px;
    margin: 14px 0 12px;
    padding: 10px;
  }
  #demonstration .screen-card.is-active .fake-table > * {
    padding: 8px 10px;
    font-size: 13px;
  }
  #demonstration .screen-card.is-active .fake-table strong { font-size: 17px; }
  #demonstration .screen-card.is-active .bar-set {
    gap: 12px;
    margin: 18px 0 14px;
  }
  #demonstration .screen-card.is-active .bar-set label {
    grid-template-columns: 135px 1fr;
    font-size: 13px;
  }
  #demonstration .screen-card.is-active mark {
    display: block;
    padding: 10px 12px;
    font-size: 13px;
  }
  #demonstration .screen-card.is-active .mini-steps {
    gap: 9px;
    margin: 18px 0 14px;
  }
  #demonstration .screen-card.is-active .mini-steps li {
    min-height: 82px;
    padding: 36px 9px 9px;
    font-size: 12px;
  }
  #demonstration .screen-card.is-active .mini-steps li::before {
    width: 27px;
    height: 27px;
    margin: -28px auto 8px;
    font-size: 12px;
  }
  #demonstration .screen-card.is-active .kpi-row {
    gap: 10px;
    margin: 20px 0 16px;
  }
  #demonstration .screen-card.is-active .kpi-row b {
    min-height: 105px;
    font-size: 46px;
  }
  #demonstration .screen-card.is-active .kpi-row small { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  #preuve .proof-story-step,
  #preuve .proof-compare,
  #preuve .proof-demo {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
  .proof-mini-bars i::after,
  .proof-skill { transition: none; }
  .proof-flow-arrow { animation: none !important; }
  #demonstration .demo-route-step.is-active::before,
  #demonstration .screen-card.is-active { animation: none !important; }
}

@media (min-width: 761px) and (max-width: 1250px) {
  .site-header nav { gap: 18px; }
  .landing-screen { padding-inline: 32px; }
  .hero-copy h1 { font-size: 50px; }
  .hero-ai-badge {
    right: auto;
    left: 242px;
    max-width: calc(100% - 242px);
  }
  .hero-ai-badge small { display: none; }
  .proof-row.action-preview-row div { padding-left: 52px; }
  .proof-row.action-preview-row div::before { left: 10px; width: 34px; height: 34px; }
  .value-row { grid-template-columns: repeat(3, minmax(0,1fr)); }
  #interet .persona-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  #preuve .proof-demo { grid-template-columns: 1fr; }
  #preuve .proof-skill-tabs { grid-template-columns: repeat(3, minmax(0,1fr)); }
  #preuve .proof-skill:hover,
  #preuve .proof-skill:focus-visible,
  #preuve .proof-skill.is-active { transform: translateY(-2px); }
  #demonstration .landing-page-head { max-width: 46vw; }
  #demonstration .demo-route {
    right: 32px;
    grid-template-columns: repeat(5, minmax(64px,1fr));
    gap: 7px;
    width: 48vw;
  }
  #demonstration .demo-route-step em { display: none; }
  #demonstration .demo-grid {
    grid-template-columns: minmax(0,1.45fr) minmax(220px,.72fr);
  }
}

@media (min-width: 1251px) and (max-width: 1500px) {
  #interet .persona-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (max-width: 760px) {
  #preuve .proof-story {
    gap: 14px;
    margin-top: 28px;
  }
  #preuve .proof-story-step {
    min-height: 148px;
    padding: 16px;
    border-radius: 16px;
    background: rgba(5,18,42,.88);
    box-shadow: 0 16px 36px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.05);
  }
  .proof-step-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
  }
  #preuve .proof-step-heading > span,
  #preuve .proof-step-heading .yl-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin: 0;
    border: 1px solid rgba(113,233,250,.42);
    border-radius: 50%;
    color: #8fefff;
    font-size: 13px;
    font-weight: 900;
  }
  #preuve .proof-step-heading h2 {
    margin: 0;
    color: #8fefff;
    font-size: 18px;
  }
  .proof-mini-gauge {
    display: grid;
    grid-template-columns: 66px 1fr;
    align-items: center;
    gap: 12px;
  }
  .proof-mini-gauge::before {
    content: "";
    grid-row: 1 / 3;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background:
      radial-gradient(circle, #07172f 55%, transparent 57%),
      conic-gradient(#ffc857 calc(var(--score) * 1%), rgba(142,206,238,.14) 0);
  }
  .proof-mini-gauge strong { align-self: end; color: #fff0a8; font-size: 24px; }
  .proof-mini-gauge small { align-self: start; color: rgba(255,255,255,.65); font-size: 11px; }
  .proof-mini-bars,
  .proof-action-stack { display: grid; gap: 8px; }
  .proof-mini-bars > span {
    display: grid;
    grid-template-columns: 60px 1fr 38px;
    align-items: center;
    gap: 8px;
  }
  .proof-mini-bars small,
  .proof-mini-bars b { color: rgba(255,255,255,.72); font-size: 10px; }
  .proof-mini-bars i {
    position: relative;
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(142,206,238,.13);
  }
  .proof-mini-bars i::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(var(--score) * 1%);
    border-radius: inherit;
    background: linear-gradient(90deg, #36d5e8, #8fefff);
  }
  .proof-action-stack span {
    padding: 7px 10px 7px 30px;
    border: 1px solid rgba(113,233,250,.18);
    border-radius: 8px;
    background: rgba(10,38,75,.60);
    color: rgba(255,255,255,.82);
    font-size: 11px;
  }
  .proof-action-stack span::before {
    content: "✓";
    margin-right: 8px;
    color: #58f1dc;
  }
  .proof-mini-result {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr auto;
    align-items: end;
    gap: 8px;
  }
  .proof-mini-result svg { grid-row: 1 / 4; width: 100%; height: 66px; }
  .proof-mini-result svg path { fill: none; stroke: #63e8f6; stroke-width: 3; }
  .proof-mini-result svg circle:first-of-type { fill: #63e8f6; }
  .proof-mini-result svg circle:last-of-type { fill: #ffc857; }
  .proof-mini-result strong { color: #fff0a8; font-size: 24px; }
  .proof-mini-result .proof-result-status {
    align-self: end;
    margin-bottom: 3px;
    color: #fff0a8;
    font-size: 9.5px;
    font-weight: 850;
  }
  .proof-mini-result .proof-result-delta { color: #71e9fa; font-size: 10px; font-weight: 800; }
  #preuve .proof-compare { gap: 10px; margin-top: 14px; }
  #preuve .proof-compare .glass-card {
    min-height: 0;
    padding: 14px;
    border-radius: 14px;
  }
  #preuve .proof-compare .glass-card > span {
    display: inline-flex;
    margin-bottom: 10px;
    padding: 5px 9px;
    border: 1px solid rgba(255,200,87,.36);
    border-radius: 999px;
    color: #fff0a8;
    font-size: 9px;
  }
  .proof-compare ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .proof-compare li {
    position: relative;
    padding-left: 18px;
    color: rgba(255,255,255,.70);
    font-size: 10px;
  }
  .proof-compare .muted li::before,
  .proof-compare .highlight li::before {
    position: absolute;
    left: 0;
    color: #58f1dc;
  }
  .proof-compare .muted li::before { content: "×"; color: #ff9c9c; }
  .proof-compare .highlight li::before { content: "✓"; }
  #preuve .proof-demo {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 14px;
  }
  .proof-skill-tabs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
  }
  .proof-skill {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    align-items: center;
    gap: 9px;
    min-height: 46px;
    padding: 6px 10px;
    border: 1px solid rgba(142,206,238,.24);
    border-radius: 11px;
    background: rgba(4,17,38,.82);
    color: #f7fbff;
    text-align: left;
  }
  .proof-skill .yl-icon { width: 32px; height: 32px; margin: 0; }
  .proof-skill span { font-size: 12px; font-weight: 850; }
  .proof-skill small { color: #8fefff; font-size: 9px; }
  .proof-skill.is-active { border-color: rgba(255,200,87,.50); background: rgba(10,38,75,.90); }
  .proof-case {
    display: grid;
    gap: 10px;
    padding: 15px;
    border: 1px solid rgba(142,206,238,.30);
    border-radius: 15px;
    background: rgba(5,18,42,.90);
  }
  .proof-case header { display: flex; align-items: center; gap: 9px; }
  .proof-avatar {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255,200,87,.48);
    border-radius: 50%;
    color: #fff0a8;
    font-weight: 950;
  }
  .proof-case header p { display: grid; gap: 2px; margin: 0; }
  .proof-case header small { color: rgba(255,255,255,.54); font-size: 9px; text-transform: uppercase; }
  .proof-case header strong { color: #8fefff; font-size: 15px; }
  .proof-case-flow {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .proof-case-flow > span {
    display: grid;
    justify-items: center;
    gap: 3px;
    padding: 9px 10px;
    text-align: center;
  }
  .proof-case-flow > .proof-flow-arrow {
    width: 100%;
    height: 18px;
    margin: 1px auto;
    transform: none;
    background: none;
    box-shadow: none;
    animation: proof-arrow-fall 1.8s ease-in-out infinite;
  }
  .proof-case-flow > .proof-flow-arrow::after {
    content: "↓";
    position: static;
    display: block;
    width: auto;
    height: auto;
    border: 0;
    color: #8fefff;
    font-size: 20px;
    line-height: 1;
    text-align: center;
    transform: none;
  }
  @keyframes proof-arrow-fall {
    0%, 100% { transform: translateY(-2px); opacity: .68; }
    50% { transform: translateY(3px); opacity: 1; }
  }
  .proof-case-flow b { color: #ecfbff; font-size: 13px; }
  .proof-case-label {
    color: rgba(143,239,255,.68);
    font-size: 9px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: .05em;
    text-transform: uppercase;
  }
  .proof-case-value b,
  .proof-case-result b { color: #fff0a8; font-size: 22px; }
  .proof-case-value,
  .proof-case-result {
    border: 1px solid rgba(255,200,87,.28);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(255,200,87,.10), rgba(5,18,42,.30));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  }
  .proof-case-result em { color: #58f1dc; font-size: 9px; font-style: normal; }
  .proof-case-decision {
    display: grid !important;
    grid-template-columns: 28px auto;
    justify-content: center;
    align-items: center;
    gap: 8px !important;
    border: 1px solid rgba(90,241,220,.25);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(90,241,220,.09), rgba(5,18,42,.30));
  }
  .proof-case-decision .yl-icon { width: 26px; height: 26px; margin: 0; color: #58f1dc; }
  .proof-case-decision > span { display: grid; gap: 3px; text-align: left; }
  .proof-case-decision b { color: #eafffb; font-size: 12px; }

  #demonstration .landing-page-head { max-width: 100%; }
  #demonstration .demo-route {
    position: relative;
    top: auto;
    right: auto;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(5, minmax(0,1fr));
    gap: 4px;
    width: 100%;
    margin: 22px 0 0;
    padding: 10px 0 4px;
    opacity: 1;
  }
  .demo-route-step {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 5px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: center;
    opacity: .66;
  }
  .demo-route-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 20px;
    left: calc(50% + 24px);
    width: calc(100% - 36px);
    height: 1px;
    background: rgba(113,233,250,.32);
  }
  #demonstration .demo-route-step .yl-icon {
    width: 39px;
    height: 39px;
    margin: 0;
    color: #8fefff;
  }
  #demonstration .demo-route-step b {
    color: #8fefff;
    font-size: 8px;
    line-height: 1;
    text-transform: uppercase;
  }
  #demonstration .demo-route-step em { display: none; }
  #demonstration .demo-route-step.is-active {
    opacity: 1;
    transform: translateY(-2px);
  }
  #demonstration .demo-route-step.is-active .yl-icon {
    border-color: rgba(255,200,87,.58);
    color: #ffc857;
    box-shadow: 0 0 20px rgba(255,200,87,.18);
  }
  #demonstration .demo-route-step.is-active b { color: #fff0a8; }
  #demonstration .demo-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    height: auto;
    margin-top: 22px;
  }
  #demonstration .screen-card,
  #demonstration .screen-card.is-active {
    grid-column: 1;
    grid-row: auto;
    min-height: 0;
    height: auto;
    padding: 15px;
    border-radius: 14px;
    opacity: 1;
    transform: none;
  }
  #demonstration .screen-card:not(.is-active) {
    height: 78px;
    padding: 12px 14px;
    opacity: .72;
  }
  #demonstration .screen-card:not(.is-active) :is(.fake-table, .bar-set, .mini-steps, .kpi-row, mark, p) {
    display: none;
  }
  #demonstration .screen-card:not(.is-active) h2 {
    margin: 5px 0 0;
    font-size: 15px;
  }
  #demonstration .screen-card.is-active h2 {
    margin: 8px 0 14px;
    font-size: 22px;
  }
  #demonstration .screen-card.is-active p {
    margin-top: 12px;
    font-size: 12px;
    line-height: 1.4;
  }
  #demonstration .screen-card.is-active .fake-table > * { font-size: 10px; }
  #demonstration .screen-card.is-active .bar-set label {
    grid-template-columns: 92px 1fr;
    font-size: 10px;
  }
  #demonstration .screen-card.is-active .mini-steps {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  #demonstration .screen-card.is-active .kpi-row {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }

  #interet {
    isolation: isolate;
    background: #020b1d;
  }
  #interet::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: -6px;
    background: url("yloria-site-interest-natural.png?v=20260727-interest-natural1") center / cover no-repeat;
    filter: none;
    transform: none;
    pointer-events: none;
  }
  #interet::before {
    z-index: 1;
    background:
      radial-gradient(ellipse 92% 38% at 0% 0%, rgba(2,11,29,.72) 0%, rgba(2,11,29,.40) 46%, transparent 78%),
      linear-gradient(180deg, rgba(2,11,29,.12), rgba(2,11,29,.18) 52%, rgba(2,11,29,.38)),
      linear-gradient(90deg, rgba(2,11,29,.24), transparent 72%);
  }
  #interet > * { z-index: 2; }
  .persona-intro {
    display: grid;
    gap: 12px;
    margin-top: 24px;
  }
  .persona-intro p { margin: 0; }
  .persona-prompt {
    display: grid;
    gap: 4px;
  }
  .persona-prompt strong { color: #f7fbff; font-size: 21px; }
  .persona-prompt span { color: rgba(255,255,255,.68); font-size: 13px; line-height: 1.35; }
  .shared-proof {
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 8px 11px;
    border: 1px solid rgba(255,200,87,.28);
    border-radius: 12px;
    background: rgba(5,18,42,.72);
    color: #fff0a8;
    font-size: 11px;
    font-weight: 750;
  }
  .shared-proof .yl-icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border: 0;
    background: transparent;
    color: #ffc857;
    box-shadow: none;
  }
  #interet .persona-grid { gap: 14px; margin-top: 14px; }
  #interet .persona-card {
    min-height: 0;
    padding: 18px;
    border-color: rgba(142,206,238,.26);
    border-radius: 16px;
    background: rgba(5,18,42,.88);
    box-shadow: 0 16px 36px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.05);
  }
  #interet .landing-voice-button::before {
    content: "♪";
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    color: #8fefff;
    font-size: 14px;
  }
  .persona-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
  }
  #interet .persona-card-head .persona-avatar {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    margin: 0;
  }
  #interet .persona-card-head > span {
    margin: 0;
    padding: 5px 10px;
    font-size: 10px;
  }
  .persona-manager {
    --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='1.8' d='M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm-7 10v-2a7 7 0 0 1 14 0v2M10 15l2 2 2-2m-2 2v4'/%3E%3C/svg%3E");
  }
  #interet .persona-card h2 { margin: 0; color: #8fefff; font-size: 19px; line-height: 1.18; }
  #interet .persona-card p { margin: 9px 0 0; color: rgba(255,255,255,.72); font-size: 13px; line-height: 1.4; }
  #interet .flow-strip {
    gap: 12px;
    border-radius: 16px;
    background: rgba(4,17,38,.86);
  }
  .landing-screen::before {
    background-image: url("../images/yloria-landing-laptop-interface-v4.png");
    background-position: 72% 150px;
    background-size: auto 460px;
    background-repeat: no-repeat;
  }
  .hero-copy { padding-top: 230px; }
  .hero-copy .eyebrow { order: 0; }
  .hero-copy h1 { order: 1; }
  .hero-emotion { order: 2; }
  .hero-ai-badge {
    position: static;
    order: 3;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    margin: 8px 0 0;
    padding: 8px 10px;
    border: 1px solid rgba(155,242,255,.24);
    border-radius: 12px;
    background: rgba(5,18,42,.72);
    color: #dffcff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  }
  .hero-ai-badge svg {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: #71e9fa;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .hero-ai-badge span { display: grid; gap: 2px; }
  .hero-ai-badge b { color: #8fefff; font-size: 11px; line-height: 1.1; }
  .hero-ai-badge small { color: rgba(255,255,255,.72); font-size: 10px; line-height: 1.25; }
  .hero-text { order: 4; }
  .hero-evidence-flow {
    order: 5;
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    margin-top: 12px;
    padding: 7px 6px 6px;
    border: 1px solid rgba(155,242,255,.22);
    border-radius: 13px;
    background: rgba(5,18,42,.72);
  }
  .hero-evidence-flow span {
    position: relative;
    display: grid;
    grid-template-rows: 27px auto;
    justify-items: center;
    gap: 4px;
    padding: 0 3px;
    color: rgba(255,255,255,.75);
    font-size: 8px;
    line-height: 1.1;
    text-align: center;
  }
  .hero-evidence-flow span:not(.is-result)::after {
    content: "→";
    position: absolute;
    top: 5px;
    right: -7px;
    color: rgba(155,242,255,.65);
    font-size: 14px;
    line-height: 1;
  }
  .hero-evidence-flow svg {
    width: 26px;
    height: 26px;
    padding: 5px;
    border: 1px solid rgba(155,242,255,.42);
    border-radius: 50%;
    background: #0a264b;
    color: #9bf2ff;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .hero-evidence-flow span:first-child svg,
  .hero-evidence-flow .is-result svg { border-color: rgba(255,200,87,.52); color: #ffc857; }
  .hero-evidence-flow .is-result b { color: #fff0a8; }
  .hero-evidence-tagline {
    grid-column: 1 / -1;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(155,242,255,.12);
    color: rgba(255,255,255,.9);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
  }
  .hero-actions { order: 6; }
  .hero-quick-benefits {
    order: 7;
    display: grid;
    gap: 8px;
    margin-top: 16px;
    color: #8fefff;
    font-size: 12px;
  }
  .hero-quick-benefits span::before { content: "✓"; margin-right: 8px; color: #58f1dc; }
  .value-row-title { margin: 22px 0 10px; text-align: center; font-weight: 900; }
}

@media (prefers-reduced-motion: reduce) {
  #interet .persona-card,
  #interet .flow-strip span { transition: none; }
}

/* Origin story — keeps the section focused on the company problem and its four convictions. */
.origin-story-card {
  width: min(660px, 100%);
  padding: 34px;
  border-color: rgba(113, 233, 250, .34);
  border-radius: 18px;
  background:
    radial-gradient(circle at 92% 8%, rgba(255, 200, 87, .12), transparent 28%),
    linear-gradient(145deg, rgba(9, 38, 72, .98), rgba(3, 15, 34, .99));
  box-shadow: 0 30px 80px rgba(0, 0, 0, .52), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.origin-story-card .eyebrow {
  margin: 0;
  color: #8fefff;
}
.origin-story-card h2 {
  margin: 8px 44px 16px 0;
  color: #f7fbff;
  font-size: 30px;
  line-height: 1.1;
}
.origin-story-card > p:not(.eyebrow) {
  margin: 0 0 12px;
  color: rgba(255, 255, 255, .78);
  font-size: 15px;
  line-height: 1.55;
}
.origin-story-card blockquote {
  margin: 20px 0;
  padding: 16px 18px;
  border-left: 3px solid #ffc857;
  border-radius: 0 12px 12px 0;
  background: linear-gradient(90deg, rgba(255, 200, 87, .13), rgba(113, 233, 250, .05));
  color: #fff0a8;
  font-size: 16px;
  font-weight: 750;
  line-height: 1.45;
}
.origin-story-dismiss {
  width: 100%;
  margin-top: 4px;
}
.origin-story-modal.is-visible .origin-story-card {
  animation: origin-story-enter .28s cubic-bezier(.2, .78, .28, 1) both;
}
@keyframes origin-story-enter {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (min-width: 761px) {
  #origine .landing-page-head { max-width: 1100px; }
  #origine .landing-page-head > p:last-child { max-width: 1080px; }
  #origine .origin-layout {
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
    gap: 18px;
    margin-top: clamp(30px, 4vh, 42px);
  }
  #origine .statement-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 22px;
    border-radius: 16px;
    background:
      radial-gradient(circle at 8% 0%, rgba(255, 200, 87, .08), transparent 34%),
      linear-gradient(145deg, rgba(5, 27, 57, .94), rgba(3, 16, 36, .91));
    box-shadow: 0 18px 46px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .06);
  }
  #origine .statement-card > span {
    align-self: flex-start;
    margin-bottom: 16px;
    padding: 5px 10px;
    border: 1px solid rgba(255, 200, 87, .5);
    border-radius: 999px;
    color: #fff0a8;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  #origine .statement-card p {
    margin: 0 0 13px;
    color: rgba(255, 255, 255, .76);
    font-size: 13px;
    line-height: 1.4;
  }
  #origine .statement-card .statement-conviction {
    margin-top: auto;
    padding: 11px 13px;
    border-left: 2px solid #ffc857;
    border-radius: 0 9px 9px 0;
    background: linear-gradient(90deg, rgba(255, 200, 87, .11), transparent);
    color: #fff0a8;
    font-weight: 750;
  }
  .origin-story-link {
    align-self: flex-start;
    margin-top: 10px;
    padding: 4px 0;
    border: 0;
    border-bottom: 1px solid rgba(143, 239, 255, .38);
    background: none;
    color: #8fefff;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
  }
  .origin-story-link::after {
    content: "→";
    margin-left: 8px;
  }
  .origin-story-link:is(:hover, :focus-visible) {
    color: #fff0a8;
    border-color: rgba(255, 200, 87, .65);
    outline: none;
  }
  #origine .reason-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto repeat(2, minmax(0, 1fr));
    gap: 11px 12px;
  }
  #origine .reason-grid-title {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 2px;
    color: #f7fbff;
    font-size: 19px;
    line-height: 1.1;
  }
  #origine .reason-grid-title::before {
    content: "";
    flex: 0 0 auto;
    width: 36px;
    height: 2px;
    border-radius: 99px;
    background: linear-gradient(90deg, #ffc857, #71e9fa);
  }
  #origine .reason-grid article {
    min-height: 0;
    padding: 17px 17px 14px 76px;
    border-radius: 15px;
    background:
      radial-gradient(circle at 100% 0%, rgba(113, 233, 250, .08), transparent 31%),
      linear-gradient(145deg, rgba(5, 27, 57, .92), rgba(3, 16, 36, .89));
    box-shadow: 0 15px 36px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .05);
  }
  #origine .reason-grid article > b {
    left: 17px;
    top: 17px;
    width: 30px;
    height: 30px;
    font-size: 15px;
  }
  #origine .reason-grid article .yl-icon {
    left: 36px;
    top: 58px;
    width: 36px;
    height: 36px;
  }
  #origine .reason-grid article h2 {
    margin: 0;
    font-size: 17px;
    line-height: 1.15;
  }
  #origine .reason-grid article p {
    margin: 8px 0 0;
    font-size: 11.5px;
    line-height: 1.35;
  }
  #origine .bottom-note {
    margin-top: 10px;
    border-radius: 14px;
  }
}

@media (max-width: 760px) {
  #origine .origin-layout {
    gap: 14px;
    margin-top: 26px;
  }
  #origine .statement-card {
    padding: 18px;
    border-radius: 16px;
  }
  #origine .statement-card p { font-size: 13px; }
  #origine .statement-conviction {
    padding: 10px 12px;
    border-left: 2px solid #ffc857;
    background: rgba(255, 200, 87, .08);
    color: #fff0a8;
    font-weight: 750;
  }
  .origin-story-link {
    margin-top: 8px;
    padding: 8px 0;
    border: 0;
    background: none;
    color: #8fefff;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
  }
  #origine .reason-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  #origine .reason-grid-title {
    margin: 4px 0 2px;
    color: #f7fbff;
    font-size: 18px;
  }
  #origine .reason-grid article { padding: 18px; }
  .origin-story-card { padding: 24px 20px; }
  .origin-story-card h2 { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .origin-story-modal.is-visible .origin-story-card { animation: none; }
}

.public-resource-grid {
  display: grid;
  gap: 14px;
}
.public-resource-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(113, 233, 250, .28);
  background:
    radial-gradient(circle at 100% 0%, rgba(113, 233, 250, .09), transparent 30%),
    linear-gradient(145deg, rgba(7, 34, 68, .94), rgba(3, 16, 36, .91));
  box-shadow: 0 18px 42px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.public-resource-card .yl-icon {
  color: #8fefff;
  border-color: rgba(113, 233, 250, .42);
  background: rgba(10, 48, 88, .78);
}
.public-resource-card > span {
  color: #fff0a8;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.public-resource-card h2 {
  color: #8fefff;
  line-height: 1.15;
}
.public-resource-card p {
  color: rgba(255, 255, 255, .72);
  line-height: 1.45;
}
.public-resource-card > :is(a, button) {
  align-self: flex-start;
  margin-top: auto;
  padding: 7px 0 4px;
  border: 0;
  border-bottom: 1px solid rgba(143, 239, 255, .38);
  background: none;
  color: #8fefff;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
  cursor: pointer;
}
.public-resource-card > :is(a, button)::after {
  content: "→";
  margin-left: 8px;
}
.public-resource-card > :is(a, button):is(:hover, :focus-visible) {
  color: #fff0a8;
  border-color: rgba(255, 200, 87, .65);
  outline: none;
}

@media (min-width: 761px) {
  #ressources .landing-page-head {
    max-width: 900px;
  }
  #ressources .public-resource-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: calc(clamp(62px, 8vh, 86px) + 5cm);
  }
  #ressources .public-resource-card {
    min-height: 242px;
    padding: 20px;
    border-radius: 16px;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  }
  #ressources .public-resource-card:is(:hover, :focus-within) {
    transform: translateY(-4px);
    border-color: rgba(113, 233, 250, .48);
    box-shadow: 0 24px 52px rgba(0, 0, 0, .34), 0 0 24px rgba(56, 213, 232, .1);
  }
  #ressources .public-resource-card .yl-icon {
    width: 42px;
    height: 42px;
    margin: 0 0 14px;
  }
  #ressources .public-resource-card h2 {
    margin: 7px 0 9px;
    font-size: 18px;
  }
  #ressources .public-resource-card p {
    margin: 0 0 16px;
    font-size: 12px;
  }
  #ressources .resource-bottom-note {
    margin-top: 14px;
    border-radius: 14px;
  }
}

@media (max-width: 760px) {
  #ressources .public-resource-grid {
    grid-template-columns: 1fr;
    margin-top: 28px;
  }
  #ressources .public-resource-card {
    min-height: 0;
    padding: 18px;
    border-radius: 16px;
  }
  #ressources .public-resource-card .yl-icon {
    width: 40px;
    height: 40px;
    margin: 0 0 12px;
  }
  #ressources .public-resource-card h2 {
    margin: 7px 0 8px;
    font-size: 18px;
  }
  #ressources .public-resource-card p {
    margin: 0 0 14px;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #ressources .public-resource-card { transition: none; }
}

/* Shared premium voice control across every narrated landing section. */
:is(#accueil, #interet, #preuve, #demonstration, #origine, #tarifs) .landing-voice-button {
  gap: 8px;
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid rgba(113, 233, 250, .34);
  border-radius: 11px;
  background:
    radial-gradient(circle at 18% 0%, rgba(113, 233, 250, .10), transparent 42%),
    linear-gradient(145deg, rgba(7, 34, 68, .88), rgba(3, 16, 36, .82));
  color: #8fefff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .01em;
  box-shadow:
    0 0 0 1px rgba(113, 233, 250, .03),
    0 8px 22px rgba(0, 0, 0, .16),
    inset 0 1px 0 rgba(255, 255, 255, .06);
  animation: yloria-voice-breathe 3.4s ease-in-out infinite;
}
:is(#accueil, #interet, #preuve, #demonstration, #origine, #tarifs) .landing-voice-button::before {
  content: "";
  flex: 0 0 auto;
  display: block;
  width: 18px;
  height: 18px;
  background: currentColor;
  transform-origin: center;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' d='M4 10v4m4-7v10m4-13v16m4-13v10m4-7v4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' d='M4 10v4m4-7v10m4-13v16m4-13v10m4-7v4'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: yloria-voice-wave 1.8s ease-in-out infinite;
}
:is(#accueil, #interet, #preuve, #demonstration, #origine, #tarifs) .landing-voice-button:is(:hover, :focus-visible) {
  border-color: rgba(255, 200, 87, .68);
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 200, 87, .12), transparent 42%),
    linear-gradient(145deg, rgba(10, 46, 84, .96), rgba(4, 22, 46, .92));
  color: #b7f7ff;
  box-shadow:
    0 0 0 1px rgba(255, 200, 87, .12),
    0 12px 30px rgba(0, 0, 0, .25),
    0 0 26px rgba(113, 233, 250, .20);
  animation-play-state: paused;
}
:is(#accueil, #interet, #preuve, #demonstration, #origine, #tarifs) .landing-voice-button:is(:hover, :focus-visible)::before {
  color: #fff0a8;
  filter: drop-shadow(0 0 6px rgba(255, 200, 87, .48));
  animation-duration: .9s;
}
:is(#accueil, #interet, #preuve, #demonstration, #origine, #tarifs) .landing-voice-button.is-speaking,
:is(#accueil, #interet, #preuve, #demonstration, #origine, #tarifs) .landing-voice-button[aria-pressed="true"] {
  border-color: rgba(255, 200, 87, .62);
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 200, 87, .14), transparent 40%),
    linear-gradient(145deg, rgba(9, 43, 80, .96), rgba(3, 18, 39, .94));
  color: #fff0a8;
  box-shadow:
    0 0 0 1px rgba(255, 200, 87, .12),
    0 0 30px rgba(113, 233, 250, .18),
    inset 0 1px 0 rgba(255, 255, 255, .08);
}
:is(#accueil, #interet, #preuve, #demonstration, #origine, #tarifs) .landing-voice-button.is-speaking::before,
:is(#accueil, #interet, #preuve, #demonstration, #origine, #tarifs) .landing-voice-button[aria-pressed="true"]::before {
  animation-duration: .62s;
  filter: drop-shadow(0 0 7px rgba(255, 200, 87, .55));
}
:is(#accueil, #interet, #preuve, #demonstration, #origine, #tarifs) .landing-voice-button:disabled {
  opacity: .7;
  animation: none;
}
:is(#accueil, #interet, #preuve, #demonstration, #origine, #tarifs) .landing-voice-button:disabled::before {
  animation: yloria-voice-loading .9s ease-in-out infinite;
}

@keyframes yloria-voice-breathe {
  0%, 100% {
    border-color: rgba(113, 233, 250, .28);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .16), 0 0 0 rgba(113, 233, 250, 0), inset 0 1px 0 rgba(255, 255, 255, .06);
  }
  50% {
    border-color: rgba(113, 233, 250, .46);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18), 0 0 18px rgba(113, 233, 250, .14), inset 0 1px 0 rgba(255, 255, 255, .07);
  }
}
@keyframes yloria-voice-wave {
  0%, 100% { opacity: .72; transform: scaleY(.78); }
  50% { opacity: 1; transform: scaleY(1.08); }
}
@keyframes yloria-voice-loading {
  0%, 100% { opacity: .42; transform: scaleY(.6); }
  50% { opacity: 1; transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  :is(#accueil, #interet, #preuve, #demonstration, #origine, #tarifs) .landing-voice-button,
  :is(#accueil, #interet, #preuve, #demonstration, #origine, #tarifs) .landing-voice-button::before {
    animation: none;
  }
}

/* Final contrast and hierarchy pass. */
#demonstration .demo-route-step {
  opacity: .88;
}
#demonstration .demo-route-step b {
  color: #dffcff;
  font-size: 13px;
  font-weight: 900;
  text-shadow: 0 1px 7px rgba(2, 11, 29, .92), 0 0 12px rgba(2, 11, 29, .55);
}
#demonstration .demo-route-step em {
  color: rgba(255, 255, 255, .90);
  font-size: 11px;
  font-weight: 650;
  text-shadow: 0 1px 7px rgba(2, 11, 29, .96), 0 0 12px rgba(2, 11, 29, .62);
}
#demonstration .demo-route-step.is-active b {
  color: #fff0a8;
}

#ressources .public-resource-card > :is(a, button) {
  padding: 9px 0 5px;
  font-size: 13.5px;
  line-height: 1.2;
}

#tarifs .pricing-actions .pricing-quote {
  border-color: rgba(143, 239, 255, .48);
  background: rgba(5, 22, 47, .76);
  color: #b7f7ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
#tarifs .pricing-actions .pricing-subscribe {
  min-height: 36px;
  padding: 7px 11px;
  border-color: rgba(143, 239, 255, .16);
  background: rgba(5, 18, 42, .34);
  color: rgba(223, 252, 255, .68);
  font-size: 11px;
  font-weight: 750;
  box-shadow: none;
}
#tarifs .pricing-actions .pricing-subscribe:is(:hover, :focus-visible) {
  border-color: rgba(143, 239, 255, .34);
  background: rgba(8, 31, 58, .72);
  color: #b7f7ff;
  box-shadow: 0 0 18px rgba(113, 233, 250, .10);
}

.site-footer {
  display: grid;
  grid-template-columns: minmax(220px, .8fr) minmax(260px, 1fr) minmax(360px, 1.4fr);
  align-items: center;
  gap: 24px 38px;
  width: 100%;
  margin: 0;
  padding: 24px 54px 18px;
  border: 0;
  border-top: 1px solid rgba(143, 239, 255, .18);
  border-radius: 0;
  background:
    radial-gradient(circle at 20% 0%, rgba(113, 233, 250, .07), transparent 28%),
    #020b1d;
  color: rgba(255, 255, 255, .68);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 11px;
}
.footer-brand img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}
.footer-brand > div {
  display: grid;
  gap: 2px;
}
.footer-brand strong {
  color: #f7fbff;
  font-size: 15px;
}
.footer-brand span {
  color: #8fefff;
  font-size: 11px;
  font-weight: 750;
}
.footer-trust {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 3px 9px;
  padding-left: 20px;
  border-left: 1px solid rgba(143, 239, 255, .16);
}
.footer-trust > span:first-child {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #dffcff;
  font-size: 12px;
}
.footer-trust > span:nth-child(2) {
  grid-column: 1 / -1;
  color: rgba(255, 255, 255, .76);
  font-size: 11px;
  font-weight: 750;
}
.footer-trust small {
  grid-column: 1 / -1;
  color: rgba(255, 255, 255, .48);
  font-size: 10px;
}
.footer-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #58f1dc;
  box-shadow: 0 0 10px rgba(88, 241, 220, .62);
}
.site-footer nav {
  display: flex;
  justify-content: flex-end;
  gap: 10px 18px;
  flex-wrap: wrap;
}
.site-footer nav :is(a, button) {
  padding: 2px 0;
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  color: rgba(255, 255, 255, .70);
  font: inherit;
  font-size: 11px;
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
}
.site-footer nav :is(a, button):is(:hover, :focus-visible) {
  border-bottom-color: rgba(143, 239, 255, .48);
  color: #8fefff;
  outline: none;
}
.footer-copyright {
  grid-column: 1 / -1;
  margin: -2px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(143, 239, 255, .09);
  color: rgba(255, 255, 255, .38);
  font-size: 10px;
  text-align: center;
}

@media (max-width: 900px) {
  .site-footer {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 18px;
    width: 100%;
    padding: 24px 20px 18px;
  }
  .footer-trust {
    padding: 14px 0 0;
    border-top: 1px solid rgba(143, 239, 255, .14);
    border-left: 0;
  }
  .site-footer nav {
    justify-content: flex-start;
  }
  .footer-copyright {
    width: 100%;
    text-align: left;
  }
}

#accueil .hero-home-voice {
  order: 4;
  align-self: flex-start;
  min-height: 34px;
  margin: 4px 0 8px;
  padding: 7px 11px;
  font-size: 12px;
}

@media (max-width: 760px) {
  #accueil .hero-home-voice {
    width: fit-content;
    margin-top: 8px;
  }
}

.btn.platform-pending:disabled,
.header-login.platform-pending:disabled {
  border-color: rgba(176, 188, 207, .28);
  background: linear-gradient(135deg, rgba(109, 122, 143, .66), rgba(72, 86, 109, .72));
  color: rgba(236, 241, 248, .66);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 8px 20px rgba(0, 0, 0, .16);
  cursor: not-allowed;
  filter: saturate(.28);
  opacity: .78;
  transform: none;
}

.btn.platform-pending:disabled::after,
.header-login.platform-pending:disabled::after {
  display: none;
}