/* ================================================
   dark-theme.css — Nodenow VPN Dark Theme Override
   Link AFTER ud-styles.css in index.html
   ================================================ */

/* ============ CSS Variables & Base ============ */
:root {
  --font: 'Plus Jakarta Sans', 'Noto Sans KR', 'Inter', sans-serif;
  --body-color: rgba(255, 255, 255, 0.6);
  --heading-color: #ffffff;
  --primary-color: #3056d3;
  --white: #ffffff;
  --dark-bg: #060608;
  --dark-card: rgba(255, 255, 255, 0.04);
  --dark-border: rgba(255, 255, 255, 0.08);
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background-color: var(--dark-bg);
  color: var(--body-color);
}

h1, h2, h3, h4, h5, h6 { color: var(--heading-color); }
p { color: var(--body-color); }

/* ============ Buttons ============ */
.ud-main-btn {
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s ease;
}
.ud-main-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(48, 86, 211, 0.4);
  color: #fff;
  background: #2145b8;
}

/* ============ Section Title (global) ============ */
.ud-section-title { max-width: 700px; margin-bottom: 60px; }
.ud-section-title span {
  background: rgba(48, 86, 211, 0.12);
  color: var(--primary-color);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 20px;
  display: inline-block;
  margin-bottom: 16px;
}
.ud-section-title h2 {
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin-bottom: 14px;
}
.ud-section-title p {
  font-size: 17px;
  line-height: 30px;
  color: rgba(255,255,255,0.55);
}

/* ============ Header ============ */
.ud-header { padding: 6px 0; transition: all 0.3s ease; }

.sticky {
  background-color: rgba(6, 6, 8, 0.88) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}

.navbar-nav .nav-item > a {
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85) !important;
}
.navbar-nav .nav-item > a:hover,
.navbar-nav .nav-item > a.active {
  color: #ffffff !important;
  opacity: 1 !important;
}
.sticky .navbar-nav .nav-item a { color: rgba(255, 255, 255, 0.85) !important; }
.sticky .navbar-nav .nav-item a:hover,
.sticky .navbar-nav .nav-item a.active { color: #ffffff !important; opacity: 1 !important; }

/* Mobile menu collapse */
@media (max-width: 991px) {
  .navbar-collapse {
    background-color: #0d0d14 !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6) !important;
  }
  .navbar-nav .nav-item > a {
    color: rgba(255,255,255,0.85) !important;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding: 12px 0 !important;
  }
  .navbar-nav .nav-item > a:hover { color: var(--primary-color) !important; }
  .navbar-nav .nav-item { padding: 0 !important; }
}

/* Mobile-only nav items */
.mobile-only-item { display: none; }
@media (max-width: 991px) { .mobile-only-item { display: block; } }

/* Header CTA buttons */
.navbar-btn { display: flex; align-items: center; gap: 8px; }
.navbar-btn .ud-main-btn { padding: 9px 18px; font-size: 14px; font-weight: 600; }
.navbar-btn .ud-login-btn {
  background: transparent !important;
  color: rgba(255,255,255,0.8) !important;
  border: 1px solid transparent;
}
.navbar-btn .ud-login-btn:hover {
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
  opacity: 1 !important;
  transform: none;
  box-shadow: none;
}
.navbar-btn .ud-white-btn {
  background: #22c55e !important;
  color: #fff !important;
  border-color: #22c55e !important;
}
.navbar-btn .ud-white-btn:hover {
  background: #16a34a !important;
  border-color: #16a34a !important;
  box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4) !important;
  transform: translateY(-1px) !important;
}
.sticky .navbar-btn .ud-white-btn { background: #22c55e !important; color: #fff !important; }
.sticky .navbar-btn .ud-white-btn:hover { background: #16a34a !important; }

/* Chevron arrow */
.nav-item-has-children > a::after {
  border-bottom-color: rgba(255,255,255,0.55) !important;
  border-right-color: rgba(255,255,255,0.55) !important;
}

/* ============ Mega Menu ============ */
.ud-mega-menu {
  position: absolute;
  top: 110%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 380px;
  background: #0d0d14;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.75);
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s ease;
  z-index: 200;
  pointer-events: none;
}
.ud-download-mega:hover .ud-mega-menu,
.ud-mega-menu.show {
  opacity: 1;
  visibility: visible;
  top: 100%;
  pointer-events: all;
}
.ud-mega-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: block;
}
.ud-mega-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.ud-mega-col { display: flex; flex-direction: column; gap: 2px; }
.ud-mega-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  color: rgba(255,255,255,0.75);
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s ease;
  text-decoration: none;
}
.ud-mega-link i { font-size: 15px; color: rgba(255,255,255,0.4); flex-shrink: 0; }
.ud-mega-link:hover { background: rgba(48, 86, 211, 0.15); color: #ffffff; }
.ud-mega-link:hover i { color: var(--primary-color); }

@media (max-width: 991px) {
  .ud-mega-menu {
    position: static !important;
    transform: none !important;
    min-width: auto;
    width: 100%;
    opacity: 1;
    visibility: visible;
    display: none;
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
    padding: 14px;
    margin-top: 6px;
    box-shadow: none;
    pointer-events: all;
  }
  .ud-mega-menu.show { display: block; }
  .ud-mega-grid { grid-template-columns: repeat(2, 1fr); }
  .ud-download-mega:hover .ud-mega-menu {
    opacity: 1; visibility: visible; display: none;
  }
  .ud-download-mega:hover .ud-mega-menu.show { display: block; }
}

/* ============ Aurora Canvas (verdent.ai style) ============ */
#ud-wave-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
  /* blur는 JS ctx.filter로 처리 — CSS blur는 overflow:hidden에 잘림 */
}

/* ============ Hero ============ */
.ud-hero {
  background-color: #060608;
  background-image:
    radial-gradient(ellipse 900px 550px at 50% -50px, rgba(48, 86, 211, 0.24) 0%, transparent 70%),
    radial-gradient(ellipse 500px 350px at 85% 65%, rgba(48, 86, 211, 0.07) 0%, transparent 65%);
  padding-top: 160px;
  padding-bottom: 110px;
  position: relative;
  overflow: hidden;
}
.ud-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.07), transparent);
}
@media (max-width: 991px) { .ud-hero { padding-top: 130px; padding-bottom: 80px; } }
@media (max-width: 767px) { .ud-hero { padding-top: 110px; padding-bottom: 60px; } }

.ud-hero-content { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; text-align: center; }
.ud-hero-title {
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: clamp(32px, 5vw, 58px) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.025em !important;
  margin-bottom: 24px !important;
}
.ud-hero-desc {
  color: rgba(255,255,255,0.6) !important;
  font-size: 18px !important;
  line-height: 32px !important;
  max-width: 560px;
  margin: 0 auto 40px !important;
  opacity: 1 !important;
}
@media (max-width: 767px) { .ud-hero-desc { font-size: 16px !important; line-height: 28px !important; } }

.ud-hero-buttons { margin-bottom: 36px; gap: 12px; }
.ud-hero-buttons .ud-main-btn { padding: 16px 32px; font-size: 16px; font-weight: 700; }
.ud-hero-buttons .ud-white-btn {
  background: #22c55e !important; color: #ffffff !important; border: none !important;
}
.ud-hero-buttons .ud-white-btn:hover {
  background: #16a34a !important;
  box-shadow: 0 8px 28px rgba(34, 197, 94, 0.45) !important;
  transform: translateY(-2px) !important;
}
.ud-hero-buttons .ud-link-btn {
  background: rgba(255,255,255,0.07) !important;
  color: rgba(255,255,255,0.9) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
}
.ud-hero-buttons .ud-link-btn:hover {
  background: rgba(255,255,255,0.12) !important;
  color: #fff !important;
  box-shadow: none !important;
  transform: none !important;
}

.ud-hero-badges {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 6px 20px; padding: 0; margin: 0 auto;
}
.ud-hero-badges li {
  font-size: 14px; color: rgba(255,255,255,0.5);
  display: flex; align-items: center; gap: 6px;
}
.ud-hero-badges li i { color: #22c55e; font-size: 15px; }

/* Hide hero image / brand (replaced by CSS gradient) */
.ud-hero-brands-wrapper,
.ud-hero-image { display: none; }

/* ============ Values Section (핵심 가치) ============ */
.ud-values {
  padding: 100px 0;
  background: #060608;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.ud-values-tagline {
  text-align: center;
  margin-bottom: 14px;
  font-size: clamp(26px, 4vw, 50px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.2;
}
.ud-values-word { color: #ffffff; }
.ud-values-word.accent { color: var(--primary-color); }
.ud-values-dot { color: rgba(255,255,255,0.18); margin: 0 14px; font-weight: 300; }
.ud-values-sub {
  text-align: center;
  font-size: 17px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 64px;
  line-height: 28px;
}
.ud-value-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 36px 28px;
  height: 100%;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.ud-value-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(to right, var(--primary-color), rgba(48,86,211,0));
  opacity: 0; transition: opacity 0.3s ease;
}
.ud-value-card:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.14);
  transform: translateY(-5px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}
.ud-value-card:hover::before { opacity: 1; }
.ud-value-icon {
  width: 54px; height: 54px;
  border-radius: 13px;
  background: rgba(48, 86, 211, 0.13);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; margin-bottom: 22px; color: var(--primary-color);
}
.ud-value-icon i { font-size: 26px; color: var(--primary-color); }
.ud-value-card h3 { font-size: 19px; font-weight: 700; color: #ffffff; margin-bottom: 12px; }
.ud-value-card p { font-size: 15px; line-height: 26px; color: rgba(255,255,255,0.52); }

/* ============ Features ============ */
.ud-features {
  background: #060608;
  padding-top: 100px;
  padding-bottom: 80px;
}
.ud-single-feature {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  padding: 32px 26px;
  margin-bottom: 24px;
  transition: all 0.3s ease;
}
.ud-single-feature:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.13);
  transform: translateY(-5px);
  box-shadow: 0 18px 50px rgba(0,0,0,0.45);
}
.ud-feature-icon {
  background: rgba(48, 86, 211, 0.14) !important;
  color: var(--primary-color) !important;
  border-radius: 14px !important;
}
.ud-feature-icon::before { background: rgba(48, 86, 211, 0.1) !important; }
.ud-feature-title { color: #ffffff !important; font-size: 18px !important; font-weight: 700 !important; }
.ud-feature-desc { color: rgba(255,255,255,0.55) !important; font-size: 15px !important; line-height: 25px !important; }

/* ============ Howto ============ */
.ud-howto {
  background: #08080c;
  padding: 100px 0 80px;
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.ud-howto-step {
  text-align: center;
  padding: 40px 26px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  margin-bottom: 24px;
  transition: all 0.3s ease;
}
.ud-howto-step:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.13);
  transform: translateY(-5px);
  box-shadow: 0 16px 50px rgba(0,0,0,0.45);
}
.ud-howto-number {
  width: 40px; height: 40px;
  background: var(--primary-color);
  color: #fff;
  border-radius: 50%;
  font-size: 16px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  box-shadow: 0 0 0 6px rgba(48,86,211,0.14);
}
.ud-howto-icon { font-size: 36px; margin-bottom: 18px; }
.ud-howto-icon i { font-size: 36px; color: rgba(255,255,255,0.2); }
.ud-howto-title { font-size: 20px; font-weight: 700; color: #ffffff; margin-bottom: 14px; }
.ud-howto-desc { font-size: 15px; line-height: 26px; color: rgba(255,255,255,0.52); }

/* ============ Pricing ============ */
.ud-pricing {
  background: #060608;
  padding-top: 100px;
  padding-bottom: 80px;
}
.ud-single-pricing {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  border-radius: 16px !important;
  padding: 34px 22px !important;
  margin-bottom: 24px;
  transition: all 0.3s ease;
  position: relative;
}
.ud-single-pricing::after { display: none !important; } /* hide decorative corners */
.ud-single-pricing:hover {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.15) !important;
  transform: translateY(-5px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.ud-single-pricing.active {
  background: linear-gradient(145deg, rgba(48,86,211,0.28) 0%, rgba(23,155,238,0.18) 100%) !important;
  border-color: rgba(48,86,211,0.5) !important;
  box-shadow: 0 0 0 1px rgba(48,86,211,0.3), 0 20px 60px rgba(48,86,211,0.2) !important;
  padding: 42px 22px !important;
  transform: scale(1.02);
}
.ud-single-pricing.active:hover { transform: scale(1.02) translateY(-4px); }

.ud-popular-tag {
  background: var(--primary-color) !important;
  color: #ffffff !important;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 14px !important;
  border-radius: 20px !important;
}
.ud-pricing-header h3 {
  color: rgba(255,255,255,0.55) !important;
  font-size: 13px !important; font-weight: 600 !important;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.ud-pricing-header h4 { color: #ffffff !important; }

.ud-price-currency { font-size: 20px; color: rgba(255,255,255,0.55); vertical-align: top; margin-top: 10px; display: inline-block; }
.ud-price-amount { font-size: 46px; font-weight: 800; color: #ffffff; line-height: 1; }
.ud-price-period { font-size: 14px; color: rgba(255,255,255,0.45); }

.ud-pricing-body { margin-bottom: 28px; }
.ud-pricing-body li {
  color: rgba(255,255,255,0.65) !important;
  font-size: 14px !important;
  margin-bottom: 12px !important;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.ud-pricing-body li i.lni-checkmark { color: #22c55e; }

.ud-single-pricing .ud-border-btn {
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: rgba(255,255,255,0.8) !important;
  background: rgba(255,255,255,0.06) !important;
  border-radius: 8px !important; padding: 12px 24px !important;
}
.ud-single-pricing .ud-border-btn:hover {
  background: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: #fff !important; transform: translateY(-1px);
}
.ud-single-pricing.active .ud-white-btn {
  background: #ffffff !important; color: var(--primary-color) !important;
  border-radius: 8px !important; padding: 12px 24px !important; font-weight: 700;
}
.ud-single-pricing.active .ud-white-btn:hover {
  background: #f0f4ff !important; transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25) !important;
}
/* Speed plan */
.ud-pricing-speed {
  border-color: #ff6a3c !important;
}
.ud-pricing-speed:hover {
  border-color: #ff6a3c !important;
  box-shadow: 0 20px 60px rgba(255,106,60,0.25) !important;
}
.ud-pricing-speed .ud-pricing-header h3 {
  color: #ff6a3c !important;
}
.ud-pricing-speed .ud-pricing-body li i.lni-checkmark {
  color: #ff6a3c !important;
}
.ud-pricing-subtitle {
  font-size: 13px !important;
  color: rgba(255,255,255,0.5) !important;
  margin-bottom: 8px;
}
.ud-speed-tag {
  background: #ff6a3c !important;
  color: #fff !important;
}
.ud-speed-btn {
  background: #ff6a3c !important;
  border-color: #ff6a3c !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 12px 24px !important;
  font-weight: 700;
}
.ud-speed-btn:hover {
  background: #e85a2e !important;
  border-color: #e85a2e !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(255,106,60,0.3) !important;
}
.ud-pricing-note {
  color: rgba(255,255,255,0.35); font-size: 13px; text-align: center; margin-top: 32px;
}

/* ============ FAQ ============ */
.ud-faq {
  background: #08080c !important;
  padding-top: 100px !important;
  padding-bottom: 80px !important;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.ud-faq .shape { display: none; }
.ud-single-faq {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  margin-bottom: 12px !important;
  overflow: hidden;
  transition: border-color 0.3s ease;
}
.ud-single-faq:hover { border-color: rgba(255,255,255,0.14) !important; }
.ud-faq-btn {
  color: rgba(255,255,255,0.88) !important;
  font-size: 16px !important; font-weight: 500 !important;
  padding: 22px 24px !important;
}
.ud-faq-btn span.icon {
  background: rgba(48, 86, 211, 0.12) !important;
  color: var(--primary-color) !important;
  border-radius: 8px !important;
  width: 36px !important; height: 36px !important;
  min-width: 36px;
}
.ud-faq-body {
  color: rgba(255,255,255,0.58) !important;
  font-size: 15px !important; line-height: 27px !important;
  padding: 0 24px 22px 84px !important;
}
@media (max-width: 991px) {
  .ud-faq-btn { padding: 18px !important; }
  .ud-faq-body { padding: 0 18px 18px 72px !important; }
}

/* ============ Testimonials ============ */
.ud-testimonials {
  background: #060608;
  padding-top: 100px;
  padding-bottom: 80px;
}
.ud-single-testimonial {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  padding: 32px !important;
  margin-bottom: 24px;
  transition: all 0.3s ease;
}
.ud-single-testimonial:hover {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.14) !important;
  transform: translateY(-5px);
  box-shadow: 0 16px 50px rgba(0,0,0,0.45);
}
.ud-testimonial-content p {
  color: rgba(255,255,255,0.62) !important;
  font-size: 15px !important; line-height: 28px !important;
}
.ud-testimonial-meta h4 { color: #ffffff !important; font-size: 14px !important; }
.ud-testimonial-meta p { color: rgba(255,255,255,0.38) !important; font-size: 12px !important; }

/* ============ Download ============ */
.ud-download {
  background: #08080c;
  padding: 100px 0 80px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.ud-download-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px; padding: 36px 20px;
  text-decoration: none; transition: all 0.3s ease;
  height: 100%; color: rgba(255,255,255,0.8);
  position: relative; overflow: hidden;
}
.ud-download-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(to right, var(--primary-color), #22c55e);
  opacity: 0; transition: opacity 0.3s ease;
}
.ud-download-card:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(48,86,211,0.4);
  color: #ffffff;
  transform: translateY(-6px);
  box-shadow: 0 22px 64px rgba(0,0,0,0.55);
}
.ud-download-card:hover::before { opacity: 1; }
.ud-download-icon { margin-bottom: 16px; transition: all 0.3s ease; line-height: 1; }
.ud-download-icon i { font-size: 40px; color: rgba(255,255,255,0.5); transition: all 0.3s ease; }
.ud-download-card:hover .ud-download-icon i { color: var(--primary-color); }
.ud-download-card-main h4 { color: #ffffff; font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.ud-download-card-main p { color: rgba(255,255,255,0.4); font-size: 13px; margin-bottom: 20px; }
.ud-download-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--primary-color);
  padding: 7px 16px;
  border: 1px solid rgba(48,86,211,0.3);
  border-radius: 6px; transition: all 0.25s ease; margin-top: auto;
}
.ud-download-card:hover .ud-download-btn {
  background: var(--primary-color); border-color: var(--primary-color); color: #ffffff;
}
.ud-download-card-sm { padding: 24px 16px; }
.ud-download-card-sm .ud-download-icon i { font-size: 28px; }
.ud-download-card-sm h5 { color: rgba(255,255,255,0.65); font-size: 13px; font-weight: 600; }

/* ============ CTA ============ */
.ud-cta {
  background: linear-gradient(135deg, #08080e 0%, #0d0d20 50%, #08080e 100%);
  padding: 100px 0;
  border-top: 1px solid rgba(255,255,255,0.07);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  position: relative; overflow: hidden;
}
.ud-cta::before {
  content: ''; position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 600px; height: 400px;
  background: radial-gradient(ellipse, rgba(48,86,211,0.14) 0%, transparent 70%);
  pointer-events: none;
}
.ud-cta-title {
  font-size: clamp(24px, 3vw, 40px) !important;
  font-weight: 800 !important; color: #ffffff !important;
  margin-bottom: 16px !important; line-height: 1.25 !important;
}
.ud-cta-desc { color: rgba(255,255,255,0.52) !important; font-size: 16px !important; margin-bottom: 22px !important; line-height: 28px !important; }
.ud-cta-badges { display: flex; flex-wrap: wrap; gap: 6px 20px; padding: 0; margin: 0; }
.ud-cta-badges li {
  font-size: 14px; color: rgba(255,255,255,0.48);
  display: flex; align-items: center; gap: 6px;
}
.ud-cta-badges li i { color: #22c55e; }
.ud-cta-btn { text-align: center; position: relative; z-index: 1; }
@media (max-width: 991px) { .ud-cta-btn { text-align: left; margin-top: 36px; } }
.ud-cta-btn .ud-white-btn {
  background: #22c55e !important; color: #ffffff !important; border: none !important;
  padding: 16px 36px !important; font-size: 16px !important; font-weight: 700 !important;
}
.ud-cta-btn .ud-white-btn:hover {
  background: #16a34a !important;
  box-shadow: 0 8px 30px rgba(34,197,94,0.42) !important;
  transform: translateY(-2px) !important;
}

/* ============ Footer ============ */
.ud-footer { background: #04040a !important; border-top: 1px solid rgba(255,255,255,0.07); }
.ud-footer .shape { display: none; }
.ud-widget-desc { color: rgba(255,255,255,0.45) !important; font-size: 14px !important; }
.ud-widget-title {
  color: rgba(255,255,255,0.9) !important; font-size: 13px !important;
  font-weight: 700 !important; letter-spacing: 0.08em; text-transform: uppercase;
}
.ud-widget-links a {
  color: rgba(255,255,255,0.48) !important; font-size: 14px !important;
  margin-bottom: 10px !important; display: block; transition: all 0.2s ease;
}
.ud-widget-links a:hover { color: #ffffff !important; padding-left: 8px !important; }
.ud-widget-socials a { color: rgba(255,255,255,0.45) !important; font-size: 18px !important; }
.ud-widget-socials a:hover { color: var(--primary-color) !important; }
.ud-footer-bottom { border-top: 1px solid rgba(255,255,255,0.07) !important; }
.ud-footer-bottom-left a { color: rgba(255,255,255,0.4) !important; font-size: 13px !important; }
.ud-footer-bottom-left a:hover { color: #ffffff !important; }
.ud-footer-bottom-right { color: rgba(255,255,255,0.38) !important; font-size: 13px !important; }

/* ============ Back to Top ============ */
.back-to-top {
  background: rgba(48, 86, 211, 0.88) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 8px !important;
  backdrop-filter: blur(8px);
}
.back-to-top:hover {
  background: var(--primary-color) !important;
  box-shadow: 0 4px 20px rgba(48,86,211,0.5) !important;
  color: #fff !important;
}

/* ============ Mobile CTA Bar ============ */

/* shimmer sweep 애니메이션 */
@keyframes cta-shimmer {
  0%   { background-position: -250% center; }
  100% { background-position: 250% center; }
}

/* 위아래 살짝 튀는 attention 애니메이션 */
@keyframes cta-bounce {
  0%, 100% { transform: translateY(0); }
  40%       { transform: translateY(-3px); }
  60%       { transform: translateY(-2px); }
}

.mobile-cta-bar { display: none; }

@media (max-width: 768px) {
  .mobile-cta-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    position: fixed;
    bottom: 0; left: 0;
    width: 100%;
    padding: 15px 20px;

    /* 초록 → 밝은 초록 그라데이션 + shimmer 레이어 */
    background:
      linear-gradient(
        105deg,
        transparent 30%,
        rgba(255,255,255,0.22) 50%,
        transparent 70%
      ),
      linear-gradient(to right, #16a34a, #22c55e, #16a34a);
    background-size: 250% 100%, 100% 100%;
    animation: cta-shimmer 3s linear infinite,
               cta-bounce  4s ease-in-out 2s infinite;

    color: #fff;
    font-weight: 700;
    font-size: 15px;
    text-align: center;
    z-index: 9999;
    text-decoration: none;
    cursor: pointer;
    border-top: 1px solid rgba(255,255,255,0.25);
    letter-spacing: -0.01em;
    box-shadow: 0 -4px 20px rgba(34, 197, 94, 0.35);
  }
  .mobile-cta-bar:hover {
    background:
      linear-gradient(
        105deg,
        transparent 30%,
        rgba(255,255,255,0.28) 50%,
        transparent 70%
      ),
      linear-gradient(to right, #15803d, #16a34a, #15803d);
    background-size: 250% 100%, 100% 100%;
    color: #fff;
    box-shadow: 0 -6px 28px rgba(34, 197, 94, 0.5);
  }
  .mobile-cta-bar .cta-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    text-transform: uppercase;
  }
  .mobile-cta-bar .cta-text { font-size: 14px; font-weight: 700; }
  .mobile-cta-bar .cta-arrow { font-size: 16px; }
  .mobile-cta-bar strong { font-weight: 900; }

  body { padding-bottom: 52px; }

  /* Mobile responsive tweaks */
  .ud-section-title h2 { font-size: 26px !important; line-height: 1.3 !important; }
  .ud-hero-buttons .ud-main-btn { padding: 14px 22px; font-size: 15px; }
  .ud-values-tagline { font-size: 28px; }
}

/* ============ Get Pages — OS Selector Pills ============ */
.ud-os-pills {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  list-style: none; padding: 0; margin: 0 0 32px;
}
.ud-os-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 18px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50px;
  color: rgba(255,255,255,0.7);
  font-size: 14px; font-weight: 600;
  text-decoration: none;
  transition: all 0.25s ease;
}
.ud-os-pill i { font-size: 15px; }
.ud-os-pill:hover {
  background: rgba(48,86,211,0.18);
  border-color: rgba(48,86,211,0.45);
  color: #ffffff;
}
.ud-os-pill.active {
  background: rgba(48,86,211,0.22);
  border-color: rgba(48,86,211,0.6);
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(48,86,211,0.12);
}

/* ============ Get Pages — App Cards ============ */
.ud-app-section {
  background: #08080c;
  padding: 80px 0;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.ud-app-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 32px;
  height: 100%;
  transition: all 0.3s ease;
}
.ud-app-card:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.14);
  transform: translateY(-5px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.ud-app-card-header {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 18px;
}
.ud-app-icon {
  width: 50px; height: 50px;
  background: rgba(48,86,211,0.14);
  border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ud-app-icon i { font-size: 24px; color: var(--primary-color); }
.ud-app-name { font-size: 17px; font-weight: 700; color: #ffffff; margin-bottom: 4px; }
.ud-app-badge {
  display: inline-block;
  font-size: 11px; font-weight: 700;
  padding: 3px 10px; border-radius: 20px;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.ud-badge-recommended {
  background: rgba(34,197,94,0.15);
  color: #22c55e;
  border: 1px solid rgba(34,197,94,0.3);
}
.ud-badge-optional {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.5);
  border: 1px solid rgba(255,255,255,0.12);
}
.ud-app-desc {
  color: rgba(255,255,255,0.55);
  font-size: 14px; line-height: 24px;
  margin-bottom: 24px;
}
.ud-app-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ud-app-actions .ud-main-btn { flex: 1; text-align: center; padding: 10px 16px; font-size: 14px; }
.ud-border-btn {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  color: rgba(255,255,255,0.75) !important;
}
.ud-border-btn:hover {
  background: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: #ffffff !important;
}

/* Override light inline backgrounds on get/ sections */
.ud-download { background: #08080c !important; }
.ud-features { background: #060608 !important; }

/* ============ Hero Platform Badge ============ */
.ud-hero-platform-badge {
  width: 72px; height: 72px;
  background: rgba(48, 86, 211, 0.15);
  border: 1px solid rgba(48, 86, 211, 0.3);
  border-radius: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0 auto 28px;
}
.ud-hero-platform-badge i { font-size: 34px; color: #fff; }

/* ============ App Card Enhancements ============ */
.ud-app-card-featured {
  border-color: rgba(48, 86, 211, 0.45) !important;
  background: rgba(48, 86, 211, 0.08) !important;
  box-shadow: 0 0 0 1px rgba(48, 86, 211, 0.2), 0 20px 60px rgba(48, 86, 211, 0.12);
}
.ud-app-card-featured::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(to right, var(--primary-color), #22c55e);
}
.ud-app-card { position: relative; overflow: hidden; }

.ud-app-tagline {
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  font-weight: 500;
  margin-bottom: 18px;
  margin-top: -10px;
  letter-spacing: 0.01em;
}

.ud-app-features {
  list-style: none; padding: 0; margin: 0 0 24px;
}
.ud-app-features li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13px; color: rgba(255,255,255,0.65);
  padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ud-app-features li:last-child { border-bottom: none; }
.ud-app-features li i { color: #22c55e; font-size: 14px; margin-top: 1px; flex-shrink: 0; }

.ud-app-icon-alt { background: rgba(99, 102, 241, 0.14) !important; }
.ud-app-icon-alt i { color: #818cf8 !important; }
.ud-app-icon-shield { background: rgba(234, 179, 8, 0.12) !important; }
.ud-app-icon-shield i { color: #eab308 !important; }

.ud-badge-speed {
  background: rgba(99, 102, 241, 0.15);
  color: #818cf8;
  border: 1px solid rgba(99, 102, 241, 0.3);
}
.ud-badge-advanced {
  background: rgba(234, 179, 8, 0.12);
  color: #eab308;
  border: 1px solid rgba(234, 179, 8, 0.3);
}

.ud-app-btn-primary {
  background: #22c55e !important;
  color: #fff !important;
  border: none !important;
}
.ud-app-btn-primary:hover {
  background: #16a34a !important;
  box-shadow: 0 6px 20px rgba(34,197,94,0.4) !important;
}

/* ============ Howto Checklist ============ */
.ud-howto-checklist {
  list-style: none; padding: 0; margin: 18px 0 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 16px;
}
.ud-howto-checklist li {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: rgba(255,255,255,0.5);
  padding: 4px 0;
}
.ud-howto-checklist li i { color: #22c55e; font-size: 14px; flex-shrink: 0; }