@import url("yloria-design-tokens.css?v=20260628-ui-assets-v01");

:root {
  --bg: #020817;
  --panel: rgba(7, 27, 58, .78);
  --panel2: rgba(5, 18, 38, .88);
  --line: rgba(91, 224, 255, .32);
  --cyan: #66efff;
  --gold: #ffd45f;
  --white: #f7fbff;
  --muted: rgba(242, 248, 255, .78);
  --max: 1810px;
  --pad: clamp(22px, 4vw, 54px);
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--white); scroll-behavior: smooth; }
body.marketing-page {
  overflow-x: hidden;
  background:
    radial-gradient(circle at 72% 10%, rgba(20, 132, 255, .24), transparent 30%),
    radial-gradient(circle at 20% 62%, rgba(255, 212, 95, .08), transparent 24%),
    linear-gradient(180deg, #031024, #020817 62%, #01040c);
}
a { color: inherit; }

.site-header, .site-footer {
  width: min(var(--max), calc(100% - 28px));
  margin: 14px auto 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(2, 10, 24, .78);
  backdrop-filter: blur(18px);
}
.site-header {
  position: sticky;
  top: 12px;
  z-index: 20;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
  min-height: 72px;
  padding: 10px 24px;
}
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { width: 44px; height: 44px; filter: drop-shadow(0 0 18px rgba(102,239,255,.72)); }
.brand span { display: grid; gap: 2px; }
.brand strong { font-size: 22px; line-height: 1; }
.brand small, .eyebrow { color: var(--cyan); font-size: 13px; font-weight: 950; letter-spacing: 0; text-transform: uppercase; }
.site-header nav, .site-footer nav { display: flex; justify-content: center; gap: clamp(14px, 2.4vw, 40px); }
.site-header nav a, .site-footer nav a { color: rgba(247,251,255,.78); font-size: 15px; font-weight: 850; text-decoration: none; }
.site-header nav a:hover, .site-footer nav a:hover { color: var(--cyan); }
.header-actions, .pricing-actions, .landing-contact-actions { display: flex; gap: 12px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.public-language-control {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 12px;
  border: 1px solid rgba(102,239,255,.28); border-radius: 8px; background: rgba(6,22,47,.82); color: var(--muted);
  font-size: 12px; font-weight: 900;
}
.public-language-control select { border: 0; outline: 0; background: transparent; color: var(--white); font: inherit; }
.public-language-control option { color: #061226; }
.header-login, .btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 11px 18px;
  border: 1px solid rgba(102,239,255,.38); border-radius: 8px; background: rgba(6,22,47,.78);
  color: var(--cyan); font-weight: 950; text-decoration: none; white-space: nowrap; cursor: pointer;
  transform: translateZ(0);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease, color .22s ease;
}
.btn.primary, .header-login:hover { border-color: rgba(255,212,95,.82); background: linear-gradient(135deg, #ffe57b, #9effff); color: #041224; box-shadow: 0 0 28px rgba(102,239,255,.24); }
.header-login::after, .btn::after, .landing-voice-button::after, .login-demo-button::after, .public-demo-close::after, .landing-contact-close::after {
  content: ""; position: absolute; top: -70%; bottom: -70%; left: -52%; width: 42%; pointer-events: none;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.18) 28%, rgba(255,255,255,.62) 50%, rgba(102,239,255,.18) 72%, transparent 100%);
  opacity: 0; transform: translateX(-160%) rotate(18deg); mix-blend-mode: screen;
}
.header-login:hover, .header-login:focus-visible, .btn:hover, .btn:focus-visible, .landing-voice-button:hover, .landing-voice-button:focus-visible, .login-demo-button:hover, .login-demo-button:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255,212,95,.78);
  box-shadow: 0 0 0 1px rgba(255,212,95,.2), 0 0 28px rgba(102,239,255,.28), 0 0 46px rgba(255,212,95,.16);
}
.header-login:hover::after, .header-login:focus-visible::after, .btn:hover::after, .btn:focus-visible::after, .landing-voice-button:hover::after, .landing-voice-button:focus-visible::after, .login-demo-button:hover::after, .login-demo-button:focus-visible::after, .public-demo-close:hover::after, .public-demo-close:focus-visible::after, .landing-contact-close:hover::after, .landing-contact-close:focus-visible::after {
  opacity: 1; transform: translateX(520%) rotate(18deg); transition: transform .78s cubic-bezier(.18,.85,.32,1), opacity .16s ease;
}
.header-login:active, .btn:active, .landing-voice-button:active, .login-demo-button:active { transform: translateY(0) scale(.98); }
.header-login:focus-visible, .btn:focus-visible, .landing-voice-button:focus-visible, .login-demo-button:focus-visible, .public-demo-close:focus-visible, .landing-contact-close:focus-visible { outline: 2px solid rgba(255,212,95,.75); outline-offset: 3px; }
.btn:disabled, .landing-voice-button:disabled, .login-demo-button:disabled { transform: none; box-shadow: none; }
.btn:disabled::after, .landing-voice-button:disabled::after, .login-demo-button:disabled::after { display: none; }

.landing-site { display: grid; gap: 36px; padding: 18px 0 36px; }
.landing-page {
  position: relative; overflow: hidden; width: 100%; min-height: min(936px, calc(100vh - 118px));
  margin: 0; padding: var(--pad); border: 1px solid rgba(102,239,255,.32); border-left: 0; border-right: 0; border-radius: 0;
  background: linear-gradient(135deg, rgba(3,13,30,.72), rgba(5,23,48,.9)), radial-gradient(circle at 82% 13%, rgba(10,130,235,.33), transparent 34%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 28px 90px rgba(0,0,0,.35);
}
.landing-page::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(3,13,30,.98) 0%, rgba(3,13,30,.72) 36%, rgba(3,13,30,.12) 68%),
    radial-gradient(circle at 84% 42%, rgba(255,212,95,.15), transparent 23%);
}
.landing-page > * { position: relative; z-index: 1; }
.page-art {
  position: absolute; z-index: 0; inset: clamp(32px, 5vh, 64px) -42px auto auto; width: min(1120px, 62vw); height: min(520px, 58vh);
  background: none; opacity: .88; pointer-events: none;
  filter: saturate(1.08) contrast(1.03);
  -webkit-mask-image: radial-gradient(ellipse at 64% 48%, #000 0 44%, rgba(0,0,0,.82) 55%, rgba(0,0,0,.32) 68%, transparent 82%);
  mask-image: radial-gradient(ellipse at 64% 48%, #000 0 44%, rgba(0,0,0,.82) 55%, rgba(0,0,0,.32) 68%, transparent 82%);
}
.page-art-symbol { background: none; }
.page-art-proof { background: none; opacity: .82; }
.page-art-journey { background: none; opacity: .86; }
.pricing-art { height: min(520px, 58vh); background: none; opacity: .9; }
#interet {
  background:
    url("yloria-site-interest-premium.webp?v=20260722-landing-coast1") center top / 100% auto no-repeat,
    #020b1d;
}
#interet .page-art-symbol {
  display: none;
}
#preuve {
  background:
    url("yloria-site-proof-premium.webp?v=20260722-landing-coast1") center top / 100% auto no-repeat,
    #020b1d;
}
#preuve .page-art-proof {
  display: none;
}
#demonstration {
  background:
    url("yloria-site-demo-premium.webp?v=20260722-landing-coast1") center top / 100% auto no-repeat,
    #020b1d;
}
#demonstration .route-art::before {
  display: none;
}
#origine {
  background:
    url("yloria-site-origin-premium.webp?v=20260722-landing-coast1") center top / 100% auto no-repeat,
    #020b1d;
}
#origine .page-art-journey {
  display: none;
}
#tarifs {
  background:
    url("yloria-site-pricing-premium.webp?v=20260722-landing-coast1") center top / 100% auto no-repeat,
    #020b1d;
}
#tarifs .pricing-art {
  display: none;
}
.landing-page-head { max-width: 990px; }
.eyebrow { margin: 0 0 22px; }
.pill { display: inline-flex; width: fit-content; padding: 6px 14px; border: 1px solid rgba(102,239,255,.3); border-radius: 999px; background: rgba(6,22,47,.65); }
h1, h2, h3, p { margin-top: 0; overflow-wrap: anywhere; }
h1 { margin-bottom: 18px; color: var(--white); font-size: clamp(44px, 5.2vw, 82px); line-height: 1.02; letter-spacing: 0; }
h1 strong { color: var(--gold); font-weight: 950; }
.landing-page-head p { max-width: 1040px; color: var(--muted); font-size: clamp(18px, 1.45vw, 24px); line-height: 1.45; }
.landing-page-head b { color: var(--white); }
.landing-voice-button {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; gap: 10px; align-items: center; min-height: 48px; margin: 8px 0 24px; padding: 10px 18px;
  border: 1px solid rgba(102,239,255,.36); border-radius: 8px; background: rgba(6,22,47,.72); color: var(--cyan);
  font: inherit; font-weight: 950; cursor: pointer;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease, color .22s ease;
}

.persona-grid, .metric-grid, .demo-grid, .offer-grid, .reason-grid { display: grid; gap: 16px; }
.persona-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 22px; }
#interet .persona-grid { margin-top: clamp(150px, 20vh, 220px); }
.glass-card, .story-card, .screen-card, .statement-card, .included-card, .reason-grid article, .bottom-note {
  border: 1px solid var(--line); border-radius: 8px;
  background: linear-gradient(145deg, rgba(12,45,83,.62), rgba(4,16,36,.74)), rgba(5,23,48,.66);
  box-shadow: inset 0 0 46px rgba(102,239,255,.04);
}
.glass-card { min-height: 250px; padding: 28px 30px; }
.glass-card span, .statement-card span, .screen-card > span, .metric-card > span {
  display: inline-flex; width: fit-content; margin-bottom: 16px; padding: 6px 14px; border: 1px solid rgba(255,212,95,.58);
  border-radius: 999px; color: var(--gold); font-size: 15px; font-weight: 950; text-transform: uppercase;
}
.glass-card h2, .story-card h2, .screen-card h2, .metric-card h2, .reason-grid h2 { color: var(--cyan); font-size: clamp(22px, 1.75vw, 31px); line-height: 1.12; }
.glass-card p, .story-card p, .screen-card p, .metric-card p, .statement-card p, .reason-grid p { color: var(--muted); font-size: clamp(16px, 1.15vw, 21px); line-height: 1.42; }

.yl-icon {
  display: inline-grid; place-items: center; width: 78px; height: 78px; border: 1px solid rgba(102,239,255,.5); border-radius: 50%;
  background: radial-gradient(circle at 50% 24%, rgba(102,239,255,.18), rgba(4,16,36,.8)); color: var(--cyan);
  box-shadow: inset 0 0 26px rgba(102,239,255,.13), 0 0 24px rgba(10,167,232,.18);
}
.yl-icon::before { content: ""; width: 44%; height: 44%; background: currentColor; mask: var(--icon) center/contain no-repeat; }
.user { --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='2' d='M20 21a8 8 0 0 0-16 0M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z'/%3E%3C/svg%3E"); }
.growth { --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='2' d='M3 20h18M5 16l5-5 4 4 6-9M15 6h5v5M7 20v-4M12 20v-7M17 20v-5'/%3E%3C/svg%3E"); }
.lock { --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='2' d='M6 10V8a6 6 0 1 1 12 0v2M5 10h14v11H5z'/%3E%3C/svg%3E"); }
.briefcase { --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='2' d='M10 6V5a2 2 0 0 1 4 0v1M3 7h18v13H3zM3 12h18'/%3E%3C/svg%3E"); }
.eye { --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='2' d='M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12Zm10 3a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E"); }
.target { --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='2' d='M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm0-4a5 5 0 1 0 0-10 5 5 0 0 0 0 10ZM3 12h3m12 0h3M12 3v3m0 12v3'/%3E%3C/svg%3E"); }
.clipboard { --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='2' d='M9 3h6l1 2h3v16H5V5h3l1-2Zm0 8h6M9 15h6M9 19h4'/%3E%3C/svg%3E"); }
.bars { --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='2' d='M4 20V10m6 10V4m6 16v-7m4 7H3'/%3E%3C/svg%3E"); }
.check { --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='2.4' d='m5 12 5 5L20 7'/%3E%3C/svg%3E"); }
.users { --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='2' d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm13 10v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
.chat { --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='2' d='M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4v8Z'/%3E%3C/svg%3E"); }
.star { --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='2' d='m12 3 2.7 5.5 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.8 1-6.1-4.4-4.3 6.1-.9L12 3Z'/%3E%3C/svg%3E"); }
.rocket { --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='2' d='M12 15 9 12a22 22 0 0 1 2-4 13 13 0 0 1 11-6c0 3-.8 7.6-6 11a22 22 0 0 1-4 2ZM9 12H4l3-3h4m1 6v5l3-3v-4'/%3E%3C/svg%3E"); }
.flag { --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='2' d='M5 22V4m0 0h12l-2 5 2 5H5'/%3E%3C/svg%3E"); }
.shield { --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='2' d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Zm-3-10 2 2 4-4'/%3E%3C/svg%3E"); }
.building { --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='2' d='M3 21h18M5 21V5h10v16m4 0V9h-4M8 9h2m0 4H8m0 4h2'/%3E%3C/svg%3E"); }

.flow-strip { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); align-items: center; gap: 20px; margin-top: 18px; padding: 22px 28px; border: 1px solid var(--line); border-radius: 8px; background: rgba(5,23,48,.66); }
.flow-strip span, .route-art span { position: relative; display: grid; justify-items: center; gap: 10px; text-align: center; }
.flow-strip span:not(:last-child)::after, .route-art span:not(:last-child)::after { content: ""; position: absolute; top: 35px; left: calc(50% + 56px); width: calc(100% - 84px); height: 2px; background: linear-gradient(90deg,var(--cyan),rgba(102,239,255,.16)); box-shadow: 0 0 14px rgba(102,239,255,.8); }
.flow-strip b, .route-art b { color: var(--white); font-size: 18px; line-height: 1.15; }
.gold b, .gold .yl-icon { color: var(--gold); border-color: rgba(255,212,95,.75); }

.story-lane { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 52px; margin-top: 22px; }
.story-card { position: relative; min-height: 260px; padding: 28px 34px; }
.story-card:not(:last-child)::after { content: "→"; position: absolute; top: 42px; right: -43px; color: var(--cyan); font-size: 46px; text-shadow: 0 0 18px rgba(102,239,255,.9); }
.story-card > span { display: inline-grid; place-items: center; width: 68px; height: 68px; border: 1px solid rgba(255,212,95,.72); border-radius: 50%; color: var(--gold); font-size: 28px; font-weight: 950; }
.story-card .yl-icon { width: 68px; height: 68px; margin-bottom: 16px; }
.story-card.result .yl-icon { color: var(--gold); border-color: rgba(255,212,95,.72); }
.compare-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 24px; }
.compare-row .glass-card { min-height: 116px; padding: 20px 28px; }
.compare-row .highlight { border-color: rgba(255,212,95,.7); }
.metric-grid { grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 18px; }
.metric-card { min-height: 232px; padding: 24px 28px; border: 1px solid var(--line); border-radius: 8px; background: rgba(5,23,48,.68); }
.metric-card .yl-icon { float: left; width: 70px; height: 70px; margin-right: 18px; }
.scores { clear: both; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; margin-top: 14px; }
.scores b { min-height: 74px; padding: 12px; border: 1px solid rgba(102,239,255,.18); border-radius: 8px; background: rgba(3,13,30,.55); color: var(--white); font-size: 13px; text-transform: uppercase; }
.scores em { display: block; margin-top: 12px; color: var(--cyan); font-size: 18px; font-style: normal; }
.scores b:last-child em { color: var(--gold); }

.route-art { position: absolute; top: 58px; right: var(--pad); z-index: 0; display: grid; grid-template-columns: repeat(5,minmax(90px,140px)); gap: 30px; width: min(780px,52vw); padding-top: 18px; }
.route-art::before { display: none; }
.route-art .yl-icon { width: 72px; height: 72px; }
.route-art b { color: var(--cyan); text-transform: uppercase; }
.route-art em { color: var(--muted); font-style: normal; line-height: 1.3; }
.demo-grid { grid-template-columns: .95fr 1.05fr; margin-top: 90px; }
.screen-card { min-height: 310px; padding: 26px 28px; }
.screen-card > span { color: var(--cyan); border-color: rgba(102,239,255,.46); }
.screen-card h2 { color: var(--gold); }
.fake-table { display: grid; grid-template-columns: 1.4fr .5fr 1.5fr; gap: 3px; margin: 14px 0 18px; padding: 14px; border: 1px solid rgba(102,239,255,.24); border-radius: 8px; background: rgba(3,13,30,.44); }
.fake-table > * { margin: 0; padding: 10px 12px; border-radius: 6px; background: rgba(8,30,61,.44); font-style: normal; }
.fake-table strong { color: var(--gold); font-size: 22px; }
.fake-table em { color: var(--cyan); font-weight: 900; }
.bar-set { display: grid; gap: 16px; margin: 18px 0; }
.bar-set label { display: grid; grid-template-columns: 150px 1fr; align-items: center; color: var(--white); font-weight: 800; }
.bar-set i { position: relative; height: 11px; border-radius: 999px; background: rgba(102,239,255,.12); }
.bar-set i::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: linear-gradient(90deg,var(--gold),var(--cyan)); }
mark { display: block; padding: 16px 18px; border: 1px solid rgba(255,212,95,.7); border-radius: 8px; background: rgba(255,212,95,.08); color: var(--gold); font-weight: 950; }
.mini-steps { counter-reset: step; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; padding: 0; list-style: none; }
.mini-steps li { min-height: 104px; padding: 42px 12px 12px; border: 1px solid rgba(102,239,255,.24); border-radius: 8px; color: var(--cyan); font-weight: 900; text-align: center; counter-increment: step; }
.mini-steps li::before { content: counter(step); display: grid; place-items: center; width: 28px; height: 28px; margin: -28px auto 14px; border-radius: 50%; background: #fff0ae; color: #061226; }
.kpi-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 20px 0; }
.kpi-row b { display: grid; place-items: center; min-height: 120px; border: 1px solid rgba(102,239,255,.24); border-radius: 8px; color: var(--gold); font-size: 58px; }
.kpi-row small { color: var(--cyan); font-size: 16px; text-align: center; }

.origin-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 32px; margin-top: 92px; }
.statement-card { padding: 32px; border-color: rgba(255,212,95,.7); }
.reason-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.reason-grid article { position: relative; min-height: 224px; padding: 34px 34px 28px 132px; }
.reason-grid b { position: absolute; left: 30px; top: 30px; display: grid; place-items: center; width: 40px; height: 40px; border: 2px solid var(--gold); border-radius: 50%; color: var(--gold); font-size: 24px; }
.reason-grid .yl-icon { position: absolute; left: 56px; top: 84px; width: 70px; height: 70px; }
.pricing-head { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 24px; align-items: start; }
.included-card { margin-top: 70px; padding: 26px 38px; border-color: rgba(102,239,255,.5); }
.included-card h2 { color: var(--gold); font-size: 26px; }
.included-card ul { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px 16px; padding: 0; list-style: none; }
.included-card li { min-height: 66px; display: flex; align-items: center; gap: 16px; padding: 12px 16px; border: 1px solid rgba(102,239,255,.22); border-radius: 8px; background: rgba(3,13,30,.44); color: var(--white); font-weight: 950; }
.included-card li::before { content: "✓"; color: #62ffb4; font-size: 22px; }
.offer-grid { grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 26px; }
.offer-grid .glass-card { min-height: 216px; padding-left: 142px; }
.offer-grid .yl-icon { position: absolute; margin-left: -108px; color: var(--gold); }
.bottom-note { display: flex; gap: 18px; align-items: center; min-height: 64px; margin: 16px 0 0; padding: 16px 28px; color: var(--white); font-size: clamp(18px,1.3vw,23px); line-height: 1.35; }
.bottom-note b, .bottom-note span:last-child { color: var(--cyan); }
.bottom-note .yl-icon { flex: 0 0 auto; width: 52px; height: 52px; }

.marketing-page.is-modal-open { overflow: hidden; }
.public-demo-overlay {
  position: fixed; inset: 0; z-index: 120; display: none; place-items: center; padding: 28px;
  background: rgba(2,10,24,.78); backdrop-filter: blur(10px);
}
.public-demo-overlay.is-visible { display: grid; }
.public-demo-card {
  width: min(860px,100%); border: 1px solid rgba(255,212,95,.58); border-radius: 8px;
  background: linear-gradient(135deg, rgba(8,28,60,.98), rgba(6,18,38,.98));
  box-shadow: 0 30px 90px rgba(0,0,0,.52), 0 0 36px rgba(255,212,95,.18);
}
.subscription-card {
  width: min(1080px, calc(100vw - 56px)); max-height: min(900px, calc(100dvh - 56px));
  display: flex; flex-direction: column; overflow: hidden;
}
.public-demo-head {
  display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; flex-shrink: 0;
  padding: 28px 28px 10px;
}
.login-kicker {
  margin: 0 0 8px; color: var(--cyan); font-size: 13px; font-weight: 950; text-transform: uppercase;
}
.public-demo-head h2 { margin: 0 0 10px; color: var(--gold); font-size: clamp(30px,3.2vw,42px); line-height: 1.05; }
.public-demo-head p { color: var(--muted); line-height: 1.46; font-weight: 780; }
.public-demo-close {
  position: relative; overflow: hidden; isolation: isolate;
  flex: 0 0 auto; width: 38px; height: 38px; border: 1px solid rgba(255,212,95,.38); border-radius: 50%;
  background: rgba(255,212,95,.12); color: var(--gold); cursor: pointer; font-size: 22px; font-weight: 950;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
.public-demo-close:hover, .public-demo-close:focus-visible, .landing-contact-close:hover, .landing-contact-close:focus-visible {
  transform: translateY(-1px) scale(1.04);
  border-color: rgba(255,212,95,.78);
  box-shadow: 0 0 24px rgba(102,239,255,.22), 0 0 24px rgba(255,212,95,.14);
}
.subscription-body {
  min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 0 28px 14px;
}
.public-demo-footer {
  display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; flex-shrink: 0;
  padding: 14px 28px 22px; border-top: 1px solid rgba(102,239,255,.18);
  background: linear-gradient(180deg, rgba(6,18,38,.78), rgba(6,18,38,.98));
  box-shadow: 0 -18px 32px rgba(2,10,24,.32);
}
.subscription-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 18px 0; }
.subscription-offer {
  position: relative; display: grid; gap: 8px; padding: 16px; border: 1px solid rgba(102,239,255,.26);
  border-radius: 8px; background: rgba(12,38,78,.62); cursor: pointer;
}
.subscription-offer input { position: absolute; opacity: 0; pointer-events: none; }
.subscription-offer strong { color: var(--gold); font-size: 20px; font-weight: 950; }
.subscription-offer span { color: var(--muted); font-size: 13px; font-weight: 800; line-height: 1.42; }
.subscription-offer b { color: var(--cyan); font-size: 14px; font-weight: 950; }
.subscription-offer:has(input:checked) {
  border-color: rgba(255,212,95,.78); box-shadow: 0 0 0 1px rgba(255,212,95,.24), 0 0 28px rgba(255,212,95,.16);
}
.subscription-form { display: grid; gap: 12px; margin-top: 12px; }
.subscription-form label {
  display: grid; gap: 7px; color: var(--gold); font-size: 12px; font-weight: 950; text-transform: uppercase;
}
.subscription-form input {
  min-height: 46px; border: 1px solid rgba(102,239,255,.42); border-radius: 8px; padding: 0 14px;
  background: rgba(5,18,42,.94); color: var(--white); font: inherit; font-size: 15px; font-weight: 800; outline: 0;
}
.subscription-note { margin: 6px 0 0; color: rgba(247,251,255,.68); font-size: 12px; font-weight: 800; line-height: 1.45; }
.subscription-contract-check {
  grid-template-columns: auto minmax(0,1fr); gap: 10px; align-items: flex-start; padding: 12px;
  border: 1px solid rgba(255,212,95,.36); border-radius: 8px; background: rgba(255,212,95,.08);
  color: var(--muted); font-size: 12px; font-weight: 820; line-height: 1.4; cursor: pointer;
}
.subscription-contract-check input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--gold); }
.login-demo-button {
  position: relative; overflow: hidden; isolation: isolate; min-height: 46px; padding: 0 18px; border: 1px solid rgba(255,212,95,.36); border-radius: 8px;
  background: rgba(8,28,60,.72); color: var(--gold); font: inherit; font-size: 13px; font-weight: 950; cursor: pointer;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease, color .22s ease;
}
.login-demo-button.primary { border-color: rgba(255,212,95,.72); background: linear-gradient(135deg, rgba(255,212,95,.92), rgba(102,239,255,.9)); color: #061223; }
.login-demo-button:disabled { cursor: not-allowed; opacity: .62; }
.login-error { min-height: 20px; margin: 0; color: #ff9aa2; font-size: 13px; font-weight: 850; }

.landing-contact-modal { position: fixed; inset: 0; z-index: 100; display: none; place-items: center; padding: 24px; }
.landing-contact-modal.is-visible { display: grid; }
.landing-contact-backdrop { position: absolute; inset: 0; border: 0; background: rgba(0,0,0,.64); }
.landing-contact-card { position: relative; width: min(760px,100%); max-height: calc(100vh - 48px); overflow: auto; padding: 30px; border: 1px solid var(--line); border-radius: 8px; background: #061226; }
.landing-contact-close { position: absolute; top: 14px; right: 14px; overflow: hidden; isolation: isolate; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--white); font-size: 24px; cursor: pointer; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease; }
.landing-contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.landing-contact-form label, .landing-contact-form fieldset { display: grid; gap: 7px; color: var(--muted); font-weight: 800; }
.landing-contact-form input, .landing-contact-form select, .landing-contact-form textarea { width: 100%; border: 1px solid rgba(102,239,255,.28); border-radius: 8px; background: rgba(3,13,30,.75); color: var(--white); padding: 12px; font: inherit; }
.landing-contact-form fieldset, .landing-contact-message, .landing-contact-status, .landing-contact-actions { grid-column: 1/-1; }
.landing-contact-hp { display: none!important; }
.landing-contact-field-error, .landing-contact-status[data-type="error"] { color: #ff8a8a; }
.landing-contact-status[data-type="success"] { color: #62ffb4; }
.site-footer { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 16px; padding: 16px 22px; color: var(--muted); }

@media (max-width: 1180px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-header nav { display: none; }
  .landing-page { min-height: auto; }
  .page-art, .route-art { opacity: .35; }
  .persona-grid, .story-lane, .metric-grid, .demo-grid, .origin-layout, .reason-grid, .included-card ul, .offer-grid, .pricing-head { grid-template-columns: 1fr 1fr; }
  .route-art { position: relative; top: auto; right: auto; width: 100%; margin-bottom: 24px; }
  .demo-grid, .origin-layout { margin-top: 28px; }
  #interet { background-position: center top; }
}
@media (max-width: 760px) {
  .site-header, .site-footer { width: calc(100% - 20px); }
  .site-header, .site-footer, .header-actions { display: grid; grid-template-columns: 1fr; justify-items: start; }
  .landing-site { gap: 18px; }
  .landing-page { width: 100%; padding: 24px 18px; }
  .page-art { width: 100%; opacity: .22; }
  #interet .persona-grid { margin-top: 24px; }
  h1 { font-size: 42px; }
  .persona-grid, .story-lane, .compare-row, .metric-grid, .demo-grid, .origin-layout, .reason-grid, .included-card ul, .offer-grid, .pricing-head, .flow-strip, .route-art, .mini-steps, .kpi-row, .landing-contact-form, .subscription-grid { grid-template-columns: 1fr; }
  .public-demo-overlay { padding: 14px; }
  .subscription-card { width: 100%; max-height: calc(100dvh - 28px); }
  .public-demo-head, .subscription-body, .public-demo-footer { padding-left: 18px; padding-right: 18px; }
  .public-demo-footer .login-demo-button { flex: 1 1 100%; }
  .flow-strip span:not(:last-child)::after, .route-art span:not(:last-child)::after, .story-card:not(:last-child)::after { display: none; }
  .glass-card, .story-card, .screen-card, .statement-card, .reason-grid article, .offer-grid .glass-card { min-height: auto; padding: 22px; }
  .offer-grid .yl-icon, .reason-grid .yl-icon, .reason-grid b { position: static; margin: 0 0 12px; }
  .scores { grid-template-columns: 1fr 1fr; }
}