:root {
    --bg-primary: #fafafa;
    --bg-subtle: #f0f0f2;
    --text-primary: #1a1a1b;
    --text-muted: #666677;
    --text-subtle: #999aaa;
    --accent-gradient: linear-gradient(135deg, #e8b4c8 0%, #b8e4d0 50%, #a8d4e8 100%);
}

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

html, body {
    height: 100%;
}

body {
    font-family: 'Outfit', -apple-system, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Subtle background effect */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(90, 157, 237, 0.14) 0%, transparent 50%),
        radial-gradient(ellipse 50% 40% at 85% 20%, rgba(255, 233, 77, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 60%, rgba(232, 160, 180, 0.10) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 15% 70%, rgba(167, 226, 118, 0.10) 0%, transparent 50%),
        radial-gradient(ellipse 50% 40% at 40% 90%, rgba(83, 211, 224, 0.08) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* Layout */
main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    position: relative;
    z-index: 1;
}

/* Logo */
.logo-container {
    position: relative;
    opacity: 0;
    transform: translateY(12px);
    animation: fadeUp 0.4s ease-out 0.1s forwards;
}

.logo {
    width: min(500px, 80vw);
    height: auto;
    filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.08));
    transition: filter 0.4s ease;
}

.logo:hover {
    filter: drop-shadow(0 8px 32px rgba(0, 0, 0, 0.12));
}

/* =============================================
   HOLOGRAPHIC STICKERS - Capra-style
   ============================================= */

.sticker {
    --space: 8%;
    --pointer-x: 50%;
    --pointer-y: 50%;
    --pointer-from-left: 0.5;
    --pointer-from-top: 0.5;
    --rx: 0deg;
    --ry: 0deg;
    position: absolute;
    display: grid;
    grid-template-areas: "s";
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    perspective: 600px;
    border: 3px solid rgba(255, 255, 255, 0.55);
    background-color: hsl(220, 10%, 86%);
    transition: transform 0.15s ease, box-shadow 0.3s ease;
    transform-style: preserve-3d;
    box-shadow:
        0 1px 0 0 rgba(0, 0, 0, 0.15),
        0 4px 12px rgba(0, 0, 0, 0.15),
        0 8px 24px rgba(0, 0, 0, 0.08),
        /* Inner bevel - bright top edge, dark bottom edge */
        inset 0 2px 1px rgba(255, 255, 255, 0.4),
        inset 0 -2px 1px rgba(0, 0, 0, 0.08),
        inset 2px 0 1px rgba(255, 255, 255, 0.15),
        inset -2px 0 1px rgba(0, 0, 0, 0.04);
    z-index: 100;
    opacity: 0;
}

/* All grid children stack in same cell */
.sticker > * {
    grid-area: s;
}

/* Shine layer - noise + rainbow gradient + radial spotlight, color-dodge blend */
.sticker__shine {
    position: relative;
    width: 100%;
    height: 100%;
    pointer-events: none;

    background-image:
        url("noise.png"),
        repeating-linear-gradient(
            82deg,
            hsl(163, 81%, 48%) calc(var(--space) * 1),
            hsl(215, 21%, 46%) calc(var(--space) * 2),
            hsl(39, 53%, 63%) calc(var(--space) * 3),
            hsl(238, 68%, 60%) calc(var(--space) * 4),
            hsl(39, 63%, 47%) calc(var(--space) * 5),
            hsl(154, 71%, 48%) calc(var(--space) * 6),
            hsl(15, 72%, 58%) calc(var(--space) * 7),
            hsl(57, 83%, 46%) calc(var(--space) * 8),
            hsl(108, 76%, 48%) calc(var(--space) * 9),
            hsl(228, 21%, 39%) calc(var(--space) * 10),
            hsl(238, 68%, 58%) calc(var(--space) * 11),
            hsl(187, 91%, 40%) calc(var(--space) * 12)
        ),
        /* Second rainbow layer - offset angle for depth/refraction */
        repeating-linear-gradient(
            -35deg,
            hsla(326, 59%, 51%, 0.4) calc(var(--space) * 1),
            hsla(283, 60%, 55%, 0.4) calc(var(--space) * 2),
            hsla(228, 59%, 55%, 0.4) calc(var(--space) * 3),
            hsla(176, 54%, 49%, 0.4) calc(var(--space) * 4),
            hsla(93, 56%, 50%, 0.4) calc(var(--space) * 5),
            hsla(53, 65%, 60%, 0.4) calc(var(--space) * 6),
            hsla(326, 59%, 51%, 0.4) calc(var(--space) * 7)
        ),
        radial-gradient(
            farthest-corner circle at var(--pointer-x) var(--pointer-y),
            hsla(180, 100%, 89%, 0.5) 5%,
            hsla(180, 14%, 57%, 0.3) 40%,
            hsl(0, 0%, 13%) 130%
        );

    background-blend-mode: color-burn, soft-light, multiply;
    mix-blend-mode: color-dodge;

    background-position:
        center center,
        calc(10% + (var(--pointer-from-left) * 80%)) calc(10% + (var(--pointer-from-top) * 80%)),
        calc(90% - (var(--pointer-from-left) * 80%)) calc(90% - (var(--pointer-from-top) * 80%)),
        center center;

    background-size: cover, 600% 700%, 400% 500%, cover;
    filter: brightness(0.5) contrast(1.1) saturate(1.2);
    opacity: 0.85;
    animation: idleShimmer 4s ease-in-out infinite;
    transition: opacity 0.4s ease, filter 0.3s ease;
    z-index: 2;
}

.sticker:hover .sticker__shine {
    opacity: 1;
    filter: brightness(0.6) contrast(1.05) saturate(1.5);
    animation: none;
}

/* Idle shimmer - wider sweep with more color variation */
@keyframes idleShimmer {
    0% {
        background-position:
            center center,
            calc(10% + (0.1 * 80%)) calc(10% + (0.15 * 80%)),
            calc(90% - (0.1 * 80%)) calc(90% - (0.15 * 80%)),
            center center;
        filter: brightness(0.45) contrast(1.15) saturate(1);
    }
    33% {
        background-position:
            center center,
            calc(10% + (0.85 * 80%)) calc(10% + (0.35 * 80%)),
            calc(90% - (0.85 * 80%)) calc(90% - (0.35 * 80%)),
            center center;
        filter: brightness(0.55) contrast(1.05) saturate(1.4);
    }
    66% {
        background-position:
            center center,
            calc(10% + (0.45 * 80%)) calc(10% + (0.9 * 80%)),
            calc(90% - (0.45 * 80%)) calc(90% - (0.9 * 80%)),
            center center;
        filter: brightness(0.48) contrast(1.1) saturate(1.15);
    }
    100% {
        background-position:
            center center,
            calc(10% + (0.1 * 80%)) calc(10% + (0.15 * 80%)),
            calc(90% - (0.1 * 80%)) calc(90% - (0.15 * 80%)),
            center center;
        filter: brightness(0.45) contrast(1.15) saturate(1);
    }
}

/* Glare layer - radial spotlight following cursor */
.sticker__glare {
    position: relative;
    width: 100%;
    height: 100%;
    pointer-events: none;

    background-image: radial-gradient(
        farthest-corner circle at var(--pointer-x) var(--pointer-y),
        hsla(0, 0%, 89%, 0.8) 5%,
        rgb(33, 32, 32) 150%
    );
    filter: brightness(0.75) contrast(2) saturate(1.5);
    mix-blend-mode: overlay;
    opacity: 0.6;
    transition: opacity 0.4s ease;
    z-index: 3;
}

.sticker:hover .sticker__glare {
    opacity: 0.9;
}

/* Plastic gloss layer - specular highlight like real laminated sticker */
.sticker__gloss {
    position: relative;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background:
        /* Tight specular hotspot - follows cursor */
        radial-gradient(
            ellipse 35% 25% at var(--pointer-x) var(--pointer-y),
            rgba(255, 255, 255, 0.7) 0%,
            rgba(255, 255, 255, 0.2) 30%,
            transparent 60%
        ),
        /* Broader soft glow around hotspot */
        radial-gradient(
            ellipse 70% 50% at var(--pointer-x) var(--pointer-y),
            rgba(255, 255, 255, 0.15) 0%,
            transparent 60%
        ),
        /* Fixed ambient reflection - top-left window light */
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.25) 0%,
            rgba(255, 255, 255, 0.05) 30%,
            transparent 55%
        ),
        /* Top edge catch light */
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.18) 0%,
            transparent 20%
        );
    opacity: 0.5;
    transition: opacity 0.3s ease;
    z-index: 3;
    animation: idleGloss 4s ease-in-out infinite;
}

.sticker:hover .sticker__gloss {
    opacity: 1;
    animation: none;
}

/* Gloss shifts subtly at idle to simulate ambient light */
@keyframes idleGloss {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.65; }
}

/* Content layer (text, icons, logos) */
.sticker__content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    height: 100%;
    z-index: 4;
    pointer-events: none;
    padding-bottom: 25px;
}

/* Sticker - Free Multisig Audit (round) */
.sticker-right {
    border-radius: 50%;
    top: -140px;
    right: -280px;
    width: 190px;
    height: 190px;
    transform: rotate(12deg) rotateY(var(--ry)) rotateX(var(--rx));
    animation: stickerRightIn 0.5s ease-out 0.3s forwards;
    transition: transform 0.15s ease, box-shadow 0.3s ease;
}

.sticker-right .sticker__shine,
.sticker-right .sticker__glare {
    border-radius: 50%;
}

.sticker-right:hover {
    box-shadow:
        0 2px 0 0 rgba(0, 0, 0, 0.1),
        0 12px 32px rgba(0, 0, 0, 0.22),
        0 0 24px rgba(160, 200, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

@keyframes stickerRightIn {
    0% { opacity: 0; transform: rotate(12deg) scale(0.5); }
    60% { opacity: 1; transform: rotate(12deg) scale(1.08); }
    100% { opacity: 1; transform: rotate(12deg) scale(1); }
}


/* Sticker content elements */
.sticker-text {
    font-family: 'Outfit', -apple-system, sans-serif;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: rgba(0, 0, 0, 0.75);
    text-align: center;
    line-height: 1;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.sticker-text-lg {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
}

.sticker:hover .sticker-text {
    color: rgba(0, 0, 0, 0.9);
}

.sticker-text-sm {
    font-size: 0.5rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    opacity: 0.65;
    margin-top: 1px;
}

.sticker-ombrello-logo {
    width: 32px;
    height: 32px;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.sticker:hover .sticker-ombrello-logo {
    opacity: 0.9;
}

/* Mobile sticker - hidden on desktop */
.sticker-right--mobile {
    display: none;
}

/* Slogan */
.slogan {
    margin-top: 1.25rem;
    font-size: clamp(1rem, 3vw, 1.25rem);
    font-weight: 300;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    opacity: 0;
    transform: translateY(12px);
    animation: fadeUp 0.4s ease-out 0.2s forwards;
}

/* CTA Button */
.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 2rem;
    padding: 0.75rem 2rem;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--text-subtle);
    text-decoration: none;
    font-family: 'Outfit', -apple-system, sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    border-radius: 50px;
    cursor: pointer;
    transition: color 0.3s ease, border-color 0.3s ease;
    opacity: 0;
    transform: translateY(12px);
    animation: fadeUp 0.4s ease-out 0.25s forwards;
}

.cta-button:hover {
    color: var(--text-primary);
    border-color: var(--text-primary);
}

.cta-button svg {
    width: 18px;
    height: 18px;
}

/* Social Links */
.links {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-top: 2rem;
    opacity: 0;
    transform: translateY(12px);
    animation: fadeUp 0.4s ease-out 0.3s forwards;
}

.link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    transition: color 0.3s ease;
    width: 140px;
    padding: 0 1rem;
}

.link + .link {
    border-left: 1px solid var(--text-subtle);
}

.link:hover {
    color: var(--text-primary);
}

.link svg {
    width: 18px;
    height: 18px;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.link:hover svg {
    opacity: 1;
}

/* Footer */
footer {
    padding: 2rem;
    text-align: center;
    color: var(--text-subtle);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    position: relative;
    z-index: 1;
    opacity: 0;
    animation: fadeIn 0.4s ease-out 0.4s forwards;
}


/* Animations */
@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}


/* Mobile */
@media (max-width: 480px) {
    main {
        padding: 1.5rem;
    }

    .slogan {
        margin-top: 1.5rem;
        letter-spacing: 0.15em;
    }

    .cta-button {
        margin-top: 2rem;
        padding: 0.7rem 1.75rem;
        font-size: 0.9rem;
    }

    .links {
        flex-direction: column;
        gap: 0.75rem;
        margin-top: 2rem;
        width: 100%;
        max-width: 280px;
    }

    .link {
        padding: 0.875rem 1.25rem;
        background: rgba(0, 0, 0, 0.02);
        border-radius: 8px;
        width: 100%;
        justify-content: center;
        border: none;
    }

    .link + .link {
        border: none;
    }

    .link:active {
        background: rgba(0, 0, 0, 0.05);
    }

    footer {
        padding: 1.5rem;
    }

    /* Hide desktop sticker, show mobile one */
    .logo-container .sticker-right {
        display: none;
    }

    .sticker-right--mobile {
        display: grid !important;
        position: relative;
        top: auto;
        right: auto;
        width: 130px;
        height: 130px;
        transform: rotate(6deg);
        animation: none;
        opacity: 1;
        margin-top: 1.25rem;
        margin-bottom: 0.25rem;
    }

    .sticker-right--mobile .sticker-text-lg {
        font-size: 0.6rem;
    }

    .sticker-right--mobile .sticker-text-sm {
        font-size: 0.4rem;
    }

    .sticker-right--mobile .sticker-ombrello-logo {
        width: 24px;
        height: 24px;
    }

    .sticker-partner-logo {
        width: 22px;
        height: 22px;
    }
}

/* Tablet */
@media (max-width: 768px) and (min-width: 481px) {
    .link {
        padding: 0.5rem 0.75rem;
        -webkit-tap-highlight-color: transparent;
    }

    .sticker-right:not(.sticker-right--mobile) {
        width: 160px;
        height: 160px;
        right: -200px;
        top: -140px;
    }
}