/*---------hero--------*/

.hg-hero2 {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: #F5F7F6;
    /*padding: clamp(64px, 10vw, 120px) 0 clamp(56px, 8vw, 100px);*/
    padding: 200px 0;
}

/* --- SVG background --- */
.hg-hero2-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.hg-hero2-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* ── drifting glow blob ── */
.hg2-blob {
    will-change: transform;
    animation: hg2BlobDrift 22s ease-in-out infinite alternate;
}
@keyframes hg2BlobDrift {
    0%   { transform: translate(0,    0)    scale(1);   }
    33%  { transform: translate(-180px, 60px) scale(1.25); }
    66%  { transform: translate(120px, -50px) scale(0.85); }
    100% { transform: translate(-80px, 90px) scale(1.15); }
}

/* ── floating particles — diagonal drift + subtle scale ── */
.hg2-p {
    will-change: transform;
    transform-box: fill-box;
    transform-origin: center;
    animation: hg2FloatL 8s ease-in-out infinite alternate;
}
/* odd particles drift left, even drift right */
.hg2-p1  { animation: hg2FloatL  7s ease-in-out  0s   infinite alternate; }
.hg2-p2  { animation: hg2FloatR  9s ease-in-out -2s   infinite alternate; }
.hg2-p3  { animation: hg2FloatL 11s ease-in-out -4s   infinite alternate; }
.hg2-p4  { animation: hg2FloatR  8s ease-in-out -1s   infinite alternate; }
.hg2-p5  { animation: hg2FloatL 10s ease-in-out -3s   infinite alternate; }
.hg2-p6  { animation: hg2FloatR  6s ease-in-out -5s   infinite alternate; }
.hg2-p7  { animation: hg2FloatL 12s ease-in-out -2s   infinite alternate; }
.hg2-p8  { animation: hg2FloatR  8s ease-in-out -4s   infinite alternate; }
.hg2-p9  { animation: hg2FloatL  9s ease-in-out -1s   infinite alternate; }
.hg2-p10 { animation: hg2FloatR 11s ease-in-out -3s   infinite alternate; }
.hg2-p11 { animation: hg2FloatL  8s ease-in-out -6s   infinite alternate; }
.hg2-p12 { animation: hg2FloatR 10s ease-in-out -0.5s infinite alternate; }
.hg2-p13 { animation: hg2FloatL  9s ease-in-out -2.5s infinite alternate; }
.hg2-p14 { animation: hg2FloatR  7s ease-in-out -4.5s infinite alternate; }
.hg2-p15 { animation: hg2FloatL 13s ease-in-out -1.5s infinite alternate; }

@keyframes hg2FloatL {
    0%   { transform: translate(0,    0)    scale(1);   }
    40%  { transform: translate(-6px, -18px) scale(1.1); }
    100% { transform: translate(-3px, -34px) scale(0.9); }
}
@keyframes hg2FloatR {
    0%   { transform: translate(0,   0)    scale(1);    }
    40%  { transform: translate(5px, -16px) scale(1.12); }
    100% { transform: translate(3px, -30px) scale(0.88); }
}

/* ── decorative arcs — draw-in then perpetual shift ── */
.hg2-arc {
    stroke-dashoffset: 2000;
    animation:
        hg2ArcDraw  2.6s cubic-bezier(.45,0,.55,1) .5s  forwards,
        hg2ArcShift 16s  ease-in-out                3.2s infinite alternate;
    transform-origin: center;
}
.hg2-arc-2 {
    stroke-dashoffset: 2000;
    animation:
        hg2ArcDraw  2.6s cubic-bezier(.45,0,.55,1) .9s  forwards,
        hg2ArcShift 20s  ease-in-out               -4s  infinite alternate;
}
.hg2-arc-3 {
    stroke-dashoffset: 2000;
    animation:
        hg2ArcDraw  2.8s cubic-bezier(.45,0,.55,1) 1.3s forwards,
        hg2ArcShift 24s  ease-in-out               -8s  infinite alternate;
}
@keyframes hg2ArcDraw {
    from { stroke-dashoffset: 2000; }
    to   { stroke-dashoffset: 0;    }
}
@keyframes hg2ArcShift {
    0%   { transform: translateY(0);   }
    100% { transform: translateY(14px); }
}

/* ── rings — more dramatic pulse + slight rotation ── */
.hg2-ring {
    animation: hg2RingPulse 9s ease-in-out infinite alternate;
    transform-box: fill-box;
    transform-origin: center;
}
.hg2-ring-2 { animation-delay: -3s; animation-duration: 12s; }
.hg2-ring-3 { animation-delay: -5s; animation-duration: 10s; }
@keyframes hg2RingPulse {
    0%   { transform: scale(1);     opacity: 0.08; }
    50%  { transform: scale(1.10);  opacity: 0.20; }
    100% { transform: scale(1.04);  opacity: 0.12; }
}

/* ── rotating dashed rings ── */
.hg2-dash-ring {
    transform-box: fill-box;
    transform-origin: center;
    animation: hg2DashSpin 22s linear infinite;
}
.hg2-dash-ring-inner {
    animation-duration: 14s;
    animation-direction: reverse;
}
@keyframes hg2DashSpin {
    from { transform: rotate(0deg);   }
    to   { transform: rotate(360deg); }
}

/* ── radar ripple pings ── */
.hg2-ripple {
    transform-box: fill-box;
    transform-origin: center;
    animation: hg2RippleOut 3.6s ease-out infinite;
    opacity: 0;
}
.hg2-ripple-1 { animation-delay:  0s;   }
.hg2-ripple-2 { animation-delay: -1.8s; }
.hg2-ripple-3 { animation-delay: -0.6s; }
.hg2-ripple-4 { animation-delay: -2.4s; }
@keyframes hg2RippleOut {
    0%   { transform: scale(1);   opacity: 0.30; }
    100% { transform: scale(6);   opacity: 0;    }
}

/* ── sparkle twinkle ── */
.hg2-spark {
    transform-box: fill-box;
    transform-origin: center;
    animation: hg2Sparkle 3.5s ease-in-out infinite;
    opacity: 0;
}
.hg2-spark-1 { animation-delay:  0s;    animation-duration: 3.8s; }
.hg2-spark-2 { animation-delay: -1.3s;  animation-duration: 4.2s; }
.hg2-spark-3 { animation-delay: -2.6s;  animation-duration: 3.5s; }
.hg2-spark-4 { animation-delay: -0.8s;  animation-duration: 4.8s; }
@keyframes hg2Sparkle {
    0%,  100% { opacity: 0;    transform: scale(0.3) rotate(0deg);   }
    30%        { opacity: 0;    transform: scale(0.3) rotate(0deg);   }
    50%        { opacity: 0.75; transform: scale(1)   rotate(45deg);  }
    70%        { opacity: 0.75; transform: scale(1)   rotate(45deg);  }
    90%        { opacity: 0;    transform: scale(0.4) rotate(90deg);  }
}

/* ── floating diamonds ── */
.hg2-diamond {
    transform-box: fill-box;
    transform-origin: center;
}
.hg2-diamond-1 {
    animation: hg2DiamondA 9s ease-in-out infinite alternate;
}
.hg2-diamond-2 {
    animation: hg2DiamondB 11s ease-in-out -3s infinite alternate;
}
@keyframes hg2DiamondA {
    0%   { transform: translateY(0)    rotate(0deg);   opacity: 0.7; }
    100% { transform: translateY(-18px) rotate(180deg); opacity: 1;   }
}
@keyframes hg2DiamondB {
    0%   { transform: translateY(0)    rotate(0deg);   opacity: 0.6; }
    100% { transform: translateY(-14px) rotate(-180deg); opacity: 1;  }
}

/* --- two-column grid --- */
.hg-hero2-wrap {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
}

/* ── Right column: text ── */
.hg-hero2-text {
    display: flex;
    flex-direction: column;
}

/* live badge */
.hg-hero2-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    padding: 7px 16px;
    border-radius: 999px;
    background: rgba(252, 190, 13, .14);
    border: 1px solid rgba(252, 190, 13, .35);
    color: #b38600;
    font-size: 13px;
    font-weight: 800;
    width: fit-content;
}

.hg-hero2-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #FCBE0D;
    box-shadow: 0 0 0 0 rgba(252, 190, 13, .5);
    animation: hgHero2Pulse 2s ease-out infinite;
    flex-shrink: 0;
}

@keyframes hgHero2Pulse {
    0%   { box-shadow: 0 0 0 0   rgba(252, 190, 13, .5); }
    70%  { box-shadow: 0 0 0 9px rgba(252, 190, 13, 0);  }
    100% { box-shadow: 0 0 0 0   rgba(252, 190, 13, 0);  }
}

/* headline — override CMS class */
.hg-hero__title {
    margin: 0 0 16px;
    font-size: clamp(26px, 4vw, 48px);
    line-height: 1.5;
    font-weight: 900;
    color: #2F3235;
}

.hg-hero2-sub {
    margin: 0 0 12px;
    font-size: clamp(15px, 1.8vw, 18px);
    font-weight: 700;
    color: #b38600;
}

.hg-hero2-desc {
    margin: 0 0 32px;
    font-size: clamp(13px, 1.4vw, 15px);
    line-height: 2;
    color: #939598;
    max-width: 520px;
}

/* CTA */
.hg-hero2-cta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.hg-hero2-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    border-radius: 999px;
    background: linear-gradient(135deg, #2F3235, #272B30);
    color: #FCBE0D;
    font-size: 15px;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 12px 32px rgba(39, 43, 48, .22);
    transition: transform .2s ease, box-shadow .2s ease;
}

.hg-hero2-btn-primary:hover {
    color: #FCBE0D;
    transform: translateY(-2px);
    box-shadow: 0 18px 42px rgba(39, 43, 48, .32);
}

/* ── Left column: chips + card ── */
.hg-hero2-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* trust chips — staggered slide-in */
.hg-hero2-chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.hg-hero2-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #e8ecf0;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .06);
    color: #2F3235;
    font-size: 13px;
    font-weight: 700;
    /* staggered entrance */
    animation: hg2ChipIn .5s cubic-bezier(.22,1,.36,1) both;
    animation-delay: calc(var(--ci, 0) * 0.08s + 0.3s);
}

@keyframes hg2ChipIn {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

.hg-hero2-chip-ic {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: linear-gradient(135deg, #FCBE0D, #F9DB81);
}

.hg-hero2-chip-ic i {
    font-size: 15px;
    color: #2F3235;
    line-height: 1;
}

/* inline calculator card */
.hg-hero2-card {
    background: #fff;
    border-radius: 24px;
    padding: clamp(18px, 2.8vw, 28px);
    border: 1px solid #e8ecf0;
    box-shadow:
        0 24px 60px rgba(15, 23, 42, .10),
        0  0  0 1px rgba(252, 190, 13, .08) inset;
    display: flex;
    flex-direction: column;
    gap: 14px;
    animation: hg2CardIn .6s cubic-bezier(.22,1,.36,1) .1s both;
}

@keyframes hg2CardIn {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hg-hero2-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hg-hero2-card-title {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
    color: #2F3235;
}
.hg-hero2-card-cap{
    margin: 0;
    font-size: 11.5px;
    font-weight: 400;
}

.hg-hero2-card-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 800;
    color: #16a34a;
}

.hg-hero2-card-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    animation: hg2LivePulse 1.8s ease-out infinite;
}

@keyframes hg2LivePulse {
    0%   { box-shadow: 0 0 0 0 rgba(34,197,94,.5); }
    70%  { box-shadow: 0 0 0 7px rgba(34,197,94,0); }
    100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

/* buy/sell tabs */
.hg-hero2-tabs {
    display: flex;
    gap: 6px;
    padding: 5px;
    border-radius: 999px;
    background: #f1f4f9;
    border: 1px solid #e8ecf0;
}

.hg-hero2-tab {
    flex: 1;
    padding: 9px 0;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: #939598;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    transition: all .18s ease;
}

.hg-hero2-tab.active {
    background: #fff;
    color: #2F3235;
    box-shadow: 0 4px 12px rgba(15,23,42,.08);
}

/* inputs */
.hg-hero2-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hg-hero2-field-label {
    font-size: 12.5px;
    font-weight: 800;
    color: #939598;
}

.hg-hero2-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.hg-hero2-input {
    width: 100%;
    padding: 12px 44px 12px 14px;
    border-radius: 12px;
    border: 2px solid #e2e6e9;
    background: #f8fafc;
    font-size: 15px;
    font-family: inherit;
    color: #2F3235;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
    direction: ltr;
    text-align: right;
}

.hg-hero2-input:focus {
    border-color: #FCBE0D;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(252, 190, 13, .14);
}

.hg-hero2-unit {
    position: absolute;
    inset-inline-end: 14px;
    font-size: 12px;
    font-weight: 800;
    color: #939598;
    pointer-events: none;
}

.hg-hero2-hint {
    font-size: 11.5px;
    color: #939598;
    font-weight: 700;
}

/* calc CTA */
.hg-hero2-calc-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px;
    border-radius: 14px;
    border: none;
    background: linear-gradient(135deg, #FCBE0D, #e5a800);
    color: #2F3235;
    font-size: 15px;
    font-weight: 900;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
    box-shadow: 0 8px 24px rgba(252, 190, 13, .30);
}

.hg-hero2-calc-btn:hover {
    color: #2F3235;
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(252, 190, 13, .40);
}
.hg-hero2-cta-Res{
    display: none;
}
/* ── responsive ── */
@media (max-width: 991px) {
    .hg-hero2-wrap {
        grid-template-columns: 1fr;
    }

    .hg-hero2-side {
        max-width: 480px;
        width: 100%;
        margin: 0 auto;
    }

    .hg-hero2-text {
        text-align: center;
        align-items: center;
    }

    .hg-hero2-desc {
        max-width: 100%;
    }

    .hg-hero2-cta {
        justify-content: center;

    }
}
@media (max-width: 767px) {
    .hg-hero2-cta {
        display: none;

    }
    .hg-hero2-cta-Res{
        display: flex;
        align-items: center;
        gap: 14px;
        flex-wrap: wrap;
        margin-top: 10px;
    }

}
@media (max-width: 575px) {
    .hg-hero2-btn-primary {
        width: 100%;
        justify-content: center;
    }

    .hg-hero2-chips {
        grid-template-columns: 1fr 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hg2-p, .hg2-arc, .hg2-ring,
    .hg2-blob, .hg2-dash-ring, .hg2-ripple,
    .hg2-spark, .hg2-diamond { animation: none; opacity: 1; }
    .hg2-arc { stroke-dashoffset: 0; }
    .hg-hero2-badge-dot,
    .hg-hero2-card-live-dot { animation: none; }
    .hg-hero2-chip,
    .hg-hero2-card { animation: none; opacity: 1; transform: none; }
    .hg-hero2-btn-primary,
    .hg-hero2-tab,
    .hg-hero2-calc-btn { transition: none; }
}

.hg2c-scene {
    position: relative;
    /* vertical padding creates breathing room above/below for chips */
    padding: 66px 0 52px;
}

/* base chip pill */
.hg2c-float-chip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 23px;
    border-radius: 999px;
    background: #fff;
    border: 1.5px solid rgba(252,190,13,.30);
    box-shadow:
        0 8px 24px rgba(15,23,42,.09),
        0 0 0 4px rgba(252,190,13,.05);
    font-size: 14px;
    font-weight: 700;
    color: #2F3235;
    white-space: nowrap;
    z-index: 3;
    /* entrance: opacity fade+scale; float: margin-top bob (different CSS prop → no conflict) */
    animation:
        hg2FcFadeIn .55s cubic-bezier(.22,1,.36,1) calc(var(--ci, 0) * 0.12s + .25s) both,
        hg2FcBob     calc(3.2s + var(--ci, 0) * 0.4s) ease-in-out calc(var(--ci, 0) * 0.55s + .8s) infinite alternate;
}

@keyframes hg2FcFadeIn {
    from { opacity: 0; transform: scale(.84); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes hg2FcBob {
    from { margin-top: 0; }
    to   { margin-top: -9px; }
}

/* chip icon circle */
.hg2c-fc-icon {
    flex-shrink: 0;
    width: 33px;
    height: 33px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FCBE0D, #F9DB81);
    display: grid;
    place-items: center;
    color: #2F3235;
    font-size: 16px;
}
/* individual chip positions */
.hg2c-float-chip--0 { top: 10px;   right: 20px;  }   /* top-right  */
.hg2c-float-chip--1 { top: 88px;    left: -104px; }   /* left, upper */
.hg2c-float-chip--2 { bottom: 1px; left:  -34px;  }   /* left, lower */
.hg2c-float-chip--3 { bottom: 29px; right: -57px;  }   /* bottom-right */

.hg2c-wrap {
    position: relative;
    overflow: hidden;
    background: #fff;
    border-radius: 24px;
    padding: 22px 22px 20px;
    border: 1px solid #edf0f4;
    box-shadow:
        0 32px 72px rgba(15,23,42,.13),
        0  8px 24px rgba(15,23,42,.06),
        0  0   0 1.5px rgba(252,190,13,.14) inset;
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation: hg2CardIn .6s cubic-bezier(.22,1,.36,1) .1s both;
    transition: box-shadow .25s ease, transform .25s ease;
}

/* gold top-accent bar */
.hg2c-wrap::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 5%, #FCBE0D 40%, #F9DB81 60%, transparent 95%);
    border-radius: 24px 24px 0 0;
    z-index: 1;
}

/* slow light-sweep shimmer */
.hg2c-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        108deg,
        transparent 38%,
        rgba(252,190,13,.07) 50%,
        transparent 62%
    );
    background-size: 220% 100%;
    background-position: 200% 0;
    animation: hg2cShimmer 4s linear 1.2s infinite;
    pointer-events: none;
    border-radius: inherit;
    z-index: 0;
}

@keyframes hg2cShimmer {
    from { background-position: 220% 0; }
    to   { background-position: -220% 0; }
}

.hg2c-wrap:hover {
    box-shadow:
        0 40px 88px rgba(15,23,42,.15),
        0 12px 32px rgba(15,23,42,.08),
        0  0   0 2px rgba(252,190,13,.22) inset;
    transform: translateY(-3px);
}

/* --- header --- */
.hg2c-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hg2c-head-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(135deg, #FCBE0D, #F9DB81);
    color: #2F3235;
}

.hg2c-head-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.hg2c-title {
    font-size: 14px;
    font-weight: 900;
    color: #2F3235;
    line-height: 1.3;
}

.hg2c-subtitle {
    font-size: 11.5px;
    font-weight: 600;
    color: #939598;
}

.hg2c-live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 800;
    /*color: #16a34a;*/
    /*background: rgba(34,197,94,.08);*/
    /*border: 1px solid rgba(34,197,94,.18);*/
    padding: 4px 10px;
    border-radius: 999px;
    flex-shrink: 0;
}

.hg2c-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    animation: hg2LivePulse 1.8s ease-out infinite;
}

/* --- live price row --- */
.hg2c-price-row {
    display: flex;
    align-items: stretch;
    gap: 0;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #edf0f4;
    overflow: hidden;
}

.hg2c-price-item {
    flex: 1;
    display: flex;
    justify-content: space-between;
    padding: 12px 10px;
    text-align: center;
}

.hg2c-price-divider {
    width: 1px;
    background: #edf0f4;
    margin: 10px 0;
}

.hg2c-price-label {
    font-size: 10.5px;
    font-weight: 700;
    color: #939598;
    white-space: nowrap;
}

.hg2c-price-val {
    font-size: 13px;
    font-weight: 900;
    direction: ltr;
}

.hg2c-price-buy  { direction: rtl }
.hg2c-price-sell { color: #dc2626; }

/* --- converter --- */
.hg2c-converter {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.hg2c-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.hg2c-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 800;
    color: #939598;
}

.hg2c-label-icon {
    display: inline-flex;
    color: #FCBE0D;
}

.hg2c-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.hg2c-input {
    width: 100%;
    padding: 13px 52px 13px 14px;
    border-radius: 14px;
    border: 2px solid #edf0f4;
    background: #f8fafc;
    font-size: 16px;
    font-weight: 700;
    font-family: inherit;
    color: #2F3235;
    outline: none;
    direction: ltr;
    text-align: right;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.hg2c-input:focus {
    border-color: #FCBE0D;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(252,190,13,.12);
}

.hg2c-input::placeholder {
    color: #c8cdd3;
}

.hg2c-badge {
    position: absolute;
    inset-inline-end: 12px;
    font-size: 11px;
    font-weight: 800;
    color: #2F3235;
    pointer-events: none;
    white-space: nowrap;
}

.hg2c-meta {
    min-height: 16px;
    padding-inline-end: 4px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.hg2c-sot,
.hg2c-toman {
    font-size: 11px;
    font-weight: 700;
    color: #939598;
    direction: rtl;
}

/* --- swap divider --- */
.hg2c-swap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}

.hg2c-swap-line {
    flex: 1;
    height: 1px;
    background: #edf0f4;
}

.hg2c-swap-icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #f1f4f9;
    border: 1px solid #edf0f4;
    color: #939598;
}

/* --- CTA --- */
.hg2c-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, #2F3235, #272B30);
    color: #FCBE0D;
    font-size: 14.5px;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(39,43,48,.22);
    transition: transform .18s ease, box-shadow .18s ease;
    margin-top: 2px;
}

.hg2c-action:hover {
    color: #FCBE0D;
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(39,43,48,.32);
}

/* --- mobile: chips drop to a 2×2 grid below the card --- */
@media (max-width: 767px) {
    .hg-hero2{
        padding: 140px 0;
    }
    .hg2c-scene {
        padding: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px 10px;
    }

    /* card spans full width and appears first */
    .hg2c-scene .hg2c-wrap {
        grid-column: 1 / -1;
        order: -1;
    }

    /* chips become static inline pills in the grid */
    .hg2c-float-chip {
        position: static;
        border-radius: 14px;
        padding: 7px 12px;
        justify-content: flex-start;
        margin-top: 0 !important;
        animation: hg2FcFadeIn .4s cubic-bezier(.22,1,.36,1) calc(var(--ci, 0) * .08s + .3s) both;
    }
    .hg2c-fc-icon{
        width: 32px;
        height: 32px;
        font-size: 18px;
    }
    .hg2c-float-chip{
        font-size: 13px;
        font-weight: 700;
    }

    /* clear the per-chip absolute coordinates */
    .hg2c-float-chip--0,
    .hg2c-float-chip--1,
    .hg2c-float-chip--2,
    .hg2c-float-chip--3 {
        top: auto; bottom: auto; left: auto; right: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hg2c-live-dot { animation: none; }
    .hg2c-float-chip { animation: none; opacity: 1; }
    .hg2c-wrap::after { animation: none; }
    .hg2c-wrap { animation: none; opacity: 1; transform: none !important; }
    .hg2c-action,
    .hg2c-input { transition: none; }
}
/*-------------hero End------------*/
/*-------------market---------------*/
.hg-market {
    position: relative;
    overflow: hidden;
    padding: clamp(56px, 8vw, 96px) 0;
    background: linear-gradient(180deg, var(--bg-light) 0%, #ffffff 100%);
}

/* --- header --- */
.hg-market-head {
    max-width: 720px;
    margin: 0 auto clamp(32px, 5vw, 56px);
    text-align: center;
}

.hg-market-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(34, 197, 94, .10);
    border: 1px solid rgba(34, 197, 94, .22);
    color: #16a34a;
    font-size: 13px;
    font-weight: 800;
}

.hg-market-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, .5);
    animation: hgMarketPulse 1.8s ease-out infinite;
}

@keyframes hgMarketPulse {
    0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, .5); }
    70%  { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.hg-market-title {
    margin: 0 0 12px;
    font-size: clamp(22px, 3.4vw, 34px);
    line-height: 1.5;
    font-weight: 900;
    color: var(--text-dark);
}

.hg-market-desc {
    margin: 0;
    font-size: clamp(14px, 1.6vw, 16px);
    line-height: 2;
    color: var(--text-muted);
}

/* --- chart card --- */
.hg-market-card {
    display: flex;
    flex-direction: column;
    padding: clamp(18px, 2.4vw, 26px);
    border-radius: 24px;
    background: #fff;
    border: 1px solid #eef1f6;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .06);
}

.hg-market-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.hg-market-card-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: var(--text-dark);
}

.hg-market-card-title i {
    color: var(--brand-main);
    font-size: 20px;
    line-height: 1;
}

.hg-market-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(34, 197, 94, .10);
    color: #16a34a;
    font-size: 12px;
    font-weight: 800;
}

.hg-market-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, .5);
    animation: hgMarketPulse 1.8s ease-out infinite;
}

/* --- sidebar: live board + calculator --- */
.hg-market-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
}

/* stretch the calculator card to fill the column height (aligns with chart) */
.hg-market-side .calculator-box-modern {
    flex: 1 1 auto;
}

@media (max-width: 991px) {
    .hg-market-side { height: auto; }
    .hg-market-side .calculator-box-modern { flex: 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
    .hg-market-badge-dot,
    .hg-market-live-dot { animation: none; }
}
.hg-hc {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: clamp(56px, 8vw, 104px) 0 clamp(48px, 7vw, 90px);
    background:
        radial-gradient(60% 50% at 18% 8%, rgba(35, 101, 168, .12), transparent 60%),
        radial-gradient(55% 45% at 85% 6%, rgba(255, 195, 0, .14), transparent 60%),
        linear-gradient(180deg, #ffffff 0%, var(--bg-light) 100%);
}

.hg-hc-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }

.hg-hc-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(35, 101, 168, .05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(35, 101, 168, .05) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 18%, #000 0%, transparent 72%);
    mask-image: radial-gradient(ellipse 70% 55% at 50% 18%, #000 0%, transparent 72%);
}

.hg-hc-orb { position: absolute; border-radius: 50%; filter: blur(70px); }
.hg-hc-orb-1 { width: 380px; height: 380px; top: -130px; inset-inline-end: -90px; background: radial-gradient(circle, rgba(62, 141, 210, .25), transparent 70%); }
.hg-hc-orb-2 { width: 320px; height: 320px; top: -120px; inset-inline-start: -80px; background: radial-gradient(circle, rgba(255, 195, 0, .22), transparent 70%); }

/* --- header --- */
.hg-hc-head { max-width: 720px; margin: 0 auto clamp(34px, 5vw, 52px); text-align: center; }

.hg-hc-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .75);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid var(--brand-border);
    color: var(--brand-main);
    font-size: 13.5px;
    font-weight: 800;
    box-shadow: 0 6px 22px rgba(35, 101, 168, .08);
}

.hg-hc-badge i { font-size: 17px; }

.hg-hc-title {
    margin: 0 0 14px;
    font-size: clamp(26px, 4.4vw, 44px);
    line-height: 1.4;
    font-weight: 900;
    color: var(--text-dark);
}

.hg-hc-desc {
    max-width: 560px;
    margin: 0 auto;
    font-size: clamp(14px, 1.6vw, 16px);
    line-height: 2;
    color: var(--text-muted);
}

/* --- quick-access cards --- */
.hg-hc-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
    margin-bottom: clamp(48px, 7vw, 80px);
}

.hg-hc-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #eef1f6;
    box-shadow: 0 14px 36px rgba(15, 23, 42, .05);
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.hg-hc-card:hover {
    transform: translateY(-4px);
    border-color: var(--brand-border);
    box-shadow: 0 22px 46px rgba(35, 101, 168, .14);
}

.hg-hc-card-ic {
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: #fff;
    font-size: 24px;
}

.hg-hc-card-ic-blue  { background: linear-gradient(135deg, var(--brand-main), var(--brand-main-2)); }
.hg-hc-card-ic-gold  { background: linear-gradient(135deg, var(--gold), var(--gold-dark)); }
.hg-hc-card-ic-green { background: linear-gradient(135deg, #16a34a, #22c55e); }

.hg-hc-card-body { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.hg-hc-card-title { font-size: 16px; font-weight: 800; color: var(--text-dark); }
.hg-hc-card-desc { font-size: 13px; line-height: 1.9; color: var(--text-muted); }
.hg-hc-card-arrow { font-size: 22px; color: #c2ccd8; transition: color .2s ease, transform .2s ease; }
.hg-hc-card:hover .hg-hc-card-arrow { color: var(--brand-main); transform: translateX(-3px); }

/* --- FAQ --- */
.hg-hc-faq { max-width: 860px; margin: 0 auto clamp(48px, 7vw, 80px); }

.hg-hc-faq-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.hg-hc-faq-head h2 { margin: 0; font-size: clamp(19px, 2.6vw, 26px); font-weight: 900; color: var(--text-dark); }

.hg-hc-faq-all {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    color: var(--brand-main);
    font-size: 13.5px;
    font-weight: 800;
    text-decoration: none;
}

.hg-hc-faq-all:hover { color: var(--brand-main-2); }
.hg-hc-faq-all i { font-size: 18px; }

.hg-hc-accordion { display: flex; flex-direction: column; gap: 12px; }

.hg-hc-acc-item {
    border: 1px solid #eef1f6;
    border-radius: 16px !important;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .04);
}

.hg-hc-accordion .accordion-button {
    padding: 18px 20px;
    background: #fff;
    color: var(--text-dark);
    font-size: 15px;
    font-weight: 800;
    box-shadow: none;
}

.hg-hc-accordion .accordion-button:not(.collapsed) {
    color: var(--brand-main);
    background: rgba(35, 101, 168, .04);
}

.hg-hc-accordion .accordion-button:focus { box-shadow: none; border: 0; }

.hg-hc-accordion .accordion-button::after {
    width: 1.1rem;
    height: 1.1rem;
    background-size: 1.1rem;
    margin-inline-start: 0;
    margin-inline-end: auto;
}

.hg-hc-accordion .accordion-body {
    padding: 0 20px 20px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 2.1;
}

/* --- support CTA --- */
.hg-hc-support {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}

.hg-hc-support-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px;
    border-radius: 20px;
    background: linear-gradient(135deg, #fff 0%, var(--bg-light) 100%);
    border: 1px solid #eef1f6;
    box-shadow: 0 14px 36px rgba(15, 23, 42, .05);
}

.hg-hc-support-ic {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: rgba(35, 101, 168, .1);
    color: var(--brand-main);
    font-size: 26px;
}

.hg-hc-support-body h3 { margin: 0 0 4px; font-size: 16px; font-weight: 800; color: var(--text-dark); }
.hg-hc-support-body p { margin: 0 0 12px; font-size: 13px; color: var(--text-muted); }

.hg-hc-support-btn {
    display: inline-flex;
    align-items: center;
    padding: 9px 20px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--brand-main), var(--brand-main-2));
    color: #fff;
    font-size: 13.5px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 10px 22px rgba(35, 101, 168, .24);
    transition: transform .2s ease, box-shadow .2s ease;
}

.hg-hc-support-btn:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 28px rgba(35, 101, 168, .32); }

@media (max-width: 575px) {
    .hg-hc-orb { display: none; }
    .hg-hc-support-card { flex-direction: column; text-align: center; }
}
/*-------------market End---------------*/

/*---------------intro video-------------*/
.hg-intro-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 110px 0;
    background: linear-gradient(160deg, #1e2226 0%, #272B30 100%);
}

/* ── decorative background ── */
.hg-intro-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.hg-intro-dots-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: .6;
}
.hg-intro-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(72px);
    will-change: transform;
    animation: hgIntroFloat 16s ease-in-out infinite;
}
.hg-intro-orb-1 {
    width: 500px; height: 500px;
    top: -160px; inset-inline-start: -120px;
    background: radial-gradient(circle, rgba(252,190,13,.22), transparent 70%);
    animation-delay: 0s;
}
.hg-intro-orb-2 {
    width: 420px; height: 420px;
    bottom: -160px; inset-inline-end: -80px;
    background: radial-gradient(circle, rgba(249,219,129,.18), transparent 70%);
    animation-delay: -6s;
}
.hg-intro-orb-3 {
    width: 300px; height: 300px;
    top: 35%; inset-inline-end: 30%;
    background: radial-gradient(circle, rgba(252,190,13,.10), transparent 70%);
    animation-delay: -11s;
}
@keyframes hgIntroFloat {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%       { transform: translate3d(0, -32px, 0) scale(1.07); }
}

/* ── header ── */
.hg-intro-head {
    position: relative;
    z-index: 1;
    max-width: 680px;
    margin: 0 auto 60px;
    text-align: center;
}
.hg-intro-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    padding: 8px 18px;
    border-radius: 999px;
    border: 1.5px solid rgba(252,190,13,.30);
    background: rgba(252,190,13,.07);
    color: #FCBE0D;
    font-size: 13px;
    font-weight: 800;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 4px 20px rgba(252,190,13,.08);
    animation: hgIntroFadeUp .6s cubic-bezier(.22,1,.36,1) .1s both;
}
.hg-intro-badge-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #FCBE0D;
    box-shadow: 0 0 0 0 rgba(34,197,94,.5);
    animation: hgIntroPulse 2s ease-out infinite;
}
@keyframes hgIntroPulse {
    0%   { box-shadow: 0 0 0 0   #fcbe0b4f; }
    70%  { box-shadow: 0 0 0 9px rgba(34,197,94,0); }
    100% { box-shadow: 0 0 0 0   rgba(34,197,94,0); }
}
.hg-intro-title {
    margin: 0 0 16px;
    font-size: 42px;
    line-height: 1.55;
    font-weight: 900;
    color: #F5F7F6;
    animation: hgIntroFadeUp .65s cubic-bezier(.22,1,.36,1) .2s both;
}
.hg-intro-title-accent {
    color: #FCBE0D;
}
.hg-intro-desc {
    max-width: 580px;
    margin: 0 auto;
    font-size: 15.5px;
    line-height: 2.1;
    color: #939598;
    animation: hgIntroFadeUp .65s cubic-bezier(.22,1,.36,1) .3s both;
}
@keyframes hgIntroFadeUp {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── stage grid ── */
.hg-intro-stage { position: relative; z-index: 1; }
.hg-intro-stage-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 56px;
    align-items: center;
}

/* ── feature list ── */
.hg-intro-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.hg-intro-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 18px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(252,190,13,.10);
    border-inline-start: 3px solid transparent;
    box-shadow: 0 4px 20px rgba(0,0,0,.14);
    transition: transform .24s ease, border-color .24s ease, background .24s ease, box-shadow .24s ease;
    animation: hgIntroFadeUp .55s cubic-bezier(.22,1,.36,1) calc(.4s + var(--ii, 0) * .1s) both;
}
.hg-intro-item:hover {
    transform: translateX(-4px);
    border-inline-start-color: #FCBE0D;
    background: rgba(252,190,13,.06);
    box-shadow: 0 8px 28px rgba(252,190,13,.10);
}
.hg-intro-item-icon {
    flex-shrink: 0;
    width: 44px; height: 44px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: linear-gradient(135deg, rgba(252,190,13,.18), rgba(249,219,129,.12));
    border: 1px solid rgba(252,190,13,.22);
    color: #FCBE0D;
}
.hg-intro-item-body { flex: 1; }
.hg-intro-item-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 4px;
}
.hg-intro-item-num {
    font-size: 11px;
    font-weight: 900;
    color: #FCBE0D;
    opacity: .55;
    letter-spacing: .04em;
    flex-shrink: 0;
}
.hg-intro-item-body h4 {
    margin: 0;
    font-size: 15.5px;
    font-weight: 800;
    color: #F5F7F6;
    line-height: 1.4;
}
.hg-intro-item-body p {
    margin: 0;
    font-size: 13px;
    line-height: 1.9;
    color: #939598;
}

/* CTA button */
.hg-intro-cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 24px;
    padding: 13px 24px;
    border-radius: 14px;
    background: linear-gradient(135deg, #FCBE0D, #F9DB81);
    color: #2F3235;
    font-size: 14.5px;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 8px 28px rgba(252,190,13,.30);
    transition: transform .22s ease, box-shadow .22s ease;
    animation: hgIntroFadeUp .6s cubic-bezier(.22,1,.36,1) .85s both;
}
.hg-intro-cta:hover {
    color: #2F3235;
    transform: translateY(-3px);
    box-shadow: 0 14px 36px rgba(252,190,13,.40);
}

/* ── media: video + floating chips ── */
.hg-intro-media {
    position: relative;
    perspective: 1400px;
    animation: hgIntroFadeUp .7s cubic-bezier(.22,1,.36,1) .25s both;
}

/* floating trust chips */
.hg-iv-chip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(30,34,38,.82);
    border: 1.5px solid rgba(252,190,13,.28);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #F5F7F6;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(0,0,0,.30);
    z-index: 4;
    animation:
        hgIntroFadeUp .5s  cubic-bezier(.22,1,.36,1) var(--chip-delay, .6s) both,
        hgIvChipBob   3.6s ease-in-out               var(--chip-bob,   0s)  infinite alternate;
}
.hg-iv-chip svg { color: #FCBE0D; flex-shrink: 0; }
.hg-iv-chip--live   { top: -14px;  right: 24px;  --chip-delay: .6s;  --chip-bob: 0s;   }
.hg-iv-chip--secure { bottom: 40px; right: -14px; --chip-delay: .75s; --chip-bob: .8s;  }
.hg-iv-chip--users  { bottom: -14px; left: 32px;  --chip-delay: .9s;  --chip-bob: 1.6s; }
.hg-iv-chip-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #22c55e;
    animation: hgIntroPulse 1.9s ease-out infinite;
}
@keyframes hgIvChipBob {
    from { transform: translateY(0);    }
    to   { transform: translateY(-7px); }
}

/* ── video frame ── */
.hg-intro-player { position: relative; }
.hg-intro-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 22px;
    border: 1.5px solid rgba(252,190,13,.22);
    background: #0d0f12;
    box-shadow:
        0 0   0 1px rgba(252,190,13,.08) inset,
        0 40px 80px rgba(0,0,0,.50),
        0  0  60px rgba(252,190,13,.10);
    transform-style: preserve-3d;
    transition: transform .35s ease, box-shadow .35s ease;
    animation: hgFrameGlow 4s ease-in-out 1.2s infinite alternate;
}
@keyframes hgFrameGlow {
    from { box-shadow: 0 40px 80px rgba(0,0,0,.50), 0 0 50px rgba(252,190,13,.08); }
    to   { box-shadow: 0 40px 80px rgba(0,0,0,.50), 0 0 80px rgba(252,190,13,.20); }
}
.hg-intro-video,
.hg-intro-poster,
.hg-intro-iframe {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%; height: 100%;
    border: 0;
    object-fit: cover;
}
.hg-intro-iframe { z-index: 3; }
.hg-intro-glow {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(13,15,18,0) 40%, rgba(13,15,18,.65) 100%);
    transition: opacity .3s ease;
}

/* ── play button — gold ── */
.hg-intro-play {
    position: absolute;
    inset: 0;
    z-index: 2;
    margin: auto;
    width: 88px; height: 88px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: transform .25s ease, opacity .3s ease;
}
.hg-intro-play:hover { transform: scale(1.08); }
.hg-intro-play:focus-visible { outline: 3px solid #FCBE0D; outline-offset: 4px; }
.hg-intro-play-core {
    position: relative;
    z-index: 2;
    width: 72px; height: 72px;
    display: grid;
    place-items: center;
    padding-inline-start: 4px;
    border-radius: 50%;
    color: #2F3235;
    background: linear-gradient(135deg, #FCBE0D, #F9DB81);
    box-shadow: 0 12px 32px rgba(252,190,13,.45);
}
.hg-intro-play-ring {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 88px; height: 88px;
    border-radius: 50%;
    border: 2px solid rgba(252,190,13,.55);
    animation: hgIntroRing 2.6s ease-out infinite;
}
.hg-intro-play-ring-2 { animation-delay: 1.3s; }
@keyframes hgIntroRing {
    0%   { transform: scale(.8);  opacity: .75; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* brand logo */
.hg-intro-brand {
    position: absolute;
    z-index: 2;
    inset-block-start: 16px;
    inset-inline-end: 16px;
    transition: opacity .3s ease;
}
.hg-intro-brand img {
    display: block;
    height: 30px; width: auto;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
}

/* playing state */
.hg-intro-player.is-playing .hg-intro-play,
.hg-intro-player.is-playing .hg-intro-glow,
.hg-intro-player.is-playing .hg-intro-brand,
.hg-intro-player.is-playing .hg-intro-poster {
    opacity: 0;
    pointer-events: none;
}

/* ── responsive ── */
@media (max-width: 1100px) {
    .hg-intro-stage-grid { gap: 36px; }
}
@media (max-width: 991px) {
    .hg-intro-section { padding: 72px 0; }
    .hg-intro-head { margin-bottom: 40px; }
    .hg-intro-title { font-size: 32px; }
    .hg-intro-stage-grid { grid-template-columns: 1fr; gap: 40px; }
    .hg-intro-side { order: 2; }
    .hg-intro-media { order: 1; max-width: 640px; margin-inline: auto; width: 100%; }
    .hg-intro-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .hg-iv-chip--secure { right: auto; left: -10px; }
}
@media (max-width: 575px) {
    .hg-intro-section { padding: 52px 0; }
    .hg-intro-head { margin-bottom: 28px; }
    .hg-intro-badge { font-size: 12px; padding: 7px 14px; }
    .hg-intro-title { font-size: 24px; line-height: 1.6; }
    .hg-intro-desc { font-size: 14px; line-height: 2; }
    .hg-intro-frame { border-radius: 16px; }
    .hg-intro-play,
    .hg-intro-play-ring { width: 70px; height: 70px; }
    .hg-intro-play-core { width: 58px; height: 58px; }
    .hg-intro-brand img { height: 24px; }
    .hg-intro-list { grid-template-columns: 1fr; gap: 10px; }
    .hg-intro-item { padding: 14px 16px; gap: 12px; }
    .hg-intro-item-icon { width: 40px; height: 40px; border-radius: 11px; }
    .hg-intro-item-body h4 { font-size: 14.5px; }
    .hg-intro-item-body p { font-size: 13px; }
    .hg-intro-cta { width: 100%; justify-content: center; }
    .hg-iv-chip--secure { display: none; }
    .hg-iv-chip--live { right: 12px; }
    .hg-iv-chip--users { left: 12px; }
    .hg-intro-orb { display: none; }
}
@media (max-width: 360px) {
    .hg-intro-title { font-size: 21px; }
    .hg-intro-play,
    .hg-intro-play-ring { width: 62px; height: 62px; }
    .hg-intro-play-core { width: 52px; height: 52px; }
    .hg-intro-item { padding: 12px; }
}

/* ── reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .hg-intro-orb,
    .hg-intro-badge-dot,
    .hg-intro-play-ring,
    .hg-iv-chip-dot,
    .hg-iv-chip { animation: none; opacity: 1; }
    .hg-intro-frame { animation: none; }
    .hg-intro-head > *,
    .hg-intro-item,
    .hg-intro-media,
    .hg-intro-cta { animation: none; opacity: 1; transform: none; }
    .hg-intro-item,
    .hg-intro-frame,
    .hg-intro-cta { transition: none; }
}
/*---------------intro video End-------------*/