/* Self-contained product previews: no missing screenshot assets. */
.landing .product-showcase { inline-size: 100%; max-inline-size: 1152px; margin-inline: auto; padding: 96px 24px; border-block-start: 1px solid #f1f5f9; direction: rtl; }
.landing .showcase-heading { max-inline-size: 672px; margin: 0 auto 64px; text-align: center; }
.landing .showcase-heading > span { display: inline-flex; padding: 6px 14px; border: 1px solid #bfdbfe99; border-radius: 999px; color: #2563eb; background: #eff6ff; font-size: 12px; font-weight: 700; }
.landing .showcase-heading h2 { margin: 16px 0 0; color: #0f172a; font-size: 30px; font-weight: 900; line-height: 1.2; letter-spacing: -1px; }
.landing .showcase-heading > p { margin: 12px 0 0; color: #475569; font-size: 16px; line-height: 1.8; }
.landing .showcase-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 32px; direction: rtl; }
.landing .showcase-card { min-inline-size: 0; padding: 24px; border: 1px solid #e2e8f0cc; border-radius: 24px; background: linear-gradient(#f8fafc,#fff); box-shadow: 0 1px 3px #0f172a0d; transition: box-shadow .3s ease; text-align: right; }
.landing .showcase-mockup { min-block-size: 176px; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; padding: 16px; margin-block-end: 24px; border: 1px solid #e2e8f099; border-radius: 16px; background: #fff; box-shadow: inset 0 2px 4px #0f172a06; font-size: 11px; color: #52617a; }
.landing .showcase-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; padding-block-end: 8px; border-block-end: 1px solid #f1f5f9; }
.landing .showcase-toolbar strong { color: #1e293b; font-size: 12px; font-weight: 700; }
.landing .showcase-toolbar small { color: #047857; background: #ecfdf5; border-radius: 4px; padding: 2px 6px; font-size: 10px; font-weight: 700; }
.landing .showcase-bars { display: grid; gap: 8px; padding-block: 8px; }
.landing .showcase-bars i { display: block; block-size: 8px; inline-size: 75%; background: #3b82f6; border-radius: 999px; }
.landing .showcase-bars i:nth-child(2) { inline-size: 50%; background: #c7d2fe; }
.landing .showcase-bars i:nth-child(3) { inline-size: 83%; background: #e2e8f0; }
.landing .showcase-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 11px; }
.landing .showcase-accent { color: #2563eb; font-weight: 700; }
.landing .showcase-profile-head { display: flex; align-items: center; gap: 12px; }
.landing .showcase-avatar { display: grid; place-items: center; inline-size: 40px; block-size: 40px; flex: 0 0 40px; border-radius: 50%; background: #0f172a; color: #fff; font-size: 14px; font-weight: 700; }
.landing .showcase-profile-head strong { display: block; color: #0f172a; font-size: 12px; }
.landing .showcase-profile-head small { display: block; margin-block-start: 3px; font-size: 10px; }
.landing .showcase-profile-preview { border-radius: 12px; background: #f8fafc; padding: 10px; font-size: 11px; }
.landing .showcase-profile-preview > div { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; color: #334155; }
.landing .showcase-profile-preview > div > span:last-child { color: #047857; font-weight: 700; }
.landing .showcase-profile-preview small { display: block; margin-block-start: 4px; font-size: 10px; }
.landing .showcase-url { display: block; text-align: left; color: #2563eb; font-size: 11px; font-weight: 700; overflow-wrap: anywhere; }
.landing .showcase-file { font-family: monospace; font-size: 10px; overflow-wrap: anywhere; }
.landing .showcase-resume-preview strong { display: block; font-size: 10px; color: #52617a; }
.landing .showcase-resume-preview p { margin: 6px 0 0; padding: 6px; background: #eff6ff99; border-radius: 4px; color: #1e40af; font-size: 10px; line-height: 1.7; }
.landing .showcase-card > h3 { margin: 0 0 8px; color: #0f172a; font-size: 20px; font-weight: 700; line-height: 1.5; text-align: right; }
.landing .showcase-card > p { margin: 0; color: #475569; font-size: 14px; line-height: 1.8; text-align: right; }
.landing .showcase-demo-note { margin: 20px 0 0; color: #52617a; font-size: 12px; line-height: 1.8; text-align: center; }
@media(min-width:768px) { .landing .showcase-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } .landing .showcase-heading h2 { font-size: 48px; } .landing .showcase-heading > p { font-size: 18px; } }
@media(hover:hover) { .landing .showcase-card:hover { box-shadow: 0 18px 35px -12px #1d327020; } }
@media(prefers-reduced-motion:reduce) { .landing .showcase-card { transition: none; } }

/* Wider balanced heading and explicit card copy alignment. */
.landing .product-showcase .showcase-heading { max-inline-size: 896px; }
.landing .product-showcase .showcase-heading h2 { text-wrap: balance; }
.landing .product-showcase .showcase-card { direction: rtl; text-align: right; }
.landing .product-showcase .showcase-card > p,.landing .product-showcase .showcase-card > h3 { direction: rtl; text-align: right; }

/* Updated value proposition and compact three-card showcase. */
.landing .showcase-refined { padding-block: 64px; }
.landing .showcase-refined .showcase-heading { max-inline-size: 100%; margin-block-end: 48px; }
.landing .showcase-refined .showcase-heading h2 { color: #0b1e48; line-height: 1.2; margin-block-end: 16px; }
.landing .showcase-refined .showcase-heading h2 > span { color: #185adb; }
.landing .showcase-refined .showcase-heading > p { max-inline-size: 672px; margin-inline: auto; }
.landing .showcase-refined .showcase-grid { gap: 24px; }
.landing .showcase-refined .showcase-card { background: #fff; border-color: #e2e8f0e6; border-radius: 16px; box-shadow: 0 1px 2px #0f172a0a; transition: border-color .2s ease; }
.landing .showcase-refined .showcase-mockup { min-block-size: 112px; padding: 16px; margin-block-end: 20px; border-color: #f1f5f9; border-radius: 12px; background: #f8fafc; box-shadow: none; justify-content: flex-start; gap: 8px; }
.landing .showcase-refined .showcase-toolbar { border: 0; padding: 0; font-size: 11px; color: #64748b; }
.landing .showcase-refined .showcase-mockup > p { margin: 0; color: #475569; font-size: 12px; line-height: 1.8; text-align: right; }
.landing .showcase-refined .showcase-bars { padding: 0; }
.landing .showcase-refined .showcase-bars i:first-child { background: #dbeafe; }
.landing .showcase-refined .showcase-bars i:nth-child(2) { background: #e2e8f0; }
.landing .showcase-refined .showcase-card > h3 { color: #0b1e48; font-weight: 800; }
.landing .showcase-refined .showcase-sync { color: #047857; font-weight: 600; }
.landing .showcase-refined .showcase-demo-note { margin-block-start: 24px; }
@media(hover:hover) { .landing .showcase-refined .showcase-card:hover { border-color: #185adb66; box-shadow: 0 1px 2px #0f172a0a; } }
@media(prefers-reduced-motion:reduce) { .landing .showcase-refined .showcase-card { transition: none; } }

/* Heading-only refinement; preserve the three product cards. */
.landing .showcase-refined .showcase-heading #showcase-title { font-size: clamp(26px,3vw,40px); line-height: 1.25; letter-spacing: -.6px; text-wrap: balance; }

/* Supplied dashboard screenshot, displayed intact in a responsive browser frame. */
.landing .dashboard-reference { margin: 40px 0 0; border: 1px solid #dce5f3; border-radius: 20px; overflow: hidden; background: white; box-shadow: 0 24px 60px -30px #0b1e4833; text-align: right; }
.landing .dashboard-browser-bar { display: flex; align-items: center; gap: 16px; padding: 15px 20px; border-block-end: 1px solid #e2e8f0; background: #f5f8fd; color: #0b1e48; font-size: 13px; font-weight: 600; }
.landing .dashboard-window-dots { display: flex; direction: ltr; gap: 6px; }
.landing .dashboard-window-dots i { inline-size: 9px; block-size: 9px; border-radius: 50%; background: #c4d0e3; }
.landing .dashboard-browser-bar small { margin-inline-start: auto; color: #52617a; font-size: 11px; font-weight: 400; }
.landing .dashboard-reference-preview { position: relative; max-block-size: 560px; overflow: hidden; background: #f8fafc; }
.landing .dashboard-reference-preview::after { content: ''; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 80px; background: linear-gradient(transparent,white); pointer-events: none; }
.landing .dashboard-reference img { display: block; inline-size: 100%; block-size: auto; }
.landing .dashboard-reference figcaption { display: grid; gap: 6px; padding: 22px 24px 12px; }
.landing .dashboard-reference figcaption strong { color: #0b1e48; font-size: 18px; }
.landing .dashboard-reference figcaption > span { color: #52617a; font-size: 12px; line-height: 1.8; }
.landing .dashboard-reference-full summary { display: flex; align-items: center; gap: 10px; min-block-size: 48px; padding: 12px 24px 20px; color: #185adb; font-size: 14px; font-weight: 700; list-style: none; cursor: pointer; }
.landing .dashboard-reference-full summary::-webkit-details-marker { display: none; }
.landing .dashboard-reference-full summary:focus-visible { outline: 3px solid #6757e4; outline-offset: -4px; border-radius: 8px; }
.landing .dashboard-reference-full[open] summary > span { transform: rotate(180deg); }
.landing .dashboard-reference-full > div { max-block-size: 80vh; overflow-y: auto; border-block-start: 1px solid #e2e8f0; }
@media(max-width:700px) { .landing .dashboard-reference-preview { max-block-size: 320px; } .landing .dashboard-browser-bar { gap: 10px; padding: 12px; flex-wrap: wrap; } .landing .dashboard-browser-bar small { font-size: 10px; } .landing .dashboard-reference figcaption { padding: 18px 16px 8px; } }

/* Screenshot-area carousel: CSS viewports preserve the original bitmap. */
.landing .dashboard-carousel { margin-block-start: 40px; border: 1px solid #dce5f3; border-radius: 20px; overflow: hidden; background: white; box-shadow: 0 24px 60px -30px #0b1e4833; }
.landing .dashboard-carousel-slide { margin: 0; }
.landing .dashboard-carousel-slide[hidden] { display: none; }
.landing .dashboard-carousel-crop { position: relative; aspect-ratio: 16/10; overflow: hidden; background: #f8fafc; }
.landing .dashboard-carousel-crop img { display: block; inline-size: 100%; block-size: auto; }
.landing .dashboard-carousel-slide figcaption { padding: 22px 24px 8px; text-align: right; }
.landing .dashboard-carousel-slide figcaption strong { color: #0b1e48; font-size: 20px; }
.landing .dashboard-carousel-slide figcaption p { margin: 6px 0 0; font-size: 14px; color: #52617a; line-height: 1.8; }
.landing .dashboard-carousel-controls { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px; padding: 20px 24px; }
.landing .dashboard-carousel-controls > button { inline-size: 44px; block-size: 44px; border: 1px solid #dbe5f5; border-radius: 12px; background: #eff6ff; color: #185adb; font-size: 20px; cursor: pointer; }
.landing .dashboard-carousel-controls button:hover { background: #dbeafe; }
.landing .dashboard-carousel-controls button:focus-visible { outline: 3px solid #6757e4; outline-offset: 3px; }
.landing .dashboard-carousel-dots { display: flex; direction: rtl; gap: 2px; }
.landing .dashboard-carousel-dots button { display: grid; place-items: center; inline-size: 32px; block-size: 44px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; }
.landing .dashboard-carousel-dots button::before { content: ''; inline-size: 8px; block-size: 8px; background: #c4d0e3; border-radius: 999px; }
.landing .dashboard-carousel-dots button[aria-current=true]::before { inline-size: 22px; background: #185adb; }
.landing .dashboard-carousel-status { color: #52617a; font-size: 12px; }
.landing .dashboard-carousel > .showcase-demo-note { margin: 0; padding: 0 20px 20px; }

/* Smaller centered carousel; surrounding cards unchanged. */
.landing .dashboard-carousel { max-inline-size: 760px; margin-inline: auto; }
.landing .dashboard-carousel-crop { aspect-ratio: 16/9; }
.landing .dashboard-carousel-slide figcaption { padding: 16px 20px 4px; }
.landing .dashboard-carousel-slide figcaption strong { font-size: 18px; }
.landing .dashboard-carousel-controls { padding: 12px 20px; }

/* Reference-inspired split: narrative beside the carousel on a blue plane. */
.landing .showcase-insight-layout { display: grid; grid-template-columns: minmax(0,1fr); gap: 36px; align-items: center; direction: rtl; margin-block-start: 64px; }
.landing .showcase-insight-copy { text-align: right; min-inline-size: 0; }
.landing .showcase-insight-copy > span { color: #185adb; font-size: 13px; font-weight: 650; }
.landing .showcase-insight-copy h3 { margin: 14px 0 18px; color: #0b1e48; font-size: clamp(27px,2.6vw,36px); line-height: 1.25; font-weight: 700; letter-spacing: -.6px; }
.landing .showcase-insight-copy h3 strong { font-weight: 700; color: #185adb; }
.landing .showcase-insight-copy p { margin: 0; color: #475569; font-size: 16px; line-height: 1.85; }
.landing .showcase-insight-copy a { display: inline-flex; align-items: center; gap: 12px; min-block-size: 50px; margin-block-start: 26px; padding: 14px 22px; border-radius: 999px; background: #185adb; color: white; font-size: 14px; font-weight: 700; text-decoration: none; }
.landing .showcase-insight-copy a:hover { background: #11409c; }
.landing .showcase-insight-copy a:focus-visible { outline: 3px solid #6757e4; outline-offset: 4px; }
.landing .showcase-insight-visual { position: relative; isolation: isolate; min-inline-size: 0; padding: 36px 0 36px 24px; }
.landing .showcase-insight-visual::before { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: -24px; right: 20%; background: #759dce; border-radius: 8px; }
.landing .showcase-insight-visual .dashboard-carousel { margin: 0; inline-size: 100%; max-inline-size: none; border-radius: 14px; box-shadow: 0 15px 35px #0b1e4824; }
.landing .showcase-insight-visual .dashboard-browser-bar { padding: 10px 12px; gap: 8px; font-size: 11px; }
.landing .showcase-insight-visual .dashboard-browser-bar small { font-size: 9px; }
.landing .showcase-insight-visual .dashboard-carousel-slide figcaption { padding: 12px 16px 0; }
.landing .showcase-insight-visual .dashboard-carousel-slide figcaption strong { font-size: 16px; }
.landing .showcase-insight-visual .dashboard-carousel-slide figcaption p { font-size: 12px; }
.landing .showcase-insight-visual .dashboard-carousel-controls { padding: 8px 12px; gap: 10px; }
.landing .showcase-insight-visual .dashboard-carousel > .showcase-demo-note { padding: 0 12px 12px; font-size: 10px; }
@media(min-width:1024px) { .landing .showcase-insight-layout { grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: 44px; } .landing .showcase-insight-visual { grid-column: 2; } .landing .showcase-insight-copy { grid-column: 1; grid-row: 1; } }
@media(max-width:700px) { .landing .showcase-insight-visual { padding: 24px 0 24px 12px; } .landing .showcase-insight-visual::before { left: -8px; } }

/* Enlarge the system preview and bring it closer to the narrative only. */
@media(min-width:1024px) { .landing .showcase-insight-layout { grid-template-columns: minmax(0,4fr) minmax(0,8fr); gap: 24px; } .landing .showcase-insight-visual { padding-inline-end: 12px; } }

/* Slightly larger preview and tighter text gap; feature cards untouched. */
@media(min-width:1024px) { .landing .showcase-insight-layout { grid-template-columns: minmax(0,3.5fr) minmax(0,8.5fr); gap: 16px; } .landing .showcase-insight-visual { padding-inline-end: 4px; } }

/* Enlarge only the system preview column. */
@media(min-width:1024px) { .landing .showcase-insight-layout { grid-template-columns: minmax(0,3fr) minmax(0,9fr); } }

/* Mobile carousel: larger targets, swipe support and original screenshot access. */
.landing .dashboard-carousel-viewport { touch-action: pan-y pinch-zoom; }
.landing .dashboard-carousel-viewport:focus-visible { outline: 3px solid #185adb; outline-offset: -3px; }
.landing .dashboard-carousel-crop img { user-select: none; -webkit-user-drag: none; }
.landing .dashboard-carousel-dots button { inline-size: 44px; block-size: 44px; }
.landing .dashboard-carousel-dots button::before { inline-size: 10px; block-size: 10px; background: #8b9bb3; }
.landing .dashboard-carousel-dots button[aria-current=true]::before { inline-size: 26px; background: #185adb; }
.landing .dashboard-original-link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-block-size: 44px; padding: 8px 12px; border-radius: 8px; color: #185adb; font-size: 12px; font-weight: 600; text-decoration: none; }
.landing .dashboard-original-link:hover { background: #eff6ff; }
.landing .dashboard-original-link:focus-visible { outline: 3px solid #6757e4; outline-offset: 3px; }
@media(max-width:700px) { .landing .showcase-insight-visual .dashboard-carousel-controls { gap: 4px; } .landing .dashboard-original-link { flex-basis: 100%; } .landing .showcase-insight-visual .dashboard-carousel-crop { aspect-ratio: 4/3; } }

/* Mobile QA refinements only; desktop styles remain unchanged. */
@media(max-width:700px) {
  .landing .showcase-insight-layout { gap: 24px; margin-block-start: 40px; }
  .landing .showcase-insight-visual .dashboard-carousel-controls { display: grid; grid-template-columns: 44px minmax(0,1fr) 44px; gap: 6px; padding: 12px 10px; direction: rtl; }
  .landing .dashboard-carousel-dots { justify-content: center; gap: 0; }
  .landing .dashboard-carousel-dots button { inline-size: 36px; min-block-size: 44px; }
  .landing .dashboard-carousel-status { grid-column: 1 / -1; text-align: center; }
  .landing .dashboard-original-link { grid-column: 1 / -1; text-align: center; font-size: 12px; }
  .landing .showcase-insight-visual .dashboard-carousel-slide figcaption { padding: 14px 16px 4px; }
  .landing .showcase-insight-visual .dashboard-carousel-slide figcaption p { font-size: 13px; line-height: 1.7; }
  .landing .showcase-insight-visual { padding-block: 20px; }
}
@media(max-width:360px) { .landing .dashboard-carousel-dots button { inline-size: 30px; } }

/* Extend only the preview background to the left viewport edge. */
@media(min-width:1024px) { .landing .showcase-insight-visual::before { left: min(-24px,calc((1104px - 100vw) / 2)); border-start-start-radius: 0; border-end-start-radius: 0; } }