@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,700;0,800;1,800&display=swap');

@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@property --gl {
    syntax: '<number>';
    initial-value: 0.35;
    inherits: false;
}

:root {
    --bg: #05060a;
    --text: #f5f7fb;
    --muted: rgba(245, 247, 251, 0.58);
    --line: rgba(255, 255, 255, 0.09);
    --green: #34d399;
    --led: linear-gradient(90deg, #ff6b6b, #ffd166, #34d399, #38bdf8, #a78bfa, #ff6b6b);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: 2.5rem 1.25rem calc(2.5rem + env(safe-area-inset-bottom));
    background: var(--bg);
    color: var(--text);
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }

#bg {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.aurora {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.orb {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(var(--oc), .30), rgba(var(--oc), .19) 30%, rgba(var(--oc), .07) 62%, rgba(var(--oc), 0));
    will-change: transform;
}
.o1 { --oc: 52, 211, 153; width: 660px; height: 660px; top: -250px; left: -230px; animation: drift1 18s ease-in-out infinite alternate; }
.o2 { --oc: 139, 92, 246; width: 600px; height: 600px; top: 28%; margin-top: -100px; right: -260px; animation: drift2 22s ease-in-out infinite alternate; }
.o3 { --oc: 56, 189, 248; width: 690px; height: 690px; bottom: -315px; left: 12%; margin-left: -115px; animation: drift3 20s ease-in-out infinite alternate; }

@keyframes drift1 { to { transform: translate(90px, 70px) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-80px, 60px) scale(.9); } }
@keyframes drift3 { to { transform: translate(60px, -80px) scale(1.1); } }

.grid-overlay {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 15%, transparent 72%);
            mask-image: radial-gradient(ellipse at center, #000 15%, transparent 72%);
}

.cursor-glow {
    position: fixed;
    top: 0; left: 0;
    width: 520px; height: 520px;
    margin: -260px 0 0 -260px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(circle, rgba(255, 255, 255, .07), transparent 62%);
    transform: translate3d(-999px, -999px, 0);
    will-change: transform;
}
@media (hover: none) { .cursor-glow { display: none; } }

.wrap {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 440px;
    text-align: center;
}

.led-text {
    display: inline-block;
    background: var(--led);
    background-size: 300% auto;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: led 5s linear infinite;
}
.led-line {
    background: var(--led);
    background-size: 300% 100%;
    animation: led 4s linear infinite;
}
@keyframes led { to { background-position: 300% 50%; } }

.hero { margin-bottom: 1.9rem; }

.monogram {
    width: 68px; height: 68px;
    margin: 0 auto 1.5rem;
    display: grid;
    place-items: center;
    border-radius: 22px;
    font-size: 1.5rem;
    font-weight: 800;
    font-style: italic;
    letter-spacing: -.04em;
    background: radial-gradient(120% 120% at 30% 12%, rgba(255,255,255,.38), rgba(255,255,255,.06) 50%, rgba(255,255,255,.03));
    border: 1px solid rgba(255, 255, 255, .22);
    box-shadow: inset 0 1px 1px rgba(255,255,255,.6), inset 0 -8px 14px -8px rgba(255,255,255,.18), 0 0 0 6px rgba(255,255,255,.03), 0 0 40px -4px rgba(52, 211, 153, .6), 0 20px 50px -14px rgba(56, 189, 248, .45);
    -webkit-backdrop-filter: blur(16px);
            backdrop-filter: blur(16px);
    animation: float 5s ease-in-out infinite;
}
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

.brand {
    margin: 0;
    font-size: clamp(2.7rem, 12vw, 3.5rem);
    line-height: .98;
    font-weight: 800;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: -.045em;
    text-shadow: 0 0 30px rgba(255, 255, 255, .28), 0 0 70px rgba(52, 211, 153, .28);
    user-select: none;
}
.brand .line { display: block; }
.brand .second { margin-left: .55em; }

.led-line {
    width: 120px; height: 3px;
    margin: 1.3rem auto 1rem;
    border-radius: 999px;
    box-shadow: 0 0 22px rgba(56, 189, 248, .7), 0 0 44px rgba(167, 139, 250, .45), 0 0 70px rgba(52, 211, 153, .25);
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin: 0;
    padding: .38rem .9rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--muted);
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--line);
}
.dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 0 rgba(52, 211, 153, .6);
    animation: pulse 2s infinite;
}
@keyframes pulse {
    70%  { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

.socials {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.8rem;
}
.social {
    position: relative;
    overflow: hidden;
    width: 54px; height: 54px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 1.25rem;
    color: var(--text);
    background: radial-gradient(120% 120% at 30% 12%, rgba(255,255,255,.3), rgba(255,255,255,.06) 48%, rgba(255,255,255,.03));
    border: 1px solid rgba(255, 255, 255, .2);
    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.55),
        inset 0 -8px 14px -8px rgba(255,255,255,.16),
        0 10px 24px -10px rgba(0,0,0,.7),
        0 0 22px -6px var(--c);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), color .3s, border-color .3s, box-shadow .35s;
}
.social i { position: relative; z-index: 1; filter: drop-shadow(0 0 8px var(--c)); }
.social::after {
    content: "";
    position: absolute;
    top: 4%; left: 14%;
    width: 72%; height: 42%;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,0));
    pointer-events: none;
}
.social:hover, .social:focus-visible {
    transform: translateY(-5px) scale(1.08);
    color: var(--c);
    border-color: var(--c);
    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.6),
        inset 0 -8px 14px -8px rgba(255,255,255,.2),
        0 14px 30px -10px rgba(0,0,0,.7),
        0 0 36px -2px var(--c);
    outline: none;
}
.social:active { transform: translateY(-2px) scale(1.18); }

.links { display: grid; gap: 1rem; }

.card:nth-child(1) { --glow: 52, 211, 153; }
.card:nth-child(2) { --glow: 56, 189, 248; }
.card:nth-child(3) { --glow: 167, 139, 250; }

.card {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem 1rem 1rem;
    border-radius: 36px;
    text-align: left;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255,255,255,.17) 0%, rgba(255,255,255,.05) 42%, rgba(255,255,255,.02) 100%),
        linear-gradient(135deg, rgba(var(--glow), .18), transparent 65%);
    border: 1px solid rgba(255, 255, 255, .17);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.5),
        inset 0 -16px 26px -20px rgba(255,255,255,.3),
        0 14px 32px -14px rgba(0,0,0,.8),
        0 0 30px -8px rgba(var(--glow), var(--gl));
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    --gl: .45;
    transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), border-color .3s, box-shadow .4s, filter .3s;
}

.card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0;
    transition: opacity .3s;
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .15), transparent 60%);
}
.card::after {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    pointer-events: none;
    background: conic-gradient(from var(--angle), #ff6b6b, #ffd166, #34d399, #38bdf8, #a78bfa, #ff6b6b);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    opacity: 0;
    transition: opacity .4s;
}
@keyframes spin { to { --angle: 360deg; } }

.shine {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
}
.shine::after {
    content: "";
    position: absolute;
    top: 3px; left: 14px; right: 14px;
    height: 46%;
    border-radius: 32px 32px 60% 60% / 32px 32px 40% 40%;
    background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0));
}
.shine::before {
    content: "";
    position: absolute;
    top: -20%; bottom: -20%; left: 0;
    width: 36%;
    background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.3) 50%, transparent 100%);
    transform: translateX(-170%) skewX(-22deg);
    animation: sweep 6s ease-in-out infinite;
}
.card:nth-child(2) .shine::before { animation-delay: 1.3s; }
.card:nth-child(3) .shine::before { animation-delay: 2.6s; }
.card:hover .shine::before { animation-duration: 2.4s; }

@keyframes sweep {
    0%        { transform: translateX(-170%) skewX(-22deg); }
    38%, 100% { transform: translateX(440%) skewX(-22deg); }
}

.card.reveal.active:hover,
.card.reveal.active:focus-visible {
    transform: translateY(-4px) scale(1.02);
    border-color: rgba(255, 255, 255, .3);
    --gl: .8;
    animation: none;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.6),
        inset 0 -16px 26px -20px rgba(255,255,255,.35),
        0 24px 50px -18px rgba(0,0,0,.9),
        0 0 50px -4px rgba(var(--glow), .75);
    outline: none;
}
.card:hover::before, .card:focus-visible::before { opacity: 1; }
.card:hover::after,  .card:focus-visible::after  { opacity: .95; animation: spin 4s linear infinite; }

.card.reveal.active:active {
    transform: scale(1.06);
    filter: brightness(1.15);
    --gl: 1;
    animation: none;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.7),
        inset 0 -16px 26px -20px rgba(255,255,255,.4),
        0 18px 40px -16px rgba(0,0,0,.9),
        0 0 70px 0 rgba(var(--glow), .9);
}

.card.featured { border-color: rgba(52, 211, 153, .4); }

.icon {
    flex: none;
    width: 52px; height: 52px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 1.2rem;
    color: var(--ic);
    text-shadow: 0 0 14px var(--ic);
    background: radial-gradient(circle at 30% 16%, rgba(255,255,255,.42), transparent 55%), var(--tint);
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: inset 0 1px 1px rgba(255,255,255,.5), 0 0 22px -4px var(--ic);
    transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
.card:hover .icon { transform: scale(1.1) rotate(-6deg); }

.text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .18rem; }
.title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .98rem;
    font-weight: 700;
    letter-spacing: -.01em;
    text-shadow: 0 0 18px rgba(255, 255, 255, .2);
}
.sub {
    font-size: .76rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.badge {
    font-style: normal;
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .2rem .5rem;
    border-radius: 999px;
    color: #052e1f;
    background: linear-gradient(180deg, #6ee7b7, #34d399);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 0 14px rgba(52, 211, 153, .8);
    text-shadow: none;
}

.arrow {
    flex: none;
    width: 34px; height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: .8rem;
    color: var(--muted);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
    transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), color .3s, background .3s, box-shadow .3s;
}
.card:hover .arrow {
    transform: translateX(3px);
    color: #05060a;
    background: #fff;
    box-shadow: 0 0 18px rgba(255, 255, 255, .6);
}

.ripple {
    position: absolute;
    z-index: 3;
    width: 30px; height: 30px;
    margin: -15px 0 0 -15px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.55), rgba(255,255,255,0) 70%);
    transform: scale(0);
    pointer-events: none;
    animation: ripple .75s ease-out forwards;
}
@keyframes ripple { to { transform: scale(16); opacity: 0; } }

.foot {
    margin-top: 2.6rem;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .3em;
    text-transform: uppercase;
}

.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .9s cubic-bezier(.23, 1, .32, 1), transform .9s cubic-bezier(.23, 1, .32, 1);
}
.reveal.active { opacity: 1; transform: none; }

.card.reveal.active {
    transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), border-color .3s, box-shadow .4s, opacity .9s, filter .3s;
}

@media (max-width: 380px) {
    .title { font-size: .92rem; }
    .icon { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition-duration: .01ms !important;
    }
    .reveal { opacity: 1; transform: none; }
}