:root{
    --bg: #f6f8ff;
    --card: rgba(255,255,255,.72);
    --stroke: rgba(15,23,42,.10);
    --ink: #0f172a;
    --muted: rgba(15,23,42,.65);

    --cyan: #22d3ee;
    --blue: #3b82f6;
    --violet:#a855f7;
}

/*body{*/
/*    margin:0;*/
/*    min-height:100vh;*/
/*    display:grid;*/
/*    place-items:center;*/
/*    background:*/
/*            radial-gradient(900px 520px at 20% 20%, rgba(34,211,238,.22), transparent 60%),*/
/*            radial-gradient(900px 520px at 85% 75%, rgba(168,85,247,.16), transparent 62%),*/
/*            radial-gradient(1100px 650px at 50% 110%, rgba(59,130,246,.16), transparent 60%),*/
/*            var(--bg);*/
/*    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;*/
/*    color: var(--ink);*/
/*}*/

.ai-btn{
    position:relative;
    border:0;
    background: transparent;
    padding:0;
    cursor:pointer;
    outline:none;
    -webkit-tap-highlight-color: transparent;
}

.ai-btn__frame{
    position:relative;
    display:flex;
    align-items:center;
    gap:.6rem;
    padding: 10px;
    border-radius:999px;
    user-select:none;
    overflow:hidden;
    transform: translateZ(0);
    /*background: var(--card);*/
    border: 1px solid var(--stroke);
    box-shadow:
            0 18px 45px rgba(15,23,42,.12),
            inset 0 1px 0 rgba(255,255,255,.55);
    backdrop-filter: blur(12px);
}

/* luminous animated ring (light) */
.ai-btn__frame::before{
    content:"";
    position:absolute;
    inset:-3px;
    border-radius:999px;
    background:
            conic-gradient(
                    from 0deg,
                    rgba(34,211,238,0) 0%,
                    rgba(34,211,238,.85) 12%,
                    rgba(168,85,247,.70) 28%,
                    rgba(59,130,246,.85) 50%,
                    rgba(34,211,238,.85) 72%,
                    rgba(34,211,238,0) 100%
            );
    filter: blur(12px);
    opacity:.65;
    animation: spin 2.7s linear infinite;
    z-index:0;
}

/* inner fill */
.ai-btn__frame::after{
    content:"";
    position:absolute;
    inset:1px;
    border-radius:999px;
    background:
            radial-gradient(120% 140% at 15% 20%, rgba(34,211,238,.14), transparent 55%),
            radial-gradient(120% 140% at 85% 80%, rgba(168,85,247,.10), transparent 55%),
            linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.58));
    z-index:1;
}

/* subtle moving sheen */
.ai-btn__sheen{
    position:absolute;
    inset:-40% -60%;
    background:
            linear-gradient(120deg,
            transparent 0%,
            rgba(255,255,255,.45) 18%,
            rgba(255,255,255,.12) 30%,
            transparent 45%);
    transform: translateX(-35%) rotate(10deg);
    animation: sheen 2.9s ease-in-out infinite;
    z-index:2;
    pointer-events:none;
    mix-blend-mode: overlay;
}

.ai-btn__content{
    position:relative;
    z-index:3;
    display:flex;
    align-items:center;
    gap:.65rem;
}

.ai-btn__text{
    text-align:right;
    line-height:1.1;
    display:flex;
    flex-direction:column;
    gap:.18rem;
}

.ai-btn__title{
    font-size: 12px;
    color: #5d596c;
}

/* orbiting sparkles */
.spark{
    position:absolute;
    width:6px;height:6px;
    border-radius:50%;
    z-index:4;
    opacity:.92;
    pointer-events:none;
    background: rgba(34,211,238,.95);
    box-shadow: 0 0 16px rgba(34,211,238,.45);
}
.spark.s1{ animation: orbit1 1.9s linear infinite; }
.spark.s2{ animation: orbit2 2.3s linear infinite; background: rgba(168,85,247,.9); box-shadow:0 0 16px rgba(168,85,247,.35); }
.spark.s3{ animation: orbit3 2.7s linear infinite; background: rgba(59,130,246,.9); box-shadow:0 0 16px rgba(59,130,246,.35); }

/* hover/press */
.ai-btn:hover .ai-btn__frame{ transform: translateY(-1px); box-shadow: 0 20px 55px rgba(15,23,42,.14), inset 0 1px 0 rgba(255,255,255,.6); }
.ai-btn:active .ai-btn__frame{ transform: translateY(0) scale(.985); }

/* click pulse */
.pulse{
    position:absolute;
    inset: -46px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(34,211,238,.22), transparent 58%);
    z-index:2;
    opacity:0;
    transform: scale(.86);
    pointer-events:none;
}
.ai-btn.is-pulsing .pulse{
    animation: pulse .55s ease-out 1;
}

/* particles */
.p{
    position:absolute;
    width:6px;height:6px;
    border-radius:50%;
    pointer-events:none;
    z-index:5;
    opacity:1;
    transform: translate(-50%,-50%);
    filter: blur(.1px);
}

@keyframes spin{ to{ transform: rotate(360deg); } }
@keyframes sheen{
    0%{ transform: translateX(-40%) rotate(10deg); opacity:0; }
    30%{ opacity:.65; }
    70%{ opacity:.18; }
    100%{ transform: translateX(40%) rotate(10deg); opacity:0; }
}
@keyframes pulse{
    0%{ opacity:0; transform: scale(.86); }
    18%{ opacity:1; }
    100%{ opacity:0; transform: scale(1.18); }
}
@keyframes orbit1{
    0%{ transform: translate(10px, -20px); opacity:.9; }
    50%{ transform: translate(130px, 10px); opacity:.55; }
    100%{ transform: translate(10px, -20px); opacity:.9; }
}
@keyframes orbit2{
    0%{ transform: translate(160px, -6px); opacity:.85; }
    50%{ transform: translate(35px, 22px); opacity:.5; }
    100%{ transform: translate(160px, -6px); opacity:.85; }
}
@keyframes orbit3{
    0%{ transform: translate(70px, 26px); opacity:.8; }
    50%{ transform: translate(190px, -18px); opacity:.45; }
    100%{ transform: translate(70px, 26px); opacity:.8; }
}

@media (prefers-reduced-motion: reduce){
    .ai-btn__frame::before, .ai-btn__sheen, .spark{ animation:none !important; }
}

.h-100vh{
    height: 100vh;
}