:root{
  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --bg: #f6f8fc;
  --surface: #ffffff;
  --text: #0f172a;
  --muted: #475569;
  --border: rgba(15,23,42,.12);
  --shadow: 0 18px 60px rgba(2,6,23,.12);

  --accent: #2563eb;

  --container: 1180px;
  --headerH: 72px;
  --footerH: 56px;

  --r: 22px;
  --r2: 16px;
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }
body.lb{
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(900px 520px at 18% 0%, rgba(37,99,235,.10), transparent 60%),
    radial-gradient(900px 520px at 88% 8%, rgba(99,102,241,.08), transparent 55%),
    var(--bg);
}

.lb-container{
  width: min(var(--container), calc(100% - 32px));
  margin: 0 auto;
}

/* Skip link */
.lb-skip{
  position: absolute;
  left: -999px;
  top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #0b1220;
  color: #fff;
  text-decoration: none;
  z-index: 999;
}
.lb-skip:focus{ left: 12px; }

/* Header */
.lb-header{
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--headerH);
  display: grid;
  align-items: center;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.lb-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}

.lb-brand{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
  color: inherit;
}
.lb-brand__mark{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  font-weight: 900;
  color:#fff;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  box-shadow: 0 12px 20px rgba(37,99,235,.18);
}
.lb-brand__text{ display:grid; line-height: 1.05; }
.lb-brand__name{ font-weight: 950; letter-spacing: -0.01em; }
.lb-brand__sub{ font-size: 12px; color: rgba(15,23,42,.60); }

.lb-topnav{ display:flex; align-items:center; gap: 10px; flex-wrap: wrap; }
.lb-link{
  text-decoration:none;
  font-weight: 800;
  font-size: 14px;
  color: rgba(15,23,42,.78);
  padding: 9px 10px;
  border-radius: 12px;
}
.lb-link:hover{ background: rgba(37,99,235,.08); }
.lb-link.is-active{ background: rgba(15,23,42,.06); color: rgba(15,23,42,.92); }

.lb-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 14px;
  padding: 10px 12px;
  border: 1px solid transparent;
  text-decoration:none;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
}
.lb-btn--primary{ color:#fff; background: linear-gradient(135deg, #602A42 0%, #B86B99 100%); font-family: 'Plus Jakarta Sans'; }
.lb-btn--ghost{ background: transparent; border-color: rgba(15,23,42,.14); color: rgba(15,23,42,.86); }
.lb-btn--soft{ background: rgba(15,23,42,.04); border-color: rgba(15,23,42,.10); color: rgba(15,23,42,.86); }

.lb-btn:focus-visible, .lb-link:focus-visible, .lb-arrow:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(37,99,235,.18);
}

/* Carousel wrapper */
.lb-carousel{
  position: relative;
  height: calc(100dvh - var(--headerH) - var(--footerH));
  min-height: 560px;
}

/* Track + slide */
.lb-track{
  height: 100%;
  display: flex;
  transition: transform .45s cubic-bezier(.2,.9,.2,1);
  will-change: transform;
}

.lb-slide{
  flex: 0 0 100%;
  height: 100%;
  padding: 22px 0;
}

.lb-spread{
  height: 100%;
  width: min(var(--container), calc(100% - 32px));
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 22px;

  border-radius: 28px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: var(--shadow);
  overflow: hidden;
}

@media (max-width: 980px){
  .lb-carousel{ height: auto; min-height: unset; }
  .lb-slide{ padding: 16px 0; }
  .lb-spread{ grid-template-columns: 1fr; }
}

/* Media (left page) */
.lb-media{
  position: relative;
  background: #fff;
}
.lb-media img{
  width: 100%;
  height: 100%;
  display:block;
  object-fit: contain;
}
.lb-media__ph{
  height: 100%;
  display:grid;
  place-items:center;
  color: rgba(15,23,42,.45);
  font-weight: 900;
}

/* Content (right page) */
.lb-content{
  padding: 22px;
  display: grid;
  align-content: start;
  gap: 10px;
  overflow: none;
}

.lb-kicker{
  font-weight: 950;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(15,23,42,.55);
}

.lb-title{
  margin: 0;
  font-size: clamp(26px, 2.2vw, 40px);
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.lb-subtitle{
  margin: 0;
  color: var(--muted);
  max-width: 46ch;
}

.lb-price{
  margin-top: 6px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(15,23,42,.03);
  font-weight: 900;
}

/* Specs table */
.lb-specs{
  margin-top: 6px;
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 16px;
  background: rgba(255,255,255,.9);
}
.lb-specs__title{
  padding: 12px;
  font-weight: 950;
  letter-spacing: -0.01em;
}
.lb-specs table{
  width: 100%;
  border-collapse: collapse;
}
.lb-specs th, .lb-specs td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(15,23,42,.08);
  vertical-align: top;
  font-size: 14px;
}
.lb-specs tr:last-child th, .lb-specs tr:last-child td{ border-bottom: none; }
.lb-specs th{
  width: 42%;
  background: rgba(15,23,42,.03);
  color: rgba(15,23,42,.75);
  text-align: left;
  font-weight: 950;
}

/* Video */
.lb-video__title{
  margin-top: 10px;
  font-weight: 950;
}
.lb-embed{
  margin-top: 8px;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r2);
  overflow: hidden;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(15,23,42,.03);
}
.lb-embed iframe{ width: 100%; height: 100%; display:block; }

/* Pager */
.lb-pager{
  margin-top: auto;
  display:flex;
  align-items: baseline;
  gap: 6px;
  color: rgba(15,23,42,.55);
  font-weight: 900;
}
.lb-pager__num{ color: rgba(15,23,42,.90); font-size: 18px; }

/* Arrows */
.lb-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.14);
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 24px rgba(2,6,23,.12);
  cursor: pointer;
  font-size: 34px;
  line-height: 1;
  color: rgba(15,23,42,.85);
}
.lb-arrow--prev{ left: 14px; }
.lb-arrow--next{ right: 14px; }
@media (max-width: 980px){
  .lb-arrow{ top: 50vh; }
}

/* Footer */
.lb-footer{
  height: var(--footerH);
  display:grid;
  align-items:center;
  border-top: 1px solid var(--border);
  background: rgba(255,255,255,.86);
}
.lb-footer__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  color: rgba(15,23,42,.62);
  font-weight: 800;
  font-size: 13px;
}
.lb-footer__links a{
  color: rgba(15,23,42,.70);
  text-decoration: none;
  margin-left: 12px;
}
.lb-footer__links a:hover{ text-decoration: underline; }

/* Screen-reader only */
.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip: rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.lb-carousel{ overflow: hidden; }
.lb-track{ position: relative; z-index: 1; }
.lb-arrow{ position: absolute; z-index: 10; pointer-events: auto; }

.g-overlay{
  position: fixed; inset: 0;
  background: rgba(2,6,23,.55);
  backdrop-filter: blur(4px);
  z-index: 2000;
}

.g-modal{
  position: fixed;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(1120px, 94vw);
  max-height: min(88vh, 940px);
  overflow: auto;
  border-radius: 24px;
  background: #fff;
  border: 1px solid rgba(15,23,42,.14);
  box-shadow: 0 24px 80px rgba(2,6,23,.30);
  z-index: 2001;
}

.g-head{
  position: sticky; top: 0;
  display:flex; align-items:flex-start; justify-content:space-between;
  gap: 12px;
  padding: 14px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(15,23,42,.10);
}

.g-kicker{
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(15,23,42,.55);
}
.g-title{ margin: 6px 0 0; letter-spacing: -0.02em; }

.g-close{
  width: 42px; height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.14);
  background: rgba(15,23,42,.04);
  font-size: 22px;
  cursor: pointer;
}

.g-body{
  padding: 14px;
  display:grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 14px;
}
@media (max-width: 980px){ .g-body{ grid-template-columns: 1fr; } }

.g-viewer{ position: relative; }
.g-nav{
  position:absolute;
  top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.14);
  background: rgba(255,255,255,.90);
  box-shadow: 0 12px 24px rgba(2,6,23,.12);
  cursor: pointer;
  font-size: 30px;
  line-height: 1;
  z-index: 2;
}
.g-nav--prev{ left: 10px; }
.g-nav--next{ right: 10px; }

.g-thumbs{
  margin-top: 10px;
  display:flex;
  gap: 10px;
  overflow:auto;
  padding-bottom: 4px;
}
.g-thumb{
  width: 88px; height: 62px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.14);
  background: rgba(15,23,42,.03);
  cursor:pointer;
  flex: 0 0 auto;
  overflow:hidden;
}
.g-thumb img{ width:100%; height:100%; object-fit: cover; display:block; }
.g-thumb.is-active{ outline: 3px solid rgba(37,99,235,.25); border-color: rgba(37,99,235,.35); }

.g-side{ display:grid; align-content:start; gap: 12px; }
.g-price{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(15,23,42,.03);
  font-weight: 900;
}
.g-block{
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 16px;
  overflow:hidden;
}
.g-block__title{
  padding: 12px 12px 0;
  font-weight: 950;
  letter-spacing: -0.01em;
}
.g-specs table{ width:100%; border-collapse: collapse; }
.g-specs th, .g-specs td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(15,23,42,.08);
  vertical-align: top;
}
.g-specs tr:last-child th, .g-specs tr:last-child td{ border-bottom: none; }
.g-specs th{
  width: 42%;
  background: rgba(15,23,42,.03);
  color: rgba(15,23,42,.75);
  text-align:left;
  font-weight: 950;
}
.g-details{ padding: 12px; color: rgba(15,23,42,.78); }
.g-overlay{ z-index: 9998; }
.g-modal{ z-index: 9999; }

.lb-desc{
  margin: 6px 0 0;
  color: rgba(15,23,42,.72);
  font-size: 14px;
  line-height: 1.45;
  max-width: 52ch;
}

/* 1) Left page image in slides: show full image, no crop */
.lb-media{
  position: relative;
  overflow: hidden;
  background: #fff; /* fills letterbox gaps */
}

.lb-media img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;   /* no crop */
  object-position: center;
}

/* 2) Slide embed (YouTube iframe) fits perfectly */
.lb-embed{
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 16px;
  background: rgba(15,23,42,.03);
}

.lb-embed iframe{
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

/* 3) Popup gallery stage: no crop for images + mp4, iframe fills box */
/* Modal size: keep it inside viewport */
.g-modal{
  max-height: 88vh;
  overflow: auto;
}

/* Two-column layout: prevent the left viewer from stretching weirdly */
.g-body{
  align-items: start;
}

/* Stage: clamp height so it doesn't overflow, keep nice ratio */

.g-thumb{
  width: 88px;
  height: 62px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(15,23,42,.14);
  background: #fff;
}

.g-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;     /* thumbnails can be cropped, main stage is not */
  display: block;
}
.g-nav{ width: 42px; height: 42px; font-size: 26px; }
.lb-media{ overflow:hidden; background:#fff; display:flex; align-items:center; justify-content:center; }
.lb-media img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; }
/* POPUP: stage that never crops and never overflows */

.g-stage{
  width: 100%;
  height: min(52vh, 520px);
  overflow: hidden;
  border-radius: 18px;
  background: #fff; /* letterbox */
  border: 1px solid rgba(15,23,42,.12);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Important: don't force width/height 100% (that can stretch) */
.g-stage img,
.g-stage video{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* iframe should fill stage box */
.g-stage iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* Fullscreen mode (no header/footer) */
.lb-carousel{
  height: 100vh;     /* full viewport */
  min-height: 100vh;
}

/* optional: remove extra padding in slides */
.lb-slide{ padding: 0; }
.lb-spread{
  height: 100vh;
  width: 100vw;
  margin: 0;
  border-radius: 0;
}

/* top-right logo */
.lb-cornerlogo{
  position: fixed;
  top: 5px;
  right: 18px;
  z-index: 9999;
  text-decoration: none;
  color: inherit;
}

.lb-cornerlogo__mark{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #602A42 0%, #B86B99 100%);
  box-shadow: 0 18px 40px rgba(2,6,23,.20);
  font-family: 'Plus Jakarta Sans';
}
/* Main media should size itself by its intrinsic ratio */
.lb-media{
  background: #fff;
  overflow: hidden;
  display: block;
}

/* Images: full width, height auto (keeps ratio) */
.lb-media img{
  width: 100%;
  height: auto;
  display: block;
}

/* MP4 video: full width, height auto (keeps ratio) */
.lb-media video{
  width: 100%;
  height: auto;
  display: block;
}

/* YouTube iframe needs a ratio wrapper (iframes don't auto-size by content) */
.lb-ms__embed,
.lb-embed{
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}

.lb-ms__embed iframe,
.lb-embed iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.lb-ms{ display:flex; flex-direction:column; height:100%; }
.lb-ms__stage{
  flex: 1;
  background:#fff;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.lb-ms__stage img,
.lb-ms__stage video{
  width: 100%;
  height: 100%;
  object-fit: contain;   /* no crop */
  display:block;
}
.lb-ms__embed{ width:100%; height:100%; }
.lb-ms__embed iframe{ width:100%; height:100%; border:0; display:block; }

.lb-ms__thumbs{
  display:flex;
  gap:10px;
  padding: 10px;
  overflow-x:auto;
  background: rgba(255,255,255,.9);
  border-top: 1px solid rgba(15,23,42,.10);
}
.lb-ms__thumb{
  width: 84px;
  height: 56px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.14);
  overflow:hidden;
  background: #fff;
  flex: 0 0 auto;
  cursor:pointer;
  padding: 0;
}
.lb-ms__thumb img{ width:100%; height:100%; object-fit: cover; display:block; }
.lb-ms__thumb.is-active{ outline: 3px solid rgb(184, 107, 153, 0.35); border-color: rgb(184, 107, 153, 0.35); }

.lb-ms__vid{
  width:100%; height:100%;
  display:grid;
  place-items:center;
  font-size: 22px;
  color: rgba(37,99,235,.95);
  background: rgba(37,99,235,.08);
}

.lb-carousel{ height: auto; min-height: unset; }
.lb-slide{ height: auto; }
.lb-spread{ height: auto; }
@media (max-width: 768px){
  .lb-media{
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}
/* Mobile homepage/dashboard fixes */
@media (max-width: 768px) {
  .dash-frame { padding: 12px; border-radius: 18px; } /* reduce heavy padding */

  .frame-grid { grid-template-columns: 1fr !important; gap: 10px; } /* 1 column */

  .frame-card { padding: 14px 14px; border-radius: 16px; } /* more compact cards */

  /* HERO */
  .hero-window .hero-main {
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: left !important;
    gap: 12px !important;
  }

  .hero-window .hero-copy { flex: unset !important; }
  .hero-window .hero-visual { order: 2 !important; width: 100% !important; }
  .hero-window .hero-copy { order: 1 !important; }

  .hero-title { font-size: 16px !important; line-height: 1.25 !important; }
  .hero-sub { font-size: 12px !important; line-height: 1.35 !important; }

  /* Stats: 2 columns on mobile to avoid squish */
  .hero-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .hero-stat { padding: 10px !important; }

  /* Prevent any “stacked window” visual from overflowing */
  .window-stack { width: 100% !important; max-width: 180px; margin: 0 auto; }
  .window-card { max-width: 100%; }
}
:root{
  --header-h: 56px;
}

.site-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9998;

  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(148,163,184,0.35);

  padding-top: env(safe-area-inset-top);
}

.site-logo{
  height: var(--header-h);
  padding: 10px 14px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.site-logo img{
  height: 30px;
  width: auto;
  display: block;
  object-fit: contain;
}

/* This reserves space so content/media never goes behind header */
.site-header-spacer{
  height: calc(var(--header-h) + env(safe-area-inset-top));
}
html{ scroll-padding-top: calc(var(--header-h) + env(safe-area-inset-top) + 8px); }

body.no-sidebar .app-content,
body.no-sidebar main.app-content,
body.no-sidebar .app-main{
  margin-left: 0 !important;
  padding-left: 0 !important;
}

body.no-sidebar .app-sidebar{
  display: none !important;
}
/* Avoid forcing extra height on wrappers */
.app-main,
.app-content,
.dash-frame{
  min-height: auto !important;
  height: auto !important;
}

/* Remove accidental big bottom padding/margin */
body, .app-content, .dash-frame{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.lb-media.lb-ms p.lb-subtitle {
    font-size: 10px;
    padding-top: 5px;
}
.lb-media.lb-ms h1.lb-title {
    font-size: clamp(20px, 2.2vw, 20px);
    padding-top: 5px;
    text-align: center;
}
.lb-media.lb-ms .lb-kicker {
    font-size: 10px;
}
.lb-media.lb-ms {
    padding-top: 15px;
}
.cs-overlay{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 5000;
}
.cs-modal{
  position: fixed;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(980px, calc(100vw - 24px));
  max-height: min(80vh, 760px);
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  z-index: 5001;
  display: flex;
  flex-direction: column;
}
.cs-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #eee;
}
.cs-body{ padding: 14px 16px; overflow:auto; }
.cs-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 900px){ .cs-grid{ grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 560px){ .cs-grid{ grid-template-columns: 1fr;} }

.cs-card{
  border: 1px solid #eee;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
.cs-card__img{
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  background: #f3f4f6;
}
.cs-card__body{ padding: 10px 12px; }
.cs-card__title{ font-weight: 800; margin: 0 0 6px; font-size: 14px; }
.cs-card__meta{ font-size: 12px; color: #555; margin: 0 0 8px; }
.cs-card__desc{ font-size: 12px; color: #333; margin: 0; }
.cs-close{
  width: 34px; height: 34px;
  border-radius: 10px;
  border: 1px solid #eee;
  background: #fff;
  cursor: pointer;
}