@charset "UTF-8";
/* Colour and motion layer on top of landing-v2.css. Remove the <link> to return to the calm base design. */
:root {
  --berry:#c0406a;
  --berry-soft:#f7dde5;
  --moss:#4c7a45;
  --moss-soft:#dfead8;
  --indigo:#4d4fb0;
  --indigo-soft:#e1e2f6;
  --peach:#f2a878;
  --peach-soft:#fbe6d6;
  --mocca:#7b4a2e
}

/* Hero: soft colour clouds and a gradient accent line */
.hero {
  position:relative;
  isolation:isolate
}
.hero::before {
  content:"";
  position:absolute;
  inset:-40px 0 auto;
  height:640px;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(38% 55% at 18% 30%, #f6c7a6aa, transparent 70%),
    radial-gradient(30% 45% at 82% 22%, #f2bfd0aa, transparent 70%),
    radial-gradient(34% 50% at 60% 70%, #cfe2c4aa, transparent 70%),
    radial-gradient(26% 40% at 35% 78%, #d7d8f4aa, transparent 70%);
  filter:blur(8px);
  animation:pep-drift 18s ease-in-out infinite alternate
}
@keyframes pep-drift {
  from { transform:translate3d(-2%,0,0) scale(1) }
  to { transform:translate3d(2%,-3%,0) scale(1.06) }
}
.hero h1 em {
  background:linear-gradient(100deg,var(--mocca) 0%,#c2613a 38%,var(--berry) 72%,#8a4fb0 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  padding-right:.08em
}
.hero > .eyebrow {
  display:inline-flex;
  align-items:center;
  padding:7px 14px;
  border-radius:999px;
  background:#ffffffb3;
  border:1px solid #ecdccd;
  box-shadow:0 6px 18px #7b4a2e14;
  backdrop-filter:blur(6px)
}

/* Buttons: warm gradient with a soft glow */
.button-dark {
  background:linear-gradient(120deg,#3a2a22,var(--mocca) 55%,#b0573a);
  box-shadow:0 10px 24px -10px #7b4a2e99
}
.button-dark:hover {
  background:linear-gradient(120deg,#46332a,#8d5536 55%,#c2613a);
  box-shadow:0 16px 30px -12px #b0573acc
}
.nav-cta {
  border-color:transparent;
  background:linear-gradient(#fff,#fff) padding-box,linear-gradient(120deg,var(--peach),var(--berry),var(--indigo)) border-box;
  border:1.5px solid transparent;
  transition:transform .2s,box-shadow .2s
}
.nav-cta:hover {
  transform:translateY(-1px);
  box-shadow:0 8px 20px -10px #c0406a88
}

/* Showcase frame: warm gradient instead of flat beige */
.showcase {
  background:linear-gradient(160deg,#f7e3d2 0%,#f1e9df 45%,#e9e6f3 100%);
  border-color:#ead7c6
}

/* Principles: tinted cards with coloured number badges */
.principles {
  gap:22px;
  border-bottom:0
}
.principles article {
  border-radius:16px;
  padding:26px 26px 28px;
  transition:transform .25s,box-shadow .25s
}
.principles article:nth-child(1) { background:var(--peach-soft) }
.principles article:nth-child(2) { background:var(--moss-soft) }
.principles article:nth-child(3) { background:var(--indigo-soft) }
.principles article:hover {
  transform:translateY(-4px);
  box-shadow:0 18px 34px -22px #27201a66
}
.principles .small-number {
  display:inline-grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:50%;
  color:#fff;
  font-size:12px
}
.principles article:nth-child(1) .small-number { background:#c2613a }
.principles article:nth-child(2) .small-number { background:var(--moss) }
.principles article:nth-child(3) .small-number { background:var(--indigo) }
.principles p { color:#4f524c }

/* Feature grids: colour-coded accent bars that light up on hover */
.feature-grid>div {
  border-left-width:3px;
  transition:transform .2s,border-color .2s
}
.feature-grid>div:nth-child(4n+1) { border-color:#e0996c }
.feature-grid>div:nth-child(4n+2) { border-color:#8fb47f }
.feature-grid>div:nth-child(4n+3) { border-color:#9a9be0 }
.feature-grid>div:nth-child(4n+4) { border-color:#e08aa8 }
.feature-grid>div:hover { transform:translateX(4px) }

/* Each showcase gets its own colour */
#karte h2 em { color:var(--moss) }
#models h2 em { color:var(--indigo) }
#editor h2 em { color:var(--berry) }
#themes h2 em { color:#b0573a }
#anwendungen h2 em { color:var(--berry) }
.split-figure img,.ai-scan-image img,#theme-image {
  border-radius:12px;
  transition:transform .35s ease,box-shadow .35s ease
}
.split-figure:hover img,.ai-scan-image:hover img {
  transform:translateY(-4px) scale(1.01);
  box-shadow:0 26px 44px -26px #27201a70
}

/* Privacy band: deep forest green for contrast */
.privacy-band {
  background:radial-gradient(60% 120% at 85% 0%,#3f6a3d 0%,transparent 60%),linear-gradient(135deg,#1f3322,#2b4a2d);
  border-block:0;
  color:#eef3e6
}
.privacy-band .eyebrow { color:#bcd3ad }
.privacy-inner h2 em { color:#c7e0a8 }
.privacy-bottom p { color:#cfdcc4 }
.privacy-facts span { color:#eef3e6 }
.privacy-facts span:before { color:#a9d38a }

/* Persona section */
.persona-section {
  padding-block:72px 64px;
  border-top:1px solid var(--line)
}
.persona-intro { max-width:760px }
.persona-intro h2 {
  margin-top:20px;
  font-size:clamp(36px,4.5vw,60px)
}
.persona-intro h2 em { color:var(--berry) }
.persona-intro p:last-child {
  margin-top:20px;
  font-size:17px;
  color:var(--muted)
}
/* Store-stage frames on the landing page: same composition as the App Store
   images (1440 × 900 design grid), scaled with container query units. */
.stage-frames {
  display:grid;
  gap:28px;
  margin-top:44px
}
.stage-frame {
  --ink:#f7f0e6;
  --soft:rgba(247,240,230,.82);
  --stage-sans:"Avenir Next",Avenir,"Hiragino Sans",-apple-system,sans-serif;
  --stage-serif:Georgia,"Times New Roman","Hiragino Mincho ProN",serif;
  position:relative;
  container-type:inline-size;
  aspect-ratio:1440 / 900;
  overflow:hidden;
  border-radius:24px;
  color:var(--ink);
  font-family:var(--stage-sans);
  box-shadow:0 30px 60px -40px #1b0f1a99
}
.stage-frame.f-ai { --accent:#dcc56b; --halo:#b7a454; background:radial-gradient(circle at 78% 10%,rgba(220,197,107,.16),transparent 36%),linear-gradient(135deg,#123128 0%,#1f4a3c 100%) }
.stage-frame.f-food { --accent:#f4a9c8; --halo:#e686b8; background:radial-gradient(circle at 80% 8%,rgba(244,169,200,.2),transparent 36%),linear-gradient(135deg,#2c1627 0%,#5a2a4c 100%) }
.stage-frame.f-3d { --accent:#7fcad6; --halo:#4d9fb2; background:radial-gradient(circle at 80% 12%,rgba(127,202,214,.16),transparent 36%),linear-gradient(135deg,#0f2129 0%,#1d3f4b 100%) }
.stage-frame .copy {
  position:absolute;
  z-index:4;
  left:5.833cqw;
  top:6cqw;
  bottom:4.5cqw;
  width:33.33cqw;
  display:flex;
  flex-direction:column;
  justify-content:center
}
.stage-frame .eyebrow {
  margin:0 0 1.528cqw;
  font:800 1.042cqw/1.3 var(--stage-sans);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent)
}
.stage-frame .stage-title {
  margin:0;
  font:800 3.75cqw/1.02 var(--stage-sans);
  letter-spacing:-.02em
}
.stage-frame .stage-title span { display:block }
.stage-frame .stage-title span,.stage-frame .stage-title em { white-space:pre-line }
.stage-frame .stage-title em {
  display:block;
  margin-top:.833cqw;
  font:italic 400 3.333cqw/1.06 var(--stage-serif);
  letter-spacing:-.01em;
  color:var(--accent)
}
.stage-frame .lead {
  margin:1.667cqw 0 0;
  max-width:31.25cqw;
  font:500 1.319cqw/1.5 var(--stage-sans);
  color:var(--soft)
}
.stage-frame .persona-card {
  margin-top:2.083cqw;
  max-width:29.17cqw;
  padding:1.25cqw 1.528cqw;
  border-radius:.972cqw;
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.14)
}
.stage-frame .persona-card strong {
  display:block;
  font:700 1.458cqw/1.3 var(--stage-serif)
}
.stage-frame .persona-card q {
  display:block;
  margin-top:.417cqw;
  font:500 1.111cqw/1.45 var(--stage-sans);
  color:var(--soft)
}
.stage-frame .persona-card q::before { content:"„" }
.stage-frame .persona-card q::after { content:"“" }
html:lang(en) .stage-frame .persona-card q::before { content:"“" }
html:lang(en) .stage-frame .persona-card q::after { content:"”" }
html:lang(ja) .stage-frame .persona-card q::before { content:"「" }
html:lang(ja) .stage-frame .persona-card q::after { content:"」" }
.stage-frame .shot {
  position:absolute;
  z-index:2;
  margin:0;
  right:2.778cqw;
  top:46%;
  width:56.94cqw;
  transform:translateY(-50%)
}
.stage-frame .shot img {
  display:block;
  width:100%;
  height:auto;
  filter:drop-shadow(0 2.4cqw 3.5cqw rgba(0,0,0,.32))
}
.stage-frame .persona {
  position:absolute;
  z-index:3;
  left:38.89cqw;
  bottom:-2.778cqw;
  width:22.92cqw
}
.stage-frame .persona::before {
  content:"";
  position:absolute;
  z-index:-1;
  left:10%;
  top:14%;
  width:80%;
  aspect-ratio:1;
  border-radius:50% 50% 12% 50%;
  background:var(--halo);
  opacity:.55;
  transform:rotate(12deg);
  box-shadow:0 0 4cqw var(--halo)
}
.stage-frame .persona img {
  display:block;
  width:100%;
  height:auto;
  filter:drop-shadow(0 2cqw 2cqw rgba(0,0,0,.35))
}
.stage-frame.f-3d .shot { right:-2.083cqw; width:61.11cqw; top:50% }
.stage-frame.f-3d .persona { left:32.64cqw; width:20.83cqw; bottom:-2.083cqw }
.stage-frame .footnote {
  position:absolute;
  z-index:5;
  left:5.833cqw;
  bottom:2.2cqw;
  margin:0;
  font:500 max(11px,.972cqw)/1.3 var(--stage-sans);
  color:var(--soft);
  opacity:.85
}
html:lang(ja) .stage-frame .stage-title { font-size:2.917cqw; line-height:1.22; letter-spacing:0; line-break:strict }
html:lang(ja) .stage-frame .stage-title em { font-style:normal; font-size:2.778cqw; font-weight:600; line-height:1.25 }
html:lang(ja) .stage-frame .eyebrow { letter-spacing:.08em }
html:lang(ja) .stage-frame .lead { line-height:1.7 }
.stage-frame .persona img,.stage-frame .shot img { transition:transform .5s ease }
.stage-frame:hover .persona img { transform:translateY(-.6cqw) }
.stage-frame:hover .shot img { transform:translateY(-.4cqw) }

/* Gentle reveal on scroll (only when JS marks the page as ready) */
.pep-reveal [data-reveal] {
  opacity:0;
  transform:translateY(26px);
  transition:opacity .7s ease,transform .7s ease
}
.pep-reveal [data-reveal].is-visible {
  opacity:1;
  transform:none
}

@media(max-width:760px) {
  .hero::before { height:520px }
  .principles article { padding:22px }
  .persona-section { padding-block:48px }
  .persona-intro h2 { font-size:38px }
  .stage-frames { gap:20px; margin-top:30px }
  .stage-frame { aspect-ratio:auto; padding:30px 22px 0; border-radius:18px }
  .stage-frame .copy { position:static; width:auto }
  .stage-frame .eyebrow { font-size:12px; margin-bottom:12px }
  .stage-frame .stage-title,html:lang(ja) .stage-frame .stage-title { font-size:30px }
  .stage-frame .stage-title em,html:lang(ja) .stage-frame .stage-title em { font-size:27px; margin-top:6px }
  .stage-frame .lead { max-width:none; margin-top:14px; font-size:15px }
  .stage-frame .persona-card { max-width:none; margin-top:18px; padding:14px 16px; border-radius:12px }
  .stage-frame .persona-card strong { font-size:17px }
  .stage-frame .persona-card q { font-size:14px; margin-top:4px }
  .stage-frame .shot,.stage-frame.f-3d .shot { position:relative; top:auto; right:auto; width:112%; margin:26px 0 0; transform:none }
  .stage-frame .persona,.stage-frame.f-3d .persona { position:relative; left:auto; bottom:0; width:46%; margin:-26% 0 0 auto }
  .stage-frame .footnote { position:static; padding:0 0 14px; margin-top:-8px; font-size:11px }
}
@media(prefers-reduced-motion:reduce) {
  .hero::before { animation:none }
  .pep-reveal [data-reveal] { opacity:1; transform:none; transition:none }
  .stage-frame .persona img,.stage-frame .shot img,.principles article:hover,.feature-grid>div:hover,.split-figure:hover img { transform:none; transition:none }
}

/* Non-persona stage frames (library, map, search, editor, themes) */
.stage-frame.f-library { --ink:#2c211b; --soft:rgba(44,33,27,.78); --accent:#a94f32; --chip:rgba(44,33,27,.08); --chip-line:rgba(44,33,27,.18); background:radial-gradient(circle at 88% 8%,rgba(213,155,57,.28),transparent 34%),radial-gradient(circle at 2% 90%,rgba(169,79,50,.14),transparent 32%),#fbf7f0 }
.stage-frame.f-timeline { --ink:#2c211b; --soft:rgba(44,33,27,.78); --accent:#526c5b; --chip:rgba(44,33,27,.08); --chip-line:rgba(44,33,27,.18); background:radial-gradient(circle at 12% 12%,rgba(82,108,91,.18),transparent 32%),radial-gradient(circle at 95% 95%,rgba(213,155,57,.22),transparent 38%),#efe4d3 }
.stage-frame.f-map { --accent:#e7c36f; background:radial-gradient(circle at 80% 0%,rgba(231,195,111,.18),transparent 36%),linear-gradient(135deg,#17342a 0%,#25503d 100%) }
.stage-frame.f-editor { --accent:#e3a98d; background:radial-gradient(circle at 85% 20%,rgba(227,169,141,.18),transparent 38%),linear-gradient(135deg,#1d1411 0%,#3a281f 100%) }
.stage-frame.f-themes { --accent:#c3b5ff; background:radial-gradient(circle at 85% 10%,rgba(195,181,255,.2),transparent 36%),linear-gradient(135deg,#16172b 0%,#2f2c55 100%) }
.stage-frame { --chip:rgba(255,255,255,.08); --chip-line:rgba(255,255,255,.22) }
.stage-frame.f-library,.stage-frame.f-timeline { --chip:rgba(44,33,27,.08); --chip-line:rgba(44,33,27,.18) }
.stage-frame:not(.has-persona) .stage-title { font-size:4.444cqw }
.stage-frame:not(.has-persona) .stage-title em { font-size:3.889cqw }
.stage-frame:not(.has-persona) .lead { font-size:1.458cqw; margin-top:2.083cqw }
html:lang(ja) .stage-frame:not(.has-persona) .stage-title { font-size:3.333cqw }
html:lang(ja) .stage-frame:not(.has-persona) .stage-title em { font-size:3.194cqw }
.stage-frame:not(.has-persona) .shot { right:-2.5cqw; width:62.5cqw; top:50% }
.stage-frame.f-library .shot { width:64.58cqw }
.stage-frame .chips { display:flex; flex-wrap:wrap; gap:.694cqw; margin:2.222cqw 0 0; padding:0; list-style:none }
.stage-frame .chips li { padding:.625cqw 1.111cqw; border-radius:999px; background:var(--chip); border:1.5px solid var(--chip-line); font:700 1.111cqw/1.2 var(--stage-sans) }
.stage-frame .fan { position:absolute; z-index:2; right:0; top:0; bottom:0; width:59.72cqw }
.stage-frame .fan img { position:absolute; width:41.67cqw; height:auto; filter:drop-shadow(0 2cqw 3cqw rgba(0,0,0,.4)) }
.stage-frame .fan-1 { right:17.36cqw; top:7.64cqw; transform:rotate(-6deg) }
.stage-frame .fan-2 { right:8.33cqw; top:15.97cqw; transform:rotate(-1deg) }
.stage-frame .fan-3 { right:-.69cqw; top:25cqw; transform:rotate(4deg) }

/* Stage gallery: horizontal track of store-stage frames */
.stage-gallery { padding-block:56px 40px }
.stage-gallery-head { display:flex; justify-content:space-between; align-items:end; gap:24px }
.stage-gallery-head h2 { margin-top:16px; font-size:clamp(34px,4vw,54px) }
.stage-gallery-head h2 em { color:var(--berry) }
.stage-gallery-nav { display:flex; gap:10px }
.stage-gallery-nav button { width:46px; height:46px; border-radius:50%; background:#fff; border:1px solid var(--line); font-size:20px; box-shadow:0 6px 16px -10px #27201a66 }
.stage-gallery-nav button:hover { transform:translateY(-1px) }
.stage-track { display:grid; grid-auto-flow:column; grid-auto-columns:88%; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory; padding:30px 0 18px; scrollbar-width:thin }
.stage-track .stage-frame { scroll-snap-align:start }

@media(max-width:760px) {
  .stage-track { grid-auto-columns:92% }
  .stage-gallery-nav { display:none }
  .stage-frame .chips { gap:6px; margin-top:14px }
  .stage-frame .chips li { padding:6px 12px; font-size:12px }
  .stage-frame:not(.has-persona) .stage-title,html:lang(ja) .stage-frame:not(.has-persona) .stage-title { font-size:30px }
  .stage-frame:not(.has-persona) .stage-title em,html:lang(ja) .stage-frame:not(.has-persona) .stage-title em { font-size:27px }
  .stage-frame:not(.has-persona) .lead { font-size:15px; margin-top:14px }
  .stage-frame:not(.has-persona) .shot { position:relative; top:auto; right:auto; width:112%; margin:24px 0 0; transform:none }
  .stage-frame .fan { position:relative; width:auto; height:300px; margin-top:20px }
  .stage-frame .fan img { width:78% }
  .stage-frame .fan-1 { right:22%; top:0 } .stage-frame .fan-2 { right:10%; top:70px } .stage-frame .fan-3 { right:-4%; top:140px }
}

/* Ambient page background: soft colour fields at the left and right edges that
   follow the section in view. Colours come from data-ambient on each section. */
@property --amb-1 { syntax:"<color>"; inherits:true; initial-value:#f2b48c }
@property --amb-2 { syntax:"<color>"; inherits:true; initial-value:#e9a7c0 }
html { transition:--amb-1 1.4s ease,--amb-2 1.4s ease }
body::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(42vw 60vh at -4% 22%, color-mix(in srgb,var(--amb-1) 42%,transparent), transparent 72%),
    radial-gradient(34vw 55vh at 2% 88%, color-mix(in srgb,var(--amb-2) 26%,transparent), transparent 70%),
    radial-gradient(42vw 60vh at 104% 74%, color-mix(in srgb,var(--amb-2) 42%,transparent), transparent 72%),
    radial-gradient(34vw 55vh at 98% 12%, color-mix(in srgb,var(--amb-1) 26%,transparent), transparent 70%);
  animation:amb-breathe 22s ease-in-out infinite alternate
}
@keyframes amb-breathe {
  from { transform:translate3d(0,0,0) scale(1) }
  to { transform:translate3d(0,-2vh,0) scale(1.04) }
}
/* Keep the reading column calm on narrow screens */
@media(max-width:1100px) { body::before { opacity:.55 } }
@media(max-width:760px) { body::before { opacity:.35 } }
@media(prefers-reduced-motion:reduce) { html { transition:none } body::before { animation:none } }

/* WebGL smoke layer (ambient-smoke.js); the gradient layer stays as a quiet base */
.ambient-smoke {
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  z-index:-1;
  pointer-events:none
}
.has-smoke body::before { opacity:.45 }

/* Nature sounds toggle (ambient-sound.js); off by default, sits under the consent banner */
.nature-sound {
  position:fixed;
  left:max(18px,env(safe-area-inset-left));
  bottom:max(18px,env(safe-area-inset-bottom));
  z-index:40;
  display:flex;
  gap:6px;
  font-family:var(--sans)
}
.nature-sound button {
  display:inline-flex;
  align-items:center;
  gap:9px;
  height:40px;
  padding:0 16px;
  border-radius:999px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(39,43,41,.12);
  box-shadow:0 10px 26px -14px rgba(39,32,26,.45);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  font-size:13px;
  font-weight:600;
  color:var(--ink);
  transition:transform .2s,box-shadow .2s,background .2s
}
.nature-sound button:hover { transform:translateY(-1px); box-shadow:0 14px 30px -14px rgba(39,32,26,.55) }
.nature-sound .nature-sound__toggle[aria-pressed=true] { background:rgba(255,255,255,.92); border-color:color-mix(in srgb,var(--amb-1) 60%,transparent) }
.nature-sound .nature-sound__next { width:40px; padding:0; justify-content:center; font-size:20px }
.nature-sound__bars { display:inline-flex; align-items:flex-end; gap:2px; height:12px }
.nature-sound__bars b { width:3px; border-radius:2px; background:color-mix(in srgb,var(--amb-1) 70%,var(--ink)); animation:ns-bar 1.1s ease-in-out infinite }
.nature-sound__bars b:nth-child(2) { animation-delay:.2s }
.nature-sound__bars b:nth-child(3) { animation-delay:.45s }
@keyframes ns-bar { 0%,100% { height:4px } 50% { height:12px } }
@media(max-width:760px) { .nature-sound button { height:36px; padding:0 13px; font-size:12px } .nature-sound .nature-sound__next { width:36px } }
@media(prefers-reduced-motion:reduce) { .nature-sound__bars b { animation:none; height:8px } }

/* Palm fronds framing the hero: two on the left, three on the right, staggered
   in depth (hero-palms.js adds the scroll parallax, CSS the gentle sway) */
.hero > :not(.hero-palms) { position:relative; z-index:1 }
.hero h1,.hero .hero-lead { text-shadow:0 0 18px rgba(248,248,245,.9),0 0 3px rgba(248,248,245,.8) }
/* Gradient text is transparent, so a text-shadow would shine through it; use a filter glow instead */
.hero h1 em { text-shadow:none; filter:drop-shadow(0 0 10px rgba(248,248,245,.95)) drop-shadow(0 0 2px rgba(248,248,245,.8)) }
.hero-palms { position:absolute; inset:0 0 auto; height:900px; pointer-events:none; overflow-x:clip }
/* The layer spans the full viewport, so clipping only drops the fronds past the
   screen edge that would otherwise widen the page; clip keeps overflow-y visible. */
/* No stacking context on the wrapper: back fronds sit behind the text (z 0),
   the two big front fronds in front of it (z 2). Clicks pass through all. */
.hero-palm { z-index:0 }
.palm-l1, .palm-r1 { z-index:2 }
.hero-palm { position:absolute; will-change:transform,opacity }
.palm-base { display:block; transform:rotate(var(--rot,0deg)); transform-origin:var(--origin,10% 90%) }
.hero-palm img { display:block; width:100%; height:auto; filter:drop-shadow(0 18px 22px rgba(47,74,34,.2)); transform-origin:var(--origin,10% 90%); animation:palm-sway var(--sway,9s) ease-in-out infinite alternate; animation-delay:var(--delay,0s) }
.hero-palm.is-right { --origin:90% 90% }
/* front fronds */
.palm-l1 { left:max(-30px,-1.5vw); top:-40px; width:clamp(300px,38vw,780px) }
.palm-r1 { right:max(-30px,-1.5vw); top:20px; width:clamp(300px,37vw,760px); --sway:11s; --delay:-3s }
/* fronds behind: smaller, a little darker and softer */
.palm-l2, .palm-r2, .palm-r3 { filter:saturate(.85) brightness(.92) }
.palm-l2 { left:max(-110px,-6vw); top:230px; width:clamp(230px,28vw,560px); --rot:18deg; --sway:12s; --delay:-5s; opacity:.9 }
.palm-r2 { right:max(20px,1vw); top:-110px; width:clamp(210px,24vw,480px); --rot:-22deg; --sway:10s; --delay:-7s; opacity:.85 }
.palm-r3 { right:max(-120px,-6.5vw); top:330px; width:clamp(210px,26vw,520px); --rot:14deg; --sway:13s; --delay:-2s; opacity:.9 }
@keyframes palm-sway { from { rotate:-1.6deg } to { rotate:1.8deg } }
@media(max-width:1100px) { .palm-l1, .palm-r1 { width:clamp(200px,25vw,300px) } .palm-l2, .palm-r2, .palm-r3 { width:clamp(150px,19vw,230px) } }
@media(max-width:760px) {
  .palm-l2, .palm-r2 { display:none }
  /* Front fronds sit outside the text column so the eyebrow and headline stay readable */
  .palm-l1 { width:160px; left:-125px; top:-40px; opacity:.6 }
  .palm-r1 { width:160px; right:-125px; top:-40px; opacity:.6 }
  .palm-r3 { width:120px; right:-60px; top:230px; opacity:.45 }
}
@media(prefers-reduced-motion:reduce) { .hero-palm img { animation:none } }

/* Persona clips (DE only): embedded video instead of screenshot + cut-out */
.stage-frame .persona-video {
  position:absolute;
  z-index:2;
  margin:0;
  right:2.778cqw;
  top:50%;
  width:56.94cqw;
  aspect-ratio:16/9;
  transform:translateY(-50%);
  border-radius:1.111cqw;
  overflow:hidden;
  background:#000;
  box-shadow:0 2.4cqw 3.5cqw rgba(0,0,0,.32)
}
.stage-frame .persona-video video {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover
}
.stage-frame .persona-video-play {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:0;
  background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.28));
  color:var(--ink);
  cursor:pointer
}
.stage-frame .persona-video-play::before {
  content:"";
  width:6.25cqw;
  height:6.25cqw;
  border-radius:50%;
  background:color-mix(in srgb,var(--accent) 88%,#000) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13l11-6.5z' fill='%23fff'/%3E%3C/svg%3E") 56% 50%/45% no-repeat;
  box-shadow:0 .8cqw 2.4cqw rgba(0,0,0,.35);
  transition:transform .2s
}
.stage-frame .persona-video-play:hover::before,.stage-frame .persona-video-play:focus-visible::before { transform:scale(1.08) }
.stage-frame .persona-video-play:focus-visible { outline:3px solid var(--accent); outline-offset:-3px }
.stage-frame .persona-video-label {
  position:absolute;
  right:1.389cqw;
  bottom:1.25cqw;
  padding:.35cqw .9cqw;
  border-radius:999px;
  background:rgba(0,0,0,.55);
  color:#fff;
  font:700 1.042cqw/1.2 var(--stage-sans)
}
.stage-frame .persona-video.is-playing .persona-video-play { display:none }
@media(max-width:760px) {
  .stage-frame .persona-video { position:relative; top:auto; right:auto; width:auto; margin:22px 0 18px; transform:none; border-radius:12px }
  .stage-frame .persona-video-play::before { width:58px; height:58px }
  .stage-frame .persona-video-label { right:10px; bottom:10px; padding:4px 10px; font-size:13px }
}

/* Additional gallery frames */
.stage-frame.f-viewer3d { --accent:#7fcad6; background:radial-gradient(circle at 80% 0%,rgba(127,202,214,.2),transparent 40%),linear-gradient(135deg,#0f2129 0%,#1d3f4b 100%) }
.stage-frame.f-viewer { --accent:#e4b872; background:radial-gradient(circle at 80% 0%,rgba(228,184,114,.18),transparent 40%),linear-gradient(135deg,#1b1712 0%,#3a2c1f 100%) }