/*
  ObliviumBot Chatbot Styles
  -------------------------
  This section styles the chatbot UI, including the chatbox, message bubbles, launcher, and input area.
  All variables and colors are set for both light and dark mode.
  If you want to tweak the look or add new features, start here!
*/
#oblivium-bot-box {
  min-width: 340px;
  max-width: 420px;
  width: 100%;
  height: 480px;
  font-size: 1.08rem;
  box-shadow: 0 12px 48px #0008;
  border-radius: 1.5em; /* Matched roundness with interior */
  background: var(--card-bg,#23243a);
  color: var(--text,#fff);
  display: none;
  flex-direction: column;
  overflow: hidden;
  animation: chatbot-fade-in .35s cubic-bezier(.7,0,.3,1);
}
#oblivium-bot-box .chatbot-messages {
  flex: 1;
  padding: 1.2rem 1.2rem 0.5rem 1.2rem;
  max-height: 370px;
  overflow-y: auto;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
#oblivium-bot-box .chatbot-msg {
  background: none;
  box-shadow: none;
  margin: 0;
  padding: 0;
  animation: chatbot-msg-in 0.32s;
}
/*
  Chat message bubbles (user and bot)
  -----------------------------------
  .msg-bubble: Base style for all chat bubbles.
  .user-bubble: User's messages (gradient background).
  .bot-bubble: Bot's messages (light/dark background, border).
*/
.msg-bubble {
  display: flex;
  align-items: center;
  padding: 1em 1.3em;
  border-radius: 2em; /* Matches chatbox roundness */
  font-size: 0.97em;
  box-shadow: 0 2px 16px #0001;
  animation: bubble-in 0.32s cubic-bezier(.7,0,.3,1);
  max-width: 850px !important; /* Wide bubbles for better readability */
  width: 110%;
  word-break: break-word;
  line-height: 1.7;
  gap: 0.8em;
}
.user-bubble {
  background: linear-gradient(90deg,#5f27cd,#00b894);
  color: #fff;
  margin-left: auto;
  margin-bottom: 0.2em;
}
.bot-bubble {
  background: #fff;
  color: #23243a;
  margin-right: auto;
  margin-bottom: 0.2em;
  width: 100%;
  border: 1.5px solid #e6e6f0;
}
body.dark-mode .bot-bubble {
  background: #23243a;
  color: #fff;
  border: 1.5px solid #444;
}
@keyframes bubble-in {
  from { opacity: 0; transform: translateY(24px) scale(0.95); }
  to { opacity: 1; transform: none; }
}
/*
  Chatbot input area
  ------------------
  Styles the message input and send button at the bottom of the chatbox.
*/
#oblivium-bot-form {
  display: flex;
  align-items: center;
  border-top: 1.5px solid #e6e6f0;
  background: var(--card-bg,#23243a);
  padding: 0.7em 1em;
  gap: 0.7em;
}
body.dark-mode #oblivium-bot-form {
  border-top: 1.5px solid #444;
}
#oblivium-bot-input {
  flex: 1;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 1.1em;
  padding: 0.7em 1em;
  border-radius: 1.2em;
  outline: none;
  background: #f7f8fa;
  transition: background 0.3s;
}
body.dark-mode #oblivium-bot-input {
  background: #23243a;
  color: #fff;
}
/*
  Chatbot send button
  -------------------
  Large, circular, and modern send button for submitting messages.
*/
#oblivium-bot-form button[type="submit"] {
  background: linear-gradient(90deg,#5f27cd,#00b894);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 55px !important;
  height: 55px !important;
  min-width: 55px !important;
  min-height: 55px !important;
  font-size: 1.7em !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 12px #0002;
  transition: background 0.3s, transform 0.2s, margin 0.2s;
  margin-left: 0.2em; /* Move slightly to left, not cut off */
  margin-right: 0;
}
/*
  Animated close button for chatbot
  --------------------------------
  Styles the close (X) button in the chatbot header with hover animation.
*/
#oblivium-bot-box .chatbot-msg {
  background: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  animation: chatbot-msg-in 0.32s !important;
  display: flex !important;
  align-items: flex-end !important;
}
#oblivium-bot-box .chatbot-msg.user {
  justify-content: flex-end !important;
}
#oblivium-bot-box .chatbot-msg.bot {
  justify-content: flex-start !important;
}
.msg-bubble {
  display: flex !important;
  align-items: center !important;
  padding: 1em 1.5em !important;
  border-radius: 2em !important;
  font-size: 0.97em !important;
  box-shadow: 0 2px 16px #0001 !important;
  animation: bubble-in 0.32s cubic-bezier(.7,0,.3,1) !important;
  max-width: 80vw !important;
  min-width: 30% !important;
  width: auto !important;
  word-break: break-word !important;
  line-height: 1.7 !important;
  gap: 0.8em !important;
  margin-bottom: 0.1em !important;
}
.user-bubble {
  background: linear-gradient(120deg,#00eaff,#16213e 100%) !important;
  color: #fff !important;
  margin-left: -20px !important;
  margin-right: 0 !important;
  border-bottom-right-radius: 2.2em !important;
  border-bottom-left-radius: 0.2em !important;
  border-top-left-radius: 0.2em !important;
  border-top-right-radius: 2.2em !important;
  align-self: auto !important;
  max-width: 80% !important;
  min-width: 102% !important;
  width: fit-content !important;
}
.bot-bubble {
  background: rgba(247,247,250,0.98) !important;
  color: #222 !important;
  margin-left:-25px !important;
  margin-right: 0px !important;
  border-bottom-left-radius: 1.2em !important;
  border-bottom-right-radius: 2.2em !important;
  border-top-right-radius: 2.2em !important;
  border-top-left-radius: 0.7em !important;
  align-self: flex-start !important;
  box-shadow: 0 6px 32px #23243a22 !important;
  max-width: 80% !important;
  min-width: 110% !important;
  width: fit-content !important;
}
body.dark-mode .bot-bubble {
  background: #23243a !important;
  color: #e0eaff !important;
  border: none !important;
  box-shadow: 0 6px 32px #00eaff33 !important;
}
body.dark-mode .user-bubble {
  background: linear-gradient(120deg,#00eaff,#16213e 80%) !important;
  color: #fff !important;
  box-shadow: 0 6px 32px #00eaff77 !important;
}
@media (max-width:600px) {
  #oblivium-bot-box { min-width: 0 !important; max-width: 99vw !important; width: 99vw !important; height: 70vh !important; }
  .msg-bubble, .user-bubble, .bot-bubble {
    max-width: 95vw !important;
    min-width: 40vw !important;
  }
}
/*
  Remove legacy chatbot styles
  ---------------------------
  Hides any old chatbot elements that shouldn't be visible.
*/
#chatbot-launcher, #chatbot-box { display: none !important; }
/*
  ObliviumBot Chatbot Always Visible and Above All
  -----------------------------------------------
  Launcher and chatbox are fixed and always accessible.
*/
#oblivium-bot-launcher {
  position: fixed !important;
  right: 1.2rem !important;
  bottom: 1.2rem !important;
  z-index: 3000 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: #23243a;
  border-radius: 50%;
  box-shadow: 0 4px 24px #0005;
  border: none;
  padding: 0.5em;
  cursor: pointer;
  transition: box-shadow .18s,transform .18s;
}
#oblivium-bot-launcher:focus {
  outline: 2px solid #6cf;
}
#oblivium-bot-box {
  position: fixed !important;
  right: 1.2rem !important;
  bottom: 5.5rem !important;
  z-index: 3001 !important;
  min-width: 280px;
  max-width: 340px;
  width: 100%;
  background: #23243a;
  color: #fff;
  border-radius: 2em; /* Matched roundness with interior */
  box-shadow: 0 8px 32px #0007;
  display: none;
  flex-direction: column;
  overflow: hidden;
  font-family: 'Montserrat',sans-serif;
}
#oblivium-bot-box.active {
  display: flex !important;
}
/* Opening animation */
#oblivium-bot-box.show {
  animation: chatbot-fade-in .25s cubic-bezier(.7,0,.3,1);
}
/* Closing animation */
#oblivium-bot-box.closing {
  animation: chatbot-fade-out .32s cubic-bezier(.7,0,.3,1);
}
@keyframes chatbot-fade-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(40px) scale(0.98); }
}
@keyframes chatbot-fade-in {
  from { opacity: 0; transform: translateY(40px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@media (max-width:600px) {
  #oblivium-bot-box {
    right: 0.5rem !important;
    left: 0.5rem !important;
    width: auto !important;
    min-width: 0;
    max-width: 98vw;
  }
}
body > #oblivium-bot-launcher, body > #oblivium-bot-box {
  z-index: 3000 !important;
}
/* --- Improved Color Contrast and Dark Mode Styles --- */
body {
  background: #f7f8fa;
  color: #181a1b;
  transition: background 0.5s cubic-bezier(.7,0,.3,1), color 0.5s cubic-bezier(.7,0,.3,1);
}
body.dark-mode {
  background: #181a1b;
  color: #f7f8fa;
}
.main-header, .main-footer, .footer-founder {
  background: #fff;
  color: #23243a;
  transition: background 0.5s, color 0.5s;
}
body.dark-mode .main-header, body.dark-mode .main-footer, body.dark-mode .footer-founder {
  background: #23243a;
  color: #fff;
}
.service-card, .news-item, .gallery-item, .game-item {
  background: #fff;
  color: #23243a;
  transition: background 0.5s, color 0.5s;
}
body.dark-mode .service-card, body.dark-mode .news-item, body.dark-mode .gallery-item, body.dark-mode .game-item {
  background: #23243a;
  color: #fff;
}
.cta-btn {
  background: linear-gradient(90deg,#1a1a2e,#16213e);
  color: #fff;
  border: none;
  border-radius: 2em;
  padding: 0.9em 2.2em;
  font-weight: 600;
  transition: background 0.4s, color 0.4s;
}
.cta-btn:hover {
  background: linear-gradient(90deg,#16213e,#1a1a2e);
  color: #6cf;
}
body.dark-mode .cta-btn {
  background: linear-gradient(90deg,#6cf,#23243a);
  color: #23243a;
}
body.dark-mode .cta-btn:hover {
  background: linear-gradient(90deg,#23243a,#6cf);
  color: #fff;
}
/* --- Dark/Light Mode Toggle Animation --- */
#darkModeToggle {
  background: none;
  border: none;
  font-size: 1.5em;
  color: #23243a;
  transition: color 0.4s, transform 0.3s cubic-bezier(.7,0,.3,1);
  cursor: pointer;
}
#darkModeToggle:active {
  transform: rotate(-30deg) scale(1.2);
}
body.dark-mode #darkModeToggle {
  color: #6cf;
  transition: color 0.4s, transform 0.3s cubic-bezier(.7,0,.3,1);
}
/* --- ObliviumBot Chatbot Always Visible and Above All --- */
#oblivium-bot-launcher {
  position: fixed !important;
  right: 1.2rem !important;
  bottom: 1.2rem !important;
  z-index: 3000 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: #23243a;
  border-radius: 50%;
  box-shadow: 0 4px 24px #0005;
  border: none;
  padding: 0.5em;
  cursor: pointer;
  transition: box-shadow .18s,transform .18s;
}
#oblivium-bot-launcher:focus {
  outline: 2px solid #6cf;
}
#oblivium-bot-box {
  position: fixed !important;
  right: 1.2rem !important;
  bottom: 5.5rem !important;
  z-index: 3001 !important;
  min-width: 280px;
  max-width: 340px;
  width: 100%;
  background: #23243a;
  color: #fff;
  border-radius: 1.2em;
  box-shadow: 0 8px 32px #0007;
  display: none;
  flex-direction: column;
  overflow: hidden;
  font-family: 'Montserrat',sans-serif;
}
#oblivium-bot-box.active {
  display: flex !important;
}
#oblivium-bot-box.show {
  animation: chatbot-fadein 0.5s;
}
@keyframes chatbot-fadein {
  from { opacity: 0; transform: translateY(40px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@media (max-width:600px) {
  #oblivium-bot-box {
    right: 0.5rem !important;
    left: 0.5rem !important;
    width: auto !important;
    min-width: 0;
    max-width: 98vw;
  }
}
/* Make sure nothing can hide the bot */
body > #oblivium-bot-launcher, body > #oblivium-bot-box {
  z-index: 3000 !important;
}
/* ObliviumBot Peeking Bot Styles */
#oblivium-bot-launcher {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 3000;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 0;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  transition: transform 0.3s cubic-bezier(.4,0,.2,1);
}
#oblivium-bot-launcher .bot-peek {
  position: relative;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
#oblivium-bot-launcher .bot-peek-img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  box-shadow: 0 8px 32px var(--primary);
  background: var(--card-bg);
  border: 3px solid var(--primary);
  transition: box-shadow 0.3s, transform 0.3s;
}
#oblivium-bot-launcher .bot-eye {
  position: absolute;
  left: 22px;
  top: 32px;
  width: 10px;
  height: 10px;
  background: #222;
  border-radius: 50%;
  box-shadow: 0 0 6px #fff8, 0 0 2px #0008;
  transition: transform 0.2s;
}
#oblivium-bot-launcher .bot-eye-r {
  left: 40px;
}
#oblivium-bot-launcher.peek-in {
  animation: bot-peek-in 1.1s cubic-bezier(.4,0,.2,1);
}
@keyframes bot-peek-in {
  0% { transform: translateY(80px) scale(0.7); opacity: 0; }
  60% { transform: translateY(-8px) scale(1.1); opacity: 1; }
  80% { transform: translateY(0) scale(1.05); }
  100% { transform: none; }
}
#oblivium-bot-launcher.bot-wave .bot-peek-img {
  animation: bot-wave 1.2s 1;
}
@keyframes bot-wave {
  0% { transform: rotate(0); }
  20% { transform: rotate(-18deg) scale(1.1); }
  40% { transform: rotate(18deg) scale(1.1); }
  60% { transform: rotate(-12deg) scale(1.05); }
  80% { transform: rotate(12deg) scale(1.05); }
  100% { transform: rotate(0); }
}
#oblivium-bot-box {
  position: fixed;
  right: 1.2rem;
  bottom: 5.5rem;
  z-index: 3001;
  width: 340px;
  max-width: 95vw;
  background: var(--card-bg);
  color: var(--text);
  border-radius: 18px;
  box-shadow: 0 8px 32px var(--primary);
  display: none;
  flex-direction: column;
  overflow: hidden;
  animation: chatbot-fadein 0.5s;
}
#oblivium-bot-box.active {
  display: flex;
}
#oblivium-bot-box.show {
  animation: chatbot-fadein 0.5s;
}
@media (max-width: 600px) {
  #oblivium-bot-box {
    right: 0.5rem;
    left: 0.5rem;
    width: auto;
  }
}
/* Fade page transition for navigation */
/* Animated page load transition */
body.page-enter {
  opacity: 0;
  transform: translateY(40px) scale(0.98);
}
body.page-enter-active {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s cubic-bezier(.4,0,.2,1), transform 0.7s cubic-bezier(.4,0,.2,1);
}
/* Best-in-class hover and transition for PNGs and cards */
.service-card img, .gallery-item img, .news-thumb, .loading-logo {
    transition: transform 0.5s cubic-bezier(.4,0,.2,1), filter 0.4s, box-shadow 0.4s;
}
.service-card:hover img, .gallery-item:hover img, .news-item:hover .news-thumb {
    transform: scale(1.02) rotate(0deg);
    filter: brightness(1.18) drop-shadow(0 8px 24px var(--primary));
    box-shadow: 0 12px 40px var(--primary), 0 2px 12px var(--accent);
}
.service-card, .news-item, .gallery-item, .game-item {
    line-height: 1.7;
    letter-spacing: 0.01em;
    padding-bottom: 1.2rem;
}
.service-card h3, .news-item h3, .gallery-item h3, .game-item h3 {
    margin-bottom: 0.7rem;
    letter-spacing: 0.02em;
}
.service-card p, .news-item p, .gallery-item p, .game-item p {
    margin-top: 0.3rem;
    margin-bottom: 0.3rem;
}
/* Chatbot Widget Styles */
#chatbot-launcher {
    position: fixed;
    left: 2.2rem;
    bottom: 2.2rem;
    z-index: 3000;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 56px;
    height: 56px;
    font-size: 2rem;
    box-shadow: 0 8px 32px var(--primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}
#chatbot-launcher:hover {
    background: var(--secondary);
    color: #fff;
    box-shadow: 0 12px 40px var(--secondary);
}
#chatbot-box {
    position: fixed;
    left: 2.2rem;
    bottom: 7.5rem;
    z-index: 3001;
    width: 340px;
    max-width: 95vw;
    background: var(--card-bg);
    color: var(--text);
    border-radius: 18px;
    box-shadow: 0 8px 32px var(--primary);
    display: none;
    flex-direction: column;
    overflow: hidden;
    animation: chatbot-fadein 0.5s;
}
#chatbot-box.active {
    display: flex;
}
@keyframes chatbot-fadein {
    from { opacity: 0; transform: translateY(40px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.chatbot-header {
    background: var(--primary);
    color: #fff;
    padding: 1rem 1.2rem;
    font-weight: 700;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#chatbot-close {
    cursor: pointer;
    font-size: 1.3rem;
    margin-left: 1rem;
    transition: color 0.2s;
}
#chatbot-close:hover {
    color: var(--accent);
}
.chatbot-messages {
    flex: 1;
    padding: 1rem;
    max-height: 260px;
    overflow-y: auto;
    background: var(--bg);
}
.chatbot-msg {
    margin-bottom: 0.7rem;
    padding: 0.7rem 1rem;
    border-radius: 12px;
    max-width: 80%;
    word-break: break-word;
    font-size: 1rem;
    box-shadow: 0 2px 8px rgba(95,39,205,0.08);
    animation: chatbot-msg-in 0.3s;
}
.chatbot-msg.user {
    background: var(--primary);
    color: #fff;
    margin-left: auto;
    text-align: right;
}
.chatbot-msg.bot {
    background: var(--card-bg);
    color: var(--text);
    margin-right: auto;
    text-align: left;
}
@keyframes chatbot-msg-in {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
#chatbot-form {
    display: flex;
    border-top: 1px solid var(--primary);
    background: var(--card-bg);
}
#chatbot-input {
    flex: 1;
    border: none;
    padding: 1rem;
    font-size: 1rem;
    border-radius: 0 0 0 18px;
    outline: none;
    background: var(--card-bg);
    color: var(--text);
}
#chatbot-form button {
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 0 0 18px 0;
    padding: 0 1.2rem;
    font-size: 1.2rem;
    cursor: pointer;
    transition: background 0.2s;
}
#chatbot-form button:hover {
    background: var(--secondary);
}
/* Remove loading screen styles */
/* Universal transitions and hover effects for all elements */
* {
    transition: all 0.35s cubic-bezier(.4,0,.2,1) !important;
}

/* Add more hover/active/focus effects for interactivity */
/* Add more hover/active/focus effects for interactivity and animate all cards/sections */
a, button, .service-card, .news-item, .gallery-item, .game-item, .cta-btn, .account-btn, .nav-links li a, .footer-links a, .social-links img, .footer-social-links img {
    transition: box-shadow 0.3s, color 0.3s, background 0.3s, transform 0.3s, filter 0.3s !important;
}
a, .service-card, .news-item, .gallery-item, .game-item, .cta-btn, .account-btn {
    opacity: 0;
    transform: translateY(40px) scale(0.98);
    animation: section-in 0.7s cubic-bezier(.7,0,.3,1) forwards;
    animation-delay: 0.2s;
}
.service-card { animation-delay: 0.3s; }
.news-item { animation-delay: 0.4s; }
.gallery-item { animation-delay: 0.5s; }
.game-item { animation-delay: 0.6s; }
.cta-btn, .account-btn { animation-delay: 0.7s; }
@keyframes section-in {
  from { opacity: 0; transform: translateY(40px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
a:hover, .footer-links a:hover, .nav-links li a:hover {
    color: var(--accent);
    text-shadow: 0 2px 8px var(--primary);
    filter: brightness(1.2);
}
button:hover, .cta-btn:hover, .account-btn:hover {
    box-shadow: 0 8px 32px var(--primary), 0 2px 8px var(--accent);
    transform: scale(1.06) rotate(-2deg);
    filter: brightness(1.1);
}
.service-card:hover, .news-item:hover, .gallery-item:hover, .game-item:hover {
    box-shadow: 0 8px 32px var(--secondary), 0 2px 8px var(--accent);
    transform: scale(1.04) rotate(-2deg);
    filter: brightness(1.08);
}
.gallery-item img:hover {
    filter: brightness(1.2) drop-shadow(0 4px 12px var(--primary));
}
.main-header, .main-footer, .section, .hero, .hero-content, .shape, .loading-spinner {
    transition: background 0.4s, color 0.4s, box-shadow 0.4s, filter 0.4s, opacity 0.4s !important;
}
.loading-spinner {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 4px solid var(--accent);
    border-top: 4px solid var(--primary);
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Social Links Styling */
.social-links, .footer-social-links {
    display: flex;
    gap: 0.7rem;
    align-items: center;
    margin-left: 1.2rem;
}
.social-links img, .footer-social-links img {
    width: 28px;
    height: 28px;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.08));
    transition: transform 0.2s, filter 0.2s;
}
.social-links img:hover, .footer-social-links img:hover {
    transform: scale(1.18) rotate(-8deg);
    filter: brightness(1.2) drop-shadow(0 4px 12px var(--primary));
}

/* Logo image in header */
.logo img {
    display: block;
    height: 38px;
    transition: filter 0.3s;
}

/* Special Dialog Box Styles */
/* Special Dialog Box Styles - perfectly centered, only fade animation */
.special-dialog {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.32s cubic-bezier(.4,0,.2,1);
}
.special-dialog.active {
    opacity: 1;
    pointer-events: auto;
}
.special-dialog .dialog-inner {
    background: var(--card-bg);
    color: var(--text);
    border-radius: 18px;
    box-shadow: 0 8px 32px rgba(95,39,205,0.18);
    padding: 2.2rem 2.5rem 1.5rem 2.5rem;
    min-width: 320px;
    max-width: 90vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.special-dialog .dialog-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--primary);
}
.special-dialog .dialog-content {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}
.special-dialog .dialog-close {
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 0.5rem 1.2rem;
    font-size: 1rem;
    cursor: pointer;
    float: right;
    margin-top: 0.5rem;
    transition: background 0.2s;
}
.special-dialog .dialog-close:hover {
    background: var(--secondary);
}
/*
  ObliviumTek Modern Homepage Styles
  Edit comments to customize your homepage look and feel.
*/

/* Universal color variables and dark mode logic */
:root {
    --primary: #5f27cd;
    --secondary: #00b894;
    --bg: #f7f8fa;
    --text: #181a1b;
    --card-bg: #fff;
    --accent: #fdcb6e;
    --header-bg: #fff;
    --footer-bg: #23243a;
    --shadow: 0 4px 24px rgba(0,0,0,0.08);
    --transition: 0.3s cubic-bezier(.4,0,.2,1);
}
body {
    font-family: 'Montserrat', Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    margin: 0;
    padding: 0;
    transition: background 0.4s, color 0.4s;
    min-height: 100vh;
    overflow-x: hidden;
}
body.dark-mode {
    --bg: #181825;
    --text: #f7f8fa;
    --card-bg: #23243a;
    --header-bg: #23243a;
    --footer-bg: #181825;
    --shadow: 0 4px 24px rgba(0,0,0,0.25);
}

/* Dark Mode Toggle */
#darkModeToggle {
    position: fixed;
    top: 1.2rem;
    right: 1.2rem;
    z-index: 1000;
    background: var(--card-bg);
    color: var(--primary);
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    box-shadow: var(--shadow);
    cursor: pointer;
    font-size: 1.3rem;
    transition: background var(--transition), color var(--transition);
}
#darkModeToggle:hover {
    background: var(--primary);
    color: #fff;
}

/* Header */
.main-header {
    background: var(--header-bg);
    box-shadow: var(--shadow);
    width: 100%;
    transition: background var(--transition);
}
.main-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.2rem 2rem;
}
.logo {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 2px;
    margin: 0;
}
.nav-links {
    list-style: none;
    display: flex;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
}
.nav-links li a {
    color: var(--text);
    text-decoration: none;
    font-weight: 500;
    font-size: 1.05rem;
    transition: color var(--transition);
}
.nav-links li a:hover {
    color: var(--primary);
}
.account-btn {
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 22px;
    padding: 0.5rem 1.2rem;
    font-size: 1rem;
    cursor: pointer;
    transition: background var(--transition);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.account-btn:hover {
    background: var(--secondary);
}

/* Hero Section */
.hero {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(120deg, var(--primary) 0%, var(--secondary) 100%);
    color: #fff;
    overflow: hidden;
}
.hero-content {
    z-index: 2;
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}
.hero-title {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 1rem;
    letter-spacing: 1px;
}
.hero-title span {
    color: var(--accent);
}
.hero-desc {
    font-size: 1.3rem;
    margin-bottom: 2rem;
    font-weight: 400;
}
.cta-btn {
    background: var(--accent);
    color: #222f3e;
    border: none;
    border-radius: 30px;
    padding: 0.9rem 2.2rem;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: background var(--transition), color var(--transition);
    text-decoration: none;
}
.cta-btn:hover {
    background: #fff;
    color: var(--primary);
}

/* Hero Animated Shapes */
.hero-animations {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1;
    pointer-events: none;
}
.shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.18;
}
.shape1 {
    width: 220px; height: 220px;
    background: var(--accent);
    top: 10%; left: 5%;
}
.shape2 {
    width: 140px; height: 140px;
    background: var(--secondary);
    bottom: 15%; right: 10%;
}
.shape3 {
    width: 90px; height: 90px;
    background: var(--primary);
    top: 60%; left: 60%;
}

/* Section Styles */
.section {
    padding: 4rem 2rem 3rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}
.section h2 {
    font-size: 2.2rem;
    color: var(--primary);
    margin-bottom: 2rem;
    text-align: center;
    font-weight: 700;
}

/* Services */
.services-list {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
}
.service-card {
    background: var(--card-bg);
    box-shadow: var(--shadow);
    border-radius: 18px;
    padding: 2rem 1.5rem;
    width: 260px;
    text-align: center;
    transition: transform 0.25s, box-shadow 0.25s;
    cursor: pointer;
    margin-bottom: 1.5rem;
}
.service-card:hover {
    transform: translateY(-10px) scale(1.04) rotate(-2deg);
    box-shadow: 0 8px 32px rgba(95,39,205,0.18);
}
.service-card i {
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: 1rem;
}
.service-card h3 {
    margin: 0.5rem 0 0.7rem 0;
    font-size: 1.3rem;
    color: var(--secondary);
}
.service-card p {
    color: var(--text);
    font-size: 1rem;
}

/* News */
.news-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
}
.news-item {
    background: var(--card-bg);
    box-shadow: var(--shadow);
    border-radius: 12px;
    padding: 1.2rem 2rem;
    max-width: 600px;
    width: 100%;
    transition: box-shadow 0.2s;
}
.news-item h3 {
    margin: 0 0 0.5rem 0;
    color: var(--primary);
}
.news-item a {
    color: var(--secondary);
    text-decoration: underline;
}

/* Trading, Hub, Mindfulness */
.trading, .hub, .mindfulness {
    text-align: center;
    background: linear-gradient(90deg, var(--card-bg) 60%, var(--accent) 100%);
    border-radius: 18px;
    box-shadow: var(--shadow);
    margin-bottom: 2rem;
}

/* Gallery */
.gallery-list {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    justify-content: center;
}
.gallery-item {
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: var(--shadow);
    overflow: hidden;
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.gallery-item img:hover {
    transform: scale(1.08) rotate(2deg);
}

/* Games */
.games-list {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    justify-content: center;
}
.game-item {
    background: var(--card-bg);
    border-radius: 14px;
    box-shadow: var(--shadow);
    padding: 1.5rem 2rem;
    text-align: center;
    width: 220px;
    margin-bottom: 1.5rem;
}
.play-btn {
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 0.6rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 1rem;
    transition: background var(--transition);
}
.play-btn:hover {
    background: var(--secondary);
}

/* Footer */
.main-footer {
    background: var(--footer-bg);
    color: #fff;
    padding: 2rem 0 1rem 0;
    text-align: center;
    margin-top: 3rem;
}
.footer-links {
    margin-top: 1rem;
}
.footer-links a {
    color: var(--accent);
    margin: 0 1rem;
    text-decoration: none;
    font-size: 1rem;
}
.footer-links a:hover {
    text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 900px) {
    .main-header .container, .section {
        padding: 1rem;
    }
    .services-list, .gallery-list, .games-list {
        flex-direction: column;
        align-items: center;
    }
}
@media (max-width: 600px) {
    .hero-title {
        font-size: 2rem;
    }
    .main-header .container {
        flex-direction: column;
        gap: 1rem;
    }
    .nav-links {
        flex-direction: column;
        gap: 0.7rem;
    }
}