@font-face {
  font-family: 'GmarketSans';
  src: url('../ad/font/GmarketSansLight.otf') format('opentype');
  font-weight: 300;
}

@font-face {
  font-family: 'GmarketSans';
  src: url('../ad/font/GmarketSansMedium.otf') format('opentype');
  font-weight: 500;
}

@font-face {
  font-family: 'GmarketSans';
  src: url('../ad/font/GmarketSansBold.otf') format('opentype');
  font-weight: 700;
}

/* Header & Dropdown CSS */
.m-header {
  font-family: 'GmarketSans', sans-serif;
  position: fixed;
  top: 20px;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(10, 10, 15, 0.7);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50px;
  padding: 12px 35px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1400px;
  width: 95%;
  margin: 0 auto;
}

.m-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

.m-dropdown-menu {
  font-family: 'GmarketSans', sans-serif;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: rgba(10, 10, 15, 0.9);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 12px 0;
  min-width: 180px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1100;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
  margin-top: 15px;
}

.m-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid rgba(255, 255, 255, 0.1);
}

.m-dropdown:hover .m-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.m-dropdown-link {
  display: block;
  padding: 10px 24px;
  color: rgba(255, 255, 255, 0.8) !important;
  text-decoration: none !important;
  font-size: 0.85rem;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.m-dropdown-link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff !important;
  padding-left: 28px;
}

.m-dropdown-trigger {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}

.tracking-tighter {
  letter-spacing: -0.05em;
}

@media (max-width: 768px) {
  .m-header {
    padding: 10px 20px;
    top: 10px;
  }
}

/* --- Standardized CTA Footer Bar (Synced with Index.html) --- */
    :root {
      --m-blue: #402fb5;
      --m-pink: #cf30aa;
    }

    body {
      padding-bottom: 250px !important;
    }

    @media (max-width: 768px) {
      body {
        padding-bottom: 220px !important;
      }
    }

    .footer-actions-container-ps {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 220px;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(40px);
      -webkit-backdrop-filter: blur(40px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 10px 20px;
      box-sizing: border-box;
      z-index: 2000;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow: 0px -10px 40px rgba(0, 0, 0, 0.8);
    }

    .ps-footer-cta-text {
      color: #fff !important;
      font-size: 2.2rem;
      font-weight: 800;
      text-align: center;
      line-height: 1.3;
      margin-bottom: 20px;
      text-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
      font-family: 'GmarketSans', sans-serif !important;
    }

    .ps-button-wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 20px;
      width: 100%;
      max-width: 900px;
    }

    .ps-footer-btn {
      position: relative;
      flex: 1;
      max-width: 400px;
      height: 50px;
      text-decoration: none !important;
      color: #fff !important;
      font-weight: 700;
      font-size: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      border-radius: 12px;
      overflow: hidden;
      transition: transform 0.3s ease;
    }

    .ps-footer-btn:hover {
      transform: translateY(-2px);
    }

    .ps-footer-btn .poda-bg-layer {
      position: absolute;
      z-index: 0;
      inset: -2px;
      border-radius: 12px;
      overflow: hidden;
      pointer-events: none;
      opacity: 1;
    }

    .ps-footer-btn .poda-bg-layer::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 600px;
      height: 600px;
      transform: translate(-50%, -50%);
      transition: all 2s;
    }

    .ps-footer-btn .poda-bg-layer.l1 {
      filter: blur(4px);
      opacity: 0.8;
    }

    .ps-footer-btn .poda-bg-layer.l1::before {
      background: conic-gradient(#000, var(--m-blue) 5%, #000 38%, #000 50%, var(--m-pink) 60%, #000 87%);
      transform: translate(-50%, -50%) rotate(60deg);
    }

    .ps-footer-btn .poda-bg-layer.l2 {
      filter: blur(3px);
      opacity: 0.7;
    }

    .ps-footer-btn .poda-bg-layer.l2::before {
      background: conic-gradient(rgba(0, 0, 0, 0), #18116a, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0) 50%, #6e1b60, rgba(0, 0, 0, 0) 60%);
      transform: translate(-50%, -50%) rotate(82deg);
    }

    .ps-footer-btn .poda-bg-layer.l3 {
      filter: blur(2px);
      opacity: 0.5;
    }

    .ps-footer-btn .poda-bg-layer.l3::before {
      background: conic-gradient(rgba(0, 0, 0, 0) 0%, #a099d8, rgba(0, 0, 0, 0) 8%, rgba(0, 0, 0, 0) 50%, #dfa2da, rgba(0, 0, 0, 0) 58%);
      transform: translate(-50%, -50%) rotate(83deg);
      filter: brightness(1.4);
    }

    .ps-footer-btn .poda-bg-layer.l4 {
      filter: blur(0.5px);
    }

    .ps-footer-btn .poda-bg-layer.l4::before {
      background: conic-gradient(#1c191c, var(--m-blue) 5%, #1c191c 14%, #1c191c 50%, var(--m-pink) 60%, #1c191c 64%);
      transform: translate(-50%, -50%) rotate(70deg);
      filter: brightness(1.3);
    }

    .ps-footer-btn .btn-content {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      gap: 8px;
      color: #fff !important;
    }

    @keyframes icon-shake {

      0%,
      100% {
        transform: rotate(0deg);
      }

      25% {
        transform: rotate(-10deg);
      }

      75% {
        transform: rotate(10deg);
      }
    }

    .ps-footer-btn .btn-content i {
      display: inline-block;
      animation: icon-shake 0.5s ease-in-out infinite;
      transform-origin: center;
      font-size: 1.2rem;
    }

    .ps-footer-btn::after {
      content: '';
      position: absolute;
      inset: 1px;
      background: #010201;
      border-radius: 11px;
      z-index: 1;
    }

    @media (max-width: 768px) {
      .footer-actions-container-ps {
        height: 220px;
        padding: 4px 20px 15px;
      }

      .ps-footer-cta-text {
        font-size: 1.6rem;
        margin-bottom: 15px;
      }

      .ps-button-wrapper {
        flex-direction: column;
        gap: 12px;
      }

      .ps-footer-btn {
        width: 100%;
        max-width: none;
        height: 50px;
        font-size: 0.95rem;
      }
    }

    :root {
      --m-blue: #402fb5;
      --m-pink: #cf30aa;
      --m-white: #ffffff;
      --m-dim: rgba(255, 255, 255, 0.6);

      /* Dark Neumorphism Variables */
      --neu-bg: #121215;
      --neu-shadow-dark: rgba(0, 0, 0, 0.8);
      --neu-shadow-light: rgba(255, 255, 255, 0.05);
      --neu-border: rgba(255, 255, 255, 0.03);

      --neon-shadow: 0 0 20px rgba(207, 48, 170, 0.4);
    }

    body, h1, h2, h3, h4, h5, h6, p, a, span:not(.bi):not(.ri):not(.bx), li, th, td, input, button, select, textarea {
      font-family: 'GmarketSans', sans-serif !important;
    }

    body {
      background: transparent !important;
      color: var(--m-white) !important;
    }

    /* Global Reset of Clunky Old Shadows & Backgrounds */
    .section-bg,
    .section-bg2,
    #hero,
    .team,
    .team2,
    .skills,
    .services,
    .why-us,
    .about,
    .pricing,
    .faq,
    .contact {
      background: transparent !important;
      box-shadow: none !important;
    }

    /* Premium Typography */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      color: var(--m-white);
      font-weight: 700;
      letter-spacing: -0.5px;
    }

    /* Specific Theme Accents */
    .theme_color,
    span.theme_color {
      color: var(--m-blue) !important;
      background: transparent !important;
    }

    .theme_color2,
    span.theme_color2 {
      color: var(--m-pink) !important;
      background: transparent !important;
    }

    .theme_color3,
    span.theme_color3 {
      color: var(--m-white) !important;
      background: transparent !important;
    }

    /* Fix Specific Old Texts that were dark */
    .why-us .content p,
    .section-title p,
    .fst-italic,
    .small_tag {
      color: var(--m-dim) !important;
    }

    .section-title h2 {
      color: var(--m-white) !important;
      text-shadow: var(--neon-shadow);
    }

    /* --- 3D Glassmorphism Boxes --- */
    .why-us .accordion-list ul {
      padding: 0;
    }

    .why-us .accordion-list li,
    .icon-box,
    .member,
    .card,
    .pricing .box,
    .services .icon-box {
      /* Glass Translucency & Blur */
      background: linear-gradient(135deg, rgba(40, 40, 55, 0.07) 0%, rgba(5, 5, 10, 0.02) 100%) !important;
      backdrop-filter: blur(25px) !important;
      -webkit-backdrop-filter: blur(25px) !important;

      /* 3D Glass Edges (Light top/left, Dark bottom/right) */
      border-top: 2px solid rgba(255, 255, 255, 0.25) !important;
      border-left: 2px solid rgba(255, 255, 255, 0.15) !important;
      border-right: 1px solid rgba(0, 0, 0, 0.4) !important;
      border-bottom: 1px solid rgba(0, 0, 0, 0.5) !important;
      border-radius: 20px !important;

      /* 3D Outer & Inner Shadows */
      box-shadow: 25px 25px 50px rgba(0, 0, 0, 0.9),
        -10px -10px 30px rgba(255, 255, 255, 0.03),
        inset 3px 3px 15px rgba(255, 255, 255, 0.15),
        inset -3px -3px 15px rgba(0, 0, 0, 0.8) !important;

      transition: all 0.6s ease-in-out !important;
      color: var(--m-white) !important;
      margin-bottom: 25px !important;
      padding: 25px !important;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      position: relative;
    }

    /* Hover Effects for 3D Pop */
    .why-us .accordion-list li:hover,
    .icon-box:hover,
    .member:hover,
    .card:hover,
    .services .icon-box:hover {
      transform: translateY(-4px) scale(1.01);
      background: rgba(20, 20, 30, 0.15) !important;
      /* Glowing borders matching the intense blue and pink */
      border-top: 2px solid rgba(0, 85, 255, 0.9) !important;
      border-left: 2px solid rgba(0, 85, 255, 0.6) !important;
      border-right: 2px solid rgba(255, 0, 204, 0.9) !important;
      border-bottom: 2px solid rgba(255, 0, 204, 0.6) !important;
      /* Reduced double neon glow by half: Top-Left Deep Blue, Bottom-Right Bright Pink */
      box-shadow:
        -10px -10px 25px rgba(0, 85, 255, 0.8),
        10px 10px 25px rgba(255, 0, 204, 0.8),
        inset 1px 1px 8px rgba(255, 255, 255, 0.3) !important;
    }

    /* Input Fields Glassmorphism */
    input,
    textarea,
    select {
      background: rgba(0, 0, 0, 0.6) !important;
      backdrop-filter: blur(10px) !important;
      -webkit-backdrop-filter: blur(10px) !important;
      border-top: 1px solid rgba(0, 0, 0, 0.6) !important;
      border-left: 1px solid rgba(0, 0, 0, 0.6) !important;
      border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
      border-radius: 12px !important;
      box-shadow: inset 4px 4px 10px rgba(0, 0, 0, 0.7) !important;
      color: var(--m-white) !important;
      padding: 15px !important;
    }

    input:focus,
    textarea:focus,
    select:focus {
      outline: none !important;
      background: rgba(0, 0, 0, 0.5) !important;
      border-color: rgba(8, 146, 253, 0.5) !important;
      box-shadow: inset 4px 4px 10px rgba(0, 0, 0, 0.8),
        0 0 15px rgba(8, 146, 253, 0.3) !important;
    }

    /* Navbar Glassmorphism */
    .navbar .dropdown ul {
      background: rgba(10, 10, 15, 0.8) !important;
      backdrop-filter: blur(20px) !important;
      -webkit-backdrop-filter: blur(20px) !important;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.7);
    }

    .navbar-mobile ul {
      background: rgba(10, 10, 15, 0.9) !important;
      backdrop-filter: blur(20px) !important;
      -webkit-backdrop-filter: blur(20px) !important;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* Stunning Neon Section Numbers */
    p.section_count,
    p.section_count2,
    p.section_count3 {
      /* Reverted text color to the original blue/pink gradient */
      background-image: linear-gradient(135deg, var(--m-blue), var(--m-pink)) !important;
      -webkit-background-clip: text !important;
      background-clip: text !important;
      color: transparent !important;
      /* Restored light bleed (glow) effect, using the neon purple/violet from the image background */
      filter: drop-shadow(0px 10px 30px rgba(162, 0, 255, 0.8)) !important;
      font-size: 130px !important;
      font-weight: 900 !important;
      line-height: 1 !important;
      opacity: 0.9;
      margin-top: 20px !important;
    }

    /* News Ticker Revamp - Neumorphic Strip */
    .latest-news-section {
      background: var(--neu-bg) !important;
      border-top: 1px solid var(--neu-border) !important;
      border-bottom: 1px solid var(--neu-border) !important;
      padding: 20px 0 !important;
      box-shadow: 10px 10px 20px var(--neu-shadow-dark) !important;
      height: auto !important;
    }

    .news-ticker-contant .nt-item {
      color: var(--m-white) !important;
      font-weight: 500 !important;
      font-size: 1.56rem !important;
      letter-spacing: 0.5px;
    }

    /* Navbar fixes */
    .navbar .dropdown ul {
      background: var(--neu-bg) !important;
      border: 1px solid var(--neu-border);
      border-radius: 12px;
      box-shadow: 10px 10px 20px var(--neu-shadow-dark);
    }

    .navbar-mobile ul {
      background: var(--neu-bg) !important;
      border: 1px solid var(--neu-border);
    }


    /* --- Restored Text Colors for Visibility --- */
    .why-us .accordion-list a {
      color: var(--m-white) !important;
      font-weight: 700 !important;
      font-size: 1.2rem !important;
      display: flex;
      align-items: center;
      width: 100%;
    }

    .why-us .accordion-list a.collapsed {
      color: rgba(255, 255, 255, 0.7) !important;
    }

    .why-us .accordion-list p {
      color: rgba(255, 255, 255, 0.8) !important;
      margin-top: 15px;
      line-height: 1.7;
    }

    .why-us .accordion-list a span {
      color: var(--m-pink) !important;
      font-weight: 900 !important;
      font-size: 1.4rem !important;
      margin-right: 10px;
      text-shadow: 0 0 10px rgba(207, 48, 170, 0.5) !important;
    }

    /* Apply text shadow ONLY to normal text elements to prevent ruining gradient transparent text */
    .why-us .accordion-list a,
    .why-us .accordion-list p,
    .content p,
    .section-title p,
    .small_tag {
      text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.8);
    }

    /* --- Latest News Strip (Glassmorphism Fix) --- */
    .latest-news-section {
      background: rgba(0, 0, 0, 0.2) !important;
      backdrop-filter: blur(15px) !important;
      -webkit-backdrop-filter: blur(15px) !important;
      border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
      padding: 15px 0 !important;
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5) !important;
      height: auto !important;
    }

    .news-ticker-contant .nt-item {
      color: var(--m-white) !important;
      font-weight: 600 !important;
      font-size: 1.43rem !important;
      letter-spacing: 0.5px;
      text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.9);
    }


    /* Expand Icon Boxes to fill columns uniformly and center their content */
    .icon-box,
    .services .icon-box {
      width: 100% !important;
      align-items: center !important;
      text-align: center !important;
      justify-content: center !important;
      min-height: 220px !important;
    }


    /* --- Hero Section Color Swap (Highlight: White, Regular: Blue) --- */
    #hero h1,
    #hero h2,
    #hero p {
      color: var(--m-blue) !important;
    }

    #hero .theme_color {
      color: var(--m-white) !important;
      text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.8);
    }

    #hero .theme_color3 {
      color: var(--m-blue) !important;
    }


    /* --- Fix Section 03 Inner Text Colors --- */
    .icon-box h4 a,
    .icon-box h4,
    .icon-box p {
      color: var(--m-white) !important;
      text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.8);
      font-weight: 700 !important;
    }

    .icon-box h4 a:hover {
      color: var(--m-pink) !important;
    }

    .colored-text2 {
      color: var(--m-white) !important;
      text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.8);
    }


    /* --- Fix Section 04, 05 (.member) Layout: Video Left, Text Right --- */
    .member {
      flex-direction: row !important;
      align-items: center !important;
      gap: 25px;
    }

    .member .pic {
      flex: 0 0 160px !important;
      /* Fixed width for the video/image to sit on the left */
      border-radius: 15px;
      overflow: hidden;
      margin-bottom: 0 !important;
    }

    .member .pic video,
    .member .pic img {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 15px;
    }

    .member .member-info {
      flex: 1;
      text-align: left;
    }

    @media (max-width: 768px) {
      .member {
        flex-direction: column !important;
        text-align: center;
      }

      .member .member-info {
        text-align: center;
        margin-top: 15px;
      }
    }


    /* --- Specific Video Sizes for 04 and 05 --- */
    .team2 .member .pic {
      flex: 0 0 50% !important;
      /* Huge video (takes half the box), approx 4x larger visual area than 160px */
      max-width: 50% !important;
    }

    .team .member .pic {
      flex: 0 0 40% !important;
      /* Very large video, approx 3x larger visual area */
      max-width: 40% !important;
    }

    .member .member-info {
      padding-left: 20px !important;
    }

    @media (max-width: 768px) {

      .team2 .member .pic,
      .team .member .pic {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 15px !important;
      }
    }

    /* --- Hero Image Enlargement (2x visual impact) --- */
    #hero .hero-img img {
      width: 130% !important;
      max-width: none !important;
      transform: scale(1.1);
      transform-origin: left center;
      transition: all 0.3s ease;
    }

    @media (max-width: 991px) {
      #hero .hero-img img {
        width: 80% !important;
        transform: none;
      }
    }
  .ps-footer-btn:hover .poda-bg-layer::before {
    animation: spin-slow 3s linear infinite !important;
}
@keyframes spin-slow {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* --- Premium DNA Card & Execution Section Styles (Synced with index.html) --- */
    .neu-card {
      background: rgba(255, 255, 255, 0.03);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.05);
      border-radius: 30px;
      padding: 60px 40px;
      margin-bottom: 60px;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    }

    .dna-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 25px;
      margin-top: 50px;
    }

    .dna-card.row-1 {
      grid-column: span 3;
    }

    .dna-card.row-2 {
      grid-column: span 2;
    }

    @media (max-width: 992px) {
      .dna-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
      }
      .dna-grid .dna-card:first-child {
        grid-column: span 2 !important;
      }
      .dna-grid .dna-card:not(:first-child) {
        grid-column: span 1 !important;
      }
    }

    @media (max-width: 768px) {
      .dna-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
      }
      .dna-grid .dna-card:first-child {
        grid-column: span 2 !important;
      }
      .dna-grid .dna-card:not(:first-child) {
        grid-column: span 1 !important;
      }
      /* 모바일 화면 카드 너비 축소에 따른 가독성 보완 */
      .dna-card-inner {
        padding: 16px !important;
      }
      .dna-title {
        font-size: 1.15rem !important;
      }
      .dna-icon-box {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.25rem !important;
        margin-bottom: 12px !important;
      }
      .dna-tag-cloud {
        gap: 4px !important;
        margin-top: 12px !important;
      }
      .dna-tag {
        font-size: 0.7rem !important;
        padding: 3px 8px !important;
      }

      .neu-card {
        padding: 40px 20px;
      }
    }

    .dna-card {
      background: transparent;
      border-radius: 20px;
      padding: 6px;
      overflow: hidden;
      position: relative;
      isolation: isolate;
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      border: none;
      display: flex;
    }

    .dna-card .poda-bg-layer {
      position: absolute;
      z-index: -1;
      inset: -1px;
      border-radius: 20px;
      overflow: hidden;
      pointer-events: none;
      opacity: 0.5;
      transition: opacity 0.3s;
    }

    .dna-card:hover .poda-bg-layer {
      opacity: 1;
    }

    .dna-card .poda-bg-layer::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 800px;
      height: 800px;
      background: conic-gradient(transparent 0deg, var(--m-blue) 15deg, transparent 60deg, transparent 180deg, var(--m-pink) 195deg, transparent 240deg);
      transform: translate(-50%, -50%) rotate(0deg);
      filter: brightness(1.3) blur(2px);
      animation: dna-spin 4s linear infinite;
    }

    @keyframes dna-spin {
      from {
        transform: translate(-50%, -50%) rotate(0deg);
      }

      to {
        transform: translate(-50%, -50%) rotate(360deg);
      }
    }

    .dna-card-inner {
      position: relative;
      z-index: 2;
      background: #010201;
      border-radius: 14px;
      height: 100%;
      width: 100%;
      padding: 30px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .dna-video-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.15;
      z-index: -1;
      filter: grayscale(1) contrast(1.2);
      transition: 0.5s;
    }

    .dna-card:hover .dna-video-bg {
      opacity: 1;
      filter: grayscale(0);
      transform: scale(1.35);
    }

    .dna-title {
      font-size: 1.4rem;
      font-weight: 700;
      margin-bottom: 5px;
      color: var(--m-white) !important;
      display: block;
      text-decoration: none !important;
      transition: 0.3s;
      transform-origin: left center;
    }

    .dna-card:hover .dna-title {
      color: var(--m-blue) !important;
      transform: scale(1.1);
    }

    .dna-icon-box {
      width: 50px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      font-size: 1.6rem;
      transition: 0.3s;
    }

    .dna-icon-box i {
      background: linear-gradient(135deg, var(--m-blue), var(--m-pink));
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .dna-tag-cloud {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 20px;
    }

    .dna-tag {
      font-size: 0.75rem;
      padding: 4px 12px;
      border-radius: 50px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: var(--m-dim) !important;
      text-decoration: none !important;
      transition: 0.3s;
    }

    .dna-tag:hover {
      background: var(--m-blue);
      color: #fff !important;
      border-color: var(--m-blue);
    }

    .exec-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 25px;
      margin-top: 50px;
    }

    @media (max-width: 768px) {
      .exec-grid {
        grid-template-columns: 1fr;
      }
    }
  .ps-footer-btn:hover .poda-bg-layer::before {
    animation: spin-slow 3s linear infinite !important;
}
@keyframes spin-slow {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}
.video-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.video-container video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

/* --- Mobile Responsive Navigation Styles --- */
.m-menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
    margin-left: 15px;
    order: 99 !important;
}

.m-menu-toggle .bar {
    width: 100%;
    height: 2px;
    background-color: #fff;
    border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.m-menu-toggle.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.m-menu-toggle.active .bar:nth-child(2) {
    opacity: 0;
}

.m-menu-toggle.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

.m-mobile-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 320px;
    height: 100vh;
    background: rgba(5, 5, 8, 0.95);
    backdrop-filter: blur(35px);
    -webkit-backdrop-filter: blur(35px);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.8), -2px 0 15px rgba(207, 48, 170, 0.2);
    z-index: 2500;
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

.m-mobile-nav.active {
    right: 0;
}

.m-mobile-nav-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.m-mobile-nav-logo {
    display: flex;
    align-items: center;
    gap: 8px;
}

.m-mobile-nav-logo span {
    font-weight: 700;
    font-size: 0.9rem;
    color: #fff;
    letter-spacing: -0.03em;
}

.m-menu-close {
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.6);
    background: transparent;
    border: none;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
}

.m-menu-close:hover {
    color: #fff;
}

.m-mobile-nav-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.m-mobile-link {
    display: block;
    padding: 12px 0;
    font-size: 1.1rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8) !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    transition: all 0.3s;
}

.m-mobile-link:hover {
    color: #fff !important;
    padding-left: 8px;
    text-shadow: 0 0 8px rgba(64, 47, 181, 0.6);
}

.m-mobile-accordion {
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.m-mobile-accordion-trigger {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 0;
    background: transparent;
    border: none;
    font-size: 1.1rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    text-align: left;
    cursor: pointer;
    transition: color 0.3s;
}

.m-mobile-accordion-trigger:hover,
.m-mobile-accordion.active .m-mobile-accordion-trigger {
    color: #fff;
}

.m-mobile-accordion-trigger i {
    font-size: 0.85rem;
    transition: transform 0.3s;
}

.m-mobile-accordion.active .m-mobile-accordion-trigger i {
    transform: rotate(180deg);
}

.m-mobile-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    margin-bottom: 8px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 0;
}

.m-mobile-accordion.active .m-mobile-accordion-content {
    padding: 10px;
}

.m-mobile-sublink {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.8) !important;
    text-decoration: none !important;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    text-align: center;
    transition: all 0.2s ease;
    word-break: keep-all;
    height: 40px;
}

.m-mobile-sublink:hover {
    color: #fff !important;
    background: rgba(64, 47, 181, 0.3);
    border-color: var(--m-blue);
    box-shadow: 0 0 10px rgba(64, 47, 181, 0.4);
}

/* --- Content Mobile Optimization --- */
@media (max-width: 768px) {
    .table-responsive {
        border-radius: 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .table th, .table td {
        padding: 8px 12px !important;
        font-size: 0.85rem !important;
    }

    .quick-answer-card {
        padding: 16px !important;
        border-radius: 12px !important;
    }
    
    .qa-item-box {
        padding: 16px !important;
        border-radius: 10px !important;
    }

    /* 모바일 헤더 텍스트 및 불필요 요소 정리 */
    .m-header {
        padding: 10px 16px !important;
        width: 92% !important;
    }
    
    .m-header .fw-bold.tracking-tighter {
        white-space: nowrap !important;
        font-size: 0.8rem !important;
        letter-spacing: -0.04em !important;
    }
    
    .m-header .lang-switcher {
        display: none !important;
    }
}

/* ROI 상승 그래프 & 마케팅 실패 원인 공통 스타일 (index.html과 100% 동일) */
.hook-box {
    font-family: 'GmarketSans', sans-serif !important;
    text-align: center;
    padding: 40px;
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    margin-bottom: 40px;
}

.hook-box h3 {
    font-family: 'GmarketSans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 2rem !important;
    line-height: 1.4 !important;
    color: #fff !important;
}

.hook-box p.lead {
    font-family: 'GmarketSans', sans-serif !important;
    font-weight: 300 !important;
    font-size: 1.15rem !important;
    line-height: 1.7 !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

.graph-wrap {
    width: 100%;
    max-width: 900px;
    height: 250px;
    margin: 40px auto;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 20px;
    padding: 24px;
    position: relative;
    border: 1px solid var(--glass-border);
}

.graph-line {
    fill: none;
    stroke: var(--m-pink);
    stroke-width: 4;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    filter: drop-shadow(0 0 8px var(--m-pink));
}

.graph-active .graph-line {
    animation: draw 7s forwards ease-in-out;
}

@keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}

.m-badge {
    background: rgba(207, 48, 170, 0.1);
    border: 1px solid var(--m-pink);
    color: var(--m-pink);
    padding: 5px 15px;
    border-radius: 50px;
    font-size: 0.8rem;
}

/* Custom inheritance helper for inline cross-links to prevent color change, size change, and line breaks */
a.a-inherit-opt {
  color: inherit !important;
  text-decoration: none !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  display: inline !important;
  white-space: nowrap !important;
}

a.a-inherit-opt:hover, 
a.a-inherit-opt:focus, 
a.a-inherit-opt:active {
  color: inherit !important;
  text-decoration: none !important;
  background: transparent !important;
}