/* =============================================================
   Easy PM — Homepage (editorial dark system)
   Scoped to the public homepage; loaded only by index.php.
   Manrope + Instrument Serif; deep teal-black sections alternating
   with cool paper; hairline grids; logo gold accent.
   ============================================================= */

/* ---------- 1. Tokens ---------- */
/*  Palette sampled from images/pmp logo.png:
    teal  #1e546c #206372 #246a80 #37859b   (dominant — the "Easy" wordmark)
    navy  #233f65 #28587e #2c6f99           (the head silhouette)
    gold  #af7f29                           (the "PM" wordmark)
    red   #ce3a39                           (the rising arrow)                    */
:root {
    /* Dark surfaces — deep teal-blacks, not neutral blacks */
    --hx-ink:    #06171f;
    --hx-ink-2:  #0a2029;
    --hx-ink-3:  #0f2b36;
    --hx-ink-4:  #153845;

    /* Light ("paper") surfaces — cool, teal-tinted off-white */
    --hx-paper:   #f1f6f7;
    --hx-paper-2: #e4edef;

    /* Type colours */
    --hx-text:    #e9f1f3;
    --hx-muted:   #8fa7b0;
    --hx-dim:     #5d7783;
    --hx-p-ink:   #0c1f28;
    --hx-p-muted: #4e666f;

    /* Hairlines */
    --hx-line:   rgba(255,255,255,.10);
    --hx-line-2: rgba(255,255,255,.18);
    --hx-p-line: rgba(12,31,40,.13);

    /* Accent — the logo gold, lifted for screen contrast */
    --hx-gold:      #d3a13a;
    --hx-gold-hi:   #e8bd5c;
    --hx-gold-soft: #f2d694;
    --hx-gold-glow: rgba(211,161,58,.32);

    /* Brand teal + navy, for supporting fills */
    --hx-teal:   #246a80;
    --hx-teal-2: #37859b;
    --hx-navy:   #233f65;
    --hx-red:    #ce3a39;

    --hx-r: 18px;
    --hx-r-sm: 12px;
    --hx-wrap: min(1260px, 100% - 40px);
    --hx-ease: cubic-bezier(.2,.7,.1,1);

    --hx-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --hx-serif: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;
}

html[dir="rtl"] body.hx-home,
body.rtl.hx-home {
    --hx-sans: "IBM Plex Sans Arabic", "Manrope", "Tahoma", Arial, sans-serif;
}

/* ---------- 2. Page base ---------- */
body.hx-home {
    font-family: var(--hx-sans);
    background: var(--hx-ink);
    color: var(--hx-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.hx-home main { overflow-x: clip; }

/* Zero-specificity reset (`:where`) so every section rule below can override it
   without needing to out-specify a `body.hx-home h2` selector. */
:where(body.hx-home) :where(h1, h2, h3, h4) {
    font-family: var(--hx-sans);
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: 1.02;
    margin: 0;
}

body.hx-home ::selection {
    background: var(--hx-gold);
    color: var(--hx-ink);
}

.hx-wrap { width: var(--hx-wrap); margin-inline: auto; }

/* Serif-italic accent word inside a headline */
.hx-em {
    font-family: var(--hx-serif);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -.01em;
    color: var(--hx-gold);
    padding-inline-end: .06em;
}

/* Arabic has no Instrument Serif — keep the accent, drop the italic serif. */
html[dir="rtl"] .hx-em,
body.rtl .hx-em {
    font-family: inherit;
    font-style: normal;
    font-weight: 800;
}

/* ---------- 3. Sections ---------- */
.hx-sec {
    position: relative;
    padding: clamp(72px, 9vw, 132px) 0;
}

.hx-sec--ink   { background: var(--hx-ink); }
.hx-sec--ink2  { background: var(--hx-ink-2); }
.hx-sec--paper { background: var(--hx-paper); color: var(--hx-p-ink); }
.hx-sec--paper2{ background: var(--hx-paper-2); color: var(--hx-p-ink); }

.hx-sec--paper h1, .hx-sec--paper h2, .hx-sec--paper h3, .hx-sec--paper h4,
.hx-sec--paper2 h1, .hx-sec--paper2 h2, .hx-sec--paper2 h3, .hx-sec--paper2 h4 {
    color: var(--hx-p-ink);
}

/* Section head: rule + wide-tracked label + editorial index */
.hx-sechead {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 20px;
    margin-bottom: clamp(36px, 4.5vw, 64px);
}

.hx-label {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--hx-muted);
    margin-bottom: 22px;
}

.hx-label::before {
    content: "";
    width: 34px;
    height: 2px;
    background: var(--hx-gold);
    flex: none;
}

.hx-sec--paper .hx-label,
.hx-sec--paper2 .hx-label { color: var(--hx-p-muted); }

.hx-index {
    font-family: var(--hx-serif);
    font-style: italic;
    font-size: clamp(15px, 1.5vw, 19px);
    color: var(--hx-dim);
    letter-spacing: .02em;
    white-space: nowrap;
    padding-top: 4px;
}

.hx-sec--paper .hx-index,
.hx-sec--paper2 .hx-index { color: rgba(12,31,40,.34); }

.hx-h2 {
    font-size: clamp(30px, 4.6vw, 58px);
    max-width: 17ch;
}

.hx-sechead .hx-h2 { margin-bottom: 0; }

.hx-sub {
    font-size: clamp(15px, 1.35vw, 17px);
    line-height: 1.75;
    color: var(--hx-muted);
    font-weight: 400;
    max-width: 62ch;
    margin: 20px 0 0;
}

.hx-sec--paper .hx-sub,
.hx-sec--paper2 .hx-sub { color: var(--hx-p-muted); }

/* ---------- 4. Buttons ---------- */
.hx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 56px;
    padding: 0 30px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: var(--hx-sans);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.01em;
    text-decoration: none !important;
    cursor: pointer;
    transition: transform .3s var(--hx-ease), background .3s var(--hx-ease),
                border-color .3s var(--hx-ease), color .3s var(--hx-ease),
                box-shadow .3s var(--hx-ease);
}

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

.hx-btn-primary {
    background: var(--hx-gold);
    color: var(--hx-ink) !important;
    box-shadow: 0 10px 30px var(--hx-gold-glow);
}

.hx-btn-primary:hover {
    background: var(--hx-gold-hi);
    box-shadow: 0 16px 42px var(--hx-gold-glow);
}

.hx-btn-primary .hx-arrow { transition: transform .3s var(--hx-ease); }
.hx-btn-primary:hover .hx-arrow { transform: translateX(4px); }
html[dir="rtl"] .hx-btn-primary .hx-arrow { transform: scaleX(-1); }
html[dir="rtl"] .hx-btn-primary:hover .hx-arrow { transform: scaleX(-1) translateX(4px); }

.hx-btn-ghost {
    background: transparent;
    color: var(--hx-text) !important;
    border-color: var(--hx-line-2);
}

.hx-btn-ghost:hover {
    border-color: var(--hx-text);
    background: rgba(255,255,255,.04);
}

.hx-sec--paper .hx-btn-ghost,
.hx-sec--paper2 .hx-btn-ghost {
    color: var(--hx-p-ink) !important;
    border-color: var(--hx-p-line);
}

.hx-sec--paper .hx-btn-ghost:hover,
.hx-sec--paper2 .hx-btn-ghost:hover {
    border-color: var(--hx-p-ink);
    background: rgba(12,31,40,.04);
}

.hx-btn-dark {
    background: var(--hx-ink);
    color: var(--hx-text) !important;
}

.hx-btn-dark:hover { background: var(--hx-ink-3); }

/* ---------- 5. Reveal on scroll ---------- */
.hx-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .8s var(--hx-ease), transform .8s var(--hx-ease);
    transition-delay: var(--hx-delay, 0ms);
}

.hx-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .hx-reveal, .hx-reveal.is-in { opacity: 1; transform: none; transition: none; }
}

/* ---------- 6. Hero ---------- */
.hx-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--hx-ink);
    padding: clamp(80px, 11vw, 150px) 0 clamp(64px, 8vw, 104px);
}

/* ---- Photo mode: active only when images/hero-photo.* exists ---- */
.hx-hero--photo {
    padding: clamp(110px, 16vw, 210px) 0 clamp(90px, 12vw, 160px);
}

.hx-hero-photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.hx-hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.02);
}

/* The scrim is heaviest on the headline side, so mirror the photo in LTR to
   keep its subject on the clear side; RTL uses the photo as shot. */
html:not([dir="rtl"]) .hx-hero-photo img { transform: scale(1.02) scaleX(-1); }

/* Teal-black scrim: keeps the headline readable over any photograph. */
.hx-hero-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(6,23,31,.94) 0%, rgba(6,23,31,.80) 46%, rgba(6,23,31,.42) 100%),
        linear-gradient(0deg, var(--hx-ink) 2%, transparent 42%);
}

html[dir="rtl"] .hx-hero-photo::after {
    background:
        linear-gradient(270deg, rgba(6,23,31,.94) 0%, rgba(6,23,31,.80) 46%, rgba(6,23,31,.42) 100%),
        linear-gradient(0deg, var(--hx-ink) 2%, transparent 42%);
}

/* With a photo behind it the copy runs full width, not a two-column split. */
.hx-hero--photo .hx-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 900px;
}

/* Thin gold line-art, echoing the reference's geometric overlay */
.hx-hero-lines {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .5;
}

.hx-hero-lines svg { width: 100%; height: 100%; display: block; }

/* Warm glow behind the headline */
.hx-hero::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: -20%;
    inset-inline-end: -10%;
    width: 60vw;
    max-width: 820px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(211,161,58,.13), transparent 66%);
    pointer-events: none;
}

.hx-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    gap: clamp(36px, 5vw, 72px);
    align-items: center;
}

.hx-hero h1 {
    font-size: clamp(38px, 6.4vw, 82px);
    letter-spacing: -.05em;
    line-height: .98;
    margin-bottom: 28px;
    text-wrap: balance;
}

.hx-hero-lead {
    font-size: clamp(15.5px, 1.5vw, 18.5px);
    line-height: 1.7;
    color: var(--hx-muted);
    font-weight: 400;
    max-width: 56ch;
    margin: 0 0 36px;
}

.hx-hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 34px;
}

/* Small trust line under the buttons */
.hx-hero-trust {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.hx-hero-avatars { display: flex; }

.hx-hero-avatars .a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .02em;
    color: var(--hx-text);
    background: var(--hx-ink-4);
    border: 1px solid var(--hx-line-2);
    margin-inline-start: -10px;
}

.hx-hero-avatars .a--photo {
    overflow: hidden;
    border: 2px solid var(--hx-ink);
    box-shadow: 0 0 0 1px var(--hx-line-2);
}

.hx-hero-avatars .a--photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hx-hero-avatars .a:first-child { margin-inline-start: 0; }
.hx-hero-avatars .a:nth-child(2) { color: var(--hx-gold); }

.hx-hero-trust-text {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--hx-muted);
}

.hx-hero-trust-text b {
    display: block;
    color: var(--hx-gold);
    letter-spacing: 3px;
    font-size: 12px;
    margin-bottom: 2px;
}

/* Framed product image, with the reference's offset outline */
.hx-frame {
    position: relative;
    isolation: isolate;
}

.hx-frame::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: -14px;
    border: 1px solid var(--hx-gold);
    border-radius: calc(var(--hx-r) + 10px);
    opacity: .38;
    pointer-events: none;
}

.hx-frame img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--hx-r);
    background: #fff;
    border: 1px solid var(--hx-line);
}

/* A photograph fills its frame at a fixed ratio; SVG artwork keeps its own. */
.hx-frame--photo img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--hx-ink-3);
}

/* ---------- 7. Stat row ---------- */
/* A raised card that overlaps the bottom edge of the hero: an intro column
   on the inline-start side, then one equal column per stat (the count comes
   from PHP via --hx-stat-count so three stats fill the row as well as four). */
.hx-stats {
    position: relative;
    z-index: 3;
    background: var(--hx-ink);
    padding: 0 0 clamp(40px, 5vw, 72px);
}

.hx-stats-card {
    display: grid;
    grid-template-columns: minmax(200px, .9fr) minmax(0, 3fr);
    align-items: center;
    gap: clamp(20px, 3vw, 48px);
    margin-top: clamp(-36px, -3vw, -52px);
    padding: clamp(26px, 3vw, 40px) clamp(24px, 3vw, 48px);
    border: 1px solid var(--hx-line-2);
    border-radius: var(--hx-r);
    background:
        radial-gradient(circle at 0% 0%, rgba(211,161,58,.14), transparent 40%),
        linear-gradient(135deg, var(--hx-ink-3), var(--hx-ink-2) 60%);
    box-shadow: 0 30px 70px rgba(0,0,0,.35);
    overflow: hidden;
}

/* Thin gold rule along the top edge */
.hx-stats-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, var(--hx-gold), var(--hx-gold-hi) 40%, transparent 85%);
}

html[dir="rtl"] .hx-stats-card::before {
    background: linear-gradient(270deg, var(--hx-gold), var(--hx-gold-hi) 40%, transparent 85%);
}

.hx-stats-card { position: relative; }

.hx-stats-intro .hx-label { margin-bottom: 12px; }

.hx-stats-intro p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--hx-muted);
    max-width: 26ch;
}

.hx-stats-grid {
    display: grid;
    grid-template-columns: repeat(var(--hx-stat-count, 3), minmax(0, 1fr));
    border-inline-start: 1px solid var(--hx-line);
}

.hx-stat {
    padding: 6px clamp(18px, 2.4vw, 40px);
    border-inline-start: 1px solid var(--hx-line);
}

.hx-stat:first-child { border-inline-start: 0; }

.hx-stat b {
    display: block;
    font-size: clamp(30px, 4.6vw, 60px);
    font-weight: 800;
    letter-spacing: -.055em;
    line-height: 1;
    color: var(--hx-text);
    margin-bottom: 12px;
    white-space: nowrap; /* keep the superscript "+" on the number's line */
}

.hx-stat b em {
    font-style: normal;
    color: var(--hx-gold);
    font-size: .52em;
    vertical-align: super;
    margin-inline-start: 2px;
}

.hx-stat span {
    display: block;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--hx-muted);
}

/* The counter lives in a <span> inside <b> — it must not pick up the label styling. */
.hx-stat b span,
.hx-overlay-stat b span {
    display: inline;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    line-height: inherit;
}

/* ---------- 8. Keyword marquee ---------- */
.hx-marquee {
    background: var(--hx-ink-2);
    border-block: 1px solid var(--hx-line);
    padding: 20px 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.hx-marquee-track {
    display: flex;
    align-items: center;
    gap: 0;
    width: -moz-max-content;
    width: max-content;
    animation: hx-scroll 46s linear infinite;
}

.hx-marquee:hover .hx-marquee-track { animation-play-state: paused; }

@keyframes hx-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

html[dir="rtl"] .hx-marquee-track { animation-direction: reverse; }

.hx-mq-item {
    display: inline-flex;
    align-items: center;
    gap: 26px;
    padding-inline-end: 26px;
    font-size: clamp(12px, 1.2vw, 14px);
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--hx-dim);
    white-space: nowrap;
    transition: color .3s var(--hx-ease);
}

.hx-mq-item::after {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--hx-gold);
    opacity: .6;
    flex: none;
}

.hx-marquee:hover .hx-mq-item { color: var(--hx-muted); }

@media (prefers-reduced-motion: reduce) {
    .hx-marquee-track { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; }
    .hx-marquee { -webkit-mask-image: none; mask-image: none; }
}

/* ---------- 8b. Photo strip ---------- */
.hx-gallery {
    display: grid;
    grid-template-columns: 1.25fr 1fr 1fr;
    gap: clamp(12px, 1.6vw, 22px);
    margin-bottom: clamp(36px, 5vw, 64px);
}

.hx-shot {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: var(--hx-r);
    border: 1px solid var(--hx-line);
    background: var(--hx-ink-3);
    aspect-ratio: 4 / 3;
}

.hx-gallery .hx-shot:first-child { aspect-ratio: auto; }

.hx-shot img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(.86);
    transition: transform .9s cubic-bezier(.2,.7,.2,1), filter .5s ease;
}

.hx-shot:hover img { transform: scale(1.045); filter: saturate(1); }

/* Tile 1 is a portrait shot — keep the faces in frame when it is cropped wide. */
.hx-gallery .hx-shot:first-child img { object-position: center 22%; }

.hx-shot::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(6,23,31,.88) 0%, rgba(6,23,31,.28) 46%, transparent 70%);
    pointer-events: none;
}

.hx-shot figcaption {
    position: absolute;
    z-index: 1;
    inset-inline: 0;
    bottom: 0;
    padding: clamp(16px, 1.8vw, 24px);
}

.hx-shot figcaption span {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--hx-gold);
    margin-bottom: 6px;
}

html[dir="rtl"] .hx-shot figcaption span { letter-spacing: 0; }

.hx-shot figcaption b {
    display: block;
    font-size: clamp(15px, 1.35vw, 18px);
    font-weight: 600;
    line-height: 1.35;
    color: var(--hx-text);
}

@media (max-width: 920px) {
    .hx-gallery { grid-template-columns: 1fr 1fr; }
    .hx-gallery .hx-shot:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
}

@media (max-width: 560px) {
    .hx-gallery { grid-template-columns: 1fr; }
    .hx-gallery .hx-shot:first-child { aspect-ratio: 4 / 3; }
}

@media (prefers-reduced-motion: reduce) {
    .hx-shot img { transition: none; }
}

/* ---------- 9. Hairline card grid ---------- */
.hx-cells {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--hx-line);
    border-inline-start: 1px solid var(--hx-line);
}

.hx-sec--paper .hx-cells,
.hx-sec--paper2 .hx-cells {
    border-top-color: var(--hx-p-line);
    border-inline-start-color: var(--hx-p-line);
}

.hx-cell {
    position: relative;
    padding: clamp(26px, 3vw, 40px);
    border-inline-end: 1px solid var(--hx-line);
    border-bottom: 1px solid var(--hx-line);
    transition: background .4s var(--hx-ease);
}

.hx-sec--paper .hx-cell,
.hx-sec--paper2 .hx-cell {
    border-inline-end-color: var(--hx-p-line);
    border-bottom-color: var(--hx-p-line);
}

.hx-cell:hover { background: var(--hx-ink-2); }
.hx-sec--ink2 .hx-cell:hover { background: var(--hx-ink-3); }
.hx-sec--paper .hx-cell:hover,
.hx-sec--paper2 .hx-cell:hover { background: rgba(12,31,40,.035); }

.hx-cell-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 26px;
}

.hx-cell-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    font-size: 20px;
    color: var(--hx-gold);
    background: var(--hx-ink-3);
    border: 1px solid var(--hx-line);
    transition: background .4s var(--hx-ease), border-color .4s var(--hx-ease), transform .4s var(--hx-ease);
}

.hx-sec--paper .hx-cell-icon,
.hx-sec--paper2 .hx-cell-icon {
    background: rgba(12,31,40,.05);
    border-color: var(--hx-p-line);
    color: #8a6516;
}

.hx-cell:hover .hx-cell-icon {
    transform: translateY(-3px);
    border-color: var(--hx-gold);
}

.hx-cell-num {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    color: var(--hx-dim);
}

.hx-sec--paper .hx-cell-num,
.hx-sec--paper2 .hx-cell-num { color: rgba(12,31,40,.36); }

.hx-cell h3 {
    font-size: clamp(17px, 1.7vw, 21px);
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.25;
    color: var(--hx-text);
    margin-bottom: 12px;
}

.hx-sec--paper .hx-cell h3,
.hx-sec--paper2 .hx-cell h3 { color: var(--hx-p-ink); }

.hx-cell p {
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--hx-muted);
    font-weight: 400;
    margin: 0;
}

.hx-sec--paper .hx-cell p,
.hx-sec--paper2 .hx-cell p { color: var(--hx-p-muted); }

/* ---------- 10. Numbered rows ---------- */
/* Two columns: these entries are short labels, so a full-width row per item
   leaves most of the line empty. */
.hx-rows {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid var(--hx-line);
    border-inline-start: 1px solid var(--hx-line);
}

.hx-sec--paper .hx-rows {
    border-top-color: var(--hx-p-line);
    border-inline-start-color: var(--hx-p-line);
}

.hx-row {
    display: grid;
    grid-template-columns: 56px 1fr;
    align-items: center;
    gap: clamp(12px, 1.6vw, 22px);
    padding: clamp(22px, 2.4vw, 32px) clamp(20px, 2.4vw, 30px);
    border-inline-end: 1px solid var(--hx-line);
    border-bottom: 1px solid var(--hx-line);
    transition: background .4s var(--hx-ease);
}

.hx-sec--paper .hx-row {
    border-inline-end-color: var(--hx-p-line);
    border-bottom-color: var(--hx-p-line);
}

.hx-row:hover { background: var(--hx-ink-3); }
.hx-sec--paper .hx-row:hover { background: rgba(12,31,40,.035); }

.hx-row-num {
    font-family: var(--hx-serif);
    font-style: italic;
    font-size: clamp(18px, 2vw, 24px);
    color: var(--hx-dim);
    line-height: 1.4;
    transition: color .4s var(--hx-ease);
}

.hx-row:hover .hx-row-num { color: var(--hx-gold); }

.hx-row h3 {
    font-size: clamp(17px, 1.7vw, 21px);
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.3;
    color: var(--hx-text);
    margin-bottom: 0;
    transition: color .4s var(--hx-ease);
}

.hx-sec--paper .hx-row h3 { color: var(--hx-p-ink); }

.hx-row p {
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--hx-muted);
    margin: 0;
    max-width: 68ch;
}

.hx-sec--paper .hx-row p { color: var(--hx-p-muted); }

/* ---------- 11. Pill chips ---------- */
.hx-pills { display: flex; flex-wrap: wrap; gap: 10px; }

.hx-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid var(--hx-line-2);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--hx-text);
    background: transparent;
    transition: border-color .3s var(--hx-ease), background .3s var(--hx-ease);
}

.hx-pill i { color: var(--hx-gold); font-size: 14px; }

.hx-pill:hover { border-color: var(--hx-gold); background: rgba(211,161,58,.06); }

.hx-sec--paper .hx-pill,
.hx-sec--paper2 .hx-pill {
    border-color: var(--hx-p-line);
    color: var(--hx-p-ink);
    background: #fff;
}

/* ---------- 12. About ---------- */
.hx-about-grid {
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    gap: clamp(36px, 5vw, 76px);
    align-items: center;
}

.hx-about-copy p {
    font-size: clamp(15px, 1.4vw, 17px);
    line-height: 1.8;
    color: var(--hx-p-muted);
    font-weight: 400;
    margin: 0 0 22px;
}

.hx-checks {
    list-style: none;
    padding: 0;
    margin: 0 0 30px;
    display: grid;
    gap: 0;
    border-top: 1px solid var(--hx-p-line);
}

.hx-checks li {
    position: relative;
    padding: 15px 0 15px 34px;
    border-bottom: 1px solid var(--hx-p-line);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.55;
    color: var(--hx-p-ink);
}

html[dir="rtl"] .hx-checks li { padding: 15px 34px 15px 0; }

.hx-checks li::before {
    content: "\F26E";
    font-family: "bootstrap-icons";
    position: absolute;
    inset-inline-start: 0;
    top: 15px;
    font-size: 15px;
    color: var(--hx-gold);
}

/* Illustration + overlaid headline stat, as on the reference */
.hx-about-visual { position: relative; }

.hx-about-visual .hx-frame img {
    background: #fff;
    border-color: var(--hx-p-line);
}

.hx-about-visual .hx-frame::before {
    border-color: var(--hx-gold);
    opacity: .55;
}

.hx-overlay-stat {
    position: absolute;
    z-index: 3;
    inset-inline-end: -6px;
    bottom: -18px;
    padding: 24px 28px;
    border-radius: var(--hx-r);
    background: var(--hx-ink);
    border: 1px solid var(--hx-line);
    box-shadow: 0 30px 70px rgba(6,23,31,.30);
    max-width: 260px;
}

.hx-overlay-stat b {
    display: block;
    font-size: clamp(32px, 3.6vw, 46px);
    font-weight: 800;
    letter-spacing: -.055em;
    line-height: 1;
    color: var(--hx-text);
    margin-bottom: 10px;
    white-space: nowrap;
}

.hx-overlay-stat b em {
    font-style: normal;
    color: var(--hx-gold);
    font-size: .5em;
    vertical-align: super;
}

.hx-overlay-stat span {
    display: block;
    font-size: 13px;
    line-height: 1.5;
    color: var(--hx-muted);
    font-weight: 500;
}

/* ---------- 13. Courses ---------- */
.hx-course-block { margin-bottom: clamp(40px, 5vw, 68px); }
.hx-course-block:last-child { margin-bottom: 0; }

.hx-course-block-head {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 26px;
}

.hx-course-block-head h3 {
    font-size: clamp(17px, 1.8vw, 22px);
    font-weight: 700;
    letter-spacing: -.035em;
    color: var(--hx-p-ink);
    white-space: nowrap;
}

.hx-course-block-head::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--hx-p-line);
}

.epmp-course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
    gap: clamp(18px, 2vw, 26px);
}

.epmp-course-card { height: 100%; }

.epmp-course-card .course-card {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 18px;
    border-radius: var(--hx-r);
    background: #fff;
    border: 1px solid var(--hx-p-line);
    transition: border-color .4s var(--hx-ease), box-shadow .4s var(--hx-ease), transform .4s var(--hx-ease);
}

.epmp-course-card:hover .course-card {
    transform: translateY(-6px);
    border-color: rgba(12,31,40,.22);
    box-shadow: 0 26px 60px rgba(12,31,40,.12);
}

/* newm.css lays this out as a 76px thumbnail beside the title; the card here
   wants the image full-width above it. */
.epmp-course-top {
    display: block;
    margin-bottom: 0;
}

.epmp-course-image {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    height: auto;
    border-radius: var(--hx-r-sm);
    margin-bottom: 18px;
    background: var(--hx-paper-2);
    aspect-ratio: 16 / 10;
}

.epmp-course-image img {
    width: 100%;
    height: 100%;
    padding: 0;
    object-fit: cover;
    display: block;
    transition: transform .7s var(--hx-ease);
}

.epmp-course-card:hover .epmp-course-image img { transform: scale(1.05); }

.epmp-course-top h3 {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.3;
    color: var(--hx-p-ink);
    margin: 0 0 14px;
}

.epmp-course-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.epmp-course-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--hx-p-line);
    color: var(--hx-p-muted);
    font-size: 11.5px;
    font-weight: 600;
}

.epmp-course-meta i { color: #8a6516; font-size: 12px; }

.epmp-course-desc {
    font-size: 14px;
    line-height: 1.7;
    color: var(--hx-p-muted);
    font-weight: 400;
    margin: 0 0 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.epmp-course-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--hx-p-line);
}

.epmp-course-price {
    display: flex;
    align-items: baseline;
    gap: 9px;
    flex-wrap: wrap;
}

.epmp-price-current {
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -.05em;
    color: var(--hx-p-ink);
    line-height: 1;
}

.epmp-price-old {
    font-size: .9rem;
    font-weight: 500;
    color: var(--hx-p-muted);
    text-decoration: line-through;
}

.epmp-price-free {
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -.04em;
    color: #15764a;
}

html[dir="rtl"] .epmp-course-price { direction: ltr; justify-content: flex-end; }

.epmp-enroll {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
    padding: 12px 20px;
    border-radius: 999px;
    background: var(--hx-ink);
    color: var(--hx-text) !important;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none !important;
    transition: background .3s var(--hx-ease), transform .3s var(--hx-ease);
}

.epmp-enroll:hover { background: var(--hx-ink-3); transform: translateY(-2px); }

.epmp-empty {
    grid-column: 1 / -1;
    padding: 52px 24px;
    border-radius: var(--hx-r);
    border: 1px dashed var(--hx-p-line);
    color: var(--hx-p-muted);
    font-weight: 600;
    text-align: center;
}

/* ---------- 14. Tutors ---------- */
.hx-tutors-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--hx-line);
    border-inline-start: 1px solid var(--hx-line);
}

.epmp-tutor-card {
    padding: clamp(26px, 3vw, 36px) clamp(20px, 2.4vw, 28px);
    border-inline-end: 1px solid var(--hx-line);
    border-bottom: 1px solid var(--hx-line);
    text-align: center;
    transition: background .4s var(--hx-ease);
}

.epmp-tutor-card:hover { background: var(--hx-ink-2); }

.epmp-tutor-card img,
.epmp-tutor-card .ph {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 18px;
    display: block;
    border: 1px solid var(--hx-line-2);
    background: var(--hx-ink-3);
    transition: border-color .4s var(--hx-ease);
}

.epmp-tutor-card:hover img,
.epmp-tutor-card:hover .ph { border-color: var(--hx-gold); }

.epmp-tutor-card .ph {
    display: grid;
    place-items: center;
    font-size: 32px;
    font-weight: 800;
    color: var(--hx-gold);
}

.epmp-tutor-card h3 {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.03em;
    color: var(--hx-text);
    margin-bottom: 6px;
}

.epmp-tutor-card .job {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--hx-gold);
    margin-bottom: 14px;
}

.epmp-tutor-card .bio {
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--hx-muted);
    margin-bottom: 16px;
    min-height: 44px;
}

.epmp-tutor-card .stats {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.epmp-tutor-card .stats span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--hx-line);
    font-size: 12px;
    font-weight: 600;
    color: var(--hx-muted);
}

.epmp-tutor-card .stats i { color: var(--hx-gold); }

/* ---------- 15. Testimonials ---------- */
.hx-reviews {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(18px, 2vw, 26px);
}

.epmp-review {
    position: relative;
    padding: clamp(26px, 3vw, 36px);
    border-radius: var(--hx-r);
    background: #fff;
    border: 1px solid var(--hx-p-line);
    transition: transform .4s var(--hx-ease), box-shadow .4s var(--hx-ease);
}

.epmp-review::before {
    content: "\201C";
    position: absolute;
    top: 6px;
    inset-inline-end: 22px;
    font-family: var(--hx-serif);
    font-size: 88px;
    line-height: 1;
    color: var(--hx-gold);
    opacity: .28;
    pointer-events: none;
}

.epmp-review:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 60px rgba(12,31,40,.12);
}

.epmp-review p {
    font-size: 15px;
    line-height: 1.75;
    color: var(--hx-p-muted);
    margin: 0 0 24px;
    font-weight: 400;
}

.epmp-review-person {
    display: flex;
    align-items: center;
    gap: 13px;
    padding-top: 20px;
    border-top: 1px solid var(--hx-p-line);
}

.epmp-review-avatar {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 50%;
    font-size: 16px;
    font-weight: 800;
    color: var(--hx-p-ink);
    background: var(--hx-paper-2);
    border: 1px solid var(--hx-p-line);
}

.epmp-review-person strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--hx-p-ink);
    line-height: 1.2;
}

.epmp-review-person span {
    font-size: 12px;
    font-weight: 600;
    color: var(--hx-p-muted);
}

.hx-rating {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
}

.hx-rating strong {
    display: inline-flex;
    gap: 3px;
    color: var(--hx-gold);
    font-size: 15px;
}

.hx-rating span {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--hx-p-muted);
}

/* ---------- 16. Skills grid ---------- */
.hx-skills {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--hx-line);
    border-inline-start: 1px solid var(--hx-line);
}

/* newm.css gives these a light fill and a 16px radius — reset both, or the
   rounded corners punch dark diamonds through the hairline grid. */
.epmp-skill {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: clamp(18px, 2vw, 26px);
    background: transparent;
    border-radius: 0;
    border-inline-end: 1px solid var(--hx-line);
    border-bottom: 1px solid var(--hx-line);
    font-size: 14px;
    font-weight: 600;
    color: var(--hx-text);
    line-height: 1.4;
    transition: background .4s var(--hx-ease);
}

.epmp-skill span {
    color: var(--hx-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

.epmp-skill:hover { background: var(--hx-ink-3); }

.epmp-skill-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: 12px;
    font-size: 16px;
    color: var(--hx-gold);
    background: var(--hx-ink-3);
    border: 1px solid var(--hx-line);
}

.hx-sec--ink2 .epmp-skill-icon { background: var(--hx-ink-4); }

/* ---------- 17. Partner logos ---------- */
.hx-logos {
    display: flex;
    align-items: center;
    gap: 0;
    width: -moz-max-content;
    width: max-content;
    animation: hx-scroll 50s linear infinite;
}

.hx-logo-wall:hover .hx-logos { animation-play-state: paused; }

.hx-logo-wall {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

html[dir="rtl"] .hx-logos { animation-direction: reverse; }

.epmp-partner-item {
    display: grid;
    place-items: center;
    flex: none;
    width: 190px;
    height: 100px;
    padding: 18px 24px;
    border-inline-end: 1px solid var(--hx-p-line);
}

.epmp-partner-item img {
    max-width: 100%;
    max-height: 56px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .5;
    transition: filter .35s var(--hx-ease), opacity .35s var(--hx-ease);
}

.epmp-partner-item:hover img { filter: grayscale(0); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .hx-logos { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; }
    .hx-logo-wall { -webkit-mask-image: none; mask-image: none; }
}

/* ---------- 18. Closing CTA ---------- */
.hx-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--hx-ink);
    padding: clamp(78px, 9vw, 136px) 0;
    text-align: center;
}

.hx-cta::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90vw;
    max-width: 1000px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(211,161,58,.14), transparent 62%);
    pointer-events: none;
}

/* ---- Photo mode: active only when images/cta-photo.* exists ---- */
.hx-cta-photo {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hx-cta-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 40% 32%;
    display: block;
}

.hx-cta-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at center, rgba(6,23,31,.93) 0%, rgba(6,23,31,.84) 50%, rgba(6,23,31,.62) 100%),
        linear-gradient(180deg, var(--hx-ink) 0%, transparent 22%, transparent 80%, var(--hx-ink) 100%);
}

.hx-cta--photo p { color: var(--hx-text); }

.hx-cta-inner { position: relative; z-index: 2; }

.hx-cta .hx-label { justify-content: center; margin-bottom: 26px; }

.hx-cta h2 {
    font-size: clamp(32px, 5.4vw, 72px);
    letter-spacing: -.05em;
    line-height: 1;
    margin: 0 auto 24px;
    max-width: 16ch;
    text-wrap: balance;
}

.hx-cta p {
    font-size: clamp(15px, 1.4vw, 17.5px);
    line-height: 1.75;
    color: var(--hx-muted);
    max-width: 58ch;
    margin: 0 auto 38px;
    font-weight: 400;
}

.hx-cta-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
}

/* ---------- 19. Promo banner ---------- */
.promo-wrap {
    width: var(--hx-wrap);
    margin: 0 auto !important;
    padding: clamp(40px, 5vw, 70px) 0;
    background: var(--hx-ink);
}

.promo-wrap img {
    border-radius: var(--hx-r) !important;
    box-shadow: none !important;
    border: 1px solid var(--hx-line);
}

/* ---------- 19b. Header bridge ---------- */
/* The shared header is navy (rgba(4,13,31,…)); on this page it should read as
   the same teal-black as the hero it sits on. */
body.hx-home .epmp-header {
    background: rgba(6, 23, 31, .90);
    border-bottom-color: var(--hx-line);
}

/* ---------- 20. Footer bridge ---------- */
/* The shared footer is light; give it a hard edge against the dark page. */
body.hx-home .epmp-footer,
body.hx-home footer {
    border-top: 1px solid var(--hx-line);
}

/* ---------- 21. Responsive ---------- */
@media (max-width: 1080px) {
    .hx-cells { grid-template-columns: repeat(2, 1fr); }
    .hx-tutors-grid { grid-template-columns: repeat(2, 1fr); }
    .hx-skills { grid-template-columns: repeat(2, 1fr); }
    .hx-reviews { grid-template-columns: 1fr; }
}

@media (max-width: 920px) {
    .hx-hero { padding-top: clamp(56px, 9vw, 96px); }
    .hx-hero-grid { grid-template-columns: 1fr; gap: 40px; }
    .hx-hero .hx-frame { order: -1; max-width: 520px; margin-inline: auto; }
    .hx-about-grid { grid-template-columns: 1fr; }
    .hx-about-visual { max-width: 540px; margin-inline: auto; }
    .hx-stats-card { grid-template-columns: 1fr; gap: 22px; margin-top: -24px; }
    .hx-stats-intro p { max-width: none; }
    .hx-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 18px 0; border-inline-start: 0; }
    .hx-stat { padding: 0 clamp(12px, 3vw, 24px); }
    .hx-stat:nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; }
    /* An odd last stat spans the row instead of sitting alone on the left. */
    .hx-stat:last-child:nth-child(odd) { grid-column: 1 / -1; border-top: 1px solid var(--hx-line); padding-top: 18px; }
    .hx-sechead { grid-template-columns: 1fr; }
    .hx-index { grid-row: 1; justify-self: start; padding-top: 0; margin-bottom: -8px; }
}

@media (max-width: 680px) {
    .hx-cells { grid-template-columns: 1fr; }
    .hx-tutors-grid { grid-template-columns: 1fr; }
    .hx-skills { grid-template-columns: 1fr; }
    .epmp-course-grid { grid-template-columns: 1fr; }
    .hx-h2 { max-width: none; }
    .hx-hero-actions .hx-btn { flex: 1 1 100%; }
    .hx-cta-actions .hx-btn { flex: 1 1 100%; }
    .hx-row { grid-template-columns: 52px 1fr; }
    .hx-overlay-stat {
        position: static;
        max-width: none;
        margin-top: 18px;
        inset: auto;
    }
    .epmp-partner-item { width: 150px; height: 86px; }
    .hx-frame::before { inset: -9px; }
}

/* ---------- 22. RTL ---------- */
html[dir="rtl"] .hx-marquee,
html[dir="rtl"] .hx-logo-wall {
    -webkit-mask-image: linear-gradient(270deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(270deg, transparent, #000 8%, #000 92%, transparent);
}

html[dir="rtl"] .hx-row:hover { padding-inline-start: 0; padding-inline-end: 12px; }

/* ---------- 23. Packages (course bundles) ---------- */
.hx-package-lead {
    margin: 8px 0 0;
    color: var(--hx-p-muted);
    font-size: 15px;
    line-height: 1.65;
    max-width: 70ch;
}

.hx-package-card .course-card { border-color: rgba(211,161,58,.45) !important; }

.hx-package-count,
.hx-package-save {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 4px 11px;
    font-size: 12.5px;
    font-weight: 700;
}

.hx-package-count { background: rgba(211,161,58,.12); border: 1px solid rgba(211,161,58,.32); color: #8a6516; }
.hx-package-save  { background: rgba(22,163,74,.10);  border: 1px solid rgba(22,163,74,.30);  color: #15803d; }

.hx-package-list {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: grid;
    gap: 7px;
}

.hx-package-list li {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    color: var(--hx-p-ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
}

.hx-package-list li i { color: var(--hx-gold); flex: 0 0 auto; margin-top: 2px; }

.hx-package-card .epmp-course-bottom { flex-wrap: wrap; row-gap: 12px; margin-top: 16px; }
.hx-package-card .epmp-course-meta { flex-wrap: wrap; row-gap: 8px; }

/* ---------- 24. YouTube band ---------- */
.hx-yt-sec { padding-top: 0; }

.hx-yt {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(24px, 4vw, 60px);
    padding: clamp(28px, 4vw, 48px) clamp(24px, 4vw, 56px);
    border-radius: var(--hx-r);
    border: 1px solid var(--hx-line-2);
    color: var(--hx-text);
    background:
        radial-gradient(circle at 92% 10%, rgba(206,58,57,.28), transparent 32%),
        radial-gradient(circle at 0% 100%, rgba(211,161,58,.14), transparent 36%),
        linear-gradient(135deg, var(--hx-ink-2), var(--hx-ink-4));
    box-shadow: 0 24px 60px rgba(6,23,31,.22);
}

.hx-yt .hx-label { color: var(--hx-gold); }
.hx-yt .hx-h2 { color: var(--hx-text); max-width: 22ch; }

.hx-yt p {
    margin: 16px 0 24px;
    color: var(--hx-muted);
    font-size: 15.5px;
    line-height: 1.7;
    max-width: 58ch;
}

.hx-yt-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hx-yt-note { font-size: 13px; color: var(--hx-muted); font-weight: 600; }

.hx-yt .hx-btn-dark {
    background: var(--hx-red);
    border-color: transparent;
    color: #fff;
}

.hx-yt .hx-btn-dark:hover { background: #b83231; color: #fff; }

.hx-yt-art {
    width: clamp(120px, 14vw, 180px);
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1px solid var(--hx-line-2);
    background: rgba(255,255,255,.04);
    transition: transform .4s var(--hx-ease);
}

.hx-yt-art:hover { transform: scale(1.04); }

.hx-yt-play {
    width: 58%;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--hx-red);
    color: #fff;
    font-size: 40px;
    box-shadow: 0 0 0 14px rgba(206,58,57,.16);
}

@media (max-width: 760px) {
    .hx-yt { grid-template-columns: 1fr; }
    .hx-yt-art { display: none; }
}