body { background: #0a0a0a; color: #fff; }

.lp-header { padding: 24px 56px; border-bottom: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: space-between; }
.lp-brand { display: flex; align-items: center; gap: 12px; }
.lp-logo { width: 40px; height: 40px; border-radius: 6px; background: linear-gradient(135deg, #f59e0b, #b45309); display: flex; align-items: center; justify-content: center; color: #000; font-weight: 900; font-size: 20px; }
.lp-title { font-size: 13px; font-weight: 600; letter-spacing: 0.15em; }
.lp-sub { font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 2px; }
.lp-nav { display: flex; align-items: center; gap: 24px; font-size: 12px; color: rgba(255,255,255,0.6); letter-spacing: 0.15em; }
.lp-nav a { transition: color 0.2s; }
.lp-nav a:hover { color: #fff; }
.lp-lang { border: 1px solid rgba(245,158,11,0.5); color: #fbbf24; padding: 6px 12px; border-radius: 999px; }

.lp-hero { padding: 64px 56px 40px; }
.lp-hero-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 48px; align-items: end; }
.lp-eyebrow { color: #fbbf24; letter-spacing: 0.4em; font-size: 11px; margin-bottom: 16px; }
.lp-heading { font-family: 'Playfair Display', serif; font-weight: 300; font-size: 60px; line-height: 1.05; margin: 0; }
.lp-heading .italic { font-style: italic; color: #fbbf24; }
.lp-hero-p { color: rgba(255,255,255,0.6); font-size: 14px; line-height: 1.7; }

.lp-grid { padding: 0 56px 80px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }


/* Template group headings */
.lp-group-heading {
  grid-column: 1 / -1;
  text-align: center;
  margin: 8px 0 -6px;
  font-family: 'Playfair Display', serif;
  font-size: clamp(30px, 3vw, 46px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  color: #fff;
}

.lp-group-heading--vision {
  margin-top: 34px;
}

.lp-card { display: block; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; overflow: hidden; background: #171717; transition: border 0.4s; text-decoration: none; color: inherit; }
.lp-card:hover { border-color: rgba(245,158,11,0.5); }
.lp-thumb { position: relative; aspect-ratio: 16/10; overflow: hidden; background: #f5f5f5; }
.lp-thumb .lp-iframe-wrap { position: absolute; inset: 0; overflow: hidden; }
.lp-thumb iframe { position: absolute; top: 0; left: 0; width: 1600px; height: 1000px; border: 0; pointer-events: none; transform-origin: 0 0; background: #fff; }
.lp-badge { position: absolute; top: 16px; left: 16px; padding: 4px 12px; border-radius: 999px; background: rgba(0,0,0,0.6); backdrop-filter: blur(8px); font-size: 10px; letter-spacing: 0.2em; color: rgba(255,255,255,0.9); border: 1px solid rgba(255,255,255,0.1); z-index: 3; }
.lp-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.6), transparent 50%); opacity: 0; transition: opacity 0.5s; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 32px; z-index: 2; }
.lp-card:hover .lp-overlay { opacity: 1; }
.lp-cta { padding: 10px 20px; border-radius: 999px; background: #f59e0b; color: #000; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.lp-cta svg { width: 16px; height: 16px; }
.lp-info { padding: 24px; display: flex; align-items: center; justify-content: space-between; }
.lp-info h3 { margin: 0; font-size: 18px; font-weight: 500; }
.lp-info .meta { font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 4px; letter-spacing: 0.05em; }
.lp-palette { display: flex; gap: 4px; }
.lp-palette span { width: 16px; height: 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.2); }
.lp-arrow { width: 20px; height: 20px; color: rgba(255,255,255,0.4); transition: color 0.3s, transform 0.3s; margin-left: 16px; }
.lp-card:hover .lp-arrow { color: #fbbf24; transform: translate(4px, -4px); }
.lp-info-right { display: flex; align-items: center; }

/* Preview miniature styles */
.pv { width: 100%; height: 100%; display: flex; flex-direction: column; }
.pv-t1 { background: #efeae2; }
.pv-t1 .pv-topbar { height: 32px; border-bottom: 1px solid #d9d2c5; display: flex; align-items: center; padding: 0 16px; gap: 16px; }
.pv-t1 .pv-mini-logo { width: 32px; height: 16px; background: #a5885a; border-radius: 2px; }
.pv-t1 .pv-mini-nav { display: flex; gap: 8px; margin-left: auto; font-size: 7px; color: #666; font-weight: 500; letter-spacing: 0.2em; }
.pv-t1 .pv-hero-video { height: 96px; background: linear-gradient(180deg, #4a4a4a, #1a1a1a); position: relative; }
.pv-t1 .pv-play { position: absolute; inset: 0; margin: auto; width: 24px; height: 24px; border-radius: 999px; background: rgba(255,255,255,0.4); display: flex; align-items: center; justify-content: center; }
.pv-t1 .pv-play::after { content: ''; width: 0; height: 0; border-left: 6px solid #fff; border-top: 4px solid transparent; border-bottom: 4px solid transparent; margin-left: 2px; }
.pv-t1 .pv-body { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; background: #efeae2; }
.pv-t1 .pv-body .h { height: 8px; background: #a5885a; margin-bottom: 4px; }
.pv-t1 .pv-body .lg { width: 60%; }
.pv-t1 .pv-body .lg2 { width: 80%; }
.pv-t1 .pv-body .l { height: 4px; background: #d4d4d4; margin-bottom: 2px; }
.pv-t1 .pv-body .black-block { background: #171717; }
.pv-t1 .pv-thumbs { height: 56px; display: grid; grid-template-columns: repeat(4,1fr); gap: 4px; padding: 0 8px; background: rgba(229,229,229,0.6); }
.pv-t1 .pv-thumbs > div { background: #171717; }
.pv-t1 .pv-footer { height: 24px; background: #0a0a0a; }

.pv-t2 { background: #f4f1ea; }
.pv-t2 .pv-t2hero { height: 96px; background: #8f8760; position: relative; padding: 8px 12px; }
.pv-t2 .pv-t2title { position: absolute; bottom: 8px; left: 12px; color: #fff; font-size: 10px; font-weight: 800; line-height: 1.1; }
.pv-t2 .pv-t2-top { display: flex; justify-content: space-between; font-size: 7px; color: #fff; letter-spacing: 0.2em; }
.pv-t2 .pv-t2-nav { display: flex; gap: 8px; }
.pv-t2 .pv-t2-body { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px; }
.pv-t2 .pv-t2-body .col .t { font-size: 8px; font-weight: 700; color: #262626; margin-bottom: 4px; }
.pv-t2 .pv-t2-body .col .l { height: 4px; background: #a3a3a3; margin-bottom: 2px; }
.pv-t2 .pv-t2-body .col .l.w100 { width: 100%; }
.pv-t2 .pv-t2-body .col .l.w80 { width: 80%; }
.pv-t2 .pv-footer { height: 24px; background: #171717; }

.pv-t3 { background: #fbf4e6; }
.pv-t3 .pv-t3-top { height: 32px; padding: 0 12px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(13,27,140,0.2); }
.pv-t3 .pv-t3-arch { width: 16px; height: 20px; border-radius: 8px 8px 0 0; background: #0d1b8c; }
.pv-t3 .pv-t3-nav { margin-left: auto; display: flex; gap: 8px; font-size: 6px; color: #333; letter-spacing: 0.2em; }
.pv-t3 .pv-t3-hero { flex: 1; padding: 16px; text-align: center; }
.pv-t3 .pv-t3-hero .h1 { font-family: 'Cormorant Garamond', serif; font-style: italic; color: #0d1b8c; font-size: 22px; line-height: 1; font-weight: 500; }
.pv-t3 .pv-t3-hero .h2 { font-family: 'Cormorant Garamond', serif; font-style: italic; color: #0d1b8c; font-size: 18px; line-height: 1; font-weight: 500; }
.pv-t3 .pv-t3-hero .meta { font-size: 7px; letter-spacing: 0.2em; color: #444; margin-top: 4px; }
.pv-t3 .pv-t3-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 4px; padding: 0 8px 8px; }
.pv-t3 .pv-t3-grid > div { height: 32px; background: #0d1b8c; }
.pv-t3 .pv-footer { height: 24px; background: #0d1b8c; }

.pv-t4 { display: flex; }
.pv-t4-side { width: 33.33%; padding: 12px; background: #0e138a; color: #fff; display: flex; flex-direction: column; align-items: center; }
.pv-t4-arch { width: 20px; height: 24px; border-radius: 10px 10px 0 0; background: rgba(255,255,255,0.9); margin-bottom: 8px; }
.pv-t4-brand { font-size: 6px; letter-spacing: 0.2em; text-align: center; }
.pv-t4-title { margin-top: 16px; font-weight: 800; font-size: 10px; line-height: 1.1; }
.pv-t4-main { flex: 1; display: flex; flex-direction: column; }
.pv-t4-hero { height: 96px; background: linear-gradient(180deg, #b8c9e0, #e8dfcb); position: relative; }
.pv-t4-hero::after { content: ''; position: absolute; inset: auto 0 8px 0; margin: 0 auto; width: 64px; height: 56px; background: rgba(255,255,255,0.7); border-radius: 2px; }
.pv-t4-hero .nav { position: absolute; top: 4px; right: 8px; display: flex; gap: 4px; font-size: 5px; color: #fff; letter-spacing: 0.2em; }
.pv-t4-cards { flex: 1; display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; padding: 8px; background: #fff; }
.pv-t4-cards > div { background: #d4d4d4; border-radius: 2px; }
.pv-t4-footer { height: 24px; background: #0e138a; }

.lp-footer { border-top: 1px solid rgba(255,255,255,0.08); padding: 40px 56px; display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: rgba(255,255,255,0.4); letter-spacing: 0.15em; }

@media (max-width: 900px) {
  .lp-header { padding: 20px 24px; }
  .lp-hero { padding: 40px 24px; }
  .lp-hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .lp-heading { font-size: 40px; }
  .lp-grid { padding: 0 24px 60px; grid-template-columns: 1fr; }
  .lp-nav { display: none; }
  .lp-footer { padding: 24px; flex-direction: column; gap: 8px; text-align: center; }
}

/* Brand grouping labels requested for the template index */
.lp-brand-badge {
  position: absolute; top: 16px; right: 16px; z-index: 3;
  padding: 5px 13px; border-radius: 999px;
  background: rgba(245,158,11,0.92); color: #111;
  font-size: 10px; font-weight: 800; letter-spacing: .14em;
  box-shadow: 0 8px 20px rgba(0,0,0,.24);
}