/* =====================================================================
   Pro AF — Demo tiles (bento grid)
   6 tiles, each with a unique self-contained animation.

   Perf notes:
   - All animations use transform/opacity only (compositor-only)
   - Animations are paused via [data-paused] (set by IntersectionObserver
     in app.js when the section is offscreen)
   - prefers-reduced-motion stops all animations
   - No JS per tile — pure CSS keyframes
   ===================================================================== */

/* ---------- Section + grid shell ---------- */
#demo-tiles {
    padding: 6vh 1.25rem;
    min-height: auto;
}
.tiles-intro {
    max-width: 880px;
    margin: 0 auto 3rem;
    text-align: center;
}
.tiles-eyebrow {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.5em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 0.75rem;
    display: block;
}
.tiles-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: #ffffff;
}
html[data-theme="refresh"] .tiles-title { color: #0F172A; }
.tiles-sub {
    margin-top: 0.75rem;
    color: #94a3b8;
    font-size: 0.95rem;
}
html[data-theme="refresh"] .tiles-sub { color: #64748B; }

.bento-grid {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(220px, auto);
    gap: 18px;
}

/* Tile sizing (desktop) */
.tile-ai      { grid-column: span 7; grid-row: span 2; min-height: 420px; }
.tile-code    { grid-column: span 5; grid-row: span 2; min-height: 420px; }
.tile-morph   { grid-column: span 5; min-height: 320px; }
.tile-portal  { grid-column: span 7; min-height: 320px; }
.tile-magnet  { grid-column: span 5; min-height: 300px; }
.tile-cost    { grid-column: span 7; min-height: 300px; }

@media (max-width: 900px) {
    .bento-grid { grid-template-columns: 1fr; }
    .tile-ai, .tile-code, .tile-morph, .tile-portal, .tile-magnet, .tile-cost {
        grid-column: span 1;
        grid-row: auto;
        min-height: 280px;
    }
}

/* ---------- Tile base ---------- */
.tile {
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 18px;
    overflow: hidden;
    background: rgba(15, 15, 25, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.3s ease;
    will-change: transform;
    transform: translateZ(0);
    cursor: pointer;
    isolation: isolate;
    opacity: 0;
    transform: translateY(20px);
}
.tile.in-view {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.4s ease, border-color 0.3s ease;
}
.tile:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 255, 255, 0.35);
    box-shadow: 0 18px 50px rgba(0, 255, 255, 0.15), 0 4px 14px rgba(0, 0, 0, 0.35);
}

/* Refresh theme tile styling */
html[data-theme="refresh"] .tile {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
html[data-theme="refresh"] .tile:hover {
    border-color: rgba(59, 130, 246, 0.45);
    box-shadow: 0 18px 50px rgba(59, 130, 246, 0.18), 0 4px 14px rgba(15, 23, 42, 0.08);
}

/* Tile chrome: footer with label + cta */
.tile-footer {
    position: absolute;
    inset: auto 0 0 0;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
    z-index: 4;
}
html[data-theme="refresh"] .tile-footer {
    background: linear-gradient(to top, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
}
.tile-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    pointer-events: none;
}
.tile-label .name {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -0.01em;
    color: #ffffff;
}
.tile-label .desc {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.04em;
}
html[data-theme="refresh"] .tile-label .name { color: #0F172A; }
html[data-theme="refresh"] .tile-label .desc { color: rgba(15, 23, 42, 0.55); }

.tile-cta {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #00ffff;
    border: 1px solid rgba(0, 255, 255, 0.4);
    padding: 6px 12px;
    border-radius: 50px;
    background: rgba(0, 0, 0, 0.35);
    pointer-events: none;
    white-space: nowrap;
}
html[data-theme="refresh"] .tile-cta {
    color: #3B82F6;
    border: 1px solid rgba(59, 130, 246, 0.4);
    background: rgba(255, 255, 255, 0.85);
}

.tile-stage {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 1;
}

/* ---------- Pause control (offscreen) ---------- */
#demo-tiles[data-paused="true"] .tile * {
    animation-play-state: paused !important;
}
@media (prefers-reduced-motion: reduce) {
    .tile, .tile *, .tile *::before, .tile *::after {
        animation: none !important;
        transition: opacity 0.2s ease !important;
    }
    .tile { opacity: 1; transform: none; }
}

/* =====================================================================
   TILE 1 — AI Chat Assistant (flagship, large)
   ===================================================================== */
.tile-ai .tile-stage {
    background:
        radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.25), transparent 60%),
        radial-gradient(circle at 80% 80%, rgba(236, 72, 153, 0.22), transparent 55%),
        linear-gradient(135deg, #0b1224, #1a0f24);
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}
html[data-theme="refresh"] .tile-ai .tile-stage {
    background:
        radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.15), transparent 60%),
        radial-gradient(circle at 80% 80%, rgba(236, 72, 153, 0.12), transparent 55%),
        linear-gradient(135deg, #fafbff, #fff5fa);
}
.ai-window {
    width: min(420px, 88%);
    background: rgba(8, 10, 20, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 14px 14px 60px 14px;
    color: #e2e8f0;
    backdrop-filter: blur(10px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    position: relative;
}
html[data-theme="refresh"] .ai-window {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.1);
    color: #0F172A;
    box-shadow: 0 12px 40px rgba(59, 130, 246, 0.12);
}
.ai-window-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 12px;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}
html[data-theme="refresh"] .ai-window-header { border-bottom-color: rgba(15, 23, 42, 0.08); color: rgba(15, 23, 42, 0.45); }
.ai-window-header .ai-dot {
    width: 7px; height: 7px; border-radius: 50%; background: #22c55e;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.7);
}
.ai-bubble {
    display: inline-block;
    max-width: 85%;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 0.85rem;
    line-height: 1.4;
    margin-bottom: 8px;
    opacity: 0;
    transform: translateY(8px);
    animation: ai-bubble-in 14s ease-in-out infinite;
}
.ai-bubble.user {
    background: rgba(59, 130, 246, 0.22);
    border: 1px solid rgba(59, 130, 246, 0.4);
    color: #c7d8ff;
    margin-left: auto;
    display: block;
    text-align: left;
}
.ai-bubble.bot {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
}
html[data-theme="refresh"] .ai-bubble.user {
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #1e3a8a;
}
html[data-theme="refresh"] .ai-bubble.bot {
    background: #f1f5f9;
    border: 1px solid rgba(15, 23, 42, 0.06);
    color: #1e293b;
}
.ai-bubble:nth-child(1) { animation-delay: 0.4s; }
.ai-bubble:nth-child(2) { animation-delay: 2.4s; }
.ai-bubble:nth-child(3) { animation-delay: 5.6s; }
.ai-bubble:nth-child(4) { animation-delay: 8.4s; }
.ai-bubble:nth-child(5) { animation-delay: 11.2s; }

.ai-typing {
    display: inline-flex;
    gap: 4px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    opacity: 0;
    animation: ai-typing-show 14s ease-in-out infinite;
}
html[data-theme="refresh"] .ai-typing { background: #f1f5f9; border-color: rgba(15, 23, 42, 0.06); }
.ai-typing span {
    width: 6px; height: 6px; border-radius: 50%; background: #94a3b8;
    animation: ai-typing-dot 1.2s ease-in-out infinite;
}
.ai-typing span:nth-child(2) { animation-delay: 0.15s; }
.ai-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes ai-bubble-in {
    0%, 100% { opacity: 0; transform: translateY(8px); }
    8%, 92% { opacity: 1; transform: translateY(0); }
}
@keyframes ai-typing-show {
    0%, 10%, 90%, 100% { opacity: 0; }
    13%, 87% { opacity: 1; }
}
@keyframes ai-typing-dot {
    0%, 60%, 100% { transform: scale(1); opacity: 0.5; }
    30% { transform: scale(1.3); opacity: 1; }
}

/* =====================================================================
   TILE 2 — Code → Render theatre (small, top-right)
   ===================================================================== */
.tile-code .tile-stage {
    background:
        radial-gradient(circle at 30% 0%, rgba(163, 230, 53, 0.15), transparent 50%),
        linear-gradient(160deg, #0a0f1e, #15121f);
    display: flex;
    flex-direction: column;
    padding: 16px;
    gap: 12px;
}
html[data-theme="refresh"] .tile-code .tile-stage {
    background:
        radial-gradient(circle at 30% 0%, rgba(163, 230, 53, 0.12), transparent 50%),
        linear-gradient(160deg, #f6fff0, #fbfbff);
}
.code-window {
    flex: 1;
    background: #0d0d18;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 12px;
    font-family: 'JetBrains Mono', 'Space Grotesk', ui-monospace, monospace;
    font-size: 0.72rem;
    color: #cbd5e1;
    overflow: hidden;
    position: relative;
}
html[data-theme="refresh"] .code-window {
    background: #1e293b;
    color: #cbd5e1;
}
.code-window::before {
    content: '';
    position: absolute;
    top: 8px; left: 12px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #ff5f56;
    box-shadow: 14px 0 0 #ffbd2e, 28px 0 0 #27c93f;
}
.code-line {
    display: block;
    margin-top: 12px;
    white-space: nowrap;
    overflow: hidden;
    width: 0;
    animation: code-typing 12s steps(40) infinite;
}
.code-line:nth-child(1) { animation-delay: 1s; color: #c084fc; }
.code-line:nth-child(2) { animation-delay: 2.5s; color: #67e8f9; }
.code-line:nth-child(3) { animation-delay: 4s; color: #fda4af; }
.code-line:nth-child(4) { animation-delay: 5.5s; color: #86efac; }
@keyframes code-typing {
    0%, 4% { width: 0; }
    10%, 78% { width: 100%; }
    85%, 100% { width: 100%; opacity: 0.4; }
}

.render-window {
    height: 38%;
    background: #ffffff;
    border-radius: 10px;
    padding: 10px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0F172A;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.render-build {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 6px;
}
.render-build > div {
    border-radius: 4px;
    opacity: 0;
    animation: render-pop 12s ease-out infinite;
}
.render-build .rb-head { height: 12px; background: linear-gradient(90deg, #3B82F6, #EC4899); animation-delay: 1.8s; }
.render-build .rb-row { height: 6px; background: #e2e8f0; animation-delay: 3.3s; }
.render-build .rb-block {
    background: linear-gradient(135deg, #f1f5f9, #e0e7ff);
    border: 1px dashed #cbd5e1;
    animation-delay: 4.8s;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.6rem; color: #64748b; letter-spacing: 0.1em; text-transform: uppercase;
}
@keyframes render-pop {
    0%, 14% { opacity: 0; transform: scale(0.96); }
    20%, 78% { opacity: 1; transform: scale(1); }
    85%, 100% { opacity: 0.6; }
}

/* =====================================================================
   TILE 3 — Morphing Browser (small, mid-left)
   ===================================================================== */
.tile-morph .tile-stage {
    background: linear-gradient(160deg, #16162a, #0e1a2a);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
html[data-theme="refresh"] .tile-morph .tile-stage {
    background: linear-gradient(160deg, #f8fafc, #eef2ff);
}
.browser-frame {
    width: 90%;
    max-width: 340px;
    height: 78%;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    position: relative;
}
html[data-theme="refresh"] .browser-frame {
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15);
}
.browser-bar {
    height: 24px;
    background: #e5e7eb;
    display: flex; align-items: center; gap: 4px;
    padding: 0 10px;
}
.browser-bar i {
    width: 7px; height: 7px; border-radius: 50%; background: #fbbf24;
    display: inline-block;
}
.browser-bar i:nth-child(1) { background: #ef4444; }
.browser-bar i:nth-child(3) { background: #22c55e; }
.browser-bar .browser-url {
    flex: 1; margin-left: 8px;
    background: #ffffff; border-radius: 4px;
    height: 14px; font-size: 0.55rem; color: #64748b;
    display: flex; align-items: center; padding: 0 6px;
    font-family: ui-monospace, monospace;
}
.browser-body {
    position: relative;
    width: 100%;
    height: calc(100% - 24px);
    overflow: hidden;
}
.morph-frame {
    position: absolute;
    inset: 0;
    opacity: 0;
    animation: morph-cycle 16s ease-in-out infinite;
}
.morph-frame:nth-child(1) { animation-delay: 0s; }
.morph-frame:nth-child(2) { animation-delay: 4s; }
.morph-frame:nth-child(3) { animation-delay: 8s; }
.morph-frame:nth-child(4) { animation-delay: 12s; }
@keyframes morph-cycle {
    0%, 24% { opacity: 1; }
    27%, 100% { opacity: 0; }
}
/* mockup 1: restaurant */
.morph-1 {
    background: linear-gradient(180deg, #fef3c7 0%, #fed7aa 60%);
    display: flex; flex-direction: column; align-items: center; padding: 12px;
}
.morph-1::before {
    content: 'ROSIE\'S'; font-family: 'Brush Script MT', cursive;
    font-size: 1.5rem; color: #b91c1c; line-height: 1;
}
.morph-1::after {
    content: '· Burgers · Pancakes · Coffee ·';
    font-size: 0.55rem; color: #78350f; letter-spacing: 0.1em; margin-top: 8px;
}
/* mockup 2: dashboard */
.morph-2 {
    background: #0f172a;
    display: grid; grid-template-columns: 30% 1fr; gap: 4px; padding: 6px;
}
.morph-2::before {
    content: ''; background: #1e293b; border-radius: 4px;
}
.morph-2::after {
    content: ''; background: linear-gradient(135deg, #06b6d4, #3b82f6);
    border-radius: 4px; opacity: 0.8;
}
/* mockup 3: booking */
.morph-3 {
    background: linear-gradient(180deg, #ecfeff, #cffafe);
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 6px; padding: 12px;
}
.morph-3::before {
    content: 'BOOK NOW'; font-size: 0.7rem; font-weight: 800; color: #0e7490;
    letter-spacing: 0.3em;
}
.morph-3::after {
    content: ''; width: 60%; height: 6px; background: #06b6d4; border-radius: 4px;
    box-shadow: 0 8px 0 #cffafe, 0 16px 0 #06b6d4;
}
/* mockup 4: portfolio */
.morph-4 {
    background: #0a0a0a;
    display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 4px;
}
.morph-4::before, .morph-4::after {
    content: ''; background: linear-gradient(135deg, #f472b6, #c084fc);
    border-radius: 2px;
}
.morph-4::after { background: linear-gradient(135deg, #67e8f9, #34d399); }

/* =====================================================================
   TILE 4 — Live Portal (flagship, large)
   ===================================================================== */
.tile-portal .tile-stage {
    background:
        radial-gradient(circle at 90% 10%, rgba(139, 92, 246, 0.22), transparent 55%),
        linear-gradient(135deg, #0f1729, #14111f);
    padding: 18px;
}
html[data-theme="refresh"] .tile-portal .tile-stage {
    background:
        radial-gradient(circle at 90% 10%, rgba(139, 92, 246, 0.12), transparent 55%),
        linear-gradient(135deg, #f8fafc, #faf5ff);
}
.portal-frame {
    width: 100%; height: 100%;
    display: grid;
    grid-template-columns: 24% 1fr;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    overflow: hidden;
}
html[data-theme="refresh"] .portal-frame {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
}
.portal-side {
    padding: 14px 8px;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    display: flex; flex-direction: column; gap: 4px;
    font-size: 0.72rem;
}
html[data-theme="refresh"] .portal-side { border-right-color: rgba(15, 23, 42, 0.06); }
.portal-side .ps-logo {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700; font-size: 0.85rem;
    margin-bottom: 10px; color: #ffffff; letter-spacing: -0.02em;
}
html[data-theme="refresh"] .portal-side .ps-logo { color: #0F172A; }
.portal-side .ps-item {
    padding: 6px 10px; border-radius: 6px; color: rgba(255, 255, 255, 0.55);
    position: relative;
    animation: portal-cycle-item 8s steps(1) infinite;
}
html[data-theme="refresh"] .portal-side .ps-item { color: rgba(15, 23, 42, 0.55); }
.portal-side .ps-item:nth-child(2) { animation-delay: 0s; }
.portal-side .ps-item:nth-child(3) { animation-delay: 2s; }
.portal-side .ps-item:nth-child(4) { animation-delay: 4s; }
.portal-side .ps-item:nth-child(5) { animation-delay: 6s; }
@keyframes portal-cycle-item {
    0%, 25% {
        background: linear-gradient(90deg, rgba(139, 92, 246, 0.25), transparent);
        color: #ffffff;
    }
    25.01%, 100% {
        background: transparent;
    }
}
html[data-theme="refresh"] .portal-side .ps-item {
    /* light-mode cycle */
}

.portal-main {
    padding: 14px;
    overflow: hidden;
    position: relative;
}
.portal-rows {
    display: flex; flex-direction: column; gap: 6px;
    animation: portal-scroll 12s linear infinite;
}
@keyframes portal-scroll {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}
.portal-row {
    display: grid;
    grid-template-columns: 1fr 70px 50px;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.85);
    align-items: center;
}
html[data-theme="refresh"] .portal-row {
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.06);
    color: #1e293b;
}
.portal-row .pr-amount { text-align: right; color: #22c55e; font-weight: 600; }
.portal-row .pr-badge {
    text-align: center; font-size: 0.55rem; padding: 2px 6px;
    border-radius: 50px; background: rgba(34, 197, 94, 0.18); color: #4ade80;
    letter-spacing: 0.1em; text-transform: uppercase;
}
.portal-row.unpaid .pr-amount { color: #f59e0b; }
.portal-row.unpaid .pr-badge { background: rgba(245, 158, 11, 0.18); color: #fbbf24; }
html[data-theme="refresh"] .portal-row .pr-amount { color: #16a34a; }
html[data-theme="refresh"] .portal-row.unpaid .pr-amount { color: #d97706; }
html[data-theme="refresh"] .portal-row .pr-badge { background: rgba(22, 163, 74, 0.15); color: #15803d; }
html[data-theme="refresh"] .portal-row.unpaid .pr-badge { background: rgba(217, 119, 6, 0.15); color: #b45309; }

/* =====================================================================
   TILE 5 — Magnet field (small, bottom-left)
   ===================================================================== */
.tile-magnet .tile-stage {
    background: linear-gradient(135deg, #0a0f1e, #1a0f24);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
html[data-theme="refresh"] .tile-magnet .tile-stage {
    background: linear-gradient(135deg, #fefefc, #f0f7ff);
}
.magnet-dot {
    position: absolute;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00ffff, #ec4899);
    box-shadow: 0 0 12px rgba(0, 255, 255, 0.5);
    animation: magnet-drift 18s ease-in-out infinite;
    will-change: transform;
}
html[data-theme="refresh"] .magnet-dot {
    background: linear-gradient(135deg, #3B82F6, #EC4899);
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.45);
}
@keyframes magnet-drift {
    0%   { transform: translate(0, 0) scale(1); }
    25%  { transform: translate(40px, -30px) scale(1.15); }
    50%  { transform: translate(-20px, -50px) scale(0.85); }
    75%  { transform: translate(-50px, 20px) scale(1.05); }
    100% { transform: translate(0, 0) scale(1); }
}
.magnet-dot:nth-child(1)  { top: 20%; left: 18%; animation-delay: 0s; }
.magnet-dot:nth-child(2)  { top: 60%; left: 25%; animation-delay: -3s; }
.magnet-dot:nth-child(3)  { top: 30%; left: 55%; animation-delay: -6s; }
.magnet-dot:nth-child(4)  { top: 70%; left: 60%; animation-delay: -9s; }
.magnet-dot:nth-child(5)  { top: 25%; left: 80%; animation-delay: -12s; }
.magnet-dot:nth-child(6)  { top: 55%; left: 78%; animation-delay: -15s; }
.magnet-dot:nth-child(7)  { top: 40%; left: 35%; animation-delay: -2s; width: 8px; height: 8px; }
.magnet-dot:nth-child(8)  { top: 75%; left: 40%; animation-delay: -7s; width: 6px; height: 6px; }
.magnet-dot:nth-child(9)  { top: 15%; left: 65%; animation-delay: -11s; width: 8px; height: 8px; }
.magnet-dot:nth-child(10) { top: 50%; left: 88%; animation-delay: -14s; width: 6px; height: 6px; }
.magnet-dot:nth-child(11) { top: 35%; left: 8%;  animation-delay: -4s; width: 8px; height: 8px; }
.magnet-dot:nth-child(12) { top: 80%; left: 15%; animation-delay: -10s; width: 6px; height: 6px; }

.magnet-headline {
    position: relative;
    z-index: 2;
    text-align: center;
    pointer-events: none;
}
.magnet-headline .mh-big {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    color: #ffffff;
    line-height: 1;
}
.magnet-headline .mh-small {
    display: block;
    font-size: 0.65rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 8px;
}
html[data-theme="refresh"] .magnet-headline .mh-big { color: #0F172A; }
html[data-theme="refresh"] .magnet-headline .mh-small { color: rgba(15, 23, 42, 0.5); }

/* =====================================================================
   TILE 6 — The Handover (wide, bottom-right)
   "10 reasons" preview with shimmering icon row
   ===================================================================== */
.tile-cost .tile-stage {
    background:
        radial-gradient(circle at 30% 30%, rgba(0, 255, 255, 0.18), transparent 60%),
        radial-gradient(circle at 70% 70%, rgba(163, 230, 53, 0.14), transparent 60%),
        linear-gradient(135deg, #0e1322, #131d22);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 28px;
    text-align: center;
}
html[data-theme="refresh"] .tile-cost .tile-stage {
    background:
        radial-gradient(circle at 30% 30%, rgba(59, 130, 246, 0.10), transparent 60%),
        radial-gradient(circle at 70% 70%, rgba(163, 230, 53, 0.12), transparent 60%),
        linear-gradient(135deg, #fafbff, #f6fff0);
}

.handover-num {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2.4rem, 6vw, 3.6rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
    background: linear-gradient(135deg, #00ffff, #ff00ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
html[data-theme="refresh"] .handover-num {
    background: linear-gradient(135deg, #3B82F6, #EC4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.handover-headline {
    margin-top: 6px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(0.95rem, 1.8vw, 1.15rem);
    color: #ffffff;
    letter-spacing: -0.01em;
    line-height: 1.2;
    max-width: 340px;
}
html[data-theme="refresh"] .handover-headline { color: #0F172A; }
.handover-sub {
    margin-top: 6px;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}
html[data-theme="refresh"] .handover-sub { color: rgba(15, 23, 42, 0.55); }

.handover-icons {
    margin-top: 18px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 360px;
}
.handover-icon-slot {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
    opacity: 0.5;
    animation: handover-shimmer 8s linear infinite;
}
html[data-theme="refresh"] .handover-icon-slot {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(15, 23, 42, 0.06);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
/* Stagger the shimmer so each icon lights up in sequence (wave effect) */
.handover-icon-slot:nth-child(1)  { animation-delay: 0s; }
.handover-icon-slot:nth-child(2)  { animation-delay: 0.6s; }
.handover-icon-slot:nth-child(3)  { animation-delay: 1.2s; }
.handover-icon-slot:nth-child(4)  { animation-delay: 1.8s; }
.handover-icon-slot:nth-child(5)  { animation-delay: 2.4s; }
.handover-icon-slot:nth-child(6)  { animation-delay: 3.0s; }
.handover-icon-slot:nth-child(7)  { animation-delay: 3.6s; }
.handover-icon-slot:nth-child(8)  { animation-delay: 4.2s; }
.handover-icon-slot:nth-child(9)  { animation-delay: 4.8s; }
.handover-icon-slot:nth-child(10) { animation-delay: 5.4s; }

@keyframes handover-shimmer {
    0%, 15%, 100% {
        opacity: 0.45;
        transform: scale(1);
        box-shadow: 0 0 0 rgba(0, 255, 255, 0);
    }
    5% {
        opacity: 1;
        transform: scale(1.18);
        box-shadow: 0 0 14px rgba(0, 255, 255, 0.55);
    }
}
html[data-theme="refresh"] .handover-icon-slot {
    animation-name: handover-shimmer-refresh;
}
@keyframes handover-shimmer-refresh {
    0%, 15%, 100% {
        opacity: 0.6;
        transform: scale(1);
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    }
    5% {
        opacity: 1;
        transform: scale(1.18);
        box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35);
    }
}