/* =====================================================================
   IRON PAW CHALLENGE — Main stylesheet
   Dark theme + gold accent, inspired by the official concept designs.
   ===================================================================== */

/* -------- Design tokens -------- */
:root {
    /* Surfaces */
    --ip-bg:           #0a0e1a;
    --ip-bg-2:        #0e1322;
    --ip-surface:     #131a2c;
    --ip-surface-2:   #1a2238;
    --ip-surface-3:   #222b44;
    --ip-border:      rgba(255, 255, 255, 0.06);
    --ip-border-strong: rgba(255, 255, 255, 0.12);

    /* Text */
    --ip-text:        #f5f7fb;
    --ip-text-dim:    #b4bccf;
    --ip-text-mute:   #7a839a;

    /* Accents */
    --ip-gold:        #f4b53c;
    --ip-gold-2:      #e89c1a;
    --ip-gold-soft:   rgba(244, 181, 60, 0.12);
    --ip-silver:      #c4cbdc;
    --ip-bronze:      #cd7f32;

    /* States */
    --ip-up:          #4ade80;
    --ip-down:        #f05252;
    --ip-info:        #5aa3ff;

    /* Shadows */
    --ip-shadow:      0 10px 40px rgba(0, 0, 0, .55);
    --ip-shadow-gold: 0 0 40px rgba(244, 181, 60, .18);

    /* Layout */
    --ip-radius:      8px;
    --ip-radius-sm:   4px;
    --ip-radius-lg:   10px;
    --ip-maxw:        1320px;
    --ip-gap:         18px;

    --ip-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

body {
    background: radial-gradient(1200px 600px at 80% -200px, rgba(244,181,60,.06), transparent 60%),
                radial-gradient(900px 500px at 10% 80%, rgba(90,163,255,.05), transparent 60%),
                var(--ip-bg);
    color: var(--ip-text);
    font-family: var(--ip-font);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

a { color: inherit; text-decoration: none; }

.ip-container {
    max-width: var(--ip-maxw);
    margin: 0 auto;
    padding: 0 28px;
}

/* ===== Header ===== */
.ip-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(10, 14, 26, 0.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--ip-border);
}

.ip-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    gap: 24px;
}

.ip-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.ip-brand__icon {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    background: linear-gradient(135deg, var(--ip-gold) 0%, var(--ip-gold-2) 100%);
    display: grid;
    place-items: center;
    color: #1a1300;
    box-shadow: 0 0 0 1px rgba(244,181,60,.35), 0 8px 24px rgba(244,181,60,.2);
}
.ip-brand__icon svg { width: 24px; height: 24px; }

.ip-brand__title {
    font-size: 16px;
    letter-spacing: 0.16em;
    line-height: 1;
}
.ip-brand__sub {
    font-size: 10px;
    letter-spacing: 0.2em;
    color: var(--ip-text-mute);
    font-weight: 600;
    line-height: 1.1;
    text-transform: uppercase;
}

.ip-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    justify-content: center;
}

.ip-nav a {
    padding: 24px 16px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--ip-text-dim);
    text-transform: uppercase;
    position: relative;
    transition: color .2s ease;
}
.ip-nav a::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 50%;
    height: 2px;
    width: 0;
    background: var(--ip-gold);
    transform: translateX(-50%);
    transition: width .25s ease;
}
.ip-nav a:hover { color: var(--ip-text); }
.ip-nav a.is-active { color: var(--ip-gold); }
.ip-nav a.is-active::after { width: 28px; }

.ip-header__actions {
    display: flex;
    gap: 14px;
    align-items: center;
    color: var(--ip-text-dim);
}
.ip-header__btn {
    width: 34px; height: 34px;
    border: 1px solid var(--ip-border);
    border-radius: 4px;
    display: grid; place-items: center;
    cursor: pointer;
    background: transparent;
    color: var(--ip-text-dim);
    transition: all .2s ease;
}
.ip-header__btn:hover { color: var(--ip-gold); border-color: rgba(244,181,60,.4); }
.ip-header__btn svg { width: 16px; height: 16px; }

/* ===== Page heading ===== */
.ip-page-head {
    padding: 38px 0 18px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 28px;
    align-items: end;
}

.ip-page-title {
    font-size: 58px;
    line-height: .95;
    font-weight: 900;
    letter-spacing: 0.01em;
    margin: 0 0 10px;
    text-transform: uppercase;
    background: linear-gradient(180deg, #fff 0%, #cdd4e3 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.ip-page-subtitle {
    color: var(--ip-gold);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 12px;
}

.ip-page-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    color: var(--ip-text-dim);
    font-size: 13px;
    font-weight: 500;
    margin-top: 14px;
}
.ip-page-meta span { display: inline-flex; align-items: center; gap: 8px; }
.ip-page-meta svg { width: 14px; height: 14px; color: var(--ip-gold); }

.ip-rules-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    border: 1px solid var(--ip-border-strong);
    border-radius: 4px;
    background: rgba(255,255,255,.02);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    color: var(--ip-text);
    transition: all .25s ease;
    margin-top: 18px;
    font-family: inherit;
}
.ip-rules-btn:hover {
    border-color: var(--ip-gold);
    color: var(--ip-gold);
}
.ip-rules-btn svg { width: 14px; height: 14px; }

/* ===== Podium ===== */
.ip-podium {
    display: grid;
    grid-template-columns: 1fr 1.08fr 1fr;
    gap: 14px;
    margin-top: 4px;
    min-width: 540px;
    align-items: end;
}

/* Wrapper around each podium card so the dog can extend above the frame */
.ip-podium__item {
    position: relative;
    padding-top: 70px;             /* room for the dog to "stick up" above the card */
    opacity: 0;
    transform: translateY(12px);
    animation: ip-fade-in .55s ease forwards;
}
.ip-podium__item:nth-child(1) { animation-delay: .05s; }
.ip-podium__item:nth-child(2) { animation-delay: .15s; }
.ip-podium__item:nth-child(3) { animation-delay: .25s; }

.ip-podium__item.is-first { padding-top: 90px; }

/* The dog cut-out: sibling of the card so it can extend above the frame.
   z-index 2 = in front of card body, BUT overlay/foot/rank are z-index 3-4
   so they always sit on top — even on hover. */
.ip-podium__dog {
    position: absolute;
    left: 50%;
    bottom: 58px;                  /* paws rest right on top of the foot box */
    transform: translateX(-50%);
    height: 340px;                 /* fixed height — width: auto preserves ratio */
    width: auto;
    max-width: none;               /* important: do NOT clip width; that distorts ratio */
    display: block;
    z-index: 2;
    pointer-events: none;
    filter: drop-shadow(0 12px 22px rgba(0,0,0,.55));
}
.ip-podium__item.is-first .ip-podium__dog { height: 365px; bottom: 58px; }

.ip-podium__card {
    position: relative;            /* keeps overlay anchored; NO z-index so the
                                       card doesn't establish its own stacking
                                       context — that would push the inner
                                       overlay below the (sibling) dog. */
    background: linear-gradient(180deg, var(--ip-surface-2) 0%, var(--ip-surface) 100%);
    border: 1px solid var(--ip-border);
    border-radius: var(--ip-radius);
    overflow: hidden;
    cursor: pointer;
    transition: border-color .25s ease, box-shadow .25s ease;
    display: flex;
    flex-direction: column;
    min-height: 320px;
}

/* Hover lift is applied to the WRAP, not the card. Reason: `transform`
   creates a stacking context — applying it to the card would isolate the
   overlay's z-index inside the card and the (sibling) dog would suddenly
   render in front of the text. Transforming the whole item moves dog +
   card + overlay together with stacking preserved. */
.ip-podium__item {
    transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.ip-podium__item:hover {
    transform: translateY(-3px);
}
.ip-podium__item:hover .ip-podium__card {
    border-color: var(--ip-border-strong);
    box-shadow: var(--ip-shadow);
}
.ip-podium__item.is-first .ip-podium__card {
    border-color: rgba(244,181,60,.55);
    box-shadow: var(--ip-shadow-gold);
    min-height: 340px;
}

.ip-podium__rank {
    position: absolute;
    top: 12px; left: 12px;
    z-index: 4;
    width: 32px; height: 32px;
    border-radius: 50%;
    display: grid; place-items: center;
    font-weight: 900;
    font-size: 15px;
    background: var(--ip-surface-3);
    color: var(--ip-text);
    box-shadow: 0 4px 12px rgba(0,0,0,.5);
}
.ip-podium__item.is-first  .ip-podium__rank { background: var(--ip-gold);   color:#1a1300; }
.ip-podium__item.is-second .ip-podium__rank { background: var(--ip-silver); color:#1a1f30; }
.ip-podium__item.is-third  .ip-podium__rank { background: var(--ip-bronze); color:#fff; }

.ip-podium__photo {
    position: relative;
    flex: 1;
    width: 100%;
    background:
        radial-gradient(120% 60% at 50% 100%, rgba(0,0,0,.55) 0%, transparent 70%),
        linear-gradient(160deg, #232b44 0%, #14192a 100%);
    overflow: hidden;
}
.ip-podium__photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(10,14,26,.65) 80%, rgba(10,14,26,.95) 100%);
    pointer-events: none;
    z-index: 1;
}

.ip-podium__overlay {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 14px 16px 14px;
    z-index: 3;                    /* above the dog image */
}

.ip-podium__country {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--ip-text-mute);
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 4px;
}
.ip-flag {
    width: 22px; height: 16px;
    border-radius: 3px;
    background: linear-gradient(180deg, #444, #222);
    display: inline-block;
    overflow: hidden;
    position: relative;
}
.ip-flag::after {
    content: attr(data-code);
    position: absolute;
    inset: 0;
    display: grid; place-items: center;
    font-size: 8px;
    font-weight: 800;
    color: rgba(255,255,255,.7);
    letter-spacing: 0.05em;
}
.ip-flag--nor { background: linear-gradient(90deg, #ef2b2d 0 35%, #fff 35% 45%, #002868 45% 60%, #fff 60% 70%, #ef2b2d 70%); }
.ip-flag--swe { background: linear-gradient(90deg, #006aa7 0 35%, #fecc00 35% 45%, #006aa7 45%); }
.ip-flag--usa { background: linear-gradient(180deg, #b22234 0 50%, #fff 50%); }
.ip-flag--ger { background: linear-gradient(180deg, #000 0 33%, #dd0000 33% 66%, #ffce00 66%); }
.ip-flag--ned { background: linear-gradient(180deg, #ae1c28 0 33%, #fff 33% 66%, #21468b 66%); }
.ip-flag--fin { background: #fff; }
.ip-flag--fra { background: linear-gradient(90deg, #002395 0 33%, #fff 33% 66%, #ed2939 66%); }
.ip-flag--den { background: #c8102e; }
.ip-flag--aus { background: #00247d; }
.ip-flag--can { background: linear-gradient(90deg, #ff0000 0 25%, #fff 25% 75%, #ff0000 75%); }

.ip-podium__name {
    font-size: 26px;
    font-weight: 900;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    margin: 0 0 6px;
    line-height: 1;
}

.ip-podium__rating-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.ip-podium__rating {
    font-size: 34px;
    font-weight: 900;
    color: var(--ip-text);
    line-height: 1;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}
.ip-podium__card.is-first .ip-podium__rating { color: var(--ip-gold); }
.ip-podium__rating-label {
    color: var(--ip-text-mute);
    font-size: 10px;
    letter-spacing: 0.18em;
    font-weight: 700;
    text-transform: uppercase;
}

.ip-podium__foot {
    padding: 10px 16px 12px;
    border-top: 1px solid var(--ip-border);
    background: var(--ip-bg-2);
    flex-shrink: 0;
    position: relative;
    z-index: 3;                    /* above the dog image */
}
.ip-podium__disc {
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--ip-text-mute);
    text-transform: uppercase;
    font-weight: 700;
}
.ip-podium__disc strong { color: var(--ip-text); font-weight: 800; }

.ip-podium__delta {
    margin-top: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
}
.ip-podium__delta .ip-trend { font-size: 12px; }
.ip-podium__delta-events { color: var(--ip-text-mute); letter-spacing: 0.12em; font-size: 11px; text-transform: uppercase; }

/* ===== Tab strip ===== */
.ip-tabs {
    margin-top: 28px;
    border-bottom: 1px solid var(--ip-border);
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
}
.ip-tabs::-webkit-scrollbar { display: none; }

.ip-tabs button {
    background: none;
    border: 0;
    padding: 14px 18px;
    color: var(--ip-text-mute);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    position: relative;
    transition: color .2s ease;
    white-space: nowrap;
    font-family: inherit;
}
.ip-tabs button::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 18px; right: 18px;
    height: 2px;
    background: var(--ip-gold);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.ip-tabs button:hover { color: var(--ip-text); }
.ip-tabs button.is-active { color: var(--ip-gold); }
.ip-tabs button.is-active::after { transform: scaleX(1); }

/* ===== Main rankings table ===== */
.ip-card {
    background: linear-gradient(180deg, var(--ip-surface) 0%, var(--ip-bg-2) 100%);
    border: 1px solid var(--ip-border);
    border-radius: var(--ip-radius-lg);
    box-shadow: var(--ip-shadow);
}

.ip-table-wrap {
    margin-top: 0;
    overflow-x: auto;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.ip-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    min-width: 920px;
}
.ip-table thead th {
    text-align: left;
    padding: 14px 18px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ip-text-mute);
    border-bottom: 1px solid var(--ip-border);
    cursor: pointer;
    user-select: none;
    transition: color .2s ease;
    white-space: nowrap;
}
.ip-table thead th.is-sorted { color: var(--ip-gold); }
.ip-table thead th:hover { color: var(--ip-text); }
.ip-table thead th .ip-sort-arrow { margin-left: 6px; opacity: .65; }

.ip-table tbody tr {
    transition: background .2s ease, transform .25s ease;
    opacity: 0;
    transform: translateY(8px);
    animation: ip-row-in .45s ease forwards;
}
.ip-table tbody tr:nth-child(1)  { animation-delay: .02s; }
.ip-table tbody tr:nth-child(2)  { animation-delay: .05s; }
.ip-table tbody tr:nth-child(3)  { animation-delay: .08s; }
.ip-table tbody tr:nth-child(4)  { animation-delay: .11s; }
.ip-table tbody tr:nth-child(5)  { animation-delay: .14s; }
.ip-table tbody tr:nth-child(6)  { animation-delay: .17s; }
.ip-table tbody tr:nth-child(7)  { animation-delay: .20s; }
.ip-table tbody tr:nth-child(8)  { animation-delay: .23s; }
.ip-table tbody tr:nth-child(9)  { animation-delay: .26s; }
.ip-table tbody tr:nth-child(10) { animation-delay: .29s; }

.ip-table tbody tr:hover {
    background: rgba(255,255,255,.03);
    cursor: pointer;
}
.ip-table tbody td {
    padding: 12px 18px;
    border-bottom: 1px solid var(--ip-border);
    vertical-align: middle;
}
.ip-table tbody tr:last-child td { border-bottom: 0; }

.ip-rank-num {
    width: 30px;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -0.02em;
}
.ip-table tbody tr.is-top-3 .ip-rank-num { color: var(--ip-gold); }
.ip-table tbody tr[data-rank="2"] .ip-rank-num { color: var(--ip-silver); }
.ip-table tbody tr[data-rank="3"] .ip-rank-num { color: var(--ip-bronze); }

.ip-dog-cell {
    display: flex; align-items: center; gap: 14px;
    min-width: 180px;
}
.ip-dog-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2a3552, #161c30);
    display: grid; place-items: center;
    color: var(--ip-text-mute);
    flex: 0 0 36px;
    overflow: hidden;
    border: 1px solid var(--ip-border-strong);
}
.ip-dog-avatar svg { width: 55%; height: 55%; opacity: .6; }
.ip-dog-name { font-weight: 800; letter-spacing: 0.02em; font-size: 15px; }
.ip-rating-num {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.ip-trend {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 800;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}
.ip-trend--up   { color: var(--ip-up); }
.ip-trend--down { color: var(--ip-down); }
.ip-trend--flat { color: var(--ip-text-mute); }
.ip-trend svg { width: 12px; height: 12px; }

.ip-disc-text {
    color: var(--ip-text);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.ip-last-event {
    color: var(--ip-text-dim);
    font-size: 13px;
}
.ip-arrow {
    color: var(--ip-text-mute);
    transition: transform .2s ease, color .2s ease;
}
.ip-table tbody tr:hover .ip-arrow {
    color: var(--ip-gold);
    transform: translateX(3px);
}

.ip-table__footer {
    padding: 16px;
    display: grid;
    place-items: center;
    border-top: 1px solid var(--ip-border);
}
.ip-loadmore {
    background: none;
    border: 0;
    color: var(--ip-text-dim);
    font-size: 12px;
    letter-spacing: 0.18em;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    gap: 10px;
    align-items: center;
    padding: 10px 18px;
    border-radius: 4px;
    transition: all .2s ease;
    font-family: inherit;
}
.ip-loadmore:hover { color: var(--ip-gold); }

/* ===== Bottom info boxes ===== */
.ip-info-grid {
    margin-top: 26px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.ip-info-card {
    background: linear-gradient(180deg, var(--ip-surface) 0%, var(--ip-bg-2) 100%);
    border: 1px solid var(--ip-border);
    border-radius: var(--ip-radius);
    padding: 18px 18px 14px;
    transition: transform .3s ease, border-color .3s ease;
}
.ip-info-card:hover {
    border-color: var(--ip-border-strong);
    transform: translateY(-2px);
}
.ip-info-card__head {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 6px;
}
.ip-info-card__title {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    display: flex; align-items: center; gap: 8px;
}
.ip-info-card__sub {
    font-size: 12px;
    color: var(--ip-text-mute);
    margin-bottom: 16px;
}
.ip-info-card__viewall {
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--ip-text-mute);
    text-transform: uppercase;
    font-weight: 700;
    cursor: pointer;
    transition: color .2s ease;
}
.ip-info-card__viewall:hover { color: var(--ip-gold); }

.ip-info-row {
    display: grid;
    grid-template-columns: 22px 32px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--ip-border);
    cursor: pointer;
    transition: background .2s ease;
}
.ip-info-row:last-child { border-bottom: 0; }
.ip-info-row:hover { background: rgba(255,255,255,.025); }
.ip-info-row__num {
    font-weight: 900;
    font-size: 15px;
    color: var(--ip-text-mute);
}
.ip-info-row__name {
    font-weight: 800;
    font-size: 14px;
}
.ip-info-row__meta {
    font-size: 12px;
    color: var(--ip-text-dim);
}
.ip-info-row__value {
    font-weight: 800;
    font-size: 13px;
    color: var(--ip-up);
    font-variant-numeric: tabular-nums;
}
.ip-info-row__value--neutral { color: var(--ip-gold); }

/* Regional rankings: simpler row */
.ip-region-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--ip-border);
}
.ip-region-row:last-child { border-bottom: 0; }
.ip-region-row__name { font-weight: 600; color: var(--ip-text-dim); font-size: 13px; }
.ip-region-row__dog {
    display: flex; align-items: center; gap: 10px;
    font-weight: 800;
    font-size: 14px;
}
.ip-region-row__chev { color: var(--ip-text-mute); }

/* ===== ELO link helper ===== */
.ip-elo-link {
    color: var(--ip-gold);
    border-bottom: 1px dashed var(--ip-gold);
    cursor: pointer;
    transition: opacity .2s ease;
    font-weight: 700;
}
.ip-elo-link:hover { opacity: .8; }

.ip-info-tooltip {
    display: inline-grid;
    place-items: center;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--ip-surface-3);
    color: var(--ip-text-mute);
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
    margin-left: 6px;
    transition: all .2s ease;
}
.ip-info-tooltip:hover { color: var(--ip-gold); background: var(--ip-gold-soft); }

/* ===== Footer note ===== */
.ip-footnote {
    margin-top: 22px;
    padding: 14px 18px;
    border-radius: var(--ip-radius-sm);
    border: 1px solid var(--ip-border);
    background: rgba(255,255,255,.015);
    font-size: 13px;
    color: var(--ip-text-dim);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}
.ip-footnote svg { width: 16px; height: 16px; color: var(--ip-info); flex-shrink: 0; }
.ip-footnote a { color: var(--ip-gold); font-weight: 700; }
.ip-footnote__left { display: flex; align-items: center; gap: 12px; }

/* ===== Modal ===== */
.ip-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(4, 7, 16, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    transition: opacity .25s ease;
}
.ip-modal-backdrop.is-open {
    display: flex;
    opacity: 1;
}

.ip-modal {
    width: 100%;
    max-width: 520px;
    background: linear-gradient(180deg, var(--ip-surface-2) 0%, var(--ip-surface) 100%);
    border: 1px solid var(--ip-border-strong);
    border-radius: var(--ip-radius-lg);
    padding: 32px;
    position: relative;
    box-shadow: 0 30px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(244,181,60,.18) inset;
    transform: translateY(20px) scale(.96);
    opacity: 0;
    transition: transform .35s cubic-bezier(.2,.8,.25,1), opacity .25s ease;
}
.ip-modal-backdrop.is-open .ip-modal {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.ip-modal__head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
}
.ip-modal__icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: grid; place-items: center;
    background: var(--ip-gold-soft);
    color: var(--ip-gold);
    flex-shrink: 0;
}
.ip-modal__icon svg { width: 22px; height: 22px; }
.ip-modal__title {
    font-size: 26px;
    font-weight: 900;
    margin: 0 0 4px;
    letter-spacing: 0.01em;
}
.ip-modal__sub {
    color: var(--ip-text-dim);
    font-size: 13px;
    letter-spacing: 0.04em;
    margin: 0;
}

.ip-modal__close {
    position: absolute;
    top: 18px; right: 18px;
    background: none;
    border: 0;
    color: var(--ip-text-mute);
    width: 32px; height: 32px;
    border-radius: 50%;
    display: grid; place-items: center;
    cursor: pointer;
    transition: all .2s ease;
}
.ip-modal__close:hover { background: var(--ip-surface-3); color: var(--ip-text); }
.ip-modal__close svg { width: 16px; height: 16px; }

.ip-modal__body {
    color: var(--ip-text-dim);
    font-size: 14px;
    line-height: 1.6;
    border-top: 1px solid var(--ip-border);
    padding-top: 18px;
}
.ip-modal__body p { margin: 0 0 14px; }
.ip-modal__body ul {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
}
.ip-modal__body ul li {
    position: relative;
    padding-left: 18px;
    margin-bottom: 6px;
}
.ip-modal__body ul li::before {
    content: '';
    position: absolute;
    left: 0; top: 9px;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--ip-gold);
}
.ip-modal__body strong { color: var(--ip-text); }

.ip-modal__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}
.ip-modal__cta {
    width: 100%;
    padding: 14px;
    background: var(--ip-gold);
    color: #1a1300;
    border: 0;
    border-radius: 4px;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all .2s ease;
    font-family: inherit;
}
.ip-modal__cta:hover {
    background: #fbc54e;
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(244,181,60,.35);
}
.ip-modal__link {
    width: 100%;
    background: none;
    border: 0;
    color: var(--ip-gold);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
    padding: 6px;
    transition: opacity .2s ease;
    font-family: inherit;
}
.ip-modal__link:hover { opacity: .8; }

/* ===== Footer ===== */
.ip-footer {
    margin-top: 64px;
    padding: 36px 0 56px;
    color: var(--ip-text-mute);
    font-size: 13px;
    border-top: 1px solid var(--ip-border);
}
.ip-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
}
.ip-footer__inner a:hover { color: var(--ip-gold); }
.ip-footer__links { display: flex; gap: 22px; flex-wrap: wrap; }

/* ===== Animations ===== */
@keyframes ip-fade-in {
    to { opacity: 1; transform: translateY(0); }
}
@keyframes ip-row-in {
    to { opacity: 1; transform: translateY(0); }
}
@keyframes ip-pulse-gold {
    0%, 100% { box-shadow: 0 0 0 0 rgba(244,181,60,.5); }
    50%      { box-shadow: 0 0 0 8px rgba(244,181,60,0); }
}

.ip-pulse { animation: ip-pulse-gold 2.4s ease-in-out infinite; }

/* ===== Counter (animated number) ===== */
.ip-counter[data-target] { font-variant-numeric: tabular-nums; }

/* ===== Responsive ===== */
@media (max-width: 1100px) {
    .ip-page-head { grid-template-columns: 1fr; }
    .ip-podium { min-width: 0; }
    .ip-info-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .ip-container { padding: 0 18px; }
    .ip-nav { display: none; }
    .ip-page-title { font-size: 36px; }
    .ip-podium { grid-template-columns: 1fr; }
    .ip-podium__card.is-first { transform: none; }
    .ip-header__actions .ip-header__btn:not(:last-child) { display: none; }
}