:root {
  --primary: #4A0072;
  --secondary: #B400F2;
  --white: #fff;
  --gray: #f3e9ff;
  --text: #fff;
  --text-secondary: #e3d6f2;
  --card-bg: #2c0643;
  --card-border: #B400F2;
}

html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Montserrat', Arial, sans-serif;
  background: var(--primary);
  color: var(--text);
  min-height: 100vh;
  box-sizing: border-box;
}

.navbar {
  display: flex;
  align-items: center;
  background: var(--primary);
  padding: 0 32px;
  height: 74px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 12px 0 rgba(74,0,114,0.07);
  justify-content: space-between;
}

/* Animated "ZOVO" Brand Text */
.zovo-animated-text {
  font-size: 2.2rem;
  font-weight: 900;
  letter-spacing: 0.33em;
  text-transform: uppercase;
  background: linear-gradient(90deg,
    #AD8CFF, #F091D2, #F0F1F5, #4A0072, #B400F2, #AD8CFF
  );
  background-size: 220% auto;
  color: #F0F1F5;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: zovo-colorflow 3.6s linear infinite;
  position: relative;
  display: inline-block;
  margin-right: 34px;
  margin-left: 4px;
  filter: drop-shadow(0 0 10px #B400F2AA) drop-shadow(0 0 18px #4A007288);
  text-shadow: 0 0 20px #B400F2cc, 0 0 40px #4A007266, 0 0 60px #AD8CFF33;
}
@keyframes zovo-colorflow {
  0% { background-position: 0% 50% }
  100% { background-position: 100% 50% }
}

/* Hamburger for mobile menu */
.navbar .hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  margin-left: auto;
  z-index: 101;
}
.navbar .hamburger span {
  height: 3px;
  width: 28px;
  background: var(--secondary);
  margin: 5px 0;
  border-radius: 2px;
  transition: 0.2s;
}

/* Navigation links */
.nav-links {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: flex-end;
}
.nav-link {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 1.11rem;
  margin: 0 18px;
  padding: 4px 0;
  border-bottom: 2.5px solid transparent;
  transition: color 0.17s, border 0.17s;
}
.nav-link.active,
.nav-link:hover {
  color: var(--secondary);
  border-bottom: 2.5px solid var(--secondary);
}

/* Responsive navbar */
@media (max-width: 820px) {
  .navbar { padding: 0 14px; }
  .zovo-animated-text { font-size: 1.5rem; margin-right:16px;}
}
@media (max-width: 660px) {
  .navbar {
    flex-wrap: wrap;
    height: auto;
    position: sticky;
    top: 0;
    padding: 0 4vw;
  }
  .zovo-animated-text { font-size: 1.15rem; margin-right: 10px;}
  .nav-links {
    position: fixed;
    left: 0; top: 74px;
    width: 100vw;
    background: #18003A;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 24px 0 32px 18px;
    transition: transform 0.28s cubic-bezier(.47,1.64,.41,.8);
    transform: translateY(-120%);
    z-index: 101;
    box-shadow: 0 5px 32px #00000033;
  }
  .nav-links.show {
    transform: translateY(0);
  }
  .nav-link {
    font-size: 1.13rem;
    margin: 11px 0 11px 0;
    padding: 6px 0;
    width: 92vw;
    display: block;
  }
  .navbar .hamburger { display: flex; }
}

/* HERO and Sections */
section {
  padding: 56px 0 44px 0;
  max-width: 1100px;
  margin: 0 auto;
}
.hero {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 52px;
  min-height: 350px;
  justify-content: space-between;
}
.hero-content {
  flex: 2;
  min-width: 260px;
}
.hero-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 14px;
  line-height: 1.2;
}
.hero-keywords {
  font-size: 1.10rem;
  color: var(--secondary);
  font-weight: 600;
  margin-bottom: 26px;
  letter-spacing: 1.1px;
}
.hero-desc {
  font-size: 1.12rem;
  color: var(--text-secondary);
  max-width: 520px;
  line-height: 1.7;
  margin-bottom: 32px;
}
.hero-actions {
  display: flex;
  gap: 18px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.download-btn {
  background: var(--secondary);
  color: var(--white);
  border: none;
  border-radius: 12px;
  font-size: 1.02rem;
  font-weight: 600;
  padding: 12px 30px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 8px 0 rgba(74,0,114,0.09);
  text-decoration: none;
  transition: background 0.16s, color 0.16s;
  outline: none;
  cursor: pointer;
}
.download-btn img {
  width: 22px;
  margin-right: 11px;
}
.download-btn:hover {
  background: var(--white);
  color: var(--primary);
}
.hero-art {
  flex: 1.4;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  background: var(--secondary);
  border-radius: 30px;
  width: 230px;
  height: 320px;
  box-shadow: 0 8px 38px 0 rgba(180,0,242,0.13);
  position: relative;
}
.hero-art .wave {
  position: absolute;
  width: 180px;
  height: 180px;
  left: 20px;
  top: 70px;
  opacity: 0.7;
  z-index: 1;
  filter: blur(1px);
}
.hero-art .mic-icon {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  margin: auto;
  box-shadow: 0 2px 20px 0 rgba(74,0,114,0.14);
}
.hero-art .mic-icon img {
  width: 56px; height: 56px;
}

@media (max-width: 900px) {
  section { padding: 20px 3vw 20px 3vw;}
  .hero, .about-row { flex-direction: column; gap: 22px;}
  .features { flex-direction: column; gap: 16px;}
  .about-img-main { width: 110px;}
  .about-img-sub { width: 32px;}
  .about-imgs { min-width: 90px; }
  .legal-content { padding: 20px 5vw 18px 5vw;}
}
@media (max-width: 720px) {
  .hero-title { font-size: 1.5rem;}
  .hero-art { width: 90vw; max-width: 290px; min-width: 110px; height: 170px; }
  .hero-art .wave { width: 100px; height: 100px; left:10px; top:38px; }
  .hero-art .mic-icon { width:50px; height:50px; }
  .hero-art .mic-icon img { width:33px; height:33px;}
}
@media (max-width: 600px) {
  section, .legal-content { padding: 12px 2vw 10px 2vw;}
  .features, .about-row { gap: 10px;}
  .hero-content, .about-content { min-width:0; width:100%; }
  .about-img-main { width:80px; }
  .about-img-sub { width:24px;}
  .hero-title { font-size: 1.22rem; }
}

.features {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  margin-top: 44px;
}
.feature {
  flex: 1;
  background: var(--card-bg);
  border: 2px solid var(--card-border);
  border-radius: 16px;
  text-align: center;
  padding: 36px 14px 28px 14px;
  margin: 0 8px;
  min-width: 190px;
  box-shadow: 0 3px 13px 0 rgba(74,0,114,0.10);
}
.feature-title {
  font-size: 1.27rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--secondary);
  letter-spacing: 0.8px;
}
.feature-desc {
  font-size: 1.08rem;
  color: #fbefff;
  margin-bottom: 18px;
}
.feature-icon {
  margin-bottom: 16px;
}
.feature-icon svg {
  width: 40px;
  height: 40px;
  color: var(--secondary);
  background: var(--white);
  border-radius: 9px;
  padding: 6px;
}

@media (max-width: 720px) {
  .features { flex-direction: column; gap: 12px;}
  .feature { margin: 0; min-width: 0;}
}

/* About/Contact Responsive */
.about-row {
  display: flex;
  gap: 48px;
  margin-top: 30px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.about-imgs {
  flex: 1.2;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  min-width: 90px;
}
.about-img-main {
  width: 190px;
  border-radius: 13px;
  object-fit: cover;
  margin-bottom: 9px;
  box-shadow: 0 2px 12px 0 rgba(74,0,114,0.13);
  background: var(--primary);
}
.about-img-subgroup {
  display: flex;
  gap: 8px;
}
.about-img-sub {
  width: 60px;
  border-radius: 11px;
  object-fit: cover;
  background: var(--gray);
}
.about-content {
  flex: 2.3;
  min-width: 230px;
}
.about-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 8px;
}
.about-list {
  color: #e3d8e9;
  font-size: 1.08rem;
  line-height: 1.65;
  margin: 0 0 0 10px;
  padding: 0;
  list-style-type: decimal;
}
@media (max-width: 700px) {
  .about-row { flex-direction: column; gap: 18px;}
  .about-content, .about-imgs { min-width: 0; width: 100%;}
  .about-img-main { width: 80px;}
  .about-img-sub { width: 28px;}
}

/* Contact Responsive */
.contact-row {
  text-align: center;
  margin-top: 28px;
  margin-bottom: 22px;
}
.contact-imgs {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.contact-img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 50%;
  background: var(--gray);
  box-shadow: 0 1px 6px 0 rgba(74,0,114,0.09);
}
.contact-logo {
  width: 56px;
  height: 56px;
  background: var(--primary);
  border-radius: 18px;
  margin: 0 auto 18px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-logo img {
  width: 38px; height: 38px;
}
.contact-info {
  color: #e3d8e9;
  font-size: 1.06rem;
  margin-bottom: 7px;
  line-height: 1.6;
}
@media (max-width:600px){
  .contact-img{width:40px;height:40px;}
  .contact-logo{width:38px;height:38px;}
  .contact-logo img{width:23px;height:23px;}
}

/* Legal Pages */
.legal-content {
  background: #230139;
  color: #ffeefd;
  border-radius: 20px;
  margin: 32px auto 30px auto;
  max-width: 980px;
  padding: 28px 7vw 24px 7vw;
  box-shadow: 0 3px 24px 0 rgba(74,0,114,0.13);
  line-height: 1.8;
  font-size: 1.06rem;
  word-break: break-word;
}
.legal-content h2 {
  color: #fff;
  font-size: 2rem;
  margin-top: 0;
  margin-bottom: 18px;
  text-align: center;
  letter-spacing: 1.2px;
}
.legal-content h3 {
  margin-top: 1.4em;
  color: #ffdcfc;
  font-size: 1.13rem;
}
.legal-content p, .legal-content li {
  color: #ffeefd;
}
.legal-content ul, .legal-content ol {
  margin-left: 1.4em;
  padding-left: 0.5em;
}
.legal-content b, .legal-content strong {
  color: var(--secondary);
}
.legal-content a { color: #ad7eff; word-break: break-all;}
.legal-content blockquote {
  background: #35194f;
  border-left: 4px solid var(--secondary);
  padding: 10px 12px;
  margin: 14px 0;
  color: #fff7ff;
  border-radius: 7px;
}
.legal-content hr {
  border: 0;
  border-top: 1px solid #502580;
  margin: 18px 0;
}
.legal-content .legal-updated {
  font-size: 1rem;
  opacity: 0.8;
  text-align: right;
}
@media (max-width: 700px){
  .legal-content{padding:18px 2vw 14px 2vw; font-size:0.97rem;}
  .legal-content h2 {font-size:1.18rem;}
}

.footer {
  text-align: center;
  color: #d2bee3;
  font-size: 1.06rem;
  padding: 18px 0 8px 0;
  background: #120027;
  letter-spacing: 0.2px;
}
.footer a {
  color: var(--secondary);
  margin: 0 14px;
  text-decoration: underline;
  font-size: 1.01rem;
  transition: color 0.17s;
}
.footer a:hover {
  color: var(--white);
}

/* Loading & No Internet overlays */
#zovo-loading-overlay,
#zovo-nointernet-overlay {
  position: fixed;
  z-index: 20000;
  top: 0; left: 0; width: 100vw; height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(30, 0, 60, 0.92);
  transition: opacity 0.25s;
  opacity: 1;
  pointer-events: auto;
}
#zovo-loading-overlay.hide,
#zovo-nointernet-overlay.hide {
  opacity: 0; pointer-events: none;
}

#zovo-loading-overlay img,
#zovo-nointernet-overlay img {
  width: 96px;
  height: auto;
  margin-bottom: 12px;
  user-drag: none;
}
#zovo-loading-overlay .zovo-message,
#zovo-nointernet-overlay .zovo-message {
  color: #fff;
  font-size: 1.13rem;
  text-align: center;
  margin-bottom: 0;
  font-weight: 600;
  letter-spacing: 0.5px;
}
#zovo-nointernet-overlay .zovo-btn {
  margin-top: 10px;
  background: #B400F2;
  border: none;
  color: #fff;
  font-size: 1.01rem;
  border-radius: 7px;
  padding: 8px 19px;
  cursor: pointer;
  font-weight: 600;
  box-shadow: 0 1px 8px 0 rgba(180,0,242,0.09);
  transition: background 0.16s, color 0.16s;
}
#zovo-nointernet-overlay .zovo-btn:hover {
  background: #fff;
  color: #B400F2;
}