/* ===== Dragon Gate Direction — CSS ===== */

:root {
    --dg-purple:       #2d1b4e;
    --dg-purple-dark:  #1a0f30;
    --dg-purple-mid:   #3d2860;
    --dg-violet:       #6b3fa0;
    --dg-violet-light: #9b6ecc;
    --dg-gold:         #c8a96e;
    --dg-gold-light:   #e8cfa0;
    --dg-text:         #f0e8d8;
    --dg-muted:        #b8a8c8;
}

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

body.dragon-gate {
    font-family: 'Segoe UI', Roboto, sans-serif;
    background: var(--dg-purple-dark);
    color: var(--dg-text);
    line-height: 1.5;
}

/* ─── HEADER OVERRIDES ──────────────────────────────────── */

body.dragon-gate .hl-header {
    background: transparent;
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 100;
    padding: 16px 0;
}

/* Логотип: горизонтальный ряд (иконка слева, текст справа) */
body.dragon-gate .hl-logo {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 14px;
}

/* Иконка: убираем border-radius, делаем больше */
body.dragon-gate .hl-logo-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: none;
    flex-shrink: 0;
    overflow: visible;
    background: transparent;
}

/* Логотип с прозрачным фоном */
body.dragon-gate .hl-logo-icon img {
    content: url('/images/dragongate/logo_red.png');
    width: 72px;
    height: 72px;
    object-fit: contain;
}

/* Имя сайта: скрываем "ONEDAO", показываем "Клуб Лун Мэнь" */
body.dragon-gate .hl-logo-text strong {
    color: transparent;
    font-size: 0;
    line-height: 0;
}

body.dragon-gate .hl-logo-text strong::before {
    content: 'Клуб Лун Мэнь';
    color: #fff;
    font-size: 22px;
    font-family: 'Cormorant SC', Georgia, serif;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.2;
}

/* Скрываем "ACADEMY" */
body.dragon-gate .hl-logo-text span {
    font-size: 0;
    color: transparent;
    justify-content: flex-start;
}

body.dragon-gate .hl-logo-text span::before,
body.dragon-gate .hl-logo-text span::after {
    display: none;
}

/* Подзаголовок "ТРАДИЦИЯ • ПРАКТИКА • ПРОБУЖДЕНИЕ" */
body.dragon-gate .hl-logo-text::after {
    content: 'ТРАДИЦИЯ • ПРАКТИКА • ПРОБУЖДЕНИЕ';
    display: block;
    font-size: 9px;
    letter-spacing: .14em;
    color: var(--dg-gold);
    font-weight: 500;
    margin-top: 3px;
    white-space: nowrap;
}

/* Цвет ссылок меню и языкового переключателя */
body.dragon-gate .hl-nav a,
body.dragon-gate .hl-nav button,
body.dragon-gate .hl-lang,
body.dragon-gate .hl-lang-dropdown-menu a {
    color: rgba(255,255,255,.85);
}

body.dragon-gate .hl-nav-dropdown-menu a {
    color: #1a1a1a;
}

body.dragon-gate .hl-nav a:hover,
body.dragon-gate .hl-nav button:hover {
    color: var(--dg-gold);
}

/* Dropdown стрелки/иконки */
body.dragon-gate .hl-nav-dropdown-toggle::after {
    border-color: rgba(255,255,255,.7) transparent transparent;
}

body.dragon-gate .hl-burger-btn span {
    background: #fff;
}

/* ─── HERO ─────────────────────────────────────────────── */

.dg-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: url('/images/dragongate/head_bg.jpg') center top / cover no-repeat;
}

.dg-hero-figures {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.dg-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.15);
    z-index: 1;
}

.dg-hero-fig-left,
.dg-hero-fig-right {
    position: absolute;
    bottom: 0;
    width: 28%;
    max-width: 320px;
}

.dg-hero-fig-left  { left: 2%; }
.dg-hero-fig-right { right: 2%; transform: scaleX(-1); }

.dg-hero-fig-center {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 32%;
    max-width: 380px;
}

.dg-hero-fig-left img,
.dg-hero-fig-right img,
.dg-hero-fig-center img {
    width: 100%;
    height: auto;
    display: block;
    -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 20%, #000 85%, transparent 100%);
    mask-image: linear-gradient(to top, transparent 0%, #000 20%, #000 85%, transparent 100%);
}

.dg-hero-content {
    position: relative;
    z-index: 3;
    text-align: center;
    padding: 140px 20px 80px;
    max-width: 700px;
}

.dg-hero-zh {
    font-family: 'Ma Shan Zheng', Georgia, serif;
    font-size: 42px;
    color: #8b6914;
    letter-spacing: 8px;
    line-height: 1;
    margin-bottom: 12px;
    text-shadow: none;
}

.dg-hero-seal {
    display: inline-block;
    border: 2px solid var(--dg-gold);
    border-radius: 3px;
    color: var(--dg-gold);
    font-family: 'Ma Shan Zheng', serif;
    font-size: 13px;
    padding: 2px 6px;
    letter-spacing: 2px;
    margin-bottom: 20px;
    opacity: .8;
}

.dg-hero-title {
    font-size: clamp(25px, 4.2vw, 45px);
    font-weight: 700;
    color: #1a1230;
    letter-spacing: .06em;
    line-height: 1.1;
    margin-bottom: 20px;
    text-shadow: none;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.dg-hero-title .red-seal-box {
    flex-shrink: 0;
    transform: scale(2);
    transform-origin: left bottom;
    margin-bottom: 4px;
    margin-left: 10px;
}

.dg-hero-subtitle {
    font-size: clamp(12px, 1.6vw, 15px);
    color: #3d2a6e;
    letter-spacing: .2em;
    text-transform: uppercase;
    margin-bottom: 20px;
    line-height: 1.6;
    text-shadow: none;
}

.dg-hero-btn {
    display: inline-block;
    padding: 14px 36px;
    background: var(--dg-violet);
    color: #fff;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .2s, transform .2s;
    border: 1px solid rgba(155, 110, 204, .5);
}

.dg-hero-btn:hover {
    background: #7d4db8;
    transform: translateY(-1px);
}

.dg-hero-lead {
    font-size: 15px;
    color: #2d1f50;
    line-height: 1.8;
    max-width: 520px;
    margin: 0 auto 36px;
    text-shadow: none;
    font-style: italic;
}

.dg-hero-scroll {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 40px;
    border: 2px solid rgba(200,169,110,.35);
    border-radius: 12px;
    display: flex;
    justify-content: center;
    padding-top: 6px;
}

.dg-hero-scroll::after {
    content: '';
    width: 4px;
    height: 8px;
    background: var(--dg-gold);
    border-radius: 2px;
    animation: dg-scroll-dot 1.6s ease-in-out infinite;
}

@keyframes dg-scroll-dot {
    0%, 100% { opacity: 1; transform: translateY(0); }
    50%       { opacity: 0; transform: translateY(8px); }
}

/* ─── ABOUT ─────────────────────────────────────────────── */

.dg-about {
    position: relative;
    padding: 158px 0;
    border-top: 1px solid rgba(107, 63, 160, .2);
    background: url('/images/dragongate/section_bg.png') center center / cover no-repeat;
}

.dg-about .dg-container {
    position: relative;
    z-index: 1;
}

.dg-container {
    max-width: 1290px;
    margin: 0 auto;
    padding: 0 40px;
}

.dg-about-grid {
    display: grid;
    grid-template-columns: 1fr 280px 1fr;
    gap: 48px;
    align-items: start;
}

.dg-about-left { text-align: left; }

.dg-about-zh {
    font-family: 'Ma Shan Zheng', Georgia, serif;
    font-size: 48px;
    color: #8b6914;
    letter-spacing: 6px;
    line-height: 1;
    margin-bottom: 8px;
    text-shadow: none;
}

.dg-about-seal-row { margin: 4px 0 8px; }

.dg-about-name {
    font-size: 22px;
    font-weight: 700;
    color: #1a1230;
    margin-bottom: 4px;
    letter-spacing: .06em;
}

.dg-about-motto {
    font-size: 13px;
    font-weight: 700;
    color: #4a3878;
    letter-spacing: .06em;
    margin-bottom: 12px;
    font-style: italic;
}

.dg-about-tags {
    font-size: 11px;
    color: #6b3fa0;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.dg-about-desc {
    font-size: 14px;
    color: #2d2050;
    line-height: 1.7;
    margin-bottom: 24px;
}

.dg-about-btn {
    display: inline-block;
    padding: 12px 28px;
    background: #1a1230;
    color: #fff;
    border: 1px solid #1a1230;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .2s, color .2s;
}

.dg-about-btn:hover {
    background: #2d1b4e;
    border-color: #2d1b4e;
    color: #fff;
}

.dg-about-center {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    align-self: stretch;
}

.dg-about-center img {
    width: 100%;
    max-width: 280px;
    height: auto;
    display: block;
    -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 15%, #000 90%, transparent 100%);
    mask-image: linear-gradient(to top, transparent 0%, #000 15%, #000 90%, transparent 100%);
}

.dg-about-right {
    padding-top: 16px;
    padding-right: 30%;
}

.dg-about-right p {
    font-size: 14px;
    font-weight: 700;
    color: #2d2050;
    line-height: 1.8;
    margin-bottom: 16px;
}

.dg-section-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
    color: var(--dg-violet-light);
    text-transform: uppercase;
    margin-bottom: 20px;
}

.dg-calligraphy-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding-top: 20px;
}

.dg-calligraphy-chars {
    font-family: 'Ma Shan Zheng', Georgia, serif;
    font-size: 52px;
    color: var(--dg-gold);
    line-height: 1.1;
    writing-mode: vertical-rl;
    letter-spacing: 8px;
    text-shadow: 0 0 30px rgba(200,169,110,.25);
    opacity: .75;
}

.dg-calligraphy-caption {
    font-size: 11px;
    color: var(--dg-muted);
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-top: 12px;
    text-align: center;
    opacity: .6;
}

/* ─── PATH STAGES ───────────────────────────────────────── */

.dg-path {
    position: relative;
    padding: 72px 0;
    border-top: 1px solid rgba(107,63,160,.3);
    border-bottom: 1px solid rgba(107,63,160,.3);
    background: url('/images/dragongate/section_bg.png') bottom center / cover no-repeat;
    background-size: 120%;
    overflow: hidden;
}

.dg-path::before {
    content: '';
    position: absolute;
    inset: 0;
    width: 150%;
    left: -25%;
    background: linear-gradient(90deg,
        rgba(20,10,40,0)    0%,
        rgba(20,10,40,.4)   8%,
        rgba(20,10,40,.75) 16%,
        rgba(20,10,40,.95) 26%,
        rgba(20,10,40,1)   35%,
        rgba(20,10,40,1)   65%,
        rgba(20,10,40,.95) 74%,
        rgba(20,10,40,.75) 84%,
        rgba(20,10,40,.4)  92%,
        rgba(20,10,40,0)  100%
    );
    pointer-events: none;
    z-index: 0;
}

.dg-path .dg-container {
    position: relative;
    z-index: 1;
}

.dg-path-title {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2em;
    color: var(--dg-violet-light);
    text-transform: uppercase;
    margin-bottom: 48px;
}

.dg-stages {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
}

.dg-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    max-width: 160px;
    padding: 0 12px;
}

.dg-stage-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(107, 63, 160, .25);
    border: 1px solid rgba(107, 63, 160, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.dg-stage-icon img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    filter: brightness(0) invert(1) sepia(1) saturate(2) hue-rotate(240deg) brightness(1.5);
    opacity: .85;
}

.dg-stage-name {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--dg-gold);
    text-transform: uppercase;
    margin-bottom: 6px;
}

.dg-stage-desc {
    font-size: 11px;
    color: var(--dg-muted);
    line-height: 1.5;
}

.dg-stage-arrow {
    color: var(--dg-violet);
    font-size: 22px;
    margin-top: 20px;
    flex-shrink: 0;
    opacity: .6;
}

/* ─── TEACHER ───────────────────────────────────────────── */

.dg-teacher {
    position: relative;
    display: grid;
    grid-template-columns: minmax(280px, 36%) 1fr;
    align-items: stretch;
    min-height: 620px;
    background: linear-gradient(120deg, #f3ecf9 0%, #ded0ee 55%, #c9b6e2 100%);
    overflow: hidden;
}

.dg-teacher-photo {
    position: relative;
    min-height: 360px;
}

.dg-teacher-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dg-teacher-panel {
    position: relative;
    display: flex;
    align-items: center;
    padding: 64px 56px;
}

.dg-teacher-panel-bg {
    position: absolute;
    inset: 0;
    background: url('/images/dragongate/section_bg.png') right center / cover no-repeat;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 38%, rgba(0,0,0,.9) 75%, #000 100%);
    mask-image: linear-gradient(to right, transparent 0%, transparent 38%, rgba(0,0,0,.9) 75%, #000 100%);
    opacity: .9;
}

.dg-teacher-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

.dg-teacher-info { max-width: 520px; }

.dg-teacher-info .dg-section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--dg-violet);
    margin-bottom: 16px;
}

.dg-label-seal { display: inline-flex; }

.dg-label-seal .red-seal-box {
    width: 16px;
    height: 19px;
    font-size: 6px;
}

.dg-teacher-title {
    font-size: clamp(20px, 2.2vw, 27px);
    font-weight: 700;
    color: #1a1230;
    margin-bottom: 18px;
    line-height: 1.3;
    text-align: left;
}

.dg-teacher-info p {
    font-size: 14px;
    color: #4b3d63;
    line-height: 1.75;
    margin-bottom: 14px;
}

.dg-teacher-stats {
    display: flex;
    gap: 0;
    margin: 28px 0 30px;
}

.dg-teacher-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    padding: 0 16px;
    border-right: 1px solid rgba(74,56,120,.25);
}

.dg-teacher-stat:first-child { padding-left: 0; }
.dg-teacher-stat:last-child { border-right: none; }

.dg-teacher-stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid rgba(74,56,120,.35);
    background: rgba(255,255,255,.35);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.dg-teacher-stat-icon img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.dg-teacher-stat-label {
    font-size: 11.5px;
    color: #4b3d63;
    line-height: 1.5;
}

.dg-teacher-stat-label strong {
    display: block;
    color: #1a1230;
    font-weight: 700;
    font-size: 12.5px;
}

.dg-teacher-btn {
    display: inline-block;
    padding: 12px 28px;
    background: transparent;
    color: #1a1230;
    border: 1px solid #1a1230;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .2s, color .2s;
}

.dg-teacher-btn:hover {
    background: #1a1230;
    color: #fff;
}

.dg-teacher .dg-calligraphy-col {
    flex-shrink: 0;
}

.dg-teacher .dg-calligraphy-chars {
    color: #1a1230;
    opacity: .85;
    text-shadow: none;
}

.dg-teacher .red-seal-box {
    margin-top: 4px;
}

.dg-calli-right { margin-top: 12px; }

/* ─── PAGES/COURSES CARDS ───────────────────────────────── */

.dg-cards {
    position: relative;
    background: url('/images/dragongate/section_bg.png') center bottom / 150% no-repeat;
    padding: 72px 0 20px;
    border-top: 1px solid rgba(107,63,160,.25);
}

.dg-cards .dg-container {
    position: relative;
    z-index: 1;
}

.dg-cards-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
}

.dg-cards-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2em;
    color: var(--dg-violet-light);
    text-transform: uppercase;
}

.dg-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

.dg-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 250px;
    height: 18vw;
    border-radius: 4px;
    overflow: hidden;
    background: var(--dg-purple-dark);
    text-decoration: none;
    color: var(--dg-text);
    transition: transform .2s, box-shadow .2s;
}

.dg-card-bg {
    position: relative;
    height: 55%;
    flex-shrink: 0;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}

.dg-card-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 55%, var(--dg-purple-dark) 100%);
    transition: opacity .3s;
}

.dg-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(0,0,0,.4);
}

.dg-card:hover .dg-card-bg {
    transform: scale(1.03);
}

.dg-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    letter-spacing: .03em;
    text-transform: uppercase;
    margin-bottom: 8px;
    line-height: 1.3;
}

.dg-card-desc {
    font-size: 12px;
    color: var(--dg-muted);
    line-height: 1.6;
}

.dg-card-body {
    flex: 1;
    padding: 4px 20px 22px;
}

.dg-card-more {
    display: inline-block;
    margin-top: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--dg-gold);
    transition: transform .2s;
}

.dg-card:hover .dg-card-more {
    transform: translateX(3px);
}

/* ─── QUOTE BAR ─────────────────────────────────────────── */

.dg-quote {
    margin-top: 5px;
    padding-top: 18px;
    border-top: 1px solid rgba(200,169,110,.2);
}

.dg-quote-text {
    font-size: clamp(11px, 1.75vw, 15px);
    font-weight: 700;
    color: rgb(41, 29, 55);
    text-align: center;
    font-style: italic;
    line-height: 1.6;
    letter-spacing: .02em;
    max-width: 800px;
    margin: 0 auto;
    padding: 0;
    border: none;
}

/* ─── MOBILE ────────────────────────────────────────────── */

@media (max-width: 900px) {
    .dg-container { padding: 0 18px; }

    .dg-hero-fig-left,
    .dg-hero-fig-right { display: none; }

    .dg-hero-fig-center { width: 60%; }

    .dg-hero-content { padding: 100px 16px 60px; }

    .dg-about { padding: 48px 0; }

    .dg-about-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .dg-about-center { display: none; }

    .dg-calligraphy-col {
        flex-direction: row;
        justify-content: center;
        padding-top: 0;
    }

    .dg-calligraphy-chars {
        writing-mode: horizontal-tb;
        font-size: 36px;
        letter-spacing: 12px;
    }

    .dg-quote { margin-top: 32px; padding-top: 24px; }
    .dg-quote-text { font-size: 11px; }

    .dg-path { padding: 48px 0; }

    .dg-stages {
        flex-wrap: wrap;
        gap: 24px;
    }

    .dg-stage { max-width: calc(33% - 16px); }

    .dg-stage-arrow { display: none; }

    .dg-teacher {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .dg-teacher-photo { min-height: 320px; }

    .dg-teacher-panel { padding: 40px 18px; }

    .dg-teacher-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 28px;
    }

    .dg-teacher-info { max-width: 100%; }

    .dg-teacher-stats { flex-wrap: wrap; }

    .dg-teacher .dg-calligraphy-col {
        flex-direction: row;
        align-items: center;
    }

    .dg-teacher .dg-calligraphy-chars {
        writing-mode: horizontal-tb;
        font-size: 28px;
        letter-spacing: 6px;
    }

    .dg-cards { padding: 48px 0; }

    .dg-cards-grid {
        grid-template-columns: 1fr;
    }

    .dg-card { min-height: 260px; }
}