:root {
  --agency-gold: #c9a227;
  --agency-gold-dark: #9a7618;
  --agency-gold-soft: #ead899;
  --agency-ink: #17130a;
  --agency-muted: #756d5e;
  --agency-cream: #f8f3e7;
  --agency-cream-deep: #efe5cb;
  --agency-white: #fffdf8;
  --agency-green: #1b9c56;
  --agency-purple: #8067df;
  --agency-border: rgba(131, 103, 26, 0.17);
  --agency-shadow: 0 18px 55px rgba(74, 55, 12, 0.1);
  --agency-shadow-hover: 0 24px 70px rgba(74, 55, 12, 0.17);
  --content-width: 1280px;
  --content-padding: clamp(18px, 4vw, 48px);
  --widget-padding: 24px;
  --color-bg: var(--agency-cream);
  --color-brighter-bg: var(--agency-white);
  --color-secondary: var(--agency-cream-deep);
  --color-text: var(--agency-ink);
  --color-text-secondary: var(--agency-muted);
  --color-text-darker: #968d7a;
  --color-removed: #c54b3f;
  --color-primary: var(--agency-gold);
  --color-primary-hover: var(--agency-gold-dark);
  --color-primary-text: #100d05;
  --color-primary-text-hover: #ffffff;
  --font: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --agency-sale-banner-height: 0px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  background: var(--agency-cream);
}

body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  color: var(--agency-ink);
  background:
    radial-gradient(circle at 5% 0%, rgba(218, 178, 52, 0.12), transparent 34rem),
    linear-gradient(180deg, #fbf7ed 0%, var(--agency-cream) 38%, #f6efdf 100%);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.18;
  background-image: radial-gradient(rgba(121, 92, 16, 0.28) 0.65px, transparent 0.65px);
  background-size: 22px 22px;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
}

button,
input,
select,
textarea {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid rgba(201, 162, 39, 0.72);
  outline-offset: 3px;
}

.agency-asset-icon,
.agency-rating-icons {
  display: inline-block;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: var(--agency-icon) center / contain no-repeat;
  mask: var(--agency-icon) center / contain no-repeat;
}

.agency-asset-icon { width: 16px; height: 16px; }
.agency-icon-account { --agency-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15.75%206a3.75%203.75%200%201%201-7.5%200%203.75%203.75%200%200%201%207.5%200ZM4.5%2020.1a7.5%207.5%200%200%201%2015%200A18%2018%200%200%201%2012%2021.75a18%2018%200%200%201-7.5-1.65Z%22%2F%3E%3C%2Fsvg%3E"); }
.agency-icon-cart { --agency-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.5%204.5h2.2l1.9%2010.1a1.4%201.4%200%200%200%201.38%201.15h7.84a1.4%201.4%200%200%200%201.37-1.1L19.5%208H6.3%22%20%2F%3E%3Ccircle%20cx%3D%229.5%22%20cy%3D%2219.3%22%20r%3D%221.35%22%20%2F%3E%3Ccircle%20cx%3D%2217.2%22%20cy%3D%2219.3%22%20r%3D%221.35%22%20%2F%3E%3C%2Fsvg%3E"); }
.agency-icon-crown { --agency-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.6%208.2l3.7%202.7L12%205l4.7%205.9%203.7-2.7-1.7%209.3H5.3z%22%20%2F%3E%3Cpath%20d%3D%22M5.3%2017.5h13.4%22%20%2F%3E%3C%2Fsvg%3E"); }
.agency-icon-discord { --agency-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20fill%3D%22currentColor%22%20stroke%3D%22none%22%20d%3D%22M19.5%205.3A16%2016%200%200%200%2015.4%204l-.5%201.1a14%2014%200%200%200-5.8%200L8.6%204a16%2016%200%200%200-4.1%201.3C1.9%209.2%201.2%2013%201.6%2016.8a16.7%2016.7%200%200%200%205%202.5l1.1-1.8-1.7-.8.4-.3a12%2012%200%200%200%2011.2%200l.4.3-1.7.8%201.1%201.8a16.7%2016.7%200%200%200%205-2.5c.5-4.5-.7-8.2-2.9-11.5ZM8.4%2014.5c-1.2%200-2.1-1.1-2.1-2.4%200-1.3.9-2.4%202.1-2.4%201.2%200%202.1%201.1%202.1%202.4%200%201.3-.9%202.4-2.1%202.4Zm7.2%200c-1.2%200-2.1-1.1-2.1-2.4%200-1.3.9-2.4%202.1-2.4%201.2%200%202.1%201.1%202.1%202.4%200%201.3-.9%202.4-2.1%202.4Z%22%2F%3E%3C%2Fsvg%3E"); }
.agency-icon-globe { --agency-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228.2%22%20%2F%3E%3Cpath%20d%3D%22M3.8%2012h16.4M12%203.8c2.2%202.3%203.4%205.2%203.4%208.2s-1.2%205.9-3.4%208.2c-2.2-2.3-3.4-5.2-3.4-8.2S9.8%206.1%2012%203.8z%22%20%2F%3E%3C%2Fsvg%3E"); }
.agency-icon-monitor { --agency-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2212.5%22%20rx%3D%221.6%22%20%2F%3E%3Cpath%20d%3D%22M8.5%2020.2h7M12%2016.5v3.7%22%20%2F%3E%3C%2Fsvg%3E"); }
.agency-icon-shield { --agency-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l7%202.6v5.2c0%204.3-3%207.6-7%208.7-4-1.1-7-4.4-7-8.7V5.6z%22%20%2F%3E%3Cpath%20d%3D%22M9%2011.8l2.1%202.1%204-4.2%22%20%2F%3E%3C%2Fsvg%3E"); }
.agency-icon-check { --agency-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012.5l4.5%204.5L19%207%22%20%2F%3E%3C%2Fsvg%3E"); transform: translateY(1.5px); }
.agency-icon-theme { --agency-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21.75%2015a9.7%209.7%200%200%201-3.75.75A9.75%209.75%200%200%201%209%202.25%209.75%209.75%200%201%200%2021.75%2015Z%22%2F%3E%3C%2Fsvg%3E"); }
.agency-icon-tag { --agency-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.6%2012.6l8-8A1.5%201.5%200%200%201%2012.66%204.16H19A1.5%201.5%200%200%201%2020.5%205.66v6.34a1.5%201.5%200%200%201-.44%201.06l-8%208a1.5%201.5%200%200%201-2.12%200L3.6%2014.72a1.5%201.5%200%200%201%200-2.12z%22%20%2F%3E%3Ccircle%20cx%3D%2215.4%22%20cy%3D%228.6%22%20r%3D%221.3%22%20fill%3D%22currentColor%22%20stroke%3D%22none%22%20%2F%3E%3C%2Fsvg%3E"); }
.agency-icon-gift { --agency-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223.5%22%20y%3D%228%22%20width%3D%2217%22%20height%3D%225%22%20rx%3D%221%22%20%2F%3E%3Cpath%20d%3D%22M5%2013v7.5h14V13M12%208v12.5%22%20%2F%3E%3Cpath%20d%3D%22M12%208C11%205%209.5%204%208%204.5%206.7%205%207%207.2%209%208M12%208c1-3%202.5-4%204-3.5%201.3.5%201%202.7-1%203.5%22%20%2F%3E%3C%2Fsvg%3E"); }
.agency-icon-sparkle { --agency-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20fill%3D%22currentColor%22%20stroke%3D%22none%22%20d%3D%22M12%202.5c.6%204.3%202.7%206.4%207%207-4.3.6-6.4%202.7-7%207-.6-4.3-2.7-6.4-7-7%204.3-.6%206.4-2.7%207-7z%22%20%2F%3E%3C%2Fsvg%3E"); }
.agency-icon-flower { --agency-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%222.3%22%20%2F%3E%3Cpath%20d%3D%22M12%209.7c1-2%202.3-2.6%201.6-4.4C12.9%203.7%2011.1%203.7%2010.4%205.3%209.7%207.1%2011%207.7%2012%209.7zM14.3%2012c2-1%203.3-.4%204.4-1.6%201.1-1.3.2-2.8-1.5-2.6-1.9.2-1.9%201.6-2.9%204.2zM12%2014.3c-1%202-2.3%202.6-1.6%204.4.7%201.6%202.5%201.6%203.2%200%20.7-1.8-.6-2.4-1.6-4.4zM9.7%2012c-2%201-3.3.4-4.4%201.6-1.1%201.3-.2%202.8%201.5%202.6%201.9-.2%201.9-1.6%202.9-4.2z%22%20%2F%3E%3C%2Fsvg%3E"); }
.agency-icon-sun { --agency-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224.2%22%20%2F%3E%3Cpath%20d%3D%22M12%202.5v2.6M12%2018.9v2.6M5.1%205.1l1.85%201.85M17.05%2017.05l1.85%201.85M2.5%2012h2.6M18.9%2012h2.6M5.1%2018.9l1.85-1.85M17.05%206.95l1.85-1.85%22%20%2F%3E%3C%2Fsvg%3E"); }
.agency-icon-leaf { --agency-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2020c0-9%206-15%2016-15%200%2010-6%2016-16%2015z%22%20%2F%3E%3Cpath%20d%3D%22M4%2020c4.5-6%208.5-8.5%2012-9.5%22%20%2F%3E%3C%2Fsvg%3E"); }
.agency-icon-snowflake { --agency-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202.5v19M3.77%207.25l16.46%209.5M20.23%207.25L3.77%2016.75%22%20%2F%3E%3Cpath%20d%3D%22M12%205.6l-2%201.2M12%205.6l2%201.2M12%2018.4l-2-1.2M12%2018.4l2-1.2M5.2%209.3l.1%202.3M5.2%209.3l2-.7M18.8%209.3l-.1%202.3M18.8%209.3l-2-.7M5.2%2014.7l2%20.7M5.2%2014.7l.1-2.3M18.8%2014.7l-2%20.7M18.8%2014.7l-.1-2.3%22%20%2F%3E%3C%2Fsvg%3E"); }
.agency-icon-book { --agency-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%204.8A1.8%201.8%200%200%201%206.8%203H18.2A.8.8%200%200%201%2019%203.8V17H6.8A1.8%201.8%200%200%200%205%2018.8z%22%20%2F%3E%3Cpath%20d%3D%22M19%2017v4H6.8A1.8%201.8%200%200%201%205%2019.2%22%20%2F%3E%3C%2Fsvg%3E"); }
.agency-icon-headset { --agency-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2013.5v-1.5a7%207%200%200%201%2014%200v1.5%22%20%2F%3E%3Crect%20x%3D%223.2%22%20y%3D%2213%22%20width%3D%223.6%22%20height%3D%226.5%22%20rx%3D%221.6%22%20%2F%3E%3Crect%20x%3D%2217.2%22%20y%3D%2213%22%20width%3D%223.6%22%20height%3D%226.5%22%20rx%3D%221.6%22%20%2F%3E%3Cpath%20d%3D%22M19%2019.5v.3a3%203%200%200%201-3%203h-3%22%20%2F%3E%3C%2Fsvg%3E"); }
.agency-icon-package { --agency-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.5%207.5L12%203l8.5%204.5v9L12%2021l-8.5-4.5z%22%20%2F%3E%3Cpath%20d%3D%22M3.5%207.5L12%2012l8.5-4.5M12%2012v9M7.75%205.25l8.5%204.5%22%20%2F%3E%3C%2Fsvg%3E"); }
.agency-icon-phone { --agency-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%226.5%22%20y%3D%222.5%22%20width%3D%2211%22%20height%3D%2219%22%20rx%3D%222.3%22%20%2F%3E%3Cpath%20d%3D%22M10.5%2018.3h3%22%20%2F%3E%3C%2Fsvg%3E"); }
.agency-icon-play { --agency-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%20%2F%3E%3Cpath%20fill%3D%22currentColor%22%20stroke%3D%22none%22%20d%3D%22M10%208.3l6%203.7-6%203.7z%22%20%2F%3E%3C%2Fsvg%3E"); }
.agency-icon-copy { --agency-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%228.5%22%20y%3D%228.5%22%20width%3D%2212%22%20height%3D%2212%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M15.5%208.5V5.5a2%202%200%200%200-2-2h-9a2%202%200%200%200-2%202v9a2%202%200%200%200%202%202h3%22%2F%3E%3C%2Fsvg%3E"); }
html[data-agency-theme="dark"] .agency-icon-theme { --agency-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224.2%22%20%2F%3E%3Cpath%20d%3D%22M12%202.5v2.6M12%2018.9v2.6M5.1%205.1l1.85%201.85M17.05%2017.05l1.85%201.85M2.5%2012h2.6M18.9%2012h2.6M5.1%2018.9l1.85-1.85M17.05%206.95l1.85-1.85%22%20%2F%3E%3C%2Fsvg%3E"); }
.agency-rating-icons {
  --agency-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20fill%3D%22currentColor%22%20stroke%3D%22none%22%20d%3D%22M12%202.6l2.69%205.45%206.01.87-4.35%204.24%201.03%205.99L12%2016.77l-5.38%202.83%201.03-5.99L3.3%208.92l6.01-.87z%22%20%2F%3E%3C%2Fsvg%3E");
  width: 72px;
  height: 14px;
  -webkit-mask-size: 14px 14px;
  mask-size: 14px 14px;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
}

img {
  max-width: 100%;
}

.site {
  min-height: 100vh;
  background: transparent;
}

.agency-container {
  width: min(var(--content-width), calc(100% - (var(--content-padding) * 2)));
  margin-inline: auto;
}

.agency-section {
  position: relative;
  padding: clamp(72px, 9vw, 130px) 0;
}

.agency-section-heading {
  max-width: 790px;
  margin: 0 auto 48px;
  text-align: center;
}

.agency-section-heading.compact {
  max-width: 720px;
  margin-bottom: 28px;
}

.agency-section-heading h2,
.agency-showcase-copy h2,
.agency-custom-card h2,
.agency-proof-inner h2 {
  margin: 12px 0 16px;
  font-family: var(--font);
  font-size: clamp(2rem, 3.2vw, 3rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}

.agency-section-heading p,
.agency-showcase-copy > p,
.agency-custom-card > div > p {
  margin: 0;
  color: var(--agency-muted);
  font-size: clamp(0.98rem, 1.6vw, 1.14rem);
}

.agency-eyebrow,
.agency-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--agency-gold-dark);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.agency-text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--agency-gold-dark);
  font-weight: 800;
}

.agency-text-link span,
.agency-card-cta span,
.agency-btn span {
  transition: transform 180ms ease;
}

.agency-text-link:hover > span:last-child,
.agency-card-cta:hover > span:last-child,
.agency-btn:hover > span:last-child {
  transform: translateX(4px);
}

/* Header */
.site-header.agency-header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 100;
  width: 100%;
  max-width: none;
  min-height: 72px;
  color: var(--agency-ink);
  background: transparent;
  border: 0;
}

.site-header.agency-header.is-scrolled {
  background: transparent;
}

.agency-sale-banner[hidden] { display: none !important; }
.agency-sale-banner {
  --agency-sale-background: linear-gradient(135deg, #023b5c 0%, #00a9c7 42%, #ff9f5a 100%);
  --agency-sale-border: rgba(118, 230, 255, 0.34);
  --agency-sale-shadow: rgba(0, 169, 199, 0.3);
  --agency-sale-badge-bg: linear-gradient(135deg, #fff7d7 0%, #ffd08a 100%);
  --agency-sale-badge-ink: #16212d;
  position: relative;
  width: auto;
  margin: 14px clamp(14px, 3vw, 32px) 0;
  overflow: hidden;
  color: #ffffff;
  background: var(--agency-sale-background);
  border: 1px solid var(--agency-sale-border);
  border-radius: 22px;
  box-shadow: 0 20px 48px -22px var(--agency-sale-shadow), 0 2px 10px rgba(10, 10, 6, 0.1);
  opacity: 0;
  transform: translateY(-16px);
  transition: opacity 260ms ease, transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.agency-sale-banner.is-visible { opacity: 1; transform: translateY(0); }
.agency-sale-banner[data-agency-sale-style="spring-bloom"] { --agency-sale-background: linear-gradient(135deg, #0f4f4a 0%, #188b78 38%, #f0c96a 100%); --agency-sale-border: rgba(185, 232, 183, 0.34); --agency-sale-shadow: rgba(17, 138, 117, 0.28); --agency-sale-badge-bg: linear-gradient(135deg, #fff3bf, #f9dc7a); --agency-sale-badge-ink: #102415; }
.agency-sale-banner[data-agency-sale-style="autumn-ember"] { --agency-sale-background: linear-gradient(135deg, #2c120a 0%, #8b3418 44%, #f2a751 100%); --agency-sale-border: rgba(255, 197, 132, 0.34); --agency-sale-shadow: rgba(190, 95, 36, 0.3); --agency-sale-badge-bg: linear-gradient(135deg, #fff2dd, #ffc66b); --agency-sale-badge-ink: #251007; }
.agency-sale-banner[data-agency-sale-style="winter-frost"] { --agency-sale-background: linear-gradient(135deg, #0a1c3f 0%, #2558a8 42%, #b7e4ff 100%); --agency-sale-border: rgba(189, 232, 255, 0.36); --agency-sale-shadow: rgba(70, 130, 231, 0.26); --agency-sale-badge-bg: linear-gradient(135deg, #ffffff, #dceefe); --agency-sale-badge-ink: #0d1b34; }
.agency-sale-banner[data-agency-sale-style="black-friday"] { --agency-sale-background: linear-gradient(135deg, #050505 0%, #1c1c1c 46%, #8f0c18 100%); --agency-sale-border: rgba(255, 118, 142, 0.3); --agency-sale-shadow: rgba(143, 12, 24, 0.34); --agency-sale-badge-bg: linear-gradient(135deg, #ffe27f, #ff9f44); --agency-sale-badge-ink: #1c0904; }
.agency-sale-banner[data-agency-sale-style="cyber-week"] { --agency-sale-background: linear-gradient(135deg, #09071e 0%, #113f7b 44%, #00ffd9 100%); --agency-sale-border: rgba(117, 255, 229, 0.34); --agency-sale-shadow: rgba(0, 255, 217, 0.2); --agency-sale-badge-bg: linear-gradient(135deg, #f4eeff, #90fff2); --agency-sale-badge-ink: #06161c; }
.agency-sale-banner[data-agency-sale-style="holiday-glow"] { --agency-sale-background: linear-gradient(135deg, #0d2419 0%, #9d162c 50%, #f1c16a 100%); --agency-sale-border: rgba(255, 214, 136, 0.34); --agency-sale-shadow: rgba(157, 22, 44, 0.28); --agency-sale-badge-bg: linear-gradient(135deg, #fff8dc, #ffd47c); --agency-sale-badge-ink: #23140a; }
.agency-sale-banner[data-agency-sale-style="new-year-spark"] { --agency-sale-background: linear-gradient(135deg, #101730 0%, #21366d 44%, #f5ca6c 100%); --agency-sale-border: rgba(255, 224, 152, 0.34); --agency-sale-shadow: rgba(70, 91, 173, 0.28); --agency-sale-badge-bg: linear-gradient(135deg, #fff4cf, #ffd66b); --agency-sale-badge-ink: #1c1731; }
.agency-sale-banner-shimmer {
  position: absolute;
  inset: 0 auto 0 -30%;
  width: 22%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  transform: skewX(-16deg);
  animation: agencySaleShimmer 8.5s linear infinite;
}
.agency-sale-banner-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr) auto auto auto;
  align-items: center;
  gap: 13px;
  width: 100%;
  min-height: 64px;
  margin: 0 auto;
  padding: 10px 18px;
}
.agency-sale-banner-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--agency-sale-badge-ink);
  background: var(--agency-sale-badge-bg);
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 13px;
  box-shadow: 0 12px 28px rgba(3, 13, 18, 0.16);
}
.agency-sale-banner-icon .agency-asset-icon { width: 20px; height: 20px; }
.agency-sale-banner-copy { min-width: 0; }
.agency-sale-banner-title { display: flex; align-items: center; gap: 9px; min-width: 0; }
.agency-sale-banner-title strong { overflow: hidden; font-size: 0.78rem; letter-spacing: 0.07em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.agency-sale-banner-copy > span { display: block; margin-top: 2px; overflow: hidden; color: rgba(255, 255, 255, 0.78); font-size: 0.68rem; text-overflow: ellipsis; white-space: nowrap; }
.agency-sale-banner-discount {
  display: inline-flex;
  flex: 0 0 auto;
  padding: 4px 8px;
  color: var(--agency-sale-badge-ink);
  background: var(--agency-sale-badge-bg);
  border-radius: 999px;
  font-size: 0.67rem;
  font-weight: 900;
}
.agency-sale-price-was { margin-right: 4px; color: var(--agency-muted); font-size: 0.82em; font-weight: 700; text-decoration: line-through; opacity: 0.7; }
.agency-sale-price-now { color: #b9483e; font-weight: 900; }
html[data-agency-theme="dark"] .agency-sale-price-now { color: #ff8f80; }

.agency-sale-countdown { display: flex; align-items: center; gap: 5px; }
.agency-sale-countdown[hidden] { display: none !important; }
.agency-sale-countdown > span { display: grid; min-width: 41px; padding: 4px 5px; background: rgba(5, 9, 12, 0.24); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 9px; text-align: center; }
.agency-sale-countdown strong { font-size: 0.72rem; font-variant-numeric: tabular-nums; line-height: 1.05; }
.agency-sale-countdown small { margin-top: 2px; color: rgba(255, 255, 255, 0.62); font-size: 0.45rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.agency-sale-banner-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 8px 13px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 999px; font-size: 0.7rem; font-weight: 800; white-space: nowrap; transition: transform 180ms ease, background-color 180ms ease; }
.agency-sale-banner-cta:hover { color: #ffffff; background: rgba(255, 255, 255, 0.22); transform: translateY(-1px); }
.agency-sale-banner-cta b { transition: transform 180ms ease; }
.agency-sale-banner-cta:hover b { transform: translateX(2px); }
.agency-sale-banner-close { position: relative; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; color: #ffffff; background: transparent; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 50%; }
.agency-sale-banner-close span::before,
.agency-sale-banner-close span::after { content: ""; position: absolute; top: 50%; left: 50%; width: 13px; height: 1.5px; background: currentColor; border-radius: 99px; transform: translate(-50%, -50%) rotate(45deg); }
.agency-sale-banner-close span::after { transform: translate(-50%, -50%) rotate(-45deg); }
.agency-sale-banner-close:hover { background: rgba(255, 255, 255, 0.13); }

body.has-agency-sale .agency-hero { padding-top: calc(116px + var(--agency-sale-banner-height)); }
body.has-agency-sale .site-content { padding-top: calc(74px + var(--agency-sale-banner-height)); }
body.has-agency-sale .agency-package-shell { padding-top: calc(clamp(108px, 8vw, 138px) + var(--agency-sale-banner-height)); }

.agency-header-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 28px;
  width: min(1520px, calc(100% - 32px));
  min-height: 72px;
  margin: 10px auto 0;
  padding: 7px 11px;
  background: rgba(248, 243, 231, 0.72);
  border: 1px solid rgba(131, 103, 26, 0.13);
  border-radius: 999px;
  box-shadow: 0 10px 34px rgba(76, 55, 8, 0.08);
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.agency-header.is-scrolled .agency-header-shell {
  background: rgba(248, 243, 231, 0.92);
  border-color: rgba(131, 103, 26, 0.2);
  box-shadow: 0 14px 42px rgba(76, 55, 8, 0.13);
}

.agency-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  min-width: 0;
  justify-self: start;
}

.agency-brand img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  transition: transform 220ms ease;
}

.agency-brand:hover img {
  transform: scale(1.08) rotate(-3deg);
}

.agency-navigation {
  position: relative;
  left: auto;
  justify-self: center;
  transform: none;
  width: auto;
  max-width: 100%;
  min-height: 0;
  padding: 4px;
  overflow: hidden;
  color: var(--agency-muted);
  background: rgba(255, 253, 248, 0.46);
  border: 1px solid var(--agency-border);
  border-radius: 999px;
  box-shadow: 0 4px 18px rgba(90, 68, 14, 0.045);
  z-index: 1;
  transition: background-color 180ms ease, border-color 180ms ease;
}

.site-navigation.agency-navigation .navigation-list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 2px;
  margin: 0;
  padding: 0;
  line-height: 20px;
  background: transparent;
  font-size: 0.875rem;
  font-weight: 500;
  list-style: none;
}

.agency-navigation .navigation-list li {
  position: relative;
  flex: none;
}

.site-navigation.agency-navigation .navigation-list > li > a {
  display: block;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
  transition: color 160ms ease, background-color 160ms ease;
}

.agency-navigation .navigation-list a:hover,
.agency-navigation .navigation-list .active > a,
.agency-navigation .navigation-list .link-active {
  color: var(--agency-ink);
  background: rgba(201, 162, 39, 0.14);
}

.agency-navigation .agency-custom-link a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #171005;
  background: linear-gradient(135deg, #f6dfa0, #c9a227 60%, #9f79dd);
  box-shadow: 0 4px 12px rgba(151, 116, 18, 0.18);
  font-weight: 700;
}

.agency-navigation .agency-custom-link a span { font-size: 0.9rem; }
.agency-navigation .agency-gift-link { display: none; }

.agency-mobile-nav-head {
  display: none;
}

.agency-header-actions {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  justify-self: end;
}

.agency-header.is-agency-signed-in .agency-header-actions { gap: 10px; }

.agency-header.has-nav-collision .agency-header-shell { gap: 13px; }
.agency-header.has-nav-collision .agency-discord { display: none; }
.agency-header.has-nav-collision .site-navigation.agency-navigation .navigation-list > li > a {
  padding-inline: 10px;
  font-size: 0.81rem;
}

.agency-discord,
.agency-icon-action,
.agency-menu-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 12px;
  color: var(--agency-muted);
  background: rgba(255, 253, 248, 0.64);
  border: 1px solid var(--agency-border);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: transform 160ms ease, color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.agency-discord {
  gap: 7px;
  color: #6557c8;
  background: rgba(128, 103, 223, 0.09);
  border-color: rgba(128, 103, 223, 0.25);
}

.agency-icon-action {
  gap: 5px;
  appearance: none;
}

.agency-icon-action:hover,
.agency-discord:hover {
  transform: translateY(-1px);
  color: var(--agency-ink);
  border-color: rgba(201, 162, 39, 0.42);
  background: rgba(201, 162, 39, 0.1);
}

.agency-action-icon {
  width: 16px;
  height: 16px;
  color: var(--agency-gold-dark);
  font-size: 1rem;
}

.agency-icon-action .agency-action-text { display: none; }

.agency-account-summary {
  justify-content: flex-start;
  width: auto;
  max-width: 160px;
  padding: 5px 11px;
}

.agency-account-copy {
  display: grid;
  min-width: 0;
  text-align: left;
  line-height: 1.05;
}

.agency-account-copy strong {
  max-width: 108px;
  overflow: hidden;
  color: var(--agency-ink);
  font-size: 0.72rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agency-account-copy small {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
  color: var(--agency-green);
  font-size: 0.58rem;
  font-weight: 750;
  white-space: nowrap;
}

.agency-account-copy small i {
  width: 5px;
  height: 5px;
  background: currentColor;
  border-radius: 999px;
  box-shadow: 0 0 0 3px rgba(27, 156, 86, 0.12);
}

.agency-language-picker { position: relative; }
.agency-language-toggle { gap: 6px; width: auto; min-width: 58px; }
.agency-language-code { color: var(--agency-muted); font-size: 0.78rem; font-weight: 600; }
.agency-language-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 300;
  display: grid;
  gap: 3px;
  width: 174px;
  padding: 8px;
  color: var(--agency-ink);
  background: rgba(255, 253, 248, 0.97);
  border: 1px solid var(--agency-border);
  border-radius: 16px;
  box-shadow: 0 20px 55px rgba(62, 43, 2, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-7px) scale(0.97);
  transform-origin: top right;
  transition: opacity 170ms ease, transform 170ms ease, visibility 170ms ease;
}
.agency-language-picker.is-open .agency-language-menu { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.agency-language-menu a { padding: 9px 11px; border-radius: 10px; color: var(--agency-muted); font-size: 0.82rem; font-weight: 500; }
.agency-language-menu a:hover { color: var(--agency-ink); background: rgba(201, 162, 39, 0.1); }
.agency-language-menu a.is-active { color: #171005; background: linear-gradient(135deg, #f3dda0, #d5b23b); font-weight: 700; }

.agency-menu-button {
  display: none;
  flex-direction: column;
  gap: 4px;
  width: 38px;
  padding: 0;
}

.agency-menu-button span {
  width: 15px;
  height: 1.5px;
  background: currentColor;
  border-radius: 3px;
}

.agency-mobile-secondary {
  display: none;
}

@media (min-width: 1101px) {
  .agency-header.has-nav-overflow .agency-header-shell { grid-template-columns: minmax(0, 1fr) auto; }
  .agency-header.has-nav-overflow .agency-menu-button { display: inline-flex; }
  .agency-header.has-nav-overflow .agency-navigation {
    position: absolute;
    top: calc(100% + 9px);
    right: 16px;
    left: auto;
    z-index: 220;
    display: flex;
    flex-direction: column;
    width: min(360px, calc(100vw - 32px));
    max-height: calc(100dvh - 110px);
    padding: 16px;
    overflow-y: auto;
    color: var(--agency-ink);
    background: rgba(248, 243, 231, 0.98);
    border: 1px solid var(--agency-border);
    border-radius: 24px;
    box-shadow: 0 24px 70px rgba(55, 38, 2, 0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.98);
    transform-origin: top right;
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
  }
  .agency-header.has-nav-overflow .agency-navigation.open,
  .agency-header.has-nav-overflow .agency-navigation.navigation-open,
  body.show-navigation .agency-header.has-nav-overflow .agency-navigation,
  body.navigation-open .agency-header.has-nav-overflow .agency-navigation,
  body.is-navigation-open .agency-header.has-nav-overflow .agency-navigation {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
  }
  .agency-header.has-nav-overflow .agency-mobile-nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 2px 14px;
  }
  .agency-header.has-nav-overflow .agency-mobile-nav-head .close-navigation {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    color: var(--agency-ink);
    background: rgba(201, 162, 39, 0.1);
    border: 1px solid var(--agency-border);
    border-radius: 50%;
    font-size: 1.45rem;
  }
  .agency-header.has-nav-overflow .site-navigation.agency-navigation .navigation-list {
    align-items: stretch;
    flex-direction: column;
    gap: 5px;
  }
  .agency-header.has-nav-overflow .site-navigation.agency-navigation .navigation-list > li > a {
    padding: 13px 15px;
    border-radius: 13px;
    font-size: 0.94rem;
  }
  .agency-header.has-nav-overflow .agency-navigation .agency-gift-link { display: block; }
}

/* Hero */
.agency-hero {
  --agency-cosmos-far-x: 0px;
  --agency-cosmos-far-y: 0px;
  --agency-cosmos-mid-x: 0px;
  --agency-cosmos-mid-y: 0px;
  --agency-cosmos-near-x: 0px;
  --agency-cosmos-near-y: 0px;
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  padding: 116px 0 72px;
  overflow: hidden;
}

.agency-hero::after {
  content: "";
  position: absolute;
  right: -20%;
  bottom: -45%;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.06), transparent 64%);
  pointer-events: none;
}

.agency-hero-rays {
  position: absolute;
  inset: -40% -10% 0 -30%;
  background:
    linear-gradient(135deg, rgba(196, 148, 18, 0.12), transparent 39%),
    linear-gradient(142deg, rgba(236, 203, 103, 0.14), transparent 32%),
    linear-gradient(128deg, rgba(143, 103, 7, 0.07), transparent 47%);
  animation: agencyGlow 7s ease-in-out infinite alternate;
}

.agency-cosmos {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.agency-nebula {
  position: absolute;
  inset: -36%;
  opacity: 0.72;
  background:
    radial-gradient(ellipse at 24% 34%, rgba(229, 190, 66, 0.16), transparent 24%),
    radial-gradient(ellipse at 76% 64%, rgba(128, 103, 223, 0.13), transparent 27%),
    conic-gradient(from 120deg at 50% 50%, transparent, rgba(201, 162, 39, 0.055), transparent 28%, rgba(128, 103, 223, 0.045), transparent 62%);
  animation: agencyNebulaDrift 22s ease-in-out infinite alternate;
}

.agency-star-layer {
  position: absolute;
  inset: -7%;
  will-change: transform;
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.agency-star-layer-far {
  opacity: 0.58;
  transform: translate3d(var(--agency-cosmos-far-x), var(--agency-cosmos-far-y), 0) scale(1.02);
}
.agency-star-layer-mid {
  opacity: 0.82;
  transform: translate3d(var(--agency-cosmos-mid-x), var(--agency-cosmos-mid-y), 0) scale(1.035);
}
.agency-star-layer-near {
  transform: translate3d(var(--agency-cosmos-near-x), var(--agency-cosmos-near-y), 0) scale(1.055);
}

.agency-cosmic-star {
  position: absolute;
  top: var(--agency-star-top);
  left: var(--agency-star-left);
  width: var(--agency-star-size);
  height: var(--agency-star-size);
  color: #f2c84e;
  background: currentColor;
  border-radius: 50%;
  box-shadow: 0 0 8px currentColor, 0 0 22px rgba(201, 162, 39, 0.46);
  transform: rotate(var(--agency-star-rotate));
  animation: agencyStarBurst var(--agency-star-duration) ease-in-out var(--agency-star-delay) infinite;
}

.agency-cosmic-star::before,
.agency-cosmic-star::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  transform: translate(-50%, -50%);
}
.agency-cosmic-star::before { width: calc(var(--agency-star-size) * 5.8); height: 1px; }
.agency-cosmic-star::after { width: 1px; height: calc(var(--agency-star-size) * 5.8); background: linear-gradient(180deg, transparent, currentColor, transparent); }
.agency-cosmic-star.is-flare {
  border-radius: 0;
  clip-path: polygon(50% 0, 60% 38%, 100% 50%, 60% 62%, 50% 100%, 40% 62%, 0 50%, 40% 38%);
  box-shadow: 0 0 18px currentColor, 0 0 44px rgba(201, 162, 39, 0.65);
}
.agency-cosmic-star.is-purple { color: #9d86ef; box-shadow: 0 0 11px currentColor, 0 0 32px rgba(128, 103, 223, 0.56); }

html[data-agency-theme="light"] .agency-nebula { opacity: 0.38; filter: saturate(0.72); }
html[data-agency-theme="light"] .agency-star-layer-far { opacity: 0.16; }
html[data-agency-theme="light"] .agency-star-layer-mid { opacity: 0.25; }
html[data-agency-theme="light"] .agency-star-layer-near { opacity: 0.34; }
html[data-agency-theme="light"] .agency-cosmic-star {
  color: #bd8e10;
  box-shadow: 0 0 5px rgba(189, 142, 16, 0.42), 0 0 13px rgba(201, 162, 39, 0.16);
  filter: saturate(0.72);
}
html[data-agency-theme="light"] .agency-cosmic-star::before,
html[data-agency-theme="light"] .agency-cosmic-star::after { opacity: 0.42; }
html[data-agency-theme="light"] .agency-cosmic-star.is-flare { box-shadow: 0 0 9px rgba(189, 142, 16, 0.38), 0 0 20px rgba(201, 162, 39, 0.12); }
html[data-agency-theme="light"] .agency-cosmic-star.is-purple { color: #8e78cf; opacity: 0.42; box-shadow: 0 0 8px rgba(128, 103, 223, 0.18); }
html[data-agency-theme="light"] .agency-meteor { filter: opacity(0.26) drop-shadow(0 0 4px rgba(189, 142, 16, 0.24)); }

.agency-meteor {
  position: absolute;
  top: -12%;
  left: 72%;
  width: 190px;
  height: 2px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 246, 201, 0.9) 72%, #ffffff);
  border-radius: 999px;
  filter: drop-shadow(0 0 7px rgba(240, 197, 62, 0.8));
  transform: rotate(-28deg) translate3d(0, 0, 0);
  animation: agencyMeteorFly 9s cubic-bezier(0.2, 0.7, 0.3, 1) infinite;
}
.agency-meteor::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 50%;
  width: 7px;
  height: 7px;
  background: #fff8d9;
  border-radius: 50%;
  box-shadow: 0 0 18px #ffffff, 0 0 35px #e8bc3c;
  transform: translateY(-50%);
}
.agency-meteor-two { top: 13%; left: 92%; width: 135px; animation-delay: -3.4s; animation-duration: 11.5s; }
.agency-meteor-three { top: -20%; left: 44%; width: 110px; animation-delay: -6.8s; animation-duration: 13s; }

.agency-hero-content {
  position: relative;
  z-index: 2;
  max-width: 980px;
  text-align: center;
}

.agency-kicker {
  min-width: 220px;
  justify-content: center;
  padding: 8px 17px;
  background: rgba(201, 162, 39, 0.06);
  border: 1px solid rgba(201, 162, 39, 0.22);
  border-radius: 999px;
}

.agency-kicker i {
  width: 6px;
  height: 6px;
  background: var(--agency-gold);
  border-radius: 50%;
  box-shadow: 0 0 9px rgba(201, 162, 39, 0.8);
}

.agency-hero-logo {
  display: block;
  width: clamp(62px, 8vw, 94px);
  height: clamp(62px, 8vw, 94px);
  margin: 30px auto 18px;
  object-fit: contain;
  filter: drop-shadow(0 14px 25px rgba(201, 162, 39, 0.18));
  animation: agencyFloat 4.8s ease-in-out infinite;
}

.agency-hero h1 {
  /* Der Farbverlauf wird ueber background-clip: text in die Buchstaben
     gestanzt, die Schriftfarbe selbst ist durchsichtig. Sichtbar ist damit
     nur, wo Buchstabe UND Hintergrundflaeche uebereinanderliegen. Bei
     line-height: 1.1 ragen die Unterlaengen von g, y und p unter den Kasten
     hinaus und wurden dort glatt abgeschnitten.

     Das Polster unten vergroessert allein die Hintergrundflaeche; der
     gleich grosse negative Aussenabstand nimmt es im Layout wieder zurueck,
     es verschiebt sich also nichts. In em, damit es bei jeder Schriftgroesse
     passt. 0.08em war zu knapp bemessen, 0.25em hat Luft. */
  margin: 0 0 -0.25em;
  padding-bottom: 0.25em;
  color: transparent;
  background: linear-gradient(110deg, #d2ad31, #a77f19 46%, #c99e29 76%, #8067df);
  background-size: 180% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  font-family: var(--font);
  font-size: 6rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  animation: agencyGradient 8s ease infinite;
}

.agency-hero-subtitle {
  max-width: 710px;
  margin: 28px auto 0;
  color: var(--agency-muted);
  font-size: 1.125rem;
  line-height: 1.625;
}

.agency-hero-actions,
.agency-showcase-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}

.agency-btn,
.btn-primary,
.btn-secondary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  overflow: hidden;
  isolation: isolate;
  background-clip: border-box;
  -webkit-background-clip: border-box;
  transform: translateZ(0);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.agency-btn::before,
.agency-btn::after { content: none !important; display: none !important; }

.agency-btn:hover,
.btn-primary:hover,
.btn-secondary:hover {
  transform: translateY(-2px);
}

.agency-btn-primary,
.btn-primary {
  color: #120e04;
  background: linear-gradient(135deg, #e3c45f, #c9a227 55%, #a07d1c);
  box-shadow: 0 10px 24px rgba(169, 129, 18, 0.22);
}

.agency-btn-primary:hover,
.btn-primary:hover {
  color: #ffffff;
  background: linear-gradient(135deg, #c9a227, #8a6816);
  box-shadow: 0 14px 34px rgba(169, 129, 18, 0.3);
}

.agency-btn-discord {
  color: #5d4ec8;
  background: rgba(128, 103, 223, 0.09);
  border-color: rgba(128, 103, 223, 0.28);
}

.agency-btn-ghost,
.btn-secondary {
  color: var(--agency-ink);
  background: rgba(255, 253, 248, 0.65);
  border-color: var(--agency-border);
}

.agency-btn-ghost:hover,
.btn-secondary:hover {
  border-color: rgba(201, 162, 39, 0.45);
  box-shadow: 0 10px 24px rgba(101, 74, 8, 0.08);
}

.agency-hero-note {
  margin: 17px 0 0;
  color: #958b77;
  font-size: 0.83rem;
}

.agency-hero-note a,
.agency-custom-teaser {
  color: var(--agency-gold-dark);
  font-weight: 800;
}

.agency-custom-teaser {
  display: inline-flex;
  gap: 6px;
  margin-top: 10px;
  font-size: 0.8rem;
}

.agency-trust-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 44px;
  margin-top: 50px;
  color: #8c826f;
  font-size: 0.82rem;
  font-weight: 650;
}

.agency-trust-row b {
  margin-right: 7px;
  color: var(--agency-gold);
  letter-spacing: 0.06em;
}

/* Companion app */
.agency-app-section {
  padding-top: 70px;
}

.agency-app-card {
  padding: clamp(34px, 6vw, 74px);
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 235, 169, 0.8), transparent 42%),
    linear-gradient(150deg, #fffaf0, #f0e2bb);
  border: 1px solid rgba(201, 162, 39, 0.21);
  border-radius: 34px;
  box-shadow: var(--agency-shadow);
}

.agency-device-stage {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 240px;
  margin: 22px auto;
  filter: drop-shadow(0 25px 18px rgba(62, 43, 2, 0.15));
}

.agency-device {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.24);
  border: 2px solid rgba(151, 116, 25, 0.28);
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.32);
  backdrop-filter: blur(8px);
}

.agency-device img {
  width: 38%;
  max-height: 40%;
  object-fit: contain;
  opacity: 0.74;
}

.agency-device.ipad { width: 176px; height: 126px; margin-right: -24px; border-radius: 18px; z-index: 3; }
.agency-device.mac { width: 300px; height: 178px; margin-bottom: 27px; border-radius: 14px; z-index: 2; overflow: visible; }
.agency-device.mac::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -34px;
  width: 38px;
  height: 34px;
  background: linear-gradient(90deg, rgba(201, 162, 39, 0.14), rgba(255, 255, 255, 0.3), rgba(201, 162, 39, 0.14));
  border-inline: 2px solid rgba(151, 116, 25, 0.24);
  transform: translateX(-50%);
}
.agency-device.mac::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -39px;
  width: 92px;
  height: 8px;
  background: rgba(255, 255, 255, 0.24);
  border: 2px solid rgba(151, 116, 25, 0.25);
  border-radius: 999px;
  transform: translateX(-50%);
}
.agency-device.iphone { width: 78px; height: 154px; margin-left: -18px; border-radius: 22px; z-index: 4; }
.agency-device.iphone::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 50%;
  width: 28px;
  height: 7px;
  background: rgba(23, 19, 10, 0.78);
  border-radius: 999px;
  transform: translateX(-50%);
}
.agency-device.watch { width: 64px; height: 74px; margin-left: 10px; border-radius: 20px; z-index: 4; }
.agency-device.watch::before,
.agency-device.watch::after {
  content: "";
  position: absolute;
  left: 50%;
  z-index: -1;
  width: 34px;
  height: 22px;
  background: rgba(151, 116, 25, 0.18);
  border: 1px solid rgba(151, 116, 25, 0.18);
  transform: translateX(-50%);
}
.agency-device.watch::before { top: -18px; border-radius: 12px 12px 4px 4px; }
.agency-device.watch::after { bottom: -18px; border-radius: 4px 4px 12px 12px; }

.agency-store-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 8px 0 18px;
}

.agency-store-badges a {
  display: block;
  height: 40px;
  padding: 0;
  background: transparent;
  transition: transform 180ms ease;
}

.agency-store-badges a:hover { transform: translateY(-2px); }
.agency-store-badges img { display: block; width: auto; height: 40px; }
.agency-app-note { margin: 18px 0 0; color: #948a76; font-size: 0.76rem; }

/* Release cards and proof */
.agency-release-grid { padding-top: 30px; }

.agency-two-promos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.agency-release-card {
  position: relative;
  min-height: 330px;
  padding: clamp(30px, 5vw, 54px);
  overflow: hidden;
  background: var(--agency-white);
  border: 1px solid var(--agency-border);
  border-radius: 28px;
  box-shadow: 0 12px 40px rgba(73, 53, 7, 0.07);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.agency-release-card::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  right: -75px;
  bottom: -100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 162, 39, 0.28), transparent 67%);
}

.agency-release-essentials::after {
  background: radial-gradient(circle, rgba(128, 103, 223, 0.2), transparent 67%);
}

.agency-release-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--agency-shadow-hover);
}

.agency-release-card h2 {
  max-width: 560px;
  margin: 16px 0 14px;
  font-family: var(--font);
  font-size: clamp(1.7rem, 3vw, 2.8rem);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.agency-release-card p { max-width: 500px; color: var(--agency-muted); }
.agency-release-card .agency-text-link { margin-top: 32px; }

.agency-proof-section {
  padding: clamp(100px, 15vw, 210px) 0;
  color: var(--agency-ink);
  background:
    radial-gradient(circle at 15% 20%, rgba(201, 162, 39, 0.18), transparent 35%),
    radial-gradient(circle at 90% 85%, rgba(128, 103, 223, 0.1), transparent 36%),
    rgba(255, 253, 248, 0.72);
  border-block: 1px solid var(--agency-border);
  overflow: hidden;
}

.agency-proof-inner { text-align: center; }
.agency-proof-inner .agency-eyebrow { color: #e8cb68; }

.agency-proof-inner h2 {
  display: flex;
  flex-direction: column;
  margin-top: 26px;
  font-size: clamp(3rem, 6vw, 6rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

.agency-proof-inner h2 span:nth-child(2) { color: #e5c55d; }
.agency-proof-inner h2 span:nth-child(3) { color: var(--agency-muted); opacity: 0.58; }

.agency-proof-inner h2.agency-proof-scroll span {
  opacity: 0;
  filter: blur(9px);
  transform: translate3d(0, 46px, 0) scale(0.965);
  transform-origin: center;
  transition: opacity 460ms ease, filter 680ms ease, transform 760ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, filter, transform;
}
.agency-proof-inner h2.agency-proof-scroll span:nth-child(2) { transition-delay: 85ms; }
.agency-proof-inner h2.agency-proof-scroll span:nth-child(3) { transition-delay: 170ms; }
.agency-proof-inner h2.agency-proof-scroll.is-scroll-visible span {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
}

.agency-proof-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  max-width: 840px;
  margin: 70px auto 0;
  background: rgba(201, 162, 39, 0.11);
  border: 1px solid var(--agency-border);
  border-radius: 20px;
  overflow: hidden;
}

.agency-proof-stats div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 26px 18px;
  background: rgba(255, 253, 248, 0.76);
}

.agency-proof-stats strong { color: #e5c55d; font-size: 1.6rem; }
.agency-proof-stats span { color: var(--agency-muted); font-size: 0.8rem; }

/* Product showcases */
.agency-showcase-section { overflow: hidden; }
.agency-showcase-section.alt { padding-top: 20px; }

.agency-showcase {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  align-items: center;
  gap: clamp(44px, 8vw, 110px);
}

.agency-showcase-copy h2 {
  font-size: clamp(3rem, 4vw, 3.75rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
}

.agency-app-card .agency-section-heading h2 {
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.25;
}

.agency-how .agency-section-heading h2 {
  font-size: 1.875rem;
  line-height: 1.2;
}
.agency-showcase-copy ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.agency-showcase-copy li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #5f5748;
  font-size: 0.9rem;
  font-weight: 700;
}

.agency-showcase-copy li::before {
  content: "";
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--agency-green);
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012.5l4.5%204.5L19%207%22%20%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012.5l4.5%204.5L19%207%22%20%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

.agency-showcase-actions { justify-content: flex-start; }

.agency-showcase-price-inline {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 10px 15px;
  color: var(--agency-gold-dark);
  background: rgba(201, 162, 39, 0.1);
  border: 1px solid rgba(201, 162, 39, 0.2);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

.agency-showcase-image {
  --agency-pointer-x: 50%;
  --agency-pointer-y: 50%;
  --agency-parallax-x: 0px;
  --agency-parallax-y: 0px;
  position: relative;
  display: grid;
  min-height: clamp(500px, 42vw, 620px);
  padding: 14px;
  place-items: center;
  overflow: hidden;
  background: rgba(255, 253, 248, 0.8);
  border: 1px solid var(--agency-border);
  border-radius: 28px;
  box-shadow: var(--agency-shadow);
  transform: perspective(1000px) rotateY(-3deg) rotateX(1deg);
  transform-style: preserve-3d;
  transition: transform 180ms ease-out, box-shadow 260ms ease;
}

.agency-showcase-image::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle 145px at var(--agency-pointer-x) var(--agency-pointer-y), rgba(228, 188, 62, 0.34), rgba(201, 162, 39, 0.1) 38%, transparent 72%);
  transition: opacity 180ms ease;
}

.agency-showcase-image.is-pointer-active::before { opacity: 1; }

.agency-showcase-pad .agency-showcase-image { transform: perspective(1000px) rotateY(3deg) rotateX(1deg); }
.agency-showcase-pad .agency-showcase-image { min-height: clamp(430px, 35vw, 540px); }
.agency-showcase-image:hover { box-shadow: var(--agency-shadow-hover); }
.agency-showcase-image img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: clamp(470px, 39vw, 590px);
  padding: 0;
  object-fit: contain;
  border-radius: 19px;
  filter: drop-shadow(0 28px 34px rgba(35, 24, 2, 0.2)) drop-shadow(0 0 52px rgba(201, 162, 39, 0.12));
  transform: translate3d(var(--agency-parallax-x), var(--agency-parallax-y), 24px);
  transition: transform 180ms ease-out;
}
.agency-showcase-pad .agency-showcase-image img { height: clamp(390px, 32vw, 500px); }

/* Subscriptions and how it works */
.agency-subscriptions {
  background: rgba(237, 227, 198, 0.48);
  border-block: 1px solid rgba(131, 103, 26, 0.1);
}

.agency-sub-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 900px;
  margin: auto;
}

.agency-sub-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: clamp(28px, 4vw, 44px);
  background: var(--agency-white);
  border: 1px solid var(--agency-border);
  border-radius: 26px;
  box-shadow: 0 14px 40px rgba(66, 48, 7, 0.07);
}

.agency-sub-card.featured {
  border-color: rgba(201, 162, 39, 0.46);
  box-shadow: 0 18px 55px rgba(127, 93, 10, 0.14);
}

.agency-sub-label { color: var(--agency-gold-dark); font-size: 0.78rem; font-weight: 800; }
.agency-sub-card h3 { margin: 9px 0 14px; font-size: 1.35rem; letter-spacing: -0.03em; }
.agency-sub-price { display: flex; align-items: baseline; gap: 8px; margin: 0 0 20px; }
.agency-sub-price strong { font-size: 2.2rem; }
.agency-sub-price span { color: var(--agency-muted); font-size: 0.82rem; }
.agency-first-month { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 14px; color: #8a3e39; background: #fff0ed; border: 1px solid #f2d4cf; border-radius: 13px; }
.agency-first-month span { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; }
.agency-first-month strong { grid-row: span 2; align-self: center; font-size: 1.25rem; }
.agency-first-month-code {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  color: #9f514b;
  background: rgba(159, 81, 75, 0.1);
  border: 1px dashed rgba(159, 81, 75, 0.4);
  border-radius: 8px;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}
.agency-first-month-code:hover { background: rgba(159, 81, 75, 0.18); border-color: rgba(159, 81, 75, 0.6); }
.agency-first-month-code code { color: inherit; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.01em; }
.agency-first-month-code .agency-asset-icon { width: 13px; height: 13px; flex: 0 0 auto; }
.agency-first-month-code.is-copied { color: #2c7a4b; background: rgba(44, 122, 75, 0.12); border-color: rgba(44, 122, 75, 0.5); }
.agency-first-month-code.is-copied code { color: inherit; }
.agency-sub-card h4 { margin: 27px 0 12px; font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; }
.agency-sub-card ul { display: grid; gap: 9px; margin: 0 0 26px; padding: 0; list-style: none; color: var(--agency-muted); font-size: 0.86rem; }
.agency-sub-card li::before,
.agency-custom-benefits span::before,
.agency-how-trust span::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  vertical-align: -2px;
  color: var(--agency-green);
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012.5l4.5%204.5L19%207%22%20%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012.5l4.5%204.5L19%207%22%20%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
.agency-sub-card .agency-btn { width: 100%; margin-top: auto; }

.agency-how { padding-bottom: 80px; }
.agency-how-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.agency-how-grid article { padding: 30px; background: rgba(255, 253, 248, 0.64); border: 1px solid var(--agency-border); border-radius: 20px; }
.agency-how-grid article > span { display: grid; place-items: center; width: 42px; height: 42px; color: #120e04; background: linear-gradient(135deg, #ead377, #c9a227); border-radius: 50%; font-weight: 900; }
.agency-how-grid h3 { margin: 22px 0 9px; font-size: 1.1rem; }
.agency-how-grid p { margin: 0; color: var(--agency-muted); font-size: 0.88rem; }
.agency-how-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; margin-top: 30px; color: #8b816e; font-size: 0.78rem; font-weight: 750; }

/* Product grids */
.agency-products-section { padding-top: 100px; }
.agency-category-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: -18px 0 46px; }
.agency-category-pills a,
.agency-category-pills button { display: inline-flex; align-items: center; min-height: 40px; padding: 10px 17px; overflow: hidden; color: var(--agency-muted); background: rgba(255, 253, 248, 0.55); border: 1px solid var(--agency-border); border-radius: 13px; font-size: 0.78rem; font-weight: 750; line-height: 1.2; cursor: pointer; transition: transform 170ms ease, color 170ms ease, background-color 170ms ease, border-color 170ms ease, box-shadow 170ms ease; }
.agency-category-pills a:hover,
.agency-category-pills button:hover,
.agency-category-pills button.active { color: #120e04; background: linear-gradient(135deg, #e6cb6d, #c9a227); border-color: transparent; box-shadow: 0 10px 24px rgba(169, 129, 18, 0.16); transform: translateY(-2px); }

.agency-product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.agency-product-card[hidden] { display: none !important; }

.agency-products-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 210px;
  min-height: 48px;
  margin: 34px auto 0;
  padding: 12px 22px;
  overflow: hidden;
  color: var(--agency-ink);
  background: rgba(255, 253, 248, 0.72);
  border: 1px solid var(--agency-border);
  border-radius: 999px;
  box-shadow: 0 12px 32px rgba(75, 55, 9, 0.07);
  font-weight: 800;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
.agency-products-toggle:hover { border-color: rgba(201, 162, 39, 0.45); box-shadow: 0 17px 38px rgba(75, 55, 9, 0.13); transform: translateY(-2px); }
.agency-products-toggle-count { color: var(--agency-gold-dark); }
.agency-products-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1); }
.agency-products-toggle.is-expanded svg { transform: rotate(180deg); }
.agency-products-toggle[hidden] { display: none !important; }

.agency-product-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: rgba(255, 253, 248, 0.78);
  border: 1px solid var(--agency-border);
  border-radius: 22px;
  box-shadow: 0 10px 34px rgba(75, 55, 9, 0.055);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.agency-product-card:hover {
  transform: translateY(-7px);
  border-color: rgba(201, 162, 39, 0.4);
  box-shadow: var(--agency-shadow-hover);
}

.agency-product-image {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #171208;
}

.agency-product-image::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 32%;
  background: linear-gradient(to top, rgba(10, 7, 2, 0.35), transparent);
}

.agency-product-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 430ms ease;
}

.agency-product-card:hover .agency-product-image img { transform: scale(1.045); }

.agency-product-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 6px 9px;
  color: #151005;
  background: rgba(239, 210, 111, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.17);
  font-size: 0.63rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.agency-product-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 19px;
}

.agency-product-meta { margin: 0 0 6px; color: var(--agency-gold-dark); font-size: 0.66rem; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; }
.agency-product-body h3 { margin: 0; font-size: 0.875rem; font-weight: 600; letter-spacing: 0; line-height: 1.43; }
.agency-product-body h3 a:hover { color: var(--agency-gold-dark); }
.agency-product-description { display: -webkit-box; margin: 10px 0 20px; overflow: hidden; color: var(--agency-muted); font-size: 0.78rem; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.agency-product-bottom { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: 13px; border-top: 1px solid rgba(131, 103, 26, 0.1); }
.agency-product-price { color: var(--agency-gold-dark); font-size: 1.02rem; font-weight: 900; }
.agency-product-price.is-free { color: var(--agency-green); }
.agency-card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  gap: 5px;
  padding: 8px 10px;
  overflow: hidden;
  border: 1px solid var(--agency-border);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agency-card-actions { display: flex; align-items: stretch; width: 100%; gap: 8px; min-width: 0; }
.agency-card-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  gap: 6px;
  min-height: 34px;
  padding: 8px 11px;
  overflow: hidden;
  color: #140f03;
  background: linear-gradient(135deg, #e8ca67, #c9a227);
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.69rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.agency-card-cart::before,
.agency-card-cart::after { content: none !important; display: none !important; }
.agency-card-cart:hover { color: #ffffff; background: linear-gradient(135deg, #c9a227, #8a6816); transform: translateY(-1px); }
.agency-card-cart .agency-asset-icon { width: 13px; height: 13px; }
.agency-card-cart-added { color: #0d4024; background: rgba(27, 156, 86, 0.15); border-color: rgba(27, 156, 86, 0.28); }

.agency-bundles-section { background: rgba(237, 227, 198, 0.45); border-block: 1px solid rgba(131, 103, 26, 0.1); }
.agency-bundle-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.agency-bundle-grid .agency-product-card:first-child,
.agency-bundle-grid .agency-product-card:nth-child(2) { grid-column: span 1; }
.agency-bundle-grid .agency-product-body h3 { font-size: 1.125rem; font-weight: 700; line-height: 1.56; }

/* Custom, reviews and FAQ */
.agency-custom-card {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(36px, 7vw, 90px);
  padding: clamp(36px, 7vw, 76px);
  color: var(--agency-ink);
  background:
    radial-gradient(circle at 80% 15%, rgba(201, 162, 39, 0.16), transparent 35%),
    radial-gradient(circle at 10% 90%, rgba(128, 103, 223, 0.1), transparent 34%),
    rgba(255, 253, 248, 0.82);
  border: 1px solid rgba(201, 162, 39, 0.23);
  border-radius: 32px;
  box-shadow: 0 25px 80px rgba(24, 17, 2, 0.21);
}

.agency-custom-card .agency-eyebrow { color: #e2c45f; }
.agency-custom-card h2 { font-size: 3rem; font-weight: 800; letter-spacing: -0.025em; line-height: 1.25; }
.agency-custom-card > div > p { color: var(--agency-muted); }
.agency-custom-benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 32px; }
.agency-custom-benefits span { padding: 12px 14px; color: var(--agency-ink); background: rgba(255, 253, 248, 0.74); border: 1px solid var(--agency-border); border-radius: 12px; font-size: 0.78rem; font-weight: 700; }
.agency-custom-benefits span::before { color: #e2c45f; }
.agency-custom-prices { display: grid; gap: 10px; }
.agency-custom-prices > div { display: grid; grid-template-columns: 1fr auto; gap: 1px 15px; padding: 17px; background: rgba(255, 253, 248, 0.74); border: 1px solid var(--agency-border); border-radius: 14px; }
.agency-custom-prices small { color: #e2c45f; font-weight: 800; }
.agency-custom-prices strong { grid-row: span 2; align-self: center; font-size: 1.2rem; }
.agency-custom-prices span { color: var(--agency-muted); font-size: 0.72rem; }
.agency-custom-prices .agency-btn { margin-top: 8px; }
.agency-custom-ticket-cta {
  min-height: 58px;
  padding-inline: 24px;
  color: #171005 !important;
  font-size: clamp(0.9rem, 1vw, 1rem);
  font-weight: 850;
  letter-spacing: -0.01em;
  text-align: center;
}
.agency-custom-ticket-cta > span:first-child { color: inherit; font-size: inherit; font-weight: inherit; }

.agency-reviews-section { padding-bottom: 80px; }
.agency-review-summary { display: flex; flex-direction: column; align-items: center; margin: -15px 0 36px; }
.agency-review-summary strong { font-family: var(--font); font-size: 4rem; font-weight: 700; line-height: 1; }
.agency-review-summary span { margin: 7px 0; color: var(--agency-gold); letter-spacing: 0.2em; }
.agency-review-summary p { margin: 0; color: var(--agency-muted); font-size: 0.78rem; }
.agency-review-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.agency-review-grid blockquote { margin: 0; padding: 27px; background: rgba(255, 253, 248, 0.72); border: 1px solid var(--agency-border); border-radius: 20px; }
.agency-review-grid blockquote > span { color: var(--agency-gold); letter-spacing: 0.12em; }
.agency-review-grid blockquote p { color: #5d5547; font-size: 0.9rem; }
.agency-review-grid blockquote footer { color: var(--agency-muted); font-size: 0.72rem; font-weight: 800; }

.agency-faq-section { padding-top: 80px; background: linear-gradient(180deg, transparent, rgba(236, 225, 194, 0.65)); }
.agency-faq-wrap { max-width: 940px; }
.agency-faq-list { display: grid; gap: 11px; }
.agency-faq-list details { overflow: hidden; background: rgba(255, 253, 248, 0.8); border: 1px solid var(--agency-border); border-radius: 16px; transition: border-color 180ms ease, box-shadow 180ms ease; }
.agency-faq-list details[open] { border-color: rgba(201, 162, 39, 0.4); box-shadow: 0 12px 30px rgba(76, 55, 8, 0.07); }
.agency-faq-list summary { position: relative; padding: 20px 54px 20px 22px; font-weight: 800; cursor: pointer; list-style: none; }
.agency-faq-list summary::-webkit-details-marker { display: none; }
.agency-faq-list summary::after { content: "+"; position: absolute; top: 50%; right: 22px; color: var(--agency-gold-dark); font-size: 1.35rem; transform: translateY(-50%); }
.agency-faq-list details[open] summary::after { content: "\00D7"; }
.agency-faq-list details p { margin: 0; padding: 0 22px 22px; color: var(--agency-muted); font-size: 0.9rem; }
.agency-faq-list details p a { color: var(--agency-gold-dark); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }

/* Global Agency network and AgencyAI docks */
.agency-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.agency-floating-tools {
  position: relative;
  z-index: 90;
  pointer-events: none;
}

.agency-floating-tools [hidden] { display: none !important; }
.agency-network-dock,
.agency-ai-dock {
  position: fixed;
  bottom: max(18px, env(safe-area-inset-bottom, 0px));
  z-index: 90;
  pointer-events: auto;
}
.agency-network-dock { left: max(18px, env(safe-area-inset-left, 0px)); }
.agency-ai-dock { right: max(18px, env(safe-area-inset-right, 0px)); }

.agency-social-proof {
  position: fixed;
  left: max(18px, env(safe-area-inset-left, 0px));
  bottom: calc(max(18px, env(safe-area-inset-bottom, 0px)) + 62px);
  z-index: 85;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(320px, calc(100vw - 36px));
  padding: 12px 12px 12px 14px;
  color: var(--agency-ink);
  background: rgba(255, 253, 248, 0.96);
  border: 1px solid var(--agency-border);
  border-radius: 14px;
  box-shadow: var(--agency-shadow);
  animation: agencySocialProofIn 320ms ease-out;
}

.agency-social-proof.is-leaving { animation: agencySocialProofOut 220ms ease-in forwards; }

.agency-social-proof[hidden] { display: none; }

.agency-social-proof-image {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: 8px;
  background: var(--agency-cream-deep);
}

.agency-social-proof-text { margin: 0; font-size: 0.8rem; font-weight: 650; line-height: 1.35; }

.agency-social-proof-close {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 22px;
  height: 22px;
  color: var(--agency-muted);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
}
.agency-social-proof-close:hover { color: var(--agency-ink); background: rgba(201, 162, 39, 0.13); }

@keyframes agencySocialProofIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes agencySocialProofOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(8px); }
}

.agency-floating-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 8px 16px;
  color: var(--agency-ink);
  background: rgba(255, 253, 248, 0.9);
  border: 1px solid rgba(201, 162, 39, 0.25);
  border-radius: 999px;
  box-shadow: 0 16px 44px rgba(55, 38, 3, 0.18);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  font-size: 0.78rem;
  font-weight: 750;
  cursor: pointer;
  transform: translateZ(0);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
.agency-floating-toggle:hover {
  border-color: rgba(201, 162, 39, 0.48);
  box-shadow: 0 19px 50px rgba(55, 38, 3, 0.23);
  transform: translateY(-3px);
}
.agency-floating-toggle > svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--agency-gold-dark);
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.agency-ai-toggle {
  color: #151006;
  background: linear-gradient(135deg, #f4db8d 0%, #d4aa27 62%, #a883df 120%);
  border-color: rgba(140, 103, 14, 0.25);
  box-shadow: 0 17px 48px rgba(152, 112, 9, 0.28);
}
.agency-ai-toggle:hover { box-shadow: 0 21px 58px rgba(152, 112, 9, 0.36); }
.agency-ai-toggle > i {
  width: 7px;
  height: 7px;
  background: #1b9c56;
  border: 2px solid rgba(255, 253, 248, 0.9);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(27, 156, 86, 0.36);
  animation: agencyAiStatusPulse 2.4s ease-out infinite;
}
.agency-ai-orb {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  color: #171005;
  background: rgba(255, 253, 248, 0.52);
  border: 1px solid rgba(91, 64, 3, 0.14);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
}
.agency-ai-orb svg { width: 21px; height: 21px; fill: currentColor; }

.agency-network-menu,
.agency-ai-panel {
  position: absolute;
  bottom: calc(100% + 13px);
  width: min(390px, calc(100vw - 36px));
  overflow: hidden;
  color: var(--agency-ink);
  background:
    radial-gradient(circle at 84% 4%, rgba(201, 162, 39, 0.16), transparent 38%),
    rgba(255, 253, 248, 0.97);
  border: 1px solid rgba(201, 162, 39, 0.25);
  border-radius: 24px;
  box-shadow: 0 26px 80px rgba(40, 27, 2, 0.25);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  transform-origin: bottom;
  animation: agencyFloatingPanelIn 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.agency-network-menu.is-closing,
.agency-ai-panel.is-closing {
  animation: agencyFloatingPanelOut 210ms cubic-bezier(0.4, 0, 1, 1) both;
}
.agency-network-menu { left: 0; padding: 13px; }
.agency-ai-panel {
  right: 0;
  display: flex;
  flex-direction: column;
  height: min(620px, calc(100dvh - 112px));
  min-height: 430px;
}

.agency-floating-panel-head,
.agency-ai-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.agency-floating-panel-head { padding: 5px 5px 13px 7px; }
.agency-floating-panel-head > div { display: grid; gap: 1px; }
.agency-floating-panel-head small {
  color: var(--agency-gold-dark);
  font-size: 0.61rem;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.agency-floating-panel-head strong { font-size: 1rem; letter-spacing: -0.02em; }
.agency-floating-close {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  padding: 0;
  color: var(--agency-muted);
  background: rgba(201, 162, 39, 0.08);
  border: 1px solid var(--agency-border);
  border-radius: 50%;
  /* Kein Schriftzeichen mehr. Das Kreuz war ein Mal-Zeichen (×), und wie
     das aussieht, entscheidet die Schrift des Betriebssystems: in Segoe UI
     sitzt die Glyphe leicht neben der Mitte ihres Feldes, deshalb wirkte sie
     schief. Gezeichnet wird das Kreuz jetzt von den beiden Pseudoelementen
     darunter. font-size: 0 haelt einen versehentlich eingefuegten Textinhalt
     zuverlaessig unsichtbar; Breite und Hoehe stehen fest in Pixeln, hier
     kollabiert also nichts. */
  font-size: 0;
  line-height: 1;
  cursor: pointer;
  transition: color 160ms ease, transform 160ms ease, background-color 160ms ease;
}

/* Die zwei Striche des Kreuzes: gleiche Laenge, gleiche Staerke, beide um
   denselben Punkt gedreht, dadurch liegt der Schnittpunkt exakt in der Mitte.
   Die Prozentwerte eines absolut positionierten Kindes beziehen sich auf das
   Innenmass des Knopfes, und weil der Rahmen ringsum gleich dick ist, faellt
   diese Mitte mit der Kreismitte zusammen. currentColor sorgt dafuer, dass
   der Farbwechsel beim Ueberfahren weiter greift; pointer-events: none haelt
   die anklickbare Flaeche beim ganzen Kreis. */
.agency-floating-close::before,
.agency-floating-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  pointer-events: none;
}

.agency-floating-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.agency-floating-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.agency-floating-close:hover { color: var(--agency-ink); background: rgba(201, 162, 39, 0.15); transform: rotate(5deg); }

.agency-network-links { display: grid; gap: 6px; }
.agency-network-links a {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-height: 54px;
  padding: 8px 10px;
  color: var(--agency-ink);
  border: 1px solid transparent;
  border-radius: 15px;
  transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
}
.agency-network-links a:hover {
  background: rgba(201, 162, 39, 0.09);
  border-color: rgba(201, 162, 39, 0.18);
  transform: translateX(3px);
}
.agency-network-links a.is-current { background: rgba(201, 162, 39, 0.13); border-color: rgba(201, 162, 39, 0.24); }
.agency-network-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: #171005;
  background: linear-gradient(145deg, #f4dea0, #c9a227);
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 850;
  box-shadow: 0 7px 16px rgba(122, 89, 8, 0.14);
}
.agency-network-mark .agency-asset-icon { width: 19px; height: 19px; }
.agency-network-brand img { width: 24px; height: 24px; object-fit: contain; }
.agency-network-links a:nth-child(3) .agency-network-mark { color: #ffffff; background: linear-gradient(145deg, #9b83ec, #6554c9); }
.agency-network-links a:nth-child(4) .agency-network-mark { background: linear-gradient(145deg, #fff7df, #e3c76c); }
.agency-network-links a:nth-child(5) .agency-network-mark { color: #ffffff; background: linear-gradient(145deg, #7864dc, #4737a9); }
.agency-network-links a > span:nth-child(2) { display: grid; min-width: 0; gap: 2px; }
.agency-network-links strong { overflow: hidden; font-size: 0.79rem; text-overflow: ellipsis; white-space: nowrap; }
.agency-network-links small { overflow: hidden; color: var(--agency-muted); font-size: 0.65rem; text-overflow: ellipsis; white-space: nowrap; }
.agency-network-links b { color: var(--agency-gold-dark); font-size: 0.8rem; font-weight: 800; }

.agency-ai-panel-head {
  padding: 17px 18px 13px;
  border-bottom: 1px solid var(--agency-border);
}
.agency-ai-identity { display: flex; align-items: center; min-width: 0; gap: 11px; }
.agency-ai-identity > span:last-child { display: grid; min-width: 0; gap: 2px; }
.agency-ai-identity strong { font-size: 0.95rem; letter-spacing: -0.02em; }
.agency-ai-identity small { color: var(--agency-muted); font-size: 0.65rem; }
.agency-ai-quota {
  align-self: flex-start;
  margin: 12px 18px 0;
  padding: 6px 9px;
  color: var(--agency-green);
  background: rgba(27, 156, 86, 0.08);
  border: 1px solid rgba(27, 156, 86, 0.16);
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 800;
}
.agency-ai-quota.is-empty { color: #a23e35; background: rgba(197, 75, 63, 0.09); border-color: rgba(197, 75, 63, 0.19); }
.agency-ai-messages {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  padding: 16px 18px 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 162, 39, 0.38) transparent;
}
.agency-ai-message { display: flex; align-items: flex-end; gap: 8px; max-width: 92%; }
.agency-ai-message.is-user { align-self: flex-end; justify-content: flex-end; }
.agency-ai-message.is-assistant { align-self: flex-start; }
.agency-ai-message-avatar {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  color: #171005;
  background: linear-gradient(145deg, #f1d77d, #c9a227);
  border-radius: 9px;
  font-size: 0.61rem;
  font-weight: 900;
  box-shadow: 0 5px 13px rgba(121, 88, 5, 0.15);
}
.agency-ai-message p {
  margin: 0;
  padding: 10px 12px;
  color: #51493b;
  background: rgba(239, 229, 203, 0.7);
  border: 1px solid rgba(131, 103, 26, 0.11);
  border-radius: 15px 15px 15px 5px;
  font-size: 0.75rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.agency-ai-message.is-user p {
  color: #171005;
  background: linear-gradient(145deg, #eed36f, #c9a227);
  border-color: rgba(126, 91, 4, 0.14);
  border-radius: 15px 15px 5px 15px;
}
.agency-ai-message.is-pending p { opacity: 0.7; animation: agencyAiThinkingPulse 1.25s ease-in-out infinite; }
.agency-ai-message.is-error p { color: #8d3028; background: rgba(197, 75, 63, 0.08); border-color: rgba(197, 75, 63, 0.16); }
.agency-ai-ticket-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 9px;
  padding: 9px 16px;
  color: #171005;
  background: linear-gradient(145deg, #eacb62, #bd941a);
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 800;
  text-align: center;
  transition: transform 160ms ease;
}
.agency-ai-ticket-cta:hover { transform: translateY(-1px); }

.agency-cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9800;
  display: flex;
  justify-content: center;
  padding: 0 clamp(14px, 3vw, 28px) clamp(14px, 3vw, 28px);
  pointer-events: none;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 260ms ease, transform 260ms ease;
}
.agency-cookie-banner.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.agency-cookie-banner.is-closing { opacity: 0; transform: translateY(24px); }
.agency-cookie-banner-card {
  display: flex;
  align-items: center;
  gap: 18px;
  width: min(880px, 100%);
  padding: 18px 22px;
  background: var(--agency-white);
  border: 1px solid var(--agency-border);
  border-radius: 18px;
  box-shadow: 0 24px 60px -20px rgba(74, 55, 12, 0.35);
}
.agency-cookie-banner-copy { flex: 1 1 auto; min-width: 0; }
.agency-cookie-banner-copy strong { display: block; font-size: 0.95rem; margin-bottom: 3px; }
.agency-cookie-banner-copy p { margin: 0; font-size: 0.82rem; color: var(--color-text-secondary); line-height: 1.5; }
.agency-cookie-banner-copy a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.agency-cookie-banner-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
.agency-cookie-btn {
  padding: 10px 16px;
  border-radius: 11px;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  transition: transform 160ms ease, background 160ms ease;
}
.agency-cookie-btn-ghost { color: var(--color-text); background: var(--color-secondary); border: 1px solid var(--agency-border); }
.agency-cookie-btn-ghost:hover { background: var(--agency-cream-deep); }
.agency-cookie-btn-primary { color: var(--color-primary-text); background: linear-gradient(145deg, var(--agency-gold), var(--agency-gold-dark)); }
.agency-cookie-btn-primary:hover { transform: translateY(-1px); }
html[data-agency-theme="dark"] .agency-cookie-banner-card { background: #1c1710; border-color: rgba(255, 255, 255, 0.1); }
html[data-agency-theme="dark"] .agency-cookie-btn-ghost { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); color: #f0ead9; }
html[data-agency-theme="dark"] .agency-cookie-btn-ghost:hover { background: rgba(255, 255, 255, 0.1); }
@media (max-width: 640px) {
  .agency-cookie-banner-card { flex-direction: column; align-items: stretch; text-align: left; }
  .agency-cookie-banner-actions { justify-content: stretch; }
  .agency-cookie-btn { flex: 1 1 auto; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .agency-cookie-banner { transition: none; }
}
.agency-ai-form {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
  margin: 0 14px;
  padding: 7px;
  background: rgba(255, 253, 248, 0.8);
  border: 1px solid rgba(201, 162, 39, 0.24);
  border-radius: 17px;
  box-shadow: 0 8px 26px rgba(75, 53, 4, 0.08);
}
.agency-ai-input {
  width: 100%;
  min-height: 42px;
  max-height: 136px;
  padding: 10px 11px;
  resize: none;
  overflow-y: auto;
  color: var(--agency-ink);
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 0.76rem;
  line-height: 1.45;
}
.agency-ai-input::placeholder { color: #918875; opacity: 1; }
.agency-ai-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 82px;
  min-height: 42px;
  padding: 8px 12px;
  color: #171005;
  background: linear-gradient(145deg, #efd373, #c9a227);
  border: 0;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 850;
  cursor: pointer;
  transition: filter 160ms ease, transform 160ms ease, opacity 160ms ease;
}
.agency-ai-send:hover { filter: brightness(1.04); transform: translateY(-1px); }
.agency-ai-send:disabled { cursor: wait; opacity: 0.58; transform: none; }
.agency-ai-send svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.agency-ai-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }
.agency-ai-panel-foot { display: grid; gap: 6px; padding: 12px 18px 16px; }
.agency-ai-panel-foot a {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--agency-gold-dark);
  font-size: 0.7rem;
  font-weight: 850;
}
.agency-ai-panel-foot a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.agency-ai-panel-foot small { color: var(--agency-muted); font-size: 0.56rem; line-height: 1.4; }

/* Footer */
.site-footer.agency-footer {
  color: #514a3d;
  background: #eee4c9;
  border-top: 1px solid rgba(131, 103, 26, 0.14);
}

.agency-footer-top,
.agency-footer-grid,
.agency-footer-bottom {
  width: min(var(--content-width), calc(100% - (var(--content-padding) * 2)));
  margin: auto;
}

.agency-footer-newsletter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 28px 0;
  border-bottom: 1px solid rgba(131, 103, 26, 0.14);
}

.agency-footer-newsletter > div:first-child { display: flex; flex-direction: column; gap: 4px; }
.agency-footer-newsletter strong { font-size: 1rem; }
.agency-footer-apps { display: flex; gap: 8px; }
.agency-footer-apps a { padding: 8px 12px; color: #ffffff; background: #13110d; border-radius: 8px; font-size: 0.72rem; font-weight: 800; }

.agency-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: clamp(30px, 5vw, 70px);
  padding: 52px 0;
}

.agency-brand-footer { font-size: 1rem; }
.agency-footer-brand p { max-width: 280px; margin: 17px 0; color: #7b715f; font-size: 0.82rem; }
.agency-support-pill { display: inline-flex; padding: 6px 9px; color: var(--agency-gold-dark); background: rgba(201, 162, 39, 0.1); border: 1px solid rgba(201, 162, 39, 0.22); border-radius: 999px; font-size: 0.68rem; font-weight: 800; }
.agency-footer-grid h3 { margin: 0 0 15px; color: #796d55; font-size: 0.67rem; letter-spacing: 0.14em; text-transform: uppercase; }
.agency-footer-grid ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.agency-footer-grid li { font-size: 0.76rem; }
.agency-footer-grid a:hover { color: var(--agency-gold-dark); }
.agency-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; border-top: 1px solid rgba(131, 103, 26, 0.14); }
.agency-footer-bottom p { margin: 0; color: #8b816e; font-size: 0.68rem; }
.agency-footer-bottom-copy { display: flex; flex-direction: column; gap: 4px; }
.agency-footer-discord-tos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.agency-footer-discord-tos a { color: #8b816e; text-decoration: underline; text-underline-offset: 2px; }
.agency-footer-discord-tos a:hover { color: var(--agency-gold-dark); }
.agency-footer-bottom .we-accept { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.agency-footer-bottom .we-accept img { display: block; max-width: 48px; max-height: 22px; }

/* Tebex native category and product pages */
.site-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 26px;
  width: min(var(--content-width), calc(100% - (var(--content-padding) * 2)));
  min-height: 55vh;
  margin: 0 auto;
  padding: 74px 0 110px;
}

.site-content:not(.site-content-widgets) { grid-template-columns: minmax(0, 1fr); }
.page-index > .site-content,
.page-index .site-content { display: none; }

.store-text,
.category-description,
.store-product-full,
.store-product-options,
.basket,
.widget {
  background: rgba(255, 253, 248, 0.82);
  border: 1px solid var(--agency-border);
  border-radius: 22px;
  box-shadow: 0 12px 36px rgba(74, 53, 8, 0.07);
}

.category-description,
.store-text,
.store-product-options { padding: clamp(24px, 4vw, 44px); }
.category-description { margin-bottom: 24px; }
.text-content h1,
.text-content h2,
.text-content h3 { margin-top: 0; font-family: var(--font); letter-spacing: -0.025em; }
.text-content a { color: var(--agency-gold-dark); font-weight: 750; text-decoration: underline; text-underline-offset: 3px; }

.store-products-grid,
.store-products-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.store-products-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.store-products .store-product {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  background: rgba(255, 253, 248, 0.86);
  border: 1px solid var(--agency-border);
  border-radius: 20px;
  box-shadow: 0 9px 28px rgba(72, 52, 7, 0.055);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.store-products .store-product:hover { transform: translateY(-5px); border-color: rgba(201, 162, 39, 0.4); box-shadow: var(--agency-shadow-hover); }
.store-products .store-product .image-link { display: block; overflow: hidden; aspect-ratio: 16 / 9; background: #151107; }
.store-products .store-product .image { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 350ms ease; }
.store-products .store-product:hover .image { transform: scale(1.035); }
.store-products .store-product .product-title { margin: 0; padding: 18px 18px 8px; font-size: 1rem; }
.store-products .store-product .product-title a:hover { color: var(--agency-gold-dark); }
.store-products .store-product .product-actions { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: auto; padding: 10px 18px 18px; }
.store-products .store-product .product-actions .price { margin: 0; color: var(--agency-gold-dark); font-size: 1.12rem; font-weight: 900; }
.store-products .store-product .product-actions .price strong { font-weight: 900; }
.store-products .store-product .product-actions .wide,
.store-products .store-product .product-actions .half { width: 100%; }
.store-products .store-product .btn-primary,
.store-products .store-product .btn-secondary,
.store-products .store-product .add,
.store-products .store-product .subscribe { min-height: 42px; padding: 10px 14px; border-radius: 12px; text-align: center; }

.store-sidebar { display: flex; flex-direction: column; gap: 18px; order: 0 !important; min-width: 0; }
.store-sidebar .widget { margin: 0; padding: 22px; }
.widget-title { margin: 0 0 17px; font-size: 1rem; }
.widget-featured .store-product { background: transparent; border: 0; box-shadow: none; }
.widget-featured .store-product .product-title { padding-inline: 0; text-align: left; }
.widget-featured .store-product .product-actions { padding-inline: 0; }
.widget-featured .store-product .image-link { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; background: #151107; }
.widget-featured .store-product .image { display: block; width: 100%; height: 100%; object-fit: cover; }

.store-category-tiered-header { margin-bottom: 28px; }
.store-category-tiered-header h2 { margin: 0; font-family: var(--font); font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -0.025em; }
.store-products-tiered { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.store-product-tiered {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  background: rgba(255, 253, 248, 0.86);
  border: 1px solid var(--agency-border);
  border-radius: 20px;
  box-shadow: 0 9px 28px rgba(72, 52, 7, 0.055);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.store-product-tiered:hover { transform: translateY(-5px); border-color: rgba(201, 162, 39, 0.4); box-shadow: var(--agency-shadow-hover); }
.store-product-tiered > .image { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.store-product-tiered > .product-title { margin: 0; padding: 20px 22px 6px; font-size: 1.15rem; }
.store-product-tiered > .descr { padding: 0 22px 6px; color: #5e574a; font-size: 0.86rem; line-height: 1.65; }
.store-product-tiered > .descr p { margin: 0 0 10px; }
.store-product-tiered > .descr ul { margin: 0 0 10px; padding-left: 20px; }
.store-product-tiered > .descr li { margin-bottom: 4px; }
.store-product-tiered > .descr ul ul { margin: 4px 0 8px; }
.store-product-tiered > .actions.product-actions { margin-top: auto; padding: 16px 22px 22px; display: flex; flex-direction: column; gap: 10px; }
.store-product-tiered > .actions.product-actions .price { margin: 0 0 2px; font-size: 1.25rem; color: var(--agency-gold-dark); font-weight: 900; }
.store-product-tiered > .actions.product-actions .discount { color: #9f514b; text-decoration: line-through; opacity: 0.75; font-weight: 700; margin-right: 6px; }
.store-product-tiered > .actions.product-actions .wide { width: 100%; }
.store-product-tiered > .actions.product-actions .btn-primary,
.store-product-tiered > .actions.product-actions .btn-secondary { min-height: 42px; padding: 10px 14px; border-radius: 12px; text-align: center; }

.store-product-full { padding: clamp(22px, 4vw, 40px); }
.store-product-full > .product-title { margin: 0 0 24px; font-family: var(--font); font-size: clamp(1.9rem, 4vw, 3.4rem); font-weight: 700; letter-spacing: -0.025em; }
.store-product-full > .image { display: block; width: 100%; max-height: 560px; object-fit: cover; border-radius: 18px; }
.store-product-full .media-slider { overflow: hidden; border-radius: 18px; }
.store-product-full .product-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 25px 0; padding: 20px; background: rgba(236, 224, 190, 0.48); border: 1px solid rgba(131, 103, 26, 0.13); border-radius: 16px; }
.store-product-full .product-actions .price { margin: 0 auto 0 0; color: var(--agency-gold-dark); font-size: 1.45rem; }
.store-product-full .descr { color: #5e574a; }
.store-product-full .descr h1,
.store-product-full .descr h2,
.store-product-full .descr h3 { color: var(--agency-ink); }

/* Premium Tebex package pages */
.agency-package-shell {
  width: min(1440px, calc(100% - (var(--content-padding) * 2)));
  padding-top: clamp(108px, 8vw, 138px);
  padding-bottom: clamp(88px, 8vw, 128px);
}

.agency-package-page {
  position: relative;
  width: 100%;
  min-width: 0;
  padding: clamp(24px, 3.1vw, 46px);
  overflow: visible;
  background:
    radial-gradient(circle at 8% 4%, rgba(201, 162, 39, 0.14), transparent 32rem),
    radial-gradient(circle at 96% 88%, rgba(128, 103, 223, 0.08), transparent 28rem),
    rgba(255, 253, 248, 0.9);
  border-radius: 32px;
  isolation: isolate;
}

.agency-package-page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.agency-package-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 clamp(20px, 2.4vw, 32px);
  color: var(--agency-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.025em;
}

.agency-package-breadcrumb a {
  color: inherit;
  transition: color 180ms ease;
}

.agency-package-breadcrumb a:hover { color: var(--agency-gold-dark); }
.agency-package-breadcrumb span { opacity: 0.58; }

.agency-package-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(360px, 1fr);
  align-items: start;
  gap: clamp(34px, 4.4vw, 72px);
}

.agency-package-media-column,
.agency-package-summary { min-width: 0; }

.agency-package-media-column { position: relative; }

.agency-package-media {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: clamp(470px, 40vw, 650px);
  padding: clamp(12px, 1.5vw, 20px);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(235, 196, 67, 0.2), transparent 32%),
    radial-gradient(circle at 82% 86%, rgba(128, 103, 223, 0.1), transparent 30%),
    rgba(255, 253, 248, 0.72);
  border: 1px solid rgba(131, 103, 26, 0.16);
  border-radius: 27px;
  box-shadow: 0 28px 72px rgba(71, 49, 4, 0.12);
  isolation: isolate;
}

.agency-package-media::before,
.agency-package-media::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
}

.agency-package-media::before {
  top: 15%;
  left: 50%;
  width: min(70%, 480px);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(223, 177, 31, 0.22), rgba(223, 177, 31, 0.04) 48%, transparent 70%);
  filter: blur(3px);
  transform: translateX(-50%);
  animation: agencyPackageHalo 6s ease-in-out infinite alternate;
}

.agency-package-media::after {
  right: -11%;
  bottom: -15%;
  width: 44%;
  aspect-ratio: 1;
  border: 1px solid rgba(201, 162, 39, 0.14);
  box-shadow: 0 0 0 42px rgba(201, 162, 39, 0.025), 0 0 0 86px rgba(128, 103, 223, 0.018);
}

.agency-package-device-media {
  min-height: clamp(590px, 48vw, 760px);
  padding: 0;
}

.agency-package-device-stage {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: inherit;
  padding: clamp(32px, 5vw, 76px);
  overflow: hidden;
}

.agency-package-device-image {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: clamp(500px, 42vw, 680px);
  max-width: none;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center;
  border-radius: 0 !important;
  filter: drop-shadow(0 30px 34px rgba(45, 31, 2, 0.2));
  transform-origin: center;
  animation: agencyPackageDeviceFloat 6.5s ease-in-out infinite;
  transition: filter 320ms ease, transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.agency-package-phone .agency-package-device-image { max-width: min(78%, 470px); }
.agency-package-pad .agency-package-device-image { max-width: min(96%, 800px); }
.agency-package-device-media:hover .agency-package-device-image {
  filter: drop-shadow(0 38px 45px rgba(45, 31, 2, 0.27));
}

.agency-package-media-slider {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0;
  overflow: visible !important;
  border-radius: 20px !important;
}

.agency-package-media-slider .slider {
  --swiper-navigation-color: #f2cf58;
  --swiper-pagination-color: #c9a227;
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: 20px;
}

.agency-package-media-slider .slide {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: clamp(410px, 34vw, 570px);
  overflow: hidden;
  background: #151107;
  border-radius: 20px;
}

.agency-package-media-slider .slide-image,
.agency-package-primary-image {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: clamp(430px, 36vw, 610px);
  object-fit: contain;
  object-position: center;
  border-radius: 20px;
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.agency-package-media:hover .agency-package-primary-image { transform: scale(1.018); }

.agency-package-media-slider .slide-video {
  isolation: isolate;
  min-height: 0;
  aspect-ratio: 16 / 9;
}

.agency-package-media-slider .slide-frame {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  min-height: clamp(350px, 31vw, 530px);
  border: 0;
}

.agency-video-consent {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 9px;
  width: 100%;
  padding: clamp(24px, 6vw, 72px);
  color: #fffaf0;
  background:
    radial-gradient(circle at 50% 42%, rgba(201, 162, 39, 0.28), transparent 34%),
    linear-gradient(145deg, #1d180c, #0e0c07);
  border: 0;
  text-align: center;
  cursor: pointer;
  transition: opacity 220ms ease, visibility 220ms ease;
}
.agency-video-consent:hover .agency-video-consent-icon { transform: scale(1.06); }
.agency-video-consent-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  color: #171005;
  background: linear-gradient(145deg, #f2d779, #c9a227);
  border-radius: 19px;
  box-shadow: 0 17px 42px rgba(201, 162, 39, 0.24);
  transition: transform 180ms ease;
}
.agency-video-consent-icon .agency-asset-icon { width: 24px; height: 24px; }
.agency-video-consent strong { font-size: clamp(1rem, 2vw, 1.3rem); }
.agency-video-consent small { max-width: 390px; color: rgba(255, 250, 240, 0.68); font-size: 0.72rem; line-height: 1.5; }
.slide-video.is-video-loading .agency-video-consent { cursor: wait; }
.slide-video.is-video-loaded .agency-video-consent { opacity: 0; visibility: hidden; pointer-events: none; }

.agency-package-media-single .slide-frame { min-height: clamp(410px, 34vw, 570px); }

.agency-package-media-slider .slider::part(button-prev),
.agency-package-media-slider .slider::part(button-next) {
  width: 42px;
  height: 42px;
  padding: 11px;
  color: #1a1405;
  background: rgba(244, 210, 99, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(12px);
}

.agency-package-media-slider .thumbs {
  position: relative;
  z-index: 3;
  display: flex;
  gap: 10px;
  width: 100%;
  margin: 12px 0 0;
  padding: 2px 1px 5px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  list-style: none;
  scroll-snap-type: x proximity;
}

.agency-package-media-slider .thumb {
  flex: 0 0 88px;
  width: 88px;
  aspect-ratio: 16 / 10;
  padding: 2px;
  overflow: hidden;
  background: rgba(255, 253, 248, 0.7);
  border: 1px solid rgba(131, 103, 26, 0.17);
  border-radius: 11px;
  cursor: pointer;
  scroll-snap-align: start;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.agency-package-media-slider .thumb:hover,
.agency-package-media-slider .thumb.active,
.agency-package-media-slider .thumb.is-active {
  border-color: rgba(201, 162, 39, 0.78);
  box-shadow: 0 7px 20px rgba(71, 49, 4, 0.15);
  transform: translateY(-2px);
}

.agency-package-media-slider .thumb-image,
.agency-package-media-slider .thumb-youtube {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.agency-package-media-slider .thumb-youtube {
  display: grid;
  place-items: center;
  color: #f8e5a3;
  background: #151107;
}
.agency-package-media-slider .thumb-youtube .agency-asset-icon { width: 22px; height: 22px; }

.agency-package-media-slider .open-lightbox {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  display: grid;
  place-items: center;
  width: auto;
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  color: #fffaf0;
  background: rgba(21, 17, 7, 0.68);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(12px);
}

.agency-package-image-default {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: clamp(410px, 34vw, 570px);
  color: var(--agency-gold-dark);
  background: linear-gradient(145deg, rgba(201, 162, 39, 0.08), rgba(128, 103, 223, 0.06));
  border: 1px dashed rgba(201, 162, 39, 0.34);
  border-radius: 20px;
}

.agency-package-summary {
  position: sticky;
  top: 106px;
  padding: clamp(26px, 3vw, 42px);
  background:
    radial-gradient(circle at 100% 0%, rgba(201, 162, 39, 0.13), transparent 44%),
    rgba(255, 253, 248, 0.9);
  border: 1px solid rgba(131, 103, 26, 0.17);
  border-radius: 25px;
  box-shadow: 0 24px 62px rgba(69, 48, 4, 0.1);
  backdrop-filter: blur(18px);
}

.agency-package-summary .agency-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 15px;
  color: var(--agency-gold-dark);
  font-size: 0.69rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.agency-package-summary .agency-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  background: currentColor;
  border-radius: 50%;
  box-shadow: 0 0 15px currentColor;
}

.agency-package-summary .product-title {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--agency-ink);
  font-family: var(--font);
  font-size: clamp(2.35rem, 3.75vw, 4.7rem);
  font-weight: 710;
  line-height: 0.97;
  letter-spacing: -0.05em;
}

.agency-package-summary .countdown {
  display: block;
  margin: 15px 0 0;
  color: var(--agency-muted);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
}

.agency-package-trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: clamp(22px, 3vw, 34px) 0 16px;
}

.agency-package-trust > * {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 58px;
  padding: 10px;
  color: #706752;
  background: rgba(201, 162, 39, 0.065);
  border: 1px solid rgba(131, 103, 26, 0.12);
  border-radius: 13px;
  font-size: 0.69rem;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
}

.agency-package-purchase {
  margin-top: 12px;
  padding-top: 18px;
  border-top: 1px solid rgba(131, 103, 26, 0.13);
}

.agency-package-page .agency-package-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 16px;
  background: linear-gradient(135deg, rgba(236, 224, 190, 0.58), rgba(248, 241, 220, 0.72));
  border: 1px solid rgba(131, 103, 26, 0.14);
  border-radius: 19px;
}

.agency-package-page .agency-package-actions .agency-package-price {
  flex: 1 1 145px;
  min-width: 0;
  margin: 0;
  color: var(--agency-gold-dark);
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.2;
}

.agency-package-price-value,
.agency-package-price > strong {
  display: block;
  margin-top: 3px;
  font-size: clamp(1.6rem, 2.5vw, 2.35rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  white-space: normal;
}

.agency-package-price .discount {
  display: block;
  margin-bottom: 3px;
  color: var(--agency-muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.agency-package-page .agency-package-actions .wide,
.agency-package-page .agency-package-actions .half {
  flex: 1 1 190px;
  width: auto;
}

.agency-package-page .agency-package-buy-group {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

.agency-package-page .agency-package-buy-button,
.agency-package-page .agency-package-basket-button,
.agency-package-page .agency-package-actions .add,
.agency-package-page .agency-package-actions .subscribe,
.agency-package-page .agency-package-actions .open-basket {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 55px;
  padding: 14px 22px;
  border-radius: 15px;
  overflow: hidden;
  isolation: isolate;
  background-clip: padding-box;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  transform: translateZ(0);
  white-space: normal;
  text-align: center;
}

.agency-package-page .agency-package-buy-button .agency-asset-icon,
.agency-package-page .agency-package-basket-button .agency-asset-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.agency-package-page .agency-package-actions .btn-primary::before,
.agency-package-page .agency-package-actions .btn-primary::after,
.agency-package-page .agency-package-actions .btn-secondary::before,
.agency-package-page .agency-package-actions .btn-secondary::after,
.agency-package-page .agency-package-actions .btn-tertiary::before,
.agency-package-page .agency-package-actions .btn-tertiary::after,
.agency-package-page .agency-package-actions .add::before,
.agency-package-page .agency-package-actions .add::after,
.agency-package-page .agency-package-actions .subscribe::before,
.agency-package-page .agency-package-actions .subscribe::after,
.agency-package-page .agency-package-actions .open-basket::before,
.agency-package-page .agency-package-actions .open-basket::after,
.agency-package-page .agency-package-actions .gift::before,
.agency-package-page .agency-package-actions .gift::after {
  content: none !important;
  display: none !important;
}

.agency-package-page .agency-package-quantity,
.agency-package-page .agency-package-actions .quantity-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 6px 9px;
  background: rgba(255, 253, 248, 0.72);
  border: 1px solid rgba(131, 103, 26, 0.16);
  border-radius: 13px;
}

.agency-package-page .agency-package-actions .quantity {
  order: 2;
  flex: 0 0 52px;
  width: 58px;
  min-height: 36px;
  padding: 5px 8px;
  color: var(--agency-ink);
  background: transparent;
  border: 0;
  text-align: center;
}

.agency-quantity-adjust,
.agency-package-page .agency-package-actions .adjust,
.basket .adjust {
  position: relative;
  z-index: 3;
  display: inline-grid !important;
  place-items: center;
  flex: 0 0 42px;
  width: 42px !important;
  min-width: 42px;
  min-height: 42px;
  padding: 0 !important;
  overflow: visible !important;
  color: var(--agency-ink) !important;
  background: rgba(201, 162, 39, 0.1) !important;
  border: 1px solid rgba(201, 162, 39, 0.2) !important;
  border-radius: 11px !important;
  opacity: 1 !important;
  text-indent: 0 !important;
  pointer-events: auto !important;
  touch-action: manipulation;
}
.agency-package-page .agency-package-actions .decrease { order: 1; }
.agency-package-page .agency-package-actions .increase { order: 3; }
.agency-quantity-adjust:hover,
.agency-package-page .agency-package-actions .adjust:hover,
.basket .adjust:hover { color: #171005 !important; background: #e2c45f !important; border-color: rgba(226, 196, 95, 0.72) !important; }
.agency-quantity-icon {
  display: block !important;
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.agency-quantity-icon *,
.agency-package-gift-icon *,
.agency-basket-remove-icon * { pointer-events: none; }
.basket .adjust::before,
.basket .adjust::after { content: none !important; display: none !important; }

.agency-package-page .agency-package-gift-button,
.agency-package-page .agency-package-actions .gift {
  display: inline-grid !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 48px;
  width: 48px !important;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  overflow: hidden;
  border-radius: 13px;
  background-clip: padding-box;
  text-indent: 0 !important;
}

.agency-package-gift-icon {
  display: block !important;
  width: 21px;
  height: 21px;
  color: var(--agency-ink);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.basket .basket-item .agency-basket-remove {
  display: inline-grid !important;
  place-items: center;
  width: 42px !important;
  min-width: 42px;
  min-height: 42px;
  padding: 0 !important;
  overflow: visible !important;
  color: #b9483e !important;
  background: rgba(197, 75, 63, 0.1) !important;
  border: 1px solid rgba(197, 75, 63, 0.24) !important;
  border-radius: 11px !important;
  opacity: 1 !important;
  text-indent: 0 !important;
}
.basket .basket-item .agency-basket-remove:hover {
  color: #fff8f3 !important;
  background: #b9483e !important;
  border-color: #b9483e !important;
}
.basket .basket-item .agency-basket-remove::before,
.basket .basket-item .agency-basket-remove::after,
.basket .basket-item .remove::before,
.basket .basket-item .remove::after,
.basket .basket-item [data-remove]::before,
.basket .basket-item [data-remove]::after { content: none !important; display: none !important; }
.agency-basket-remove-icon {
  display: block !important;
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.agency-package-purchase-note {
  margin: 13px 2px 0;
  color: var(--agency-muted);
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.55;
}

.agency-package-description {
  position: relative;
  margin-top: clamp(42px, 5vw, 74px);
  padding: clamp(27px, 4vw, 54px);
  overflow: hidden;
  background: rgba(255, 253, 248, 0.82);
  border: 1px solid rgba(131, 103, 26, 0.15);
  border-radius: 26px;
  box-shadow: 0 20px 58px rgba(69, 48, 4, 0.075);
}

.agency-package-description-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 clamp(24px, 3vw, 38px);
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(131, 103, 26, 0.14);
}

.agency-package-description-heading h2,
.agency-package-description-heading h3 {
  margin: 0;
  color: var(--agency-ink);
  font-family: var(--font);
  font-size: clamp(1.7rem, 3vw, 2.7rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.agency-package-description .descr {
  max-width: 980px;
  margin: 0 auto;
  color: #5e574a;
  font-size: clamp(0.94rem, 1.1vw, 1.06rem);
  line-height: 1.76;
}

.agency-package-description .descr > :first-child { margin-top: 0; }

.agency-package-upsell {
  margin-top: clamp(32px, 4vw, 54px);
  padding: clamp(27px, 4vw, 54px);
  background: rgba(255, 253, 248, 0.82);
  border: 1px solid rgba(131, 103, 26, 0.15);
  border-radius: 26px;
  box-shadow: 0 20px 58px rgba(69, 48, 4, 0.075);
}

.agency-package-upsell .agency-section-heading { margin-bottom: clamp(20px, 3vw, 32px); }

.agency-package-upsell-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.agency-package-description .descr > :last-child { margin-bottom: 0; }
.agency-package-description .descr h1,
.agency-package-description .descr h2,
.agency-package-description .descr h3 { margin: 1.55em 0 0.6em; }
.agency-package-description .descr img,
.agency-package-description .descr video,
.agency-package-description .descr iframe {
  display: block;
  max-width: 100%;
  margin: 24px auto;
  border: 0;
  border-radius: 17px;
}
.agency-package-description .descr ul,
.agency-package-description .descr ol { padding-left: 1.35rem; }
.agency-package-description .descr li + li { margin-top: 0.4em; }
.agency-package-description .descr table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}
.agency-package-description .descr th,
.agency-package-description .descr td { padding: 11px 13px; border: 1px solid rgba(131, 103, 26, 0.14); }
.agency-package-description .descr pre,
.agency-package-description .descr code { border-radius: 8px; }
.agency-package-description .descr pre { padding: 16px; overflow-x: auto; }

.store-form input,
.store-form select,
.store-form textarea,
.basket input:not(.quantity) {
  min-height: 48px;
  padding: 11px 14px;
  color: var(--agency-ink);
  background: #fffdf8;
  border: 1px solid rgba(131, 103, 26, 0.22);
  border-radius: 12px;
}
.store-form .field { margin-bottom: 20px; }
.store-form .actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Popups, basket and toast */
.popup { background: rgba(31, 24, 8, 0.62); backdrop-filter: blur(10px); }
.popup-content { color: var(--agency-ink); background: var(--agency-cream); border: 1px solid rgba(201, 162, 39, 0.24); border-radius: 24px; box-shadow: 0 30px 100px rgba(24, 17, 2, 0.3); }
.popup-content a[href*="ident.tebex.io/fivem"] { color: #171005 !important; font-size: 0.95rem; font-weight: 850; }
/* overflow: hidden schneidet die Kinder an der Rundung ab. Ohne das legte
   sich der Kopfbereich mit seinem eigenen Hintergrund eckig ueber die runde
   Ecke oben links. Das geht bewusst ueber den Elternteil statt ueber einen
   zweiten Radius am Kopf: auf schmalen Bildschirmen ist das Panel oben links
   UND oben rechts gerundet, so muss das nicht doppelt gepflegt werden.
   Gefahrlos, weil .basket-content einen eigenen Scrollbereich hat und das
   Panel selbst nie scrollt. */
.basket-popup-content { border-radius: 24px 0 0 24px; overflow: hidden; }
.basket-popup-content.agency-basket-login,
.login-popup-content.agency-basket-login {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(520px, 100%);
  padding: clamp(34px, 6vw, 62px);
  background:
    radial-gradient(circle at 76% 18%, rgba(201, 162, 39, 0.2), transparent 34%),
    radial-gradient(circle at 12% 90%, rgba(128, 103, 223, 0.1), transparent 32%),
    var(--agency-cream);
}
.agency-basket-login .popup-close {
  position: absolute;
  top: 20px;
  right: 20px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  overflow: hidden;
  color: transparent;
  background: rgba(255, 253, 248, 0.72);
  border: 1px solid var(--agency-border);
  border-radius: 50%;
  transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease;
}
.agency-basket-login .popup-close::before,
.agency-basket-login .popup-close::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 2px;
  background: var(--agency-ink);
  border-radius: 99px;
  transform: rotate(45deg);
}
.agency-basket-login .popup-close::after { transform: rotate(-45deg); }
.agency-basket-login .popup-close:hover { background: var(--agency-white); border-color: rgba(201, 162, 39, 0.4); transform: rotate(4deg) scale(1.04); }
.agency-login-mark {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin-bottom: 24px;
  color: #171005;
  background: linear-gradient(135deg, #f3dda0, #c9a227 65%, #a8871f);
  border: 1px solid rgba(154, 118, 24, 0.22);
  border-radius: 21px;
  box-shadow: 0 18px 38px rgba(154, 118, 24, 0.22);
  transform: rotate(-4deg);
}
.agency-login-mark .agency-asset-icon { width: 28px; height: 28px; }
.agency-login-eyebrow {
  margin: 0 0 10px;
  color: var(--agency-gold-dark);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.agency-basket-login h2 {
  max-width: 390px;
  margin: 0;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 750;
  letter-spacing: -0.035em;
  line-height: 1.05;
}
.agency-login-copy {
  max-width: 405px;
  margin: 18px 0 28px;
  color: var(--agency-muted);
  font-size: 0.95rem;
  line-height: 1.65;
}
.agency-basket-login > .field { width: 100%; margin: 0; }
.agency-fivem-login {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 13px;
  width: 100%;
  min-height: 60px;
  padding: 10px 18px 10px 10px;
  color: #171005;
  background: linear-gradient(135deg, #f2d979, #c9a227 64%, #a7821c);
  border: 1px solid rgba(154, 118, 24, 0.28);
  border-radius: 17px;
  box-shadow: 0 18px 42px rgba(154, 118, 24, 0.2);
  font-weight: 800;
  text-align: left;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.agency-fivem-login:hover { color: #171005; transform: translateY(-2px); box-shadow: 0 23px 52px rgba(154, 118, 24, 0.28); }
.agency-fivem-glyph {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: #f8f3e7;
  background: #171005;
  border-radius: 12px;
}
.agency-fivem-glyph svg { width: 25px; height: 25px; fill: currentColor; }
.agency-fivem-login b { font-size: 1.2rem; transition: transform 180ms ease; }
.agency-fivem-login:hover b { transform: translateX(3px); }
.agency-login-note { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; color: var(--agency-muted); font-size: 0.72rem; font-weight: 700; }
.agency-login-note .agency-asset-icon { width: 14px; height: 14px; color: var(--agency-gold-dark); }
.basket .basket-header { color: var(--agency-ink); background: rgba(228, 209, 151, 0.38); }
.basket .basket-second-header,
.basket .basket-item { background: rgba(255, 253, 248, 0.8); }
.basket .basket-item { border: 1px solid var(--agency-border); border-radius: 14px; }
.basket .basket-item .price,
.basket .basket-checkout .total { color: var(--agency-gold-dark); }
.basket .basket-item button,
.basket .basket-item [role="button"],
.basket .basket-item a {
  position: relative;
  z-index: 2;
  pointer-events: auto;
  touch-action: manipulation;
}
.toast { color: var(--agency-ink); background: #fffdf8; border: 1px solid var(--agency-border); border-radius: 14px; box-shadow: var(--agency-shadow); }

/* FiveM sign-out confirmation */
body.is-agency-dialog-open { overflow: hidden; }
.agency-logout-dialog[hidden] { display: none !important; }
.agency-logout-dialog {
  position: fixed;
  inset: 0;
  z-index: 450;
  display: grid;
  place-items: center;
  padding: 20px;
}
.agency-logout-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  background: rgba(18, 13, 3, 0.66);
  border: 0;
  border-radius: 0;
  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);
  cursor: default;
  opacity: 0;
  transition: opacity 220ms ease;
}
.agency-logout-dialog.is-open .agency-logout-backdrop { opacity: 1; }
.agency-logout-card {
  position: relative;
  z-index: 1;
  width: min(440px, 100%);
  padding: clamp(27px, 5vw, 42px);
  color: var(--agency-ink);
  background:
    radial-gradient(circle at 86% 10%, rgba(201, 162, 39, 0.18), transparent 34%),
    var(--agency-cream);
  border: 1px solid rgba(201, 162, 39, 0.26);
  border-radius: 25px;
  box-shadow: 0 32px 100px rgba(20, 13, 1, 0.38);
  opacity: 0;
  transform: translateY(14px) scale(0.97);
  transition: opacity 180ms ease, transform 230ms cubic-bezier(0.16, 1, 0.3, 1);
}
.agency-logout-dialog.is-open .agency-logout-card { opacity: 1; transform: translateY(0) scale(1); }
.agency-logout-mark {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 20px;
  color: #171005;
  background: linear-gradient(145deg, #f4dda0, #c9a227);
  border-radius: 17px;
  box-shadow: 0 15px 34px rgba(154, 118, 24, 0.2);
}
.agency-logout-mark .agency-asset-icon { width: 24px; height: 24px; }
.agency-logout-card h2 { margin: 0; font-size: clamp(1.8rem, 5vw, 2.45rem); letter-spacing: -0.035em; line-height: 1.05; }
.agency-logout-card > p:not(.agency-login-eyebrow) { margin: 17px 0 27px; color: var(--agency-muted); font-size: 0.92rem; line-height: 1.62; }
.agency-logout-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.agency-logout-actions .agency-btn { width: 100%; min-height: 50px; padding: 12px 18px; }
.agency-logout-actions .agency-btn-primary { color: #171005 !important; }

@media (max-width: 480px) {
  .agency-logout-actions { grid-template-columns: 1fr; }
}

/* Motion system */
.agency-welcome-text {
  display: inline-block;
  min-width: 160px;
  transition: opacity 260ms ease, transform 260ms ease, filter 260ms ease;
}
.agency-welcome-text.is-leaving { opacity: 0; transform: translateY(-9px); filter: blur(4px); }
.agency-welcome-text.is-entering { animation: agencyWelcomeIn 700ms cubic-bezier(0.22, 1, 0.36, 1); }
.agency-motion-ready .agency-reveal {
  opacity: 0;
  transform: translate3d(var(--agency-reveal-x, 0), var(--agency-reveal-y, 28px), 0) scale(var(--agency-reveal-scale, 0.985));
  will-change: opacity, transform;
  transition:
    opacity 560ms ease-out var(--agency-reveal-delay, 0ms),
    transform 760ms cubic-bezier(0.16, 1, 0.3, 1) var(--agency-reveal-delay, 0ms);
}
.agency-motion-ready .agency-reveal.is-visible { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
.agency-motion-ready .agency-product-card.agency-reveal.is-visible:hover { transform: translate3d(0, -7px, 0) scale(1.005); }

/* Dark appearance uses the same palette as the original storefront. */
html[data-agency-theme="dark"] {
  --agency-ink: #f7f2e4;
  --agency-muted: #b4aa8a;
  --agency-cream: #14110a;
  --agency-cream-deep: #0d0b06;
  --agency-white: #1b1710;
  --agency-gold-dark: #d1ad39;
  --agency-border: rgba(201, 162, 39, 0.15);
  --agency-shadow: 0 18px 55px rgba(0, 0, 0, 0.24);
  --agency-shadow-hover: 0 24px 70px rgba(0, 0, 0, 0.34);
  --color-bg: #14110a;
  --color-brighter-bg: #1b1710;
  --color-secondary: #0d0b06;
  --color-text: #f7f2e4;
  --color-text-secondary: #b4aa8a;
  --color-text-darker: #877d64;
}
html[data-agency-theme="dark"] body {
  background:
    radial-gradient(ellipse 80% 60% at 15% 20%, rgba(201, 162, 39, 0.1) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 80%, rgba(201, 162, 39, 0.06) 0%, transparent 50%),
    #14110a;
}
html[data-agency-theme="dark"] body::before { opacity: 0.08; }
html[data-agency-theme="dark"] .site-header.agency-header.is-scrolled {
  background: transparent;
}
html[data-agency-theme="dark"] .agency-header-shell {
  background: rgba(20, 17, 10, 0.78);
  border-color: rgba(201, 162, 39, 0.14);
  box-shadow: 0 12px 38px rgba(0, 0, 0, 0.24);
}
html[data-agency-theme="dark"] .agency-header.is-scrolled .agency-header-shell {
  background: rgba(20, 17, 10, 0.94);
  border-color: rgba(201, 162, 39, 0.2);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.34);
}
html[data-agency-theme="dark"] .agency-navigation,
html[data-agency-theme="dark"] .agency-discord,
html[data-agency-theme="dark"] .agency-icon-action,
html[data-agency-theme="dark"] .agency-menu-button,
html[data-agency-theme="dark"] .agency-language-menu,
html[data-agency-theme="dark"] .agency-btn-ghost,
html[data-agency-theme="dark"] .btn-secondary,
html[data-agency-theme="dark"] .agency-category-pills a,
html[data-agency-theme="dark"] .agency-category-pills button,
html[data-agency-theme="dark"] .agency-products-toggle {
  background-color: rgba(27, 23, 16, 0.82);
}
html[data-agency-theme="dark"] .agency-language-menu { box-shadow: 0 22px 60px rgba(0, 0, 0, 0.42); }
html[data-agency-theme="dark"] .agency-app-card {
  background:
    radial-gradient(circle at 50% 28%, rgba(201, 162, 39, 0.15), transparent 42%),
    linear-gradient(150deg, #1b1710, #100d07);
}
html[data-agency-theme="dark"] .agency-device { background: rgba(255, 255, 255, 0.035); border-color: rgba(201, 162, 39, 0.25); }
html[data-agency-theme="dark"] .agency-release-card,
html[data-agency-theme="dark"] .agency-sub-card,
html[data-agency-theme="dark"] .agency-how-grid article,
html[data-agency-theme="dark"] .agency-product-card,
html[data-agency-theme="dark"] .agency-review-grid blockquote,
html[data-agency-theme="dark"] .agency-faq-list details,
html[data-agency-theme="dark"] .widget,
html[data-agency-theme="dark"] .text-content,
html[data-agency-theme="dark"] .store-products .store-product,
html[data-agency-theme="dark"] .store-product-full,
html[data-agency-theme="dark"] .store-product-tiered,
html[data-agency-theme="dark"] .store-form,
html[data-agency-theme="dark"] .toast {
  color: var(--agency-ink);
  background: rgba(27, 23, 16, 0.86);
}
html[data-agency-theme="dark"] .agency-subscriptions,
html[data-agency-theme="dark"] .agency-bundles-section,
html[data-agency-theme="dark"] .agency-faq-section { background: rgba(13, 11, 6, 0.66); }
html[data-agency-theme="dark"] .agency-proof-section {
  color: #fffaf0;
  background:
    radial-gradient(circle at 15% 20%, rgba(201, 162, 39, 0.24), transparent 35%),
    radial-gradient(circle at 90% 85%, rgba(128, 103, 223, 0.13), transparent 36%),
    #151107;
  border-block-color: rgba(201, 162, 39, 0.13);
}
html[data-agency-theme="dark"] .agency-proof-inner h2 span:nth-child(3) { color: rgba(255, 250, 240, 0.48); opacity: 1; }
html[data-agency-theme="dark"] .agency-proof-stats { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.12); }
html[data-agency-theme="dark"] .agency-proof-stats div { background: rgba(255, 255, 255, 0.035); }
html[data-agency-theme="dark"] .agency-proof-stats span { color: rgba(255, 255, 255, 0.55); }
html[data-agency-theme="dark"] .agency-custom-card {
  color: #fffaf0;
  background:
    radial-gradient(circle at 80% 15%, rgba(201, 162, 39, 0.2), transparent 35%),
    radial-gradient(circle at 10% 90%, rgba(128, 103, 223, 0.15), transparent 34%),
    #161107;
}
html[data-agency-theme="dark"] .agency-custom-card > div > p { color: rgba(255, 255, 255, 0.6); }
html[data-agency-theme="dark"] .agency-custom-benefits span { color: rgba(255, 255, 255, 0.78); background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); }
html[data-agency-theme="dark"] .agency-custom-prices > div { background: rgba(255, 255, 255, 0.045); border-color: rgba(255, 255, 255, 0.09); }
html[data-agency-theme="dark"] .agency-custom-prices span { color: rgba(255, 255, 255, 0.48); }
html[data-agency-theme="dark"] .agency-showcase-image { background: rgba(27, 23, 16, 0.78); }
html[data-agency-theme="dark"] .agency-showcase-copy li,
html[data-agency-theme="dark"] .agency-review-grid blockquote p,
html[data-agency-theme="dark"] .store-product-full .descr,
html[data-agency-theme="dark"] .store-product-tiered .descr { color: #c8bea1; }
html[data-agency-theme="dark"] .agency-package-page {
  background:
    radial-gradient(circle at 8% 4%, rgba(201, 162, 39, 0.12), transparent 32rem),
    radial-gradient(circle at 96% 88%, rgba(128, 103, 223, 0.08), transparent 28rem),
    rgba(20, 17, 10, 0.92);
  border-color: rgba(201, 162, 39, 0.17);
}
html[data-agency-theme="dark"] .agency-package-page::before { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035); }
html[data-agency-theme="dark"] .agency-package-media {
  background:
    radial-gradient(circle at 50% 42%, rgba(201, 162, 39, 0.16), transparent 34%),
    radial-gradient(circle at 82% 86%, rgba(128, 103, 223, 0.09), transparent 30%),
    rgba(13, 11, 6, 0.82);
  border-color: rgba(201, 162, 39, 0.17);
  box-shadow: 0 28px 78px rgba(0, 0, 0, 0.31);
}
html[data-agency-theme="dark"] .agency-package-media::before {
  background: radial-gradient(circle, rgba(201, 162, 39, 0.17), rgba(201, 162, 39, 0.03) 48%, transparent 70%);
}
html[data-agency-theme="dark"] .agency-package-media::after {
  border-color: rgba(201, 162, 39, 0.11);
  box-shadow: 0 0 0 42px rgba(201, 162, 39, 0.018), 0 0 0 86px rgba(128, 103, 223, 0.014);
}
html[data-agency-theme="dark"] .agency-package-device-image {
  filter: drop-shadow(0 32px 38px rgba(0, 0, 0, 0.52));
}
html[data-agency-theme="dark"] .agency-package-device-media:hover .agency-package-device-image {
  filter: drop-shadow(0 40px 48px rgba(0, 0, 0, 0.64));
}
html[data-agency-theme="dark"] .agency-package-media-slider .thumb {
  background: rgba(27, 23, 16, 0.82);
  border-color: rgba(201, 162, 39, 0.14);
}
html[data-agency-theme="dark"] .agency-package-media-slider .thumb:hover,
html[data-agency-theme="dark"] .agency-package-media-slider .thumb.active,
html[data-agency-theme="dark"] .agency-package-media-slider .thumb.is-active {
  border-color: rgba(226, 189, 70, 0.75);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.34);
}
html[data-agency-theme="dark"] .agency-package-image-default {
  background: linear-gradient(145deg, rgba(201, 162, 39, 0.07), rgba(128, 103, 223, 0.045));
  border-color: rgba(201, 162, 39, 0.24);
}
html[data-agency-theme="dark"] .agency-package-summary {
  background:
    radial-gradient(circle at 100% 0%, rgba(201, 162, 39, 0.11), transparent 44%),
    rgba(27, 23, 16, 0.9);
  border-color: rgba(201, 162, 39, 0.18);
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.3);
}
html[data-agency-theme="dark"] .agency-package-trust > * {
  color: #c6bb9d;
  background: rgba(201, 162, 39, 0.055);
  border-color: rgba(201, 162, 39, 0.13);
}
html[data-agency-theme="dark"] .agency-package-purchase,
html[data-agency-theme="dark"] .agency-package-description-heading { border-color: rgba(201, 162, 39, 0.14); }
html[data-agency-theme="dark"] .agency-package-page .agency-package-actions {
  background: linear-gradient(135deg, rgba(201, 162, 39, 0.09), rgba(255, 255, 255, 0.025));
  border-color: rgba(201, 162, 39, 0.16);
}
html[data-agency-theme="dark"] .agency-package-page .agency-package-quantity,
html[data-agency-theme="dark"] .agency-package-page .agency-package-actions .quantity-field {
  background: rgba(13, 11, 6, 0.6);
  border-color: rgba(201, 162, 39, 0.16);
}
html[data-agency-theme="dark"] .agency-package-description {
  background: rgba(27, 23, 16, 0.84);
  border-color: rgba(201, 162, 39, 0.16);
  box-shadow: 0 24px 68px rgba(0, 0, 0, 0.24);
}
html[data-agency-theme="dark"] .agency-package-upsell {
  background: rgba(27, 23, 16, 0.84);
  border-color: rgba(201, 162, 39, 0.16);
  box-shadow: 0 24px 68px rgba(0, 0, 0, 0.24);
}
html[data-agency-theme="dark"] .agency-package-description .descr { color: #c8bea1; }
html[data-agency-theme="dark"] .agency-package-description .descr th,
html[data-agency-theme="dark"] .agency-package-description .descr td { border-color: rgba(201, 162, 39, 0.14); }
html[data-agency-theme="dark"] .agency-package-description .descr pre,
html[data-agency-theme="dark"] .agency-package-description .descr code { background: rgba(8, 7, 4, 0.72); }
html[data-agency-theme="dark"] .agency-first-month { color: #ffd0ca; background: rgba(145, 52, 43, 0.22); border-color: rgba(219, 99, 88, 0.32); }
html[data-agency-theme="dark"] .agency-first-month code { color: #efaaa2; }
html[data-agency-theme="dark"] .agency-first-month-code { color: #efaaa2; background: rgba(219, 99, 88, 0.12); border-color: rgba(219, 99, 88, 0.4); }
html[data-agency-theme="dark"] .agency-first-month-code:hover { background: rgba(219, 99, 88, 0.2); }
html[data-agency-theme="dark"] .agency-first-month-code.is-copied { color: #8fe2b0; background: rgba(60, 160, 100, 0.16); border-color: rgba(60, 160, 100, 0.5); }
html[data-agency-theme="dark"] .agency-floating-toggle {
  color: var(--agency-ink);
  background: rgba(27, 23, 16, 0.9);
  border-color: rgba(201, 162, 39, 0.2);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.38);
}
html[data-agency-theme="dark"] .agency-social-proof {
  color: var(--agency-ink);
  background: rgba(27, 23, 16, 0.94);
  border-color: rgba(201, 162, 39, 0.2);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.38);
}
html[data-agency-theme="dark"] .agency-ai-toggle {
  color: #171005;
  background: linear-gradient(135deg, #efd274, #c9a227 62%, #9276d2 120%);
  border-color: rgba(234, 216, 153, 0.13);
}
html[data-agency-theme="dark"] .agency-network-menu,
html[data-agency-theme="dark"] .agency-ai-panel {
  color: var(--agency-ink);
  background:
    radial-gradient(circle at 84% 4%, rgba(201, 162, 39, 0.14), transparent 38%),
    rgba(20, 17, 10, 0.97);
  border-color: rgba(201, 162, 39, 0.2);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.52);
}
html[data-agency-theme="dark"] .agency-floating-close { color: var(--agency-muted); background: rgba(255, 255, 255, 0.035); }
html[data-agency-theme="dark"] .agency-floating-close:hover { color: var(--agency-ink); background: rgba(201, 162, 39, 0.11); }
html[data-agency-theme="dark"] .agency-network-links a { color: var(--agency-ink); }
html[data-agency-theme="dark"] .agency-network-links a:hover { background: rgba(201, 162, 39, 0.08); }
html[data-agency-theme="dark"] .agency-network-links a.is-current { background: rgba(201, 162, 39, 0.12); }
html[data-agency-theme="dark"] .agency-ai-panel-head { border-bottom-color: rgba(201, 162, 39, 0.14); }
html[data-agency-theme="dark"] .agency-ai-message p { color: #d1c7aa; background: rgba(255, 255, 255, 0.045); border-color: rgba(255, 255, 255, 0.07); }
html[data-agency-theme="dark"] .agency-ai-message.is-user p { color: #171005; background: linear-gradient(145deg, #eacb62, #bd941a); border-color: rgba(255, 255, 255, 0.06); }
html[data-agency-theme="dark"] .agency-ai-message.is-error p { color: #efaaa2; background: rgba(197, 75, 63, 0.1); border-color: rgba(219, 99, 88, 0.18); }
html[data-agency-theme="dark"] .agency-ai-form { background: rgba(27, 23, 16, 0.92); border-color: rgba(201, 162, 39, 0.2); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.23); }
html[data-agency-theme="dark"] .agency-ai-input { color: var(--agency-ink); }
html[data-agency-theme="dark"] .agency-ai-input::placeholder { color: #877d64; }
html[data-agency-theme="dark"] .agency-ai-quota.is-empty { color: #efaaa2; background: rgba(197, 75, 63, 0.12); border-color: rgba(219, 99, 88, 0.2); }
html[data-agency-theme="dark"] .site-footer.agency-footer { color: #b4aa8a; background: #0d0b06; border-top-color: rgba(201, 162, 39, 0.13); }
html[data-agency-theme="dark"] .agency-footer-grid h3 { color: #d0c4a2; }
html[data-agency-theme="dark"] .agency-footer-bottom { border-top-color: rgba(201, 162, 39, 0.12); }
html[data-agency-theme="dark"] .store-form input,
html[data-agency-theme="dark"] .store-form select,
html[data-agency-theme="dark"] .store-form textarea,
html[data-agency-theme="dark"] .basket input:not(.quantity) { color: var(--agency-ink); background: #17130c; border-color: rgba(201, 162, 39, 0.2); }
html[data-agency-theme="dark"] .popup-content { color: var(--agency-ink); background: #14110a; }
html[data-agency-theme="dark"] .agency-logout-card {
  background:
    radial-gradient(circle at 86% 10%, rgba(201, 162, 39, 0.14), transparent 34%),
    #14110a;
  border-color: rgba(201, 162, 39, 0.2);
}
html[data-agency-theme="dark"] .agency-quantity-adjust,
html[data-agency-theme="dark"] .agency-package-page .agency-package-actions .adjust,
html[data-agency-theme="dark"] .basket .adjust {
  color: #f7f2e4 !important;
  background: rgba(201, 162, 39, 0.09) !important;
}
html[data-agency-theme="dark"] .basket .basket-item .agency-basket-remove {
  color: #ff9a8f !important;
  background: rgba(197, 75, 63, 0.16) !important;
  border-color: rgba(219, 99, 88, 0.34) !important;
}
html[data-agency-theme="dark"] .basket .basket-item .agency-basket-remove:hover {
  color: #fff8f3 !important;
  background: #b9483e !important;
  border-color: #b9483e !important;
}
html[data-agency-theme="dark"] .basket-popup-content.agency-basket-login,
html[data-agency-theme="dark"] .login-popup-content.agency-basket-login {
  background:
    radial-gradient(circle at 76% 18%, rgba(201, 162, 39, 0.15), transparent 34%),
    radial-gradient(circle at 12% 90%, rgba(128, 103, 223, 0.08), transparent 32%),
    #14110a;
}
html[data-agency-theme="dark"] .agency-basket-login .popup-close { background: rgba(27, 23, 16, 0.78); }
html[data-agency-theme="dark"] .basket .basket-header { color: var(--agency-ink); background: rgba(201, 162, 39, 0.1); }
html[data-agency-theme="dark"] .basket .basket-second-header,
html[data-agency-theme="dark"] .basket .basket-item { background: rgba(27, 23, 16, 0.9); }

@keyframes agencyFloatingPanelIn {
  from { opacity: 0; transform: translateY(14px) scale(0.965); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes agencyFloatingPanelOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(10px) scale(0.97); }
}

@keyframes agencyAiStatusPulse {
  0% { box-shadow: 0 0 0 0 rgba(27, 156, 86, 0.42); }
  70%, 100% { box-shadow: 0 0 0 8px rgba(27, 156, 86, 0); }
}

@keyframes agencyAiThinkingPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.9; }
}

@keyframes agencyWelcomeIn {
  from { opacity: 0; transform: translateY(9px); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes agencyFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes agencyGlow {
  from { opacity: 0.72; transform: scale(1); }
  to { opacity: 1; transform: scale(1.04); }
}

@keyframes agencyPackageHalo {
  from { opacity: 0.72; transform: translateX(-50%) scale(0.94); }
  to { opacity: 1; transform: translateX(-50%) scale(1.07); }
}

@keyframes agencyPackageDeviceFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-0.35deg); }
  50% { transform: translate3d(0, -10px, 0) rotate(0.35deg); }
}

@keyframes agencyTwinkle {
  0%, 100% { opacity: 0.2; transform: scale(0.7); }
  50% { opacity: 1; transform: scale(1.25); }
}

@keyframes agencyStarBurst {
  0%, 100% { opacity: 0.24; transform: rotate(var(--agency-star-rotate)) scale(0.55); }
  42% { opacity: 0.92; transform: rotate(calc(var(--agency-star-rotate) + 18deg)) scale(1.05); }
  56% { opacity: 1; transform: rotate(calc(var(--agency-star-rotate) + 26deg)) scale(1.48); }
  72% { opacity: 0.58; transform: rotate(calc(var(--agency-star-rotate) + 38deg)) scale(0.82); }
}

@keyframes agencyNebulaDrift {
  from { transform: translate3d(-2%, -1%, 0) rotate(-2deg) scale(0.98); }
  to { transform: translate3d(3%, 2%, 0) rotate(5deg) scale(1.06); }
}

@keyframes agencyMeteorFly {
  0%, 68% { opacity: 0; transform: rotate(-28deg) translate3d(0, 0, 0) scaleX(0.45); }
  72% { opacity: 1; }
  84% { opacity: 0.95; }
  100% { opacity: 0; transform: rotate(-28deg) translate3d(-1180px, 740px, 0) scaleX(1); }
}

@keyframes agencySaleShimmer {
  0%, 28% { transform: translateX(0) skewX(-16deg); opacity: 0; }
  34% { opacity: 1; }
  52%, 100% { transform: translateX(610%) skewX(-16deg); opacity: 0; }
}

@keyframes agencyGradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@media (max-width: 1440px) {
  .agency-header-shell { gap: 18px; }
  .site-navigation.agency-navigation .navigation-list > li > a { padding-inline: 13px; }
  .agency-discord span:last-child:not(.agency-asset-icon),
  .agency-action-text { display: none; }
  .agency-discord,
  .agency-icon-action { width: 36px; padding: 0; }
  .agency-language-toggle { width: auto; min-width: 58px; padding-inline: 10px; }
  .agency-account-summary { width: auto; min-width: 92px; max-width: 132px; padding-inline: 9px; }
  .agency-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .agency-package-shell { width: min(1320px, calc(100% - (var(--content-padding) * 2))); }
  .agency-package-page { padding: clamp(22px, 2.7vw, 38px); }
  .agency-package-hero { grid-template-columns: minmax(0, 1.22fr) minmax(350px, 1fr); gap: clamp(28px, 3.5vw, 52px); }
  .agency-package-media { min-height: clamp(450px, 39vw, 600px); }
  .agency-package-device-media { min-height: clamp(540px, 46vw, 690px); }
  .agency-package-device-image { height: clamp(470px, 41vw, 620px); }
  .agency-package-summary { top: 96px; }
}

@media (max-width: 1100px) {
  .agency-sale-banner-inner { grid-template-columns: auto minmax(180px, 1fr) auto auto; }
  .agency-sale-countdown { display: none; }
  .agency-header-shell { grid-template-columns: 1fr auto; width: min(100% - 28px, 900px); gap: 12px; }
  .agency-menu-button { display: inline-flex; }
  .agency-header-actions > .agency-discord,
  .agency-header-actions > .log-in,
  .agency-header-actions > .user-name,
  .agency-header-actions > .agency-language-picker,
  .agency-header-actions > .agency-theme-toggle { display: none; }
  .agency-navigation {
    position: fixed;
    inset: 0;
    left: 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100dvh;
    padding: 20px;
    overflow-y: auto;
    color: var(--agency-ink);
    background: var(--agency-cream) !important;
    border: 0;
    border-radius: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
  }
  /* App-like solid drawer: the base .agency-navigation pill rule (used for the
     desktop nav pill) sets a 46%-opaque background; on mobile this element is
     repurposed as a full-screen drawer and needs a fully opaque fill instead,
     or page content behind visibly bleeds through. */
  .agency-network-menu, .agency-ai-panel {
    background: var(--agency-cream) !important;
  }

  /* The header shell paints the frosted-glass bar via backdrop-filter. That
     property creates a new containing block for position:fixed descendants,
     so the mobile drawer (a child of the shell) was sizing itself against the
     315x64 header box instead of the viewport - it rendered as a floating card
     with gaps on every side rather than a full-screen app drawer. Drop the
     filter only while the drawer is open; the drawer covers the header anyway,
     so the glass effect is never visibly lost. */
  body.show-navigation .agency-header-shell,
  body.navigation-open .agency-header-shell,
  body.is-navigation-open .agency-header-shell {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .agency-navigation.open,
  .agency-navigation.navigation-open,
  body.show-navigation .agency-navigation,
  body.navigation-open .agency-navigation,
  body.is-navigation-open .agency-navigation { opacity: 1; visibility: visible; transform: translateY(0); }
  .agency-mobile-nav-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 2px 24px; }
  .agency-mobile-nav-head strong { font-size: 1.2rem; }
  .agency-mobile-nav-head .close-navigation { display: grid; place-items: center; width: 42px; height: 42px; color: var(--agency-ink); background: rgba(201, 162, 39, 0.1); border: 1px solid var(--agency-border); border-radius: 50%; font-size: 1.7rem; }
  .site-navigation.agency-navigation .navigation-list { position: static; padding: 0; align-items: stretch; flex-direction: column; gap: 5px; background: transparent; }
  .site-navigation.agency-navigation .navigation-list > li > a { padding: 15px 17px; border-radius: 14px; font-size: 1rem; }
  .agency-navigation .agency-gift-link { display: block; }
  .agency-mobile-secondary {
    display: grid;
    gap: 10px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--agency-border);
  }
  .agency-mobile-secondary-link,
  .agency-mobile-secondary .agency-theme-toggle,
  .agency-mobile-secondary .agency-language-toggle {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    min-height: 48px;
    padding: 0 16px;
    gap: 10px;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 600;
  }
  .agency-mobile-account-summary { height: auto; min-height: 58px; }
  .agency-mobile-account-summary .agency-account-copy strong { max-width: min(68vw, 340px); font-size: 0.94rem; }
  .agency-mobile-account-summary .agency-account-copy small { margin-top: 5px; font-size: 0.72rem; }
  .agency-mobile-secondary .agency-language-picker { width: 100%; }
  .agency-mobile-secondary .agency-language-code { display: inline; font-size: 0.9rem; }
  .agency-mobile-secondary .agency-language-menu {
    position: static;
    width: 100%;
    max-height: 0;
    margin-top: 0;
    padding: 0;
    overflow: hidden;
    border-width: 0;
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    transform: none;
  }
  .agency-mobile-secondary .agency-language-picker.is-open .agency-language-menu {
    max-height: 310px;
    margin-top: 8px;
    padding: 8px;
    border-width: 1px;
    opacity: 1;
    visibility: visible;
  }
  .agency-hero h1 { font-size: 4.5rem; }
  .agency-navigation .agency-custom-link a { margin-top: 8px; text-align: center; }
  .agency-two-promos,
  .agency-showcase,
  .agency-custom-card { grid-template-columns: 1fr; }
  .agency-showcase-pad .agency-showcase-image { order: 2; }
  .agency-showcase-actions { justify-content: center; }
  .agency-showcase-copy { text-align: center; }
  .agency-showcase-copy ul { max-width: 600px; margin-inline: auto; text-align: left; }
  .agency-product-grid,
  .agency-bundle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agency-review-grid { grid-template-columns: 1fr; }
  .site-content { grid-template-columns: 1fr; }
  .store-sidebar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .store-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agency-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agency-package-shell { width: min(900px, calc(100% - (var(--content-padding) * 2))); padding-top: 94px; }
  .agency-package-hero { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .agency-package-summary { position: relative; top: auto; }
  .agency-package-media { min-height: clamp(440px, 65vw, 620px); }
  .agency-package-device-media { min-height: clamp(520px, 78vw, 720px); }
  .agency-package-device-image { height: clamp(470px, 70vw, 650px); }
  .agency-package-phone .agency-package-device-image { max-width: min(64%, 440px); }
  .agency-package-pad .agency-package-device-image { max-width: min(88%, 760px); }
  .agency-package-media-slider .slide,
  .agency-package-image-default { min-height: clamp(400px, 58vw, 560px); }
  .agency-package-media-slider .slide-image,
  .agency-package-primary-image { height: clamp(410px, 61vw, 580px); }
  .agency-package-media-slider .slide-frame,
  .agency-package-media-single .slide-frame { min-height: clamp(390px, 55vw, 535px); }
  .agency-package-summary .product-title { font-size: clamp(2.6rem, 8vw, 4.5rem); }
}

@media (max-width: 680px) {
  :root { --content-padding: 16px; --widget-padding: 18px; }
  .agency-network-dock,
  .agency-ai-dock { bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
  .agency-network-dock { left: max(12px, env(safe-area-inset-left, 0px)); }
  .agency-ai-dock { right: max(12px, env(safe-area-inset-right, 0px)); }
  .agency-social-proof {
    left: max(12px, env(safe-area-inset-left, 0px));
    bottom: calc(max(12px, env(safe-area-inset-bottom, 0px)) + 62px);
    max-width: min(280px, calc(100vw - 24px));
  }
  .agency-floating-toggle { width: 50px; height: 50px; min-height: 50px; padding: 0; }
  .agency-floating-toggle > span:not(.agency-ai-orb),
  .agency-ai-toggle > i { display: none; }
  .agency-ai-toggle .agency-ai-orb { width: 36px; height: 36px; flex-basis: 36px; }
  .agency-network-menu,
  .agency-ai-panel {
    position: fixed;
    left: max(12px, env(safe-area-inset-left, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
    bottom: calc(max(12px, env(safe-area-inset-bottom, 0px)) + 62px);
    width: auto;
    max-height: calc(100dvh - max(12px, env(safe-area-inset-bottom, 0px)) - 82px);
    border-radius: 22px;
  }
  .agency-network-menu { max-height: min(590px, calc(100dvh - max(12px, env(safe-area-inset-bottom, 0px)) - 82px)); overflow-y: auto; }
  .agency-ai-panel { height: min(610px, calc(100dvh - max(12px, env(safe-area-inset-bottom, 0px)) - 82px)); min-height: 390px; }
  .agency-ai-panel-head { padding: 14px 15px 11px; }
  .agency-ai-quota { margin: 10px 15px 0; }
  .agency-ai-messages { padding: 14px 15px 12px; }
  .agency-ai-form { margin-inline: 11px; }
  .agency-ai-panel-foot { padding: 10px 15px 13px; }
  .agency-ai-send { min-width: 44px; width: 44px; padding: 0; }
  .agency-ai-send > span { display: none; }
  .agency-section { padding: 72px 0; }
  .agency-header-shell { min-height: 64px; margin-top: 8px; padding: 5px 8px; border-radius: 24px; }
  .site-header.agency-header { min-height: 64px; }
  .agency-sale-banner-inner { grid-template-columns: auto minmax(0, 1fr) auto; width: calc(100% - 24px); min-height: 58px; gap: 9px; padding-block: 7px; }
  .agency-sale-banner-icon { width: 36px; height: 36px; border-radius: 11px; }
  .agency-sale-banner-icon .agency-asset-icon { width: 18px; height: 18px; }
  .agency-sale-banner-copy > span { display: none; }
  .agency-sale-banner-title { align-items: flex-start; flex-direction: column; gap: 3px; }
  .agency-sale-banner-title strong { max-width: 100%; font-size: 0.66rem; }
  .agency-sale-banner-discount { padding: 2px 6px; font-size: 0.58rem; }
  .agency-sale-banner-cta { display: none; }
  .agency-sale-banner-close { width: 34px; height: 34px; }
  .agency-brand span { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .agency-header-actions > .agency-discord { display: none; }
  .agency-hero { min-height: 100svh; padding: 98px 0 70px; }
  body.has-agency-sale .agency-hero { padding-top: calc(98px + var(--agency-sale-banner-height)); }
  .agency-hero h1 { font-size: 2.25rem; }
  .agency-hero-subtitle { font-size: 0.875rem; }
  .agency-section-heading h2 { font-size: 2.25rem; line-height: 1.1; }
  .agency-app-card .agency-section-heading h2 { font-size: 1.875rem; }
  .agency-hero-actions { flex-direction: column; align-items: stretch; max-width: 330px; margin-inline: auto; }
  .agency-hero-actions .agency-btn { width: 100%; }
  .agency-trust-row { align-items: center; flex-direction: column; gap: 10px; margin-top: 38px; }
  .agency-app-card { width: calc(100% - 24px); padding-inline: 20px; border-radius: 24px; }
  .agency-device-stage { min-height: 180px; transform: scale(0.78); margin: -4px -45px; }
  .agency-two-promos,
  .agency-sub-grid,
  .agency-how-grid,
  .agency-product-grid,
  .agency-bundle-grid,
  .agency-custom-benefits,
  .agency-footer-grid,
  .store-products-grid,
  .store-products-list,
  .store-sidebar { grid-template-columns: 1fr; }
  .agency-release-card { min-height: 280px; }
  .agency-proof-inner h2 { font-size: clamp(2.5rem, 14vw, 4.4rem); }
  .agency-proof-stats { grid-template-columns: 1fr; max-width: 320px; }
  .agency-showcase { gap: 42px; }
  .agency-showcase-copy h2 { font-size: 3rem; }
  .agency-custom-card h2 { font-size: 2.25rem; }
  .agency-showcase-copy ul { grid-template-columns: 1fr; }
  .agency-showcase-image { padding: 9px; border-radius: 20px; transform: none; }
  .agency-showcase-image { min-height: 440px; }
  .agency-showcase-pad .agency-showcase-image { min-height: 300px; }
  .agency-showcase-image img { height: 420px; padding: 4px; border-radius: 14px; transform: none; }
  .agency-showcase-pad .agency-showcase-image img { height: 280px; }
  .agency-showcase-price-inline { min-height: 42px; padding: 9px 13px; }
  .agency-product-grid { gap: 14px; }
  .agency-product-card { border-radius: 18px; }
  .agency-product-body { padding: 16px; }
  .agency-product-description { -webkit-line-clamp: 3; }
  .agency-custom-card { width: calc(100% - 24px); padding: 30px 22px; border-radius: 24px; }
  .agency-footer-newsletter,
  .agency-footer-bottom { align-items: flex-start; flex-direction: column; }
  .agency-footer-apps { flex-wrap: wrap; }
  .agency-footer-bottom .we-accept { flex-wrap: wrap; }
  .site-content { padding-top: calc(80px + env(safe-area-inset-top, 0px)); }
  body.has-agency-sale .site-content { padding-top: calc(80px + env(safe-area-inset-top, 0px) + var(--agency-sale-banner-height)); }
  .store-product-full { border-radius: 18px; }
  .store-product-full .product-actions { align-items: stretch; flex-direction: column; }
  .store-product-full .product-actions .price { margin: 0 0 8px; }
  .agency-package-shell {
    width: calc(100% - (var(--content-padding) * 2));
    padding-top: calc(78px + env(safe-area-inset-top, 0px));
    padding-bottom: 84px;
  }
  body.has-agency-sale .agency-package-shell { padding-top: calc(78px + env(safe-area-inset-top, 0px) + var(--agency-sale-banner-height)); }
  .agency-package-page { padding: 14px; border-radius: 21px; }
  .agency-package-breadcrumb { margin: 3px 3px 15px; font-size: 0.7rem; }
  .agency-package-hero { gap: 18px; }
  .agency-package-media { min-height: 390px; padding: 8px; border-radius: 19px; }
  .agency-package-device-media { min-height: 470px; }
  .agency-package-device-stage { padding: 22px 14px; }
  .agency-package-device-image { height: 430px; }
  .agency-package-phone .agency-package-device-image { max-width: min(82%, 360px); }
  .agency-package-pad .agency-package-device-image { max-width: 96%; height: 410px; }
  .agency-package-media-slider,
  .agency-package-media-slider .slider,
  .agency-package-media-slider .slide,
  .agency-package-media-slider .slide-image,
  .agency-package-primary-image { border-radius: 14px !important; }
  .agency-package-media-slider .slide,
  .agency-package-image-default { min-height: 330px; }
  .agency-package-media-slider .slide-image,
  .agency-package-primary-image { height: 350px; }
  .agency-package-media-slider .slide-frame,
  .agency-package-media-single .slide-frame { min-height: 300px; }
  .agency-package-media-slider .thumb { flex-basis: 74px; width: 74px; border-radius: 9px; }
  .agency-package-media-slider .open-lightbox { top: 10px; right: 10px; width: auto; min-width: 38px; height: 38px; padding-inline: 11px; }
  .agency-package-summary { padding: 23px 19px; border-radius: 19px; }
  .agency-package-summary .product-title { font-size: clamp(2.05rem, 11.5vw, 3.4rem); line-height: 1; }
  .agency-package-trust { grid-template-columns: 1fr; gap: 7px; margin-top: 21px; }
  .agency-package-trust > * { justify-content: flex-start; min-height: 45px; padding: 9px 12px; text-align: left; }
  .agency-package-page .agency-package-actions { align-items: stretch; flex-direction: column; padding: 13px; border-radius: 16px; }
  .agency-package-page .agency-package-actions .agency-package-price { flex: 0 0 auto; width: 100%; margin: 0 0 3px; }
  .agency-package-page .agency-package-buy-group { flex-direction: column; align-items: stretch; width: 100%; }
  .agency-package-page .agency-package-actions .wide,
  .agency-package-page .agency-package-actions .half,
  .agency-package-page .agency-package-buy-button,
  .agency-package-page .agency-package-basket-button { flex: 0 0 auto; width: 100%; }
  .agency-package-page .agency-package-quantity,
  .agency-package-page .agency-package-actions .quantity-field { justify-content: center; width: 100%; }
  .agency-package-page .agency-package-gift-button,
  .agency-package-page .agency-package-actions .gift {
    width: 100% !important;
    min-width: 100%;
  }
  .agency-package-description { margin-top: 24px; padding: 23px 18px; border-radius: 19px; }
  .agency-package-description-heading { align-items: flex-start; flex-direction: column; margin-bottom: 20px; padding-bottom: 16px; }
  .agency-package-description .descr { font-size: 0.92rem; line-height: 1.68; }
  .basket-popup-content { border-radius: 20px 20px 0 0; }
  .basket-popup-content.agency-basket-login,
  .login-popup-content.agency-basket-login { justify-content: flex-start; min-height: min(680px, 92svh); padding: 72px 24px 34px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .agency-reveal { opacity: 1 !important; transform: none !important; }
  .agency-proof-inner h2.agency-proof-scroll span { opacity: 1 !important; filter: none !important; transform: none !important; }
  .agency-showcase-image,
  .agency-showcase-image img { transform: none !important; }
  .agency-showcase-image::before { display: none !important; }
  .agency-meteor { display: none !important; }
  .agency-cosmic-star { opacity: 0.72 !important; transform: none !important; }
  .agency-floating-toggle,
  .agency-network-menu,
  .agency-ai-panel,
  .agency-ai-message.is-pending p,
  .agency-ai-toggle > i { animation: none !important; transform: none !important; }
  .agency-package-media::before,
  .agency-package-device-image { animation: none !important; transform: none !important; }
  .agency-package-device-image,
  .agency-package-primary-image,
  .agency-package-media-slider .thumb { transition: none !important; }
  .agency-sale-banner,
  .agency-sale-banner-shimmer { animation: none !important; transition: none !important; }
}

@media (max-width: 480px) {
  .agency-brand span { display: none; }
  .agency-device-stage { min-height: 145px; margin: -18px -145px -8px; transform: scale(0.52); }
  .agency-products-toggle { width: min(100%, 280px); }
  .agency-package-page { padding: 10px; }
  .agency-package-media { min-height: 342px; }
  .agency-package-device-media { min-height: 415px; }
  .agency-package-device-image { height: 375px; }
  .agency-package-phone .agency-package-device-image { max-width: min(88%, 320px); }
  .agency-package-pad .agency-package-device-image { max-width: 100%; height: 350px; }
  .agency-package-media-slider .slide,
  .agency-package-image-default { min-height: 290px; }
  .agency-package-media-slider .slide-image,
  .agency-package-primary-image { height: 305px; }
  .agency-package-media-slider .slide-frame,
  .agency-package-media-single .slide-frame { min-height: 270px; }
  .agency-package-summary { padding: 21px 16px; }
  .agency-package-summary .product-title { font-size: clamp(1.9rem, 11vw, 2.75rem); }
  .agency-package-price-value { font-size: 1.75rem; }
  .agency-package-description { padding: 21px 15px; }
}

/* Agency hero crew artwork */
.agency-hero-crew {
  position: absolute;
  z-index: 1;
  bottom: 0;
  height: min(98%, 1250px);
  width: clamp(365px, 30vw, 600px);
  pointer-events: none;
  display: none;
}

.agency-hero-crew-left {
  left: 0;
  -webkit-mask-image: linear-gradient(to right, black 55%, transparent 100%);
  mask-image: linear-gradient(to right, black 55%, transparent 100%);
}

.agency-hero-crew-right {
  right: 0;
  -webkit-mask-image: linear-gradient(to left, black 55%, transparent 100%);
  mask-image: linear-gradient(to left, black 55%, transparent 100%);
}

.agency-hero-crew img {
  position: absolute;
  bottom: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 24px 46px rgba(0, 0, 0, 0.4));
}

.agency-hero-crew-left img { left: 0; object-position: bottom left; }
.agency-hero-crew-right img { right: 0; object-position: bottom right; }

.agency-hero-crew-img-dark { opacity: 0; }
.agency-hero-crew-img-light { opacity: 1; }
html[data-agency-theme="dark"] .agency-hero-crew-img-dark { opacity: 1; }
html[data-agency-theme="dark"] .agency-hero-crew-img-light { opacity: 0; }
html[data-agency-theme="dark"] .agency-hero-crew img { filter: drop-shadow(0 24px 46px rgba(0, 0, 0, 0.6)); }

@media (min-width: 1440px) {
  .agency-hero-crew { display: block; }
}

/* Agency proof-section crew artwork */
.agency-proof-section { position: relative; }

.agency-proof-crew {
  position: absolute;
  z-index: 0;
  bottom: 0;
  height: min(98%, 1250px);
  width: clamp(365px, 30vw, 600px);
  pointer-events: none;
  display: none;
}

.agency-proof-crew-left {
  left: 0;
  -webkit-mask-image: linear-gradient(to right, black 50%, transparent 100%);
  mask-image: linear-gradient(to right, black 50%, transparent 100%);
}

.agency-proof-crew-right {
  right: 0;
  -webkit-mask-image: linear-gradient(to left, black 50%, transparent 100%);
  mask-image: linear-gradient(to left, black 50%, transparent 100%);
}

.agency-proof-crew img {
  position: absolute;
  bottom: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 20px 38px rgba(74, 55, 12, 0.22));
}

.agency-proof-crew-left img { left: 0; object-position: bottom left; }
.agency-proof-crew-right img { right: 0; object-position: bottom right; }

.agency-proof-crew-img-dark { opacity: 0; }
.agency-proof-crew-img-light { opacity: 1; }
html[data-agency-theme="dark"] .agency-proof-crew-img-dark { opacity: 1; }
html[data-agency-theme="dark"] .agency-proof-crew-img-light { opacity: 0; }
html[data-agency-theme="dark"] .agency-proof-crew img { filter: drop-shadow(0 20px 38px rgba(0, 0, 0, 0.5)); }

@media (min-width: 1300px) {
  .agency-proof-crew { display: block; }
}

/* Agency custom-development crew artwork */
.agency-custom-crew {
  display: none;
  flex: 0 0 auto;
  height: 1120px;
  width: 460px;
  pointer-events: none;
  position: relative;
}

.agency-custom-crew img {
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 20px 38px rgba(74, 55, 12, 0.22));
}

.agency-custom-crew-img-dark { opacity: 0; }
.agency-custom-crew-img-light { opacity: 1; }
html[data-agency-theme="dark"] .agency-custom-crew-img-dark { opacity: 1; }
html[data-agency-theme="dark"] .agency-custom-crew-img-light { opacity: 0; }
html[data-agency-theme="dark"] .agency-custom-crew img { filter: drop-shadow(0 20px 38px rgba(0, 0, 0, 0.5)); }

@media (min-width: 1360px) {
  .agency-custom-section {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 40px;
    padding-inline: var(--content-padding);
  }
  .agency-custom-section .agency-custom-card {
    width: auto;
    flex: 1 1 960px;
    max-width: 960px;
    margin: 0;
  }
  .agency-custom-crew { display: block; }
}

/* App-style bottom sheet (phones).
   The floating tool panels were inset 12px from every edge and lifted 62px off
   the bottom, which reads as a web popover hovering over the page. Native apps
   dock this kind of surface to the bottom edge: full width, flush, only the top
   corners rounded, with an upward shadow to lift it off the content. The sheet
   covers the FAB row while open - each panel carries its own close button. */
@media (max-width: 680px) {
  .agency-network-menu,
  .agency-ai-panel {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    border-radius: 22px 22px 0 0 !important;
    box-shadow: 0 -14px 44px rgba(0, 0, 0, 0.3) !important;
  }
  .agency-network-menu {
    max-height: min(86dvh, calc(100dvh - 64px)) !important;
    padding-bottom: calc(13px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .agency-ai-panel {
    height: min(86dvh, calc(100dvh - 64px)) !important;
  }
  .agency-ai-panel-foot {
    padding-bottom: calc(13px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Lift the floating-tools stacking context above the site header (phones).
   Both sheets live inside .agency-floating-tools, which sets z-index: 90 and
   therefore establishes its own stacking context. The header sits at z-index
   100, so it painted over any open sheet - the logo, cart and menu button
   landed on top of the sheet title and buried its close button. A z-index on
   the panel itself cannot escape the parent context, so the container is what
   has to be raised. Scoped to phones; desktop keeps its original layering. */
@media (max-width: 680px) {
  .agency-floating-tools {
    z-index: 120 !important;
  }

  /* Dim the page behind an open sheet - the scrim is what separates an app
     sheet from a floating web popover. Kept click-through so it can never
     sheet from a floating web popover. It deliberately captures taps: that
     both blocks the page behind from being hit through the dimmed area and
     dismisses the sheet, because a tap on the scrim targets its host element,
     which the existing outside-click handler in agency.js already treats as
     "outside the dock". No extra JS needed. */
    .agency-floating-tools::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    background: rgba(8, 6, 3, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
  }
  .agency-floating-tools:has(.agency-network-menu:not([hidden]))::before,
  .agency-floating-tools:has(.agency-ai-panel:not([hidden]))::before {
    opacity: 1;
    pointer-events: auto;
  }
  /* agency.js keeps the panel in the DOM for its ~260ms close animation and
     only sets [hidden] afterwards, so :not([hidden]) still matches while the
     sheet slides away. Without this the scrim would stay at full strength and
     then blink out; fading on .is-closing starts both at the same moment. */
  .agency-floating-tools:has(.agency-network-menu.is-closing)::before,
  .agency-floating-tools:has(.agency-ai-panel.is-closing)::before {
    opacity: 0;
    pointer-events: none;
  }

  /* The round toggle buttons sit at the bottom edge, exactly where the sheet
     now is, and floated on top of its content. Hide them while a sheet is
     open; each sheet carries its own close button. */
  .agency-floating-tools:has(.agency-network-menu:not([hidden])) .agency-floating-toggle,
  .agency-floating-tools:has(.agency-ai-panel:not([hidden])) .agency-floating-toggle {
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* Hide the social-proof toast on phones.
   The "Someone just got X" popup is anchored bottom-left and, on a phone,
   lands directly on top of the hero call-to-action and the community button.
   Desktop has room for it and keeps it unchanged. 680px matches the existing
   mobile breakpoint already used for this component. */
@media (max-width: 680px) {
  .agency-social-proof {
    display: none !important;
  }
}

/* Respect a reduced-motion preference for the scrim fade. */
@media (max-width: 680px) and (prefers-reduced-motion: reduce) {
  .agency-floating-tools::before {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   Video player, play badge and lightbox (see agency.js).
   The poster is a plain image until the visitor clicks, so nothing is loaded
   from YouTube on page view.
--------------------------------------------------------------------------- */
.agency-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0 0 26px;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(8, 6, 3, 0.35);
  border: 1px solid var(--agency-border);
}
.agency-video-play {
  z-index: 2;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.agency-video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease, filter 400ms ease;
}
/* Poster is now a sibling of the button, so hover is read off the box. */
.agency-video:hover .agency-video-poster,
.agency-video-play:focus-visible ~ .agency-video-poster,
.agency-video:focus-within .agency-video-poster {
  transform: scale(1.03);
  filter: brightness(0.86);
}
.agency-video-icon {
  position: relative;
  width: 74px;
  height: 74px;
  border-radius: 999px;
  background: rgba(12, 9, 4, 0.62);
  border: 1px solid rgba(233, 209, 138, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  transition: transform 220ms ease, background 220ms ease;
}
/* Play triangle drawn with borders - no icon font, no extra request. */
.agency-video-icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 52%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 13px 0 13px 21px;
  border-color: transparent transparent transparent var(--agency-gold, #c9a227);
}
.agency-video:hover .agency-video-icon,
.agency-video:focus-within .agency-video-icon {
  transform: scale(1.08);
  background: rgba(12, 9, 4, 0.78);
}
.agency-video-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Play badge on a product tile. The tile itself is a link, so the badge sits
   above it and stops the click from navigating. */
.agency-product-card .agency-product-image { position: relative; }
.agency-card-video {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(12, 9, 4, 0.6);
  border: 1px solid rgba(233, 209, 138, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  transition: transform 200ms ease, background 200ms ease;
}
.agency-card-video::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 53%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent var(--agency-gold, #c9a227);
}
.agency-card-video:hover,
.agency-card-video:focus-visible { transform: scale(1.1); background: rgba(12, 9, 4, 0.8); }

.agency-video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(6, 5, 2, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.agency-video-stage { position: relative; width: min(1100px, 100%); }
.agency-video-stage .agency-video { margin: 0; }
.agency-video-close {
  position: absolute;
  top: -46px;
  right: 0;
  width: 38px;
  height: 38px;
  padding: 0;
  cursor: pointer;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.agency-video-close::before,
.agency-video-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  background: #f7f2e4;
}
.agency-video-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.agency-video-close::after  { transform: translate(-50%, -50%) rotate(-45deg); }
/* Stop the page behind the lightbox from scrolling. */
html.agency-video-open, html.agency-video-open body { overflow: hidden; }

@media (max-width: 680px) {
  .agency-video { border-radius: 14px; margin-bottom: 18px; }
  .agency-video-icon { width: 58px; height: 58px; }
  .agency-video-icon::before { border-width: 10px 0 10px 16px; }
  .agency-video-lightbox { padding: 14px; }
  .agency-video-close { top: -42px; }
}
@media (prefers-reduced-motion: reduce) {
  .agency-video-poster, .agency-video-icon, .agency-card-video { transition: none; }
}

/* ---------------------------------------------------------------------------
   Hero background trailer.
   Sits behind the hero content and above the ray layer. The dim overlay is
   driven by the agencyHeroVideoDim setting in layout.html so the headline
   stays readable without editing this file.
--------------------------------------------------------------------------- */
.agency-hero-video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.agency-hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Scrim. Opacity is set inline from the template setting. */
.agency-hero-video-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 70% at 50% 45%, rgba(10,8,5,0.35) 0%, rgba(10,8,5,1) 100%);
  opacity: var(--agency-hero-dim, 0.55);
}
/* The hero content must stay above the footage. */
.agency-hero > .agency-hero-content { position: relative; z-index: 2; }
.agency-hero-crew { z-index: 1; }

/* Phones fall back to the poster still: 31 KB instead of 2.5 MB, and iOS is
   unreliable about autoplaying background video anyway. */
@media (max-width: 680px) {
  .agency-hero-video-wrap.is-desktop-only .agency-hero-video { display: none; }
  .agency-hero-video-wrap.is-desktop-only {
    background-image: var(--agency-hero-poster);
    background-size: cover;
    background-position: center;
  }
}
/* Someone who asked the system for less motion should not get a looping clip. */
@media (prefers-reduced-motion: reduce) {
  .agency-hero-video { display: none; }
}

/* ---------------------------------------------------------------------------
   Countdown back on phones.

   It used to be hidden below 1100px, which killed the urgency exactly where
   most visitors are. It cannot share the single row: icon + countdown + button
   + close already need 359px of a 375px screen, leaving the headline negative
   space. So the banner becomes two rows on phones instead.

     row 1:  icon | headline | close
     row 2:  countdown       | button
--------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .agency-sale-banner-inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "icon copy  close"
      "time time  cta";
    gap: 8px 10px;
    align-items: center;
  }
  .agency-sale-banner-icon { grid-area: icon; }
  .agency-sale-banner-copy { grid-area: copy; }
  /* The close column is as wide as the button below it, so pin it right. */
  .agency-sale-banner-close { grid-area: close; justify-self: end; }
  .agency-sale-countdown { grid-area: time; display: flex; }
  .agency-sale-banner-cta { grid-area: cta; }
}

/* ---------------------------------------------------------------------------
   Bleed past the browser chrome (phones).

   iOS Safari floats its address bar over the page. A fixed overlay pinned to
   inset:0 stops where that bar begins, so a strip of the page stayed visible -
   undimmed - above an open sheet, and the drawer clipped its own first menu
   item. Both surfaces now start well above the viewport and pad their content
   back down, so the background covers the strip while the layout is unchanged.
--------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .agency-navigation {
    top: -180px;
    height: calc(100dvh + 180px);
    padding-top: 200px;
  }
  /* shared.css pins the close button to the drawer at top:12px. The drawer now
     starts 180px above the viewport, so without this the button sits offscreen
     and the menu has no visible way to close. 12 + 180 keeps it exactly where
     it looked before. */
  .site-navigation.agency-navigation .close-navigation {
    top: 192px;
  }
}
@media (max-width: 680px) {
  .agency-floating-tools::before {
    top: -180px;
    height: calc(100% + 360px);
  }
}


/* --- 14 Tage gratis testen (ersetzt die alte Rabatt-Box) --- */
.agency-first-month.agency-trial {
  color: #1f6b46;
  background: #eafaf1;
  border-color: #c4ecd6;
}

.agency-first-month.agency-trial small {
  font-size: 0.72rem;
  font-weight: 600;
  opacity: 0.85;
}

html[data-agency-theme="dark"] .agency-first-month.agency-trial {
  color: #9fe9bf;
  background: rgba(40, 130, 85, 0.18);
  border-color: rgba(70, 190, 125, 0.34);
}

/* Kauf-Hinweis: .agency-floating-tools setzt pointer-events:none, die
   Geschwister-Docks setzen auto zurueck - beim Toast fehlte das,
   dadurch gingen Klicks durch den Schliessen-Knopf hindurch. */
.agency-social-proof {
  pointer-events: auto;
}


/* Preiszeile unter dem Trial-Hinweis auf der Abo-Kategorieseite:
   klein und gedaempft, damit "14 Tage gratis" die Hauptaussage bleibt.
   Der per price.twig eingebundene Betrag erbt hier die kleine Groesse. */
.agency-trial-price .agency-trial-then {
  display: block;
  margin-top: 5px;
  font-size: 0.82rem;
  font-weight: 600;
  opacity: 0.75;
}

.agency-trial-price .agency-trial-then .agency-package-price-value {
  display: inline;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}


/* Schliessen-Knopf der Login-Karte: shared.css legt auf .popup-close::before
   eine SVG-Maske (close.svg). Das Theme baut das X stattdessen aus zwei
   gedrehten Strichen - die Maske blieb aktiv und hat den ::before-Strich
   fast komplett weggeschnitten, so dass nur ein schraeger Rest zu sehen war. */
.agency-basket-login .popup-close::before,
.agency-basket-login .popup-close::after {
  -webkit-mask: none;
  mask: none;
}

/* Fester Header ist 82px hoch, .site-content hatte aber nur 74px padding-top -
   dadurch lief der Inhalt der Tebex-Seiten (Kategorie, Produkt, Checkout)
   unter den Header. Die Handy-Regel (max-width:680px) bleibt unberuehrt. */
@media (min-width: 681px) {
  .site-content {
    padding-top: 104px;
  }

  body.has-agency-sale .site-content {
    padding-top: calc(104px + var(--agency-sale-banner-height));
  }
}


/* Kauf-Hinweis ist jetzt ein Link auf das genannte Produkt.
   Bild und Text liegen im Link, der Schliessen-Knopf bleibt daneben. */
.agency-social-proof-link {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.agency-social-proof-link:hover .agency-social-proof-text,
.agency-social-proof-link:focus-visible .agency-social-proof-text {
  text-decoration: underline;
}


/* Custom-Bereich: Die Deko-Figur stand im Textfluss (1120px hoch) und hat den
   eigentlichen Inhalt um ~700px nach unten geschoben. Beim Sprung auf
   #custom-development landete man deshalb vor einer leeren Flaeche.
   Jetzt liegt sie absolut wie die Figuren im Proof-Abschnitt. */
.agency-custom-crew {
  position: absolute;
  z-index: 0;
  left: 0;
  bottom: 0;
  height: min(96%, 1120px);
  width: clamp(300px, 26vw, 460px);
  pointer-events: none;
}

.agency-custom-crew img {
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom left;
}

.agency-custom-section .agency-custom-card {
  position: relative;
  z-index: 1;
}

@media (max-width: 1100px) {
  .agency-custom-crew {
    display: none;
  }
}


/* --- Bildergalerie: Pfeile dezenter, Vollbild bedienbar --- */

/* Die Pfeile waren 42px grosse, fast deckende Goldkreise mitten im Bild.
   Jetzt kleiner, dunkel-transparent und dichter am Rand. */
.agency-package-media-slider .slider {
  --swiper-navigation-sides-offset: 10px;
}

.agency-package-media-slider .slider::part(button-prev),
.agency-package-media-slider .slider::part(button-next) {
  width: 34px;
  height: 34px;
  padding: 9px;
  color: #f6d972;
  background: rgba(21, 17, 7, 0.5);
  border-color: rgba(246, 217, 114, 0.3);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  opacity: 0.72;
  transition: opacity 160ms ease, background-color 160ms ease;
}

.agency-package-media-slider:hover .slider::part(button-prev),
.agency-package-media-slider:hover .slider::part(button-next) {
  opacity: 1;
  background: rgba(21, 17, 7, 0.72);
}

/* Tebex blendet den Text per font-size:0 aus und setzt das Symbol als
   ::before. Das Theme macht den Text wieder sichtbar - mit display:grid
   landeten Symbol und Text uebereinander statt nebeneinander. */
.agency-package-media-slider .open-lightbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  line-height: 1;
}

/* Vollbild: Tebex eigene Pfeile sind duenne graue Chevrons am Bildschirmrand
   und kaum zu treffen. Sie bekommen die gleiche Optik wie im Slider. */
.popup-media-slider .slider::part(button-prev),
.popup-media-slider .slider::part(button-next) {
  width: 46px;
  height: 46px;
  padding: 13px;
  color: #f6d972;
  background: rgba(21, 17, 7, 0.62);
  border: 1px solid rgba(246, 217, 114, 0.32);
  border-radius: 50%;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
  transition: background-color 160ms ease;
}

.popup-media-slider .slider::part(button-prev):hover,
.popup-media-slider .slider::part(button-next):hover {
  background: rgba(21, 17, 7, 0.85);
}


/* --- Schliessen-Knopf in den Formular-Popups --- */
/* Nur die Login-Karte hatte den runden Agency-Knopf. Geschenk-, Options- und
   Angebots-Popup behielten Tebex Standard: ein eckiger Kasten in der Ecke, der
   ueber die abgerundete Karte hinausragte. Jetzt ueberall die gleiche Optik. */
.gift-form-popup .popup-close,
.product-options-popup .popup-close,
.store-quote-popup .popup-close,
.store-product-popup .popup-close {
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  overflow: hidden;
  color: transparent;
  background: rgba(21, 17, 7, 0.55);
  border: 1px solid rgba(246, 217, 114, 0.28);
  border-radius: 50%;
  opacity: 1;
  backdrop-filter: blur(10px);
  transition: background-color 160ms ease, border-color 160ms ease;
}

.gift-form-popup .popup-close:hover,
.product-options-popup .popup-close:hover,
.store-quote-popup .popup-close:hover,
.store-product-popup .popup-close:hover {
  background: rgba(21, 17, 7, 0.8);
  border-color: rgba(246, 217, 114, 0.5);
}

/* X aus zwei Strichen. Die Maske aus shared.css muss weg, sonst schneidet
   close.svg den Strich weg - gleiche Falle wie bei der Login-Karte. */
.gift-form-popup .popup-close::before,
.product-options-popup .popup-close::before,
.store-quote-popup .popup-close::before,
.store-product-popup .popup-close::before,
.gift-form-popup .popup-close::after,
.product-options-popup .popup-close::after,
.store-quote-popup .popup-close::after,
.store-product-popup .popup-close::after {
  content: "";
  position: absolute;
  width: 15px;
  height: 2px;
  background: #f6d972;
  border-radius: 99px;
  -webkit-mask: none;
  mask: none;
  transform: rotate(45deg);
}

.gift-form-popup .popup-close::after,
.product-options-popup .popup-close::after,
.store-quote-popup .popup-close::after,
.store-product-popup .popup-close::after {
  transform: rotate(-45deg);
}


/* --- Abo-Karten: Logos ganz zeigen und gerade ausrichten --- */
/* Die Paketbilder der Abos sind quadratisch, der Rahmen ist 16:9. Mit
   object-fit:cover wurde oben und unten abgeschnitten. contain zeigt das
   ganze Logo und schadet nicht, wenn spaeter ein 16:9-Bild hinterlegt wird. */
.store-products-tiered .store-product-tiered > .image {
  object-fit: contain;
  background: rgba(21, 17, 7, 0.35);
}

/* Die Karten sind gleich hoch, hatten aber unterschiedlich lange Texte. Der
   Leerraum wurde dazwischen verteilt, dadurch standen Bild und Titel der
   beiden Karten auf verschiedenen Hoehen. Jetzt oben buendig, der Kaufblock
   wird nach unten geschoben. */
.store-products-tiered .store-product-tiered {
  justify-content: flex-start;
}

.store-products-tiered .store-product-tiered > .actions {
  margin-top: auto;
}


/* Nachtrag: In den Abo-Karten stehen die Kinder auf margin:auto. Flexbox
   verteilt den freien Platz darauf, dadurch rutschten Bild und Titel der
   kuerzeren Karte nach unten. Oben feste Null, nur der Kaufblock bleibt auto. */
.store-products-tiered .store-product-tiered > .image,
.store-products-tiered .store-product-tiered > .product-title,
.store-products-tiered .store-product-tiered > .descr {
  margin-top: 0;
  margin-bottom: 0;
}


/* Custom-Bereich: Die Deko-Figur endete unten hart abgeschnitten.
   Weicher Auslauf nach unten, wie die Figuren im Proof-Abschnitt seitlich. */
.agency-custom-crew {
  -webkit-mask-image: linear-gradient(to bottom, black 68%, transparent 97%);
  mask-image: linear-gradient(to bottom, black 68%, transparent 97%);
}

/* Warenkorb: Menge laesst sich nicht sinnvoll aendern, pro Artikel wird
   ohnehin nur eines gekauft. Plus/Minus daher raus, Papierkorb bleibt. */
.basket .quantity-field .adjust,
.basket-item .quantity-field .adjust {
  display: none !important;
}

.basket .quantity-field input[type="number"],
.basket-item .quantity-field input[type="number"] {
  pointer-events: none;
  min-width: 34px;
  text-align: center;
}


/* Hinweis auf die Gratis-Testphase im Warenkorb */
.agency-basket-trial {
  margin: 4px 0 0;
  color: #6fcf97;
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

html[data-agency-theme="dark"] .agency-basket-trial {
  color: #9fe9bf;
}


/* Abo-Karten: Die Trennlinie ist der border-bottom der Beschreibung. Weil die
   Texte unterschiedlich lang sind, sass sie bei den beiden Karten 106px
   versetzt. Die Beschreibung fuellt jetzt den freien Raum, dadurch sitzt die
   Linie bei beiden direkt ueber dem Kaufblock. */
.store-products-tiered .store-product-tiered > .descr {
  flex: 1 1 auto;
}

/* Warenkorb: Mengenfeld war ein eckiger Kasten neben dem runden Papierkorb. */
.basket .quantity-field,
.basket-item .quantity-field {
  border-radius: 12px;
  overflow: hidden;
}

.basket .quantity-field input[type="number"],
.basket-item .quantity-field input[type="number"] {
  border-radius: 12px;
}


/* Zaehler am Warenkorb-Symbol im Kopfbereich */
.agency-icon-action.open-basket {
  position: relative;
  overflow: visible;
}

.agency-basket-count {
  position: absolute;
  top: -4px;
  right: -4px;
  z-index: 2;
  display: grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  color: #1a1405;
  background: linear-gradient(180deg, #f7dc7a, #c9a227);
  border: 2px solid #f8f3e7;
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}

html[data-agency-theme="dark"] .agency-basket-count {
  border-color: #17130a;
}

.agency-basket-count[hidden] {
  display: none;
}


/* Ladeanzeige beim Kauf: Tebex zentriert den Spinner im ganzen Aktionsblock,
   dadurch schwebte er ueber dem Knopf statt darauf. Jetzt sitzt er mittig
   auf der Kaufgruppe - unabhaengig davon, wie hoch der Preisbereich ist. */
.agency-package-actions.updating::before {
  display: none !important;
}

.agency-package-actions.updating .agency-package-buy-group {
  position: relative;
}

.agency-package-actions.updating .agency-package-buy-group::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 11;
  margin: auto;
  width: 26px;
  height: 26px;
  border: 3px solid rgba(26, 20, 5, 0.28);
  border-top-color: #1a1405;
  border-radius: 50%;
  animation: agencyBuySpin 700ms linear infinite;
}

@keyframes agencyBuySpin {
  to {
    transform: rotate(360deg);
  }
}


/* Abo-Hinweis auf Produktseiten */
.agency-package-sub-hint {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 12px 14px;
  color: inherit;
  background: rgba(201, 162, 39, 0.09);
  border: 1px solid rgba(201, 162, 39, 0.28);
  border-radius: 14px;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.agency-package-sub-hint:hover {
  background: rgba(201, 162, 39, 0.16);
  border-color: rgba(201, 162, 39, 0.45);
}

.agency-package-sub-hint .agency-asset-icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
}

.agency-package-sub-hint-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.agency-package-sub-hint-copy strong {
  font-size: 0.86rem;
  font-weight: 800;
}

.agency-package-sub-hint-copy small {
  font-size: 0.74rem;
  opacity: 0.78;
}

.agency-package-sub-hint-arrow {
  margin-left: auto;
  color: var(--agency-gold, #c9a227);
  font-weight: 800;
}

/* Bewertungsblock auf Produktseiten */
.agency-package-reviews {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--agency-border, rgba(131, 103, 26, 0.17));
}


/* Partnerprogramm-Hinweis auf der Startseite */
.agency-partner-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  padding: 30px 34px;
  background: linear-gradient(135deg, rgba(201, 162, 39, 0.13), rgba(201, 162, 39, 0.04));
  border: 1px solid rgba(201, 162, 39, 0.3);
  border-radius: 22px;
}

.agency-partner-copy {
  flex: 1 1 380px;
  min-width: 0;
}

.agency-partner-copy h2 {
  margin: 6px 0 8px;
  font-size: clamp(1.3rem, 2.4vw, 1.85rem);
}

.agency-partner-copy p {
  margin: 0;
  max-width: 60ch;
  opacity: 0.82;
}

.agency-partner-cta {
  flex: 0 0 auto;
}

@media (max-width: 680px) {
  .agency-partner-card {
    padding: 22px;
  }

  .agency-partner-cta {
    width: 100%;
    justify-content: center;
  }
}


/* YouTube-Knopf neben Discord im Kopfbereich.

   Bewusst eine eigenstaendige Regelgruppe, statt die neun vorhandenen
   .agency-discord-Selektoren zu erweitern: diese Datei ist 190 kB gross, und
   ein verrutschter Selektor darin faellt erst viel spaeter auf. Die Werte
   unten sind die gemessenen des Discord-Knopfes, damit beide exakt gleich
   sitzen. Die vier Breakpoints sind ebenfalls dieselben.

   Das Symbol ist wie alle anderen eine CSS-Maske in currentcolor, also weder
   Bild noch Schriftglyphe, und faerbt sich mit dem Farbschema mit. */
.agency-icon-youtube {
  --agency-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20fill-rule%3D%22evenodd%22%20d%3D%22M23.5%206.19a3.02%203.02%200%200%200-2.12-2.14C19.5%203.55%2012%203.55%2012%203.55s-7.5%200-9.38.5A3.02%203.02%200%200%200%20.5%206.2C0%208.07%200%2012%200%2012s0%203.93.5%205.81a3.02%203.02%200%200%200%202.12%202.14c1.88.5%209.38.5%209.38.5s7.5%200%209.38-.5a3.02%203.02%200%200%200%202.12-2.14C24%2015.93%2024%2012%2024%2012s0-3.93-.5-5.81zM9.55%2015.57V8.43L15.82%2012l-6.27%203.57z%22%2F%3E%3C%2Fsvg%3E");
}

.agency-youtube {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(214, 71, 63, 0.25);
  border-radius: 999px;
  color: rgb(178, 58, 52);
  background: rgba(214, 71, 63, 0.09);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: transform 0.16s, color 0.16s, border-color 0.16s, background 0.16s;
}

.agency-youtube:hover {
  transform: translateY(-1px);
  color: var(--agency-ink);
  border-color: rgba(201, 162, 39, 0.42);
  background: rgba(201, 162, 39, 0.1);
}

html[data-agency-theme="dark"] .agency-youtube {
  color: rgb(232, 112, 104);
  border-color: rgba(232, 112, 104, 0.26);
  background-color: rgba(27, 23, 16, 0.82);
}

html[data-agency-theme="dark"] .agency-youtube:hover {
  color: var(--agency-ink);
  border-color: rgba(201, 162, 39, 0.42);
  background: rgba(201, 162, 39, 0.1);
}

.agency-header.has-nav-collision .agency-youtube {
  display: none;
}

@media (max-width: 1440px) {
  .agency-youtube span:last-child:not(.agency-asset-icon) {
    display: none;
  }

  .agency-youtube {
    width: 36px;
    padding: 0;
  }
}

/* Discord und YouTube liegen jetzt links neben der Marke. Die Leiste ist ein
   Raster aus drei gleich breiten Spalten: links standen rund 350px leer,
   rechts war es randvoll. Die Gruppe fasst Marke und die beiden Verweise zu
   einem Block zusammen. */
/* Nur die Symbole, keine Beschriftung. Beide Knoepfe sind dadurch rund und
   gleich gross wie die Icon-Knoepfe rechts. Der Name steht als aria-label am
   Link, damit Screenreader weiterhin wissen, wohin er fuehrt. */
.agency-discord,
.agency-youtube {
  width: 36px;
  padding: 0;
}

.agency-header-brand-group {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* Ab hier wird es eng: die beiden Verweise weichen, damit Marke und
   Navigation Platz behalten. Dieselben Grenzen wie vorher, nur am neuen Ort. */
@media (max-width: 1100px) {
  .agency-header-brand-group .agency-discord,
  .agency-header-brand-group .agency-youtube {
    display: none;
  }
}