:root{
    --primary-color:#0000bd;
}
/* ===== BENTO GRID ===== */
.bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 200px;
    gap: 12px;
}

/* ===== TILE BASE ===== */
.tile {
    border-radius: 0px;
    padding: 26px;
    position: relative;
    overflow: hidden;
    cursor: default;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    transform: scale(0.9);
    transition:
        transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.3s ease;
}

.tile.visible {
    transform: scale(1);
}

.tile:hover {
    transform: scale(1.025) translateY(-3px);
}

/* variants */
.t-light {
    background: #f3f3f7;
}

.t-blue {
    background: var(--primary-color);
    color: #fff;
}

.t-dark {
    background: var(--icons-color);
    color: #fff;
}

.t-outline {
    background: #fff;
    border: 1.5px solid #e8e8e8;
}

.t-blue-soft {
    background: rgba(0, 0, 221, 0.05);
    border: 1.5px solid rgba(0, 0, 221, 0.12);
}

.t-blue:hover {
    box-shadow: 0 16px 50px rgba(0, 0, 221, 0.22);
    transform: scale(1.02) translateY(-3px);
}

.t-dark:hover {
    box-shadow: 0 16px 50px rgba(49, 49, 49, 0.22);
    transform: scale(1.02) translateY(-3px);
}

.t-light:hover,
.t-outline:hover,
.t-blue-soft:hover {
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.07);
}

/* spans */
.c3 {
    grid-column: span 3;
}

.c4 {
    grid-column: span 4;
}

.c5 {
    grid-column: span 5;
}

.c6 {
    grid-column: span 6;
}

.c7 {
    grid-column: span 7;
}

.c8 {
    grid-column: span 8;
}

.r2 {
    grid-row: span 2;
}

/* ===== RING ===== */
.ring-wrap {
    position: relative;
    flex-shrink: 0;
    padding: 0;
}

.ring-wrap svg {
    display: block;
    transform: rotate(-90deg);
}

.r-bg {
    fill: none;
    stroke: rgba(0, 0, 0, 0.07);
    stroke-width: 5;
}

.r-fill {
    fill: none;
    stroke: var(--primary-color);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-dasharray: 201;
    stroke-dashoffset: 201;
    transition: stroke-dashoffset 1.7s cubic-bezier(0.4, 0, 0.2, 1) 0.15s;
}

.t-blue .r-bg {
    stroke: rgba(255, 255, 255, 0.15);
}

.t-blue .r-fill {
    stroke: rgba(255, 255, 255, 0.85);
}

.t-dark .r-bg {
    stroke: rgba(255, 255, 255, 0.1);
}

.t-dark .r-fill {
    stroke: rgba(255, 255, 255, 0.75);
}

.t-blue-soft .r-fill {
    stroke: var(--primary-color);
}

.ring-lbl {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--primary-color);
}

.t-blue .ring-lbl {
    color: rgba(255, 255, 255, 0.85);
}

.t-dark .ring-lbl {
    color: rgba(255, 255, 255, 0.75);
}

/* ===== NUMBER ===== */
.num {
    font-size: clamp(2.6rem, 4vw, 3.8rem);
    font-weight: 500;
    letter-spacing: -0.05em;
    line-height: 1;
    color: var(--primary-color);
}

.t-blue .num {
    color: #fff;
}

.t-dark .num {
    color: #fff;
}

.t-blue-soft .num {
    color: var(--primary-color);
}

/* hero number bigger */
.num-xl {
    font-size: clamp(2.7rem, 8vw, 7rem);
}

/* ===== LABEL ===== */
.lbl {
    font-size: 0.67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: #313131;
}

.t-blue .lbl {
    color: rgba(255, 255, 255, 0.45);
}

.t-dark .lbl {
    color: rgba(255, 255, 255, 0.4);
}

.t-blue-soft .lbl {
    color: rgba(0, 0, 221, 0.45);
}

/* ===== DESC ===== */
.dsc {
    font-size: 0.81rem;
    color: #999;
    line-height: 1.5;
    font-weight: 300;
}

.t-blue .dsc {
    color: rgba(255, 255, 255, 0.6);
}

.t-dark .dsc {
    color: rgba(255, 255, 255, 0.5);
}

.t-blue-soft .dsc {
    color: rgba(0, 0, 100, 0.45);
}

/* ===== ROW layout (ring + text side by side) ===== */
.row {
    display: flex;
    align-items: center;
    gap: 18px;
}

/* ===== PILL ===== */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(0, 0, 221, 0.08);
    border-radius: 100px;
    padding: 4px 12px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--primary-color);
    width: fit-content;
}

.pill-d {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary-color);
    animation: blink 2s infinite;
}

.t-blue .pill {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.t-blue .pill-d {
    background: #fff;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: .35
    }
}

/* ===== DECO ===== */
.deco {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.t-blue .deco-a {
    width: 220px;
    height: 220px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    bottom: -90px;
    right: -90px;
}

.t-blue .deco-b {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.04);
    top: 12px;
    right: 12px;
}

.t-dark .deco-a {
    width: 180px;
    height: 180px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    bottom: -70px;
    right: -70px;
}

/* ===== SPARKLINE ===== */
.spark {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 36px;
}

.sp {
    flex: 1;
    border-radius: 3px 3px 0 0;
    background: rgba(0, 0, 221, 0.12);
    transition: background 0.3s;
}

.t-blue .sp {
    background: rgba(255, 255, 255, 0.15);
}

.t-dark .sp {
    background: rgba(255, 255, 255, 0.12);
}

.tile:hover .sp {
    background: rgba(0, 0, 221, 0.22);
}

.t-blue:hover .sp {
    background: rgba(255, 255, 255, 0.28);
}

.t-dark:hover .sp {
    background: rgba(255, 255, 255, 0.22);
}

@media(max-width:900px) {
    .bento {
        grid-template-columns: repeat(6, 1fr);
        grid-auto-rows: 180px;
    }

    .c3,
    .c4,
    .c5 {
        grid-column: span 3;
    }

    .c6,
    .c7,
    .c8 {
        grid-column: span 6;
    }

    .r2 {
        grid-row: span 2;
    }
}

@media(max-width:540px) {
    .bento {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 190px;
    }.tile {
        justify-content: start;
    }

    .c3,
    .c4,
    .c5,
    .c6,
    .c7,
    .c8 {
        grid-column: span 2;
    }

    .r2 {
        grid-row: span 1;
    }
}