/* =============================================
   COMPONENTS.CSS
   All section styles live here.
   Written mobile first — base styles are mobile,
   responsive.css adds tablet and desktop on top.
============================================= */


/* =============================================
   NAV
============================================= */

.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px var(--pad-mobile);
    border-bottom: 1px solid transparent;
    transition: var(--transition);
}

/* Nav gets this class via JS when user scrolls past 40px */
.nav.scrolled {
    background: rgba(10, 10, 15, 0.88);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    padding: 16px var(--pad-mobile);
    border-bottom-color: var(--border);
}

.nav__logo {
    font-family: var(--display);
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: linear-gradient(90deg, var(--w) 40%, var(--purple-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Hidden on mobile — shown on desktop via responsive.css */
.nav__links {
    display: none;
}

/* Hidden on mobile — shown on desktop via responsive.css */
.nav__cta {
    display: none;
}

/* Burger — visible on mobile only */
.nav__burger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 4px;
}

.nav__burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--w);
    border-radius: 2px;
    transition: var(--transition);
}


/* =============================================
   MOBILE NAV OVERLAY
============================================= */

/*.nav__overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 110;
    background: rgba(10, 10, 15, 0.97);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
}*/

/* JS adds this class to show the overlay */
/*.nav__overlay.open {
    display: flex;
}*/

.nav__overlay {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 110;
    background: rgba(10, 10, 15, 0.97);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    
    /* Start off screen to the left */
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    
    /* Remove display none — we use transform instead */
}

.nav__overlay.open {
    transform: translateX(0);
}

.nav__overlay-link {
    font-family: var(--display);
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--w80);
    transition: var(--transition);
}

.nav__overlay-link:hover {
    color: var(--purple-light);
}

.nav__overlay-close {
    z-index:111;
    position: absolute;
    top: 24px;
    right: 28px;
    color: var(--w50);
    font-size: 1.6rem;
}

.hide-nav{
    display:none;
}






/* =============================================
   HERO
============================================= */

.hero {
    position: relative;
    min-height: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    padding: 96px var(--pad-mobile);
    /*border:2px solid gold;*/
}

.stars__canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}



/* Dot grid background */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.055) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 0%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 0%, transparent 100%);
    pointer-events: none;
}

/* ── Ambient Orbs ── */
.hero__orb {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    will-change: transform;
}

.hero__orb--a {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(124,58,237,0.16) 0%, transparent 65%);
    top: -200px;
    right: -150px;
    animation: floatA 9s ease-in-out infinite;
}

.hero__orb--b {
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(6,182,212,0.12) 0%, transparent 65%);
    bottom: -80px;
    left: -80px;
    animation: floatB 11s ease-in-out infinite;
}

.hero__orb--c {
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(124,58,237,0.10) 0%, transparent 70%);
    top: 50%;
    left: 8%;
    animation: floatA 7s ease-in-out infinite reverse;
}

@keyframes floatA {
    0%, 100% { transform: translateY(0) scale(1); }
    50%       { transform: translateY(-28px) scale(1.04); }
}

@keyframes floatB {
    0%, 100% { transform: translateY(0) scale(1); }
    50%       { transform: translateY(22px) scale(1.03); }
}

/* ── Hero Content ── */
.hero__inner {
    position: relative;
    display:flex;
    flex-direction:column;

    align-items: center;

    z-index: 1;
    max-width: 960px;
    width: 100%;
    height:100%;
    /*border:2px solid white;*/
    gap:2rem;
    padding:1rem 0;

}

/* Small pill above the name */
.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width:auto;
    gap: 10px;
    padding: 8px;
    width:18rem;
    border-radius: var(--radius-full);
    background: var(--w03);
    border: 1px solid var(--border);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--w50);
    /*margin-bottom: 36px;*/
}

/* Blinking dot inside eyebrow pill */
.hero__eyebrow::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 8px var(--cyan);
    animation: blink 2.2s ease infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}

/* Big name */
.hero__name {
    font-family: var(--display);
    font-size:clamp(2.7rem, 10vw, 8rem);
    font-weight: 800;
    line-height: 0.88;
    letter-spacing: -0.025em;
    color: var(--w);
    text-shadow: 0 0 100px rgba(124,58,237,0.25);
    /*margin-bottom: 28px;*/
}

/* Cycling roles container */
.hero__roles {
    height: 48px;
    position: relative;
    overflow: visible;
    width:100%;

    /*margin-bottom: 32px;*/
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Each role cycles in and out */
.hero__role {
    position: absolute;
    
    font-family: var(--display);
    font-size: clamp(16px, 2.8vw, 30px);
    font-weight: 600;
    background: linear-gradient(90deg, var(--purple-light), var(--cyan-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0;
    transform: translateY(28px);
    animation: roleIn 12.5s infinite;
    will-change: transform, opacity;
}

/* Each role starts at a different time */
.hero__role:nth-child(1) { animation-delay: 0s; }
.hero__role:nth-child(2) { animation-delay: 2.5s; }
.hero__role:nth-child(3) { animation-delay: 5s; }
.hero__role:nth-child(4) { animation-delay: 7.5s; }
.hero__role:nth-child(5) { animation-delay: 10s; }

@keyframes roleIn {
    0%,  100% { opacity: 0; transform: translateY(28px); }
    4%         { opacity: 1; transform: translateY(0); }
    16%        { opacity: 1; transform: translateY(0); }
    20%        { opacity: 0; transform: translateY(-28px); }
}

/* Tagline under roles */
.hero__tagline {
    font-size: clamp(14px, 1.7vw, 18px);
    font-weight: 300;
    color: var(--w50);
    line-height: 1.75;
    max-width: 540px;
    /*margin: 0 auto 52px;*/
}

/* CTA buttons row */
.hero__ctas {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-direction: column;
    /*flex-wrap: wrap;*/
}

/* ── Buttons ── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 34px;
    border-radius: var(--radius-full);
    font-family: var(--body);
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    transition: var(--transition-elastic);
    cursor: pointer;
    border: none;
}

.btn--fill {
    background: var(--purple);
    color: var(--w);
}

.btn--fill:hover {
    background: var(--purple-light);
    box-shadow: 0 10px 36px rgba(124,58,237,0.5);
    transform: translateY(-3px);
}

.btn--ghost {
    background: transparent;
    color: var(--w80);
    border: 1px solid var(--border);
}

.btn--ghost:hover {
    border-color: var(--w20);
    color: var(--w);
    transform: translateY(-3px);
}

/* Scroll indicator at bottom of hero */
.hero__scroll {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--w20);
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    z-index: 1;
    animation: scrollPulse 2.2s ease-in-out infinite;
}

/* Line under scroll text */
.hero__scroll::after {
    content: '';
    width: 1px;
    height: 36px;
    background: linear-gradient(to bottom, var(--w20), transparent);
}

@keyframes scrollPulse {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%       { transform: translateX(-50%) translateY(7px); }
}



/* =============================================
   STATS BAR
============================================= */

.stats-wrap {
    padding: 48px var(--pad-mobile);
    /*margin-bottom: 80px;*/
}

/* Four stat boxes in a grid */
/* Mobile: 1 column, expands in responsive.css */
.stats-grid {
    display: grid;
    grid-template-columns: 1fr;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--w03);
}

.stat {
    padding: 40px 32px;
    border-bottom: 1px solid var(--border);
    transition: var(--transition);
}

/* Last stat has no bottom border */
.stat:last-child {
    border-bottom: none;
}

.stat:hover {
    background: var(--w06);
}

/* Big number */
.stat__num {
    font-family: var(--display);
    font-size: clamp(50px, 7vw, 80px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    margin-bottom: 10px;
}

/* Alternate colors between stats */
.stat:nth-child(odd)  .stat__num { color: var(--purple-light); }
.stat:nth-child(even) .stat__num { color: var(--cyan-light); }

/* Label under number */
.stat__label {
    font-size: 0.85rem;
    color: var(--w50);
    font-weight: 400;
    letter-spacing: 0.02em;
}


/* =============================================
   REUSABLE ELEMENTS
   Small pieces used across multiple sections
============================================= */

/* Section tag — small label above headings */
.tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--purple-light);
    margin-bottom: 18px;
}

/* Line before tag text */
.tag::before {
    content: '';
    width: 22px;
    height: 1px;
    background: var(--purple);
}

/* Big section heading */
.heading {
    font-family: var(--display);
    font-size: clamp(36px, 5.2vw, 66px);
    font-weight: 800;
    line-height: 1.03;
    letter-spacing: -0.025em;
    /*margin-bottom: 24px;*/
}

/* Subtext under headings */
.subtext {
    font-size: clamp(14px, 1.5vw, 17px);
    font-weight: 300;
    color: var(--w50);
    line-height: 1.8;
    max-width: 520px;
}


/* =============================================
   ABOUT
============================================= */

.about__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
}

/* ── Photo Column ── */
.about__photo-outer {
    position: relative;
}

/* Gradient glow border behind photo */
.about__photo-glow {
    position: absolute;
    inset: -3px;
    border-radius: 27px;
    background: linear-gradient(135deg, var(--purple), var(--cyan));
    opacity: 0.35;
    z-index: -1;
}

/* Photo card */
.about__photo {
    width: 100%;
    
    aspect-ratio: 4/5.1;
    border-radius: var(--radius-lg);
    background: var(--bg-2);
    border: 1px solid var(--border);
    overflow: hidden;
    position: relative;
    display:flex;
    flex-direction: column;
    padding:0.5rem;
    gap:0.5rem;
}

/* Melissa's actual photo */
.about__photo-img {
    width: 100%;
    height: 100%;
    border-radius:var(--radius-lg);
    object-fit: cover;
    object-position: center top;
}

/* Placeholder shown if photo fails */
.about__photo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    font-size: 0.8rem;
    color: var(--w20);
    letter-spacing: 0.06em;
    background: linear-gradient(160deg, var(--bg-2) 0%, #1a1030 100%);
}

.about__photo-placeholder-icon {
    font-size: 2.5rem;
}

/* Dark overlay at bottom so badges are readable */
.about__photo-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10,10,15,0.65) 0%, transparent 55%);
    pointer-events: none;
}

/* Badges sit over the bottom of the photo */
.about__badge-strip {
    /*position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;*/
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.badge {
    display: flex;
    justify-content: center;
    align-items:center;
    text-align: center;
    padding: 8px 14px;
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.badge--purple {
    background: rgba(124,58,237,0.25);
    border: 1px solid rgba(124,58,237,0.4);
    color: var(--purple-light);
}

.badge--cyan {
    background: rgba(6,182,212,0.15);
    border: 1px solid rgba(6,182,212,0.3);
    color: var(--cyan-light);
}

/* ── Text Column ── */
.about__text {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.about__heading {
    margin-bottom: 4px;
}

.about__bio {
    font-size: clamp(14px, 1.45vw, 17px);
    color: var(--w80);
    line-height: 1.85;
    font-weight: 400;
}

/* Niche tags row */
.about__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 8px;
}

.tag-pill {
    padding: 6px 16px;
    border-radius: var(--radius-full);
    background: var(--w03);
    border: 1px solid var(--border);
    font-size: 0.78rem;
    color: var(--w50);
    font-weight: 500;
    letter-spacing: 0.04em;
    transition: var(--transition);
}

.tag-pill:hover {
    border-color: var(--w20);
    color: var(--w80);
}




/* =============================================
   PROOF OF WORK
============================================= */

.pow__head {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 28px;
}

/* Cards grid — mobile: 1 column */
/* Expands to 3 columns in responsive.css */
.pow__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-cards);
}

/* ── Base Card ── */
.pow__card {
    background: var(--w03);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--pad-card);
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    overflow: hidden;
    transition: var(--transition-elastic);
}

/*ADDED MY OWN STUFF*/
.pow__card-link-icon {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--w06);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: var(--w20);
    transition: var(--transition);
}

.pow__card:hover .pow__card-link-icon {
    background: var(--purple-dim);
    border-color: var(--purple);
    color: var(--purple-light);
}

    /*ADDED MY OWN STUFF*/



/* Subtle glow that appears on hover */
/* Hidden by default, shown on hover */
.pow__card::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
    border-radius: var(--radius-md);
}

/* Purple card glow */
.pow__card--p::before {
    background: radial-gradient(circle at 0% 0%, rgba(124,58,237,0.1), transparent 55%);
}

/* Cyan card glow */
.pow__card--c::before {
    background: radial-gradient(circle at 0% 0%, rgba(6,182,212,0.09), transparent 55%);
}

/* Ecosystem card glow */
.pow__card--eco::before {
    background: radial-gradient(circle at 0% 0%, rgba(124,58,237,0.1), transparent 55%);
}

/* Hover states */
.pow__card:hover {
    transform: translateY(-7px);
    border-color: var(--w20);
}

.pow__card--p:hover {
    box-shadow: 0 24px 64px rgba(124,58,237,0.22);
}

.pow__card--c:hover {
    box-shadow: 0 24px 64px rgba(6,182,212,0.17);
}

.pow__card--eco:hover {
    box-shadow: 0 24px 64px rgba(124,58,237,0.22);
}

.pow__card:hover::before {
    opacity: 1;
}

/* Top row — category tag + status badge */
.pow__card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

/* Big result number */
.pow__result {
    font-family: var(--display);
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
}

.pow__card--p   .pow__result { color: var(--purple-light); }
.pow__card--c   .pow__result { color: var(--cyan-light); }
.pow__card--eco .pow__result { color: var(--purple-light); }

/* Logo + name side by side */
.pow__identity {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Project logo */
.pow__logo {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

/* Project name */
.pow__name {
    font-family: var(--display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--w);
}

/* Cards without logo use this alone */
.pow__card > .pow__name {
    margin-top: 0;
}

/* Description */
.pow__desc {
    font-size: 0.84rem;
    color: var(--w50);
    line-height: 1.65;
}

/* ── Category Tags ── */
.cat {
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cat--meme { background: rgba(251,191,36,0.13);  color: var(--amber); }
.cat--defi { background: rgba(6,182,212,0.13);   color: var(--cyan-light); }
.cat--nft  { background: rgba(139,92,246,0.13);  color: #a78bfa; }
.cat--game { background: rgba(52,211,153,0.13);  color: var(--green); }
.cat--infra{ background: rgba(249,115,22,0.13);  color: #fb923c; }
.cat--xch  { background: rgba(6,182,212,0.13);   color: var(--cyan-light); }

/* ── Status Badges ── */
.status {
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 0.67rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.status--done {
    background: rgba(52,211,153,0.10);
    color: var(--green);
    border: 1px solid rgba(52,211,153,0.20);
}

.status--live {
    background: rgba(124,58,237,0.10);
    color: var(--purple-light);
    border: 1px solid rgba(124,58,237,0.20);
}

/* ── Ecosystem Card Names ── */
.pow__eco-names {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.pow__eco-name {
    font-family: var(--display);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--w80);
}

.pow__eco-divider {
    color: var(--w20);
    font-size: 0.9rem;
}



/* =============================================
   TESTIMONIALS
============================================= */

.testi__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-cards);
    margin-top: 48px;
}

.testi__card {
    background: var(--w03);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 40px;
    position: relative;
    overflow: hidden;
    transition: var(--transition-elastic);
}

.testi__card:hover {
    transform: translateY(-5px);
    border-color: var(--w20);
    box-shadow: 0 24px 64px rgba(124,58,237,0.15);
}

.testi__quote {
    font-family: var(--display);
    font-size: 4rem;
    line-height: 1;
    color: var(--purple);
    opacity: 0.4;
    margin-bottom: 16px;
}

.testi__text {
    font-size: clamp(15px, 1.5vw, 18px);
    color: var(--w80);
    line-height: 1.8;
    font-style: italic;
    margin-bottom: 28px;
}

.testi__footer {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.testi__name {
    font-family: var(--display);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--w);
}

.testi__result {
    font-size: 0.75rem;
    color: var(--purple-light);
    font-weight: 500;
    letter-spacing: 0.06em;
    margin-top: 4px;
}



/* =============================================
   SERVICES
============================================= */

.services {
    overflow: hidden;
}

/* Grid — mobile: 1 column */
/* Expands to 3 columns in responsive.css */
.srv__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-cards);
    margin-top: 48px;
}

/* ── Service Card ── */
.srv__card {
    background: var(--w03);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 36px 30px;
    transition: var(--transition-elastic);
}

.srv__card:hover {
    background: var(--w06);
    transform: translateY(-5px);
    border-color: var(--w20);
}

/* Icon box */
.srv__icon {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 22px;
}

/* Purple icon box */
.srv__icon--p {
    background: rgba(124,58,237,0.14);
    border: 1px solid rgba(124,58,237,0.20);
}

/* Cyan icon box */
.srv__icon--c {
    background: rgba(6,182,212,0.14);
    border: 1px solid rgba(6,182,212,0.20);
}

/* Service title */
.srv__title {
    font-family: var(--display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--w);
    margin-bottom: 10px;
    letter-spacing: -0.01em;
}

/* Service description */
.srv__desc {
    font-size: 0.84rem;
    color: var(--w50);
    line-height: 1.65;
}


/* =============================================
   CONTACT
============================================= */

.contact{
    position:relative;
}

.contact__inner {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}

.contact__inner-one{
    display:flex;
    flex-direction: column;
    gap:1rem;
}

.contact__inner .tag {
    justify-content: center;
}

.contact__inner .subtext {
    margin: 0 auto;
}

/* Social buttons row */
.contact__socials {
    display: flex;
    
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 48px;

    /*Added*/
    flex-direction:column;
    align-items: center;
}

/* ── Social Button ── */
.soc {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 28px;
    border-radius: var(--radius-full);
    background: var(--w03);
    border: 1px solid var(--border);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--w80);
    transition: var(--transition-elastic);

    /*Added*/
    justify-content: center;
    width:70%;
}

.soc:hover {
    color: var(--w);
    border-color: var(--w20);
    transform: translateY(-3px);
}

/* Individual platform glow colors on hover */
.soc--x:hover {
    box-shadow: 0 8px 28px rgba(29,161,242,0.25);
    border-color: rgba(29,161,242,0.4);
}

.soc--tg:hover {
    box-shadow: 0 8px 28px rgba(0,136,204,0.25);
    border-color: rgba(0,136,204,0.4);
}

.soc--dc:hover {
    box-shadow: 0 8px 28px rgba(88,101,242,0.25);
    border-color: rgba(88,101,242,0.4);
}

.soc--wa:hover {
    box-shadow: 0 8px 28px rgba(37,211,102,0.25);
    border-color: rgba(37,211,102,0.4);
}

/* SVG icon inside button */
.soc__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}


/* =============================================
   FOOTER
============================================= */

.footer {
    border-top: 1px solid var(--border);
    padding: 56px var(--pad-mobile);
}

/* Wallet cards row */
.footer__wallets {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 40px;
}

/* ── Wallet Card ── */
.wallet {
    padding: 22px 26px;
    background: var(--w03);
    border: 1px solid var(--border);
    border-radius: 18px;
    cursor: pointer;
    transition: var(--transition);
}

.wallet:hover {
    border-color: var(--purple);
}

/* Chain label */
.wallet__chain {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--purple-light);
    margin-bottom: 6px;
}

/* Wallet address */
.wallet__addr {
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    color: var(--w50);
    word-break: break-all;
    line-height: 1.5;
    transition: var(--transition);
}

/* Hint text */
.wallet__hint {
    font-size: 0.7rem;
    color: var(--w20);
    margin-top: 6px;
}

/* Footer bottom row */
.footer__bottom {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: center;
}

.footer__quote {
    font-family: var(--display);
    font-size: 0.85rem;
    font-style: italic;
    color: var(--w20);
}

.footer__copy {
    font-size: 0.78rem;
    color: var(--w20);
}