:root {
  --purple: #970efb;
  --purple-dark: #7910c5;
  --ink: #0a0612;
  --muted: #635a6f;
  --paper: #f4f2ee;
  --line: #ded9e3;
  --display: 'forma-djr-text', 'Helvetica Neue', Arial, sans-serif;
  --body: 'forma-djr-text', 'Helvetica Neue', Arial, sans-serif;
  --container: 1280px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
button, input, summary { font: inherit; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
button, summary { cursor: pointer; }
a { color: inherit; text-underline-offset: 5px; }
img { display: block; max-width: 100%; }
button { color: inherit; }
button:disabled { cursor: default; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.04; letter-spacing: -.035em; text-wrap: balance; }
ul { margin: 0; padding: 0; list-style: none; }
svg { width: 22px; height: 22px; flex-shrink: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #ad52ed; outline-offset: 5px; }
.skip-link { position: fixed; z-index: 500; top: 12px; left: 24px; padding: 12px 20px; background: #fff; border-radius: 8px; transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.container { width: min(var(--container), calc(100% - 96px)); margin-inline: auto; }
.section { padding-block: 88px; }
.eyebrow { font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--muted); }
.accent { color: var(--purple); font-style: italic; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin: 20px 0 36px; }
.section-heading h2 { font-size: clamp(36px, 4.1vw, 58px); max-width: 760px; }
.section-heading > p { max-width: 360px; color: var(--muted); }
.text-link { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; text-decoration: none; }
.text-link:hover { color: var(--purple-dark); }
.text-link .arrow { transition: transform .2s; }
.text-link:hover .arrow { transform: translateX(4px); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 50px; padding: 13px 24px; border-radius: 100px; border: 1px solid transparent; font-size: 15px; font-weight: 600; text-decoration: none; line-height: 1.3; transition: background .2s, border-color .2s, transform .2s; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--purple); color: #fff; }
.btn-primary:hover { background: var(--purple-dark); }
.btn-outline { background: transparent; color: #fff; border-color: #696173; }
.btn-outline:hover { border-color: #fff; background: #ffffff0c; }
.btn-light { color: var(--ink); background: #fff; }
.btn-light:hover { background: #eee5f8; }
summary::-webkit-details-marker { display: none; }
.hero { position: relative; overflow: hidden; margin: 0 16px; border-radius: 0 0 40px 40px; background: radial-gradient(ellipse at 74% 15%, #41126877, transparent 60%), var(--ink); color: #fff; }
.hero-grid { display: grid; grid-template-columns: 1fr 1.05fr; align-items: center; gap: 48px; min-height: 740px; padding-block: 160px 72px; }
.hero .eyebrow { color: #c6bed1; margin-bottom: 24px; }
.hero h1 { font-size: clamp(42px, 4.65vw, 68px); line-height: 1.01; }
.hero-description { max-width: 490px; margin-top: 24px; color: #c6bed1; font-size: 18px; line-height: 1.55; }
.hero-description strong { color: #fff; font-weight: 400; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.hero-note { margin-top: 16px; color: #b6aabe; font-size: 13px; }
.hero-visual { min-width: 0; position: relative; }
.product-window { position: relative; padding: 16px 12px 12px; border: 1px solid #9465b251; border-radius: 20px; background: linear-gradient(145deg, #38214799, #1d1028); box-shadow: 0 28px 90px #0005; }
.window-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 0 5px 15px; color: #d9cbe4; font-size: 12px; }
.window-dots { display: flex; gap: 5px; }
.window-dots i { width: 6px; height: 6px; border-radius: 100%; background: #a79aaf; }
.window-dots i:first-child { background: #b15ce8; }
.trust { padding-block: 36px 42px; border-bottom: 1px solid var(--line); }
.trust-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.trust-top p { color: var(--muted); font-size: 13px; }
.logo-grid { display: grid; grid-template-columns: repeat(8, 1fr); align-items: center; gap: 24px; margin-top: 30px; }
.logo-grid div { display: flex; align-items: center; justify-content: center; min-height: 58px; }
.logo-grid img { max-width: 83px; width: auto; height: 49px; object-fit: contain; }
.logo-grid .wide img { max-width: 108px; height: 48px; }
.problem { padding-block: 64px; }
.problem-layout { display: grid; grid-template-columns: 1.2fr 2fr; gap: 70px; align-items: start; }
.problem h2 { font-size: clamp(30px, 3vw, 42px); margin-top: 18px; }
.problem-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.problem-list article { padding-left: 20px; border-left: 1px solid #d4cedb; }
.problem-list span { font-size: 12px; color: var(--purple-dark); }
.problem-list h3 { font-size: 21px; margin: 14px 0 12px; }
.problem-list p { font-size: 14px; color: var(--muted); }
.overview { margin-inline: 16px; border-radius: 36px; color: #fff; background: radial-gradient(ellipse at 100% 0%, #38125b80, transparent 58%), var(--ink); }
.overview .eyebrow { color: #bdb0c9; }
.overview .section-heading > p { color: #bdb0c9; }
.overview .section-heading h2 { max-width: 600px; }
.overview-links { display: flex; align-items: center; gap: 22px; flex-shrink: 0; }
.overview-links .text-link { color: #e3d9eb; }
.module-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid #ffffff26; border-left: 1px solid #ffffff26; margin-top: 36px; }
.module-card { min-width: 0; min-height: 194px; padding: 24px 22px; border-right: 1px solid #ffffff26; border-bottom: 1px solid #ffffff26; text-decoration: none; transition: background .2s; }
.module-card:hover { background: #ffffff09; }
.module-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 25px; color: #bfa8d0; font-size: 12px; }
.module-card-top svg { color: #c080f0; width: 23px; height: 23px; }
.module-card h3 { font-size: 21px; letter-spacing: -.02em; }
.module-card p { color: #bdb0c9; font-size: 13px; margin-top: 9px; line-height: 1.5; }
.module-card .card-arrow { display: inline-block; margin-top: 14px; font-size: 16px; color: #cb9aef; }
.module-card.rollo-card { background: linear-gradient(150deg, #5e168d88, #970efb22); }
.module-card.rollo-card:hover { background-color: #970efb30; }
.module-card.rollo-card img { width: 30px; height: 30px; object-fit: contain; border-radius: 6px; }
.voices-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.quote-card { display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: #fff; }
.quote-card:nth-child(2) { background: #1f0f3d; color: #fff; border-color: #1f0f3d; }
.quote-brand { display: flex; align-items: center; gap: 12px; }
.quote-brand img { width: 42px; height: 42px; object-fit: contain; padding: 5px; background: #fff; border: 1px solid #eee8f1; border-radius: 10px; }
.quote-brand span { font-size: 13px; font-weight: 600; }
.quote-card blockquote { margin: 26px 0; font-family: var(--display); font-size: 23px; font-weight: 500; line-height: 1.25; letter-spacing: -.02em; flex: 1; }
.quote-card figcaption { display: flex; gap: 12px; align-items: center; padding-top: 20px; border-top: 1px solid #a79aac44; }
.quote-card figcaption img { width: 42px; height: 42px; border-radius: 100%; object-fit: cover; }
.quote-card figcaption strong { display: block; font-size: 13px; }
.quote-card figcaption p { color: var(--muted); font-size: 12px; margin-top: 2px; }
.quote-card:nth-child(2) figcaption p { color: #c9b9db; }
.quote-source { font-size: 12px; color: var(--muted); margin-top: 12px; }
.results { padding-block: 0 80px; }
.results-layout { display: grid; grid-template-columns: 1fr 1.8fr; gap: 64px; padding-top: 44px; border-top: 1px solid var(--line); align-items: start; }
.results h2 { font-size: 35px; margin: 16px 0; }
.results-intro > p:not(.eyebrow) { color: var(--muted); font-size: 14px; margin-bottom: 16px; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.stat { padding: 0 22px; border-left: 1px solid var(--line); }
.stat-number { font-family: var(--display); font-weight: 600; font-size: clamp(48px, 4.6vw, 66px); line-height: 1; letter-spacing: -.05em; color: var(--purple-dark); }
.stat-number span { font-family: var(--body); font-size: 18px; letter-spacing: -.03em; }
.stat p { margin-top: 18px; font-size: 14px; }
.stat small { display: block; font-size: 12px; margin-top: 5px; color: var(--muted); }
.resources { background: #fff; border-radius: 36px; margin-inline: 16px; }
.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.article-card { display: flex; flex-direction: column; text-decoration: none; min-width: 0; }
.article-art { display: flex; align-items: center; justify-content: center; aspect-ratio: 1.85; margin-bottom: 24px; border-radius: 16px; overflow: hidden; background: #ede3f7; }
.article-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.article-art.customer { gap: 36px; background: #f1edf4; }
.article-art.customer img { max-width: 94px; height: 90px; object-fit: contain; }
.article-art.customer span { color: #9989a7; font-size: 28px; }
.article-art.customer img:first-child { max-width: 130px; height: auto; }
.article-art.guide { background: linear-gradient(135deg, #1f0f3d, #591288); color: #fff; align-items: flex-start; padding: 25px; position: relative; }
.article-art.guide span { font-family: var(--display); font-size: 57px; font-weight: 600; letter-spacing: -.05em; line-height: 1; }
.article-art.guide svg { width: 48px; height: 48px; opacity: .6; align-self: flex-end; margin-left: auto; }
.article-art.rollo { background: #e9d6fa; }
.article-art.rollo img { width: auto; height: 100%; object-fit: contain; }
.article-card:hover .article-art img { transform: scale(1.04); }
.article-meta { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--purple-dark); }
.article-card h3 { font-size: 26px; margin-top: 11px; }
.article-card > p { font-size: 14px; color: var(--muted); margin: 14px 0 20px; }
.article-card .text-link { margin-top: auto; }
.faq-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 100px; }
.faq h2 { font-size: clamp(36px, 4vw, 56px); margin: 20px 0; }
.faq-intro > p:not(.eyebrow) { color: var(--muted); margin-bottom: 24px; }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; list-style: none; min-height: 80px; padding: 22px 0; font-size: 17px; font-weight: 500; line-height: 1.35; }
.faq-list summary::after { content: '+'; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #e9ddf3; color: var(--purple-dark); flex-shrink: 0; font-size: 20px; }
.faq-list [open] summary::after { content: '−'; background: var(--purple); color: #fff; }
.faq-answer { padding: 0 38px 24px 0; color: var(--muted); font-size: 15px; }
.faq-answer .text-link { margin-top: 14px; color: var(--purple-dark); }
.final-cta { position: relative; overflow: hidden; margin-inline: 16px; border-radius: 36px; padding-block: 68px; color: #fff; background: radial-gradient(ellipse at 75% 0%, #5b1b8077, transparent 70%), var(--ink); }
.final-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 80px; align-items: center; }
.final-cta h2 { font-size: clamp(38px, 4.3vw, 62px); }
.final-actions p { color: #c9bbd5; max-width: 350px; margin-bottom: 24px; }
.final-actions .text-link { display: flex; width: max-content; margin-top: 18px; color: #ded2e6; }
.footer { padding-block: 60px 24px; }
.footer-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 48px; }
.footer-brand img { width: 140px; height: auto; margin-bottom: 20px; }
.footer-brand p { max-width: 290px; font-size: 13px; color: var(--muted); }
.footer h2 { font-family: var(--body); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; margin: 4px 0 18px; }
.footer li + li { margin-top: 10px; }
.footer li a { font-size: 14px; text-decoration: none; }
.footer a:hover { color: var(--purple-dark); }
.footer-bottom { display: flex; justify-content: space-between; gap: 24px; align-items: center; padding-top: 22px; margin-top: 40px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.footer-bottom img { width: 54px; height: 46px; object-fit: contain; }
.tour-dialog { width: min(1160px, calc(100% - 32px)); padding: 0; border: 1px solid #ffffff30; border-radius: 22px; color: #fff; background: #120b1c; overflow: auto; max-height: 90dvh; }
.tour-dialog::backdrop { background: #07030ddb; backdrop-filter: blur(6px); }
.tour-dialog-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; font-size: 14px; }
.tour-close { display: grid; place-items: center; border: 1px solid #ffffff30; width: 44px; height: 44px; border-radius: 50%; background: transparent; color: #fff; font-size: 24px; }
.tour-dialog video { width: 100%; display: block; aspect-ratio: 16 / 9; background: #0a0612; }
.tour-dialog-footer { display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 20px; }
.tour-dialog-footer p { font-size: 14px; color: #d6c9df; }
@media (min-width: 1600px) { .hero-grid { min-height: 780px; } }
@media (max-width: 1150px) {
  .hero-grid { gap: 28px; }
  .hero h1 { font-size: 53px; }
  .hero-description { font-size: 16px; }
  .module-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .module-card:last-child { grid-column: span 3; min-height: 130px; display: grid; grid-template-columns: 50px 1fr 1.5fr 20px; align-items: center; gap: 24px; }
  .module-card:last-child .module-card-top, .module-card:last-child p { margin: 0; }
  .module-card:last-child .module-card-top span { display: none; }
  .problem-layout { gap: 32px; }
  .quote-card { padding: 22px; }
  .quote-card blockquote { font-size: 21px; }
  .faq-layout { gap: 50px; }
  .results-layout { gap: 24px; }
}
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 44px; min-height: 0; padding-block: 155px 48px; }
  .hero h1 { max-width: 700px; font-size: clamp(46px, 6.8vw, 66px); }
  .hero-description { max-width: 600px; font-size: 18px; }
  .hero-visual { max-width: 700px; width: 100%; }
  .hero .eyebrow { margin-bottom: 22px; }
  .logo-grid { grid-template-columns: repeat(4, 1fr); gap: 26px; }
  .problem-layout { grid-template-columns: 1fr; }
  .problem h2 { max-width: 600px; }
  .problem-list { margin-top: 12px; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 20px; }
  .section-heading > p { max-width: 600px; }
  .voices-grid { gap: 14px; }
  .quote-card { padding: 20px; }
  .quote-card blockquote { font-size: 20px; }
  .quote-brand { gap: 9px; }
  .quote-brand span { font-size: 12px; }
  .results-layout { grid-template-columns: 1fr; gap: 32px; }
  .results-intro > p:not(.eyebrow) { max-width: 530px; }
  .stat:first-child { border-left: 0; padding-left: 0; }
  .article-grid { gap: 18px; }
  .article-art.customer { gap: 16px; }
  .article-art.customer img { max-width: 60px; height: 60px; }
  .article-art.customer img:first-child { max-width: 80px; }
  .article-card h3 { font-size: 23px; }
  .faq-layout { grid-template-columns: 1fr; gap: 28px; }
  .faq-intro > p:not(.eyebrow) { max-width: 500px; }
  .final-layout { gap: 40px; }
  .footer-grid { gap: 24px; grid-template-columns: 1.5fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; padding-bottom: 12px; }
}
@media (max-width: 640px) {
  html { scroll-padding-top: 95px; }
  .container { width: calc(100% - 40px); }
  .section { padding-block: 56px; }
  .hero { margin-inline: 8px; border-radius: 0 0 28px 28px; }
  .hero .container { width: calc(100% - 32px); }
  .hero-grid { padding-block: 125px 32px; gap: 30px; }
  .hero .eyebrow { font-size: 13px; }
  .hero h1 { font-size: clamp(38px, 10.1vw, 58px); line-height: 1.03; overflow-wrap: break-word; }
  .hero-description { font-size: 16px; margin-top: 20px; }
  .hero-ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 24px; }
  .hero-ctas .btn { font-size: 13px; padding: 12px; gap: 8px; }
  .hero-note { font-size: 12px; margin-top: 12px; }
  .product-window { padding: 10px 7px 7px; border-radius: 13px; }
  .window-toolbar { font-size: 10px; padding-bottom: 10px; }
  .trust { padding-block: 28px 32px; }
  .trust-top { align-items: flex-start; flex-direction: column; gap: 12px; }
  .trust-top p { max-width: 290px; font-size: 12px; }
  .trust-top .text-link { font-size: 12px; }
  .logo-grid { margin-top: 26px; gap: 22px 20px; }
  .logo-grid img { max-width: 58px; height: 39px; }
  .logo-grid .wide img { max-width: 70px; height: 35px; }
  .problem { padding-block: 44px; }
  .problem-layout { gap: 22px; }
  .problem h2 { font-size: 32px; }
  .problem-list { grid-template-columns: 1fr; gap: 0; margin-top: 0; }
  .problem-list article { display: grid; grid-template-columns: 26px 1fr; gap: 0 12px; padding: 16px 0; border-left: 0; border-top: 1px solid var(--line); }
  .problem-list span { grid-row: span 2; padding-top: 4px; }
  .problem-list h3 { margin: 0 0 7px; font-size: 20px; }
  .problem-list p { font-size: 13px; }
  .overview, .resources, .final-cta { margin-inline: 8px; border-radius: 26px; }
  .section-heading { margin: 18px 0 28px; gap: 16px; }
  .section-heading h2 { font-size: 36px; }
  .section-heading > p { font-size: 15px; }
  .overview-links { gap: 18px; flex-wrap: wrap; }
  .overview-links .btn { min-height: 46px; font-size: 13px; padding-inline: 18px; }
  .overview-links .text-link { font-size: 12px; }
  .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 28px; }
  .module-card { min-height: 186px; padding: 20px 15px; }
  .module-card-top { margin-bottom: 19px; }
  .module-card h3 { font-size: 20px; overflow-wrap: break-word; }
  .module-card p { font-size: 12px; }
  .module-card:last-child { display: block; grid-column: auto; min-height: 186px; }
  .module-card:last-child .module-card-top { margin-bottom: 12px; }
  .module-card:last-child .module-card-top span { display: inline; }
  .module-card:last-child p { margin-top: 9px; }
  .voices-grid { grid-template-columns: 1fr; gap: 14px; }
  .quote-card { padding: 24px; }
  .quote-card blockquote { font-size: 23px; margin-block: 20px; }
  .quote-brand span { font-size: 13px; }
  .quote-source { font-size: 11px; }
  .results { padding-bottom: 56px; }
  .results-layout { padding-top: 32px; gap: 30px; }
  .results h2 { font-size: 32px; }
  .stats-grid { grid-template-columns: 1fr; gap: 20px; }
  .stat { display: grid; grid-template-columns: 125px 1fr; align-items: center; border-left: 0; border-top: 1px solid var(--line); padding: 20px 0 0; }
  .stat-number { font-size: 53px; }
  .stat-number span { font-size: 17px; }
  .stat p { margin: 0; font-size: 14px; }
  .article-grid { grid-template-columns: 1fr; gap: 26px; }
  .article-card { position: relative; display: grid; grid-template-columns: 95px 1fr; column-gap: 18px; border-top: 1px solid var(--line); padding-top: 24px; }
  .article-art { grid-column: 1; grid-row: 1 / span 4; aspect-ratio: 1; margin: 0; border-radius: 12px; }
  .article-meta { font-size: 10px; }
  .article-card h3 { font-size: 22px; margin-top: 8px; }
  .article-card > p { font-size: 13px; margin: 10px 0 14px; }
  .article-card .text-link { font-size: 12px; }
  .article-art.customer { gap: 0; flex-direction: column; padding: 12px; }
  .article-art.customer img:first-child { max-width: 54px; }
  .article-art.customer img:last-child { width: 36px; height: 36px; margin-top: 10px; }
  .article-art.customer span { display: none; }
  .article-art.guide { padding: 15px; }
  .article-art.guide span { font-size: 34px; }
  .article-art.guide svg { position: absolute; bottom: 10px; right: 10px; width: 26px; height: 26px; }
  .faq-layout { gap: 24px; }
  .faq h2 { font-size: 36px; }
  .faq-intro > p:not(.eyebrow) { font-size: 15px; margin-bottom: 18px; }
  .faq-list summary { font-size: 16px; min-height: 76px; gap: 18px; }
  .faq-answer { font-size: 14px; padding-right: 0; }
  .final-cta { padding-block: 44px; }
  .final-layout { grid-template-columns: 1fr; gap: 24px; }
  .final-cta h2 { font-size: 40px; }
  .final-actions p { font-size: 15px; }
  .final-actions > .btn { width: 100%; }
  .final-actions > .text-link { margin-inline: auto; }
  .footer { padding-block: 44px 22px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand img { width: 125px; }
  .footer-grid > div:last-child { grid-column: 1 / -1; }
  .footer-grid > div:last-child ul { display: flex; flex-wrap: wrap; gap: 10px 24px; }
  .footer-grid > div:last-child li + li { margin-top: 0; }
  .footer-bottom { margin-top: 32px; font-size: 10px; }
  .tour-dialog { border-radius: 14px; }
  .tour-dialog-footer { flex-direction: column; gap: 16px; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Hero: interactive product demo ---------- */
.hero-visual { perspective: 1600px; }
.hero-orb { position: absolute; z-index: 0; top: -120px; right: -140px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, #970efb4d, transparent 62%); pointer-events: none; }
.demo-stage { position: relative; z-index: 1; transform-style: preserve-3d; will-change: transform; }
.product-window.demo { container-type: inline-size; padding: 14px 12px 12px; }
.window-toolbar { gap: 12px; }
.window-title { flex: 1; text-align: center; transition: opacity .25s; }
.window-spacer { width: 24px; }

.app { --green: #34c46a; --amber: #f5a524; --red: #ef5350; --violet: #970efb; position: relative; display: grid; grid-template-columns: 5em 1fr; height: 45em; overflow: hidden; border-radius: 10px; background: #fff; color: #17121f; font-family: var(--body); font-size: calc(100cqw / 72); line-height: 1.3; text-align: left; user-select: none; -webkit-user-select: none; pointer-events: none; }
.app svg { width: auto; height: auto; }
.app-side { display: flex; flex-direction: column; align-items: center; gap: .55em; padding: 1.5em 0; background: #f7f6fa; border-right: 1px solid #eeebf2; }
.app-side > img { width: 2.1em; height: 2.1em; margin-bottom: 1.2em; }
.app-nav { display: grid; place-items: center; width: 2.9em; height: 2.9em; padding: 0; border: 0; border-radius: .75em; background: transparent; color: #8d8798; transition: background .25s, color .25s, transform .2s; }
.app-nav svg { width: 1.45em; height: 1.45em; }
.app-nav.is-active { background: #efe5fb; color: var(--violet); }
.app-views { position: relative; min-width: 0; }
.app-view { position: absolute; inset: 0; padding: 1.9em 2.4em 1.5em; transition: opacity .45s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
.view-analytics { opacity: 0; transform: translateX(7%); pointer-events: none; }
.app[data-view="analytics"] .view-editor { opacity: 0; transform: translateX(-7%); pointer-events: none; }
.app[data-view="analytics"] .view-analytics { opacity: 1; transform: none; pointer-events: auto; }
.app.is-instant *, .app.is-instant *::before, .app.is-instant *::after { transition: none !important; }
.app-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1em; }
.app-title { font-family: var(--display); font-size: 2.3em; font-weight: 600; letter-spacing: -.03em; line-height: 1.05; }
.app-sub { margin-top: .35em; color: #6d6677; font-size: 1.15em; }
.app-tabs { display: flex; gap: 2em; margin-top: 1em; border-bottom: 1px solid #efedf2; color: #6d6677; font-size: 1.15em; }
.app-tabs span { padding-bottom: .55em; }
.app-tabs .is-active { color: var(--violet); box-shadow: inset 0 -2px 0 var(--violet); }
.app-filters { display: flex; align-items: center; gap: .8em; margin: .95em 0; font-size: 1.05em; white-space: nowrap; }
.f-label { color: #6d6677; }
.f-pill { padding: .45em .9em; border: 1px solid #e7e3ec; border-radius: .6em; background: #fff; font-weight: 600; font-size: 1.05em; white-space: nowrap; }
.f-status { display: inline-flex; align-items: center; gap: .5em; margin-left: auto; padding: .45em 1em; border: 1px solid #b6eccb; border-radius: 2em; background: #ecfbf2; color: #15803d; font-weight: 600; }
.f-status i { width: .55em; height: .55em; border-radius: 50%; background: #22c55e; animation: demo-pulse 2s infinite; }
.app-canvas { display: grid; grid-template-columns: 10.5em 38em 1fr; align-items: center; gap: 1.3em; padding: 1em 1.3em; border: 1px solid #efedf0; border-radius: 1em; background: #f8f7f4; }
.app-legend li { display: grid; grid-template-columns: 1em 1fr auto; align-items: center; gap: .6em; margin: .65em 0; font-size: 1.1em; }
.app-legend i { width: 1em; height: 1em; border-radius: .22em; background: var(--green); }
.app-legend .lg-reserved i { background: var(--amber); }
.app-legend .lg-booked i { background: var(--red); }
.app-legend .lg-selected i { background: var(--violet); }
.app-legend b { font-variant-numeric: tabular-nums; transition: color .3s; }
.app-legend b.is-bump { animation: demo-bump .45s; }
.stadium { position: relative; width: 38em; height: 22em; }
.pitch { position: absolute; left: 12.1%; top: 11.8%; width: 76.3%; height: 76.4%; border-radius: .2em; background: repeating-linear-gradient(90deg, #4e8b4e 0 8.333%, #5b995a 8.333% 16.666%); box-shadow: inset 0 0 0 .35em #3f7a3f; }
.pitch::before { content: ''; position: absolute; inset: .7em; border: .12em solid #ffffffd9; }
.pitch-mid { position: absolute; left: 50%; top: .7em; bottom: .7em; width: .12em; margin-left: -.06em; background: #ffffffd9; }
.pitch-circle { position: absolute; left: 50%; top: 50%; width: 4.4em; height: 4.4em; margin: -2.2em 0 0 -2.2em; border: .12em solid #ffffffd9; border-radius: 50%; }
.pitch-box { position: absolute; top: 31%; width: 3.8em; height: 38%; border: .12em solid #ffffffd9; }
.pitch-box.l { left: .7em; border-left: 0; }
.pitch-box.r { right: .7em; border-right: 0; }
.demo-slot { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); border: .12em dashed #a59cb3; border-radius: .2em; transition: opacity .3s, border-color .3s, background .3s; }
.demo-slot.is-target { border-color: var(--violet); background: #970efb1f; }
.demo-slot.is-filled { opacity: 0; }
.board { position: absolute; z-index: 1; left: var(--x); top: var(--y); width: var(--w); height: var(--h); display: grid; place-items: center; padding: 0; border: 0; border-radius: .2em; background: var(--green); color: #fff; font-size: .62em; font-weight: 700; transition: background .3s, transform .18s, box-shadow .2s, filter .2s; }
.board span { opacity: 0; transition: opacity .2s; font-size: 1em; }
.board[data-status="reserved"] { background: var(--amber); }
.board[data-status="booked"] { background: var(--red); }
.board[data-status="selected"] span { opacity: 1; }
.board[data-status="selected"] { z-index: 2; background: var(--violet); box-shadow: 0 0 0 .3em #970efb40; }
.board.is-dragging { z-index: 5; transform: scale(1.22); box-shadow: 0 .6em 1.4em #1d10304d, 0 0 0 .3em #970efb40; transition: background .3s, transform .18s, box-shadow .2s; }
.board.is-gliding { transition: left .85s cubic-bezier(.45, .05, .25, 1), top .85s cubic-bezier(.45, .05, .25, 1), transform .18s, box-shadow .2s, background .3s; }
.board.is-pop { animation: demo-pop .5s cubic-bezier(.3, 1.6, .5, 1); }
.board.is-press::after { content: ''; position: absolute; inset: -.4em; border: .15em solid var(--violet); border-radius: .4em; animation: demo-ring .5s ease-out forwards; }
.app-donut { text-align: center; }
.app-donut svg { width: 8.6em; margin-inline: auto; }
.app-donut p { margin-top: .6em; color: #6d6677; font-size: 1.05em; }
.app-donut b { color: #17121f; font-family: var(--display); font-size: 1.45em; }
.app circle { fill: none; stroke-width: 5.4; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dasharray .7s cubic-bezier(.2, .8, .2, 1), stroke-dashoffset .7s cubic-bezier(.2, .8, .2, 1); stroke-dasharray: 0 100; }
.app .d-track { stroke: #efedf2; stroke-dasharray: none; }
.d-avail { stroke: var(--green); }
.d-reserved { stroke: var(--amber); }
.d-booked { stroke: var(--red); }
.app-selection { display: flex; align-items: center; gap: 1em; margin-top: 1em; padding: .7em .8em .7em 1.4em; border: 1px solid #ece8f0; border-radius: .9em; background: #fff; box-shadow: 0 .5em 1.5em #1d10300d; color: #6d6677; font-size: 1.15em; transition: border-color .3s, box-shadow .3s; }
.app-selection b { color: #17121f; }
.app-selection.has-selection { border-color: #d7b6f7; box-shadow: 0 .5em 1.6em #970efb1f; color: #17121f; }
.app-book { margin-left: auto; padding: .65em 1.3em; border-radius: .7em; background: var(--violet); color: #fff; font-size: 1em; font-weight: 600; opacity: .35; transition: opacity .25s, transform .2s, background .2s; }
.app-book.is-ready { opacity: 1; }
.app-book.is-press { transform: scale(.94); }

.an-grid { display: grid; grid-template-columns: 1.55fr 1fr; grid-template-rows: 1fr 1fr; gap: 1.2em; height: calc(100% - 5.2em); margin-top: 1.4em; }
.an-card { min-width: 0; padding: 1.3em 1.4em; border: 1px solid #ece8f0; border-radius: 1em; background: #fff; box-shadow: 0 .3em 1em #1d103008; }
.an-card h3 { font-family: var(--display); font-size: 1.3em; font-weight: 600; letter-spacing: -.02em; }
.an-revenue { grid-row: span 2; display: flex; flex-direction: column; }
.an-card-head { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.an-key { display: flex; align-items: center; gap: .45em; color: #6d6677; font-size: .95em; }
.an-key i { width: .85em; height: .85em; border-radius: .2em; background: #8f2fe8; }
.an-key i.fc { margin-left: .7em; background: #f3e9fd; border: 1px dashed #c69af0; }
.bars { position: relative; flex: 1; display: grid; grid-template-columns: repeat(12, 1fr); align-items: end; gap: .85em; margin-top: 1.4em; padding-bottom: 1.9em; background: repeating-linear-gradient(to top, transparent 0 calc(25% - 1px), #f0edf3 calc(25% - 1px) 25%) 0 0 / 100% calc(100% - 1.9em) no-repeat; }
.bar { position: relative; height: 0; border-radius: .4em .4em .15em .15em; background: linear-gradient(#a64df5, #7c12d6); transition: height .8s cubic-bezier(.2, .8, .2, 1) calc(var(--i) * 50ms); }
.bar.is-forecast { background: #f3e9fd; box-shadow: inset 0 0 0 1px #c69af0; }
.an-on .bar { height: calc(var(--h) * 1%); }
.bar > span { position: absolute; top: 100%; left: 0; right: 0; margin-top: .55em; color: #9b94a5; font-size: .95em; text-align: center; }
.bar-new { position: absolute; left: 0; right: 0; bottom: 100%; height: 0; border-radius: .4em .4em 0 0; background: repeating-linear-gradient(-45deg, #b25cf8 0 .35em, #970efb .35em .7em); transition: height .7s cubic-bezier(.2, .8, .2, 1) .9s; }
.an-on .bar-new { height: calc(var(--add, 0) / var(--h) * 100%); }
.bar-tag { position: absolute; left: 0; top: 0; padding: .4em .75em; border-radius: .55em; background: #17121f; color: #fff; font-size: .95em; white-space: nowrap; opacity: 0; transform: translateY(.6em); transition: opacity .35s, transform .35s; }
.bar-tag.is-visible { opacity: 1; transform: none; }
.bar-tag b { color: #d6b0fb; }
.an-total-body, .an-products-body { display: flex; align-items: center; gap: 1.4em; margin-top: 1em; }
.an-ring { position: relative; flex-shrink: 0; width: 8.2em; }
.an-ring p { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.1; }
.an-ring small { color: #8d8798; font-size: .85em; }
.an-ring b { font-family: var(--display); font-size: 1.5em; font-variant-numeric: tabular-nums; }
.r-contract { stroke: var(--violet); stroke-width: 6.5; }
.an-total dl { margin: 0; min-width: 0; }
.an-total dt { display: flex; align-items: center; gap: .45em; color: #6d6677; font-size: .95em; }
.an-total dt i { width: .55em; height: .55em; border-radius: 50%; background: var(--violet); }
.an-total dt i.p { background: #c084fc; }
.an-total dd { margin: .15em 0 .7em; font-family: var(--display); font-size: 1.55em; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.an-total dd:last-child { margin-bottom: 0; }
.an-total dd.is-bump { animation: demo-bump .5s; color: var(--violet); }
.an-products-body svg { flex-shrink: 0; width: 7.2em; }
.an-products ul { flex: 1; min-width: 0; }
.an-products li { display: grid; grid-template-columns: .85em 1fr auto; align-items: center; gap: .55em; margin: .4em 0; font-size: 1em; }
.an-products li i { width: .85em; height: .85em; border-radius: .2em; background: #6a0fc0; }
.an-products li:nth-child(2) i { background: var(--violet); }
.an-products li:nth-child(3) i { background: #c084fc; }
.an-products li:nth-child(4) i { background: #eadcfb; }
.p1 { stroke: #6a0fc0; } .p2 { stroke: var(--violet); } .p3 { stroke: #c084fc; } .p4 { stroke: #eadcfb; }
.an-on .p1 { stroke-dasharray: 38 100; }
.an-on .p2 { stroke-dasharray: 26 100; stroke-dashoffset: -38; }
.an-on .p3 { stroke-dasharray: 20 100; stroke-dashoffset: -64; }
.an-on .p4 { stroke-dasharray: 16 100; stroke-dashoffset: -84; }

.demo-cursor { position: absolute; z-index: 20; top: 0; left: 0; width: 2.3em; opacity: 0; pointer-events: none; transform: translate(var(--cx, 60em), var(--cy, 38em)); transition: transform var(--cdur, .6s) cubic-bezier(.45, .05, .25, 1), opacity .3s; filter: drop-shadow(0 .25em .4em #0004); }
.demo-cursor svg { display: block; width: 100%; transform-origin: 20% 15%; transition: transform .15s; }
.demo-cursor.is-visible { opacity: 1; }
.demo-cursor.is-down svg { transform: scale(.82); }
.demo-toast { position: absolute; z-index: 15; left: 50%; bottom: 6.2em; display: flex; align-items: center; gap: .65em; padding: .75em 1.15em; border-radius: .8em; background: #17121f; color: #fff; font-size: 1.15em; white-space: nowrap; box-shadow: 0 1em 2em #1d103040; opacity: 0; transform: translate(-50%, 1em) scale(.96); pointer-events: none; transition: opacity .35s, transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.demo-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.demo-toast svg { width: 1.5em; }
.demo-toast b { color: #d6b0fb; }

.float-card { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 10px 15px 10px 11px; border: 1px solid #ffffff24; border-radius: 14px; background: #1c1028cc; color: #fff; box-shadow: 0 18px 44px #0007; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); pointer-events: none; will-change: transform; }
.float-card small { display: block; color: #c6bed1; font-size: 11px; line-height: 1.3; }
.float-card b { display: block; font-family: var(--display); font-size: 16px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.float-card > svg { width: 30px; height: 30px; }
.float-contract { left: -34px; bottom: 15%; opacity: 0; scale: .9; transition: opacity .45s, scale .55s cubic-bezier(.3, 1.6, .5, 1); }
.float-contract.is-on { opacity: 1; scale: 1; }
.float-contract > svg { padding: 5px; border-radius: 9px; background: #970efb33; color: #d6b0fb; }
.float-util { right: -22px; top: 17%; }
.float-util circle { fill: none; stroke-width: 6; transform: rotate(-90deg); transform-origin: 50% 50%; }
.float-util .d-track { stroke: #ffffff1f; }
.u-ring { stroke: #b46af2; stroke-dasharray: 0 100; transition: stroke-dasharray .7s cubic-bezier(.2, .8, .2, 1); }


@keyframes demo-pulse { 50% { opacity: .35; } }
@keyframes demo-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes demo-ring { from { opacity: 1; transform: scale(.7); } to { opacity: 0; transform: scale(1.5); } }
@keyframes demo-bump { 40% { transform: translateY(-.25em); } }

@container (max-width: 560px) {
  .app { grid-template-columns: 1fr; height: 39em; font-size: calc(100cqw / 41); }
  .app-side, .app-tabs, .app-filters, .app-donut, .an-products { display: none; }
  .app-view { padding: 1.5em 1.4em 1.3em; }
  .app-canvas { grid-template-columns: 1fr; gap: .8em; margin-top: 1em; padding: .9em; }
  .app-legend { display: flex; flex-wrap: wrap; gap: .3em 1.1em; }
  .app-legend li { margin: 0; font-size: 1em; }
  .stadium { width: 100%; height: auto; aspect-ratio: 38 / 22; font-size: .9em; }
  .an-grid { grid-template-columns: 1fr; grid-template-rows: 1.5fr 1fr; height: calc(100% - 4.8em); }
  .an-revenue { grid-row: auto; }
  .demo-toast { bottom: 5.4em; }
}

/* Hero entrance */
.hero-copy > * { animation: rise-in .8s cubic-bezier(.2, .8, .2, 1) backwards; }
.hero-copy > :nth-child(2) { animation-delay: .08s; }
.hero-copy > :nth-child(3) { animation-delay: .16s; }
.hero-copy > :nth-child(4) { animation-delay: .24s; }
.hero-copy > :nth-child(5) { animation-delay: .32s; }
.motion .hero-visual { opacity: 0; transform-origin: 50% 100%; animation: show-late 0s 4s forwards; }
.motion .hero-visual.screen-in { opacity: 1; animation: screen-in 1.6s cubic-bezier(.16, 1, .3, 1) both; }
.product-window.demo { overflow: hidden; }
.product-window.demo::after { content: ''; position: absolute; z-index: 30; inset: 0; border-radius: inherit; background: linear-gradient(105deg, transparent 35%, #ffffff2e 48%, transparent 60%); transform: translateX(-120%); pointer-events: none; }
.screen-in .product-window.demo::after { animation: screen-sheen 1.4s cubic-bezier(.4, 0, .2, 1) .9s both; }
@keyframes screen-in {
  0% { opacity: 0; transform: perspective(1400px) translateY(62%) rotateX(52deg) rotateZ(-2deg) scale(.84); }
  35% { opacity: 1; }
  100% { opacity: 1; transform: perspective(1400px) translateY(0) rotateX(0) rotateZ(0) scale(1); }
}
@keyframes screen-sheen { to { transform: translateX(120%); } }
@keyframes show-late { to { opacity: 1; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(28px); } }

/* ---------- Page micro-interactions ---------- */
.motion [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2, .8, .2, 1) var(--d, 0s), transform .8s cubic-bezier(.2, .8, .2, 1) var(--d, 0s); }
.motion [data-reveal].is-in { opacity: 1; transform: none; }
.problem-list article { position: relative; }
.problem-list article::before { content: ''; position: absolute; left: -1px; top: 0; width: 2px; height: 100%; background: var(--purple); transform: scaleY(0); transform-origin: top; transition: transform .9s cubic-bezier(.2, .8, .2, 1) calc(var(--d, 0s) + .25s); }
.problem-list article.is-in::before, .problem-list article:hover::before { transform: scaleY(1); }
.logo-grid img { transition: transform .3s cubic-bezier(.2, .8, .2, 1), filter .3s; }
.logo-grid div:hover img { transform: translateY(-4px) scale(1.06); }
[data-spot] { position: relative; isolation: isolate; }
[data-spot]::before { content: ''; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), var(--spot, #970efb30), transparent 70%); opacity: 0; transition: opacity .3s; pointer-events: none; }
[data-spot]:hover::before { opacity: 1; }
.module-card-top svg, .module-card .card-arrow { transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.module-card:hover .module-card-top svg { transform: translateY(-3px) rotate(-6deg) scale(1.08); }
.module-card:hover .card-arrow { transform: translate(4px, -4px); }
.quote-card { transition: transform .25s ease-out, box-shadow .3s; transform-style: preserve-3d; }
.quote-card:hover { box-shadow: 0 24px 50px #1f0f3d1f; }
.article-card { transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.article-card:hover { transform: translateY(-6px); }
.stat-number { font-variant-numeric: tabular-nums; }
.btn[data-magnetic] { transition: background .2s, border-color .2s, transform .25s cubic-bezier(.2, .8, .2, 1); }
.final-cta { position: relative; overflow: hidden; }
.final-cta[data-spot]::before { z-index: 0; background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), #970efb33, transparent 70%); }
.final-cta .container { position: relative; z-index: 1; }
:root { interpolate-size: allow-keywords; }
.faq-list details::details-content { block-size: 0; overflow: clip; transition: block-size .4s cubic-bezier(.2, .8, .2, 1), content-visibility .4s allow-discrete; }
.faq-list details[open]::details-content { block-size: auto; }
.faq-list summary::after { transition: background .25s, color .25s, transform .35s cubic-bezier(.2, .8, .2, 1); }
.faq-list [open] summary::after { transform: rotate(180deg); }
.faq-list summary:hover::after { background: #dcc6f0; }

@media (max-width: 960px) {
  .float-contract { left: -10px; }
  .float-util { right: -8px; }
}
@media (max-width: 640px) {
  .product-window.demo { padding: 10px 7px 7px; }
  .float-card { display: none; }
  .hero-orb { width: 340px; height: 340px; right: -120px; }
}
@media (prefers-reduced-motion: reduce) {
  .motion [data-reveal] { opacity: 1; transform: none; }
  .demo-cursor { display: none; }
}