/* ==========================================================================
   Nexus Rewards Group — shared foundation
   Tokens, reset and components used by every page (landing, auth, dashboard)
   ========================================================================== */

:root {
    --green-900: #0a3d27;
    --green-800: #0f5c3a;
    --green-700: #137049;
    --green-100: #e3f2e9;
    --green-50:  #f1f8f3;
    --amber-500: #f2a516;
    --amber-100: #fdf0d3;
    --cream:     #fffaf1;
    --paper:     #fbfaf7;
    --ink:       #141714;
    --muted:     #5f665f;
    --line:      #e6e4de;
    --white:     #ffffff;
    --wa:        #1fa855;
    --danger:    #c62828;

    --radius:    18px;
    --radius-sm: 12px;
    --shadow:    0 1px 2px rgba(10, 61, 39, .06), 0 12px 32px -12px rgba(10, 61, 39, .18);
    --shadow-lg: 0 2px 4px rgba(10, 61, 39, .06), 0 30px 60px -20px rgba(10, 61, 39, .28);

    --ease-out:    cubic-bezier(.22, 1, .36, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

    --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
    background: var(--cream);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: var(--green-800); }
h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.02em; }
p { margin: 0 0 1em; }

.container { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 20px; }

/* Brand
   ========================================================================== */
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); }
.brand-mark { color: var(--green-800); transition: transform .4s var(--ease-spring); }
.brand:hover .brand-mark { transform: rotate(-10deg) scale(1.08); }
.brand-name { font-weight: 800; font-size: 1.1rem; letter-spacing: -.02em; }

/* Buttons
   ========================================================================== */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .7rem 1.2rem;
    border: 2px solid transparent;
    border-radius: 999px;
    font: inherit;
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition: transform .2s var(--ease-out), background-color .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn:focus-visible { outline: 3px solid var(--amber-500); outline-offset: 2px; }
.btn-sm { padding: .5rem 1rem; font-size: .9rem; }
.btn-lg { padding: .95rem 1.6rem; font-size: 1rem; }
.btn-block { width: 100%; }

.btn-primary { background: var(--green-800); color: var(--white); box-shadow: 0 8px 20px -8px rgba(15, 92, 58, .6); }
.btn-primary:hover { background: var(--green-900); box-shadow: 0 14px 28px -10px rgba(15, 92, 58, .7); }
.btn-ghost { background: transparent; color: var(--green-800); border-color: var(--green-800); }
.btn-ghost:hover { background: var(--green-50); }
.btn-whatsapp { background: var(--wa); color: var(--white); }
.btn-whatsapp:hover { background: #178d46; box-shadow: 0 14px 28px -10px rgba(31, 168, 85, .6); }
.btn-light { background: rgba(255, 255, 255, .1); color: var(--white); border-color: rgba(255, 255, 255, .25); }
.btn-light:hover { background: rgba(255, 255, 255, .18); }
.btn-amber { background: var(--amber-500); color: var(--green-900); }
.btn-amber:hover { background: #ffb829; }
.btn-outline-light { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, .45); }
.btn-outline-light:hover { background: rgba(255, 255, 255, .1); border-color: var(--white); }

/* Light sweep across a button */
.btn-shine::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
    transform: translateX(-120%);
    animation: shine 4.5s ease-in-out infinite;
}
.btn-shine:hover::after { animation-duration: 1.2s; }
@keyframes shine {
    0%, 70% { transform: translateX(-120%); }
    100%    { transform: translateX(120%); }
}

/* Floating-label fields
   ========================================================================== */
.field { position: relative; margin-bottom: 16px; }
.field input,
.field textarea {
    width: 100%;
    padding: 1.4rem 1rem .5rem;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    background: var(--white);
    font: inherit;
    font-size: 1rem;
    color: var(--ink);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.field textarea { resize: vertical; min-height: 96px; }
.field label {
    position: absolute;
    left: 1rem; top: 1rem;
    color: var(--muted);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.2;
    pointer-events: none;
    transform-origin: 0 0;
    transition: transform .2s var(--ease-out), color .2s ease;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label { transform: translateY(-.6rem) scale(.78); color: var(--green-800); }
.field input:focus,
.field textarea:focus { outline: none; border-color: var(--green-700); box-shadow: 0 0 0 4px rgba(19, 112, 73, .12); }
.field .invalid,
.field .invalid:focus { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(198, 40, 40, .12); animation: shake .4s ease; }
.field .invalid + label,
.field .invalid:focus + label { color: var(--danger); }
@keyframes shake {
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

/* Small Nexus Coin icon
   ========================================================================== */
.mini-coin {
    display: inline-block;
    width: 1.1em; height: 1.1em;
    border-radius: 50%;
    background: url("../img/nexus-coin-sm.webp") center / contain no-repeat;
    vertical-align: -.18em;
}

/* Effects shared by member pages
   ========================================================================== */
.confetti { position: fixed; z-index: 200; width: 9px; height: 14px; border-radius: 2px; pointer-events: none; }
.confetti.mini-coin { width: 1.1em; height: 1.1em; border-radius: 50%; }

/* Pointer-following glow on dark panels */
.spotlight { isolation: isolate; }
.spotlight::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(420px circle at var(--mx, 80%) var(--my, 0%), rgba(242, 165, 22, .28), transparent 60%);
    pointer-events: none;
}

@keyframes pop-in {
    from { opacity: 0; transform: scale(.6) translateY(10px); }
    to   { opacity: 1; transform: none; }
}
@keyframes float-coin {
    0%, 100% { transform: translateY(0) rotate(-8deg); }
    50%      { transform: translateY(-16px) rotate(10deg); }
}

/* Respect users who turn motion off */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        transition-delay: 0ms !important;
    }
}