/*!
 * Copyright (c) 2026 Daki.cc — Niclas Specht. All rights reserved.
 * Proprietary and confidential.
 */

/* "By the numbers" and the closing CTA, built on the Why Daki card language. */
.stats-section, .cta-section { --home-border: #343039; --home-surface: #181818; position: relative; }
.stats-section :focus-visible, .cta-section :focus-visible { outline: 2px solid #d48ae6; outline-offset: 5px; }
.stats-section .icon, .cta-section .icon { display: inline-block; width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.stats-section .status-dot, .cta-section .status-dot { display: inline-block; flex-shrink: 0; width: 5px; height: 5px; border-radius: 50%; background: #e2a1f3; box-shadow: 0 0 8px #c568df60; }

/* ── By the numbers ─────────────────────────────────────────────── */
.stats-section { padding: 88px 0 72px; }
.stats-section > .container { position: relative; z-index: 1; }
.stats-heading { font-weight: bold; }
.stats-subtext { margin: 0; }
.stats-help { padding: 0; border: 0; background: none; color: #cc96de; text-decoration: underline; text-decoration-color: #a432c055; text-underline-offset: 3px; transition: color .2s, text-decoration-color .2s; }
.stats-help:hover { color: #e5baef; text-decoration-color: currentColor; }

.metric-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-areas: 'users users users users orders orders' 'years years discord discord discord discord'; grid-auto-rows: 230px; gap: 17px; }
.metric-card { position: relative; isolation: isolate; overflow: hidden; min-width: 0; margin: 0; padding: 24px; border: 1px solid var(--home-border); border-radius: 13px; background: radial-gradient(ellipse at var(--glow-x, 75%) var(--glow-y, 50%), rgba(118, 9, 145, var(--glow-opacity, .07)), transparent 70%), var(--home-surface); transition: border-color .25s, box-shadow .25s; }
.metric-card:hover { border-color: #855493; box-shadow: 0 8px 26px #00000020; }
.metric-card::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 100%), #a432c016, transparent 80%); opacity: 0; transition: opacity .3s; }
.metric-card:hover::before { opacity: 1; }
.metric-users { grid-area: users; --glow-x: 100%; --glow-y: 0%; --glow-opacity: .12; border-color: #684376; }
.metric-orders { grid-area: orders; --glow-x: 100%; --glow-y: 100%; }
.metric-years { grid-area: years; --glow-x: 0%; --glow-y: 100%; }
.metric-discord { grid-area: discord; --glow-x: 100%; --glow-y: 20%; --glow-opacity: .1; }

.metric-label { position: relative; z-index: 2; display: flex; align-items: center; gap: 9px; margin: 0; color: #f2edf5; font: 600 15px 'Poppins', sans-serif; letter-spacing: -.25px; }
.metric-label .icon { width: 17px; height: 17px; color: #c48cdb; }
.metric-label .fa-discord { width: 17px; color: #c48cdb; font-size: 15px; text-align: center; }
.metric-number { position: relative; z-index: 2; margin: 18px 0 8px; color: #f2edf5; font: 400 56px/1 'Work Sans', sans-serif; letter-spacing: -3px; font-variant-numeric: tabular-nums; white-space: nowrap; text-shadow: 0 0 28px #a432c015; }
.metric-users .metric-number { font-size: 76px; letter-spacing: -4.5px; color: #cc9bdd; }
.metric-text { position: relative; z-index: 2; max-width: 300px; margin: 0; color: #bdb5c2; font-size: 14px; line-height: 1.65; }
.metric-text strong { color: #e8deed; font-weight: 500; }

/* Users: a field of dots, a few of them lit. */
.users-art { position: absolute; top: 0; right: 0; bottom: 0; width: 46%; z-index: 0; }
.users-dots { position: absolute; inset: 0; background-image: radial-gradient(circle, #6b4d78 1.1px, transparent 1.6px); background-size: 14px 14px; mask-image: radial-gradient(ellipse 70% 75% at 60% 50%, black 20%, transparent 75%); }
.users-dots::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, #d690ea 1.6px, transparent 2.2px); background-size: 42px 56px; background-position: 7px 21px; mask-image: radial-gradient(ellipse 40% 45% at 60% 50%, black, transparent 80%); }
.users-pin { position: absolute; top: 50%; left: 48%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid #9861ac; border-radius: 5px; background: #281c30; color: #e0b9ed; font: 10px ui-monospace, monospace; white-space: nowrap; }

/* Orders: the payment methods people actually use. */
.orders-art { position: absolute; left: 24px; right: 24px; bottom: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.orders-art img { width: 38px; height: 26px; padding: 4px 6px; border: 1px solid #403447; border-radius: 5px; background: #141415; object-fit: contain; filter: saturate(.35); opacity: .8; transition: filter .2s, opacity .2s; }
.metric-orders:hover .orders-art img { filter: none; opacity: 1; }
.orders-art span { margin-left: 2px; color: #9c8ca4; font: 9px ui-monospace, monospace; }

/* Years: one segment per year, the current one live. */
.years-art { position: absolute; left: 24px; right: 24px; bottom: 28px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.years-art > span { position: relative; height: 4px; border-radius: 2px; background: #5d3f6a; }
.years-art > span:nth-child(2) { background: #774d88; }
.years-art > span:nth-child(3) { background: #9561a8; }
.years-art > .years-now { background: linear-gradient(90deg, #b06fc5, #d690ea); box-shadow: 0 0 10px #a432c045; }
.years-now .status-dot { position: absolute; right: -2px; top: -4px; width: 12px; height: 12px; border: 3px solid #181818; background: #e2a1f3; box-sizing: border-box; }
.years-now .status-dot::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid #c568df; opacity: 0; animation: metric-ping 2.6s ease-out infinite; }
@keyframes metric-ping { 0% { transform: scale(.4); opacity: .8; } 100% { transform: scale(1.4); opacity: 0; } }

/* Discord: a glimpse of the community channel. */
.metric-discord .metric-text { max-width: 46%; }
.discord-art { position: absolute; top: 24px; right: 24px; width: 44%; z-index: 0; }
.discord-channel { display: flex; align-items: center; gap: 6px; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid #ffffff0b; color: #9c8ca4; font: 10px ui-monospace, monospace; }
.discord-channel span { color: #c48cdb; }
.discord-message { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 10px; }
.discord-message img { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; box-shadow: 0 0 0 1px #ffffff14; }
.discord-message > div { min-width: 0; }
.discord-name { display: block; margin-bottom: 1px; font: 500 11px/1.3 'Work Sans', sans-serif; }
.discord-name--duck { color: #e6cf86; }
.discord-name--blob { color: #93bce9; }
.discord-message span { display: block; color: #c2b6c8; font-size: 11px; line-height: 1.45; }
.discord-typing { display: flex; align-items: center; gap: 7px; padding-left: 35px; color: #8f8197; font: 9px ui-monospace, monospace; }
.chat-dots { display: flex; gap: 3px; }
.chat-dots b { width: 4px; height: 4px; border-radius: 50%; background: #9f77ac; animation: chat-dot 1.2s ease-in-out infinite; }
.chat-dots b:nth-child(2) { animation-delay: .15s; }
.chat-dots b:nth-child(3) { animation-delay: .3s; }
@keyframes chat-dot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }
.metric-card .card-bottom-link { position: absolute; bottom: 23px; left: 24px; right: 24px; z-index: 2; display: flex; align-items: center; justify-content: space-between; color: #cc96de; font: 11px 'Work Sans', sans-serif; text-decoration: none; }
.metric-card .card-bottom-link .icon { width: 14px; height: 14px; transition: transform .2s; }
.metric-card .card-bottom-link:hover { color: #e5baef; }
.metric-card .card-bottom-link:hover .icon { transform: translateX(3px); }

/* ── Closing CTA ────────────────────────────────────────────────── */
.cta-section { padding: 8px 0 24px; }
.cta-card { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 40px; padding: 52px 56px; border: 1px solid #684376; border-radius: 13px; background: radial-gradient(ellipse 70% 90% at 100% 0%, rgba(118, 9, 145, .16), transparent 70%), radial-gradient(ellipse 50% 70% at 0% 100%, rgba(118, 9, 145, .07), transparent 70%), var(--home-surface); }
.cta-card::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(#ffffff05 1px, transparent 1px), linear-gradient(90deg, #ffffff05 1px, transparent 1px); background-size: 22px 22px; mask-image: radial-gradient(ellipse 55% 80% at 78% 50%, black, transparent 75%); }
.cta-card::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 100%), #a432c014, transparent 80%); opacity: 0; transition: opacity .3s; }
.cta-card:hover::after { opacity: 1; }
.cta-title { margin: 0 0 14px; color: #f2edf5; font: 600 clamp(1.6rem, 3vw, 2.25rem)/1.15 'Poppins', sans-serif; letter-spacing: -.03em; }
.cta-title .accent { color: #cc9bdd; }
.cta-text { max-width: 470px; margin: 0 0 28px; color: #bdb5c2; font-size: 1rem; line-height: 1.65; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cta-perks { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 24px 0 0; padding: 18px 0 0; border-top: 1px solid #a432c02b; list-style: none; color: #d8cadd; font-size: 12px; }
.cta-perks li { display: flex; align-items: center; gap: 6px; }
.cta-perks .icon { width: 14px; height: 14px; color: #c38ad8; }

/* A three-step deploy preview, styled like the panel preview above. */
.cta-art { position: relative; display: flex; justify-content: flex-end; }
.cta-window { width: 100%; max-width: 400px; border: 1px solid #785386; border-radius: 10px; background: #131215; box-shadow: -12px -12px 45px #7609910c, 0 20px 50px #00000040; transform: rotate(2deg); transition: transform .3s ease; }
.cta-window-top { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-bottom: 1px solid #302a35; color: #c8b9d0; font-size: 11px; }
.cta-window-top img { width: 18px; height: 18px; }
.cta-window .demo-running { margin-left: auto; display: flex; align-items: center; gap: 6px; color: #e0b9ed; font: 9px ui-monospace, monospace; letter-spacing: .5px; }
.cta-steps { margin: 0; padding: 16px 16px 6px; list-style: none; counter-reset: none; }
.cta-steps li { position: relative; display: flex; align-items: flex-start; gap: 12px; padding-bottom: 16px; }
.cta-steps li:not(:last-child)::after { content: ''; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 1px; background: linear-gradient(#8a5d9b, #8a5d9b40); }
.cta-step-mark { display: grid; place-items: center; width: 27px; height: 27px; flex-shrink: 0; border: 1px solid #514259; border-radius: 7px; background: #1b1720; color: #b388bf; }
.cta-step-mark .icon { width: 14px; height: 14px; }
.cta-steps .is-active .cta-step-mark { border-color: #9861ac; background: #281c30; color: #e0b9ed; box-shadow: 0 0 14px #a432c030; }
.cta-steps b { display: block; color: #e8deed; font: 500 13px/1.3 'Work Sans', sans-serif; }
.cta-steps small { display: block; margin-top: 3px; color: #8f8197; font: 10px ui-monospace, monospace; }
.cta-progress { height: 2px; margin: 0 16px 16px; border-radius: 2px; background: #2b2333; overflow: hidden; }
.cta-progress i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #ab60bf, #d690ea); transform: scaleX(.66); transform-origin: left center; will-change: transform; animation: cta-progress 3.2s ease-in-out infinite alternate; }
@keyframes cta-progress { from { transform: scaleX(.66); } to { transform: scaleX(1); } }

/* Small lifts on hover, mirroring the Why Daki cards. */
.users-pin, .orders-art, .years-art, .discord-art { transition: transform .3s ease; }
@media (min-width: 768px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .metric-users:hover .users-pin { transform: translate(-50%, calc(-50% - 3px)); }
    .metric-orders:hover .orders-art, .metric-years:hover .years-art, .metric-discord:hover .discord-art { transform: translateY(-2px); }
    .cta-card:hover .cta-window { transform: rotate(2deg) translateY(-3px); }
}

@media (max-width: 1199px) {
    .metric-card { padding: 22px; }
    .metric-label { font-size: 14px; }
    .metric-number { font-size: 48px; letter-spacing: -2.5px; }
    .metric-users .metric-number { font-size: 66px; letter-spacing: -4px; }
    .metric-text { font-size: 13px; }
    .orders-art, .years-art, .metric-card .card-bottom-link { left: 22px; right: 22px; }
    .orders-art { bottom: 22px; }
    .orders-art img { width: 34px; height: 24px; }
    .cta-card { padding: 44px 40px; gap: 32px; }
}

/* Tablet: two columns, users and Discord keep the full width. */
@media (max-width: 991px) {
    .stats-section { padding: 64px 0 48px; }
    .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: 'users users' 'orders years' 'discord discord'; grid-auto-rows: auto; }
    .metric-card { min-height: 220px; padding: 24px; }
    .orders-art, .years-art, .metric-card .card-bottom-link { left: 24px; right: 24px; }
    .metric-orders { min-height: 250px; }
    .cta-card { grid-template-columns: minmax(0, 1fr); padding: 40px 32px; }
    .cta-art { justify-content: flex-start; }
    .cta-window { max-width: 460px; transform: rotate(1deg); }
}

/* Mobile: one column, previews flow below the text. */
@media (max-width: 767.98px) {
    .stats-section { padding: 48px 0 36px; }
    .stats-section .row.mb-5 { margin-bottom: 1.75rem !important; }
    .metric-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'users' 'orders' 'years' 'discord'; gap: 14px; }
    .metric-card { min-height: 0; padding: 23px; }
    .metric-number { font-size: 46px; margin: 16px 0 8px; }
    .metric-users .metric-number { font-size: 58px; letter-spacing: -3.5px; }
    .metric-text, .metric-discord .metric-text { max-width: none; }
    .users-art { width: 52%; opacity: .7; }
    .users-pin { top: 22px; left: auto; right: 22px; transform: none; }
    .orders-art, .years-art { position: relative; left: auto; right: auto; bottom: auto; margin-top: 22px; }
    .years-art { margin-bottom: 4px; }
    .discord-art { position: relative; top: auto; right: auto; width: auto; margin: 22px 0 46px; }
    .metric-card .card-bottom-link { left: 23px; right: 23px; }
    .cta-section { padding-bottom: 16px; }
    .cta-card { padding: 32px 22px; gap: 30px; }
    .cta-text { margin-bottom: 24px; }
    .cta-actions .btn-hero-primary, .cta-actions .btn-hero-outline { flex: 1 1 auto; justify-content: center; }
    .cta-window { transform: none; }
}
@media (max-width: 359px) {
    .metric-users .metric-number { font-size: 50px; }
    .metric-number { font-size: 40px; }
    .users-pin { display: none; }
}
/* Off screen: freeze the loops (home.js toggles the class). */
.stats-section.is-offscreen *, .stats-section.is-offscreen *::before, .stats-section.is-offscreen *::after,
.cta-section.is-offscreen *, .cta-section.is-offscreen *::before, .cta-section.is-offscreen *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
    .stats-section *, .stats-section *::before, .stats-section *::after,
    .cta-section *, .cta-section *::before, .cta-section *::after { animation: none !important; transition: none !important; }
}