/* Direction 6: HTML/SVG campaign journey + locale copy rendered as static HTML. */
.v6-scene { container-type: inline-size; position: relative; width: 100%; max-width: 640px; margin: 0; color: #F4F4F7; font-family: Inter, sans-serif; text-align: left; }
.v6-scene *, .v6-scene *::before, .v6-scene *::after { box-sizing: border-box; }
.v6-scene-stage { position: relative; width: 100%; aspect-ratio: .97; isolation: isolate; }
.v6-scene-window { position: relative; border: 1px solid rgb(180 182 194 / .35); border-radius: 2cqw; box-shadow: 0 2.8cqw 6cqw rgb(6 7 11 / .35), inset 0 1px rgb(244 244 247 / .1); }
.v6-scene-platform { display: flex; align-items: center; gap: 1.8cqw; margin: 0 0 2.2cqw 6cqw; font-size: 3.3cqw; font-weight: 650; letter-spacing: -.04em; }
.v6-scene-platform-search { transform: rotate(-5deg); }
.v6-scene-platform-meta { transform: rotate(6deg); }
.v6-scene-search-group { position: absolute; width: 56%; left: 1.7%; top: 4%; z-index: 2; }
.v6-scene-search { padding: 2.4cqw; background: linear-gradient(120deg, #14171F, #0E1018); transform: rotate(-5deg); }
.v6-scene-searchbar { display: flex; gap: 1.8cqw; align-items: center; min-height: 5.9cqw; padding: 1.1cqw 1.6cqw; border-radius: 3cqw; background: #1B1F2A; font-size: 1.9cqw; line-height: 1.4; color: #F4F4F7; }
.v6-scene-search-icon { position: relative; width: 1.7cqw; height: 1.7cqw; flex: 0 0 1.7cqw; border: .3cqw solid currentColor; border-radius: 50%; }
.v6-scene-search-icon::after { position: absolute; content: ''; width: .9cqw; height: .25cqw; background: currentColor; right: -.8cqw; bottom: -.35cqw; transform: rotate(45deg); }
.v6-scene-sponsored { font-size: 1.8cqw; font-weight: 600; margin: 2.8cqw 0 1.7cqw; }
.v6-scene-ad-brand { display: flex; align-items: center; gap: 1.5cqw; font-size: 1.9cqw; line-height: 1.35; }
.v6-scene-ad-brand b { display: block; font-weight: 650; }
.v6-scene-ad-brand small { display: block; font-size: 1.55cqw; color: #B4B6C2; }
.v6-scene-avatar { width: 4.2cqw; height: 4.2cqw; flex: 0 0 4.2cqw; display: grid; place-items: center; border-radius: 50%; background: #F4F4F7; color: #2D7FF9; font-size: 2.7cqw; font-weight: 800; }
.v6-scene-search-title { display: block; margin-top: 2cqw; font-size: 2.7cqw; line-height: 1.25; font-weight: 600; color: #5BA0FF; }
.v6-scene .v6-scene-search-description { font-size: 2cqw; line-height: 1.45; color: #F4F4F7; margin: 1.4cqw 0 0; }
.v6-scene-tags { display: flex; gap: .8cqw; flex-wrap: wrap; margin-top: 2cqw; }
.v6-scene-tags span { font-size: 1.65cqw; line-height: 1.2; padding: 1.1cqw 1.3cqw; background: #1B1F2A; border: 1px solid rgb(180 182 194 / .12); border-radius: 2cqw; }
.v6-scene-meta-group { position: absolute; top: 8%; right: 2.3%; width: 43%; z-index: 1; }
.v6-scene-meta { padding: 2cqw; background: #14171F; transform: rotate(6deg); }
.v6-scene-creative { position: relative; margin-top: 2.4cqw; min-height: 32cqw; border: 1px solid rgb(180 182 194 / .2); border-radius: .6cqw; overflow: hidden; background: radial-gradient(ellipse at 90% 10%, #1B1F2A, #06070B 75%); }
.v6-scene-creative::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(6 7 11 / .76), rgb(6 7 11 / .04)); }
.v6-scene-creative-copy { position: relative; z-index: 1; padding: 5cqw 1.9cqw 2.5cqw; width: 90%; }
.v6-scene-creative-copy > strong { display: block; font-size: 3.2cqw; font-weight: 800; line-height: 1.03; letter-spacing: -.045em; text-transform: uppercase; max-width: 33cqw; }
.v6-scene-creative-copy > small { display: block; font-size: 1.4cqw; line-height: 1.4; margin-top: 1.4cqw; }
.v6-scene-mini-cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 2cqw; margin-top: 2.2cqw; padding: 1.4cqw 2.4cqw; background: #2D7FF9; color: #F4F4F7; border-radius: 3cqw; font-size: 1.8cqw; line-height: 1.2; font-weight: 600; box-shadow: 0 .7cqw 2cqw rgb(45 127 249 / .2); }
.v6-scene-mini-cta > span { font-size: 2.5cqw; line-height: .8; }
.v6-scene-landing { position: absolute; left: 13%; top: 54.5%; width: 70%; z-index: 3; transform: rotate(2.5deg); overflow: hidden; border-color: rgb(244 244 247 / .5); border-radius: 1.7cqw; background: #F4F4F7; }
.v6-scene-browserbar { display: flex; align-items: center; gap: .7cqw; height: 3.5cqw; padding: 0 1.6cqw; background: #1B1F2A; }
.v6-scene-browserbar > span { display: block; width: .9cqw; height: .9cqw; border-radius: 50%; background: #6E7183; }
.v6-scene-browserbar > span:first-child { background: #5BA0FF; }
.v6-scene-browserbar > i { margin-left: auto; width: 1.6cqw; height: 1.3cqw; border: 1px solid #B4B6C2; border-radius: .2cqw; }
.v6-scene-landing-body { padding: 2.5cqw 3cqw 0; color: #08090D; }
.v6-scene-mini-nav { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; }
.v6-scene-mini-nav > strong { font-size: 2.5cqw; font-weight: 850; letter-spacing: -.07em; }
.v6-scene-mini-nav > strong > span { color: #2D7FF9; }
.v6-scene-mini-nav > div { display: flex; gap: 2cqw; font-size: 1.2cqw; }
.v6-scene-page-content { position: relative; margin-top: 3.9cqw; min-height: 30cqw; }
.v6-scene-page-copy { position: relative; z-index: 2; width: 56%; padding-bottom: 3.7cqw; }
.v6-scene-page-copy > strong { display: block; font-size: 4.2cqw; line-height: 1.05; font-weight: 850; letter-spacing: -.055em; }
.v6-scene .v6-scene-page-copy > p { margin: 1.6cqw 0 0; font-size: 1.65cqw; line-height: 1.4; color: #14171F; max-width: 90%; }
.v6-scene-page-copy > strong > span { color: #2D7FF9; }

.v6-scene-platform img { width: 6.5cqw; height: 6.5cqw; object-fit: contain; flex: 0 0 auto; }
.v6-scene-platform-meta img { width: 7.5cqw; height: 5cqw; }
.v6-scene-opportunity { display: block; pointer-events: none; }
.v6-scene-opportunity img { display: block; width: 100%; height: 100%; object-fit: contain; }
.v6-scene-creative > .v6-scene-opportunity { position: absolute; z-index: 1; width: 68%; height: 98%; right: -5%; bottom: -7%; filter: drop-shadow(0 1.8cqw 2.8cqw rgb(0 0 0/.28)); }
.v6-scene-page-figure { position: absolute; inset: 0 0 0 48%; overflow: hidden; border-radius: 1.2cqw; background: radial-gradient(circle at 56% 42%,rgb(45 127 249/.2),transparent 54%),linear-gradient(145deg,#111a2a,#07101f); }
.v6-scene-page-figure .v6-scene-opportunity { position: absolute; inset: -5% -4% -7% -5%; }

/* Final hero placement based on the approved attached composition. */
.v6-hero .v6-scene { width: 100%; max-width: 650px; justify-self: end; transform: none; }
.v6-hero .v6-scene-stage { aspect-ratio: 1.16; }
.v6-hero .v6-scene-search-group { width: 57%; left: 0; top: 4%; }
.v6-hero .v6-scene-search,
.v6-hero .v6-scene-platform-search { transform: rotate(-3deg); }
.v6-hero .v6-scene-meta-group { width: 42%; right: 0; top: 8%; }
.v6-hero .v6-scene-meta,
.v6-hero .v6-scene-platform-meta { transform: rotate(4deg); }
.v6-hero .v6-scene-creative-copy { width: 64%; padding-top: 4.3cqw; }
.v6-hero .v6-scene-creative-copy > strong { max-width: 25cqw; font-size: 2.8cqw; }
.v6-hero .v6-scene-landing { width: 74%; left: 20%; top: 53%; transform: rotate(2deg); }

@media (max-width: 1023px) {
  .v6-hero .v6-scene { width: min(100%,680px); max-width: 680px; justify-self: center; transform: none; }
}
@media (max-width: 767px) {
  .v6-hero .v6-scene { width: 100%; max-width: 460px; margin-inline: auto; }
  .v6-hero .v6-scene-stage { aspect-ratio: .97; }
  .v6-hero .v6-scene-search,
  .v6-hero .v6-scene-platform-search { transform: rotate(-2deg); }
  .v6-hero .v6-scene-meta,
  .v6-hero .v6-scene-platform-meta { transform: rotate(3deg); }
  .v6-hero .v6-scene-landing { left: 15%; width: 76%; top: 55%; transform: rotate(1deg); }
}