.dch {
    --dch-bg: #FFFFFF;
    --dch-acc: #A78278;
    --dch-tl: #CBE7EC;
    --dch-tc: #1a1a2e;
    position: relative;
    min-height: 100svh;
    background: var(--dch-bg);
    font-family: 'Inter', sans-serif;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ── Subtle grain ── */
.dch::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: .018;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 128px;
    pointer-events: none;
    z-index: 1;
}

/* ── Ambient glow ── */
.dch .dch-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(140px);
    opacity: .15;
    pointer-events: none;
    z-index: 0;
    transition: transform 8s ease;
}
.dch .dch-glow--1 {
    width: 900px;
    height: 900px;
    background: var(--dch-acc);
    top: -300px;
    right: -300px;
    animation: dchDrift 20s ease-in-out infinite;
}
@keyframes dchDrift {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(40px, -30px); }
}

/* ── Main grid ── */
.dch .dch-main {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 100px 60px 0;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 2;
}

/* LEFT: TEXT CONTENT */
.dch .dch-text { display: flex; flex-direction: column; }

/* ── Badge ── */
.dch .dch-badge {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    width: fit-content;
    padding: 0;
    margin-bottom: 32px;
    opacity: 0;
    animation: dchUp .8s .2s cubic-bezier(.16, 1, .3, 1) forwards;
}
.dch .dch-badge-line {
    width: 40px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--dch-acc));
    flex-shrink: 0;
}
.dch .dch-badge-text {
    font-family: 'Trajan Pro', 'Cinzel', serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    color: var(--dch-acc);
}

/* ── Title ── */
.dch .dch-title {
    font-size: clamp(36px, 4.2vw, 62px);
    font-weight: 300;
    line-height: 1.08;
    letter-spacing: -.03em;
    color: var(--dch-tc);
    margin: 0 0 24px;
}
.dch .dch-title .dch-w {
    display: inline-block;
    opacity: 0;
    transform: translateY(30px);
    will-change: transform, opacity;
    animation: dchWord .7s cubic-bezier(.16, 1, .3, 1) forwards;
}
.dch .dch-title .dch-w--hl {
    font-family: 'Cinzel', Georgia, serif;
    font-weight: 400;
    font-style: italic;
    letter-spacing: 2px;
    color: var(--dch-acc);
}

/* ── Description with accent line ── */
.dch .dch-desc {
    position: relative;
    font-size: 16px;
    line-height: 1.75;
    color: rgba(26, 26, 46, .5);
    max-width: 460px;
    margin-bottom: 36px;
    padding-left: 20px;
    opacity: 0;
    animation: dchUp .7s .6s cubic-bezier(.16, 1, .3, 1) forwards;
}
.dch .dch-desc::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 3px;
    border-radius: 3px;
    background: var(--dch-acc);
    opacity: .25;
}

/* ── CTA area ── */
.dch .dch-ctas {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
    opacity: 0;
    animation: dchUp .7s .75s cubic-bezier(.16, 1, .3, 1) forwards;
}
.dch .dch-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 60px;
    text-decoration: none;
    transition: all .4s cubic-bezier(.16, 1, .3, 1);
    position: relative;
    font-family: 'Inter', sans-serif;
}
.dch .dch-btn--p {
    padding: 15px 30px 15px 16px;
    background: var(--dch-acc);
    color: #fff;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(167, 130, 120, .2);
}
.dch .dch-btn--p .dch-btn-ico {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .3s;
    flex-shrink: 0;
}
.dch .dch-btn--p .dch-btn-ico svg { width: 15px; height: 15px; color: #fff; }
.dch .dch-btn--p:hover { transform: translateY(-2px); box-shadow: 0 12px 35px rgba(167, 130, 120, .3); }
.dch .dch-btn--p:hover .dch-btn-ico { background: rgba(255, 255, 255, .25); }
.dch .dch-btn--s {
    padding: 15px 26px;
    color: var(--dch-tc);
    border: 1.5px solid rgba(26, 26, 46, .1);
    background: transparent;
    gap: 8px;
}
.dch .dch-btn--s svg { width: 14px; height: 14px; color: var(--dch-acc); transition: transform .3s; }
.dch .dch-btn--s:hover { border-color: var(--dch-acc); color: var(--dch-acc); background: rgba(167, 130, 120, .03); }
.dch .dch-btn--s:hover svg { transform: translateX(3px); }

/* ── Trust strip ── */
.dch .dch-trust {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 40px;
    opacity: 0;
    animation: dchUp .7s .9s cubic-bezier(.16, 1, .3, 1) forwards;
}
.dch .dch-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px 10px 12px;
    background: rgba(167, 130, 120, .03);
    border: 1px solid rgba(167, 130, 120, .08);
    border-radius: 14px;
    transition: all .35s cubic-bezier(.16, 1, .3, 1);
    cursor: default;
}
.dch .dch-chip:hover {
    background: rgba(167, 130, 120, .06);
    border-color: rgba(167, 130, 120, .15);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(167, 130, 120, .08);
}
.dch .dch-chip-ico {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(167, 130, 120, .08);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform .3s;
}
.dch .dch-chip:hover .dch-chip-ico { transform: scale(1.08); }
.dch .dch-chip-ico svg { width: 16px; height: 16px; color: var(--dch-acc); }
.dch .dch-chip-data { display: flex; flex-direction: column; gap: 0; line-height: 1.2; }
.dch .dch-chip-val {
    font-size: 15px;
    font-weight: 700;
    color: var(--dch-tc);
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: baseline;
    gap: 1px;
}
.dch .dch-chip-val span { font-size: 11px; font-weight: 500; color: var(--dch-acc); }
.dch .dch-chip-lbl {
    font-size: 10px;
    font-weight: 500;
    color: rgba(26, 26, 46, .35);
    text-transform: uppercase;
    letter-spacing: .8px;
}

/* RIGHT: BENTO GRID */
.dch .dch-bento {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 14px;
    height: min(520px, 60vh);
    opacity: 0;
    animation: dchFade 1s .4s cubic-bezier(.16, 1, .3, 1) forwards;
}
.dch .dch-card--lg { grid-row: span 2; }
.dch .dch-card--md { grid-column: span 2; }
.dch .dch-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    display: block;
    box-shadow: 0 2px 20px rgba(26, 26, 46, .06);
}
.dch .dch-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgba(26, 26, 46, .06);
    border-radius: 20px;
    z-index: 3;
    pointer-events: none;
    transition: border-color .4s;
}
.dch .dch-card:hover::before { border-color: rgba(167, 130, 120, .25); }
.dch .dch-card-media { position: absolute; inset: 0; z-index: 0; }
.dch .dch-card-media img,
.dch .dch-card-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.16, 1, .3, 1);
}
.dch .dch-card:hover .dch-card-media img,
.dch .dch-card:hover .dch-card-media video { transform: scale(1.06); }
.dch .dch-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(26, 26, 46, .7) 0%, rgba(26, 26, 46, .15) 50%, rgba(26, 26, 46, .05) 100%);
    z-index: 1;
    transition: opacity .4s;
}
.dch .dch-card:hover::after { opacity: .65; }
.dch .dch-card-inner {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.dch .dch-card-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
}
.dch .dch-card-title {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    transition: transform .3s;
}
.dch .dch-card:hover .dch-card-title { transform: translateX(4px); }
.dch .dch-card-arr {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    opacity: 0;
    transform: translate(-6px, -6px);
    transition: all .4s cubic-bezier(.16, 1, .3, 1);
}
.dch .dch-card:hover .dch-card-arr { opacity: 1; transform: translate(0, 0); }
.dch .dch-card-arr svg {
    width: 14px;
    height: 14px;
    stroke: #fff;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.dch .dch-card-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    opacity: 0;
    transition: all .4s;
}
.dch .dch-card:hover .dch-card-play { opacity: 1; }
.dch .dch-card-play svg { width: 18px; height: 18px; fill: #fff; margin-left: 2px; }
.dch .dch-card-glow {
    position: absolute;
    inset: -1px;
    border-radius: 21px;
    z-index: 4;
    pointer-events: none;
    opacity: 0;
    transition: opacity .5s;
    background: conic-gradient(from 0deg, transparent, var(--dch-acc), transparent, rgba(167, 130, 120, .3), transparent);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: xor;
    padding: 1px;
}
.dch .dch-card:hover .dch-card-glow { opacity: .4; animation: dchSpin 3s linear infinite; }
@keyframes dchSpin { to { rotate: 360deg; } }

/* ── Scroll Indicator ── */
.dch .dch-scroll {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 0;
    animation: dchUp .7s 1.3s cubic-bezier(.16, 1, .3, 1) forwards;
}
.dch .dch-scroll-mouse {
    width: 24px;
    height: 38px;
    border-radius: 12px;
    border: 2px solid rgba(26, 26, 46, .1);
    position: relative;
}
.dch .dch-scroll-dot {
    width: 3px;
    height: 7px;
    border-radius: 3px;
    background: var(--dch-acc);
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    animation: dchScrollDot 2s ease-in-out infinite;
}
.dch .dch-scroll-text {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(26, 26, 46, .2);
}
@keyframes dchScrollDot {
    0%, 100% { opacity: 1; transform: translateX(-50%) translateY(0); }
    50% { opacity: .3; transform: translateX(-50%) translateY(10px); }
}

/* ── Keyframes ── */
@keyframes dchUp { to { opacity: 1; transform: translateY(0); } }
@keyframes dchWord { to { opacity: 1; transform: translateY(0); } }
@keyframes dchFade { to { opacity: 1; } }

/* ── Responsive ── */
@media (max-width: 1100px) {
    .dch .dch-main { padding: 80px 40px 0; gap: 40px; }
    .dch .dch-bento { height: min(440px, 55vh); }
}
@media (max-width: 900px) {
    .dch { min-height: auto; }
    .dch .dch-main { grid-template-columns: 1fr; padding: 100px 30px 40px; gap: 32px; }
    .dch .dch-bento { height: 280px; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
    .dch .dch-card--lg { grid-row: span 1; }
    .dch .dch-card--md { grid-column: span 1; }
    .dch .dch-trust { gap: 6px; }
    .dch .dch-glow--1 { width: 500px; height: 500px; right: -200px; top: -150px; }
    .dch .dch-scroll { display: none; }
}
@media (max-width: 640px) {
    .dch .dch-main { padding: 90px 20px 24px; }
    .dch .dch-title { font-size: clamp(28px, 7.5vw, 40px); }
    .dch .dch-desc { font-size: 14px; padding-left: 16px; }
    .dch .dch-bento { height: 220px; gap: 10px; }
    .dch .dch-card-inner { padding: 14px; }
    .dch .dch-card-title { font-size: 14px; }
    .dch .dch-trust { gap: 4px; flex-wrap: wrap; margin-top: 20px; }
    .dch .dch-chip { padding: 5px 8px; border-radius: 8px; flex-shrink: 0; gap: 5px; }
    .dch .dch-chip-ico { width: 20px; height: 20px; border-radius: 5px; }
    .dch .dch-chip-ico svg { width: 10px; height: 10px; }
    .dch .dch-chip-val { font-size: 11px; }
    .dch .dch-chip-lbl { font-size: 7px; letter-spacing: .4px; }
    .dch .dch-btn { font-size: 13px; }
    .dch .dch-btn--p { padding: 13px 24px 13px 14px; }
    .dch .dch-btn--p .dch-btn-ico { width: 28px; height: 28px; }
    .dch .dch-btn--p .dch-btn-ico svg { width: 13px; height: 13px; }
    .dch .dch-btn--s { padding: 13px 20px; }
}