/* Base styles */
:root {
  /* Palette aligned with Login Test.html */
  --bg: #1e1e1e;
  --surface: #2c2c2c;
  --muted-surface: #252525;
  --text: #cfcfd1;
  --muted: #9a9aa0;
  --primary: #6e38ec; /* brand */
  --primary-600: #5b2bdc;
  --accent: #9b7dff;
  --success: #3ddc97;
  --warning: #ffcf5b;
  --danger: #ff6b6b;
  --border: #3d3d3d;
  --card-border: #3d3d3d;
  --shadow: rgba(0,0,0,0.35);
  --radius: 10px;
  --radius-sm: 6px; /* buttons and inputs */
  --radius-lg: 14px;
  --max-embed-width: 800px; /* target iframe max width */
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: Ubuntu, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}

/* Constrain for iframe embedding */
.container {
  width: min(var(--max-embed-width), 92%);
  margin-inline: auto;
}

.section { padding: 56px 0; }
.section-title { font-size: clamp(1.2rem, 1rem + 1.6vw, 1.8rem); margin: 0 0 18px; }

h1, h2, h3 { color: var(--text); }
p { color: var(--muted); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  color: white;
  text-decoration: none;
  border: 1px solid transparent;
  background: var(--primary);
  transition: transform .08s ease, box-shadow .15s ease, background .15s ease, filter .15s ease;
  font-weight: 600;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.04); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--primary); box-shadow: none; }
.btn-primary:hover { filter: brightness(1.06); }

.btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--text); }
.btn-small { padding: 8px 12px; font-size: .95rem; }
.btn-block { width: 100%; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--surface); border-bottom: 1px solid var(--border); }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 700; }
.logo-mark { font-size: 1.25rem; }
.logo-text { font-size: 1.05rem; }

.nav-list { display: flex; align-items: center; gap: 12px; list-style: none; margin: 0; padding: 0; }
.nav-list a { color: var(--muted); text-decoration: none; font-weight: 600; padding: 8px 10px; border-radius: 8px; }
.nav-list a:hover { color: var(--text); background: rgba(255,255,255,0.06); }

.nav-toggle { display: none; position: relative; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border); background: var(--muted-surface); }
.nav-toggle .bar { position: absolute; left: 8px; right: 8px; height: 2px; background: var(--text); border-radius: 2px; transition: .2s; }
.nav-toggle .bar:nth-child(1) { top: 11px; }
.nav-toggle .bar:nth-child(2) { top: 18px; }
.nav-toggle .bar:nth-child(3) { top: 25px; }

@media (max-width: 800px) {
  .nav-toggle { display: inline-block; }
  .nav-list { position: absolute; right: 0; top: 52px; flex-direction: column; align-items: stretch; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; width: min(280px, 90vw); display: none; }
  .nav-list.open { display: flex; }
}

/* Hero */
.hero { padding-top: 32px; }
.hero .container { margin-bottom: 24px; }
.hero .container:last-child { margin-bottom: 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: center; }
.hero h1 { font-size: clamp(1.6rem, 1.2rem + 2.2vw, 2.4rem); line-height: 1.08; margin: 0 0 12px; }
.hero p { margin: 0 0 18px; }
.cta-group { display: flex; gap: 10px; flex-wrap: wrap; }

.hero .demo { background: var(--surface); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 12px; box-shadow: 0 10px 30px -20px var(--shadow); }
.card-header { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.02); font-weight: 700; }
.card-body { padding: 12px; }
.demo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.demo-list li { display: flex; align-items: center; gap: 10px; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot-success { background: var(--success); }
.dot-primary { background: var(--primary); }
.dot-purple { background: var(--accent); }

/* Hero slider */
.hero-slider { position: relative; height: clamp(180px, 36vw, 260px); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--card-border); background: #0f0f10; }
.hero-slider .slide { 
  position: absolute; inset: 0; display: grid; place-items: center start; padding: 16px; 
  opacity: 0; transition: opacity .6s ease; 
  /* Layer 1: gradient overlay; Layer 2: slide image */
  background-image: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.9) 22%, rgba(0,0,0,.7) 40%, rgba(0,0,0,.5) 58%, rgba(0,0,0,.5) 100%), var(--slide-bg);
  background-position: left top, right center;
  background-size: 100% 100%, cover;
  background-repeat: no-repeat, no-repeat;
}
.hero-slider .slide.is-active { opacity: 1; }
.hero-slider .slide-content { position: relative; z-index: 2; max-width: 70%; }
.hero-slider .eyebrow { font-weight: 700; color: #cfcfcf; opacity: .9; margin-bottom: 6px; }
.hero-slider h2 { margin: 0; font-size: clamp(1.05rem, .8rem + 1.4vw, 1.4rem); line-height: 1.2; }
.hero-slider h2 strong { font-weight: 800; }

@media (max-width: 800px) { .grid-2 { grid-template-columns: 1fr; } }

/* Cards & Features */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.card { background: var(--surface); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 16px; box-shadow: 0 10px 24px -16px var(--shadow); }
.card.feature .icon { font-size: 1.6rem; }
.card.feature h3 { margin: 8px 0 6px; }
.card.feature p { margin: 0; color: var(--muted); }

.icon-large { font-size: 2rem; }

@media (max-width: 800px) { .cards, .benefit-cards, .pricing-cards, .support-cards { grid-template-columns: 1fr; } }

/* Interactive details (CSS only) */
.card.interactive details { background: transparent; border: none; padding: 0; }
.card.interactive summary { list-style: none; display: flex; gap: 12px; align-items: center; cursor: pointer; padding: 8px; border-radius: 8px; }
.card.interactive summary::-webkit-details-marker { display: none; }
.card.interactive summary h3 { margin: 0; }
.card.interactive .detail-body { margin-top: 10px; color: var(--muted); padding-left: 36px; }
.card.interactive details[open] summary { background: linear-gradient(90deg, rgba(103,67,227,0.12), rgba(127,102,255,0.06)); box-shadow: inset 0 0 0 1px rgba(103,67,227,0.06); }

/* Pricing adjustments */
.pricing { background: var(--bg); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.pricing-cards { grid-template-columns: 1fr; gap: 14px; justify-items: center; }
.card.price { position: relative; text-align: left; display: flex; flex-direction: column; gap: 12px; padding: 24px 28px; border-radius: var(--radius-lg); }
.card.price .price-tag { font-size: clamp(2.2rem, 3.6vw, 3.8rem); font-weight: 800; color: var(--text); line-height: 1.05; }
.card.price .currency { opacity: .95; font-size: .6em; margin-right: 6px; vertical-align: top; }
.card.price .period { opacity: .8; font-size: 1rem; margin-left: 4px; display: block; margin-top: 6px; }
.card.price .badge { position: absolute; top: 12px; right: 12px; background: linear-gradient(180deg, var(--accent), var(--primary)); padding: 6px 10px; border-radius: 999px; font-size: .78rem; border: 1px solid rgba(255,255,255,0.04); }
.card.price.popular { border-color: rgba(103,67,227,0.35); box-shadow: 0 16px 44px -24px rgba(103,67,227,0.45); transform: translateY(-6px); }

/* Left align bullets within pricing cards */
.card.price .features-list { 
  margin: 0; 
  padding-left: 18px; 
  text-align: left; 
  list-style: disc; 
}
.card.price .features-list li { margin: 4px 0; }

/* Grid layout inside pricing cards for wider screens */
.card.price h3 { margin: 0 0 6px; font-size: clamp(1.25rem, 1rem + 1.4vw, 1.75rem); font-weight: 800; letter-spacing: .2px; }
@media (min-width: 700px) {
  .card.price {
    display: grid;
    grid-template-columns: minmax(220px, .9fr) minmax(320px, 1.1fr);
    grid-template-areas:
      "title title"
      "price features"
      "price cta";
    align-items: start;
    gap: 12px 12px; /* reduce middle whitespace */
  }
  .card.price h3 { grid-area: title; }
  .card.price .price-tag { grid-area: price; }
  .card.price .features-list { grid-area: features; }
  .card.price .btn-block { grid-area: cta; justify-self: end; width: 100%; max-width: 480px; padding: 12px 18px; font-size: 1.02rem; border-radius: 14px; }

  /* Width differentiation and centering */
  .card.price { width: 100%; max-width: 780px; }
  .card.price.popular { max-width: 820px; }
  .card.price:not(.popular) { max-width: 720px; }
}

/* Subtle shimmer effect on Popular Choice CTA */
.card.price.popular .btn-block { position: relative; overflow: hidden; }
.card.price.popular .btn-block::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0) 38%,
    rgba(255,255,255,0.06) 44%,
    rgba(255,255,255,0.14) 50%,
    rgba(255,255,255,0.06) 56%,
    rgba(255,255,255,0) 62%,
    rgba(255,255,255,0) 100%
  );
  filter: blur(0.6px);
  transform: translateX(-120%);
  animation: tv-shimmer 4.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes tv-shimmer {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

.card.price.popular .btn-block:hover::after { animation-duration: 3.8s; }

@media (prefers-reduced-motion: reduce) {
  .card.price.popular .btn-block::after { animation: none; }
}

/* Emphasis sizing: make Popular Choice slightly larger */
.card.price:not(.popular) { padding: 20px 24px; }
.card.price.popular { padding: 28px 32px; }

.card.price:not(.popular) .price-tag { font-size: clamp(2rem, 3.2vw, 3.4rem); }
.card.price.popular .price-tag { font-size: clamp(2.4rem, 3.8vw, 4.2rem); }

.card.price:not(.popular) h3 { font-size: clamp(1.15rem, .95rem + 1.2vw, 1.6rem); }
.card.price.popular h3 { font-size: clamp(1.35rem, 1.05rem + 1.6vw, 1.9rem); }

@media (min-width: 700px) {
  .card.price.popular .btn-block { max-width: 520px; padding: 14px 20px; font-size: 1.06rem; }
  .card.price:not(.popular) .btn-block { max-width: 440px; padding: 10px 16px; font-size: 0.98rem; }
}

/* Make pricing cards horizontal (scrollable row) on small screens */
@media (max-width: 800px) {
  .pricing-cards { 
    display: grid; 
    grid-template-columns: 1fr; 
    overflow: visible; 
    gap: 14px;
    padding-bottom: 0; 
  }
  .pricing-cards .card { 
    flex: initial; 
    min-width: auto; 
    scroll-snap-align: unset; 
  }
}

/* FAQ */
.faq details { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.faq details + details { margin-top: 10px; }
.faq summary { cursor: pointer; font-weight: 700; }
.faq p { margin: 8px 0 0; color: var(--muted); }

/* Support */
.support-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }

/* Contact / Form stripped (we're using mailto) */

/* Footer */
.site-footer { border-top: 1px solid var(--border); background: var(--surface); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 0; }
.footer-inner p { margin: 0; color: var(--muted); }
.footer-inner .social { display: flex; list-style: none; gap: 12px; margin: 0; padding: 0; }
.footer-inner .social a { color: var(--muted); text-decoration: none; }
.footer-inner .social a:hover { color: var(--text); }

/* Utilities */
.hidden { display: none !important; }

/* Embedded Login (from Login Test) */
.login-embed { display: grid; place-items: center; }
.login-embed .shell{ width:380px; background:var(--surface); border:1px solid var(--card-border); border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.35); overflow:hidden; }
.login-embed .titlebar{ display:flex; align-items:center; gap:.6rem; background:linear-gradient(#2a2a2a,#252525); border-bottom:1px solid var(--card-border); padding:10px 12px; }
.login-embed .titlebar h1{ font-size:1rem; margin:0; letter-spacing:.3px; color:var(--text); }
.login-embed .panel{ padding:18px; }
.login-embed h2{ color:var(--text); font-size:1.05rem; margin:.2rem 0 1rem; text-align:center }
.login-embed label{ display:block; font-size:.82rem; color:var(--muted); margin:.6rem 0 .35rem }
.login-embed .field{ position:relative }
.login-embed input{ width:100%; background:var(--bg); color:var(--text); border:1px solid var(--card-border); border-radius:6px; padding:10px 12px 10px 36px; outline:none; transition:border-color .2s ease, box-shadow .2s ease }
.login-embed input:focus{ border-color:#565656; box-shadow:0 0 0 2px rgba(255,255,255,.04) inset }
.login-embed .icon{ position:absolute; left:10px; top:50%; translate:0 -50%; opacity:.8 }
.login-embed .btn{ width:100%; margin-top: 10px; }
.login-embed .rows{ display:grid; gap:.6rem; margin:.8rem 0 1rem }
.login-embed .row{ display:flex; justify-content:space-between; align-items:center; padding:10px 12px; background:var(--bg); border:1px solid var(--card-border); border-radius:6px }
.login-embed .k{ color:var(--muted) }
.login-embed .v{ font-weight:700 }
.login-embed .hint{ display:flex; gap:.5rem; align-items:center; justify-content:center; color:var(--muted); font-size:.78rem; margin-top:.6rem; text-align:center; line-height:1.2em }

/* Login animation states - smooth transition without height collapse */
.login-embed .shell { min-height: 280px; }
.login-embed .panel { flex-grow: 1; display: flex; flex-direction: column; }
.login-embed .panel[aria-hidden="true"] { display: none; }
.login-embed .panel.hide { display: none; }
.login-embed .panel.show { display: flex; }

/* small print for iframe hosts */
:root { --embed-safe-padding: 12px; }
body { padding: var(--embed-safe-padding); }

/* Gallery walkthrough */
/* Shell wrapper to match login animation style */
.ui-shell { background: var(--surface); border: 1px solid var(--card-border); border-radius: var(--radius); overflow: hidden; box-shadow: 0 10px 30px -20px var(--shadow); }
.ui-shell .titlebar { display:flex; align-items:center; gap:.6rem; background: linear-gradient(#2a2a2a,#252525); border-bottom: 1px solid var(--card-border); padding: 10px 12px; }
.ui-shell .titlebar h1 { font-size: 1rem; margin: 0; letter-spacing: .3px; color: var(--text); }
.ui-shell .ui-body { padding: 12px; }

/* Tighten internal spacing for gallery inside shell */
.gallery-shell .gallery-filters { margin: 0 0 10px; }
.gallery-shell .gallery-pages { padding: 10px; border-radius: 10px; }
.gallery-shell .gallery-pager { margin-top: 10px; }
.gallery .gallery-controls { display: flex; gap: 8px; margin: 8px 0 14px; flex-wrap: wrap; }
.gallery .gallery-controls label { cursor: pointer; user-select: none; }

/* Active page highlighting via radio state */
#gallery #g1:checked ~ .gallery-controls label[for="g1"],
#gallery #g2:checked ~ .gallery-controls label[for="g2"],
#gallery #g3:checked ~ .gallery-controls label[for="g3"] {
  background: linear-gradient(180deg, var(--primary), var(--primary-600));
  color: #fff;
  border-color: transparent;
}

.gallery .gallery-pages { position: relative; }
.gallery .gallery-page { display: none; grid-template-columns: repeat(3, 1fr); gap: 12px; }

/* Show selected page */
#gallery #g1:checked ~ .gallery-pages .page1 { display: grid; }
#gallery #g2:checked ~ .gallery-pages .page2 { display: grid; }
#gallery #g3:checked ~ .gallery-pages .page3 { display: grid; }

@media (max-width: 760px) {
  .gallery .gallery-page { grid-template-columns: repeat(2, 1fr); }
}

.asset-card { overflow: hidden; padding: 0; display: flex; flex-direction: column; background: var(--surface); }
 .asset-card img { width: 100%; aspect-ratio: 1/1; object-fit: contain; background: #121212; border-bottom: 1px solid var(--card-border); display: block; }
.asset-card .asset-meta { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.asset-card .asset-meta h4 { margin: 0; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asset-card .asset-actions { display: flex; align-items: center; justify-content: space-between; background: var(--bl-blue); margin: 0 10px 10px 10px; padding: 10px 14px; border-radius: 8px; border: none; }
.asset-card .asset-actions .btn { background: transparent; color: #fff; padding: 0; border: none; font-weight: 800; letter-spacing: .1px; }
.asset-card .asset-actions .btn:hover { text-decoration: underline; }
.asset-card .asset-actions .credits { color: #fff; background: transparent; border: 0; padding: 0; font-weight: 700; }

.asset-card:hover { box-shadow: 0 16px 36px -20px rgba(103,67,227,0.35); transform: translateY(-2px); transition: transform .12s ease, box-shadow .18s ease; }
/* Gallery filters */
.gallery-filters { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0 12px; }
.filter-input { flex: 1; min-width: 140px; padding: 10px 12px; background: #0b0d12; color: var(--text); border: 1px solid var(--card-border); border-radius: 8px; }
.filter-right { display: flex; align-items: center; gap: 8px; }
.filter-select { 
  padding: 10px 35px 10px 12px; 
  background-color: #0b0d12; 
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa6bf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  color: var(--text); 
  border: 1px solid var(--card-border); 
  border-radius: 8px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.filter-select:hover {
  border-color: rgba(255,255,255,0.2);
  background-color: #141419;
}

.filter-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(103,67,227,0.2);
}

/* Gallery nav (prev/next) */
.gallery-nav { display: none; margin-top: 12px; justify-content: space-between; gap: 8px; }
.gallery-nav .spacer { flex: 1; }
/* Show matching nav row for each page */
#gallery #g1:checked ~ .nav1 { display: flex; }
#gallery #g2:checked ~ .nav2 { display: flex; }
#gallery #g3:checked ~ .nav3 { display: flex; }

/* Blender-like skin for gallery */
.blender-skin { --bl-ui-bg: var(--bg); --bl-panel: var(--surface); --bl-panel-2:#2f2f2f; --bl-stroke: var(--border); --bl-text: var(--text); --bl-muted: var(--muted); --bl-blue: var(--primary); --bl-blue-700: var(--primary-600); }

.blender-skin .gallery-filters { background: var(--bl-panel); border: 1px solid var(--bl-stroke); padding: 8px; border-radius: 6px; }
.blender-skin .filter-input, .blender-skin .filter-select { 
  background: var(--bl-panel-2); 
  border-color: #232323; 
  color: var(--bl-text); 
}

.blender-skin .filter-select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cfcfcf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: 16px 16px;
}

.blender-skin .filter-select:hover {
  background-color: #3f3f3f;
  border-color: #383838;
}

.blender-skin .filter-select:focus {
  border-color: var(--bl-blue);
  box-shadow: 0 0 0 2px rgba(74,110,224,0.3);
}

.blender-skin .gallery-pages { background: var(--bl-panel); border: 1px solid var(--bl-stroke); border-radius: var(--radius); padding: 12px; }
.blender-skin .gallery-page { grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 760px) { .blender-skin .gallery-page { grid-template-columns: repeat(3, 1fr); } }

.blender-skin .asset-card { background: var(--surface); border: 1px solid var(--card-border); border-radius: var(--radius); box-shadow: none; }
.blender-skin .asset-card img { border-bottom-color: var(--card-border); background: #121212; }
.blender-skin .asset-card .asset-meta { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.blender-skin .asset-card .asset-meta h4 { margin: 0 0 2px; font-weight: 600; letter-spacing: .1px; }
.blender-skin .asset-card .asset-actions { display: flex; align-items: center; justify-content: space-between; background: var(--bl-blue); margin: 0 10px 10px 10px; padding: 10px 14px; border-radius: 8px; border: none; }
.blender-skin .asset-card .asset-actions .btn { background: transparent; color: #fff; padding: 0; border: none; font-weight: 800; letter-spacing: .1px; }
.blender-skin .asset-card .asset-actions .btn:hover { text-decoration: underline; }
.blender-skin .asset-card .asset-actions .credits { color: #fff; background: transparent; border: 0; padding: 0; font-weight: 700; }

/* Tighter card visuals */
.blender-skin .asset-card { box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 1px 1px rgba(0,0,0,.3); }

/* Cleaner controls spacing */
.blender-skin .gallery-controls { gap: 6px; }
.blender-skin .gallery-controls .btn { padding: 6px 10px; border-radius: 6px; }

/* Section padding tweaks to resemble compact panel */
.blender-skin.section { padding-top: 40px; padding-bottom: 40px; }
/* Purchase→Import pill button (CSS-only) */
.asset-card .asset-meta { position: relative; }
.action-toggle { position: absolute; opacity: 0; pointer-events: none; }

/* Rounded pill */
.pill-btn { 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  gap: 8px; 
  padding: 8px 14px; 
  border-radius: var(--radius-sm); 
  background: var(--primary); 
  color: #fff; 
  font-weight: 700; 
  cursor: pointer; 
  border: none; 
  user-select: none; 
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
.pill-btn:hover { filter: brightness(1.03); }

/* Progress bar inside the button */
.progress { 
  position: absolute; 
  left: 0; 
  top: 0;
  bottom: 0;
  width: 0%;
  background: rgba(255,255,255,.2); 
  border-radius: 8px;
  transform: scaleX(0); 
  transform-origin: left;
  z-index: 1;
  overflow: hidden;
}
.progress::after { 
  content: ""; 
  position: absolute; 
  inset: 0; 
  background: linear-gradient(90deg, rgba(255,255,255,.3), rgba(255,255,255,.5)); 
  transform: translateX(-100%); 
}

/* Start loading when clicked (checked) */
.action-toggle:checked + label .progress { 
  transform: scaleX(1); 
  width: 100%;
  transition: transform .8s ease, width .8s ease; 
}
.action-toggle:checked + label .progress::after { 
  animation: loadbar 1.4s ease forwards; 
}
@keyframes loadbar { 
  to { transform: translateX(0); } 
}

/* Ensure text stays above progress bar */
.pill-btn .pill-text-default,
.pill-btn .pill-text-import {
  position: relative;
  z-index: 2;
}

/* Swap text to Import after loading finishes */
.pill-text-import { display: none; }
.action-toggle:checked + label.asset-actions .pill-text-default { display: none; }
.action-toggle:checked + label.asset-actions .pill-text-import { display: inline; }

/* Hide credits after purchase (when Import text is shown) */
.action-toggle:checked + label.asset-actions .credits { 
  opacity: 0;
  transition: opacity .3s ease .8s; /* Delay fade out until progress completes */
}

/* Blender skin integration: keep pill blue and rounded */
.blender-skin .pill-btn { background: var(--bl-blue); }
.blender-skin .pill-btn:hover { background: var(--bl-blue-700); filter: none; }

/* Make only the pill clickable, not the credits text */
.asset-actions .credits { 
  pointer-events: none;
  transition: opacity .3s ease;
}

/* Make the entire asset-actions div the button */
label.asset-actions {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: background 0.15s ease;
  border-radius: 8px !important;
  margin: 0 10px 10px 10px !important;
  padding: 10px 14px !important;
  position: relative;
}

label.asset-actions:hover {
  background: var(--bl-blue-700) !important;
}

/* Style the pill-btn as just text inside the blue bar */
.asset-card .pill-btn {
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  color: #fff !important;
  font-weight: 700;
  pointer-events: none;
  position: relative;
  overflow: visible;
}

.asset-card .pill-btn:hover {
  filter: none !important;
}

/* Feature rows (clean cards with icons) */
.feature-list { display: grid; grid-template-columns: 1fr; gap: 12px; }
.feature-row { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 12px; padding: 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--card-border); box-shadow: 0 8px 24px -20px rgba(0,0,0,.4); }
.icon-badge { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(180deg, rgba(110,56,236,0.18), rgba(110,56,236,0.08)); border: 1px solid rgba(110,56,236,0.25); color: #d9d2ff; }
.icon-badge .ti { font-size: 22px; line-height: 1; }
.feature-row h3 { margin: 0 0 4px; }
.feature-row p { margin: 0; }

@media (min-width: 760px) {
  .feature-row { padding: 16px; }
}

/* Blender-like bottom pager */
.blender-skin .gallery-controls { display: none; }
.blender-skin .gallery-nav { display: none !important; }

.gallery-pager { margin-top: 10px; display: grid; gap: 6px; justify-items: stretch; color: var(--muted); width: 100%; }
.pager-row { display: none; background: var(--surface); border: 1px solid var(--card-border); border-radius: var(--radius-sm); padding: 4px; gap: 4px; width: 100%; box-sizing: border-box; justify-content: center; align-items: center; }
.btn-page { min-width: 28px; height: 26px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--bg); border: 1px solid var(--card-border); border-radius: var(--radius-sm); color: var(--text); font-weight: 700; cursor: pointer; user-select: none; }
.btn-page:hover { filter: brightness(1.05); }
.btn-page.is-active { background: var(--primary); border-color: transparent; color: #fff; }
.btn-page.is-disabled { opacity: .45; cursor: default; }

.pager-caption { font-size: .85rem; opacity: .8; }

/* Show pager row and caption depending on selected page */
#gallery #g1:checked ~ .gallery-pager .row1 { display: flex; }
#gallery #g2:checked ~ .gallery-pager .row2 { display: flex; }
#gallery #g3:checked ~ .gallery-pager .row3 { display: flex; }
#gallery #g1:checked ~ .gallery-pager .cap1 { display: block; }
#gallery #g2:checked ~ .gallery-pager .cap2 { display: block; }
#gallery #g3:checked ~ .gallery-pager .cap3 { display: block; }

/* Hide other captions by default */
.gallery-pager .pager-caption { display: none; }

/* Account promo box (hero) */
.account-promo {
  margin-top: 18px;
  padding: 18px;
  border: 3px solid #cc2020; /* strong red border like mock */
  border-radius: 8px;
  background: transparent;
  color: #ff3b3b; /* bright red text */
  text-align: center;
  line-height: 1.5;
  font-weight: 600;
}
.account-promo p { margin: 6px 0; }

@media (max-width: 800px) {
  .account-promo { padding: 14px; border-width: 2px; }
}

/* Ensure hero layout spacing remains pleasant */
.hero-copy .cta-group { margin-bottom: 8px; }
/* remove demo account-promo styles (was red) -- replaced by account-card) */
.account-promo { display: none !important; }

/* Account card in hero media to match demo card style */
.card.account-card { margin-bottom: 12px; padding-bottom: 10px; }
.card.account-card .card-header { font-weight: 700; }
.card.account-card .card-body { padding-top: 10px; }
.card.account-card .demo-list li { align-items: center; color: var(--text); }
.card.account-card .dot { background: var(--primary); }

/* Ensure hero-media stacks cards vertically and aligns with login panel height */
.hero-media { display: flex; flex-direction: column; gap: 12px; }

@media (max-width: 800px) {
  .hero-media { order: 2; }
}

/* Media row: account card (left) and login demo (right) side by side - extend account card to match login demo */
.media-row { display: grid; grid-template-columns: 1fr 380px; gap: 12px; align-items: start; }
.media-row .login-embed { width: 100%; }
.media-row .account-card { padding: 0; min-height: 310px; display: flex; flex-direction: column; }

@media (max-width: 1000px) {
  .media-row { grid-template-columns: 1fr 340px; }
}
@media (max-width: 800px) {
  .media-row { grid-template-columns: 1fr; }
  .media-row .login-embed { order: 2; }
  .media-row .account-card { order: 1; }
}

/* Reduce shadow on demo/login when placed side-by-side to match visual weight */
.login-embed .shell { width: 100%; box-shadow: 0 10px 30px rgba(0,0,0,.28); display: flex; flex-direction: column; }

/* Ensure the card body can grow to fill available space */
.media-row .account-card .card-body { flex-grow: 1; }

/* Match padding between account card and login demo for equal heights */
.media-row .account-card .card-header { padding: 10px 12px; }
.media-row .account-card .card-body { padding: 18px; }

/* Ensure hero-media doesn't force vertical stacking */
.hero-media { display: block; }

/* Install CTA (drag into Blender) */
.install-card { 
  display: grid; 
  grid-template-columns: 1fr auto; 
  align-items: center; 
  gap: 14px; 
  margin-top: 10px; 
  background: linear-gradient(180deg, rgba(110,56,236,0.10), rgba(110,56,236,0.04));
  border-color: rgba(110,56,236,0.35);
}
.install-text .eyebrow { font-weight: 800; color: #d9d2ff; opacity: .9; letter-spacing: .2px; margin-bottom: 4px; }
.install-text h3 { margin: 0 0 4px; }
.install-text p { margin: 0; }

.drag-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(180deg, var(--primary), var(--primary-600));
  border: 1px solid rgba(255,255,255,0.06);
  user-select: none;
  cursor: grab;
  font-weight: 800;
  letter-spacing: .2px;
  white-space: nowrap;
}
.drag-pill:hover { filter: brightness(1.06); }
.drag-pill:active { cursor: grabbing; }
.drag-pill .drag-hint { opacity: .9; display: inline-flex; align-items: center; gap: 6px; background: rgba(0,0,0,.22); padding: 6px 10px; border-radius: 999px; font-weight: 700; }
.drag-pill.dragging { box-shadow: 0 0 0 3px rgba(155,125,255,0.35), 0 18px 40px -22px rgba(103,67,227,0.8); }

/* Inline Blender logo in drag hint */
.drag-pill .blender-logo { height: 19px; width: auto; display: inline-block; vertical-align: middle; filter: brightness(1.1); }

@media (max-width: 760px) {
  .install-card { grid-template-columns: 1fr; }
  .drag-pill { justify-self: start; }
}

/* Keep hand cursor during global dragging */
body.tv-dragging, body.tv-dragging * { cursor: grab !important; }