/* Base */
:root{
  --bg:#070b12;
  --panel:#0e1522;
  --text:#eaf0ff;
  --muted:#93a0b8;
  --accent:#f4b000; /* Buy button color placeholder */
  --accent-2:#3ddcff; /* link/hover glow */
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Inter',system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  /* Global background image (desktop) */
  background: url('./assets/images/mining/bg.png') center top / cover no-repeat fixed;
  background-color: var(--bg); /* fallback */
}
img{max-width:100%;display:block}
.a11y-hidden{position:absolute!important;clip:rect(1px,1px,1px,1px);padding:0;border:0;height:1px;width:1px;overflow:hidden}
.no-scroll{overflow:hidden}

/* Typewriter effect base */
.typewriter{display:inline-block;white-space:nowrap;overflow:hidden}
.typewriter.is-typing::after{
  content:"";
  display:inline-block;
  width:2px;
  height:1em;
  margin-left:4px;
  background:currentColor;
  vertical-align:-0.1em;
  animation: caret-blink 1s steps(1,end) infinite;
}
@keyframes caret-blink{ 50% { opacity: 0; } }

/* Register animatable property for tokenomics donut fill */
@property --p{
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

/* Features / Supported Partners */
.features{padding:64px 0;background:
  radial-gradient(1000px 500px at 50% -200px, rgba(61,220,255,.12), transparent);
}
.features__title{font-size:36px;margin:0 0 6px;text-align:center}
.features__subtitle{color:var(--muted);text-align:center;margin:0 0 24px}
.features__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:20px;align-items:center}
.features__grid li{background:#0b1321;border:1px solid rgba(255,255,255,.08);border-radius:12px;display:flex;align-items:center;justify-content:center;padding:16px;transition:transform .15s ease, background .2s}
.features__grid li:hover{transform:translateY(-2px);background:#101a2b}
.features__grid img{max-height:30px;width:auto;opacity:.9}

/* Shared section title styling (gradient, centered, underline) */
.features__title,
.roadmap__title,
.how__title,
.faq__title{
  text-align:center;
  font-weight:900;
  text-transform:uppercase;
  background:linear-gradient(180deg,#ffd96a,#ffb703 70%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  position:relative;
}
.features__title::after,
.roadmap__title::after,
.how__title::after,
.faq__title::after{
  content:"";
  display:block;
  height:3px;
  width:200px;
  margin:10px auto 0;
  border-radius:2px;
  background:linear-gradient(90deg, rgba(255,215,106,.0), rgba(255,215,106,.95), rgba(255,183,3,.0));
}

@media (max-width: 1000px){
  .features__grid{grid-template-columns:repeat(4,1fr)}
}
@media (max-width: 640px){
  .features__grid{grid-template-columns:repeat(2,1fr)}
}

/* Layout */
.container{max-width:1220px;margin:0 auto;padding:0 16px}

/* Nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(7,11,18,.7);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid rgba(255,255,255,.06)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.nav__logo img{height:96px;width:auto}

.nav__links{display:flex;gap:18px}
.nav__links a{color:var(--text);text-decoration:none;font-weight:600;font-size:14px;opacity:.9}
.nav__links a:hover{color:var(--accent-2)}

.nav__actions{display:flex;align-items:center;gap:14px}
.nav__socials{display:flex;gap:10px;align-items:center}
.nav__socials img{height:18px;width:auto;opacity:.9;transition:opacity .2s}
.nav__socials a:hover img{opacity:1}

.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:10px;padding:10px 16px;font-weight:700;text-decoration:none;color:#111}
.btn--buy{background:var(--accent);border:2px solid #000;box-shadow:0 2px 0 #000}
.btn--buy:hover{filter:brightness(1.05)}
.btn--full{width:100%}

.nav__lang{background:transparent;border:0;cursor:pointer}
.nav__lang img{height:32px;width:32px;border-radius:50%}

/* Hamburger */
.nav__hamburger{display:none;flex-direction:column;gap:4px;background:transparent;border:0;cursor:pointer;padding:8px;margin-left:4px}
.nav__hamburger span{height:2px;width:22px;background:var(--text);display:block;border-radius:2px}

/* Drawer */
.drawer__backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:49}
.drawer{position:fixed;top:0;right:-340px;width:320px;height:100vh;background:var(--panel);box-shadow:-6px 0 20px rgba(0,0,0,.4);z-index:50;transition:right .25s ease}
.drawer.open{right:0}
.drawer__header{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid rgba(255,255,255,.08)}
.drawer__logo img{height:28px}
.drawer__close{font-size:28px;line-height:1;background:transparent;border:0;color:var(--text);cursor:pointer}
.drawer__links{display:flex;flex-direction:column;padding:12px}
.drawer__links a{padding:12px 8px;border-radius:8px;color:var(--text);text-decoration:none;font-weight:600}
.drawer__links a:hover{background:rgba(255,255,255,.06)}
.drawer__socials{display:flex;gap:14px;align-items:center;padding:12px;border-top:1px solid rgba(255,255,255,.06);margin-top:auto}

/* Responsive */
@media (max-width: 1024px){
  .nav__inner{position:relative}
  .nav__links{display:none}
  .nav__links.is-open{
    display:flex;
    flex-direction:column;
    position:absolute;
    top:64px;
    right:0;
    width:min(85vw, 320px);
    background:rgba(11,19,33,.96);
    border:1px solid rgba(255,255,255,.10);
    border-radius:14px;
    padding:10px;
    box-shadow:0 20px 40px rgba(0,0,0,.45);
    z-index:60;
  }
  .nav__links.is-open a{padding:10px 8px;border-radius:10px}
  .nav__links.is-open a:hover{background:rgba(255,255,255,.06)}
  .nav__hamburger{display:flex}
}

/* Mobile background tuning */
@media (max-width: 640px){
  body{
    background: url('./assets/images/mining/bg.png') center / cover no-repeat fixed;
    background-color: var(--bg);
  }
}

/* Buy Now Section */
.buy{position:relative;padding:56px 0;background: radial-gradient(1200px 600px at 50% -200px, rgba(61,220,255,.18), transparent), url('./assets/images/background-banner.png') center/cover no-repeat;}
.buy__grid{display:grid;grid-template-columns: minmax(0,420px) minmax(0,1fr);gap:32px;align-items:start}
.buy__grid > *{min-width:0}

.card{background:var(--panel);border:2px solid #000;border-radius:16px;box-shadow:0 6px 0 #000, 0 0 0 6px rgba(0,0,0,.1) inset;padding:16px}
.buy .card{width:100%;max-width:100%}

/* Presale Card */
.presale{background:linear-gradient(180deg,#1a2a43 0%,#0f1727 100%);position:relative}
.presale__countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.presale__countdown-title{
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-align:center;
  margin:2px 0 10px;
  font-size:14px;
  background:linear-gradient(180deg,#ffd96a,#ffb703 70%);
  -webkit-background-clip:text;
          background-clip:text;
  color:transparent;
  position:relative;
}
.presale__countdown-title::after{
  content:"";
  display:block;
  height:2px;
  width:120px;
  margin:8px auto 0;
  border-radius:2px;
  background:linear-gradient(90deg, rgba(255,215,106,.0), rgba(255,215,106,.9), rgba(255,183,3,.0));
}
.presale__countdown{justify-items:center}
.presale__countdown .unit{background:#0b1321;border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:8px 6px;text-align:center}
.presale__countdown strong{font-size:20px}
.presale__countdown span{display:block;font-size:10px;color:var(--muted)}

.presale__stage .bar{height:10px;background:#0b1321;border-radius:8px;position:relative;margin:8px 0;border:1px solid rgba(255,255,255,.08)}
.presale__stage .bar span{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#f4b000,#ffd96a);border-radius:8px}
.presale__stage .row{display:flex;justify-content:center;align-items:center;font-weight:700;margin-bottom:8px;gap:10px;flex-wrap:wrap}
.presale__stage .price,.presale__stage .raised,.presale__stage .listing,.presale__stage .purchased{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(180deg, rgba(19,32,52,.95), rgba(11,19,33,.95));
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  padding:8px 12px;
  box-shadow:0 4px 12px rgba(0,0,0,.18), inset 0 0 0 1px rgba(0,0,0,.4);
}
.presale__stage .price strong,.presale__stage .raised strong,.presale__stage .listing strong,.presale__stage .purchased strong{
  background:linear-gradient(180deg,#ffd96a,#ffb703 70%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.presale__stage .price{font-weight:800}
.presale__stage .raised{font-weight:800}
.presale__stage .listing{font-weight:800}
.presale__stage .purchased{font-weight:800}

.presale__pay .label,.presale__booster .label{font-weight:700;margin:10px 0 6px}
.presale__pay .label{text-align:center}
.presale__pay .tabs{display:flex;gap:8px;justify-content:center}
.presale__pay .tab{display:flex;align-items:center;gap:6px;padding:8px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:#0b1321;color:var(--text);cursor:pointer}
.presale__pay .tab img{height:16px}
.presale__pay .tab.active{outline:2px solid var(--accent)}
.presale__pay .inputs{margin-top:8px}
.presale__pay .inputs--row{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:end}
.presale__pay label{display:block}
.presale__pay input{width:100%;background:#0b1321;border:1px solid rgba(255,255,255,.12);border-radius:10px;color:var(--text);padding:10px 12px;font-size:16px}
.presale__pay .est{font-size:13px;color:var(--muted);margin-top:6px}

@media (max-width: 560px){
  .presale__pay .inputs--row{grid-template-columns:1fr}
  .presale__countdown-title{font-size:12px}
}

.presale__booster .label{display:block;text-align:center}
.booster{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.booster__item{background:rgba(11,19,33,.8);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:10px;display:grid;place-items:center;text-align:center;transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease}
.booster__item strong{display:block;font-size:14px}
.booster__item span{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.booster__item:hover{transform:translateY(-2px)}
.booster__item.active{border-color:#ffb703;box-shadow:0 0 0 2px rgba(255,183,3,.25) inset, 0 8px 24px rgba(255,183,3,.15)}

@media (max-width: 560px){
  .booster{grid-template-columns:1fr}
}

.presale__actions{display:flex;gap:10px;margin-top:12px}
.btn--ghost{background:#0b1321;color:var(--text);border:2px solid #000;box-shadow:0 2px 0 #000}
.presale__actions .btn--ghost{
  animation: btnPulse 1.6s ease-in-out infinite;
  will-change: transform, box-shadow;
}
@keyframes btnPulse{
  0%{ transform:scale(1); box-shadow:0 2px 0 #000, 0 0 0 0 rgba(255,183,3,0.0); }
  50%{ transform:scale(1.04); box-shadow:0 2px 0 #000, 0 0 0 8px rgba(255,183,3,0.08); }
  100%{ transform:scale(1); box-shadow:0 2px 0 #000, 0 0 0 0 rgba(255,183,3,0.0); }
}
@media (prefers-reduced-motion: reduce){
  .presale__actions .btn--ghost{ animation: none; }
}

/* Right content */
.buy__content{padding:12px}
.buy__title{font-size:42px;line-height:1.1;margin:0 0 6px;word-break:break-word;overflow-wrap:anywhere}
.buy__subtitle{color:var(--muted);margin:0 0 16px;word-break:break-word;overflow-wrap:anywhere}
.buy__pills{list-style:none;margin:0;padding:0;display:grid;gap:12px;max-width:560px}
.buy__pills li{background:#0b1321;border:2px solid #000;box-shadow:0 3px 0 #000;border-radius:999px;padding:12px 16px;font-weight:800}

@media (max-width: 1024px){
  .buy__grid{grid-template-columns:1fr;gap:16px}
  .buy__content{max-width:760px;margin:0 auto;text-align:center}
}

@media (max-width: 560px){
  .buy{padding:32px 0}
  .buy__content{padding:0 8px}
  .buy__title{font-size:28px;line-height:1.15;margin:0 0 8px}
  .buy__subtitle{font-size:16px;line-height:1.5;max-width:92%;margin:0 auto 14px}
  .buy__pills{justify-items:center}
  /* Let typewriter text wrap on mobile */
  .buy__content .typewriter{white-space:normal;overflow:visible;display:block;text-wrap:balance}
}

/* --- Mining page styles --- */
.mining{padding:16px 0 80px}
.mining .card{border-radius:16px}

/* Polished mining header card */
.mining__card{
  max-width:560px;
  margin:12px auto;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:18px 18px 16px;
  background:
    linear-gradient(180deg, rgba(18,22,34,.85), rgba(10,14,24,.88)) padding-box,
    radial-gradient(120% 120% at 0% 0%, rgba(255,183,3,.20), transparent 40%),
    radial-gradient(120% 120% at 100% 0%, rgba(61,220,255,.16), transparent 40%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  backdrop-filter:saturate(140%) blur(8px);
  box-shadow:0 16px 36px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.04);
  position:relative;
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease, background .2s ease;
}
.mining__card::before{
  content:"";
  position:absolute;left:-20%;right:-20%;top:-40px;height:140px;
  background:radial-gradient(60% 60% at 50% 100%, rgba(255,255,255,.08), transparent 60%);
  pointer-events:none;
}
.mining__card::after{
  content:"";
  position:absolute;left:12px;right:12px;top:10px;height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  opacity:.5; pointer-events:none;
}
.mining__card:hover{ transform: translateY(-1px); box-shadow:0 20px 44px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.04); }
.mining__balance{display:flex;align-items:center;gap:10px}
.mining__token{width:32px;height:32px;border-radius:50%;object-fit:cover;background:#0f1422;border:1px solid rgba(255,255,255,.08)}
.mining__amount{font-size:24px;font-weight:800;letter-spacing:.2px;font-variant-numeric:tabular-nums lining-nums}

/* Rate as a pill */
.mining__rate{
  align-self:flex-start;
  color:#d6def2;
  font-size:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.14);
  padding:6px 10px;
  border-radius:999px;
  box-shadow:0 6px 14px rgba(0,0,0,.25), inset 0 0 0 1px rgba(0,0,0,.2);
}

.mining__actions{display:flex;gap:12px}
.mining__actions .btn{flex:1}

/* Buttons with gradients and states */
.mining__claim{
  color:#fff;
  background:linear-gradient(180deg, #f3db02, #faa404);
  border:0; border-radius:12px; padding:12px 14px; font-weight:800;
  box-shadow:0 6px 14px rgba(252, 206, 2, 0.35);
}
.mining__claim:hover{filter:brightness(1.06)}
.mining__claim:active{transform:translateY(1px)}
.mining__claim:focus-visible{outline:2px solid #f8b705; outline-offset:2px}

.mining__boost{
  color:#eaeef7;
  background:linear-gradient(180deg, #2a3a62, #1f2a44);
  border:0; border-radius:12px; padding:12px 14px; font-weight:800;
  box-shadow:0 6px 14px rgba(44,72,124,.35);
}
.mining__boost:hover{filter:brightness(1.06)}
.mining__boost:active{transform:translateY(1px)}
.mining__boost:focus-visible{outline:2px solid rgba(120,170,255,.6); outline-offset:2px}

.mining__visual{
  max-width:680px;
  margin:18px auto 10px;
  padding:12px;
  border-radius:16px;
  background: url('./assets/images/mining/mining-bg-desktop.jpg') center / cover no-repeat;
  text-align:center;
}
.mining__visual img{width:100%;max-width:520px;height:auto;border-radius:18px;display:inline-block;box-shadow:0 18px 38px rgba(0,0,0,.35)}

.mining__summary{
  max-width:680px;
  margin:10px auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  background: rgba(13,16,26,.65);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  backdrop-filter: saturate(140%) blur(8px);
  box-shadow: 0 12px 28px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.04);
  transition: transform .18s ease, box-shadow .18s ease, background .2s ease;
}
.mining__summary:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.04);
}
.mining__summary-item{
  display:flex;
  align-items:center;
  gap:10px;
  color:#d5dbea;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  padding:8px 10px;
  border-radius:12px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
}
.mining__summary-item img{
  width:34px;height:34px;border-radius:8px;object-fit:cover;
  background:#0f1422;
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 4px 10px rgba(0,0,0,.25);
}
.mining__summary-item strong{font-weight:800;letter-spacing:.2px}
.mining__summary-item span{color:#9fb0cc;font-size:12px}
.mining__summary-sep{
  height:28px;width:2px;
  background: linear-gradient(180deg, rgba(255,255,255,.0), rgba(255,255,255,.22), rgba(255,255,255,.0));
  border-radius:2px;
}
.mining__badge{width:28px;height:28px;border-radius:50%;background:#0f1422;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}

/* Level visuals */
.level__logo{width:28px;height:28px;object-fit:contain;border-radius:0;background:transparent;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}
.level__img{height:28px;width:auto;object-fit:contain;display:inline-block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}

.mining__nav{position:sticky;bottom:0;left:0;right:0;margin:18px auto 0;max-width:720px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:10px;border-radius:18px;background:rgba(13,16,24,.9);border:1px solid rgba(255,255,255,.06);backdrop-filter:saturate(110%) blur(6px)}
.mining__nav-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px;border-radius:12px;border:1px solid rgba(255,255,255,.06);background:rgba(20,24,36,.6);color:#eaeef7;text-decoration:none}
.mining__nav-item:hover{background:rgba(26,31,46,.85)}
/* Image-based nav icons */
.mining__nav-ico{width:24px;height:24px;object-fit:contain;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}
/* Boost button icon */
.btn__ico{width:18px;height:18px;object-fit:contain;display:inline-block;margin-right:8px;vertical-align:middle}

@media (max-width:560px){
  .mining__amount{font-size:20px}
  .mining__card{padding:14px}
  .mining__summary{flex-wrap:wrap;gap:10px;padding:12px}
  .mining__summary-item{width:calc(50% - 6px)}
  .mining__summary-sep{display:none}
}

/* About Section */
.about{position:relative;padding:72px 0;background:
  radial-gradient(800px 400px at 20% -100px, rgba(244,176,0,.15), transparent),
  radial-gradient(900px 600px at 80% -120px, rgba(61,220,255,.10), transparent);
}
.about__grid{display:grid;grid-template-columns: 460px 1fr;gap:36px;align-items:center}
.about__media{position:relative;height:auto}
.polaroid{position:absolute;inset:auto;display:block;width:min(100%,380px);background:#fff;border-radius:8px;border:2px solid #000;box-shadow:0 6px 0 #000;}
.polaroid--back{transform:rotate(-6deg);opacity:.95;left:8px;top:22px;height:280px}
.polaroid--front{position:relative;transform:rotate(4deg);padding:14px 14px 60px;width:380px}
.polaroid--front img{border-radius:6px;border:2px solid #000;box-shadow:inset 0 0 0 2px #fff}

/* Tasks section: full-width content (no media column) */
#tasks .about__grid{grid-template-columns:1fr}

.about__title{font-size:46px;line-height:1.05;margin:0 0 10px;background:linear-gradient(180deg,#ffd96a,#f4b000);-webkit-background-clip:text;background-clip:text;color:transparent;text-transform:uppercase;letter-spacing:.5px;text-align:center;position:relative}
.about__title::after{content:"";display:block;height:3px;width:200px;margin:10px auto 0;border-radius:2px;background:linear-gradient(90deg, rgba(255,215,106,.0), rgba(255,215,106,.95), rgba(255,183,3,.0))}
.about__text{max-width:560px;font-size:18px;line-height:1.6;color:var(--text)}

@media (max-width: 960px){
  .about__grid{grid-template-columns:1fr;}
  .polaroid--back{display:none}
  .polaroid--front{transform:none;margin:0 auto}
  .about__title{text-align:center}
  .about__text{text-align:center;margin:0 auto}
}

/* Tasks Checklist */
.tasks{margin-top:24px;background:rgba(11,19,33,.6);backdrop-filter:saturate(140%) blur(10px);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:16px}
.tasks__title{margin:0 0 10px;font-size:20px;letter-spacing:.2px}
.tasks__list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.task{display:flex;align-items:center;justify-content:flex-start;gap:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:10px 12px}
.task label{display:flex;align-items:center;gap:10px;font-weight:600;flex:1;min-width:0}
.task__icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;background:rgba(125,201,255,.12);border:1px solid rgba(125,201,255,.25);color:#cfe9ff}
.task__icon svg{display:block}
.task__check{appearance:none;height:18px;width:18px;border-radius:4px;border:2px solid rgba(255,255,255,.5);background:transparent;display:inline-block;position:relative;cursor:pointer}
.task__check:checked{background:#4ad7ff;border-color:#4ad7ff}
.task__check:checked::after{content:"\2713";position:absolute;inset:0;display:grid;place-items:center;color:#0b1321;font-weight:900;font-size:14px}
.task__reward{margin-left:8px;font-size:12px;font-weight:900;color:#0b1321;background:linear-gradient(135deg,#7dc9ff,#4ad7ff);padding:4px 8px;border-radius:999px;box-shadow:0 6px 14px rgba(125,201,255,.25);border:1px solid rgba(255,255,255,.25)}
.task__action{color:#0b1321;background:linear-gradient(135deg,#ffd96a,#ffb703);text-decoration:none;font-weight:800;border-radius:10px;padding:8px 12px;box-shadow:0 6px 14px rgba(255,183,3,.28)}
.task__action:hover{filter:brightness(1.05)}
.tasks__footer{display:flex;align-items:center;gap:12px;margin-top:12px}
.tasks__hint{color:var(--muted);font-size:13px}
.tasks__complete:disabled{opacity:.6;cursor:not-allowed}

/* Click-based task states */
.task__action.is-disabled{pointer-events:none;opacity:.6;filter:grayscale(0.2)}
.task--done{opacity:.9}
.task--done label{opacity:.7}
.task--done .task__reward{background:linear-gradient(135deg,#77dd77,#58d68d);color:#0b1321}

/* Mini cards row inside #tasks */
.mini-cards{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:14px;margin-bottom:16px}
.mini-card{padding:14px;min-height:180px}
.mini-card__title{margin:0 0 6px;font-size:16px;font-weight:900}
.mini-card__desc{margin:0 0 10px;color:var(--muted);font-size:14px}
.mini-card__block{display:grid;gap:8px}
.mini-stats{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.mini-stats li{display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:8px 10px}
.mini-stats span{color:var(--muted);font-size:13px}
.mini-stats strong{font-size:14px}
.mini-field{display:flex;align-items:stretch;gap:8px}
.mini-input{flex:1;min-width:0;background:#0b1321;border:1px solid rgba(255,255,255,.12);border-radius:10px;color:var(--text);padding:10px 12px;font-size:14px}
.mini-btn{background:linear-gradient(135deg,#7dc9ff,#4ad7ff);color:#0b1321;border:0;border-radius:10px;padding:10px 12px;font-weight:900;cursor:pointer}
.mini-muted{color:var(--muted)}

/* Keep tasks card compact */
.mini-card .tasks{margin:0; padding:0; background:transparent; border:0; box-shadow:none}
.mini-card .tasks__list{max-height:260px; overflow:auto; padding-right:6px}
.mini-card .tasks__title{margin:0 0 8px; font-size:16px}
.mini-card .tasks__footer{margin-top:8px}

@media (max-width: 900px){
  .mini-cards{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width: 560px){
  .mini-cards{grid-template-columns:1fr}
}

@media (max-width: 560px){
  .task{flex-direction:row;align-items:center}
  .task__action{width:auto;text-align:center;padding:6px 10px;font-size:12px;border-radius:8px}
  .tasks__footer{flex-direction:column;align-items:stretch}
}

/* Roadmap */
.roadmap{padding:64px 0}
.roadmap__title{font-size:36px;text-align:center;margin:0 0 28px}
.roadmap__steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.step{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:8px;background:rgba(11,19,33,.5);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:14px}
.step__title{font-size:16px;font-weight:800;margin:0}
.step__track{display:flex;align-items:center;gap:10px}
.step__badge{flex:0 0 auto;height:46px;width:46px;border-radius:999px;background:#4aa3ff;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;border:3px solid #fff;box-shadow:0 2px 0 #000}
.step__bar{height:14px;border-radius:999px;flex:1;position:relative}
.step__bar:after{content:"";position:absolute;right:-10px;top:0;bottom:0;width:16px;clip-path:polygon(0 0,100% 50%,0 100%)}
.step__list{margin:6px 0 0 0;padding-left:18px;color:var(--muted);font-size:14px;line-height:1.5}

/* Colors per step */
.step--1 .step__badge{background:#3f9cff}
.step--1 .step__bar{background:#3f9cff}
.step--1 .step__bar:after{background:#3f9cff}

.step--2 .step__badge{background:#ff4d6d}
.step--2 .step__bar{background:#ff4d6d}
.step--2 .step__bar:after{background:#ff4d6d}

.step--3 .step__badge{background:#06d6a0}
.step--3 .step__bar{background:#06d6a0}
.step--3 .step__bar:after{background:#06d6a0}

.step--4 .step__badge{background:#ff7a33}
.step--4 .step__bar{background:#ff7a33}
.step--4 .step__bar:after{background:#ff7a33}

.step--5 .step__badge{background:#ffb703}
.step--5 .step__bar{background:#ffb703}
.step--5 .step__bar:after{background:#ffb703}

@media (max-width: 960px){
  .roadmap__steps{grid-template-columns:1fr;}
}

/* Tokenomics */
.tokenomics{padding:88px 0;background:
  radial-gradient(900px 500px at 10% -150px, rgba(255,183,3,.10), transparent),
  radial-gradient(900px 500px at 90% -150px, rgba(61,220,255,.08), transparent);
}
.tokenomics__grid{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
.tokenomics__title{
  font-size:40px;
  margin:0 0 6px;
  letter-spacing:.2px;
  text-align:center;
  font-weight:900;
  text-transform:uppercase;
  background:linear-gradient(180deg,#ffd96a,#ffb703 70%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  position:relative;
}
.tokenomics__title::after{
  content:"";
  display:block;
  height:3px;
  width:200px;
  margin:10px auto 0;
  border-radius:2px;
  background:linear-gradient(90deg, rgba(255,215,106,.0), rgba(255,215,106,.95), rgba(255,183,3,.0));
}
.tokenomics__subtitle{color:var(--muted);margin:0 0 10px}
.tokenomics__supply{
  margin:10px 0 16px;
  font-weight:900;
  text-align:center;
  font-size:22px;
  letter-spacing:.3px;
  background:linear-gradient(180deg,#ffd96a,#ffb703 70%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  position:relative;
}
.tokenomics__supply::after{
  content:"";
  display:block;
  height:2px;
  width:160px;
  margin:8px auto 0;
  border-radius:2px;
  background:linear-gradient(90deg, rgba(255,215,106,.0), rgba(255,215,106,.9), rgba(255,183,3,.0));
}
.tokenomics__legend{list-style:none;margin:0 16px 14px 0;padding:0;display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:10px}
.tokenomics__legend li{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:8px 10px;font-weight:600}
.tokenomics__legend .dot{display:inline-block;height:10px;width:10px;border-radius:50%;margin-right:8px;vertical-align:middle}
.dot--presale{background:#f9d776}
.dot--liquidity{background:#77dd77}
.dot--burn{background:#ff6b6b}
.dot--public{background:#fdb56d}
.dot--airdrop{background:#7dc9ff}
.tokenomics__note{color:var(--muted)}

/* Token Address component */
.token-address{ 
  margin: 10px auto 16px; 
  max-width: 720px; 
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 10px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25), 0 10px 24px rgba(0,0,0,.28);
}
.token-address__label{
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: .28px;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}
.token-address__row{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}
.token-address__value{
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  background: #0b1321;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 14px;
  color: #dbe6ff;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
}
.token-address__value code{
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.token-address__actions{
  display: flex;
  gap: 8px;
}
.btn--copy, .btn--scan{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 800;
  font-size: 13px;
  border: 0;
  cursor: pointer;
}
.btn--copy{ 
  color:#0b1321; 
  background: linear-gradient(135deg,#ffd96a,#ffb703); 
  box-shadow: 0 6px 14px rgba(255,183,3,.28); 
}
.btn--copy:hover{ filter: brightness(1.05) }
.btn--copy:active{ transform: translateY(1px) }
.btn--scan{
  color:#eaeef7;
  background: linear-gradient(180deg, #2a3a62, #1f2a44);
  box-shadow: 0 6px 14px rgba(44,72,124,.35);
}
.btn--scan:hover{ filter: brightness(1.06) }
.btn--scan:active{ transform: translateY(1px) }
.btn--copy[data-copied="true"]{
  background: linear-gradient(135deg,#77dd77,#58d68d);
  box-shadow: 0 6px 14px rgba(88,214,141,.28);
}
.token-address__hint{ 
  margin-top: 8px; 
  text-align: center; 
  font-size: 12px; 
  color: var(--muted);
}
@media (max-width: 560px){
  .token-address__row{ grid-template-columns: 1fr }
  .token-address__actions{ justify-content: stretch }
  .btn--copy, .btn--scan{ flex: 1 }
}

.tokenomics__charts{display:grid;grid-template-columns:repeat(3, minmax(180px, 1fr));gap:26px;justify-items:center}
.pie{--p:40; --ring:12px; --fg:#ffd54d; --bg:#0d1524; --glow:rgba(255,213,77,.55); position:relative;height:200px;width:200px;border-radius:50%;display:grid;place-items:center;box-shadow:0 16px 40px -12px var(--glow), inset 0 0 0 1px rgba(255,255,255,.05);transition: --p 1.2s ease-out;
  background:
    conic-gradient(var(--fg) calc(var(--p)*1%), rgba(255,255,255,0) 0),
    radial-gradient(circle at 50% 35%, rgba(255,255,255,.2), rgba(255,255,255,0) 60%),
    var(--bg);
  -webkit-mask: radial-gradient(circle calc(50% - var(--ring)) at 50% 50%, transparent 98%, #000 100%);
          mask: radial-gradient(circle calc(50% - var(--ring)) at 50% 50%, transparent 98%, #000 100%);
  border:1px solid rgba(255,255,255,.08);
}
.pie::after{content:"";position:absolute;inset:12px;border-radius:50%;background:radial-gradient(circle at 50% 30%, rgba(255,255,255,.15), rgba(255,255,255,0) 60%)}
.pie:hover{transform:translateY(-2px);transition:transform .2s ease}
.pie__value{position:absolute;inset:0;display:grid;place-items:center;font-size:22px;font-weight:900}
.pie__label{position:absolute;bottom:-30px;left:0;right:0;text-align:center;font-weight:800}

/* Pie color themes */
.pie--presale{--fg:#f9d776; --glow:rgba(249,215,118,.45)}
.pie--liquidity{--fg:#77dd77; --glow:rgba(119,221,119,.35)}
.pie--burn{--fg:#ff6b6b; --glow:rgba(255,107,107,.35)}
.pie--public{--fg:#fdb56d; --glow:rgba(253,181,109,.35)}
.pie--airdrop{--fg:#7dc9ff; --glow:rgba(125,201,255,.35)}

@media (max-width: 1200px){
  .tokenomics__charts{grid-template-columns:repeat(2, minmax(180px, 1fr))}
}
@media (max-width: 1000px){
  .tokenomics__grid{grid-template-columns:1fr}
}
@media (max-width: 560px){
  .pie{height:170px;width:170px}
  .pie__label{bottom:-26px}
}

@media (max-width: 560px){
  .tokenomics__title{font-size:32px}
}

@media (max-width: 560px){
  .tokenomics__supply{font-size:18px}
}

/* Floating bubble animation for pies */
@keyframes pie-float {
  0% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-8px) scale(1.02); }
  100% { transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: no-preference){
  .pie{ animation: pie-float 7s ease-in-out infinite; }
  .tokenomics__charts .pie:nth-child(2){ animation-duration: 8s; animation-delay: .3s; }
  .tokenomics__charts .pie:nth-child(3){ animation-duration: 6.5s; animation-delay: .6s; }
  .tokenomics__charts .pie:nth-child(4){ animation-duration: 7.5s; animation-delay: .9s; }
  .tokenomics__charts .pie:nth-child(5){ animation-duration: 6.8s; animation-delay: 1.2s; }
}

/* Whitepaper */
.whitepaper{padding-top:90px}
.wp__hero{padding:64px 0 28px;background:
  radial-gradient(1000px 500px at 20% -200px, rgba(61,220,255,.12), transparent),
  radial-gradient(1000px 500px at 80% -220px, rgba(255,183,3,.10), transparent);
}
.wp__title{font-size:48px;margin:0 0 10px;text-align:center;font-weight:900;text-transform:uppercase;
  background:linear-gradient(180deg,#ffd96a,#ffb703 70%);
  -webkit-background-clip:text; background-clip:text; color:transparent; position:relative;
}
.wp__title::after{content:"";display:block;height:3px;width:220px;margin:10px auto 0;border-radius:2px;
  background:linear-gradient(90deg, rgba(255,215,106,0), rgba(255,215,106,.95), rgba(255,183,3,0));}
.wp__subtitle{margin:0 auto;text-align:center;color:var(--muted);max-width:900px}

.wp__grid{display:grid;grid-template-columns:280px 1fr;gap:26px;margin-top:28px}
.wp__toc{position:sticky;top:96px;align-self:start;background:rgba(11,19,33,.6);backdrop-filter:saturate(140%) blur(10px);
  border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:16px;box-shadow:0 16px 40px rgba(0,0,0,.35)}
.wp__toc-title{margin:0 0 8px;font-size:14px;letter-spacing:.6px;color:var(--muted);text-transform:uppercase}
.wp__toc nav{display:grid;gap:8px}
.wp__toc a{display:block;padding:10px 12px;border-radius:10px;text-decoration:none;color:var(--text);font-weight:700;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08)}
.wp__toc a:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(0,0,0,.25)}

.wp__content{background:rgba(11,19,33,.6);backdrop-filter:saturate(140%) blur(10px);border:1px solid rgba(255,255,255,.08);
  border-radius:16px;padding:22px 24px;box-shadow:0 20px 40px rgba(0,0,0,.35)}
.wp__section{padding:8px 0 18px}
.wp__section + .wp__section{border-top:1px solid rgba(255,255,255,.08)}
.wp__section h2{margin:6px 0 10px;font-size:28px;font-weight:900;background:linear-gradient(180deg,#ffd96a,#ffb703 70%);
  -webkit-background-clip:text; background-clip:text; color:transparent}
.wp__section p{margin:0 0 10px;line-height:1.65}
.wp__section ul, .wp__section ol{margin:0 0 12px 18px}
.wp__section li{margin:6px 0}
.wp__section details{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:10px 12px}
.wp__section summary{cursor:pointer;font-weight:800}

@media (max-width: 1000px){
  .wp__grid{grid-template-columns:1fr}
  .wp__toc{position:static;display:block}
}
@media (max-width: 560px){
  .wp__title{font-size:36px}
}

/* Whitepaper media & roadmap visuals */
.wp__media{margin:14px auto 6px;display:grid;gap:8px;justify-items:center}
.wp__media img{max-width:560px;width:100%;height:auto;border-radius:12px;border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);box-shadow:0 14px 34px rgba(0,0,0,.35)}
.wp__media figcaption{font-size:12px;color:var(--muted)}

.wp__roadmap{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:12px}
.wp__roadmap li{display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:center;background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:12px;box-shadow:0 10px 30px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.04)}
.wp__roadmap img{height:56px;width:56px;border-radius:12px;padding:10px;background:linear-gradient(135deg,#7dc9ff,#4ad7ff);
  border:2px solid rgba(255,255,255,.6);box-shadow:0 6px 18px rgba(125,201,255,.35)}
.wp__roadmap strong{display:block;font-size:16px;margin-bottom:4px}
.wp__roadmap p{margin:0;color:var(--muted)}

/* How To Buy */
.how{padding:88px 0;background:
  radial-gradient(900px 500px at 0% -150px, rgba(125,201,255,.10), transparent),
  radial-gradient(900px 500px at 100% -150px, rgba(255,183,3,.08), transparent);
}
.how__grid{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:start}
.how__title{font-size:40px;margin:0 0 6px}
.how__subtitle{color:var(--muted);margin:0 0 18px}
.how__steps{margin:0;padding:0;list-style:none;display:grid;gap:14px}
.step-card{display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:center;background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px;box-shadow:0 10px 30px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.04)}
.step-card .badge{height:56px;width:56px;border-radius:14px;background:linear-gradient(135deg,#4ad7ff,#7dc9ff);border:2px solid rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center;font-weight:900;color:#0b1321;box-shadow:0 6px 18px rgba(125,201,255,.35)}
.step-card__body h3{margin:0 0 4px;font-size:18px}
.step-card__body p{margin:0;color:var(--muted)}

.how__cta{display:flex;gap:12px;margin-top:18px}
.btn{appearance:none;border:0;border-radius:12px;padding:12px 18px;font-weight:800;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.btn--primary{color:#0b1321;background:linear-gradient(135deg,#ffd96a,#ffb703);box-shadow:0 10px 24px rgba(255,183,3,.35)}
.btn--ghost{color:var(--text);background:transparent;border:1px solid rgba(255,255,255,.2)}
.btn--block{width:100%;margin-top:14px;background:linear-gradient(135deg,#7dc9ff,#4ad7ff);color:#0b1321;font-weight:900}

.how__panel{position:relative}
.how__card{position:sticky;top:96px;background:rgba(11,19,33,.6);backdrop-filter:saturate(140%) blur(10px);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:20px;box-shadow:0 20px 40px rgba(0,0,0,.35)}
.how__card h3{margin:0 0 10px}
.how__bullets{margin:0;padding-left:18px;display:grid;gap:6px}

@media (max-width: 1000px){
  .how__grid{grid-template-columns:1fr}
  .how__card{position:static}
}

/* FAQ */
.faq{padding:88px 0;background:
  radial-gradient(900px 500px at 50% -180px, rgba(121,255,203,.08), transparent);
}
.faq__title{font-size:40px;margin:0 0 6px;text-align:center}
.faq__subtitle{color:var(--muted);text-align:center;margin:0 0 26px}
.faq__grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.accordion{background:rgba(11,19,33,.6);backdrop-filter:saturate(140%) blur(10px);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:0;overflow:hidden}
.accordion + .accordion{margin-top:12px}
.accordion summary{list-style:none;cursor:pointer;padding:16px 18px;display:flex;align-items:center;gap:10px;font-weight:800}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary span{flex:1}
.accordion summary::after{content:"\25BC";font-size:12px;opacity:.8;transition:transform .2s ease}
.accordion[open] summary::after{transform:rotate(180deg)}
.accordion__content{padding:0 18px 16px 18px;color:var(--muted)}
.accordion:focus-within{outline:2px solid #7dc9ff;outline-offset:2px}

.faq__cta{display:flex;gap:12px;justify-content:center;margin-top:24px}

@media (max-width: 900px){
  .faq__grid{grid-template-columns:1fr}
}

/* Scrolling Ticker */
.ticker{position:relative;background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));border-block:1px solid rgba(255,255,255,.08);padding:10px 0;overflow:hidden}
.ticker__mask{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg, rgba(13,21,36,1) 0%, rgba(13,21,36,0) 12%, rgba(13,21,36,0) 88%, rgba(13,21,36,1) 100%)}
.ticker__track{white-space:nowrap}
.ticker__inner{display:inline-flex;gap:28px;align-items:center;padding:6px 0;animation:ticker-move 28s linear infinite}
.ticker__item{font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.ticker__accent{color:#ffb703}
.ticker__muted{color:var(--muted)}
.ticker__dot{opacity:.5}

@keyframes ticker-move {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Listings */
.listings{padding:32px 0;background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00))}
.listings__head{text-align:center;margin-bottom:12px}
.listings__title{margin:0;font-size:20px;font-weight:800;letter-spacing:.2px;color:var(--muted);text-transform:uppercase}
.listings__row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;row-gap:18px;opacity:.95}
.listings__row img{height:28px;width:auto;object-fit:contain;filter:none;opacity:1;transition:none}
.listings__row img:hover{filter:none;opacity:1;transform:none}

@media (max-width: 560px){
  .listings{padding:24px 0}
  .listings__row img{height:24px}
}

/* Team */
.team{padding:64px 0;background: radial-gradient(1200px 600px at 50% -300px, rgba(61,220,255,.12), transparent)}
.team__head{text-align:center;margin-bottom:24px}
.team__title{font-size:36px;line-height:1.1;margin:0;text-transform:uppercase;font-weight:900;letter-spacing:.5px;
  background:linear-gradient(180deg,#ffd96a,#ffb703 70%);
  -webkit-background-clip:text; background-clip:text; color:transparent; position:relative;
}
.team__title::after{
  content:""; display:block; height:3px; width:200px; margin:10px auto 0; border-radius:2px;
  background:linear-gradient(90deg, rgba(255,215,106,.0), rgba(255,215,106,.95), rgba(255,183,3,.0));
}
.team__subtitle{color:var(--muted);margin:8px 0 0}
.team__grid{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:22px;align-items:stretch}
.team__card{background:rgba(11,19,33,.55);backdrop-filter:saturate(140%) blur(10px);border:1px solid rgba(255,255,255,.10);border-radius:18px;padding:18px;display:flex;flex-direction:column;align-items:center;text-align:center;box-shadow:0 16px 36px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.35);transition:transform .18s ease, box-shadow .18s ease, border-color .2s ease;animation: teamRise .5s ease both}
.team__card:hover{transform:translateY(-4px);box-shadow:0 24px 44px rgba(0,0,0,.42), inset 0 0 0 1px rgba(0,0,0,.4);border-color:rgba(255,255,255,.14)}
.team__avatar{position:relative;width:140px;height:140px;border-radius:50%;padding:3px;background:conic-gradient(from 0deg, #ffd96a, #3ddcff, #ffd96a);box-shadow:0 8px 24px rgba(0,0,0,.35);}
.team__avatar::after{content:"";position:absolute;inset:3px;border-radius:50%;background:#0b1321;z-index:0}
.team__avatar img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;border:3px solid #000}
.team__name{margin:12px 0 2px;font-size:18px}
.team__role{margin:0 0 12px;color:var(--muted);font-size:14px}
.team__socials{display:flex;gap:10px}
.btn-icon{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg, rgba(11,19,33,.95), rgba(14,22,36,.95));border:1px solid rgba(255,255,255,.12);box-shadow:0 2px 0 #000, 0 8px 22px rgba(0,0,0,.22);transition:transform .15s ease, box-shadow .2s ease}
.btn-icon:hover{transform:translateY(-1px);box-shadow:0 3px 0 #000, 0 12px 26px rgba(0,0,0,.28)}
.btn-icon:focus{outline:2px solid #7dc9ff;outline-offset:2px}
.btn-icon img{width:18px;height:18px;opacity:.95}

@keyframes teamRise{from{opacity:0; transform:translateY(10px)} to {opacity:1; transform:translateY(0)}}
.team__card:nth-child(1){animation-delay:.0s}
.team__card:nth-child(2){animation-delay:.06s}
.team__card:nth-child(3){animation-delay:.12s}
.team__card:nth-child(4){animation-delay:.18s}

@media (max-width: 1024px){
  .team__grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width: 560px){
  .team{padding:48px 0}
  .team__grid{grid-template-columns:1fr}
  .team__title{font-size:30px}
}

/* Footer */
.site-footer{margin-top:32px;border-top:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));}
.footer__grid{display:grid;grid-template-columns:1.2fr .8fr auto;gap:28px;align-items:start;padding:28px 16px}
.footer__logo img{height:34px;width:auto}
.footer__tag{color:var(--muted);margin:10px 0 0;max-width:520px}

.footer__links{display:grid;grid-template-columns:repeat(2, minmax(120px, 1fr));gap:10px}
.footer__links a{color:var(--text);text-decoration:none;font-weight:700;opacity:.9;padding:6px 0}
.footer__links a:hover{color:var(--accent-2)}

.footer__socials{display:flex;gap:12px;align-items:center;justify-content:flex-end}
.footer__socials img{height:20px;width:auto;opacity:.9;transition:opacity .2s ease}
.footer__socials a:hover img{opacity:1}

.footer__bottom{border-top:1px solid rgba(255,255,255,.08);padding:12px 0;background:rgba(7,11,18,.5)}
.footer__bottom .container{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:14px}
.footer__legal{display:flex;gap:14px}
.footer__legal a{color:var(--muted);text-decoration:none}
.footer__legal a:hover{color:var(--text)}

@media (max-width: 900px){
  .footer__grid{grid-template-columns:1fr;gap:20px}
  .footer__socials{justify-content:flex-start}
}