* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 18% 20%, rgba(93, 63, 211, 0.28), transparent 28%),
    radial-gradient(circle at 82% 12%, rgba(25, 162, 255, 0.22), transparent 22%),
    radial-gradient(circle at 12% 82%, rgba(132, 56, 255, 0.18), transparent 20%),
    linear-gradient(135deg, #05060d 0%, #0b1022 45%, #0d1b3f 100%);
  background-color: #05060d;
  color: #e8ecff;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: min(24px, 6vw);
  position: relative;
  overflow-x: hidden;
}

.bg-orbs {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.bg-orbs .orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(18px);
  opacity: 0.9;
  mix-blend-mode: screen;
  animation: float 16s ease-in-out infinite alternate;
  box-shadow:
    0 0 40px rgba(255, 255, 255, 0.12),
    0 0 90px rgba(132, 56, 255, 0.25);
}

.orb-1 { width: 260px; height: 260px; background: radial-gradient(circle, rgba(132, 56, 255, 0.65), rgba(60, 24, 121, 0.18)); top: 6%; left: 8%; animation-duration: 18s; }
.orb-2 { width: 210px; height: 210px; background: radial-gradient(circle, rgba(25, 162, 255, 0.55), rgba(8, 71, 122, 0.12)); top: 16%; right: 10%; animation-duration: 14s; animation-delay: 1s; }
.orb-3 { width: 320px; height: 320px; background: radial-gradient(circle, rgba(98, 63, 211, 0.55), rgba(27, 18, 58, 0.1)); bottom: -4%; left: -2%; animation-duration: 20s; animation-delay: 2s; }
.orb-4 { width: 240px; height: 240px; background: radial-gradient(circle, rgba(30, 144, 255, 0.5), rgba(13, 23, 42, 0.1)); bottom: 12%; right: 12%; animation-duration: 17s; animation-delay: 0.5s; }
.orb-5 { width: 180px; height: 180px; background: radial-gradient(circle, rgba(170, 102, 255, 0.6), rgba(62, 35, 105, 0.12)); top: 44%; left: 52%; animation-duration: 15s; animation-delay: 1.5s; }

@keyframes float {
  0%   { transform: translate3d(-8vw, -6vh, 0) scale(0.95); }
  35%  { transform: translate3d(9vw, 8vh, 0) scale(1.1); }
  70%  { transform: translate3d(-6vw, 12vh, 0) scale(1.02); }
  100% { transform: translate3d(12vw, -6vh, 0) scale(0.98); }
}

.float-icons {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.float-icons .icon {
  position: absolute;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: #ffffff;
  -webkit-mask: var(--icon-mask) center/64% no-repeat;
  mask: var(--icon-mask) center/64% no-repeat;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 24px rgba(255, 255, 255, 0.18);
  animation: drift 18s ease-in-out infinite;
  mix-blend-mode: screen;
  opacity: 0.9;
}

.icon-tt { --icon-mask: url("data:image/svg+xml;base64,PHN2ZyByb2xlPSJpbWciIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+VGlrVG9rPC90aXRsZT48cGF0aCBmaWxsPSJibGFjayIgZD0iTTEyLjUyNS4wMmMxLjMxLS4wMiAyLjYxLS4wMSAzLjkxLS4wMi4wOCAxLjUzLjYzIDMuMDkgMS43NSA0LjE3IDEuMTIgMS4xMSAyLjcgMS42MiA0LjI0IDEuNzl2NC4wM2MtMS40NC0uMDUtMi44OS0uMzUtNC4yLS45Ny0uNTctLjI2LTEuMS0uNTktMS42Mi0uOTMtLjAxIDIuOTIuMDEgNS44NC0uMDIgOC43NS0uMDggMS40LS41NCAyLjc5LTEuMzUgMy45NC0xLjMxIDEuOTItMy41OCAzLjE3LTUuOTEgMy4yMS0xLjQzLjA4LTIuODYtLjMxLTQuMDgtMS4wMy0yLjAyLTEuMTktMy40NC0zLjM3LTMuNjUtNS43MS0uMDItLjUtLjAzLTEtLjAxLTEuNDkuMTgtMS45IDEuMTItMy43MiAyLjU4LTQuOTYgMS42Ni0xLjQ0IDMuOTgtMi4xMyA2LjE1LTEuNzIuMDIgMS40OC0uMDQgMi45Ni0uMDQgNC40NC0uOTktLjMyLTIuMTUtLjIzLTMuMDIuMzctLjYzLjQxLTEuMTEgMS4wNC0xLjM2IDEuNzUtLjIxLjUxLS4xNSAxLjA3LS4xNCAxLjYxLjI0IDEuNjQgMS44MiAzLjAyIDMuNSAyLjg3IDEuMTItLjAxIDIuMTktLjY2IDIuNzctMS42MS4xOS0uMzMuNC0uNjcuNDEtMS4wNi4xLTEuNzkuMDYtMy41Ny4wNy01LjM2LjAxLTQuMDMtLjAxLTguMDUuMDItMTIuMDd6Ii8+PC9zdmc+"); top: 20%; left: 8%; animation-duration: 17s; }
.icon-ig { --icon-mask: url("data:image/svg+xml;base64,PHN2ZyByb2xlPSJpbWciIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+SW5zdGFncmFtPC90aXRsZT48cGF0aCBmaWxsPSJibGFjayIgZD0iTTcuMDMwMS4wODRjLTEuMjc2OC4wNjAyLTIuMTQ4Ny4yNjQtMi45MTEuNTYzNC0uNzg4OC4zMDc1LTEuNDU3NS43Mi0yLjEyMjggMS4zODc3LS42NjUyLjY2NzctMS4wNzUgMS4zMzY4LTEuMzgwMiAyLjEyNy0uMjk1NC43NjM4LS40OTU2IDEuNjM2NS0uNTUyIDIuOTE0LS4wNTY0IDEuMjc3NS0uMDY4OSAxLjY4ODItLjA2MjYgNC45NDcuMDA2MiAzLjI1ODYuMDIwNiAzLjY2NzEuMDgyNSA0Ljk0NzMuMDYxIDEuMjc2NS4yNjQgMi4xNDgyLjU2MzUgMi45MTA3LjMwOC43ODg5LjcyIDEuNDU3MyAxLjM4OCAyLjEyMjguNjY3OS42NjU1IDEuMzM2NSAxLjA3NDMgMi4xMjg1IDEuMzguNzYzMi4yOTUgMS42MzYxLjQ5NjEgMi45MTM0LjU1MiAxLjI3NzMuMDU2IDEuNjg4NC4wNjkgNC45NDYyLjA2MjcgMy4yNTc4LS4wMDYyIDMuNjY4LS4wMjA3IDQuOTQ3OC0uMDgxNCAxLjI4LS4wNjA3IDIuMTQ3LS4yNjUyIDIuOTA5OC0uNTYzMy43ODg5LS4zMDg2IDEuNDU3OC0uNzIgMi4xMjI4LTEuMzg4MS42NjUtLjY2ODIgMS4wNzQ1LTEuMzM3OCAxLjM3OTUtMi4xMjg0LjI5NTctLjc2MzIuNDk2Ni0xLjYzNi41NTItMi45MTI0LjA1Ni0xLjI4MDkuMDY5Mi0xLjY4OTguMDYzLTQuOTQ4LS4wMDYzLTMuMjU4My0uMDIxLTMuNjY2OC0uMDgxNy00Ljk0NjUtLjA2MDctMS4yNzk3LS4yNjQtMi4xNDg3LS41NjMzLTIuOTExNy0uMzA4NC0uNzg4OS0uNzItMS40NTY4LTEuMzg3Ni0yLjEyMjhDMjEuMjk4MiAxLjMzIDIwLjYyOC45MjA4IDE5LjgzNzguNjE2NSAxOS4wNzQuMzIxIDE4LjIwMTcuMTE5NyAxNi45MjQ0LjA2NDUgMTUuNjQ3MS4wMDkzIDE1LjIzNi0uMDA1IDExLjk3Ny4wMDE0IDguNzE4LjAwNzYgOC4zMS4wMjE1IDcuMDMwMS4wODM5bS4xNDAyIDIxLjY5MzJjLTEuMTctLjA1MDktMS44MDUzLS4yNDUzLTIuMjI4Ny0uNDA4LS41NjA2LS4yMTYtLjk2LS40NzcxLTEuMzgxOS0uODk1LS40MjItLjQxNzgtLjY4MTEtLjgxODYtLjktMS4zNzgtLjE2NDQtLjQyMzQtLjM2MjQtMS4wNTgtLjQxNzEtMi4yMjgtLjA1OTUtMS4yNjQ1LS4wNzItMS42NDQyLS4wNzktNC44NDgtLjAwNy0zLjIwMzcuMDA1My0zLjU4My4wNjA3LTQuODQ4LjA1LTEuMTY5LjI0NTYtMS44MDUuNDA4LTIuMjI4Mi4yMTYtLjU2MTMuNDc2Mi0uOTYuODk1LTEuMzgxNi40MTg4LS40MjE3LjgxODQtLjY4MTQgMS4zNzgzLS45MDAzLjQyMy0uMTY1MSAxLjA1NzUtLjM2MTQgMi4yMjctLjQxNzEgMS4yNjU1LS4wNiAxLjY0NDctLjA3MiA0Ljg0OC0uMDc5IDMuMjAzMy0uMDA3IDMuNTgzNS4wMDUgNC44NDk1LjA2MDggMS4xNjkuMDUwOCAxLjgwNTMuMjQ0NSAyLjIyOC40MDguNTYwOC4yMTYuOTYuNDc1NCAxLjM4MTYuODk1LjQyMTcuNDE5NC42ODE2LjgxNzYuOTAwNSAxLjM3ODcuMTY1My40MjE3LjM2MTcgMS4wNTYuNDE2OSAyLjIyNjMuMDYwMiAxLjI2NTUuMDczOSAxLjY0NS4wNzk2IDQuODQ4LjAwNTggMy4yMDMtLjAwNTUgMy41ODM0LS4wNjEgNC44NDgtLjA1MSAxLjE3LS4yNDUgMS44MDU1LS40MDggMi4yMjk0LS4yMTYuNTYwNC0uNDc2My45Ni0uODk1NCAxLjM4MTQtLjQxOS40MjE1LS44MTgxLjY4MTEtMS4zNzgzLjktLjQyMjQuMTY0OS0xLjA1NzcuMzYxNy0yLjIyNjIuNDE3NC0xLjI2NTYuMDU5NS0xLjY0NDguMDcyLTQuODQ5My4wNzktMy4yMDQ1LjAwNy0zLjU4MjUtLjAwNi00Ljg0OC0uMDYwOE0xNi45NTMgNS41ODY0QTEuNDQgMS40NCAwIDEgMCAxOC4zOSA0LjE0NGExLjQ0IDEuNDQgMCAwIDAtMS40MzcgMS40NDI0TTUuODM4NSAxMi4wMTJjLjAwNjcgMy40MDMyIDIuNzcwNiA2LjE1NTcgNi4xNzMgNi4xNDkzIDMuNDAyNi0uMDA2NSA2LjE1Ny0yLjc3MDEgNi4xNTA2LTYuMTczMy0uMDA2NS0zLjQwMzItMi43NzEtNi4xNTY1LTYuMTc0LTYuMTQ5OC0zLjQwMy4wMDY3LTYuMTU2IDIuNzcxLTYuMTQ5NiA2LjE3MzhNOCAxMi4wMDc3YTQgNCAwIDEgMSA0LjAwOCAzLjk5MjFBMy45OTk2IDMuOTk5NiAwIDAgMSA4IDEyLjAwNzciLz48L3N2Zz4="); top: 16%; left: 14%; animation-duration: 20s; animation-delay: 1s; }
.icon-fb { --icon-mask: url("data:image/svg+xml;base64,PHN2ZyByb2xlPSJpbWciIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+RmFjZWJvb2s8L3RpdGxlPjxwYXRoIGZpbGw9ImJsYWNrIiBkPSJNOS4xMDEgMjMuNjkxdi03Ljk4SDYuNjI3di0zLjY2N2gyLjQ3NHYtMS41OGMwLTQuMDg1IDEuODQ4LTUuOTc4IDUuODU4LTUuOTc4LjQwMSAwIC45NTUuMDQyIDEuNDY4LjEwM2E4LjY4IDguNjggMCAwIDEgMS4xNDEuMTk1djMuMzI1YTguNjIzIDguNjIzIDAgMCAwLS42NTMtLjAzNiAyNi44MDUgMjYuODA1IDAgMCAwLS43MzMtLjAwOWMtLjcwNyAwLTEuMjU5LjA5Ni0xLjY3NS4zMDlhMS42ODYgMS42ODYgMCAwIDAtLjY3OS42MjJjLS4yNTguNDItLjM3NC45OTUtLjM3NCAxLjc1MnYxLjI5N2gzLjkxOWwtLjM4NiAyLjEwMy0uMjg3IDEuNTY0aC0zLjI0NnY4LjI0NUMxOS4zOTYgMjMuMjM4IDI0IDE4LjE3OSAyNCAxMi4wNDRjMC02LjYyNy01LjM3My0xMi0xMi0xMnMtMTIgNS4zNzMtMTIgMTJjMCA1LjYyOCAzLjg3NCAxMC4zNSA5LjEwMSAxMS42NDdaIi8+PC9zdmc+"); top: 30%; right: 8%; animation-duration: 19s; animation-delay: 0.8s; }
.icon-x { --icon-mask: url("data:image/svg+xml;base64,PHN2ZyByb2xlPSJpbWciIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+WDwvdGl0bGU+PHBhdGggZmlsbD0iYmxhY2siIGQ9Ik0xNC4yMzQgMTAuMTYyIDIyLjk3NyAwaC0yLjA3MmwtNy41OTEgOC44MjRMNy4yNTEgMEguMjU4bDkuMTY4IDEzLjM0M0wuMjU4IDI0SDIuMzNsOC4wMTYtOS4zMThMMTYuNzQ5IDI0aDYuOTkzem0tMi44MzcgMy4yOTktLjkyOS0xLjMyOUwzLjA3NiAxLjU2aDMuMTgybDUuOTY1IDguNTMyLjkyOSAxLjMyOSA3Ljc1NCAxMS4wOWgtMy4xODJ6Ii8+PC9zdmc+"); top: 10%; right: 16%; animation-duration: 18s; animation-delay: 1.4s; }
.icon-yt { --icon-mask: url("data:image/svg+xml;base64,PHN2ZyByb2xlPSJpbWciIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+WW91VHViZTwvdGl0bGU+PHBhdGggZmlsbD0iYmxhY2siIGQ9Ik0yMy40OTggNi4xODZhMy4wMTYgMy4wMTYgMCAwIDAtMi4xMjItMi4xMzZDMTkuNTA1IDMuNTQ1IDEyIDMuNTQ1IDEyIDMuNTQ1cy03LjUwNSAwLTkuMzc3LjUwNUEzLjAxNyAzLjAxNyAwIDAgMCAuNTAyIDYuMTg2QzAgOC4wNyAwIDEyIDAgMTJzMCAzLjkzLjUwMiA1LjgxNGEzLjAxNiAzLjAxNiAwIDAgMCAyLjEyMiAyLjEzNmMxLjg3MS41MDUgOS4zNzYuNTA1IDkuMzc2LjUwNXM3LjUwNSAwIDkuMzc3LS41MDVhMy4wMTUgMy4wMTUgMCAwIDAgMi4xMjItMi4xMzZDMjQgMTUuOTMgMjQgMTIgMjQgMTJzMC0zLjkzLS41MDItNS44MTR6TTkuNTQ1IDE1LjU2OFY4LjQzMkwxNS44MTggMTJsLTYuMjczIDMuNTY4eiIvPjwvc3ZnPg=="); bottom: 22%; left: 6%; animation-duration: 16s; animation-delay: 2s; }
.icon-wp { --icon-mask: url("data:image/svg+xml;base64,PHN2ZyByb2xlPSJpbWciIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+V2hhdHNBcHA8L3RpdGxlPjxwYXRoIGZpbGw9ImJsYWNrIiBkPSJNMTcuNDcyIDE0LjM4MmMtLjI5Ny0uMTQ5LTEuNzU4LS44NjctMi4wMy0uOTY3LS4yNzMtLjA5OS0uNDcxLS4xNDgtLjY3LjE1LS4xOTcuMjk3LS43NjcuOTY2LS45NCAxLjE2NC0uMTczLjE5OS0uMzQ3LjIyMy0uNjQ0LjA3NS0uMjk3LS4xNS0xLjI1NS0uNDYzLTIuMzktMS40NzUtLjg4My0uNzg4LTEuNDgtMS43NjEtMS42NTMtMi4wNTktLjE3My0uMjk3LS4wMTgtLjQ1OC4xMy0uNjA2LjEzNC0uMTMzLjI5OC0uMzQ3LjQ0Ni0uNTIuMTQ5LS4xNzQuMTk4LS4yOTguMjk4LS40OTcuMDk5LS4xOTguMDUtLjM3MS0uMDI1LS41Mi0uMDc1LS4xNDktLjY2OS0xLjYxMi0uOTE2LTIuMjA3LS4yNDItLjU3OS0uNDg3LS41LS42NjktLjUxLS4xNzMtLjAwOC0uMzcxLS4wMS0uNTctLjAxLS4xOTggMC0uNTIuMDc0LS43OTIuMzcyLS4yNzIuMjk3LTEuMDQgMS4wMTYtMS4wNCAyLjQ3OSAwIDEuNDYyIDEuMDY1IDIuODc1IDEuMjEzIDMuMDc0LjE0OS4xOTggMi4wOTYgMy4yIDUuMDc3IDQuNDg3LjcwOS4zMDYgMS4yNjIuNDg5IDEuNjk0LjYyNS43MTIuMjI3IDEuMzYuMTk1IDEuODcxLjExOC41NzEtLjA4NSAxLjc1OC0uNzE5IDIuMDA2LTEuNDEzLjI0OC0uNjk0LjI0OC0xLjI4OS4xNzMtMS40MTMtLjA3NC0uMTI0LS4yNzItLjE5OC0uNTctLjM0N20tNS40MjEgNy40MDNoLS4wMDRhOS44NyA5Ljg3IDAgMDEtNS4wMzEtMS4zNzhsLS4zNjEtLjIxNC0zLjc0MS45ODIuOTk4LTMuNjQ4LS4yMzUtLjM3NGE5Ljg2IDkuODYgMCAwMS0xLjUxLTUuMjZjLjAwMS01LjQ1IDQuNDM2LTkuODg0IDkuODg4LTkuODg0IDIuNjQgMCA1LjEyMiAxLjAzIDYuOTg4IDIuODk4YTkuODI1IDkuODI1IDAgMDEyLjg5MyA2Ljk5NGMtLjAwMyA1LjQ1LTQuNDM3IDkuODg0LTkuODg1IDkuODg0bTguNDEzLTE4LjI5N0ExMS44MTUgMTEuODE1IDAgMDAxMi4wNSAwQzUuNDk1IDAgLjE2IDUuMzM1LjE1NyAxMS44OTJjMCAyLjA5Ni41NDcgNC4xNDIgMS41ODggNS45NDVMLjA1NyAyNGw2LjMwNS0xLjY1NGExMS44ODIgMTEuODgyIDAgMDA1LjY4MyAxLjQ0OGguMDA1YzYuNTU0IDAgMTEuODktNS4zMzUgMTEuODkzLTExLjg5M2ExMS44MjEgMTEuODIxIDAgMDAtMy40OC04LjQxM1oiLz48L3N2Zz4="); bottom: 18%; left: 16%; animation-duration: 15s; animation-delay: 1s; }
.icon-sc { --icon-mask: url("data:image/svg+xml;base64,PHN2ZyByb2xlPSJpbWciIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+U25hcGNoYXQ8L3RpdGxlPjxwYXRoIGZpbGw9ImJsYWNrIiBkPSJNMTIuMjA2Ljc5M2MuOTkgMCA0LjM0Ny4yNzYgNS45MyAzLjgyMS41MjkgMS4xOTMuNDAzIDMuMjE5LjI5OSA0Ljg0N2wtLjAwMy4wNmMtLjAxMi4xOC0uMDIyLjM0NS0uMDMuNTEuMDc1LjA0NS4yMDMuMDkuNDAxLjA5LjMtLjAxNi42NTktLjEyIDEuMDMzLS4zMDEuMTY1LS4wODguMzQ0LS4xMDQuNDY0LS4xMDQuMTgyIDAgLjM1OS4wMjkuNTA5LjA5LjQ1LjE0OS43MzQuNDc5LjczNC44MzguMDE1LjQ0OS0uMzkuODM5LTEuMjEzIDEuMTY4LS4wODkuMDI5LS4yMDkuMDc1LS4zNDQuMTE5LS40NS4xMzUtMS4xMzkuMzYtMS4zMzMuODEtLjA5LjIyNC0uMDYxLjUyNC4xMi44NjhsLjAxNS4wMTVjLjA2LjEzNiAxLjUyNiAzLjQ3NSA0Ljc5MSA0LjAxNC4yNTUuMDQ0LjQzNS4yNy40Mi41MDkgMCAuMDc1LS4wMTUuMTQ5LS4wNDUuMjI1LS4yNC41NjktMS4yNzMuOTg4LTMuMTQ2IDEuMjcxLS4wNTkuMDkxLS4xMi4zNzUtLjE2NC41Ny0uMDI5LjE3OS0uMDc0LjM2LS4xMzQuNTUzLS4wNzYuMjcxLS4yNy40MDUtLjU1NS40MDVoLS4wM2MtLjEzNSAwLS4zMTMtLjAzMS0uNTM4LS4wNzQtLjM2LS4wNzUtLjc2NS0uMTM1LTEuMjczLS4xMzUtLjMgMC0uNTk5LjAxNS0uOTEzLjA3NC0uNi4xMDQtMS4xMjMuNDY0LTEuNzIzLjg4NC0uODUzLjU5OS0xLjgyNiAxLjI4OC0zLjI5NCAxLjI4OC0uMDYgMC0uMTE5LS4wMTUtLjE4LS4wMTVoLS4xNDljLTEuNDY4IDAtMi40MjctLjY3NS0zLjI3OS0xLjI4OC0uNTk5LS40Mi0xLjEwNy0uNzc5LTEuNzA3LS44ODQtLjMxNC0uMDQ1LS42MjktLjA3NC0uOTI4LS4wNzQtLjU0IDAtLjk1OC4wODktMS4yNzIuMTQ5LS4yMTEuMDQzLS4zOTEuMDc0LS41NC4wNzQtLjM3NCAwLS41MjMtLjIyNC0uNTgzLS40Mi0uMDYxLS4xOTItLjA5LS4zODktLjEzNS0uNTY3LS4wNDYtLjE4MS0uMTA1LS40OTQtLjE2Ni0uNTctMS45MTgtLjIyMi0yLjk1LS42NDItMy4xODktMS4yMjYtLjAzMS0uMDYzLS4wNTItLjE1LS4wNTUtLjIyNS0uMDE1LS4yNDMuMTY1LS40NjUuNDItLjUwOSAzLjI2NC0uNTQgNC43My0zLjg3OSA0Ljc5MS00LjAybC4wMTYtLjAyOWMuMTgtLjM0NS4yMjQtLjY0NS4xMTktLjg2OS0uMTk1LS40MzQtLjg4NC0uNjU4LTEuMzMyLS44MDktLjEyMS0uMDI5LS4yNC0uMDc0LS4zNDYtLjExOS0xLjEwNy0uNDM1LTEuMjU3LS45My0xLjE5Ny0xLjI3My4wOS0uNDc5LjY3NC0uNzkzIDEuMTY4LS43OTMuMTQ2IDAgLjI3LjAyOS4zODMuMDc0LjQyLjE5NC43ODkuMyAxLjEwNC4zLjIzNCAwIC4zODQtLjA2LjQ2NS0uMTA1bC0uMDQ2LS41NjljLS4wOTgtMS42MjYtLjIyNS0zLjY1MS4zMDctNC44MzdDNy4zOTIgMS4wNzcgMTAuNzM5LjgwNyAxMS43MjcuODA3bC40MTktLjAxNWguMDZ6Ii8+PC9zdmc+"); bottom: 12%; right: 12%; animation-duration: 17s; animation-delay: 0.6s; }
.icon-kw { --icon-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHJlY3QgZmlsbD0iYmxhY2siIHg9IjIiIHk9IjIiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgcng9IjUiLz48cGF0aCBmaWxsPSJibGFjayIgZD0iTTkgNmgyLjJ2NS4xTDE1IDZoMi4zbC00LjIgNSA0LjQgN0gxNWwtMy4zLTUuMi0xLjUgMS43VjE4SDl6Ii8+PC9zdmc+"); top: 44%; right: 4%; animation-duration: 19s; animation-delay: 1.8s; }

@keyframes drift {
  0%   { transform: translate3d(-4vw, -4vh, 0) rotate(-6deg) scale(1); opacity: 0.92; }
  30%  { transform: translate3d(6vw, 6vh, 0) rotate(4deg) scale(1.04); opacity: 1; }
  60%  { transform: translate3d(-6vw, 12vh, 0) rotate(-2deg) scale(0.98); opacity: 0.95; }
  100% { transform: translate3d(10vw, -8vh, 0) rotate(5deg) scale(1.02); opacity: 1; }
}

.convite-card {
  background: linear-gradient(145deg, rgba(14, 18, 39, 0.9), rgba(12, 17, 32, 0.92));
  border-radius: 18px;
  border: 1px solid rgba(115, 130, 255, 0.22);
  box-shadow:
    0 24px 50px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.02);
  max-width: 900px;
  width: 100%;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  z-index: 2;
  backdrop-filter: blur(6px);
}

h1 {
  text-align: center;
  font-size: clamp(1.6rem, 2.6vw + 1rem, 2.4rem);
  color: #c3b9ff;
  letter-spacing: 0.4px;
}

.descricao {
  text-align: center;
  font-size: clamp(0.98rem, 1vw + 0.6rem, 1.1rem);
  line-height: 1.6;
  color: #c9d3ff;
}

.imagem-evento {
  width: 100%;
  height: auto;
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(122, 143, 255, 0.2);
}

.informacoes {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 14px;
  padding: 16px 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  font-size: 1rem;
  color: #e6e8ff;
  border: 1px solid rgba(115, 130, 255, 0.18);
}

.mapa {
  width: 100%;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.25);
  position: relative;
  border: 1px solid rgba(115, 130, 255, 0.18);
}

.mapa iframe {
  width: 100%;
  height: clamp(240px, 45vw, 360px);
  border: 0;
  position: relative;
  z-index: 1;
  pointer-events: none;
  filter: saturate(0.92) contrast(1.05);
}

.mapa .mapa-link {
  position: absolute;
  inset: 0;
  z-index: 2;
  text-indent: -9999px;
}

.mapa .mapa-link:focus-visible {
  outline: 3px solid #7a5bff;
  outline-offset: 4px;
}

.mapa-cta {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.mapa-cta .rota-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  color: #e8ecff;
  text-decoration: none;
  background: linear-gradient(135deg, rgba(122, 91, 255, 0.18), rgba(80, 189, 255, 0.22));
  border: 1px solid rgba(115, 130, 255, 0.28);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22);
  transition: transform 0.1s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.mapa-cta .rota-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.28);
  border-color: rgba(122, 91, 255, 0.4);
}

.mapa-cta .rota-btn:active {
  transform: translateY(0);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.22);
}

.formulario {
  display: grid;
  gap: 10px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 14px;
  border: 1px solid rgba(115, 130, 255, 0.16);
  padding: 16px 18px;
}

.formulario label {
  font-size: 0.95rem;
  color: #d7ddff;
  letter-spacing: 0.1px;
}

.convite-card .formulario input {
  width: 100%;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid rgba(122, 143, 255, 0.26);
  background: #0b1022 !important;
  color-scheme: dark;
  color: #eaf0ff !important;
  font-size: 1rem;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.convite-card .formulario input::placeholder {
  color: #9ca7c7 !important;
}

.convite-card .formulario input:focus {
  outline: none;
  border-color: #7a5bff;
  box-shadow: 0 0 0 2px rgba(122, 91, 255, 0.25);
}

.convite-card .formulario input:-webkit-autofill,
.convite-card .formulario input:-webkit-autofill:hover,
.convite-card .formulario input:-webkit-autofill:focus {
  box-shadow: 0 0 0 1000px #0b1022 inset;
  -webkit-text-fill-color: #eaf0ff !important;
  transition: background-color 9999s ease-out;
}

button#btnConfirmar {
  width: 100%;
  padding: 14px 18px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #25d366, #20b957);
  color: #f7fff9;
  font-size: clamp(1rem, 1vw + 0.8rem, 1.1rem);
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.12s ease, background 0.12s ease;
  box-shadow: 0 18px 28px rgba(37, 211, 102, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

button#btnConfirmar:hover {
  background: linear-gradient(135deg, #23c95f, #1fad53);
  box-shadow: 0 20px 32px rgba(37, 211, 102, 0.34);
}

button#btnConfirmar:active {
  transform: scale(0.99);
  box-shadow: 0 14px 24px rgba(37, 211, 102, 0.24);
}

@media (max-width: 640px) {
  .convite-card {
    padding: 24px;
    gap: 16px;
  }

  h1 {
    font-size: 1.6rem;
  }
}

@media (max-width: 480px) {
  .convite-card {
    padding: 18px;
  }

  .informacoes {
    grid-template-columns: 1fr;
    font-size: 0.98rem;
  }
}