/* Screems — site styles. Layout is inline in the HTML for easy editing; this file holds resets, hover/focus states and animations. */
html, body { margin: 0; padding: 0; background: #f4f6f7; }
* { box-sizing: border-box; }
body { -webkit-font-smoothing: antialiased; }
a { color: oklch(0.52 0.20 258); text-decoration: none; }
a:hover { color: oklch(0.42 0.16 258); }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
body { -webkit-font-smoothing: antialiased; }
input::placeholder, textarea::placeholder { color: rgba(255,255,255,0.45); }
.role-btn.is-active { background: rgba(255,255,255,0.94) !important; color: oklch(0.22 0.03 250) !important; }
#video-thumb { position: absolute; inset: 0; }

/* Animations */
@keyframes marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes pulse { 0%,100% { opacity: 0.35; transform: scale(1); } 50% { opacity: 0.9; transform: scale(1.35); } }
@keyframes logoPulse { 0%,100% { opacity: 1; filter: invert(1) brightness(2) drop-shadow(0 0 0 rgba(255,255,255,0)); } 50% { opacity: 0.82; filter: invert(1) brightness(2.3) drop-shadow(0 0 10px rgba(255,255,255,0.5)); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes barGrow0 { 0%,100% { transform: scaleY(0.7); } 50% { transform: scaleY(1); } }
@keyframes barGrow1 { 0%,100% { transform: scaleY(0.72); } 50% { transform: scaleY(1); } }
@keyframes barGrow2 { 0%,100% { transform: scaleY(0.78); } 50% { transform: scaleY(1); } }
@keyframes barGrow3 { 0%,100% { transform: scaleY(0.84); } 50% { transform: scaleY(1); } }
@keyframes wordCycle { 0%,10% { opacity: 0; transform: translateY(14px); } 18%,85% { opacity: 1; transform: translateY(0); } 95%,100% { opacity: 0; transform: translateY(-14px); } }

/* Hover / focus states (generated from the design) */
.ui-1:hover { background: oklch(0.58 0.22 258) !important; color: #fff !important; }
.ui-2:hover { background: rgba(255,255,255,0.9) !important; color: oklch(0.22 0.03 250) !important; }
.ui-3:hover { background: rgba(255,255,255,0.9) !important; color: oklch(0.22 0.03 250) !important; }
.ui-4:hover { background: rgba(255,255,255,0.9) !important; color: oklch(0.22 0.03 250) !important; }
.ui-5:hover { background: rgba(255,255,255,0.9) !important; color: oklch(0.22 0.03 250) !important; }
.ui-6:hover { background: rgba(255,255,255,0.9) !important; color: oklch(0.22 0.03 250) !important; }
.ui-7:hover { background: rgba(255,255,255,0.9) !important; color: oklch(0.22 0.03 250) !important; }
.ui-8:hover { background: rgba(255,255,255,0.9) !important; color: oklch(0.22 0.03 250) !important; }
.ui-9:hover { background: oklch(0.95 0.02 240) !important; }
.ui-10:hover { transform: translateY(-5px) !important; box-shadow: 0 18px 34px -18px oklch(0.45 0.18 258 / 0.35) !important; }
.ui-11:hover { transform: translateY(-5px) !important; box-shadow: 0 18px 34px -18px oklch(0.45 0.18 258 / 0.35) !important; }
.ui-12:hover { transform: translateY(-5px) !important; box-shadow: 0 18px 34px -18px oklch(0.45 0.18 258 / 0.35) !important; }
.ui-13:hover { transform: translateY(-5px) !important; box-shadow: 0 18px 34px -18px oklch(0.45 0.18 258 / 0.35) !important; }
.ui-14:hover { transform: translateY(-5px) !important; box-shadow: 0 18px 34px -18px oklch(0.45 0.18 258 / 0.35) !important; }
.ui-15:hover { transform: translateY(-5px) !important; box-shadow: 0 18px 34px -18px oklch(0.45 0.18 258 / 0.35) !important; }
.ui-16:hover { transform: translateY(-5px) !important; box-shadow: 0 18px 34px -18px oklch(0.45 0.18 258 / 0.35) !important; }
.ui-17:hover { transform: translateY(-5px) !important; box-shadow: 0 18px 34px -18px oklch(0.45 0.18 258 / 0.35) !important; }
.ui-18:hover { transform: translateY(-5px) !important; box-shadow: 0 18px 34px -18px oklch(0.45 0.18 258 / 0.35) !important; }
.ui-19:hover { transform: translateY(-5px) !important; box-shadow: 0 18px 34px -18px oklch(0.45 0.18 258 / 0.35) !important; }
.ui-20:hover { transform: translateY(-5px) !important; box-shadow: 0 18px 34px -18px oklch(0.45 0.18 258 / 0.35) !important; }
.ui-21:hover { background: oklch(0.94 0.02 240) !important; }
.ui-22:focus { border-color: oklch(0.66 0.19 145) !important; }
.ui-23:focus { border-color: oklch(0.66 0.19 145) !important; }
.ui-24:focus { border-color: oklch(0.66 0.19 145) !important; }
.ui-25:focus { border-color: oklch(0.66 0.19 145) !important; }
.ui-26:hover { background: rgba(255,255,255,0.16) !important; }
.ui-27:hover { background: rgba(255,255,255,0.16) !important; }
.ui-28:hover { background: rgba(255,255,255,0.16) !important; }
.ui-29:focus { border-color: oklch(0.66 0.19 145) !important; }
.ui-30:hover { background: oklch(0.48 0.20 258) !important; transform: translateY(-2px) !important; }
.ui-31:hover { color: #fff !important; }
.ui-32:hover { color: #fff !important; }
.ui-33:hover { color: #fff !important; }
.ui-34:hover { color: #fff !important; }
.ui-35:hover { color: #fff !important; }
.ui-36:hover { color: #fff !important; }
.ui-37:hover { color: #fff !important; }
.ui-38:hover { color: #fff !important; }
.ui-39:hover { color: #fff !important; }
.ui-40:hover { color: #fff !important; }
.ui-41:hover { color: #fff !important; }
.ui-42:hover { color: #fff !important; }
.ui-43:hover { color: #fff !important; }
.ui-44:hover { color: #fff !important; }
.ui-45:hover { color: #fff !important; }
.ui-46:hover { transform: translateX(4px) !important; }
.ui-47:hover { transform: translateX(4px) !important; }
.ui-48:hover { transform: translateX(4px) !important; }
.ui-49:hover { transform: translateX(4px) !important; }
.ui-50:hover { transform: translateX(4px) !important; }
.ui-51:hover { transform: translateX(4px) !important; }
.ui-52:hover { transform: translateX(4px) !important; }
.ui-53:hover { background: oklch(0.58 0.22 258) !important; color: #fff !important; }
.ui-54:hover { background: oklch(0.58 0.22 258) !important; color: #fff !important; }

/* Responsive */
@media (max-width: 1024px) {
  [style*="grid-template-columns: repeat(5, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns: repeat(6, 1fr)"] { grid-template-columns: repeat(3, 1fr) !important; }
  [style*="grid-template-columns: 1.25fr 0.9fr 0.9fr"] { grid-template-columns: 1fr !important; }
}
@media (max-width: 760px) {
  section[style*="grid-template-columns"], div[style*="grid-template-columns: 1fr 1fr"], div[style*="grid-template-columns: 0.9fr 1.1fr"], div[style*="grid-template-columns: 1.05fr 0.95fr"], div[style*="grid-template-columns: 0.85fr 1.15fr"], div[style*="grid-template-columns: 1.1fr 0.9fr"], div[style*="grid-template-columns: 1.3fr 1fr 1fr 1fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: 1fr !important; }
  [style*="padding: 56px 48px"], [style*="padding: 52px 48px"] { padding: 36px 24px !important; }
  nav [style*="justify-content: center"] > div { max-width: 100%; }
}